@charset "utf-8";

.inner {margin: 0 6vw;}
.mo-gnb {display: none;}

/* 스크롤시 */
.scroll .quick-icon {transform: translateY(0px);}
.scroll .quick-icon .btn-top {visibility: visible;}

/* header */
header {position:sticky; top:0; z-index: 9999999; background-color: var(--text_w); border-bottom: 1px solid var(--line);}
header .header-banner {width: 100%; height: 40px;}
header .header-banner ul li {height: 100%; color: var(--text4); text-align: center; line-height: 40px;  background-color: var(--text1);}
header .header-banner ul li.blue {background-color: var(--primary); color: var(--text_w);}
header .header {height: 60px; display: flex; align-items: center; justify-content: space-between;}
header .header .header-l {height: 100%; display: flex; align-items: center; column-gap: 45px;}
header .header .header-l .gnb {height: 100%; display: flex;}
header .header .header-l .gnb li {height: 100%;}
header .header .header-l .gnb li.line {position: relative;}
header .header .header-l .gnb li.line::after {position: absolute; width: 1px; height: 14px; background-color: var(--line); display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); content:'';}
header .header .header-l .gnb li a {height: 100%; line-height: 60px; font-size: 15px; padding: 0 15px;}

header .header .header-r {height: 100%; display: flex; align-items: center;}
header .header .header-r li.shop_cart {position: relative;}
header .header .header-r li.shop_cart .count {position: absolute; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background-color: var(--primary); top: -4px; right: 6px; font-size: 12px; font-weight: 600; color: #fff; z-index: 999;}
header .header .header-r li.shop_login .btn_member_mn {min-width: revert; padding: 0;}
header .header .header-r li.shop_login .btn_member_mn .profile_img {margin-right: 0;}
header .header .header-r li a {padding: 0 10px;}

footer {background-color: var(--bg); padding: 100px 0;}
footer .footer-info {display: flex; justify-content: space-between; column-gap: 40px; margin-top: 40px;}
footer .footer-info p {color: var(--text3);}
footer .footer-info b {font-weight: 700; color: var(--text_w);}
footer .footer-info h5 {color: var(--text3); font-weight: 700; font-size: 32px;}
footer .footer-info .footer-l {display: flex; flex-direction: column; justify-content: space-between;}
footer .footer-info .footer-l .footer-link > ul {display: flex; column-gap: 32px;}
footer .footer-info .footer-l .footer-link > ul:nth-of-type(2) {width: 580px; flex-wrap: wrap; row-gap: 8px; padding-top: 24px;}
footer .footer-info .footer-l .footer-link > ul li {position: relative;}
footer .footer-info .footer-l .footer-link > ul li:not(:last-of-type)::after {position: absolute; width: 1px; height: 14px; background-color: var(--line); top: 50%; right: -16px; transform: translate(0, -50%); content: ''; opacity: 0.2;}
footer .footer-info .footer-l .footer-link > ul:nth-of-type(2) li:nth-of-type(2)::after {display: none;}
footer .footer-info .footer-l .sns {display: flex; column-gap: 16px;}
footer .footer-info .footer-r {display: flex; flex-direction: column; justify-content: space-between; row-gap: 32px;}
footer .footer-info .footer-r .footer-cont,
footer .footer-info .footer-r .footer-btn {display: flex; column-gap: 10px;}
footer .footer-info .footer-r .footer-btn > a {width: 260px; height: 50px; display: flex; align-items: center; justify-content: space-between; background-color: var(--text2); padding: 0 24px;}
footer .footer-info .footer-r .footer-cont {justify-content: space-between;}
footer .footer-info .footer-r .footer-cont > div {width: 50%; display: flex; flex-direction: column; row-gap: 6px;}
footer .footer-info .footer-r .footer-cont > div > p:first-of-type {padding-bottom: 12px;}

.quick-icon {position: fixed; right: 120px; bottom: 50px; z-index: 100; transition: 0.7s all; transform: translateY(80px);}
.quick-icon .chat-area .chat,
.quick-icon .btn-top {width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); cursor: pointer;}
.quick-icon .chat-area {position: relative;}
.quick-icon .chat-area .chat {position: relative; background-color: var(--primary); transition: 0.5s all;}
.quick-icon .chat-area .chat #bubble {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1;}
.quick-icon .chat-area .chat #close {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;}
.quick-icon .chat-area.active .chat #bubble {opacity: 0;}
.quick-icon .chat-area.active .chat #close {opacity: 1; transform: translate(-50%, -50%) rotate(180deg);}
.quick-icon .chat-area .chat-message {position: absolute; right: 0; bottom: 100%; margin-bottom: 16px; transition: 0.5s all; visibility: hidden; transform: translateY(50px); opacity: 0; display: flex; flex-direction: column; row-gap: 6px;}
.quick-icon .chat-area.active .chat-message {opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.2s;}
.quick-icon .chat-area .chat-message > a {display: flex; align-items: center; width: 242px; height: 54px; padding: 0 20px; column-gap: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06); background: #fff; } 
.quick-icon .chat-area .chat-message > a span {font-weight: 700; font-size: 18px;}
.quick-icon .chat-area .chat-message > a.btn-call {background-color: var(--primary);}
.quick-icon .chat-area .chat-message > a.btn-call span {color: var(--text_w)}
.quick-icon .chat-area .chat-message > a.btn-kakao {background-color: #FBE300;}
.quick-icon .btn-top {visibility: hidden; margin-top: 10px; background-color: var(--text_w);}
.quick-icon .btn-top:hover {background-color: var(--line2); transition: background 0.3s;}

.quick-icon .chat-area .chat #close {width: 20px; height: 20px; opacity: 0; transition: 0.5s all;}
.quick-icon .chat-area .chat #close:before,
.quick-icon .chat-area .chat #close:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 25px; height: 2px; background-color: #fff; border-radius: 4px; }
.quick-icon .chat-area .chat #close:after { transform: translate(-50%, -50%) rotate(45deg); }
.quick-icon .chat-area .chat #close .hidden-txt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

@media screen and (max-width: 1680px) {
    .inner {width: calc(100% - 40px); margin: 0 20px;}

    .quick-icon {right: 100px;}
}
@media screen and (max-width: 1440px) {
    .quick-icon {right: 60px;}
}
@media screen and (max-width: 1280px) {

    footer .footer-info .footer-r {width: 100%;}
    footer .footer-info .footer-r .footer-btn > a {width: 50%;}
}
@media screen and (max-width: 1024px) {

    header .header .header-l {column-gap: 24px;}
    header .header .header-l a{height: 24px;}
    header .header .header-l a img {width: auto; height: 100%;}
    header .header .header-l .gnb li a {padding: 0 12px;}
    header .header .header-l .gnb li:nth-of-type(1) a {padding: 0 12px 0 0;}

    footer .footer-info {flex-direction: column-reverse; row-gap: 80px;}
    footer .footer-info .footer-r {position:relative;}
    footer .footer-info .footer-r::after {position:absolute; width: 100%; height: 1px; background-color: var(--bg_w); opacity: 0.2; bottom: -40px; left: 0; content: ''; display: block;}
    footer .footer-info .footer-r .footer-cont {justify-content: flex-start; column-gap: 10px;}
    footer .footer-info .footer-r .footer-cont > div:nth-of-type(1) {width: 260px;}
    footer .footer-info .footer-l .footer-link > ul:nth-of-type(2) {width: 100%;}
    footer .footer-info .footer-l .sns {padding-top: 28px;}


}
@media screen and (max-width: 768px) {
    header .header .header-l .gnb {display: none;}

    .quick-icon {right: 5vw;}
}
@media screen and (max-width: 500px) {

    .mo-gnb {display: block;}

    header .header-banner ul li {padding: 0 20px;}
    header .header .header-l a {height: 20px;}

    footer {padding: 70px 0 100px 0;}
    footer .inner > img {width: auto;height: 24px;}
    footer .footer-info {margin-top: 30px;}
    footer .footer-info p {font-size: 14px;}
    footer .footer-info h5 {font-size: 24px;}
    footer .footer-info .footer-r .footer-cont > div:nth-of-type(1),
    footer .footer-info .footer-r .footer-btn > a {width: 50%;}
    footer .footer-info .footer-r .footer-cont > div {row-gap: 6px;}
    footer .footer-info .footer-r .footer-cont > div > p:first-of-type {padding-bottom: 8px;}
    footer .footer-info .footer-r .footer-btn img {width: 16px; height:  16px;}
    footer .footer-info .footer-l .footer-link > ul:nth-of-type(2) {padding-top: 12px;}
    footer .footer-info .footer-l .sns img {width: 34px; height: 34px;}

    .quick-icon {bottom: 80px; transform: translateY(60px);}
    .quick-icon .btn-top {margin-top: 6px;}
    .quick-icon .chat-area .chat,
    .quick-icon .btn-top {width: 50px; height: 50px;}
    .quick-icon .chat-area .chat #bubble,
    .scroll .quick-icon .btn-top > img {width: 32px; height: 32px;}
    .quick-icon .chat-area .chat #close {width: 18px; height: 18px;}

}

@media screen and (max-width: 480px) {

}