/*font*/
@font-face {
	src: url("../fonts/NotoSansKR-Black.otf");
	font-family: "Noto-Black";
}

@font-face {
	src: url("../fonts/NotoSansKR-Bold.otf");
	font-family: "Noto-Bold";
}

@font-face {
	src: url("../fonts/NotoSansKR-Light.otf");
	font-family: "Noto-Light";
}

@font-face {
	src: url("../fonts/NotoSansKR-Medium.otf");
	font-family: "Noto-Medium";
}

@font-face {
	src: url("../fonts/NotoSansKR-Regular.otf");
	font-family: "Noto-Regular";
}

@font-face {
	src: url("../fonts/NotoSansKR-Thin.otf");
	font-family: "Noto-Thin";
}

/*common*/
body {
    font-family: "Noto-Regular", system-ui, "Apple SD Gothic Neo", "AppleGothic", sans-serif; font-size: 16px;
    padding-bottom: 200px;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
    padding-left: 0;
}
h1 {font-family: 'Noto-bold';}
h2, h3, h4, h5, h6 {font-family: "Noto-Medium";}

/*skip-navi*/
#skip_navigation {margin:0; padding:0;}
#skip_navigation a.accessibility {display:block; position:absolute; top:-10000px; left:0; width:100%; text-align:center; z-index:700;}
#skip_navigation a.accessibility:hover,	
#skip_navigation a.accessibility:focus,
#skip_navigation a.accessibility:active {position:absolute; top:0; width:100%; padding:30px 0; font-weight:500; color:#fff; background-color:#0c4da2; z-index:700;}
#skip_navigation ul {margin:0; padding:0; height:0;}


/*header*/
.top-bar {
    width: 100%;
    position:fixed;
    z-index: 10;
    background-color:#fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

header .logo {
    color: #000;
    font-size: 24px;
    font-family: 'Noto-Medium';
    line-height: 24px;
    letter-spacing: -.03rem;
}
header .logo span {
    display: block;
    font-size: 18px;
    letter-spacing: -.04rem;
}
header .nav {
    align-items: center;
}
header .nav-link {
    font-size: 18px;
    color:#000;
}
header .nav-pills .nav-link.active {
    font-weight: 900;
}
header .nav-link:hover {
    color:#0056c1;
}

/*admin button*/
.dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
}
.dropdown-toggle::after {
    display: none;
}
.dropdown-item {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 40px;
}
.dropdown-item::after{
    content: '';
    border-bottom: 1px solid rgba(0,0,0,.15);
    display: block;
}
.dropdown-menu li:last-child .dropdown-item:after {
    display: none;
}

/*main-slide*/
.main {
    height:600px;
    color:#fff;
    background: url(../images/main_bg.jpg)no-repeat center;
    background-size: cover;
}
.main .title-box {
    height: 100%;
    display: flex;
    flex-flow:column nowrap;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.main .title-box p {
    font-size: calc(1.2rem + .3vw);
    font-weight: bold;
    margin-bottom: 0;
}
.main .title-box h1 {
    font-family: "Noto-bold";
}

/*main-오픈랩소식*/
.notice {
    position: relative;
    background-color:#f9f9f9;
    z-index: 0;
}
.notice .notice-title {
    color: #fff;
    padding-top: 80px;
    padding-bottom: 41px;
}
.notice .notice-title .notice-bg {
    width: 40%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0056c1;
    z-index: -1;
}
.notice .notice-title h4 {
    font-size: 24px;
    font-weight: bold;
}
.notice .notice-title p {
    margin-bottom:80px;
}
.notice .notice-title a {
    color: #fff;
}

.notice-board {
    background-color: #f9f9f9;
    padding-left: 30px;
    padding-right: 30px;
}
.notice-board .tab-box {
    border-bottom: 1px solid #000;
    padding-top:25px;
    padding-bottom:5px;
}
.notice-board .tab-box .nav-link {
    color:#666;
}
.notice-board .tab-box .nav-link:hover {
    color:#000;
}
.notice-board .tab-box .nav-link.active {
    color:#000;
    font-weight: 600;
}
.notice-board .table {
    letter-spacing: -.03rem;
    margin-bottom:30px;
}
.notice-board .table .tablist-01, .notice-board .table .tablist-02 {
    display: block;
    color:#fff;
    font-size: 12px;
    padding: 2px 5px;
    text-align: center;
}
.notice-board .table .tablist-01 {
    background-color:#f36700;
}
.notice-board .table .tablist-02 {
    background-color:#008f54;
}
.notice-board .table tbody tr td {
    vertical-align: middle;
}
.notice-board .table tbody tr td a {
    display: block;
    color:#222;
    padding: 0.7rem 1rem;
}
.notice-board .table tbody tr td a:hover {
    color:#0d6efd;
}
.notice-board .table tbody tr td:nth-child(1) {
    padding: 0.75rem 0;  
    word-break: keep-all;
}
.notice-board .table tbody tr td:nth-child(2) {
    font-size: 18px;
    padding:0;
}
.notice-board .table tbody tr td:nth-child(3) {
    color: #555;
    font-size: 17px;
    font-weight: 300;
    padding: 0.75rem 0;
}

/*main-banner*/
.banner {
    margin-top:100px;
}
.banner h4 {
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    margin-bottom:30px;
}
.banner .banner-list {
    list-style: none;
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
    padding-left:0;
}
.banner .banner-list .banner-item {
    font-size:16px;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 28px;
    padding: 10px 20px;
    margin-right:10px;
    margin-bottom:10px;
}

/*footer*/
.bottom-bar {
    color:#ccc;
    background-color: #000;
    margin-top:100px;
    z-index: 2510;
}
.bottom-bar footer p {
    font-size: 14px;
}
.bottom-bar footer .copy {
    font-size: 12px;
}

.footer-btn .btn-map, .footer-btn .btn-top {
    font-size: 12px;
    color: #999f;
    background-color: #222;
    padding: 13px 7px;
}

/*media size*/
@media (max-width: 991px) {
    /*header nav*/
    header .nav-link {
        padding: 0.5rem 0.4rem;
    }

    /*main-오픈랩소식*/
    .notice .notice-title {
        min-height: auto;
    }
    .notice .notice-title p {
        display:inline-block;
        margin-bottom:0;
    }
    .notice .notice-title a {
        float:right;
    }
    .notice .notice-title .notice-bg {
        width: 100%;
    }

    /*main-사업소개*/
    .overview .overview-img {
        width: 100%;
    }
    .overview .overview-title {
        width: 70%;
        top: 50px;
    }
}

@media (max-width: 767px)
{
    .nav {
        display: none; 
    }
    header .nav-link {
        padding: 1rem;
    }
    #mobilenav.collapse.show {
        display: flex !important;
        margin-top: 15px;
        width: 100%;
    }

    #mobilenav.collapse .nav-item {
        width: 100%;
        text-align: right;
        border-top: 1px solid #ddd;
        background-color: #f9f9f9;
    }
    #mobilenav.collapse .nav-item:last-child {
        border-bottom: 1px solid #ddd;
        padding-bottom: 0;
    }
    #mobilenav.collapse .nav-item:hover {
        background-color:#ddd;
    }
    #mobilenav.collapse .mng-md a {
        color: #dc3545;
        font-size: 16px;
        padding: 1rem;
        display: block;
    }
    #mobilenav.collapse .mng-md li {
        background-color: #f1f1f1;
        border-top:1px dotted #ddd;
    }
    #mobilenav.collapse .mng-md li:hover {
        background-color:#ddd;
    }
}

@media (min-width: 768px) 
{
    #mobilenav.collapse {
        display: flex !important; 
    }
}

@media (max-width: 414px) {
    .banner .banner-list {
        display: block;
        text-align: center;
    }
    .banner .banner-list .banner-item {
        width: 46%;
        display:inline-block;
        letter-spacing: -.05rem;
    }
}