@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. media queries
---------------------------------------------------
*/

/* ------------------------------
 * header
------------------------------ */
#header {position: fixed; top: 0; left: 0; right: 0; height: 160px; z-index: 1000; transition: all .3s}
#header .container-wide {position: relative; height: 100%}
#header .logo {position: absolute; top: 0; left: 80px; display: table; width: 210px; height: 160px; transition: height .3s}
#header .logo a {display: table-cell; vertical-align: middle}
#header .logo a img {display: block; width: 100%}
#header .btn-nav-open {position: absolute; top: 50%; right: 80px; width: 50px; height: 50px; margin-top: -25px; padding: 0; border: none; background-color: transparent; cursor: pointer; outline: 0}
#header .btn-nav-open span {position: absolute; display: block; left: 50%; width: 24px; height: 2px; margin-left: -12px; background-color: #fff; transition: all .3s}
#header .btn-nav-open span:first-child {top: 14px}
#header .btn-nav-open span:nth-child(2) {top: 22px}
#header .btn-nav-open span:last-child {top: 30px}
#header .btn-nav-open:hover span:first-child {top: 10px}
#header .btn-nav-open:hover span:last-child {top: 34px}
#header .btn-nav-open[aria-expanded="true"] + .gnb {right: 0; opacity: 1}
#header .gnb {position: fixed; top: 0; right: -400px; bottom: 0; width: 400px; padding-top: 120px; background-color: #0c0c0c; z-index: 50; box-shadow: -30px 0 50px 0 rgba(0,0,0,.24); opacity: 0; transition: opacity .8s, right .45s; transition-timing-function: ease}
#header .gnb .btn-nav-close {position: absolute; top: 50px; right: 42px; width: 60px; height: 60px; font-size: 42px; color: #fff; padding: 0; border: none; background-color: transparent; outline: 0}
#header .gnb .scrollable {max-height: calc(100% - 160px); overflow-y: auto}
#header .gnb .menu-items {padding: 0 60px}
#header .gnb .menu-items > li {padding: 12px 0}
#header .gnb .menu-items > li > a {position: relative; display: block; font-size: 24px; font-weight: 500; color: #555; transition: color .25s}
#header .gnb .menu-items > li > a span {position: relative; display: inline-block; z-index: 5}
#header .gnb .menu-items > li > a span:before {content: ''; position: absolute; display: block; bottom: 6px; left: 0; width: 0; height: 6px; background-color: #e4b465; transition: width 0.25s ease-in-out; z-index: -1}
#header .gnb .menu-items > li.has-child-menu > a:after {content: '\e943'; position: absolute; top: 50%; right: 0; font-family: 'xeicon'; font-size: 17px; color: #aaa; margin-top: -12px; transition: transform .25s ease}
#header .gnb .menu-items > li > a:hover, #header .gnb .menu-items > li.is-open > a, #header .gnb .menu-items > li.is-active > a {color: #fff}
#header .gnb .menu-items > li > a:hover span:before, #header .gnb .menu-items > li.is-open > a span:before, #header .gnb .menu-items > li.is-active > a span:before {width: 100%}
#header .gnb .menu-items > li.is-open.has-child-menu > a:after {transform: rotate(180deg)}
#header .gnb .menu-items > li > .subnav {display: none; padding-top: 8px}
#header .gnb .menu-items > li > .subnav > li {padding: 8px 0}
#header .gnb .menu-items > li > .subnav > li > a {font-size: 17px; color: #666; transition: color .2s}
#header .gnb .menu-items > li > .subnav > li > a:hover, #header .gnb .menu-items > li > .subnav > li.is-active > a {color:#eee}
#header .gnb .member-menu {position: absolute; bottom: 0; left: 60px; right: 60px; font-size: 0; text-align: center; padding-top: 30px; padding-bottom: 60px; border-top: 4px solid rgba(255,255,255,.14)}
#header .gnb .member-menu li {display: inline-block}
#header .gnb .member-menu li a {font-size: 16px; color: #666}
#header .gnb .member-menu li+li a:before {content: '/'; display: inline-block; margin: 0 15px; color: #fff; opacity: .2}
#header .nav-dimmed {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 30}
#header.sticky {height: 80px; background-color: rgba(0,0,0,.9)}
#header.sticky .logo {height: 80px}

/* ------------------------------
 * container
------------------------------ */
body {opacity: 0; transition: opacity .5s}
body.__load {opacity: 1}
main {overflow-x: hidden}
body.main #container {padding-top:100vh}
body.main #container .section-container {position: relative; background-color: #fff; z-index: 20}

/* ------------------------------
 * footer
------------------------------ */
#btn-to-top {position:fixed; display: block; bottom: 50px; right: -60px; width: 60px; height: 60px; font-size: 20px; color: #fff; text-align: center; line-height: 60px; border-radius: 50%; background-color: #4263eb; opacity: 0; z-index: 500; transition: background-color .5s, opacity .5s, right .5s}
#btn-to-top.show {right: 50px; opacity: 1}
#btn-to-top:hover {background-color: #000}

#footer {position: relative; padding: 60px 0; background-color: #222325; z-index: 20}
#footer .col-logo {text-align: right}
#footer .col-logo img {max-width: 180px; opacity: .5}
#footer .col-info .link-items {font-size: 0; margin-bottom: 20px}
#footer .col-info .link-items li {display:inline-block; margin-right: 25px}
#footer .col-info .link-items li a {font-size: 14px; color: #999}
#footer .col-info .link-items li a:hover {color: #fff}
#footer .col-info p {font-size: 14px; color: #616161; line-height: 1.85}
#footer .col-info p .divider:before {content: ''; display: inline-block; width: 1px; height: 14px; margin: 0 10px; background-color: rgba(255,255,255,.14); vertical-align: -1px}

/* ------------------------------
 * media queries
------------------------------ */
@media (max-width:991px) {
    #header {height: 100px}
    #header .logo {left: 15px; height: 100px}
    #header .btn-nav-open {right: 15px}
}

@media (max-width:767px) {
    #header .logo {width: 160px}
    #header .gnb {right: -300px; bottom: 0; width: 300px}
    #header .gnb .btn-nav-close {top: 40px; right: 10px}
    #header .gnb .scrollable {max-height: calc(100% - 160px)}
    #header .gnb .menu-items {padding: 0 25px}
    #header .gnb .menu-items > li > a {font-size: 19px}
    #header .gnb .menu-items > li > a span:before {content: ''; position: absolute; display: block; bottom: 6px; left: 0; width: 0; height: 6px; background-color: #e4b465; transition: width 0.25s ease-in-out; z-index: -1}
    #header .gnb .menu-items > li.has-child-menu > a:after {font-size: 15px; margin-top: -11px}
    #header .gnb .menu-items > li > .subnav > li > a {font-size: 15px}
    #header .gnb .member-menu {left: 25px; right: 25px}
    #header .gnb .member-menu li a {font-size: 14px}
    #header.sticky {height: 60px}
    #header.sticky .logo {height: 60px}

    #btn-to-top {right: -50px; width: 50px; height: 50px; font-size: 18px; line-height: 50px}
    #btn-to-top.show {right: 15px}
    
    #footer .col-logo {text-align: left; margin-bottom: 30px}
    #footer .col-info .link-items li {margin-right: 15px}
    #footer .col-info .link-items li a {font-size: 12px}
    #footer .col-info p {font-size: 12px}
    #footer .col-info p .divider:before {height: 10px; margin: 0 8px}
}