/*헤더푸터 소스 ver2*/

/*헤더*/
header#hd { 
    margin:0; 
    padding:0;
    width:100%; 
    z-index: 10; 
    background-color:transparent;
    box-sizing: border-box;
    position: absolute;
    height: 100px;
    border-bottom: 1px solid rgba(255,255,255,.4);
}
header#hd:hover {background-color: #ffffff;}
header#hd:hover div.header #logo img {content: url('../img/hdft/logo_h.png');}
header#hd:hover div.header .gnbArea > ul > li > a {color: #333333;}
header#hd:hover div.header .tnb > ul > li.right_menu span {background-color: #333333;}
header#hd:hover div.header .tnb ul li a {background-color: #5d5fca; font-weight: 500;}

header#hd .nav {width: 100%; height: inherit;}
header#hd .nav .nav-inner {margin:0 auto; max-width:1700px; width:calc(100% - 60px); height: inherit;}
div.header {
    width:100%; 
    height: inherit; 
    margin:0 auto; 
    text-align:center; 
    position: relative; 
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.header #logo {margin-right: 50px;}
div.header #logo a { display: block; }
div.header #logo img { display: block; width: 100%; }
div.header .gnbArea {}
div.header .gnbArea > ul > li {
    float:left;
    padding: 0 48px;
    position: relative;
    height:inherit;
    line-height:97px; 
}
div.header .gnbArea > ul > li::after {
    display: block;
    clear: both;
    content: '';
}
div.header .gnbArea > ul > li > a {
    display:block; 
    width:100%; 
    text-align:center; 
    font-size:17px;
    color: #ffffff; 
    transition: color .2s; 
    position:relative; 
    letter-spacing: -1px; 
    font-weight:400;
    text-transform: uppercase;
    transition: color .3s;
}
div.header .gnbArea > ul > li > a::after {
    display: block;
    clear: both;
    content: '';
    background-color: #5d5fca;
    height: 3px;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
div.header .gnbArea > ul > li:hover > a::after {width: calc(100% + 20px); transition: width .4s;} 
div.header .gnbArea > ul > li > a:hover::before { opacity: 1; transition: opacity .3s; }


/*header full_down*/
div.header .gnbArea ul > li > ul {
    position: absolute; 
    box-sizing: border-box; 
    width:160px; 
    height: 0; 
    left:50%; 
    transform: translateX(-50%); 
    overflow: hidden;
    top:calc(100% + 15px);
    border-radius:10px; 
    z-index: 10; 
    transition: background .5s, height .5s, padding .5s; 
    border-style: none;
}
div.header .gnbArea ul > li > ul.active {height: 260px; padding: 10px 0; background-color: inherit;}
div.header .gnbArea ul > li:hover > ul {background-color: rgba(255,255,255,.7); border: 1px solid #ddd; box-sizing: border-box;}
div.header .gnbArea ul > li > ul > li {
    background-color: transparent; 
    box-sizing: border-box;
}
div.header .gnbArea ul > li > ul > li > a {
    display:block; 
    line-height: 40px; 
    color:#444444; 
    font-size:15px; 
    letter-spacing:-.5px; 
    text-align: center;
    font-weight: 400;
    transition: color .3s;
}
div.header .gnbArea ul > li > ul > li > a:hover {color: #5d5fca;}

/*header tnb*/
div.header .tnb {width: auto; height: inherit; line-height: 100px;}
div.header .tnb ul {}
div.header .tnb ul li {}
div.header .tnb ul li a {
    display: inline-block;
    width: 150px;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    border: 1px solid #ffffff;
    background-color: transparent;
    transition: background-color .3s;
}
div.header .tnb ul li:hover a {background-color: #5d5fca; font-weight: 500;}

/*햄버거 메뉴바*/
div.header .tnb li.right_menu { padding:0; display: none;}
div.header .tnb li.right_menu button {
    background-color:transparent !important; 
    border-color:transparent !important; 
    border-width:0px !important; 
    border-style:none !important;
    width:25px; 
    height:16px; 
    text-align:center; 
    font-size:16px; 
    color:#ffffff; 
    position: relative; 
}
div.header .tnb li.right_menu button span { 
    position: absolute; 
    width:100%; 
    height:2px; 
    background-color:#ffffff; 
    left:50%; 
    transform: translateX(-50%); 
    transition: background .3s; 
}
div.header .tnb li.right_menu button span:nth-of-type(1) { top:0; }
div.header .tnb li.right_menu button span:nth-of-type(2) { top:50%; margin-top:-1px; }
div.header .tnb li.right_menu button span:nth-of-type(3) { bottom:0; }

/*hd_full_down*/
#hd_full_down { 
    position: absolute; 
    width:100%; 
    height:0; 
    background-color: rgba(255, 255, 255, .7); 
    left:0; 
    top:100%; 
    transition: all .5s; 
    overflow: hidden; 
}
#hd_full_down.active { height:290px;}

/*header 반응형*/

@media screen and (max-width: 1700px) {
    div.header #logo {margin-right: auto; zoom:.8;}
    div.header .gnbArea > ul > li {padding: 0 30px;}
    div.header .gnbArea > ul > li > a {font-size: 15px;}
    div.header .tnb ul li {padding: 0; padding-left: 15px;}
}
@media screen and (max-width: 1300px) {
    div.header .gnbArea {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: 0;
        height: 0;
    }
    div.header .gnbArea li { display: none; }

    div.header .tnb ul li.reserve_btn {padding: 0; margin-right: 50px;}
    div.header .tnb li.right_menu {
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        float: none;
    }
}
@media screen and (max-width: 860px) {
    header#hd {height: 80px;}
    header#hd .nav .nav-inner {width: calc(100% - 40px);}    
    div.header .tnb {line-height: 80px;}
}
@media screen and (max-width: 600px) {
    header#hd .nav .nav-inner {width: calc(100% - 30px)}
}
@media screen and (max-width: 500px) {
    header#hd {height: 60px;}
    div.header #logo { zoom:.65;}
    div.header .tnb {line-height: 60px;}
    div.header .tnb ul li.reserve_btn {display: none;}
}

/*카테고리*/
#category { 
    position:fixed; 
    top:0; 
    right:-370px; 
    width:370px; 
    overflow-y:auto; 
    height:100%; 
    -webkit-backface-visibility: hidden;
    background:#fff;
    z-index:9999;
    text-align:left;
    -webkit-box-shadow:3px 3px 8px #000; 
    -moz-box-shadow:3px 3px 8px #000;
    box-shadow:3px 3px 8px #000;
    transition: right .5s;
}
.ct_bg{
    background:#efefef;
    height:98%;
    width:100%;
    position:absolute;top:225px;
}
#category h1 {font-size:15px;text-align: center;}
#category > h1.ct_hd { height:120px; line-height: 120px; border-bottom:1px solid #eeeeee; }
#category > h1.ct_hd img {margin-top: 40px;}
#category.active { right:0; }

#category .ct_slider { height:90px; margin:30px 0 20px 0;}
#category .ct_slider .prev, #category .ct_slider .next {opacity: 0;}

.ct_login .ct-btn { height:40px; line-height: 40px; border-bottom: 1px solid #eee; border-top: 1px solid #eeeeee;}
.ct_login .ct-btn > li {
    float:left; 
    width:calc(100% / 3); 
    text-align: center; 
    font-size:13px; 
    color:#666;
}
.ct_login .ct-btn > li > a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 95%; }
.ct_login .ct-btn > li:not(:last-child) { border-right: 1px solid #eee; }
.ct_login .ct-btn > li > h2 { color:#555; }
.ct_login .ct-btn a { display: block; }
.ct_login .ct-btn .btn_1{}
.ct_login .ct-btn .btn_1:hover{}
.ct_login .ct-info { margin:20px 0; position:relative; font-size:11px; }
.ct_login .ct-info li { float:left; width:calc(100% / 3); text-align:center; }
.ct_login .ct-info a { display:block; position:relative; }
.ct_login .ct-info img { width:20px; height:20px; }
.ct_login .ct-info strong { display:block; font-weight:normal; font-size:0.92em; padding:5px 0 0; color:#777;}
.ct_login .ct-info li .num { display:block; position:absolute; top:-5px; left:36px; padding:0 5px; background:#888; color:#fff; border-radius:15px; line-height:15px; }
.ct_login .ct-info button {border:0;background:none;}
.ct_logout dl{padding:5px 10px;background:#f3f3f3;margin:10px 0}
.ct_logout dl:after {display:block;visibility:hidden;clear:both;content:""}

/*카테고리_밑_메뉴*/
#category ul.cate { width:100%;text-align:left;padding:15px 15px 0 15px; }
#category ul.cate > li > p {
    font-size:14px; 
    cursor:pointer;
    line-height:40px; 
    color: #444; 
    letter-spacing: -1px;
    text-transform: uppercase;
}
#category ul.cate > li > p > i { float: right; padding:7px; color: #666; }
#category ul.cate > li.active > p > i { transform: rotate(180deg); }
#category ul.cate > li > ul {
    height:0; 
    background-color:#f6f6f6; 
    overflow: hidden;
}
#category ul.cate > li > ul > li { line-height:30px; font-size:12.5px; position:relative; color: #777; letter-spacing: -.5px; }
#category ul.cate > li > ul > li > a { display: block; }
#category ul.cate li.active ul {
    height:auto; 
    padding:10px 0 10px 13px; 
    margin-bottom: 10px;
}

#category ul.cate li a{display:inline-block;text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap; }
#category ul.cate li i { line-height:25px; }
#category ul.cate li .ct_op{
    display:inline-block;
    text-indent:-999px;
    background:url(../mobile/shop/img/cate_op.gif) no-repeat 10px 50%;
    height:25px; 
    width:30px;
    position:absolute;
    top:0;
    right:0;
    border:none;
}
#category ul.cate li .ct_cl{background-position:-12px 50%}
#category ul.sub_cate{display:none;font-size:12px}
#category ul.sub_cate1 li{text-indent:14px;background:#fafafa;font-weight:normal}
#category ul.sub_cate2 li{text-indent:25px;background:#f6f6f6;}
#category ul.sub_cate3 li{text-indent:40px;background:#f3f3f3;}
#category ul.sub_cate4 li{text-indent:55px;background:#efefef;}

/*예약 버튼 삽입*/
#category .reserve {text-align: center; margin-top: 40px;}
#category .reserve > a {
    display: inline-block;
    width: 95%;
    color: #333333;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    border: 1px solid #dcdcdc;
    background-color: transparent;
    transition: background-color .3s;
    margin:0 auto;    
}
#category .reserve > a:hover {
    background-color: #5d5fca; font-weight: 500; border: 0; color: #ffffff;
}

#category .pop_close{
    position:absolute;
    top:5px;
    right:5px;
    width:30px;
    height:30px;
    background:url('../img/hdft/icon-close-bl.png') no-repeat 50% 50%;
    border:none;
    text-indent:-99999px;
    background-size:15px;
    opacity:0.5;
}
#category .pop_close:hover,#category .pop_close:focus{opacity:1}

@media screen and (max-width:500px) { 
    #category {
        width:100%;
        right:-100%;
    }
}



/*푸터*/
footer { background-color: #48326a; padding:60px 0; position: relative; }
footer .ft_inner { 
    max-width: 1600px; 
    width: calc(100% - 40px); 
    margin:0 auto; 
    display: flex;
    align-items: center;
    justify-content: space-between;
}
footer .ft_inner > div {}
footer .ft_logo {width: 400px;}
footer .ft_logo > a { display: block; }

footer .ft_content {width: calc(100% - 700px);}
footer .ft_content .ft_link { margin-bottom:25px; }
footer .ft_content .ft_link li { margin-right: 35px; float: left;}
footer .ft_content .ft_link li a { display: block; font-size:16px; letter-spacing: -1px; color:rgba(255,255,255,.7); }

footer .ft_cell_tit { font-weight:600; color:rgba(0,0,0,.6); font-size: 15px; line-height: 15px; }
footer .ft_cell_tel { margin-bottom:23px; font-size: 35px; line-height: 35px; color:#fff; font-weight: 600; }
footer .ft_cell_tel img { display: block; float:left; margin-right:9px; margin-top:3px; }
footer .ft_cell_tel span { display: block; float:left; }

footer .ft_content dt, footer .ft_content dd {
    display: inline-block; 
    color:rgba(255,255,255,.6); 
    font-size: 15px; 
    line-height: 28px; 
    letter-spacing: -1px;
    font-weight: 300;
    word-break: keep-all;
}
footer .ft_content dt { margin-right: .4rem; color: rgba(255,255,255,.9); }
footer .ft_content dd { margin-right:14px; }
footer .copyright { color:rgba(255,255,255,.9); font-size:15px; margin-top: 25px; font-weight: 300; }
footer .copyright a { }
footer .admin { color:rgba(255,255,255,.9); font-size:13px; margin-top:5px; }

footer .ft_aside { width: 300px; text-align: right;}
footer .ft_aside a {
    display: inline-block;
    font-size: 15px;
    /* font-weight: 700; */
    letter-spacing: -.2px;
    color: rgba(255,255,255,.9);
    /* margin-bottom: .5rem; */
}
footer .ft_aside a::before {
    display: inline-block;
    clear: both;
    content: '';
    width: 30px;
    height: 30px;
    background-image: url('../img/hdft/ft_call.png');
    background-repeat: no-repeat;
    background-position: center;
    margin-right: .5rem;
    vertical-align: middle;
}
footer .ft_aside .ybank {
    display: inline-block;
    font-size: 15px;
    /* font-weight: 700; */
    letter-spacing: -.2px;
    color: rgba(255,255,255,.9);
    /* margin-top: .5rem; */
}
footer .ft_aside .ybank::before {
    display: inline-block;
    clear: both;
    content: '';
    width: 30px;
    height: 30px;
    background-image: url('../img/hdft/ft_bank30.png');
    background-repeat: no-repeat;
    background-position: center;
    margin-right: .5rem;
    vertical-align: middle;
}
footer .ft_aside .nbank {
    display: inline-block;
    font-size: 15px;
    /* font-weight: 700; */
    letter-spacing: -.2px;
    color: rgba(255,255,255,.9);
}

footer .ft_sns_list { /*float:right; */}
footer .ft_sns_list li { float:right; }
footer .ft_sns_list li:not(:first-child) { margin-right: 10px; }
footer .ft_sns_list li a { display: block; width:45px; height:45px; border-radius: 50%; background-color: #ffffff; box-shadow: 4px 0 10px rgba(34,34,34,0.07);}
.sns_i a { background: url(../img/hdft/ft_sns_ico_i.png) center center no-repeat; }
.sns_f a { background: url(../img/hdft/ft_sns_ico_f.png) center center no-repeat; }
.sns_nb a { background: url(../img/hdft/ft_sns_ico_nb.png) center center no-repeat; }
.sns_u a { background: url(../img/hdft/ft_sns_ico_u.png) center center no-repeat; }
.sns_k a { background: url(../img/hdft/ft_sns_ico_k.png) center center no-repeat; }


@media screen and (max-width: 1400px) {
    footer .ft_inner {flex-direction:column;}
    footer .ft_logo {width: 100%; text-align: center;}
    footer .ft_content {width: 100%; text-align: center; margin: 20px 0;}
    footer .ft_content .ft_link {display: flex; justify-content: center;}
    footer .ft_content .ft_link li {float: none; margin:0;}
    footer .ft_content .ft_link li:not(:last-of-type) {margin-right:15px;}
    footer .ft_aside {width: 100%; text-align: center;}
}

@media screen and (max-width: 720px) {
    footer .ft_content dt, footer .ft_content dd {font-size: 14px;}
    footer .copyright {font-size: 14px;}
    footer .ft_content .ft_link li a {font-size: 15px;}
}
@media screen and (max-width: 500px) {
    footer {padding: 50px 0;}
    footer .ft_logo {zoom:.9;}
    footer .ft_content dt, footer .ft_content dd {font-size: 13px;}
    footer .copyright {font-size: 13px;}
    footer .ft_content .ft_link li a {font-size: 14px;}
    footer .ft_aside a {font-size: 13px; font-weight: 300; margin: 0;}
    footer .ft_aside a::before {background-size: 15px auto; margin-right: .2rem;}
    footer .ft_aside .ybank {font-size: 13px; font-weight: 300; margin: 0;}
    footer .ft_aside .ybank::before {margin: 0; background-image: url('../img/hdft/ft_bank20.png');}
    footer .ft_aside .nbank {font-size: 13px; font-weight: 300; margin: 0;}
}


/*픽스드*/
#left_fixed { position: fixed; top:100px; left:170px; z-index: 999; background-color: #fff; }
#right_fixed {
    position: fixed; bottom:100px; right:170px; z-index: 1; background-color: #fff;
    border:1px solid #ddd; border-radius: 9px; box-sizing: border-box; text-align: center;
    width: 120px; height:330px; padding: 20px 0 10px;
}
#right_fixed h4 { font-size:15px; color:#444; margin-bottom: 15px; }
#right_fixed p {  }
#right_fixed a { display: block; font-size: 12px; background-color:#e8180c; color:#fff; white-space: nowrap; margin:10px 0; }

#top_btn {
    display: block; font-size:14px; color:#fff; background-color: #ffca4b; border-radius: 9px; width:calc(100% - 14px);
    line-height: 30px; margin:0 auto; font-weight: 600; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
}

@media screen and (max-width: 1800px) {
    #right_fixed { right:30px; }
}

@media screen and (max-width: 1200px) {
    #right_fixed { right:10px; bottom:50px; zoom:.8; }
}

@media screen and (max-width: 600px) {
    #right_fixed { zoom:.6; }
}