.wp{position: relative; width: 100%; min-width: 1280px; max-width: 1920px; height: 1176px; background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/bg-wp.jpg") no-repeat top center; margin: 0 auto; overflow: hidden;}
.logo{display: block; position: absolute; z-index: 5; left: 35px; top:20px; width: 106px;height: 211px; background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/logo.png") no-repeat;}
.nav-top{position: absolute; top:8px; right: 20px; z-index: 5;width: 234px;height: 72px; background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/bg-nav.png") no-repeat;}
.nav-top a{display: block; float: left; width: 33.333333%; height: 100%;}
.slogan{display: none; position: absolute; top:65px; left: 50%; margin-left: 127px; width: 160px; height: 0; /*height: 718px;*/ background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/slogan.png") no-repeat top center; animation: sloganani .8s .3s ease-out both; -webkit-animation: sloganani .8s .3s ease-out both; -moz-animation: sloganani .8s .3s ease-out both; -o-animation: sloganani .8s .3s ease-out both;}
@-webkit-keyframes sloganani{to{height: 718px;}}
@-moz-keyframes sloganani{to{height: 718px;}}
@-o-keyframes sloganani{to{height: 718px;}}
@keyframes sloganani{to{height: 718px;}}
.wrap-event{position: absolute; top:140px; left: 50%; margin-left: 295px;}
.wrap-event a{display: block; width: 334px; height: 74px; margin-bottom: 12px; transition: all .2s; -o-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s;}
.wrap-event a:nth-child(even){margin-left: 10px;}
.wrap-event a:hover{width: 334px; height: 104px;}
.wrap-event .btn-event1{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e1.png") no-repeat;}
.wrap-event .btn-event1:hover{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e1-on.png") no-repeat;} .wrap-event .btn-event9{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e9.png") no-repeat;} .wrap-event .btn-event9:hover{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e9-on.png") no-repeat;}
.wrap-event .btn-event2{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e2.png") no-repeat;} .wrap-event .btn-event2:hover{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e2-on.png") no-repeat;} .wrap-event .btn-event3{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e3.png") no-repeat;} .wrap-event .btn-event3:hover{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e3-on.png") no-repeat;} .wrap-event .btn-event4{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e4.png") no-repeat;} .wrap-event .btn-event4:hover{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e4-on.png") no-repeat;} .wrap-event .btn-event5{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e5.png") no-repeat;} .wrap-event .btn-event5:hover{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e5-on.png") no-repeat;} .wrap-event .btn-event6{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e6.png") no-repeat;} .wrap-event .btn-event6:hover{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e6-on.png") no-repeat;} .wrap-event .btn-event7{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e7.png") no-repeat;} .wrap-event .btn-event7:hover{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e7-on.png") no-repeat;} .wrap-event .btn-event8{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e8.png") no-repeat;} .wrap-event .btn-event8:hover{background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/e8-on.png") no-repeat;}
.wp-points{position: absolute; left: 50%; top:87px; margin-left: 19px;}
.wp-points a{display: block; width: 48px; height: 172px; margin-bottom: 25px;}
.popup{display: none; position: absolute; top:0; left: 0; z-index: 10000; width: 100%; height: 100%;background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/bg-popup.jpg") no-repeat top center;}
.article{display: none; position: absolute; left: 50%; top:115px; width: 810px; margin-left: -205px; overflow: hidden;-webkit-animation:fadeInRight .6s .2s ease both;-moz-animation:fadeInRight .6s .2s ease both;-o-animation:fadeInRight .6s .2s ease both;animation:fadeInRight .6s .2s ease both;}
@-webkit-keyframes fadeInRight{0%{opacity:0; -webkit-transform:translateX(20px)} 100%{opacity:1; -webkit-transform:translateX(0)}}
@-moz-keyframes fadeInRight{0%{opacity:0; -moz-transform:translateX(20px)} 100%{opacity:1; -moz-transform:translateX(0)}}
@-o-keyframes fadeInRight{0%{opacity:0; -o-transform:translateX(20px)} 100%{opacity:1; -o-transform:translateX(0)}}
@keyframes fadeInRight{0%{opacity:0; transform:translateX(20px)} 100%{opacity:1; transform:translateX(0)}}
.article h5{height: 52px; margin-bottom: 75px;}
.article h5 img{height: 100%; margin-left: 105px;}
.btn-close{display: block; position: absolute; left: 50%; top:910px; width: 122px; height: 122px; margin-left: 127px; background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/btn-close.png") no-repeat;transition: transform .3s; -o-transition: transform .3s; -webkit-transition: transform .3s; -moz-transition: transform .3s;}
.btn-close:hover{transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg);}
.article .wrap-scroll{width: 100%; height: 600px; color: #333333; font-size: 16px; line-height: 36px;}
.article .wrap-scroll p{position: relative; padding-left: 112px;max-width: 70%;}
.article .wrap-scroll strong{display: block; position: absolute; left: 0; top:5px; width: 94px;height: 26px; background: url("https://static.web.sdo.com/1000y/pic/2020/0521yt/bg-point.png") no-repeat; line-height: 26px; text-align: center; color: #f9eacb;font-weight: normal}
.article .wrap-scroll img{max-width: 70%; margin: 30px 10px 30px 0;}
.p-sp{max-width: 100% !important;}
.p-sp img{margin: 30px 5px !important;}