@charset "utf-8";

@import url('../css/font-style.css');
@import url('../css/normal.css');


/*========================================== Wrapper ==================================================*/
.wrapper{
  width: 100%;
  max-width: 1600px;
  margin: 0 auto
}

.wrapper-1500{ max-width: 1500px }
.wrapper-1400{ max-width: 1400px }
.wrapper-1300{ max-width: 1300px }
.wrapper-1200{ max-width: 1200px }
.wrapper-1000{ max-width: 1000px }

/*== Header ==*/
.navbar{ min-height: auto }

.navbar-inverse,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus{
  background-color: #fff;
}

.navbar-inverse,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-collapse{
  border:none;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #000;
}

.navbar-header {
    position: relative;
    display: flex;
    float: none;
    width: 100%;
    justify-content: center;
    flex-flow: column wrap;
    align-items: center;
    margin-bottom: 15px;
}

.navbar-brand {
  text-align: center;
  padding: 0;
}

.navbar-brand img {
    display: inline-block;
    /*max-width: 10em;*/
}

.navbar{ border-radius: 0; margin-bottom: 0 }

.header_link > li > a{
  font-size: 1.1vw;
  color: #333333 !important;
}

.header_link > li > a:hover,
.header_link > li > a.active{
  color: #ec4747 !important;
}

.header_btn > li > a{ position: relative; }
.header_btn > li > a .badge{ position: relative; top: -5px; right: 15px; border-radius: 50%; background: #bc040f; min-width: 0; width: 20px; height: 20px; padding:3px 0; font-family: Arial; line-height: 1.3 }

.select_item{
  float: left;
  width: 100%; 
  background: #242424;
  padding: 10px 0;
  padding-right: 6vw;
}

.select_item .nice-select { background: transparent; }
.select_item .nice-select .current{ color: #d7fbf6 }

.header-dropdown-menu{
  background: #E9C998; 
  /*border-top: #4c8886 3px solid;
  border-bottom: #4c8886 3px solid;*/
  border: none;
  padding: 5px 15px;
}
/*.header-dropdown-menu > li{ border-bottom: #67656a 1px solid; }
.header-dropdown-menu > li:last-child{border-bottom: none;}*/
.header-dropdown-menu > li{ padding: 10px 0; }
.header-dropdown-menu > li > a,
.header-dropdown-menu > li > a:hover,
.header-dropdown-menu > li > a:focus{
  color: #fff;
  font-size: 15px;
  background: transparent;
  
  line-height: 1 !important;
  padding: 0;
}

.header-dropdown-menu > li > a:hover,
.header-dropdown-menu > li > a.active{
  color:#000;
}

.top-menu{ position: absolute; bottom: 5px; right: 10px }
.top-menu ul li i{ font-size: 1.8em; }
.top-menu .badge{ margin: -5px 0 0 -15px }

.badge{ width: 20px; height: 20px; line-height: 20px; border-radius: 20px; text-align: center; font-size: .5em; padding: 0; background-color: #f00 }

/*== Banner ==*/
  .index_carousel{
    position: relative;
    z-index: 1;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .index_carousel img{
    width: 100% !important;
  }

  .carousel-control.left,
  .carousel-control.right{
    background-image: none;
    z-index: 3;
  }

  .carousel-indicators li{ background-color: #fff; border:none; margin: 1px 4px }
  .carousel-indicators .active{ background-color: #00A0EA }

  .carousel-inner>.item{ text-align: center; }
  .carousel-inner>.item>img, .carousel-inner>.item>a>img{ display: inline-block; }

  .index_carousel .embed-responsive-4by3{ padding-bottom: 35.2% }
  .index_carousel .carousel-control{ background-image:none !important; height: 15%; top:50%; transform: translateY(-50%); }

  @media screen and (min-width:1200px){ 
    .index_carousel{
      padding-left: 2em;
      padding-right: 2em;
    }

    .index_carousel .embed-responsive-4by3 {
      padding-bottom: 56.35%;
    }
  }

    /*== Animation ==*/
    .tag-animation { display: block; max-width: 20%; position: absolute; top: 0; right: 10vw; }

    @media screen and (min-width:1200px){

    }

    /*@media screen and (max-width:1000px){
      .index_carousel .carousel-inner>.item>img{ object-fit: cover; height: 200px; }
      .main_carousel .carousel-inner>.item>img{ object-position: 80% !important }
    }

    @media screen and (max-width:450px){
      .index_carousel .carousel-inner>.item>img { object-position: 59%; }
      .main_carousel .carousel-inner>.item>img { height: 150px; }
    }*/

footer{
  float: left;
  width: 100%;
  overflow: hidden;
  padding:20px;
  padding-top: 25px;
  font-size: 16px;
  height: auto !important;
  background:#343434;
  color: rgba(255, 255, 255, .58);
}

footer *{ line-height: 1.5; font-weight: 100; font-size: 14px; }

.footer-icon li a:hover img{
  -webkit-filter:opacity(.3);
  -moz-filter:opacity(.3);
  -ms-filter:opacity(.3);
  -o-filter:opacity(.3);
  filter:opacity(.3);
}

.footer-icon li span{ display: inline-block; padding-left: 2px; }
  
  @media screen and (max-width:767px){
   
  }

/*== 首頁圖 ==*/
  .index-intro-row{ flex-flow:row wrap; }
  .index-intro-row .flex-content{ display: inline-flex; align-items: center; justify-content: center; min-height:400px; background-position: center; padding: 0; } 

  .index-intro-row .index-intro-text{ color: #fff; text-align: center; font-size: 20px; line-height: 1.2 }
  .index-intro-row .index-intro-text .title{ font-size: 3em; font-family: 'Noto Sans TC', sans-serif;}

  .index-intro-row .style_hair .index-intro-text .title,
  .index-intro-row .style_beauty .index-intro-text .title{ letter-spacing: 3px }

  .index-intro-row .style_hair .index-intro-text .text,
  .index-intro-row .style_coffee .index-intro-text{ opacity: .5; }

  .index-intro-row .style_beauty .index-intro-text{ display: inline-flex; margin-left: auto; margin-right: 1.5vw; margin-top: -.5em; }
  .index-intro-row .style_beauty .index-intro-text * { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; }
  .index-intro-row .style_beauty .index-intro-text .title{ font-size: 3em; color: #918fa9; font-family: '新細明體'; }
  .index-intro-row .style_beauty .index-intro-text .text{ font-size: 1.7em; color: #bbb4b1; font-family: 'Monotype Corsiva', sans-serif; padding-top: .2em; }

  .index-intro-row .style_nail .flex-content{ background-color: #c03131 }
  .index-intro-row .style_nail .index-intro-text .title{ font-size: 1em; opacity: .7; }
  .index-intro-row .style_nail .index-intro-text .text{ font-size: 2em; }

  .index-intro-row .style_coffee .index-intro-text{ opacity: .7; letter-spacing: 5px; }
  .index-intro-row .style_coffee .index-intro-text .title{ font-size: 2.8em; font-family: 'Adamina', serif; font-weight: 100; text-transform: uppercase; opacity: .3; }
  .index-intro-row .style_coffee .index-intro-text .text{ font-size: 2em; }

  .index-intro-row{
    padding-left: 1rem; padding-right: 1rem; 
    gap: 0.5em;
  }

  @media screen and (min-width:1001px){
    .index-intro-row .style_beauty .index-intro-text{align-items: flex-start;}

    .index-intro-row{ padding-left: 2em; padding-right: 2em; margin-top: 0.5em; gap: 0.5em; }
    .index-intro-row .flex-content{
      flex: 0 0 calc(50% - 0.5em);
    }
  }

  @media screen and (min-width:1001px) and (max-width:1600px) {
    .index-intro-row {
      padding-right: 1.5em;
    }
  }


  @media screen and (max-width:1000px){
    
    .index-intro-row{ padding-top: 0.5em }

    .index-intro-row,
    .index-intro-row .flex-row{ flex-direction: column; }

    .index-intro-row .flex-content{ /*min-height: 150px*/ min-height: 0; height: 0; padding: 5em 0; }

    .index-intro-row .index-intro-text{ font-size: 16px; }
    .index-intro-row .style_nail .flex-row{ flex-direction: row }
    .style_beauty .index-intro-text .title{ letter-spacing: 0 }
    .index-intro-row .style_beauty .index-intro-text{ flex-direction: column; }
    .index-intro-row .style_beauty .index-intro-text * { writing-mode: unset; -webkit-writing-mode: unset; }
    .index-intro-row .style_beauty .index-intro-text .title{ font-family: 'Noto Serif TC', serif; }
    .index-intro-row .style_beauty .index-intro-text .text{ font-family: 'Charm', cursive; font-size: 2em; }
  }

/*== 最新消息 ==*/
  .index-news-list{
    /* background-image: linear-gradient(90deg, #fff 50%, #f6f6f6 0%);
    background-image: -moz-linear-gradient(-30deg, #fff 50%, #f6f6f6 0%);
    background-image: -ms-linear-gradient(to right, #fff 50%, #f6f6f6 0%);
    background-image: -o-linear-gradient(90deg, #fff 50%, #f6f6f6 0%); */
  }
  .index-news-list .flex-content{ flex:1; }
  .index-news-list .flex-content:first-child{  }
  .index-news-list .flex-content h2{  }
  .index-news-list ul{ padding: 2em 6vw }
  .index-news-list ul li{ font-size: 17px; color: #5f5e5e; padding: 5px 0; }
  .index-news-list ul li a,
  .index-news-list ul li time{ padding: 0 4px }

    @media screen and (min-width:1001px){
      .index-news-list{
        padding-left: 2em;
        padding-right: 2em; 
      }

      .index-news-list .flex-content{
        padding-right: 0.875em;
        padding-left: 0.5em;
      }

    }

    @media screen and (max-width:1000px){
      .index-news-list{ background-image: none; }
      .index-news-list ul{ padding-left: 3vw; padding-right: 3vw; }
    }

/*== 首頁 最新產品 ==*/

/*== 首頁活動訊息 ==*/
  .index-act-flex-row .flex-content{ padding: 0; }
  .index-act-flex-row .flex-content:nth-of-type(1) {
    /*background-color: #d47e56;*/
    background-color: #4C4847;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
  }
  .index-act-flex-row{ font-size: 16px; color: #fff; line-height: 1.5 }
  .index-act-flex-row small,
  .index-act-flex-row h1,
  .index-act-flex-row time,
  .index-act-flex-row p{ margin: 10px 0; text-align: center; }

  .index-act-flex-row h1{ font-size: 2em; }
  .index-act-flex-row small{ font-family: 'Libre Baskerville', serif; font-size: 1em; }

  .index-act-flex-row .btn{ border-radius: 20px; background-color: transparent; padding-left: 2em; padding-right: 2em; color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .8) }
  .index-act-flex-row .btn:hover{ background-color: rgba(255, 255, 255, .2) }

    @media screen and (min-width:1200px){
      .index-act-flex-row .flex-content{ height: 390px; }
    }

    @media screen and (max-width:767px){
      .index-act-flex-row{ font-size: 14px; display: block !important; }
      .index-act-flex-row .flex-content img{ 
        /*height: 200px;
        width: 100%;
        object-fit: cover;
        object-position: center;*/
      }
      .index-act-flex-row .flex-content:nth-of-type(1){ order:1; }
    }

/*== 首頁大事紀 ==*/
  .index-event{
    width: 100%;
    height: 60%;
    position: relative;
    left: 0;
    top: 0;
    margin: auto;
    text-align:center;
  }

  .index-event:before{
    content:'';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
  }

  .index-event .flex-1{
    width: 100%;
    max-width: 1000px;
    margin: auto;
  }
  
  @media screen and (max-width:767px){
    .index-event{ height: calc(60% - 3em) }
  }

/*== 內容區 ==*/
  .normal-content{ display: block; width: 100%; padding: 1em; }
    
    @media screen and (max-width:1500px){
      .normal-content { padding:2% 0; }
    }

    @media screen and (max-width:1000px){
      .normal-content{ padding:3vw !important; overflow: hidden; }
    }

  .flex-row{ display: flex; flex-wrap: wrap; }
  .flex-row .col-content{ flex:1; padding: 2%; }


/*== 內頁上方Menu ==*/
  .menu_wrap{
    width: 100%;
    height: auto;
    min-height: 18.5em;
    position: relative;
    left: 0;
    top: 0;
    margin: auto;
    text-align:center;
  }

  .menu_wrap:before{
    content:'';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
  }

  .menu_wrap .menu_item {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;

    color: #fff
  }
  .menu_wrap .menu_item h2{ width: 100%; }
  .menu_wrap .menu_item .menu-item-inline{ margin: 1.5em auto; padding-left: 3em; }
  .menu_wrap .menu_item .menu-item-inline ul{ width: 100%; justify-content: center; }
  .menu_wrap .menu_item .menu-item-inline li{ flex:none; /*position: relative;*/ }
  .menu_wrap .menu_item .menu-item-inline li,
  .menu_wrap .menu_item .menu-item-inline li a{ padding: 0; }
  
  .menu_wrap .menu_item .menu-item-inline li a {
    position: relative;
    z-index: 1;
    line-height: 1;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #ccc;
  }

  .menu_wrap .menu_item .menu-item-inline li:last-child a{
    border-color: transparent;
  }

  .menu_wrap .menu_item .menu-item-inline li a::before {
    content: '';
    display: block;
    width: 100%;
    height: 200%;
    background-color: #000;
    position: absolute;
    z-index: -1;
    top: -50%;
    left: calc(50% - 10px);
    transform: translateX(-50%);
    opacity: 0;
    transition: .3s;
  }

  .menu_wrap .menu_item .menu-item-inline li a::after{
    content: '';
    width: 0;
    height: 0;
    border-top: 10px #000 solid;
    border-bottom: 10px transparent  solid; 
    border-left: 10px transparent  solid;
    border-right: 10px transparent  solid;

    position: absolute;
    bottom: -28px;
    left: 50%;
    margin-left: -20px;
    opacity: 0;
  }

  .menu_wrap .menu_item .menu-item-inline li a:hover::before,
  .menu_wrap .menu_item .menu-item-inline li a.active::before,
  .menu_wrap .menu_item .menu-item-inline li a:hover::after,
  .menu_wrap .menu_item .menu-item-inline li a.active::after{ opacity: 1; }

    /*== 第二層 ==*/
    .sub-menu-item-inline {
      width: 100%;
      position: absolute;
      left: 0;
      margin-top: 1em;
      background: #00000059;
    }

    .menu_wrap .menu_item .menu-item-inline li .sub-menu-item-inline>ul>li>a{ border-right: none; font-size: .9em; opacity: .8; }
    .menu_wrap .menu_item .menu-item-inline li .sub-menu-item-inline>ul>li>a:hover,
    .menu_wrap .menu_item .menu-item-inline li .sub-menu-item-inline>ul>li>a.active{ color: #EB8686 }

    .menu_wrap .menu_item .menu-item-inline li .sub-menu-item-inline>ul>li>a:hover::before,
    .menu_wrap .menu_item .menu-item-inline li .sub-menu-item-inline>ul>li>a.active::before,
    .menu_wrap .menu_item .menu-item-inline li .sub-menu-item-inline>ul>li>a:hover::after,
    .menu_wrap .menu_item .menu-item-inline li .sub-menu-item-inline>ul>li>a.active::after{ opacity: 0; }

    .menu_wrap .menu_item .menu-item-inline li .sub-menu-item-inline>ul>li>.sub-menu-item-inline {
      background: #2b2929;
      margin-top: .5em;
    }

    .menu_wrap .menu_item .menu-item-inline li .sub-menu-item-inline>ul>li>.sub-menu-item-inline>ul>li>a:hover,
    .menu_wrap .menu_item .menu-item-inline li .sub-menu-item-inline>ul>li>.sub-menu-item-inline>ul>li>a.active{
      color:#F3B90C;
    }

    /*== 購物車麵包屑 ==*/
    .menu-cart-inline{ width: 100%; margin: 0; padding-left: 0; }
    .menu-cart-inline ul {
        position: relative;
        max-width: 500px;
        margin: 0 auto;
    }

    .menu-cart-inline ul li {
        position: relative;
        float: left;
        width: 33%;
        z-index: 2;
    }

    .menu-cart-inline ul li::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 3px;
      background-color: #727272;
      top: 18px;
      left: calc(-50% + .85em);
      z-index: -1;
    }

    .menu-cart-inline ul li:first-child:after { content: none; }
    .menu-cart-inline ul li span.badge-checked{ background: #4f4f4f; display: inline-block }
    .menu-cart-inline ul li span.badge{
      width: 32px;
      height: 32px;
      line-height: 30px;
      color: #909091;
      font-size: 20px;
      background-color: #676767
    }

    @media screen and (max-width:1000px){
      .menu-cart-inline ul li span.badge-checked{ background: #fff; display: inline-block }
    }


/*== 路徑 ==*/
  .breadcrumb{ border-bottom: #EAEAEA 1px solid; margin-top: 10px; }
  .breadcrumb>li + li{ margin-left: 15px; }
  .breadcrumb>li + li>a{ border-left: #A2A1A2 1px solid; padding-left: 20px; }
  .breadcrumb>.active{ margin-left: 0; }
  .breadcrumb>li>a,
  .breadcrumb>.active{ font-size: 1.3em; }
  .breadcrumb>li+li:before{
    display: none;
    content: '│';
    font-size: 1.4em;
  }

  .breadcrumb>.active::before {
    content: ' 〉 ';
    font-size: 1.2em;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
    margin-top: -2.5px;
  }


/*== 品牌介紹 ==*/
  .about-section article{ display: flex; align-items: center; padding: 1em; }

  .about-content{
    clear: both;
    position: relative;
    z-index: 1;
    line-height: 1.3;
    font-size: 18px;
    width: 100%;
    min-height: 100%;
    max-width: 530px;
    height: 405px;
    font-family: 'Noto Sans TC', sans-serif; 
  }


  .about-content .small-title{ font-size: 1.3em; }
  .about-content .big_title{ font-size: 3em; font-family: 'Libre Baskerville', serif; }
  .about-content .text{ margin-top: 15px; padding: 2em; background-color: #fff; line-height: 2; font-weight: 400; }

  .about-image-1{ margin:0 -100px 0 0; }
  .about-image-2{}

  /*反向*/

  .about-section-inverse article .about-image-1 { order:1; margin:0 0 0 -80px; max-width: none }
  .about-section-inverse article .about-content { position: relative; flex: none; top: 130px;max-width: 700px; width: 100%; }
  .about-section-inverse article .about-content .text { text-align: left; }

  .about-section-inverse .about-section-left{ align-items: flex-end; }

  .about-section-inverse .about-section-left figure.about-section-beauty{min-height: calc(100vh - 22em); }
  .about-section-inverse .about-section-left figure.about-section-coffee{min-height: calc(100vh - 22em - 22em); }

  .about-section-inverse .about-section-left .about-content{top:50px; }

    @media screen and (min-width:1001px){
      .about-section{ margin: 3em auto; }
      
      .about-content .small-title{ color: rgba(255, 255, 255, .8);}
      .about-section-inverse article{ text-align: right; justify-content: flex-end; }
      .about-section-inverse .about-section-left figure{ position: relative; top:2px; right: 7em; }
    }

    @media screen and (max-width:1000px){
      .about-content .title,
      .about-content .big_title{ font-size: 2.5em; }

      .about-section article{ flex-direction: column; }
      .about-section article img{ margin: auto !important; max-width: 100% !important; }
      
      .about-content{ height: auto; padding-top: 1em; }
      .about-content .text{ padding: .1vw }

      .about-section-inverse article .about-image-1{ max-width: 100%; margin-top: 10px !important; }
      
      .about-section-inverse .about-section-left{ align-items: center; }
      .about-section-inverse .about-section-left .about-content{ top:0px; }
      .about-section-inverse .about-section-left figure.about-section-beauty{ min-height: auto }

      .about-section-inverse article img[src="images/about_philosophy03.jpg"]{ order:0; }

    }


/*== Masonry 列表 ==*/
  .news-row{
    width: 100%;
    max-width: 1250px;
    margin: auto;
    padding: 1em 0;
  }
  /*.cols {
    -moz-column-count:3;
    -moz-column-gap: 1%;
    -moz-column-width: 30%;

    -webkit-column-count:3;
    -webkit-column-gap: 1%;
    -webkit-column-width: 30%;

    column-count: 3;
    column-gap: 1%;
    column-width: 30%;
  }
  .box {
      display: inline-block;
      width: 100%;
  }*/

  .masonry .item,
  .masonry #sizer{
    width:  33.33333%;
  }
  .masonry .item .news_thumbnail{
    margin:5px;
  }

  .news_thumbnail{ position: relative; border:none; padding: 0;overflow: hidden; }
  .news_thumbnail figure{ text-align: center; }
  .news_thumbnail figure img{
    width: 100%;
    margin: auto;
  }

  .news_thumbnail .caption{ position: absolute; bottom: 0; width: 100%; padding: 1.5em 2.5em; background-color: rgba(234, 201, 152, .9); color: #fff }
  .news_thumbnail .caption *{ /*margin: 0; line-height: 2*/ line-height: 1.25; }
  .news_thumbnail .caption h3{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 0; }
    
    @media screen and (min-width:1001px){
        .thumbnail,
        .thumbnail figure img,
        .thumbnail .caption{
          transition:.5s; 
          overflow: hidden;
        }

        

        .news_thumbnail figure{
          /* height: 0;
          padding-bottom: 85%;
          margin-bottom: 0em; */
        }

        .news_thumbnail figure img{
          /* height: 29em;
          object-fit: cover;
          object-position: top; */

          /* position: absolute;
          top: 0;
          left: 0;
          max-height: 100%;
          width: auto;
          max-width: 100%;
          margin: auto;
          right: 0; */
        }

        .card_thumbnail figure{
          height: 0;
          padding-bottom: 85%;
          margin-bottom: 0em;
        }

        .card_thumbnail figure img{
          position: absolute;
          top: 0;
          left: 0;
          max-height: 100%;
          width: auto;
          max-width: 100%;
          margin: auto;
          right: 0;
        }

        .card_thumbnail.card_thumbnail_bd figure{
          padding-bottom: 74%;
        }
        
        .card_thumbnail.card_thumbnail_bd figure img{
          width: 100%;
        }

        .thumbnail:hover{
          box-shadow: 0 10px 30px 1px rgba(0,0,0,.3);
          transition: .5s .0s
        }

        .thumbnail:hover figure img{
          transform: scale(1.1);
          transition: .5s .2s
        }

        .news_thumbnail:hover .caption{
          background-color: rgba(104, 29, 57, .9);
          transition: .5s .25s
        }
    } 

    @media screen and (max-width:1000px){
      .cols{ column-count:2; column-width:50%;  }
      .news_thumbnail .caption{ position: static; padding: .8vw 1.2vw; }
      .news_thumbnail .caption *{ line-height: 1.5; font-size: 14px; }
      .news_thumbnail .caption h3{ font-size: 17px; }
    }

    @media screen and (max-width:450px){
      .masonry .item, .masonry #sizer{ width:  50%; }
    }



/*== 會員登入及註冊 ==*/
  .member-form{ margin-bottom: 1em; }

  .member-form .col-content,
  .member-form .contact-form{ padding:1em }
  
  .member-form .col-content + .col-content{ position: relative; border-left: 1px solid #eee; }
  .member-form .col-content + .col-content::before {
    content: 'or';
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    left: -25px;
    top: 50%;
    margin-top: -25px;
    background: #fff;
  }

  .member-form .contact-form .form-group small{ font-size: 1.3em; }

  .member-form-btn-group{ max-width: 480px; width: 100%; margin: 1vw auto; padding: 1vw; }
  .member-form-btn-group .btn-group a{ font-size: 18px; box-shadow: none; border:#ccc 1px solid; padding: 1.5em 1em; line-height: 0%; }
  .member-form-btn-group .btn-group a:hover,
  .member-form-btn-group .btn-group a.active{ color: #fff; background: #000; border-color: transparent; }

  .member-login-form{
    max-width: 800px;
    width: 100%;
    margin: 3vw auto;

  }

  .contact-form{
    /*background: #fff;
    box-shadow: 0 0 50px 5px rgba(0,0,0,.1);*/
    padding: 6% 8%;
    overflow: hidden;
    margin: 1vw;
  }

  .member-login-form h2{ margin-top: 10px; font-size: 4rem; }
  .member-login-form small{ display: block; margin-bottom: 1.5vw; font-size: 2.2rem; font-weight: 300; }

  .member-login-form .form-control{ line-height: 180%; height: auto; margin-bottom: 20px; background: #F3F3F3 }
  .member-login-form .checkbox_style { margin-top: 0; }
  .member-login-form .checkbox_style .checkbox_label{ padding-top: 0; padding-left: 0; margin-right: 4px; }
  .member-login-form .checkbox_style label::before{ margin-top: -6px; }

  .member-login-form .checkbox_style input[type="checkbox"]:checked+label::after { top: -1.5px; left: 4px; }

  .member-login-form .btn{ height: auto; background-color: #4E4E4E; border-color: #4E4E4E }

  .reserach_link li{}
  .reserach_link li:not(:last-child)::after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #A3A2A3;
    margin-left: 1.3em;
    margin-right: 1.3em;
  }
  .reserach_link li a { border-bottom: #A3A2A3 1px solid; }

  .member-login-form .form-title{ font-size: 1.2em; line-height: 2.8; }

  .btn-fb{
    background: #4067B3 !important;
    border-color: #4067B3 !important
  }

  .btn-fb span img {
    width: 25px;
    margin-right: 5px;
  }

    @media screen and (max-width:1000px){
      .member-form{ flex-direction: column; }
      .member-form .col-content + .col-content{ border-left: none; border-top: 1px solid #eee; }
      .member-form .col-content + .col-content::before{ top: -28px; margin-top: 0; left:50%; margin-left: -25px;  }

      .contact-form{ padding: 0 }
      .member-login-form .contact-form .form-group > div{ text-align: left; }
    }

  .dl-faq {
    margin: 0;
  }

  .dl-faq dt {
      float: left;
      width: 55px;
      overflow: hidden;
      clear: left;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .dl-faq dd {
    margin: 0 0 0 55px;
    line-height: 1.8;
    font-size: 16px;
    padding-top: 8px;
  }

  .dl-faq dd .faq-title { margin-top: -8px; }

  .faq-title {
    font-size: 18px;
    line-height: 38px;
    padding: 0;
    margin: 0;
    border: none;
  }
  
  .faq-circle-no {
    font-size: 24px;
    font-weight: normal;
    font-family: 'arial', sans-serif;
    text-align: center;
    color: #fff;
    background: #666;
    border-radius: 50%;
    height: 38px;
    width: 38px;
    line-height: 38px;
    margin: 0 10px 0 0;
    float: left;
 }
  
 /*.panel-group .panel{ margin-bottom: 10px; }*/
 .panel-group .panel + .panel{ margin-top: 10px; margin-bottom: 10px; }
 .panel-default{ border-color: transparent; }
 .panel-default>.panel-heading{ /*padding-bottom: 1.3em;*/ background-color: transparent; }
 .panel-default>.panel-heading+.panel-collapse>.panel-body{ background-image: linear-gradient(0deg, #fff 90% ,#f1f1ef 100%); }
  
 .panel-title i{
    float: right;
    font-size: 30px;
    width: 1%;
    margin-top: -1.1em;
    margin-right: 10px;
 } 

.marker-water {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #bbeaf8));
    background: linear-gradient(transparent 60%, #bbeaf8 60%);
}

.marker-pink {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #fea6d2));
    background: linear-gradient(transparent 60%, #fea6d2 60%);
}

/*== 搜尋BAR ==*/
  .search_content{
    position: relative;
    top: -2em;
    background-color: #EAEAEB;
    padding:1em 3em;
    margin-bottom: 10px; 
  }

  .search_content .member-login-form{ max-width: 100%; margin: auto }

  .search_content .member-login-form .form-control { height: 46px; margin-bottom: 0; background: #ffffff; }
  .search_content .member-login-form ul li{ text-align: center;}
  .search_content .member-login-form ul li:first-child{ padding: 0 .5em; }
  .search_content .member-login-form ul li .fa{ font-size: 2em; color: #AFAFAF }
  .search_content .member-login-form ul li.select{ width: 20em; }
  .search_content .member-login-form ul li + li{ margin-left:1em }
  .search_content .member-login-form ul li .btn{ padding-left: 3em; padding-right: 3em; }

  @media screen and (max-width:1000px){
    .search_content{ padding: 2vw; top: 0; }
    .search_content .member-login-form ul{ flex-wrap: wrap; }
    .search_content .member-login-form ul li{ flex:0 0 100%; text-align: left; }
    .search_content .member-login-form ul li.select{ flex:0 0 50%; max-width: 50% }

    .search_content .member-login-form ul li + li{ margin-left: 0; padding: .1em; }
  }


/*== 服務據點 ==*/
  .ser_thumbnail{ border-radius: 0; padding: 1em; margin-bottom: 2em; }
  .ser_thumbnail .sub-flex{ flex-wrap: wrap; }
  .ser_thumbnail .caption{ flex:1; } 
  
  .ser_thumbnail .caption *{ margin-top: 0; }
  .ser_thumbnail .caption p,
  .ser_thumbnail .caption address,
  .ser_thumbnail .caption time{ font-size: 16px; color: #909090; line-height: 2; }
  .ser_thumbnail .caption .tag-item {
    background: #ea7054;
    color: #788590;
    margin-top: -3px;
    vertical-align: middle;
    color: #fff;
  }

  .ser_thumbnail .caption h2 img[src='images/icon_location.png']{ display:inline-block; width: 20px }
  .ser_thumbnail .caption address span{ border-bottom: #909090 1px solid; padding-bottom: 2px; }
  .ser_thumbnail .carousel .carousel-indicators li{ background-color: #858485 }
  .ser_thumbnail .carousel .carousel-indicators li.active{ border:#858485 1px solid; background-color: #fff }


    @media screen and (min-width:1001px){
      .ser_thumbnail .caption{ padding-left: 2em; } 
      .ser_thumbnail .carousel { position: static;  /*height: 0; padding-bottom: 90%;*/ }
      .ser_thumbnail .carousel .carousel-inner > .item > img { height: 240px; object-fit: cover; }
      .ser_thumbnail .carousel .carousel-indicators {
          right: 0;
          left: auto;
          bottom: 2em;
          text-align: left;
          padding-left: 5em;
      }
    }
    
    @media screen and (min-width:1001px) and (max-width:1500px){
      .ser_thumbnail .carousel .carousel-indicators {
        padding-left: 7em;
      }
    }

    @media screen and (min-width:1001px) and (max-width:1400px){
      .ser_thumbnail .carousel .carousel-indicators {
        padding-left: 9em;
      }
    }

    @media screen and (min-width:1001px) and (max-width:1200px){
      .ser_thumbnail .carousel .carousel-indicators {
        padding-left: 1.5em;
      }
    }


    @media screen and (max-width:1000px){
      .ser_thumbnail .sub-flex { justify-content: center; }
    }

    @media screen and (min-width:430px) and (max-width:1200px){
      .ser_thumbnail .img{ flex:0 0 200px ;  }
    }


/*== 產品 ==*/
  .pro-row{
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 1em 0;
  }

  /*.pro-row .row .col-sm-3{
    float: none;
    display: inline-block;
    vertical-align: top;
    width:calc(100% / 4 - 6px);
  }*/

  .pro_thumbnail{ border-radius: 0; padding: 0; }

  .cart-btn{ display: block; width: 100%; line-height: 2; color: #fff; background: #E93B3B; text-align: center; font-size: 16px; padding: .5em; }
  .cart-btn img{ display: inline-block !important; margin-top: -8px; }
  .cart-btn img[src="images/icon_money.png"]{ margin-top: -5px; }

  .pro-row .ser_thumbnail .carousel .carousel-indicators {
    right: auto;
    left: 50%;
    bottom: .5em;
    text-align: center;
    padding-left: 0em;
  }

  .pro-info-list{
    font-size: 18px;
  }

  .pro-info-list ul{
    color:#999;
    margin-bottom: .8em;
  }
  
  .pro-info-text{ margin-top: 1.5em; margin-bottom: 2em; }
  .pro-info-text p{ font-size: 18px; line-height: 1.8; margin:.3em 0; color:#767373; }
  .pro-info-text p > span.img{  }
  .pro-info-text p > span.img img{ float: left; max-width: none }
  .pro-info-text p > span + span{ padding-left: .3em; }

  .normal_price{ text-decoration:line-through  }
  .favorable_price{ color: #000 }
  .total_price{ color: #E71515; font-size: 1.3em }
  
  .pro-info-btn{ margin:2em 0 1em 0 }
  .pro-info-btn li{
    margin: 2px;
  }

  .cart-btn-add,
  .cart-btn-immediately,
  .cart-btn-tracer,
  .cart-btn-add-none{
    font-size: 1.25em;
    padding-top: .7em;
    padding-bottom: .7em;
  }

  .cart-btn-immediately{
    background-color: #3A3838
  }

  .cart-btn-tracer{
    background-color: #fff;
    border: #878684 2px solid;
    color: #878684;
    padding-top: .6em;
    padding-bottom: .6em;
  }

  .cart-btn-add-none{
    background-color: #fff;
    border:#E93B3B 2px solid;
    color: #E93B3B;
    padding-top: .6em;
    padding-bottom: .6em;
  }

  .pro-info-total{
    margin-top: 1.5em;
    border-top: #000204 1px solid;
    background-color: #EAE9E9;
    padding:1.3em 1em;
  }

  .pro-info-total ul{ margin-bottom: 0; }

  .pro-info-title{
    background-color: #eae9e9;
    padding: 1em;
    margin-bottom: 2.5em;
    overflow: hidden;
  }

  .pro-info-title .page-title-centerline{ margin: 0; }

  .pro-info-title .page-title-centerline .title{
    font-size: 20px;
    font-weight: 600;
    color: #3a3838;
    position: relative;
    padding: 0 .5em;
  }

  .pro-info-title .page-title-centerline .title::after{
    content: '';
    width: 100%;
    height: 3px;
    background-color: #3a3838;
    
    position: absolute;
    bottom: -20px;
    left: 0
  }

    @media screen and (max-width:1000px){
      .pro-row .pro_thumbnail{ margin-left: -10px; margin-right: -10px; }
      .pro-row .ser_thumbnail .carousel .carousel-indicators{ bottom: -3em }
      /*.pro-row .row .col-sm-3{ width: calc(50% - 6px) }*/
    }


  /*== 瀏覽紀錄 ==*/
    .recordFixed {
      position: fixed;
      top: 50%;
      right: 1px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      z-index: 5;
    }

    .record-pro {
      width: 100px;
      height: auto;
      z-index: 2;
    }

    .record-pro ul li {
      padding: 0px 0px;
      text-align: center;
    }
    
    .record-pro ul li img {
      display: inline-block;
      max-width: 80px;
    }

    .record-pro .review-record {
      position: relative;
      height: 40px;
      line-height: 40px;
      background-color: #f4f4f4;
      /*border-top-right-radius: 6px;
      border-top-left-radius: 6px;
      margin-top: -15px;*/
    }

     /*.record-pro .review-record::before {
        content: '';
        display: inline-block;
        position: absolute;
        top: -35px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 88%;
        height: 50px;
        border-radius: 50%;
        background: url(../images/record-pro-circle.png) no-repeat center;
        z-index: 1;
     }*/

     .record-pro .review-record p {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        /*color: #009F9B;*/
        font-size: 15px;
        z-index: 2;
      }

      .record-pro ul {
          margin-bottom: 0;
          border-top: #f0f0f0 1px solid;
          border-bottom: #f0f0f0 1px solid;
          background: rgba(240, 240, 240, .5);
      }

      .recordshare {
          position: relative;
          float: right;
          width: 100%;
          margin-right: 0;
          margin-bottom: 80px;
          text-align: center;
          background-color: #795548;
          cursor: pointer;
      }

      .recordshare::before {
          content: "TOP";
          text-align: center;
          font-size: 15px;
          color: #ffffff;
          line-height: 35px;
          z-index: 5;
          width: 100%;
          position: relative;
          transition: all 0.3s ease 0s;
          border-radius: 0px;
      }

      @media screen and (min-width: 1001px){
        .record-pro ul {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 113px;
        }
      }

      @media screen and (max-width: 1000px){
        .mobile_record_pro {
          width: 95%;
          justify-content: center;
          z-index: 3;
          top: 50%;
          transform: translateY(-50%);
        }
      
        .recordFixed{ display: none; }
      
        .recordFixed {
          top: auto;
          transform: translateY(0);
          bottom: 60px;
        }

        .recordFixed.active {
          display: block !important;
          z-index: 1000;
          top: 50%;
          transform: translateY(-50%);
        }

        .mobile_record_pro::after {
          content: '';
          position: absolute;
          width: 4000px;
          height: 3000px;
          background: rgba(0, 0, 0, .8);
          border-radius: 0;
          z-index: -1;
          transition: 0.39s;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
        }

        .record-pro {
          position: fixed;
        }

        .recordFixed, .record-pro {
            width: 100%;
            background: transparent;
        }

        .record-pro ul {
            background: #fff;
            /*height: 280px;*/
            max-height: calc(100vh - 18rem);
            overflow: hidden;
            overflow-y: auto;
        }

        .record-pro ul li {
            display: inline-block;
            width: calc(33% - 4px);
            padding: 10px 10px;
        }

        .record-pro ul li.none{ width: 100%; }
        .record-pro ul li.none p{ font-size: 2rem; }

        .record-pro ul li img {
          max-width: 120px;
        }

        .review-top {
          background: #07213C;
          font-size: 1.3em;
        }

        .review-top a{ color: #fff }
      }

      @media screen and (max-width: 640px){
        .record-pro ul li {
            width: calc(50% - 4px);
        }
      }


/*== 購物車 ==*/
  .cart-content{ margin-bottom: 20px; }
  .cart-content table{ table-layout: auto; margin-bottom: 0; }
  .cart-content table tbody tr th{
    background-color: #f5f4f4;
    color: #6b6b6b;
    font-size: 16px;
    padding: 1em .5em;
    border-color: #000204
  }
  .cart-content table tbody tr td{
    vertical-align: middle;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    padding-top:1em;
    padding-bottom: 1em;
    border-top: none;
    border-bottom: none;
  }

  .cart-content table tbody tr td:first-child{ text-align: left }

  .cart-content .pro-info-total{ margin-top: 0; border-color: #e2e1e2 }
  .cart-content .pro-info-total ul{ color: #000 }

  .cart-amount li:first-child::after{
    content: ' + ';
    display: inline-block;
    vertical-align: middle;
    margin-top: -6px;
    padding-left: .5em
  } 

  .cart-img{ max-width: 100px; width: 100% }

    @media screen and (min-width:1001px){
      .cart-content table tbody tr td{
        border-bottom: #dddcdd 1px solid;
      }

      .cart-content .pro-info-btn { max-width: 500px; margin-left: auto; margin-right: 0; }
     
    }

    @media screen and (max-width:767px){
      .cart-content table tbody tr th{ display: none; }
      .cart-content table,
      .cart-content table tbody,
      .cart-content table tbody tr,
      .cart-content table tbody tr td,
      .cart-content table tbody tr td{ position: relative; display: block; width: 100%; }
      .cart-content table tbody tr{ display: flex; flex-flow:row wrap; align-items: center; justify-content: center; }
      .cart-content table tbody tr:not(:first-child){ border-bottom: #e2dede 4px solid; }
      .cart-content table tbody tr td:not(:first-child){ flex:1; }

      .cart-content table tbody tr td:last-child{ display: none; }
      
      .cart-content .pro-info-total{ padding: 1em; }
      .cart-content .pro-info-total ul{ justify-content: center; font-size: .9em; }

      .cart-btn-cancel { position: absolute; right: .3em; top: .5em; }

    }


/*== 購物車表單 - 結帳 ==*/
  .itemContent {
      float: left;
      width: 100%;
      overflow: hidden;
      padding: 4px;
      margin-top: 30px;
  }

  .member_content .page-header { margin-top: 20px; margin-bottom: 10px; color:#929292;}
  .member_content .page-header h3{ font-size: 22px; font-weight: 400; }

  .member_info .divTable{ table-layout: auto }
  .member_info .divTable .divRow .divCell { font-size: 17px; vertical-align: top; }
  .member_info .divTable .divRow .divCell:nth-of-type(1) { width: 150px; }

  .member_info .form-control {
      display: block;
      width: 100%;
      height: 45px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff !important;
      background-image: none;
      border: 1px solid #ccc !important;
      border-radius: 4px !important;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
      -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

      margin-bottom: 1em;
  }

  .member_info select{ width: 100%; padding: 0; }
  .member_info textarea.form-control{ height: auto }

  .member_info .checkbox_style label::before{ margin-top: -6px; }
  
  .member_info_purchase ul { width: 100%; }
  
  @media screen and (min-width:1200px){
    .member_info_purchase ul li{ display: inline-block; width: calc(25% - 6px); }
  }

  @media screen and (max-width: 640px){
    .member_info .divTable .divRow .divCell {
      display: block;
      width: 100% !important;
    }
    .member_info .divTable .divRow .divCell:nth-of-type(1) {
      padding-bottom: 5px;
    }

    .member_info .divTable .divRow .divCell p small{ float: none !important }
  }

/*== 訂單查詢 ==*/
  .cart-order-content table{
    table-layout: fixed;
    border: #ccc 1px solid;
  }

  .cart-order-content table tbody tr td{ padding: 5px; }

 .cart-order-content .attachment,
 .cart-order-content .attachment ol{
    margin-bottom: 0;
 }

  .cart-order-content .attachment .info{
    /*background: #FFE399;*/
    color: #b76711;
  }

  
    @media screen and (min-width:1001px){
      .cart-order-content .attachment ol li + li{ padding-left: 15px; }
      .cart-order-content table{ border-top: none; }
    }
  
    @media screen and (max-width:1000px){
      .cart-order-content table tbody tr,
      .cart-order-content table tbody tr td:not(:first-child) ul{ align-items: flex-start; justify-content: flex-start; flex-direction: column; }
      .cart-order-content table tbody tr td:not(:first-child){ padding-top: 5px; padding-bottom: 5px; }
      .cart-order-content table tbody tr td:last-child{ display: block; }
      .cart-order-content table tbody tr td{ text-align: left }
      .cart-order-content table tbody tr td:not(:first-child)::before{
        content: attr(data-title);
        display: block;
        float: left;
        height: 28px;
        line-height: 28px;
        margin-right: 5px;
        padding: 0 10px;
        text-align: center;
        color: #849aae;
        background: #f2f5fa;
        font-size: 14px;
      }

      .cart-order-content .attachment ol{ width: 100%; flex-wrap: wrap; }
      .cart-order-content .attachment ol li{ flex:1 0 50%; margin-bottom: 5px; }

      .attachment img{
        width: auto !important;
        height: auto !important;
      }
    }

/*====*/
  #bottom-fixed-info {
      z-index: 4;
      box-shadow: 0 -2px 5px -2px rgba(51, 51, 51, .5);
  }

  #bottom-fixed-info ul {
      padding: 10px 0 4px 0;
      background-color: #fff;
      margin-bottom: 0;
  }

  #bottom-fixed-info ul li a {
      line-height: 25px;
      font-size: 1.3rem;
      font-weight: bold;
      color: #444;
      display: flex;
      flex-direction: column;
      text-align: center;
  }

  #bottom-fixed-info ul li i {
      font-size: 20px;
  }

/*==  ==*/
  .select-block{ display: block; width: 100%; margin-bottom: -15px; margin-top: 20px; }

  .select-block .nice-select{ float: none; }

  .select-block .nice-select .list { width: 100%; height: 300px; overflow-y: scroll; }

/*== 表格 ==*/
  .table-info {
      margin-bottom: 10px;
  }

  .table-info table {
      width: 100%;
      margin-top: 25px;
      margin-bottom: 25px;
  }

  .table-info table tr td{ padding: 10px; }

  .invoice_table-info table tr td:first-child{ text-align: center; }


    @media screen and (min-width:1001px){
      .table-info table tr td {
          padding-top: 15px;
          padding-bottom: 15px;
      }

      .table-info table tr td:first-child {
        width: 160px;
      }

      .invoice_table-info-record table thead{ background: #dedede; border-bottom: #ddd 1px solid }
      .invoice_table-info-record table tbody tr td{ background: #fff }
      .invoice_table-info-record table tbody tr:nth-child(even) td{background: #f3f1f1;}
      .invoice_table-info-record table tr td{ width: auto !important; }
    }

    @media screen and (max-width: 1000px){
      .table-info table,
      .table-info table tbody,
      .table-info table tr,
      .table-info table td{ display: block; width: 100%; }

      .table-info .form-control{ max-width: 100% !important }
      
      .table-info table td + td/*,
      .invoice_table-info table tr td + td*/{ padding-top: 0; padding-bottom: 15px; }

      .invoice_table-info-record table thead{ display: none; }
      .invoice_table-info-record table tbody tr td{ text-align: left !important; padding-bottom: 10px !important }
      .invoice_table-info-record table tbody tr td p {
        display: inline-block;
        margin-bottom: 5px;
        padding-left: 5px;
       }

      .invoice_table-info-record table tbody tr td::before {
        content: attr(data-title);
        display: inline-block;
        color: #a24343;
        padding: 6px 12px;
        padding-left: 9px;
        background: #e6eaef;
        color: #515e69;
      }

    }


/*== 標題 ==*/
  .page-title{ display: block; width: 100%; margin:0 auto; overflow: hidden; }
  .page-title .page-header{ margin-top: 0; margin-bottom: 0; }
  .page-title .page-header,
  .page-title .page-header *{ position: relative; font-weight: lighter; z-index: 1; }
  .page-title .page-header h2{ padding-left: 2%; padding-right: 2%; }
  .page-title .page-header small{ font-weight: 800; letter-spacing: 0; }
  .page-title .page-header{ border-bottom: none; }

    /*== 標題 - 底線 ==*/
      .page-title-centerline .page-header { text-align: center; border-bottom: none; }
      .page-title-centerline .page-header .title{ position: relative; width: 100%; }
      .page-title-centerline .page-header .title::before{
        content: '';
        display: inline-block;
        width: 100%;
        height: 1px;
        background-color: #eee;
        position: absolute;
        top:50%;
        left: 0;
        margin-top: .5px;

        z-index: 0;
      }

      .page-title-centerline .page-header *{ display: inline-block; vertical-align: middle; margin-top: -3px; color: #000;}
      .page-title-centerline .page-header .title{ }
      .page-title-centerline .page-header .title span{ position: relative; z-index: 2; display: inline-block; padding: .25em .5em; background-color: #fff }

        @media screen and (min-width:1001px){
          .page-title-centerline{ margin: 0 6em }
        }

        @media screen and (max-width:1000px){
          .page-title-centerline::before{
            width: 100%;
            left: 0;
            top: 60%;
          }
         
        }

      /*== 標題 - 內容 ==*/
        .page-title-main{ max-width: 100%; }
        .page-title-main .page-header{ text-align: left; margin-left: 0; padding-left: 0; padding-bottom: 0; }
        .page-title-main .page-header h2{ font-size: 26px; color: #d1000e; padding-left: 0; }
        .page-title-main .page-header small { position: relative; font-size: 20px; padding:5px 0 10px 0; margin-top: 6px; color: #024b76; font-weight: 500; display: inline-block; vertical-align: middle; }
        .page-title-main .page-header small::before{ content: ''; display: block; width: 30px; height: 3px; background-color: #489aca; position: absolute;
          top: -12px; left: 0 }

            @media screen and (max-width:1000px){
              .page-title-main{ margin-bottom: 10px; }
              .page-title-main .page-header{ padding-left: 0; }
            }

      /*====*/
        .page-title-sub .page-header{ margin-top: 0; margin-bottom: 8px; }
        .page-title-sub .page-header h2{ margin-top: 5px; }
        .page-title-sub .page-header small{ margin-top: 10px; font-size: 20px; color: #000 }
        .page-title-sub .page-header small::before{ top: -10px }

      /*== 產品 ==*/
        .page-title-pro .page-header{ margin-top: 0; margin-bottom: 15px; margin-left: 15px; border-bottom: none; }
        .page-title-pro .page-header h1{ margin-top: 5px;}
        .page-title-pro .page-header h1 img{ display: block; }
        .page-title-pro .page-header small{ margin-top: 10px; font-size: 30px; color:#6590a9; font-family: 'Century Gothic', sans-serif; }
          
          @media screen and (min-width:1001px){
            .page-title-pro .page-header h1 img{ display: inline-block; vertical-align: middle; margin-top: 10px; }
            .page-title-pro .page-header small{ margin-left: 15px; }
          }


/*== 頁碼 ==*/
  .pagination *{ border:none !important; }
  .pagination>li>a{ color: #333; margin: 0 .5em; }

  .pagination>li>a:hover,
  .pagination>.active>a,
  .pagination>.active>a:hover,
  .pagination>.active>a:focus{ color: #fff; border-radius: 50%; background-color: #DA0010 }

/*== 內頁左側 ==*/
  .sub-content{ padding: 10px; margin-top: 10px; margin-bottom: 10px; }

  .search-btn{ text-align: left; height: 45px; padding: 0 12px; line-height: 43px; font-size: 18px; color:#1b52c3; }
  .search-btn span{ color: #666; font-size: 11px; }

  .sub-list{ display: none; margin-left: 0; }
  .sub-list>li{ display: block; padding: 0; border-bottom: #e3e3e3 1px solid; text-align: center; }

  .sub-list>li>a,
  .sub-list>li>ol>li>a{ display: block; color: #6e6e6e; font-size: 16px; padding:8px 16px; }

  .sub-list>li>a{ font-size: 17px; }
  .sub-list>li>a:hover,
  .sub-list>li>a.active{ background: #eaeaea; }

  .sub-list>li>ol{ border: 1px solid #97bbe0; margin-top: 10px; margin-bottom: 10px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px }
  .sub-list>li>ol>li{ border-bottom: 1px dotted #97bbe0; }
  .sub-list>li>ol>li:last-child { border-bottom: 0; }
  .sub-list>li>ol>li>a{ font-size: 15px; }
  .sub-list>li>ol>li>a:hover,
  .sub-list>li>ol>li>a.active{ background: #97bbe0; color: #fff }
  .sub-list .subs{ display: none; }
  .sub-list .subs.active{ display: block; }

  .sub-content .page-title .page-header{ background: #9bafd6 }
  .sub-content .page-title .page-header h2{ margin-bottom: 0; padding-left: 0; }
  .sub-content .page-title .page-header h2 small{ color: #fff; font-weight: 300; }

    @media screen and (min-width:1001px){
      .sub-content{ }
      .sub-list{ display: block; }
      .sub-content{ margin-right: 1.5vw; }
    }

    @media screen and (max-width:1500px){
      .sub-content{ padding-left: 0; padding-right: 0; /*margin-right: -5px; margin-left: -15px;*/ }
    }

    @media screen and (max-width:1000px){
      .mobile-subs{ display: none; }
      .mobile-subs.active{ display: block; }
    }

/*== 區塊列表 ==*/
  .attachment{
      clear: both;
      overflow: hidden;
      margin: 5px 0px 15px;
      padding: 10px;
  }

  .attachment .title{
      display: flex;
      align-items: center;
      overflow: hidden;
      justify-content: center;
      font-size: 22px;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      padding: 8px 0;
      letter-spacing: 1px;
      color: #333;
      text-align: center;
      font-weight: bold;
      line-height: 1;
  }

  /*.attachment .title::before,
  .attachment .title::after{
      content: '';
      flex-grow: 1;
      height: 1px;
      background-color: #ccc;
  }

  .attachment .title::before{
      margin-right: 1rem;
  }

  .attachment .title::after {
      margin-left: 1rem;
  }*/

  .attachment ul {
      margin: 0 3px;
      padding: 0 15px;
      list-style: none;
      line-height: 150%;
  }

  .attachment .filename li {
    margin: 0 0 .5em;
    padding: 5px 0 5px 25px;
    background: url(../images/submenu_icon_active.png) no-repeat 5px 13px;
    border-bottom: 1px dotted #ccc4a8;
    line-height: 180%;
    font-size: 1.3em;
  }

  .attachment li a {
    color: #333;
    text-decoration: none;
  }

  .attachment .filename li span {
    margin-left: .2em;
  }

  .attachment .fileType {
    margin-right: 5px;
  }

  .attachment .filename li span {
    margin-left: .2em;
  }



/*== 清單 ==*/
  .menu-item-inline {
      clear: both;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
  }

  .menu-item-inline ul{
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .menu-item-inline ul li{ padding: 0 1em; color: #fff; font-size: 18px; flex:1; }
  .menu-item-inline ul li a:empty{ display: none; }
  .menu-item-inline ul li + li a{ }
  .menu-item-inline ul li a{ display: block; padding: .25em; }

  .menu-item-inline ul li.item{
    display: block;
    padding: .25em 1.5em;
  }
  .menu-item-inline ul li .header-dropdown-menu{ min-width: 100%; border-radius: 0; }
  
  .menu-item-inline ul li .header-dropdown-menu > li > a,
  .menu-item-inline ul li .header-dropdown-menu > li > a:hover,
  .menu-item-inline ul li .header-dropdown-menu > li > a:focus{ padding: 10px 40px; border:none; background: transparent; }

    @media screen and (min-width:1001px){
      .menu-item-inline ul li .nice-select{
        margin-left: -1.5em;
        margin-right: -1.5em;
      }

      .menu-item-inline ul li .header-dropdown-menu{ opacity:0;pointer-events:none; }
      .menu-item-inline ul li:hover .header-dropdown-menu{ opacity:1;pointer-events:auto}
      
      .menu-item-inline ul li a{ border-right: none; }
      .menu-item-inline ul li .header-dropdown-menu{ min-width: 100%; border-radius: 0; border-left:none; border-right: none }
      .menu-item-inline ul li .header-dropdown-menu > li { border-left: none !important; border-radius: 0 !important }

    } 

    @media screen and (max-width:1000px){
      .menu-item-inline ul{ width: 100%; border-bottom:transparent 1px solid }
      .menu-item-inline ul li{ flex:auto; font-size: 1.1em; }
      .menu-item-inline ul li.item{ width: 50%; }
      .menu-item-inline ul li a { padding: 15px; }
      .menu-item-inline ul li .nice-select{ width: 100%; display: flex; justify-content: center; padding: 0; }

      .menu-item-inline ul li .nice-select:after{ right: 2px; }
      .menu-item-inline ul li .nice-select li{ border:none; }
      .menu-item-inline ul li a.menu-icon-plus{ position: absolute; top: 8px; right: 8px; background: transparent !important; border:none !important; }
      .menu-item-inline ul li a.menu-icon-plus i{ color: #000 !important }
      .menu-item-inline ul li .header-dropdown-menu{ position: relative; top: 0; margin-bottom: 20px; }

    }


/*== 填寫框 ==*/
  .form-group input[type="text"],
  .form-group input[type="password"] {
      border-radius: 0px !important;
  }

  .form-group input[type="text"],
  .form-group input[type="password"],
  .form-control {
      height: 50px;
      font-size: 16px;
      border:none;
      box-shadow: none
  }

.text-small{ font-size: 15px; font-family: 'AVANTN'; font-weight: 600; letter-spacing: 1px }
.font-color-pink{ text-transform: uppercase; font-weight: bold; color: #db8af5;}

/*=============================== RESPONSIVE ===================================*/

@media screen and (min-width: 1700px){
  .select_item{ padding-right: 10vw; }
  .header_link{ padding-right: 0em !important; }

  .product_showinfo{ height: auto; padding:5% 3%; }

}

@media screen and (min-width: 1001px){

  /*== Header ==*/
  .navbar .wrapper .row{ display: flex; flex-wrap: wrap; }
  
  .navbar-brand { /*max-width: 15vw;*/ max-width: 9.5vw; height: auto; margin-top: 10px; margin-bottom: 10px; }

  .nav_link{ 
    display: flex; 
    align-items: center; 
    justify-content: center;
    /*width:calc(100% - 35em);*/
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color:#eaeaea;
  }
  .nav_link > li{ position: relative; padding: .8em 2.2em .2em 2.2em; }
  .nav_link > li::after{ 
    content: ''; 
    display: block; 
    width: 1px; 
    height: 1.5em; 
    background-color: #eee; 
    position: absolute; 
    top: 50%; 
    right: 0; 
    margin-top: -0.5em;
  }

  .header_link { width: 100%; text-align: center; }
  .header_link > li{ float: none; display: inline-block; }
  .header_link > li > a{ display: block; padding-left:0em;padding-right:0em; padding-bottom: .8em; padding-top: 0.5em; }
  
  .header_btn > li { padding: .5vw; padding-top: 40px; }
  .header_btn > li > a{ padding-top: 0; padding-left:.4em;padding-right:.4em; font-size: 15px; }
  .header_btn{ }

  .mobile-menu-flex{ /*padding-right: 3vw;*/ }

  .header-dropdown-menu{
    display: block !important;
    min-width: 100px;
    /*top: 117.5%;*/
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }


  .header-dropdown-menu::before{
    content: '';
    width: 0;
    height: 0;
    border-top: transparent 10px solid;
    border-left: transparent 10px solid;
    border-right: transparent 10px solid;
    border-bottom: #E9C998 10px solid;

    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -5px;
    z-index: 3;
  }
  
  .header_link>li .header-dropdown-menu{ opacity:0;pointer-events:none}
  .header_link>li:hover .header-dropdown-menu{ opacity:1;pointer-events:auto}
  
}


@media screen and (min-width: 1001px) and (max-width: 1199px){

  /*== Header ==*/
  .header_link{padding-right: 0em;}
  .header_link > li > a { font-size: 1.2vw; padding-left: 0vw; padding-right: 0vw; }
  .header-dropdown-menu{ right: 20px }

}

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

  .carousel-indicators{ bottom: -10px }

  .header_btn .visible-xs{ display: inline-block !important; }

  .index_carousel{  }

  footer{ padding:1em .5em; padding-bottom: 4.5em; margin-bottom: 2rem; }
  footer .sub-flex{ align-items: inherit; }
  footer .sub-flex figure{ width: 60px; }
  footer .sub-flex section{ flex:1; }

  footer address{ margin-bottom: 10px; }


  /*== Header ==*/
  .navbar-header{ align-items: flex-start; margin-top: 0em; margin-bottom: 0; }
  .navbar-brand{ /*max-width: 70vw; height: auto !important;*/ }

  .navbar-brand img{ display: none; }

  .navbar-brand{
    /* width: 100%;
    height: 78px;
    background: url(../images/logo02.png) no-repeat center;
    background-size: contain; */
    /* width: 100%; */
    width: 6em;
    background: url(../images/logo.png) no-repeat left;
    background-size: contain;
  }

  .navbar-header + .navbar-collapse{ padding-left: 0; padding-right: 0; }
  .header_link > li{ border-bottom: #ccc 1px solid; padding: 10px 0; }
  .header_link > li > a{ font-size: 18px; padding-left: 0; }

  .menu-icon-plus{ /*background-color:#999 !important; */padding:5px 10px; margin-top: 5px; padding: 5px 8px !important }
  .menu-icon-plus i{ color: #949494; }
  .menu-icon-plus + .header-dropdown-menu{ background: #000 !important; border-radius: 0 }
  .header-dropdown-menu > li:not(:last-child){ border-bottom: #cccccc47 1px solid; }
  .header-dropdown-menu > li a{ color: #fff !important; padding-left: 0 !important; }
  
  .header-dropdown-menu > li > ul{ margin-top: .5em; }
  .header-dropdown-menu > li > ul > li{ background: #ffffff24; padding: 0.2em .5em;}
  .header-dropdown-menu > li > a.menu-icon-plus{ margin-top: -1.6em !important; padding: 5px !important; background-color: transparent !important; }
  .header-dropdown-menu > li > ul > li > ul{ background: #1f1e1e; padding: .2em .8em; }
  .header-dropdown-menu > li > ul > li > ul > li{ display: inline-block; float: none; width: calc(33% - 6px); text-align: center; }
  .sub-header-dropdown-menu{ display: none !important; }
  .sub-header-dropdown-menu.active{ display: block !important; }

  .navbar-toggle {
    position: absolute;
    right: -1em;
    margin-bottom: 0;
    top: 50%;
    margin-top: -18px;
    z-index: 4;
    border-radius: 50% !important;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center; 
    padding-left: .55em;

    /*border-color: #e76d8d !important;*/
  }

 /*.navbar-toggle .icon-bar {
    background-color: #f56c91 !important;
  }*/
  
  .top-menu{ width: 100%; padding: 1em 0; display: none; }
  .top-menu.active{ display: block; position: absolute; top: 15vw; }

}

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

  .mobile-menu-flex .header_link > li > a{ font-size: 2.5vmax; }

  .index-carousel figure{
    font-size: 16px;
  }

  .index-carousel figure > span,
  .index-carousel figure > figcaption {
      padding: .5em;
  }

  .index-carousel .carousel-indicators {
      bottom: -40px;
  }

}