@charset "utf-8";

.productli {display:flex;gap: 4rem 5%;flex-wrap: wrap;width: 100%;}
.productli li {width: 30%;padding: 2rem;background-color: #222222;border:4px solid #fff0;border-radius: 1rem;height: 100%;transition: all .5s;}
.productli li:hover {border-color:var(--color-main);background-color: #111111;box-shadow: 5px 3px 30px rgb(195 39 38 / 30%);}
.productli li a {position:relative;word-break: keep-all;width: 100%;height: 100%;display: block;}
.productli li a:before {
    content:"\F4B2";
    font-family:remixicon;
    position: absolute;
    width: 5rem;
    height: 5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(
    --color-main);
    font-size: 2rem;
    color: #fff;
    opacity:0;
    transition: all .5s;
}
.productli li:hover a:before {opacity:1}
.productli .pro_thum {
    padding: 1rem 0;
    text-align: center;
    /* height: 70%; */
    width: 100%;
}
.productli .pro_thum img {width: 90%;object-fit:contain;height: auto;}
.productli .pro_name {color:#fff;text-align: center;padding: 1rem 0;}
.productli .pro_name h4 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 1rem;
}
.productli .pro_name p {font-size: 24px;transition:all .4s;letter-spacing:0}
.productli .pro_name p span {font-size:20px; letter-spacing:-.5px}
.productli li:hover .pro_name p {color:var(--color-main);}
.pro_container{height: auto;}
.pro_top {width: 1510px;margin:0 auto}
.pro_info {display:flex;width: 100%;background-color: #222222;padding: 4rem 5rem;border-radius: 1rem;height: 100%;justify-content: center;gap: 7rem;}
.pro_info li {width: 51%;height: 100%;}
.pro_info li:first-of-type {width: 35%;/* background-color: #fff; */border-radius: 1rem;height: 100%;position: relative;margin-top: 10px;}
.pro_info li:first-of-type::after {content:"";position:absolute;background-repeat: no-repeat;width: 150px;height: 60px;max-width: 200px;top: 4%;left: 6%;z-index: 1;background-size: contain;}
.pro_info li.ramony::after {background-image: url(/img/page/product/icm7000r/logo.png);}
.pro_info li.time::after {background-image: url(/img/page/product/icm6800r-chef/logo.png);}
.pro_info li.wellqua::after {background-image: url(/img/page/product/wq100/logo.png);}
.pro_info li.fried::after {background-image: url(/img/page/product/fried/logo.png);}
.pro_txt {color:#fff;margin-bottom: 1.5rem;}
.pro_txt h4 {font-size: 35px;padding-bottom: 2rem;font-weight: 500;/* color: var(--color-main); */letter-spacing: 0;}
.pro_txt dl {display:flex;flex-wrap:wrap;gap: 10px 0;padding-bottom: 2rem;border-bottom: 1px solid rgb(255 255 255 / 20%);}
.pro_txt dl dt {width: 25%;font-size: 18px;}
.pro_txt dl dd {width: 75%;font-weight: 300;font-size: 18px;font-weight: 300;opacity: .7;}
.sub_main h3 {color:#fff;font-size:50px;text-align: center;margin: 0 0 4rem;font-weight: 700;}


/* 스와이퍼 */
	.swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      /* background: #fff; */
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    body {
      background: #000;
      color: #000;
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    .swiper-slide {
      background-size: cover;
      background-position: center;
      height: 100%;
    }

    .proSwiper2 {
      height: 450px;
      width: 100%;
      border-radius: 1rem;
      background-color: #fff;
    }

    .proSwiper {
      height: 10%;
      box-sizing: border-box;
      /* padding: 10px 0; */
      margin-top: 1rem;
    }

    .proSwiper .swiper-slide {
      /* width: 25%; */
      height: 100%;
      opacity: 1;
      padding: 0;
      border-radius: .5rem;
      border: 3px solid #fff0;
      padding: 4px;
      background-color: #fff;
    }

    .proSwiper .swiper-slide-thumb-active {
      /* opacity: .4; */
      border-color: var(--color-main);
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      padding-top: 1rem;
    }
	.proSwiper .swiper-slide img {padding:0;width: 100%;}
.pro_point {
    display: flex;
    margin-top: 6rem;
}
.point_tit {
    width: 30%;
}
.point_tit h4 {
    color: #fff;
    font-size: 40px;
    width: 85%;
    word-break: keep-all;
}
.point_list {
    width: 70%;
    /* margin-left: 3rem; */
}
.point_list ul {}
.point_list li {color: #fff;border-bottom:1px solid rgb(255 255 255 / 16%);padding-bottom:3rem;list-style: decimal-leading-zero;/* padding-left: 3rem; */list-style-position: inside;}
.point_list li + li {margin:3rem 0}
.point_list li::marker {color:var(--color-main);font-weight: 700;font-size: 28px;}
.point_list li strong {font-size: 24px;font-weight: 600;margin-bottom:.5rem;display:inline-block;padding-left: .5rem;}
.point_list li p {font-size:18px;color:rgb(255 255 255 / 70%);word-break: keep-all;}
.imgbox {background-color:#222222;padding: 2.5rem;/* height:500px; */border-radius:1rem;margin-top:1rem}
.imgbox img {width:100%; height:100%; object-fit:cover; object-position:center}

/* PC */ 
@media only screen and (min-width:1024px) and (max-width: 1400px)  {
	.pro_top {width:100%; padding:0 3%}
	.pro_info {padding:3rem 4rem;gap: 4rem;}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media (max-width: 1023px) {
    .pro_top {width:100%;}
    .pro_info {padding:2rem;display: flex;position: relative;gap: 2rem;}
    .pro_info li {}
	.pro_info li:first-of-type {width:45%;height: 100%;}
	.pro_txt dl {padding-bottom:1rem}
    .pro_txt dl dd, .pro_txt dl dt {font-size:.9rem}
	.pro_txt dl dt {width: 30%;}
	.pro_txt dl dd {width: 70%;}
	.pro_txt h4 {padding-bottom:1rem}
    .proSwiper2 {height:360px}
	.proSwiper {height: 46px;}
	.swiper-slide {padding: 0;}
    .swiper-slide img {height: 100%;object-fit: contain;padding-top: 2rem;}
	.pro_info li:first-of-type::after {width:25%}
    .productli {gap:1.5rem}
	.productli li {width: 48.26%;padding: 1rem;}
    .productli .pro_name h4 {font-size: clamp(1.2rem, 5.5vw, 1.6rem);}
    .productli .pro_name p {font-size: clamp(1rem, 4.5vw, 1.2rem);}
}

/* 모바일 가로, 모바일 세로 (해상도 ~ 767px)*/ 
@media all and (max-width:767px) {
	.sub_main h3 {font-size: clamp(1.5rem, 7vw, 2rem);margin-bottom: 2rem;}
    .pro_top {width:100%;padding: 0 5%;}
    .pro_info {padding: 1rem;flex-wrap: wrap;}
    .swiper-slide img {height: 100%;}
    .pro_info li {width: 100%;display: flex;flex-direction: column;}
    .pro_info li:first-of-type {width: 100%;}
    .productli {gap:1.5rem}
	.productli li {width: 100%;padding: 1rem;}
    .productli .pro_name h4 {font-size: clamp(1.2rem, 5.5vw, 1.6rem);}
    .productli .pro_name p {font-size: clamp(1rem, 4.5vw, 1.2rem);}
	.proSwiper {height:55px}
	.pro_txt h4 {font-size: clamp(1.2rem, 5.5vw, 1.6rem);}
	.pro_txt dl dt {width:35%}
	.pro_txt dl dd  {/* width:100%; */width: 65%;}
	.pro_point {flex-wrap:wrap}
	.point_tit {width:100%;margin-bottom: 2rem;}
	.point_tit h4 {font-size: clamp(1.2rem, 6.5vw, 1.6rem);}
	.point_list {width:100%}
	.point_list li {padding-bottom:2rem}
	.point_list li + li {margin:2rem 0}
	.point_list li::marker {font-size:20px}
	.point_list li strong {font-size: clamp(1.1rem, 4.6vw, 1.2rem);padding-left:0;}
	.point_list li p {font-size: clamp(.9rem, 4.3vw, 1rem);}
	
}