html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
}






#goHappy .js_fixedTop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 99;
}

#goHappy .js_fixedTop .js_fixedTopHeight {
    width: 100%;
    background: #fff9e4;
    z-index: 99;
}

#goHappy .js_fixedTop.onFixed .js_fixedTopHeight {
    width: 96%;
    left: 2%;
}

#goHappy .js_fixedTop .js_fixedTopHeight {
    z-index: 98;
}

#goHappy .logo-goHappy {
    padding: 25px 0 18px 0;
    margin: 0 auto;
    text-align: center;
}

#goHappy .logo-goHappy a {
    display: inline-block;
    width: 182px;
}





#goHappy footer {
    text-align: center;
    color: #444;
    padding: 3rem 1rem 10vh;
    font-family: "Noto Sans TC", "Microsoft JhengHei", "Arial", "Noto Sans JP", "Noto Sans KR", "Noto Sans", "PMingLiU", sans-serif;
    display: grid;
    grid-template-columns: 182px 1fr;
    max-width: 1180px;
    margin: 0 auto;
    width: 92%;
    align-items: center;
}

.footer_copyright {
    justify-self: flex-end;
}









/* -------------------------------------------------------------------------------- */
html,
body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: 400;
    font-style: normal;
    background-color: #fff9e4;
    scrollbar-gutter: stable;
}

.linebreak_pc {
    display: block;
}

.linebreak {
    display: none;
}

.hg_blf_main {
    font-size: 1rem;
    width: 100%;
    background-color: #fff9e4;
    letter-spacing: 0;
    margin: 80px auto 0;
    font-weight: 400;
    color: #333;
    overflow: hidden;
    position: relative;
    font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
}

@media screen and (max-width: 840px) {
    .hg_blf_main {
        margin: 5vw auto 0;
    }
}

.hg_blf_main img {
    width: 100%;
    display: block;
}

.hg_blf_main a {
    text-decoration: none;
    display: contents;
}

.ghost_btn {
    width: 2em;
    height: 2em;
    position: absolute;
    background-color: #ff000000;
    z-index: 2;
    cursor: pointer;
}

.hg_blf_main > div {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 131.25em;
    margin: 0 auto;

}


/**
 *                                                                  ┓        
 *                                                                  ┣┓┏┓┏┳┓┏┓
 *                                                                  ┛┗┗┛┛┗┗┗ 
 *                                                                           
 */
.home {
    background-image: url(../images/home_bg.png);
    height: 46.875em;
    background-color: #edeeed;
}

.home_bd {
    position: relative;
    width: 100%;
    max-width: 85.375em;
    margin: 0 auto;
}

.HappyGo_logo {
    position: absolute;
    width: 10.25em;
    height: 1.625em;
    top: 1.3em;
    left: 1.5em;
}

.home_title {
    position: absolute;
    top: 14.15em;
    width: 100%;
    text-align: center;
    font-size: 2.5em;
    font-weight: 600;
    color: #fff;
}

.home_text {
    position: absolute;
    top: 26.3em;
    width: 100%;
    text-align: center;
    font-size: 1.55em;
    font-weight: 600;
    color: #436d7d;
    line-height: 1.5em;
}



/**
 *                                                                    ┓     ┓          
 *                                                                  ┏┓┃┏┓┓┏ ┣┓┏┓┏┓┓┏╋┓┏
 *                                                                  ┣┛┗┗┻┗┫━┗┛┗ ┗┻┗┻┗┗┫
 *                                                                  ┛     ┛           ┛
 */
.play_beauty {
    background-image: url(../images/play_beauty_bg.png);
    height: 39.375em;
    background-color: #e5c8d0;
}

.play_beauty_bd {
    position: relative;
    width: 100%;
    max-width: 85.375em;
    margin: 0 auto;
}

.play_beauty_text {
    width: 100%;
    text-align: center;
    font-size: 1.4em;
    color: #436d7d;
    line-height: 1.5em;
    margin-top: 6.7em;
}

.play_beauty_gates {
    width: fit-content;
    margin: 3em auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.transfer_gate {
    width: 18.125em;
    height: 20.188em;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
}

.transfer_gate1 {
    background-image: url(../images/transfer_gate1.png);
}

.transfer_gate2 {
    background-image: url(../images/transfer_gate2.png);
}

.transfer_gate3 {
    background-image: url(../images/transfer_gate3.png);
}

.transfer_gate4 {
    background-image: url(../images/transfer_gate4.png);
}

.transfer_gate_text {
    width: 100%;
    text-align: center;
    font-size: 1.25em;
    font-weight: 600;
    color: #fff;
    line-height: 1.5em;
    margin-top: 13.5em;
}



/**
 *                                                                  ┓      ┓          
 *                                                                  ┣┓┓┏┓┏ ┣┓┏┓┏┓┓┏╋┓┏
 *                                                                  ┗┛┗┻┗┫━┗┛┗ ┗┻┗┻┗┗┫
 *                                                                       ┛           ┛
 */
.buy_beauty {
    background-image: url(../images/buy_beauty_bg1.png), url(../images/buy_beauty_bg2.png);
    background-repeat: no-repeat, no-repeat !important;
    background-position: center top, center bottom !important;
    background-size: 131.25em, 131.25em !important;
    height: 142.5em;
    background-color: #e5c7cf;
}

.buy_beauty_bd {
    position: relative;
    width: 100%;
    max-width: 85.375em;
    margin: 0 auto;
}


.buy_part1 {
    position: absolute;
    top: 25em;
    width: 32em;
    left: 12.1em;
    text-align: center;
    font-family: "Noto Sans TC", sans-serif;
    color: #005c6c;
}

.buy_part1 span {
    color: #cb5a89;
}

.buy_part1_text1 {
    font-size: 1.5em;
    height: 7.2em;
    line-height: 1.6em;
}

.buy_part1_text2 {
    font-size: .9em;
}

.buy_part1_text3 {
    font-size: 1.5em;
    margin-top: 5.3em;
    height: 6.7em;
    line-height: 1.6em;
    width: 120%;
    margin-left: -1.2em;
}

.buy_part1_text4 {
    text-align: center;
    margin-left: -1.2em;
}

.buy_part1_btn {
    top: 41em;
    left: 11.6em;
    width: 7.6em;
    height: 2.6em;
}


.buy_part2 {
    position: absolute;
    top: 65.5em;
    width: 36em;
    left: 42.3em;
    text-align: center;
    font-family: "Noto Sans TC", sans-serif;
    color: #005c6c;
}

.buy_part2_text1 {
    font-size: 1.5em;
    height: 11.1em;
    line-height: 1.6em;
}

.buy_part2_text2 {}

.buy_part2_btn {
    top: 20.5em;
    left: 14.6em;
    width: 7.6em;
    height: 2.6em;
}


.buy_part3 {
    position: absolute;
    top: 108em;
    width: 51.5em;
    left: 17em;
    text-align: center;
    font-family: "Noto Sans TC", sans-serif;
    color: #005c6c;
}

.buy_part3_products {
    width: 100%;
    height: 27.7em;
}

.buy_part3_btn {
    top: 29.1em;
    left: 22em;
    width: 7.6em;
    height: 2.6em;
}

.buy_part3_products_owl {
    width: 100%;
    height: 100%;
    position: relative;
}

.buy_part3_product {
    width: 16.125em;
    height: 24.375em;
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    overflow: hidden;
}

.buy_part3_product1 {
    background-image: url(../images/buy_product1.png);
}

.buy_part3_product2 {
    background-image: url(../images/buy_product2.png);
}

.buy_part3_product3 {
    background-image: url(../images/buy_product3.png);
}

.buy_part3_product4 {
    background-image: url(../images/buy_product4.png);
}

.buy_part3_product5 {
    background-image: url(../images/buy_product5.png);
}

.buy_part3_product6 {
    background-image: url(../images/buy_product6.png);
}

.buy_part3_product7 {
    background-image: url(../images/buy_product7.png);
}

.buy_part3_product_t {
    position: relative;
    width: 100%;
    margin: 17.6em auto 0;
}

.buy_part3_product_t_n {
    text-align: center;
    font-size: 1.1em;
    color: #404040;
    font-family: "Noto Sans TC", sans-serif;
    height: 3.2em;
}

.buy_part3_product_t_p {
    text-align: center;
    font-size: 1.15em;
    color: #404040;
    font-family: "Noto Sans TC", sans-serif;
}

.buy_part3_product_t_p span.price {
    font-size: 1.6em;
    font-weight: 600;
}

.buy_part3_product_t_p span.price_strike {
    text-decoration: line-through;
}

.buy_part3_product_t_p span.color_red {
    color: #e35a48;
}


/**
 *                                                                       ┓          ┓          
 *                                                                  ┏┓┓┏┏┣┓┏┓┏┓┏┓┏┓ ┣┓┏┓┏┓┓┏╋┓┏
 *                                                                  ┗ ┛┗┗┛┗┗┻┛┗┗┫┗ ━┗┛┗ ┗┻┗┻┗┗┫
 *                                                                              ┛             ┛
 */
.exchange_beauty {
    height: 123.75em;
    background-image: url(../images/exchange_beauty_bg1.png), url(../images/exchange_beauty_bg2.png);
    background-repeat: no-repeat, no-repeat !important;
    background-position: center top, center bottom !important;
    background-size: 131.25em, 131.25em !important;
    background-color: #e5c9d2;
}

.exchange_beauty_bd {
    position: relative;
    width: 100%;
    max-width: 85.375em;
    margin: 0 auto;
}

.exchange_0 {
    position: absolute;
    top: 26.4em;
    left: 12em;
}

.exchange_0_icon {
    width: 27.625em;
    height: 6.938em;
}

.exchange_hot {
    position: absolute;
    top: 28.7em;
    left: 43.9em;
}

.exchange_hot_icon {
    width: 27.625em;
    height: 6.938em;
}

.exchange_surprise1 {
    position: absolute;
    font-family: "Noto Sans TC", sans-serif;
    top: 64.8em;
    text-align: left;
    font-size: 1.2em;
    line-height: 1.5em;
    width: 22.9em;
    left: 35.2em;
    color: #5b4423;
}

.exchange_surprise1 div {
    height: 2.3em;
}

.exchange_surprise1_notice {
    position: absolute;
    font-family: "Noto Sans TC", sans-serif;
    top: 115em;
    text-align: left;
    font-size: 0.9em;
    line-height: 1.5em;
    width: 32em;
    left: 37em;
    color: #5b4423;
}

.exchange_surprise2 {
    position: absolute;
    font-family: "Noto Sans TC", sans-serif;
    top: 50.3em;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.6em;
    width: 19.1em;
    left: 31.7em;
    color: #5b4423;
}

.exchange_surprise2_text {}

.exchange_surprise2_text span {
    color: #cb5a89;
}

.exchange_beauty_btn1 {
    top: 55.8em;
    left: 39.1em;
    width: 7.6em;
    height: 2.6em;
}

.exchange_beauty_btn2 {
    top: 99.1em;
    left: 42.1em;
    width: 7.6em;
    height: 2.6em;
}

.exchange_beauty_btn3 {
    top: 99.2em;
    left: 50.4em;
    width: 7.6em;
    height: 2.6em;
}





/**
 *                                                                            
 *                                                                  ┏┓┓┏┏┓┏┓╋┏
 *                                                                  ┗ ┗┛┗ ┛┗┗┛
 *                                                                            
 */
.events {
    background-image: url(../images/events_bg.png);
    min-height: 10.625em;
    background-color: #e5c4ce;
    padding-bottom: 5em;
}

.events_bd {
    position: relative;
    width: 100%;
    max-width: 85.375em;
    margin: 0 auto;
}

.events_title {
    font-size: 2.2em;
    font-weight: 600;
    color: #192474;
    width: fit-content;
    margin: 1em auto 1em;
}

.events_banners {
    width: 67.5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
    grid-row-gap: 1em;
    margin: 0 auto;
}

.events_banner {
    width: 100%;
    background-color: #fff;
    border-radius: 0.5em;
    overflow: hidden;
    min-height: 16em;
}

.events_banner.c2 {
    grid-column: 1/3;
}

.bank_title {
    font-size: 2.2em;
    font-weight: 600;
    color: #192474;
    width: fit-content;
    margin: 2em auto 1em;
}

.bank_banners {
    width: 67.5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
    grid-row-gap: 1em;
    margin: 0 auto;
}

.bank_banner {
    width: 100%;
    background-color: #fff;
    border-radius: 0.5em;
    overflow: hidden;
    height: 14.2em;
}




/**
 *                                                                       •   
 *                                                                  ┏┓┏┓╋┓┏┏┓
 *                                                                  ┛┗┗┛┗┗┗┗ 
 *                                                                           
 */
.notice {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh;
    background-color: #00000088;
    display: none;
    top: 0;
    left: 0;
    max-width: unset !important;
    align-items: center;
    z-index: 9;
}

.notice_bd {
    width: 80%;
    margin: 4em auto 0;
    max-width: 82em;
    height: fit-content;
    padding: 0.3em 0 2em 0;
    background-image: url(../images/notice_ct_bg.png);
    border-radius: 1em;
    border: .5em solid #fff;
    max-width: 56em;
}

.notice_title {
    font-size: 2.2em;
    font-weight: 600;
    color: #192474;
    color: #4c6c7b;
    width: fit-content;
    margin: 0 auto 1em;
    border-top: 0px solid #4c6c7b;
    border-left: 0px solid #4c6c7b;
    border-right: 0px solid #4c6c7b;
    border-bottom: 4px solid #4c6c7b;
    border-style: double;
}

.notice_subtitle {
    font-weight: 600;
    margin-left: 2%;
}

.notice_ct {
    width: 90%;
    margin: 0 auto 0;
    text-align: left;
    line-height: 1.4em;
}

.notice_close {
    width: 1em;
    font-size: 2.5em;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 100;
    transform: scaleX(1.5);
    cursor: pointer;
    text-align: center;
    margin-left: 95%;
    color: #4c6c7b;
    line-height: 1em;
}

#goHappy ol li {
    list-style: decimal;
    padding: 0;
    margin: 0;
}


/***
 *                                                                                   ██╗██████╗  ██████╗  ██████╗ 
 *                                                                                  ███║╚════██╗██╔════╝ ██╔════╝ 
 *            █████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗    ╚██║ █████╔╝███████╗ ███████╗ 
 *            ╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝     ██║ ╚═══██╗██╔═══██╗██╔═══██╗
 *                                                                                   ██║██████╔╝╚██████╔╝╚██████╔╝
 *                                                                                   ╚═╝╚═════╝  ╚═════╝  ╚═════╝ 
 *                                                                                                                
 */
@media screen and (max-width: 1366px) {

    .hg_blf_main {
        font-size: 1.15vw;
    }

}

/***
 *                                                                                  ███████╗███████╗ ██████╗ 
 *                                                                                  ╚════██║██╔════╝██╔═████╗
 *            █████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗        ██╔╝███████╗██║██╔██║
 *            ╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝       ██╔╝ ╚════██║████╔╝██║
 *                                                                                     ██║  ███████║╚██████╔╝
 *                                                                                     ╚═╝  ╚══════╝ ╚═════╝ 
 *                                                                                                           
 */
@media screen and (max-width: 750px) {

    html,
    body {}

    ol {
        padding-inline-start: 1em;
    }

    img.hgapp_menu_logo {
        width: 70%;
    }

    #goHappy .logo-goHappy {
        padding: 3vw 0 2vw 0;
        margin: 0 auto;
        text-align: center;
    }

    footer img.hgapp_menu_logo {
        width: 6.2em;
    }

    #goHappy footer {
        padding: 3vw 2vw;
        grid-template-columns: 26vw 1fr;
        width: 96vw;
    }

    .footer_copyright {
        justify-self: flex-end;
        text-align: right;
        font-size: 0.7em;
    }

    .linebreak_pc {
        display: none;
    }

    .linebreak {
        display: block;
    }

    .owl-theme .owl-dots {
        padding-top: 0.8em;
    }

    .hg_blf_main {
        font-size: 2.8vw;
    }

    .hg_blf_main > div {
        background-size: 100%;
    }

    .home {
        background-image: url(../images/home_bg_m.png);
        height: 92vw;
    }

    .HappyGo_logo {
        width: 8.55em;
        left: 13.5em;
    }

    .home_title {
        top: 13.85em;
        font-size: 1.75em;
    }

    .home_text {
        top: 20.6em;
        font-size: 1.35em;
    }



    .play_beauty {
        background-image: url(../images/play_beauty_bg_m.png);
        height: 73.23vw;
    }


    .play_beauty_text {
        font-size: 1.15em;
    }

    .play_beauty_gates {
        width: 100%;
        margin: 1em auto 0;
        justify-items: center;
    }

    .transfer_gate {
        width: 120%;
        height: 12.188em;
    }

    .transfer_gate_text {
        font-size: 1em;
        margin-top: 9.8em;
    }


    .buy_beauty {
        background-image: url(../images/buy_beauty_bg_m1.png), url(../images/buy_beauty_bg_m2.png);
        background-repeat: no-repeat, no-repeat !important;
        background-position: center top, center bottom !important;
        background-size: 100vw, 100vw !important;
        height: 355.75vw;
    }

    .buy_part1 {
        top: 19em;
        width: 24.5em;
        left: 5.8em;
        text-align: left;
    }

    .buy_part1_text1 {
        font-size: 1.15em;
        height: 8.4em;
        line-height: 1.6em;
    }

    .buy_part1_text2 {
        font-size: .9em;
    }

    .buy_part1_text3 {
        font-size: 1.15em;
        margin-top: 6.6em;
        height: 6.7em;
        line-height: 1.6em;
        text-align: center;
    }

    .buy_part1_text4 {
        text-align: center;
    }

    .buy_part1_btn {
        top: 34.3em;
        left: 7.4em;
        width: 24vw;
        height: 10vw;
    }


    .buy_part2 {
        top: 67.5em;
        width: 27em;
        left: 4.2em;
    }

    .buy_part2_text1 {
        font-size: 1.15em;
        height: 11em;
    }

    .buy_part2_text2 {
        font-size: 0.8em;
    }

    .buy_part2_btn {
        top: 15em;
        left: 9.4em;
        width: 24vw;
        height: 10vw;
    }


    .buy_part3 {
        top: 100.5em;
        width: 26.6em;
        left: 4.9em;
    }

    .buy_part3_products {
        width: 100%;
        height: 20.2em;
    }

    .buy_part3_btn {
        top: 21.6em;
        left: 8.8em;
        width: 24vw;
        height: 10vw;
    }

    .buy_part3_product {
        width: 12em;
        height: 18.275em;
    }


    .buy_part3_product_t {
        margin: 13em auto 0;
    }

    .buy_part3_product_t_n {
        font-size: 1em;
        height: 2.2em;
        line-height: 1.2em;
    }

    .buy_part3_product_t_p {
        font-size: 1.15em;
    }

    .exchange_beauty {
        height: 371.8vw;
        background-image: url(../images/exchange_beauty_bg_m1.png), url(../images/exchange_beauty_bg_m2.png);
        background-repeat: no-repeat, no-repeat !important;
        background-position: center top, center bottom !important;
        background-size: 100vw, 100vw !important;
    }


    .exchange_0 {
        top: 18.1em;
        left: 7.5em;
    }

    .exchange_0_icon {
        width: 20.625em;
        height: 5.238em;
    }

    .exchange_hot {
        top: 44.9em;
        left: 7.5em;
    }

    .exchange_hot_icon {
        width: 20.625em;
        height: 5.238em;
    }

    .exchange_surprise1 {
        top: 101.1em;
        font-size: 1em;
        width: 21.9em;
        left: 7.1em;
    }

    .exchange_surprise1 div {
        height: 6.5vw;
    }

    .exchange_surprise1 div span {
        line-height: 1.4em;
        display: block;
        font-size: .93em;
    }

    .exchange_surprise1_notice {
        position: absolute;
        font-family: "Noto Sans TC", sans-serif;
        top: 339.5vw;
        text-align: left;
        font-size: 0.8em;
        line-height: 1.5em;
        width: 31.5em;
        left: 20vw;
        color: #5b4423;
    }

    .exchange_surprise2 {
        top: 95.2em;
        font-size: 1.3em;
        width: 21.9em;
        left: 2.7em;
    }

    .exchange_beauty_btn1 {
        top: 62.7em;
        left: 13.7em;
        width: 24vw;
        height: 10vw;
    }

    .exchange_beauty_btn2 {
        top: 117.8em;
        left: 6.5em;
        width: 29vw;
        height: 10vw;
    }

    .exchange_beauty_btn3 {
        top: 117.8em;
        left: 17.1em;
        width: 29vw;
        height: 10vw;
    }


    .events {
        background-image: url(../images/events_bg_m.png);
    }

    .events_banners {
        width: 96vw;
        column-gap: 2vw;
        grid-row-gap: 2vw;
        margin: 0 auto;
    }

    .events_title {
        margin: 1em auto 1em;
    }


    .events_banner {
        min-height: 26vw;
    }

    .bank_title {
        font-size: 2.2em;
        margin: 1.5em auto 1em;
    }

    .bank_banners {
        width: 96vw;
        column-gap: 2vw;
        grid-row-gap: 2vw;
        margin: 0 auto;
        grid-template-columns: 1fr;
    }

    .bank_banner {
        height: 40.8vw;
    }

    .notice_bd {
        width: 96%;
        padding: 0.8em 0 0.8em 0;
        font-size: 1em;
        line-height: 1.3em;
    }

    .notice_close {
        width: 1em;
        font-size: 2.5em;
        margin-left: 92%;
        height: 8vw;
        line-height: 6vw;
    }

    .notice_ct {
        width: 96%;
        font-size: .95em;
    }

    li {
        margin-bottom: 1vw;
    }

    .notice_title {
        font-size: 2em;
        line-height: 1.2em;
        margin-bottom: 2vw;
    }

    #goHappy ol li {
        margin-bottom: 1vw;
    }
}