@charset "utf-8";

/* font */
.f_mont{ font-family: 'Montserrat', 'Pretendard', '맑은 고딕', '돋움', 'Dotum', '굴림', 'Gulim', Sans-serif; }

/* inner */
.inr{ position: relative; margin-inline: auto; max-width: 1520px; width: 92%; }
.inr-wide{ max-width: 1700px; }

/* header */
header{ border-bottom: 1px solid currentColor; }
.header__inr{ display: grid; align-items: center; height: 106px; }
@media(min-width:1280px){
	.header__inr{ grid-template-columns: 257px 1fr 257px; }
}
@media(max-width:1279px){
	.header__inr{ position: static; grid-template-columns: 1fr auto; height: 81px; }
}

/* logo */
.headerLogo{ font-size: 0; }
.headerLogo__a{ display: inline-block; }
.headerLogo__img{ height: 60px; }
@media(max-width:1279px){
	.headerLogo__img{ height: 40px; }
}

/* nav */
.header__nav{text-align:center;}
#header nav .gnb > li.heaerUtile_mo{display:none;}
#header nav .gnb > li > ul{opacity:0; visibility:hidden; position:absolute; top:35px; left:0px; z-index:90; width:100%; min-width:165px; box-sizing:border-box; padding:30px 25px; background:#fff; border:1px solid #222; text-align:left; transition:0.3s ease;}
#header nav .gnb > li > ul > li{padding:2px 0px;}
#header nav .gnb > li > ul > li > a{display:inline-block; font-size:14px; color:#444; transition:0.3s ease;}
#header nav .gnb > li > ul > li > a:hover{color:#0b327a;}
#header nav .gnb > li > ul > li > ul{display:none;}
#header nav .gnb > li.active > ul{opacity:1; visibility:visible;}
@media(min-width:1280px){
	.header__nav .gnb{ position: relative; left: -11px; margin-inline: auto; display: flex; justify-content: center; max-width: 946px; }
	.gnb > li{ position: relative; flex: 1 auto; }
	#header nav .gnb > li:first > a{ font-size: 20px; }
	.gnb__a{ display:block; text-align: center; font-size:18px; font-weight: 600; }
}
@media(max-width:1279px){
	.header__nav{ position: absolute; left: 0; }
	#header .area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; z-index:90; width:100%; height:100%; padding:0px; background:transparent; border-width:0px; transition:0.3s ease 0.7s;}	
	#header .area_menu_all > ul > li:not(.gnb_cate){display:block;}
	#header .area_menu_all .btn_close{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:1; display:block; width:100%; height:100%; background:rgba(0,0,0,0.3); font-size:0px; transition:0.3s ease;}
	#header .area_menu_all .gnb{overflow-y:auto; position:absolute; top:0px; left:-80%; z-index:10; width:80%; height:100%; background:#fff; transition:0.7s ease;}
	#header .area_menu_all > ul li{position:relative;}
	#header .area_menu_all > ul > li{display:block; padding:0px; border-bottom:1px solid #e9e9e9;}
	#header .area_menu_all > ul > li > a{float:none; display:block; width:auto; padding:10px 40px 10px 15px; margin-left:0px; font-size:18px; text-align:left;}
	#header .area_menu_all > ul > li > ul{float:none; opacity:1; visibility:visible; position:static; width:auto; margin:0 15px 15px; padding:0; background:#f5f5f5; border-width:0px; transition:none;}
	#header .area_menu_all > ul > li > ul > li{display:block; margin:0px;}
	#header .area_menu_all > ul > li > ul > li:hover > a,
	#header .area_menu_all > ul > li > ul > li:focus > a{color:#444;}
	#header .area_menu_all > ul > li > ul > li.only{width:100%;}
	#header .area_menu_all > ul > li > ul > li.active > a,
	#header .area_menu_all > ul > li > ul > li.active:hover > a,
	#header .area_menu_all > ul > li > ul > li.active:focus > a{color:#f2483b;}
	#header .area_menu_all > ul > li > ul > li > a{display:block; width:auto; padding:10px 40px 10px 10px; border-bottom:1px solid #d8d8d8;}
	#header .area_menu_all > ul > li > ul > li > *{display:block; vertical-align:middle;}	
	#header .area_menu_all > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li > ul{padding:10px 15px; background:#eaeaea; border-bottom:1px solid #d8d8d8;}
	#header .area_menu_all > ul > li > ul > li > ul > li{display:block;}
	#header .area_menu_all > ul > li > ul > li > ul > li > a{padding:2px 0px; color:#333;}
	#header .area_menu_all .open{display:block; position:absolute; right:5px; top:5px; width:35px; height:35px; background:transparent; font-size:0px;}
	#header .area_menu_all .open:before,
	#header .area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:12px; height:2px; margin-top:-6px; background:#cfcece;}
	#header .area_menu_all .open:before{margin-left:-8px; transform:rotate(45deg); transform-origin:0 0;}
	#header .area_menu_all .open:after{margin-left:-5px;transform:rotate(-45deg); transform-origin:100% 0;}
	#header .area_menu_all .open.active{transform:rotate(180deg);}
	#header .area_menu_all .open:focus{outline:none;}
	#header .area_menu_all.active,
	#header .area_menu_all.active .btn_close{opacity:1; visibility:visible; transition-delay:0s;}
	#header .area_menu_all.active .gnb{left:0px;}
    #header nav .gnb > li.heaerUtile_mo{display:block; padding:20px 0; background-color:#fefff9; border-color:currentColor;}
    #header nav .gnb > li.heaerUtile_mo > div{display:flex; justify-content:center; gap:10px;}
    #header nav .gnb > li.heaerUtile_mo .heaerUtile__a{display:flex;}
}

/* utile */
.heaerUtile{ display: flex; align-items: center; justify-content: end; gap: 12px; height: 100%; padding-left: 45px; border-left: 1px solid currentColor; font-size: 14px; }
.heaerUtile__a{ position: relative; top: -1px; display: flex; align-items: center; justify-content: center; width: 100px; height: 41px; border: 1px solid #0000; border-radius: 5em; box-shadow: 3px 2px currentColor; font-weight: 500; color: #0a1851; }
.heaerUtile__a.a1{ border-color: currentColor; }
.heaerUtile__a.a2{ background: var(--yellow); }
@media(hover:hover){
	@media(prefers-reduced-motion:no-preference){
		.heaerUtile__a{ transition: .4s; }
	}
	.heaerUtile__a{ box-shadow: 0 0 currentColor; }
	.heaerUtile__a:hover{ box-shadow: 3px 2px currentColor; }
}
@media(max-width:767px){
	.heaerUtile{ border-left: 0; }
	.heaerUtile__a{ display: none; }
}

.btn_menu{ position: relative; z-index:91; width:58px; height:58px; background: 0; font-size:0px; text-align:center; transition:0.5s ease-in-out;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:19px; height:12px; margin:0 auto; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
#header .btn_menu span i,
#header .btn_menu span:before,
#header .btn_menu span:after{display:block; position:absolute; height:2px; background:#222; transform:translateX(0px);}
#header .btn_menu span:before{content:''; width:19px;}
#header .btn_menu span:after{content:''; width:19px;}
#header .btn_menu span:before{right:0px; top:0px; transition:transform 0.5s ease 1.2s;}
#header .btn_menu span:after{left:0px; bottom:0px; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; left:0px; top:5px; width:19px; transition:opacity 0.3s ease 0s, transform 0.5s ease 1.1s;}
#header .btn_menu em{display:block; overflow:hidden; position:absolute; top:50%; left:50%; width:19px; height:16px; margin:-8px 0 0 -9.5px; transform:translateX(19px); transition:transform 0.5s ease 0.5s;}
#header .btn_menu em i{display:block; position:absolute; width:0px; height:2px; background:#222; transform:rotate(0);}
#header .btn_menu em i:nth-of-type(1){top:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, top 0.5s ease 0s;}
#header .btn_menu em i:nth-of-type(2){bottom:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, bottom 0.5s ease 0s;}
#header .btn_menu:hover span i{opacity:0;}
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-19px);}
#header .btn_menu.active span:before{transition-property:transform; transition-delay:0s;}
#header .btn_menu.active span i{transition-property:transform; transition-delay:0.1s;}
#header .btn_menu.active span:after{transition-property:transform; transition-delay:0.2s;}
#header .btn_menu.active em{transform:translateX(0); transition-duration:0s; transition-delay:0s;}
#header .btn_menu.active em i:nth-of-type(1){top:6px; width:100%; transform:rotate(45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#header .btn_menu.active em i:nth-of-type(2){bottom:8px; width:100%; transform:rotate(-45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
@media(min-width:1280px){
	.btn_menu{display:none;}
}

/* kakao link */
.kakaoLink__sticky{ position: sticky; right: 0; bottom: 0; z-index: 100; }
.kakaoLink{ --distance: clamp(10px, calc( 51 / 1500 * 100vw ), 51px); --size: clamp(50px, calc( 94 / 1500 * 100vw ), 94px); position: absolute; right: var(--distance); bottom: var(--distance); width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; background: #ffd305 url('/images/common/kakaoLink.svg') no-repeat 50% / 46.8% auto; border: 1px solid #080808; border-radius: 50%; }
.quick_icon{ --distance: clamp(10px, calc( 51 / 1500 * 100vw ), 51px); --size: clamp(50px, calc( 94 / 1500 * 100vw ), 94px); position: absolute; right: var(--distance); width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; background: #0a1851 url('/images/common/kakaoLink.svg') no-repeat 50% / 46.8% auto; border: 1px solid #0a1851; border-radius: 50%; }
.quick_icon.top{background: #fefff9 url('/images/common/icon_arrow.svg') no-repeat 50% / 46.8% auto; bottom:clamp(126px, calc( 251 / 1500 * 100vw ), 251px);}
.quick_icon.bottom{background: #0a1851 url('/images/common/icon_arrow_wh.svg') no-repeat 50% / 46.8% auto;  bottom:clamp(70px, calc( 151 / 1500 * 100vw ), 151px); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
/* footer */
footer{ padding: 70px 0; background: #0a1851; font-weight: 500; color: #fff; }
.footer__inr{ display: grid; align-items: start; gap: 36px 10px; }
.footer__address{ display: flex; flex-wrap: wrap; gap: .5em 1.875em; max-width: 500px; font-size: var(--fs16); color: #d1d1d1; }
.footer__link{ display: inline-flex; gap: 11px; font-size: var(--fs16); color: #bfbfbf; }
.footer__a{ display: inline-block; padding: .375em 1em .3125em; border: 1px solid #cdcdcd; border-radius: 5em; }
.footer__a.insta{padding-left:2.7rem; background:url('/images/common/icon_insta.svg') no-repeat 15% / 15% auto;}
.footer__sns{text-align:right; margin-top:2rem;}
.footer__title{ text-align: right; font-size: clamp(18px, calc( 20 / 1500 * 100vw ), 20px); font-weight: 700; }
.footer__tel{ margin-top: .74285714em; display: block; font-size: clamp(30px, calc( 35 / 1500 * 100vw ), 35px); font-weight: 800; }
.footer__ul{ margin-top: .5625em; display: grid; gap: .1875em; font-size: var(--fs16); color: #bfbfbf; }
.footer__copyright {font-weight:200; color:#d1d1d1;}
@media(hover:hover){
	@media(prefers-reduced-motion:no-preference){
		.footer__a.insta{ transition: .4s; }
	}
	.footer__a.insta{ box-shadow: 0 0 currentColor; }
	.footer__a.insta:hover{ box-shadow: 3px 2px currentColor; }
}
@media(min-width:1024px){
	footer{ padding-bottom: 59px; }
	.footer__inr{ grid-template: 'a c' auto 'l c' 1fr / 1fr auto; }
	.footer__address{ grid-area: a; max-width: 800px; }
	.footer__link{ grid-area: l; }
	.footer__contact{ grid-area: c; position: relative; top: -19px; }
	.footer__ul{ /*margin-left: 1.9375em;*/ text-align:right; }
}
@media(max-width:1023px){
	.footer__inr{ justify-items: center; }
	.footer__address{ justify-content: center; }
	.footer__contact,
	.footer__contact *{ text-align: center; }
}
@media(max-width:540px){
	.footer__address{ flex-direction: column; align-items: center; }
}

/* lnb */
.lnb{max-width:1200px; margin:0 auto 50px;}
.lnb > ul{text-align:center;}
.lnb > ul > li{display:inline-block; margin:0 5px;}
.lnb > ul > li > a{display:inline-block; display:flex; flex-direction:column; justify-content:center; min-width:140px; height:50px; box-sizing:border-box; border:1px solid #e7e7e7; font-size:14px; text-align:center;}
.lnb > ul > li > a.on{border-color:#222; color:#222;}
@media(max-width:1279px){
	.lnb{margin:0 auto 30px;}
}
@media(max-width:750px){
	.lnb > ul > li > a{min-width:inherit; padding-left:25px; padding-right:25px;}
}
@media(max-width:480px){
	.lnb > ul > li{margin:0 3px;}
	.lnb > ul > li > a{height:40px; padding-left:15px; padding-right:15px;}
}