@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;}
.inner.full {width: 100%; max-width: 1920px;}

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

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

 * header *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#header {position: fixed; top: 0; left: 0; width: 100%; z-index: 99; background-color: #23618f; transition-property: background-color; padding-left: var(--p); box-sizing: border-box; --p: 60px; transition: 0.25s;}
#header:not(:hover).trans {background-color: transparent;}
#header .inner {height: 100px; align-items: center;}
/* gnb */
#header .gnb,
#header .gnb > ul,
#header .gnb > ul > li {height: inherit;}
#header .gnb {margin-left: auto;}
#header .gnb > ul {display: flex; font-family: var(--sub-font); color: #fff;}
#header .gnb > ul > li > a {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 18px; line-height: 1.55em; letter-spacing: -0.05em; padding: 0 var(--p); box-sizing: border-box;}
#header .gnb > ul > li:hover .depth02 {opacity: 1; visibility: visible;}
/* depth02 */
#header .gnb .depth02 {position: absolute; top: 100%; right: 0; background: #23618f url(/img/depth02_bg.jpg) no-repeat center right / contain; min-width: 225px; display: flex; gap: 25px; padding-left: 150px; padding-bottom: 85px; border-bottom-left-radius: 300px; opacity: 0; visibility: hidden; transition: 0.25s;}
#header .gnb .depth02 > li {min-width: 200px; position: relative; padding-top: 35px; box-sizing: border-box;}
#header .gnb .depth02 > li:hover::before {content: ''; position: absolute; width: 20px; height: 5px; background-color: #fff; top: 0; left: 0;}
#header .gnb .depth02 > li > a {font-weight: 700; font-size: 18px; line-height: 1.55em;}
/* depth03 */
#header .gnb .depth03 {margin-top: 25px;}
#header .gnb .depth03 a {font-size: 16px; line-height: 2.25em; color: #a5b8c7;}
#header .gnb .depth03 a:hover {color: #fff; text-decoration: underline; text-underline-offset: 5px;}
/* mbtn */
#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:#fff; transition:all 0.5s;}
#header .m_btn i:nth-of-type(2){width:84%;}

@media all and (max-width: 1500px) {
	#header {--p: 50px;}
}

@media all and (max-width: 1400px) {
	#header {--p: 45px;}
	#header .inner {position: static;}
	#header .gnb .depth02 {padding-left: 0; width: 100%; justify-content: center; box-sizing: border-box; border-radius: 0;}
	#header .gnb .depth02 > li {min-width: unset;}
}

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

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

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

@media all and (max-width: 1024px) {
	#header {padding: 0 var(--p);}
	#header .gnb {display: none;}
	#header .m_btn {display: block; margin-left: auto;}
}

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

 * header(mobile) *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.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: 30px 10px; box-sizing:border-box; }
#m_menu .top_box img {filter: invert(1);}
#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;}
#m_menu .gnb_box .depth02 li a {position:relative; display:block; padding:20px 20px; font-size:18px; color:#fff; letter-spacing:-0.04em; box-sizing:border-box; background-color: #23618f;}
#m_menu .gnb_box .depth03 li a {background-color: #5199cf; padding: 7px 20px;;}


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

 * Footer *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#footer {background-color: #1d1d1d; padding: 50px 0; box-sizing: border-box;}
#footer .inner {align-items: center; gap: 40px; justify-content: center;}
#footer .inner > .right {width: 50%; display: flex; justify-content: center; margin-left: auto;}
/* sns */
#footer .sns {display: flex; align-items: center; gap: 20px; margin-top: 55px;}
#footer .sns a {display: block; width: 28px; height: 28px; background: no-repeat center center / contain; filter: brightness(0) saturate(100%) invert(58%) sepia(14%) saturate(0%) hue-rotate(144deg) brightness(89%) contrast(98%);}
/* sns icon */
#footer .sns a.blog {background-image: url(/icon/blog.png);}
#footer .sns a.kakao {background-image: url(/icon/kakao.png);}
#footer .sns a.youtube {background-image: url(/icon/youtube.png); background-size: 27px auto;}
#footer .sns a.insta {background-image: url(/icon/insta.png); background-size: 24px auto;}
/* 주소 */
#footer .addr {font-weight: 300; font-size: 16px; line-height: 1.875em; color: #cad7e0;}
/* info & policty */
#footer .info_wrap {display: flex; margin-top: 40px; column-gap: 140px;}
#footer .info_wrap, 
#footer .info_wrap a {font-weight: 300; font-size: 16px; line-height: 1.875em; color: #717171; transition: 0.25s;}
#footer .info_wrap a:hover {color: #fff;}
/* copyright */
#footer .copyright {font-weight: 300; font-size: 14px; color: #414141; margin-top: 40px;}

@media all and (max-width: 767px) {
	#footer .inner {flex-wrap: wrap;}
	#footer .inner > .right {width: auto; display: block; margin: unset;}
	#footer .sns {justify-content: center; margin-top: 25px;}
}


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

 * Quick *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#quick {position: fixed; top: 50%; right: 40px; transform: translateY(-50%); box-sizing: border-box; z-index: 3;}
#quick li {cursor: pointer; text-align: center; width: 112px; aspect-ratio: 1/1; box-sizing: border-box; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid #dcdcdc;}
#quick li + li {margin-top: 14px;}
#quick li p {font-weight: 500; font-size: 18px; color: #23618f;}
#quick li i img {filter: brightness(0) saturate(100%) invert(24%) sepia(90%) saturate(863%) hue-rotate(174deg) brightness(94%) contrast(88%);}
#quick li:hover{background-color: #23618f; border-color: #23618f;}
#quick li:hover p{color: #fff;} 
#quick li a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box;}
#quick li.top_btn a {display: inline-flex; align-items:center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background-color: #23618f;}
#quick li.top_btn a::before {content: ''; display: block; width: 17px; height: 10px; background: url(/icon/chevron_down.png) no-repeat center center / contain; filter: invert(1); transform: rotate(180deg);} 

#quick li.top_btn{width: fit-content; background-color: transparent; border: none; cursor: auto; margin: 14px auto 0;}

@media all and (min-width: 1921px) {
	#quick {right: calc(calc(100% - 1920px) / 2);}
}

@media all and (max-width: 1024px) {
	#quick {padding: 10px;}
	#quick li + li {margin-top: 20px;}
}

@media all and (max-width: 767px) {
	#quick {top: unset; bottom: 0; right: 50%; transform: translateX(50%); width:100%; box-sizing: border-box; background-color: #fff; border-radius: 10px 10px 0 0; border-top: 1px solid #dcdcdc;}
	#quick ul {display: flex; align-items: center;}
	#quick li {width: 25%; aspect-ratio: auto; border-radius: 0; border: none; padding: 20px 0;}
	#quick li + li {margin-top: 0; border-left: 1px solid #dcdcdc;}
	#quick li.top_btn{display: none;}
}