*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    background: #f1fbff;
    color: #333333;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

header,
main,
footer {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background-color: #fff;
}

:root {
    --white: #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
    --price: #cc0000;
    --border: #e8e6e2;
    --radius: 12px;
}

/*header 版頭*/
.topLink {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: absolute;
    top: 15px;
    left: 0px;
    right: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

/*main JP4000 手機*/
.YtVideo {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.YtVideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.jp4000-m-768 {
    background-image: url(../images/mobile_2026fa_02.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 15px;
}

.jp4000-fa-h3 {
    font-size: clamp(26px, 4vw, 45px);
    color: #ffffff;
    font-family: "Noto Serif HK", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    padding-top: 30px;
}

.jp4000-m-768>div:nth-child(2) {
    max-width: 150px;
    padding-top: 30px;
}

.jp4000-m-768>div:nth-child(4) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    padding: 20px 0;
}

.jp4000-m-768>div:nth-child(4)>img:nth-child(1) {
    max-width: 110px;
    height: auto;
}

.jp4000-m-768>div:nth-child(4)>img:nth-child(2) {
    max-width: 150px;
    height: auto;
}

.jp4000PriceWrapper {
    max-width: 380px;
    padding: 20px 15px;
    margin: 0 auto;
    background-color: #ffffff;
}

.JP4000no1 small {
    font-size: 14px;
}

.jp4000PriceWrapper h2 {
    font-size: 25px;
}

.jp4000PriceWrapper hr {
    max-width: 350px;
    margin: 10px 0;
}

.jp4000SaleText {
    font-size: 20px;
}

.jp4000-button {
    text-align: center;
    padding: 20px;
}

.jp4000-button a {
    text-align: center;
    color: #ffffff;
    font-size: 22px;
    background: linear-gradient(to bottom, #0063a4 1%, #00323f 100%);
    padding: 5px 20px;
    border-radius: 8px;
    letter-spacing: 1px;
    font-family: "Noto Serif HK", serif;
}

.jp4000Price {
    font-size: 14px;
    margin-top: 10px;
}

.jp4000Price p .price {
    color: #cc0000;
    font-weight: 500;
    font-size: 25px;
}

/*main JP4000 桌機*/
/*footer*/
footer {
    padding-top: 20px;
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
}

.store-section {
    text-align: center;
}

.footerMap {
    max-width: 150px;
    padding-bottom: 20px;
    margin: 0 auto;
}

.section-title {
    font-size: 22px;
    letter-spacing: 2px;
    margin: 30px 0px;
    text-align: center;
}

.notes-section {
    font-size: 14px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 15px;
}

.note-item {
    position: relative;
    padding-left: 22px;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 5px;
}

.note-item::before {
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 400;
}

.johnsonCopyrught {
    background-color: #9e1f24;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 20px 0;
    letter-spacing: 1px;
}

.socialink {
    margin: 30px auto;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
}

.socialink li {
    margin: 0 10px;
}

.soicalIcon {
    width: 20px;
}

/*父親節區塊一 */
.faBox1,
.faBox2,
.faBox3,
.faBox4 {
    margin-top: 50px;
}

.promise-sol img {
    max-width: 400px;
    margin: 0 auto;
}

.promise-sol::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #eeeeee;
    margin-bottom: 50px;
}

.talkWrappper {
    position: relative;
}

.talk-content,
.talk-content-left {
    font-family: "Noto Serif HK", serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 20px;
    font-size: clamp(15px, 1vw, 18px);
}


.talk-title,
.talk-title-2,
.talk-title-4 {
    font-family: "Noto Serif HK", serif;
    position: absolute;
    color: #ffffff;
    font-size: clamp(15px, 2vw, 26px);
    z-index: 888;
    bottom: 10px;
    left: 20px;
}

.talk-title-3 {
    font-family: "Noto Serif HK", serif;
    position: absolute;
    color: #ffffff;
    font-size: clamp(15px, 2vw, 26px);
    z-index: 888;
    bottom: 10px;
    left: 20px;
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6);
}

.talk-imgWrapper {
    position: relative;
    z-index: 777;
}

.actPro-info {
    text-align: left;
    margin-top: 20px;
    margin-left: 12px;
}

.actPro-info>div>img {
    max-width: 150px;
}

.proSale>.price {
    font-size: 18px;
}

.pro-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 30px 15px;
    width: 100%;
}

.pro-container>div,
.pro-container>div {
    width: calc(50% - 10px);
    box-sizing: border-box;
}

/*產品名稱價格區塊*/



.mass-item-card,
.fit-item-card {
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
}

.mass-item-card:hover,
.fit-item-card:hover {
    transform: translateY(-3px);
}

.mass-item-card a,
.fit-item-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 20px;
    align-items: center;
    justify-content: center;
}

.img-wrap {
    /* aspect-ratio: 1 / 1; */
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

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

.mass-item-card:hover .img-wrap img,
.fit-item-card:hover .img-wrap img {
    transform: scale(1.03);
    transition: transform 0.25s ease;
}

.mass-logo {
    max-width: 80px;
}

.a395-row {
    display: flex;
}

.mass-logo-a395 {
    max-width: 40px;
}

.pro-title,
.pro-name {
    font-size: 14px;
    color: #333333;
    font-weight: 400;
    line-height: 2;
}

.pro-text,
.pro-content {
    font-size: clamp(15px, 2vw, 16px);
    color: #000000;
}

.proSale,
.pro-price {
    color: #cc0000;
    font-size: 12px;
}

.proSale>.price,
.pro-price>.price {
    font-size: 18px;
}

.u-mobile-only {
    display: block;
}

.u-desktop-only {
    display: none;
}

.fm210-add-m {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    background-image: url('../images/mobile_2026fa_11.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: 1.1fr 1fr;

}

.fm210-add-m::before {
    content: "";
    grid-column: 1 / -1;
    padding-top: 183%;
    pointer-events: none;
}

.fm210-content {
    position: absolute;
    top: 13%;
    left: 58%;
}

.pro-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/*桌機*/
@media (min-width: 768px) {

    /*main JP4000 桌機*/
    .jp4000-desktop-wrapper {
        background: url(../images/2026fa_02.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 0 15px 30px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 50px;
    }

    .left-col {
        display: flex;
        flex-direction: column;
    }

    .right-col {
        display: flex;
        flex-direction: column;
    }

    .youtubeDeskBox {
        padding: 60px 0;
    }

    .jp4000Desk1item {
        max-width: 520px;
    }

    .jp4000DeskPrice {
        margin: 0 auto;
        padding: 15px 30px;
        max-width: 460px;
    }

    .jp4000-fa-h3 {
        font-size: clamp(20px, 3vw, 45px);
    }

    .jp4000PriceWrapper h2 {
        font-size: clamp(16px, 2vw, 25px);
    }

    .jp4000SaleText {
        font-size: clamp(14px, 2vw, 20px);
    }

    /*父親節 區塊一*/

    .talk-content {
        display: block;
        writing-mode: vertical-rl;
        position: absolute;
        z-index: 888;
        right: 20px;
        top: 40px;
        letter-spacing: 3px;
        padding-right: 0;
    }

    .talk-content-left {
        display: block;
        writing-mode: vertical-rl;
        position: absolute;
        z-index: 888;
        left: 7%;
        top: 30px;
        letter-spacing: 3px;
        padding-right: 0;
    }

    .talk-content span,
    .talk-content-left span {
        display: inline-block;
        background-color: #fcfcfc;
        color: #1a1a1a;
        margin-left: 5px;
        padding: 3px 2px;
    }


    .talk-title {
        bottom: 10%;
        right: 20%;
        left: auto;
    }

    .talk-title-2 {
        bottom: 10%;
        right: 35%;
        left: auto;
    }

    .talk-title-3 {
        top: 37%;
        left: 48%;
    }

    .talk-title-4 {
        bottom: 20%;
        right: 38%;
        left: auto;
    }

    .talk-imgWrapper {
        padding-top: 50px;
    }

    .talk-imgWrapper-100 {
        padding-top: 60px;
    }

    .talk-imgWrapper img {
        max-width: 76%;
        margin-left: auto;
    }

    .talk-actPro {
        position: absolute;
        z-index: 888;
        bottom: 33%;
        left: 10%;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .talk-actPro-2 {
        position: absolute;
        z-index: 888;
        bottom: 65%;
        left: 50%;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .talk-actPro-3 {
        position: absolute;
        z-index: 888;
        bottom: 33%;
        left: 10%;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .talk-actPro-4 {
        position: absolute;
        z-index: 888;
        bottom: 65%;
        left: 25%;
    }

    .pro-container>.mass-item-card {
        width: calc((100% - 40px) / 3);
    }

    .pro-container>div {
        width: calc((100% - 60px) / 4);
    }

    .mass-logo {
        max-width: 150px;
    }

    .mass-logo-a395 {
        max-width: 60px;
    }

    .u-mobile-only {
        display: none;
    }

    .u-desktop-only {
        display: block;
    }

    .fm210-add-desk {
        display: grid;
        grid-template-columns: 3.5fr 6.5fr;
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        align-items: center;
    }

    .left-fm210 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 40px;
        text-align: left;
    }

    .left-sin-fm210 {
        max-width: 337px;
    }
}