.wp{position: relative; width: 100%; max-width: 1920px; min-width: 1280px; height: 1410px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0805qx/bg-wp.jpg") no-repeat top center; margin: 0 auto; overflow: hidden;}
.logo{display: block; position: absolute; z-index: 10; left: 50%; top: 0; width: 209px; height: 114px; margin-left: -104px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0805qx/logo.png") no-repeat;}
.nav-official{position: absolute; top: 10px; right: 10px; z-index: 10; width: 222px; height: 52px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0805qx/nav-official.png") no-repeat;}
.nav-official a{display: block; float: left; width: 52px; height: 100%;}
.nav-official a:nth-child(2){margin: 0 32px;}
.slogan{position: absolute; left: 50%; top:93px; width: 638px; height: 413px; margin-left: -319px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0805qx/slogan.png") no-repeat; color:#2f2a44 ; font-weight: bold; font-size: 22px; line-height: 783px; overflow: hidden; -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)}}
.slogan p{margin-left: 163px;}
.wp-events{position: absolute; left: 50%; top:585px; width: 762px; height: 383px; margin-left: -381px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0805qx/wp-events.png") no-repeat; -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; position: absolute; width: 256px; height: 180px;}
.wp-events .btn-event1{top:0; left:38px;}
.wp-events .btn-event2{top:0; right:38px;}
.wp-events .btn-event3{top:113px; left:50%; margin-left: -128px; z-index: 5;}
.wp-events .btn-event4{top:200px; left:38px;}
.wp-events .btn-event5{top:200px; right:38px;}