main {border-radius:40px 40px 0 0; background: #fff; height: calc(100% - 58px); margin: 14px 0 0 0; position: relative}
main.mt-0 {height: calc(100% - 44px); margin: 0 0 0 0;}

main .checkup_icon {position:absolute; top:40px; right:18px}

main h2 {font-size: 32px; font-weight: 700; line-height: 38px; margin: 40px 0 10px 0; color:#333; padding: 0 0 0 10px; box-sizing: border-box}
main h3 {font-size: 16px; font-weight: 400; line-height: 22px; margin: 0 0 40px 0; color:#5C5C5C;  padding: 0 0 0 10px; box-sizing: border-box}

main .btn_wrap .btn1 {width:100%; height: 80px; display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; border:1px solid #9ECDB1; box-sizing: border-box; border-radius:40px; margin: 0 0 10px 0; background: #F0F8F3; font-size: 22px; font-weight: 500; color:#72C091; line-height: 30px}
main .btn_wrap .btn1 p {font-size: 14px; font-weight: 300; color:#72C091; line-height: 22px}

main .btn_wrap .btn2 {width:100%; height: 80px; display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; border-radius:40px; background: #72C091; font-size: 22px; font-weight: 500; color:#fff; line-height: 30px}

main .btn_wrap .btn_sel {width:100%; height: 60px; border-radius:30px; background: #F8FAFB; display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; font-size: 16px; font-weight: 500; color:#333; line-height: 22px; margin: 0 0 10px 0}
main .btn_wrap .btn_sel:active {background: #F0F8F3; border: 1px solid #6EC290; box-sizing: border-box}

/* .wrap main .user_name {font-size: 18px; font-weight: 400; line-height: 28px; color:#636363; margin: 0 0 42px 0} */
/* .wrap main .user_name {font-size: 18px; font-weight: 400; line-height: 28px; color:#636363; margin: 0 0 15px 0} */
/* .wrap main .user_name strong {color:#54B6D1} */

.wrap main .user_name {font-size: 16px; font-weight: 300; line-height: 28px; color:#fff; margin: 0 0 20px 0; text-align: left; display: inline-flex; flex-direction: column;}
/* .wrap main .user_name a:after {content:''; width:14px;height: 14px; display: inline-block; margin: 2px 0 0 7px; background: url('../img/pen_icon.svg') no-repeat;} */
.wrap main .user_name #todayRecode {color:#333;}
.wrap main .user_name strong {font-weight: 800; color: #00A7D6}
/* .wrap main .user_name a .write{position: absolute; right: 20px;} */
.wrap main .user_name a .write{font-weight: bold;}
.wrap main .user_name a .write:after {content:''; width:14px;height: 14px; display: inline-block; margin: 2px 0 0 7px; background: url('../img/pen_icon.svg') no-repeat;}

/* .wrap main #todayRecode {width:240px; height: 48px; background: #55B6D1; color:#fff; text-align: center; line-height: 48px; border-radius:24px; margin: 20px auto 40px; display: block} */

.wrap .index_btn_wrap .slide1 {display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; /*height: 235px*/ padding:0 15px}
.wrap .index_btn_wrap .slide1 a {display: flex;    justify-content: flex-start;    flex-direction: row;    align-items: center;
    height: 63px; box-sizing: border-box;    border-radius: 15px;    font-size: 14px; background: #fff;box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.15);
    font-weight: 700;    color: #333;    margin: 0 0 10px 0; position: relative}
/*
.wrap .index_btn_wrap .slide1 a:nth-child(1):before {content:''; width: 75px; height: 54px; display: block; background: url('../img/icon_main01.svg') no-repeat; margin: 0 0 10px 0}
.wrap .index_btn_wrap .slide1 a:nth-child(2):before {content:''; width: 75px; height: 54px; display: block; background: url('../img/icon_main02.svg') no-repeat; margin: 0 0 10px 0}
.wrap .index_btn_wrap .slide1 a:nth-child(3):before {content:''; width: 75px; height: 54px; display: block; background: url('../img/icon_main03.svg') no-repeat; margin: 0 0 10px 0}
.wrap .index_btn_wrap .slide1 a:nth-child(4):before {content:''; width: 75px; height: 54px; display: block; background: url('../img/icon_main04.svg') no-repeat; margin: 0 0 10px 0}
*/
.wrap .index_btn_wrap .slide1 a:nth-child(1):before {content:''; width: 71px; height: 63px; display: block; background: url('../img/index_main_icon01.svg') no-repeat; margin: 0 19px 0 0}
.wrap .index_btn_wrap .slide1 a:nth-child(2):before {content:''; width: 71px; height: 63px; display: block; background: url('../img/index_main_icon02.svg') no-repeat; margin: 0 19px 0 0}
.wrap .index_btn_wrap .slide1 a:nth-child(3):before {content:''; width: 71px; height: 63px; display: block; background: url('../img/index_main_icon03.svg') no-repeat; margin: 0 19px 0 0}
.wrap .index_btn_wrap .slide1 a:nth-child(4):before {content:''; width: 71px; height: 63px; display: block; background: url('../img/index_main_icon04.svg') no-repeat; margin: 0 19px 0 0}

.wrap .index_btn_wrap .slide1 a:after {content:''; width: 13px; height: 20px; position: absolute; background: url('../img/index_right_arrow.svg') no-repeat; margin: 0 0 0 0; top:23px; right:14px; background-size: contain}

.wrap .index_btn_wrap .slide2 {display: flex; flex-direction: column; height: 230px}
/*.wrap .index_btn_wrap .slide2 a {display: flex; flex-basis: calc(50% - 5px); justify-content: center; flex-direction: column; align-items: center; height:calc(110px - 5px); border: 1px solid #E3E3E3; box-sizing: border-box; border-radius: 20px; font-size: 14px; font-weight: 400; color:#888;}*/
.wrap .index_btn_wrap .slide2 a {display: flex; justify-content: flex-start; align-items: center; font-size: 14px; font-weight: 400; color:#333;background: #FFFFFF;box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.15);border-radius: 15px; margin: 0 0 10px 0; position: relative; height: 55px;}
.wrap .index_btn_wrap .slide2 a:after {content:''; width: 13px; height: 20px; position: absolute; background: url('../img/index_right_arrow.svg') no-repeat; margin: 0 0 0 0; top:18px; right:14px; background-size: contain}

.wrap .index_btn_wrap .slide2 a:nth-child(1):before {content:''; width: 75px; height: 54px; display: block; background: url('../img/icon_main05.svg') no-repeat center;}
.wrap .index_btn_wrap .slide2 a:nth-child(2):before {content:''; width: 75px; height: 54px; display: block; background: url('../img/icon_main06.svg') no-repeat center;}
.wrap .index_btn_wrap .slide2 a:nth-child(3):before {content:''; width: 75px; height: 54px; display: block; background: url('../img/icon_main07.svg') no-repeat center;}
.wrap .index_btn_wrap .slide2 a:nth-child(4):before {content:''; width: 75px; height: 54px; display: block; background: url('../img/icon_main08.svg') no-repeat center;}
.wrap .index_btn_wrap .slide2 a:nth-child(5):before {content:''; width: 75px; height: 54px; display: block; background: url('../img/icon_main09.svg') no-repeat center;}

.wrap .point_wrap {width:100%; height: 150px; border: 1px solid #E3E3E3; box-sizing: border-box; border-radius: 20px; padding:10px 11px 20px 8px; margin: 20px 0 0 0}
.wrap .point_wrap > p {font-size: 14px; font-weight: 400; line-height: 16px; margin: 0 0 0 6px}

.chartjs-legend {margin: 10px 0 0 0}
.chartjs-legend ol,
.chartjs-legend ul {display: flex; justify-content: center}
 
.chartjs-legend li {  cursor:pointer;  display: flex;  margin: 0 5px;  font-size: 10px; color:#888; align-items: center}
 
.chartjs-legend li span.bar{  position:relative;  padding: 0px 10px;  margin: 5px;  border-radius:100px;  color:white;}
 
.chartjs-legend li span.line{  position:relative;  margin: 0 4px 0 0;  width:6px; height: 4px; display: inline-block}
 
.chartjs-legend li div.line{  float:left;  height:2px;  background:#000;  font-size:0;  line-height:0;  width:25px;  padding:1px 0px;  border-radius:100px;  margin: 0 4px 0 0;}

.wrap .point_graph_wrap {width:calc(100% - 10px); height: 81px; border-bottom: 1px solid #C4C4C4; border-top:2px solid #FF9A01; margin:10px 1px 0 9px; position: relative}
.wrap .point_graph_wrap > ul {width:12px; position: absolute; top: -8px; left: -12px; font-size: 10px; font-weight: 300; color:#888; line-height: 17.5px; text-align: center}
.wrap .point_graph_wrap > ul li:last-child {margin-top: -5px;}
.wrap .point_graph_wrap > ul li strong {font-weight: 700; color:#FF9A01;}

.wrap .point_graph_wrap #maroPointDate {position: absolute; bottom:-17px; left: 0; width: 100%}
.wrap .point_graph_wrap #maroPointDate ol {display: flex; justify-content: space-around}
.wrap .point_graph_wrap #maroPointDate ol li {font-size: 10px; font-weight: 300; color:#888; width: 23px; text-align: center;}

.wrap .point_graph_wrap #maroPointData {display: flex; justify-content: space-around; font-size: 0; align-items: flex-end; height: 80px;}
.wrap .point_graph_wrap #maroPointData ol {width:23px;}
.wrap .point_graph_wrap #maroPointData ol li {width:16px; height: 6px; background: #ddd; border-radius:4px; margin: 2px 0 0 3.5px;}
.wrap .point_graph_wrap #maroPointData ol.on li {width:16px; height: 6px; background: linear-gradient(180deg, #FFCE22 0%, #FF9900 100%);; border-radius:4px; margin: 2px 0 0 0;}

/* home layer pop */
.layer .home h4 {font-size: 16px; font-weight: 700; line-height: 38px; color:#55B6D1;}
.layer .home section {margin: 0 0 10px 0;}
.layer .home section,
.layer .home .implement,
.layer .home .activity
{width:100%; border:1px solid #F2F2F2; box-sizing: border-box; padding:6px 16px 10px 16px; border-radius:10px}
.layer .home section p,
.layer .home .implement p,
.layer .home .activity p
{font-size: 16px; font-weight: 700; line-height: 38px; margin: 0 0 11px 0}
.layer .home .implement span {font-size: 14px; font-weight: 300; line-height: 20px; margin: 0 0 20px 0; display: block; color:#787878;}
.layer .home .activity span {font-size: 14px; font-weight: 300; line-height: 20px; margin: 0 0 20px 0; display: block; color:#787878;}
.layer .home section ul {display: flex; justify-content: space-between}
.layer .home section ul li dl dt {font-size: 10px; font-weight: 700; line-height: 17px; text-align: center}
.layer .home section ul li dl dd {font-size: 8px; font-weight: 500; line-height: 14px; text-align: center; color:#888}

.layer .home section ul li:nth-child(1).on dl dt {color:#FF8078}
.layer .home section ul li:nth-child(2).on dl dt {color:#FFA178}
.layer .home section ul li:nth-child(3).on dl dt {color:#FFC55F}
.layer .home section ul li:nth-child(4).on dl dt {color:#79CBDF}
.layer .home section ul li:nth-child(5).on dl dt {color:#8ED095}
.layer .home section ul li:nth-child(1).on dl dt:before {content:''; display: block; width:30px; height: 30px; background: url('../img/stress_5.svg') no-repeat; margin: 0 0 2px 0}
.layer .home section ul li:nth-child(2).on dl dt:before {content:''; display: block; width:30px; height: 30px; background: url('../img/stress_4.svg') no-repeat; margin: 0 0 2px 0}
.layer .home section ul li:nth-child(3).on dl dt:before {content:''; display: block; width:30px; height: 30px; background: url('../img/stress_3.svg') no-repeat; margin: 0 0 2px 0}
.layer .home section ul li:nth-child(4).on dl dt:before {content:''; display: block; width:30px; height: 30px; background: url('../img/stress_2.svg') no-repeat; margin: 0 0 2px 0}
.layer .home section ul li:nth-child(5).on dl dt:before {content:''; display: block; width:30px; height: 30px; background: url('../img/stress_1.svg') no-repeat; margin: 0 0 2px 0}

.layer .home section ul li:nth-child(1) dl dt:before {content:''; display: block; width:30px; height: 30px; background: url('../img/stress_5_off.svg') no-repeat; margin: 0 0 2px 0}
.layer .home section ul li:nth-child(2) dl dt:before {content:''; display: block; width:30px; height: 30px; background: url('../img/stress_4_off.svg') no-repeat; margin: 0 0 2px 0}
.layer .home section ul li:nth-child(3) dl dt:before {content:''; display: block; width:30px; height: 30px; background: url('../img/stress_3_off.svg') no-repeat; margin: 0 0 2px 0}
.layer .home section ul li:nth-child(4) dl dt:before {content:''; display: block; width:30px; height: 30px; background: url('../img/stress_2_off.svg') no-repeat; margin: 0 0 2px 0}
.layer .home section ul li:nth-child(5) dl dt:before {content:''; display: block; width:30px; height: 30px; background: url('../img/stress_1_off.svg') no-repeat; margin: 0 0 2px 0}


.layer .home .implement ul {display: flex; flex-wrap:wrap; justify-content: flex-start}
.layer .home .activity > div {display: flex; flex-wrap:wrap; justify-content: space-between}
.layer .home .implement ul li {display: flex; flex-basis: 50%; }
.layer .home .activity > div a {display: flex; flex-basis: calc(50% - 4px); border-radius:10px; box-sizing: border-box; margin: 0 0 6px 0; height: 38px; align-items: center; padding:0 0 0 10px; font-size: 14px; font-weight: 300; color:#ccc; background: url('../img/x_icon.svg') no-repeat center right 16px #F8FAFB; position: relative;}
.layer .home .activity > div a.on {font-weight: 700; color:#47B7F6; background: url('../img/o_icon.svg') no-repeat center right 16px #47b7f61a;}
.layer .home .activity > div a .maro{position: absolute; right: 50px; top: 10px; color: #8c8c8c; font-size: 90%;}

.wrap .home .confirm_btn {position:fixed; bottom:0; left:0; width:100%; height:76px; display:flex; align-content: center; align-items: center;  justify-content: center; color:#fff;  font-size: 18px; font-weight: 800; background: linear-gradient(124.77deg, #56C9E9 -1.48%, #009CF4 68.8%);filter: drop-shadow(0px -3px 3px rgba(0, 0, 0, 0.15));}

/* #homeAlertPop {width:280px; height: 570px; position: absolute; top:80px; right:20px; background: #fff; border-radius:20px; padding:40px 30px 30px 30px; box-sizing: border-box;} */
#homeAlertPop {width:100%; height: 100%; background: #fff; padding:40px 30px 30px 30px; box-sizing: border-box;}
#homeAlertPop .close_btn {width: 44px; height: 44px; display: inline-block; float: right; outline: 0; border: 0; background: url('../img/close_btn.svg') no-repeat center;}
#homeAlertPop .head {width: 44px; height: 44px; position: absolute; top:14px; right:14px;}
#homeAlertPop h4 {font-size: 20px; line-height: 38px; font-weight: 700}
#homeAlertPop h6 {font-size: 12px; line-height: 20px; font-weight: 300; color:#888; margin: 0 0 24px 0}
#homeAlertPop dl:not(:last-child) {display: flex; justify-content: space-between; margin: 0 0 20px 0}
#homeAlertPop dl dt {font-size: 16px; line-height: 32px; font-weight: 400}
#homeAlertPop dl:last-child dt { font-weight: 700}
#homeAlertPop dl:not(:last-child) dd {width:32px; height: 32px; background: url('../img/tell_icon.svg') no-repeat;}
#homeAlertPop dl:not(:last-child) dd a {display: block; width: 100%; height: 100%;}
#homeAlertPop dl:last-child dd {width: 100%; height: 200px; background: #C4C4C4; border-radius:10px; margin-top: 10px;}

#homeMenuPop {width:100%; height: 436px; position: absolute; bottom:68px; left:0; background: #fff; border-radius:20px 20px 0 0; padding:62px 30px 30px 30px; box-sizing: border-box;}
#homeMenuPop .head {width: 44px; height: 44px; position: absolute; top:20px; right:20px;}
#homeMenuPop .close_btn {width: 44px; height: 44px; display: inline-block; float: right; outline: 0; border: 0; background: url('../img/close_btn.svg') no-repeat center;}
#homeMenuPop ul {}
#homeMenuPop ul li {font-size: 16px; height: 52px; font-weight: 400;}
#homeMenuPop ul li a {color:#333; height: 100%;  display: flex; align-items: center; align-content: center}

/* switch toggle */
.controll {display: flex; justify-content: space-between; padding:10px 20px 0; margin: 0 0 20px 0}
.controll .switch {  position: relative;  display: inline-block;  width: 62px;  height: 32px;  vertical-align:middle;}
.controll .switch {  position: relative;  display: inline-block;  width: 62px;  height: 32px;  vertical-align:middle;}

.controll .switch label .onoff_text.off {position: absolute; z-index: 10; top:8px; left: 10px; display: none}
.controll .switch label .onoff_text {position: absolute; z-index: 10; top:8px; right: 12px; display: none}
.controll .switch label .onoff_text.off:before {content:'OFF'; font-size: 12px; color:#FFF;}
.controll .switch label .onoff_text:before {content:'ON'; font-size: 12px; color:#FFF;}

.controll .slider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ccc;
  -webkit-transition: .2s;  transition: .2s;  box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.05);}
.controll .slider:before {  position: absolute;  content: "";  height: 20px;  width: 20px;  left: 36px;  bottom: 6px;  background-color: #fff;  -webkit-transition: .2s;  transition: .2s;  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.1);}
.controll input:checked + .slider {  background-color: #47B7F6;}
.controll input:focus + .slider {}
.controll input:checked + .slider:before {  -webkit-transform: translateX(-30px);  -ms-transform: translateX(-30px); transform: translateX(-30px);}

.controll .slider.round {border-radius: 34px;}
.controll .slider.round:before {border-radius: 50%;}

.controll .all_real {width:80px; height: 30px; border:1px solid #ddd; box-sizing: border-box; font-size: 12px; font-weight: 400; border-radius:15px; display: flex; justify-content: center; align-items: center; background: #fff;}

.layer main.alram {padding:0;}
.layer .alram .alram_not {display: flex; justify-content: center; font-size: 16px; color:#888; line-height: 24px; font-weight: 300; text-align: center; padding: 180px 0 0 0}
.layer .alram .alram_list {height: auto; min-height: 118px; padding:20px 20px 16px 20px; border-bottom:1px solid #F2F2F2; box-sizing: border-box}
.layer .alram .alram_list .date {font-size: 14px; line-height: 20px; font-weight: 300; color:#888; margin: 0 0 10px 0}
.layer .alram .alram_list .reservation {font-size: 14px; line-height: 20px; font-weight: 300; color:#888; margin: 0 0 10px 0; display: flex; flex-direction: row; align-items: center}
.layer .alram .alram_list .reservation .rdate {font-size: 14px; line-height: 24px; font-weight: 400; color:#333;}
.layer .alram .alram_list .reservation .icon {font-size: 12px; font-weight: 700; height: 20px; padding:0 6px; box-sizing: border-box; display: flex; align-items: center; border-radius:2px; margin: 0 8px 0 0}
.layer .alram .alram_list .reservation .icon.brown {color:#CA802A; background: #FAF2EA;}
.layer .alram .alram_list .reservation .icon.red {color:#E08484; background: #FCF3F3;}
.layer .alram .alram_list .reservation .icon.green {color:#78A642; background: #F2F6EC;}
.layer .alram .alram_list .reservation .icon.blue {color:#54B6D1; background: #EBF3FE;}
.layer .alram .alram_list .reservation .icon.yellow {color:#b0b000; background: #ffffe6; min-width: 35px;}
.layer .alram .alram_list .text {font-size: 16px; line-height: 24px; font-weight: 400; }

main #calendar {margin:0 0 16px 0}
main .cal_mypoint {width:200px; height: 30px; line-height: 30px; text-align: center; background: #f9f9f9; border-radius:10px; margin: 0 auto 10px; font-size: 12px; font-weight: 300;}
main .cal_mypoint strong {color:#55B6D1; font-weight: 700;}

.wrap .result_search_title {display: inline-block; margin: 0 0 20px 0; width: 100%; margin: 0 0 4px 0}
.wrap .result_search_title dl {float:left; display: flex; align-items: baseline}
.wrap .result_search_title dl dt{font-size: 16px; line-height: 24px; font-weight: 700; padding:0 0 0 15px}
.wrap .result_search_title dl dd{margin: 0 0 0 5px; font-size: 16px; font-weight: 700}

.wrap .status_wrap .schedule, 
.wrap .status_wrap .status,
.wrap .status_wrap .solutio,
.wrap .status_wrap .calPop  
{padding:20px; box-sizing: border-box; background: #F8FAFB; border-radius: 20px; margin: 0 0 20px 0}
.wrap .status_wrap div dl dt:before {content:''; width: 4px; height: 4px; border-radius:100%; display: inline-block; background: #333; vertical-align: text-top; margin:7px 5px 0 0}
.wrap .status_wrap .schedule dl {display:flex; font-size: 16px; line-height: 38px; justify-content: space-between}
.wrap .status_wrap .schedule dl dt {margin: 0 30px 0 0}
.wrap .status_wrap .schedule dl dd p {font-size: 14px; line-height: 20px; color:#888; font-weight: 300}
.wrap .status_wrap .schedule dl dd p.eduTime {text-align: right;}
.wrap .status_wrap .schedule dl dd p.eduTime span{font-weight: 700; font-size: 16px;}
.wrap .status_wrap .schedule dl dd .reservation_ok {border: 1px solid #DDD; font-size: 12px; font-weight: 500; letter-spacing: -0.03em; background: #fff; border-radius:16px;width:80px; height: 30px;}
.wrap .status_wrap .schedule dl dd .reservation_cancel {border: 1px solid #DDD; font-size: 12px; font-weight: 500; letter-spacing: -0.03em; background: #fff; color:#888; border-radius:16px;width:80px; height: 30px;}
.wrap .status_wrap .schedule dl dd .cancel {font-size: 14px; font-weight: 500; letter-spacing: -0.03em; background: #F4F4F4; border-radius:6px;width:80px; height: 24px; color:#888;}
.wrap .status_wrap .schedule dl dd .complete {font-size: 14px; font-weight: 500; letter-spacing: -0.03em; background: #ECF9FD; border-radius:6px;width:80px; height: 24px; color:#39C1E7;}

.wrap .status_wrap .status dl {display:flex; justify-content: space-between; font-size: 16px; line-height: 38px;}
.wrap .status_wrap .status dl dt {margin: 0 30px 0 0}
.wrap .status_wrap .status dl dd {display: flex; align-items: center;}
.wrap .status_wrap .status dl dd span {width:30px; text-align: right}
.wrap .status_wrap .status dl dd.point1:before {content:''; display: inline-block; width:20px; height: 20px; background: url('../img/stress_1.svg') no-repeat; background-size: contain; margin: 0 8px 0 0}
.wrap .status_wrap .status dl dd.point2:before {content:''; display: inline-block; width:20px; height: 20px; background: url('../img/stress_2.svg') no-repeat; background-size: contain; margin: 0 8px 0 0}
.wrap .status_wrap .status dl dd.point3:before {content:''; display: inline-block; width:20px; height: 20px; background: url('../img/stress_3.svg') no-repeat; background-size: contain; margin: 0 8px 0 0}
.wrap .status_wrap .status dl dd.point4:before {content:''; display: inline-block; width:20px; height: 20px; background: url('../img/stress_4.svg') no-repeat; background-size: contain; margin: 0 8px 0 0}
.wrap .status_wrap .status dl dd.point5:before {content:''; display: inline-block; width:20px; height: 20px; background: url('../img/stress_5.svg') no-repeat; background-size: contain; margin: 0 8px 0 0}

.wrap .status_wrap .solution dl {display:flex; justify-content: space-between; font-size: 16px; line-height: 38px;}
.wrap .status_wrap .solution dl dt {margin: 0 30px 0 0}
.wrap .status_wrap .solution dl dd.yes:before {content:''; width: 18px; height: 18px; background: url('../img/o_icon.svg') no-repeat; display: inline-block}
.wrap .status_wrap .solution dl dd.no:before {content:''; width: 18px; height: 18px; background: url('../img/x_icon.svg') no-repeat; display: inline-block}

.wrap .status_wrap .calPop dl {display:flex; justify-content: space-between; font-size: 16px; line-height: 38px;}
.wrap .status_wrap .calPop dl dt {margin: 0 30px 0 0}
.wrap .status_wrap .calPop dl dd.yes:after {content:''; width: 28px; height: 18px; background: url('../img/o_icon.svg') no-repeat; display: inline-block; background-position: right center; margin: 0 0 -4px 0;}
.wrap .status_wrap .calPop dl dd.no:after {content:''; width: 28px; height: 18px; background: url('../img/x_icon.svg') no-repeat; display: inline-block; background-position: right center; margin: 0 0 -4px 0;}

.fc .fc-daygrid-day-frame {position: relative}
.fc .fc-daygrid-day.fc-day-today {background: #F6FBFC !important}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {border:1px solid #54B6D1; border-radius:6px; box-sizing: border-box}

.fc-daygrid-day-top {font-size: 14px !important; font-weight: 400; color:#888;}
.fc-direction-ltr .fc-daygrid-day-events div:first-child .fc-daygrid-event.fc-event-end.red:before {content:''; position: absolute; top: -16px; right: 1px;width: 10px; height: 10px; border-radius:100%; display: inline-block; background: linear-gradient(180deg, #F58686 0%, #FA6969 100%);}
.fc-direction-ltr .fc-daygrid-day-events div:first-child .fc-daygrid-event.fc-event-end.yellow:before {content:''; position: absolute; top: -16px; right: 1px;width: 10px; height: 10px; border-radius:100%; display: inline-block; background: linear-gradient(180deg, #FFDE68 0%, #FFBF5B 100%);}
.fc-direction-ltr .fc-daygrid-day-events div:first-child .fc-daygrid-event.fc-event-end.green:before {content:''; position: absolute; top: -16px; right: 1px;width: 10px; height: 10px; border-radius:100%; display: inline-block; background: linear-gradient(180deg, #8AEA9F 0%, #5BCA95 100%);}

.fc-h-event.cc_red {background:#FCF3F3 !important; color:#E08484 !important; border:none !important}
.fc-h-event.cc_brown {background:#FAF3EA !important; color:#CA802A !important; border:none !important}
.fc-h-event.cc_blue {background:#EEF8FB !important; color:#54B6D1 !important; border:none !important}
.fc-h-event.cc_green {background:#F2F7ED !important; color:#78A642 !important; border:none !important}
.fc-h-event.cc_gray {background:#EEF8FB !important; color:#808080!important; border:none !important}


/* layer menu pop */
.wrap .menu_layer h2 {font-size: 26px; font-weight: 700; line-height: 38px; color:#000; padding:0}
.wrap .menu_layer h3 {font-size: 14px; font-weight: 400; line-height: 22px; color:#333; margin: 0 0 70px 0; padding:0}
.wrap .kakao_btn {width:100%; height: 40px; border-radius:4px; display: flex; border: 0; outline: 0; justify-content: center; align-items: center; font-size: 14px; font-weight: 400; margin: 0 auto 10px; background: url('../img/kakao_icon.svg') no-repeat 18px center #FEE500;}
.wrap .suwon_logo {width:189px; height: 144px; background: url('../img/suwon_center_logo.png') no-repeat center; background-size: cover; margin: 0 auto 48px;}

.wrap .center_intro {font-size:14px; font-weight: 400; line-height: 20px; color:#333; margin: 0 0 40px 0}
.wrap .center_info {background: #F8FAFB; border-radius: 10px; padding: 20px;box-sizing: border-box;color: #888;    font-size: 14px;font-weight: 400;line-height: 20px;margin: 0 0 40px 0;}
.wrap .center_info p:nth-child(1) {font-size: 18px; color:#333; line-height: 20px; margin: 0 0 10px 0}
.wrap .center_info p:nth-child(2) {font-size: 14px; color:#333; line-height: 20px; margin: 0 0 10px 0}
.wrap .center_info p:nth-child(3) a{font-size: 14px; color:#333; line-height: 20px; font-weight: 700;}
.wrap .center_info p:nth-child(3) a:after {content:''; width: 16px; height: 16px; background: url('../img/icon_arrow.svg') no-repeat; margin: 0 0 0 6px; display: inline-block; vertical-align: middle}

.wrap .search_txt {width:100%; height: 48px; position: relative; margin: 18px 0 30px 0}
.wrap .search_txt .search_btn {position: absolute; top: 13px; right:18px; width:21px; height: 21px; background: url('../img/search_btn.svg') no-repeat; background-size: contain; font-size: 0}
.wrap .search_txt input {width:100%; height: 48px; background: #F8FAFB; border-radius:10px; border:none; padding:0 0 0 25px; box-sizing: border-box}
.wrap .tab_wrap {width:100%; height: 42px; background: #F8FAFB; border:1px solid #E9EEF0; box-sizing: border-box; border-radius:6px; margin: 0 0 20px 0}
.wrap .tab_wrap ul {display: flex; height:calc(100% - 4px); justify-content: space-around; margin: 2px 0 0 0;}
.wrap .tab_wrap ul li {display: flex; flex-basis: calc(25% - 4px); font-size: 14px; justify-content: center; align-items: center;}
.wrap .tab_wrap ul li.on {background: #0B99EA;; color:#FFF; font-weight: 700; border-radius:4px;}

.wrap .tab_contents > div {display: none}
.wrap .tab_contents > div.on {display: block}
.wrap .tab_contents dl {display: flex; flex-direction: column; border-top:1px solid #F2F2F2; box-sizing: border-box}
.wrap .tab_contents dl dt {display:flex; width:100%; height:66px; align-items: center; padding: 0 20px; box-sizing: border-box; position: relative}
.wrap .tab_contents dl dt:after {content:''; display:flex; width:24px; height:16px; background: url('../img/droparrow_icon.svg') no-repeat center; position: absolute; right:20px; top:24px}
.wrap .tab_contents dl dt.on:after {content:''; display:flex; width:24px; height:16px; background: url('../img/droparrow_icon.svg') no-repeat center; position: absolute; right:20px; top:24px; transform: rotate(-180deg)}
.wrap .tab_contents dl dd {display:flex; width:100%; padding: 20px; box-sizing: border-box; background: #F8FAFB; font-size: 14px; line-height: 20px; font-weight: 300; color:#888;border-top:1px solid #F2F2F2; }

/*공지사항 */
.wrap .tab_wrap_notice {width:100%; height: 42px; background: #F8FAFB; border:1px solid #E9EEF0; box-sizing: border-box; border-radius:6px; margin: 0 0 20px 0}
.wrap .tab_wrap_notice ul {display: flex; height:calc(100% - 4px); justify-content: space-around; margin: 2px 0 0 0}
.wrap .tab_wrap_notice ul li {display: flex; flex-basis: calc(50% - 4px); font-size: 14px; justify-content: center; align-items: center;}
.wrap .tab_wrap_notice ul li.on {background: #0B99EA;; color:#FFF; font-weight: 700; border-radius:4px;}

.wrap .tab_contents_notice > div {display: none; border-bottom:1px solid #F2F2F2;}
.wrap .tab_contents_notice > div.on {display: block}
.wrap .tab_contents_notice dl {display: flex; flex-direction: column; border-top:1px solid #F2F2F2; padding:15px 20px; box-sizing: border-box}
.wrap .tab_contents_notice dl dt {display:flex; width:100%; align-items: center; font-size: 14px; line-height: 24px; color:#888; margin: 0 0 6px 0}
.wrap .tab_contents_notice dl dd {display:flex; width:100%; align-items: center; font-size: 16px; line-height: 24px; color:#333;}
/* .wrap .tab_contents_notice .imp {margin-left: 10px; font-size: 11px; font-weight: bold; color: #000; background: #ffff99;} */
.wrap .tab_contents_notice .imp {margin-left: 5px; font-size: 12px; font-weight: bold; color: #ff8000;}
.wrap .tab_contents_notice .impTxt {font-weight: bold; color: #000;}

.wrap .tab_contents_agency > div {display: none; border-bottom:1px solid #F2F2F2;}
.wrap .tab_contents_agency > div.on {display: block}
.wrap .tab_contents_agency dl {display: flex; flex-direction: row; border-top:1px solid #F2F2F2; padding:20px 20px 20px; box-sizing: border-box}
.wrap .tab_contents_agency dl dt {display:flex; flex-basis: 35px; margin: 0 15px 0 0}
.wrap .tab_contents_agency dl dt img {width:50px; height: 50px}
.wrap .tab_contents_agency dl dd {display:flex; flex-direction: column; width:100%; align-items: flex-start; font-size: 16px; line-height: 24px; color:#333; justify-content: center;}
.wrap .tab_contents_agency dl dd p:first-child{font-size: 14px; font-weight: 500; line-height: 24px;}
.wrap .tab_contents_agency dl dd p:last-child{font-size: 10px; font-weight: 400; line-height: 12px;}
/* 행복레터 */
.wrap .happy_letter {border-bottom:1px solid #F2F2F2;}
.wrap .happy_letter dl {border-top:1px solid #F2F2F2; padding:28px 20px 30px; box-sizing: border-box; display:flex}
.wrap .happy_letter dl dt {width: 120px; margin: 0 6px 0 0}
.wrap .happy_letter dl dt img {width:100%;border-radius:8px; }
.wrap .happy_letter dl dd {width:calc(100% - 126px); display: flex; align-items: center}
.wrap .happy_letter dl dd ul {}
.wrap .happy_letter dl dd ul li.title {font-size: 12px; font-weight: 700; line-height: 18px}
.wrap .happy_letter dl dd ul li.content {font-size: 12px; font-weight: 700; line-height: 18px;}
.wrap .happy_letter dl dd ul li.date {font-size: 12px; font-weight: 400; line-height: 16px; color:#888}

/* 예약 상세 */
.wrap .reservation_detail_wrap {}
.wrap .reservation_detail_wrap ul li {border-bottom: 1px solid #F2F2F2; padding: 32px 20px 29px; box-sizing: border-box}
.wrap .reservation_detail_wrap ul li dl {}
.wrap .reservation_detail_wrap ul li dl dt {margin: 0 0 4px 0}
.wrap .reservation_detail_wrap ul li dl dt .type {font-size: 12px; font-weight: 700; line-height: 12px; padding:4px 6px; border-radius:2px; margin: 0 4px 0 0}
.wrap .reservation_detail_wrap ul li dl dt .type.cc_red {background:#FCF3F3 !important; color:#E08484 !important; border:none !important}
.wrap .reservation_detail_wrap ul li dl dt .type.cc_brown {background:#FAF3EA !important; color:#CA802A !important; border:none !important}
.wrap .reservation_detail_wrap ul li dl dt .type.cc_blue {background:#EEF8FB !important; color:#54B6D1 !important; border:none !important}
.wrap .reservation_detail_wrap ul li dl dt .type.cc_green {background:#F2F7ED !important; color:#78A642 !important; border:none !important}
.wrap .reservation_detail_wrap ul li dl dt .type.cc_gray {background:#EEF8FB !important; color:#808080!important; border:none !important}

.wrap .reservation_detail_wrap ul li dl dt .date {font-size: 14px; font-weight: 400; line-height: 24px;}
.wrap .reservation_detail_wrap ul li dl dd {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.wrap .reservation_detail_wrap ul li dl dd p {display: flex; margin: 0 18px 0 0}
.wrap .reservation_detail_wrap ul li dl dd span {display: flex; flex-basis: 68px; justify-content: center}
.wrap .reservation_detail_wrap ul li dl dd .res_title {font-size: 16px; font-weight: 400; line-height: 24px;}
.wrap .reservation_detail_wrap ul li dl dd .reservation_ok {border: 1px solid #DDD; display: flex; justify-content: center; align-items: center;font-size: 12px; font-weight: 500; letter-spacing: -0.03em; background: #fff; border-radius:16px;width:80px; height: 30px;}
.wrap .reservation_detail_wrap ul li dl dd .reservation_cancel {border: 1px solid #DDD; display: flex; justify-content: center; align-items: center;font-size: 12px; font-weight: 500; letter-spacing: -0.03em; background: #F4F4F4; color:#888; border-radius:16px;width:80px; height: 30px;}
.wrap .reservation_detail_wrap ul li dl dd .cancel {display: flex; justify-content: center; align-items: center;font-size: 14px; font-weight: 500; letter-spacing: -0.03em; background: #F4F4F4; border-radius:6px;width:80px; height: 24px; color:#888;}
.wrap .reservation_detail_wrap ul li dl dd .complete {display: flex; justify-content: center; align-items: center;font-size: 14px; font-weight: 500; letter-spacing: -0.03em; background: #ECF9FD; border-radius:6px;width:80px; height: 24px; color:#39C1E7;}

/*2022-08-25 point*/
.mypoint_wrap {display: flex; font-size: 13px; font-weight: 700; line-height: 28px; color:#FF9416}
.mypoint_wrap .maro_point {display: flex; align-items: center; margin: 0 8px 0 0}
.mypoint_wrap .maro_point:before {content:''; width:17px;height: 17px; display: inline-block; margin: 0 5px 2px 0; background: url('../img/my_maro_icon.svg') no-repeat;}
.mypoint_wrap .maro_draw {display: flex; align-items: center}
.mypoint_wrap .maro_draw:before {content:''; width:24px;height: 13px; display: inline-block; margin: 0 5px 2px 0; background: url('../img/my_draw_icon.svg') no-repeat;}
.wrap main .user_name .my_text {color:#333; font-size: 10px; font-weight: 400; height: 20px; line-height: 20px}
.wrap main .reserve_btn {display: flex; justify-content: center; margin: 10px 0 0 0}
.wrap main .reserve_btn a {width: 240px;height: 48px;left: 60px;top: 674px;background: #B0B0B0;box-shadow: 0px 3px 10px rgba(51, 51, 51, 0.15);border-radius: 24px; display: flex; justify-content: center; align-items: center; color:#fff; font-weight: 700; font-size: 18px; letter-spacing: -0.02em}
.swiper {background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 52%);}