@charset "UTF-8";

.detail-box .des h1, .detail-box .gategory, .detail-box .name {
    font-family: Arial;
    font-weight: 400;
    letter-spacing: normal
}

.container {
    padding-bottom: 6.25rem
}

.image-show-box {
    grid-area: image-show-box
}

.video-show {
    grid-area: video-show
}

.detail-box {
    grid-area: detail-box;
    color: #fff
}

    .detail-box .name {
        font-size: 2.5rem;
        color: #fff
    }

    .detail-box .gategory {
        font-size: 1.5rem;
        color: #aaa
    }

    .detail-box .line {
        height: .0625rem;
        /*        background-image: linear-gradient(270deg,#cb3ffc 8%,#4f8bff 50%);*/
        background: linear-gradient(90deg, transparent, rgba(255, 195, 0, 0.8), rgba(230, 0, 73, 0.7), transparent);
        margin: .4375rem 0 .875rem
    }

    .detail-box .des h1 {
        font-size: .875rem;
        color: #d8d8d8
    }

    .detail-box .des p, .detail-box .effect-bos .effects-items .item {
        color: #9e9e9e;
        font-weight: 400;
        letter-spacing: normal;
        font-family: Arial
    }

    .detail-box .des p {
        font-size: .875rem
    }

    .detail-box .price-box {
        margin: 1.25rem 0 0;
        display: grid;
        grid-template-columns: repeat(3,1fr)
    }

        .detail-box .price-box .price {
            display: flex;
            font-family: Arial;
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            justify-content: start
        }

            .detail-box .price-box .price del {
                display: none
            }

        .detail-box .price-box button {
            width: auto;
            height: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: .625rem
        }

            .detail-box .price-box button img {
                width: 1.125rem;
                height: auto
            }

        .detail-box .price-box .shots {
            display: flex;
            justify-content: end;
            align-items: center
        }

            .detail-box .price-box .shots span {
                font-size: 1rem;
                background: linear-gradient(266deg,#fcb03f 15%,#ff4c81 90%);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                -webkit-text-fill-color: transparent
            }

    .detail-box .effect-bos {
        position: relative;
        z-index: 100
    }

        .detail-box .effect-bos .title {
            display: grid;
            grid-template-columns: 1fr 1fr;
            font-family: Arial;
            font-size: .9375rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #d8d8d8;
            align-items: center
        }

            .detail-box .effect-bos .title .Colors {
                display: grid;
                grid-template-columns: 6.25rem 1fr
            }

                .detail-box .effect-bos .title .Colors .items {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    gap: .625rem
                }

                    .detail-box .effect-bos .title .Colors .items .item {
                        width: 1.25rem;
                        height: 1.25rem;
                        border-radius: 50%
                    }

        .detail-box .effect-bos .effects-items {
            display: grid;
            grid-template-columns: repeat(6,1fr);
            gap: .9375rem;
            margin: 1.25rem 0 0
        }

            .detail-box .effect-bos .effects-items .item {
                display: grid;
                grid-template-columns: 1fr;
                row-gap: .3125rem;
                justify-content: center;
                align-items: center;
                justify-items: center;
                font-size: .625rem;
                position: relative
            }

                .detail-box .effect-bos .effects-items .item img {
                    height: auto;
                    display: block;
                    width: 4.5625rem;
                    aspect-ratio: 1/1;
                    border-radius: 50%
                }

                .detail-box .effect-bos .effects-items .item p {
                    text-align: center
                }

@media screen and (min-width:768px) and (max-width:1024px) {
    .detail-box .effect-bos {
        grid-template-columns: repeat(3,1fr)
    }
}

.detail-box .ext {
    margin: 3.625rem 0 0;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    row-gap: .625rem;
    column-gap: 1.25rem
}

    .detail-box .ext .item {
        background-color: #272727;
        border-radius: .625rem;
        display: grid;
        grid-template-columns: 2.5rem 1fr;
        grid-template-rows: 2.5rem 1.875rem;
        column-gap: .3125rem;
        row-gap: .1875rem
    }

        .detail-box .ext .item img {
            justify-self: end;
            align-self: end;
            width: 1.125rem
        }

        .detail-box .ext .item h1 {
            align-self: end;
            font-family: Arial;
            font-size: .875rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #ffc300
        }

        .detail-box .ext .item p {
            grid-column: 2;
            grid-row: 2;
            font-family: Arial;
            font-size: .875rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff
        }

.detail-box .tags .items button, .detail-box .tags .title {
    font-family: Arial;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: normal
}

.detail-box .tags {
    margin: 1.25rem 0 0
}

    .detail-box .tags .title {
        color: #d8d8d8
    }

    .detail-box .tags .items {
        display: flex;
        gap: .625rem;
        margin: .9375rem 0 0;
        align-items: center;
        flex-wrap: wrap
    }

        .detail-box .tags .items .item {
            width: auto;
            height: 2.125rem;
            padding: 0 .625rem;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            border: .0625rem solid #d8d8d8;
            border-radius: .5rem
        }

        .detail-box .tags .items button {
            width: 12.25rem;
            height: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(90deg, #FF5733, #FFC300);
            gap: .625rem;
            border-radius: 0.625rem;
            color: #fff
        }
		
        .detail-box .tags .items button:hover{
            color: #631b87;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(255,195,0,0.4);
        }

            .detail-box .tags .items button img {
                width: 1.25rem;
                height: 1.25rem
            }

.reviews-box {
    grid-area: reviews-box
}

:root {
    --effects-model-top: 0px;
    --effects-model-left: 0px
}

.effects-modal {
    background-color: #161618;
    border-radius: .625rem;
    padding: .9375rem;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.3);
    z-index: 1000;
    opacity: 1;
    transition: opacity .3s,visibility .3s;
    display: grid;
    grid-template-columns: 8rem 14.25rem;
    column-gap: .625rem;
    position: absolute
}

    .effects-modal.show-below::before {
        top: -1rem;
        transform: var(--arrow-transform,translateX(-50%)) rotate(180deg);
        border-color: transparent transparent #161618
    }

    .effects-modal .left {
        display: flex;
        align-items: center;
        justify-content: center
    }

        .effects-modal .left .modal-icon {
            width: 8rem;
            aspect-ratio: 1/1;
            border-radius: 50%;
            background-color: #000
        }

    .effects-modal .right .modal-title {
        font-size: 1rem;
        color: #fff;
        margin-bottom: .3125rem;
        font-weight: 700
    }

    .effects-modal .right .modal-description {
        font-size: .75rem;
        color: #d8d8d8
    }

.effects-modal-pointer {
    position: absolute;
    top: var(--effects-model-top);
    left: var(--effects-model-left);
    transform: var(--arrow-transform,translateX(-50%));
    border-width: .5rem;
    border-style: solid;
    border-color: #161618 transparent transparent
}

.effects-modal-hidden {
    visibility: hidden
}

@media screen and (max-width:768px) {
    .box {
        display: grid;
        margin: 0 .5625rem;
        grid-template-columns: 1fr;
        grid-template-areas: "image-show-box" "detail-box" "video-show" "reviews-box"
    }

        .box .box-left, .box .box-right {
            display: contents
        }

        .box .image-show-box {
            position: relative;
            background-color: #121212;
            width: calc(100vw - 1.125rem);
            aspect-ratio: 1/1;
            border-radius: .3125rem
        }

            .box .image-show-box .images-item {
                width: 100%;
                height: 100%
            }

                .box .image-show-box .images-item > div {
                    width: 100%;
                    height: 100%;
                    display: none;
                    justify-content: center;
                    align-items: center
                }

                    .box .image-show-box .images-item > div img {
                        max-width: 100%;
                        max-height: 100%
                    }

                .box .image-show-box .images-item .active {
                    display: flex
                }

            .box .image-show-box .active-box {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                width: auto;
                height: 1.25rem;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: .1875rem
            }

                .box .image-show-box .active-box button {
                    background-color: rgba(255,255,255,.5);
                    width: 1.25rem;
                    height: .375rem;
                    border-radius: .1875rem
                }

                    .box .image-show-box .active-box button.active {
                        background-color: #023cb9;
                        width: 1.5625rem;
                        height: .375rem
                    }

        .box .detail-box .price-box {
            grid-template-columns: repeat(2,1fr)
        }

            .box .detail-box .price-box .shots {
                justify-content: start
            }

        .box .detail-box .effect-bos .title {
            grid-template-columns: 12.5rem 1fr
        }

            .box .detail-box .effect-bos .title .Colors {
                grid-template-columns: auto 1fr;
                column-gap: .3125rem
            }

        .box .detail-box .effect-bos .effects-items {
            grid-template-columns: repeat(4,1fr)
        }

        .box .detail-box .tags .items button {
            width: 100%
        }

        .box .video-show {
            margin: .9375rem 0 0
        }

            .box .video-show video {
                display: block;
                width: 100%
            }

        .box .reviews-box {
            grid-area: reviews-box;
            margin: 1.375rem 0 0
        }

            .box .reviews-box .title {
                font-family: Arial;
                font-size: 1.125rem;
                font-weight: 400;
                letter-spacing: normal;
                color: rgba(255,255,255,.5);
                margin: 0 0 1.875rem
            }

            .box .reviews-box .reviews {
                display: grid;
                grid-template-columns: 11.5rem 1fr;
                gap: .625rem
            }

                .box .reviews-box .reviews .rating-summary {
                    width: 100%;
                    height: 11.1875rem;
                    background: var(--selected-button);
                    border-radius: 1.5625rem;
                    display: grid;
                    grid-template-columns: 1fr;
                    justify-items: center
                }

                    .box .reviews-box .reviews .rating-summary .number {
                        display: block;
                        font-family: Arial;
                        font-size: 3.5rem;
                        font-weight: 400;
                        letter-spacing: normal;
                        color: #d8d8d8;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 6.25rem
                    }

                    .box .reviews-box .reviews .rating-summary .of-total {
                        font-family: Arial;
                        font-size: .9375rem;
                        font-weight: 400;
                        letter-spacing: normal;
                        color: rgba(255,255,255,.3);
                        display: flex;
                        justify-content: center;
                        align-items: center
                    }

                .box .reviews-box .reviews .buttons {
                    display: flex;
                    flex-direction: column;
                    justify-content: end;
                    gap: .625rem
                }

                    .box .reviews-box .reviews .buttons button {
                        width: auto;
                        height: 2.5625rem;
                        border-radius: 1.25rem;
                        background: #1759aa;
                        font-family: Arial;
                        font-size: .875rem;
                        font-weight: 400;
                        letter-spacing: normal;
                        color: #fff;
                        padding: 0 .625rem 0 3.125rem
                    }

                    .box .reviews-box .reviews .buttons .ddd {
                        background-image: url(../images/3d-icon.png);
                        background-repeat: no-repeat;
                        background-position: .75rem center;
                        background-size: 1.8125rem auto
                    }

                    .box .reviews-box .reviews .buttons .fire {
                        background-image: url(../images/fire-icon.png);
                        background-repeat: no-repeat;
                        background-position: 1.25rem center;
                        background-size: .78125rem auto
                    }

    .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 .9375rem
    }

        .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
            }

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

@media screen and (min-width:768px) {
    .container {
        background-color: #000;
        position: relative
    }

        .container .breadcrumb {
            max-width: 88.75rem;
            width: unset
        }

        .container .box {
            padding: 1rem 0 0;
            display: grid
        }

            .container .box .image-show-box {
                position: relative;
                grid-area: image-show-box;
                width: 100%;
                height: auto;
                background-color: rgba(35,35,35,.4);
                border-radius: .9375rem;
                aspect-ratio: 1/1
            }

                .container .box .image-show-box .images-item {
                    width: 100%;
                    height: 100%
                }

                    .container .box .image-show-box .images-item > div {
                        width: 100%;
                        height: 100%;
                        display: none;
                        justify-content: center;
                        align-items: center
                    }

                        .container .box .image-show-box .images-item > div img {
                            max-width: 100%;
                            max-height: 100%
                        }

                        .container .box .image-show-box .images-item .active, .container .box .image-show-box .images-item > div:first-child {
                            display: flex
                        }

                .container .box .image-show-box .active-box {
                    display: block;
                    position: absolute;
                    right: 1.25rem;
                    bottom: 1.25rem;
                    width: 3rem;
                    height: 3rem;
                    background-image: url(../images/showImage-icon.png);
                    background-repeat: no-repeat;
                    background-size: 3rem 3rem;
                    cursor: pointer
                }

            .container .box .video-show {
                margin: .9375rem 0 0;
                grid-area: video-show;
                width: 100%;
                height: auto;
                overflow: hidden
            }

                .container .box .video-show video {
                    display: block;
                    width: 100%;
                    height: auto
                }

            .container .box .detail-box {
                grid-area: detail-box;
                color: #fff;
                background-color: #000;
                padding: 1.25rem
            }

            .container .box .btns {
                grid-area: btns
            }

            .container .box .reviews-box {
                grid-area: reviews-box;
                margin: 1.375rem 0 0
            }

                .container .box .reviews-box .title {
                    font-family: Arial;
                    font-size: 1.125rem;
                    font-weight: 400;
                    letter-spacing: normal;
                    color: rgba(255,255,255,.5);
                    margin: 0 0 1.875rem
                }

                .container .box .reviews-box .reviews {
                    display: grid;
                    grid-template-columns: 11.5rem 1fr;
                    gap: .625rem
                }

                    .container .box .reviews-box .reviews .rating-summary {
                        width: 100%;
                        height: 11.1875rem;
                        background: linear-gradient(90deg, #FF5733, #FFC300);
                        border-radius: 1.5625rem;
                        display: grid;
                        grid-template-columns: 1fr;
                        justify-items: center
                    }

                        .container .box .reviews-box .reviews .rating-summary .number {
                            display: block;
                            font-family: Arial;
                            font-size: 3.5rem;
                            font-weight: 400;
                            letter-spacing: normal;
                            color: #d8d8d8;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            height: 6.25rem
                        }

                        .container .box .reviews-box .reviews .rating-summary .of-total {
                            font-family: Arial;
                            font-size: .9375rem;
                            font-weight: 400;
                            letter-spacing: normal;
                            color: rgba(255,255,255,.3);
                            display: flex;
                            justify-content: center;
                            align-items: center
                        }

                    .container .box .reviews-box .reviews .buttons {
                        display: flex;
                        flex-direction: column;
                        justify-content: end;
                        gap: .625rem
                    }

                        .container .box .reviews-box .reviews .buttons button {
                            width: auto;
                            height: 2.5625rem;
                            border-radius: 1.25rem;
                            background: #ffc300;
                            font-family: Arial;
                            font-size: .875rem;
                            font-weight: 400;
                            letter-spacing: normal;
                            color: #fff;
                            padding: 0 .625rem 0 3.125rem
                        }

                        .container .box .reviews-box .reviews .buttons .ddd {
                            background-image: url(../images/3d-icon.png);
                            background-repeat: no-repeat;
                            background-position: .75rem center;
                            background-size: 1.8125rem auto
                        }

                        .container .box .reviews-box .reviews .buttons .fire {
                            background-image: url(../images/fire-icon.png);
                            background-repeat: no-repeat;
                            background-position: 1.25rem center;
                            background-size: .78125rem auto
                        }

    .search-container {
        display: none
    }
}

@media screen and (min-width:768px) and (min-width:1420px) {
    .container .box {
        width: 88.75rem;
        height: auto;
        grid-template-columns: 51.6875rem 1fr;
        column-gap: 1rem;
        row-gap: 1rem;
        margin: 0 auto
    }
}

@media screen and (min-width:768px) and (max-width:1420px) {
    .container .box {
        width: auto;
        height: auto;
        grid-template-columns: 1fr 1fr;
        column-gap: .5rem;
        row-gap: .5rem;
        margin: 0 2.1875rem
    }
}