@charset "utf-8";

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

/* header */
#header {position: fixed; top: 0; left: 0; background-color: transparent; width: 100%; height: 100px; z-index: 900; transition: all .5s ease;}
#header .header_inner {max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%; }

#header .logo a {display: block; background: url('/images/logo_wh_p.png') no-repeat 50% 50%; width: 255px; height: 42px; background-size: contain;}

/* header gnb */
#header .area_gnb {text-align: center;}
#header .gnb {background-color: #fff; border-radius: 30px; padding: 17px 20px 16px;}
#header .gnb > li {position: relative; display: inline-block; padding: 0 47px; vertical-align: top;}
#header .gnb > li > a {position: relative; display: block; font-size: 18px; font-weight: 600;}

@media (min-width: 1024px) {
	/* header gnb */
	#header .gnb > li .depth {position: absolute; top: 180%; left: 50%; width: 180px; margin-left: -90px; background-color: #fff; border-radius: 16px; padding: 15px 10px; text-align: center; transform: translateY(0); opacity: 0; visibility: hidden; transition: all .25s; box-shadow: 0 0 30px rgba(0, 0, 0, .05);}
	#header .gnb > li .depth > li > a {display: block; font-size: 1rem; line-height: 1.5; color: #111; font-weight: 400; padding: 5px 0;}

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

/* header util */
#header .area_util .util {display: inline-block; background-color: rgba(255, 255, 255, .2); padding: 17px 20px 16px; border-radius: 30px; vertical-align: middle; backdrop-filter: blur(4px);}
#header .area_util .util a {position: relative; font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, .6); padding: 0 15px;}
#header .area_util .util a:after {content: ''; position: absolute; right: 0; top: 50%; margin-top: -7.5px; margin-right: -2px; width: 2px; height: 15px; background-color: rgba(255, 255, 255, .2);}
#header .area_util .util a:last-child:after {content: none;}
#header .area_util .util a:hover {color: #fff;}

/* header side menu */
.side_btn {position: relative; display: none; width: 24px; height: 20px; background: transparent; cursor: pointer; z-index: 900; vertical-align: middle; margin-left: 20px;}
.side_btn .menu_btn {display: block; position: relative; width: 100%; height: 100%;}
.side_btn .menu_btn .bar {position: absolute; width: 100%; height: 3px; right: 0; background-color: var(--main-color);}
.side_btn .menu_btn .bar:nth-child(1) {top: 0;}
.side_btn .menu_btn .bar:nth-child(2) {top: 50%; margin-top: -1.5px; 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 scroll */
.down #header {top: -100px;}

/* header black (마이페이지) */
#header.bk .logo a {background-image: url('/images/logo.png');}
#header.bk .area_util .util {background-color: rgba(0, 0, 0, .3);}
#header.bk .gnb {background-color: var(--gray-100);}

/* footer */
#footer {position: relative; background-color: #000; background: url('/images/page/common/footer_bg.jpg') no-repeat 50% 50%; background-size: cover; padding: 60px 0; border-top: 1px solid rgba(255, 255, 255, .2);}
#footer .foot_top {display: flex; align-items: stretch; justify-content: space-between;}
#footer .foot_menu {margin-left: -10px;}
#footer .foot_menu li {display: inline-block;}
#footer .foot_menu li a {display: block; padding: 0 15px; height: 30px; line-height: 28px; font-size: 14px; color: #fff; border: 1px solid rgba(255, 255, 255, .3); background: transparent; border-radius: 4px; margin-left: 10px; transition: all .3s;}
#footer .foot_logo {width: 212px; height: 35px;}
#footer .foot_logo > img {max-width: 100%;}

#footer .foot_bottom {display: flex; justify-content: space-between; align-items: end; margin-top: 30px;}
#footer .foot_txt li {display: flex; align-items: center; font-size: 15px; color: var(--gray-300);}
#footer .foot_txt li span {color: var(--gray-400); padding-right: 30px;}

#footer .foot_ect {text-align: right;}
#footer .foot_sns li {display: inline-block; vertical-align: middle; margin: 0 8px;}
#footer .foot_sns li a {display: block; width: 20px; height: 20px; background: no-repeat 50% 50%; background-size: 20px auto;}
#footer .foot_sns li.instagram a {background-image: url('/images/page/common/icon_instagram.png');}
#footer .foot_sns li.facebook a {background-image: url('/images/page/common/icon_facebook.png');}
#footer .copyright {font-size: 1rem; color: var(--gray-200); margin-top: 10px;}

.scroll_top {position: absolute; bottom: 40px; right: 40px; display: block; width: 28px;}
.scroll_top span {font-size: 14px; font-weight: 600; color: #fff;}
.scroll_top span:before {content: ''; display: block; width: 20px; height: 13px; background: url('/images/page/common/icon_next_wh.png') no-repeat 50% 50%; background-size: contain; transform: rotate(-90deg); margin: 0 auto;}

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

}

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

	/* header */
	#header .header_inner {padding: 0 4%;}
	

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

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

	/* header side menu */
	.side_btn {display: inline-block;}

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

/* **************************************** *
 * 1024px : mobile
 * **************************************** */
@media (max-width:1024px){
	/* header */
	#header {height: 70px;}
	#header .logo a {width: 183px; height: 36px;}

	/* header util */
	#header .area_util .util {padding: 10px 16px;}

	/* footer */
	#footer {padding: 50px 0;}
	#footer .foot_logo {width: 157px; height: 26px;}

}

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

	#header .area_util > a {width: 20px; height: 20px; background-size: auto 20px;}
	
	/* footer */
	#footer .foot_top {flex-direction: column; text-align: center; align-items: center;}
	#footer .foot_top .foot_menu {margin-left: 0; margin-bottom: 20px;}
	#footer .foot_bottom {flex-direction: column; text-align: center; align-items: center;}
	#footer .foot_txt li {align-items: stretch; text-align: left;}
	#footer .copyright {margin-top: 20px;}
}

@media (max-width: 640px) {
	
}

/* **************************************** *
 * 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%;}

	/* footer */
	#footer .scroll_top {bottom: 20px; right: 20px;}
	#footer .foot_top .foot_txt .foot_logo {display: none;}
	#footer .foot_top .foot_txt .tel_box {margin-left: 0;}
	#footer .foot_top .foot_txt ul {margin-top: 0;}
	#footer .foot_top .foot_info ul {display: inline-flex; flex-wrap: nowrap;}

	#footer .foot_bottom .foot_menu {float: none;}
	#footer .foot_bottom .copyright {float: none;}
}

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

}