@charset "utf-8";
/* CSS Document */
.banner_area{
	overflow: hidden;
}
.img-fill{
	width: 100%;
	display: block;
	overflow: hidden;
	position: relative;
}

.img-fill picture img {
	min-height: 100%;
	min-width: 100%;
	position: relative;
	display: inline-block;
	max-width: none;
}

/* ==== Slider Style === */
.banner-slider .item .img-fill{
	height:100vh;
	background:#000;	
}

.banner-slider .item .img-fill .info{
	position:absolute;
	width:100%;
	top:33%;
	left:13%;
}
.banner-slider .item .img-fill .info::after, .banner-slider .item .img-fill .info::before{
	position: absolute;
	content: "";
}
.banner-slider .item .img-fill .info::after{
	z-index: 1;
	left: 30px;
	top: 30px;
	height: 100%;
	width: 100%;
	background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.banner-slider .item .img-fill .info::before{
	z-index: 3;
	width: 60px;
	height: 60px;
	background-color: var(--red);
}
.banner-slider .item .img-fill .info .info_text{
	font-family: var(--slogin_font) ;
	font-weight: 500;
	margin: 70px 0px 40px 5%;
	display: flex;
	position: relative;
	z-index: 9;
}
.banner-slider .slogin-m {
	font-size: 68px; 
	line-height: 68px;
	color:var(--white);
	animation:fadeOutRight 1s both;	
}
.banner-slider .slogin-s{
	color:var(--white);
	margin-left: 25px;
	overflow:hidden;  
}
.banner-slider .slogin-s span {
	display: block;
}
.banner-slider .slogin-s span.name_E{ 
	font-family: var(--eng_font) ;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 2px;
	padding: 0px 0px 4px 4px;	
	border-bottom: 4px solid var(--red);
	animation:fadeOutLeft 1s both;
}
.banner-slider .slogin-s span.slogin_text{ 
	font-size: 35px;
	line-height: 38px;
	padding-top: 10px;
	letter-spacing: 2px;
	animation:fadeOutLeft 1s both;
}
.banner_more{
	position: absolute;
	z-index: 9;
	right: 50%;
	width: 190px;
	animation:fadeOutLeft 1s both;
}
.banner_more img{
	width: 48px;
	height: 10px;
}
.banner_more a{ 
	display: flex;
	align-items: center;
    justify-content: center;
	color: var(--white);
	line-height: 50px;
	text-decoration: none;
	background-color: var(--red);
	transition: background 0.5s ease;
}
.banner_more a:hover{
	background-color: var(--redHeavy);	
}
.banner_more img {
	margin-left: 15px;
	margin-top: 2px;
}
.banner_more a:hover img.arrow_move {
	animation: slide1 1s ease-in-out infinite;
	margin-left: 15px;
}
@keyframes slide1 {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(10px, 0);
  }
}

/**active**/
.banner-slider .item.slick-active .slogin-m{
  animation:fadeInDown 1s both 1s;
}

.banner-slider .item.slick-active .name_E{
  animation:fadeInLeft 1s both 1.5s;
}
.banner-slider .item.slick-active .slogin_text{
  animation:fadeInLeft 1s both 2s;
}
.banner-slider .item.slick-active .banner_more{
  animation:fadeInLeft 1s both 1.8s;
}

/****/
.banner-slider .NextArrow{
	position:absolute;
	top:50%;
	right:0px;
	width:45px;
	height:45px;
	background:rgba(0,0,0,.50);
	border:0 none;
	margin-top:-22.5px;
	text-align:center;
	font:20px/45px FontAwesome;
	color:var(--white);
	z-index:5;
}
.banner-slider .NextArrow:before{content:'\f105';}
.banner-slider .PrevArrow{
	position:absolute;
	top:50%;
	left:0px;
	width:45px;
	height:45px;
	background:rgba(0,0,0,.50);
	border:0 none;
	margin-top:-22.5px;
	text-align:center;
	font:20px/45px FontAwesome;
	color:var(--white);
	z-index:5;
}
.banner-slider .PrevArrow:before{content:'\f104';}
.banner-slider .slick-dots{
	position:absolute;
	height:5px;
	background:rgba(255,255,255,.20);
	bottom:0px;
	width:100%;
	left:0px;
	padding:0px;
	margin:0px;
	list-style-type:none;
}
.banner-slider .slick-dots li button{display:none;}
.banner-slider .slick-dots li{
	float:left;
	width:0px;
	height:5px;
	padding: 0px;
	background:var(--red);
	position:absolute;
	left:0px;
	bottom:0px;
}
.banner-slider .slick-dots li.slick-active{
	width:100%;
	animation:ProgressDots 6s both;
}

.banner-slider .item.slick-active{
	animation:Slick-FastSwipeIn 1s both;
}
.banner-slider { background:#000;}

/* ==== Slider Image Transition === */
@keyframes Slick-FastSwipeIn{
    0%{transform:rotate3d(0,1,0,100deg) scale(0)  perspective(400px);}
  100%{transform:rotate3d(0,1,0,0deg) scale(1) perspective(400px);}
}

@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}


/* ==== Slick Slider Css Ruls === */
.slick-slider{
	position:relative;
	display:block;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-touch-callout:none;
	-khtml-user-select:none;
	-ms-touch-action:pan-y;
	touch-action:pan-y;
	-webkit-tap-highlight-color:transparent;}
.slick-list{
	position:relative;
	display:block;
	overflow:hidden;
	margin:0;
	padding:0;}
.slick-list:focus{
	outline:none;
}
.slick-list.dragging{cursor:hand;}
.slick-slider .slick-track, .slick-slider .slick-list{
	-webkit-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
.slick-track{
	position:relative;
	top:0;
	left:0;
	display:block;
}
.slick-track:before, .slick-track:after{ display:table;content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}

.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%; min-height:1px;}
.slick-slide.dragging img{pointer-events:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;}


/****/
@media all and (max-width: 991px) {
	.banner-slider .item .img-fill{ min-height: inherit; height: inherit;}
	.img-fill picture img{ max-width: 100%; min-height:inherit; }
}
@media all and (max-width: 768px) {
	.banner-slider .item .img-fill .info{top: 20%; left: 3%;}
	.banner-slider .slogin-m{ font-size: 48px; line-height: 48px;}
	.banner-slider .slogin-s span.name_E{ font-size: 16px; line-height: 20px;}
	.banner-slider .slogin-s span.slogin_text{ font-size: 27px; line-height: 30px;}
}
@media all and (max-width: 540px) {
	.banner_more{ width: 160px;}
	.banner_more a{ font-size: 94%; line-height: 40px;}
	.banner-slider .item .img-fill .info .info_text{ flex-direction: column;}
	.banner-slider .slogin-s{ margin-left: 15px;}
	.banner-slider .item .img-fill .info::after{ left: 20px; top: 20px;} 
	.banner-slider .item .img-fill .info::before{ width: 30px;}
	.banner-slider .slogin-m { font-size: 28px; line-height: 28px; margin-left: 15px; }
	.banner-slider .slogin-s span.name_E { font-size: 15px; line-height: 20px; }
	.banner-slider .slogin-s span.slogin_text{ font-size: 20px; line-height: 20px; padding-top: 5px;}
	.banner-slider .NextArrow, .banner-slider .PrevArrow{ width: 30px; height: 30px; font: 20px / 30px FontAwesome;}
	.slick-dotted.slick-slider{ margin-bottom: 0px;}
}

@media all and (max-width: 280px) {
	.banner-slider .item .img-fill .info .info_text{ margin: 60px 0px 40px 4%;}
	.banner_more a { width: 140px; font-size: 90%;  line-height: 30px; }
}