GBRSWN/CZKJ.GBRS2.Web/wwwroot/assets/scss/base.scss

@import 'global.scss';
* {
	margin: 0;
}
video{
	width: 100%;
}
@font-face {
	font-family: "Publico-Headline-Medium";
	src: url("/assets/font/Publico-Headline-Medium.woff") format("woff")
}
@font-face {
	font-family: "trump_gothic_east_bold";
	src: url("/assets/font/trump_gothic_east_bold.woff") format("woff")
}
html{
	-webkit-tap-highlight-color: rgba(0,0,0,.05);
}
body {
	font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', STHeitiSC-Light, 'Microsoft YaHei', Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
	background-color: #fff;
}
table{
	word-break: break-word;
}
.wrapper{
	width: 1200px;
	margin: 0 auto;
}
.no-link{
	color: #999 !important;
	pointer-events: none !important;
	img{
		filter: grayscale(100%);
	}
}
.pageDiv{
	padding: 30px 0 0 0 !important;
	@media(min-width:768px){
		padding: 60px 0 0 0 !important;
	}
}
.pageDiv span.current{
	background: $color !important;
	border-color:$color !important;
}
.pageDiv span.disabled,.pageDiv span.current,.pageDiv a{
	height: 26px !important;
	line-height: 26px !important;
	padding:0 6px !important;
	margin:0 2px !important;
	@media(min-width:768px){
		height: 30px !important;
		line-height: 30px !important;
		padding:0 12px !important;
		margin:0 4px !important;
	}
}

a:hover,
a:active,
a:focus {
	text-decoration: none;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
    color: #999;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
	font-weight: normal;
	margin: 0;
}

ol,
ul {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

img {
	object-fit: cover;
	max-width: 100%;
}
input{
	outline: none;
}
em,
i {
	font-style: normal;
	display:inline-block;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.header{
	position: fixed;
	z-index:1000;
	padding: 0 15px;
	left:0;
	right:0;
	width: 100%;
	text-align: center;
	font-size: 0;
	top:0;
	border-bottom: 1px solid #f8f8f8;
	@media(min-width:768px){
		top:30px;
		height:54px;
		padding: 0 20px;
		transform: translateZ(1px);
	}
	background-color: #fff;
	transition: all .5s ease;
	.nav-box{
		display:none;
		@media(min-width:768px){
			display: inline-block;
		}
	}
	.m-nav-box{
		display: block;
		@media(min-width:768px){
			display: none;
		}
	}
	.left-logo{
		display: inline-block;
		vertical-align: middle;
		left: 0;
		transition: all .5s ease;
		a{
			&:after{
				content: "";
				display: inline-block;
				height:100%;
				vertical-align: middle;
			}
		}
		img{
			display: inline-block;
			vertical-align: middle;
			width:0;
			transition: all .5s ease;
		}
	}
	ul.nav-ul{
		line-height: 54px;
		clear: fix;
		display: inline-block;
		white-space: nowrap;
		width: auto;
		li~li,.logo{
			@media(min-width:768px){
				margin-left:10px;
			}
			@media(min-width:992px){
				margin-left:30px;	
			}
			@media(min-width:1200px){
				margin-left:62px;
			}
		}
		li{
			transition: all .5s ease;
			display: inline-block;
			vertical-align: middle;
			height: 54px;
			font-size:16px;
			@media(min-width:768px){
				font-size: 14px;
			}
			a{
				display: inline-block;
				color: #111;
				transition: all .5s ease;
				position: relative;
				padding: 0 6px;
				cursor: pointer;
				&:after{
					position: absolute;
					content:"";
					display: inline-block;
					bottom:0;
					left:0;
					width:100%;
					height:0px;
					background: $color;
					transition: all .3s ease;
				}
				&:hover,&.cur{
					&:after{
						height: 2px;
					}

				}
			}
		}
		.logo{
			transition: all .5s ease;
			height:54px;
			position: relative;
			width: 84px;
			display: inline-block;
    		vertical-align: middle;
			a{
				position: static;
				&:after{
					content: "";
					display: none;
				}
			}
			img{
				width:100%;
				position: absolute;
				z-index: 10;
				transform: scale(1);
				top: -15px;
				left: 0;
				transition: all .5s ease;
			}
			
		}
		.login{
			color: $color;
			a{
				color: $color;
			}
		}
	}
	&.slide{
		top: 0;
		ul.nav-ul{
			li{
				@media(min-width:768px){
					margin-left:16px;
				}
				@media(min-width:992px){
					margin-left:36px;	
				}
				@media(min-width:1200px){
					margin-left:67px;
				}
			}
			.left-logo{
				img{
					width:40px;
				}
			}
			.logo{
				width:0;
				margin:0;
				padding: 0;
			}
		}

	}
	.nav-drop{
		text-align: left;
		position: absolute;
		z-index: 9;
		background: $color;
		color: #fff;
		left: 0;
		right: 0;
		top: 100%;
		.nav-left{
			padding: 0 150px 0 20px;
			h2{
				font-size: 32px;
				@media(min-width:1200px){
					font-size: 36px;
				}
				margin-bottom:20px;
			}
			p{
				font-size: 14px;
				line-height: 2;
				margin-bottom:50px;
				@include ellipsisLn(2);
			}
			a{
				color: #fff;
				font-size: 16px;
				img{
					transition: all .5s ease;
				}
				&:hover{
					text-decoration: underline;
					img{
						margin-left: 10px;
					}
				}
			}
		}
		.nav-right{
			.sm-nav{
				a{
					font-size: 16px;
					display: inline-block;
					color: #fff;
					margin-bottom: 25px;
					cursor: pointer;
					&:after{
						content: "";
						display: inline-block;
						vertical-align: text-bottom;
						width:20px;
						height: 15px;
						background:url("/assets/image/white-arrow.png") no-repeat 0 center;
						opacity: 0;
						transition: all .5s ease;
					}
					&:hover{
						text-decoration: underline;
						&:after{
							opacity: 1;
							background-position: right center;
						}
					}
				}
			}
			.sm-nav-img{
				a{
					overflow: hidden;
					display: block;
					&:hover{
						img{
							transform: scale(1.05);		
						}
					}
				}
				img{
					transition: all .5s ease;
				}
				h2{
					font-size: 22px;
					margin-top:20px;
					line-height: 1.5;
				}
			}
		}
		.container{
			display:none;
			&>.row{
				padding: 50px 0;
			}
		}
	}
	//mobile
	nav{
		clear:fix;
	}
	nav .logo{
		height:54px;
		line-height: 54px;
		display: inline-block;
		img{
			width:40px;
			vertical-align: middle;
		}
	}
	nav .fr{
		height:54px;
		display: flex;
		align-items: center;
	}
	nav .head-img{
		width:36px;
		height:36px;
		border-radius: 50%;
		overflow: hidden;
		background-color: #eee;
		img{
			width:100%;
			height:100%;
		}
	}
	nav .menu{
		margin-left: 20px;
		span{
			display: block;
			width:24px;
			height:2px;
			background: #666;
			transition: all .5s ease;
		}
		span~span{
			margin-top:7px;
		}
		&.open{
			span:nth-child(1){
				transform: rotateZ(-45deg);
				transform-origin: right; 
			}
			span:nth-child(2){
				opacity: 0;
				transform: translateX(6px);
			}
			span:nth-child(3){
				transform: rotateZ(45deg);
				transform-origin: right;
			}
		}
	}
}
.m-header{
	height:54px;
}
.m-nav-drop{
	display: none;
	position: fixed;
	overflow-y:auto; 
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	z-index: 101;
	left: 0;
	right: 0;
	bottom:0;
	top: 54px;
	background: rgba(255,255,255,.95);
	padding: 0 40px 20px;
	&:after{
		content: "";
		display: inline-block;
		vertical-align: middle;
		height:100%;
	}
	ul{
		display: inline-block;
		vertical-align: middle;
		width:100%;
		position: relative;
		top: -50px;
	}
	li{	
		opacity: 0;
		border-bottom: 1px solid #e7e6e5;
		transform: translate(-20px,-50px);
		transition-property: transform,opacity;
		transition-duration: 0.25s;
		transition-delay:  0.5s;
		a{
			transition: all .5s ease;
			&.cur{
				color: $color;
			}
			
		}
		
		&>a{
			display: block;
			padding: 14px 10px;
			font-size: 16px;
			color: #333;
			position: relative;
			i{
				position: absolute;
				width:50px;
				height: 50px;
				top: 50%;
				margin-top: -25px;
				right:0;
				display: inline-block;
				&:after{
					content: "";
					@include setArrow(8px,#666,1px,right);
					top:25%;
					position: relative;
				}
				
			}
		}
		.added-value{
			padding: 0 20px;
			display: none;
			a{
				display: block;
				padding:0 10px;
				line-height: 40px;
				height:40px;
				color: #666;
				font-size: 13px;
				border-top: 1px solid #eee;
			}
		}
	}
	&.open{
		li{
			opacity: 1;
			transform: translate(0,0);
		}
		@for $i from 1 through 7 {
			li:nth-child(#{$i}) {
				transition-delay:  $i*0.08s;
				
			}
		}
	}
	.second-nav{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: #fff;
		border-top: 1px solid #f0f0f0;
		transform: translateX(100%);
		transition: all .5s ease;
		overflow-y:auto; 
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		&.open{
			transform: translateX(0);
		}
		.second-nav-back{
			position: absolute;
			z-index: 2;
			left:20px;
			top: 8px;
			bottom: 0;
			text-align: center;
			i{
				width: 30px;
				height: 30px;
				display: inline-block;
				vertical-align: middle;
				background: url("/assets/image/arrow-color-left.png") no-repeat center;
				background-size: 18px;
			}
		}
		ul{
			display: none;
			top: 10px;
			position: relative;
			li{
				border: 0;
			}
		}
	}
	.search{
		height: 36px;
		padding: 8px;
		background: #f8f8f8;
		position: relative;
		input{
			background: #f8f8f8;
			border: 0;
			width:100%;
			padding-right:30px;
			height: 20px;
			line-height: 20px;
		}
		i{
			display: inline-block;
			width:16px;
			height:16px;
			background: url("/assets/image/icons/search.png") no-repeat center;
			position: absolute;
			right: 12px;
			top: 10px;
		}
	}
}
.footer{
	.foot-con{
		background: #191919;
		padding: 40px 0;
		@media(min-width:768px){
			padding: 60px 0;
		}
		.container .row>div~div{
			border-left: 1px solid #333;
		}
	}
	.fast-track{
		clear: fix;
	}
	.foot-nav{
		float: left;
		width:50%;
		h2{
			color: #fff;
			font-size: 18px;
			margin-bottom: 20px;
		}
		.item{
			a{
				display: block;
				color: #999;
				font-size: 14px;
				margin-bottom: 8px;
				&:hover{
					text-decoration: underline;
				}
			}
		}
	}
	.tel{
		color: #999;
		font-size: 14px;
		margin-top: 30px;
		@media(min-width:768px){
			margin-top: 0;
		}
		h2{
			color: #fff;
			font-size: 24px;
		}
		p{
			margin-top: 8px;
			line-height: 1.8;
		}
	}
	.qrcode{
		clear: fix;
		padding: 0 30px;
		margin-top: 30px;
		margin-bottom: 30px;
		@media(min-width:768px){
			padding: 0;
			margin-top: 0;
		}
		.item{
			float: left;
			padding: 0 15px;
			width:50%;
			font-size: 12px;
			color: #999;
			text-align: center;
			img{
				width: 100%;
			}
			p{
				margin-top: 10px;
			}
		}
	}
	.inputs{
		position: relative;
		width: 80%;
		margin: 0 auto 20px;
		@media(min-width:768px){
			width: 100%;
			float: right;
			margin: 0 auto 20px;
		}
		@media(min-width:992px){
			width: 88%;
		}
		
		height: 44px;
		line-height: 44px;
		.choose{
			position: relative;
			display: block;
			background: #000;
			color: #999;
			margin-right: 60px;
			padding: 0 10px;
			height: 100%;
			cursor: pointer;
			ul{
				display: none;
				position: absolute;
				z-index: 2;
				bottom: 100%;
				left: 0;
				right: 0;
				background: #fff;
				li{
					padding: 0 10px;
					line-height: 36px;
					color: #666;
					@include ellipsis(auto);
					&:hover{
						color: $color;
					}
				}
			}
			span{
				@include ellipsis(auto);
				display: inline-block;
				padding-right: 20px;
				height: 100%;
				width:100%;
				background: url("/assets/image/arrow-up.png") no-repeat center right;
			}
			input{
				width:100%;
				padding: 10px 0;
				line-height: 24px;
				background: #000;
				color: #999;
				border: 0;	
			}
		}
		a{
			display: block;
			position: absolute;
			width:60px;
			top: 0;
			right: 0;
			background: #3b3b3b;
			color: #fff;
			font-size: 14px;
			text-align: center;
			&:hover{
				background: $color;
			}
		}
	}
	.copy{
		clear: fix;
		padding: 10px 0;
		background: #000;
		font-size: 14px;
		color: #666;
		span{
			@media(max-width:767px){
				float: none;
				display: block;
				text-align: center;
				padding: 0 20px;
			}
		}
	}
}
.view-more{
	width: 120px;
	height: 36px;
	line-height: 36px;
	font-size: 14px;
	border: 1px solid $color;
	color: $color;
	display: block;
	margin: 30px auto 0;
	text-align: center;
	cursor: pointer;
	transition: all .5s ease;
	@media(min-width:768px){
		width: 180px;
		height: 44px;
		line-height: 44px;
		font-size: 18px;
		margin: 40px auto 0;
	}
	&:hover{
		color: #fff;
		background: $color;
	}
}
.close-mask{
	color:$color;
	font-size: 20px;
	img{
		margin-right:6px;
	}
}
.open-mask{
	font-size: 20px;
	display: inline-block;
	color: $color;
	i{
		margin-left: 5px;
		display: inline-block;
		width:11px;
		height:11px;
		background: url("/assets/image/filter.png") no-repeat center;
	}
}
.back-nav{
	color: $color;
	font-size: 14px;
	cursor: pointer;
	display: inline-block;
	i {
		display: inline-block;
		width: 30px;
		height: 10px;
		transition: all .5s ease;
		background: url("/assets/image/arrow-color-left.png") no-repeat center;
	}
	&:hover,
	&:active {
		color: $color;
		i {
			background-position: center left;
		}
	}
}
.foot-h {
    height: 60px;
    @media(min-width: 768px) {
        height:100px;
    }
    @media(min-width:1200px) {
        height: 120px;
    }
}
.toTop{
	cursor: pointer;
	position: fixed;
	z-index: 1000;
	bottom: 20px;
	right: 15px;
	padding: 10px;
	padding-top: 0;
	padding-bottom:0;
	border-radius: 50%;
	opacity: 0;
	background: rgba(255,255,255,.7);
	box-shadow: 0 0 20px 5px rgba(0,0,0,.1);
	transition: all .5s ease;
	@media(min-width:768px){
		bottom: 40px;
		right: 40px;
	}
	&.showIn{
		padding-top: 10px;
		padding-bottom:10px;
		opacity: 1;
	}
	img{
		width: 30px;
	}
	&:hover{
		background: rgba(255,255,255,1);
	}
}
.header ul.nav-ul .user-login{
	position: relative;
	.logout{
		display: none;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		background: #fff;
		line-height: 48px;
		a{
			padding: 0 20px;
		}
	}
	// &:hover{
	// 	.logout{
	// 		display: block;
	// 	}
	// }
}