@charset "utf-8";
/* CSS Document */


/* banner */
.banner{width: 100%;height: 730px;position: relative;}


#flashs{ position:relative; height:730px; overflow:hidden;}
#flashs .bgitem{z-index:1;position:absolute; top:0; }
#flashs .btn{ overflow:hidden; width:100%; position:absolute; left:0; bottom:20px; text-align:center;z-index: 9999;}
#flashs .btn span{ display: inline-block;*display: inline-block;width: 28px;height: 28px;background: url(../images/banner-icon01.png) no-repeat center;margin: 0 4px;cursor: pointer; font-size:0;}
#flashs .btn span.cur {background: url(../images/banner-icon02.png) no-repeat center;}

#flashs .bot{display: block;width: 90px;height: 70px;position: absolute;top: 50%;overflow: hidden;cursor: pointer;margin-top: -35px;z-index: 9;display: none;}
#flashs .bot img{display: block;width: 90px;height: 140px;position: relative;}
#flashs .prev{left: 0px;}
#flashs .next{right: 0px;}
#flashs .prev img{top: -70px;}
#flashs:hover .bot{display: block;}
#flashs .bd>div{margin: 0 auto;}

#flashs .bgv-container #background_video{ display:block !important;}

/* banner */
.wrap-banner {height: 2000px;}
.banner{width: 100%;height: 730px;position: relative;}
.banner .bannerBtn{display: block;width: 90px;height: 70px;position: absolute;top: 50%;overflow: hidden;cursor: pointer;margin-top: -35px;z-index: 9;display: none;}
.banner .bannerBtn img{display: block;width: 90px;height: 140px;position: relative;}
.banner i.prev{left: 0px;}
.banner i.next{right: 0px;}
.banner i.prev img{top: -70px;}
.banner .slideBox {width: 100%;height: 730px;position: relative;z-index: 8;}
.banner .slideBox .container {height: 730px;position: relative;}
.banner .slideBox .conbox {position: absolute;left: -360px;top: 0;width: 1920px;height: 730px;}
.banner .slideBox .conbox ul {position: relative;}
.banner .slideBox .conbox ul li {float: left;width: 1920px;height: 730px;position: relative;}
.banner .slideBox .box .pImg {position: absolute;left: 0;top: 0;width: 1920px;height: 730px;z-index: 2;}
.banner .slideBox .box .pImg img {display: block;width: 1920px;height: 730px; min-width:1920px;}
.banner .slideBox .box3 .banBox {width: 1200px;position: relative;margin: 0 auto;height: 730px;z-index: 3;}
.banner .slideBox .box3 .banboxCon {width: 524px;height: 524px;position: absolute;right: 28px;top: 108px;overflow: hidden;}
.banner .slideBox .box3 .banboxConUl {position: absolute;left: 0;top: 0;}
.banner .slideBox .box3 .banBox .concase {float: left; width: 524px;height: 524px;}
.banner .slideBox .box3 .banBox .concase img {display: block;width: 524px;height: 524px;border-radius: 50%;}
.banner .banner-list{width: 100%;text-align: center;position: absolute;left: 0;bottom: 40px;z-index: 9;}
.banner .banner-list span{display: inline-block;*display: inline-block;width: 28px;height: 28px;background: url(../images/banner-icon01.png) no-repeat center;margin: 0 4px;cursor: pointer;}
.banner .banner-list span.cur{background: url(../images/banner-icon02.png) no-repeat center;}
.banner:hover .bannerBtn{display: block;}


/* bgv-container */
.bgv-container{height: 730px;}
.bgv-container .slogan{width: 100%; background: rgba(0,0,0,.3); position: absolute;height: 100%; display:block !important;}
.bgv-container .slogan .container{display:block !important; position:relative !important; width:1200px !important; margin:0 auto !important;}
.bgv-container .p1{font-size: 14px;color: #fff;margin-top: 204px;font-weight: bold;display:block !important;position:relative !important;}
.bgv-container .p2{color: #fff;font-size: 12px;font-weight: bold;margin-top: 7px;display:block !important;position:relative !important;}
.bgv-container p.p3{font-size: 52px;font-weight: bold;color: #fff;margin-top: 43px;display:block !important;position:relative !important;}
.bgv-container p.p4{color: #fff;font-size: 42px;display:block !important;position:relative !important;}

/* about */
.about{width: 100%;background: #f6f6f6;padding-bottom: 18px;}
.about .about-left{float: left;width: 600px;padding-top: 50px;height: 623px;position: relative;}
.about .about-left .top h3{font-size: 28px;color: #333333;font-weight: normal;float: left;}
.about .about-left .top h3 a{color: #333333;text-decoration: none;}
.about .about-left .top p{font-size: 12px;color: #cccccc;float: right;margin-top: 16px;}
.about .about-left dl{margin-top: 33px;}
.about .about-left dt{width: 600px;width: 600px;height: 348px;}
.about .about-left dt .box>img{display: block;width: 600px;height: 300px;border-radius: 4px;}
.about .about-left dt .box{width: 600px;height: 300px;overflow: hidden;position: relative;}
.about .about-left dt .box a{cursor: pointer;}
.about .about-left dt li{height: 48px;line-height: 48px;text-align: center;width: 300px;float: left;background: #fff;font-size: 14px;color: #999999; cursor: pointer;}
.about .about-left dt li:first-child{width: 299px;border-right: 1px solid #eeeeee;}
.about .about-left dt li span{display: inline-block;*display:inline-block;width: 15px;height: 15px;overflow: hidden;position: relative;margin-right: 10px;top: 3px;}
.about .about-left dt li img{display: block;width: 15px;height: 30px;position: relative;}
.about .about-left dt li.cur{color: #0083c9;}
.about .about-left dt li.cur img{top: -15px;}

.about .about-left dd{margin-top: 28px;}
.about .about-left dd h3{font-size: 20px;color: #333333;font-weight: normal;}
.about .about-left dd p{margin-top: 14px;line-height: 25px;color: #666666;font-size: 14px;}
.about .about-left dd a.more{display: block;width: 154px;height: 40px;background: #fff;line-height: 40px;text-align: center;border: 1px solid #e7e7e7;border-radius: 4px 0 4px 0;font-size: 13px;color: #999999;text-decoration: none;position: absolute;left: 0;bottom: 0;transition: all 0.5s ease-out;z-index: 1;}


.about .about-left dd a.more::before{    
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 154px;
    height: 40px;
    background: #0083c9;
    z-index: -1;
    opacity: 0;
    -webkit-transform: scale3d(0.7, 1, 1);
    transform: scale3d(0.7, 1, 1);
    -webkit-transition: -webkit-transform 0.6s, opacity 0.6s;
    transition: transform 0.6s, opacity 0.6s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.about .about-left dd a.more:hover::before{background: #0083c9;opacity: 1;transform: scale3d(1,1,1);-webkit-transform:translate3d(0,0,0)}
.about .about-left dd a.more:hover{color: #fff; background: #0083c9;border-color: #0083c9; }


.about .about-right{width: 560px;float: right;margin-top: 117px;}
.about .about-right li{width: 558px;height: 158px;border: 1px solid #e7e7e7;position: relative;border-radius: 4px 0 0 4px;margin-bottom: 38px;}
.about .about-right li .box{padding: 33px 28px 0 38px;position: relative;}
.about .about-right li .box h3{font-size: 28px;color: #333333;font-weight: normal;}
.about .about-right li .box p{font-size: 14px;color: #666666;line-height: 20px;margin-top: 24px;}
.about .about-right li .box span{font-size: 12px;color: #cccccc;position: absolute;top: 42px;right: 28px;display: block;}
.about .about-right li .box a.ljs{display: block;width: 33px;height: 33px;position: absolute;bottom: 13px;right: 28px;background: url(../images/about_icon02.png) no-repeat center;}
.about .about-right li .box a.ljs img{display: block;width: 33px;height: 33px;}
.about .about-right li i{display: block;width: 10px;height: 160px;position: absolute;left: 0;top: 0;border-radius: 4px 0 0 4px;}
.about .about-right li.li1 i{background: #0083c9;}
.about .about-right li.li2 i{background: #ec6b1a;}
.about .about-right li.li3 i{background: #008ba7;}
.about .about-right li:hover .box a.ljs{background: url(../images/about_icon01.png) no-repeat center;}

/* layout */
.layout{width: 100%;background: url(../images/layoutBg01.jpg) no-repeat center;height: 823px;padding-top: 62px;}
.layout .top{width: 1200px;margin: 0 auto;height: 68px;}
.layout .top dl{float: left;width: 600px;}
.layout .top dt h3{font-size: 28px;color: #333333;font-weight: normal;}
.layout .top dt h3 a{color: #333333;text-decoration: none;}
.layout .top dt p{margin-top: 12px;color: #666666;font-size: 16px;}
.layout .top ul{float:right;}
.layout .top li{float: left;width: 186px;border-right: 1px solid #e9e9e9;height: 69px;text-align: center;}
.layout .top li:first-child{border-left: 1px solid #e9e9e9;}
.layout .top li span{display: block;font-size: 32px;font-weight: bold;}
.layout .top li p{font-size: 14px;color: #333333;margin-top: 12px;}
.layout .top li.li1 span{color: #0083c9}
.layout .top li.li2 span{color: #ec6b1a;}
.layout .top li.li3 span{color: #008ba7;}
.layout .menu{width: 1200px;margin: 66px auto 0;height: 121px;}
.layout .menu li{float: left;width: 300px;height:121px;text-align: center;}
.layout .menu li p{font-size: 28px;color: #333333;}
.layout .menu li span{display: block;font-size: 16px;color: #666666;margin-top: 6px;}
.layout .menu li a{display: block;padding-top: 30px;text-decoration: none;height: 91px;}
.layout .menu li:first-child.cur{background:#005bac;}
.layout .menu li:nth-child(2).cur{background:#008ba7;}
.layout .menu li:nth-child(3).cur{background:#ec6b1a;}
.layout .menu li:last-child.cur{background:#01a23d;}
.layout .menu li.cur p,.layout .menu li.cur span{color: #fff;}
.layout .layout-con{width: 1200px;margin: 40px auto 0;height: 489px;padding: 0 20px;overflow: hidden;position: relative;}
.layout .layout-con .layout-bigpic{width: 1200px;display: block;height: 489px;}
.layout .layout-con .layout-bigpic img{display: block;width: 1200px;height: 489px;border-radius: 6px 0 6px 0;}

.layout .layout-con .conBox{width: 1200px;position: relative;height: 489px;}
.layout .layout-con .box{width: 500px;height: 439px;background: url(../images/layoutBg02.png);padding: 50px 50px 0;position: absolute;left: 0;top: 0;}
.layout .layout-con h3{width: 256px;height: 50px;line-height: 50px;background: #ec6b1a;border-radius: 6px 0 6px 0;text-indent: 20px;position: relative;left: -70px;font-size: 24px;color: #fff;font-weight: normal;}
.layout .layout-con h3 img{position: relative;top: 2px;margin-right: 22px;}
.layout .layout-con .box span{display: block;margin-top: 28px;font-size: 16px;color: #fff;}
.layout .layout-con .box p{font-size: 14px;color: #fff;margin-top: 22px;line-height: 22px;}
.layout .layout-con em.layout-smallTitle{font-size: 12px;color: #fff;bottom: 42px;right: 28px;position: absolute;display: block;}
.layout .layout-con .layout-lunb{position: absolute;bottom: 48px;left: 50px;width: 491px;height: 110px;}
.layout .layout-con .layout-lunb .layoutBtn{display: block;width: 27px;height: 27px;overflow: hidden;position: absolute;top: 42px;cursor: pointer;z-index: 999;overflow: hidden;}
.layout .layout-con .layout-lunb .layoutBtn img{display: block;width: 27px;height: 56px;position: relative;}
.layout .layout-con .layout-lunb .layoutBtn.prev{left: -12px;}
.layout .layout-con .layout-lunb .layoutBtn.next{right: -12px;}
.layout .layout-con .layout-lunb .layoutBtn:hover img{top: -29px;}
.layout .layout-con .layout-lunb .layout-lunb-list{width: 491px;overflow: hidden;height: 110px;position: relative;}

.layout .layout-con .layout-lunb ul{position: absolute;left: 0;top: 0;width: 101%;}
.layout .layout-con .layout-lunb li{float: left;width: 164px;height: 110px;}
.layout .layout-con .layout-lunb li img{display: block;width: 163px;height: 110px;}
.layout-lunb-button a{	display: inline-block;
	width: 210px;
	height: 44px;
	line-height: 44px;
	border-radius: 2px;
	color: #333;
	font-size: 16px;
	text-align:center;
	background-color: #fff;}


.layout-lunb-button a:hover {
	color: #000;
	background-color: #beddf1
}
/* news */
.news{width: 100%;background: #f6f6f6;padding: 58px 0;}
.news .news-top{width: 100%;}
.news .news-top h3{float: left;font-size: 28px;color: #333333;font-weight: normal;}
.news .news-top h3 a{color: #333333;text-decoration: none;}
.news .news-top p{font-size: 12px;color: #cccccc;float: right;margin-top: 10px;}
.news .mainCon{width: 100%;position: relative;margin: 34px auto 0;}
.news .mainCon .newsBtn{display: block;width: 40px;height: 40px;position: absolute;overflow: hidden;cursor: pointer;top: 50%;margin-top: -20px;}
.news .mainCon .newsBtn img{display: block;width: 40px;height:80px;position: relative;}
.news .mainCon i.prev{left: -70px;}
.news .mainCon i.next{right: -70px;}
.news .mainCon .newsBtn:hover img{top: -40px;}
.news .mainCon .conBox{position: relative;width: 100%;height: 420px;overflow: hidden;}
.news .mainCon .conBox ul{position: absolute;left: 0;top: 0;width: 103%;height: 520px;}
.news .mainCon .conBox li{float: left;width: 320px;height: 369px;padding: 29px 29px 0;background: #fff;margin-right: 30px;border: 1px solid #ebebeb;position: relative;}
.news .mainCon .conBox li .news-pic{display: block;width: 320px;height: 230px;overflow: hidden;}
.news .mainCon .conBox li .news-pic img{display: block;width: 320px;height: 230px;transition: all 1s ease-out;}
.news .mainCon .conBox li h3{font-size: 15px;color: #333333;margin: 28px 0 18px 0;font-weight: normal;padding: 0 8px; line-height:20px;text-overflow: ellipsis;}
.news .mainCon .conBox li p{line-height: 20px;color: #666666;font-size: 13px;padding: 0 8px; overflow : hidden;text-overflow: ellipsis; height:122px;}
.news .mainCon .conBox li a.more{display: block;font-size: 14px;color: #999999;left: 38px;bottom: 32px;position: absolute;}
.news .mainCon .conBox li a.more:hover{color: #ec6b1a;font-weight: bold;}
.news .mainCon .conBox li a.news-smallTitle{display: block;font-size: 12px;color: #999999;right: 38px;bottom: 32px;position: absolute;}
.news .mainCon .conBox li a.news-smallTitle:hover{color: #ec6b1a;font-weight: bold;}
.news .mainCon .conBox li:hover .news-pic img{transform: scale(1.1);}

.news .mainCon .conBox li:hover{background:#0083c9;}
.news .mainCon .conBox li:hover h3{color:#fff;}
.news .mainCon .conBox li:hover p{color:#fff;}
.news .mainCon .conBox li:hover a.more{color:#fff;}


/* classfiy */
.classfiy{width: 100%;	background: #005bac center; border-top:2px solid #0e6abb;}
.classfiy li{float: left;padding-top: 52px;height: 198px;position: relative;width: 320px;margin-left: 120px;}
.classfiy li:first-child{margin-left: 0;}
.classfiy li h3{font-size: 24px;color: #333333;font-weight: normal;transition: all .4s ease-out;position:relative;left:0;}
.classfiy li h3 a{color: #333333;text-decoration: none;}
.classfiy li p{font-size: 14px;color: #666666;line-height: 20px;margin-top: 12px;transition: all .4s ease-out;position:relative;left:0;}
.classfiy li i{display: block;width: 38px;height: 1px;background: #cdcdcd;position: absolute;left: 0;bottom: 52px;transition: all .4s ease-out;}
.classfiy li img{display: block;width: 53px;height: 53px;position: absolute;right: 0;bottom: 40px;transition: all .4s ease-out;}
.classfiy li:hover h3,.classfiy li:hover p,.classfiy li:hover i{left:10px;}
.classfiy li:hover img{right:10px;}
.classfiy li:hover h3 a{color: #0083c9}
.classfiy li:hover i{background:#0083c9;}
.shop-banner {
	position: relative;
	width: 1200px;
	height:450px;
	margin:0px auto;
	overflow: hidden;
	color: #fff;
	text-align: center;
}
.shop-banner-tu{	position: absolute; width:360px;height:360px;left:16%;top:10%;z-index: 20}
.shop-banner-tu img{ width:100%}
.shop-banner-text {
	position: absolute; 
	padding-top: 56px;
	z-index: 20;
	right:20%;
	top:10%;
	font-size: 24px
}
.shop-banner-text p{
	font-size: 16px;line-height:70px
}
.shop-banner-button a {
	display: inline-block;
	width: 210px;
	height: 44px;
	line-height: 44px;
	border-radius: 25px;
	color: #fff;
	font-size: 16px;
	background-color: #ec6b1a;
}

.shop-banner-button a:hover {
	color: #333;
	background-color: #fff
}

.shop-banner-button {
	position: relative;
	z-index: 20
}

.shop-bubble {
	position: absolute
}

.bubble-1 {
	top: -120px;
	left: 50%;
	z-index: 10;
	margin-left: -120px;
	width: 240px;
	height: 240px;
	background: url(../images/footer_bubble_1.png);
	animation: bubble-animate-1 linear 10s infinite
}

.bubble-2 {
	top: 150px;
	left: 0%;
	z-index: 11;
	width: 360px;
	height: 360px;
	background: url(../images/footer_bubble_2.png);
	animation: bubble-animate-2 linear 12s infinite
}

.bubble-3 {
	top: 120px;
	right: 0%;
	z-index: 12;
	width: 300px;
	height: 300px;
	background: url(../images/footer_bubble_3.png);
	animation: bubble-animate-3 linear 11s infinite
}

@keyframes bubble-animate-1 {
	from {
		top: -120px
	}

	50% {
		top: -180px
	}

	to {
		top: -120px
	}
}

@keyframes bubble-animate-2 {
	from {
		top: 240px;
		left: 0%
	}

	50% {
		top: 300px;
		left: 14%
	}

	to {
		top: 240px;
		left: 0%
	}
}

@keyframes bubble-animate-3 {
	from {
		top: 220px;
		right: 0%
	}

	50% {
		top: 320px;
		right: 12%
	}

	to {
		top: 220px;
		right: 0%
	}
}