@CHARSET "UTF-8";
@font-face{font-family:'Helvetica-Bold';src:url('../fonts/Helvetica Bold.eot');src:local('☺'), url('../fonts/Helvetica Bold.woff') format('woff'), url('../fonts/Helvetica Bold.svg') format('svg');font-weight:400;font-style:normal;}
@font-face{font-family:'Helvetica';src:url('../fonts/Helvetica.eot');src:local('☺'), url('../fonts/Helvetica.woff') format('woff'), url('../fonts/Helvetica.svg') format('svg');font-weight:400;font-style:normal;}
@font-face{font-family:'Helvetica Oblique';src:url('../fonts/Helvetica Oblique.eot');src:local('☺'), url('../fonts/Helvetica Oblique.woff') format('woff'), url('../fonts/Helvetica Oblique.svg') format('svg');font-weight:400;font-style:normal;}
@font-face{font-family:'helvetica-light';src:url('../fonts/helvetica-light.eot');src:local('☺'), url('../fonts/helvetica-light.woff') format('woff'), url('../fonts/helvetica-light.svg') format('svg');font-weight:400;font-style:normal;}
@font-face{font-family:'HelveticaNeue-Thin';src:url('../fonts/HelveticaNeue-Thin.eot');src:local('☺'), url('../fonts/HelveticaNeue-Thin.woff') format('woff'), url('../fonts/HelveticaNeue-Thin.svg') format('svg');font-weight:400;font-style:normal;}

* {
	transition: background-color 300ms ease, color 300ms ease;
}
*:focus {
	background-color: rgba(221, 72, 20, .2);
	outline: none;
}
html, body {
	color: rgba(33, 37, 41, 1);	
	font-size: 16px;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
input::-webkit-input-placeholder {
	font-family: Helvetica ;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
}
input:-moz-placeholder{  /* Mozilla Firefox 4 to 18*/ 
	font-family: Helvetica;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
}
input::-moz-placeholder  {  /* Mozilla Firefox 19+*/ 
	font-family: Helvetica;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
}
input:-ms-input-placeholder { /* Internet Explorer 10+*/ 
	font-family: Helvetica;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
}
textarea::-webkit-input-placeholder {
	font-family: Helvetica ;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
}
textarea:-moz-placeholder{  /* Mozilla Firefox 4 to 18*/ 
	font-family: Helvetica;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
}
textarea::-moz-placeholder  {  /* Mozilla Firefox 19+*/ 
	font-family: Helvetica;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
}
textarea:-ms-input-placeholder { /* Internet Explorer 10+*/ 
	font-family: Helvetica;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
}
header {
	padding: .4rem 0 0;
	position: fixed;
	z-index: 9;
	width: 100%;
}
a{
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
.menu {
	padding: .4rem 2rem;
	min-width: 1200px;
}
header ul {	
	list-style-type: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
	text-align: right;
}
header li {
	display: inline-block;

}
header li a {
	border-radius: 5px;
	color: rgba(0, 0, 0, .5);
	display: block;
	height: 44px;
	text-decoration: none;
	font-family: Helvetica-Light;
	font-size: 14px;
	color: #FFFFFF;
	letter-spacing: 1.4px;
}

header li.menu-item{
	float: left;
	padding: .4rem 2.65rem;
}
header li.menu-item:first-child{
	
}
header li.menu-item a {
	border-radius: 5px;
	margin: 5px 0;
	height: 38px;
	line-height: 36px;
	position: relative;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
header li.menu-item a:hover,
header li.menu-item a:focus {	
	color: #fff;
	text-decoration: none;
	background: transparent;
}
header .logo {
	float: left;
	height: 59px;
	width: 275px;
	padding: .4rem .5rem;

}
header .line{
	width: 25px;
	height: 1px;
	background: #fff;
	margin-left: 20px;
	position: absolute;
	right: 0px;
}
header .menu-toggle {
	display: none;
	float: right;
	font-size: 2rem;
	font-weight: bold;
}
header .menu-toggle button {
	background-color: rgba(221, 72, 20, .6);
	border: none;
	border-radius: 3px;
	color: rgba(255, 255, 255, 1);
	cursor: pointer;
	font: inherit;
	font-size: 1.3rem;
	height: 36px;
	padding: 0;
	margin: 11px 0;
	overflow: visible;
	width: 40px;
}
header .menu-toggle button:hover,
header .menu-toggle button:focus {
	
	color: rgba(255, 255, 255, .8);
}
header .heroe {
	margin: 0 auto;
	max-width: 1100px;
	padding: 1rem 1.75rem 1.75rem 1.75rem;
}
header .heroe h1 {
	font-size: 2.5rem;
	font-weight: 500;
}
header .heroe h2 {
	font-size: 1.5rem;
	font-weight: 300;
}
footer {
	position: fixed;
    z-index: 9;
    bottom: 0px;
    width: 100%;
}
.language{
	float: right;
	margin-right: 18px;

}
.language .div_box{
	display: inline-block;
	height: 41px;
	width: 41px;
	background: transparent;
	font-family: Helvetica;
	font-size: 14px;
	color: #FFFFFF;
	letter-spacing: 0;
	text-align: center;
    line-height: 41px;
    margin-right: 20px;
    cursor: pointer;
}
.language .div_active{
	border-radius: 20.5px;
	background: #F4F4F4;
	font-family: Helvetica;
	font-size: 14px;
	color: #000000;
	letter-spacing: 1.4px;
	vertical-align: middle;
    line-height: 41px;
    text-align: center;
}

section{
	background-color: rgba(0, 1, 17, 0.5);	
	/*position: absolute;*/
	height: 100%;
    width: 100%;
    min-width: 1200px;
}
.banner_slider{
	margin:0 auto;
	width:100%;
	height: 100%;
}
.banner_slider_pics{
	width:100%;
	height: 100%;
	margin:0 auto;
	position: relative;	
}
.banner_slider_pics>div{
	width:100%;
	height: 100%;
	display: inline-block;
	float: left;
	text-align:center;
	position: relative;
}
/* 圆点按钮 */
.banner_slider_dots{
	width: 30px;   
    right: 0px;
    /* line-height: 30px; */
    position: fixed;
    top: 50%;
    bottom: 10px;
    text-align: center;
    z-index: 3;
}
.dots_item{
	display: block;
	width:16px;
	height: 16px;
	background: rgba(255,255,255,0.30);
	border-radius:50%;
	border:8px solid rgba(255,255,255,0.30);;
	margin-bottom: 10px;

}
.project_dots_item{
	display: block;
	width:16px;
	height: 16px;
	background: rgba(255,255,255,0.30);
	border:8px solid rgba(255,255,255,0.30);;
	margin-bottom: 10px;
}
.content_box{
	position: absolute;
	top: 25.5%;
	left: 20%;
	right: 10%;
	text-align: left;
	z-index: 3;
	width: 59rem;
	
	/*text-shadow: 0 0 4px #fff;
    transform: scale(1.5,3);*/
}
.content_box span{
	 display: inline-block;
     text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;     
     height: 325px;
     will-change: auto;
  transition:ease-out all .3s;
}
.content_box p{
	 display: inline-block;
     text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
     will-change: auto;
     transition:ease-out all .5s;
}

.content_box p.spoiler {
	-webkit-filter: url(#svgBlur);
  filter: url(#svgBlur);
  /*color: hsla(0,0%,0%,0);
  text-shadow: #fff 0 0 4px, #fcffbb 0 0 20px;
 transition:         transform 0.3s cubic-bezier(1, 0, 0, 1), text-shadow 0.1s ease-out;*/
 /*transform: rotateX(-5deg);
  -webkit-transform: rotateX(-5deg);*/ /* Safari and Chrome */
  
}   
.content_box span.spoiler {
	-webkit-filter: url(#svgBlur);
  filter: url(#svgBlur);
 /* color: hsla(0,0%,0%,0);
  text-shadow: #fff 0 0 13px, #fcffbb 0 0 20px;
 
  transition:         transform 0.3s cubic-bezier(1, 0, 0, 1), text-shadow 0.1s ease-out;*/
 /*transform: rotateX(-5deg);
  -webkit-transform: rotateX(-5deg);*/ /* Safari and Chrome */
}              
.left_box{
	display: inline-block;
	font-family: Helvetica;
	font-size: 5.625rem;
	color: #fff;
	letter-spacing: 0;
	width: 50%;
    float: left;
    margin-right: 31px;
    perspective: 80;
    -webkit-perspective: 80;
}
.right_box{
	margin-top: 250px;
	display: inline-block;
	float: left;
	width: 41%;
	font-family: Helvetica;
	font-size: 1.375rem;
	color: #FFFFFF;
	letter-spacing: 0;
	 perspective: 80;
    -webkit-perspective: 80;
    position: relative;
}
.right_box .numbers{
	font-family: Helvetica;
	font-size: 30px;
	color: #fff;
	letter-spacing: 1.4px;
	line-height: 36px;
	margin-bottom: 57px;
	position: relative;
}
.right_box .numbers label{
	font-family: Helvetica;
	font-size: 60px;
	color: #FFFFFF;
	letter-spacing: 3.9px;
	vertical-align: -webkit-baseline-middle;
	/* perspective: 80;
    -webkit-perspective: 80;*/
}
.right_box .numbers label.spoiler {
  color: hsla(0,0%,0%,0);
  text-shadow: #fff 0 0 4px, #fcffbb 0 0 20px;
 /* transform: rotateX(-5deg);
  -webkit-transform: rotateX(-5deg);*/ /* Safari and Chrome */
  transition:         transform 0.3s cubic-bezier(1, 0, 0, 1), text-shadow 0.1s ease-out;

}   
.description{
	font-family: Helvetica;
	font-size: 22px;	
	letter-spacing: 0;
	color: #fff;
	perspective: 80;
    -webkit-perspective: 80;
    position: relative;
}
.textShadow{
    text-shadow: 0 0 4px #fff;
     transform: scale(1, 1);
}
   
.scroll{
	position: absolute;
	left: 26px;
	top: 50%;
	height: 100px;
	width: 30px;
	z-index: 3;
}
.big_box{
	height: 100%;
	width: 100%;
	position: absolute;
    opacity: 0.8;
	background: #000111;
}
.mask_layer{
	position: fixed;
	z-index: 2;
	opacity: 0.8;
	background: #000111;
	width: 100%;
	height: 100%;
	top: 0px;
}
.dots_active{
	background-color: #fff;
	border-color:#fff;
}
.project_content_box{
	position: absolute;
	top: 25.5%;
	left: 80px;
	right: 10%;
	text-align: left;
	z-index: 3;
	color: #fff;
	perspective: 80;
    -webkit-perspective: 80;
	/*text-shadow: 0 0 4px #fff;
    transform: scale(1.5,3);*/
}
.project_content_box .spoiler{
	color: hsla(0,0%,0%,0);
    text-shadow: #fff 0 0 8px, #fcffbb 0 0 20px;
   /* transform: rotateX(-5deg);
    -webkit-transform: rotateX(-5deg); *//* Safari and Chrome */
    transition:         transform 0.3s cubic-bezier(1, 0, 0, 1), text-shadow 0.1s ease-out;
}
.font20{
	font-family: Helvetica-Bold;
	font-size: 20px;
	color: #FFFFFF;
	letter-spacing: 0;
	margin-bottom: 36px;
}
.font60{
	font-family: HelveticaNeue-Thin;
	font-size: 60px;
	color: #FFFFFF;
	letter-spacing: 0;
	margin-bottom: 39px;
}
.pagebox{
	width: 130px;
	height: 90px;
	font-family: Helvetica;
	font-size: 40px;
	color: #FFFFFF;
	letter-spacing: 0;
	vertical-align: middle;
	display: inline-block;
	float: left;
}
.intro{
	font-family: Helvetica;
	font-size: 20px;
	color: #FFFFFF;
	letter-spacing: 0;
	display: inline-block;
    width: 80%;
    min-height: 90px;
}
.project_line{
	margin-top: 25px;
	width: 67px;
	height: 3px;
	background: #FFFFFF;
	margin-right: 60px;
	display: inline-block;
	float: left;
}
.show_project{
	display: inline-block;
	float: left;
	font-family: Helvetica;
	font-size: 30px;
	color: #FF8040;
	letter-spacing: 0;
	cursor: pointer;
}
.current{
	vertical-align: top;
	height: 20px;
	margin-bottom: 0px;
	width: 20px;
}
.total{
	margin-bottom: 0px;
	vertical-align: bottom;
	height: 20px;
	width: 20px;
}
footer .copyrights {
	float: right;
	margin-right: 15px;
	margin-bottom: 29px;
}
.pro_one_content{
	position: relative;
	width: 100%;
	min-height: 1867px;
	min-width: 1200px;
}
.back{
	font-family: Helvetica;
	font-size: 14px;
	color: #000000;
	letter-spacing: 1.4px;
	text-align: left;
	margin: 26px 23px 20px;
	height:26px;
	line-height: 19px;
}
.back img{
	margin-right: 8px;
}
.pro_one_title{
	margin: 0 0 20px 62px ;
	font-family: Helvetica-Bold;
	font-size: 20px;
	color: #000000;
	letter-spacing: 0;

}
.pro_production{
	padding-left: 600px;
	font-family: Helvetica;
	font-size: 18px;
	color: #000000;
	letter-spacing: 1.29px;
	line-height: 20px;
	min-height: 518px;
}
.pro_desc{
	margin: 39px 0 139px 160px;
	color: #000;
	min-height: 77px;
	font-family: Helvetica-bold;
}
.pro_production h4{
	margin: 34px 0px 20px;
}
.pro_production p{
	font-family: Helvetica;
	font-size: 18px;
	color: #000000;
	letter-spacing: 1.29px;
	line-height: 20px;
	margin-bottom: 0px;
	margin-top: 14px;
}
.pro_img_box{
	min-height: 540px;
	margin-top: 71px;
	position: relative;
}
.pro_img_box>div{
	display: inline-block;
	width: 253px;
	height: 450px;
	margin: 0px 14px;
}
.pro_img_box>div img{
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 100%;
}
.pic_box{
	margin: 300px 0 149px 355px;
	position: relative;
}
.dc_pic_box{
	margin: 230px 0 149px 23vw;
	position: relative;
}
.pic_box>div{
	width: 502px;
	height: 335px;
	box-shadow: 0 2px 20px 0 rgba(0,0,0,0.27);
	display: inline-block;
	position: absolute;
 }
 .dc_pic_box>div{
	min-width: 285px;
	height: 412px;
	box-shadow: 0 2px 20px 0 rgba(0,0,0,0.27);
	display: inline-block;
	margin-right: 50px;
 }

 .pic_box>div img{
 	height: auto;
 	width: auto;
 	max-width: 100%;
 	max-height: 100%;
 }

 .contact_box{
 	margin:155px 38px 64px 100px;
 	width: 90%;
 	display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: absolute;
    z-index: 11;
 }
 .message_box h1, .info_box h1{
 	font-family: Helvetica;
	font-size: 40px;
	color: #FFFFFF;
	line-height: 60px;
 }
 .message_box>p, .info_box>p{
 	font-family: Helvetica;
	font-size: 16px;
	color: #FFFFFF;
	text-align: left;
	margin-bottom: 30px;

 }


 .message_box{
 	flex-grow: 1;
    margin-right: 0px;
    width: 60%;
 }
 .info_box{
 	display: inline-block;
    float: right;
    min-width: 25vw;  
    flex-basis: 25vw;
    -webkit-flex-basis: 25vw;
    /* max-width: 400px;*/
 }
 .bg_box{
 	margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
 	background: url('/images/Contact_01.jpg') center no-repeat; 
 	background-size:cover;
 }
 .item_list{
 	display: inline-block; 	
 	width: 45%;
 	margin-right: 18px;
 	vertical-align: top;
 }
 .item{
 	width: 100%;
 	opacity: 0.8;
    background: #000111;
    min-height: 27px;
    padding: 5px 10px;
    margin-bottom: 23px;
 }
  .item label{
  	font-family: Helvetica-Bold;
	font-size: 12px;
	color: #FFFFFF;
	text-align: left;
	margin-bottom: 0px;
	display: block;

  }

  .item input[type="text"], .item textarea{

  	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	border-radius: 3px;
	width: 100%;
	border:none;
	min-height: 35px;
	padding: 0 5px;
	color: #fff;
	font-family: Helvetica;
	font-size: 14px;
	text-align: left;
  }
  .txt_active{
  	background-color: rgba(255, 255, 255, 0.9) !important;
  	color: #106B99 !important;
  }

  input[type="submit"]{
  	width: 189px;
  	height: 40px;
  	border:none;
  	font-family: Helvetica-bold;
	font-size: 14px;
	color: #000;
	text-align: center;
	padding: 5px 15px;
	cursor: pointer;
	background: #fff;
  }
.address_box{
 	font-family: Helvetica;
	font-size: 14px;
	color: #C7D3E0;
	text-align: left;
	margin-top: 80px;
 }
 .address_box p{
 	margin-bottom: 23px;
 }
 .web_showreel{
 	margin-top: 50px;
 	width: 158px;
 	padding-bottom: 9px;
 	border-bottom:  3px solid #FFFFFF;
 	font-family: Helvetica;
	font-size: 20px;
	color: #FFFFFF;
	letter-spacing: 3.9px;
	text-align: center;
	cursor: pointer;
 }


.home_web_showreel{
 	margin-top: 50px;
 	width: 158px;
 	padding-bottom: 9px;
 	border-bottom:  3px solid #FFFFFF;
 	font-family: Helvetica;
	font-size: 20px;
	color: #FFFFFF;
	letter-spacing: 3.9px;
	text-align: center;
	cursor: pointer;
	will-change: auto;
    transition:ease-out all .5s;
 }
  .home_web_showreel.spoiler {
	-webkit-filter: url(#svgBlur);
    filter: url(#svgBlur);
  
}