@charset "utf-8";

/* 내용관리 */
#ctt {
  /* background-image: url(../../../img/ct_bg.jpg); */
  /* background-position: center -300px; */
  /* background-repeat: no-repeat; */
}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con { position: relative; display: block; width: 100%;max-width: 1280px;margin: 0 auto;}
/* #ctt_con img{max-width:100%;height:auto} */
.ctt_img {text-align:center}

/* 공동 */
.ctt_ct {width: 100%;margin: 0 auto; }

/* 탭메뉴 */
.top_tmenu {padding: 0 0 35px 0; display: flex; gap: 30px; /*justify-content: center;*/ }
.top_tmenu a {font-size: 22px; font-weight: bold; padding: 0 13px 7px 13px; border-bottom: 4px solid #6F98ED; color: #999;}
.top_tmenu a.active {
  color: #222; border-bottom: 4px solid #165AE7;
}



/* 주차시설소개 */

.par_ct_guide1{background-color: #fff; border-radius: 15px; border: 1px solid #ccc;padding: 25px 27px;width: 100%;margin: 0 auto;margin-bottom: 30px;}
.par_ct_guide1 >p {color: #165AE7; font-size: 24px; font-weight: 600;margin-bottom: 25px;word-break: keep-all;line-height: 1.45;}
.par_guide_service {display: flex;justify-content: space-between;width: 100%;}
.par_guide_service > div {text-align: center;}
.par_guide_service > div >img{width: 100%; max-width: 125px; margin-bottom: 25px;}
.par_guide_service > div >p { font-size: 16px;text-align: center; line-height: 1.45;padding: 0 20px; word-break: keep-all;}

.par_ct_guide2{background-color: #fff; border-radius: 15px; padding: 25px 27px 40px;width: 100%; margin: 0 auto; border: 1px solid #ccc;}
.par_ct_guide2 >p {color: #165AE7; font-size: 24px; font-weight: 600;margin-bottom: 25px;word-break: keep-all;}
.par_guide_service2{position: relative;}
.par_guide_service2 > div >img{width: 100%; max-width: 350px; }
.par_guide_service2 > div {display: flex;gap: 10px;justify-content: center;}


/* 스와이퍼 */
.swiper { width: 100%; height: 100%;}
.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center;}
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: var(--swiper-pagination-bottom, -24px) !important;}
/* 스와이퍼 */




/* 찾아오시는길 */
.map_box {margin-bottom: 25px;}
.map_box .cont{ display: none;}
.ctt_ct_txt {font-size: 22px;text-align: center;font-weight: 600;margin-bottom: 40px;}
.root_daum_roughmap_landing {  width: 100% !important;}
.map_ct {width: 100%;border-collapse: separate; border-spacing: 0 10px;}
.map_ct table.map_ct { width: 100%; margin-top: 20px;}
.map_ct th, .map_ct td { border: 1px solid #165AE7; padding: 10px 20px;  text-align: center;}
.map_ct  th {  background-color: rgba(22, 90, 231, 0.05); width: 200px;font-size: 16px;border-radius:10px;color: #165AE7;}
.map_ct  td {border: 0px solid #ccc;text-align: left; font-size: 16px;line-height: 1.45;
  word-break: keep-all;}


/* 예약하기 */
.booking_ct {padding: 0 20px;margin-top: 60px;}
.bk_ct_cover {border: 1px solid #ccc; border-radius: 15px; overflow: hidden;margin-bottom: 40px;}
table.bk_ct { width: 100%; max-width: 1280px; border-collapse: collapse;  margin: 0px auto 0px;background-color: #fff; }
.bk_ct th, .bk_ct td {  padding: 15px 15px; text-align: center;}
.bk_ct thead th { background-color: #165AE7; color: white; text-align: center;font-size: 20px;height: 65px;}
.bk_ct tbody th { background-color: #f5f5f5; width: 220px;font-size: 16px;border-top: 1px solid #ccc;border-right: 1px solid #ccc;}
.bk_ct tbody td {padding: 12px 15px;border-top: 1px solid #ccc;text-align: left;}
.bk_ct input[type="text"] {  width: 100% !important; padding: 10px 10px; box-sizing: border-box;font-size: 16px;border-radius: 5px;border: 1px solid #ccc;}
.bk_air {width: 25% !important; }
.radio_group label { margin-right: 15px;font-size: 16px;}
/*  */
.datetime_group { display: flex; gap: 10px;width: 100%;flex-wrap: wrap;}
.datetime_group >div {width: 100%;flex: 1 1 23%;}
.datetime_group >div >input {width: 100% !important;padding: 9px 15px;font-size: 16px;border-radius: 5px;border: 1px solid #ccc; background-color: #fff;}
.datetime_group >div >select { flex: 1; font-size: 16px; padding: 10px 15px;width: 100%;background-image: url(../../../img/down_arrow.png);background-repeat: no-repeat; background-position: right 15px center; background-size: 12px auto; appearance: none;  -webkit-appearance: none; }
/* .date_wrap{position: relative;} */

.mo_txt{ display: none;
  /* position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px; */
}
/* 요금 계산 */
.bk_cal > div {display: flex;gap: 10px;width: 100%;color: #222;}
.bk_cal >p {font-size: 14px; color: red;font-weight: 500;padding-top: 5px;line-height: 1.45;font-weight: 600;word-break: keep-all;}
.bk_cal_ct {width: 100%;text-align: center;font-weight: bold;}
.cal_btn {font-size: 18px; padding: 10px 15px; width: 100%;text-align: center;border-radius: 5px;background-color: #1A4DB8; color: #fff;font-weight: 600;max-width: 270px;}

/* 이용약관 */


.terms-container { margin: auto; background-color: #fff; padding: 30px 15px 5px; border: 1px solid #ccc; border-radius: 15px; margin-bottom: 35px;}
.terms-section { margin-bottom: 30px;}
.terms-section h3 {font-size: 16px;}
.terms-box { width: 100%; height: 150px; padding: 15px; border: 1px solid #ccc; border-radius: 5px; background-color: #f9f9f9; resize: vertical; font-size: 16px; margin-top: 10px;}
.terms-label { display: block; margin-top: 10px; font-size: 14px;}




/* 버튼 */
.bk_btn {padding: 15px 30px; font-size: 18px; font-weight: 600; color: #fff; background-color: #165AE7;border-radius: 10px; border: transparent;width: 200px;}






















/* 예약확인 */






/* 이용안내 */
.gui_ct_guide {margin-bottom: 30px;border-radius: 15px; border: 1px solid #ccc; overflow: hidden;}
.gui_ct_guide table { border-collapse: collapse; text-align: center; width: 100%;  margin: 0 auto;}
.gui_ct_guide th, .gui_ct_guide td {  padding: 12px;height: 65px; word-break: keep-all;}
.gui_ct_guide th { background-color: #165AE7;color: #fff; font-weight: 600;font-size: 22px;width: 355px;}
.gui_ct_guide .gui_th1 {width: 240px;}
.gui_ct_guide td {    font-size: 18px; background-color: #fff; border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;}
.gui_ct_form-group {  display: flex; align-items: center; gap: 30px;margin-bottom: 30px;height: 390px;}
.gui_ct_form-group label {  font-weight:600; font-size: 22px;color: #165AE7;align-items: center;display: flex; gap: 10px; padding: 13px 48px; border-radius: 10px; border: 1px solid #165AE7;background-color: rgba(22, 90, 231, 0.05) ;word-break: keep-all;height: 55px;width: 143px;justify-content: center;}
.gui_ct_form-group .ch_txt1 {height: 100%;}
.gui_ct_ch_txt {border: 1px solid #ccc; border-radius: 10px; background-color: #fff;padding: 20px 35px;width: 100%;height: 100%;}
.gui_ct_ch_txt >ul {list-style-type:initial;line-height: 1.55;}
.gui_ct_ch_txt ul>li {font-size: 16px; word-break: keep-all;}
.gui_ct_ch_txt ul>li::marker { font-size: 11px;}




/* 이용방법 */
.how_ct_gate {width: 100%;max-width: 700px;text-align: center;margin: 0 auto;}
.how_ct_gate > div > img {width: 100%;max-width: 656px;margin-bottom: 45px;}
.how_gate_ct0 {display: flex;flex-direction: column;gap: 30px;}
.how_gate_ct {display: flex;width: 100%;max-width: 700px; justify-content: space-between;text-align: left;}
.how_gate_ct >div >div:first-child {font-weight: 600;font-size: 20px; color: #165AE7;margin-bottom: 20px;display: flex;gap: 10px;}
/* .gate_ct >div >div:first-child >img {width: 100%;max-width: 24px;} */
/* .gate_ct >div >div >img {margin-right: 10px;} */
.how_gateimg img {width: 100%; max-width: 311px;}
.how_gate_tt {line-height: 1.5;}
.how_gate_tt div {display: flex;gap: 10px;align-items: center;}
.how_gate_ct div p {font-size: 16px;}
.how_gate_ct div span{color: #165AE7;font-size: 18px;}
.how_gate_ct > div >div >img {width: 100%; max-width: 25px;}











@media (max-width: 1024px) {


  /* 주차시설 */
  .par_guide_service > div >img {max-width: 105px; margin-bottom: 20px;}
  .par_guide_service > div >p {font-size: 14px;padding: 0 11px;}

  /* 이용안내 */
  .gui_ct_guide th, .gui_ct_guide td { padding: 12px; height: 53px;}
  .gui_ct_guide th {font-size: 20px; width: 295px;line-height: 1.45;}
  .gui_ct_guide  td {font-size: 16px;}
  
  .gui_ct_form-group { gap: 25px; margin-bottom: 20px;}
  /* .gui_ct_form-group .ch_txt1 { height: 205px;} */
  .gui_ct_form-group label { height: 49px;width: 130px;font-size: 20px;}
  /* select {padding: 13px 25px; font-size: 18px;} */
  .gui_ct_ch_txt { padding: 15px 35px;  }
  .gui_ct_ch_txt1 {height: 205px;}

  .datetime_group >div {flex: 1 1 48%;}


  /* 이용방법 */






}






@media (max-width: 768px) {
  .top_tmenu a {font-size: 20px;}

  /* 주차시설 */
  .par_guide_service {display: flex; flex-wrap: wrap; gap: 15px 10px; }
  .par_guide_service >div { width: calc(50% - 5px); box-sizing: border-box; }
  .par_guide_service > div >p { font-size: 16px; padding: 0px 5px;}
  .par_ct_guide1 >p {font-size: 20px;}
  .par_ct_guide2 >p {  font-size: 20px;}
  


  /* 이용안내 */
  .gui_ct_guide  th {font-size: 18px;}
  .gui_ct_form-group {  gap: 10px; margin-bottom: 15px; align-items: start; flex-direction: column;height: 100%;}
  .gui_ct_ch_txt { padding: 15px 20px 15px 25px;}
  .gui_ct_form-group label {height: 45px; width: 25%; font-size: 18px;padding: 13px 30px;}
  .gui_ct_form-group .ch_txt1 {  height: unset;}
  .gui_ct_form-group img {width: 100%; max-width: 22px;}


  /* 이용방법 */
  .how_gate_ct0 { gap: 20px; align-items: center;padding-bottom: 60px;}
  .how_gate_ct { max-width: 400px; flex-direction: column;gap: 15px;}
  .how_gate_ct >div >div:first-child {font-size: 18px; margin-bottom: 10px;}
  .how_gateimg img {width: 100%; max-width: 600px;}
  .how_ct_gate > div > img { margin-bottom: 30px;}

  /*  */
  table.bk_ct,.bk_ct thead, .bk_ct tbody, .bk_ct th, .bk_ct td, .bk_ct tr { display: block;   width: 100%; padding: 5px 0; }
  .bk_ct tr { margin-bottom: 0px; border: unset; padding: 0px 15px 10px; background: #fff;  }
  .bk_ct th { background: none; font-weight: bold; padding-top: 10px;  }
  .bk_ct td { border: none; padding: 5px 10px;  }
  .bk_ct td:before { content: attr(data-label); font-weight: bold; display: block;    margin-bottom: 5px;   }


  .bk_ct thead th {  display: none;}
  .bk_ct tbody th { width: unset;border-top: unset; border-right: unset; background-color: unset; text-align: left; padding: 10px 0px 5px;font-size: 18px; color: #165AE7;}
  .bk_ct tbody td { padding: 5px 0px;/*border-top: unset;*/}
  .bk_cal > div { flex-wrap: wrap;}
  .bk_ct input[type="text"] { flex: 1 1 48%;}
  .cal_btn { max-width: unset; flex: 1 1 100%;}

  .terms-container { padding: 25px 15px 5px;}





}



@media (max-width: 480px) {
  .lay_out2 { padding: 50px 20px 60px 20px;}
  .top_tmenu a {font-size: 18px;}
  .top_tmenu {justify-content: center; }



  /* 지도 */
  .ctt_ct_txt { font-size: 20px;}

  /* 주차시설 */
  .par_guide_service > div >img {max-width: 85px; margin-bottom: 10px;}
  .par_guide_service > div >p { font-size: 14px; padding: 0px 5px;}
  /* 지도 */
  .map_ct th {  width: 105px; font-size: 16px;}
  .map_ct td { font-size: 14px;}

  /* 예약 */
  .mo_txt{ display: block;}

  

  /* 이용안내 */
  .gui_ct_guide th, .gui_ct_guide td {padding: 7px 12px; height: 42px;}
  .gui_ct_guide th {font-size: 16px;}
  .gui_ct_guide td { font-size: 14px;}

  .gui_ct_form-group label { height: 42px; font-size: 16px; padding: 11px 25px;width: 27%;}
  .gui_ct_form-group img { width: 100%; max-width: 20px;}
  .gui_ct_ch_txt1 { height: 42px;}
  .gui_ct_ch_txt ul>li { font-size: 14px;}

  .datetime_group >div {flex: 1 1 100%;}



  /* 이용방법 */
  .how_gate_ct0 { gap: 20px; align-items: center;padding-bottom: 60px;}
  .how_gate_ct { max-width: 400px; flex-direction: column;gap: 15px;}
  .how_gateimg img {width: 100%; max-width: 600px;}
  .how_gate_ct div p { font-size: 14px;}



}
