@charset "UTF-8";

#wrapper{}

@media only screen and (max-width:1220px){
	#wrapper{background-size:100% auto;}
}
@media only screen and (max-width:850px){
	#wrapper{background-size:auto 224px;}
}

/* ?????? */
.sub_visual{position:relative; width:100%; height:220px; text-align:center; border-top:1px solid #474747; background:url('../images/sub/sub_visual.png') no-repeat center center;}
.sub_visual .inner:before {display:block;position:absolute;width: 390px;bottom: -87px;left: -430px;height:212px;background:url('../images/sub/sub_visual01.png') no-repeat;z-index:1;}
.sub_visual .inner:after {display:block;position:absolute;width: 390px;bottom: -88px;right: -430px;height:212px;background:url('../images/sub/sub_visual02.png') no-repeat;z-index:1;}
.sub_visual .inner{display:inline-block; position:relative;margin:81px 0 69px;}
.sub_visual .title{position:relative; font-size:34px; line-height:40px; color:#253169; font-weight:600;}
.sub_visual .title:before{display:block; position:absolute; bottom:-5px; left:0; width:100%; height:2px; background-color:#253169;}

@media only screen and (max-width:1220px){
	.sub_visual{height:92px; background:url(../images/sub/sub_visual_m.jpg) no-repeat center center; background-size:cover;}
	.sub_visual .inner:before {display:none;}
	.sub_visual .inner:after {display:none}
	.sub_visual .m_title {display:block; font-size: 22px; color: #fff; font-weight:bold}
	.sub_visual .inner{margin:36px 0 30px;}
	.sub_visual .title{font-size:24px; line-height:26px;}
}


#container{margin:0 auto;}
/* 탭메뉴 */
@media only screen and (min-width:1221px){
    #sub_menu{margin-top:-30px;}
	#sub_menu .active_btn{display:none;}
	#sub_menu .second_menu{}
	#sub_menu .second_menu .wrap{height:82px; line-height:82px;}
    #sub_menu .tab_box{border-radius:20px; background-color:#4f5eb3; text-align:center;}
	#sub_menu .second_menu .menu_list{display:inline-block; vertical-align:middle;}
	#sub_menu .second_menu .menu_list li{display:inline-block; /*padding:0 40px;*/ padding:0 24px;}
	#sub_menu .second_menu .menu_list li a{position:relative; font-size:18px; color:#fff;}
	#sub_menu .second_menu .menu_list li.active a{font-weight:600; color:#fff;}
    #sub_menu .second_menu .menu_list li.active a:before{display:block; position:absolute; bottom:-2px; left:0; width:100%; height:1px; background-color:#fff;}
	#sub_menu .second_menu .menu_list li.active a:after{display:inline-block; width:18px; height:18px; margin-left:10px; background:url(../images/sub/second_menu_active.png) no-repeat;}

    #sub_menu .third_menu{display:block; margin-top:20px;}
	#sub_menu .third_menu .wrap {padding:0 60px}
	#sub_menu .third_menu .menu_list{margin: 0 auto; padding:0;  text-align: center; border-bottom: 1px solid #e3e3e3;border-top: 1px solid #e3e3e3; }
	#sub_menu .third_menu .menu_list li{display: inline-block; position: relative; padding: 0 25px; margin:0 0 -2px 0}
	#sub_menu .third_menu .menu_list li:not(:first-child):before{display: block; position: absolute; top: calc(50% - 3px); left: -3px; width: 6px; height: 6px; border-radius:5px; background-color: #909090;}
	#sub_menu .third_menu .menu_list li a{display: inline-block; position: relative; height:60px; padding:2px 5px 0; font-size: 17px; color: #3c3c3c; line-height: 55px;}
	#sub_menu .third_menu .menu_list li.active a{font-weight:600; color:#242424; text-decoration: none;}
	#sub_menu .third_menu .menu_list li.active a:before{display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: #242424;}
}

@media only screen and (max-width:1220px){
	#container {margin:0; background:#fff;}
	#sub_menu .active_btn{display:block;}
	#sub_menu .menu_list li.active{display: none;}
	#sub_menu .second_menu{position:relative; z-index:30; height:49px; border-bottom:1px solid #e3e3e3; background-color:#4f5eb3;}
	#sub_menu .second_menu .active_btn{display:block; position:relative; width:100%; height:49px; padding:0 45px 0 22px; font-weight:bold; border-bottom:none; font-size:16px; color:#fff; text-align:left; line-height:49px; transition:all 0.2s linear;}
    #sub_menu .second_menu .active_btn.on:before{display:block; position:absolute; top:0; left:0; width:65%; height:100%; background-color:#18237e;}
    #sub_menu .second_menu .active_btn span{position:relative; z-index:10;}
    #sub_menu .second_menu .active_btn span:after{display:inline-block; width:18px; height:18px; margin-top:15px; margin-left:10px; background:url(../images/sub/second_menu_active.png) no-repeat; vertical-align:top;}
	#sub_menu .second_menu .menu_list{visibility:hidden; position:absolute; top:100%; left:0; z-index:10; width:65%; background-color:#18237e; transform:scaleY(0); transform-origin:top; transition:all 0.2s linear;}
	#sub_menu .second_menu .menu_list li{position:relative; padding:0 45px 0 22px;}
	#sub_menu .second_menu .menu_list li{border-top: 1px solid #5e65a5;}
	#sub_menu .second_menu .menu_list li:before{display:block; position:absolute; top:calc(50% - 3px); right:27px; width:5px; height:7px; background:url(../images/sub/second_menu_bg.png) no-repeat;}
	#sub_menu .second_menu .menu_list li a{display:block; font-size:15px; line-height:38px; color:#fff;}
	#sub_menu .second_menu.active .menu_list{visibility: visible; transform:scaleY(1); }

	#sub_menu .third_menu{display:block; position: relative; z-index:20; margin-top: 13px; }
	#sub_menu .third_menu .active_btn{display: block; position: relative;z-index: 20; width: 100%; height:39px; padding: 0 40px 0 25px; border-bottom: 1px solid transparent; border-radius:20px; background-color: #f3f3f3; text-align: left; }
	#sub_menu .third_menu .active_btn.on{border-bottom: 1px solid #ddd; border-radius:20px 20px 0 0;}
	#sub_menu .third_menu .active_btn:after{display: block; position: absolute; top: calc(50% - 2px); right: 21px; width: 7px; height: 4px; background: url(../images/sub/sub_sprite.png) no-repeat -102px -4px;}
	#sub_menu .third_menu .active_btn span{display: inline-block; position: relative; font-size: 15px; font-weight: 600; color: #1e1e1e; line-height: 39px; }
	
	#sub_menu .third_menu .active_btn span:before{display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #000;}
	#sub_menu .third_menu .menu_list{visibility: hidden; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; padding-top: 39px; border-radius:20px; background-color: #f3f3f3;  transform:scaleY(0); transform-origin:top; transition:all 0.2s linear;}
	#sub_menu .third_menu .menu_list li{position: relative; padding: 0 35px 0 25px;}
	#sub_menu .third_menu .menu_list li:not(:last-child){border-bottom: 1px solid #ddd;}
	#sub_menu .third_menu .menu_list li:before{display: block; position: absolute; top: calc(50% - 3px); right: 27px; width: 5px; height: 7px; background: url(../images/sub/sub_sprite.png) no-repeat -89px -4px}
	#sub_menu .third_menu .menu_list li a{display: block; padding: 11px 0; font-size: 15px; color: #282828; line-height: 1.2; }
	#sub_menu .third_menu.active .menu_list{visibility: visible; border-color: #e14f38; transform:scaleY(1); }
}

/* ???? ???? */


@media only screen and (min-width:1221px){
	#colgroup{margin-top: 42px;}
	#colgroup .sub_head .sub_title{position:relative; max-width:75%; padding-left:35px; font-size:28px; font-weight: 600; color: #333;}
	#colgroup .sub_head .sub_title:before{display:block; position:absolute; top:10px; left:0; width:27px; height:29px; background:url(../images/sub/h2_bg.png) no-repeat;}
	#colgroup .sub_head .path{position: absolute; top: 10px; right: 0; max-width:100%;}
	#colgroup .sub_head .path span{display:inline-block;  font-size: 16px; color: #515151; vertical-align: middle; line-height: 1.2;}
	#colgroup .sub_head .path span.home{width:16px; height: 14px; background: url(../images/sub/sub_sprite.png) no-repeat -41px -3px ;font-size:0;}
	#colgroup .sub_head .path span.arrow{margin: 3px 5px 0; font-family:Dotum,'????'; }
	#contents{ margin:0 auto; position:relative; }
}
@media only screen and (max-width:1220px){
	#colgroup{margin-top: 30px;}
	#colgroup .sub_head .sub_title{font-size: 18px; font-weight: 600; color: #262626; text-align: center;}
	#colgroup .sub_head .path{display: none;}
}

#contents{margin-top: 42px; padding-bottom: 50px;}

@media only screen and (max-width:1220px){
	#contents{margin-top: 30px; width:100%; padding:0 20px; box-sizing:border-box;}
}