/************************************ 전체 커스텀 ************************************/

:root {
    --max-width: 1500px;
    --prm-clr: #f39800;
    --scd-clr: #ffd966;
    --act-clr: ##ff6f61;
    --bg-clr: #F5F5F0;
    --pre : 'pretendard';


}


body * {
    font-family: 'pretendard';
}

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


@font-face {
    font-family: 'ddobak-b';
    src: url('/img_up/shop_pds/ehompy0504/design/fonts/mangoddobak-b_ttf_.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ddobak-l';
    src: url('/img_up/shop_pds/ehompy0504/design/fonts/mangoddobak-l_ttf_.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ddobak-r';
    src: url('/img_up/shop_pds/ehompy0504/design/fonts/mangoddobak-r_ttf_.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



@media (min-width:1024px) {

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

    .sub_location,
    #footer .f_inner,
    .contents_wrap .sub_location,
    .contents_wrap .sub_top_title,
    #sub_view #container .snb {
        margin: 0 auto;
        max-width: var(--max-width)
    }

}

/************************************ 헤더 ************************************/

#header .h_inner {
    position: relative;
}

#header .lnb_p .dep1>li.on>a>span {
    color: var(--prm-clr)
}

#sub_view #container .snb .dep1 li a {opacity:1;}
#sub_view #container .snb .dep1 li a > span {word-break:keep-all;}

#sub_view #header {background:#ffffff14;}
#sub_view #header.active {background:#fff;}
#sub_view #header .lnb_p .dep1>li:not(:hover)>a>span {color:#111;}
#sub_view #header .gnb_p .gnb_list>ul>li:not(:hover) a {color:#111;}


#sub_view #container .snb .dep1 li {border:0;}

#sub_view #container .snb .dep1 li.on a, #sub_view #container .snb ul li a:hover {color:#fff; font-weight: bold;}


@media (min-width: 1024px) {
   
   .lnb_p {max-width: 950px; padding-left: 100px;}

   #header .logo {max-width:340px;}

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


    #header .h_cont_right .h_call {
        display: none;
    }

   #sub_view #header .logo h1 span .logo_w {display:none;}
   #sub_view #header .logo h1 span .logo_c {display:block;}


    .lnb_p .dep1>li>a>span { font-size: clamp(.9rem, 1.1vw, 1.2rem);}
    .lnb_p .dep2>li>a{
        font-size: clamp(.8rem, .9vw, 1rem);
    }

    .gnb_p .gnb_list>ul>li a{
       font-size: clamp(1rem, 1.1vw, 1.2rem);
      }

    .lnb_p .dep1>li {
        padding: 0 clamp(.5rem, 2vw, 2.5rem);
    }
    .lnb_p .dep1 > li > a > span {padding:0 5px; word-break:keep-all;}



    /**** gnb 항시 노출 ****/
    #header .h_cont_right {
        position: absolute;
        top: unset;
        left: unset;
        right: 35px;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        width: fit-content;
        display:none;
    }


    #header .h_cont_right .h_cont_inner {
        background: transparent;
        padding: 0;
        width: 100%;
    }

    .gnb_p .gnb_list .btn_gnb_list {
        display: none;
    }

    .gnb_p {
        position: unset;
        width: 100%;
    }

    .gnb_p .gnb_list {
        position: unset;
        width: 100%;
    }

    .gnb_p .gnb_list>ul {
        width: 100%;
        position: unset;
        top: unset;
        left: unset;
        display: block;
        margin: 0;
        padding: 0;
        display: flex;
        border: none;
        justify-content: space-between;
        background: transparent;
    }

    .gnb_p .gnb_list>ul>li a {
        padding: 0;
    }

    .gnb_p .gnb_list>ul>li:first-child {
        padding-right: clamp(.4rem, 1vw, 1rem);
    }

    /**** gnb 항시 노출 end ****/

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

}



@media (min-width:1700px) {
    .lnb_p {max-width: 100%; padding-left:120px; box-sizing:border-box; width:100%;}
 
    .lnb_p .dep1 {display:flex; justify-content:flex-end;}
}

@media (max-width:1800px){
   .lnb_p .dep1 > li{padding:0 1rem;}
}
@media (max-width:1440px) {
   #header .logo h1 span img {max-width:200px;}
   .lnb_p {max-width: 100%; padding-left: 0; padding:0 100px 0 230px;}

  .lnb_p .dep1 {display:flex;}
  .lnb_p .dep1 > li {width:25%;}
  .gnb_p .gnb_list>ul>li a{font-size:14px}
  .gnb_p .gnb_list>ul {min-width:80px;}
}


@media (min-width: 1439px) {
    .lnb_p {
        max-width:100%;
        margin: 0 auto;}
     #header .logo h1 span img {max-width:200px;}

}



/*** header active ***/

#header {
    background: transparent;
    border-bottom: 1px solid #ffffff59;
    transition: .3s;
}

#header .logo_c {
    display: none
}

.lnb_p .dep1>li:not(:hover)>a>span {
    color: #fff
}

.gnb_p .gnb_list>ul>li:not(:hover) a {
    color: #fff
}

#header.active {
    background: #fff;
    transition: .3s;
}

#header.active .logo_c {
    display: inherit;
}

#header.active .logo_w {
    display: none
}

#header.active .lnb_p .dep1>li:not(:hover)>a>span {
    color: #333
}

#header.active .gnb_p .gnb_list>ul>li a:not(:hover) {
    color: #333
}




/**************************************** 컨테이너 ******************************************/

#viewport #container {
    padding-top: 0;
}

.snb_wrap {
    height: 380px;
    background-size: cover;
    position: relative;
}



.contents * {
    font-family: 'pretendard';
}

#container .contents_wrap{
  overflow:hidden;
}


#sub_view #container .contents_wrap {
    padding-bottom: clamp(5rem, 9vw, 9rem);
}

#sub_view #container .contents_wrap .contents {
    padding-top: clamp(3rem, 3vw, 3rem);
}

.contents_wrap .sub_top_title {
    padding-bottom: clamp(3rem, 6.5vw, 6.5rem);
}


.contents_wrap .sub_location > span {font-family:var(--pre);}

.sub_page * {
    box-sizing: border-box;
    word-break: keep-all;
}

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



@media (min-width:1024px) {
    #sub_view #container .snb {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

    }

    #sub_view #container .snb .dep1 li,
    #sub_view #container .snb .dep1 li:first-child {
        border: none;
    }
}



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


@media (max-width:1023px) {

    .snb_wrap {
        height: 120px;
    }

    .snb_wrap * {
        font-family: 'pretendard';
    }

    .snb_wrap .snb {
        padding-top: 57px;
    }
}



/********************************* footer *********************************/



#footer {
    background: #2b2b2b;
    padding: clamp(2.5rem, 2.5vw, 2.5rem) 0;
}


#main_view #footer .f_inner {
    margin: 0 auto;
}

#footer * {
    font-family: 'pretendard';
    word-break: keep-all;
}

#footer .finfo {
    border-top: 1px solid #ffffff33;
    opacity: .8;
    padding-top: clamp(1.1rem, 2.2vw, 2.2rem);
    margin-top: clamp(1.1rem, 2.2vw, 2.2rem);
}

#footer .finfo a {
   color:var(--scd-clr);
}


#footer .finfo p,
#footer .finfo .copyright,
#footer .fnb ul li a {
    font-size: clamp(.9rem, .98vw, .98rem);
    line-height: 1.5em;
    color: #fff;
}

#footer .finfo .finfo-area {
    text-align: left;
}


#footer .f_cs_area {
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(1rem, 1.8vw, 1.8rem);
}

#footer .f_cs_area>* {
    flex-shrink: 0
}

#footer .f_cs_area .logo {
    width: clamp(10rem, 15vw, 15rem);
    opacity: 1;
}
#footer .f_cs_area .logo img {
    box-sizing: border-box;
}

#footer .f_cs_area .f-txt * {
    color: #fff;
}

#footer .f_cs_area .f-txt .txt1 {
    font-size: clamp(.9rem, 1.1vw, 1.1rem);
    font-weight: 800;
    margin-bottom: clamp(.6rem, 1vw, 1rem);
}

#footer .f_cs_area .f-txt .txt_mt {
    margin-top: clamp(1.5rem, 2vw, 2rem);
}

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

#footer .f_cs_area .dirc {
    padding-right: clamp(3rem, 5vw, 5rem);
}

#footer .f_cs_area .dirc .addr {
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
}

#footer .f_cs_area .dirc .addr i {
    font-family: "Font Awesome 6 Free";
    font-size: clamp(.9rem, 1vw, 1rem);
    opacity: .6;
}

#footer .f_cs_area .dirc .bank .act {
font-size: clamp(.95rem, 1.15vw, 1.15rem);
line-height: 1.5em;
}

#footer .f_cs_area .dirc .bank .dpt {
font-size: clamp(.8rem, 1vw, 1rem);
line-height: 1.5em;
font-weight: 500;
opacity: .7;
}
#footer .f_cs_area .cs {
    padding-right: clamp(3rem, 5vw, 5rem);
}

#footer .f_cs_area .family{
opacity: .5;
}


#footer .copyright {
    text-align: left;
}



#footer .f_cs_area .cs .num {
    font-weight: 700;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    line-height: 1em;
}

#footer .f_cs_area .cs .exp_num {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    padding-top: clamp(0.2rem, 0.4vw, 0.4rem);
    font-weight: 700;
}

#footer .f_cs_area .cs .exp_num b {
font-size: clamp(1rem, 1.1vw, 1.1rem);
font-weight: normal;
opacity: .8;
}

#footer .f_cs_area .cs .txt2 {
    font-size: clamp(.8rem, 1vw, 1rem);
    line-height: 1.5em;
    opacity: .7;
    margin-top: clamp(.4rem, 1.1vw, 1.1rem);
}

#footer .f_cs_area .cs .txt2 span {
    padding-right: clamp(1rem, 1.2vw, 1.2rem);

}


#footer .mo-quick {
    display: none;
}

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



@media (min-width:1024px) {
    #footer .fnb ul {
        text-align: left;
    }
}

@media (max-width:1400px) {
    #footer .f_inner {
        padding: 0 15px
    }
}

@media (max-width:1023px) {

    #footer .finfo .finfo-area,
    #footer .copyright {
        text-align: center;
    }

    #footer .finfo p {
        padding: .2em .5em;
        margin: 0;
    }

    #footer .finfo p:after {
        display: none
    }

    #footer .mo-quick {
        display: block;
        position: fixed;
        z-index: 9999;
        bottom: 60px;
        right: 10px;
    }



    #footer .mo-quick i {
        font-family: "Font Awesome 6 Free";
        width: 45px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background: #793a10;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15);
    }


    #footer .f_cs_area {
        flex-direction: column;
        align-items: center;
    }

    #footer .f_cs_area .logo {
        width:320px;
        padding-bottom: clamp(2rem, 2vw, 2rem);
    }

    #footer .f_cs_area .logo img {
        width: 130px;
    }

    #footer .f_cs_area>* {
        text-align: center;
    }

    #footer .f_cs_area .cs {
        margin: clamp(1.3rem, 2vw, 4rem) 0; padding-right:0;
    }

    #footer .f_cs_area .dirc {
        padding: 0;
    }

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

    #footer .finfo {
        flex-direction: column-reverse;
    }

    #footer .f_cs_area .dirc .sns a {
        padding: 0 clamp(.8rem, .8vw, 1rem);
    }

   #footer .f_cs_area .family {width:150px;}
} 





/****************************** 퀵 **************************************/
/* mo_call_quick */
.mo_call_quick {
    position: fixed;
    z-index: 9999;
    bottom: 75px;
    right: 10px;
}

.mo_call_quick a:before {
    content: '\e942';
    font-size: 16px;
    font-family: 'icomoon2';
    color: #fff;
    background: #ff904c;
    padding: 18px;
    border-radius: 50%;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}

#container .mo_call_quick a:before {
    display: none;
}

.blog_quick {
    position: fixed;
    bottom: 4em;
    right: 1em;
    z-index: 3;
    /* border: 1px solid red; */
    padding: clamp(1rem, 1.2vw, 1.2rem) clamp(.4rem, .8vw, .8rem);
    border-radius: clamp(1rem, 2vw, 2rem);
    background: #ff204142;
    backdrop-filter: blur(10px);
}

.blog_quick a {
    display: block;
    text-align: center;
}

.blog_quick a p {
    font-size: clamp(.9rem, .9vw, .9rem);
    font-weight: 700;
    margin: 0;
    font-family: 'pretendard';
    color: #ff5555;
    letter-spacing: -0.02em;
}


#sub_view #header .lnb_p .dep1>li:not(:hover)>a>span {color:#fff;}
#sub_view #header.active .lnb_p .dep1>li:not(:hover)>a>span {color:#111;}

#footer .f_cs_area .family {display: flex; flex-direction: column; gap:.2rem;}


@media (min-width:1024px) {
    .mo_call_quick {
        display: none;
    }
}

@media (max-width:1023px) {
    .blog_quick {
        right: unset;
        bottom: 1em;
        left: 1em;
        z-index: 9999;
        padding: .5em 1em;
    }

    .blog_quick a {
        display: flex;
        align-items: center;
    }

    .blog_quick a img {
        width: 1.5em;
        padding-right: 0.5em;
    }

    .blog_quick a p br {
        display: none;
    }

    #header .logo #toggle_right {display:none;}
}

@media (max-width:767px){
   #footer .f_cs_area .cs {padding-right:0;}
}