@charset "utf-8";
/*--样式重置以及清除浮动--*/
html{font-size:100px;font-weight: 400;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0;font-weight: 400;}
body,input,label,select,option,textarea,button,fieldset,legend,td,th,caption{ background-color:transparent;font-weight: 400;color:#3A3D40;font-size:14px;font-family:"Microsoft YaHei","PingFang SC",Helvetica,Roboto,Arial,sans-serif;}
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight: 400;}
a,button{color:#3A3D40;text-decoration:none; cursor: pointer;border: none;display: inline-block}
a{vertical-align:top}
img { border:none;vertical-align: middle;}
ol,ul,li { list-style:none; }
input, textarea, select, button {outline: none;}
table { border-collapse:collapse; }
html {min-width: 100%;min-height: 100%;}
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
/*通用样式*/
.imgWrap img{
    height: 100%;
}
.imgWrap2 img{
    width: 100%;
}
/*通用样式结束*/
.content {
    width: 100%;
    min-width: 1200px;
    height: 1000px;
    overflow: hidden;
    position: relative;
}
.content .contentBack {
    width: 1920px;
    height: 1006px;
    background-image: url("https://static.web.sdo.com/gmys/media/2018/20181114_pc/pcBack.jpg");
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    margin-left: -960px;
}
.content .contentMain {
    width: 1200px;
    height: 1000px;
    margin: 0 auto;
    position: relative;
}
.logoWrap{
    width: 200px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.btnWrap{
    position: absolute;
    right: 0px;
    top: 10px;
}
.textWrap{
    width: 481px;
    position: absolute;
    left: 120px;
    top: 100px;
    text-align: center;
}
.maWrap{
    margin-top: 10px;
    display: inline-block;
    width: 140px;
    text-align: center;
    background: #ffffff;
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    margin-left: -30px;
}
.maWrap .maImg{
    width: 140px;
    display: inline-block;
}
.maWrap .maIcon{
    position: relative;
    top: -1px;
    right: 1px;
}
.scene{
    position: absolute;
    bottom: 0px;
    width: 100%;
}
.pao{
    cursor: pointer;
}
.fadeTop{
    animation: fadeInT 1.5s ease-out forwards;
    -webkit-animation: fadeInT 1.5s ease-out forwards;
}
.fadeBottom{
    opacity: 0;
    animation: fadeInB 1.5s 1s ease-out forwards;
    -webkit-animation: fadeInB 1.5s 1s ease-out forwards;
}
.fadeBottom2{
    opacity: 0;
    animation: fadeInB2 1.5s 1s ease-out forwards;
    -webkit-animation: fadeInB2 1.5s 1s ease-out forwards;
}
.p1{
    position: absolute;
    left: 0px;
    bottom: 50px;
}
.p2{
    position: absolute;
    left: 790px;
    bottom: 250px;
}
.p3{
    position: absolute;
    left: 900px;
    bottom: 40px;
}
.p4{
    position: absolute;
    left: 550px;
    bottom: 100px;
}
.p5{
    position: absolute;
    left: 140px;
    bottom: 350px;
}
.p6{
    position: absolute;
    left: 300px;
    bottom: 180px;
}
.p7{
    position: absolute;
    left: 400px;
    bottom: 20px;
}
.shadowBox{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    top: 0px;
    left: 0px;
}
.shadowBox .maWrap{
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -200px;
    overflow:inherit;
}
.shadowBox .maWrap .maImg{
    width: 200px;
}
.closeWrap{
    width: 45px;
    position: absolute;
    right: -50px;
    top: 0px;
}
.musicBtn.on{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}
@keyframes fadeInT
{
    from {
        opacity: 0;
        transform:translateY(-100px);
    }
    to {opacity: 1;
        transform:translateY(0px);
    }
}

@-webkit-keyframes fadeInT /*Safari and Chrome*/
{
    from {
        opacity: 0;
        transform:translateY(-100px);
    }
    to {opacity: 1;
        transform:translateY(0px);
    }
}
@keyframes fadeInB
{
    from {
        opacity: 0;
        transform:translateY(100px);
    }
    to {opacity: 1;
        transform:translateY(0px);
    }
}

@-webkit-keyframes fadeInB /*Safari and Chrome*/
{
    from {
        opacity: 0;
        transform:translateY(100px);
    }
    to {opacity: 1;
        transform:translateY(0px);
    }
}
@keyframes fadeInB2
{
    from {
        opacity: 0;
        transform:translateY(350px);
    }
    to {opacity: 1;
        transform:translateY(0px);
    }
}

@-webkit-keyframes fadeInB2 /*Safari and Chrome*/
{
    from {
        opacity: 0;
        transform:translateY(350px);
    }
    to {opacity: 1;
        transform:translateY(0px);
    }
}