@charset "utf-8"; 
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2022-03-26
******************************************************** */
/* ========================================================
 * SETTING
======================================================== */
:root { 
	--main-color: #00a7c0;
	--sub-color: #146ee2;
	--area-wide-width: 1540px;
	--area-width: 1400px;
	--area-width-86: 860px;
	--area-padding: 30px;
	--header-height: 62px;
	--header-top : 0px;
	--full-height: 100vh;
	--transition-custom: all 0.4s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out; /* data-scroll */
	--font-family: 'Pretendard', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	--font-xi :'xeicon' !important;
} 
::selection { 
background: var(--main-color); 
color: #fff; 
} 
::-moz-selection { 
background: var(--main-color); 
color: #fff; 
} 
body, table, th, td, button, select, input, textarea { 
	font-family:var(--font-family); 
	color:#666; 
	-webkit-text-size-adjust:none; 
	-moz-text-size-adjust:none; 
	text-size-adjust:none; 
	word-break:keep-all; 
} 
body {background-color:#fff;} 
body.popup_body #ch-plugin{display:none!important}
table, th, td { word-break:break-word; } 
#wrap { overflow:hidden; width:100%; min-width:320px; position:relative; } 
html[lang=ch] body, html[lang=ch] table, html[lang=ch] th, html[lang=ch] td, html[lang=ch] button, html[lang=ch] select, 
html[lang=ch] input, html[lang=ch] textarea {
	font-family:var(--font-family-sc) !important;
}
html[lang=jp] body, html[lang=jp] table, html[lang=jp] th, html[lang=jp] td, html[lang=jp] button, html[lang=jp] select, 
html[lang=jp] input, html[lang=jp] textarea {
	font-family:var(--font-family-jp) !important;
}
@media all and (max-width:768px) { 
	:root { 
		--area-padding: 5vw;
	} 
} 
@media all and (max-width:480px) { 
	:root { 
	} 
} 

/* ========================================================
 * FONT SIZE
======================================================== */
html{font-size:10px;}
@media all and (max-width:1536px){
	html{font-size:0.6510vw;} /* 10 */
}
@media all and (max-width:1280px){
	html{font-size:0.8594vw;} /* 10 -> 11*/
}
@media all and (max-width:1024px){
	html{font-size:1.002vw} /* 10 -> 11*/
}
@media all and (max-width:768px){
	html{font-size:1.375vw} /* 10 -> 11*/
}
@media all and (max-width:640px){
	html{font-size:1.7188vw}  /* 10 -> 11*/
}
@media all and ( max-width: 480px ){
	html{font-size:2.2vw}  /* 10 */
}
@media all and (max-width:390px){
	html{font-size:2.1795vw}  /* 10 -> 8.5 */
}
/* ========================================================
 * LAYOUT
======================================================== */

/* ****************** 공통클래스 ********************** */
.area{ max-width:var(--area-width); margin:0px auto;}
.area-860{ max-width:var(--area-width-86); margin:0px auto;}
.area-wide{ max-width:var(--area-wide-width); margin:0px auto; }
.full-height{height:var(--full-height);}
/* Fullpage Layout */
.fullpage-html{overflow:hidden; height:100%;}
.fullpage-html #wrap{position:static;}
.flex-btw-box{display: flex; flex-wrap: wrap; justify-content: space-between;}
.flex-center-box{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.flex-btw-box .ml-auto{ margin-left: auto;}

@media all and (max-width:1460px){
	.area{padding:0 var(--area-padding); max-width:none;}
}
@media all and (max-width:920px){ 
	.area-860{padding:0 var(--area-padding); max-width:none;}
}
/* ****************** HEADER ********************** */
#header{position:relative; height:var(--header-height); top:0; left:0; width:100%; z-index:9999; }
#headerInnerWrap{ background-color: #fff; transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; height: var(--header-height);}

body.sub-page #header:not(.top-fixed) #headerInnerWrap{ border-bottom: 1px solid #e6e8eb;}
#headerInner{
	position:relative; height:100%; -webkit-transition:height .3s ease-out; transition:height .3s ease-out; display: flex;align-items: center;
}
#header .logo{position: relative;z-index: 100;height: var(--header-height); font-size: 2.4rem;}
#header .logo a{color:#101010;display: inline-flex; align-items: center; column-gap: 1rem; height: 100%;}
#header .logo img{display:block; vertical-align:top; width: 27px; height: auto;}


/* -------- Header :: UTIL BOX -------- */
.header-util-box{position:relative; z-index:100;}

/*header :: util :: member*/
.member-menu-box{position:relative; z-index:100;}
.member-menu-box li a{font-size:1.3rem; font-weight:400; color:#fff;}
.member-menu-box li a i{font-size:2rem; vertical-align:middle; margin-right:0.5rem;}

.member-menu-box{position:relative; z-index:100;}
.member-menu-box >a{font-size:1.3rem; font-weight:400; color:#fff;}
.member-menu-box >a i{font-size:2rem; vertical-align:middle; margin-right:0.5rem;}

.member-menu-box.open .top_mb_private{opacity: 1; visibility: visible; transform: scale(1);}
.member-menu-box .top_mb_private_btn{color:#000; font-weight: 500; color:#fff}
.member-menu-box .top_mb_private_btn img{ width: 25px; height: 25px; border-radius: 50%;}
.member-menu-box .top_mb_private{
	position: absolute; top: 100%; right: 0; margin-top: 1rem; -webkit-box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.07); min-width: 25rem; border: 1px solid #efefef; text-align: center;
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.07); padding:var(--area-padding) 0 0;background-color: #fff; transition: all 0.3s; border-radius: 1.5rem;
	font-size: 1.34rem; line-height: 1.4; opacity: 0; visibility: hidden; transform: scale(0.95);
}
.member-menu-box .top_mb_private > *:not(p, .my_menu_list){ padding: 0 1.5rem;}
.member-menu-box .top_mb_private .my_profile_img{ position: relative; display: inline-block; margin: 0 auto 2rem;}
.member-menu-box .top_mb_private .my_profile_img img{ border-radius: 50%; overflow: hidden; max-width: 100%;}
.member-menu-box .top_mb_private .my_profile_img > a{ 
	position: absolute;right: -.6rem;bottom: -.7rem;z-index: 1;padding: .3rem;background: #fff;display: block;border-radius: 50%;
}
.member-menu-box .top_mb_private .my_profile_img > a >i{    
	background-color: #fff;border: 1px solid #efefef;border-radius: 50%;width: 23px;height: 23px;
	display: inline-flex;align-items: center;justify-content: center; color:#000;box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
}
.member-menu-box .top_mb_private .my_profile_img > a:hover i{ color:#fff; background-color: var(--main-color);}
.member-menu-box .top_mb_private .my_private_info dt{ color:#000; font-weight: 500;}
.member-menu-box .top_mb_private .my_private_info dd{ opacity: .8;}
.member-menu-box .top_mb_private .my_activitiy_info a{
	width: 3.2rem; height: 3.2rem; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; position: relative; border:1px solid #e0e0e0;
}
.member-menu-box .top_mb_private .my_activitiy_info a i{font-size:1.8rem;}
.member-menu-box .top_mb_private .my_activitiy_info a .count{ 
	position: absolute;right: -.6rem;top: -.6rem;z-index: 1;background: #c00;line-height: 1;color: #fff;
	width: 16px;height: 16px;font-size: 10px;display: inline-flex;align-items: center;justify-content: center;border-radius: 100%;font-weight: 600;
}
.member-menu-box .top_mb_private .my_menu_list{text-align: left; border-top: 1px solid #efefef; background-color: #efefef; border-radius: 0 0 1.5rem 1.5rem;}
.member-menu-box .top_mb_private .my_menu_list > li+li{ border-top: 1px solid #e0e0e0;}
.member-menu-box .top_mb_private .my_menu_list > li a{padding:.7rem 1.5rem; display: block; display: flex; gap: 1.2rem; align-items: center;}
.member-menu-box .top_mb_private .my_menu_list > li a i{ font-size: 1.6rem;}


/*header :: util :: search */
.header-search-box{position:relative; margin-left:4rem; z-index:101; }
.header-search-box .header-search-close-btn{ display: none;}
.header-search-box i, .header-search-open-btn i{font-size:2.4rem; color:#000}
.header-search-open-btn{width:3.2rem; height:3.2rem; color:#000; margin-right: .3rem;}
.header-search-inner{
	border-radius: 30px; width:0; height: 42px;
	box-sizing: border-box;background-color: #fff;border:1px solid #00000029;
	overflow: hidden;opacity: 0;visibility: hidden; 
	/* transition: var(--transition-custom);  */
}	
.header-search-inner .header-search-word{
	height:42px; vertical-align:top; background-color:transparent; border:0; text-indent:20px; outline:none;
}
.header-search-inner .header-search-word::placeholder{color:#a5a5a5;}
.header-search-inner .header-search-btn{background-color: var(--main-color);width: 3.2rem;height: 3.2rem;border-radius: 50%;margin-right: .7rem;}
.header-search-inner .header-search-btn i{color:#fff}

.header-search-inner .header-search-close-btn:hover{background-color:var(--main-color);}
.header-search-inner .header-search-close-btn i{color:#fff;}
/* 검색 open */
.header-search-box.open + .header-search-open-btn{ display: none;}
.header-search-box.open .header-search-inner{
	opacity:1.0;visibility:visible; width: 400px;
}

/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg{position:fixed; top:0; left:0; width:100%; height:100%; visibility:hidden; opacity:0; background:rgba(0,0,0,0.5); z-index:9997;  transition:var(--transition-custom); }	/* gnb overlay BG */
.gnb-overlay-bg.open{visibility:visible; opacity:1.0;}
#gnb{ margin-left: auto;}
#gnb > ul{column-gap: 4rem;}
#gnb > ul > li{position:relative;}
#gnb > ul > li > a{
	position:relative; z-index:100; display:inline-flex; align-items: center; line-height:var(--header-height);
	text-align:center; color:#121212; font-size:1.7rem; letter-spacing:-0.075em; font-weight:500; transition:var(--transition-custom);
}
#gnb > ul > li > a[target="_blank"]:after, #navigation li a[target="_blank"]:after{ content: "\e980"; display:inline-block; font-family: var(--font-xi); margin-left: .3rem; }
#gnb > ul > li > a:hover,
#gnb > ul > li > a:focus,
#gnb > ul > li.active > a {color:var(--main-color);}
#gnb > ul > li.active::before{ position: absolute; width: 100%; height: 2px; background-color: var(--main-color); left: 0; bottom: 0; content: ""; display: block;}

/* GNB :: 2차 각각메뉴 */
#gnb.each-menu > ul > li .gnb-2dep{
	position:absolute;top: 100%; left: 50%; transform: translateX(-50%);
	box-shadow: 0 4px 10px 0 #d3d8dc; background-color: #fff;
	z-index:999; min-width:16rem;
	display:none;
}
#gnb.each-menu > ul > li .gnb-2dep ul li a{ padding: 1.4rem 2.5rem; font-size: 1.5rem; line-height: 2.2rem; display: block; font-weight: 500;}
#gnb.each-menu > ul > li .gnb-2dep ul li:hover > a{color:var(--main-color); background-color: #e7ebf044;}
/* over했을때 */
#gnb.each-menu > ul > li:hover > .gnb-2dep,
#gnb.each-menu > ul > li .gnb-2dep.open{display: block;}

/* -------- Header :: fixed -------- */
#header.top-fixed #headerInnerWrap{ position: fixed; left: 0; top: 0;box-shadow: 0 1px 15px rgba(30, 41, 55, .08);box-shadow: 0 1px 15px color(display-p3 .1255 .1608 .2118 / .08);}
#header.top-fixed .nav-open-btn{ position: fixed;}
/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none;}
#gnbM{display:none}

@media all and ( max-width: 1024px ){

	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{margin-right:20px;}

	/*header :: util :: search */
	.header-search-box{ margin: 0;}
	.header-search-box.open{
		position: fixed;left: 0;top: 0;width: 100%;z-index: 100;background: #fff;padding: 1.5rem 1.5rem 0 0;height: 100vh;align-items: flex-start !important;
		transform: translate3d(0, 0, 0); /* iOS layout 안정화 */
	}
	.header-search-box.open .header-search-close-btn{ display: block; width: 5rem; height: 5rem;}
	.header-search-box.open .header-search-inner{ flex: 1; width: 100%;}


	/* -------- Header :: GNB(Pc) -------- */
	#gnb{display:none;}
	.gnb-overlay-bg{display:none}

	/* -------- Header :: GNB(Mobile/기본스타일) -------- */
	.gnb-overlay-bg-m{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;}	
	#gnbM{ 
		display:block; position:fixed; top:var(--header-height); left: 0; right: 0; width:100%; height:100%;  
		background-color:#fff; z-index:99; visibility:hidden;
		/* transition:var(--transition-custom); */
	}
	#gnbM.open{visibility:visible; border-top: 1px solid #e6e8eb;}

	/* GNB Mobile :: 레이아웃 */
	.gnb-navigation-wrapper{position:relative; height:100%; box-sizing:border-box; overflow-y:auto;padding: 0 var(--area-padding) 12rem;}	
	.header-util-menu-box + .gnb-navigation-wrapper{padding-top:0; height:calc(100% - var(--header-height));}
	
	/* GNB Mobile :: 메뉴영역 :: 1차 */
	#navigation > li{}
	#navigation > li > a {position:relative; display:block; padding:2rem 0; color:#000; font-size:1.9rem; font-weight:600; letter-spacing: -0.01em; }
	#navigation > li.active > a{color:var(--main-color);}
	/* GNB Mobile ::  메뉴영역 :: 2차 */
	#navigation > li .gnb-2dep > ul > li{height:auto !important; }
	#navigation > li .gnb-2dep > ul > li > a{position: relative; display:block; /*color:rgba(0,0,0,0.78);*/ font-size:1.7rem; padding:1rem 2.4rem;}
	#navigation > li .gnb-2dep > ul > li:has(.gnb-3dep) > a:before{
		display: inline-block;content: "\e93f";font-family: var(--font-xi);color: inherit;position: absolute;left: 0;top: 50%;transform: translateY(-54%);
		transition: transform .3s;
	}
	#navigation > li .gnb-2dep > ul > li.on > a{color:#000; font-weight:500;}
	/* GNB Mobile :: 메뉴영역 ::  3차 */
	#navigation > li .gnb-2dep > ul > li > .gnb-3dep{display:none; padding: 1rem 0; padding-left: 2rem;}
	#navigation > li .gnb-2dep > ul > li > .gnb-3dep > li { padding-left: 2rem;}
	#navigation > li .gnb-2dep > ul > li > .gnb-3dep > li > a{display:block; font-size:1.7rem; padding: .8rem 0; color:initial; line-height: 2.4rem;}
	#navigation > li .gnb-2dep > ul > li.has-3dep.active > a:before{transform: rotate(90deg) translateX(-50%);}


	/* -------- GNB Mobile :: 언어선택 및 회원메뉴 -------- */
	
	/* 회원메뉴 */
	.member-menu-box{display:flex;justify-content: space-around;text-align:center; padding:10px 0;box-sizing: border-box; }
	.member-menu-box li{position:relative; text-align: center;}
	.member-menu-box li:before{content:""; position:absolute; top:10px; bottom:10px; left:0px; width:1px; background-color:rgba(0,0,0,0.1); content:"";}
	.member-menu-box li:first-child:before{display:none;}
	.member-menu-box li a{display:block; padding:6px 0}
	.member-menu-box >a:not(.horiz) i{font-size:2.3rem; }
	.member-menu-box >a:not(.horiz) i{margin: 0;}
	.member-menu-box >a:not(.horiz) strong{display:block; padding-top:5px; font-size:13px; letter-spacing:-0.5px; font-weight:400;}
	.member-menu-box >a strong.hide{ display: none;}
	.header-util-menu-box .lang-select + .member-menu-box{border-top:1px solid #e7e7e7; padding-right:0;}

	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
	#header:has(.header-search-box.open) .nav-open-btn{ z-index: 0;}
	.nav-open-btn{
		display: block;position: absolute;top: calc(var(--header-height) / 2);transform: translateY(-50%); right: 15px;z-index: 99;border-radius: 5px;
	}
	.nav-open-btn .line{
		display:block; width:20px; height:2px; background-color:#000; border-radius:5px; margin: 4px auto;
		-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
	}
	.nav-open-btn.active .line:nth-child(2), .nav-open-btn.active .line:nth-child(4){opacity: 0;}
	.nav-open-btn.active .line:nth-child(1){-webkit-transform: translateY(6px) rotate(45deg);transform: translateY(6px) rotate(45deg);}
	.nav-open-btn.active .line:nth-child(3){-webkit-transform: translateY(-6px) rotate(-45deg);transform: translateY(-6px) rotate(-45deg);}

}

@media all and ( max-width: 480px ){
	/* -------- Header :: UTIL BOX -------- */
	/* Header :: 언어선택 및 회원메뉴 */
	/* 회원메뉴 */
	.member-menu-box{padding:5px 0;}
	.member-menu-box li a{ padding:4px 0}
	.member-menu-box li a i{font-size:20px;}
	.member-menu-box li a strong{padding-top:5px;}
	.gnb-style-full .member-menu-box li a{padding:10px 0;}
}

/* ****************** FOOTER ********************** */
#footer{background-color: #2A3652; padding:2rem 0; position: relative;}
/* Footer :: TOP버튼 */
.to-top-btn{
	position:fixed; bottom:-100px; right:20px;display:block; width:46px; height:46px; background-color:#fff; 
	text-align:center; color:#333; z-index:99;border:1px solid #eee;box-sizing:border-box;opacity:0;transition:var(--transition-custom);border-radius:50%;
}
.to-top-btn.bottom-fixed{bottom:15px; opacity:1.0;}
.to-top-btn i{display:inline-block; font-size:16px; line-height:46px; transition:var(--transition-custom);}
.to-top-btn:hover i{transform:translateY(-3px)}

iframe[title="Channel Plugin"] {
    bottom: 100px !important; /* 아래 여백 조정 */
    right: 50px !important;  /* 오른쪽 여백 조정 (필요하면 변경 가능) */
}

/* Footer :: 정보 style02 */
.footer-address-info-box{}
.footer-address-list{margin-bottom:1.5rem;}
.footer-address-list:last-child{margin-bottom:0;}
.footer-address-list dl{display:inline-block; vertical-align:middle; color:#fff; font-size:1.4rem; line-height:1.3; position: relative;}
@media all and (min-width:481px){
	.footer-address-list dl:not(:first-child):before{ 
		content: "";display: block;position: absolute;left: -1.5rem;top: 50%;width: 1px;
		height: 50%;background-color: rgba(255, 255, 255, 0.15);transform: translateY(-50%);
	}
}
.footer-address-list dl dt,
.footer-address-list dl dd{vertical-align:middle; display:inline-block;}
.footer-address-list dl dt{margin-right:1rem; color:rgba(255,255,255,0.7);}
.footer-address-list a{color:inherit}

/* Footer :: Copyright */
.footer-copyright{font-size:1.4rem; color:#fff}

/* Footer :: 패밀리사이트 */
.family-site-box{position:relative; text-align:left; margin:auto; margin-right:0;}
.family-site-box .family-site-open-btn{
	display:inline-flex; align-items: center; width:100%; padding:0 0px; text-align:left; font-size:1.4rem; color:#fff; box-sizing:border-box; 
}
.family-site-box .family-site-open-btn i { margin-right: .5rem; font-size: 1.6rem;}
.family-site-box .family-site-open-btn:after{font-size:16px; font-family:var(--font-xi); content:"\e942"; margin-left: 1rem;}
.family-site-box.open .family-site-open-btn:after{content:"\e945";}
.family-site-list{
	position:absolute; bottom:100%; left:0px; width:100%; padding:10px 0; background-color:#fff; border:1px solid #ddd; border-bottom:0;  
	z-index:11; display:none; box-sizing:border-box;
}
.family-site-list a{display:block; padding:10px; color:#333; font-size:1.4rem;}
.family-site-list a:hover{color:#000; text-decoration:underline;}

@media all and (max-width:1024px){
	#footer{ padding: 4rem 0;}
	#footer > div, #footer .footer-left-con{ flex-direction: column-reverse !important; align-items: flex-start !important; }
	.footer-right-con{ padding-bottom: 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); width: 100%;}
}


/* ****************** SUB LAYOUT ********************** */

/* SUB :: DDE CONTENT DEFAULT */
.visual-tit:has(.ctt_admin){ position: relative; display: inline-flex; align-items: center;}
.ctt_admin{font-size: 2.2rem;margin-left: 2rem;}
.ctt_admin i{color:#c00}
#ctt_himg{ display: none !important;}
#ddeContent__area{font-family: inherit;color:#666;}
#container_title{ display: none !important;}
#middleArea:has(>#contentInfoCon) #ctt #contentInfoCon,
#middleArea #content:has(>#contentInfoCon) #ctt #contentInfoCon{ display: none !important;}


/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
#container{min-height: calc(100vh - var(--header-height)); }
#middleArea:not(.wide){padding:12.5rem 0}
#middleArea.wide{padding:0}
#middleArea.full {padding-top:0;}
@media all and (max-width:1120px){
	#middleArea:not(.wide){padding:85px 0}
}
@media all and (max-width:768px){
	#middleArea:not(.wide){padding:50px 0}
}

/* SUB LAYOUT :: 위치정보(location) */
.location{padding-top:3.5rem;}
.location ul{display: flex; flex-wrap:wrap; align-items: center; }
.location li{position: relative; margin-right: 3.3rem; font-size:1.4rem; letter-spacing:-0.025em;}
.location li:last-child{margin-right: 0;}
.location li a{color:inherit; font-weight: 500;}
.location li i{font-size:1.6rem;}
.location li:before{
	position: absolute; top: 50%;left: -2.4rem; background-color: #fff; content: "\e93f";
	font-family: var(--font-xi); transform: translateY(-50%);
}
.location li a:hover{ text-decoration: underline;}
.location li:first-child:before{display:none;}

/*bbs top location */
#bbs-top-location{ padding: 1.6rem 0; border-bottom: 1px solid #e5e5e9; background-color: #fff; background-color: #e7ebf044;}

/*  SUB LAYOUT :: 상단정보 (공통) */
#contentInfoCon{position:relative; margin-bottom:6.3rem; }
#contentInfoCon .content-tit{color:#202124; font-size:4.2rem; font-weight:700; letter-spacing:-0.05em;}

@media all and (max-width:1024px){
	#contentInfoCon{ margin-bottom: 3rem;}
	#contentInfoCon .content-tit{ font-size: 2.8rem;}
}

/*  SUB LAYOUT :: 개별 :: content  */
/*sticky*/
@media all and (min-width:1025px){
	#wrap:has(.sticky-container){ overflow: visible;}
	.sticky-container{position: relative;display: flex;align-items: stretch;column-gap: 10rem; flex-wrap: wrap;}
	.sticky-container #sticky-aside{ position: sticky; top: 0;}
}
@media all and (max-width:1280px){
	.sticky-container{column-gap: 7rem;}
}

/* -------- 공통 :: cmp switer -------- */
.cm__swiper{position: relative; overflow: hidden;}
.cm__swiper.visible{overflow: visible;}
/* .cm__swiper.hide-x,.cm__swiper[data-row-num="auto"],.cm__swiper[data-row-num="1"]{overflow: hidden;} */
.cm-swiper_arrs .control_arr{ width: 4rem; height: 4rem; border: 1px solid #e0e0e0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;}
.cm-swiper_arrs .control_arr.swiper-button-disabled{opacity:.5; pointer-events: none;}
.cm-swiper_arrs .control_arr i{ font-size: 2rem; line-height: 1;}
.cm-swiper_arrs.circle .control_arr{border-radius: 50%;}
.cm-swiper_arrs.position .control_arr{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;}
.cm-swiper_arrs.position .control_arr.btn_prev{left:1px}
.cm-swiper_arrs.position .control_arr.btn_next{ right:1px;}
.cm-swiper_arrs.rarge .control_arr{ width: 5.5rem; height:5.5rem;}
.cm-swiper_pagination{display: flex;align-items: center;}
.cm-swiper_pagination:not(.dot) .swiper-pagination-bullet{width:2px; height: 10px;border-radius: 0; margin: 0 3px!important; }
.cm-swiper_pagination .swiper-pagination-bullet{background-color: #fff; opacity:1;}
.cm-swiper_pagination:not(.dot) .swiper-pagination-bullet.swiper-pagination-bullet-active{
	width: auto;background-color: transparent;color: #fff;font-size: 1.3rem;line-height: 11px;font-weight: 700;
}
.cm-swiper_pagination:not(.dot) .swiper-pagination-bullet.swiper-pagination-bullet-active::before{content: attr(index);white-space: nowrap;display: inline-block;}
.cm-swiper_pagination.theme--light .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){ background-color: #000;}
.cm-swiper_pagination.theme--light .swiper-pagination-bullet.swiper-pagination-bullet-active{color:#000;}

.fullPageSwiper_wheel .cm__swiper .swiper-container:before{content: "";display: block;position: absolute;width: 100vw;height: 100vh;left:0;top: 50%;transform: translate(-50%, -50%);}

/* ****************** MODAL LAYERPOPUP ********************** */
/* modal layer */
.modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden;  position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {display: inline-block;width: 50px;height: 50px;border: 8px solid rgba(255,255,255,.3);border-radius: 50%;border-top-color: #fff;animation: spin 1s ease-in-out infinite;}
@keyframes spin {to { transform: rotate(360deg); }}
@-webkit-keyframes spin {to { transform: rotate(360deg); }}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; }
.footer-modal-content h1{font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0 50px 20px; color:#fff;}
.modal-close-btn{position:absolute; top:-6px; right:-6px; color:#fff; }
.modal-close-btn i{font-size:38px;}
.modal-close-btn i:hover {color:#fff}
.footer-inner-box{padding:30px; background-color:#fff; }
.footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; font-size: 1.45rem; line-height: 2.2rem;}

/* arrow 공통 */
.arrow-wrap {display:flex; align-items:center;}
.arrow-right-wrap .arrow-head {position: relative; display:inline-block; width: 0px; height: 0px; border-left: 5.5px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; z-index:1;}
.arrow-left-wrap {flex-direction:row-reverse;}
.arrow-left-wrap .arrow-head {display:inline-block; width: 0px; height: 0px; border-right: 5.5px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent;}
.arrow-wrap em {display:inline-block; width: 15px; height: 2px; background: #fff;}

@media all and (max-width:768px){
	/* modal layer content */
	.footer-modal-content{width:auto; margin:50px 15px}
	.footer-modal-content h1{font-size:18px; text-align:left; padding:0 30px 15px 0}
	.modal-close-btn{right:-3px; top:-3px;}
	.modal-close-btn i{font-size:24px}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}
}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; border-radius: 0.5rem; margin-bottom:5rem; overflow: hidden;z-index: 100;}
.sub-tab-list-style {position: relative; display:table; margin: 0 auto; border-radius: 0.5rem;}
.sub-tab-list-style ul{ position: relative; display: flex; align-items: center;}
.sub-tab-list-style ul li{display: inline-flex; position: relative;}
.sub-tab-list-style ul li + li{padding-left: 3rem;}
.sub-tab-list-style ul li a{display:inline-flex; width:100%; text-align:center; position: relative; color:#000;font-size:2.2rem; font-weight:700;}
.sub-tab-list-style ul li a em{vertical-align:middle; font-weight:inherit; color: inherit;opacity: .3;transition: opacity .12s ease-in-out; }
.sub-tab-list-style ul li + li a:before{ 
	content: "";display: block;position: absolute;left: -2rem;top:50%;transform: translateY(-50%);width: 1px;height: 70%;background-color: #e6e8eb;
}
.sub-tab-list-style ul li.selected a em, .sub-tab-list-style ul li:hover a em{ opacity: 1;}
.sub-drop-open-btn-style{display:none}
/* 슬라이드 탭*/
.v-slide-group{display: flex;}
.v-slide-group.v-tabs{height:5.5rem; box-sizing:border-box;}
#topMenu01.v-slide-group.v-tabs{height:auto}
.v-slide-group.theme--light{background-color: #fff; color:#000}
.v-slide-group.v-tabs > *{ cursor:auto}
.v-slide-group__wrapper{contain: content;display: flex; flex: 1 1 auto;overflow: hidden;overflow-x:auto; position:relative;}
.v-slide-group__content, .v-slide-group__content > .menu{display: flex;flex: 1 0 auto;position: relative;transition: .3s cubic-bezier(.25,.8,.5,1);white-space: nowrap; padding-right:20px !important }
.v-tabs-slider-wrapper{display: none;height: 1px!important;bottom: 0;margin: 0!important;position: absolute;transition: .3s cubic-bezier(.25,.8,.5,1);z-index: 1;}
.v-tabs-slider{height: 100%;width: 100%; background-color: currentColor;}
.v-slide-group.v-tabs .v-tab{
	position: relative;min-width: 0;padding-right: 0;padding-left: 0;margin-left: 34px;font-size: 1.6rem;line-height: 2.4rem; 
	-webkit-user-drag: none; -khtml-user-drag: none; 	-moz-user-drag: none; -o-user-drag: none; -ms-user-drag: none; user-drag: none;
	-webkit-user-select: none;-khtml-user-select: none; -moz-user-select: none;-o-user-select: none; -ms-user-select: none; user-select: none;
}

@media all and (max-width:1024px){
	.sub-tab-wrapper-style{ margin-bottom: 3rem;}
	.sub-tab-list-style ul{ justify-content: flex-start;}
	.sub-tab-list-style ul li a em{ font-size: 1.65rem;}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:50px; line-height:50px; font-size:15px; font-weight: 500; background: linear-gradient(135deg,  rgba(81,188,255,1) 0%,rgba(81,188,255,1) 16%,rgba(13,83,155,1) 100%);border-radius: 2rem; box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border-radius: 2rem; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:relative; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0; border-radius: 0;}
	.sub-drop-menu-style ul li:last-child {border-radius: 0;}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:13px 15px; border:0; text-align: left;}
	.sub-drop-menu-style ul li a em{font-size:13px; line-height: 1.2;}
	.sub-drop-menu-style ul li a i {display: none;}
	.sub-drop-menu-style ul li.selected {background:transparent;}
	.sub-drop-menu-style ul li.selected a em{color: var(--sub-color); font-weight:600;}
}
@media all and (max-width:480px){
	.sub-tab-list-style ul li {width: 12rem;}
}

/* 404 error */
#error_404{ padding:0 var(--area-padding); text-align: center; min-height: 100vh;}
#error_404 .error-contents{ max-width: 580px; margin: 0 auto; padding: 5rem 0; position: relative; height: 100%; display: flex; flex-direction: column;min-height: inherit;}
#error_404 .head_logo{ width: 50%; margin: 0 auto 10rem;}
#error_404 .head_logo img{ max-width: 100%; height: auto; }
#error_404 .error-content{ flex: 1; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;}
#error_404 .error-content > p.i-error-400{ font-size: 8rem;color: #121212;font-weight:800;text-transform: uppercase;}
#error_404 .error-content > p.i-error-400 i{display: block;font-size: 11rem;margin-bottom: 2rem;}
#error_404 .error-content aside{ width: 100%;}
#error_404 .error-content aside > a,
#error_404 .error-content aside > button{ 
	flex: 1;height: 5.3rem;font-size: 1.6rem;line-height: 2.2rem;color: #000;font-weight: 500;
	border: 1px solid #333;display: inline-flex;align-items: center;justify-content: center;
}
#error_404 .error-content aside > .primary{ background-color: #333; color: #fff;}

@media all and (max-width:768px){
	#error_404{ min-height: unset;}
	#error_404 .head_logo{ margin-bottom: 5rem;}
	#error_404 .error-content > p.i-error-400{ font-size: 5rem;}
	#error_404 .error-content > p.i-error-400 i{ font-size: 8rem;}
}

/* basic modal style :: v-dialog */
.theme--light.v-overlay {color: rgba(0,0,0,.76)}
.theme--dark.v-overlay {color: #fff}
.v-overlay {align-items: center;border-radius: inherit;display: flex;justify-content: center;position: fixed;top: 0;left: 0;right: 0;bottom: 0;pointer-events: none;transition: .3s cubic-bezier(.25,.8,.5,1),z-index 1ms; z-index:199;}
.v-overlay__content {position: relative}
.v-overlay__scrim {border-radius: inherit;bottom: 0;height: 100%;left: 0;position: absolute;right: 0;top: 0;transition: inherit;width: 100%;will-change: opacity}
.theme--dark .v-overlay__scrim {background-color: rgb(33, 33, 33); opacity: .3;background-color: rgb(33, 33, 33);}
.theme--light .v-overlay__scrim {background-color: rgb(255, 255, 255);opacity: .3;border-color: rgb(255, 255, 255);}
.v-overlay--absolute {position: absolute}
.v-overlay--active {pointer-events: auto}
.v-dialog__content {
	align-items: center;display: flex;height: 100%;justify-content: center;left: 0;/*pointer-events: none;*/position: fixed;top: 0;
	transition: .2s cubic-bezier(.25,.8,.25,1), z-index 1ms;width: 100%;z-index:200;outline: none
}
.v-dialog__content.inner{ position: relative;}
.v-dialog {border-top: 2px solid #000;display: flex;justify-content: center;flex-direction: column;width: auto!important;transition: unset!important}
.v-dialog.bt-none {border-top: 0}
.v-dialog:not(.v-dialog--fullscreen) {max-height: 800px!important}
@media(max-height: 800px) {
    .v-dialog:not(.v-dialog--fullscreen) {max-height:90%!important}
}
.v-dialog.full-popup {display: block;border-top: 0;margin: 0;width: 100%!important;max-height: 100%!important;height: 100%!important;background: #fff;overflow-y: auto!important}
.v-dialog>* {width: 100%;}
.v-dialog.full-popup .header-fix {position: fixed;}
.v-dialog.full-popup .header-fix .inner{width:100%; height: 6rem; position: relative;}
@media all and (max-width:1024px){
	.v-dialog.md-fullscreen{ height: 100%; max-height: 100% !important; width:100% !important}
	.v-dialog.md-fullscreen .ui-popup{ max-width: unset !important; width: 100% !important;}
}

/* ui-popup */
.ui-popup {position: relative;background: #fff;width: 100%;height: 100%;min-height: 10px;padding: 0 0 3.4rem;display: flex;flex-direction: column;margin: 0;box-sizing: border-box}
.ui-popup .popup-header {position: relative;box-sizing: border-box;padding: 4.4rem 2.4rem 2.4rem;display: flex;width: 100%;align-items: center;justify-content: center; color:#000; font-weight: 500;}
.ui-popup .popup-header .tit{font-size: 2rem;line-height: 2.8rem;font-weight: 400;text-align: center}
.ui-popup .popup-header .btn-close {padding: 0;position: absolute;right: 1.8rem;top: 1.4rem;z-index: 2;width: auto!important; font-size: 2.2rem;}
.ui-popup .popup-header .btn-back{padding: 0;position: absolute;left: 1.8rem;top: 1.4rem;z-index: 2;width: auto!important;display: none; font-size: 2.2rem;}
.ui-popup .popup-header:has(.top-notice) {display: block}
.ui-popup .popup-header:has(.top-notice) .top-notice{margin: 2.4rem -2.4rem 0}
.ui-popup.none-tit .popup-header{padding: 7.2rem 2.4rem 0}
.ui-popup .popup-body{box-sizing: border-box;overflow-y: auto;overflow-x: hidden;display: flex;flex: 1;width: 100%;height: auto;flex-direction: column;padding:0 2rem 0 2.4rem}
.ui-popup .popup-body .popup-btn-box{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;width: 100%;box-sizing: border-box;margin-top: 3.4rem}
.ui-popup .popup-body .popup-btn-box>.v-btn{flex: 1;min-width: unset!important}
.ui-popup .popup-body .popup-btn-box>.v-btn:not(:last-child){margin-right: 1rem!important}
.ui-popup .popup-body .popup-btn-box>.v-btn.v-btn--block{margin-right: 0!important}
.ui-popup .popup-body::-webkit-scrollbar{width: 1rem}
.ui-popup .popup-body::-webkit-scrollbar-track {background-color: transparent}
.ui-popup .popup-body::-webkit-scrollbar-thumb {background-color: #000;background-clip: padding-box;border-left: .4rem solid transparent;border-right: .4rem solid transparent}
.ui-popup .popup-body::-webkit-scrollbar-button {width: 0;height: 0}
.ui-popup .popup-body.hide-scrollbar::-webkit-scrollbar-thumb{background-color: transparent}
.ui-popup .popup-footer{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;width: 100%;box-sizing: border-box}
.ui-popup .popup-footer .full{ width:100%}
.ui-popup .popup-footer>.v-btn,.ui-popup .popup-footer>button{flex: 1;margin: 0!important;min-width: unset!important}
.ui-popup .popup-footer>.v-btn:not(:last-child),.ui-popup .popup-footer>button:not(:last-child){margin-right: 10px!important}
.ui-popup .popup-footer:not(:empty){ padding: 3.4rem 2.4rem 0;background-color: #fff}
.ui-popup .popup-footer>.v-btn:not(.v-btn--outlined)+.v-btn:not(.v-btn--outlined){content: "";position: absolute;left: 0;top: calc(50% - .7rem);width: 1px;height: 1.4rem;background: #232323}
.ui-popup.btmfull-ver{ padding-bottom: 0;}
.ui-popup.btmfull-ver .popup-body{ padding-bottom: 3.4rem;}
.ui-popup.btmfull-ver .popup-footer{padding-left: 0;padding-right: 0;padding-top: 0}
.ui-popup.btmfull-ver .popup-footer>.v-btn,.ui-popup.btmfull-ver .popup-footer>button{border-right: 0;border-left: 0;border-bottom: 0;margin-right: 0!important}
.ui-popup.back-header .popup-header .btn-close{ display: none;}
.ui-popup.back-header .popup-header .btn-back{ display: block;}
.ui-popup .full-width{ margin-left: -2.4rem!important;margin-right: -2.4rem!important;padding: 0 2.4rem }