body { width: 100%; margin: 0; }

#bodyContainer { width: 1200px; margin: 0 auto;}
#head { text-align: center; position: relative; }
    #head #menu_btn { position: absolute; left: 0px; top: 28px; background-image: url('../sohoimg/menu.png'); background-repeat: no-repeat; background-position: left; display: inline-block; width: 56px; height: 40px; line-height: 15px; text-align: right; margin-left: 20px; font-family: 'Barlow Condensed'; font-size: 18px; background-size: initial; background-position: left top; cursor: pointer; }

        /*#head #menu_btn:hover + #menu { opacity: 0.8; z-index: 20; padding-left: 0px; }*/
#menu { position: absolute; width: 100%; height: 70px; background-color: white; top: 73px; opacity: 0; padding-left: 20px;box-sizing:border-box;z-index: 999; }
    /*#menu:hover { opacity: 0.8; z-index: 20; padding-left: 0px; }*/
    #menu a { float: left; height: 70px; line-height: 70px; margin-left: 40px; cursor: pointer; color: rgb(64,64,64);  }

#head #logo { display: inline-block; background-image: url('../sohoimg/LOGO_2x.png'); width: 197px; height: 70px; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: contain; }
#head #lang_En { position: absolute; left: 1100px; top: 24px; font-family: 'Barlow Condensed'; font-size: 18px; font-weight: 400; cursor: pointer; color: black; text-decoration: none; }
#head #lang_Cn { position: absolute; left: 1158px; top: 24px; font-family: 'Barlow Condensed'; font-size: 14px; font-weight: 500; line-height: 26px; cursor: pointer; color: black; text-decoration: none; }
#head #lang_En:after { content: ""; display: inline-block; width: 2px; border-right: solid 2px #8F8F8F; height: 13px; position: relative; top: 1px; left: 3px; }
#head #lang_En.selected { color: rgb(220, 66, 39); font-weight: 500; }
#head #lang_Cn.selected { color: rgb(220, 66, 39); font-weight: 600; }


#banner { width: 1200px; height: 500px; }
    #banner div[flagType] { display: none; position: relative; }
        #banner div[flagType].selected { display: block; }
        #banner div[flagType] > div a { display: block; position: absolute; top: 0px; left: 0px; opacity: 0; transition: opacity ease-in-out 500ms; height: 500px;width:100%; background-size: cover; background-repeat: no-repeat; background-position: center; }
            #banner div[flagType] > div a.selected { opacity: 1; }
            #banner div[flagType] > div a img { width: 100%; height: auto; }
        #banner div[flagType] > ul { display: block; position: relative; top: 495px; width: 100%; font-size: 0;z-index:100; }
            #banner div[flagType] > ul li { display: inline-block; width: 20%; height: 5px; background-color: white; opacity: 0.2; cursor: pointer; }
                #banner div[flagType] > ul li.selected { opacity: 1; }
        /*#banner div[flagType] > span { display: block; height: 70px; position: absolute; top: 300px; left: 75px; }*/
        #banner div[flagType] > span { display: block; width: 1200px; height: 200px; position: absolute; top: 200px; left: 0px; z-index: 50; background-size: contain; }
            #banner div[flagType] > span p { margin: 0px; font-size: 40px; font-weight: 800; color: white; font-family: 'Barlow Condensed'; }
                #banner div[flagType] > span p:nth-child(3) { font-size: 18px; font-weight: 500; }


#videoPart { position: relative; }
    #videoPart div { font-size: 64px; font-weight: 800; position: absolute; color: white; font-family: 'Barlow Condensed'; word-spacing: 7px; text-shadow: 0px 0px 3px rgba(0,0,0,0.8); }
        #videoPart div:nth-child(2) { top: 284px; left: 30px; }
        #videoPart div:nth-child(3) { top: 341px; left: 30px; }
    #videoPart span { font-size: 22px; position: absolute; top: 432px; left: 30px; color: white; text-shadow: 0px 0px 3px rgba(0,0,0,0.8); }
#imgvedio {width:100%;height:100%;}
#shoho3q { width: 127px; height: 44px; line-height: 44px; text-align: center; background-color: rgb(255, 131, 0); border-radius: 3px; font-size: 18px; color: white; font-weight: bold; position: relative; cursor: pointer; float: right; top: 20px; }
    #shoho3q:hover { background-color: rgb(240, 111, 0) }

    #shoho3q:after { content: ""; border: solid 6px transparent; border-left-color: #fff; border-left-width: 8px; display: block; position: absolute; left: 105px; top: 17px; animation: soho3q 2s ease infinite; }

@keyframes soho3q {
    0% { transform: translate(0px); }
    55% { transform: translate(5px); }
    100% { transform: translate(0px); }
}

#tabDistrict li[flag=soho3q] a { color: rgb(255, 131, 0); font-weight: bold; }

#tabDistrict { width: auto; height: 84px; line-height: 84px; display: inline-block; padding-left: 45px; }
    #tabDistrict li { font-size: 18px; font-weight: normal; float: left; cursor: pointer; color: rgb(192,192,192); }
        #tabDistrict li a { text-decoration: none; color: rgb(192,192,192); }
    #tabDistrict .selected a{ font-weight: bold; color: rgb(230,67,64); }
        #tabDistrict li:not(:first-child) { margin-left: 80px; }
.listMainProj li { margin-bottom: 16px; }

    .listMainProj li div { color: white; }
    .listMainProj li a { display: block; width: 1200px; height: 440px; box-sizing: border-box; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0px -100px 147px -40px #000 inset; font-size: 32px; font-weight: bold; cursor: pointer; color: white; text-align: center; padding-top: 364px; }

.listSecondProj li { width: 1200px; height: 393px; margin-bottom: 16px; display: block; }

    .listSecondProj li a { width: 592px; height: 393px; float: left; box-sizing: border-box; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0px -160px 160px -70px #000 inset; font-size: 32px; font-weight: bold; cursor: pointer; color: white; text-align: center; padding-top: 318px; }
        .listSecondProj li a:nth-child(2n) { margin-left: 16px }
    .listSecondProj li div { color: white; }

#foot { background-color: #F1F1F1; padding: 60px 30px }
#footContainer { width: 1200px; margin: 0 auto; font-size: 0; }
    #foot a { color: rgb(66,66,66); font-size: 14px; line-height: 20px; font-weight: 500; }
        #foot a:not(:first-child) { margin-left: 20px; }
    #foot #contactTitle { color: rgb(102, 102, 102); font-size: 16px; line-height: 20px; font-weight: bold; display: block; border-top: solid 1px #CBCBCB; padding-top: 43px; margin-top: 50px; }
    #foot pre { color: rgb(102, 102, 102); font-size: 12px; line-height: 20px; font-weight: normal; display: inline-block; vertical-align: top; margin-right: 40px; }
    #foot #copyright span { color: rgb(102, 102, 102); font-size: 12px; line-height: 20px; font-weight: normal; }