body { width: 100%; min-width: 200px; margin: 0 auto; font-size: 0; }

video { width: 100%; height: auto; }

#head { text-align: center; position: relative;  }

    #head #menu_btn { position: absolute; left: 0px; top: 20px; 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: auto; background-color: white; top: 56px; opacity: 0; padding-left: 20px; box-sizing: border-box; z-index: 0;}
    /*#menu:hover { opacity: 0.8; z-index: 20; padding-left: 0px; }*/
    #menu a { width: 50%; height: 40px; line-height: 40px; cursor: pointer; display: block; float: left; z-index: 20; font-size: 16px; color: rgb(64,64,64);  }

#head #logo { display: inline-block; background-image: url('../sohoimg/LOGO_2x.png'); width: 149px; height: 53px; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: contain; }
#head #lang_En { position: absolute; right: 51px; top: 16px; font-family: 'Barlow Condensed'; font-size: 14px; font-weight: 400; cursor: pointer; color: black; text-decoration: none; }
#head #lang_Cn { position: absolute; right: 20px; top: 12px; font-family: 'Barlow Condensed'; font-size: 12px; 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: 100%; height: auto; }

    #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: 130px; 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: 300px; }

        #banner div[flagType] > ul { display: block; position: relative; top: 295px; 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.5; cursor: pointer; }

                #banner div[flagType] > ul li.selected { opacity: 1; }

        /*#banner div[flagType] > span { display: block; height: 70px; position: absolute; top: 110px; left: 50px; }*/
        /*#banner div[flagType] > span { display: block;  position: absolute; top: 30px; left: 0px; z-index: 50;background-repeat:no-repeat; background-size: 100% 100%; }*/
        #banner div[flagType] > span { display: block; height: 86px; width: 100%; position: absolute; top: 30px; left: 0px; z-index: 50;background-repeat:no-repeat; background-size: cover; }

            #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: 12px; }


#videoPart { position: relative; }

    #videoPart div { font-size: 20px; font-weight: 800; position: absolute; color: white; font-family: 'Barlow Condensed'; word-spacing: 0px; text-shadow: 0px 0px 3px rgba(0,0,0,0.8); }

        #videoPart div:nth-child(2) { bottom: 33px; left: 17px; }

        #videoPart div:nth-child(3) { bottom: 33px; left: 139px; }

    #videoPart span { font-size: 13px; position: absolute; bottom: 19px; left: 17px; color: white; text-shadow: 0px 0px 3px rgba(0,0,0,0.8); }

#imgvedio { width: 100%; height: 100%; }

#shoho3q { width: 70px; height: 40px; line-height: 40px; text-align: center; background-color: rgb(255, 131, 0); font-size: 12px; color: white; font-weight: bold; position: relative; cursor: pointer; float: right; }

    #shoho3q:hover { background-color: rgb(240, 111, 0) }

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

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

    55% { transform: translate(3px); }

    100% { transform: translate(0px); }
}

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

#tabDistrict { width: auto; height: 40px; line-height: 40px; display: inline-block; padding-left: 20px; box-sizing: border-box; margin: 0px; }

    #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: 20px; }

.listMainProj li { margin-bottom: 5px; }

    .listMainProj li div { color: white; }

    /**    .listMainProj li a { display: block; width: 100%; height: 250px; box-sizing: border-box; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0px -80px 160px -60px #000 inset; font-size: 32px; font-weight: bold; cursor: pointer; color: white; text-align: center; padding-top: 200px; }**/

    .listMainProj li a { display: block; width: 100%; height: 130px; box-sizing: border-box; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0px -80px 160px -60px #000 inset; font-size: 18px; font-weight: bold; cursor: pointer; color: white; text-align: center; padding-top: 98px; }


.listSecondProj li { width: 100%; height: auto; margin-bottom: 16px; display: block; }

     .listSecondProj li a { width: 49%; height: 164px; float: left; box-sizing: border-box; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0px -70px 60px -40px #000 inset; font-size: 15px; font-weight: bold; cursor: pointer; color: white; text-align: center; padding-top: 128px; margin-bottom: 16px; }
        /*     .listSecondProj li a { width: 100%; height: 130px; float: left; box-sizing: border-box; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; box-shadow: 0px -70px 60px -40px #000 inset; font-size: 18px; font-weight: bold; cursor: pointer; color: white; text-align: center; padding-top: 98px; margin-bottom: 5px; } **/

        .listSecondProj li a:nth-child(2n) { margin-left: 2%; }

    .listSecondProj li div { color: white; }

#foot { background-color: #F1F1F1; padding: 60px 30px; clear: both; }

    #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; }