@charset "utf-8";
html {overflow-anchor: none;}

.hero-section:not(.hero-ready) .hero-tit-wrap,
.hero-section:not(.hero-ready) .hero-bottom-title,
.hero-section:not(.hero-ready) .sideTxt,
.hero-section:not(.hero-ready) .hero-cursor-line {visibility:hidden;}

.hero-section {overflow:hidden; position:relative; height: fit-content; padding-block: 0 !important; background-color:var(--color-white);}
.hero-section .l-inner {height: calc(100vh - var(--header-height)); max-height:1000px; min-height: fit-content; max-width: 1680px; display: flex; flex-direction: column; justify-content: center; row-gap: var(--fs-20); padding-block: var(--fs-24);}
.hero-section .hero-tit-wrap,
.hero-section .hero-bottom-title {position: relative; z-index: 10;}
.hero-section .h2Bx {overflow:hidden;}
.hero-section .hero-tit .char {display:inline-block;}
.hero-section .hero-content-wrap {position: relative; z-index: 10; --hero-visual-width:min(50%, 800px); --hero-visual-half:calc(var(--hero-visual-width) / 2); --hero-side-gap:0px;}

.hero-section .hero-visual-wrap {display:flex; flex-direction:column; align-items:center; row-gap: var(--fs-16); width:var(--hero-visual-width); margin: 0 auto;}
.hero-section .hero-search-box {display:flex; align-items:center; width:100%; height: var(--fs-64); max-height: 60px; padding: 8px var(--fs-20); border-radius:999px;}
.hero-section .hero-search-box span {flex:1; padding-left:14px; font-size:var(--fs-18); font-weight:500; color:var(--grayscale8);}
.hero-section .hero-search-icon,
.hero-section .hero-btn-icon {height: 100%; max-height: var(--fs-32);}
.hero-section .hero-screen {overflow:hidden; width:100%; padding: var(--fs-20); border-radius:var(--fs-20);}
.hero-section .hero-screen img {display:block; width:100%; height:auto; aspect-ratio: 800 /480; border-radius:var(--fs-16);}
.hero-section .hero-visual-wrap > .s-btn {margin-top:22px;}

.hero-section .hero-screen,
.hero-section .hero-search-box {background-color: rgb(var(--rgb-balck) /  10%); box-shadow:inset 0 0 10px rgb(0 0 0 / 25%); backdrop-filter: blur(3px);}

.hero-section .sideTxt {width:440px; position:absolute; z-index:4;}
.hero-section .sideTxt .card-tit {color: var(--grayscale8); white-space: nowrap;}
.hero-section .sideTxt .lineBx {position:absolute;}
.hero-section .sideTxt .line {position:absolute; display:block; height:1px; background-color:var(--grayscale8); transform-origin:left center;}
.hero-section .sideTxt .point {position:absolute; display:block; width:18px; height:18px; border:2px solid var(--grayscale8); background-color:var(--color-white);}
.hero-section .sideTxt .point::after {content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; background-color:var(--grayscale8); transform:translate(-50%, -50%);}

.hero-section .hero-side-left {right:calc(50% + var(--hero-visual-half) + var(--hero-side-gap) - 24px); top:30%; transform-origin:right top;}
.hero-section .hero-side-left .lineBx {left:0; top:76px; width:100%; height:120px;}
.hero-section .hero-side-left .line {transform-origin:left center;}
.hero-section .hero-side-left .line-horizontal {left:0; top:0; width:65%;}
.hero-section .hero-side-left .line-diagonal {left:65%; top:0; width:23.4%; transform:rotate(68deg);}
.hero-section .hero-side-left .line-last {right: 18px; top:95px; width: 22%;}
.hero-section .hero-side-left .point {left:95.4%; top:86px;}

.hero-section .hero-side-right {left:calc(50% + var(--hero-visual-half) + var(--hero-side-gap) - 24px); top:55%; transform-origin:left top;}
.hero-section .hero-side-right .card-tit {text-align: right;}
.hero-section .hero-side-right .lineBx {right:0; top:var(--fs-48); width:100%; height:110px;}
.hero-section .hero-side-right .line {transform-origin:right center;}
.hero-section .hero-side-right .point {left:0; top:86px;}
.hero-section .hero-side-right .line-first {left:18px; top:95px; width: 22%;}
.hero-section .hero-side-right .line-diagonal {right: 65%; top: 0; width:23.4%; transform:rotate(-68deg);}
.hero-section .hero-side-right .line-horizontal {right: 0; top:0; width:65%;}


.hero-section .hero-bottom-title {text-align: right;}
.hero-section .hero-bottom-title .rotate-bracket {display:inline-block; color:var(--color-main);}
.hero-section .hero-bottom-title .rotate-word {display:inline-block; white-space:nowrap;}
.hero-section .hero-bottom-title .rotate-word .char,
.hero-section .hero-bottom-title .bottom-static-text .char {display:inline-block;}
.hero-section .hero-cursor-line {visibility:visible; opacity:1; pointer-events:none; position:absolute; z-index:2; will-change:transform;}
.hero-section .hero-cursor-line-x {left:0; top:0; width:100%; height:1px; background-image:repeating-linear-gradient(to right, var(--grayscale4) 0, var(--grayscale4) 8px, transparent 8px, transparent 18px); transform:translate3d(0, var(--cursor-y, 0px), 0);}
.hero-section .hero-cursor-line-y {left:0; top:0; width:1px; height:100%; background-image:repeating-linear-gradient(to bottom, var(--grayscale4) 0, var(--grayscale4) 8px, transparent 8px, transparent 18px); transform:translate3d(var(--cursor-x, 0px), 0, 0);}


.introduce-section .template-wrap {display: flex; flex-direction: column; align-items: center; row-gap: 48px;}
.introduce-section .function-list {display: flex; flex-direction: column; row-gap: 100px;}
.introduce-section .function-wrap {display: flex; align-items: flex-start; column-gap: 140px;}
.introduce-section .function-wrap:nth-child(2n-1) {justify-content: flex-end;}
.introduce-section .function-wrap .thumb-wrap {overflow: hidden; width: 70%; max-width: 1005px; height: 460px; border-radius: 8px; box-shadow: var(--sitelo-shadow);}
.introduce-section .function-wrap span {display: flex; align-items: center; column-gap: 8px; font-size: var(--fs-18); color: var(--grayscale8);}
.introduce-section .function-wrap span b {color: var(--color-main);}
.introduce-section .function-wrap strong {word-break: keep-all; display: block; margin-top: 4px; font-size: var(--fs-24); font-weight: 500; color: var(--grayscale9);}
.introduce-section .function-wrap p {margin-top: 20px; font-size: var(--fs-18); color: var(--grayscale8);}
.introduce-section .btn-container {display: flex; align-items: center; justify-content: center; width: 100%;}

.price-section .section-tit {text-align: center;}

@media (hover:hover) and (pointer:fine) {
    .hero-section .hero-cursor-line {visibility:visible;}
}

@media all and (min-width:769px) {
    .hero-section.hero-float .hero-side-left {
        animation: floatLeft 2s ease-in-out infinite alternate;
    }

    .hero-section.hero-float .hero-side-right {
        animation: floatRight 2.5s ease-in-out infinite alternate;
    }

    @keyframes floatLeft {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-12px);
        }
    }

    @keyframes floatRight {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(12px);
        }
    }
}

@media all and (max-width:1750px) {
    .hero-section .sideTxt {scale:0.9;}
}

@media all and (max-width:1440px) {
    .hero-section .sideTxt {scale:0.8;}
}

@media all and (max-width:1366px) {
    .hero-section .sideTxt {scale:0.7;}
}

@media all and (max-width:1280px) {
    .hero-section {min-height: unset;}
    .hero-section .l-inner {height: fit-content; padding-block: var(--fs-40);}
    .hero-section .hero-side-left {right:calc(50% + var(--hero-visual-half) + var(--hero-side-gap) - 20px);}
    .hero-section .hero-side-right {left:calc(50% + var(--hero-visual-half) + var(--hero-side-gap) - 20px);}

    .hero-section .sideTxt {scale: 0.65;}

    .introduce-section .template-wrap {row-gap: 40px;}

    .introduce-section .function-list {row-gap: 80px;}
    .introduce-section .function-wrap {column-gap: 80px;}
    .introduce-section .function-wrap .thumb-wrap {width: 68%; height: 400px;}
}

@media all and (max-width:1024px) {
    .hero-section .l-inner {row-gap: var(--fs-36);}
    .hero-section .hero-content-wrap {display: flex; flex-direction: column; row-gap: 24px;}
    .hero-section .sideTxt {scale: 0.6;}
    .hero-section .sideTxt .card-tit {font-size: 24px;}
    .hero-section .hero-side-right .lineBx {top: 46px;}
    .hero-section .hero-side-left .lineBx {top: 86px;}

    .introduce-section .template-wrap {row-gap: 36px;}

    .introduce-section .function-list {row-gap: 72px;}
    .introduce-section .function-wrap {column-gap: 48px;}
    .introduce-section .function-wrap .thumb-wrap {width: 62%; height: 360px;}
    .introduce-section .function-wrap p {margin-top: 16px;}
}

@media all and (max-width: 950px) {
    .hero-section .sideTxt {scale: 0.55;}
}

@media all and (max-width: 880px) {
    .hero-section .sideTxt {scale: 0.5;}
    .hero-section .sideTxt .card-tit {font-size: 30px;}
    .hero-section .hero-side-right .lineBx {top: 56px;}
    .hero-section .hero-side-left .lineBx {top: 96px;}
    .hero-section .hero-side-right .line-horizontal,
    .hero-section .hero-side-left .line-horizontal {width: 78%;}
    .hero-section .hero-side-left .line-diagonal {left: 78%;}
    .hero-section .hero-side-right .line-diagonal {right: 78%;}
    .hero-section .hero-side-left .line-last,
    .hero-section .hero-side-right .line-first {width: 9%;}
}

@media all and (max-width:768px) {    
    .hero-section .hero-visual-wrap {width: 100%; max-width: 700px;}
    .hero-section .sideTxt {position:unset; scale:1; width:100%; display:flex; align-items:flex-start; flex-direction:column;}
    .hero-section .sideTxt .card-tit {font-size:var(--fs-24);}
    .hero-section .sideTxt .lineBx {position:unset; height:unset; display:flex; align-items:center; flex:1;}
    .hero-section .sideTxt .line {position:unset; width:calc(100% - 16px);}
    .hero-section .sideTxt .point {position:relative; left:unset !important; top:unset !important; width:16px; height:16px;}

    .hero-section .hero-side-left {right:unset; left:0; top:20%;}
    .hero-section .hero-side-left .card-tit {padding-left:16px;}
    .hero-section .hero-side-left .line {transform-origin: left center; background:linear-gradient(90deg, transparent 0%, var(--grayscale8) 100%);}

    .hero-section .hero-side-right {left:unset; right:0; top:unset; bottom:10%; align-items:flex-end; flex-direction:column-reverse;}
    .hero-section .hero-side-right .card-tit {padding-right:16px;}
    .hero-section .hero-side-right .line {transform-origin: right center; background:linear-gradient(90deg, var(--grayscale8) 0%, transparent 100%);}

    .hero-section .sideTxt .line-diagonal,
    .hero-section .hero-side-right .line-first,
    .hero-section .hero-side-left .line-last {display:none;}

    .introduce-section .template-wrap {align-items: stretch; row-gap: 32px;}

    .introduce-section .function-list {row-gap: 64px;}
    .introduce-section .function-wrap,
    .introduce-section .function-wrap:nth-child(2n-1) {flex-direction: column; align-items: stretch; justify-content: flex-start; row-gap: 24px; column-gap: 0;}
    .introduce-section .function-wrap:nth-child(2n) {align-items: flex-end;}
    .introduce-section .function-wrap:nth-child(2n) .txt-wrap {text-align: right;}
    .introduce-section .function-wrap:nth-child(2n) .txt-wrap span {justify-content: flex-end;}
    .introduce-section .function-wrap .thumb-wrap {order: 1; width: 100%; max-width: none; height: auto; aspect-ratio: 335 / 220;}
    .introduce-section .function-wrap .txt-wrap {order: 2;}
    .introduce-section .function-wrap span {font-size: var(--fs-16);}
    .introduce-section .function-wrap strong {font-size: var(--fs-22);}
    .introduce-section .function-wrap p {margin-top: 14px; font-size: var(--fs-16);}
    
    .template-list {flex-direction: column; align-items: stretch; row-gap: 20px; column-gap: 0;}
    .template-card {width: 100%; border-radius: 12px; display: flex;}
    .template-card .thumb-wrap {width: 40%; flex-shrink: 0;}
}

@media all and (max-width:480px) {
    .introduce-section .template-wrap {row-gap: 28px;}

    .introduce-section .function-list {row-gap: 56px;}
    .introduce-section .function-wrap {row-gap: 20px;}
    .introduce-section .function-wrap .thumb-wrap {border-radius: 6px; aspect-ratio: 335 / 230;}
    .introduce-section .function-wrap span {column-gap: 6px; font-size: var(--fs-15);}
    .introduce-section .function-wrap strong {margin-top: 6px; font-size: var(--fs-20);}
    .introduce-section .function-wrap p {margin-top: 12px; font-size: var(--fs-15);}

    .template-list {row-gap: 16px;}
    .template-card {border-radius: 10px; flex-direction: column;}
    .template-card .thumb-wrap {width: 100%;}
    .template-card .info-wrap {row-gap: 4px;}
}

@media all and (max-width: 375px) {
    .hero-section .hero-tit {font-size: 34px;}
    .hero-section .hero-content-wrap {row-gap: 16px;}
}