@charset "utf-8";


.sub_visual { position: relative; width: 100%; height:464px; overflow:hidden; z-index: 0; border-radius:0 0 100px 0; background:#fff2df url('/images/contents/svisual_bg.jpg') no-repeat center 0; color:#fff; display: flex; align-items: center;  justify-content: center;}

.sub_visual_txt{font-size:60px; color:#fff;  font-family: 'Gmarket SansM'; margin-top: -60px;}

/* #mysubmenu{    margin-top:-61px; width: 100%; height: 90px; border-radius: 50px 0 50px 0; background: linear-gradient(140deg, rgba(24, 110, 184, 1) 50%, rgba(39, 76, 128, 1) 100%);}
.leftmenu_b ul{display:flex; align-items:center; justify-content:flex-start; padding: 0 40px; }
.leftmenu_b ul li{ border-radius:30px;  padding:20px 30px;display:flex; align-items:center; justify-content: flex-start; font-size:18px; height:90px; }
.leftmenu_b ul li a{color:#fff;}
.leftmenu_b ul li.active{}
.leftmenu_b ul li.active a{ color:#fff !important; position:relative;}
.leftmenu_b ul li.active a:before {content:""; display:inline-block; width:6px; height:6px;  background: #fff; border-radius: 50%; position: absolute; left: -10px; top: -7px;} */

.lo{color:#999; font-size:20px; margin:80px 0 25px}
.lo span{padding:0 10px}
.lo span:first-child{padding-left:0}
.lo .page{color:#186eb8; }
.con_title{font-size:60px; color:#222;  font-family: 'Gmarket SansB';     margin-bottom: 40px;}


.sub_history{margin-top:-61px; width: 100%; height: 90px; border-radius: 50px 0 50px 0; background: linear-gradient(140deg, rgba(24, 110, 184, 1) 50%, rgba(39, 76, 128, 1) 100%); 
			display: flex;  align-items: center;  padding: 0 40px; line-height:1.5}
.sub_history .hist_depth2 { display: none; }
.hist_depth2{width: 100%; display: flex;}

.hist_depth1 > .mn_on > a{display:none}
	
.sub_history .hist_depth2 {display: block; position: static;  width:100%; z-index: auto; display:flex; }
.sub_history .hist_depth2 a{color: #fff !important;  position: relative;  padding: 20px 30px;  font-size: 18px;  position:relative;}
.sub_history .hist_depth2 a.active:before {content:""; display:inline-block; width:6px; height:6px;  background: #fff; border-radius: 50%; position: absolute; left: 14px;  top: 10px;}
.sub_history .hist_depth1 > li {color: #fff; }


.mn_depth3{display:flex; flex-wrap:wrap; border:1px solid #ddd; border-right:none; border-bottom:none; line-height:1.5}
.mn_depth3 a{width: 20%; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 20px; text-align: center; font-size:18px}

.mn_depth3 a.on{background:#186eb8; color:#fff;}

.mn_depth3.col4 a{width: 25%;}


@media all and (max-width:1440px){
	.lo,
	.con_title{padding:0 30px;}
}

@media all and (max-width:1200px){	
	.logo{display:none;}
	.wlogo{display:block; left:20px}

	.m_gnb_btn button .line {background:#fff;}
	.m_gnb_btn button .line:before {background:#fff;}
	.m_gnb_btn button .line:after {background:#fff;}
}

@media all and (max-width: 999px){
	.sub_visual {  height: 250px; background-size: cover; border-radius:0}
	.sub_visual_txt { font-size: 40px; margin-top: 0;}
	.sub_visual:before {width: 15vw;left: -7px;  top: 4px;	}
	.sub_visual:after{width: 15vw; top: -9vw}
	
	.sub_con{font-size:15px; line-height:1.6; }

	.hist_depth1 > .mn_on > a{display:block; color: #fff; padding: 23px 0;}

	.sub_history{display: block;}
    .sub_history .hist_depth1 > li {  position: relative; }
	.sub_history .hist_depth1 > li {color: #fff; }	
	.sub_history .hist_depth2 a{color: #000 !important;}

    .sub_history .hist_depth1 .mn_on:hover .hist_depth2 {display: block;}

	.sub_history .hist_depth2 {display: none; position: absolute; top: 69px; text-align: center; z-index: 99; border: 1px solid #bebec9; border-radius: 30px; overflow: hidden; background: #fff; 
	padding: 10px 0;   width: 100%;}
	.sub_history .hist_depth2{width: 100%;}
	.sub_history .hist_depth2 li a { display: block; padding: 4px 10px; font-size: 15px; color: #333; }
	.sub_history .hist_depth2 li a:hover { color: #6666cd; }
	.sub_history .arrow { font-size: 20px; margin: 1px 0 0 20px; position: absolute; }
	
	.sub_history {  margin-top: -41px;  height: 70px;}
	.leftmenu_b ul li { padding: 13px 30px;font-size: 15px; height: 70px;}

	.lo {font-size: 15px; margin: 30px 0 15px;}
	.con_title {  font-size: 30px; margin-bottom: 20px;}

	.mn_depth3{font-size:14px;}
	.mn_depth3 a { width: calc(100% / 3);}
}

@media all and (max-width:599px){
	.mn_depth3 a { width: calc(100% / 2); padding: 10px;}
}