@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; z-index:1000; width:100%; background-color:transparent; transition: all 0.3s ease}
#header.sticky {box-shadow:1px 1px 10px 0px rgb(0 0 0 / 15%); transition:all 0.3s ease; background-color:#fff; }
#header .container-wide {padding-left:70px; padding-right:70px}
#header #nav > ul {font-size:0}
#header #nav > ul > li {display:inline-block; padding:0 55px}
#header #nav > ul > li > a {display:block; font-size:18px; font-weight:500; color:#fff; padding:30px 0; transition:all 0.3s ease; border-bottom:3px solid transparent}
#header.sticky #nav > ul > li > a {color:#000; transition:all 0.3s ease}
#header #nav > ul > li:last-child {margin-right:70px}
#header #nav > ul > li:hover > a {border-bottom:3px solid #000}
#header .subnav-bg {background-color:#fff; position:absolute; top:89px; bottom:0; width:100%; height:477px; z-index:-1; display:none}
#header .logo a {display:block; width:145px}
#header .logo a img {display:block; width:100%; max-height:0; opacity:0; transition:opacity 0.3s}
#header .logo a img.light-logo {max-height:42px; opacity:1}
#header.sticky .logo a img.light-logo {max-height:0; opacity:0}
#header.sticky .logo a img.dark-logo {max-height:42px; opacity:1}
#header .pc-header .subnav {font-size:0; border-top:1px solid #e6e6e6; display:none}
#header .pc-header .subnav > div {display:inline-block; vertical-align: top}
#header .pc-header .subnav .img-box {width:36%}
#header .pc-header .subnav .img-box img {opacity:0; max-height:0; transition: opacity 0.3s}
#header .pc-header .subnav .img-box img.on {opacity:1; max-height:477px}
#header .pc-header .subnav .subnav-box {width:64%}
#header .pc-header .subnav .subnav-box .row {align-items: stretch}
#header .pc-header .subnav .subnav-box .row .col-subnav {padding-left:30px; margin:35px 0}
#header .pc-header .subnav .subnav-box .row .col-subnav:first-child {padding-left:125px}
#header .pc-header .subnav .subnav-box .row .col-subnav + .col-subnav {border-left:1px solid #e6e6e6}
#header .pc-header .subnav .subnav-box .row .col-subnav > ul li:first-child {margin-bottom:20px}
#header .pc-header .subnav .subnav-box .row .col-subnav > ul li a {font-size:17px; font-weight:300; color:#131313; line-height:1; border-bottom:1px solid transparent}
#header .pc-header .subnav .subnav-box .row .col-subnav > ul li:hover a {border-bottom:1px solid #131313}
#header .pc-header .subnav .subnav-box .row .col-subnav > ul li a strong {font-size:20px; font-weight:700}
#header .pc-header .subnav .subnav-box .row .col-subnav > ul li + li a {display:inline-block; margin-top:15px}

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

/* ------------------------------
 * footer
------------------------------ */
#footer {padding: 50px 0; background-color: #1b1b1b}
#footer .col-logo img {max-width: 145px}
#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: 105px; font-size: 14px; font-weight: 600; letter-spacing: .1em}

#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-sitemap > ul {font-size:0}
#footer .col-sitemap > ul li {display:inline-block; position:relative; padding-left:30px}
#footer .col-sitemap > ul li:first-child {padding-left:0}
#footer .col-sitemap > ul li:before {content:''; display:block; width:1px; height:12px; background-color:#666666; position:absolute; top:6px; left:15px}
#footer .col-sitemap > ul li:first-child:before {display:none}
#footer .col-sitemap > ul li a {font-size:17px; font-weight:500; color:#fff}
#footer .col-sitemap .company-info {margin-top:30px; font-size:16px; font-weight:400; color:#9a9a9a; letter-spacing:-0.04em; line-height:1.5625}
#footer .col-sitemap .company-info span {color:#9a9a9a}
#footer .col-sitemap .company-info a {color:#9a9a9a}
#footer .col-sitemap .copyright {margin-top:70px; font-size:15px; font-weight:400; color:#666; letter-spacing:-0.04em}
#footer .col-info .sns-icon {font-size:0; text-align:right}
#footer .col-info .sns-icon > li {display:inline-block; padding-left:15px}

/* ------------------------------
 * 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 #131313; animation: loader 2s infinite ease; display:none}
#page-loader .loader .loader-inner {display: inline-block; width: 100%; background-color: #131313; 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%}
}


#quick-menu {position:fixed; bottom:50px; right:50px; z-index:1000;}
#quick-menu .side-quick > ul li {display:block}
#quick-menu .side-quick > ul li + li {margin-top:10px}
#quick-menu .side-quick > ul li a {display:block; width:60px; height:60px; line-height:64px; font-size:30px; text-align:center; border-radius:50%; background-color:#e60a11; box-shadow:1px 1px 10px 0 rgba(0,0,0,0.15); color:#fff}
#quick-menu .side-quick > ul li:first-child a {background-color:#131313; font-size:12px; line-height:0}
#quick-menu .side-quick > ul li:first-child a img {display:block; margin:0 auto; padding:13px 0 7px; width:22px}
#quick-menu .side-quick > ul li:nth-child(3) a {background-color:#f8e000; color:#421717}
#quick-menu .side-quick > ul li:last-child {margin-top:20px}
#quick-menu .side-quick > ul li:last-child a {background-color:#fff; color:#000; width:50px; height:50px; line-height:52px; margin:0 auto; font-size:24px}

/* ------------------------------
 * media queries
------------------------------ */
@media (min-width:768px) {
    #header .logo .logo-dark {display: none}

    #footer {position: fixed; bottom: 0; left: 0; right: 0; z-index: 1}
    #footer .col-sitemap dl dd {display: block !important}
    #mobile-quick {display:none}
}
@media (min-width:1220px) {
    #header .pc-header {display:block}
    #header .mobile-header {display:none}
}
@media (max-width:1219px) {
    #header {padding-top:0; height:80px}
    #header .container-wide {position:relative; height:100%; padding-left:40px; padding-right:40px}
    #header .pc-header {display:none}
    #header .mobile-header {display:block; height:100%}
    #header .mobile-header .flex-row {height:100%}
    #header .btn-nav-open {display: inline-block}
    #header .gnb .menu-items {display: none}
    #header .side-nav {display: block}
    #header .mobile-header .mobile-header-btn button {margin:0; padding:0; border:0; outline: none; background:transparent}
    #header .mobile-header .mobile-header-btn button span.hamburger {display:block; width:25px; height:2px; background-color:#fff}
    #header.sticky .mobile-header .mobile-header-btn button span.hamburger {background-color:#000}
    #header .mobile-header .mobile-header-btn button span.hamburger02 {width:17px}
    #header .mobile-header .mobile-header-btn button span + span {margin-top:8px}
    #header .mobile-header .mobile-menu {position:absolute; width:100%; height:100vh; left:0; right:0; top:-100vh; background-color:#fff; transition:all 0.3s ease}
    #header .mobile-header .mobile-menu.open {top:0}
    #header .mobile-header .mobile-menu .side-wrap {display:block; width:100%; border-bottom:1px solid #d9d9d9; padding:40px 0}
    #header .mobile-header .mobile-menu .side-wrap .logo a img {max-height:42px; opacity: 1}
    #header .mobile-header .mobile-menu .side-wrap .mobile-close-btn button {margin:0; padding:0; border:0; outline: none; background:transparent}
    #header .mobile-header .mobile-menu .side-wrap .mobile-close-btn button span.c_hamburger {display:block; width:25px; height:2px; background-color:#000}
    #header .mobile-header .mobile-menu .side-wrap .mobile-close-btn button span.c_hamburger01 {transform: rotate(45deg)}
    #header .mobile-header .mobile-menu .side-wrap .mobile-close-btn button span.c_hamburger02 {transform: rotate(-45deg); margin-top:-1px}
    #header .mobile-header .mobile-menu #mobile-nav {margin-top:40px; padding:0 25px}
    #header .mobile-header .mobile-menu #mobile-nav > ul > li > a {display:inline-block; font-size:26px; font-weight:700; color:#131313; letter-spacing:-0.035em; border-bottom:2px solid transparent; padding-bottom:15px}
    #header .mobile-header .mobile-menu #mobile-nav > ul > li > a.active {border-color:#131313}
    #header .mobile-header .mobile-menu #mobile-nav > ul > li + li {margin-top:20px}
    #header .mobile-header .mobile-menu #mobile-nav > ul > li .subnav {margin-top:18px; display:none; padding-bottom:10px}
    #header .mobile-header .mobile-menu #mobile-nav > ul > li .subnav li + li {margin-top:10px}
    #header .mobile-header .mobile-menu #mobile-nav > ul > li .subnav li a {display:block; font-size:18px; font-weight:300; color:#131313; letter-spacing:-0.035em}
}

@media (max-width:991px) {
    #footer .col-sitemap {margin-top: 40px}
    #footer .col-info p {margin-top: 40px}
}

@media (max-width:767px) {
    #header {}
    #header .logo {width: 160px}
    #header .logo .logo-light {display: none}
    #header .logo .logo-dark {display: block}
    #header .gnb {height: 100%}
    #header .gnb:before {content: ''; display: inline-block; width: 1px; height: 100%; vertical-align: middle}
    #header .gnb .member-menu {display: none}
    #header .btn-nav-open span {background-color: #000}
    #header .side-nav {right: -360px; bottom: 0; width: 300px; padding-top: 100px}
    #header .side-nav .btn-nav-close {top: 40px; right: 10px}
    #header .side-nav .side-logo {padding: 0 40px}
    #header .side-nav .side-logo a {max-width: 160px}
    #header .side-nav .scrollable {max-height: calc(100% - 180px)}
    #header .side-nav .menu-items {padding: 0 40px}
    #header .side-nav .menu-items > li > a {font-size: 15px}
    #header .side-nav .menu-items > li > a span:before {top: 2px}
    #header .side-nav .menu-items > li.has-child-menu > a:after {font-size: 15px; margin-top: -11px}
    #header .side-nav .menu-items > li > .subnav > li > a {font-size: 13px}
    #header .side-nav .member-menu {left: 40px; right: 40px}
    #header .side-nav .member-menu li a {font-size: 13px}
    #header.sticky {height: 70px; background-color: #fff; box-shadow: 0 2px 2px 0 rgba(0,0,0,.05)}

    #container {}

    #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}
    #footer .row > div {text-align:center}
    #footer .col-info .sns-icon {text-align:center; margin-top:20px}
    #footer .col-sitemap > ul li a {font-size:14px}
    #footer .col-sitemap > ul li:before {top:4px}
    #footer .col-sitemap .company-info {font-size:14px}
    #footer .col-info .sns-icon > li {padding:0 10px}
    #footer .col-sitemap > ul li:before {display:none}
    #footer .col-sitemap > ul li {padding-left:15px; padding-right:15px}
    #footer .col-sitemap > ul li:first-child {padding-left:15px}
    #footer .col-sitemap .company-info {color:#fff}
    #footer .col-sitemap .company-info a {color:#fff}
    #footer .col-sitemap .company-info a:link {color:#fff}
    #footer .col-sitemap .company-info span {color:#fff}
    #footer .col-sitemap .company-info span:link {color:#fff}
    #footer .col-sitemap .copyright {font-size:14px; margin-top:50px}
    #quick-menu {bottom:80px; right:15px}
    #quick-menu .side-quick ul li:nth-child(3) {display:none}
    #mobile-quick {display:block; position:fixed; bottom:0; left:0; right:0; z-index:1000}
    #mobile-quick .quick-box .col-item {background-color:#000}
    #mobile-quick .quick-box .col-item:nth-child(2) {background-color:#848484}
    #mobile-quick .quick-box .col-item:last-child {background-color:#f9e000}
    #mobile-quick .quick-box .col-item a {display:inline-block; font-size:16px; font-weight:300; color:#fff; letter-spacing:-0.04em; padding:15px 0}
    #mobile-quick .quick-box .col-item:last-child a {color:#3d3d3d}
    #mobile-quick .quick-box .col-item a img {display:inline-block; max-width:25px; vertical-align: middle; margin-right:10px}
}

@media (max-width:540px) {
    #header .logo a img {max-width:100px}
    #header .mobile-header .mobile-menu .side-wrap {padding:20px 0}
    #header .container-wide {padding-left:15px; padding-right:15px}
    #header .mobile-header .mobile-menu #mobile-nav > ul {overflow-y: scroll; max-height:calc(100vh - 300px)}
    #footer .col-sitemap .copyright {font-size:12px}
}