
/*
 * Name     : layout.css
 * Version  : 1.0.4
 * Author   : onepixel studio
 * Date     : 2020-05-10
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. body
    02. header
    03. footer
    04. media queries
---------------------------------------------------
*/

/* ------------------------------
 * body
------------------------------ */
body {opacity:0; transition:opacity 0.5s}
body.__load {opacity:1}

	 /* buttons */
.button-b {position: relative; display: inline-flex; font-size: 16px; color: var(--gray-800); letter-spacing: -0.02em; text-align: center; white-space: nowrap; padding: 0 16px; height: 52px; border: 2px solid transparent; background-color: var(--gray-100); align-items: center; justify-content: center; outline: 0 !important; overflow: hidden; transition: .2s; vertical-align: middle}
.button-b.button--default {color: var(--gray-800) !important; border-color: var(--gray-100); background-color: var(--white-100)}
.button-b.button--default:hover {color: var(--main) !important; border-color: var(--gray-800)}
.button-b.button--dark {color: var(--white-100) !important; background-color: var(--main)}
.button-b.button--dark:hover {background-color: var(--gray-900)}
.button-b.button--primary {color: var(--white-100) !important; background-color: var(--primary)}
.button-b.button--primary:hover {background-color: var(--main)}
.button-b.button--danger {color: var(--white-100) !important; background-color: #e03131}
.button-b.button--danger:hover {background-color: #c92a2a}
.button-b.button--sm {font-size: 14px; padding: 0 14px; height: 42px}
.button-b.button--lg {font-size: 18px; padding: 0 24px; height: 60px}
.button-b.button--xl {font-size: 20px; padding: 0 32px; height: 64px}
.button-b.size--1 {min-width: 90px}
.button-b.size--2 {min-width: 110px}
.button-b.size--3 {min-width: 120px}
.button-b.size--4 {min-width: 140px}
.button-b.size--5 {min-width: 160px}
.button-b.size--6 {min-width: 180px}
.button-b.size--7 {min-width: 200px}
.button-b.size--8 {min-width: 220px}
.button-b.size--9 {min-width: 240px}
.button-b.size--10 {min-width: 260px}
.button-download {background:var(--gray-100);padding: 7px 32px;font-weight:600;font-size: 14px;transition: all .3s;height: 36px;}
.button-download:hover {background: var(--gray-900);color: var(--white-100);}
.button-zipcode {background:var(--gray-100);padding: 16px 28px !important;font-weight:600;font-size: 15px;margin-left: 10px;transition: all .3s;}
.button-zipcode:hover {background: var(--gray-900);color: var(--white-100) !important;}


.sbb-btn {font-weight: 500;background-color:#f7f7f7; height: 40px;border-radius: 24px;padding: 10px 20px;font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;border: none;text-align: left; color: var(--white-100); transition: 0.3s ease;margin-top: 20px;}
.sbb-btn:hover {background:#333; color:#fff;}

/* ------------------------------
 * header
------------------------------ */
#header {position:fixed; top:0; left:0; right:0; height:70px; border-bottom:1px solid rgba(255,255,255,0.15); background-color:transparent; z-index:1000; transition:height 0.3s, border-color 0.3s, background-color 0.3s}
#header .container-fluid {position:relative; height:100%}
#header .logo {position:absolute; top:0; left:20px; display:table; height:100%}
#header .logo a {display:table-cell; vertical-align:middle}
#header .logo a img {display:block; width:100%; max-height:0; opacity:0; transition:opacity 0.3s}
#header .logo a img.logo-light {max-height:45px; opacity:1}
#header.sticky {height:60px; border-color:#e9e9e9; background-color:#fff}
#header.sticky .logo a img.logo-light {max-height:0; opacity:0}
#header.sticky .logo a img.logo-dark {max-height:45px; opacity:1}

/* ------------------------------
 * footer
------------------------------ */
#footer {padding:45px 0 60px; text-align:center; background-color:#31353e}
#footer .footer-nav li {display:inline-block; margin:0 12px}
#footer .footer-nav li a {font-size:15px; color:#fff}
#footer .sns-icons {margin:40px 0 30px}
#footer .sns-icons li {display:inline-block; margin:0 12px}
#footer .sns-icons li a {font-size:28px; color:#fff}
#footer .sns-icons li a i {opacity:0.3; transition:opacity 0.25s, transform 0.25s}
#footer .sns-icons li a:hover i {opacity:0.85; transform:rotate(15deg)}
#footer .info {font-size:14px; color:#fff; line-height:1.65; opacity:0.7}
#footer .info a {color:#fff}
#footer .info span {margin:0 10px; opacity:0.5}
#footer .info p + p {margin-top:20px}

/* ------------------------------
 * media queries
------------------------------ */
@media (min-width:992px) {
    #header nav {right:auto !important; opacity:1}
    #header nav .mobile-header {display:none}
    #header .gnb {position:absolute; top:0; left:50%; font-size:0; white-space: nowrap; transform: translateX(-50%); z-index: 100}
    #header .gnb > li {position:relative; display:inline-block; font-size:16px; text-align:center; vertical-align:top}
    #header .gnb > li > a {position:relative; display:block; color:#fff; letter-spacing:2px; height:70px; line-height:70px; padding:0 30px; transition:color 0.3s, line-height 0.3s, height 0.3s}
    #header .gnb > li > a:after {content:''; position:absolute; display:block; bottom:-10px; left:50%; width:0; height:2px; background-color:#fff; transition:left 0.3s, width 0.3s}
    #header .gnb > li:hover > a, #header .gnb > li.is-active > a {color:#fff;/ font-weight:bold;* !important*/}
    #header .gnb > li:hover > a:after {left:0; width:100%}
    #header .gnb > li > .subnav {display:none; position:absolute; left:0; right:0; padding:20px 15px; z-index:15}
    #header .gnb > li > .subnav li + li {margin-top:5px}
    #header .gnb > li > .subnav li a {font-size:14px; color:#8a8a8a; line-height:1.65; transition:color 0.2s}
    #header .gnb > li > .subnav li a:hover, #header .gnb > li > .subnav li.is-active a {color:#222; /*color:#ee7739;*/}
    #header .member-nav {position:absolute; top:0; right:32px; text-align:right; font-size:0}
    #header .member-nav > li {display:inline-block; font-size:16px}
    #header .member-nav > li > a {display:block; font-size:14px; color:#fff; line-height:70px; margin:0 8px; opacity:0.8; transition:color 0.3s, line-height 0.3s}
    #header .btn-open-nav {display:none}
    #header .nav-dimmed {display:none !important}
    #header.sticky .gnb > li > a {height:60px; line-height:60px}
    #header.sticky .member-nav > li > a {line-height:60px}
    #header.is-active {border-color:#e9e9e9; background-color:#fff}
    #header.is-active .logo a img.logo-light {max-height:0; opacity:0}
    #header.is-active .logo a img.logo-dark {max-height:48px; opacity:1}
    #header.sticky .gnb > li > a:after, #header.is-active .gnb > li > a:after {background-color:#222; /*background-color:#ee7739;*/}
    #header.sticky .gnb > li > a, #header.is-active .gnb > li > a {color:#2b2b2b}
    #header.sticky .member-nav > li > a, #header.is-active .member-nav > li > a {color:#2b2b2b}
    #header .subnav-bg {position:absolute; display:none; left:0; right:0; margin-top:1px; background-color:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.08); z-index:10}
}


/* 모바일에서 PC 메뉴처럼 보이도록 설정
@media (max-width: 991px) {
    #header nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        right: auto !important;
        opacity: 1 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }


    #header nav .mobile-header,
    #header .btn-open-nav,
    #header nav .btn-close-nav,
    #header .nav-dimmed {
        display: none !important;
    }


    #header .gnb {
        position: absolute !important;
        top: 0 !important;
        left: 260px !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
        font-size: 0 !important;
        padding: 0 !important;
        width: 240px;
    }

    #header .gnb > li {
        display: inline-block !important;
        font-size: 14px !important;
        vertical-align: top !important;
        width: 30% !important;
		position: relative !important;
    }

    #header .gnb > li > a {
        display: block !important;
        color: #fff !important;
        letter-spacing: 2px !important;
        height: 70px !important;
        line-height: 70px !important;
        padding: 0 30px !important;
		 font-size: 15px !important;
    }


    #header .gnb > li.is-active > .subnav,
    #header .gnb > li:hover > .subnav {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        background-color: #fff !important;
        padding: 20px 15px !important;
        z-index: 999 !important;
    }


    #header .gnb > li > .subnav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
    }

    #header .gnb > li.has-child-menu > a:after {
        display: none !important;
    }


   #header .gnb > li.is-active > .subnav, #header .gnb > li:hover > .subnav {
        display: block !important;
		visibility: hidden !important;
        height: 0 !important;
    }
}
	
	
@media (max-width: 991px) {
    /* sticky 헤더에서 텍스트 색상 조정 */
    #header.sticky .gnb > li > a,
    #header.is-active .gnb > li > a {
        height: 60px !important;       /* 로고와 동일한 높이 */
        line-height: 60px !important;  /* 글자도 같은 위치로 */
        color: #2b2b2b !important;     /* 회색 글씨 유지 */
    }
		
	
}


@media (max-width:767px) {
   #header .logo a img {
    max-height: 36px;
	max-width: 120px;/* 기존 45px 기준으로 약 20% 감소 */
  }
  
/*#header .logo a img.logo-light {
    position: absolute;
    top: 16px;
    left: -10px;
    max-height: 36px;
    opacity: 1;
    display: block;
    z-index: 999;
    transition: opacity 0.3s, max-height 0.3s;
}

#header .logo a img.logo-dark {
    position: absolute;
    top: 16px;
    left: -10px;
    max-height: 36px;
    opacity: 0;
    display: block;
    z-index: 999;
    transition: opacity 0.3s, max-height 0.3s;
}

#header.sticky .logo a img.logo-light {
    opacity: 0;
}

#header.sticky .logo a img.logo-dark {
    opacity: 1;
}*/

/* 로고 높이도 확인*/
    #header.sticky .logo a img.logo-dark {
        max-height: 36px; 
		z-index:999;
    }
	
  #header .logo a img.logo-light {
  position:absolute; top:16px; left:0px; display:table;
    max-height: 36px;
  }
  
  
    #footer .footer-nav li {margin:0 8px 15px}
    #footer .footer-nav li a {font-size:13px}
    #footer .sns-icons {margin:20px 0 30px}
    #footer .info {font-size:12px}
}

/*전체메뉴 모바일용*/

@media (max-width:991px) {
    #header .logo {left:15px}
   
	#header nav {position:absolute; top:0; right:-240px; width:240px; height:100vh; padding-bottom:40px; background-color:#fff; box-shadow:-6px 0 18px 0 rgba(0,0,0,0.08); z-index:100; opacity:0; overflow-x:hidden; overflow-y:auto; transition:opacity 0.4s cubic-bezier(0.305,0.405,0.085,0.975), right 0.4s cubic-bezier(0.305,0.405,0.085,0.975)}
    #header nav .mobile-header {position:relative; padding:23px 25px; border-bottom:1px solid #fff; background-color:#fff}
    #header nav .mobile-header img {max-width:160px}
    #header nav .btn-close-nav {position:absolute; top:50%; left:-50px; width:40px; height:40px; font-size:38px; color:#fff; line-height:1; margin-top:-20px; padding:0; border:none; background-color:transparent; outline:0; opacity:0; visibility:hidden; transition:opacity 0.25s; transition-delay:0.45s}
    #header .gnb {padding:24px 0}
    #header .gnb > li > a {position:relative; display:block; font-size:16px; color:#7a7a7a; padding:8px 25px}
    #header .gnb > li.has-child-menu > a:after {content:''; position:absolute; right:25px; font-family:'xeicon'; color:#aaa; transition:transform 0.3s ease}
    #header .gnb > li.is-active > a, #header .gnb > li.is-open > a {color:#333;}
    #header .gnb > li.is-open > a:after {transform:rotate(180deg)}
    #header .gnb > li > .subnav {display:none; padding:5px 25px}
    #header .gnb > li > .subnav.visible {display:block}
    #header .gnb > li > .subnav > li > a {position:relative; display:block; font-size:13px; color:#8a8a8a; padding:5px 0 5px 15px}
    #header .gnb > li > .subnav > li.is-active > a {color:#333;}
    #header .gnb > li > .subnav > li > a:before {content:''; position:absolute; display:block; top:50%; left:0; width:6px; height:1px; margin-top:-1px; background-color:#d8dde8}
    #header .gnb > li > .subnav > li.is-active > a:before {background-color:#333;}
    #header .member-nav {padding:24px 25px 0; text-align:center; border-top:1px solid #f1f1f1}
    #header .member-nav > li {display:inline-block}
    #header .member-nav > li + li:before {content:'/'; font-size:12px; font-style:italic; color:#ccc; margin:0 12px 0 8px}
    #header .member-nav > li > a {font-size:14px; color:#999}
    #header .member-nav > li .btn {display:block; width:100%}
	
    #header .btn-open-nav {position:absolute; top:50%; right:9px; width:36px; height:36px; margin-top:-18px; padding:0; border:none; background-color:transparent; cursor: pointer; outline:0}
    #header .btn-open-nav > span {position:absolute; display:block; left:50%; width:20px; height:2px; margin-left:-10px; border-radius:4px; background-color:#fff; transition:all 0.35s cubic-bezier(0.305,0.405,0.085,0.975)}
    #header .btn-open-nav > span:first-child {top:11px}
    #header .btn-open-nav > span:nth-child(2), #header .btn-open-nav > span:nth-child(3) {top:17px}
    #header .btn-open-nav > span:nth-child(4) {top:23px}
    #header .btn-open-nav > span:nth-child(4) {top:23px}
    #header .btn-open-nav[aria-expanded="true"] >span:first-child, #header .btn-open-nav[aria-expanded="true"] >span:nth-child(4) {top:17px; width:0; margin-left:0}
    #header .btn-open-nav[aria-expanded="true"] >span:nth-child(2) {transform:rotate(45deg)}
    #header .btn-open-nav[aria-expanded="true"] >span:nth-child(3) {transform:rotate(-45deg)}
    #header .btn-open-nav[aria-expanded="true"] + nav {right:0; opacity:1; transition-delay:0.45s}
    #header .btn-open-nav[aria-expanded="true"] + nav .btn-close-nav {opacity:1; visibility:visible}
    #header .nav-dimmed {display:none; position:absolute; top:0; left:0; right:0; height:100vh; background-color:#000; opacity:0.5; z-index:50}
    #header.sticky .btn-open-nav > span {background-color:#000}
}