@charset "utf-8";
/* *******************************************************
 * filename : intro.css
 * description : 전체 레이아웃 CSS
 * date : 2018-06-18
******************************************************** */
#introContent{width:100%; height:100%; background:#fff; }

/* -------- 인트로 :: 공통 -------- */

/* 인트로 :: 레이아웃 */
#introContent{}
#introLeftContent, 
#introRightContent{
	position:relative; float:left; width:50%; height:100%; text-align:center; cursor:pointer; white-space: nowrap; 
	/* transition:width 0.8s ease; 
	 -webkit-transition:width 0.8s  ease;  
	-o-transition:width 0.8s ease;  
	-ms-transition:width 0.8s ease;  
	-moz-transition:width 0.8s ease; */
}
@media all and (min-width:801px){
	#introLeftContent.large,
	#introRightContent.large{/* width:calc(100% - 102px); */ cursor:default;}
	/* #introLeftContent.small,
	#introRightContent.small{width:102px;} */
}
@media all and (max-width:800px){
	#introLeftContent, 
	#introRightContent{
		float:none; width:100% !important; height:50%; 
		transition:all 0s cubic-bezier(0.47, 0, 0.21, 0.96); 
		-webkit-transition:all 0s cubic-bezier(0.47, 0, 0.21, 0.96); 
	}
}

/* -------- 인트로 :: 본사(왼쪽) -------- */
#introLeftContent{background:url(/images/intro/intro_left_bg.jpg) no-repeat 0 0; background-size:100% 100%;;}
/* 인트로 :: 언어선택 */
.to-promotion-box{
	width:960px;
	margin:0px auto;
	transition:all 1.5s ease; 
	-webkit-transition:all 0.7s ease;
}
.to-promotion-box .intro-logo{overflow:hidden; width:212px; height:107px; margin:0px auto;}
.to-promotion-box .intro-logo img{
	display:block; 
	transition:all 0.7s ease; 
	-webkit-transition:all 0.7s ease;
	opacity:0;filter:Alpha(opacity=0); 
	-ms-transform: translateY(-50px); 
    -o-transform: translateY(-50px); 
    -moz-transform: translateY(-50px); 
    -webkit-transform: translateY(-50px); 
     transform: translateY(-50px); 
	-webkit-transition:opacity 1.0s, transform 0.7s;
	-moz-transition:opacity 1.0s, transform 0.7s;
	-o-transition:opacity 1.0s, transform 0.7s;
	-ms-transition:opacity 1.0s, transform 0.7s;
	transition:opacity 1.0s, transform 0.7s;
}
#introContent.active .to-promotion-box .intro-logo img{
	opacity:1.0;filter:Alpha(opacity=100); 
	-ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0); 
     transform: translateY(0);
}
.promotion-lang-select-con{
	position:absolute; bottom:-70px; left:50%; margin-left:-150px; height:0; opacity:0;filter:Alpha(opacity=0); visibility:hidden; 
	transition:all 0.7s ease; 
	-webkit-transition:all 0.7s ease;
}
.promotion-lang-select-con ul{text-align:center; width:300px; margin:0px auto;}
.promotion-lang-select-con ul li{display:inline-block; margin:0 16px;}
.promotion-lang-select-con ul li a{position:relative; display:block; height:40px; line-height:40px; padding:0 5px; color:#fff; font-size:16px; font-weight:500; font-family:'Rubik', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.promotion-lang-select-con ul li a span{display:block; }
.promotion-lang-select-con ul li a:before,
.promotion-lang-select-con ul li a:after{
	position:absolute; width:0; height:2px; background-color:#fff; content:"";
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s
}
.promotion-lang-select-con ul li a:before{top:0; left:0;}
.promotion-lang-select-con ul li a:after{bottom:0; right:0}
.promotion-lang-select-con ul li a:hover:before,
.promotion-lang-select-con ul li a:hover:after{width:100%;}
.promotion-img-con{
	position:absolute; top:50%; right:5%;margin-top:-276px; opacity:0;filter:Alpha(opacity=0);visibility:hidden;
	transition:all 0.4s ease 0s; 
	-webkit-transition:all 0.4s ease 0s;  
}
.promotion-img-con{height:0; width:55%; }
.promotion-img-con a{display:block; position:relative; height:0; padding-top:56.25%; width:100%;  }
.promotion-img-con a iframe{position:absolute; top:0px; left:0px ;width:100%; height:100%;}
/* 인트로 :: 본사 Off상태 */
#introLeftContent .off-content-box{
	position:absolute; top:0px; left:0; width:100px; height:100%; opacity:0;filter:Alpha(opacity=0);
	transition:all 0.2s ease; 
	-webkit-transition:all 0.2s ease;  
}
#introLeftContent .off-content-box img{position:absolute; top:50%; left:50%; width:40px;  margin:-98px 0 0 -20px}

@media all and (min-width:801px){
	#introLeftContent.small .off-content-box{
		opacity:1.0;filter:Alpha(opacity=100);
		transition:all 0.6s ease; 
		-webkit-transition:all 0.6s ease;  
	}
	#introLeftContent.small .to-promotion-box{
		opacity:0;filter:Alpha(opacity=0);
		transition:all 0.2s ease; 
		-webkit-transition:all 0.2s ease;
	}
	/* 인트로 :: 본사 On상태 */
	#introLeftContent.large .to-promotion-box{
		/* transform:translateX(-25%);
		-webkit-transform:translateX(-25%); */
	/* 	position:absolute; top:0px; left:0; bottom:0px;  */ position:relative; width:720px; margin:0;
	}
	#introLeftContent.large .promotion-img-con{
		opacity:1.0;filter:Alpha(opacity=100); visibility:visible;
		transition:all 0.5s ease 0.3s; 
		-webkit-transition:all 0.5s ease 0.3s;  
	}
	#introLeftContent.large .promotion-lang-select-con{
		padding-top:40px; height:auto; opacity:1.0;filter:Alpha(opacity=100); visibility:visible;
	}
}

@media all and (min-width:801px) and (max-width:1700px){
	.to-promotion-box{width:100%;}
	.promotion-img-con{width:60%; margin-top:-15%;}
	.promotion-img-con img{max-width:100%;}
	#introLeftContent.large .to-promotion-box{
		/* transform:translateX(-30%);
		-webkit-transform:translateX(-30%); */
		width:35%;
	}
}
@media all and (max-width:800px){
	.promotion-img-con{display:none;}
	.off-content-box{display:none;}
	.to-promotion-box{width:auto;}
	.to-promotion-box .intro-logo{width:139px; height:70px;}
	.to-promotion-box .intro-logo img{height:70px}
	.promotion-lang-select-con{position:static; margin-left:0; height:auto; visibility:visible; opacity:1.0;filter:Alpha(opacity=100);; padding-top:20px;}
	.promotion-lang-select-con ul{
		width:auto;
		opacity:0;filter:Alpha(opacity=0); 
		-ms-transform: translateX(-100px); 
		-o-transform: translateX(-100px); 
		-moz-transform: translateX(-100px); 
		-webkit-transform: translateX(-100px); 
		 transform: translateX(-100px); 
		-webkit-transition:opacity 1.0s, transform 1.0s;
		-moz-transition:opacity 1.0s, transform 1.0s;
		-o-transition:opacity 1.0s, transform 1.0s;
		-ms-transition:opacity 1.0s, transform 1.0s;
		transition:opacity 1.0s, transform 1.0s;
	}
	#introContent.active .promotion-lang-select-con ul{
		opacity:1.0;filter:Alpha(opacity=100); 
		-ms-transform: translateX(0); 
		-o-transform: translateX(0); 
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0); 
		 transform: translateX(0);
	}
}
@media all and (max-width:480px){
	.to-promotion-box .intro-logo{width:119px; height:60px;}
	.to-promotion-box .intro-logo img{height:60px}
	.promotion-lang-select-con{}
	/* .promotion-lang-select-con ul li{display:block; margin:0; margin-top:5px;} */
	.promotion-lang-select-con ul li a{display:inline-block; height:34px; line-height:34px;} 
}

/* -------- 인트로 :: 이마쥬(오른쪽) -------- */
/* 인트로 :: 이마쥬 (오른쪽) */
#introRightContent{background:url(/images/intro/intro_right_bg.jpg) no-repeat 0 0; background-size:100% 100%;}
.to-brand-page-box .intro-logo{overflow:hidden; width:204px; height:74px; margin:0px auto;}
.to-brand-page-box .intro-logo img{
	display:block; 
	transition:all 0.7s ease; 
	-webkit-transition:all 0.7s ease;
	opacity:0;filter:Alpha(opacity=0); 
	-ms-transform: translateY(50px); 
    -o-transform: translateY(50px); 
    -moz-transform: translateY(50px); 
    -webkit-transform: translateY(50px); 
     transform: translateY(50px); 
	-webkit-transition:opacity 1.0s, transform 0.7s;
	-moz-transition:opacity 1.0s, transform 0.7s;
	-o-transition:opacity 1.0s, transform 0.7s;
	-ms-transition:opacity 1.0s, transform 0.7s;
	transition:opacity 1.0s, transform 0.7s;
}
#introContent.active .to-brand-page-box .intro-logo img{
	opacity:1.0;filter:Alpha(opacity=100); 
	-ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0); 
     transform: translateY(0);
}
.brand-list-con{
	position:absolute; top:0px; left:0px; width:100%; height:100%; opacity:0;filter:Alpha(opacity=0); visibility:hidden;
	transition:all 0.3s ease; 
	-webkit-transition:all 0.3s ease;
}
.brand-list-con ul{height:100%; width:100%; text-align:left;}
.brand-list-con ul li{overflow:hidden; position:relative; height:33.33%; width:100%; background-size:cover !important;transition:all 0.3s ease;-webkit-transition:all 0.3s ease;}
.brand-list-con ul li .brand-list-img-con{
	position:absolute; top:0px; left:0px; width:100%; height:100%; background-size:cover  !important; 
	-webkit-transition:transform 0.3s  ease-in-out ;
    transition:transform 0.3s ease-in-out ;	
}
.brand-list-con ul li:hover .brand-list-img-con{
    -webkit-transform: scale(1.1,1.1) rotate(0.0001deg);
     transform: scale(1.1,1.1) rotate(0.0001deg);
}
.brand-list-con ul li a{position:relative;z-index:1; width:100%; height:100%; }
.brand-list-con ul li .brand-list-tit{
	padding-left:5%; width:440px;transition:all 0.3s ease;-webkit-transition:all 0.3s ease;
	opacity:0;filter:Alpha(opacity=0); 
	-ms-transform: translateX(-100px); 
    -o-transform: translateX(-100px); 
    -moz-transform: translateX(-100px); 
    -webkit-transform: translateX(-100px); 
     transform: translateX(-100px); 
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
.intro-content-box.large .brand-list-con ul li .brand-list-tit{
	opacity:1.0;filter:Alpha(opacity=100); 
	-ms-transform: translateX(0); 
    -o-transform: translateX(0); 
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0); 
     transform: translateX(0);
}
.brand-list-con ul li.brand-list-item1 .brand-list-tit{-webkit-transition-delay:0.3s; transition-delay:0.3s; }
.brand-list-con ul li.brand-list-item2 .brand-list-tit{-webkit-transition-delay:0.4s; transition-delay:0.4s; }
.brand-list-con ul li.brand-list-item3 .brand-list-tit{-webkit-transition-delay:0.5s; transition-delay:0.5s; }
.brand-list-con ul li .brand-list-tit strong,
.brand-list-con ul li .brand-list-tit span{color:#fff; text-shadow:1px 1px 3px rgba(0, 0, 0, .4);}
.brand-list-con ul li .brand-list-tit strong{font-size:40px; letter-spacing:-1px; font-weight:600}
.brand-list-con ul li .brand-list-tit span{font-size:22px; letter-spacing:-0.5px; margin-left:15px; font-family:'Rubik', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}

/* 인트로 :: 이마쥬 Off상태 */
#introRightContent .off-content-box{
	position:absolute; top:0px; left:0; width:100px; height:100%; opacity:0;filter:Alpha(opacity=0);
	transition:all 0.2s ease; 
	-webkit-transition:all 0.2s ease;  
}
#introRightContent .off-content-box img{position:absolute; top:50%; left:50%; width:24px; margin:-123px 0 0 -12px}
@media all and (min-width:801px){
	#introRightContent.small .off-content-box{
		opacity:1.0;filter:Alpha(opacity=100);
		transition:all 0.6s ease; 
		-webkit-transition:all 0.6s ease;  
	}
	#introRightContent.small .to-brand-page-box{
		opacity:0;filter:Alpha(opacity=0);
		transition:all 0.3s ease; 
		-webkit-transition:all 0.3s ease;
	}
	/* 인트로 :: 본사 On상태 */
	#introRightContent.large .brand-list-con{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
}


@media all and (max-width:1220px){
	.brand-list-con ul li{background-position:100% 0 !important; background-size:cover !important}
	.brand-list-con ul li .brand-list-tit strong{font-size:28px; color:#fff !important}
	.brand-list-con ul li .brand-list-tit span{font-size:16px; color:#fff !important}
}
@media all and (max-width:800px){
	.brand-list-con{
	}
	.brand-list-con ul li{position:relative; background-position:70% 0 !important; background-size:cover !important;}
	.brand-list-con ul li .brand-list-img-con{background-position:70% 0 !important; }
	.brand-list-con ul li:before{position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0.3); content:"";}
	.to-brand-page-box .intro-logo{width:138px; height:50px}
	.to-brand-page-box .intro-logo img{height:50px}
	.brand-list-con ul li a{position:relative; z-index:1; }
	.brand-list-con ul li .brand-list-tit{padding-left:0; text-align:left; width:auto;padding-left:7%;}
	.brand-list-con ul li .brand-list-tit strong{display:block; font-size:28px; }
	.brand-list-con ul li .brand-list-tit span{display:block; margin-left:0; font-size:16px; margin-top:5px; }

	/* 인트로 :: 본사 On상태 */
	#introRightContent.large .brand-list-con{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
}
@media all and (max-width:480px){
	.to-brand-page-box .intro-logo{width:110px; height:40px;}
	.to-brand-page-box .intro-logo img{height:40px}
	.brand-list-con ul li .brand-list-tit strong{font-size:20px;}
	.brand-list-con ul li .brand-list-tit span{font-size:13px;}
}