@charset "utf-8";

/*-------------------------------------------------------------------
    @genaral
-------------------------------------------------------------------*/
/* grid */

/*-------------------------------------------------------------------
    @elements
-------------------------------------------------------------------*/
/* button */
.btn-wrap{}

.btn {display: flex; border: 0.1rem solid transparent; padding: 0 0; margin: 0 0; align-items: center; justify-content: center; border-radius: 50rem;}
.btn-ic{ border: none; padding: 0; margin: 0; display: block; text-indent: -9999px; background-size: 100%; background-repeat: no-repeat; background-position: center;}

.btn.xxs {height: 3.2rem; padding: 0 2rem; gap: 0 0.4rem; font-size: 1.3rem; font-weight: 600}
.btn.xs {height: 4rem; padding: 0 2rem; gap: 0 0.4rem; font-size: 1.2rem; font-weight: 600}
.btn.sm {height: 4.8rem; padding: 0 3.4rem; gap: 0 0.4rem; font-size: 1.6rem; font-weight: 600}
.btn.md {height: 5.2rem; padding: 0 3.4rem; gap: 0 0.4rem; font-size: 2rem; font-weight: 600}

.btn.square {border-radius: 0.4rem;}

.btn.fill-purple {background-color: #7950F2; border-color: #7950F2; color: #ffffff;}
.btn.fill-white {background-color: #ffffff; border-color: #ffffff; color: #7950F2;}

.btn.line-purple {background-color: #ffffff; border-color: #7950F2; color: #7950F2;}

.btn-close {background-image: url('../img/icon/ic_close.png'); width: 3.2rem; height: 3.2rem;}
.btn-menu {background-image: url('../img/icon/ic_menu.png'); width: 3.2rem; height: 3.2rem;}

/* icon */
i[class^='ic-'] {display: block; flex: none; background-repeat: no-repeat; background-position: center; background-size: 100%;}

.ic-guide {width: 1.6rem; height: 1.6rem; background-image: url('../img/icon/ic_guide.png');}
.ic-link {width: 1.6rem; height: 1.6rem; background-image: url('../img/icon/ic_link.png');}

/* bullet */

/* list */
.list-wrap{}

.list-wrap.v1{}

/* img list */
.img-list{}

.img-list.v1{}

/* form, input */
.inp-wrap{}
.inp-item{}

.inp-item input[type="text"]{}

.phone .inp-item{}

/* title */
.tit-wrap{}
.tit-wrap .tit{}

.tit.v1{}

/* text */
.txt-warning{}
.txt-comment{}

/* label */
.label.v1 {display: block; width: 100%; line-height: 2.5rem; text-align: center; color: #ffffff; border-radius: 2.5rem; font-weight: 500; font-size: 1.4rem;}
.label.v1.clr01 {background-color: #ADB5BD;}
.label.v1.clr02 {background-color: #4C6EF5;}
.label.v1.clr03 {background-color: #15AABF;}
.label.v1.clr04 {background-color: #82C91E;}
.label.v1.clr05 {background-color: #BE4BDB;}
.label.v1.clr06 {background-color: #FA5252;}
.label.v1.clr07 {background-color: #343A40;}

.label.v2 {display: block; width: 2rem; height: 2rem; background-repeat: no-repeat; background-position: center; background-size: 100%;}
.label.v2.clr01 {background-image: url('../img/icon/ic_label01.png');}
.label.v2.clr02 {background-image: url('../img/icon/ic_label02.png');}
.label.v2.clr03 {background-image: url('../img/icon/ic_label03.png');}
.label.v2.clr04 {background-image: url('../img/icon/ic_label04.png');}
.label.v2.clr05 {background-image: url('../img/icon/ic_label05.png');}
.label.v2.clr06 {background-image: url('../img/icon/ic_label06.png');}

/* table */
.tbl-wrap dl {display: flex; align-items: flex-start;}
.tbl-wrap dl + dl {border-top: 0.1rem solid #E9ECEF;}
.tbl-wrap dl:first-of-type {border-top: 0.1rem solid #E9ECEF;}
.tbl-wrap dl:last-of-type {border-bottom: 0.1rem solid #E9ECEF;}
.tbl-wrap dl dt {flex: none; padding: 3rem 2rem; font-weight: 500; font-size: 1.4rem; line-height: 1.358; color: #6741D9;}
.tbl-wrap dl dd {flex: 1 0; min-width: 0; padding: 3rem 2rem; font-size: 1.6rem; line-height: 1.1875;}

/* paging */
.paging{}
.paging ul{}
.paging ul li{}
.paging ul li a{}
.paging ul li.front{}
.paging ul li.prev{}
.paging ul li.next{}
.paging ul li.back{}

.pc-hide {display: none !important;}

.tab-wrap .tab-btn-area {display: flex; justify-content: center; gap: 1rem 1rem; flex-wrap: wrap;}
.tab-wrap .tab-btn-area .btn-tab {width: 14rem; height: 3.6rem; border: 0.1rem solid #6741D9; border-radius: 0.4rem; color: #6741D9; font-weight: 600; font-size: 1.4rem; font-weight: 600;}
.tab-wrap .tab-btn-area .btn-tab.on {background-color: #6741D9; color: #ffffff;}
.tab-wrap .tab-cont-area .tab-cont {padding-top: 8rem;}

.acc-wrap .acc-list {padding: 2rem 1rem; border-top: 0.1rem solid #E9ECEF;}
.acc-wrap .acc-list:last-child {border-bottom: 0.1rem solid #E9ECEF;}
.acc-wrap .acc-list .acc-tit {display: flex; padding: 1rem 1rem; align-items: center; gap: 0 1rem;}
.acc-wrap .acc-list .acc-tit::after {content: ""; flex: none; width: 2.4rem; height: 2.4rem; background: url('../img/faq/ic_acc_arrow.png') no-repeat center/100%;}
.acc-wrap .acc-list .acc-tit .tit {flex: 1 0;; min-width: 0; font-weight: 500; font-size: 2rem; line-height: 1.5; color: #868E96;}
.acc-wrap .acc-list.on .acc-tit::after {transform: rotate(180deg);}
.acc-wrap .acc-list .acc-cont {padding: 1rem 1rem; display: none;}
.acc-wrap .acc-list .acc-cont ul li {font-size: 1.4rem; line-height: 1.6; padding-left: 2rem; position: relative;}
.acc-wrap .acc-list .acc-cont ul li::before {content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background-color: #343A40; position: absolute; left: 0.8rem; top: 0.9rem;}
.acc-wrap .acc-list .acc-cont .img-area {display: flex; gap: 1rem 1rem; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;}
.acc-wrap .acc-list .acc-cont .img-area img {flex: none;}
.acc-wrap .acc-list .acc-cont img {max-width: 40rem;}
.acc-wrap .acc-list .acc-cont p {font-size: 1.4rem; line-height: 1.6;}
.acc-wrap .acc-list .acc-cont a {font-size: 1.4rem; line-height: 1.6; color: #6741D9;}
.acc-wrap .acc-list .acc-cont > * + * {margin-top: 1rem;}

/*-------------------------------------------------------------------
    @collections
-------------------------------------------------------------------*/
/* form group */
input[type="text"] {display: block; width: 100%; height: 4.6rem; border: 0.1rem solid #CED4DA; padding: 0 2rem; font-size: 1.4rem; line-height: 1.214;}
input[type="text"]:focus {outline: none;}

textarea {display: block; resize: none; width: 100%; border: 0.1rem solid #CED4DA; padding: 1.6rem 2rem; font-size: 1.4rem; line-height: 1.5; font-family: 'Pretendard';}
textarea:focus {outline: none;}
textarea:read-only {background-color: #F8F9FA; border-color: #F8F9FA;}

/* form mixins */
.form-group {display: flex; flex-wrap: wrap; gap: 4rem 4.5rem;}
.form-group .form {width: 100%;}
.form-group .form.half {width: calc(calc(100% - 4.5rem)/2);}

.form {display: flex; flex-direction: column; gap: 1rem 0;}
.form .form-tit .tit {font-weight: 500; font-size: 1.4rem; line-height: 1.215;}
.form .form-tit .tit .imp {color: #6741D9;}

.check {width: fit-content}
.check input[type="checkbox"] {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.check input[type="checkbox"] + label {display: block; position: relative; min-width: 1.6rem; min-height: 1.6rem; width: fit-content;}
.check input[type="checkbox"] + label::before {content: ""; width: 1.6rem; height: 1.6rem; background: url('../img/icon/ic_check_off.png') no-repeat center/100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.check input[type="checkbox"] + label p {padding-left: 2.4rem; font-size: 1.4rem; line-height: 1.5;}
.check input[type="checkbox"]:checked + label::before {background: url('../img/icon/ic_check_on.png') no-repeat center/100%;}

@media screen and (max-width: 1280px) {
    .btn.xs {height: 4.8rem; gap: 0 0.8rem; font-size: 1.6rem;}
    .btn.md {height: 4.8rem; gap: 0 0.8rem; font-size: 1.6rem;}

    .ic-guide {width: 2rem; height: 2rem;}
    .ic-link {width: 2rem; height: 2rem;}

    .tab-wrap .tab-cont-area .tab-cont {padding-top: 4rem;}

}

@media screen and (max-width: 880px) {
    /* table */
    .tbl-wrap dl {flex-wrap: wrap; padding: 2rem 2rem;}
    .tbl-wrap dl dt {padding: 0 0; font-size: 1.6rem; line-height: 1.0625; width: 100%;}
    .tbl-wrap dl dt + dd {margin-top: 1rem;}
    .tbl-wrap dl dd {padding: 0 0; font-size: 1.8rem; line-height: 1.5; width: 100%; flex: none;}

    .pc-hide {display: block !important;}

    .tab-wrap .tab-btn-area .btn-tab {width: calc(calc(100% - 1rem)/2)}

    .acc-wrap {width: calc(100% + 4rem); margin-left: -2rem;;}

    /*-------------------------------------------------------------------
        @collections
    -------------------------------------------------------------------*/
    /* form mixins */
    .form-group {gap: 2rem 4.5rem;}
    .form-group .form {width: 100%;}
    .form-group .form.half {width: 100%;}
    
    .check input[type="checkbox"] + label p {padding-left: 2.8rem; font-size: 1.6rem; }
}