@media screen and (min-width:768px) {
  ul.nav > li > a:hover {
    background: url(../images/website_image/hover.png) no-repeat bottom left;
    -webkit-background-size: 2.2em auto;
    background-size: 2.2em auto;
  }
}
@media screen and (min-width:768px) and (max-width:1200px){
  header {padding: 15px 1%;}
  ul.nav > li {padding: 0.4em 0;font-size: 1em;}
  .logo {width: 200px;}
}
@media screen and (min-width:768px) and (max-width:960px){
  header {flex-direction: column;align-items: center;}
  ul.nav > li {padding: 0.6em 0;}
  .logo {width: 100%;
    text-align: center;}
  ul.nav_subbtn {top: 155px;}
}
/*介於320px到767px*/
@media screen and (min-width:320px) and (max-width:767px){
  header {display: block;padding: 15px 0;}
  .logo {text-align: left;padding:0 0 0 5%;width: 200px;}
  .logo img { width: 110px; }
    .menu_trigger {display: block;}
    ul.nav > li {
      display: block;
      padding: 0;
      text-align: center;
    }
    ul.nav > li > a {
      padding: 0.5em;
      background-color: #39A4D4;
      color: #FFF;
      text-align: center;
    }
    nav {
      display: none;
      width: 100%;
      margin: 0;
      position: absolute;
      top: 68px;
      left: 0;
    }
    ul.nav > li.has_sub_btn {
      padding-right: 0;
      background: none;
    }
    ul.nav > li.has_sub_btn>a {padding-left: 2em;}
    ul.nav > li.has_sub_btn>a::after {
      content: "";
      display: inline-block;
      width: 1.5em;
      height: 1em;
      background: url(../images/website_image/arrow_bottom2.png) no-repeat center center;
      vertical-align: middle;
    }
    ul.nav_subbtn {
      position: relative;
      top: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      display: none;
    }
    ul.nav_subbtn > li {width: 50%;}
    ul.nav_subbtn > li > a {
      padding: 0.3em;
    }
    ul.nav_subbtn > li > a .sbtn_img {
      width: 2.5em;
    }
    ul.nav_subbtn > li > a .sbtn_name {
      display: inline-block;
    }
    .footer_icon {position: relative;}
    .footer_qr {
      display: block;
      background-color: #FFF;
    }
    .footer_qr > div {margin: 15px 0;width: 100%;}
    .qr_img {
      position: relative;
      top:0;
      left: calc(50% - 80px);
      width: 160px;
      margin-bottom: -35px;
    }
    .index_product_item {padding: 0 0 15px;}
    .login {
        position: relative;
        top:0;
        right: 0;
    }
    .language {
        display: flex;
    }
    .language a {
        padding: 0.5em;
        flex-grow: 1;
        text-align: center;
    }
    .language span {display: none;}
    .footer_logo {
      font-size: 1.4em;
      width: 100%;
      text-align: center;
    }
    .copyright  {
      line-height: 2;
    }
    .product_list_title {
      padding: 1em 1em 1em 0; 
      text-align: center;
      margin: -0.5em 1em 0;
    }
    .product_list_title::after {
      content: "";
      width: 22px;
      height: 22px;
      position: absolute;
      top: calc(50% - 11px);
      left: calc(50% + 3em);
      display: inline-block;
      background: url(../images/website_image/menu_icon.png) no-repeat center center;
      -webkit-background-size: contain;
    background-size: contain;
    }
    ul.product_class {padding-right: 0;margin: 0 1.5em;background-color: #39A4D4;display: none;}
    ul.product_class > li > a {color: #FFF;}
    .index_product_title {margin: 0;}
}
@media screen and (min-width:320px) and (max-width:567px){
  .index_news_sinfo {border-top: 0;}
  .index_news_name {
    border-top: 1px #3BA3D3 solid;
    margin-top: 0;
    padding: 40px 3% 0;
    width: 100%;
  }
}