/* 전체 커스텀 */

@font-face {
    font-family: 'icomoon2';
    src: url('/img_up/shop_pds/ehompy0534/design/icomoon/icomoon.eot');
    src: url('/img_up/shop_pds/ehompy0534/design/icomoon/icomoon.eot') format('embedded-opentype'),
        url('/img_up/shop_pds/ehompy0534/design/icomoon/icomoon.ttf') format('truetype'),
        url('/img_up/shop_pds/ehompy0534/design/icomoon/icomoon.woff') format('woff'),
        url('/img_up/shop_pds/ehompy0534/design/icomoon/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

:root {
    --max-width: 1560px;
    --sb-max-width: 1440px;
    --prm-clr: #b92c2c;
    --en-font: "Montserrat Alternates", sans-serif;
    ;
    --pdd-btt: clamp(5rem, 11vw, 12rem);
}

body::-webkit-scrollbar {
    width: 10px;
    /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb {
    height: 30%;
    /* 스크롤바의 길이 */
    background: #a1a1a1;
    /* 스크롤바의 색상 */

    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    background: #f9f9f9;
    /*스크롤바 뒷 배경 색상*/
}

/*************************** 헤더 ****************************/
.gnb_p_wrap {
    display: none;
}

#header {
    background: transparent;
}

#header *,
#header * * {
    font-family: 'pretendard';
}

#header.nav-down {
    transition: 1s;
}

#header.nav-up {
    transition: 1s;
    top: -100px;
}

.lnb_p .dep1>li>a>span {
    color: #fff;
    font-weight: 500;
    font-size: clamp(.95rem, .95vw, 1.5rem);
}

#header .sns_wrap {
    float: right;
    display: flex;
    height: 100px;
    align-items: center;
}

#header .sns_wrap a {
    display: flex;
    align-items: center;
    color: #fff;
    padding: clamp(.4rem, .4vw, 1rem) clamp(1.3rem, 1.5vw, 2rem);
    border-radius: 10px;
    margin-right: clamp(.4rem, .5vw, 1rem);
    backdrop-filter: blur(10px);
    font-size: clamp(.78rem, .78vw, 1rem);
    /*box-shadow: 3px 3px 2px rgba(0,0,0,0.15), inset 0 0 8px #a302d3ab; */
    border: 1px solid #ffffff2e;
    background: linear-gradient(0deg, #ffffff17 50%, transparent 50%);
}

#header .logo .right-phone:before {
    content: '\e942';
    position: absolute;
    top: 0;
    right: 60px;
    bottom: 0;
    width: 25px;
    height: 25px;
    margin: auto;
    font-size: 24px;
    font-family: 'icomoon2';
    color: #bbbbbb;
}


@media (min-width:1024px) {
    #header .logo h1 span img {
        max-width: 240px;
    }

    #header:hover {
        background: #fff;
        transition: unset;
    }

    #header:hover .lnb_p .dep1>li>a>span {
        color: #000;
    }

    #header:hover .sns_wrap a {
        border: 1px solid #0000002e;
        color: #000;
        background: linear-gradient(0deg, #00000017 50%, transparent 50%);
    }

    .lnb_p .dep2>ul>li.on>a,
    .lnb_p .dep2>ul>li:hover>a {
        background: var(--prm-clr);
    }

    #header .logo .right-phone {
        display: none;
    }

}

#header .logo h1 span img.logo_w {
    display: block;
}

#header .logo h1 span img.logo_c {
    display: none
}

#header:hover .logo h1 span img.logo_w {
    display: none;
}

#header:hover .logo h1 span img.logo_c {
    display: block
}

.lnb_p_all_wrap .lnb_p_all {
    background: #000;
}

.lnb_p_all_wrap .lnb_p_all::-webkit-scrollbar {
    width: 8px;
    /* 스크롤바의 너비 */
}

.lnb_p_all_wrap .lnb_p_all::-webkit-scrollbar-thumb {
    background: #ddd;
    /* 스크롤바의 색상 */
    border-radius: 10px;
}

.lnb_p_all_wrap .lnb_p_all::-webkit-scrollbar-track {
    background: #ddd;
    /*스크롤바 뒷 배경 색상*/
}



/* 서브뷰 헤더액티브 */
#sub_view #header.active {
    background: #fff;
    transition: .3s;
}

#sub_view #header.active .lnb_p .dep1>li>a>span {
    color: #000;
}

#sub_view #header.active .logo h1 span img.logo_w {
    display: none;
}

#sub_view #header.active .logo h1 span img.logo_c {
    display: block;
}

#sub_view #header.active .sns_wrap a {
    border: 1px solid #0000002e;
    color: #000;
    background: linear-gradient(0deg, #00000017 50%, transparent 50%);
}


/* 하이텍 홈페이지 추가 */

#header .h_inner .dkh_logo {
    float: right;
    display: flex;
    align-items: center;
    height: 100px;
    padding-right: clamp(1rem, 1vw, 1rem);
}

#header .h_inner .dkh_logo a {
    display: block;
    width: 180px;
}

#header .h_inner .dkh_logo .logo_c {
    display: none;
}


#header:hover .h_inner .dkh_logo .logo_w {
    display: none;
}


#header:hover .h_inner .dkh_logo .logo_c {
    display: block;
}

#sub_view #header .h_inner .dkh_logo .logo_c,
#sub_view #header.active .h_inner .dkh_logo .logo_w {
    display: none;
}

#sub_view #header.active .h_inner .dkh_logo .logo_c,
#sub_view #header:hover .h_inner .dkh_logo .logo_c {
    display: block;
}


@media (max-width:1200px) {
    #header .sns_wrap {
        display: none;
    }

    #header .logo h1 span img {
        max-width: 210px;
    }

    #header .h_inner .dkh_logo {
        display: none;
    }
}





/*************************** 컨테이너 ****************************/
/****** 1920 해상도 이상 ******/
@media (min-width:1921px) {
    .row>.white-space {
        max-width: 1920px !important
    }

    .sub_location,
    #footer .f_inner,
    .shgroup .sub_top_text .top_text_inner,
    .contents_wrap .sub_location,
    .contents_wrap .sub_top_title,
    .lnb_p_all_wrap .lnb_p_all .lnb_p_all_inner,
    .sub_page .inner,
    .main_sec .inner {
        margin: 0 auto;
        max-width: 1920px
    }
}

/****** 1920 해상도 이하 ******/
@media (max-width:1920px) {

    /* PC 화면 넓이값을 가진 센터유지 */
    .row>.white-space {
        max-width: var(--max-width) !important
    }

    .sub_location,
    #footer .f_inner,
    .shgroup .sub_top_text .top_text_inner,
    .contents_wrap .sub_location,
    .contents_wrap .sub_top_title,
    .lnb_p_all_wrap .lnb_p_all .lnb_p_all_inner,
    .main_sec .inner {
        margin: 0 auto;
        max-width: var(--max-width);
    }

    .sub_page .inner {
        width: var(--sb-max-width);
        margin: 0 auto;
    }
}


#sub_view * {
    font-family: 'pretendard';
}

#sub_view .shgroup .sub_top_bg:before {
    background-image: url(/img_up/shop_pds/ehompy0534/design/2024/sub/sub_title.jpg);
    width: 100%;
    background-size: cover;
    background-position: 100% 100%;
}

@media (min-width: 1024px) {
    #container {
        padding-top: 0px;
        position: relative;
    }


    #sub_view #container .contents_wrap {
        /*padding-bottom: clamp(10rem, 11vw, 12rem);*/
        padding-bottom: 0;
    }

    #sub_view #container .contents_wrap .snb_wrap {
        background: #ffffff69;
        overflow: hidden;
        border-radius: clamp(2rem, 2vw, 3rem) clamp(2rem, 2vw, 3rem) 0 0;
    }

    #sub_view #container .contents_wrap .snb .dep1 li.on a,
    #sub_view #container .contents_wrap .snb .dep1 li:hover a {
        color: var(--prm-clr);
    }

    #sub_view #container .contents_wrap .snb .dep1 li a>span {
        background: linear-gradient(0deg, #00000017 50%, transparent 50%);
    }

    #sub_view .lnb_p .dep1>li.on>a>span,
    #sub_view .lnb_p .dep1>li:hover>a>span {
        color: var(--prm-clr) !important;
    }
}


@media (max-width:1023px) {
    #viewport #container {
        padding-top: 0;
    }

    #sub_view #container .contents_wrap {
        padding-bottom: 0;
    }
}

/*모바일 스킨*/

#viewport .viewport_side {
    background: #000000a3;
    backdrop-filter: blur(30px);
}

.side_gnb>ul {
    display: none;
}

#sub_view #container .contents_wrap .snb .m_snb_toggle {
    background: var(--prm-clr);
}

#sub_view #container .contents_wrap .snb .m_snb_toggle:after {
    border-top-color: var(--prm-clr);
}

#sub_view #container .contents_wrap .snb .m_snb_toggle.on:after {
    border-bottom-color: var(--prm-clr);
}

#left_side .dkh_logo {
    padding-top: clamp(3rem, 3vw, 3rem);
}

#left_side .dkh_logo a {
    padding:10px;
}

#left_side .dkh_logo img {
    width: 190px;
}

@media (max-width:1023px) {
    .shgroup .sub_top_bg img {
        height: 240px;
    }

    .side_gnb_wrap a {
        display: inline-flex;
        height: 100%;
        align-items: center;
    }

    .side_gnb_wrap img {
        display: table-cell;
        padding: 0 15px;
        vertical-align: middle;
        max-height: 30px;
    }
}

/*************************** 푸터 ****************************/
#footer {
    background: #000;
}

#footer * {
    font-family: 'pretendard';
    color: #fff;
}

#footer * * {
    font-family: 'pretendard';
    color: #fff;
}


#footer .f_inner {
    padding: clamp(4rem, 6vw, 7rem) 0 clamp(6rem, 6vw, 7rem);
}


#footer .fc1 {
    display: flex;
    justify-content: space-between;
}

#footer .fc1 .fg-1 {
    flex-grow: 1;
}

#footer .fc1 .f-cs {
    display: flex;
    gap: clamp(2rem, 3vw, 4rem);
}

#footer .fc1 .f-cs .subj {
    font-size: clamp(.9rem, .9vw, 1.3rem);
    font-weight: 600;
    margin-bottom: clamp(.6rem, 1.5vw, 2rem);
}

#footer .fc1 .f-cs .conts1 {
    font-weight: 700;
    font-size: clamp(2rem, 2.8vw, 2.8rem);
    margin-bottom: clamp(.4rem, 1vw, 1.3rem);
    line-height: 1em;
}

#footer .fc1 .f-cs .txt2 {
    font-size: clamp(.8rem, .8vw, 1.2rem);
    line-height: 1.5em;
    opacity: .7;
}

#footer .fc1 .f-cs .txt2 span {
    padding-right: clamp(1rem, 1vw, 1.4rem);
}


#footer .fc1 .sns {
    display: flex;
    margin-top: clamp(1rem, 1vw, 2rem);
display:none;
}

#footer .fc1 .sns a {
    display: block;
    padding-right: clamp(.5rem, .5vw, 1rem);
}

#footer .fc1 .sns a img {
    display: block;
    width: clamp(1.1rem, 1.1vw, 1.5rem);
    object-fit: cover;
    opacity: .7;
}

#footer .fc1 .f-cs .conts2 i {
    font-family: "Font Awesome 6 Free";
    font-size: clamp(.8rem, .8vw, 1.5rem);
    opacity: .6;
}


#footer .fc2 {
    border-top: 1px solid #ffffff36;
    padding-top: clamp(1vw, 2vw, 3rem);
    margin-top: clamp(1vw, 2vw, 3rem);
}

#footer .fc2 p {
    font-size: clamp(.8rem, .8vw, 1.2rem);
}

#footer .finfo .copyright {
    font-size: clamp(.8rem, .8vw, 1.2rem);
}

#footer .finfo .copyright {
    margin-top: 12px;
}

#footer #btn_site_top {
    background: var(--prm-clr)
}

@media (max-width:1560px) {
    #footer .f_inner {
        padding-right: 15px;
        padding-left: 15px;
    }

}

@media (max-width:1023px) {

    #footer .fc1,
    #footer .fc1 .f-cs {
        display: block;
        text-align: center;
    }

    #footer .fc1 .sns {
        justify-content: center;
    }

    #footer .f-logo {
        width: 50%;
        margin: 0 auto;
    }

    #footer .fc1 .f-cs .box {
        margin: 20px 0;
    }

}




/*************************** 메인 공통 ****************************/
.main_sec * {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    word-break: keep-all;
    box-sizing: border-box;
}





/*************************** 서브 공통 ****************************/



.sub_page * {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    word-break: keep-all;
    box-sizing: border-box;
    color: #000;
    line-height: 1.5em
}

.sub_page {
    padding-top: clamp(3rem, 8vw, 10rem);
}

.sub_page .tit_area .tit {
    font-size: clamp(1.2rem, 2vw, 3rem);
    font-weight: 700;
    margin-bottom: clamp(1rem, 2vw, 3rem);
}


@media (max-width:1440px) {
    .sub_page .inner {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
}


.sub_prod .tab_area {
    display: flex;
    justify-content: space-between;
list-style: none;
    margin: 0;
    padding:0;
    margin-bottom: clamp(2rem, 5vw, 6rem);
}


.sub_prod .tab_area > li {
     width: 31%;
}

.sub_prod .tab_area > li > a {
    display: block;
width: 100%;
    text-align: center;
    border: 1px solid #0000002e;
    color: #000;
    background: linear-gradient(0deg, #00000017 50%, transparent 50%);
    padding: clamp(.6rem, 1vw, 1.5rem) 0;
    font-size: clamp(1rem, 1vw, 2rem);
    border-radius: clamp(0.6rem, 0.6vw, 2rem);
    opacity: .5;
}

.sub_prod .tab_area > li a {
    display: block;
}

.sub_prod .tab_area > li a.active {
    opacity: 1;
    font-weight: 700;
    color:#000;
}


.sub_prod .tabcontent > div {
    display: none;
}

.sub_prod .tabcontent > div.active {
    display: block;
}

@media (max-width:1023px) {
    .sub_prod .tab_area {
        justify-content: space-between;
    }

    .sub_prod .tab_area a {
        width: 48%;
    }
}



/*************************** 지점안내 뷰포트 작업 ****************************/

/* 지점안내 */
#footer.dipno {
    display: none;
}

.shgroup.dipno {
    display: none;
}

#header.dipno .lnb_p .dep1>li>a>span {
    color: #000;
}

#header.dipno .logo h1 span img.logo_c {
    display: block;
}

#header.dipno .logo h1 span img.logo_w {
    display: none;
}

#sub_view #container.dipno .contents_wrap .contents {
    padding-top: 100px;
}

#sub_view #container.dipno .sub_location {
    display: none;
}

#header.dipno .sns_wrap a {
    border: 1px solid #0000002e;
    color: #000;
    background: linear-gradient(0deg, #00000017 50%, transparent 50%);
}


/* 25 04 10 지점안내페이지 모바일에서 최하단 퀵에 가리는 문제 */
@media (max-width:1023px) {
  #container.dipno {
  padding-bottom:clamp(5rem, 10vw, 10rem);
  }
}

/*************************** 퀵 ****************************/

#viewport {
    position: relative;
}

.dk_quick {
    position: fixed;
    backdrop-filter: blur(3px);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

}

.dk_quick a {
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'pretendard';
    color: #fff;
    font-size: clamp(0.65rem, 0.65vw, 2rem);
    position: relative;
    letter-spacing: -0.02em;
    flex-direction: column;
    padding-bottom: 8px;

}

.dk_quick a:first-child {
    border-radius: 16px 16px 0 0;
}

.dk_quick a:last-child {
    border-radius: 0 0 16px 16px;
}

.dk_quick a:not(:last-child):after {
    content: '';
    position: absolute;
    width: 65%;
    height: 1px;
    background: #ffffff21;
}



@media (min-width:1024px) {
    .dk_quick {
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 75px;
        height: 350px;
        border: 1px solid transparent;
        background-image: linear-gradient(#000, #000), linear-gradient(45deg, #ff5766, #b469ff, #ffda4e);
        background-origin: border-box;
        background-clip: content-box, border-box;
    }

    .dk_quick a {
        opacity: 1;
        transition: .3s;
        box-shadow: inset 4px 4px 10px #7e3cbf42;
    }

    .dk_quick a:hover {
        opacity: .5;
        transition: .3s;
    }

    .dk_quick a:not(:last-child):after {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width:1023px) {
    .dk_quick {
        z-index: 100;
        width: 95%;
        height: 70px;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
        background: #0000008a;

    }

    .dk_quick a {
        width: 25%;
        height: 100%;
    }

    .dk_quick a:not(:last-child):after {
        width: 1px;
        height: 65%;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .dk_quick img {
        width: 37%;
    }
}


@media (min-width:1023px) {
    .dk_quick.sub_quick {
        background: #ffffff;
        top: unset;
        transform: unset;
        bottom: 7%;
    }

    .dk_quick.sub_quick a {
        color: #000;
        opacity: 1
    }
}