/* @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  font-family: 'Exo 2', sans-serif;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Exo 2', sans-serif;
}

p,
a,
span {
  font-family: 'Exo 2', sans-serif;
}



.searchTerm {
  height: 38px;
}

.buit {
  width: 1300px;
  margin: auto;
  margin-top: -1px;
  display: flex;
}

.buit .col-mm {
  width: 800px;
  float: left;
  color: #6c6c6c;
  padding-top: 10px;
}

.buit .col-mm a {
  color: #6c6c6c;
  font-size: 15px;
  margin-right: 1px;
  text-decoration: none;
  padding-left: 20px;

}

.buit .col-mm a h2 {
  color: #6c6c6c;
  font-size: 15px;
  margin-right: 1px;
  text-decoration: none;
  display: initial;
  font-weight: 500;
}

.cl-main.pb {
  padding-bottom: 0;
  display: block;
}

.buit .col-mm a.active {
  color: #000;
}

.buit .col-mm a.prod {
  margin-left: 15px;
}

.buit .col-mc {
  width: 500px;
  float: left;
}

.buit .col-mc button {
  font-size: 20px;
  color: #fff;
  background: var(--bg-color);
  border: 0px;
  padding: 10px 25px;
  float: right;
}


.cl-main {
  width: 1300px;
  margin: auto;
  padding-bottom: 50px;
  display: flex;
}

.cl-main .col-mm {
  width: 300px;
  float: left;
  display: block;
  padding-right: 15px;
}

.cl-main .col-sm {
  width: 1000px;
  float: left;
  padding-left: 15px;
}


.cl-main .col-mm ul {
  list-style: none;
  margin: 0px;
}

.cl-main .col-mm a {
  text-decoration: none;
}

.cl-main .col-sm .futer .recomm a {
  text-decoration: none;
  margin: 2% 0;
}

.cl-main .col-mm h4 {
  text-align: left;
  margin: 20px auto;
  color: #fff;
  background: var(--bg-color);
  padding: 15px;
  font-size: 22px;
  font-weight: 400;
  font-family: 'Exo 2', sans-serif;
  margin-bottom: 0px;
}


.cl-main .col-mm .accordion-menu {

  background: #fff;
  border-radius: 4px;
  padding: 0px;
  border: 1px solid #ccc;
}

.cl-main .col-mm .accordion-menu li.open .dropdownlink {
  color: #000;
}

.cl-main .col-mm .accordion-menu li.open .dropdownlink .fa-chevron-down {
  transform: rotate(180deg);
}

.cl-main .col-mm .accordion-menu li:last-child .dropdownlink {
  border-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cl-main .col-mm .dropdownlink a {
  color: #212121;
  font-size: 15px;
}

.cl-main .col-mm .dropdownlink {
  cursor: pointer;
  display: block;
  padding: 15px 10px 15px 20px;
  font-size: 15px;
  border-bottom: 1px solid #ccc;
  color: #212121;
  position: relative;
  transition: all 0.4s ease-out;
}

.cl-main .col-mm .dropdownlink i {
  position: absolute;
  top: 17px;
  left: 16px;
}

.cl-main .col-mm .dropdownlink .fa-chevron-down {
  right: 12px;
  left: auto;
}

.cl-main .col-mm .submenuItems {
  display: none;
  background: #f4f4f4;
  padding: 0px;
}


/* .parentcat.open .submenuItems li
     {
      padding-left: 0px;
    } */

.open .submenuItems li {
  padding-left: 10px;
}


.cl-main .col-mm .submenuItems li {
  border-bottom: 1px solid #B6B6B6;
  width: 100%;
}

.cl-main .col-mm .submenuItems a {
  display: block;
  color: #727272;
  padding: 12px 12px 12px 45px;
  transition: all 0.4s ease-out;
  font-size: 14px;
}

.cl-main .col-mm .submenuItems a:hover {
  background-color: var(--bg-color);
  color: #fff;
}

.cl-main .col-mm a.no-ll {
  cursor: pointer;
  display: block;
  /* padding: 15px 10px 15px 20px; */
  font-size: 15px;
  /* border-bottom: 1px solid #ccc; */
  color: #212121;
  position: relative;
  transition: all 0.4s ease-out;

}

.cl-main .col-mm .accordion-menu li.open .dropdownlink1 {
  color: #727272;
}

.cl-main .col-mm .accordion-menu li.open .dropdownlink1 .fa-chevron-down {
  transform: rotate(180deg);
}

.cl-main .col-mm .accordion-menu li:last-child .dropdownlink1 {
  border-bottom: 0;
}

.cl-main .col-mm .dropdownlink1 {
  cursor: pointer;
  display: block;
  padding: 15px 10px 15px 45px;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  color: #212121;
  position: relative;
  transition: all 0.4s ease-out;
}

.cl-main .col-mm .dropdownlink1 i {
  position: absolute;
  top: 17px;
  left: 16px;
}

.cl-main .col-mm .dropdownlink1 .fa-chevron-down {
  right: 12px;
  left: auto;
}

.cl-main .col-mm .submenuItems1 {
  display: none;
  background: #fff;
  padding: 0px;
}

.cl-main .col-mm .submenuItems1 li {
  border-bottom: 1px solid #B6B6B6;
}

.cl-main .col-mm .submenuItems1 a {
  display: block;
  color: #727272;
  padding: 12px 12px 12px 50px;
  transition: all 0.4s ease-out;
}

.cl-main .col-mm .submenuItems1 a:hover {
  background-color: var(--bg-color);
  color: #fff;
}

.cl-main .col-mm .dropdownlink:after {
  font-size: 10px;
  content: '\25BC';
  float: right;
  margin-right: 20px;
}



.cl-main .col-mm .dropdownlink1:after {
  font-size: 22px;
  font-size: 10px;
  content: '\25BC';
  float: right;
  margin-right: 20px;
}

/* .cl-main .col-mm .accordion-menu li.open .dropdownlink.active:after{transform: rotate(90deg);}
    .cl-main .col-mm .accordion-menu li.open .dropdownlink1:after{transform: rotate(90deg);}
    .cl-main .col-mm .accordion-menu li.open .dropdownlink1.active1:after{transform: rotate(0deg);} */

.cl-main .col-sm .scan-ban {
  margin-bottom: 20px;
  margin-top: 20px;
  position: relative;
}

.cl-main .col-sm .scan-ban img.ban {
  width: 100%;
}

.cl-main .col-sm .scan-ban .cap-tex {
  width: 40%;
  position: absolute;
  padding-left: 50px;
  bottom: 25%;
}

.cl-main .col-sm .scan-ban .cap-tex h2 {
  font-size: 3rem;
  color: #005FAB;
  margin-bottom: 0px;
  font-family: 'Exo 2', sans-serif;
}

.cl-main .col-sm .scan-ban .cap-tex p {
  font-size: 14px;
  color: #005FAB
}



.cl-main .col-sm .futer {
  margin-top: 15px;
}

.cl-main .col-sm .futer h3 {
  font-size: 26px;
  font-weight: 400;
  font-family: 'Exo 2', sans-serif;
}

.cl-main .col-sm .futer .slider {
  width: 100%;
  height: 400px;
  position: relative;
  margin: auto;
  overflow-x: scroll;
  overflow-y: hidden;
}

.buit .col-mm a.prod {
  margin-left: 2px;
}

.cl-main .col-sm .futer .slider::-webkit-scrollbar {
  display: none;
}

.cl-main .col-sm .futer .slider .slide {
  display: flex;
  position: absolute;
  left: 0;
  transition: 0.3s left ease-in-out;
}

.cl-main .col-sm .futer .slider .item {
  margin-right: 10px;
  background: #fff;
  text-align: center;
  padding: 10px;
  padding-bottom: 30px;
  width: 214px;
  border: 1px solid #f1f1f1;
}

.cl-main .col-sm .futer .slider .item h4 {
  font-size: 20px;
  font-weight: 600;
  color: var(--bg-color);
  text-transform: uppercase;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Exo 2', sans-serif;
}

.cl-main .col-sm .futer .slider .item img {
  width: 100%;
  max-height: 160px;
  min-height: 160px;
  object-fit: contain;
}

.cl-main .col-sm .futer .slider .item p {
  margin: 0px;
  font-size: 14px;
  margin-bottom: 5px;
}

.cl-main .col-sm .futer .slider .item button {
  background: var(--bg-color);
  cursor: pointer;
  width: 80%;
  padding: 10px;
  font-weight: 500;
  border: 0px;
  margin-top: 5px;
  color: #fff;
}

.cl-main .col-sm .futer .slider .item a {
  cursor: pointer;
}

.cl-main .col-sm .futer .slider .item:last-child {
  margin-right: 0;
}

.cl-main .col-sm .futer .ctrl {
  text-align: center;
  margin-top: 5px;
}

.cl-main .col-sm .futer .ctrl-btn {
  padding: 15px 8px;
  min-width: 20px;
  background: var(--bg-color);
  border: none;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -27.5px;
}

.cl-main .col-sm .futer .ctrl-btn .xspan {
  transform: scale(1, 2);
  font-family: 'Exo 2', sans-serif;
  margin-top: -6px;
  font-weight: 400;
}

.cl-main .col-sm .futer .ctrl-btn.pro-prev {
  left: 0;
}

.cl-main .col-sm .futer .ctrl-btn.pro-next {
  right: 0;
}



.cl-main .col-sm .futer .recomm {
  display: flex;
  flex-wrap: wrap;
}

.cl-main .col-sm .futer .recomm .item {
  margin-right: 10px;
  background: #fff;
  text-align: center;
  padding: 0 0 0 0;
  width: 310px;
  border: 1px solid #f1f1f1;
}

.cl-main .col-sm .futer .recomm .item h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--bg-color);
  text-transform: uppercase;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Exo 2', sans-serif;
}

.cl-main .col-sm .futer .recomm .item img {
  width: 100%;
  object-fit: contain;
  height: 200px;
}

.cl-main .col-sm .futer .recomm .item p {
  margin: 0px;
  font-size: 14px;
  margin-bottom: 5px;
}

.cl-main .col-sm .futer .recomm .item button {
  background: var(--bg-color);
  cursor: pointer;
  width: 80%;
  padding: 10px;
  font-weight: 500;
  border: 0px;
  margin-top: 5px;
  color: #fff;
}

.cl-main .col-sm .futer .recomm .item a {
  cursor: pointer;
}


.decoration {
  text-decoration: none;
}

.text-white {
  color: #fff;
}

/*carousel*/

.pro-name {
  line-height: 1;
  margin-bottom: 8px;
  height: 32.2px;
  overflow: hidden;
  color: #333;
}

.pro-model {
  padding: 5px 0 15px 0;
  color: #333;
}

.pro-view {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
}

/* product-accessories */
.product-accessories {
  width: 1300px;
  margin: auto;
  padding-bottom: 30px;
  padding-top: 30px;
  display: flex;
}

.product-accessories .col-mm {
  width: 700px;
  float: left;
  display: block;
  padding-right: 15px;
  position: relative;
}

.product-accessories .col-sm {
  width: 500px;
  float: left;
  padding-left: 15px;
}

.product-accessories .col-mm .year {
  width: 200px;
  position: absolute;
  right: -1%;
  top: -5%;
}

.product-accessories .col-mm .year img {
  width: 100%;
}

.product-accessories .col-mm .product-box {
  background: #ededed;
  padding: 50px;
  padding-top: 70px;
}

.product-accessories .col-mm .product-box h3 {
  font-size: 36px;
  margin-top: 0px;
  font-weight: 700;
  color: var(--bg-color);
  font-family: 'Exo 2', sans-serif;
}

.product-accessories .col-mm .product-box table {
  width: 100%;
}

.product-accessories .col-mm .product-box table tr {
  border-bottom: 1px solid #b0b0b0;
  padding-bottom: 20px;
  margin-bottom: 20px;
  display: flex;
}

.product-accessories .col-mm .product-box table td {
  width: 60%;
  font-size: 16px;
}



.product-accessories .col-sm {}

.product-accessories .col-sm h4 {
  font-size: 30px;
  margin-top: 0px;
  font-weight: 400;
  font-family: 'Exo 2', sans-serif;
}

.product-accessories .col-sm .acc-box {
  border: 1px solid #b0b0b0;
  padding: 15px 10px;
  display: flex;
}

.product-accessories .col-sm .acc-box .im-acc {
  width: 130px;
  float: left;
  margin-right: 10px;
}

.product-accessories .col-sm .acc-box .im-acc img {
  width: 100%;
}

.product-accessories .col-sm .acc-box .text-acc {
  width: 360px;
  float: left;
}

.product-accessories .col-sm .acc-box .text-acc h4 {
  font-size: 18px;
  color: #000;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 10px;
}

.product-accessories .col-sm .acc-box .text-acc p {
  font-size: 14px;
  color: #000;
  font-weight: 400;
}

.product-accessories .col-sm .acc-box .text-acc button {
  background: var(--bg-color);
  padding: 8px 10px;
  color: #fff;
  border: 0px;
}



/*alternative*/
.alternative {
  padding-top: 20px;
}

.alternative h3 {
  font-size: 30px;
  margin-top: 0px;
  font-weight: 400;
  font-family: 'Exo 2', sans-serif;
  margin-bottom: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --grid-column-gap: 20px;
}

.carouselPre {
  grid-auto-flow: column;
  display: grid;
  grid-auto-columns: calc((100% - 3 * var(--grid-column-gap))/ 3);
  grid-column-gap: var(--grid-column-gap);
  scroll-snap-type: x mandatory;
  overflow-x: hidden;
  overflow-y: hidden;
  list-style: none;
  scroll-behavior: smooth;

}

.carouselPre a {
  text-decoration: none;
}

.carouselPre h2 {
  text-decoration: none;
  font-size: 15px;
}

#title {
  margin: 10px 10px 10px 0;
  font-size: 34px;
  font-weight: 600;
}

.topT {
  border-top: 1px solid rgb(212, 212, 212);
  padding: 10px 0;
  font-weight: 600;
  font-size: 20px;
}

.itemsC .textDet {
  /* position: absolute;
        bottom: 0;
        height: 60px;
        width: 100%;
        display: flex;*/
}

.contents {
  color: white;
  width: 90%;
  margin: auto;
  text-align: center;
}

.itemsC .contents button {
  background: var(--bg-color);
  cursor: pointer;
  margin: 0 auto;
  padding: 8px 20px;
  font-weight: 500;
  border: 0px;
  margin-top: 5px;
  color: #fff;
  font-family: 'Exo 2', sans-serif !important;
}


.itemsC .contents p {
  margin: 0px;
  font-size: 14px;
  margin-bottom: 5px;
  color: #000;
  font-weight: 600;
}

.leftTxtDet h2 {
  font-size: 16px; 
  color: #333; 
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Exo 2', sans-serif;
      font-weight: 400;
}

.itemsC {
  position: relative;
}

.scrolly {
  overflow: hidden;
}

.carouselPre li {
  scroll-snap-align: start;
  width: 100%;
  height: 100%;
  border: 1px solid #f1f1f1;
  list-style: none;
  border-radius: 20px;
  overflow: hidden;
  padding-bottom: 40px;
  border-radius: 0px;
}

.carouselPre li .bgImg {
  width: 100%;
}

.carouselPre li img {
  width: 100%;
  /*height: 100%;
        object-fit: cover;*/
  max-height: 160px;
  min-height: 160px;
  object-fit: contain;
}

.scrolly {
  position: relative;
}

#left,
#right {
  background-color: rgb(40 102 169 / 90%);
  outline: none;
  border: transparent;
  border-radius: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  transform: translate(0, -60%);
  cursor: pointer;
  z-index: 2;

}


.scrolly button i {
  color: #fff
}







#left {
  left: 0;
}

#right {
  right: 0;
}

@media only screen and (max-width: 890px) {
  .carouselPre {
    grid-auto-columns: calc((100% - 2 * var(--grid-column-gap))/ 3);
    height: 23rem;
  }
}

@media only screen and (max-width: 660px) {
  .carouselPre {
    grid-auto-columns: calc((100% - 1 * var(--grid-column-gap))/ 2);
    height: 25rem;
  }
}

@media only screen and (max-width: 440px) {
  .carouselPre {
    grid-auto-columns: 100%;
    height: 25rem;
  }
}


::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  border-left: #ededed solid 1px;
  background-color: #fcfcfc;
  border-top: #ededed solid 1px;
}

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background: #c7c7c7;
  width: 15px;
  background-clip: content-box;
  border: 4px solid transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb {
  background: #dbdbdb;
  background-clip: content-box;
  border: 4px solid transparent;
  border-radius: 10px;

}






.metal {
  margin: auto;
  background: #F8F8F8;
  padding-top: 50px;
  padding-bottom: 50px
}

.metal .manu-main-new {
  width: 1300px;
  margin: auto;
  display: flex;
  margin-bottom: 30px
}

.metal .manu-main-new .col-mm {
  float: left;
}

.metal .manu-main-new .fir-bo {
  width: 50%;
  height: 297px;
  margin-right: 15px;
  /* background: linear-gradient(100.71deg, var(--news-grd-top) 38.41%, var(--news-grd-btm) 88.12%); */
  position: relative;
}

.metal .manu-main-new .fir-bo a {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  text-decoration: none;
}


.metal .manu-main-new .fir-bo .text {
  width: 100%;
  position: absolute;
  top: 30%;
  left: 10%;
}

.metal .manu-main-new .fir-bo .text h4 {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Exo 2', sans-serif;
}

.metal .manu-main-new .fir-bo .text h5 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.metal .manu-main-new .fir-bo .text button {
  background: #fff;
  cursor: pointer;
  width: 25%;
  padding: 10px;
  font-weight: 600;
  border: 0px;
  margin-top: 5px;
  color: var(--bg-color);
  font-size: 15px;
  text-transform: uppercase;
}

.metal .manu-main-new .fir-bo .text a {
  color: var(--hover-color);
  text-decoration: none;
}

.metal .manu-main-new .fir-bo img {
  float: right;
}







.metal .manu-main-new .sec-bo {
  width: 50%;
  height: 296px;
  margin-left: 15px;
  /* background: linear-gradient(98.13deg, var(--fair-grd-top) 53.36%, var(--fair-grd-btm) 83.37%); */
  position: relative;
  /* padding: 15px; */
}


.metal .manu-main-new .sec-bo a {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  text-decoration: none;
}

.metal .manu-main-new .sec-bo .text_img {
  /* float: left;
    width: 49%; */
}

.metal .manu-main-new .sec-bo .text_img.hig {
  /* padding-top: 70px;
    margin-right: 10px;
    padding-left: 20px; */
  width: 100%;
  position: absolute;
  top: 30%;
  left: 10%;

}

.metal .manu-main-new .sec-bo .text_img h4 {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Exo 2', sans-serif;
}

.metal .manu-main-new .sec-bo .text_img h5 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.metal .manu-main-new .sec-bo .text_img button {
  background: var(--bg-color);
  cursor: pointer;
  width: 60%;
  padding: 10px;
  font-weight: 600;
  border: 0px;
  margin-top: 5px;
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
}

.metal .manu-main-new .sec-bo .text_img img {
  width: 100%;
  /* max-height: 266px;
    min-height: 266px */
}



.footer-main .col-mm ul li a h5 {
  font-size: 1em;
  color: #fff;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  display: block;
  margin: 0;
  font-weight: 300;
}






.metal .manu-main {
  width: 1300px;
  margin: auto;
  display: block;
}

.metal .manu-main h3 {
  font-size: 1.7rem;
  font-weight: 600;
  color: #000000;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Exo 2', sans-serif;
}

.metal .manu-main p {
  font-size: 16px;
  line-height: 1.8;
  width: 90%
}






/* developed by - aA-Abdul anas {abdulanaspnweb@gmail.com}*/

/*Rasponsive Code*/
/*1920*/
@media only screen and (min-width : 1920px) and (max-width : 2560px) {
  .buit .col-mc button {
    margin-top: -2px;
    font-family: 'Exo 2', sans-serif;
  }
}

/*1600*/
@media only screen and (min-width : 1600px) and (max-width : 1919px) {
  .buit .col-mc button {
    margin-top: -2px;
    font-family: 'Exo 2', sans-serif;
  }
}

/*1500*/
@media only screen and (min-width : 1500px) and (max-width : 1599px) {
  .buit .col-mc button {
    margin-top: -2px;
    font-family: 'Exo 2', sans-serif;
  }
}

/*1440*/
@media only screen and (min-width : 1440px) and (max-width : 1500px) {
  .buit .col-mc button {
    margin-top: -2px;
    font-family: 'Exo 2', sans-serif;
  }
}

/*1440*/
@media only screen and (max-width : 1440px) {
  .buit .col-mc button {
    margin-top: -2px;
    font-family: 'Exo 2', sans-serif;
  }
}

/*1366*/
@media only screen and (min-width : 1366px) and (max-width : 1439px) {

  .sp-le .back-page {
    width: 285px;
  }

  .buit {
    width: 1150px;
  }

  .buit .col-mm {
    width: 50%;
  }

  .buit .col-mc {
    width: 50%;
  }

  .buit .col-mc button {
    margin-top: -2px;
  }

  .cl-main {
    width: 1150px;
  }

  .cl-main .col-sm {
    width: 821px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 185px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 1150px;
  }

  .manu-main-0sct {
    width: 1150px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 46%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 1150px
  }

  .metal .manu-main-new {
    width: 1150px;
  }

  .cl-main .col-sm .futer .recomm .item {
    width: 271px;
  }



}

/*1280*/
@media only screen and (min-width : 1280px) and (max-width : 1365px) {
  .sp-le .back-page {
    width: 235px;
  }

  .buit {
    width: 1150px;
  }

  .buit .col-mm {
    width: 50%;
  }

  .buit .col-mc {
    width: 50%;
  }

  .buit .col-mc button {
    margin-top: -2px;
  }

  .cl-main {
    width: 1150px;
  }

  .cl-main .col-mm {
    width: 250px;
  }


  .cl-main .col-sm {
    width: 890px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 185px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 1150px;
  }

  .manu-main-0sct {
    width: 1150px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 46%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 1150px
  }

  .metal .manu-main-new {
    width: 1150px;
  }

  .cl-main .col-sm .futer .recomm .item {
    width: 271px;
  }
}

/*1200*/
@media only screen and (min-width : 1200px) and (max-width : 1279px) {

  .buit {
    width: 1150px;
  }

  .buit .col-mm {
    width: 50%;
  }

  .buit .col-mc {
    width: 50%;
  }

  .buit .col-mc button {
    margin-top: -2px;
  }

  .cl-main {
    width: 1150px;
  }

  .cl-main .col-sm {
    width: 821px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 185px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 1150px;
  }

  .manu-main-0sct {
    width: 1150px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 46%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 1150px
  }

  .metal .manu-main-new {
    width: 1150px;
  }

  .cl-main .col-sm .futer .recomm .item {
    width: 271px;
  }
}

/*1024*/
@media only screen and (min-width : 1024px) and (max-width : 1199px) {

  .metal .manu-main-new .sec-bo {
    height: auto;
  }

  .metal .manu-main-new .fir-bo {
    height: auto;
  }

  .cl-main .col-mm {
    width: 275px;
  }

  .sp-le .back-page {
    width: 260px;
  }

  .buit {
    width: 950px;
  }

  .buit .col-mm {
    width: 65%;
  }

  .buit .col-mc {
    width: 45%;
    float: right;
  }

  .buit .col-mc button {
    font-size: 16px;
    margin-top: -1px;
  }

  .cl-main {
    width: 950px;
  }

  .cl-main .col-sm {
    width: 680px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 302px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 950px;
  }

  .manu-main-0sct {
    width: 950px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 46%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 950px
  }

  .cl-main .col-sm .scan-ban img.ban {
    height: 100%;
  }

  .cl-main .col-sm .scan-ban .cap-tex h2 {
    font-size: 2rem;
  }

  .cl-main .col-sm .scan-ban .cap-tex p {
    font-size: 13px;
  }

  .cl-main .col-sm .futer .recomm {
    display: inline-block;
  }

  .cl-main .col-sm .futer .recomm .item {
    width: 48%;
    margin-bottom: 10px;
    float: left;
  }

  .carouselPre {
    grid-auto-columns: calc((100% - 2 * var(--grid-column-gap))/ 2);
  }

  .metal .manu-main-new {
    width: 950px;
  }

  .metal .manu-main-new .sec-bo .text_img {
    /* width: 48% */
  }

}

/*tab*/
@media only screen and (min-width : 768px) and (max-width :1023px) {

  .desk nav a {
    font-size: 11px;
  }

  .buit {
    width: 85%;
    display: flex;
  }

  .buit .col-mm {
    width: 70%;
  }

  .buit .col-mc {
    width: 30%;
  }

  .buit .col-mc button {
    font-size: 16px;
  }

  .cl-main {
    width: 85%;
  }

  .cl-main .col-sm {
    width: 100%;
    padding-left: 0px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 207px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 85%;
    display: block;
  }

  .manu-main-0sct {
    width: 85%;
    display: block;
  }

  .manu-main-0sct .col-md-0s {
    width: 100%;
    margin: 0px;
    margin-top: 30px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 39%;
    width: 40%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 85%;
  }

  .cl-main .col-sm .scan-ban img.ban {
    height: 100%;
  }

  .cl-main .col-sm .scan-ban .cap-tex h2 {
    font-size: 2rem;
  }

  .cl-main .col-sm .scan-ban .cap-tex p {
    font-size: 13px;
  }

  .cl-main .col-sm .futer .recomm {
    display: inline-block;
  }

  .cl-main .col-sm .futer .recomm .item {
    width: 48%;
    margin-bottom: 10px;
    float: left;
  }


  .cl-main .col-mm {
    display: none;
  }

  .manu .manu-main .m-box {
    width: 87%;
    padding: 45px;
    padding-top: 30px;
  }

  .manu .manu-main .m-box button {
    padding: 15px 30px;
  }

  .manu {
    display: flow-root;
  }

  .manu .manu-main .m-img {
    width: 100%;
    float: left;
  }

  .metal .manu-main-new {
    width: 100%;
    display: inline-block;
  }

  .metal .manu-main-new .fir-bo {
    width: 100%;
    float: left;
    margin-bottom: 90px;
  }

  .metal .manu-main-new .sec-bo {
    width: 100%;
    float: left;
    margin-left: 0px;
    margin-bottom: 30px;
  }

  .metal {
    background: transparent;
    padding-top: 0px;
  }

  .metal .manu-main-new .fir-bo .text {
    width: 70%;
    left: 8%;
  }

  .metal .manu-main-new .sec-bo .text_img.hig {
    padding-left: 50px;
  }


}




/*mobile*/
@media only screen and (min-width : 150px) and (max-width : 767px) {

  .searchTerm {
    height: 33px;
  }

  .wrap {
    width: 100%;
    transform: translate(0%, -24%);

  }

  .lng {
    position: absolute;
    right: 60px;
    top: 50px;
  }

  .hed-main .gr-mobile a svg {
    width: 28px;
    height: 26px;
    position: absolute;
    right: 21px;
    top: 70px;
  }

  .metal .manu-main-new .fir-bo .text button {
    width: 44%;
    font-size: 14px;
  }

  .buit {
    width: 85%;
    display: flow-root;
  }

  .buit .col-mm {
    width: 100%;
  }

  .buit .col-mc {
    width: 100%;
    margin-top: 12px;
  }

  .buit .col-mc button {
    font-size: 16px;
    width: 100%;
    display: none;
  }

  .cl-main {
    width: 85%;
    display: block;

  }

  .cl-main .col-sm {
    width: 100%;
    padding-left: 0px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 207px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 85%;
    display: block;
  }

  .manu-main-0sct {
    width: 85%;
    display: block;
  }

  .manu-main-0sct .col-md-0s {
    width: 100%;
    margin: 0px;
    margin-top: 30px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 39%;
    width: 40%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 88%;
  }

  .cl-main .col-sm .scan-ban img.ban {
    height: 100%;
  }

  .metal .manu-main p {
    width: 100%;
  }

  .cl-main .col-sm .scan-ban .cap-tex h2 {
    font-size: 2rem;
  }

  .cl-main .col-sm .scan-ban .cap-tex p {
    font-size: 13px;
  }

  .cl-main .col-sm .futer .recomm {
    display: inline-block;
  }

  .cl-main .col-sm .futer .recomm .item {
    width: 100%;
    margin-bottom: 10px;
    float: left;
  }


  .cl-main .col-mm {
    width: 100%;
    padding-right: 0px;
    display: none;
  }

  .manu .manu-main .m-box {
    width: 87%;
    padding: 45px;
    padding-top: 30px;
  }

  .manu .manu-main .m-box button {
    padding: 15px 30px;
  }

  .manu {
    display: flow-root;
  }

  .manu .manu-main .m-img {
    width: 100%;
    float: left;
  }

  .metal .manu-main-new {
    width: 100%;
    display: inline-block;
    margin: 0;
  }

  .metal .manu-main-new .fir-bo {
    width: 100%;
    float: left;
    margin-bottom: 20px;
    height: 278px;
  }

  .metal .manu-main-new .fir-bo img {
    float: right;
    object-fit: cover;
    height: 278px;
  }


  .metal .manu-main-new .sec-bo {
    width: 100%;
    float: left;
    margin-left: 0px;
    margin-bottom: 30px;
    display: flex;
    height: 262px;
  }

  .metal .manu-main-new .sec-bo .text_img img {
    width: 100%;
    max-height: 266px;
    min-height: 266px;
    object-fit: cover;
  }

  .metal {
    background: transparent;
    padding-top: 0px;
  }

  .metal .manu-main-new .fir-bo .text {
    width: 70%;
    left: 8%;
  }

  .metal .manu-main-new .sec-bo .text_img.hig {
    padding-left: 0px;
    padding-top: 10px;
  }

  .metal .manu-main-new .sec-bo .text_img button {
    width: 70%;
    font-size: 14px;
  }


  .product-accessories {
    width: 85%;
    display: flow-root;
  }

  .product-accessories .col-mm {
    width: 100%;
    padding-right: 0px;
  }

  .product-accessories .col-sm {
    width: 100%;
    padding-left: 0px;
    margin-top: 20px;
  }

  .product-accessories .col-sm .acc-box {
    margin-bottom: 10px;
  }

  .product-accessories .col-mm .year {
    right: 0%;
    width: 100%;
    top: 0%;
    position: relative;
  }

  .product-accessories .col-mm .year img {
    width: 60%;
    margin: auto;
    display: block;
  }

  .product-accessories .col-mm .product-box {
    padding: 30px;
    padding-top: 30px;
    margin-top: 20px;
  }

  .product-accessories .col-mm .product-box h3 {
    margin-bottom: 15px;
  }

  .product-accessories .col-mm .product-box table td {
    border-left: 1px solid #b0b0b0;
    padding-left: 10px;
  }

  .product-accessories .col-mm .product-box table td.mob-bor {
    border-left: 0px solid #b0b0b0;
    padding-left: 0px;
    padding-right: 10px;
  }

  .alternative {
    width: 85%;
    display: flow-root;
  }

  .carouselPre {
    height: 25rem;
  }


  #detail .product-images .thumb-nav li img {
    min-height: 70px;
    max-height: 70px;
  }

  #detail .product-images .thumb-nav {
    max-width: 78%;
  }

  .cl-main .col-mm button {
    margin-top: 0px;
    font-size: 16px;
  }

  .cl-main .col-mm .boccc button {
    font-size: 13px;
    width: 35%;
  }


}

@media only screen and (max-width: 690px) {}

@media only screen and (max-width: 450px) {}

@media only screen and (max-width : 376px) {

  .buit .col-mm a.prod {
    margin-left: 10px;
  }

  .buit .col-mm a {
    margin-right: 10px;
  }

  #detail .product-images .thumb-nav li img {
    min-height: 45px;
    max-height: 45px;
  }


}

@media only screen and (max-width : 320px) {

  .carouselPre {
    height: 21rem;
  }

  .buit .col-mm a.prod {
    margin-left: 5px;
  }

  .buit .col-mm a {
    margin-right: 5px;
    font-size: 13px;
  }


}