@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Fjalla+One|Poppins:300,400,500,600,700,900&subset=latin-ext');

*{outline: none !important}
body{margin: 0; padding: 0;     font-family: "Microsoft YaHei", Arial, sans-serif; font-size: 13px; color: #131314; }
body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale;}
body{height: 100%;}
html{height: 100%;}



/* HTML TAGS */
a{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
img{ max-width: 100%;}
strong{ font-weight: 700;}
b{font-weight: 700;}



/* CUSTOM TAGS */
.pull-left{ float: left;}
.pull-right{ float: right;}
.overflow-hidden{overflow: hidden;}



/* SECTIONS */
main{ width: 100%; float: left; position: relative; z-index: 2; }
section{position: relative;}
aside{position: relative;}
footer{position: relative;}



/* CONTENT */
.content{ width: calc(100% - 120px); float: left; background: #fff; margin: 0 60px;}




/* ODOMETER */
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit{ padding:0;}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner{ left:0;}


.hd {position:absolute;bottom:20px;width: auto;}
.hd li{width:12px;height:12px;border-radius:12px;text-indent:-9999px;margin:0px 5px;background:#000;float:left;cursor:pointer;list-style-type:none;text-align:center;}
.hd li.on{background:#daa750;}

/* EQUALIZER */
.equalizer { width: 18px; height: 20px; cursor: pointer; position: relative;}
.equalizer span { background: #fff; width: 3px; height: 0px; bottom: 0; left: 0%; display: block; position: absolute; transition: height 0.2s linear;}
.equalizer span:nth-child(1) { margin-left: 5px;}
.equalizer span:nth-child(2) { margin-left: 10px;}
.equalizer span:nth-child(4) { margin-left: 15px;}
.equalizer span:nth-child(5) {margin-left: 20px;}
.equalizer.paused span { height: 3px !important;}


.prl {
    width: 100%;
    position: relative;
    float: left;
    padding: 8px 0px 0px 8px !important;
	overflow: hidden;}
.grid-item-double:nth-child(2){ padding: 0px 0px 0px 0px }
.grid-item-double:nth-child(3){ padding: 0px 9px 0px 2px }
.grid-item-double:nth-child(4){ padding: 1px 9px 0px 2px }
.grid-item-double:nth-child(5){ padding: 1px 0px 0px 0px }
.grid-item-double:nth-child(6){ padding: 0px 3px 0px 1px }
.grid-item-double:nth-child(7){ padding: 1px 3px 0px 1px }
.grid-item-double:nth-child(8){ padding: 0px 0px 0px 0px }
.grid-item-double:nth-child(9){ padding: 1px 3px 0px 0px }
.grid-item-double:nth-child(10){ padding: 0px 1px 0px 1px }
.grid-item-double:nth-child(11){ padding: 0px 1px 0px 1px }
.grid-item-double:nth-child(12){ padding: 1px 0px 0px 0px }
/* REVEAL EFFECT */
.reveal-effect { float: left; overflow: hidden; position: relative;}

.reveal-effect.animated {-webkit-transform: translate(0,0); transform: translate(0,0);}
.reveal-effect.animated img {-webkit-animation-name: show-img-1;animation-name: show-img-1;}
.reveal-effect:after {-webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.785,.135,.15,.86); animation-timing-function: cubic-bezier(.785,.135,.15,.86);}
.reveal-effect:after { content:"";  width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0;}
.reveal-effect:after{-webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.05,0); transform: scale(.05,0); -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.785,.135,.15,.86); animation-timing-function: cubic-bezier(.785,.135,.15,.86);}

a:hover {
	text-decoration: none;
	-webkit-transition: background-color .2s ease;
	-moz-transition: background-color .2s ease;
	-ms-transition: background-color .2s ease;
	-o-transition: background-color .2s ease;
	transition: background-color .2s ease
}
ul, ol, li {
    list-style: none; margin: 0; padding: 0;
}
::-webkit-scrollbar {
width:6px;
height:6px;
padding-right:10px
}
::-webkit-scrollbar-track {
border-radius:10px;
background-color:#eee
}
::-webkit-scrollbar-thumb {
border-radius:10px;
background-color:#000000
}
.imgbig {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	display: block !important
}
.imgbig:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1)
}
.imgbigout {
	display: block;
	overflow: hidden
}
.clear:after, .case-read-img p:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0
}
.clear, .case-read-img p {
	zoom: 1
}
.warp{width:100%;float:left; background: #fff;}
.warp2 {
	width: 95%;
	margin: 0 auto;
	position: relative;
	z-index: 10;

}

.warp2 ul li {
	width: 33.333333%;
	float: left;
	position: relative;
	overflow: hidden;
	display: block
}
.warp2 ul li img {
	width: 100%;
	height: auto;
	display: block
}
.warp2 ul li:hover img {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1)
}
.warp2 .case-summary {
	display: none;
	width: 90%;
	height: 90%;
	background: url(../images/black.png) repeat;
	top: 0;
	left: 0;
	position: absolute;
	padding: 5%
}
.warp2 .case-summary p {
	color: #f9f9f9;
	position: absolute;
	left: 0;
	font-size: 20px
}
.warp2 .case-summary span {
	font-size: 24px
}
.warp2 .case-summary .p1 {
	top: 0
}
.warp2 .case-summary .p2 {
	bottom: 0;
	font-size: 16px
}
.warp2 .case-more {
	display: block;
	width: 148px;
	height: 40px;
	margin: 100px auto;
	border: 2px solid #959595;
	text-align: center;
	line-height: 40px
}

/* PAGE TRANSITION */
.transition-overlay{ width:100%; height:100%; position:fixed; left:0; top:0; background:#F50C19; z-index:99999; opacity:0; visibility:hidden;}
.transition-overlay{ -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
.transition-overlay.show-me{ opacity:1; visibility:visible;}




/* PRELOADER */
.preloader{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 99; background:#e96c28; }
.preloader{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease;  }
.preloader *{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease;} 
.preloader img{ width: 80px; height: 80px; position: absolute; left: 50%; top:50%; margin-left: -40px; margin-top: -40px; z-index: 4; border-radius: 50%; padding: 10px; background: #fff;}




/* PAGE LOADED */
.page-loaded .preloader{ top: -100%; }
.page-loaded .preloader img{ opacity: 0; margin-top: -120px; }
.page-loaded .header{top: 0; opacity: 1; }
.page-loaded .slider{transform: translateY(0);  opacity: 1;}
.page-loaded .int-hero .inner h2{transform: translateY(0);  opacity: 1;}




/* TEXT ROTATER*/
.text-rotater{ width: 100%; float: left; height: 20px; position: absolute; left: 0; top: 50%; margin-top: 60px; font-size: 11px; font-weight: 600; color: #fff; text-transform:uppercase;}
.text-rotater li{ width: 100%; position: absolute; left: 0; top: 0; text-align: center; opacity: 0; animation: play 4.5s infinite; }
.text-rotater li:nth-child(2) { animation-delay: 1.5s; }
.text-rotater li:nth-child(3) { animation-delay: 3s; }




/* PERSPECTIVE HOVER */
 .perspective-box { position: relative; display:inline-block; width:100%; margin: 5px; cursor: pointer; transform: perspective(600px) translate3d(0, 0, 0);   backface-visiblity:none;  transform-style: preserve-3d;}	
.perspective-box img { width:100%; float: left;}
.perspective-box:hover { box-shadow: 0 66px 75px -10px rgba(0,0,0,.3);  transform-style: preserve-3d; z-index:20; }




/* SOCIAL BAR */
.social-bar{ width: 400px; position: fixed; left: 0; top: 50%; margin-top: 200px; z-index: 3; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; text-align: center;}
.social-bar li{display:inline-block; list-style: none; padding: 20px 0; margin: 0 10px; font-weight: 600;}
.social-bar li a{float: left; color: #fff; font-size: 11px;}
.social-bar li a:hover{text-decoration: none; color: #e96c28;}



	
/* HEADER */
.header{ width: 100%; position: absolute; left: 0; top: -100%; z-index: 5; padding: 30px 5%; opacity: 0;}
.header{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transform:all 1s ease; transition: all 1s ease; } 
.header .logo{float: left; margin-right: 20px;    width: 30%;}
.header .logo img{ width: 500px;}
.header .phone{float: left; color: #fff; line-height: 32px; font-family: "Microsoft YaHei", Arial, sans-serif;;}
.header .language{ float: right; margin-right: 30px; margin-bottom: 0;}
.header .language li{ float: left; list-style: none; margin: 0; margin-left: 20px; font-family: "Microsoft YaHei", Arial, sans-serif;;}
.header .language li a{float: left; color: #fff; line-height: 35px;}
.header .language li a:hover{text-decoration: none; opacity: 0.8;}
.header .hamburger{float: right; margin-top: -5px;}
.header .equalizer{float: right; margin-top: 5px; margin-right: 20px;}
.overflow-hidden .header .logo img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}




/* DROPDOWN */
.hamburger-navigation li:hover ul{display: block;}
.hamburger-navigation li ul{ width: 100%; float: left; margin: 0; padding: 0; text-align: center; display: none;}
.hamburger-navigation li ul li{width: auto; float: none; display: inline-block; padding: 0; margin: 0; position: relative;}
.hamburger-navigation li ul li:after{content: ""; width: 6px; height: 6px; background: #fff; position: absolute; right: -5px; top: 7px; border-radius: 50%;}
.hamburger-navigation li ul li:last-child:after{display: none;}
.hamburger-navigation li ul li a{font-size: 15px; padding: 0 10px;}




/* SLIDER */
.slider{ width: 100%; height: 100vh; float: left; position: relative; background: #fff;}
.slider{transform: translateY(250px); opacity: 0;}
.slider{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.slider .swiper-container{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
.slider .swiper-container{-webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transform:all 0.8s ease; transition: all 0.8s ease; } 
.slider .swiper-container .swiper-wrapper{ width: 100%; float: left; display: flex; flex-direction: row;}



/* SLIDER FRACTION */
.slider .swiper-container .swiper-pagination-fraction{ width: 100px; height: 50px; position: absolute; left: 100px; right: auto; top: auto; bottom: 30px; color: #000; font-size: 11px;}
.slider .swiper-container .swiper-pagination-fraction span:first-child{font-size: 56px; height: 50px; line-height: 50px; float: left; overflow: hidden; text-indent: -17px; margin-right: -25px; padding-top: 3px; font-weight: 500;}
.slider .swiper-container .swiper-pagination-fraction span:last-child{font-size: 14px;}
.slider .swiper-container .swiper-pagination-fraction span:before{content: "0";}



/* SLIDER BUTTONS */
.slider .swiper-container .swiper-button-prev{ width: 40px; height: 26px; float: left; left: 80px; top: 50%; z-index: 6; background: none; overflow: hidden; text-align: right;}
.slider .swiper-container .swiper-button-prev img{height: 26px;}
.slider .swiper-container .swiper-button-prev span{width: 100%; float: left; line-height: 26px; font-weight: 500; color: #000;}
.slider .swiper-container .swiper-button-prev:hover img{transform: translateY(-100%);}
.slider .swiper-container .swiper-button-prev:hover span{transform: translateY(-100%);}
.slider .swiper-container .swiper-button-prev *{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease; }
.slider .swiper-container .swiper-button-next{ width: 40px; height: 26px; float: left; right: 100px; left: auto; top: 50%; z-index: 6; background: none; overflow: hidden;}
.slider .swiper-container .swiper-button-line{ width: 40px; height: 2px; background: #000; position: absolute; right: 150px; top: 50%; z-index: 2; margin-top: -10px;}
.slider .swiper-container .swiper-button-next img{height: 26px;}
.slider .swiper-container .swiper-button-next span{width: 100%; float: left; line-height: 26px; font-weight: 500; color: #000;}
.slider .swiper-container .swiper-button-next:hover img{transform: translateY(-100%);}
.slider .swiper-container .swiper-button-next:hover span{transform: translateY(-100%);}
.slider .swiper-container .swiper-button-next *{ -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease; }




/* SLIDER CONTENT */
.slider .swiper-container .swiper-slide{ color: #fff; background-size:cover;}
.slider .swiper-container .swiper-slide:after{content: ""; width: 100%; height: 100px; position: absolute; left: 0; bottom: 0; z-index: 3; 

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#131314',GradientType=0 ); }
.slider .swiper-container .swiper-slide .inner { width: 100%; padding: 0 100px; position: relative; z-index: 4;}
.slider .swiper-container .swiper-slide .inner h5{ font-size: 12px; font-weight: 700;}
.slider .swiper-container .swiper-slide .inner h5:before{content: ""; width: 4px; height: 10px; float: left; background: #e96c28; margin-left: -10px; margin-top: 2px;}
.slider .swiper-container .swiper-slide .inner h2{ max-width: 50%; font-family: "Microsoft YaHei"; font-size: 6em; margin-bottom: 30px;}
.slider .swiper-container .swiper-slide .inner p{ max-width: 40%; line-height: 25px; margin-bottom: 30px;}




/* SLIDER LINKS */
.slider .swiper-container .swiper-slide .inner .link{ float: left; font-size: 12px; font-weight: 600; color: #fff; position: relative;}
.slider .swiper-container .swiper-slide .inner .link:hover{ text-decoration: none;}
.slider .swiper-container .swiper-slide .inner .link:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;}
.slider .swiper-container .swiper-slide .inner .link:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;}
.slider .swiper-container .swiper-slide .inner .link:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;}
.slider .swiper-container .swiper-slide .inner .link:hover:after { width: 100%; background: transparent; transition: all 0s ease;}
.slider .swiper-container .swiper-slide .inner .video-link {  width: 40px; height: 40px; float: left; border-radius: 50%; position: relative; transition:all .5s; margin-left: 30px; margin-top: -13px;}
.slider .swiper-container .swiper-slide .inner .video-link:after{content: ""; position: absolute; left: 50%; top: 50%; margin-left: -3px; margin-top: -7px; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #fff;}
.slider .swiper-container .swiper-slide .inner .video-link .video-play-circle { stroke-dasharray: 315; stroke-dashoffset: 315; transition: stroke-dashoffset .5s;}
.slider .swiper-container .swiper-slide .inner .video-link svg { transform: rotate(-90deg); transition: transform .3s; }
.slider .swiper-container .swiper-slide .inner .video-link:hover .video-play-circle { stroke-dashoffset: 0; } 
.slider .swiper-container .swiper-slide .inner .video-link .video-play-outline{width: 40px; height: 40px; position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,0.05);}




/* INT HERO */
.int-hero{ width: 100%; float: left; padding: 0 100px; padding-top: 170px; padding-bottom: 120px; background: #131314; color: #fff; position: relative;}
.int-hero .video-bg{width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
.int-hero .video-bg video{min-width: 100%; min-height: 100%; float: left; opacity: 0.1;}
.int-hero .video-bg:after{content: ""; width: 100%; height: 300px; position: absolute; left: 0; bottom: 0; z-index: 2; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(19,19,20,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(19,19,20,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(19,19,20,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#131314',GradientType=0 ); }
.int-hero .inner{ width: 100%; float: left; position: relative; z-index: 3;}
.int-hero .inner{-webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transform:all 0.7s ease; transition: all 0.7s ease; } 
.int-hero .inner h2{max-width: 60%; font-size: 5em; float: left;}
.int-hero .inner h2{transform: translateY(250px); opacity: 0;}
.int-hero .inner h2{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}



/* ABOUT STUDIO */
.about-studio{ width: 100%; float: left;}
.about-studio .hero-image{ width: 100%; margin-bottom: 120px; position: relative; z-index: 2;}
.about-studio .hero-image img{ width: 100%;}
.about-studio h5{ font-size: 3em; font-family: "Microsoft YaHei"; line-height: 1; margin-top: -5px; margin-bottom: 30px;}
.about-studio .lead{ margin-bottom: 40px; opacity: 1; line-height: 32px;}
.about-studio .lead u{position: relative; text-decoration: none;}
.about-studio .lead u:after{content: ""; width: 100%; height: 7px; background: #56e9b1; position: absolute; left: 0; bottom: 6px; mix-blend-mode: color;}
.about-studio p{line-height: 24px; opacity: 0.8;}
.about-studio p:last-child{max-width: 50%; margin-bottom: 0;}
.about-studio .link{ display: inline-block; color: #000; font-weight: 500; font-size: 12px; position: relative; z-index: 2; margin-bottom: 60px;}
.about-studio .link:hover{ text-decoration: none;}
.about-studio .link:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;}
.about-studio .link:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;}
.about-studio .link:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;}
.about-studio .link:hover:after { width: 100%; background: transparent; transition: all 0s ease;}



/* WORKS  */
.works { width: 100%; float: left; background: #fff;}
.works .grid-sizer{ width: 25%; float: left;}
.works .grid-item{ width: 25%; float: left;}
.works .grid-item-double{ width: 50%; float: left;}




/* WORKS FILTER */
.isotope-filter{ width: 100%; float: left; margin: 0; padding-bottom: 30px ; text-align: center; background: #131314;}
.isotope-filter li{ display: inline-block; margin: 0 15px; padding: 0; list-style: none;}
.isotope-filter li a{ float: left; font-size: 13px; font-weight: 500; color: #fff; opacity: 0.99; font-weight: 600; position: relative;}
.isotope-filter li a:hover{text-decoration: none;}
.isotope-filter li a:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;}
.isotope-filter li a:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;}
.isotope-filter li a:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;}
.isotope-filter li a:hover:after { width: 100%; background: transparent; transition: all 0s ease;}
.isotope-filter li a.current{ color: #56e9b1;}
.isotope-filter li a.current:before{display: none;}
.isotope-filter li a.current:after{display: none;}


/* WORKS FIGURE */
.works figure{ width: 100%; float: left; position: relative; margin: 0; overflow: hidden;}
.works figure *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.works figure a{ width: 100%; float: left; text-align: center;}
.works figure img{ width: 100%; float: left; opacity: 1; }
.works figure figcaption{ width: 100%; height: 100%; float: left; position: absolute; left: 0; bottom: 0; color: #fff; font-size: 13px; font-weight: 700; opacity: 0; padding: 0; }
.works figure figcaption .bg-color{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.7;}
.works figure figcaption .brand{ width: 100%; float: left; margin-bottom: 20px;}
.works figure figcaption .brand img{ width: auto !important; height: 50px; float: none;}
.works figure figcaption a{ width: 100%; height: 100%; float: left; color: #fff; padding: 30px; justify-content: center; display: flex; flex-direction: column; }
.works figure figcaption a:hover{color: #fff; text-decoration: none;}
.works figure figcaption h5{ width: 100%; float: left;transform: translateY(-10px); opacity: 0;     font-family:"Microsoft YaHei", Arial, sans-serif; font-size: 18px;}
.works figure figcaption small{ width: 100%; float: left; transform: translateY(10px); opacity: 0;    font-size: 15px;}
.works figure:hover figcaption{ opacity: 1;}
.works figure:hover img{transform: scale(1.05);}
.works figure:hover figcaption h5{transform: translateY(0); opacity: 1;}
.works figure:hover figcaption small{transform: translateY(0); opacity: 1;}


.btnDiv{ padding-top: 30px; margin: auto }
.btnDiv a{ float: left; display: block; width: 155px; height: 44px; 
	background: #e96c28; line-height: 44px; color: #fff; font-size: 14px; 
	font-weight: bold; text-align: center;}
.btnDiv a:hover{ text-decoration: none}
/*按钮动画--start*/
.ico_h {display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } 
.ico_h:before {pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } 
.ico_h:hover, .ico_h:focus, .ico_h:active {-webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-name: hover; animation-name: hover; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } 
.ico_h:hover:before, .ico_h:focus:before, .ico_h:active:before {opacity: .4; -webkit-transform: translateY(6px); transform: translateY(6px); -webkit-animation-name: hover-shadow; animation-name: hover-shadow; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; }
/*按钮动画--end*/
/* ICON FEATURES */
.icon-features{ width: 100%; float: left; padding-top: 80px; padding-bottom: 20px; text-align: center; background: #f8f8f8}
.icon-features img{ width: 130px;
    display: inline-block;
    margin-bottom: 20px;
    border-radius: 50%;}
.icon-features small{display: block; font-weight: 600; margin-bottom: 10px;}
.icon-features h3{ display: block; font-family: "Microsoft YaHei"; font-size: 24px; line-height: 32px; margin-bottom: 20px; }
.icon-features p{display: block; padding: 0 10%; margin-bottom: 10px; opacity: 0.8; font-size: 12px;}
.icon-features a{ display: inline-block; color: #000; font-weight: 500; font-size: 12px; position: relative; z-index: 2; margin-bottom: 60px;}
.icon-features a:hover{ text-decoration: none;color: #e96c28}
.icon-features a:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;}
.icon-features a:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;}





/* TEAM MEMBERS */
.team-members{ width: 100%; float: left; margin-top: 120px;}
.team-members *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.team-members .member{width: 20%; float: left; position: relative; z-index: 2; margin: 0; background: #e96c28; overflow: hidden;}
.team-members .member:nth-child(2){margin-top: 100px;}
.team-members .member:nth-child(4){margin-top: 100px;}
.team-members .member figcaption{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0;}
.team-members .member figcaption div{ width: 100%; height: 30px; float: left; position: absolute; left: 0; top: 50%; margin-top: -15px; text-align: center;}
.team-members .member figcaption div h3{font-size: 13px; font-weight: 700; color: #fff; margin: 0;}
.team-members .member figcaption div small{ display: block; color: #fff;}
.team-members .member:hover{ box-shadow: 0 66px 75px -10px rgba(0,0,0,.3);}
.team-members .member:hover img{opacity: 0.2; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);}
.team-members .member:hover figcaption{opacity: 1;}

.main_box{ margin:0 auto; width:85%; position:relative;}

.main_box_small{ margin:0 auto; width:85%; position:relative;}


#footer{width:100%; float: left;  background: #f0efef; }
#footer .main_box{ position:relative;}
#footer .up_box{background: url(../images/logo_fot.png) left center no-repeat; padding: 25px 0;}
#footer .content1{height:145px;  margin-left: 265px; padding-left: 75px;  position: relative;}
#footer .un_box { font-size: 14px; text-align: center;  color:#333333; height: 50px; line-height: 50px; background: #CCCCCC;  }
#footer .un_box a{color:#333333;}
#footer a:hover{ color:#000000; text-decoration: underline;}

#fot_contact{ width: 400px; }
#fot_contact h1 strong{ font-size: 20px; color: #e96c28; padding-right: 5px;}
#fot_contact h1{ color: #818181; font-size: 12px; margin-bottom: 15px; text-transform: uppercase;}
#fot_contact p{  color: #8c8b8b; line-height: 26px; font-size: 14px; padding-top: 25px;}
 
 

#fot_ewm{ position: absolute; right: 0; top: 6px;}
#fot_ewm img{ display: block; width: 98px; height: 98px;   border: 2px solid #ccc;
    text-align: center;
    margin-left: 10px;}
#fot_ewm span{ display: block; padding-top: 5px; text-align: center; font-size: 14px; color: #000;}

#fot_nav{ position: absolute; right: 200px;  top: 5px; padding: 25px 50px; margin-bottom: 35px; width: 600px;  } 
#fot_nav .box{ margin-right: -100px; }
#fot_nav a{ display:block; float: left; font-size:14px;  line-height: 40px; color:#8c8b8b;  width:25%;text-align: center}
#fot_nav a:hover{ color:#e96c28; text-decoration: none;}
 
 



/* CLIENTS */
.clients{width: 100%; float: left; padding: 120px 0;}
.clients *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.clients ul{ width: 100%; float: left; margin: 0; padding: 0;}
.clients ul li{ width: 20%; float: left; margin: 0; padding: 0; list-style: none; position: relative;}
.clients ul li figure{ width: 100%; float: left; margin: 0; padding: 0 10%;}
.clients ul li figure img{ width: 100%; float: left;}
.clients ul li:after{content: ""; width: 1px; height: 30px; background: #eee; position: absolute; right: 0; top: 30px;}
.clients ul li:last-child:after{display: none;}
.clients ul li:hover figure{opacity: 0.4;}




/* SIDE IMAGE CONTENT */
.side-image-content{width: 100%; float: left; display: flex; flex-direction: row; margin: 20px 0 100px 0;}
.side-image-content .inner {width: 50%; display: flex; justify-content: center; flex-direction: column; position: relative;}
.side-image-content .inner.bg1{ background: #e96c28;}
.side-image-content .inner .main-image{ width: 100%; float: left; margin: 0; margin-top: -100px; margin-bottom: 100px;}
.side-image-content .inner .sub-image{ width: 250px; position: absolute; right: -110px; bottom: -100px; z-index: 2;}
.side-image-content .inner img{ width: 100%; }
.side-image-content .inner .contenty{ width: 100%; float: left; padding: 0 15%; color: #fff;}
.side-image-content .inner .contenty h5{ font-size: 12px; font-weight: 700;}
.side-image-content .inner .contenty h5:before{content: ""; width: 4px; height: 10px; float: left; background: #fff; margin-left: -10px; margin-top: 2px;}
.side-image-content .inner .contenty h2{    font-family: "Microsoft YaHei", Arial, sans-serif; font-size: 24px; margin-bottom: 30px; text-indent: -5px;}
.side-image-content .inner .contenty p{ line-height: 25px;}
.side-image-content .inner .contenty a{height: 35px; line-height: 33px; display: inline-block; border: 1px solid #fff; padding: 0 20px; font-size: 14px;  color: #fff; margin-top: 20px; overflow: hidden;}
.side-image-content .inner .contenty .award-list{ width: 100%; float: left; margin: 0; padding: 0; list-style: none;}
.side-image-content .inner .contenty .award-list li{ width: 100%; float: left; padding:5px 0;}
.side-image-content .inner .contenty .award-list li span{ float: left; margin-right: 6px; line-height: 23px;}
.side-image-content .inner .contenty .award-list li small{ width: 18px; height: 18px; line-height: 20px; display: inline-block; border-radius: 50%; background: #fff; color: #e96c28; text-align: center; font-weight: 600; font-size: 11px; margin-bottom: 5px;}
.side-image-content .inner .contenty a *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.side-image-content .inner .contenty a span { position: relative; display: inline-block;}
.side-image-content .inner .contenty a span:before {position: absolute;top: 100%; content: attr(data-hover); }
.side-image-content .inner .contenty a span:before {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.side-image-content .inner .contenty a:hover span{-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);}




/* AWARDS */
.awards{ width: 100%; float: left; padding: 60px 0 100px 0;}
.awards h5{ font-size: 12px; font-weight: 700; margin-top: 20px;}
.awards h5:before{content: ""; width: 4px; height: 10px; float: left; background: #e96c28; margin-left: -10px; margin-top: 2px;}
.awards h2{  text-align: center;     padding-bottom: 20px;   font-family: "Microsoft YaHei", Arial, sans-serif; font-size: 26px; text-indent: -5px;}
.awards figure{ width: 100%; float: left;  padding: 10px ; position: relative;}
.awards figure img{ width: 100%; float: left; opacity:1; -webkit-filter: grayscale(1);
filter:gray;
filter: grayscale(1);}
.awards .award{ width: 100%; float: left;   margin-bottom: 20px;}
.awards .odometer{ display: block; text-align: center; font-family: "Microsoft YaHei"; font-size: 30px;}


.index-banner{ position:relative;}
.scroll_banner ul{ position:absolute; left:0; top:0; width:100%; height:100%;}
.index-banner li{ position:absolute; left:0; top:0; width:100%; height:100%; display:none}
.scroll_banner ul li img{height: 100vh; }


/* JOURNAL */
.journal{ width: 100%; float: left; padding-bottom: 40px;}
.journal *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.journal .post{ width: 100%; float: left; position: relative; margin-bottom: 80px;}
.journal .post.detail{ width: 100%; float: left;}
.journal .post.detail figure{margin-bottom: 50px;}
.journal .post.detail .post-content{ padding: 0 15%;}
.journal .post.detail .post-content .author{ width: 100%; float: left; position: static; margin-bottom: 20px;}
.journal .post.detail .post-content .author img{ width: 60px; border-radius: 50%; float: left; margin-right: 10px;  opacity: 1;}
.journal .post.detail .post-content .author small{line-height: 60px; opacity: 1;}
.journal .post.detail .post-content .lead{line-height: 30px;}
.journal .post.detail .post-content small{opacity: 0.4;}
.journal .post.detail .post-content h3{ width: 100%; float: left; padding-right: 0; font-size: 3em;}
.journal .post.detail .post-content blockquote{ width: 100%; float: left; border-left: 3px solid #eee; padding: 20px 0; padding-left: 30px;}
.journal .post.detail .post-content blockquote p{margin-bottom: 10px;}
.journal .post.detail .post-content blockquote h5{margin-bottom: 0; font-family: "Playfair Display";}
.journal .post.detail .post-content p{ width: 100%; float: left; padding-right: 0;}
.journal .post.highlight{width: 100%; float: left; position: relative; margin-bottom: 120px;}
.journal .post.highlight figure{ width: 100%; float: left; margin: 0; }
.journal .post.highlight figure img{ opacity: 0.4;}
.journal .post.highlight .post-content{position: absolute; left: 0; bottom: 0; padding: 50px; padding-right: 40%; color: #fff;}
.journal .post.highlight .post-content h3{font-size: 3em;}
.journal .post.highlight .post-content .author{position: static;}
.journal .post.highlight .post-content .author img{opacity: 1;}
.journal .post.highlight .post-content .link{ font-weight: 700;}
.journal .post.highlight .post-content p{opacity: 1;}
.journal .post.highlight .post-content a{color: #fff;}
.journal .post.highlight .post-content a:hover{color: #fff;}
.journal .post.highlight:hover figure img{opacity: 0.6;}
.journal .post figure{ width: 100%; float: left; margin-bottom: 20px; position:relative; background: #131314; overflow: hidden;}
.journal .post figure img{ width: 100%; float: left; opacity: 0.6;}
.journal .post figure .author{ width: 100%; line-height: 50px; position: absolute; left: 30px; bottom: 30px; color: #fff;}
.journal .post figure .author img{ width: 50px; border-radius: 50%; float: left; margin-right: 10px; border:3px solid rgba(255,255,255,0.2); opacity: 1;}
.journal .post .post-content{ width: 100%; float: left;}
.journal .post .post-content small{display: block; margin-bottom: 10px;}
.journal .post .post-content small a{color: #131314;}
.journal .post .post-content h3{ display: block; font-family:"Microsoft YaHei", Arial, sans-serif; margin-bottom: 20px; padding-right: 15%;}
.journal .post .post-content h3 a{color: #131314;}
.journal .post .post-content h3 a:hover{text-decoration: none; color: #e96c28;}
.journal .post .post-content p{line-height: 24px; opacity: 0.6; padding-right: 15%; margin-bottom: 30px;}
.journal .post .post-content .link{ display: inline-block; color: #000; font-weight: 500; font-size: 12px; position: relative; z-index: 2;}
.journal .post .post-content .link:hover{ text-decoration: none;}
.journal .post .post-content .link:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;}
.journal .post .post-content .link:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;}
.journal .post .post-content .link:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;}
.journal .post .post-content .link:hover:after { width: 100%; background: transparent; transition: all 0s ease;}
.journal .post:hover figure img{opacity: 0.8; -moz-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05);}



/* CONTACT */
.contact{ width: 100%; float: left; padding-top: 120px; padding-bottom: 90px;}
.contact .titles{ width: 100%; float: left; text-align: center; margin-bottom: 40px; padding: 0 25%;}
.contact .titles h5{ font-size: 12px; font-weight: 700; text-transform: uppercase;}
.contact .titles h2{ font-family: "Microsoft YaHei", Arial, sans-serif; font-size: 4em; margin-bottom: 30px;}
.contact .address{ width: 100%; float: left; text-align: center; padding: 0 10%; margin-bottom: 50px;}
.contact .address h4{ display: block; font-family: "Microsoft YaHei", Arial, sans-serif; font-size: 24px; line-height: 32px; margin-bottom: 20px; }
.contact .address p{display: block;}
.contact .address p a{font-weight: 600; color: #131314;}
.contact .address a{display: inline-block; font-weight: 600; color: #131314;}
.contact .address a:hover{text-decoration: none;}
.contact .address a svg{ width: 20px; display: inline-block; margin-bottom: -8px; }
.contact form{ margin-top: 50px;}
.contact form .form-group{margin-bottom: 30px;}
.contact form label{ width: 100%; float: left; margin: 0; position: relative; z-index: 2;}
.contact form label span{float: left; background: #fff; font-size: 12px; margin-left: 14px; padding: 0 6px; font-weight: 600; margin-bottom: -10px;}
.contact form input[type="text"]{ width: 100%; height: 62px; border: 1px solid #ccc; padding: 0 20px;}
.contact form textarea{ width: 100%; height: 140px; float: left; line-height: 26px; border: 1px solid #ccc; padding: 20px;}
.contact form button[type="submit"]{height: 60px; line-height: 58px; display: inline-block; border:none; padding: 0 40px; font-size: 11px; font-weight: 700; color: #fff; background: #131314; overflow: hidden;}
.contact .alert{ width:100%; float:left;}
.contact #success, .contact #error {display:none}
.contact #success, .contact #error { float:left;}
.contact #contact label.error{ width:100%; color:#e96c28; margin-top: 10px; text-align: center;}
.contact #contact input.error  {width:100%; border:1px solid #e96c28;}
.contact #contact textarea.error{width:100%; border:1px solid #e96c28;}
.map{ width: 70%; height: 420px; display: inline-block; margin:0 15%;  background: #e96c28; display: none;}




/* FOOTER */
.footer-spacing{ width: 100%; float: left;}
.footer{ width: calc(100% - 120px); position: fixed; left: 0; bottom: 0; margin: 0 60px; padding-top: 50px; background:url(../images/anchor-line-bg.png) center no-repeat #131314; background-size: auto 150%; z-index: 1; text-align: center; color: #fff;}
.footer img{width: 32px; margin-bottom: 20px; display: inline-block;}
.footer .social-media{ width: 100%; float: left; display: none; text-align: center; margin-bottom: 20px; padding: 0;}
.footer .social-media li{display: inline-block; margin: 0 10px; list-style: none;}
.footer .social-media li a{ float: left; font-size: 12px; font-weight: 600; color: #fff;}
.footer .social-media li a:hover{text-decoration: none; color: #e96c28;}}
.footer h4{font-weight: 300; letter-spacing: -1px; font-size: 2em;}
.footer h2{ font-family: "Fjalla One"; text-transform: uppercase; font-size: 4em; margin-bottom: 30px; padding: 0 10%;}
.footer .btn-contact{height: 60px; line-height: 58px; display: inline-block; border: 1px solid rgba(255,255,255,0.2); padding: 0 40px; font-size: 11px; font-weight: 700; color: #fff; margin-bottom: 30px; overflow: hidden;}
.footer .btn-contact *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.footer .btn-contact span { position: relative; display: inline-block;}
.footer .btn-contact span:before {position: absolute;top: 100%; content: attr(data-hover); }
.footer .btn-contact span:before {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.footer .btn-contact:hover span{-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);}
.footer .footer-bar{ width: 100%; float: left; border-top:1px solid rgba(255,255,255,0.05); margin-top: 50px; padding: 20px 0;}
.footer .footer-bar span{font-size: 12px;}
.footer .footer-bar span a{color: #fff; font-weight: 600;}




/* SCROLL DOWN */
.scroll-down{width: 1px; height: 70px; position: absolute; left: 50%; bottom: 30px; z-index:2;}
.scroll-down span {display: block; position: relative; padding-top: 79px; text-align:center;}
.scroll-down span::before { -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;  -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;}





/* RESPONSIVE MEDIUM  FIXES */
@media only screen and (max-width: 1199px), only screen and (max-device-width: 1199px) {
	.header{padding: 30px 60px;}
	.slider .swiper-container .swiper-slide .inner h2{font-size: 4em;}
	.slider .swiper-container .swiper-slide .inner{padding: 0 60px;}
	.slider .swiper-container .swiper-pagination-fraction{left: 60px;}
	.icon-features p{padding: 0;}
	.icon-features h3{font-size: 20px;}
	.side-image-content .inner .contenty h2{font-size: 2em; text-indent: 0;}
	.awards h2{font-size: 3em; text-indent: 0;}
}	




/* RESPONSIVE TABLET FIXES */
@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
	.slider .swiper-container .swiper-slide .inner h2{max-width: 70%;}
	.slider .swiper-container .swiper-slide .inner p{max-width: 70%;}
	.slider .swiper-container .swiper-button-prev{ right: 160px;}
	.slider .swiper-container .swiper-button-line{right: 110px;}
	.slider .swiper-container .swiper-button-next{ right: 60px;}
	.works .grid-item{width: 50%;}
	.works .grid-item-double{width: 100%;}
	.int-hero .video-bg{display: none;}
	.side-image-content{display: block;}
	.side-image-content .inner{width: 100%; float: left; display: block;}
	.side-image-content .inner .contenty{padding: 100px 15%;}
	.contact form input[type="text"]{border-radius: 0 !important; box-shadow: none !important;}
	.contact form textarea{border-radius: 0 !important; box-shadow: none !important;}
	
}




/* RESPONSIVE MOBILE FIXES */
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
	.header{padding: 30px;}
	.header .language{display: none;}
	.social-bar{display: none;}
	.slider .swiper-container .swiper-slide .inner{padding: 0 30px;}
	.slider .swiper-container .swiper-slide .inner h2{max-width: 100%; font-size: 3.5em;}
	.slider .swiper-container .swiper-slide .inner p{max-width: 100%;}
	.slider .swiper-container .swiper-button-prev{ display: none;}
	.slider .swiper-container .swiper-button-line{ display: none;}
	.slider .swiper-container .swiper-button-next{ display: none;}
	.slider .swiper-container .swiper-pagination-fraction{display: none;}
	.scroll-down{display: none;}
	.int-hero{padding-left: 30px; padding-right: 30px;}
	.int-hero .inner h2{ max-width: 100%; font-size: 3.5em;}
	.content{ width: calc(100% - 30px); margin: 0 15px;}
	.about-studio .hero-image{overflow: hidden; margin-bottom: 50px;}
	.about-studio .hero-image img{ width: 150%; max-width: inherit;}
	.about-studio h5{font-size: 2em;}
	.about-studio p:last-child{max-width: 100%; margin-bottom: 0;}
	.team-members .member{width: 50%;}
	.works .grid-item{width: 100%;}
	.works .grid-item-double{width: 100%;}
	.icon-features a{margin-bottom: 50px;}
	.side-image-content{margin-bottom: 0;}
	.side-image-content .inner .contenty{ padding: 60px 30px; text-align: center;}
	.side-image-content .inner .contenty h5:before{display: none;}
	.side-image-content .inner .contenty h2{font-size: 3em;}
	.side-image-content .inner .contenty .award-list li span{float: none;}
	.side-image-content .inner .main-image{margin-bottom: 0;}
	.side-image-content .inner .sub-image{ width: 100%; float: left; position: static; margin: 0;}
	.awards{text-align: center;}
	.awards h5:before{display: none;}
	.awards .award{ width: 60%; margin: 0 20%; margin-top: -1px;}
	.clients ul li{width: 50%;}
	.clients ul li:after{display: none;}
	.journal .post.highlight{margin-bottom: 50px;}
	.journal .post figure{overflow: hidden;}
	.journal .post figure img{ width: 150%; max-width: inherit;}
	.journal .post.highlight .post-content{padding: 15px; padding-right: 0;}
	.journal .post.highlight .post-content h3{font-size: 2em;}
	.journal .post.highlight .post-content p{display: none;}
	.contact .titles{padding: 0;}
	.footer{width: calc(100% - 30px); margin: 0 15px;}
	.footer h2{font-size: 3em; padding: 0;}
	.footer .social-media{display: block;}
	.footer .footer-bar span{ width: 100%; text-align: center;}
}




.h_langue {
	display: inline-block;
	vertical-align: middle;
    height: 26px;
    color: #1d1d1d;
    text-align: right;
    line-height: 24px;
    position: relative;
    z-index: 10; float: right;
}

.h_langue .tips {
    width: auto;
    float: right;
}

.h_langue .list-btn {
    width:150px;
    height: 50px;

    float:left;
    text-align: left;
    text-indent: 13px;
    position: relative;
}

.list-btn .t {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    padding-left: 48px;
    background: url('../images/icon-map.jpg') no-repeat left;
    cursor: pointer;
}

.list-btn .t:hover{
	color:#e96c28; text-decoration: none;
}

.list-btn .lg {
    width: 100%;
    height: 0px;
    overflow: hidden;
    line-height: 30px;
    background: rgba(255,255,255,0.5);

    position: absolute;
    left: 0px;
    top: 42px; margin-left: 50px;
	transition:height 2s;
-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:height 2s;   
 transition: 1s;
	
	



}
.list-btn .lg {
	font-size: 0;
	text-align: right
}
.list-btn .lg>li {
	position: relative;width:100%; float: left;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 37px;
	height: 37px;
	overflow: hidden; text-align: center;
}
.list-btn .lg>li:hover>a {
	color: #333
}
.list-btn .lg>li:hover .sub-menu {
	visibility: visible;
	opacity: 1;
	-moz-transition: all .3s ease .5s;
	-o-transition: all .3s ease .5s;
	-webkit-transition: all .3s ease;
	-webkit-transition-delay: .5s;
	transition: all .3s ease .5s
}
.list-btn .lg>li.current>a {
	color: #333
}
.list-btn .lg>li.current>a:before {
	visibility: visible;
	opacity: 1
}
.list-btn .lg>li>a {

}
.list-btn .lg>li>a:hover:before {
	visibility: visible;
	opacity: 1
}
.list-btn .lg>li>a:before {
	content: '';
	position: absolute;
	left: -18px;
	top: 12px;
	width: 5px;
	height: 5px;
	background-color: #392526;
	visibility: hidden;
	opacity: 0;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	-webkit-transition: all .3s;
	transition: all .3s
}
.list-btn .lg li a{
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
}
.list-btn .lg li:hover a{
	margin-top: -37px;
}
.list-btn .lg a{
    display: block;
    width: 100%;
    color:#333; text-decoration: none;
    height: auto;
    cursor: pointer;
    line-height: 36px;
    text-align: center;
    text-indent: 0px;
  
	
  
}

.list-btn:hover .lg {
	height:300px;  }

.list-btn:hover:after {
    border-left: 5px solid #fff; 
}

	
	.header-top-info .info-list li {
      display: inline-block;
      font-size: 16px;
      color: #fff;
      padding-top: 3px;
        padding-left: 2%;
    position: relative;
    padding-right: 2%; }
.header-top-info .info-list li:first-child {
        padding-left: 0; }
.header-top-info .info-list li .fa-phone {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg); }
 .header-top-info .info-list li i {
        padding-right: 5px;
        font-size: 14px; }
 .header-top-info .info-list li a {
        color: #000;
        font-size: 16px;font-weight: 600;
        padding-bottom: 12px;
	     padding-right:5px;
        display: inline-block;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s; }
.header-top-info .info-list li a img {
          width: 25px;
          height: 25px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          margin-right: 2px; }
.header-top-info .info-list li a i {
          padding-right: 3px; }
.header-top-info .info-list li a:hover {
          color: #e96c28; }
.header-top-info .info-list li .lang-drop-menu {
        position: absolute;z-index: 100;
        top: 60px;
        right: 0;
        width: 150px;
        background-color: #fff;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        opacity: 0;
        visibility: hidden;
        z-index: 1;
        -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
        -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
        box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s; }
.header-top-info .info-list li .lang-drop-menu li {
          display: block;
          text-align: left; z-index: 100;}
.header-top-info .info-list li .lang-drop-menu li a {
            display: block;
            padding-bottom: 15px;
            padding-right: 15px;
            padding-left: 15px;
            color: #4fa9b5;
            text-transform: capitalize;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            font-weight: 400; }
.header-top-info .info-list li .lang-drop-menu li a:hover {
              color: #ff7e00; }
.header-top-info .info-list li .lang-drop-menu li a img {
              margin-right: 4px; }
.header-top-info .info-list li .lang-drop-menu li a:first-child {
              padding-top: 15px; }
.header-top-info .info-list li .lang-drop-menu:after {
          position: absolute;
          content: '';
          left: 50%;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-bottom: 8px solid #fff;
          bottom: 100%;
          -webkit-transform: translateX(-50%);
          -moz-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          -o-transform: translateX(-50%);
          transform: translateX(-50%); }
.header-top-info .info-list li:hover .lang-drop-menu {
        top: 40px;
        opacity: 1;
        visibility: visible;  }
 .header-login-info {     padding: 5px 0px 0px 0px;
    width: 68%;
    float: left;}	

@media only screen and (min-width: 1200px) and (max-width: 1600px){
		
	.header-top-info .info-list li {
      display: inline-block;
      font-size: 14px;
      color: #fff;
      padding-top: 3px;
        padding-left: 1%;
    position: relative;
    padding-right: 1%; }
	.header-top-info .info-list li a {font-size: 14px;}
}



.grb__social.footer-social li {
	margin: 0 2px;
}
.grb__social.footer-social li:first-child {
	margin-left: 0;
}
.grb__social.footer-social li a {
	width: 30px;
	height: 30px;
	color: #ffffff;
	background: #e96c28;
	line-height: 30px;
	border-radius: 3px;
}
.grb__social.footer-social-2 {
	margin-top: 45px;
}
.grb__social.footer-social-2 li {
	margin: 0 5px;
}
.grb__social.footer-social-2 li:first-child {
	margin-left: 0;
}
.grb__social.footer-social-2 li a {
	width: 35px;
	height: 35px;
	color: #ffffff;
	background: #8500d1;
	line-height: 35px;
	border-radius: 50%;
}
.grb__social.footer-social-2 li a:hover {
	color: #8500d1;
	background: #ffffff;
}
.grb__social ul li {
	display: inline-block;
	margin: 0 5px;
}
.grb__social ul li a {
	color: #e96c28;
	font-size: 18px;
	height: 35px;
	width: 35px;
	display: inline-block;
	background: #ffffff;
	text-align: center;
	line-height: 35px;
	border-radius: 50%;
	box-shadow: 0 7px 20px 0 rgba(22, 35, 145, 0.1);
}
.grb__social ul li a.fb {
	color: #e96c28;
}
.grb__social ul li a.twt {
	color: #01b6e5;
}
.grb__social ul li a.insta {
	color: #d90b51;
}
.grb__social ul li a.pint {
	color: #e20000;
}
.grb__social ul li a:hover {
	color: #040021;
	background: #FFC400;
}
.grb__social.f-right ul li:last-child {
	margin-right: 0;
}
.grb__social.st-2 {
	position: relative;
	padding-right: 17px;
}
.grb__social.st-2 ul li a {
	border: 1px solid #ffffff;
	color: #ffffff;
	background: none;
}
.grb__social.st-2 ul li a:hover {
	color: #040021;
	border-color: #ffffff;
	background: #ffffff;
}

.lh-overview{ background-position:center; background-repeat:no-repeat; background-size:cover;background-attachment:fixed;}
.lh-overview-a{width:90%; height:100%;}
.lh-overview-top{height:14%; background:#f1f1f1; display:flex; align-items:center;  width:26vw; padding:0 50px; padding:0 2.6vw;}
.lh-overview-top img{width:auto;}
.lh-overview-footer{height:100%; position:relative; overflow:hidden; padding:10vh 0 10vh 10vw;}
.lh-overviewl-cont{height:100%; width:100%;}
.lh-overviewl-cont .title{float:left; width:12.760416666666666vw; height:100%; border:1px solid #dad9d9; padding:2.6vw; text-transform:uppercase; position:relative;}
.lh-overviewl-cont .title:after{content:''; display:block; width:1px; height:150%; background:#dad9d9; position:absolute; right:-1px; bottom:0;}
.lh-overviewl-cont .title div{ display:flex; justify-content:center; line-height:50px; position:relative;}
.lh-overviewl-cont .title span{display:inline-block;writing-mode: vertical-lr;-ms-writing-mode: vertical-lr;writing-mode: tb-lr; transform:rotate(180deg); font-size:46px; font-family:'Century Gothic'; color:#999; position:relative;}
.lh-overviewl-cont .title span:first-child{transform:rotate(180deg) translateY(115px);}
.lh-overviewl-cont .title span:last-child{font-family: "CenturyGothicbold";}
.lh-overviewl-cont .info{float:left; max-width:34vw; width:100%;  }
.lh-overviewl-cont .info .name{font-size:30px; font-weight:bold;}
.lh-overviewl-cont .info .nname{font-size:22px; color:#e96c28; line-height:36px; margin:10px 0;}
.lh-overviewl-cont .info .ccont{ color:#666666;}
.lh-power-item{margin-top:50px;}
.lh-power-item li{text-align:left; color:#666666; width:33.3%; float:left;}
.lh-power-item li h2{font-size:36px; color:#333333;font-family: "CenturyGothicbold"; position:relative; margin-bottom:15px;}
.lh-power-item li h2 b{position:relative;}
.lh-power-item li h2 b:after{content:''; display:block; width:10px; height:2px; background:#B1B1B1; position:absolute; left:50%; bottom:-6px; margin-left:-5px;}
.lh-power-item li h2 span{font-size:14px; font-weight:bold; font-family:'Arial'; position:relative; top:-15px; left:8px;}
.lh-power-item li h3{font-size: 14px;}
.lh-overviewl-cont .lh-entrance{float:right; height:100%;}
.lh-entrance li{height:25%; background:#51566A;}
.lh-entrance li:first-child{background:#e96c28;}
.lh-entrance li:nth-child(2){background:#f89159;}
.lh-entrance li:nth-child(3){background:#f7a67a;}
.lh-entrance li:nth-child(4){background:#f8bfa0;}
.lh-entrance li a{color:#fff; padding:23px; position:relative;display:flex; align-items: center; height:100%; width:100%;}
.lh-entrance li a h2{font-size:16px; line-height:18px; font-weight:bold; transition:ease .25s;}
.lh-entrance li a h3{  font-size:14px; opacity:.7; line-height:16px; margin-top:8px; transition:ease .25s;}
.lh-entrance li span{position:absolute; right:23px; top:23px; width:14px; height:14px; transition:ease .45s; transform:translateY(-100%); opacity:0; transition:ease .45s;}
.lh-entrance li span:before{content:''; display:block; width:100%; height:1px; background:#fff; position:absolute; left:0; top:50%; margin-top:-1px;}
.lh-entrance li span:after{content:''; display:block; width:1px; height:100%; background:#fff; position:absolute; left:50%; top:0; margin-left:0px;}
.lh-entrance li a:hover span{transform:translateY(0); opacity:1;}
.lh-entrance li a:hover h2,.lh-entrance li a:hover h3{transform:translateY(-8px);}
.lh-overview-page{position:absolute; right:0; bottom:0; width:9.6vw; border:1px solid #817E7B; border-right:none; height:24.8vw; color:#fff;writing-mode: vertical-lr;-ms-writing-mode: vertical-lr;writing-mode: tb-lr;}
.lh-overview-page a{color:#fff; font-size:14px;font-family:'Arial'; text-transform:uppercase; width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center;}
.lh-overview-page a span{display:inline-block; transform:rotate(180deg); letter-spacing:5px;}
.lh-overview-page a em{margin-top:4vw; font-size:32px;}



.ind_sec1 {
    float: left;
    width: 100%;

}
.ind1_i {
  width: 100%;
}
.ind1_i .swiper-slide {
  display: block;
}

.ind1P {
  position: static;
  margin-top: 20px;
}
.ind1P .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ccc;
  margin: 0 6px;
}
.ind1_i a {}
.ind1_i a .img {
  overflow: hidden;    border: 0.5px solid #f4f4f4;
}
.ind1_i a .img img {
  width: 100%;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.ind1_i a:hover .img img {
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}
.ind1_i a .text {
  text-align: center;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 50px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  background: #ffffff;
  position: relative;
}
.ind1_i a:hover .text {
  height: 50px;
  margin-top: -10px;
  background: #e96c28;
}
.ind1_i a .text h6 {
  font-family: "Microsoft YaHei", Helvetica, Arial;
  font-weight: bold;
  font-size: 14px;
  color: #e96c28;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.ind1_i a .text h4 {
  font-family: "Microsoft YaHei", Helvetica, Arial;
  font-size: 16px;
  color: #e96c28;

  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.ind1_i a .text h5 {
  font-size: 18px;
  color: #000;
  margin-top: 18px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.ind1_i a:hover .text * {
  color: #fff;
}
/*.ind1_i a .text::before {
  content: '';
  height: 0;
  width: 1px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.ind1_i a:hover .text::before {
  height: 56px;
}*/

.ind_sec1 .ind1Prev,
.ind_sec1 .ind1Next {
  cursor: pointer;
  width: 40px;
  height: 60px;
  background-color: #c3c3c3;
  position: absolute;
  z-index: 9;
  top: 0;
  bottom: 0;
  margin: auto;
   display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: translateY(-25px);
  -moz-transform: translateY(-25px);
  -ms-transform: translateY(-25px);
  -o-transform: translateY(-25px);
  transform: translateY(-25px);
}
.ind_sec1 .ind1Prev {
  left: 0;
}
.ind_sec1 .ind1Prev img {
  -webkit-transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -ms-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}
.ind_sec1 .ind1Next {
  right: 0;
}
.ind_sec1 .ind1Prev:hover,
.ind_sec1 .ind1Next:hover {
  background: #e96c28;
}




.p-case-list-index {
	position: relative;
	overflow: hidden; }
.p-case-list-index .areas {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch; }
.p-case-list-index .areas .item {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	position: relative;
	z-index: 1;
	height: 85vh;
	min-height: 538px;
}
.p-case-list-index .areas .item a {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: flex-end; }
.p-case-list-index .areas .item a:before {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 100%;
	top: 0;
	left: 0;
	border-left: solid 1px rgba(245, 245, 245, 0.3);
}
.p-case-list-index .areas .item:first-child a:before {
	content: none;
}
.p-case-list-index .areas .item.disp .txt-wrap .lead {
	opacity: 1;
	height: auto; }
.p-case-list-index .areas .item .txt-wrap {
	position: relative;
	margin: 0 auto;
	width: 100%;
	z-index: 10;
	color: #fff;
	padding: 0 6%;   
	margin: 8px;
   }
.p-case-list-index .areas .item .txt-wrap .ttl {
	position: relative;
	color: #fff;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.2;

	
}
.p-case-list-index .areas .item .txt-wrap .ttl span {
	color: #fff;
}
.p-case-list-index .areas .item .txt-wrap .ttl:before {
	
}
.p-case-list-index .areas .item .txt-wrap .ttl .em {
	display: block;
	font-size: 20px;
	position: relative;  font-weight: 600; margin-bottom: 5%

}
.p-case-list-index .areas .item .txt-wrap .ttl span:last-child {
	text-transform: uppercase;
	line-height:40px;
	
	display: inline-block;
}
.p-case-list-index .areas .item .txt-wrap .lead {
	overflow: hidden;
	font-size: 24px;
	font-weight: bold;
	opacity: 0;
	width: 100%;
	height: 0;
	line-height: 1.5; }
.p-case-list-index .areas .item .txt-wrap .lead span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	width: 100%;
	font-size: 12px;
	line-height: 28px;
	color: #fff;
	letter-spacing: 1px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis; margin-bottom: 14.66vw;
}
.p-case-list-index .areas .item .txt-wrap .more {
	display: inline-block;
	margin-top: 36px;
	width: 43px;
	height: 43px;
	background: url(../images/ico_plus.svg) no-repeat 0 0;
	background-size: 40px 40px;
	font-weight: bold;
	font-size: 14px; }
.p-case-list-index .areas .item .txt-wrap .more span {
	-webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.25, 1.01);
	transition: all 300ms cubic-bezier(0.4, 0, 0.25, 1.01);
	display: inline-block;
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	vertical-align: middle;
	color: #fff }
.p-case-list-index .areas .item .img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;    height: 100%;
	 }
.p-case-list-index .areas .item .img:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	z-index: 9;
}
.p-case-list-index .areas .item .img img {
	width: 100vw;
	max-width: 100vw;
	height: auto;
	-webkit-filter: grayscale(50%);
	filter: grayscale(50%);
}
.p-case-list-index .areas .item.item--itokin .img img {
	-webkit-transform: translateX(-32.7%);
	transform: translateX(-32.7%); }
.p-case-list-index .areas .item.item--mizuno .img img {
	-webkit-transform: translateX(-48.9%);
	transform: translateX(-48.9%); }
.p-case-list-index .areas .item.item--enfold .img img {
	-webkit-transform: translateX(-56.4%);
	transform: translateX(-56.4%); }
.p-case-list-index.active .imgs li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; }
.p-case-list-index .imgs {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	letter-spacing: -0.4em;
	white-space: nowrap; }
.p-case-list-index .imgs img {
	width: 100vw;
	height: auto; }
.p-case-list-index .imgs li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-transition: -webkit-transform 30000ms cubic-bezier(0.165, 0.84, 0.44, 1) 5s;
	transition: -webkit-transform 30000ms cubic-bezier(0.165, 0.84, 0.44, 1) 5s;
	transition: transform 30000ms cubic-bezier(0.165, 0.84, 0.44, 1) 5s;
	transition: transform 30000ms cubic-bezier(0.165, 0.84, 0.44, 1) 5s, -webkit-transform 30000ms cubic-bezier(0.165, 0.84, 0.44, 1) 5s; }
.p-case-list-index .imgs li > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: rgba(0, 0, 0, .08);
	-webkit-transition: -webkit-transform 30000ms cubic-bezier(0.165, 0.84, 0.44, 1) 5s;
	transition: -webkit-transform 30000ms cubic-bezier(0.165, 0.84, 0.44, 1) 5s;
}
.p-case-list-index .imgs li.is-hover {
	-webkit-transition: -webkit-transform 38000ms cubic-bezier(0.165, 0.84, 0.44, 1) 3s;
	transition: -webkit-transform 38000ms cubic-bezier(0.165, 0.84, 0.44, 1) 3s;
	transition: transform 38000ms cubic-bezier(0.165, 0.84, 0.44, 1) 3s;
	transition: transform 38000ms cubic-bezier(0.165, 0.84, 0.44, 1) 3s, -webkit-transform 38000ms cubic-bezier(0.165, 0.84, 0.44, 1) 3s;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.img--itokin0 {  
    transition: transform 5s ease 0s, opacity 5s ease 0s;
    -moz-transition: -moz-transform 5s ease 0s, opacity 5s ease 0s;
    -webkit-transition: -webkit-transform 5s ease 0s, opacity 5s ease 0s;
    -o-transition: -o-transform 5s ease 0s, opacity 5s ease 0s;
    -ms-transition: -ms-transform 5s ease 0s, opacity 5s ease 0s;}
.img--itokin1 {  
    transition: transform 5s ease 0s, opacity 5s ease 0s;
    -moz-transition: -moz-transform 5s ease 0s, opacity 5s ease 0s;
    -webkit-transition: -webkit-transform 5s ease 0s, opacity 5s ease 0s;
    -o-transition: -o-transform 5s ease 0s, opacity 5s ease 0s;
    -ms-transition: -ms-transform 5s ease 0s, opacity 5s ease 0s;}
.img--itokin2 {  
    transition: transform 5s ease 0s, opacity 5s ease 0s;
    -moz-transition: -moz-transform 5s ease 0s, opacity 5s ease 0s;
    -webkit-transition: -webkit-transform 5s ease 0s, opacity 5s ease 0s;
    -o-transition: -o-transform 5s ease 0s, opacity 5s ease 0s;
    -ms-transition: -ms-transform 5s ease 0s, opacity 5s ease 0s;}
.img--itokin3 {  
    transition: transform 5s ease 0s, opacity 5s ease 0s;
    -moz-transition: -moz-transform 5s ease 0s, opacity 5s ease 0s;
    -webkit-transition: -webkit-transform 5s ease 0s, opacity 5s ease 0s;
    -o-transition: -o-transform 5s ease 0s, opacity 5s ease 0s;
    -ms-transition: -ms-transform 5s ease 0s, opacity 5s ease 0s;}
.img--itokin4 {  
    transition: transform 5s ease 0s, opacity 5s ease 0s;
    -moz-transition: -moz-transform 5s ease 0s, opacity 5s ease 0s;
    -webkit-transition: -webkit-transform 5s ease 0s, opacity 5s ease 0s;
    -o-transition: -o-transform 5s ease 0s, opacity 5s ease 0s;
    -ms-transition: -ms-transform 5s ease 0s, opacity 5s ease 0s;}

.img--itokin5 {  
    transition: transform 5s ease 0s, opacity 5s ease 0s;
    -moz-transition: -moz-transform 5s ease 0s, opacity 5s ease 0s;
    -webkit-transition: -webkit-transform 5s ease 0s, opacity 5s ease 0s;
    -o-transition: -o-transform 5s ease 0s, opacity 5s ease 0s;
    -ms-transition: -ms-transform 5s ease 0s, opacity 5s ease 0s;}

.img--itokin6 {  
    transition: transform 5s ease 0s, opacity 5s ease 0s;
    -moz-transition: -moz-transform 5s ease 0s, opacity 5s ease 0s;
    -webkit-transition: -webkit-transform 5s ease 0s, opacity 5s ease 0s;
    -o-transition: -o-transform 5s ease 0s, opacity 5s ease 0s;
    -ms-transition: -ms-transform 5s ease 0s, opacity 5s ease 0s;}

.img--itokin7 {  
    transition: transform 5s ease 0s, opacity 5s ease 0s;
    -moz-transition: -moz-transform 5s ease 0s, opacity 5s ease 0s;
    -webkit-transition: -webkit-transform 5s ease 0s, opacity 5s ease 0s;
    -o-transition: -o-transform 5s ease 0s, opacity 5s ease 0s;
    -ms-transition: -ms-transform 5s ease 0s, opacity 5s ease 0s;}

.img--itokin8 {  
    transition: transform 5s ease 0s, opacity 5s ease 0s;
    -moz-transition: -moz-transform 5s ease 0s, opacity 5s ease 0s;
    -webkit-transition: -webkit-transform 5s ease 0s, opacity 5s ease 0s;
    -o-transition: -o-transform 5s ease 0s, opacity 5s ease 0s;
    -ms-transition: -ms-transform 5s ease 0s, opacity 5s ease 0s;}

.img--itokin9 {  
    transition: transform 5s ease 0s, opacity 5s ease 0s;
    -moz-transition: -moz-transform 5s ease 0s, opacity 5s ease 0s;
    -webkit-transition: -webkit-transform 5s ease 0s, opacity 5s ease 0s;
    -o-transition: -o-transform 5s ease 0s, opacity 5s ease 0s;
    -ms-transition: -ms-transform 5s ease 0s, opacity 5s ease 0s;}


.p-case-list-index .imgs li.is-hover div {
	opacity: 1;
}
.p-case-list-index .imgs li span {
	display: block; }


.z-container {width:85%;height:auto;clear: both;margin: 0 auto;}
.index_contact{ background: #fff; padding: 200px 0;  }
.index_contact .z-container{ position: relative;padding-bottom: 80px;}
.about_fl h3{ font-size: 36px; font-weight: bold;}
.about_fl .desc{ line-height: 28px; margin: 40px 0;}
.about_btnwarp a{ display: inline-block; margin-right: 20px; width: 180px; box-sizing: border-box; height: 50px; line-height: 46px; border:2px solid #e96c28; border-radius: 25px; text-align: center; font-size: 16px; color: #e96c28;}
.about_btnwarp a .iconfont{ font-size: 24px; vertical-align: middle; display: inline-block; margin-right: 5px;}
.about_btnwarp a.btn2,.about_btnwarp a:hover{ background: #e96c28; color: #fff;}
.about_map{ position: absolute; width:70%; right: -60px; top: 50%; transform: translateY(-50%);}
.about_map img{ display: block; width: 100%;}
.z_contact_box{ width: 500px; position: absolute; right: 28%; top: 15%; box-shadow: 0 0 20px rgba(0,0,0,.25);}
.z_contact_box .imgbox{ width: 100%; height: 180px;}
.z_contact_box .infobox{ padding: 20px; background: #fff; padding-bottom: 30px; box-sizing: border-box;}
.z_contact_box .tit{ font-size: 18px; font-weight: bold; margin-bottom: 10px;}
.z_contact_box .tit .iconfont{font-size: 20px; color: #e96c28; display: inline-block; margin-right: 10px;}
.z_contact_box p{  align-items: flex-start; line-height: 24px;}
.z_contact_box p a{color:#131314; }
.z_contact_box p a:hover{color:#e96c28; }
.z_contact_box p span{ flex-shrink: 0;}
.index_hz{ padding: 100px 0; padding-bottom: 80px;}
.hz_tit{ text-align: center; font-size: 36px; font-weight: bold; margin-bottom: 40px;}
.hz_swiper{ position: relative;}
.hz_swiper li .imgbox{ width: 100%; text-align: center; height: 100px; padding: 20px; box-sizing: border-box; display: flex;display: -ms-flexbox; align-items: center; justify-content: center;}
.hz_swiper li .imgbox img{ display: block; max-height: 100%; max-width: 100%;  -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;}
.hz_swiper li .imgbox:hover img{ -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    
    filter: grayscale(0%);
	
    filter: gray;}
.hz_btn.iconfont{ display: block; outline:none; transition: ease .4s; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border:1px solid #aaaaaa; border-radius: 50%; text-align: center; line-height: 54px; font-size: 24px; color: #aaa;}
.hz_btn.icon-arr_l{ left: -66px;}
.hz_btn.icon-arr_r{ right: -66px;}
.imgbg{ width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; transition: ease 1s; }
.hz_btn.iconfont:hover{ background: #e96c28; color: #fff; border-color: #e96c28;}


.z_other_banner{ width: 100%; height: 28.59375vw; position: relative; overflow: hidden;  left: 0; top: 0;}
.z_other_banner .imgbg{animation: zoombig 3s linear forwards;}
.z_other_banner .text{ width: 100%; position: absolute; left: 0; bottom: 10.6875vw; color: #fff; padding: 0 8.33333vw; box-sizing: border-box; z-index: 1; transition: ease 1s; }
@keyframes zoombig {
	0%{transform: scale(1.2,1.2);} 

	100%{transform: scale(1,1);}
}
.z_other_banner .text .en{font-size: 2vw;font-family: 'Raleway'; display: inline-block; font-weight: bold; line-height:3.125vw;text-transform: uppercase; transition: ease 1s;background-position 1.5s ease;  background: linear-gradient(to right, #e96c28, #e96c28 50%, #e96c28 50%); background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%; text-decoration: none;
    overflow: hidden;
    opacity: 0; transition-delay: .3s;}
.z_other_banner .text h3{font-size: 1.30208vw;display: inline-block;font-weight: bold;color: #FFFFFF;text-transform: uppercase; transition: ease 1s;background-position 1.5s ease;  background: linear-gradient(to right, #fff, #fff 50%, #e96c28 50%); background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%; text-decoration: none;
    overflow: hidden;
    opacity: 0; transition-delay: .3s;}
.z_other_banner .text .line{ width: 0px;height: 2px;background: #FFFFFF; display: block; margin: 15px 0; transition: ease 2s;}
.z_other_banner .text.animated .en,.z_other_banner .text.animated h3{opacity: 1;
    transform: translateX(0);
    background-position: 0 100%;}
.z_other_banner .text.animated .line{ width: 150px;}
.z_other_pgae{ margin-top:33.59375vw ; background: #fff; position: relative; z-index: 2; width: 100%;}

.n_title{height: 60px;border-bottom: #e5e5e5 1px solid;padding: 0;position:relative;background: #fff;}
.n_title .w1560{position:relative}
.n_title .w1200{position:relative}

.n_nav{position:relative;overflow: hidden;}
.n_nav a{border-right: 1px solid #eeeeee;display:inline-block;height: 60px;font-size: 16px;float:left;line-height: 75px;color: #404040;text-align: center;box-sizing: border-box;position: relative;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius:3px;margin-right: 0;    padding: 0px 20px;}
.n_nav a strong{display:block;color: #323232;position:relative;z-index:4;height: 60px;line-height: 60px;transition: 0.6s ease-in-out;font-weight: normal;}
.n_nav .on,.n_nav a:hover{color: #fff;}
.n_nav a:before{content:"";width:0;height: 100%;position: absolute;bottom: 0;left: 0;background: #e96c28;transition:0.6s ease-in-out;}
.n_nav .on:before,.n_nav a:hover:before{width: 100%;}
.n_nav .on strong,.n_nav a:hover strong{height: 60px;line-height: 60px;color: #fff;}
.layui-col-md4{ height:75px}
.position{position:absolute;line-height: 60px;right: 0;bottom: 0;color: #adadad;padding-left: 22px;font-size: 12px;background: url(../images/home_icon.png) left 23px no-repeat;}
.position span, .position a, .position i{font-size: 13px;color: #7b7b7d;-moz-transition: all 0.36s ease-in-out;-webkit-transition: all 0.36s ease-in-out;-o-transition: all 0.36s ease-in-out;-ms-transition: all 0.36s ease-in-out;transition: all 0.36s ease-in-out;}
.position i svg{width: 6px;height: 6px;fill: #7b7b7d;margin: -3px 10px 0;vertical-align: middle;display: inline-block;}

.position i{margin: 0;font-style:normal;overflow: hidden;}
.position i img{vertical-align:middle;margin-top: -2px;}
.position em{font-size: 14px;color: #e96c28;font-style: normal;}
.position a:hover{color: #e96c28;}
.n_main_box .main_box{width: 1200px;height: 80px;position:relative;margin: 0 auto;}
.w1200 {
	width: 86%;
	margin: 0 auto
}



.z-container {width:85%;height:auto;clear: both;margin: 0 auto;}

.z_other_tit{ text-align: center;}
.z_other_tit h3{        font-size: 2.08333vw; font-weight: bold;color: #000; text-transform: uppercase; margin-bottom: 10px;}
.z_other_tit h4{font-size: 1.30208vw;font-weight: bold;color: #7B7B7B;}

.ar_article{font-size:14px;color:#7d7c7c;line-height:30px; margin-bottom:30px;}
.ar_article p{font-size: 14px;color: #606060;line-height:30px;text-align: justify;}
.ar_article strong{ font-weight:bold;}
.ar_article img{ max-width:100%; text-align: center}

.about1{padding: 40px 0px 0px 0px;margin: auto;text-align: center;}



.btnDiv{ padding-top: 30px; margin-left: 46%;color: #fff;}
.btnDiv a{ float: left; display: block; width: 155px; height: 44px; background: #e96c28; line-height: 44px; color: #fff; font-size: 14px; font-weight: bold; text-align: center;}
.btnDiv a:hover{ color: #fff;}



/*按钮动画--start*/
.ico_h {display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } 
.ico_h:before {pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } 
.ico_h:hover, .ico_h:focus, .ico_h:active {-webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-name: hover; animation-name: hover; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } 
.ico_h:hover:before, .ico_h:focus:before, .ico_h:active:before {opacity: .4; -webkit-transform: translateY(6px); transform: translateY(6px); -webkit-animation-name: hover-shadow; animation-name: hover-shadow; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; }
/*按钮动画--end*/


.tz-gallery {
	padding: 1px 0px;
	box-sizing: border-box;
}
.tz-gallery .thumbnail {
	padding: 0;
	border: none;
}
.tz-gallery img {
	border-radius: 2px;
	max-width: 100%;border: 1px solid #dadce2;
}
.tz-gallery .caption {
	padding: 10px;
	text-align: center;line-height: 40px;
}
.tz-gallery .caption h3 {
	font-size: 14px;
	font-weight: bold;
	margin-top: 0;line-height: 40px;
}
.tz-gallery .caption p {
	font-size: 12px;
	color: #7b7d7d;
	margin: 0;
}


.pages{font-size:12px;line-height:22px;text-align:center;clear:both; width:100%;}
.pages a{text-decoration:none;color:#3c3c3c;background:#fff;border:1px solid #cccccc;padding:8px;margin-right:3px;cursor:pointer}
.pages .red{background:#e96c28 !important; color:#fff; border:0; padding:8px;}
.pages a.active{background:#000;border:1px solid #cccccc;color:#fff}
.pages a:hover{text-decoration:none;color:#fff;background:#e96c28;border:1px solid #cccccc}




.news{
	padding: 0% 0 5%;width:100%; float:left;
}

.nzi{
	margin-bottom: 4%;
	font-size: 20px;
	text-align: center;
	color: #333;
}

.nzi h2{
	position: relative;
	margin-bottom: 1%;
	font-size: 30px;

}

.nzi span{
	color: #eb9600;
	
}

.news .single-blog span{
	float: right; font-size: 14px;
}

.single-blog {
  border: 1px solid #efefef;
  overflow: hidden;
  /*padding-bottom: 15px;*/
  transition: all .5s ease 0s;
	margin-bottom: 10px;
}
.single-blog:hover {
  box-shadow: 0 8px 16px 1px #ccc;
	margin-top:-10px;
}
.blo-image-and-date { position: relative;overflow: hidden;}
.blo-image-and-date i{ position:absolute; left:0; top:0; width:100%; height:100%; background: url(../images/icon_23.png) rgba(0,0,0,0.4) no-repeat center;z-index: 100}
.blo-image-and-date img{
	transition: all 1s;
	-moz-transition: all 1s;
-ms-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;max-width: 100%;
}
.blo-image-and-date:hover img{
	transform: scale(1.1);
	-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
.blo-image-and-date > a {
  
  color: #000;
  font-size: 16px;
  left: 50%;transform: translate(-50%,0);
  padding: 6px 0;
  
  text-align: center;
  text-transform: uppercase;
  bottom: 0;
  width: 80%;
	margin: 0 auto;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.blog-info {
  padding: 11px 15px 31px;
}

.blog-text {
  padding: 20px;
}
.blog-text h3{
  color: #1b1b1b;
  font-size: 14px;
	margin-bottom: 10px;
}
.blog-text > p {
  color: #666;
font-size: 14px;
line-height: 26px;

}
.blog-text > a {
 /* border-bottom: 1px solid #333;*/

 /* float: right;*/
  color: #000;
  font-size: 15px;
  line-height: 40px;
}
.single-blog:hover .blog-text a{
  color: #000;
	text-decoration: none;

}
.news-zi p{
	font-size: 14px;
	line-height: 26px;

}


#n_lianxi{ }
#n_lianxi .box1{ padding-bottom:50px;}
#n_lianxi .txt{ width:50%; float:right; padding-top:38px;}
#n_lianxi .txt h5 span{ font-size:18px; color:#ff4200; font-family:arial; text-transform:uppercase;}
#n_lianxi .txt h5 p{ font-size:32px; color:#3b3b3b; font-weight:bold; margin-bottom:8px;}
#n_lianxi .txt i{ display:block; width:31px; height:2px; background:#931019; margin-top:15px; margin-bottom:30px;}
#n_lianxi ul{ margin-top:18px;}
#n_lianxi ul li{ font-size:16px; color:#3b3b3b; }
#n_lianxi ul li p{font-size:16px; color:#3b3b3b; line-height:35px;}
#n_lianxi ul li p a{color:#3b3b3b;}
#n_lianxi ul li p a:hover{color:#e96c28;}
#n_lianxi ul li i{ color:#868686;}
#n_lianxi .map { border: 1px solid #e5e7eb; overflow: hidden;}
#n_lianxi .btn{ width:140px; height:40px; display:block; line-height:40px; text-align:center; background:#ee1c26; color:#fff; margin-top:40px;}
#n_lianxi .btn:before{ content: url(../images/n_lianxi_ico.png); position:relative; top:4px; margin-right:8px;}
#n_lianxi .ewm{ margin-top:36px; }
#n_lianxi .ewm div{ height:129px;}
#n_lianxi .ewm img{ width:129px; height:129px; float:left; border:1px solid #eaeaea;}
#n_lianxi .ewm .txt2{ display:table; padding-left:12px;}
#n_lianxi .ewm .txt2 p{  height:129px; display:table-cell; vertical-align:middle; text-align:left; font-size:12px; color:#b2b2b2; line-height:24px;}

.fl {float: left;}
.fr {float: right;}




.w1200_1 {
	width: 95%;
	margin: 0 auto
}
.lan{  border-radius: 20px;    margin: 10px;  float:left; line-height:40px; height:40px;background:#f4f4f4;  color:#898989; margin-left:0px; margin-right:8px; text-align:center;}
.lan a{  border-radius: 20px;   color:#898989; font-size:14px; display:block; height:40px; margin-bottom:8px; background:#f4f4f4; padding:0 12px;}

.lan:hover a { background:#e96c28; height:40px; color:#fff;}
.lan a.hover { background:#e96c28; height:40px; color:#fff;}

.n_sanji{ padding: 50px 0px 20px 0px; }
.n_sanji ul{ text-align:center; margin:0 -5px; font-size:0}
.n_sanji ul li{ display:inline-block; padding:0 5px;}
.n_sanji ul li font{display:inline-block; background: #eeeff1;     padding: 0px 15px;height: 3.125rem;line-height: 3.0625rem;border-radius:1.5rem;text-align:center;overflow:hidden;position:relative; cursor:pointer}
.n_sanji ul li font:before{content:""; position:absolute; top:0; right:0; bottom:0; left:0; border:#d7d8db 2px solid; border-radius:1.5rem; transition:0.6s}
.n_sanji ul li font:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:0; transition:0.6s; z-index:0}
.n_sanji ul li font span{position:relative;font-size: 0.85rem;color:#404040;z-index:1;transition:0.6s;}

.n_sanji ul li.on font:after, .n_sanji ul li:hover font:after{ height:100%; background:#e96c28}
.n_sanji ul li.on font span, .n_sanji ul li:hover font span{color:#fff;}



.pro-wrap .list-wrap {
    position: relative;
    z-index: 1;
}

    .pro-wrap .list-wrap li {
        list-style: none;
        width: 24%;
        background-color: #fff;
        float: left;
        border: 1px solid #f2f2f2;
		padding-bottom: 20px;
        margin-bottom: 10px;
        margin-left: 10px;
        position: relative;
        -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }

        .pro-wrap .list-wrap li:hover {
      
            box-shadow: 0 15px 30px #e0e0e0;
        }

    .pro-wrap .list-wrap ul {
        width: 100%;
        float: left;padding-bottom: 30px;
    }

    .pro-wrap .list-wrap .img {
        display: block;
        margin: 0 auto;
    }

        .pro-wrap .list-wrap .img img {
            width: 100%;
        }

    .pro-wrap .list-wrap .imgli {
        width: 100%;
        text-align: center;
        padding-top: 11px;
    }

        .pro-wrap .list-wrap .imgli span {
            display: inline-block;
            width: 34px;
            height: 34px;
            border: 1px solid #dbdbdb;
            margin: 0 4px;
            cursor: pointer;
        }

        .pro-wrap .list-wrap .imgli img {
            width: 34px;
            height: 34px;
        }

        .pro-wrap .list-wrap .imgli span.active {
            width: 32px;
            height: 32px;
            border: 2px solid #ce0000;
        }

            .pro-wrap .list-wrap .imgli span.active img {
                width: 32px;
                height: 32px;
            }

    .pro-wrap .list-wrap .name {
        line-height: 20px;
        font-size: 14px;
        font-weight: bold;
        margin-top: 20px;
        text-align: center;
    }

        .pro-wrap .list-wrap .name a {
            color: #000;
            display: inline-block;
        }

    .pro-wrap .list-wrap .font {
        display: block;
        text-align: center;
        line-height: 29px;
        color: #999;
        font-size: 12px;
    }

    .pro-wrap .list-wrap .page {
        padding-bottom: 40px;
        text-align: center;
        padding-top: 10px;
    }

a.more1 {
    display: block;
    margin: auto;
    width: 100px;
    height: 30px;
    background: #e96c28;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
}

    a.more1:hover {
        background: #000000;
        color: #fff;
    }

.item-pic__box {
	   position: relative;
    width: 45%;
    float: left;
    margin-left: 0%;
  
}
.small-box {
	    position: relative;
    width:100%;
    
    margin-bottom: 5px;
   
}
.small-box img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;border: 1px solid #fff;
}
.small-box > .hover {
	display: none;
	left: 0;top: 0;
	position: absolute;
	border: 1px solid #fff;
	background-color: #000;
	filter: alpha(opacity=15);
	-moz-opacity: .15;
	opacity: .15;
	cursor: move;
}
.thumbnail-box {
	position: relative;
	width: 100%;
}
.thumbnail-box .btn {
	position: absolute;
	top: 0;bottom: 0;
	width: 26px;
	border: 0;
	background: #eee url(../images/thumb-but.gif) no-repeat;
}
.thumbnail-box .btn:active {background: #b31e22 url(../images/thumb-but_active.gif) no-repeat}
.thumbnail-box .btn-prev {left: 0}
.thumbnail-box .btn-next {right: 0;background-position: center right}
.thumbnail-box .btn-next:active {background: #b31e22 url(../images/thumb-but_active.gif) no-repeat center right}
.thumbnail-box > .thumb-list {
	overflow: hidden;
	width: 300px;
	margin: 0 auto;
}
.thumbnail-box .wrapper {
	font-size: 0;
	margin-bottom: 0;
	white-space: nowrap;
}
.thumbnail-box > .thumb-list .item {
	width: 56px;
	height: 56px;
	margin: 0 2px;
	cursor: pointer;
	display: inline-block;
	border: 2px solid #fff;
}

.thumbnail-box > .thumb-list .item img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;
}
.thumbnail-box > .thumb-list .item.active {

}
.big-box {
	z-index: 100;
	display: none;
	overflow: hidden;
	position: absolute;
	left:110%;top: 0;
	border: 1px solid #ccc;
	width: 420px;height: 420px;
}
.item-info__box {
	width: 50%;
	float: right;
	padding: 20px 40px 20px 40px;
}
.item-title {line-height: 2em; }
.item-title > .name {
	font-size: 25px;
	max-height: 50px;
	line-height: 50px;
}
.item-price {
	padding: 10px;
	margin-bottom: 20px;
}
.item-price .price-panel {
	height: 40px;
	line-height: 40px;
}
.item-price .price-panel .price{
	font-size: 24px;
	color: #d00;
}
.vip-price-panel {
	height: 32px;
	padding: 0 10px;
	line-height: 32px;
	margin-top: 4px;
	position: relative;
}
.vip-price-panel:hover, .vip-price-panel.active {
	color: #fff;
	background-color: #b31e22;
}
.all-price__box {
	color: #fff;
	display: none;
	overflow: hidden;
	position: absolute;
	left: 0;right: 0;top: 32px;
	background-color: #b31e22;
	line-height: 1.571428;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #fff;
	border-left: 10px solid #b31e22;
	border-right: 10px solid #b31e22;
}
.text-justify {
	text-align: justify;
	text-align-last: justify;
}
.item-ind-panel {
	width: 100%;
	border: 1px dotted #ccc;
}
.item-ind-item {
	float: left;
	padding: 12px;
	text-align: center;
	width: 33.33333333%;
}
.item-ind-item a {text-decoration: none;}
.ind-count {font-weight: bold;}

.detailproduct{ width:100%; overflow:hidden; zoom:1;}


.detail_pro{ padding-top:10px; padding-bottom:0px;}

.detail_pro_center{ width:100%; margin:0 auto; background:#fff; margin-bottom:20px; }

.detail_pro_center h4{ line-height:40px; padding-left:15px; font-size:14px; background:#e96c28;border-radius: 4px; color:#FFF; font-weight:normal;   text-align: left;}

.detail_pro_img{ background: #fff;padding:10px 0; text-align:left; padding-left:15px; font-size:14px;} 
.newsdetail2{width:100%; float:right; text-align:right;}
.newsdetail2 a{ color: #666;}


.z_pro_head{ padding: 10.4vw 5.2vw 6.25vw 10.4vw; position: relative;}
.z_pro_head::before{ content: ""; display: block;}
.z_pro_head .infobox{ float: left;width: 20vw;}
.z_pro_head .titbar{ color: #666; font-size: 1.25vw;}
.z_pro_head .titbar h3{font-size: 2vw; color: #333;}
.z_pro_head .csbar{ margin: 4vw 0;}
.z_pro_head .csbar p:first-child{ border-top: 1px solid #4b4b4b;}
.z_pro_head .csbar p{ line-height: 2.66vw; border-bottom: 1px solid #4b4b4b; font-size: 16px;}
.z_pro_head .shopbar  a{ display: inline-block; margin-right: 20px; padding-top: 10px; transition: ease 1s; width: 86px;height: 86px;background: #F5F6FA;border-radius: 50%; text-align: center; position: relative;}
.z_pro_head .shopbar .z_tel{ position: absolute; white-space: nowrap; left: 96px; top: 50%;  opacity: 0; transition: ease 1s; font-size: 20px; color: #004499;}
.z_pro_head .shopbar a:hover .z_tel{ opacity: 1;transform: translateY(-50%);}
.z_pro_head .shopbar .icon{ width: 30px; height: 30px;  overflow: hidden; margin: 0 auto; margin-bottom: 5px;}
.z_pro_head .shopbar .icon img{ display: block; transition: ease 1s;}
.z_pro_head .shopbar a:hover .icon img{ transform: translateY(-30px);}
.z_pro_head .shopbar a:hover{ background: #e96c28;}
.z_pro_head .shopbar a:hover h3{ color: #fff;}
.z_pro_head .proswiper{ width: 55.20833vw; overflow: hidden; float: right; position: relative;}
.z_pro_head .proswiper li{ height: 32.29166vw; display: flex; align-items: center; justify-content: center;}
.z_pro_head .proswiper li img{ max-height: 100%; transition: ease 1.5s; display: block; max-width:80%;    border-radius: 50%;}
.z_pro_head .proswiper li.swiper-slide-active img{ transform: scale(1,1);}
.z_pro_head .proswiper .prohd{ position: absolute; right: 0; bottom: 0; z-index: 2;}
.proswiper .prohd span{ display: inline-block; transition: ease 1s;  margin-left:8px; cursor: pointer; width: 12px;height: 12px;background: #FFFFFF;border-radius: 50%; transition: ease 1s;}
.proswiper .prohd span.swiper-pagination-bullet-active{ background: #e96c28;}




.z_proxq_padd{ padding:0 10.4vw; box-sizing: border-box;}

.z_proxq_child{ margin-top: 3.2vw; }
.z_proxq_child.active{ display: block;}
.z_proxq_child  .z_proxq_tit{font-size: 18px; font-weight: bold; border-left: 4px solid #e96c28; height: 18px; line-height: 18px; padding-left:8px; margin-bottom: 35px;}
.z_prodesc_box h3{ text-align: center; font-size: 2.5vw; }
.z_prodesc_box .desc{ width: 658px;font-size: 14px;  font-weight: 400;color: #666666;line-height: 24px; margin: 0 auto; text-align: center;margin-top: 2.2vw;}
.z_prodesc_box .conbox{margin-top: 3.2vw;color: #666666;line-height: 24px; }
.z_prodesc_box .conbox img{ display: block; margin: 0 auto; max-width: 100%;}
.proxqcon{line-height: 28px;}

.about-title {
	font-size: 30px;
	color: #333;
	text-align: center;font-family: syzt;    font-style: normal;
    font-weight: 400;padding-bottom: 20px;
}.inner-wrap1{
    width: 86%;
    margin: 0 auto;
  
}
.inner-wrap1 .about1{line-height: 30px; font-size: 14px;    padding-top: 0px;}
.inner-wrap1 .about1 .xiangmu img{width:100%}

.index-more1 {
	font-family: "Microsoft Yahei";
	text-transform: uppercase;
	display: inline-block;
width: 100px;
    height: 35px;
    line-height: 35px;
    color: #666;
    text-align: center;
    font-size: 12px;
    transition: all 0.5s;
    background: #fff;
    border: 1px solid #ccc;

}
.index-more1:hover {
	cursor: pointer;
	letter-spacing: 2px;
}
.index-more1.border {
	color: #999;
	border: 1px solid #999;
	background: transparent;
}
.btn3{ margin-top:10px; text-align: right  }
.btn3 a{ display:inline-block; height:35px; line-height:35px; background:#fff; color:#000;    border: 1px solid #e4eaec;  width:100PX; font-size:12px; border-radius: 3px; text-align: center;}
.btn3 a:hover{ background:#e96c28; color:#fff;}



.sx {
	width: 100%;
	    float: left;
	padding: 20px 0;
	text-align: left;
	border-top: 1px dashed #ddd;
	color: #333;
	margin-top: 10px;
	font-family: Verdana, microsoft Yahei, Helvetica, sans-serif
}
.sx p {
	clear: both;
	line-height: 30px;
	font-weight: bold;
}
.sx a {
	padding-left: 0px;
	font-weight: normal
}
.sx a:link {
	color: #999;
	text-decoration: none;
}
.sx a:visited {
	color: #999;
	text-decoration: none;
}
.sx a:hover {
	color: #e96c28;
	text-decoration: underline;
}
.sx a:active {
	color: #e96c28;
	text-decoration: underline;
}
.sx span {
	float: right;
	padding-right: 20px;
}
.sx span a {
	padding-left: 20px;
	color: #999 !important;
	text-transform: uppercase;
	font-family: Verdana, microsoft Yahei, Helvetica, sans-serif
}

 .pro-down-btn {
    float: left;
    margin-right: 16px;
    width: 170px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    background: #e96c28;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer; margin-top: 30px;   color: #fff;
}
.pro-down-btn i{ margin-right: 15px;}
.qtw-show-btn a { color: #fff; }
.qtw-show-btn a:hover{ color: #000; }