@charset "utf-8";

/**
 * 브라우저 글꼴 크기가 16px 이면
 * 1rem = 10px
 */

/** RESET */
html, body, div, header, nav, section, ul, li, p, a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    font-family: inherit;
    vertical-align: baseline;
    }

ul, ol {
    list-style-type: none;
    }

html {
    font-size: 62.5%;   /* 10px 중간 글꼴 크기 지정시 */
    font-family: "굴림", "굴림체"; color:#000000;
    }

*, *::after, *::before {
    box-sizing: border-box;
    }

table {
    border-collapse: collapse;
    }

header, nav, article, aside, section, menu, div {
    display: block;
    }

#article, #footer, #header {
    margin: 0 auto;
    }
a:link, a:visited, a:hover, a:active {
    color: inherit;
    }


/** IMAGE */
img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    }


/** WRAPPER */

.page-wrap {
    min-width: 1380px;
    }

.page-wrap-sm {
    min-width: 1012px;
    }

.main-wrapper {
    display: table;
    border: 0.1em solid #D8D8D8;
    border-radius: 0.3em;
    }

    .main-wrapper > * {
        display: table-cell;
        vertical-align:top;
        }

    .main-wrapper::before, .main-wrapper::after {
        content: "";
        display: block;
        clear: both;
        }

.wrapper {
    min-width: 1380px;
    max-width: 101.2rem;
    margin: 0 auto;
    }

    .wrapper::before, .wrapper::after {
        content: "";
        display: block;
        clear: both;
        }

.wrapper-sm {
    min-width: 1012px;
    width: 101.2rem;
    margin: 0 auto;
    }

    .wrapper-sm::before, .wrapper-sm::after {
        content: "";
        display: block;
        clear: both;
        }

/** HEADER */
#header {
    width: 101.2rem;
    height: 8rem;
    position: relative;
    }

    #header .logo {
        display: block;
        width: 40em;
        height: 8em;
        margin: 0 auto;
        }

        #header .logo img {
            display: block;
            width: 100%;
            }

    #header ul.top-menu {
        position: absolute;
        top: 5px;
        right: 5px;
        padding: 0.5em 0;
        }

        #header ul.top-menu li {
            display: inline-block;
            color: #000000;
            font-size: 1.16rem;
            padding: 0 0.5em 0 0.5em;
            }

            #header ul.top-menu li:not(:last-child) {
                border-right: 0.1em solid #CCCCCC;
                }

            #header ul.top-menu li .admin {
                color: #FF0000;
                }

/** NAV */
.navbar {
    position: relative;
    margin-bottom: 5em;
    border-top: 1px solid #EAEAEA;
    }

    .navbar .nav-wrapper {
        width: 89.4rem;
        margin: 0 auto;
        }

        .navbar .nav .dropdown-content > ul {
            width: 89.4rem;
            margin: 0 auto;
            }

    .navbar::before, .navbar::after {
        content: "";
        display: block;
        clear: both;
        }

    .navbar ul.nav {
        float: left;
        }

    .navbar ul.nav-inverse {
        float: right;
        }

        .navbar ul li {
            display: inline-block;
            }

            .navbar ul.nav > li > .dropdown-content {
                position: absolute;
                width: 100%;
                left: 0;
                z-index: 1;
                }

                .navbar ul.nav > li > .dropdown-content:not(.active) {
                    display: none;
                    }

                /* .navbar ul.nav > li:hover .dropdown-content {
                    display:block;
                    } jQuery로 대체 */

    /* 사용자 정의 */
    .navbar ul.area {
        font-size: 0; /* 요소 사이의 공백 하나를 없앤다. */
        }

        .navbar ul.area > li {
            color: #454545;
            }

            .navbar ul.area > li:first-child {
                padding-left: 0;
            }

            .navbar ul.area > li a {
                }

                .navbar ul.area > li a:link,
                .navbar ul.area > li a:visited,
                .navbar ul.area > li a:hover,
                .navbar ul.area > li a:active {
                    text-decoration: none;
                }

            .navbar ul.area > li h3 {
                display: block;
                font-size: 1.42rem;
                padding: 1rem 0;
                }

                .navbar ul.area > li h3 a {
                    display: block;
                    font-family: '맑은고딕';
                    font-weight: bold;
                    padding: 0 1.5rem;
                    }

                .navbar ul.area > li:not(:last-child) h3 a {
                    border-right: 1px solid #DDDDDD;
                    }

            .navbar ul.area > li > .dropdown-content {
                background-color: #F9F9F9;
                border-top: 3px solid #2984D1;
                border-bottom: 1px solid #EAEAEA;
                top: 3.5rem;
                }

                .navbar ul.area > li > .dropdown-content ul {
                    font-size: 0; /* 요소 사이의 공백 하나를 없앤다. */
                    padding: 1rem 2rem;
                    }

                    .navbar ul.area > li:nth-child(2) > .dropdown-content ul::before {
                        content: "";
                        display: inline-block;
                        width: 8.8rem;
                        height: 1px;
                        }

                    .navbar ul.area > li:nth-child(3) > .dropdown-content ul::before {
                        content: "";
                        display: inline-block;
                        width: 17.6rem;
                        height: 1px;
                        }

                    .navbar ul.area > li:nth-child(4) > .dropdown-content ul::before {
                        content: "";
                        display: inline-block;
                        width: 26.4rem;
                        height: 1px;
                        }

                    .navbar ul.area > li > .dropdown-content ul li {
                        font-size: 0;
                        }

                        .navbar ul.area > li > .dropdown-content ul li:not(:last-child) {
                            border-right: 1px solid #000000;
                            }

                        .navbar ul.area > li > .dropdown-content ul li a {
                            font-size: 1.2rem;
                            font-family: '굴림', '굴림체';
                            font-weight: normal;
                            padding: 0 0.8em;
                            }

                            .navbar ul.area > li > .dropdown-content ul li a:hover {
                                text-decoration: underline;
                                }


    .navbar ul.etc {
        font-size: 0;
        }

        .navbar ul.etc > li {
            font-size: 1.15rem;
            padding: 1em 0;
            }

            .navbar ul.etc > li a:link,
            .navbar ul.etc > li a:visited,
            .navbar ul.etc > li a:hover,
            .navbar ul.etc > li a:active {
                text-decoration: none;
            }

            .navbar ul.etc > li > a {
                display: block;
                font-family: '맑은고딕';
                font-weight: bold;
                padding: 0 14px;
                color: #454545;
                }

            .navbar ul.etc > li:not(:last-child) > a {
                border-right: 1px solid #DDDDDD;
                }

/** ARTICLE */
#article {
    }


/** FOOTER */
#footer {
    font-size: 1.21rem;
    text-align: center;
    }

    #footer p {
        color: #000000;
        line-height: 2.0;
        }

        #footer p b {
            }

        #footer p b.host {
            color: #2984C6;
            }

    #footer p.copyright {
        color: #808080;
        }

/** Sub Menu */
.sub-menu {
    margin: 0.5em 0 0.7em 0;
    }

    .sub-menu .navigation {
        font-size: 1.21rem;
        float: left;
        }

    .sub-menu .search {
        font-size: 1.21rem;
        float: right;
        }

    .sub-menu::after {
        content: "";
        display: block;
        clear: both;
        }

/** NAVIGATION */
.navigation {
    }


/** SEARCH */
.search {
    }


/** LEFT MENU */
.left-menu {
    min-width: 22rem;
    max-width: 22rem;
    padding: 2em 1.2em 2em 1.2em;
    }

    .left-menu .list {
        display: block;
        font-size: 1.21rem;
        }

        .left-menu .list > ul {
            display: block;
            margin-bottom: 1em;
            }

            .left-menu .list > ul > li {
                display: block;
                text-indent: 1.5em;
                line-height: 2em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
                }

                .left-menu .list > ul > li:not(:first-child) {
                    background-image: url(/images/common/gs_bull.gif);
                    background-repeat: no-repeat;
                    background-position: 0.3em 50%;
                    }

                .left-menu .list > ul > li > h3 {
                    font-size: 1.32rem;
                    font-weight: bold;
                    text-indent: 0.5em;
                    border-bottom: 1px solid #D8D8D8;
                    margin-bottom: 1em;
                    }

    .left-menu .visit {
        display: block;
        font-size: 1.21rem;
        margin: 0 0 0 2em;
        }

/** MAIN */
.main {
    padding: 2em 30px 0 30px;
    border-left: 1px dotted #D8D8D8;
    text-align: justify;
    }

.main.sm {
    width: 79.2rem;
    }

    .main .album {
        text-align-last: justify;
        }

    .main .content-list {
        text-align-last: justify;
        }

    .main > * {
        margin-bottom: 2em;
        }

    .main .link {
        font-size: 1.21rem;
        padding: 0.7em 0 0.7em 0;
        background-color: #EFEFEF;
        text-align: center;
        margin-bottom: 1rem;
        }

        .main .link a {
            padding: 0 0.6em 0 0.1em;
            }

            .main .link a:not(:last-child) {
                border-right: 1px solid #565656;
                }

    .main .company {
        font-size: 1.21rem;
        display: block;
        text-align: center;
        margin-bottom: 1rem;
        }

        .main .company span {
            padding: 0 0.6em 0 0.1em;
            color: #898989;
            }

            .main .company span:not(:last-child) {
                border-right: 1px solid #898989;
                }

    .main #container_title {
        border-bottom: 1px solid #565656;
        color: #565656;
        font-size: 1.52rem;
        font-weight: bold;
        line-height: 2.5;
        }

/** CONTENT LISt */
.content-list > * {
    margin-bottom: 2em;
    }

    .content-list .content {
        display: inline-block;
        width: 32%;
        }

    .content-list .content.lg {
        display: inline-block;
        width: 48%;
        }

        .content-list .content .latest-list {
            text-align: left;
            text-align-last: left;
            }

            .content-list .content .latest-list div.title {
                font-size: 1.21rem;
                border: 1px solid #E0E0F3;
                border-left: none;
                border-right: none;
                color: #2984D1;
                font-weight: bold;
                padding: 0.4em 0;
                }

                .content-list .content .latest-list div.title p {
                    display: block;
                    background-color: #F9F9F9;
                    padding: 7px 12px;
                    }

                .content-list .content .latest-list div.title::after {
                    content: "";
                    display: block;
                    clear: both;
                    }

                    .content-list .content .latest-list div.title p span.text {
                        display: inline-block;
                        width: 88%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        }

                    .content-list .content.lg .latest-list div.title p span.text {
                        }

                    .content-list .content .latest-list div.title p span.more {
                        display: block;
                        width: 12%;
                        float: right;
                        }

            .content-list .content .latest-list ul {
                display: block;
                font-size: 1.21rem;
                padding: 0 0.8em;
                }

                .content-list .content .latest-list ul li {
                    display: block;
                    height: 3.5rem;
                    line-height: 3.5rem;  /* height 랑 같은 값을 유지해야 한다. */
                    border-bottom: 1.5px solid #F2F2F2;
                    background-image: url(/pbbs/skin/latest/basic/img/bullet_list.gif);
                    background-repeat: no-repeat;
                    background-size: 0.2em;
                    background-position: 0 50%;
                    text-indent: 0.6em;
                    }

                .content-list .content .latest-list ul li > span {
                    display: block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    }


/** BANNER */
.banner {
    }

    .banner img {
        width: 100%;
        }

    .banner img.two {
        width: 49%;
        }

/** ALBUM */
.album {
    width: 100%;
    margin-bottom: 1.5rem;
    }

    .album .menu {
        border-bottom: 1px solid #565656;
        margin: 0 0 1em 0;
        }

        .album .menu .subject {
            display: block;
            float: left;
            color: #565656;
            font-size: 1.21rem;
            font-weight: bold;
            line-height: 2.5;
            }

        .album .menu .more {
            font-size: 1.08rem;
            display: block;
            float: right;
            color: #2984C6;
            line-height: 3.0;
            }

        .album .menu::after {
            content: "";
            display: block;
            clear: both;
            }

        .album .latest-card {
            display: inline-block;
            width: 11.8rem;       /* main_1.php 사진앨범 크기 지정 */
            margin: 0 0 10px 0;
            }

        .album.sm .latest-card {
            width: 10rem;       /* main_2.php 사진앨범 크기 지정 */
            }

            .album .latest-card p {
                font-size: 1.14rem;
                display: block;
                padding: 0.1em 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                }

            .album .latest-card p.thumb {
                height: 7em;
                }

                .album .latest-card p.thumb a {
                    }

                .album .latest-card p.thumb img {
                    width: 100%;
                    min-height: 100%;
                    }

            .album p.subject {
                text-align: center;
                text-align-last: center;
                }


/** Board */
.board-wrapper {
    font-size: 1.21rem;
    }

/** CHECKBOX */
.container {
    display: block;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.2rem;
    cursor: pointer;
    user-select: none;
    }

    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
        }

    .container .checkmark,
    .container .checkmark-right {
        position: absolute;
        height: 1.4em;
        width: 1.4em;
        background-color: #EEEEEE;
        }

    .container .checkmark {
        top: -0.2em;
        left: 0;
        }

    .container .checkmark-right {
        top: -0.2em;
        right: -2em;
        }

        .container:hover input ~ .checkmark,
        .container:hover input ~ .checkmark-right {
            background-color: #AAAAAA;
            }

            .container input:checked ~ .checkmark,
            .container input:checked ~ .checkmark-right {
                background-color: #EEEEEE;
                }

        .container .checkmark:after,
        .container .checkmark-right:after {
            content: "";
            position: absolute;
            display: none;
            }

            .container input:checked ~ .checkmark:after,
            .container input:checked ~ .checkmark-right:after {
                display: block;
                }

                .container .checkmark:after,
                .container .checkmark-right:after {
                    position: absolute;
                    left: 0.5em;
                    top: 0.2em;
                    width: 0.5em;
                    height: 1em;
                    border: solid #000000;
                    border-width: 0 0.3em 0.3em 0;
                    transform: rotate(45deg);
                    }