@charset "utf-8";

/* visual */
.visual {
    & .visual-swiper {height: 600px;
        & .swiper-slide {position: relative;
            & .visual-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                &::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
            }
            & .visual-txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;
                & h2 {font-size: 36px; line-height: 1.2; font-weight: 500; color: #fff; margin: 0 0 20px;
                    & strong {font-weight: 700;}
                }
                & p {font-size: 18px; color: #fff;}
            }
            &.swiper-slide-active {
                & .visual-img {
                    & img {animation: imgZoomOut 7s both;}
                }
                & .visual-txt {
                    & h2 {animation: textFadeUp 0.7s both 0.7s;}
                    & p {animation: textFadeUp 1s both 1s;}
                }
            }
        }
    }
}

/* quick */
.quick {padding: 60px 0 80px;
    & .quick-tit {margin: 0 0 36px;
        & span {color: #999;}
        & p {font-size: 30px; font-weight: 600; margin: 4px 0 0;
            & strong {font-weight: 700; color: var(--key-color);}
        }
    }
    & .quick-box {background: #fff; border-radius: 12px; padding: 36px; box-shadow: var(--key-shadow);
        & .quick-search {display: flex; gap: 8px;
            & .bar {width: 100%;
                & input[type="text"] {width: 100%; height: 45px; font-size: 17px; border: 2px solid var(--key-color); border-radius: 4px; padding: 0 12px;}
            }
            & .bt {width: 150px;
                & button {width: 100%; height: 45px; font-size: 18px; font-weight: 600; color: #fff; background: var(--key-color); text-align: center; border-radius: 4px;}
            }
        }
        & .quick-cate {margin: 36px 0 18px;
            > ul {display: flex; gap: 24px;
                > li {
                    & button {font-size: 18px; font-weight: 600; color: #adb5bd;}
                    &.on {
                        & button {color: var(--key-color);}
                    }
                }
            }
        }
        & .quick-list {
            > ul {display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
                > li {
                    & a {display: block; color: #aaa; background: #F8F9FC; border-radius: 4px; text-align: center; padding: 12px 0;
                        &:hover {color: #fff; background: var(--key-color);}
                    }
                }
                &.on {display: grid;}
            }
        }
    }
    @media (width <= 1024px) {padding: 24px 0 60px;
        & .quick-tit {margin: 0 0 24px;
            & span {font-size: 15px;}
            & p {font-size: 24px;}
        }
        & .quick-box {padding: 24px;
            & .quick-search {
                & .bar {
                    & input[type="text"] {font-size: 16px; height: 40px;}
                }
                & .bt {
                    & button {font-size: 16px; height: 40px;}
                }
            }
            & .quick-cate {margin: 24px 0 12px;
                > ul {
                    > li {
                        & button {font-size: 16px;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .quick-box {
            & .quick-list {
                > ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
            }
        }
    }
    @media (width <= 640px) {padding: 24px 0 48px;
        & .quick-tit {margin: 0 0 16px;
            & p {font-size: 20px;}
        }
        & .quick-box {padding: 16px;
            & .quick-search {
                & .bar {
                    & input[type="text"] {height: 36px; font-size: 15px;}
                }
                & .bt {
                    & button {height: 36px; font-size: 15px;}
                }
            }
            & .quick-list {
                > ul {
                    > li {
                        & a {font-size: 15px;}
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .quick-box {
            & .quick-list {
                > ul {
                    > li {
                        & a {font-size: 14px;}
                    }
                }
            }
        }
    }
}

/* item */
.item {padding: 0 0 80px;
    & .tit {display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 36px;
        & p {font-size: 30px; font-weight: 600;
            & strong {font-weight: 700; color: var(--key-color);}
        }
        & a {color: #aaa;}
    }
    & .cate {margin: 0 0 24px;
        > ul {display: flex; gap: 24px; z-index: 2;
            > li {
                & button {font-size: 20px; font-weight: 600; opacity: 0.2;}
                &.on {
                    & button {opacity: 1;}
                }
            }
        }
    }
    & .list {
        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
            > li {background: #fff; box-shadow: var(--key-shadow); border-radius: 8px; overflow: hidden;
                & a {display: block;
                    & .thumbs {position: relative; aspect-ratio: 23 / 14; overflow: hidden;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.5s;}
                        & span {content: ''; position: absolute; top: -20%; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); z-index: 8; pointer-events: none;}
                        &::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 2; opacity: 0; transition: all 0.5s; pointer-events: none;}
                    }
                    & .text {padding: 24px;
                        & .opt {display: flex; gap: 8px; margin: 0 0 8px;
                            & p {font-size: 12px; line-height: 1; font-weight: 500; padding: 4px 8px; background: #f2f4f6; border-radius: 4px;}
                        }
                        & .name {
                            & p {font-size: 20px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                        }
                        & .info {margin: 8px 0 24px;
                            & p {font-size: 14px; color: #999;}
                        }
                        & .price {
                            & p {font-size: 18px;
                                & strong {color: var(--key-color);}
                            }
                        }
                    }
                    &:hover {
                        & .thumbs {
                            & img {transform: translate(-50%, -50%) scale(1.05);}
                            & span {-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);}
                            &::after {opacity: 0.3;}
                        }
                    }
                }
                &.full {grid-column: 1 / 3; grid-row: 1 / 3;
                    & a {
                        & .thumbs {aspect-ratio: 23 / 18;}
                        & .text {padding: 42px 36px;
                            & .opt {margin: 0 0 16px;
                                & p {font-size: 16px;}
                            }
                            & .name {
                                & p {font-size: 36px;}
                            }
                            & .info {margin: 16px 0 24px;
                                & p {font-size: 18px;}
                            }
                            & .price {
                                & p {font-size: 24px;}
                            }
                        }
                    }
                }
            }
            &:has(.full) {grid-template-columns: repeat(5, minmax(0, 1fr));}
            &.type02 {grid-template-columns: repeat(5, minmax(0, 1fr));}
        }
    }
    @media (width <= 1280px) {
        & .list {
            > ul {
                > li {
                    &.full {grid-column: unset; grid-row: unset;
                        & a {
                            & .thumbs {aspect-ratio: 23 / 14;}
                            & .text {padding: 24px;
                                & .opt {margin: 0 0 8px;
                                    & p {font-size: 12px;}
                                }
                                & .name {
                                    & p {font-size: 20px;}
                                }
                                & .info {margin: 8px 0 24px;
                                    & p {font-size: 14px;}
                                }
                                & .price {
                                    & p {font-size: 18px;}
                                }
                            }
                        }
                    }
                }
                &:has(.full) {grid-template-columns: repeat(3, minmax(0, 1fr));
                    > li:last-child {display: none;}
                }
            }
        }
    }
    @media (width <= 1024px) {padding: 0 0 60px;
        & .tit {margin: 0 0 24px;
            & p {font-size: 24px;}
        }
        & .cate {margin: 0 0 18px;
            > ul {
                > li {
                    & button {font-size: 16px;}
                }
            }
        }
        & .list {
            > ul {grid-template-columns: repeat(3, minmax(0, 1fr));
                > li {
                    &:nth-child(7) {display: none;}
                    &:nth-child(8) {display: none;}
                }
            }
        }
    }
    @media (width <= 860px) {
        & .list {
            > ul {grid-template-columns: repeat(2, minmax(0, 1fr));
                &:has(.full) {grid-template-columns: repeat(2, minmax(0, 1fr));}
            }
        }
    }
    @media (width <= 640px) {padding: 0 0 48px;
        & .tit {margin: 0 0 16px;
            & p {font-size: 20px;}
        }
        & .list {
            > ul {gap: 16px;
                > li {
                    & a {
                        & .text {padding: 16px;
                            & .name {
                                & p {font-size: 16px;}
                            }
                            & .info {margin: 8px 0 16px;
                                & p {font-size: 12px;}
                            }
                        }
                    }
                    &.full {
                        & a {
                            & .text {padding: 16px;
                                & .name {
                                    & p {font-size: 18px;}
                                }
                                & .info {margin: 8px 0 16px;
                                    & p {font-size: 12px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .tit {
            & a {font-size: 15px;}
        }
        & .cate {
            > ul {overflow-x: scroll; gap: 16px;
                > li {
                    & button {font-size: 15px;}
                }
            }
        }
        & .list {
            > ul {grid-template-columns: repeat(1, minmax(0, 1fr));
                &:has(.full) {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
        }
    }
}

/* link */
.link {padding: 0 0 80px;
    & .link-box {display: flex; gap: 36px;
        & .con {flex: 1; border-radius: 8px; background: #F6F8FC; box-shadow: var(--key-shadow);
            & a {position: relative; display: block; padding: 36px;
                & span {font-size: 12px; font-weight: 700; letter-spacing: 0.5rem; color: var(--key-color); opacity: 0.3;}
                & h2 {font-size: 24px; font-weight: 600; line-height: 1.2; margin: 12px 0 24px;
                    & strong {font-weight: 700; color: var(--key-color);}
                }
                & p {font-size: 18px; font-weight: 500; color: #aaa;}
                & img {position: absolute; top: 50%; right: 36px; transform: translateY(-50%); transition: all 0.3s;}
                &:hover {
                    & img {top: calc(50% - 12px);}
                }
            }
        }
    }
    @media (width <= 1024px) {padding: 0 0 60px;
        & .link-box {gap: 24px;
            & .con {
                & a {padding: 24px;
                    & h2 {font-size: 20px;}
                    & p {font-size: 15px;}
                    & img {transform: translateY(-50%) scale(0.8); right: 0;}
                }
            }
        }
    }
    @media (width <= 860px) {
        & .link-box {flex-wrap: wrap;
            & .con {width: 100%; flex: unset;}
        }
    }
    @media (width <= 640px) {padding: 0 0 48px;
        & .link-box {gap: 12px;}
    }
}

/* promotion */
.promotion {padding: 0 0 80px;
    & .banner-swiper {
        & .swiper-slide {position: relative; height: 240px; border-radius: 8px; overflow: hidden;
            & a {display: block; width: 100%; height: 100%;
                & .img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
                & .txt {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; color: #fff; padding: 0 48px;
                    & span {display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0.2rem; color: #000; padding: 4px 4px 4px 8px; border-radius: 4px; background: #fff;}
                    & h2 {font-size: 36px; font-weight: 500; margin: 24px 0;
                        & strong {color: var(--key-color);}
                    }
                    & p {}
                }
            }
        }
    }
    @media (width <= 1024px) {padding: 0 0 60px;
        & .banner-swiper {
            & .swiper-slide {height: 200px;
                & a {
                    & .txt {padding: 0 36px;
                        & h2 {font-size: 24px; margin: 12px 0;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {padding: 0 0 48px;}
}

/* intro */
.intro {background: url("/img/main/intro-bg.png") no-repeat center; background-size: cover; padding: 120px 0;
    & .intro-txt {color: #fff; margin: 0 0 120px;
        & p {font-size: 60px; font-weight: 600; line-height: 1.2; margin: 0 0 36px;}
        & span {font-size: 20px; line-height: 1.6;}
    }
    & .intro-box {
        > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
            > li {backdrop-filter: blur(12px); border-radius: 8px; color: #fff; background: rgba(0, 0, 0, 0.2); padding: 36px;
                & p {font-size: 20px; font-weight: 600; margin: 0 0 80px;}
                & span {}
            }
        }
    }
    @media (width <= 1024px) {padding: 80px 0;
        & .intro-txt {margin: 0 0 80px;
            & p {font-size: 40px;}
            & span {font-size: 16px;}
        }
        & .intro-box {
            > ul {
                > li {padding: 24px;
                    & p {font-size: 18px; margin: 0 0 60px;}
                    & span br {display: none;}
                }
            }
        }
    }
    @media (width <= 640px) {padding: 48px 0;
        & .intro-txt {
            & p {font-size: 24px; margin: 0 0 24px;}
            & span {font-size: 15px;}
        }
        & .intro-box {
            > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px;
                > li {padding: 16px;
                    & p {margin: 0 0 12px;}
                    & p br {display: none;}
                    & span {font-size: 15px;}
                }
            }
        }
    }
    @media (width <= 460px) {
        & .intro-txt {
            & span br {display: none;}
        }
    }
}