.wp{position: relative; max-width: 1920px; min-width: 1280px; height:1080px ; margin: 0 auto; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0125cny/bg-wp.jpg") no-repeat top center; overflow: hidden;}
.logo{display: block; position: absolute; top:125px; left: 50%; width: 209px; height: 126px; margin-left: -100px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0125cny/logo.png") no-repeat;}
.nav-official{position: absolute; top:690px; left: 50%; width: 357px; height: 45px; margin-left: -178px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0125cny/nav-official.png") no-repeat;}
.nav-official a{display: block; float: left; height: 100%; width: 33.333333%;}
.nav-events{position: absolute; top: 320px; left: 50%; width: 1280px; margin-left: -640px;}
.nav-events a{display: block; position: absolute; top:0; width: 168px; height: 444px;}
.nav-events .btn-event1{left: -18px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0125cny/event1.png") no-repeat; -webkit-animation:fadeInRight .7s .2s ease both; -moz-animation: fadeInRight .7s .2s ease both; -o-animation: fadeInRight .7s .2s ease both; animation: fadeInRight .7s .2s ease both;}
.nav-events .btn-event2{left: 128px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0125cny/event2.png") no-repeat; -webkit-animation:fadeInRight .7s .4s ease both; -moz-animation: fadeInRight .7s .4s ease both; -o-animation: fadeInRight .7s .4s ease both; animation: fadeInRight .7s .4s ease both;}
.nav-events .btn-event3{right: 128px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0125cny/event3.png") no-repeat; -webkit-animation:fadeInLeft .7s .4s ease both; -moz-animation: fadeInLeft .7s .4s ease both; -o-animation: fadeInLeft .7s .4s ease both; animation: fadeInLeft .7s .4s ease both;}
.nav-events .btn-event4{right: -18px; background: url("https://static.web.sdo.com/xyx/pic/act/2021/0125cny/event4.png") no-repeat; -webkit-animation:fadeInLeft .7s .2s ease both; -moz-animation: fadeInLeft .7s .2s ease both; -o-animation: fadeInLeft .7s .2s ease both; animation: fadeInLeft .7s .2s ease both;}
@-webkit-keyframes fadeInLeft{0%{opacity:0; -webkit-transform:translateX(-20px)} 100%{opacity:1; -webkit-transform:translateX(0)}}
@-moz-keyframes fadeInLeft{0%{opacity:0; -moz-transform:translateX(-20px)} 100%{opacity:1; -moz-transform:translateX(0)}}
@-o-keyframes fadeInLeft{0%{opacity:0; -o-transform:translateX(-20px)} 100%{opacity:1; -o-transform:translateX(0)}}
@keyframes fadeInLeft{0%{opacity:0; transform:translateX(-20px)} 100%{opacity:1; transform:translateX(0)}}
@-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)}}