@charset "UTF-8";

/* main */
#content{
    display: block;
    width:calc(100% - 32px);
    margin:0 auto;
    padding:53px 0 58px
}
#content > section{
    margin:0 auto 32px;
}
#content > section.main_banner_area{
    display: block;
    width:100%;
    margin-top:8px;
}
#content > section > h2{
    font-size:1.8rem;
    font-weight: 700;
    margin-bottom:16px;
}
#footer {
    display: block;
    width:calc(100% - 32px);
    margin:0 auto;
    padding:53px 0 58px
}
.banner{
    display: block;
    width:100%;
    margin:0 auto;
    background:#3584FF;
    border-radius:16px;
    padding:24px;
}
.banner > .title{
    font-size:2.4rem;
    font-weight:800;
    color:#fff;
    margin-bottom:4px;
}
.banner > .sub-title{
    color:#fff;
    font-size:1.8rem;
    margin-bottom:12px;
}
.banner > .banner_bottom{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
}
.banner > .banner_bottom > .cont{
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items:center;
    margin-bottom:8px;
}
.banner > .banner_bottom > .cont > img{
    display: block;
    width:39px;
}
.banner > .banner_bottom > .cont > .txt{
    font-size:1.2rem;
    color:#fff;
}
.banner > .banner_bottom > .btn.main_banner{
    display:block;
    width:100%;
    margin:0 auto;
    background:#fff;
    color:#0064FF;
    border-radius: 40px;
    font-size:1.6rem;
}
.ins_cont_01 .accordion-item{
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    width:100%;
    overflow-x: scroll;
    border-bottom:0;
}
.ins_cont_01 .accordion-item > h2{
    display: block;
    width:142px !important;
    margin-right:10px;
}
.ins_cont_01 .accordion-item > h2 > button.accordion-button{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width:142px;
    background:#0064FF;
    border-radius: 16px;
}
.ins_cont_01 .accordion-item > h2 > button.accordion-button.collapsed{
    background:#f8f9fa;
    border-radius: 16px;
}
.ins_cont_01 .accordion-item > h2 > button.accordion-button::after{
    display:none;
}
.user_info{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
}
.user_info_bx{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
    color:#fff;
}
.user_info_bx > .age,
.user_info_bx > .name{
    font-weight:bold;
    font-size:1.6rem;
}
button.accordion-button.collapsed > .user_info > .user_info_bx{
    color:#295053
}
.user_info_bx > .title{
    font-size:1.2rem;
    margin-top:8px;
}
.user_info_bx > .price{
    font-size:1.8rem;
    font-weight:900;
    color:#fff;
    margin-bottom:28px;
}

button.accordion-button.collapsed > .user_info > .user_info_bx > .price{
    color:#0064FF
}
.user_info > .img{
    align-self: flex-end;
    width:56px;
    position: relative;
    border-radius: 8px;
}
.user_info > .img::after{
    display: block;
    content:'';
    padding-bottom:100%;
}
.user_info > .img > img{
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    border-radius: 24%;
}
.accordion-collapse{
    display:block;
    width:100%;
    margin:0 auto;
}
.accordion-body.price_bx{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
    background:#3584FF;
    color:#fff;
    padding:24px;
    border-radius: 16px;
    margin-top:8px;
}
.accordion-body.price_bx > .title{
    font-weight:700;
    font-size:1.8rem;
    display: block;
    width:100%;
    text-align: center;
    margin:0 auto 16px;
}
.accordion-body.price_bx > .price_bx{
    display: block;
    width:100%;
    margin:0 auto;;
}
.accordion-body.price_bx > .price_bx > li{
    margin:0 auto 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width:100%;
    font-size:1.4rem;
}
.accordion-body.price_bx > .price_bx > li > .comp{
    font-weight:500;

    min-width: 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}
.accordion-body.price_bx > .price_bx > li > .name{
    font-weight:500;

    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}
.accordion-body.price_bx > .price_bx > li > .price{
    font-weight:700;
}
.join_rev_area{
    display: block;
    width:100%;
    margin:0 auto 16px;
}
.join_rev{
    border-radius: 16px;
    overflow: hidden;
    box-shadow: -2px -4px 8px 0px rgba(206, 212, 218, 0.40), 2px 4px 8px 0px rgba(206, 212, 218, 0.40);
    margin-bottom:8px;
}
.join_rev:last-child{
    margin-bottom:0;
}
.join_rev > a{
    display: block;
    width: 100%;
    background:#fff;
    padding:24px;
}
.join_rev > a > .title{
    display: block;
    width:100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    font-size:1.8rem;
    font-weight: 700;
    margin-bottom:2px;
}
.join_rev > a > .star_rate{
    margin-bottom:16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}
.join_rev > a > .star_rate > .rate > svg{
    fill:#DEE2E6;
    margin-right:4px;
}
.join_rev > a > .star_rate > .rate.on > svg{
    fill:#E03131;
}
.join_rev > a > .rev_txt{
    font-size:1.6rem;
    font-weight: 300;
}
.btn.more{
    display: block;
    width:100%;
    border-radius: 4px;
    padding:12px 0;
    background:#f1f3f5;
    color:#868e96;
    text-align: center;
    font-size:1.4rem;
}
.btn.more > i{
    margin-left:4px;
}
.promo_area{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width:100%;
    margin:0 auto;
}
.promo_area > li{
    display:block;
    width:100%;
    margin-bottom:8px;
}
.promo_area > li:last-child{
    margin-bottom:0;
}
.promo_area > li > a{
    display: block;
    width:100%;
}
.promo_area > li > a > img{
    display: block;
    width:100%;
}
.grt_lst{
    display: block;
    border-radius: 16px;
    box-shadow: -2px -4px 8px 0px rgba(206, 212, 218, 0.40), 2px 4px 8px 0px rgba(206, 212, 218, 0.40);
    padding:24px;
}
.ins_cont_04 .accordion-item{
    border-bottom:1px solid #DEE2E6;
}
.ins_cont_04 .accordion-item > h2 > button.accordion-button{
    background:#fff;
    font-size:1.8rem;
    color:#0064FF;
    font-weight:700;
}
.ins_cont_04 .accordion-item > h2 > button.accordion-button > img{
    display:block;
    width:24px;
    margin-right:16px;
}
.ins_cont_04 .accordion-item .accordion-collapse{
    background:#F8F9FA;
    padding:16px 4px;
    margin-bottom:8px;
}
.ins_cont_04 .accordion-item > h2 > button.accordion-button:not(.collapsed){
    box-shadow: none;
}
.notice_must{
    margin-bottom:80px;
}
.notice_must > a{
    padding:16px 48px;
    border-radius: 8px;
    background:#0064FF;
    color:#fff;
    font-size:1.8rem;
    width:auto;
    font-weight: 700;
}


@media (min-width:768px){
    body{
        font-size:1.8rem;
    }
    #content{
        padding:82px 0 0;
        max-width:1024px;
    }
    #content > section{
        margin-bottom:72px;
    }
    #content > section.main_banner_area{
        margin-top: 32px;
    }
    .banner > .banner_bottom{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .banner > .banner_bottom > .btn.main_banner{
        width:auto;
        padding:16px 87px;
        margin:0;
        font-size:2rem;
        line-height:1em;
    }
    .banner > .title{
        font-size:3.2rem;
        margin-bottom:16px;
    }
    .banner > .banner_bottom > .cont > .txt{
        font-size:2.4rem;
        margin:0;
    }
    .banner > .banner_bottom > .cont{
        margin-bottom:0;
    }
    .banner > .sub-title{
        font-size: 2.6rem;
        margin-bottom: 80px;
    }
    .banner > .banner_bottom > .cont > img{
        width:72px;
    }
    #content > section > h2{
        font-size:2.4rem;
        margin-bottom:20px;
    }
    .ins_cont_01 > .accordion > .accordion{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        width:100%;
    }
    .ins_cont_01 > .accordion > .accordion > .accordion-item{
        width:49%;
    }
    .ins_cont_01 .accordion-item{
        flex-wrap: wrap;
        overflow-x: initial;
    }
    .ins_cont_01 .accordion-item > h2{
        width:49% !important;
    }
    .ins_cont_01 .accordion-item > h2:nth-child(even){
        margin-right:0;
    }
    .ins_cont_01 .accordion-item > h2 > button.accordion-button{
        width:100%;
    }
    .ins_cont_01 .accordion-item > h2 > button.accordion-button{
        padding:24px;
        margin-bottom:8px;
    }
    .accordion-body.price_bx{
        height:100%;
        margin-top:0;
        background:#F8F9FA;
    }
    .user_info{
        flex-direction: row;
        justify-content: space-between;align-items: flex-end;
    }
    .user_info_bx{
        width:calc(100% - 56px);
        flex-direction: row;
        justify-content: flex-start;
        align-items:center;
        flex-wrap: wrap;
    }
    .user_info_bx > .title{
        margin-top:56px;
        width:100%;
    }
    .user_info_bx > .price{
        margin-bottom:0;
        width:100%;
        font-size:2rem;
    }
    .accordion-body.price_bx > .title{
        color: #0064Ff;
        text-align:left;
    }
    .accordion-body.price_bx > .price_bx{
        background: #DCE0E7;
        padding:24px 16px;
        border-radius:12px;
    }
    .accordion-body.price_bx > .price_bx > li{
        color: #495057;
        line-height: 1em;
        margin-bottom:16px;
    }
    .accordion-body.price_bx > .price_bx > li:last-child{
        margin-bottom:0;
    }
    .join_rev_area{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
    }
    .join_rev{
        width:24%;
        margin-right:1.333%;
    }
    .join_rev:last-child{
        margin-right:0;
    }
    .join_rev > a > .rev_txt{
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }



/*프로모션*/
    .promo_area{
        flex-direction: row;justify-content: space-between;align-items: center;
    }
    .promo_area > li{
        width:32%;
    }
}

/* 모달 */
.notice .modal-body{
    height:72vh;
    overflow-y: scroll;
}
.modal-content{
    margin-top:80px;
}
.modal .modal-header{
    background:#0064Ff;
    color:#fff;
    font-weight: 700;

}
.ins_form .modal-header > h1{
    font-size:2rem !important;
    font-weight:800;
    letter-spacing: 0.1px;
}
.ins_form .modal-header > .btn-close{
    --bs-btn-close-color:#fff;
    --bs-btn-close-bg:none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.ins_personal_form{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
}
.ins_personal_form > div{
    width:100%;
}
.ins_personal_form > div > input{
    padding:8px 12px;
    font-size:1.4rem;
    line-height:1.2em;
    border-radius: 8px;
    border:1px solid #DEE2E6;
    width:100%;
}
input[type="number"]::-webkit-inner-spin-button{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.ins_bx{
    display:block;
    width:100%;
    margin-bottom:8px;
}
.input_row_bx{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width:100%;
    margin-bottom:8px;
}
.input_row_bx input[type="text"],
.input_row_bx input[type="number"]{
    width:calc(100% - 86px);
}
.ins_personal_form input[type="button"],
.input_row_bx input[type="button"],
.input_row_bx input[type="radio"]{
    display:none;
}
.input_row_bx input[type="radio"] + label{
    background:#fff;
    color:#495057;
    width:37px;
    text-align: center;
    border:1px solid #DEE2E6;
    border-radius: 8px;;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: 1em;
    font-size:1.4rem;
}
.input_row_bx input[type="radio"]:checked + label{
    background:#0064FF;
    color:#fff;
    border:1px solid #0064FF
}
.sms_btn{
    width:73px;
    border-radius: 8px;
    background:#0064FF;
    color:#fff;
    text-align:center;
    font-size:1.4rem;
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
}
.ins_personal_form > .btn_big_blue{
    background:#0064Ff;
    color:#fff;
    font-weight:800;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size:1.4rem;
    padding:16px 24px;
    margin:16px auto;
    line-height:1em;
    border-radius: 32px;
}
.modal-body > pre{
    white-space: pre-line;
    word-break: keep-all;
    font-family: 'SUIT';
    font-size:1.4rem;
    line-height:1.6em;
}
.agree_bx{
    display: block;
    width:100%;
    font-size:1.4rem;
    line-height: 1em;
}
.agree_wrap{
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width:100%;
    margin-bottom:8px;
}
.agree_wrap:last-child{
    margin-bottom:0;
}
.agree_wrap > label{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width:calc(100% - 12px);
    padding-left:4px;
}

@media (min-width:768px){

    #user-info-name{
        width: calc(100% - 300px) !important;
    }
    .user-info-form-group label {
        margin-left: 8px;
        width: 142px !important;
    }
}