@charset "utf-8";
/*******************************************
 	top-header
*******************************************/
header{
	position:relative;
	margin:0 auto 60px;
}
#header{
	position:absolute;
	top:0;
	width:100%;
	background:rgba(255,255,255,.6);
	display:none;
}
@media screen and (max-width: 768px) {
	header{
		margin:0 auto 10%;
	}
}
/*******************************************
 	top-slider
*******************************************/
#top-slider{
	background:#fff;
}
#top-slider li{
	font-size:0;
	line-height:0;
	text-align:center;
}
#top-slider .swiper-container .swiper-button-prev,
#top-slider .swiper-container .swiper-button-next{
	font-family:as;
	background:none;
	color:#ccc;
	font-size:5.0rem;
	height:5.0rem;
	width:5.0rem;
	line-height:1;
	text-align:center;
}
@media screen and (max-width: 768px) {

}
/*******************************************
 	news
*******************************************/
#news{
	margin:0 0 60px;
}
#news h3{
	text-align:center;
	margin:0 auto 20px;
}
#news ul{
	margin:0 auto;
	width:85%;
}
#news li{
	margin:0 auto 20px;
}
#news li .des{
	display:flex;
	display:-webkit-flex;
	align-items: flex-start;
	-webkit-align-items: flex-start;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	font-weight:bold;
}
#news li .des > div{
	margin-right:3%;
	width:20%;
}
#news li .des div time{
	font-size:1.6rem;
	display:block;
	margin:0 0 .5rem;
	color:#333;
}
#news li .des div span{
	font-size:1.2rem;
	display:block;
}
#news li p{
	text-decoration: underline;
	color:#333;
	font-size:1.6rem;
	width:77%;
}
#news li a:hover p{
	text-decoration: none;
}
#news .btn{
	margin:20px auto 0;
}
#news .btn a{
	display: block;
	position: relative;
	width: 200px;
	margin: 0 auto;
	padding: .5em 1em;
	background: #ddd;
	color: #333;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
}
#news .btn a:hover{
	opacity:0.7;
}
#news .btn a:after{
	content: "\e902";
	display: block;
	position: absolute;
	left: 90%;
	top: 50%;
	margin-top: -.5em;
	font-size: 1rem;
	font-family: as;
	line-height: 1;
}
@media screen and (max-width: 768px) {
	#news{
		margin:0 0 10%;
		padding:0 3.125%;
	}
	#news h3{
		float:none;
		width:auto;
		margin:0 auto 6%;
	}
	#news ul{
		float:none;
		width:auto;
	}
	#news li{
		margin:0 auto 7%;
	}
	#news li .des{
		display:block;
	}
	#news li .des > div{
		margin:0 auto 2%;
		width:auto;
		display:flex;
		display:-webkit-flex;
		align-items: center;
		-webkit-align-items: center;
	}
	#news li .des div time{
		font-size:1.6rem;
		margin:0 1.5rem 0 0;
		width:35%;
	}
	#news li .des div span{
		text-align:right;
		font-size:1.2rem;
		display:block;
		padding:0.5rem 1.0rem;
		width:65%;
	}
	#news li p{
		font-size:1.6rem;
		width:auto;
	}
	#news li a:hover p{
		text-decoration: none;
	}
	#news .btn{
		margin:4% auto 0;
	}
	#news .btn a{
		width: 50%;
	}
}
/*******************************************
 	content
*******************************************/
#content{
	margin:0 auto 60px;
}
#content ul{
	display:flex;
	display:-webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: center;
	-webkit-align-items: center;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	font-size:0;
	line-height:0;
}
#content ul:after{
	content:"";
	display:block;
	width: 32.5%;
}
#content li{
	width:32.5%;
}
#content li div.wrp{
	height:0;
	width:100%;
	padding:74.87179487179487% 0 0;
	position:relative;
	overflow: hidden;
	margin-bottom:4%;
}
#content li div.wrp > div{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	display:-webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	text-align:center;
}
#content li div.wrp > div:after,
#content li div.wrp > div:before{
	content:"";
	display:block;
	width:100%;
	height:100%;
	/*background:rgba(254,218,38,.7);*/
	background:#DCDDDD;
	position:absolute;
	z-index:3;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	color:#000;
	top:0;
	left:0;
}
#content li div.wrp > div:after{
	content:"COMING SOON";
	font-size:3.2rem;
	font-weight:bold;
	display:flex;
	display:-webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	z-index:5;
	opacity:0;
	color:#fff;
	background:rgba(35,24,21,.8);
}

/*#content li.koff div.wrp > div:before{
	background:rgba(186,208,59,.8);
}
#content li.as div.wrp > div:before{
	background:rgba(219,100,62,.8);
}
#content li.kaf div.wrp > div:before{
	background:rgba(244,172,131,.8);
}
#content li.sal div.wrp > div:before{
	background:rgba(102,197,177,.8);
}*/

#content li.tgr div.wrp > div:after{
	content:none;
}
#content li.kaf div.wrp > div:after{
	content:none;
}
#content li.sms div.wrp > div:after{
	content:none;
}
#content li.as div.wrp > div:after{
	content:none;
}
#content li.sal div.wrp > div:after{
	content:none;
}
#content li.am div.wrp > div:after{
	content:none;
}
#content li.abf div.wrp > div:after{
	content:none;
}
#content li.sc div.wrp > div:after{
	content:none;
}
#content li.sso div.wrp > div:after{
	content:none;
}
#content li.abt div.wrp > div:after{
	content:none;
}
#content li.hc div.wrp > div:after{
	content:none;
}
#content li.hc div.wrp > div:before{
	background:rgba(221,134,46,.8);
}
#content li.sso div.wrp > div:before{
	background:rgba(209,145,172,.8);
}
#content li.abf div.wrp > div:before{
	background:rgba(255,222,66,.8);
}
#content li.abt div.wrp > div:before{
	background:rgba(71,60,16,.8);
}
#content li.am div.wrp > div:before{
	background:rgba(71,60,16,.8);
}
#content li.sc div.wrp > div:before{
	background:rgba(71,60,16,.8);
}
#content li.sc:hover div.wrp > div:before{
	background:rgba(71,60,16,.4);
}
#content li.sal div.wrp > div:before{
	background:rgba(102,197,177,.8);
}
#content li.sal:hover div.wrp > div:before{
	background:rgba(102,197,177,.4);
}
#content li.hc div.wrp > div:before{
	background:rgba(221,134,46,.8);
}
#content li.hc:hover div.wrp > div:before{
	background:rgba(221,134,46,.4);
}
#content li.sso div.wrp > div:before{
	background:rgba(209,145,172,.8);
}
#content li.sso:hover div.wrp > div:before{
	background:rgba(209,145,172,.4);
}
#content li.abf div.wrp > div:before{
	background:rgba(255,222,66,.8);
}
#content li.abf:hover div.wrp > div:before{
	background:rgba(255,222,66,.4);
}
#content li.abt div.wrp > div:before{
	background:rgba(71,60,16,.8);
}
#content li.abt:hover div.wrp > div:before{
	background:rgba(71,60,16,.4);
}
#content li.am div.wrp > div:before{
	background:rgba(71,60,16,.8);
}
#content li.am:hover div.wrp > div:before{
	background:rgba(71,60,16,.4);
}

#content li.sms div.wrp > div:before{
	background:rgba(239,92,107,.8);
}
#content li.sms:hover div.wrp > div:before{
	background:rgba(239,92,107,.4);
}
#content li.as div.wrp > div:before{
	background:rgba(219,100,62,.8);
}
#content li.as:hover div.wrp > div:before{
	background:rgba(219,100,62,.4);
}
#content li.kaf div.wrp > div:before{
	background:rgba(244,172,131,.8);
}
#content li.kaf:hover div.wrp > div:before{
	background:rgba(244,172,131,.4);
}
#content li.tgr div.wrp > div:before{
	background:rgba(127,131,131,.8);
}
#content li.tgr:hover div.wrp > div:before{
	background:rgba(127,131,131,.4);
}
#content li b{
	position:relative;
	z-index:4;
	color:#333;
	font-size:2.8rem;
	line-height:1.6;
	text-align: center;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#content li b span{font-size: 1.4rem;}
#content li img{
	display:none;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	z-index:2;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#content li:hover div.wrp > div:after{
	opacity:1;
}
#content li:hover div.wrp > div:before{
	background:#dcdddd;
}
#content li:hover b{
	color:#feda26;
}
#content li:hover img{
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
}
#content li.sal img,
#content li.koff img,
#content li.as img,
#content li.kaf img,
#content li.hc img,
#content li.sso img,
#content li.abf img,
#content li.abt img,
#content li.am img,
#content li.sms img,
#content li.sc img,
#content li.tgr img{
	display:block;
}
@media screen and (max-width: 768px) {
	#content{
		padding:0 3.125%;
		margin:0 auto 10%;
	}
	#content li{
		width:49%;
	}
	#content li b{
		font-size:1.4rem;
	}
	#content li div.wrp > div:after{
		font-size:2.0rem;
	}
}