/* header */
.header { position: relative; z-index: 1; height: 600px; background: #328ddb; background: linear-gradient(45deg, #10559e 3%, #1e88e5 55%, #40BAF5 91%); }

/* main */
.conter { zoom: 1;}

/* slide */
.slide { position: absolute; z-index: 9; width: 100%; height: 600px; overflow: hidden;}
.slide .hd{position: absolute; top: 0; left: 50%; z-index: 10; width: 1100px; height: 600px; margin-left: -550px;}
.slide .hd .next, .slide .hd .prev { position: absolute; top: 50%; width: 50px; height: 50px; text-align: center; margin-top: -25px ;-webkit-transition: all 0.3s ease-in-out; }
.slide .hd .next { left: -70px; }
.slide .hd .prev { right: -70px; }
.slide .hd .prev .fa, .slide .hd .next .fa { font-size: 50px; color: #e3e8f6 }
.slide .hd a:hover .fa { color: #368bd7 }

.slide .bd { position: relative; z-index: 9; overflow: hidden; }
.slide .bd li { width: 100% !important; height: 600px; overflow: hidden; text-align: center; }
.slide .bd li img { position: absolute; left: 50%; top: 0; width: 1920px; height: 600px; margin-left: -960px; }

/* search */
.search{ position: absolute; bottom: 0; left: 50%; z-index: 10; width: 1070px; height: 45px; line-height: 45px; margin-left: -550px; padding: 0 15px; color: #fff; background: #011b65}

.search .fa{ width: 18px; margin-top: 14px; text-align: center; font-size: 18px;}
.search .fl { position: relative; width: 400px; height: 25px; margin-top: 10px; padding: 0 0 0 20px; background-color: #fff; border-radius: 15px; }
.search .search-keyword { display: block; width: 185px; height: 17px; margin: 4px 0; font-size: 12px; line-height: 1.42857143; color: #999; border: 0; }
.search .search-submit { position: absolute; right: 1px; top: 1px; width: 86px; height: 23px; background: linear-gradient(180deg, #fff 5%, #dcdcdc 65%, #ccc 98%); border: 0; border-radius: 15px; font: 12px Verdana, Arial, Helvetica, sans-serif; color: #666; }
.search .search-submit:hover { background: linear-gradient(180deg, #dcdcdc 5%, #707c8a 98%); color: #fff; }

.search .fr{}
.search .fr a{color: #fff}
.search .fr a:hover{ color: #368bd7 }

/* service */
.service { position: relative; height: 320px; overflow: hidden; background: #eee }
.service ul { overflow: hidden; }
.service ul li { float: left; -webkit-transition: all 0.3s; transition: all 0.3s; margin-top: 40px; width: 110px; height: 110px; padding: 15px; border-radius: 50%; background-color: #e3e8f6; position: relative; margin-right: 66px; background: url(../images/yuan1.png) no-repeat left top transparent\9; overflow: hidden;}
.service ul li a { display: block; -webkit-transition: all 0.3s; transition: all 0.3s; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; background-color: transparent\9; }
.service ul li p { opacity: 0; filter: alpha(opacity=0); display: none\9; }
.service ul li strong { position: absolute; -webkit-transition: all 0.3s; transition: all 0.3s; left: 0; width: 100%; text-align: center; color: #666; font-size: 14px; top: 150px; font-weight: normal; line-height: 22px }
.service ul li i { display: block; font-style: normal; -webkit-transition: all 0.3s; transition: all 0.3s; width: 45px; height: 45px; font-size: 45px; line-height: 45px; text-align: center; color: #011b65; position: absolute; left: 50%; margin-left: -22px; top: 47px; }
.service ul li:hover a strong { color: #011b65; -webkit-transition: all 0.3s; transition: all 0.3s; }
.service ul li.no5 i { font-size: 36px; -webkit-transition: all 0.3s; transition: all 0.3s; }
.service ul li.no2 i { font-weight: 100; -webkit-transition: all 0.3s; transition: all 0.3s; }
.service ul li.on { width: 200px; height: 200px; margin-top: 0; padding: 20px; background: url(../images/yuan2.png) no-repeat left top transparent\9; overflow: hidden;}
.service ul li.on a { background-color: #011b65; background-color: transparent\9 }
.service ul li.on strong { color: #fff; z-index: 3; top: 50px; height: 32px; line-height: 32px; font-size: 24px; }
.service ul li.on p { opacity: 1; z-index: 3; display: block\9; filter: alpha(opacity=100); width: 160px; text-align: center; position: absolute; left: 50%; margin-left: -80px; color: #fff; top: 110px; }
.service ul li.on .line { background-color: #fff; height: 1px; width: 25px; margin-left: -12px; left: 50%; position: absolute; top: 95px; z-index: 3; }
.service ul li.on i { width: 200px; height: 200px; left: 20px; top: 20px; margin-left: 0; line-height: 200px; text-align: center; color: #2f4583; font-size: 120px; }
.service ul li.on.no5 i { font-size: 120px; }
.service ul li.on:hover a strong { color: #fff; }
.service ul li.on a:hover { text-decoration: none; }
.quan { opacity: 0; border-radius: 50%; filter: alpha(opacity=0); background: url(../images/lionbg.png) no-repeat left top transparent; background: none\9; position: absolute; left: 20px; top: 20px; width: 200px; height: 200px; -webkit-animation: quan 30s linear  infinite; animation: quan 30s linear infinite; }
.service ul li.on .quan { opacity: 1; filter: alpha(opacity=100); transform: rotate(360deg) }

@keyframes quan{
	from{transform:rotate(0);}
	to{transform: rotate(360deg);}
}
@-webkit-keyframes quan{
	from{-webkit-transform:rotate(0);}
	to{ -webkit-transform: rotate(360deg);}
}

/* products */
.probox { background: #eee; overflow: hidden; }
.probox h2 { margin-bottom: 30px;font-size: 30px; line-height: 1.4em; color: #011b65; text-align: center; }
.probox .pro { height: 650px; overflow: hidden; background: #011b65 }
.probox .hd { text-align: center; overflow: hidden; background: #eee; }
.probox .hd a { display: inline-block; *display: inline; *zoom: 1; margin: 0px 5px -15px; width: 110px; height: 65px; padding: 10px 20px 0; line-height: 25px; color: #011b65; border-radius: 75px 75px 0 0; background: #ccc; background: linear-gradient(180deg, #fff 5%, #dcdcdc 65%, #ccc 98%); -webkit-transition: all 0.3s ease-in-out; }
.probox .hd a:hover, .probox .hd a.on { color: #fff; background: #011b65; }

.prolist { zoom: 1; height: 550px; padding: 40px 0 10px; overflow: hidden; }
.prolist li { position: relative; float: left; width: 243px; margin: 0 40px 30px 0; text-align: center; background: #fff; border: 1px solid #707c8a; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; }
.prolist li:hover { border: 1px solid #e3e8f6; }
.prolist li a { display: block; }
.prolist li a .frame { position: absolute; top: 0; right: 0; z-index: 9; width: 0; height: 0; border-top: 30px solid #707c8a; border-left: 30px solid transparent; }
.prolist li a .frame em { position: absolute; top: -30px; left: -13px; z-index: 10px; font: 18px Helvetica, Arial, sans-serif; color: #fff }
.prolist li:hover a .frame { border-top: 30px solid #011B65; -webkit-transition: all 0.3s ease-in-out; }
.prolist li img { padding-top: 10px; }
.prolist li h3 { line-height: 24px; color: #011B65; }
.prolist li h3 em { color: #011B65; }
.prolist li h4 { line-height: 30px; color: #666; padding: 0 10px 10px; }
.prolist li a .cover { position: absolute; top: 0px; left: 0px; width: 243px; height: 243px; text-align: center; background: rgba(220, 228, 250, 0.9); filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
.prolist li a .cover i { font-size: 60px; color: #011b65 }

.probox .wrapper { position: relative; }
.probox .next, .probox .prev { position: absolute; top: 50%; width: 50px; height: 50px; text-align: center; margin-top: -25px ;-webkit-transition: all 0.3s ease-in-out; }
.probox .next { left: -70px; }
.probox .prev { right: -70px; }
.probox .prev .fa, .probox .next .fa { font-size: 50px; color: #e3e8f6 }
.probox a:hover .fa { color: #368bd7 }

/* tuijian */
.tuijian { position: relative; }
.tuijian h2 { margin-bottom: 30px; text-align: center; line-height: 55px; font-size: 30px; color: #011b65 }
.tuijian .next, .tuijian .prev { position: absolute; top: 50%; width: 50px; height: 50px; text-align: center; margin-top: 20px ;-webkit-transition: all 0.3s ease-in-out; }
.tuijian .next { left: -70px; }
.tuijian .prev { right: -70px; }
.tuijian .prev .fa, .tuijian .next .fa { font-size: 50px; color: #368bd7 }
.tuijian a:hover .fa { color: #3ba0f8 }

.tuijian .tempWrap{width: 1100px!important;overflow: hidden;}
.tuijian .bd { margin-top: 35px; height: 320px;overflow: hidden; zoom: 1;}
.tuijian .bd dl { float: left; width: 540px; height: 280px; margin-right: 20px; padding: 20px 0; background: #eee }
.tuijian .bd dl dt{position: relative; width: 537px; border-left: 3px solid #011b65}
.tuijian .bd dl:hover dt{border-color: #3ba0f8}
.tuijian .bd dl dt h3 { height: 35px; line-height: 35px; padding-left: 20px; }
.tuijian .bd dl dt h3 a { display: block; font-size: 16px; color: #011b65; }
.tuijian .bd dl dt h3 a:hover { display: block; font-size: 16px; color: #3ba0f8; }
.tuijian .bd dl dt em.x01{position: absolute; bottom: 0; left: 20px; width: 12%; height: 1px; background: #d1d1d1}
.tuijian .bd dl dt em.x02{position: absolute; bottom: -5px; left: 60px; width: 12%; height: 1px; background: #d1d1d1}
.tuijian .bd dl dd {position: relative; width:500px; height: 220px; margin:25px auto 0;}
.tuijian .bd dl dd p { height: 72px; overflow: hidden; line-height: 24px; }
.tuijian .bd dl dd img{position: absolute; left: 40px; bottom: 20px}
.tuijian .bd dl dd .fa{position: absolute; right: 70px; bottom: 20px; font-size: 40px;color: #d1d1d1; }

/* about */
.about{}
.about dl { width: 840px; overflow: hidden; }
.about dl dt { float: left; }
.about dl dt img { display: block;}
.about dl dd { padding-left: 340px; }
.about dl dd h2{ line-height: 30px;font-size: 22px; line-height: 1.4em; color: #011b65; }
.about dl dd h3 { font-weight: normal; height: 30px; margin-top: 10px; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about dl dd h3 a { font-size: 16px; color: #333; }
.about dl dd h3 a:hover { color: #368bd7; }
.about dl dd p { height: 100px; margin-top: 5px; line-height: 25px; color: #666; font-size: 12px; text-indent: 2em }
.about dl dd a.more { display: block; color: #011b65;height: 15px; line-height: 15px; font-family: Arial; }
.about dl dd a:hover.more { color: #368bd7 }
.about dl dd a.more .fa { margin-left: 5px; font-size: 15px; }

.btn { position: relative; display: block; width: 180px; margin-bottom: 0; font-weight: normal; text-align: left; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid #f1f1f1; white-space: nowrap; margin-bottom: 13px; padding: 10px 20px; font-size: 16px; line-height: 18px; color: #011b65; background: #ccc; background: linear-gradient(180deg, #fff 5%, #d5d5d5 90%, #ccc 98%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 180deg, startColorstr = #ffffff, endColorstr = #cccccc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); border-radius: 4px; }
.btn .fa { line-height: 42px; font-size: 32px; margin-right: 15px; }
.btn .fa-play-circle { position: absolute; top: 0px; right: 10px; width: 15px; text-align: center; line-height: 50px; font-size: 14px; margin-right: 0; }
.btn em { font-size: 10px; line-height: 16px; color: #707c8a }
.btn:hover { color: #368bd7; text-decoration: none; }
.btn:active { outline: 0; background-image: none; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }

/* news */
.bg { padding-top: 15px; background: #ccc; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d1d1d1), to(#fff)); background: -webkit-linear-gradient(180deg, #d1d1d1 5%, #eaeaea 20%, #fff 98%); background: -moz-linear-gradient(180deg, #d1d1d1 5%, #eaeaea 20%, #fff 98%); background: -o-linear-gradient(180deg, #d1d1d1 5%, #eaeaea 20%, #fff 98%); background: -ms-linear-gradient(180deg, #d1d1d1 5%, #eaeaea 20%, #fff 98%); background: linear-gradient(180deg, #d1d1d1 5%, #eaeaea 20%, #fff 98%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 180deg, startColorstr = #d1d1d1, endColorstr = #ffffff); overflow: hidden; }

.column { width: 540px; }
.column h2 { line-height: 55px; font-size: 22px; color: #011b65 }

.column dl { overflow: hidden; }
.column dl dt { float: left; }
.column dl dt img { display: block; padding: 4px; border: 1px solid #707c8a; }
.column dl dd { padding-left: 120px; }
.column dl dd h3 { font-weight: normal; height: 30px; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.column dl dd h3 a { font-size: 16px; color: #333; }
.column dl dd h3 a:hover { color: #368bd7; }
.column dl dd p { height: 75px; margin-top: 5px; line-height: 25px; color: #666; font-size: 12px; text-indent: 2em }

.column ul { margin-top: 10px; overflow: hidden; zoom: 1; }
.column li { float: left; width: 215px; height: 30px; padding-left: 15px; font-size: 12px; line-height: 30px; background: url(../images/jt.png) no-repeat 4px center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.column li.last { margin-left: 25px; }
.column li:hover { background: url(../images/jthover.png) no-repeat 4px center; }
.column li a { display: block; height: 30px; }

.column a.more { color: #011b65; font-family: Arial; }
.column a:hover.more { color: #368bd7 }
.column a.more .fa { margin-left: 5px; font-size: 15px; }

/* brand */
.brand { margin-bottom: 40px; text-align: center; }
.brand h2 { font-size: 30px; line-height: 1.4em; color: #011b65; }
.brand h3 { padding-top: 15px; font-size: 12px; color: #333; }
.brand a.more { display: block; color: #011b65; font-family: Arial; }
.brand a:hover.more { color: #368bd7 }
.brand a.more .fa { margin-left: 5px; font-size: 15px; }

.scroll { position: relative; z-index: 1; zoom: 1; text-align: center; }
.scroll a.next, .scroll a.prev { position: absolute; top: 15px; width: 50px; height: 50px; z-index: 2; text-align: center; -webkit-transition: all 0.3s ease-in-out; }
.scroll a.next { left: -70px; }
.scroll a.prev { right: -70px; }
.scroll .prev .fa, .scroll .next .fa { font-size: 50px; color: #368bd7 }
.scroll a:hover .fa { color: #3ba0f8 }
.scroll .tempWrap{width: 1100px!important;overflow: hidden;}
.scroll ul { height: 80px; overflow: hidden; zoom: 1; }
.scroll ul li { float: left; width: 200px; margin-right: 25px; display: inline; }
.scroll ul li a, .scroll ul li img { display: block; width: 200px; height: 80px; }