/* media for viewpoint 0px or greater */
@media (min-width:0px){

    .main-area .categories a{
        margin: 1rem 0;
    }

    .main-area .post-area{
        margin: 0 5%;
    }

    .main-area .post-area .col-8-lg .grid{
        column-count: auto;
    }



    footer.footer-area >.row div{
        padding-top:5%;
    }

}

/* media for viewport 576px or greater */
/* Small devices (landscape phones, 576px and up) */
@media (min-width:576px){
    

    .main-area .post-area{
        margin:0 10%;
    }

    .banner-bg .banner-title .en-title{
        position: absolute;
        left: 4%;
        top: 4%;
        height: 100%;
    
    }
    
    
    
    .banner-bg .banner-title #eng-title{
        height: 18%;
        padding-bottom: 2%;
    }
    
    .banner-bg .banner-title #chi-title{
        position: absolute;
        right: 4%;
        bottom: 4%;
        height: 36%;
    }

    #moveslider2{
      width: calc(((90vw/1.2) - var(--bs-gutter-x)) * 0.187 * 3);
      opacity: 0;
      transition: opacity 5s linear 2s;
      -webkit-transition: opacity 5s linear 2s;
      transform-origin:left center;
      -webkit-transform-origin:left center;
      -webkit-transform: rotate(-270deg) translate(-38px, -200%);
      transform: rotate(-270deg) translate(-38px, -200%);
      text-align: center;
      font-size: medium;
    }



}

/* media for viewport 768px or greater */


@media (min-width:768px){


    .main-area .post-area .col-8-lg .grid{
        column-count: 2;
    }


    .video-j1{
      width:80%;
      height: auto;
      padding: 10%;  
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
    }
    

    .menu-btn {
        position: fixed;
        display: block;
        top: 35px;
        right: 5%;
        display: block;
        width: 20px;
        height: 40px;
        font-size: 10px;
        text-align: center;
        cursor: pointer;
        z-index: 3;
    }
    
    .row .main-video{
        width: 50%;
    }
    
    /* .prod .work-sum{
      padding: 0 3%;
    } */


.video-k1{
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  text-align: center;
  left: 50%;
}

  .slidecontainer-v {
    width: 100%;
    height: calc(((90vw/1.2) - var(--bs-gutter-x)) * 0.187 * 3);

  }
  
  .slider-v {
    -webkit-appearance: none;
    width: calc(((90vw/1.2) - var(--bs-gutter-x)) * 0.187 * 3);
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    transform-origin:left center;
    -webkit-transform-origin:left center;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
    -webkit-transform: rotate(-270deg) translate(-12px,-12px); 
    transform: rotate(-270deg) translate(-12px, -12px); 
    
  }
  
  
  #moveslider2{
    width: calc(((90vw/1.2) - var(--bs-gutter-x)) * 0.187 * 3);
    opacity: 0;
    transition: opacity 5s linear 2s;
    -webkit-transition: opacity 5s linear 2s;
    transform-origin:left center;
    -webkit-transform-origin:left center;
    -webkit-transform: rotate(-270deg) translate(-38px, -300%); 
    transform: rotate(-270deg) translate(-38px, -300%) ; 
    text-align: center;
    font-size: 0.7rem;
  }
  




}






/* media for viewport 1200px or greater */
@media (min-width:1025px){
   
    .banner-bg .banner-title #chi-title{
        position: absolute;
        right: 4%;
        bottom: 4%;
        height: 45%;
    }


    
    .banner-bg .banner-title .en-title{
        position: absolute;
        left: 4%;
        top: 4%;
        height: 100%;
    
    }
    
    
    
    .banner-bg .banner-title #eng-title{
        height: 22.5%;
        padding-bottom: 2%;
    }
    
   
    
}




/* media for viewport 1200px or greater */
@media (min-width:1200px){
   

   
    
}

@media (min-width:1400px){


    
    
}

/*main page info*/




/* Allow content to be full width */
.ipsApp.ipsApp_front #ipsLayout_contentArea {
    max-width: 100%;
  }
  

/*   
  .feature-link {
    float: left;
    font-size: 17px;
    color: #61AC27;
    font-weight: 300;
    text-decoration: none;
    padding: 0 0 8px;
  }
   */
  .left-line {
    position: relative;
  }
  .left-line::before {
    content: '';
    position: absolute;
    left: -4%;
    top: -30px;
    width: 1px;
    height: 100%;
    height: calc(100% + 60px);
    background-color: #d9d9d9;
  }
  
  
  .getting-started {
    color: #838383;
    align-self: flex-start;  
  }
  
  .getting-started h3 {
    font-size: 1.1em;
  }
  
  .large-inner-heading {
    font-weight: 700;
    font-size: 4.5em;
    line-height: 86px;
    color: #f8f8f8;
  }
  
  .inlineMiddle {
    display: inline-block;
    vertical-align: middle;
  }
  
  
  .feature {
    display: flex;
    align-items: center;
  }
  
  @media (max-width: 767px) {
    html[dir="ltr"] .ipsGrid.ipsGrid_collapsePhone > [class*="ipsGrid_span"].featured-image-container {
      margin: 0 auto;
      max-width: 500px;
    }
    .feature .ipsGrid_span7 {
      order: 1;
    }
  }
  
  .feature:last-of-type [class*="ipsGrid_span"] {
    margin-bottom: 0;
  }
  

  
  h2.heading_large {
    font-size: 1.8em;
  }