@charset 'utf-8';

/* ���� */
*{ box-sizing: border-box; word-break: keep-all; letter-spacing: -0.02em; line-height: 1.3; }
.w1670{ max-width: 1670px; width: 100%; margin: 0 auto; }
.w1650{ max-width: 1650px; width: 100%; margin: 0 auto; }
.w1600{ max-width: 1600px; width: 100%; margin: 0 auto; }
.w1530{ max-width: 1530px; width: 100%; margin: 0 auto; }
.w1500{ max-width: 1500px; width: 100%; margin: 0 auto; }
.mukta{ font-family: 'Mukta', 'Pretendard', sans-serif; }
figure{ display: inline-block; margin: 0; }

@media screen and (max-width: 1640px){
	.w1600{ padding: 0 20px; }
}

@media screen and (max-width: 1570px){
	.w1530{ padding: 0 20px; }
}

@media screen and (max-width: 1540px){
	.w1500{ padding: 0 20px; }
}

/* privacy */
.privacy { color:#666; width: 100%; box-sizing:border-box; font-size:15px;	line-height: 140%; word-break:break-all; }
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin-bottom: 15px; }
.privacy > p+dl { margin-top: 30px; }
/* .privacy dl { padding-bottom:20px;} */
.privacy dl.blue dt{font-size:15px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy dl.blue dd{ padding-bottom:10px;text-align:justify; font-size:15px; line-height:140%; color:#666;}
.privacy dl dd ul{ padding:10px; }
.privacy dl dd ul li{ line-height:120%; margin-top: 10px; }
.privacy dl dd ul li:first-child { margin-top: 0; }
.privacy dl dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt{ padding-bottom: 20px; }
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 20px; }
.sTxt p { margin-top: 10px; }
.sTxt dl{ padding-top: 10px; }
.sTxt dt { margin: 10px 0; }
/* .sTxt dd { margin:0 20px; } */

/* ���� */
:root{
	--blue: #3f579e;
	--Montserrat: 'Montserrat', sans-serif;
	--Mukta: 'Mukta', sans-serif;
	--Noto: 'Noto Sans KR', sans-serif;
	--baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
}

/* header */
#header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100; transition: all 0.5s; }
#header .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#header .logo{ display: inline-block; position: relative; margin-left: 35px; }
#header .logo::after{ content: ""; width: 174px; height: 42px; background: url("/img/common/color.png") no-repeat center center / auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1s;  background-size: 174px  auto}
#header .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
#header .logo img{width: 174px}
 
#header .depth01{ display: flex; align-items: center; }
#header .depth01 > li{ position: relative; }
#header .depth01 > li > a{ display: inline-block; font-family: var(--Mukta); font-size: 2.2rem; font-weight: 600; color: #fff; border-radius: 15px 15px 0 0; padding: 50px 35px; position: relative; transition: all 0.5s; transition-delay: 0.3s; }
#header .depth01 > li > a::after{ content: ""; width: 15px; height: 2px; background-color: #e0e0e0; position: absolute; top: 90px; left: 50%; z-index: 10; z-index: 50; transform: translateX(-50%) scaleX(0); transition: all 0.5s; }

#header .depth02{ width: 100%; position: absolute; top: calc(100% - 10px); z-index: 10; background-color: #fff; padding-bottom: 30px; border-radius: 0 0 15px 15px; overflow: hidden; display: none; }
#header .depth02 > li > a{ display: inline-block; width: 100%; font-size: 1.7rem; font-weight: 400; color: #666; text-align: center; padding: 10px 0; }

#header .depth01 > li:hover > a{ background-color: #fff; color: var(--blue); transition: unset; transition-delay: unset; }  
#header .depth01 > li:hover > a::after{ transform: translateX(-50%) scaleX(1); }

#header .depth02 > li:hover > a{ font-weight: 500; color: var(--blue); }

#header .menu{ display: none; position: relative; padding: 10px; transition: opacity 1s; cursor: pointer; margin-right: -10px; border: none; background: none; }
#header .menu::after{ content: url("/img/common/btn_ham_black.png"); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1s; }


/* header - scroll */
#header.scroll{ background-color: #fff; }
#header.scroll .logo::after{ opacity: 1; }
#header.scroll .depth01 > li > a{ color: #111; }
#header.scroll .depth01 > li:hover > a{ color: var(--blue); }
#header.scroll .menu::after{ opacity: 1; }

/* header - none */
#header.none{ opacity: 0; pointer-events: none; }

@media screen and (max-width: 1670px){
	#header{ padding: 0 20px; }
	#header .logo{ margin-left: 0; }
}

@media screen and (max-width: 1200px){
	#header{ padding: 20px; }
	#header nav{ display: none; }  
	#header .menu{ display: block; }
}


/* moblie_menu */
#moblie_menu{ width: 100%; height: 100%; position: fixed; top: 0; right: 0; z-index: 200 !important; background: rgba(0, 0, 0, 0.8); display: none; }
#moblie_menu .blank{ display: inline-block; width: calc(100% - 320px); height: 100%; }
#moblie_menu .inner{ display: inline-block; max-width: 320px; width: 100%; height: 100%; background: #fff; }
#moblie_menu button.close{ border: none; background: none; padding: 20px; cursor: pointer; float: right; position: relative; z-index: 20; }

#moblie_menu .depth01 > li{ position: relative; }
#moblie_menu .depth01 > li::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; z-index: 10; }
#moblie_menu .depth01 > li > a{ width: 100%; display: inline-block; font-family: var(--Mukta); font-size: 1.9rem; font-weight: 400; color: #111; padding: 17px 30px; border-bottom: 1px solid #E8E8E8; position: relative; }
#moblie_menu .depth01 > li > a::after{ content: url("/img/common/moblie_arrow.png"); position: absolute; top: 46%; right: 20px; transform: translateY(-50%); }
#moblie_menu .depth01 > li:first-of-type > a{ border-top: 1px solid #E8E8E8; }
#moblie_menu .depth02{ background: #F8F8F8; border-bottom: 1px solid #E8E8E8; display: none; }
#moblie_menu .depth02 > li > a{ width: 100%; display: inline-block; font-size: 1.6rem; font-weight: 300; color: #555; padding: 15px 30px; }

#moblie_menu .depth01 > li.on::after{ display: none; }
#moblie_menu .depth01 > li.on > a{ background-color: var(--blue); color: #fff; }
#moblie_menu .depth01 > li.on > a::after{ content: url("/img/common/moblie_arrow_on.png"); }


/* footer */
#footer{ border-top: 1px solid #f1f1f1; padding-top: 65px; }
#footer .flex-box{ display: flex; justify-content: space-between; align-items: flex-end; padding-left: 25px; padding-bottom: 50px; }
#footer .logo{ display: inline-block; position: relative; margin-bottom: 55px; }
#footer .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#footer .logo img{width: 174px}

#footer ul.info{ margin-bottom: 7px; }
#footer ul.info li.flex{ display: flex; }
#footer ul.info li.flex p:first-of-type{ margin-right: 25px; }
#footer ul.info li p{ font-size: 1.6rem; font-weight: 300; color: #555; }
#footer ul.info li p span{ font-weight: 500; color: #222; }
#footer ul.info li p span.after{ display: inline-block; width: 1px; height: 11px; background: #e0e0e0; margin: 0 10px; }
#footer ul.info li:not(:last-of-type){ margin-bottom: 12px; }
#footer a.policy{ display: inline-block; font-size: 1.6rem; font-weight: 400; color: #555; padding: 20px 0; }

#footer h3{ font-size: 6rem; font-weight: 800; color: #111; text-align: right; line-height: 1.3333; padding-right: 25px; margin-bottom: 35px; text-transform: uppercase; }

#footer .footer_menu .depth01{ display: flex; justify-content: flex-end; }
#footer .footer_menu .depth01 li a{ display: inline-block; font-family: var(--Mukta); font-size: 1.9rem; font-weight: 500; color: #666; padding: 25px; }
#footer .footer_menu .depth01 li:hover a{ color: var(--blue); font-weight: 600; } 
#footer .depth02{ display: none; }

#footer .border{ border-top: 1px solid #f1f1f1; padding: 10px 0; }
#footer .border .flex-wrap{ display: flex; justify-content: space-between; align-items: center; }
#footer .border p{ font-family: var(--Mukta); font-size: 1.5rem; font-weight: 500; color: #999; }
#footer .border ul{ display: flex; }
#footer .border ul li{ position: relative; }
#footer .border ul li:first-of-type{ margin-right: 5px; }
#footer .border ul li span{ display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; border-radius: 50%; background-color: #f1f1f1; }
#footer .border ul li span i.xi-facebook{ font-size: 2rem; color: #0c5ab2; }
#footer .border ul li span i.xi-blogger{ font-size: 1.8rem; color: #2bca00; }
#footer .border ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 

@media screen and (max-width: 1600px){
	#footer h3{ font-size: 5rem; padding-right: 20px; }
	#footer .footer_menu .depth01 li a{ padding: 25px 20px; }
}

@media screen and (max-width: 1200px){
	#footer{ padding-top: 40px; }
	#footer .flex-box{ justify-content: center; }
	#footer .flex-box .half{ text-align: center; }
	#footer .flex-box .half:last-of-type{ display: none; }
	#footer .logo{ margin-bottom: 30px; }
	#footer .flex-box{ padding-bottom: 10px; }
}

@media screen and (max-width: 500px){
	#footer{ padding-bottom: 110px; }
	#footer .border .flex-wrap{ flex-direction: column; }
	#footer .border ul{ margin-top: 5px; }
}


/* floating */
#floating{ position: fixed; bottom: 150px; right: 45px; z-index: 100; }
#floating button.open{ width: 70px; height: 70px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: none; background: #fff; border-radius: 10px; box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1); position: relative; transition: all 0.3s; cursor: pointer; display: none; }
#floating button.open::after{ content: url("/img/common/floating_open_hover.png"); position: absolute; top: 16px; left: 50%; transform: translateX(-50%); opacity: 0; transition: all 0.3s; }
#floating button img{ transform: all 0.3s; }
#floating button.open span{ display: inline-block; font-family: var(--baseFont); font-size: 1.4rem; font-weight: 700; color: #333; margin-top: 10px; }
#floating .menu{ position: fixed; bottom: 150px; right: 45px; border-radius: 10px; box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1); overflow: hidden; }
#floating button.close{ width: 70px; font-size: 1.4rem; font-family: var(--baseFont); font-weight: 700; color: #fff; border: none; background: var(--blue); padding: 5px 0; cursor: pointer; }
#floating ul{ background: #fff; overflow: hidden; }
#floating ul li{ width: 70px; height: 70px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: 700; position: relative; transition: all 0.3s; }
#floating ul li img{ transition: all 0.3s; }
#floating ul li::after{ content: var(--image); position: absolute; top: 9px; left: 50%; transform: translateX(-50%); opacity: 0; transition: all 0.3s; }
#floating ul li span{ color: #333; margin-top: 10px; transition: all 0.3s; }
#floating ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#floating button.open:hover{ background: var(--blue); }
#floating button.open:hover::after{ opacity: 1; }
#floating button.open:hover img{ opacity: 0; }
#floating button.open:hover span{ color: #fff; }

#floating ul li:hover{ background: var(--blue); }
#floating ul li:hover img{ opacity: 0; }
#floating ul li:hover::after{ opacity: 1; }
#floating ul li:hover span{ color: #fff; }

@media screen and (max-width: 1860px){
	#floating{ bottom: 190px; right: 20px; }
	#floating .menu{ bottom: 190px; right: 20px; }
}

@media screen and (max-width: 500px){
	#floating button.open{ display: none; }
	#floating button.close{ display: none; }
	#floating .menu{ bottom: 30px; }
	#floating .menu ul{ display: flex; width: calc(100vw - 40px); }
	#floating .menu ul li{ width: calc(100% / 5); }
}


/* quick_menu */
#quick_menu{ position: fixed; bottom: 20px; right: 45px; z-index: 100; }
#quick_menu > ul > li{ position: relative; }
#quick_menu > ul > li:not(:last-of-type){ margin-bottom: 15px; }
#quick_menu > ul > li{ display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 10px; position: relative; cursor: pointer; border: none; }
#quick_menu > ul > li.call{ display: none; }
#quick_menu > ul > li.inquiry{ width: 70px; height: 70px; box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1); }
#quick_menu > ul > li.inquiry .margin{ background: var(--blue); border-radius: 10px; width: 100%; height: 100%; padding: 26px 20px; position: relative; transition: all 0.5s; transition-delay: unset; }
#quick_menu > ul > li.inquiry .margin::after{ content: var(--image); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; opacity: 0; transition: all 0.5s; }
#quick_menu > ul > li.inquiry.form .margin::after{ top: 36%; left: 28%; transform: translate(0, 0); animation: hithere 3s ease infinite; transform-origin: 50% 50%; }
#quick_menu > ul > li.inquiry.form img{ animation: hithere 3s ease infinite; }
#quick_menu > ul > li.inquiry .position{ display: inline-block; background: var(--blue); position: absolute; top: 50%; right: 0; z-index: -1; transform: translateY(-50%); width: 0; height: 100%; border-radius: 10px; padding: 24px 20px; padding-left: 40px; overflow: hidden; opacity: 0; transition: 0.5s; transition-delay: 0.1s; }
#quick_menu > ul > li.inquiry span{ font-size: 1.8rem; font-weight: 500; color: #fff; opacity: 0; transition: 0.3s; left: 33px; position: absolute;}
#quick_menu > ul > li.top span{ display: inline-block; font-family: var(--Montserrat); font-size: 1.4rem; font-weight: 700; color: #999; letter-spacing: -0.03em; margin-top: 10px; }
#quick_menu > ul > li.inquiry .position{ width: 121px; opacity: 1; transition-delay: unset; }
#quick_menu > ul > li.inquiry span{ opacity: 1; transition: 0.5s; }
#quick_menu > ul > li.inquiry .margin{ margin-left: -175px; transition-delay: 0.1s; }
#quick_menu > ul > li a{ position: absolute; top: 0; right: 0; bottom: 0; left: -60px; width: 121px; }

/* #quick_menu > ul > li:hover .margin{ background: var(--blue); }
#quick_menu > ul > li:hover .margin img{ opacity: 0; }
#quick_menu > ul > li:hover .margin::after{ opacity: 1; }
#quick_menu > ul > li.inquiry:hover .position{ background: var(--blue); } */

@keyframes hithere {
  10% { transform: scale(1.2); }
  15%, 35% { transform: rotate(-20deg) scale(1.2); }
  25% { transform: rotate(20deg) scale(1.2); }
  45% { transform: rotate(0deg) scale(1.2); }
  75% { transform: scale(1); }
}

/* quick_menu formbox ���� */
#quick_menu .form-box input[type="radio"], #quick_menu .form-box input[type="checkbox"]{ display: none; }
#quick_menu .form-box input[type="radio"] + label::before, #quick_menu .form-box input[type="checkbox"] + label::before{ content: ""; width: 14px; height: 14px; border: 1px solid #ddd; border-radius: 2px; position: absolute; top: 50%; left: 8px; transform: translateY(-50%); box-sizing: border-box; }
#quick_menu .form-box input[type="radio"]:checked + label::before, #quick_menu .form-box input[type="checkbox"]:checked + label::before{ content: ""; width: 14px; height: 14px; border: 1px solid #1f295e; border-radius: 2px; position: absolute; top: 50%; left: 8px; transform: translateY(-50%); box-sizing: border-box; }
#quick_menu .form-box input[type="radio"]:checked + label::after, #quick_menu .form-box input[type="checkbox"]:checked + label::after{ content: ""; width: 7px; height: 7px; background-color: var(--blue); border-radius: 2px; position: absolute; top: 50%; left: 11.4px; transform: translateY(-50%); box-sizing: border-box; }
#quick_menu .form-box input[type="text"]{ width: 100%; border: none; border-bottom: 1px solid #eee; padding: 10px; font-size: 1.5rem; font-weight: 300; color: #000; }
#quick_menu .form-box input[type="text"]::placeholder{ color: #999; }

/* quick_menu formbox */
#quick_menu .form-box *{ font-family: var(--baseFont); }
#quick_menu .form-box{ max-width: 520px; width: 100%; position: fixed; bottom: 68px; right: 45px; z-index: 100; background-color: #fff; border-radius: 10px; padding: 20px; cursor: default; box-shadow: 0 0 15px rgba(0, 0, 0, 0.25); display: none; }
#quick_menu .form-box form{ /* height: 60vh; */ overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; position: relative; padding-top: 30px; }
#quick_menu .form-box form::-webkit-scrollbar{ display: none; }
#quick_menu .form-box .close{ width: 30px; height: 30px; border: none; position: absolute; top: -8px; right: 0; background: none; cursor: pointer; }
#quick_menu .form-box h4{ font-size: 1.6rem; font-weight: 600; color: #000; margin-bottom: 10px; }
#quick_menu .form-box .input{ position: relative; margin-bottom: 10px; }
#quick_menu .form-box .input span{ display: inline-block; font-size: 1.4rem; font-weight: 400; color: #555; margin-bottom: 5px; }  
#quick_menu .form-box textarea{ width: 100%; height: 200px; border: 1px solid #eee; padding: 6px 10px; font-size: 1.4rem; font-weight: 400; color: #000; line-height: 1.8571; } 
#quick_menu .form-box textarea::placeholder{ color: #aaa; }

#quick_menu .form-box .radio-list{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#quick_menu .form-box .radio-list li{ width: calc((100% - 10px) / 2); margin-top: 5px; }
#quick_menu .form-box .radio-list li.etc{ width: 100%; }
#quick_menu .form-box .radio-list li label{ width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 1.4rem; height: 45px; font-weight: 300; color: #232323; line-height: 45px; border: 1px solid #ddd; border-radius: 4px; padding-left: 30px; padding-right: 10px; position: relative; cursor: pointer; }
#quick_menu .form-box .radio-list li label input{ width: calc(100% - 37px); border: 1px solid #ddd; border-radius: 2px; font-size: 1.2rem; font-weight: 300; padding: 4px 10px; }
#quick_menu .form-box .radio-list li input[type="checkbox"]:checked + label{ border: 1px solid #1f295e; font-weight: 400; color: #1f295e; }
#quick_menu .form-box .radio-list li.etc input[type="text"]{ border: none; border-bottom: 1px solid #ddd; font-size: 1.3rem; font-weight: 400; }
#quick_menu .form-box .radio-list li.etc input[type="text"]::placeholder{ color: #999: }

#quick_menu .form-box .flex-box{ margin: 15px 0 5px; display: flex; flex-wrap: wrap; justify-content: space-between; }
#quick_menu .form-box .flex-box .input{ width: 100%; }

#quick_menu .input.policy{ margin: 0; margin-top: -10px; }
#quick_menu .input.policy label{ display: inline-block; font-size: 1.2rem; font-weight: 300; color: #666; padding: 10px 20px; cursor: pointer; }
#quick_menu .input.policy input[type="checkbox"] + label::before{ top: 17px; left: 0; }
#quick_menu .input.policy input[type="checkbox"]:checked + label::after{ top: 17px; left: 3.3px; }

#quick_menu .form-box .input.auto{ display: flex; align-items: center; }
#quick_menu .form-box .input.auto input{ width: calc(100% - 185px); height: 50px; border: 1px solid #eee; margin: 0 10px; }
#quick_menu .form-box .input.auto button{ width: 50px; height: 50px; border: none; background: #111; font-size: 1.8rem; color: #fff; }
 
#quick_menu .btns{ display: flex; justify-content: space-between; }
#quick_menu .btns button{ border: none; width: 100%; height: 48px; border-radius: 5px; font-family: var(--baseFont); font-size: 1.5rem; font-weight: 500; color: #fff; cursor: pointer; background-color: var(--blue); }

@media screen and (max-width: 1860px){
	#quick_menu{ bottom: 60px; right: 20px; }
	#quick_menu .form-box{ bottom: 145px; right: 20px; }
}

@media screen and (max-width: 1300px){
	#quick_menu .form-box{ padding: 20px; }
	#quick_menu .form-box h4{ margin-bottom: 5px; }
	#quick_menu .form-box .flex-box{ margin-bottom: 5px; }  
	#quick_menu .input.policy label{ padding: 12px 10px 10px 20px; }
	#quick_menu .input.policy input[type="checkbox"] + label::before{ top: 19px; }
	#quick_menu .input.policy input[type="checkbox"]:checked + label::after{ top: 19px; }
	#quick_menu .btns{ margin-top: 10px; }
}

@media screen and (max-width: 700px){
	#quick_menu > ul > li.inquiry span{ font-size: 1.7rem; }
	#quick_menu .form-box{ width: calc(100% - 40px); }
}

@media screen and (max-width: 500px){
	#quick_menu{ bottom: 110px; }
	#quick_menu > ul > li.call{ display: flex; }
	#quick_menu > ul > li.inquiry{ width: 60px; height: 60px; }
	#quick_menu > ul > li.inquiry .margin{ padding: 18px 10px; text-align: center; }
	#quick_menu > ul > li.inquiry .position{ padding-top: 20px; }
	#quick_menu > ul > li.inquiry.form .margin::after{ top: 31%; }

	#quick_menu .form-box{ padding-right: 10px; bottom: 158px; }
	#quick_menu .form-box form{ padding-right: 10px; }
	#quick_menu .form-box .radio-list li{ width: 100%; margin-top: 10px; }
	#quick_menu .form-box .close img{ transform: scale(1.2); top: -5px; }
	#quick_menu .form-box textarea{ height: 150px; }  
}

@media screen and (max-height: 850px){
	#quick_menu .form-box form{ height: 55vh; overflow-y: scroll; }
}