/*寬度768以上*/
    @media (min-width: 768px) {
      @-ms-viewport {
          width: device-width;
      }
    }
    
    
    /*寬度1200以下*/
    @media (max-width: 1200px){
      @-ms-viewport {
          width: device-width;
      }
      
    }
    /*寬度1000以下*/
    @media (max-width: 1000px){
      @-ms-viewport {
          width: device-width;
      }
    }

    /*寬度870以下----menu收合設定*/
    @media (max-width: 870px){
      @-ms-viewport {
          width: device-width;
      }
      .is-sticky .am-topbar{
        background: rgba(0, 174, 255, 0.85);
      }
      .am-hide-lg-down, .am-hide-md, .am-hide-md-down, .am-hide-md-only, .am-hide-md-up, .am-hide-sm-up, .am-show-lg, .am-show-lg-only, .am-show-lg-up, .am-show-sm, .am-show-sm-down, .am-show-sm-only{
        display: inherit!important;
        background-color: transparent;
      }
      .am-topbar-btn{
        font-size: 30px;
        color: rgba(255, 255, 255, 0.9);
        margin-top: 6px;
        margin-right: 0;
      }
      .am-btn:focus, .am-btn:hover, .am-btn:active {
        color: #fff;
        outline: none;
      }
      .am-topbar-collapse.am-collapse{
        display: none!important;
      }
      .am-collapse.am-in{
        display: block!important;
      }
      .nav-header {
        overflow: hidden;
      }
      .navbar-nav{
        margin-top: 0;
        float: none;
      }
      .am-collapse.am-in{
        border-top: 1px solid rgba(255, 255, 255, 0.5);
      }
      .navbar-nav li{
        float: none;
        width: 100%;
        padding: 0;
      }
      .navbar-nav > li > a{
        display: block;
        padding: 8px 20px;
        border-bottom:none;
      }
      .navbar-nav > li > a:hover, .navbar-nav > li > a:focus{
        color: #C52620;
        background: rgba(255, 255, 255, 0.2);
        border-bottom:none;
        text-shadow: 0px 0px 3px #000;
      }
      .language{
        position: absolute;
        top: 30px;
        right: 80px;
        overflow: hidden;
        padding: 0;
        font-size: 15px;       
      }
      .language li a{
        color: #B0B0B0;
      }
      .language li a:after{
        background: #B0B0B0;
        top: 6px;
      }
      .right-column{z-index: 1;}
      /*=======================
        service
        =======================*/
      .service-div{
        margin-left: -1rem;
        margin-right: -1rem;
      }
      .service-div img{
        width:100%;
      }

    }

    /*寬度640以下*/
    @media (max-width: 668px){
      @-ms-viewport {
          width: device-width;
      }
      .language{
        position: absolute;
        top: 20px;
      }
      h1.logo {
    
    background-size: 100% 100%;
      }
      h1.logo a {
      display: inline-block;
      width: 150px;
    
      text-indent: -9999px;
  }
   
      .am-topbar-btn {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.9);
        margin-top: 6px;
        margin-right: 0;
    }
      .service-div{
        margin-bottom: 15px;
      }
      .product-div{
        margin-bottom: 15px;
      }
      #news img{
        max-width: initial;
        margin-bottom: 10px;
      }
       .right-column-area img {
        width: 100%;
      }
      .single_feature {
        
        height: auto;
    }
      /*=======================
        slogan
        =======================*/
      #about .pc-container, #support .pc-container,#alive .pc-container{
       
      }
      /*=======================
        story
        =======================*/
      .am-slider .am-slides img{
        max-width: inherit;
        float: none;
        width: 100%;
      }
      .am-slider-default .am-slider-desc{
        width: 100%;
        float: none;
        padding: 10px 10px 0;
        margin-left: 0;
        font-size: 15px;
      }
      .am-slider-default .am-direction-nav a{
        top: 20%;
      }
      /*=======================
        footer
        =======================*/
      #foot p{
        float: none;
      }
    }

    /*寬度480以下*/
    @media (max-width: 480px){
      @-ms-viewport {
        width: device-width;
      }
      .block-title h1{
        font-size: 44px;
        line-height: normal;
      }
      h1.logo{
        width: 90%;
        height: 90%;
        background-size: 90% 66px;
        margin: 10px 0;
      }
      h1.logo a{
        width: 90%;
        height: 66px;
      }
      .am-topbar-btn{
        padding: .5em .5rem;
      }
      .language{
       position: absolute;
       top: 50px;
       right: 10px;
       
      }
      /*=======================
        slogan
        =======================*/
      #banner .slogan{
        position: absolute;
        width: 100%;
        right: 0;
        bottom: 10%;
      }
      #banner:before{
        padding: 0;
      }
      #about{
        padding-top: 20px;
      }
      #about .slogan{
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 20px 20px 40px;
      }
      #support .slogan{
        right: 0;
        bottom: 10px;
        width: 100%;
      }
      #alive .slogan{
        left: 0;
        width: 100%;
      }
      .slogan h3{
        font-size: 40px;
      }
      .single_feature {
       height: auto;
    }
      /*=======================
        story
        =======================*/
      .am-slider-default{
        padding: 0;
      }
      .am-slider-default .am-direction-nav a:before{
        font-size: 30px;
      }
      .am-slider-default .am-direction-nav a{
        height: 50px;
        width: 50px;
        top: 25%;
      }
      .am-slider-default .am-direction-nav .am-prev{
        left: -30px;
      }
      .am-slider-default:hover .am-prev{
        left: -30px;
      }
      .am-slider-default .am-direction-nav .am-next{
        right: -30px;
      }
      .am-slider-default:hover .am-next{
        right: -30px;
      }
    }