*{box-sizing:border-box;}

body{
  margin:0;
  font-family:"Pretendard","Noto Sans KR",sans-serif;
  color:#111;
}


.co2-wrap,
.co2-guide,
.co2-special,
.co2-disease,
.co2-process,
.co2-recommend{
  max-width:1240px;
  width:100%;
  margin:0 auto;

}

.co2-inner{
  width:min(calc(100% - 40px),1240px);
  margin:0 auto;
}

.img-box{
  width:100%;
  background:#fefefe;
  color:#fff;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:clamp(36px,5vw,64px);
  font-weight:800;

  
}
.img-box img{width: 100%; border-radius: 10px;}
.section-title{
  margin-bottom:70px;
  text-align:center;
}
.section-title img{width: 100%;}
.section-title h2{
  margin:0 0 14px;
  font-size:clamp(34px,4vw,50px);
  font-weight:700;
  letter-spacing:-0.05em;
}

.section-title p{
  margin:0;
  font-size:clamp(16px,2vw,26px);
  font-weight:500;
  letter-spacing:-0.04em;
}

/* ========================================
   02. PC
======================================== */

/* HERO */
.co2-hero{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:90px;
  padding:80px 0 90px;
  height: 620px;

}

.hero-sub{
  margin:0 0 14px;
  font-size:clamp(24px,2.8vw,34px);
  font-weight:500;
  line-height:1.3;
}

.hero-text h1{
  margin:0 0 24px;
  font-size:clamp(48px,6vw,76px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.06em;
}

.hero-desc{
  margin:0;
  font-size:clamp(16px,2vw,21px);
  line-height:1.5;
  letter-spacing:-0.04em;
}

.hero-img{aspect-ratio:1.15/1;}

/* INTRO */
.co2-intro{
  padding:90px 0 70px;
  text-align:center;
  /*border-top:1px solid #f1f1f1;*/
}

.intro-sub{
  margin:0 0 24px;
  font-size:clamp(20px,2.4vw,28px);
  font-weight:500;
  line-height:1.4;
}

.co2-intro h2{
  margin:0 0 48px;
  font-size:clamp(34px,4.2vw,48px);
  font-weight:700;
  letter-spacing:-0.05em;
}

.co2-intro p{
  max-width:980px;
  margin:0 auto 26px;
  font-size:clamp(17px,1.8vw,18px);
  line-height:1.55;
  letter-spacing:-0.04em;
}

/* POINT */
.co2-point{
  display:grid;
  grid-template-columns:590px 1fr;
  align-items:center;
  gap:70px;
  padding:50px 0 80px;
}

.point-img{aspect-ratio:1.1/1;}

.point-list{
  display:grid;
  gap:42px;
}

.point-item span{
  display:inline-block;
  margin-bottom:14px;
  padding:6px 28px;
  border-radius:999px;
  background:#06a2b0;
  color:#fff;
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.03em;
}

.point-item h3{
  margin:0 0 12px;
  font-size:clamp(24px,2.8vw,28px);
  line-height:1.25;
  font-weight: 700;
}

.point-item p{
  margin:0;
  font-size:clamp(17px,1.8vw,18px);
  line-height:1.45;
  letter-spacing:-0.04em;
}

/* GUIDE */
.co2-guide{
  padding:90px 0;
  text-align:center;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}

.co2-guide h2{
  margin:0 0 70px;
  font-size:clamp(34px,4vw,50px);
  font-weight:900;
  letter-spacing:-0.05em;
}

.guide-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:90px;
  font-size: 17px;
  line-height: 22px;
}

.guide-item{
  position:relative;
}

.guide-item h3{
 color:#06a2b0;
 font: 18px;
}
.guide-item:not(:last-child)::after{
  content:"›";
  position:absolute;
  top:118px;
  right:-52px;
  font-size:58px;
  font-weight:200;
  line-height:1;
}

.guide-icon{
  width:260px;
  height:260px;
  margin:0 auto 34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:36px;
  font-weight:900;
}
.guide-icon img{width: 100%; border-radius: 50%;}
.guide-item strong{display: block;padding: 10px 0;}
/* SPECIAL */
.co2-special{
  padding:100px 0 120px;
}

.co2-special h2{
  margin:0 0 90px;
  text-align:center;
  font-size:clamp(34px,4vw,50px);
  font-weight:700;
  letter-spacing:-0.05em;
}

.special-list{
  display:grid;
  gap:110px;
}

.special-item{
  display:grid;
  grid-template-columns:500px 1fr;
  align-items:center;
  gap:110px;
}

.special-item.reverse{
  grid-template-columns:1fr 500px;
}

.special-item.reverse .special-img{order:2;}

.special-item.reverse .special-text{
  order:1;
  text-align:right;
}

.special-img{
  aspect-ratio:1.12/1;
  border-radius:10px;
}

.special-text span{
  display:block;
  margin-bottom:16px;
  font-size:clamp(28px,3vw,38px);
  font-weight:700;
  letter-spacing:-0.04em;
}

.special-text h3{
  margin:0 0 28px;
  font-size:clamp(24px,2.5vw,32px);
  line-height:1.35;
  font-weight:700;
  letter-spacing:-0.05em;
}

.special-text p{
  max-width:560px;
  margin:0;
  font-size:clamp(17px,1.7vw,21px);
  line-height:1.65;
  font-weight:500;
  letter-spacing:-0.04em;
}

.special-item.reverse .special-text p{
  margin-left:auto;
}

/* DISEASE */
.co2-disease{
  padding:100px 0 120px;
}

.disease-list{
  display:grid;
  gap:30px;
}

.disease-card{
  display:grid;

  grid-template-columns:220px 1fr 1fr;
  align-items:center;
  justify-items: center;
  gap:20px;
  padding:20px 20px 10px 5px;
  border-radius:8px;
  background:#f8f8f8;

box-shadow: 0 3px 6px rgba(0, 0, 0, 0.09);
}

.disease-thumb{
  width:190px;
  height:190px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:800;
}

.disease-thumb img{
  width: 100%;
  border-radius: 50%;}

.disease-action{
  display:grid;
  justify-items:end;
  gap:46px;
}

.consult-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:300px;
  height:58px;
  padding:0 34px;
  border-radius:999px;
  background:#ea4f42;
  color:#fff;
  font-weight:700;
  font-size:28px;
  letter-spacing:-0.05em;
  text-decoration:none;
}
.disease-action a{color:#fff;}
.disease-action a:hover{background-color: #f97b63;}
.disease-text p{font-size: 19px; line-height: 28px;}
.disease-text p>b{font-weight: 700;}
.disease-name{font-size: 18px; font-weight: 700;}
.price{
  min-width:300px;
  height:64px;
  border-radius:999px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-weight: 700;
  letter-spacing: -1px;
}


/* PROCESS */
.co2-process{
  padding:100px 0 120px;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:70px;
  align-items:start;
}

.process-item{
  position:relative;
  text-align:center;
}

.process-item:not(:last-child)::after{
  content:"›";
  position:absolute;
  top:95px;
  right:-42px;
  font-size:80px;
  font-weight:200;
  line-height:1;
}

.process-circle{
  width:240px;
  height:240px;
  margin:0 auto 30px;
  border-radius:50%;
  background:#f4f3f4;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:800;
}
.process-circle img{width: 100%; border-radius: 50%;}
.process-item h3{font-size: 16px; font-weight: 700; display:block;padding:7px 0;}
/* RECOMMEND */
.co2-recommend{
  padding: 100px 0 20px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  margin-bottom: 100px;
}


.recommend-banner{
  overflow:hidden;
  border-radius:40px;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

.recommend-banner img{
  display:block;
  width:100%;
  height:auto;
}

/* ========================================
   03. TABLET
======================================== */
@media(max-width:1024px){
  .co2-hero{
    grid-template-rows:280px 1fr;
    gap:5px;
    text-align: center;
    height: auto;
    overflow: hidden;
    padding: 0;
  }

  .co2-point{
    grid-template-columns:1fr 1fr;
    gap:50px;
  }

  .disease-card{
    grid-template-columns:160px 1fr;
    gap:24px;
  }

  .disease-thumb{
    width:150px;
    height:150px;
  }

  .disease-name,
  .disease-text,
  .disease-action{
    grid-column:2;
  }

  .disease-action{
    justify-items:start;
    gap:18px;
  }

  .process-grid{
    gap:40px;
  }

  .process-circle{
    width:200px;
    height:200px;
  }

  .process-item:not(:last-child)::after{
    right:-24px;
  }
}

/* ========================================
   04. MOBILE
======================================== */
@media(max-width:768px){
  .co2-inner{
    width:min(calc(100% - 32px),1240px);
  }



  .hero-img{
    max-width:420px;
    margin:0 auto;
  }

  .co2-intro{
    padding:64px 0 46px;
  }

  .co2-intro h2{
    margin-bottom:30px;
  }

  .co2-point{
    grid-template-columns:1fr;
    gap:40px;
    padding:40px 0 64px;
  }

  .point-img{
    max-width:520px;
    margin:0 auto;
  }

  .point-list{
    gap:30px;
    padding:0 15px;
  }

  .point-item span{
    font-size:14px;
    padding:5px 18px;
  }

  .co2-guide{
    padding:64px 0;
  }

  .co2-guide h2{
    margin-bottom:42px;
  }

  .guide-grid{
    grid-template-columns:1fr;
    gap:54px;
 
  }

  .guide-item:not(:last-child)::after{
    content:"↓";
    top:auto;
    right:50%;
    bottom:-42px;
    transform:translateX(50%);
    font-size:28px;
  }

  .guide-icon{
    width:180px;
    height:180px;
    margin-bottom:24px;
    font-size:28px;
  }

  .co2-special{
    padding:70px 0 80px;
  }

  .co2-special h2{
    margin-bottom:50px;
  }

  .special-list{
    gap:64px;
  }

  .special-item,
  .special-item.reverse{
    grid-template-columns:1fr;
    gap:28px;
  }

  .special-item.reverse .special-img,
  .special-item.reverse .special-text{
    order:initial;
  }

  .special-item.reverse .special-text{
    text-align:left;
  }
  .special-text{padding: 0 15px;}
  .special-text h3{
    margin-bottom:18px;
  }

  .special-text p{
    max-width:100%;
  }

  .co2-disease,
  .co2-process,
  .co2-recommend{
    padding:70px 15px 80px;
  }

  .section-title{
    margin-bottom:42px;
  }

  .disease-card{
    grid-template-columns:1fr;
    padding:30px 22px;
    text-align:center;
  }

  .disease-thumb{
    margin:0 auto;
  }

  .disease-name,
  .disease-text,
  .disease-action{
    grid-column:auto;
  }

  .disease-action{
    justify-items:center;
    width:100%;
  }

  .consult-btn,
  .price{
    width:100%;
    min-width:0;
  }

  .consult-btn{
    height:52px;
    font-size:22px;
  }

  .price strong{
    font-size:32px;
  }

  .price del{
    font-size:20px;
  }

  .process-grid{
    grid-template-columns:1fr;
    gap:60px;
  }

  .process-circle{
    width:180px;
    height:180px;
    margin-bottom:20px;
  }

  .process-item h3{
    font-size:24px;
  }

  .process-item span{
    font-size:17px;
  }

  .process-item:not(:last-child)::after{
    content:"↓";
    top:auto;
    right:50%;
    bottom:-42px;
    transform:translateX(50%);
    font-size:36px;
  }

  .recommend-banner{
    border-radius:20px;
  }
}

.co2-video{
    width:100%;
    max-width:1240px;
    display:block;
    margin:0 auto;
    border-radius:20px; /* 필요 없으면 삭제 */
    object-fit:cover;
}
.wrap_box{
  background: url("../images/sub/diet/co2/main_img.png") no-repeat top center;
  background-size: 100% auto;}
.mobile-bg{
    display: none;
}

/* 모바일 */
@media (max-width:768px){

    .wrap_box{
        background: none;
    }

    .mobile-bg{
        display: block;
        width: 100%;
        height: auto;
    }
}