@charset "utf-8";


/***** 진료예약 - 진료예약새창 *****/
.rsv_newpage{width:100%;min-width:320px;word-break:keep-all;}
.rsv_newpage .top{display: flex;align-items: center;padding-right: 20px;height:250px;background:#dcf2f3;border-bottom-left-radius: 30%;}
.rsv_newpage .top img{position:relative;top:15px;width:176px;height:234px;}
.rsv_newpage .top dl {display: flex;flex-direction: column;justify-content: center;align-items: flex-end;}
.rsv_newpage .top dl dt{font-size:5rem;font-family: 'KBO-Dia-Gothic_bold';line-height: 1;color: #fff;letter-spacing: -1px;text-shadow: -1px 0 #06939f, 0 1px #06939f, 1px 0 #06939f, 0 -1px #06939f;}
.rsv_newpage .top dl dd{color:#06939f;font-weight: 600;font-size: 1.8rem;text-align: right;margin-top: 15px;}
.rsv_newpage .box{margin-top:30px;background:#fff;padding:0 20px;}
.rsv_newpage .box .stxt{margin-top:15px;text-align:center;font-size:20px;color:#4758bf;letter-spacing:-0.05em;}
.rsv_newpage .box .stxt .eng{font-weight:600;}
.rsv_newpage .box .cont{padding:20px 30px;}
.rsv_newpage .box ul.dot_list{width:auto;padding:30px 20px;background:#f4f4f4;border-radius:10px;}
.rsv_newpage .box ul.dot_list li{font-size:1.7rem;font-weight:500;color:#222;padding-left: 30px;margin-bottom: 15px;background:url(/img/01reserve/icon_overcome_tit.png) no-repeat 0 3px;}
.rsv_newpage .box ul.dot_list li:last-child{margin-bottom: 0;}
.rsv_newpage .box ul.dot_list li span{font-size:14px;color:#666;}
.rsv_newpage .box .btn_wrap{width:100%;text-align:center;}

.rsv_newpage.dclist .top{display:block;height: auto;padding-top: 30px;text-align: center;color:#141945;border-radius:0;background:#fff;}
.rsv_newpage.dclist .top .btxt{font-size:4rem;font-family: 'KBO-Dia-Gothic_bold';}
.rsv_newpage.dclist .top .stxt{font-size:2rem;font-weight:700;}
.rsv_newpage.dclist .box{height: 328px;margin-top: 20px;background:#e3f5ff url(/img/01reserve/footer_list.png)no-repeat center bottom;padding-top: 25px;}
.rsv_newpage.dclist .box .daylist{display:flex;flex-wrap:wrap;justify-content: space-between;}
.rsv_newpage.dclist .box .daylist p{width: calc(50% - 5px);font-weight: 600;text-align: center;padding: 15px 20px;border: 1px solid #8fd4ff;box-sizing: border-box;background: #ffffff69;border-radius: 5px;    margin-bottom: 10px;}

/*처음진료 방문예약*/
.gray_line{position:relative;border:1px solid #d3d3d3;border-radius:15px;padding:50px;background:url(/img/01reserve/reserve_img.png)no-repeat right bottom;}
.gray_line .btit{font-size:2.2rem;line-height: 1.3;font-weight:700;color:#014099;margin-bottom:15px;}
.gray_line .scroll_down{position:absolute;top: 50%;right: -65px;transform: translate(0,-50%);width: 0;height: 160px;text-transform: uppercase;text-align: center;font-weight: 600;display: flex;justify-content: center;line-height: 1.2;color: #0070ff;}
.gray_line .scroll_down .arrow{position: absolute;top: 0;left: -3px;height: 25px;width: 4px;background: #0070ff;animation: animate 3s infinite;border-radius: 50px;}
.gray_line .scroll_down .arrow:before{content: '';position: absolute;bottom: 0;left: -7px;width: 15px;height: 15px;border-bottom: 4px solid #0070ff;border-right: 4px solid #0070ff;transform: rotate(45deg);/* border-radius: 50px; */}
.gray_line .btn_w{padding-bottom:0;}

@keyframes animate
{
    0%
    {
        transform: translateY(0);
        opacity: 0.5;
    }
    50%
    {
        transform: translateY(80px);
        opacity: 1;
    }
    100%
    {
        transform: translateY(160px);
        opacity: 0;
    }
}

.rsv_form{/* font-size:1.6rem;color: #555; */border:1px dashed #d3d3d3;border-radius:15px;padding:50px;}
.form_argree{padding-right: 50px;max-height: 200px;font-size:1.6rem;color: #555;overflow-y: scroll;}
.form_argree::-webkit-scrollbar{width:6px;background-color:rgba(0,0,0,0.15);border-radius:20px;}
.form_argree::-webkit-scrollbar-thumb{background-color:#888;border-radius:20px;}
.check_box{display:flex;justify-content: space-between;align-items: flex-end;}
.check_box .chk_area{display: flex;gap: 10px;}

.call_wrap{background: #f9f5f2;padding: 40px 60px;border-radius: 20px;}
.call_wrap .call_reserv{display:flex;justify-content: space-between;align-items: center;}
.call_wrap .call_reserv dl dt{font-family: 'KBO-Dia-Gothic_bold';font-size:3rem;color:#977252;}
.call_wrap .call_reserv dl dd{-webkit-text-stroke: 1px #977252; font-size: 7rem;color: transparent;font-weight: 900;line-height: 1;}
.call_wrap .call_reserv ul.list li{font-size:1.9rem;}
.call_wrap .health{display:flex;color:#977252;}
.call_wrap .health strong{flex-shrink: 0;margin-right:15px;font-size:1.9rem;}

.call_wrap .img_wrap{position:relative;overflow: hidden;margin-top: 20px;}
.call_wrap .img_wrap:before{position: absolute;content: ""; left: 0; top: 0;z-index: 2; width:100%;height: 100%;background: #fff;animation: img_wrap cubic-bezier(0, .30, .43, 1) 0.9s 0.3s both;}

@keyframes img_wrap {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

.call_wrap ul.list li{display:flex;}
.call_wrap ul.list li span{margin-right:15px;}

/*모바일 간편예약*/
.mobile_reserv{padding-top: 30px;border-top: 1px dashed #ccc;margin-top: 50px;}
.appguide{display:flex;gap:4%;flex-wrap:wrap;}
.appguide dl{width:22%;border:1px solid #ccc;padding:35px 25px;padding-top: 100px;text-align:center;box-sizing:border-box;border-radius:15px;background:no-repeat center top 35px;}
.appguide dl:nth-child(n+5){margin-top:4%;}
.appguide dl.no1{background-image:url(/img/01reserve/app01.gif);}
.appguide dl.no2{background-image:url(/img/01reserve/app02.gif);}
.appguide dl.no3{background-image:url(/img/01reserve/app03.gif);}
.appguide dl.no4{background-image:url(/img/01reserve/app04.gif);}
.appguide dl.no5{background-image:url(/img/01reserve/app05.gif);}
.appguide dl.no6{background-image:url(/img/01reserve/app06.gif);}
.appguide dl.no7{background-image:url(/img/01reserve/app07.gif);}
.appguide dl.no8{background-image:url(/img/01reserve/app08.gif);}
.appguide dl dt{font-size:1.8rem;font-weight:700;}
.appguide dl dd{font-size:1.6rem;color:#333;line-height: 1.4;margin-top:5px;}

.a_care_wrap{padding-top: 30px;border-top: 1px dashed #ccc;margin-top: 50px;}


/*제증명서 발급안내*/
.ic3d_wrap{display: flex;flex-wrap:wrap;border-top:2px solid #000;}
.ic3d_wrap dl{width:50%;padding:50px 0;border-bottom:1px dashed #ccc;background:no-repeat right 30px top 50px;box-sizing:border-box;}
.ic3d_wrap dl:nth-child(odd){padding-right:30px;}
.ic3d_wrap dl:nth-child(even){padding-left:30px;}
.ic3d_wrap dl.ic01{background-image:url(/img/01reserve/ic3d01.png);}
.ic3d_wrap dl.ic02{background-image:url(/img/01reserve/ic3d02.png);}
.ic3d_wrap dl.ic03{background-image:url(/img/01reserve/ic3d03.png);}
.ic3d_wrap dl.ic04{background-image:url(/img/01reserve/ic3d04.png);}
.ic3d_wrap dl.ic05{background-image:url(/img/01reserve/ic3d05.png);}
.ic3d_wrap dl.ic06{background-image:url(/img/01reserve/ic3d06.png);}
.ic3d_wrap dl.ic07{background-image:url(/img/01reserve/ic3d07.png);}
.ic3d_wrap dl.ic08{background-image:url(/img/01reserve/ic3d08.png);}
.ic3d_wrap dl.ic09{background-image:url(/img/01reserve/ic3d09.png);}
.ic3d_wrap dl dt{color:#0e316c;font-size:2rem;font-weight:700;margin-bottom:25px;}
.ic3d_wrap dl dd .dot_l li{position:relative;padding-left:15px;}
.ic3d_wrap dl dd .dot_l li:before{position:absolute;content:'';left:0;top:10px;width:5px;height:5px;background:#000;border-radius:50%;}

/*본인인증*/
.gray_box.phone{position:relative;}
.gray_box.phone:before{position:absolute;content:'';right:0;top: -50px;width:308px;height:309px;/*background:url(/img/01reserve/phone_bg.png)no-repeat;*/}
.gray_box.phone .ipin_graybox .btxt{font-size: 2.2rem;font-weight:700;color:#277afa;margin-bottom:15px;}
.gray_box.phone .ipin_txtbox .btxt{font-weight:700;margin-bottom:5px;}
.gray_box.phone .agree_area{border: 1px dashed #277afa;border-radius: 10px;padding: 20px;margin-top: 20px;background: #ebf0f7;}



/*환자진료기록 사본발급안내*/
ul.prc.over{align-items: center}
ul.prc li.overlist{position:relative;}
ul.prc li.overlist:before{top:50%;margin-top:-38px;}
ul.prc li.overlist:after{top:50%;margin-top:-52px;}
ul.prc li.overlist dl{padding:0 15px;background:#fff;box-sizing:border-box}
ul.prc li.overlist dl dt{width:100px;height:100px}
ul.prc li.overlist dl dt:before, 
ul.prc li.overlist dl dt:after{display:none;}
ul.prc.over li dl dd{height: 60px}
ul.prc li.overlist dl:not(:first-child){margin-top:20px;}
ul.prc li.overlist dl:first-child{position:relative;}
ul.prc li.overlist dl:first-child:before,
ul.prc li.overlist dl:first-child:after{position:absolute;content:'';bottom:25px;width:5px;height:5px;background:#02439f;border-radius:50%;}
ul.prc li.overlist dl:first-child:before{right:-6px;}
ul.prc li.overlist dl:first-child:after{left:-6px;}

/*예약확인,취소*/
.rsv_form_patient{border: 1px dashed #ccc;border-radius: 20px;padding: 40px;}
.rsv_form_patient li .phonenum{display: flex;align-items: center;justify-content: center;gap:15px;}
.rsv_form_patient li .phonenum .phone_input{display: flex;align-items: center;gap:10px;}
.rsv_form_patient li .phonenum .phone_input input{max-width: 180px;height:45px;border: 1px solid #ccc;box-sizing:border-box;font-size: 1.7rem;text-align: center;}
.rsv_form_patient li .phonenum p{font-size: 3rem;font-weight: 700;}
.rsv_form_patient li .certify{display: flex;align-items: center;justify-content: center;gap:15px;margin-top:20px;background: #f1f8fb;border-radius: 10px;padding: 25px;}
.rsv_form_patient li .certify input{height:45px;border: 1px solid #ccc;box-sizing:border-box;font-size: 1.7rem;text-align: center;}
.rsv_form_patient li .certify label{font-weight:700;}





/********************1400********************/
@media all and (max-width:1400px){

.gray_line .scroll_down{display:none;}

/*본인인증*/
.gray_box.phone:before{top: -5px;width: 255px;height: 255px;background-size: cover;}


}

/********************1300********************/
@media all and (max-width:1300px){

/*본인인증*/
.gray_box.phone:before{width: 200px;height: 200px;}


}




/********************태블릿********************/
@media all and (max-width:1024px){

.gray_line{padding:30px;background-position: right -20px bottom -20px;background-size: 180px;}

.call_wrap.mt70{margin-top:45px !important}
.call_wrap{padding: 35px;}
.call_wrap .call_reserv{display:block;}
.call_wrap .call_reserv dl{margin-bottom:30px;text-align:center}
.call_wrap .call_reserv dl dt{font-size:2.5rem;}
.call_wrap .call_reserv dl dd{font-size:5rem}
.call_wrap .call_reserv ul.list li{font-size:1.7rem;}
.call_wrap .health{flex-direction: column;}
.call_wrap .health.mt30{margin-top:15px !important;}
.call_wrap .health strong{font-size: 1.8rem;}


.appguide{gap:3%;margin-top:-3%;}
.appguide dl{margin-top:3% !important;padding:85px 20px 25px;width:31.33%;background: no-repeat center top 17px}
.appguide dl dd br{display:none;}



.ic3d_wrap dl{padding:35px 0;background-position:right 15px top 25px;}
.ic3d_wrap dl:nth-child(odd){padding-right:15px}
.ic3d_wrap dl:nth-child(even){padding-left:15px}

/*본인인증*/
.gray_box.phone:before{display:none;}
.gray_box.phone .ipin_graybox .btxt{font-size: 2rem;}


}




/********************모바일********************/
@media all and (max-width:767px){

.gray_line{padding:25px;background:none}
.gray_line .btit{font-size:2rem;}
.gray_line .btn_w{padding-bottom:0;}


.line_gray.chatbot .btn_w{padding-bottom:0;}

.line_box.mt50{margin-top:30px !important}


.appguide dl{width:48.5%;}
.appguide dl dd{margin-top:10px;line-height:1.3;}


.ic3d_wrap dl{background-size: 45px;}
.ic3d_wrap dl dt{padding-right: 50px}


ul.prc.over{display:block;}
ul.prc li.overlist{flex-direction:row;gap: 4%;align-items: flex-start;}
ul.prc li.overlist dl:first-child:before,
ul.prc li.overlist dl:first-child:after{display:none;}
ul.prc li.overlist dl{padding:0;width:48% !important;}
ul.prc li.overlist dl:not(:first-child){margin-top:0;}
ul.prc.over li dl dt{height:60px !important}
ul.prc.over li dl dd{height:auto}
ul.prc.over li dl dd br{display:none;}
ul.prc li.overlist,
ul.prc li.mw100{width:100% !important;}
ul.prc.over li dl dd{padding:0 5px;word-break:break-all;box-sizing:border-box;}

/*본인인증*/
.gray_box.phone{margin-bottom: 0;}

/*예약확인,취소*/
.rsv_form_patient{padding: 20px;}
.rsv_form_patient li .phonenum{flex-direction: column;}
.rsv_form_patient li .phonenum p{font-size:2.2rem;}
.rsv_form_patient li .phonenum .phone_input{width: 100%;gap:0;justify-content: center;}
.rsv_form_patient li .phonenum .phone_input input{max-width: 20%;width: 20%;}
.rsv_form_patient li .phonenum .phone_input > a {display: flex;align-items: center;justify-content: center;height: 45px;margin-left:5px;padding: 5px;box-sizing: border-box;font-size:1.5rem;}
.rsv_form_patient li .certify{flex-wrap: wrap;padding:20px;}

}


/********************모바일********************/
@media all and (max-width:480px){

.ic3d_wrap{display:block;}
.ic3d_wrap dl{padding:20px 10px !important;width:auto !important;background-position: right 10px top 10px;}
.ic3d_wrap dl dt{margin-bottom: 15px}

/*예약확인,취소*/
.rsv_form_patient li .certify > a{max-width: 100%;width:100%;}

}

/********************모바일********************/
@media all and (max-width:448px){

.rsv_newpage .top{padding-right:2vw;box-sizing:border-box;}
.rsv_newpage .top img{width: 150px; height: auto;}
.rsv_newpage .top dl dt{font-size: 4rem;}
.rsv_newpage .box{padding: 0 2vw;box-sizing:border-box;}
.rsv_newpage .box ul.dot_list{padding:20px;}
.rsv_newpage .btn_w a{max-width: 48%;}

}