* {
    box-sizing: border-box;
}
main {
    padding: 7rem 1.5rem 12rem;
}
:root {
    --border-ra: 1rem;
    --mb: 5rem;
}

/* index */
#indexLoadImg {
    position: relative;
    width: 100%; min-height: 100vh;
    background-color: #658BFE;
}
#indexLoadImg .logo {
    display: block;
    height: 45rem;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

/* header */
header.main {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 6rem;
    background: #fff;
    z-index: 999;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
}
header.main a {
    display: block;
    height: 2.5rem;
}
header.main a img {
    display: block;
    height: 100%;
}
header.sub {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 6rem;
    background: #fff;
    z-index: 999;
    padding: 0 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
header.sub .back {
    position: absolute;
    display: block;
    width: 2rem; height: 2rem;
    background: url(../img/back.png) no-repeat center/contain;
    left: 1.5rem; top: 50%;
    transform: translateY(-50%);
}
header.sub h1 {
    font-size: 1.7rem;
    font-weight: 700;
}

/* home */
.home_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mb);
}
.home_top li {
    width: calc(50% - .7rem);
}
.home_top li a {
    background: #F7F7F7;
    display: block;
    padding: 2rem 1rem;
    border-radius: var(--border-ra);
}
.home_top li:first-child.on a {
    background: #7092FF;
}
.home_top li:last-child.on a {
    background: #596887;
}
.home_top li a span {
    font-size: 1.6rem;
    color: #73757A;
    display: block;
    text-align: center;
    margin-bottom: 2.5rem;
}
.home_top li:first-child.on a span {
    color: #fff;
}
.home_top li:last-child.on a span {
    color: #fff;
}
.home_top li a p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 2rem;
    word-break: break-all;
}
.home_top li a p b {
    font-size: 1.5rem;
    color: #fff;
}
.home_top li:first-child.on a p {
    color: #fff;
    font-size: 2.1rem;
    font-weight: 700;
}
.home_top li:last-child.on a p {
    gap: 0;
    color: #fff;
    font-size: 2.1rem;
    font-weight: 700;
}
.home_top li a p .plus_ico {
    display: block;
    width: 2.5rem; height: 2.5rem;
    background: url(../img/plus.png) no-repeat center/contain;
}
.home_tit {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}
.home_tit .ico {
    display: block;
    width: 2.4rem; height: 2.4rem;
    background: url(../img/main-icon-1.png) no-repeat center/contain;
}
.remain_pay_box.home {
    background: #EBF1FC;
    padding: 2rem 1.5rem;
    border-radius: var(--border-ra);
    margin-bottom: 2rem;
}
.remain_pay_box.home span {
    font-size: 1.7rem;
    font-weight: 600;
    display: block;
    margin-bottom: 3rem;
}
.remain_pay_box.home p {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    padding-bottom: 2rem;
}
.remain_pay_box.home strong {
    font-size: 2.5rem;
    font-weight: 800;
    color: #5D8CFF;
}
.home_pay {
    background: #F7F7F7;
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--border-ra);
    margin-bottom: 2rem;
}
.home_pay span {
    font-size: 1.7rem;
    font-weight: 600;
}
.home_pay p {
    font-size: 2rem;
    font-weight: 500;
}
.home_pay p strong {
    font-size: 2rem;
    font-weight: 600;
}
.home_plus {
    display: block;
    text-align: center;
    padding: 2rem 0;
    background: #EBF1FC;
    border-radius: var(--border-ra);
    color: #4B7DFC;
    font-weight: 600;
    font-size: 1.7rem;
    margin-bottom: var(--mb);
}
h2.home_tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
h2.home_tit .left {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 2.1rem;
    font-weight: 800;
}
h2.home_tit .left .ico {
    background-image: url(../img/sub-icon-on-1.png);
    width: 2.3rem; height: 2.3rem;
}
h2.home_tit a {
    font-size: 1.6rem;
    font-weight: 500;
}
.home_schedule_none {
    background: #F7F7F7;
    padding: 6rem 0;
    text-align: center;
    border-radius: var(--border-ra);
}
.home_schedule_none p {
    font-size: 1.6rem;
    color: #76787D;
}
.schedule_swiper {
    margin-bottom: 5rem;
}
.homeSwiper {
    height: auto;
}
.homeSwiper .swiper-slide {
    height: 100%;
    background: #F7F7F7;
    border-radius: var(--border-ra);
    padding: 1.5rem;
}



/* footer */
footer {
    position: fixed;
    left: 0; bottom: 0;
    background: #fff;
    height: 10rem; width: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
}
footer .footer_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; height: 8rem;
    background: #F7F7F7;
    border-radius: 4rem;
    padding: 0 1.5rem;
}
footer .footer_box li {
    width: calc(100% / 4);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.2rem 0;
}
footer .footer_box li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%; height: 100%;
}
footer .footer_box li a img {
    display: block;
    height: 3.2rem;
    object-fit: contain;
}
footer .footer_box li:nth-child(2) a img {
    height: 2.7rem;
    margin-top: .3rem;
}
footer .footer_box li a p {
    font-size: 1.5rem;
    color: #A9A9A9;
}
footer .footer_box li.on a p {
    color: #3F75FC;
    font-weight: 600;
}

/* check_list */
.check_tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mb);
}
.check_tit .left h1 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.check_tit .left p {
    font-size: 1.6rem;
    font-weight: 600;
}
.check_tit .left p span {
    font-size: 1.6rem;
    font-weight: 600;
    color: #6388FF;
}
.check_tit .submit {
    display: block;
    background: #7092FF;
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    padding: 1.2rem 1.7rem;
    border-radius: 2rem;
}
.check_box > .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-radius: var(--border-ra);
    border: .1rem solid #D6D6D6;
    margin-bottom: 1.5rem;
}
.check_box.open > .top,
.check_box > .top.on {
    background: #7092FF;
    border-color: #7092FF;
}
.check_box > .top .left {
    display: flex;
    align-items: center;
    gap: .7rem;
}
.check_box > .top .left .check {
    display: block;
    width: 2rem; height: 2rem;
    background: url(../img/check-off-2.png) no-repeat center/contain;
}
.check_box > .top .left .check.add {
    background-image: url(../img/check-on-1.png);
}
.check_box > .top .left p {
    font-size: 1.6rem;
}
.check_box.open > .top .left p,
.check_box > .top.on .left p {
    color: #fff;
}
.check_box > .top .arrow_ico {
    display: block;
    width: 1.4rem; height: 1.4rem;
    background: url(../img/arrow-5.png) no-repeat center/contain;
}
.check_box > .top.on .arrow_ico {
    background-image: url(../img/arrow-4.png);
}
.check_box.open > .top .arrow_ico {
    background-image: url(../img/arrow-3.png);
}
.check_box > .btm {
    display: none;
}
.check_box.open > .btm {
    display: block;
} 
.check_box > .btm li {
    background: #F7F7F7;
    margin-bottom: 1.5rem;
    border-radius: var(--border-ra);
    padding: 1.5rem;
}
.check_box > .btm li:first-child {
    margin-top: 1.5rem;
}
.check_box > .btm li .top {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.5rem;
}
.check_box > .btm li .top .check {
    display: block;
    width: 2rem; height: 2rem;
    background: url(../img/check-off-2.png) no-repeat center/contain;
}
.check_box > .btm li .top .check.add {
    background-image: url(../img/check-on-2.png);
}
.check_box > .btm li .top p {
    font-size: 1.6rem;
    font-weight: 700;
}
.check_box > .btm li .btm {
    font-size: 1.6rem;
    color: #65676D;
    line-height: 1.4;
}

/* wedding_date */
.info_title {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin: 1rem 0 1.5rem;
    letter-spacing: -1px;
}
input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    pointer-events: none;
}
.date-wrapper {
    position: relative;
    border: .1rem solid #CBCDD1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-ra);
    margin-bottom: var(--mb);
}
#userDate {
    padding: 2rem 0;
    font-size: 1.6rem;
    text-align: center;
    width: 75%;
}
#userDate:focus {
    outline: none;
}
.date_ico {
    position: absolute;
    background: url(../img/calander.png) no-repeat center/contain;
    width: 2rem; height: 2rem;
    top: 50%; left: 1.5rem;
    transform: translateY(-50%);
}
.custom-display {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    pointer-events: auto;
    color: #000; 
    transform: translate(-50%, -50%);
    font-size: 1.6rem;
}
.custom-display .digit {
    color: #B1B1B1;
    font-size: 1.6rem;
    display: inline-block;
    padding-right: .5rem;
}
.custom-display .day.digit,
.custom-display .month.digit {
    padding-left: 1.5rem;
}
#userDate {
    color: transparent;
    caret-color: transparent;
    background-color: transparent;
    position: relative;
    z-index: 2;
}
#userDate::selection {
    background: transparent;
}
#userDate::-webkit-datetime-edit,
#userDate::-webkit-datetime-edit-text,
#userDate::-webkit-datetime-edit-month-field,
#userDate::-webkit-datetime-edit-day-field,
#userDate::-webkit-datetime-edit-year-field {
    color: transparent;
    -webkit-text-fill-color: transparent;
}
#userDate::-webkit-datetime-edit-year-field:focus,
#userDate::-webkit-datetime-edit-month-field:focus,
    userDate::-webkit-datetime-edit-day-field:focus {
    background: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    outline: none;
}
#userDate::-webkit-clear-button,
#userDate::-webkit-inner-spin-button,
#userDate::-webkit-calendar-picker-indicator {
    display: none;
}
.sub_info_title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 1rem 0 1.5rem;
    letter-spacing: -1px;
}
.wedding_date_info {
    background: #F7F7F7;
    border-radius: var(--border-ra);
    padding: 2rem 1.5rem;
    font-size: 1.6rem;
    color: #65676D;
    line-height: 1.4;
}
.wedding_date_info b {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #5284FF;
    padding-bottom: 1rem;
}
.date_submit {
    display: block;
    width: 100%;
    margin-top: 4rem;
    background: #DBDBDB;
    color: #fff;
    padding: 2rem 0;
    text-align: center;
    border-radius: var(--border-ra);
    font-size: 1.7rem;
    font-weight: 600;
}
.date_submit.on {
    background-color: #5F8DFF;
}

/* wedding_pay */
.date-wrapper.pay {
    justify-content: space-between;
    padding: 0 1.5rem;
}
.date-wrapper.pay input {
    padding: 2rem 0;
    font-size: 1.8rem;
    font-weight: 500;
}
.date-wrapper.pay input::placeholder {
    color: #A5A5A5;
}
.date-wrapper.pay input:focus {
    outline: none;
}
.date-wrapper.pay span {
    font-size: 1.8rem;
    font-weight: 500;
}
.wedding_date_info.pay {
    background: transparent;
    padding: 0 0 4rem 0;
}
.wedding_chart {
    display: block;
    width: 100%;
}


/* add_sche */
.sche_title {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.full_input {
    display: block;
    width: 100%;
    padding: 1.7rem 1.5rem;
    border-radius: var(--border-ra);
    font-size: 1.6rem;
    font-weight: 500;
    border: .1rem solid #B9B9B9;
    margin-bottom: 4rem;
}
#sche_form input::placeholder {
    color: #BBBBBB;
    font-weight: 400;
}
#sche_form input:focus {
    outline: none;
}
.sche_date_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mb);
}
.sche_date_box label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: .1rem solid #B9B9B9;
    border-radius: var(--border-ra);
    width: 25%;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    font-weight: 500;
}
.sche_date_box label:first-child {
    width: 45%;
}
.sche_date_box label input {
    display: block;
    width: 90%;
    padding: 1.6rem 0;
    font-size: 1.6rem;
    font-weight: 500;
}
.sche_date_box label input::placeholder {
    font-weight: 400;
}
.sche_kind {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: var(--mb);
}
.sche_kind li {
    font-size: 1.6rem;
    color: #6B6D72;
    padding: 1.2rem 1.5rem;
    border-radius: 2rem;
    border: .1rem solid #B9B9B9;
}
.sche_kind li.on {
    background: #7092FF;
    color: #fff;
    border-color: #7092FF;
}
.sche_pay_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: .1rem solid #B9B9B9;
    border-radius: var(--border-ra);
    padding: 0 1.5rem;
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: var(--mb);
}
.sche_pay_box input {
    display: block;
    width: 90%;
    padding: 1.6rem 0;
    font-size: 1.6rem;
    font-weight: 500;
}
#sche_memo {
    resize: none;
    width: 100%; height: 20rem;
    border-color: #B9B9B9;
    border-radius: var(--border-ra);
    padding: 2rem 1.5rem;
    font-size: 1.6rem;
    font-weight: 500;
}
#sche_memo:focus {
    outline: none;
}
#sche_memo::placeholder {
    color: #BBBBBB;
    font-weight: 400;
}
.sche_submit {
    display: block;
    width: 100%;
    text-align: center;
    padding: 2rem 0;
    border-radius: var(--border-ra);
    font-size: 1.7rem;
    background: #DBDBDB;
    color: #fff;
    margin-top: var(--mb);
}
.sche_submit.on {
    background: #5F8DFF;
}

/* chart */
.chart_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mb);
}
.chart_top h1 {
    font-size: 1.9rem;
    font-weight: 700;
}
.chart_top p {
    font-size: 1.8rem;
    font-weight: 800;
    color: #5F8DFF;
}
.chart_top p span {
    font-size: 1.8rem;
    font-weight: 500;
}
.chart_box {
    padding: 0 6rem var(--mb);
}
.chart_status h2 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.status_list {
    padding: 1.7rem 1.5rem;
    border-radius: var(--border-ra);
    background: #F7F7F7;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.status_list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.status_list li .left {
    display: flex;
    align-items: center;
    gap: .7rem;
}
.status_list li .left .circle {
    display: block;
    width: .7rem; height: .7rem;
    background: #EF2546;
    border-radius: 50%;
}
.status_list li.bonsik .left .circle  {
    background: #ac29ff;
}
.status_list li.sdme .left .circle  {
    background: #00c956;
}
.status_list li.dress .left .circle  {
    background: #ff4aa0;
}
.status_list li.gift .left .circle  {
    background: #ff8b35;
}
.status_list li.honeymoon .left .circle  {
    background: #f4b10b;
}
.status_list li.furniture .left .circle  {
    background: #06a2f9;
}
.status_list li.electronics .left .circle  {
    background: #2f5bff;
}
.status_list li.living .left .circle  {
    background: #00c6ae;
}
.status_list li.other .left .circle  {
    background: #666666;
}
.status_list li .left p {
    font-size: 1.6rem;
    color: #EF2546;
    font-weight: 500;
}
.status_list li.bonsik .left p  {
    color: #ac29ff;
}
.status_list li.sdme .left p  {
    color: #00c956;
}
.status_list li.dress .left p  {
    color: #ff4aa0;
}
.status_list li.gift .left p  {
    color: #ff8b35;
}
.status_list li.honeymoon .left p  {
    color: #f4b10b;
}
.status_list li.furniture .left p  {
    color: #06a2f9;
}
.status_list li.electronics .left p  {
    color: #2f5bff;
}
.status_list li.living .left p  {
    color: #00c6ae;
}
.status_list li.other .left p  {
    color: #666666;
}
.status_list li .left .percent {
    font-size: 1.6rem;
    color: #909090;
}
.status_list li .pay {
    font-size: 1.8rem;
    font-weight: 800;
}
.status_list li .pay span {
    font-size: 1.8rem;
    font-weight: 500;
}