*, *:before, *:after
{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
@font-face{
    font-family:'mykaiti';
    src:url('FZKTJW.TTF') format('truetype');
}
img{display: block;}
.inner, .nav-panel ul .nav-btn:after
{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
}

html, body
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}


.wrapper
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform 1.5s;
	transition: transform 1.5s;
	-webkit-perspective: 3000;
	perspective: 3000;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/*overflow: hidden;*/
}
.wrapper .page
{
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-transform: rotateX(180deg) scale(0.3);
	transform: rotateX(180deg) scale(0.3);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	will-change: transform;
	/*overflow: hidden;*/
}
.wrapper .page h2
{
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	text-transform: uppercase;
	font-size: 3em;
}
.wrapper .page.page1
{
	/*background-color: #66a6b8;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #66a6b8), color-stop(80%, #5471B9));
	background-image: -webkit-linear-gradient(-280deg, #66a6b8 20%, #5471B9 80%);
	background-image: -webkit-linear-gradient(80deg, #66a6b8 20%, #5471B9 80%);
	background-image: linear-gradient(10deg,#66a6b8 20%, #5471B9 80%);*/
}
.wrapper .page.page2
{
	/*background-color: #f29c54;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f29c54), color-stop(100%, #DB4367));
	background-image: -webkit-linear-gradient(-315deg, #f29c54 0%, #DB4367 100%);
	background-image: -webkit-linear-gradient(45deg, #f29c54 0%, #DB4367 100%);
	background-image: linear-gradient(45deg,#f29c54 0%, #DB4367 100%);*/
	background-color: white;
}
.wrapper .page.page3
{
	/*background-color: #23af56;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #23af56), color-stop(100%, #67A79A));
	background-image: -webkit-linear-gradient(-405deg, #23af56 0%, #67A79A 100%);
	background-image: -webkit-linear-gradient(315deg, #23af56 0%, #67A79A 100%);
	background-image: linear-gradient(135deg,#23af56 0%, #67A79A 100%);*/
	background-color: black;
}
.wrapper .page.page4
{
	/*background-color: #412F2F;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412F2F), color-stop(85%, #6B2686));
	background-image: -webkit-linear-gradient(-430deg, #412F2F 15%, #6B2686 85%);
	background-image: -webkit-linear-gradient(290deg, #412F2F 15%, #6B2686 85%);
	background-image: linear-gradient(160deg,#412F2F 15%, #6B2686 85%);*/
	background-color: #fbfbfb;
}
.wrapper .page.page5
{
	/*background-color: #412F2F;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412F2F), color-stop(85%, #6B2686));
	background-image: -webkit-linear-gradient(-430deg, #412F2F 15%, #6B2686 85%);
	background-image: -webkit-linear-gradient(290deg, #412F2F 15%, #6B2686 85%);
	background-image: linear-gradient(160deg,#412F2F 15%, #6B2686 85%);*/
	background-color: #0e1521;
}
.wrapper .page.page6
{
	/*background-color: #412F2F;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412F2F), color-stop(85%, #6B2686));
	background-image: -webkit-linear-gradient(-430deg, #412F2F 15%, #6B2686 85%);
	background-image: -webkit-linear-gradient(290deg, #412F2F 15%, #6B2686 85%);
	background-image: linear-gradient(160deg,#412F2F 15%, #6B2686 85%);*/
	background-color: white;
}
.wrapper .page.page7
{
	/*background-color: #412F2F;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412F2F), color-stop(85%, #6B2686));
	background-image: -webkit-linear-gradient(-430deg, #412F2F 15%, #6B2686 85%);
	background-image: -webkit-linear-gradient(290deg, #412F2F 15%, #6B2686 85%);
	background-image: linear-gradient(160deg,#412F2F 15%, #6B2686 85%);*/
	background-color: white;
}
.wrapper .page.page8
{
	/*background-color: #412F2F;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412F2F), color-stop(85%, #6B2686));
	background-image: -webkit-linear-gradient(-430deg, #412F2F 15%, #6B2686 85%);
	background-image: -webkit-linear-gradient(290deg, #412F2F 15%, #6B2686 85%);
	background-image: linear-gradient(160deg,#412F2F 15%, #6B2686 85%);*/
	background-color: white;
}
.wrapper .page.page9
{
	background-color: #412F2F;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412F2F), color-stop(85%, #6B2686));
	background-image: -webkit-linear-gradient(-430deg, #412F2F 15%, #6B2686 85%);
	background-image: -webkit-linear-gradient(290deg, #412F2F 15%, #6B2686 85%);
	background-image: linear-gradient(160deg,#412F2F 15%, #6B2686 85%);
}
.wrapper .page.page10
{
	background-color: #412F2F;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412F2F), color-stop(85%, #6B2686));
	background-image: -webkit-linear-gradient(-430deg, #412F2F 15%, #6B2686 85%);
	background-image: -webkit-linear-gradient(290deg, #412F2F 15%, #6B2686 85%);
	background-image: linear-gradient(160deg,#412F2F 15%, #6B2686 85%);
}
.wrapper.active-page1
{
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}
.wrapper.active-page1 .page.page1
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page2
{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}
.wrapper.active-page2 .page.page2
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page3
{
	-webkit-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
}
.wrapper.active-page3 .page.page3
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page4
{
	-webkit-transform: translateY(-300%);
	-ms-transform: translateY(-300%);
	transform: translateY(-300%);
}
.wrapper.active-page4 .page.page4
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page5
{
	-webkit-transform: translateY(-400%);
	-ms-transform: translateY(-400%);
	transform: translateY(-400%);
}
.wrapper.active-page5 .page.page5
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page6
{
	-webkit-transform: translateY(-500%);
	-ms-transform: translateY(-500%);
	transform: translateY(-500%);
}
.wrapper.active-page6 .page.page6
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page7
{
	-webkit-transform: translateY(-600%);
	-ms-transform: translateY(-600%);
	transform: translateY(-600%);
}
.wrapper.active-page7 .page.page7
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page8
{
	-webkit-transform: translateY(-700%);
	-ms-transform: translateY(-700%);
	transform: translateY(-700%);
}
.wrapper.active-page8 .page.page8
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page9
{
	-webkit-transform: translateY(-800%);
	-ms-transform: translateY(-800%);
	transform: translateY(-800%);
}
.wrapper.active-page9 .page.page9
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page10
{
	-webkit-transform: translateY(-900%);
	-ms-transform: translateY(-900%);
	transform: translateY(-900%);
}
.wrapper.active-page10 .page.page10
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.nav-panel
{
	position: fixed;
	top: 50%;
	right: 1em;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1000;
	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
	transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
	will-change: transform, opacity;
}
.nav-panel.invisible
{
	opacity: 0;
	-webkit-transform: translateY(-50%) scale(0.5);
	-ms-transform: translateY(-50%) scale(0.5);
	transform: translateY(-50%) scale(0.5);
}
.nav-panel ul
{
	list-style-type: none;
}
.nav-panel ul .nav-btn
{
	position: relative;
	overflow: hidden;
	width: 1em;
	height: 1em;
	margin-bottom: 0.5em;
	border: 0.12em solid #ccc;
	border-radius: 50%;
	cursor: pointer;
	-webkit-transition: border-color, -webkit-transform 0.3s;
	transition: border-color, transform 0.3s;
	will-change: border-color, transform;
}
.nav-panel ul .nav-btn:after
{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.3);
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.3);
	transform: translateX(-50%) translateY(-50%) scale(0.3);
	background-color: #ccc;
	opacity: 0;
	-webkit-transition: -webkit-transform, opacity 0.3s;
	transition: transform, opacity 0.3s;
	will-change: transform, opacity;
}
.nav-panel ul .nav-btn.active:after, .nav-panel ul .nav-btn:hover:after
{
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.7);
	transform: translateX(-50%) translateY(-50%) scale(0.7);
	opacity: 1;
}
.nav-panel ul .nav-btn:hover
{
	border-color: #646464;
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}
.nav-panel ul .nav-btn:hover:after
{
	background-color: #646464;
}
.nav-panel .scroll-btn
{
	position: absolute;
	left: 0;
	width: 1em;
	height: 1em;
	border: 0.2em solid #ccc;
	border-left: none;
	border-bottom: none;
	cursor: pointer;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: border-color 0.3s;
	transition: border-color 0.3s;
}
.nav-panel .scroll-btn.up
{
	top: -1.6em;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.nav-panel .scroll-btn.down
{
	bottom: -1.2em;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}
.nav-panel .scroll-btn:hover
{
	border-color: #646464;
}
.mianbox{
	margin-top: 80px;
	position: relative;
	overflow: hidden;
}
.banner{
	position: absolute;
	height: 100%;
	width: 100%;
	display: none;
	z-index: 1;
}
.banner .bg{
	position: absolute;
	height: 100%;
	width: 100%;
}
.animate1{
	position: absolute;
	right: 10%;
	bottom: 13%;
	animation: right_in 10s ease-in-out 1s infinite;
	-webkit-animation: right_in 10s ease-in-out 1s infinite;
	opacity: 0;
	width:500px;
}
@keyframes right_in
{
   	0% {right: -100%;opacity: 0;}
    10% {right: 10%;opacity: 1;}
    70% {right: 10%;opacity: 1;}
    80% {right: -100%;opacity: 0;}
    100% {right: -100%;opacity: 0;}
}
@-webkit-keyframes right_in
{
   	0% {right: -100%;opacity: 0;}
    10% {right: 10%;opacity: 1;}
    70% {right: 10%;opacity: 1;}
    80% {right: -100%;opacity: 0;}
    100% {right: -100%;opacity: 0;}
}
.animate2{
	position: absolute;
	width: 100%;
	animation: float_up 4s ease-in-out 0s infinite;
	-webkit-animation: float_up 4s ease-in-out 0s infinite;
}
@keyframes float_up
{
     0%   {top:0px;}
    50% {top: 16px;opacity: 0;}
    100%   {top:0px;}
}
@-webkit-keyframes float_up
{
     0%   {top:0px;}
    50% {top: 16px;opacity: 0;}
    100%   {top:0px;}
}
.animate3{
	position: absolute;
	width: 50%;
	left: 10%;
	top:40%;
	font-size: 30px;
	color: white;
	line-height: 54px;
	animation: left_in 10s ease-in-out 0s infinite;
	opacity: 0;
	-webkit-animation: left_in 10s ease-in-out 0s infinite;
}
@keyframes left_in
{
    0%   {opacity: 0;margin-top: 24px;}
    10% {opacity: 1;margin-top: 0px;}
    20% {opacity: 1;}
    70% {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: 0;}
}
@-webkit-keyframes left_in
{
   0%   {opacity: 0;margin-top: 24px;}
    10% {opacity: 1;margin-top: 0px;}
    20% {opacity: 1;}
    70% {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: 0;}
}
.animate3 span{
	font-size: 28px;
}
.round{
	width: 345px;
	position: absolute;
	z-index: 2;
	overflow: hidden;
	bottom: 50px;
	left: 50%;
	margin-left: -124px;
}
.round li{
	width: 55px;
	height: 8px;
	margin: 0 15px;
	float: left;
	background-color: white;
	border-radius:8px ;
	cursor: pointer;
}
.onround{
	background-color: #75c7f8 !important;
}
.left_key{
	position: absolute;
	left: 0;
	top: 30px;
	width:350px;
}
.right_key{
	position: absolute;
	right: 0;
	top: 0px;
	width:366px;
}
.bottom_key{
	position: absolute;
	left: 50%;
	margin-left: -235px;
	bottom: 0px;
	width:470px;
}
.float_round{
	position: absolute;
	right: 140px;
	bottom: 30%;
}
.indextitle{
	position: absolute;
	top: 11%;
	width: 100%;
	text-align: center;
}
.indextitle a{
	font-size: 34px;
	font-family: "微软雅黑";
	color: #384c78;
	line-height: 50px;
}
.indextitle p{
	font-size: 20px;
	color: #9c9c9c;
	font-family: "宋体";
	line-height: 20px;
}
.introduction{
	font-size: 28px;
	font-family: "苹方";
	color: #373737;
	text-align: center;
	line-height: 42px;
	position: absolute;
	width: 100%;
	top: 37%;
}
.introduction a{
	font-family: "苹方";
	font-size: 24px !important;
	color: #639eff;
}
.servicebg{
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 1;
}
.servicebg1{
	background: url("../img/21.png") no-repeat center;
	background-size: cover;
}
.servicebg2{
	background: url("../img/22.png") no-repeat center;
	background-size: cover;
}
.servicebg3{
	background: url("../img/23.png") no-repeat center;
	background-size: cover;
}
.servicebg4{
	background: url("../img/24.png") no-repeat center;
	background-size: cover;
}
.servicebg5{
	background: url("../img/25.png") no-repeat center;
	background-size: cover;
}
.service_c{
	background-color: black;
	width: 300px;
	height: 100%;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 10%;
}
.service_c ul{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -290px;
}
.service_c li{
	color: white;
	font-size: 24px;
	font-family: "苹方";
	padding: 30px 5% 22px 5%;
	width: 76%;
	margin: 0 auto;
	cursor: pointer;
	line-height: 30px;
}
.service_c li span{
	font-size: 16px;
}
.liline{
	border-bottom: solid 1px #5c5c5c;
}
.onservice_c{
	width: 100% !important;
	padding: 30px 17% 22px 17% !important;
	background-color: #c90405;
	border-bottom: solid 1px #c90405 !important;
}
.service_t{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	color: white;
	margin-top: -162px;
}
.service_t li{
	display: none;
}
.service_t li h1{
	font-size: 42px;
	line-height: 84px;
	font-family: "微软雅黑";
	font-weight: normal;
}
.service_t li p{
	font-size: 30px;
	font-family: "微软雅黑";
	line-height: 60px;
}
.snowbg{
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -405px;
	z-index: 1;
}
.service_title{
	text-align: center;
	padding-top: 80px;
}
.service_title a{
	font-size: 34px;
	color: #384C78;
}
.service_title span{
	font-size: 20px;
	color: #9C9C9C;
}
.service_title1{
	text-align: center;
	padding-top: 80px;
}
.service_title1 a{
	font-size: 34px;
	color: white;
}
.service_title1 span{
	font-size: 20px;
	color: white;
}
.rangebg{
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -200px 0 0 -380px;
	z-index: 2;
}
.ball1{
	width: 130px;
	height: 130px;
	background-image: url("../img/ALLcase.png");
	background-repeat: no-repeat;
	background-size: 810px;
	background-position: 0 -6950px;
	font-size: 18px;
	color: black;
	border-radius: 100%;
	text-align: center;
	position: absolute;
	top: 16%;
	left: 14%;
	z-index: 3;
	animation: myball2 5s ease 0s alternate infinite;
	-webkit-animation: myball2 5s ease 0s alternate infinite;
}
.ball2{
	width: 108px;
	height: 108px;
	background-image: url("../img/ALLcase.png");
	background-repeat: no-repeat;
	background-size: 800px;
	background-position: 0 -6744px;
	font-size: 18px;
	color: black;
	border-radius: 100%;
	text-align: center;
	position: absolute;
	top: 53%;
	left: 10%;
	z-index: 3;
	animation: myball1 5s ease 0s alternate infinite;
	-webkit-animation: myball1 5s ease 0s alternate infinite;
}
.ball3{
	width: 96px;
	height: 96px;
	background-image: url("../img/ALLcase.png");
	background-repeat: no-repeat;
	background-size: 760px;
	background-position: -120px -6410px;
	font-size: 18px;
	color: black;
	border-radius: 100%;
	text-align: center;
	position: absolute;
	bottom: 3%;
	left: 20%;
	z-index: 3;
	animation: myball2 5s ease 0s alternate infinite;
	-webkit-animation: myball2 5s ease 0s alternate infinite;
}
.ball4{
	width: 80px;
	height: 80px;
	background-image: url("../img/ALLcase.png");
	background-repeat: no-repeat;
	background-size: 520px;
	background-position: -160px -4384px;
	font-size: 12px;
	color: black;
	border-radius: 100%;
	text-align: center;
	position: absolute;
	top: 18%;
	right: 24%;
	z-index: 3;
	animation: myball1 5s ease 0s alternate infinite;
	-webkit-animation: myball1 5s ease 0s alternate infinite;
}
.ball5{
	width: 82px;
	height: 82px;
	background-image: url("../img/ALLcase.png");
	background-repeat: no-repeat;
	background-size: 660px;
	background-position: -490px -5564px;
	font-size: 14px;
	color: black;
	border-radius: 100%;
	text-align: center;
	position: absolute;
	top: 29%;
	right: 10%;
	z-index: 3;
	animation: myball2 5s ease 0s alternate infinite;
	-webkit-animation: myball2 5s ease 0s alternate infinite;
}
.ball6{
	width: 96px;
	height: 96px;
	background-image: url("../img/ALLcase.png");
	background-repeat: no-repeat;
	background-size: 720px;
	background-position: -350px -6070px;
	font-size: 14px;
	color: black;
	border-radius: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	right: 18%;
	z-index: 3;
	animation: myball1 5s ease 0s alternate infinite;
	-webkit-animation: myball1 5s ease 0s alternate infinite;
}
.ball7{
	width: 120px;
	height: 120px;
	background-image: url("../img/ALLcase.png");
	background-repeat: no-repeat;
	background-size: 1020px;
	background-position: -640px -8594px;
	font-size: 14px;
	color: black;
	border-radius: 100%;
	text-align: center;
	position: absolute;
	bottom: 13%;
	right: 12%;
	z-index: 3;
	animation: myball2 5s ease 0s alternate infinite;
	-webkit-animation: myball2 5s ease 0s alternate infinite;
}
.ball8{
	width: 82px;
	height: 82px;
	background-image: url("../img/ALLcase.png");
	background-repeat: no-repeat;
	background-size: 640px;
	background-position: -560px -5390px;
	font-size: 14px;
	color: black;
	border-radius: 100%;
	text-align: center;
	position: absolute;
	bottom: 4%;
	right: 25%;
	z-index: 3;
	animation: myball1 5s ease 0s alternate infinite;
	-webkit-animation: myball1 5s ease 0s alternate infinite;
}
@keyframes myball1{
    0%, 100% {
       transform: translateY(0) rotate(-6deg) scale(0.9);
    }
    50% {
       transform: translateY(-20px) rotate(8deg);
    }
}
@-webkit-keyframes myball1{
    0%, 100% {
       transform: translateY(0) rotate(-6deg) scale(0.9);
    }
    50% {
       transform: translateY(-20px) rotate(8deg);
    }
}
@keyframes myball2{
    0%, 100% {
        transform: translateY(0) rotate(6eg);
    }
    50% {
       	transform: translateY(-20px) rotate(-8deg) scale(0.9);
    }
}
@-webkit-keyframes myball2{
    0%, 100% {
        transform: translateY(0) rotate(6eg);
    }
    50% {
       	transform: translateY(-20px) rotate(-8deg) scale(0.9);
    }
}
.ballbg1{
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	margin: -143px 0 0 -205px;
	border-radius: 100%;
	width: 110px;
	height: 110px;
	background: url(../img/29.png) no-repeat center;
	background-color: red;
	opacity: 0;
}
.ballbg1:hover{
	opacity: 1;
}
.ballbg2{
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	margin: -196px 0 0 -21px;
	border-radius: 100%;
	width: 110px;
	height: 110px;
	background: url(../img/31.png) no-repeat center;
	background-color: red;
	opacity: 0;
}
.ballbg2:hover{
	opacity: 1;
}
.ballbg3{
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	margin: -78px 0 0 114px;
	border-radius: 100%;
	width: 110px;
	height: 110px;
	background: url(../img/33.png) no-repeat center;
	background-color: red;
	opacity: 0;
}
.ballbg3:hover{
	opacity: 1;
}
.ballbg4{
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	margin: 120px 0 0 95px;
	border-radius: 100%;
	width: 110px;
	height: 110px;
	background: url(../img/35.png) no-repeat center;
	background-color: red;
	opacity: 0;
}
.ballbg4:hover{
	opacity: 1;
}
.ballbg5{
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	margin: 194px 0 0 -120px;
	border-radius: 100%;
	width: 110px;
	height: 110px;
	background: url(../img/37.png) no-repeat center;
	background-color: red;
	opacity: 0;
}
.ballbg5:hover{
	opacity: 1;
}
.ballbg6{
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	margin: 49px 0 0 -247px;
	border-radius: 100%;
	width: 110px;
	height: 110px;
	background: url(../img/39.png) no-repeat center;
	background-color: red;
	opacity: 0;
}
.ballbg6:hover{
	opacity: 1;
}
.productbox{
	margin: 50px 0;
	height: 448px;
	overflow: hidden;
	width: 100%;
	position: relative;
}
.productbox a{
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -400px;
	transition: all ease-in 0.4s;
	opacity: 0;
	height:100%;
	width: 800px;
	overflow:hidden;
	background-repeat:no-repeat;
	background-size:800px;
	background-image:url(../img/ALLcase.png);
}
.productbox a img{
	width: 800px;
}
.product1{
	background-position:0 0;
}
.product2{
	background-position:0 -448px;
}
.product3{
	background-position:0 -896px;
}
.product4{
	background-position:0 -1344px;
}
.product5{
	background-position:0 -1792px;
}
.product6{
	background-position:0 -2240px;
}
.product7{
	background-position:0 -2688px;
}
.product8{
	background-position:0 -3136px;
}
.product9{
	background-position:0 -3584px;
}
.product10{
	background-position:0 -4032px;
}
.product11{
	background-position:0 -4480px;
}
.product12{
	background-position:0 -4934px;
}
.product13{
	background-position:0 -5382px;
}
.product14{
	background-position:0 -5830px;
}
.product15{
	background-position:0 -6278px;
}
.index_img{
	cursor: pointer;
	margin: 0 auto;
	display: block !important;
}
.left_btn{
	width: 76px;
	height: 76px;
	background-color: rgba(255,255,255,0.2);
	position: absolute;
	top: 340px;
	left: 10%;
	border-radius: 100%;
	z-index: 3;
}
.right_btn{
	width: 76px;
	height: 76px;
	background-color: rgba(255,255,255,0.2);
	position: absolute;
	top:340px;
	right: 10%;
	border-radius: 100%;
	z-index: 3;
}
.right_btn:hover,.left_btn:hover{
	background-color: rgba(255,255,255,0.5);
	cursor: pointer;
}
.img_centent{
	color: white;
	text-align: center;
	width: 96%;
	margin: 0 auto;
}
.img_centent h1{
	font-size: 20px;
	font-family: "微软雅黑";
	line-height: 50px;
	font-weight: normal;
}
.img_centent p{
	font-size: 16px;
	font-family: "宋体";
	line-height: 24px;
}
.ideabox{
	width: 1201px;
	margin: 20px auto;
	overflow: hidden;
}
.ideabox li{
	width: 50%;
	float: left;
	padding: 40px 0;
	position: relative;
}
.ideabox li h1{
	font-family: "微软雅黑";
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;
	color: #515567;
	margin-bottom:16px;
	padding-left: 122px;
}
.ideabox li p{
	font-family: "宋体";
	font-size: 16px;
	line-height: 16px;
	color: #9C9C9C;
	padding-left: 122px;
}
.ideabox li:hover{
	/*background-color: #c60101;*/
	background-position: left -122px;
	background: -moz-linear-gradient(left, #fb3232 0%, #c60101 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c60101), color-stop(100%,#c60101));
    background: -webkit-linear-gradient(left, #fb3232 0%,#c60101 100%);
    background: -o-linear-gradient(left, #fb3232 0%,#c60101 100%);
    background: -ms-linear-gradient(left, #fb3232 0%,#c60101 100%);
    background: linear-gradient(to right, #fb3232 0%,#c60101 100%);
}
.ideabox li:hover h1,.ideabox li:hover p{
	color: white;
}
.ideabox li:hover .image{
	background-position: left bottom;
}
.ideabox li .image{
	width: 122px;
	height: 122px;
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	top: 0;
	left: 0;
}
.idea1 .image{
	background-image: url(../img/47.png);
}
.idea2 .image{
	background-image: url(../img/48.png);
}
.idea3 .image{
	background-image: url(../img/49.png);
}
.idea4 .image{
	background-image: url(../img/50.png);
}
.idea1{
	border-right: solid 1px #d6d6d6;
	border-bottom: solid 1px #d6d6d6;
}
.idea2{
	border-bottom: solid 1px #d6d6d6;
}
.idea3{
	border-right: solid 1px #d6d6d6;
}
.reasonbox{
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #373d41;
	width: 100%;
}
.reason_t{
	color: white;
	font-family: "微软雅黑";
	margin: 40px auto;
	text-align: center;
}
.reason_t a{
	font-size: 34px;
	color: white;
	line-height: 34px;
}
.reason_t p{
	font-size: 20px;
	color: white;
	line-height: 58px;
}
.reason_centent{
	width: 1200px;
	margin: 0 auto 60px auto;
	overflow: hidden;
}
.reason_centent div{
	float: left;
	width: 25%;
	font-family: "mykaiti";
	font-size: 28px;
	color: white;
	padding: 22px 0;
	text-indent: 2em;
}
.reason1{
	background: url(../img/51.png) no-repeat left center;
}
.reason2{
	background: url(../img/52.png) no-repeat left center;
}
.reason3{
	background: url(../img/53.png) no-repeat left center;
}
.reason4{
	background: url(../img/54.png) no-repeat left center;
}
.contactbox{
	width: 1200px;
	margin: 40px auto 0 auto;
	overflow: hidden;
}
.map{
	float: left;
	border: solid 1px #d7d7d7;
}
.contact{
	float: right;
	width: 410px;
	padding-top: 20px;
	background: url(../img/55.png) no-repeat top;
}
.contact li{
	font-size: 14px;
	color: #5C5C5C;
	width: 380px;
	margin: 14px auto 0 auto;
}
.contact li input[type="text"]{
	border: solid 1px #e9e9e9;
	background-color: #f1f1f1;
	line-height: 28px;
	padding: 0 6px;
}
.name{
	width: 168px;
}
.tel,.email{
	width: 310px;
}
.text_area{
	width: 380px;
	height: 108px;
	border: solid 1px #e9e9e9;
	background-color: #f1f1f1;
	padding:6px;
	resize: none;
	font-size: 14px;
}
.submit_btn{
	width: 80px;
	line-height: 26px;
	font-size: 14px;
	color: white;
	background-color: #ff9121;
	text-align: center;
	border-radius: 4px;
	margin: 16px auto;
}
.submit_btn:hover{
	color: cadetblue;
	cursor: pointer;
}
.bottom{
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	background-color: #2f2f2f;
}
.bottom_main{
	width: 1200px;
	margin: 40px auto 0 auto;
	overflow: hidden;
}
.bottom_nav{
	float: left;
	width: 160px;
	margin-left:7% ;
}
.bottom_nav a{
	float: left;
	color: white;
	font-size: 12px;
	line-height: 16px;
	display: block;
	width: 32%;
	margin: 0px 9% 40px 9%;
}
.bottom_nav a:hover{
	color: #74aaff;
}
.contacts{
	width: 430px;
	float: left;
	margin-left: 14%;
}
.contacts li{
	font-size: 12px;
	line-height: 16px;
	color: white;
	text-indent: 2em;
	margin-bottom: 12px;
}
.bg1{
	background:url(../img/56.png) no-repeat left center;
}
.bg2{
	background:url(../img/57.png) no-repeat left center;
}
.bg3{
	background:url(../img/58.png) no-repeat left center;
}
.bg4{
	background:url(../img/59.png) no-repeat left center;
}
.bg5{
	background:url(../img/60.png) no-repeat left center;
}
.codebox{
	float: right;
	margin-right:7% ;
}
.codebox p{
	font-size: 12px;
	color: white;
	text-align: center;
	margin: 10px auto 0 auto;
}
.copyright, .copyright a{
	text-align: center;
	font-size: 12px;
	line-height: 24px;
	color: white;
	margin-bottom: 30px;
}
.copyright a:hover{
	color: #06cffd;
}
.sex{
	display: inline-block;
	vertical-align: top;
	padding-left: 24px;
	margin-left: 12px;
	cursor: pointer;
	background: url(../img/63.png) no-repeat left bottom ;
}
.sex:hover{
	opacity: 0.5;
}
.onsex{
	background: url(../img/63.png) no-repeat left top !important;
}
.product_num{font-size: 24px;color: white;position: absolute;bottom: 12px;line-height: 76px;text-align: center;width: 100%;display: none;}
.nav-page8,.page8{display: none;}
.body_scroll{position: fixed;}
@media (max-width: 1366px){
	.animate1{width: 40%;}
	.animate3{width: 32%;font-size: 24px;line-height: 48px;}
	.animate3 span{font-size: 20px;}
	.round {width: 165px;margin-left: -82px;bottom: 25px;}
	.round li {width: 35px;margin: 0 10px;}
	.bottom_key{width: 24%;margin-left: 0px;left: 38%;}
	.left_key{width: 15%;}
	.right_key{	width: 15%;}
	.indextitle {top: 20px;}
	.introduction {top: 28%;font-size: 24px;}
	.service_c ul{margin-top: -245px;}
	.service_c li {font-size: 18px;padding: 18px 5%;}
	.service_t li p { font-size: 24px;line-height: 48px;}
	.onservice_c {padding: 18px 17% !important;}
	.service_t {margin-top: -200px;}
	.service_title,.service_title1{padding-top: 20px;}
	.snowbg{width: 30%;left: 35%;margin-left:0}
	.reason_t{margin: 30px auto;}
	.reason_centent {margin: 0 auto 30px auto;}
	.rangebg{width: 546px;margin: -143px 0 0 -273px;}
	.ballbg1,.ballbg2,.ballbg3,.ballbg4,.ballbg5,.ballbg6{width: 80px;height: 80px;background-size: 80px;}
	.ballbg1:hover,.ballbg2:hover,.ballbg3:hover,.ballbg4:hover,.ballbg5:hover,.ballbg6:hover{background-size: 80px;}
	.ballbg1 {margin: -102px 0 0 -148px;}
	.ballbg2 {margin: -140px 0 0 -16px;}
	.ballbg3 {margin: -56px 0 0 82px;}
	.ballbg4 {margin: 88px 0 0 68px;}
	.ballbg5 {margin: 138px 0 0 -87px;}
	.ballbg6 {margin: 34px 0 0 -178px;}
	.reason_t a {font-size: 24px;line-height: 34px;}
	.reason_t p {font-size: 16px;line-height: 34px;}
	.reason_centent div {font-size: 22px;padding: 10px 0;background-size: 30px;}
	.ideabox li {padding: 22px 0;}
	.ideabox li .image {width: 98px;height: 98px;background-position: -10px -10px;}
	.ideabox li:hover .image{background-position: -10px -132px;}
	.bottom_main,.contactbox{margin: 16px auto 0 auto;}
	.copyright {margin-bottom: 10px;line-height: 18px;}
	.bottom_nav a {margin: 0px 9% 18px 9%;}
	.contacts li {margin-bottom: 7px;}
	.codebox img{width: 90px;}
	.contactbox{width: 75%;}
	.map{width: 53.5%;}
	.map img{width:100%;}
	.contact{padding-top: 0px;}
	.contact li {margin: 12px auto 0 auto;}
	.text_area {height: 76px;}
	.submit_btn {margin: 12px auto;}
	.service_title a ,.indextitle a,.service_title1 a {font-size: 26px;}
	.service_title span,.service_title1 span{font-size: 16px;}
	.productbox {margin: 40px 0 30px 0;height: 278px;}
	.productbox a{width: 500px;margin-left: -250px;background-size: 500px;}
	.right_btn,.left_btn{top: 210px;}
	.product2{
		background-position:0 -280px;
	}
	.product3{
		background-position:0 -560px;
	}
	.product4{
		background-position:0 -840px;
	}
	.product5{
		background-position:0 -1120px;
	}
	.product6{
		background-position:0 -1402px;
	}
	.product7{
		background-position:0 -1682px;
	}
	.product8{
		background-position:0 -1962px;
	}
	.product9{
		background-position:0 -2242px;
	}
	.product10{
		background-position:0 -2522px;
	}
	.product11{
		background-position:0 -2802px;
	}
	.product12{
		background-position:0 -3082px;
	}
	.product13{
		background-position:0 -3364px;
	}
	.product14{
		background-position:0 -3644px;
	}
	.product15{
		background-position:0 -3922px;
	}
}
@media (max-width: 1024px){
	.animate1 {bottom: 20%;}
	.animate3 {width: 40%;}
	.indextitle {top: 60px;}
	.introduction {top: 38%;}
	.service_title, .service_title1 {padding-top: 60px;}
	.productbox {margin: 80px 0 30px 0;}
	.right_btn, .left_btn {top: 300px;}
	.ideabox {width: 96%;margin: 60px auto;}
	.ideabox li p {font-size: 14px;}
	.reason_t {margin: 40px auto;}
	.reason_centent {margin: 0 auto 40px auto;width: 96%;}
	.contactbox {width: 96%;margin: 40px auto 0 auto;}
	.bottom_main{margin: 60px auto 0 auto;width: 90%;}
	.bottom_nav{margin-left: 0;}
	.codebox{margin-right: 0;}
	.left_key,.right_key{ width: 25%;}
	.bottom_key {width: 40%;left: 30%;}
	.service_t {margin-top: -150px;}
	.copyright{margin-bottom: 30px;}
	
}
@media (max-width: 768px){
	.mianbox {margin-top: 44px;}
	.animate3{width: 70%;top: 15%;}
	.animate1 {width: 70%;}
	.service_c {background-color: black;width: 100%;;z-index: 2;bottom: 0;left: 0%;height: 100px;top: auto;}
	.service_c li{float: left;width: 19.6%;padding: 20px 0;text-align: center;line-height: 20px;background-color: #282828;margin: 0 0.2%;}
	.service_c li span{font-size: 12px;}
	.service_c ul {margin-top: 0px;top:0;}
	.onservice_c {padding:20px 0 !important;width: 19.6% !important;background-color: #c90405 !important;}
	.service_t {position: relative;top: 30%; left: 5%;margin: 0;width: 90%;text-align: center;}
	.liline{border: none;}
	.ball6{top: 55%;right: 16%;}
	.ball2{top: 68%;}
	.productbox{margin-top:140px}
	/*.productbox a {width: 90%; margin-left: 0;left: 5%;}
	.productbox a img{width: 100%;}*/
	.right_btn, .left_btn {top: auto;bottom: 12px;}
	.right_btn{right: 50%;margin-right: -150px;}
	.left_btn{left: 50%;margin-left: -150px;}
	.img_centent {width: 65%;}
	.ideabox li {width: 90%;float: none;margin: 12px auto;border: none;}
	.reason_centent div {width: 30%;margin: 0 10% 40px 10%;}
	.reason_centent{margin: 0 auto;}
	.bottom_main { margin: 20px auto 0 auto;}
	.bottom_nav{float: none;overflow: hidden;width: 100%;}
	.bottom_nav a{margin:0px;padding:20px 0;font-size: 16px;width: 20%;text-align: center;}
	.contacts {width: 100%;float: none;margin: 20px 0;}
	.contacts li {font-size: 14px;line-height: 28px;}
	.codebox{margin: 12px 0;float: none;display: none;}
	.codebox img{margin: 0 auto;}
	.codebox p{font-size: 12px;}
	.copyright {font-size: 14px;margin-bottom: 12px;}
	.contact{float: none;margin: 0 auto;}
	.map{float: none;margin: 30px auto;}
	.product_num {display: block;}
}
@media (max-width: 414px){
	.introduction {
	    font-size: 16px;
	    line-height: 32px;
	    width: 84%;
	    left: 8%;
	    text-align: justify;
	    text-indent: 2em;
	}
	.introduction span{display: none;}
	.introduction a{font-size: 18px !important;display: inline-block;text-align: center;width: 100%;}
	.service_t li h1 {font-size: 26px;line-height: 90px;}
	.service_t li p {font-size: 16px;line-height: 32px;}
	.service_c li {font-size: 12px;}
	.service_c li span {display: none;}
	.service_c{height: 75px;}
	.productbox {height: 200px;}
	.productbox a {width:360px;margin-left: -180px;background-size: 360px;}
	.product2{
		background-position:0 -202px;
	}
	.product3{
		background-position:0 -405px;
	}
	.product4{
		background-position:0 -606px;
	}
	.product5{
		background-position:0 -808px;
	}
	.product6{
		background-position:0 -1012px;
	}
	.product7{
		background-position:0 -1210px;
	}
	.product8{
		background-position:0 -1414px;
	}
	.product9{
		background-position:0 -1614px;
	}
	.product10{
		background-position:0 -1816px;
	}
	.product11{
		background-position:0 -2020px;
	}
	.product12{
		background-position:0 -2220px;
	}
	.product13{
		background-position:0 -2422px;
	}
	.product14{
		background-position:0 -2622px;
	}
	.product15{
		background-position:0 -2814px;
	}
	.img_centent {width: 90%;}
	.right_btn, .left_btn {width: 45px;height: 45px;}
	.right_btn img, .left_btn img{width: 100%;}
	.right_btn{margin-right: -90px;}
	.left_btn{margin-left: -90px;}
	.product_num {font-size: 14px;line-height: 45px;display: block;}
	.img_centent p {font-size: 14px;line-height: 24px}
	.reason_t { margin: 12px auto;}
	.reason_t a {font-size: 18px;line-height: 28px;}
	.reason_t p {font-size: 12px;line-height: 18px;}
	.reason_centent div { width: 40%;margin: 0 5% 24px 5%;font-size: 16px; background-size: 20px;}
	.ideabox li {padding: 12px 0;}
	.ideabox li h1{font-size: 18px;margin-bottom: 8px;padding-left: 50px;}
	.ideabox{margin: 24px auto;}
	.ideabox li p {font-size: 12px;padding-left: 50px;}
	.ideabox li .image{background-size:50px;width: 50px;height: 70px;background-position: -8px 5px;}
	.ideabox li:hover .image{
		background-position: -8px -40px;
	}
	.service_title, .service_title1 {
	    padding-top: 30px;
	}
	.service_title span, .service_title1 span {
    	font-size: 14px;
	}.service_title a, .indextitle a, .service_title1 a {
	    font-size: 20px;
	}
	.indextitle a{line-height: 20px;}
	.copyright {font-size: 14px;line-height: 28px;position: absolute;width: 100%;bottom: 0px;}
	.contacts li {font-size: 14px;line-height: 28px;padding-left: 24px;text-indent: 0;background-position: left 6px;margin-bottom: 14px;}
	.bottom_main{width: 90%;}
	.bottom_nav a{font-size: 14px;padding: 10px 0;}
	.contacts{margin: 14px auto;}
	.bottom_main {margin: 40px auto 0 auto;}
	.nav-page8,.page8{display: block;}
	.PCbottom{display: none;}
	.contact{width: 100%;padding: 10px 0;background: none;}
	.contact li{margin: 24px auto;}
	.map {width: 100%;position: absolute;bottom: 0;left: 0;margin: 0;}
	.bottom{height: 100%;}
	.contactbox{margin: 0 auto;width: 90%;}
	.tel, .email {width: 300px;}
	.text_area {width: 370px;}
	.bottom_nav {margin-bottom: 24px;}
	.submit_btn { width: 120px;line-height: 28px;}
	.ball1 {background-size: 260px;background-position: 0 -2232px;width: 40px;height: 40px;font-size: 12px;top:20%;left: 26%;opacity: 0.7;}
	.ball2 {background-size: 380px;background-position: 0 -3204px;width: 50px;height: 50px;font-size: 12px;top: 12%;left: 10%;opacity: 0.7;}
	.ball3 {background-size: 300px;background-position: -46px -2528px;width: 40px;height: 40px;top:30%;bottom: auto;font-size: 12px;left: 10%;opacity: 0.7;}
	.ball4 {background-size: 300px;background-position: -90px -2530px;width: 50px;height: 50px;font-size: 12px;top: 14%;right: 14%;opacity: 0.7;}
	.ball5 {background-size: 320px;background-position: -236px -2696px;width: 40px;height: 40px;font-size: 12px;opacity: 0.7;}
	.ball6 {background-size: 320px;background-position: -280px -2695px;width: 50px;height: 50px;font-size: 12px;top: 85%;right: 50%;opacity: 0.7;}
	.ball7 {background-size: 360px;background-position: -175px -3035px;width: 50px;height: 50px;font-size: 12px;bottom: 8%;opacity: 0.7;}
	.ball8 {background-size: 320px;background-position: -280px -2696px;width: 40px;height: 40px;font-size: 12px;bottom: 60%;right: 35%;opacity: 0.7;}
	.rangebg {width: 372px;margin: -50px 0 0 -186px;}
	.snowbg {width: 50%;left: 25%;margin-left: 0;}
	.ballbg1, .ballbg2, .ballbg3, .ballbg4, .ballbg5, .ballbg6 {width: 54px;height: 54px;background-size: 50px;}
	.ballbg1:hover,.ballbg2:hover,.ballbg3:hover,.ballbg4:hover,.ballbg5:hover,.ballbg6:hover{background-size: 50px;}
	.ballbg4 {margin: 108px 0 0 46px;}
	.ballbg5 {margin: 144px 0 0 -59px;}
	.ballbg6 {margin: 73px 0 0 -121px;}
	.ballbg1 {margin: -22px 0 0 -100px;}
	.ballbg2 {margin: -48px 0 0 -10px;}
	.ballbg3 {margin: 10px 0 0 56px;}
	.left_key, .right_key { width: 35%;}
	.bottom_key {width: 50%;left: 25%;}
	.animate3 {width: 80%;top: 15%;font-size: 18px;line-height: 36px;}
	.nav-panel ul .nav-btn,.nav-panel .scroll-btn{width: 10px;height: 10px;}
	.nav-panel{right: 6px;}
	.servicebg1{
		background: url("../img/s1.png") no-repeat center;
		background-size: cover;
	}
	.servicebg2{
		background: url("../img/s2.png") no-repeat center;
		background-size: cover;
	}
	.servicebg3{
		background: url("../img/s3.png") no-repeat center;
		background-size: cover;
	}
	.servicebg4{
		background: url("../img/s4.png") no-repeat center;
		background-size: cover;
	}
	.servicebg5{
		background: url("../img/s5.png") no-repeat center;
		background-size: cover;
	}
	.animate1 {width: 80%;bottom:10%;}
	
}
@media (max-width: 384px){
	.reason_centent div{font-size: 14px;}
	.ideabox li {width: 100%;}
	.ideabox li .image{ background-position: -8px 10px;}
	.rangebg {width: 338px;margin: -50px 0 0 -169px;}
	.ballbg1 {margin: -24px 0 0 -91px;}
	.ballbg2 {margin: -48px 0 0 -9px;}
	.ballbg3 {margin: 4px 0 0 51px;}
	.ballbg4 {margin: 93px 0 0 43px;}
	.ballbg5 {margin: 124px 0 0 -53px;}
	.ballbg6 {margin: 61px 0 0 -109px;}
	.ballbg1, .ballbg2, .ballbg3, .ballbg4, .ballbg5, .ballbg6 {width: 48px;height: 48px; background-size: 50px;}
	.service_t{top:20%;}
	.ideabox {margin: 12px auto;width: 98%;}
	.productbox {margin: 30px 0 0px 0;height: 190px;}
	.contact li {width: 350px;}
	.tel, .email {width: 260px;}
	.text_area {width: 330px;}
	.service_title, .service_title1 {padding-top: 20px;}
	.ideabox li h1 {font-size: 16px;margin-bottom: 4px;}
	.reason_t a {font-size: 16px;}
	.reason_t {margin: 6px auto;}
	.name {width: 148px;}
}
@media (max-width: 360px){
	.name {width: 128px;}
}
@media (max-width: 320px){
	.bottom_nav a { font-size: 12px;}
	.contacts li {font-size: 12px;}
	.copyright {font-size: 12px;}
	.contact li {width: 100%;}
	.name {width: 98px;}
	.tel, .email {width: 210px;}
	.text_area {width: 280px;}
	.reason_centent div {width: 44%;margin: 0 3%;}
	.ideabox li {padding: 4px 0;}
	.ideabox li h1 {font-size: 14px;margin-bottom: 0px;}
	.img_centent p {font-size: 12px;}
	.introduction {font-size: 14px;line-height: 26px;}
}