// global
@import 'global.less?v=1';
@import 'keyframes.less';

body { color: #333; }
.maxsize { max-width: 1400px; }
.loading {
	position: absolute;
	top: 0; left: 0; right: 0;
	overflow: hidden;
	z-index: 99999;
	transition: opacity 1s ease-out;-webkit-transition: opacity 1s ease-out;
	&.loaded {
		display: none;
	}
	video { position: relative; z-index: 2; }
	.info {
		position: fixed;
		z-index: 1;
		top: 50%;
		transform: translateY(-50%);-webkit-transform: translateY(-50%);
		left: 0; right: 0;
		text-align: center;
		p { margin-top: 20px; }
	}
}

.header {
	position: absolute; z-index: 999;
	&.fixed { position: fixed; }
	top: 0; left: 0; right: 0;
	border-bottom: 1px solid rgba(255,255,255,.2);
	transition: all .5s ease-out;-webkit-transition: all .5s ease-out;
	.logo {
		position: absolute;
		top: 0; left: 0;
		padding: 19px 39px;
		height: 59px;
		img { height: 100%; }
	}
	&.darkfont { border-bottom: 1px solid rgba(0,0,0,.2); }
	&.darkfont .menu ,
	&.darkfont .stock > p,
	&.darkfont .lang
	{ color: #666; }
	.menu {
		color: #fff;
		text-align: center;
		.menulist {
			text-align: left;
			display: inline-block;
			li {
				&.mo { display: none; }
				float: left;
				position: relative;
				&>a {
					display: block;
					padding: 0 62px;
					line-height: 95px;
				}
				&:hover .sub { display: table; }
				.sub {
					position: absolute;
					top: 100%;
					left: -25px;
					background: rgba(0,0,0,.6);
					border-top: 2px solid @hl;
					padding: 41px 56px;
					display: table;
					display: none;
					dl {display: table-cell; }
					dt { padding-bottom: 34px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1); padding-right: 60px; }
					dl:last-of-type dt { padding-right: 0; }
					dt a { white-space: nowrap; color: #fff; }
					dd a { color: #cfcfcf; font-size: 14px; line-height: 32px;white-space: nowrap; }
					a:hover { color: @hl; }

					&.typeRight {
						left: -300px; right: -25px;
						&.recruitment_menu{
						left:-50px;
						}
					}
				}
			}
		}
	}
	.stock {
		position: absolute;
		right: 210px; top: 0;
		padding: 30px 0;
		padding-right: 15px;
		&>p {
			line-height: 1.5em;
			font-size: 12px;
			color: #fff;
		}
		&:hover .detail { display: block; }
		.detail {
			display: none;
			position: absolute;
			right: 0; top: 100%;
			background: #fff;
			padding: 23px 40px;
			width: 336px;
			.statu {
				position: relative;
				color: #FE0001;
				span { 
					font-size: 25px; 
					&:after {content: '\e6b5'; font-family: 'iconfont';}
				}
				.down { color: #50b553; }
				.down span:after { content:'\e6b7'; }
				sub { display: inline-block;transform: translateY(-5px);-webkit-transform: translateY(-5px); font-size: 14px; }
				p { position: absolute; top: 0; right: 0; font-size: 12px; line-height: 1.2; color: #3e3e3e; }
			}
			.trend {
				position: relative;
				margin-top: 30px;
				padding-left: 60px;
				ul {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 12px;
					li {margin-bottom: 30px; cursor: pointer; color: #7e7e7e;}
					.active { color: #FE0001;border-bottom: 2px solid; }
				}
			}
		}
	}
	.lang {
		position: absolute;
		top: 0; right: 0;
		line-height: 95px;
		padding: 0 38px;
		text-align: center;
		color: #fff;
		font-size: 18px;
		i, span { float: left; }
		i { margin-right: 14px; }
		&.hrefBox{
			right: 80px
		}
	}
	&.sticky {
		background: rgba(255,255,255,.9);
		border-bottom: 1px solid transparent;
		transition: all .2s ease-out;-webkit-transition: all .2s ease-out;
		&.redline { border-color: @hl; }
		backdrop-filter: saturate(300%) blur(10px);
		-webkit-backdrop-filter: saturate(300%) blur(10px);
		.menulist li > a { color: #000; }
		.stock > p { color: #333; }
		.lang { color: #000; }
	}
}

.footer {
	background: #fff; z-index: 999; position: relative;
	.links {
		.logo { position: absolute; top: 100px; left: 0; }
		.btns {
			position: absolute; top: 100px; right: 0;
			a {
				display: block;
				line-height: 48px;
				border: 1px solid #ddd;
				color: @hl;
				margin-bottom: 18px;
				width: 220px;
				padding-left: 20px;
				position: relative;
				transition: all 0.2s ease-out;-webkit-transition: all 0.2s ease-out;
				&:after {
					content: '\e600';
					font-family: 'iconfont';
					position: absolute; 
					top: 0;
					right: 0;
					line-height: 48px;
					border-left: 1px solid #ddd;
					width: 48px; text-align: center;
				}
				&:hover {
					background: @hl;
					color: #fff;
				}
			}
		}
		padding: 100px 0;
		dl {
			padding-left: 443px;
			dt { margin-bottom: 40px; }
			dd { color: #666; line-height: 30px; }
		}
	}
	.info {
		background: @hl;
		color: #fff;
		line-height: 70px;
		font-size: 12px;
		p { float: left; }
		.legalStatement {
			font-size: 14px;
			float: right;
			a { float: left; margin-left: 30px; }
			.iconfont { font-size: 22px; }
		}
	}
}

.banner {
	position: relative;
	background: #000;
	&.darkfont .bx-pager a { border-color: rgba(0,0,0,.5); }
	&.darkfont .bx-pager a.active { background-color: @hl; }
	&.darkfont .tip,
	&.darkfont .counter { color: @hl; }
	&.darkfont:after { border-color: rgba(0,0,0,.2); }
	&:after {
		content: '';
		position: absolute;
		z-index: 99;
		top: 0; bottom: 0; right: 132px;
		border-left: 1px solid rgba(255,255,255,.2);
	}
	.tip {
		position: absolute;
		z-index: 99;
		font-size: 16px;
		width: 16px;
		right: 60px;
		bottom: 73px;
		color: #fff;
		writing-mode: vertical-lr;
		.iconfont {
			display: inline-block;
			margin-top: 10px;
			font-size: 22px;
			-webkit-animation: scrollDownTip 2s infinite linear;
			animation: scrollDownTip 2s infinite linear;
		}
	}
	.counter {
		position: absolute;
		z-index: 99;
		writing-mode: vertical-lr;
		left: 76px;
		top: 50%;
		margin-top: -32px;
		color: #fff;
	}
	.text {
		position: absolute;
		left: 54px;
		// top: 305px;
		top: 50%;
		transform: translateY(-50%);-webkit-transform: translateY(-50%);
		color: #fff;
		text-shadow: 0 0 10px #000, 0 0 50px rgba(0,0,0,.25);
		p { 
			position: relative; 
			display: inline-block;
			&:after {
				content: '';
				position: absolute;
				left: 100%;
				top: 50%;
				width: 245px;
				margin-left: 40px;
				border-top: 1px solid #fff;
			}
		}
		a { 
			.moreBtn();
		}
	}
	.bx-controls { display: table !important; position: absolute; top: 0; right: 0; width: 132px; height: 100%; z-index: 99; }
	.bx-pager { display: table-cell; vertical-align: middle; height: 100%; text-align: center; }
	.bx-pager-item { margin-bottom: 30px; /*&:last-of-type { margin: 0; }*/ }
	.bx-pager a {
		display: inline-block; width: 6px; height: 6px;
		border-radius: 100%; border: 1px solid #fff;
		opacity: .5;
		text-indent: -1em;
		overflow: hidden;
		&.active {
			background: #fff;
			opacity: 1;
		}
	}
}

.index {
	visibility: hidden;
	&.loaded { visibility: visible; }
	.section .animated:not(.interactable),
	.section .animated2s:not(.interactable) { display: none; }
	.section.active .animated:not(.interactable),
	.section.active .animated2s:not(.interactable) { display: block; }
	.s1 {
		background-image: url(../images/index-s1bg.png);
		background-position: 50% 90%;
		background-size: 1428px auto;
		background-repeat: no-repeat;
		.text { max-width: 491px; padding-top: 75px;padding-left: 54px; float: left; }
		.info a { .moreBtn(); }
		.video {
			margin-top: 120px;
			a {
				display: inline-block;
				position: relative;
				overflow: hidden;
				margin-bottom: 20px;
				&:before {
					content: '';
					position: absolute;
					top: 0; left: 0; right: 0; bottom: 0;
					background: rgba(0,0,0,.2);
					transition: all .4s ease-out;-webkit-transition: all .4s ease-out;
					z-index: 2;
				}
				&:after {
					content: '\e640';
					font-family: 'iconfont';
					color: #fff;
					font-size: 40px;
					position: absolute;
					top: 50%; left: 50%; margin: -.5em;
					pointer-events: none;
					transition: all .4s ease-out;-webkit-transition: all .4s ease-out;
					z-index: 2;
				}
				i {
					display: block;
					width: 300px; height: 300px;
					transition: all .4s ease-out;-webkit-transition: all .4s ease-out;
					z-index: 1;
				}
				&:hover {
					&:before { background: rgba(0,0,0,0);}
					&:after { font-size: 30px; text-shadow: 0 0 10px rgba(0,0,0,.3); }
					i { -webkit-transform: scale(1.1);transform: scale(1.1); }
				}
			}
		}
		.datas {
			float: right;
			width: 50%;
			position: relative;
			.img {
				overflow: hidden;
				width: 718px; height: 714px;
				i { 
					position: absolute; top: 0; left: 0; bottom: 0; right: 0;
					transition: all 3s ease-out;-webkit-transition: all 3s ease-out;
				}
			}
			.growNumber {
				margin-left:-50px;
				margin-right:-80px;
				margin-top: 110px;
				li {
					float: left; width: 25%; text-align: center;
					strong { display: block; }
				}
			}
		}
		.since {
			opacity: .5;
			max-width: 530px;
			width: 100%;
			position: absolute;
			top: -42px; right: -76px;
			.letter {
				stroke-dashoffset: 0;
				fill:none;
				stroke:#D70C1E;
				stroke-linejoin:round;
				stroke-dashoffset: 0;
			}
		}
	}
	.s2 {
		background-image: url(../images/index-s2bg.jpg);
		background-position: center;
		background-size: cover;
		position: relative;
		.nav {
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 3;
			border-right: 1px solid rgba(255,255,255,.1);
			display: flex;flex-direction: column;height: 100%;
			li { height: 20%; display: table; }
			li i, li span { 
				display:table-cell;
				vertical-align: middle; 
				text-align: center; 
				width: 93px; 
				border-top: 1px solid rgba(255,255,255,.1); 
				color: rgba(255,255,255,.3); 
				font-size: 28px; 
			}
			li.active i { color: @hl; }
			li span { font-size: 16px; color: rgba(255,255,255,.5); }
			li span font { transform: rotate(-90deg); display: block; }
		}
		.items {
			left: 50%; right: 0; top: 0; bottom: 0;
			position: absolute;
			margin-left: -700px;
			z-index: 2;
			&:before {
				content: '';
				position: absolute;
				top: 0; bottom: 0; right: 100%;
				width: 600px;
				background-image: url(../images/covered.png);
				background-size: 100% auto;
				z-index: 2;
			}
			.container { 
				position: absolute; 
				top: 50%;
				transition: all 1.2s ease-out;-webkit-transition: all 1.2s ease-out;
				transform: translateX(100%) translateY(-50%);-webkit-transform: translateX(100%) translateY(-50%);
				padding-bottom: 118px;
				perspective-origin: center;
				perspective: 5000px;
			}
			.item {
				float: left;
				margin-right: 82px;
				position: relative;
				transform-origin:center;
				-webkit-animation-fill-mode:both;animation-fill-mode:both;
				opacity: 0;
				visibility: hidden;
				transition: all .4s ease-out;-webkit-transition: all .4s ease-out;
				&:hover { -webkit-transform: scale(1.1);transform: scale(1.1); }
				// -webkit-animation: flyIn3d 1.5s infinite linear;animation: flyIn3d 1.5s infinite linear;
				.con {
					width: 412px;
					padding-bottom: 138.835%;
					height: 0;
				}
				i {
					position: absolute;
					top: 30px; right: 30px;
					width: 72px; line-height: 72px;
					text-align: center; font-size: 34px;
					color: @hl; background: #fff;
				}
				p {
					position: absolute;
					bottom: 49px; left: 48px;
					color: #fff;
				}
			}
		}
		.controls {
			position: absolute;
			top: 50%;
			margin-top: 266px;
			width: 100%;
			left: 0;
			&:after {
				content: '';
				position: absolute;
				left: 120px; right: 0;
				margin-left: 30px;
				bottom: 1px;
				border-bottom: 2px solid rgba(255,255,255,.2);
			}
			.btns {
				border: 1px solid rgba(255,255,255,.2);
				border-right: 0;
				display: inline-block;
				overflow: hidden;
				.btn { 
					display: block;
					float: left;
					width: 60px;
					line-height: 60px;
					border-right: 1px solid rgba(255,255,255,.2);
					text-align: center;
					font-size: 18px;
					color:#fff;
					transition: color 0.2s ease-out;-webkit-transition: color 0.2s ease-out;
					&:hover { color: @hl; background: rgba(255,255,255,.1); }
				}
			}
			p { position: absolute; right: 0; bottom: 24px; color: rgba(255,255,255,.97); }
		}
		&.active {
			.items .item { -webkit-animation: flyIn3d .75s ease-out;animation: flyIn3d .75s ease-out; opacity: 1;visibility: visible;}
			.items .container {
				transform: translateY(-50%);-webkit-transform: translateY(-50%);
			}
		}
	}
	.s3 {
		background-image: url(../images/index-s3bg.jpg);
		background-size: 45px auto;
		background-position: bottom left;
		background-repeat: repeat-x;
		-webkit-animation: moveBackground 3s infinite linear; 
		animation: moveBackground 3s infinite linear;
		overflow: hidden;
		.title {
			position: absolute;
			bottom: 50%;
			left: 0; right: 0; 
			margin-bottom: 367px;
			z-index: 9;
			// &:before {
			// 	content: 'Company News';
			// 	font-family: 'EuclidCircularB-Regular';
			// 	color: #ccc;
			// 	position: absolute;
			// 	top: 100%; 
			// 	margin-top: 70px;
			// 	left: -100px;
			// 	writing-mode: vertical-rl;
			// 	font-size: 40px;
			// 	white-space: nowrap;
			// }
			.btns {
				position: absolute;
				right: 0;
				bottom: 0;
				border: 1px solid #ddd;
				border-right: 0;
				a {
					display: block;
					line-height: 60px;
					width: 60px;
					float: left;
					text-align: center;
					font-size: 18px;
					border-right: 1px solid #ddd;
					color : @hl;
					transition: all .4s ease-out;-webkit-transition: all .4s ease-out;
					&:hover { background: @hl; color: #fff; }
				}
			}
		}
		.container { 
			padding-top: 50px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);-webkit-transform: translateY(-50%);
			transition: all .6s ease-out;-webkit-transition: all .6s ease-out;
			&:hover .item:first-of-type {
				a {
					background-color: #fff;
					.bg { opacity: 0; }
					strong { color: @hl; }
					p { color: #595d69; }
					span { color: inherit; }
					&:after { color: #6F737D; }
					&:hover {
						background-color: @hl;
						.bg { opacity: 1; }
						strong, p, span { color: #fff; }
						&:after { color: #fff; }
					}
				}
			}
		}
		.item { 
			float: left;
			width: 472px;
			position: relative;
			&:first-of-type {
				a.morebtn { background: #fff; }
				a.m {
					background-color: @hl;
					.bg { opacity: 1; }
					strong, p, span { color: #fff; }
					&:after { color: #fff; }
				}
			}
			&:hover a.morebtn { background: #fff; }
			a.morebtn {
				position: absolute;
				bottom: .93rem; right: .63rem;
				padding-bottom: 0;
				font-size: 12px; line-height: 20px;
				padding: 0 10px;
				&:hover {
					background:  @hl;
					color:  #fff;
				}
			}
			a.m {
				display: block;
				position: relative;
				height: 0;
				padding: 0 63px;
				padding-bottom: 142.7966%;
				border: 1px solid #ededed;
				background-color: #fff;
				margin-right: -1px;
				transition: all .4s ease-out;-webkit-transition: all .4s ease-out;
				&:after {
					display: none;
					content: '\e64a';
					position: absolute;
					font-family: 'iconfont';
					bottom: 93px; right: 63px;
					color: #6F737D;
					font-size: 22px;
				}
				&>* { position: relative; }
				.bg {
					position: absolute;
					top: 0; left: 0; bottom: 0; right: 0;
					opacity: 0;
					transition: all .4s ease-out;-webkit-transition: all .4s ease-out;
					overflow: hidden;
					&.hasImg:before {
						content: '';
						position: absolute; top:0; left: 0; right: 0; bottom: 0;
						background: rgba(0,0,0,.5);
					}
				}
				strong { color: @hl; padding-top: 182px;margin-bottom: 110px; display: block; }
				p { color: #595d69; }
				span { position: absolute; bottom: 93px; left: 63px; }
				&:hover {
					background-color: @hl;
					.bg { opacity: 1; }
					strong, p, span { color: #fff; }
					&:after { color: #fff; }
				}
			}
		}
	}
	.s4 {
		overflow: hidden;
		.foot {
			position: relative; z-index: 0;
		}
		.recruit {
			position: relative; z-index: 12;
			padding-top: 40px; 
			.items { margin: 0 -.35rem; display: flex;}
			.item { float: left; width: 50%;  }
			a {
				margin: 0 .35rem;
				display: block;
				height: 0;
				position: relative;
				padding-bottom: 61.7142857%;
				text-align: center;
				box-shadow: 0 50px 106px rgba(0,0,0,.1);
				background: #fff;
				color: #fff; color: @hl;
				transition: all .5s ease-out;-webkit-transition: all .5s ease-out;
				// &:hover { -webkit-transform: scale(1.1);transform: scale(1.1); }
				&:hover { background: @hl; color: #fff; }
				.iconfont { display: block; font-size: 63px; margin-bottom: 30px; }
				.con {
					position: absolute;
					left: 0; right: 0;
					top: 50%;
					transform: translateY(-50%);-webkit-transform: translateY(-50%);
					// text-shadow: 0 0 10px rgba(0,0,0,.2), 0 0 80px rgba(0,0,0,.25);
				}
			}
		}	
	}
}
.fp-auto-height {overflow-y: scroll; }
.fp-auto-height .fp-tableCell { display: block; height: auto !important; }

@import 'pages.less';
@import 'responces.less';
@import 'hack.css';