@charset "utf-8";

/* ******************************************************  서브공통 ****************************************************** */
/* ****************** SUB VIAUAL ****************** */
#subVisual{position:relative; overflow:hidden; width:100%; height:828px; margin-top:0px;}
#subVisual .visualVideo{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
}
#subVisual .visualVideo > video{min-width:100%; min-height:100%; object-fit: cover;}
#subVisual .visualVideo > iframe{min-width:100%; min-height:100%;}
#subVisual .visualImg{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
	-webkit-transition:transform 1500ms  cubic-bezier(0, 0.41, 0.58, 1) ;
	-moz-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
	-o-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
	-ms-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
    transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;	
}
#subVisual .visualTxt{position:relative; z-index:9; width:100%; height:calc(100% - 80px); text-align:center; letter-spacing:0.5px; line-height:1.2; color:#fff;}
#subVisual .visualTxtBox{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; padding:0px 30px;}
#subVisual .visual-category,
#subVisual .visual-tit,
#subVisual .visual-brand-tit,
#subVisual .visual-txt{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(30px); 
    -o-transform: translateY(30px); 
    -moz-transform: translateY(30px);
    -webkit-transform: translateY(30px); 
     transform: translateY(30px);
	-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;
}
#subVisual .visual-category{
	font-weight:500; 
	font-size:42px; 
	margin-bottom:50px;
}
#subVisual .visual-tit{
	font-weight:500; 
	font-size:75px; 
	margin-bottom:30px;
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}
#subVisual .visual-brand-tit{
	font-weight:500; 
	font-size:400%; 
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}
#subVisual .visual-tit + .visual-txt{
	-webkit-transition-delay:0.5s;
	-moz-transition-delay:0.5s;
	-o-transition-delay:0.5s;
	-ms-transition-delay:0.5s;
	transition-delay:0.5s;
}
#subVisual .visual-txt{
	font-size:25px; 
	font-weight:300; 
	padding-bottom:7px;
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}
/* SubVisual :: active */
#subVisual.active .visualImg{
	-ms-transform: scale(1.1,1.1) rotate(0.002deg);
    -o-transform: scale(1.1,1.1) rotate(0.002deg);
    -moz-transform: scale(1.1,1.1) rotate(0.002deg);
    -webkit-transform: scale(1.1,1.1) rotate(0.002deg);
     transform: scale(1.1,1.1) rotate(0.002deg);
}
#subVisual.active .visual-category,
#subVisual.active .visual-tit,
#subVisual.active .visual-brand-tit,
#subVisual.active .visual-txt{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0px); 
    -o-transform: translateY(0px); 
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px); 
     transform: translateY(0px);
}
/* -------- SubVisual 반응형 -------- */
@media all and (max-width:1220px){
	#subVisual{height:750px;}
	#subVisual .visualTxt{padding:0; padding-top:50px; margin-top:0; height:calc(100% - 45px);}
}
@media all and (max-width:1024px){
	#subVisual{height:650px; min-height:auto}
	#subVisual .visual-category{font-size:35px;margin-bottom:30px;}
	#subVisual .visual-tit{font-size:60px;margin-bottom:20px;}
	#subVisual .visual-txt{font-size:20px;}
	#subVisual .visual-brand-tit{font-size:350%; }
}
@media all and (max-width:800px){
	#subVisual{height:450px;}
	#subVisual .visual-category{font-size:30px;}
	#subVisual .visual-tit{font-size:45px;}
	#subVisual .visual-txt{font-size:18px;}
	#subVisual .visual-brand-tit{font-size:200%; }
}
@media all and (max-width:480px){
	#subVisual .visual-category{font-size:20px;}
	#subVisual .visual-tit{font-size:32px;}
	#subVisual .visual-txt{font-size:15px;}
	#subVisual .visual-brand-tit{font-size:150%;}
}


/* ****************** SUB MENU ****************** */
/* --------  SUB MENU PC -------- */
#subMenuPC{position:relative; margin-top:0px; width:100%; display:block; height:80px; background-color:#008cd2; z-index:11}
#subMenuPC .subMenuInner{text-align:center; width:100%; height:80px;}
#subMenuPC .subMenuInner ul{display:flex; justify-content:center;}
#subMenuPC .subMenuInner ul li{flex:1; -ms-flex: 1;} /* max-width:245px; */
/*#subMenuPC .subMenuInner ul{display:inline-block; *display:inline;*zoom:1;}
#subMenuPC .subMenuInner ul li{display:inline-block; width:200px;}*/ /* max-width 자유롭게 수정 */
#subMenuPC .subMenuInner ul li{margin-left:-4px}
#subMenuPC .subMenuInner ul li:first-child{margin-left:0}
#subMenuPC .subMenuInner ul li > a{
	display:table; 
	position:relative;
	width:100%;
	height:80px; 
	line-height:1.2; 
	color:#fff; 
	font-size:115%; 
	font-weight:700;
	letter-spacing:0px; 
	word-break:keep-all;
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;
}
#subMenuPC .subMenuInner ul li > a:before{position:absolute; top:25px; bottom:25px; left:0; width:1px; background-color:#fff; content:""; opacity:0.15;filter:Alpha(opacity=15);}
#subMenuPC .subMenuInner ul li:first-child > a:before{display:none;}
#subMenuPC .subMenuInner ul li > a > span{display:table-cell; vertical-align:middle; padding:0 25px;}
#subMenuPC .subMenuInner ul li > a:hover{color:#96f6ff;}
#subMenuPC .subMenuInner ul li.on > a{color:#008cd2; background-color:#fff;}
#subMenuPC .subMenuInner ul li.on + li > a:before{display:none;}

#subMenuPC.fixed {position:fixed; width:100%; top:0px; left:0; height:80px; margin-top:0px; z-index:9999;}/* SUB MENU PC :: FIXED */
#subMenuMobile{display:none;}/* SUB MENU MOBILE :: HIDDEN */

/* -------- SUB MENU :: 반응형 -------- */
@media all and (max-width:1220px){
	#subMenuPC .area{padding:0 30px;}
	#subMenuPC .subMenuInner ul li > a > span{padding:0 15px;}
}
@media all and (max-width:800px){
	#subMenuPC{display:none} /*  SUB MENU PC :: HIDDEN */
    /* --------  SUB MENU MOBILE -------- */
	#subMenuMobile{position:relative; margin-top:-45px; width:100%; display:block; height:45px; background-color:#008cd2; z-index:11}
	#subMenuMobile .subMenuInner{height:45px }
	#subMenuMobile .menu-location{position:relative;}
	#subMenuMobile .menu-location > .cur-location{position:relative; display:block; height:44px; padding:0 30px 0 15px;}
	#subMenuMobile .menu-location > .cur-location span{display:block; white-space:nowrap; overflow:hidden; font-size:15px; text-overflow:ellipsis; line-height:44px; color:#fff; font-weight:400; font-size:15px;}
	#subMenuMobile .menu-location > .cur-location .arrow{position:absolute; top:50%; right:10px; width:20px; height:20px;margin-top:-8px; font-size:20px; color:#fff;}
	#subMenuMobile .menu-location > .cur-location .arrow i{color:#fff;}
	#subMenuMobile .menu-location > .cur-location.open .arrow{transform:rotate(-180deg); margin-top:-10px;}
	
	#subMenuMobile .menu-location .location-menu-con{display:none; position:absolute; top:44px; left:0px; width:100%; background-color:rgba(0,0,0,0.9); z-index:11; padding-top:10px;padding-bottom:10px;}
	#subMenuMobile .menu-location.location1 .location-menu-con{width:calc(100% - 1px)}
	#subMenuMobile .menu-location .location-menu-con li{position:relative;}
	#subMenuMobile .menu-location .location-menu-con li a{display:block; padding:7px 15px; font-size:15px; line-height:1.5; word-break:keep-all; color:#fff;}
	#subMenuMobile .menu-location .location-menu-con li a .gnb-icon{position:absolute; top:5px; right:10px; }
	#subMenuMobile .menu-location .location-menu-con li.on a{color:#008cd2; font-weight:700;}
}

/* SUB LAYOUT :: 서브메뉴 Fixed (공통) */
@media all and (min-width:1221px){
	.fixed-sub-menu.fixed .subMenuInner{position:fixed; top:0px; left:0px; z-index:9999;}
}



/* ******************  :: TAB 스타일 ::  ********************* */
.tabArea{padding:4% 0 0;}
.tabArea ul{display:flex; flex-wrap: wrap; justify-content:center;}
.tabArea ul li{flex:1; -ms-flex: 1;border:1px solid #008cd2;background-color:#fff;}
.tabArea ul li{margin-left:-1px}
.tabArea ul li:first-child{margin-left:0}
.tabArea ul li > a{
	display:table; 
	position:relative;
	width:100%;
	height:66px;line-height:1.2;
	text-align:center;
	color:#008cd2; 
	font-size:110%; 
	font-weight:700;
	letter-spacing:-0.5px; 
	word-break:keep-all;
}
.tabArea ul li > a > span{display:table-cell; vertical-align:middle; padding:0 18px;}
.tabArea ul li:hover{background-color:#f3f3f3;}
.tabArea ul li.on{background-color:#ebf8fe;}
@media all and (max-width:1024px){
    .tabArea ul li > a{font-size:100%;}
}
@media all and (max-width:800px){
    .tabArea ul li > a{height:50px;}
}
@media all and (max-width:600px){
    .tabArea ul li{flex:100%; margin-left:0px; margin-bottom:-1px;}
    .tabArea ul li:last-child{margin-bottom:0}
    .tabArea ul li > a{height:40px;}
}



/* ****************** CONTENT  :: 컨텐츠 레이아웃 ****************** */
#content{padding:5% 0 10%;}
#content .subTitle{font-size:40px;font-weight:500;letter-spacing:-0.5px;text-align:center;margin-bottom:5%;}
@media all and (max-width:1220px){
	#content{padding:7% 0 12%}
}
@media all and (max-width:1024px){
	#content{padding:8% 0 13%}	
    #content .subTitle{font-size:36px;}
}
@media all and (max-width:800px){
    #content .subTitle{font-size:33px;}
}
@media all and (max-width:480px){
	#content{padding:30px 0px 50px}
    #content .subTitle{font-size:25px;}
}



/* ******************************************************  서브페이지 ********************************************************** */
/* ******************  WHO WE ARE  ****************** */
/* -------- Welcome Message  -------- */
.welcomeTxt{font-size:50px;font-weight:700;line-height:1.3;color:#008cd2;margin-bottom:50px;text-align:center;}/*word-break: break-all;*/
.welcomeTxtSub{font-size:24px;font-weight:500;line-height:1.3;margin-bottom:30px;}
.welcomeTxtBox{width:100%;padding:5% 20% 0;}
.slideBox{position:relative; width:100%; height:600px;}
@media all and (max-width:1024px){
.welcomeTxt{font-size:42px;margin-bottom:30px;}
.welcomeTxtSub{font-size:20px;}
.slideBox{height:52vh;}
}
@media all and (max-width:800px){
.welcomeTxt{font-size:32px;}
.welcomeTxtSub{font-size:18px;margin-bottom:20px;}
.welcomeTxtBox{padding:7% 15% 0;}
.slideBox{height:48vh;}
}
@media all and (max-width:480px){
.welcomeTxt{font-size:20px; margin-bottom:20px;}
.welcomeTxtSub{font-size:15px; margin-bottom:15px;}
.welcomeTxtBox{padding:8% 0% 0;}
.slideBox{height:25vh;}
}

/* -------- MidBanner  -------- */
#midBanner{position:relative; width:100%; height:396px;background-size:cover !important;margin-bottom:8%;}
#midBanner .midbannerWrap{
	position:absolute; top:50%; left:0px; width:100%;
	-ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%);
	text-align:center;
}
#midBanner .midbannerWrap .midbannerTxt{display:block; font-size:220%; font-weight:700; line-height:1.3; color:#fff;}
#midBanner .midbannerWrap .midbannerTxtThin{display:block; font-size:220%; font-weight:500; line-height:1.3; color:#fff;}
#midBanner .midbannerWrap .midbannerTxtsub{display:block; font-size:130%; font-weight:300; line-height:1.3; color:#fff; margin-top:50px;}
@media all and (max-width:1024px){
#midBanner{height:40vh;}
#midBanner .midbannerWrap .midbannerTxt{font-size:200%;}
#midBanner .midbannerWrap .midbannerTxtThin{font-size:200%;}
#midBanner .midbannerWrap .midbannerTxtsub{margin-top:30px;}
}
@media all and (max-width:800px){
#midBanner{height:30vh;}
#midBanner .midbannerWrap .midbannerTxt{font-size:180%; font-weight:500;}
#midBanner .midbannerWrap .midbannerTxtThin{font-size:180%; font-weight:500;}
#midBanner .midbannerWrap .midbannerTxtsub{font-size:100%;}
}
@media all and (max-width:480px){
#midBanner{height:18vh;}
#midBanner .midbannerWrap .midbannerTxt{font-size:120%;}
#midBanner .midbannerWrap .midbannerTxtThin{font-size:120%;}
#midBanner .midbannerWrap .midbannerTxtsub{margin-top:20px;}
}


/* -------- History -------- */
.halfContainer{display:table;width:100%;max-width:1200px; margin:0px auto;}
.halfContainer .halfBox{display:table-cell; width:50%; vertical-align:top;}
.halfContainer .halfBox:nth-child(1){padding-right:20px;}
.halfContainer .halfBox:nth-child(2){padding-left:20px;}
.historyBox{position:relative;width:100%;margin-bottom:10%;}
.historyYear{position:absolute;top:0;left:0;z-index:99;}
.historyYear span{font-size:180%;line-height:1.3;font-weight:900;}
.historyDetail{position:relative;width:100%;padding-left:20%;}
.historyDetail li{position:relative;padding:5px 15px 5px 45px;text-indent:-55px;margin-left:55px;}
.historyDetail li label{position:absolute;left:0;font-weight:500;}
.historyDetail li img{height:auto;width:auto;margin-right:10px;}
@media all and (max-width:1220px){
	.halfContainer{padding:0 30px;}
}
@media screen and (max-width:1024px) {
    .halfContainer .halfBox:nth-child(1){padding-right:10px;}
    .halfContainer .halfBox:nth-child(2){padding-left:10px;}
    .historyYear span{font-size:170%;}
	.historyDetail li{padding:5px 25px 5px 45px;}
}
@media all and ( max-width: 800px ){
	.halfContainer{padding:0 15px;}
    .halfContainer .halfBox{display:block;width:100%;}
    .halfContainer .halfBox:nth-child(1){padding-right:0px;}
    .halfContainer .halfBox:nth-child(2){padding-left:0px;}	
    .historyYear span{font-size:180%;}
	.historyDetail{padding-left:0;padding-top:7%;}
	.historyDetail li{padding:5px 15px 5px 60px;text-indent:-60px;margin-left:60px;}
	.historyDetail li img{margin-right:15px;}
}
@media screen and (max-width: 480px) {
	.historyDetail{padding-top:10%;}
	.historyDetail li{padding:5px 15px 5px 35px;text-indent:-55px;margin-left:55px;}
	.historyDetail li img{margin-right:10px;}
}
@media screen and (max-width: 400px) {
    .historyYear span{font-size:160%;}
	.historyDetail li{padding:5px 15px 5px 35px;}
}




/* -------- CI  -------- */
.ciBox{position:relative;width:100%;margin-bottom:10%;}
.ciTit{position:absolute;top:0;left:0;z-index:99;}
.ciDetail{position:relative;width:100%;padding-left:20%;}
.ciDetailImg{width:100%;border:1px solid #e6e6e6;margin-top:5%;padding:10% 15px;text-align:center;}

.ciTable{display:table;width:100%;margin-bottom:10%;}
.ciTable .ciTableImgBox{display:table-cell; width:40%; vertical-align:top;}
.ciTable .ciTableTxtBox{display:table-cell; width:60%; vertical-align:top;padding-left:50px;}
.ciTxt{font-size:170%;font-weight:500;line-height:1.3;letter-spacing:-0.5;}
@media all and (max-width:1024px){
    .ciTable .ciTableTxtBox{padding-left:30px;}
    .ciTxt{font-size:150%;}
}
@media all and (max-width:800px){
	.ciDetail{padding-left:0;padding-top:10%;}
	.ciDetail .colorImg{width:100%;}

    .ciTable .ciTableImgBox{display:block;width:100%;margin-bottom:20px;}
    .ciTable .ciTableTxtBox{display:block;width:100%;margin-bottom:30px;padding-left:0px;}
}
@media all and (max-width:480px){
	.ciDetail{padding-top:15%;}
    .ciDetail img{width:200px;}

	.ciTxt{font-size:130%;}
}
@media all and (max-width:400px){
	.ciDetail{padding-top:18%;}
}


/* ******************  WHAT WE DO  ****************** */
.brandWrap{position:relative; width:100%; height:100%; overflow:hidden;}
.brandImgArea{width:100%; text-align:center;}
.brandImgArea .brandLogo{width:370px;margin-bottom:7%;}
.brandImgArea .brandTit{font-size:125%; font-weight:700; margin-top:20px; margin-bottom:7%;}
.brandSnsArea{width:100%; text-align:center; padding:5% 0;}
.brandSnsArea > ul > li{display:inline-block;width:100px;}
.brandSnsArea > ul > li > p{font-weight:400;margin-top:5px;}
.brandTxtArea{width:100%; text-align:left;}
@media all and (max-width:480px){
    .brandImgArea .brandLogo{width:260px;}
	.brandSnsArea{padding:5% 0 8%;}
    .brandSnsArea > ul > li{width:auto;margin-right:10px;}
    .brandSnsArea > ul > li:nth-last-child(1){display:inline-block;margin-right:0px;}
	.brandSnsArea > ul > li > p{display:none;}
	.brandSnsArea > ul > li > a > img{width:48px;}
}
@media all and (max-width:400px){
    .brandImgArea .brandLogo{width:200px;}
	.brandSnsArea > ul > li > a > img{width:44px;}
}
@media all and (max-width:320px){
    .brandSnsArea > ul > li{margin-right:5px;}
	.brandSnsArea > ul > li > a > img{width:40px;}
}


/* ******************  WHY WE DO IT  ****************** */
/* -------- Philosophy  -------- */
.contentsBox{position:relative;overflow:hidden; width:100%;}
.contentsBox:after{clear:both; display:block; content:"";}
.contentsBox .ctImg{width:100%;margin:0 auto;}
.contentsBox .ctBar{margin:70px auto 50px;}
.contentsBox .ctTxt{font-size:50px;font-weight:700;line-height:1.3;margin-bottom:35px;}
.contentsBox .ctTxtSub{font-size:43px;font-weight:300;line-height:1.3;}
.valueTable{display:table;width:100%;margin-bottom:10%;}
.valueTable .valueTableCell{display:table-cell; width:50%; vertical-align:middle;}
.valueTxt{font-size:180%;font-weight:700;line-height:1.3;letter-spacing:-0.5;margin-bottom:20px;}
.valueTxtEn{font-size:170%;font-weight:300;line-height:1.3;letter-spacing:-0.5;}
@media all and (max-width:1024px){
	.contentsBox .ctBar{margin:50px auto 30px;}
	.contentsBox .ctTxt{font-size:40px;margin-bottom:25px;}
	.contentsBox .ctTxtSub{font-size:35px;}
}
@media all and (max-width:800px){
	.contentsBox .ctBar{margin:40px auto 25px;width:80px;}
	.contentsBox .ctTxt{font-size:33px;margin-bottom:10px;}
	.contentsBox .ctTxtSub{font-size:23px;}
    .valueTable .valueTableCell{display:block;width:100%;text-align:center;}
	.valueImg{width:270px;margin-bottom:30px;}
	.valueTxt{font-size:30px;}
    .valueTxtEn{font-size:23px;}
}
@media all and (max-width:480px){
	.contentsBox .ctBar{margin:20px auto 20px;width:60px;}
	.contentsBox .ctTxt{font-size:20px;margin-bottom:10px;}
	.contentsBox .ctTxtSub{font-size:18px;}
	.valueTable{margin-bottom:15%;}
	.valueImg{width:230px;margin-bottom:20px;}
	.valueTxt{font-size:20px;margin-bottom:10px;}
    .valueTxtEn{font-size:18px;}
}
@media all and (max-width:400px){
	.valueImg{width:200px;margin-bottom:15px;}
}



/* ******************  BRANDS  ****************** */
/* -------- MiddleBanner  -------- */
#middleBanner{position:relative; width:100%; height:650px;background-size:cover !important;}
#middleBanner .middlebannerWrap{
	position:absolute; top:50%; left:0px; width:100%;
	-ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%);
	text-align:center;
}
#middleBanner .middlebannerWrap .middlebannerTxt1{display:block; font-size:65px; font-weight:700; line-height:1.3; margin-bottom:25px; }
#middleBanner .middlebannerWrap .middlebannerTxt2{font-size:23px; font-weight:400; letter-spacing:-0.5px; line-height:1.7;}


/* ANIMATION */
.animate {
  -webkit-animation-duration: 1s;
          animation-duration:1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.animationTxt{
animation: fadeIn;
-webkit-animation-duration: 1s;
          animation-duration:1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
animation-delay:0.3s;
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

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



/* -------- MiddleBanner 반응형 -------- */
@media all and (max-width:1024px){
#middleBanner{height:55vh;}
#middleBanner .middlebannerWrap .middlebannerTxt1{font-size:55px;}
#middleBanner .middlebannerWrap .middlebannerTxt2{font-size:17px;}
}
@media all and (max-width:800px){
#middleBanner{height:45vh;}
#middleBanner .middlebannerWrap .middlebannerTxt1{font-size:40px;}
#middleBanner .middlebannerWrap .middlebannerTxt2{font-size:16px;}
}
@media all and (max-width:480px){
#middleBanner{height:35vh;}
#middleBanner .middlebannerWrap .middlebannerTxt1{font-size:25px;;}
#middleBanner .middlebannerWrap .middlebannerTxt2{font-size:14px;}
}

/* -------- BrandWrap -------- */
.brandImgBox{display:table; width:100%; height:100%;}
.brandImgBox .brandLogo{display:table-cell; width:22%; padding-right:10px; vertical-align:middle; text-align:center;}
.brandImgBox .brandLogo > img{width:100%; max-width:240px;}
.brandImgBox .brandLogo > p{font-size:110%; margin-top:20px; font-weight:500;}
.brandImgBox .brandImg{display:table-cell; width:78%; vertical-align:top;}
.brandImgBox .brandImg > img{width:100%; max-width:950px;}
.brandTxtBox{display:table; width:100%; height:100%;}
.brandTxtBox .brandTxtNull{display:table-cell; width:22%;}
.brandTxtBox .brandTxtArea{display:table-cell; width:78%; vertical-align:top;}
.brandTxtBox .brandTxt{font-size:35px; font-weight:500; line-height:1.3; margin:60px 0px 40px;}
.goSite{width:100%; text-align:left; margin-bottom:40px;}
.blueBtn {display:inline-block; background-color:#008cd2; border:0px; padding:10px 45px; margin-right:10px;text-align:center;}
.blueBtn a{font-size:100%; font-weight:300; color:#fff; line-height:100%;}
.blueBtn:hover{background-color:#04a0ee; text-decoration:none; transition:0.5s;}
.navyBtn{display:inline-block; background-color:#005393; border:0px; color:#fff; padding:10px 45px;text-align:center;}
.navyBtn a{font-size:100%; font-weight:300; color:#fff; line-height:100%;}
.navyBtn:hover{background-color:#00457a; text-decoration:none; transition:0.5s;}
/* -------- BrandListBanner -------- */
#brandListBanner{padding:30px 0; background-color:#f2f2f2; border-top:1px solid #e5e5e5; border-bottom:1px solid #f5f5f5;}
.brandListWrap{margin:0 100px;}
.brandList{position:relative; margin:0 -50px }
.brandList .brand{float:left;}
.brandList .brand-inner{position:relative; height:36px; padding:0 10px;}
.brandList .brand-inner span{display:block; position:relative; height:100%; width:100%; }
.brandList .brand-inner span img{position:absolute; top:0px; left:0px; bottom:0px; right:0px; height:36px; max-width:100%; max-height:100%; margin:auto; }
/* -------- BrandListBanner 반응형 -------- */
@media all and (max-width:1220px){
	.brandListWrap{margin:0 30px}
}
@media all and (max-width:1024px){
    .brandImgBox .brandLogo{width:24%;}
    .brandImgBox .brandImg{width:76%;}	
	.brandTxtBox .brandTxtNull{width:24%;}
    .brandTxtBox .brandTxtArea{display:table-cell;width:76%;}
	.brandTxtBox .brandTxt{font-size:28px;margin:40px 0px 25px;}
	.blueBtn {display:block;margin-right:0px;}
	.navyBtn {display:block;margin-top:10px;}
    #brandListBanner{padding:20px 0;}
}
@media all and (max-width:800px){
	.brandImgBox .brandLogo{display:block;width:100%;margin-bottom:15px;}
	.brandImgBox .brandLogo > img{width:160px;}
    .brandImgBox .brandImg{display:block;width:100%;height:100%;}		
	.brandTxtBox .brandTxtNull{display:block;width:100%;height:1px;}
    .brandTxtBox .brandTxtArea{display:block;width:100%;height:100%;}
	.brandTxtBox .brandTxt{font-size:25px;margin:30px 0px 20px;}
	.goSite{margin-bottom:20px;}
	#brandListBanner{padding:15px 0;}
	.brandListWrap{margin:0 15px}
	.brandList{padding:0 30px;}
	.brandList .brand-inner{height:30px; padding:0 5px;}
}
@media all and ( max-width: 480px ){
	.brandTxtBox .brandTxt{font-size:20px;margin:20px 0px 15px;}
	.goSite{margin-bottom:15px;}
}



/* ******************  ABOUT US  ****************** */
/* -------- At a Glance :: Slide -------- */
.glanceSlideWrap{position:relative; overflow:hidden; width:100%; max-width:1200px; height:380px; margin:0px auto;}
.glanceSlideTxtBox{position:relative; width:50%; height:100%; padding-right:30px;}
.glanceTxt{font-size:55px;font-weight:700;line-height:1.3;color:#008cd2;margin-bottom:30px;}/*word-break: break-all;*/
.glanceTxtSub{font-size:23px;font-weight:300;line-height:1.5;margin-bottom:10px;}
.bannerSlideBox{position:absolute;top:0px; right:0px; width:50%; height:100%;}
.bannerSlide{position:relative;width:100%; height:100%;}
.bannerSlide .slick-slider,
.bannerSlide .slick-list,
.bannerSlide .slick-track,
.bannerSlide .bannerSlide-item{height:100%; z-index:2;}
.bannerSlide .bannerSlide-inner{position:absolute; left:0; top:0; width:100%; height:100%; background-size:cover !important ; 
    -webkit-transition:all 1s;
	-moz-transition:all 1s;
	-o-transition:all 1s;
	-ms-transition:all 1s;
	transition:all 1s
} 
.bannerSlide .slick-prev{position:absolute; left:0; bottom:calc(50% - 25px); width:50px; height:50px; z-index:3; background:rgba(255,255,255,0.5);}
.bannerSlide .slick-next{position:absolute; right:0; bottom:calc(50% - 25px); width:50px; height:50px; z-index:3; background:rgba(255,255,255,0.5);}
.bannerSlide .slick-prev i{font-size:33px; font-weight:700; color:#008cd2; vertical-align:middle;}
.bannerSlide .slick-next i{font-size:33px; font-weight:700; color:#008cd2; vertical-align:middle;}
@media all and (max-width:1220px){
.glanceSlideWrap{height:100%; margin:0 30px; max-width:calc(100% - 60px);}
.glanceSlideTxtBox{padding-right:20px;}
.glanceTxt{font-size:50px;margin-bottom:30px;}
.glanceTxtSub{font-size:20px;}
}
@media all and (max-width:1024px){
.glanceSlideTxtBox{padding-right:15px;}
.glanceTxt{font-size:45px;margin-bottom:20px;}
.glanceTxtSub{font-size:20px;}
}
@media all and (max-width:800px){
.glanceSlideWrap{height:100%; margin:0 15px; max-width:calc(100% - 30px);}
.glanceSlideTxtBox{width:100%; padding:30px 80px 50px;text-align:center;}
.glanceTxt{font-size:33px; margin-bottom:15px;}
.glanceTxtSub{font-size:18px;}
.bannerSlideBox{position:relative; width:100%; height:52vh;}
}
@media all and (max-width:480px){
.glanceSlideTxtBox{padding:20px 30px 30px;}
.glanceTxt{font-size:20px;}
.glanceTxtSub{font-size:16px;}
.bannerSlideBox{height:42vh;}
}
@media all and (max-width:350px){
.glanceSlideTxtBox{padding:20px 15px 30px;}
.bannerSlideBox{height:35vh;}
}

/* -------- At a Glance :: Accordion -------- */
.overviewWrap{position:relative; overflow:hidden; width:100%; height:100%; min-height:960px; padding:5% 0; background-size:cover !important;} /*min-height:852px;*/
.overviewWrap .overviewBox{float:right;width:50%;}
.overviewWrap .overviewBox > h4{font-size:23px;font-weight:700;color:#fff;}
.overviewWrap .overviewBox .accordion{width:100%;}
.overviewWrap .overviewBox .accordion .contentBx{position:relative;margin:20px 0;padding:20px;background-color:#fff;border-radius:10px;}
.overviewWrap .overviewBox .accordion .contentBx > .label{position:relative;background-color:transparent;cursor: pointer;}
.overviewWrap .overviewBox .accordion .contentBx > .label::before{
position:absolute;top:50%;right:5px;width:38px;transform:translateY(-50%);content:'+';color:transparent;
background-image:url('/imgs/aboutus/arrow-down.png');background-repeat:no-repeat;background-position: center;
}
.overviewWrap .overviewBox .accordion .contentBx.active > .label::before{background-image:url('/imgs/aboutus/arrow-up.png');}/*content:'-';*/
.overviewWrap .overviewBox .accordion .contentBx > .content{position:relative;background-color:transparent;height:0;overflow: hidden;} /*transition: 0.5s;*/
.overviewWrap .overviewBox .accordion .contentBx.active > .content{height:100%;max-height:130px;}
.overviewWrap .overviewBox .accordion .contentBx > .content > p{width:100%;margin-top:20px;font-size:100%;font-weight:300;}
.overviewWrap .overviewBox .accordion .contentBx > .label > dl > dt{font-size:100%;font-weight:300;color:#000;}
.overviewWrap .overviewBox .accordion .contentBx > .label > dl > dd{font-size:180%;font-weight:700;color:#000;}

@media all and (max-width:1024px){
    .overviewWrap{min-height:850px;padding:7% 0;}
    .overviewWrap .overviewBox{width:70%;}
}
@media all and (max-width:800px){    
    .overviewWrap{min-height:100%;padding:10% 0;}
    .overviewWrap .overviewBox{float:none;width:100%;}
}


/* -------- Contact us  -------- */
.mapWrap{position:relative; overflow:hidden; width:100%; height:600px; margin:5% 0; border:0;}
@media all and (max-width:1024px){
.mapWrap{height:50vh;}
}
@media all and (max-width:800px){
.mapWrap{height:45vh;}
}
@media all and (max-width:480px){
.mapWrap{height:35vh;}
}



/* ******************  COMMON  ****************** */
/* -------- Sitempap  -------- */
.txtWrap{width:100%;border-top:1px solid #aeaeae;padding-top:50px;padding-bottom:50px;margin-top:-50px;}
.txtWrap p{font-size:100%;line-height:1.7;margin-bottom:30px;word-break: break-all;}
.sitemapWrap{width:100%;max-width:1200px;margin:-50px auto 0;display:flex;flex-wrap: wrap;}
.sitemapCon{flex:33.33%;padding:70px 30px;border-top:1px solid #aeaeae;text-align:center;}
.sitemapCon:nth-last-child(1){padding:70px 30px 0;text-align:left;text-align:center;}
.sitemapCon > ul > li{margin-bottom:10px;}
.sitemapCon > ul > li.menu-dep1{font-size:190%;font-weight:700;color:#008cd2;margin-bottom:30px;}
.sitemapCon > ul > li > a{font-size:120%;}
.sitemapCon > ul > li > a:hover{color:#008cd2;}
@media all and (max-width:1024px){
	.txtWrap{padding-top:30px;padding-bottom:30px;margin-top:-30px;}
	.txtWrap p{margin-bottom:20px;}
	.sitemapWrap{margin:-30px auto 0;}
	.sitemapCon{flex:50%;}
	.sitemapCon:nth-last-child(2){padding:50px 30px 0;}
}
@media all and (max-width:800px){
	.txtWrap{margin-top:-20px;}
	.sitemapWrap{margin:-20px auto 0;}
}
@media all and (max-width:480px){
	.txtWrap{margin-top:0px;}
	.sitemapWrap{margin:0 auto 0;}
	.sitemapCon{flex:100%;padding:30px 15px;}
	.sitemapCon:nth-last-child(2){padding:30px 15px;}
	.sitemapCon:nth-last-child(1){padding:30px 15px 0;}
}