/* sub common */
.sub_section {position: relative;}

.sub_top { position: relative;  width: 100%; height: 18.75rem;  margin-bottom: 4rem; background: no-repeat center /cover;}
.sub_top.subtop2 {background-image: url(../img/sub_top2.png);}
.sub_top.subtop3 {background-image: url(../img/sub_top3.png);}
.sub_top .txtbox { position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);  display: flex;  flex-direction: column;  align-items: center;  gap: 0.75rem; width: 90%;}
.sub_top .txtbox .sub { font-size: 1.75rem;  font-weight: 800;  color: #fff;  border-bottom: 1px solid #fff;  padding-bottom: 0.25rem;}
.sub_top .txtbox .tit { font-size: 2.5rem; font-weight: 800;  color: #fff;}



/* 운동마실 - 뛰는유산소 */
.sub2 .ss1 .m_titbox { margin-bottom: 4rem;}
.sub2 .ss1 .ss1_ul { display: flex; align-items: center; justify-content: center;}
.sub2 .ss1 .ss1_ul > li.item { position: relative; width: 12.875em;  aspect-ratio: 1/1; background: linear-gradient(to bottom, #ddb850, #bb8a00);border-radius: 2.3rem;}
.sub2 .ss1 .ss1_ul > li.item::after { content: ""; position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);  width: calc(100% - 1.563rem);  height: calc(100% - 1.563rem); border: 1px solid #fff;  border-radius: 2.1rem;}
.sub2 .ss1 .ss1_ul > li.item .txtbox { position: absolute; left: 50%;  top: 50%;  transform: translate(-50%,-50%);  width: 100%;  height: 100%;  display: flex;  flex-direction: column; align-items: center; justify-content: center;  gap: 1rem; padding: 1.563rem;}
.sub2 .ss1 .ss1_ul > li.item .icon { display: flex;}
.sub2 .ss1 .ss1_ul > li.item .tit { font-size: 1.75rem; font-weight: 800;    color: #fff;}
.sub2 .ss1 .ss1_ul > li.arrow { flex: 1;  display: flex;  justify-content: center;  align-items: center;}

.sub2 .ss2 { background-color: #f4f4f4; margin-top: 6rem; padding: 3rem 0;}
.sub2 .ss2.slidebox { margin-top: 8.5rem; padding-top: 0;}
.slidebox .m_titbox { width: 53%;  max-width: 970px;  z-index: 10;  margin: auto; padding-top: 2rem;}
.slidebox .common_slider { width: 90%;  max-width: 1650px;  margin: 0 auto -7.5vw;  transform: translateY(-7.5vw);}
.slidebox .common_slider .swiper-slide { user-select:none}

@media (min-width: 1025px) {

    .slidebox .common_slider .swiper-slide { width: 17.2% !important;  margin-right: 3.5% !important; }

}

.slidebox .common_slider .swiper-slide .imgbox { position: relative; width: 100%; height: 0;  padding-bottom: 185%;}
.slidebox .common_slider .swiper-slide .imgbox .img {  position: absolute;  left: 0;  bottom: 0;  width: 100%;  height: 50%;   box-shadow: 0 0 6px rgba(0,0,0,0.25);  transition: all 0.3s ease-in;}

.slidebox .common_slider .swiper-slide.swiper-slide-active .imgbox .img{height: 100%;}
.slidebox .common_slider .swiper-slide.swiper-slide-prev .imgbox .img,
.slidebox .common_slider .swiper-slide.swiper-slide-next .imgbox .img{height: 70%;}

.slidebox .common_slider .swiper-slide .imgbox .img > img { position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  object-fit: cover;}
.slidebox .common_slider .swiper-slide .title { font-size: 1.25vw;  line-height: 2.375rem;  font-weight: 700;  color: #999999;  text-align: center;  transition: all 0.3s ease-in; margin-top: 1rem;}
.slidebox .common_slider .swiper-slide.swiper-slide-active .title {  font-size: 1.35vw;  color: #424242;  font-weight: 800;}


.sub2 .ss3 { margin: 4rem 0 6rem;}
.sub2 .ss3 .program_box { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;}
.sub2 .ss3 .pro_item { width: calc((100% - 2rem)/2); background-color: #fff;  border: 1px solid #c8c8c8;  display: flex; flex-direction: column;}
.sub2 .ss3 .pro_item .pro_cont1 { display: flex; align-items: center;}
.sub2 .ss3 .pro_item .pro_cont1 .imgbox { position: relative;  width: 68%;  height: 0;  padding-bottom: 40%;}
.sub2 .ss3 .pro_item .pro_cont1 .imgbox > img { position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  object-fit: cover;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox { flex: 1; padding: 0 0.5rem;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .name { font-size: 1rem;  font-weight: 700;  letter-spacing: -0.075em;  color: #2a2a2a; transform: skewX(-0.03deg); margin-bottom: 0.5rem;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .info_txt { font-size: 0.75rem;  color: #919191;  transform: skewX(-0.03deg);}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .interest { margin-top: 1rem;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .interest .ratebox { margin-top: 0.25rem;  display: flex; align-items: center; gap: 0.2rem;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .interest .ratebox .star {  font-size: 1.1rem; color: #bebebe;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .interest .ratebox .star.on {  color: #ffb424;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .interest .reservation { margin-top: 0.75rem;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .interest .reservation .info_txt .count {  display: inline-block;  color: #b92727; font-weight: 700;}
.sub2 .ss3 .pro_item .pro_cont2 {  display: flex; justify-content: space-between;  align-items: center; gap: 1rem;  padding: 0.5rem;  background-color: #ddb850;  font-size: 0.75rem; font-weight: 700;}
.sub2 .ss3 .pro_item .pro_cont2 .period { color: #fff; transform: skewX(-0.03deg); }
.sub2 .ss3 .pro_item .pro_cont2 .date { flex: 1;  color: #554311;  transform: skewX(-0.03deg);  text-align: right; font-weight: 800;}
.sub2 .ss3 .pro_item .pro_cont3 { display: flex;}
.sub2 .ss3 .pro_item .pro_cont3 .item {  width: 25%;  display: flex;  flex-direction: column;  gap: 0.2rem;  border-right: 1px solid #ddd;  padding: 1rem 0.5rem;  background-color: #f7f7f7;}
.sub2 .ss3 .pro_item .pro_cont3 .item.on { background-color: #fff;}
.sub2 .ss3 .pro_item .pro_cont3 .item:last-child { border-right: 0;}
.sub2 .ss3 .pro_item .pro_cont3 .item .num { font-size: 0.75rem;  color: #2a2a2a;  transform: skewX(-0.03deg); font-weight: 600;}
.sub2 .ss3 .pro_item .pro_cont3 .item .price { font-size: 0.75rem;  font-weight: 800; color: #2a2a2a;  transform: skewX(-0.03deg);}
.sub2 .ss3 .pro_item .pro_cont3 .item .price .percent { font-size: 0.85em;  color: #c23c3c;  display: inline-block;}



/* 운동마실 - 우아한근육 */
.slidebox2 .m_titbox { margin-bottom: 2.25rem;}
.slidebox2 .common_slider2 { width: 100%;}
.slidebox2 .common_slider2 .swiper-slide .imgbox { position: relative;  width: 100%;  height: 0;  padding-bottom: 42%;}
.slidebox2 .common_slider2 .swiper-slide .imgbox >img {  position: absolute;  left: 0; top: 0;  width: 100%;  height: 100%;  object-fit: cover;}
.slidebox2 .common_slider2 .next_btn{ right: 2.5%;}
.slidebox2 .common_slider2 .prev_btn{ left: 2.5%;}
.slidebox2 .common_slider2 .next_btn, 
.slidebox2 .common_slider2 .prev_btn { font-size: 6rem;  color: #fff;  text-shadow: 0px 0px 12px rgba(0,0,0,0.5);}



/* 운동마실 - 운동(VOD)따라하기 */
.sub2 .ss3.mt {margin-top: 6rem;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .btnbox { display: flex;  align-items: center;  justify-content: center;  gap: 0.5rem;  margin-top: 2.5rem;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .btnbox .btn {  font-size: 0.75rem;  color: #fff;  transform: skewX(-0.03deg);  display: block;  padding: 0.18rem 0.5rem;  border-radius: 50px;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .btnbox .btn.btn1{background-color: #ddb850;}
.sub2 .ss3 .pro_item .pro_cont1 .txtbox .btnbox .btn.btn2{background-color: #2f2f2f;}



/* 문화마실 - 노래 / 춤 놀이터 */
.sub3 .ss1 .m_titbox { margin-bottom: 4rem;}
.sub3 .ss1 .ss1_picbox { display: flex; align-items: center; gap: 1.5rem;}
.sub3 .ss1 .ss1_picbox .pic {position: relative;  height: 0; padding-bottom: 37%; overflow: hidden; flex: 1; border-radius: 1.875rem; }
.sub3 .ss1 .ss1_picbox .pic > img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

.sub3 .ss2 { background-color: #f4f4f4; margin-top: 6rem; padding: 3rem 0;}
.sub3 .ss2.slidebox { margin-top: 8.5rem; padding-top: 0;}

.tab_wrap {position: relative;}
.tab_navbox {  display: flex; align-items: center;  justify-content: center;  gap: 1rem;  margin-bottom: 4.5rem;}
.tab_navbox .tab_nav {  flex: 1;  max-width: 40%;  font-size: 1.75rem;  font-weight: 800;  background-color: #f4f4f4;  color: #424242;  padding: 0.55rem 0 0.4rem;  border-radius: 50px;  transition: all 0.25s ease-in;  text-align: center;  cursor: pointer;}
.tab_navbox .tab_nav.on { background-color: #ddb850; color: #fff;}
.tab_contbox { position: relative;}
.tab_contbox .tab_cont { display: none; animation: 1.2s ease 0s fadeIn;}
.tab_contbox .tab_cont.on {display: block;}


.sub3 .ss3  { margin: 4rem 0 6rem;}
.sub3 .ss3 .lecture_box { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;}
.sub3 .ss3 .lecture_box .item { position: relative; width: calc((100% - 2rem)/2);}
.sub3 .ss3 .lecture_box .item .imgbox{position: relative;  height: 0; padding-bottom: 58%; overflow: hidden;}
.sub3 .ss3 .lecture_box .item .imgbox > img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.sub3 .ss3 .lecture_box .item .txtbox{position: absolute; left: 0; top:0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 0.75rem;}
.sub3 .ss3 .lecture_box .item .txtbox .txt_top { width: 100%;}
.sub3 .ss3 .lecture_box .item .txtbox .txt_top .tit { font-size: 1.75rem;  font-weight: 800;  color: #fff;}
.sub3 .ss3 .lecture_box .item .txtbox .txt_top .sub { font-size: 1rem;  color: #ffffff;  transform: skewX(-0.03deg); padding: 0 0.5rem;}
.sub3 .ss3 .lecture_box .item .txtbox .txt_bottom { width: 100%;  display: flex;  align-items: flex-end;  justify-content: space-between;}
.sub3 .ss3 .lecture_box .item .txtbox .txt_bottom .date {  font-size: 1.25rem;  font-weight: 700;  color: #fff;  transform: skewX(-0.03deg); margin-bottom: 0.5rem;}
.sub3 .ss3 .lecture_box .item .txtbox .txt_bottom .state {  width: 3.935rem;  height: 3.935rem;  border-radius: 50px;  display: flex;  align-items: center;  justify-content: center;  background-color: #ddb850;}
.sub3 .ss3 .lecture_box .item .txtbox .txt_bottom .state.on{background-color: #dd5a50;}
.sub3 .ss3 .lecture_box .item .txtbox .txt_bottom .state .txt { font-size: 1.25rem; color: #fff; font-weight: 800;}



/* 문화마실 - 인생이모작 */
.sub3 .ss2 .job_topbox { display: flex;  flex-wrap: wrap;  gap: 1.5em 5%;  margin-top: 2.5rem;}
.sub3 .ss2 .job_topbox .item { position: relative; width: 21.25%;}
.sub3 .ss2 .job_topbox .item .imgbox { display: flex;}
.sub3 .ss2 .job_topbox .item .imgbox > img { width: 100%; height: 100%;  object-fit: cover;}
.sub3 .ss2 .job_topbox .item .txtbox { position: absolute; left: 50%;  top: 50%;  transform: translate(-50%,-50%); width: 90%; display: flex;  flex-direction: column; align-items: center; gap: 0.5rem;}
.sub3 .ss2 .job_topbox .item .txtbox .sub { font-size: 1.5rem;  font-weight: 700;  color: #fff; border-bottom: 1px solid #fff;  padding-bottom: 0.15rem;}
.sub3 .ss2 .job_topbox .item .txtbox .tit { font-size: 2rem; font-weight: 800;  color: #fff;}

.form_schbox {  position: relative;  width: 100%;  margin-bottom: 3rem;  padding-top: 1rem;}
.form_schbox .form_box { position: relative; display: flex;  align-items: center; justify-content: center; gap: 0.75rem;}
.form_schbox .form_box .sel_box.course { width: 26.532%;}
.form_schbox .form_box .sel_box.sfl { width: 18.368%;}
.form_schbox .form_box .sel_box .select { font-family: inherit;  width: 100%;    height: 2.188rem; font-size: 1.25rem; letter-spacing: -0.02em; color: #666666;  border: 1px solid #d2d2d2;  padding: 0.25rem 0.5rem 0.25rem;  appearance: none;  white-space: nowrap;  text-align-last: center;  text-align: center; text-overflow: ellipsis;  overflow: hidden !important; background-color: #fff;}
.form_schbox .form_box .sel_box .select option { text-align-last: left;  text-align: left;}
.form_schbox .form_box .input_box {width: 30.613%;}
.form_schbox .form_box .input_box .input_sch { font-family: inherit; width: 100%;  height: 2.188rem; font-size: 1.25rem; letter-spacing: -0.02em;  color: #666666; border: 1px solid #d2d2d2; padding: 0.25rem 1rem;border-radius: 0;}
.form_schbox .form_box .btn_sch { width: 2.188rem; height: 2.188rem;  font-size: 1.25rem; color: #c4c4c4; border: 1px solid #d2d2d2;  display: flex; align-items: center; justify-content: center; }

.table_wrap .table { width: 100%; border-collapse: collapse; font-size: 1.125em;  color: #2a2a2a; word-break: keep-all; border: 1px solid #d7d7d7;}
.table_wrap .table thead tr td { padding: 0.85rem 0.5rem 0.65rem;  border-bottom: 1px solid #d7d7d7; border-left: 1px solid #d7d7d7;  background-color: #ddb850; font-weight: 700; color: #fff; text-align: center;}
.table_wrap .table thead tr td:last-child { border-right: 0;}
.table_wrap .table tbody tr:hover { background-color: rgb(221 184 80 / 10%);}
.table_wrap .table tbody tr td { padding: 1.25rem 0.5rem;  border-bottom: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; text-align: center;}
.table_wrap .table tbody tr td:last-child { border-right: 0;}
.table_wrap .table tbody tr td.text-left { text-align: left; padding: 1.25rem;}
.table_wrap .table tbody tr td .target { display: inline-block;  background-color: #f1f1f1; padding: 0.35rem 0.65rem 0.2rem; border-radius: 50px; min-width: 6.25rem;}
.table_wrap .table tbody tr td .brown { color: #9e7d20;}
.table_wrap .table tbody tr td .view_btn { display: inline-block;  background-color: #ddb850; padding: 0.35rem 0.65rem 0.2rem; border-radius: 50px; min-width: 6.25rem; color: #fff;}