@charset "utf-8";

/**************************************************************************************************************************************************************************************************
                                                                    HMS ENG CSS UI
***************************************************************************************************************************************************************************************************/

/**************************************************************************************************************************************************************************************************
*************************************************** 《《《   HEADER   》》》  *******************************************************************************************************************
***************************************************************************************************************************************************************************************************/

/* ------------------------------------ 《 통합사이트/거점사이트 전체메뉴 Layout 》 ------------------------------------ */

/************ 거점사이트 > 서브페이지 헤더 ************/
.strg_mn .head_strg .intro {max-width:44%;}
.strg_mn .head_strg .intro .intro_customer dd {max-width:270px;}

/* ----------------------------- 《《《   Quick Menu   》》》 ----------------------------- */
#quick_menu a span {letter-spacing:-1px; width:90%;}
#quick_menu .bt_trigger span {word-break:break-word; width:90%;}

@media only screen and (max-width:767px) and (min-width:270px) {
    #quick_menu a span {word-break:break-word; width:100%;}
}

/* ----------------------------- 《《《 Sub Title 》》》 ----------------------------- */
.itg_site .sub_title .menu_satus li:last-child {width:auto;}

/**************************************************************************************************************************************************************************************************
                                                                    《 통합사이트 Layout 》
***************************************************************************************************************************************************************************************************/

@media only screen and (max-width:767px) and (min-width:270px) {
    .sub_title .menu_satus {max-width:calc(100% - 2.778vw);}
    .sub_title .menu_satus li {margin-left:4.278vw;}
    .board_list .li_set .title p,
    .form_file .form_txt input[type="text"] {word-break:break-word;}
}

/* 예약 안내 (프로그램목록) */
.use_guide .btn_go_popup .btn {padding-right:20px; padding-left:20px;}
.use_guide .list_program .expln_text .dtl_info .tit {width:125px;}
.use_guide .list_program .expln_text .dtl_info p {width:255px;}

/* 인원 선택 */
.sel_pcnt .div_pcnt p {max-width:150px;}


/* ----------------------------- 《《《   MOBILE Layout   》》》 ----------------------------- */
@media only screen and (max-width:767px) and (min-width:270px) {
    /* 예약 안내 (프로그램목록) */
    .use_guide .btn_go_popup .btn {width:100%;}
    .use_guide .list_program .list_set .go_resrv {margin-left:0;}
    .use_guide .list_program .list_set .go_resrv .btn {margin:0; max-width:100%; width:100%;}
    .use_guide .list_program .list_set .go_resrv .btn ~ .btn {margin-top:6px;}
}

/* ----------------------------- 《《《   TABLET Layout   》》》 ----------------------------- */
@media only screen and (max-width:1023px) {
    /* 게시판 상세 */
    .board_detail .post_preview .post:before,
    .board_detail .post_preview .post:before {float:none; width:100%;}
    .board_detail .post_preview .post.prev:before {content:"Previous postings"; width:140px;}
    .board_detail .post_preview .post.next:before {content:"Next postings"; width:140px;}
    .board_detail .post_preview .post p {float:none; width:100%; max-width:100%;}
}

/**************************************************************************************************************************************************************************************************
                                                                    《 통합사이트 소개 》
***************************************************************************************************************************************************************************************************/
/* 이용정보 */
.gy.guide.utilize .display_price dl {height:181px;}
.gy.guide.utilize .display_price dt span {display:block; line-height:16px; margin-top:5px; margin-left:0;}
@media only screen and (max-width:767px) {
    .gy.guide.utilize .display_price dl {height:auto;}
    .gy.guide.utilize .display_price dt {width:46%;}
    .gy.guide.utilize .display_price dd {width:50%;}
    .gy.guide.utilize .display_price dd p {width:80px;}
}

/**************************************************************************************************************************************************************************************************
                                                                    《 통합사이트 예약 》
***************************************************************************************************************************************************************************************************/
/* -------- 예약 진행중 -------- */
/* 스텝별 타이틀 */
.div_resrv.sbcr_info[class*="on_step"] .titl_step .icon img {margin-top:-22px;}

/* -------- 결제진행 -------- */
/* 결제진행 > 결제정보 */
.amount_payment .dtl_info .tit {max-width:160px;}

/* 2. 예약날짜및시간 > 시/분 선택 */
.date_time .slot_time .form_rect .txt {box-sizing:border-box; padding:5px;}

/* 결제진행 > 할인설정 */
.disc_li_div .select_disc:after {content:'Select the base discount';}

@media only screen and (max-width:767px) {
    /* 통합예약 : 타이틀 영역 - 스텝별 on style */
    .resrv_wrap .item.on_step ~ .m_tit_step .item p {width:94px;}
}

/**************************************************************************************************************************************************************************************************
                                                                    《 통합사이트 프로그램안내 》
***************************************************************************************************************************************************************************************************/
/* 프로그램안내 */
.pgm_div .pgm_img .layer .in::before {content:"Hyundai Motorstudio";}
.pgm_div.all_end .pgm_img .layer .in::before,
.pgm_div.pop_ready .pgm_img .layer .in::before {display:none;}
.pgm_div.all_end .pgm_img .layer.strg .in::before,
.pgm_div.pop_ready .pgm_img .layer.strg .in::before {display:block;}

/* 통합사이트 > 통합예약 프로그램, i-Lab 프로그램, 거점사이트 > i-Lab 프로그램:회차종료 */
.pgm_div.end_pgm .pgm_img:after,
.use_guide .list_program .list_set.end_pgm .img_btn_wrap .img:after {content:'This session has wrapped up.\aPlease look forward to the next session.';}
.pgm_div.rerv_done .pgm_img:after,
.use_guide .list_program .list_set.rerv_done .img_btn_wrap .img:after {content:'The program reservation is closed.';}

/* 종료된 프로그램 자세히 보기 */
.pgm_img.msg_open:after {content: "The program is over.\aPlease check out previous events.";}

/* 0517 리뉴얼 페이지용 css 추가 */
.pgm_div.reserv_done .pgm_img.on:after {content:'The program reservation is closed.';}

/**************************************************************************************************************************************************************************************************
                                                                    《 현대 모터스튜디오 거점사이트 공통 스타일 》
***************************************************************************************************************************************************************************************************/

/* ------------------------------------ 《 거점사이트:메인 》 ------------------------------------ */
/* 거점 GNB */
#header .active .depth2_wrap {min-width:120px;}

.strg_mn_v2  #header .depth2_wrap {min-width: 100px;}
.strg_mn  #header .depth2_wrap {min-width: 100px;}
/* 상단 비주얼 영역 */
.strg_mn .mov_visual_wrap .cotn_txt {width:495px;}
.strg_mn .mov_visual_wrap .cotn_txt .btm {line-height:24px;}

/* 편의시설 */
.strg_mn .istu_content .guide_div .txt p {letter-spacing:-0.04em; word-break:break-word;}

/* 서비스센터 */
.guide.service_center .maintenance_service li strong {width:180px;}

/**************************************************************************************************************************************************************************************************
                                                                    《 현대 모터스튜디오 고양사이트 》
***************************************************************************************************************************************************************************************************/
/* 전시 */
.display .sub_cotn .page_notic .noti_cmnt {width:auto;}

/* 이용정보 */
@media only screen and (max-width:767px) {
    .guide.utilize .display_price dl {height:auto;}
}

/* 서비스센터 */
.guide.service_center .process li span {border-radius:20px; line-height:1.143em; padding:3px 20px; height:auto;}
@media only screen and (max-width:767px) {
    .guide.service_center .process li span {padding:0; height:auto;}
}


.strg_mn_v2 .wd_inner.kv_title .info_intro .info_box .bold {
    min-width: 156px;
}

/* .locinfo .locinfo_map p {
    font-size:1.4rem !important;
} */