@charset "utf-8";
/*
 * Name     : layout.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2020-05-13
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. Body
    02. Header
    03. Footer
    04. Media queries
---------------------------------------------------
*/

/* ------------------------------
 * Body
------------------------------ */
body {overflow-x: hidden}

/* ------------------------------
 * Page loader
------------------------------ */
#page-loader {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f7f7f7; z-index: 9990}
#page-loader .loader-stage {position: relative; display: flex; width: 300px; height: 100%; margin: auto; justify-content: center; align-items: center; overflow: hidden}
#page-loader .dot-floating {color: #4263eb; background-color: #4263eb}
#page-loader .dot-floating:before, #page-loader .dot-floating:after {color: #4263eb; background-color: #4263eb}

/* ------------------------------
 * Header
------------------------------ */
#header {position: fixed; top: 0; left: 0; bottom: 0; width: 200px; padding-top: 100px; border-right: 1px solid #eaeaea; background-color: #fff; z-index: 1030}
#header .logo {position: absolute; top: 40px; left: 50%; transform: translateX(-50%)}
#header .logo a {position: relative; width: 140px}
#header .nav-for-pc {position: relative; height: calc(100% - 260px); overflow: hidden}
/* ------------------------------
 * Header
 * #header .nav-for-pc:after {content: ''; position: absolute; display: block; left: 0; bottom: 0; right: 0; height: 60px; background-image: linear-gradient(180deg, hsla(0,0%,100%,0) 0, rgba(255,255,255,.3) 75%, #fff); z-index: 20}
------------------------------ */
#header .nav-for-pc:after {content: ''; position: absolute; display: block; bottom: 0; right: 0; height: 60px; background-image: linear-gradient(180deg, hsla(0,0%,100%,0) 0, rgba(255,255,255,.3) 75%, #fff); z-index: 20}
#header .nav-for-pc > ul {height: 100%; margin-right: -17px; padding-bottom: 80px; overflow-y: auto}
#header .nav-for-pc > ul > li {position: relative; z-index: 10}
#header .nav-for-pc > ul > li > a {position: relative; display: block; font-weight: 600; color: #333; white-space: nowrap; padding: 18px 28px; border-bottom: 1px solid #f0f0f0; background-color: #fff; z-index: 5; transition: color 0.1s, border-color 0.1s, background-color 0.1s}
#header .nav-for-pc > ul > li > a > i {font-size: 22px; color: #343a40; vertical-align: -1px; transition: color .3s, padding .3s ease-in-out}
#header .nav-for-pc > ul > li > a > img {display:inline-block; width:22px; vertical-align: middle}
#header .nav-for-pc > ul > li:first-child > a {border-top: 1px solid #f0f0f0}
#header .nav-for-pc > ul > li.has-child-menu > a:after {content: '\e913'; position: absolute; right: 20px; font-family: 'xeicon'; font-size: 18px; opacity: 0; transition: opacity 0.3s ease-out, transform 0.3s ease-out}
#header .nav-for-pc > ul > li > a span {position: relative; display: inline-block; margin-left: 16px; vertical-align: middle; transition: color .15s}
#header .nav-for-pc > ul > li > a span:before {content: ''; display: block; position: absolute; bottom: 6px; left: -3px; width: 0; height: 5px; background-color: #4263eb; opacity: .2; z-index: -1; transition: width 0.3s ease-out}
#header .nav-for-pc > ul > li:hover > a span:before, #header .nav-for-pc > ul > li.open > a span:before, #header .nav-for-pc > ul > li.active > a span:before {width: 120%}
#header .nav-for-pc > ul > li.open > a span, #header .nav-for-pc > ul > li.active > a span, #header .nav-for-pc > ul > li.open > a > i, #header .nav-for-pc > ul > li.active > a > i {color: #4263eb}
#header .nav-for-pc > ul > li.has-child-menu.on > a:after, #header .nav-for-pc > ul > li.has-child-menu.active > a:after {opacity: 1; transform: rotate(180deg)}
#header .nav-for-pc > ul > li > .subnav {display: none; border-bottom: 1px solid #eaeaea}
#header .nav-for-pc > ul > li > .subnav > li > a {display: block; font-size: 15px; color: #555; padding: 15px 20px 15px 30px; background-color: #f8f9fa}
#header .nav-for-pc > ul > li > .subnav > li > a:hover, #header .nav-for-pc > ul > li > .subnav > li.active > a {font-weight: 700}
#header .bottom-info {position: absolute; bottom: 50px; left: 0; right: 0}
#header .bottom-info .company-info {padding: 0 20px}
#header .bottom-info .company-info address {font-size: 13px; color: #868e96; line-height: 1.6; margin-bottom: 10px}
#header .bottom-info .company-info ul {margin-bottom: 15px}
#header .bottom-info .company-info ul li {font-size: 13px; color: #868e96; line-height: 1.6}
#header .bottom-info .company-info ul li strong {font-weight: normal; color: #212529; margin-left: 3px}
#header .bottom-info .company-info p {font-size: 12px; color: #868e96; letter-spacing: 0; line-height: 1.6; text-align: center}

/* ------------------------------
 * Footer
------------------------------ */
#footer {padding: 60px 0 80px; background-color: #343a40}
#footer .menu-items {font-size: 0}
#footer .menu-items li {display: inline-block; font-size: 13px; padding: 0 10px}
#footer .menu-items li a {font-weight: 500; color: #ececec}
#footer address {font-size: 13px; color: #aeaeae; line-height: 1.8}
#footer address span {display: inline-block; padding: 0 6px}
#footer address span b {color: #d4d4d4}
#footer .copy {font-size: 13px; color: #aeaeae; letter-spacing: 0.05rem}

/* ------------------------------
 * Quick menu
------------------------------ */
#quick-menu {display: block; position: fixed; bottom:7%; right: 20px; width: 220px; text-align: center; z-index: 9999; transition:all 0.6s ease}
#quick-menu.closeQuick {right:-220px} 
.quick {position:relative}
.quick .quick-btn {position:absolute; top:0; left:-40px}
.quick .quick-btn a {display:block; width:40px; height:40px; line-height:38px; background-color:#f9f9f9; font-size:14px; color:#000}
.quick .quick-btn a i {display:block; transition:all 1s ease}
#quick-menu.closeQuick .quick .quick-btn a i {transform: rotate(180deg)}
.quick .quick_box { background:rgba(0, 0, 0, 0.7); border:#4766ec 5px solid; padding:30px 20px; text-align:left; margin-bottom:5px; } 
.quick .tit { font-size: 16px; color:#fff; margin-bottom:0; } 
.quick .tel { font-size:21px; color:#64e0ff; font-weight:700; margin-bottom:10px; } 
.quick .normal { font-size:15px; color:#fff; margin-bottom:10px; } 
.quick .qr { margin-bottom:10px; } 
.quick .qr a { display:inline-block; background:#4766ec; padding:3px 20px; border-radius:60px; font-size:12px; color:#fff; } 
.quick .input { margin-bottom:5px; } 
.quick .input input.input_new { width:100%; height:30px; padding:0 5px; font-size:14px; color:#999; line-height:30px; border:0; } 
.quick .submit input.quick_applybtn { width:100%; height:40px; border:0; background:#4766ec; font-size:15px; color:#fff; } 
.quick .fast_qna { margin-bottom:5px; } 
.quick .fast_qna a { display:block; background:#333; width:100%; height:50px; font-size:17px; color:#fff; line-height:50px; text-align:center; } 
.quick .kakao_chat a { display:block; background:#ffe900; width:100%; height:50px; font-size:17px; color:#3c2f34; line-height:50px; text-align:center; } 
.quick .kakao_chat a span { padding-right:10px; line-height:50px; } 
.quick .kakao_chat a span img { vertical-align:middle; } 
.quick .cont { color: #fff; font: 700px; font-size: 18px; line-height: 1; padding: 20px 0; } 
.m_quick_wr {display:none}

/* ------------------------------
 * sns btn
------------------------------ */
.sns-btn {position:fixed; top:50px; right:50px; z-index:2000}
.sns-btn > ul {font-size:0}
.sns-btn > ul li {display:inline-block; padding:0 5px}
.sns-btn > ul li a {display:block; font-size:22px; width:50px; height:50px; line-height:46px; background-color:#4d4d4d; color:#fff; text-align:center; border-radius:50px; transition:all 0.3s ease}
.sns-btn > ul li:hover a {background-color:#4263eb}

.sns-btn > ul li a p {font-size:22px; width:50px; height:50px; line-height:46px; background-color:#FC9400; color:#fff; text-align:center; border-radius:50px; transition:all 0.3s ease}
/* ------------------------------
 * Media queries
 .sns-btn-mobile > ul li:hover a img {  background: url('/default/img/onepixel/images/icon_download_on.png');}
------------------------------ */
@media (min-width: 992px) {
    #header .hamburger-button {display: none}
    main {padding-left: 200px}
}

@media (max-width: 991px) {
    #quick-menu {display:none}
    .m_quick_wr {display:block; position:fixed; bottom:10px; right: 5%; z-index:2000}
    .m_quick_wr ul li {margin-bottom: 10px;width: 60px;box-shadow:0 0 5px #666;border-radius:100px;}
    .m_quick_wr ul li a {display: block;}
    .m_quick_wr ul li img {width: 100%;}
    .sns-btn-pc {display:none}
    .sns-btn-mobile {position:static; left:auto; right:auto; bottom:auto; top:auto; margin-top:30px}
    .sns-btn-mobile > ul li a {width:40px; height:40px; line-height:38px; font-size:18px; background-color:#4263eb}
	.sns-btn-mobile > ul li a p {width:40px; height:40px; line-height:38px; font-size:18px; background-color:#FC9400}
	
	 
	

    .sns-btn-mobile > ul li:hover a {background-color:#233a9b}
    #header {width: 100%; height: 60px; padding-top: 0; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: top .25s, box-shadow .25s}
    #header .logo {top: 50%; transform: translate(-50%,-50%)}
    #header .hamburger-button {position: absolute; top: 50%; left: 15px; width: 20px; height: 16px; margin-top: -8px; padding: 0; border: 0; background-color: transparent; outline: 0}
    #header .hamburger-button > span {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 1px; background-color: #000; transition: all .45s ease}
    #header .hamburger-button > span:nth-child(1) {left: 0}
    #header .hamburger-button > span:nth-child(2) {top: 50%; margin-top: -1px}
    #header .hamburger-button > span:nth-child(3) {top: auto; bottom: 0}
    #header .mobile-nav .backdrop {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.65); z-index: 5}
    #header .mobile-nav .nav-body {position: fixed; top: 0; left: -280px; bottom: 0; width: 280px; background-color: #fff; z-index: 10; transition: left .45s cubic-bezier(.77,0,.17,1)}
    #header .mobile-nav .nav-body header {position: relative; padding: 28px 18px 16px 36px; text-align: right}
    #header .mobile-nav .nav-body header .button-close {width: 40px; height: 40px; font-size: 24px; color: #212529; line-height: 1; margin-top: -8px; padding: 0; border: 0; background-color: transparent; outline: 0}
    #header .mobile-nav .nav-body .body {padding: 40px 36px; height: calc(100% - 130px); overflow-y: auto}
    #header .mobile-nav .nav-body .body > ul > li > a {position: relative; display: block; font-size: 20px; font-weight: 600; color: #212529; padding: 10px 0}
    #header .mobile-nav .nav-body .body > ul > li.has-child-items > a:after {content: '\e941'; position: absolute; top: 50%; right: 0; font-family: 'xeicon'; font-size: 16px; font-weight: normal; color: #333; margin-top: -11px; transition: transform .3s}
    #header .mobile-nav .nav-body .body > ul > li > .subnav {display: none; padding-top: 10px; padding-bottom: 14px}
    #header .mobile-nav .nav-body .body > ul > li > .subnav > li + li {margin-top: 12px}
    #header .mobile-nav .nav-body .body > ul > li > .subnav > li > a {font-size: 16px; font-weight: 300; color: #495057; letter-spacing: -1px}
    #header .mobile-nav .nav-body .body > ul > li > .subnav > li > a:before {content: '- '; color: #aaa}
    #header .mobile-nav .nav-body .body > ul > li > .subnav > li.active > a {font-weight: 500; color: #4263eb}
    #header .mobile-nav .nav-body .body > ul > li.open > a, #header .mobile-nav .nav-body .body > ul > li.active > a {color: #4263eb}
    #header .mobile-nav .nav-body .body > ul > li.has-child-items.open > a:after {transform: rotate(180deg)}
    #header.nav-up {top: -60px}
    #header.nav-open .hamburger-button > span:nth-child(1) {top: 50%; transform: rotate(45deg)}
    #header.nav-open .hamburger-button > span:nth-child(2) {opacity: 0}
    #header.nav-open .hamburger-button > span:nth-child(3) {top: 50%; bottom: auto; transform: rotate(-45deg)}
    #header.nav-open .mobile-nav .nav-body {left: 0}

    main {padding-top: 60px}
}

@media (max-width: 767px) {
    html, body {font-size: 14px}
    main {overflow-x: hidden}
}