@charset "utf-8";

/*
 * File       : reserve.css
 * Author     : SMART GEO
 * Guideline  : -
 * Update : 2022-01-21
 *
 * Dependency : 의료진상담 스타일
 *
 * SUMMARY:
 * 01) 전역 스타일
 * 02) 검색바 스타일
 * 03) 검색아이콘 스타일
 * 04) 내부버튼 스타일
 * 05) 리스트 스타일 및 애니메이션
 * 06) 리스트내부쓰기기능 스타일
 * 07) 페이징 스타일
 * 08) 커스텀셀렉트박스 스타일
 * 09) 비밀번호알림창 스타일
 * 10) 모달뷰 스타일 및 애니메이션
 * 11) 모달뷰답변관련 스타일
 * 12) 모달상담하기 스타일 및 애니메이션
 * 13) 모달전화하기 스타일 및 애니메이션
 * 14) 모바일 전화상담 스타일
 * 15) 파일첨부 박스 및 리스트 스타일
 */

/* **************************************** *
 * 01) 전역 스타일
 * **************************************** */

.notiBox {box-sizing: border-box; width: 25%; float: left}
.notiBox .box {box-sizing: border-box; border: 1px solid #eee; margin: 10px}
.notiBox .box:hover {border: 1px solid #333}
.notiBox .box:hover h2 a {color: #1a829c; font-weight: bold !important;}
.notiBox .cont {padding: 15px 30px}
.notiBox .cont a {cursor: pointer}
.notiBox .cont h2 {display: block; margin: 5px 0 0; line-height: 1.7em; height: 80px}
.notiBox .cont h2 a {font-size:20px; color: #333; font-weight: 500}
.notiBox .cont .name {color: #1E5290; font-size: 14px; font-weight: 500}

.btn_search {display: inline-block; text-align: center; font-size: 14px; min-width: 60px; height: 34px; line-height: 34px; border-color: #113a6b; background-color: #113a6b; color: #fff;}
.paging{padding:40px 0 30px;text-align:center;}
.paging span{display:inline-block; height:20px;margin:0 8px;text-align:center;line-height:20px; vertical-align: top}
.paging span a:link, .paging span a:visited{color:#777;font-size:13px;}
.paging span.on{}
.paging span.on a{color:#113a6b;font-weight:bold;}
.paging .pre{margin:0 9px 0 3px;}
.paging .next{margin:0 3px 0 12px;}

body{
    background:#f5f5f5;
}
#page_top .title_first{
    margin: 50px 0 0;
}

.chk_wrap {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}
.chk_content {
    position: absolute;
    background-color: #fefefe;
    width: 25%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding-bottom: 25px;
}
.chk_close {
    position: absolute;
    right: 20px;
    top: 24px;
    font-size: 35px;
    font-weight: 700;
    z-index: 100;
    color: #ffffff;
    cursor: pointer;
}
.chk_content .chk_input {
    width: 100%;
    padding: 20px;
    text-align: center;
}
.chk_content .chk_input input {
    padding: 5px;
    width: 90%;
}

/* **************************************** *
 * 02) 검색바 스타일
 * **************************************** */
.search_bar {
 display: inline-block;
 width: auto;
 border: 1px solid #eeeeee;
 background-color: #ffffff;
 padding: 10px 0;
 margin-right: 20px;
}
.search_bar select {
    position: relative;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 16px;
    padding-left: 16px;
    padding-right: 40px;
    margin-right: 10px;
    color: #000000;
    font-weight: 500;
    font-family: 'NanumSquare';
}
.search_bar .division_line {
    display: inline-block;
    position: relative;
    top: 4px;
    width: 1px;
    height: 16px;
    margin-right: 10px;
    background-color: #dddddd;
}
.search_bar .search_word {
    position: relative;
    top: -2px;
    border: none;
    outline: none;
    color: #000000;
    font-size: 18px;
}
.search_bar .search_btn {
    border: none;
    outline: none;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("https://cheongmac.blob.core.windows.net/btn/btn_reserve_search.svg") no-repeat center center/cover;
    margin-right: 16px;
}

@media screen and (max-width:1140px){
    .search_bar {
        width: calc(100% - 20px);
        margin: 10px;
    }
    .search_bar select {
        width: 25%;
        padding: 0 0 0 5px;
        font-size: 14px;
    }
    .search_bar .search_word {
        width: 50%;
    }
    .search_bar .search_btn {
        margin: 5px 10px 0 0;
        float: right;
    }
    .counseling_search_result {
        margin: 20px 10px;
        font-size: 14px;
        float: left;
    }
}

/* **************************************** *
* 03) 검색아이콘 스타일
* **************************************** */
.search_check_result {
    margin: 16px 0 30px;
    font-size: 18px;
    color: #393939;
    font-family: 'Noto Sans KR';
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
}
.search_check_result.on {
    animation: flipInX 1s;
}
.no_search{
    width: 100%;
    height: 150px;
    line-height: 150px;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    color: black;
}
@media screen and (max-width:1140px) {
    .search_check_result {
        justify-content: center;
    }
}

/* **************************************** *
* 04) 내부버튼 스타일
* **************************************** */
 .counsel_btn {
     display: inline-flex;
     padding: 10px 40px 10px 20px;
     cursor: pointer;
     font-size: 16px;
     background-color: #2A3760;
     margin: 10px;
     border: unset;
     font-family: 'Pretendard';
     font-style: normal;
     font-weight: 400;
     width: 146px;
     height: 44px;
     align-items: center;
     justify-content: center;
 }

.counsel_btn a {
    position: relative;
    display: inline-block;
    color: #ffffff;
}

.counsel_btn a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 80px;
    width: 20px;
    height: 20px;
    background: url("https://cheongmac.blob.core.windows.net/btn/btn_reserve_pencil.svg") no-repeat center center/cover;
}

.counsel_btn.type2{
    margin: 10px 10px 10px 0;
    background-color: transparent;
    border: 1px solid #2A3760;
}

.counsel_btn.type2 a {
    color: #2A3760;
}

.counsel_btn.type2 a::after {
    background: url("https://cheongmac.blob.core.windows.net/btn/btn_reserve_tel.svg") no-repeat center center/cover;
    left: 60px;
}

@media screen and (max-width:1140px){
    .counsel_btn {
        padding: 6px 42px 6px 14px;
        float: right;
        display: none;
    }
}

/* **************************************** *
* 05) 리스트 스타일 및 애니메이션
* **************************************** */
@keyframes fadeInUp_1 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInUp_2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    10% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInUp_3 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    20% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInUp_4 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    30% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}@keyframes fadeInUp_5 {
     0% {
         opacity: 0;
         -webkit-transform: translate3d(0,100%,0);
         transform: translate3d(0,100%,0);
     }
     40% {
         opacity: 0;
         -webkit-transform: translate3d(0,100%,0);
         transform: translate3d(0,100%,0);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateZ(0);
         transform: translateZ(0);
     }
 }
@keyframes fadeInUp_6 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInUp_7 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    60% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInUp_8 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    70% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.counseling .div_th{
    border: 0;
    display: flex;
    padding: 18px 50px 18px 50px;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.counseling .div_th li{
    font-family: 'NanumSquare';
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    color: #333333;
    flex: 1;
}
.counseling .div_th li.cont{
    flex: 6;
}
.counseling .section_list .notiBox{
    clear: both;
    width: calc(100% - 20px);
    float: none;
    padding: 0;
    margin-bottom: 10px;
}
.counseling .notiBox{
    animation: fadeInUp_1 0.4s ease-out;
}
.counseling .notiBox:nth-child(8n - 6){
    animation: fadeInUp_2 0.5s ease-out;
}
.counseling .notiBox:nth-child(8n - 5){
    animation: fadeInUp_3 0.6s ease-out;
}
.counseling .notiBox:nth-child(8n - 4){
    animation: fadeInUp_4 0.7s ease-out;
}
.counseling .notiBox:nth-child(8n - 3){
    animation: fadeInUp_5 0.8s ease-out;
}
.counseling .notiBox:nth-child(8n - 2){
    animation: fadeInUp_6 0.9s ease-out;
}
.counseling .notiBox:nth-child(8n - 1){
    animation: fadeInUp_7 1.0s ease-out;
}
.counseling .notiBox:nth-child(8n){
    animation: fadeInUp_8 1.1s ease-out;
}
.counseling .section_list .notiBox .box{
    background: #FFFFFF;
    border-radius: 16px;
    border:0;
    box-sizing: border-box;
    margin: 0;
}
.counseling .section_list .notiBox .box:hover{
    box-shadow: 10px 10px 30px rgba(161, 161, 161, 0.4), -10px -10px 30px #FFFFFF;
    cursor: pointer;
}
.counseling .section_list .notiBox .box:hover h2 a {
    color: #F26F3D;
}
.counseling .section_list .notiBox .cont{
    position: relative;
    padding: 18px 50px 18px 50px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.counseling .section_list .notiBox .cont h2{
    flex: 6;
    float: left;
    display: block;
    width: 70%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    word-break: break-all;
}
.counseling .notiBox .cont h2 a{
    font-family: 'NanumSquare';
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    vertical-align: top;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: #333333;
}
.counseling .section_list .notiBox .cont span{
    flex:1;
    font-family: 'NanumSquare';
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #8D8D8D;
}
.counseling .section_list .notiBox .cont .name {
    letter-spacing: 1.5px;
    font-size: 16px;
    color: #ee7323;
}
.counseling .doctors_answer {
    position: relative;
    z-index: 1;
    width: 74px;
    height: 100%;
    border-radius: 15px;
    font-family: 'NanumSquare';
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #FFFFFF;
    padding: 5px 10px;
    margin: 0 auto;
}
.counseling .doctors_answer.wait {
    background-color: #B2B2B2;
}
.counseling .doctors_answer.complete {
    background-color: #F28037;
}
.counseling .section_list .notiBox .cont img {
    vertical-align: middle;
    width: 14px;
    height: 14px;
    position: relative;
    top: -1px;
    margin: 0 0 0 6px ;
}
.counseling .section_list .notiBox .cont img:nth-child(2){
    margin: 0;
}
.counseling .ic_hidden {
    width: 16px;
    height: 13px;
    background: url('https://cheongmac.blob.core.windows.net/common/ic_reserve_hidden.svg') center center/cover no-repeat;
    position: relative;
    padding: 0;
    display: inline-block;
    top: 2px;
    margin: 0 1px;
}
.counseling .section_list .notiBox .cont .bar{
    display: none;
}

@media screen and (max-width:1140px){
    .counseling .div_th{
        display: none;
    }
    .counseling .section_list .notiBox{
        margin: 10px;
    }
    .counseling .section_list .notiBox .cont{
        padding: 20px;
    }
    .counseling .section_list .notiBox .cont h2 a{
        font-size: 14px;
    }
    .counseling .section_list .notiBox .cont h2{
        flex:unset;
        width: calc(100% - 70px);
        margin: 0 0 14px 0;
    }
    .counseling .section_list .notiBox .cont span{
        font-size: 14px;
        margin: 0;
        padding: 0;
        line-height: 14px;
    }
    .counseling .section_list .notiBox .cont .answer{
        margin: 0 0 14px 0;
    }
    .counseling .doctors_answer {
        padding: 2px 10px;
        font-size: 14px;
        width: 60px;
        border-radius: 5px;
    }
    .counseling .section_list .notiBox .cont .name{
        font-size: 14px;
        text-align: left;
        flex:2;
    }
    .counseling .section_list .notiBox .cont .date{
        text-align: right;
        flex: unset;
    }
    .counseling .section_list .notiBox .cont .bar{
        margin: 0;
        display: block;
        width: 20px;
        flex: unset;
    }
    .counseling .section_list .notiBox .cont .hit{
        text-align: left;
        flex: unset;
    }
    .counseling .section_list .notiBox .cont .date:after {
        content: "";
        display: none;
    }
    .counseling .section_list .notiBox .cont .hit:before{
        content: '조회수: ';
    }
    .counseling .section_list .notiBox .cont img {
        margin: 0 4px 0 0;
    }
    .counseling .section_list .notiBox .cont img:nth-child(2) {
        margin: 0 4px 0 0;
    }
}

@media screen and (max-width:768px){
    .counseling .section_list .notiBox .cont .name:after,
    .counseling .section_list .notiBox .cont .reply:after,
    .counseling .section_list .notiBox .cont .hit:after{
        display: none;
    }
}
@media screen and (max-width:348px){
    .counseling .section_list .notiBox .cont .name{
        flex: 1;
    }
}

/* **************************************** *
* 06) 리스트내부쓰기기능 스타일
* **************************************** */
#counseling{
    display: none;
}
#counselingLine{
     display: none;
}

@media screen and (max-width: 1140px){
    #counselingLine{
        width: calc(100% - 20px);
        height: 1px;
        margin: 0 auto;
        background: #D2D2D2;
        display: block;
    }
    #counseling{
        display: block;
        background: white;
        width: calc(100% - 20px);
        margin: 0 auto 40px;
        padding: 40px;
    }
    #counseling .modal_new_title{
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 500;
        line-height: 40px;
        font-size: 24px;
        text-align: left;
        color: #000000;
        margin:  12px 0 4px 0;
    }
    #counseling .modal_new_title_wrap{
        padding: 0 0 10px;
    }
    #counseling .modal_new_content{
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 23px;
        color: #000000;
    }
    #counseling .modal_content_wrap{
        margin-top: 24px;
    }
    #counseling p#privacy_chk{
        text-align: center;
        padding: 10px 0 26px;
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
        color: #000000;
    }
    #counseling p#privacy_chk input[type="checkbox"] {
        position: relative;
        width: 24px;
        height: 24px;
        top: -2px;
        -webkit-appearance: none;
        cursor: pointer;
        background: white;
        border-radius: 40px;
        outline: none !important;
        margin-right: 6px;
        text-align: center;
    }
    #counseling p#privacy_chk input[type="checkbox"]:checked{
        background: #617DC5;
        border: none;
        transition: background 1s;
    }
    #counseling input[type="checkbox"]:checked::before{
        content: '';
        background: url("https://cheongmac.blob.core.windows.net/common/ic_reserve_check_on.svg") center center/cover no-repeat;
        width: 8px;
        height: 6px;
        position: absolute;
        top: 8px;
        left: 8px;
    }
    #counseling p#privacy_chk a {
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: bold;
        font-size: 18px;
        line-height: 26px;
        color: #F8642A;
        margin-left: 8px;
    }
    #counseling #counseling{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: flex-start;
    }
    /* S -- 2022.12.29 진료 문의 제거하면서 추가 */
    #counseling #exception_telephone { display: inline-block; width: 100%; }
    #counseling #exception_telephone .full { margin: 0; padding: 0; height: unset !important; }
    #counseling #exception_telephone .call { display: flex; flex-direction: row !important; justify-content: space-between; align-items: center; background-color: #F3f3f3; border: 1px solid #EEEEEE; border-radius: 4px; }
    #counseling #exception_telephone .call h3 { padding-left: 12px; font-size: 13px; color: #F64F19; font-weight: bold; }
    #counseling #exception_telephone .call span { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; background-color: #2A3760; border-radius: 4px; }
    #counseling #exception_telephone .call span img { position: relative; top: -0.5px; right: -0.5px; width: 16px; aspect-ratio: 1 / 1; }
    /* E -- 2022.12.29 진료 문의 제거하면서 추가 */
    #counseling .full{
        width: 100%;
        margin-bottom: 4px;
        display: inline-flex;
        flex-direction: row;
        position: relative;
    }
    #counseling .full:nth-child(1) {
        height: 40px;
    }
    #counseling .select_arrow {
        position: absolute;
        left: calc(100% - 44px);
        width: 44px;
        height: 40px;
        border: 1px solid #617DC5;
        z-index: 2;
        background: white;
        cursor: pointer;
    }
    #counseling .select_arrow:before {
        content: '';
        position: absolute;
        top: 12px;
        right: 16px;
        width: 10px;
        height: 10px;
        border: 2px solid #617DC5;
        border-right: none;
        border-top: none;
        transform: rotate(
                -45deg);
        transition: transform 1s;
    }
    #counseling .select_arrow:hover {
        background: #999;
        cursor: pointer;
        background: #E8EBF5;
    }
    #counseling #counselPC_select.on {
        display: block;
    }
    #counseling #counselPC_select.li {
        display: block;
    }
    #counseling #counsel_select.on ~ .select_arrow:before {
        transform: rotate(
                135deg);
        transition: transform 1s;
    }
    #counseling textarea,
    #counseling input[type="text"],
    #counseling input[type="password"]{
        background: #EBEBEB;
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 29px;
        text-align: left;
        padding: 5px 10px;
        color: #232120;
        border: unset;
        outline: unset;
    }
    #model_counseling textarea::placeholder,
    #counseling input[type="text"]::placeholder,
    #counseling input[type="password"]::placeholder{
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        color: #232120;
        padding: 2px 6px;
    }
    #counseling .counsel_text{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    #counseling .counsel_input{
        width: calc(70% - 2px);
    }
    #counseling .counsel_input:nth-child(1){
        width: calc(30% - 2px);
        margin-right: 4px;
    }
    #counseling .counsel_content{
        width: 100%;
    }
    #counseling .counsel_content::placeholder{
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        color: #232120;
        padding: 2px 6px;
    }
    #counseling #counsel_text{
        width: calc(100% - 44px);
        background: white;
        border: 1px solid #617DC5;
        border-right: unset;
        border-top-right-radius: unset;
        border-bottom-right-radius: unset;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        line-height: 26px;
        height: 40px;
        z-index: 3;
    }
    #counseling #counsel_text::placeholder{
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        color: #232120;
        padding: 2px 6px;
    }
    #counseling input[type='radio']{
        display: none;
    }
    #counseling .customRadio {
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 26px;
        color: #232120;
        margin-right: 6px;
        width: 20px;
        height: 20px;
        position: relative;
        padding: 0;
        top: 6px;
        left: 0;
        border-radius: 100%;
        border: 1px solid #B6B6B6;
        background: transparent;
        display: inline-block;
    }
    #counseling .customRadio:before {
        content: '';
        text-align: center;
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        position: absolute;
        width: 10px;
        height: 10px;
        top: 50%;
        left: 50%;
        transform: scale(1) translate(-50%, -50%);
        background: white;
        border-radius: 100%;
        opacity: 0;
        transition: opacity 1s;
    }
    #counseling input[type='radio']:checked{
        background: #617DC5;
    }
    #counseling .full label > #post_id1:checked ~ .customRadio{
        background: #617DC5;
        border: none;
    }
    #counseling .full label > #post_id2:checked ~ .customRadio{
        background: #617DC5;
        border: none;
    }
    #counseling .full label > #post_id1:checked ~ .customRadio:before{
        opacity: 1;
    }
    #counseling .full label > #post_id2:checked ~ .customRadio:before{
        opacity: 1;
    }
    #counseling p#privacy_chk{
        text-align: center;
        padding: 10px 0 26px;
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
        color: #000000;
    }
    #counseling p#privacy_chk a {
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: bold;
        font-size: 18px;
        line-height: 26px;
        color: #F8642A;
        margin-left: 8px;
    }
    #counseling .counsel_long{
        width: unset;
        height: 30px;
        padding: 0 16px;
        font-weight: 700;
        font-size: 16px;
        color: white;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        float: right;
    }
    #counseling .modal_new_content{
        font-size: 14px;
    }
    #counseling .modal .modal_inner .modal_div .modal_content_wrap{
        padding: 0 20px;
    }
    #counseling select{
        font-size: 14px;
    }
    #counseling .counsel_passwd{
        width: 40%;
        float: right;
    }
    #counseling label{
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        width: 30%;
        padding: 2px 6px;
        height: 40px;
        line-height: 3;
    }
    #counseling .full:nth-child(2) label{
        width: 30%;
        padding: 2px 0;
    }
    #counseling button {
        width: 100%;
        height: 40px;
        padding: 0 30px;
        background: #2A3760;
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        color: white;
        letter-spacing: 2px;
        margin: 14px 0;
        border-radius: 4px;
    }
    #counseling .counsel_long{
        font-size: 14px;
        padding: 0 8px;
    }
    #counseling p#privacy_chk{
        font-size: 12px;
    }
    #counseling p#privacy_chk a{
        font-size: 12px;
    }

    #counseling .ic_color6_1:before{
        content: '';
        position: relative;
        display: inline-block;
        float: left;
        width: 24px;
        height: 24px;
        margin: 10px 10px 0 0;
        background: url('https://cheongmac.blob.core.windows.net/common/ic_reserve_top6_1.png') center center/cover no-repeat;
        mix-blend-mode: multiply;
    }
}
@media screen and (max-width: 350px){
    #counseling label{
        font-size: 8px;
        padding: 0;
    }
}

/* **************************************** *
* 07) 페이징 스타일
* **************************************** */
.paging{
    padding: 40px 0 18%;
}
.paging span{
    width: 30px;
    height: 30px;
}
.paging a {
    width: 30px;
    height: 30px;
}
.paging span a{
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #777777;
    justify-content: center;
    cursor: pointer;
}
.paging span.on{
    background: #777777;
    border-radius: 3px;
}
.paging span.on a {
    color: white;
}
.paging .pre, .paging .next {
    margin: 7px 12px 0 12px;
}

@media screen and (max-width: 1140px){
    .paging span a{
        font-size: 15px;
    }
}

/* **************************************** *
* 08) 커스텀셀렉트박스 스타일
* **************************************** */
 #counseling .select_wrap{
     width: 100%;
     margin: 10px auto;
     position: relative;
     user-select: none;
 }
#counseling .select_wrap .default_option{
    background: #fff;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}
#counseling .select_wrap .select_ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 5px;
    z-index: 1;
}
#counseling .select_wrap .select_ul li {
    padding: 4px 20px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #617DC5;
    background: white;
    position: absolute;
    width: 100%;
    height: 40px;
    transition: transform 0.6s;
    transform: translateY(-10px);
}
#counseling .select_wrap .select_ul li:before {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 20px;
    border: 1px solid black;
}
#counseling .select_wrap .select_ul li:nth-child(1){
    z-index: 0;
}
#counseling .select_wrap .select_ul li:nth-child(2){
    z-index: -1;
}
#counseling .select_wrap .select_ul li:nth-child(3){
    z-index: -2;
}
#counseling .select_wrap .select_ul li:nth-child(4){
    z-index: -3;
}
#counseling .select_wrap.on .select_ul li:nth-child(1) {
    transform: translateY(calc(40px + 5px - 10px));
    transition: transform 1.2s;
}
#counseling .select_wrap.on .select_ul li:nth-child(2) {
    transform: translateY(calc(80px + 10px - 10px));
    transition: transform 1.4s;
}
#counseling .select_wrap.on .select_ul li:nth-child(3) {
    transform: translateY(calc(120px + 15px - 10px));
    transition: transform 1.6s;
}
#counseling .select_wrap.on .select_ul li:nth-child(4) {
    transform: translateY(calc(160px + 20px - 10px));
    transition: transform 1.8s;
}
#counseling .select_wrap .select_ul li:hover{
    background: #e8f0fe;
}
#counseling .select_wrap .select_ul p {
    font-size: 12px;
    color: black;
}
#counseling .select_wrap .option{
    display: flex;
    align-items: center;
    height: 100%;
}
#counseling .select_wrap.active .select_ul{
    display: block;
}
#reserve_write_modal_wrap .select_wrap{
    width: 100%;
    margin: 10px auto;
    position: relative;
    user-select: none;
}
#reserve_write_modal_wrap .select_wrap .default_option{
    background: #fff;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}
#reserve_write_modal_wrap .select_wrap .select_ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 5px;
    z-index: 1;
}
#reserve_write_modal_wrap .select_wrap .select_ul li {
    padding: 4px 20px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid black;
    background: white;
    position: absolute;
    width: 100%;
    height: 40px;
    transition: transform 0.6s;
    transform: translateY(calc(-100% - 10px));
}
#reserve_write_modal_wrap .select_wrap .select_ul li:before {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 20px;
    border: 1px solid black;
}
#reserve_write_modal_wrap .select_wrap .select_ul li:nth-child(1){
    z-index: 0;
}
#reserve_write_modal_wrap .select_wrap .select_ul li:nth-child(2){
    z-index: -1;
}
#reserve_write_modal_wrap .select_wrap .select_ul li:nth-child(3){
    z-index: -2;
}
#reserve_write_modal_wrap .select_wrap .select_ul li:nth-child(4){
    z-index: -3;
}
#reserve_write_modal_wrap .select_wrap.on .select_ul li:nth-child(1) {
    transform: translateY(0);
    transition: transform 1.2s;
}
#reserve_write_modal_wrap .select_wrap.on .select_ul li:nth-child(2) {
    transform: translateY(calc(100% + 10px));
    transition: transform 1.4s;
}
#reserve_write_modal_wrap .select_wrap.on .select_ul li:nth-child(3) {
    transform: translateY(calc(200% + 20px));
    transition: transform 1.6s;
}
#reserve_write_modal_wrap .select_wrap.on .select_ul li:nth-child(4) {
    transform: translateY(calc(300% + 30px));
    transition: transform 1.8s;
}
#reserve_write_modal_wrap .select_wrap .select_ul li:hover{
    background: #e8f0fe;
}
#reserve_write_modal_wrap .select_wrap .select_ul p {
    font-size: 16px!important;
    color: black!important;
}
#reserve_write_modal_wrap .select_wrap .option{
    display: flex;
    align-items: center;
}

#reserve_write_modal_wrap .select_wrap .option .icon{
    width: 28px;
    height: 28px;
    margin-right: 15px;
}
#reserve_write_modal_wrap .select_wrap .option .icon:before{
    content:'ex)';
    font-size: 18px;
    font-weight: 500;
    color: black;
    position: relative;
    top: 4px;
}
#reserve_write_modal_wrap .select_wrap.active .select_ul{
    display: block;
}

/* **************************************** *
* 09) 비밀번호알림창 스타일
* **************************************** */
#chk_modal .chk_content{
 padding-bottom: 25px;
 border-radius: 3px;
 width: 80%;
 min-width: 325px;
 max-width: 500px;
}
#chk_modal .chk_content .chk_title {
    width: 100%;
    height: 70px;
    line-height: 70px;
    padding: 0 30px;
    font-size: 20px;
    color: #ffffff;
    background: #2B3643;
    text-align: left;
}
#chk_modal .btn_normal, a.btn_normal{
    display: inline-block;
    padding: 0 60px;
    margin: 0 3px;
    font-size: 16px;
    color: #fff;
    background: #2A3760;
    box-sizing: border-box;
    line-height: 44px;
    height: 44px;
    border: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    border-radius: 6px;
}
#chk_modal #uid_input{
    display: none;
}
#chk_modal #pw_password{
    text-align: center;
}

@media screen and (max-width: 1140px) {
    #chk_modal .chk_content .alt_title{
        font-size: 16px;
    }
    #chk_modal .btn_normal,
    #chk_modal .btn_normal{
        font-size: 12px;
        padding: 0 30px;
    }
}

/* **************************************** *
* 10) 모달뷰 스타일 및 애니메이션
* **************************************** */
@keyframes hero_float {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

#reserve_modal_wrap {
    display: none;
    position: fixed;
    z-index: 50001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    font-family: 'NanumSquare', 'Noto Sans KR', sans-serif;
    color: #414144;
    background: rgba(0, 0, 0, 0.5);
}
#reserve_modal_wrap .reserve_modal_inner {
    position: absolute;
    background-color: white;
    border: none;
    width: 80%;
    height: 90%;
    max-width: 1200px;
    max-height: 1080px;
    top: 50%;
    left: 50%;
    border-radius: 40px;
    filter: drop-shadow(2px 2px 5px rgba(209, 209, 209, 0.35));
    overflow: hidden;
    transform: translate(-1320px, -50%);
    transition: transform 0.3s ease-out;
}
#reserve_modal_wrap.on .reserve_modal_inner {
    transform: translate(-50%, -50%);
}
#reserve_modal_wrap .reserve_close {
    position: absolute;
    top: 50px;
    right: 70px;
    font-size: 24px;
    font-weight: bold;
    z-index: 100;
    color: black;
    cursor: pointer;
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: opacity 0.3s;
}
#reserve_modal_wrap.on .reserve_close {
    opacity: 1;
    animation: opacity_rotale1 1.4s;
}
#reserve_modal_wrap .reserve_close:before {
    content: '';
    width: 24px;
    height: 2px;
    background: #333333;
    transform: rotate(
            225deg
    );
    top: 12px;
    left: 2px;
    position: absolute;
    transition: transform 2s;
}
#reserve_modal_wrap .reserve_close:hover:before{
    transform: rotate(
            540deg
    );
    transition: transform 2s;
}
#reserve_modal_wrap .reserve_close:after {
    content: '';
    width: 24px;
    height: 2px;
    background: #333333;
    transform: rotate(
            -225deg
    );
    top: 12px;
    left: 2px;
    position: absolute;
    transition: transform 2s;
}
#reserve_modal_wrap .reserve_close:hover:after{
    transform: rotate(
            90deg
    );
    transition: transform 2s;
}
#reserve_modal_wrap #reserve_view{
    position: relative;
    overflow: hidden;
    background: white;
}
#reserve_modal_wrap .view_bar{
    position: relative;
    height: 102px;
}
#reserve_modal_wrap .bar_menu {
    width: 100%;
    padding: 42px 70px 32px;
}
#reserve_modal_wrap .view_text{
    position: relative;
    overflow-y: scroll;
    opacity: 0;
    margin: 20px 70px;
    background: white;
    border-radius: 15px;
    height: calc(100% - 180px);
}
#reserve_modal_wrap.on .view_text {
    opacity: 1;
    animation: opacity_delay1 0.8s;
}
#reserve_modal_wrap h2.title {
    display: none;
}
#reserve_modal_wrap .question {
    padding: 30px 20px;
}
#reserve_modal_wrap .answer {
    color: #E0784A;
    background: #f7f8f9;
    border-radius: 15px;
    padding: 30px 20px;
}
#reserve_modal_wrap .view_text::-webkit-scrollbar { display: none;}
#reserve_modal_wrap .view_text::-webkit-scrollbar-track { display: none; }
#reserve_modal_wrap .view_text::-webkit-scrollbar-thumb {
    display: none;
}

#reserve_modal_wrap .view_text::-webkit-scrollbar-button { display: none; }
#reserve_modal_wrap .text_title {
    font-family: 'Noto Sans KR';
    font-weight: 600;
    font-size: 22px;
    line-height: 33px;
    color: #414144;
    padding-bottom: 8px;
    padding-left: 10px;
}
#reserve_modal_wrap .answer .text_title {
    color: #E0784A;
}
#reserve_modal_wrap .text_line{
    border-top: 1px solid #c4c4c4;
    margin: 0;
    position: relative;
}
#reserve_modal_wrap .text_data{
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    text-align: right;
    color: #929292;
    padding: 10px 0;
    position: relative;
    letter-spacing: 1px;
}
#reserve_modal_wrap .text_cont{
    position: relative;
    padding: 0 20px 50px;
    word-break: break-all;
}
#reserve_modal_wrap .menu_title{
    font-family: "Noto Sans KR";
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    color: #333333;
    padding: 0;
    display: flex;
    align-items: center;
}
#reserve_modal_wrap .menu_title .ic_color6_1{
    margin-right: 6px;
}
#reserve_modal_wrap .menu_title span:before{
    content: '';
    position: relative;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    display: inline-block;
}
#reserve_modal_wrap .menu_title .ic_color6_1:before{
    background: url('https://cheongmac.blob.core.windows.net/common/ic_reserve_top6_1.png') center center/cover no-repeat;
    mix-blend-mode: multiply;
}
#reserve_modal_wrap .ic_hidden {
    width: 18px;
    height: 14px;
    background: url('https://cheongmac.blob.core.windows.net/common/ic_reserve_hidden.svg') center center/cover no-repeat;
    position: relative;
    margin: 0;
    padding: 0;
    display: inline-block;
    top: 1px;
    margin: 0 1px;
}
#reserve_modal_wrap .data_name{
    font-weight: 500;
    font-size: 16px;
    color: #DF5F2E;
}
#reserve_modal_wrap .data_bar{
    padding-left: 10px;
    margin-left: 9px;
    color: #7c7c7c;
    font-weight: normal;
    position: relative;
    display: inline-block;
}
#reserve_modal_wrap .data_bar:after {
    content: "";
    width: 1px;
    height: 12px;
    background-color: #ddd;
    position: absolute;
    left: 0;
    top: -12px;
}
#reserve_modal_wrap .cont_scroll{
    font-weight: 500;
    font-size: 18px;
    color: #414144;
    line-height: 1.8;
}
#reserve_modal_wrap  .btn_center {
    text-align: right;
    padding: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#reserve_modal_wrap .btn_normal ,
#reserve_modal_wrap a.btn_normal {
    text-align: center;
    display: inline-block;
    padding: 4px 10px;
    margin: 0 3px;
    width: 86px;
    height: 26px;
    font-size: 16px;
    line-height: 18px;
    font-weight: 400;
    color: #FFFFFF;
    background: #B2B2B2;
    box-sizing: border-box;
    border: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    border-radius: 6px;
    cursor: pointer;
}
#reserve_modal_wrap .btn_normal.orange {
    background: #ee7323;
    color: white;
}
#reserve_modal_wrap .btn_normal.border {
    background: white;
    color: #969696;
    border: 1px solid #969696;
}
#reserve_modal_wrap .btn_normal.indigo {
    color: white;
    background: #344557;
}
#reserve_modal_wrap .answer_write{
    padding-top : 20px;
}
#reserve_modal_wrap .answer_write > .btn_center{
    position: relative;
    top: 0;
}
#reserve_modal_wrap #smarteditor{
    margin: 0;
    width: calc(100%)!important;
    height: 250px!important;
    position: relative;
    padding: 20px 20px 40px 20px;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 15px;
    font-weight: 500;
    font-size: 18px;
    color: #414144;
    line-height: 1.8;
    resize: none;
}
#reserve_modal_wrap #smarteditor::-webkit-scrollbar { display: none;}
#reserve_modal_wrap #smarteditor::-webkit-scrollbar-track { display: none; }
#reserve_modal_wrap #smarteditor::-webkit-scrollbar-thumb {
    display: none;
}
#reserve_modal_wrap #smarteditor::-webkit-scrollbar-button { display: none; }
#reserve_modal_wrap #text_check{
    position: relative;
    width: 100%;
    height: 20px;
    right: 0;
    top: -40px;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 130%;
    text-align: right;
    color: #C4C4C4;
    padding: 0 30px;
}
#reserve_modal_wrap .btn_center{
    padding: 0;
}

@media screen and (max-width: 1140px){
    #reserve_modal_wrap .reserve_modal_inner {
        width: 0;
        height: 100%;
        max-width: none;
        max-height: none;
        transform: none;
        top: 0;
        left: 0;
        border-radius: 0;
        transition: width 0.3s ease-out;
        background:#f5f5f5;
    }
    #reserve_modal_wrap .view_text{
        background: #f5f5f5;
    }
    #reserve_modal_wrap.on .reserve_modal_inner {
        width: 100%;
        height: 100%;
        transform: none;
    }
    #reserve_modal_wrap .reserve_close {
        top: 22px;
        right: 20px;
    }
    #reserve_modal_wrap .reserve_close:before,
    #reserve_modal_wrap .reserve_close:after{
        width: 20px;
    }
    #reserve_modal_wrap .view_bar{
        height: 70px;
    }
    #reserve_modal_wrap .bar_menu{
        padding: 0;
        background: #FFFFFF;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }
    #reserve_modal_wrap .menu_title{
        padding: 20px;
        font-size: 20px;
    }
    #reserve_modal_wrap .menu_title .ic_color6_1{
        width: 30px;
        height: 26px;
        margin-right: 4px;
    }
    #reserve_modal_wrap .menu_title .ic_color6_1:before{
        width: 30px;
        height: 26px;
    }
    #reserve_modal_wrap .view_text{
        margin: 34px;
    }
    #reserve_modal_wrap.on .view_text{
        height: calc(100% - 70px - 40px);
        margin: 0;
        border-radius: unset;
    }
    #reserve_modal_wrap.on .question{
        border-radius: 15px;
        margin: 20px;
        background:white;
        border: 1px solid #C4C4C4;
    }
    #reserve_modal_wrap.on .answer{
        border-radius: 15px;
        margin: 20px;
        background: #F7F8F9;
        border: 1px solid #C4C4C4;
    }
    #reserve_modal_wrap.on .answer_write{
        margin: 10px 10px 20px;
    }
    #reserve_modal_wrap h2.title {
        display: inline-block;
        text-align: center;
        background: #303F4E;
        font-size: 18px;
        color: white;
        margin: 12px 0;
        padding: 10px 20px;
        width: 100%;
    }
    #reserve_modal_wrap .text_title{
        font-size: 18px;
        color: #333333;
        font-weight: 600;
    }
    #reserve_modal_wrap .text_line{
        margin: 0 20px;
    }
    #reserve_modal_wrap .text_data{
        font-size: 14px;
        line-height: 19px;
        color: #b3b3b3;
        padding: 10px 20px 30px;
        text-align: left;
    }
    #reserve_modal_wrap .text_cont{
        padding: 0 0 50px;
    }
    #reserve_modal_wrap .cont_scroll{
        padding: 0 20px 30px;
    }
    #reserve_modal_wrap .view_cont{
        position: relative;
        margin: 0;
    }
    #reserve_modal_wrap .btn_center{
        padding: 20px 10px;
    }
    #reserve_modal_wrap .btn_normal,
    #reserve_modal_wrap a.btn_normal {
        text-align: center;
        display: inline-block;
        padding: 4px 10px;
        margin: 0 3px;
        width: 86px;
        height: 26px;
        font-size: 16px;
        line-height: 18px;
        font-weight: 400;
        color: #FFFFFF;
        background: #B2B2B2;
        box-sizing: border-box;
        border: 0;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
        border-radius: 6px;
        cursor: pointer;
    }
    #reserve_modal_wrap #smarteditor{
        margin: 10px;
        width: calc(100% - 20px)!important;
        height: 330px!important;
        padding: 20px 30px 40px 30px;
        background: white;
        border: 1px solid #C4C4C4;
        box-sizing: border-box;
        border-radius: 15px;
    }
}

/* **************************************** *
* 11) 모달뷰답변관련 스타일
* **************************************** */
#chk_modal1 {
 z-index: 50011;
}
#chk_modal1 .chk_content{
    min-width: 350px;
}
#chk_modal1 .chk_content .chk_title {
    width: 100%;
    height: 70px;
    line-height: 70px;
    padding: 0 30px;
    font-size: 20px;
    color: #ffffff;
    background: #2B3643;
    text-align: left;
}
#chk_modal1 .btn_normal,
#chk_modal1 a.btn_normal{
    display: inline-block;
    margin: 0 3px;
    font-size: 16px;
    color: #fff;
    background: #2B3643;
    box-sizing: border-box;
    line-height: 44px;
    height: 44px;
    border: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    border-radius: 6px;
    width: 150px;
    padding: 0;
}
#chk_modal1 .btn_normal.gray {
    font-weight: bold;
    color: #474747;
    background: #DEDEDE;
}
#chk_modal1 #uid_input{
    display: none;
}
#chk_modal1 #pw_password{
    text-align: center;
}
#chk_modal1 .section_title_sub:after {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #e05f2d;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -15px;
}
#chk_modal1 .btn_search {
    display: inline-block;
    text-align: center;
    font-size: 14px;
    min-width: 60px;
    height: 34px;
    line-height: 34px;
    background: linear-gradient(to right, #E17C4D 0%, #F2AC75 100%);
    border: 0;
    color: #fff;
}
#chk_modal1 .section_list .notiBox .cont h2 a:HOVER,
#chk_modal1 .section_list .notiBox .cont h2:HOVER > a,
#chk_modal1.section_list .notiBox .cont:hover > h2 a{
    color: #DC8D45;
}
#chk_modal1 .notiBox .cont .name {
    color: #DC8D45;
    font-size: 14px;
    font-weight: 500;
}
#chk_modal1 .paging span.on a {
    color: #DC8D45;
    font-weight: bold;
}
#chk_modal1 p{
    word-break: break-word;
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
    justify-content: center;
    flex-direction: column;
    align-content: center;
}
#chk_modal1 .chk_wrap .chk_content{
    padding-bottom: 0;
    border-radius: 3px;
    width: 80%;
    min-width: 325px;
    max-width: 500px;
}
#chk_modal1 .chk_wrap .btn_normal{
    width: 50%;
    float: left;
    display: inline;
    padding: 0;
    margin: 0;
    font-size: 16px;
    color: #fff;
    background: #2A3760;
    box-sizing: border-box;
    line-height: 44px;
    height: 52px;
    transition: all 0.2s;
    border-radius: 0;
    border: 1px solid #2A3760;
}
@media screen and (max-width: 1140px) {
    #chk_modal1  .chk_content .alt_title{
        font-size: 16px;
    }
    #chk_modal1  .btn_normal,
    #chk_modal1 .btn_normal{
        font-size: 12px;
        padding: 0 30px;
    }
}

/* **************************************** *
* 12) 모달상담하기 스타일 및 애니메이션
* **************************************** */
@keyframes opacity_rotale1 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
        transform: rotate(-325deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}
@keyframes opacity_delay1 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#reserve_write_modal_wrap {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    font-family: 'NanumSquare', 'Noto Sans KR', sans-serif;
    color: #414144;
    background: rgba(119, 119, 119, 0.3);
}
#reserve_write_modal_wrap .reserve_write_modal_inner {
    position: absolute;
    background-color: white;
    border: none;
    width: 100%;
    height: calc(100% - 128px);
    max-width: 680px;
    max-height: 1080px;
    top: 64px;
    right: 196px;
    filter: drop-shadow(2px 2px 5px rgba(209, 209, 209, 0.35));
    overflow: hidden;
    transform: translateY(150%);
    transition: transform 0.3s ease-out;
    padding: 60px;
}
#reserve_write_modal_wrap.on .reserve_write_modal_inner {
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}
#reserve_write_modal_wrap .reserve_write_close {
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 24px;
    font-weight: bold;
    z-index: 100;
    color: black;
    cursor: pointer;
    width: 32px;
    height: 32px;
    opacity: 0;
    transition: opacity 0.3s;
}
#reserve_write_modal_wrap.on .reserve_write_close {
    opacity: 1;
    animation: opacity_rotale1 1.4s;
}
#reserve_write_modal_wrap .reserve_write_close:before {
    content: '';
    width: 24px;
    height: 2px;
    background: black;
    transform: rotate(
            225deg
    );
    position: absolute;
    top: 14px;
    left: 6px;
    transition: transform 2s;
}
#reserve_write_modal_wrap .reserve_write_close:hover:before{
    transform: rotate(
            540deg
    );
    transition: transform 2s;
}
#reserve_write_modal_wrap .reserve_write_close:after {
    content: '';
    width: 24px;
    height: 2px;
    background: black;
    transform: rotate(
            -225deg
    );
    position: absolute;
    top: 14px;
    left: 6px;
    transition: transform 2s;
}
#reserve_write_modal_wrap .reserve_write_close:hover:after{
    transform: rotate(
            90deg
    );
    transition: transform 2s;
}
#reserve_write_modal_wrap #reserve_write_view{
    position: relative;
    overflow: hidden;
    background: white;
}
#reserve_write_modal_wrap .modal_inner{
    position: absolute;
    background-color: #fefefe;
    padding: 100px 92px;
    border: 1px solid #888;
    width: 700px;
    max-width: unset;
    top: 85px;
    right: 95px;
    transform: unset;
    left: unset;
    height: calc(100vh - 75px - 40px);
}
#reserve_write_modal_wrap .ic_color6_1:before{
    content: '';
    position: relative;
    display: inline-block;
    margin-right: 10px;
    top: 10px;
    left: 0;
    width: 48px;
    height: 48px;
    background: url('https://cheongmac.blob.core.windows.net/common/ic_reserve_top6_1.png') center center/cover no-repeat;
}
#reserve_write_modal_wrap .modal_new_title_wrap{
    padding: 20px 20px 20px 36px;
}
#reserve_write_modal_wrap .modal_new_title{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    font-size: 44px;
    line-height: 46px;
    text-align: left;
    color: #000000;
    margin:  12px 0 12px 0;
}
#reserve_write_modal_wrap .modal_new_content{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 23px;
    color: #777777;
    margin-left: 48px;
}
#reserve_write_modal_wrap .counseling{
    display: none;
}
#reserve_write_modal_wrap #modal_counseling{
    position: relative;
    overflow-y: scroll;
    opacity: 0;
    background: white;
    border-radius: 15px;
    height: calc(100%);
}
#reserve_write_modal_wrap.on #modal_counseling {
    opacity: 1;
    animation: opacity_delay1 0.8s;
}
#reserve_write_modal_wrap #modal_counseling::-webkit-scrollbar { display: none;}
#reserve_write_modal_wrap #modal_counseling::-webkit-scrollbar-track { display: none; }
#reserve_write_modal_wrap #modal_counseling::-webkit-scrollbar-thumb {
    display: none;
}
#reserve_modal_wrap #modal_counseling::-webkit-scrollbar-button { display: none; }
#reserve_write_modal_wrap #modal_counseling .counselprocess{
    display: block;
    padding: 20px;
}
#reserve_write_modal_wrap .full{
    width: 100%;
    padding: 0;
    display: inline-flex;
    flex-direction: row;
    position: relative;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    height: 170px;
}
#reserve_write_modal_wrap .full:nth-child(3){
    height: auto;
}
#reserve_write_modal_wrap .full:nth-child(3) .content_miniwrap{
    height: 180px;
    align-content: flex-end;
}
#reserve_write_modal_wrap .full:nth-child(4){
    height: 90px;
}
#reserve_write_modal_wrap .full:nth-child(4) .content_miniwrap{
    height: 40px;
}
#reserve_write_modal_wrap .full:nth-child(5){
    justify-content: center;
}
#reserve_write_modal_wrap .process_num{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #B5B5B5;
    font-family: 'Arial';
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    color: white;
    margin: 0 20px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
#reserve_write_modal_wrap .process_num:after {
    content: '';
    width: 1px;
    height: calc(100% - 40px);
    background: #D4D4D4;
    position: absolute;
    top: 40px;
}
#reserve_write_modal_wrap .full:nth-child(4) .process_num:after {
    display: none;
}
#reserve_write_modal_wrap .process_content{
    margin: 8px 0;
    position: relative;
}
#reserve_write_modal_wrap .process_content span{
    font-family: 'Noto Sans KR';
    font-weight: 400;
    font-size: 18px;
    color: #777777;
}
#reserve_write_modal_wrap .process_content .counselCheck span{
    font-family: 'Noto Sans KR';
    width: 14px;
    height: 14px;
    font-weight: 500;
    font-size: 18px;
    color: #777777;
    top: 12px;
    display: none;
}
#reserve_write_modal_wrap .process_content .counselCheck span.clear{
    background: url('https://cheongmac.blob.core.windows.net/common/ic_reserve_close.svg') center center/cover no-repeat;
    display: block;
}
#reserve_write_modal_wrap .process_content .counselCheck span.error{
    background: url('https://cheongmac.blob.core.windows.net/common/ic_reserve_close_error.svg') center center/cover no-repeat;
    display: block;
}
#reserve_write_modal_wrap .process_content .content_brief{
    font-weight: 500;
    font-size: 14px;
    color: #777777;
}
#reserve_write_modal_wrap .content_miniwrap{
    width: 400px;
    height: 120px;
    margin-top: 6px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
}
#reserve_write_modal_wrap .full:nth-child(2) .content_miniwrap{
    justify-content: space-between;
}
#reserve_write_modal_wrap input[type="text"],
#reserve_write_modal_wrap input[type="password"]{
    padding: 8px 24px;
    font-family: 'Noto Sans KR';
    font-weight: 500;
    font-size: 18px;
    width: 100%;
    height: 40px;
    border-radius: 4px;
    position: relative;
}
#reserve_write_modal_wrap #counselPC_input2{
    letter-spacing: 1px;
}
#reserve_write_modal_wrap #counselPC_text{
    width: 90%;
    border-right: unset;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
    height: 40px;
    z-index: 2;
}
#reserve_write_modal_wrap #counselPC_text.clear{
    border-right: 1px solid #617DC5;
}
#reserve_write_modal_wrap #counselPC_text.error{
    border-right: 1px solid #F05B5B;
}
#reserve_write_modal_wrap .process_content #counselCheck4 span{
    right: 54px;
    top: 14px;
}
#reserve_write_modal_wrap .select_arrow {
    position: absolute;
    left: 90%;
    width: 10%;
    height: 40px;
    border: 1px solid black;
    z-index: 2;
    background: white;
}
#reserve_write_modal_wrap .select_arrow:before {
    content: '';
    position: absolute;
    top: 16px;
    right: 14px;
    width: 0;
    height: 0;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #999 transparent transparent transparent;
    transform: rotate(0);
    transform-origin: 50% 50%;
    transition: transform 1s;
}
#reserve_write_modal_wrap .select_arrow:hover {
    background: #999;
    cursor: pointer;
}
#reserve_write_modal_wrap .select_arrow:hover:before {
    border-color: white transparent transparent transparent;
}
#reserve_write_modal_wrap #counselPC_select.on {
    display: block;
}
#reserve_write_modal_wrap #counselPC_select.li {
    display: block;
}
#reserve_write_modal_wrap #counselPC_select.on ~ .select_arrow:before {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
    transition: transform 1s;
}
#reserve_write_modal_wrap #counselPC_text.clear ~ .select_arrow {
    border: 1px solid #617DC5;
    border-left: none;
}
#reserve_write_modal_wrap #counselPC_text.clear ~ .select_arrow:hover {
    background: #e8f0fe;
    cursor: pointer;
}
#reserve_write_modal_wrap #counselPC_text.clear ~.select_arrow:before {
    position: absolute;
    border-color: #617DC5 transparent transparent transparent;
}
#reserve_write_modal_wrap #counselPC_text.error ~ .select_arrow {
    border: 1px solid red;
    border-left: none;
}
#reserve_write_modal_wrap #counselPC_text.error ~ .select_arrow:before {
    position: absolute;
    border-color: red transparent transparent transparent;
}
#reserve_write_modal_wrap input[type="text"].clear,
#reserve_write_modal_wrap input[type="password"].clear,
#reserve_write_modal_wrap select.clear{
    border: 1px solid #617DC5;
    border-radius: 4px;
    background-color:#e8f0fe;
}
#reserve_write_modal_wrap input[type="text"]:focus.clear,
#reserve_write_modal_wrap input[type="password"]:focus.clear,
#reserve_write_modal_wrap select:focus.clear{
    border: 1px solid #617DC5;
    outline: unset;
    color: #617DC5;
    background: white;
}
#reserve_write_modal_wrap input[type="text"].error,
#reserve_write_modal_wrap input[type="password"].error,
#reserve_write_modal_wrap select.error{
    border: 1px solid #F05B5B;
    border-radius: 4px;
}
#reserve_write_modal_wrap input[type="text"]:focus.error,
#reserve_write_modal_wrap input[type="password"]:focus.error,
#reserve_write_modal_wrap select:focus.error{
    border: 1px solid #F05B5B;
    outline: unset;
    color: #F05B5B;
    background: white;
}
#reserve_write_modal_wrap #counselCheck1{
    width: calc(40% - 8px);
}
#reserve_write_modal_wrap #counselCheck2{
    width: calc(60% - 8px);
}
#reserve_write_modal_wrap #counselCheck3{
    width: calc(44% - 8px);
}
#reserve_write_modal_wrap .full label{
    width: calc(28% - 4px);
    font-family: 'Noto Sans KR';
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    margin: 2px;
    z-index: 3;
}
#reserve_write_modal_wrap #counselCheck4 label{
    width: unset;
    top: 8px;
}
#reserve_write_modal_wrap #counselCheck4 p{
    height: unset;
}
#reserve_write_modal_wrap .counselCheck#counselCheck4 .motion{
    top: -14px;
}
#reserve_write_modal_wrap .full:nth-child(1) .content_miniwrap > label{
    display: inline-flex;
    cursor: pointer;
    width: 108px;
    height: calc(38px + 8px + 20px);
    position: relative;
    top: 0px;
    flex-direction: row;
    align-items: flex-start;
    padding: 10px 0;
}
#reserve_write_modal_wrap .full:nth-child(1) .content_miniwrap > label > input[type='radio']{
    display: none;
}
#reserve_write_modal_wrap .customRadio {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 26px;
    color: #232120;
    width: 20px;
    height: 20px;
    position: relative;
    padding: 0;
    margin: 2px 8px;
    top: 0;
    left: 0;
    border-radius: 100%;
    border: 1px solid #B6B6B6;
}
#reserve_write_modal_wrap .customRadio:before {
    content: '';
    text-align: center;
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
    background: white;
    border-radius: 100%;
    opacity: 0;
    transition: opacity 1s;
}
#reserve_write_modal_wrap .full:nth-child(1) .content_miniwrap > label > #counselPC_id1:checked ~ .customRadio{
    background: #617DC5;
    border: none;
}
#reserve_write_modal_wrap .full:nth-child(1) .content_miniwrap > label > #counselPC_id2:checked ~ .customRadio{
    background: #617DC5;
    border: none;
}
#reserve_write_modal_wrap .full:nth-child(1) .content_miniwrap > label > #counselPC_id1:checked ~ .customRadio:before{
    opacity: 1;
}
#reserve_write_modal_wrap .full:nth-child(1) .content_miniwrap > label > #counselPC_id2:checked ~ .customRadio:before{
    opacity: 1;
}
#reserve_write_modal_wrap input[type='radio']:before{
    color: white;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
}
#reserve_write_modal_wrap .mini_button{
    font-family: 'Noto Sans KR';
    background-color: white;
    font-weight: 500;
    font-size: 16px;
    color: #929292;
    padding: 6px 8px;
    margin: 6px 4px;
    border: 1px solid #929292;
    border-radius: 30px;
    cursor: pointer;
    transition: padding 1s;
    width: 100%;
    max-width: calc(25% - 8px);
}
#reserve_write_modal_wrap .selection.mini_button{
    color: white;
    background: #617DC5;
    border: 0;
    position: relative;
    transition: background 1s;
}
#reserve_write_modal_wrap textarea{
    width: 100%;
    height: 100%;
    font-family: 'Noto Sans KR';
    font-weight: 500;
    font-size: 16px;
    padding: 10px;
    border-radius: 4px;
    resize: none;
}
#reserve_write_modal_wrap textarea::placeholder {
    color: #F47128;
    font-weight: normal;
}
#reserve_write_modal_wrap textarea::-webkit-scrollbar { display: none;}
#reserve_write_modal_wrap .full:nth-child(4) label{
    display: inline-block;
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px;
    margin: 0 8px;
}
#reserve_write_modal_wrap #privacyPC_checkbox{
    display: none;
}
#reserve_write_modal_wrap .customCheckBox{
    width: 24px;
    height: 24px;
    position: absolute;
    text-align: center;
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    padding: 0;
    margin: 0;
    top: -2px;
    left: 0;
    border-radius: 100%;
    border: 1px solid #B6B6B6;
    display: inline-block;
}
#reserve_write_modal_wrap .customCheckBox:before{
    content: '\e928';
    text-align: center;
    font-family: 'xeicon';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
    color: white;
    opacity: 0;
    transition: opacity 1s;
}
#reserve_write_modal_wrap #privacyPC_checkbox:checked ~ .customCheckBox{
    background-color: #617DC5;
    border: none;
}
#reserve_write_modal_wrap #privacyPC_checkbox:checked ~ .customCheckBox:before{
    opacity: 1;
}
#reserve_write_modal_wrap .process_content a {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 26px;
    color: #929292;
    margin-left: 10px;
}
#reserve_write_modal_wrap .counselPC_save{
    width: 200px;
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #929292;
    background: #ffffff;
    border: 1px solid #b2b2b2;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
    padding: 8px 0;
}
#reserve_write_modal_wrap .counselPC_clear{
    cursor: pointer;
    width: 200px;
    font-family: 'Noto Sans KR';
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #929292;
    background: #ffffff;
    border: 1px solid #B2B2B2;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin: 0;
    padding: 8px 0;
    border-left: unset;
}
#reserve_write_modal_wrap .counselPC_clear:hover{
    color: #2B3643;
    background: #EBEBEB;
    border: 1px solid #EBEBEB;
    cursor: pointer;
}
#reserve_write_modal_wrap .counselCheck{
    display: flex;
    flex-direction: column;
    width: calc(50% - 8px);
    position: relative;
    margin: 4px;
}
#reserve_write_modal_wrap #counselCheck4{
    width: calc(100%);
    margin: 20px 0 0;
}
#reserve_write_modal_wrap .counselCheck label{
    position: absolute;
    top: 6px;
    left: 8px;
    cursor: unset;
    transition: all 0.2s ease-out;
}
#reserve_write_modal_wrap .counselCheck .motion{
    left: 4px;
    cursor: unset;
    top: -14px;
    transform: scale(0.8);
    background: transparent;
    text-align: center;
    width: unset;
    transition: all 0.2s ease-out;
    background: white;
    border: 0;
    border-radius: 4px;
    padding: 0 2px 2px;
    color: #617DC5;
}
#reserve_write_modal_wrap input[type="text"].clear + .motion,
#reserve_write_modal_wrap input[type="password"].clear + .motion,
#reserve_write_modal_wrap select.clear + .motion{
    display: none;
}
#reserve_write_modal_wrap input[type="text"].clear:focus + .motion,
#reserve_write_modal_wrap input[type="password"].clear:focus + .motion,
#reserve_write_modal_wrap select.clear:focus + .motion{
    display: block;
}
#reserve_write_modal_wrap input[type="text"].error + .motion,
#reserve_write_modal_wrap input[type="password"].error + .motion,
#reserve_write_modal_wrap select.error + .motion{
    display: none;
}
#reserve_write_modal_wrap input[type="text"].error:focus + .motion,
#reserve_write_modal_wrap input[type="password"].error:focus + .motion,
#reserve_write_modal_wrap select.error:focus + .motion{
    display: block;
    color: red;
}
#reserve_write_modal_wrap .counselCheck span{
    position: absolute;
    top: 4px;
    right: 8px;
    cursor: pointer;
}
#reserve_write_modal_wrap .counselCheck p {
    font-family: 'Noto Sans KR';
    font-weight: 500;
    font-size: 12px;
    color: red;
    height: 20px;
}
#reserve_write_modal_wrap .active .process_num{
    background: #EE7323;
}
#reserve_write_modal_wrap .complete .process_num:after{
    content: '';
    background: #EE7323;
    transition: background 1s;
}
#reserve_write_modal_wrap .complete .process_num{
    background: white;
    color: transparent;
    border: 1px solid #ee7323;
    transition: all 1s;
}
#reserve_write_modal_wrap .complete .process_num:before{
    content: '\e928';
    font-size: 16px;
    color: #EE7323;
    position: absolute;
    font-family:'xeicon';
}
#reserve_write_modal_wrap .active input,
#reserve_write_modal_wrap .complete input,
#reserve_write_modal_wrap .active select,
#reserve_write_modal_wrap.complete select,
#reserve_write_modal_wrap .active textarea,
#reserve_write_modal_wrap .complete textarea,
#reserve_write_modal_wrap .active .process_content span,
#reserve_write_modal_wrap .complete .process_content span{
    color: #232120;
}
#reserve_write_modal_wrap .active button,
#reserve_write_modal_wrap .complete button{
    color: #617DC5;
    border: 1px solid #617DC5;
}
#reserve_write_modal_wrap .active button:hover,
#reserve_write_modal_wrap .complete button:hover{
    color: white;
    background: #617DC5;
    border: unset;
}
#reserve_write_modal_wrap .active .process_content a,
#reserve_write_modal_wrap .complete .process_content a{
    color: #232120;
}
#reserve_write_modal_wrap .counselPC_save.allClear{
    color: white;
    background: #2A3760;
    border: 1px solid #2A3760;
    position: relative;
    padding: 8px 20px 8px 0;
    transition: background 1s, padding 1s;
}
#reserve_write_modal_wrap .counselPC_save:before{
    content: '';
    width: 0;
}
#reserve_write_modal_wrap .counselPC_save.allClear::before{
    content: '';
    position: absolute;
    top: 32px;
    left: 40px;
    width: 98px;
    height: 1px;
    background: white;
    transition: width 1s;
}
#reserve_write_modal_wrap .counselPC_save::after{
    content: '';
    left:38px;
}
#reserve_write_modal_wrap .counselPC_save.allClear::after{
    content: '';
    position: absolute;
    top: 13px;
    left: 136px;
    width: 20px;
    height: 20px;
    background: url("https://cheongmac.blob.core.windows.net/common/ic_reserve_pencil.svg") no-repeat center center/cover;
    transition: background 1s, left 1s;
}

/* **************************************** *
* 12) 모달전화하기 스타일 및 애니메이션
* **************************************** */
#reserve_tel {
    display: none;
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    font-family: 'NanumSquare', 'Noto Sans KR', sans-serif;
    color: #414144;
    background: rgba(119, 119, 119, 0.3);
}
#reserve_tel.on{
    display: block;
}
#reserve_tel .ic_color8_1 {
    position: relative;
    top: -2px;
    width: 30px;
    margin-right: 10px;
}
#reserve_tel > div {
    position: relative;
    background-color: #F3F3F3;;
    border: none;
    width: 100%;
    height: 100%;
    max-width: 430px;
    max-height: 774px;
    top: 50%;
    left: calc(50% + 400px);
    transform: translate(-50%, 100%);
    transition: transform 0.3s ease-out;
    padding: 16px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 40px;
}
#reserve_tel.on > div {
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-out;
}
#reserve_tel .reserve_tel_close {
    position: absolute;
    top: 55px;
    left: 46px;
    font-size: 24px;
    font-weight: bold;
    color: black;
    cursor: pointer;
    width: 32px;
    height: 32px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 100;
}
#reserve_tel.on .reserve_tel_close {
    opacity: 1;
    animation: opacity_rotale1 1.4s;
    /*모달 글쓰기 기능가져옴*/
}
#reserve_tel .reserve_tel_close:before {
    content: '';
    width: 24px;
    height: 2px;
    background: #535353;
    transform: rotate(
            225deg
    );
    position: absolute;
    top: 14px;
    left: 6px;
    transition: transform 2s;
}
#reserve_tel .reserve_tel_close:hover:before{
    transform: rotate(
            540deg
    );
    transition: transform 2s;
}
#reserve_tel .reserve_tel_close:after {
    content: '';
    width: 24px;
    height: 2px;
    background: #535353;
    transform: rotate(
            -225deg
    );
    position: absolute;
    top: 14px;
    left: 6px;
    transition: transform 2s;
}
#reserve_tel .reserve_tel_close:hover:after{
    transform: rotate(
            90deg
    );
    transition: transform 2s;
}
#reserve_tel .reserve_tel_view{
    position: relative;
    overflow: hidden;
    background: url("https://cheongmac.blob.core.windows.net/common/bg_reserve_tel_cover.svg") no-repeat center center/cover;
    width: 100%;
    height: 100%;
}
#reserve_tel .reserve_tel_view_contents{
    position: relative;
    padding: 132px 40px 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#reserve_tel .reserve_tel_view_contents_title{
    position: relative;
    font-family: 'Noto Sans KR';
    font-style: normal;
    margin-bottom: 56px;
}
#reserve_tel .reserve_tel_view_contents_title_main{
    position: relative;
    font-weight: 600;
    font-size: 44px;
    line-height: 40px;
    color: #000000;
}
#reserve_tel .reserve_tel_view_contents_title_sub {
    position: relative;
    font-weight: 400;
    font-size: 16px;
    line-height: 55px;
    color: #777777;
    display: flex;
    justify-content: center;
}
#reserve_tel .reserve_tel_view_contents_detail{
    position: relative;
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    margin-bottom: 66px;
    width: 100%;
    font-size: 18px;
    line-height: 26px;
    color: #333333;
}
#reserve_tel .reserve_tel_view_contents_detail_inputbox{
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    margin-bottom: 30px;
    height: 46px;
    z-index: 1;
}
#reserve_tel .reserve_tel_view_contents_detail_inputbox label {
    width: 80px;
}
#reserve_tel .reserve_tel_view_contents_detail_inputbox input {
    width: calc(100% - 80px);
    background: #E8EBF5;
    border: 1px solid #617DC5;
    box-sizing: border-box;
    border-radius: 3px;
    height: 100%;
    padding: 0 12px;
}
#reserve_tel .reserve_tel_view_contents_detail_inputbox p {
    margin-left: 80px;
    font-size: 12px;
    color: red;
    height: 20px;
}
#reserve_tel .reserve_tel_view_contents_detail_selectbox{
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    height: 46px;
    background: white;
    margin-bottom: 30px;
    z-index:10;
}
#reserve_tel .reserve_tel_view_contents_detail_selectbox input{
    width: calc(100% - 44px);
    height: 100%;
    border: 1px solid #617DC5;
    border-right: none;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index:11;
    padding: 0 12px;
}
#reserve_tel .reserve_tel_view_contents_detail_selectbox label{
    position: absolute;
    left: 10px;
    z-index:12;
}
#reserve_tel .selectbox_arrow {
    position: absolute;
    left: calc(100% - 44px);
    width: 44px;
    height: 100%;
    border: 1px solid #617DC5;
    z-index: 2;
    background: white;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
#reserve_tel .selectbox_arrow:before {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 10px;
    height: 10px;
    border: 2px solid #617DC5;
    border-right: none;
    border-top: none;
    transform: rotate(-45deg);
    transition: transform 1s;
}
#reserve_tel .reserve_tel_view_contents_detail_selectbox.on .selectbox_arrow{
    background: #E8EBF5;
    cursor: pointer;
}
#reserve_tel .reserve_tel_view_contents_detail_selectbox.on .selectbox_arrow:before{
    transform: rotate(135deg);
    transition: transform 1s;
}
#reserve_tel .selectbox_select{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 3px;
    z-index: 2;
}
#reserve_tel .selectbox_select ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 3px;
}
#reserve_tel .selectbox_select li {
    padding: 4px 20px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid black;
    background: white;
    position: absolute;
    width: 100%;
    height: 40px;
    transition: transform 0.6s;
    transform: translateY(0);
}

#reserve_tel .reserve_tel_view_contents_detail_selectbox.on li:nth-child(1) {
    transform: translateY(calc(40px + 10px));
    transition: transform 1.2s;
}
#reserve_tel .reserve_tel_view_contents_detail_selectbox.on li:nth-child(2) {
    transform: translateY(calc(74px + 20px));
    transition: transform 1.4s;
}
#reserve_tel .reserve_tel_view_contents_detail_selectbox.on li:nth-child(3) {
    transform: translateY(calc(108px + 30px));
    transition: transform 1.6s;
}
#reserve_tel .reserve_tel_view_contents_detail_selectbox.on li:nth-child(4) {
    transform: translateY(calc(142px + 40px));
    transition: transform 1.8s;
}
#reserve_tel .selectbox_select p {
    display: inline-flex;
    align-items: center;
    height: 100%;
}
#reserve_tel .reserve_tel_view_contents_detail_checkbox {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    display: inline-flex;
    align-content: center;
    align-items: center;
    height: 46px;
    margin-bottom: 40px;
    width: 100%;
    justify-content: space-between;
}
#reserve_tel .reserve_tel_view_contents_detail_checkbox span {
    color: #929292;
}
#reserve_tel .reserve_tel_view_contents_detail_checkbox a {
    font-weight: 600;
    color: #929292;
    margin-left: 10px;
}
#reserve_tel .reserve_tel_view_contents_detail_checkbox label {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    z-index: 3;
    display: inline-block;
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: relative;
    margin: 0 8px;
    border: none;
}
#reserve_tel #checkbox_label_input{
    display: none;
}
#reserve_tel .checkbox_label_custom{
    width: 24px;
    height: 24px;
    position: absolute;
    text-align: center;
    font-size: 18px;
    line-height: 26px;
    padding: 0;
    margin: 0;
    border-radius: 100%;
    border: 1px solid #B6B6B6;
    display: inline-block;
}
#reserve_tel .checkbox_label_custom:before {
    content: '\e928';
    text-align: center;
    font-family: 'xeicon';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
    color: #B6B6B6;
    opacity: 0.5;
    transition: opacity 1s;
}
#reserve_tel #checkbox_label_input:checked ~ .checkbox_label_custom {
     background-color: #617DC5;
     border: none;
}
#reserve_tel #checkbox_label_input:checked ~ .checkbox_label_custom:before {
    color: white;
    opacity: 1;
}
#reserve_tel .reserve_tel_view_contents_detail_button{
    width: 100%;
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
}
#reserve_tel .reserve_tel_view_contents_detail_button button {
    color: #ffffff;
    background: #2A3760;
    border-radius: 3px;
    margin: 0;
    padding: 8px 0;
    display: inline-flex;
    align-items: center;
    height: 50px;
    width: 100%;
    justify-content: center;
    position: relative;
}
#reserve_tel .reserve_tel_view_contents_detail_button button:before{
    content: '';
    position: absolute;
    top: 40px;
    left: 109px;
    width: 0;
    height: 1px;
    background: white;
}
#reserve_tel .reserve_tel_view_contents_detail_button.on button:before {
    content: '';
    width: 100px;
    transition: width 1s;
}
#reserve_tel .reserve_tel_view_contents_detail_button button:after {
     content: '';
     position: absolute;
     top: 20px;
     left: 109px;
     width: 20px;
     height: 20px;
     background: none;
     transition: background 1s, left 1s;
 }
#reserve_tel .reserve_tel_view_contents_detail_button.on button:after {
    content: '';
    left: 209px;
    background: url('https://cheongmac.blob.core.windows.net/common/ic_reserve_pencil.svg') no-repeat center center/cover;
    transition: background 1s, left 1s;
}

/* **************************************** *
* 14) 모바일 전화상담 스타일 및 애니메이션
* **************************************** */

#reserve_search_list .switch {
    position: relative;
    display: flex;
    margin: 0;
    width: 100%;
    height: 44px;
    padding: 0;
}
#reserve_search_list .switch label{
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 44px;
    text-align: center;
    color: white;
    position: absolute;
    z-index: 3;
    left: 25%;
    transform: translateX(-50%);
    height: 100%;
    padding: 0;
    transition: color 1s;
}
#reserve_search_list .switch #counsel_type_check2{
    left: 75%;
    color: #777777;
    transition: color 1s;
}
#reserve_search_list .switch #counsel_type_check:checked ~ #counsel_type_check1 {
    color: #777777;
    transition: color 1s;
}
#reserve_search_list .switch #counsel_type_check:checked ~ #counsel_type_check2 {
    color: white;
    transition: color 1s;
}
#reserve_search_list .switch input {
    opacity: 0;
    width: 0;
    height: 0;
    z-index:2;
}

#reserve_search_list .slider {
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #EBEBEB;
    -webkit-transition: .4s;
    transition: .4s;
    z-index: 2;
}
#reserve_search_list .slider:before {
    position: relative;
    display: inline-block;
    content: "";
    height: calc(100% - 8px);
    margin: 4px;
    width: calc(50% - 8px);
    left: 0;
    top: 0;
    background-color: #34426F;
    transition: .4s;
    z-index: 3;
}
#reserve_search_list input:checked ~ .slider:before {
    -webkit-transform: translateX(calc(100% + 8px));
    -ms-transform: translateX(calc(100% + 8px));
    transform: translateX(calc(100% + 8px));
}
#reserve_search_list .slider.round {
    border-radius: 34px;
    width: 100%;
    height: 100%;
    top: 0;
}
#reserve_search_list .slider.round:before {
    border-radius: 40px;
}

@media screen and (max-width: 1140px){
    #counseling .modal_new_title_wrap{
        margin-bottom: 16px;
    }
    #counseling #write{
        display: none;
    }
    #counseling #write.on{
        display: block;
    }
    #counseling #tel{
        display: none;
    }
    #counseling #tel.on{
        display: block;
    }
    #counseling #tel .ic_color8_1 {
        position: relative;
        top: -1px;
        width: 18px;
        margin-right: 12px;
    }
    #counseling #tel .counselprocess{
        position: relative;
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 400;
        margin-bottom: 22px;
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        color: #232120;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_inputbox{
        position: relative;
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        margin-bottom: 14px;
        height: 40px;
        z-index: 1;
        width: 100%;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_inputbox input {
        width: calc(100%);
        box-sizing: border-box;
        background: #EBEBEB;
        border-radius: 2px;
        height: 100%;
        padding: 0 12px;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_inputbox input::placeholder{
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        color: #232120;
        padding: 2px 6px;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_inputbox p {
        margin-left: 80px;
        font-size: 12px;
        color: red;
        height: 20px;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_selectbox{
        position: relative;
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        width: 100%;
        height: 40px;
        background: white;
        margin-bottom: 35px;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_selectbox input{
        width: calc(100% - 44px);
        height: 100%;
        border: 1px solid #617DC5;
        border-right: none;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        z-index:10;
        padding: 0 12px;
        background: white;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_selectbox label{
        position: absolute;
        left: 10px;
        z-index:11;
        width: 80%;
    }
    #counseling #tel .m_selectbox_arrow {
        position: absolute;
        left: calc(100% - 44px);
        width: 44px;
        height: 100%;
        border: 1px solid #617DC5;
        z-index: 2;
        background: white;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }
    #counseling #tel .m_selectbox_arrow:before {
        content: '';
        position: absolute;
        top: 12px;
        right: 16px;
        width: 10px;
        height: 10px;
        border: 2px solid #617DC5;
        border-right: none;
        border-top: none;
        transform: rotate(-45deg);
        transition: transform 1s;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_selectbox.on .m_selectbox_arrow{
        background: #E8EBF5;
        cursor: pointer;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_selectbox.on .m_selectbox_arrow:before{
        transform: rotate(135deg);
        transition: transform 1s;
    }
    #counseling #tel .m_selectbox_select{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border-radius: 3px;
        z-index: 2;
    }
    #counseling #tel .m_selectbox_select ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border-radius: 3px;
    }
    #counseling #tel .m_selectbox_select li {
        padding: 4px 20px;
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid #617DC5;
        background: white;
        position: absolute;
        width: 100%;
        height: 40px;
        transition: transform 0.6s;
        transform: translateY(0);
        z-index:8;
    }

    #counseling #tel .m_reserve_tel_view_contents_detail_selectbox.on li:nth-child(1) {
        transform: translateY(calc(40px + 5px));
        transition: transform 1.2s;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_selectbox.on li:nth-child(2) {
        transform: translateY(calc(80px + 10px));
        transition: transform 1.4s;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_selectbox.on li:nth-child(3) {
        transform: translateY(calc(120px + 15px));
        transition: transform 1.6s;
    }
    #counseling #tel .m_reserve_tel_view_contents_detail_selectbox.on li:nth-child(4) {
        transform: translateY(calc(160px + 20px));
        transition: transform 1.8s;
    }
    #counseling #tel .m_selectbox_select p {
        display: inline-flex;
        align-items: center;
        height: 100%;
        font-size: 12px;
    }
    #counseling p#privacy_chk a{
        color: #617DC5;
    }
    #counseling .close {
        position: absolute;
        right: 20px;
        top: 10px;
        font-size: 32px;
        font-weight: 300;
        z-index: 100;
        color: #535353;
    }
}

/* **************************************** *
* 15) 파일첨부 박스 및 리스트 스타일
* **************************************** */
.filebox {
    position: relative;
    display: flex;
    margin-top: 20px;
}
.filebox label {
    border-radius: 5px;
    border: unset!important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #929292;
    cursor: pointer;
    height: 34px!important;
    width: 100px!important;
    margin: 0!important;
}
.filebox input[type='file'] {
    position: relative;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
.filelist {
    position: relative;
    top: 0;
    width: calc(100% - 100px);
}
.filelist .filelist_menu{
    position: relative;
    width: 100%;
    display: flex;
}
.filelist .filelist_menu input[type='text'] {
    display: inline-block;
    font-style: normal;
    font-weight: 500;
    font-size: 12px!important;
    line-height: 12px;
    height: 28px!important;
    padding: 4px 10px!important;
    border: unset!important;
    border-radius: unset!important;
    width: calc(100% - 78px)!important;
    color: #333333!important;
}
.filelist .filelist_menu span {
    font-family: 'Pretendard';
    display: inline-flex;
    align-items: center;
    font-style: normal;
    font-weight: 500;
    font-size: 10px!important;
    line-height: 12px;
    height: 28px!important;
    padding: 4px 10px!important;
    border: unset!important;
    border-radius: unset!important;
    width: 70px!important;
    color: #949494!important;
}
.filelist .filelist_menu button{
    display: inline-flex;
    color: #fff;
    font-size: 14px;
    border: unset!important;
    background-color: unset!important;
    border-radius: unset!important;
    cursor: pointer;
    height: 28px;
    width: 28px;
    align-items: center;
    justify-content: center;
    position: relative;
}
.filelist button:before{
    content: '';
    border: 1px solid #929292!important;
    transform: rotate(-135deg);
    width: 15px;
    position: absolute;
}
.filelist button:after{
    content: '';
    border: 1px solid #929292!important;
    transform: rotate(135deg);
    width: 15px;
    position: absolute;
}
/* 다운로드 첨부물 확인*/
.cont_attactments{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.cont_attactments .attactment_name {
    display: flex;
    border: 1px solid #DDDDDD;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    max-width: 260px;
    max-height: 60px;
    margin: 20px;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
}
.cont_attactments .name_tag{
    display: flex;
    flex-direction: column;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.05em;
    color: #333333;
    position: relative;
    width: calc(100% - 40px);
}
.cont_attactments .name_tag input[type='text'] {
    width: 100%;
    border: unset;
}
.cont_attactments .name_tag .tag_fileSize{
    font-weight: 300;
    font-size: 14px;
    color: #949494;
}

.cont_attactments .name_button{
    width: 20px;
    height: 24px;
    background: url('https://cheongmac.blob.core.windows.net/common/ic_reserve_download.svg') center center/cover no-repeat;
}

@media screen and (max-width: 1140px){
    #counseling .full:nth-child(5){
        flex-direction: column;
    }
    .m_filebox {
        position: relative;
        display: flex;
        margin-top: 20px;
    }
    .m_filebox label {
        border-radius: 5px;
        border: unset!important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background-color: #929292;
        cursor: pointer;
        height: 34px!important;
        width: 100px!important;
        margin: 0!important;
        font-size:16px!important;
    }
    .m_filebox input[type='file'] {
        position: relative;
        width: 0;
        height: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
    }
    .m_filelist {
        position: relative;
        top: 0;
        width: calc(100% - 100px);
    }
    .m_filelist .m_filelist_menu{
        position: relative;
        width: 100%;
        display: flex;
    }
    .m_filelist .m_filelist_menu input[type='text'] {
        display: inline-block;
        font-style: normal;
        font-weight: 500;
        font-size: 10px!important;
        line-height: 12px;
        height: 20px!important;
        padding: 4px 10px!important;
        border: unset!important;
        border-radius: unset!important;
        width: calc(100% - 90px)!important;
        color: #333333!important;
        background: transparent!important;
        margin: 0 0 10px 0!important;
    }
    .m_filelist .m_filelist_menu span {
        font-family: 'Pretendard';
        display: inline-flex;
        align-items: center;
        font-style: normal;
        font-weight: 500;
        font-size: 8px!important;
        line-height: 12px;
        height: 20px!important;
        padding: 4px 10px!important;
        border: unset!important;
        border-radius: unset!important;
        width: 70px!important;
        color: #949494!important;
    }
    .m_filelist .m_filelist_menu button{
        display: inline-flex;
        color: #fff;
        font-size: 10px;
        border: unset!important;
        background-color: unset!important;
        border-radius: unset!important;
        cursor: pointer;
        padding: 0!important;
        margin: 0!important;
        height: 20px!important;
        width: 20px!important;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .m_filelist button:before{
        content: '';
        border: 1px solid #929292!important;
        transform: rotate(-135deg);
        width: 15px;
        position: absolute;
    }
    .m_filelist button:after{
        content: '';
        border: 1px solid #929292!important;
        transform: rotate(135deg);
        width: 15px;
        position: absolute;
    }
    .cont_attactments{
        flex-direction: column;
    }
    .cont_attactments .attactment_name {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin: 10px;
    }
}