@charset "UTF-8";

/*--------- 폰트 ---------- */
@font-face {
    font-family: 'SCDream';
    src: url('../font/SCDream3.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'SCDream';
    src: url('../font/SCDream4.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SCDream';
    src: url('../font/SCDream5.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'SCDream';
    src: url('../font/SCDream6.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
:root { --wrap: 1000px; --wrap_wd: 500px; --wrap_wd_2: 250px; --menu_w: 400px; } 
body { background:var(--bg-light); } 
#wrap { overflow: hidden; position: relative; height: 100%; display: flex; justify-content: flex-end; max-width: var(--wrap); margin: 0 auto; } 
.left_wrapper { width: 50%; max-width: var(--wrap_wd); padding: 5rem 3rem; position: fixed; right: 50%; top: 0; height: 100%; } 
.right_wrapper { width: 50%; max-width: var(--wrap_wd); overflow-y: scroll; -ms-overflow-style: none; min-height: 100vh; background: #fff; } 
.right_wrapper::-webkit-scrollbar { display: none; } 

/* bar */
.bar { height: 1.0rem; background-color: #F8F8F8; } 

/*버튼*/
.bottom_btn { position: fixed; left: 50%; bottom: 0; width: 100%; padding: 1.0rem 1.6rem 2rem; max-width: 576px; transform: translateX(-50%);z-index:1040; } 
.go_top2 { width: 4.4rem; height: 4.4rem; background: url(../img/go_top.png) no-repeat center; background-color: #fff; background-size: 1.6rem auto; z-index: 1000; border-radius: 50%; display: none; position: fixed; left: calc(50% + var(--wrap_wd) - 4.4rem - 1.6rem); bottom: 2rem; border: 1px solid var(--border); } 
.go_top2.show { display: block; } 



.zd_2 { position:relative; z-index:2; } 

/* 헤더 */
.hd_m { display: flex; align-items: center; justify-content: space-between; height: var(--hd_height_m) !important; width: 100%;  position: fixed; top: 0; padding: 0 1.6rem; z-index: 1000;   left: 50%; max-width: var(--wrap_wd); background-color: #fff; } 
.hd_m .logo img{ width:14.5rem; height: auto;   } 
.hd_m button { border:0; background: transparent; } 
.hd_m button img, .hd_m a img { height:3.0rem; } 

.hd_m .page_tit { } 
.hd_m .hd_btn, .modal-header .hd_btn { display: flex; align-items: center; } 

.hd_m button.top_alim, .hd_m button.top_chat { position:relative; } 
.hd_m button.top_alim span, .hd_m button.top_chat span { color: #fff; background: var(--primary); display: inline-block; position: absolute; right: 0.0rem; top: 0.0rem; border-radius: 0.8rem;width:0.4rem;height:0.4rem; } 


/*헤더 배경이 투명일때*/
.hd_transparent { background:linear-gradient(to bottom, rgba(0,0,0,0.17), transparent); color:#fff; border-bottom:0; } 
.hd_transparent button img { filter: invert(95%) sepia(96%) saturate(15%) hue-rotate(283deg) brightness(104%) contrast(105%); } 
.hd_transparent .logo { background:url(../img/logo_w.png)no-repeat center / cover; } 
.hd_transparent button.top_alim span, .hd_transparent button.top_chat span { background:#fff; } 



/*검색*/
.sch_ip { display: flex; border:1px solid var(--border); background: #fff; padding: 0 1.5rem 0 1.5rem; border-radius: 0.8rem; } 
.sch_ip .form-control { height:4.8rem; padding: 0.5rem 0; } 
.sch_ip .form-control:focus { background-color: transparent; } 
.sch_ip button { width:2.0rem; height:2.0rem; border:0; background: transparent; } 

/*회색 검색*/
.sch_gray.sch_ip { background: #F5F6F8; border:0; } 


.ul_list { } 
.ol_list { padding-left: 2rem; } 
.ol_list li { margin-bottom:0.5rem; line-height: 140%; } 


/*노데이터*/
.no_data { display:flex; align-items: center; justify-content: center; flex-direction: column; } 



.item_opt_counter { position: relative; width: 8.7rem; height: 2.8rem; line-height: 2.8rem; border-radius: 3.6rem; border: 1px solid #E3E3E3; flex-shrink: 0; display: flex; align-items: center;z-index:2; } 
.item_opt_counter_btn { width: 26%; height: 3rem; vertical-align: top; padding: 0; } 

.item_opt_counter_btn.disabled, .item_opt_counter_btn:disabled { opacity: 0.3; background: transparent;border:transparent; } 
.item_opt_counter .quantity { width: 48%; height: 100%; vertical-align: top; color: #333333; font-size: 1.6rem; font-weight: bold; line-height: 4.4rem; text-align: center; border: unset; } 
.item_opt_counter .quantity:focus { outline: 0; } 


.item_opt_counter.time_counter { width: 15.0rem; height: 4.7rem; line-height: 4.7rem; border-radius: 3.6rem; border: 1px solid #E3E3E3; } 
.item_opt_counter.time_counter .quantity { color: #000; font-size: 1.8rem; } 



.item_opt_counter.disabled .quantity { color:#999; } 
.item_opt_counter.disabled .item_opt_counter_btn { opacity: 0.3; } 


/*하단메뉴*/
.bt_menu { width: calc(100% + 2px); max-width: 576px; background: #fff; position: fixed; left: calc(50% + var(--wrap_wd_2)); bottom: 0; transform: translateX(-50%); z-index: 999; width: 100%; max-width: var(--wrap_wd); z-index: 1000; display: block; } 
.bt_menu ul {display: flex;justify-content: space-between;align-items: center;text-align:center;padding:0 1.6rem; position: relative;} 
.bt_menu ul::before{content: '' ;  width: 100%; height: 10px; position: absolute; top: -10px;left:0px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+98,000000+100&0+0,0.65+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 98%,rgba(0,0,0,0.05) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bt_menu ul li {width:20%; position: relative;height: 6rem;display: flex; justify-content: center;align-items: center;} 
.bt_menu ul li a {display: inline-block;color:var(--gray2);font-weight: 300;font-size:1.2rem;} 
.bt_menu ul li .ico { width: 3rem; display: block; margin: 0 auto; } 
.bt_menu ul li  p{ white-space: nowrap; margin-top: 0.4rem;}
.bt_menu ul li .img_on { display:none; } 
.bt_menu ul li.on a { color:var(--primary); } 
.bt_menu ul li.on a:after{content: '';position: absolute;width: 13px;height: 13px;background-color: var(--primary);border-radius: 50px;bottom: -8px;left: 50%;transform: translateX(-6px);}
.bt_menu ul li.on .img_on { display:block; } 
 
.btn2{border: 0px; background-color: transparent; margin: 0px;}

/* 모바일 메뉴 */
body.menu_on { position: fixed; top: 0px; overflow-y: scroll; width: 100%; } 
.hd_menu_btn { font-size: 2rem; } 
.m_menu_wr { visibility: hidden; opacity: 0; position: fixed; top: 0; left: calc(50% + var(--wrap_wd_2) + (var(--wrap_wd_2) - var(--menu_w))); width: 50%; height: 100%; max-width: var(--menu_w); z-index: 99999; transition: all 0.5s ease-in-out; display: flex; justify-content: flex-end; overflow: hidden; } 

/* x버튼 */
.close_btn_wr { display: none; opacity: 0; } 
.m_nav .close_btn_wr { display: flex; justify-content: flex-end; opacity: 0; } 
.menu_on .m_nav .close_btn_wr { opacity: 1; } 
.close_btn { font-size: 2rem; border:0; height: auto; } 
.close_btn img { width:3.0rem; } 

/* 메뉴 열렸을때 외부 */
.menu_on .m_menu_wr { visibility: visible; opacity: 1; } 
.m_nav { position: relative; width: 100%; height: 100%; z-index: 99999; background: #fff; transition: all 0.4s ease-in-out; max-width: 0; transform: translateX(100%); visibility: hidden; opacity: 0; } 
.menu_on .m_nav { transform: translateX(0); visibility: visible; opacity: 1; max-width: 100%; } 

.menu_bg { position: fixed; left: calc(50% + var(--wrap_wd_2)); top: 0; background: rgba(0,0,0,0.6); transition: all 0.4s ease-in-out; width: 100%; height: 100%; z-index: 99998; visibility: hidden; opacity: 0; transform: translateX(-50%); max-width: var(--wrap_wd); } 
.menu_on .menu_bg { visibility: visible; opacity: 1; } 

/* 메뉴 열렸을때 내부 */
.m_nav .nav_wr { height: auto; } 
.m_nav .nav_ul { display: block; } 
.m_nav .nav_li { height: 100%; position: relative; } 
.m_nav .nav_a { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 1.2rem 1.6rem; } 
.m_nav .nav_a i { display: inline-block; } 
.m_nav .nav_a img { width:2.0rem; } 

.m_nav .nav_ul2 { display: none; background: var(--light); } 
.m_nav .nav_ul2 a { display: block; padding: 1.2rem 1.6rem; white-space: nowrap; } 

.form-control:disabled, .form-control[readonly]{color: #5e6063;}



/*인트로*/
.intro_wrap { width:100%; max-width:657px; padding-right: 1.6rem; padding-left: 1.6rem; margin: 0 auto; } 
.intro_logo { margin-top: 15.5rem; } 
.intro_logo img { width:225px; } 
.intro_txt1 { font-size: 3.3rem; margin-top: 4rem; font-weight: 700; word-break: keep-all; } 
.intro_txt2 { font-size: 1.8rem; margin-top: 1.4rem; word-break: keep-all; } 

.intro_card { margin-top: 7rem; } 
.intro_card .card { padding: 1rem 0.5rem 2.3rem; display: flex; flex-direction: column; justify-content: space-between; } 
.intro_card .card h3 { font-size: 1.5rem;  margin-top: 1rem; margin-bottom:3rem; font-weight: 700; word-break: keep-all; line-height: 1.4; } 

.left_wrap{ padding-top: 20rem; line-height: 140%;  }
.left_logo{margin-bottom: 5.5rem ;}

/*메인*/
.apart_logo{background-color: #fff;border-radius: 1rem;margin-top: 2.5rem;text-align: center; height: 16rem; margin-bottom: 1rem;}
.apart_logo.st2{margin-top: 4.7rem;margin-bottom: 3.5rem;}
.apart_logo img{ height: 100%;}  
.apart_tit{font-size: 2.4rem;font-weight: 600;word-break: keep-all;line-height: 1.3; padding-left: 5%; padding-right: 5%;}
.apart_txt{font-size: 1.6rem;font-weight: 500;margin-top: 1.3rem;}
.main_box{margin-top: 5rem;}
.main_box > li{margin-bottom:1.2rem ;}
.main_box  .media{box-shadow: 0 0px 8px rgba(95,130,161,0.1);border-radius: 1.6rem;padding: 2.5rem 2rem 2.5rem 5rem;background-color: #fff;border: #ECEFF9 1px solid;font-size: 1.4rem;align-items: center;}
.main_box  .media dt{font-size:2rem ; font-weight: 800;}
.main_box  .media .mm_img{width: 55px; margin-right: 3.2rem;}
.apart_tit2{font-size: 2rem;font-weight: 600;word-break: keep-all;line-height: 1.3; padding-left: 5%; padding-right: 5%; margin-bottom: 2rem;  }

/*로그인*/
.login_logo{padding-top:8.5rem ; padding-bottom: 7rem;  }

/*사전점검*/
.box_st1{padding:2.5rem 1.5rem 1.5rem ; margin-top: 2rem;}
.alim_list{font-size: 1.2rem;}
.alim_list li{padding-left: 1.7rem; background: url('../img/error-warning-fill.png') no-repeat 0px 1px; margin-bottom: 0.8rem; background-size:12px ; line-height: 140%; letter-spacing: 0px;}

.mypage_top{ background: url('../img/my_img.png') no-repeat right 60%;  background-size:57px ;  font-size: 2rem; padding:5.7rem 0rem 2.3rem ; font-weight: 600;}
.my_btn{padding:1.6rem 2rem  ; background-color: #fff; display: flex;  justify-content: space-between; align-items: center; width: 100%;  }
.my_btn:hover{ background-color:#f5f5f5;}

.dl_list1{margin-bottom: 1rem; line-height: 130%; display: flex;}
.dl_list1 dt{ color:var(--gray2); font-weight: 300; width:12rem  ; flex-shrink: 0;}
.dl_list1 dd{word-break: keep-all;}

/*예약현황*/
.list_card{border-radius: 0.8rem; border: var(--border) 1px solid;}
.list_card .box{background-color: var(--primary-light); padding: 3rem 2rem; border-top: var(--border) 1px solid; margin-top: 4rem;}

.issue_card{border-radius: 0.8rem; border: var(--border) 1px solid; padding: 1rem 2rem;}
.issue_card .dropdown-toggle::after{display: none;}
.list_tbl{width: 100%;}
.list_tbl td, .list_tbl th{padding:0.8rem 0rem ; vertical-align: top; line-height: 140%; }
.list_tbl th{color:var(--gray2); font-weight: 300;  }

.issue_upimg{ display: flex; gap:0.4rem ;}
.issue_upimg a{width: 20%;}
.swiper-pagination.pag_st { color: #B9B9B9; background-color: rgba(0, 0, 0, 0.5); display: inline-block; position: absolute; width: auto; padding: 0.5rem 1.2rem; border-radius: 50px; font-size: 1.2rem; right: 1rem; left: auto; bottom: auto; top: 1rem; } 
.swiper-pagination.pag_st .swiper-pagination-current { color: #fff; } 
.event_slide .swiper-slide  {text-align: center;}

.board_list{}
.board_list li a{display: block; padding: 2.4rem 2rem;} 
.board_list li a:hover{background-color: #f5f5f5;}
.board_list li{border-bottom: var(--border) 1px solid;}

/*동의서 체크 버튼*/
.btn-group-toggle.btn_check .btn{border-radius: 0.8rem !important; border:var(--border) 1px solid;}
.btn-group-toggle .btn-light:not(:disabled):not(.disabled).active{background-color: var(--primary); color: #fff; border:var(--primary) 1px solid;}

/* 반응형 */
@media (max-width: 992px) {.hd_m { transform: translateX(-50%); } 
#wrap { justify-content: center; } 
.left_wrapper { display: none; } 
.right_wrapper { width: 100%; } 

.bt_menu {left: 50%;transform: translateX(-50%); } 
.go_top2 { left: calc(50% + var(--wrap_wd_2) - 4.4rem - 1.6rem); } 
 }


@media (max-width: 767.9px) { 
.m_menu_wr { width: 100%; left: 50%; transform: translate(-50%); max-width: var(--wrap_wd); } 
.menu_bg { width: 100%; left: 50%; } 
.menu_on .m_nav { max-width: 80%; } 


}

@media (max-width: 575.9px){
    .apart_logo {height: 11rem;}
 .go_top2 { left: auto; right: 1.6rem; } 
  /*인트로*/
 .intro_logo { margin-top: 7rem; } 
 .intro_logo img { width: 45%; } 
 .intro_txt1 { font-size: 1.8rem; margin-top: 3rem; } 
 .intro_txt2{    font-size: 1.4rem;}
 .intro_card{margin-top: 3rem;}
 .intro_card .card img{max-width:200px ; }


 }

@media (max-width: 460px) {
   .bt_menu ul li{height: 5.4rem;}
    .bt_menu ul li a{font-size: 1.1rem;}
    .bt_menu ul li .ico{width: 2.6rem;}
 }

@media (max-width: 420px) { 
    .apart_logo.st2{    margin-top: 3.5rem;}
     .bt_menu ul li{width: auto;}
     .apart_tit{font-size: 2rem;}
     .hd_m .logo img{width:136px ;}
     .apart_txt{font-size: 1.4rem;}
     .main_box .media dt{font-size: 1.8rem;}
     .main_box .media{font-size: 1.2rem;         padding: 2rem 1rem 2rem 2rem;}
     .main_box .media .mm_img{width: 45px; margin-right: 1.5rem;}
}