@charset "utf-8";

@import url('lib/animated.css');
@import url('lib/jquery-ui-1.10.4.custom.min.css');
@import url('lib/swiper.css');

/* ==============================
 * header
 * ============================== */
#headerWrap .headerBg { display:none; position:fixed; top:80px; left:0; right:0; z-index:10; height:230px; border-bottom:1px solid #e5e5e5; background:rgba(255,255,255,0.95)}

#header { position:fixed; top:0; left:0; z-index:100; width:100%; border-bottom:1px solid #e5e5e5; background:rgba(255,255,255,0.95)}
#header .innerBox { height:80px;}
#header .logo { position:absolute; top:50%; left:20px; transform: translateY(-50%);}
#header .logo a { display:block; width:150px; height:44px; font-size:0; background:url('../images/common/logo.png') no-repeat; background-size:100%;}
#header .gnbWrap {}
#header .gnbWrap .gnb { display:flex; height:80px; margin-left:240px; transition:all .3s ease;}
#header .gnbWrap .gnb > div { position:relative; padding:0 30px;}
#header .gnbWrap .gnb > div > a { display:flex; height:100%; align-items: center; font-size:18px; color:#999999; font-family: 'nixgon'; font-weight:bold; transition:all .3s ease;}
#header .gnbWrap .gnb > div > a.on,
#header .gnbWrap .gnb > div > a:hover { text-decoration: underline; color:#101010;}
#header .gnbWrap .gnb ul { display:none; position:absolute; top:80px; padding:15px 0;}
#header .gnbWrap .gnb li { margin-bottom:10px;}
#header .gnbWrap .gnb li a { font-size:15px; color:#101010;}
#header .gnbWrap .gnb li a.on,
#header .gnbWrap .gnb li a:hover { text-decoration: underline; font-weight:bold; letter-spacing: -0.5px;}
#header .gnbWrap .language { display:flex; position:absolute; top:0; right:20px; bottom:0; align-items: center; transition:all .3s ease;}
#header .gnbWrap .language a { font-size:15px; color:#999999; font-family: 'nixgon'; font-weight:bold;}
#header .gnbWrap .language a.on { color:#101010;}
#header .gnbWrap .language a + a { margin-left:20px;}

#header .asideGnb { position:fixed; top:0; right:0; z-index:500; width:80px; height:520px; transition:all .3s ease;}
#header .asideGnb .menuOpenClose { position:absolute; top:0; left:0; width:80px; height:80px; z-index:1; font-size:0;}
#header .asideGnb .menuOpenClose i { position:absolute; top:35px; left:50%; width:20px; height:10px; transform: translateX(-50%);}
#header .asideGnb .menuOpenClose i:before { content:''; display: block; position:absolute; top:0; left:50%; width:100%; height:2px; background:#fff; transform: translateX(-50%); transition: all .3s ease;}
#header .asideGnb .menuOpenClose i:after { content:''; display: block; position:absolute; top:100%; left:50%; width:100%; height:2px; background:#fff; transform: translate(-50%, -100%); transition: all .3s ease;}
#header .asideGnb .menu { display:block; position:relative; width:100%; height:360px; background:#274395;}
#header .asideGnb .menu span { position:absolute; bottom:42px; left:50%; font-weight:bold; font-size:13px; color:#ffffff; transform: translateX(-50%) rotate(-90deg);}

#header .asideGnb .quotation { display:block; position:relative; width:100%; height:160px; box-shadow:0 0 2px rgba(0,0,0,0.2); background:#fff;}
#header .asideGnb .quotation span { position:absolute; top:50%; left:50%; font-weight:bold; font-size:13px; color:#101010; transform: translate(-50%,-50%) rotate(-90deg);}

#header .asideGnb .gnbViewBox { visibility: hidden; position:fixed; top:0; right:0px; z-index:500; width:400px; height:100%; transform:translateX(100%); transition:all .3s ease;}
#header .asideGnb .gnbViewBox .menuView { overflow-y:auto; height:100%; padding:70px 80px 0 60px; background:#274395;}
#header .asideGnb .gnbViewBox .menuView h3 { border-bottom:1px solid #305aac;}
#header .asideGnb .gnbViewBox .menuView h3 a { display:block; position:relative; padding:30px 0; font-size:18px; font-weight:bold; color:#ffffff;}
#header .asideGnb .gnbViewBox .menuView h3 i.ico { position:absolute; top:50%; right:0; width:16px; height:16px; transform:translateY(-50%)}
#header .asideGnb .gnbViewBox .menuView h3 i.ico:before { content:''; position:absolute; top:0; left:50%; display:block; width:2px; height:100%; margin-left:-1px; background:#fff; transition:all .3s ease;}
#header .asideGnb .gnbViewBox .menuView h3 i.ico:after { content:''; position:absolute; top:50%; left:0%; display:block; width:100%; height:2px; margin-top:-1px; background:#fff;}
#header .asideGnb .gnbViewBox .menuView ul { display:none;}
#header .asideGnb .gnbViewBox .menuView li { position:relative;}
#header .asideGnb .gnbViewBox .menuView li:before { content:''; display:block; position:absolute; top:23px; left:0; width:4px; height:4px; background:#cccccc; border-radius:50%;}
#header .asideGnb .gnbViewBox .menuView li a { display:block; padding:15px 0; padding-left:14px; font-size:14px; color:#cccccc;}
#header .asideGnb .gnbViewBox .menuView li.on a { color:#fff; text-decoration: underline}

#header .asideGnb .gnbViewBox .menuView h3.on i.ico:before { transform:rotate(90deg);}
#header .asideGnb .gnbViewBox .menuView .on + ul li { animation: showBounce 1s ease both;}
#header .asideGnb .gnbViewBox .menuView .on + ul li:nth-child(1) { animation-delay: 0s;}
#header .asideGnb .gnbViewBox .menuView .on + ul li:nth-child(2) { animation-delay: 0.1s;}
#header .asideGnb .gnbViewBox .menuView .on + ul li:nth-child(3) { animation-delay: 0.2s;}
#header .asideGnb .gnbViewBox .menuView .on + ul li:nth-child(4) { animation-delay: 0.3s;}
#header .asideGnb .gnbViewBox .menuView .on + ul li:nth-child(5) { animation-delay: 0.4s;}
#header .asideGnb .gnbViewBox .menuView .on + ul li:nth-child(6) { animation-delay: 0.5s;}

#header .asideGnb .gnbViewBox .quotationView { visibility: hidden; overflow-y:auto; position:absolute; top:0; left:100%; height:100%; width:100%; padding:30px 80px 0 60px; opacity:0; background:#fff; transition:all .3s ease; box-shadow:0 0 2px rgba(0,0,0,0.2);}
#header .asideGnb .gnbViewBox .quotationView.on { visibility:visible; opacity:1; left:0;}
#header .asideGnb .gnbViewBox .quotationView h2 { margin-bottom:30px; font-size:18px; color:#101010; font-weight:bold;}
#header .asideGnb .gnbViewBox .quotationView ul { border:1px solid #cccccc; border-width:1px 0;}
#header .asideGnb .gnbViewBox .quotationView li + li { border-top:1px solid #e5e5e5;}
#header .asideGnb .gnbViewBox .quotationView li a { display:flex; position:relative; width:100%; height:78px; padding-left:60px; align-items: center; font-size:16px; color:#111111; font-weight:bold;}
#header .asideGnb .gnbViewBox .quotationView li a i { position:absolute; top:50%; right:0; width:21px; height:21px; transform:translateY(-50%);}
#header .asideGnb .gnbViewBox .quotationView li a i:before { content:''; position:absolute; top:0; left:50%; display:block; width:3px; height:100%; margin-left:-1.5px; background:#e5e5e5; transition:all .3s ease;}
#header .asideGnb .gnbViewBox .quotationView li a i:after { content:''; position:absolute; top:50%; left:0%; display:block; width:100%; height:3px; margin-top:-1.5px; background:#e5e5e5; transition:all .3s ease;}

#header .asideGnb .gnbViewBox .quotationView li a:before { content:''; display:block; position:absolute; top:50%; left:0; width:35px; height:35px; transform:translateY(-50%);}
#header .asideGnb .gnbViewBox .quotationView li.ico1 a:before { background:url('../images/common/ico_quotation1.png') no-repeat; background-size:100%;}
#header .asideGnb .gnbViewBox .quotationView li.ico2 a:before { background:url('../images/common/ico_quotation2.png') no-repeat; background-size:100%;}
#header .asideGnb .gnbViewBox .quotationView li.ico3 a:before { background:url('../images/common/ico_quotation3.png') no-repeat; background-size:100%;}
#header .asideGnb .gnbViewBox .quotationView li.ico4 a:before { background:url('../images/common/ico_quotation4.png') no-repeat; background-size:100%;}

#header .asideGnb .gnbViewBox .quotationView li a:hover i:before,
#header .asideGnb .gnbViewBox .quotationView li a:hover i:after { background:#111;}
#header .asideGnb .gnbViewBox .quotationView .btn { display:block; height:60px; margin-top:60px; line-height:60px; text-align:center; font-size:16px; color:#fff; font-weight:bold; background:#2fac66;}

#header .asideGnb.on { right:400px;}
#header .asideGnb.on .menuOpenClose i:before { top:50%; transform-origin: 50% 50%; transform: translate(-50%, -50%) rotate(45deg);}
#header .asideGnb.on .menuOpenClose i:after { top:50%; transform-origin: 50% 50%; transform: translate(-50%, -50%) rotate(-45deg);}

#header .asideGnb.on .gnbViewBox { visibility:visible; transform:translateX(0%);}


/* main */
.main #header { border-bottom:1px solid rgba(255,255,255,0.1); background:none; transition: all .3s ease;;}
.main #header .logo a { background:url('../images/common/logo_main.png') no-repeat; background-size:100%;}
.main #header .gnbWrap .gnb > div > a { color:#ffffff;}
.main #header .gnbWrap .gnb > div > a.on,
.main #header .gnbWrap .gnb > div > a:hover { color:#fff; text-decoration: underline;}
.main #header .gnbWrap .language a.on { color:#fff;}
.hover #header,
.scrollBg #header { background:rgba(255,255,255,0.95)}
.hover #header .logo a,
.scrollBg #header .logo a { background:url('../images/common/logo.png') no-repeat; background-size:100%;}
.hover #header .gnbWrap .gnb > div > a,
.scrollBg #header .gnbWrap .gnb > div > a { color:#999999;}
.hover #header .gnbWrap .gnb > div > a.on,
.hover #header .gnbWrap .gnb > div > a:hover,
.scrollBg #header .gnbWrap .gnb > div > a.on,
.scrollBg #header .gnbWrap .gnb > div > a:hover { color:#101010; text-decoration: underline;}
.hover #header .gnbWrap .language a.on,
.scrollBg #header .gnbWrap .language a.on { color:#101010;}


@media screen and (max-width: 1500px) {
    #header .gnbWrap .language {right:100px;}
}

@media screen and (max-width: 1360px) {

    #header .asideGnb .menuOpenClose { background:#111;}

    #header .asideGnb { height:80px;}
    #header .asideGnb .menu { left:80px; width:180px; height:80px;}
    #header .asideGnb .menu span { display:block; position:static; transform:none; line-height:80px; text-align:center; font-size:15px;}
    #header .asideGnb .quotation { position:absolute; top:0; left:260px; width:180px; height:80px;}
    #header .asideGnb .quotation span { display:block; position:static; transform:none; line-height:80px; text-align:center; font-size:15px;}

    #header .asideGnb .gnbViewBox { top:80px; width:360px;}
    #header .asideGnb .gnbViewBox .menuView,
    #header .asideGnb .gnbViewBox .quotationView { height:calc(100% - 80px)}

    #header .asideGnb .gnbViewBox .menuView { padding:30px}

    #header .asideGnb .gnbViewBox .quotationView { padding:60px 30px;}

    #header .asideGnb.on { right:360px;}
}

@media screen and (max-width:1200px) {
    #header .gnbWrap .gnb { margin-left:200px;}
}

@media screen and (max-width:1024px) {
    #header .gnbWrap .gnb { display:none;}
}

@media screen and (max-width:767px) {
    #header .innerBox { height:60px;}
    #header .logo a { width:130px; height:38px;}
    #header .gnbWrap .language { right:75px;}

    #header .asideGnb { width:60px; height:60px;}
    #header .asideGnb .menuOpenClose { width:60px; height:60px; background:#111;}
    #header .asideGnb .menuOpenClose i { top:25px;}

    #header .asideGnb .menu { position:absolute; top:0; left:60px; width:130px; height:60px;}
    #header .asideGnb .menu span { line-height:60px; font-size:13px;}
    #header .asideGnb .quotation { position:absolute; top:0; left:190px; width:130px; height:60px;}
    #header .asideGnb .quotation span { line-height:60px; font-size:13px;}

    #header .asideGnb .gnbViewBox { top:60px; width:260px;}
    #header .asideGnb .gnbViewBox .menuView,
    #header .asideGnb .gnbViewBox .quotationView { height:calc(100% - 60px)}

    #header .asideGnb .gnbViewBox .menuView { padding:30px}
    #header .asideGnb .gnbViewBox .menuView h3 a { padding:18px; font-size:15px;}
    #header .asideGnb .gnbViewBox .menuView li a { padding:13px; font-size:13px;}
    #header .asideGnb .gnbViewBox .menuView li:before { top:21px;}

    #header .asideGnb .gnbViewBox .quotationView { padding:30px;}
    #header .asideGnb .gnbViewBox .quotationView h2 { font-size:15px; margin-bottom:20px;}
    #header .asideGnb .gnbViewBox .quotationView li a { height:65px; font-size:14px;}
    #header .asideGnb .gnbViewBox .quotationView .btn { margin-top:30px; height:50px; line-height:50px; font-size:14px;}

    #header .asideGnb.on { right:260px;}

}



/* ==============================
 * footer
 * ============================== */
#footerWrap { position:relative; z-index:50; background:#101010;}
#footer { padding:110px 0;}
#footer .btnTop { position:absolute; bottom:80px; right:20px; width:24px; height:30px; font-size:0; background:url('../images/common/btn_top.png') no-repeat;}
#footer h1 { font-size:20px; color:#ffffff;}
#footer .address { margin-top:20px; font-size:14px; color:#999999; line-height:1.57}
#footer .email {}
#footer .email a { font-size:14px; color:#1442f0;}
#footer .copy { margin-top:60px; font-size:14px; color:#ffffff; text-transform: uppercase;}

@media screen and (max-width:767px) {
    #footer { padding:60px 0;}
    #footer .btnTop { bottom:auto; top: 142px;}
    #footer h1 { font-size:18px;}
    #footer .address { margin-top:15px; font-size:12px;}
    #footer .email a { font-size:12px;}
    #footer .copy { margin-top:40px; font-size:12px;}
}