@import url(https://www.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://www.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://www.innovad.co.kr/theme/innovad_v2/img/sub03/map.jpg) no-repeat center center; background-size: cover;}


/****************** 체험존 ******************/
.showroomEx {text-align: center; overflow: hidden;}
.showroomEx .dateSelect {padding: 110px 80px; font-weight: 300}
.showroomEx .dateSelect .selMonth {font-size: 2.625em;}
.selMonth_wrap {display: flex; justify-content: center; 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://www.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: 1.5em; font-weight: 300;}
table.calendar thead {position: relative;}
table.calendar thead th {padding-bottom: 35px; font-weight: 300;}
table.calendar thead::before {content: ""; display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 150vw; height: 1px; background: #ccc;}
table.calendar tbody::before {content: ''; display: block; height: 70px;}
table.calendar tbody td {height: 150px; vertical-align: top;}
table.calendar tbody td p {cursor: pointer;}
table.calendar tbody td > div {height: 100%;}
table.calendar tbody td .impossible {color: #ccc;}
table.calendar tbody td.selDate {color: #ff9900; font-weight: 500;}

#reserveFrom {background: #ff9900; padding: 70px 80px 50px; 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 li {display: flex; align-items: center;}
#reserveFrom .form_ul li:not(:last-child) {margin-bottom: 10px;}
#reserveFrom .form_ul li .form_title {font-size: 1.5em; font-weight: 500; width: 115px;}
#reserveFrom .form_ul li .form_input {font-size: 1.3125em; font-weight: 300; width: calc(100% - 115px);}

#reserveFrom .form_ul li .form_input select,
#reserveFrom .form_ul li .form_input input,
#reserveFrom .form_ul li .form_input textarea {background: #fff; border-radius: 10px; padding: 0 25px 0 30px; height: 48px; border: 0; width: 300px;}
#reserveFrom .form_ul li .form_input select:focus,
#reserveFrom .form_ul li .form_input input:focus,
#reserveFrom .form_ul li .form_input textarea:focus {background: #000; color: #fff;}

#reserveFrom .form_ul li .form_input select {background: #fff url(https://www.innovad.co.kr/theme/innovad_v2/img/sub05/arrow_down.png) no-repeat center right 20px; background-size: 11px;}
#reserveFrom .form_ul li .form_input select:focus {background: #000 url(https://www.innovad.co.kr/theme/innovad_v2/img/sub05/arrow_down_w.png) no-repeat center right 20px; background-size: 11px;}
#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: space-between; margin-top: 40px;}
.agree_input {position: relative;}
.agree_input input {display: none;}
.agree_input label {font-size: 1.3125em; font-weight: 300; cursor: pointer; width: fit-content; display: flex; align-items: center;}
.agree_input label::before {content: ""; display: block; width: 20px; height: 20px; background: #fff; border-radius: 50%; position: absolute; left: 100%; margin-left: 25px;}
.agree_input input:checked + label::before {background: url(https://www.innovad.co.kr/theme/innovad_v2/img/member/chk_after.png) no-repeat center center; background-size: 100%;}
#reserveFrom .reserve_agree_wrap #reserveBtn {width: 200px; height: 72px; font-size: 1.5em; font-weight: 300; background: #000; color: #fff;}



@media screen and (max-width: 1440px) {
  .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_title_wrap .title {font-size: 2.325em; margin-bottom: 7%;}
  .showroom_title_wrap .cont {font-size: 1.125em;}

  .title_34 {font-size: 1.75em;}
  .title_24 {font-size: 1.325em; margin-bottom: 10%;}

  .showroomSec1 {padding: 16% 20px 12%;}
  .showroomSec2 {padding: 16% 0 10%;}
  .showroom_guide {padding-bottom: 10%;}
  .showroom_guide ul {font-size: 1.25em; row-gap: 15px;}
  .showroom_guide ul .badge {padding: 4px 15px 5px 20px; border-radius: 15px; margin-right: 15px;}
  .showroom_guide ul li {align-items: baseline;}
  .showroom_guide ul li p {width: calc(100% - 120px);}
  .showroom_border .border_wrap {padding: 9% 0 100px;}
  .showroom_border .border_wrap .cont_wrap li:not(:last-child) {margin-bottom: 7%;}
  .showroom_border .border_wrap .cont_wrap li .tri_title {font-size: 1.125em; margin-bottom: 2.5%;}
  .showroom_border .border_wrap .cont_wrap li .tri_desc {font-size: 1em;}
  .showroom_border .border_wrap .cont_wrap li.large {width: 50%;}
  .showroom_border .border_wrap .cont_wrap li.small {width: 50%;}
  .showroom_border .show_btn_wrap {padding: 0 5%; margin-top: -40px;}
  .showroom_border .show_btn_wrap a {height: 70px; font-size: 1.25em;}
  .showroom_info {margin: 15% 0 25%;}
  .showroom_info ul {font-size: 1.125em; row-gap: 12px;}

  .showroom_map .title_48 {font-size: 2.625em;}

  .showroomEx .dateSelect {padding: 15% 0 10%;}
  .selMonth_wrap {column-gap: 35px;}
  .showroomEx .dateSelect .selMonth {font-size: 2.325em;}
  table.calendar {font-size: 1.25em; margin-bottom: 20px;}
  table.calendar thead th {padding-bottom: 3vw;}
  table.calendar tbody::before {height: 5vw;}
  table.calendar tbody td {height: 12vw;}
  #reserveFrom {padding: 50px 7% 40px;}
  #reserveFrom .title {font-size: 2.25em;}
  #reserveFrom .time_info {font-size: 1.25em; margin: 4% 0;}
  #reserveFrom .form_ul li .form_title {font-size: 1.325em;}
  #reserveFrom .form_ul li .form_input {font-size: 1.25em;}
  #reserveFrom .reserve_agree_wrap {margin-top: 5%;}
  #reserveFrom .reserve_agree_wrap #reserveBtn {width: 180px; height: 65px; font-size: 1.325em;}
  .agree_input label {font-size: 1.25em;}
  .agree_input label::before {margin-left: 10%;}
}


@media screen and (max-width: 768px) {
  #showroom .shop_banner {height: 75vh;}

  .showroom_title_wrap .title {font-size: 2.25em; margin-bottom: 10%;}
  .showroom_title_wrap .cont p:not(:last-child) {margin-bottom: 30px;}

  .title_34 {font-size: 1.5em; margin-bottom: 8%;}
  .title_24 {font-size: 1.2em; margin-bottom: 12%;}
  .showroom_border .border_wrap .title_34 {margin-bottom: 0;}

  .showroomSec1 {padding: 20% 20px 15%;}
  .showroomSec2 {padding: 16% 0 10%;}
  .showroom_guide {padding-bottom: 15%;}
  .showroom_guide ul {font-size: 1.125em;}
  .showroom_guide ul li .badge {padding: 3px 10px 4px 13px; border-radius: 10px;}
  .showroom_guide ul li p {width: calc(100% - 90px);}
  .showroom_border .border_wrap {padding: 9% 0 80px;}
  .showroom_border .show_btn_wrap {padding: 0 7%; margin-top: -35px;}
  .showroom_border .show_btn_wrap a {height: 60px; font-size: 1.2em;}
  .showroom_info {margin: 17% 0 27%;}
  .showroom_info ul {font-size: 1.111em;}

  .showroom_map .title_48 {font-size: 2.5em;}
  .showroom_map #map {height: 400px;}

  .showroomEx .dateSelect {padding: 20% 0 10%;}
  .selMonth_wrap {column-gap: 30px;}
  .showroomEx .dateSelect .selMonth {font-size: 2em;}
  input[type="month"] {width: 20px; height: 14px;}
  .input_date_box input:after {width: 20px; height: 14px;}
  table.calendar {font-size: 1.05em;}
  table.calendar thead th {padding-bottom: 2.5vw;}
  table.calendar tbody::before {height: 25px;}
  table.calendar tbody td {height: 14vw;}
  #reserveFrom {padding: 40px 5% 35px;}
  #reserveFrom .title {font-size: 2.125em;}
  #reserveFrom .time_info {font-size: 1.125em; margin: 3% 0 4%;}
  #reserveFrom .form_ul li .form_title {font-size: 1.25em; width: 100px;}
  #reserveFrom .form_ul li .form_input {font-size: 1.125em; width: calc(100% - 100px);}
  #reserveFrom .form_ul li .form_input select, 
  #reserveFrom .form_ul li .form_input input, 
  #reserveFrom .form_ul li .form_input textarea {width: 100%;}
  #reserveFrom .reserve_agree_wrap {margin-top: 5%;}
  #reserveFrom .reserve_agree_wrap #reserveBtn {width: 160px; height: 55px; font-size: 1.25em;}
  .agree_input label {font-size: 1.125em;}
  .agree_input label::before {margin-left: 10%;}
  
}

@media screen and (max-width: 540px) {
  #showroom .shop_banner {height: 50vh;}
  
  .showroom_title_wrap .title {font-size: 2.125em; margin-bottom: 15%;}
  .showroom_title_wrap .cont br {display: none;}

  .title_34 {font-size: 1.5em;}
  .title_24 {font-size: 1.111em; margin-bottom: 15%;}

  .showroomSec1 {padding: 25% 20px 20%;}
  .showroomSec2 {padding: 18% 0 10%;}

  .showroom_guide {padding-bottom: 18%;}
  .showroom_guide ul li {align-items: flex-start;}
  .showroom_guide ul li .badge {padding: 3px 10px 4px 12px; border-radius: 12px; margin-right: 15px;}
  .showroom_guide ul li p {min-width: fit-content;}
  .showroom_border .border_wrap {padding: 10% 0 80px;}
  .showroom_border .show_btn_wrap {padding: 0 10px; margin-top: -25px;}
  .showroom_border .show_btn_wrap a {height: 40px; font-size: 1.125em; padding: 0 25px; border-radius: 12px 12px 0 0;}
  .showroom_border .border_wrap .cont_wrap li:not(:last-child) {margin-bottom: 10%;}
  .showroom_border .border_wrap .cont_wrap li .tri_title {font-size: 1.2em;}
  .showroom_border .border_wrap .cont_wrap li .tri_desc {font-size: 1.05em;}
  .showroom_border .border_wrap .cont_wrap li .tri_desc span.mo_pd_lt {padding-left: 30px;}
  .showroom_border .border_wrap .cont_wrap li.large {width: 100%;}
  .showroom_border .border_wrap .cont_wrap li.small {width: 100%;}
  .showroom_info {margin: 20% 0 30%;}
  .showroom_info ul li {list-style: decimal; margin-left: 15px;}
  .showroom_info ul li .mo_none {display: none;}

  .showroom_map .title_48 {font-size: 2.25em;}
  .showroom_map #map {height: 250px;}

  .showroomEx .dateSelect {padding: 100px 0 30px;}
  .selMonth_wrap {column-gap: 10px;}
  .showroomEx .dateSelect .selMonth {font-size: 16px;}
  input[type="month"] {width: 13px; height: 9px;}
  .input_date_box input:after {width: 13px; height: 9px;}
  table.calendar {font-size: 13px;}
  table.calendar thead {border-bottom: 1px solid #ccc;}
  table.calendar thead th {padding-bottom: 10px;}
  table.calendar thead::before {display: none;}
  table.calendar tbody::before {height: 25px;}
  table.calendar tbody td {height: 18vw;}
  table.calendar tbody td p {height: 100%;}
  #reserveFrom {padding: 50px 20px 55px;}
  #reserveFrom .title {font-size: 6.75vw; text-align: center;}
  #reserveFrom .time_info {font-size: 4.5vw; margin: 35px 0 40px; text-align: center; line-height: 170%;}
  #reserveFrom .form_ul li:not(:last-child) {margin-bottom: 30px;}
  #reserveFrom .form_ul li {flex-direction: column; align-items: center;}
  #reserveFrom .form_ul li .form_title {font-size: 18px; width: 100%; margin-bottom: 10px; text-align: center;}
  #reserveFrom .form_ul li .form_input {font-size: 16px; width: 100%;}
  #reserveFrom .form_ul li .form_input select, 
  #reserveFrom .form_ul li .form_input input, 
  #reserveFrom .form_ul li .form_input textarea {padding: 0 25px;}
  #reserveFrom .form_ul li .form_input textarea {padding: 10px 25px; height: 200px;}
  #reserveFrom .reserve_agree_wrap {margin-top: 40px; flex-direction: column; align-items: center;}
  #reserveFrom .reserve_agree_wrap #reserveBtn {width: 200px; height: 60px; font-size: 21px; margin-top: 20px;}
  .agree_input {padding-right: 30px;}
  .agree_input label {font-size: 16px;}
  .agree_input label::before {margin-left: 10px; left: auto; right: 0;}
}


@media screen and (max-width: 375px) {
  .showroom_border .show_btn_wrap {padding: 0 5px;}
  .showroom_border .show_btn_wrap a {padding: 0 20px;}
}