@font-face {
	font-family: 'iconfont';
	src: url('../font/iconfont.eot');
	src: url('../font/iconfont.eot') format('embedded-opentype'),
		url('../font/iconfont.woff2') format('woff2'),
		url('../font/iconfont.woff') format('woff'),
		url('../font/iconfont.ttf') format('truetype'),
		url('../font/iconfont.svg') format('svg');
  }

@font-face {
font-family: "Gilroy-Regular.woff";
src: url("../font/Gilroy-Regular.woff.woff2") format("woff2"),
		url("../font/Gilroy-Regular.woff.woff") format("woff"),
		url("../font/Gilroy-Regular.woff.ttf") format("truetype"),
		url("../font/Gilroy-Regular.woff.eot") format("embedded-opentype"),
		url("../font/Gilroy-Regular.woff.svg") format("svg");
}

@font-face {
	font-family: "Gilroy-Bold.woff";
	src: url("../font/Gilroy-Bold.woff.woff2") format("woff2"),
		 url("../font/Gilroy-Bold.woff.woff") format("woff"),
		 url("../font/Gilroy-Bold.woff.ttf") format("truetype"),
		 url("../font/Gilroy-Bold.woff.eot") format("embedded-opentype"),
		 url("../font/Gilroy-Bold.woff.svg") format("svg");
  }
  


::-webkit-scrollbar {
	width: 6px;
	background-color: #0b0b0b
}

::-webkit-scrollbar-track {
	border-radius: 6px;
	background-color: #0b0b0b
}

::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: #dddddd;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
input, select { vertical-align: middle; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; font-weight: lighter;}
input { outline: none; padding:0;}
img { border: 0; }
input[type="text"], input[type="button"], input[type="submit"], input[type="reset"] ,select{ -webkit-appearance: none; border-radius: 0;}
textarea { -webkit-appearance: none; border-radius: 0; background:none; outline:none; padding:0; margin:0; border:none;}
/* ::-moz-selection { background: #f7a300; color: #fff; text-shadow: none; } */
/* ::selection { background: #f7a300; color: #fff; text-shadow: none; } */
a { text-decoration: none; blr: expression(this.onFocus=this.blur()); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
a:link, a:visited { text-decoration: none; color:inherit;}
a:active, a:hover { text-decoration: none; color:inherit;}
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0px; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.fc { text-align: center; }
.fr { text-align: right; }
.l { float: left; display: inline-block; }
.r { float: right; display: inline-block; }
.vt { vertical-align: top; }
.vm { vertical-align: middle; }
.inner { width:1280px; margin: 0px auto;}

/*header*/
.header{ position: fixed; left: 0; top: 0; z-index: 99; right: 0; padding: 60px 60px 0;}
.header.nofixed{ position: absolute;}
.logowr{ width: 16.666%; float: left;}
.logos{ display: block; position: relative; z-index: 4; width: 150px;}
.logos img{ display: block; width: 100%; height: auto; transition: 0.35s; fill: #fff;}
.logos img.hide{ position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden;}
.header-label{ float: left; position: relative; z-index: 3;}
.header-label p{ color: #ffffff; font-size: 14px; line-height: 1.1; transition: 0.35s;}
.header-navs{ float: right; position: relative; z-index: 10;}
.header-navs-list{ float: left;}
.header-navs-list li{ float: left; margin-left: 48px;}
.header-navs-list li:first-child{ margin-left: 0;}
.header-navs-list li a{ position: relative; color: #fff; font-size: 1.7rem; line-height: 1; padding-bottom: 3px;}
.header-navs-list li a:before{ content: ""; position: absolute; right: 0; bottom: 0; background-color: #fff; height: 1px; width: 0; transition: 0.3s;}
.header-navs-list li a:hover:before{ width: 100%; right: auto; left: 0;}
.header.scroll .logos img.hide,.header.scroll1 .logos img.hide{ opacity: 1; visibility: visible;}
.header.scroll .logos img.show,.header.scroll1 .logos img.show{ opacity: 0; visibility: hidden;}
.header.scroll .header-label p,.header.scroll1 .header-label p{ color: #000000;}
.header.scroll .header-navs-list li a,.header.scroll1 .header-navs-list li a{ color: #333;}
.header.scroll .menubtn span:after,.header.scroll .menubtn span:before{ background-color: #333;}
.header.scroll .header-navs-list li a:before{ background-color: #333;}

.menubtn{transition: 0.4s; margin-left: 78px; position:relative; z-index: 20; float: right; margin-top: 2px; cursor: pointer;}
.menubtn span{ background-color: none; display:block; width:30px; height:18px; margin:auto; position:relative; vertical-align: middle; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s;}
.menubtn span:after,
.menubtn span:before { content: ""; position: absolute; display: inline-block; width: 100%; height: 2px; left: 0; transition: 0.3s 0s;
 background-color: #fff; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s;-o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s;-moz-transition-delay: .3s,0s;-ms-transition-delay: .3s,0s;-o-transition-delay: .3s,0s; transition-delay: .3s,0s}
.menubtn span:before {top: 3px;-webkit-transition-property: top,transform;-moz-transition-property: top,transform;-ms-transition-property: top,transform;-o-transition-property: top,transform;transition-property: top,transform;}
.menubtn span:after {bottom: 3px;-webkit-transition-property: bottom,transform;-moz-transition-property: bottom,transform;-ms-transition-property: bottom,transform;-o-transition-property: bottom,transform;
transition-property: bottom,transform;}
.menubtn.active span:after,.menubtn.active span:before {-webkit-transition-delay: 0s,.3s;-moz-transition-delay: 0s,.3s; -ms-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s; background-color: #000000;}
.menubtn.active span:before {top: 8px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg)}
.menubtn.active span:after {bottom: 8px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}

.header-mark{ position: fixed; left: 100%; top: 0; width: 100%; height: 100%; background: #fff; overflow: hidden; transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1); opacity: 0;}
.header-mark.show{ left: 0; opacity: 1;}
.header-mark.show .header-mark-navs li a{ opacity: 1; visibility: visible; top: 0; transition-delay: 0.7s;}
.header-mark.show .header-mark-navs li:nth-child(2) a{ transition-delay: 0.85s;}
.header-mark.show .header-mark-navs li:nth-child(3) a{ transition-delay: 1s;}
.header-mark.show .header-mark-navs li:nth-child(4) a{ transition-delay: 1.15s;}
.header-mark.show .header-mark-navs li:nth-child(5) a{ transition-delay: 1.3s;}
.header-mark.show .header-mark-navs li:nth-child(6) a{ transition-delay: 1.45s;}
.header-mark.show .header-mark-navs li:nth-child(7) a{ transition-delay: 1.6s;}
.header-mark.show .header-mark-contact{ opacity: 1; visibility: visible; transition-delay: 1.7s;}


.header-mark-wrapper{ position: relative; box-sizing: border-box; padding-top: 12%; height: 100vh;}
.header-mark-navs li{ position: relative; overflow: hidden;}
.header-mark-navs li a{ position: relative; top:70px; display: block; color: #333; font-size: 60px; line-height: 1.2; padding-left: 18.75%; opacity: 0; visibility: hidden; transition: 0.3s;}
.header-mark-navs li a span{ display: inline-block; transition: 0.35s;}

.demo-cont{ opacity: 0; visibility: hidden; transition: 0.35s;}
.marquee-wrap{ white-space: nowrap; width: 100%; display: flex; display: -webkit-flex; overflow: hidden;}
.txt-scroll .scrollbox{ width: 100%; white-space: nowrap; overflow:hidden; transition: all .2s; position: absolute; left: 0; top: 0;}
.txt-scroll .txt,
.txt-scroll .txt-clone{ display: inline; position: relative; }

.header-mark-navs li a .marquee{ display: inline-block; font-size: 60px; color: #333; line-height: 1.2; transition: 0.35s; -webkit-marquee-style:alternate; padding-left: 20px;}
.header-mark-navs li:hover a span{ opacity: 0; visibility: hidden;}
.header-mark-navs li:hover a .demo-cont{ opacity: 1; visibility: visible;}
.header-mark-navs:hover li a span{ color: #dddddd;}

.header-mark-contact{ position: absolute; left: 60px; right: 88px; bottom: 60px; opacity: 0; visibility: hidden; transition: 0.8s;}
.header-mark-allow{ float: left; text-align: center;}
.header-mark-allow img{ display: block; width: 90px; height: auto;}
.header-mark-allow span{ margin-top: 18px; display: block; line-height: 1; color: #666666; font-size: 15px; text-align: center;}
.header-mark-tel{ float: right;}
.header-mark-tel-item{ float: left; margin-left: 160px;}
.header-mark-tel-item p{ color: #666666; font-size: 15px; line-height: 1;  margin-bottom: 14px;}
.mark-tels span{ display: block; color: #000000; font-size: 24px; font-family: "Gilroy-Regular.woff"; line-height: 1.3; word-wrap:break-word;word-break:break-all;}
.mark-tels .mark-tels-li a{ display: inline-block; color: #000000; font-size: 1.4rem; line-height: 1;}
.mark-tels .mark-tels-li a:hover{ font-weight: normal;}

.footer{ padding: 0 60px}
.footer-top{ padding: 6.4% 0 11.77%; border-top: 1px solid #dddddd;}

.footer-logo{ display: block; float: left; width: 150px;}
.footer-text{ width: 608px; float: left;}
.footer-text .header-mark-tel-item{ margin-left: 0; width: 50%;}
.footer-text-list .header-mark-tel-item{ margin-bottom: 84px;}
.footer-allow{ padding-bottom: 6.66%;}
.footer-photos{ margin-top: 53px; float: left;}
.footer-photos p{ color: #666666; font-size: 14px; font-weight: lighter; line-height: 1.2;}
.footer-common{ width: 30%; float: left;}
.banner-link1{ display: none;}
.allow-item{ display: none;}
.allow-item img{ width: 90px; height: auto;}
.footer-text-list:last-child .header-mark-tel-item{ margin-bottom: 0;}


.innerload{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #000000; z-index: 199; transition: 0.6s;}
.innerload.show{ height: 0; opacity: 0;}
.innerload-bg{ width: 100%; height: 100%; background-color: #141414; position: absolute; left: 0; top: 0;}
.innerload-bg.addload{ height: 0; transition: 2s;}
.innerload span{ display: block; line-height: 1; color: #1c1c1c; font-size: 450px; font-family: "Gilroy-Regular.woff"; position: absolute; right: 6.25%; bottom: 0;}
.innerload span em{ font-style: normal; font-size: 240px;}
#scoreDisplay{ font-style: normal;}

.error{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: #000000;}
.error-li{ position: absolute; left: 60px; top: 60px;}
.error-text{ position: absolute; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; right: 60px; line-height: 1; bottom: 12px;}
.error-text p{ float: left; position: relative; color: #ffffff; font-size: 15px; padding-top: 1.7rem; padding-left: 44px; color: rgba(255,255,255,0.3); overflow: hidden;}
.error-text p:before{ content: ""; width: 0; height: 2px; background-color: #fff; position: absolute; left: 0; top: 0; animation: loade linear 2s 0.2s infinite;}
.error-text strong{ display: block; float: right; color: #fff; font-size: 340px; font-family: "Gilroy-Regular.woff"; margin-left: 60px;}

@keyframes loade {
	from{
		width: 0;
	}
	50%{
		width: 100%;
	}
	98%{
		left: auto;
		right: 0;
		width: 0;
	}
}