/* --------------------------- 雲代管 --------------------------- */
.Cloud-Plans {
    background: #F8F8F8;
    color: #595959;
    padding-top: 190px;
    display: flex;
    justify-content: center;

}

.Cloud-Plans .contents {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.Cloud-Plans .box {
    width: 90%;
    display: grid;
    grid-column-gap: 24px;
    grid-row-gap: 36px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    margin: 40px auto 60px auto;
}

.Cloud-Plans .plan_card {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 36px 24px;
    border-radius: 10px;
    z-index: 0;
    transition: all 0.3s ease;
}

.Cloud-Plans .plan_card:hover {
    box-shadow: 0 2px 10px #41525035;
    transform: translateY(-2px);
}

.Cloud-Plans .plan_card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    /* use padding to ajust the width of gradient border */
    padding: 5px;
    border-radius: 10px;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.Cloud-Plans .plan_card:hover::before {
    background: linear-gradient(70deg, #2DD6FD 0%, #4BE6D7 20%, #9AF7B0 45%);
    opacity: 1;
}

.Cloud-Plans .plan_card .title {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #c6c6c6;
    text-align: center;
}

.Cloud-Plans .plan_card .wrap {
    display: flex;
    flex-direction: column;
}

.Cloud-Plans .plan_card .wrap h2 {
    display: inline;
    color: #000078;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1;
    align-self: center;
    margin-bottom: 4px;
}

.Cloud-Plans .plan_card .wrap h2>b {
    font-size: 2em;
}

.Cloud-Plans .plan_card .wrap:first-child h2:first-child {
    position: relative;
    font-size: 1.3em;
    font-weight: 600;
    font-weight: 700;
    margin-bottom: 28px;
    background-image: linear-gradient(to right, #000078 20%, #2DD6FD 90%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    transition: all 0.3s ease;
}

.Cloud-Plans .plan_card:hover .wrap:first-child h2:first-child {
    letter-spacing: 0.05em;
}

.Cloud-Plans .plan_card .wrap:first-child h2:first-child::before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: -5px;
    background-image: linear-gradient(to right, #000078 20%, #2DD6FD 90%);
    opacity: 0;
    transition: all 0.3s ease;
}

.Cloud-Plans .plan_card:hover .wrap:first-child h2:first-child::before {
    width: 100%;
    opacity: 1;
}


.Cloud-Plans .plan_card:hover.wrap:first-child h2:first-child {
    text-decoration: underline;
}

.Cloud-Plans .plan_card .wrap p {
    color: #969696;
    font-weight: 400;
}

.Cloud-Plans .plan_card .spec {
    text-align: left;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.Cloud-Plans .plan_card .spec>p {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    line-height: 1.5;
    margin-bottom: 16px;
}

html[lang="zh"] .Cloud-Plans .plan_card .spec>p {
    flex-direction: row;
    column-gap: 8px;
}

.Cloud-Plans .plan_card .spec>p>strong {
    background-color: #cdf6ff;
    color: #07aed3;
    padding: 2px 4px;
    border-radius: 2px;
    align-self: flex-start;
}

.Cloud-Plans .plan_card .spec {
    letter-spacing: 0.1em;
    font-weight: 400;
}

.Cloud-Plans .plan_card .spec ul {
    width: 70%;
    list-style: none;
    padding-left: 2em;
}

.Cloud-Plans .plan_card .spec>ul li {
    position: relative;
    margin-bottom: 4px;
}

.Cloud-Plans .plan_card .spec>ul li:last-child {
    margin-bottom: 0;
}

/* custimize list style */
.Cloud-Plans .plan_card .spec>ul li:before {
    content: "\f058";
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900;
    color: #000078;
    font-size: 0.9em;
    position: absolute;
    left: -2.2em;
}

/* btn settings */
.Cloud-Plans .btn_wrap {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    justify-content: center;
    margin-bottom: 60px;
}

.Cloud-Plans .btn_wrap h2 {
    font-weight: 300;
    font-size: 1.6em;
}

.Cloud-Plans .btn_wrap>a {
    user-select: none;
    background: #19abe6;
    color: #fff;
    font-weight: 400;
    font-size: 1.2em;
    line-height: 1.5;
    padding: 12px 24px;
    border-radius: 50px;
    align-self: center;
    transition: all 0.3s ease;
}

.Cloud-Plans .btn_wrap>a:hover {
    background: #3dc6fd;
    color: #000A3A;
    box-shadow: 0 2px 10px #5e8da37c;
    transform: translateY(-2px);
}

.add_info {
    max-width: 95%;
    margin: 0 auto;
}

.add_info>p {
    font-size: 1em;
    margin-bottom: 12px;
}

.add_info>p:last-child {
    margin-bottom: 60px;
}


@media only screen and (max-width: 1366px) {
    .Cloud-Plans .box {
        width: 80%;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .Cloud-Plans .plan_card .spec>p {
        flex-direction: row;
        column-gap: 8px;
    }
}

@media only screen and (max-width: 768px) {
    .Cloud-Plans .box {
        width: 80%;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .Cloud-Plans .plan_card {
        padding: 24px;
    }
}

@media only screen and (max-width: 425px) {
    .Cloud-Plans .plan_card .spec>p {
        flex-direction: column;
    }
}

/* --------------------------- GO CAYIN --------------------------- */
.GoCayin-Plans {
    /* background: linear-gradient(0deg, #FFE9A1 0%, #F8F8F8 10%); */
    background-color: #F8F8F8;
    color: #595959;
    padding-top: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.GoCayin-Plans .contents {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    position: relative;

    /* background: linear-gradient(0deg, #FFE9A1 0%, #F8F8F8 10%); */
}

.GoCayin-Plans .GoCayin-Title-Tabs-Box {
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    position: relative;
}

.GoCayin-Plans .GoCayin-Title-Tabs-Box .subTitle {
    filter: drop-shadow(0 0 5px #00000020);
}

.GoCayin-Plans .GoCayin-Title-Tabs-Box .PlanBoxShadows {
    width: 100%;
    height: 30px;
    background-color: #F8F8F8;
    box-shadow: 0 -5px 5px #00000020;

    position: absolute;
    bottom: -30px;

}

.GoCayin-Plans .GoCayin-Title-Tabs-Box .PlanBoxWhite {
    width: 100%;
    height: 30px;
    background-color: #F8F8F8;
    /* box-shadow: 0 -5px 5px #00000020; */

    position: absolute;
    bottom: -29px;
    z-index: 2;

}

.GoCayin-Plans .bannerBG_gocayin {
    background: linear-gradient(90deg, #FFD14A 0%, #FABE00 50%, #FFD14A 100%);
}

.GoCayin-Plans .bannerBG_meetingpost {
    background: linear-gradient(90deg, #008CD6 0%, #1FB7FF 50%, #008CD6 100%);
}

.GoCayin-Plans .bannerBG_poster {
    background: linear-gradient(90deg, #51C8B9 0%, #46DBC7 50%, #51C8B9 100%);
}


.GoCayin-Plans .GoCayin-Title-Tabs-Box h1 {
    font-weight: 600;
    color: #fff;
}

.GoCayin-Title-Tabs-Box .Tabs-Box {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    width: 43%;
    height: 60px;
    line-height: 60px;
    color: #fff;
    border-radius: 20px 20px 0 0;
    cursor: pointer;
    background-color: #3e3a3930;

    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
}

/* .GoCayin-Title-Tabs-Box .TabsBG_gocayin {
    background-color: #d8a707;
}

.GoCayin-Title-Tabs-Box .TabsBG_meetingpost {
    background-color: #389ba7;
}

.GoCayin-Title-Tabs-Box .TabsBG_poster {
    background-color: #3ea394;
} */

.GoCayin-Plans .GoCayin-Title-Tabs-Box .Tabs-Box .active {
    /* background: linear-gradient(0deg, #F8F8F8 0%, #fff 100%) !important; */
    background-color: #F8F8F8 !important;

    border-radius: 20px 20px 0 0;
    color: #595959;
    box-shadow: 0 0 5px #00000020;
    /* transform: scale(1.05); */
    /* transition: transform ease 0.3s; */
}

.GoCayin-Plans .GoCayin-Title-Tabs-Box .Tabs-Box .PlansTab:hover {
    background-color: #ffffff79;
    border-radius: 20px 20px 0 0;
    transition: background-color ease 0.3s;
}

.PlansTab {
    position: relative;
}

.PlansTab p {
    text-align: center;
    color: #fff;
    line-height: unset;
    font-weight: 500;
}

.PlansTab.active p {
    color: #565656;
}

.PlansTab .planBorder {
    border: 1px solid;
    border-bottom: 0;
    border-top: 0;
    width: 100%;
    height: 20px;
    color: white;

    position: absolute;
    left: -0.5%;
    top: 50%;
    transform: translateY(-50%);
}

.PlansTab.active .planBorder {
    display: none;
}

.GoCayin-Title-Tabs-Box .Tabs-Box .PlansTab {
    width: 100%;
}

.GoCayin-Plans .planLogo_monthYearSwitcher_box {
    margin: 0 auto;
    width: 90%;
    display: flex;
    flex-direction: column;
}

.GoCayin-Plans .planLogo {
    display: flex;
    flex-direction: column;
}

.GoCayin-Plans .planLogo_monthYearSwitcher_box .planLogo img {
    /* width: 30%; */
    height: 88px;
    margin: 74px auto;
    /* display: none; */

}

.PlansWarp {
    position: relative;
}

.GoCayin-Plans .PlanBg {
    width: 100vw;
    height: 50%;
    position: absolute;
    bottom: 0;
}

.GoCayin-Plans .gocayin_PlanBg {

    background: linear-gradient(0deg, #FFE9A1 0%, #F8F8F8 100%);
}

.GoCayin-Plans .mp_PlanBg {
    background: linear-gradient(0deg, #ccfaff 0%, #F8F8F8 100%);

}

.GoCayin-Plans .poster_PlanBg {
    background: linear-gradient(0deg, #a2fff1 0%, #F8F8F8 100%);

}

/* 年月訂閱切換 */
.GoCayin-Plans div.btn-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.GoCayin-Plans label {
    font-size: 20px;
    line-height: 34px;
    /* color: #565656; */
    font-weight: 600;
}

.GoCayin-Plans #gocayin-box label {
    color: #565656;
}

.GoCayin-Plans #meetingpost-box label {
    color: #008CD6;
}

.GoCayin-Plans #poster-box label {
    color: #51C8B9;
}

.GoCayin-Plans .btn-sub-mode-switch {
    display: inline-block;
    margin: 0px;
    position: relative;
}

.GoCayin-Plans .btn-sub-mode-switch>label.btn-sub-mode-switch-inner {
    margin: 0px;
    width: 310px;
    height: 54px;
    /* background: linear-gradient(to right, #5acbd8 20%, #43B7C4 90%); */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    /* box-shadow: 0px 0px 8px 0px rgba(17, 17, 17, 0.34) inset; */
    display: block;
}

.GoCayin-Plans .btn-sub-mode-switch .switchBG_gocayin {
    background-color: #FABE00;
}

.GoCayin-Plans .btn-sub-mode-switch .switchBG_meetingpost {
    background-color: #008CD6;
}

.GoCayin-Plans .btn-sub-mode-switch .switchBG_poster {
    background-color: #51C8B9;

}

.GoCayin-Plans .btn-sub-mode-switch>label.btn-sub-mode-switch-inner:before {
    content: attr(data-on);
    position: absolute;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    top: 9px;
    /* right: 45px; */

}

.GoCayin-Plans .btn-sub-mode-switch>label.btn-sub-mode-switch-inner:after {
    content: attr(data-off);
    width: 155px;
    height: 33.5px;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    left: 5px;
    top: 5px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 6px -2px #111;
    padding: 5px 0px;
}

.GoCayin-Plans .btn-sub-mode-switch>.alert {
    display: none;
    background: #FF9800;
    border: none;
    color: #fff;
}

.GoCayin-Plans .btn-sub-mode-switch input[type="checkbox"] {
    cursor: pointer;
    width: 310px;
    height: 54px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0px;
}

.GoCayin-Plans .btn-sub-mode-switch input[type="checkbox"]:checked+label.btn-sub-mode-switch-inner {
    color: #565656;
    transition: color ease 0.3s;
}

.GoCayin-Plans #gocayin-box .btn-sub-mode-switch input[type="checkbox"]:checked+label.btn-sub-mode-switch-inner {
    color: #565656;
    transition: color ease 0.3s;
}

.GoCayin-Plans #meetingpost-box .btn-sub-mode-switch input[type="checkbox"]:checked+label.btn-sub-mode-switch-inner {
    color: #008CD6;
    transition: color ease 0.3s;
}

.GoCayin-Plans #poster-box .btn-sub-mode-switch input[type="checkbox"]:checked+label.btn-sub-mode-switch-inner {
    color: #51C8B9;
    transition: color ease 0.3s;
}


.GoCayin-Plans .btn-sub-mode-switch input[type="checkbox"]:checked+label.btn-sub-mode-switch-inner:after {
    content: attr(data-on);
    left: 150px;
    background: #fff;
}

.GoCayin-Plans .btn-sub-mode-switch input[type="checkbox"]:checked+label.btn-sub-mode-switch-inner:before {
    content: attr(data-off);
    right: auto;
    /* left: 45px; */
}

.GoCayin-Plans .btn-sub-mode-switch input[type="checkbox"]:checked~.alert {
    display: block;
}

.GoCayin-Plans .Switcher_box {
    margin: 0 auto 20px;
}

.GoCayin-Plans .toggle-switch {
    position: relative;
    display: flex;
    align-items: center;
    width: 200px;
    height: 40px;
    /* background: linear-gradient(to right, #fad458 20%, #FABE00 90%); */
    border-radius: 20px;
    overflow: hidden;
}

.GoCayin-Plans .switchBg_gocayin {
    background: linear-gradient(to right, #fad458 20%, #FABE00 90%);
}

.GoCayin-Plans .switchBg_mp {
    background: linear-gradient(to right, #5acbd8 20%, #43B7C4 90%);
}

.GoCayin-Plans .switchBg_poster {
    background: linear-gradient(to right, #61D0BF 20%, #61D0BF 90%);
}


.GoCayin-Plans .toggle-label {
    flex: 1;
    text-align: center;
    font-size: 20px;
    color: #565656;
    cursor: pointer;
    z-index: 2;
    position: relative;
    transition: color 0.3s, background-color 0.3s;
}

.GoCayin-Plans .toggle-label:checked {
    color: #000000;
    font-weight: 600;
}


.GoCayin-Plans .toggle-slider {
    position: absolute;
    top: 15%;
    left: 2.5%;
    width: 45%;
    height: 70%;
    background-color: #FFFFFF;
    border-radius: 20px;
    z-index: 1;
    transition: transform 0.3s;
    transform: translateX(0);
}

.GoCayin-Plans .toggle-input {
    display: none;
}


.GoCayin-Plans .contents h1 {
    margin-bottom: 10px;
    font-weight: 600;
}

.PlanBox {
    display: none;
}

#gocayin-box {
    background: linear-gradient(180deg, rgba(255, 252, 242, 0.00) 0%, #FFFCF2 75%);
}

#meetingpost-box {
    background: linear-gradient(180deg, rgba(237, 249, 255, 0.00) 0%, #EDF9FF 75%);
}

#poster-box {
    background: linear-gradient(180deg, rgba(242, 255, 244, 0.00) 0%, #F2FFF4 75%);
}

.PlansActive {
    display: block;
}

.GoCayin-Plans .PlanBox.PlansActive .contents .box {
    width: 100%;
    display: grid;
    grid-column-gap: 36px;
    grid-row-gap: 36px;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    margin: 0px auto 50px auto;

    position: relative;
}


/* 卡片 */
.GoCayin-Plans .plan_card {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 45px 25px 50px;
    border-radius: 18px;
    box-shadow: 0 5px 10px #41525035;

    position: relative;
    z-index: 0;

    transition: all 0.3s ease;
}

/* .GoCayin-Plans .plan_card:hover,
.GoCayin-Plans .hovered {
    box-shadow: 0 5px 10px #41525035;
    transform: translateY(-10px);
} */

.GoCayin-Plans .plan_card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    /* use padding to ajust the width of gradient border */
    padding: 5px;
    border-radius: 18px;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.GoCayin-Plans .gocayinCard:hover::before,
.GoCayin-Plans .gocayinCard.hovered::before {
    background: linear-gradient(135deg, #FABE00 0%, #FFD14A 100%);
    opacity: 1;
}

.GoCayin-Plans .mpCard:hover::before,
.GoCayin-Plans .mpCard.hovered::before {
    background: linear-gradient(135deg, #00A6FF 0%, #65DBCF 100%), #D9D9D9;
    opacity: 1;
}

.GoCayin-Plans .posterCard:hover::before,
.GoCayin-Plans .posterCard.hovered::before {
    background: linear-gradient(135deg, #51C8B9 0%, #BDEE84 100%);
    opacity: 1;
}

.GoCayin-Plans .plan_card .recommendBox {
    width: 40%;
    height: 35px;
    line-height: 35px;
    font-weight: 600;
    color: #fff;
    border-radius: 5px;
    background: linear-gradient(70deg, #fad458 0%, #FABE00 100%);

    position: absolute;
    transform: translateX(-50%);
    top: -15px;
    left: 50%;
}

.GoCayin-Plans .plan_card .recommendBox p {
    color: #fff;
    font-weight: 600;
    line-height: 35px;

}

.GoCayin-Plans .plan_card:hover .recommendBox,
.GoCayin-Plans .hovered .recommendBox {
    /* box-shadow: 0 2px 10px #5e8da37c; */
}

.GoCayin-Plans .plan_card .recmdBg_gocayin {
    background: linear-gradient(110deg, #FFD14A 0%, #FABE00 100%);

}

.GoCayin-Plans .plan_card .recmdBg_mp {
    background: linear-gradient(110deg, #1FB7FF 0%, #008CD6 100%);

}

.GoCayin-Plans .plan_card .recmdBg_poster {
    background: linear-gradient(110deg, #3BD4BF 0%, #51C8B9 100%);

}

.GoCayin-Plans .gocayinCard .cardFeaturesFlexWrap {
    display: flex;
    width: 100%;
}

.GoCayin-Plans .gocayinCard .cardFeaturesFlexBox {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.GoCayin-Plans .gocayinCard .left {
    justify-content: flex-start;
}

.GoCayin-Plans .gocayinCard .cardFeaturesFlexBox img {
    height: 40px;
    /* margin-bottom: 15px; */
}

/* .GoCayin-Plans .gocayinCard .spec,
.GoCayin-Plans .gocayinCard .cardFeaturesFlexBox{
    outline: 1px solid red;
} */

.GoCayin-Plans .plan_card .title {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid #898989;
    text-align: center;
}

.GoCayin-Plans .plan_card .wrap {
    display: flex;
    flex-direction: column;

}

.GoCayin-Plans .box_price {
    white-space: nowrap;
    white-space: nowrap;
    margin: 30px auto 36px;
}

/* GoCayin PRO方案價格間距個別調整 */
.GoCayin-Plans .gocayinCard:nth-child(2) .box_price {
    margin: 10px auto 16px;
}

/* mp+ & poster PRO team方案價格間距個別調整 */
.GoCayin-Plans .gocayinCard:nth-child(3) .box_price,
.GoCayin-Plans .mpCard:nth-child(3) .box_price,
.GoCayin-Plans .posterCard:nth-child(3) .box_price {
    margin: 10px auto 33px;
}

.GoCayin-Plans .gocayinCard:nth-child(3) .box_price {
    margin: 10px auto 17px;
}

/* mp+ & poster 基本方案價格間距個別調整 (免費字樣) */
.GoCayin-Plans .gocayinCard:nth-child(1) .box_price.free_box,
.GoCayin-Plans .mpCard:nth-child(1) .box_price.free_box,
.GoCayin-Plans .posterCard:nth-child(1) .box_price.free_box {
    margin: 30px auto;
}

/* gocayin基本方案價格間距個別調整 (免費字樣) */
.GoCayin-Plans .gocayinCard:nth-child(1) .box_price.free_box {
    margin: 10px auto;
}


.GoCayin-Plans .gocayinCard .box_price.free_box {
    /* margin: 30px auto 40px; */
    margin: 30px auto 40px;
}

.GoCayin-Plans .box_price .price {
    padding-right: 5px;
    color: #595959;
}

.GoCayin-Plans .box_price .free {
    color: #595959;
    font-weight: 700;
    padding: 0;
}

.GoCayin-Plans .box_price .oriPrice {
    text-decoration: line-through;
    color: #C9C9C9;
}


.GoCayin-Plans .plan_card .wrap h2 {
    display: inline;
    color: #A8A8A8;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1;
    align-self: center;
    margin-bottom: 4px;
}

.GoCayin-Plans .plan_card .wrap h2>b {
    font-size: 2em;
}

.GoCayin-Plans .plan_card .wrap:first-child h2:first-child {
    position: relative;
    font-size: 1.3em;
    font-weight: 600;
    /* margin-bottom: 20px; */
    /* background-image: linear-gradient(to right, #000078 20%, #2DD6FD 90%); */
    background-clip: text;
    -webkit-background-clip: text;
    /* color: #2D2D2D; */
    transition: all 0.3s ease;
}

#gocayin-box .plan_card .wrap:first-child h2:first-child {
    color: #2D2D2D;
}

#meetingpost-box .plan_card .wrap:first-child h2:first-child {
    color: #008CD6;
}

#poster-box .plan_card .wrap:first-child h2:first-child {
    color: #51C8B9;
}


/* .GoCayin-Plans .plan_card:hover .wrap:first-child h2:first-child {
    letter-spacing: 0.05em;
} */

.GoCayin-Plans .gocayinCard .wrap:first-child h2:first-child::before {
    content: "";
    position: absolute;
    width: 0;
    height: 1.5px;
    left: 0;
    bottom: -5px;
    background-image: linear-gradient(135deg, #FFD559 20%, #FABE00 90%);
    opacity: 0;
    transition: all 0.3s ease;
}

.GoCayin-Plans .mpCard .wrap:first-child h2:first-child::before {
    content: "";
    position: absolute;
    width: 0;
    height: 1.5px;
    left: 0;
    bottom: -5px;
    background-image: linear-gradient(135deg, #65DBCF 20%, #00A6FF 90%);
    opacity: 0;
    transition: all 0.3s ease;
}

.GoCayin-Plans .posterCard .wrap:first-child h2:first-child::before {
    content: "";
    position: absolute;
    width: 0;
    height: 1.5px;
    left: 0;
    bottom: -5px;
    background-image: linear-gradient(135deg, #3BD4BF 20%, #51C8B9 90%);
    opacity: 0;
    transition: all 0.3s ease;
}

.GoCayin-Plans .plan_card:hover .wrap:first-child h2:first-child::before,
.GoCayin-Plans .hovered .wrap:first-child h2:first-child::before {
    width: 100%;
    opacity: 1;
}


/* .GoCayin-Plans .plan_card:hover.wrap:first-child h2:first-child,
.GoCayin-Plans .hovered .wrap:first-child h2:first-child {
    text-decoration: underline;
} */

.GoCayin-Plans .plan_card a {
    color: #00A0E9
}

.GoCayin-Plans .plan_card .wrap p {
    color: #969696;
    font-weight: 400;
}

.GoCayin-Plans .plan_card .spec {
    text-align: left;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.GoCayin-Plans .plan_card .spec>p {
    width: 90%;
    color: #595959;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    line-height: 1.5;
    margin-bottom: 16px;
    letter-spacing: normal;
}

.GoCayin-Plans .plan_card .spec>p>strong {
    background-color: #cdf6ff;
    color: #07aed3;
    padding: 2px 4px;
    border-radius: 2px;
    align-self: flex-start;
}

.GoCayin-Plans .plan_card .spec {
    letter-spacing: 0.1em;
    font-weight: 400;
}

.GoCayin-Plans .plan_card .spec ul {
    width: 70%;
    list-style: none;
    padding-left: 2em;
}

.GoCayin-Plans .plan_card .spec>ul li {
    position: relative;
    margin-bottom: 4px;
}

.GoCayin-Plans .plan_card .spec>ul li:last-child {
    margin-bottom: 0;
}

/* custimize list style */
.GoCayin-Plans .plan_card .spec>ul li:before {
    content: "\f00c";
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900;
    color: #FABE00;
    font-size: 0.9em;
    position: absolute;
    left: -2.2em;
}

/* btn settings */
.GoCayin-Plans .sub_btn {
    height: 40px;
    line-height: 1;
    background: none;
    font-weight: 500;
    font-size: 1.2em;
    padding: 6px;
    border-radius: 50px;
    user-select: none;
    cursor: pointer;

    /* transition: all 0.3s ease; */
}

.GoCayin-Plans .gocayinCard .sub_btn {
    height: 45px;
}

/* GO CAYIN訂閱按鈕 */
.gocayinCard .subButtonBox {
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
}

.gocayinCard .sub_btn {
    width: 100%;
    text-align: center;
}

.gocayinCard .sub_btn .subButtonLogo {
    height: 100%;
    display: flex;
    justify-content: center;
}

.gocayinCard .sub_btn .subButtonLogo img {
    height: 80%;
    margin: auto;
}

.gocayinCard .sub_btn .subButtonText {
    display: none;
    color: #fff;
}

/* 沒被hover時的訂閱按鈕樣式 */
/* .GoCayin-Plans .gocayinCard .sub_btn {
    color: #F5BE00;
    border: 1px solid #F5BE00;
} */

.GoCayin-Plans .gocayinCard .subBtnBg_gocayin_mp {
    color: #fff;
    border: 1px solid #008CD6;
}

.GoCayin-Plans .gocayinCard .subBtnBg_gocayin_poster {
    color: #fff;
    border: 1px solid #51C8B9;
}

.GoCayin-Plans .mpCard .sub_btn {
    color: #008CD6;
    border: 1px solid #008CD6;
}

.GoCayin-Plans .posterCard .sub_btn {
    color: #51C8B9;
    border: 1px solid #51C8B9;
}


.GoCayin-Plans .gocayinCard:hover .subBtnBg_gocayin,
.GoCayin-Plans .gocayinCard.hovered .subBtnBg_gocayin {
    /* width: 50%; */
    background: #FABE00;
    /* background: linear-gradient(110deg, #FFD14A 5%, #FABE00 95%); */
    color: #fff;
    border: 0;
    font-weight: 600;
}

.GoCayin-Plans .plan_card:hover .subBtnBg_gocayin_mp,
.GoCayin-Plans .hovered .subBtnBg_gocayin_mp {
    background: linear-gradient(110deg, #1FB7FF 5%, #008CD6 95%);
}

.GoCayin-Plans .plan_card:hover .subBtnBg_gocayin_poster,
.GoCayin-Plans .hovered .subBtnBg_gocayin_poster {
    background: linear-gradient(110deg, #3BD4BF 5%, #51C8B9 95%);
}

.GoCayin-Plans .plan_card:hover .sub_btn .subButtonLogo,
.GoCayin-Plans .hovered .sub_btn .subButtonLogo {
    display: none;
}

.GoCayin-Plans .plan_card:hover .sub_btn .subButtonText,
.GoCayin-Plans .hovered .sub_btn .subButtonText {
    display: block;
}

.GoCayin-Plans .plan_card:hover .subBtnBg_mp,
.GoCayin-Plans .hovered .subBtnBg_mp {
    background: #008CD6;
    background: linear-gradient(110deg, #1FB7FF 5%, #008CD6 95%);
    color: #fff;
    border: 0;
    font-weight: 600;
}

.GoCayin-Plans .plan_card:hover .subBtnBg_poster,
.GoCayin-Plans .hovered .subBtnBg_poster {
    background: #61D0BF;
    background: linear-gradient(110deg, #3BD4BF 5%, #51C8B9 95%);
    color: #fff;
    border: 0;
    font-weight: 600;
}

.GoCayin-Plans .plan_card a {
    /* display: none; */

    transition: all 0.3s ease;
}

.GoCayin-Plans .plan_card:hover a,
.GoCayin-Plans .hovered a {
    display: inline;
}

/* 卡片內小圖 */
.GoCayin-Plans .flex_box {
    width: 90%;
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
}

.GoCayin-Plans #gocayin-box .gocayinCard .flex_box {
    /* width: 100%; */
}

.GoCayin-Plans .flex_box .cardLogo {
    max-height: 35px;
    margin-bottom: 15px;
}

.GoCayin-Plans .contents .cardBox {
    display: flex;
    width: 100%;
    align-items: center;
    letter-spacing: normal;

}

.GoCayin-Plans .contents .gocayinCard .cardBox {
    margin: 15px auto;
}

.GoCayin-Plans .contents .mb_5 {
    margin-bottom: 5px;
}

.GoCayin-Plans .contents .mb_10 {
    margin-bottom: 10px;
}

.GoCayin-Plans .contents .mb_15 {
    margin-bottom: 15px;
}

.GoCayin-Plans .contents .mb_25 {
    margin-bottom: 25px;
}

.GoCayin-Plans .contents .mb_30 {
    margin-bottom: 30px;
}



.GoCayin-Plans .contents .mt_18_line {
    padding-top: 15px;
    border-top: 1px solid #dddddd;
}

.GoCayin-Plans .contents .mt_30_line {
    padding-top: 30px;
    border-top: 1px solid #dddddd;
}

.GoCayin-Plans .contents .mt_30 {
    padding-top: 30px;
    /* border-top: 1px solid #dddddd; */
}

.GoCayin-Plans .cardListLine {
    width: 100%;
    height: 1px;
    border-top: 1px solid #898989;
}

.GoCayin-Plans .contents .cardBox .cardImg {
    width: 40px;
    height: 40px;
    padding-right: 8px;
    display: flex;
    justify-content: center;
}

.GoCayin-Plans .contents .cardBox p {
    min-height: 40px;
    display: contents;
    text-align: left;
    color: #595959;
}

.GoCayin-Plans .btn--link {
    line-height: 1;
    background: #00a0e9;
    background: var(--gradient-color);
    color: #fff;
    padding: 9px 24px;
    border-radius: 50px;
    user-select: none;
}

.GoCayin-Plans .btn_wrap {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    justify-content: center;
    margin-bottom: 60px;
}

.GoCayin-Plans .btn_wrap h2 {
    font-weight: 300;
    font-size: 1.6em;
}

.GoCayin-Plans .btn_wrap>a {
    user-select: none;
    background: #19abe6;
    color: #fff;
    font-weight: 400;
    font-size: 1.2em;
    line-height: 1.5;
    padding: 12px 24px;
    border-radius: 50px;
    align-self: center;
    transition: all 0.3s ease;
}

.GoCayin-Plans .btn_wrap>a:hover {
    background: #3dc6fd;
    color: #000A3A;
    box-shadow: 0 2px 10px #5e8da37c;
    transform: translateY(-2px);
}

.GoCayin-Plans .contents .add_info {
    max-width: 95%;
    margin: 0 auto;
    z-index: 1;
}

.GoCayin-Plans .add_info>p {
    font-size: 1em;
    margin-bottom: 12px;
}

.GoCayin-Plans .add_info>p:last-child {
    margin-bottom: 60px;
}


.GoCayin-Plans .noteBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 65px;

}

.GoCayin-Plans .noteBox p {
    text-wrap: nowrap;
    white-space: nowrap;
    margin: 0 20px;
    color: #595959;
}

.GoCayin-Plans .noteBox::before,
.GoCayin-Plans .noteBox::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #dddddd;
}


/* 清單設定 */
.listMobileLogo {
    display: none;
}

.PlanBox .contents .toggle-button {
    border: none;
    background: none;
    /* color: #007ED4; */
    display: flex;
    margin: 0 auto;
    margin-bottom: 65px;
    cursor: pointer;
    text-wrap: nowrap;
    white-space: nowrap;
    font-weight: 600;
}

#gocayin-box .contents .toggle-button,
#gocayin-box .hide-button {
    color: #FABE00;

}

#meetingpost-box .contents .toggle-button,
#meetingpost-box .hide-button {
    color: #008CD6;

}

#poster-box .contents .toggle-button,
#poster-box .hide-button {
    color: #51C8B9;

}

.PlanBox .contents .toggle-button p {
    margin-left: 5px;
}

.GoCayin-Plans .arrowBox {
    margin-left: 5px;
}

.GoCayin-Plans .arrow {
    height: 10px;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.GoCayin-Plans .arrowUp {
    transform: rotate(-90deg);
}

.GoCayin-Plans .hide-button {
    border: none;
    background: none;
    display: flex;
    margin: 0 auto;
    margin-top: 80px;
    text-wrap: nowrap;
    white-space: nowrap;
    font-weight: 600;
    cursor: pointer;

}

.GoCayin-Plans .hide-button img {
    transform: rotate(-90deg);
}

.GoCayin-Plans .hide-button:hover,
.GoCayin-Plans .toggle-button:hover {
    text-decoration: underline;
}

/* 立即體驗與聯絡區塊 */
.gocayin_use_contact_box {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/gocayin/gocayin_use_contact_pc.jpg);
    height: 400px;
    min-height: 400px;
    width: 100%;
    display: flex;
    align-items: center;
}

.gocayin_use_contact_box .dsecBox {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    text-align: end;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gocayin_use_contact_box .dsecBox .ctaTextBox {
    display: flex;
    align-self: flex-end;
}

.gocayin_use_contact_box .dsecBox h2 {
    font-weight: 600;
    display: flex;
    color: #2d2d2d;
}

.gocayin_use_contact_box .dsecBox h2 img {
    width: 175px;
    margin: 0px 20px;
}


.gocayin_use_contact_box .dsecBox .contactUs_Gocayin_Box {
    margin-top: 20px;
    display: flex;
    align-self: flex-end;
}

.gocayin_use_contact_box .dsecBox .contactUs_Gocayin_Box a:hover {
    text-decoration: underline;
}

.gocayin_use_contact_box .dsecBox .contactUs_Gocayin_Box button:hover {}

.gocayin_use_contact_box .dsecBox a {
    align-self: center;
    text-align: center;
    color: #000000;
    margin-right: 15px;
}

.contactUs_Gocayin_Box .gocayinCtaImg {
    display: none;
}

.gocayin_use_contact_box .dsecBox .btn--link {
    background: var(--gradient-color);
    color: #fff;
    border-radius: 50px;
    border: 0;
    width: 107px;
    height: 35px;
    font-weight: 500;
    text-wrap: nowrap;
    white-space: nowrap;
    cursor: pointer;

    transition: all .3s ease;
}

.gocayin_use_contact_box .dsecBox .btn--link:hover {
    background: linear-gradient(90deg, #00A0E9 0%, #00A0E9 100%);
}

/* -------------------- RWD -------------------- */
/* ---------- 1366px ---------- */
@media only screen and (max-width: 1366px) {

    /* 標籤 */
    .GoCayin-Title-Tabs-Box .Tabs-Box {
        width: 60%;
    }

    .GoCayin-Plans .box {
        width: 80%;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .GoCayin-Plans .plan_card .spec>p {
        flex-direction: row;
        column-gap: 8px;
    }

    .GoCayin-Plans .PlanBox.PlansActive .contents .box {
        width: 90%;
    }

    .GoCayin-Plans .noteBox {
        width: 90%;
        margin: 0 auto 65px;
    }

    .subPlanContents .table {
        width: 90%;
        margin: 0 auto;
    }

    .gocayin_use_contact_box .dsecBox {
        width: 90%;
    }


}

/* ---------- 1200px ---------- */
@media only screen and (max-width: 1200px) {
    .GoCayin-Plans .planLogo_monthYearSwitcher_box .planLogo img {
        height: 70px;
        margin: 40px auto 20px;
    }

    .gocayin_use_contact_box {
        background-image: url(../images/gocayin/gocayin_use_contact_tablet.jpg);
        height: 300px;
        min-height: 300px;
    }

    .gocayin_use_contact_box .dsecBox .ctaTextBox {
        flex-direction: column;
    }

    .gocayin_use_contact_box .dsecBox h2:nth-child(1) {
        align-self: flex-end;
    }
}

/* ---------- 900px ---------- */
@media only screen and (max-width: 900px) {

    /* .GoCayin-Plans .PlanBox.PlansActive .contents .box {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    } */
    .GoCayin-Plans .PlanBox.PlansActive .contents .box {
        grid-column-gap: 10px;
    }

    #gocayin-box .gocayinCard .box_price .f44 {
        font-size: 33px;
    }

    #gocayin-box .gocayinCard .box_price .f40 {
        font-size: 30px;
    }

    #gocayin-box .gocayinCard .f35 {
        font-size: 20px;
    }

    #gocayin-box .gocayinCard .box_price .f16 {
        font-size: 10px;
    }

    .GoCayin-Plans .plan_card .recommendBox {
        width: 60%;
    }

    .GoCayin-Plans .contents .cardBox p {
        font-size: 9px;
    }

    .GoCayin-Plans .gocayinCard .cardFeaturesFlexBox img {
        height: 32px;
    }

    .subButtonBox span {
        font-size: 15px;
    }
}

/* ---------- 768px ---------- */
@media only screen and (max-width: 768px) {
    /* 卡片 */

    .GoCayin-Plans .plan_card {
        padding: 10% 5% 10%;
    }

    #MainWrap .GoCayin-Plans .PlanBox .contents .box {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .GoCayin-Plans .contents .cardBox p {
        font-size: 0.813em;
    }

    .table-logoBox {
        display: none;
    }

    .listMobileLogo {
        display: flex;
        width: 90%;
        margin: 0 auto;
    }

    .listMobileLogo img {
        height: 32px;
        padding-bottom: 10px;
    }

    .listPosterLogo img {
        padding-top: 35px;
    }
}

/* ---------- 600px ---------- */
@media only screen and (max-width: 600px) {

    /* 標籤 */
    .GoCayin-Title-Tabs-Box .Tabs-Box {
        width: 100%;
    }

    /* 年月訂閱 */

    .GoCayin-Plans .btn-sub-mode-switch input[type="checkbox"] {
        width: 250px;
        height: 40px;
    }

    .GoCayin-Plans .btn-sub-mode-switch>label.btn-sub-mode-switch-inner {
        width: 250px;
        height: 40px;
    }

    .GoCayin-Plans .btn-sub-mode-switch>label.btn-sub-mode-switch-inner:after {
        width: 125px;
        height: 20px;
    }

    .GoCayin-Plans .btn-sub-mode-switch input[type="checkbox"]:checked+label.btn-sub-mode-switch-inner:after {
        left: 120px;
    }

    /* #MainWrap .GoCayin-Plans .btn-sub-mode-switch input[type="checkbox"]:checked+label.btn-sub-mode-switch-inner:before {
        left: -80px;
    } */

    #MainWrap .GoCayin-Plans .btn-sub-mode-switch>label.btn-sub-mode-switch-inner:before {
        top: 10px;
        /* right: 40px; */
    }

    .GoCayin-Plans label {
        font-size: 18px;
        line-height: 18px;

    }

    .GoCayin-Plans .btn-sub-mode-switch>label.btn-sub-mode-switch-inner:after {
        font-size: 18px;
    }

    .GoCayin-Plans .btn-sub-mode-switch>label.btn-sub-mode-switch-inner:before {
        font-size: 18px;
    }

    /* 卡片 */

    /* 清單 */
    .GoCayin-Plans .noteBox {
        margin: 0 auto 20px;
    }

    .PlanBox .contents .toggle-button {
        margin-bottom: 50px;
    }

    #MainWrap .gocayinPlanSpec .subPlanContents .box {
        padding: 0;
    }

    #MainWrap .gocayinPlanSpec .cell1,
    #MainWrap .gocayinPlanSpec .cell2,
    #MainWrap .gocayinPlanSpec .cell3,
    #MainWrap .gocayinPlanSpec .cell4 {
        padding: 10px 0;
    }

    #MainWrap .gocayinPlanSpec .cell2,
    #MainWrap .gocayinPlanSpec .cell3,
    #MainWrap .gocayinPlanSpec .cell4 {
        text-align: center;
    }

    /* 聯絡我們 */
    .gocayin_use_contact_box .dsecBox h2 img {
        width: 130px;
        margin: 0px 10px;
    }

    .gocayin_use_contact_box .dsecBox {
        justify-content: flex-start;
    }

    .gocayin_use_contact_box .dsecBox h2:nth-child(1) {
        align-self: center;
    }

    .gocayin_use_contact_box .dsecBox h2 p {
        align-self: center;
    }

    .gocayin_use_contact_box .dsecBox .ctaTextBox {
        align-self: center;
        margin-top: 40px;
        flex-direction: row;
    }

    .gocayin_use_contact_box .dsecBox .contactUs_Gocayin_Box {
        align-self: center;
    }

    .gocayin_use_contact_box .dsecBox .btn--link {
        margin-right: 0;
    }

    .gocayin_use_contact_box {
        background-image: url(../images/gocayin/gocayin_use_contact_mobile.jpg);
        height: 500px;
        min-height: 500px;

    }

    .gocayin_use_contact_box .dsecBox .contactUs_Gocayin_Box {
        margin-top: 10px;
    }

    .GoCayin-Plans .noteBox p {
        text-wrap: auto;
    }

    .GoCayin-Plans .noteBox::before,
    .GoCayin-Plans .noteBox::after {
        width: 10%;
    }
}

/* ---------- 425px ---------- */
@media only screen and (max-width: 425px) {
    .GoCayin-Plans .plan_card .spec>p {
        flex-direction: column;
    }

    .GoCayin-Plans .gocayinPlanSpec .table {
        border-spacing: 5px 0px;
    }

    .gocayin_use_contact_box {
        display: flex;
        flex-direction: column;
        background-color: #FABE00;
        background-image: none;
        height: 340px;
        min-height: 340px;
    }

    .gocayin_use_contact_box .gocayinCtaMobileBg {
        /* margin-top: 40px; */
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(../images/gocayin/gocayin_use_contact_mobile2.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

/* ---------- 360px ---------- */
@media only screen and (max-width: 360px) {
    .GoCayin-Plans .PlansTab p {
        font-size: .83em;
    }

    .GoCayin-Plans .planLogo_monthYearSwitcher_box .planLogo img {
        height: 60px;
        /* margin: 20px auto 10px; */
    }

    .GoCayin-Plans .Switcher_box {
        margin: 0 auto 20px;
    }

    .GoCayin-Plans .plan_card .spec {
        font-size: 12px;
    }

    .GoCayin-Plans .gocayinCard .cardFeaturesFlexBox img {
        height: 30px;
    }

    .gocayin_use_contact_box .dsecBox .ctaTextBox {
        flex-direction: column;
    }

    #MainWrap .gocayinPlanSpec .cell1,
    #MainWrap .gocayinPlanSpec .cell2,
    #MainWrap .gocayinPlanSpec .cell3,
    #MainWrap .gocayinPlanSpec .cell4 {
        font-size: 10px;
        line-height: 1.5;
    }

    .GoCayin-Plans .gocayinPlanSpec .table {
        border-spacing: 0px 0px;
    }

}