@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img,span,table,tr{ padding:0; margin:0; }
body{ font-family: "思源黑体", "Noto Sans SC", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:#232424; list-style:none; background-color: #FFF;}
html{ font-size: 16px; }
body > section{ padding:0px;}
ul li{ list-style:none; }
p{ padding:0; margin:0;}
a{ text-decoration: none!important;}
.bmax{ width:100%; height:80px; float:left;}
.bob{ width:100%; height:35px; float:left;}
.bmin{ width:100%; height:25px; float:left;}
.containermian{ width:100%; height:auto; float:left; overflow:hidden; }
.bgs{background-color:#221c1c!important;}
.bg{background-color:#f3f3f3!important;}
.md{ width:1400px; }
.smd{ width:1130px; }
.plr0{ padding:0px;}
.plr10{ padding:0px 10px;}
.plra10{ padding:10px;}
.plra15{ padding:15px;}
.plra30{ padding:30px;}
.plra5{ padding:5px; }
.mlr0{ margin: 0;}
.gtco-loader{ width:100%; height:100%; display: flex; position:fixed; left: 0; top:0; z-index:99; background-image:url(../img/svg-loaders/three-dots.svg); background-position: center center; background-repeat: no-repeat; background-size:80px; background-color: black; opacity: 0.8;}
.noproducts{ width:100%; min-height:380px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 2rem; line-height: 1.5; color: #FFF;}
body.no-scroll { overflow: hidden;  }
/*--　浮动 --*/
#fixnav{ position:fixed; z-index:99999;
-webkit-animation:searchTop .5s ease-in-out;
-moz-animation:searchTop .5s ease-in-out;
animation:searchTop .5s ease-in-out;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#e2e2e2,direction=120,strength=4);
-moz-box-shadow: 0px 0px 5px #e2e2e2;
-webkit-box-shadow: 0px 0px 5px #e2e2e2;
box-shadow:0px 0px 5px #e2e2e2;}
#fixnav::before{ width: 100%; height: 100%; content: ''; position: absolute; left: 0; top:0; opacity:1}
-webkit-keyframes searchTop {0% {top:-100px}to {top:0}}
@-moz-keyframes searchTop {0% {top:-100px}to {top:0}}
@keyframes searchTop {0% {top:-100px}to {top:0}}
/**/
.wrapperbox{ width:100%; height:100vh; display: flex; justify-content: space-between; flex-direction:row; overflow: hidden;}
.wrapper-l{ width:55%; display: flex; flex-direction:column; padding-left:10%; position: relative; }	
.w-title{ display: flex; padding:20px 0px; }
.w-title img{ max-width: 100%; }
.w-box{ width:100%; display: flex; flex-direction: row;}
.w-nav{ width:220px; display: flex; flex-direction: column; padding: 20px 0px; position: relative; flex-shrink: 0;}
.w-nav::before{ content: ''; position: absolute; right: 0; top:0; width: 2px; height:500px; background: linear-gradient(to bottom, #14120e 0%, #818181 50%, #14120e 100%); }
.w-nav a{ font-size: 1.1rem; color: #977b68; line-height: 1.5; padding:15px 0px; -webkit-transition: 0.6s; -moz-transition: 0.6s; transition: 0.6s;}	
.w-nav a:hover{ color: #FFF;}
.two-nav{ width:55%; display: flex; flex-shrink: 0;}
.two-nav ul{ display: flex; flex-direction: column; padding:20px 40px;}
.two-nav ul li{ display: flex;  }
.two-nav ul li a{ width:100%; font-size: 1.1rem; color: #977b68; line-height: 1.5; padding:15px 0px; -webkit-transition: 0.6s; -moz-transition: 0.6s; transition: 0.6s;}
.two-nav ul li a:hover{ color: #FFF;}
.wrapper-r{ width:45%; height:100%; display: flex; justify-content:flex-end; align-items:flex-end; flex-direction: row; }
.catalog, .series { display: none; }
.catalog.active, .series.active { display: block;}
.w-nav a.active { color:#FFF; }
	
.wrapper-r .swiper-w { height: 100%; padding: 0px 20px; position: relative;}
.wrapper-r .swiper-w::before{ content: ''; position: absolute; left: 0; top:0; width: 100%; height:20%;  background: linear-gradient(to bottom, rgba(20, 18, 14, 1) 0%, rgba(20, 18, 14, 0) 100%); z-index:10;  }
.wrapper-r .swiper-w::after{ content: ''; position: absolute; left: 0; bottom:0; width: 100%; height:20%;  background: linear-gradient(to top, rgba(20, 18, 14, 1) 0%, rgba(20, 18, 14, 0) 100%); z-index:10;  }
.wrapper-r .swiper-slide { display: flex; align-items: center; justify-content: center; padding: 0px 10px; }
.wrapper-r .swiper-slide img{  max-width: 100%; }
.wrapper-r .swiper-wrapper {  -webkit-transition-timing-function: linear;  -moz-transition-timing-function: linear; -ms-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; }

/*-- headerbox --*/
.headerbox.sytop{ border-bottom:0; }
.headerbox.sytop .navbox ul li a{ color:#FFF; }
.headerbox.sytop .navbox ul li i{ background:#FFF; }
.headerbox.sytop .cen a { color: #FFF;}
.headerbox.sytop#fixnav{ filter: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;}
.headerbox.sytop#fixnav::before{ background-color: #242424!important; opacity: 0.5;}
/**/
.inpage{ width:100%; height:105px; display: flex; background: #FFF;}
.headerbox{ width:100%; height:auto; position:fixed; left: 0; top:0; z-index:10; display: flex; border-bottom: 1px solid #acacac;}
.inpage .headerbox{ background: #FFF; opacity: 0.9;}
#fixnav::before{ content: ''; position: absolute; left: 0; top:0; width: 100%; height: 100%; background-color: #FFF; opacity: 0.95;}
.headerm{ width:100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; position: relative; z-index: 1;}
.logo{ width:350px; height:105px; display: flex; justify-content: flex-start; align-items: center; flex-shrink: 0; }
.logo>i{ flex: 1 0 auto}
.logo>i a{ display: flex;}
.logo>i a img{ max-width:75%; }
.navbox{ width:40%; height:105px; display: flex; text-align:center; position: relative; margin-right: auto; padding-left:20px; }
.navbox ul{ width:100%; display: flex; align-items:center; justify-content:center; }
.navbox ul li{ flex:1 0 auto; flex-shrink: 0; display: flex; justify-content: space-around;}
.navbox ul li a{ font-size:1rem; color:#000000; position: relative; text-decoration: none; }
.navbox ul li i{ width:10%; height:3px; background:#000000; position:absolute; bottom:-9px; left:45%; visibility:hidden; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; -webkit-transition: 0.6s; -moz-transition: 0.6s; transition: 0.6s;
-moz-border-radius: 10px; 
-webkit-border-radius: 10px;
border-radius: 10px;
}
.navbox ul li:hover i{visibility:visible; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; transition:0.6s; -webkit-transition:0.6s; -moz-transition:0.6s; width:90%; left:5%;}
#active i{visibility:visible; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; width:90%; left:5%;}
#col{ fill:#000000; -webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;}
#gose:hover #col{ fill:#000;}

.elsebox{ display: flex; justify-content: flex-end; flex-direction: row; align-items: center; position: relative;}
.searchv{ cursor:pointer; padding-top:5px; padding-right: 20px; position: relative;}
.searchv i{ width: 25px; height:25px; display: flex; }
.searchv i svg{ width: 100%;}
.search-show{ width:230px; height:45px; position:absolute; right:0px; top:50px; background:#FFF; border:2px solid #242424; overflow: hidden; display:none; z-index:9;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;}
.search-show form{ width:100%; padding: 0px 10px 0px 0px; display: flex; justify-content: space-between; align-items: center; flex-direction: row;}
#search_input1{ outline:none; height:43px; width:80%; border:0px solid #CCC; float:left; color:#000; font-size:13px; padding:0px 10px; }
#search_input2{ float:left; width:25px; height:25px; outline:none; }

.cen{ float: left; display: flex; flex-direction: row; justify-content:flex-end; align-items: center; padding-top: 5px;}
.cen a { display: flex; flex-shrink: 0; flex-direction: row; justify-content: center; align-items: center; line-height:1; color: #000; font-size:0.875rem; padding:4px; position: relative; margin-right: 5px; font-weight: 600;}
.cen a i{ display: flex;}
.cen a i img{ width:auto;}
.cen a span{ padding-left:5px; display: flex;}

/*-- --*/
.bannerbox{ width:100%; height:100vh; float: left; position: relative; background-color:#000; }
.bannerbox .swiper-w{ width:100%; height: 100%;}
.bannerbox .swiper-slide{ width:100%; height: 100%; background-size:cover; background-repeat: no-repeat; background-position: center center; display: flex;}
.bannerbox .swiper-slide a{ width: 100%; display: flex; position: relative;}
.bannerbox .swiper-slide a img{ width: 100%;}
.bywds{ position: absolute; left: 0; top:0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items:center;}
.bywds h1{ width:40%; font-size:4.5rem; color: #FFF; }
.bywds p{ width:40%; font-size:1.5rem; color: #FFF; padding: 30px 0px; }
.bywds button{ width:320px; height: 75px; font-size:1.18rem; background-color: #094879; display: flex; justify-content: center; align-items: center; text-align: center; color:#FFF; border: 0;}
.bywds button.button--isi::before { background:#5A5A59;}
.bannerbox .swiper-pagination-bullet { width:12px; height:12px; opacity: 1; background-color: transparent; border: 1px solid #FFF;}
.bannerbox .swiper-pagination-bullet-active { color: #000; background: #ffffff;}
.bannerbox .swiper-horizontal>.swiper-pagination-bullets{ bottom:40px;}
.banSwiper .inbg{ width:100%; height:100%; position: absolute; left: 0; top:0; background-repeat: no-repeat; background-size:cover; background-position: center; }
.section .dds{ width:100%; position: absolute; left: 0; bottom:30px; z-index: 10; display: flex; justify-content: center; align-items: center; text-align: center;}
.section .dds svg{ display:inline-block; }


/*---syone---*/
.syonebig{ width:100%; display: flex; flex-direction: column; }
.syonebox{ width:100%; height:100vh; display: flex; background-color: #000; }
.syonebox i{position: absolute; left: 0; top:0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;}
.syom{ width: 100%; height: 100%;  padding:0px 60px; display: flex;  position: relative; z-index: 1;}
.syom a{  width: 100%; height: 100%; display: flex; justify-content:flex-end; align-items:flex-start; flex-direction: column; color:#FFF;}
.syonebox h1{ font-size: 2rem;}
.syonebox p{ font-size: 1rem; padding:15px 0px 80px;}

/*---sytwo---*/
.sytwo{ width:100%; height:100%; background-color: #000; display: flex; background-position: center; background-repeat: no-repeat; background-size: cover; padding:110px 0px 0px; }
.sytwo-t{ width:100%; display: flex; flex-direction: column;}
.sytwo-t h1{ font-size: 1.87rem; color: #FFF; font-weight: 600; line-height: 1.5}
.sytwo-t p{ font-size: 1rem; color: #FFF; line-height: 1.5}
.sytwo-show{ width:100%; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 60px 0px; }
.sytwo-show div{ flex: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #FFF;}
.sytwo-show div:nth-child(2){ flex:1.2; padding: 0px 40px;}
.sytwo-show div i{ width:100%; display: flex;}
.sytwo-show div i img{ width:100%;}
.sytwo-show div p{ font-size: 0.95rem; line-height:1.8; padding: 30px 0px 0px; }

/*---sythree---*/
.sythree{ width:100%; height: auto; overflow-y: auto; background-color: #271e17;display: flex; flex-direction: column; background-position: center; background-repeat: no-repeat; background-size: cover; padding:110px 0px 0px; }
.syth-a{ width:100%; display: flex; }
.syth-t{ width:100%; display: flex; flex-direction: column;}
.syth-t h1{ font-size: 1.87rem; color: #FFF; font-weight: 600; line-height: 1.5}
.syth-t p{ font-size: 1rem; color: #FFF; line-height: 1.5}
.syth-b{ width:100%; display: flex; padding:50px;}
.syth-one{ width:100%; display: flex; flex-direction: column;}
.syth-one i{ width: 100%; display: flex; overflow: hidden;}
.syth-one i img{ width: 100%; -webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
.syth-one:hover i img{ -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05);}
.syth-one div{ width:100%; display: flex; flex-direction: column; padding: 15px 0px;}
.syth-one div h1{ font-size: 1.75rem; color: #FFF; font-weight: normal; padding:10px 0px; }
.syth-one div p{ font-size:0.95rem; color: #FFF; padding: 5px 0px;}

/*-- locbox --*/
.locbox{ width:100%; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; flex-wrap: wrap;}
.locbox .md{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; }
.locbox ul{ display: flex; justify-content: flex-start; align-items:center; flex-direction: row; flex-wrap: wrap; padding:15px 0px;}
.locbox ul li{ font-size: 0.81rem; color: #959595; padding-right: 5px; display: flex; justify-content: center; align-items: center;}
.locbox ul li img{ width: 14px;}
.locbox ul li a{ font-size: 0.81rem; color: #959595; display: flex; justify-content: center; align-items: center; padding-top: 5px;}
.locbox ul li a:hover{ color: #977b68; text-decoration:underline!important; }

/*-- proseries --*/
.proseries{ width:100%; display: flex; padding: 0px 0px 100px;}
.proseries .md{ padding: 0px 3%;}
.cataone{ width:100%; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; padding:20px 8%;}
.cataone a{width:100%; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; -webkit-transition:all .6s;-moz-transition:all .6s;transition:all .6s;}
.cataone i{ width:100%; display: flex; background-color: #767575}
.cataone i img{ width:100%; }
.cataone div{ width:100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;}
.cataone div h1{ font-size: 1.15rem; line-height: 1.5; padding: 15px 0px; color:#000; font-weight: 600;}
.cataone div p{ width:80%; font-size:0.95rem; line-height: 1.5; color: #969696;  -webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;}
.cataone a:hover div p{ color: #000;}
.cataone a:hover{ -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); transform: translateY(-20px); }

/*-- catalog --*/
.catalog{ width:100%; display: flex; padding: 0px 0px 100px;}
.catalog .md{ padding: 0px 3%;}
.catalog .cataone div{ justify-content:flex-start; align-items:flex-start;}
.catalog .cataone div h1{}
.catalog .cataone div p{ width: 100%; }

/*-- 产品系列 --*/
.products{ width:100%; display: flex; flex-direction: column;}
.sort-top{ width:100%; display: flex; position: relative;}
.sort-top::before{ content: ''; position: absolute; right:-70%; top:0; width:100%; height:100%; background-color: #dcdcdc;}
.sort-mt{ width:100%; display: flex; justify-content:space-between;  flex-direction: row; position:relative; z-index: 1;}
.sort-mtl{ width:59%; display: flex; padding-top:100px;}
.sort-mtl img{ width: 100%;}
.sort-mtr{ width:41%; padding: 50px 8% 0px; display: flex; justify-content:flex-start; align-items:flex-start; flex-direction: column;}
.sort-mtr div{ display: flex; flex-direction: column; justify-content: flex-end; align-items:flex-end;}
.sort-mtr h2{ font-size: 1.8rem;}
.sort-mtr h1{ font-size: 6rem; }
.sort-mtr p{ font-size: 1rem; color: #a2a2a2; line-height: 1.5; padding:60px 0px; }
.sort-mtr a{ display: flex; justify-content:center; align-items: center; flex-direction:row; font-size:1.125rem; color: #a2a2a2; -webkit-transition:all .6s;-moz-transition:all .6s;transition:all .6s;}
.sort-mtr a i{ display: flex; flex-direction:row; padding-right: 10px;}
.sort-mtr a svg{ width:15px;}
#jtcolor{ fill: #a2a2a2; }
.sort-mtr a:hover{ color:#000; text-decoration: underline; padding: 0px 10px;}

/*-- 产品NEI --*/
.probox{ width:100%; display: flex; padding:40px 0px;}
.prombox{ width:100%; display: flex; flex-direction:row; flex-wrap: wrap; min-height:350px; padding:20px 0px;}
.cpsearch{ width:100%; flex: 1; height: auto; float: left; display: flex; justify-content:flex-start; align-items:flex-end; flex-direction: column; padding:5px 15px; }
.bigbox .cpsearch{  padding:15px 15px 30px; }
.insearch{ width:290px; height:auto; border:1px solid #dcdcdc; background-color:#ffffff; overflow:hidden; display: flex; justify-content:space-between; align-items: center; flex-direction: row; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.insearch .p1{ width:83%; height:40px; float:left;}
.insearch .p2{ width:15%; height:40px; float:right; text-align:center; overflow:hidden; cursor:pointer; }
#search_inputps1{ outline:none; height:100%; width:100%; border:0px solid #CCC; background-color:#ffffff; float:left; padding:0px 15px; font-size:0.9rem; color:#000;}
#search_inputps2{ display:inline-block; width:100%; height:100%; outline:none; background-color:#ffffff; cursor:pointer; background-image:url(../img/svg-loaders/sosearch.svg); background-size:28px; background-position:center; background-repeat:no-repeat; border:0; }
#search_inputps1::-webkit-input-placeholder{ opacity:1; color:#919191;}
#search_inputps1:-moz-placeholder{opacity:1; color:#919191;}
#search_inputps1::-moz-placeholder{opacity:1; color:#919191;}
#search_inputps1:-ms-input-placeholder{opacity:1; color:#919191;}

.cpmian{ width:100%; height:auto; display:flex; flex-direction: column;  position:relative; overflow:hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.cpimgs{ width:100%; float:left; overflow:hidden; display: flex; justify-content: center; align-items: center; border: 1px solid #aaaaaa; background-color:#aaaaaa; }
.cpimgs img{ width:100%; object-fit: contain;  height: auto; -webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
.cpmian:hover .cpimgs img{ -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05);}
.cpnames{ width:100%; height:auto; display: flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; padding:10px;}
.colorbox{ width: 100%; min-height:17px; display: flex; justify-content:center; align-items:center; flex-direction:row;}
.colorbox i{ margin:0px 5px; width:17px; height:17px; border-radius: 360px; border: 1px solid #ccc; display: flex; flex-shrink: 0; position: relative; cursor: pointer;}
.colorbox i::before{ width:15px; height:15px; content: ''; position: absolute; left: 0; top:0; border:1px solid #FFF; border-radius: 360px;}
.colorbox i.on{ border: 1px solid #000;}
.cpnames h1{ width:100%; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 1rem;  color: #000; padding:10px 0px; font-weight: normal; }

/*-- 产品内页 --*/
.inprobox{width:100%; display: flex; padding:10px 0px 30px;}
.proinfobox{ width:100%; height:auto; display: flex; flex-direction: column; padding:0px;}
.ban {width:100%; height:auto; position:relative; z-index:1; display: flex; flex-direction: row; justify-content: space-between; }
.banl{ width:25%; display: flex; flex-direction:column; justify-content:center; align-items:flex-start;}
.banl a{ width:100%; display: flex; flex-direction: column; padding-bottom:100px;}
.banl h1{ font-size: 1rem; color: #000000; padding: 15px 15px 5px; }
.banl h2{ font-size: 1rem; color:#d1d1d1; padding: 15px 15px 5px; }
.banl i{ width:100%; display: flex; position: relative;}
.banl i svg{ width:16px; height:16px;}
.banl i::before{ width:calc(100% - 8px); height:2px; background-color:#d1d1d1; content: ''; position: absolute; left:8px; top:7px;}
.banm{ width:50%; display: flex; flex-direction:column-reverse; justify-content: flex-start; padding:10px;}
.banm .swiper-slide img{ width:100%;  max-height: 600px;}
.mySwipera{ width:100%; position: relative; overflow: hidden; background-color:#FFF; }
.mySwipera .zoom-hand{ position: absolute; right:15px; bottom:15px; z-index: 1;}
.mySwipera .swiper-slide{ display: flex; justify-content: center; align-items: center; }
.swiwper-myb{width:100%; display: flex; position: relative; overflow: hidden; flex-direction: column; padding:10px 0px; }
.mySwiperb{ width:100%; display: flex; overflow: hidden; flex-direction: column; align-items: center; justify-content: center;}
.mySwiperb .swiper-wrapper{ display: flex; justify-content: center; }
.mySwiperb .swiper-slide{ border:2px solid #a2a2a2; display: flex; justify-content: center; align-items: center; }
.mySwiperb .swiper-wrapper .swiper-slide{ width:60px; height:60px; cursor: pointer; overflow:hidden;}
.mySwiperb .swiper-slide-thumb-active { border:2px solid #000!important;}
.cpname{ width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;}
.cpname h1{ font-size: 1.3rem; color: #000000; font-weight: 600; padding:20px 0px 10px;}

.banr{ width:25%; display: flex; flex-direction:column; justify-content:center; align-items:flex-start; position: relative;}
.banr a{ width:100%; display: flex; flex-direction: column; align-items: flex-end; padding-bottom:100px;}
.banr h1{ font-size: 1rem; color: #000000; padding: 15px 15px 5px; }
.banr h2{ font-size: 1rem; color:#d1d1d1; padding: 15px 15px 5px; }
.banr a>i{ width:100%; display: flex; position: relative; justify-content: flex-end;}
.banr a>i svg{ width:16px; height:16px;}
.banr a>i::before{ width:calc(100% - 8px); height:2px; background-color:#d1d1d1; content: ''; position: absolute; right:8px; top:7px;}
.whcolor{ min-width:50%;  display:flex; justify-content:flex-start; align-items: center; flex-direction: row; position: absolute; left: 10px; top:40%; z-index: 1;}
.whcolor>i{ margin-right:10px; width:28px; height:28px; border-radius: 360px; border:2px solid #787878; display: flex; flex-shrink: 0; position: relative; cursor: pointer;}
.whcolor>i::before{ width:26px; height:26px; content: ''; position: absolute; left: -1px; top: -1px; border:2px solid #FFF; border-radius: 360px;}
.whcolor>i:hover{ border:2px solid #000;}
.tooltip { font-size: 1em; color: #000; }

.proinfoname{ width:100%; display: flex; background-color: #c2c2c2; margin-top:20px; }
.proinfoname-m{ width:100%; display: flex; justify-content:flex-start; flex-direction: column;}
.ptt{ height: 50px; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction: column; }
.ptt h1{ font-size: 1.125rem; color: #000000; font-weight: 600; background-color: #ffffff; display:flex; padding:10px 30px;}
.pt-show{ width:100%; display: flex; flex-direction: column; color: #FFF; padding:35px; font-size: 1.1rem; line-height:2;}
.pt-show>h1{ font-size: 1.25rem; line-height:2;}
.pt-show>h2{ font-size: 1.1rem; line-height:2;}
.pt-sm{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; padding: 40px 0px;}
.pt-sm ul{ margin-right: 45px;}
.pt-sm ul li{ font-size: 1.125rem;}

/*-- 产品表格 --*/
.cptable{ width:100%; height:auto; display: flex; justify-content: flex-start; flex-direction: column; padding-bottom:40px; }
.cpform-tv{ width:100%; height:auto; float:left; padding:70px 0px 20px; display: flex; justify-content: center; align-items: center; text-align: center;}
.cpform-tv h1{ float:left; font-size:1.8rem; line-height:35px; color:#000; text-align: center;}
.cpform{ width:100%; padding:20px 0px; float:left; }
#form1 .layui-form-item{ display: flex; justify-content: flex-start; flex-direction: column; }
#form1 .layui-form-label{ width:100%; text-align: left; font-size:1rem; line-height:25px; color:#999999; }
#form1 .x-red{ color:red;}
#form1 .layui-input-block{ margin-left: 0;}
#form1 .layui-input-block input{ width:100%; height:50px; color:#000; font-size:1rem; outline:none; padding:0px 10px; background-color: #c2c2c2; border: 1px solid #c2c2c2;}
#form1 .layui-input-block input::placeholder{ color:#999999; }
#form1 .layui-input-block textarea{ font-size:1rem; color:#000; height: 90px; background-color: #c2c2c2; border: 1px solid #c2c2c2;}
#form1 .layui-input-block textarea::placeholder{ color:#999999; }
#form1 .layui-form-checkbox span{ color:#999999; font-size:1rem; }
#form1 button{ width:180px; height: 40px; background-color: #c2c2c2; color: #FFF; font-size: 1rem; outline:none;}
#form1 button:hover{ background-color: #242424;}

/*-- --*/
.samebox{ width:100%; padding:30px 0px; display: flex; justify-content:flex-start; align-items: center; flex-direction: column;}
.samet{ width:100%; display: flex; flex-direction: row; align-items:flex-end; justify-content: space-between; }
.samet h1{ min-width: 330px; height: 60px; font-size:1.6rem; color: #FFF; display: flex; justify-content: center; align-items: center; background-color: #000; font-weight: normal;}
.samet a{ font-size: 1rem; color: #000000; position:relative; border-bottom: 1px solid #000000; padding:5px 0px;}
.samet a:hover{ color: #c2c2c2; border-bottom: 1px solid #c2c2c2;}
.sameshow{ width:100%; height:auto; float: left; padding:40px 0px; position: relative;}

/*-- 品牌 --*/
.brandbox{ width:100%; display: flex;}
.br-one{ width:100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: row; padding-top: 35px;}
.br-one i{ flex: 1;}
.br-one i img{ width:100%; }
.br-two{ width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.br-tt{ width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; padding:35px 15%;}
.br-two h1{ font-size: 1.8rem; color:#000; text-align: center; padding: 40px 0px; }
.br-two p{ font-size: 1rem; color:#000; line-height: 1.5; }
.br-tt-show{ width:100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: row; padding: 70px 0px 120px;}
.br-tt-sl{ width:46%; display: flex; flex-direction: column; position: relative; padding:0px 70px;  }
.br-tt-sl i{ padding-bottom: 200px;}
.br-tt-sl i img{ max-width: 100%;}
.br-tt-sl h1{ width: 200%; position: absolute; left:70px; top:140px; font-size: 1.4rem; font-weight: 600; text-align: left; line-height: 1; letter-spacing:40px; padding-top:70px;}
.br-tt-sl h1::before{ width:40px; height: 3px; background-color:#dcdcdc; content: ""; position:absolute; left: 0; top:0;}
.br-tt-sl p{ width:100%; font-size: 1rem; line-height: 1.5;}
.br-tt-sr{ width:54%; display: flex;}
.br-tt-sr i{ width:100%; display: flex;}
.br-tt-sr i img{ width:100%; }

.brcc{ width:100%; display: flex; justify-content:space-between; flex-direction: row; align-items: center; padding:30px 0px; }
.brcc.two{ flex-direction:row-reverse; }

/*-- 艺术 --*/
.artbox{ width:100%; display: flex; flex-direction:column;}
.artm{ width:100%; display: flex;}
.artone{ width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; padding-top: 30px;}
.artone i{ width:100%; }
.artone i img{ width:100%; }
.arttwo{ width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.art-a{ width:100%; display: flex; justify-content:center; align-items: center; flex-direction: column; text-align: center; padding:25px 0px 80px;}
.art-a h1{ font-size: 2.4rem; font-weight: 600; padding: 50px 0px 40px; line-height: 1.5;} 
.art-a p{ width:60%; font-size: 1rem; color: #9c9c9c; line-height: 1.8;}
.art-a b{ padding: 30px 0px;}
.art-a b svg{ width:36px; height:36px;}
.art-a i{ width:80%; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; padding-top: 60px; }
.art-a i img{ max-width: 100%; z-index: 1;}
.art-a i::before{ content: ''; position: absolute; right: 0; top:0; width:660px; height:430px; background-color:#eaeaea; }

.art-b{ width:100%; display: flex; justify-content:space-between; flex-direction: row; padding:0px 0px 70px;}
.art-bl{ width:50%; color:#FFF; display: flex; justify-content:center; flex-direction: column; padding:6% 6% 0px; position: relative;}
.art-bl h1{ font-size:2.1rem; color:#000; font-weight: 600;}
.art-bl p{ font-size:1rem; color: #000; line-height:2; padding:45px 0px; }
.art-b.two{ flex-direction: row-reverse;}
.art-br{ width:50%; display: flex;}
.art-br i{ width:100%; display: flex; justify-content: center; align-items: center; }
.art-br img{ max-width:100%; }

.art-c{ width:100%; display: flex; background-color:#b9b9b9; }
.art-cm{ width:100%; display: flex; flex-direction: column; padding: 60px 70px;}
.art-cmt{ width:100%; display: flex; flex-direction: column;}
.art-cmt h1{ font-size:2.4rem; color: #FFF; line-height:1.5; padding: 5px 0px;}
.art-cmt p{ font-size:1rem; color: #FFF; line-height:1.5;}
.art-cminfo{ width:100%; display: flex; justify-content:space-around; align-items: center; flex-direction: row; padding-top: 70px;}
.art-cminfo i img{ max-width: 100%;}

.art-d{ width:100%; display: flex; padding: 40px 0px; }
.art-dt{ display: flex; justify-content: center; align-items: center; flex-direction: column; }
.art-dt h1{ font-size: 2rem; color: #000; line-height: 1.5; padding: 30px 0px;}
.art-dshow{ width:100%; display: flex; justify-content:space-around; align-items:baseline; flex-direction: row; padding:40px 7%; position: relative;}
.adline{ width:100%; height: auto; position: absolute; left: 0; top:45%; text-align: center; }
.adline img{ max-width:100%; }
.aadone{ width: 140px; height: 160px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-image: url(../img/images/page/ass.png); background-repeat: no-repeat; background-position: center; background-size:100%; z-index: 1;}
.aadone.two{ background-image: url(../img/images/page/assx.png);}
.aadone i img{ max-width: 100%;}
.aadone h1{ font-size:0.95rem; color: #000; padding: 10px 0px; }
.aadone.two h1{ color: #FFF;}


/*-- 下载 --*/
.download{ width:100%; display: flex; }
.downbox{ width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: row; position: relative; z-index: 1;  background-color: #FFF; margin-top:40px; padding: 90px 0px 150px; }
.downbox::before{ width:300px; height: 500px; background-image: url(../img/page/wen.jpg); background-size: cover;  content: ''; position: absolute; left:-300px; top:0; background-repeat: no-repeat;}
.dl{ width: 30%; padding:0px 60px;  display: flex; justify-content: flex-start; align-items:flex-start; flex-direction: column; color: #000; line-height: 1.5;}
.dl h1{ font-size: 1.9rem; padding: 10px 0px;}
.dl h2{ font-size: 1.3rem; padding: 5px 0px;}
.dl p{ font-size:0.95rem; color: #626262; line-height: 1.8; padding:25px 0px; }

.dr{ width:70%; }
.sup-one{ display: flex; height:580px; justify-content:flex-start; align-items:flex-start;}
.sup-one.two{ align-items:flex-end;}
.sup-one a{ width:100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction:column;}
.sup-one a>i{ width:100%; display: flex; transition:all 0.6s; -webkit-transition:all 0.6s; -moz-transition:all 0.6s;}
.sup-one a>i img{ width:100%; }
.sup-one h1{ width:100%; height:45px; margin-top:8px; display: flex; justify-content: center; align-items: center; flex-direction:row; background-color:#eaedef; border: 1px solid #d8dde6; transition:all 0.6s; -webkit-transition:all 0.6s; -moz-transition:all 0.6s;}
.sup-one h1 p:first-child{ width:100%; font-size:1rem; color: #000; line-height: 1.5; text-align: center; display: flex; justify-content:center; align-items: center; padding: 0px 10px;}
.sup-one h1 p:nth-child(2){ width:80px; height: 100%; flex-shrink:1; display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; padding: 5px; border-left: 1px solid #d8dde6;}
.sup-one h1 span{ font-size: 0.5rem; color: #6e6e6e; padding-top:5px;}
.sup-one h1 i{ width:22px; height:22px; display: flex; justify-content: center; align-items: center;}
.sup-one h1 i svg{ width: 100%;}
#ddp{ fill: #000;}
.sup-one:hover a>i{
filter:progid:DXImageTransform.Microsoft.Shadow(color=#242424,direction=120,strength=4);
-moz-box-shadow: 0px 0px 15px #242424;
-webkit-box-shadow: 0px 0px 15px #242424;
box-shadow:0px 0px 15px #242424;
}

/*-- 新闻 --*/
.newsbox{ width:100%; display: flex; }
.newsbox.nbg{ background-image: url(../img/images/page/newsimg.png); background-repeat: no-repeat; background-position: left bottom 100px; background-size:auto;}
.newstitle{ width:100%; display: flex; flex-direction: column; padding:60px 90px 0px; color: #000; line-height: 1.5; position: relative; z-index:5;}
.newstitle h1{ font-size: 2.55rem; font-weight: 600;}
.newstitle h2{ font-size: 2.35rem; font-weight: 600; }
.newstitle i{ width:55px; display: flex; justify-content: center; align-items:center; padding:20px 0px;}
.newstitle i svg{ width:100%;}
.newstitle p{ font-size: 1.1rem; display: flex; margin-top:40px; line-height: 1.9}
.newsinfo{ width:100%; display: flex; flex-direction: column; justify-content:flex-start; padding: 60px 0px 70px 350px; margin-top: -180px; position: relative;  z-index: 2;}
.newsinfo::before{ width:520px; height: 100%; background-color: #d4d4d4; content: ''; position: absolute; right:11.1%; top:0;}
.newsone{ width:85%; height: 340px; padding: 35px; color: #FFF; display: flex; justify-content:space-between; align-items:flex-start; flex-direction: column; background-color: #000; background-repeat: no-repeat; background-size: cover; background-position:right center; margin-top: 50px; position: relative; z-index: 1; }
.newsone a{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content:space-between; align-items:flex-start; color: #FFF;}
.newsone.two{ margin-left: auto; }
.newsone h1{ font-size: 1rem; position: relative; padding: 20px 0px;}
.newsone h1::before{ content: ''; position: absolute; left: 0; bottom: 0; width:90px; height: 3px; background-color: #FFF; }
.newsone p{ width:300px; font-size: 0.9rem; line-height: 1.8; padding: 20px 0;}
.newsone h2{ font-size: 1rem; margin-top: auto;}

/*-- page --*/
.page{ width:100%; height:auto; display: flex; justify-content: center; align-content: center; flex-direction: column; font-size:16px; padding:20px 0px; z-index: 1}
.page.news{ padding-left: 20%; padding-top:30px;}
.page.propage .pagination ul li a:hover{ background:#000; color:#FFF; border-radius: 360px;}
.page.propage .pagination ul li a.active{ background:#000; color:#FFF; border-radius: 360px;}

.pagination{width: 100%; display:flex; justify-content: center; align-content: center; }
.pagination ul{width: 100%; height:auto; display: flex; justify-content: center; align-items: center;}
.pagination ul li{ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px 5px; color: #FFF;}
.pagination ul li i{ display: flex; width:100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; font-style: normal;}
.pagination ul li a{ display: flex; justify-content: center; align-items: center; flex-direction: column; width:35px; height:35px; font-size:1rem; color:#000;  }
.pagination ul li a:hover{ background:#FFF; color:#000; border-radius: 360px;}
.pagination ul li a.active{ background:#FFF; color:#000; border-radius: 360px;}
#fprev i{ background: url(../img/svg-loaders/aah.svg) center center no-repeat; background-size:28px;}
#fprev:hover i{ background: url(../img/svg-loaders/aah.svg) center center no-repeat; background-size:28px;}
#fnext i{ background: url(../img/svg-loaders/bbh.svg) center center no-repeat; background-size:28px;}
#fnext:hover i{ background: url(../img/svg-loaders/bbh.svg) center center no-repeat; background-size:28px;}
#prev i{ background: url(../img/svg-loaders/lllefth.svg) center center no-repeat; background-size:15px;}
#next i{ background: url(../img/svg-loaders/rrright.svg) center center no-repeat; background-size:15px;}
#fprev:hover,#fprev.active,#prev:hover,#prev.active,#next:hover,#next.active,#fnext:hover,#fnext.active{ background-color: #FFF;}
#prev:hover i{ background: url(../img/svg-loaders/lllefth.svg) center center no-repeat; background-size:15px;}
#next:hover i{ background: url(../img/svg-loaders/rrright.svg) center center no-repeat; background-size:15px;}
#prev img,#next img{ width:20px; }
.pagination ul li a img{ width: 80%; }
#cco{ fill:#FFF; }
#prevstart #cco{ fill:#FFF; }
#nextend #cco{ fill:#FFF; }

/*-- 新闻详细内容 --*/
.in-newsbox_title { width:100%; padding:50px 0px 15px; font-size:22px; text-align:center; float:left; color:#000;  text-transform: uppercase; }
.in-newsbox_info {width:100%;height:auto; float:left; text-align:center; padding:20px 0px;}
.in-newsbox_info ul{ display: flex; justify-content: space-between; align-items: center;}
.in-newsbox_info ul li{ font-size:1.1rem; color:#000; flex-shrink: 0;}
.in-newsbox_info span{ font-size:1.1rem; color:#000; padding-right:10px;list-style:none; text-align:center; display:inline-block;}
.in-newsbox_content{ font-size:1.1rem; line-height:33px; width:100%; color:#000;}
.in-newsbox_content img{ max-width:100%}
.backbtn{ width:100%; height: auto; float: left; text-align: center; display: flex; justify-content: center; align-items: center;}
.backbtn a{ padding: 5px 30px; font-size:1rem; background-color: #000; color: #ffffff;
 -moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;}
.backbtn a:hover{ background-color:#977b68; color: #FFF;}
.pagee{width:100%;float:left; height:auto; }
.pagees{width:100%;float:left; height:auto; padding: 30px 0px;}
.pagesl{ width:30%; float:left;}
.pagesl p{ width:auto; font-size:1rem; line-height:20px; padding:5px 0px; color:#000}
.pagesr p{ width:auto; font-size:1rem; line-height:20px; padding:5px 0px; color:#000;}
.pagesr{ width:30%; float:right; text-align:right;}
.pagesl a{ color:#FFF; font-size:1rem; padding:5px 10px; display:inline-block;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #000;
}
.pagesl a:hover{ color:#FFF; background:#977b68;}
.pagesl i{ padding-right:5px;}
.pagesr a{ color:#FFF; font-size:1rem; padding:5px 10px; display:inline-block;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #000;
-webkit-transition: 0.3s;-moz-transition: 0.3s;transition: 0.3s;
}
.pagesr i{ padding-right:5px;}
.pagesr a:hover{ color:#FFF; background:#977b68; -webkit-transition: 0.3s;-moz-transition: 0.3s;transition: 0.3s;}

/*-- 地图 --*/
.contact{ width:100%; display: flex; flex-direction: column; padding:135px 0px;}
.contactm{ width:100%; display: flex; justify-content:flex-start; align-items:flex-end; flex-direction:column; position: relative;}
.contL{ width:670px; min-height: 370px; display: flex; justify-content:flex-start; align-items: flex-start; background-color: #FFF; padding:45px 35px; flex-direction: column; position: absolute; left: 0; top:0; z-index:1; 
filter:progid:DXImageTransform.Microsoft.Shadow(color=#e2e2e2,direction=120,strength=4);
-moz-box-shadow: 0px 0px 25px #e2e2e2;
-webkit-box-shadow: 0px 0px 25px #e2e2e2;
box-shadow:0px 0px 25px #e2e2e2;}
.contL h1{ display: flex; width: 100%; font-size: 1.31rem; color: #000; line-height: 1.5; padding:25px 15px; border-bottom: 1px solid #c2c2c2;}
.contL ul{ width:100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; padding:25px 0px;}
.contL ul li{ width:100%; display: flex; justify-content:flex-start; align-items: center; flex-direction: row; font-size: 1.18rem; color: #595959; padding:10px 15px;}
.contL ul li i{ width:28px; margin-right: 10px;}
.contL ul li:nth-child(2) i{ width:27px;}
.contL ul li:nth-child(3) i{ width:32px;}
.contL ul li i svg{ width:100%;}
.contR{ width:70%; display:flex; justify-content: flex-end; align-items: flex-end; flex-direction:column;}
.contR h1{ font-size:5.625rem; color: #ababab; line-height: l; }
.mapbox{ width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: -30px;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#e2e2e2,direction=120,strength=4);/*兼容ie*/
-moz-box-shadow: 0px 0px 5px #e2e2e2;/*兼容firefox*/
-webkit-box-shadow: 0px 0px 5px #e2e2e2;/*兼容safari或chrome*/
box-shadow:0px 0px 5px #e2e2e2;/*兼容opera或ie9*/
}
#container{ width:100%; height:500px; float:left;}

/*-- footB --*/
.footB{ width:100%; background-color:#000000; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.foot-a{ width:100%; display: flex;}
.fmidbox{ width:100%; display: flex; justify-content: space-between; align-items:center; flex-direction: row; padding:15px 0px 20px;}
.flogo{ display: flex;}
.flogo img{ max-width: 100%; }
.fshare{ width: 430px; height:80px; display: flex; flex-direction: row; justify-content:center; align-items: center; padding:10px;  position: relative; }
.fshare a{ padding:0px 3.5%;}
.fshare a i{ width:42px; height:42px; display:flex; justify-content: center; align-items: center; background-color: #FFF; border-radius: 360px;}
.fshare a i svg{ width:55%;}
#cols{ fill:#000;}
.fshare a:hover #cols{ fill:#FFF;}
.fshare a:hover i{ background-color: #977b68;}
.fshare a{ position: relative; }
.fshare a.floatshow::before{ content:''; width:120px; height: 120px; background: url('') center center no-repeat; background-color:#999; background-size: cover; position: absolute; left:-25px; top:48px; z-index: 9; opacity: 0; visibility: hidden; cursor: pointer;}
.fshare a.floatshow:hover::before{ opacity: 1; visibility: visible;}

.foot-b{ width:100%; border-top: 1px solid #5e5e5e; border-bottom: 1px solid #5e5e5e;}
.foot-b .fmidbox{ align-items:flex-start;}
.fc-l{ width:auto; flex-shrink: 0; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;}
.fsort{ display:flex; flex-direction: column; padding:15px 40px 0px;}
.fsort h1{font-size:1rem; color: #FFF; line-height: 1.5; padding-bottom: 10px; font-weight: 600;}
.fsort div{ display: flex; flex-direction: row;}
.fsort ul{ width:150px; display:flex; flex-direction: column; padding-right: 30px;}
.fsort ul li{ padding:5px 0px;}
.fsort ul li a{ font-size:0.9rem; color: #585858; line-height: 1.2;}
.fsort ul li a:hover{ color: #FFF; }
.fc-r{ display: flex; justify-content: space-between; flex-direction: row; padding-right: 40px;}
.fc-r div{ display: flex; flex-direction: column; padding:15px; justify-content:flex-start; align-items:center; align-content: center;}
.fc-r div i{ display: flex;}
.fc-r div i img{ max-width:145px;}
.fc-r div p{ text-align: center; font-size: 0.93rem; color: #c8c8c8; padding:8px 0px;}
	
.foot-c{ width:100%; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row; padding:25px 0px;}
.foot-c .fmidbox{ padding:15px 3% 20px;}
.foot-bone{ min-width:15%; max-width:40%; display: flex; flex-direction:row; justify-content: flex-start; align-items: flex-start;}
.foot-bone i{ width:60px; height:60px; background-color:#dcdcdc; border-radius: 360px; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-right: 15px; flex-shrink: 0;}
.foot-bone i img{ width: 100%;}
.foot-bone h1{ font-size:0.93rem; color: #999999; padding: 10px 0px; }
.foot-bone p{ font-size:1.25rem; color: #FFF; line-height: 1.2; font-weight: 600; }
.foot-bone p.else{ font-size:0.92rem; color: #FFF; line-height: 1.2; font-weight: normal;}
.foot-bone div{ display: flex; flex-direction: column;}
.footdown{ width:100%; height:auto; padding-bottom: 30px; line-height:20px; font-size:0.93rem; color:#7b7b7b; position:relative; display: flex; flex-direction:row; justify-content:flex-start; align-items: center;}
.footdown span{ padding:0px 10px; }
.footdown a{ color:#7b7b7b; }


/* ~~ 脚注 ~~ */
@-webkit-keyframes movel {   
0% { background-position: 50% 30%;}
50% { background-position: 50% 70%;}
100% { background-position: 50% 30%;}
}

@-moz-keyframes movel {
0% { background-position: 50% 30%;}
50% { background-position: 50% 70%;}
100% { background-position: 50% 30%;}
}

@keyframes movel {
0% { background-position: 50% 30%;}
50% { background-position: 50% 70%;}
100% { background-position: 50% 30%;}
}

.bigs,.goban .inbg{
-webkit-animation-timing-function: linear;    /*动画时间曲线*/
-webkit-animation-name: bigss;                  /*动画名称，与@keyframes搭配使用*/
-webkit-animation-duration: 55000ms;              /*动画持续时间*/
-webkit-animation-iteration-count: infinite;    /*动画要重复次数*/
-webkit-animation-direction: alternate; /*动画执行方向，alternate 表示反复*/
-moz-animation-timing-function: linear;  /*动画时间曲线*/
-moz-animation-name: bigss;                  /*动画名称，与@keyframes搭配使用*/
-moz-animation-duration: 55000ms;              /*动画持续时间*/
-moz-animation-iteration-count: infinite;    /*动画要重复次数*/
-moz-animation-direction: alternate; /*动画执行方向，alternate 表示反复*/
animation-timing-function: linear;  /*动画时间曲线*/
animation-name: bigss;                  /*动画名称，与@keyframes搭配使用*/
animation-duration: 55000ms;              /*动画持续时间*/
animation-iteration-count: infinite;    /*动画要重复次数*/
animation-direction: alternate; /*动画执行方向，alternate 表示反复*/
}

@-webkit-keyframes bigss {
0% { 
-webkit-transform: scale(1.0);
}
100% { 
-webkit-transform: scale(1.2);
}
}
@-moz-keyframes bigss {
0% { 
-moz-transform: scale(1.0);
}
100% { 
-moz-transform: scale(1.2);
}
}
@keyframes bigss {
0% { 
transform: scale(1.0);
}
100% { 
transform: scale(1.2);
}
}

.bigs .flaotbox{
-webkit-animation-timing-function: linear;    /*动画时间曲线*/
-webkit-animation-name: fadeInDown;                  /*动画名称，与@keyframes搭配使用*/
-webkit-animation-duration: 1200ms;              /*动画持续时间*/
/*-webkit-animation-iteration-count: infinite;    动画要重复次数*/
-moz-animation-timing-function: linear;  /*动画时间曲线*/
-moz-animation-name: fadeInDown;                  /*动画名称，与@keyframes搭配使用*/
-moz-animation-duration: 1200ms;              /*动画持续时间*/
/* -moz-animation-iteration-count: infinite;    动画要重复次数*/
animation-timing-function: linear;  /*动画时间曲线*/
animation-name: fadeInDown;                 /*动画名称，与@keyframes搭配使用*/
animation-duration: 1200ms;              /*动画持续时间*/
/* animation-iteration-count: infinite;    动画要重复次数*/
 /*animation-direction: alternate; 动画执行方向，alternate 表示反复*/
}
.goban .btns{
-webkit-animation-timing-function: linear;    /*动画时间曲线*/
-webkit-animation-name: fadeIn;                    /*动画名称，与@keyframes搭配使用*/
-webkit-animation-duration: 1600ms;              /*动画持续时间*/
/*-webkit-animation-iteration-count: infinite;    动画要重复次数*/
-moz-animation-timing-function: linear;  /*动画时间曲线*/
-moz-animation-name:fadeIn;                 /*动画名称，与@keyframes搭配使用*/
-moz-animation-duration: 1600ms;              /*动画持续时间*/
/* -moz-animation-iteration-count: infinite;    动画要重复次数*/
animation-timing-function: linear;  /*动画时间曲线*/
animation-name:fadeIn;               /*动画名称，与@keyframes搭配使用*/
animation-duration: 1600ms;              /*动画持续时间*/
/* animation-iteration-count: infinite;    动画要重复次数*/
 /*animation-direction: alternate; 动画执行方向，alternate 表示反复*/
}
.goban h1,.goban i,.goban p{
-webkit-animation-timing-function: linear;    /*动画时间曲线*/
-webkit-animation-name: fadeInRight;                /*动画名称，与@keyframes搭配使用*/
-webkit-animation-duration: 1000ms;              /*动画持续时间*/
/*-webkit-animation-iteration-count: infinite;    动画要重复次数*/
-moz-animation-timing-function: linear;  /*动画时间曲线*/
-moz-animation-name: fadeInRight;                /*动画名称，与@keyframes搭配使用*/
-moz-animation-duration: 1000ms;              /*动画持续时间*/
/* -moz-animation-iteration-count: infinite;    动画要重复次数*/
animation-timing-function: linear;  /*动画时间曲线*/
animation-name: fadeInRight;                 /*动画名称，与@keyframes搭配使用*/
animation-duration: 1000ms;              /*动画持续时间*/
/* animation-iteration-count: infinite;    动画要重复次数*/
 /*animation-direction: alternate; 动画执行方向，alternate 表示反复*/
}

@-webkit-keyframes float-up-down {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-moz-keyframes float-up-down {
  0% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes float-up-down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.sythh {
  -webkit-animation-name: float-up-down;
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: float-up-down;
  -moz-animation-duration: 4s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  animation-name: float-up-down;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  display: flex;
  align-items: center;
}


/*-- 左侧 --*/
.footside{position:fixed!important; width:60px; height:auto; right:0; top:45%; z-index:8;}
.footside ul li{ width:60px; height:60px; float:left; position:relative; margin-top:1px; list-style:none; background:#242424; color:#FFF; -moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
}
.footside ul li .sidetop{ width:60px; height:60px; display:inline-block; background:#242424; transition:all 0.3s;}
.footside ul li .sidetop:hover{ background:#ecc7aa; opacity:1; filter:Alpha(opacity=100);}
.footside ul li a{ position:absolute; width:60px; height:60px; top:0; right:0; background:#242424; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s; line-height:60px; color:#FFF; font-size:17px;}
.footside ul li a>i{ float:left; width:60px; height:60px; text-align: center; }
.footside ul li a span{ display:none;}
.footside ul li a span img{ width:100%;}
.footside ul li img{ max-width:100%; float:left;}
#cmail:hover a{ width:155px; background:#ecc7aa; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s; overflow:hidden;}
#cmail:hover a span{ display:block;}

.footside ul li div>i{ width:120px; position: absolute; right: 0; top:0; z-index: 1;}
.footside ul li div>i img{ width:100%;}
.footside ul li div{ width:60px; height:60px; color: #FFF; display: table; background: #ecc7aa; text-align: center; position:absolute; right: 0; top: 0; visibility: hidden; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0;transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.footside ul li:hover div{ width:120px; text-align: center; height:auto; visibility: visible; right: 100%;  filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; transition: 0.6s; -webkit-transition: 0.6s;-moz-transition: 0.6s;}
#topcontrol{ z-index: 3;}

/*-- --*/
.furight{ position:fixed; right:20px; top:35%; width:80px; height:auto; z-index:101; background:#FFF; padding:10px 0px;
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari 和 Chrome */
border-radius: 5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#dddcdc,direction=120,strength=4);/*兼容ie*/
-moz-box-shadow:0px 0px 3px 0px #dddcdc;/*兼容firefox*/
-webkit-box-shadow:0px 0px 3px 0px #dddcdc;/*兼容safari或chrome*/
box-shadow:0px 0px 3px 0px #dddcdc;/*兼容opera或ie9*/
}
.furight ul li{ width:100%; height:auto; float:left;}
.furight ul li i{ width:100%; height:auto; float:left; text-align:center; padding:5px 0px;}
.furight ul li i img{ max-width:100%;}
.furight ul li p{ width:100%; height:auto; float:left; text-align:center; font-size:14px; color:#4a4a4a; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s; padding:2px 0px 5px;}
.furight ul li a:hover p{ color:#00c1b4; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.furight.fen p{ font-size:12px;}

.furightB, .furightB2, .furightB3{ width:100%; height:100%; position:fixed; z-index:102; display:none;}
.ftB-bg{ width:100%; height:100%; position:absolute; top:0; left:0; background:#000;  filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5;}
.ftb-show{ width:100%; height:auto; float:left; top:12%; text-align:center; z-index:1; position:relative;}
.ftb-m{ max-width:500px; height:auto; display:inline-block; background:#FFF; border:1px solid #a6a6a6;
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari 和 Chrome */
border-radius: 5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}
.ftb-mt{ width:100%; height:auto; float:left; padding:15px; border-bottom:1px solid #a6a6a6;}
.ftb-mt p{ width:80%; float:left; font-size:16px; text-align:left;}
.ftb-mt i{ width:20px; height:20px; float:right; position:relative; cursor:pointer;}
.ftb-mt i:before{ content:""; width:18px; height:2px; background:#000; position:absolute; right:9px; top:10px; cursor:pointer;
transform:rotate(45deg);
-ms-transform:rotate(45deg); 	/* IE 9 */
-moz-transform:rotate(45deg); 	/* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg); 	/* Opera */
}
.ftb-mt i:after{ content:""; width:18px; height:2px; background:#000; position:absolute; right:9px; top:10px; cursor:pointer;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); 	/* IE 9 */
-moz-transform:rotate(-45deg); 	/* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg); 	/* Opera */
}
.ftb-in{ width:100%; height:auto; text-align:center; padding:15px; float:left;}
.ftb-in i{ width:100%; height:auto; float:left; padding:15px 20px 5px;}
.ftb-in i img{ max-width:100%;}
.ftb-in p{ font-size:14px; width:100%; height:auto; padding:10px 0px; float:left;}

/*-- 弹出框 --*/
.cctt{ width:100%; height: auto; float:left; font-weight: 600; color: #FFF; }
.modal-header .close{ padding: 0;  margin: 0; float: right; position: absolute; right: 15px; }
.jjbg{ background:#bd895a; }
#jj .close span{ padding:0px 2px;  margin: 0; float: right; background-color: #ffffff;}
.tops{ top:15%;}
.incpbox{ width:100%; height: auto; float: left; padding: 5px 0px; }
.incp-t{ width:100%; height: auto; float: left; font-size: 16px; color:#000; line-height: 25px; }
.incp-t i{ color:red; float: left; padding-right: 10px; font-style: normal;}
.incp-x{ width:100%; height: auto; float: left}
.incp-x input{ width:100%; height: auto; border: 2px solid #242424; padding: 8px; font-size: 14px; color: #000;
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari 和 Chrome */
border-radius: 5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}
.incp-tx{ width:100%; height:100px; float:left;}
.incp-tx textarea{ width:100%; height: 100%; border: 2px solid #242424; padding:8px; font-size: 14px; color: #000; resize: none;
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari 和 Chrome */
border-radius: 5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}
.incpbtn{ width:100%; height: auto; float: left; padding: 20px 0px 10px;}
#ttcp{ width:120px; height:35px; background:#bd895a; display:inline-block; cursor:pointer; border:0; font-size:14px; color:#FFF; outline: none;
-moz-border-radius: 2px; /* Firefox */
-webkit-border-radius: 2px; /* Safari 和 Chrome */
border-radius: 2px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
transition:0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s;
}
#ttcp:hover{ background:#242424; color:#FFF; transition:0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s;}

#navBar {
position: fixed;
z-index: 100;
margin-top: -32px;
top: 50%;
opacity: 1;
right: 25px;
-webkit-transform: translate3d(0,0,0);
filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5;
display: flex; justify-content: center; align-items: center; flex-direction: column;
}
#navBar li {
cursor: pointer;
margin-bottom: 10px;
transition: all .7s ease;
border-radius: 50%;
text-align: center;
width: 8px;
height: 8px;
background: #ffffff;
}
#navBar li.active { background: #ffffff; position: relative; }
#navBar li.active::before{
content:"";
position:absolute;
left:-8px;
top:-8px;
width:24px;
height:24px;
background: url(../img/page/yy.svg) center center no-repeat;
background-size: cover;
}