/* CSS Document */
.wrap{ width:84%; max-width:1230px; padding:0 15px; margin:0 auto;}

.header{ position:fixed; left:0; top:0; width:100%; z-index:10; transition:all .5s;}
.hdBg{ display: block; width: 100%; height: 0%; position: absolute; left: 0; top: 0; background-color: rgba(255, 255, 255, 0.98); z-index: -1; box-shadow:0 -1px 3px rgba(0,0,0,0.1) inset; transition: all .3s;}
.hdLine{ display: block; width: 100%; height: 1px; position: absolute; left: 0; top: 80px; background-color: #DEDEDE; display: none;}
.header .wrap{ width: 100%; max-width: 1630px; min-width:320px; margin: 0 auto;}
.logo{ float:left; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; height:80px; transition:all .3s;}
.logo a{ display:block;}
.logo img{ height:60px; transition:all .3s;}
.nav{ float:right;}
.navBox{ margin:0 auto;}
.navList{ list-style: none; margin:0; text-align:center; height: 80px; display: flex; justify-content: center;}
.navList > li{ position: relative; display: inline-block; vertical-align: top; min-width: 120px;}
.navList > li > a{ display:block; line-height:80px; font-size:16px; color:#FFFFFF; position:relative; transition:all .3s;}
.navSub{ position: absolute; left: 50%; top: auto; min-width: 100%; transform: translateX(-50%); opacity:0; visibility:hidden; margin-top: -5px; padding: 1.8vw 0 2.2vw; background-color: rgba(255, 255, 255, 0.8); box-shadow:0 0px 3px rgba(0,0,0,0.1); transition:all .5s; z-index:2;}
.navList2{ list-style: none; margin:0 auto; text-align: center;}
.navList2 > li{ font-weight:normal;}
.navList2 > li > a{ display:block; color:#000000; line-height:200%; white-space: nowrap;}
.navList2 > li > a:hover{ color:#0079FF;}

.navRig{ float: right; text-align:right; line-height:80px; color:#FFFFFF; font-size:0; transition:all .3s;}
.navRig li{ display: inline-block; vertical-align:middle; font-size:16px; position:relative; padding:0 1vw;}
.navRig a,.navRig i,.navRig span{ display:inline-block; vertical-align:middle; color:#FFFFFF; line-height:36px;}
.navTel{ height: 36px; line-height: 36px; background-color: #F73B00; border-radius: 18px; font-size: 18px; margin-left: 2vw;}
.navTel a{ display: block;}
.navTel span{ font-size: 14px; display: inline-block; vertical-align:baseline; margin-right: 5px;}
.navSearch{ position: relative;}
.searchBox{ position: relative; width: 240px; padding-left: 35px; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.searchInput{ display: block; width: 100%; height: 40px; line-height: 40px; border: none; background: transparent; text-align: right; color: #FFFFFF; font-size: 16px;}
.searchInput::-webkit-input-placeholder { color: #CCCCCC;}
.searchInput::-moz-input-placeholder { color: #CCCCCC;}
.searchInput::-ms-input-placeholder { color: #CCCCCC;}
.searchIco{ display: block; border: none; position: absolute; left: 0; top: 0; width: 30px; height: 36px; background: url(../images/searchIco.png) left center no-repeat; cursor: pointer;}

.navRig span.searchBtn{ display:none;}
.navRig li.navBtn{ cursor:pointer; display:none;}
.navBtn span{ width:25px; height:30px; position:relative; margin-left:5px;}
.navBtn span b{ display:block; width:100%; height:2px; background:#FFFFFF; position:absolute; left:0; top:calc((100% - 4px) / 2); transition:all .3s;}
.navBtn span b:nth-child(1){ transform:translateY(8px) rotate(0deg);}
.navBtn span b:nth-child(3){ transform:translateY(-8px) rotate(0deg);}
.navBtn.active b:nth-child(1){ transform:translateY(0) rotate(45deg);}
.navBtn.active b:nth-child(3){ transform:translateY(0) rotate(-45deg);}
.navBtn.active b:nth-child(2){ opacity:0;}

.header.no-show{ transform:translateY(-100%);}
.header.whiteBg{ background:#FFFFFF; background: none; box-shadow:0 -1px 3px rgba(0,0,0,0.1) inset;}
.header.whiteBg .hdBg{ height: 80px;}
.header.whiteBg .logo .shows{ display:none;}
.header.whiteBg .logo .hides{ display:block;}
.header.whiteBg .navList > li > a{ color:#333333;}
.header.whiteBg .navBtn span b{ background:#0079FF;}
.header.whiteBg .searchBox{ border-bottom-color: #CCCCCC;}
.header.whiteBg .searchIco{ background-image: url(../images/searchIco2.png);}
.header.whiteBg .searchInput{ color: #333333;}
.header.whiteBg .navTel{ background-color: #0079FF;}

.mainBg{ position: relative; z-index: 1; background: url(../images/mainBg.png) center top #F7F7FA no-repeat; overflow: hidden;}
.grayBg{ background-color: #F7F7FA; background-image: none;}
.whiteBg{ background-color: #FFFFFF; background-image: none;}
.text-center{ text-align: center;}

/*footBg*/
.footBg{ background:url(../images/footBg.png) center center no-repeat; background-size:cover; color:#FFFFFF; line-height:30px; position:relative; z-index:1;}
.footBg a{ color:#FFFFFF;}
.footBg a:hover{ color:#FFFFFF;}
.footBg .wrap{ width: 100%;}
.footTop{ display: flex; justify-content: space-between; align-items: center; padding: .2rem 0; border-bottom: 1px solid #49494D;}
.ftLogo{ max-width: 138px; width: 40%;}
.ftLogo a{ display: block;}
.ftLogo img{ max-width: 100%; height: auto;}
.ftShare{ font-size:0; margin:0 -.1rem;}
.ftShare li{ display: inline-block; vertical-align: middle; padding:0 .1rem; position:relative; vertical-align:middle;}
.ftShare li a{ display:block; width:40px; height:40px; border-radius:50%; background-position:center center; background-repeat:no-repeat; background-size:contain;}
.ftShareIco1{ background-image:url(../images/shareIco1.png);}
.ftShareIco2{ background-image:url(../images/shareIco2.png);}
.ftShareIco3{ background-image:url(../images/shareIco3.png);}
.ftShareIco4{ background-image:url(../images/shareIco4.png);}
.ftShare li a:hover{ background-color: #0079FF;}
.footBot{ padding: .4rem 0 .8rem;}
.ftLef{ float:left; width:calc(100% - 250px);}
.ftNav{ list-style: none; display:flex; flex-wrap:wrap; line-height:200%;}
.ftNav li{ min-width: 160px; padding-right:15px;}
.ftNav li:last-child{ padding-right:0;}
.ftTit{ font-size:18px; line-height:24px; font-weight:bold; margin-bottom: .2rem;}
.ftText p a{ color: #CCCCCC;}
.ftNav li:nth-child(2){ max-width: 340px;}
.ftNav li:nth-child(2) .ftText{ display: flex; flex-wrap: wrap;}
.ftNav li:nth-child(2) .ftText p{ width: 50%;}
.ftCon{ line-height: 200%;}
.ftCon p{ padding-left: 30px; background-repeat: no-repeat; background-position: left 9px; color: #CCCCCC;}
.ftAdd{ background-image: url(../images/ico1.png);}
.ftTel{ background-image: url(../images/ico2.png);}
.ftPhone{ background-image: url(../images/ico3.png);}
.ftEmail{ background-image: url(../images/ico4.png);}
.ftRig{ float:right; width:230px; text-align:right;}
.ftWx{ list-style: none; margin:0 -.15rem; display:flex; justify-content: space-between; overflow:hidden; text-align: center;}
.ftWx li{ max-width:50%; padding:0 .15rem;}
.ftWx li p{ margin-bottom: 5px;}
.ftWx li img{ display:block; width:100px; height:100px;}
.copyright{ font-size:14px; color: #999999; border-top: 1px solid #49494D; padding: .1rem 0;}


.boxTit{ font-weight: bold;}
.boxTitCn{ font-size: 36px; color: #00B36E; line-height: 130%;}
.boxTitEn{ font-size: 24px; color: #333333; line-height: 140%; text-transform: uppercase; font-family: Arial; opacity: .2;}


.banIn{ height:640px; position:relative;}
.banIn .imgBg{ position:fixed; left:0; top:0; width:100%; height:640px;}
.banIn .banDes{ max-width: 100%;}

.banBotBg{ background:rgba(0,0,0,0.4); position:relative; z-index:1; line-height:30px; padding:.2rem 0; margin-top:-70px;}
.breadcrumb{ list-style: none; text-align:right; background:none; border-radius:0; margin:0; padding:0; font-size:0; color:#AAAAAA;}
.breadcrumb li{ display: inline-block; vertical-align: middle; font-size:16px; vertical-align:middle; padding:0; position:relative;}
.breadcrumb li a{ display:block; color:#999999;}
.breadcrumb li + li:before{ display:none;}
.breadcrumb li + li + li{ padding-left:14px; margin-left: 6px;}
.breadcrumb li + li + li:before{ display:block; content:">"; position:absolute; left:0; top:0; color:#999999;}
.breadcrumb li.active{ color:#FFFFFF;}
.breadcrumb li a:hover{ color:#FFFFFF;}

.sortList{ list-style:none; text-align: center; max-width: 624px; margin: .6rem auto; display: flex; flex-wrap: wrap; justify-content: center;}
.sortList li{ position:relative; width: 25%; margin: .2rem 0;}
.sortList li a{ display:block; font-size:18px; line-height:30px; color:#333333; position:relative;}
.sortList li a img{ max-width: 1rem; height: auto; border-radius: 50%; margin: 0 auto .1rem;}
.sortList li a:hover img.shows{ display: none;}
.sortList li a:hover img.hides{ display: block;}
.sortList li.active img.shows{ display: none;}
.sortList li.active img.hides{ display: block;}


.page{ text-align:center; margin:.6rem 0; font-size:0;}
.page a,.page span{ display:inline-block; vertical-align:middle; width:36px; height:36px; border:1px solid rgba(0,0,0,0.15); line-height:34px; font-size:14px; color:rgba(0,0,0,0.65); border-radius:4px; margin:.05rem;}
.page a.active,.page span.active{ border-color:#171D24; color:#171D24; cursor:no-drop;}
.page a:not(.active):hover{ color:#171D24; border-color:#171D24;}

.tip{ border-radius:10px; background:rgba(0,0,0,0.7); color:#FFFFFF; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); display:none; z-index:20; line-height:30px; padding:.1rem .2rem;}

.onLine{ position:fixed; right:.1rem; bottom:25%; z-index:2; list-style:none; background:#FFFFFF; width:50px; box-shadow: 0px 4px 10px 0px rgba(0, 61, 128, 0.2); border-radius:5px;}
.onLine li{ max-width:40px; padding:.1rem 0; margin:0 auto; border-bottom:1px solid #D8D8D8; position: relative;}
.onLine li:last-child{ border:none;}
.onLine li a{ display:block; width:28px; height:28px; margin:0 auto; background-position:center center; background-repeat:no-repeat; background-size:cover;}
.telIco{ background-image:url(../images/onIco1.png);}
.messIco{ background-image:url(../images/onIco2.png);}
.wxIco{ background-image:url(../images/onIco3.png);}
.QQIco{ background-image:url(../images/onIco4.png);}
.topIco{ background-image:url(../images/onIco5.png);}
.onCon{ position: absolute; right: 100%; top: 0; white-space: nowrap; background: #FFFFFF; box-shadow: 0px 4px 10px 0px rgba(0, 61, 128, 0.2); border-radius: 5px; padding: 10px; line-height: 28px; margin:0 .1rem; opacity: 0; visibility: hidden; transform: translateX(-15px); transition: all .3s;}
.onCon img{ width: 100px; height: 100px;}
.onLine li:hover .onCon{ opacity: 1; visibility: visible; transform: translateX(0);}

.anchor{ padding-top: 80px; margin-top: -80px; display: block;}

@media (min-width:1200px){
	.navSub{ display:block !important;}
	/* .header:hover .logo .shows{ display:none;}
	.header:hover .logo .hides{ display:block;}
	.header:hover .hdBg{ height: 100%;}
	.header:hover .hdLine{ display: block;}
	.header:hover .navList{ height: auto;}
	.header:hover .navList > li > a{ color: #333333;}
	.header:hover .navSub{ opacity:1; visibility:visible; transition:all .3s;}
	.header:hover .searchBox{ border-bottom-color: #CCCCCC;}
	.header:hover .searchIco{ background-image: url(../images/searchIco2.png);}
	.header:hover .searchInput{ color: #333333;}
	.header:hover .navTel{ background-color: #0079FF;}
	.navList > li:hover{ background-color: rgba(0,0,0,0.05);} */
	.header2 .logo .shows{ display:none;}
	.header2 .logo .hides{ display:block;}
	.header2 .hdBg{ height: 80px;}
	.header2 .hdLine{ display: block;}
	.header2 .navList{ height: auto;}
	.header2 .navList > li > a{ color: #333333;}	
	.header2 .searchBox{ border-bottom-color: #CCCCCC;}
	.header2 .searchIco{ background-image: url(../images/searchIco2.png);}
	.header2.searchInput{ color: #333333;}
	.header2 .navTel{ background-color: #0079FF;}
	.navList > li:hover{ background-color: rgba(0,0,0,0.05);}
	.navList > li:hover .navSub{ opacity: 1; visibility: visible; margin: 0; transition: all .8s;}
}
@media (max-width:1600px){
	body{ font-size: 14px;}
	.logo img{ height: 54px;}
	.navList>li{ min-width: 110px;}
	.navList>li>a{ font-size: 15px;}
	.navRig li{ font-size: 15px;}
	.searchInput{ font-size: 15px;}	
	.boxTitCn{ font-size: 30px;}
	.boxTitEn{ font-size: 20px;}
	.banIn,.banIn .imgBg{ height:540px;}
	.banBotBg{ line-height:20px; margin-top:-60px;}
	.sortList{ margin: .4rem auto;}
	.sortList li a{ font-size: 16px;}
}
@media (max-width:1400px){
	.navList>li{ min-width: 100px;}
	.navRig a,.navRig i,.navRig span{ font-size:14px;}
	.navBtn span b:nth-child(1){ transform:translateY(6px) rotate(0deg);}
	.navBtn span b:nth-child(3){ transform:translateY(-6px) rotate(0deg);}
	.searchBox{ width: 180px;}
	.footBot{ padding: .3rem 0 .5rem;}
	.banIn,.banIn .imgBg{ height:480px;}
	.breadcrumb li{ font-size:14px;}
}
@media (max-width:1200px){
	.navBg{ position:fixed; right:-100%; top:0; width:100%; height:100vh; background:#457AE6; opacity:.8; z-index:2; transition:all .5s;}
	.navBox{ position:fixed; right:-66%; top:0; height:100vh; width:66%; background:#FFFFFF; overflow:hidden; z-index:2; transition:all .5s;}
	.navList{ text-align:left; height:calc(100% - 80px); overflow-y:auto; display: block;}
	.navList > li{ display:block; margin:0;}
	.navList > li > a{ color:#333333; height:auto; line-height:46px; padding:0 .3rem; border-bottom:1px solid #f2f2f2;}
	.navList > li > a:after{ height:1px; background:#457AE6;}
	.navList > li > a > i{ float:right; width:46px; height:46px; background:url(../images/arrow.png) center center no-repeat; background-size:30%;}
	.navList > li.active > a{ color:#457AE6;}
	.navList > li.cur > a,.navList > li > a.cur{ color:#457AE6;}
	.navList > li.cur > a > i,.navList > li > a.cur > i{ transform:rotate(180deg); transition:all .3s;}
	.navList > li:hover .navSub{ opacity:1; visibility:visible; margin-top:0;}
	.navSub{ width:100%; min-width:0; position:static; transform:none; padding:.2rem .2rem .2rem .5rem; border-top-width:1px; margin:0; opacity:1; visibility:visible; display:none; transition:none; background:#F0F0F0; box-shadow:none; min-height:0;}
	.navSub:after{ display:none;}
	.navList2{ display:block;}
	.navList2 > li{ padding:0; margin-bottom:.1rem;}
	.navList2 > li > a{ padding:0; font-size:15px; color: #666666;}
	.navList2 > li > a:after{ margin:2px 0;}
	.navThr{ display:flex; margin:0 -4px; flex-wrap:wrap;}
	.navThr > li{ padding:0 4px;}
	.navThr.two{ width:100%;}
	.navThr.two > li{ width:auto;}
	.navRig{ line-height:80px;}
	.navRig li.navBtn{ display:inline-block;}
	.navTop{ height:80px; background:#457AE6; padding:0 .3rem; display:flex; justify-content:flex-end; align-items:center;}
	.navClose{ width:25px; height:30px; position:relative; cursor:pointer; margin-right:10px;}
	.navClose span{ display:block; width:100%; height:2px; background:#FFFFFF; position:absolute; left:0; top:calc((100% - 4px) / 2); transition:all .3s;}
	.navClose span:nth-child(1){ transform:translateY(0) rotate(45deg);}
	.navClose span:nth-child(3){ transform:translateY(0) rotate(-45deg);}
	.navClose span:nth-child(2){ opacity:0;}
	
	.header.whiteBg .navList > li > a{ line-height:46px; padding:0 .3rem; font-weight:normal;}
	.header.whiteBg .navList > li.active > a{ color:#457AE6;}

	.navBg.active,.navBox.active{ right:0;}
	.navBox.active{ box-shadow:-1px 0 5px #457AE6;}
	/* .banner.active,.mainBg.active,.footBg.active,.banIn.active,.banBotBg.active{ transform:translateX(-60%);} */

	.ftShare{ margin: 0 -4px;}
	.ftShare li{ padding: 0 4px;}
	.ftShare li a{ width:32px; height:32px;}
	.ftLef,.ftRig{ float: none; width: 100%;}
	.ftNav{ justify-content: space-between;}
	.ftNav li{ margin: .2rem 0;}
	.ftTit{ margin-bottom: .1rem;}
	.ftWx{ justify-content: center; margin-top: .3rem;}

	.banIn,.banIn .imgBg{ height:420px;}
	.banBotBg{ margin:0; background: #00B36E;}
	.breadcrumb{ float:none; width:100%; text-align:left; margin:0;}
	.breadcrumb,.breadcrumb li a,.breadcrumb li + li + li:before{ color:#FFFFFF;}
}
@media (max-width:991px){
	.wrap{ width:100%; padding:0 .3rem;}
	.header .wrap{ padding:0 15px;}
	.logo{ height:60px; width:145px; overflow:hidden;}
	.logo img{ height:44px;}
	.navRig{ line-height:60px;}
	.navRig{ margin:0 -.06rem;}
	.navRig li{ padding:0 .06rem;}
	.navRig a, .navRig i, .navRig span{ line-height: 34px;}
	.searchInput{ height: 34px; line-height: 34px;}
	.searchIco{ background-size: 20px auto;}
	.navRig li.navTel{ padding: 0 10px;}
	.navTel{ height: 34px; line-height: 34px; margin-left: 15px;}
	.navTel span{ display: none;}
	.navTop{ height:60px;}
	.navList{ height:calc(100% - 60px);}
	.navList > li > a{ font-size:15px;}
	.navList2 li a{ font-size:14px; text-align: left;}
	.header.whiteBg .hdBg{ height: 0;}
	.header.whiteBg{ background-color: #FFFFFF;}

	.ftNav{ display: block;}
	.ftNav li{ min-width: 100%; padding: 0;}
	.ftTit{ font-size: 16px;}
	.ftText{ margin: 0 -3px;}
	.ftText p{ display: inline-block; vertical-align: middle; padding: 0 3px;}
	.ftNav li:nth-child(2) .ftText{ display: block;}
	.ftNav li:nth-child(2) .ftText p{ width: auto;}

	.page{ margin:.5rem 0;}
	.page a, .page span{ width:.4rem; height:.4rem; line-height:.38rem;}

	.boxTitCn{ font-size: 24px;}
	.boxTitEn{ font-size: 16px;}
	.banIn,.banIn .imgBg{ height:380px;}

	.anchor{ padding-top: 60px; margin-top: -60px;}
}
@media (max-width:767px){
	.navRig li{ position:static;}
	.navTel span{ display:none;}
	.navRig span.navLangBtn{ display:block; padding-right:20px; cursor:pointer;}
	.navRig span.navLangBtn:after{ display:block; content:""; position:absolute; right:0; top:50%; margin-top:-3px; width:0; height:0; border-top:6px solid #FFFFFF; border-left:6px solid transparent; border-right:6px solid transparent;}
	.navLangCon{ display:none; position:absolute; top:100%; left:0; width:100%; text-align:right; background:#FFFFFF; line-height:30px; padding:.2rem .3rem;}
	.navLangCon a,.navLangCon a:hover{ color:#CCCCCC;}
	.header.whiteBg .navRig span.navLangBtn:after{ border-top-color:#CCCCCC;}
	.banIn,.banIn .imgBg{ height:3.8rem;}
}
@media (max-width:640px){
	.navRig li.navSearch{ display: none;}
	.searchBox{ max-width:100%; width:100%;}
	.searchInput{ height:44px; line-height:24px; padding:10px 80px 10px 40px;}
	.searchBtn{ line-height:44px; width:70px;}
	.searchIco{ background-size:28px auto; width:28px; height:28px; margin-top:-14px;}
	.ftCon{ display:block;}
	.ftCon li{ width:100%;}
	.ftTelList{ display:block;}
	.ftTelItem{ width:100%;}
	.ftTelUL{ flex-wrap:wrap;}
	.ftNav{ display:block; text-align:left;}
	.ftNav li{ padding-left:0;}
	.ftNav .ftTit{ margin-bottom:0;}
	.ftLink{ margin:0 -.1rem;}
	.ftLink p{ display:inline-block; vertical-align:middle; padding:0 .1rem;}
	.banIn,.banIn .imgBg{ height:3.6rem;}
	.banIn .banText{ padding-top: 50px;}
	
	.page a, .page span{ width:.5rem; height:.5rem; line-height:.48rem; margin:.1rem .02rem;}

	.onLine{ bottom: .1rem; width: 40px;}
	.onLine li{ max-width: 36px; padding: 5px 0;}
	.onLine li a{ background-size: 24px auto;}
	.onCon{ padding: 5px 10px;}
	.onCon img{ width: 70px; height: 70px; margin: 0 -5px;}
}
@media (max-width:460px){
	.logo{ height:50px; width:120px;}
	.logo img{ height:35px;}
	.navRig{ line-height:50px;}	
	.navBtn span{ width:20px;}
	.navTop{ height:50px;}
	.searchInput{ font-size:14px;}
	.navTel{ height: 30px; line-height: 30px;}
	.navTel a{ line-height: 30px;}
	.footBg{ line-height: 24px;}
	.footTop{ display: block;}
	.ftLogo{ margin: .2rem auto;}
	.ftShare{ text-align: center; margin: .2rem 0;}
	.ftTit{ font-size: 15px;}

	.boxTitCn{ font-size: 20px;}
	.boxTitEn{ font-size: 14px;}

	.breadcrumb li{ font-size:12px;}
	.sortList li a{ font-size: 12px;}
	
	.anchor{ padding-top: 50px; margin-top: -50px;}
}