@import url('sub.css');

/* 탭 */
.tablist {position:static}
.tablist a {max-width:317px;}

/* 공통 */
.fs60 {color:var(--black);}
.fs60.marb50 {margin-bottom:50px}
.grid3 {display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:40px}
.grid3 li {border-radius:var(--borderR20); color:var(--black)}
.grid3 li .fs16 {opacity:0.7}

.oneday_cont .section1 .titwrap {margin-bottom:45px}
.oneday_cont .section1 .titwrap .fs60 {color:var(--black); margin-bottom:25px}
.oneday_cont .section1 .titwrap .fs16 {color:#222;}
.oneday_cont .section1 .imgbox {border-radius:var(--borderR20); overflow:hidden}
.oneday_cont .section1 .imgbox img {width:100%; height:auto}

.oneday_cont .section2 {padding:80px 0; border-radius:var(--borderR20); overflow:hidden}
.oneday_cont .section2 .section2_flexbox {display:flex; align-items:center; position:relative;}
.oneday_cont .section2 .tbox {width: 50%; color:var(--black); position:relative; z-index:3;}
.oneday_cont .section2 .tbox .fs60{font-size:3.125rem; margin-bottom: 40px;}
.oneday_cont .section2 .tbox .fs26 {margin-bottom:10px; font-weight:700}
.oneday_cont .section2 .imgbox {max-width:662px; position:relative; margin-right:-76px; flex-shrink:0}
.oneday_cont .section2 .imgbox img:first-child {width:100%; height:auto; position:relative; z-index:2}
.oneday_cont .section2 .imgbox > div {aspect-ratio:637/164; position:absolute; width:96.223%; right:18%; bottom:0; z-index:1}
.oneday_cont .section2 .imgbox img:last-child {mix-blend-mode:multiply}


.oneday_cont .section3 .section3_grid li {padding:40px 30px; border:1px solid var(--main);}
.oneday_cont .section3 .section3_grid li i {display:flex; justify-content:center; margin-bottom:20px}
.oneday_cont .section3 .section3_grid li .fs26 {margin-bottom:5px}
.oneday_cont .section3 .section3_grid li h5, .oneday_cont .section3 .section3_grid li p   {word-break:break-all}

/* 하루핏 - 페이스 */
.oneday_face_cont .choice_section .choice_grid li {padding:50px; border:1px solid var(--border); display:flex; flex-direction:column; justify-content:space-between}
.oneday_face_cont .choice_section .choice_grid .tbox {margin-bottom:15px;}
.oneday_face_cont .choice_section .choice_grid .tbox .fs26 {margin-bottom:10px}
.oneday_face_cont .choice_section .choice_grid .imgbox {flex-shrink:0; position:relative; text-align:center;}
.oneday_face_cont .choice_section .choice_grid .imgbox img {width:100%; max-width:235px; margin: 0 auto;}

/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
.tablist a {width:calc(90% / 2)}
.fs60 br {display:none}
.oneday_cont .section2 .imgbox {margin-right:0; width:50%}
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 공통 */
.fs60.marb50 {margin-bottom:40px}
.grid3 {grid-gap:20px}

.oneday_cont .section2 .tbox {}
.oneday_cont .section2 .tbox .fs26 {margin-bottom:5px}
.oneday_cont .section2 br {display:none}

/* 하루핏 - 페이스 */
.oneday_face_cont .choice_section .choice_grid li {padding:40px}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 공통 */
.fs60.marb50 {margin-bottom:30px}
.grid3 {grid-gap:10px}

.oneday_cont .section1 .titwrap .fs60 {margin-bottom:15px}
.oneday_cont .section1 .titwrap {margin-bottom:30px}

.oneday_cont .section2 {padding:50px 0; border-radius:0}
.oneday_cont .section2 .tbox .fs60{font-size:2.5rem; margin-bottom: 20px;}

.oneday_cont .section3 .section3_grid li {padding:25px 20px}
.oneday_cont .section3 .section3_grid li i {margin-bottom:10px}
.oneday_cont .section3 .section3_grid li i img {height:55px; width:auto}

/* 하루핏 - 페이스 */
.oneday_face_cont .choice_section .choice_grid li {padding:30px}
.oneday_face_cont .choice_section .choice_grid .tbox .fs26 {margin-bottom:5px}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:768px){
.oneday_cont .section2 .section2_flexbox {flex-direction:column-reverse; gap:40px}
.oneday_cont .section2 .section2_flexbox .fs60.marb50 {margin-bottom:10px}
.oneday_cont .section2 .tbox {width:100%;}
.oneday_cont .section2 .tbox .fs60{font-size:2rem; margin-bottom: 10px;}
.oneday_cont .section2 .imgbox {width:100%;}
}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 공통 */
.fs60.marb50 {margin-bottom:25px}
.oneday_cont .section1 .titwrap .fs16 br {display:none}

.oneday_cont .section3 .section3_grid li {padding:20px 15px}
.oneday_cont .section1 .titwrap .fs60 {margin-bottom:10px}
.oneday_cont .section1 .titwrap {margin-bottom:20px}

/* 하루핏 - 페이스 */ 
.oneday_face_cont .choice_section .choice_grid {grid-template-columns:repeat(1,1fr)}
.oneday_face_cont .choice_section .choice_grid li {padding:20px}


.oneday_cont .section3 .section3_grid {grid-template-columns:repeat(1,1fr)}

}
/*******************************************************************************
    @media ~480px             
*******************************************************************************/
@media all and (max-width:480px){
.oneday_face_cont .choice_section .choice_grid br {display:none}



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




}