@charset "utf-8";

/* LNB */
.pathbox{position: relative; border-bottom: 1px solid #ddd; background-color: #6f6f6f;}
.pathbox:before{position: absolute; top: 0; right: 0; content: ""; display: block; width: 50%; height: 100%;  background-color: #f6f6f6;}
.pathbox .path{width: 100%; max-width: 1280px; margin: 0 auto; background-color: #f6f6f6;}
.pathbox .path>ul{display: flex; height: 55px;}
.pathbox .path li.home{width: 65px; height: 100%; background-color: #333;}
.pathbox .path li.home a{display: block; width: 100%; height: 100%; background: url(../img/sub/i_home.png) no-repeat center;}

.pathbox .path li.list{position: relative; width: 300px;}
.pathbox .path li.list .path_btn{display: block; width: 100%; height: 100%; padding: 0 25px; text-align: left; background-color: #fff; border-right: 1px solid #d7d7d7;}
.pathbox .path li.list .path_btn:focus{box-shadow: 0 0 0 3px #256ef4 inset; outline: 0;}
.pathbox .path li.list .path_btn span{position: relative; display: block; width: 100%;}
.pathbox .path li.list .path_btn span:before{position: absolute; top: 8px; right: 0; display: block; content: ""; width: 12px; height: 7px; background-image: url(../img/sub/select_arrow_02.png)}
.pathbox .path li.list.active .path_btn span:before{transform: rotateX(180deg);}

.pathbox .path li.list .layer{position: absolute; top: 55px; left: 0; display: none; width: 100%; background-color: #fff; border: 1px solid #ddd; z-index: 1;}
.pathbox .path li.list .layer ul li{border-bottom: 1px solid #ddd;}
.pathbox .path li.list .layer ul li:last-child{border-bottom: 0;}
.pathbox .path li.list .layer ul li a{display: block; padding: 10px 20px; font-size: 16px; transition: all 0.1s;}
.pathbox .path li.list .layer ul li a:hover{font-weight: 500; color: #000000; background-color: #f4f4f4;}

/* 서브타이틀 */
.subTop{margin-bottom: 30px;}
.det1-tit{position: relative; padding-top: 45px; margin-bottom: 30px; font-size: 30px; font-weight: 500; text-align: center;}
/*.det1-tit:before{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ""; display: block; width: 32px; height: 22px; background: url(../img/sub/dep1_tit.png) no-repeat top center; background-size: contain;}*/

/* 서브메뉴 */
.sub-menu{padding: 15px; border-radius: 10px; background-color: #f6f6f6;}
.s-depth-list{display: flex; flex-wrap: wrap;}
.s-depth-list li{width: 16.66666666666667%; padding: 5px;}
.s-depth-list li a{display: flex; gap: 7px; align-items: center; justify-content: center; width: 100%; height: 45px; text-align: center; font-size: 16px; color: #222; border: 1px solid #ddd; background-color: #fff;}
.s-depth-list li a .img-wrap img{display: block;}
.s-depth-list li a span{display: block; line-height: 1.2em;}
.s-depth-list li.active a{color: #f60000; border-bottom: 3px solid #f60000;}
.s-depth-list li.active a .img-wrap img{filter: invert(11%) sepia(88%) saturate(7155%) hue-rotate(1deg) brightness(95%) contrast(108%);}





/***********************************************/
/* 화면 1450px 이하 */
@media screen and (max-width: 1450px) {}

/***********************************************/
/* 화면 1240px 이하 */
@media screen and (max-width: 1240px) {
    /* 서브타이틀 */
    .det1-tit:before{width: 27px;}
	
	/* 서브메뉴 */
	.s-depth-list li{width: 25%;}
	.s-depth-list li a{font-size: 17px;}
	
	
}

/***********************************************/
/* 화면 991px 이하 */
@media screen and (max-width: 991px) {
	/* 서브타이틀 */
	.subTop{margin-bottom: 20px;}
    .det1-tit{margin-bottom: 20px; font-size: 27px;}
	
	/* 서브메뉴 */
	.s-depth-list li{width: 33.33333333%;}
	.s-depth-list li a{height: 40px; font-size: 16px;}
	
}

/***********************************************/
/* 화면 640px 이하 */
@media screen and (max-width: 640px) {
    /* LNB */
    .pathbox .path>ul{height: 45px;}
    .pathbox .path li.home{width: 40px;}
    .pathbox .path li.home a{background-size: 16px;}
    .pathbox .path li.list{width: calc(50% - 20px);}
    .pathbox .path li.list .path_btn{padding: 0 10px; font-size: 15px;}
    .pathbox .path li.list:nth-child(3) .path_btn{border-right: none;}
    .pathbox .path li.list .layer{top: 45px;}
    .pathbox .path li.list .layer ul li a{padding: 8px 10px; font-size: 14px;}
    
    /* 서브타이틀 */
    .det1-tit{padding-top: 25px; font-size: 24px;}
    .det1-tit:before{width: 21px;}
    
    /* 서브메뉴 */
	.sub-menu{padding: 10px;}
	.s-depth-list li{width: 50%; padding: 3px;}
	.s-depth-list li a{gap: 4px; height: 34px; font-size: 14px;}
	.s-depth-list li a .img-wrap img{max-width: 16px; max-height: 15px;}
    
}