@charset "utf-8";
.template-filter-wrap {display:flex; align-items:center; justify-content:space-between; margin-bottom:60px; padding-bottom:20px; border-bottom:1px solid var(--grayscale3);}
.template-filter-wrap .sort {flex-shrink:0;}

.template-view-section {padding:80px 0 120px;}
.template-view-section .template-view-wrap {display:flex; align-items:flex-start; justify-content: space-between;}
.template-view-section .view-thumb-wrap {width:58%; max-width: 877px;}
.template-view-section .view-thumb-main {overflow:hidden; position:relative; width:100%; height: fit-content; aspect-ratio: 877 / 458; border-radius: 8px; box-shadow:var(--sitelo-shadow);}
.template-view-section .view-thumb-main .swiper-slide img {display:block; width:100%; height: 100%; object-fit:cover; object-position: center top;}
.template-view-section .view-thumb-btn {position:absolute; top:50%; z-index:5; display:flex; align-items:center; justify-content:center; width: calc(var(--fs-36) + var(--fs-20)); height: calc(var(--fs-36) + var(--fs-20)); border-radius:50%; background-color:rgba(0,0,0,0.28); transform:translateY(-50%);}
.template-view-section .view-thumb-btn.prev {left: var(--fs-16);}
.template-view-section .view-thumb-btn.next {right: var(--fs-16);}
.template-view-section .view-thumb-btn img {display:block; width: 100%; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.template-view-section .view-thumb-preview {overflow:hidden; width:100%; margin-top:16px;}
.template-view-section .view-thumb-preview .swiper-slide {box-shadow:var(--sitelo-shadow); aspect-ratio: 210 / 110; overflow:hidden; border-radius:8px; opacity:.45; cursor:pointer; transition:opacity .25s ease, transform .25s ease;}
.template-view-section .view-thumb-preview .swiper-slide-thumb-active {opacity:1;}
.template-view-section .view-thumb-preview .swiper-slide:hover {opacity:1;}
.template-view-section .view-thumb-preview .swiper-slide img {display:block; width:100%; height: 100%; object-fit:cover; object-position: center top;}


.template-view-section .view-info-wrap {width: 37%;}
.template-view-section .view-info-wrap .view-tit-wrap {display:flex; flex-direction:column; row-gap:16px;}
.template-view-section .view-info-wrap .badge-wrap {display:flex; align-items:center; gap:6px;}
.template-view-section .view-desc {color:var(--grayscale8);}
.template-view-section .view-price-box {margin-top: var(--fs-36); padding-top: var(--fs-36); border-top:1px solid var(--grayscale3); display:flex; flex-direction:column; row-gap:6px;}
.template-view-section .view-price-box > span {font-size:var(--fs-16); line-height:1.5; color:var(--grayscale6);}
.template-view-section .btn-list {margin-top: calc(var(--fs-20) *4);}
.template-view-section .btn-list > a {width:100%;}
.template-view-section .template-feature-list {display:flex; align-items:center; flex-wrap: wrap; gap:24px;}
.template-view-section .template-feature-list .feature-card {width: calc(100% / 4 - (24px * 3) / 4 ); padding:24px; border-radius:8px; border:1px solid var(--grayscale3); background-color:var(--color-white);}
.template-view-section .template-feature-list .feature-card .icon-wrap {margin-bottom:12px;}
.template-view-section .template-feature-list .feature-card .sub-txt {margin-top:4px; color:var(--grayscale8);}
.template-view-section .template-preview-thumb {width:100%;}
.template-view-section .template-preview-thumb img {width:100%;}

.template-mobile-section {overflow:hidden; padding:clamp(80px,9vw,120px) 0;}
.template-mobile-section .section-tit-wrap {margin-bottom:clamp(40px,5vw,64px);}
.template-mobile-section .mobile-preview-wrap {position:relative; width:100%;}
.template-mobile-section .mobile-preview-content {position:relative; width:100%; max-width: 1120px; margin-inline:auto;}
.template-mobile-section .mobile-preview-content .mobile-preview-slider::after {content:''; pointer-events:none; position:absolute; top:0; left:50%; z-index:5; aspect-ratio: 300 / 568; border: calc(var(--fs-20) / 2) solid var(--grayscale9); border-radius:32px; transform:translateX(-50%); box-sizing:border-box;}
.template-mobile-section .mobile-preview-slider {width:100%; max-width:880px; overflow: hidden; margin-inline:auto;}
.template-mobile-section .mobile-preview-slider .swiper-wrapper {align-items:center;}
.template-mobile-section .mobile-preview-slider .swiper-slide {border-radius: calc(var(--fs-16) * 2); aspect-ratio: 300 / 568; overflow: hidden; transition: transform .45s ease;}
.template-mobile-section .mobile-preview-slider .swiper-slide-prev,
.template-mobile-section .mobile-preview-slider .swiper-slide-next {z-index:1;}
.template-mobile-section .mobile-preview-slider .swiper-slide-active { z-index:3;}
.template-mobile-section .mobile-preview-slider .swiper-slide:not(.swiper-slide-active) {}
.template-mobile-section .mobile-preview-slider .swiper-slide .mobile-thumb {width: 100%; height: 100%;}
.template-mobile-section .mobile-preview-slider .swiper-slide .mobile-thumb img {width:100%; height:100%; object-fit:cover; object-position: center top;}
.template-mobile-section .mobile-preview-content .mobile-preview-slider::after,
.template-mobile-section .mobile-preview-slider .swiper-slide {width:37.5%;}
.template-mobile-section .mobile-txt-slider {margin-top: 80px;}
.template-mobile-section .mobile-txt-slider .swiper-slide {height:auto;}
.template-mobile-section .mobile-txt-slider .txt-wrap .body-txt {margin-top:8px;}
.template-mobile-section .mobile-swiper-btn {width: calc(var(--fs-36) + var(--fs-20)); position:absolute; top:50%; z-index:6; transform:translateY(-50%);}
.template-mobile-section .mobile-swiper-btn img {width: 100%;}
.template-mobile-section .mobile-swiper-btn.prev {left:0;}
.template-mobile-section .mobile-swiper-btn.next {right:0;}

@media screen and (max-width: 1280px) {
    .template-view-section .view-info-wrap {width: 40%;}
}

@media screen and (max-width: 1024px) {
    .template-view-section .template-view-wrap {flex-direction: column; row-gap: calc(var(--fs-20) * 2);}
    .template-view-section .view-thumb-wrap,
    .template-view-section .view-info-wrap {width: 100%; max-width: unset;}

    .template-view-section .btn-list {margin-top: calc(var(--fs-36) * 2);}

    .template-view-section .template-feature-list .feature-card {width: calc(100% / 2 - 24px / 2 );}

    .template-mobile-section .mobile-preview-slider {max-width: 616px;}
}

@media screen and (max-width: 768px) {
    .template-card {width:calc(50% - 8px);}
    .template-filter-wrap {position:relative;}
    .template-filter-wrap .sort {position:absolute; top:calc(100% + 20px); right:0;}

    .template-mobile-section .mobile-preview-slider {max-width: 448px;}
    .template-mobile-section .mobile-preview-content .mobile-preview-slider::after,
    .template-mobile-section .mobile-preview-slider .swiper-slide {width: 50%;}
    .template-mobile-section .mobile-swiper-btn {top: calc(100% + 24px); transform: unset;}
    .template-mobile-section .mobile-swiper-btn.prev {left: 50%; transform: translateX(-100%);}
    .template-mobile-section .mobile-swiper-btn.next {right: 50%; transform: translateX(100%);}
    .template-mobile-section .mobile-txt-slider {margin-top: 100px;}
}

@media screen and (max-width: 480px) {
    .template-card {width:100%;}

    .template-view-section .view-price-box .price-item::after {content:''; flex-basis:100%; width:0; order:1;}
    .template-view-section .view-price-box .price-item strong,
    .template-view-section .view-price-box .price-item span:first-of-type {order:0;}
    .template-view-section .view-price-box .price-item em,
    .template-view-section .view-price-box .price-item b,
    .template-view-section .view-price-box .price-item span:last-of-type {order:2;}

    .template-view-section .template-feature-list .feature-card {width: 100%; padding: 20px;}

    .template-mobile-section .mobile-preview-slider {overflow: visible;}
}

@media screen and (max-width: 375px) {
}