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




/* ==========================================================================
	공통
========================================================================== */
.inner{width:100%; max-width:1100px; margin:0 auto;}

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

.lato{font-family:'Lato', sans-serif;}

/* ==========================================================================
	header
========================================================================== */
#header_blank{width:100%; height:152px;}
#header{position:absolute; width:100%; background:#fff; z-index:50; box-shadow:14px 0px 18px rgba(157,157,157,0.2)}
#header.fixed{position:fixed; top:-100px;}
#header.fixed .header_bot{}
#header .inner{position:relative;}
#header .header_top{position:relative; padding:40px 0 30px; text-align:center; border-bottom:1px solid #e2e2e2; box-sizing:border-box;}
#header .header_top .logo{margin:0;}
#header .header_top .logo a{display:inline-block;}
#header .header_top .logo img {max-height:30px; }
#header .header_top ul{position:absolute; top:50%; right:0; font-size:0; letter-spacing:-4px; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); z-index:1;}
#header .header_top ul li{display:inline-block; vertical-align:top; margin-right:20px;}
#header .header_top ul li:last-of-type{margin-right:0;}
#header .header_top ul li a{display:block;}
#header .header_top ul li a span{display:inline-block; vertical-align:middle; font-size:14px; color:#222222; letter-spacing:-0.01em; font-weight:500; margin-left:10px;}
#header .header_top ul li a i{display:inline-block; vertical-align:middle; height:24px; background-repeat:no-repeat; background-position:center; }
#header .header_top ul li a i.icon01{width:32px; background-image:url("/img/header_icon01.png");}
#header .header_top ul li a i.icon02{width:23px; background-image:url("/img/header_icon02.png");}
#header .header_top ul li a i.icon03{width:21px; background-image:url("/img/header_icon03.png");}
#header .header_top ul li a i.icon04{width:21px; background-image:url("/img/header_icon04.png");}
#header .header_top ul li a:hover i.icon01{background-image:url("/img/header_icon01_on.png");}
#header .header_top ul li a:hover i.icon02{background-image:url("/img/header_icon02_on.png");}
#header .header_top ul li a:hover i.icon03{background-image:url("/img/header_icon03_on.png");}
#header .header_top ul li a:hover i.icon04{background-image:url("/img/header_icon04_on.png");}

#header .header_bot{position:relative; font-size:0; letter-spacing:-4px;}
#header .header_bot .all_btn{display:inline-block; vertical-align:top; width:110px; box-sizing:border-box;}
#header .header_bot .all_btn.ham_btn {display:none; }
#header .header_bot .all_btn a{position:relative; display:inline-block; font-size:18px; color:#222222; letter-spacing:0.05em; font-weight:400; padding:14px 15px 14px 0;}
#header .header_bot .all_btn a span{display:inline-block; vertical-align:middle; width:14px; margin-right:10px;}
#header .header_bot .all_btn a span i{display:block; width:100%; height:2px; background:#54c285; margin:3px 0;}
#header .header_bot .all_btn.on a:before{content:''; position:absolute; bottom:0; left:0; display:block; width:100%; height:4px; background:#54c285;}
#header .header_bot .all_btn.on a {color:#54c285; font-weight:bold;}

#header .header_bot .gnb{display:inline-block; vertical-align:top; width:calc(100% - 400px); text-align:left; }
#header .header_bot .gnb > ul{font-size:0; letter-spacing:-4px;}
#header .header_bot .gnb > ul > li{position:relative; display:inline-block; vertical-align:top; box-sizing:border-box;}
#header .header_bot .gnb > ul > li > a{position:relative; display:block; font-size:16px; color:#222222; letter-spacing:-0.03em; font-weight:300; line-height:1.6; padding:12.5px 30px; transition:0.2s;}
#header .header_bot .gnb > ul > li > a:before{content:''; position:absolute; bottom:0; left:50%; width:0; height:4px; background:#54c285; transition:0.2s; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%)}
#header .header_bot .gnb > ul > li ul.depth02{text-align:left; position:absolute; left:0; display:none; width:250px; padding:0 5px; background:#fff; box-sizing:border-box; z-index:2; border-bottom-left-radius:5px; border-bottom-right-radius:5px; box-shadow:14px 0px 18px rgba(157,157,157,0.2)}
#header .header_bot .gnb > ul > li ul.depth02 > li{}
#header .header_bot .gnb > ul > li ul.depth02 > li + li{border-top:1px solid #e2e2e2;}
#header .header_bot .gnb > ul > li ul.depth02 > li > a{display:block; font-size:16px; color:#666; letter-spacing:-0.045em; font-weight:300; line-height:1.6; padding:10px 20px; box-sizing:border-box;}
#header .header_bot .gnb > ul > li:hover a{color:#54c285; font-weight:500;}
#header .header_bot .gnb > ul > li:hover a:before{width:100%;}
#header .header_bot .gnb > ul > li:hover ul.depth02{display:block;}
#header .header_bot .gnb > ul > li ul.depth02 > li > a:hover{color:#54c285;}

#header .header_bot .right_btn {position:relative; display:inline-block; vertical-align:middle; width:250px; text-align:right; }
#header .header_bot .right_btn a {position:relative; display:inline-block; vertical-align:middle; padding:11px 5px; font-size:16px; color:#666; letter-spacing:-0.045em; font-weight:300; line-height:1.6;}
#header .header_bot .right_btn a:before {content:''; position:absolute; bottom:0; left:0; display:none; width:100%; height:4px; background:#54c285;}
#header .header_bot .right_btn a.joininfo:hover {color:#54c285; font-weight:500;}
#header .header_bot .right_btn a.joininfo:hover:before {display:block;}
#header .header_bot .right_btn a.login_btn {width:76px; height:29px; padding:0; margin:10.5px 0; margin-left:60px; background-color:#54c285; box-sizing:border-box; text-align:center; color:#fff; font-size:12px; line-height:29px; border-radius:5px; letter-spacing:0.03em; }
#header .header_bot .right_btn a.my_member {position:relative; padding:10px 3px; margin-left:30px; font-size:14px; font-weight:500; color:#9d9d9d; letter-spacing:0.01em; }
#header .header_bot .right_btn a.my_member.on:before {content:''; z-index:10; position:absolute; left:0; top:calc(100% - 1px); width:100%; height:4px; background-color:#54c285; }
#header .header_bot .right_btn a.my_member.on:after{content:''; position:absolute; bottom:0; left:50%; width:100%; height:4px; background:#54c285; transition:0.2s; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%)}
#header .header_bot .right_btn a.my_member i {overflow:hidden; display:inline-block; vertical-align:middle; width:30px; height:30px; border-radius:50%; margin-right:5px;}
#header .header_bot .right_btn a.my_member i img {width:100%; height:100% }
#header .header_bot .right_btn a.my_member span { display:inline-block; vertical-align:middle; }
#header .header_bot .right_btn a.my_member span b{font-weight:inherit; color:#54c285;}
#header .header_bot .right_btn .member_popup {position:absolute; right:0; top:100%; display:none; width:290px; height:auto; border-top:1px solid #e2e2e2; background-color:#fff; border-radius:0 0 5px 5px; text-align:center; box-shadow:5px 5px 10px rgba(0,0,0,.1); }
#header .header_bot .right_btn .member_popup .top_btn {padding:30px 0; }
#header .header_bot .right_btn .member_popup .top_btn i {overflow:hidden; display:block; width:52px; height:52px; margin:10px auto; border-radius:50%;  cursor:pointer;}
#header .header_bot .right_btn .member_popup .top_btn i img {width:100%; }
#header .header_bot .right_btn .member_popup .top_btn p {font-size:16px; font-weight:500; color:#222222; letter-spacing:0.05em; }
#header .header_bot .right_btn .member_popup .top_btn span {display:block; font-size:14px; font-weight:300; color:#9f9f9f; letter-spacing:0.05em; }
#header .header_bot .right_btn .member_popup .member_link {width:95%; margin:0 auto; padding:5px 0; border-top:1px solid #e2e2e2; font-size:0; letter-spacing:-4px; }
#header .header_bot .right_btn .member_popup .member_link a {display:inline-block; vertical-align:middle; width:50%; height:40px; padding:0; font-size:14px; font-weight:300; color:#222222; letter-spacing:0; line-height:40px; box-sizing:border-box; }
#header .header_bot .right_btn .member_popup .member_link a:last-of-type {border-left:1px solid #e2e2e2; }



@media all and (max-width:1100px){
	#header .header_bot .all_btn {width:100px; }
	#header .header_bot .gnb > ul > li > a{padding:11px 20px;}
}
@media all and (max-width:1000px){
	#header .header_bot .all_btn {display:none;}
	#header .header_bot .all_btn.ham_btn {display:inline-block;}
	#header .header_bot .gnb{display:none;}
	#header .header_bot .right_btn {float:right; }
}

/* m_menu */
.m_menu{position:absolute; top:100%; left:50%; max-width:1100px; display:none; width:100%; border-top:1px solid #e2e2e2; box-sizing:border-box; z-index:10; border-bottom-left-radius:5px; border-bottom-right-radius:5px; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%); }
.m_menu .gnb{width:200px; background:#fff; padding:0; border-radius:0 0 5px 5px; box-sizing:border-box; overflow:hidden; box-shadow:14px 18px 18px rgba(157,157,157,0.2)}
.m_menu .gnb > ul{font-size:0; letter-spacing:-4px; text-align:left; overflow:hidden;}
.m_menu .gnb > ul > li{display:inline-block; vertical-align:top; width:100%; padding:0; box-sizing:border-box; position:relative;}
.m_menu .gnb > ul > li:not(:last-child):before{display:none; content:''; position:absolute; right:0; top:0; width:1px; height:1000%; background: #e2e2e2;}
.m_menu .gnb > ul > li > a{position:relative; display:inline-block; font-size:16px; color:#222222; padding:10px 0; letter-spacing:0.005em; font-weight:500;}
.m_menu .gnb > ul > li:hover > a {color:#54c285; }
.m_menu .gnb > ul > li > a.login_btn{display:none;}
.m_menu .gnb > ul > li > a.m_hide{display:none}
/*.m_menu .gnb > ul > li > a:before{content:'>'; position:absolute; top:0; left:0; display:block; }*/
.m_menu .gnb > ul > li ul.depth02{padding:0;}
.m_menu .gnb > ul > li ul.depth02 li{}
.m_menu .gnb > ul > li ul.depth02 li a{display:inline-block; font-size:16px; color:#222; letter-spacing:0.005em; padding:10px 0; font-weight:500;}
.m_menu .gnb > ul > li ul.depth02 li:hover a {color:#54c285; }
.m_menu .gnb > ul  li a{display:block !Important; padding:10px !important; border-bottom:1px solid #e2e2e2; display:block;}
.m_menu .gnb .my_member {display:none; }
.m_menu .gnb .member_popup {display:none; }

@media all and (max-width:1000px){
	.m_menu{display:none; padding:20px; background:#fff;}
	.m_menu .gnb{width:100%; padding:0;}
	.m_menu .gnb > ul > li{width:100%; }
	.m_menu .gnb > ul > li:before {display:none; }
}




/* ==========================================================================
	footer
========================================================================== */
#footer{background-color:#000000; }
#footer .footer_top{padding:60px 0 120px; font-size:0; letter-spacing:-4px;}
#footer .footer_top .logo{display:inline-block; vertical-align:top; width:140px; padding-top:15px; box-sizing:border-box;}
#footer .footer_top .logo a{display:inline-block;}
#footer .footer_top .logo a img {max-height:44px; }
#footer .footer_top .logo a img.login{display:none}
#footer .footer_top .center_box{display:inline-block; vertical-align:top; width:calc(100% - 420px); padding-top:15px; }
#footer .footer_top .right_box{display:inline-block; vertical-align:top; width:280px; text-align:right; }
#footer .footer_top .fnb {font-size:0; letter-spacing:-4px; }
#footer .footer_top .fnb li {display:inline-block; vertical-align:top; margin-right:50px; margin-bottom:5px; }
#footer .footer_top .fnb li:last-of-type {margin-right:0; }
#footer .footer_top .fnb li a {font-size:13px; font-weight:300; color:#dddddd; letter-spacing:0.01em; }
#footer .footer_top .add {margin-top:30px; font-size:13px; font-weight:300; color:#ddd; letter-spacing:0.01em; line-height:1.9; }
#footer .footer_top h5 {margin:0; font-size:34px; color:#dddddd; letter-spacing:0.01em; font-weight:normal; }
#footer .footer_top h5 img {vertical-align:middle; margin-top:-4px; margin-right:10px; }
#footer .footer_top h5 img.login{display:none;}

#wrap.login{background-color:#f5f5f5;}
#wrap.login #footer{background-color:#f5f5f5;}
#wrap.login #footer .footer_top{padding:15px 0 120px; border-top:1px solid #dddddd}
#wrap.login #footer .footer_top .logo a img{display:none}
#wrap.login #footer .footer_top .logo a img.login{display:block}
#wrap.login #footer .footer_top h5 img {display:none}
#wrap.login #footer .footer_top h5 img.login{display:inline-block;}
#wrap.login #footer .footer_top .fnb li a {color:#ccc; }
#wrap.login #footer .footer_top .add{color:#ccc}
#wrap.login #footer .footer_top h5{color:#ccc;}

@media all and (max-width:800px){
	#footer .footer_top {padding:40px 0 80px; }
	#footer .footer_top .logo {width:100%; padding-top:0; }
	#footer .footer_top .center_box {width:100%; padding:50px 0; }
	#footer .footer_top .right_box {width:100%; padding-top:0; text-align:left; }
	#footer .footer_top .fnb li {margin-right:2%; }
}




/* ==========================================================================
	footer
========================================================================== */
.page_common {padding:75px 0; text-align:center; box-sizing:border-box; background:url('/img/page_common_bg.jpg') no-repeat center center / cover; }
.page_common h5 {margin:0; font-size:25px; font-weight:300; color:#ffffff; letter-spacing:-0.02em; word-break:keep-all; }
.page_common h5 strong {display:inline-block; color:#54c285; }
.page_common h5 b {position:relative; color:#54c285; }
.page_common h5 b:before {content:''; position:absolute; left:calc(50% - 2px); top:-3px; width:4px; height:4px; background-color:#54c285; border-radius:50%; }
.page_common a {position:relative; display:inline-block; width:110px; height:40px; margin:35px 10px 0; border:1px solid #54c285; box-sizing:border-box; text-align:center; font-size:16px; font-weight:300; color:#ffffff; letter-spacing:-0.02em; line-height:38px; }
.page_common a:first-of-type {width: 150px;}
.page_common a:before {content:''; position:absolute; right:2px; bottom:2px; width:8px; height:8px; border-bottom:4px solid #54c285; border-right:4px solid #54c285; border-left:4px solid transparent; border-top:4px solid transparent; box-sizing:border-box; }
.page_common a:hover{background:rgba(4, 49, 24, 0.6);}

@media all and (max-width:800px){
	.page_common {padding:40px; }
	.page_common h5 {line-height:2; }
}