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


body{overflow-x:hidden;}
body.ofh{overflow:hidden;}
#wrap{overflow:hidden;}
.inner{width:100%; max-width:1400px; margin:0 auto;}
.inner1200{width:100%; max-width:1200px; margin:0 auto;}
.inner1100{width:100%; max-width:1100px; margin:0 auto;}
br.pc_only{}
br.m_only{display:none}
.bak_gray{background:#fafafa}

@media all and (max-width:1400px){
	.inner{width:93.75%;}
	.inner1200{width:93.75%;}
	.inner1100{width:93.75%;}
	br.pc_only{display:none;}
}
@media all and (max-width:1000px){
	br.m_only{display:block;}
}

/* header */
#header{background:none; border-bottom:0px solid #f0f0f0; z-index:99; position: fixed; top: 0; left: 0; width: 100%; transition: background .2s ease-in-out; }
#header .inner{position:relative; width: 100% !important; max-width: 100% !important; }
#header h1.logo{margin:0; position:absolute; left:5vw; top:28px; width: 185px; height: 36px; background: url('../img/logo-b.png?ver=1') center no-repeat; }
#header h1.logo a { display: block; width: 100%; height: 100%; }
#header .gnb{max-width:65vw; margin:0 0 0 20vw; position:relative;}
#header .gnb > ul{font-size:0;}
#header .gnb > ul > li{display:inline-block; vertical-align:top; }
#header .gnb > ul > li:last-of-type{margin-right:0;}
#header .gnb > ul > li > a{display:block; font-size:17px; font-weight:200; letter-spacing:-0.1em; color:#000; padding:32px 0.8vw; position:relative;}

#header:hover, #header.active { background: rgba(255,255,255,0.8); }

#header .gnb .menu{display:none; position:absolute; left:0; top:90px; width:100%; padding:30px 0 15px; font-size:0;}
#header .gnb > ul > li.on > a:before {content:''; position:absolute; bottom:0; width:100%; height:2px; left:0; background:#000;}
#header .gnb > ul > li.on .menu{display:block;}
#header .gnb > ul > li.on .menu:before{content:''; position:absolute; left:50%; top:0; width:10000%; height:100%; background:rgba(255,255,255,0.95); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); z-index:2;}
#header .gnb .menu .title{ display:inline-block; vertical-align:top; position:relative; z-index:2;}
#header .gnb .menu .title p{font-size:20px; font-weight:400; letter-spacing:-0.025em; color:#1c2444; }
#header .gnb .menu .depth02{width:calc(100% - 180px); display:inline-block; vertical-align:top; font-size:0; position:relative; z-index:2; padding-top:6px; padding-left: 80px; box-sizing: border-box; }
#header .gnb .menu .depth02 li{display:inline-block; vertical-align:top; margin-right:61px; position:relative; margin-bottom:20px;}
#header .gnb .menu .depth02 li:last-of-type{margin-right:0;}
#header .gnb .menu .depth02 li:before{content:''; position:absolute; right:-30px; top:8px; width:1px; height:10px; background:#dcdcdc}
#header .gnb .menu .depth02 li:last-of-type:before, #header .gnb .menu .depth02 li:nth-of-type(5):before{display:none;}
#header .gnb .menu .depth02 li a{display:block; font-size:17px; font-weight:200; letter-spacing:-0.025em; color:#666666;}
#header .right_box{position:absolute; right:5vw; top:30px; font-size:0; letter-spacing: -4px;}
#header .right_box ul.login_box {display: inline-block; vertical-align: middle; font-size:0;}
#header .right_box ul.login_box li{display:inline-block; vertical-align:top; margin-right:20px;}
#header .right_box ul.login_box li:last-of-type{margin-right:0;}
#header .right_box ul.login_box li a{display:block; font-size:15px; font-weight:200; letter-spacing:-0.01em; color:#aaaaaa; position:relative;}
#header .right_box ul.login_box li:hover a{color:#fff;}
#header .right_box ul.login_box li:hover a:before{content:''; position:absolute; bottom:-8px; left:0; width:3px; height:3px; background:#fff;}
#header .right_box ul.login_box li:hover a:after{content:''; position:absolute; bottom:-7px; left:0; width:100%; height:1px; background:#fff;}
#header .right_box ul.lang_box {display: inline-block; vertical-align: middle; margin-left: 70px; font-size:0;}
#header .right_box ul.lang_box li {display: inline-block; vertical-align: top; margin-right: 5px;}
#header .right_box ul.lang_box li:last-of-type {margin-right: 0;}

/*@media all and (max-width:1920px){*/
/*	#header .gnb > ul > li > a{padding:32px 0.6vw;}*/
/*}*/
@media all and (max-width:1600px){
	#header h1.logo{left:2vw;}
	#header .gnb{max-width:1000px;}
	#header .gnb > ul > li{margin-right:10px;}
	#header .gnb > ul > li > a{padding:33px 0; font-size:16px; }
	#header .gnb > ul > li > a.line2{padding:29px 0;}
	#header .right_box {right: 2vw;}
}
@media all and (max-width:1300px){
	#header h1.logo{left:2vw;}
	#header .gnb{max-width:818px; margin: 0 0 0 22vw;}
	#header .gnb > ul > li{margin-right:10px;}
	#header .gnb > ul > li > a{padding:33px 0; font-size:16px;}
	#header .right_box {right: 2vw;}
}
/*@media all and (max-width:1150px){*/
/*	#header .gnb{max-width:728px;}*/
/*	#header .gnb > ul > li{margin-right:5px;}*/
/*}*/
@media all and (max-width:1200px){
	#header{display:none; height:89px;}
	#header .gnb{display:none;}
}

/* m_header */
.m_header{display:none; text-align:center; padding:24px 0;}
.m_header .inner{position:relative;}
.m_header ul.lang_box {position: absolute; top: 50%; left: 0; font-size:0; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.m_header ul.lang_box li {display: inline-block; vertical-align: top; margin-right: 12px;}
.m_header ul.lang_box li:last-of-type {margin-right: 0;}
.m_header .logo{margin:0;}
.m_header .logo a{display:inline-block;}
.m_header .m_btn{display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%);}

@media all and (max-width:1200px){
	.m_header{display:block;}
}

/* m_menu */
.m_menu_bg{display:none; position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0, 0, 0, 0.3); z-index:998;}
.m_menu{ position:fixed; top:0; right:-90%; width:90%; max-width:510px; height:100%; overflow-y:auto; box-sizing:border-box; background:#fff; z-index:999; transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; -moz-transition:all 0.3s;}
.m_menu.on{right:0;}
.m_menu .top_box{position:relative; border-bottom:1px solid #eeeeee; padding:40px 0; text-align:center;}
.m_menu .top_box .logo{margin:0;}
.m_menu .top_box .logo a{display:inline-block;}
.m_menu .top_box .x_btn{display:block; position:absolute; top:50%; right:20px; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.m_menu .gnb > ul{margin:0;}
.m_menu .gnb > ul > li{border-bottom:1px solid #eeeeee; position:relative;}
.m_menu .gnb > ul > li:before{content:''; display:block; position:absolute; width:17px; height:8px; background:url('/img/m_menu_arrow.png') no-repeat center center / contain; top:34px; right:40px; }
.m_menu .gnb > ul > li > a{font-size:24px; color:#000; letter-spacing:-0.05em; font-weight:500; display:block; padding:20px 30px;}
.m_menu .gnb > ul > li .menu{display:none; margin:0; border-top:1px solid #eeeeee; background:#f3f5f7;}
.m_menu .gnb > ul > li .menu .title{display:none;}
.m_menu .gnb > ul > li ul.depth02{margin:0; padding:20px 0;}
.m_menu .gnb > ul > li ul.depth02 li a{display:block; font-size:20px; color:#222; letter-spacing:-0.05em; font-weight:400; padding:10px 30px;}
.m_menu .gnb > ul > li.on:before{background-image:url('/img/m_menu_arrow_on.png');}

.m_menu .btns{margin:0; font-size:0; letter-spacing:-4px; text-align:center; padding:40px 20px 60px; box-sizing:border-box;}
.m_menu .btns li{display:inline-block; vertical-align:top; margin:7px;}
.m_menu .btns li a{display:block;}




/* footer */

/* sub_footer */
.sub_footer{padding:100px 0 70px}
.sub_footer .sub_tit{padding-bottom:60px;}
.sub_footer .map{width:100%; height:540px; position:relative;}
.sub_footer .map .os_mac.root_daum_roughmap{width:100%; height:540px;}
.sub_footer .map .os_mac.root_daum_roughmap .wrap_map{width:100%; height:100%;}
.sub_footer .txt_box{position:absolute; right:50px; top:40px; height:calc(100% - 80px); padding:0 40px; background:rgba(255,255,255,0.9); display:table; z-index:2; width:360px; box-sizing:border-box;}
.sub_footer .txt_box div{display:table-cell; vertical-align:middle;}
.sub_footer .txt_box p{font-size:36px; font-weight:400; letter-spacing:0; color:#1c2444; position:relative; line-height:1;}
.sub_footer .txt_box p:before{content:''; position:absolute; left:0; top:-15px; width:20px; height:1px; background:#1b1b1b}
.sub_footer .txt_box span{display:block; font-size:18px; font-weight:200; letter-spacing:0; color:#444444; line-height:28px; padding:30px 0;}
.sub_footer .txt_box span b{display:inline-block; background:#e9eef1; font-weight:200;}
.sub_footer .txt_box ul{}
.sub_footer .txt_box ul li{padding:10px 0; border-bottom:1px solid #e5e5e5; font-size:16px; font-weight:300; letter-spacing:0.01em; color:#222222; padding-left:20px; position:relative;}
.sub_footer .txt_box ul li:before{content:''; position:absolute; left:10px; top:20px; width:3px; height:3px; background:#c0c0c0;}
.sub_footer .txt_box ul li:last-of-type{border-bottom:0;}
.sub_footer .txt_box ul li b{display:inline-block; vertical-align:top; margin-right:30px; position:relative; font-weight:300;}
.sub_footer .txt_box ul li b:before{content:''; position:absolute; right:-15px; width:1px; height:10px; top:8px; background:#b5b5b5}
.sub_footer .txt_box ul li strong{font-weight:300;}
.sub_footer .txt_box i{display:block; font-style:inherit; padding-left:20px; padding-top:5px; font-size:18px; font-weight:300; letter-spacing:-0.025em; color:#666666;}
		
@media all and (max-width:1000px){	
	.sub_footer{padding:80px 0 50px;}
	.sub_footer .sub_tit{padding-bottom:40px;}
	.sub_footer .map{height:auto;}
	.sub_footer .txt_box{position:relative; right:auto; top:auto; height:auto; padding:70px 40px; width:100%; display:block;}
	.sub_footer .txt_box div{display:block; }

}
@media all and (max-width:640px){	
	.sub_footer{padding-bottom:60px;}
	.sub_footer .main_tit{padding-bottom:70px;}
	.sub_footer .map .os_mac.root_daum_roughmap{height:400px;}
	.sub_footer .txt_box{padding:40px 20px;}
}

.footer{}
.footer .top_box{position:relative; padding-bottom:20px; border-bottom:1px solid #e5e5e5;}
.footer .top_box:after{content:''; display:table; clear:both;}
.footer .top_box .left_box{float:left;}
.footer .top_box .right_box{float:right;}
.footer .top_box ul{font-size:0;}
.footer .top_box ul li{display:inline-block; vertical-align:top; }
.footer .top_box .left_box ul li{margin-right:25px;}
.footer .top_box .right_box ul li{margin-right:50px;}
.footer .top_box ul li:last-of-type{margin-right:0;}
.footer .top_box ul li a{display:block; font-size:17px; font-weight:200; letter-spacing:-0.01em; color:#818181;}
.footer .bot_box{position:relative; padding:50px 0 100px;}
.footer .bot_box:after{content:''; display:table; clear:both;}
.footer .bot_box .left_box{float:left; width:225px; padding-top:8px;}
.footer .bot_box .right_box{float:left; width:calc(100% - 225px); position:relative;}
.footer .bot_box .right_box a.top_btn{position:absolute; right:0; top:-10px;}
.footer .bot_box .right_box ul{font-size:0; width:calc(100% - 70px);}
.footer .bot_box .right_box ul li{display:inline-block; vertical-align:top; position:relative; margin-right:25px; font-size:18px; font-weight:300; letter-spacing:-0.025em; color:#444444;}
.footer .bot_box .right_box ul li:last-of-type{margin-right:0;}
.footer .bot_box .right_box ul li:before{content:''; position:absolute; right:-12px; top:8px; width:1px; height:13px; background:#dcdcdc}
.footer .bot_box .right_box ul li:last-of-type:before{display:none;}
.footer .bot_box .right_box .copy{padding-top:30px;}
.footer .bot_box .right_box .copy:after{content:''; display:table; clear:both;}
.footer .bot_box .right_box .copy span{float:left; display:block; font-size:16px; font-weight:200; letter-spacing:-0.025em; color:#aaaaaa; width:calc(100% - 230px)}
.footer .bot_box .right_box .copy .a_box{float:right; font-size:0; padding-top:20px;}
.footer .bot_box .right_box .copy .a_box a{display:inline-block; vertical-align:top; margin-right:43px; font-size:15px; font-weight:200; letter-spacing:-0.025em; color:#aaaaaa; position:relative;}
.footer .bot_box .right_box .copy .a_box a:last-of-type{margin-right:0;}
.footer .bot_box .right_box .copy .a_box a:before{content:''; position:absolute; right:-22px; width:1px; height:13px; background:#e5e5e5; top:4px;}
.footer .bot_box .right_box .copy .a_box a:last-of-type:before{display:none;}

@media all and (max-width:1000px){
	.footer .bot_box{padding:30px 0 50px;}
	.footer .top_box .left_box{float:none;}
	.footer .top_box .right_box{float:right; padding-top:20px;}
	.footer .bot_box .left_box{float:none; width:100%;}
	.footer .bot_box .right_box{float:none; padding-top:20px; width:100%;}
	.footer .bot_box .right_box ul li{display:block;}
	.footer .bot_box .right_box ul li:before{display:none;}
	.footer .bot_box .right_box .copy span{float:none; width:100%;}
	.footer .bot_box .right_box .copy .a_box{float:none;}
}


/* quick */
.quick{position:fixed; right:18px; top:50%; width:90px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); z-index:90;}
.quick ul{text-align:Center; background:#f3f4f5;}
.quick ul li{padding:20px 0; position:relative; cursor:pointer; background: rgba(255,255,255,0.5);}
.quick ul li:nth-of-type(2){padding:30px 0 20px;}
.quick ul li:nth-of-type(5){padding:20px 0 30px; border-bottom:none;}
.quick ul li:before{content:''; position:absolute; left:50%; bottom:0; width:14px; height:1px; background:#aaaaaa; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -mstransform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);}
.quick ul li:nth-of-type(4):before, .quick ul li:nth-of-type(1):before, .quick ul li:nth-of-type(5):before{display:none;}
.quick ul li p{font-size:13px; font-weight:400; letter-spacing:-0.05em; color:#666666; padding-top:10px; line-height:1.2;}
.quick ul li.type01{padding:20px 0 30px; background:url('/img/quick_bg.png') no-repeat center / cover; border:0;}
.quick ul li.type01 p{font-size:14px; font-weight:200; letter-spacing:0.1em; color:#1c2444; padding:0;}
.quick ul li.type01 span{display:block; font-size:14px; font-weight:400; letter-spacing:0; color:#1c2444; padding-top:10px;}
.quick ul li.type02{border:0; padding:0 0 15px;}

.qr_pop {display:none; position:fixed; text-align:Center;background:#fff; border-radius:50px; padding:30px; box-sizing:border-box; right:120px; top:50%; width:450px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); z-index:1000;}
.qr_pop.on{display:block;}
.qr_pop .close_btn{text-align:right;}
.qr_pop .close_btn a{display:inline-block;}
.qr_pop .qr_box{padding:45px 10px; box-sizing:border-box;}
.qr_pop .qr_box img{max-width:100%;}
.qr_pop .txt_box{}
.qr_pop .txt_box p{padding-top:20px; position:relative; font-size:24px; font-weight:400; letter-spacing:0; color:#000000;}
.qr_pop .txt_box p:before{content:''; position:absolute; left:50%; top:0; width:14px; height:1px; background:#aaaaaa; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);}
.qr_pop .txt_box p span{font-weighT:100;}

@media all and (max-width:1000px){
	.quick{width:100%; transform:none !Important; top:auto; right:auto; left:0; bottom:0;}
	.quick ul:after{clear:both; content:""; display:block; height:0; visibility:hidden}
	.quick ul li.type01{display:none}
	.quick ul li.type02{display:none}
	.quick ul li{width:25%; height:80px; float:left; text-align:center; border:none; padding:15px 0 10px !important; border-right:1px solid #dcdcdc; border-top:1px solid #dcdcdc; box-sizing:border-box;}
	.quick ul li:nth-of-type(5){border-right:none; border-bottom:none;}
	.quick ul li:before{display:none}
	.quick ul li i{display:inline-block; min-width:33px; min-height:33px;}
	.quick ul li p{padding-top:5px; font-size:10px;}
	.quick ul li p br{display:none;}
	.qr_pop{right:auto; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%);}
}


#test_header{height:87px; background:#1c2444; position:relative; width:100%;}
#test_header .inner{position:relative; height:100%;}
#test_header a.logo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
#test_header a.right{font-size:20px; color:#ffffff; letter-spacing:0.025em; font-weight:300; position:absolute; right:0; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}


#header .lang_select_wrap {
    display: flex
;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    color: #434343;
	text-align: center;
}
.lang_select_wrap {
	position: relative;
	z-index: 20;
	cursor: pointer;
}
.lang_select_box {
	position: absolute;
	top: 100%;
	width: 60px;
	border: solid 0.25px rgba(170, 170, 170, 0.8);
	background: linear-gradient(to bottom, #fff, rgba(255,255,255, 0.6));
	display: none;
} 

.lang_select_box.active {
	display: block;
}

.lang_select_box .s_box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;	
}
.lang_select_box .s_box + .s_box::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 2px;
	background-color: var(--color_gray01);
}
#header .right_box {
	display: flex;
	align-items: center;
	gap: 40px;
}

.shorts_flex_box01 {
	display: flex;
	flex-wrap: wrap;
	font-size: 18px;
	letter-spacing: -0.025em;
	color: #222222;
	gap: 10px;
}
.shorts_flex_box01 .box {
	width: calc(20% - 8px);
}
.shorts_flex_box01 .txt {
	margin-top: 10px;
}

.shorts_flex_box01 img {
	max-width: 100%;
	width: 100%;
	height: 100%;
}

@media all and (max-width:1024px) {
	.shorts_flex_box01 .box {
		width: calc(33.33333% - 7px);
		font-size: 14px;
	}
}