/*團購產品簡介css重置*/
        .kol-proinfo,
        .kol-proinfo * {
            padding: unset;
            margin: unset;
            box-sizing: border-box;
            list-style-type: none;
        }

        /* 團購產品簡介css樣式 */
        .kol-proinfo {
            width: 100%;
            padding: 3vh 0;
            display: flex;
            align-items: center;
        }

        .kol-proinfo .kol-area {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: auto;
            margin: 5% 3%;
        }

        .kol-area>.img-frame {
            width: 100%;
        }

        .kol-area img {
            width: 100%;
        }

        .kol-area .title {
            display: inline-block;
            width: 100%;
            font-size: 1.2rem;
            text-align: center;
            letter-spacing: 1rem;
            border-top: solid 1px black;
            border-bottom: solid 1px black;
            margin: 1rem 0 2rem;
            padding: 2px 0;
        }

        .kol-area ul {
            margin: 1rem 0 0;
        }

        .kol-area li {
            display: inline-block;
            font-size: 0.9rem;
            letter-spacing: 2px;
            border: solid 1px black;
            border-radius: 10rem;
            padding: 1px 0.8rem;
            margin-bottom: 0.8rem;
        }

        .kol-area li::before {
            content: "#";
        }

        .kol-proinfo .product-area {
            width: 70%;
            padding: calc(42%*(1/2)) 0;
            background-size: cover;
            background-position: center center;
            position: relative;
        }

        @media screen and (max-width:912px) {
            .kol-proinfo {
                flex-direction: column;
            }

            .kol-proinfo .kol-area {
                width: 100%;
                margin: 0 auto 0;
            }

            .kol-area>.img-frame {
                width: 80%;
            }

            .kol-area .title {
                width: 90%;
                margin: 1rem 0 0;
            }

            .kol-area ul {
                width: 100%;
                overflow-x: auto;
                display: flex;
                flex-wrap: nowrap;
                margin: 1.5rem 0 0.5rem;
                padding: 0 5% 0.3rem;
            }

            .kol-area li {
                white-space: nowrap;
                margin-left: 0.5rem;
            }

            .kol-area li:first-child {
                margin-left: unset;
            }

            .kol-proinfo .product-area {
                width: 100%;
                padding: calc(70%*(1/2)) 0;
                margin: auto;
            }

        }


        /*團購購物須知css重置*/
        .shop-note,
        .shop-note * {
            padding: unset;
            margin: unset;
            box-sizing: border-box;
            position: unset;
            top: unset;
            left: unset;
            right: unset;
            bottom: unset;
        }

        /* 團購購物須知css樣式 */
        .shop-note {
            position: relative;
            margin-bottom: 3vh;
        }

        .shop-note::before {
            content: "www.nidooooo.com";
            writing-mode: vertical-lr;
            position: absolute;
            top: 3rem;
            left: 1rem;
            color: #5c8eb3;
            font-size: 1rem;
            font-weight: 900;
            letter-spacing: 0.1rem;
            background-color: white;
            padding: 1rem 0;
        }

        .shop-note::after {
            content: "www.nidooooo.com";
            writing-mode: vertical-lr;
            position: absolute;
            bottom: 3rem;
            right: 1rem;
            color: #5c8eb3;
            font-size: 1rem;
            font-weight: 900;
            letter-spacing: 0.1rem;
            background-color: white;
            padding: 1rem 0;
        }

        .shop-note>div {
            width: 100%;
            border: 1.4rem solid #5c8eb3;
            padding: 4rem;
        }

        .shop-note h1 {
            color: #5c8eb3;
            font-size: 3rem;
            margin-bottom: 1.5rem;
        }

        .shop-note li {
            list-style-type: none;
            display: inline-block;
            font-size: 1.3rem;
            font-weight: bolder;
            color: #5c8eb3;
            border: 2px solid #5c8eb3;
            border-radius: 10rem;
            padding: 0.3rem 1rem;
            margin-bottom: 1.2rem;
            letter-spacing: 0.2rem;
        }

        .shop-note li:last-child {
            margin: unset;
        }

        .shop-note li::before {
            content: "•";
            margin: 0.5rem;
        }

        .shop-note li::after {
            content: "•";
            margin: 0.5rem;
        }

        @media screen and (max-width:912px) {
            .shop-note>div {
                border: 1rem solid #5c8eb3;
                padding: 2rem 1rem;
            }

            .shop-note h1 {
                font-size: 2rem;
            }

            .shop-note::before {
               left: 0rem;
                top: 3rem;
                font-size: 0.8rem;
            }

            .shop-note::after {
                right: 0rem;
                bottom: 3rem;
                font-size: 0.8rem;
            }

            .shop-note li {
                font-size: 1rem;
                position: relative;
                /* text-indent: -1.6rem; */
                padding: 0.5rem 2rem;
                /* padding-left: 2.5rem; */
                margin-bottom: 1rem;
            }

            .shop-note li::before {
                display: none;
                content: "•••";
                writing-mode: vertical-lr;
                position: absolute;
                left: 0.1rem;
                opacity: 0.6;
                top: 50%;
                transform: translateY(-80%);
            }

            .shop-note li::after {
                display: none;
                content: "•••";
                writing-mode: vertical-lr;
                position: absolute;
                right: 0.1rem;
                opacity: 0.6;
                top: 50%;
                transform: translateY(-80%);
            }

        }