/*------------------------------------*\
            ic_portal.css
\*------------------------------------*/
/*
    * General.....................General use
    * Banner
    * RL Office Selection
	* Popular categories
	* Developer content 
	* Goodies 
	* Showcase
    * Media Query.................RWD Setting
        * General.....................
*/





/*------------------------------------
            $General
------------------------------------*/
/*150->75*/
.rl-row-150{
	padding-top: calc( 60px + 4.6875vw );
	padding-bottom: calc( 60px + 4.6875vw );
}
.rl-row-top-150{
	padding-top: calc( 60px + 4.6875vw );
	padding-bottom: 0;
}
.rl-row-bottom-150{
	padding-top: 0;
	padding-bottom: calc( 60px + 4.6875vw );
}





/*------------------------------------
                $space
------------------------------------*/
    /*----- 90->60px -----*/
    .rl-row-90{
        padding-top: calc( 54px + 1.875vw ); 
        padding-bottom: calc( 54px + 1.875vw );         
    }

    .rl-row-top-90{ 
        padding-top: calc( 54px + 1.875vw ); 
        padding-bottom: 0; 
    }

    .rl-row-bottom-90{
        padding-top: 0; 
        padding-bottom: calc( 54px + 1.875vw );        
    }

    /*----- 30px ->20px -----*/
    .rl-row-30{
        padding-top: calc( 18px + 0.625vw ); 
        padding-bottom: calc( 18px + 0.625vw );         
    }
    .rl-row-top-30{ 
        padding-top: calc( 18px + 0.625vw ); 
        padding-bottom: 0; 
    }
    .rl-row-bottom-30{
        padding-top: 0; 
        padding-bottom: calc( 18px + 0.625vw );         
    }

    /*----- 120px ->80px -----*/
    .rl-row-120{
        padding-top: calc( 72px + 2.5vw ); 
        padding-bottom: calc( 72px + 2.5vw );       
    }
    .rl-row-top-120{ 
        padding-top: calc( 72px + 2.5vw );
        padding-bottom: 0; 
    }
    .rl-row-bottom-120{
        padding-top: 0; 
        padding-bottom: calc( 72px + 2.5vw );        
    }

    /*----- 20 px -----*/
    .rl-row-20{
        padding-top: 20px; 
        padding-bottom: 20px;         
    }
    .rl-row-top-20{ 
        padding-top: 20px; 
        padding-bottom: 0; 
    }
    .rl-row-bottom-20{
        padding-top: 0; 
        padding-bottom: 20px;         
    }

	.rl-button-default,
	.rl-button-default:active,
	.rl-button-default:active:focus,
	.rl-button-default:focus {
		padding: 6px 20px;
		border: 2px solid #ff9f00;
		border-radius: 10px;
		min-width: 210px;
		background-color: #ff9f00;
		color: #fff;
		font-size: calc(0.125vw + 17.6px); /*20~18px 1920~320px */
		transition: all 0.17s ease-in-out;
		outline: none;
	}

	.rl-button-default:hover {
		color: #ff9f00;
		background-color: transparent;
		border: 2px solid #ff9f00;
	}


/*------------------------------------
            $Banner
------------------------------------*/
.main-banner {
	position: relative;
	overflow: hidden;
}

.main-banner .main-banner-background {
	width: 100%;
	min-width: 1000px;
}

.main-banner-content {
	position: absolute;
	left: 0px;
	top: 0px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding-left: 13%;
	height: 100%;
	color: #ffffff;
}

.main-banner-content h1 {
	display: flex;
    align-items: end;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: clamp(28px, calc(1vw + 22.8px), 42px);
	font-weight: 900;
}

.main-banner-content p {
	margin-left: 3px;
	font-size: clamp(20px, calc(0.5vw + 18.4px), 28px);
	font-weight: 400;
}

.main-banner-content p.specially-description {
	color: #e5971d;
	font-family: 'Roboto', sans-serif;
}

/*------------------------------------
        $RL Office Selection
------------------------------------*/
.rl-selection-container .title{
	padding-top: 0;
	text-align: center;
}

.area-title{
	font-size: calc(16.8px + 0.375vw);
    color: #555;
    font-weight: 400;
	padding-top: 0;
    padding-bottom: calc(19px + 0.3125vw);
	text-align: center;
	line-height: 1.2;
}

.portalSubBanner{
	position: relative;
	display: block;
}
	.portalSubBanner .mask1{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		-webkit-transition: box-shadow 0.2s ease-out;
		transition: box-shadow 0.2s ease-out;
	}
	.portalSubBanner:hover .mask1{ box-shadow: inset 0px 0px 190px 40px #111111; }


/*------------------------------------
        $Popular categories
------------------------------------*/
.slide-wrapper{ position: relative; }
.slide-content{
	list-style: none;
	padding: 0;
	position: relative;
	margin-bottom: 0;
}
	/*-----start three column  -----*/
	.slide-content.three-column li{
		width: calc((100% - ( 106px ) - ( 20px * 3 )) / 3 );
	}
	/*-----end three column  -----*/


	.slide-content li{
		background-color: #FFFFFF;
		margin-right: 20px;
		overflow: hidden;
		position: relative;
		float: left;
		width: calc((100% - ( 106px ) - ( 20px * 4 )) / 4 );
		background-color: #171717;
	}	
		.slide-content li img{
			-webkit-transition: transform 0.3s ease-in-out;
					transition: transform 0.3s ease-in-out;
			transform: none;
		}
		.slide-content li .mask{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
			-webkit-transition: box-shadow 0.2s ease-out;
					transition: box-shadow 0.2s ease-out;
		}
		.slide-content li:hover .mask{ box-shadow: inset 0px -30px 180px 60px #000000; }
		.slide-content li:last-of-type{
			
			margin-right: 0;
			width:106px;

		}

		.rl-btn-more{
			display: none;
			width: 100%;
			font-size: calc( 16.8px + 0.375vw );
			font-weight: bold;
			color: #fff;
			padding: 10px calc(12px + 0.9375vw);
		}

	.card-info{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		margin: 0 0 calc(8px + 0.625vw) calc(8px + 0.625vw); /*20 -> 10*/
	}
		.img-card-logo{
			margin-bottom: calc(4px + 0.3125vw); /*10 -> 5*/
		}
		.card-title{
			color: #fff;
    		font-size: calc( 16.8px + 0.375vw ); /*24-18*/
			-webkit-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			display: block;
			font-weight: bold;
		}





/*------------------------------------
        $Developer content 
------------------------------------*/
.bg-developer-content.ic{
	background: url(../../images/Portal/ic_portal/default/content_bk.jpg)
}
.bg-developer-content.cta{
	background: url(../../images/Portal/cta_portal/default/content_bk.jpg)
}
.bg-developer-content.cc{
	background: url(../../images/Portal/cc_portal/default/content_bk.jpg)
}
.bg-developer-content.ct{
	background: url(../../images/Portal/ct_portal/default/content_bk.jpg)
}
	.bg-developer-content .area-title{
		color: white;
	}

.contentItem-container{
	padding: 0 30px 0 0;
	text-align: center;
	margin: 0 auto;
	
}
	.contentItem-container .box1{
		padding: calc(24.6px + 1.0625vw) calc(28px + 2.1875vw); /* 45 -> 28, 70 -> 35 */
		background: #fff;
	}
	.contentItem-container img{
		margin: 0 auto;
		margin-bottom: calc(19px + 0.3125vw); /* 25 -> 20 */
	}
	.contentItem-container button{
		width: 100%;
	}
	.rl-btn-portal{
		font-size: 20px;
    	padding: 10px;
		background-color: #555;
		/*background-color: #fe9e00;*/
	}
	.contentItem-container + .contentItem-container{
		padding-left: 30px;
		padding-right: 0;
	}

	.contentItem-container .box2 a{
		text-align: right;
	}

	.contentItem-container .contentItem-link{
		font-size: calc(17.6px + 0.125vw); /* 20 -> 18 */
		text-decoration: none;
		text-shadow: 0 0 40px rgba(0,0,0,1);
		padding-top: 10px;
		display: inline;
		float: right;
		border-bottom: 2px solid;
	}



/*------------------------------------
             $Goodies 
------------------------------------*/
.rl-coodiesItem-container{
	text-align: left;
	padding-top: 20px;
	padding-bottom: 20px;
}

	.rl-coodiesItem-container img{
		margin: 0 auto;
		margin-bottom: 10px;
	}
	.rl-coodiesItem-container p,
	.rl-coodiesItem-top{
		/*margin: 0 auto;*/
		max-width: 320px;
		margin-bottom: 15px;
	}
		.img-goodies{
			max-width: 214px;
			width: 100%;
			padding-bottom: 42.5%;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			margin: 0 auto 10px;
		}
		.img-da{
			background-image: url(../../images/portal/da_point.jpg);
		}
		.img-bigcombo{
			background-image: url(../../images/portal/BigCombo.jpg);
		}
		.img-top30{
			background-image: url(../../images/portal/Top30.jpg);
		}
		.img-freebie{
			background-image: url(../../images/portal/Freebie.jpg);
		}

		.rl-coodiesItem-top:hover .img-da{
			background-image: url(../../images/portal/da_point_1.jpg);
		}
		.rl-coodiesItem-top:hover .img-bigcombo{
			background-image: url(../../images/portal/BigCombo_1.jpg);
		}
		.rl-coodiesItem-top:hover .img-top30{
			background-image: url(../../images/portal/Top30_1.jpg);
		}
		.rl-coodiesItem-top:hover .img-freebie{
			background-image: url(../../images/portal/Freebie_1.jpg);
		}
		.rl-coodiesItem-top:hover .title{
			color: #999;
		}
	.rl-coodiesItem-container p{
		font-size: calc(15.6px + 0.125vw);
	}
	.rl-coodiesItem-container .title{
		color: #4d4d4d;
		font-weight: bold;
    	font-size: calc(16.8px + 0.375vw);
	}
	.rl-coodiesItem-container a:hover,
	.rl-coodiesItem-container a:focus,
	.rl-coodiesItem-container a:active,
	.rl-coodiesItem-container a:active:focus{
		text-decoration: none;
	}

	.rl-coodiesItem-container .title .fa-angle-right{
		font-size: calc(0.3469210754553339vw + 21.33911535125759px); /*28px(1920px) -> 24px(767px) -> 22px(320px)*/
		display: inline;
		vertical-align: top;
	}
	
/* ---- odd column ----- */
.rl-coodies-container.odd-column{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

		

/*------------------------------------
             $Showcase 
------------------------------------*/
.info-container{
	position: absolute;
	bottom: calc(14px + 0.3125vw);  /*20 => 15*/
	left: calc(14px + 0.3125vw);
	width: calc(100% - 40px);
}
	.info-container .title{
		font-size: calc(16.8px + 0.375vw);
		font-weight: 500;
		color: #fff;
		padding: 0 0 0 18px;
		line-height: 1.1;
	}

.rl-playbutton-showcase{
	top:47%;
}
.rl-showcaseItem-container{
	margin: 0 auto;
	width: calc((100% - 60px) / 2);
	max-width: 667px;
}
.rl-showcaseItem-container + .rl-showcaseItem-container{
	margin-left: 60px;
}
.rl-btn-showcase{
	background: rgba(29,39,39,0.6);
    border: none;
    padding: 11px calc(6px + 1.25vw); /*30 => 10*/
    font-size: calc(17.2px + 0.25vw);
}
.seemore-container{
	position: absolute;
    bottom: -5px;
    right: 0;
	font-size: calc(15.6px + 0.125vw); /*18 => 16*/
}
	.seemore-container.one{
		bottom: -35px;
	}
	.seemore-container > a,
	.seemore-container > a:focus, .seemore-container > a:active, .seemore-container > a:active:focus{
		font-weight: 500;
    	border-bottom: 2px solid;
		font-size: calc(17.6px + 0.125vw);
		text-decoration: none;
	}

	.seemore-container > a:hover{
		color: #4d4d4d;
	}

	.seemore-container > a > i,
	.seemore-container > i,
	.contentItem-link > i,
	.rl-btn-portal > i,
	.rl-btn-more > i{
		margin-left: calc(8px + 0.625vw);
	}
.rl-showcaseItem-container .slick-dots{
	text-align: left;
	min-height: 24px;
    bottom: -35px;
}

.rl-showcaseItem-container .slick-dots li.slick-active button:before{
	color: #FAAA1B;
}
.rl-showcaseItem-container .slick-dots li button:before{
	color: #4d4d4d;
	opacity: 1;
}

.mask2{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(0,0,0,0.25);
}
	



/*------------------------------------
           $Export CONTENT
------------------------------------*/
.img-space-center{
	margin: calc(18px + 0.625vw) auto 0;
}
.rl-btn-portal.onecolum{
	padding-left: calc(12px + 0.9375vw);
	padding-right: calc(12px + 0.9375vw);
}





/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and ( max-width: 1540px ){
	/*------------------------------------
				$Goodies 
	------------------------------------*/
	/* ---- odd column ----- */
	.rl-coodies-container.odd-column{
		width: auto;
	}
}


@media screen and ( max-width: 1199px ){
	.banner-inner-container{
		height: 400px;
	}

	/*------------------------------------
			$Popular categories
	------------------------------------*/
	.slide-content li{
		width: calc((100% - ( 20px * 1 )) / 2 );
		margin: 0 20px 20px 0;
	}
	.slide-content li:nth-of-type(even){		
		margin-right: 0;
	}
	.slide-content li:last-of-type{		
		display: none;
	}
	.rl-btn-more{
		display: block;
	}

	/*-----start three column  -----*/
	.slide-content.three-column li{
		width: calc((100% - ( 20px * 2 )) / 3 );
	}
	.slide-content.three-column li:nth-of-type(even){
		margin-right: 20px;
	}
	.slide-content.three-column li:nth-of-type(3){
		margin-right: 0;
	}
	/*-----end three column  -----*/


	
}

@media screen and ( max-width: 1100px ){
	/*------------------------------------
			$Developer content 
	------------------------------------*/
	.contentItem-container{
		width: 100%;
		padding: 0 ;
	}
	.contentItem-container + .contentItem-container {
		padding: 0 ;
		padding-top: calc( 16px + 1.25vw ); /* rl-row-bottom-40 */
	}


}

@media screen and ( max-width: 1000px ){
	/*------------------------------------
            $Banner
	------------------------------------*/

	.main-banner .main-banner-background {
		margin-left: calc(22.84vw + -228.45px); /* 0~-53px 1000~768px */
	}
}




@media screen and ( max-width: 991px ){
	/*------------------------------------
				$Goodies 
	------------------------------------*/
	.rl-coodies-container .rl-coodiesItem-container:nth-of-type(1),
	.rl-coodies-container .rl-coodiesItem-container:nth-of-type(2){
		border-bottom: 1px solid #bebebe;
	}

	.rl-coodies-container .rl-coodiesItem-container:nth-of-type(3){
		border-left:none;
	}

	.rl-coodiesItem-container{
		padding-top: 40px;
    	padding-bottom: 40px;
		border: none !important;
	}

	.rl-coodies-container{
		max-width: 720px;
    	margin: 0 auto;
	}
	/* ---- odd column ----- */
	.rl-coodies-container.odd-column{
		width: auto;
	}


	/*------------------------------------
				$Banner
	------------------------------------*/
		/*.main-banner {
			width:53%; 
		}*/
}


@media screen and ( max-width: 767px ){
	/*------------------------------------
            	$General
	------------------------------------*/

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

	.rl-btn-portal{
		font-size: calc(1.342281879194631vw + 9.704697986577182px); /*20(767px)-14(320px)*/
	}

	/*------------------------------------
            	$Banner
	------------------------------------*/
	.main-banner img {
		margin-left: 0px;
		min-width: 0px;
	}

	.main-banner-content {
		padding-left: 8%;
		padding-right: 8%;
	}


	.main-banner-content .main-banner-button-wrapper {
		text-align: center
	}

	/*------------------------------------
			$RL Office Selection
	------------------------------------*/
	.area-title{
		font-weight: 300;
	}



	/*------------------------------------
				$Showcase 
	------------------------------------*/
	.rl-showcaseItem-container{
		width: 100%;
		margin-bottom: calc(7.829977628635347vw + 34.94407158836689px); /*95 -> 60*/
		padding: 0;
	}
			
	.rl-showcaseItem-container img,
	.rl-showcaseItem-container + .rl-showcaseItem-container{
		margin: 0 auto;
	}

	.info-container{
	    text-align: center;
		width: 95%;
		margin: 0 auto;
	}

	/*------------------------------------
			$Popular categories
	------------------------------------*/
	/*-----start three column  -----*/
	.slide-content.three-column li{
		width: 100%;
	}
	.slide-content.three-column li:nth-of-type(even),
	.slide-content.three-column li,
	.slide-content.three-column li:nth-of-type(3){
		margin-right: 0;
	}
	.slide-content.three-column img{
		margin: 0 auto;
	}
	/*-----end three column  -----*/

	/*------------------------------------
				$Goodies 
	------------------------------------*/
	.rl-coodiesItem-container .title .fa-angle-right{
		font-size: calc(0.44742729306487694vw + 20.568232662192393px); /*28px(1920px) -> 24px(767px) -> 22px(320px)*/
	}

}

@media screen and ( max-width: 480px ){
	/*------------------------------------
				$Showcase 
	------------------------------------*/
	.info-container .title{
		width: 100%;
	}

	/*------------------------------------
				$Goodies 
	------------------------------------*/
	.rl-coodies-container .rl-coodiesItem-container:nth-of-type(1),
	.rl-coodies-container .rl-coodiesItem-container:nth-of-type(2){
		border-bottom: none;
	}
	.rl-coodiesItem-container + .rl-coodiesItem-container{
		border-left: none;
		border-top: 1px solid #bebebe;
	}
	.rl-coodiesItem-container{
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
	}

	/*------------------------------------
			$Popular categories
	------------------------------------*/
	.slide-content li{
		width: 100%;
		margin: 0 0 20px;
	}

	/*------------------------------------
			$RL Office Selection
	------------------------------------*/
	.area-title{
		line-height: 1.4;
	}
}