@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300..400&family=Noto+Serif+TC:wght@500;600;700;900&display=swap");

#CloudFoam {
    background-color: #031561;
}

#CloudFoam .for_m {
    display: none !important;
}

@media only screen and (max-width: 991px) {
    #CloudFoam .for_pc {
        display: none !important;
    }
    #CloudFoam .for_m {
        display: block !important;
    }
}

/* ===== pager ===== */
#CloudFoam .pager {
    background-color: #fff;
}
#CloudFoam .pager .pager_kv {
    display: none;
}
#CloudFoam .pager a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 0;
    background: none;
}
#CloudFoam .pager a span {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Serif TC", serif;
    font-size: 1em;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    color: #00125e;
    transform: none;
}
#CloudFoam .pager a.on span,
#CloudFoam .pager a:hover span {
    color: #fff;
    background-color: #00125e;
}
#CloudFoam .pager a + a::before {
    content: "";
    position: absolute;
}
#CloudFoam .pager .pager_kv + a::before {
    content: none;
}

@media only screen and (min-width: 1200px) {
    #CloudFoam .pager {
        right: -2.696em;
        width: 11.435em;
        padding: 0.609em 3.261em 0.609em 1.13em;
        border-radius: 1.435em;
        font-size: 1.05vw;
    }
    #CloudFoam .pager a {
        width: 100%;
        height: 2.87em;
        background-image: none;
    }
    #CloudFoam .pager a span {
        width: 100%;
        height: 2em;
        border-radius: 0.435em;
    }
    #CloudFoam .pager a + a::before {
        top: 0;
        left: -0.565em;
        right: -0.87em;
        height: 0.087em;
        background-image: repeating-linear-gradient(
            90deg,
            #72beee 0 0.087em,
            transparent 0.087em 0.326em
        );
    }
}

@media only screen and (max-width: 1199px) {
    #CloudFoam .pager {
        padding: 0;
        height: 6.8vw;
        border-radius: 0;
        font-size: 1.6vw;
    }
    #CloudFoam .pager a {
        width: 20%;
        border-right: 0;
        background-image: none;
    }
    #CloudFoam .pager a span {
        width: 85%;
        height: 68%;
        border-radius: 0.375em;
    }
    #CloudFoam .pager a + a::before {
        top: 50%;
        left: 0;
        width: 0.075em;
        height: 70%;
        background-image: repeating-linear-gradient(
            180deg,
            #72beee 0 0.075em,
            transparent 0.075em 0.3em
        );
        transform: translateY(-50%);
    }
}

@media only screen and (max-width: 991px) {
    #CloudFoam .pager {
        font-size: 2.4vw;
    }
}

@media only screen and (max-width: 520px) {
    #CloudFoam .pager {
        display: flex;
        height: 13.33vw;
        overflow-x: auto;
        overflow-y: hidden;
        font-size: 3.56vw;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #CloudFoam .pager::-webkit-scrollbar {
        display: none;
    }
    #CloudFoam .pager a {
        flex: 0 0 30.67vw;
        width: auto;
    }
}

/* ===== 共用文字樣式 ===== */
#CloudFoam .txt_title {
    font-family: "Noto Serif TC", serif;
    font-size: 3.194vw;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.115em;
    color: #00125e;
    text-shadow:
        0.036em 0 0 #f9ee9d,
        0.033em 0.014em 0 #f7e991,
        0.025em 0.025em 0 #f6e686,
        0.014em 0.033em 0 #f5e47f,
        0 0.036em 0 #f5e37d,
        -0.014em 0.033em 0 #f5e47f,
        -0.025em 0.025em 0 #f6e686,
        -0.033em 0.014em 0 #f7e991,
        -0.036em 0 0 #f9ee9d,
        -0.033em -0.014em 0 #fbf2a9,
        -0.025em -0.025em 0 #fcf5b4,
        -0.014em -0.033em 0 #fdf7bb,
        0 -0.036em 0 #fdf8bd,
        0.014em -0.033em 0 #fdf7bb,
        0.025em -0.025em 0 #fcf5b4,
        0.033em -0.014em 0 #fbf2a9;
}
#CloudFoam .txt_title > span {
    display: inline-block;
    /* transform: scaleX(0.96); */
}
#CloudFoam .txt_title_red {
    color: #bd2329;
}
#CloudFoam .txt_sub {
    font-family: "Noto Serif TC", serif;
    font-size: 1.647vw;
    font-weight: 600;
    margin: 0.6em 0 0;
    line-height: 1.417em;
    letter-spacing: 0.095em;
    color: #212121;
}
#CloudFoam .txt_sub sup {
    font-size: 0.591em;
    line-height: 0;
    vertical-align: 0.769em;
}
#CloudFoam .txt_lead {
    margin: 2em 0 0;
    font-family: "Noto Sans TC", sans-serif;
    font-size: 1.257vw;
    font-weight: 350;
    line-height: 2em;
    letter-spacing: 0.055em;
    color: #212121;
}
#CloudFoam .txt_note {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 0.743vw;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.055em;
    color: #212121;
}
#CloudFoam .txt_kicker {
    position: relative;
    z-index: 0;
    font-family: "Noto Serif TC", serif;
    font-size: 2.15vw;
    font-weight: 600;
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.005em;
    margin: 0 0 2em;
    color: #bd2329;
    text-shadow:
        0.1em 0 0 #fff,
        0.092em 0.038em 0 #fff,
        0.071em 0.071em 0 #fff,
        0.038em 0.092em 0 #fff,
        0 0.1em 0 #fff,
        -0.038em 0.092em 0 #fff,
        -0.071em 0.071em 0 #fff,
        -0.092em 0.038em 0 #fff,
        -0.1em 0 0 #fff,
        -0.092em -0.038em 0 #fff,
        -0.071em -0.071em 0 #fff,
        -0.038em -0.092em 0 #fff,
        0 -0.1em 0 #fff,
        0.038em -0.092em 0 #fff,
        0.071em -0.071em 0 #fff,
        0.092em -0.038em 0 #fff;
    transform: rotate(-8deg);
}
#CloudFoam .txt_kicker > span {
    font-size: 1.463em;
    line-height: 0;
}
#CloudFoam .txt_kicker::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 1.2em;
    left: 0;
    width: 3.88em;
    height: 0.5em;
    background: url(/image/CloudFoam/txt_line.png) no-repeat 0 0 / 100% 100%;
    filter: drop-shadow(0.05em 0 0 #fff) drop-shadow(0.05em 0 0 #fff)
        drop-shadow(-0.05em 0 0 #fff) drop-shadow(-0.05em 0 0 #fff)
        drop-shadow(0 0.05em 0 #fff) drop-shadow(0 0.05em 0 #fff)
        drop-shadow(0 -0.05em 0 #fff) drop-shadow(0 -0.05em 0 #fff);
}
#CloudFoam .txt_wave {
    position: relative;
}
#CloudFoam .txt_wave::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.4em;
    height: 0.695vw;
    background: url(/image/CloudFoam/mark.png) repeat-x;
    background-size: auto 100%;
}
#CloudFoam .br_mb {
    display: none;
}

#CloudFoam .block {
    margin-top: -1px;
}
@media only screen and (max-width: 991px) {
    #CloudFoam .txt_title {
        font-size: 7.1vw;
    }
    #CloudFoam .txt_sub {
        font-size: 3.544vw;
    }
    #CloudFoam .txt_lead {
        font-size: 2.8vw;
        line-height: 1.965em;
    }
    #CloudFoam .txt_note {
        font-size: 1.667vw;
    }
    #CloudFoam .txt_kicker {
        font-size: 4.825vw;
    }
    #CloudFoam .txt_wave::after {
        height: 1.467vw;
    }
    #CloudFoam .br_mb {
        display: inline;
    }
}

/* ===== s1 ===== */
#CloudFoam #s1 {
    background: url(/image/CloudFoam/bg1.jpg) no-repeat top / 100%;
}
#CloudFoam #s1 .s1_title {
    padding-top: 6.58vw;
    font-family: "Noto Serif TC", serif;
    font-size: 2.3025vw;
    line-height: 1;
    color: #00125e;
    text-align: center;
}
#CloudFoam #s1 .s1_title_sub {
    margin: 0 0 0.59em;
    font-size: 1em;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.095em;
}
#CloudFoam #s1 .s1_title_sub > span {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding-left: 0.095em;
}
#CloudFoam #s1 .s1_title_sub > span::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0.69em;
    left: -0.27em;
    right: -0.27em;
    height: 0.465em;
    background-color: #59c0fb;
    transform: skewX(-10.8deg);
}
#CloudFoam #s1 .s1_title_main {
    margin: 0;
    font-size: 3.583vw;
}
#CloudFoam #s1 .s1_body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 4.57vw;
    margin-left: -8vw;
}
#CloudFoam #s1 .s1_body_pic {
    flex: none;
    width: 36.7vw;
}
#CloudFoam #s1 .s1_body_pic img {
    display: block;
    width: 100%;
}
#CloudFoam #s1 .s1_body_txt {
    margin-left: -7.06vw;
    padding-top: 1.35vw;
    font-family: "Noto Serif TC", serif;
    font-size: 1.4358vw;
    color: #212121;
}
#CloudFoam #s1 .s1_body_lead {
    position: relative;
    margin: 0;
    font-weight: 500;
    line-height: 1.937em;
    letter-spacing: 0.055em;
}
#CloudFoam #s1 .s1_body_hl {
    line-height: 0;
    color: #00125e;
    font-style: italic;
    letter-spacing: 0.095em;
}
#CloudFoam #s1 .s1_body_hl b {
    font-size: 1.293em;
    font-weight: 900;
}
#CloudFoam #s1 .s1_body_hl sup {
    font-size: 0.7em;
    font-weight: 900;
    vertical-align: 0.5em;
}
#CloudFoam #s1 .s1_body_bracket {
    letter-spacing: 0.055em;
}
#CloudFoam #s1 .s1_body_sub {
    margin: 1.26em 0 0;
}
#CloudFoam #s1 .s1_body_note {
    margin: 7.6em 0 0;
}
@media only screen and (max-width: 991px) {
    #CloudFoam #s1 {
        aspect-ratio: 938/1103;
        background-image: url(/image/CloudFoam/bg_m1.jpg);
        background-size: 100% auto;
        background-color: #eff7fc;
    }
    #CloudFoam #s1 .s1_title {
        padding-top: 14.42vw;
        font-size: 5.1667vw;
    }
    #CloudFoam #s1 .s1_title_main {
        font-size: 7.5vw;
    }
    #CloudFoam #s1 .s1_body {
        margin-top: 15.13vw;
    }
    #CloudFoam #s1 .s1_body_pic {
        margin-left: -14.8vw;
        width: 77vw;
    }
    #CloudFoam #s1 .s1_body_txt {
        margin-left: -18.23vw;
        padding-top: 2.07vw;
        font-size: 3.096vw;
    }
    #CloudFoam #s1 .s1_body_lead {
        line-height: 1.986em;
    }
    #CloudFoam #s1 .s1_body_hl {
        letter-spacing: 0.075em;
    }
    #CloudFoam #s1 .s1_body_bracket {
        display: none;
    }
    #CloudFoam #s1 .s1_body_note {
        margin-top: 9.48em;
    }
}

/* ===== s2 ===== */
#CloudFoam #s2 {
    position: relative;
    aspect-ratio: 1870/868;
    background: url(/image/CloudFoam/bg2.jpg) no-repeat top / 100%;
}
#CloudFoam #s2 .s2_body {
    display: flex;
    align-items: flex-start;
    padding-top: 3.1vw;
    padding-left: 24vw;
}
#CloudFoam #s2 .s2_body_txt {
    position: relative;
    z-index: 2;
    flex: none;
    width: 28vw;
    padding-top: 3.5vw;
}
#CloudFoam #s2 .s2_body_pic {
    position: absolute;
    z-index: 1;
    top: 2.567vw;
    right: 0;
    width: 61.444vw;
}
#CloudFoam #s2 .s2_body_pic img {
    display: block;
    width: 100%;
}
#CloudFoam #s2 .s2_lead_wave::after {
    left: -2.11em;
}
@media only screen and (max-width: 991px) {
    #CloudFoam #s2 {
        aspect-ratio: 938/1019;
        background-image: url(/image/CloudFoam/bg_m2.jpg);
        background-size: 100% auto;
        background-color: #bae1fa;
    }
    #CloudFoam #s2 .s2_body {
        padding-left: 7.45vw;
        margin-top: 0;
    }
    #CloudFoam #s2 .s2_body_txt {
        width: 64vw;
        padding-top: 8.5vw;
    }
    #CloudFoam #s2 .s2_body_pic {
        top: 9.702vw;
        right: auto;
        left: 32.733vw;
        width: 66.267vw;
    }
    #CloudFoam #s2 .s2_lead_wave::after {
        left: 0;
    }
}

/* ===== s3 ===== */
#CloudFoam #s3 {
    position: relative;
    z-index: 2;
    background: url(/image/CloudFoam/bg3.jpg) no-repeat top / 100%;
}
#CloudFoam #s3::before {
    content: "";
    position: absolute;
    top: -8.235vw;
    left: 0;
    width: 100%;
    aspect-ratio: 1870/175;
    background: url(/image/CloudFoam/bg3_top.png) no-repeat top / 100%;
}
#CloudFoam #s3 .s3_body {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: flex-start;
    padding-left: 9vw;
    padding-bottom: 1vw;
}
#CloudFoam #s3 .s3_body::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -1.123vw;
    left: 35.455vw;
    width: 49.412vw;
    height: 30.888vw;
    background: url(/image/CloudFoam/s3_bubble.png) no-repeat 0 0 / 100% 100%;
}
#CloudFoam #s3 .s3_body_pic {
    flex: none;
    width: 43.048vw;
    margin: 4.92vw 0 -0.672vw;
}
#CloudFoam #s3 .s3_body_pic img {
    display: block;
    width: 100%;
}
#CloudFoam #s3 .s3_body_txt {
    position: relative;
    z-index: 1;
    flex: none;
    width: 28vw;
    margin-left: -1.24vw;
    padding-top: 3.429vw;
}
#CloudFoam #s3 .s3_note {
    margin: 4.9em 0 0;
}
@media only screen and (max-width: 991px) {
    #CloudFoam #s3 {
        aspect-ratio: 938/1139;
        background-image: url(/image/CloudFoam/bg_m3.jpg);
        background-size: 100% auto;
        background-color: #a9dbfb;
    }
    #CloudFoam #s3::before {
        top: -13.067vw;
        aspect-ratio: 1124/271;
        background-image: url(/image/CloudFoam/bg3_top_m.png);
    }
    #CloudFoam #s3 .s3_body {
        padding-top: 15vw;
        padding-left: 0;
        /* padding-bottom: 9.5vw; */
    }
    #CloudFoam #s3 .s3_body::before {
        display: none;
    }
    #CloudFoam #s3 .s3_body_pic {
        width: 47vw;
        margin: 11.356vw 0 0 3.32vw;
    }
    #CloudFoam #s3 .s3_body_txt {
        width: 53vw;
        margin-left: -7.12vw;
        padding-top: 0;
    }
    #CloudFoam #s3 .s3_note {
        margin-top: 5.03em;
    }
}

/* ===== s4 ===== */
#CloudFoam #s4 {
    background: url(/image/CloudFoam/bg4.jpg) no-repeat top / 100% 100%;
}
#CloudFoam #s4 .s4_body {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: flex-start;
    padding-left: 25.81vw;
}
#CloudFoam #s4 .s4_body::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 22.567vw;
    left: 14.225vw;
    width: 7.647vw;
    height: 8.326vw;
    background: url(/image/CloudFoam/s4_flower.png) no-repeat 0 0 / 100% 100%;
}
#CloudFoam #s4 .s4_body_txt {
    position: relative;
    z-index: 1;
    flex: none;
    width: 28vw;
    padding-top: 7.609vw;
}
#CloudFoam #s4 .s4_body_pic {
    flex: none;
    width: 43.614vw;
    margin: 4.963vw 0 -0.68vw -13.326vw;
}
#CloudFoam #s4 .s4_body_pic img {
    display: block;
    width: 100%;
}
#CloudFoam #s4 .s4_sub {
    color: #00125e;
}
@media only screen and (max-width: 991px) {
    #CloudFoam #s4 {
        aspect-ratio: 938/1215;
        background-image: url(/image/CloudFoam/bg_m4.jpg);
        background-size: 100% auto;
        background-color: #72bcec;
    }
    #CloudFoam #s4 .s4_body {
        display: block;
        padding-left: 0;
    }
    #CloudFoam #s4 .s4_body::before {
        display: none;
    }
    #CloudFoam #s4 .s4_body_txt {
        /* width: auto; */
        width: 60vw;
        padding: 13.14vw 0 0 7.45vw;
    }
    #CloudFoam #s4 .s4_body_pic {
        width: 60vw;
        margin: -34.01vw 0 -5vw 38.9vw;
    }
}

/* ===== s5 ===== */
#CloudFoam #s5 {
    position: relative;
    z-index: 1;
    background: url(/image/CloudFoam/bg5.jpg) no-repeat top / 100% 100%;
}
#CloudFoam #s5 .s5_body {
    padding: 13.219vw 0 9.716vw;
    text-align: center;
}
#CloudFoam #s5 .s5_body::before {
    content: "";
    position: absolute;
    top: -1.5vw;
    left: 0;
    width: 100%;
    aspect-ratio: 1870/244;
    background: url(../CloudFoam/bg5_top.png) no-repeat top / 100%;
}
#CloudFoam #s5 .s5_title {
    margin: 0;
}
#CloudFoam #s5 .s5_sub {
    padding-left: 0.095em;
}
#CloudFoam #s5 .s5_pic {
    width: 49.483vw;
    margin: 4.365vw auto 0;
}
#CloudFoam #s5 .s5_pic img {
    display: block;
    width: 100%;
}
@media only screen and (max-width: 991px) {
    #CloudFoam #s5 {
        background-image: url(/image/CloudFoam/bg_m5.jpg);
        background-size: 100% auto;
        background-color: #f2ddae;
    }
    #CloudFoam #s5 .s5_body {
        padding: 29.648vw 0 12vw;
    }
    #CloudFoam #s5 .s5_body::before {
        top: -3.5vw;
        aspect-ratio: 938/268;
        background: url(../CloudFoam/bg5_top_m.png) no-repeat top / 100%;
    }
    #CloudFoam #s5 .s5_pic {
        width: 100%;
        margin-top: -6vw;
    }
}