header {
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  padding: 0 1.5rem;
  z-index: 7777;
  background: #fff;
}
header h1 {
  width: 3.5rem;
}
header h1 a {
  width: 100%;
}
header h1 a img {
  width: 100%;
}
header #backBtn {
  width: 3rem;
  position: absolute;
  left: 1.5rem;
}
header #backBtn img {
  width: 100%;
}
header #menuBtn {
  width: 2.5rem;
  position: absolute;
  right: 1.5rem;
}
header #menuBtn img {
  width: 100%;
}

.bannerImg {
  width: 100%;
  padding: 1.5rem 0;
}
.bannerImg a {
  width: 100%;
}
.bannerImg a img {
  width: 100%;
}

#saveBtn {
  /* margin-top: 3rem; */
}

nav {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
  padding: 0 1.5rem;
  background: #f9f9f9;
  overflow-y: scroll;
}
nav .navHeader {
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
}
nav .navHeader h1 {
  width: 3.5rem;
}
nav .navHeader h1 a {
  width: 100%;
}
nav .navHeader h1 a img {
  width: 100%;
}
nav .navHeader #closeBtn {
  width: 2rem;
}
nav .navHeader #closeBtn img {
  width: 100%;
}
nav .profile {
  margin: 2rem 0;
  border-radius: 1rem;
  background-color: #fff;
  background-image: url(../img/img-2.png);
  background-repeat: no-repeat;
  background-size: 8rem;
  background-position: right 1.5rem center;
  height: 10rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  justify-content: center;
  padding: 0 2rem;
}
nav .profile h2 {
  font-size: 2rem;
  font-weight: 800;
}
nav .profile p {
  font-size: 1.6rem;
  color: #768496;
}
nav .menuWrap {
  padding: 2rem 0;
}
nav .menuWrap h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}
nav .menuWrap > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.6rem;
  color: #fff;
  background: #6040e2;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
}
nav .menuWrap > a img {
  width: 1rem;
}
nav .menuWrap .menu {
  display: flex;
  flex-flow: column nowrap;
  border-radius: 1rem;
  overflow: hidden;
}
nav .menuWrap .menu a {
  padding: 2rem 1.5rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.6rem;
  color: #798698;
}
nav .menuWrap .menu a img {
  width: 1rem;
}

/* .notiBg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  padding: 3rem 1.5rem;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.notiBg .noti {
  width: 80%;
  background: #fff;
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 1.5rem;
}
.notiBg .noti img {
  width: 2.5rem;
}
.notiBg .noti span {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.notiBg .noti a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 1.8rem;
  height: 5rem;
  border-radius: 1rem;
  background: linear-gradient(to right, #1e9ad3, #6040e2);
  color: #fff;
} */

.schoolBg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  padding: 3rem 1.5rem;
  display: none;
  align-items: flex-end;
  z-index: 9999;
}
.schoolBg .school {
  background: #fff;
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  height: 80%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
  justify-content: space-between;
}
.schoolBg .school form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9f9;
  border-radius: 1rem;
  padding: 0 0 0 1.5rem;
}
.schoolBg .school form img {
  width: 2rem;
  margin-right: 1.5rem;
}
.schoolBg .school form input {
  width: calc(100% - 2rem);
  background: none;
  height: 100%;
  padding: 1.5rem 0;
  font-size: 1.6rem;
}
.schoolBg .school form input::placeholder {
  color: #c3c9d2;
}
.schoolBg .school .schoolWrap {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  overflow-y: scroll;
}
.schoolBg .school .schoolWrap a {
  padding: 1rem 0;
}
.schoolBg .school .schoolWrap a h4 {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}
.schoolBg .school .schoolWrap a p {
  color: #748294;
  font-size: 1.4rem;
}
.gradeBg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  padding: 3rem 1.5rem;
  display: none;
  align-items: flex-end;
  z-index: 9999;
}
.gradeBg .grade {
  background: #fff;
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  height: 80%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
}
.gradeBg .grade h3 {
  font-size: 2rem;
  font-weight: 800;
  padding: 0 1rem;
}
.gradeBg .grade .select {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  overflow-y: scroll;
}
.gradeBg .grade .select a {
  padding: 1.5rem;
  border-radius: 1rem;
  font-size: 1.6rem;
  color: #c1c7d0;
}
.classBg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  padding: 3rem 1.5rem;
  display: none;
  align-items: flex-end;
  z-index: 9999;
}
.classBg .class {
  background: #fff;
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  height: 80%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
}
.classBg .class h3 {
  font-size: 2rem;
  padding: 0 1rem;
  font-weight: 800;
}
.classBg .class .select {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  overflow-y: scroll;
}
.classBg .class .select a {
  padding: 1.5rem;
  border-radius: 1rem;
  font-size: 1.6rem;
  color: #c1c7d0;
}
.classBg .class .select button {
  font-size: 1.6rem;
  border-radius: 1rem;
  background: #f9f9f9;
  padding: 1.5rem;
  text-align: left;
  color: #c1c7d0;
}
.classBg2 {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  padding: 3rem 1.5rem;
  display: none;
  align-items: center;
  z-index: 9999;
}
.classBg2 .class {
  background: #fff;
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  height: 50%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
  position: relative;
}
.classBg2 .class h3 {
  font-size: 2rem;
  padding: 0 1rem;
  font-weight: 800;
}
.classBg2 .class input {
  background: #f9f9f9;
  border-radius: 1rem;
  padding: 1.5rem;
  font-size: 1.6rem;
}
.classBg2 .class input::placeholder {
  color: #c1c7d0;
}
.classBg2 .class button {
  border-radius: 1rem;
  background-color: #212a37;
  color: #fff;
  padding: 1.5rem 0;
  font-size: 1.8rem;
  position: absolute;
  bottom: 3rem;
  width: calc(100% - 3rem);
}

main {
  padding: 0 1.5rem 2rem;
  position: relative;
  min-height: calc(100% - 6rem);
}
main > h2 {
  display: flex;
  flex-flow: column nowrap;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.4;
  padding: 2rem 0;
}
main > h2 span {
  font-size: 1.6rem;
  color: #7a8799;
  margin-bottom: 0.5rem;
}
main .userInfo {
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
}
main .userInfo .school {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}
main .userInfo .school h3 {
  font-size: 1.6rem;
  color: #738194;
}
main .userInfo .school a {
  border-radius: 1rem;
  border: 1px solid #e2e9ef;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .userInfo .school a span {
  font-size: 1.6rem;
  color: #c0c6cf;
}
main .userInfo .school a img {
  width: 1.5rem;
}
main .userInfo .grade {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}
main .userInfo .grade h3 {
  font-size: 1.6rem;
  color: #738194;
}
main .userInfo .grade a {
  border-radius: 1rem;
  border: 1px solid #e2e9ef;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .userInfo .grade a span {
  font-size: 1.6rem;
  color: #c0c6cf;
}
main .userInfo .grade a img {
  width: 1.5rem;
}
main .userInfo .class {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}
main .userInfo .class h3 {
  font-size: 1.6rem;
  color: #738194;
}
main .userInfo .class a {
  border-radius: 1rem;
  border: 1px solid #e2e9ef;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .userInfo .class a span {
  font-size: 1.6rem;
  color: #c0c6cf;
}
main .userInfo .class a img {
  width: 1.5rem;
}
main > button {
  display: inline-block;
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: calc(100% - 3rem);
  font-size: 1.8rem;
  height: 5.5rem;
  border-radius: 5rem;
  background: linear-gradient(to right, #1e9ad3, #6040e2);
  color: #fff;
}
main .allergyWrap {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  padding: 2rem 0 4rem;
}
main .allergyWrap a {
  display: flex;
  align-items: center;
  border-radius: 5rem;
  background: #f9f9f9;
  padding: 1rem 1.5rem;
}
main .allergyWrap a.selected {
  background: #212a37;
}
main .allergyWrap a.selected h3 {
  color: #fff;
}
main .allergyWrap a.selected h3 span {
  color: #fff;
}
main .allergyWrap a img {
  width: 2rem;
  margin-right: 0.5rem;
}
main .allergyWrap a h3 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #717f92;
}
main .allergyWrap a h3 span {
  font-size: 1.4rem;
  color: #717f92;
}

/* 홈 */
main .profile {
  margin-bottom: 2rem;
  border-radius: 1rem;
  background-color: #f7fafc;
  background-image: url(../img/img-2.png);
  background-repeat: no-repeat;
  background-size: 8rem;
  background-position: right 1.5rem center;
  height: 10rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  justify-content: center;
  padding: 0 2rem;
}
main .profile h2 {
  font-size: 2rem;
  font-weight: 800;
}
main .profile p {
  font-size: 1.6rem;
  color: #768496;
}
main > .dday {
  padding: 2rem 0;
}
main > .dday h2 {
  margin-bottom: 3rem;
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main > .dday h2 a {
  width: 2rem;
}
main > .dday h2 a img {
  width: 100%;
}
main > .dday > a {
  width: 100%;
}
main > .dday > a img {
  width: 100%;
}
main .mealWrap {
  padding: 2rem 0;
}
main .mealWrap .category {
  display: flex;
  border-bottom: 1px solid #c5cbd3;
}
main .mealWrap .category a {
  padding: 1.5rem 0;
  font-size: 2rem;
  font-weight: 800;
  width: 30%;
  text-align: center;
  color: #c3c9d1;
  position: relative;
}
main .mealWrap .category a span {
  background: linear-gradient(to right, #1e9ad3, #6040e2);
  height: 0.25rem;
  width: 100%;
  position: absolute;
  bottom: -0.2rem;
  left: 0;
}
main .mealWrap .title {
  padding: 3rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
main .mealWrap .title h2 {
  font-size: 2rem;
  font-weight: 800;
}
.custom-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  right: 0 !important;
  left: unset !important;
  bottom: unset !important;
  width: max-content !important;
}
.custom-pagination .swiper-pagination-bullet {
  width: unset;
  height: unset;
  border-radius: 5rem;
  padding: 0.8rem 1.8rem;
  font-size: 1.6rem;
  background: #fff;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
  opacity: unset;
  color: #c3c9d1;
}
.custom-pagination .swiper-pagination-bullet-active {
  color: #3d79fc;
  border: 1px solid #1d9fd2;
}
main .mealWrap .title > a {
  width: 2rem;
}
main .mealWrap .title > a img {
  width: 100%;
}
main .mealWrap .mealSwiper {
  height: max-content;
  overflow: hidden;
}
main .mealWrap .mealSwiper .swiper-wrapper {
}
main .mealWrap .mealSwiper .swiper-wrapper .swiper-slide {
  border-radius: 1rem;
  background: #ebeef3;
  padding: 0.1rem;
  height: 25rem;
}
main .mealWrap .mealSwiper .swiper-wrapper .swiper-slide-active {
  background: linear-gradient(to right, #1e9ad3, #6040e2);
}
main .mealWrap .mealSwiper .swiper-wrapper .swiper-slide .slideWrap {
  background: #fff;
  padding: 2rem;
  height: 100%;
  border-radius: 1rem;
  position: relative;
}
main .mealWrap .mealSwiper .swiper-wrapper .swiper-slide .time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
main .mealWrap .mealSwiper .swiper-wrapper .swiper-slide .time h3 {
  font-size: 1.6rem;
  font-weight: 800;
}
main .mealWrap .mealSwiper .swiper-wrapper .swiper-slide .time p {
  font-size: 1.4rem;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  border: 1px solid #eaeef2;
  color: #7b8899;
}
main .mealWrap .mealSwiper .swiper-wrapper .swiper-slide .menu {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
main .mealWrap .mealSwiper .swiper-wrapper .swiper-slide .menu pre {
  font-size: 1.4rem;
  line-height: 1.4;
}
main .mealWrap .mealSwiper .swiper-wrapper .swiper-slide .menu pre span {
  font-size: 1.4rem;
  line-height: 1.4;
}
main .mealWrap .mealSwiper .swiper-wrapper .swiper-slide .menu p {
  font-size: 1.6rem;
  font-weight: 800;
  color: #3d79fc;
  text-align: right;
  position: absolute;
  bottom: 2rem;
  right: 2rem;
}
main .mealWrap .weekSwiper {
  height: max-content;
  overflow: hidden;
}
main .mealWrap .weekSwiper .swiper-wrapper {
}
main .mealWrap .weekSwiper .swiper-wrapper .swiper-slide {
  border-radius: 1rem;
  border: 1px solid #ebeef3;
  padding: 0.1rem;
  height: 25rem;
}
main .mealWrap .weekSwiper .swiper-wrapper .swiper-slide-active {
  background: linear-gradient(to right, #1e9ad3, #6040e2);
}
main .mealWrap .weekSwiper .swiper-wrapper .swiper-slide .slideWrap {
  background: #fff;
  padding: 2rem;
  height: 100%;
  border-radius: 1rem;
  position: relative;
}
main .mealWrap .weekSwiper .swiper-wrapper .swiper-slide .time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
main .mealWrap .weekSwiper .swiper-wrapper .swiper-slide .time h3 {
  font-size: 1.6rem;
  font-weight: 800;
}
main .mealWrap .weekSwiper .swiper-wrapper .swiper-slide .time p {
  font-size: 1.4rem;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  border: 1px solid #eaeef2;
  color: #7b8899;
}
main .mealWrap .weekSwiper .swiper-wrapper .swiper-slide .menu {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
main .mealWrap .weekSwiper .swiper-wrapper .swiper-slide .menu pre {
  font-size: 1.4rem;
  line-height: 1.4;
}
main .mealWrap .weekSwiper .swiper-wrapper .swiper-slide .menu pre span {
  font-size: 1.4rem;
  line-height: 1.4;
}
main .mealWrap .weekSwiper .swiper-wrapper .swiper-slide .menu p {
  font-size: 1.6rem;
  font-weight: 800;
  color: #3d79fc;
  text-align: right;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
}

/* 주간 */
main > p {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  line-height: 1.2;
  color: #c5cbd3;
}
main > p img {
  width: 2rem;
}
main .weekWrap {
  padding: 3rem 0;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  row-gap: 1.5rem;
}
main .weekWrap .week {
  width: calc(50% - 0.75rem);
  border-radius: 1rem;
  border: 1px solid #e8ecf1;
  padding: 1.5rem;
}
main .weekWrap .week .time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
main .weekWrap .week .time h3 {
  font-size: 1.6rem;
  color: #7b8899;
}
main .weekWrap .week .time p {
  font-size: 1.4rem;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  border: 1px solid #eaeef2;
  color: #7b8899;
}
main .weekWrap .week .menu {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
main .weekWrap .week .menu pre {
  font-size: 1.4rem;
  line-height: 1.4;
}
main .weekWrap .week .menu pre span {
  font-size: 1.4rem;
  line-height: 1.4;
}
main .weekWrap .week .menu p {
  font-size: 1.6rem;
  font-weight: 800;
  color: #3d79fc;
}
main .todayWrap {
}
main .todayWrap .today {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid #e8ecf1;
  padding: 1.5rem;
  margin-bottom: 4rem;
}
main .todayWrap .today .time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
main .todayWrap .today .time h3 {
  font-size: 1.6rem;
  color: #7b8899;
}
main .todayWrap .today .time button {
  width: 2rem;
}
main .todayWrap .today .time button img {
  width: 100%;
}
main .todayWrap .today .time p {
  font-size: 1.4rem;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  border: 1px solid #eaeef2;
  color: #7b8899;
}
main .todayWrap .today .menu {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
main .todayWrap .today .menu pre {
  font-size: 1.6rem;
  line-height: 1.4;
}
main .todayWrap .today .menu pre span {
  font-size: 1.6rem;
  line-height: 1.4;
  color: #6c7a8e;
}
main .todayWrap .today .menu p {
  font-size: 2rem;
  font-weight: 800;
  color: #3d79fc;
}
main #moreBtn {
  display: flex;
  flex-flow: column nowrap;
  gap: 1.5rem;
  border-radius: 1rem;
  background-color: #f2f6f5;
  background-image: url(../img/img-3.png);
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 6rem;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}
main #moreBtn em {
  font-size: 2rem;
  color: #3bdbed;
  font-family: "Nanum Pen Script", cursive;
}
main #moreBtn strong {
  font-size: 1.8rem;
  font-weight: 800;
}
main #moreBtn a {
  padding: 1rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 1rem;
  background: #3bdbed;
  width: max-content;
  font-size: 1.6rem;
}
main #moreBtn a img {
  width: 1.5rem;
}
main .moreWrap {
}
main .moreWrap .more {
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid #e6ebf0;
}
main .moreWrap .more pre {
  font-size: 1.6rem;
  line-height: 1.4;
  color: #7a8799;
}

/* 디데이 */
main .listWrap {
  display: flex;
  flex-flow: column nowrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
main .listWrap .list {
  border-radius: 1rem;
  border: 1px solid #e1e8ee;
  padding: 1.5rem;
}
main .listWrap a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .listWrap .list .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
main .listWrap .list .top h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
main .listWrap .list .top h3 img {
  width: 2rem;
}
main .listWrap .list .top h3 strong {
  font-size: 1.6rem;
  font-weight: 600;
}
main .listWrap .list .top h3 span {
  font-size: 1.4rem;
  color: #68778c;
}
main .listWrap .list .left h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
main .listWrap .list .left h3 img {
  width: 2rem;
}
main .listWrap .list .left h3 strong {
  font-size: 1.6rem;
  font-weight: 600;
}
main .listWrap .list .left h3 span {
  font-size: 1.4rem;
  color: #68778c;
}
main .listWrap .list .top .buttonWrap {
  display: flex;
  gap: 1rem;
}
main .listWrap .list .top .buttonWrap button {
  width: 2rem;
}
main .listWrap .list .top .buttonWrap button img {
  width: 100%;
}
main .listWrap .list .dday {
  font-size: 2rem;
  font-weight: 800;
  color: #3d79fc;
}
main .noData {
  height: calc(100% - 10rem);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
main .noData h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
main .noData p {
  font-size: 1.6rem;
  color: #c6ccd4;
  margin-bottom: 3rem;
}
main .noData a {
  display: inline-block;
  font-size: 1.6rem;
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to right, #1e9ad3, #6040e2);
}
main #ddayFrm {
}
main #ddayFrm .ddayName {
  padding: 2rem 0;
}
main #ddayFrm .ddayName h3 {
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
main #ddayFrm .ddayName h3 span {
  font-size: 1.6rem;
}
main #ddayFrm .ddayName input {
  padding: 1.5rem;
  font-size: 1.6rem;
  border-radius: 1rem;
  border: 1px solid #e8ecf1;
  width: 100%;
}
main #ddayFrm .ddayName input::placeholder {
  color: #c6ccd4;
}
main #ddayFrm .ddayDate {
  padding: 2rem 0;
}
main #ddayFrm .ddayDate h3 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
main #ddayFrm .ddayDate input {
  padding: 1.5rem;
  width: 100%;
  font-size: 1.6rem;
  border-radius: 1rem;
  border: 1px solid #e8ecf1;
}
main #ddayFrm .option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
}
main #ddayFrm .option h3 {
  font-size: 2rem;
  font-weight: 800;
}
main #ddayFrm .option .ballBg {
  width: 5.5rem;
  height: 3rem;
  background: #b5b9c1;
  border-radius: 5rem;
  position: relative;
  transition: 0.5s;
}
main #ddayFrm .option .ballBg .ball {
  transition: 0.5s;
  border-radius: 100%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.5rem;
  width: 2rem;
  height: 2rem;
}
main #ddayFrm .option .ballBg.active {
  background: #58bfd0;
}
main #ddayFrm .option .ballBg.active .ball {
  left: 3rem;
}
main #ddayFrm button {
  display: inline-block;
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: calc(100% - 3rem);
  font-size: 1.6rem;
  font-weight: 600;
  height: 5.5rem;
  border-radius: 5rem;
  background: #f9f9f9;
  color: #738194;
  transition: 0.5s;
}
main #ddayFrm button.active {
  color: #fff;
  background: linear-gradient(to right, #1e9ad3, #6040e2);
}