/*------------------------------------*\
            ic_portal.css
\*------------------------------------*/
/*
    * General.....................General use
    * Banner
    * Description
    * Pack Banner
    * PlayButton
    * Bottome Description
    * Animation
    * Media Query.................RWD Setting
        * General.....................
*/





/*------------------------------------
            $General
------------------------------------*/
/*--- svg icon ---*/
.banner-info .icon{
	float: left;
	fill: #fff;
	width: calc( 14.8px + 1vw ); /*34-18*/
	height: calc( 14.8px + 1vw );
	min-width: 24px;
	min-height: 24px;
	margin-right: 10px;
}
.banner-pack .icon{
	fill: #fff;
	width: 30px;
	height: 30px;
}





/*------------------------------------
            $Banner
------------------------------------*/
.banner{ 
	background: lightgray; 
	background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
	height: 36.46vw; 
}
.ic .banner{ background-image: url(../../images/Portal/ic_portal/ic_main.jpg); }
.cc .banner{ background-image: url(../../images/Portal/cc_portal/cc_main.jpg); }
.ct .banner{ background-image: url(../../images/Portal/ct_portal/ct_main.jpg); }
.cta .banner{ background-image: url(../../images/Portal/cta_portal/cta_main.jpg); }

	.banner > .row{ height: 100%; }
	.banner-info {
		float: left;
	    position: absolute;
	    top: 30%;
	    left: 15px;
	    /*padding-right: 40%;*/
	}
	.ct .banner-info { top: 23%; }
	
		.ic .banner-info .title{
		    color: #fff;
		    font-family: 'Oswald', sans-serif;
		    font-size: calc( 12.4px + 3vw); /*70-22*/
		    font-weight: bold;
		    margin-bottom: 30px;
		    text-shadow: 1px 1px 100px #000;
		}
		.cc .banner-info .title,
		.cta .banner-info .title,
		.ct .banner-info .title{
		    color: #3a3a3a;
		    font-family: 'Oswald', sans-serif;
		    font-size: calc( 22px + 2.5vw); /*70-30*/
		    font-weight: bold;
		    margin-bottom: calc( 12px + 0.9375vw); /*30-15*/
		    text-shadow: 1px 1px 100px #fff;
		}

		.banner-info .banner-button{
		    font-size: calc( 14.4px + 0.5vw); /*24-16*/
		    border: none;
		    background-color: #ff9f00;
		    color: #fff;
		    padding-top: 10px;
    		padding-bottom: 10px;
		    padding-right: 30px;
		    padding-left: 30px;
		    min-height: 64px;
		}
		.banner-info .banner-button:focus{ outline: none; }
		.banner-info .banner-button:hover{ background-color: #fff; color: #666666; }
		.banner-info .banner-button:hover .icon{ fill: #666666; }
		.ct .banner-info .banner-button:hover{ background-color: #cccccc; }
		.banner-button-wrapper + .banner-button-wrapper{
			margin-left: 15px
		}





/*------------------------------------
            $Pack Banner
------------------------------------*/
.banner-pack{ position: relative; }
.banner-pack .mask{
	background-color: rgba(0, 0, 0, 0.4);
	/*margin: 0 auto;*/
	height: 100%;
	width: 100%;
	-webkit-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
	opacity: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: -1;
}
.banner-pack .mask .btn-wrapper{
	/*transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);*/
	position: absolute;
	right: 0;
	bottom: 50px;
}
.banner-pack:hover .mask{ opacity: 1;  z-index: 1; }


/*--- Button ---*/
.btn-wrapper > div{ 
	float: left; 
	margin-right: 15px; 
	margin-left: 15px; 
}
.btn-wrapper .rl-play-wrapper{ margin-right: 15px; }

.btn-wrapper p{ 
	font-weight: 500;
	color: #fff; 
	text-transform: uppercase; 
}
	.watch-more i.fa{ color: #fff; font-size: calc( 13.6px + 0.75vw ); /*28-16*/}





/*------------------------------------
            $Description
------------------------------------*/
.description{ position: relative; }
	.description p{
		color: #fff;
		font-size: calc( 16.8px + 0.375vw ); /*24-18*/
		margin: 0 auto;
		text-align: center;
		width: 100%;
	}
	.description .triangle{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20px 20px 0 20px;
		border-color: #4a4a4a transparent transparent transparent;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -20px;
		z-index: 3;
	}





/*------------------------------------
    		$PlayButton
------------------------------------*/
/*----- play video icon ------*/
	.rl-rel{ /*position: relative; display: inline-block; max-width: 100%;*/}
		.rl-play-wrapper{
			/*pointer-events: none;*/
			/*position:absolute; 
			bottom:10%; 
			right:6%; */
			width: 50px; 
			height: 50px;
			min-width: 40px;
			min-height: 40px; 
			border-radius: 50%; 
			/*margin: calc( ((40px + 3.125vw) / 2) * (-1) ) 0 0 calc( ((40px + 3.125vw) / 2) * (-1) );*/
			/*transform: translate(-50%,-50%);*/
			background: rgba(250, 161, 0, 0.8);
			-webkit-transition: 
			           background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
			           transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
			-o-transition: 
				       background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
			           transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
			transition: 
					   background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), 
			           transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
		}
			.rl-rel:hover .rl-play-wrapper{
				background: rgba(250, 161, 0, 1);
				-webkit-transform: scale(1.2, 1.2);
				-moz-transform: scale(1.2, 1.2);
				-ms-transform: scale(1.2, 1.2);
				-o-transform: scale(1.2, 1.2);
				transform: scale(1.1, 1.1);
				
			}
			.rl-play{
				/*color: white; 
				font-size: calc( 10px + 1.5625vw );*/
				width: 0;
				height: 0;
				border-style: solid;
				/*border-width: calc( 9.6px + 0.125vw ) 0 calc( 9.6px + 0.125vw ) calc( 8.4px + 0.5vw ); /*12-10 , 18-10*/
				border-width: 10px 0 10px 15px;
				border-color: transparent transparent transparent rgba(255,255,255,1);
				margin-left: calc( 3.2px + 0.25vw ); /*8-4*/
			}

/*------------------------------------
    	$Bottome Description
------------------------------------*/
.bottom-desc > div > div{ border: 1px solid #666666; }
.bottom-desc .title{
	color: #666666;
	font-family: 'Oswald', sans-serif;
	font-size: calc( 22.8px + 2.25vw ); /*66-30*/
	font-weight: bold;
	padding-bottom: 30px;
}
.bottom-desc .content-wrapper{ margin: 0 auto; width: 90%; }
.bottom-desc .content-wrapper .img-wrapper{ margin-top: 30px;}
.bottom-desc .content-wrapper p{ margin-bottom: 15px; }
.bottom-desc .content-wrapper a{
	color: #fe9f01;
    font-size: 1.125rem;
    margin-top: 15px;
}
.bottom-desc .content-wrapper a:hover{
	color: #666666;
	text-decoration: underline;
}





/*------------------------------------
    		$Animation
------------------------------------*/
.animated {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
	@-webkit-keyframes slideInUp {
	  from {
	    -webkit-transform: translate3d(0, 100%, 0);
	    transform: translate3d(0, 100%, 0);
	    visibility: visible;
	  }

	  to {
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
	}

	@keyframes slideInUp {
	  from {
	    -webkit-transform: translate3d(0, 100%, 0);
	    transform: translate3d(0, 100%, 0);
	    visibility: visible;
	  }

	  to {
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
	}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}





/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and ( max-width: 1440px ){
	/*------------------------------------
            	$General
	------------------------------------*/
	.banner-pack .row{
		width: 25%;
		margin-right: 0;
		max-height: 100%;
	}
		.banner-pack .triangle{
		    padding-left: 100%;
		    padding-bottom: 76%;
		    /*padding-bottom: 38%;*/
		}
		.banner-pack .triangle:after{
			margin-left:-340px;
		    border-left: 340px solid transparent;
		    border-bottom: 260px solid rgba(255, 146, 38, 0.9);
		    /*margin-left:-290px;
		    border-left: 290px solid transparent;
		    border-bottom: 140px solid rgba(255, 146, 38, 0.9);*/
		}
			.banner-pack .triangle > p{
				position: absolute;
				right: 30px;
				bottom: 40px;
				min-width: auto;
			}
}

@media screen and ( max-width: 991px ){
	/*------------------------------------
            	$General
	------------------------------------*/
	.banner-pack .triangle > p{
		/*font-size: 1rem;*/
		position: absolute;
		right: 20px;
		bottom: 20px;
	}

	/*------------------------------------
            	$Banner
	------------------------------------*/
	.ct .banner-info { top: 10%; }

	.banner-info{ top: 10%; }
	.banner-info .banner-button{
	    padding-right: 15px;
	    padding-left: 15px;
	}


}

@media screen and ( max-width: 767px ){
	/*------------------------------------
            	$General
	------------------------------------*/
	/*--- svg icon ---*/
	.banner-pack .icon{
		width: 26px;
		height: 26px;
	}

	/*--- Button Mobile ---*/
	.btn-wrapper > div{ margin-left: 0; }
	.btn-wrapper .rl-play-wrapper{ 
		margin-right: 0; 
		width: 40px; 
		height: 40px;  
	}

	/*------------------------------------
            	$Banner
	------------------------------------*/
	.ic .banner{ background-position: 90% bottom; }
	.cc .banner{ background-position: 65% center; }
	.ct .banner{ background-position: 25% center; }
	.cta .banner{ background-position: 80% bottom; }

	.banner { min-height: 350px; }	
	.banner-info{ 
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		top: 15px;
		left: 0;
	}
	.banner-button-wrapper{
		display: block;
	}
	.banner-info .banner-button{ min-height: 46px; min-width: 290px; display: block;}
	.banner-button-wrapper + .banner-button-wrapper{
		margin-left: 0;
		margin-top: 15px;
	}
	.rl-buttons-area{
		max-width: 340px
	}
	

	/*------------------------------------
            	$Pack Banner
	------------------------------------*/
	.banner-pack .mask .btn-wrapper{ bottom: 20px; }

	/*------------------------------------
	    		$PlayButton
	------------------------------------*/
	.btn-wrapper .rl-play-wrapper{
		width: 40px; /*40-20*/
		height: 40px;
	}
	.rl-play{
		border-width: 8px 0 8px 12px;
	}
}

@media screen and ( min-width: 600px ){
	.visible-600{ display: none !important; }
}
@media screen and ( max-width: 600px ){
	.visible-600{ display: block !important; }
	.hidden-600{ display: none!important; }
}