.wp{position: relative; width: 100%; max-width: 1920px; min-width: 1280px; height: 1180px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0923gq/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: 199px; height: 120px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0923gq/logo.png") no-repeat;}
.nav-official{position: absolute; top: 0; right: 20px; z-index: 10; width: 52px; height: 265px; padding-top: 33px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0923gq/03/nav-official.png") no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden;}
.nav-official a{display: block; width: 35px; height: 69px; margin: 0 0 12px 0;}
.slogan{position: absolute; left: 50%; top:50px; width: 677px; height: 363px; margin-left: -312px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0923gq/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:472px; left: 50%; margin-left: -378px; -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 span{display: block; position: relative; float: left; width: 188px; height: 346px; margin-right: -41px;}
.wp-events .nav-e1{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0923gq/event01.png") no-repeat;}
.wp-events .nav-e2{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0923gq/event02.png") no-repeat;}
.wp-events .nav-e3{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0923gq/event03.png") no-repeat;}
.wp-events .nav-e4{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0923gq/event04.png") no-repeat;}
.wp-events .nav-e5{background: url("https://static.web.sdo.com/xyx/pic/act/2021/0923gq/event05.png") no-repeat;}
.wp-events span a{display: block; position: absolute; left: 23px; top:62px; width: 125px; height: 240px;}