@import url('sub.css'); 


.mw {max-width:1590px; margin:0 auto; }


/**** S:: 관리프로그램 ****/

/* 상단 비주얼 */
.program_top {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;  box-sizing:border-box; z-index:10}
.program_top .bg {background:url('/program/img/program_top.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;}
.program_top .fs20,
.program_top .fs70,
.program_top .fs18{position:relative; color:var(--white);}
.program_top .fs70{letter-spacing:-2.8px; margin:30px 0; font-weight:300;}
.program_top .fs18{color:rgba(255,255,255,.6);}




/* 다이어트 프로그램 */
.program_area {padding:134px 0 0;}
.program_tit {text-align:center;}
.program_tit .en {font-family:var(--eng); font-size:1rem; line-height:177.778%; letter-spacing:.18px; color:var(--main); font-weight:500;}
.program_tit .fs60 {padding:15px 0 0; font-weight:200; letter-spacing:-1.2px;}
.program_list {padding:60px 0 100px; display:flex; flex-wrap:wrap; gap:30px; justify-content:center;}

/* 1. li: 3D 원근감(perspective) 부여, 불필요한 overflow/transition 제거 */
.program_list li {position:relative; flex:1; perspective:1000px; z-index:10;}

/* 2. prog_in: 카드의 몸통. 이 요소가 통째로 180도 회전합니다. */
.program_list li .prog_in {position:relative; width:100%; height:100%; transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-style:preserve-3d;}

/* 3. in(앞면): absolute로 띄우고 뒷면 숨김 처리, li에 있던 배경/패딩을 이곳으로 이동 */
.program_list li .in {/* position:absolute; top:0; left:0;  */width:100%; height:100%; /* background:var(--white); */ padding:50px 30px; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; box-sizing:border-box; -webkit-backface-visibility:hidden; backface-visibility:hidden; z-index:1;}

/* 앞면 배경 이미지: 앞면이 돌 때 같이 돌도록 .in::before 로 설정 */
.program_list li .in::before {content:''; width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;}
.program_list li#prog1 .in::before {background:url('/program/img/program_card_bg01.jpg') no-repeat center/cover;}
.program_list li#prog2 .in::before {background:url('/program/img/program_card_bg01.jpg') no-repeat center/cover;}
.program_list li#prog3 .in::before {background:url('/program/img/program_card_bg01.jpg') no-repeat center/cover;}
.program_list li#prog4 .in::before {background:url('/program/img/program_card_bg01.jpg') no-repeat center/cover;}

/* ★마우스 오버 시 카드 몸통(.prog_in) 180도 뒤집기 */
.program_list li:hover .prog_in {transform:rotateY(180deg);}

/* 기존 내부 디자인 요소 유지 */
.program_list li .fs40 {color:var(--main); font-size:2.222rem; font-weight:600; line-height:130%; margin:7px 0 0;}
.program_list li .name {color:var(--main); margin:10px 0;}
.program_list li .desc {font-size:0.888rem; font-weight:400; line-height:162.5%; width:100%;}
.program_list li .desc:last-of-type {display:flex; text-align:left; padding-top:15px; margin-top:15px; border-top:1px solid var(--border);}
.program_list li .desc:last-of-type .fs16 {padding:0 10px; flex-shrink:0; color:var(--black); font-weight:600;}
.program_list li .desc:last-of-type .fs14 {flex:1;}
.program_list li .desc:last-of-type .fs14 span {display:block; line-height:inherit; font-size:inherit; letter-spacing:inherit;}
.program_list li .desc:last-of-type .fs14 span+span {margin:2px 0 0;}

/* 4. hv(뒷면): absolute, 뒷면 숨김, 시작부터 180도 뒤집어두기 (opacity 관련 속성 전부 제거) */
.program_list li .hv {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(27,58,42,0.9); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 30px; box-sizing:border-box; transform:rotateY(180deg); -webkit-backface-visibility:hidden; backface-visibility:hidden;}

/* 기존 hv 내부 디자인 요소 유지 */
.program_list li .hv .icon {filter:invert(1) contrast(2);}
.program_list li .hv .fs16 {font-weight:400; color:var(--white); text-align:center;}
.program_list li .hv .fs16+.fs16 {margin:5px 0 0;}
.program_list li .hv .fs18 {margin:10px 0 0; font-weight:600; color:var(--white);}
.program_list li .hv .kg {padding:0 0 15px; margin:22px 0 20px; border-bottom:1px solid rgba(255,255,255,0.15); color:var(--white); width:100%; text-align:center;}
.program_list li .hv .kg strong {font-weight:600; color:var(--white); font-size:1.3888rem;}
.program_list li .hv .kg b {font-size:1.111rem; font-weight:600; color:var(--white);}

/* 배너 2개 */
.banner_list{display:flex; flex-wrap:wrap; justify-content:space-between; }
.banner_list > div{position:relative; overflow:hidden; flex:1; height:500px; text-align:center; color:var(--black); display:flex; align-items:center; justify-content:center; }
.banner_list > div:before{content:''; position:absolute; inset:0; opacity:1;}
.banner_list .luna:before{background:url('/program/img/banner_luna.jpg') no-repeat center/cover;}  /* 피그마 배너로 교체 */
.banner_list .steady {margin-top:100px;}
.banner_list .steady:before{background:url('/program/img/banner_steady.jpg') no-repeat center/cover;} /* 피그마 배너로 교체 */
.banner_list .on:before{background:url('/program/img/banner_on.jpg') no-repeat center/cover;} /* 피그마 배너로 교체 */
.banner_list .txt{position:relative; padding:0 5%; box-sizing:border-box; width:100%;}
.banner_list .txt .fs20{color:var(--black);}
.banner_list .txt .b_tit{padding:4px 0 0; font-size:2.2222rem; line-height:130%; font-weight:600; }
.banner_list .txt .fs18{padding:20px 0 0; color:rgba(17,17,17,.7);}

/* 관리설명 */
.manage_area {margin:200px 0 0; background:rgba(238,242,240,.9); position:relative;}
.manage_area .manage_bg {background:url('/program/img/manage_bg.png') no-repeat center/cover; background-blend-mode:luminosity; width:100%; height:var(--vh); position:sticky; top:0; left:0;}
.manage_area .mw {width:90%; margin-top:calc(var(--vh) * -1);}
.manage_tit{text-align:center;}
.manage_tit .en{font-family:var(--eng); font-size:1rem; line-height:177.778%; letter-spacing:.18px; color:var(--main); font-weight:500;}
.manage_tit .fs60{padding:15px 0 0; font-weight:200; letter-spacing:-1.2px;}
.manage_list{padding:60px 0 0; display:flex; flex-wrap:wrap; gap:30px;}
.manage_list li{width:calc((100% - 60px)/3); background:var(--white); display:flex; align-items:center; gap:40px; padding:40px; box-sizing:border-box;}
.manage_list li .icon{width:107px;}
.manage_list li .fs18{color:var(--main);}
.manage_list li .fs22{padding:0;}
.manage_list li .fs16{padding:10px 0 0; color:var(--basic);}



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

    .program_list li br {display:none;}
  
  
  
}
/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){

.manage_list li {width:calc((100% - 30px)/2); gap:0 25px;}
.manage_list li .icon{width:80px;}


.program_area {padding:100px 0 0;}
.program_list li {flex:none; width:calc((100% - 30px)/2);}


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



.program_top {height:calc(var(--vh) - 105px); }
.program_top .fs70 {margin:20px 0;}


  
.banner_list > div {height:370px;}
.banner_list > div br {display:none;}
.banner_list .txt .b_tit {font-size:1.666rem;}
.banner_list .txt .fs18 {padding:15px 0 0;}

.manage_list {gap:15px;}
.manage_list li {width:calc((100% - 15px)/2); padding:25px 15px; gap:0 15px;}



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


.mw {width:90%;}

.program_top {height:calc(var(--vh) - 70px); }
.program_top .fs70 {margin:12px 0;}




.program_tit br {display:none}
.program_tit .fs60 {padding:10px 0 0;}
.program_area {padding:70px 0 0;}
.program_list {gap:15px; padding:30px 0 60px;}
.program_list li {width:100%;}
/* .program_list li .prog_in {padding:45px 20px;} */
.program_list li .icon {max-width:45px;}
.program_list li .fs40 {font-size:1.444rem;}
.program_list li .name {margin:7px 0 ;}
.program_list li .hv .kg {margin:10px 0; padding:0 0 10px;}


.banner_list {flex-wrap:wrap;}
.banner_list > div {flex:none; width:100%; height:auto; padding:50px 5%; box-sizing:border-box;}
.banner_list .steady {margin-top:0; margin:0 0 0 auto}
.banner_list .txt .fs18 {padding:10px 0 0;}
.banner_list .txt .b_tit {font-size:1.66rem;}

.manage_tit br {display:none}
.manage_area {margin:100px 0 0;}
.manage_tit .fs60 {padding:10px 0 0;}
.manage_list {gap:10px; padding:30px 0 0;}
.manage_list li {width:100%; gap:0 15px; padding:15px; align-items:center;}
.manage_list li .icon{width:50px;}
.manage_list li .fs16 {padding:5px 0 0;}


}