@import url('sub.css'); 


.mw {max-width:1590px; margin:0 auto;}
.c-black { color: var(--black); }

/* =========================   Hero (@subtop)   ========================= */
.tempHero { position:relative; overflow:hidden; text-align:center; padding:60px 5%; height:calc(var(--vh) - 170px);  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:url('/lab/img/lab_bg.jpg') no-repeat center/cover; box-sizing:border-box; position: relative; overflow: hidden; z-index:10;}
.tempHero .bg {background:url('/lab/img/lab_bg.jpg') no-repeat center/cover;  position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1);  animation: m_vsImg 2.7s forwards;}
.tempHero__inner { position: relative; text-align: center;  box-sizing:border-box;}
.tempHero__kicker {margin: 0; font-weight: 600; color: var(--black); }
.tempHero__title {margin: 30px 0; color: var(--black); }
.tempHero__desc {color:rgba(17,17,17,0.6);}

/* =========================   Section title   ========================= */
.secTit  {}
.secTit .en {font-family:var(--eng); margin: 0; font-size: 1rem; line-height: 177%; letter-spacing: .18px; color: var(--main); font-weight: 500; }
.secTit__title { margin: 15px 0 0;  font-weight: 200; line-height: 125%; letter-spacing: -1.2px;}
.secTit__sub { margin: 15px 0 0;  color: var(--basic); }

/* =========================   Thermometer (체온 단계)   ========================= */
.thermo {margin:100px 0 0;}
.thermo__track {width: 100%; height: 5px; border-radius: 999px; background: rgba(238,242,240,0.9); position: relative; overflow: hidden; position:relative; top:22px;}
.thermo__fill { position: absolute; inset: 0; width: 100%; transform-origin: left center; transform: scaleX(var(--p)); background: linear-gradient(90deg, #DA4008 0%, #D1582C 22%, #C96B48 44%, #C98F48 66%, #2B7D53 100%); border-radius: inherit; transition: transform 1s ease; }
.thermo__list {width: 100%; display:flex; flex-wrap:nowrap; align-items: start; justify-content: space-between;  max-width:1590px; margin:0 auto; gap:0 30px;}
.thermo__item {flex:1; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; opacity: .35; transform: translateY(30px); transition: opacity .35s ease, transform .45s ease; }
.thermo__dot { width: 39px; aspect-ratio: 1; border-radius: 50%; background: rgba(17,17,17,.08); position: relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.thermo__dot:after { content: ''; position: absolute; width:9px; aspect-ratio: 1; border-radius: inherit; background: rgba(17,17,17,.12); }
.thermo__temp { margin: 0; color: var(--c, var(--black)); font-weight: 700; font-size: clamp(1.33rem, 1.65vw + 1.1rem, 2.8125rem); line-height: 1.1; }
.thermo__label { margin: 20px 0 0; color: var(--black); }
.thermo__note { margin-top:50px; text-align: center; color: var(--black); }

/* “순서대로 온도 표현” 상태 */
.thermo.is-in .thermo__fill { transition: none; }
.thermo__item.is-on { opacity: 1; transform: translateY(0); }
.thermo__item.is-on .thermo__dot { background: var(--d); }
.thermo__item.is-on .thermo__dot:after { background: var(--c); box-shadow: 0 0 0 10px rgba(0,0,0,0); }

 
.make_wrap {background:rgba(238,242,240,.9) url('/program/img/manage_bg.png') no-repeat center/cover; position:relative; background-blend-mode:luminosity; }
.make_wrap .mw {width:90%;}
.make_wrap  .make_cont {display: grid; grid-template-columns: 1fr 2fr;  gap: 30px; align-items: stretch;  margin:50px 0;}
.make_wrap  .make_cont .cont_box {background:var(--white); display:flex; flex-wrap:wrap; flex-direction:column;}
.make_wrap  .make_cont .cont_box .fs20 {padding:7px; box-sizing:border-box; background:var(--main); color:var(--white); text-align:center; font-family:var(--eng);}
.make_wrap  .make_cont .cont_box .cont_box_in {}
.why_box .cont_box_in {padding:40px 30px; box-sizing:border-box; text-align:center; flex:1; display:flex; flex-wrap:wrap; align-content:center; justify-content:center;}
.how_box .cont_box_in {display:flex; flex-wrap:wrap;}
.how_box .cont_box_in dl {flex:1; padding:40px 30px; box-sizing:border-box; display:flex; align-items:center; gap:0 30px; }
.how_box .cont_box_in dl+dl {border-left:1px solid var(--border);}
.how_box .cont_box_in dl dt {flex-shrink: 0;}
.how_box .cont_box_in dl dd {flex:1;}
.cont_box_in .fs22 {margin:0 0 5px;}
.make_wrap  .btm_box {text-align:center;}
.make_wrap  .btm_box .fs22 {margin:0 0 10px;}


/* =========================   Split sections (이미지/텍스트)   ========================= */
.tempSplit {}
.tempSplit .en{font-family:var(--eng); font-size:1rem; line-height:177.778%; letter-spacing:.18px; color:var(--main); font-weight:500;} 
.split { display: flex; align-items: center; justify-content: space-between; gap:0 100px;}
.split--rev { flex-direction: row-reverse; }
.split__txt { flex: 1;}
.split__media { flex: 1; max-width:780px;}
.split__title {font-weight: 200; line-height: 125%; letter-spacing: -1.2px; margin:15px 0 35px;}
.split__body {}
.split__body p {margin:20px 0 0; }
.split__body .fs22 {font-weight: 400; line-height:  154.545%;}

.mediaBox { border-radius: var(--radius); overflow: hidden; position: relative; width: 100%; background: var(--grayBg); aspect-ratio: 780 / 600; }
.mediaBox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.mediaBox--dark { background: var(--main); }
.mediaBox--soft { background: rgba(238,242,240,.9); }

/* =========================   Answer section   ========================= */
.tempAnswer { position: relative; overflow: hidden; background:url("/lab/img/lab_bg02.jpg")no-repeat center / cover; text-align:center;}
.tempAnswer .mw { position: relative; width:90%;}
.tempAnswer__desc { margin:35px 0 0; }
.tempAnswer__badge { margin: 50px auto; width: fit-content; padding: 0 15px; background: var(--main); color: var(--white); text-align: center; letter-spacing: -0.01em; }
.tempAnswer__logo {}
.tempAnswer__logo img {width:200px;}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px) {
  .split { flex-direction: column; align-items: stretch; }
  .split__txt { flex: initial; width: 100%; }
  .split__media { width: 100%; flex:none; max-width:100%;}
  .thermo__list { grid-auto-columns: minmax(150px, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .thermo__fill { transition: none !important; }
  .thermo__item { transition: none !important; transform: none !important; }
}



/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

.split {gap:0 60px;}
.split br {display:none;}


.how_box .cont_box_in dl {flex-direction:column; text-align:Center;}
.how_box .cont_box_in dl dt {margin:0 0 10px;}


}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


.tempHero {height:calc(var(--vh) - 105px); }

.thermo {margin:70px 0 0;}
.thermo__item {gap:25px;}


.split__media {margin:0 0 50px;}
.split__media img {width:100%;}
.split__title {margin:15px 0 20px;}
.split__body p {margin:15px 0 0;}


.make_wrap .make_cont {gap:0 15px;}
.make_wrap .make_cont br {display:none;}
.why_box .cont_box_in {padding:20px;}
.how_box .cont_box_in dl {padding:20px;}
.how_box .cont_box_in dl dt img {width:70px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


.mw {width:90%;}

.tempHero {height:calc(var(--vh) - 70px); }
.tempHero__inner {}
.tempHero__inner br {display:none;}
.tempHero__title {margin: 15px 0;}

.secTit br {display:none;}
.secTit__title {margin:10px 0 0;}
.secTit__sub {margin:10px 0 0;}

.thermo {margin:50px 0 0; }
.thermo__dot {width:30px;}
.thermo__dot:after {width:8px;}

.thermo_scroll {overflow-x:auto; margin:0 5%; box-sizing:border-box; height:220px;}
.thermo__track {width:760px; height:3px; top:17px;}
.thermo__list {width:760px; gap:0 15px;}
.thermo__label {margin:10px 0 0;}
.thermo__note {margin-top:30px;}
.thermo__note br {display:none;}

.thermo_scroll::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: var(--grayBg);
}

.thermo_scroll::-webkit-scrollbar
{
	height: 3px;
	background-color: var(--grayBg);
}

.thermo_scroll::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--main);
}




.split__media {margin:0 0 30px;}
.split__media img {width:100%;}
.split__title {margin:10px 0 15px;}
.split__body p {margin:10px 0 0;}


.tempAnswer br {display:none;}
.tempAnswer__desc {margin:20px 0 0;}
.tempAnswer__badge {margin:25px auto 35px;}
.tempAnswer__logo img {width:110px;}


.make_wrap .make_cont {margin:30px 0;  grid-template-columns: 1fr; gap:15px;}
.how_box .cont_box_in dl {padding:20px 15px;}
.make_wrap .btm_box br {display:none;}

}