@charset "utf-8";

/* 텝 */
.tab{display:block; position:relative; z-index:1;}
.tab > ul{display:none; width:100%; overflow:hidden; position:absolute; top:100%; left:0; z-index:2;}
.tab > ul li{border:1px solid #cccccc; border-top:0;}
.tab > ul li:first-child{border-top:1px solid #ccc;}
.tab > ul li span{cursor:pointer; display:block; width:100%; height:45px; box-sizing:border-box; padding:15.5px 0 0 40px; background:#fff url(../img/icon/icon_subtab_arrow.png) no-repeat 20px 50%; font-family:'NotoSansMedium'; font-size:12px; color:#636363; line-height:100%;}
.tab > ul li span:hover{color:#f05000; background:#fff url(../images/icon_subtab_arrow_on.png) no-repeat 20px 50%;}
.tab > ul li.tab_on span{color:#f05000; background:#fff url(../imges/icon_subtab_arrow_on.png) no-repeat 20px 50%;}

/* 텝 버튼 - 모바일,태블릿용 */
.tab button{
	position:relative;
	display:block;
	width:100%; height:45px;
	box-sizing:border-box;
	padding:0 0 0 25px;
	border:none;
	background:#2b3074 url(../img/bg/bg_tab_on.png) no-repeat 100% 0;
	font-family:'NotoSansMedium'; font-size:13px; color:#fff; line-height:100%; text-align:left;
	cursor:pointer;
}
.tab button:after{
	content:"";
	display:block;
	position:absolute; top:50%; margin-top:-3.5px; right:20px;
	width:11px; height:7px;
	background:url(../images/icon_tab_on.png) no-repeat;
	transform:rotateZ(-90deg);
	transition:all 0.2s linear;
}
.tab button.tab_on:after{transform:rotateZ(0deg);}
.tab button.tab_on + ul{display:block;}

/* 서브 텝 */
.sub_tab{position:relative; z-index:1; margin-bottom:30px;}

.sub_tab ul{display:none; width:100%; overflow:hidden; position:absolute; left:0; top:100%; z-index:1;}
.sub_tab ul li{border:1px solid #ccc; border-top:none;}
.sub_tab ul li:first-child{border-top:0;}

.sub_tab ul li span{
	display:block;
	width:100%; height:45px;
	box-sizing:border-box;
	padding:15.5px 0 0 40px;
	background:#fff url(../img/icon/icon_subtab_arrow.png) no-repeat 20px 50%;
	font-family:'NotoSansRegular'; line-height:100%; font-size:12px;
}
.sub_tab ul li span:hover{color:#f05000; background:#fff url(../img/icon/icon_subtab_arrow_on.png) no-repeat 20px 50%;}
.sub_tab ul li.tab_on span{color:#f05000; background:#fff url(../img/icon/icon_subtab_arrow_on.png) no-repeat 20px 50%;}

/* 서브 텝 버튼 - 모바일,태블릿용 */
.sub_tab button{
	display:block;
	position:relative;
	width:100%; height:45px;
	box-sizing:border-box;
	padding:0 0 0 40px;
	border:1px solid #cccccc;
	background:#fff;
	font-family:'NotoSansRegular'; font-size:12px; line-height:100%; text-align:left;
	cursor:pointer;
}
.sub_tab button:before{content:""; display:block; width:7px; height:11px; position:absolute; top:50%; margin-top:-5.5px; left:20px; background:url(../img/icon/icon_subtab_arrow.png) no-repeat; transform-origin:50% 50%; transition:all 0.2s linear;}

.sub_tab button.tab_on{border-color:#f05000; color:#f05000;}
.sub_tab button.tab_on:before{background:url(../img/icon/icon_subtab_arrow_on.png) no-repeat; transform:rotateZ(90deg);}
.sub_tab button.tab_on + ul{display:block;}


/********************************************************************************************************************************************************************************** TABLET */
@media all and (min-width:768px){

/* 서브 텝 */
.sub_tab{display:block; position:relative; border:1px solid #ccc; padding:10px 15px; transition:all 0.2s linear;}
.sub_tab:hover{border-color:#f05000;}

.sub_tab ul{display:block; width:100%; overflow:hidden; position:relative; top:0;}
.sub_tab ul li{float:left; width:25%; border:none; margin:5px 0;}
.sub_tab ul li:first-child{border:none;}

.sub_tab ul li a{
	display:inline-block;
	width:auto; height:auto;
	box-sizing:border-box;
	padding:3px 0 3px 13px;
	background:#fff url(../img/icon/icon_subtab_arrow.png) no-repeat 0 50%;
	font-family:'NotoSansRegular'; font-size:13px;
}

.sub_tab ul li a span{position:relative; white-space:nowrap;}
.sub_tab ul li a span:after{content:""; position:absolute; left:0; bottom:0; width:0%; height:1px; background:#f05000; transition:all 0.2s linear;}

.sub_tab ul li a:hover{color:#f05000; background:#fff url(../img/icon/icon_subtab_arrow_on.png) no-repeat 0 50%;}
.sub_tab ul li a:hover span:after{width:100%;}

.sub_tab ul li.tab_on a{color:#f05000; background:#fff url(../img/icon/icon_subtab_arrow_on.png) no-repeat 0 50%;}
.sub_tab ul li.tab_on a span:after{width:100%;}

/* 서브 텝 버튼 - 모바일,태블릿용 */
.sub_tab button{display:none;}

}

/********************************************************************************************************************************************************************************** PC */
@media all and (min-width:1000px){

/* 서브 텝 */
.sub_tab{display:block; position:relative; border:1px solid #ccc; padding:15px 40px; margin-top:-20px;}
.sub_tab ul li{width:20%; min-width:130px;}

/* 텝 */

/* 텝 기본 3개 */
.tab {display:none;}
.tab > ul{display:block; position:relative; top:0; left:0; z-index:2;}
.tab > ul li{float:left; border:none; width:33%; margin-left:0.5%;}
.tab > ul li:first-child{border:none; margin-left:0;}

.tab > ul li a{position:relative; padding:14px 0 0 20px; background:#fff url(../img/bg/bg_tab.png) no-repeat 100% 50%; color:#fff; font-size:13px; transition:background-color 0.2s linear;}
.tab > ul li a:after{content:""; display:block; position:absolute; top:50%; margin-top:-3.5px; right:20px; width:11px; height:7px; background:url(../img/icon/icon_tab_off.png) no-repeat; transition:all 0.2s linear;}

.tab > ul li a:hover{color:#fff; background:#fff url(../img/bg/bg_tab_on.png) no-repeat 100% 50%;}
.tab > ul li a:hover:after{background:url(../images/icon_tab_on.png) no-repeat;}

.tab > ul li.tab_on a{color:#fff; background:#fff url(../img/bg/bg_tab_on.png) no-repeat 100% 50%;}
.tab > ul li.tab_on a:after{background:url(../img/icon/icon_tab_on.png) no-repeat;}

/* 텝 버튼 - 모바일,태블릿용 */
.tab button{display:none;}

/* 텝 2개 */
.tab_02 > ul li{width:49.75%; margin-left:0.5%;}
.tab_02 > ul li:first-child{margin-left:0;}

/* 텝 3개 */
.tab_03 > ul li{width:33%; margin-left:0.5%;}
.tab_03 > ul li:first-child{margin-left:0;}

/* 텝 4개 */
.tab_04 > ul li{width:calc( 25% - 5px ); margin-left:6.2px;}

/* 텝 5개 */
.tab_05 > ul li{width:calc( 20% - 5px ); margin-left:6.2px;}

/* 텝 6개 */
.tab_06 > ul li{width:calc( 16.6% - 5px ); margin-left:6.2px;}

/* 텝 7개 */
.tab_07 > ul li{width:calc( 14.2% - 5px ); margin-left:6.2px;}

/* 텝 8개 */
.tab_08 > ul li{float:left; width:12.05%;}
.tab_08 > ul li a{
	width:150px; 
	box-sizing:border-box; padding:15px 20px 0 28px;
	background:url(../img/bg/bg_tab_middle.png) no-repeat 0 50%;
	text-align:center; font-size:12px; white-space:nowrap;
}
.tab_08 > ul li a:hover{background:url(../img/bg/bg_tab_middle_on.png) no-repeat 0 50%;}
.tab_08 > ul li.tab_on a{background:url(../img/bg/bg_tab_middle_on.png) no-repeat 0 50%;}

.tab_08 > ul li:first-child a{background:url(../img/bg/bg_tab_front.png) no-repeat 0 50%; width:150px; padding:15px 23px 0 0;}
.tab_08 > ul li:first-child a:hover{background:url(../img/bg/bg_tab_front_on.png) no-repeat 0 50%;}
.tab_08 > ul li:first-child.tab_on a{background:url(../img/bg/bg_tab_front_on.png) no-repeat 0 50%;}

.tab_08 > ul li:last-child a{background:url(../img/bg/bg_tab_last.png) no-repeat 0 50%; width:149px; padding:15px 0 0 15px;}
.tab_08 > ul li:last-child a:hover{background:url(../img/bg/bg_tab_last_on.png) no-repeat 0 50%;}
.tab_08 > ul li:last-child.tab_on a{background:url(../img/bg/bg_tab_last_on.png) no-repeat 0 50%;}

.tab_08 > ul li a:after{display:none;}
.tab_08 > ul li a:before{display:none;}

/* tab 커스텀 */

/* tab 커스텀 - 01 */
.tab_custom_01{margin-bottom:25px;}
.tab_custom_01 > ul{display:inline-block; width:100%; box-sizing:border-box; overflow:visible; border-bottom:1px solid #f05000;}
.tab_custom_01 > ul > li{width:auto; margin:0; position:relative; top:1px;}
.tab_custom_01 > ul > li > a{
	height:40px;
	padding:0 40px; padding-top:12px;
	border:1px solid #c9c9c9;
	border-bottom:1px solid #f05000; border-right:0;
	background:#fff;
	color:#666666;
}
.tab_custom_01 > ul > li:last-child a{border-right:1px solid #c9c9c9;}
.tab_custom_01 > ul > li > a:hover{
	background:#fff;
	color:#f05000;
	text-decoration:underline;
}
.tab_custom_01 > ul > li.tab_on > a{
	background:#fff;
	border-color:#f05000;
	border:1px solid #f05000;
	border-bottom:1px solid #fff;
	color:#f05000;
}
.tab_custom_01 > ul > li.tab_on + li > a{
	border-left:0;
}


.tab_custom_01 > ul > li > a:after{display:none;}

/* tab 커스텀 - 02 */
.tab_custom_02{margin-top:25px; border:none; padding:0;}
.tab_custom_02 > ul > li{}
.tab_custom_02 > ul > li:first-child{margin-left:0;}
.tab_custom_02 > ul > li > a{
	display:block;
	height:35px;
    padding: 14px 0 0 20px;
	padding-top:10px;
	background:#fff url(../img/icon/icon_tab_mgpubilc.png) no-repeat 95% 50%;
	border:1px solid #c7c7c7;
	font-family:'NotoSansMedium'; font-size:13px; color:#959494;
}
.tab_custom_02 > ul > li > a:hover{
	background:#b9b9b9 url(../img/icon/icon_tab_mgpubilc.png) no-repeat 95% 50%;
	color:#fff;
}
.tab_custom_02 > ul > li.tab_on > a{
	background:#b9b9b9 url(../img/icon/icon_tab_mgpubilc.png) no-repeat 95% 50%;
	color:#fff;
}
.tab_custom_02 > ul > li > a span:after{display:none;}
.tab_custom_02 > ul > li > a:after{display:none;}


}