/*헤더푸터 소스 ver2*/

/*헤더*/
header#hd { 
	margin:0; 
	padding:0;
    width:100%; 
    z-index: 10; 
    background-color:rgba(6, 19, 34, .3);
    box-sizing: border-box;
    position: absolute;
    height: 100px;
}
/*header#hd:hover {background-color: rgba(6, 19, 34, .7);}*/
header#hd .nav {width: 100%; height: inherit;}
header#hd .nav .nav-inner {margin:0 auto; max-width:1750px; width:calc(100% - 60px); height: inherit;}
div.header {
    width:100%; 
    height: inherit; 
    margin:0 auto; 
    text-align:center; 
    position: relative; 
    box-sizing: border-box;
}
div.header #logo { margin-top:20px; margin-right: 188px;}
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 20px;
    position: relative;
    height:inherit;
    line-height:97px;
    color: #FFF;
}
div.header .gnbArea > ul > li.login { padding:0; }

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:15px;
    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:hover {color: #71e6ff;}
div.header .gnbArea > ul > li > a::after {
    display: block;
    clear: both;
    content: '';
    background-color: #71e6ff;
    height: 2px;
    width: 0;
    position: absolute;
    bottom: -3px;
    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: 290px; padding: 10px 0;}
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: 30px; 
    color:#ffffff; 
    font-size:13px; 
    letter-spacing:-.5px; 
    text-align: center;
    font-weight: 400;
    transition: color .3s;
}
div.header .gnbArea ul > li > ul > li > a:hover {color: #71e6ff;}

/*header tnb*/
div.header .tnb.cell-right {width: auto; height: inherit; line-height: 100px;}
.tnb_wrap .right .rs_btn a {display: flex;align-items: center; 
  height: 25px;padding: 0 10px;margin-top: 12px;
  background-color: #dc1419;color: #fff;
}

/*햄버거 메뉴바*/
div.header .tnb.cell-right li.right_menu { padding:0;}
div.header .tnb.cell-right li.right_menu button {
    background-color:transparent !important; 
    border-color:transparent !important; 
    border-width:0px !important; 
    border-style:none !important;
    width:14px; 
    height:12px; 
    text-align:center; 
    font-size:16px; 
    color:#ffffff; 
    position: relative; 
}
div.header .tnb.cell-right 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.cell-right li.right_menu button span:nth-of-type(1) { top:0; }
div.header .tnb.cell-right li.right_menu button span:nth-of-type(2) { top:50%; margin-top:-1px; }
div.header .tnb.cell-right 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(6, 19, 34, 1); 
    left:0; 
    top:100%; 
    transition: all .5s; 
    overflow: hidden; 
}
#hd_full_down.active { height:330px;}

/*header 반응형*/
@media screen and (max-width: 1650px) {
    div.header #logo {margin-right:50px;}
}
@media screen and (max-width: 1500px) {
    .nav .nav-inner {width: calc(100% - 60px); margin:  0 auto;}
    div.header #logo { margin-right:90px; }
    div.header .gnbArea > ul > li { padding:0 10px; }
    div.header .gnbArea li a { font-size:16px; }
}
@media screen and (max-width: 1400px) {
    div.header #logo { margin-right:80px; }
    div.header .gnbArea > ul > li { padding:0 5px; }
}
@media screen and (max-width: 1300px) {
    div.header #logo {margin-right: auto;}
    div.header .gnbArea {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: 0;
        height: 0;
    }
    div.header .gnbArea li { display: none; }

    div.header .tnb.cell-right li:not(.right_menu) {display: none;}
    div.header .tnb.cell-right .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 #logo img { width:200px; }
    div.header .tnb.cell-right .right_menu {line-height: 0;}
}
@media screen and (max-width: 600px) {
    header#hd .nav .nav-inner {width: calc(100% - 30px)}
    div.header #logo img { width:170px;}

    .tnb_wrap { display:flex; justify-content:space-between; align-items:center; flex-direction:column; }
    .tnb_wrap:after { display:none; }
    .tnb_wrap ul li a { font-size:11px; line-height:39px; }
    .tnb_wrap ul.left { float:none; width:100%; order:1; display:flex; align-items:center; justify-content:flex-start; }
    .tnb_wrap ul.right { float:none; width:100%; order:0; display:flex; align-items:center; justify-content:flex-end; position:relative; }
    .tnb_wrap ul.right::before {
        content:''; position:absolute; bottom:0; width:calc( 100% + 40px ); height:1px;
        left:50%; transform:translateX(-50%); background-color:#444444;
    }
    .tnb_wrap ul li { float:none; line-height:normal; }
    .header_wrap { top:79px; }

    .tnb_wrap .right .rs_btn a {height: 18px;margin-top: 0; padding: 0 5px;}

}
@media screen and (max-width: 400px) {
    header#hd .nav .nav-inner {width: calc(100% - 20px);}
}
@media screen and (max-width:370px ) {
    .tnb_wrap ul li { margin:0 6px 0 0; }
    .tnb_wrap ul li a { font-size:10px; }
}

/*카테고리*/
#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:140px; line-height: 120px; background-color: #202020; }
#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; }
.ct_login .ct-btn > li {
    float:left; 
    width:calc(100% / 2); 
    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 .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%;
    }
}

/* 푸터 */
#ft {
    margin:0; 
    position:relative; 
    text-align:center; 
    background-color: #040404; 
    color: #efefef;
    padding: 20px 0;
} 
#ft .ft_inner {max-width: 1200px; margin: 0 auto; width: calc(100% - 60px);}


#ft_link {}
#ft_link > ul { display: inline-block; }
#ft_link > ul > li{float:left; padding:0 15px; position: relative;}
#ft_link > ul > li::after {
    content:"";
    position: absolute; 
    width:1px; 
    height:12px; 
    background-color:#ffffff; 
    top:50%; 
    transform: translateY(-50%); 
    right:-1px; 
    opacity: .5;
}
#ft_link > ul > li:first-child { padding-left:0; }
#ft_link > ul > li:last-child { padding-right:0; }
#ft_link > ul > li:last-child::after { display: none; }
#ft_link > ul > li > a {display: inline-block; transition: color .3s; font-size:15px; opacity: .5;}
#ft_link > ul > li > a:hover{color: #71e6ff;}

#ft_content {margin-top: 10px;}
#ft_content > p { font-size:15px; line-height: 29px; font-weight: 200;}
#ft_content > p > span { padding-right:25px; position: relative; opacity: .8;}
#ft_content > p > span:last-child { margin-right:0; }
#ft_content > p > span.big_txt {font-size: 23px; font-weight: 700; }
#ft_content > a.copyright {display: block; font-size: 11px; margin-top: 5px; opacity: .1; font-weight: 300;}
#ft_content > a.copyright b {font-weight: 300;}
#ft_content > ul { display: inline-block;}
#ft_content > ul > li { display: inline-block; opacity: .3;}
#ft_content > .login { font-size:14px; color:#ddd; opacity: .3;}
#ft_content > .login > span:first-of-type {margin-right: 5px; }

@media (max-width: 1000px){
    #quick_open{bottom:15px;left:15px}
    #quick .qk_btn{bottom:60px;left:15px}

    #ft { padding:30px 0; }
    #ft_link { margin-bottom:25px; }

    #ft_content > p { font-size:14px; line-height: 25px; word-break: keep-all;}
    #ft_content > p.copyright { font-size:13px; }
    #ft_content > ul > li > a { font-size:10px; }
}

@media screen and (max-width:850px) {
    #ft_link, #ft_content{zoom:.8;}
}

@media screen and (max-width:650px) {
    #ft .ft_inner {width: calc(100% - 40px);}
    #ft_content > p > span {display:block; padding-right:0;}
    #ft_link, #ft_content {zoom:.9; text-align: center;}
    #ft_content > p > span:not(:last-of-type)::after {display: none;}
}
@media screen and (max-width: 400px) {
    #ft {padding: 15px 0;}
    #ft .ft_inner {width: calc(100% -20px);}
}