@charset "utf-8";

/*common*/
.sub-top-bg {max-width:100%; position: relative; background-repeat: no-repeat; max-width:1840px; width:100%;  height: 345px; margin: 0 auto;  display: flex; justify-content: center; text-align:center; flex-direction: column; background-size:cover; border-radius:50px;
}
/*.sub-top-bg:before{content:""; display:block; width:100%; height:100%; background: rgba(0,0,0,.4); position:absolute; top:0; left:0; border-radius:50px;}*/
.sub-top-ttl h3{color: #fff; font-size: 65px;  font-weight:700; margin-bottom:35px;}
.sub-top-ttl p{color:#fff; font-size:18px;}

.sub-contents{max-width:1604px; padding:0 12px; padding-bottom:50px;}

.sub-page-content{float:right; width:calc(100% - 280px - 80px); margin-left:80px; margin-top: 73px; padding-right:12px;}
.left-navi{ width:280px; float:left;  z-index:1; position:relative;  margin-top:-150px;}
.left-navi .lnb-tit{height:150px; width:100%; background:#023f8f; font-family:'Gmarket'; color:#fff; font-size:30px; padding-top:60px; border-radius:24px 24px 0 0; text-align:center;}
.left-navi  .lnb{padding:16px 14px; border:1px solid #ddd; margin-top:-16px; background:#fff; border-radius:24px;}
.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:18px 20px; border-bottom:1px solid #ddd; display:block; font-weight:600; color:#313131; font-size:18px; font-family:'Gmarket'; font-weight:300;} 
.left-navi .lnb > ul > li > ul > li:last-child a{border-bottom:none;}
/*.left-navi .lnb > ul > li > ul > li  > a:after{content:"+"; display:block; position:absolute; right:20px; top:0; color:#9f9f9f;}*/
.left-navi .lnb > ul > li > ul > li.active  > a{ color:#0725bc;}
/*.left-navi .lnb > ul > li > ul > li.active  > a:after{content:""; width:11px; height:3px; top:50%; background-color:#f9672b;}*/

/*left-navi 3depth*/
.left-navi .lnb > ul > li > ul > li > ul{ background-color:#f4f4f4; display:none;}
.left-navi .lnb > ul > li > ul > li.active > ul{/* display:block; */ display:none;}
.left-navi .lnb > ul > li > ul > li > ul > li{padding:12px 0px; border-bottom:1px solid #ccc;}
.left-navi .lnb > ul > li > ul > li > ul > li:last-child{border-bottom:none;}
.left-navi .lnb > ul > li > ul > li.active > ul > .active a{color: #f66e6f;font-weight: 500;}
.left-navi .lnb > ul > li > ul > li > ul > li a{padding-left:18px; position:relative;}
.left-navi .lnb > ul > li > ul > li > ul > li a::before{display:block; content:''; width:4px; height:4px; background:#acacac; position:absolute; top:11px; left:4px; display: none;}

.right-navi{margin-bottom: 30px;}
.right-navi p{display:inline-block; position:relative; font-family:'Pretendard'; color: #666666;}
.right-navi span{margin:0 4px; color:#666666;}
.right-navi i{margin-right:8px; display:inline-block; vertical-align:middle; border-radius:50%;  width:44px; height:44px;  background:url(/resources/custom/images/hrc/sub/home-icon.png)#f7f7f7 no-repeat center;}

.sub-page-top{display:flex; justify-content:space-between;}
.sub-page-top .contentsTitle{font-size:48px; }
.sub-page-top .contentsUtill{display:flex; gap:14px;}
.sub-page-top .contentsUtill .bookmark-box{position:relative;}
.sub-page-top .contentsUtill button{width:40px; height:40px; border-radius:50%; border:1px solid #cfcfcf; background-position:center; text-indent:-9999px;}
.sub-page-top .contentsUtill .bookmark{background:url(/resources/custom/images/hrc/sub/bookmark.png) no-repeat center;}
.sub-page-top .contentsUtill .print{background:url(/resources/custom/images/hrc/sub/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/hrc/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/hrc/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/hrc/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; }

@media all and (max-width:1400px){
	.sub-top-ttl h3{font-size:40px; margin-bottom:12px;}
	.left-navi{width:230px; margin-top:-100px;}
	.sub-page-content{width: calc(100% - 230px - 30px); margin-left:30px;}
	.left-navi .lnb-tit{height:100px;}
	.left-navi .lnb > ul > li > ul > li > a{font-size:16px;}
	.left-navi .lnb-tit{font-size:24px; padding-top:37px;}
	.sub-page-top .contentsTitle{font-size:32px;}
	.sub-top-bg{height:300px;}
}
@media all and (max-width:1200px){
	.sub-top-ttl h3{font-size:30px;}
	.sub-top-bg{height:250px;}
	.left-navi{display:none;}
	.sub-page-top{margin-bottom:70px;}
	.sub-page-content{width: 100%; margin-right:0; margin-left:0; margin-top:30px;}
	.sub-page-content{padding-right:0;}
}
@media all and (max-width:767px){
	.sub-page-top{margin-bottom:40px}
	.sub-top-ttl h3{font-size:24px;}
	.sub-top-bg{height:140px; border-radius:0px; padding:0 12px;}
	.sub-top-ttl p{font-size:16px;}
}
@media all and (max-width:500px){
	.sub-page-top .svMenu{width:240px;}
}