@charset "utf-8";
.sub-top-bg {max-width:2000px; position: relative; background-repeat: no-repeat; width: 100%; height: 350px; 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;}
.sub-top-bg .fix-layout{position:relative; padding-top:130px;}
.sub-top-bg .sub-top-con{width:355px; position:relative;}
.sub-top-bg .sub-top-con:before{display:block; content:""; width:260px; height:215px; background:url(/resources/custom/images/museum/sub/sub-top-rec.png);
position:absolute; left:120px; top:-55px;}
.sub-top-bg .sub-top-con:after{content:""; display:block; width:10px; height:106px; background:#C50D17; right:0px; top:-80px; position:absolute}
.sub-top-bg .sub-top-ttl {color: #fff; font-size:54px; position:relative; display:block; font-weight: 200; margin-bottom:6px;}
.sub-top-bg .ttl-cc {color: #fff; font-size: 20px; font-weight: 200;}
@keyframes subVisual{
  0%{filter:blur(10px);transform:scale(1.1);}
  100%{filter:blur(0);transform:scale(1);}
}

.sub-top-con .sub-top-ttl{transform:translateY(100px); opacity:0;transition:all 1.2s;}
.sub-top-con .ttl-cc{transform:translateY(100px); opacity:0; transition:all 1.5s;}
.sub-top-con.active .sub-top-ttl{transform:translateY(0); opacity:1;}
.sub-top-con.active .ttl-cc{transform:translateY(0); opacity:1;}

/*tab 형식 네비*/
#tab_lnb{ background:#000000; margin:0 auto;}
#tab_lnb .lnb-item.first{display:none;}
#tab_lnb .lnb-item > ul > li{display:none;}
#tab_lnb .lnb-item > ul > li > a{display:none;}
#tab_lnb .lnb-item > ul > .active{display:block;}
#tab_lnb .lnb-item .sub-menu{    display: flex;justify-content: center; gap: 20px;}
#tab_lnb .lnb-item .sub-menu > li > a{display:block; padding:0 20px;  color:#fff; font-size:16px; position:ralative; line-height:68px;}
#tab_lnb .lnb-item .sub-menu > .active > a:after{background:#fff;  content:""; display:block; width:100%; height:3px; left:0; bottom:0;}
#tab_lnb .lnb-item .sub-menu .sub-menu{display:none;}

/*네비*/
.page_nav{position:absolute; right:12px;}
#selbox_lnb{display:flex; align-items:center;height:50px; }
#selbox_lnb .home{float:left; width:130px; height:50px; background:url(/resources/custom/images/museum/sub/ico-home.png)no-repeat center; text-indent:-9999px; border-bottom:1px solid rgba(255,255,255,.3);}
#selbox_lnb .lnb-item > ul > li > a{display:block; width:130px; height:50px; float:left; color:#fff; line-height:50px;  padding:0 12px; }
#selbox_lnb .lnb .sub-menu{position:relative; padding-top:50px; float:left; height:0px; overflow:hidden; float:left; width:130px; }
#selbox_lnb .lnb .sub-menu{height:50px;}
#selbox_lnb .lnb .sub-menu a{color:#5a5a5a; line-height:50px; display:block; width:100%; height:100%; padding:0 12px; font-weight:400;}
#selbox_lnb .lnb .sub-menu .active{position:absolute; height:50px; top:0; left:0; }
#selbox_lnb .lnb-item {position: relative; width: 130px; height: 50px; font-size: 16px; font-weight: 600; z-index: 1; border-bottom:1px solid rgba(255,255,255,.3);}
#selbox_lnb .lnb-item:last-child{border-bottom:1px solid rgba(255,255,255,1);}
#selbox_lnb .lnb-item > ul              { position: absolute; top: 0; left: 0; right: 0; padding-top: 50px; height: 0px; overflow: hidden;}
#selbox_lnb .lnb-item > ul .active      { position: absolute; top: 0; left: 0; right: 0; height: 50px; background: rgba(0, 0, 0, 0);}
#selbox_lnb .lnb-item > ul .active.open a {font-weight: 400; border:none; }
#selbox_lnb .lnb-item > ul .active.open a:active, .lnb-item > ul .active.open a:focus {color: #4dbabe;}
#selbox_lnb .lnb-item .active > a           { border-left-width: 0; margin-left: 0; border-top-width: 1px; padding-right: 0; bottom: 0;}
#selbox_lnb .lnb-item ul > li.active{border-left:none;}

.contentsTitle{font-size:46px; margin:40px 0; font-weight:bold;}

@media all and (max-width:850px){
		.page_nav{display:none;}
}
@media all and (max-width:767px){
        .tab_nav{display:none;}
        .sub-top-bg .sub-top-con{width:100%;}
        .sub-top-bg .sub-top-con:before{width:calc(100% - 30px); left:30px; background-size:100% 100%; height:180px;}
        .sub-top-bg .sub-top-con:after{right:12px;}
        .sub-top-bg .sub-top-ttl{font-size:30px}
        .sub-top-bg .ttl-cc{font-size:16px;}
        .contentsTitle{font-size:30px; margin:30px 0;}
}