@charset "utf-8";
a{-webkit-transition: all 0.5s ease;transition: all 0.4s ease;} 
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,three_byone,sq_position_three,sq_center_three,sq_center_3{
    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.4;
}
.sq_nav_park{
    float:left;
    display:block;
    width:8px;
    height:8px;
    border-radius:60%;
    background: #fff;
    margin-top:7px;
    opacity: 0;
}
.sq_nav_1{
    margin-top:20px;
    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: 16px; 
	font-weight:bold;
	color:#efefef;   
}

/* my add*/
.sq_nav_left a {font-size: 16px;font-weight:bold;color:#efefef; text-decoration:none; }
.sq_nav_left a:hover { color:#fff; text-decoration:underline; padding-left:20px;}


.sq_menu{
    position: absolute;
    top:30px;
    left:35px;
    background: none;
    cursor: pointer;
    z-index: 6;
}
.sq_menu div{
    float:left;
}
.sq_m_span { margin-top:4px;}
.sq_m_span span{
    width:20px;
    height:2px;
    border-radius: 6px;
    display:block;
    background: #FF6C00;
    margin:4px 0;
}
.sq_m_meun{
    margin-top:3px;
    margin-left:10px;
    font-size: 18px;
    color:#FF6C00;

}
.sq_concat{
    position: fixed;
    top:50%;
    margin-top:-94px;
    right:5%;
    z-index: 20;
}
.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_phone_show {
			width:130px;  
            height:24px; line-height:24px; text-align:center;
            background:#fff;  
            position:absolute;  
            opacity: 0;  
            display: block;  
            font-size: 12px; 
            transition: 0.3s;  
            -webkit-transition: .5s;  
            -moz-transition: .5s; 
			right:60px;
			border-radius:4px;
			z-index: 100;
}
.sq_phone:hover .sq_phone_show{  
            color: #656e73;  
            opacity: 1; right:30px;
		
        } 

.sq_qq{
    position: absolute;
    top:90px;
    left:-7px;
}

.sq_weixin{
    position: absolute;
    top:143px;
    left:-7px;
}
.sq_weixin_show {
			width:130px;  
            height:24px; line-height:24px; text-align:center;
            background:#fff;  
            position:absolute;  
            opacity: 0;  
            display: block;  
            font-size: 12px; 
            transition: 0.3s;  
            -webkit-transition: .5s;  
            -moz-transition: .5s; 
			right:60px;
			border-radius:4px;
			z-index: 100;
}
.sq_weixin:hover .sq_weixin_show{  
            color: #656e73;  
            opacity: 1; right:30px;
        } 


/*三个标语*/

.three_byone{
    position:absolute;
	top:53%; /*y=50%*/
    left:22%;
    z-index: 10;
    opacity: 1;
}

.three_bytwo{
    position: absolute;
    top:53%; /*y=50%*/
    left:43%;
    z-index: 10;
    opacity: 1;
}
.three_bythree{
    position: absolute;
    top:53%; /*y=50%*/
    left:65%;
    z-index: 10;
    opacity: 1;
}



.active .sq_center_1{
    opacity: 1;
    transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s;
}

.sq_position{
    position: absolute;
    top:10%; /*y=50%*/
    left:50%;
    z-index: 3;
    opacity: 0;
}

.sq_center{
    opacity: 0;
    margin-top:-205px;
    margin-left:-207px;
    animation: myrotate 10s forwards infinite linear;
    -webkit-animation: myrotate 10s forwards infinite linear;
}

.active .sq_center{
	top:35%;
    left:55%;
    opacity: 1;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
}

/* 第二个三个*/
.sq_position_three{
    position: absolute;
    top:35%;
    left:55%;
    z-index: 3;
    opacity: 0;
}

.sq_center_three{
    opacity: 0;
	top:35%;
    left:55%;
    animation: myrotate 10s forwards infinite linear;
    -webkit-animation: myrotate 10s forwards infinite linear;
}

.active .sq_center_three{
	top:35%;
    left:55%;
    opacity: 1;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
}
/* 第二个三个结束*/



.sq_center1{
    opacity: 0;
    margin-top:-205px;
    margin-left:-207px;
    animation: myrotate 5s forwards infinite linear;
    -webkit-animation: myrotate 5s forwards infinite linear;
}

.active .sq_center1{
	top:80%;
    left:56%;
    opacity: 1;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
}


.sq_center2{
    opacity: 0;
    margin-top:-205px;
    margin-:-207px;
    animation: myrotate 5s forwards infinite linear;
    -webkit-animation: myrotate 5s forwards infinite linear;
}

.active .sq_center2{
	top:80%;
    left:65%;
    opacity: 1;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
}




@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_3{
    position: absolute;
    top:0;
    left:45%;
    z-index: 3;
    opacity: 0;
    margin-top:-135px;
    margin-left:-161px;
    animation: fadeInDown 1s forwards 2s;
    -webkit-animation: fadeInDown 1s forwards 2s;
}

.active .sq_center_3{
    top:35%;/*y=50% logo active*/
    transition-delay: 1s;
    -webkit-transition-delay: 2s;
}

.sq_center_4{
    position: absolute;
    top:0;
    left:50%;
    z-index: 3;
    opacity: 0;
    margin-top:-135px;
    margin-left:-161px;
    animation: fadeInDown 1.5s forwards 2s;
    -webkit-animation: fadeInDown 1.5s forwards 2s;
}

.active .sq_center_4{
    top:60%;/*y=50% logo active*/
	left:35%;
    transition-delay: 1.5s;
    -webkit-transition-delay: 1.5s;
}


.sq_center_5{
    position: absolute;
    top:0;
    left:45%;
    z-index: 3;
    opacity: 0;
    margin-top:-135px;
    margin-left:-161px;
    animation: fadeInDown 2s forwards 2.5s;
    -webkit-animation: fadeInDown 2s forwards 2.5s;
}

.active .sq_center_5{
    top:87%;/*y=50% logo active*/
	right:45%;
    transition-delay: 2s;
    -webkit-transition-delay: 2s;
}


.sq_center_6{
    position: absolute;
    top:0;
    right:35%;
    z-index: 3;
    opacity: 0;
    margin-top:-135px;
    margin-left:-161px;
    animation: fadeInDown 3s forwards 3.5s;
    -webkit-animation: fadeInDown 3s forwards 3.5s;
}

.active .sq_center_6{
    top:35%;/*y=50% logo active*/
	right:35%;
    transition-delay: 3s;
    -webkit-transition-delay: 3s;
}


.sq_center_7{
    position: absolute;
    top:0;
    right:25%;
    z-index: 3;
    opacity: 0;
    margin-top:-135px;
    margin-left:-161px;
    animation: fadeInDown 3.5s forwards 4s;
    -webkit-animation: fadeInDown 3.5s forwards 4s;
}

.active .sq_center_7{
    top:60%;/*y=50% logo active*/
	right:25%;
    transition-delay: 3.5s;
    -webkit-transition-delay: 3.5s;
}


.sq_center_8{
    position: absolute;
    top:0;
    right:35%;
    z-index: 3;
    opacity: 0;
    margin-top:-135px;
    margin-left:-161px;
    animation: fadeInDown 4s forwards 4.5s;
    -webkit-animation: fadeInDown 4s forwards 4.5s;
}

.active .sq_center_8{
    top:85%;/*y=50% logo active*/
	right:35%;
    transition-delay: 4s;
    -webkit-transition-delay: 4s;
}

.parti{
    position: absolute;
    z-index: 2;
}

/*首页第一屏星星*/
.className{
	position: absolute;
    z-index: 4;
	top:2.5%;
    left:34%;/*50% logo active*/
	width:12px; 
	height:12px;
	-webkit-animation: twinkling 2s infinite 0.5s ease-in-out  
}

.className1{
	position: absolute;
    z-index: 4;
	top:5%;
    left:86%;/*50% logo active*/
	width:8px; 
	height:8px;
	-webkit-animation: twinkling 2s infinite 0.5s ease-in-out  
}

.animated{  
    -webkit-animation-duration: 1s;  
    animation-duration: 1s;  
    -webkit-animation-fill-mode: both;  
    animation-fill-mode: both  
}  
@-webkit-keyframes twinkling{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 0.8;  
    }  
}  
@keyframes twinkling{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 0.8;  
    }  
} 




/*首页第一屏文字*/
.ind_w_1 
	{
	position: absolute;
    z-index: 2;
	top:41px;
    left:31%;/*50% logo active*/
	color:#DEA962;
	font-size:18px;
	width:120px; 
	height:50px;
	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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;
	 } 
	 
.ind_w_2 
	{
	position: absolute;
    z-index: 2;
	top:77%;
    left:18%;/*50% logo active*/
	color:#FFAE4E;
	font-size:22px;
	width:160px; 
	height:60px;
	text-align:left;
	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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;
	 } 
	 
.ind_w_3 
	{
	position: absolute;
    z-index: 2;
	top:87%;
    left:82%;/*50% logo active*/
	color:#DEA962;
	font-size:18px;
	width:120px; 
	height:60px;
	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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;
	 } 

.ind_w_4 
	{
	position: absolute;
    z-index: 2;
	top:24%;
    left:60%;/*50% logo active*/
	color:#F9D8AB;
	font-size:18px;
	width:120px; 
	height:60px;
	text-align:right;
	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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;
	 } 
	 
.ind_w_5 
	{
	position: absolute;
    z-index: 2;
	top:51.71%;
    left:38.41%;/*50% logo active*/
	color:#F9D8AB;
	font-size:20px;
	width:120px; 
	height:60px;
	text-align:right;
	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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;
	 } 
	 
.ind_w_6 
	{
	position: absolute;
    z-index: 2;
	top:38%;
    left:9.31%;/*50% logo active*/
	color:#F9D8AB;
	font-size:20px;
	width:120px; 
	height:60px;
	text-align:left;
	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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;
	 } 
	 
.ind_w_7 
	{
	position: absolute;
    z-index: 2;
	top:80%;
    left:41.51%;/*50% logo active*/
	color:#F9D8AB;
	font-size:18px;
	width:120px; 
	height:60px;
	text-align:right;
	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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;
	 } 
	 
.ind_w_8 
	{
	position: absolute;
    z-index: 2;
	top:7%;
    left:71%;/*50% logo active*/
	color:#F9D8AB;
	font-size:20px;
	width:120px; 
	height:60px;
	text-align:right;
	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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;
	 } 
	 
.ind_w_9 
	{
	position: absolute;
    z-index: 2;
	top:30%;
    left:82%;/*50% logo active*/
	color:#F9D8AB;
	font-size:20px;
	width:120px; 
	height:60px;
	text-align:right;
	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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;
	 }
	 
.ind_w_11
	{
	position: absolute;
    z-index: 2;
	top:67.41%;
    left:71%;/*50% logo active*/
	color:#F9D8AB;
	font-size:18px;
	width:120px; 
	height:60px;
	text-align:right;
	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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: -160px 0;} 80%{background-position: 120px 0;} 100% {background-position: 160px 0;}}
@keyframes slidetounlock { 0% {background-position: -160px 0;} 80%{background-position: 120px 0;} 100% {background-position: 160px 0;}}

.ind_w_10 
	{
	position: absolute;
    z-index: 2;
	top:22%;
    left:60%;/*50% logo active*/
	color:#F9D8AB;
	font-size:18px;
	width:120px; 
	height:60px;
	text-align:right;
	-webkit-animation: twinkling 1s infinite ease-in-out 
	 } 

.ind_animated
{ 
-webkit-animation-duration: 3s; 
animation-duration: 3s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both 
} 
@-webkit-keyframes twinkling
{ 
0%{ 
opacity: 0; 
} 
100%{ 
opacity: 1; 
} 
} 
@keyframes twinkling
{ 
0%{ 
opacity: 0.1; 
} 
100%{ 
opacity: 1; 
} 
}



.sq_center_2{
    position: absolute;
    top:0;
    left:63.41%;/*50% logo active*/
    z-index: 3;
    opacity: 0;
    margin-top:-135px;
    margin-left:-161px;
    animation: fadeInDown 9s forwards 0.5s;
    -webkit-animation: fadeInDown 9s forwards 0.5s;
}

.active .sq_center_2{
    top:70%;/*y=50% logo active*/
    transition-delay: 1s;
    -webkit-transition-delay: 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: 8%;
    left:55%;
    z-index:3;
    margin-left:-50px;
    width: 108px;
    height: 20px;
    font-size: 16px;

	background: -webkit-gradient(linear,left top,right top,color-stop(0, #FF6C00),color-stop(0.3, #FF6C00),color-stop(0.5, white),color-stop(0.7, #FF6C00),color-stop(1, #FF6C00));
    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: 1%;
    left:55%;
    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:60px;/*原0,有动画效果*/
    left:50%;
    opacity: 0;
    line-height: 30px;
    width:800px;
    margin-left:-406px;
    text-align: center;
    font-size: 16px;
    z-index:3;
    letter-spacing: 5px;
	/*
    animation: fadeInDown 1s forwards 1.5s;
    -webkit-animation: fadeInDown 1s forwards 1.5s;
	*/
}


.active .sq_tow_screen{
	opacity: 1;
    top:60px;
    transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
}

/* my add */
.sq_tow_screen span{font-size: 24px; line-height:30px; color:#fff;}
.sq_tow_screen span b{font-size: 40px; line-height:30px; color:#FF6C00;}
.px40{ padding:0px;height:40px;width:100%;overflow:hidden;}
.px20{ padding:0px;height:20px;width:100%;overflow:hidden;}

/* my add end */

/* 第二屏背景 */
.sq_tow_screen_bg{
    position: absolute;
    top:60px;
    left:50%;
    width:900px;
    margin-left:-406px;
    z-index:2;
}


.sq_tow_msg{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-670px;
    z-index: 3;
    width:1400px;
    text-align: center;
    cursor: pointer;
}
.sq_tow_msg a { color:#fff; text-decoration:none;}
.sq_tow_msg a:hover { color:#FF6C00;}


.sq_tow_msg ul li {
    float:left;
    margin:0 20px;
    padding-top:300px;
    opacity: 0;
	width:190px;
    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 .sq_li5{
    transition-delay: 1.5s;
    -webkit-transition-delay: 1.5s;
}
.active .sq_tow_msg ul .sq_li6{
    transition-delay: 1.7s;
    -webkit-transition-delay: 1.7s;
}


.active .sq_tow_msg ul li{
    opacity: 1;
    padding-top:70px;

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

.sq_zw{
    position: absolute;
    bottom:-10%;
    left:0;
    z-index: 3;
	opacity: 0;
	transition: all 1s;
    -webkit-transition: all 1s;
}

.active .sq_zw{
    opacity: 1;
	bottom:0%;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
	opacity:0.3;
}




/*第二屏的数字*/
.two_number{
	position: absolute;
    z-index: 4;
	top:32%;
    left:34%;/*50% logo active*/
	width:12px; 
	height:12px;
	-webkit-animation: zxl 2s infinite 0.5s ease-in-out  
}

.animated{  
    -webkit-animation-duration: 2s;  
    animation-duration: 2s;  
    -webkit-animation-fill-mode: both;  
    animation-fill-mode: both  
}  
@-webkit-keyframes zxl{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
}  
@keyframes zxl{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
} 

.two_number_two{
	position: absolute;
    z-index: 4;
	top:25%;
    left:39.3%;/*50% logo active*/
	width:12px; 
	height:12px;
	-webkit-animation: zxl2 3s infinite 0.5s ease-in-out  
}

.animated{  
    -webkit-animation-duration: 3s;  
    animation-duration: 3s;  
    -webkit-animation-fill-mode: both;  
    animation-fill-mode: both  
}  
@-webkit-keyframes zxl2{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
}  
@keyframes zxl2{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
} 

.two_number_three{
	position: absolute;
    z-index: 4;
	top:29.8%;
    left:44.6%;/*50% logo active*/
	width:12px; 
	height:12px;
	-webkit-animation: zxl3 2.5s infinite 0.5s ease-in-out  
}

.animated{  
    -webkit-animation-duration: 2.5s;  
    animation-duration: 2.5s;  
    -webkit-animation-fill-mode: both;  
    animation-fill-mode: both  
}  
@-webkit-keyframes zxl3{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
}  
@keyframes zxl3{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
} 

.two_number_four{
	position: absolute;
    z-index: 4;
	top:22.4%;
    left:51%;/*50% logo active*/
	width:12px; 
	height:12px;
	-webkit-animation: zxl4 2s infinite 0.5s ease-in-out  
}

.animated{  
    -webkit-animation-duration: 2s;  
    animation-duration: 2s;  
    -webkit-animation-fill-mode: both;  
    animation-fill-mode: both  
}  
@-webkit-keyframes zxl4{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
}  
@keyframes zxl4{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
} 

.two_number_five{
	position: absolute;
    z-index: 4;
	top:32.1%;
    left:57.3%;/*50% logo active*/
	width:12px; 
	height:12px;
	-webkit-animation: zxl5 3s infinite 0.5s ease-in-out  
}

.animated{  
    -webkit-animation-duration: 3s;  
    animation-duration: 3s;  
    -webkit-animation-fill-mode: both;  
    animation-fill-mode: both  
}  
@-webkit-keyframes zxl5{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
}  
@keyframes zxl5{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
} 
.two_number_six{
	position: absolute;
    z-index: 4;
	top:28.8%;
    left:62.3%;/*50% logo active*/
	width:12px; 
	height:12px;
	-webkit-animation: zxl6 2s infinite 0.5s ease-in-out  
}

.animated{  
    -webkit-animation-duration: 2s;  
    animation-duration: 2s;  
    -webkit-animation-fill-mode: both;  
    animation-fill-mode: both  
}  
@-webkit-keyframes zxl6{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
}  
@keyframes zxl6{  
    0%{  
        opacity: 0.1;  
    }  
    100%{  
        opacity: 1;  
    }  
} 



.sq_three{
    width:200px;
    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: 0px;
}
.sq_three_s1_span{
    float:left;display:block;width:30px;background: #9f9f9f;height:1px;
}
.sq_three_s1_span1{
    float:left;display:block;width:75px;background: #3CAF5A;height:1px;
}

.sq_three_s2{
    position: absolute;
    z-index:3;
    width:1205px;
    top:20%;
    left:50%;
    margin-left:-600px;
	opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

/* 案例动画zxl*/
.active .sq_three_s2{
    opacity: 1;
	top:36%;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;

}

.sq_three_s2 ul li{
    float:left;
    margin:0 15px;
    cursor: pointer;
}
.sq_three_top{
    margin-top:15px;
}
.sq_three_s3{
    position: absolute;
    bottom: 5%;
    left: 50%;
    z-index: 10;
    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_s3 a { color:#FF6C00}
.sq_three_s3 a:hover { color:#fff}

.sq_three_all{
    width:300px;
    height:50px;
    line-height: 50px;
    border:1px #fff solid;
    text-align: center;
    color:#FF6C00;
    margin-left:-150px;
    font-size: 18px;
    letter-spacing: 5px;
}


.sq_four{
    position: absolute;
    top:40%;
    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:0;
    left:50%;
    z-index:10;
    margin-left:-30px;
	transition: all 1s;
    -webkit-transition: all 1s;
    opacity: 0;
}

.active .sq_four2{
    opacity: 1;
    bottom:20%;
    transition-delay:1s;
    -webkit-transition-delay: 1s;
}



.sq_four_all{
    position: absolute;
    top:0;
    left:50%;
    margin-left:-133px;
    margin-top:-50px;
    z-index:3;
    color:#3E3E3E;
    letter-spacing: 5px;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    transition: all 1s;
    -webkit-transition: all 1s;
    opacity: 0;
}
.sq_four_all span{ color:#FF6C00}

.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: #FF6C00;opacity: 0;
}