@charset "utf-8";

/*------------------------------------*\
	RESET
	- 스타일 초기화

	https://andy-bell.co.uk/a-modern-css-reset/
\*------------------------------------*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
  color:inherit; 
}

/* Make images easier to work with */
img,
picture {
	max-width:100%;
	vertical-align:top;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

caption,
legend {
	display:none;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* +++ Custom reset style */
table {
    border-collapse: collapse;
    width: 100%;
}


/*------------------------------------*\
	COMMON
	- 스타일 초기화

	https://andy-bell.co.uk/a-modern-css-reset/
\*------------------------------------*/

:root {
	--font-set: "Pretendard", sans-serif;
	--color-default: #333;
	--color-gray: #555;
	--color-gray-2: #888;
	--color-active: #050083; /* 남색 */
	--color-active-2: #587d00; /* 녹색 */
	--color-primary: #E93C38;
	--fw-thin : 200;
	--fw-regaular: 400;
	--fw-medium: 600;
	--fw-bold: 700;
	--letter-spacing: -0.05em;
	--letter-spacing-1: -1px;
		
 --txt-heading : 18px; 
 --txt-body-1 : 15px;
 --txt-body-2 : 14px;
 --txt-body-3 : 13px;
 --txt-caption : 12px;
 
 --color-center : #3C76FF;
 --bg-center : #E8EFFF;
 --color-classroom : #10B341;
 --bg-classroom : #E2F6E8;
 --color-office : #7395AB;
 --bg-office : #E7EFF4;
 
 --bg-primary : #E93C38;
 
 --color-main : #1c1c1c;
 --color-gray-1 : #555;
 --color-gray-2 : #888;
 
 --box-shadow : 0px 8px 8px 0px #0000001A;
 
}

	.c_primary {color:var(--color-primary);}
body {font-size: 16px; font-weight: 500; line-height: 1.4;}



body {font-family: var(--font-default); color:var(--color-default); font-size:16px; line-height:1.5;  -webkit-text-size-adjust:none;}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {color:inherit; font-weight:700;}
h3 {margin-bottom:0;}

em {font-style:normal;}
button {color:var(--font-default); border:none;	background:transparent;	cursor: pointer; padding:0;}
picture {	display:block;}
img, video {max-width:100%; vertical-align:top;}

object, svg {position: absolute;height:100%;}

::placeholder {color:#B8BAC1;}

a:focus {outline:none;}


ul {margin-left:0; padding:0;}

#wrap {position:relative; max-width:768px; margin:0 auto;}
header {position:fixed; top:0; left:50%; width:100%; max-width:768px; height:55px; background:#fff; z-index:11; transform:translateX(-50%); display:flex; justify-content:flex-end; align-items:center; } 
	header.shadow_on::before {content:''; position:absolute; top:0; left:50%; width:100vw; height:100%; transform:translateX(-50%); background:#fff; z-index:-1; box-shadow:0 0 6px rgba(0,0,0,0.2);}
	body {padding-top:55px;}
	header h1 {margin-left:15px; margin-right:auto; }
	header h1 a img { width:95px; }
	header a {display:flex;  }
	.htitle {display:none; text-align:center;background:#EFF2F9;color:#303030;height:40px;line-height:40px;font-size:18px;font-weight:500;}
	/* 지국찾기 */
select.select_round {background:#F3F6FB; border-radius:10px; height:36px; padding: 0 40px 0 12px; border:none; }
.form_wrap {display:flex; gap:8px; padding:12px 16px;}
.form_wrap select:first-child {width:45%;}
.form_wrap select:last-child {width:55%;}

.view_branch_wrap {position:relative;}
.filter_wrap {position:absolute; left:0; top:0; z-index:5; padding:12px; display:fixed; gap:4px; }
.filter_wrap button {font-size: 16px; font-weight: 500; color:#5D5F6D; border-radius:50px; background:#fff; border:none; border:1px solid #E9EBF1; padding:6px 12px; box-shadow: 0px 8px 11px -4px #2D36430A, 0px 20px 24px -4px #2D36430A; }
.filter_wrap button.active {background:#2E2E2E; color:#fff; border-color:#2E2E2E; }

@media screen and (max-width : 500px) {
	.filter_wrap button {font-size: 13px;}
}

.customoverlay { position: relative; bottom: 40px; left: 50%; transform: translateX(-35%); box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 1;}
.customoverlay .title {display: block; text-align: center; background: #fff; padding: 5px 10px; font-size: 14px; font-weight: bold; }

.view_branch_wrap .view_list {padding-top: 49px;}
.view_branch_wrap .view_list li {border-bottom: 1px solid #ccc; padding:24px 20px;}


	
/* 텍스트 */
.heading {font-size: 18px; font-weight: 700; }
.body-1 {font-size: 15px;}
.body-1.m {font-weight: 400;}
.body-2 {font-size: 14px;}
.body-3 {font-size: 13px;}
.caption {font-size: 12px;}

/* 입력폼 */
.frm-select {background:#fff url("../img/icon-select-arrow.svg") no-repeat calc(100% - 12px); border-radius:6px; padding:0 40px 0 12px; border:1px solid #DDDDDD; color:var(--color-main); height:36px; -webkit-appearance: none; transition:0.2s;}
.frm-select:focus {background-image: url("../img/icon-select-arrow-up.svg");}

/* 버튼 */
button {background:none; border:none; }
.button {background:#fff; color:var(--color-main); font-size: var(--txt-body-1); font-weight: 600; display:inline-flex; gap:4px; padding:0 19px; height:45px; box-sizing:border-box; align-items:center; justify-content:center; border:1px solid #DDDDDD; border-radius:8px; min-width:170px; transition: background 0.2s; box-shadow: var(--box-shadow); } 
.button.primary {background:var(--color-primary); color:#fff; border:none;}
.button:hover {background:#f3f3f3;}
.button.primary:hover {background:#cf3531;}
.btns { display: flex; justify-content: flex-end; align-items: center; padding: 0 16px 8px 0;}
.button-location {display:inline-flex; line-height: 18px; font-size: 13px; font-weight: 500; padding: 0;}

/* 필터 */
.filters {display:flex; gap:5px; align-items:center; padding-left: 16px;}
.filters a { vertical-align: top; display:inline-flex; gap:4px; align-items:center; justify-content:center; height:30px; border:1px solid #ddd; padding:0 12px 0 10px; border-radius: 50px; color:var(--color-main); box-sizing:border-box; font-size: var(--txt-body-2); transition: background 0.2s;}
.filters a:hover {background:#f3f3f3; }
.filters a.active {color:#fff; background:#333333; border:none; }
.filters a:not(#all)::before {content:""; display: inline-block; width:20px; height:20px; background-position: center; background-size: cover; }
.filters a.center::before {background-image: url('../img/icon-center.svg');}
.filters a.center.active::before {background-image: url('../img/icon-center-white.svg');}
.filters a.classroom::before {background-image: url('../img/icon-classroom.svg');}
.filters a.classroom.active::before {background-image: url('../img/icon-classroom-white.svg');}
.filters a.office::before {background-image: url('../img/icon-office.svg');}
.filters a.office.active::before {background-image: url('../img/icon-office-white.svg');}

/* 태그 */
.lbl-tag { font-size: var(--txt-caption); display: inline-flex; align-items:center; padding:0 6px; height:21px; border-radius:4px; }
[data-type="center"] .lbl-tag {background:var(--bg-center); color:var(--color-center);}
[data-type="room"] .lbl-tag {background:var(--bg-classroom); color:var(--color-classroom);}
[data-type="office"] .lbl-tag {background:var(--bg-office); color:var(--color-office);}




/* 해더 */
body {background:#f5f5f5;}
#wrap {background:#fff; min-height:calc(100vh - 55px); }
header {display: block; background:#fff; height: auto; box-shadow: var(--box-shadow); }
.main_header {height: 55px; display: flex; align-items: center; justify-content:space-between;}



/* 공통 */
main {padding-top: 175px; }
.toast_noti { position:fixed; bottom:100px; left:50%; transform:translate(-50%, 20px); background:rgba(0,0,0,0.8); border-radius:10px; color:#fff; text-align: center; padding:15px 20px; max-width:500px; opacity:0; visibility:hidden;  transition:1s;}
.toast_noti.show {opacity:1; visibility:visible; transform:translate(-50%, 0);}

/* 지국찾기 */
select.select_round {background:#F3F6FB; border-radius:10px; height:36px; padding: 0 40px 0 12px; border:none; }
.form_wrap {display:flex; gap:8px; padding:12px 16px;}
.form_wrap select:first-child {width:55%;}
.form_wrap select:last-child {width:45%;}
.view_branch_wrap {position:relative; padding-bottom: 20px;}
.customoverlay { position: relative; bottom: 40px; left: 50%; transform: translateX(-35%); box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 1;}
.customoverlay .title {display: block; text-align: center; background: #fff; padding: 5px 10px; font-size: 14px; font-weight: bold; }
.view_branch_wrap .view_list {padding-top: 49px;}
.view_branch_wrap .view_list li {border-bottom: 1px solid #ccc; padding:24px 20px;}



/* 리스트 */
.list:has([data-type]){border-bottom: 1px solid #ddd; }
.list li {font-size: 16px; padding:24px 20px 12px 20px; display:flex; position:relative;}
.list_info {width:calc(100% - 80px); }
.list_action {width:80px; display:flex; flex-direction:column; align-items:flex-end; justify-content: space-between;     padding-top: 20px; padding-bottom: 8px;}

.list li:not([data-type]) {text-align: center; height: calc(100vh - 300px); box-sizing:border-box; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:20px; }
/* 결과없을때 */
.list li:not([data-type]) p {color:var(--color-gray-2); font-size: var(--txt-body-2); }
.list [data-type] {border-top: 1px solid #ddd; }
.list li h4 {font-size: var(--txt-body-1); font-weight: 600; margin:8px 0;}
.list li p {display:flex; align-items:flex-start; font-size: var(--txt-body-3); color:var(--color-gray-1); margin:8px 0; word-break: keep-all;}

.btn-toggle {font-size: var(--txt-body-3); color:var(--color-gray-1); position:relative; display: inline-flex; padding: 0; align-items: center;}
.btn-toggle::before {content:"위치보기";}
.show .btn-toggle::before {content:"접기";}
.btn-toggle::after {content:""; display: inline-block; width:18px; height:18px; background:url("../img/icon-arrow-down.svg") no-repeat center / cover; }

.list .map_area {height:0; opacity:0; width:calc(100% - 40px); margin:0 auto; background:#ccc; border-radius:8px; border:1px solid rgba(0,0,0,0.1); position:absolute; left:50%; transform:translateX(-50%); bottom: 20px; overflow:hidden;}
.map_wrap {height:100%; }
.list [data-type].show {padding-bottom: 250px;}
.list [data-type].show .map_area {height:220px; opacity:1;}
.list [data-type].show .btn-toggle::after {transform:scale(-1); }

.map_area button {width : 30px; height:30px; background:url("../img/btn-full.svg") no-repeat center / cover; display: inline-block; position:absolute; bottom:8px; right:8px; z-index: 2;}
.map_area::before {content:""; width:100%; position:absolute; left: 0; top: 0; right: 0; height:200px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0) 100%); z-index:2; display: none;}
.map_area h3 {display: none; position: absolute; left: 16px; top: 44px;  z-index: 2; gap:4px;}
.map_area h3 a {display:flex; align-items:center; gap:5px; font-size: var(--txt-heading); font-weight: 700; color:#fff;}

.map_area h3 a::after {content:""; width:24px; height:24px; background:url('../img/btn-call.svg') no-repeat center / cover; }
.map_area .btn_wrap {display: none; position: absolute; bottom: 16px; left: 16px; right:16px; z-index: 2; width: calc(100% - 32px); gap: 4px; justify-content:space-between;}
.map_area .btn_wrap a {width:100%;  min-width:initial; }


.list [data-type].show .map_area:has(.show_full) {position:fixed; left: 0; right: 0; bottom: 0; top: 0; width:100%; height:100%; transform: none; z-index: 50; border-radius:0; background:#fff; border:none;}

.list [data-type].show .map_area:has(.show_full) button {background-image:url("../img/btn-close.svg"); bottom:auto; top:44px; right:16px; }
.list [data-type].show .map_area:has(.show_full)::before {display: block;}
.list [data-type].show .map_area:has(.show_full) h3 {display:flex; }
.list [data-type].show .map_area:has(.show_full) .btn_wrap {display:flex;}


body:has(.show_full) {overflow:hidden;}
@media screen and (max-width : 380px) {
	.map_area .btn_wrap a {font-size: 13px;}
}

/* 상담완료 */
.counsel_complete_wrap {width:auto; padding:27px 20px 54px; text-align: center; box-sizing:border-box; min-height:calc(100lvh - 250px); display:flex; justify-content:center; align-items: center;}
.counsel_complete_wrap .info_text { padding-bottom: 34px; width:100%; }
.counsel_complete_wrap .info_text i {display:inline-flex;height:18px;  }

.counsel_complete_wrap .info_text h3 {color:#000; margin:8px 0 5px; font-size: 16px; line-height: 1; font-weight: 600;}
.counsel_complete_wrap .info_text p {color:#343434; font-size: 14px; line-height: 1; font-weight: 500;}


/* 레이어팝업 - 무료상담신청 */
.counsel_layer_bg {opacity:1;}
.counsel_layer {display:none; position:fixed; top:50% !important; left:50% !important; transform:translate(-50%, -50%) !important; z-index:2003 !important;  }
/* .pop_layer {height:890px !important;} */
.pop_layer {height:auto;}



@media screen and (max-height : 900px) {
	.pop_rnwl {height:90vh; }
	.pop_rnwl form {height:100%;}
	.pop_rnwl .homepage {height: calc(100% - 60px); overflow-y:scroll;}
}


@media (max-width: 767px){
/* 무료상담신청 */
	
	.pop_layer {width:100%; height:100% !important;; }
	.pop_rnwl { width:100%; height:100% !important; margin:0; border-radius: 0 !important;		padding:25px 20px !important;	overflow-y:scroll; max-height:initial;}
	.pop_rnwl .info_wrap li {flex-wrap:wrap;}
	.pop_rnwl .info_wrap li .ct,
	.pop_rnwl .info_wrap li .tt {width:100%; position:relative;}
	.pop_rnwl input[type="text"], 
	.pop_rnwl input[type="tel"], 
	.pop_rnwl select, 
	.pop_rnwl textarea {max-width:initial;}
	.pop_rnwl .info_wrap li .tt {padding-top:5px;}
	.pop_rnwl input[type="text"][name="txtZip1"] { width:calc(100% - 136px); margin-right:2px;}
	.pop_rnwl select {width: 100% !important; background:#fff; color:#555;}
	.pop_rnwl .info_desc {color:#A7B5BC; position:absolute; bottom:102%; right:0;}
	.pop_rnwl .lbl_radio {width:100%; display: block; margin-top:8px;}
	.pop_rnwl .toggle_agree {padding-right:0; padding-top:2px;}
	.pop_rnwl .toggle_agree::after {background:url("/public/images/common/ico_arrow.svg") no-repeat 50% 36% / 20px; margin-left: 3px;}
	.pop_rnwl .agree_wrap {margin-bottom:40px; padding:0;}
	.pop_rnwl .agree_wrap label {font-size: 14px;}
	.scrollBoxWrap {height:auto;}
	.pop_rnwl .scrollBox p, 
	.pop_rnwl .scrollBox ul li, 
	.pop_rnwl .scrollBox h5 {line-height: 1.2;}
	.pop_close {right:20px;}
	.pop_rnwl .tit {margin-bottom: 30px;}

	.agree_wrap {margin-top:13px; padding:20px 0 30px; margin-bottom:0;}
	.agree_wrap > p {font-size:18px;}
	.agree_wrap .scrollBox {font-size:12px; padding:12px;}
	.agree_wrap .scrollBox h5 {font-size:14px;}

	/* 무료상담신청 완료 */
	.section_confirm .container {max-width:90%;}
	.section_confirm .title_01 .title {font-size:30px;}
	.section_confirm .title_01 p {font-size:20px;}

	/* 레이어팝업 - 공통 */
	.layer_header {padding:16px 20px;}
	.layer_header .layer_title {font-size:20px;}
	.layer_header .btn_close {top:50%; right:16px; width:20px; height:20px; transform:translateY(-50%); background-size:20px;}
	.layer_body {height:calc(100% - 62px); padding-top:10px; padding-bottom:30px;}

	.btn_blue_lg {max-width:198px; font-size:16px; line-height:40px;}

}