body #slidemenu {
    color: rgb(244, 168, 84);
}

body.slide-active {
    overflow-x: hidden;
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
    margin-top: 0px !important;
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
    position: relative;
    padding-top: 70px;
    left: 0;
}
#page-content.slide-active {
    padding-top: 0;
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: right;
    margin-top: 27px;
    width: 36px;
    height: 40px;
    padding: 0 0 0 0;
    border: 0;
    background: transparent;
    right: 50px;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
    width: 100%;
    display: block;
    height: 5px;
    margin: 5px 0 0 0;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
    background: orange;
}
.navbar-header {
    position: absolute;
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
    /*  position: absolute*/
}
.navbar {
    margin-bottom: 0px;
}
.show_layer_bk {
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #333;
    opacity: 0.4;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width: 767px) {
    #slide-nav .container {
        margin: 0;
        padding: 0 !important;
    }
    #slide-nav .navbar-header {
        margin: 0 auto;
        padding: 0 15px;
    }

    #slide-nav .navbar.slide-active {
        position: absolute;
        width: 50% !important;
        top: -1px;
        z-index: 1000;
    }
    #slide-nav #slidemenu {
        background: #f7f7f7;
        /* left: -100%; */
        width: 40%;
        min-width: 250px;
        position: absolute;
        padding-left: 0;
        z-index: 3;
        top: -8px;
        margin: 0;
        right: -50%;
    }
    #slide-nav #slidemenu .navbar-nav {
        min-width: 0;
        width: 100%;
        margin: 0;
    }
    #slide-nav #slidemenu .navbar-nav li {
        padding-left: 20px;
    }
    #slide-nav #slidemenu .navbar-nav li ul {
        padding-left: 35px;
    }
    #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
        min-width: 0;
        width: 40%;
        white-space: normal;
    }
    #slide-nav {
        border-top: 0;
    }
    #slide-nav.navbar-inverse #slidemenu {
        /* background: #333 */
        background: #233b7b;
        margin-top: 97px;
    }
    /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
    #slide-nav #navbar-height-col {
        position: fixed;
        top: 0;
        height: 100%;
        width: 40%;
        left: -50%;
        background: #eee;
    }
    #slide-nav.navbar-inverse #navbar-height-col {
        background: #333;
        z-index: 1;
        border: 0;
    }
    #slide-nav .navbar-form {
        width: 100%;
        margin: 8px 0;
        text-align: center;
        overflow: hidden;
        /*fast clearfixer*/
    }
    #slide-nav .navbar-form .form-control {
        text-align: center;
    }
    #slide-nav .navbar-form .btn {
        width: 100%;
    }
}
/* @media (min-width:768px) { 
	#page-content {
	    left: 0!important
	}
	.navbar.navbar-fixed-top.slide-active {
	    position: fixed
	}
	.navbar-header {
	    left: 0!important
	}
} */
@media (min-width: 768px) {
    #slide-nav .container {
        margin: 0;
        padding: 0 !important;
    }
    #slide-nav .navbar-header {
        margin: 0 auto;
        padding: 0 15px;
    }

    #slide-nav .navbar.slide-active {
        position: absolute;
        width: 50% !important;
        top: -1px;
        z-index: 1000;
    }
    #slide-nav #slidemenu {
        background: #f7f7f7;
        /* left: -100%; */
        right: -50%;
        /* width: 20%; */
        width: 15%;
        min-width: 320px;
        position: absolute;
        padding-left: 0;
        z-index: 3;
        top: -8px;
        margin: 0;
        /* margin-top:50px; */
        margin-top: 90px;
    }
    #slide-nav #slidemenu .navbar-nav {
        min-width: 0;
        width: 100%;
        margin: 0;
    }
    #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
        min-width: 0;
        width: 20%;
        min-width: 320px;
        white-space: normal;
    }
    #slide-nav {
        border-top: 0;
    }
    #slide-nav.navbar-inverse #slidemenu {
        /*    background: #333*/
        background: #233b7b;
    }
    /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
    #slide-nav #navbar-height-col {
        position: fixed;
        top: 0;
        height: 100%;
        /* width: 20%; */
        width: 15%;
        min-width: 320px;
        /* left: -50%; */
        right: -50%;
        background: #eee;
    }
    #slide-nav.navbar-inverse #navbar-height-col {
        /* background: #333; */
        background: #233b7b;
        z-index: 1;
        border: 0;
    }
    #slide-nav .navbar-form {
        width: 100%;
        margin: 8px 0;
        text-align: center;
        overflow: hidden;
        /*fast clearfixer*/
    }
    #slide-nav .navbar-form .form-control {
        text-align: center;
    }
    #slide-nav .navbar-form .btn {
        width: 100%;
    }
}

.navbar-nav > li > ul > li:hover {
    color: #fff;
    cursor: pointer;
}
.navbar-nav > li > a:hover {
    cursor: pointer;
}

/*	2016-10-21	추가	*/
.navbar-inverse .navbar-nav > li > a {
    color: rgb(244, 168, 84);
}
.navbar-nav > li > a[toggle='on'] {
    color: #fff;
}
.navbar-nav > li {
    padding-left: 40px;
}

span.nav_txt:before {
    height: 30px;
    width: 30px;
    display: inline-block;
    content: ' ';
    margin-bottom: -7px;
    margin-right: 10px;
}
span#nav_home:before {
    background: url('home_off.png');
}
span#nav_home:hover:before {
    background: url('home_on.png');
}
span#nav_intro:before {
    background: url('introduce_off.png');
}
span#nav_intro:hover:before,
a[toggle='on'] > #nav_intro:before {
    background: url('introduce_on.png');
}
span#nav_prod:before {
    background: url('product_off.png');
}
span#nav_prod:hover:before,
a[toggle='on'] > #nav_prod:before {
    background: url('product_on.png');
}
span#nav_tech:before {
    background: url('../../images/icons/tech_off.png');
}
span#nav_tech:hover:before,
a[toggle='on'] > #nav_tech:before {
    background: url('tech_on.png');
}
span#nav_port:before {
    background: url('portpolio_off.png');
}
span#nav_port:hover:before,
a[toggle='on'] > #nav_port:before {
    background: url('portpolio_on.png');
}
span#nav_cont:before {
    background: url('contact_off.png');
}
span#nav_cont:hover:before,
a[toggle='on'] > #nav_cont:before {
    background: url('contact_on.png');
}
span#nav_lang:before {
    background: url('lang_off.png');
}
span#nav_lang:hover:before,
a[toggle='on'] > #nav_lang:before {
    background: url('lang_on.png');
}

.navbar-nav > li > a > .nav_txt {
    font-size: 25px;
}
.navbar-nav > li > ul > li > a {
    font-size: 15px;
}

.navbar-nav > li > ul#prod > li,
.navbar-nav > li > ul#intro > li,
.navbar-nav > li > ul#locale > li {
    list-style-type: none;
}

nav#slide-nav {
    border-bottom: 2px solid #c7c7c7;
}

.navbar-nav > li > ul {
    padding-left: 55px;
}

.navbar-brand {
    height: 90px;
}