/* === === === === === === === === === === === === === === === === === === Add.css === === === */
audio.MARGIN-BLOCK {
    width: 100%;
    max-width: 324px;

    margin-top: 21px;
    margin-bottom: 12px;
}

audio.DISPLAY-BLOCK {
    width: 100%;

    display: block;
}
audio.DISPLAY-NONE {
    display: none;
}



.CONVERT-ON-MOBILE.HEADER-BG-PADDING {
    text-align: center;
}
.CONVERT-ON-MOBILE.HEADER-BG-PADDING div {
    padding-top: 238px; 75vh;
}

.CONVERT-ON-MOBILE.HEADER-BG-PADDING a#Script::before {
    right: 12px;
    bottom: 36px;

    position: absolute;

    content: "\eb95";
    font-family: "Material Symbols Outlined";

    /*
    content: "\f078";

    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    */

    color: white;
    font-size: 42px;

    text-shadow: 1px 3px 6px rgba(0, 0, 0, .5);

    display: inline-block;

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

    animation-iteration-count: infinite;
}



/* === === === 新添加代碼 === 反轉區塊 === === === */
.HEADER.INVERT-LOOK.REVERSAL > div.PADDING-TOP {
    padding-top: 119px;
}

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

}

.HEADER.INVERT-LOOK.REVERSAL .HEIGHT-7.BG-FIXED {
    border-top: 3px solid #bc8f8f;
    border-bottom: 0;

    border-left: 3px solid #bc8f8f;
    border-right: 3px solid #bc8f8f;
}

.ANIMATE-LEFT-MIN iframe {
    width: 100%;
    height: 575px;

    border: 1px solid #ccc;
}

@media screen and (max-width: 500px) {
    .HEADER.INVERT-LOOK.REVERSAL > div.PADDING-TOP {
        padding-top: 0;
    }

    .HEADER.INVERT-LOOK.REVERSAL .HEIGHT-7.BG-FIXED {
        border-top: 0;
        border-bottom: 0;

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



/* === === === Add Style === === === */
.HEADER .HEIGHT-3 a#Return {
    width: 0;
    height: 0;

    padding: 0;

    border: 0;                       
    border-radius: 0;

    background-color: transparent;
}

.quiz solid span {
    padding-left: 6px;
    padding-right: 6px;

    font-size: 135%;
}

.quiz solid .small {
    font-size: 75%;
}

.quiz .AT-HOTEL-01 > after::after {
    /* === 預約 備註事項 01 === */
    content: "NOTES ON BOOKING 01";
}
.quiz .AT-HOTEL-02 > after::after {
    /* === 預約 備註事項 02 === */
    content: "NOTES ON BOOKING 02";
}

.quiz .AND-CHARGE > after::after {
    /* === 收費，服務與時間？=== */
    content: "SERVICE AND CHARGE";
}

.quiz .TO-PAY > after::after {
    /* === 如何支付費用？=== */
    content: "HOW TO PAY THE FEE";
}
.quiz .TO-ADD > after::after {
    /* === 會有額外費用？=== */
    content: "ADDITIONAL CHARGES";
}

.quiz .AND-AREA > after::after {
    /* === 提供服務的區域？=== */
    content: "SERVICE AREA";
}
.quiz .HOW-LONG > after::after {
    /* === 預約後，按摩師多久抵達？=== */
    content: "HOW LONG TO ARRIVE";
}

.quiz .ANNOUNCEMENT > after::after {
    /* === 看照選？打槍？臨時取消？=== */
    content: "ANNOUNCEMENT";
}

.quiz .CONTACT-US > after::after {
    /* === 預約服務 === */
    content: "CONTACT US";
}



.HREF-LINK a > i,
.HREF-LINK a > middle {
    height: 33px;
    display: table-cell;
    vertical-align: middle;
}

.HREF-LINK a > i {
    width: 33px;
    border-radius: 50%;

    color: white;
    background-color: #777;

    font-size: 15px;
    text-align: center;
}

.HREF-LINK a > middle {
    padding-left: 9px;
}

.HREF-LINK > p {
    color: #666;
    font-size: 18px;
}

.NAVIGATION ul li.ICON a.ELIMINATE {
    padding-top: 0;
}

.ANIMATE-LEFT-MIN .HREF-LINK > a.halt {
    border-bottom: 1px solid transparent;
}
.ANIMATE-LEFT-MIN .HREF-LINK > a.halt.solid {
    border-bottom: 1px solid #ccc;
}

.ANIMATE-LEFT-MIN .HREF-LINK > a.halt:hover::before {
    display: none;
}

.ANIMATE-LEFT-MIN p.small {
    color: #666;
    font-size: 75%;
}

.ANIMATE-LEFT-MIN a.button {
    display: block;

    width: 100%;
    height: auto;

    padding: 6px;
    border-radius: 3px; 36px;

    color: white;
    background-color: rgba(0, 0, 0, .85);
    border: 3px solid rgba(0, 0, 0, .15);

    text-align: center;
}

.ANIMATE-LEFT-MIN a.button:hover {
    color: white;
    background-color: #666;
    border: 3px solid #666;
}

@media screen and (max-width: 500px) {
    .CONVERT-ON-MOBILE.HEADER-BG-PADDING div {
        padding-top: 0;
    }

    .CONVERT-ON-MOBILE.HEADER-BG-PADDING div > div {
        top: 12px;
        left: 12px;
        position: absolute;

        color: white;

        text-shadow: 1px 3px 6px rgba(0, 0, 0, .5);
        text-align: left;
    }

    .CONVERT-ON-MOBILE.HEADER-BG-PADDING content {
        content: url(background/border.jpg);

        border: 3px solid #bc8f8f;
        border-radius: 50%;

        display: block;

        width: 63px;
        height: 63px;
    }

    .HEADER.INVERT-LOOK a#Return::before {
        right: 12px;
        bottom: 36px;
        position: absolute;
        content: "\e69c";
        font-family: "Material Symbols Outlined";
        color: black;
        font-size: 42px;
        text-shadow: 1px 3px 6px transparent; rgba(0, 0, 0, .5);
        display: inline-block;
        animation-name: fadeInDown;
        animation-duration: 1.5s;
        -webkit-animation-name: fadeInDown;
        -webkit-animation-duration: 1.5s;
        animation-iteration-count: infinite;
    }
}

@media screen and (max-width: 450px) {
    .HEADER.INVERT-LOOK .HEIGHT-3 a.AUTO-SIZE,
    .HEADER.INVERT-LOOK .HEIGHT-3 a.AUTO-SIZE:hover {
        max-width: 200px;
    }

    .HEADER.INVERT-LOOK a#Return::before {
        right: 0;

        /* === === ===
        width: 50px;

        right: 0;
        bottom: 0;

        color: white;
        background-color: black;

        animation-iteration-count: 1;
        === === === */
    }
}






/* === === === === === === === === === === === === === === === === === === Alone.css === === === */
.convert .bootstrap .col-xs-4 p {
    display: none;
}
.convert .bootstrap .col-xs-4 img {
    display: block;
}

.convert .bootstrap .col-xs-4:hover {
    animation-name: fadeIn;

    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}
.convert .bootstrap .col-xs-4:hover p {
    left: 0;
    right: 0;

    bottom: 0;

    z-index: 1;
    position: absolute;

    /*
    z-index: 1;
    position: relative;
    margin-top: -75px;
    */



    display: block;
    padding: 0 12px;

    color: white;

    font-size: 12px;
    text-align: center;
    text-shadow: 1px 3px 6px rgba(0, 0, 0, .5);
}

.convert .bootstrap .col-xs-4:hover img {
    filter: brightness(.35);
}

/* === === === === === === === === === *** *** *** === === === */

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div h5.FOOTER-CONSUMMATION-BIT.BOTTOM-ADD-STYLE {
    padding-bottom: 0;
}

.FOOTER-CONSUMMATION-BIT.BOTTOM-ADD-STYLE {
    max-width: 360px;
    text-transform: uppercase;
}

/* === === === === === === === === === *** *** *** === === === */

.POSITION-BACKGROUND > block h1,
.POSITION-BACKGROUND > block p {
    margin: 0;

    padding-right: 12px;

    width: calc(100vw - 36px - 360px);

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

.POSITION-BACKGROUND > block h1 {
    font-size: 13.5vw;
}
.POSITION-BACKGROUND > block p {
    font-size: 2.75vw;
    font-weight: 600;
}

@media screen and (max-width: 500px) {
    .POSITION-BACKGROUND > block {
        display: none;
    }
}

/* === === === === === === === === === *** *** *** === === === */

CLEAR, .CLEAR {
    clear: both;
    display: block;
}

CLEAR {
    /*
    top: 0;
    position: fixed;

    width: 100%;
    max-width: 767px; calc(100vw - 360px);
    */

    width: calc(360px - 24px - 3px);

    padding: 12px; 0;
    background-color: transparent; black;
}

.CLEAR {
    padding: 24px 0; 0; 24px;
}

.CLEAR.TOP-ZERO {
    padding-top: 0;
}
.CLEAR.BOTTOM-ZERO {
    padding-bottom: 0;
}

.CLEAR p {
    margin: 0;
}
.CLEAR p size {
    color: white;

    font-size: 21px;
    font-weight: 600;

    text-shadow: 3px 6px 9px rgba(0, 0, 0, .5);
}



DIALOGS {
    display: inline-block;

    padding: 9px;
    position: relative;

    color: black;
    background: white;

    border: 1px solid transparent;
    border-radius: 6px 6px 6px 6px; 6px; .4em;
}
DIALOGS:hover {
    animation-name: bounce;
    animation-duration: 2s;
    animation-fill-mode: both;
}



DIALOGS.DIRECTION-RIGHT,
DIALOGS.DIRECTION-LEFT {
    width: 100%;
    max-width: 245px;
}

DIALOGS.DIRECTION-RIGHT {
    width: calc(100% - 3px);
}

DIALOGS.DIRECTION-RIGHT {
    float: right;

    margin-right: -3px;
}
DIALOGS.DIRECTION-LEFT {
    float: left;
}



DIALOGS.DIRECTION-RIGHT::after,
DIALOGS.DIRECTION-LEFT::before {
    content: "";

    top: 50%;
    position: absolute;

    width: 0;
    height: 0;

    margin-top: -12px;
    border: 12px solid transparent;
}

DIALOGS.DIRECTION-RIGHT::after {
    right: 0;
    margin-right: -12px;

    border-right: 0;
    border-left-color: white;
}
DIALOGS.DIRECTION-LEFT::before {
    left: 0;
    margin-left: -12px;

    border-left: 0;
    border-right-color: white;
}



DIALOGS MIDDLE {
    height: 63px;
}

DIALOGS MIDDLE img {
    display: block;

    width: 63px;
    border-radius: 63px;
}

DIALOGS > p,
DIALOGS > p span {
    width: 100%;

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

DIALOGS > p {
    font-size: 15px;
    text-shadow: none;
}
DIALOGS > p span {
    display: block;
    padding-bottom: 9px;
}

DIALOGS > img {
    display: block;

    margin-top: 9px;

    border: 1px solid #ccc;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}



DIALOGS.DIRECTION-RIGHT MIDDLE p,
DIALOGS.DIRECTION-LEFT MIDDLE p {
    margin: 0;

    font-size: 15px;
    text-shadow: none;
}

DIALOGS.DIRECTION-RIGHT MIDDLE p {
    padding-left: 0; 12px;
    padding-right: 9px;

    text-align: left; right;
}
DIALOGS.DIRECTION-LEFT MIDDLE p {
    padding-left: 9px;
    padding-right: 0; 12px;

    text-align: left;
}

/* === === === === === === === === === *** *** *** === === === */

.BLACK-COLOURS DIALOGS {
    color: white;
    background: black; #e40f37; #2b6ee3;
}

.BLACK-COLOURS DIALOGS.DIRECTION-RIGHT::after {
    border-left-color: black; #e40f37; #2b6ee3;
}
.BLACK-COLOURS DIALOGS.DIRECTION-LEFT::before {
    border-right-color: black; #e40f37; #2b6ee3;
}

/* === === === === === === === === === *** *** *** === === === */

.OTHER-COLOURS DIALOGS {
    color: #333;
    background: #ffbfc6;
}

.OTHER-COLOURS DIALOGS.DIRECTION-RIGHT::after {
    border-left-color: #ffbfc6;
}
.OTHER-COLOURS DIALOGS.DIRECTION-LEFT::before {
    border-right-color: #ffbfc6;
}

/* === === === === === === === === === *** *** *** === === === */

.TWO-COLOURS DIALOGS.DIRECTION-RIGHT {
    color: white;
    background: #4d73ff; #4cc764;
}
.TWO-COLOURS DIALOGS.DIRECTION-RIGHT::after {
    border-left-color: #4d73ff; #4cc764;
}

.TWO-COLOURS DIALOGS.DIRECTION-LEFT {
    color: #333;
    background:  white;
}
.TWO-COLOURS DIALOGS.DIRECTION-LEFT::before {
    border-right-color: white;
}

@media screen and (max-width: 500px) {
    CLEAR {
        width: calc(100vw - 24px - 3px);
    }

    DIALOGS > p,
    DIALOGS.DIRECTION-RIGHT MIDDLE p,
    DIALOGS.DIRECTION-LEFT MIDDLE p {
        font-size: 13.5px;
    }
}

/* === === === === === === === === === *** *** *** === === === */

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div.HR-MARGIN-NONE hr {
    margin-top: 9px;
    margin-bottom: 9px;
}

.BG-WHITE.BG-COVER.BG-ADD {
    color: white;
    background-image: url(masseuse/15.gif);

    text-shadow: 3px 6px 9px rgba(0, 0, 0, .85);
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div.HR-MARGIN-NONE hr,
.BG-WHITE.BG-COVER.BG-ADD hr {
    border: 0;
    height: 1px;
    background: #ccc;
}

/* === === === === === === === === === *** *** *** === === === */

.NEW-HEADER-STYLE ul {
    background-color: black;
}

.NEW-HEADER-STYLE li.LOGO a,
.NEW-HEADER-STYLE li.ICON a {
    color: white;
}

.NEW-HEADER-STYLE .COLOR-WIDTH {
    background-color: #ff0073; #ff338f; #638dff; white;
}

/* === === === === === === === === ===
#ff0073

#0079ff
#00bfff

#ffbf00
#aaff00

#6a00ff
#4000ff
=== === === === === === === === === */

.NEW-HEADER-STYLE .COLOR-WIDTH,
.NEW-HEADER-STYLE .COLOR-WIDTH a {
    color: black;
}

.BG-WHITE.DARK-COLOR,
.ANIMATE-LEFT-MIN.DARK-COLOR .HREF-ICON > a,
.ANIMATE-LEFT-MIN.DARK-COLOR .HREF-LINK > a,
.ANIMATE-LEFT-MIN.DARK-COLOR p.small,
.ANIMATE-LEFT-MIN.DARK-COLOR .HREF-ICON span {
    color: white;
}

/* === === === === === === === === === *** *** *** === === === */

.ROUND-BUTTON {
    padding: 12px;
}

.ROUND-BUTTON a {
    display: inline-block;
    padding: 6px;
}
.ROUND-BUTTON a icon {
    width: 42px;

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

    border-radius: 50%;

    color: black;
    background-color: white;

    text-align: center;
}

.ROUND-BUTTON a:hover icon {        
    color: white;
    background-color: #333; #ff338f;

    animation-name: rubberBand;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

/* === === === === === === === === === *** *** *** === === === */

background-222,
background-638dff {
    clear: both;
    display: block;
    padding: 54px 12px;
}

background-222 {
    padding-top: 0;

    color: white;
    background-color: #222;
}
background-638dff {
    display: none;
    background-color: #638dff;
}

background-222 > div > div,
background-638dff > div > div {
    max-width: 500px;
    text-align: left;
}

background-222 h3,
background-638dff h3 {
    margin: 0;
}

background-222 a,
background-638dff a {
    display: inline-block;

    width: auto;
    min-width: 175px;

    border-radius: 3px; 125px;
    padding: 9px 21px;

    font-size: 18px;

    font-weight: 600;
    text-align: center;
}

background-222 a {
    color: white;
    border: 2px solid #0079ff; #638dff;
    background-color: #0079ff; #638dff;
}
background-638dff a {
    color: white;
    border: 2px solid #000;
    background-color: #000;
}

/* === === === === === === === === === *** *** *** === === === */

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE.COVER-HEIGHT-NEW,
.COVER-HEIGHT-NEW > div {
    width: 100vw;
    height: calc(100vh - 79px - 42px);

    padding: 12px;
    background-image: url(index/cover.jpg);
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X transform.other {
    background-image: url(masseuse/21.gif);
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X transform.other.max-size {
    z-index: 1;
    position: relative;

    margin-bottom: -162px;
}

@media screen and (max-width: 767px) {
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X transform.other.max-size {
        margin-bottom: -112px;
    }
}

@media screen and (max-width: 500px) {
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X transform.other.max-size {
        margin-bottom: -79.5px;
    }
}

@media screen and (max-width: 399px) {
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE.COVER-HEIGHT-NEW,
    .COVER-HEIGHT-NEW > div {
        height: calc(100vh - 78px);
        background-image: url(index/index.gif);
    }

    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X transform.other {
        background-image: url(index/transform.jpg);
    }
}

@media screen and (max-width: 359px) {
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X transform.other.max-size {
        margin-bottom: -59.5px;
    }
}






/* === === === === === === === === === === === === === === === === === === Brand.css === === === */
/* === === === === === === === === === GUCCI Style === === ===
<GUCCI>
    <img class="#" src="index/index.gif" alt="#">

    <div class="MIDDLE">
        <h1>The Horsebit 1953 Loafer</h1>
        <a href="#" target="_blank" title="#, #, #">The Collection</a>
    </div>
</GUCCI>
=== === === === === === === === === */

GUCCI {
    clear: both;
    display: block;
    width: 100%;
    max-width: 991px;
    padding: 0 12px 119px 12px;

    /* === === === === === === === === ===
    Padding-Bottom：50px＋12px＋54px
    === === === === === === === === === */
}

GUCCI img,
GUCCI div {
    position: relative;
}

GUCCI img {
    margin-bottom: -215px;

    /* === === === === === === === === ===
    Margin-Bottom：165px＋50px
    === === === === === === === === === */
}
GUCCI div {
    width: 100%;
    height: 165px;

    padding: 0 12px;

    color: white;
}

GUCCI h1,
GUCCI a {
    text-transform: uppercase;
}

GUCCI h1 {
    margin-top: 0;

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

GUCCI a {
    display: block;

    max-width: 300px;

    padding: 9px 27px;

    font-size: 21px;

    color: black;
    background-color: rgba(255, 255, 255, .95);
}
GUCCI a:hover {
    color: white;
    background-color: black;
}






/* === === === === === === === === === === === === === === === === === === Contact.css === === === */
#LINE, #WECHAT {
    display: block;
}

#LINE .bootstrap,
#WECHAT .bootstrap {
    padding-left: 12px;
    padding-right: 12px;
}

#LINE .bootstrap {
    border-bottom: 3px solid #00c300;
}
#WECHAT .bootstrap {
    border-bottom: 3px solid #7bb32e;
}

#LINE .bootstrap .middle,
#WECHAT .bootstrap .middle {
    height: 48px;
}

#LINE .bootstrap .middle img,
#WECHAT .bootstrap .middle img {
    display: block;

    width: auto;
    height: 24px;
}

#LINE .bootstrap .middle a,
#WECHAT .bootstrap .middle a {
    color: #999;
    font-size: 15px;
}

/* === === === === === === === === === *** *** *** === === === */

#LINE .max.middle,
#WECHAT .max.middle {
    width: 100%;
    height: calc(100vh - 51px);
}

#LINE .max.middle img,
#WECHAT .max.middle img {
    height: auto;
}

#LINE .max.middle img {
    width: 125px;
    border-radius: 125px;
}
#WECHAT .max.middle img {
    width: 181px;

    padding: 6px;

    border: 1px solid #ccc;
    border-radius: 10px;
}

#LINE .max.middle p {
    font-size: 18px;
}
#WECHAT .max.middle p {
    font-size: 24px;
}

#LINE .max.middle p.final,
#WECHAT .max.middle p.final {
    margin-bottom: 0;
}

#LINE .max.middle p span,
#WECHAT .max.middle p span {
    display: block;
}

#LINE .max.middle p span {
    font-size: 24px;
}
#WECHAT .max.middle p span {
    font-size: 15px;
}

/* === === === === === === === === === *** *** *** === === === */

#LINE .max.middle .href {
    clear: both;
}

#LINE .max.middle .href a {
    display: table-cell;
    vertical-align: middle;

    width: 100%;
    min-width: 240px;
    max-width: 324px;

    height: 48px;

    border-radius: 5px;

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

#LINE .max.middle .href a.color-a {
    border: 1px solid #07b53b;
    color: white;
    background-color: #07b53b;
}
#LINE .max.middle .href a.color-b {
    border: 1px solid #ccc;
    color: #4a4a4a;
    background-color: white;
}

#LINE .max.middle .href a:hover {
    border: 1px solid #4a4a4a;
    color: white;
    background-color: #4a4a4a;
}