/* ===== 重置與基礎樣式 ===== */
@import url('css2-GreatVibes_swap.css');

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    font-family: 'Noto Sans TC', Arial, sans-serif;
}

.imgAuto {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/* 桌機手機切換 */
.show-mobile {
    display: block;
}

.show-desktop {
    display: none;
}

.noshow {
    display: none;
}

/* ===== Header ===== */
.topLink {
    background-color: #9e1f24;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.topLink img {
    padding: 10px 20px;
}

.social {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 16px;
    gap: 10px;
}

/* ===== Main ===== */


/* ===== topcontent 區塊 ===== */
.topcontent {
    width: 100%;
    padding: 10px;
}

.titlePC {
    color: #fff;
    font-weight: 400;
    font-size: 28px;
    line-height: 30px;
    letter-spacing: 2px;
    background: url(../image/titleShunyLine.png) no-repeat right bottom;
    background-size: 100%;
    max-width: 320px;
    margin: 37px auto 60px;
    text-align: center;
    text-shadow: #165d8f 2px 2px 8px;
}

.title50Logo {
    display: inline-block;
    max-width: 120px;
}

.titlePC p {
    © font-size: 22px;
    letter-spacing: 3px;
    margin-top: 10px;
    padding-bottom: 10px;
}

/* ===== menuBox ===== */
.menuBox {
    position: relative;
}

.athMenu {
    max-width: 430px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.menuItem {
    background: linear-gradient(90deg, #c19258, #ede1d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    /* Firefox */
    position: relative;
    /* 修正 Safari  */
    -webkit-text-stroke: 0.4px transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.menuItem::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #b9966c;
    margin: 20px 0;
}

.athMenu h4 {
    font-size: 26px;
    line-height: 36px;
    font-weight: 400;
    letter-spacing: 2px;
}

.athMenu p {
    font-size: 18px;
    letter-spacing: 1px;
}

.menuItem:nth-child(1) img {
    position: absolute;
    max-width: 120px;
    top: -40px;
    left: -5px;
}

.menuItem:nth-child(2) img {
    position: absolute;
    max-width: 120px;
    top: 5px;
    left: 10px;
}

.athMoreBadge {
    max-width: 70px;
    position: fixed;
    top: 140px;
    right: 10px;
    z-index: 800;
}

.athMore {
    position: fixed;
    top: 360px;
    right: 19px;
    z-index: 600;
    border-radius: 12px;
    background: linear-gradient(to bottom, rgba(237, 225, 209, 1) 31%, rgba(185, 150, 108, 1) 100%);
    text-align: center;
    padding: 20px 15px 10px;
    width: 50px;
}

.aboutJohnson {
    position: fixed;
    top: 195px;
    right: 19px;
    z-index: 700;
    border-radius: 12px;
    background: linear-gradient(to bottom, rgb(243, 243, 243) 30%, rgb(255, 255, 255) 80%, rgb(213, 213, 213) 100%);
    text-align: center;
    padding: 20px 15px 10px;
    width: 50px;
}


.athMore a {
    color: #444444;
    text-decoration: none;
    display: inline-block;

}

.aboutJohnson a {
    color: #442200;
    text-decoration: none;
    display: inline-block;

}



.athMore h4,
.aboutJohnson h3 {
    font-size: 18px;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-text-orientation: upright;
    font-weight: 400;
    margin: 0 auto;
    display: inline-block;
    margin-left: -3px;
}

.athMore .evrl {
    text-combine-upright: all;
    -webkit-text-combine: horizontal;
}

.activBox {
    padding: 10px 10px;
    max-width: 430px;
    margin: 0 auto;
}

.activFree,
.activmerch {
    display: flex;
    flex-direction: column;
    padding: 40px 0 40px;
}

.activFree .activtxtBox {
    position: relative;
}

.activFree .activtxtBox img,
.activmerch .activtxtBox img {
    max-width: 80px;
}

.activtxtBox h3 {
    background: linear-gradient(90deg, #c19258, #ede1d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: clamp(26px, 5vw, 38px);
    font-size: 32px;
    font-weight: 300;
}

.activBox h3::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #b9966c;
    margin: 10px 0;
}

.activtxtBox h3 span {
    font-size: 2em;
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
    line-height: 0.4em;
    margin-left: 5px;
    display: inline-block;
    padding-top: 15px;
}

.activtxtBox p {
    line-height: 2em;
    ;
}

.soicalBox {
    margin-top: -40px;
}

.activBox p {
    font-size: 14px;
    color: #fff;
}

.activBox strong {
    font-size: 18px;
}

.athButton a {
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 4px 15px;
    letter-spacing: 1px;
    text-align: center;

}

.athButton {
    margin: 30px auto;
    text-align: center;
}

/*回憶錄*/
.activremem {
    position: relative;
    margin-top: 60px;
}

.rememTitle {
    display: flex;
    justify-content: space-between;

}

.rememTitle div {
    width: 50%;
}

.rememTitle h3 {

    width: 60%;
    background: linear-gradient(90deg, #c19258, #ede1d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 32px;
    font-weight: 300;
}

.rememTitle h3 span {
    font-size: 2em;
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
    line-height: 0.4em;
    margin-left: 5px;
    display: inline-block;
    padding-top: 15px;
}

.rememTitle h3::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #b9966c;
    margin: 10px 0;
}

.rememTxtBox {
    background: no-repeat url("https://www.johnsonfitness.com.tw/campaign/50year/images/rememBgMo.png");
    background-size: 100% 100%;
    padding: 50px 20px 30px 20px;
    text-align: left;
    margin-top: -40px;

}

.rememTxtBox h4 {
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 300;
    color: #b9966c;
    margin-bottom: 10px;
}

.rememTxtBox p {
    color: #000000;
    font-size: 14px;
    line-height: 1.8em;
    margin-bottom: 10px;
    font-size: clamp(6px, 5vw, 14px);
    margin-bottom: 30px;
}

.delivery {
    text-align: center;
    max-width: 170px;
    margin: 0 auto;
    background-color: #000;
    border-radius: 8px;
    padding: 5px 0;
}

.delivery a {
    display: block;
    color: #fff;
    text-decoration: none;
}

.activSoical {
    margin-top: 60px;
    padding-bottom: 40px;
}

.soicalButton {
    display: flex;
    flex-wrap: wrap;
}

.toFB a {
    background-color: #ede1d1;
    color: #000;
}

.toFB a:hover {
    background-color: #dcc3a3;
    border: 1px #dcc3a3 solid;
}

.otherAct {
    background-color: #fffaf4;
    padding: 0px 0 80px 0;
}

.otherAct h4 {
    text-align: center;
    font-size: 38px;
    font-weight: 400;
    padding: 40px 0;
    letter-spacing: 2px;
    font-style: italic;
    background: linear-gradient(90deg, #ff9100, #562f02);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.otherAct h4 span {
    font-family: "Great Vibes", cursive;
    font-size: 2em;
    padding: 0 5px;

}

.otherActBox {
    max-width: 410px;
    margin: 0 auto;
}

.otherBox {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.otherBox>div {
    margin-bottom: 40px;
    padding: 0 10px;
}

.otherActTitle a {
    text-decoration: none;
    color: #000;
    margin-bottom: 20px;
    display: inline-block;
}

footer {
    background: #000;
}

.remark {
    padding: 20px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.remarkTitle {
    font-weight: 300;
    color: #ede1d1;
    letter-spacing: 1px;
    font-size: 24px;
    margin-bottom: 15px;
}

.remarkTitle span {
    font-family: "Great Vibes", cursive;
    font-size: 1.4em;
    padding: 0 5px;
    font-weight: normal;
}

.notice {
    display: flex;
    color: #fff;

}

.noticeTitle {
    writing-mode: vertical-lr;
    border-right: 1px solid #b9966c;
    padding-right: 20px;
    margin-right: 20px;
    font-size: 21px;
    letter-spacing: 3px;
}

.noticeTxt {
    font-size: 14px;
    line-height: 1.5em;
}

.noticeTxt li {
    margin-bottom: 10px;
}

.authorButton a {
    background-color: #fff;
    color: #000;
    text-decoration: none;
    padding: 3px 7px;
    border-radius: 5px;
}

.copyright p {
    font-size: 14px;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #b9966c;
}

/* =====  平板以上 ===== */
@media (min-width: 768px) {
    .show-mobile {
        display: none;
    }

    .show-desktop {
        display: block;
    }

    .topLink img {
        padding: 10px 30px;
    }

    .social {
        font-size: 18px;
    }



    .topcontent {
        max-width: 900px;
        margin: 0 auto;
    }

    .titlePC {
        font-size: 46px;
        line-height: 48px;
        letter-spacing: 3px;
        max-width: 450px;
    }

    .title50Logo {
        max-width: 150px;
    }

    .titlePC p {
        font-size: 32px;
        letter-spacing: 4px;
        padding-bottom: 10px;
    }

    .athMenu {
        display: none;
    }

    .athMenuPc {
        width: 800px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
    }

    .menuItemPc {
        text-align: center;
        background: linear-gradient(90deg, #c19258, #ede1d1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-top: -30px;
        position: relative;
    }

    .menuItemPc h4 {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 2px;
    }

    .menuItemPc h4::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: #5c5145;
        margin: 5px 0 10px;
    }

    .menuItemPc p {
        font-size: 18px;
        letter-spacing: 1px;
    }

    .menuItemPc p span {
        font-size: 22px;
    }

    .athMenuPc div:nth-child(1)::after,
    .athMenuPc div:nth-child(2)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -30%;
        transform: translateY(-50%);
        height: 100%;
        border-right: 1px solid #5c5145;
    }

    .menuItemPc:nth-child(2) img {
        position: absolute;
        max-width: 90px;
        top: 0px;
        left: -40px;
    }

    .menuItemPc:nth-child(3) img {
        position: absolute;
        max-width: 50px;
        top: 50px;
        left: -20px;
    }

    .activBox {
        max-width: 900px;
        padding: 20px;
    }

    .activFree {
        flex-direction: row-reverse;
        align-items: center;
        gap: 40px;
    }

    .activFree>div:first-child {
        flex: 1;
    }

    .activFree>div:last-child {
        flex: 1;
    }

    .athButton {
        text-align: right;
        margin: 30px 0;
    }

    .activmerch {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }

    /*回憶錄*/
    .activremem {
        display: flex;
        margin-top: 40px;
    }

    .rememTitle {
        width: 40%;
        display: flex;
        flex-direction: column;
        position: absolute;
    }

    .rememTitle div img {
        width: 260%;
        margin-left: -56px;
    }

    .rememTxtBox {
        width: 60%;
        padding-left: 40px;
        padding-right: 40px;
        margin-left: 40%;
        margin-top: 15px;
    }

    .soicalButton {
        justify-content: space-around;
        width: 400px;
        margin: 0 auto;
    }

    .otherActBox {
        max-width: 1200px;
        margin: 0 auto;
    }

    .otherBox {
        display: flex;
        flex-direction: row;
        margin: 0 20px;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .otherBox>div {
        width: 45%;
    }


    .athMoreBadge {
        right: 120px;
        top: 140px;
        position: fixed;
    }

    .athMore {
        right: 126px;
        top: 360px;
        position: fixed;
        width: 50px;
    }

    .aboutJohnson {
        right: 126px;
        top: 200px;
        position: fixed;
        width: 50px;
    }
}


/* =====  430px 以下等比例縮小 ===== */
@media (max-width: 430px) {
    .topcontent {
        transform-origin: top center;
        padding: 8px;
    }


    .titlePC {
        font-size: 24px;
        line-height: 26px;
        margin: 20px auto 30px;
    }

    .titlePC p {
        font-size: 19px;
        margin-top: 8px;
    }

    .title50Logo {
        max-width: 110px;
    }

    .athMenu {
        max-width: 380px;
        transform: scale(0.9);
        transform-origin: top center;
    }

    .athMenu h4 {
        font-size: 23px;
        line-height: 32px;
    }

    .athMenu p {
        font-size: 16px;
        right: 5px;
    }

    .menuItem:nth-child(1) img {
        max-width: 100px;
        top: -35px;
        left: -10px;
    }

    .menuItem:nth-child(2) img {
        max-width: 100px;
        left: 0px;
    }

    .athMoreBadge {
        max-width: 50px;
        right: -1px;
        position: fixed;
        top: 215px;
    }

    .athMore {
        padding: 15px 8px 3px;
        top: 390px;
        right: 3px;
        position: fixed;
        width: 40px;
    }


    .aboutJohnson {
        padding: 12px 8px 3px;
        top: 255px;
        right: 3px;
        position: fixed;
        width: 40px;
    }

    .athMore h4,
    .aboutJohnson h3 {
        font-size: 16px;
    }

}

@media (min-width: 768px) and (max-width: 1200px) {

    .athMoreBadge {
        right: 10px;
        top: 140px;
        position: fixed;
    }

    .athMore {
        right: 19px;
        top: 355px;
        position: fixed;
    }

    .aboutJohnson {
        right: 19px;
        top: 200px;
        position: fixed;
    }
}


/* ===== Main 背景設定 - 正確的順序 ===== */

/* 基礎手機版 (預設，0-767px) */
main {
    width: 100%;
    background:
        url(../image/50thTopImgMo.png) no-repeat center top,
        linear-gradient(to bottom,
            rgba(53, 43, 68, 1) 1%,
            rgba(193, 2, 53, 1) 38%,
            rgba(193, 2, 53, 1) 38%,
            rgba(53, 43, 68, 1) 66%,
            rgba(72, 30, 57, 1) 85%,
            rgba(65, 15, 37, 1) 100%);
    background-size: 100% auto, 100% 100%;
    transition: background-image 0.5s ease-in-out,
        background-position 0.3s ease-in-out,
        background-size 0.3s ease-in-out;
}

/* 小螢幕手機 (430px以下) */
@media (max-width: 430px) {
    main {
        background:
            url(../image/50thTopImgMo.png) no-repeat center top,
            linear-gradient(to bottom,
                rgba(53, 43, 68, 1) 1%,
                rgba(193, 2, 53, 1) 38%,
                rgba(193, 2, 53, 1) 38%,
                rgba(53, 43, 68, 1) 66%,
                rgba(72, 30, 57, 1) 85%,
                rgba(65, 15, 37, 1) 100%);
        background-size: 100% auto, 100% 100%;
    }
}

/* 平板版 (768px-1200px) */
@media (min-width: 768px) and (max-width: 1200px) {
    main {
        background-image: url(https://www.johnsonfitness.com.tw/campaign/50year/images/50thTopImgPc.png);
        background-position: center top;
        background-size: 160% auto;
        transition: background-image 0.5s ease-in-out,
            background-position 0.3s ease-in-out,
            background-size 0.3s ease-in-out;
    }

    .titlePC {
        margin-top: 140px;
    }
}

/* 中型桌機 (1201px-1486px) */
@media (min-width: 1201px) and (max-width: 1486px) {
    main {
        background-image: url(https://www.johnsonfitness.com.tw/campaign/50year/images/50thTopImgPc.png);
        /* 補上缺少的 background-image */
        background-position: center top;
        background-size: 120% auto;
        transition: background-image 0.5s ease-in-out,
            background-position 0.3s ease-in-out,
            background-size 0.3s ease-in-out;
    }

    .titlePC {
        margin-top: 100px;
    }

}

/* 大螢幕桌機 (1487px以上) */
@media (min-width: 1487px) {
    main {
        background-image: url(https://www.johnsonfitness.com.tw/campaign/50year/images/50thTopImgPc.png);
        background-position: center top;
        background-size: 100% auto;
        transition: background-image 0.5s ease-in-out,
            background-position 0.3s ease-in-out,
            background-size 0.3s ease-in-out;
    }

    .titlePC {
        margin-top: 120px;
        margin-bottom: 70px;
    }
}