@charset "utf-8";

.inner {position: relative; max-width: 1440px; width: 100%; margin: 0 auto;}

/* header */
#header {position: fixed; top: 0; left: 0; background-color: #fff; width: 100%; z-index: 9000; transition: all .5s ease; border-bottom: 1px solid #ddd;}
#header .header_inner {display: flex; align-items: center; justify-content: space-between; max-width: 1440px; width: 100%; height: 100%; margin: 0 auto;}

/* header top */
#header .header_top {width: 100%; height: 40px; background-color: var(--gray-100); overflow: hidden; transition: margin-top 0.3s ease-in-out;}
#header .header_top .header_inner {justify-content: end;}
#header .header_top .util {float: right; display: flex; gap: 0 10px; align-items: center; justify-content: space-between;}
#header .header_top .util li a {display: block; font-size: 1rem; color: var(--gray-400);}

/* header bottom (gnb) */
#header .header_bottom {width: 100%; height: 80px;}
#header .logo {display: block; width: 242px; height: 35px;}
#header .logo a {width: 100%; height: 100%; background: url('/images/logo.png') no-repeat 50% 50%; background-size: cover;}

#header .area_gnb .gnb {display: flex;}
#header .area_gnb .gnb > li {position: relative; padding: 0 30px; vertical-align: top;}
#header .area_gnb .gnb > li > a {position: relative; display: block; font-size: 18px; font-weight: 600; color: #000;}

@media (min-width: 1024px) {
	/* header gnb */
	#header .gnb > li .depth {position: absolute; top: 180%; left: 50%; width: 200px; margin-left: -100px; background-color: rgba(255, 255, 255, .9); backdrop-filter: blur(4px); border-radius: 10px; padding: 15px 20px; text-align: left; transform: translateY(0); opacity: 0; visibility: hidden; transition: all .25s; box-shadow: 0 0 30px rgba(0, 0, 0, .05); z-index: 9999;}
	/* #header .gnb > li .depth:after {content: ''; position: absolute; right: 15px; bottom: 15px; width: 80px; height: 25px; background: url('/images/logo_symbol.png') no-repeat 50% 50%; background-size: contain; opacity: .15;} */
	#header .gnb > li .depth > li > a {display: block; font-size: 1rem; line-height: 1.5; color: var(--gray-400); font-weight: 600; padding: 5px;}

	#header .gnb > li:hover .depth {opacity: 1; visibility: visible; z-index: 100;}
	#header .gnb > li .depth > li:hover > a {color: var(--main-color);}
}

/* header side menu */
.side_btn {position: relative; top: 0; right: 0; display: block; width: 24px; height: 20px; cursor: pointer; z-index: 900;}
.side_btn .menu_btn {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 16px;}
.side_btn .menu_btn .bar {position: absolute; width: 100%; height: 2px; right: 0; background-color: var(--gray-400);}
.side_btn .menu_btn .bar:nth-child(1) {top: 0;}
.side_btn .menu_btn .bar:nth-child(2) {top: 50%; margin-top: -1px; right: 0; width: 80%;}
.side_btn .menu_btn .bar:nth-child(3) {bottom: 0;}

/* header sitemap */
.sitemap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(34, 33, 39, .8); backdrop-filter: blur(4px); transition: all .3s; z-index: 1000;}
.sitemap {opacity: 0; visibility: hidden;}
.sitemap .sitemap_menu {position: absolute; top: 0; right: -100%; width: 560px; height: 100vh; background-color: #fff; scrollbar-width: none; -ms-overflow-style: none; overflow-y: auto; transition: .5s ease-in-out;}
.sitemap.on .sitemap_menu {right: 0;}
.sitemap .sitemap_head {position: relative; padding: 10px; text-align: left; z-index: 1; overflow: hidden;}

.sitemap .sitemap_util {display: flex; flex-wrap: wrap; gap: 5px 5px; justify-content: center; border: 1px solid var(--gray-200); border-radius: 8px; padding: 4px 0; margin-bottom: 10px;}
.sitemap .sitemap_util > li {position: relative; display: inline-block;}
.sitemap .sitemap_util > li:after {content: ''; position: absolute; top: 50%; margin-top: -5px; right: 0; display: block; width: 2px; height: 10px; background-color: var(--gray-200);}
.sitemap .sitemap_util > li:last-child:after {content: none;}
.sitemap .sitemap_util > li > a {display: block; font-size: 1rem; font-weight: 400; background-color: #fff; color: var(--gray-400); border-radius: 5px; padding: 3px 15px;}
.sitemap .sitemap_util > li > a i.bx {margin-right: 5px;}

.sitemap .menu_all {padding: 20px 40px 40px;}
.sitemap .menu_all .btn {margin: 0;}
.sitemap .site_gnb {margin-top: 20px;}
.sitemap .site_gnb > li {position: relative;}
.sitemap .site_gnb > li > a {position: relative; display: block; font-size: 18px; font-weight: 700; color: #000; height: 60px; line-height: 60px; padding: 0 20px; border-bottom: 1px solid var(--gray-200); cursor: pointer;}
.sitemap .site_gnb > li.menu_toggle > a:after {content: ''; position: absolute; top: 50%; right: 0; display: block; width: 0; height: 0; margin-top: -5px; border-bottom: 5px solid var(--gray-400); border-left: 5px solid transparent; border-right: 5px solid transparent; transition: transform .3s; transform: rotate(180deg);}

.sitemap .site_gnb > li .depth2 {display: none; width: 100%; font-size: 1rem; font-weight: 400; color: var(--gray-400); background-color: var(--gray-100); padding: 10px 20px; border-radius: 10px; margin: 15px 0;}
.sitemap .site_gnb > li .depth2 > li {display: block;}
.sitemap .site_gnb > li .depth2 > li > a {display: block; padding: 10px 0;}

.sitemap .close_btn {display: block; width: 40px; height: 40px; background-color: transparent; font-size: 30px; float: right;}

.sitemap .site_gnb > li.menu_toggle.active > a {color: var(--main-color);}
.sitemap .site_gnb > li.menu_toggle.active > a:after {transform: rotate(0);}
.sitemap .site_gnb > li .depth2 > li:hover > a {text-decoration: underline;}

/* header sitemap menu open */
.sitemap.on {opacity: 1; visibility: visible;}

/* header hover */
#header .gnb > li:hover > a {color: var(--main-color);}

/* header black (마이페이지) */
#header.bk .logo a {background-image: url('/images/logo.png');}
#header.bk .area_util .util a {color: var(--gray-400);}
#header .area_util .util a:after {background-color: var(--gray-200);}
#header.bk .gnb > li > a {color: #000;}

/* header scroll */
.down #header .header_top {margin-top: -40px;}

/* footer */
#footer {position: relative; background: #fff; padding-bottom: 50px; border-top: 1px solid var(--gray-200);}
#footer .foot_top {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 80px; border-bottom: 1px solid var(--gray-200);}
#footer .foot_menu {margin-left: -10px; font-size: 0;}
#footer .foot_menu li {position: relative; display: inline-block; padding: 0 10px;}
#footer .foot_menu li:after {content: ''; position: absolute; top: 50%; right: 0; margin-top: -7px; display: block; width: 1px; height: 14px; background: var(--gray-200);}
#footer .foot_menu li:last-child:after {content: none;}
#footer .foot_menu li > a {font-size: 1rem; color: var(--gray-400);}

#footer .foot_ect {display: flex; align-items: center; gap: 0 20px;}

#footer .sns_list {font-size: 0;}
#footer .sns_list li {display: inline-block; vertical-align: middle; margin: 0 5px}
#footer .sns_list li > a {display: block; width: 24px; height: 24px; background: no-repeat 50% 50%; background-size: cover; border-radius: 50%;}
#footer .sns_list li.youtube > a {background-image: url('/images/page/common/icon_youtube.svg');}
#footer .sns_list li.instagram > a {background-image: url('/images/page/common/icon_instagram.svg');}

.family_site {position: relative; display: inline-block;}
.family_site + .family_site {margin-left: 20px;}
.family_site .family_btn {position: relative; width: 200px; height: 50px; text-align: left; color: var(--gray-400); font-size: 1rem; background: #fff; border: 1px solid var(--gray-200); padding: 0 20px; letter-spacing: 0; border-radius: 10px;}
.family_site .family_btn:after {content: ''; position: absolute; top: 50%; right: 20px; display: block; width: 0; height: 0; margin-top: -5px; border-bottom: 8px solid var(--main-color); border-left: 6px solid transparent; border-right: 6px solid transparent; transform: rotate(-180deg); transition: all .25s;}
.family_site .family_btn.on:after {transform: rotate(0);}
.family_site ul {position: absolute; top: 60px; left: 0; display: none; width: 100%; max-height: 167px; overflow-y: auto; background-color: #fff; border: 1px solid var(--gray-200); position: absolute; z-index: 10; text-align: left; border-radius: 10px;}
.family_site ul li {padding: 10px 10px; border-top: 1px solid var(--gray-200); font-size: 15px;}
.family_site ul li:first-child {border-top: 0;}
.family_site ul li a {color: var(--gray-400); display: block;}
.family_site ul li a:hover {color: var(--main-color);}

#footer .foot_bottom {display: flex; justify-content: space-between; width: 100%; height: 100%; padding-top: 35px;}
#footer .foot_txt li {font-size: 1rem; font-weight: 400; color: var(--gray-400); word-break: keep-all;}
#footer .foot_right {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}
#footer .foot_logo {width: 245px; height: 35px; float: right;}
#footer .foot_logo > img {max-width: 100%; opacity: .3;}
#footer .copyright {font-size: 1rem; font-weight: 400; color: var(--gray-400); clear: both;}

.scroll_top {position: fixed; bottom: 40px; right: 40px; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background-color: var(--main-color); border-radius: 50%; z-index: 100;}
.scroll_top:after {content: ''; display: block; width: 14px; height: 14px; background: url('/images/page/common/icon_arw_wh.png') no-repeat 50% 50%; background-size: auto 14px; transform: rotate(-45deg);}

/* **************************************** *
 * 1600px
 * **************************************** */
@media (max-width:1600px){
	#header .gnb > li {padding: 0 20px;}
}

/* **************************************** *
 * 1440px
 * **************************************** */
@media (max-width:1440px){
	.inner {padding: 0 20px;}

	/* header */
	#header .header_inner {padding: 0 20px;}
	
	/* header gnb */
	#header .gnb > li > a {font-size: 1rem;}

	#header .area_util .util {margin-right: 60px;}
}

@media (max-width: 1200px) {
	/* header gnb */
	#header .area_gnb {display: none;}

	/* footer */
	.scroll_top {right: 2%; bottom: 2%;}
}

/* **************************************** *
 * 1024px : mobile
 * **************************************** */
@media (max-width:1024px){
	/* footer */
	.family_site .family_btn {height: 40px;}
	.family_site ul {top: 50px;}
}

/* **************************************** *
 * 768px
 * **************************************** */
@media (max-width:768px){

	#header .area_util > a {width: 20px; height: 20px; background-size: auto 20px;}

	/* header sitemap */
	.sitemap .site_gnb > li > a {font-size: 1rem; padding: 0 10px;}
	.sitemap .site_gnb > li .depth2 > li > a {padding: 5px 0;}
	
	/* footer */
	#footer .foot_bottom {flex-direction: column; text-align: center; align-items: center; gap: 30px 0;}
	#footer .foot_right {align-items: center; gap: 15px 0;}
}

@media (max-width: 640px) {
	/* footer */
	#footer .foot_top {flex-direction: column; height: auto; padding: 15px 0;}
	#footer .foot_ect {margin-top: 15px;}
	.family_site .family_btn {height: 40px;}
	.family_site ul {top: 50px;}
	
}

/* **************************************** *
 * 576px
 * **************************************** */
@media (max-width:576px){

	/* header util */
	#header .area_util .util {display: none;}

	/* sitemap */
	.sitemap .menu_all {padding: 20px 20px;}
	.sitemap .sitemap_menu {width: 90%;}

}

/* **************************************** *
 * 420px
 * **************************************** */
@media (max-width:420px){
	/* header bottom (gnb) */
	#header .logo {width: 207px; height: 30px;}
}