@charset "UTF-8";

:root {
    --pc-base-width: 90rem;
    --pc-base-height: 53.75rem;
    --phone-base-width: 23.4375rem;
    --phone-base-height: 41.6875rem
}

@media screen and (max-width:768px) {
    .carousel-2 > .carousel-inner > .carousel-item a img, .carousel > .carousel-inner > .carousel-item a img {
        max-height: 100%;
        max-width: 100%
    }

    .carousel .round button.active, .carousel .strip button.active, .carousel-2 .round button.active {
        background: #023cb9
    }

    .search-container {
        height: 2.5rem;
        border-radius: .625rem;
        background: linear-gradient(180deg,rgba(255,255,255,.2) 0,rgba(255,255,255,0) 114%);
        position: relative;
        margin: 1.75rem .5rem auto
    }

        .search-container form {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center
        }

            .search-container form .search-input {
                flex: 1;
                padding: .625rem;
                border: none;
                outline: 0;
                font-size: 1rem;
                color: #fff;
                margin-left: .6875rem
            }

                .search-container form .search-input::placeholder {
                    color: rgba(255,255,255,.5)
                }

            .search-container form .search-button {
                background-color: transparent;
                border: none;
                width: 1.5rem;
                height: 1.5rem;
                margin: auto .75rem auto auto
            }

    .carousel .round button, .carousel .strip button {
        border-radius: .15625rem;
        width: 1rem;
        height: .3125rem
    }

    .search-container form .search-button img {
        width: 1.5rem;
        height: 1.5rem
    }

    .carousel {
        margin: .8125rem .5rem auto;
        position: relative
    }

        .carousel > .carousel-inner {
            width: 100%;
            border-radius: .625rem;
            overflow: hidden;
            background-color: #000
        }

            .carousel > .carousel-inner > .carousel-item {
                display: none;
                width: 100%;
                aspect-ratio: 1440/575
            }

                .carousel > .carousel-inner > .carousel-item a {
                    display: flex;
                    width: 100%;
                    height: 100%;
                    justify-content: center;
                    align-items: center
                }

                .carousel > .carousel-inner > .carousel-item.active {
                    display: block
                }

        .carousel > .carousel-control {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: .8125rem;
            gap: .1875rem
        }

        .carousel .strip button {
            background: linear-gradient(0deg,#d8d8d8,#d8d8d8),rgba(255,255,255,.5)
        }

            .carousel .strip button.active {
                width: 1.5rem;
                height: .3125rem
            }

        .carousel .round button {
            background: linear-gradient(0deg,#d8d8d8,#d8d8d8),rgba(255,255,255,.5)
        }

    .carousel-2 .round button, .carousel-2 .strip button {
        width: .52188rem;
        border-radius: .26094rem;
        background: linear-gradient(0deg,#d8d8d8,#d8d8d8),rgba(255,255,255,.5)
    }

    .base-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 1.0625rem .0625rem auto
    }

        .base-box .base-box-title {
            text-align: center;
            font-family: "Noto Sans SC", "SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.375rem;
            letter-spacing: .27px;
            background: linear-gradient(263deg,#cb3ffc 8%,#4f8bff 50%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

            .base-box .base-box-title .button {
                display: none
            }

        .base-box .item-box {
            width: 100%;
            margin-top: 1.0625rem;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch
        }

            .base-box .item-box .item-box-container {
                display: flex;
                gap: .1875rem;
                flex-wrap: nowrap;
                width: max-content
            }

                .base-box .item-box .item-box-container .item-image {
                    width: 10.625rem;
                    aspect-ratio: var(--phone-base-width)/var(--phone-base-height);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 1.25rem;
                    overflow: hidden
                }

    .carousel-2 {
        margin: .8125rem .5rem auto;
        position: relative
    }

        .carousel-2 > .carousel-inner {
            width: 100%;
            border-radius: .625rem;
            overflow: hidden;
            background-color: #000
        }

            .carousel-2 > .carousel-inner > .carousel-item {
                display: none;
                width: 100%;
                aspect-ratio: 412/400
            }

                .carousel-2 > .carousel-inner > .carousel-item a {
                    display: flex;
                    width: 100%;
                    height: 100%;
                    justify-content: center;
                    align-items: center
                }

                .carousel-2 > .carousel-inner > .carousel-item.active {
                    display: block
                }

        .carousel-2 > .carousel-control {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: .8125rem;
            gap: .1875rem
        }

        .carousel-2 .strip button {
            height: .52188rem
        }

            .carousel-2 .strip button.active {
                background: #023cb9;
                width: 1.02188rem;
                height: .52188rem
            }

        .carousel-2 .round button {
            height: .52188rem
        }

    .show-builder {
        margin: 1.0625rem 0
    }

        .show-builder img {
            max-width: 100%
        }

    .pc-show-builder {
        display: none
    }
}

@media screen and (min-width:768px) {
    .carousel .carousel-inner .carousel-item img, .carousel-2 .carousel-item a img {
        max-width: 100%;
        max-height: 100%
    }

    .search-container {
        display: none
    }

    .carousel {
        width: 100vw;
        aspect-ratio: 1440/575;
        position: relative;
        overflow: hidden;
        scroll-behavior: smooth;
        background-color: rgba(255,255,255,.6)
    }

        .carousel .carousel-inner {
            white-space: nowrap;
            display: flex;
            height: 100%;
            position: relative;
            z-index: 3
        }

            .carousel .carousel-inner .carousel-item {
                width: 100vw;
                aspect-ratio: 1440/575;
                display: flex;
                justify-content: center;
                align-items: center
            }

        .carousel .carousel-control {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 3;
            pointer-events: none
        }

            .carousel .carousel-control button {
                pointer-events: all;
                isolation: isolate;
                width: 3rem;
                height: 3rem;
                border-radius: 1.5rem;
                background-color: rgba(255,255,255,.1);
                position: relative;
                z-index: 10;
                margin: 2rem
            }

                .carousel .carousel-control button:nth-child(1)::after {
                    content: "<";
                    color: #fff
                }

                .carousel .carousel-control button:nth-child(2)::after {
                    content: ">";
                    color: #fff
                }

    .base-box {
        position: relative;
        width: 100%;
        overflow: hidden;
        background-color: #272727
    }

        .base-box .base-box-title {
            margin-left: 1.4375rem;
            margin-right: 1.4375rem;
            height: 2.8125rem;
            font-family: "Noto Sans SC", "SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff;
            display: flex;
            align-items: center;
            position: relative
        }

            .base-box .base-box-title .button {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                right: 0
            }

                .base-box .base-box-title .button button {
                    width: 2rem;
                    height: 2rem;
                    display: flex;
                    justify-content: center;
                    align-items: center
                }

                    .base-box .base-box-title .button button img {
                        width: 1rem;
                        height: 1rem
                    }

        .base-box .item-box {
            width: 100%;
            position: relative;
            padding: .9375rem 0
        }

            .base-box .item-box .item-box-container {
                display: flex;
                gap: .625rem;
                flex-wrap: nowrap;
                overflow: hidden
            }

                .base-box .item-box .item-box-container .item-image {
                    flex: 0 0 auto;
                    height: 100%;
                    aspect-ratio: --pc-base-width/--pc-base-height;
                    border-radius: 1.875rem;
                    overflow: hidden
                }

                    .base-box .item-box .item-box-container .item-image a {
                        display: block;
                        width: 100%;
                        height: 100%
                    }

                        .base-box .item-box .item-box-container .item-image a img {
                            display: block;
                            width: 100%;
                            height: 100%;
                            object-fit: cover
                        }

    .carousel-2 {
        width: 100vw;
        position: relative
    }

        .carousel-2 .carousel-item {
            aspect-ratio: 1440/575;
            width: 100vw;
            background-color: rgba(255,255,255,.1)
        }

            .carousel-2 .carousel-item a {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%
            }

        .carousel-2 .carousel-control, .show-builder {
            display: none
        }

    .pc-show-builder {
        margin-top: 1.25rem
    }

        .pc-show-builder .item-box {
            margin: 0;
            display: flex;
            gap: 2.25rem
        }

            .pc-show-builder .item-box .item {
                background-color: #272727;
                flex: 1
            }

                .pc-show-builder .item-box .item .image-box {
                    width: 100%;
                    /*aspect-ratio: 675/321*/
                }

                    .pc-show-builder .item-box .item .image-box img {
                        width: 100%;
                        height: 100%
                    }

                .pc-show-builder .item-box .item .info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 1.25rem
                }

                    .pc-show-builder .item-box .item .info .title h1 {
                        font-family: "Noto Sans SC", "SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
                        font-weight: 700;
                        font-size: 1.5rem;
                        font-variation-settings: "opsz" auto;
                        color: #FFF
                    }

                    .pc-show-builder .item-box .item .info .title h2 {
                        font-family: "Noto Sans SC", "SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
                        font-weight: 400;
                        font-size: .75rem;
                        color: #FFF
                    }

                    .pc-show-builder .item-box .item .info .link-btn a {
                        border-radius: .625rem;
                        background: linear-gradient(90deg, #FF5733, #FFC300);
                        width: 8.96375rem;
                        height: 2.42688rem;
                        display: flex;
                        justify-content: center;
                        align-items: center
                    }

                        .pc-show-builder .item-box .item .info .link-btn a {
                            color: #fff
                        }

                        .pc-show-builder .item-box .item .info .link-btn a:hover {
                                   background: var(--selected-button-hover);
                                   transform: translateY(-4px);
                                   box-shadow: 0 12px 30px rgba(0,0,0,0.4);
                                   color: #631b87
                        }
}