/*#headerAreaPc, #headerAreaTablet, #headerAreaMobile {display: none !important;}*/

.appointment_box {max-width: 376px; margin: 266px auto 164px;}
.appointment_box .inner .btn_box {display: none;}
.appointment_box .inner h3 {font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: #8556E3; 
    padding: 12px 2%; margin-bottom: 32px; border-bottom: 1px solid #8556E3;}
.appointment_box .inner form {padding: 0 5%;}
.appointment_box .inner form label {white-space: nowrap;}
.appointment_box .inner form ul li:not(:last-child) {margin-bottom: 12px;}
.appointment_box .inner form .input_box {margin-bottom: 64px;}
.appointment_box .inner form .input_box li label {display: block; font-weight: 500; font-size: 12px; line-height: 18px; color: #111; margin-bottom: 8px;}
.appointment_box .inner form .input_box li label .purple {font-weight: 400;}
.appointment_box .inner form .input_box li input {width: 100%; outline: none; border: 1px solid rgba(46, 21, 102, 0.15); border-radius: 4px; 
    padding: 12px; box-sizing: border-box; font-family: 'SpoqaHanSansNeo';}
.appointment_box .inner form .input_box li input::placeholder {font-size: 16px; line-height: 22px; letter-spacing: -0.02em; color: #8E8E8E;}

.appointment_box .inner form .agree_box input[type="checkbox"] {display: none;}
.appointment_box .inner form .agree_box input[type="checkbox"] + label {display: inline-block; width: 20px; height: 20px; line-height: 20px;
    border: 1px solid #C8C8C8; border-radius: 4px; vertical-align: middle; cursor: pointer; position: relative;}
.appointment_box .inner form .agree_box input[class="agree"] + label::after {content:''; width: 16px; height: 16px; 
    background: url(../images/icon_check.png) center no-repeat; background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.appointment_box .inner form .agree_box input.agree.on + label, 
.appointment_box .inner form .agree_box input.agree:checked + label {border-color: #8556E3; background: #8556E3;}
.appointment_box .inner form .agree_box input.agree.on + label::after, 
.appointment_box .inner form .agree_box input.agree:checked + label::after {content:''; width: 16px; height: 16px; 
    background: url(../images/icon_check_on.png) center no-repeat;  background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.appointment_box .inner form .agree_box label span {display: inline-block; padding-left: 30px; position: relative;
    font-weight: 300; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #616161;}
.appointment_box .inner form .agree_box label span::after {content:''; width: 20px; height: 20px; transition: all .2s;
    background: url(../images/icon_arrow_down.png) center no-repeat;  background-size: contain; position: absolute; right: -20px; top: 50%; margin-top: -10px;}
.appointment_box .inner form .agree_box label span.on::after {transform: rotate(540deg);}
.appointment_box .inner form .agree_box .terms {width: 100%; height: 100px; padding: 12px 5%; margin-top: 8px; box-sizing: border-box; background: #FFFFFF; 
    border: 1px solid #E0E0E0; border-radius: 8px; color: #6C6C6C; font-weight: 300; font-size: 12px; line-height: 15px; overflow-y: scroll;}
.appointment_box .inner form .agree_box button {display: block; width: 100%; padding: 20px 0; background: #8556E3; border-radius: 8px; border: none; cursor: pointer;
    font-weight: 700; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; color: #FFFFFF; text-align: center; font-family: 'SpoqaHanSansNeo';}


/* 스크롤바 커스텀 [s] */
.appointment_box .terms::-webkit-scrollbar {width: 20px; /* 스크롤바 너비 */}
.appointment_box .terms::-webkit-scrollbar-thumb {background: #D9D9D9; /* 스크롤바 색상 */ border-radius: 15px; /* 스크롤바 둥근 테두리 */ border: 7px solid #fff; /* 스크롤바 여백 */}
.appointment_box .terms::-webkit-scrollbar-track {background: #fff; /*스크롤바 뒷 배경 색상*/ border-radius: 8px;}
/* 스크롤바 커스텀 [e] */


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .appointment_box {width: 60%; margin: 193px auto 164px;}
    .appointment_box .inner .btn_box {display: block; margin-bottom: 28px;}
    .appointment_box .inner .btn_box .back_btn {display: block; width: 40px; height: 40px; background: url(../images/btn_back.png) center no-repeat; background-size: contain;}
    .appointment_box .inner .btn_box .close_btn {display: block; width: 40px; height: 40px; background: url(../images/btn_close.png) center no-repeat; background-size: contain; display: none;}
}


/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .appointment_box {max-width: unset; width: 100%; margin: 0 0 140px; padding-top: 32px;}
    .appointment_box .inner .btn_box {display: flex; justify-content: space-between; margin-bottom: 16px;}
    .appointment_box .inner .btn_box .close_btn {display: block;}
    .appointment_box .inner form .input_box {margin-bottom: 36px;}
}