@charset "utf-8";

.inner { max-width:140rem; margin:0 auto; }

@media (max-width: 1440px) {
	.inner { padding-left:2.4rem; padding-right:2.4rem; }
}

@media (max-width: 768px) {
	.inner { padding-left:1.6rem; padding-right:1.6rem; }
}

/* 바로가기 */
.skip-nav { position:fixed; top:0; left:0; width:100%; z-index:99999999; }
.skip-nav a { position:absolute; top:0; left:0; width:0; height:0; font-size:0; }
.skip-nav a:focus { display:flex; justify-content:center; align-items:center; width:100%; height:3.2rem; background:#000; font-size:1.7rem; color:#fff; }





/* 공식 배너 */
#top-ban { background-color: #EEF2F7; }
#top-ban .inner { padding:0.4rem 0; }
#top-ban .nuri { display:flex; align-items:center; font-size:1.6rem; }
#top-ban .nuri::before { display:inline-flex; content:''; width:2.4rem; height:1.6rem; background:url(/images/common/ico_flag.svg) no-repeat center/cover; margin-right:0.8rem; }

@media (max-width: 1440px) {
	#top-ban .inner { padding:0.4rem 2.4rem; }
}

@media (max-width: 768px) {
	#top-ban .inner { padding:0.4rem 1.6rem; }
	#top-ban .nuri { font-size:1.5rem; }
}





/* Header || 헤더 */
#top > .inner { padding:.8rem 2.4rem .8rem; }

.header-brand { display:flex; justify-content:space-between; }
.header-brand .logo { display:inline-flex; font-size:3.2rem; }
.header-brand .logo a { display:inline-flex; align-items:center; }
.header-brand .logo a::before { content:''; display:block; width:5rem; height:4.8rem; background:url(/images/common/mark.png) no-repeat center/contain; margin-right:.8rem; }

.header-action { display:flex; align-items:center; }
.header-action > button { margin-left:.8rem; }


.header-action .btn-navi.mobile { display:none; }

@media (max-width: 1023px) {
	#top > .inner { padding:.8rem 1.6rem .8rem; border-bottom:.1rem solid #CDD1D5; }

	.header-brand .logo { font-size:2.4rem; }
	.header-brand .logo a::before { width:3.4rem; height:3.2rem; }

	.header-action > button { margin-left:.4rem; }

	.header-action .btn-navi.pc { display:none; }
	.header-action .btn-navi.mobile { display:flex; }

}



/* util || 유틸 */
.header-util { display:flex; justify-content:flex-end; margin:.4rem 0; }
.gnb-utils .util-list { display:flex; flex-wrap:wrap; }

.header-util .mbr-list .drop-list { display:flex; flex-wrap:wrap; }
.header-util .mbr-list .drop-list > li { width:calc(100% / 3); }
.header-util .mbr-list .drop-list .item-link { justify-content:center; }

.util-list { display:flex; }
.util-list > li { display:flex; align-items:center; line-height:1; margin-left:1.2rem; }
.util-list > li:not(:first-child)::before { display: inline-flex; content: ""; width: 0.1rem; height:1.6rem; background:#cdd1d5; margin-right:1.2rem; }


@media (max-width: 1023px) {
	.header-util { display:none; }

}





/* Sidebar || 사이드바, 모바일 메뉴 */

#mobile-nav { display:none; }
#mobile-nav #close-nav { position:absolute; top:1.6rem; right:1.6rem; }

#mobile-nav .gnb-wrap { position:absolute; right:0; max-width:36rem; width:100%; height:100dvh; display:flex; flex-direction:column; background:#fff; overflow-y:auto; }

#mobile-nav .gnb-header { padding:1.2rem 2rem; background:#F4F5F6; border-bottom: .1rem solid #CDD1D5; }
#mobile-nav .gnb-header .gnb-utils {  }
#mobile-nav .gnb-header .gnb-utils .util-list > li { flex:1 1 auto; }

#mobile-nav .logo { display:inline-flex; font-size:2.4rem; margin-bottom:.8rem; }                                                                                                               
#mobile-nav .logo a { display:inline-flex; align-items:center; }                                                                                                           
#mobile-nav .logo a::before { content:''; display:block; width:3.4rem; height:3.2rem; background:url(/images/common/mark.png) no-repeat center/contain; margin-right:.8rem; }

#mobile-nav .gnb-menu { position:relative;  width:100%; display:flex; flex-direction:column; }
#mobile-nav .gnb-menu a { border-radius: .8rem; }

#mobile-nav .gnb-menu > li { position: relative; width:100%; border-bottom:.1rem solid #CDD1D5; }
#mobile-nav .gnb-menu > li > a { display:flex; align-items: center; justify-content: space-between; padding:1.2rem 2rem; font-size:1.9rem; }
#mobile-nav .gnb-menu > li > a:hover,
#mobile-nav .gnb-menu > li > a:focus { background-color:#E0F2F1; }
#mobile-nav .gnb-menu > li > a.on { color:#00796B; background-color: #F3F8F8; font-weight:700; }
#mobile-nav .gnb-menu > li > a::after { content:''; width:2.4rem; height:2.4rem; background-image: url(/images/icon/ico_angle.svg); }
#mobile-nav .gnb-menu > li > a.on::after { transform: rotate(180deg); }
#mobile-nav .gnb-menu > li > a.on::before { position:absolute; left:0; bottom:-.1rem; content:''; width:100%; height:.2rem; background:#00796B; transition:.4s ease-in; }

#mobile-nav .gnb-menu .depth2,
#mobile-nav .gnb-menu .depth3 { display:none; margin-top: .4rem; }

#mobile-nav .gnb-menu > li > a.on + .depth2 { display: block; padding:0 2rem; }
#mobile-nav .gnb-menu .depth2 > li > a { display: flex; align-items: center; padding:.4rem .8rem; }
#mobile-nav .gnb-menu .depth2 > li:first-child > a { padding-top: .8rem; }
#mobile-nav .gnb-menu .depth2 > li:last-child > a { padding-bottom: .8rem; }

#mobile-nav .gnb-menu .depth2 > li > a::before { content:''; display:inline-block; width: .2rem; height:.8rem; background-color: #1E2124; margin-right: .8rem; transform: rotate(45deg); }

#mobile-nav .gnb-menu .depth2 > li > a.on,
#mobile-nav .gnb-menu .depth3 > li > a.on { color: #00796B; font-weight: 700; }
#mobile-nav .gnb-menu .depth2 > li > a.on::before { background-color: #00796B; }
#mobile-nav .gnb-menu .depth3 > li > a.on::before { color: #00796B; }

#mobile-nav .gnb-menu .depth2 > li > a.on + .depth3 { display: block; padding:0 1.2rem; background-color: #F4F5F6;}
#mobile-nav .gnb-menu .depth3 > li > a { padding: .4rem .4rem; }
#mobile-nav .gnb-menu .depth3 > li:first-child > a { padding-top: .8rem; }
#mobile-nav .gnb-menu .depth3 > li:last-child > a { padding-bottom: .8rem; }

#mobile-nav .gnb-menu .depth3 > li > a::before { content:'-'; margin-right: .4rem; }


#mobile-nav .link-site { padding:1.2rem 2rem; font-size:1.5rem; }
#mobile-nav .site-list > li > a,
#mobile-nav .site-list > li button { display:flex; align-items: center; justify-content:center; width:100%;  padding:.8rem 0; font-size: inherit; border-bottom:.1rem solid #CDD1D5; }

#mobile-nav .site-list > li.accordion .accordion-collapse ul { display:flex; flex-wrap: wrap; }

#mobile-nav .site-list > li.accordion .btn-accordion.on .svg-icon { transform:rotate(180deg); }

#mobile-nav .site-list > li.accordion .btn-accordion + .accordion-collapse { display:none; }
#mobile-nav .site-list > li.accordion .btn-accordion.on + .accordion-collapse { display:block; }

#mobile-nav .site-list > li.accordion .mbr-list .accordion-collapse li { width: calc(100% / 4); }
#mobile-nav .site-list > li.accordion .cmt-list .accordion-collapse ul { flex-direction: column; }


#mobile-nav .site-list > li.accordion .item-link { width:100%; text-align: center; padding:.4rem 0; font-size: inherit; }

#mobile-nav .site-list .drop-menu { position:relative; padding:0; border:none; box-shadow:none; left:0; }

@media (max-width: 1023px) {
	#mobile-nav.on { position:absolute; top:0; right:0; display:block; width:100vw; height:100vh; background:rgba(0,0,0,0.5); overflow:hidden; z-index: 9999; }
}


/* 서브 레이아웃 */
#container.sub { margin-bottom:10rem; }


/* Footer, Bottom || 푸터, 바텀 */
#bottom { background:#F4F5F6; border-top:.1rem solid #CDD1D5; word-break:keep-all; }

#bottom .link-site { background:#fff; border-bottom:.1rem solid #CDD1D5; }
#bottom .link-site .site-list { display:flex; }
#bottom .link-site .site-list li { position:relative; flex:1 0 auto; }

#bottom .link-site .site-list .link { display:inline-flex; align-items:center; justify-content:space-between; width:100%; min-height:5.6rem; padding:0 2.4rem; border-right:.1rem solid #cdd1d5; background:transparent; }
#bottom .link-site .site-list li:first-child .link { border-left:.1rem solid #cdd1d5; }
#bottom .link-site .site-list .link:hover { background:#eef2f7; }

#bottom > .inner { padding:4rem 0 2.4rem; }

#bottom .f-cnts { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:3.6rem;}
#bottom .f-link { width: 23.5%; }


#bottom .f-logo { display:flex; align-items:center; font-size:3.2rem; color:#58595B; margin-bottom:3.6rem; }
#bottom .f-logo::before { content:''; display:block; width:5rem; height:4.8rem; background:url(/images/common/mark.png) no-repeat center/contain; margin-right:.8rem; }

#bottom .f-info { display:flex; flex-direction:column; }
#bottom .f-info .f-num { display:flex; margin-bottom:1.2rem; }
#bottom .f-info .f-num:last-child { margin-bottom:0; }
#bottom .f-info .f-num strong { margin-right:.8rem; }
#bottom .f-info .f-num span { font-size:1.5rem; margin-left:1.6rem; }
#bottom .f-info .f-num span::before { width:.1rem; height:.8rem; }


#bottom .f-btm { display:flex; justify-content:space-between; padding-top:1.6rem; border-top:.1rem solid #CDD1D5; }

#bottom .f-btm .f-menu { display:flex; }
#bottom .f-btm .f-menu li { margin-left:1.6rem; }
#bottom .f-btm .f-menu li:first-child { margin-left:0; }
#bottom .f-btm .copy { font-size:1.6rem; color:#464c53; }

@media (max-width: 1440px) {
	#bottom > .inner { padding:4rem 2.4rem 2.4rem; }
}


@media (max-width: 1024px) {
	#bottom .f-link { width:auto; }
}

@media (max-width: 768px) {
	#bottom > .inner { padding:2.4rem 1.6rem 1.6rem; }

	#bottom .link-site > .inner { padding:0; }
	#bottom .link-site .site-list { flex-direction:column; }
	#bottom .link-site .site-list .link { min-height:4.8rem; border-top:.1rem solid #CDD1D5; border-right:none; }
	#bottom .link-site .site-list li:first-child .link { border-left:none;  border-top:none; }

	#bottom .f-cnts { flex-direction:column; margin-bottom:2.4rem; }
	#bottom .f-link .btn { font-size:1.6rem; }
	#bottom .f-link .btn .svg-icon { width:1.6rem; height:1.6rem; }

	#bottom .f-logo { font-size:2.4rem; margin-bottom:2.4rem; }                     
	#bottom .f-logo::before { width:3.4rem; height:3.2rem; }

	#bottom .f-info { font-size:1.6rem; margin-bottom:1.6rem; }
	#bottom .f-info .f-num { margin-bottom:.8rem; }
	#bottom .f-info .f-num span { margin-left:.4rem; }

	#bottom .f-btm { flex-direction:column; }
	#bottom .f-btm .f-menu { font-size:1.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
	#bottom .f-btm .f-menu li { margin-left:.8rem; }

	#bottom .f-btm .copy { font-size:1.5rem; }
}



/* SNS */
.sns-wrap .sns-list { margin-bottom:1.6rem; }
.sns-wrap .sns-list li { display: flex; margin-left:.8rem; }
.sns-wrap .sns-list li a { display: block; width:3.2rem; height:3.2rem; border-radius: .8rem; background: no-repeat center/cover; background-color: #888; transition: .4s; }

.sns-wrap .sns-list li a.kakao { background-image: url(/images/common/snsbtn_kakaotalk.png?ver=1.1); }
.sns-wrap .sns-list li a.fb { background-image: url(/images/common/snsbtn_facebook.png?ver=1.1); }
.sns-wrap .sns-list li a.x { background-image: url(/images/common/snsbtn_x.png?ver=1.1); }
.sns-wrap .sns-list li a.link { background-image: url(/images/common/snsbtn_url.png?ver=1.1); }
.sns-wrap .sns-list li a.print { background-image: url(/images/common/snsbtn_print.png?ver=1.1); }


.sns-wrap .sns-list li a.kakao:hover,
.sns-wrap .sns-list li a.kakao:focus { background-color: #3B1E1E; }
.sns-wrap .sns-list li a.fb:hover,
.sns-wrap .sns-list li a.fb:focus { background-color: #00529C; }
.sns-wrap .sns-list li a.link:hover,
.sns-wrap .sns-list li a.link:focus { background-color: #00796B; }
.sns-wrap .sns-list li a.print:hover,
.sns-wrap .sns-list li a.print:focus { background-color: #004D44; }

@media (max-width: 768px) {
	.sns-wrap { position:absolute; top:0; right:0; }
}


/* SNS || 프린트 */
#printArea { margin:30px 0; }
 



/* 하단 || 외부링크 */
#bottom .site-list > li > button:before { position:absolute; content:''; display:block; left: 0; width:100%; height:8px; bottom:57px; }
#bottom .site-list > li > button::after { content:''; position:relative; top:0px; right:0px; width:24px; height: 24px; background:url(/images/icon/ico_angle.svg) no-repeat center; transition:0.3s; transform:rotate(-180deg); }
#bottom .site-list > li.on > button::after { transform:rotate(0deg);  }



#bottom .site-list .scrll_box { position:absolute; left:-1px; bottom:62px; width:calc(100% + 2px); height:180px; border:1px solid #c9c9c9; border-radius:10px; background:#fdfdfd; padding:14px; box-sizing: border-box;  display:none; z-index:5; }
#bottom .site-list .scrll_box ul { overflow-y: auto; max-height: 150px; padding-right: 10px;  }

#bottom .site-list .scrll_box ul::-webkit-scrollbar{width: 5px;}
#bottom .site-list .scrll_box ul::-webkit-scrollbar-thumb{ background-color: #888; border-radius: 8px;}
#bottom .site-list .scrll_box ul::-webkit-scrollbar-track {background-color: #ddd; border-radius: 8px; }


#bottom .site-list .scrll_box ul li { display:block; }
#bottom .site-list .scrll_box ul li a { position:relative; display:block; padding:4px 14px; font-size:90%; color:#333; box-sizing:border-box; transition:0.3s;  }
#bottom .site-list .scrll_box ul li a:hover { background:#e9e9f3; border-radius:4px; }
#bottom .site-list .scrll_box ul li a:before { position:absolute; content:''; display:block; left:4px; top:12px; background:#c9c9c9; width:5px; height:2px; border-radius:50%; }

#bottom .site-list .scrll_box ul li.tit { padding:4px 10px; background:#555; border-radius:4px; margin-top:16px; }
#bottom .site-list .scrll_box ul li.tit a { position:relative; display:block; padding:0; font-size:100%; color:#fff; box-sizing:border-box; }
#bottom .site-list .scrll_box ul li.tit a:hover { background:#333; padding:0 4px; }
#bottom .site-list .scrll_box ul li.tit a:before { display:none; }