/* #content */
#content > h3 {font-size: 46px; line-height: 56px; letter-spacing: -0.02em; padding: 0 16.66%; color: #29203B; margin-bottom: 32px;}

.info_box {padding: 32px 16.66% 0;}
.info_box .inner {padding: 40px 15%; background: #F9F6FF; border: 1px solid #D4C4F5; border-radius: 16px;}
.info_box .inner h3 {display: none;}
.info_box .inner p {font-weight: 500; font-size: 16px; letter-spacing: -0.02em; color: #29203B; position: relative;}
.info_box .inner p::before {content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #29203B; 
    margin-right: 1%; vertical-align: middle; position: relative;}
.info_box .inner p:not(:last-of-type) {margin-bottom: 16px;}

.form_box {padding: 60px 16.66% 100px;}
.form_box .input_title {font-weight: 500; font-size: 16px; line-height: 18px; color: #111; margin-bottom: 12px;}
.form_box .input_title .purple {vertical-align: sub;}
.form_box .inner {padding: 0 15%;}
.form_box .inner > p.purple {font-weight: 300; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #8249FF; text-align: right;}
.form_box .inner form > ul > li:not(:last-child) {margin-bottom: 25px;}
.form_box .inner form input {width: 100%; font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; color: #8E8E8E; 
    padding: 12px 2%; box-sizing: border-box; border: 1px solid rgba(46, 21, 102, 0.15); border-radius: 4px; outline: none;}
.form_box .inner form input:focus {border: 1px solid #8556E3;}
.form_box .inner form input::placeholder {font-family: 'Spoqa Han Sans Neo'; font-weight: 400;}
.form_box .inner form select {appearance: none; outline: 0 none; background-color: #fff;
    background-image: url(../images/icon_arrow.png); background-position: right 2% center; background-repeat: no-repeat; background-size: 12px 8px;
    font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; color: #8E8E8E; box-sizing: border-box;
    padding: 12px 2%; border: 1px solid rgba(46, 21, 102, 0.15); border-radius: 4px;}
.form_box .inner form select:focus {border: 1px solid #8556E3;}
.form_box .inner form select option:disabled {background:#f3f3f3}
.form_box .inner form #request_date {width: 100%; color: #8556E3;}
.form_box .inner form .time_box ul {display: flex; justify-content: space-between; gap: 12px;}
.form_box .inner form .time_box ul li {width: 33%; white-space: nowrap;}
.form_box .inner form .time_box ul li select {width: 90%; padding: 12px 5%; background-position: right 5% center;}
.form_box .inner form .time_box ul li select[name="ampm"] {width: 100%;}
.form_box .inner form .time_box ul li span {font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; color: #111;}

.form_box .inner form .agree_box {position: relative; margin: 8px 0;}
.form_box .inner form .agree_box input[type="checkbox"] {width: 22px; height: 22px; border: 1px solid #fff; border-radius: 4px; padding: 0; margin: 0;  
    cursor: pointer; appearance: none; vertical-align: middle; position: relative;}
.form_box .inner form .agree_box input[type="checkbox"] + label {display: inline-block; width: 20px; height: 20px; border: 1px solid #C8C8C8; border-radius: 4px;
    cursor: pointer; vertical-align: middle; position: relative; top: 2px; left: 0; white-space: nowrap;}
.form_box .inner form .agree_box input[class="agree"] + label::after {content:''; width: 12px; height: 10px; 
    background-image: url(../images/icon_check.png); background-repeat: no-repeat; background-position: center; background-size: contain; 
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.form_box .inner form .agree_box input[class="agree"]:checked + label::after {background-image: url(../images/icon_check_on.png);}
.form_box .inner form .agree_box input[class="agree"].on + label, 
.form_box .inner form .agree_box input[class="agree"]:checked + label {border-color: #8556E3; background: #8556E3;}
.form_box .inner form .agree_box label span {display: inline-block; padding-left: 26px; font-size: 14px; letter-spacing: -0.02em; color: #616161; vertical-align: text-top;}
.form_box .inner form .terms {height: 140px; overflow-y: scroll; padding: 16px 3%; border: 1px solid #E0DCE8; border-radius: 8px; 
    font-weight: 300; font-size: 14px; line-height: 1.6em; letter-spacing: -1px; color: #6C6C6C; display: none;}

.form_box .inner form .visit {display: flex; justify-content: space-between; gap: 12px;}
.form_box .inner form .visit li {width: 50%; position: relative;}
.form_box .inner form .visit li input[type="radio"] {display: inline-block; width: auto; position: absolute; z-index: -1; top: 0; left: 0;}
.form_box .inner form .visit li input[type="radio"] + label {display: block; border: 2px solid #EFEFEF; border-radius: 5px; padding: 12px 2%; 
    font-weight: 500; font-size: 14px; line-height: 20px; color: #000; text-align: center; cursor: pointer;}
.form_box .inner form .visit li input[type="radio"]:checked + label {border: 2px solid #8556E3; color: #8556E3;}
.form_box .inner form textarea {width: 100%; height: 120px; padding: 12px 2%; box-sizing: border-box; overflow-y: scroll; 
    border: 1px solid rgba(46, 21, 102, 0.15); border-radius: 4px; outline: none; resize: none;
    font-family: 'Spoqa Han Sans Neo'; font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.02em;}
.form_box .inner form textarea::placeholder {color: #8E8E8E; font-family: 'Spoqa Han Sans Neo'; font-weight: 400;}
.form_box .inner form textarea:focus {border: 1px solid #8556E3;}

.form_box .inner form button {display: block; width: 100%; padding: 20px 0; border: none; background: #D4C4F5;
    border-radius: 8px; margin: 60px 0 12px; font-family: 'Spoqa Han Sans Neo';
    font-weight: 700; font-size: 16px; line-height: 22px; text-align: center; color: #fff; cursor: pointer;}
.form_box .inner form button:hover {background: #8556E3;}
.form_box .inner form .btn_box {display: flex; justify-content: space-between; gap: 12px;}
.form_box .inner form .btn_box li {width: 50%;}
.form_box .inner form .btn_box a {display: block; padding: 18px 0; border: 1px solid #8556E3; border-radius: 8px;
    text-align: center; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: #8556E3;}
.form_box .inner form .btn_box a span {display: inline-block; padding: 4px; border-radius: 50%; margin-left: 1%;
    font-size: 12px; color: #fff; background: #8556E3; vertical-align: text-top;}

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

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    #content > h3 {padding: 0 12%;}
    .info_box {padding: 32px 12% 0;}
    .form_box {padding: 60px 12% 100px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    #content > h3 {padding: 0 8%;}
    .info_box {padding: 32px 8% 0;}
    .info_box .inner {padding: 40px 7%;}
    .form_box {padding: 60px 8% 100px;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    #content > h3 {padding: 0 6%;}
    .info_box {padding: 32px 6% 0;}
    .form_box {padding: 60px 6% 100px;}
}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    #content > h3 {font-size: 28px; line-height: 36px; padding: 0 5%; margin-bottom: 0;}

    .info_box {padding: 28px 5% 40px;}
    .info_box .inner {padding: 40px 6%;}
    .info_box .inner p i {display: block;}

    .form_box {padding: 0 5% 100px;}
    .form_box .inner {padding: 0;}

    .form_box .inner form button {background-color: #8556E3;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #wrap { min-width: 375px; }
    /* content */
    #content > h3 {display: none;}

    .info_box {padding: 0;}
    .info_box .inner {padding: 40px 5%; border: none; border-radius: 0;}
    .info_box .inner h3 {display: block; font-weight: 700; font-size: 28px; line-height: 36px; letter-spacing: -0.02em; color: #29203B; margin-bottom: 20px;}
    .info_box .inner p i {display: inline;}

    .form_box {padding: 40px 5% 80px;}
    .form_box .inner form select {padding: 12px 5%; background-position: right 5% center;}
    .form_box .inner form .time_box ul li select {width: 80%; background-position: right 7% center;}
    .form_box .inner form .time_box ul li select[name="ampm"] {width: 95%; padding: 12px 7%;}
}

#direct_contact_info {
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#direct_contact_info strong {
    color:red;
    font-weight: bold;
}

@media screen and (max-width:768px) {
    #direct_contact_info p {
        padding-top:10px;
    }
}