.wp{position: relative; max-width: 1920px; min-width: 1280px; height: 1080px; margin: 0 auto; background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/bg-wp.jpg") no-repeat top center; overflow: hidden;}
.logo{display: block; position: absolute; z-index: 10; left: 10px; top: 0; width: 177px; height: 108px; background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/logo.png") no-repeat;}
.nav-official{position: absolute; top: 25px; right: 20px; z-index: 10; width: 196px; height: 65px; background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/nav-official.png") no-repeat; overflow: hidden;}
.nav-official a{display: block; float: left; width: 33.333333%; height: 65px;}
.nav-events{position: absolute; top: 418px; left: 50%; margin-left: -362px;}
.nav-events div{display: block; position: relative; float: left; width: 240px; height: 591px;}
.nav-events div:before{position: absolute; content: ''; left: 69px; top:10px; width: 41px; height: 506px; background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/bg-line.png") no-repeat; -webkit-transition: top .2s; -moz-transition: top .2s; -ms-transition: top .2s; -o-transition: top .2s; transition: top .2s;}
.nav-events div:hover{background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/bg-hover.png") no-repeat;}
.nav-events div a{display: block; position: absolute; left: 25px; top:173px; width: 201px; height: 197px;}
.nav-events .btn-event1 a{background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/num1.png") no-repeat;}
.nav-events .btn-event2 a{background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/num2.png") no-repeat;}
.nav-events .btn-event3 a{background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/num3.png") no-repeat;}
.nav-events div a:after{position: absolute; top:50%; left: 50%; margin-top: -145px; margin-left: -76px; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
.nav-events .btn-event1 a:after{content: ''; width: 72px; height: 283px; background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/event1.png") no-repeat;}
.nav-events .btn-event2 a:after{content: ''; width: 71px; height: 290px; background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/event2.png") no-repeat;}
.nav-events .btn-event3 a:after{content: ''; width: 86px; height: 218px; margin-top: -110px; background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/event3.png") no-repeat;}
.nav-events div a:hover:after{-webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px);}
.nav-events .btn-event1 a:hover:after{background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/event1-on.png") no-repeat;}
.nav-events .btn-event2 a:hover:after{background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/event2-on.png") no-repeat;}
.nav-events .btn-event3 a:hover:after{background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/event3-on.png") no-repeat;}
.nav-events div a:hover~.btn-event1{background: url("https://static.web.sdo.com/xyx/pic/act/2022/0113cj/bg-hover.png") no-repeat;}
.nav-events .btn-event1{-webkit-animation: fadeInRight .4s .2s ease both; -moz-animation: fadeInRight .4s .2s ease both; -o-animation: fadeInRight .4s .2s ease both; animation: fadeInRight .4s .2s ease both;}
.nav-events .btn-event2{-webkit-animation: fadeInRight .4s .3s ease both; -moz-animation: fadeInRight .4s .3s ease both; -o-animation: fadeInRight .4s .3s ease both; animation: fadeInRight .4s .3s ease both;}
.nav-events .btn-event3{-webkit-animation: fadeInRight .4s .4s ease both; -moz-animation: fadeInRight .4s .4s ease both; -o-animation: fadeInRight .4s .4s ease both; animation: fadeInRight .4s .4s 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)}}