blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote,
q {
    quotes: "" "";
}

a {
    color: #2f80ed;
}

.main-color {
    color: #209cf2;
}

/* nav */

#TopNum {
    display: none;
}

#kuai3header {
    width: 100%;
    box-sizing: border-box;
    z-index: 999;
    background: #494949;
    height: 45px;
    line-height: 45px;
}

    #kuai3header .words {
        margin: 0 auto;
        max-width: 1144px;
    }

        #kuai3header .words h1.logo {
            background: url(https://events.tk3c.com/events_net/events_net/top/images/header-home-new.svg?2) no-repeat;
            width: 219px;
            height: 35px;
            display: inline-block;
            text-indent: -9999px;
            white-space: nowrap;
            overflow: hidden;
            float: left;
            margin: 5px 10px;
        }

        #kuai3header .words ul.font {
            /*float: right;*/
            line-height: 45px;
            display: block;
            z-index: 99999;
            list-style: none;
            margin: 0;
            height: 45px;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: flex-end;
        }

            #kuai3header .words ul.font li {
                width: auto;
                margin: 0;
                padding: 0;
                height: 40px;
                display: inline-block;
                text-align: right;
                overflow: hidden;
                flex-shrink: 0;
            }

                #kuai3header .words ul.font li > a {
                    color: #fff;
                    text-decoration: none;
                    font-size: 12px;
                    border-right: 1px solid #fff;
                    padding: 0 8px;
                    letter-spacing: 1px;
                    width: auto;
                }

li.newsale a {
    color: #fdff00 !important;
    line-height: 40px;
}

    li.newsale a > b {
        background: #fdff00;
        color: #494949;
        border-radius: 5px;
        padding: 0 2%;
        font-size: 10px;
        margin-right: 5px;
    }

    li.newsale a:after {
        content: "▶";
        margin-left: 5px;
        font-size: 80%;
    }

@media (max-width: 750px) {
    .TkecTop .menu {
        width: 100%;
        background: #494949;
        background: rgba(73, 73, 73, 0.95);
        float: none;
        overflow: hidden;
        z-index: 99999;
        max-height: 0;
        position: absolute;
        top: 44px;
        right: 0;
        left: 0;
        -webkit-transition: max-height 1s;
        -o-transition: max-height 1s;
        transition: max-height 1s;
    }

        .TkecTop .menu li {
            float: none;
        }

            .TkecTop .menu li:active {
                background: rgba(120, 120, 120, 0.4);
            }

        .TkecTop .menu a {
            height: 45px;
            border: 0;
            width: 100%;
            display: block;
        }
}

.menu-show .menu {
    max-height: 480px;
}

#showmenu {
    color: #fff;
    position: absolute;
    top: 8px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    display: none;
    width: 30px;
    height: 30px;
}

    #showmenu span {
        position: absolute;
        display: block;
        width: 20px;
        height: 2px;
        background: #fff;
        top: 50%;
        margin-top: -1px;
        left: 50%;
        margin-left: -10px;
        -webkit-transition: background 0.3s;
        -o-transition: background 0.3s;
        transition: background 0.3s;
    }

        #showmenu span:before,
        #showmenu span:after {
            content: "";
            position: absolute;
            left: 0;
            background: inherit;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: -webkit-transform 0.3s, background 0s;
            -webkit-transition: background 0s, -webkit-transform 0.3s;
            transition: background 0s, -webkit-transform 0.3s;
            -o-transition: transform 0.3s, background 0s;
            transition: transform 0.3s, background 0s;
            transition: transform 0.3s, background 0s, -webkit-transform 0.3s;
        }

        #showmenu span:before {
            top: -6px;
        }

        #showmenu span:after {
            bottom: -6px;
        }

/*瀏覽區域的寬度小於750像素*/
@media screen and (min-width: 320px) and (max-width: 750px) {
    #showmenu {
        display: block;
    }

    #kuai3header .words ul.font li {
        width: 100%;
        display: block;
        text-align: left;
    }

        #kuai3header .words ul.font li > a {
            border-right: 0px solid #fff;
            font-size: 90%;
        }

    li.newsale a > b {
        padding: 0.5% 2%;
    }

    #kuai3header .words .font {
        display: block !important;
    }

    #kuai3header .words ul.font {
        height: auto;
    }
}

/* 動畫 */

.banner .img-animation {
    overflow: hidden;
}

    .banner .img-animation::before {
        content: "";
        position: absolute;
        top: -100%;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom right, transparent, white);
        animation: lightBeam 2s linear infinite;
        animation-iteration-count: infinite;
    }

@keyframes lightBeam {
    0% {
        top: -100%;
        left: -100%;
    }

    50% {
        top: 100%;
        left: 100%;
    }

    100% {
        top: 100%;
        left: 100%;
    }
}

/* 動畫 */

/* nav */

.banner {
    background-image: url(../image/banner-pc.png);
    position: relative;
    background-repeat: no-repeat;
    user-select: none;
    padding-bottom: 35%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

    .banner img {
        position: absolute;
        height: auto;
        object-fit: contain;
    }

        .banner img:first-child {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: auto;
        }

        .banner img:nth-child(2),
        .banner img:nth-child(3),
        .banner img:nth-child(4) {
            width: 12%;
            height: auto;
        }

        .banner img:nth-child(5),
        .banner img:nth-child(6),
        .banner img:nth-child(7),
        .banner img:nth-child(8) {
            width: 8%;
            height: auto;
        }

        .banner img:nth-child(2) {
            top: 12%;
            left: 22%;
        }

        .banner img:nth-child(3) {
            bottom: 31%;
            left: 27%;
        }

        .banner img:nth-child(4) {
            bottom: 32%;
            right: 24%;
        }

        .banner img:nth-child(5) {
            top: 14%;
            right: 14%;
        }

        .banner img:nth-child(6) {
            top: 4%;
            left: 33%;
        }

        .banner img:nth-child(7) {
            bottom: 32%;
            left: 14%;
        }

        .banner img:nth-child(8) {
            top: 4%;
            right: 28%;
        }

@keyframes blur {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.02);
    }

    75% {
        transform: scale(0.99);
    }

    100% {
        transform: scale(1);
    }
}

.bg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('../image/bg-pc.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem 18% 1rem;
    box-sizing: border-box;
    /* width: 80%; */
}

.img-wrapper {
    padding: 10% 0 0 0;
    position: relative;
    z-index: 1;
}

    .img-wrapper img {
        width: 100%;
    }
/* 組隊創建 */

.centered-img {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 18%;
    z-index: 1;
    width: 72%;
}

.buildteam {
    background-color: #ffe4c3;
    border-radius: 6vw;
    border: 3vw solid #db8720;
    margin: 10% 0;
}

@media (min-width: 1365px) {
    .buildteam {
        border: 2.2vw solid #db8720;
    }
}

.layers {
    top: 0;
    margin: 8% 0 4% 0;
}

.teamsclass {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    border: 3px solid #ffffff;
    width: 90%;
    margin: -10% auto;
    padding: 0 0 2% 0;
    border-radius: 3vw;
    font-size: 16px;
}

    .teamsclass .block {
        width: 100%;
        padding: 10% 0 0 0;
    }

.team-group {
    margin-bottom: 4%;
}

.teamdate {
    margin: 0 0 2% 0;
    font-size: 2em;
    color: black;
}

.teamnum {
    margin: 0 0 2% 0;
    font-size: 2em;
    color: black;
}

.thename {
    font-size: 1.3em;
    color: black;
    word-break: break-all;
}

@media (max-width: 768px) {
    .thename {
        font-size: 3vw;
    }
}

@media (max-width: 480px) {
    .teamdate,
    .teamnum {
        font-size: 3.5vw;
    }

    .thename {
        font-size: 4vw;
    }
}

.teamnum {
    margin-bottom: 2%;
}

.img-group {
    flex: 1 0 33.33%;
    padding: 0 0.5rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-container {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .img-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.team-text {
    flex-basis: 90%;
    font-size: 1.5em;
    margin: 1% 0;
    color:black;
    line-height: 2rem;
}

.illustrate {
    font-size: 1.6em;
    margin: 12% auto 0;
    color: black;
    padding: 0;
    left: 0;
    top: 60%;
    width: 82%;
    line-height: 3rem;
}

@media (max-width: 768px) {
    .team-text {
        font-size: 2vw;
        margin-top: 1%;
        line-height: 5vw;
    }

    .illustrate {
        font-size: 2.5vw;
        line-height: 5vw;
    }
}

/* 組隊創建 */

/* 說明 */
.text-bg {
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1rem;
}

.p-text {
    margin: 1rem 0;
    line-height: 2rem;
}

@media (max-width: 768px) {
    .text-bg {
        padding: 1rem;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 1rem;
    }
}

/* 說明 */

/* 輪播 */

.splide__track {
    border-radius: 1rem;
    margin: 4% 0;
}

section {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .splide__track {
        border-radius: 0.5rem;
    }
}

.splide2 li {
    padding: 0 0.5rem;
}

    .splide2 li:first-child {
        padding-left: 0 -0.5rem;
    }

    .splide2 li:last-child {
        padding-right: 0;
    }

/* 輪播 */

.fixed01 {
    position: fixed;
    top: 10%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 2;
    right: 0;
    text-align: center;
}

    .fixed01.show {
        top: 10%;
        opacity: 1;
    }

    .fixed01 .fixedimg img {
        display: block;
        margin: 0 auto;
    }

    .fixed01 .text {
        width: 50%;
        margin: 0 auto;
    }

    .fixed01 .ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .fixed01 .ul li {
            padding: 1rem 0;
            text-align: center;
            font-size: 0.875rem;
            font-weight: bold;
            background-color: #0072ff;
            margin: 1px 0;
        }

    .fixed01 li p {
        color: #ffffff;
    }

@media only screen and (max-width: 768px) {
    .fixed01 {
        display: none;
    }
}

/* 樓梯 */

/* 浮動按鈕 */
.use-grid.footerbtn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.footerbtn .fixed02 {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    max-width: 1140px;
    background-image: url("../image/bar_bg.png");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.btn-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.btn-left {
    order: 1;
}

.btn-right {
    order: 2;
}

.btn-img {
    width: 80%;
    max-height: 50vh;
    padding: 3% 0;
    object-fit: contain;
}
.btnLev-img {
    width: 80%;
    max-height: 50vh;
    padding: 3% 0;
    object-fit: contain;
}

/* 浮動按鈕 */

/* 浮動元素 */
.fixed03-container {
    position: sticky;
    top: 20%;
    height: 0;
}

.fixed03 {
    position: absolute;
    top: -286px;
    width: 100%;
}

    .fixed03 img {
        width: 100%;
        z-index: 0;
    }
/* 浮動元素 */

/* dialog */

.dialog-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.6);
}

.dialog {
    background-color: #fff967;
    max-width: 480px;
    padding: 0 1rem;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: 0 1rem;
    border: 3px solid #209cf2;
    z-index:9;
}

.dialog-close {
    position: absolute;
    top: 0.5rem;
    right: -0.5rem;
    transform: translate(50%, -50%);
}

    .dialog-close img {
        width: 50%;
    }

.h1 {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 20px;
}

.x-input {
    padding: 4%;
    border-radius: 5px;
    border: 3px solid #209cf2;
    border-radius: 3rem;
    box-sizing: border-box;
    font-size: 1rem;
    display: block;
    margin: 0 auto;
}

    .x-input::placeholder {
        color: #999;
    }

.flex.dialog-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 4%;
}

.dialog-btn img {
    max-width: 40%;
    height: auto;
}
/* 每日強品 */
.title {
    margin: 0 auto 2%;
}

    .title img {
        width: 100%;
    }

.automation {
    width: 100%;
    padding: 2% 0 0 0;
    box-sizing: border-box;
    border-radius: 1rem;
    position: relative;
}

.automation {
    position: relative;
}

    .automation .list_F ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .automation .list_F ul li {
            width: calc(25% - 20px);
            margin-bottom: 1.5%;
            text-align: center;
        }

            .automation.list_F ul li a {
                display: block;
                width: 100%;
            }

                .automation.list_F ul li a .itemF_img img {
                    width: 100%;
                    object-fit: contain;
                    height: auto;
                }


@media only screen and (max-width: 414px) {
    .container {
        width: 100%;
    }

    .title {
        margin: 1rem auto;
        width: 100%;
    }

    .img-container.everyday {
        gap: 1rem;
    }
}
/* dialog */

.title-num {
    background-color: #fff967;
    width: 74%;
    position: absolute;
    padding: 3.2% 0;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 7.5%;
    z-index: 1;
    border-radius: 4rem;
    background-image: linear-gradient( to bottom right, #feff9d, #fff967 50%, #fedf35 );
}
@media only screen and (max-width: 768px) {
    .banner {
        background-image: url(../image/kvm.png);
        padding-bottom: 111%;
        background-size: 100%;
    }
}
    @media only screen and (max-width: 768px) {
        .title-num {
            top: 5%;
        }

        .btn-img {
            width: 100%;
        }

        .btnLev-img {
            width: 50%;
        }


        .bg {
            background-size: 150%;
            background-image: none;
        }

        .banner {
            background-image: url(../image/kvm.png);
            padding-bottom: 73%;
            background-size: 100%;
        }

            .banner img:first-child {
                width: 100%;
                top: 0%;
                left: 0%;
            }

        .fixed03 {
        }
    }

    @media (min-width: 640px) {
        .sixwords,
        .invitenum {
            font-size: 2rem;
        }
    }

    @media (max-width: 768px) {
        .automation .list_F ul li {
            width: calc((100% / 2) - 8px);
        }
    }

    @media (max-width: 968px) {
        .sixwords,
        .invitenum {
            font-size: 3vw;
        }
    }

    .banner-title {
        display: block;
        position: absolute;
        top: 0rem;
        left: 16%;
        z-index: 9;
    }

        .banner-title img {
            width: 80%;
            height: auto;
        }

    @media only screen and (max-width: 576px) {
        .banner-title {
            left: 1rem;
        }

            .banner-title img {
                width: 40%;
            }
    }