body { font-family: 'Noto Sans TC','Microsoft JhengHei',Arial,sans-serif; font-weight: 300;overflow-x: hidden; margin: 0; padding: 0; 	border: 0; box-sizing: border-box;letter-spacing: .1rem;overflow: visible;background: url(../../imgs/Shop/bg.jpg) center repeat-y;background-size: cover;background-attachment: fixed;
  }
body.is-active { overflow: hidden;}
html {font-size:16px;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol,ul{list-style: none;font-family: 'Noto Sans TC','Microsoft JhengHei',Arial,sans-serif;}
a{ text-decoration: none;  } a:hover{ text-decoration: none;}
p{line-height: 1.8rem;font-size: 1rem;}
.clear{clear: both;}

  :root{
    /* nav */
    --navbar-btn-bg:#0061b5;
    --navbar-btn-down-bg:#00438a;
    --navbar-btn-line:rgba(139, 153, 172, 0.3);


   --body-bg:#184075;
   --link-color:#ffaa00;
   --link-color-hover:#df9500;
  
   --title-color:#061a47;
   --title-color-hover:#1b5f8f;
   --title-en-color:#555;
   --text-color:#333;
   --text-g-color:#555;
 
  }

  .responsive-img{width: 100%;transition: all .3s ease-in;}
  section {padding: 80px 0;}
  .col-6.col-md-2_5 { flex: 0 0 20%; max-width: 20%; }

/* ----- 標題 start ----- */
.title{position: relative;margin: 0 0 30px;}
.title .line{width:50px;height:4px; background-color: var(--link-color);border-radius: 30px;margin: 10px 0;}
.title.center .line{margin: 10px auto;}
.title.center{text-align: center;}
.title.center .title-cn{justify-content: center;}

.title h2{position: relative;font-weight: 500;letter-spacing: 1px;font-size: 2.2rem;}
.title h2{color: var(--title-color);}
.title h5{color: var(--title-en-color);font-weight: 300;}

.title.white h2{color: #fff;}
.title.white h5{color:#E3E7E9;}

.con-photo{width: 70%;}
.con-photo.con-photo-right{margin-left: 15%;position: relative;}
.con-photo.con-photo-right::after{content:"";z-index: -1;position: absolute;width: 100%;height: 100%;background-color: #D6E7F0;left: -8%;top:8%; }
.con-photo.con-photo-left{margin-right: 15%;position: relative;}
.con-photo.con-photo-left::after{content:"";z-index: -1;position: absolute;width: 100%;height: 100%;background-color: #D6E7F0;right: -8%;top:8%; }






    
    
  
  /* header start*/
  .nav-black { background-color: rgba(0, 0, 0, 0.4); position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; display: none;}
  .nav-black.is-active { display: block; }
  .container { max-width: 82%; width: 82%;}
  header nav .navbar-group.is-active{max-width: 82%; width: 82%;}
  header nav button.hamburger{display: none;}

  header {position: relative;background-color:rgba(0, 79, 135, 0.8);overflow: hidden; }
  header.is-active {overflow: hidden; object-fit: cover;}







  header .video { position: absolute;  top: 50%; left: 50%;transform: translate(-50%,-50%);  z-index: -1;width: 100%;overflow: hidden;}
  header .video video {  width: 100%; object-fit:fill}
  header nav {width: 100%;} 

  header nav.is-active {background-color: var(--body-bg);position: fixed;left: 0; top:0; padding: 5px 0;z-index: 99;}
  header nav.is-active #logo img{ height: 60px;}
  header nav .navbar-group {display: flex;justify-content: space-between;padding: 5px 0;width:100%;margin: 0 auto;}
  header nav .navbar-group.is-active{max-width:  1320px; width:1320px ;}



  header nav #logo img{ height: 85px;width: auto;opacity: 1;}
  header nav li{cursor: pointer;}
  header nav.bg-light-color li p,header nav.bg-light-color li a{color: #333;margin: 0;}
  header nav.bg-dark-color li p,header nav.bg-dark-color li a{color: #fff;margin: 0;}
  header nav .navbar-group .navbar-con ul.navbar-btn,  header nav .navbar-con ul.navbar-btn-down{padding: 0;margin: 0;}
  header nav .navbar-group .navbar-con{display: flex;align-items: center;width: 70%;justify-content: flex-end;align-items: center;}

  header nav .navbar-group .navbar-con ul.navbar-btn {order: 1;display: flex;display: none;}
  header nav .navbar-group .navbar-con ul.navbar-btn > li{width: 120px;position: relative;text-align: center;padding: 15px;}
  header nav .navbar-group .navbar-con ul.navbar-btn > li ul.navbar-btn-down{position: absolute;overflow: hidden;transition: all .3s ease-in;background-color: var(--navbar-btn-down-bg);top: 55px;left: 0;max-height:0px;}

  header nav .navbar-group .navbar-con ul.navbar-btn > li:hover {background-color: var(--navbar-btn-bg);}
  header nav .navbar-group .navbar-con ul.navbar-btn > li:hover ul.navbar-btn-down{max-height: 300px;} 
  header nav .navbar-group .navbar-con ul.navbar-btn > li ul.navbar-btn-down li{width: 120px;padding: 15px;}
  header nav .navbar-group .navbar-con ul.navbar-btn > li ul.navbar-btn-down li:hover a{text-decoration:underline ;}

  header nav .navbar-group .nav-btn-icon{display: flex;align-items: center;}
  header nav .navbar-group .nav-btn-icon .user,  header nav .nav-btn-icon .cart{width: 25px;margin: 0 15px;opacity:1 ;cursor: pointer;display: block;position: relative;transition: all .3s ease-in;}
  header nav .navbar-group .nav-btn-icon .user:hover,  header nav .navbar-group .nav-btn-icon .cart:hover{opacity:.7;}
  header nav .navbar-group .cart .cart-add-num{position:absolute;width: 22px;height: 22px;border-radius: 100%; background-color: var(--link-color);position: absolute;right:-10px;top:-8px;line-height: 22px;text-align: center;color: #fff;font-weight: 600;font-size: .8rem;}
  
  

  /* serch-input */
  form.navbar-search { display: flex; padding: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.7);justify-content: space-between; order: 2;}
  form.navbar-search input[type="search"] { border: none; background: transparent; margin: 0; padding: 7px 8px; font-size: 14px; color: inherit; border: 1px solid transparent; border-radius: inherit; color: #fff;  caret-color: rgba(255, 255, 255, 0.6);}
  form.navbar-search input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
    form.navbar-search button[type="submit"] {
      text-indent: -999px;
      overflow: hidden;
      width: 40px;
      padding: 0;
      margin: 0;
      border: 1px solid transparent;
      border-radius: inherit;
      background: transparent url("../../imgs/Shop/search.svg") no-repeat center;
      background-size: 20px;
      cursor: pointer;
      opacity: 0.7;
    }
  form.navbar-search button[type="submit"]:hover { opacity: 1; background-color:transparent ;border-color: transparent;}
  form.navbar-search button[type="submit"]:focus, input[type="search"]:focus { box-shadow: transparent; border-color: #fff; outline: none; }

  /* banner文字 */
  header .header-banner{padding: 120px 15px;}
  header .header-banner h1 {color: #fff;font-weight: 500;line-height: 1.6;border-left: 8px solid #ffaa00;padding: 0 15px;}
  /* header end*/


   /* 內頁上方 */

header.inner {
  background: url(../../imgs/Shop/header-bg.jpg) center;
  transition: all .3s linear;
  animation: zoom 1s linear;
  background-size: 100%;
}
    @keyframes zoom {
      0%{background-size: 120%;}
      100%{background-size: 100%;}
    }



   header.inner .header-banner{padding: 50px 15px;text-align: center;}
   header.inner .header-banner h1 {border-left: none;border-bottom: 8px solid #ffaa00;display: inline-block;padding: 15px;}


/* 商品圖 */
 .card {box-shadow: 4px 4px 60px rgba(6,26,71,.1);background-color: #fff;border: none;padding: 1px;cursor: pointer;transition: all .3s ease-in;margin:0 0 40px;width: 100%;}
 .card .product{width: 100%;}
 .card .product .photo{width: 100%;height: 240px;background-color: rgb(131, 84, 84);background-size: cover;background-position:  center;}
 .card .product .text {padding: 15px;text-align: center;}



 .card .product .text .product-title p{ margin: 0 0 2px;}
 .card .product .text a {color: #333}
 .card .product .text .product-under-text {display: flex;justify-content: space-between;align-items: flex-end;}
 .card .product .text .product-under-text .add-cart {width: 35px;height:35px;background-color: var(--link-color);border-radius: 100%;transition: all .3s ease-in;position: relative;text-align: center;}
 .card .product .text .product-under-text .add-cart:hover {background-color: var(--link-color-hover);}

 .card .product .text .product-under-text .add-cart:after {transition: all .3s ease-in;width: 35px;height:35px;transform: translate(-50%,-50%);left: 50%;top: 50%; z-index:-1;border-radius: 100%;content: "";opacity: 0;}
 .card .product .text .product-under-text .add-cart:hover:after {width: 50px;height:50px;position: absolute;
  border: 2px solid var(--link-color-hover);opacity: .4;}



 .card .product .text .product-under-text .add-cart img{width: 20px;height: 20px;margin-top: 4px;}
 .card .product .text .product-under-text .price-all {text-align: left;}




 .card .product .text .product-under-text .price-all .original-price p {text-decoration: line-through;font-size: .8rem;margin: 0;color: #acacac;}
 .card .product .text .product-under-text .price-all .special-price h5 { color: #f05c5c; margin: 0; }


 .card:hover{transform: translateY(2px);}













































  /* footer start */
  footer {background-color: var(--body-bg);color:#fff;padding: 20px 0 0;}
  footer .footer-logo-title{display: flex;align-items: center;}
  footer .footer-logo-title .logo{width: 100px;margin-right: 10px;}
  footer .footer-logo-title h5{color:#fff;font-size: 1.4rem;}
  footer ul{padding: 0;margin: 20px 0;}
  footer ul li{display: flex;align-items: center;}
  footer ul li img{width: 20px;margin-right: 10px;}
  footer ul li p{margin: 0;color: #fff;font-size: .95rem;}
  footer ul li i {margin: 0 5px 0 0;width: 25px;}

  #fb-root{width: 100%;height: 100px;}
  footer .social-all .fb-icon-all,footer .social-all .line-icon-all {transition: all .3s  ease-in;}
  footer .social-all .fb-icon-all:hover,footer .social-all .line-icon-all:hover {opacity: .8;}

  .copyright{background-color: #07304C;}
  .copyright .con {display: flex;justify-content: space-between;align-items: center;height: 50px;}
  .copyright .con p,.copyright .con a{display: inline-block;margin: 0;font-size: .85rem;color: #a9b6c2;transition: all .3s ease-in;}
  .copyright .con a{cursor: pointer;}
  .copyright .con a:hover {color: rgba(255, 255, 255, 0.8);}
  .copyright .con .backstage{display: inline-block;}

  .social-all{display: flex;}


  .fb-icon-all{width: 40px;margin: 40px 10px 20px 0;} 
  .fb-cir{fill:#FFFFFF;transition: all .3s ease-in;}
  .fb-bg{fill:rgba(63, 35, 0, 0);transition: all .3s ease-in;}
  .fb-icon{fill:#ffffff;transition: all .3s ease-in;}

  .fb-icon-all:hover .fb-cir{fill:#FFFFFF;}
  .fb-icon-all:hover .fb-bg{fill:#FFFFFF;}
  .fb-icon-all:hover .fb-icon{fill:var( --main_color);}

  .line-icon-all{width: 40px;margin: 40px 10px 20px 0;}
  .line-bg{fill:rgba(255, 0, 170, 0);transition: all .3s ease-in;}
  .line-icon{fill:#FFFFFF;transition: all .3s ease-in;}
  .ine-cir{fill:#ffffff;transition: all .3s ease-in;}
  .line-icon-all:hover .line-bg{fill:#FFFFFF;}
  .line-icon-all:hover .line-icon{fill:var( --main_color);}
  .line-icon-all:hover .ine-cir{fill:#FFFFFF;}


  .item-right{margin-left: auto;}
  .login-btn-m {display: block;}
  .login-btn-m i {color: #0C3C5E;font-size: 1.6rem;transform: translateY(0px);margin: 0 10px;display: block;}
  .login-btn-m i:hover  {opacity: 0.7;}

   

  
  
  @media (max-width: 1400px){
    .container { max-width: 88%; width: 88%;}
    header nav .navbar-group.is-active{max-width: 88%; width: 88%;}
    .card .product .photo { height: 190px; }
  }
  
  @media (max-width: 1199px) {
    .col-6.col-md-2_5 { flex: 0 0 33%; max-width: 33%; }

    /* header start*/

    
    /* 商品圖 */
    .card .product .photo{height:160px;}
  }
  
  
  @media (max-width:991px) {

  


    /* header start*/



    header nav button.hamburger{display: block;order: 3;}
    header .video video { width: 150%;   object-fit: cover;}
    header {overflow: initial; }
    header .video { position: absolute;  top:auto; bottom: -5px;left: 50%;transform: translate(-50%,0);  z-index: -1;overflow: hidden;}
    header nav .navbar-group{padding: 5px 0; }
    header nav .navbar-group .navbar-con ul.navbar-btn { display: block; }

    header nav .navbar-group .navbar-con {flex-direction: column; overflow: hidden;width: 100%; background-color: var(--navbar-btn-down-bg);position: absolute;
      left: 0;top: 68px;max-height:0;}
    header nav .navbar-con {z-index: 99;  }
    header nav .navbar-con.is-active {max-height:fit-content;  }
  
    header nav .navbar-group .navbar-con ul.navbar-btn { order: 1;flex-direction: column; width: 100%;display: block;}
    header nav .navbar-group .navbar-con ul.navbar-btn > li{width: 100%;position: relative;text-align: center;padding: 0;border-bottom: 1px solid var(--navbar-btn-line);}
    header nav .navbar-group .navbar-con ul.navbar-btn > li p{ padding: 15px; }
    header nav .navbar-group .navbar-con ul.navbar-btn > li:hover { background-color: var(--navbar-btn-down-bg); filter: contrast(110%);}
    header nav .navbar-group .navbar-con ul.navbar-btn > li:hover ul.navbar-btn-down { max-height: fit-content; background-color: var(--navbar-btn-bg);}
    header nav .navbar-group .navbar-con ul.navbar-btn > li ul.navbar-btn-down {position: relative;top: 0; left: 0;}
    header nav .navbar-group .navbar-con ul.navbar-btn > li ul.navbar-btn-down li { width: 100%; }
    header nav .navbar-group .nav-btn-icon { margin-left: auto; }

 
    /* serch-input */
    form.navbar-search { margin: 15px auto;width:80%; }
    form.navbar-search input[type="search"] { width: 100%;}
  
    /* banner文字 */
    header .header-banner{padding:60px 15px;}
    header .header-banner h1 {line-height: 1.4;font-size: 1.6rem;}

 
     /* footer start*/
    footer ul.footer-contact{flex-direction: column;}
    footer .footer-link ul{width: 100%;}

    
  }
  
  
  
  @media (max-width: 767px) {
   .container { max-width: 100%;width: 100%;}
   .col-6.col-md-2_5 { flex: 0 0 50%; max-width: 50%; }
    
   /* header start*/
    header nav #logo img { height: 60px; }
    form.navbar-search { width: 92%; }

    /* 商品圖 */
    .card .product .photo{height:220px;}



    /* footer start*/
    footer .footer-logo-title .logo { width: 68px; }
    footer .footer-logo-title h5 { font-size: 1.2rem; }
    footer .footer-link ul{display: none;}
    footer .m-contact-content{margin: 40px 0 0;}
    footer .copyright .content { flex-direction: column; }
    footer .copyright .content p span{ display: block; }
    footer .copyright .content a { margin: 20px 0 0; }

  
  }
  
  @media (max-width: 576px) {
   html {font-size:14px;}
   .title h2 { letter-spacing: 1px; font-size: 1.5rem; }
  /* 商品圖 */
  .card .product .photo{height:170px;}
  .card .product .text .product-under-text .add-cart img { width: 16px; height: 16px; margin-top: 9px; }

  }