.btnArea,
.content-head {
  padding: 20px;
}


section {
  z-index: 1;
  padding-bottom:40px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 50px);
}

.wrap{
  position: relative;
}
.content-head .title {
  line-height: unset;
  font-weight: 600;
  width: fit-content;
}
.content-head .btn {
  position: absolute;
  right: 0;
  bottom: 0;
}





/*************** custom ***************/

/* main */
.slideMain .swiper-slide {
  height: 280px;
  padding: 25px;
  border-radius: 20px;
  background-color: var(--colorWhite);
}
.slideMain .swiper-slide > .wrap > div {
  margin-bottom: 5px;
}

.slideMain .swiper-slide > .wrap > div:last-child{
  margin-bottom: unset;

}
.slideMain .swiper-slide .programBox{
  position: relative;
  width: 100%;
  height: 40px;
  max-height: 48px; /* line-height * 2 정도 */
  overflow: hidden;
  display: flex;
  /* align-items: center;
  gap: 8px; */
}
.slideMain .swiper-slide .programBox .icon{
  width: 18px;
  height: 18px;
}
.slideMain .swiper-slide .programBox .name{
  position: absolute;
  right: 0;
  top: 0;
  line-height: 18px;
  max-width: calc(100% - 24px);
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: .5;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;  
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;  
}
.slideMain .swiper-slide .textBox .contentText span {
  font-weight: 600;
}
.slideMain .swiper-slide .infoBox{
  position: absolute;
  bottom: 0;
  left: 0;
}
.slideMain .swiper-slide .infoBox .infoPeople > * {
  display: inline-block;
  vertical-align: middle;

}
.slideMain .swiper-slide .infoBox .infoPeople .profile{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #333;

  background-size: cover;
  background-position: center;
  margin-right: 7px;
}







.btnArea.mainLine .btnBox {
  white-space: nowrap;
}
.btnArea.mainLine .btnBox .btn * {
  display: inline-block;
  vertical-align: middle;
}
.btnArea.mainLine .btnBox .btn{
  padding: 7px 10px;
  border-radius: 20px;
  background-color: var(--colorWhite);
  min-width: 50px;
  margin-left: -15px;
}
.btnArea.mainLine .btnBox .btn .icon-wrap {
  width: 35px;
  height: 35px;
  border-radius: 50%;

  background-color: var(--colorMain);
}
.btnArea.mainLine .btnBox .btn .icon-wrap .icon {
  width: 18px;
  height: 18px;
}
.btnArea.mainLine .btnBox .btn .label{
  margin-left:7px;
  line-height: 34px;
  height: 35px;
}

.btnArea.mainLine .btnBox .btn:nth-child(1){ width: calc(50% + 15px); margin-left: unset; }
.btnArea.mainLine .btnBox .btn:nth-child(2){ width: calc(50% - 50px + 15px); }
.btnArea.mainLine .btnBox .btn:nth-child(3){
  background-color: #f5f5f5;
}
.btnArea.mainLine .btnBox .btn:nth-child(3) .icon-wrap{
  background-color: #333;
  border-radius: 15px;
}







.slideLog .swiper-slide {
  padding: 25px;
  border-radius: 20px;
  background-color: var(--colorWhite);
}
.slideLog .swiper-slide .textBox .state {
  font-weight: 600;
}
.slideLog .swiper-slide .textBox .programName {
  opacity: .6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slideLog .swiper-slide .icon{
  position: absolute;
  right: 0;
  top: 3px;
  width: 16px;
  height: 16px;

}

.slideLog .swiper-slide .infoBox{
  position: relative;
  margin-top: 40px;
}
.slideLog .swiper-slide .infoBox .time {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: .6;
}




.slideLog.type-program .swiper-wrapper{
  padding: 20px 0;
}
.slideLog.type-program .swiper-slide{
  padding: 20px 20px 0;
  border-radius: 16px;
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}
.slideLog.type-program .swiper-slide .programBox .name span::after{
  content: '';
  position: relative;
  width: 3px;
  height: 3px;
  background-color: var(--colorWhite);
  margin: 0 6px;
  vertical-align: middle;
  display: inline-block;
  border-radius: 50%;
}
.slideLog.type-program .swiper-slide .programBox .name span:last-child:after{
  content: none;
}
.slideLog.type-program .swiper-slide .textBox {
  height: 260px;
  position: relative;
}
.slideLog.type-program .swiper-slide .textBox .contentText{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.slideLog.type-program .swiper-slide .infoBox{
  position: relative;
  width: calc(100% + 40px);
  height: 50px;
  margin-left: -20px;
  padding: 18px 20px 15px;
  background-color: #fff;
  margin-top: 25px;
  text-align: right;
  border-radius: 0 0 15px 15px;
}
.slideLog.type-program .swiper-slide .infoBox .icon{
  right: unset;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.slideLog.type-program .swiper-slide .infoBox .btnBox{
  text-align: center;
}


.slideLog.type-program .swiper-slide.cont-bill .textBox .frame{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.slideLog.type-program .swiper-slide.cont-bill .textBox .frame > .contentText:first-child{
  bottom: unset;
  top: 30px;
  border-bottom: 1px solid var(--colorGray800);
  width: calc(100% + 40px);
  margin-left: -20px;
  padding-bottom: 15px;
  padding: 0 20px 20px;
  margin-bottom: 8px;
  text-align: right;
}

.slideLog.type-program .swiper-slide.cont-bill .textBox .contentText{
  position: unset;
  padding-top: 12px;
}

.slideLog.type-program .swiper-slide.cont-bill .textBox .divide .contentText:last-child{
  text-align: right;
}

.programInfo {
  padding:  20px;
  border-radius: 0 0 30px 30px;
}
.programInfo .listArea{
  padding: 20px 0 0;
  border-top: 1px solid var(--colorGray800);
}
.programInfo > .btnBox {
  padding-top: 20px;
  z-index: 2;
  position: relative;

}




.programInfo .bnerBox {
  padding: 20px 15px 12px;
  margin-top: -10px;
  background-color: var(--colorBlack);
  color: var(--colorGray200);
  width: 100%;
  z-index: 1;
  position: relative;
  border-radius: 0 0 20px 20px;
}
.programInfo .bnerBox .title{
  position: relative;
  padding-left: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.programInfo .bnerBox .title .icon{
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* qr */
/* qr > scan */
body[data-location="qr-scan"] > .wrap {padding-top: unset;}
body[data-location="qr-scan"] section{ padding-bottom: unset; overflow: hidden;height: 100%;}
.cameraArea,
.cameraArea .scanBox .scan {
  background-size: calc((var(--vh, 1vh) * 100) - 0px) auto; 
  background-position: center;
}
.cameraArea{
  position: relative;
  height: 100%;
  padding-top: 65px;
}

.cameraArea::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: .6;
}
.cameraArea > .wrap {
  width: 100%;
  height: 100%;
}
.cameraArea .scanBox {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
}
.cameraArea .scanBox .scan{
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.6);
  background-position-y: 30%;
}
.cameraArea .scanBox .guide {
  text-align: center;
  padding-top: 15px;
  color: var(--colorWhite);
}

body[data-location="qr-scan"][data-state="scanSuccess"] nav{bottom: -100px;}
body[data-location="qr-scan"][data-state="scanSuccess"] .cameraArea::before{opacity: .4;}
body[data-location="qr-scan"][data-state="scanSuccess"] .cameraArea .scanBox .scan{border-color: #F1C376;}
body[data-location="qr-scan"][data-state="scanSuccess"] .cameraArea .scanBox .guide{display: none}
body[data-location="qr-scan"][data-state="scanSuccess"] .cameraArea + .resultArea {
  display: block;
}
.cameraArea + .resultArea{
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px 20px;
}
.resultArea .resultBox{
  background-color: var(--colorWhite);
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 20px;
}
.resultArea .resultBox > .wrap{
  padding-left: 72px;
}
.resultArea .resultBox .thm{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  background-color: #eee;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
}
.resultArea .resultBox .textBox {
  padding: 6px 0;
}
.resultArea .resultBox .textBox .programName{
  font-weight: 800;
}
.resultArea .resultBox .textBox .programRange{
  opacity: .5;
}



/* qr > scan > log */
.listArea{
  padding: 20px 20px 30px;
}
.listArea .qrList > li {  margin-bottom: 10px;}
.listArea .qrList .qrItems .qrItem {  margin-bottom: 6px;}
.listArea .qrList > li:last-child,
.listArea .qrList .qrItems .qrItem:last-child {  margin-bottom: unset;}

.listArea .qrList .qrTitle{  margin-top: 20px;}
.listArea .qrList .qrTitle:first-child{  margin-top: unset;}
.listArea .qrList .qrTitle .title{  font-weight: 600;}

.listArea .qrList .qrItems .qrItem {  
  padding: 16px;
  border-radius: 12px;
  background-color: var(--colorWhite);
}
.listArea .qrList .qrItems .qrItem > .wrap{ 
  padding-left: 38px; 
  padding-right: 75px;
}
.listArea .qrList .qrItems .qrItem .numBox{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 15px;
  width: 30px;
  text-align: center;  
  background-color: #999;
  background-size: cover;
  background-position: center;
}
.listArea .qrList.type-order .qrItems .qrItem .numBox{
  width: 40px;
  border-radius: 12px;
}
.listArea .qrList.type-order .qrItems .qrItem > .wrap{ 
  padding-left: 48px; 
}
.listArea .qrList .qrItems .qrItem .numBox .num{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--colorWhite);

}

.listArea .qrList .qrItems .qrItem .textBox {
  border-right: 1px solid #eee;
  padding-right: 10px;
}
.listArea .qrList .qrItems .qrItem .textBox > *{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listArea .qrList .qrItems .qrItem .stateBox {
  position: absolute;
  right: -15px;
  width: 90px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
.listArea .qrList .qrItems .qrItem h5 {font-weight: 600;}
.listArea .qrList .qrItems .qrItem h6 {  color: #999;}



/* qr > make */
body[data-location="qr-make"] > .wrap {padding-top: unset;}
body[data-location="qr-make"] section{ padding-top: 65px; }
body[data-location="qr-make"] .slideLog .swiper-slide{padding: 16px;border-radius: 16px;}
body[data-location="qr-make"] .slideLog .swiper-slide .infoBox{ margin-top: 16px;}
.qrBox {
  height: 65%;
  padding: 0 20px 20px;
  text-align: center;
}
.qrBox > .wrap{
  background-color: var(--colorWhite);
  border-radius: 30px;
  padding: 30px 20px 20px;
  height: 100%;
}
.qrBox .qr {

  width: 100%;
  height: calc(100% - 36px - 20px);
  margin: 20px auto 0;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}





/* program */
/* program > list */
.listControl {
  position: relative;
  white-space: nowrap;
  height: 30px;
  width: 100%;
  padding: 0 20px;
}
.listControl .result{
  line-height: 30px;
}
.listControl select {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  width: fit-content;
  height: 30px;
  outline: unset;
}
.listArea .listControl{
  height: fit-content;
  padding: 0 ;
  margin-bottom: 12px;
}
.listArea .listControl select {
  right: 0;
}
.listArea .blockList .blockItem {
  display: block;
  margin-bottom: 16px;
  border-radius: 16px;
  padding: 16px;
  background-color: var(--colorWhite);
}

.listArea .blockList .blockItem > .wrap{
  padding-right: 116px;
}
.listArea .blockList .blockItem .typeBox > *{
  display: inline-block;
  vertical-align: middle;
  line-height: unset;
}
.listArea .blockList .blockItem .typeBox .icon{
  width: 20px;
  height: 20px;
  margin-right: 6px;
  background-color: var(--colorMain);
}
.listArea .blockList .blockItem .typeBox .programType{
  opacity: .5;
}
.listArea .blockList .blockItem .textBox {
  margin:10px 0 16px
}

.listArea .blockList .blockItem .textBox > * {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.listArea .blockList .blockItem .textBox .programName{
  font-weight: 600;
}
.listArea .blockList .blockItem .textBox .programDetail{
  opacity: .6;
  line-height: unset;
}
.listArea .textBox .programDetail span::after{
  content: '·';
  margin: 0 6px;
  display: inline;
}
.listArea .textBox .programDetail span:last-child::after{
  content: unset;
}
.listArea .blockList .blockItem .infoBox {
  position: relative;
}
.listArea .blockList .blockItem .infoBox .programPrice {
  font-weight: 600;
}
.listArea .blockList .blockItem .btnHeart {
  position: absolute;
  bottom: 2px;
  right: 116px;
}
.listArea .blockList .blockItem .btnHeart .icon{
  width: 20px;
  height: 20px;
}
.listArea .blockList .blockItem .thm{
  position: absolute;
  width: 100px;
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: 14px;
  background-color: #eee;
  background-size: cover;
  background-position: center;
}

.listArea .blockList.col-2 {
  font-size: 0;
}
.listArea .blockList.col-2 .blockItem {
  display: inline-block;
  width: calc(100% / 2 - 8px);
  margin-bottom: 16px;
  margin-right: 15px;
  padding: 0;
  background-color: unset;
  overflow: hidden;
  border: 1px solid var(--colorGray200);
}
.listArea .blockList.col-2 .blockItem > .wrap{
  padding: 15px;
}

.listArea .blockList.col-2 .blockItem > .wrap > a::before{
  content: '';
  position: absolute;
  z-index: 2;
  background:linear-gradient(180deg, rgba(255,255,255,.2),rgba(255,255,255,1) 70%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.listArea .blockList.col-2 .blockItem .textBox{
  z-index: 3;
  position: relative;
  margin-bottom: unset;
  padding-top: 120px;
}
.listArea .blockList.col-2 .blockItem .infoBox{
  display: none;
}
.listArea .blockList.col-2 .blockItem:nth-child(2n){
  margin-right: unset;
}

.listArea .blockList.col-2 .blockItem .thm{
  width: 100%;
  z-index: 1;
}
.listArea .blockList.col-2 .blockItem .btnHeart{
  right: 15px;
  top: 15px;
  bottom: unset;
  z-index: 4;
}




.listArea .smallList .smallItem {
  display: block;
  margin-bottom: 12px;
}

.listArea .smallList .smallItem > .wrap{
  /* padding-left: 82px; */
  /* padding-right: 80px; */
}

.listArea .smallList .smallItem > .wrap > a ,
  .listArea .smallList .smallItem > .wrap > div {
 display: flex; 
 padding-left: 112px;
 flex-direction: column;
 position: relative;
 z-index: 1;
}
.listArea .smallList .smallItem > .wrap > a *,
  .listArea .smallList .smallItem > .wrap > div *{
  flex:auto;
}
.listArea .smallList .smallItem .thm{
  position: absolute;
  width: 100px;
  top: 0;
  flex: unset !important;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  background-color: #eee;
  background-size: cover;
  background-position: center;
}

.listArea .smallList .smallItem .btnHeart{
  z-index: 2;
  position: absolute;
  left: 76px;
  bottom: 8px;
}
.listArea .smallList .smallItem .btnHeart .icon{
  background-color: var(--colorWhite) !important;
  width: 16px;
  height: 16px;
}
.listArea .smallList .smallItem .btnHeart.ON .icon{background-color: var(--colorSub-blue) !important;}


.listArea .smallList .smallItem .textBox { padding: 4px 0 6px;}

.listArea .smallList .smallItem .textBox > * {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.listArea .smallList .smallItem .textBox .programName{  
  font-weight: 600;
  height: 44px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.listArea .smallList .smallItem .textBox .programDetail{  opacity: .6;}
.listArea .smallList .smallItem .textBox .programDetail span::after{
  content: '·';
  margin: 0 6px;
  display: inline;
}
.listArea .smallList .smallItem .infoBox {
  /* position: absolute; */
  /* right: 0; */
  /* top: 50%; */
  /* transform: translateY(-50%); */
  flex: 1 !important;  
  height: fit-content;
}
.listArea .smallList .smallItem .infoBox .programPrice{  
  font-weight: 600;
  /* color: var(--colorBlue); */
}



body[data-location="program-order-check"] > .wrap,
body[data-location="program-order-detail"] > .wrap{  background-color: var(--colorGray100) !important;}
body[data-location="program-order-success"] > .wrap{  background-color: var(--colorBlue) !important;}
body[data-location="program-order-fail"] > .wrap,
body[data-location="program-order-cancle"] > .wrap{  background-color: var(--colorGray800) !important;}

.listArea .smallList.type-order .smallItem{
  box-shadow: 0 12px 24px rgba(0,0,0,.03);
}
.listArea .smallList.type-order .smallItem > .wrap > div,
  .listArea .smallList.type-order .smallItem > .wrap > ul{
  padding: 16px;
  background-color: #fff;
  border-top: 1px solid var(--colorGray100);  
  transform: translateY(-1px);
}

.listArea .smallList.type-order .smallItem > .wrap > div:first-child,
  .listArea .smallList.type-order .smallItem > .wrap > ul:first-child{
  transform:unset;
  border-top: unset;
  }
.listArea .smallList.type-order .smallItem .thm{
  position: unset;
  transform: unset;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
}


.listArea .smallList.type-order .smallItem > .wrap > div:first-child{
  border-radius: 0 0 12px 12px;
}
.listArea .smallList.type-order .smallItem > .wrap > ul:nth-child(2){
  border-radius: 12px 12px 0 0;
}
.listArea .smallList.type-order .smallItem .orderLogs {
  background-color: var(--colorGray050) !important;
  padding-bottom: 8px !important;

}
.listArea .smallList.type-order .smallItem .orderLogs > .title {
  margin-bottom:8px;
}
.listArea .smallList.type-order .smallItem .orderLogs .orderLog {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 8px;
}
.listArea .smallList.type-order .smallItem .orderLogs .orderLog > *:last-child{
  flex: auto;
  text-align: right;
}

.stateLog {
  text-align: center;
  padding: 20px 0;
  color: var(--colorWhite);
}
.stateLog .icon{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 12px;
  background-color: var(--colorWhite);
  position: relative;
}
.stateLog .icon i{
  background-color: var(--colorBlue);
  width: 50px;
  height: 50px;
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  
  mask-size: 32px auto;
  mask-repeat: no-repeat;
  mask-position: center;
}




.listmore {
  border-top: 1px solid var(--colorGray100);
  margin-top: 20px;
  padding: 40px 20px;
  color: var(--colorGray500);
  text-align: center;
}
.listmore .btn{
  margin-top: 12px;
}


/* member */
/* member > home */
body[data-location*="member"] nav{bottom: -100px;}
body[data-location*="member"] section{ padding-bottom: unset;height: 100%;position: relative;}

.profileBox{
  padding: 0 20px;
}
.profileBox .profile{
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;

  background-size: cover;
  background-position: center;
}

.profileBox .profile .btn {
  position: absolute;
  right: 0;
  bottom: 0;
}
.profileBox .profile .btn .icon-wrap{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--colorWhite);
  background-color: #F1C376;
}
.profileBox .profile .btn .icon-wrap .icon{
  width: 16px;
  height: 16px;
}

.profileBox + .topicBox {
  text-align: center;
  padding-bottom: 30px;
}
.listArea .linkList > [class*="link"] {  margin-bottom: 20px;}
  .listArea .linkList > [class*="link"]:last-child{margin-bottom: unset;}

.listArea .linkList .linkTitle {
  padding-top: 20px;
  margin-top: 4px;
  border-top: 1px solid var(--colorGray200);
  color: var(--colorGray600);
}
.listArea .linkList .linkTitle .title {line-height: unset;}

.listArea .linkList .linkItem .icon{
  width: 20px;
  height: 20px;
  -webkit-mask-size: auto 16px !important;
  background-size:auto 16px  !important;

  vertical-align: text-bottom !important;

  background-color: var(--colorBlack);
} 
.listArea .linkList .linkItem .textBox {
  position: relative;
} 

.listArea .linkList .linkItem .textBox *:not(span) {
  display: inline-block;
  vertical-align: middle;
  line-height: unset;
}
.listArea .linkList .linkItem .textBox > div {
  width: fit-content;
}
  .listArea .linkList .linkItem .textBox .rightContent {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.listArea .linkList .linkItem .textBox .title{
  font-weight: 600;
}

.listArea .linkList .linkItem .textBox .leftContent .icon{
  margin-right: 8px;
}
.listArea .linkList .linkItem .textBox .rightContent .icon{
  transform: rotate(180deg);
  margin-left: 8px;
}
.listArea .linkList .linkItem .textBox .rightContent .formArea{
  padding: 0;
}

.listArea .linkList .linkItem .textBox .leftContent > *{
  display: block;
}
.listArea .linkList .linkItem .textBox .leftContent .label{
  margin-bottom: 6px;
}
.listArea .linkList .linkItem .textBox .leftContent .info{
  margin-top: 6px;
  color: var(--colorGray600);
}
.listArea .linkList .linkItem .btnBox {
  margin-top: 12px;
  padding-bottom: 6px;
}


body[data-location="program-detail"] > .wrap{
  padding-top: unset;
}

.listArea .programList{
  position: relative;
}
.popup .popupItem .listArea .programList::before{
  height: calc(100% - 50px);
}
.popup .popupItem .listArea .programList .programItem:last-child::before{
  bottom: 50%;
  height: 50%;
}
.popup .popupItem .listArea .programList .programItem:last-child{
  padding-bottom: unset;
  margin-bottom: unset;
}
.listArea .programList .programItem{
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
}
.listArea .programList .programItem::before{
  z-index: 0;
  content: '';
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left: 15px;
  width: 2px;
  height: calc(120%);
  background-color: var(--colorSub-lightblue);
}

.listArea .programList .programItem:last-child::before {
  transform: unset;
  top: unset;
  bottom: 0;
}

.listArea .programList .programItem:last-child{
  padding-bottom: 20px;
  margin-bottom: 0;
}

.listArea .programList .programItem:first-child::before {
  transform: unset;
}
.listArea .programList .programItem > .wrap{
  position: relative;
  padding: 10px 80px 10px 40px;
}

.listArea .programList .programItem .infoBox .Num{
  position: absolute;
  left: 0;
  width: 32px;
  height: 45px;
  line-height: 45px;
  top:50%;
  transform: translateY(-50%);
  border-radius: 20px;
  text-align: center;
  background-color: var(--colorSub-lightblue);
  color: var(--colorBlue);


} 

section .listArea .programList .programItem .textBox > * {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.listArea .programList .programItem .textBox .programDetail{
  color: var(--colorGray600);
}
.listArea .programList .programItem .thm {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  height: 100%;
  border-radius: 8px;
  background-size: cover;
  background-position: center;

}

.mediaBox {
  height: 300px;
  background-size: cover;
  background-position: center;
}
.mediaBox + .infoArea {
  margin-top: -40px;
  border-top-left-radius: 30px;
  padding: 20px;
}

.mediaBox + .infoArea .programInfo .listArea {
  border-top: unset;
}
.mediaBox + .infoArea .programInfo .listArea .textBox{
  text-align: left;

}

.mediaBox + .infoArea .topicBox,
.mediaBox + .infoArea .programInfo ,
.mediaBox + .infoArea .programInfo .listArea .textBox {
  padding: 0;
}

.mediaBox + .infoArea .infoBox {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 30px;
}
.mediaBox + .infoArea .infoBox::before{
  content: '';
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  background:linear-gradient(180deg, transparent,rgba(255,255,255,1));
}
.mediaBox + .infoArea .infoBox.ON {
  overflow: unset;
  text-overflow: unset;
  -webkit-line-clamp: unset;
}
.mediaBox + .infoArea .infoBox.ON::before{
  content: none;
}

.mediaBox + .infoArea .topicBox > h3{
  font-weight: 600;
}
.mediaBox + .infoArea .topicBox .unit{
  margin-top: 8px;
}
.mediaBox + .infoArea .topicBox .unit > *{
  display: inline-block;
}
.contentFrame {
  padding: 20px;
}




/* member > login */


body[data-location="member-login"] > .wrap,
body[data-location="member-joinSuccess"] > .wrap {
  background-color: var(--colorMain);
  padding-top: unset;
}
body[data-location="member-login"] section,
  body[data-location="member-joinSuccess"] section{ 
  padding-bottom: unset;
  padding-top: unset !important;
  height: calc(100% - 215px);

}


body[data-location="member-login"] section > div {
  padding: 30px !important;
}
.btnArea.loginBtn{
  margin-top: -1px;
  padding-top: 10px !important;
}
.easyLogin {
  text-align: center;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--colorGray200);
  padding-bottom: 10px;
}
.easyLogin .btnBox{
  margin-top: 16px;
}
.easyLogin .btnBox .btn{
  margin: 0 3px;
}
.easyLogin .btnBox .btn.cus-naver{
  background-color: #27D349;
}
.easyLogin .btnBox .btn.cus-kakao{
  background-color: #FFEB00;
}

/* member > alert */

.listArea .alertList > li {  margin-bottom: 10px;}
.listArea .alertList .alertItems .alertItem {  margin-bottom: 6px;}
.listArea .alertList > li:last-child,
.listArea .alertList .alertItems .alertItem:last-child {  margin-bottom: unset;}

.listArea .alertList .alertTitle{  margin-top: 20px;}
.listArea .alertList .alertTitle:first-child{  margin-top: unset;}
.listArea .alertList .alertTitle .title{  font-weight: 600;}
.listArea .alertList .alertItems .alertItem {  
  padding: 16px;
  border-radius: 12px;
  background-color: var(--colorWhite);
}
.listArea .alertList .alertItems .alertItem[data-state="notread"]{
  background-color: #EDEEFF;
}
.listArea .alertList .alertItems .alertItem[data-state="notread"] .textBox{
  border-right-color: #fff;
}
.listArea .alertList .alertItems .alertItem > .wrap{ 
  padding-left: calc(10px + 44px); 
  padding-right: 75px;
}
.listArea .alertList .alertItems .alertItem .icon-wrap{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 14px;
  width: 44px;
  height: 44px;
  text-align: center;  
  background-color: #999;
}
.listArea .alertList .alertItems .alertItem .icon-wrap .icon{
  background-color: var(--colorWhite);
  width: 22px;
  height: 22px;
}

.listArea .alertList .alertItems .alertItem .textBox {
  border-right: 1px solid #eee;
  padding-right: 10px;
}
.listArea .alertList .alertItems .alertItem .stateBox {
  position: absolute;
  right: -15px;
  width: 90px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
.listArea .alertList .alertItems .alertItem h5 {font-weight: 600;}
.listArea .alertList .alertItems .alertItem h6 {  color: #999;}





  /* START : 20240418 update */
  
  .listArea .alertList .alertItems .alertItem .icon.icM-arrow{
    /* -webkit-mask-image:url(https://cdn-icons-png.freepik.com/512/9923/9923681.png); */
    height: 20px;
    width: 20px;
    opacity: .5;
  }
  .listArea .alertList .alertItems .alertItem {
  }
  .listArea .alertList .alertItems .alertItem > .wrap{
    padding: unset;
    display: flex;
    flex-direction: row;
  }
  
  .listArea .alertList .alertItems .alertItem .showing{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }
  
  .listArea .alertList .alertItems .alertItem .textBox {
    flex: 1;
    border: unset;
    display: flex;
    flex-direction: column;
  }
  
  .listArea .alertList .alertItems .alertItem .textBox .info{
    position: absolute;
    right: 0;
    top: 0;

  }
  .listArea .alertList .alertItems .alertItem .textBox .title{
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .listArea .alertList .alertItems .alertItem.moreArea.ON .textBox .title{
    -webkit-line-clamp: 100;

  }
  .listArea .alertList .alertItems .alertItem  .btn.btnMore{
    width: 100%;
    height: 40px;
    position: absolute;
    right: 0;
    bottom: -16px;
    background:linear-gradient(180deg, rgba(255, 255, 255, 0),rgba(255, 255, 255, 1) 60%);
    padding-top: 16px;
  }
  .listArea .alertList .alertItems .alertItem[data-state="notread"] .btn.btnMore{
    background:linear-gradient(180deg, rgba(237, 238, 255, 0),rgba(237, 238, 255, 1) 60%);

  }
  .listArea .alertList .alertItems .alertItem.moreArea.ON  .btn.btnMore{
    height: 25px;
    bottom: 0;
    background:unset;
    padding-top: unset;
    text-align: center;
  }
  
  .listArea .alertList .alertItems .alertItem  .btn.btnMore::before{
    content: '· · ·';
    font-weight: 1000;
    color: var(--colorBlue);
  }
  
  .listArea .alertList .alertItems .alertItem.moreArea.ON  .btn.btnMore::before{
    content: '닫기';
    color: #999;
  }
  .listArea .alertList .alertItems .alertItem.moreArea.ON .btn.btnMore  .icon.icM-arrow{
    transform: rotate(90deg);
  }
  .listArea .alertList .alertItems .alertItem  .btn.btnMore .icon.icM-arrow {
    transform: rotate(-90deg);
    opacity: .5;
  }
  .listArea .alertList .alertItems .alertItem .btnBox{
    /* border-left: 1px solid rgba(0,0,0,.05); */
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .listArea .alertList .alertItems .alertItem .btnBox .btn.btnLink{
    background-color: #EDEEFF;
    border-radius: 12px;
    width: 40px;
    height: 100%;
    text-align: center;
    transform: rotate(180deg);
  }
  
  .listArea .alertList .alertItems .alertItem[data-state="notread"] .btnBox .btn.btnLink {
    background-color: #fff;
    
  }
  .listArea .alertList .alertItems .alertItem .btnBox .btn.btnLink .icon.icM-arrow {
    height: 100%;
    width: 22px;
  }
  .listArea .alertList .alertItems .alertItem .moreBox > * {
    margin-top: 12px;
  }
  .listArea .alertList .alertItems .alertItem .moreBox > *:first-child {
    margin-top: 4px;
  }
  .listArea .alertList .alertItems .alertItem .moreBox > *:last-child {
    margin-bottom: 30px;
  }
  .listArea .alertList .alertItems .alertItem .moreBox .icon-wrap{
    position: unset;
    transform: unset;
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
  }

  .alert_img {
    width: 100%;
    height: auto;    /* 원본 이미지 비율 유지 */
    display: block;  /* 아래쪽 여백 방지 */
    border-radius: 20px;
  }

  .listArea .alertList .alertItems .alertItem .moreBox .info {
    color: #555;
  }
.moreArea .moreBox{
  display: none;
}
.moreArea.ON .moreBox{
  display: block;
  height: fit-content;
}

  /* END : 20240418 update */


/* my */
/* my > home */
.calendarBox,
.eventBox {
  padding: 20px;
}
.cjslib-calendar{
  position: relative;
}

.cjslib-year, .cjslib-month{
  display: inline-block;
}
.cjslib-year{
  margin-right: 8px;
}
.cjslib-year [id*="calendarContainer-year-"]{
  display: none;
}

.cjslib-month [id*="calendarContainer-month-"]{
  position: absolute;
  top: 0;
  cursor: pointer;
}
.cjslib-month #calendarContainer-month-back{
  right: 24px;
}
.cjslib-month #calendarContainer-month-next{
  right: 0;
}


.cjslib-year #calendarContainer-year,
.cjslib-month #calendarContainer-month{
  font-size: 1.8rem;
  font-weight: 800;
}

.cjslib-year #calendarContainer-year::after{
  content: '년';
}
.cjslib-month #calendarContainer-month::after{
  content: '월';
}
.cjslib-days label.cjslib-day {
  display: inline-block;
  width: calc(100% / 7.2);
  text-align: center;
  border-radius: 8px;
  padding: 14px 0;
  margin-bottom: 1px;

  font-size: 1.6rem;
  font-weight: 600;
  position: relative;
  cursor: pointer;
}
.cjslib-labels{
  border-top: 1px solid var(--colorGray100);
  margin-top: 12px;
}
.cjslib-labels span{
  display: inline-block;
  width: calc(100% / 7.1);
  text-align: center;
  padding: 16px 0 12px;
  font-size: 1.6rem;
  color: var(--colorGray500);
}

.cjslib-days label.cjslib-day.cjslib-day-today{
  background-color: var(--colorMain);
  color: var(--colorWhite);
  font-weight: 800;
}
.cjslib-day-diluted{
  color: var(--colorGray200);
}
.cjslib-days input[type="radio"]{
  opacity: 0;
  width: 1px;
  height: 1px;
}
.cjslib-indicator-type-numeric {
  /* border-radius: 50%;
  width: 14px;
  height: 14px;
  color: var(--colorWhite);
  background-color: var(--colorSub-blue);
  text-align: center;
  line-height: 14px;

  position: absolute;
  right: 4px;
  top: 3px;

  font-size: .8rem;
  font-weight: 800; */
  left: 3px;
  width: 10px;
  height: 10px;
  top: 10px;
  position: absolute;
  bottom: 0;
  border-radius: 8px;
  background-color: var(--colorSub-lightblue);
  font-size: 0;
  color: transparent;

}

.cjslib-days label.cjslib-day .cjslib-day-indicator:empty, 
.cjslib-days label.cjslib-day .cjslib-day.cjslib-day-diluted>.cjslib-day-indicator,
#organizerContainer-history{
  display: none;
}



.cjslib-date #organizerContainer-date{
  font-size: 1.8rem;
  font-weight: 800;
}

.cjslib-date  [id*="organizerContainer-day-"]{
  display: none;
  position: absolute;
  top: 0;
  cursor: pointer;
}
.cjslib-date  #organizerContainer-day-back{
  right: 24px;
}
.cjslib-date  #organizerContainer-day-next{
  right: 0;
}

.eventBox .listArea {
  padding: unset;
}
.eventBox .listArea .qrList{
  margin-top: 16px;
}
.cjslib-list-placeholder {
  padding: 16px 0 0;
  text-align: center;
  color: var(--colorGray500);
  font-size: 1.3rem;
  font-weight: 600;
}