/*menu style*/
@media screen (max-width:768px) {
  header{
   /* height: 50px;*/
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
  }

  /*logo*/
  .logo {
    padding-top: 0;
  }
  .login p{
    display: none;
  }

  .login {
    position: relative;
    top:0;
    right: 0;
  }
  .head {
    text-align: center;
    margin-bottom: 0px;
    box-shadow: 0px 1px 7px #212121;
    height: 89px;
  }

  /*hanburger icon*/
  .menu-trigger {
     display: block;
      width: 33px;
      height: 35px;
      cursor: pointer;
      position: absolute;
      top: 15px;
      right: 25px;
   }
  .bar, .bar::after, .bar::before {
     width: 33px;
     height: 4px;
   }
   .bar {
     position: relative;
     -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
             transform: translateY(25px);
     background: #000;
     -webkit-transition: all 0ms 300ms;
     -moz-transition: all 0ms 300ms;
     transition: all 0ms 300ms;
    top: -9px;
     left: 0px;
   }
   .bar.animate {
     background: rgba(255, 255, 255,0);
   }
   .bar:before {
     content: "";
     position: absolute;
     left: 0;
     bottom: 9px;
     background: #000;
     -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
     -moz-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -moz-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
   }
   .bar:after {
     content: "";
     position: absolute;
     left: 0;
     top: 9px;
     background: #000;
     -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
     -moz-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -moz-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
   }
   .bar.animate:after {
     top: 0;
     -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
             transform: rotate(45deg);
     -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
   }
   .bar.animate:before {
     bottom: 0;
     -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
             transform: rotate(-45deg);
     -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
   }


  /*產品手機板樣式*/
  .hamburger-promenu {
    width: 35px;
    height: 40px;
    cursor: pointer;
    display:inline-block;
  }
  .pro_bar {
    width: 35px;
    height: 4px;
  }

  .pro_bar {
    transition: all 0ms 300ms;
  }
  .pro_bar.animate {
    background: rgba(255, 255, 255, 0);
  }



  /*menu*/
  nav {
    display: none;
  }
  ul.menu {

    margin: 0;
    width:100%;
    min-width: 100%;
    text-align:center;
    float: inherit;
    background-color: #eff9eb;
    padding: 0;

  }
  .subBtn {position: relative;}
  .subBtn a {display: block;width: 100%;}
  .menu_btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding:0; 
  }
  .menu_btn:hover .subBtn {display: none;}
  .menu a {
	  padding: 0.8em 0;
    border-bottom: #9FA0A0 1px solid;
  }

  .page_container{
    padding: 30px 0;
  }

  .login{
    display: block;
    text-align: right;
    padding: 0.8em 0;
    border-bottom: solid 2px #4B4B4B;
  }
.login a {
    font-size: 1.3em;
    
    color: #4B4B4B;
    letter-spacing: 0.2em;
}

  .menu{margin-bottom: 0px;}
  
  /*banner*/
  .banner {
    margin-top: 89px;
  }

  /*index*/
    /*about*/
    .about_title p {
    font-size: 2em;
    }
    .about_content{
    color: #9C9C9C;
    margin: 30px 0;
    }

    /*news*/
    .news_maintitle p{
      font-size: 2em;
    }
    .news_title{
      margin-top: 0.5em;
    }

    .news_title, .news_right{
      color: #878787;
      font-size: 1.2em;
      line-height: 1.5em;
      }
    .news_right p{
      font-size: 0.8em;
      line-height: 1.5em;

      }

    /*product*/
    .product_title p {
      font-size: 2em;
    }
    .product_content p {
    font-size: 1.2em;
    }

  /*more*/
  .more a{
    font-size: 1em;
  }

 /*麵包屑breadcrumb*/

.breadcrumb{
  font-size: 1em;

}


  /*footer*/
  .footer_out p {
    font-size: 13px;
  }
  .footer_logopic {
    font-size: 2.5em;
  }
  .footer_menu a{
    font-size: 1em;
  }
  .footer_sec2 {
    text-align: center;
    margin-top: 3%;
  }
  .link img {
      width: 15%;
      margin: 0 4%;
  }
  

}
@media screen and (min-width:320px) and (max-width:767px) {
    .cart_run {display: none;}
}
@media screen and (max-width:500px){
.logo {
  text-align: left;
  width: 60%;
  padding: 0;
}
}