@charset "utf-8";

/* lnb 스타일 */
.lnb { width: 100%; padding: 2.4rem 0; background: var(--dark-blue-color); color:white; }
.lnb a { color:white; }

.lnb .inner ul { display: flex; align-items: center; }
.lnb .inner li:not(:last-child) { position: relative; margin-right: 1.7rem; padding-right: 1.7rem; }
.lnb .inner li:not(:last-child)::after { content: ''; display: block; width: 8px; aspect-ratio: 9/11; position: absolute; top: 50%; transform: translate(50%,-50%); right: 0; background: url('/resources/img/common/ico_swiper.svg') no-repeat center/contain; }

.lnb { font-size: 15px; font-weight: 500; }
.lnb .home { display: flex; align-items: center; gap: 1.4rem; }

.lnb .depth1-name { display: table; }
.lnb .depth1-name span { display: table-cell;  }

.lnb .lnb-menu { display: inline-block; width: 100%; position: relative; z-index: 1; vertical-align: middle; }
.lnb .lnb-menu .lnb-title { display: block; height: 100%; display: flex; align-items: center; padding: 0 32px; cursor: pointer; font-size: var(--fs-18); font-weight: 800; }
.lnb .lnb-menu ul { width: 100%; position: absolute; left: 0; display: none; background: #f8f8f8; border-radius: 2rem; padding: 1rem; margin-top: 1rem; }
.lnb .lnb-menu li a { display: block; width: 100%; margin:3px 0; padding: 1rem 2rem; transition: .3s ease; border-radius: 5rem; }
.lnb .lnb-menu li a:hover { background: #EEE; }
.lnb .lnb-menu li.on a { background: black; color:white; }
.lnb .lnb-menu li.on a span { display: table-cell; vertical-align: middle; transform: skew(-0.03deg); }
.lnb .lnb-menu .more-btn { width: 10px; height: 10px; background: url("/resources/img/sub/ico_lnb.svg") no-repeat left 0px bottom 0px; position: absolute; top: 50%; right: 20px; text-indent: -99999px; transform: translateY(-50%); cursor: pointer; transition: all .3s ease-in-out; }
.lnb-menu .more-btn.more-add { transform: translateY(-50%) rotate(-180deg); top: 45%; }


.contents-wrap { display: grid; grid-template-columns: 32rem 1fr; gap: 6rem; padding: 4rem 0 10rem; min-height: calc(100vh - 30.2rem); }
.contents-wrap h2 { padding-bottom: 2.8rem; margin-top: 2rem; margin-bottom: 3.6rem; font-size: var(--fs-36); font-weight: 800; border-bottom:1px solid var(--main-black); }
.contents-wrap:has(.contents-inner:nth-child(1)) { display: block; }

.aside-wrap .depth1-name { display: flex; align-items: center; justify-content: center; height: 10rem; border-radius: 0 5rem 5rem 5rem; font-size: var(--fs-32); background: var(--dark-blue-color); color:white; font-weight: 800; }
.aside-wrap nav > ul > li > a { position: relative; display: block; padding:2rem 2.6rem; border-bottom: 1px solid #CCCCCC; color:var(--sub-black); font-weight: 800; transition: .3s ease; }
.aside-wrap nav > ul > li > a:hover { background: #EFF1F6; }
.aside-wrap .jeju-forum-btn { display: flex; flex-direction: column; margin-top: 2.5rem; padding: 0 4.8rem; justify-content: center; gap: 1px; height: 16rem; color:white; border-radius: .8rem; background: url('/resources/img/common/jeju_forum_btn.jpg') no-repeat center/cover; }
.aside-wrap .jeju-forum-btn small { font-size: 14px; font-weight: 800; }
.aside-wrap .jeju-forum-btn span { display: flex; gap:1.4rem; align-items: center; font-size: var(--fs-24); font-weight: 700; line-height: 1.5; }
.aside-wrap .jeju-forum-btn span img { width: 8px; }
.aside-wrap .ico-arrow { position: absolute; right:2.3rem; top: 50%; transform: translateY(-50%); }
.aside-wrap .ico-arrow::before { content: ""; display: block; width: 16px; height: 3px; background: var(--sub-black); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .3s ease; }
.aside-wrap .ico-arrow::after { content: ""; display: block; width: 3px; height: 16px; background: var(--sub-black); position: absolute; top: 50%; left: 50%; transform: translateY(-50%) rotate(90deg); transition: .3s ease; }
.aside-wrap .ico-arrow.more-add::after { transform: translate(-50%, -50%) !important; }
.aside-wrap .depth2-menu { padding: 1.4rem 3rem; background: #EFF1F6; border-bottom: 1px solid var(--main-black); }
.aside-wrap .depth2-menu li a { position: relative; display: block; padding:0.8rem 1.3rem; color:var(--sub-black); }
.aside-wrap .depth2-menu li a::before { content: ''; position: absolute; left: 0; top: 12px; width: 3px; height:3px; background: var(--main-black); border-radius: 50%; }
.aside-wrap .depth2-menu li a::after { display: none; content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; background: url('/resources/img/common/ico_2depth_arrow.svg') no-repeat center/contain; }
.aside-wrap nav > ul > li.active > a { color: var(--dark-blue-color); }
.aside-wrap nav > ul > li:has(.active) > a { color: var(--dark-blue-color); }
.aside-wrap nav > ul > li:has(.active) > a .ico-arrow::before { transform: translate(-50%, -50%) rotate(180deg); background: var(--dark-blue-color); }
.aside-wrap nav > ul > li:has(.active) > a .ico-arrow::after { transform: translate(-50%, -50%) rotate(180deg); background: var(--dark-blue-color); }
.aside-wrap nav > ul > li:has(.active) .depth2-menu { display: block; }
.aside-wrap .depth2-menu li.active a { color: var(--dark-blue-color); font-weight: 700; }
.aside-wrap .depth2-menu li.active a::after { display: block; }
.aside-wrap .depth2-menu li.active a::before { background: var(--green-color); }



@media screen and (max-width:1024px){
    .contents-wrap { display: block; }
    .aside-wrap { display: none; }
}
@media screen and (max-width:480px){
    .lnb .inner li { display: none; }
    .lnb .inner li:first-child { display: block; }
    .lnb .inner li:last-child { display: block; }
}