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

/*
	-----------------------------------------------
	* all_layout.css (사용자 공용 레이아웃)
	-----------------------------------------------
*/
/* 공통 스타일 정의 */
body {/*min-width:1600px; font-family:'공통 지정 폰트', Helvetica, Arial, sans-serif;*/ max-width: 100%; overflow-x: hidden; }
body.stop_scrolling {overflow:hidden;}
@media all and (max-width:1024px) {body {min-width:320px !important;}}
#wrap,
#m_menu {/* font-size:18px; */}
@media all and (max-width:1024px) {#wrap,#m_menu {font-size:17px;}}
@media all and (max-width:780px) {#wrap,#m_menu {font-size:16px;}}
@media all and (max-width:640px) {#wrap,#m_menu {font-size:15px;} #wrap {overflow:hidden;}}
@media all and (max-width:480px) {#wrap,#m_menu {font-size:14px;}}

/*#wrap {overflow:hidden;}*/
.inner {position:relative; max-width:1600px; margin-left:auto; margin-right:auto;}
.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; max-width: 100%; }
.popup_layer .popup_cont {text-align: center;}
.popup_layer .popup_cont img {display: block; max-width: 100%; }
.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}

@media all and (max-width:1024px) {
	.popup_layer { position: absolute; top: 10px !important; left: 50% !important; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
}

@media all and (max-width:640px) {
	.popup_layer { width: 80% !important; }
}


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

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

/* content */
#conts {position:relative;}
#conts img {max-width:100%; margin:0 auto;}

#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:2%; bottom:5%; display:none; width: 70px; height: 70px; background: #2D3947 url('../img/common/btn_scroll_top.svg') no-repeat center; 
					border-radius: 25px; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.15); -webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s }
.btn_scroll_top:hover { background-color:#131313; }

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

/*.btn_scroll_top { display:none !important;}*/



/*.footerWrap {padding-left:1em; padding-right:1em;}*/
.footerWrap > .inner {overflow:hidden; }
.footerWrap .logo {position:absolute; top:.5em; width:9em;}
.footerWrap .logo img {width:100%;}

.footerWrap .footerLink { /*padding:.75em 0;*/padding:.5em 0; /*margin:0 -1.1em;*/ overflow:hidden; background:#F3F5F9; margin-left:11em; padding-left:.75em;}
.footerWrap .footerLink li {display:block; position:relative; padding:0 1.1em; float:left; box-sizing:border-box;}
.footerWrap .footerLink li + li:before {content:""; display:block; position:absolute; width:4px; height:4px; background:#ddd; left:-2px; top:50%; margin-top:-2px;}
.footerWrap .footerLink a {display:block; position:relative; padding:.3em 0; font-size:.85em; color:#2D3947; font-weight:500;}

.footerWrap .footerLink li:first-child { padding-left:0; }

.footerWrap .infoWrap {position:relative; /*margin:1.5em 0 2em;*/ margin:1.1em 0 1.4em;  margin-left:11em; padding-left:.75em;}
.footerWrap .infoWrap strong {font-weight:700;}
/* .footerWrap .infoWrap .logo {display:block; position:absolute; top:0; left:0; width:11em; height:2.2em; background:url(../img/common/logo.svg) no-repeat 0 50%; background-size:contain; text-indent:-999px; overflow:hidden;} */
/*.footerWrap .infoWrap .info {margin-left:13.5em;}*/
.footerWrap .infoWrap .contact {display:block; position:relative; /*margin-bottom:.75em;*/ margin-bottom:.4em; color:#2D3947;}
.footerWrap .infoWrap .contact li {display:inline-block; font-size:.8em; margin-right: 1em; }
.footerWrap .infoWrap p.copy {font-size:.8em;}
.footerWrap .infoWrap p {/*margin-top:.8em;*/ font-size:.8em; line-height:1.4; color:#A0A2B5; }
.footerWrap .infoWrap .dis  {display:inline-block; position:absolute; margin-top:.7em; right:0; top: 0%; transform:translateY(-50%); background:#F3F9FF; border-radius:1.2rem; padding:1rem;}
.footerWrap .infoWrap .dis p {text-align:left; line-height:1.42em; padding-left:1.5em; background:url(../../_guide/img/ico_table_guide.svg) no-repeat top .121765em left 0; background-size:1.17647em auto;}
.footerWrap .infoWrap .siteMap { font-size: .8em; float: right; margin-top: 2px; display: none }

@media all and (max-width:1600px) {
	.footerWrap > .inner {padding:0 2%;}
}


@media all and (max-width:1380px) {
	.footerWrap .infoWrap .dis {position:static; transform:none;}
}

@media all and (max-width:1024px) {
	.footerWrap .logo {position:relative; top:auto; margin:.5em auto; width:10em;}
	.footerWrap .footerLink {margin-left:0; padding-left:0;}
	.footerWrap .footerLink li {width:25%; padding: 0; }
	.footerWrap .footerLink li a {text-align:center;}
	.footerWrap .infoWrap {margin-left:0;  padding-left:0;}
	.footerWrap .infoWrap .logo {position:relative; width:auto; background-position:50% 50%; margin-bottom:1.5em;}
	.footerWrap .infoWrap .info {margin-left:0; text-align:center;}
}
@media all and (max-width:520px) {
	.footerWrap .infoWrap .contact li,
	.footerWrap .infoWrap p { font-size: .92em; }
	.footerWrap .infoWrap p.copy { font-size: 0.85em; }
}

@media all and (max-width:480px) {
	.footerWrap .footerLink li {width:50%;}
	.footerWrap .footerLink li:nth-child(odd)::before { display: none; }
}





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

#headerWrap {position:relative; padding-left:1em; padding-right:1em; z-index:99; text-align: center; }
#headerWrap > .inner { width: 100%; max-width: 100%;  }
#headerWrap .logo {display:block; position:absolute; top:0; bottom:0; z-index:10;}
#headerWrap .logo a {display:block; position:relative; height:100%; width:190px; overflow:hidden; text-indent:-999px; background:url(/portal/img/common/logo.svg) no-repeat 0 50%; background-size:contain;}

#headerWrap .util { position: absolute; right:0; top:0; padding:1.5em 0; z-index:10; }
#headerWrap .util .gnbWrap { display: inline-block; margin-right: 0.7em;}
#headerWrap .util .user { display: inline-block;}
#headerWrap .util .user li { display: inline-block; vertical-align: middle; margin-left: 0.4em; }
#headerWrap .util .user li a { color:#989898; font-size: 0.8em; }

#siteMap { width:19px; height:19px; text-indent:-999px; display: inline-block; background:url(../img/common/sitemap.svg) no-repeat 50% 50%; background-size:100% auto; z-index:10; }

#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 { width: 19px; height: 19px; margin-top: -9.5px; right:0; background-image:url(../img/common/sitemap.svg);}

@media all and (max-width:1580px) {
	#headerWrap .logo a { width: 250px; }
}

@media all and (max-width:1380px) {
	#headerWrap .logo a { width: 230px; }
	#headerWrap .util ul { margin-right: 0.4em; }
	#headerWrap .util ul li { margin-right: 0.2em; }
	#headerWrap .util ul li a { font-size: 0.7em; }
}

@media all and (max-width:1280px) {
	#headerWrap .logo a { width: 210px; }
}

@media all and (max-width:1180px) {
	#headerWrap .logo a { width: 200px; }
}


@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;}
	
	#siteMap { display: none; }
	#headerWrap .util { right: 30px; }
}

.languageNav { position: relative; display: inline-block; margin-left: 0.7em;  }
.languageNav button {display:block; position:relative; height:30px; z-index:0; text-align:center; font-size:0.8em; color:#4D545B; padding:0 25px; text-align:left; border: 1px solid #E1E6ED; border-radius: 20px;  }
.languageNav button:after {content:""; display:block; position:absolute; width:14px; height:8px; top:50%; right:6px; margin-top:-4px; background:url(../img/common/ico_lang_arrow.svg) no-repeat 50% 50%; background-size:contain;}
.languageNav button:before {content:""; display:block; position:absolute; width:14px; height:14px; left:8px; top:50%; margin-top:-7px; background:url(../img/common/ico_lang.svg) no-repeat 50% 50%; background-size:contain;}

.languageNav .close {display:none; position:absolute; top:0; left:0; width:100%; z-index:1; overflow:hidden; text-indent:-999px; background:transparent !important;}
.languageNav .close:after {display:none;}
.languageNav .detail {display:none; position:absolute; top:100%; left:-24px; right:-24px; background:#fff; border-radius:0 0 20px 20px; padding:15px 10px; box-shadow:10px 10px 40px 0px rgba(0, 0, 0, 0.10); z-index:5;}
.languageNav .detail li { display: block; }
.languageNav .detail li + li {margin-top:5px;}
.languageNav .detail a {display:block; position:relative; padding:0; height:27px; line-height:27px; border-radius:9em; font-size:0.8em; text-align:center; color:#4D545B;}
.languageNav .detail a.on,
.languageNav .detail a:hover {color:#465EDC; background:#EEF2F5;}
.languageNav.active button:after {transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.languageNav.active .detail {display:block;}
.languageNav.active .close {display:block;}  

.alarmArea + .languageNav {margin-left:5em;}     

@media all and (max-width:1380px) {
	#headerWrap .util ul.user {margin-right:0;}
	.alarmArea + .languageNav {margin-left:4em;}
}
@media all and (max-width:1080px) and (min-width:1025px) {
	#headerWrap .util ul.user {margin-right:.4em;}
	.alarmArea + .languageNav {margin-left:0;}
	.alarmArea {display:none !important;}
}
@media all and (max-width:480px) {
	#headerWrap .util .gnbWrap { display: none;  }
}


/******************************************
	Alarm Area
******************************************/

.side-menu-top .alarmArea {display:none !important;}
.alarmArea {position:absolute; top:2.72em; right:12.8em; width:6.4em; font-size:.55556em;}
.alarmArea .btn-alarm {display:block; position:relative; padding:.5em 0 .5em 3em; background:url(../img/common/icon_alarm.svg) no-repeat top 50% left 0; background-size:auto 2.6em;}
.alarmArea .btn-alarm .badge {display:block; position:relative; background:#d1d1d1; color:#222; border-radius:9em; font-size:1.4em; text-align:center; width:2.42857em; height:1.42857em; line-height:1.42857em;}
.alarmArea .btn-alarm.on .badge {background:#F83C3F; color:#fff;}

/*#alarmModal {display:none;}*/
.modalAlarmWrap {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:99999;}
.modalAlarmWrap .close {position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;}
.modalAlarmWrap .modalPop {position:fixed; top:7em; right:12.2em; border-radius:1.6em; background:#fff; box-shadow:1.2em 1.2em 4em 0 rgba(0,0,0,.1); width:40rem; max-width:95%; z-index:1;}
.modalAlarmWrap .modalPop > * {font-size:1.4rem;  padding:1.6rem 2.4rem;}
.modalAlarmWrap .modalPop .hd {display:flex; flex-wrap:nowrap; justify-content:end; padding-bottom:1.6rem;}
.modalAlarmWrap .modalPop .icoBtn {display:flex; white-space:nowrap; height:2rem; flex-wrap:nowrap; align-items:center;}
.modalAlarmWrap .modalPop .icoBtn + .icoBtn {margin-left:1.6rem;}
.modalAlarmWrap .modalPop .icoBtn:before {content:""; display:block; position:relative; width:2rem; height:2rem; background:no-repeat 50% 50%; background-size:contain; margin-right:.2rem;}
.modalAlarmWrap .modalPop .icoBtn.btn-del:before {background-image:url(../img/common/icon_delete.svg);}
.modalAlarmWrap .modalPop .icoBtn.btn-allChk:before {background-image:url(../img/common/icon_check_black.svg);}
.modalAlarmWrap .modalPop .ft {margin-top:1.6rem; text-align:center; color:#2D3947;}
.modalAlarmWrap .modalPop .bd {border:1px solid #ddd; border-left-width:0; border-right-width:0; max-height:19.2rem; overflow:auto; text-align:left;}
.modalAlarmWrap .modalPop .bd ul > li + li {border-top:1px solid #ddd;}
.modalAlarmWrap .modalPop .bd li {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center;}
.modalAlarmWrap .modalPop .bd li a {display:block; position:relative; padding:1.2em 0;}
.modalAlarmWrap .modalPop .bd li a > * {display:block; position:relative;}
.modalAlarmWrap .modalPop .bd li a strong {font-size:1.6rem; color:#333;}
.modalAlarmWrap .modalPop .bd li a p {font-size:1.5rem; font-weight:400; color:#333; margin:.4rem 0;}
.modalAlarmWrap .modalPop .bd li a span {font-size:1.5rem; color:#777777; }
.modalAlarmWrap .modalPop .bd li a.read strong {color:#777777;}
.modalAlarmWrap .modalPop .bd li.no-data {padding:2em 0; text-align:center;}
.modalAlarmWrap .modalPop .bd li.no-data p {width:100%;}

.modalAlarmWrap .modalPop .bd li .ico-check {display:block; position:relative; width:3rem;}
.modalAlarmWrap .modalPop .bd li .ico-check input[type="checkbox"] {position:absolute; top:0; left:0; text-indent:-999px; width:0; height:0; opacity:0; z-index:-9999;}
.modalAlarmWrap .modalPop .bd li .ico-check input[type="checkbox"] + label {display:block; position:relative; width:2.3rem; height:2.3rem; border-radius:100%; border:.2rem solid #bdc4cd; background:url(../img/common/icon_check_black.svg) no-repeat 50% 50%; background-size:auto 80%; opacity:.5; text-indent:-999px; overflow:hidden;}
.modalAlarmWrap .modalPop .bd li .ico-check input[type="checkbox"]:checked + label {background-image:url(../img/common/icon_check_white.svg); background-color:#465EDC; border-color:#465EDC; opacity:1;}

.modalAlarmWrap.mod-delete .not-del,
.modalAlarmWrap:not(.mod-delete) .is-del {display:none !important;}
.modalAlarmWrap.mod-delete .modalPop .bd li a {width:calc(100% - 3.5rem);}
 

@media all and (max-width:1024px) {
	.alarmArea {right:10em;}
}
@media all and (max-width:640px) {
	.alarmArea {right:11em; top:3.5em;}
	.modalAlarmWrap .modalPop {right:1rem; left:1rem; width:auto;}
	
}
@media all and (max-width:480px) {
	.alarmArea {font-size:.7em; right:0em; top:2.2em;}
}

/******************************************
	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:inline-block; margin:0 auto; text-align:center; min-height:4.5em; color:#333;}

#lnbWrap .li_depth01 {display:inline-block; padding:0 1em; vertical-align:top;}
#lnbWrap .li_depth01 > a {display:block; position:relative; font-size:1.05em; color:#333; padding:1.8em 0; text-decoration: none; font-weight: 600; }
#lnbWrap .li_depth01.on > a,
#lnbWrap .li_depth01.active > a {color:#465EDC; font-weight:700;}

@media all and (max-width:1780px) {
	#lnbWrap .li_depth01 > a { font-size: 0.9em; }
}

@media all and (max-width:1580px) {
	#lnbWrap .li_depth01 { padding: 0 0.6em; }
}

@media all and (max-width:1380px) {
	#lnbWrap .li_depth01 > a { font-size: 0.9em; padding: 2em 0; }
}
@media all and (max-width:1340px) {
	#lnbWrap .li_depth01 { padding: 0 0.5em; }
	#lnbWrap .li_depth01 > a { font-size: 0.85em;}
}
@media all and (max-width:1290px) {
	#lnbWrap {margin:0; display:block; margin-left:24rem; text-align:left;}
	#lnbWrap .li_depth01 { padding: 0 0.2em; }
	#lnbWrap .li_depth01 > a { font-size: 0.82em; padding: 2.2em 0; }
}
@media all and (max-width:1170px) {
	#lnbWrap {margin-left:22rem;}
}

@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:block; position:absolute; top:100%;  left:0; right:0; padding:1.5em; 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; border-bottom:1px solid #ddd; box-shadow:0px 8px 16px 0px rgba(0,0,0,.08); z-index:-99;}
	#lnbWrap .lnb_sub:after {content:""; display:block; clear:both;}
	
	#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 {display:none;}
	
	/* Depth 02 */
	#lnbWrap  .depth02 {margin:0 -1.5em;}
	#lnbWrap  .depth02:after {content:""; display:block; clear:both;}
	#lnbWrap  .li_depth02 {display:block; position:relative; float:left; width:20%; box-sizing:border-box; padding:.5em;}
	#lnbWrap  .li_depth02 > a {display:block; position:relative; padding:.8em 1.8em .6em .8em; border-radius:.3em; border:1px solid #ddd; background:#fff; text-align:left;} 
	#lnbWrap  .li_depth02 > a span {display:block; position:relative; color:#333333; font-size:.9em;}
	#lnbWrap  .li_depth02 > a:after {content:""; display:block; position:absolute; right:.6em; top:50%; margin-top:-.45em; width:.9em; height:.9em; background:url(../img/common/ico_lnb_depth02_arrow.svg) no-repeat 50% 50%; background-size:contain; opacity:0; transform:translateX(-100%); -webkit-transform:translateX(-100%); transition:.3s all; -webkit-transition:.3s all;}
	#lnbWrap  .li_depth02 > a.active,
	#lnbWrap  .li_depth02 > a:hover,
	#lnbWrap  .li_depth02 > a:focus {border-color:#222222;}
	#lnbWrap  .li_depth02 > a.active:after,
	#lnbWrap  .li_depth02 > a:hover:after,
	#lnbWrap  .li_depth02 > a:focus:after {transform:translateX(0); -webkit-transform:translateX(0); opacity:1;}
	#lnbWrap  .li_depth02 > a.active span,
	#lnbWrap  .li_depth02 > a:hover span,
	#lnbWrap  .li_depth02 > a:focus span {color:#222222;}
	
	/* Depth 03 */
	#lnbWrap  .depth03 {margin-top:.6em;}
	#lnbWrap  .depth03 > li > a {display:block; position:relative; text-align:left; padding:.5em 1em;}
	#lnbWrap  .depth03 > li > a:before {content:""; display:block; position:absolute; width:.2em; height:.2em; border-radius:100%; left:.4em; top:50%; margin-top:-.1em; background:#ccc;}
	#lnbWrap  .depth03 > li > a:after {content:""; display:inline-block; position:relative; vertical-align:middle; margin-left:.2em; width:.9em; height:.9em; background:url(../img/common/ico_lnb_depth02_arrow.svg) no-repeat 50% 50%; background-size:contain; opacity:0; transform:translateX(-100%); -webkit-transform:translateX(-100%); transition:.3s all; -webkit-transition:.3s all;}
	#lnbWrap  .depth03 > li > a span {display:inline; position:relative; font-size:.85em;}
	#lnbWrap  .depth03 > li > a.active,
	#lnbWrap  .depth03 > li > a:hover,
	#lnbWrap  .depth03 > li > a:focus {border-color:#222222;}
	#lnbWrap  .depth03 > li > a.active:after,
	#lnbWrap  .depth03 > li > a:hover:after,
	#lnbWrap  .depth03 > li > a:focus:after {transform:translateX(0); -webkit-transform:translateX(0); opacity:1;}
	#lnbWrap  .depth03 > li > a.active span,
	#lnbWrap  .depth03 > li > a:hover span,
	#lnbWrap  .depth03 > li > a:focus span {color:#222222; font-weight:400;}
	#lnbWrap  .depth03 > li > a[target="_blank"]:after,
	#lnbWrap  .depth03 > li > a[data-menu-target="_blank"]:after {transform:translateX(0); -webkit-transform:translateX(0); opacity:1; background-image:url(../img/common/ico_lnb_blank.svg) !important;}
	
	/* Mobile : PC mode SITEMAP */
	#m_menu {display:none !important;}
}
@media all and (max-width:1024px) {
	#lnbWrap {display:none;}
	#m_menu {display:none; position:fixed; top:0; bottom:0; right:0; left:0; background:rgba(0,0,0,.4); 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"]:after {content:""; display:block; position:absolute; top:0; bottom:0; right:0; width:1.125em; background:url(../img/common/ico_lnb_blank.svg) no-repeat 50% 50%; background-size:contain;}
	#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:22.5em; max-width:100%; background:#fff;}
	#m_menu .btn_menu_close {display:block; position:absolute; top:.75em; right:.75em; width:1.75em; height:1.75em; border-radius:100%;  overflow:hidden; text-indent:-999px; background:url(../img/common/ico_lnb_close_mobile.svg) no-repeat 50% 50%; background-size:contain; z-index:99;}
	#m_menu .side-menu-top {display:block; position:absolute; top:0; left:0; right:0; height:9rem; /*line-height: 5em;*/ box-sizing:border-box; color:#fff; background:#1A2859; z-index:1;}
	#m_menu .side-menu-top h1 { font-size: 1.1em; display: inline-block; vertical-align: middle; font-weight: 700; padding: 0 1em; line-height: 5.5rem;  }
	#m_menu .depth1 {display:block; position:absolute; top:5.5em; left:0; right:0; bottom:0; padding:.8em 0; z-index:0;}
	#m_menu .depth1:before {content:""; display:block; position:absolute; top:0; left:0; bottom:0; width:8.75em; background:#F8F8FC; z-index:-1;}
	#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:700; font-size: 0.9em; }
	#m_menu .depth1 > li > .mnu-tit a span {display:block; font-size:1.125em; letter-spacing:-.1em;}
	#m_menu .depth1 > li > .mnu-tit .open-submenu {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
	#m_menu .depth1 > li.active > .mnu-tit a span {color:#E74C4C; font-weight:700;}
	#m_menu .depth1 > li.active > .mnu-tit .open-submenu {background:url(../img/common/ico_lnb_depth1_mobile_on.svg) no-repeat top 50% right .5em; background-size:1.25em auto;}
	
	#m_menu .depth2Wrap {display:none; position:absolute; top:0; left:8.75em; right:0; bottom:0; padding:1.25em .75em 1.25em 1.25em; overflow:auto;}
	#m_menu li.active > .depth2Wrap {display:block;}
	#m_menu .depth2 {min-width:160px;}
	#m_menu .depth2 > li > .mnu-tit {border-bottom:1px solid #C7CCDD;}
	#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-weight:700;}
	#m_menu .depth2 > li > .mnu-tit .open-submenu {position:absolute; top:0; bottom:0; right:0; width:1.25em; background:url(../img/common/ico_lnb_depth2_mobile.svg) no-repeat 50% 50%; background-size:100% auto;}
	#m_menu .depth2 > li.active > .mnu-tit {border-bottom:2px solid #347DDD;}
	#m_menu .depth2 > li.active > .mnu-tit a span {color:#347DDD; font-weight:700;}
	#m_menu .depth2 > li.active > .mnu-tit .open-submenu {background-image:url(../img/common/ico_lnb_depth2_mobile_on.svg);}
	
	#m_menu .depth3 {display:none; position:relative; padding:.625em 0 1.25em; border-bottom:1px solid #DFE4EF;}
	#m_menu li.active > .depth3 {display:block;}
	#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:50%; 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;}	
	
	
	#m_menu .gnbWrap { border-top: 1px solid rgba(255,255,255,0.1); line-height: 3.5rem;  }
	#m_menu .gnbWrap .user,
	#m_menu .gnbWrap .languageNav { float: left; margin: 0; }
	#m_menu .gnbWrap .user { width: calc(100% / 3 * 2); }
	#m_menu .gnbWrap .languageNav { width: calc(100% / 3); }
	#m_menu .gnbWrap .languageNav button { border:0; width: 100%; height: 3.5rem; line-height: 3.5rem; color:#fff; padding: 0 30px; }
	#m_menu .gnbWrap .languageNav button:after { right: 10px; background-image:url(../img/common/ico_lang_arrow_w.svg);}
	#m_menu .gnbWrap .languageNav button:before { left: 12px;  background-image:url(../img/common/ico_lang_w.svg);}
	#m_menu .gnbWrap .languageNav .detail { left: 0; right:0;  box-shadow:10px 10px 40px 0px rgba(0, 0, 0, 0.25);  }
	#m_menu .gnbWrap .user li { float: left; width: 50%; text-align: center; font-size: 1.3rem; border-right: 1px solid rgba(255,255,255,0.1); }
	#m_menu .gnbWrap .user li a { display: block; color:#fff; }
}


@media all and (max-width:360px) {
	#m_menu .depth1:before,
	#m_menu .depth1 > li {width:8em;}
	#m_menu .depth2Wrap {left:8em;}
}


/******************************************
	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 {max-width:1600px; margin-left:auto; margin-right:auto; padding:2em 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 #C5D2E5; z-index:-1;}
#snbWrap h2 {display:block; position:relative; height:4em; background:#1A2859; overflow:hidden; border-radius: 1.5rem 1.5rem 0 0; }
#snbWrap h2 > * {display:table; width:100%; height:100%; text-align:center; table-layout:fixed; margin-top: -0.5em;}
#snbWrap h2 > * > * {display:table-cell; padding:.85em .4em .4em; vertical-align:middle; font-size:1em; color:#fff; font-weight: 700;  }

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

#snbWrap nav {display:block; position:relative; padding:1em 1em 2em; overflow:hidden; background:#fff; margin-top: -1em; border-radius: 1.5rem 0 1.5rem 1.5rem; border:1px solid #C5D2E5; border-top:0; }
#snbWrap .snb > li {display:block; position:relative;}
#snbWrap .snb > li > a {display:block; position:relative; padding:1.1em .5em; border-bottom:1px solid #E1E6ED; background: url(../img/common/lnb_depth02_arrow.svg) no-repeat right center; }
#snbWrap .snb > li > a span {display:block; position:relative; font-size:.9em; color:#131313;}
#snbWrap .snb > li > a.on,
#snbWrap .snb > li > a.active { background-image:url(../img/common/lnb_depth02_arrow_on.svg); }
#snbWrap .snb > li > a.on span,
#snbWrap .snb > li > a.active span {font-weight:700; }
#snbWrap .snb > li > ul { border-top:1px solid #000; border-bottom: 1px solid #000; }
#snbWrap .snb > li > ul > li {display:block; position:relative;}
#snbWrap .snb > li > ul > li > a {display:block; position:relative; border-bottom:1px dashed #C5D2E5; padding:.9em .6em; background: url(../img/common/lnb_depth03_arrow.svg) no-repeat right center;}
#snbWrap .snb > li > ul > li:last-child > a { border-bottom:0;  }
#snbWrap .snb > li > ul > li > a.on, 
#snbWrap .snb > li > ul > li > a.active { background-image:url(../img/common/lnb_depth03_arrow_on.svg); }
#snbWrap .snb > li > ul > li > a > span {display:block; position:relative; font-size:.9em; color:#555;}
#snbWrap .snb > li > ul > li > a.on > span,
#snbWrap .snb > li > ul > li > a.active > span {color:#465EDC; font-weight:400;}
#snbWrap .snb > li a:hover { text-decoration: none; }

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


@media all and (min-width:1281px) {
	#snbWrap {width:260px; float:left; max-width:16%;}
	#content {width:1280px; float:right; max-width:80%;}
}
@media all and (max-width:1640px) {
	#container {padding-left:1em; padding-right:1em; max-width:100%;}
}

@media all and (max-width:1480px) {
	#snbWrap h2 > * > * { font-size: 1.25em; }
}

@media all and (max-width:1280px) {
	#snbWrap {display:none;}
}



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

#titWrap {display:block; position:relative; /*border-bottom:.25em solid #F2F2F2; margin-bottom:2.4em;*/ margin:1em 0 1.5em;}
#titWrap::after { content:''; width: 55%; height: 110%; position: absolute; right:1.5em; bottom: 0.5em; background: url(../img/common/img_titWrap.svg) no-repeat right 50%; background-size: auto 100%; } 
#titWrap h3 {display:block; position:relative; font-size:2.8rem; font-weight:800; color:#131313;}

#spotWrap {position:relative; margin-top:1em; background:#00B6ED; border-radius: 0.6em; padding: 0.5em 1em; }
#spotWrap:after {content:""; display:block; clear:both;}
#spotWrap .spot_list {display:block; position:relative; float:left;}
#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:""; display:block; position:absolute; width:.2em; height:.2em; left:.5em; margin-left:-.1em; top:50%; margin-top:-.15em; background:url(../img/common/ico_snb_depth03_wh.svg) no-repeat 50% 50%; background-size:contain; border-radius:100%; overflow:hidden;}
#spotWrap .spot_list > li > * {display:block; position:relative; color:#fff; font-size:.85em;}
#spotWrap .spot_list > li:first-child > * {font-size:1em; width:1em; height:1em; background:url(../img/common/ico_spot_home_wh.svg) no-repeat 50% 50%;  background-size:100% auto; text-indent:-999px; overflow:hidden; margin-top:-.12em; }
#spotWrap .spot_list > li:last-child > * { font-weight:800;}

#spotWrap .sub_acc {display:none; 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:1280px) {
	#titWrap h3 { font-size: 2.6rem; }
}


@media all and (max-width:1024px) {
	/*#titWrap {margin-bottom:2em;}*/
	#titWrap h3 { font-size: 2.4rem; }
}
@media all and (max-width:767px) {
	#titWrap::after { height: 100%; right: 1em; bottom: 1em; }
	#titWrap h3 { font-size: 2.2rem; }
	#spotWrap { margin-top: 0.5em; padding: 0.5em 1em 0.7em; }
	#spotWrap .sub_acc {display:none;}
	#spotWrap .spot_list { background:#00B6ED; z-index:1; }
	#spotWrap .spot_list > li > * { font-size: 0.9em;  margin-top: -.07em; }
	#spotWrap .spot_list > li:first-child > * { margin-top:0; }
}

@media all and (max-width:640px) {
	#titWrap::after { height: 80%; bottom: 1.25em; }
}

@media all and (max-width:568px) {
	#titWrap { margin:1em 0 2em; }
	#titWrap::after { height: 60%; right: 0.5em; bottom: 1.55em; }
}

@media all and (max-width:480px) {
	#titWrap::after  { display: none; }
	#spotWrap { padding: 0.5em 1em 0.65em; margin-top: 0.7em; }
}

@media all and (max-width:380px) {
	#titWrap::after { height: 58%; right: 0.5em; bottom: 1.9em; }
	/*#spotWrap { padding: 0.7em 1em 0.9em; }*/
}



/****************************************************************
	layerPopup
****************************************************************/
.layerPopup {display:none; position:fixed; z-index:99; top:10px; left:10px; background:#fff; /*border:1px solid #000;*/ overflow:hidden; max-width: calc(100% - 20px); }
.layerPopup .pop-con {position:relative;}
.layerPopup .pop-con img { display: block; max-width: 100%;  }
.layerPopup .pop-control {display:block; position:relative; background:#000; color:#fff; padding:10px 40px 10px 10px; font-size:11px; min-width:200px; height:40px; overflow:hidden;}
.layerPopup .pop-control .dayCloseCheck {display:block; position:absolute; top:0; left:0; opacity:0; z-index:-9999; height:0 !important; width:0 !important;}
.layerPopup .pop-control .dayCloseCheck + label {display:inline-block; position:relative; line-height:20px; padding:0; cursor:pointer;}
.layerPopup .pop-control .dayCloseCheck + label:before {content:""; display:inline-block; width:12px; height:12px; vertical-align:middle; background:#fff; border:3px solid #fff; border-radius:100%; margin-right:.5em; box-sizing:border-box;}
.layerPopup .pop-control .dayCloseCheck:focus + label {text-decoration:underline;}
.layerPopup .pop-control .dayCloseCheck:checked + label:before {background:#0089ff;}
.layerPopup .pop-control .pop-close {display:block; position:absolute; top:10px; right:10px; width:20px; height:20px; background:transparent; overflow:hidden; text-indent:-999px;}
.layerPopup .pop-control .pop-close:before {content:"⨯"; display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; line-height:20px; text-indent:0; color:#fff; font-size:2em;}


@media all and (max-width:380px) {
	.layerPopup { max-width: 80%; }
}

/****************************************************************
	tooltip
****************************************************************/

.tooltip  {position:relative; display:inline-block; z-index:5;}
.tooltip .ico {position:relative; display:inline-block; width:20px; height:20px; background:url(/common/img/common/btn_tooltip.svg) no-repeat 0 0; background-size:100% auto; cursor:pointer;}
.tooltip .cont {display:none; width:20em; position:absolute; top:-5px; left:1.15em; padding:.7em .8em; background:#fff; border:2px solid #EBECF1; border-radius:1.2rem; box-shadow:3px 3px 8px 0px rgba(17, 43, 98, 0.1); word-break:keep-all; }
.tooltip .cont p {font-weight:800; margin-bottom:8px; font-size:1.8rem; color:#000;}
.tooltip .cont span {display:block; color:#555969; font-size:.55em; font-weight: 400; line-height:1.4;}
.tooltip .ico:hover + .cont {display:block;}

.tooltip.user .ico {margin-top:.2em;}
.tooltip.user .cont {width:24em; padding:1em 1.6em; left:2em;}
.tooltip.user .cont span {font-size:1.065em;}

@media all and (max-width:640px) {
	.tooltip .ico {top:.1em;}
	.tooltip .cont {top:1.5em; left:-.5em; width:8em;}
	.tooltip .cont p {font-size:1.8rem;}
	.tooltip.user .cont {top:2em; left:-10em;}
}

@media all and (max-width:480px) {
	.tooltip .cont {left:-2em;}
	.tooltip .cont span {font-size:.6em;}
	.tooltip.user .cont {left:-20em;}
	
}