/*!
 * Start Bootstrap - Busines Frontpage (https://startbootstrap.com/template-overviews/business-frontpage)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-business-frontpage/blob/master/LICENSE)
 */




/* ------------------ common ------------------ */ 
* {margin: 0; padding: 0; outline: 0;}
* {margin: 0; padding: 0; outline: 0;}
*, *:before, *:after {  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;   }
html, body {
 font-size: 10px;
 font-family: 'Roboto Condensed', sans-serif,"微軟正黑體", Microsoft JhengHei;
 line-height: 1.4;
 color: #221e1f;
 background-color: #f2f2f2;
}
a{ color: #484848; text-decoration: none; font-size: 1.6rem;}
a:hover{text-decoration: underline;  color: #000; font-size: 1.6rem; }
ol, ul, li {    margin: 0; padding:0; list-style-type: none;  font-size: 1.6rem;}
.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}


hr{ height: 0;font-size: 0;border: 0; border-bottom: 2px solid #efefef; background-color: #fff; padding:0; margin: 0;color: #666666; }


figure{margin:15px 0 35px 0;  font-size: 1.6rem; }
figure img{max-width:100% ; width: auto; }
figcaption{ color: #878787; font-size: 1.6rem; margin-top: 10px;}


.form-control{

  min-height:36px; 
  color: #7f7f7f; 
  font-size: 1.6rem; 
  border-radius: 0;
  padding: 0 8px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #cdd3d1;
}
textarea.form-control.inp-addr{ width:70% ; display: inline-block; vertical-align: bottom;height: 36px; min-height: 36px;}
input.form-control.inp-addr{  width:calc(30% - 30px); margin-right: 30px; display: inline-block;  }
button{ cursor: pointer; font-size: 1.6rem; }



textarea.form-control{min-height: 330px; padding-top: 8px;}
.form-control::placeholder { color: #a3a3a3; }
.btn{


 cursor: pointer; 

    font-size: 1.6rem;
    font-family: 'Roboto Condensed', sans-serif,"微軟正黑體", Microsoft JhengHei;
    background-color: #dddddd;
    border:0;
    border-radius: 0;
    
    min-width: 170px;
    padding:8px 20px; 
  height: 36px; 
  margin: 0 auto;

    color: #84888c;
}

.btn:hover{ opacity: 0.7; text-decoration:none; color: #84888c;}
.order-info li a.btn{

border-radius: 0;
    padding: 5px 10px  5px 10px; 
    color: #666;
    font-size: 14px;
    text-decoration: none;
     float: right;
     display: inline-block;
     min-width: auto;
     height: auto;
margin: 0;
  }



.form-control{color:#676767; font-size: 1.6rem;}
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #ffe100;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(47,148,245,.25);
}


.btn-shop{
   
  font-size: 2.8rem;
  color: #fff;
   background-color: #009e96;
  font-family: 'Roboto Condensed', sans-serif,"微軟正黑體", Microsoft JhengHei;
  padding:5px 20px; 
  min-height:  40px; 
    outline: 0;
    border: 0;
    line-height: 1;
}
.btn-shop:hover{background-color: #008881;}




.btn-shop img{ margin-right: 5px; }


.btn-outline{ 
  color: #cdd3d1;  
  border:1px solid #cdd3d1; 
  padding:5px 10px; 
  height: 36px; 
  background-color: #fff;

    font-size: 14px;
}
.btn-outline:hover{opacity: 0.8;}




.btn-primary {
    color: #fff;
    font-size: 1.6rem;
    font-family: 'Roboto Condensed', sans-serif,"微軟正黑體", Microsoft JhengHei;
    background-color: #009e96;
    border:0;
    border-radius: 0;
    
    min-width: 170px;
    padding:5px 10px; 
  height: 36px; 
  margin: 0 auto;


}
.btn-primary:hover, .btn-primary:focus{background-color: #008881;color: #fff; opacity: 1;}




#wrapper{ padding-top: 77px; }
.container{ width: 1280px; max-width: 100%; margin: 0 auto; position: relative; padding-left: 40px; padding-right: 40px;}
.inner-page .container{padding-left: 0px; padding-right: 0px;}

.main-wrapper, footer, .nav-bar, .header, .inner-page:before{  width: 100%;}
.shop-page .container{ width: 992px; margin: 0 auto; }

@media (max-width:1279px){

   #wrapper {
    padding-top:48px;
}

}


/* /////////////////////////////////////header/////////////////////////// */
.header{
  
  background-color: #fff; 
 width: 100%;
 border-bottom: 10px solid #009e96;
padding: 0;
  
 
}
.header .logo{  display: inline-block; width: 192px; padding: 17px 0 0 0;    margin-bottom: -3px; }

#navbarNavSearch{background-color: #fff ; width: 100%;}
#navbarNavSearch .search_box{
  width: 200px;
  height: 42px;
  background-color: #fff;
  border-radius: 3px;
  padding: 0 0 0 0px;
  position: absolute;
  left: 180px;
  top: -22px;
}
#navbarNavSearch .search_box input, #navbarNavSearch  .search_box button{ display: inline-block; height: 99%;  width: 100%;  border: 0;  font-size: 1.6rem; font-family: 'Roboto Condensed', sans-serif,"微軟正黑體", Microsoft JhengHei;}
#navbarNavSearch .search_box input{padding:0 75px 0 8px;border-radius: 3px; height: 42px; }
#navbarNavSearch .search_box input:focus{ box-shadow: 0 0 4px rgba(0, 0,0, .5) }
#navbarNavSearch .search_box button{width: 40px; position: absolute;right: 3px; top: 0px; background-color: transparent; }
#navbarNavSearch .search_box button:hover{ opacity: 0.7; }

.header .google-ad{position: absolute; left: 599px;    top: -29px;width: 320px; height: 100px;}



.header .link{ position: absolute; bottom: 0px; right: 0; width: 280px; text-align: right;  display: flex; justify-content: flex-end;}
.header .link li{ display: inline; /* flex: 1;*/ padding:0 0 0 16px;}
.header .link li a{ color: #fff; padding: 10px 0; display: block; text-align: right;}

.header .link .num{
   
    border-radius: 15px;
    background-color: #e4007f;
    padding: 5px 10px;
    color: #fff;
    display: inline-block;
    position: absolute;
    right: -7px;
    top: 0px;
    font-size: 12px;
    margin-left: 0;
} 
.header .link .num:empty{display: none;}


.link .header-user ul:before{content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #009e96 transparent;
    position: absolute;
    top: -12px;
    margin-left:-6px;
    left: 50%; }

.link .header-user .dropdown-toggle::after{display: none;}
.link .header-user ul{

  width: 150px;
background-color: #009e96;
    position: absolute;
    top: 100%;
    right: 10px;
    left: auto;
    z-index: 3;

    padding: 10px 0 0;
    border: 0px ;
    border-radius: 0;
    margin-top: 0;
    
}
.link .header-user ul li{display: block; padding:0px 0; text-align: center;}
.link .header-user ul li a{font-size: 16px;color: #fff;display: block; padding:5px 15px;text-align: center;}
.link .header-user ul li a:hover, .link .header-user ul li a.current{ color: #fff; text-decoration: none;background-color: #008881; }
 
.header .link li.header-cart { position: relative; }

    /* compressed */
    .navbar.compressed { /* padding: 10px 0 10px 0;*/}
    .navbar.compressed .google-ad{ display: none; }
    .navbar.compressed #navbarNavSearch .search_box{/*top:-19px;*/}


@media (min-width:1279px){
   
    .product-page  .hamburger-menu-box{
      width: 224px;
      margin-left: 0; 
      margin-right: auto;
    }
    .product-page  .hamburger-menu-box li .menu-drop .menu-out-box{
      position: absolute;
      left: 100% !important;
      top: 0!important;
      width: 430px;}
    .product-page  .hamburger-menu-box li .menu-drop .menu-out-box li li:after{padding-left: 30px;}
    

}


.navbar-toggler{ background-color: transparent;  border: 0;padding: 10px 0;}
.navbar .navbar-toggler-icon{ 
  background: transparent url('../img/icon/icon_header_close.png') 0 0 no-repeat; 
  background-size: cover;
  height: 36px; width: 36px;
  cursor: pointer;
}
.navbar-toggler.collapsed.menu-btn .navbar-toggler-icon{ background: transparent url('../img/icon/icon_header_hamburger.png') 0 0 no-repeat;background-size: cover; }
.navbar-toggler.collapsed.Search-btn .navbar-toggler-icon{ background-image:url('../img/icon/icon_header_search.png'); }
.navbar .navbar-toggler-icon:hover, .navbar .navbar-toggler-icon:focus{ opacity: 0.8; }

#navbarNavSearch{ display: flex;  position: fixed; z-index: 1049;}

/* #navbarNavSearch */
        #navbarNavSearch.collapse{display: none;}
        #navbarNavSearch.collapse.show, #navbarNavSearch.collapsing{display: block; width: 400px; position: fixed; z-index: 2; margin-left: -200px; right: calc(50% - 640px + 110px);  top:77px; padding:10px; background-color: #fff;
            webkit-box-shadow: 0 0px 4px rgba(0,0,0,0.20);
              -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.20);
              box-shadow: 0 0px 4px rgba(0,0,0,0.20);
            }
                  
        #navbarNavSearch.show .search_box{ position: static; width: 100%; }
        #navbarNavDropdown {
            position: fixed;
            z-index: 9999;
            width: 220px;
            right: 40px;
            top: 52px;
        }
        .navbar-toggler.collapsed.Search-btn{ display: inline-block; }
        .navbar-toggler.collapsed.menu-btn{ display: none; }

  .navbar>.container{ justify-content: flex-start; }
@media (max-width:1279px){

        .header .google-ad{ display: none; }
        .navbar-toggler.collapsed.menu-btn{ display: inline-block; }
        #navbarNavSearch.collapse.show, #navbarNavSearch.collapsing{ width: 100%; margin-left: 0px; right: 0; left: 0; top:48px; }
        .navbar .navbar-toggler-icon {    height: 28px; width: 28px;  }
        .header {
           
            border-bottom: 5px solid #009e96;

        }

        .header .link{ position: static; width: auto;padding-right: 10px; }
        .header .link .icn-user{ width: auto; }
        .header .link li{width: 46px;}
        .header .link li a{font-size: 0;}

        .header .link .num { padding: 1px 6px;  right: -4px;    top: 5px   }

        .link .header-user ul:before{left:auto; right:52px}
        .header .link .header-user ul{ right:96px; top: 43px;}
        .header .link .header-user li{width: auto;}

         .navbar .google-ad{ display: none; } 
        
        
         .navbar{ height: 48px; padding: 0; }
         .header .logo {height: 40px; padding-top: 0;    margin-top: -2px; width: auto;}
         .header .logo img{width: auto; height: 100%;}
          .navbar>.container{ justify-content: space-between; }

          .navbar.compressed{padding:0}

          .header .link  .icn:before{ height: 28px; width: 28px;}
          /** Bootstrap Multi level Navbar Menu ***/

          .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu>.dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }

        .dropdown-submenu:hover>.dropdown-menu {
            display: block;
        }

        .dropdown-submenu>a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }

        .dropdown-submenu:hover>a:after {
            border-left-color: #fff;
        }

        .dropdown-submenu.pull-left {
            float: none;
        }

        .dropdown-submenu.pull-left>.dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

}


.nav-bar{display: none;}
@media (max-width:1023px){
.container{     padding-left: 0px;    padding-right: 0px; }
.header .logo {  margin-left: 10px;}
.header .link li {    padding: 0 0 0 0px;width: 35px;}
#navbarNavDropdown {            right: 0px;}
   .header .link .header-user ul{ right:35px; top: 43px;}
}
@media (min-width:1280px){

/* nav bar */
.nav-bar{ 
 display: block;
 height: 0;


}
.nav-bar .list-item{
    position: fixed;
    top: 33px;
    z-index: 1031;
    left: calc( 50% - 640px + 40px + 220px);
    right: calc(50% - 640px + 160px);
}
.dropdown-item{ color: #fff; }
.nav-bar .dropdown-toggle::after{display: none;}
.nav-bar .navbar-nav{ display: flex; flex-direction: row; justify-content: space-between;}
.nav-bar .navbar-nav .show .nav-link, .nav-bar .navbar-nav .active .nav-link{ color: #009e96; }
.nav-bar .dropdown-menu{margin-top: 0; padding:10px 0 0 0;border:0; border-radius: 0; background-color: #009e96; 


}

.nav-item:hover  .dropdown-menu{ display: block; position: absolute;
position: absolute;
    transform: translate3d(0px, 32px, 0px);
    top: 0px;
    left: 0px;
    will-change: transform;}

.nav-item:hover  .dropdown-menu .dropdown-item:hover {
    background-color: #008881;color: #fff; 
}
.nav-item:hover  .dropdown-menu .dropdown-item img{ vertical-align: text-bottom; }

.nav-bar .dropdown-menu:before{
  content: '';
  display: block;
    width:0px;
    height:0px;
    border-width:6px;
    border-style:solid;
    border-color:transparent transparent #009e96 transparent ;
    position:absolute;
    top:-12px;
    left:20px;

}




}

.path-box{ display: block; }


/* footer */

footer{ background-color: #009e96; text-align: center; color: #fff; padding:28px 0;  font-size: 1.6rem; letter-spacing: 1px; position:relative; 
  min-height: 72px;

}
footer .container{
  display: flex;
flex-direction: row;
justify-content: space-between;

}


footer p{ text-align: left; color: #fff; margin-bottom: 0;}

footer ul{ text-align: center;   text-align: right; }
footer li{ display: inline-block; color: #fff; margin-left: 35px; }
footer li a{color: #fff; }
footer li a:hover{color: #ddd;text-decoration: none; }
footer li:after{ content: ' '; font-size: 1rem;  color: #b8b7b7; margin-left:5px;  vertical-align: middle;}
footer li:last-of-type:after{ content: '';  margin-left:0px; }

.cp-text{ 
  text-align: center; 
  border-top: 1px solid rgba(255,255,255,.2);

  margin-top:2rem;
  padding-top: 2rem;
  width: 100%;

}
footer  span{display: inline-block;}

.inner-page footer .container,
.cp-text{padding-left: 40px;    padding-right: 40px;}

@media (max-width:1023px){
  footer .container{ flex-direction: column;}
  footer p, footer ul{ width: 100%; float: none; text-align: center; }
  footer ul li{margin-left: 0;}
  footer p{   margin-bottom: 1rem;}
  .cp-text{padding-left: 15px;    padding-right: 15px;}
}





/* ====Modul==== page */
.icn:before{ 
    display: inline-block; 
    width: 36px; 
    height: 36px; 
    background-position: 50% 50%; 
    background-size: cover; 
    background-repeat: no-repeat; 
    content: '';

    vertical-align: text-bottom;
 }
.icn-user:before{background-image: url('../img/icon/icon_header_user.png');}
.icn-user-unlogin:before{background-image: url('../img/icon/icon_header_user_unlogin.png');}
.icn-shopcart:before{ background-image: url('../img/icon/icon_header_cart.png'); }
.icn-search:before{ background-image: url('../img/icon/icon_header_search.png'); }
.icn-humber:before{ background-image: url('../img/icon/icon_header_humber.png'); }


.icn-video:before{
  content: '▶';
  color: #fff;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size:20px;
  text-align: left;
  background-color:rgba(35,184,188,0.8) ;
  box-shadow: 0 0 5px rgba(0,0,0,.3);

  width: 48px; 
  height: 48px;
  line-height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  border-radius: 24px;
  padding-left: 16px;
  

  
}
.swiper-slide.icn-video:before{
  width: 24px; 
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 12px;
  padding-left: 8px;
  
}




/* ====Modul==== modal */
.modal{  background-color: rgba(0, 0, 0,0.7);}
.modal-dialog {
    margin-top: 30px;

}
.modal-content .close{
 position: absolute; 
  right: -20px;
    top: -20px;
    width: 24px;
    height: 24px;
  padding: 0;  margin: 0;
  background: url('../img/icon/close.png');
  text-indent: -9999px;
  cursor: pointer;
  z-index: 2;
opacity: .9;


}
.Modal-additional .modal-dialog {
    max-width: 1000px;
       
}
.Modal-additional .modal-body{
    padding:0 30px;
}

.modal-content{
  border: 0px solid #a3a3a3; 
  border-radius: 0;
  display: block;
  padding-bottom: 30px;
  -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

}

.modal-header{display: block;border-bottom: 0px solid #e9ecef; padding-top: 35px;}
.modal-header .modal-title{ 
  font-size: 2.4rem; 
  color: #221e1f;  
  width:100%; 
  font-weight: bolder; 
  text-align: center; 
  
}
.modal-header p{
  font-size:1.6rem;
   color: #8e8e8e;   
   width:100%; 
   text-align: center; 
    padding: 0;
    padding-bottom: 14px;
 }


.modal-content a{ color: #2f94fe;   padding-left: 10px;}
.modal-content a:hover{text-decoration: underline;}


.modal-body, .modal-footer{ padding: 0 60px; }
.modal-body p{
  font-size:1.6rem;
   color: #7f7f7f;   
   width:100%;  
   line-height: 1.4;

 }

 .modal-body ol{ 
  list-style-type:decimal ;
  font-size:1.4rem;
   color: #8e8e8e;   
   width:100%;  
   line-height: 1.4;

 } 
 
 .modal-body li{padding-bottom: 12px;list-style-type: decimal;}

.modal-body{padding-top:30px;}
.modal-body .col-form-label{ font-size: 1.6rem; font-weight: bold; width: 100%; float: none;
    text-align: left;    padding-right: 0px; padding-bottom: 10px;}

.modal-body .form-group{ padding-bottom: 18px; }
.modal-body .form-group .form-control{ border: 1px solid #cdd3d1;   float: none; width:100%;}

.text-forget{ float: right; }

.modal-footer{  text-align: center; border-top:0; display: block;padding-top: 10px;}

.modal-footer p{padding:15px 0;font-size: 1.6rem;}


.modal-content .btn{margin-top: 10px;}




@media (max-width:640px){

    .modal-content .close {
        position: absolute;
        right: -5px;
        top: -26px;
    }
    .Modal-additional .modal-body{
    padding:0 15px;
}


}

/* //////////////////////////首頁////////////////////////// */

.home h2{ 
  text-align: center;
  position: relative;
  margin-bottom: 50px;
}
.home h2 .title{
  ont-size: 2.8rem; 
  color: #221e1f; 
  border-bottom: 4px solid #fff100; 
  display: inline-block; 
  text-align: center;
  font-weight: bolder;
  padding-bottom: 5px;
  }

.home h2 .en{
  color: #a3a3a3; 
  font-size: 1.4rem; 
  display: inline-block; 
  position: absolute;
  left: 50%;
  top: -20px;

  
}
.home h2 .en:before{
  content: '';
  border-left:2px solid #c0c0c0; 
  padding: 42px 0 0 8px;


}

.home-news, .home-professional,  .home-popular{ padding: 62px 50px 50px 50px; position: relative; }
.home-news{ background-color: #f9fafb; }
.home-popular{  background:#e8e8e8 url('../img/goodidea_pattern_bg.png');}
.home-professional{  background:#f9fafb url('../img/goodidea_pattern_bg.png');}
.home-professional .card-img{border-top: 1px solid #ededed;}


.home-popular:before{
content: '';
position: absolute;
right: 0;
top: -160px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px  200px  ;
border-color: transparent transparent rgba(255,241,0,0.4)  transparent ;
font-size: 0;
}
.home-professional:before{
content: '';
position: absolute;
left: 0;
top: -100px;
width: 0;
height: 0;
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent rgba(255,241,0,0.6);
font-size: 0;
}

.home_banner{ 
  background-color: #808a94;

  -moz-box-shadow:inset 0 -8px 0 #727b84;
  -webkit-box-shadow:inset 0 -8px 0 #727b84;
  box-shadow:inset 0 -8px 0 #727b84;
}

.home_banner:before{border-bottom:8px solid #727b84}




h1{border-bottom: 1px solid #b9b9b9; height: 14px; text-align: center; margin-bottom:17px; margin-top: 17px;}
h1 span{ color: #767676; font-size:2.2rem; padding:0 15px; background-color:#f0f0f0;}


.product-wrap{ font-size: 0; padding: 0px 0 0px 0; }

.product-grid-3, .product-grid-6, .product-grid-5, .product-grid-ad, .product-grid-ad-box, .product-grid-vertical{  display: inline-block; padding: 0 10px; }
.product-grid-ad-box{ padding: 0; }


/* //////////////////////////內頁////////////////////////// */

.product-wrap{display: flex;flex-wrap: wrap;}
.product-wrap:after{content: ''; clear: both; display: block; }

.leftside{width: 245px; font-size: 1.6rem; float: left; margin-bottom: 80px;}
.mainside{ width:calc( 100% - 245px ); float: right; padding:0 0 0 21px; }


.inner-page:before{position: absolute; width: 100%; left: 0;}
.product-grid-6{  width:calc(100% / 6); }
.product-grid-5{width:calc(100% / 5);}
.product-grid-3{width:calc(100% / 3);}

.product-grid-ad-box{width:calc(100% / 5 * 4); }

.product-grid-ad{width:50%; margin-bottom: 20px;}
.product-grid-ad img{width: 100%;}

.product-grid-vertical {display: inline-flex; flex-direction: column;width:calc(100% / 5); }
.product-grid-vertical .product-grid-5{padding: 0 0px; width:100%;}




.compare-wrap{ background-color: #009e96; margin-bottom: 80px; padding-top: 20px;}
.compare-wrap .container{ display: flex; align-items: center;  justify-content:flex-end}
.compare-wrap  .product-grid-5{padding:0 20px 0 0; position: relative;  }

.compare-wrap  .card-module{ padding-left: 20px; padding-right: 20px;}

.compare-wrap   .wording{ font-size: 2rem; color: #ffffff; line-height: 1; display: inline-block;  width:calc(100% / 5); text-align: center; padding:0 0;}
.compare-wrap   .wording .btn-compare {margin-top: 20px;}
.compare-wrap   .btn-compare a{padding: 5px; background-color: #fff; font-size: 1.9em; color: #009e96;}
.compare-wrap   .btn-compare a:hover{  text-decoration: none; opacity: .9; }
.close-item{ background: url('../img/icon/icon_header_close.png') 0 0 no-repeat; background-size: cover; width: 20px; height: 20px;
display: block; position: absolute;right: 25px;    top: 10px; z-index: 2;
}

.close-item:hover, .close-item:focus{ opacity: 0.7; cursor: pointer; }

.compare-wrap-page{ justify-content: center; padding-top: 45px; padding-bottom: 80px; }
.compare-wrap-page .product-grid-5{ position: relative;  }
.compare-wrap-page .close-item{right: 15px;}
.compare-wrap-page .card-module{ padding-left: 20px; padding-right: 20px;}
.compare-wrap-page .card-info{
background-color: #fff;
    position: relative;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block;
    padding: 15px;
}

.compare-wrap-page .card-info li{margin-bottom: 1rem; font-size: 1.6rem;}
.compare-wrap-page .card-info li:last-of-type{margin-bottom: 0;}
.compare-wrap-page .card-info li .title{display: block;}

.compare-wrap-page .btn-shop{font-size: 3.8rem; background-color: #009e96;  display: block; color: #fff; text-align: center;}
.compare-wrap-page .btn-shop:hover, .compare-wrap-page .btn-shop:active{background-color: #008881;}

@media (max-width:1279px){
  .product-grid-6, .product-grid-5{ width:25%; }
  .product-grid-ad-box{width:100%; }
  .product-grid-ad{ width: 50%; }
  .product-grid-vertical{ flex-direction:row; width:50%;padding: 0 0px;}
  .product-grid-vertical .product-grid-5{padding: 0 10px; width:50%;}
}
@media (max-width:1023px){
  .product-wrap{padding-right: 10px; padding-left: 10px; padding-top: 10px;}
  .product-grid-6,  .product-grid-5{ width:calc(100% / 3); padding: 0 5px;}
  
  .product-grid-vertical{ flex-direction:row; width:calc(100% / 3 * 2);padding: 0 0px;}
  .product-grid-vertical .product-grid-5{padding: 0 5px; width:50%;}

  .product-grid-ad-box{
   margin-left: -40px;
    margin-right: -40px;
    margin-top: -10px;
    width: calc(100% + 75px)
  }
  .product-grid-ad-box .product-grid-ad{padding:0;}
  .product-grid-ad-box .product-grid-ad:nth-of-type(1){ padding-right: 5px; }
  .product-grid-ad-box .product-grid-ad:nth-of-type(2){padding-left: 5px;}

.compare-wrap .container{ justify-content: center; }

  .compare-wrap  .card-module{ padding-left: 10px; padding-right: 10px;}
  .compare-wrap  .product-grid-5{ display: none; }
  .compare-wrap  .product-grid-5:nth-of-type(1), .compare-wrap  .product-grid-5:nth-of-type(2){ display: block; }
  .compare-wrap  .wording{width:calc(100% / 4);padding:0 0px; font-size: 1.6rem;}
  .close-item{ width: 12px; height: 12px; }
}

@media (max-width:639px){
.product-grid-6,  .product-grid-5{ width:calc(100% / 2);}
 .product-grid-vertical{ width:calc(100% / 2 * 2);padding: 0 0px;}
}


.path {font-size: 1.6rem; color: #88929b; padding: 17px 10px 15px 10px; line-height:1.2;}
.path a{font-size: 1.6rem; color: #4a4a4a;}
.path a:after{ content: ' / '; display: inline-block; color: #88929b; padding:0 8px;}

h2{ font-size: 2.4rem; color: #5a5a5a; font-weight: bolder; padding: 5px 0 10px 10px; }


@media (max-width:1023px){
.leftside{display: none;}
 .mainside{ width:100%; float: none; padding:0 15px 0 15px;}
 .nav-bar .list-menu, .nav-bar .container:before{display: none;}
 .list-item {
    float: none;
    width: 100%;
    height: auto;
    min-height: 40px;
    
}
.nav-bar{height: auto;}
.path, .path a{font-size: 12px; display: none;}
}


/* //////////////////////////內頁 lfet side////////////////////////// */
.navbar-nav .nav-link {
    padding-right: 10px;
    padding-left: 0px;
   
    border-bottom: 1px solid #e5e8e8;
}
.hamburger-menu-box{ 
  background-color: #fff; 
  font-size: 0;
  padding-left: 10px;

    -webkit-box-shadow: 0 0px 4px rgba(0,0,0,0.20);
    -moz-box-shadow:  0 0px 4px rgba(0,0,0,0.20);
    box-shadow:  0 0px 4px rgba(0,0,0,0.20);
}

.hamburger-menu-box li > a{ width: 100%; padding:10px 15px; display: block;}

.hamburger-menu-box li, .hamburger-menu-box li a { font-size: 14px; color: #767676; vertical-align: text-bottom; text-align: center; }
.hamburger-menu-box li a:hover{color:#c3c8cd; text-decoration: none;}
.hamburger-menu-box li{  }


.hamburger-menu-box > li.nav-item > a:after {
   content: "";
   display: inline-block;
   cursor: pointer;
   position: absolute;
   top: 10px;
   left: 0px;
   width: 24px;
   height: 24px;
    border: 0px solid transparent;
    background: url('../img/icon/icon-triangle.png') 50% 50% no-repeat;
    background-size: cover;
    display: none;
}

.hamburger-menu-box > li.nav-item > a.dropdown-toggle-split{
  position: absolute;
   top: 10px;
   left: 0px;
   width: 24px;
   height: 24px;
   display: inline-block;
   background: url('../img/icon/icon-triangle.png') 50% 50% no-repeat;
    background-size: cover;
}
.hamburger-menu-box > li.nav-item.show  > a.dropdown-toggle-split{background: url('../img/icon/icon-triangle-down.png') 50% 50% no-repeat;    background-size: cover;}


.dropdown, .dropup {
    position: relative;
}
.navbar-nav .dropdown-menu {
    position: static;
    float: none;
}



/*.hamburger-menu-box > li.nav-item.show  > a:after{background: url('../img/icon/icon-triangle-down.png') 50% 50% no-repeat;    background-size: cover;}*/
.dropdown-toggle.active-dropdown::after{background: url('../img/icon/icon-second-triangle-down.png') 50% 50% no-repeat;    background-size: cover;}


@media (min-width:1280px){
  .navbar-nav .nav-link{border:none;}
    .leftside .dropdown-toggle.active-dropdown::after {
    background: url(../img/icon/icon-second-triangle.png) 50% 50% no-repeat;
    }
    .leftside .dropdown-toggle::after {
        background: url(../img/icon/icon-second-triangle.png) 50% 50% no-repeat;
        margin-right: 0;
    }


    .menu-out-box .dropdown-toggle.active-dropdown::after {
    background: url(../img/icon/icon-second-triangle-down.png) 50% 50% no-repeat;
    }
    .menu-out-box .dropdown-toggle::after {
        background: url(../img/icon/icon-second-triangle-up.png) 50% 50% no-repeat;
        top: 0;
        right: 0;
    }
}


    /* 第二層 */

.hamburger-menu-box li .menu-drop {
  background-color: #eaecf1;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  position: relative!important;
  bottom: 100%!important;
  transform: none!important;
  
}
.hamburger-menu-box li .menu-drop li a{color: #88929b; font-size: 14px;}
.hamburger-menu-box li .menu-drop li a.current, .hamburger-menu-box li .menu-drop li a:hover, .hamburger-menu-box li .menu-drop li a:focus{color: #009e96; background-color: transparent;}

.hamburger-menu-box li li{ position: relative; padding:10px 15px; color: #88929b;    font-size: 14px;}
.hamburger-menu-box li li a{ display: block; padding:0}


/* 第三層 */

.icon-pop{
  background: url('../img/icon/icon-second-triangle.png') 50% 50% no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 0;
  
}

.menu-out-box{
    -webkit-box-shadow: 0 0px 4px rgba(0,0,0,0.20);
    -moz-box-shadow:  0 0px 4px rgba(0,0,0,0.20);
    box-shadow:  0 0px 4px rgba(0,0,0,0.20);
    background-color: #fff;

    position: absolute;
    left: 100%;
    top: 0;
    width: 100%
    z-index: 3;
    display: none;
    padding: 10px;


}

.hamburger-menu-box li .dropdown-menu{border: 0;
border-radius: 0;}
.hamburger-menu-box li li:hover  .menu-out-box{ display: block;  }
.hamburger-menu-box li li li a{ position: relative; }
.hamburger-menu-box li .menu-drop .menu-out-box{ padding: 0px; }
.hamburger-menu-box li .menu-drop .menu-out-box, .hamburger-menu-box li .menu-drop .menu-out-box a{ color: #000; font-weight: bolder; }
.hamburger-menu-box li .menu-drop .menu-out-box a{padding: 0; }
.hamburger-menu-box li .menu-drop .menu-out-box li li a{ color:#88929b; font-weight: normal; display: inline-block; width: auto;  }

.hamburger-menu-box li .menu-drop .menu-out-box li li{ display: inline-block; padding-bottom: 15px; }
.hamburger-menu-box li .menu-drop .menu-out-box li ul{padding-top:8px;  text-align: left;}
.hamburger-menu-box li .menu-drop .menu-out-box li li:after{ content: '｜';  display: inline-block; font-size: 12px;color:#88929b; padding-left: 5px}

.hamburger-menu-box li .menu-drop .menu-out-box li li:last-of-type:after{ display: none; }
.hamburger-menu-box li .menu-drop .menu-out-box li li a:hover{ color: #009e96; }

@media (max-width:1023px){
   .leftside .navbar-collapse{display: none;}
   .leftside .navbar-collapse.show, .leftside .navbar-collapse.collapsing{display: block;}
   .menu-out-box{

    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,0.20);
    -moz-box-shadow:  0 0px 0px rgba(0,0,0,0.20);
    box-shadow:  0 0px 0px rgba(0,0,0,0.20);
    background-color: #fff;

    position: relative;
    left: 0;
    right: 0;
    top: 0;
    width:100%;
    z-index: 3;
    }

}




/* 會員 */
.leftmenu-mem-box {margin-top: 63px; margin-left: 40px;}
.leftmenu-mem-box li {padding-bottom: 25px;}
.leftmenu-mem-box li a{ color: #484f56; font-size: 16px; padding:5px 5px 5px 30px;}
.leftmenu-mem-box li a:hover, .leftmenu-mem-box li a.current{ color: #009e96; text-decoration: none; }
.leftmenu-mem-box li:nth-of-type(1) a{ background:url(../img/icon/member.png) 0 50%  no-repeat;}
.leftmenu-mem-box li:nth-of-type(2) a{ background:url(../img/icon/key.png) 0 50%  no-repeat;}
.leftmenu-mem-box li:nth-of-type(3) a{ background:url(../img/icon/record.png) 0 50%  no-repeat;}

.leftmenu-mem-box li:nth-of-type(1) a:hover, .leftmenu-mem-box li:nth-of-type(1) a.current{ background:url(../img/icon/member-blue.png) 0 50%  no-repeat;}
.leftmenu-mem-box li:nth-of-type(2) a:hover, .leftmenu-mem-box li:nth-of-type(2) a.current{ background:url(../img/icon/key-blue.png) 0 50%  no-repeat;}
.leftmenu-mem-box li:nth-of-type(3) a:hover, .leftmenu-mem-box li:nth-of-type(3) a.current{ background:url(../img/icon/record-blue.png) 0 50%  no-repeat;}


/* //////////////////////////產品內頁////////////////////////// */

.product-inner .product-img{ width: 40%; float: left; }
.product-inner .product-img .wording{padding-top:10px;}

.product-inner:after{ clear: both; content: ''; display: block; }

.product-inner .product-img .wording{ font-size: 12px; color: #aaaaaa; }

.product-inner .product-info{ width: 56%; float: right; }
.product-inner .product-info h3{ font-size: 20px; color: #000; line-height: 1.3; margin-bottom: 15px;}

.product-info .name{ color: #606060; font-size: 14px; padding-right: 5px; }

.product-info .price{ border-bottom: 1px solid #f7f7f7; padding-bottom:15px; margin-bottom: 15px; }
.product-info .price .name{font-weight: normal;}
.product-info .price .item{
  display: inline-block;
  color: #999999;
  margin-right: 1em;
}
.product-info .price  strong, .product-info .price del{padding:0 3px;}
.product-info .price .special{color: #606060; margin-right: 0em;}
.product-info .price .special strong{ font-size:22px; color: #009e96; font-weight: bold; }

.product-info .editer-box{color: #000022; font-size:1.4rem; padding-bottom: 10px; }

.product-info .exp-item{font-size: 0px;  border-bottom: 1px solid #f7f7f7; padding-bottom:10px; margin-bottom: 15px; color: #000022; }
.product-info .exp-item li{font-size: 14px; margin-bottom: 5px; }
.product-info .exp-item li .name{ font-size: 14px; color: #000022; }

.product-info .counter-shop { display: flex;  }
.product-info .counter-shop  .counter{ flex: 1; }
.product-info .counter-shop  .btn-shop{ margin-left: 10px; }
.product-info .counter-shop .button-outline-mid{ width: 100px; }

.counter .name{ white-space:nowrap; }
.counter{ font-size: 0; display: inline-flex;  align-items: center;}
.counter .btn-outline{ font-size: 20px;  outline:none ;}
.counter  .btn-shop{float: right;}
      .counter .btn-outline:first-of-type{
           min-height: 40px;
      }
      .counter .btn-outline:last-of-type{
         min-height: 40px;
      }
      .counter .button-outline-mid{ 
        color: #009e96;  
        text-align: center; 
        margin-left:-1px; 
        margin-right: -1px; 
        margin-top: 0px;
          width: 50px;
           min-height: 40px;
           flex: 1;
        }



ul.tabs{
      margin: -40px -30px 0 -30px;
      padding: 0px;
      list-style: none;
      background-color: #f9f9f9;
      border-bottom: 1px solid #f4f4f4;
      text-align: center;
justify-content: center;
      -webkit-border-top-right-radius: 6px;
          -moz-border-top-right-radius: 6px;
          border-top-right-radius: 6px;

           -webkit-border-top-left-radius: 6px;
        -moz-border-top-left-radius: 6px;
        border-top-left-radius: 6px;
    }
    ul.tabs li .nav-link{
      color: #030325;
      display: inline-block;
      padding: 22px 30px;
      cursor: pointer;
      font-size: 16px;
    }

    ul.tabs li .nav-link.active{
      color: #009e96;
      font-size: 16px;
      padding: 22px 30px 0 30px;
    }
    ul.tabs li .nav-link.active:after{
      content: '';
      display: block;
 
          background-color: #009e96;
          height: 4px;
          margin-right: -15px;
          margin-left: -15px;
          margin-top: 18px;
           
    }

    .tab-content{
      display: none;
     text-align: center;
      padding: 30px 0 0 0;
    }
    .tab-content img{margin:0 auto;  }

    .tab-content.active{
      display: inherit;
    }



/* 額外購買資訊  */
.additional_box{ 
    display: flex;
    justify-content: space-between;
    align-items: center;

    border: 1px solid #cdd3d1;
    line-height: 1.4;
    padding:8px 5px 8px 15px;
    margin: 10px 0 20px 0;
    font-size: 14px;
    font-weight: bold;
    color: #999;
}
.icn-arror-right{
    background: url(../img/icon/icon-triangle-right.png) no-repeat center right / 12px ;
    padding-right: 15px;
    font-size: 14px;
    font-weight:400;

}
.icn-arror-right:hover{
    font-size: 14px; 
    text-decoration: none; 
    color: #009e96;
    cursor: pointer;
    
}


.Modal-additional #accordion{
   
}
.Modal-additional #accordion .card{
    background-color: #fff;
    border: 0;
    border-radius:0px;
    border: 1px solid #e6e6e6;
    margin:15px 0;

}

.Modal-additional #accordion .card:has(.show){ box-shadow: 0 0px 8px rgba(0, 0, 0, 0.10);}
.Modal-additional #accordion .card-header{
    padding: 0;
    margin-bottom: 0;
    background-color: #f9f9f9;
    border-bottom: 0;
    border-radius: 0px;
}
.Modal-additional #accordion .card-header button{
    display: block;
    border:0;
    outline: none;
    background-color: transparent;
    width: 100%;
    padding:10px 15px;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    display: flex;
    align-items: center;

    color: #009e96;
}
.Modal-additional #accordion .card-header button:after{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right:0;
    margin-left: auto;
    background: url(../img/icon/icon-triangle.png) no-repeat center right / 16px ;
    transition: all 0.35s ease-out;
    flex:0 16px;
    margin-left: 8px;
}

.Modal-additional #accordion .card-header button.collapsed{
    color: #000;
}
.Modal-additional #accordion .card-header button.collapsed:after{
    /* background: url(../img/icon/icon-triangle.png) no-repeat center right / 16px ; */
    
    transform: rotateZ(-180deg);

}
.Modal-additional #accordion .card-header button .text{
    flex:1;
}
.Modal-additional #accordion .card-header button .cover{
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    border:1px solid #e6e6e6;
    margin-right: 15px;
    flex:0 60px;

    background: url('../img/img_placeholder.png') no-repeat 0 84% /cover ; 
}
.Modal-additional #accordion .card-header button .cover img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.Modal-additional #accordion .card-body{
    border-top: 1px dotted #e6e6e6;
    font-size: 16px;
    padding:15px;

}

.Modal-additional #accordion .card-body ul, 
.Modal-additional #accordion .card-body ol{
    margin-left: 15px;
    font-size: 1.6rem;
    color: #221e1f;
    width: 100%;
}
.product-inner .tab-content ul{margin-left: 20px;}
.Modal-additional #accordion .card-body ul li,
.product-inner .tab-content ul li{
    list-style-type: disc;
}
.Modal-additional #accordion .card-body img{ 
    max-width:100%; 
    margin:10px 0;
}
.Modal-additional #accordion .card-body li,
.product-inner .tab-content  li{text-align: left;}

.Modal-additional #accordion .card-body h1,
.product-inner .tab-content h1{
    border-bottom: 0px solid #b9b9b9;
    height: auto;
}    

.Modal-additional #accordion .card-body :is(h1, h2, h3, h4, h5) ,
.product-inner .tab-content :is(h1, h2, h3, h4, h5) {
    margin:1em 0; 
    font-weight: 500; 
    color: var(--color-title-text); 
    padding:0;
    text-align: left;
}
.Modal-additional #accordion .card-body h3,
.product-inner .tab-content h3{font-size: 1.2em;}

.Modal-additional #accordion .card-body h4,
.product-inner .tab-content h4{font-size: 1em;}

.Modal-additional #accordion .card-body table,
.product-inner .tab-content table{

    border-spacing: 0;
    border-collapse: collapse;

  }

.Modal-additional #accordion .card-body  table:not([width]) ,
.product-inner .tab-content table:not([width]){
    width: 100%;
  }

 .Modal-additional #accordion .card-body table[border="0"] td, table:not([border]) td, 
 .Modal-additional #accordion .card-body table[border="0"] th, table:not([border]) th,
 .product-inner .tab-content table[border="0"] td, table:not([border]) td,
 .product-inner .tab-content table[border="0"] td, table:not([border]) th{
    border: 1px solid #ddd;
  }

.Modal-additional #accordion .card-body thead ,
 .product-inner .tab-content thead {
  background-color: #eee;
}

.Modal-additional #accordion .card-body .table > tbody > tr > td, .table > tbody > tr > th, 
.Modal-additional #accordion .card-body .table > tfoot > tr > td, .table > tfoot > tr > th, 
.Modal-additional #accordion .card-body .table > thead > tr > td, .table > thead > tr > th ,
.product-inner .tab-content > tbody > tr > td, 
.product-inner .tab-content .table > tfoot > tr > td, 
.product-inner .tab-content .table > thead > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}


@media (max-width:1023px){
  ul.tabs{  margin: -20px -20px 0 -20px;justify-content: center;}
  .leftmenu-mem-box{ display: none; }
} 
@media (max-width:767px){

 
.product-inner .product-img, .product-inner .product-info{ width: 100%; float: none; }
.product-inner .product-img{margin-bottom: 20px;}



}
@media (max-width:640px){
    .product-info .counter-shop {  flex-direction: column; }
    .product-info .counter-shop .btn-shop {margin-left: 0px; margin-top: 10px;}
}

    /* 訂單紀錄 */
.member-wrap{padding:20px 0 80px 0; display: flex;    flex-wrap: wrap;}

.product-inner.order-list-tb{padding:0 0 0 0;}

.order-list-tb:before{ 
  content: '';
  background-color: #88929b;
  display: block;

  webkit-border-top-right-radius: 6px;
    -moz-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
     webkit-border-top-left-radius: 6px;
    -moz-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    height: 15px;
    font-size: 0;
 }
 .order-list-tb:after{ 
  content: '';
  background-color: #fff;
  display: block;

  webkit-border-bottom-right-radius: 6px;
    -moz-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
     webkit-border-bottom-left-radius: 6px;
    -moz-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    height: 15px;
    font-size: 0;
 }

.order-list-tb table{ 
  width: 100%;
  border-spacing: 0; 
  text-align: left; 

      -webkit-border-radius: 6px;
    -moz-border-radius: 6px;

 }
.order-list-tb td, .order-list-tb th{padding:15px 25px; font-size: 16px;border:0!important;}
.order-list-tb th{color:#f5faff;padding-top:0;background-color: #88929b; font-weight: normal;}
.order-list-tb td{}
.order-list-tb td a{ color:#e4007f ; text-decoration: underline;}
.order-list-tb td a:hover{ text-decoration:none ; }
.order-list-tb tr:nth-child(even) td{ background-color: #fffdf0; }




.order-info{ color: #7a7a7a; font-size: 0px; display: flex; flex-wrap: wrap; }
.order-info li{font-size: 14px; width: 33.33%; display: inline-block; padding-bottom: 15px; vertical-align: top;}
.order-info li .title:after{ content: ':'; display: inline-block; padding:0 3px }
.order-info li a {color:#e4007f ; text-decoration: underline;font-size: 14px; padding-left: 5px;}
.order-info li a:hover {text-decoration:none ;}

.order-item-list-tb table{width: 100%;}

.order-item-list-tb tr:last-of-type td{border-bottom: 0;}
.order-item-list-tb{border:1px solid #eeeeee;border-spacing: 0; margin-bottom: 20px; width: 100%;}
.order-item-list-tb th, .order-item-list-tb td{border:0!important;}
.order-item-list-tb th, .order-item-list-tb td{ padding:20px 15px; font-size: 16px;  vertical-align: top; border-bottom:1px dotted #eeeeee!important;}
.order-item-list-tb th{ background-color: #f0f9f9; border-bottom:1px solid #eeeeee!important;padding:10px 15px;}




table.horizontal tr:last-of-type th, table.horizontal tr:last-of-type td{border-bottom: 0!important;}
table.horizontal th{ border:0;border-bottom:1px solid #eeeeee; border-right:1px solid #eeeeee;padding: 20px 15px;}
table.horizontal td{border:0; border-bottom:1px solid #eeeeee; }
.horizontal td strong{color:#e4007f ;}

.product-item-box{font-size: 0; width: 100%;}
.product-item-box:after{ content: ''; clear: both; display: block; }
.product-item-box .photo img{ width: 20%; float:left; }
.product-item-box .name{ width: 80%; float: left; font-size: 14px; color: #0e0e2f; padding-left: 15px;}

.product-item-box.coupon{ background: #fbf5a1 url('../img/icon/coupon.png') 50% 50% no-repeat ; }

.product-inner p{ font-size: 1.4rem; margin: 10px 0; color: #666666; }
.product-inner ol li{  font-size: 1.4rem;list-style-type: decimal; margin-left: 20px; margin-bottom: 5px; line-height: 1.3; }


@media (max-width:767px){
  .order-info li{ width: 100%;}
  .order-info .t-right{ text-align: left; }
  .product-item-box .name{ padding-left: 5px;}
}



/* 購物車 */

.shop-wrap{padding-top:20px}

.product-inner.order-list-tb{margin-bottom: 20px;}
.order-list-tb.shop-list-tb:before{ 
  content: '';
  background-color: #f0f9f9;
  display: block;

  webkit-border-top-right-radius: 6px;
    -moz-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
     webkit-border-top-left-radius: 6px;
    -moz-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    height: 15px;
    font-size: 0;

 }
.order-item-list-tb.shop-list-tb table{ border: 0; }
.order-list-tb.shop-list-tb th{color: #4c535a; font-weight: bolder;background-color: #f0f9f9;border:0; border-bottom: 1px solid #f1f4f7;}
.order-list-tb.shop-list-tb tr:nth-child(even) td{ background-color: transparent; }
.order-list-tb.shop-list-tb td{ vertical-align: top;border:0; border-bottom: 1px dotted #f1f4f7; }

.tr-dele { text-align: right; }
.tr-dele span{ background: url('../img/icon/delete.png') 0 0 no-repeat; width: 24px; height: 24px; display: inline-block; cursor: pointer;   }
.tr-dele span:hover{ opacity: .7; }

.coupon-code{ text-align: right; padding: 15px 25px 15px 25px; border-top: 4px solid #f5f5f5; display: flex; align-items: center; }
.coupon-code label{ padding-right:10px; font-weight: bolder; font-size: 18px; width:200px; max-width: 100%; margin-bottom: 0;}
.coupon-code .btn{margin-left: 10px; }


.sum-box{ display: block; font-size: 2rem; text-align: right; color: #e4007f; font-weight: bolder;  padding:5px 35px 25px 35px;}
.sum-box .name{font-size: 1.8rem;color: #000022; font-weight: normal; padding-right: 15px;}



/*  process-box  */
.process-box{ display: flex; align-items:center;     width: 90%;    margin: 10px auto; padding-bottom: 15px;}
.process-box li{ flex: 1;  color: #aab1b7;}
.process-box .title{ background: url('../img/icon/process.png') 0 0 no-repeat; width: 24px; height: 24px; padding-left: 30px; }
.process-box .line{
  webkit-border-radius: 10px; 
  -moz-border-radius: 10px; 
  border-radius:10px; 
  background: #2f94fe;
  height: 4px;
  margin-right:15px;
}
.process-box .title.done{ background-image: url('../img/icon/process_done.png');}
.process-box .title.now{ background-image: url('../img/icon/process_now.png');}

.shop-other-box{padding:0 0 15px 0;} 
.shop-other-box h4{  color: #4c535a; font-weight: bolder; font-size: 16px;background-color: #f0f9f9; border-bottom: 1px solid #f1f4f7;padding: 0px 20px 15px 20px; }
.shop-other-box .form-group {margin:0; padding-bottom:0}
.shop-other-box .form-group label{ width: 30%;padding-top: 5px;}
.shop-other-box .form-group .view-wording{padding-top: 5px;}
.shop-other-box .form-group input, .shop-other-box .form-group textarea.form-control.inp-addr{width: 65%;}
.shop-other-box .one-col  .form-group label{width: 15%;}
.shop-other-box .one-col  .form-group input, .shop-other-box .one-col  .form-group textarea.form-control.inp-addr{width: 82.5%;}

.one-col{margin: 15px 20px  0px 20px; overflow: auto; display: flex;}
.one-col .form-group{flex: 1;}

.two-col{ font-size: 0; margin: 15px 20px  0px 20px; overflow: auto; display: flex;}
.two-col .form-group{ flex: 1;  margin:0;}



@media (max-width:1000px){
.process-box{ width: 100%; }
.process-box .title{
  padding-left: 0px;
  padding-top: 15px;  
  font-size: 12px; 
  background-position: 50% 0; 
  background-size: 12px;
  text-align: center; 

    width: 12px;
    height: 12px;
  white-space:nowrap;
}
.process-box .title{}
.process-box .line{margin-right: 0; flex: 0.5;}
}


/* 付款方式 */

.pay-way-wrap{padding:40px 0; width: 100%;}
.pay-way-wrap ul{ display: flex; justify-content: center; text-align: center; }
.pay-way-wrap li{ margin:0 20px; width: 200px;}
.pay-way-wrap li a{ 
  width: 100%; 
  height: 200px; 
  border: 2px solid #cdd3d1;
  display: block; 
  font-size: 20px; 
  color: #a4a7ab; 
  font-weight: bolder;
   webkit-border-radius: 10px; 
  -moz-border-radius: 10px; 
  border-radius:10px; 
  background-color: #fff;
  margin: 0 auto;
  padding: 15px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
   }
 .pay-way-wrap li a img{ opacity: 0.6; display: block;  wax-width: 100%; }
   
.pay-way-wrap li a:hover, .pay-way-wrap li a:focus{ 
  text-decoration: none; 
  border-color: #009e96;
  color: #484f56;
}
.pay-way-wrap li a:hover img, .pay-way-wrap li a:focus img{ opacity: 1; }



h5{ color: #101030; font-size: 16px; padding-bottom: 15px; }
h5 strong{color:#e4007f ;}

@media (max-width:640px){
  .pay-way-wrap li{ width: 40%;margin:0 5%; }
  .pay-way-wrap li a{ width: 100%; }
  .pay-way-wrap li a img{ }


}


/* //////////////////////////共用模組////////////////////////// */
.t-right{ text-align: right; }

.product-inner{
 background-color:#fff;
     -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 40px 30px 30px; 
    margin: 10px;

  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.13);
  -moz-box-shadow:  0 1px 2px rgba(0,0,0,0.13);
    box-shadow:  0 1px 2px rgba(0,0,0,0.13);
    color: #6b6b6b;
    font-size: 14px;
}
.product-inner  img{ max-width:100% ; width: auto; }

 
@media (max-width:1023px){

  .product-inner{padding:20px;}
}

 
@media (max-width:640px){

  .product-inner{padding:20px;}
}



/* ====Modul==== card-module */
.card-module{
    background-color:#fff;
    position: relative;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    padding-top: 0px;
    display: block;

}
.card-module:hover, .card-module:focus{  
  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.20);
  -moz-box-shadow: 0 5px 15px rgba(0,0,0,0.20);
    box-shadow: 0 5px 15px rgba(0,0,0,0.20);
    text-decoration: none;
}



.card-module .card-img{
      display: block;
    min-height: 100%;
        width: auto;
    background-color:#fff;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top:111.2%;
  
    cursor: pointer;
    position: relative;
    margin:5px 5px 0 5px;
    
    position: relative;

}
.card-module .card-img a{position: absolute; top: 0; bottom: 0; left: 0; right:0;}

.card-module .card-img { background-image: url('../img/img_placeholder.png') ; }




.card-module .card-body{padding:0 5px 5px;font-size: 1.6rem; line-height: 1.3; color: #000000; position: relative;}

.card-module .btn-compare{ 
position: absolute;
bottom:2px; right: 5px;
  text-align: center;
  background-color: #0096d6;
  color: #fff;
  padding:0 4px; 
  display: inline-block;
   }
.card-module .btn-compare:hover, .card-module .btn-compare:focus{ background-color: #117ca9;  cursor: pointer;}

.card-module .title{color: #000000;  position: relative;    height: 41px;    overflow-y: hidden; word-break: break-all;  text-overflow: ellipsis;}
.card-module .title .red-mark, .product-inner .product-info .red-mark{ display: block;color: #ff0000; font-weight: bold; font-size: 1.6rem; }
.card-module .peice{color: #2f94fe;}

.card-module p{color: #919191;margin-top:4px; margin-bottom: 4px; font-size: 1.5rem;}
.card-module .date{color: #d1d1d1;font-size: 1.6rem; margin-top:4px; text-align: right;}
.card-module .game-title{ position: relative;text-align: right; font-size: 1.4rem; padding:4px 8px 8px;}
.card-module .game-title a{ color: #85b1e6; font-size: 1.4rem;}
.card-module .game-title a:hover{color: #000;}
.card-module .author{ position: relative; }

@media (max-width:1023px){

  .card-module{margin-bottom: 10px;}
}





/* ====Modul==== switch love /love-ed */
.switch {
  position: relative;
  right: 8px;
  width: 20px;
  height: 20px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  left: 0;
  cursor: pointer;
  background:url(../img/icon/love.png) 0 0 no-repeat;
  width: 20px;
  height: 20px;
  background-size: cover;
  -webkit-transition: .4s;
  transition: .4s;
}



.switch input:checked + .slider {
  background:url(../img/icon/love-ed.png) 0 0 no-repeat;
 width: 20px;
  height: 20px;
  background-size: cover;
}

.switch input:focus + .slider {
  background:url(../img/icon/love-ed.png) 0 0 no-repeat;
  width: 20px;
  height: 20px;
  background-size: cover;
}


/* ====Modul==== page */
.page-box{ margin: 20px 0; clear: both; display: block; width: 100%;}
.page-box:after{ content: ''; display: block; font-size: 0; clear: both; }
.page-box, .page-box a{font-size: 1.8rem;}
.page-box .num-box{ float: left; color: #999999; }
.page-box .num-box a{ padding: 8px 5px; color: #484f56; display: inline-block; margin-right: 10px;}
.page-box .num-box a:hover{color: #009e96;}
.page-box .num-box a.current{ font-weight: bolder; color: #009e96;font-size: 2rem;padding: 2px 9px; }

.page-box .btn-box{ float: right; padding: 0; }
.page-box .btn-box a{ background-color: #009e96; padding: 5px 10px; margin-left: 5px; display: inline-block; 
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius:5px;}
.page-box .btn-box a:hover{ background-color: #008881;}
.page-box .btn-box a.disable{ cursor: not-allowed; background-color: #ccc;}





/* ====Modul==== checkbox */
input.checkbox[type="checkbox"] {    display:none;}

input.checkbox[type="checkbox"] + label {    color:#777; padding-right:15px; line-height:20px; width:100%; }

input.checkbox[type="checkbox"] + label span {
    display:inline-block;
    width:20px;
    height:20px;
    margin:-2px 5px 0 0;
    vertical-align:middle;
    background:url(../img/icon/form_check.png) left top no-repeat;
    cursor:pointer;
}

input.checkbox[type="checkbox"]:checked + label span {
    background:url(../img/icon/form_check.png) left bottom no-repeat;
}


/* ====Modul==== radio */
input[type="radio"] {
    display:none;
}
input::placeholder{ color:#d6d6d6;}

input[type="radio"] + label {
    color:#5f728a;
    font-family:Arial, sans-serif;
  padding-right:15px; line-height:30px; 
  font-family: Arial, Helvetica,"微軟正黑體", Microsoft JhengHei, sans-serif;
}

input[type="radio"] + label span {
    display:inline-block;
    width:24px;
    height:24px;
    margin:-2px 5px 0 0;
    vertical-align:middle;
   background:url(../img/form_radio.png) left top no-repeat;
    cursor:pointer;
  
  
}

input[type="radio"]:checked + label span {
    background:url(../img/form_radio.png) left bottom no-repeat;
}

/* ====Modul==== switch */
.form-switch{ font-size: 1.5rem; color: #221e1f; margin-top: 3px; }
.form-switch:after{content: ''; display: block; clear: both;}
.form-switch .text{ float: left; margin-left: 8px;  }

.onoffswitch {
    position: relative; width: 48px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    float: left;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
     border-radius: 15px;
  
  padding-right:0px; line-height:auto;
}
.side_box .item .onoffswitch-label{ padding:0;}
.selectAll .onoffswitch-label{ width:100%; display:block;}

.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
  
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
    text-align: left;
}
.onoffswitch-inner:before {
    content: "是";
    padding-left: 10px;
    background-color: #ffc300; color: #FFFFFF;
   font-family: Arial, Helvetica,"微軟正黑體", Microsoft JhengHei, sans-serif;
}
.onoffswitch-inner:after {
    content: "否";
    padding-right: 10px;
    background-color: #A3A3A3; color: #FFFFFF;
    text-align: right;
   font-family: Arial, Helvetica,"微軟正黑體", Microsoft JhengHei, sans-serif;
}
.onoffswitch-switch {
    display: block; width: 15px; height: 12px; margin: 4px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 24px;
    border: 2px solid #FFFFFF; border-radius: 15px;
    transition: all 0.3s ease-in 0s; 
  
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}





/* ====Modul==== form field */
.form-group{ text-align: left;  position: relative; padding-bottom: 15px;}
.form-group:after{content: ''; display: block; clear: both;}
.form-group label{ font-size: 1.6rem; color: #4c494a;  display: block; width: 30%; float: left; text-align: right; padding-right: 15px; }
.form-group input, .form-group textarea.form-control.inp-addr{ float: left; width: 40%;  }

.form-group textarea.form-control.inp-addr{height: 70px;    min-height: 70px;}
.form-group .view-wording{ font-size: 1.8rem; color: #7f7f7f;float: left; padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    line-height: 1.5; }

.form-group .inp-btn{ display: flex;  }
.form-group .inp-btn input{ flex:3;height: 36px;}
.form-group .inp-btn button{flex:1;height: 36px;     min-height:36px; line-height: 36px; padding:0 10px;}

.form-group .inp-inp{ display: flex;   }
.form-group .inp-inp input{ flex:1;height: 36px;}
.form-group .inp-inp input:first-of-type{border-right:0;}



.word-red{ color: #d51d34; }
.word-green{color: #36bc29; }
.word-ps{ color: #a3a3a3;  padding:0 4px;}
 

 .form-check-label{margin-left: 10px;}
.form-check-label label{ display: inline; }
.form-check-label a{color: #ffc300;    padding-left: 0px;}

.btn-box {
    padding: 15px 0;
    text-align: center;
}




input.input-gd-style{
  border: 1px solid #a3a3a3;
  min-height: 36px;
  font-size: 1.6rem;
  color: #7f7f7f;
  padding:8px 10px;
  width: 100%;
}

input:disabled{ background-color: #ebebeb;  color: #a3a3a3; border:1px solid #ebebeb}

.btn-gd{ 
            background-color: #fff100;
            color: #221e1f;
            font-size: 1.6rem;
            min-width: 130px;
            padding: 8px 14px 8px 14px;
            min-height: 40px;
            border: 2px solid #221e1f;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            border-radius: 0;
            margin:2px;
}
.btn-gd img{
  height: 20px;
    padding-right: 5px;
    vertical-align: middle; 
}

.btn-gd.focus, .btn-gd:focus, .btn-gd:hover {
    box-shadow: 0 0 0 0 rgba(0,123,255,.25);
    border: 2px solid #fff100;
    background-color: #fff100;
    
}

.btn-white{ background-color: #fff; }
.btn-gray{ background-color: #88929b; margin-right: 10px; color: #fff; }
.btn-gray:hover{color: #fff;}

.btn-back-gray{ background-color: #a3a3a3; color: #fff ; border:0;border-radius: 0;line-height: 26px;    min-height: 26px; font-size: 1.4rem;
 font-family: 'Roboto Condensed', sans-serif,"微軟正黑體", Microsoft JhengHei; padding:2px 10px;}
.btn-back-gray:focus, .btn-back-gray:hover{ background-color: #221e1f;   border:0;}

.btn-orange{ background-color: #fdc42d; color: #221e1f ;}
.btn-orange:focus, .btn-orange:hover{ background-color: #221e1f;  color: #fdc42d; border:0;}


.btn-yellow-b{ background-color: #fff; border-color: #fff100;}
.btn-disable{color:#a7a5a6; border-color: #a7a5a6; background-color: #fff;}
.btn-disable:focus, .btn-disable:hover {
    box-shadow: 0 0 0 0 rgba(0,123,255,.25);
    border: 2px solid #a7a5a6;
     background-color: #fff;
     color:#a7a5a6;
   cursor: not-allowed;
}
.form-wrapper{ background-color: #fff; padding: 50px; }
.form-wrapper:after{ content: ''; clear: both; display: block; }
.mainform{width: 60%; float: left; }
.loadform{width: 35%; float: right; text-align: center;}
.loadform .text{ color: #a3a3a3; font-size: 1.2rem;  text-align: center; padding-top: 15px; text-align: center;}
.form-wrapper .loadform .text.text-center{ text-align: center;}

.form-wrapper .loadform .text{ text-align: left;}


@media (max-width:640px){
.form-group{padding-bottom: 0;} 
.form-group label, .form-group input, .form-group textarea.form-control.inp-addr {

    width: 100%;
    float: none;
    text-align: left;
    padding-right: 0px;
}
.form-group label, .form-group input, .form-group textarea.form-control.inp-addr{ display: block; width: 100%; float: none; text-align: left; padding-right: 0px; }
.two-col{flex-direction: column;}
.shop-other-box .form-group label, .shop-other-box .form-group input, .shop-other-box .form-group textarea.form-control.inp-addr, .shop-other-box .one-col .form-group input, .shop-other-box .one-col .form-group textarea.form-control.inp-addr{ width: 100%; }

.one-col{margin-top: 10px;}
.two-col{margin-bottom: 0;}
.two-col .form-group{margin-bottom: 10px;}

}



/* ====Modul==== search close */

.search_box .inputStyle01{ background: #fff url('../../img/share/icn-searcg-gray.png') 5px 50% no-repeat; padding:0 30px; width: 100%; }


.toggleSearchClose{ 
  cursor: pointer; 
  position: absolute;
  top: -50px;
  right: 50px;
  display: inline-block;
  cursor: pointer;
    text-align: center;


    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: #e8f2f2;

font-size: 30px; padding-top: 10px;
}

.search_box .search-close{   
  border:0; background-color:transparent;   line-height: auto; padding:0; min-width:10px;margin: 0px; height: auto;
  position: absolute;  right: 20px;  top: 16px; font-size:14px; color:#ccc;width:14px; }
.search_box .search-close i{ width: 10px; height: 14px; line-height: 14px; margin:0; padding: 0; }
.search_box .search-close:hover , .search_box .search-close:focus{  text-decoration: none; box-shadow: 0px 0px 0px rgba(0,0,0,0);  border:0px solid #9dc4e3;  color:#d45d5d; box-shadow: 0px 0px 0px rgba(0,0,0,0); }

.search-close{ width: 24px; height: 24px; background: url('../img/icon/close.png') 100% 50% no-repeat; }


.search_box input:valid ~ .search-close { /*有數值 */  visibility: visible; margin-right: 40px;}
.search_box input ~ .search-close {  visibility: hidden;margin-right: 40px; }



/* ====Modul==== gotop */
.cd-top {
  border-radius: 30px;
  display: inline-block;
  height:60px;
  width: 60px;
  position: fixed;
  bottom: 152px;
  right: calc(50% - 600px);
 
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background:rgba(35,184,188,0.6)  url(../img/icon/ic_gototop.png) no-repeat center 50%;
  background-size:cover;
  

  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
  
  z-index:1000;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 0.5;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: 1;
}
.no-touch .cd-top:hover {
  
  opacity: 1;
}

@media (max-width:1024px) {
  .cd-top {right: 5px; bottom: 251px;height:36px;width: 36px;}

}




/* 錯誤頁面 */
.error_box{margin: 40px auto 40px auto;width: 100%;

    background-color: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 40px 30px 30px;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.13);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.13);
    box-shadow: 0 1px 2px rgba(0,0,0,0.13);
    color: #6b6b6b;
    font-size: 14px;
}
.error_box  .errorimg{ background: url('../img/error.png') 50% 0 no-repeat;  height: 150px;margin-bottom: 15px; }
.error_box  .buildingimg{ background: url('../img/under-construction.png') 50% 0 no-repeat;  height: 150px;margin-bottom: 15px; }
.error_box .err_title{
    color: #222845;
    text-align: center;
    font-family: 微軟正黑體, 'Microsoft JhengHei', 'Apple LiGothic Medium', Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 8px;
    font-size: 22px;
}
.error_box .err_wording{ text-align: center; line-height: 1.8; font-size: 16px; }
.error_box .err_btn{ text-align: center; margin-top: 15px;}
.error_box .err_btn .bigbtn2{ width: auto; margin: 0 auto; }


@media (max-width:767px){

.error_box{padding:20px;
  margin-right: 15px;
  margin-left: 15px;
}

}

/* 圖片列表頁 */

.imglist{ font-size: 0; }
.imglist a{display: inline-block;padding:5px; flex: 1; text-align: center; width: calc(50% - 10px);}
.imglist a:last-of-type{margin-right: 0;}

@media (max-width:640px){
.imglist a{ display: block; width: 100%; }
}


/* RWD table */

@media (max-width:767px){

.product-inner{  border: 0; }

.rwd-table{ display: table; }
.rwd-table, .rwd-table thead, .rwd-table tbody, .rwd-table th, .rwd-table td, .rwd-table tr {
    display: block;
}


.rwd-table thead{ display: none; }
.rwd-table td, .rwd-table th{display: block;  padding: 10px 15px 0px 15px;}

.rwd-table tr{padding-bottom: 10px;}
.rwd-table th, .rwd-table td:before {
    color: #4c535a;
    font-weight: bold;
}

.rwd-table tr {
    border-bottom: 1px solid #d9d9d9;
    background-color: #ffffff;
}
.rwd-table td:before, .order-list-tb.order-recorder-tb .rwd-table td:first-of-type:before{
    content: attr(data-th) " : ";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    font-size: 1.4rem;
    color: #4c535a;
}

.rwd-table td , .order-list-tb.order-recorder-tb .rwd-table td:first-of-type{

    position: relative;
    padding-left: 35% !important;
    white-space: normal;
    text-align: left;
}

.order-info li{padding-bottom: 8px;}

.order-list-tb table{ background-color: transparent; }
.order-list-tb:before, .order-list-tb:after{display: none;}
.order-list-tb tr:nth-child(even)  {
    background-color: #fffdf0;
}
.order-item-list-tb th, .order-item-list-tb td {

    font-size: 16px;
    vertical-align: top;
    border-bottom: 0px dotted #eeeeee;
}


.rwd-table.horizontal td:before{ display: none; }
.horizontal th, .horizontal td{ display: block;    padding-left: 10px !important;  width: 100%; padding-bottom: 5px; border-right:0; text-align: left;}
.rwd-table.horizontal  tr {    border-bottom: 0px solid #d9d9d9;}

.order-item-list-tb .rwd-table td:first-of-type:before, .order-list-tb .rwd-table td:first-of-type:before, .tr-dele:before{ display: none; }
.order-list-tb.order-recorder-tb .rwd-table td:first-of-type:before{ display: block; }

.order-item-list-tb .rwd-table td:first-of-type, .order-list-tb .rwd-table td:first-of-type, .rwd-table .tr-dele{padding-left: 0px !important;}

.order-item-list-tb .rwd-table.horizontal td:first-of-type{ padding-left: 10px !important; }

.product-item-box{padding-left: 10px;}




.order-list-tb.shop-list-tb:before{ background-color: #fff; }
.order-list-tb.shop-list-tb td {    border-bottom: 0px dotted #f1f4f7;}

.order-list-tb.shop-list-tb .rwd-table td:before{width: 20%;}
.order-list-tb.shop-list-tb .rwd-table td {    padding-left: 20% !important;}
.order-list-tb.shop-list-tb .rwd-table td:first-of-type{ padding-left: 0% !important;}





.rwd-table tr{ position: relative; }
.rwd-table .tr-dele{ position: absolute;  top:0px; right:0px;}

.order-list-tb .rwd-table tr td:first-of-type {margin-right: 50px;}

.coupon-code{ flex-wrap: wrap; }
.coupon-code label{ text-align: left; width: 100%; margin-bottom: 5px; }
.coupon-code .btn {     margin: 10px auto;}





.sum-box {    padding: 5px 15px 15px 15px;}

.shop-other-box {    margin-top:-15px; }
.shop-other-box h4{   
  padding-top: 15px;

  webkit-border-top-right-radius: 6px;
    -moz-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
    webkit-border-top-left-radius: 6px;
    -moz-border-top-left-radius: 6px;
    border-top-left-radius: 6px;}

.shop-other-box .one-col .form-group label {
    width: 100%;
}


}
@media (max-width:480px){
  .btn-box {
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.btn-box .btn{margin:4px auto;}
.counter{ width: 100%; }

}



/* leftmenu-box */


.leftmenu-box .nav-item > a{
   background-color: #009e96;
    font-size: 1.6rem;
    color: #fff;
    text-align: center;
    padding: 16px 14px;
    display: block;
    
}
.leftmenu-sec-box li > a{
  background-color: #fff;
  border-bottom: 1px solid #e5e8e8;
    padding: 16px 14px;
    display: block;
}
.leftmenu-sec-box li.active > a{background-color:#eaecf1;}


/* iframeModal */

.iframeModal {z-index: 999999;}
.iframeModal .modal-dialog {
    max-width: 90%;
    margin: 1.75rem auto;
}
.iframeModal .modal-content{ width: 100%; height:90vh;padding-bottom: 0; border-radius: 0;}

.iframeModal iframe{
   width: 100%; height:100%;
   border:0;

}


.modal-dialog-centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (0.5rem * 2));
}