@charset "utf-8";/* 프로그램리스트 모바일 버전 */
.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; } 



.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; } 
 }

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * color *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
:root {
	--main-color: #215170;
	--point-color : #00c3da;
	--header: 90px;
}
.wrap{overflow: hidden;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * inner *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.inner{width:100%; max-width:1400px; margin:0 auto;}
.inner.w1920 {max-width: 1920px; padding: 0 60px; box-sizing: border-box;}

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

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * header *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#header {position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; --trans: 0.25s; z-index: 100; border-bottom: 1px solid #e1e1e1;}
#header .inner {display: flex; align-items: center; position: relative; height: var(--header);}
.header_blank {height: 90px;}
/* logo */
#header .logo {margin-right: auto;}
#header .logo a {display: block; width: 185px; height: 28px; background: url(/img/h_logo_active.png) no-repeat center center / contain;}
/* gnb (depth01) */
#header .gnb {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); --p: 40px;}
#header .gnb > ul {display: flex; align-items: center;}
#header .gnb > ul > li > a {display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 20px; line-height: 1.7em; padding: 0 var(--p); height: var(--header); position: relative; transition: var(--trans); white-space: nowrap;}
#header .gnb > ul > li > a::before {content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; transform: translateX(-50%); background-color: var(--main-color); transition: var(--trans);}

#header .gnb > ul > li.hide{display: none;}
/* gnb (depth01 : hover) */
#header .gnb > ul > li > a:hover {color: var(--main-color);}
#header .gnb > ul > li > a:hover::before {width: 100%;}
/* user */
#header .user {--p: 20px;}
#header .user > ul {display: flex; align-items: center;}
#header .user > ul > li + li {padding-left: var(--p); position: relative;}
#header .user > ul > li + li::before {content: ''; position: absolute; top: 50%; left: calc(var(--p) / 2); transform: translate(-50%, -50%); width: 1px; height: 10px; background-color: #aaa;}
#header .user > ul > li > a {font-size: 17px; line-height: 1.6em; color: #999; transition: var(--trans);}
#header .user > ul > li > a:hover {color: #222;}
#header .h_login {position: relative; padding-left: 20px; box-sizing: border-box;}
#header .h_login::after {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 13px; height: 20px; background: url('/img/h_login_active.png') no-repeat center / cover;}
#header .user > ul > li.h_join {position: relative; padding-left: 40px; box-sizing: border-box;}
#header .h_join::after {content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: url('/img/h_join_active.png') no-repeat center / cover;}
/* mobile btn */
#header .m_btn {display:none; width:24px; text-align:right; cursor:pointer; }
#header .m_btn i{display:inline-block; width:100%; height:2px; margin:3px 0; background:#222; transition:all 0.5s;}
/* 메인 헤더 */
.main .header_blank {display: none;}
#header.trans:not(:hover) {background: transparent; border-color: rgba(255, 255, 255, 0.25);}
#header.trans:not(:hover) .logo a {background-image: url(/img/h_logo.png);}
#header.trans:not(:hover) .h_login::after {background-image: url(/img/h_login.png);}
#header.trans:not(:hover) .h_join::after {background-image: url(/img/h_join.png);}
#header.trans:not(:hover) .gnb > ul > li > a {color: #fff;}
#header.trans:not(:hover) .user > ul > li > a {color: #fff;}
#header.trans:not(:hover) .user > ul > li + li::before {background-color: #fff;}
#header.trans:not(:hover) .m_btn i {background-color: #fff;}

@media all and (max-width: 1300px) {
	#header .gnb {--p:35px;}
}

@media all and (max-width: 1200px) {
	#header .gnb {--p:25px;}
}

@media all and (max-width: 1100px) {
	#header .gnb > ul > li > a {font-size: 18px;}
}

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

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * mobile header *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.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; height: 90px; display: flex; align-items: center;}
#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:var(--main-color); 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.hide{display: none;}
#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:var(--main-color); }
#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; }


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Footer *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#footer {background-color: #222; padding: 80px 0 100px; box-sizing: border-box;}
#footer .inner {gap: 20px; justify-content: space-between;}
#footer .inner > * {flex-shrink: 0;}
#footer .center {max-width: 610px; flex-shrink: 1;}
/* btns */
#footer .btns {display: flex; gap: 10px;}
#footer .btns a {font-size: 15px; line-height: 1.6em; color: #ccc; background-color: #333; padding: 5px 15px; box-sizing: border-box; border-radius: 50px; transition: 0.25s;}
/* btns (hover) */
#footer .btns a:hover {background-color: #fff; color: #222;}
/* info */
#footer .info {display: flex; column-gap: 20px; flex-wrap: wrap; font-size: 16px; line-height: 1.875em; color: #ccc; margin-top: 15px;}
/* copyright */
#footer .copyright {font-size: 16px; line-height: 1.875em; color: #888;}
/* contact */
#footer .contact h5 {font-weight: 600; font-size: 18px; line-height: 1.55em; color: #888; margin-bottom: 20px;}
#footer .contact p {font-weight: 600; font-size: 36px; line-height: 1em; color: #fff;}

@media all and (max-width: 1024px) {
	#footer {text-align: center;}
	#footer .inner {flex-wrap: wrap; row-gap: 40px;}
	#footer .inner > * {width: 100%;}
	#footer .center {max-width: unset; order: 1;}
	#footer .btns, 
	#footer .info {justify-content: center;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * consult *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#quick_consult {background-color: var(--main-color); padding: 60px 0; box-sizing: border-box; color: #fff;}
#quick_consult .inner {align-items: center; --gap: 60px; gap: var(--gap);}
#quick_consult .inner > * {flex-shrink: 0;}
#quick_consult .apply_wrap {display: flex; gap: var(--gap); align-items: center;}
/* title */
#quick_consult .tit {font-weight: 700; font-size: 24px; line-height: 1.4em;}
/* input */
#quick_consult .input_wrap {display: flex; flex-shrink: 1; flex: 1; gap: 10px;}
#quick_consult .input_wrap input.type01 {width: calc(50% - 5px);}
#quick_consult .input_wrap .name {max-width: 235px;}
#quick_consult .input_wrap .phone {max-width: 410px;}
/* label */
#quick_consult label > * {vertical-align: middle;}
#quick_consult label input[type=checkbox] {width: 20px; height: 20px; border-radius: 2px;}
#quick_consult label span {font-size: 18px; line-height: 1.8em;}
#quick_consult label span a {font-size: inherit; line-height: inherit; color: rgba(255, 255, 255, 0.5); transition: 0.25s;}
#quick_consult label span a:hover {color: #fff;}
/* btn */
#quick_consult .apply_btn {display: flex; align-items: center; justify-content: center; width: 220px; height: 60px; border-radius: 8px; background-color: #fff; font-weight: 700; font-size: 18px; line-height: 1.8em; color: #222;}

@media all and (max-width: 1200px) {
	#quick_consult .inner {--gap: 30px;}
	#quick_consult .apply_btn {width: 110px;}
}

@media all and (max-width: 1024px) {
	#quick_consult {padding: 20px;}
	#quick_consult .apply_btn {font-size: 14px; width: auto; padding: 0 10px; box-sizing: border-box; height: 40px;}
	#quick_consult label span {font-size: 14px;}
	#quick_consult .input_wrap input.type01 { font-size: 14px; height: 40px; padding: 0 10px;}
}

@media all and (max-width: 768px) {
	#quick_consult .inner {flex-wrap: wrap; row-gap: 10px;}
	#quick_consult .apply_wrap {width: 100%; justify-content: center;}
}

/* quick */
a.f_quick_btn {
	position: fixed;
	z-index: 99;
	bottom: 5%;
	right: 5%;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #18364a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	letter-spacing: -0.025em;
	font-weight: 600;
	color: #fff;
	box-shadow: 8px 0 25px rgba(24, 54, 74, 0.25);
}

@media all and (max-width: 1024px) {
	a.f_quick_btn {
		width: 60px;
		height: 60px;
		font-size: 14px;
	}
}
/* END quick */