﻿@media only screen and (max-width :380px) {
    .insideHeader {
        margin-bottom: 20px;
        position: relative;
      }
.blogImage {

  width: 100%;

}
.prlist > li {
    width: calc(51% - 20px) !important;
    margin-top: 35px !important;
  }
  .productDetailBox {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .productDetailBox figure {
    flex: unset;
    width: 100%;
    margin-bottom: 5px;
  }
  .productDetail {
    flex: unset;
    width: 100%;
  }
}

@media only screen and (max-width :760px) {
    .prlist > li {
        width: calc(51% - 20px) !important;
        margin-top: 35px !important;
      }
.blogImage {

  width: 100%;

}
    .slogan{display: none;}
    .prList{width: auto;gap:20px}
    .prList > li{width: calc(50% - 10px);}
    .slVideo{margin-bottom: 40px;}
    .hATitles h1{font-size: 19px;line-height: 40px;}
    .whyUsList{display: block;}
    .whyUsList li{width: auto;margin-bottom: 20px;}
    .priceTime{display: none;}
    .priceTabs > li > a{font-size: 10px;padding: 0 5px;line-height: 50px;}
    .priceTbl{min-width: 1000px;}
    .brandBox{display: block;}
    .brandCarousel{width: auto;}
    .brandBoxTitle{width: auto;text-align: center;}
    .brandBoxTitle:after{right:30%}
    .homeAbout{display: block;}
    .homeAboutFigure{margin:20px 0 0 0}
    .homeAboutFigure img{width: 100%;height: auto;}
    .blogItemDet p{display: none;}
    .blogItemDet strong{font-size: 13px;}
    .blogItem a {
        gap: 12px;
        flex-wrap: wrap;
      }
      .blogItem a figure {
        flex: unset !important;
      }
      .blogList > li > a {
        padding: 5px !important;
        height: 235px;
        overflow-y: hidden;
      }
      .blogList > li figure {
        position: relative;
        margin-bottom: 10px !important;
        margin: 5px;
      }
      .blogList {
        display: flex;
        gap: 10px !important;
        flex-wrap: wrap;
      }
      .blogList > li p {
        height: 60px;
        color: #55636f;
        line-height: 20px;
        font-size: 10px !important;
        overflow: hidden;
        text-align: right !important;
      }
      .blogList > li strong {
        margin-bottom: 0px;
        display: block;
        font-size: 12px;
      }
      .blogList > li {
        width: calc(51.33% - 15px) !important;
        margin-bottom: 0px !important;
      }
    .priceTabContents > li{overflow-x: auto;}
    .footerFlx{display: block;}
    .ftRight{width: auto;}
    .ftLeft{width: auto;}
    .owl-nav{display: none;}
    .whyUsSection{padding: 45px 0;}
    .whyTitles h2{font-size: 25px;}
    .ftLeftContent{padding-right: 0;}
    .ftLinks > li{width: 50%;}
    .copy{display: block;}
    footer::before{display: none;}
    .ftRight{position: relative;padding-bottom: 15px;}
    .ftRight:before{content: '';right:-3%;left:-3%;top:0;bottom: 0;z-index: -1;;position: absolute;background: #131313;}
    .homeBlog h2{font-size: 20px;}
    .blogSection{margin-bottom: 70px;}
    .owl-dot{width: 30px;}
    header{height: 54px;}
    .insideHeader{margin-bottom: 35px;}
    .blogSection{display: block;}
    .blogListContent{width: auto;margin-bottom: 30px;}
    .sideBar{width: auto;}
    .cmspage img{max-width: 100%;height: auto;}
    .blogList{display: block;}
    .blogList li{margin-bottom: 20px;width: auto;}
    .insideTitle{font-size: 20px;}
    .contactBox {
        gap: 10px !important;
        margin-bottom: 35px !important;
        padding: 0px 10px !important;
        flex-wrap: wrap;  
      }
    .cInfo{margin-bottom: 70px;}
    .cMap{display: block;}
    .insideMap {height: 300px;width: auto;margin-bottom: 20px;}
    .iSocialBox{width: auto;}
    .iSocials{flex-direction: row;}
    .contactBox::before{right:-5px}
    .contactBox::after{left:-5px}
    .prlist{gap:20px}
    .prlist > li{width: calc(50% - 10px);}
    .certList{gap:20px}
    .certList > li{width: calc(50% - 10px);}

    .productDetailBox{display: block;}
    .productDetailBox figure{margin-bottom: 30px;}
    .wTitles p{display: none;}
    .aboutBtm{display: block;margin-top: 30px;}
    .aboutBtm figure img{width: 100%;height: auto;}
    .wTitles{margin-top:-110px;margin-right: 100px;}
    .wTitles h2{line-height: 36px;font-size: 20px}
    .iWhyUsContent{padding-top: 25px;}

}

@media only screen and (min-width : 501px) and (max-width :850px) {
    .blogItemDet p{display: block;
    }
    .prlist > li {
        width:calc(33% - 20px) !important;
        margin-top: 35px !important;
      }
      .insideHeader {
        margin-bottom: 20px;
        position: relative;
      }
.blogImage {

  width: 100%;

}
  .productDetailBox {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .productDetailBox figure {
    flex: unset;
    width: 100%;
    margin-bottom: 5px;
  }
  .productDetail {
    flex: unset;
    width: 100%;
  }
}

@media only screen and (min-width : 760px) and (max-width :1024px)  {
 
}


@media only screen and (min-width : 1024px) and (max-width :1285px){
    .slideCarousel .owl-dots{left:20px;}

}
@media only screen and (max-width :1285px) {


}
@media only screen and (min-width :1285px) {
    
}


@media only screen and (max-width :1080px){
    .topHead{display: none;}
    .topNav{height:54px;background: #fff;border-bottom: 1px solid #c2edda;position: fixed;top:0;right:0;left:0;z-index: 1000;}
    .tgmenu{width:44px;height:44px;display:block;color:#e66c2c;position:absolute;top:4px;left:-7px;text-align:center;font-size:30px;line-height:44px;}
    .tgmenu span{height:2px;width:30px;background:#fff;position:absolute;top:19px;left:0}
    .tgmenu span:before,.tgmenu span:after{content:'';display:block;height:2px;width:30px;background:#fff;position:absolute;top:8px;left:0;}
    .tgmenu span:after{top:auto;bottom:8px;}
    .topmenu{width:250px;font-size: 13px;display:block;background:#f5f5f5;position:fixed;top:53px;left:0;bottom:0;margin-top:0;height:auto;transition:0.3s ease-out;transform:translateX(-250px);-webkit-transform:translateX(-250px);-moz-transform:translateX(-250px);-ms-transform:translateX(-250px);z-index:1000;}
    .dark .topmenu{background:#262844;}
    .topmenu > li a i{display:none;}
    .topmenu > li > a{display:block;color:#383d47;padding-left:30px;text-shadow:none;}
    .topmenu > li a:hover{background:#e66c2c;color:#fff;}
    .topmenu > li{margin-bottom:0px;border-bottom:1px solid rgba(0, 0, 0, 0.10);width:auto;line-height:46px;}
    .openMenu{transform:translateX(0px);-webkit-transform:translateX(0px);-moz-transform:translateX(0px);-ms-transform:translateX(0px);}
    .floatmenu .topmenu{top:53px;}
    .logo{height:54px;top:0;width: 80px;margin-right: -40px;background: none;}
    .logo img{height:40px;width: auto;filter: none;}



}

@media only screen and (min-width :1080px){
    .tgmenu{display:none}
    .topmenu{display:flex !important;}
    
}

@media only screen and (min-width : 0px) and (max-width :479px)  {

    .contactBox {
        gap: 10px !important;
        margin-bottom: 35px !important;
        padding: 0px 10px !important;
        flex-wrap: wrap;
    }
    .insideContent {
        margin-bottom: 40px;
        overflow-x: hidden;
      }
    .blogItemDet p{display: block;
    }
    .prlist > li {
        width: calc(51% - 20px) !important;
        margin-top: 35px !important;
      }
      .insideHeader {
        margin-bottom: 40px;
        position: relative;
      }
      .cInfo {
        gap: 15px !important;
      }
      .insideMap{width:100% !important;}
      .iSocialBox {
  width: 0 !important;
}
.c-career__list {
    --column: 1;
    --gap-column: 10px;
    --gap-row: 10px;
  }
.blogImage {

  width: 100% !important;

}
    .productDetailBox {
        display: flex !important;
        gap: 0;
        margin-bottom: 20px;
        flex-wrap: wrap;
        position: relative;
    }
    .pro_title {
        position: absolute;
        top: 0;
    }
    .productDetailBox figure {
        flex: unset !important;
        width: 100% !important;
        margin-bottom: 5px !important;
        margin-top: 90px;
    }
  .productDetail {
    flex: unset !important;
    width: 100% !important;
  }
  .prDetailList li {
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
  }
  .prDetailList li span {
    width: 100%;
  }
  .prTabs {
    line-height: 35px;
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
  }
  .prTabs > li {
    width: 42%;
    margin-left: 10px;
  }
  .prTabs > li a {
    padding: 0 5px !important;
    border-radius: 4px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    width: 100%;
    text-align: center;
  }
  .cmspage Video , .cmspage img {
    width: 100% !important;
  }
  .blogItem a {
    gap: 12px;
    flex-wrap: wrap;
  }
  .blogItem a figure {
    flex: unset !important;
  }
  .blogList > li > a {
    padding: 5px !important;
    height: 235px;
    overflow-y: hidden;
  }
  .blogList > li figure {
    position: relative;
    margin-bottom: 10px !important;
    margin: 5px;
  }
  .blogList {
    display: flex;
    gap: 10px !important;
    flex-wrap: wrap;
  }
  .blogList > li p {
    height: 60px;
    color: #55636f;
    line-height: 20px;
    font-size: 10px !important;
    overflow: hidden;
    text-align: right !important;
  }
  .blogList > li strong {
    margin-bottom: 0px;
    display: block;
    font-size: 12px;
  }
  .blogList > li {
    width: calc(51.33% - 15px) !important;
    margin-bottom: 0px !important;
  }
  .cooperating-page .public-form .cooperation-form {
    width: 100%;
    margin: 20px auto;
  }
  .cooperating-page .public-form .cooperation-form .txtform, .cooperating-page .public-form .cooperation-form .selectform {
    width: 100%;
  }
  .cooperating-page .public-form .cooperation-form .txtareaform {
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width :719px)  {
    
    .contactBox {
        gap: 10px !important;
        margin-bottom: 35px !important;
        padding: 0px 10px !important;
        flex-wrap: wrap;
    }
    .insideContent {
        margin-bottom: 40px;
        overflow-x: hidden;
      }
    .pro_title {
        position: absolute;
        top: 0;
    }
   
    .productDetailBox figure {
        flex: unset !important;
        width: 100% !important;
        margin-bottom: 5px !important;
        margin-top: 70px;
    }
    .blogItemDet p{display: block;
    }
    .prlist > li {
        width: calc(51% - 20px) !important;
        margin-top: 35px !important;
      }
      .insideHeader {
        margin-bottom: 40px;
        position: relative;
      }
      .cInfo {
        gap: 15px !important;
      }
      .insideMap{width:100% !important;}
      .iSocialBox {
  width: 0 !important;
}
.c-career__list {
    --column: 1;
    --gap-column: 10px;
    --gap-row: 10px;
  }
.blogImage {

  width: 100% !important;

}
  .productDetailBox {
    display: flex !important;
    gap: 0;
    margin-bottom: 20px;
    flex-wrap: wrap;
    position:relative;
  }
  .productDetailBox figure {
    flex: unset !important;
    width: 100% !important;
    margin-bottom: 5px !important;
  }
  .productDetail {
    flex: unset !important;
    width: 100% !important;
  }
  .prDetailList li {
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
  }
  .prDetailList li span {
    width: 100%;
  }
  .prTabs {
    line-height: 35px;
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
  }
  .prTabs > li {
    width: 42%;
    margin-left: 10px;
  }
  .prTabs > li a {
    padding: 0 5px !important;
    border-radius: 4px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    width: 100%;
    text-align: center;
  }
  .cmspage Video , .cmspage img {
    width: 100% !important;
  }
  .blogItem a {
    gap: 12px;
    flex-wrap: wrap;
  }
  .blogItem a figure {
    flex: unset !important;
  }
  .blogList > li > a {
    padding: 5px !important;
    height: 235px;
    overflow-y: hidden;
  }
  .blogList > li figure {
    position: relative;
    margin-bottom: 10px !important;
    margin: 5px;
  }
  .blogList {
    display: flex;
    gap: 10px !important;
    flex-wrap: wrap;
  }
  .blogList > li p {
    height: 60px;
    color: #55636f;
    line-height: 20px;
    font-size: 10px !important;
    overflow: hidden;
    text-align: right !important;
  }
  .blogList > li strong {
    margin-bottom: 0px;
    display: block;
    font-size: 12px;
  }
  .blogList > li {
    width: calc(51.33% - 15px) !important;
    margin-bottom: 0px !important;
  }
  .cooperating-page .public-form .cooperation-form {
    width: 100%;
    margin: 20px auto;
  }
  .cooperating-page .public-form .cooperation-form .txtform, .cooperating-page .public-form .cooperation-form .selectform {
    width: 100%;
  }
  .cooperating-page .public-form .cooperation-form .txtareaform {
    width: 100%;
  }
}

@media only screen and (min-width : 720px) and (max-width :1000px)  {
    .prDetailList li span {
        color: #374550;
        width: 35%;
      }
      .insideHeader {
        margin-top: 55px;
      }
}
@media only screen and (min-width : 1001px) and (max-width :1249px)  {
    @media only screen and (min-width : 720px) and (max-width :1249px)  {
        .insideHeader {
            margin-top: 55px;
          }
    }
}
