@charset "UTF-8";

/*page designer 活動常用*/

.page_designer_wrap {
    width: 100%;
    max-width: 1000px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
}

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

.page_designer_wrap section {
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.page_designer_wrap section img {
    width: 100%;
    border: 0;
}

.page_designer_wrap section a,
.page_designer_wrap section a img,
.page_designer_wrap .double-link a,
.page_designer_wrap .double-link a:active,
.page_designer_wrap .triple-link a,
.page_designer_wrap .triple-link a:active {
    border: 0;
    outline: none;
}

.page_designer_wrap .double-link,
.page_designer_wrap .triple-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.page_designer_wrap .double-link a {
    display: block;
    width: 50%;
    height: 100%;
}

.page_designer_wrap .triple-link a {
    display: block;
    width: 33.33%;
    height: 100%;
    margin: 0;
    top: 0;
    position: relative;
}

.page_designer_wrap .mb {
    display: none;
}

.page_designer_wrap .adjust {
    position: absolute;
    display: block;
    z-index: 1;
    width: 100px;
    top: -135px;

}

@media (max-width: 800px) {
    .page_designer_wrap .pc {
        display: none;
    }

    .page_designer_wrap .mb {
        display: block;
    }

    .page_designer_wrap .adjust {
        top: 10px;
    }
}

/* main menu-picture*/
.menu-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: #ffb0c0;
}

.menu-wrap a {
    position: relative;
    display: block;
    width: 25%;
    text-align: center;
}

.menu-wrap a img {
    display: block;
    width: 100%;
}

.menu-wrap a img:nth-of-type(1) {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

@media(min-width:1024px) {
    .menu-wrap a img:nth-of-type(1):hover {
        opacity: 1;
    }
}

    /* main menu-divided evenly in one picture*/
    
   .menu-wrap_evenly {
    position: relative;
}

.menu-wrap_evenly img {
    display: block;
    width: 100%;
    height: auto;
}

.menu-wrap_evenly .btn-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.menu-wrap_evenly .btn-wrap a {
    flex: auto;
    display: block;
    height: 100%;
}

/* side menu */
.side {
    width: 110px;
    right: 0;
    left: auto;
    top: 12vh;
    display: block;
    background-color: #eb6877;
    position: fixed;
    padding: 12px 0;
    z-index: 9;
    text-align: center;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
}

.side .submenu .submenu-item a {
    transition: transform 0.3s ease-in-out;
}

.side .submenu .submenu-item a:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.9);
}

.side .submenu .submenu-item p {
    display: block;
    font-size: 14px;
    font-weight: bold;
    font-family: Microsoft JhengHei;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    margin: 10px auto;
}

.side .submenu .submenu-item a {
    display: block;
    width: 90px;
    font-size: 14px;
    font-weight: bold;
    font-family: Microsoft JhengHei;
    line-height: 1.2;
    color: #eb6877;
    background-color: rgba(255, 255, 255, 1);
    text-decoration: none;
    padding: 8px 10px;
    margin: 10px;
    border-radius: 10px;
}

@media screen and (max-width: 1024px) {
    .side {
        width: 95px;
        padding: 9.5px 0;
    }

    .side .submenu .submenu-item a {
        width: 80px;
        font-size: 12px;
        padding: 6.5px 8px;
        margin: 8px;
        border-radius: 8px;
    }

    .side .submenu .submenu-item p {
        font-size: 12px;
        margin: 8px;
    }

}

@media screen and (max-width: 800px) {
    .side.pc {
        display: none;
    }
}

/*官網下方固定選單隱藏*/
/*
.c-sticky-bar.m-footer .c-sticky-bar__panel {
display: none !important;
}
*/

/*修改官網右下美容顧問按鈕位置*/
/*
#dvSmartAgentICON {
    bottom: 10vh;
}*/

/* 更改hero 寬度 */
.c-content-hero__image {
    max-width: 1000px;
    margin: 0 auto;
}

/*讓content撐到100%滿，左右不留白*/
.l-section:not(.m-full-width)>.l-section__row,
.l-section:not(.m-full-width)>div>.l-section__row {
    padding-right: 0;
    padding-left: 0;
}