/* CSS Document */
.header{ position:fixed; left:0; top:0; width:100%; border-bottom:1px solid rgba(51,51,51,0.1); z-index:10; transition:all .5s;}
.header.whiteBg{ background:#FFFFFF;}
.logo{ float:left; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; height:86px; margin-left:2%;}
.logo a{ display:block; margin-top:-10px;}
.logo img{ height:59px;}
.navBox{ margin:0; text-align:center; display:flex; justify-content:space-between; align-items:center; padding:0 2%;}
.navBox li{ vertical-align:middle;}
.navBox a{ display:block; height:86px; padding-top:10px; line-height:76px; color:#333333;}
.navLef{ margin:0 -15px;}
.navLef li{ padding:0 15px;}
.navLef li a{ font-size:15px;}
.navLef li:last-child a{ font-size:18px;}
.navIco{ display:inline-block; vertical-align:middle; width:20px; height:20px; margin-right:5px; margin-top:-2px; background-position:center center; background-repeat:no-repeat;}
.navIco1{ background-image:url(../images/topIco1-black.png);}
.navIco2{ background-image:url(../images/topIco2-black.png);}
.navIco3{ background-image:url(../images/topIco3-black.png);}
.navIco4{ background-image:url(../images/topIco4-black.png);}
.navLef li.active a,.navLef li a:hover{ font-weight:bold;}
.navLef li.active .navIco{ animation:swing 1s linear infinite;}
.navList{ margin:0;}
.navList > li{ padding:0; margin:0 28px; position:relative;}
.navList > li > a{ font-size:16px;}
.navList > li.active > a,.navList > li > a:hover{ color:#c4342b; font-weight:bold;}
.navRig{ float:right; line-height:86px; color:#FFFFFF; font-size:0; margin:0; font-weight:bold;}
.navRig li{ font-size:0; position:relative; width:84px; padding:0; border-left:1px solid rgba(51,51,51,0.1); text-align:center; cursor:pointer;}
.navRig a,.navRig i,.navRig span{ font-size:16px; display:inline-block; vertical-align:middle; color:#3333333; line-height:30px; position:relative; font-style:normal;}
.navRigIco{ display:inline-block; vertical-align:middle;}
.navRigIco1{ width:24px; height:24px; background:url(../images/topIco5-black.png) center center no-repeat; cursor:pointer;}
.navBtn{ cursor:pointer;}
.navBtn span{ width:20px; height:20px; position:relative;}
.navBtn span b{ display:block; width:100%; height:2px; background:#333333; position:absolute; left:0; top:calc((100% - 4px) / 2); transition:all .3s;}
.navBtn span b:nth-child(1){ transform:translateY(6px) rotate(0deg);}
.navBtn span b:nth-child(3){ transform:translateY(-6px) 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.no-background{ backgroun:none; border-bottom-color:rgba(255,255,255,0.1);}
.header.no-background .logo .shows{ display:none;}
.header.no-background .logo .hides{ display:block;}
.header.no-background .navBox a{ color:#FFFFFF;}
.header.no-background .navIco1{ background-image:url(../images/topIco1.png);}
.header.no-background .navIco2{ background-image:url(../images/topIco2.png);}
.header.no-background .navIco3{ background-image:url(../images/topIco3.png);}
.header.no-background .navIco4{ background-image:url(../images/topIco4.png);}
.header.no-background .navRig li{ border-left-color:rgba(255,255,255,0.1);}
.header.no-background .navRig a,.header.no-background .navRig i,.header.no-background .navRig span{ color:#FFFFFF;}
.header.no-background .navRigIco1{ background-image:url(../images/topIco5.png);}
.header.no-background .navBtn span b{ background:#FFFFFF;}

.searchBg{ background:#FFFFFF; position:absolute; left:0; top:0; right:0; bottom:0; z-index:11; padding:0 .3rem; display:flex; align-items:center; opacity:0; visibility:hidden; transform:translateY(-100%); transition:all .5s;}
.searchBg.active{ opacity:1; visibility:visible; transform:translateY(0);}
.search{ width:100%; max-width:744px; margin:0 auto; position:relative; height:50px; padding-right:50px;}
.searchClose{ position:absolute; right:0; top:50%; margin-top:-20px; width:40px; height:40px; background:url(../images/searchClose.png) center center no-repeat; cursor:pointer; z-index:2;}
.searchClose:hover{ transform:rotate(-90deg); transition:all .5s;}
.searchBox{ width:100%; max-width:605px; border-bottom:1px solid #cccccc; position:relative; padding-right:30px;}
.searchInput{ display:block; width:100%; font-size:16px; color:#333333; line-height:50px; height:50px; border:none; background:none;}
.searchInput::-webkit-input-placeholder{ color:#999999; opacity:1;}
.searchInput::-moz-placeholder{ color:#999999; opacity:1;}
.searchInput:-moz-placeholder{ color:#999999; opacity:1;}
.searchInput:-ms-input-placeholder{ color:#999999; opacity:1;}
.searchIco{ display:block; width:30px; height:100%; background:url(../images/searchBtn.png) right center no-repeat; position:absolute; right:0; top:0;border: none;}

.menuBg{ background:url(../images/menuBg.jpg) center bottom #f07168 no-repeat; background-size:cover; position:fixed; left:0; top:0; right:0; width:100%; z-index:11; padding:0 .3rem; opacity:0; visibility:hidden; transform:translateY(-100%); transition:all .5s;}
.menuBg.active{ opacity:1; visibility:visible; transform:translateY(0);}
.menuClose{ position:absolute; top:60px; right:6%; width:40px; height:40px; background:url(../images/menuClose.png) center center no-repeat; cursor:pointer; z-index:2;}
.menuBox{ width:100%; max-width:1218px; margin:0 auto; display:flex; justify-content:center; font-size:30px; color:#FFFFFF; line-height:240%;}
.menuItem{ width:33.33%; border-left:2px solid rgba(255,255,255,0.1); padding:120px 5%;}
.menuItem:last-child{ border-right:2px solid rgba(255,255,255,0.1);}
.menuList li a{ color:#FFFFFF; opacity:.6; transition:all .3s;}
.menuList li a:hover{ font-weight:400; opacity:1;}
.menuItem p{ opacity:.6;}
.menuTel{ font-family:Impact;}
.share{ font-size:0; margin:0 -9px; padding-top:.1rem; position:relative; line-height:60px;}
.share li{ padding:0 9px; vertical-align:top;}
.share li a{ display:block; width:40px; height:40px; border:1px solid rgba(255,255,255,0.6); border-radius:50%; background-position:center center; background-repeat:no-repeat; background-size:40px auto;}
.icoSina{ background-image:url(../images/menuIco1.png);}
.icoWechat{ background-image:url(../images/menuIco2.png);}
.icoTencent{ background-image:url(../images/menuIco3.png);}
.share li a:hover{ border-color:rgba(255,255,255,1);}

/*footBg*/
.footBg{ background:#141722; color:#999999; line-height:24px; padding:0 8%; position:relative; z-index:1;}
.footBg a{ color:#999999;}
.footBg a:hover{ color:#FFFFFF;}
.ftTop{ padding:.4rem 0 .3rem; display:flex; align-items:center; justify-content:space-between;}
.ftLef,.ftRig{ flex-shrink:0; width:50%;}
.ftLef{ display:flex; flex-wrap:wrap; align-items:center; font-size:18px; color:#FFFFFF; font-family:Arial;}
.ftLef *{ margin-right:5%;}
.ftLogo{ max-width:26%;}
.ftLogo img{ display:block; max-width:100%; height:auto;}
.ftLef p{ padding-left:26px; background-position:left center; background-repeat:no-repeat;}
.ftTel{ background-image:url(../images/ftIco1.png);}
.ftEmail{ background-image:url(../images/ftIco2.png);}
.ftRig{ text-align:right;}
.ftRig span{ display:inline-block; vertical-align:middle; padding:0 10px;}
.ftRig span a{ color:#ab2d24;}
.ftRig span.tech a{ color:#999999;}
.ftRig span.tech a:hover{ color:#FFFFFF;}
.ftBot{ padding:.3rem 0; border-top:1px solid rgba(255,255,255,0.18);}
.ftBotTit{ float:left; color:#FFFFFF;}
.ftBotCon{ overflow:hidden;}
.ftBotCon a{ display:inline-block; vertical-align:top; margin-right:0.55%; margin-bottom:.1rem;}

.boxPd{ padding-top:86px;}
.wrap{ width:100%; max-width:86.458%; padding:0 .3rem; margin:0 auto;}
.boxTit{ text-align:center; font-size:36px; color:#222222; line-height:140%; margin:.1rem 0; font-family: 'SourceHanSansCNMedium';}
.boxDes{ font-size:16px; color:#999999; line-height:160%; text-align:center; margin:.1rem auto;}
.boxLine{ width:34px; height:3px; margin:.2rem auto .2rem;}
.boxLine span{ display:block; width:100%; height:100%; background:#c5342a;}
.boxTit.white{ color:#FFFFFF;}
.boxDes.white{ color:#FFFFFF; opacity:.5;}
.boxLine.white span{ background:#FFFFFF;}

.boxMore{ display:block; margin:0 auto; width:120px; height:48px; border:1px solid #FFFFFF; text-align:center; font-size:16px; color:#FFFFFF; line-height:46px;}
.boxMore a{ display:block; width:100%; height:100%; color:#FFFFFF;}
.boxMore span{ display:inline-block; vertical-align:baseline; width:14px; height:12px; margin-left:.08rem; position:relative;}
.boxMore span i{ display:block; height:2px; background:#FFFFFF; position:absolute; left:0; top:calc((100% - 2px) / 2); transition:all .3s;}
.boxMore span i:nth-child(1){ width:71.4%; transform:translateY(5px);}
.boxMore span i:nth-child(2){ width:50%;}
.boxMore span i:nth-child(3){ width:100%; transform:translateY(-5px);}
.boxMore a:hover span i{ animation:widthAni 1s ease infinite;}
.boxMore a:hover span i:nth-child(1){ animation-delay:0s;}
.boxMore a:hover span i:nth-child(2){ animation-delay:.5s;}
.boxMore a:hover span i:nth-child(3){ animation-delay:.2s;}

.banIn{ position:relative; height:723px; max-height:60vh;}
.banIn .imgBg{ position:fixed; left:0; top:86px; width:100%; height:723px; max-height:85vh;}
.banInfo{ max-width:45%; margin-top:15%;}
.banTitEn{ font-family:Arial; font-size:3.75vw; text-transform:uppercase; line-height:100%;}
.banInfo .boxTit{ text-align:left; color:#FFFFFF;}

.banBotBg{ background:#FFFFFF; position:relative; z-index:1; border-bottom:1px solid #d6d8db;}
.banBot{ line-height:70px;}
.breadcrumb{ float:right; background:none; border-radius:0; padding:0; margin:0; font-size:0; margin-left:5px;}
.breadcrumb a{ font-size:14px; vertical-align:middle; position:relative;}
.breadcrumb a{ display:inline-block; color:#999999;}
.breadcrumb > a + a{ padding-left:15px;}
.breadcrumb > a + a::before{ display:block; content:">"; font-size:14px; color:#999999; position:absolute; left:0; margin-left:4px;}
.breadcrumb a:last-child{ color:#c4342b;}
.breadcrumb a:hover{ color:#c4342b;}
.sortList{ overflow:hidden; font-size:0; margin:0 -.16rem;}
.sortList li{ vertical-align:middle; padding:0 .16rem; position:relative;}
.sortList li a{ display:block; font-size:16px; color:#666666; position:relative;}
.sortList li a:hover{ color:#c4342b;}
.sortList li.active a{ color:#c4342b;}
.sortList li.active a:after{ display:block; content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:#c4342b;}

.mainBg{ position:relative; background:#FFFFFF; z-index:1; overflow:hidden;}
.grayBg{ background:#f8f8f8;}

.LayBox{ position:fixed; left:0; top:0; right:0; bottom:0; z-index:12; background:rgba(0,0,0,0.8); display:flex; flex-direction:column; justify-content:center; align-items:center; opacity:0; visibility:hidden; transition:all .5s;}
.LayBox.active{ opacity:1; visibility:visible;}
.LayCon{ width:90%; max-width:200px; position:relative; font-size:16px; color:#FFFFFF; line-height:200%; text-align:center;}
.LayClose{ position:absolute; right:0; top:0; transform:translate(100%,-100%); width:40px; height:40px; background:url(../images/menuClose.png) center center no-repeat; cursor: pointer; z-index: 2;}

.QR_code{ position:absolute; left:9px; top:100%; width:100%; max-width:100px; display:none;}
.QR_code img{ display:block; width:100%; height:100%;}

#pages{ margin:.5rem 0; text-align:center; font-size:0;}
#pages li{ display:inline-block; vertical-align:middle; font-size:18px; color:#CCCCCC; margin:.02rem;}
#pages li a,#pages li span{ display:block; width:36px; height:36px; border:1px solid #CCCCCC; color:#CCCCCC; line-height:34px; border-radius:4px;}
#pages li.active span{ background:#c4342b; border-color:#c4342b; color:#FFFFFF;}
#pages li a:hover{ border-color:#c4342b; color:#c4342b;}
#pages .disabled span{ cursor:no-drop;}

@media (max-width:1600px){
	.logo{ height:80px;}
	.logo img{ height:50px;}
	.navBox a{ height:80px; line-height:70px;}
	.navLef li{ padding:0 10px;}
	.navLef li a{ font-size:14px;}
	.navLef li:last-child a{ font-size:16px;}
	.navList > li{ margin:0 15px;}
	.navList > li > a{ font-size:15px;}
	.navRig{ line-height:80px;}
	.navRig li{ width:70px;}
	
	.menuClose{ top:40px; right:4%;}
	.menuBox{ font-size:24px; max-width:1000px;}
	.menuItem{ padding:80px 5% 120px;}
	.share{ margin:0 -5px; line-height:50px;}
	.share li{ padding:0 5px;}
	.share li a{ width:36px; height:36px; background-size:36px auto;}
	
	.footBg{ padding:0 5%;}
	.ftLef{ font-size:16px;}
	.ftLef *{ margin-right:3%;}
	.ftLef p{ background-size:18px auto; padding-left:22px;}
	.ftLogo{ max-width:30%;}
	
	.boxPd{ padding-top:80px;}
	.boxTit{ font-size:28px;}
	.boxDes{ font-size:14px;}
	.boxMore{ font-size:14px; height:42px; line-height:40px;}
		
	.banIn{ height:540px;}
	.banIn .imgBg{ top:80px; height:540px;}
	
	.banBot{ line-height:60px;}
	.sortList{ margin:0 -.05rem;}
	.sortList li{ padding:0 .05rem;}
	.sortList li a{ font-size:15px;}
	.sortList li.active a:after{ height:2px;}
}
@media (max-width:1400px){
	.logo img{ height:44px;}
	.navList > li{ margin:0 10px;}
	.navList > li > a{ font-size:15px;}
	.navRig li{ width:60px;}
	.navRig a,.navRig i,.navRig span{ font-size:14px;}	
	.menuBox{ font-size:22px;}
	.boxTit{ font-size:24px;}
	.banIn{ height:460px;}
	.banIn .imgBg{ height:460px;}
}
@media (max-width:1200px){
	.header{ background:#FFFFFF;}
	.header.no-background{ backgroun:none; border-bottom-color:rgba(51,51,51,0.1);}	
	.header.no-background .logo .shows{ display:block;}
	.header.no-background .logo .hides{ display:none;}
	.header.no-background .navRig li{ border-left-color:rgba(51,51,51,0.1);}
	.header.no-background .navRig a,.header.no-background .navRig i,.header.no-background .navRig span{ color:#333333;}
	.header.no-background .navRigIco1{ background-image:url(../images/topIco5-black.png);}
	.header.no-background .navBtn span b{ background:#333333;}	
	.navBox{ display:none;}
	.footBg{ padding:0 .3rem;}
	.ftTop{ display:block;}
	.ftLef,.ftRig{ width:100%; text-align:center; justify-content:center;}
	.ftLef *{ margin:.1rem;}
	.ftLogo{ width:100%; max-width:100%;}
	.ftLogo img{ margin:0 auto; max-width:50%;}
	.menuBg{ height:100%;}
	.menuBox{ height:100%;}
	.menuClose{ right:15px; top:15px;}
	
	.boxPd{ padding-top:0;}
	.banIn{ height:480px;}
	.banIn .imgBg{ top:60px; height:480px;}
	
	.banBot{ line-height:32px; padding:.14rem 0 0;}
	.breadcrumb{ float:none; margin:0;}	
	.sortList{ margin:0 -.1rem;}
	.sortList li{ padding:0 .1rem;}
	.sortList li a{ font-size:14px;}
}
@media (max-width:991px){
	.logo{ height:60px;}
	.navRig{ line-height:60px;}
	.search{ height:40px;}
	.searchInput{ height:40px; line-height:40px;}
	.menuBg{ padding:.3rem;}
	.menuBox{ overflow-y:auto; display:block; font-size:.2rem;}
	.menuItem{ width:100%; border:none; border-bottom:2px solid rgba(255,255,255,0.1); padding:.3rem 0;}
	.menuItem:last-child{ border:none;}
	.share{ margin:0;}
	.wrap{ max-width:100%;}
	.banIn{ height:4rem;}
	.banIn .imgBg{ height:4rem;}
	#pages li a, #pages li span{ width:32px; height:32px; line-height:30px; font-size:14px;}
}
@media (max-width:640px){
	.searchClose{ right:-.2rem;}
	.search{ padding-right:30px;}
	.menuBox{ font-size:.28rem;}
	.boxTit{ font-size:20px;}
	.boxDes{ font-size:13px;}
	.boxLine{ height:2px;}
	.banTitEn{ font-size:5vw;}
	.banIn{ height:4.2rem;}
	.banIn .imgBg{ height:4.2rem;}
}
@media (max-width:460px){
	.logo{ height:50px;}
	.logo img{ height:36px;}
	.navRig{ line-height:50px;}
	.navRig li{ width:1rem;}
	.search{ height:30px;}
	.searchInput{ height:30px; line-height:30px; font-size:14px;}
	.searchIco{ background-size:16px auto;}
	.searchClose{ width:30px; height:30px; margin-top:-15px; background-size:16px auto;}	
	.menuBox{ font-size:.32rem;}
	.share{ line-height:40px;}
	.share li a{ width:30px; height:30px; background-size:30px auto;}	
	
	.footBg{ line-height:22px;}
	.ftLef{ font-size:14px;}
	.ftLef p{ background-size:16px auto;}
	.ftRig{ font-size:12px;}
	.ftBot{ font-size:12px; line-height:22px;}
	.ftBotTit{ display:block; float:none;}
	
	.boxTit{ font-size:18px;}
	.boxDes{ font-size:12px;}
	.boxLine{ height:2px;}
	.boxMore{ height:36px; line-height:34px;}
	
	.banIn .imgBg{ top:50px;}	
	.sortList li a{ font-size:13px;}
}