@charset "utf-8";
/* 기본프로그램 사용자모듈 메뉴 - PC */
.all_m_btn {padding:10px; background:#323337;}
.all_m_btn img {position:absolute; top:28%; left:15px; width:10%; max-width:40px; cursor:pointer;}
.all_m_btn .mutit {text-align:center; font-weight:900; font-size:26px; color:#fff;}
.pro_m_wrap {display:none; font-family:'Nanum Gothic', sans-serif; transition:all 0.3s linear;}
.pro_m_wrap .m_menu {width:200px;}
.pro_m_wrap .bg_black {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:-1;}


/* 기본프로그램 사용자모듈 메뉴 - MOBILE */
.pro_m_wrap .subleftmenu {
	list-style:none;
	margin:0;
	padding:0;
}
.pro_m_wrap .subleftmenu li {
	border-bottom:1px solid #515155;
	background:#323337;
}
.pro_m_wrap .subleftmenu a {
	display:block;
	color:#b5b2b2;
	font-size:14px;
	padding:11px 5px 11px 15px;
	font-family:'Noto Sans KR';
}
.sub_title_m{
	font-size:28px !important;
	font-weight:bold;
	color:#fff !important;
	padding:12px 5px 12px 15px !important;
}
.pro_m_wrap .subleftmenu a:hover {
	background:#307dd4;
	color:#fff;
}
.sub_title_m:hover {
	background:#323337 !important;
	cursor:default;
}

@media all and (max-width:999px){
	.pro_m_wrap {display:block; position:absolute; left:-100%; top:0; z-index:999;}
	.pro_m_wrap.view {left:0;}
}

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

@media all and (max-width:1400px){
	.inner{width:93.75%;}
}

/* 햄버거 메뉴 */
#header .m_btn {display:none; width:40px; margin:0 auto; text-align:right; cursor:pointer; }
#header .m_btn i{display:inline-block; width:100%; height:2px; margin:3px 0; background:#000; transition:all 0.5s;}
#header .m_btn i:nth-of-type(2){width:84%;}
#header .m_btn.on i:nth-of-type(1){margin:11px 0 -2px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);}
#header .m_btn.on i:nth-of-type(2){width:0; margin:0;}
#header .m_btn.on i:nth-of-type(3){margin:0 0 11px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg);}


@media all and (max-width:1024px){
	#header .gnb{display: none;}
	#header .m_btn{display: inline-block;}
}

/* 모바일 메뉴 */
.m_menu_bg {z-index:101; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.7); cursor:pointer; }
#m_menu {z-index:102; position:fixed; right:-100%; top:0; width:500px; max-width:80%; height:100%; background-color:#fff; box-sizing:Border-box; transition:all 0.5s; overfloW-y:auto;}
#m_menu.on {right:0; }
#m_menu .top_box {position:relative; padding:10px; box-sizing:border-box; }
#m_menu .top_box .close_btn {position:absolute; right:20px; top:calc(50% - 15px); width:30px; height:30px; }
#m_menu .top_box .close_btn i {display:block; width:100%; height:2px; background-color:#333; }
#m_menu .top_box .close_btn i:first-of-type {-webkit-transform:rotate(45deg) translate(9px,9px); -moz-transform:rotate(45deg) translate(9px,9px); -ms-transform:rotate(45deg) translate(9px,9px); -o-transform:rotate(45deg) translate(9px,9px); transform:rotate(45deg) translate(9px,9px); }
#m_menu .top_box .close_btn i:last-of-type {-webkit-transform:rotate(-45deg) translate(-7px,8px); -moz-transform:rotate(-45deg) translate(-7px,8px); -ms-transform:rotate(-45deg) translate(-7px,8px); -o-transform:rotate(-45deg) translate(-7px,8px); transform:rotate(-45deg) translate(-7px,8px); }
#m_menu .login_box {padding:20px 0; background-color:#292929; text-align:center; }
#m_menu .login_box a {position:relative; padding:0 30px; font-size:20px; color:#fff; letter-spacing:-0.04em; }
#m_menu .login_box a:first-of-type:before {content:''; position:absolute; right:-1px; top:calc(50% - 7px); width:2px; height:15px; background-color:#fff; }
#m_menu .gnb_box {border-top:1px solid #ddd; }
#m_menu .gnb_box > ul > li {border-bottom:1px solid #dddddd; }
#m_menu .gnb_box > ul > li > a {position:relative; display:block; padding:20px 20px; font-size:20px; font-weight:bold; color:#222222; letter-spacing:-0.04em; box-sizing:border-box; }
#m_menu .gnb_box .depth02 {display:none; padding:10px 0; background-color:#000; }
#m_menu .gnb_box .depth02 li a {position:relative; display:block; padding:7px 20px; font-size:18px; color:#fff; letter-spacing:-0.04em; box-sizing:border-box; }


/* ===============hs====================== */

:root{
    /* ===== FONT SIZE ===== */
    --fs-2xs: clamp(10px, 0.52vw, 12px);
    --fs-xs:  clamp(12px, 0.63vw, 14px);
    --fs-sm:  clamp(14px, 0.73vw, 16px);
    --fs-base:clamp(16px, 0.83vw, 18px);
    --fs-md:  clamp(18px, 0.94vw, 20px);
    --fs-lg:  clamp(20px, 1.04vw, 24px);
    --fs-xl:  clamp(24px, 1.25vw, 28px);
    --fs-xl2: clamp(28px, 1.46vw, 32px);
    --fs-2xl: clamp(30px, 1.67vw, 36px);
    --fs-3xl_2: clamp(32px, 1.80vw, 40px);
    --fs-3xl: clamp(34px, 1.88vw, 42px);
    --fs-4xl: clamp(42px, 2.50vw, 56px);
  
    --lh-tight: 1.2; --lh-normal: 1.45; --lh-loose: 1.7;
    --ls-tight: -0.015em; --ls-normal: 0em; --ls-wide: 0.02em;
  
    /* ===== SPACING / PADDING / MARGIN ===== */
    --sp-2xs: clamp(4px, 0.4vw, 8px);
    --sp-xs:  clamp(8px, 0.6vw, 12px);
    --sp-sm:  clamp(12px, 0.9vw, 16px);
    --sp-md_2:  clamp(16px, 1.3vw, 20px);
    --sp-md:  clamp(16px, 1.3vw, 24px);
    --sp-lg_2:  clamp(24px, 2vw, 32px);
    --sp-lg:  clamp(24px, 2vw, 40px);
    --sp-xl:  clamp(40px, 3vw, 64px);
    --sp-2xl: clamp(64px, 5vw, 100px);
    --sp-3xl: clamp(80px, 6vw, 120px);
    --sp-4xl: clamp(100px, 7.5vw, 144px); /* 🔹 최대 144px */
  
  }

.flex_col{flex-direction: column;}



/* 헤더 스타일 */
#header {width:100%; background:#eae5de; border-bottom:1px solid #dcd6ce; position: fixed; z-index: 9999;}
#header .inner {padding: 0 2vw; max-width:1920px;height:75px; display:flex; align-items:center; justify-content:space-between;box-sizing:border-box;}
#header .left_header_box {display:flex; align-items:center; gap:72px;}
#header .left_header_box .logo img {height:38px; display:block;}

/* GNB */
#header .left_header_box .gnb {display:flex; align-items:center;}
#header .left_header_box .gnb ul {height: 46px; display:flex; align-items:flex-end; gap:clamp(20px,2.8vw,36px);}
#header .left_header_box .gnb ul li {position:relative;}
#header .left_header_box .gnb ul li a {color:#1E1E1E; font-family:Pretendard; font-size:18px; font-style:normal; font-weight:600; line-height:130%; letter-spacing:0.18px; position:relative; display:inline-block; padding-bottom:4px; transition:color .3s;}
#header .left_header_box .gnb ul li a::after {content:""; position:absolute; left:0; top:-2px; width:100%; height:2px; background:#882f1b; opacity:0; transition:opacity .3s;}
#header .left_header_box .gnb ul li a:hover {color:#882f1b;}
#header .left_header_box .gnb ul li a:hover::after {opacity:1;}

/* TEL */
#header .tel_box a {
	display: flex;
	width: 225px;
	height: 50px;
	justify-content: center;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
	border-radius: 4px;
	background: #8F2D20;
	color: #FFF;
	font-family: Pretendard;
	font-size: var(--fs-lg);
	font-style: normal;
	font-weight: 500;
	line-height: 130%; /* 31.2px */
	letter-spacing: 0.24px;
}
#header .tel_box a:hover {background:#6d2413;}
#header .tel_box i {font-size:16px;}

/* MOBILE BTN */
#header .m_btn {display:none; flex-direction:column; gap:5px; cursor:pointer; margin: 0;}
#header .m_btn i {display:block; width:22px; height:2px; background:#222;}

/* RESPONSIVE */
@media (max-width:1024px){
  #header .gnb {display:none !important;}
  #header .tel_box {display:none;}
  #header .m_btn {display:flex;}
}


/* 푸터 */

footer{
	background: url('/img/footer_bg.png') center center / cover no-repeat;
	width: 100%;
	height: 282px;
	padding: 72px 0;
}

footer .inner{
	display: flex; justify-content: space-between; align-items: center;height: 100%;
}

footer .inner .logo_box{
	width: 247px;
	flex-shrink: 0;
}

footer .inner .left_box .logo_box img{width: 100%; height: 100%; object-fit: cover;}

footer .inner .left_box .txt{display: flex; gap: 18px; padding: 36px 0;}
footer .inner .left_box .txt>a{
	color: #FFF;
	text-align: center;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}

footer .inner .left_box .copy p{
	color: #888;
	text-align: center;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

footer .inner .right_box ul{display: flex; flex-direction: column; gap: 9px;}

footer .inner .right_box ul li{
	display: flex; gap: 18px;
}
footer .inner .right_box ul li>p{
	color: #FFF;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 130%; /* 20.8px */
}

@media(max-width:1024px){
	footer .inner{flex-direction: column;}
	footer .inner .left_box{display: flex; flex-direction: column; align-items: center;}
	footer .inner .right_box ul{display: flex; flex-direction: column;}

    footer .inner .right_box ul {
        display: flex;
        flex-direction: column;
        gap: 9px;
        width: 100%;
        align-items: center;
        margin: 20px 0;
    }

}



/* 상담 */

.consult_wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #2D1E19;
	box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.40);
	z-index: 101;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 110px;
  }

  #consultForm{width: 100%; max-width: 93.75%;}
  
  .consult_wrap .consult_box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: clamp(20px, 4vw, 40px);
  }
  
  /* 왼쪽 영역 */
  .consult_wrap .left_box {
	display: flex;
	align-items: center;
	gap: 36px;
	flex: 1 1 60%;
  }
  
  .consult_wrap .left_box .txt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #fff;
	font-family: Pretendard, sans-serif;
  }
  
  .consult_wrap .left_box .txt p {
	color: #FFF;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.16px;
	font-size:14px;
  }

  .consult_wrap .left_box .txt span {
	color: #FFF;
	font-family: Pretendard;
	font-size: var(--fs-2xl);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.38px;
	white-space: nowrap;
  }

  .consult_wrap .txt_02 {
	display: none;
	flex-direction: row;
	gap: 4px;
	color: #fff;
	font-family: Pretendard, sans-serif;
	align-items: center;
  }
  
  .consult_wrap .txt_02 p {
	color: #FFF;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.16px;
  }
  
  .consult_wrap .txt_02 span {
	color: #FFF;
	font-family: Pretendard;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.38px;
  }

  @media(max-width:768px){
	.txt_02{display: flex;}
  }
  
  /* 입력 영역 */
  .consult_wrap .input_wrap {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
  }
  
  .consult_wrap .input_box {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 33.3%;
  }
  
  .consult_wrap .input_box label {
	color: #FFF;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 130%; /* 20.8px */
	letter-spacing: 0.16px;
  }
  
  .consult_wrap .input_box input {
	width: 100%;
	height: 36px;
	border-radius: 4px;
	border: 1px solid rgba(234, 228, 220, 0.60);
	background: rgba(234, 228, 220, 0.20);
  }
  
  .consult_wrap .input_box input::placeholder {
	color: #999;
  }
  
  /* 구분선 */
  .consult_wrap .line {
	width: 1px;
	height: 63px;
	background: rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
  }
  
  /* 오른쪽 버튼 */
  .consult_wrap .right_box {
	display: flex;
	align-items: center;
	gap: 36px;
	flex: 1 1 40%;
	justify-content: center;
  }
  
  .consult_wrap .tel_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	padding: 0 40px;
	gap: 16px;
	border-radius: 5px;
	background: var(--pri-400, #f55057);
	transition: background 0.3s ease;
	border: none;
  }
  
  .consult_wrap .tel_btn:hover {
	background: #e14e4e;
  }
  
  .consult_wrap .tel_btn p {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
  }
  
  .consult_wrap .tel_btn img {
	width: 28px;
	height: 28px;
  }
  
  .consult_wrap  .inquiry_btn{
	display: flex;
	width: 200px;
	height: 50px;
	justify-content: center;
	align-items: center;
	gap: 9px;
	border-radius: 4px;
	background: #EAE4DC;
	border:none;
  }

  .consult_wrap  .inquiry_btn p{
	color: #1E1E1E;
	font-family: Pretendard;
	font-size: var(--fs-base);
	font-style: normal;
	font-weight: 600;
	line-height: 130%; /* 23.4px */
	letter-spacing: 0.18px;
  }

  .consult_wrap .inner{
	max-width: 1920px;
  }


  .consult_wrap .consult_checkbox{display: flex; gap: 9px; align-items: center;}

  .consult_wrap .consult_checkbox input[type=checkbox]{
	display: none;
  }

  .consult_wrap .consult_checkbox p{
	color: #FFF;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 130%; /* 20.8px */
	letter-spacing: 0.16px;
  }

  .consult_checkbox {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
  }
  
  .consult_checkbox input {
	display: none;
  }
  
  .checkmark {
	width: 25px;
	height: 25px;
	aspect-ratio: 1/1;
	border-radius: 4px;
	border: 1px solid rgba(234, 228, 220, 0.60);
	background: rgba(234, 228, 220, 0.20);
  }
  
  .consult_checkbox input:checked + .checkmark {
	background-color: #fff;
	border-color: #fff;
	transform: scale(1.05); /* 눌렀을 때 살짝 튀어나오는 효과 */
  }
  
  .consult_checkbox input:checked + .checkmark::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 8px;
    width: 7px;
    height: 14px;
    border: solid #2D1E19;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
  

  /* 반응형 */
@media (max-width: 1280px) {
	.consult_wrap .left_box .txt span {font-size: 24px;}
	.consult_wrap .tel_btn p {font-size: 18px;}
	.consult_wrap .inquiry_btn p {font-size: 16px;}
	.consult_wrap .line{display: none;}
	.consult_wrap .left_box{flex-direction: column; gap: 6px;}
	.consult_wrap .left_box .txt{flex-direction: row; align-items: center;}
	.consult_wrap .right_box{gap: 10px; justify-content: flex-start;}
  }
  
  @media (max-width: 1024px) {
	.consult_wrap .right_box{flex-direction: column;}
	.consult_wrap .inquiry_btn{width: 100%;}
  }
  
  @media (max-width: 768px) {
	.consult_wrap {height: auto; padding: 20px 0;}
	.consult_wrap .consult_box {
	  flex-direction: column;
	  align-items: center;
	  gap: 20px;
	}
	.consult_wrap .left_box {
	  flex-direction: column;
	  align-items: center;
	  gap: 8px;
	}
	.consult_wrap .left_box .txt span {font-size: 24px;}
	.consult_wrap .input_wrap {
	  gap: 12px;
	  flex-direction: row;
	  align-items: center;
	  gap: 12px;
	  width: 100%;
	  flex-wrap: wrap;
	}
	.consult_wrap .line {display: none;}

	.consult_wrap .left_box .txt{flex-direction: row; align-items: center; justify-content: center; gap: 5px;}
	.consult_wrap .input_box{width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 15px;}
	
	.consult_wrap .input_box{width: auto;}

	.consult_wrap .input_box:nth-child(3){width: 86%;}
	.consult_wrap .input_box:nth-child(3) input{flex: 1;}

	.consult_wrap .right_box{flex-direction: row; width: 100%;}
	.consult_wrap .consult_checkbox p{white-space: nowrap;}

	.consult_wrap .left_box .txt{display: none;}
	.consult_wrap .txt_02{display: flex;}
  }

  
  /* @media (max-width: 480px) {
	.consult_wrap .left_box .txt p {font-size: 14px;}
	.consult_wrap .left_box .txt span {font-size: 20px;}
	.consult_wrap .input_box label {font-size: 14px;}
	.consult_wrap .input_box input {width: 160px; height: 32px;}
	.consult_wrap .tel_btn, .consult_wrap .inquiry_btn {
	  width: 100%;
	  max-width: 280px;
	  height: 44px;
	}
	.consult_wrap .right_box {
	  flex-direction: column;
	  align-items: center;
	  gap: 10px;
	}

	.consult_wrap .input_wrap{
		flex-direction: row;
	}
  } */
  


  .input_box input::placeholder{padding: 0 5px;}