.wrap{position: relative; width: 100%; max-width: 1920px; min-width: 1280px; height: 1080px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/bg-wrap.jpg") no-repeat top center; margin: 0 auto; overflow: hidden;}
.wrapper-video{position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;}
.bg-video{position: absolute; display: block; min-height: 100%; min-width: 100%; width: auto; height: auto; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.logo, .date, .wrap-event a, .btn-close, .nav-popup a{display: block; position: absolute;}
.logo{top: 50px; left: 20px; z-index: 5; width: 235px; height: 94px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/logo.png") no-repeat;}
.nav-top{position: absolute; right: 20px; top: 40px; z-index: 5; width: 54px; height: 185px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/float_nav.png") no-repeat;} .nav-top a{display: block; width: 100%; height: 33.333333333%;}
.main{position: relative; width: 1280px; height: 100%; margin: 0 auto;}
.date{left: 50%; top: 385px; width: 202px; height: 71px; margin-left: -150px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/img-date.png") no-repeat;}
.wrap-event a{width: 144px; height: 144px; border-radius: 100%; overflow: hidden;} .wrap-event a:before, .nav-popup a:before{content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -150px; background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); -webkit-transform: skewX(-25deg); -moz-transform: skewX(-25deg); -o-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); overflow: hidden;} .wrap-event a:hover:before, .nav-popup a:hover:before{left: 150px; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s}
.wrap-event .btn-event1{top: 615px; left: -5px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/btn-event1.png") no-repeat; animation: FloatAni 1s ease infinite alternate; -o-animation: FloatAni 1s ease infinite alternate; -moz-animation: FloatAni 1s ease infinite alternate; -webkit-animation: FloatAni 1s ease infinite alternate;}
.wrap-event .btn-event2{top: 455px; left: 195px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/btn-event2.png") no-repeat; animation: FloatAni 1s .2s ease infinite alternate; -o-animation: FloatAni 1s .2s ease infinite alternate; -moz-animation: FloatAni 1s .2s ease infinite alternate; -webkit-animation: FloatAni 1s .2s ease infinite alternate;}
.wrap-event .btn-event3{top: 534px; left: 435px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/btn-event3.png") no-repeat; animation: FloatAni 1s .4s ease infinite alternate; -o-animation: FloatAni 1s .4s ease infinite alternate; -moz-animation: FloatAni 1s .4s ease infinite alternate; -webkit-animation: FloatAni 1s .4s ease infinite alternate;}
@keyframes FloatAni{to{transform: translateY(-5px);}}
@-o-keyframes FloatAni{to{-o-transform: translateY(-5px);}}
@-moz-keyframes FloatAni{to{-moz-transform: translateY(-5px);}}
@-webkit-keyframes FloatAni{to{transform: translateY(-5px);}}
.popup{display: none; position: absolute; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/bg-popup.jpg") no-repeat top center;}
.btn-close{top: 498px; left: 50%; width: 144px; height: 144px; margin-left: 702px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/btn-close.png") no-repeat; transition: transform .3s; -o-transition: transform .3s; -ms-transition: transform .3s; -moz-transition: transform .3s; -webkit-transition: transform .3s;} .btn-close:hover{transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg);}
.nav-popup{position: absolute; left: 0; top: 260px; width: 397px; height: 672px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/img-circle.png") no-repeat; overflow: hidden; -webkit-animation: fadeInLeft .7s .2s cubic-bezier(0,.89,0,1) both; -moz-animation: fadeInLeft .7s .2s cubic-bezier(0,.89,0,1) both; -o-animation: fadeInLeft .7s .2s cubic-bezier(0,.89,0,1) both; animation: fadeInLeft .7s .2s cubic-bezier(0,.89,0,1) both;}
@-webkit-keyframes fadeInLeft{0%{opacity: 0; -webkit-transform: translateX(-200px)} 100%{opacity: 1; -webkit-transform: translateX(0)}}
@-moz-keyframes fadeInLeft{0%{opacity: 0; -moz-transform: translateX(-200px)} 100%{opacity: 1; -moz-transform: translateX(0)}}
@-o-keyframes fadeInLeft{0%{opacity: 0; -o-transform: translateX(-200px)} 100%{opacity: 1; -o-transform: translateX(0)}}
@keyframes fadeInLeft{0%{opacity: 0; transform: translateX(-200px)} 100%{opacity: 1; transform: translateX(0)}}
.nav-popup .circle{position: absolute; top: 97px; left: -295px; width: 457px; height: 420px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/img-circle-s.png") no-repeat; transition: all .3s; transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;}
.rotate30n{transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg);}
.rotate0{transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg);}
.rotate30p{transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg);}
.nav-popup a{width: 144px; height: 144px; overflow: hidden; -webkit-animation: fadeInLeft2 1s .2s ease both; -moz-animation: fadeInLeft2 1s .2s ease both; -o-animation: fadeInLeft2 1s .2s ease both; animation: fadeInLeft2 1s .2s ease both; border-radius: 100%; transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s;} .nav-popup a:hover, .nav-popup a.on{box-shadow: 0 0 20px #000;}
@-webkit-keyframes fadeInLeft2{0%{opacity: 0; -webkit-transform: translateX(-20px)} 100%{opacity: 1; -webkit-transform: translateX(0)}}
@-moz-keyframes fadeInLeft2{0%{opacity: 0; -moz-transform: translateX(-20px)} 100%{opacity: 1; -moz-transform: translateX(0)}}
@-o-keyframes fadeInLeft2{0%{opacity: 0; -o-transform: translateX(-20px)} 100%{opacity: 1; -o-transform: translateX(0)}}
@keyframes fadeInLeft2{0%{opacity: 0; transform: translateX(-20px)} 100%{opacity: 1; transform: translateX(0)}}
.nav-popup .btn-event1{top: 73px; right: 72px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/event1.png") no-repeat;}
.nav-popup .btn-event2{top: 235px; right: 18px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/event2.png") no-repeat;}
.nav-popup .btn-event3{top: 396px; right: 70px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/event3.png") no-repeat;}
.article{display: none; position: absolute; left: 50%; top: 128px; width: 1030px; margin-left: -515px;} .article h5{width: 968px; height: 336px; margin: -60px auto 0 auto;} .article .wrap-scroll{width: 100%; height: 600px; font-size: 14px; color: #f2d6bc; line-height: 36px;}
.wrap-scroll strong{display: block; position: absolute; top: 6px; left: 85px; width: 84px; height: 26px; text-align: center; line-height: 26px; background-color: #bf8956; color: #412212; border-radius: 26px; font-weight: normal}
.wrap-scroll p, .wrap-scroll li{position: relative; padding-left: 185px; width: 70%;}
.wrap-scroll img{display: block; max-width: 70%; margin: 30px 0 30px 185px;}
.wrap-scroll .info2 img, .article3 .p-package img, .wrap-img img{display: inline-block; max-width: 80%; margin: 10px;}
.highlight{color: #f06020;}
.article1 h5{background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/title1.png") no-repeat top center;}
.article2 h5{background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/title2.png") no-repeat;}
.article3 h5{background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/title3.png") no-repeat;}
.article1 .nav-article{text-align: center; margin-bottom: 40px;} .article1 .nav-article a{display: inline-block; height: 72px; color: #bd8756; font-weight: bold; font-size: 20px; opacity: .5; line-height: 72px; margin: 0 30px;} .article1 .nav-article a span{display: inline-block; width: 72px; height: 72px; margin-right: 15px; background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/point.png") no-repeat; transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s;} .article1 .nav-article a.on, .article1 .nav-article a:hover{opacity: 1;} .article1 .nav-article a.on span, .article1 .nav-article a:hover span{background: url("https://static.web.sdo.com/cq/pic/act/2019/w/0801wdh/point-on.png") no-repeat;}
.article1 .info{display: none;}
.article1 .info1{display: block;}
table{position: relative; width: 60%; margin: 20px 0 20px 185px; border-collapse: collapse; text-align: center;} table p{padding-left: 0 !important; width: 100% !important;} table strong{display: inline-block !important; position: relative !important; top: auto !important; left: auto !important; background: none !important; color: #f2d6bc !important; width:auto !important;} table th{font-weight: bold;} table td, table th{border: 1px solid #f2d6bc;}
@media screen and (max-width: 1700px){.nav-popup{left: -140px;}}
@media screen and (max-width: 1390px){.nav-popup{left: -190px;}}