@charset "utf-8";
@import url(./gnb_navigation.css); 

/*
	-----------------------------------------------
	* all_layout.css (사용자 공용 레이아웃)
	-----------------------------------------------
*/
/* 공통 스타일 정의 */
/* 공통 스타일 정의 */
body { font-family:var(--font-main); font-weight:400; overflow-x:hidden;}
body.stop_scrolling {overflow:hidden;}
@media all and (max-width:1500px) {body {min-width:320px !important; width:100%; }}

/* #wrap {overflow:hidden;} */
.inner {position:relative; width:calc(100% - 10rem); margin:0 auto; max-width:1500px;}
@media all and (max-width:1500px) {.inner { width:calc(100% - 3rem);}}
@media all and (max-width:1024px) {#wrap {overflow:hidden;}}
/*.inner:after {content:""; display:block; clear:both;}*/



#m_conts,
#conts {min-height:400px;}

.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#333; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}

.readyBox {display:block; position:relative; border-radius:16px; background:#F8F8FC; padding:102px 20px 130px;}
.readyBox > div {display:block; max-width:640px; margin:0 auto; background:url(../img/etc/img_ready.png) no-repeat 50% 50%; background-size:contain;}
.readyBox > div:before {content:""; display:block; position:relative; padding-top:48.59375%;}
.readyBox > div > * {position:absolute; top:0; left:0; text-indent:-999px; overflow:hidden; opacity:0;}


/* 페이지 상단 슬라이딩 팝업 */
.sliding_popup {background: #efefef;position: relative;border-bottom: 1px solid #bbb;}
.sliding_popup .inner {position: relative;max-width: 1400px;margin: 0 auto;text-align: center;}
.sliding_popup .inner img {display: block;margin: 0 auto;max-height: 100%;}
.sliding_popup .swiper-wrapper {height: 150px;}
.sliding_popup .swiper-pagination {width: 94px;left: auto;right: 25.5rem;bottom: 0.7rem;font-size: 1.3rem;background: rgba(255,255,255,0.7);padding: 0.75rem 0;border-radius: 20px;color: #333;}
.sliding_popup .swiper-pagination .swiper-pagination-current {color: #ff5722;font-weight: 600;}
.sliding_popup .control {position: absolute;right: 1rem;bottom: 0.7rem;z-index: 99;overflow: hidden;}
.sliding_popup .control >* {font-size: 1.2rem;color: #fff;vertical-align: middle;float: left;}
.sliding_popup .control label {display: inline-block;height: 30px;padding: 0 10px;line-height: 30px;background: #333;float: left;border-radius: 4px 0 0 4px;}
.sliding_popup .control a[class^=btn_] {display: inline-block;height: 30px;line-height: 30px;padding: 0 15px;float: left;}
.sliding_popup .control .btn_close {background: #ff5722;border-radius: 0 4px 4px 0;}
.sliding_popup .control .btn_play, .sliding_popup .control .btn_stop {background: rgba(0,0,0,0.3) url('./../../common/img/common/spr_slide_controls.png') 0 0 no-repeat;text-indent: -9999px;border-radius: 50%;margin: 0.2rem 2rem 0 0;height: 28px !important;padding: 0 14px !important;}
.sliding_popup .control .btn_play:hover, .sliding_popup .control .btn_stop:hover {background-color: rgba(0,0,0,0.6) }
.sliding_popup .control .btn_play {background-position: -20px -64px;}
.sliding_popup .control .btn_stop {background-position: 11px -64px;}
.sliding_popup .swiper-button-prev.swiper-button-disabled, .sliding_popup .swiper-button-next.swiper-button-disabled {pointer-events: auto !important;}

/* 팝업레이어 */
.popup_layer {background: #fff;border: 1px solid #777;}
.popup_layer .popup_cont {text-align: center;}
.popup_layer .popup_cont img {display: block;}
.popup_layer .ctrl {background: #333;color: #efefef;height: 48px;padding:1rem;font-size: 1.4rem;}
.popup_layer .ctrl .fL {line-height: 180%;}
.popup_layer .ctrl .btn_close {height: 28px;background: #222;border-radius: 0.4rem;color: #888;padding: 0.3rem 0.6rem 0.3rem 2rem;border: 1px solid #000;position: relative;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s}
.popup_layer .ctrl .btn_close:before {content: '';width: 9px;height: 10px;background: url('../img/common/spr_common.png') -132px -121px no-repeat;position: absolute;left: 7px;top: 10px;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s}
.popup_layer .ctrl .btn_close:hover, .popup_layer .ctrl .btn_close:focus {color: #fff;border-color: #666;}
.popup_layer .ctrl .btn_close:hover:before, .popup_layer .ctrl .btn_close:focus:before {background-position: -132px -145px}

#openMenu,
#openSearch,
#m_menu {display:none;}

@media all and (max-width:1024px) {
	#openMenu {display:block;}
}

/* content */
#conts {position:relative; margin-top:5rem;}
#conts img {max-width:100%; margin:0 auto;}
@media all and (max-width:640px) {
	#conts {margin-top:0;}
}




#contentsQrcode {position:absolute; right:0; top:154px; z-index:10; background:#fff; padding:2rem; border:1px solid #bbb; border-radius:20px; width:259px; -webkit-box-shadow:5px 5px 7px 0px rgba(0,0,0,0.18); box-shadow:5px 5px 7px 0px rgba(0,0,0,0.18); display:none;}
#contentsQrcode canvas {width:100%; height:217px;}


/* 위로 이동 버튼 */
.btn_scroll_top {position:fixed; right:6%; bottom:6%; display:none;}


/******************************************
	Footer
******************************************/

.btn_scroll_top {display:none !important;}

.familysite {display:block; position:relative; padding:1.5em 0 1em; margin:0 -1em;}
.familysite:after {content:""; display:block; clear:both;}
.familysite .item {display:block; position:relative; width:25%; padding:0 1em; box-sizing:border-box; float:left;}
.familysite .item .ctrl {display:block; position:relative; width:100%; height:3.55em; line-height:3.55em; padding:0 1em; font-size:.9em; box-sizing:border-box; border:1px solid #D9E5F3; border-radius:.55em; background:url(../img/common/ico_family_arrow.svg) no-repeat top 50% right 1.33em #fff; background-size:.889em auto; font-weight:500;}
.familysite .item .ctrl.close {margin:0; width:101%; background-image:url(../img/common/ico_family_arrow_down.svg);}
.familysite .item .detail {display:none; position:absolute; left:1em; right:1em; bottom:0; z-index:10;}
.familysite .item .list {max-height:16em; overflow:auto; padding:1em; margin-bottom:.5em; background:#fff; border:1px solid #C7CCDD; border-radius:.5em; box-shadow:4px 4px 16px 0px rgba(0,0,0,.08);}
.familysite .item .list li {display:block; position:relative; padding-left:.6em;}
.familysite .item .list li:before {content:""; display:block; position:absolute; top:0; bottom:0; left:0; width:.2em; background:url(../img/common/ico_snb_depth03.svg) no-repeat 0 50%; background-size:contain;}
.familysite .item .list a {display:block; font-size:.85em; padding:.5em 0;}
.familysite .item .list a:hover,
.familysite .item .list a:focus {color:#222222; font-weight:700;}

@media all and (max-width:1024px) {
	.familysite {padding:.5em 0; margin:0 -.5em; font-size:.9em;}
	.familysite .item {width:50%; padding:.5em;}
	.familysite .item .detail {left:.5em; right:.5em; bottom:.5em;}
	.familysite .item .ctrl {height:3em; line-height:3em;}	
}
@media all and (max-width:640px) {
	.familysite {padding:.5em 0; margin:0 -.2em;}
	.familysite .item {padding:.2em;}
	.familysite .item .detail {left:.2em; right:.2em; bottom:.2em;}
}
@media all and (max-width:480px) {
	.familysite .item {width:auto; float:none;}
}


.footerWrap {background:#333; color:#fff; padding:5rem 0;}
.footerWrap .infoWrap {position:relative; display:flex; justify-content:space-between; font-size:1.6rem;}
.footerWrap .infoWrap strong {font-weight:700;} 
.footerWrap .footerLink {display:flex; flex-wrap:wrap;  margin-bottom:3rem;}
.footerWrap .footerLink li {display:block; position:relative; margin-right:2rem;}
.footerWrap .footerLink li:first-child a {color:#ffeacd;}
.footerWrap .infoWrap .contact {display:block; position:relative; opacity:0.8; margin-bottom:3rem;}
.footerWrap .infoWrap .contact li {display:inline-block; margin-right:3rem;}
.footerWrap .infoWrap p {opacity:0.8; font-size:1.5rem;}
.footerWrap .footerLink li a:hover {text-decoration:underline;}

.footerWrap .fsns {display:flex;}
.footerWrap .fsns a {width:4rem; height:4rem; background:#ff0000; display:block; margin:0 0.5rem; overflow:hidden; text-indent:-9999px; border-radius:50%;}
.footerWrap .fsns a.insta {background:#737373 url(/portal/images/common/f-insta.png) no-repeat 50% 50%;}
.footerWrap .fsns a.blog {background:#737373 url(/portal/images/common/f-blog.png) no-repeat 50% 50%;}
.footerWrap .fsns a:hover {background-color:#000;}

@media all and (max-width:1024px) { 
	.footerWrap .infoWrap {justify-content:center; text-align:center; flex-wrap:wrap;}
	.footerWrap .info {width:100%;}
	.footerWrap .footerLink {justify-content:center; text-align:center; flex-wrap:wrap;}
	.footerWrap .footerLink li {margin:0.2rem 1rem;}
	.footerWrap .infoWrap .contact li {margin:0.2rem 1.5rem;}
	.footerWrap .fsns {margin-top:3rem;}
}





/******************************************
	Header
******************************************/

#headerWrap {position:relative; z-index:99;} 
#headerWrap .logo {display:block; position:absolute; top:0; bottom:0; z-index:10;}
#headerWrap .logo a {display:block; position:relative; height:100%; min-width:25rem; overflow:hidden; text-indent:-999px; background:url(/portal/images/common/logo.png) no-repeat 0 50%; }

#openMenu,
#openSearch {position:absolute; top:50%; margin-top:-1em; width:2em; height:2em; overflow:hidden; text-indent:-999px; background:url(../img/common/btn_search.svg) no-repeat 50% 50%; background-size:contain; z-index:10;}
#openSearch {display:block; right:2.85em;}
#openSearch.close {background-image:url(../img/common/btn_search_close.svg);}

#openMenu {right:0; background-image:url(../img/common/btn_allmenu.svg);}

@media all and (min-width:1025px) {
	#openSearch {right:0em;}
}
@media all and (max-width:1024px) {
	#headerWrap {border-bottom:1px solid #eee;}
	#headerWrap .logo {position:relative; padding:1.5em 0;}
	#headerWrap .logo a {height:1.5em; }
}


/******************************************
	Top Search Style
******************************************/

#searchWrap {display:block !important; position:absolute; top:100%; left:0; right:0; padding:0; z-index:999; transition:.3s all; -webkit-transition:.3s all; transform:scaleY(0); -webkit-transform:scaleY(0); transform-origin:50% 0; -webkit-transform-origin:50% 0; visibility:hidden;}
.open-mo-search #searchWrap {visibility:visible; transform:scaleY(1); -webkit-transform:scaleY(1); }
#searchWrap:after {content:""; display:block; position:absolute; top:0; bottom:0; left:-5000px; right:-5000px; background:#fff; border-bottom:1px solid #ddd; z-index:-1;}
#searchWrap .inner {max-width:1048px; margin:0 auto; padding-top:3em;}
#searchWrap .total_search {display:block; position:relative; padding:0 4.2em 0 8.5em; overflow:hidden; border-radius:9em; background:#fff; z-index:1; border:1px solid #ddd;}
#searchWrap .total_search:before {content:""; display:block; position:absolute; left:8.5em; top:50%; height:.9em; margin-top:-.45em; width:1px; background:#ddd; z-index:10;}
#searchWrap .total_search input[type="submit"] {display:block; position:absolute; right:0; top:50%; width:4.2em; height:3.4em; margin:-1.7em 0 0 0; background:url(../img/common/ico_search.svg) no-repeat 50% 50%; background-size:1.2em auto; overflow:hidden; text-indent:-999px; padding:0; border:none;}
#searchWrap .total_search select {display:block; position:absolute; top:0; left:0; width:9.44em; height:100%; font-size:.9em; padding:0 1.5em; background:url(../img/common/ico_search_arrow.svg) no-repeat top 50% right 1.27em; background-size:1em auto; box-sizing:border-box; border:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none;  appearance:none;}
#searchWrap .total_search select::-ms-expand {display:none;}
#searchWrap .total_search select option {color:#333;}
#searchWrap .total_search input[type="text"],
#searchWrap .total_search input[type="search"] {display:block; position:relative; width:100%; box-sizing:border-box; border:none; margin:0; font-size:.9em; height:3.77em; padding:0 0 0 1.45em;}

#searchWrap .papularKeyowrd {display:block; position:relative; margin:1em 0; padding-left:8em;}
#searchWrap .papularKeyowrd dt {display:block; position:absolute; font-size:.8em; top:50%; left:1em; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
#searchWrap .papularKeyowrd dt:before,
#searchWrap .papularKeyowrd dt:after {content:""; display:inline-block; position:relative; width:1.125em; height:1.125em; background:url(../img/common/spr_search_popular.svg) no-repeat 0 50%; background-size:auto 100%; vertical-align:middle; margin:0 .3em;}
#searchWrap .papularKeyowrd dt:after {background-position:100% 50%;}
#searchWrap .papularKeyowrd ul {display:block; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#searchWrap .papularKeyowrd li {display:inline;}
#searchWrap .papularKeyowrd a {display:inline-block; font-size:.85em; padding:.5em 1em .4em; border-radius:9em;}
#searchWrap input[id*="close"],
#searchWrap button[id*="close"] {display:block; position:absolute; top:2em; right:0; width:3em; height:3em; border-radius:100%; text-indent:-999px; overflow:hidden; background:url(../img/common/btn_search_close.svg) no-repeat 50% 50%; background-size:contain; opacity:0; z-index:-9999;}
#searchWrap input[id*="close"]:focus,
#searchWrap button[id*="close"]:focus {opacity:1; z-index:1;}

@media all and (max-width:640px) {
	#searchWrap {padding:2em 0;}
	#searchWrap .inner {padding-top:2em;}
	#searchWrap .inner:before {font-size:3em;}
	#searchWrap input[id*="close"],
	#searchWrap button[id*="close"] {top:1em; font-size:.9em;}
	
	#searchWrap .papularKeyowrd {margin-bottom:0; padding-left:0;}
	#searchWrap .papularKeyowrd dt {position:relative; top:auto; left:auto; transform:none; -webkit-transform:none; margin-bottom:1em; font-size:.9em;}
}
@media all and (max-width:430px) {
	#searchWrap .total_search {padding-left:0;}
	#searchWrap .total_search .inner:before {display:none;}
	#searchWrap .total_search select {display:none;}
}


/******************************************
	LNB
******************************************/

#lnbWrap {display:block; margin:0; text-align:right; min-height:4.5em; color:#333;}
#lnbWrap .li_depth01 {display:inline-block; padding:0 5rem; vertical-align:top;}
#lnbWrap .li_depth01:last-child {padding-right:0;}
#lnbWrap .li_depth01 > a {display:block; position:relative; font-size:2rem; color:#333; padding:1.8em 0; font-weight:500; }
#lnbWrap .li_depth01 > a:after {content:''; display:block; width:1rem; height:1rem; border-radius:50%; background:#f1f1f1; position:absolute; top:calc(50% - 0.5rem); right:-5.5rem;}
#lnbWrap .li_depth01:last-child > a:after {display:none;}

#lnbWrap .li_depth01.on > a,
#lnbWrap .li_depth01.active > a {color:var(--color-main); font-weight:700;}

#lnbWrap .li_depth01 > a:before {content:''; display:block; width:0; height:4px; background:var(--color-main); position:absolute; bottom:0; left:0; transition:all .2s;}
#lnbWrap .li_depth01.on > a:before,
#lnbWrap .li_depth01.active > a:before {width:100%;}

@media all and (min-width:1025px) {
	#lnbWrap .layer:before {content:""; display:none; position:absolute; top:0; left:-5000px; right:-5000px; bottom:0; background:#fff; z-index:0;}
	#lnbWrap .layer:after {content:""; display:Block; position:absolute; bottom:0; left:-5000px; right:-5000px; height:1px; background:#eee; z-index:1;}
	#lnbWrap .lnb_sub {display:flex; flex-wrap:wrap; justify-content:space-between; position:absolute; top:100%;  left:0; right:0; padding:1.5em 0; background:#fff; transform:translateY(-2em); -webkit-transform:translateY(-2em); opacity:0; visibility:hidden; z-index:-1;}
	#lnbWrap .lnb_sub:before {content:""; display:block; position:absolute; top:0; left:-5000px; right:-5000px; bottom:0; background:#fff; box-shadow:0px 8px 16px 0px rgba(0,0,0,.08); z-index:-99;}
	#lnbWrap .lnb_sub:after {content:""; display:block; position:absolute; top:0; right:calc(100% - 25rem); width:2560px; bottom:0; background:#ff0000 url(/portal/images/common/menubg.jpg) right bottom / cover; z-index:-99;}
	
	#lnbWrap .layer.on:before {display:block;}
	#lnbWrap .layer.on:after {background:#ddd;}
	#lnbWrap .lnb_sub.on {transform:translateY(0); -webkit-transform:translateY(0); opacity:1; visibility:visible; transition:.3s all; -webkit-transition:.3s all;}
	#lnbWrap  .lnb_sub > .tit { width:25rem; text-align:left; padding-top:3rem;}
	#lnbWrap  .lnb_sub > .tit strong {color:var(--color-main); font-size:3.5rem; font-family:var(--font-subTT); font-weight:700; display:block; margin-bottom:2rem;}
	#lnbWrap  .lnb_sub > .tit span {font-size:1.6rem;}
	
	/* Depth 02 */
	#lnbWrap  .depth02 { width:calc(100% - 28rem); display:flex; flex-wrap:wrap;}
	#lnbWrap  .depth02:after {content:""; display:block; clear:both;}
	#lnbWrap  .li_depth02 { position:relative;   width:25%; box-sizing:border-box; padding:.5em;}
	#lnbWrap  .li_depth02 > a {display:block; position:relative; padding:1rem 2rem; border-radius:5rem; border:1px solid #ddd; background:#fff; text-align:center;} 
	#lnbWrap  .li_depth02 > a span {display:block; position:relative; color:#333333; font-size:1.8rem; font-weight:500;}
	#lnbWrap  .li_depth02 > a.active,
	#lnbWrap  .li_depth02 > a:hover,
	#lnbWrap  .li_depth02 > a:focus {color:#fff; background:var(--color-main); border:1px solid var(--color-main);}
	#lnbWrap  .li_depth02 > a.active span,
	#lnbWrap  .li_depth02 > a:hover span,
	#lnbWrap  .li_depth02 > a:focus span {color:#fff;}
	#lnbWrap  .li_depth02 > a[target="_blank"] span:after {content:"\ecaf"; display:inline-block; width:1.6rem; height:1.6rem; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; opacity:0.5; margin-left:0.5rem;}
	
	
	
	
	/* Depth 03 */
	#lnbWrap  .depth03 {margin-top:.6em;}
	#lnbWrap  .depth03 > li > a {display:block; position:relative; text-align:left; padding:0.5rem 0 0.5rem 3rem; margin:0.2rem 0;}
	#lnbWrap  .depth03 > li > a:before {content:""; display:block; position:absolute; width:0.6rem; height:0.6rem; border-radius:100%; left:1.8rem; top:1.6rem; margin-top:-.1em; background:#333;}
	#lnbWrap  .depth03 > li > a span {display:inline; position:relative; font-size:1.6rem;}
	#lnbWrap  .depth03 > li > a.active:before,
	#lnbWrap  .depth03 > li > a:hover:before,
	#lnbWrap  .depth03 > li > a:focus:before { background:var(--color-main);}
	#lnbWrap  .depth03 > li > a.active,
	#lnbWrap  .depth03 > li > a:hover,
	#lnbWrap  .depth03 > li > a:focus { background:#fbf7f4; border-radius:5rem;}
	
	#lnbWrap  .depth03 > li > a.active span,
	#lnbWrap  .depth03 > li > a:hover span,
	#lnbWrap  .depth03 > li > a:focus span {color:var(--color-main); font-weight:700;}
	#lnbWrap  .depth03 > li > a[target="_blank"]:after {content:"\ecaf"; display:inline-block; width:1.6rem; height:1.6rem; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; opacity:0.5;}
	
	/* Mobile : PC mode SITEMAP */
	#m_menu {display:none !important;}
}
@media all and (max-width:1024px) {
	#lnbWrap {display:none;}
	.side_menu {height:100%;}
	#m_menu {display:none; position:fixed; top:0; bottom:0; right:0; left:0; background:rgba(0,0,0,.6); z-index:99999;}
	.open-mo-lnb #m_menu {display:block;}
	#m_menu .mnu-tit {display:block; position:relative;}
	#m_menu .mnu-tit a {display:block; position:relative;}
	#m_menu .mnu-tit a[target="_blank"] span:after {content: "\ecaf"; display: inline-block; width: 1.6rem; height: 1.6rem; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; opacity: 0.5; margin-left: 0.5rem;}
	#m_menu .open-submenu {display:block; position:absolute; overflow:hidden; text-indent:-999px;}
	#m_menu > div {display:block; position:absolute; top:0; bottom:0; right:0; width:50rem; max-width:100%; background:#fff;}
	#m_menu > div .side {height:100%;}
	#m_menu > div .logo {background:url(/portal/images/common/logo.png) no-repeat 50% 50%; filter:brightness(100); text-indent:-9999px; height:100%;}
	
	#m_menu .btn_menu_close {display:block; position:absolute; top:2.5rem; right:2rem; width:3rem; height:3rem; overflow:hidden; text-indent:-999px; z-index:99; background:url(/portal/images/common/moclose.png) no-repeat 50% 50%;}
	
	#m_menu .side-menu-top {display:block; height:8rem; box-sizing:border-box; padding:1em; color:#fff; background:#222222; z-index:0;
	background: var(--color-main);
	background: -webkit-linear-gradient(90deg, var(--color-sub) 0%, var(--color-main) 100%);
	background: -moz-linear-gradient(90deg,var(--color-sub) 0%, var(--color-main) 100%);
	background: linear-gradient(90deg,var(--color-sub) 0%, var(--color-main) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="var(--color-sub)",
	  endColorstr="var(--color-main)",
	  GradientType=1
	);
 }
	
	#m_menu .depth1 {display:block;  padding:.8em 0; z-index:0; position:relative; height:calc(100% - 8rem);}
	#m_menu .depth1:before {content:""; display:block; position:absolute; top:0; left:0; bottom:0; width:18rem; background:#F8F8FC; z-index:-1; overflow-y:auto;}
	#m_menu .depth1 > li {width:8.75em;}
	#m_menu .depth1 > li > .mnu-tit a {padding:1em 1.25em; z-index:0; color:#333; font-weight:500;  margin-left:2rem; font-size:1.6rem;}
	#m_menu .depth1 > li > .mnu-tit a span {display:block; font-size:1.125em; }
	#m_menu .depth1 > li > .mnu-tit .open-submenu {position:absolute; top:0; left:0; width:calc(100% + 2rem); height:100%; z-index:1; display:none;}
	#m_menu .depth1 > li.active > .mnu-tit a span {color:#fff; font-weight:700; z-index:2; position:relative;}
	#m_menu .depth1 > li.active > .mnu-tit a:before {content:''; display:block; position:absolute; top:0; left:-2rem; width:calc(100% + 4rem); height:100%; background:var(--color-main); z-index:1; border-radius:5rem; margin-left:1.5rem; z-index:1;}
	
	#m_menu .depth2Wrap {display:none; position:absolute; top:0; left:18rem; padding:1.25em .75em 1.25em 1.25em; overflow:auto; width:calc(100% - 18rem);}
	#m_menu li.active > .depth2Wrap {display:block;}
	#m_menu .depth2 {min-width:160px;}
	#m_menu .depth2 > li {border-bottom:1px solid #dedede;}
	#m_menu .depth2 > li > .mnu-tit {}
	#m_menu .depth2 > li > .mnu-tit a {padding:.75em .625em; margin-right:1.25em;}
	#m_menu .depth2 > li > .mnu-tit a[target="_blank"]:after {right:auto; left:100%;}
	#m_menu .depth2 > li > .mnu-tit a span {font-size:1.8rem; font-weight:500;}
	#m_menu .depth2 > li > .mnu-tit .open-submenu {position:absolute; top:calc(50% - 1.5rem); right:0; width:3rem; height:3rem; background:#fafafa; border-radius:50%; }
	#m_menu .depth2 > li > .mnu-tit .open-submenu:after {content:'\ea4e';  text-indent:0; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; width:3rem; height:3rem; color:var(--color-main); font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; transform:rotate(0);}
	#m_menu .depth2 > li.active > .mnu-tit {/*border-bottom:2px solid var(--color-main);*/}
	#m_menu .depth2 > li.active > .mnu-tit a span {color:var(--color-main); font-weight:700;}
	#m_menu .depth2 > li.active > .mnu-tit .open-submenu {background:var(--color-main); }
	#m_menu .depth2 > li.active > .mnu-tit .open-submenu:after {color:#fff; transform:rotate(180deg); }
	
	#m_menu .depth3 {display:none; position:relative; padding:1rem; }
	#m_menu li.active > .depth3 {display:block; background:#f8f8f8; border-radius:1rem; margin:1rem 0;}
	#m_menu .depth3 li > .mnu-tit a {padding:.375em 0 .375em 1.25em;}
	#m_menu .depth3 li > .mnu-tit a:before {content:""; display:block; position:absolute; left:.5em; top:1.8rem; margin-top:-.1875em; width:.375em; height:.375em; background:url(../img/common/ico_lnb_depth3_mobile.svg) no-repeat 50% 50%; background-size:contain; border-radius:100%;}
	
	#m_menu .depth4 {display:none;}
}


@media all and (max-width:480px) {
	#m_menu > div {width:31rem;}
	#m_menu .depth1 {padding:0;}
	#m_menu .depth1,
	#m_menu .depth1 > li {width:100%; }
	#m_menu .depth1:before {display:none; }
	#m_menu .depth1 > li > .mnu-tit a { border-top:1px solid #dedede; border-bottom:0; margin-left:0;}
	#m_menu .depth1 > li:first-child > .mnu-tit a {border-top:0;}
	#m_menu .depth1 > li.active > .mnu-tit a {font-weight:700; background:var(--color-main);}
	#m_menu .depth1 > li.active > .mnu-tit a:before {left:-2rem; width:100%; height:100%; background:var(--color-main); z-index:1; display:none;}
	
	#m_menu .depth2Wrap {position:relative; top:auto; left:auto; width:calc(100% - 2rem); padding:1rem; background:#fafafa; margin:1rem; border:1px solid #dedede; border-radius:1rem;}
	#m_menu .depth2Wrap li:last-child {border-bottom:0;}
	#m_menu li.active > .depth3 {display:block; background:#fff; border-radius:1rem; margin:0 0 1rem 0; border:1px solid #dedede;}
}


#mask_mn {background:rgba(0,0,0,0.5); position:absolute; top:0; left:0; width:100%; height:100%; z-index:98; display:none;}

/******************************************
	Main Bannere
******************************************/

.bannerWrap {padding-left:1em; padding-right:1em; border-top:1px solid #eee;}
.bannerWrap h3 {display:block; position:absolute; top:50%; left:0; color:#222; font-weight:700; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.bannerWrap .control {display:block; position:absolute; top:50%; left:5em; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.bannerWrap .control button {display:block; position:relative; float:left; margin-right:.3em; width:1.6em; height:1.6em; border-radius:100%; text-indent:-999px; overflow:hidden; background:no-repeat 50% 50%; background-size:100% 100%;}
.bannerWrap .control button.prev {background-image:url(../img/common/btn_banner_prev.svg);}
.bannerWrap .control button.next {background-image:url(../img/common/btn_banner_next.svg);}
.bannerWrap .control button.play {display:none; background-image:url(../img/common/btn_banner_play.svg);}
.bannerWrap .control button.stop {background-image:url(../img/common/btn_banner_pause.svg);}
.bannerWrap .slider {display:block; position:relative; margin-left:13.5em; overflow:hidden;}
.bannerWrap .slider:after {content:""; display:block; position:absolute; top:0; bottom:0; right:0; width:3em; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); z-index:9;}
.bannerWrap .swiper-slide {width:auto; padding:1.1em 0;}
.bannerWrap .swiper-slide a {display:block; position:relative; border-radius:9em; border:2px solid #ddd; padding:.824em 1.53em; color:#222; font-size:.85em;}

@media all and (max-width:640px) {
	.bannerWrap h3 {display:none;}
	.bannerWrap .control {left:0;}
	.bannerWrap .slider {margin-left:6.5em;}
}


/******************************************
	Sub Layout
******************************************/

#container { background:url(/portal/images/common/subbg.jpg) no-repeat 50% 0 / cover;} 
#container > .inner {display:flex; justify-content:space-between; padding:5rem 0;}
#container > .inner:before {content:''; display:block; width:calc(100% + 100rem); background:#fff; height:calc(100% - 19rem); position:absolute; top:19rem; left:-10rem; border-radius:20rem 0 0 0;}
/*#container:after {content:""; display:block; clear:both;}*/

#snbWrap {position:relative; overflow:hidden;}
#snbWrap:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:.6em; border:1px solid #DFE4EF; z-index:-1;}
#snbWrap h2 {display:block; position:relative; height:16.5rem; background:var(--color-main); overflow:hidden; border-radius:3rem 10rem 3rem 3rem; font-weight:600;}
#snbWrap h2 > * {display:table; width:100%; height:100%; text-align:center; table-layout:fixed;}
#snbWrap h2 > * > * {display:table-cell; padding:.4em; vertical-align:middle; font-size:1.5em; color:#fff;}

#snbWrap .snb ul {display:none;}
#snbWrap .snb li.on > ul,
#snbWrap .snb li.active > ul {display:block;}

#snbWrap nav {display:block; position:relative; overflow:hidden; margin-top:2rem;}
#snbWrap .snb > li {display:block; position:relative;}
#snbWrap .snb > li > a {display:block; position:relative; padding:2rem 2rem; border:1px solid #dedede; margin-bottom:1rem; border-radius:1rem; font-weight:500;}
#snbWrap .snb > li > a span {display:block; position:relative; color:#333;}
#snbWrap .snb > li > a.on,
#snbWrap .snb > li > a.active {border-radius:1rem; margin-bottom:1rem; background:var(--color-main); font-weight:700; border:1px solid var(--color-main);}
#snbWrap .snb > li:has(ul) > a.on,
#snbWrap .snb > li:has(ul) > a.active { color:#fff;  border-radius:1rem 1rem 0 0;  margin-bottom:0;}

#snbWrap .snb > li:has(ul) > a:after {content:'\ea4e'; display:flex; width:2rem; height:2rem; position:absolute; top:calc(50% - 1rem); right:2rem; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; font-size:2rem; align-items:center; justify-content:center; font-weight:200; transition:all .2s;} 

#snbWrap .snb > li > a.on span,
#snbWrap .snb > li > a.active span {color:#fff;}
#snbWrap .snb > li:has(ul) > a.active:after {transform:rotate(180deg);}

#snbWrap .snb > li > ul {border:1px solid var(--color-main); border-top:0; padding:2rem 2rem; background:#fff; border-radius:0 0 1rem 1rem; margin-bottom:1rem;}
#snbWrap .snb > li > ul > li {display:block; position:relative;}
#snbWrap .snb > li > ul > li > a {display:block; position:relative; padding:0.5rem 0 0.5rem 1.2rem;}
#snbWrap .snb > li > ul > li > a > span {display:block; position:relative; font-size:1.6rem; color:#555;}
#snbWrap .snb > li > ul > li > a.on > span,
#snbWrap .snb > li > ul > li > a.active > span {color:var(--color-main); font-weight:600;}
#snbWrap .snb > li > ul > li > a:before {content:''; display:block; width:0.5rem; height:0.5rem; border-radius:50%; background:var(--color-main); opacity:0.3; position:absolute; top:1.3rem; left:0;}
#snbWrap .snb > li > ul > li > a.active:before {opacity:1;}

#snbWrap .snb > li > ul > li > ul {display:none !important;}

#snbWrap .snb a[target="_blank"] span:after {content:"\ecaf"; display:inline-block; width:1.6rem; height:1.6rem; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; opacity:0.5; font-weight:400; margin-left:0.5rem;}


@media all and (min-width:1025px) {
	#snbWrap {width:30rem ; max-width:20%;}
	#content {width:113.5rem; max-width:76%;}
}
@media all and (max-width:1640px) {
	#container { max-width:100%; }
}
@media all and (max-width:1024px) {
	#snbWrap {display:none;}
	#content {width:100%; max-width:100%;}
}



/******************************************
	Page Title
******************************************/

#titWrap {display:block; position:relative;  text-align:center; padding:1rem 0 4rem; }
#titWrap h2 {display:block; position:relative; font-size:3.8rem; font-weight:800; color:#222;}

#spotWrap {position:relative; margin-bottom:1rem;}
#spotWrap:after {content:""; display:block; clear:both;}
#spotWrap .spot_list {display:block; position:relative; color:#55504d;}
#spotWrap .spot_list > li {display:inline-block; position:relative; vertical-align:middle;}
#spotWrap .spot_list > li + li {padding-left:1.2em;}
#spotWrap .spot_list > li + li:before {content:"\ea6e"; display:block; position:absolute; left:0; top:0; margin-top:-.1em; border-radius:100%; overflow:hidden; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; font-weight:200;}
#spotWrap .spot_list > li > * {display:block; position:relative; color:#55504d; font-size:1.5rem;}
#spotWrap .spot_list > li:first-child > * {width:2rem; height:2rem; background:url(/portal/images/common/loca.png) no-repeat 50% 50% / contain; text-indent:-999px; overflow:hidden; transform:translateY(-0.2rem);}
#spotWrap .spot_list > li:last-child > * { font-weight:600;}

#spotWrap .sub_acc {display:block; position:absolute; bottom:0; right:0;}
#spotWrap .sub_acc > li {display:inline-block; position:relative; vertical-align:middle;}
#spotWrap .sub_acc > li > a {display:block; position:relative; margin-left:.2em; width:2.2em; height:2.2em; box-sizing:border-box; text-indent:-999px; overflow:hidden; border-radius:.8em; border:1px solid #C7CCDD; background:#fff;}
#spotWrap .sub_acc > li > a:hover {border:2px solid #222222; box-shadow:4px 4px 12px rgba(0, 0, 0, 0.04);}
#spotWrap .sub_acc > li > a:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-1.1em 0 0 -1.1em; width:2.2em; height:2.2em; background:url(../img/common/spr_spot.svg) no-repeat 0 0; background-size:auto 4.4em;}
#spotWrap .sub_acc > li > a.share:before {background-position: -14.25em 0;}
#spotWrap .sub_acc > li > a.share:hover:before {background-position: -14.25em -2.2em;}
#spotWrap .sub_acc > li > a.print:before {background-position: -19.65em 0;}
#spotWrap .sub_acc > li > a.print:hover:before {background-position: -19.65em -2.2em;}
#spotWrap .sub_acc > li > a.zoom:before {background:url(../img/common/spr_spot_text.svg) no-repeat 50% 50%; background-size:contain;}
#spotWrap .sub_acc > li > a.zoom:hover:before {background-image:url(../img/common/spr_spot_text_on.svg);}

#spotWrap .share_list {display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); -webkit-transform:translateY(-50%); transition:.3s all; -webkit-transition:.3s all;}
#spotWrap .share_list > div {display:block; position:relative; padding-right:2.8em;}
#spotWrap .share_list > div:after {content:""; display:block; clear:both;}
#spotWrap .share_list .close {display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:2.2em; height:2.2em; background-position:-11.55em 0; background-color:#333; border-radius:.8em;}
#spotWrap .share_list ul {display:block; white-space:nowrap; padding:.45em .6em; border-radius:.7em; background:#fff; border:1px solid #C7CCDD; box-shadow:4px 4px 16px 0px rgba(0,0,0,.08); transition:.3s all; -webkit-transition:.3s all;}
#spotWrap .share_list li {display:inline-block; vertical-align:middle;}
#spotWrap .share_list button {display:block; position:relative; width:1.6em; height:1.6em; text-indent:-999px; overflow:hidden; background:url(../img/common/spr_spot.svg) no-repeat 0 -.3em; background-size:auto 4.4em;}
#spotWrap .share_list button.twitter {background-position:-7.54em -.3em;}
#spotWrap .share_list button.facebook {background-position:-5.7em -.3em;}
#spotWrap .share_list button.blog {background-position:-3.7em -.3em;}
#spotWrap .share_list button.kakaostory {background-position:0 -.3em;}
#spotWrap .share_list button.kakaotalk {background-position:-1.9em -.3em;}
#spotWrap .share_list button.qrcode {background:url(../img/common/spr_spot_qr.svg) no-repeat 50% 50%; background-size:contain;}
#spotWrap .share_list button.instagram {background-position:-7.54em -.3em;}
#spotWrap .share_list:not(.open) {visibility:hidden; opacity:0;}
#spotWrap .share_list:not(.open) ul {transform:translateX(10%); -webkit-transform:translateX(10%);}

#spotWrap .zoom_list {display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); -webkit-transform:translateY(-50%); transition:.3s all; -webkit-transition:.3s all;}
#spotWrap .zoom_list > div {display:block; position:relative; padding-right:2.8em;}
#spotWrap .zoom_list > div:after {content:""; display:block; clear:both;}
#spotWrap .zoom_list .close {display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:2.2em; height:2.2em; background:url(../img/common/spr_spot.svg) no-repeat -11.55em 0; background-size:auto 4.4em; background-color:#333; border-radius:.8em; text-indent:-999px; overflow:hidden;}
#spotWrap .zoom_list ul {display:block; white-space:nowrap; padding:.45em .6em; border-radius:.7em; background:#fff; border:1px solid #C7CCDD; box-shadow:4px 4px 16px 0px rgba(0,0,0,.08); transition:.3s all; -webkit-transition:.3s all;}
#spotWrap .zoom_list li {display:inline-block; vertical-align:middle;}
#spotWrap .zoom_list a {display:block; position:relative; width:1.6em; height:1.6em; text-indent:-999px; overflow:hidden; background:url(../img/common/spr_spot_text_zoom.svg) no-repeat 50% 50%; background-size:auto 100%;}
#spotWrap .zoom_list a#zoomOut {background-position:-1.9em 50%;}
#spotWrap .zoom_list a#zoomIn {background-position:0 50%;}
#spotWrap .zoom_list:not(.open) {visibility:hidden; opacity:0;}
#spotWrap .zoom_list:not(.open) ul {transform:translateX(10%); -webkit-transform:translateX(10%);}

@media all and (max-width:1024px) {
	#titWrap {margin-bottom:2em;}
}
@media all and (max-width:640px) {
	#spotWrap .spot_list > li {display:none;}
	#spotWrap .spot_list > li:last-child,
	#spotWrap .spot_list > li:first-child{display:inline-block;}
	#titWrap h2 {font-size:2.4rem;}
	#container > .inner {padding-top:2.5rem;}
	#container > .inner:before {top: 13rem; border-radius:0;}
	#titWrap {margin-bottom:1rem;}
	#spotWrap .spot_list > li:first-child > * {transform:translateY(0);}
}