ul,ol,li{list-style: none;}
a,a:hover{ text-decoration:none}
.main-div{display: flex;width: 100vw;height: 100vh;position: relative;min-height: 550px;background:url(../images/indexbg.jpg);background-repeat: no-repeat;overflow: hidden;background-position: center bottom;}
.reel-start,
.reel-end{width: 9vw;height: 100%;z-index: 2;/*background-image: url(../images/reel_bg.jpg);background-size: cover;background-repeat: no-repeat;*/}
html[lang="en"] .reel-start,
html[lang="en"] .reel-end{width: 10%;}
.reel-start{padding: 2% 1%;}
.reel-end{display: flex;justify-content: center;}
.reel-main{width: 100%;height: 100%;overflow: scroll; padding:250px 0px 150px 200px;}
.reel-main .inner{min-width: 1000px;height: 100%;display: -webkit-box;}
.reel-main .inner .card{border: unset;width: 18vw;height: 100%;display: flex;justify-content: center;align-items: center;cursor: pointer;transition: width 1s;position: relative;}
.reel-main .inner .card:hover{width: 22vw;}
.reel-end .arrow-div{align-self: center;text-align: center;}
.control-reel-left,
.control-reel-right,
.control-poster-left,
.control-poster-right{width: 45px;cursor: pointer;}
.control-reel-left:hover,
.control-reel-right:hover{width: 50px;}
.cof-logo,
.menu-search-logo{width: 100%;}
.menu-search-logo{max-width: 30px;margin-bottom: 20%;}
.reel-start .inner{padding: 10% 5%;display: grid;justify-items: center;}
html[lang="en"] .reel-start .inner{display: unset;}
.reel-start .inner .title{width: 1ch;writing-mode: tb-rl;color: black;text-decoration: none;line-height: 1.3;margin-bottom: 13%;font-family: "STFANGSO";font-size: 1.1rem;}
html[lang="en"] .reel-start .inner .title{width: auto;writing-mode:inherit;font-size: 1em;}
html[lang="en"] .reel-start .inner .title-div{margin-bottom: 10%;}
.reel-start .inner .title:hover{font-size: 1.3rem;}
html[lang="en"] .reel-start .inner .title:hover{font-size: 1.1rem;}
.reel-start .inner .title.more{position: relative;}
.reel-start .inner .title.more:hover .more-menu{
   display: flex;
   flex-direction: row;}
html[lang='en'] .reel-start .inner .title.more:hover .more-menu{
   display: flex;
   flex-direction: column;}
.reel-start .inner .title.more .more-menu{display: none;position: absolute;bottom: 1em;right: -7em;min-width: 150px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);background-color: #997d61;min-height: 45px;padding: 10px 0;}
.reel-start .inner .title.more .more-menu a{text-decoration: none;color: white;cursor: pointer;writing-mode: horizontal-tb;text-align: center;padding: 0 30px;}
.function-div{display: flex;}
.function-div .function-icons{width: 25px;cursor: pointer;}
.function-dropdown{position: relative;}
.function-div .function-icons.lang:hover{content: url("../images/icon_lang_hover.png");}
.function-div .function-icons.textsize:hover{content: url("../images/icon_textsize_hover.png");}
.function-div .function-icons.share:hover{content: url("../images/icon_share_hover.png");}
.function-div .function-dropdown:hover .function-menu{display: block;}
.function-menu{position: absolute;display: none;min-width: 60px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);background-color: #997d61;min-height: 45px;text-align: center;padding: 10px 0;}

.function-menu p{color: white;padding: 10%;cursor: pointer;}
.function-menu .facebook-icons{width: 40px;}
.font-l{font-size: 1.2em;}
.font-m{font-size: 1em;}
.font-s{font-size: 0.8em;}
.bg-horizontal-bar{width: 100%;height: 23px;position: absolute;/*background-image: url("../images/bg_horizontal_bar.jpg");background-size: 100% auto;background-repeat: repeat-x;*/background-image:url(../images/bodybg.jpg);;background-size: 100% auto;background-repeat: repeat-x;z-index: 1;}
.bg-horizontal-bar.top{top: 0; height:158px; background:#fff}
.bg-horizontal-bar.top .button {overflow: hidden;height:280px;margin: 0 125px;}
.bg-horizontal-bar.top .button li {float: left;margin: 0px 45px;padding: 0px;width: 65px;position: relative;font-family: "楷体", "楷体_GB2312"; list-style:none}
.bg-horizontal-bar.top .button li #jzdg {width: 104px !important;}
.bg-horizontal-bar.top .button li:hover .button_arrow {display: block;top: 160px;opacity: 1; width:102px; background:#fff; border-radius:5px}
.bg-horizontal-bar.top .button li:hover .button_arrow.bqn1 {width:34px;left:17px}
.bg-horizontal-bar.top .button li:hover .button_arrow.bqn2 {width:68px;}
.bg-horizontal-bar.top .button li:hover .button_arrow.bqn3 {width:102px;left:-17px}
.bg-horizontal-bar.top .button li:hover .button_arrow.bqn4 {width:136px;}
.bg-horizontal-bar.top .button li:hover .button_arrow.bqn5 {width:170px;}
.bg-horizontal-bar.top .button li:hover .button_name a {border: 1px solid #cfa972 !important;font-size: 21px;color:#333}
.bg-horizontal-bar.top .button li:hover .button_line {visibility: visible;}
.bg-horizontal-bar.top .button li .button_line {text-align: center;visibility: hidden;}
.bg-horizontal-bar.top .button li .button_line img {width: 2px;height: 30px;}
.bg-horizontal-bar.top .button li .button_name {text-align: center;padding: 0px 8px;}
.bg-horizontal-bar.top .button li .button_name a {display: block;padding: 12px;font-size: 21px;color:#333}
.bg-horizontal-bar.top .button li .button_name img {width:60px;height:60px;}
.bg-horizontal-bar.top .button li .button_logo {text-align: center; margin-top:40px}
.bg-horizontal-bar.top .button li .button_logo a {display: block;}
.bg-horizontal-bar.top .button li .button_logo img {width:60px;height:60px;}
.bg-horizontal-bar.top .button li .button_arrow {position: absolute;width: 68px;opacity: 0;top: 0;transition: all 0.4s ease-in-out;}
.bg-horizontal-bar.top .button li .button_arrow .arrow_menu {width: 34px;float: left;height: 120px;padding: 5px 6px;}
.bg-horizontal-bar.top .button li .button_arrow .arrow_menu a {font-size: 18px;color:#333}


.bg-horizontal-bar.bottom{bottom: 0;}
.poster-image{width: 100%;height: 100%;object-fit: cover;object-position: center; 
}
.left-position{object-position: 70% 100%;}
.poster-infos{position: absolute;min-height: 180px;bottom: 0;background-color: rgb(0, 0, 0, 0.5);width: 100%;color: white;padding: 8%;}
.poster-infos p{margin-bottom: 0.3rem;}
.poster-infos .main-title{font-size: 1.3em;}
.poster-infos .location-title{font-size: 1em;margin-bottom: 0;display: flex;font-family: "CXingHK";}
html[lang="sc"] .poster-infos .location-title{font-family: STXINGKA;}
html[lang="en"] .poster-infos .location-title{font-family: "NotoSerifTC";}
.poster-infos .location-image{width: 20px;height: 20px;margin-right: 5px;}
.poster-infos .date-title{font-family: "NotoSerifTC";}
.stage-performance-div,
.outreach-div{position: relative;min-width: 1500px;height: 100%;padding: 4% 5%;background-image: url(../images/bg_inside.jpg);background-size: auto 100%;background-repeat: repeat-x;}
.stage-performance-div .pref-div{height: 100%;position: relative;}
.stage-performance-div .main-title,
.outreach-div .main-title{writing-mode: tb-rl;font-size: 1.5rem;border-right-width: 1px;padding-left: 5%;border-left: 1px #bc202e solid;font-family: "CXingHK";}
html[lang="sc"] .stage-performance-div .main-title,
html[lang="sc"] .outreach-div .main-title{font-family: STXINGKA;}
html[lang="en"] .stage-performance-div .main-title,
html[lang="en"] .outreach-div .main-title{writing-mode: inherit;font-family: "NotoSerifTC";}

.stage-main{width: 50%;margin-right: 3%;}
.stage-main .stage-item{position: relative;}
.stage-main .stage-item .stage-image-hover{display: none;position: absolute;left: 4%;top: 0;}
.stage-main .stage-image,
.stage-image-hover{width: 13vw;cursor: pointer;}
.poster-small .stage-image,
.poster-small .stage-image-hover{width: 9vw;}
html[lang="en"] .stage-main .stage-image, 
html[lang="en"] .stage-image-hover{width: 11vw;}
.image-blur{filter: blur(4px);}
.stage-main p{margin-bottom: 0.3rem;}
html[lang="en"] .stage-main .stage-infos p{letter-spacing: 0;font-family: "NotoSerifTC";font-size: 0.8em;}
.stage-main .stage-infos p{font-size: 1em;}
.stage-main .stage-infos{margin-top: 2%;}
.stage-main .stage-date{padding-left: 3%;border-left: 1px #bc202e solid;margin-bottom: 5%;color: #847c74;}
.stage-main .stage-title{color: #847c74;}
.stage-main .stage-theater{font-size: 1.2em;}
.stage-main .stage-location{display: flex;}
.stage-main .stage-location span{color: #847c74;font-size: 0.9em;}
.stage-location .location-image{width: 17px;height: 17px;align-self: center;margin-right: 3%;}
.stage-margin-top{margin-top: 3%;}
.pref-div .pref-left,
.outreach-inner-div .pref-left{text-align: -webkit-center;position: relative;}
html[lang="en"] .pref-div .pref-left{padding-top: 20%;}
.pref-left .arrow-left,
.pref-left .arrow-right{position: absolute;cursor: pointer;z-index: 1;}
.pref-left .arrow-left{left: 35%;}
.pref-left .arrow-right{right: 20%;margin-top: 10%;}
.pref-left .title-bg {position: absolute;top: 0;left: 0;}
.stage-bg-mountain,
.stage-bg-string,
.calendar-image,
.outreach-div .bg-boat,
.outreach-div .bg-bamboo,
.outreach-div .bg-fish,
.outreach-div .bg-fish-02{position: absolute;}
.stage-bg-mountain{bottom: 10%;left: 0;}
.stage-bg-string{left: 0;right: 0;margin: 0 auto;top: -50%;}
.calendar-image{bottom: 5%;left: 0;right: 0;margin: 0 auto;cursor: pointer;}
.outreach-inner-div{height: 100%;}
.outreach-inner-div .left-div{align-self: center;}
.outreach-one,
.outreach-two,
.outreach-three,
.outreach-four,
.outreach-five{background-size: 100%;background-repeat: no-repeat;position: absolute;display: flex;align-items: center;justify-content: center;}
.outreach-one,
.outreach-four{background-image: url(../images/bg_img08.png);width: 320px;height: 320px;}
.outreach-one{top: 10%;}
.outreach-two,
.outreach-three,
.outreach-five{background-image: url(../images/bg_img09.png);width: 220px;height: 220px;}
.outreach-two{left: 37%;top: 20%;}
.outreach-three{top: 55%;left: 20%;}
.outreach-four{bottom: 15%;left: 55%;}
.outreach-five{right: 5%;top: 5%;}
.outreach-inner-div .right-div{position: relative;text-align: center;color: #023020;font-family: 'NotoSerifTC';font-size: 1.2rem;font-weight: bold;}
.outreach-div .bg-boat{width: 17vw;bottom: 8%;}
.outreach-div .bg-bamboo{top: 0;width: 18vw;left: 13%;}
.outreach-div .bg-fish{bottom: 15%;left: 28%;}
.outreach-div .bg-fish-02{right: 15%;top: 28%;}
.homepage-footer{min-width: 500px;width: 50vw;background-image: url(../images/poster_bg_v2.jpg);background-size: cover;background-repeat: no-repeat;padding: 6% 4%;color: white;display: grid;}
.homepage-footer .footer-title{font-size: 2.5rem;width: fit-content;background: -webkit-linear-gradient(left,#42fcf7, #d863ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.homepage-footer .bottom-div{margin-top: 2%;}
.homepage-footer .bottom-div a{color: #858282;}
.homepage-footer .bottom-div .items{margin-bottom: 1.5%;}
.homepage-footer .top-div,
.homepage-footer .bottom-div{width: 90%;}

.homepage-footer .other-div{border-top: 1px white solid;align-self: flex-end;}
.other-div .mechanism-logos{width: 100px;margin: 2%;}
.other-div .infos{color: #858485;}
.other-div .infos a{margin: 2%;color: #858485;}
.other-div .infos .copyright{margin-left: 2%;color: #848484;}
.inner-scroll-div{max-width: 950px;overflow-x: scroll;}
.inner-main-div{display: flex;width: 1900px;}
.card-poster-div{display: -webkit-box;}
.mobile{display: none;}
.control-poster-div{text-align: center;}
.ticket-guide .prog-info{padding-top: 5%;}
.ticket-guide .main-info .guide-title p{writing-mode: vertical-rl;text-orientation: upright;font-size: 2em;border-left: 1px solid #bd1e2d;padding-left: 20px;font-family: CXing;margin: 0;}
html[lang='sc'] .ticket-guide .main-info .guide-title p{font-family: STXINGKA;}
html[lang="en"] .ticket-guide .main-info .guide-title p{writing-mode: horizontal-tb;}
.ticket-guide .main-info{padding-top: 10em;}
.ticket-guide .main-info .info-div{margin-top: 5%;padding: 3%;background-color: rgba(252, 250, 240, 0.6);}
.outreach-div .outreach-title{font-family: "CXingHK";font-size: 1.5rem;}
.outreach-div .outreach-title >a{color: #023020;text-decoration: none;}
html[lang="sc"] .outreach-div .outreach-title{font-family: STXINGKA;}
html[lang="en"] .outreach-div .outreach-title{font-family: 'NotoSerifTC';font-size: 1.1rem;}
.mfp-container{padding: 0 !important;height: 100%;display: flex;background-color: white;}
.mfp-container .mfp-content{align-self: center;}
.mfp-video {position: relative;/* height: 100vh; */}
.mfp-video > img{width: 100vw !important;/* height: 100vh; */object-fit: cover;}
.mfp-close {display: none !important;}
.mfp-container .mfp-preloader{display: none;}
.mfp-wrap{z-index: 10;}