@charset "utf-8";

/* =========================================================================================
 * INIT
 * ========================================================================================= */
/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,400,500');*/
@import url(./notosanskr_v8.css);
@import url(../vendor/fontawesome-5.5.0/css/all.min.css);

table { border-collapse: collapse; border-spacing: 0; }
td, th, blockquote, pre { margin: 0; padding: 0; }
input, select, textarea, label { vertical-align: middle; }
img { border: 0; vertical-align: middle; }
caption { display: none; }
address, caption { font-weight:normal; font-style:normal; }
p { margin: 0 0 10px; }

html { font-size: 62.5%; } /* rem / max-width: 1200px */
body { font-family: 'Noto Sans KR', sans-serif; font-size: 14px; line-height: 1.428571429; }
/*@media (max-width: 767px) { body { font-family: sans-serif; } }*/
a { text-decoration: none; }
a { color: #333333; }
a:hover,a:active,a:focus { color: #90bf39; text-decoration: none; }

@media (max-width: 767px) {
    body * { max-height: 1000000em; } /* 안드로이드 크롬에서 폰트 크기 안 먹는 문제처리(font boosting) */
}
@-ms-viewport { width : auto! important; } /* ie11에서 스크롤바에 내용 가림 방지 */

/* =========================================================================================
 * Header
 * ========================================================================================= */
.body-wrap {
    overflow:hidden;
}

.top-header {
    position: fixed;
    left:0px;
    top:0px;
    width:100%;
    /*background-color: #fff;*/
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 1px 0px #eee;
    padding:25px 0px;
    z-index:999;
    transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -ms-transition:all 1s ease;
    -o-transition:all 1s ease;
    -moz-transition:all 1s ease;
}
.top-header.header-small {
    padding:10px 0px;
    background-color: #fff;
}

.top-header .logo {
    float: left;
}

.top-header .logo > span {
    position: relative;
}

.top-header .logo > a {
    display: inline-block;
}
.top-header .logo .logo-img {
    display: inline-block;
    margin-top: 2px;
    width: 130px;
    height: 31px;
    background-image: url('/img/logo_text.png');
    background-repeat: no-repeat;
    background-size: 100%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.top-header .logo .logo-vender {
    display: inline-block;
    position: absolute;
    bottom: 4px;
    right: -120px;
    padding: 1px 3px;
    border-top: 1px solid #82293a;
    border-bottom: 1px solid #82293a;
    color: #82293a;
    font-size: .9em;
}
@media (min-width: 768px) {
    .body-wrap[data-page="index"] .top-header .logo .logo-vender {
        border-top: 1px solid #888;
        border-bottom: 1px solid #888;
        color: #d0d0d0;
    }
}

.gnb {
    position:relative;
    float:right;
    padding:0px 0px;
    margin-right: 0px;
    transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -ms-transition:all 1s ease;
    -o-transition:all 1s ease;
    -moz-transition:all 1s ease;
}
.top-header.header-small .gnb {
    margin-right: 0px;
}

.top-header.header-small .logo img {
    width: 110px;
    margin-top: 5px;
}

.gnb .navbar-nav {
    margin: 0px;
}

.gnb .navbar-nav > li {
    position: relative;
    padding: 0px;
    margin-left: 5px;
}

.gnb .navbar-nav > li > a {
    position: relative;
    display: block;
    padding: 9px 20px;
    font-size: 15px;
    font-weight: 400;
    color:#333;
    opacity: 1;
    z-index: 2;
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}

.gnb .navbar-nav > li:after {
    content:'';
    position:absolute;
    left:10%;
    bottom:-1px;
    width:80%;
    height:1px;
    background:#90bf39;
    z-index:1;
    opacity:0;
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}

/*.gnb .navbar-nav > li:hover:after,*/
.gnb .navbar-nav > li.active:after {
    opacity:1;
}

.gnb .navbar-nav > li > a:hover,
.gnb .navbar-nav > li > a:active,
.gnb .navbar-nav > li > a:focus,
.gnb .navbar-nav > li > a:visited {
    background:none;
}

.gnb .navbar-nav > li:hover > a,
.gnb .navbar-nav > li.active > a,
.gnb .navbar-nav > li > ul > li:hover > a {
    color:#333;
    opacity:1;
}

.gnb .submenu, .gnb .submenu > li {
    list-style:none;
    padding:0px;
    margin:0px;
}

.gnb .submenu {
    position:absolute;
    left:-40px;
    top:200%;
    width:180px;
    padding:0px;
    border:1px solid rgba(0,0,0,0.1);
    border-top-color: #90bf39;
    z-index:100;
    background: rgba(255,255,255,1);
    visibility:hidden;
    opacity:0;
    border-radius: 0px;
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}

.gnb .dropdown:nth-of-type(2) .submenu {
    width:215px; left: -40px;
}
.gnb .dropdown:nth-of-type(3) .submenu {
    width:320px; left: -80px;
}
body:lang(en) .gnb .dropdown:nth-of-type(2) .submenu {
    width:285px;
}
body:lang(en) .gnb .dropdown:nth-of-type(3) .submenu {
    width:400px; left: -130px;
}

.gnb .navbar-nav > li:hover > ul {
    top:100%;
    opacity:1;
    visibility:visible;
}

.gnb .submenu > li.dropdown:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content:'\f0da';
    position:absolute;
    right:7px;
    top:9px;
    width:20px;
    height:20px;
    display:block;
    color:#999;
    line-height:20px;
    font-size:16px;
    text-align:center;
    z-index:5;
}

.gnb .submenu > li {
    position:relative;
    float:none;
    width:100%;
    border-bottom:1px solid #f7f7f7;
}

.gnb .submenu > li:last-child {
    border:none;
}

.gnb .submenu > li > a {
    position:relative;
    display:block;
    padding:8px 20px;
    font-weight:normal;
    font-size:14px;
    color:#333;
    word-wrap:break-word;
    text-decoration: none;
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}

.gnb .submenu > li:hover > a {
    padding-left:25px;
    background-color: #f7f7f7;
}

.gnb .submenu > li > a.menu-mark, .gnb .submenu > li:hover > a.menu-mark {
    padding-left:20px;
    background-color: #efefef;
}

.gnb .submenu > li > a.menu-mark:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content:'\f03b';
    position:absolute;
    right:7px;
    top:9px;
    width:20px;
    height:20px;
    display:block;
    color:#999;
    line-height:20px;
    font-size:16px;
    text-align:center;
    z-index:5;
}

.gnb .submenu > li > ul {
    position:absolute;
    left:150%;
    top:0px;
    width:220px;
    padding:0px;
    border:1px solid rgba(0,0,0,0.1);
    z-index:100;
    background:#90bf39;
    visibility:hidden;
    opacity:0;
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}

.gnb .submenu > li:hover > ul {
    left:100%;
    opacity:1;
    visibility:visible;
}

.gnb .submenu > li > ul > li {
    position:relative;
    float:none;
    width:100%;
    border-bottom:1px solid rgba(0,0,0,0.1);
}

.gnb .submenu > li > ul > li:last-child {
    border:none;
}

.gnb .submenu > li > ul > li > a {
    position:relative;
    display:block;
    padding:8px 20px;
    font-weight:normal;
    font-size:14px;
    color:#333;
    word-wrap:break-word;
    text-decoration: none;
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}

.gnb .submenu > li > ul > li:hover > a {
    padding-left:25px;
}

.top-header .bars {
    position:absolute;
    right:-25px;
    top:-25px;
    padding:22px 23px 15px 8px;
    background:#90bf39;
    min-height:93px;
    color:#fff;
    font-size:13px;
    line-height:2em;
    transform:skewX(45deg);
    -webkit-transform:skewX(45deg);
    -ms-transform:skewX(45deg);
    -o-transform:skewX(45deg);
    -moz-transform:skewX(45deg);
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}

.top-header .bars .restore-bars {
    position:relative;
    padding:10px;
    transform:skewX(-45deg);
    -webkit-transform:skewX(-45deg);
    -ms-transform:skewX(-45deg);
    -o-transform:skewX(-45deg);
    -moz-transform:skewX(-45deg);
}

.top-header.header-small .bars {
    padding:22px 20px 15px 5px;
}

.top-header .bars a {
    color: #fff;
    opacity: 1;
}
.top-header .bars a:hover {
    opacity: 0.8;
}

.top-header .bars span {
    text-transform:uppercase;
}

.top-header .bars .fa {
    font-size:18px;
    padding:0px 15px;
    opacity:0.70;
}

.top-header .navbar-header {
    margin-right: 0;
}

@media (min-width: 1230px) and (max-width: 1350px) {
    .gnb {
        margin-right: 10px;
    }
}

@media (max-width: 1230px) {
    .gnb {
        margin-right:0px;
    }
}

@media (max-width: 1023px) {
    .gnb .navbar-nav > li {
        margin-left:10px;
    }

    .gnb .navbar-nav > li > a {
        padding:8px 12px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gnb,
    .top-header .logo {
        float:none;
        width:100%;
        text-align:center;
    }

    .top-header.header-small .logo img {
        width: 130px;
    }

    .gnb .navbar-nav > li {
        float:none;
        display:inline-block;
        margin:0px 5px;
    }

    .gnb .navbar-collapse .navbar-right {
        float:none;
        width:100%;
        padding-top:20px;
    }

    .gnb .navbar-nav > li > a {
        padding-left:15px;
        padding-right:15px;
    }

    .gnb .navbar-nav li a{
        text-align:left;
    }

    .gnb .submenu {
        /* 서브메뉴 너무 길어 안 보임 */
        height: auto;
        max-height:670px;
        overflow-y:auto;
    }
}

@media (max-width: 767px) {
    .top-header {
        padding: 15px 0;
        background-color: #fff;
    }

    .top-header.header-small {
        /*position:relative;*/
    }

    .top-header .logo .logo-img, .top-header.header-small .logo .logo-img {
        width: 100px;
        height: 24px;
        margin-top: 5px;
    }

    .top-header .logo .logo-vender {
        padding: 1px;
        right: -88px;
        font-size: .8em;
        letter-spacing: -.05em;
    }

    .gnb {
        float:none;
        width:100%;
        margin:0px;
    }

    .navbar-toggle {
        margin:0px 0px 0px 0px;
        padding: 2px 25px 0 0;
    }

    .navbar-toggle > i {
        font-size: 28px;
        color:#777;
    }

    .gnb .collapse,
    .gnb .collapse.in,
    .gnb .collapsing {
        max-height:none;
        overflow:hidden;
        padding:0px;
        border:1px solid rgba(0,0,0,0.1);
        border-bottom: 0;
        margin:10px 0px;
        width:100%;
        border-radius:3px;
        -ms-border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        -o-border-radius:3px;
    }

    .gnb .navbar-nav > li {
        margin:0px;
    }

    .gnb .navbar-nav > li:after {
        display:none;
    }

    .gnb .submenu {
        /* 서브메뉴 너무 길면 모바일에서 안 보임 */
        height: auto;
        max-height:320px;
        overflow-y:auto;
    }

    .gnb .submenu,
    .gnb .submenu > li > ul {
        position:relative;
        border:none;
        visibility:visible;
        opacity:1;
        display:none;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        width:100%;
        background:none;
        border-radius:0px;
        -webkit-border-radius:0px;
        -ms-border-radius:0px;
        -o-border-radius:0px;
        -moz-border-radius:0px;
    }

    .gnb .submenu > li.dropdown:before,
    .gnb .navbar-nav > li.dropdown:before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content:'\f0d7';
        position:absolute;
        right:7px;
        top:9px;
        width:20px;
        height:20px;
        display:block;
        color:#999;
        line-height:20px;
        font-size:16px;
        text-align:center;
        z-index:5;
    }

    .gnb .dropdown:nth-of-type(3) .submenu {
        width:100% !important;
    }

    .gnb .submenu,
    .gnb .submenu > li > ul {
        border-top: 1px solid rgba(0,0,0,0.1) !important;
    }

    .gnb .navbar-nav > li,
    .gnb .submenu > li,
    .gnb .submenu > li > ul > li {
        /*background-color: #f5f5f5;*/
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .gnb .navbar-nav > li > a,
    .gnb .submenu > li > a,
    .gnb .submenu > li > ul > li > a {
        padding:9px 10px;
        line-height:22px;
    }

    .gnb .submenu > li > a {
        /*text-indent: 15px;*/
        padding-left: 20px;
    }

    .gnb .submenu > li > ul > li > a {
        text-indent: 30px;
    }

    .gnb .navbar-nav li:hover > ul {
        display:block;
    }

    .gnb .submenu > li > a.menu-mark, .gnb .submenu > li:hover > a.menu-mark {
        padding-left:10px;
    }

    .gnb .submenu > li > a.menu-mark:before {
        right: 20px;
    }

    .top-header .bars, .top-header.header-small .bars {
        top:-35px;
        padding:25px 20px 10px 0px;
    }
}

@media (max-height: 400px) {
    .gnb .submenu {
        /* 서브메뉴 너무 길면 모바일에서 안 보임 (가로모드) */
        height: auto;
        max-height:100px;
        overflow-y:auto;
    }
}

/* =========================================================================================
 * Footer
 * ========================================================================================= */
footer {
    position: relative; width: 100%; margin: 0 auto; color: #888;
    background-color: #f5f5f5;
    /*background-color: rgba(255,255,255,0.6);*/
    font-size: 14px; line-height: 2.2; letter-spacing: .05em;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;

}
footer address a, footer address a:link { color: #888; }
footer address a:hover, footer address a:active, footer address a:focus { color: #888; }

.f-wrap { padding-top: 10px; padding-bottom: 10px;  }
.f-wrap .f-brand img { opacity: .35; }
.f-wrap .f-wrap-col { text-align: center; }

footer address { margin: 5px 0 5px -5px; line-height: 1.8em; }
footer address > div { display: inline; }

footer .top-link {
    position: absolute; right: 20px; top: 2px; padding: 0px;
    font-size: 28px;
    color: #90bf39;
    opacity: .8;
}
footer .top-link > i { position: relative; top: -2px; }
footer .top-link:hover, .top-link:active { opacity: 1; }

footer .w-md-br { display: none; }

body:lang(en) footer .f-wrap .f-brand { margin-top: 12px }
body:lang(en) footer .top-link { top: 12px; }

@media (max-width: 991px) {
    footer .f-brand { margin-top: 12px; }
    footer .top-link { top: 12px; }
    footer .w-md-none { display: none; }
    footer address > div { display: block; }
}
@media (max-width: 767px) {
    footer .f-brand { display: none; }
}
@media (max-width: 560px) {
    body:lang(en) footer .top-link { top: 25px; }
}
@media (max-width: 480px) {
    footer .f-brand { display: none; }
    footer .bl-480 { display: block; }
    footer .top-link { top: 25px; right: 10px; }
    body:lang(en) footer .top-link { top: 35px; }
}

/* =========================================================================================
 * 상단이미지
 * ========================================================================================= */
#slider1_container { margin-top: 60px; }
@media (min-width: 768px) and (max-width: 1023px) {
    #slider1_container { margin-top: 110px; }
}
@media (max-width: 767px) {
    #slider1_container { margin-top: 55px; }
}
/*
.visual {
    height: 260px; position: relative; margin-top: 60px;
    background-size: cover; background-repeat: no-repeat; background-position: center center;
}
@media (min-width: 768px) and (max-width: 1023px) {
    .visual { margin-top: 110px; }
}
@media (max-width: 767px) {
    .visual { margin-top: 55px; }
}
.visual .visual-blur { position: absolute; width:100%; height: 40px; bottom: 0px; background-color: rgba(255,255,255,0.3); }

.visual .vs-text1 { position: absolute; font-size: 16px; font-weight: normal; color: #afa69a; }
.visual .vs-text2 { position: absolute; font-size: 36px; font-weight: bold; color: #afa69a; }
#visual-about .vs-text1 { top: 110px; right: 50px; }
#visual-about .vs-text2 { top: 130px; right: 50px; }
#visual-product .vs-text1 { top: 110px; right: 50px; }
#visual-product .vs-text2 { top: 130px; right: 50px; }
#visual-product-oem .vs-text1 { top: 110px; right: 50px; }
#visual-product-oem .vs-text2 { top: 130px; right: 50px; }
#visual-contact .vs-text1 { top: 110px; right: 50px; }
#visual-contact .vs-text2 { top: 130px; right: 50px; }

#visual-about { background-image : url('/img/bg/vs1.jpg'); }
#visual-product { background-image : url('/img/bg/vs2.jpg'); }
#visual-product-oem { background-image : url('/img/bg/vs3.jpg'); }
#visual-contact { background-image : url('/img/bg/vs4.jpg'); }
@media (max-width: 767px) {
    #visual-about { background-image : url('/img/bg/vs1.jpg'); }
    #visual-product { background-image : url('/img/bg/vs2.jpg'); }
    #visual-product-oem { background-image : url('/img/bg/vs3.jpg'); }
    #visual-contact { background-image : url('/img/bg/vs4.jpg'); }
}
*/

/* 게시판 */
/*
.visual#visual-member { position: relative; background-image : url('/img/bg/vs1.jpg'); }
#visual-member:after {
    content: "NEXT MADE FUTURE";
    position: absolute; top: 140px; right: 40px;
    color: #fff; font-size: 32px; font-weight: bold;
    display: inline-block; padding: 5px 10px; border: 2px solid #fff;
}
@media (max-width: 767px) {
    .visual#visual-member { background-image : url('/img/bg/vs1.jpg'); }
    #visual-member:after { font-size: 18px; right: 10px; }
}
*/
/*
.visual#visual-board { background-image : url('/img/bg/v7.jpg'); }
#visual-board .vs-text1 {
    position: absolute; top: 140px; right: 40px;
    color: #fff; font-size: 30px; font-weight: bold;
    display: inline-block; padding: 5px 10px; background-color: rgba(0,0,0,0.3);
}
@media (max-width: 767px) {
    .visual#visual-board { background-image : url('/img/bg/v7_m.jpg'); }
    #visual-board .vs-text1 { font-size: 18px; right: 10px; }
}
*/

/* =========================================================================================
 * 내용
 * ========================================================================================= */
.content-wrap {
    font-size: 16px; line-height: 1.6; color: #333;
    padding-top: 60px; padding-bottom: 60px; margin-top: 70px;
}

/* =========================================================================================
 * 백그라운드 이미지 사용 (visual X)
 * ========================================================================================= */
.body-wrap {
    background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: #fff;
}
/*.body-wrap[data-page="index"] { background-image: url('/img/bg/vs_index1.jpg'); }
.body-wrap[data-page="company"] { background-image: url('/img/bg/vs_company1.jpg'); }
.body-wrap[data-page="history"] { background-image: url('/img/bg/vs_history1.jpg'); }
.body-wrap[data-page="certification"] { background-image: url('/img/bg/vs_certification1.jpg'); }
.body-wrap[data-page="location"] { background-image: url('/img/bg/vs_location1.jpg'); }
.body-wrap[data-page^="product_"] { background-image: url('/img/bg/vs_product1.jpg'); }
.body-wrap[data-page="product_oem"] { background-image: url('/img/bg/vs_product1.jpg'); }
.body-wrap[data-page="contact"] { background-image: url('/img/bg/vs_contact1.jpg'); }*/
.content-wrap { margin-top: 90px; }
.content-wrap section.bg-opacity { background-color: rgba(255,255,255,.9); padding: 20px; }
@media (min-width: 768px) and (max-width: 1023px) { .content-wrap { margin-top: 135px; }}
@media (max-width: 767px) {
    /*.body-wrap { background-image: linear-gradient(to bottom right, #e1ebe5 , #707873); }*/
    .content-wrap { padding-top: 40px; padding-bottom: 40px;  margin-top: 60px; }
};