@charset "utf-8";

/*all*/
body {  background: #030303;}
.main_part { padding: 100px 20px 50px;}
#content {
        background: url(https://pic03.eapple.com.tw/ckbikestudio/banner.jpg), url(https://pic03.eapple.com.tw/ckbikestudio/bady_bg.png);
        background-repeat: no-repeat;  background-position: top right, bottom right ; color: #fff;}

/*scrollbar*/
::-webkit-scrollbar { width: 5px; height: 0px;}
::-webkit-scrollbar-thumb { background: #FFE7D7;}
::-webkit-scrollbar-track { background: #3a3a3a;}

/*按鈕*/
.animated-arrow { border-radius: 99em;  width: 115px; height: 115px; display: flex; justify-content: center; align-items: center;}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*漢堡*/
/* === 只在螢幕寬度769以上螢幕呈現 === */
/*@media (min-width:769px) {*/
  /*.me_tp_features { display: none;}*/
  #to_top {left: 150px;}

  /* header */
  .pageIndex .header_area { position: fixed; background: transparent; padding: 20px 50px;transition: all 0.5s cubic-bezier(0.4, 0, 1, 1);}
  .header_area { position: fixed; background: linear-gradient(to bottom, rgb(0 0 0) -2%, 5%, rgb(0 0 0 / 0%) 100%);
                padding: 20px 50px;  transition: 0s; /*height: 350px;*/ }
  /*.header_area .main_header_area,*/
  
  /*下滑*/
  .header_area.sticky .main_header_area { width: 100%; height: 100%; transition: all 0.5s; padding: 0px;}
  .header_area.sticky {  padding: 10px 30px; background: rgba(255, 255, 255, .7); height: auto; transition: 0s;}

  .main_header_area .container,
  .navigation {
    height: 100%;
    width: 100%;
    max-width: 100%;
  }

  .navigation {
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
 }

  .navigation>* {
    order: 2;
  }

  /* ----- topLogo ----- */
  .nav-header {
    width: auto;
    display: block;
    position: relative;
    z-index: 5;
    max-width: 120px;
  }
  /*下滑*/
   .header_area.sticky .nav-header { max-width: 100px; }
   .header_area.sticky { background: rgb(0 0 0 / 90%);}
  /* ----- menu列 ----- */
  .stellarnav.desktop {
    transition: 1s;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: auto;
  }

  /* --- 漢堡 --- */
    .stellarnav .menu-toggle {
            display: block;
            width: 55px;
            max-width: 100%;
            padding: 15px;
            border-radius: 99em;
    }

  .stellarnav .menu-toggle:after {
    display: none;
  }

  .stellarnav .menu-toggle span.bars {
    top: 0;
    display: flex;
    height: 20px;
    padding: 0;
    transition: 0.5s;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }

  .stellarnav .menu-toggle span.bars span {
    width: 100%;
    height: 2px;
    background: #fff;
    transition: 0.5s;
    margin: 0;
    padding: 0;
  }

  .stellarnav .menu-toggle:hover span.bars span:nth-child(2) {
    width: 60%;
  }

  /* 選單開啟 - 漢堡改變 */

  .stellarnav.active .menu-toggle span.bars {
    height: 35px;
  }
  .stellarnav.active .menu-toggle { background: transparent;}

  .stellarnav.active .menu-toggle span.bars span {
    transform: translate(-50%, -50%) rotate(90deg);
    position: absolute;
    top: 50%;
    left: 50%;
    background: #777;
  }

  .stellarnav.active .menu-toggle span.bars span:first-child {
    left: 20%;
  }

  .stellarnav.active .menu-toggle span.bars span:nth-child(2) {
    top: 60%;
  }

  .stellarnav.active .menu-toggle span.bars span:last-child {
    left: 80%;
  }

  .stellarnav.active .menu-toggle:hover span.bars span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
    top: 50%;
    left: 50%;
  }

  .stellarnav.active .menu-toggle:hover span.bars span:nth-child(2) {
    width: 100%;
    opacity: 0;
  }

  .stellarnav.active .menu-toggle:hover span.bars span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
    top: 50%;
    left: 50%;
  }


  /* menu按鈕列表 */
  .stellarnav.desktop {
    z-index: 1;
  }

  .stellarnav.desktop>ul {
    position: fixed;
    width: 0vw;
    max-width: 400px;
    height: 100%;
    top: 0;
    bottom: 0;
    right:0;
    display: flex !important;
    margin: 0;
    padding: 0px;
    text-align: center;
    height: 100%;
    transition: .5s;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: -1;
    opacity: 0;
  }

  /* 墊在按鈕下的背景 */
  .stellarnav.desktop>ul::before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 80%);
    backdrop-filter: blur(10px);
    position: absolute;
    left: 0;
    top: 0;
    transition: 1s;
    transform: translate(50%, 0%);
  }

  .stellarnav.desktop.active>ul { transform: unset; opacity: 1; width: 100vw; max-width: 400px; padding: 20px 50px;}

  .stellarnav.desktop.active>ul::before {
    transition: 1s;
    transform: translate(0%, 0%);
  }

  .stellarnav>ul>li {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

 .stellarnav>ul>li a {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        align-content: flex-start;
        flex-direction: column;
        text-align: left;
        padding: 5px 10px;
        margin: 0;
        position: relative;
        font-size: 15px;
        line-height: 140%;
        line-height: 60px;
        height: 60px;
        color: #ffffff;
  }
  .stellarnav>ul>li>a::before { 
        content: '';
        width: 0;
        height: 1px;
        border-bottom: 1px solid #3c3c3c;
        transition: 1s;
        position: absolute;
        left: 0;
        bottom: 0;
  }
  .stellarnav.desktop.active>ul>li>a::before { 
        width: 100%; transition-delay: .3s;
  }

  .stellarnav>ul>li>a:nth-of-type(1)::after, .stellarnav>ul>li.has-sub>a:nth-of-type(1)::after {
          content: "";
          width: 30px;
          height: 2px;
          border-bottom: 2px solid #ffe7d7;
          transition: 1.5s;
          position: absolute;
          left: 0;
          bottom: 0;
          display: block;
          transition: all 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  /*下拉選單次分類隱藏*/
  .stellarnav li li.has-sub > a:after ,.stellarnav li.open > a.dd-toggle .icon-plus{display: none;}
  .stellarnav.mobile li li a.dd-toggle span.icon-plus { display: none;}
  /**/
  .stellarnav li.has-sub > a:after {
        content: '';
        margin-left: 0px;
        border-left: unset;
        border-right: unset;
        border-top: unset;
        display: inline-block;
        position: absolute;
        top: 97%;
        right: 0;
        transform: translateY(0px);
  }
  .stellarnav>ul>li>a:hover:nth-of-type(1)::after, .stellarnav>ul>li.has-sub>a:hover:nth-of-type(1)::after {
        width: 100%;}
  /* 主按鈕中英翻轉 - 不用可以刪掉 */
  .stellarnav>ul>li>a b {
    height: 100%;
    transform: translateY(25px);
  }

  .stellarnav>ul>li>a b+b {
    margin-top: 10px;
  }

  .stellarnav>ul>li>a:hover b {
    transform: translateY(-25px);
  }

  /* 次分類 */
  .stellarnav ul ul { left: 0%; position: relative; width: 100%; background: transparent; transition: all 0.3s ease-in-out; }
  .stellarnav.desktop li.has-sub a { position: relative;}

  .stellarnav.desktop li.has-sub a.dd-toggle { display: inline-block;  position: absolute;  text-align: center;  z-index: 999; padding-right: 0;}
  .stellarnav .dd-toggle {  bottom: 15px;}
  .stellarnav.desktop li.has-sub a.dd-toggle:before {  display: none;}
  .stellarnav.desktop li .has-sub a.dd-toggle { display: none;}
  .stellarnav ul ul ul { overflow: hidden; height: 0;}

  /*次分類下拉按鈕*/
  .stellarnav.desktop li.has-sub a.dd-toggle{display: none;}
  .stellarnav.desktop.active li.has-sub a.dd-toggle {display: inline-block;}

  /*第2層*/
  .stellarnav li li {  border: unset; border-bottom-width: 0; padding-left: 20px;}
  ul.news_classes li a , .stellarnav li li a {  height: 40px;}

  /* --- 聯絡連結 --- */
  .tp_links {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    display:none;
  }

  /* --- 搜尋器 --- */
  .box_search {
    width: 100%;
    order: 5;
    display: none;
  }

  .shop_search_btn {
    width: 100%;
    border-radius: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  .box_search input[type=text] {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px;
    padding-left: 32px;
    border-radius: 0;
  }

  /* --- 購物車和匯款連結 --- */
  .me_tp_features { filter: drop-shadow(0px 5px 5px black);}
  .me_tp_features>a {
    text-align: center;
    /*
    display: flex;
    flex-direction: column;
    /* 不要直書可以拿掉 
    width: 1.2em;*/
    /* 不要直書可以拿掉 */
    line-height: 1.2;
    letter-spacing: 0;
    /*justify-content: center;*/
    align-items: center;
    color: #fff;
  }

  .me_tp_features>a span {
    margin-top: 5px;
  }


  @media (max-width:1024px) {
    #page {
      /* padding-left: 100px; */
      padding: 0;
    }

    .header_area.sticky, .header_area {
      width: 100%;
      height: 70px;
    }

    .header_area .main_header_area, .header_area.sticky .main_header_area {
      /* width: 100px; */
      width: 100%;
    }
    /*
    .navigation {
      flex-wrap: wrap;
      flex-direction: row-reverse;
      justify-content: space-between;
    }
    */
    .pageIndex .header_area{padding: 10px 50px;}
    /*
    .navigation>*{
      flex:1;
    }*/

    .nav-brand {
      background: none;
      width: 140px;
      height: auto;
      margin: 0 auto 0 0;
    }

    .nav-brand img {
      display: block;
      max-width: 100%;
      margin: 0;
      padding: 0;
    }

    /*
    .stellarnav.desktop{
      justify-content: flex-start;
    }
    */
    .stellarnav.desktop { 
      justify-content: flex-end;
    }

    .stellarnav.desktop>ul{
      width: 220px;
      padding-left: 20px;
    }
    
    
    .me_tp_features {
      order: 2;
      text-align: right;
      margin: 0px 0 0;
    }

    .me_tp_features>a {
      flex-direction: row;
      width: auto;
    }

    .tp_links {
      justify-content: flex-end;
    }
  }
  @media screen and (max-width: 768px) { 
    .header_area {background: #000;}
    .pageIndex .header_area { position: sticky;background: #000;  padding: 10px; }
    .header_area {  position: sticky;padding: 10px;}
    .header_area.sticky, .header_area { height: 80px; }
    .stellarnav.mobile li.open li.open { background: transparent;}
    
    /*LOGO*/
    .nav-header { filter: unset; }
    .me_tp_features {display: none;}
    .nav-brand {  max-width: 100px;}
    .nav-header { max-width: fit-content;}

    /*選單*/
    .stellarnav.mobile { right: 0; left: auto; }
    .stellarnav .menu-toggle span.bars span { background: #8f8f8f;}
    .header_area.sticky { padding: 10px;}
    .stellarnav.mobile.left > ul { width: 100vw;}

    .stellarnav.mobile.left > ul {
        transform: unset; opacity: 1; width: 100vw; max-width: 400px;  padding: 20px 30px;  right: 0;  left: auto;flex-direction: column;
        background:rgb(0 0 0 / 80%);backdrop-filter: blur(10px); justify-content: flex-start; }
      .stellarnav.mobile ul {background: transparent;}
      .stellarnav.mobile > ul > li { border-bottom: unset;}
      .stellarnav.mobile > ul > li > a { line-height: 230%; color: #fff; overflow: hidden;height: 60px; max-height: 60px;}
      .stellarnav.mobile li.open { background: transparent; padding: 3px;}
      .stellarnav.mobile > ul > li > a b {line-height: 230%;}
      .stellarnav.mobile li a { border-bottom: 1px solid rgb(255 255 255);}
      .stellarnav .dd-toggle { bottom: auto;}
      .stellarnav li li a { border-bottom: unset !important;}

      .stellarnav .icon-close:after , .stellarnav .icon-close:before { border-bottom: solid 2px #fff;width: 30px; right: 10px;}
      .stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu { background: transparent; color: #fff;}
 }

/*}*/

/*漢堡截止*/

/*電腦LOGO*/
.nav-brand { display: flex; align-items: center;}
.footer_logo { max-width: 100px;height: fit-content;}

/* 主分類超過30個但次分類直接顯示*/ 
.stellarnav.desktop li.bigMenu>ul{grid-gap: 10px;}
.stellarnav.desktop li.bigMenu li{border: 0;}
.stellarnav.desktop li.bigMenu>ul>li>a{border: 1px solid #ddd;}
.stellarnav.desktop li.bigMenu ul ul{display: block !important; position: relative; top: 0; background: unset; border: 0;}
.stellarnav.desktop li.bigMenu ul ul li{border: 0;}
 /*主分類超過30個但次分類直接顯示-結束 */
/* 商品下拉超過30個--結束 */

/*大圖*/
#content_main {  margin: 0;}
.bannerindex { position: static; height: auto;}
.swiper-banner { position: static; margin: 0; height: auto;}
.swiper-slide { padding: 0px !important;}

.bannerindex .swiper-banner:before {
        content: ""; position: absolute;  z-index: 999; pointer-events: none; background: url(https://pic03.eapple.com.tw/ckbikestudio/banner_af.svg);
        background-size: contain !important;  background-repeat: no-repeat !important; top: 11%; right: 0%; width: 100% !important; height: 0px !important;
        background-position: right; padding-bottom: calc(100% / 1 * 0.2);}
.bannerindex .swiper-slide img { height: auto;}
.bannerindex .swiper-pagination { display: none;}
.bannerindex .swiper-slide { position: relative;}
.bannerindex .swiper-slide:nth-child(1).swiper-slide-active:before ,.bannerindex .swiper-slide:nth-child(2).swiper-slide-active:before  {content: ""; position: absolute;  z-index: 999; pointer-events: none;}
.bannerindex .swiper-slide:nth-child(1).swiper-slide-active:after ,.bannerindex .swiper-slide:nth-child(2).swiper-slide-active:after  {content: ""; position: absolute;  z-index: 999; pointer-events: none;}

.bannerindex .swiper-slide:nth-child(1).swiper-slide-active:before {
        background: url(https://pic03.eapple.com.tw/ckbikestudio/banner01_be.svg);
        background-size: contain !important;
        background-repeat: no-repeat !important;
        bottom: 11.5%;
        right: 7%;
        width: 100% !important;
        height: 0px !important;
        background-position: right;
        padding-bottom: calc(100% / 1 * 0.22);
        filter: drop-shadow(2px 4px 6px black);
        animation: slide-top 1.8s both;
        animation-delay: 0.8s;
}
.bannerindex .swiper-slide:nth-child(2).swiper-slide-active:before {
        background: url(https://pic03.eapple.com.tw/ckbikestudio/banner02_be.svg);
        background-size: contain !important;
        background-repeat: no-repeat !important;
        bottom: 11.5%;
        right: 8%;
        width: 100% !important;
        height: 0 !important;
        background-position: right;
        padding-bottom: calc(100% / 1 * 0.22);
        filter: drop-shadow(2px 4px 6px black);
        animation: slide-top 1.8s both;
        animation-delay: 0.8s;
}

.bannerindex .swiper-slide:nth-child(1).swiper-slide-active:after {
        background: url(https://pic03.eapple.com.tw/ckbikestudio/banner01_af.jpg);
        background-size: contain !important;
        background-repeat: no-repeat !important;
        right: 9%;
        top: 0;
        width: 100% !important;
        height: 0 !important;
        background-position: right;
        padding-bottom: calc(100% / 1 * 0.15);
        animation: slide-bottom 1s both;
        animation-delay: 0.5s;
}

@keyframes slide-top {
    0% {-webkit-transform: translateY(30%); transform: translateY(30%); opacity: 0; }
    100% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1;}
}

@keyframes slide-bottom {
    0% { -webkit-transform: translateY(-3%); transform: translateY(-3%); opacity: 0;}
    100% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1;}
}
@keyframes slide-right {
    0% {-webkit-transform: translateX(-18%); transform: translateX(-18%); opacity: 0; }
    100% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1;}
}


/*footer*/
.footer { background: #121212;padding: 80px 50px 0 30px; overflow: hidden;}
.footer .center { max-width: 100%;}
.footer_info { padding-right: 0px;grid-gap: 0 20px;}
.box_link {  position: relative; top: -80px; right: 0px;  width: 100%;  max-width: 100%;
        display: flex; justify-content: flex-start; align-items: center;  flex-wrap: wrap;  flex-direction: row;  max-height: 100%; order: 2; height: 0;}
.box_link a { border: unset;font-size: 20px; color: #999;}
.box_link a:hover {  color: #FFE7D7;}
.box_link a:nth-child(1) { padding-left: 0px;}

.footer_info ul { display: flex;  width: 100%; justify-content: flex-end;  flex-direction: column; align-content: flex-end;  flex-wrap: wrap; align-items: flex-end;}
.footer_info li p { line-height: 220%; color: #d0d0d0;}
.footer_info li p a { color: #d0d0d0;}
.footer_info li:nth-child(2) { padding-top: 25px;}
.footer_info li p:before { letter-spacing: 4px;}

.footer_menu a { padding: 5px 0px 5px 30px; border: unset; color: #d0d0d0; background: transparent;transition: 0.5s;}
.footer_menu a:hover { background: transparent;  color: #fff; letter-spacing: 2px;}
.copy { text-align: center; padding: 15px 0 20px; font-size: 13px; color: #999; border-top:1px #4c4c4c solid; margin-top: 15px;}
.copy a { color: #999;}
.copy a:hover { color: #c00;}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*購物車******************************************************** */
/*列表*/
.product_page .show_content,
.product_info_page .show_content { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;}
.product_page .product_menu_list { position: sticky;; width: 220px; letter-spacing: 1px;top: 110px;}
.product_page .products-list,
.product-wrapper { width: calc(100% - 270px);}
ul.page { width: 100%;}

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

.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;}
.products-list .pic:before {content: ""; background: #ffe5d4;  color: #ffe5d4; font-size: 15px;
        letter-spacing: 2px; position: absolute; bottom: 0%; left: 0; width: 100%; height: 0px;transition: 0.5s;}
.products-list .pic:after {  content: "查看更多"; color: #030303; position: absolute; bottom: 10px; opacity: 0;transition: 0.5s;}
.products-list .name .numbering { font-size: 15px;}
.products-list .price b { color: #ffe5d4;}

/*hover*/
.products-list a:hover .pic:before { height: 40px;}
.products-list a:hover .pic:after { opacity: 1;}

/*側邊*/
.product-layer-two > li { width:100%; max-width:100%; padding:0; text-align:left; border-bottom:1px solid #666;padding-bottom: 15px;}
.product-layer-two li a { border: unset;  background: transparent; padding: 25px 10px 5px; color: #fff;}
.product-layer-two li a:hover { color: #FFE5D4;}
.product-layer-two > li ul > li + li { margin-top:5px;}
.product-layer-two li ul { position:static; margin-top:5px; width:100%; margin-left:0;}
.product-layer-two li:hover ul { border: none !important;}
.product-layer-two li li:hover > a { background:transparent; color:#ffe5d4;}
.product-layer-two li i {color: #ffe5d4; top:15px;}

/*展開*/
.product-layer-two li.active a { font-weight: bold; border: unset;}
.product-layer-two li.active li a { font-weight: normal; color: #ffffff;}
.product-layer-two li li:hover{ margin-left: 15px;}
.product-layer-two li li { display: block; padding:0;background: transparent;transition:all ease .3s;}
.product-layer-two li li a{ padding:5px 10px 5px 30px;background: transparent;}
.product-layer-two li li > a:before { content: ""; position: absolute; width: 12px; height: 8px; background: transparent; left: 0; margin-left: 0px; top: 50%; margin-top: -4px; clip-path: polygon(0 0, 100% 50% , 0 100%);}
.product-layer-two li li:hover > a:before { background:#ffe5d4;}

/*內頁*/
.product-wrapper { display: flex; justify-content: space-between;  flex-direction: row;  flex-wrap: wrap;}
.product_main { padding: 0 30px 0 10px;}
.prod_tabs { width: 100%;}
.product_info_page .edit { color: #fff;}
.pd_tabTitle li.activeTab a { color: #ffe5d4;}
.pd_tabTitle li {border-bottom: 1px solid #666;}
.pd_tabTitle li a {color: #fff;}

/*規格*/
.sidebarBtn { border: unset; background: transparent; }
.sidebarBtn h2 { color: #ffffff; font-size: 24px; font-family: "Noto Serif TC Medium"; letter-spacing: 2px;}
.product_info li span {color: #fff;margin-bottom: 10px;}
.radio-inline__label { padding: 5px 15px;  color: #ccc;  border: 1px solid #ccc;}
.radio-inline__input:checked + .radio-inline__label { background: #FFE5D4; border: 1px solid #FFE5D4;}
.toShare { color: #fff; border-top: unset;margin-top: 0px;}
div#number_area { color: #888;}
.pd_tabTitle li.activeTab::after { height: 2px; background: #ffe5d4;}
.sidebarBtn .price { color: #fff; border-bottom: 1px solid #666;}
.inquiry_a3 { background: #FFE5D4;  color: #111; font-weight: 800;}
.product_info li .txt_box { color: #95cfff;}

/*首頁*/
.i_prod_tit { display: none;}
.prod_part {  padding: 50px 20px 80px;}
.pageIndex .productsListBox{padding: 30px 0 0;}

/*列表*/
.products-list { grid-gap: 10px 20px;}
.products-list .name {font-size: 17px; color: #fff; letter-spacing: 0px; height: auto; margin-top: 20px;}
.products-list .item a {text-align: center;padding-bottom: 0px;}
.products-list .price { margin: 10px 0 30px;}
.products-list .more { border: 1px solid #FFE5D4; color: #ffe5d4; font-size: 15px; letter-spacing: 2px;}
.products-list .item a:hover .more { background: #ffe5d4; color: #030303; letter-spacing: 2px;}
.more.slowAnimation {  display: none;}
/*按鈕*/
.i_prod_b a { display: none;}

/*相關推薦*//*同文章*/
.prod_related ,.news_related { background: url(https://pic03.eapple.com.tw/ckbikestudio/recommend_bg.jpg); padding: 80px 15px;background-repeat: no-repeat; background-size: cover;}
.related_list ,.news_related_list{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));max-width: 1300px;}
.prod_related h6 ,.news_related h6{ max-width: 1300px; margin: 0 auto 30px;}
.prod_related h6 span:before { content: '相關推薦'; font-size: 23px; color: #ffffff; font-family: "Noto Serif TC Medium"; font-weight: 500;  letter-spacing: 5px;}
.related_list li a,.news_related_list li a { padding: 0px; background: transparent; height: 100%;}
.related_list li a p ,.news_related_list li a p{ color: #ffffff; padding-top: 10px;transition: 0.5s;}
.related_list li a:hover p,.news_related_list li a:hover p { letter-spacing: 1px;}
.lastPage { font-size: 15px; color: #fff; background: #424242;transition: 0.5s;}
.lastPage:hover  { color: #030303; background: #ffe5d4;}

/*購物車流程*/
.shopping-cart .cell.product_name p {  color: #fff;}
.total_amount li { color: #fff; }
.send_simple { background: #a89385 url(../images/simple_right.png) 88% center no-repeat;}
.separate_title {color: #ffffff;  padding: 10px 0 10px 10px; background: #4c4c4c;}
.form label ,.form label.Bigcheck { color: #ffffff;}
.total_amount li input[name=DiscountCode] { color: #111;}
.declaration { background: #a89385;}

/*帳號*/
.car_page .information_left { width: 100%;  margin-top: 50px;}
.blank_letter { font-family: '微軟正黑體'; padding-top: 25px; font-size: 20px; color: #ffffff; width: 100%; border-top: 1px solid #ccc;}
.contact_le_map { display: none;}

/*匯款通知*/
.formbox_form li { color: #fff;}
.formbox_form li .form__insert {  color: #111;}
.rewrite_simple {background: #666 url(../images/simple_left.png) 10% center no-repeat;}
.send_simple { background: #a89385 url(../images/simple_right.png) 88% center no-repeat;}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*預設解除背景輪播*/
#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;}
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*內頁BANNER 設定*/
.path p, .path p a { text-align: right;color: #999;padding-bottom: 40px;}

/*內頁BANNER 設定*/
.banner { background: transparent;;position: relative;  background-position: right; background-repeat: no-repeat;  background-size: cover;  height: 600px; 
         display: flex; justify-content: flex-end;padding: 0px 20px 145px; align-items: flex-start; flex-wrap: wrap;  flex-direction: column;  align-content: flex-start;
          max-width: 1300px; margin: 0 auto;}

/*.banner:before { content: "";  width: 650px; height: 364px; right: 4%;  bottom: 0%;  position: absolute;}*/
.banner:before { content: "";  width: 100%; height: 0;  right: 4%;  bottom: 0%;  position: absolute;
        padding-bottom: calc(100% / 1 * 0.3); background-repeat: no-repeat !important;  background-position: right !important;  background-size: contain !important;}

.banner:after { left: 2%; bottom: 16%; position: absolute;  color: #fff; font-size: 17px; white-space: pre; text-align: left; line-height: 160%;letter-spacing: 2px;animation: slide-top 1.8s 0.5s both;}

.banner h5 {font-size: 25px;  color: #ffffff; position: relative; letter-spacing: 5px; font-family: "Noto Serif TC Medium"; 
            font-weight: 300;padding-left: 9px;left: 0%; bottom: 75px; animation: slide-top 1.5s 0.5s both;}
.banner h5:after { position: absolute; white-space: pre; font-size: 73px; color: #FFE5D4; letter-spacing: 2px;
        font-family: "Noto Serif TC Medium"; text-align: left; bottom: 80px; left: 0; line-height: 120%; }
.banner h5:before { content: ""; position: absolute;  left: 0px; bottom: 18px;  background: #785E52; width: 18px; height: 18px;  z-index: -1;}

.banner.banF:before , .banner.banD:before{ background: url(https://pic03.eapple.com.tw/ckbikestudio/banner_01.jpg); }/*購物車*/
.banner.banF:after ,.banner.banD:after{ content: "無論是購車、升級，還是騎乘調整與維護，\A我們為您打造全程無憂的騎乘體驗";}
.banner.banF h5:after ,.banner.banD h5:after{ content: "Complete\A Bikes"; }

.banner.banblog:before  { background: url(https://pic03.eapple.com.tw/ckbikestudio/banner_02.jpg); }/*文章*/
.banner.banblog:after { content: "掌握最新商品與活動訊息，\A隨時與我們保持連線";}
.banner.banblog h5:after { content: "News &\AUpdates"; }

.banner.banE:before  { background: url(https://pic03.eapple.com.tw/ckbikestudio/banner_04.jpg); }/*相簿*/
.banner.banE:after { content: "真實案例分享，\A讓您看見專業服務帶來的具體改變";}
.banner.banE h5:after { content: "Our Works\Ain Detail"; }

.banner.banB:before  { background: url(https://pic03.eapple.com.tw/ckbikestudio/banner_03.jpg); }/*聯絡我們*/
.banner.banB:after { content: "若您有任何疑問或想進一步了解服務內容，\A歡迎透過下方資訊與我們聯繫";}
.banner.banB h5:after { content: "Get in\ATouch"; }

.services_page .banner:before  { background: url(https://pic03.eapple.com.tw/ckbikestudio/banner_05.jpg); }/*服務項目*/
.services_page .banner:after { content: "從單車銷售到維修保養，\A完整服務一次到位，陪伴您每一次騎乘";}
.services_page .banner h5:after { content: "Comprehensive\A Bike Services"; }

/*動畫*/
@keyframes slide-top {
    0% { -webkit-transform: translateY(100%);transform: translateY(100%); opacity:0; }
    100% {-webkit-transform: translateY(0); transform: translateY(0); opacity:1;}
}
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*文章設定*/
/*列表*/
.blog_box {padding: 7px; display: flex; justify-content: space-between;  flex-direction: row;  flex-wrap: wrap;}
.blog_subbox { grid-template-columns: 1fr;  grid-gap: 50px;}
.subbox_item a { grid-template-columns: 360px 1fr;grid-gap: 35px;}

.blog_page h4.blog_category_title , h5.blog_le_t { display: none;}
.blog_list_ri h5 { letter-spacing: 2px; font-weight: 500; font-size: 23px; color: #ffffff;}
.blog_list_ri em { font-size: 14px; color: #ffffff; padding: 5px 10px; width: fit-content; margin-top: 15px; background: #3e3e3e; letter-spacing: 2px;}
.blog_list_ri p {  font-size: 15px; border-top: 1px solid #afafaf; margin-top: 20px; padding-top: 15px;padding-left: 5px;
                   color: #b5b5b5; line-height: 150%;}
/*hover*/
.subbox_item a:after{display: none;}
.subbox_item:hover { /*border: 1px solid #efefef; border: 1px solid #efefef; */padding: 15px;}
.subbox_item:hover:before {  border-top: 2px solid #666;  border-left: 2px solid #666;}
.subbox_item:hover:after {  border-bottom: 2px solid #666;  border-right: 2px solid #666;}
.subbox_item:before {
        content: ""; width: 20px; height: 20px; display: block; box-sizing: border-box;
        border-top: 2px solid #ffffff00; border-left: 2px solid #ffffff00; position: absolute;
        top: 0; left: 0;  transition: all .3s linear;z-index: 1;}
.subbox_item:after {
        content: "";  width: 20px; height: 20px; display: block;  box-sizing: border-box;
        border-bottom: 2px solid #ffffff00;  border-right: 2px solid #ffffff00; position: absolute; 
         bottom: 0;  right: 0; transition: all .3s linear;z-index: 1;}

/*側邊*/
.blog_le, .blog_ri { margin-bottom: 30px;padding: 0px;}
.blog_le { position: sticky; width: 220px; letter-spacing: 1px; top: 110px;height: 500px;}
.blog_le .accordion { border-radius: 0px; border: unset; }

.blog_ri { width: calc(100% - 270px); padding: 0px;}
.blog_search input[type=search] { border: solid 1px #c2c2c2; border-radius: 0px; background: #fff;}
.blog_le .accordion li { padding-bottom: 15px;}
.accordion li .link a { padding: 25px 10px 5px; color: #ffffff;  font-weight: 700;font-size: 16px;}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category { background: transparent !important;}
.blog_le .accordion > li:hover .link a, .blog_le .accordion > li.on_this_category .link a {  color: #ffe5d4 !important;}
.accordion li+li .link {  border-top: 1px solid #666;}

/*內文*/
.articel_mainPic { display: none;}
.blog_in_page .edit {  color: #fff;}

.blog_shareData { align-items: flex-start; align-content: flex-start; flex-direction: column;}
.blog_shareData .visitors_num { padding: 10px 0;}  
h4.blog_category_title { color: #ffffff; font-size: 24px; padding: 0px 0 10px; letter-spacing: 2px; font-family: "Noto Serif TC Medium"; font-weight: 500;}
.toShareNews {color: #8b8b8b; font-size: 14px; letter-spacing: 2px;}


.blog_back a.article_btn_back { background: #FFE5D4; color: #111;} 
.blog_back a.article_btn_prev ,.blog_back a.article_btn_next { background: transparent; color: #ffe5d4; border: 1px solid;}
.blog_back { width: 600px; margin: 0 auto;}

/*相關推薦*/
.news_related h6 span:before{font-size: 23px; color: #ffffff; font-family: "Noto Serif TC Medium"; font-weight: 500;  letter-spacing: 5px;}

/*首頁*/
.module_i_news { padding: 110px 100px;}
.module_i_news section { max-width: 100%; margin: 0 auto; display: flex; flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
/*標題*/
.module_i_news .title_i_box {  margin-bottom: 0px;  width: 20%;position: relative;text-align: left;}
.module_i_news .title_i_box:before { content: "News";  color: #FFE5D4; font-family: "Noto Serif TC Medium";
        font-size: 4vw; position: absolute; left: 0;  top: -10px;}
.module_i_news .title_i_box h4 { font-size: 25px;  color: #ffffff; font-weight: 500; font-family: "Noto Serif TC Medium"; 
  letter-spacing: 5px;position: relative; padding-top: 100px; left: 9px;}
.module_i_news .title_i_box h4:before { content: ""; position: absolute; left: -7px; top: 100px; background: #785E52; width: 18px; height: 18px; z-index: -1;}

/*列表*/
.module_i_news_list { width: calc(100% - 20%);padding: 0;}
.i_blog_ri h5 { font-size: 19px; color: #ffffff;}
.i_blog_ri p {color: #ffffff;}
.module_i_news ul { grid-gap: 60px;}
.module_i_news li:nth-child(n+3) { display: none;}
.module_i_news li a { grid-template-columns: 50% 1fr; grid-gap: 30px;padding: 20px;}
.module_i_news li a:after {background: transparent; border: 1px #424242 solid; }

/*hover*/
.module_i_news li a:before {right: 25px; bottom: 25px;opacity: 1;}
.module_i_news li a:hover:before, .module_i_news li a:hover:after { letter-spacing: 2px;}

.i_blog_ri { padding: 30px 5px;}
.i_blog_ri em {margin: 10px 0 20px;}
.i_blog_ri p { color: #ffffff; padding-top: 15px; border-top: 1px solid #666;}

/*按鈕*/
.i_blog_b {  margin: 0 auto 0 0;width: 100%;}
.i_blog_b a { margin-top: -135px; background: #222; border-radius: 99em; width: 6vw; position: relative;
        font-size: 13px; height: 6vw; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.i_blog_b a > b { font-weight: 300;}
.i_blog_b a:before { content: ""; border-radius: 99em; width: 5vw;  height: 5vw; border: 1px solid #666666; position: absolute;}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*相本分類全版面 ( 限制最寬2000px
.work_page .main_part { max-width:2000px;}
.work_page .show_content { padding:0; width:100%;}
.work_page .show-list .item { width:33%; display:inline-block; float:none; margin:0; padding:0;}
@media screen and (max-width: 768px) {
.work_page .show-list .item { width:49%;}
}
@media screen and (max-width: 570px) {
.work_page .show-list .item { width:100%;}
}
.work_page .show-list .item a { max-width:100%;}
.work_page .show-list .show_pic { height:auto; line-height:0;}
.work_page .show-list .show_pic img { max-width:100%; max-height:100%;}
.work_page .show-list .show_name { position:absolute; top:50%; right:10%; width:80%; height:auto; line-height:160%; font-size: 20px; color: #FFFFFF !important; border: solid 1px #fff; text-align: center; margin: -20px 0 0 -120px; padding:5px 20px; transition:all ease-in .3s; opacity:0;}
.work_page .show-list .item:hover .show_name {opacity:1;}
*/

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*相本列表
.work_info_page .main_part { max-width:2000px;}
.work_info_page .show_content { padding:0; width:100%;}
.work_info_page .subalbum-menu { text-align:center;}
.work_info_page .subalbum-menu h2 { float:none;}
.work_info_page .pic-list .item { margin:0; padding:10px; width:49%; float:none; display:inline-block;}
@media screen and (max-width: 768px) {
.work_info_page .pic-list .item { width:100%;}
}
.work_info_page .pic-list .show_pic { height:auto; line-height:0;}
.work_info_page .pic-list .show_pic img { max-width:100%; max-height:100%;}
.work_info_page .pic-list .item a { max-width:100%; pointer-events: none; cursor: default; } 取消連結被點擊效果
*/

/*相簿*/
/*列表*/
.show-list { grid-gap: 50px 20px;}
.overlay {  display: none !important;}
.show-list .show_name {  color: #fff; margin-top: 15px;  text-align: center;  letter-spacing: 5px; font-size: 19px;}

/*hover*/
.show-list .show_pic {transition: 0.5s; }
.show-list .item:hover .show_pic { padding: 15px;}
.show-list .item:hover .show_pic:before {  border-top: 2px solid #666;  border-left: 2px solid #666;}
.show-list .item:hover .show_pic:after {  border-bottom: 2px solid #666;  border-right: 2px solid #666;}
.show-list .show_pic:before {
        content: ""; width: 20px; height: 20px;  display: block;
        box-sizing: border-box; border-top: 2px solid #ffffff00; border-left: 2px solid #ffffff00;
        position: absolute; top: 0; left: 0;  transition: all .3s linear;z-index: 1;}
.show-list .show_pic:after {
        content: "";  width: 20px; height: 20px; display: block;  box-sizing: border-box;
        border-bottom: 2px solid #ffffff00;  border-right: 2px solid #ffffff00; position: absolute; 
         bottom: 0;  right: 0; transition: all .3s linear;z-index: 1;}
.show-list .item:hover .show_name { color: #FFE5D4;}
/*.show-list .show_pic:hover img { transform:scale(1.1);  transition: 0.8s;}*/

/*次分類*/ 
.subalbum-menu { margin: 0px; padding: 0px;}
.subalbum-menu h2 { display: none !important;}       
.other_subalbum li { background: transparent;} 
.other_subalbum li a p {  line-height: 2; text-align: center;  color: #fff;  font-size: 17px; letter-spacing: 2px; padding-top: 10px;}
.show-list .item a:hover p { color: #FFE5D4;}

/*內頁*/
.album_descrip { color: #ffffff;   line-height: 1.4;  letter-spacing: 2px;  font-size: 16px;  padding: 0px 15px; border-left: 4px solid #ffe5d4; margin-top: 25px; margin-bottom: 60px;}
.pic-list .item h6 { color: #bcbcbc;}

/*分類按鈕*/
.album_fixed_title {  font-size: 15px; color: #ffffff;background: transparent;}
.other_album_choice li { background: #666;}
.other_album_choice li:hover { background: #999;}
.other_album_choice li a i.fa-solid.fa-right-from-bracket { margin: 0 10px;  display: none;}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
@media screen and (max-width: 1600px) {
/*文章*/
.module_i_news { padding: 110px 50px;}
.module_i_news ul { grid-gap: 30px;}
.i_blog_b a { margin-top: -100px;}
.animated-arrow {line-height: 40px;}
}

@media screen and (max-width: 1300px) {
/*文章*/
.module_i_news .title_i_box { margin-bottom: 20px; width: 100%; text-align: center;}
.module_i_news .title_i_box h4 {left: 5px; padding-top: 75px; width: fit-content; margin: 0 auto;}
.module_i_news .title_i_box h4:before { left: -9px;top: 75px;}
.module_i_news .title_i_box:before { left: 50%;  transform: translateX(-50%);}

.module_i_news_list { width: 100%;}
.i_blog_b {  margin: 0 auto; width: fit-content;}
.i_blog_b a:before { width: 6vw; height: 6vw;}
.i_blog_b a { margin-top: 30px; width: 7vw; height: 7vw;}
}
@media screen and (max-width: 1250px) {
}
@media screen and (max-width: 1090px) {
/*文章*/
.module_i_news ul {grid-template-columns: 1fr 1fr;  grid-gap: 10px;}
.module_i_news li a {grid-template-columns: 1fr;}
.i_blog_b a {width: 110px; height: 110px; }
.i_blog_b a:before {width: 90px; height: 90px; }
}

@media screen and (max-width: 980px) {
/*banner*/
.banner:before {padding-bottom: calc(100% / 1 * 0.25); bottom: 12%;}

/*文章*/
.module_i_news { padding: 80px 20px;}
.module_i_news .title_i_box { margin-bottom: 40px;}
.module_i_news .title_i_box h4 {padding-top: 60px;}

/*footer*/
.footer { padding: 50px 50px 0 30px;}
.footer.with_shopping_mode { padding: 30px 20px 100px;}
.footer_info {  grid-template-columns: 1fr; }
.box_link {order: 0; top: 0px;height: auto;}
.footer_info ul {align-items: flex-start; align-content: flex-start; padding: 20px 10px 10px;}
.footer_menu a { padding: 5px 15px 5px 0px;}

/*LOGO*/
.footer_logo { max-width: 120px; padding: 10px;}

}

@media screen and (max-width: 960px) {
/*文章*/
/*列表*/
.subbox_item a { grid-template-columns: 1fr; grid-gap: 20px;}
.blog_subbox { grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.subbox_item { border-bottom: unset; }

}

@media screen and (max-width: 850px) {
.module_i_news .title_i_box:before {top: 0px;font-size: 40px;}
}

@media screen and (max-width: 768px) {
/*all*/
.main_part { padding: 50px 20px;}

/* 開啟手機板下方按鈕所需設定 */
#to_top { bottom:60px;}
#bottom_menu {background: #262626; }
#bottom_menu li { border-right: unset;}
#bottom_menu li a { color: #b7b7b7;}

/*banner*/
.banner {justify-content: flex-start; height: 600px; padding: 0px 35px;}
.banner:after {bottom: 55%;left: 5%;}
.banner:before { padding-bottom: calc(100% / 1 * 0.4); right: auto;bottom: 0%;
background-position: center !important; left: 50%;  transform: translateX(-50%); }

.banner h5 { top: 160px; }
.banner h5:after { bottom: 60px; font-size: 45px;}
.banner h5:before { left: 0px; bottom: 14px;}

/*文章*/
 .module_i_news li {border-bottom: unset;}

/*列表*/
.blog_box {flex-wrap: wrap; }
.blog_le { position: inherit; width: 100%;  letter-spacing: 1px; top: auto; height: auto;}
.blog_ri { width: 100%;}

/*購物車*/
.product_menu_list,
.products-list,
.product-wrapper { width: 100%;}
.product-layer-two { margin-right: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-gap: 5px;}

/*列表*/
.product_menu_list>h5 { font-size: 1.3em;}
.product_menu_list a.pd_menu_toggle { color: #fff; }
.product_page .product-layer-two,
.product_page .products-list { width: 100%; border-right: none;}
.product-layer-two { grid-template-columns: 1fr;}


.product_page .product_menu_list>h5{display: block;color: #fff;}

.product_page .show_content > a { order: 1;}
.product_page ul.products-list { order: 2;}
.product_page ul.page { order: 3;}
.product_page .product_menu_list {width: 100%; order: 0; min-height: unset;position: inherit;}

/*結帳*/
.car_page .information_left { margin: 50px auto 20px; }

}

@media screen and (max-width: 600px) { 
#content {background-position: top center, bottom right; }

/*大圖*/
.bannerindex .swiper-slide img { display:none; }
.bannerindex .swiper-banner:before {  top: -4%; right: -29%;  padding-bottom: calc(100% / 1 * 0.5);}
.bannerindex .swiper-slide:nth-child(1).swiper-slide-active:before , .bannerindex .swiper-slide:nth-child(2).swiper-slide-active:before{ 
        background-position: left;padding-bottom: calc(100% / 1 * 0.4);top: 107px; left: 8%;}
.bannerindex .swiper-slide:nth-child(1).swiper-slide-active:after {
         background-position: right;padding-bottom: calc(100% / 1 * 0.3); right: 4%;}

.bannerindex .swiper-backface-hidden .swiper-wrapper { width: 100% !important; aspect-ratio: 9 / 12;}
.bannerindex .swiper-slide:nth-child(1).swiper-slide-active { background-image: url(https://pic03.eapple.com.tw/ckbikestudio/banner01_ph.jpg); background-position: top; background-size:cover;}
.bannerindex .swiper-slide:nth-child(2).swiper-slide-active { background-image: url(https://pic03.eapple.com.tw/ckbikestudio/banner02_ph.jpg); background-position: top; background-size:cover;}

/*footer*/
.footer_info { padding: 0px; }
.footer_info ul { padding: 10px;}

/*banner*/
.banner { height: 500px;}
.banner:before { padding-bottom: calc(100% / 1 * 0.46);}
.banner h5 { font-size: 20px; left: 0%; top: 120px; }
.banner:after { bottom: 58%;left: 8%;font-size: 14px;}
.banner h5:after { bottom: 60px; font-size: 30px;  }

/*文章*/
.module_i_news ul {grid-template-columns: 1fr;}
.module_i_news li a { grid-gap: 0px; }

/*列表*/
.blog_subbox { grid-template-columns: 1fr;}

/*相簿*/
.show-list { grid-template-columns: 1fr;}

/*購物車*/
.products-list .item a { text-align: left;}
.products-list .name { font-size: 15px;}
}

@media screen and (max-width: 470px) { 
/*banner*/
.banner { height: 450px;}
.banner:after { bottom: 53%;}
}