@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* font-family: "Noto Serif TC", serif; */
/* font-family: "Playfair Display", serif; */

/*
關於CSS設定說明
CSS屬性是會繼承的，而且還是由上往下繼承。
同樣元素設定16px 後 12px 再 15px 最後會以最後設定的15px為準
但是有兩種情況除外:
1.絕對路徑命名. 如: .xx .yy .zz p {設定值;}
2.important.  如: .xx p {設定值 !important;}

CSS3選取器語法 :nth-child(n) 

*/

.info_fix{ display: none;}

.path { display:none;}
.edit{ padding: 0px 0;}


#to_top i:before, #to_top i:after{ background: #fff;}
#to_top{
    box-shadow: unset;
    border-radius: 0px;
    background: #E2A66A;
    color: #fff;
    left: unset;
    right: 28px;
    webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; 
}
#to_top:hover{
    border-radius: 50%; background: #E2A66A; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);
}



/* 如果加line需修改變成50% */
#bottom_menu li:nth-child(2),#bottom_menu li:last-child{ display: none!important}
#bottom_menu li:first-child:nth-last-child(3), #bottom_menu li:first-child:nth-last-child(3) ~ li{ width: 100%;}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/* page分頁按鈕 */
.page{  margin: 40px auto; }
.page li a{ width: 30px;height: 30px;line-height: 30px;background: transparent; color: #D89C6A; border: 0px;}
.page strong, .page a{ transition: 0.3s;color: #fff;background: #D89C6A;}
.page strong, .page a:hover{ background: transparent; color: #D89C6A;border: 1px #D89C6A solid;}
.page li.activeN {color: #fff;background: #D89C6A;width: 30px;height: 30px;border-radius: 50%;line-height: 30px;}



/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/* banner */
.swiper-wrapper .swiper-slide:nth-child(1)::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/banner1-bg.png);
    width: 100%;
    max-width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10000;
}
.swiper-wrapper .swiper-slide:nth-child(2)::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/banner2-bg.png);
    width: 100%;
    max-width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10000;
}



/* 全域設定 */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(102, 102, 102, 0.6);
}

::-webkit-scrollbar-thumb {
    background-color: #3A291A;
}

::selection {
    color: #FFE3CC;
    background: #AA7D50;
}



/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/* .header_area .nav-brand, .header_area .nav-brand:focus{ } */
.nav-brand img{ display: none;}
/* logo */
.nav-brand h1 {
    display: block;
    background: url(https://pic03.eapple.com.tw/theoneskincares/logo.png);
    background-size: contain;
    width: 200px;
    height: 50px;
    background-repeat: no-repeat;
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    /* filter: contrast(0) brightness(100); */
    background-position: center;
    margin: 5px 0;
    background-repeat: no-repeat;
}


.header_area.sticky {
    background: transparent;
    transition: all 0.3s ease-in-out;
    position: fixed;
}

.header_area.sticky .nav-brand h1 {
    /* filter: initial; */
}

.stellarnav li.has-sub > a:after{ border-top: 0px;}

a.nav-brand {
    padding: 2px 0;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    background: #94755A;
    border-radius: 0px 0px 15px 0px;
    padding: 32px 40px;
    opacity: 1;
    transition: all 0.3s ease-in-out;

}

body.pageIndex .nav-brand {
    opacity: 1;
}

header.header_area.sticky a.nav-brand {
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

/* 搜尋 */
.me_tp_features a i{ color: #a07d50;}
.tp_links{
    display: none;
}
.me_tp_features a.tp_btn_cart,.me_tp_features a.tp_btn_notice{ display: none;}
.box_search input[type=text]{ background:#fff; border: 0px ; width: 80px; padding: 2px 45px 3px 20px ; border-radius: 0px;}
.shop_search_btn{ background: #AA7D50; border-radius: 0px;}
.box_search form { color: #000;}

.stellarnav>ul>li {
    position: relative;
}
.stellarnav>ul>li:nth-child(3)> ul > li:nth-child(1){
    display: none;
}

.stellarnav>ul>li:nth-child(8):before {
    background: #AA7D50;
    content: " ";
    position: absolute;
    opacity: 1;
    transition: 0.5s ease-in-out;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: unset;
}

.stellarnav>ul>li:nth-child(8) a {
    padding-left: 15px;
}

.stellarnav>ul>li:nth-child(8) b {
    color: #fff;
}


/* menu漢堡條 */
.stellarnav .menu-toggle:after{ color: #3A291A;}
.stellarnav .menu-toggle span.bars span { background: #3A291A;}

/* close menu 拉出來 */
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu{
  background: #94755A;
  color: #FFBB77;
}
.stellarnav .icon-close:before{
  border-bottom: solid 3px #FFBB77;
}
.stellarnav .icon-close:after{
  border-bottom: solid 3px #FFBB77;
}
.stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul{
  background: #fff;
}
.stellarnav a.dd-toggle .icon-plus:before{
  border-bottom: solid 3px #AA7D50;
}
.stellarnav a.dd-toggle .icon-plus:after{
  border-bottom: solid 3px #AA7D50;
}
.stellarnav.mobile li.open{
  background: #ffe3cccd;
}
.stellarnav.mobile ul ul{
  width: 100%;
  position: relative;
  left: 0;
}
.stellarnav.mobile > ul > li{
  border-bottom: 1px #ffe3ccab solid;
}
.stellarnav.mobile > ul > li > a{ padding: 20px 43px 20px 10px;}
.stellarnav.mobile > ul > li > a.dd-toggle{ top: 10px;}


@media screen and (max-width: 1024px) {
    a.nav-brand {
        opacity: 1;
        padding: 17px 17px 5px;
        justify-content: center;
    }

    body.pageIndex .nav-brand {
        opacity: 1;
        justify-content: center;
    }

    .stellarnav.desktop li>a:before {
        right: 99px;
    }

    a.nav-brand{
        background: transparent;
    }

    .nav-brand h1 {
        display: none;
     }
 
     .nav-brand img{
        display: block;
         max-width: 25%;
     }
     .me_tp_features{
        margin: 7px 0 0px;
        padding-bottom: 7px;
     }
     .stellarnav.mobile{ top: 26px;}
}

@media screen and (max-width: 768px) {
    .stellarnav>ul>li:before {
        display: none;
    }

    .stellarnav>ul>li:nth-child(8) a {
        padding-left: 10px;
    }

    .stellarnav.mobile>ul>li>a b:nth-child(2) {
        display: none;
    }

    .stellarnav>ul>li:nth-child(8) b {
        color: initial;
    }

    .nav-header {
        z-index: 0;
        padding: 0;
    }


    a.nav-brand {
        justify-content: center;
        border-radius: 0;
        padding: 15px 25px 0px;
    }

    .navigation {
        margin-top: 0;
    }

    .stellarnav.mobile{
        top: 26px;
    }

    .nav-brand img{
        width: 200px;
        max-width: 100%;
     }
     .stellarnav>ul>li:nth-child(8) b {
        color: #fff;
    }
}

@media screen and (max-width: 476px) {  
    
}

/* 大圖 */
/*預設解除背景輪播*/

.swiper-wrapper {
    position: relative;
}


/* 大圖 */
/*預設解除背景輪播*/
#content_main {
    margin: 0;
}

.bannerindex {
    /* position: static; */
    position: relative;
    height: auto;
}

.swiper-banner {
    position: static;
    margin: 0;
    height: auto;
}

.swiper-slide img {
    height: auto;
}

@media screen and (max-width: 1024px) {
    .bannerindex {
        position: relative;
    }

}

@media screen and (max-width: 768px) {
    .bannerindex {
        height: 0;
        padding-bottom: 50%;
    }

}

/* banner== */
/*內頁BANNER 設定*/
.banner {
    position: relative;
    z-index: 10;
    overflow: hidden;
    background: transparent;
    background-size: cover;
    background-position: center;
    padding: 0;
    background: #aa7d50;
}

.banner h5 {
    color: #fff;
    font-weight: 500;
    text-align: center;
    width: 90%;
    position: relative;
    margin: auto;
    letter-spacing: 5px;
    font-size: clamp(1.35rem, 16px + 1vw, 1.8rem);
    padding: 5rem 0 5rem 0;
    line-height: 1.2;
    position: relative;
    font-family: "Noto Serif TC", serif;
}

.banner h5:after {
    border-bottom: 2px dotted #ffebcd;
    max-width: 380px;
    display: block;
    padding-bottom: 8px;
    font-weight: 400;
    margin: auto;
    font-size: clamp(1rem, 16px + 1vw, 1.0625rem);
    color: #222;
    letter-spacing: 2px;
    padding-top: 20px;
}

.banner:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: -100px;
    top: 0;
    /* mix-blend-mode: luminosity; */
    /* filter: saturate(100); */
    /* opacity: 0.2; */
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/m-logo.png);
    background-repeat: no-repeat;
    background-position: right;
    animation: ba-logo 1.5s ease-in-out forwards;
}

@keyframes ba-logo {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


@media screen and (max-width: 768px) {
    .banner h5:after {
        font-size: 16px;
    }
    .banner:before {
        display: none;
    }

    .banner h5 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .banner h5:before {
        content: '';
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        background-image: url(https://pic03.eapple.com.tw/theoneskincares/logo-h-m.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        display: block;
        width: 35px;
        height: 35px;
        margin-bottom: 10px;
    }

}


/* header */
.main_header_area .container {
    max-width: 100%;
}

.main_header_area {
    background: #FFBB77;
}

.stellarnav > ul > li > a{ color: #1E150D; margin: 0px 10px;}
.stellarnav > ul > li > a:hover b{ color: #3A291A;}

.stellarnav li a {
    color: #fff;
    padding: 10px 15px 10px 10px;
}
.stellarnav li a:hover{
	color:#fff;
}

/* 選單列icon */
.stellarnav > ul > li::before{
    content: "";
    width: 26px;
    height: 30px;
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/nav-pic.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-right: -7px;
}

.stellarnav ul ul {
    background: #AA7D50;
    width: 172px;
}
.stellarnav ul ul ul{ 
    left: 170px;
}

.stellarnav li li:hover {
    background: #3A291A;
}


.stellarnav li li {
    border: none;
}

.header_area {
    width: 100%;
}

body.pageIndex .header_area {
    position: fixed;
}

.stellarnav li li.has-sub > a:after{
    border-left: 6px solid #ffd9c2;
}

@media screen and (max-width:1200px) {
    .stellarnav > ul > li > a{
        margin: 0px 4px;
    }
}
@media screen and (max-width:1110px) {
    .stellarnav > ul > li::before{
        width: 25px;
        margin-right: -7px;
    }
    .stellarnav > ul > li > a{
        padding: 0 10px 0 0;
    }
}
@media screen and (max-width: 1024px) {
    body.pageIndex .header_area {
        position: sticky;
    }  
    body.pageIndex .header_area.sticky {
        position: fixed;
    }
}

@media screen and (max-width: 768px) {
    .navigation {
        padding: 0;
    }

    body.pageIndex .header_area {
        position: relative;
    }

    .stellarnav li a {
        color: #333;
    }

    .stellarnav > ul > li::before{
        position: relative;
        top: -10px;
    }
    
}



/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */



/*Footer/＝＝＝＝＝*/
.footer_logo{
    margin: 8px 10px 0px;
}
.footer_logo img{
    width: 85%;
}

/*footer_LOGO*/
.footer_logo {
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/logo.png)!important;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.5s ease-in-out;
    /* background-position: center; */
    margin-right: 24px;
    width: 240px;
    height: 55px;
}
.footer_logo img { width: 0; height: 105px;}


.footer {
    background-size: cover;
    padding-top: 30px;
    background: #745c48;
}

.footer .center {
    max-width: 1400px;
    width: 90%;
}


.footer_info {
    display: grid;
    /* grid-template-columns: 250px 1fr; */
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 0;
}

.footer_info ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: var(--m30);
}

.footer_info li p,
.footer_info li:nth-child(1) * {
    color: #fff;
}

/* footer資訊 */
.footer_info li:nth-child(1){
    display: flex;
    flex-direction: column;
}
/* 資訊順序 */
.footer_info li p:nth-child(1){ order: 2;}
.footer_info li p:nth-child(2){ order: 1;}
.footer_info li p:nth-child(3),.footer_info li p:nth-child(4){display: none;}
.footer_info li p:nth-child(5){ order: 3;}
.footer_info li p:nth-child(6){ order: 4;}
.footer_info li p:nth-child(7){ order: 5;}
.footer_info li p.add2:before{
    content: '營業時間：';
}
.footer_info li p.mail:before{
    content: 'Email：';
}

.footer_info li {
    padding: 0;
    font-weight: 500;
}

.footer_menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
    gap: 5px;
}

.footer_menu a {
    margin: 0;
    text-align: center;
    padding: 5px;
    transition: all 0.3s;
    background: transparent;
    color: #fff;
}

.footer_menu a:nth-child(1) {
    display: none;
}

.box_link a {
    /* padding: 10px; */
    /* min-width: 150px; */
    font-size: 14PX;
   border: 0px;
}

.box_link a i:after {
    font-size: 12px;
    padding-left: 8px;

}

.fa-facebook:before {
    color: #3F78FF;
}

.fa-line:before {
    color: #00B900;
}

.fa-whatsapp:before {
    color: #FFC897;

}

.fa-envelope:before {
    color: #b72d00;
}

.fa-instagram:before{
    color: #E1306C;
}

.fa-line:after {
    content: "LINE";
    font-family: 'Playfair Display';

}

.fa-facebook::after{
    content: "FACEBOOK";
    font-family: 'Playfair Display';
}

.fa-whatsapp:after {
    content: "PHONE";
    font-family: 'Playfair Display';

}

.fa-envelope:after {
    content: "EMAIL";
    font-family: 'Playfair Display';
}

.fa-instagram:after{
    content: "INSTAGRAM";
    font-family: 'Playfair Display';
}

.copy {
    background: unset;
    color: #b4b4b4;
    border: none;
    padding: 15px 0;
}

.copy a {
    color: #b4b4b4;
    transition: all 0.3s;
}

.box_link {
    position: relative;
    top: unset;
    right: unset;
    width: 100%;
    display: flex;
    grid-column: 2 / -1;
    grid-row: 1 / 4;
    flex-wrap: wrap;
    align-items: flex-start;
}

.box_link a {
    /* border: 1px solid #ffffff24; */
    margin: 0;
    display: inline-block;
    width: auto;
    margin-right: 8px;
}

.footer_info li:nth-child(1) .box_link a i {
    color: #ddd;
}

.footer_info li:nth-child(1) .box_link a:hover i {
    color: #fff;
}

.footer_info li:nth-child(1) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.footer_info li:nth-child(2) {
    display: none;
}

.footer_info li:nth-child(1) p {
    grid-column: 1 / 2;
}

.footer_info li:nth-child(1):before {
    content: "Contact";
}

.box_link:before {
    content: "Related Link";
    order: 0;

}

.footer_info li:before,
.box_link:before {
    text-align: justify;
    display: block;
    color: #fff;
    font-family: 'Playfair Display';
    font-size: 32px;
    border-bottom: 1px solid #ffffff24;
    padding-bottom: 5px;
    margin-bottom: 10px;
    width: 100%;
}


a.me_tp_ig {
    order: 1;
}

a.me_tp_fb {
    order: 2;
}

a.me_tp_line {
    order: 3;
}


@media screen and (max-width: 1024px) {

    .footer_info li:nth-child(1) {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer_info li:nth-child(1) p {
        grid-column: unset;
    }

    .box_link {
        grid-column: unset;
        grid-row: unset;
        margin-top: 20px;
    }

    .footer_info li:nth-child(1):before{
        order: 1;
        margin-top: 24px;
    }
    .footer{
        padding: 10px 0 0;
    }

    .footer_logo{
        margin: 22px 10px 0px;
    }

}

@media screen and (max-width: 768px) {
    .footer_logo{
        margin: 22px 0px -24px;
    }

    .footer.with_shopping_mode {
        padding: 80px 0 0px;
    }

    .footer_logo {
        text-align: center;
    }
    .footer_info{
        grid-template-columns:1fr;
    }

}

@media screen and (max-width: 600px) {

    /*Footer/＝＝＝＝＝*/
    .box_link {
        text-align: center;
    }
}
@media screen and (max-width: 425px) {


    .footer .center:before {
        padding-bottom: 0;
        border-bottom: none;
    }

}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/* 下拉頁面 */
.promotion_title{ display: none;}
.other_promotion{ display: none;}
.other_select_page .edit{ margin-bottom: -45px;}
.other_select_page .page{ display: none;}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*預設購物車版面 產品分類選單在左側 商品內頁詳細介紹下表單更改樣式 by shiny at 2023.1.5  */
.product_page .main_part { max-width:1500px;}
.product_info_page .main_part { max-width:1200px;}

.product_page .show_content,
.product_info_page .show_content { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.product_page .product-layer-two { position: relative; width: 220px; letter-spacing: 1px; min-height: 30vw;}
.product_page .products-list,
.product-wrapper { width: calc(100% - 270px); display: flex; flex-wrap: wrap; align-items: flex-start;}
ul.page { width: 100%;}

.product-layer-two li ul { position:static; margin-top:10px; display:block !important; width:100%; margin-left:0;}
.product-layer-two li:hover ul { border: none !important; display:block !important;}
.product-layer-two li li { display: block; padding:5px 10px; transition:all ease .3s;}
.product-layer-two li li a{ padding:0;}
.product-layer-two li li:hover > a { background:#fff; color:#ad925e;}
.product-layer-two > li { width:100%; max-width:100%; padding:0; text-align:left;}
.product-layer-two > li ul > li + li { margin-top:5px;}

.product_info_page .product-layer-two { display: none;}
.product_info_page .products-list,
.product-wrapper { width: 100%;}

.product-layer-two li li:hover{ margin-left: 15px;}
.product-layer-two li li > a:before { content: ""; position: absolute; width: 12px; height: 8px; background: #fff; left: 0; margin-left: -20px; top: 50%; margin-top: -4px; clip-path: polygon(0 0, 100% 50% , 0 100%);}
.product-layer-two li li:hover > a:before { background:#ad925e;}

.product_info_page .half_box { width: 100%; float: none; padding-right: 0;}
.product_info_page .half_box li.btn_blankTop { margin-top: 50px; justify-content: space-between; display: flex;}
.product_info_page .half_box li.btn_blankTop input { width: calc(50% - 10px); background-image: none; padding: 0; text-align: center;}
@media screen and (max-width: 1200px) {
.products-list .item { width: 48%;}
}
@media screen and (max-width: 768px) {
.product-layer-two,
.products-list,
.product-wrapper { width: 100%;}
.product-layer-two { margin-right: 0;}
.product-layer-two > li { margin-bottom: 5px;}
.product_page .product-layer-two,
.product_page .products-list { width: 100%; border-right: none;}

.product_page .show_content > a { order: 1;}
.product_page ul.products-list { order: 2;}
.product_page ul.page { order: 3;}
.product_page ul.product-layer-two { order: 4;}
.products-list .item:nth-child(even){
    transform: translateY(0px);
}
}
@media screen and (max-width: 600px) {
.products-list .item { width: 100%; max-width: 350px;margin: 20px auto; display: block;}
}


.product_page #content{
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/s-bg.jpg);
    background-position: bottom;
    font-family: "Noto Serif TC","Playfair Display",serif;
}
.product_info_page #content{
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/l-bg.jpg);
    background-position: bottom;
    font-family: "Noto Serif TC","Playfair Display",serif;
}

/* 首頁的products */
.i_prod_tit{ margin-bottom: 16px;}
.i_prod_tit span{ font-size: 32px; font-family: "Noto Serif TC", serif; font-weight: bold;}
.i_prod_tit h2 { font-size: 200px; font-family:  "Cormorant" , serif; 
    color: transparent;
    background-image: linear-gradient(to right, rgb(224 195 149), rgb(152, 130, 79) 60%, rgb(137, 128, 30));
    background-clip: text;
    margin-bottom: -32px;
}

.animated-arrow{ background: #C0A467;}
.animated-arrow:hover{ background: #504E44;}

@media screen and (max-width:960px) {
    .i_prod_tit h2{ font-size: 120px;}
}

@media screen and (max-width:580px) {
    .i_prod_tit h2{ font-size: 80px; margin-bottom: -15px;}
}

@media screen and (max-width:420px) {
    .i_prod_tit h2{ font-size: 60px; }
}




/*購物車/外層＝＝*/
/*價格*/
.products-list .price {    display: flex;    margin-bottom: 5px;    align-items: center;    justify-content: center;    flex-wrap: wrap;}
.products-list .price b {    margin: 0 5px;    line-height: 180%;    text-align: center;color: #8a755a; font-weight: 400; font-size: 14px;}
.products-list .price b.ori_price {    font-size: 14px;}

.products-list .item:nth-child(even){
    transform: translateY(-20px);
}


/*外層版面*/
.products-list .name {
    text-align: center;
	transition:.3s;
  color: #a07d50;
  height: unset;
  font-style: 17px;
  font-weight: bold;
}

.products-list .item a:hover .name {
    color: #c0965f;
}

.products-list .item a .pic img {
    transition: .5s;
    transform: scale(1);
}

.products-list .item a:hover .pic img {
    transform: scale(1.05);
}


/* more */
.products-list .item a .more {
    display: flex;
    width: 100%;
    position: absolute;
    top: 105px;
    height: 0px;
    left: 50%;
    transform: translate(-50%,0%);
    border: none;
    color: #fff;
    opacity: 0;
    align-items: center;
    justify-content: center;
    transition: all 1s cubic-bezier(0.68, 0.55, 0.38, 0.99);
}
.products-list .item a:hover .more {
    background: linear-gradient(90deg, transparent, #8a755af4, transparent);
    height: 90px;
    opacity: 1;
    backdrop-filter: blur(13px);
    color: #fff;
    letter-spacing: 0px;
    transition: all 1s cubic-bezier(0.68, 0.55, 0.38, 0.99);
}




.product_page .main_part {    width: 90%;	max-width: 1500px;}
.product_page .show_content {    display: flex;    flex-wrap: wrap;    align-items: flex-start;    justify-content: space-between;}
.product_page .products-list {    width: calc(100% - 280px);}
.product-layer-two {    width: 250px;    margin: 0;}
.product_info_page .product-layer-two {    display: none;}
.product-layer-two li {    margin: 0;    width: 100%;padding: 0 0px; margin-bottom: 16px;}
.product-layer-two li.active a {    border: unset;border-bottom: 0px; }
/**/
.product-layer-two li a {    color: #b0886e;    border: none;    background: transparent;    transition: all 0.3s;    line-height: 200%;    transition: all 0.3s; padding-left: 5px;}
.product-layer-two li:hover > a, .product-layer-two li.active > a{
	color: #b0886e;
}

.product-layer-two li.active > a{
    background: #b0886e; color: #fff;
    text-align: center;
}

.product-layer-two li{ color:#b0886e ;}

.product-layer-two li:before{
    content: "";
    width: 26px;
    height: 30px;
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/nav-pic.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    color: #a07d50;
}
.product-layer-two li li::before{ display: none;}
.product-layer-two li li > a { color: #121212;}
.product-layer-two li li > a:before{ display: none;}
.product-layer-two li ul{ border-left: 1px solid #8a755a54;}


.product-layer-two > li > a:before {
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 18px;
    content: "＞";
    color: #ADA17E;
    background: #dddddd;
    width: 18px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s;
    padding-left: 2px;
    font-size: 13px;
	display:none;
}
/**/
.product-layer-two li ul {    position: relative;padding-top: 1px; border-left: 1px solid #8a755a54;}
.product-layer-two li li {    border: none;background: transparent; }
.product-layer-two li li a{    background: transparent;}
.product-layer-two li li:hover a{color: #d89c6a;background: transparent;padding-left: 10px;}

/*hover到才顯示副選單 關掉↓*/
.product-layer-two li li {    display: block;}

/* 產品內頁 */
.sidebarBtn h2{ color: #3a291a; font-size: 26px;}
.sidebarBtn{ border: 0px; background: unset; margin-left: -32px;}
.sidebarBtn .price{ font-size: 15px; border-bottom: 3px solid #ffd9c2; }
ul.prod li h3.prod-thumb{  color: #1e150d;margin: 16px 0; background: unset; text-align-last: left;}
.product_info_page .lastaction{background-color: unset; border: 1px solid #d89c6a;}
.product_info_page .nextaction{background-color: #d89c6a;}
.product_info_page button, html input[type="button"], input[type="reset"]{ color: #d89c6a;}
input[type="submit"]{color: #fff;}
.product_info_page button, html input[type="button"], input[type="reset"]{ color:  #d89c6a;}
.product_info_page button, html input[type="reset"]{ color: #d89c6a!important;}
.car_page button, html input[type="reset"]{ color: #fff!important;}
.car_page button, html input[type="button"], input[type="reset"], input[type="submit"]{ color: #fff;}
.qaform span{ color: #000;}
.qaform .breakF{border: 0px; background: #fff; }
ul.prod li .prod-panel{ color: #000; line-height: 32px;}
.product_info_page .lastPage{background: unset; border: 1px solid #d89c6a; color: #d89c6a;}

/* 購物車照片 */
.product_pic .bx-wrapper .bx-viewport{ width: 88%!important;}
.bx-wrapper .bx-viewport{ border: 0px; background: transparent;}

/*按鈕顏色*/
.inquiry_a1{background: #d89c6a;}
.inquiry_a2{background: #d89c6a;}
.inquiry_a3{ background: #d89c6a;}
.inquiry_a1:hover{background: #bc875d;}
.inquiry_a2:hover{background: #bc875d;}
.inquiry_a3:hover{ background: #bc875d}
.lastaction, .nextaction, .lastPage {    
	color: #FFFFFF;
	background: #d89c6a;
	transition:.3s;
}

.lastaction:hover, .nextaction:hover, .lastPage:hover {    
	background: #bc875d;
    color: #fff!important;
}


.product_info li .txt_box {    color: #222222;    width: 100%;}
.sidebarBtn .sp_price {   color: #cbc0a0;}
.mobile_product_name{font-size: 24px;}
/*相關推薦*/

.prod_related h6 span:before{font-size: 28px; color: #1e150d;font-family: "Noto Serif TC",serif;}
.prod_related {
    background: unset;
    padding: 40px 15px;
}

.related_list li a {
    background: unset;
}
.related_list li a p{ color: #8a755a;}


/* 購物車 */
.car_page #content{
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/s-bg.jpg);
    background-position: bottom;
    font-family: "Noto Serif TC","Playfair Display",serif;
}
.car_page  .product_info_page button, html input[type="reset"]{ color: #fff; background: #d89c6a;}
.separate_title{ background: #ffffff85;}
.rewrite_simple{ background: #d89c6a;}
.send_simple{ background: #bc875d;}
.declaration{ background: #ffd9c26e;}
.border200{ border: 0px;}

/* 匯款通知 */
.remit_page #content{
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/s-bg.jpg);
    background-position: bottom;
    font-family: "Noto Serif TC","Playfair Display",serif;
}


@media screen and (max-width:768px) {
  .product_page .products-list{ width: 100%;}
  .sidebarBtn{ margin-left: 0px;}
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { position:static; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;} 
.swiper-slide img { height:auto;}
@media screen and (max-width: 768px) {
.bannerindex { padding:0; margin:0;}
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/* 首頁的blog */
.pageIndex #content_main{
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/i-n-bg.jpg);
    background-position: bottom;
}
.module_i_news{
    font-family: "Noto Serif TC","Playfair Display", serif;  padding: 100px 20px;
}
.module_i_news ul{ max-width: 1400px; margin: 20px auto 20px;}
.module_i_news .title_i_box{ display: flex; flex-direction: column-reverse; justify-content: center;}
.animated-arrow{ background: #D89C6A; width: 150px;}
.animated-arrow:hover{ background: #BC875D;}
.module_i_news .title_i_box h6{ color: #A07D50; font-size: 36px; font-family: "Playfair Display", serif; }
.module_i_news .title_i_box h4{ font-size: 44px; color: #3A291A; font-weight: bold; font-family: "Noto Serif TC", serif;}

.module_i_news li{ width: 24%; padding: 12px;}
.i_blog_le{ width: 100%; display: flex; overflow: hidden;}
.i_blog_ri{ width: 100%;}

.i_blog_ri h5{ color: #a07d50; font-weight: bold; font-size: 18px;}
.i_blog_ri em { color: #ffbe8d;  border-bottom: 1px solid #ffd9c2; padding-bottom: 12px;}
.i_blog_ri p{height: 42px; padding-top: 4px; color: #0f0f0f; }

.module_i_news li:hover{
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.module_i_news li a:after{ display: none;}
.module_i_news li a:before{ display: none;}

/* .module_i_news li:nth-child(even){ transform: translateY(-20px);} */

.module_i_news li a:hover img{
    -webkit-transform: scale3d(1.2, 1.2, 1);
  transform: scale3d(1.2, 1.2, 1);
  transition: all 1s linear;
}

@media screen and (max-width:960px) {
    .module_i_news li{width: 48%;}
}
@media screen and (max-width:768px) {
    .module_i_news li{width: 98%;}
    /* .module_i_news li:nth-child(even){ transform: translateY(0px);} */
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

.blog_page #content{
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/s-bg.jpg);
    background-position: bottom;
}
.blog_in_page #content{
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/s-bg.jpg);
    background-position: bottom;
}
  /*文章設定*/
  /*一排呈現
  .subbox_item { width:100%;}
  */
  
  /* 側邊hover */
  .blog_le{ margin-top: 50px; font-family: "Noto Serif TC",serif;}
  .blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category {
    background: #d89c6a !important;}
  .submenu {background: #fff;}
  .submenu a{padding: 12px 12px 12px 30px;}
  .submenu a:hover {background: #ddd1ba;color: #1e150d;padding: 12px 12px 12px 35px;}
  .blog_le .accordion {border-radius: 0;border: none;}
  .blog_le .accordion li{border-bottom: 1px solid rgba(103, 107, 114, 0.2);}
  .blog_le .accordion li:last-child{border-bottom: none;}
  .blog_le .accordion li.open {background: #ddd1ba;}
  .blog_le .accordion li.open a{color: #000;}
  h5.blog_le_t{ display: none;}
  .blog_search input[type=search]{ border-radius: 0px;}

  /* 右邊 */

  /* 右邊往右上角移動 */
  .subbox_item:hover{
    /* -webkit-transform: translate(20px, -10px);
    -ms-transform: translate(10px, -10px);
    transform: translate(10px, -10px); */
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  }

  .share_page .edit {    text-align: justify;    line-height: 180%;}
  .subbox_item a:before , .subbox_item a:after {    transition: 0.3s;}
  /* .subbox_item a::before{
    
    margin-bottom: 10px;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #fff;
    background-color: #caab7c;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
  } */
  .blog_le .accordion > li {    transition: all 0.3s;}
  .blog_box_edit {    line-height: 180%;    text-align: justify;}
  h4.blog_category_title {    text-align: justify;}
  .link a {    width: 100%;    display: block;    padding: 15px 10px;}
  .accordion li .link {    padding: 0;}
  .blog_list_ri h5{ color: #a07d50; font-weight: bold; font-size: 18px;}
  .blog_list_ri em{ color: #ffbe8d;  border-bottom: 1px solid #ffd9c2; padding-bottom: 12px;}
  .blog_list_ri p{ height: 42px; padding-top: 4px; color: #0f0f0f;}
  
  .subbox_item a:after {
    display: none;
  }
  .subbox_item a:before {
    color: #803634;
    bottom: -25px;
    display: none;
  }
  .blog_list_le {
    overflow: hidden;
  }
  .subbox_item a img{
    transition: all 0.3s;
   
  }
  .subbox_item a:hover img{
    /* transform: scale(1.3);
    transition: all 0.3s; */
    -webkit-transform: scale3d(1.2, 1.2, 1);
  transform: scale3d(1.2, 1.2, 1);
  transition: all 1s linear;

  }


  /* hover出現icon */
  .subbox_item a img:before{
    content: "";
    width: 80px;
    height: 64px;
    display: block;
    position: absolute;
    z-index: 20;
    background: url(https://www.chioushan.com/images/teaactive01.svg) no-repeat;
    background-size: cover;
    top: 150%;
    left: 50%;
    margin: -34px 0 0 -40px;
    transition: all 0.9s;
    opacity: 1;
}
  .subbox_item a img:after{
    content: "";
    display: block;
    position: absolute;
    background-image: url(https://www.chioushan.com/images/teawater.svg);
    background-position-y: -40px;
    background-repeat: no-repeat;
    width: 10px;
    height: 40px;
    z-index: 20;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 30px;
}
.subbox_item a:hover img:before{
    top: 50%;
	transform:rotate(12deg);
	transition:top 0.9s , transform 0.9s 1s;
}
  .subbox_item a:hover img:after{
    opacity:0;
	background-position-y: 40px;
	transition:background-position-y 2s 1.5s , opacity 1s 1.9s ;
}

/*  */


@media screen and (max-width:960px) {
    .subbox_item{ border-bottom: 0px;}
}


  
  
  /*文章分享變1排4個*/
  .blog_page .main_part {    max-width: 1600px;}
  
  .blog_list_le , .blog_list_ri {    width: 100%;}
  .blog_subbox {    display: flex;    flex-wrap: wrap;    justify-content: flex-start;}
  .subbox_item {    width: calc(100% / 4);    padding: 12px; }
  .subbox_item:nth-child(even){ transform: translateY(-20px);}
  @media screen and (max-width: 1024px) {.subbox_item {    width: 50%;}}
  @media screen and (max-width: 600px) {.subbox_item {    width: 100%;transform: translateY(0px);} }
  
  
  /* 內頁 */
  h4.blog_category_title{ color: #3a291a; font-weight: bold;}
  .blog_back{ text-align: center;width: 400px; margin: auto;}
  .blog_back a.article_btn_prev {background: #d89c6a;}
  .blog_back a.article_btn_back {background: #bc875d;}
  .blog_back a.article_btn_next {background: #d89c6a;}
  .blog_back a { padding: 10px 14px; }
  
  @media screen and (max-width:410px) {
    .blog_back{ width: 100%;}
  }


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

.album_page #content{
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/s-bg.jpg);
    background-position: bottom;
}
.album_info_page  #content{
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/s-bg.jpg);
    background-position: bottom;
}
/* 相簿 */
/*主分類頁面*/
.album_page .main_part , .album_class_page .main_part , .album_info_page .main_part {max-width: 70%;}
.show-list .item:hover .show_name {    color: #fff;}
.show-list .show_pic {height: 60vh;max-height: 430px;padding-bottom: 0;}
.show-list .show_pic img {
    display: inline-block;
    max-width: 100%;
    min-width: 100%;
    object-fit: cover;
    height: 50vh;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
}
.show_content {
    margin: auto;
    padding: 50px 0px 30px;
    font-family: "Noto Serif TC", "Playfair Display" , serif; 
}
.album_page .main_part{
    padding: 0;
}

.album_page .main_part .show-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.show-list .item {
    width: 33%;
    padding: 0 5px;
    margin: 12px 0px;
}


.show-list a .show_name {
    font-size: 19px;
    color: #fff;
    letter-spacing: 0.15em;
    line-height: 1.5;
    margin-top: 0;
    display: block;
    height: 26px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    font-weight: 400;
    transition: all 0.3s;
}
.show-list .item:hover .show_name {    
    color: #fff;
    opacity: 1;
    transition: all 0.3s;
    font-weight: bold;
}
.overlay {
    position: absolute;
    content: '';
    width: 100%;
    height: 40%;
    display: block;
    background: linear-gradient(90deg, transparent, #8a755af4, transparent);
    backdrop-filter: blur(13px);
    left: 0;
    top: 0%;
    transform: scale(1) translate(0,-50%);
    opacity: 0;
    transition: all 1s cubic-bezier(0.68, 0.55, 0.38, 0.99);
}
.show-list .item:hover .overlay {
    top: 50%;
    opacity: 1;
    transform: scale(1) translate(0,-50%);
    transition: all 1s cubic-bezier(0.68, 0.55, 0.38, 0.99);
}

@media screen and (max-width:1100px) {
    .show-list .show_pic{ height: unset; max-height: unset;  }
    .show-list .show_pic img{ height: unset;}
}



@media screen and (max-width: 768px) {
    .show-list .item {
        width: 48%;
        margin-bottom: 10px;
    }
    .overlay{ height: 30%;}
    .album_page .main_part .show-list{ justify-content: unset;}
}
@media screen and (max-width:500px) {
    .show-list .item {
        width: 100%;
    }
}
.pic-list .item h6 {
    font-size: 16px;
    color: #7d7d7d;
    padding: 5px;
}



/*次分類頁面*/
.other_album_choice li {    background: #d89c6a; border-radius: 0px;}
.other_subalbum li p {    line-height: 220%;}
.other_subalbum li a div {
    height: 30vh;
    max-height: 250px;
    overflow: hidden;
    position: relative;
}
.other_subalbum li a img {
    max-width: 100%;
    min-width: 100%;
    object-fit: cover;
    height: 100%;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
}


.subalbum-menu h2 {
    display: none;
    color: #929487;
}
.block {
    display: none;
}
.album_fixed_title {
    display: none;
}
.other_subalbum {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.other_subalbum li {
    display: inline-block;
    background: #fff;
    width: 42%;
    margin: 10px 1%;
    border: none !important;
    position: relative;
}
.other_subalbum li a div {
    height: 60vh;
    max-height: 500px;
}

.other_subalbum li p {
    line-height: 220%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    opacity: 1;
    transition: all 0.3s;
}
.other_subalbum li:hover p{
    opacity: 1;
    transition: all 0.3s;
}
.other_subalbum li a div:after {
    content: "";
    position: absolute;
    background: rgb(0 0 0 / 40%);
    width: 100%;
    height: 100%;
    transform: translate(-50% , -50%) scale(0.85);
    top: 50%;
    left: 50%;
    transition: all 0.3s ease-in-out;
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .other_subalbum li a div {
        height: 30vh;
        max-height: 500px;
    }
    .other_subalbum li {
        width: 100%;
    }
}


/*照片頁*/

.pic-list { -moz-column-count:3; -moz-column-gap:10px; -webkit-column-count:3; -webkit-column-gap:10px; column-count:3; column-gap:10px; width:100%; margin:0 auto; }
  .pic-list .item { width:100%; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; padding: 0; margin: 0;}
  .pic-list .show_pic { height:auto; padding:0;}

  .pic-list .item img{max-width: 100%;}

  @media screen and (max-width: 600px) {

  	.pic-list {-moz-column-count:2;-moz-column-gap:10px;-webkit-column-count:2;-webkit-column-gap:10px;column-count:2;column-gap:10px;}

  }


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/* contact */
.contact_page .main_part{ max-width: 100%;}
.contact_page #content{
    background-image: url(https://pic03.eapple.com.tw/theoneskincares/s-bg.jpg);
    background-position: bottom;
}
.contact_content{  font-family: "Noto Serif TC","Playfair Display", serif; max-width: 1400px;}
.contact_editbox{ padding: 0px 0px;}

/*整體設定*/
.blank_letter{font-family: "Noto Serif TC", sans-serif;color: #393939;font-size: 24px;padding-top: 0;font-weight: 500;font-size: 28px;letter-spacing: 3px;}
.contact_content .information_right {width: calc(100% - 310px);padding-left: 50px;}
/*表格區塊*/
.TEL:before, .TEL2:before, .PHONE:before, .FAX:before, .TAXID:before, .MAIL:before, .ADD:before, .ADD2:before{ color: #ba855d; width: 52px;}
.MAIL:before{ content: "Email";}
.ADD2:before {content: "營業時間"; }
.TEL2:before{ content: "LINE ID";}
.list_before.info li:nth-child(3) { display: none;}
button, input, optgroup, select, textarea{outline: none;}
input[type="checkbox"], input[type="radio"] {margin: 5px 5px 5px 10px;}
input[type="checkbox"]:nth-child(1), input[type="radio"]:nth-child(1) {margin: 5px 5px 5px 0px;}
.list_before.info li {font-weight: 400; padding-left: 60px;}
.form select {background: transparent;color: #444;border: none;border-bottom: 1px solid #aaa;width: 100%;}
.form select option{background: #eee;}
/*表單*/
.contact_form {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 15px 0;}
.contact_form li {width: 48%;padding-left: 0;padding: 15px 0;}
.contact_form li input.noborder {padding-left: 10px;background: #fff;border: none;border-bottom: 1px solid #eee;}
.contact_form li textarea.noborder{border: 1px solid #eee;padding-left: 10px;background: #fff;}
.contact_form li.last{width: 100%;}
.contact_form li.last cite {margin-left: 10px;background: #d69a6a;color: #fff;}
.contact_form li.last blockquote, .contact_form li.last cite {border: 1px #d69a6a solid;width: 130px;}
.contact_form li.last blockquote input {color: #d69a6a;font-size: 14px;font-weight: 300;}
.contact_form li.last blockquote:hover input, .contact_form li.last cite:hover input {letter-spacing: 3px;}
.contact_form li.last blockquote input {color: #d69a6a!important;font-weight: 300;font-size: 14px;}
.contact_form li .form__label{font-weight: 300;color: #000;width: 100%;text-align: left;margin-left: 0;margin-bottom: 5px;}
.contact_form li .form__insert{color: #444;width: 100%;}
.noborder {padding: 10px;}


@media screen and (max-width: 768px) {
	/*整體設定*/
	.blank_letter{padding-top: 0;}
	.blank_letter.f{margin-top: 50px;}
	/*資訊區塊*/
	.list_before{margin-top: 10px;}
	/*表格區塊*/
	.contact_content .information_right {width: 100%;padding-left: 10px;}
	.contact_form li input.noborder{border-radius: 0;}
}
@media screen and (max-width: 600px){
	.contact_content{padding: 0;}
}
@media screen and (max-width: 450px){
	.contact_form li{width: 100%;}
	.blank_letter{padding-top: 0;font-size: 18px;}
	.blank_letter.f{margin-top: 50px;}

}
@media screen and (max-width:313px) {
    .contact_form li.last{ display: flex;}
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

@media screen and (max-width: 1366px){
    #to_top { bottom:60px;right: 6px;}
}
@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
#bottom_menu {display: block; }
.footer.with_shopping_mode { padding:30px 0 70px; }

}

@media screen and (max-width: 600px) { 
}