/* ===== 重置與基礎樣式 ===== */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

* {
    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(../images/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: 370px;
    right: 16px;
    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;

}

.aboutJohnson{
    position: fixed;
    top:200px;
    right: 16px;
    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;

}

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

.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("../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: 370px;
    position: fixed;
}
.aboutJohnson{
    right: 126px;
    top: 200px;
    position: fixed;
}
}


/* =====  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: 10px 8px;
        top: 395px;
        right: 3px;
        position: fixed;
    }


 .aboutJohnson{
        padding: 10px 8px;
        top: 255px;
        right: 3px;
        position: fixed;
    }

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

}

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

    .athMoreBadge {
    right:  10px;
    top: 140px;
    position: fixed;
    }
.athMore  {
    right: 16px;
    top: 370px;
    position: fixed;
}
.aboutJohnson {
    right: 16px;
    top: 200px;
    position: fixed;
}
}


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

/* 基礎手機版 (預設，0-767px) */
main {
    width: 100%;
    background:
        url(../images/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(../images/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(../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(../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(../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;
    }
}