ul, li {margin: 0px; padding: 0px; list-style: none;}
a {text-decoration: none;}
a {color:#000;}
a:hover {color:#000;}
body { font-family: 'Noto Sans KR', sans-serif;}

header {width: 100%; }
header h1 {text-align: center;}

/*nav*/
.sb-sidenav-menu {background-color: var(--bg-c02)}
.sb-sidenav .sb-sidenav-menu .nav .nav-link {color: var(--ft-bw01) !important;}
.nav-wrap {max-width:680px; margin:0 auto; display: flex; justify-content: space-between; width:100%;}
.nav-wrap h1 {padding-left: 10px;}
.nav-wrap h1 button{font-size: 1.2rem;}
.head_logo {width: 9rem;}
.login-menu-wrap  {border-bottom: 1px solid #fff;}
.login-menu-wrap a{display: flex; color: #fff; align-items: center; padding: 16px;}

.main-bnr-wrap {width: 100%; margin-top:56px;  height: 400px; background: url('../img/main_bnr01.jpg') center center no-repeat; background-size: cover;}
#main-bnr {width:100%; max-width:680px; margin: 0 auto; height: 400px;}

#main_content {display: flex; flex-direction: column;  width:100%; max-width:680px; margin:0 auto;}
#content {display: flex; flex-direction: column;  width:100%; max-width:680px; margin:56px auto 0 auto;}

.language_box{align-items: center; position: relative; margin: 0.75rem; color: var(--ft-c01); border-radius: 5px; top: 3px;}
.language_box2 {display: flex; align-items: center; position: relative; cursor: pointer;}
.language_box img {margin-right: 10px; width: 24px; height: 16px;}
.language-btn {color: #fff;}
.language-btn:hover {color: #fff;}
.language_box3 {text-align: center; min-width:auto; padding: 0.5rem; top: 80%; left: 10%;}
.language_box3 img {width: 24px; height: 16px; cursor: pointer; border: 1px solid #d7d7d7;}
.ta-center{text-align: center;}
@media (max-width: 680px) {
  .main-bnr-wrap {height: 300px;}
  #main-bnr {height: 300px;}
  #content p { padding: 0 1rem;}
  .navstyle { align-items: inherit;}
}

/*로그인*/
.form-signin {
  width: 100%;
  max-width: 330px !important;
  padding: 15px;
  margin: auto;
}

/*페이징*/
.page-div {margin:0; padding: 30px 0;}
.page-div .page-ul{ margin: 0 auto; clear: both; overflow: hidden; display: block; /*width:280px;*/ text-align: center;}
.page-ul li { display: inline-block; height: 25px; line-height: 25px; width:25px; text-align: center; margin:0px 2px; border-radius: 5px;}
.page-ul li.on { display: inline-block; background:var(--bg-c03); border:1px solid var(--color-01); font-size: 14px;}
.page-ul li a {color: var(--ft-bw02); }
.page-ul li.on a{ color:var(--ft-bw02); }

/*메인페이지*/
.main-btn-wrap {display: flex;}
.main-btn-wrap li {width:50%; }
.main-btn-wrap li a {width:100%; height: 50px; line-height: 50px; border:1px solid var(--bg-c01); text-align: center; display: block; text-decoration: none; cursor: pointer;}

.main-wrap {text-align: center;}

.main-wrap02 {display: flex; padding:0 10px; flex-wrap: wrap;}
.main-wrap02 .section {width:100%; }
.main-wrap02 .section img {width:100%; }

.alink {border-bottom: 2px solid var(--ft-c01); padding: 0px 3px;}

/*슬라이드 배너2*/
.txt-img-bnr .carousel-item {}
.txt-img-bnr .carousel-item .carousel-caption {position: relative; text-align: center; width: 100%; right: 0px; left: 0px; bottom:0px; padding:0 20px;}
.txt-img-bnr .carousel-item .carousel-caption span {display: block;}
.carousel-indicators {margin-bottom: 0px;}
.carousel-indicators [data-bs-target] {width: 30%;}

/*하단*/
footer {text-align: center;}
.terms-a {cursor: pointer;}

/*약관*/
.terms-wrap {position: fixed; width: 100%; top: 0; left: 0; background: #fff; height: 100%; z-index: 9999;}
.terms-div {width: 100%; height: 100%; display: flex; flex-direction:column;}
.terms-head {padding: 15px; border-bottom: 1px solid #111; margin-bottom: 15px; text-align: center;}
.terms-head > a { cursor: pointer; position:absolute; left: 15px; font-size: 19px;}
.terms-head > img { }
.terms-body {padding: 15px;}

/*서브 레이아웃*/
#sub_bnr {text-align: center;}
.sub-title {text-align: center;}
.onoff-scroll {overflow: hidden}
.disnone {display: none !important;}
.modal-btn {border: none; background: none; }

/*서비스 목록 페이지*/
.service-list-wrap {display: flex; flex-wrap: wrap;}
.service-list-wrap li {width:calc(25% - 20px); text-align: center; margin:10px; }
.service-list-wrap li button {width:100%; display: flex; flex-wrap: wrap; border:1px solid var(--bg-bw03); height: 120px; border-radius: 10px; justify-content: center; align-content: center;}
.service-list-wrap li button .service-icon {font-size:2.5rem !important;}
.service-list-wrap li button .service-menu {display: block; width: 100%;}
.send-mail {display: flex; align-content: center; justify-content: center; cursor: pointer;}
#modal_list li {padding: 10px 0; border-bottom: 1px dashed #ccc; }
#modal_list li:last-child {border:none;}
#modal_list li a {cursor: pointer; color:var(--ft-bw02); }

@media (max-width: 680px) {
  .service-list-wrap li {width:calc(33% - 10px); margin:5px;}
  .service-list-wrap li button .service-menu {font-size: 0.7rem;}
}

/*병원 목록*/
.serch_label {border: 1px solid #113c3c3c; padding: 5px 15px; width: 100%; max-width: 300px; border-radius: 15px;}
.serch_label input {border: none; outline: none; width: 88%;}
.h-bnr-list-wrap {}
.h-bnr-list-wrap .h-bnr-list {}
.h-bnr-list-wrap .h-bnr-list .bnrimg {border-radius: 10px 10px 0px 0px;height: 400px; /*object-fit: contain;*/ object-position: top;}
.h-bnr-list-wrap .h-bnr-list span {display: flex; width: 100%; padding: 10px 0; border-radius: 0px 0px 10px 10px; line-height: 50px;}
.h-bnr-list-wrap .h-bnr-list span img {height: 50px; padding:0 10px;}
.h-bnr-list-wrap .h-bnr-list p {width: 100%; padding: 10px 0; border-radius: 10px; line-height: 50px;}
.all-h-list {border-radius: 5px; border:1px solid #ccc;}
.all-h-list li {display: flex; height: 80px; padding:10px; align-items: center; border-bottom:1px solid #ccc;}
.all-h-list li:last-child {border:none}
.all-h-list li a {display: block; width:100%; display: contents;}
.all-h-list li img {width:60px; margin-right:10px;}
@media (max-width: 680px) {
  .h-bnr-list-wrap {margin: 0 10px;}
  .all-h-list {margin: 0 10px;}
  .h-bnr-list-wrap .h-bnr-list .bnrimg {height: auto;}
}

/*서비스 목록 상세보기*/
.sv-tap {display: flex;}
.sv-tap li {width:100%; text-align: center; height: 50px; line-height: 50px; cursor: pointer; border-bottom:1px solid #ccc}
.sv-tap li.on {background: var(--bg-c02); color:var(--bg-bw01); border-bottom:1px solid var(--bg-c02)}
.sv-img-wrap {position: relative;}
.sv-img-wrap img {width:100%; }
.sv-img-wrap .h-logo {position: absolute; right:50%; bottom:-50px; border-radius: 50px; margin-right:-50px; border:1px solid #ccc;}
.sv-img-wrap .h-logo img {width:100px; border-radius: 50%;}
.h-info {text-align: center;  }
.h-info .h-payment span {display: block;}
.h-history {border:1px solid #ccc; padding: 30px 20px 20px 20px; border-radius: 5px;}
.h-history .h-h-list li {padding-top:20px;}
.h-history .dactor-list {}
.h-history .dactor-list li {border-top:1px solid #ccc; padding:15px 0;}
.h-history .dactor-list li img {width:80px;}
.h-history .dactor-list li span {padding-left: 10px;}
.h-txt {line-height: 30px;}
.h-modal-gallery {display: flex; justify-content: space-between;}
.h-modal-gallery a {width:32%; border-radius: 5px;}
.h-modal-gallery a .img-fluid {border-radius: 5px;}
.h-title {text-align: center;}
.youtube-wrap img {width: 100%;}

/* 병원 -> 서비스 선택 -> 병원 서비스 상세보기  */
.hs-lock { text-align: center; padding: 20px 0px; min-height: 60px; margin-bottom: 30px; color: var(--bg-c01); }
.hs-lock p:first-child { font-size: 30px; }

@media (max-width: 680px) {
  .h-info {margin: 0 10px;}
  .h-history {margin: 0 10px}
  .h-txt {margin: 0 10px}
  .h-modal-gallery {margin: 0 10px}
  .youtube-wrap {margin: 0 10px}
  .h-qa-list {margin: 0 10px}
}


/*병원목록 상세*/
.h-point-txt {border-radius: 5px;}
.bh-txt li {padding-top:10px;}
.bh-txt li:first-child {padding-top:0px;}
.h-tag {display: block;}
.h-service-btn {display:inline-block; border:none; height: 40px; line-height: 40px; width:200px; border-radius: 5px; }

@media (max-width: 680px) {
  .bh-txt {margin: 0 10px;}
  .review-wrap {margin: 0 10px;}
}


/*병원 서비스 선택*/
.select-service {border-radius: 0px 0px 10px 10px;}
.select-service .push-service {height: 200px; background-size: cover; border-radius: 10px 10px 0px 0px; text-align: center; line-height: 200px;}
.select-service ul {}
.select-service ul li {padding-top:10px;}
.select-service ul li:first-child {padding-top:0px}
.select-service button {width:100%; text-align: center; border:none; border-top:1px solid #ccc; height: 50px; line-height: 50px; border-radius: 0px 0px 10px 10px;}
.other-service-wrap {}
.other-list li {display: flex; margin-top:20px; align-items: center; border:1px solid #ccc; border-radius: 10px; padding: 10px;}
.other-list li .icon{display: flex; width:80px; height: 80px; border-right:1px solid #ccc; justify-content: space-around; align-items: center; border-radius: 10px 0px 0px 10px;}
.other-list li .service-icon {font-size:2.5rem !important; }
.other-list li .txt {padding-left: 15px;  }
.other-list li .txt .t1 {display: block; font-weight: 700;}
.other-list li .txt a { display: inline-block;  border-bottom: 1px solid #ccc; background: none; padding:5px 0 0 0; color: var(--ft-c01)}

@media (max-width: 680px) {
  .select-service {margin: 0 10px;}
  .other-service-wrap {margin: 0 10px;}
}


/*예약하기*/
.booking-date {height: 50px; line-height: 50px; padding:0 10px; border:1px solid #ccc; width:100%;}
.book-item li {padding-top:10px;}
.book-item li:first-child {padding-top:0px;}
.book-txt {resize: none; height: 200px; border:1px solid #ccc;  width:100%;}
.booking-btn { width:100%; max-width: 680px; margin: 0 auto;  border:none; display: block; height: 50px; line-height: 50px; border-radius: 5px; border: 1px solid var(--bg-c01);}

@media (max-width: 680px) {
  .booking-wrap {margin: 0 10px;}

}

/*예약 결과*/
.t-style01 {width:100%;}
.t-style01 th {border:1px solid #ccc; height: 50px; line-height: 50px; text-align: center; background: var(--bg-c04)}
.t-style01 td {border:1px solid #ccc; padding:0 10px;}

/*예약목록*/
.booking-list {border-top:1px solid #ccc;}
.booking-list li {border-bottom:1px solid #ccc; padding:20px; }
.booking-list li a {display: flex; width:100%; justify-content: space-between;  align-items: center;}

/*프로필*/
.p-name-wrap {display: flex; justify-content: space-between;}
.p-name-wrap .form-floating {width:49.5%}
.p-phone-wrap {display: flex; justify-content: space-between;}
.p-phone-wrap select {width:calc(79% - 100px); border: 1px solid #ced4da; text-align:center; border-radius: 5px;}
.p-phone-wrap .form-floating {width:calc(100% - 100px);}
.p-birth-wrap {display: flex; justify-content: space-between;}
.p-birth-wrap .form-floating {width:32.5%;}

/*회원가입*/
.j-birth-wrap {display: flex; justify-content: space-between;}
.j-birth-wrap .form-floating {width:32.5%;}
.form-floating select {width:100%; height: 100%; border: 1px solid #ced4da; border-radius: 5px; padding: 15px 0px 0px 8px; line-height:1.25; height: calc(3.5rem + 2px); font-size: 1rem; }
.form-floating label{opacity:0.65; transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem);}
.j-birth-wrap .form-floating input[type="number"]::-webkit-outer-spin-button,
.j-birth-wrap .form-floating input[type="number"]::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0; }
.j-birth-wrap .form-floating input::placeholder{ color: var(--ft-bw04); }
.j-birth-wrap .form-floating input[type="number"]{padding-top: 1.625rem; padding-bottom: 0.625rem;}
.j-g-wrap {display: flex; justify-content: space-between;}
.j-g-wrap .form-floating {width:49.5%;}
.j-g-wrap .form-floating .sbtn {border: 1px solid #ced4da; border-radius: 5px; color: var(--bg-c01); width: 100%; height: 100%; background: var(--bg-bw01); padding-top: 0.625rem; padding-bottom: 0.625rem;}
.j-g-wrap .form-floating .on { background: var(--bg-c01); color: var(--bg-bw01);}

.countdown {width: 100%; position: absolute;top: 0;left: 80%;padding-top: 10px;color: var(--bg-c01);}

/*후기*/
.rv-ul {border-bottom: 1px solid #eaeced;}
.rv-li {border-top: 1px solid #eaeced;position: relative;}
.rv-adiv{position: relative; width:100%; display:table;padding: 20px 0;}
.rv-tadiv{display: table;width: 100%;table-layout: fixed;}
.rv-texdiv{display: table-cell;vertical-align: top;position: relative;}
.rv-texdiv > div:first-child {margin: 10px 0;}
.rv-texdiv .off{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; line-height: 22px; max-height: 110px; word-break: break-all; -webkit-line-clamp: 5; -webkit-box-orient: vertical; position: relative;}
.rv-texdiv .on{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; line-height: 22px; word-break: break-all; -webkit-box-orient: vertical; position: relative;}
.rv-texdiv .off img{display: none;}
.rv-texdiv .on img{max-width: 100%;}
.rv-phodiv{display: table-cell; width: 90px; padding-left: 30px; padding-top: 30px;}
.rv-phodivspan{display: block; position: relative; overflow: hidden;height: 90px;}
.rv-phodivspan img{position:absolute;right:-100%;left:-100%;width:100%;height:auto;margin:auto;}


/*후기 작성*/
.review-write-area {width: 100%;height: 300px;border: 1px solid #dfdfdf;resize: none;margin: 10px 0px 5px 0px;}
.t-style02 {width:100%;}
.t-style02 th {border:0px solid #ccc; height: 50px; line-height: 50px; text-align: center; background: var(--bg-c04)}
.t-style02 td {border:0px solid #ccc; padding:0px;}
.review-upbtn {display: inline-block; border: 1px solid #222; border-radius: 5px; padding:4px 10px;margin-left: 10px; cursor: pointer;}
.photo-icon {display: inline-flex; height: 80px; width: 80px; border: 1px dashed; font-size: 20px; justify-content: center; align-items: center;}
.photo-icon img {width: 70px;}

@media (max-width: 680px) {
  .profile-wrap {margin: 0 10px;}

}

/*문의*/
.contact_wrap textarea {width: 100%; border:1px solid #ced4da; border-radius: 5px; resize: none; height: 300px; }
.contact_wrap input {width: 100%; border:1px solid #ced4da; border-radius: 5px;}
.contact_wrap button {width:100%; text-align: center; border:none; height: 50px; line-height: 50px; border-radius:5px;}
.asktable tr th {text-align: center;}
.asktable tr td {text-align: center;}
.asktable tr td:nth-child(2) {text-align: justify; cursor: pointer;}
.askbtn { float: right; background: var(--bg-c02); border: 1px solid var(--bg-c02); border-radius: 5px; color: var(--bg-bw01);}

.askviewtable tr th {text-align: center;background:var(--bg-c02);}
.askviewtable tr:nth-child(3) td {height: 350px;}
.answertable tr th { background-color: var(--bg-c01);}
.answertable tr th span { float: right;}

@media (max-width: 680px) {
  .contact_wrap {margin: 0 10px;}

}

/* 원격진료 */
.medicalframe {width: 100%; height: 750px; border: 1px solid #111;}