@charset "utf-8";
body::-webkit-scrollbar{width:13px;}
body::-webkit-scrollbar-thumb{background:#3579f4; border-radius: 10px; border:3px solid #e9ebf2;}
body::-webkit-scrollbar-thumb:hover{background:#2668df}
body::-webkit-scrollbar-track{background:#e9ebf2}
.hd-top .hd-top-right .popup-open-btn{display:none;}

.sub-top-bg {position: relative; background-repeat: no-repeat; width: 100%; height: 570px; margin: 0 auto; overflow:hidden;}
.sub-top-bg:before{content:""; display:block; width:100%; height:200%; background:url(/resources/custom/images/main/sub/sub-top-bg.jpg);
animation-name:ani_Bg; animation-duration:14s; animation-timing-function: linear; background-size:auto 100%; position: absolute; background-size:cover;}
/*.sub-top-bg.VISUAL_university:before{ background:url(/resources/custom/images/main/sub/sub-top-bg01.jpg);}*/
.sub-top-bg.VISUAL_intro:before {width:100%; height:200%; background:url(/resources/custom/images/main/sub/sub-top-bg08.jpg); position: absolute; background-size:auto 100%; background-size:cover;}
.sub-top-bg.VISUAL_university:before{ width:100%; height:200%; background:url(/resources/custom/images/main/sub/sub-top-bg06.jpg); position: absolute; background-size:auto 100%; background-size:cover;}
/*.sub-top-bg.VISUAL_life:before{ background:url(/resources/custom/images/main/sub/sub-top-bg02.jpg);}*/
.sub-top-bg.VISUAL_life:before{  width:100%; height:200%; background:url(/resources/custom/images/main/sub/sub-top-bg07.jpg); position: absolute; background-size:auto 100%; background-size:cover;}
/*.sub-top-bg.VISUAL_community:before{ background:url(/resources/custom/images/main/sub/sub-top-bg03.jpg);}*/
.sub-top-bg.VISUAL_community:before{  width:100%; height:200%; background:url(/resources/custom/images/main/sub/sub-top-bg09.jpg); position: absolute; background-size:auto 100%; background-size:cover;}
.sub-top-bg.VISUAL_sitemap:before{ background:url(/resources/custom/images/main/sub/sub-top-bg04.jpg);}
.sub-top-bg.VISUAL_guide:before{ background:url(/resources/custom/images/main/sub/sub-top-bg05.jpg);}
.sub-top-bg .sub-top-ttl {position: absolute; top: 0; left: 0; right: 0; color: #fff; display:flex; width:100%; height:100%; align-items:center; justify-content:end;
flex-direction:column; gap:25px; padding-bottom:130px;}
.sub-top-ttl h3{color: #fff; font-size: 50px;  font-weight:500;}
.sub-top-ttl h5{color:#fff; letter-spacing:2px; }
@keyframes ani_Bg{
    0% {top:0;}
    25% {top:-10%;}
    50% {top:-20%;}
     70% {top:-10%;}
    100% {top:0;}
}
.sub-top-bg .contentsUtill{display:flex; gap:14px;} 
.sub-top-bg .contentsUtill li{position:relative;}
.sub-top-bg .contentsUtill button{width:40px; height:40px; background-position:center; text-indent:-9999px; border-radius:50%; border: none; border:2px solid #d8d8d8;}
.sub-top-bg .contentsUtill button:focus{outline: 2px solid #0def9f;}
.sub-top-bg .contentsUtill .bookmark{background:url(/resources/custom/images/main/sub/ico-bookmark.png) no-repeat center;}
.sub-top-bg .contentsUtill .print{background:url(/resources/custom/images/main/sub/ico-print.png) no-repeat center;}
.sub-top-bg .contentsUtill .copy{background:url(/resources/custom/images/main/sub/ico-copy.png) no-repeat center;}
.sub-top-bg .svMenu{position:absolute; top:50%; left:50%; 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; transform:translate(-50%, -50%);}
.sub-top-bg .svMenu h6{text-align:left; padding-left:0; margin:0; background:none; font-size:16px; font-weight:600; color:#222;}
.sub-top-bg .svMenu .svClose{position:absolute; right:20px; top:20px; width:20px; height:20px; background:url(/resources/custom/images/main/sub/ico_svmClo.png) no-repeat center; background-size:cover;}
/* #sub_visual .svMenu .func{display:flex; justify-content:space-between;} */
.sub-top-bg .svMenu .func a{border-radius: 20px; padding:8px 12px; box-sizing:border-box; font-size:14px; line-height:1; display:inline-block;}
.sub-top-bg.svMenu .func a i{display:inline-block; width:14px; height:14px; margin-right:4px; vertical-align:middle;}
.sub-top-bg .svMenu .func .adMenu{background:#222; color:#fff; float:left;}
.sub-top-bg .svMenu .func .adMenu i{background:url(/resources/custom/images/main/sub/ico_svmAdd.png) no-trepeat center; background-size:cover;}
.sub-top-bg .svMenu .func .svReset{border:1px solid #222; color:#222; float:right;}
.sub-top-bg .svMenu .func .svReset i{background:url(/resources/custom/images/main/sub/ico_svmRes.png) no-repeat center; background-size:cover;}
.sub-top-bg .svMenuList{background:#f8f8f8; padding:10px; text-align:left; border-radius: 4px; max-height:120px; overflow-y:auto; margin:20px 0 10px 0;}
.sub-top-bg .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-bg .svMenuList li a{width:calc(100% - 30px); color:#161616; font-size:14px;}
.sub-top-bg .svMenuList li a:focus, #sub_visual .page-role .svMenuList li a:active{color:inherit;}
.sub-top-bg .svMenuList li i{width:20px; color:#023f8f; text-align:center; font-size:24px; cursor:pointer; }

/*page_nav*/
.lnb{border-bottom:1px solid #dcdcdc; display:flex; align-items:center; padding:0 24px;}
.lnb:after{content:""; display:block; clear:both;}
.lnb .home{margin-right: 24px; float:left; width:40px; height:40px; background:url(/resources/custom/images/main/sub/sub_nav_home.png)no-repeat center #fff; text-indent:-9999px; border-radius: 50%;}
.lnb .home:focus{outline: 2px solid #000;}
.lnb-item > ul > li > a{display:block; width:100%; height:50px; float:left; color:#fff; line-height:50px;  padding:0 24px;text-align: left; background:rgba(0, 0, 0, .6);}
.lnb-item > ul > li > a:hover{background:rgba(0,0,0,.5)}
.lnb .sub-menu{position:relative; padding-top:32px; float:left; height:0px; overflow:hidden; float:left; width:200px; }
.lnb .sub-menu{height:32px;}
.lnb .sub-menu a{color:#fff; line-height:32px; display:block; width:100%; height:100%; padding:0 12px;}
.lnb .sub-menu .active{position:absolute; height:32px; top:0; left:0; }

.lnb-item {position: relative; width: 250px; height: 80px; font-size: 16px; font-weight: 600;  background: url(/resources/custom/images/main/sub/ico-lnb-open.png) no-repeat 90% center;   border-left: 1px solid #fff; border-right: 1px solid #fff; }
.lnb-item:before{content:""; display:block; width:1px; height:30px; background:#e0e0e0; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.lnb-item button{width: 100%; height: 100%; background: none; text-align: left; font-size: 16px; padding-left: 30px; color: #000; border:none; outline: none; cursor: pointer;}
.lnb-item button:focus{outline: 2px solid #000;}
.lnb-item > ul{ top: 0; left: 0; right: 0; height: 0px; overflow: hidden;   display: none;}
.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);}*/
.lnb-item > ul .active.open a {font-weight: 400;  background:rgba(0, 0, 0, 1);  }
.lnb-item > ul .active.open a:active, .lnb-item > ul .active.open a:focus, .lnb-item > ul > li > a:focus {background: #830DB4; color: #fff;}
.lnb-item > ul > li > a:focus{background: #2159b9; color: #fff;}

.lnb-item .active > a           { margin-left: 0; border-top-width: 1px; padding-right: 0; bottom: 0;}
.lnb-item .active > a:after     { content: ""; display: block; position: absolute; /*width: 30px;*/ height: 30px; right: 0px; top: 5px; }
/* .lnb-item ul > li               { background:rgba(0, 0, 0, 0.5); border-left:1px solid #f0eded;}
.lnb-item ul > li.active{border-left:none;} */

.sub-contents{margin-top:100px; margin-bottom:50px;}
.contentsTitle{font-size:50px; font-weight:bold; margin-bottom:50px; text-align:center;}

@media screen and (max-width: 1400px){
		.lnb-item{width:180px;}
}
@media screen and (max-width: 1024px){
	.sub-contents{margin-top:50px; margin-bottom:30px;}
	/*.page_nav{display:none;}*/
	.sub-top-bg {height:400px;}
	.sub-top-bg .sub-top-ttl{justify-content: end; padding-bottom:50px; gap: 10px;}
}

@media all and (max-width: 800px) {
   /* .page_nav{display:none;}*/
	.page_nav{display:block;}

  /* Home 옆에 1뎁스가 가로로 붙도록 */
  .lnb{
    display:flex;                /* ← 누락되어 있었음 */
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px;
    padding:8px 12px;
  }
  .lnb .home{
    margin:0; width:36px; height:36px;
    background-size:18px auto;
    flex:0 0 auto;
  }

  /* 카드형 아코디언 */
  .lnb-item{
    position:relative;
    width:auto;                  /* 칩처럼 나란히 */
    height:auto;
    border:1px solid #e9eef5;
    border-radius:8px;
    background:#fff;
    overflow:hidden;
    flex:0 0 auto;               /* 기본은 가로로 붙음 */
  }
  .lnb-item:before{ display:none; }

  .lnb-item > button{
    position:relative;
    width:100%;
    height:44px; line-height:44px;
    padding:0 14px; font-size:15px;
    background:#fff; text-align:left;
    white-space:nowrap;          /* 한 줄 유지 */
  }
  .lnb-item > button::after{
    content:"▾";
    position:absolute; right:12px; top:50%;
    transform:translateY(-50%) rotate(0deg);
    transform-origin:center;
    transition:transform .18s ease;
    will-change:transform;
    font-size:13px;
  }
  /* 화살표 회전: 상태 클래스/aria 둘 다 허용 */
  .lnb-item.is-open > button::after,
  .lnb-item > button[aria-expanded="true"]::after{
    transform:translateY(-50%) rotate(180deg);
  }

  /* 하위 메뉴: 높이로 접힘/펼침 */
  .lnb-item > ul{
    display:block !important;
    max-height:0;
    overflow:hidden;
    border-top:1px solid #edf2f7;
    transition:max-height .25s ease;
    width:100%;
  }
  .lnb-item > ul.on{
    max-height:48vh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* 펼쳐질 때 해당 항목만 한 줄 전체 차지 */
  .lnb-item:has(> ul.on){ flex-basis:100%; }   /* 지원 브라우저 */
  .lnb-item.expand{ flex-basis:100%; }         /* (:has 미지원 대비용) */

  /* 링크 정리 */
  .lnb-item > ul > li > a{
    display:block;
    float:none;
    height:auto; line-height:1.45;
    padding:10px 14px;
    background:#f7f9fc; color:#222;
  }
  .lnb-item > ul > li + li > a{ border-top:1px solid #edf2f7; }
  .lnb-item > ul > li > a:hover,
  .lnb-item > ul > li > a:focus{ background:#e8f0fe; color:#111; }
  .lnb-item > ul .active > a{ background:#2159b9; color:#fff; }
}

/* 모션 최소화 환경 */
@media (max-width:800px) and (prefers-reduced-motion: reduce){
  .lnb-item > ul{ transition:none; }
  .lnb-item > button::after{ transition:none; }
}
@media all and (max-width:767px){
		.contentsTitle{font-size:30px; }
}

/*애니메이션*/
.contentsTitle{opacity:0;transform:translateY(-50px);}
.contentsTitle{animation-name:page_title;animation-duration:1s;animation-fill-mode:forwards;}
@keyframes page_title{
  0%{}
  100%{opacity:1;transform:translateY(0);}
}
.page_nav{opacity:0;transform:translateY(50px); z-index:1; position:relative;}
.page_nav{animation-name:page_nav;animation-duration:1s;animation-fill-mode:forwards;animation-delay:0.25s;}
@keyframes page_nav{
  0%{}
  100%{opacity:1;transform:translateY(0);}
}

.ttl-cc{animation-name:subVisualText_1;animation-duration:2s;animation-fill-mode:forwards;}
@keyframes subVisualText_1{
  0%{opacity:0;transform:translateY(-50px);}
  100%{opacity:1;transform:translateY(0);}
}
.sub-top-ttl h3{animation-name:subVisualText_2;animation-duration:2s;animation-fill-mode:forwards;}
@keyframes subVisualText_2{
  0%{opacity:0;transform:translateY(50px);}
  100%{opacity:1;transform:translateY(0);}
}

.sub-page-content #body_content{opacity:0;transform:translateY(50px);}
.sub-page-content #body_content{animation-name:bContents;animation-duration:1s;animation-fill-mode:forwards;animation-delay:0.75s;}
@keyframes bContents{
  0%{}
  100%{opacity:1;transform:translateY(0);}
}