@charset "utf-8";
/*common - 레이아웃*/

/*서브컨텐츠 시작*/
.sub-contents{margin-bottom:50px; margin-top:50px;}

.sub-top-bg {max-width:2000px; position: relative; background-repeat: no-repeat; width: 100%; height: 275px; margin: 0 auto; overflow:hidden;}
.sub-top-bg:before{animation-name:subVisual;animation-duration:2s;animation-fill-mode:forwards; width:100%; height:100%; content:""; display:block; top:0; left:0; position:absolute;
 background-position:center; background:url(/resources/custom/images/edu/sub/sub-top-bg.jpg);}
.sub-top-bg .fix-layout{height:100%; position:relative; display:flex; gap:30px; flex-direction:column;justify-content: center; align-items:center;     text-align: center;}
.sub-top-bg .sub-top-ttl {color: #fff; font-size:65px; position:relative; display:inline-block; font-weight: bold;}
.sub-top-bg .ttl-cc {color: #fff; font-size: 18px; font-weight:400;     word-break: keep-all; line-height:1.5;}
@keyframes subVisual{
  0%{filter:blur(10px);transform:scale(1.1);}
  100%{filter:blur(0);transform:scale(1);}
}
/*서브페이지 시작*/
.left-navi{width:280px; float:left;  z-index:0; position:relative;}
.left-navi .title{display:flex; align-items:center; justify-content: center; height:150px; text-align:center; background: linear-gradient(90deg,  rgba(22,49,152,1) 0%, rgba(34,151,109,1) 100%); background-size: cover; color:#fff; font-weight:600; font-size:30px; font-family:'Gmarket'; border-radius:24px 24px 0 0;}
.left-navi .home{display:none;}
.left-navi .top img{display:block; margin:0 auto;}
.left-navi .lnb{margin-top:-18px; border-radius:24px;  border:1px solid #eeeeee;     background: #fff;}
.left-navi .lnb > ul{padding:4px 15px;}
.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:16px 20px; border-bottom:1px solid #ddd; display:block; font-weight:300; color:#313131; font-family:'Gmarket'; font-size:18px;}
.left-navi .lnb > ul > li > ul > li:last-child a{border-bottom:none;}
.left-navi .lnb > ul > li > ul > li.active  > a{color:#fff; color:#2e55c1;}
/*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: #2e55c1;}
.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;}

.sub-page-content{float:right; width:calc(100% - 280px); padding-left:65px;}

.sub-top-titBox{display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; margin-top:50px;}
.sub-top-titBox .contentsTitle{font-size:38px; font-weight:bold;}
.sub-top-titBox > div{display:flex; gap:20px;}
.sub-top-titBox .contentsUtill{display:flex; gap:14px;} 
.sub-top-titBox .contentsUtill li{position:relative;}
.sub-top-titBox .contentsUtill button{width:40px; height:40px; background-position:center; text-indent:-9999px; border-radius:50%; border: none; border:1px solid #d8d8d8;}
.sub-top-titBox .contentsUtill .bookmark{background:url(/resources/custom/images/edu/sub/ico-bookmark.png) rgba(255,255,255,.5) no-repeat center;}
.sub-top-titBox .contentsUtill .print{background:url(/resources/custom/images/edu/sub/ico-print.png) rgba(255,255,255,.5) no-repeat center;}
.sub-top-titBox .svMenu{position:absolute; top:-100px; 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-top-titBox .svMenu h6{text-align:left; padding-left:0; margin:0; background:none; font-size:16px; font-weight:600; color:#222;}
.sub-top-titBox .svMenu .svClose{position:absolute; right:20px; top:20px; width:20px; height:20px; background:url(/resources/custom/images/edu/sub/ico_svmClo.png) no-repeat center; background-size:cover;}
/* #sub_visual .svMenu .func{display:flex; justify-content:space-between;} */
.sub-top-titBox .svMenu .func a{border-radius: 20px; padding:8px 12px; box-sizing:border-box; font-size:14px; line-height:1; display:inline-block;}
.sub-top-titBox.svMenu .func a i{display:inline-block; width:14px; height:14px; margin-right:4px; vertical-align:middle;}
.sub-top-titBox .svMenu .func .adMenu{background:#222; color:#fff; float:left;}
.sub-top-titBox .svMenu .func .adMenu i{background:url(/resources/custom/images/edu/sub/ico_svmAdd.png) no-trepeat center; background-size:cover;}
.sub-top-titBox .svMenu .func .svReset{border:1px solid #222; color:#222; float:right;}
.sub-top-titBox .svMenu .func .svReset i{background:url(/resources/custom/images/gs/sub/ico_svmRes.png) no-repeat center; background-size:cover;}
.sub-top-titBox .svMenuList{background:#f8f8f8; padding:10px; text-align:left; border-radius: 4px; max-height:120px; overflow-y:auto; margin:20px 0 10px 0;}
.sub-top-titBox .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; position:relative;}
.sub-top-titBox .svMenuList li a{width:calc(100% - 30px); color:#161616; font-size:14px;}
.sub-top-titBox .svMenuList li a:focus, #sub_visual .page-role .svMenuList li a:active{color:inherit;}
.sub-top-titBox .svMenuList li i{width:20px; color:#023f8f; text-align:center; font-size:24px; cursor:pointer; }
.right-navi{display:flex; align-items:center;}
.right-navi p{position:relative;}
.right-navi p:after{content:">"; margin:0 10px;}
.right-navi p:last-child:after{display:none;}

/*반응형 시작*/
@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){
        .page_nav{display:none;}
        .sub-top-ttl h3{padding-top:155px; font-size:42px;}
}
@media all and (max-width:767px){
		.sub-top-bg .sub-top-ttl{font-size:40px;}
		.sub-top-bg .fix-layout{gap:10px;}
		.sub-top-bg .ttl-cc{font-size:16px;}
		.right-navi{display:none;}
}