@charset "utf-8";
@import url("font.css");

#wrap {position: relative; min-width: 320px; background: #f6f6f6;}
.inner {padding: 0 20px;}

/* header */
.main_header {
    position: relative; width: 100%; z-index: 10;
    border-radius: 0 0 20px 20px; margin:0 auto; 
    background-image: -moz-linear-gradient( 120deg, rgba(255,246,194,0.99608) 0%, rgb(255,224,193) 29%, rgb(255,202,192) 57%, rgb(255,157,189) 100%);
    background-image: -webkit-linear-gradient( 120deg, rgba(255,246,194,0.99608) 0%, rgb(255,224,193) 29%, rgb(255,202,192) 57%, rgb(255,157,189) 100%);
    background-image: -ms-linear-gradient( 120deg, rgba(255,246,194,0.99608) 0%, rgb(255,224,193) 29%, rgb(255,202,192) 57%, rgb(255,157,189) 100%);
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    height: auto;
    padding-bottom: 20px;
}

.main_header .fix {
    position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: initial; z-index: 100;
}
.main_header .fix .logo01,
.main_header .fix .logo02 {float: left; width: 66%; height: 50px; padding-left: 20px; margin-right: 10px;}
.main_header .fix .logo01 a{display: block; width: 200px; height: 30px; overflow: hidden; margin-top: 10px; background: url('../images/logo02.svg') no-repeat;}
.main_header .fix .logo02 a{display: block; width: 200px; height: 30px; overflow: hidden; margin-top: 10px; background: url('../images/logo.svg') no-repeat;}


.main_header .fix .logo2 a{display: block; width: 200px; height: 30px; overflow: hidden; margin-top: 10px; background: url('../images/logo02.svg') no-repeat;}
.main_header .fix .logo3 a{display: block; width: 200px; height: 30px; overflow: hidden; margin-top: 10px; background: url('../images/logo02.svg') no-repeat;}
.main_header .fix .logo5 a{display: block; width: 200px; height: 30px; overflow: hidden; margin-top: 10px; background: url('../images/logo02.svg') no-repeat;}
.main_header .fix .logo7 a{display: block; width: 200px; height: 30px; overflow: hidden; margin-top: 10px; background: url('../images/logo02.svg') no-repeat;}
.main_header .fix .logo9 a{display: block; width: 200px; height: 30px; overflow: hidden; margin-top: 10px; background: url('../images/logo02.svg') no-repeat;}

#gnb_top.fix {
    background-image: -moz-linear-gradient( 120deg, rgb(255 219 192) 0%, rgb(255 206 192) 29%, rgb(255 185 191) 57%, rgb(255 161 186) 100%);
    background-image: -webkit-linear-gradient( 120deg, rgb(255 219 192) 0%, rgb(255 206 192) 29%, rgb(255 185 191) 57%, rgb(255 161 186) 100%);
    background-image: -ms-linear-gradient( 120deg, rgb(255 219 192) 0%, rgb(255 206 192) 29%, rgb(255 185 191) 57%, rgb(255 161 186) 100%);
    border-radius: 0 0 20px 20px;
    /* 
        작성자: 임재성
        작성일자: 2025.02.18
        설명:iOS SafeArea 관련 수정 
    */
    padding-top: env(safe-area-inset-top); 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

.main_header .header_box {
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    padding-top: calc(env(safe-area-inset-top) + 50px);
}
.main_header .header_box .main_tit {height: 70px; padding: 20px;}
.main_header .header_box .main_tit .tit01{float: left; width: 65%; font-size: 2.0rem; font-weight: 500; word-break: keep-all; color: #332b46; line-height: 1.2em; text-align: left;}
.main_header .header_box .main_tit .tit02{float: right;}
.main_header .header_box .reserv {
    position: absolute; 
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    top: calc(env(safe-area-inset-top) + 130px); 
    left: 20px; right: 20px; height: 90px; padding: 20px 10px; border-radius: 20px; background-color: #ffffff; box-shadow: 0px 5px 15px 0px rgba(187, 178, 201, 0.4); box-sizing: border-box; 
}
.main_header .header_box .reserv:active {background: #ededed;}
.main_header .header_box .reserv a {display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(35%,auto)); gap: 5px; color: #434656;}
.main_header .header_box .reserv .text01{font-size: 2.0rem; font-weight: 500; line-height: 5.0rem; color: #ff688c;}
.main_header .header_box .reserv .text01 img {margin-left: 10px;}
.main_header .header_box .reserv .text02{ font-size: 1.4rem; font-weight: 500; padding-top: 5px; word-break: keep-all;}
    /* 간편예약 3줄일 경우 */
.main_header .header_box .reserv_02 {position: absolute; top: 130px; left: 20px; right: 20px; height: 90px; padding: 10px; border-radius: 20px; background-color: #ffffff; box-shadow: 0px 5px 15px 0px rgba(187, 178, 201, 0.4); box-sizing: border-box; }
.main_header .header_box .reserv_02:active {background: #ededed;}
.main_header .header_box .reserv_02 a {display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(35%,auto)); gap: 5px; color: #434656;}
.main_header .header_box .reserv_02 .text01{font-size: 1.6rem; font-weight: 500; line-height: 6.6rem; color: #ff688c;}
.main_header .header_box .reserv_02 .text01 img {margin-left: 10px;}
.main_header .header_box .reserv_02 .text02{ font-size: 1.4rem; font-weight: 500; padding-top: 5px;}

.main_header .fix .right_menu {
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    padding-right: 12px; align-items: center; display: flex;
}
.main_header .fix .right_menu .gnb_menu {
    cursor:pointer; font-size:0; background:url('../images/main_menu_off.png') center center no-repeat;
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    height: 50px; width: 35px; 
}
.main_header .fix .right_menu .gnb_menu:active {background:url('../images/main_menu_on.png') center center no-repeat;}
.main_header .fix .my_info {
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    display: flex;
    width: 35px;
    height: 50px;
    align-items: center;
    justify-content: center;
}

/* 로그인 후  header */
.main_header .header_box02 {
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    padding-top: calc(env(safe-area-inset-top) + 50px);
}
.main_header .header_box02 .main_tit {height: 70px; padding: 20px;}
.main_header .header_box02 .main_tit .tit03{float: left; width: 80%; font-size: 2.0rem; font-weight: 500; word-break: keep-all; color: #332b46; line-height: 1.2em; text-align: left;}
.main_header .header_box02 .main_tit .tit_barcode{float: right; padding-top: 3px;}
.main_header .header_box02 .main_tit .tit_barcode a{display: block;}
.main_header .header_box02 .main_info {position: absolute; left: 20px; right: 20px; padding: 10px; border-radius: 20px; background-color: #ffffff; box-shadow: 0px 5px 15px 0px rgba(187, 178, 201, 0.4); box-sizing: border-box; }
.main_header .header_box02 .main_info ul {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px;}
.main_header .header_box02 .main_info ul li{text-align: center; font-weight: 500;}
.main_header .header_box02 .main_info ul li a {display: block;}
.main_header .header_box02 .main_info ul li a:active {background: #eee; border-radius: 15px;}
.main_header .header_box02 .main_info .t1 {font-size: 3.0rem; color: #ff4b6b; line-height: 4.5rem;}
.main_header .header_box02 .main_info .t2 {font-size: 1.4rem; color: #43395e;}


/* gnb */
.gnb_menu_layer {
    position:fixed;top:0;right:-300px;bottom:0;min-height:100%;width:300px;overflow-y:auto;background:#ffffff;z-index:300;transition:all 0.5s;
}
.gnb_menu_layer.moving {right:0;}
.gnb_menu_layer .close {
    position:absolute;
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    top:calc(env(safe-area-inset-top) + 10px);
    right:10px;font-size:0;cursor:pointer;width:40px;height:40px;background:url('../images/ico_close_on_01.png') no-repeat center center; background-size:50% auto; transition: all 0.5s;
}
.gnb_menu_layer .close:hover {transform:rotate(90deg );}
.gnb_menu_layer h2 {padding:70px 0px 15px 15px;}
.gnb_menu_layer h2 img {width:200px;}
.gnb_menu_layer .gnb_menu { 
    background: #fff1ee; box-sizing: border-box;
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    padding-top: calc(env(safe-area-inset-top));
}
.gnb_menu_layer .gnb_menu .deth01 {position:relative; line-height:50px; font-size:18px; color: #43395e; font-weight:600; letter-spacing: -0.5px; margin-left: 20px;  border-bottom: 1px solid #e0e0e0; cursor:pointer;}
.gnb_menu_layer .gnb_menu .deth01.on,
.gnb_menu_layer .gnb_menu .deth01:active {color: #544aaa;}
.gnb_menu_layer .gnb_menu .deth01 .sub_view {position:absolute;top:7px;right:15px;width:30px;height:30px;background:url('../images/ico_gnb_01.png') no-repeat center center;font-size:0; background-size:50% auto; cursor:pointer; transition: all 0.5s;}
.gnb_menu_layer .gnb_menu .deth01 .sub_view.open {transform:rotate(45deg);}
.gnb_menu_layer .gnb_menu .sub_menu {display:none; margin:0px 0px 20px 20px;}
.gnb_menu_layer .gnb_menu .sub_menu li {float: left; width: 100%; line-height:2.0em;font-size:1.125em;color:#ffffff;}
.gnb_menu_layer .gnb_menu .sub_menu li a {float: left; width: 50%; color:#746893; line-height: 4.0rem; font-size: 1.4rem;}
.gnb_menu_layer .gnb_menu .sub_menu li a:active,
.gnb_menu_layer .gnb_menu .sub_menu li a.on {color:#544aaa; font-weight: bold;}

/* 사이드 메뉴 */
.gnb_menu .gnb_top {padding:60px 20px 20px 20px;}
.gnb_menu .gnb_top ul li {float: left; height: 4.0rem;}
.gnb_menu .gnb_top ul li:last-child{float: right;}
.gnb_menu .gnb_top ul li img {margin: -10px 10px 0 0;}
.gnb_menu .gnb_top .t1 {font-size: 2.0rem; font-weight: 500; height: 4.0rem; line-height: 4.0rem;}
.gnb_menu .barcode {padding: 0 20px; text-align: center; padding: 20px; border-radius: 10px; background: #fff;}
.gnb_menu .barcode > p {font-size: 1.6rem; font-weight: 600; margin-top: 10px; color: #333;}
.gnb_menu .barcode {margin: 0 20px;}
.gnb_menu .my_set ul {padding: 20px 0;}
.gnb_menu .my_set ul li{float: left; width: 49%; font-size: 1.6rem; font-weight: 500; text-align: center; color: #43395e;}
.gnb_menu .my_set ul li:active a {color: #ff688c;}
.gnb_menu .my_set ul li:first-child {border-right: 2px solid #aaa;}
.position_a{top: 0;right: 0;width: 100%;background: #fff; }
.menu_mask {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; background: rgba(0,0,0,0.7); display: none;}
.footer_side {background: #f2f2f2; padding: 10px 20px; margin: 20px; /* border: 1px solid #bcc7d3; */ border-radius: 10px; text-align: center;}
.footer_side > b {font-size: 2.2rem; color: #333;}
.footer_side > p {font-size: 2.4rem; color: #544aaa; font-weight: 600;}

/* sub - header */
.sub_header .fix {
    position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: #fff; border-bottom: 1px solid #f7f7f7; z-index: 100;
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    padding-top: env(safe-area-inset-top);
}
.sub_header .fix .btn_back {float: left;}
.sub_header .fix .btn_back a {display: block; width: 20px; height: 20px; padding: 15px; background: url(../images/btn_back.svg) center center no-repeat; background-size: 24px 24px;}
.sub_header .fix .btn_back a:active {background-color: #f3f3f3;}
.sub_header .fix .sub_tit01 {float: left; font-size: 1.8rem; height: 50px; line-height: 50px;}
.sub_header .fix .right_menu {
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    display: flex;
    justify-content: end;
}
.sub_header .fix .right_menu .gnb_menu {
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    
    right:0;width:30px;height:24px;cursor:pointer;padding: 15px 15px 10px 15px; font-size:0; background:url('../images/main_menu_off.png') center center no-repeat;
}
/* .sub_header .fix .right_menu .gnb_menu:hover {background:url('../images/main_menu_on.png') center center no-repeat;} */

/* 외래 */
.main_box01 {position: relative; width: 100%; left: 0; border-bottom: 2px solid #eeeeee;}
.main_box01 .tab_menu{position: relative; width: 100%; height: 50px; }
.main_box01 .tab_menu ul li{float: left;}
.main_box01 .tab_menu ul li a{display: block; padding: 0px 20px; font-size: 2.0rem; line-height: 50px; font-weight: 600; color: #c7bbe8;}
.main_box01 .tab_menu ul li.on a {color: #43395e; border-bottom: 2px solid #43395e;}
.main_box02 {position: relative; background: #fff; z-index: 1; width: 100%; display: none; }
.main_box02.on {display: block;}
.main_box02 ul {padding: 3.0rem 0; display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(30%,auto)); gap: 2.0rem 1.0rem; }
.main_box02 .main_item a {display: block; text-align: center;}
.main_box02 .main_item a p {font-size: 1.4rem; font-weight: 500; color: #696687; padding: 10px 0;}
.main_box02 .main_item a:active {background: #eee; border-radius: 10px;}
.main_box02 .main_item a:active p{color: #544aaa;}
.main_box02 .con_01 {position: relative; width: 100%; border-top: 6px solid #e8e8e8;}
.main_box02 .con_01:last-child {padding-bottom: 70px;}
.main_box02 .con_01 > ul {display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(48%,auto)); gap: 2rem 1rem; padding: 40px 20px 50px 20px; box-sizing: border-box;}
.main_box02 .con_01 .btm_box {border-radius: 5px;}
/* .main_box02 .con_01 .btm_box a {display: block; padding: 10px; color: #696687; font-size: 1.4rem;  height: 4.0rem;}
.main_box02 .con_01 .btm_box a img {float: left; text-align: right; margin-top: 6px;}
.main_box02 .con_01 .btm_box a span {float: right; width: 72%; text-align: right; font-weight: 500; word-break: keep-all;} */
.main_box02 .con_01 .btm_box a {display: flex; padding: 10px; color: #696687; font-size: 1.4rem; height: 4.0rem; align-items: center; justify-content: space-between;}
.main_box02 .con_01 .btm_box a span {text-align: right; font-weight: 500; word-break: keep-all;}
.main_box02 .con_01 ul li:nth-child(1) {border: 1px solid #ffa7bc;}
.main_box02 .con_01 ul li:nth-child(2) {border: 1px solid #ffa18b;}
.main_box02 .con_01 ul li:nth-child(3) {border: 1px solid #aaa4e0;}
.main_box02 .con_01 ul li:nth-child(4) {border: 1px solid #859dd1;}
.main_box02 .con_01 ul li:nth-child(5) {border: 1px solid #4dcdd2;}
.main_box02 .con_01 ul li:nth-child(6) {border: 1px solid #a865d4;}

.main_box02 .con_01 ul li:nth-child(1):active {background: #ffe5eb;}
.main_box02 .con_01 ul li:nth-child(2):active {background: #ffeeea;}
.main_box02 .con_01 ul li:nth-child(3):active {background: #eeecff;}
.main_box02 .con_01 ul li:nth-child(4):active {background: #e6eeff;}
.main_box02 .con_01 ul li:nth-child(5):active {background: #e5fcff;}
.main_box02 .con_01 ul li:nth-child(6):active {background: #f2e5ff;}

/* .main_box02 .con_01 ul li:nth-child(1) a span,
.main_box02 .con_01 ul li:nth-child(2) a span,
.main_box02 .con_01 ul li:nth-child(4) a span {margin-top: 10px;} */
.main_box02 .con_01 ul li:nth-child(1):active a span {color: #ffa7bc;}
.main_box02 .con_01 ul li:nth-child(2):active a span {color: #ffa18b;}
.main_box02 .con_01 ul li:nth-child(3):active a span {color: #aaa4e0;}
.main_box02 .con_01 ul li:nth-child(4):active a span {color: #859dd1;}
.main_box02 .con_01 ul li:nth-child(5):active a span {color: #4dcdd2;}
.main_box02 .con_01 ul li:nth-child(6):active a span {color: #a865d4;}

.main_box02 .con_02 {position: relative; width: 100%; border-top: 6px solid #e8e8e8; padding: 30px 20px; box-sizing: border-box;}
.btn_app {width: 100%; padding: 15px; text-align: right; font-size: 2.0rem; font-weight: bold; border-radius: 10px; color: #8278dd; 
            box-sizing: border-box; box-shadow: 0px 0px 10px rgb(100 100 100 / 30%); transition: all 0.3s;}
.btn_app img {width: 250px; margin-bottom: 10px;}

/* 로그인 후 MY데이터 */
section > .tit04 {position: relative; font-size: 2.0rem; padding: 70px 20px 0; margin-bottom: -30px;}
.main_box03 {position: relative; width: 100%; left: 0; margin-top: 50px; border-bottom: 2px solid #eeeeee; background: #fff;}
.main_box03 .tab_menu{position: relative; width: 100%; height: 50px; }
.main_box03 .tab_menu .tab2 li{float: left;}
.main_box03 .tab_menu .tab2 li:nth-child(1){ width: 40%;}
.main_box03 .tab_menu .tab2 li:nth-child(2){ width: 16%;}
.main_box03 .tab_menu .tab2 li:nth-child(3){ width: 22%;}
.main_box03 .tab_menu .tab2 li:nth-child(4){ width: 22%;}
.main_box03 .tab_menu .tab2 li a{display: block; text-align: center; font-size: 1.3rem; line-height: 50px; font-weight: 600; color: #c7bbe8;}
.main_box03 .tab_menu .tab2 li:last-child a { padding-right: 0;}
.main_box03 .tab_menu .tab2 li.on a {color: #43395e; border-bottom: 2px solid #43395e;}

.main_box04 {position: relative; background: #fff;  z-index: 1; width: 100%; display: none; }
.main_box04.on {display: block;}
.main_box04 ul {padding: 30px 0;}
.main_box04 .grid01{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.0rem;}
.main_box04 .con_01 {text-align: center; }
.main_box04 .con_01 a {display: block; transition: all 0.3s;}
.main_box04 .con_01 a:active strong { background: #bbb;}
.main_box04 .con_01 .t1 {display: block; font-size: 1.6rem; padding: 10px; background: #eee; border-radius: 30px; }
.main_box04 .con_01 .t2 {display: block; font-size: 1.6rem; font-weight: 600; padding: 10px 0; color: #444b55; }
.main_box04 .con_01 .t3 {display: block; font-size: 1.3rem; color: #8f9aaa;}
.main_box04 .slide_con ul li{padding: 20px; background: #eee; border-radius: 10px; color: #444b55;}
.main_box04 .slide_con .scon01 strong {display: block; font-size: 1.6rem; margin-bottom: 10px;}
.main_box04 .slide_con .scon01 p {font-size: 1.4rem; }
.main_box04 .slide_pagenation {width: 100%; text-align: center; padding-bottom: 20px;}
.main_box04 .slide_pagenation a {display: inline-block; width: 10px; height: 10px; background: #eee; border-radius: 5px; margin-right: 5%;}
.main_box04 .slide_pagenation a.on {background: #43395e;}

strong.tmpcss  {display: block; font-size: 1.6rem; margin-bottom: 10px;}
p.tmpcss  {font-size: 1.4rem; }
ul.tmpcss {padding: 20px; background: #eee; border-radius: 10px; color: #444b55;}
li.tmpcss{padding: 20px 0px; background: #eee; border-radius: 10px; color: #444b55;}

/* SNS 로그인 */
.sns_login {width: 100%;}
.sub_box02 {position: relative; width: 100%; left: 0; margin-top: 50px;}
.sub_box02 .top_con {padding: 30px 0;}
.sub_box02 .top_con .t1 {font-size: 2.0rem; font-weight: bold;} 

.login_area {padding: 20px 0;}
.login_area ul {font-size: 0; text-align: center;}
.login_area ul li{display: inline-block; font-size: 1.6rem; font-weight: 500; color: #43395e;}
.login_area ul li:first-child {border-right: 2px solid #aaa; }
.login_area ul li a {display: block; padding: 0 10px;}
.login_area ul li:active a {color: #ff688c;}

/* 회원가입 > 병원선택 */
.sub_box02 .top_con .t2 {font-size: 1.8rem; font-weight: bold; text-align: center;}
.hallym_area dl dt {float: left; width: 38%; margin-right: 10px;}
.hallym_area dl dd {float: left;}
.hallym_area dl dt img {width: 100%;}
.hallym_area .text03 {font-size: 1.6rem; margin-top: 10px;}

.hallym_area input[type=radio] + label {display: block; cursor: pointer;}
.hallym_area input[type=radio]:checked + label {background: #f6f9ff; color: #8278dd;}

/* 회원가입 > 14세이상, 14세미만(가입방법 선택) */
.hallym_area_02 .btn_box {width: 100%; text-align: center; border: 1px solid #ccc; border-radius: 10px; padding: 20px; box-sizing: border-box;}
.hallym_area_02 .btn_box h2 {font-size: 2.2rem; padding: 10px 0;}
.hallym_area_02 .btn_box p {font-size: 1.8rem; color: #696687; word-break: keep-all;}
.hallym_area_02 .btn_box:active {background: #f6f9ff; border-color: #8278dd;}

/* 회원가입 > 약관동의 */
.top_bar {position: relative; width: 100%; left: 0; margin-top: 50px; padding: 10px 0; text-align: center; background: #f7f7f7;}
.top_bar span {font-size: 1.4rem; margin-right: 10px;}
.top_bar span::after {position: relative; content: ''; display: inline-block; width: 5px; height: 10px; top: -1px; left: 5px; background: url("../images/top_bar_arrow.png") center center no-repeat;}
.top_bar span:last-child::after {display: none;}

.line_box01 {border: 1px solid #8f9aaa; padding: 10px; background: #f7f7f7;}
.line_box01 p {font-size: 1.6rem; font-weight: bold; color: #696687;}
.list01 {position: relative; margin-left: 10px;}
.list01::before {position: absolute; content: ''; display: block; top: 10px; margin-left: -10px; width: 5px; height: 5px; border-radius: 2.5px; background: #8278dd;}

.agreement_container {font-size: 1.6rem;}
.agree_allcheck {color: #696687; font-size: 1.6rem; padding: 10px; background: #f0f0f0;}
.agree_allcheck input[type='checkbox'] + label span.check01 { display: inline-block; width: 20px; height: 20px; vertical-align: middle; cursor: pointer; font-size: 0; margin: -2px 9px 0 0; background: #fff; border: 1px solid #8278dd;}
.agree_allcheck input[type='checkbox']:checked + label span.check01 { display: inline-block; background: #8278dd url(../images/icon_checked.png) no-repeat center center;}
.agree_check input[type='checkbox'] + label span.check01 { display: inline-block; width: 20px; height: 20px; vertical-align: middle; cursor: pointer; font-size: 0; margin: -2px 9px 0 0; background: #fff; 
    border-radius: 20px; -webkit-border-radius: 20px; -mox-border-radius: 20px; border: 1px solid #8278dd;}
.agree_check input[type='checkbox']:checked + label span.check01 { display: inline-block; background: #8278dd url(../images/icon_checked.png) no-repeat center center;}
.agree_check .agree_btn {float: right; padding: 15px; background: url("../images/agree_icon.png") center center no-repeat; transition: all 0.5s;}
.agree_check button.on {transform: rotate(180deg);}

.agreement_container .title01 {font-size: 1.6rem; color: #43395e; padding: 10px 0; border-bottom: 1px solid #efefef;}
.agreement_container .title02 {font-size: 1.4rem; color: #ff2b2b;}
.agreement_container .title03 {font-size: 1.4rem; color: #8278dd;}
.agree_box {display: none; height: 250px; padding: 10px; overflow: auto; font-size: 1.4rem; line-height: 150%; background: #efefef; box-sizing: border-box;}
.agree_box.on {display: block;}
.agree_box .warning { padding-left: 22px; margin: 20px 0 20px 11px; background: url('../images/ico_warning.png') 0 0 no-repeat;}
.agree_box .infor_list > li {list-style: disc; margin-left: 15px;}
.agree_box .agree_list {margin-bottom: 20px;}
.agree_box .agree_list > li {list-style-type: decimal; margin-left: 20px;}
.agree_box h4 {font-size: 1.6rem; padding: 10px 0;}
.agree_box .list {margin-left: 10px; margin-bottom: 20px;}
.agree_box .list li::before {position: relative; content: ''; display: block; top: 15px; margin-left: -10px; width: 5px; height: 5px; border-radius: 2.5px; background: #8278dd;}

/* 본인인증 */
.self_grid {display: grid; grid-template-columns: 1fr; width: 100%; gap: 20px; }
.self_con01 {text-align: center;}
.self_con01 .con_01 {border: 1px solid #e0e0e0; padding: 20px; transition: all 0.5s;}
.self_con01 .con_01 img {margin: 0 auto; margin-bottom: 10px;}
.self_con01 .con_01 strong {display: block; color: #43395e; margin-bottom: 10px; font-weight: bold; font-size: 2.2rem; line-height: 150%;}
.self_con01 .con_01 p {text-align: center; margin-bottom: 20px;}

/* 회원가입여부 확인 */
.tbox_07 {padding: 20px; }
.btn_grid05 {display: grid; grid-template-columns: 1fr 1.5fr; width: 100%; gap: 10px;}


/* sub - 내원이력 */
.sub_box01 {
    position: relative; width: 100%; left: 0; 
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    margin-top: calc(env(safe-area-inset-top) + 50px); 
    /**/
    border-bottom: 2px solid #eeeeee; 
}
.sub_box01 .tab_menu{position: relative; width: 100%; height: 50px; }
.sub_box01 .tab_menu .tab01 li{float: left; height: 50px; width: 33%;}
.sub_box01 .tab_menu .tab01 li a{display: block; text-align: center; font-size: 1.6rem; line-height: 50px; font-weight: 600; color: #c7bbe8;}
.sub_box01 .tab_menu .tab01 li:last-child a { padding-right: 0;}
.sub_box01 .tab_menu .tab01 li.on a {color: #43395e; border-bottom: 2px solid #43395e;}
.sub_tab {position: relative; background: #fff; z-index: 1; width: 100%;display: none;}
.sub_tab.on {display: block;}
.tbox_01 {margin: 20px 0; padding: 10px; border-radius: 10px; background: #f0f0f0; box-shadow: 0 0 5px rgb(198, 198, 198, 0.2);}
.tbox_01 p {font-size: 1.4rem; line-height: 150%; color: #444b55; }

/*  sub - 주차등록(tab_menu 2개일때) */
.sub_box01 .tab_menu .tab02 li{float: left; height: 50px; width: 50%;}
.sub_box01 .tab_menu .tab02 li a{display: block; text-align: center; font-size: 1.6rem; line-height: 50px; font-weight: 600; color: #c7bbe8;}
.sub_box01 .tab_menu .tab02 li:last-child a { padding-right: 0;}
.sub_box01 .tab_menu .tab02 li.on a {color: #43395e; border-bottom: 2px solid #43395e;}

/*  sub - 주차장 혼잡도 */
.bg_red    {width: 100%; padding: 4px 12px; font-size: 1.6rem; border-radius: 20px; background: #ff5050; color: #fff; transition: all 0.3s;}
.bg_yellow {width: 100%; padding: 4px 12px; font-size: 1.6rem; border-radius: 20px; background: #ffcf33; color: #333; transition: all 0.3s;}
.bg_green  {width: 100%; padding: 4px 12px; font-size: 1.6rem; border-radius: 20px; background: #00aa33; color: #fff; transition: all 0.3s;}


/* sub - My health note (혈당/혈압/신체 입력)*/
.tbox_02 {margin: 20px 0; padding: 20px 0; border-radius: 10px; border:1px solid #e0e0e0; background: #fff; box-shadow: 0 0 5px rgb(198, 198, 198, 0.2);}
.tbox_02 .mycon_01 {position: relative; width: 100%;}
.tbox_02 .mycon_01 > .left {text-align: center; margin-bottom: 20px;}
.tbox_02 .mycon_01 > .right {text-align: center; font-size: 2.0rem; line-height: 150%; color: #8f9aaa;}
.pdstyle {padding: 10px 0 10px 10px !important;}
.tbox_03 {width: 100%; height: 7rem; text-indent: 0; padding: 10px; box-sizing: border-box;}

/* sub - My health note (원형 그래프) */
    /* green */
.chart svg {position: absolute; top: -5px; left: -5px; width: 200px; height: 200px;}
.chart {position: relative; display: inline-block; color: #999; font-size: 2.0rem; text-align: center;}
.chart figcaption {font-size: 3.0rem; padding: 50px 25px; width: 100px; height: 50px; color: #53d866; font-weight: 700; border: 20px solid #f3f3f3; border-radius: 100px; line-height: 50px;}
.outer {fill: transparent; stroke: #53d866; stroke-width: 10; stroke-dasharray: 667; transition: stroke-dashoffset 2s; -webkit-animation-play-state: running;}
.chart[data-percent="100"] .outer {stroke-dashoffset: 133; -webkit-animation: show100 2s; animation: show100 2s;}

    /* red */
.chart_red svg {position: absolute; top: -5px; left: -5px; width: 200px; height: 200px;}
.chart_red {position: relative; display: inline-block; color: #999; font-size: 2.0rem; text-align: center;}
.chart_red figcaption {font-size: 2.5rem; padding: 50px 25px; width: 100px; height: 50px; color: #ff2b2b; font-weight: 700; border: 20px solid #f3f3f3; border-radius: 100px; line-height: 50px;}
.outer_red {fill: transparent; stroke: #ff2b2b; stroke-width: 10; stroke-dasharray: 667; transition: stroke-dashoffset 2s; -webkit-animation-play-state: running;}
.chart_red[data-percent="100"] .outer_red {stroke-dashoffset: 133; -webkit-animation: show100 2s; animation: show100 2s;}

    /* orange */
.chart_org svg {position: absolute; top: -5px; left: -5px; width: 200px; height: 200px;}
.chart_org {position: relative; display: inline-block; color: #999; font-size: 2.0rem; text-align: center;}
.chart_org figcaption {font-size: 2.5rem; padding: 50px 25px; width: 100px; height: 50px; color: #ff8c00; font-weight: 700; border: 20px solid #f3f3f3; border-radius: 100px; line-height: 50px;}
.outer_org {fill: transparent; stroke: #ff8c00; stroke-width: 10; stroke-dasharray: 667; transition: stroke-dashoffset 2s; -webkit-animation-play-state: running;}
.chart_org[data-percent="100"] .outer_org {stroke-dashoffset: 133; -webkit-animation: show100 2s; animation: show100 2s;}


.blur {filter:blur(6px); -webkit-filter: blur(6px); }
/* 사파리 블러처리 */
/* @supports (-webkit-backdrop-filter: none){
    .blur {-webkit-backdrop-filter: blur(10px);}
} */
@-webkit-keyframes show100 {
    from {stroke-dashoffset: 537;}
    to {stroke-dashoffset: 0;}
}
@keyframes show100 {
    from {stroke-dashoffset: 537;}
    to {stroke-dashoffset: 0;}
}

/* sub - 고객불만접수 */
.tbox_04 {width: 100%; height: 10rem; text-indent: 0; padding: 10px; box-sizing: border-box;}

/* sub - 회진정보 */
.sub_box03 {
    position: relative; width: 100%; left: 0; 
    /*
        작성자: 임재성
        작성일자: 2025.02.18
        설명: iOS SafeArea 대응
    */
    margin-top: calc(env(safe-area-inset-top) + 50px); 
    background: #f5f5f5;
}
.sub_box03 .top_con {padding: 30px 0; font-size: 1.4rem;}
.sub_box03 .top_con h3 {color: #43395e; font-size: 1.8rem; height: 4rem; line-height: 4rem;}
.sub_box03 .top_con .t1 {font-size: 1.6rem; } 
.sub_box03 .top_con .t2 {font-size: 1.6rem;  line-height: 150%;} 
.table_title03 { width: 60%; background: #c0cee2; color: #fff; padding: 5px 10px; margin: 0 auto 20px auto; font-size: 2.0rem; text-align: center; font-weight: 700;  border-radius: 50px; -webkit-border-radius: 50px; -mox-border-radius: 50px; }

/* sub - 편의사항 신청 */
.sub_box04 {
    position: relative; width: 100%; left: 0;  
}
.sub_box04 .con01 {padding: 20px 0; border-bottom: 1px dashed #c0cee2; }
.sub_box04 .con01 h3{color: #43395e; font-size: 2.0rem; font-weight: 700;}
.sub_box04 .con01 p {font-size: 1.6rem;}
.sub_box04 .con01:last-child {border-bottom: none;}

/* sub - 제증명 신청 */
.btn_num {width: 32px; height: 32px; border: 1px solid #43395e; font-size: 2.0rem; margin-right: -3px; -webkit-border-radius: 0; -moz-border-radius: 0; transition: all 0.3s;}
.btn_num:hover, .btn_num:active {background: #8278dd; color: #fff;}
input[type='number'].result_01 {width: 30px; height: 32px; border: 1px solid #43395e; margin-right: -4px; border-radius: 0;}

/* sub - 대기표 발급 */
.sub_box04 .con01 .f1 {font-size: 1.8rem; }
.f01 {font-size: 2rem;}
.f02 {display: inline-block; width: 70px; height: 50px; line-height: 50px; font-size: 3.0rem; padding: 0 10px; border-radius: 5px; background: #f8f8f8;}
.f03 {font-size: 1.6rem; line-height: 3rem;}

/* sub - 외래진료 대기순서 */
.grid02 {display: grid; width: 100%; grid-template-columns: 3.5fr 0.5fr; gap: 1rem; word-break: keep-all;}
.grid02 .btn_re {background: #fff; text-align: center;}



/* input - 기간 선택 */
.input_box01 {display: grid; grid-template-columns: 1fr 0.1fr 1fr 0.1fr;  gap: 1rem; padding:20px 0;}
.input_box01 label {min-width: 100%;}
.input_box01 input[type="date"]{min-width: 100%; text-align: left; text-indent: 0; border: none; border-bottom: 1px solid #718096; border-radius: 0; font-size: 1.4rem;  background: url(../images/icon_calendar.svg) right 0 top 50% no-repeat #fff; background-size: 14px 14px; }

.input_box02 {display: block;}
.input_box02 label {min-width: 100%;}
.input_box02 input[type="date"]{min-width: 100%; text-align: left; text-indent: 0; border: none; border-bottom: 1px solid #718096; border-radius: 0; font-size: 1.4rem;  background: url(../images/icon_calendar.svg) right 0 top 50% no-repeat #fff; background-size: 14px 14px; }

/* input - 측정일시(혈당) */
.input_box02 input[type="datetime-local"]{min-width: 100%; text-align: left; text-indent: 0; border: none; border-bottom: 1px solid #718096; border-radius: 0; font-size: 1.4rem;  background: url(../images/icon_calendar.svg) right 0 top 50% no-repeat #fff; background-size: 14px 14px; }

/* input - radio button(혈당/혈압/신체) */
.input_box03 {text-align: left;}
input[type='radio']{display: none;}
input[type='radio'] + label span.radio_bg {display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 1px solid #8278dd; border-radius: 10px; cursor: pointer; font-size: 0; margin: -2px 9px 0 4px; }
input[type='radio']:checked + label span.radio_bg {display: inline-block; background-color: #8278dd; background: #8278dd url(../images/icon_radio_checked.png) no-repeat center center;}

/* select box 1개 선택시 */  
.select_box01 {display: grid; grid-template-columns: 1fr; padding: 20px 0;}
.select_box01 > select {border: none; border-bottom: 1px solid #718096; border-radius: 0; font-size: 1.4rem; background: url(../images/snb_arrow.png) no-repeat right 10px top 50%;}

/* select box 2개 선택시 */
.select_box02 {display: grid; grid-template-columns: 1fr 1fr 0.1fr; gap: 1rem; padding: 20px 0 30px 0;}
.select_box02 > select {border: none; border-bottom: 1px solid #718096; border-radius: 0; font-size: 1.4rem; background: url(../images/snb_arrow.png) no-repeat right 10px top 50%;}

/* selct box normal */
.select_box03 {display: grid; grid-template-columns: 1fr; margin-bottom: 20px;}
.select_box03 > select {display: block; height: 42px; border: 1px solid #e9e9e9; text-indent: 10px; font-size: 1.4rem; background: url(../images/snb_arrow.png) no-repeat right 10px top 50%;}

/* button - 검색버튼 */
.btn_search {margin:0 auto; width: 20px;/*  height: 32px; */ background: url(../images/icon_search.svg) center center no-repeat; color: #fff; border-radius: 5px;}
.btn_search:active {border: none; background-color: #e0e0e0;}
.hyphen {padding: 20px 0; margin: 0 auto;}

/* table 리스트 형식 */
.table_area {padding: 20px 0;}
.table_title01 { font-size: 1.4rem; margin-bottom: 20px; color: #444b55;}
.table01 {
    width: 100%; box-shadow: 0px 0px 10px rgb(203, 203, 203, 0.6);
    border-radius: 1.0rem; background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.table01 tr {font-size: 1.4rem; color: #718096; border-bottom: 1px solid #e2e8f0;}
.table01 tr th { padding: 1rem 0; background: #f7fafc; }
.table01 tr th:first-child {
    border-radius: 1rem 0 0 0;
    -webkit-border-radius: 10px 0 0 0;
    -moz-border-radius: 10px 0 0 0;
}
.table01 tr th:last-child {
    border-radius: 0 1rem 0 0; 
    -webkit-border-radius: 0 10px 0 0;
    -moz-border-radius: 0 10px 0 0;
}
.table01 tr td{ text-align: center; padding: 10px 0;}

/* table 입력 형식 */
.table_title02 {font-size: 2.0rem; margin-bottom: 20px; color: #444b55;}
.table02 {width: 100%; border-top: 2px solid #d3ddea;  border-bottom: 2px solid #d3ddea;}
.table02 tr {font-size: 1.4rem; color: #718096; border-bottom: 1px solid #e2e8f0;}
.table02 tr th { padding: 1rem 0; background: #f7fafc; }
.table02 tr td{ padding: 20px 0 20px 20px; background: #fff;}

/* table - 복약정보 */
.table03 {width: 100%; border-top: 2px solid #d3ddea;  border-bottom: 2px solid #d3ddea;}
.table03 tr {font-size: 1.4rem; color: #718096; border-bottom: 1px solid #e2e8f0;}
.table03 tr th { padding: 1.5rem 0; background: #f7fafc; }
.table03 tr td {padding: 20px 0;}
.bor_none {border-bottom: none !important;}
.tbox_05 {position: relative; font-size: 1.4rem; background: #f3f3f3; border-bottom: 1px dashed #d3ddea; padding: 20px 0;}
.tbox_05 .sub_view { position: absolute; top: 20px; right: 5px; width: 30px; height: 30px; background: url(../images/ico_gnb_01.png) no-repeat center center; font-size: 0; background-size: 50% auto; transition: all 0.3s;}
.tbox_05 .sub_view:hover, .tbox_05 .sub_view:active {background-color: #e0e0e0;}
.btn_more {position: relative;}
.btn_more::after { background: url('../images/snb_arrow.png') no-repeat 0px center; content: ''; display: block; position: absolute; right: -14px; top: 20%; width: 10px; height: 10px;}
.btn_more.on::after {background: url('../images/snb_arrow_up.png') no-repeat 0px center; content: ''; display: block; position: absolute; right: -14px; top: 20%; width: 10px; height: 10px;}
.list_show {display: table-header-group;}
.ipsik_date span {font-size: 1.8rem;}
.ipsik_date span:nth-of-type(2) {padding: 4px 20px; border-radius: 30px; background: #e5e2ff;}
.more_s {padding: 2px 5px; border-radius: 4px; color: #fff; background: #718096; margin:2px}
.more_s:active {background: #5f55bb;}


/* table - 주차등록(예시) */
.table05 {width: 100%; border-top: 2px solid #d3ddea;  border-bottom: 2px solid #d3ddea; text-align: center;}
.table05 tr {font-size: 1.4rem; color: #718096; border-bottom: 1px solid #e2e8f0;}
.table05 tr th { padding: 1rem 0; background: #f7fafc; }
.table05 tr td{ padding: 10px; background: #fff;}

/* 한림모바일 앱 */
.app_area .con01 ul {display: grid; grid-template-columns: 50px 1.5fr 1fr; width: 100%; gap: 10px; margin-bottom: 20px;}
.app_area .con01 .app_text {font-size: 1.6rem; font-weight: bold; color: #444b55;}
.app_area .con01 .app_img {width: 50px;}

/* 정보입력 */
.inline_id .in_01 {width: 60%;}
.inline_id .in_02 {width: 40%; text-align: right;}
.inline_id .in_02 > button {width: 100%; height: 42px;}
.inline_email {display: grid; grid-template-columns: 1fr;}
.inline_zip .in_01 {margin-bottom: 10px;}
.inline_zip .in_02 {width: 100%;}
.email_atsign {text-align: left; font-size: 2.0rem;}

/* 내 정보 관리 */
.my_grid01 {display: grid; width: 100%; grid-template-columns: 30px 1.5fr 90px; gap: 0 10px;}
.my_grid02 {display: grid; width: 100%; grid-template-columns: 1fr; gap: 20px;}

/* 아이디/비밀번호 찾기 */
.pw_grid {display: grid; grid-template-columns: 1fr; width: 100%;}
.conbox_id {display: none;}
.conbox_id.on {display: block;}
.conbox_pw {display: none;}
.conbox_pw.on {display: block;}


/* 설정 */
.toggle_slide {display: none;}
.toggle_slide + label {position: relative; display: block; width: 70px; height: 30px; background: #8278dd; opacity: 0.4; text-indent: -99999px; cursor: pointer; transition: all 0.5s; margin-top: 5px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px;}
.toggle_slide + label::after {content: ''; display: block; position: absolute; width: 26px; height: 26px; top: 2px; left: 2px; background: #fff; transition: all 0.5s; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px;}
.toggle_slide:checked + label {opacity: 1;}
.toggle_slide:checked + label::after {top: 2px; left: 42px;}

/* footer */
footer {position: fixed; height: 80px; bottom: 0; left: 0; width: 100%; z-index: 10; background: #eff7ff; box-shadow: 0 -7px 10px rgba(130, 130, 130, 0.2);}
.foot_left {float: left; width: 28%; height: 80px; margin-right: 2%;}
.foot_left:active {background: #baddff;}
.foot_left > ul {margin-top: 20px; border-right: 1px solid #d8e1ec;} 
.foot_left > ul > li {text-align: center; font-size: 1.4rem; font-weight: 500;}
.foot_left > ul > li:first-child{color: #333333; }
.foot_left > ul > li:last-child{color: #544aaa;}
.foot_right {float: left; width: 70%;}
.foot_right > ul > li {float: left; width: 50%;}
.foot_right > ul > li:active {background: #baddff;}
.foot_right > ul > li > a {display: block; height: 80px; text-align: center;}
.foot_right > ul > li > a > img  {display: inline-block; padding: 26px 0; vertical-align: top;}
.foot_right > ul > li > a > span {display: inline-block; margin-top: 20px; font-size: 1.2rem;}
.foot_center > ul {text-align: center;}
.foot_center > ul > li {display: inline-block; font-size: 1.8rem; font-weight: 500; line-height: 8.0rem;}
.foot_center > ul > li:first-child{color: #333333; margin-right: 10px;}
.foot_center > ul > li:last-child{color: #544aaa;}

/* 개인정보처리방침 */
/* .MemberInfoPolicy a {color: #43395e; margin-bottom: 10px; text-decoration: underline;}
.table_container02 {width: 100%; max-width: 1350px; overflow-x: auto;}
.table06 {width: 1350px; border-top: 2px solid #d3ddea;  border-bottom: 2px solid #d3ddea;}
.table06 tr {font-size: 1.4rem; color: #718096; border-bottom: 1px solid #e2e8f0;}
.table06 tr th {border-right: 1px solid #e2e8f0; padding: 1.5rem 0; background: #f7fafc; }
.table06 tr td {border-right: 1px solid #e2e8f0; padding: 10px; line-height: 150%; background: #fff;} */

/* 팝업 style 
=========================================================================*/
/* 팝업  - 기본 */
.overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index: 900;}
.overlay:target {visibility: visible; opacity: 1;}
.popup01 {position: fixed; width: 100%; padding: 20px 20px 40px 20px; max-width: 700px; top: 40%; left: 50%; box-sizing: border-box; color: #332b46;
            transform: translate(-50%, -50%); -webkit-transition: opacity .3s, visibility 0s linear .3s; background: #f0f0f0; z-index: 1;}
.popup01:target {visibility: visible; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s;}
.popup01 .pop_top {/* height: 30px; */ padding-bottom: 20px;}
.popup01 .pop_top h3 {float: left; font-size: 2.0rem;}
.popup01 .pop_top h4 {float: left; font-size: 1.6rem;}
.popup01 .pop_top a {float: right; width: 20px; height: 20px; background: url('../images/btn_pop_close.png') no-repeat; }
.popup01 .close:active {color: #00e5ee;}
.popup-close {position: absolute; right: 5px; top: 5px; padding: 5px; color: #000; transition: color .3s; font-size: 2.rem; line-height: .6rem; font-weight: 600;}
.popup01 .pop_con {text-align: center; padding: 15px; background: #fff; border-radius: 14px; }
.popup01 .pop_con .p_name {font-size: 2.6rem; font-weight: 600; margin-bottom: 20px;}
.popup01 .pop_con .p_bar {margin-bottom: 10px;}
.popup01 .pop_con .p_num {font-size: 1.6rem; font-weight: 500;}
.popup01 .pop_con .p_text {font-size: 1.6rem; text-align: left;}

/* 팝업 - 혈압, 혈당, 신체 */
.popup02 {position: fixed; width: 100%; height: 100%; overflow: scroll; padding: 20px 20px 40px 20px; max-width: 700px; top: 0; left: 50%; box-sizing: border-box; color: #332b46;
    transform: translate(-50%, 0); -webkit-transition: opacity .3s, visibility 0s linear .3s; background: #f0f0f0; z-index: 1;}
.popup02:target {visibility: visible; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s;}
.popup02 .pop_top {padding-bottom: 20px;}
.popup02 .pop_top h3 {float: left; font-size: 2.0rem;}
.popup02 .pop_top a {float: right; width: 20px; height: 20px; background: url('../images/btn_pop_close.png') no-repeat; }
.popup02 .close:active {color: #00e5ee;}
.popup-close {position: absolute; right: 5px; top: 5px; padding: 5px; color: #000; transition: color .3s; font-size: 2.rem; line-height: .6rem; font-weight: 600;}
.popup02 .pop_graph img {width: 100%; border-radius: 1rem;}

/* 팝업 - 대기표 발급 */
.popup03 {position: fixed; width: 90%; padding: 20px 20px 40px 20px; border-radius:20px;  max-width: 700px; top: 45%; left: 50%; box-sizing: border-box; color: #332b46;
    transform: translate(-50%, -50%); -webkit-transition: opacity .3s, visibility 0s linear .3s; background: #f0f0f0; z-index: 1;}
.popup03:target {visibility: visible; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s;}
.popup03 .pop_top {padding-bottom: 20px;}
.popup03 .pop_top a {float: right; width: 20px; height: 20px; background: url('../images/btn_pop_close.png') no-repeat; }
.popup03 .close:active {color: #00e5ee;}
.popup-close {position: absolute; right: 5px; top: 5px; padding: 5px; color: #000; transition: color .3s; font-size: 2.rem; line-height: .6rem; font-weight: 600;}
.popup03 .pop_con h3 {font-size: 2.5rem; margin-top: 20px;}
.popup03 .pop_con .con_box {font-size: 4.5rem; font-weight: 700; padding: 20px 0; background: #f3f3f3; border-r-radius: 10px; color: #ff688c; margin: 20px 0;}
.popup03 .pop_con span {font-size: 2rem; line-height: 5.0rem;}
.btn_re {width: 50px; height: 50px; text-align: center; line-height: 48px; background: #f3f3f3; border-radius: 30px; transition: all 0.3s;}
.btn_re:hover, .btn_re:active {background: #e0e0e0;}

/* 팝업 - 복약정보 */
.popup04 {position: fixed; width: 100%; padding: 20px 20px 40px 20px; max-width: 600px; top: 0; left: 50%; box-sizing: border-box; color: #332b46;
    transform: translate(-50%, 0); -webkit-transition: opacity .3s, visibility 0s linear .3s; background: #f0f0f0; z-index: 1;
    overflow: auto; max-height:95%;} /* 복약정보 팝업 스크롤을 위해 width 1024 -> 600 / overflow: auto / max-height:800px 추가 */
.popup04:target {visibility: visible; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s;}
.popup04 .pop_top {padding-bottom: 20px;}
.popup04 .pop_top a {float: right; width: 20px; height: 20px; background: url('../images/btn_pop_closososososososososososose.png') no-repeat; }
.popup04 .close:active {color: #00e5ee;}
.popup-close {position: absolute; right: 5px; top: 5px; padding: 5px; color: #000; transition: color .3s; font-size: 2.rem; line-height: .6rem; font-weight: 600;}
.pop_medi h3 {font-size: 1.6rem; margin-bottom: 10px;}
.pop_medi .t1 {font-size: 1.4rem; margin-bottom: 5px;}

/* table - 팝업 - 복약정보 */
.table_container {width: 100%; max-width: 984px; overflow-x: auto; /* white-space: nowrap; */}
.table04 {width: 984px; border-top: 2px solid #d3ddea;  border-bottom: 2px solid #d3ddea;}
.table04 tr {font-size: 1.4rem; color: #718096; border-bottom: 1px solid #e2e8f0;}
.table04 tr th { padding: 1.5rem 0; background: #f7fafc; }
.table04 tr td{ padding: 10px; line-height: 150%; background: #fff;}

.pop_box01 {position: relative; width: 100%; left: 0; margin-top: 30px; border-bottom: 2px solid #eeeeee; background: #fff;}
.pop_box01 .tab_menu {position: relative; width: 100%; height: 50px; }
.pop_box01 .tab_menu .tab1 li{float: left; width: 20%;}
.pop_box01 .tab_menu .tab1 li a{display: block; text-align: center; font-size: 1.6rem; line-height: 50px; font-weight: 600; color: #c7bbe8;}
.pop_box01 .tab_menu .tab1 li.on a {color: #43395e; border-bottom: 2px solid #43395e;}
.sub_tab1 {position: relative; background: #fff; z-index: 1; width: 100%; display: none;}
.sub_tab1.on {display: block;}
.tbox_06 {padding: 20px; font-size: 1.6rem;}

/*========================================================================*/ 
/* 22.07.12 추가내용 */
/*========================================================================*/
/* 로그인/버튼 */
.btn_s04 {display: inline-block; font-size: 1.2rem; border-radius: 5px; padding: 2px 4px 2px 4px; background: #ff688c; color: #fff; vertical-align: top;}

/* 로그인/회원가입 */
.login_area02 ul li {height:48px;}
.login_area02 ul li:nth-child(3) a,
.login_area02 ul li:nth-child(4) a,
.login_area02 ul li:nth-child(5) a {margin-top: -1px;}
.login_area02 ul li:nth-child(1) {background: #f9e000; border-radius: 10px; height: 52px;}
.login_area02 ul li:nth-child(1) span {color: #371c1d;}
.login_area02 ul li:nth-child(2) {background: #03c75a; border-radius: 10px; height: 52px;}
.login_area02 ul li:nth-child(3) {border: 1px solid #8896cc; border-radius: 10px;}
.login_area02 ul li:nth-child(3) span { color: #8896cc;}
.login_area02 ul li:nth-child(4) {border: 1px solid #42cdd6; border-radius: 10px;}
.login_area02 ul li:nth-child(4) span { color: #42cdd6;}
.login_area02 ul li:nth-child(5) {border: 1px solid #00bae9; border-radius: 10px;}
.login_area02 ul li:nth-child(5) span { color: #00bae9;}
.login_area02 ul li span {color: #fff; vertical-align: middle; font-weight: bold; font-size: 1.6rem; line-height: 3rem;}
.login_footer {position: fixed; width: 100%; bottom: 0; }
.login_footer .foot_con {background-color: #eeeeee; padding: 14px 10px;}
.login_footer .foot_con .btn_text {display: inline-block; font-size: 1.4rem; width: 49%; color: #43395e;}
.login_footer .foot_con .btn_text:active {text-decoration: underline;}
.join_id {border: 1px solid #8896cc; border-radius: 10px;}
.join_id span {font-size: 1.6rem; line-height: 3rem; color: #8896cc; vertical-align: middle; font-weight: bold; }

/* 내 정보 관리 */
.sub_box05 .con01 ul li {font-size: 1.5rem; margin-bottom: 10px;}
.btn_mybox {display: block; width: 100%; height: 50px; line-height: 50px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 2px 8px rgba(145, 145, 145, 0.4);}
.btn_mybox:active {background: #efefef; box-shadow: none;}
.btn_mybox span {float: left; width: 80%; padding-left: 10px;}
.btn_mybox img {float: right; padding: 19px;}

/* 아이디/비밀번호 로그인 */
.login_area03 ul li:first-child {width: 45%; background: none; padding: 0;}
.login_area03 ul li:last-child {width: 55%; text-align: right;}
.login_area03 ul li:last-child a { color: #696687; font-size: 1.6rem; padding-top: 2px;}
.login_area03 ul li:last-child a:active {text-decoration: underline;}

/* 홈페이지 회원 로그인 */
.login_area02 ul li.btn_face {background: #3b589e; border-radius: 10px;}

/* 검사결과 */
.table_title04 {text-align: center; font-weight: bold; padding: 6px 0; color: #8278dd; border-radius: 50px; background: #eeeeee;}

/* 진료비 조회 */
.align_side {display: flex; flex-direction: column; padding-left: 20%;}
.align_side .f03 {display: flex; justify-content: space-between; border-bottom: 1px dashed #d3ddea;}

/* 환자 가셔야할 곳 */
.icon_map {width:26px; height: 26px;}
.h40 {height: 40px;}
.circle_g {color: #fff; }
.circle_g::after {position: absolute; content: ''; display: block; top: 0; left: 50%; width: 60px; height: 60px; margin: 10px 0 0 -30px; border-radius: 50%; z-index: -1; line-height: 50px; background: #008000; }
.circle_y {color: #000; }
.circle_y::after {position: absolute; content: ''; display: block; top: 0; left: 50%; width: 60px; height: 60px; margin: 10px 0 0 -30px; border-radius: 50%; z-index: -1; line-height: 50px; background: #ffde24;}
.circle_o {color: #000;  letter-spacing: -1px;}
.circle_o::after {position: absolute; content: ''; display: block; top: 0; left: 50%; width: 60px; height: 60px; margin: 10px 0 0 -30px; border-radius: 50%; z-index: -1; line-height: 50px; background: #ffa500; }
.circle_r {color: #fff; }
.circle_r::after {position: absolute; content: ''; display: block; top: 0; left: 50%; width: 60px; height: 60px; margin: 10px 0 0 -30px; border-radius: 50%; z-index: -1; line-height: 50px; background: #ff0000; }
.circle_01 {background: url('../images/icon_circle_01.svg') no-repeat; font-size: 0; width: 50px; height: 50px; margin: 0 auto 5px;}
.circle_02 {background: url('../images/icon_circle_02.svg') no-repeat; font-size: 0; width: 50px; height: 50px; margin: 0 auto 5px;}
.circle_03 {background: url('../images/icon_circle_03.svg') no-repeat; font-size: 0; width: 50px; height: 50px; margin: 0 auto 5px;}
.circle_04 {background: url('../images/icon_circle_04.svg') no-repeat; font-size: 0; width: 50px; height: 50px; margin: 0 auto 5px;}


/* 22.07.12 추가내용 END */
/*========================================================================*/


/* common style 
=========================================================================*/

/* 로그인 button */
.btn_login {display: block; width: 90px; height: 40px; line-height: 40px; text-align: center; font-size: 1.6rem; font-weight: 500; color: #fff; border-radius: 10px; background: #ff688c;}
.btn_login:active { background: #bb3453;} 

.btn_join {display: block; width: 90px; height: 40px; line-height: 40px; text-align: center; font-size: 1.6rem; font-weight: 500; color: #777; border-radius: 10px; background: #fff; }
.btn_join:active { background: #ccc; color: #fff;}

/* 로그인 > 아이디/비밀번호 로그인 */
.btn_login_02 {display: block; height: 50px; line-height: 50px; text-align: center; font-size: 1.8rem; font-weight: bold; color: #fff; border-radius: 10px; background: #ff688c;}
.btn_login_02:active { background: #bb3453;}

/* grid 버튼 1개일때 */
.btn_grid01 {display: grid; width: 100%; grid-template-columns: 1fr; margin-top: 30px;}

/* grid 버튼 2개일때 */
.btn_grid02 {display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 3rem 1rem; margin-top: 10px;}

/* grid 버튼 3개일때 */
.btn_grid03 {display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr; margin-top: 10px;}
.btn_grid03_n {display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(33%, auto)); margin-top: 10px;}

/* grid 버튼 4개일때 */
.btn_grid04 {display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem; margin-bottom: 30px;}

/* radio button - 월 선택 */
.btn_mon input[type="radio"] {display: none;}
.btn_mon input[type="radio"] + span {display: block; line-height: 2.0rem; padding: 10px 5px; background: #d7d2ff; color: #fff; font-size: 1.4rem; text-align: center; border-radius: 10px; box-sizing: border-box;}
.btn_mon input[type="radio"]:checked + span {background: #8278dd; color: #fff;}

/* button - 취소 */
.btn_no {display: block; padding: 10px; font-size: 1.6rem; font-weight: 600; text-align: center; background: #999; color: #fff; border-radius:10px; }
.btn_no:active {background:#666;}

/* button - 확인 */
.btn_yes{display: block; padding: 10px; font-size: 1.6rem; font-weight: 600; text-align: center; color: #fff; border-radius:10px; background: #8278dd;}
.btn_yes:active {background: #5f55bb;}

/* button - 이력보기 */
.btn_list {display: block; width: 50%; padding: 5px; margin: 30px auto 10px auto; font-size: 1.6rem;  text-align: center; color: #8278dd; border-radius: 10px; border: 1px solid #8278dd; transition: all 0.3s;}
.btn_list:active {background: #8278dd; color: #fff;} 

/* button - 주치의 면담 신청  */
.btn_s01 {width: 80%; padding: 6px 10px; font-size: 1.6rem;  border-radius: 5px; border: 1px solid #8278dd; color: #8278dd; transition: all 0.3s; }
.btn_s01:active {background: #8278dd; color: #fff;}

/* button - 주치의 면담 취소  */
.btn_s02 {width: 80%; padding: 6px 10px; font-size: 1.6rem; border: 1px solid #999; border-radius: 5px; color: #fff; transition: all 0.3s; background: #999; }
.btn_s02:active {background: #666;}

/* button - 신청 진행중  */
.btn_s03  {width: 80%; padding: 6px 10px; font-size: 1.6rem; border: 1px solid #f5f5f5; border-radius: 5px; color: #8278dd; transition: all 0.3s; background: #f5f5f5;}

/* button - 번호표발행 */
.btn_ticket {width: 80%; padding: 14px 0; font-size: 1.6rem; text-align: center; border-radius: 5px; background: #8278dd; color: #fff; transition: all 0.3s; }
.btn_ticket:active {background: #5f55bb; color: #fff;}

/* button - 거리재측정하기 */
.btn_dis {width: 100%; padding: 6px 0; font-size: 1.6rem; text-align: center; border-radius: 5px; border: 1px solid #8278dd; color: #8278dd; transition: all 0.3s;}
.btn_dis:active {background: #8278dd; color: #fff;}

/* button - 번호표 취소 */
.btn_cancel {background: none; border-bottom: 1px solid #666666; font-size: 1.8rem; }

/* 회원가입 계속 진행 */
.btn_next{display: block; padding: 10px; font-size: 1.6rem; font-weight: 600; text-align: center; color: #8278dd; border-radius:10px; border: 1px solid #8278dd; transition: all 0.3s; word-break: keep-all;}
.btn_next:active {background: #5f55bb; color: #fff;}

/* 한림모바일앱 설치완료 버튼 */
.btn_dim {display: block; padding: 10px; font-size: 1.6rem; font-weight: 600; text-align: center; color: #999; border-radius:10px; background: #f5f5f5;}



/* 반응형 Mobile First 
=========================================================================*/
@media (min-width: 320px) {
    .main_box02 .main_item a img {width: 50px; height: 50px;}
    .sub_box04 .con01 h3 {font-size: 1.6rem; word-break: keep-all;}
    .btn_s01, 
    .btn_s02, 
    .btn_s03 {font-size: 1.4rem; padding: 6px 0;}
    .btn_grid05 .btn_no, 
    .btn_grid05 .btn_yes {font-size: 1.4rem;} 
    .input_box01 {grid-template-columns: 1fr 0.2fr;}
}

@media (min-width: 360px) {
    .main_header .header_box .reserv .text01 img {margin-left: 10px;}
    .main_header .header_box .reserv .text02 {font-size: 1.6rem;}
    /* .main_box02 .con_01 ul li:nth-child(5) a span {margin-top: 10px;} */
    .table_title01 {font-size: 1.6rem;}
    .sub_box04 .con01 h3 {font-size: 1.8rem;}
    .foot_right > ul > li > a > img  {padding: 26px 5px 0 0px;}
}

@media (min-width: 400px) {
    .main_header .header_box .reserv .text02 {font-size: 1.6rem; font-weight: 600;}
    .main_header .header_box02 .main_tit .tit03 {font-size: 2.2rem;}
    .main_header .header_box02 .main_info .t2 {font-size: 1.6rem;}
    /* .main_box02 .con_01 .btm_box a span {margin-top: 9px; font-weight: 600;} */
    .main_box02 .main_item a p {font-size: 1.6rem;}
    .main_box03 .tab_menu .tab2 li a {font-size: 1.6rem;}
    .main_box04 .con_01 .t1 {font-size: 1.8rem;}
    .main_box04 .con_01 .t2 {font-size: 1.6rem;}
    .main_box04 .con_01 .t3 {font-size: 1.6rem;}
    .foot_left > ul > li {font-size: 1.6rem;}
    .foot_right > ul > li > a > span {font-size: 1.4rem;}
    .popup01 .pop_top h4 {font-size: 1.8rem;}
    .popup01 .pop_con .p_text {font-size: 1.8rem; line-height: 3.0rem}
    .btn_grid02 {gap: 3rem;}
    .btn_dim,
    .btn_next,
    .btn_no,  
    .btn_yes {font-size: 1.6rem; padding: 15px;}
    .btn_grid05 .btn_no, 
    .btn_grid05 .btn_yes {font-size: 1.6rem; padding: 15px;} 
    .btn_mon input[type="radio"] + span {font-size: 1.6rem; line-height: 2.4rem;}
    .input_box01 input[type="date"] {font-size: 1.6rem; background-size: 16px 16px;}
    .select_box01 > select,
    .select_box02 > select {font-size: 1.6rem;}
    .tbox_01 {padding: 20px 10px;}
    .tbox_01 p {font-size: 1.6rem;}
    .table01 tr th,
    .table01 tr td {padding: 1.6rem;}
    .table02 tr th,
    .table02 tr td,
    .table02 tr td input {font-size: 1.6rem;}
    .table05 tr th,
    .table05 tr td {font-size: 1.6rem; padding: 1.6rem;}
    .input_box02 input[type="datetime-local"] {font-size: 1.6rem; background-size: 20px 20px;}
    .table_title03 {padding: 10px ;}
    .sub_box03 .top_con h3 {font-size: 2.0rem;}
    .sub_box03 .top_con .t1, 
    .sub_box03 .top_con .t2 {font-size: 1.8rem;}
    .sub_box04 .con01 h3 {font-size: 2.0rem; line-height: 150%;}
    .btn_s01,
    .btn_s02,
    .btn_s03 {padding: 10px;}
    .btn_num {width: 40px; height: 40px;}
    input[type='number'].result_01 {width: 38px; height: 40px;}
    .sub_box04 .con01 .f1 {font-size: 2.0rem;}
    .btn_dis {width: 80%; padding: 14px 0;} 
    .f03 {font-size: 1.8rem;}
    .pop_medi h3 {font-size: 2.0rem;}
    .pop_medi .t1 {font-size: 1.6rem;}
    .table04 tr {font-size: 1.6rem;}
    .input_box01 {padding: 40px 0 20px 0;}
    .hallym_area .text03 {font-size: 2.0rem; margin-top: 30px;}
    .app_area .con01 ul {grid-template-columns: 60px 1.5fr 1fr;}
    .app_area .con01 .app_text {font-size: 1.6rem; line-height: 60px;}
    .app_area .con01 .app_img {width: 100%;}
    .pw_grid {grid-template-columns: 1fr 1fr;}
    .main_header .header_box .reserv_02 .text02 {padding-top: 14px;}

}

@media (min-width: 480px) {
    .main_header .header_box .reserv a {grid-template-columns: 1fr 2.7fr; line-height: 5.0rem;}
    .main_header .header_box .reserv .text01 {text-align: right; }
    .main_header .header_box .reserv .text02 { font-size: 1.6rem; font-weight: 500; word-break: keep-all; padding-top: 0;}
    .main_box02 .con_01 .btm_box a span {/* width: 80%; margin-top: 10px !important; */ font-size: 1.8rem;}
    .btn_grid02 {gap: 4rem;}
    .tbox_01 p {font-size: 1.8rem;}
    .btn_mon input[type="radio"] + span {font-size: 1.8rem;}
    .input_box01 input[type="date"] {font-size: 1.8rem; background-size: 20px 20px;}
    .btn_search {width: 30px; height: 40px;}
    .select_box01 > select,
    .select_box02 > select {font-size: 1.8rem; height: 40px;}
    .table_title01 {font-size: 1.8rem;}
    .sub_box04 .con01 .f1 { font-size: 1.8rem;}
    .hallym_area dl dt {width: 150px;}
    .inline_zip {display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 0 10px ;}
    .inline_zip .in_01 {margin-bottom: 0;}
    .inline_zip .in_02 {width: 90%; height: 42px;}
    .pw_grid {display: inline-block; text-align: center;}
    .my_grid02 {grid-template-columns: 1fr 1fr;}

    .main_header .header_box .reserv_02 {padding: 10px 20px;}
    .main_header .header_box .reserv_02 .text01 {font-size: 2.0rem;}
    .main_header .header_box .reserv_02 a {line-height: 3.0rem; grid-template-columns: 1fr 1.7fr;}
    .main_header .header_box .reserv_02 a {gap: 15px;}
    .main_header .header_box .reserv_02 .text02 {padding-top: 5px; font-size: 1.6rem;}
    .input_box01 {grid-template-columns: 1fr 0.1fr 1fr 0.1fr;}
    .icon_map {height: auto; margin: -10px 10px 0 0;}

}

@media (min-width: 600px) {
    .main_box03 .tab_menu .tab2 li a {font-size: 2.0rem;}
    .main_box03 .tab_menu .tab2 li.on a {font-size: 2.0rem;}
    .sub_box01 .tab_menu .tab01 li a {font-size: 2.0rem;}
    .sub_box01 .tab_menu .tab01 li.on a {font-size: 2.0rem;}
    .sub_box01 .tab_menu .tab02 li a {font-size: 2.0rem;}
    .sub_box01 .tab_menu .tab02 li.on a {font-size: 2.0rem;}
    .main_box02 .main_item a img {width: 60px; height: 60px;}
    .main_box02 ul {grid-template-columns: repeat(auto-fill, minmax(23%,auto));}
    .main_box04 .grid01{gap: 3.0rem;}
    .popup01 .pop_top h4 {font-size: 2.0rem;}
    .popup01 .pop_con .p_text {font-size: 2.0rem; line-height: 3.0rem}
    .input_box01 input[type="date"] {font-size: 2.0rem; background-size: 20px 20px;}
    .table_title01 {font-size: 2.0rem;}
    .table01 tr th {font-size: 1.8rem;}
    .table01 tr td {font-size: 1.8rem;}
    .btn_dim, .btn_next, .btn_no, .btn_yes {font-size: 2.0rem; line-height: 150%;}
    .tbox_02 .mycon_01 {display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
    .tbox_02 .mycon_01 > .left {margin-bottom: 0;}
    .input_box02 input[type="datetime-local"] {background-size: 24px 24px;}
    .sub_box03 .top_con .t2 {font-size: 2.0rem; line-height: 3rem;} 
    .popup03 .pop_con span {font-size: 2.2rem;}
    .sub_box04 .con01 h3 {font-size: 2.2rem;}
    .sub_box04 .con01 p {font-size: 1.8rem;}
    .sub_box04 .con01 .f1 {font-size: 2.2rem; line-height: 200%;}
    .btn_s01,
    .btn_s02,
    .btn_s03 {padding: 10px;}
    .btn_num {width: 40px; height: 40px; font-size: 3rem;}
    input[type='number'].result_01 {width: 38px; height: 40px;}
    .btn_re {width: 70px; height: 70px; line-height: 68px; border-radius: 50px;}

    .hallym_area .text03 {margin-top: 10px;}
    .hallym_area label {float: left; width: 50%; }
    .hallym_area dl dt {float: none; width: 180px; margin: 0 auto 10px auto;}
    .hallym_area dl dd {float: none; text-align: center; padding: 10px 0;}
    .hallym_area input[type=radio]:checked + label {background: none;}
    .hallym_area input[type=radio]:checked + label dl dd {background: #e6eeff; color: #8278dd;}
    .hallym_area_02 .btn_box {float: left; width: 49%;}
    .hallym_area_02 .btn_box:first-child {margin-right: 2%;}
    .self_grid {grid-template-columns: 1fr 1fr;}
    .self_con01 strong {font-size: 2.4rem;}
    .self_con01 p {font-size: 1.8rem;}

    .toggle_slide + label {width: 100px; height: 40px;}
    .toggle_slide + label::after {width: 34px; height: 34px; top: 3px; left: 3px;}
    .toggle_slide:checked + label::after {top: 3px; left: 63px;}
    .app_area .con01 ul {grid-template-columns: 60px 1.5fr 0.5fr;}
    .app_area .con01 .app_text {font-size: 2.0rem; line-height: 60px;}
    .inline_email {grid-template-columns: 1fr 20px 1fr 1fr; gap: 0 5px;}
    .inline_email > .select_box03 {margin-bottom: 0;}
    /* 내정보관리 */
    .btn_mybox {width: 600px;}
    .main_header .header_box .reserv_02 a {grid-template-columns: 1fr 2.0fr;}
    .main_header .header_box .reserv_02 .text01 {text-align: right;}
    .main_header .header_box .reserv_02 .text02 {font-size: 2.0rem;}
    
}

@media (min-width: 640px) {
    #gnb_top.fix {
        background-image: -moz-linear-gradient( 120deg, rgb(255 228 193) 0%, rgb(255 212 193) 29%, rgb(255 190 192) 57%, rgb(255 161 186) 100%);
        background-image: -webkit-linear-gradient( 120deg, rgb(255 228 193) 0%, rgb(255 212 193) 29%, rgb(255 190 192) 57%, rgb(255 161 186) 100%);
        background-image: -ms-linear-gradient( 120deg, rgb(255 228 193) 0%, rgb(255 212 193) 29%, rgb(255 190 192) 57%, rgb(255 161 186) 100%);
    }
    .main_header .header_box .reserv .text02 {font-size: 1.8rem;}
}

@media (min-width: 768px) {
    .main_header .header_box .reserv a {grid-template-columns: 1.3fr 2.7fr;}
    .main_box02 ul {grid-template-columns: repeat(auto-fill, minmax(18%,auto));}
    .main_box02 .con_01 > ul {grid-template-columns: repeat(auto-fill, minmax(25%,auto));}
    .main_box02 .con_01 .btm_box a span { font-size: 1.6rem;}
    .login_area ul li {font-size: 2.0rem;}
    .sns_login {width: 70%; margin: 0 auto;}
    .login_footer {width: 70%;}
}

@media (min-width: 1024px) {
    .main_header .header_box .main_tit .tit01 {font-size: 2.5rem;}
    .main_header .header_box .reserv a {grid-template-columns: 1.5fr 2.5fr;}
    .main_header .header_box02 .main_tit .tit03 {font-size: 2.5rem;}
    .main_header .header_box02 .main_info .t2 {font-size: 2.0rem;}
    .main_box01 .tab_menu {height: 70px;}
    .main_box01 .tab_menu ul li a {line-height: 70px;}
    .main_box03 .tab_menu {height: 70px;}
    .main_box03 .tab_menu .tab2 li a {line-height: 70px;}
    .main_box02 .main_item a img {width: 80px; height: 80px;}
    .main_box04 .grid01 {gap: 7rem; padding: 50px 0;}
    .main_box04 .con_01 .t1 {font-size: 2.0rem; padding: 10px; border-radius: 30px;}
    .main_box04 .con_01 .t2 {font-size: 2.0rem;}
    .main_box04 .con_01 .t3 {font-size: 1.8rem;}
    .main_box02 .main_item a p {font-size: 1.8rem;}
    .main_box02 .main_item a img {width: 80px; height: 80px;}
    .main_box02 .con_01 > ul { grid-template-columns: repeat(auto-fill, minmax(20%,auto));}
    .main_box02 .con_01 .btm_box a {padding: 10px 20px;}
    .sns_login {width: 60%; }

    section > .tit04 {font-size: 3rem;}
    .sub_box01 .tab_menu{height: 70px;}
    .sub_box01 .tab_menu .tab01 li a {line-height: 70px;}
    .sub_box01 .tab_menu .tab02 li a {line-height: 70px;}
    .btn_grid02 {gap: 5rem;}
    .btn_mon input[type="radio"] + span {line-height: 3.4rem;}
    .btn_dim, .btn_no, .btn_yes {font-size: 2.0rem;}
    .btn_grid05 .btn_no, 
    .btn_grid05 .btn_yes {font-size: 2.0rem;}
    
    .table_title02 {font-size: 2.4rem;}
    .table02 tr th, .table02 tr td, .table02 tr td input {font-size: 2.0rem;}
    .table05 tr th, .table05 tr td {font-size: 2.0rem; }
    .input_box02 input[type="datetime-local"] {font-size: 2.0rem;}
    .tbox_01 { padding: 20px; margin: 40px 0;}
    .tbox_02 {margin: 50px 0;}
    .tbox_03 {font-size: 2.0rem; height: 10rem;}
    .tbox_04 {font-size: 2.0rem; height: 10rem;}
    .table_title03 {width: 40%; padding: 15px; font-size: 2.4rem;}
    .btn_s01,
    .btn_s02,
    .btn_s03 {font-size: 2.0rem; /* padding: 10px 60px; */}
    .sub_box04 .con01 h3 {font-size: 2.5rem;}
    .btn_num {width: 50px; height: 50px; font-size: 3rem;}
    input[type='number'].result_01 {width: 48px; height: 50px; font-size: 2rem;}
    .btn_ticket {font-size: 2.0rem;}
    .btn_dis {font-size: 2.0rem;}
    .btn_login_02 {height: 60px; line-height: 60px; font-size: 2.2rem;}
    .input_box01 {padding: 50px 0 20px 0;}

    .sub_box02 .top_con .t2 {font-size: 2.4rem;}
    .hallym_area label {float: left; width: 20%;}
    .hallym_area .text03 { font-size: 1.8rem;}
    .hallym_area_02 .btn_box {padding: 30px;}
    .hallym_area_02 .btn_box h2 {font-size: 2.4rem; padding: 20px 0 15px 0;}
    .hallym_area_02 .btn_box p {font-size: 2.0rem;}

    .line_box01 p {font-size: 1.8rem;}
    .agree_box {font-size: 1.6rem;}
    .agree_allcheck {font-size: 1.8rem;}
    .agreement_container .title01 {font-size: 1.8rem; padding: 15px 0;}
    .login_footer {width: 60%;}
    .foot_center > ul > li {font-size: 2.2rem;} 
    .main_header .header_box .reserv_02 .text02 {padding-top: 20px;}
    .icon_map {width: 13%;}
}

@media (min-width: 1280px) {
    #gnb_top.fix {
        background-image: -moz-linear-gradient( 120deg, rgb(255 236 194) 0%, rgb(255 217 193) 29%, rgb(255 195 191) 57%, rgb(255 161 186) 100%);
        background-image: -webkit-linear-gradient( 120deg, rgb(255 236 194) 0%, rgb(255 217 193) 29%, rgb(255 195 191) 57%, rgb(255 161 186) 100%);
        background-image: -ms-linear-gradient( 120deg, rgb(255 236 194) 0%, rgb(255 217 193) 29%, rgb(255 195 191) 57%, rgb(255 161 186) 100%);
    }
    .main_box02 .con_01 .btm_box a span{ font-size: 1.8rem;}
    .main_box04 .con_01 .t1 {gap: 10rem; padding: 20px; border-radius: 40px;}
    .btn_list {padding: 15px; font-size: 2.0rem;}
    .btn_dim, .btn_next, .btn_no, .btn_yes {font-size: 2.2rem;}
    .btn_grid05 .btn_no, 
    .btn_grid05 .btn_yes {font-size: 2.2rem;}
}


/*========================================================================*/ 
/* 22.08.19 주차등록  */
/*========================================================================*/
.parking_grid01 {display: grid; grid-template-columns: 1fr 0.6fr; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px;}
.parking_grid01 > .table_title02 {margin-bottom: 0; word-break: keep-all;}
.btn_park {height: 40px; line-height: 40px; font-size: 1.6rem; text-align: center; color: #fff; border-radius: 10px; background: #8278dd;}
.btn_park:active {background: #5f55bb; color: #fff;}

.car_grid01 {display: grid; grid-template-columns: 0.5fr 1fr; align-items: center;}
.btn_del {display: block; width: 30px; height: 30px; background: url('../images/btn_delete.png') no-repeat; font-size: 0;}
.btn_del:active {background: url('../images/btn_delete_h.png') no-repeat;}

/* 22.08.19 주차등록 END ==================================================*/




/*  작성일자: 2024.06.10
    작성자: 임재성 
    설명: 마이헬스노트 관련 */
#loader {
    position: fixed;
    
    display: none;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
    top: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 998;
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid rgba(234, 97, 118);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    animation: spin 1.5s linear infinite;
    z-index: 999;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg);}
}

.checkbox-container { display: flex; cursor: pointer; align-items: center;}
.checkbox-container input[type="checkbox"] { display: none; }
.checkbox-checkmark { position: relative; display: inline-block; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 3px;}
.checkbox-checkmark::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #8278dd; border-radius: 2px; display: none;}
.checkbox-container input[type="checkbox"]:checked + .checkbox-checkmark::before {
    display: block;
}
.checkbox-label { display: inline-block; vertical-align: middle; margin-left: 5px; font-size: 1.6rem; line-height: 2.4rem;}
#individual-option {
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #ccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: right;
    background-size: 20px;
    cursor: pointer;
    font-size: 16px;
    visibility: hidden;
    text-align: right;
}
#individual-option::-ms-expand {
    display: none;
}
/* ----------------------------- */