/*-----BANNER-----*/
.sec_hmbanner{position: relative;}

/*.js_hmbanner .slick-slide > img{margin: 0 auto;max-width: inherit;}*/
.ol_hmbanner{position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 100%;z-index: 1;display: flex;flex-wrap: wrap;align-items: center;}
.ol_hmbanner .container{width: 100%;}
.js_hmbanner .slick-track > li{position: relative;}
.js_hmbanner .slick-track > li:before {content: '';width: 100%;height: 100%;background-image: linear-gradient(to top,rgb(0 0 0 / 50%) 12%, transparent 90%);z-index: 0;position: absolute;}
.js_hmbanner .slick-track > li:after{content: '';width: 100%;height: 100%;background:rgb(0 0 0 / 30%);z-index: 0;position: absolute;top: 0;left: 0;}
.olhmban_wrap{display: flex;flex-wrap: wrap;align-items: center;justify-content:center;}
.hmban_title{z-index: 0;font-weight:500 ;font-size:50px;color: #FFFFFF;text-transform: uppercase;display: inline-block;position: relative;letter-spacing: 1.4px;text-align: center;max-width: 800px;line-height: 1.2;}
.olhmban_wrap .btnlist{width: 100%;margin: 24px 0 0;}
.js_hmbannersnav{position: absolute;bottom: 50px;right: 56px;z-index: 1;text-align: right;width: 100%;}
.js_hmbannersnav li{margin: 0px 0 18px;}
.hmbanner_navtitle{color: #fff;cursor: pointer;position: relative;padding: 0 36px 0 0;font-size: 14px;text-transform: uppercase;letter-spacing: 0.7px;}
.hmbanner_navtitle:before{content:'';width: 21px;height: 21px;border-radius: 100%;background: transparent;position: absolute;right: 0px;top: 0px;}
.hmbanner_navtitle:after{content:'';width: 6px;height: 6px;border-radius: 100%;background: #fff;position: absolute;right: 6px;top: 8px;}
.js_hmbannersnav li.slick-current .hmbanner_navtitle{color: #0696c2;}
.js_hmbannersnav li.slick-current .hmbanner_navtitle:before{background: #0696c2;}
.js_hmbannersnav li.slick-current .hmbanner_navtitle:after{width: 9px;height: 9px;background: #33161a;top: 6px}

/*-----RANGE-----*/
.sec_range{margin:80px 0;}


/*-----FEATURE-----*/
.sec_ftrproduct{background: #f7f7f7;padding: 80px 0;margin: 80px 0 0;}
.sec_ftrproduct .sechead{margin: 0 0 15px;}

.ftrprd_tabs{}
.ftrprd_tabs .tabs{list-style: none;text-align: center;font-size: 0;width: 100%;margin: 0 0 60px;position: relative;z-index: 1;display: flex;flex-wrap: wrap;justify-content:center;}
.ftrprd_tabs .tabtit{font-size: 14px;letter-spacing: 0.9px;line-height:1.4;text-transform: uppercase;font-weight:normal;text-align: center;color: #000;position: relative;padding-bottom: 7px;}
.ftrprd_tabs .tabtit:after{content: '';width: 100%;height: 1px;background:#0696c2;position: absolute;left: 0;right: 0;margin: 0 auto;bottom: 0;opacity: 0;}
.ftrprd_tabs .tabs li {cursor: pointer;position: relative;padding: 0 20px;}
.ftrprd_tabs .tabs li:not(:last-child):after{content: '/';position: absolute;font-size: 14px;top: -1px;right: -4px;font-weight: 600;}    
.ftrprd_tabs .tabs li:not(:last-child){}
.ftrprd_tabs .tabs li.active {color: #000;}
.ftrprd_tabs .tab_container{}
.ftrprd_tabs .tabs li.active .tabtit{color: #0696c2;}
.ftrprd_tabs .tabs li.active .tabtit:after{opacity: 1;}

.js_ftprdlist .products{width: 100%;}

/*-----WHY CHOOSE-----*/
.sec_whychoose{position: relative;overflow: hidden;}
.sec_whychoose:before{content: '';width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: rgb(0 0 0 / 85%);}
.whychoose_wrap{min-height: 515px;display: flex;flex-wrap: wrap; align-items: center;padding: 50px 0;}
.whychoose_left{width: 45%;}
.whychoose_right{width: 55%;padding-left: 30px;}
.whychoose_content{color: #fff;max-width: 413px;letter-spacing: 0.7px;line-height: 1.7;}
.sec_whychoose .sechead{color: #fff;margin: 0 0 32px;}
.whychoose_left .readmore{margin: 74px 0 0;}
.whychoose_list{display: flex;flex-wrap: wrap;margin: 0 -15px;}
.whychoose_list > li{width: 50%;padding: 0 15px;margin: 0 0 40px;}
.whychoose_list > li:nth-child(2n+1):nth-last-child(-n+2),
.whychoose_list > li:nth-child(2n+1):nth-last-child(-n+2) ~ li {margin-bottom: 0;}
.whychoose_item{display: flex;flex-wrap: wrap;align-items: center;}
.whychoose_icon{width: 70px;height: 70px;border-radius: 50%;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;background:#0696c2;
background: linear-gradient(36deg, rgba(12,165,163,1) 0%, rgba(93,120,175,1) 50%, rgba(157,82,125,1) 100%);}
.whychoose_info{font-size: 16px;color: #fff;width: calc(100% - 70px);padding: 0 0 0 20px;letter-spacing: 0.8px;}

/*-----WORK-----*/
.sec_work{background: #f5f5f5;overflow: hidden;padding: 84px 0;margin: 90px 0;}
.js_work{margin: 0 -0.5px;}
.js_work li{padding: 0 0.5px; position: relative;}
.js_work li a:hover .itemtitle_box::after {
    height: 100%;
    width: 135%;
}
.js_work li a:hover .itemtitle, .js_work li a:hover .itemtitle span {
    color: #fff;
}
/*-----BLOG-----*/
.sec_blog{margin: 80px 0;}
.sec_blog .btnaction{margin: 29px 0 0;}

/*-----ABOUT-----*/
.sec_hmabout{margin: 80px 0;}
.sec_hmabout .contimg_wrap{align-items: flex-start;}
.sec_hmabout .imgblock{position: sticky;align-self: flex-start;top: 0;}

/*----- MEDIA QUERIES  -----*/
@media(min-width:1920px){
	.js_hmbanner .slick-slide > img{width: 100%;}
}
@media(max-width:1550px){ 
  /*BANNER*/
  .hmban_title{font-size: 40px;max-width: 650px;}
  .js_hmbanner .slick-slide > img{  position: absolute;right: 0;bottom: 0;max-width: inherit;
  left: 0;top: 0;width: 100%;object-fit: cover;z-index: -1;overflow: hidden;height: 100%;}
	.ol_hmbanner {position: relative;min-height: 500px;}
}
@media(max-width:1439px){ 
  /*BANNER*/
  .hmbanner-nav{bottom: 30px;}
  .hmbanner-nav li {margin: 0px 0 10px;}    
}
@media(max-width:1199px){
  /*BANNER*/
  .hmban_title {font-size: 36px;max-width: 590px;}
  /*WHYCHOOSE*/
  .whychoose_list > li{width: 100%;}
  .whychoose_icon {width: 60px;height: 60px;}
  .whychoose_icon img{max-width: 40px;}
  .whychoose_list > li{margin: 0 0 15px;}
}
@media(max-width:991px){
  /*BANNER*/
  .js_hmbannersnav{display: none;}
  /*BANNER*/
	
  .hmban_title {font-size: 30px;max-width: 510px;}
  /*RANGE*/
  .sec_range {margin: 50px 0;}
  /*FEATURE*/
  .sec_ftrproduct{padding: 50px 0;margin: 50px 0 0;}
  /*BLOG*/
  .sec_blog {margin: 50px 0;}
  .sec_blog .btnaction {margin: 10px 0 0;}
  /*WORK*/
  .sec_work{padding: 50px 0;margin: 50px 0;}
  /*ABOUT*/
  .sec_hmabout{margin: 50px 0;}
  .sec_hmabout .contentblock{order: 1;}
  .sec_hmabout .imgblock{order: 2;margin: 30px 0 0;}
  .sec_hmabout .imgblock{position: inherit;align-self:auto;top: auto;}
}
@media(max-width:767px){ 
  /*WHYCHOOSE*/
  .whychoose_left{width:100%;}
  .whychoose_right{width: 100%;padding: 0;margin: 40px 0 0;}
  .whychoose_left .readmore {margin: 34px 0 0;}
  .sec_whychoose .sechead{margin: 0 0 20px;}
  /*FEATURE*/
  .ftrprd_tabs .tabs{margin: 0 0 36px;}
}
@media(max-width:575px){  
  /*BANNER*/
  .ol_hmbanner  {min-height: 330px;}
  .hmban_title {font-size: 24px;max-width: 400px;}  
  /*RANGE*/
  .sec_range {margin: 40px 0;}
  /*FEATURE*/
  .sec_ftrproduct{padding: 40px 0;margin: 40px 0 0;}
  .ftrprd_tabs .tabtit {font-size: 13px;}
  .ftrprd_tabs .tabs li{padding: 0 9px;}
  /*WHYCHOOSE*/
  .whychoose_wrap{padding: 40px 0;}
  .whychoose_info {font-size: 14px;}
  .whychoose_icon {width: 50px;height: 50px;}
  .whychoose_icon img {max-width: 34px;}
  /*BLOG*/
  .sec_blog {margin: 40px 0;}
  
  .js_blog .slick-arrow,.js_work .slick-arrow{width: 30px;height: 30px;background: #fff;border-radius: 50%;z-index: 1;border: 1px solid #dfdfdf;top: 28%;bottom: auto;}  
  .js_work .slick-arrow{top: 50%;}
  .js_blog .slick-prev,.js_work .slick-prev{left:-15px;  border-radius: 0 50% 50% 0;}
  .js_blog .slick-next,.js_work .slick-next{right:-15px;border-radius: 50% 0 0 50%;}
  .js_blog .slick-arrow:before,.js_work .slick-arrow:before {font-size: 18px;}
  .js_blog .slick-prev:before,.js_work .slick-prev:before{margin-right: 3px;}
  .js_blog .slick-next:before,.js_work .slick-next:before{margin-left: 2px;}
  .js_blog .slick-arrow:hover:before,.js_work .slick-arrow:hover:before{color: #0696c2;}

  /*WORK*/
  .sec_work{padding: 40px 0;margin: 40px 0;}
  .sec_work .wrapper{margin: 0 15px;}
  /*ABOUT*/
  .sec_hmabout{margin: 40px 0;}
}
@media(max-width:420px){   
}
@media(max-width:350px){    
}


