@import url(https://n.innovad.co.kr/theme/innovad_v2'https://fonts.googleapis.com/css2?family=Gideon+Roman&display=swap');
.roman {font-family: 'Gideon Roman', cursive;}

#showroom .shop_banner {width: 100%; height: 100vh; background: url(https://n.innovad.co.kr/theme/innovad_v2/img/sub03/showroom_banner.jpg) no-repeat center center; background-size: cover;}

.showroom_title_wrap {text-align: center;}
.showroom_title_wrap .title {font-size: 2.625em; font-weight: normal; margin-bottom: 70px;}
.showroom_title_wrap .cont {font-size: 1.5em; font-weight: 300; line-height: 165%;}
.showroom_title_wrap .cont p:not(:last-child) {margin-bottom: 50px;}

.showroomSec1 {padding: 160px 20px 120px; border-bottom: 1px solid #ccc;}
.showroomSec2 {padding: 160px 0 120px;}

.title_34 {font-size: 2.125em; margin-bottom: 60px; text-align: center}
.title_24 {font-size: 1.5em; margin-bottom: 60px; text-align: center}
.showroom_map .title_48 {font-size: 3em; margin-bottom: 60px; text-align: center}

.showroom_guide {padding-bottom: 80px;}
.showroom_guide ul {width: fit-content; display: flex; flex-direction: column; row-gap: 30px; font-size: 1.5em; margin: 0 auto; font-weight: 300;}
.showroom_guide ul li {display: flex; align-items: center;}
.showroom_guide ul li .badge {background: #000; color: #fff; padding: 7px 20px 7px 30px; border-radius: 20px; margin-right: 20px;}
.showroom_border .border_wrap {border: 1px solid #ccc; padding: 70px 0 140px;}
.showroom_border .border_wrap .cont_wrap {width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px;}
.showroom_border .border_wrap .cont_wrap ul {display: flex; flex-wrap: wrap;}
.showroom_border .border_wrap .cont_wrap li {width: 100%;}
.showroom_border .border_wrap .cont_wrap li.large {width: 60%;}
.showroom_border .border_wrap .cont_wrap li.small {width: 40%;}
.showroom_border .border_wrap .cont_wrap li .tri_title {font-size: 1.5em; margin-bottom: 15px;}
.showroom_border .border_wrap .cont_wrap li .tri_desc {font-size: 1.3125em; font-weight: 300; line-height: 155%;}
.showroom_border .border_wrap .cont_wrap li:not(:last-child) {margin-bottom: 45px;}
.showroom_border .border_wrap .title_34 {margin-bottom: 5px;}
.showroom_border .show_btn_wrap {width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; column-gap: 120px; margin-top: -65px;}
.showroom_border .show_btn_wrap a {width: 400px; height: 100px; background: #222; color: #fff; font-size: 1.625em; border-radius: 20px 20px 0 0; display: flex; justify-content: center; align-items: center; transition: transform .3s;}
.showroom_border .show_btn_wrap a:hover {transform: translateY(-5px);}
.showroom_info {margin: 120px 0 250px;}
.showroom_info ul {display: flex; flex-direction: column; width: fit-content; margin: 0 auto; row-gap: 15px; font-size: 1.625em; font-weight: 300;}
.showroom_map #map {width: 100%; height: 800px; background: url(https://n.innovad.co.kr/theme/innovad_v2/img/sub03/map.jpg) no-repeat center center; background-size: cover;}


/****************** 체험존 ******************/
#showroom {padding-top: 160px;}
#showroom .title {font-size: 42px; font-weight: 500; text-align: center; margin-bottom: 40px;}
#showroom .wrapper {padding: 42px 50px 44px 60px; border: 1px solid #CCC; max-width: 1290px; margin: 0 auto; width: 100%; display: flex; gap: 60px;}
#showroom .calendar_wrap {display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 490px; align-items: center;}
#showroom .calendar_wrap .block {margin-bottom: 10px;}
#showroom .reserDate {display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px;}
#showroom .reserDate .tit {font-size: 16px; font-weight: 300; line-height: 24px; }
#showroom .reserDate .dateTime {font-size: 18px; font-weight: 500; line-height: 26px; }
#showroom .chkBtns {display: flex; flex-wrap: wrap; row-gap: 12px; column-gap: 20px;}
#showroom .chkBtn {display: flex; font-size: 16px; width: 100%; max-width: calc(50% - 10px); height: 44px; justify-content: center; align-items: center; border-radius: 4px; border: 1px solid #C4C4C4; background: #FFF;}
#showroom .chkBtn.active {color: #f90; border-color: #f90;}
#showroom .chkBtn:disabled {border: 1px solid #E0E0E0;background: #F4F4F4;}

#showroom .infoCont {padding:60px 40px 80px; display: flex; width:100%; max-width: 1290px; margin:0 auto; align-items: flex-start; text-align:left;}
#showroom .infoCont .row-12 {flex:0 0 50%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
#showroom .infoCont .row-30 {flex:0 0 50%; display: flex; flex-direction: column; align-items: flex-start; gap: 30px;}
#showroom .infoCont .txt1 {font-size: 28px; font-weight: 500; line-height: 34px;}
#showroom .infoCont .txt2 {color: #2D2D2D; font-size: 16px;font-weight: 300; line-height: 24px;} 
#showroom .findBtn {display: flex; width:320px; margin:0 auto; height: 74px; padding: 0 26px; justify-content: center; align-items: center; gap: 16px; color: #FFF; font-size: 18px; font-weight: 400; border-radius: 4px; background: #444;}


.showroomEx {text-align: center; overflow: hidden;}
.showroomEx .dateSelect {font-weight: 300; max-width:360px;}
.showroomEx .dateSelect .selMonth {font-size: 24px; font-weight: 500; line-height: 32px;}
.selMonth_wrap {display: flex; justify-content: space-between; align-items: center; column-gap: 45px;}

input[type="month"] {position: relative; width: 25px; height: 18px;}
.input_date_box input:after{position: absolute; top:50%; right:0; content: ''; width: 25px; height:18px; background: #fffcf5 url(https://n.innovad.co.kr/theme/innovad_v2/img/sub03/date_arrow.png) no-repeat center center /contain; transform: translateY(-50%); z-index: 0; cursor: pointer;}
input[type="month"]::-webkit-calendar-picker-indicator {opacity:0; z-index: 1; cursor: pointer;}
input[type="month"]::-webkit-clear-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="month"]:focus:before,
input[type="month"]:valid:before {display: none;}

table.calendar { font-size: 18px; line-height: 26px; max-width:400px;}
table.calendar thead {position: relative;}
table.calendar thead th {font-weight: 300;}
table.calendar tbody td:last-of-type div,
table.calendar thead th:last-of-type {color:#0091EA;}
table.calendar tbody::before {content: ''; display: block; height: 20px;}
table.calendar tbody td {font-weight:500;}
table.calendar tbody td p {cursor: pointer; line-height:36px;}
table.calendar tbody td > div {height: 100%; width:100%; max-width:36px; text-align: center; margin: 10px auto;}
table.calendar tbody td .impossible {color: #ccc !important;}
table.calendar tbody .selDate {color: #fff !important; border-radius: 30px; background: #F90;}

#reserveFrom {width:100%; text-align: left; }
#reserveFrom .title {font-size: 2.3125em; font-weight: 600; color: #000;}
#reserveFrom .time_info {font-size: 1.3125em; font-weight: 500; margin: 30px  0 20px; line-height: 140%;}
#reserveFrom .form_ul {display: flex; flex-direction:column; gap:22px;}
#reserveFrom .form_ul li {display: flex; flex-direction:column; gap:8px;width: 100%;}
#reserveFrom .form_ul li.half ul {display: flex; gap:20px;}
#reserveFrom .form_ul li .form_title {font-size: 16px; font-weight: 500; line-height: 24px;}
#reserveFrom .form_ul li .form_input {}

#reserveFrom .form_ul li .form_input select,
#reserveFrom .form_ul li .form_input input,
#reserveFrom .form_ul li .form_input textarea {height: 44px; padding: 0 12px 0 14px; border-radius: 4px; width:100%; border: 1px solid #E0E0E0; background: #FFF;}

#reserveFrom .form_ul li .form_input select {background: #fff url(https://n.innovad.co.kr/theme/innovad_v2/img/sub05/ic_drop_down_24.png) no-repeat center right 12px; background-size: 24px;}
#reserveFrom .form_ul li .form_input textarea {height: 140px; width: 100%; padding-top: 10px; padding-bottom: 10px;}

#reserveFrom .reserve_agree_wrap {display: flex; align-items: center; justify-content: flex-end; margin-top: auto; gap:28px; padding-top:38px;}
.agree_input {position: relative;}
.agree_input input {display: none;}
.agree_input label {font-size: 16px;line-height:24px; cursor: pointer; display:block; padding-left:34px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.00006' y='3' width='18' height='18' rx='5' stroke='%23E0E0E0' stroke-width='2'/%3E%3C/svg%3E") no-repeat left center;}
.agree_input input:checked + label {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2.00006' y='2' width='20' height='20' rx='6' fill='%23FF9900'/%3E%3Cpath d='M9.60018 14.604L16.6562 7.54802C17.1242 7.08002 17.8922 7.08002 18.3602 7.54802C18.8282 8.01602 18.8282 8.77202 18.3602 9.24002L10.4522 17.148C9.98418 17.616 9.22818 17.616 8.76018 17.148L5.65218 14.04C5.18418 13.572 5.18418 12.816 5.65218 12.348C6.12018 11.88 6.87618 11.88 7.34418 12.348L9.60018 14.604Z' fill='white'/%3E%3C/svg%3E") no-repeat left center;}
#reserveFrom .reserve_agree_wrap #reserveBtn {display: flex;width: 215px;height: 65px;justify-content: center;align-items: center;0;border-radius: 4px;background: #F90;color:#FFF;font-size: 24px;}
#reserveFrom .form_ul li.info {padding:12px; gap:10px;}
#reserveFrom .form_ul li.info .txt1 {font-size: 24px;font-weight: 500;line-height: 32px;}
#reserveFrom .form_ul li.info .txt2 {color: #2D2D2D;font-size: 16px;font-weight: 300;line-height: 24px;}

@media screen and (max-width: 1440px) {
  #showroom {padding-left:20px; padding-right:20px;}
  .showroom_title_wrap .title {font-size: 2.5em;}
  .showroom_title_wrap .cont {font-size: 1.25em;}
  .showroom_title_wrap .cont p:not(:last-child) {margin-bottom: 40px;}

}


@media screen and (max-width: 1140px) {
  .title_34 {font-size: 2em; margin-bottom: 7%;}
  .title_24 {font-size: 1.4em; margin-bottom: 7%;}
  .showroom_guide {padding-bottom: 8%;}
  .showroom_guide ul {font-size: 1.325em; row-gap: 20px;}
  .showroom_guide ul li .badge {padding: 5px 18px 6px 24px;}
  .showroom_border .border_wrap {padding: 7% 0 120px;}
  .showroom_border .border_wrap .cont_wrap li:not(:last-child) {margin-bottom: 5%;}
  .showroom_border .border_wrap .cont_wrap li .tri_title {font-size: 1.325em; margin-bottom: 2%;}
  .showroom_border .border_wrap .cont_wrap li .tri_desc {font-size: 1.125em;}
  .showroom_border .show_btn_wrap {padding: 0 5%; column-gap: 0; justify-content: space-between; margin-top: -45px;}
  .showroom_border .show_btn_wrap a {width: auto; height: 80px; font-size: 1.4em; padding: 0 10%;}

  .showroom_info {margin: 12% 0 25%;}
  .showroom_info ul {font-size: 1.325em;}
  .showroom_map .title_48 {font-size: 2.875em; margin-bottom: 6%;}
  .showroom_map #map {height: 600px;}
}
@media screen and (max-width: 1024px) {
  #showroom .wrapper {flex-direction: column;}
  #showroom .calendar_wrap {max-width:unset;}
}

@media screen and (max-width: 768px) {
  #showroom {padding-top:95px;}
  #showroom .wrapper {padding: 0; border:0; gap:40px;}
  #showroom .calendar_wrap {gap:24px;}
  #showroom .calendar_wrap .block {margin:0;}
  .showroomEx .dateSelect {max-width:unset;}
  .showroomEx .dateSelect .selMonth {font-size: 18px; line-height: 26px;}
  #showroom .reserDate .tit,
  #reserveFrom .form_ul li .form_title {font-size: 14px; font-weight: 500; line-height: 20px;}
  #showroom .chkBtns {gap:12px;}
  #showroom .chkBtn {font-size: 14px; max-width: calc(50% - 6px);}

  #showroom .infoCont {padding: 40px 0; flex-direction:column; gap:20px;}
  #showroom .infoCont .row-12 {flex:1; gap: 8px; }
  #showroom .infoCont .row-30 {flex:1; gap: 20px;}
  #showroom .infoCont .txt1 {font-size: 16px; line-height: 24px;}
  #showroom .infoCont .txt2 {font-size: 13px; line-height: 18px;} 
  #showroom .findBtn {width:280px; height: 50px; font-size: 15px;}
  #showroom .findBtn img {max-width:24px;}

  #reserveFrom .form_ul li.half ul {flex-direction:column; gap:22px;}
  #reserveFrom .form_ul li.info {padding:12px 0; }
  #reserveFrom .form_ul li.info .txt1 {font-size: 16px; line-height: 24px;}
  #reserveFrom .form_ul li.info .txt2 {font-size: 13px; line-height: 18px;}

  #reserveFrom .reserve_agree_wrap {justify-content: center; margin-top: 0; flex-direction:column; gap:12px; padding-top:22px;}
  .agree_input label {font-size: 13px;line-height:18px;}
  #reserveFrom .reserve_agree_wrap #reserveBtn {width:100%; height: 49px;font-size: 18px;}
}