@charset "utf-8";
/*common - 레이아웃*/
.sub-page-content{float:right; width:calc(100% - 280px); padding-left:100px; margin-top:80px;}


.sub-top-bg {max-width:2000px; position: relative; height: 350px; background-repeat: no-repeat; width: 100%; margin: 0 auto;  background:#222;
background:url(/resources/custom/images/archives/sub/main-top-bg.jpg)no-repeat;  transform-origin: center;
 }
 .sub-top-ttl{opacity: 0; transform:translateY(50px);transition: all 3s ease;}
.sub-top-ttl h3{color: #fff; font-size: 50px;  font-weight:500; padding:190px 12px 12px 12px; text-align:center;}
.sub-top-ttl.active {
    /* 활성화 시 스타일 */
    opacity: 1;
    transform:translateY(0px);
}

/*페이지 네비*/
.page_nav{border-bottom:1px solid #e5e5e5}
.page_nav .lnb{max-width:1644px; margin:0 auto; height:55px; }
.page_nav .lnb:after{content:""; display:block; clear:both;}
.page_nav .lnb .home{float:left; width:65px; height:55px; background:url(/resources/custom/images/archives/sub/sub_nav_home.png)no-repeat center #0e2265; text-indent:-9999px;}
.page_nav .lnb .home:focus{outline: 2px solid #14FF00;}
.page_nav .lnb-item > ul > li{width:100%;}
.page_nav .lnb-item > ul > li > a{display:block; width:100%; height:35px; float:left; color:#3c3c3c; line-height:35px;  padding:0 24px;text-align: left; background:rgba(0, 0, 0, 0.8); color:#fff;}
.page_nav .lnb .sub-menu{position:relative; padding-top:32px; height:0px; overflow:hidden; width: 100%;}
.page_nav .lnb .sub-menu{height:55px;}
.page_nav .lnb .sub-menu a{color:#fff; line-height:32px; display:block; width:100%; height:100%; padding:0 12px; background:rgba(0, 0, 0, 0.8);}
.page_nav .lnb .sub-menu .active{position:absolute; height:32px; top:0; left:0; }


.page_nav .lnb-item {position: relative; float: left; width: 260px; height: 55px; font-size: 16px; font-weight: 600; z-index: 1; background: url(/resources/custom/images/archives/sub/ico-lnb-open.png) no-repeat 90% center; border-right: 1px solid #e5e5e5; }
.page_nav .lnb-item button{width: 100%; height: 100%; background: none; text-align: left; font-size: 16px; padding-left: 12px; color: #3c3c3c; border:none; outline: none; cursor: pointer;}
.page_nav .lnb-item button:focus{outline: 2px solid #14FF00;}
.page_nav .lnb-item > ul{ top: 0; left: 0; right: 0; height: 0px; overflow: hidden;   display: none; }
.page_nav .lnb-item > ul.on{display: block; height: auto;}
/*.lnb-item > ul .active        { position: absolute; top: 0; left: 0; right: 0; height: 32px; background: rgba(0, 0, 0, 0);}*/
.page_nav .lnb-item > ul .active.open a {font-weight: 400;  background:rgba(0, 0, 0, 1);  }
.page_nav .lnb-item > ul .active.open a:active, .lnb-item > ul .active.open a:focus, .lnb-item > ul > li > a:focus {background: #830DB4; color: #fff;}
.page_nav .lnb-item > ul > li > a:focus{background: #830DB4; color: #fff;border: 2px dashed #14FF00 !important;}

.page_nav .lnb-item .active > a           { margin-left: 0; border-top-width: 1px; padding-right: 0; bottom: 0;}
.page_nav .lnb-item .active > a:after     { content: ""; display: block; position: absolute; /*width: 30px;*/ height: 55px; right: 0px; top: 5px; }
.page_nav .lnb-item ul > li               { background:#0e2265;}
.page_nav .lnb-item ul > li.active{border-left:none;}

/*서브컨텐츠 시작*/
.sub-contents{margin-bottom:50px}
/*서브페이지 탑*/
.sub-page-top { text-align:center; position:relative; margin-top:50px;}
.sub-page-top .contentsTitle{font-size:48px; border-bottom:2px solid #000000; padding-bottom:50px; font-size:48px; font-weight:600; color:#000000; font-weight:600;}
.sub-page-top .contentsUtill{display:flex; gap:14px; position:absolute; right:40px; top:15px;} 
.sub-page-top .contentsUtill button{width:40px; height:40px; background-position:center; text-indent:-9999px; border:1px solid #d4d4d4; border-radius:50%;}
.sub-page-top .contentsUtill .bookmark{background:url(/resources/custom/images/archives/sub/ico-bookmark.png) no-repeat center;}
.sub-page-top .contentsUtill .print{background:url(/resources/custom/images/archives/sub/ico-print.png) no-repeat center;}
.sub-page-top .svMenu{position:absolute; top:50px; right:0; width:300px; border-radius: 16px; background:#fff; padding:20px; z-index:5; box-shadow:0px 0px 8px rgba(0,0,0,.15); display:none; opacity:0}
.sub-page-top .svMenu h6{text-align:left; padding-left:0; margin:0; background:none; font-size:16px; font-weight:600; color:#222;}
.sub-page-top .svMenu .svClose{position:absolute; right:20px; top:20px; width:20px; height:20px; background:url(/resources/custom/images/enter/sub/ico_svmClo.png) no-repeat center; background-size:cover;}
/* #sub_visual .svMenu .func{display:flex; justify-content:space-between;} */
.sub-page-top .svMenu .func a{border-radius: 20px; padding:8px 12px; box-sizing:border-box; font-size:14px; line-height:1; display:inline-block;}
.sub-page-top .svMenu .func a i{display:inline-block; width:14px; height:14px; margin-right:4px; vertical-align:middle;}
.sub-page-top .svMenu .func .adMenu{background:#222; color:#fff; float:left;}
.sub-page-top .svMenu .func .adMenu i{background:url(/resources/custom/images/enter/sub/ico_svmAdd.png) no-repeat center; background-size:cover;}
.sub-page-top .svMenu .func .svReset{border:1px solid #222; color:#222; float:right;}
.sub-page-top .svMenu .func .svReset i{background:url(/resources/custom/images/enter/sub/ico_svmRes.png) no-repeat center; background-size:cover;}
.sub-page-top .svMenuList{background:#f8f8f8; padding:10px; text-align:left; border-radius: 4px; max-height:120px; overflow-y:auto; margin:20px 0 10px 0;}
.sub-page-top .svMenuList li{border-bottom:1px solid #e5e5e5; display:flex; flex-wrap:wrap; justify-content:space-between; padding:4px; color:#161616; font-size:14px; align-items:center;}
.sub-page-top .svMenuList li a{width:calc(100% - 30px); color:#161616; font-size:14px;}
.sub-page-top .svMenuList li a:focus, #sub_visual .page-role .svMenuList li a:active{color:inherit;}
.sub-page-top .svMenuList li i{width:20px; color:#023f8f; text-align:center; font-size:24px; cursor:pointer; }



/*서브페이지 시작*/
.left-navi{width:280px; float:left;  z-index:0; position:relative; margin-top:-120px;}
.left-navi .title{display:flex; align-items:center; justify-content: center; height:120px; text-align:center; background:url(/resources/custom/images/archives/sub/sub-navi-deco.png) no-repeat; background-size: cover; color:#fff; font-weight:600; font-size:25px; font-family:'Gmarket';}
.left-navi .home{display:none;}
.left-navi .top img{display:block; margin:0 auto;}
.left-navi .lnb > ul > li{display:none;}
.left-navi .lnb > ul > li.active{display:block;}
.left-navi .lnb > ul > li.active > a{display:none;}
.left-navi .lnb > ul > li > ul > li  > a{background-color:#fff; position:relative; padding:0px 14px; border-bottom:1px solid #ddd; display:block; line-height:60px; font-weight:300; color:#313131; font-family:'Gmarket'; font-size:18px;}
.left-navi .lnb > ul > li > ul > li.active  > a{color:#fff; color:#0a257f;}

/*left-navi 3depth*/
.left-navi .lnb > ul > li > ul > li > ul{ background-color:#f4f4f4;}
.left-navi .lnb > ul > li > ul > li.active > ul{display:block;}
.left-navi .lnb > ul > li > ul > li > ul > li{padding:12px 20px; border-bottom:1px solid #ccc;}
.left-navi .lnb > ul > li > ul > li.active > ul > .active a{color: #0e2265;}
.left-navi .lnb > ul > li > ul > li > ul > li a{padding-left:10px; position:relative; font-weight:300; color:#313131; font-family:'Gmarket';}
.left-navi .lnb > ul > li > ul > li > ul > li a::before{display:block; content:''; width:4px; height:4px; background:#acacac; position:absolute; top:6px; left:0;}



/*반응형 시작*/
@media all and (max-width:1500px){
        .sub-page-content{padding-left:50px;}
}
@media all and (max-width:1400px){
        .left-navi{width:230px;}
        .sub-page-content{float:right; width:calc(100% - 230px);}
}
@media all and (max-width:1200px){
		.page_nav .lnb-item{width:200px;}
		.left-navi{display:none;}
        .sub-page-content{float:none; width:100%; padding-left:0; margin-top:50px;}
        .sub-page-top .contentsTitle{font-size:32px; padding-bottom:30px;padding-right: 130px; text-align:left; }
        .sub-page-top .contentsUtill{top:0; right:12px;}
}
@media all and (max-width:1000px){
		.sub-top-bg{height:300px;}
		.page_nav{display:none;}
		.sub-top-ttl h3{padding-top:155px; font-size:42px;}
}
@media all and (max-width:500px){
		.sub-top-ttl h3{font-size:40px;}
}