:root {
    /* Color */
    --color-white: #ffffff;
    --color-dark-grey: #636363;
    --color-grey: #8a8a8a;
    --color-light-grey: #d1d1d1;
    --color-light-yellow: #fffd9bfd;
    --color-yellow: #ffcc00;
    --color-dark-yellow: #f37321;
    --color-orange: #ff813e;
    --color-light-red: #f00000;
    --color-red: #db0d11;
    --color-dark-red: #b50000;
    --color-light-black: #202020;
    --color-black: #000000;
}

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

/* ------------------------------
 * commontopmenu
------------------------------ */
#commontopmenu {background: #fafafa; width: 100%; position: fixed; z-index:2000; height: 28px;}
.commontopmenu_wrap {display: flex; justify-content: space-between; height: 28px;  line-height: 28px;}
.commontopmenu_left { display: flex; justify-content: left;}
.commontopmenu_left a {width: 100px; display: block; font-size: 14px; color: var(--color-light-black); text-align: center;}
.commontopmenu_left a:first-child {border-bottom:1px solid rgba(156, 156, 156, 0.15); color: var(--color-orange); background: var(--color-white);}
.commontopmenu_left a:last-child {background: var(--color-light-black); color: var(--color-white);}
.commontopmenu_right {margin-right: 32px;}
.commontopmenu_right a {font-size: 14px; margin-right: 8px;}

/* ------------------------------
 * header
------------------------------ */
#header {position:fixed; top:28px; 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:180px; 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}
#header .member-nav {border-radius: 30px; font-size: 14px;  text-align:center; color: var(--color-white); line-height: 26px; background: var(--color-orange); display: block; width: 120px; height: 30px; border: 1px solid var(--color-orange);}

/* ------------------------------
 * footer
------------------------------ */
#footer {
    background-color:var(--color-light-black);
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 40px;
}
.footertop {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footertop ul {
    display: flex;
    justify-content: center;
    text-align: center;
}
.footertop a{
    color: var(--color-white);
    font-weight: 100;
    font-size: 14px;
}
.footertop ul li::after {
    content: '|';
    padding-left: 10px;
    padding-right: 10px;
}
.footertop ul li:last-child::after {
    content: none;
}
.footer_logo {
    width: 180px;
    margin: 20px auto;
}
.footer_logo img {
    width: 100%;
}

.footerinfo {
    color: var(--color-white);
    font-size: 14px;
    font-weight: 100;
}
.footersns i {
    color: var(--color-white);
    font-size: 36px;
    padding: 20px 10px;
}
.footercopy {
    color: var(--color-white);
    font-size: 12px;
    font-weight: 100;
}


/* ------------------------------
 * 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: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:var(--color-orange) !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:var(--color-orange)}
    #header .member-nav {position:absolute; top:20px; right:32px; text-align:center;}    
    #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:var(--color-orange)}
    #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}
}

@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}
    #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:#ff9558}
    #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:#ff9558}
    #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:#ff9558}
    #header .member-nav {margin: 0 auto;}
    #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_mb {margin-bottom: 80px;}
}

@media (max-width:767px) {
    .footer_logo {display: none;}
    .footerinfo {padding-top: 8px; font-size: 12px;}
    .footersns i {font-size: 30px; padding: 10px 5px;}
    .footercopy {font-size: 10px;}
    .footer_mb {margin-bottom: 50px;}
}