@charset "utf-8"; /*********************
공통
***********************/
body { overflow-x:hidden; } 
.main_tit { color:#222; margin-bottom:20px; } 
.main_tit .tit { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -1px; text-align: center; color: var(--point); padding-block:30px 11px; } 
.main_tit .info { font-size: 13px; line-height: 1.38; letter-spacing: -0.65px; text-align: center; color: #888; } 
.bx-wrapper { margin-bottom:0; border:none; box-shadow:none; } 
.bg01 { background-color: #f7f9f9; } 

/**********************
메인비주얼
***********************/
.main_visual { text-align:center; color:#fff; position:relative; aspect-ratio: 334 / 176; display: flex; align-items: center; justify-content: center; padding:10px 0 20px; background: var(--point); } 
.main_visual img { object-fit: cover; min-height: 100%; min-width: 100%; } 

/*********************
병원정보
***********************/
.sec_company_info {background-color: #f7f9f9; padding:27px 0;} 
.sec_company_info .tit { font-size: 22px; font-weight: 700; line-height: 0.82; letter-spacing: -1.1px; text-align: center; color: var(--point); margin-bottom:19px; } 

.sec_company_info .contact { overflow:hidden; } 
.sec_company_info .contact ul {margin-top:34px;} 
.sec_company_info .contact li { box-sizing:border-box; } 
.sec_company_info .contact li i { margin-right:5px; margin-left:-27px; width:22px; display: inline-block; } 
.sec_company_info .contact li i img{width:100%;}
.sec_company_info .contact li { padding-left:27px; font-size: 13px; line-height: 1.54; letter-spacing: -0.65px; margin-bottom:30px; } 
.sec_company_info .contact li .tit1 { font-size: 15px; font-weight: 700; letter-spacing: -0.75px; color: #222; display: flex;  align-items: center; width:100%; margin-bottom:10px;} 
.sec_company_info .contact li .tit1 .btn{margin-left:10px;}
.sec_company_info .contact li .txt {} 
.sec_company_info .contact li .tel_field { font-size: 22px; font-weight: 700; line-height: 1.36; letter-spacing: normal; color: var(--point); } 
.sec_company_info .contact li .time_field p { display: flex; padding-left:7px; align-items: center; } 
.sec_company_info .contact li .time_field p:before { content: ''; display: inline-block; width:2px; height: 2px; background-color: #222; margin-right: 5px; margin-left:-7px; } 
.sec_company_info .contact li .time_field .week{width:70px;}
.sec_company_info .contact li .time_field p .time { text-align: right; margin-left:20px; } 
.sec_company_info .contact li .time_field p:last-child { color:var(--point) } 
.sec_company_info .contact .sec_outside_parking { width:100%; } 
.sec_company_info .contact .sec_outside_parking .btn { } 

.sec_company_info .map .btn_area { display: flex; gap:8px } 
.sec_company_info .map .btn_area .button { flex:1; padding: 8px 0; background-color: #fff; font-size: 14px; font-weight: 800; letter-spacing: normal; color: #363636; display: flex; align-items: center; justify-content: center; } 
.sec_company_info .map .btn_area .button img { margin-right: 7px; width:30px } 

/*********************
검색
**********************/
.main_search { background:var(--point); text-align:center; padding-bottom:30px; } 
.main_search .area_input { background:#e1eaea; border-radius:25px; height:40px; display: flex; align-items: center;  margin-inline: 12px;} 
.main_search .area_input input { background:none; border:none; height:40px; line-height:40px; font-size:14px; color:var(--point); padding-inline: 15px; } 
.main_search .area_input input::-webkit-input-placeholder { /* 크롬 */color: var(--point); font-weight: 700; } 
.main_search .area_input input:-moz-placeholder { /* 파이어폭스 */color: var(--point); opacity: 1; } 
.main_search .area_input input::-moz-placeholder { /* 파이어폭스 */ color: var(--point); opacity: 1; } 
.main_search .area_input input:-ms-input-placeholder { /* 인터넷 익스플로러 */color:var(--point); } 

.main_search .area_input input​::placeholder { color: var(--point); opacity: 1; } 
.main_search .area_input .btn_search { display:inline-block; background:url(../img/icon_search.png) no-repeat; width:24px; height:24px; background-size: contain; margin-left:20px; } 
.main_search .keyword { text-align:center; display:inline-block; font-size:13px; padding-top:20px; } 
.main_search .keyword a { color:#b2cbc7; } 
.main_search .keyword span { margin-right:15px; } 


/************************
시술
*************************/
.main_product { /*background:url(../img/main/bg_product.jpg) no-repeat bottom center; */ width:100%; position: relative; } 
.main_product .bx-wrapper { box-shadow:none; border:none; background:none; } 
.main_product .bx-wrapper .bx-viewport { padding-bottom:30px; width:calc(100% + var(--pd-inline)) } 
.main_product #bxslider .slide{display: flex; flex-direction: column;}
.main_product #bxslider .slide .area_img { position:relative; border-radius: 15px; overflow: hidden; aspect-ratio: 111 / 65;  display: flex; align-items: center; justify-content: center; } 
.main_product #bxslider .slide .area_img img { object-fit: cover; } 
.main_product #bxslider .area_txt { padding-bottom:5px; } 
.main_product #bxslider .area_txt .tit { margin-top:10px; font-size: 14px; letter-spacing: -0.7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;} 
.main_product #bxslider .area_txt .detail { margin-top:4px; font-size: 12px; letter-spacing: -0.6px; text-align: left; color: #888;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;} 
.main_product #bxslider .area_txt .price { margin-top:auto; padding-top:10px; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: -0.8px; color:var(--point) } 
.main_product #bxslider{display: flex;}
.main_product #bxslider .area_txt{display: flex; flex-direction: column; justify-content: space-between; flex:1;}
.main_product .bxslider4_wrap { position: relative; } 
.css3button { position:absolute; top:204px; } 
.css3button.bxslider4_next { right:-126px } 
.css3button.bxslider4_prev { left:-126px } 
.css3button a { width:76px; height:76px; border-radius:100px; font-size:0; } 
.css3button .bx-next { background:url(../img/sub/icon_arrow.png) center #e5ebea no-repeat; } 
.css3button .bx-prev { background:url(../img/sub/icon_arrow.png) center #e5ebea no-repeat; transform: rotate(180deg); } 
.css3button a:before { display:none; } 

.css3button { opacity: 1; } 


/************************
이벤트
*************************/
.sec_event { background-color: var(--point); }
.sec_event .bx-wrapper{margin:0; padding:0; background:none;}
.sec_event .center_wrap { display: flex; gap:10px; width:100% } 
.sec_event .tit { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -1px; text-align: center; color: #fff; padding-block: 30px 20px; width: 100%; } 
.sec_event .item { display: block; padding-bottom: 30px; /*width:calc((100% - 10px) / 2);*/ } 
.sec_event .item .thumb { aspect-ratio: 162/98; width:100%; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; } 
.sec_event .item .thumb img { object-fit: cover; max-height: 100%; max-width:none; min-height: 100%; min-width: 100%; } 
.sec_event .item .info_area { padding-inline: 5px; } 
.sec_event .item .info_area .tit_field { font-size: 14px; line-height: 1.43; letter-spacing: -0.7px; text-align: left; color: #fff; margin-block:10px 4px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.sec_event .item .info_area .detail_field { font-size: 12px; line-height: 1.5; letter-spacing: -0.6px; text-align: left; color: #83b8a4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } 

/*****************
오시는 길
******************/
.main_contact { overflow:hidden; clear:both; height:300px; } 
.main_contact .map {box-sizing:border-box; } 
.main_contact .map>div { width:100% !important; } 

.main_pop {position: absolute; left:0; top:0; width:100vw !important;  background: rgba(0,0,0,.8); height: 100vh;
  height: calc(var(--vh, 1vh) * 100) ; max-height:calc(var(--vh, 1vh) * 100); } 
.main_pop .wrap {position:absolute; left:50%; top:50%;  transform: translate(-50%, -50%); max-width: 90vw; max-height: calc(var(--vh, 1vh) * 100); } 

.main_pop iframe { max-width: 100% !important; height: 100% !important; }