@charset "utf-8";
/*
 * Name     : layout.css
 * Version  : 1.0.4
 * Author   : onepixel studio
 * Date     : 2020-05-10
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. header
    02. container
    03. footer
    04. page loader
    05. media queries
---------------------------------------------------
*/

/* ------------------------------
 * 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:32px; display:table; width:114px; 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:48px; 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:48px; opacity:1}

/* ------------------------------
 * container
------------------------------ */
main {overflow-x: hidden}
#container {position: relative; background-color: #fff; z-index: 20}

/* ------------------------------
 * footer
------------------------------ */
#footer {padding: 80px 0; background-color: #1b1b1b}
#footer .col-logo img {max-width: 114px; opacity: .5}
#footer .col-logo .copy {font-size: 13px; color: #666; letter-spacing: .1em; line-height: 1.8; margin-top: 20px}
#footer .col-sitemap dl + dl {margin-top: 14px}
#footer .col-sitemap dl dt {position: relative; float: left; width: 90px; font-size: 13px; font-weight: normal; color: #aaa}
#footer .col-sitemap dl dt:after {content: '/'; color: #5f5f5f; font-style: italic; position: absolute; right: 0}
#footer .col-sitemap dl dt a {color: #aaa}
#footer .col-sitemap dl dd {margin-left: 110px}
#footer .col-sitemap dl dd ul {font-size: 0}
#footer .col-sitemap dl dd ul li {display: inline-block; margin-right: 20px}
#footer .col-sitemap dl dd ul li a {font-size: 13px; color: #5f5f5f; transition: color .3s}
#footer .col-sitemap dl dd ul li a:hover {color: #eee}
#footer .col-info p {font-size: 14px; color: #666; line-height: 1.85}
#footer .col-info p span {margin: 0 10px; opacity: .4}
#footer .col-info p + p {margin-top: 15px}
#footer .col-info .copy {letter-spacing: .1em}
#footer .col-info .sns-btn {margin-top:20px}
#footer .col-info .sns-btn a {font-size:24px; margin-right:5px; transition:all 0.3s ease; vertical-align: middle;}
#footer .col-info .sns-btn a {color:#ff0000}
#footer .col-info .sns-btn a:first-child {color:#03c75a}
#footer .col-info .sns-btn a:hover {color:#e77917}
/* ------------------------------
 * page loader
------------------------------ */
#page-loader {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #f8f9fa; z-index: 9999}
#page-loader .loader {position: absolute; top: 50%; left: 50%; display: inline-block; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 5px solid #f28549; animation: loader 2s infinite ease}
#page-loader .loader .loader-inner {display: inline-block; width: 100%; background-color: #f28549; vertical-align: top; animation: loader-inner 2s infinite ease-in}

@keyframes loader {
    0% {transform: rotate(0deg)}
    25% {transform: rotate(180deg)}
    50% {transform: rotate(180deg)}
    75% {transform: rotate(360deg)}
    100% {transform: rotate(360deg)}
}

@keyframes loader-inner {
    0% {height: 0%}
    25% {height: 0%}
    50% {height: 100%}
    75% {height: 100%}
    100% {height: 0%}
}


/* ------------------------------
 * media queries
------------------------------ */
@media (min-width:768px) {
    #footer {position: fixed; bottom: 0; left: 0; right: 0; z-index: 1}
    #footer .col-sitemap dl dd {display: block !important}
}

@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; z-index: 50; transform: translateX(-50%)}
    #header .gnb > li {position:relative; display:inline-block; font-size:18px; text-align:center; vertical-align:top}
    #header .gnb > li > a {position:relative; display:block; color:#fff; letter-spacing:2px; min-width: 200px; height:70px; line-height:70px; padding:0 38px; transition:color 0.3s, line-height 0.3s, height 0.3s}
    #header .gnb > li > a:after {content:''; position:absolute; display:block; bottom:0; 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:#f28549 !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:15px; 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:#f28549}
    #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 + li::before {content: '|'; margin: 0 10px; font-size: 14px; color: #fff; transition: color .3s}
    #header .member-nav > li > a {display:block; font-size:14px; color:#fff; line-height:70px; transition:color 0.3s, line-height 0.3s}
    #header .member-nav > li .lang-switcher {font-size: 14px; color: #fff; padding: 0 20px 0 0; border: 0; background-color: transparent; transition: color .3s; outline: 0; -webkit-appearance: none; background-image: url(../images/lang_switcher_arrow.png); background-position: right center; background-repeat: no-repeat; cursor: pointer; transition: color .3s, background .3s; margin-top:-3px}
    #header .member-nav > li .lang-switcher::-ms-expand {display: none}
    #header .member-nav > li .lang-switcher option {color: #212529}
    #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:#f28549}
    #header.sticky .gnb > li > a, #header.is-active .gnb > li > a {color:#2b2b2b}
    #header.sticky .member-nav > li + li::before {color: #ccc}
    #header.sticky .member-nav > li > a, #header.is-active .member-nav > li > a {color:#2b2b2b}
    #header.sticky .member-nav > li .lang-switcher, #header.is-active .member-nav > li .lang-switcher {color: #2b2b2b; background-image: url(../images/lang_switcher_arrow_dark.png)}
    #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}
}

@media (max-width: 1199px) {
    #header .gnb > li > a {min-width: 160px}
}

@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 #000; background-color:#000; text-align:center}
    #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:'\e943'; 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:#f28549}
    #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:#f28549}
    #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:#f28549}
    #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}

    #footer .col-sitemap {margin-top: 40px}
    #footer .col-info p {margin-top: 40px}
}

@media (max-width:767px) {
    #footer {padding: 60px 0}
    #footer .col-sitemap dl + dl {margin-top: 0}
    #footer .col-sitemap dl dt {position: relative; float: none; width: auto; border-bottom: 3px solid rgba(255,255,255,.08); transition: border-color .3s ease-in-out}
    #footer .col-sitemap dl dt a {display: block; padding: 15px 0; transition: color .3s ease-in-out}
    #footer .col-sitemap dl dt:after {display: none}
    #footer .col-sitemap dl dt:before, #footer .col-sitemap dl dt:after {content: ''; position: absolute; display: block; background-color: #666; transition: background-color .3s ease-in-out, transform .3s ease-in-out}
    #footer .col-sitemap dl dt:before {top: 50%; right: 0; width: 14px; height: 2px; margin-top: -1px}
    #footer .col-sitemap dl dt:after {top: 50%; right: 6px; width: 2px; height: 14px; margin-top: -7px}
    #footer .col-sitemap dl.is-open dt a {color: #eaeaea}
    #footer .col-sitemap dl.is-open dt:before {transform: rotate(-135deg)}
    #footer .col-sitemap dl.is-open dt:after {transform: rotate(45deg)}
    #footer .col-sitemap dl.is-open dt:before, #footer .col-sitemap dl.is-open dt:after {background-color: #eaeaea}
    #footer .col-sitemap dl dd {display: none; margin-left: 0}
    #footer .col-sitemap dl dd ul {padding: 15px 0}
    #footer .col-sitemap dl dd ul li {display: block; margin-right: 0; font-size: 13px; line-height: 1.8}
    #footer .col-info p {font-size: 13px}
    #footer .col-info p a {color: #666}
    .footer-spacer {display: none}
}