@charset "utf-8";

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

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

*/


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


/*上方選單解除滑動固定
.header_area.sticky { position:relative;}
*/


/*上方選單右邊設定 臉書/LINE/電話/信箱
.tp_links a:before {寬高大小設定}
.tp_links a.me_tp_fb {}
.tp_links a.me_tp_fb:before {背景換圖/建議.SVG}
.tp_links a.me_tp_line {}
.tp_links a.me_tp_line:before {背景換圖/建議.SVG}
.tp_links a.me_tp_call {}
.tp_links a.me_tp_call:before {背景換圖/建議.SVG}
.tp_links a.me_tp_mail {}
.tp_links a.me_tp_mail:before {背景換圖/建議.SVG}
*/


/*電腦LOGO
.nav-brand {}
*/

/*手機LOGO
.nav-brand-m {}
*/


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


/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { position:relative; 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;}
}


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

/*基本設定*/
.page {  margin: 0px;}
.pageIndex .main_part {  border-top: 0px solid #ccc;}
.main_header_area .container {  max-width: 1400px;}
.main_part {        padding: 25px;    }

/*服務項目-下拉*/
.other_select_page .promotion_title { display: none;}
.other_select_page .clearfix {  display: none;}


/*中間小標刪除*/
.path { display:none;}


/*header最右側icon*/
.nav-menu>li:last-child {display:none;}
.tp_links a {  display: none;}

/*網站按鈕*/
.animated-arrow {  background:#c78acf; border-radius: 30px;}

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

/*大圖*/
.pageIndex .swiper-slide {position: relative;}/*因為偽元素，所以要加的*/
.swiper-slide:before ,.swiper-slide:after { content: ""; position: absolute;  z-index: 999; pointer-events:none;}/*before+after依樣要寫的內容拆出來寫一起，要寫在個別下方也可以*/
/*第一張大圖的偽元素*/
.pageIndex .swiper-slide:nth-child(1):before {
  background: url(https://pic03.eapple.com.tw/yulay/w-1.png);
  background-size: contain;
  background-repeat: no-repeat;
  top: 34%;
  left: 43%;
  width: 100% !important;
  height: 0 !important;
  background-position: left;
  padding-bottom: calc(100% / 2* 0.1);
}

.pageIndex .swiper-slide:nth-child(1):after {
  background: url(https://pic03.eapple.com.tw/yulay/w-2.png);
  background-size: contain;
  background-repeat: no-repeat;
  top: 51%;
  left: 44%;
  width: 100%;
  height: 0 !important;
  background-position: left;
  padding-bottom: calc(100% / 3* 0.11);
}

.pageIndex .swiper-slide.swiper-slide-active:nth-child(1):before { animation: slide-left  1s 0.4s both;}
.pageIndex .swiper-slide.swiper-slide-active:nth-child(1):after  { animation: slide-bottom  1s 0.9s both;}

/*文字出現特效*/
@keyframes slide-left {
0% {-webkit-transform: translateX(-10%);  /* 一開始的位置 在X-100(最下方)*/
          transform: translateX(-10%);
          opacity:0;/*透明度0*/}
100% {-webkit-transform: translateX(0);/* 跑到最後終止的位置 在X-0(最上方)*/
          transform: translateX(0);
          opacity:1;/*透明度顯示*/}
}
@keyframes slide-right {
  0% {-webkit-transform: translateX(10%);  /* 一開始的位置 在Y-100(最下方)*/
            transform: translateX(10%);
            opacity:0;/*透明度0*/}
  100% {-webkit-transform: translateX(0);/* 跑到最後終止的位置 在Y-0(最上方)*/
            transform: translateX(0);
            opacity:1;/*透明度顯示*/}
}
@keyframes slide-top {
  0% {-webkit-transform: translateY(-20%);  /* 一開始的位置 在Y-100(最下方)*/
            transform: translateY(-20%);
            opacity:0;/*透明度0*/}
  100% {-webkit-transform: translateY(0);/* 跑到最後終止的位置 在Y-0(最上方)*/
            transform: translateY(0);
            opacity:1;/*透明度顯示*/}
}
@keyframes slide-bottom {
  0% {-webkit-transform: translateY(10%);  /* 一開始的位置 在Y-100(最下方)*/
            transform: translateY(10%);
            opacity:0;/*透明度0*/}
  100% {-webkit-transform: translateY(0);/* 跑到最後終止的位置 在Y-0(最上方)*/
            transform: translateY(0);
            opacity:1;/*透明度顯示*/}
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*header*/
.pageIndex .header_area {   width: 100%;}
.main_header_area {   background: #ffffff;   box-shadow: 1px 1px 10px rgb(0 0 0 / 30%);}
.navigation {    padding: 0px 0 0px 300px;}    
.me_tp_features {    margin-bottom: 0px;  padding: 10px 0px;}

/*LOGO*/
.nav-header {  top: 0px;}
.nav-brand {    width: 268px;}
.nav-brand img {   max-width: 100%;}

/*選單*/
.stellarnav li {    letter-spacing: 1px;    margin: 0px 3px 0px 0px;  }
.stellarnav > ul > li:hover:after {
    height: 3px;
    width: 82%;
}
.stellarnav > ul > li > a {
    text-transform: uppercase;
    color: #6e6973;
    padding: 0px 0px 0px 40px;
    letter-spacing: 0.5px;
    font-size: 16px;
    vertical-align: middle;
    margin:  0px;
    height: 46px;
    text-align: center;
    line-height: normal;
}
.stellarnav > ul > li > a b {
    height: 100%;
}
.stellarnav > ul > li > a:hover {    
    color:#c78acf;
}
.stellarnav li.has-sub > a:after { 
    display: none;
}  

@media screen and (max-width: 1024px) {
.navigation {  padding: 0px 0 0px 0px;}
.me_tp_features { margin: 0px 0;}
.stellarnav > ul > li > a {    padding: 0px 20px 0px 20px; height: 40px;}
}

@media screen and (max-width: 768px) {
    .stellarnav .menu-toggle:after {color: #5c5c5c;}
    .stellarnav .menu-toggle span.bars span {  background: #5c5c5c;}
    .stellarnav .menu-toggle, .stellarnav .call-btn-mobile, .stellarnav .location-btn-mobile, .stellarnav .close-menu { padding: 27px 30px;}
    .stellarnav.mobile > ul > li { border-bottom: 1px #d9d9d9 solid;  }
    .stellarnav.mobile > ul > li > a {  color: #060606;}
    .stellarnav.mobile li.open {  background: #c78acf;}
    .stellarnav > ul > li:after {display: none;}
    .me_tp_features { margin: 0% 0; padding: 0%;}
    .nav-brand {   width: 210px;   }
}

@media screen and (max-width: 425px) {
    .stellarnav .menu-toggle, .stellarnav .call-btn-mobile, .stellarnav .location-btn-mobile, .stellarnav .close-menu { padding: 30px 10px;}
    .nav-brand img {   padding-top: 7px;}
}

/*下拉選單*/
.stellarnav li li:hover {        background:#c78acf;}
.stellarnav li a:hover {    color: #ffffff;}
.stellarnav li li.has-sub > a:after {   margin-left: 70px;    border-left: 6px solid #fdfdfd;}
.stellarnav li.drop-left ul ul {  left: 160px;  right: auto;}
.stellarnav > ul > li.drop-left > ul {   right: -33px;}

@media screen and (max-width: 768px) {
    .stellarnav li.drop-left ul ul {  left: 0px;}
    .stellarnav > ul > li.drop-left > ul {   right: 0px;}
}

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


/*內頁BANNER 設定*/
.banner { background: url(https://pic03.eapple.com.tw/yulay/bn.jpg)center top;     padding: 135px 0;     letter-spacing: 10px;}
.banner h5 { color: #c78acf;}

.services_page .banner.banB {display: none;}
.other_page .banner.banB {display: none;}
.other_select_page .banA {display: none;}
.banner.banC {}
.banner.banE {}
.banner.banF {}
.banner.banblog {}

/*首頁文章*/
/*.module_i_news li:nth-child(n+4) {display: none;}*/

@media screen and (max-width: 1024px) {
    .banner { font-size: 35px;}
}
@media screen and (max-width: 768px) {
    .banner { padding: 65px 0;}
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*footer*/
.footer {    background: #ffffff; }
.footer_logo { max-width: 100%;} 
.footer_logo img {  max-width: 100%;}
.footer_info {      padding: 0; }
.footer_info ul{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}
.footer_info li {    
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    flex-wrap: wrap;
}
.footer_info li p {    width: 320px;}
.footer_info li:nth-child(1) {    padding: 5px 6px 5px 19px;}
.footer_info li:nth-child(2) {   
    display: flex;
    justify-content: flex-end;
    flex-direction: row;}
.footer_info li h6{
    font-size: 20px;
    line-height: 130%;
    margin-bottom: 10px;
}
.footer_menu {    width: 50%;}
.footer_menu a {
    letter-spacing: 1px;
    border: 1px #707070 solid;
    color: #707070;
    background: none ;
    padding: 8px 13px;
    text-align: center;
    width: 130px;
}
.footer_menu a:hover {
    border: 1px #c78acf solid;
    color: #c78acf ;
    background: none ;
}
.footer_info li p.add2:before {
    content: '信箱：';
}
p.tel {    order: 1;}
p.mail {    order: 2;}
p.add {    order: 4;}
p.add2 {    order: 3;}

@media screen and (max-width: 1024px) {
    .footer_menu {    width: 48%;  }
    .footer_logo {  margin-bottom: 0px;}
    .footer_info li p {  width: 100%;}
    .footer_info li:nth-child(1) {   width: 50%;}
}

@media screen and (max-width: 893px) {
    .footer_menu {    width: 58%;  }
}


@media screen and (max-width: 768px){
    .footer_logo img {   max-width: 83%; }
    .footer_info ul {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: unset;
    }
    .footer_info li:nth-child(1) {   width: 100%;}
    .footer_info li:nth-child(2) {  justify-content: center;    }
    .footer_menu {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media screen and (max-width: 375px){
.footer_menu {  width: 93%;}
}

/*選單按鈕隱藏選單*/
.footer_menu a:nth-of-type(1)  {display: none;}

/*隱藏footer右邊按鈕*/
.box_link a { display: none;}

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

/*促銷方案*/
.promotions_page .main_part {    display: flex;    flex-direction: column;}
.promotion_title * {  color: #c78acf;}
.promotion_title { text-align: center;}
.promotion_title em {  border: 1px #c78acf dashed;}
.promotion_title span { border: 1px #c78acf dashed;}
.promotion_title h2 {  display: block;  font-size: 30px;}
.other_promotion {    width: 100%;}
.other_promotion li a {  border: none; border-top: 1px solid #e5e5e5;   }
.other_promotion li a:hover {  background: none;}
.other_promotion li a:before { border: 2px #c78acf solid; border-bottom: none;  border-right: none; border-left: none;}
.other_promotion li a:after { display: none;}
.animated15 {    order: 2;}

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


/*文章設定*/
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category {
    background:#999999 !important;
}
.blog_le .accordion {
    border: none;
    border-radius:0px;
    border-top:1px #ccc solid;;
}
.blog_le .accordion li .link:last-child {
    border-bottom: 1px solid #CCC;
}
.blog_box {
    padding: 30px 7px 7px 7px;
}
.blog_list_le {
    box-shadow: 0px 0px 5px #ccc; 
    width: 100%;
}
.blog_list_ri {
    padding: 7px 0px;
    width: 96%;
}
.subbox_item { 
    width:32%;
    padding: 0px 0;
    margin-left: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}
.subbox_item a {
    overflow: hidden;
}
.submenu a {
    background: #fff;
}
.submenu a:hover {
    background:#c78acf;
}
.subbox_item a:before {
    transform: translate(-50%,-50%);
    left: 50%;
    right: 0;
    bottom: -17%;
    letter-spacing: 2px;
    opacity: 0;
    display: block;
    color: #fff;
    background: #c78acf;
    border-radius: 15px 15px 0 0;
    width: 100%;
    padding: 8px 0;
    text-align: center;
}
.subbox_item a:hover:before {
    bottom: -5%;
}
.subbox_item a:after {
    display: none;
}

/*文章內頁*/
.blog_back a.article_btn_back {
    background:#a5a5a5;
}
.blog_back a.article_btn_next {
    background: #c78acf;
}
.blog_back a.article_btn_prev {
    background: #c78acf;
}
@media screen and (max-width: 768px) {
    .subbox_item {  width: 48%;}
    .subbox_item a:before {display: none;}
}
@media screen and (max-width: 375px) {
    .subbox_item {  width: 46%;}
}

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

/*相簿*/
.overlay {
    background: rgb(0 0 0 / 25%);
}
.show-list .show_pic {
    display: block;
    position: relative;
    overflow: hidden;
    text-align: center;
    line-height: 0;
    height: 100%;
    padding-bottom: 0;

    box-shadow: 0px 0px 10px #aaa;}
.show-list .show_name {
    text-align: center;
    margin-top: 15px;}
.show-list .item:hover .show_name {    color:#c78acf;}
.other_album_choice li {
    background:#c78acf;
    border-radius: 10px;
    font-size: 13px;}
.other_album_choice li .fa {
    height: 12px;
    vertical-align: baseline;}
.fa-2x {    font-size: 1em;}

@media screen and (max-width: 748px){
    .show-list .item {    width: unset;}
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*購物車*/
.product_page .main_part { max-width:1400px;}
.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%;}
.products-list .item {    width: 25%; padding: 10px 15px;}
.products-list .item a {    display: contents;}
.products-list .name {  margin-top: 4px;  text-align: center; height: 24px;}
.products-list .price b {  color: #c78acf;}
.products-list .pic {padding-bottom: 0;   height: 100%;   overflow: hidden; }
.products-list .pic img {transform: scale(1);transition: all 0.3s;}
.products-list .pic:hover img {transition: all 0.3s; transform: scale(1.1);}
.products-list .more {    border: 1px solid #b0b0b3;    color: #b0b0b3;}
.products-list a:hover .more {   background: #b0b0b3;    border-color: #b0b0b3;   color: #fff;}

.product-layer-two li {  margin: 10px 5px 0 0;}
.product-layer-two li.active li a {  background: none;}
.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: none; padding:5px 10px; transition:all ease .3s; border:none;}
.product-layer-two li li a{ padding:0;}
.product-layer-two li li:hover > a { background:#fff; color:#c78acf;}

.product-layer-two > li { width:100%; max-width:100%; padding:0; text-align:left; border-bottom:1px dotted #313131;}
.product-layer-two li a {    border: unset;text-align: center;  background:unset;  color: #313131;    transition: all 0.3s; padding: 7px 0px;}
.product-layer-two li a:hover {transform: unset;   transition:unset; background: #fff; color: #c78acf;}
.product-layer-two li.active a {background: #c78acf;  color: #ffffff; border: none;}
.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:#c78acf;}

.product_info_page .half_box { width: 100%; float: none; padding-right: 0;}
.product_info_page .half_box li.btn_blankTop {margin-top: 30px;    display: flex;    justify-content: flex-end;}
.product_info_page .half_box li.btn_blankTop input { width: calc(30% - 10px); background-image: none; padding: 0; text-align: center;}

.bx-wrapper .bx-viewport {
    border: unset;
    box-shadow: 0px 0px 10px #aaa;
    background: #fff;}
.bx-wrapper img {    margin: 0 auto;}
.product_pic #bx-pager {color: #b0b0b3;}
.product_pic #bx-pager .block {    background: #b0b0b3;}
.product_main .prod h3 {
    display: inline-block;
    padding: 8px 20px 10px;
    background: #b0b0b3;
    color: #fff;
    border-radius: 30px;
    margin-bottom: 15px;}
.qaform {    margin: 0px auto;}

/*詳細資訊按鈕*/
a:active, a:hover {    background: none;  }
.products-list .item a:hover .more {background: #c78acf; border-color: #c78acf;}
.sidebarBtn {  border: none;}

/*購物車所有按鈕*/
.inquiry_a1 {    background: #818181;}
.inquiry_a2 {    background: #1f1f1f;}
.inquiry_a3 {  background: #cc90e4;}
.lastaction { color: #fff;  background-color: #333;}
.inquiry_a1:hover, .inquiry_a2:hover, .inquiry_a3:hover {   background: #747474;}
.nextaction {    background-color: #b0b0b3;}
.lastPage {    background: #000;}
.rewrite_simple {    background: #0c0c0c;}
.rewrite_simple:hover {    background: #6e6e6e;}
.send_simple {    background: #c78acf;}
.send_simple:hover{    background: #6e6e6e;}

/*相關推薦*/
.related_list li {    width: 20%;    padding: 7px;}
.related_list li a {    background: unset;transition: all 0.3s;}
.related_list li a:hover { transform: translateY(-10px);   transition: all 0.3s;}

@media screen and (max-width: 1200px) {
.products-list .item { width: calc(100% / 3);}
.mobile_product_name {    text-align: center; margin-bottom: 30px;}
}
@media screen and (max-width: 980px) {
.products-list .item { width: 50%;}
}
@media screen and (max-width: 768px) {
.main_part {   padding: 10px;  }
.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: 4;}
.product_page ul.products-list { order: 2;}
.product_page ul.page { order: 3;}
.product_page ul.product-layer-two { order: 1;}
}
@media screen and (max-width: 600px) {
.products-list .item { width: 100%; max-width: 350px;margin: 20px auto 50px; display: block;}
.related_list li {    width: 45%;}
}



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

/*聯絡我們*/
.contact_page .contact_content {padding: 0;}
.contact_page .contact_content > form { width: 100%; padding: 0; display: flex; flex-direction: column-reverse; }
.contact_content{  margin: auto;  padding: 20px 10px;}
.blank_letter {color: #252525;}
.contact_content .information_left {  width:100%;}
.contact_content .information_right {    width:100%; padding: 0% 0%; }
.list_before.info li {  
    display: inline-block;
    width: 33%;    
    padding-left: 36px;    
    letter-spacing: 1px;}
.list_before.info li::before {    
    letter-spacing: 1px;
    color: #c78acf;
    font-weight: bold;}
.contact_form li.last cite {  background: #c78acf;}
.contact_form li.last blockquote, .contact_form li.last cite { border: 1px #c78acf solid;}
.contact_form li.last blockquote {color: #c78acf;}
.contact_form li {padding: 10px 0;}
.contact_form li .form__label {  width: 90px;    text-align: right;   margin-left: 0;    letter-spacing: 0.5px; color:#4e4e4e;}
.contact_form li .form__insert {  width: 85%;}
input[type="checkbox"], input[type="radio"] {  margin: 3px 5px 5px 10px;  vertical-align: middle;}
.form select {    margin-left: 10px;background-color: #ffffff;    border: 1px solid #666;    color: #000;}

.noborder {padding: 5px 5px;}
.contact_le_map a:hover {background: #9b9b9b;}

.ADD2:before {    content: "信箱";}

@media screen and (max-width: 1024px) {
.contact_form li .form__label {  width: 85px; text-align: left;}
.contact_form li {   display: flex;  flex-direction: column;}
}

@media screen and (max-width: 825px) {
.list_before.info li {    width: 100%; }
}

@media screen and (max-width: 768px) {
    .contact_content .information_right {   padding: 0% 5%;  }
    .contact_form li.last {    display: block;}
}

@media screen and (max-width: 695px) {
.contact_form li .form__label {  text-align: left;  margin-bottom: 5px;}
}
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


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

/*手機版電話顏色
.footer_info li:nth-child(1) p, .footer_info li:nth-child(1) a {    color: #fff;}*/
}

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