@charset "utf-8";

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

/* 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: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}



/* 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}

#footer
{padding:50px 0px; background:#f5f4f4;}
#footer .container
{max-width:1400px; margin: 0 auto; padding:0px; width:100%;}
#footer .f_logo
{background:url('../images/f_logo.gif') no-repeat; width:113px; height:41px; float:left; width:20%; margin-top:40px;}
#footer .info .policy
{margin-bottom:20px;}
#footer .info .policy a
{font-size:16px; color:#6d6d6d}
#footer .info
{line-height:100%; text-align:left; width:55%; float:left;}
#footer .info p
{color:#636363; line-height:130%; font-size:15px;}
#footer .info p span
{color:#636363; opacity:1; margin:0px; margin-right:8px;}
#footer .info p + p
{margin-top:0px;}
#footer .info p.copy
{color:#bbbbbb; font-size:16px; margin-top:25px;}
#footer .f_customer
{background:url('../images/f_customer.png'); width:274px; height:154px; float:right;}
#footer .f_customer-e
{background:url('../images/f_customer-e.png'); width:274px; height:154px; float:right;}
#footer .info a
{color:#636363;}

@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%; width:760px; margin-left:-380px; font-size:0}
    #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:#067de8 !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:#0d0c56}
    #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:#067de8}
    #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:#6c98ff}
    #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:#6c98ff}
    #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:#6c98ff}
    #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}
}

@media (max-width:767px) {
    #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}
}



#header
{background:rgba(0,0,0,0.4); height:95px;}
#header .logo
{top : 30px; width:97px; height:35px; left:100px;}
#header .gnb
{width:1025px; margin-left:-480px;}
#header .gnb > li > a
{height:95px; line-height:100px; padding:0 40px; font-family:'Spoqa Han Sans'; font-size:19px;}




#header .right_menu
{position:absolute; right:30px; top : 36px;}
#header .right_menu > a
{color:white; display : inline-block; font-size:15px;}
#header .right_menu .contact
{margin-right:15px; float:left; margin-top:3px;}
#header .right_menu li
{list-style : none; display : inline-block;}
#header .right_menu > li > a
{color:white; padding:2px 20px; border:1px solid white; display : inline-block; font-size:14px;}
#header .right_menu li ul.lan
{display : none; background:#0c0b59; text-align:center;}
#header .right_menu li ul.lan a
{font-size:14px; color:white;  padding:2px 21px; display : inline-block;}
#header .right_menu li ul.lan:hover 
{background:#131272;}



#header.sticky .logo
{top : 10px;}
#header.sticky .right_menu
{top:15px;}
#header.sticky .right_menu > a
{color:#333;}
#header.sticky .right_menu > li > a
{color:#333; border:1px solid #333;}


#header.is-active .right_menu > a
{color:#333;}
#header.is-active .right_menu > li > a
{color:#333; border:1px solid #333;}



@media screen and (max-width:414px){
    #header .logo
    {left:15px;}
    #header .gnb
    {width:100%; margin-left:0px; padding:0px;}
    #header .gnb li.has-child-menu
    {border-bottom:1px solid #ddd;}
    #header .gnb > li > a
    {height:auto; line-height:40px; padding:0px 10px; font-size:16px;}
    #header .right_menu
    {position:relative; right:0px; top:20px; text-align:center;}
    #header .right_menu > a
    {display : none;}
    #header .right_menu > li > a
    {color:#333; border-color:#333;}
    #header nav .mobile-header
    {border-color:#ddd; background:white; text-align:center;}


    #footer .f_logo
    {width:113px; margin:0 auto; float:none;}
    #footer .info
    {width:100%; margin-top : 30px; padding:0px 20px;}
    #footer .info .policy
    {padding-bottom:10px;  margin-bottom:10px; border-bottom:1px solid #6d6d6d}
    #footer .info .policy a
    {color:#343434; padding: 0px 10px; font-size:15px;}
    #footer .info p
    {line-height:180%;}
    #footer .info p.copy
    {margin-top:10px;}
    #footer .f_customer
    {float:none; display : inline-block;; margin-top:30px;}




    #header .gnb > li.is-active > a, #header .gnb > li.is-open > a
    {color:#0c0b59;}
    #header .gnb > li > .subnav > li.is-active > a
    {color:#0c0b59;}

}