/* 서브 공통 */

._sub{ box-sizing: border-box; width: 100%; position: relative; background-color: #fff; color: var(--navy); }


.pagination{ display: flex; justify-content: center; gap: 15px; font-size: 14px; font-family: 'Poppins', sans-serif; text-align: center; }
.pagination .btn{ display: flex; align-items: center; }
.pagination .btn._double > a{ display: flex; align-items: center; justify-content: center; }
.pagination .btn._double > a i{ margin: 0 -0.25em; }
.pagination .num{ display: flex; gap: 12px; margin: 0 13px; font-size: 16px; padding-top: 2px; }
.pagination .num li > a{ display: flex; padding: 3px 4px; box-sizing: border-box; }
.pagination .num li.on > a{ color: #0d55a6; border-bottom: 1px solid #0d55a6; }

@media screen and (max-width: 500px){
    .pagination{ gap: 10px; }
    .pagination .num{ gap: 8px; margin: 0 8px; }
}

.visual_search{ display: flex; justify-content: center; gap: 5px; align-items: center; margin-top: 35px; }

.f_category{ width: 160px; height: 54px; box-sizing: border-box; position: relative; z-index: 10; }
.f_category .selectarea{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; box-sizing: border-box;  border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; }
.f_category .selectarea p{ font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.f_category .selectarea i{ font-size: 18px; }
.f_category > ul{ width: 100%; position: absolute; top: calc(100% + 5px); left: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); box-sizing: border-box; padding: 10px 0; background-color: rgba(0,0,0,0.6); display: none; }
.f_category > ul li{ padding: 10px 0; text-align: center; cursor: pointer; box-sizing: border-box; width: 100%; font-size: 18px; letter-spacing: -0.03em; }
.f_category > ul li:hover{ background-color: rgba(255,255,255,0.02); }

.searchbx{ display: flex; justify-content: flex-end; }
.searchbx .inn{ border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; display: flex; width: 100%; max-width: 338px; }
.searchbx .inn input{ height: 52px; padding-left: 25px; box-sizing: border-box; width: 100%; border: none; background: none; font-size: 18px; letter-spacing: -0.03em; color: var(--navy); color: #fff; }
.searchbx .inn input::placeholder{ color: rgba(13, 13, 35, 0.2); }
.searchbx .inn > a{ padding: 0 18px; text-align: center; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

@media screen and (max-width: 1280px){
    .searchbx .inn input{ font-size: 16px; height: 43px; padding-left: 15px; }
    .searchbx .inn > a{ padding: 0 10px; }

    .f_category{ height: 45px; }
    .f_category .selectarea{ padding: 0 15px; }
    .f_category .selectarea p{ font-size: 16px; }

    .f_category > ul li{ font-size: 16px; }
}


@media screen and (max-width: 820px){
    .f_category > ul li{ font-size: 14px; }
}

@media screen and (max-width: 500px){
    .visual_search{ flex-direction: column; }
    .f_category{ width: 100%; }
    .f_category .selectarea{ width: 100%; max-width: 338px; margin: 0 auto; }
    .f_category > ul{ max-width: 338px; left: 50%; transform: translateX(-50%); }

    .searchbx{ justify-content: center; width: 100%; max-width: 338px; }
    .searchbx .inn input{ font-size: 14px; }
}


.explore{ border-top: 1px solid rgba(13, 13, 35, 0.2); border-bottom: 1px solid rgba(13, 13, 35,0.2); display: flex; }
.explore > a{ display: flex; padding: 30px 0; box-sizing: border-box; position: relative; width: 50%; gap: 25px; }
.explore > a i{ font-size: 20px; }
.explore > a p{ font-size: 18px; letter-spacing: -0.03em; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.explore > a._next::after{ content: ''; display: block; width: 1px; height: calc(30 / 90 * 100%); background-color: rgba(13, 13, 35,0.2); position: absolute; top: 50%; transform: translateY(-50%); right: -1px; }
.explore > a._prev{ justify-content: flex-end; padding-left: 10px; }
.explore > a._next{ padding-right: 10px; }

.editor{ padding: 60px 0; box-sizing: border-box; border-top: 1px solid var(--navy); line-height: 1.4; }

@media screen and (max-width: 1280px){
    .explore > a{ padding: 20px 0; gap: 15px; }
    .explore > a p{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    .explore > a{ padding: 15px 0; gap: 10px; }
    .explore > a p{ font-size: 14px; }
}


._sub .tabs{ display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
._sub .tabs > li{  }
._sub .tabs > li > a{ border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; width: 150px; height: 54px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; color: #fff; cursor: pointer; transition-duration: 0.2s; }

._sub .tabs > li.on > a{ background-color: #fff; color: var(--navy); }

@media screen and (max-width: 1280px){
    ._sub .tabs > li > a{ font-size: 16px; width: 120px; height: 45px; }
}

@media screen and (max-width: 820px){
    ._sub .tabs{ margin-top: 30px; }
    ._sub .tabs > li > a{ font-size: 14px; width: 100px; height: 40px; }
}

@media screen and (max-width: 500px){
    ._sub .tabs > li > a{ font-size: 13px; width: 70px; height: 32px; }
    html.jp ._sub .tabs > li > a{ width: 100px; }
}

@media screen and (max-width: 320px){
    html.jp ._sub .tabs > li > a{ font-size: 11px; width: 83px; }
}


._sub .titlebar{ margin-bottom: 25px; }

._sub .wrap .top{ border-top: 1px solid var(--navy); }
._sub .wrap .top > div{ display: flex; align-items: center; font-size: 16px; letter-spacing: -0.03em; padding: 25px 0; gap: 10px;  }
._sub .wrap .top > div p{ cursor: pointer; }
._sub .wrap .top > div > i{ font-size: 20px; transform: rotate(45deg); }

@media screen and (max-width: 820px){
    ._sub .wrap .top > div{ padding: 15px 0; font-size: 14px; }
}


.leftnavi{ width: calc(285 / 1520 * 100%); margin-top: -10px; }
.leftnavi > ul > li{ display: flex; gap: 7px; align-items: baseline; font-size: 24px; letter-spacing: -0.03em; font-weight: 600; padding: 10px 0; transform: translateX(-17px); transition-duration: 0.4s; color: rgba(13, 13, 35, 0.3); cursor: pointer; line-height: 1.3; }
.leftnavi > ul > li span{ width: 16px; display: flex; align-items: center; opacity: 0;  transition-duration: 0.4s; }
.leftnavi > ul > li.on{ transform: translateX(0); color: #0d55a6; }
.leftnavi > ul > li.on span{ opacity: 1; }

@media screen and (min-width: 821px){
    .leftnavi > ul > li:hover{ color: #0d55a6; }
}

@media screen and (max-width: 1280px){
    .leftnavi > ul > li{ font-size: 20px; }
}

@media screen and (max-width: 820px){
    .leftnavi > ul > li{ font-size: 18px; gap: 5px; }
    .leftnavi > ul > li span{ width: 12px; }
}

@media screen and (max-width: 500px){
    .leftnavi{ display: none; }
}


/* 그라데이션 버튼 스타일 */
.gradBtn{ display: flex; justify-content: center; }
.gradBtn .grad{ display: flex; align-items: center; justify-content: center; font-size: 20px; position: relative; border-radius: 10px; overflow: hidden; gap: 40px; padding: 15px 0; width: 160px; color: #fff; transition-duration: 0.2s; }
.gradBtn .grad::after{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(90deg, #bdfeee, #0d55a6); z-index: 0; transition: opacity 0.4s; }
.gradBtn .grad::before{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: var(--navy); z-index: 0; transition: opacity 0.4s; border-radius: 12px; }
.gradBtn .grad span{ font-weight: 600; letter-spacing: -0.04em; position: relative; z-index: 1; }
.gradBtn .grad i{ font-size: calc(16 / 20 * 1em); position: relative; z-index: 1; }

@media screen and (min-width: 821px){
    .gradBtn .grad:hover{ color: #fff; }
    .gradBtn .grad:hover::after{ opacity: 0; }
}

@media screen and (max-width: 1280px){
    .gradBtn .grad{ width: 120px; font-size: 16px; gap: 20px; }
}

@media screen and (max-width: 820px){
    .gradBtn .grad{ width: 110px; padding: 12px 0; font-size: 14px; }
}



/* 서브비주얼 */
.subVisual{ width: 100%; position: relative; color: #fff; height: 910px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-bottom: calc(50 / 910 * 100%); box-sizing: border-box; }
.subVisual .bg{ width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; }
.subVisual .bg img{ width: 100%; height: 100%; object-fit: cover; }
.subVisual h1{ font-size: 18px; letter-spacing: -0.025em; }
.subVisual h2{ font-size: 72px; letter-spacing: -0.03em; line-height: calc(74 / 54); margin-top: 15px; font-weight: 500; }
.subVisual h2 b{ font-weight: 600; }
.subVisual .wrap > p{ font-size: 22px; letter-spacing: -0.03em; color: #fff; margin-top: 35px; line-height: calc(36 / 22); }

.subVisual.center{ text-align: center; }


@media screen and (max-width: 1280px){
    .subVisual h1{ font-size: 16px; }
    .subVisual h2{ font-size: 50px; }
    .subVisual .wrap > p{ font-size: 18px; margin-top: 20px; }
}

@media screen and (max-width: 820px){
    .subVisual{ height: 480px; }
    .subVisual h1{ font-size: 14px; }
    .subVisual h2{ font-size: 35px; margin-top: 10px; }
    .subVisual .wrap > p{ font-size: 16px; margin-top: 15px; }
}

@media screen and (max-width: 500px){
    .subVisual h1{ font-size: 13px; }
    .subVisual h2{ font-size: 26px; }
    .subVisual .wrap > p{ font-size: 14px; margin-top: 10px; }
}