@charset "utf-8";

:root{
	--container: 1400;
	--section-padding-block: clamp(30rem, calc(60 / var(--container) * 100vw), 60rem);
	--section-padding-block: 30rem;
}

/* base */
::selection{background:#09429d; color:#fff;}
body{font-size:16rem; word-break:keep-all;}
th[data-view="file"] + td ul li a{line-height:1em;}
ul li:last-child{margin-right:0;}

body.active {overflow: hidden !important;}

.wrap{width:1400rem; margin:0 auto;}
.wrapper{width:1200rem; margin:0 auto;}

#wrap{overflow:hidden;}


/* common */
html,
body{height:100vh; height: var(--vh);}

/* root */
:root{--vh: 100%;--color-point:#09429d; --animation-basic:all 0.4s ease; --animation-lazy:all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); --lang-kor:"Pretendard", Sans-serif; --lang-mob:Sans-serif;}

/* popup */
.layerPop{overflow:hidden; border:1rem solid #353535; border-radius:14rem;}
.layerPop .btn button{font-size:13rem;}
.layerPop .btn{padding:13rem 10rem; background:#353535; text-align:left;}
.layerPop .btn button:last-child{float:right; margin:0 12rem 0 0;}

/* animation effect */
.fadeup{position:relative;opacity:0;top:130px;transition: all 2s cubic-bezier(0.18, 0.89, 0.43, 1.14) 0s;}
.fadeup-in{position:relative;opacity:1;top:0;transition: all 2s cubic-bezier(0.18, 0.89, 0.43, 1.14) 0s;}

@-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}


/* header */
#header{position: relative;z-index:51;width:100%;height:109rem;border-bottom:1rem solid #e5e5e5;background:#fff;transition:0.7s cubic-bezier(0.25, 0.47, 0.12, 0.99);text-align: center; overflow: hidden;}
#header h1{z-index:15;position:absolute;left:150rem;top: 50%;transform: translateY(-50%);}
#header h1 a{display:block;}
#header h1 img{height: 50rem;}

#header.on{overflow:visible;}

#header .btn_menu{display:none;}
#header .btn_menu{position: absolute;top: 39rem;right: 20rem;z-index:9999;width:25rem;height: 17rem;font-size:0rem;transition:all 0.3s ease 0s;}
#header .btn_menu > span{display:block; position:absolute; left:0rem; width:100%; height:2rem;background: #111;}
#header .btn_menu > span:nth-of-type(1){top:0;}
#header .btn_menu > span:nth-of-type(2){top:50%;margin-top: 0; transition:background 0.3s ease 0s;}
#header .btn_menu > span:nth-of-type(3){top:100%;}
#header .btn_menu > span:nth-of-type(1),
#header .btn_menu > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#header .btn_menu.active > span:nth-of-type(1){top:10rem; transform:rotate(-45deg);}
#header .btn_menu.active > span:nth-of-type(2){background:transparent;}
#header .btn_menu.active > span:nth-of-type(3){top:10rem; transform:rotate(45deg);}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}
#header .btn_close{/* position:fixed; */opacity:0;visibility:hidden;top:0rem;left:0rem;z-index:99;width:-webkit-calc(100% - 320rem);width:100%;height:-webkit-calc(100vh - -0rem * 1);height:calc(100vh - -0rem * 1);background:#000;font-size:0;transition:all 0.3s ease-out 0s;}

.active #header .btn_close{opacity:0.4; visibility:visible;}

#header .gnb_bg{z-index:10;position:absolute;top: 106rem;top:0; width:100%;background: #fff;border-top:1px solid #ececec;box-shadow: 3px 53px 25px 0px rgba(0, 0, 0, 0.05);opacity: 0;transition: opacity 0.3s ease;visibility: hidden;}
#header .gnb_bg.on{opacity:1; visibility:visible;}

#header nav{display:inline-block; }
#header nav .menu{display:inline-block; }
#header .menu ul.gnb{/* overflow:hidden; */position: relative;z-index: 11;}
#header .menu ul.gnb:after{content:''; display:block; clear:both;}
#header .menu ul.gnb > li ul:hover{transition:all 0.3s ease-out 0s;}
#header .menu ul.gnb > li ul li a:hover{text-decoration: underline; transition:all 0.3s ease-out 0s;}
#header .menu ul.gnb > li ul:before{ position:absolute;  left:0; top:0; z-index: 6; width:0%; height:2px; background:#02b9c7; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -ms-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s;}
#header .menu ul.gnb > li ul:hover:before{width:100%}
#header .menu ul.gnb > li{ position:relative; float:left;text-align:center;}
#header .menu ul.gnb > li > a{position:relative;display:block;line-height:109rem;padding:0 40rem;height:109rem;font-size:19rem;font-weight:600;color:#111;min-width: 105rem;}
/* 고객 요청으로 클릭 못하도록 */
#header .menu ul.gnb > li > a{ pointer-events: none; }
#header .menu ul.gnb > li > a.on{color:var(--color-point);}

#header.color_header .menu ul.gnb > li:hover > a{color:var(--color-point);}

#header .menu ul.gnb > li.active .sub_menu{opacity:1;visibility:visible;}
#header .menu .sub_menu{ visibility: hidden;opacity:0;transition: all 0.3s ease 0s;padding-bottom: 30rem;}
#header .menu .sub_menu:hover{}
#header .menu .sub_menu > li{overflow:hidden; width:100%; margin:0; text-align:center;}
#header .menu .sub_menu > li.depth_plus > a:after{content:''; display:inline-block;width:8rem;height:8rem;margin-left: 8rem;	background-repeat: no-repeat;background-position: center center;	background-size: 100%;background-image: url(../../images/common/icon_plus.svg);}
#header .menu .sub_menu > li a{display:block;padding:4rem 0;font-size: 17rem; color: #333; transition:all 0.3s ease-out 0s;font-weight: 400;}
#header .menu .sub_menu > li:not(:has(a)){ margin-block: 4rem; }
#header .menu .sub_menu > li a{display: inline-flex; align-items: center; justify-content: center;}
#header .menu .sub_menu > li a:hover{transition:all 0.3s ease-out 0s;}
#header .menu .sub_menu > li a:hover{color:var(--color-point);}
#header .menu .sub_menu > li:first-child{padding-top:25rem;}
#header .menu .sub_menu > li:last-child{}

#header .icon-plus::after { --plus-color: #fff; --plus-thickness: 1px; display: inline-block; width: 8rem; aspect-ratio: 1; margin-left: .4ch; background: linear-gradient(0deg, #0000 calc(50% - var(--plus-thickness)), var(--plus-color) calc(50% - var(--plus-thickness)), var(--plus-color) calc(50% + var(--plus-thickness)), #0000 calc(50% + var(--plus-thickness))), linear-gradient(90deg, #0000 calc(50% - var(--plus-thickness)), var(--plus-color) calc(50% - var(--plus-thickness)), var(--plus-color) calc(50% + var(--plus-thickness)), #0000 calc(50% + var(--plus-thickness))); content: ""; }
/* #header .icon-plus::after { display: inline-block; width: 8rem; aspect-ratio: 1; margin-left: 0.4ch; background: url("/images/common/icon_plus-white.svg") no-repeat 50% / contain; content: ""; } */

#header .search_wrap{position: absolute;right:150rem;top: 32rem;width: 45rem;height: 45rem;background:#111;border-radius:50%;display: flex;justify-content: center;align-items: center;}
#header .search_wrap > a{display:flex;width:100%;height:100%;align-items: center;justify-content: center;}
#header .search_wrap a img{height:22rem}

#header .area_search.down{opacity:1;height:200rem;transition:0.3s; visibility: inherit;box-shadow: 20rem 5rem 20rem rgb(0 0 0 / 5%);}
#header .area_search{z-index:50; opacity:0;position: fixed;background: #fff;width: 100%;height:0;left: 0;top: 0; transition:0.3s; visibility: hidden;}
#header .area_search input[type="text"]{width: calc(100% - 75rem);height: 65rem;padding-left:20px;margin:0;background: #fff;border:0;color: #333;transition:all 0.4s ease-out 0s;outline:none;box-sizing: border-box;position: absolute;left: 0;}
#header .area_search input[type="text"]::placeholder{font-weight:100; font-size:16rem; color:#666;}
#header .area_search #searchBtn{position:absolute;top:0;right:0;width: 75rem;height: 65rem;background:url(../images/common/icon_search.svg) no-repeat 50% 50%;background-size:26rem;filter: invert(100%);box-sizing: border-box;}
#header .area_search form{position:relative;width: 650rem;/* margin-top:65rem; */border: 1rem solid #111;margin: 65rem auto 0 auto;overflow: hidden;height: 65rem;border-radius: 80rem;animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

#header .area_search a.s_close{position:absolute;right:100rem;top:30rem;width:35rem;height:35rem;font-size: 0;}
#header .area_search a.s_close:before{content:'';position:absolute;width:100%;height:2rem;background:#111;transform: rotate(-45deg);top: 0;left: 0;}
#header .area_search a.s_close:after{content:'';position:absolute;width:100%;height:2rem;background:#111;transform: rotate(45deg);top: 0;left: 0;}

[data-depth="list"]{display:none;}
[data-depth="list"].down{display:block; padding:7rem; background:#09429d}
#header .menu .sub_menu [data-depth="list"] li a{padding:3rem 0;font-size: 15rem;color: #fff; font-weight:300;}

/* footer */
#footer{position:relative;z-index:1;background: #0b0d11;}
#footer .ft_top{overflow: hidden; background:url(../../images/main/img_ft_bg.jpg) no-repeat center; background-size:cover;}
#footer .ft_top .wrap{display: flex; align-items: center;}
#footer .ft_top h1{margin-bottom:35rem;}
#footer .ft_top h1 img{height:60rem}
#footer .menu_wrap{box-sizing:border-box; float:left; width:65%; overflow:hidden; padding:60rem 0; border-right:1rem solid #373838;}
#footer .menu_wrap > ul{display:flex; word-break: break-all;}
#footer .menu_wrap > ul > li{width:20%; padding-right: 1ch; }
#footer .menu_wrap > ul > li > a{font-size:20rem; font-weight:600; color: #fff;}
/* 고객 요청으로 클릭 못하게 수정 */
#footer .menu_wrap > ul > li > a:has(+ul){pointer-events: none;}
#footer .menu_wrap > ul > li ul li{margin-top:10rem;}
#footer .menu_wrap > ul > li ul li a{opacity:0.9; font-weight:300; color: #fff; word-break: keep-all; }

#footer .contact_wrap{box-sizing:border-box; width:35%; padding:0 5%}
#footer .contact_wrap ul li.v1{display:flex;align-items: center;justify-content: space-between; margin-bottom:70rem;}
#footer .contact_wrap ul li h3{color:#fff;font-size:25rem;font-weight:500;margin-bottom: 10rem;}
.link-email{
	@media(width>540px){ font-size: 25rem; margin-bottom: 10rem; }
	@media(width<=540px){ font-size: 18rem; }
}
#footer .contact_wrap ul li img{height:20rem;}
#footer .contact_wrap ul li img.store-image{height:36rem;}
#footer .contact_wrap ul li .sns li{display:inline-block; margin-left:15rem;}
#footer .contact_wrap ul li a{ color: #fff; }
#footer .contact_wrap ul li div a.btn{position:relative; padding-right:45rem; color:#fff; font-size:18rem;} 
#footer .contact_wrap ul li div a.btn:before{content:'';position:absolute;display:block;width:13px;height:1px;right:0;top: 13rem;background:#fff;}
#footer .contact_wrap ul li div a.btn:after{content:'';position:absolute;display:block;width:1px;height:13px;right: 6rem;top: 7rem;background:#fff;}


.box_mail{position:relative;/* margin-top:25rem; */}
.box_mail input[type="text"]{width:calc(100% - 70px) ; height:60px; padding-left:20px; margin:0; background:rgba(255,255,255,0.22); border:0; color:#fff; transition:all 0.4s ease-out 0s; outline:none;}
.box_mail input[type="text"]:focus{background:#000}
.box_mail input[type="text"]::placeholder{opacity:0.6; padding-left:10px; font-weight:100; font-size:15px; color:#ddd;}
.box_mail #searchBtn{position:absolute; top:0; right:0; width:70px; height:60px; background:#003283; color:#fff;}

#footer .ft_info{padding:80rem 0}
#footer .ft_info .wrap{position:relative; }
#footer .ft_menu{position:absolute; right:0; top:0}
#footer .ft_menu li{float:left; margin-left:25rem; color:#fff;}
#footer .ft_menu li a{color:#fff; font-size:18rem;}

#footer .info li{float:left; margin-right:20rem; margin-bottom:15rem ; font-size:18rem; color:#ccc; font-weight:200}
#footer .info li:first-child{clear:both; width:100%}
#footer .info li:nth-child(5n){clear:both;}
#footer .info{overflow:hidden;}
#footer .info li *{display:inline-block; color:#ccc;}
#footer .info-edit{
	display: flex; flex-wrap: wrap; gap: 15rem 20rem; font-weight: 200; font-size: 18rem; color: #ccc;
	a{ color: inherit; }
	@media (width >= 860px){
		padding-right: 300rem;
		.br::before{ content: ', '; }
	}
	@media (width < 860px){
		margin-top: 30rem;
		.br{ display: block; }
	}
}
#footer .cpright{display:block; padding:21rem 0; font-size:18rem; color:#ccc; font-weight:200}

@media (min-width:2000px){
	html{font-size:0.05254860746190225vw;}
}

@media screen and (max-width:1919px){
 
}

@media screen and (max-width:1600px){

	#header h1{left:30rem;}
	#header .search_wrap{right:30rem}
}

@media screen and (max-width:1535px){
	#header nav .gnb{padding-left:200rem;}
	#header nav .gnb > li a{padding:0 23rem;}
	#header{text-align:left;}
}

@media (max-width:1480px){
	html{font-size:0.06756756756756757vw;}

	.wrap{width:auto; margin:0 40rem}

}

@media screen and (max-width:1279px){
	
	.wrapper{width:auto; margin:0 40rem}

	body,
	p,
	li,
	a{font-size:15rem;}
	

}

@media all and (min-width:1024px){
	
	a[data-link="call"]{cursor:auto; pointer-events:none;}
}

@media all and (max-width:1023px){
	html{font-size:0.09775171065493645vw;}

	#header{height:74rem;overflow: initial;}
	#header .btn_menu{top:28rem;}	
	#header .btn_menu{display:block;}
	#header .btn_menu.active{right:30rem;}
	
	#header nav{position:absolute;top:0px;right:-100%;z-index: 10;width: 100%;height:100vh;margin:0;background:#fff;}

	.active #header nav,
	#header nav.active{right:0px;box-shadow:-5px 0px 15px rgba(0,0,0,0.1);transition:all 0.5s ease-out 0s;background: #fff;}
	
	#header nav .gnb{position:absolute;top: 150rem;right:0px;width:100%;padding: 0 30rem;overflow-y:auto;box-sizing: border-box;}
	#header nav .gnb > li{display:block; width:100%;}	
	#header nav .gnb > li > a{display:block; padding:17px 0; font-size:18px; color:#111; transition:all 0.3s ease 0s;}
	#header nav .gnb > li > a:hover .sub_menu{display:none !important}
	#header .menu ul.gnb > li{padding:0; text-align:left;}
	#header .menu .sub_menu > li a{text-align:left; font-size:18rem}
	#header .menu .sub_menu{visibility: visible;display:none;opacity:1;top: 0;position:relative;height:auto;padding: 30rem 30rem;background: #f8f8f8;box-sizing: border-box;transition: 0s;}
	#header .menu ul.gnb > li > a{line-height: 1.3;display:block;height:auto;padding: 30rem 0px;font-size: 25rem;border-bottom: 1px solid #ddd;}
	#header .menu ul.gnb > li > a:before,
	#header .menu ul.gnb > li > a:after {content: '';position: absolute;top: 50%; right:10rem; margin: -1px 0 0 -5px; width: 10px; height: 2px; background-color: #000; -webkit-transition: -webkit-transform .6s;  transition: -webkit-transform .6s;  -o-transition: transform .6s;  transition: transform .6s;  transition: transform .6s, -webkit-transform .6s;}
	#header .menu ul.gnb > li > a:after{ -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}
	#header .menu ul.gnb > li > a.active:after{display:none;}

	#header .menu .sub_menu > li:first-child{padding-top:0;}
	#header nav .gnb > li ul li.active a{color:var(--color-point);}

	#header .search_wrap{right:60rem; top:14rem; background:#fff;}	
	#header .search_wrap > a{filter: invert(1);}
	#header .area_search{top:0;}
	#header .area_search input[type="text"]{height:50rem}

	#header .area_util{right:150rem}
	#header .area_search a.s_close{top:35rem; right:20rem; width:25rem}
	#header .area_search.down{height: 150rem;}
	#header .area_search form{width:80%; height:50rem}
	#header .area_search #searchBtn{height:50rem;  background-size: 22rem}

	.s_active #header .btn_menu{display:none;}
	
	#footer .ft_top h1{text-align:center;}
	#footer .menu_wrap > ul{}
	#footer .menu_wrap > ul > li{text-align:center; padding-right: 0;}
	#footer .menu_wrap{width:100%; border-right:0}
	#footer .ft_top .wrap{    flex-direction: column;}
	#footer .contact_wrap{width:100%; padding:50rem 0 ; border-top:1rem solid rgba(255,255,255,0.1)}
	#footer .contact_wrap ul li.v1{margin-bottom:30rem}

}

@media (max-width:860px){
	html{font-size:0.13020833333333335vw;}
	
	.wrapper,
	.wrap{margin: 0 20rem;}

	.active #header .area_util{display:block;}
	#header .area_util{z-index: 15; display:none; right: 90rem;margin-top: 3rem;}


	#footer{}
	#footer .ft_menu{overflow:hidden; position:static;}
	#footer .ft_menu li{margin:0 25rem 0 0}
	#footer .info{width:100%; margin-top:30rem;}
	
}



@media (max-width: 540px){
	html{font-size:0.26666666666666665vw;}		

	#header{height:64rem}
	#header h1{left:20rem;}
	#header h1 img{height:30rem;}
	
	#header .search_wrap{top:9rem}
	#header .search_wrap a img{height:19rem}

	#header .btn_menu{top:23rem}
	#header .btn_menu > span{height:2rem;}
	
	#header .area_search a.s_close{top:31rem}
	#header .area_search input[type="text"]::placeholder{font-size:14rem}
	#header .area_search #searchBtn{background-size:19rem}

	#header nav .gnb{top:80rem; padding:0 20rem}
	#header .btn_menu.active{right:20rem}

	#header .menu ul.gnb > li > a{padding: 18rem 0; font-size:16rem}
	#header .menu .sub_menu{padding:20rem 15rem;}
	#header .menu .sub_menu > li a{font-size:14rem;}
	
	#footer .ft_top h1{text-align:left;}
	#footer .contact_wrap ul li.v1{display:block;}
	#footer .contact_wrap ul li h3{font-size:18rem}
	#footer .contact_wrap ul li .sns li{margin:0 15rem 0 0}
	#footer .contact_wrap ul li div a.btn{padding-right:25rem; font-size:14rem}
	#footer .contact_wrap ul li div a.btn:before{top:11rem}
	#footer .contact_wrap ul li div a.btn:after{top:6rem; right:5rem}
	#footer .contact_wrap ul li img{height:16rem; vertical-align:top}

	.box_mail #searchBtn{font-size:14rem}
	
	#footer .ft_top{padding:40rem 0}
	#footer .ft_top h1{margin-bottom:0}
	#footer .ft_top h1 img{height:30rem}
	#footer .menu_wrap{padding:0}
	#footer .menu_wrap > ul{display:none;}
	#footer .contact_wrap{padding:0; border-top:0}
	#footer .ft_menu li a{font-size:15rem}
	#footer .ft_info{padding:40rem 0}
	#footer .info li{width:100%; margin:0 0 10rem 0; font-size:14rem}
	#footer .cpright{font-size:13rem}
	
}

.text-primary{color: var(--color-point); font-weight: 600;}