.wp{position: relative; width: 100%; max-width: 1920px; min-width: 1280px; height: 1080px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/bg-wp.jpg") no-repeat top center; margin: 0 auto; overflow: hidden;}
.logo{display: block; position: absolute; z-index: 10; left: 30px; top: 0; width: 209px; height: 109px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/logo.png") no-repeat;}
.nav-official{position: absolute; top: 0; right: 20px; z-index: 10; width: 35px; height: 168px; padding-top: 17px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/nav-official.png") no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.nav-official a{display: block; float: left; width: 35px; height: 35px; margin-bottom: 10px; border-radius: 100%;}
.slogan{position: absolute; left: 50%; top:46px; width: 599px; height: 447px; margin-left: -48px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/slogan.png") no-repeat; -webkit-animation: fadeInDown .5s .2s ease both; -moz-animation: fadeInDown .5s .2s ease both; -o-animation: fadeInDown .5s .2s ease both; animation: fadeInDown .5s .2s ease both;}
@-webkit-keyframes fadeInDown{0%{opacity: 0; -webkit-transform: translateY(-20px)} 100%{opacity: 1; -webkit-transform: translateY(0)}}
@-moz-keyframes fadeInDown{0%{opacity: 0; -moz-transform: translateY(-20px)} 100%{opacity: 1; -moz-transform: translateY(0)}}
@-o-keyframes fadeInDown{0%{opacity: 0; -o-transform: translateY(-20px)} 100%{opacity: 1; -o-transform: translateY(0)}}
@keyframes fadeInDown{0%{opacity: 0; transform: translateY(-20px)} 100%{opacity: 1; transform: translateY(0)}}
.wp-events{position: absolute; top:533px; left: 50%; margin-left: 65px; -webkit-animation: fadeInUp .3s .4s ease both; -moz-animation: fadeInUp .3s .4s ease both; -o-animation: fadeInUp .3s .4s ease both; animation: fadeInUp .3s .4s ease both;}
@-webkit-keyframes fadeInUp{0%{opacity: 0; -webkit-transform: translateY(15px)} 100%{opacity: 1; -webkit-transform: translateY(0)}}
@-moz-keyframes fadeInUp{0%{opacity: 0; -moz-transform: translateY(15px)} 100%{opacity: 1; -moz-transform: translateY(0)}}
@-o-keyframes fadeInUp{0%{opacity: 0; -o-transform: translateY(15px)} 100%{opacity: 1; -o-transform: translateY(0)}}
@keyframes fadeInUp{0%{opacity: 0; transform: translateY(15px)} 100%{opacity: 1; transform: translateY(0)}}
.wp-events a{display: block; width: 405px; height: 56px; margin-bottom: 25px; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
.wp-events .btn-event1{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/btn-event01.png") no-repeat;}
.wp-events .btn-event2{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/btn-event02.png") no-repeat;}
.wp-events .btn-event3{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/btn-event03.png") no-repeat;}
.wp-events .btn-event4{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/btn-event04.png") no-repeat;}
.wp-events .btn-event5{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/btn-event05.png") no-repeat;}
.wp-events .btn-event1:hover{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/btn-event01-on.png") no-repeat;}
.wp-events .btn-event2:hover{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/btn-event02-on.png") no-repeat;}
.wp-events .btn-event3:hover{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/btn-event03-on.png") no-repeat;}
.wp-events .btn-event4:hover{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/btn-event04-on.png") no-repeat;}
.wp-events .btn-event5:hover{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0908zq/btn-event05-on.png") no-repeat;}
.wp-events a:hover{-webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px);}