@charset "utf-8";

/**************************************************************************************************************************************************************************************************
                                                            하남모터스튜디오 사이트 Layout
***************************************************************************************************************************************************************************************************/
/* 헤더 > 로고 */
.head_strg .intro .logo_cmnt_wrap .logo a {background-image:url(../../images/integration/common/HMS_Logo_Hanam_bk.svg);}
.head_strg.col_white .intro .logo_cmnt_wrap .logo a {background-image:url(../../images/integration/common/HMS_Logo_Hanam_wh.svg);}
.fixed .head_strg.col_white .intro .logo_cmnt_wrap .logo a {background-image:url(../../images/integration/common/HMS_Logo_Hanam_bk.svg);}


.mobile.fixed .m_header .logo_tit_area .strg {background-image:url(../../images/integration/common/HMS_Logo_Hanam_bk.svg);}
.strg_mn_v2 .head_strg.active .intro .logo_cmnt_wrap .logo a, .strg_mn_v2.fixed .head_strg .intro .logo_cmnt_wrap .logo a {background-image:url(../../images/integration/common/HMS_Logo_Hanam_bk.svg);}
/* .strg_mn_v2 .head_strg .intro .logo_cmnt_wrap .logo a {background-image:url(../../images/integration/common/HMS_Logo_Hanam_wh.svg);}/* 
/* 햄버거 열림: 로고 none/block */
.m_header .logo_home .gy {display:none;}
.m_header .logo_home .so {display:none;}
.m_header .logo_home .hn {display:block;}
.m_header .logo_home .bs {display:none;}

/* ------------------------------------ 《 통합사이트/거점사이트 서브메뉴/전체메뉴 Layout 》 ------------------------------------ */
/* 거점메인:거점GNB */
.strg_mn .head_strg.active:before {height:252px;}

/*********************************************************************************************************************************************************
                                                    《 거점사이트 HEADER 》
**********************************************************************************************************************************************************/

/* ------------------------------------ 헤더 > 배경 이미지 ------------------------------------ */
.display.car .sub_background {background-image:url(../../images/integration/sub_bg/bg_hn_display.jpg); background-position:-400px -30px;}
.display.future_mobility .sub_background {background-image:url(../../images/integration/sub_bg/bg_hn_experience.jpg); background-position:-400px -70px;}
.display.ioniq_lab .sub_background,
.display.digital_tour .sub_background {background-image:url(../../images/integration/sub_bg/bg_hn_experience.jpg); background-position:-400px -70px;}
.display.art .sub_background {background-image:url(../../images/integration/sub_bg/bg_hn_art.jpg);}
/* 20261103 */
.display.open .sub_background.tucson {background-image:url(../../images/integration/sub_bg/img_hn_display_banner_pc_20261103.png);}

.program .sub_background {background-image:url(../../images/integration/sub_bg/bg_gy_test_ride_v1_241030.png);}
.program.education .sub_background {background-image:url(../../images/integration/sub_bg/bg_hn_education.jpg); background-position:-420px -70px;}
.program.kids .sub_background {background-image:url(../../images/integration/sub_bg/bg_hn_kids.jpg); background-position:-490px -70px;}

.guide .sub_background {background-image:url(../../images/integration/sub_bg/bg_hn_guide_v1.png); background-position:-400px -40px;}

/* 산타페 상단 배너 */
.display.santafe .sub_background, .guide.santafe .sub_background {background-image:url(../../images/integration/sub_bg/bg_hn_santafe_240404.png);}
/* 전시 */

.guide.flower .sub_background {background-image:url(../../images/integration/sub_bg/bg_hn_flower_240703.png) ;}

.display.flower .sub_background {background-image:url(../../images/integration/sub_bg/bg_hn_flower_240703.png) ;}

.open .sub_background {background-image:url(../../images/integration/sub_bg/img_hanam_Experience_banner_PC_20241025.png);}
.display.experience .zerotozero_item_wrap dt {margin-top:25px; font-size:3.2rem; font-family:'hd_head_R';}
.display.experience .zerotozero_item_wrap dd {margin-top:12px; font-size:1.6rem; line-height:2.6rem; color:#626262;}
.language_ch {font-family:'Malgun Gothic';}

/* 아트 */
.display.art .sub_intro_cmnt {margin-top:50px;}
.display.art .sub_intro_cmnt dt {margin-bottom:10px;font-size:2rem; color:#000;}
.display.art .sub_intro_cmnt dt::before {content:"";display:inline-block; width:32px; height:32px; margin-right:10px; background:url(../../images/integration/common/ico_art.png) no-repeat 0 0; vertical-align:middle;}
.display.art .sub_intro_cmnt dd {font-size:1.6rem; color:#626262;}

/**************************************************************************************************************************************************************************************************
*************************************************** 《《《   MOBILE Layout   》》》   ***************************************************************************************************************
***************************************************************************************************************************************************************************************************/
@media only screen and (max-width:767px) and (min-width:270px) {

    /* ------------------------------------ 헤더 > 배경 이미지 ------------------------------------ */
    .display.car .sub_background {background-position:-108.333vw 0;}
    .display.future_mobility .sub_background {background-position:-105.556vw 0;}
    .display.ioniq_lab .sub_background,
    .display.digital_tour .sub_background {background-position:-97.222vw 0;}
    .display.art .sub_background {background-position:-100.000vw 0;}

    .program .sub_background {background-position:-75.000vw 0;}
    .program.education .sub_background {background-position:-116.667vw 0;}
    .program.kids .sub_background {background-position:-136.111vw 0;}
    .guide .sub_background {background-position:-151.944vw 0;}

    /* 전시 */
    .display.experience .zerotozero_item_wrap dt {width:80%; font-size:3rem; line-height:3.5rem;}

    .display.santafe .sub_background, .guide.santafe .sub_background {background-image:url(../../images/integration/sub_bg/m_bg_hn_santafe_240404.png);}

    /* 20261103 */
    .display.open .sub_background.tucson {background-image:url(../../images/integration/sub_bg/img_hn_display_banner_m_20261103.png); background-position: center;}
}

@media only screen and (max-width:767px) and (min-width:640px) {
    /* 헤더 > 배경 이미지 */
    .display.car .sub_background {background-position:right 0;}
}

/**************************************************************************************************************************************************************************************************
*************************************************** 《《《TABLET Layout》》》 *******************************************************************************************************************
***************************************************************************************************************************************************************************************************/
@media only screen and (max-width:1119px) and (min-width:768px) {
    .m_header .logo_tit_area .strg {background-image:url(../../images/integration/common/HMS_Logo_Hanam_wh.svg);}
    .fixed .m_header .logo_tit_area .strg {background-image:url(../../images/integration/common/HMS_Logo_Hanam_bk.svg);}
}