@charset "utf-8";
body{
    font-family: 微软雅黑,Tahoma, Geneva, sans-serif, 宋体;
    font-size: 14px;
    color:#fff;
    font-weight: normal;
    height:100%;
}
*{
    padding:0;
    margin:0;
}
ul,ol{
    list-style-type: none;
    outline: none;
}

a{
    text-decoration: none;
    color:#fff;
}

.sq_tow_screen,.sq_center_2,.sq_position,.sq_m_small,.sq_center{
    transition: all 1s;
    -webkit-transition: all 1s;
}
.section { position: relative; overflow: hidden;}
.section .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;z-index: 1}
.section .bg img { display: block; width: 100%; height: 100%;}
.sq_menu_back{
    position: absolute;top:0;left:0;background: #2F2F2F;z-index:3;width: 100%;height:100%;opacity: 0.5
}
.sq_menu_container{
    width:100%;
    height:100%;
    position: fixed;
    z-index: 6;
}
.sq_meun_back{
    position: absolute;
    top:0;
    left:-50%;
    height:100%;
    width:50%;
    background: #434343;
    z-index: 5;
    opacity: 0.5;
}
.sq_nav_park{
    float:left;
    display:block;
    width:15px;
    height:15px;
    border-radius:60%;
    background: #fff;
    margin-top:10px;
    opacity: 0;
}
.sq_nav_1{
    margin-top:80px;
    cursor: pointer;
    margin-left:-155%;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.sq_meun_nav{
    position: absolute;
    top:5%;
    left:7%;
    z-index:5;
}
.sq_nav_left{
    margin-left:15px;
    font-size: 26px;
    font-weight: bold;
}
.sq_menu{
    position: absolute;
    top:30px;
    left:35px;
    background: none;
    cursor: pointer;
    z-index: 6;
}
.sq_menu div{
    float:left;
}
.sq_m_span span{
    width:25px;
    height:3px;
    border-radius: 6px;
    display:block;
    background: #fff;
    margin:5px 0;
}
.sq_m_meun{
    margin-top:3px;
    margin-left:10px;
    font-size: 18px;
    color:#fff;
    font-weight: bold;
}
.sq_concat{
    position: fixed;
    top:50%;
    margin-top:-94px;
    right:5%;
    z-index: 6;
}
.sq_concat_back{
    width:7px;
    height:188px;
    background: url("../images/index/youcexian.png") no-repeat;
    position: relative;
}
.sq_phone{
    position: absolute;
    top:35px;
    left:-5px;
}
.sq_qq{
    position: absolute;
    top:90px;
    left:-7px;
}
.sq_weixin{
    position: absolute;
    top:143px;
    left:-7px;
}
.sq_position{
    position: absolute;
    top:50%;
    left:50%;
    z-index: 3;
    opacity: 0;
}

.active .sq_center{
    opacity: 1;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;

}
.active .sq_center_1{
    opacity: 1;
    transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s;
}
.active .sq_center_2{
    top:50%;
    transition-delay: 0.7s;
    -webkit-transition-delay: 0.5s;
}
.sq_center{
    opacity: 0;
    margin-top:-205px;
    margin-left:-207px;
    animation: myrotate 5s forwards infinite linear;
    -webkit-animation: myrotate 5s forwards infinite linear;
}
@keyframes  myrotate{
   100%{
        transform: rotate(-360deg);
    }
}
@-webkit-keyframes  myrotate{
    100%{
        -webkit-transform: rotate(-360deg);
    }
}
.sq_center_1{
    opacity: 0;
    margin-top:-270px;
    margin-left:-197px;
}
.sq_center_2{
    position: absolute;
    top:0;
    left:50%;
    z-index: 3;
    opacity: 0;
    margin-top:-135px;
    margin-left:-161px;
    animation: fadeInDown 0.5s forwards 1s;
    -webkit-animation: fadeInDown 0.5s forwards 1s;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

.sq_start{
    position: absolute;
    bottom: 10%;
    left:50%;
    z-index:3;
    margin-left:-50px;
    width: 100px;
    height: 20px;
    font-size: 18px;
    background: -webkit-gradient(linear,left top,right top,color-stop(0, #3CAF5A),color-stop(0.3, #3CAF5A),color-stop(0.5, white),color-stop(0.7, #3CAF5A),color-stop(1, #3CAF5A));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    -webkit-animation: slidetounlock 4s linear infinite;
    animation: slidetounlock 4s linear infinite;
}

@-webkit-keyframes slidetounlock { 0% {background-position: -150px 0;} 80%{background-position: 100px 0;} 100% {background-position: 150px 0;}}
@keyframes slidetounlock { 0% {background-position: -150px 0;} 80%{background-position: 100px 0;} 100% {background-position: 150px 0;}}

.sq_mouse{
    position: absolute;
    bottom: 3%;
    left:50%;
    margin-left:-10px;
    z-index:3;
}
.sq_m_small{
    position: absolute;
    top:5px;
    left:50%;
    margin-left:-1px;
    width:2px;
    height:8px;
    border-radius: 6px;
    background: #fff;
    animation: smallDown 1.5s forwards infinite;
    -webkit-animation: smallDown 1.5s forwards infinite;
}
@keyframes smallDown {
    0%{top:7px;opacity: 1;}
    50%{top:9px;opacity: 0.5;}
    100%{top:10px;opacity: 0}
}
@-webkit-keyframes smallDown {
    0%{top:7px;opacity: 1;}
    50%{top:9px;opacity: 0.5;}
    100%{top:10px;opacity: 0}
}
.sq_tow_screen{
    position: absolute;
    top:0;
    left:50%;
    opacity: 0;
    line-height: 30px;
    width:730px;
    margin-left:-365px;
    text-align: center;
    font-size: 16px;
    z-index:3;
    letter-spacing: 5px;
    animation: fadeInDown 0.5s forwards 1s;
    -webkit-animation: fadeInDown 0.5s forwards 1s;
}
.active .sq_tow_screen{
    top:25%;
    transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
}

.sq_tow_msg{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-480px;
    z-index: 3;
    width:1100px;
    text-align: center;
    cursor: pointer;
}
.sq_tow_msg ul li {
    float:left;
    margin:0 40px;
    padding-top:300px;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.active .sq_tow_msg ul .sq_li1{
    transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
}
.active .sq_tow_msg ul .sq_li2{
    transition-delay: 0.9s;
    -webkit-transition-delay: 0.9s;
}
.active .sq_tow_msg ul .sq_li3{
    transition-delay: 1.1s;
    -webkit-transition-delay: 1.1s;
}
.active .sq_tow_msg ul .sq_li4{
    transition-delay: 1.3s;
    -webkit-transition-delay: 1.3s;
}
.active .sq_tow_msg ul li{
    opacity: 1;
    padding-top:0;

}
.sq_img .sq_img_s1{
    margin-top:25px;
}

.sq_zw{
    position: absolute;
    bottom:10%;
    left:0;
    z-index: 3;
}

.sq_three{
    width:100px;
    position: absolute;
    z-index:3;
    top:20%;
    left:50%;
    margin-left:-50px;
    font-size: 50px;
    font-weight: bold;
    letter-spacing: 8px;
}
.sq_three_s1{
    width: 200px;
    margin-left: 60px;
}
.sq_three_s1_span{
    float:left;display:block;width:20px;background: #9f9f9f;height:1px;
}
.sq_three_s1_span1{
    float:left;display:block;width:50px;background: #3CAF5A;height:1px;
}

.sq_three_s2{
    position: absolute;
    z-index:3;
    width:1205px;
    top:40%;
    left:50%;
    margin-left:-600px;
}
.sq_three_s2 ul li{
    float:left;
    margin:0 15px;
    cursor: pointer;
}
.sq_three_top{
    margin-top:15px;
}
.sq_three_s3{
    position: absolute;
    bottom: 10%;
    left: 50%;
    z-index: 3;
    cursor: pointer;
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}
.active .sq_three_s3{
    opacity: 1;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
}
.sq_three_all{
    width:300px;
    height:50px;
    line-height: 50px;
    border:1px #fff solid;
    text-align: center;
    color:#3CAF5A;
    margin-left:-150px;
    font-size: 18px;
    letter-spacing: 5px;
}
.sq_four{
    position: absolute;
    top:50%;
    left:50%;
    z-index: 3;
    margin-left:-187px;
    transition: all 1s;
    -webkit-transition: all 1s;
    opacity: 0;
}
.active .sq_four{
    opacity: 1;
    transition-delay:0.5s;
    -webkit-transition-delay: 0.5s;
}
.sq_four2{
    position: absolute;
    bottom:10%;
    left:50%;
    z-index:3;
    margin-left:-30px;
}
.sq_four_all{
    position: absolute;
    top:0;
    left:50%;
    margin-left:-155px;
    margin-top:20px;
    z-index:3;
    color:#fff;
    letter-spacing: 5px;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    transition: all 1s;
    -webkit-transition: all 1s;
    opacity: 0;
}
.active .sq_four_all{
    opacity: 1;
    top:50%;
    transition-delay:1s;
    -webkit-transition-delay: 1s;
}
.sq_z_left{
    position: absolute;top:38%;;left:0;opacity: 0;
}
.sq_z_right{
    position: absolute;top:49%;;right:0;opacity: 0;
}
.sq_z_back{
    position: absolute;top:0;left:0;width:270px;height:220px;background: #7bc91e;opacity: 0;
}