@charset "utf-8";

.subHeader{width:100%; height:auto; display:block;}
.subContainer .container, .subHeader .container{max-width:1400px; width:100%; height:100%; text-align:center; margin:0 auto; }
.subBg{width:100%; height:80px; display:flex; align-items:flex-end; margin:0 auto;}
.subBg p{color:#fff; display:flex; align-items:flex-end; width:100%; text-align:left; height:100%; font-size:39px; font-weight:600; letter-spacing:-4px; line-height:1; } 
.subBg p > span{font-size:18px; color:#fff; opacity:.45; font-weight:400; letter-spacing:0; text-transform:uppercase; margin-left:10px;}
.subPart-01{background:#4d5ca7;}
.subPart-01 .subBg p{background:url('../../images/ke/subPart-01.png') bottom right / auto no-repeat;}

.subPart-02{background:#6583dc;}
.subPart-02 .subBg p{background:url('../../images/ke/subPart-02.png') bottom right / auto no-repeat;}

.subPart-03{background:#7a87df;}
.subPart-03 .subBg p{background:url('../../images/ke/subPart-03.png') bottom right / auto no-repeat;}

/* 탭 메뉴 */
.subNav{position:relative; width:100%; height:37px; background:#fff; border-bottom:1px solid #e6e6e6; box-sizing: content-box; z-index:99;}
.subNav.fixed{position:fixed;}
.subNav .container{display:flex; align-items:flex-start; text-align:left; position:relative;}
.subNav ul{display:block; width:250px; height:auto; border-left:1px solid #e6e6e6; position:absolute; top:0; left:0; overflow:hidden;}
.subNav ul:last-child{left:250px; border-right:1px solid #e6e6e6;}
.subNav ul > li{display:none; width:100%; height:auto;}
.subNav ul > li.selectPage{display:block;}
.subNav ul > li.selectPage a{display:flex; color:#777;}

.subNav ul > li a{display:none; border-bottom:1px solid #ddd; padding:12px 15px; width:auto; text-align:left; letter-spacing:0; font-size:13px; font-weight:500; line-height:1; background:#fff; color:#aaa;}
.subNav ul > li a > i{width:35px; display:inline-block;}
.subNav ul > li a > span{ width:50%; flex:auto; margin-right:10px; word-break:break-all; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.subNav ul.open{border:1px solid #9aa0b6; border-top:none;}


.subNav .depth-01.open > li,
.subNav .depth-02.open > li.active{display:block !important;}
.subNav .depth-01.open > li a,
.subNav .depth-02.open > li a{display:flex !important;}

.subNav ul li.selectPage a:hover,
.subNav ul.open li.selectPage a{color:#222;background:#f1f1f1;}
.subNav ul > li a:hover{color:#4d5ca7;}


/* - 닫기 버튼 */
.subNav .icon{flex:auto; display:contents !important;}
.subNav .icon > i{width:13px; height:13px; position:relative; display:block; float:right;}
.subNav .icon > i:before,
.subNav .icon > i:after{ content:''; height:1px; display:block; background:#c0c0c0; -webkit-transition:all .3s ease; transition: all .3s ease; position:absolute; width:100%; top:50%; left:0;}
.subNav .icon > i:before{transform:rotate(90deg);-webkit-transform:rotate(90deg);}
.subNav .icon > i:after{transform:rotate(180deg);-webkit-transform:rotate(180deg);}
.subNav .open > li a:first-child .icon{flex:auto; display:contents !important;}
.subNav .open > li a:first-child .icon > i:before{transform:rotate(180deg);-webkit-transform:rotate(180deg);}
.subNav .open .select .icon{display:none !important;}
.subNav.fixed{top:80px}

/* 콘텐츠 페이징 */
.contPage {position:relative; margin:30px auto 0;overflow:hidden;}
.contPage > div {width:50%;padding:30px; margin-bottom:40px;}
.contPage > div a {position:relative;display:block;min-height:85px;overflow:hidden;text-align:center;transition:all ease-in-out .3s;}
.contPage > div a:after {
	position:absolute;/* left:calc(50% - 25px); 웹 호환성 문제로 우선 보류하고 추후 살림 */ left:50%;bottom:0;
	display:block;content:'';width:50px;height:35px;
	margin-left:-25px;
	background-image:url('../../images/newMosf/content/contPage.png');
	background-repeat:no-repeat;
}
.contPage > div a span {
	display:block;width:190px;height:35px;
	margin:25px auto 0 auto;
	background-image:url('../../images/newMosf/content/contPage.png');
	background-repeat:no-repeat;
	background-position:right 0;
	transition:all ease-in-out .3s;
}
.contPage > div a span.prevArrow {transform:rotate(-180deg);}
.contPage > div a:hover {color:#2c9be8;}
.contPage > div a:hover:after {background-position:right -35px;}
.contPage > span {position:absolute;bottom:30px;left:50%;width:1px;height:100%;background-color:#bbb;}
.contPage .pageNext {float:left;}
.contPage .pagePrev {float:right;}
.contPage .pageNext a:after {background-position:-142px 0;transform:rotate(-180deg);}
.contPage .pagePrev a:after {background-position:right 0;}



/* ==== 1400px 이하 일때 (뷰포트 1400px 기준) ==== */ @media only screen and (max-width:1400px) {
	.subContainer > .container,
	.subHeader .container{max-width:90% !important;}
	.subNav.fixed{top:5.714vw; /* top:80px; */}
	
}

/* ==== 1023px 이하 일때 ==== */ @media only screen and (max-width:1023px) {
	.subContainer > .container,
	.subHeader .container{max-width:100% !important; padding:0 10px !important;}
	.subNav.fixed{top:60px;}

}
/* ==== 770px 이하 일때 (뷰포트 375px 기준) ==== */ @media only screen and (max-width:767px) {
	/* 메인 비주얼 영역 */
	.subContainer > .container,
	.subHeader .container{padding:0 2.667vw !important; /* padding:0 10px; */}
	.subNav ul{width:50%;}
	.subNav ul:last-child{left:50%; border-right:0;}
	.subNav.fixed{top:16vw; /* top:60px */}
	.subBg p{font-size:32px;}
	.subNav .depth-02.open > li.active{height:190px; position:relative; overflow-y:auto;}
	.subNav .depth-02.open > li.active > .listWrap{position:absolute; top:0; left:0; width:100%; height:auto;}
	
	/* 콘텐츠 페이징 */
	.contPage {width:100%;margin:30px auto 0;}
	.contPage > div {padding:10px;}
}