@charset "UTF-8";

::placeholder {font-size: 1rem; color: var(--placeholder);}

.form-wrap {position: relative; max-width: 600px; padding: 68px 50px 80px; background-color:#FFFFFF; border-top: 8px solid var(--highlight); z-index: 100; margin: 0 auto;}

.form-wrap .close {position: absolute; top: 24px; right: 50px; width: 30px; height: 30px;}
.form-wrap .close::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 2px; height: 20px; background: var(--highlight); border-radius: 999px;}
.form-wrap .close::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 2px; height: 20px; background: var(--highlight); border-radius: 999px;}

.form-wrap .sub-tit {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; padding: 7px 20px; background: var(--tiffanyblue); border-radius: 4px; font-weight: 800; font-size: 1.25rem; color: #fff; text-align: center; margin-bottom: 16px;}

.form-wrap .book-area {display: grid; grid-template-columns: 100px 1fr; grid-template-rows: calc(1.05rem + 10px) auto; gap: 12px; align-items: start; margin-bottom: 20px;}
.form-wrap .book-area .thumb {display: block; position: relative; width: 100%; padding-bottom: calc(100% - 2px); border: 1px solid var(--border); border-radius: 6px; grid-row: 1 / span 2; overflow: hidden;}
.form-wrap .book-area .thumb img {display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; object-fit: cover;}
.form-wrap .book-area .thumb .lv {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; padding: 4px 10px; position: absolute; bottom: 6px; left: 6px; background: var(--highlight); color: #fff; font-size: 0.75rem; white-space: nowrap; border-radius: 4px;}
.form-wrap .book-area p {width: 100%; padding: 5px 12px; border-radius: 4px;}
.form-wrap .book-area .series {background: #F5F5F5; font-size: 0.875rem;}
.form-wrap .book-area .textbook-name {background: #e8f7f6; font-size: 1rem;}

.form-wrap .notice {text-align: right; font-weight: 700; font-size: 0.875rem; color: #eb2c57; margin-bottom: 6px;}

.form-wrap .ul-table {width: 100%;}
.form-wrap .ul-table .item {margin-bottom: 16px;}
.form-wrap .ul-table .item:last-child {margin-bottom: 0;}
.form-wrap .ul-table .td-email {margin-bottom: 10px;}
.form-wrap .ul-table .td-check {margin-bottom: 0;}

.form-wrap .ul-table .td-check .check-area {position: relative; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.form-wrap .ul-table .td-check .btn-popup {width: 100%; color: var(--darkgray); text-align: left;}
.form-wrap .ul-table .td-check label+* {margin-left: 10px;}

.form-wrap .btn-area {margin-top: 80px; text-align: center;}
.form-wrap .btn-submit {width: 100%; max-width: 300px; height: 50px; padding: 11px 0; border-radius: 999px; background: var(--highlight); font-weight: 700; font-size: 1.5rem; color: #fff; margin: 0 auto;}

.privacy {display: none; height: 240px; padding: 11px 17px; border: 1px solid var(--border); border-radius: 6px; margin-top: 20px; line-height: 1.5;}
.privacy .scroll {width: 100%; height: 100%; padding: 5px; padding-right: 10px; overflow-y: auto;}

.c-sections {margin-top: 20px;}
.c-sections:first-child {margin-top: 0;}
.privacy__noti {font-size: 1rem; margin-bottom: 10px;}
.privacy__heading {font-weight: 600; font-size: 0.875rem;}
.privacy__p, .c-list {margin-top: 10px;}
.c-list {margin-bottom: 10px;}
.c-list:last-child {margin-bottom: 0;}
.c-list__item {margin-top: 3px;}





@media screen and (max-width:1200px){

}

@media screen and (min-width:993px){
    .popup {max-width: 600px;}
}

@media screen and (max-width:992px){
    .popup {max-width: calc(100% - 100px);}

    .form-wrap {max-width: 580px; padding: 58px 40px 70px;}
    .form-wrap .close {top: 22px; right: 40px;}
    .form-wrap .ul-table .item {margin-bottom: 14px;}
    .form-wrap .btn-area {margin-top: 70px;}
    .form-wrap .btn-submit {height: auto;}
    .privacy {height: 224px;}
}

@media screen and (max-width:768px){
    .form-wrap {max-width: 560px; padding: 58px 30px 70px;}
    .form-wrap .close {top: 20px; right: 30px;}
}

@media screen and (max-width:480px){
    .popup {max-width: calc(100% - 32px);}

    .form-wrap {max-width: 532px; padding: 26px 16px 50px;}
    .form-wrap .close {top: 8px; right: 16px;}
    .form-wrap .book-area {grid-template-columns: 80px 1fr; gap: 10px;}
    .form-wrap .book-area p {padding: 5px 14px;}
    .form-wrap .ul-table .item {margin-bottom: 10px;}
    .form-wrap .btn-area {margin-top: 50px;}
    .privacy {padding: 8px 11px; height: 194px; margin-top: 12px;}
}