/* === === === === === === === === === === === === === === === === === === Index.css === === === */
/* === === === Navigation Icons === === === */
/* === === ===
Icons > https://fonts.google.com/?icon.platform=web
=== === === */

.NAVIGATION .material-symbols-outlined {
    font-weight: 200;
    font-size: 27px;
}

.NAVIGATION ul li.LOGO a,
.NAVIGATION ul li.ICON a {
    height: 53px;
}

.NAVIGATION ul li.LOGO a {
    font-size: 39px;
}
.NAVIGATION ul li.ICON a {
    padding-top: 7.5px;
}

/* === === === Header Cover Style === === === */
.HEADER > div {
    width: 100vw;
    height: 100vh;

    /*
    width: 100vw;
    height: calc(100vh - 105px);
    background-image: url(https://is.gd/p7GL5H);
    */

    padding-left: 21px;
    padding-right: 21px;

    text-align: center;
}

.HEADER .HEIGHT-7,
.HEADER .HEIGHT-3 {
    width: 100%;
}

.HEADER .HEIGHT-7 {
    height: calc(100vh - 275px - 21px);
}

.HEADER .HEIGHT-3 {
    height: auto;
}

.HEADER .HEIGHT-3 > div {
    height: 275px;

    text-align: left;
}

/*
.HEADER > div > div.HEIGHT-7 {
    height: 70vh;

    background-image: url(https://is.gd/p7GL5H);
}

.HEADER > div > div.HEIGHT-3 {
    height: auto;
}
.HEADER > div > div.HEIGHT-3 > div {
    height: 30vh;

    text-align: left;
}
*/

.HEADER .HEIGHT-3 p,
.HEADER .HEIGHT-3 h3 {
    margin: 0;
}

.HEADER .HEIGHT-3 p {
    display: inline-block;

    font-size: 18px;
    padding-bottom: 6px;
}
.HEADER .HEIGHT-3 h3 {
    font-size: 27px;
}

.HEADER .HEIGHT-3 a {
    width: 150px;
    height: auto;

    padding: 9px;
    border-radius: 36px;

    text-align: center;
}
.HEADER .HEIGHT-3 a:hover {
    width: 225px;
}

.HEADER .HEIGHT-3 a button {
    clear: both;
}

.HEADER .HEIGHT-3 a middle {
    height: 45px;
    font-size: 18px;
}
.HEADER .HEIGHT-3 a middle span {
    font-size: 27px;
}

/*
.HEADER > div > div.HEIGHT-3 a::before {
    content: "\e0b0";
    padding-right: 6px;
    font-family: 'Material Symbols Outlined';
}
.HEADER > div > div.HEIGHT-3 a::after {
    content: "訂購";
}
*/

.HEADER .CONVERT-ON-MOBILE {
    display: none;
}

.HEIGHT-3 .EXTRA {
    padding-right: 21px;
}

.HEIGHT-3.BG-COVER .EXTRA,
.HEIGHT-3.BG-COVER .EXTRA-IMG {
    padding-left: 21px;
}

.HEIGHT-3 .EXTRA > div {
    width: 233px;
    height: 233px;

    border-top-left-radius: 233px;
    border-top-right-radius: 233px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 233px;
}

.HEIGHT-3.BG-COVER .EXTRA > div {
    border-bottom-left-radius: 233px;
}

.HEIGHT-3 .EXTRA > div:hover {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    animation-name: rubberBand;
    animation-duration: 1.5s;
}

.BEFORE-IMG abort {
    display: none;
}

/* === === === === === === === === === Touch Style === === === */
.ANIMATE-LEFT-MIN {
    right: 0;

    width: 360px;

    animation-name: fadeInRight;
    animation-duration: 1.5s;
    -webkit-animation-name: fadeInRight;
    -webkit-animation-duration: 1.5s;
}

.ANIMATE-LEFT-MIN .BG-WHITE h4 {
    margin: 0;
    font-size: 39px;
    font-weight: 600;
}

.BTN-FIXED,
.ANIMATE-LEFT-MIN .NAVIGATION ul {
    left: calc(100vw - 360px);
    right: 0;

    width: 360px;
}

.ANIMATE-LEFT-MIN .NAVIGATION ul li.LOGO,
.ANIMATE-LEFT-MIN .NAVIGATION ul li.LOGO a {
    width: 200px;
}

.ANIMATE-LEFT-MIN .NAVIGATION ul li.ICON {
    width: calc(360px - 200px - 24px);
}
.ANIMATE-LEFT-MIN .NAVIGATION ul li.LOGO a {
    display: inline-block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ANIMATE-LEFT-MIN .NAVIGATION ul li.LOGO a::after {
    content: "...";
}

.ANIMATE-LEFT-MIN .HEIGHT-RWD {
    height: 95px;
}

.ANIMATE-LEFT-MIN .HEIGHT-FIXED,
.ANIMATE-LEFT-MIN .HEIGHT-FIXED-SCROLL {
    clear: both;

    height: calc(100vh - 95px);         
    display: table-cell;
    vertical-align: middle;
}

.ANIMATE-LEFT-MIN .HEIGHT-FIXED-SCROLL {
    padding-bottom: 12px;
}

.ANIMATE-LEFT-MIN .HREF-ICON a,
.ANIMATE-LEFT-MIN .HREF-ICON span,
.ANIMATE-LEFT-MIN .HREF-LINK a,
.ANIMATE-LEFT-MIN .HREF-LINK span {
    display: block;
}

.ANIMATE-LEFT-MIN .HREF-ICON > a,
.ANIMATE-LEFT-MIN .HREF-LINK > a {
    width: calc(360px - 24px);

    padding: 12px 0 6px 0;
    text-align: left;
}
.ANIMATE-LEFT-MIN .HREF-ICON > a {
    font-size: 21px;
    width: calc(360px - 24px);
}
.ANIMATE-LEFT-MIN .HREF-LINK > a {
    font-size: 18px;
    width: calc(360px - 24px - 3px);
}

.ANIMATE-LEFT-MIN .HREF-ICON span,
.ANIMATE-LEFT-MIN .HREF-LINK span {
    font-size: 15px;
}
.ANIMATE-LEFT-MIN .HREF-ICON span {
    padding-top: 18px;
}
.ANIMATE-LEFT-MIN .HREF-LINK span {
    padding-top: 6px;
}

.ANIMATE-LEFT-MIN inline {
    display: inline-block;
}

.ANIMATE-LEFT-MIN inline icon,
.ANIMATE-LEFT-MIN inline middle {
    height: 42px;

    display: table-cell;
    vertical-align: middle;
}

.ANIMATE-LEFT-MIN inline middle {
    padding-left: 9px;
}
.ANIMATE-LEFT-MIN inline icon {
    width: 42px;

    border-radius: 50%;

    text-align: center;
}

.BTN-FIXED {
    bottom: 18px;
    position: fixed;

    text-align: center;
}

/* === === === === === === === === === Scroll Style === === === */
.ANIMATE-LEFT-MIN .SCROLL-X {
    height: calc(100vh - 95px - 12px);
    padding: 0 12px;
}

.SCROLL-X::-webkit-scrollbar {
    width: 3px; !important
}
.SCROLL-X::-webkit-scrollbar-thumb,
.SCROLL-X::-webkit-scrollbar-track {
    border-radius: 0; 12px;
}

/* === === === === === === === === === On And Off Effects Style === === === */
.quiz solid {
    display: block;
    width: calc(360px - 24px - 3px);
}

.quiz .answer {
    display: none;
}

.quiz:hover after::before,
.ANIMATE-LEFT-MIN .HREF-LINK > a:hover::before {
    content: "\f068";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";

    display: inline-block;
    padding-right: 6px;

    animation-name: fadeInLeft;
    animation-duration: 1.5s;
    -webkit-animation-name: fadeInLeft;
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
}

.quiz after,
.quiz bold {
    font-size: 18px;
}
.quiz after::after {
    display: block;
    font-size: 15px;

    padding-top: 6px;
}
.quiz bold {
    font-weight: 600;
}

.quiz .AT-HOTEL > after::after {
    content: "ENJOY MASSAGE AT HOTEL";
}
.quiz .AT-HOMES > after::after {
    content: "ENJOY MASSAGE AT HOME";
}

.quiz .STEPS-01 > after::after {
    content: "RESERVATION STEPS 01";
}
.quiz .STEPS-02 > after::after {
    content: "RESERVATION STEPS 02";
}
.quiz .STEPS-03 > after::after {
    content: "RESERVATION STEPS 03";
}



@media screen and (max-width: 767px) {
    .HEADER .HEIGHT-7 {
        height: calc(100vh - 225px - 21px);
    }
    .HEADER .HEIGHT-3 > div {
        height: 225px;
    }

    .HEIGHT-3 .EXTRA {
        display: none;
    }



    .BEFORE-IMG abort,
    .BEFORE-IMG middle {
        height: 78px;
    }
    .BEFORE-IMG abort {
        display: table-cell;
        vertical-align: middle;
    }
    .BEFORE-IMG middle {
        padding-left: 12px;
    }

    .BEFORE-IMG content {
        border-radius: 50%;

        display: block;

        width: 63px;
        height: 63px;
    }
}

@media screen and (max-width: 500px) {
    body.FOR-HIDDEN {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .navigation ul li.LOGO {
        padding-left: 0;
    }
    .navigation ul li.ICON {
        padding-right: 0;
    }
    .navigation ul li.MORE {
        padding-left: 0;
        padding-right: 0;
    }

    .navigation ul li.LOGO a {
        font-size: 27px;
    }

    .navigation ul li.MORE a {
        width: calc(100vw - 24px);
    }



    .HEADER > div {
        padding-left: 12px;
        padding-right: 12px;

        /*
        padding-left: 0;
        padding-right: 0;
        */
    }



    /* === Header Background Style 01 === */
    .HEADER .HEADER-BG-MARGIN {
        margin-top: 119px;
        height: calc(100vh - 119px);
    }

    /* === Header Background Style 02 === */
    .HEADER .HEADER-BG-PADDING {
        padding-top: 119px;
    }
    .HEADER .HEADER-BG-PADDING > div {
        height: calc(100vh - 119px);
    }



    .HEADER
    .HEIGHT-3.BG-COVER,
    .HEIGHT-3.BG-COVER .EXTRA,
    .HEIGHT-3.BG-COVER .EXTRA-IMG {
        padding-left: 0;
    }

    .HEADER .HEIGHT-3,
    .HEADER .HEIGHT-3 > div {
        text-align: center;
    }

    .HEADER .HEIGHT-3.BG-COVER a {
        display: inline-block;
    }

    .HEADER .CONVERT-ON-MOBILE,
    .HEADER img.CONVERT-ON-MOBILE {
        display: block;

        z-index: 1;
        position: relative;
    }

    .HEADER img.CONVERT-ON-MOBILE {
        width: 100%;
        height: auto;

        padding: 0 12px;

        top: 105px;
        left: 0;
        right: 0;

        position: relative; absolute;
    }

    .BEFORE-IMG {
        text-align: center;
    }
    .BEFORE-IMG middle {
        display: block;

        height: auto;
        padding-left: 0;

        width: calc(100vw - 24px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .BEFORE-IMG abort {
        display: none;
    }



    .ANIMATE-LEFT-MIN,
    .BTN-FIXED,
    .ANIMATE-LEFT-MIN .NAVIGATION ul {
        width: 100%;
    }

    .BTN-FIXED,
    .ANIMATE-LEFT-MIN .NAVIGATION ul {
        left: 0;
        right: 0;
    }

    .ANIMATE-LEFT-MIN .NAVIGATION ul li.LOGO {
        width: 200px;
    }
    .ANIMATE-LEFT-MIN .NAVIGATION ul li.ICON {
        width: calc(100vw - 200px - 24px);
    }
    .ANIMATE-LEFT-MIN .HEIGHT-RWD {
        height: 95px;
    }
    .ANIMATE-LEFT-MIN .HEIGHT-FIXED {
        height: calc(100vh - 95px);
    }

    .ANIMATE-LEFT-MIN .HREF-ICON > a {
        width: calc(100vw - 24px);
    }
    .ANIMATE-LEFT-MIN .HREF-LINK > a,
    .quiz solid {
        width: calc(100vw - 24px - 3px);
    }
}

@media screen and (max-width: 450px) {
    /* === === === === === === === === === Navigation Style === === === */
    .NAVIGATION ul li.LOGO {
        padding-left: 0;
    }
    .NAVIGATION ul li.ICON {
        padding-right: 0;
    }
    .NAVIGATION ul li.MORE,
    .NAVIGATION ul li.MORE a {
        width: calc(100vw - 24px);
    }
    .NAVIGATION ul li.MORE {
        padding-left: 0;
        padding-right: 0;
    }



    .HEADER .HEIGHT-3 h1 {
        width: calc(100vw - 24px);

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        font-size: 24px;
    }

    .HEADER .HEIGHT-3 a,
    .HEADER .HEIGHT-3 a:hover {
        width: calc(100vw - 24px);
    }

    .HEADER img.CONVERT-ON-MOBILE {
        padding: 0 0;
    }
    .HEADER .CONVERT-ON-MOBILE.HEADER-BG-PADDING {
        padding-top: 119px;

        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .BEFORE-IMG middle {
        padding-left: 6px;
        padding-right: 6px;
    }
}






.HEADER.INVERT-LOOK .HEIGHT-3 {
    padding-top: 119px;
}



/*
=== === === Old Style === === ===
.HEADER.INVERT-LOOK .HEIGHT-3 > div {
    height: 275px;
}
*/

/* === === === New Style === === === */
.HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
    background-attachment: inherit;
}



.HEADER.INVERT-LOOK .HEIGHT-3 > div,
.HEADER.INVERT-LOOK .HEIGHT-7 {
    height:
        calc(
        calc(100vh - 119px - 21px) / 2);
}

.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA > div {
    border-bottom-left-radius:
        calc(
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);
}

.HEADER.INVERT-LOOK .HEIGHT-3 .EXTRA > div {
    width:
        calc(
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);
    height:
        calc(
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);

    border-top-left-radius:
        calc(
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);
    border-top-right-radius:
        calc(
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);

    border-bottom-left-radius: 0;

    border-bottom-right-radius:
        calc(
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);
}

.HEADER.INVERT-LOOK .HEIGHT-3 .EXTRA > div:hover {
    border-top-left-radius:
        calc(
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);
    border-top-right-radius:
        calc(
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);
    border-bottom-left-radius:
        calc(
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);
    border-bottom-right-radius:
        calc(
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);
}

.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
    width:
        calc(100vw -
        calc(
        calc(100vh - 119px - 21px) / 2)
        - 42px);

    padding-right: 21px;
}

.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER h1 {
    padding-right: 21px;
}
/* === End === === === New Style === === === */



@media screen and (max-width: 767px) {
    /*
    === === === Old Style === === ===
    .HEADER.INVERT-LOOK .HEIGHT-3 > div {
        height: 225px;
    }
    .HEADER.INVERT-LOOK .HEIGHT-7 {
        height: calc(100vh - 225px - 21px - 119px);
    }
    */

    /* === === === New Style === === === */
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        width: calc(100vw - 42px);
    }
    /* === End === === === New Style === === === */
}

@media screen and (max-width: 500px) {
    .NAVIGATION ul {
        z-index: 2;
    }

    .CLICK, .CLICK-FIXED {
        z-index: 3;
    }

    .HEADER.INVERT-LOOK .HEIGHT-3 {
        padding-top: 0;

        bottom: 0;
        z-index: 0;
        position: fixed;
    }

    .HEADER.INVERT-LOOK .HEIGHT-3 > div {
        height: 225px;
    }



    /* === === === New Style === === === */
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER {
        width: calc(100vw - 24px);
        padding-bottom: 12px;
    }
    .HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
        background-attachment: fixed;

        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }



    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        width: calc(100vw - 24px);
        padding-right: 0;
    }
    .HEADER.INVERT-LOOK .HEIGHT-7 {
        height: calc(100vh - 225px);
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER h1 {
        padding-right: 0;
    }
    /* === End === === === New Style === === === */



    .HEADER.INVERT-LOOK .HEADER-BG-PADDING > div {
        height: calc(100vh - 119px - 12px);
        z-index: 1;
        position: relative;
    }
}

@media screen and (max-width: 450px) {
    .HEADER.INVERT-LOOK .HEADER-BG-PADDING > div {
        height: calc(100vh - 119px);
    }

    .HEADER.INVERT-LOOK .HEIGHT-3 a,
    .HEADER.INVERT-LOOK .HEIGHT-3 a:hover {
        max-width: 80%;
    }
}






/* === === === === === === === === === === === === === === === === === === Add.css === === === */
.CODE-01-20231029 {
    position: static;
    padding: 0 12px 0 0;
}

.CODE-02-20231029 {
    padding-right: 12px;
}

.SCROLL-X.TRANSFORM-DOWN .CODE-03-20231029 {
    background-color: black;
}

.CODE-04-20231029 {
    background-color: #222;
}



GUCCI.CODE-05-20231029 {
    padding-bottom: 79px;
}

/* === https://bennettfeely.com/clippy/ === === === */
GUCCI.CODE-05-20231029 img {
    clip-path: polygon(100% 100%, 100% 0, 0 50%);
}



.BG-FIXED.CODE-06-20231029 {
    background-image: url(../../index/official.webp);
}

.TRANSFORM-MAX-WIDTH.CODE-07-20231029 {
    color: white;
    background-color: rgba(0, 0, 0, .5); 
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div h3.ADD-PADDING-BOTTOM.CODE-08-20231029 {
    padding-bottom: 0;
}

CLEAR.CODE-09-20231029 {
    width: 100%;
    max-width: 767px;
    text-align: left;
}

img.CODE-10-20231029 {
    border-bottom-left-radius: 6px;
}
img.CODE-11-20231029 {
    border-bottom-right-radius: 6px;
}

footer.CODE-12-20231029 {

    /* === === ===
    bottom: 0;
    z-index: 1;
    position: fixed;
    padding-top: 584px;
    === === === */

    color: white;
    background-color: black;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div h4.ENLARGE-STYLE.CODE-13-20231029 {
    font-size: 36px;
}






background-222 {
    margin-top: -1px;
}

background-222 p.narrate {
    font-size: 18px;
}
background-222 p.narrate span {
    font-size: 21px;

    padding-left: 6px;  
    padding-right: 6px;
}

background-222 p {
    font-size: 15px;
}






.CODE-20231031 div {
    clear: both;
} 

.CODE-20231031 .CIRCLE-STYLE {
    width: 54px;

    height: 54px;
    display: table-cell;
    vertical-align: middle;

    border-radius: 72px;

    color: #5b5b5b;
    background-color: transparent;

    font-size: 36px;
    text-align: center;

    box-shadow: 3px 6px 12px rgba(0, 0, 0, .5);
}

.CODE-20231031 h3 {
    font-size: 27px;
}

.CODE-20231031 h4,
.ANIMATE-LEFT-MIN .BG-WHITE .CODE-20231031 h4 {
    height: 54px;
    display: table-cell;
    vertical-align: middle;

    font-size: 21px;
}

.CODE-20231031 h4 white,
.ANIMATE-LEFT-MIN .BG-WHITE .CODE-20231031 h4 white {
    display: block;
    padding-left: 12px;

    width: 100%;
    max-width: calc(360px - 54px - 24px - 3px);

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.CODE-20231031 p {
    font-size: 18px;
}
.CODE-20231031 p.span {
    font-size: 15px;
}

.CODE-20231031 a {
    display: block;

    width: 100%;

    padding: 9px 24px;
    border-radius: 3px;

    font-size: 18px;
    font-weight: 600;
    text-align: center;

    border: 2px solid #ffbfc6;
    background-color: #ffbfc6;
}
.CODE-20231031 a:hover {
    color: white;
    border: 2px solid #333;
    background-color: #333;
}

.CODE-20231031 strong.HIDDEN-STYLE {
    display: none;
}



.CODE-20231101 {
    text-align: center;
}
.CODE-20231101 img {
    width: 100%;
    max-width: 165px;
    border-radius: 165px;
}



.CODE-12-20231029 marquee {
    width: 100%;
    max-width: 256px; 336px;

    display: block;
    padding: 0 12px;
}



.ANIMATE-LEFT-MIN .HREF-ICON > a {
    width: calc(360px - 24px - 3px);
}

#LINE .bootstrap .middle a.color2,
#WECHAT .bootstrap .middle a.color2 {
    color: #333;
    font-size: 21px;
}

@media screen and (max-width: 500px) {
    .CODE-20231031 h4 white,
    .ANIMATE-LEFT-MIN .BG-WHITE .CODE-20231031 h4 white {
        width: calc(100vw - 54px - 24px - 3px);
    }

    .ANIMATE-LEFT-MIN .HREF-ICON > a {
        width: calc(100vw - 24px - 3px);
    }
}

@media screen and (max-width: 360px) {
    background-222 h3,
    background-638dff h3 {
        font-size: 21px;
    }

    background-222 p.narrate {
        font-size: 15px;
    }
    background-222 p.narrate span {
        font-size: 18px;
    }

    background-222 p {
        font-size: 13.5px;
    }

    background-222 a,
    background-638dff a {
        padding: 6px 21px;
    }



    .CODE-20231031 h4,
    .ANIMATE-LEFT-MIN .BG-WHITE .CODE-20231031 h4 {
        font-size: 18px;
    }

    .CODE-20231031 p {
        font-size: 15px;
    }
    .CODE-20231031 p.span {
        font-size: 13.5px;
    }



    .CODE-12-20231029 marquee {
        max-width: 256px; calc(100% - 24px);
    }



    .ANIMATE-LEFT-MIN .HREF-ICON > a {
        font-size: 18px;
    }
}






/* === === === === === === === === === === === === === === === === === === Height.css === === === */
.HEIGHT-7.ADD-STYLE {
    padding: 12px;
    text-align: right;
}

.HEIGHT-7.ADD-STYLE > div {
    width: calc(100vw - calc(21px * 2) - calc(12px * 2) - calc(3px * 2));
    height: calc(calc(100vh - 119px - 21px) / 2 - 3px - 24px);

    color: white;
    background-color: transparent;

    text-align: right;
    text-shadow: 3px 6px 12px rgba(0, 0, 0, .75);
}

.HEIGHT-7.ADD-STYLE > div p {
    margin: 0;
    display: inline-block;

    border-bottom: 3px solid rgba(255, 255, 255, .75);
    padding-bottom: 6px;
    
    font-size: 18px;
}



.HEIGHT-7.ADD-STYLE > div h1 {

}

.HEIGHT-7.ADD-STYLE > div a {

}
.HEIGHT-7.ADD-STYLE > div a:hover {

}

@media screen and (max-width: 500px) {
    .HEIGHT-7.ADD-STYLE > div {
        display: none;
    }
}






/* === === === === === === === === === === === === === === === === === === Color.css：01 === === === */
/* === === === Header Cover Style === === === */
.HEADER .HEIGHT-3.BG-COVER p,
.HEADER .HEIGHT-3.BG-COVER h1 {
    color: white;
}

.HEADER .HEIGHT-3 p {
    color: #333;
    border-bottom: 3px solid #ccc;
}

.HEADER .HEIGHT-3 h3 {
    color: black;
}

.HEADER .HEIGHT-3 a {
    color: white;
    background-color: black;

    border: 3px solid transparent;
}
.HEADER .HEIGHT-3 a:hover {
    color: black;
    background-color: transparent;

    border: 3px solid black;
}

.HEADER .HEIGHT-3.BG-COVER a {
    color: black;
    background-color: white;

    border: 3px solid white;
}
.HEADER .HEIGHT-3.BG-COVER a:hover {
    color: white;
    background-color: black;

    border: 3px solid white;
}



/* === === === === === === === === === Touch Style === === === */
.ANIMATE-LEFT-MIN {
    box-shadow: 1px 3px 12px rgba(0, 0, 0, .5);
}

.ANIMATE-LEFT-MIN .HREF-ICON > a,
.ANIMATE-LEFT-MIN .HREF-LINK > a {
    color: #666;
    border-bottom: 1px solid #ccc;
}

.ANIMATE-LEFT-MIN inline icon {
    color: white;
    background-color: #666;
}

/* === === === 軌道 === === === */
.SCROLL-X::-webkit-scrollbar-track {
    background-color: #ccc;
}

/* === === === 滑塊 === === === */
.SCROLL-X::-webkit-scrollbar-thumb {
    background-color: #666;
}

.quiz solid {
    border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 500px) {
    .HEADER .HEIGHT-3.BG-COVER {
        background-color: white;
        background-image: none;
    }

    .HEADER .HEIGHT-3.BG-COVER p,
    .HEADER .HEIGHT-3.BG-COVER h1 {
        color: black;
    }

    .HEADER .HEIGHT-3.BG-COVER a {
        color: white;
        background-color: black;

        border: 3px solid transparent;
    }
    .HEADER .HEIGHT-3.BG-COVER a:hover {
        color: black;
        background-color: transparent;

        border: 3px solid black;
    }

    .HEADER .CONVERT-ON-MOBILE,
    .HEADER img.CONVERT-ON-MOBILE {
        background-color: white;
    }
}



/* === === === New Style === === === */
.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER p,
.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER h1 {
    color: black;
}

.HEADER.INVERT-LOOK .HEIGHT-3 p {
    border-bottom: 3px solid #333;
}

.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER a {
    color: white;
    background-color: rgba(0, 0, 0, .85);

    border: 3px solid rgba(0, 0, 0, .15);
}

@media screen and (max-width: 500px) {
    /* === === === New Style === === === */
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER {
        background-color: white;
    }
}






/* === === === === === === === === === === === === === === === === === === Color.css：02 === === === */
.HEIGHT-3.BG-COVER .EXTRA {
    background-color: #bc8f8f;
}

@media screen and (max-width: 767px) {
    .BEFORE-IMG content {
        border: 3px solid #bc8f8f;
    }
}

/* === === === New Style === === === */
.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
    border: 3px solid #bc8f8f;
}
.HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
    border-left: 3px solid #bc8f8f;
    border-right: 3px solid #bc8f8f;
    border-bottom: 3px solid #bc8f8f;
}

@media screen and (max-width: 500px) {
    .HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED,
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        border: 0;
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        background-color: pink;
    }
}