@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* {margin:0; padding:0; box-sizing:border-box;}

body {width:100%;
max-width:1920px;
margin:0 auto;
font-family:'Noto Sans KR', sans-serif;
font-size:16px;
font-weight:400;
color:#333;
background:#fcfcfc;
overflow-y:overlay;}

body::-webkit-scrollbar {width:6px; background:transparent;}

body::-webkit-scrollbar-track {width:6px; background:transparent;}

body::-webkit-scrollbar-thumb {height:17%; background:rgba(26,26,26,0.6); border-radius:3px;}

input, select {appearance:none; border-radius:0; border:0; background:transparent; font-family:'Noto Sans KR', sans-serif; padding:0 4px; color:#111;}

textarea {resize:none; appearance:none; border-radius:0; border:0; background:transparent; font-family:'Noto Sans KR', sans-serif; padding:4px;}

button {background:none; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer; font-family:'Noto Sans KR', sans-serif; color:#111;}

li {list-style:none;}

img {vertical-align:middle; border:0; width:100%; height:100%; object-fit:cover; overflow:hidden;}

a, a:hover, a:active, a:focus {text-decoration:none; color:#111;}

h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:400;}

table {border-collapse:collapse;}


.hidden {width:0; height:0; position:absolute; line-height:0; overflow:hidden; top:-100%; height:-100%;}

.container {width:100%; max-width:1300px; padding:0 10px; margin:0 auto;}


.kakaomap {
    display:block;
    padding:5px;
    text-decoration:none;
    font-family:'Noto Sans KR', sans-serif;
    color:#333;
}

/* pagination */
.ul_pagination {
    display:flex;
    align-items:center;
    gap:26px;
    font-size:12px;
    justify-content:center;
}

.ul_pagination a {
    padding:2px 4px;
    color:#767676;
}

.ul_pagination a.now {
    font-weight:500;
    color:#333;
}

.ul_pagination a.space {
    letter-spacing:-1.5px;
}


/* header */
header {
    width:100%;
    height:120px;
    background:rgba(255,255,255,0.95);
    border-bottom:1px solid #d9d9d9;
    position:absolute;
    top:0;
    z-index:9996;
}

header .container{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    gap:70px;
}

h1 a {
    display:block;
    width:216px;
    height:56px;
    background:url('../img/logo.svg') 50% 50% no-repeat;
    background-size:contain;
}

#gnb {
    display:flex;
    align-items:center;
    gap:150px;
    height:100%;

}

#gnb > li > a {
    font-size:18px;
    font-weight:500;
}

#gnb > li {
    height:100%;
    line-height:120px;
}

.subtree {
    position:relative;
}

.sub {
    position:absolute;
    background:#fff;
    padding:0;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    top:80px;
    height:0;
    overflow:hidden;
}

.sub.show {
    padding:20px 12px;
    height:auto;
}

.sub a {
    display:block;
    width:100%;
    color:#a7a7a7;
    font-size:14px;
    font-weight:400;
    line-height:30px;
    width:120px;
    height:30px;
}

.sub a:hover {
    color: #2C2E83;
}

.burger, .wall {
    display:none;
}


/* article */
article a:hover, article a:active, article a:focus {
    color:#00A19A;
}

/* footer */
footer {
    margin-top:130px;
    background:#E5E5E5;
    padding:48px 0;
}

h6 {
    width:216px;
    height:56px;
    background:url('../img/logo.svg') 50% 50% no-repeat;
    background-size:contain;
    /* filter:grayscale(1); */
}

footer .container {
    display:flex;
    gap:80px;
    align-items:center;
}

.f_right p {
    line-height:24px;
}

.f_right .marginT {
    margin-top:12px;
}

.font-weight {
    font-weight:500;
}

.f_float a {
    line-height:40px;
}

.font-margin span {
    margin-right:24px;
}

.font-margin {
    display:flex;
    flex-wrap:wrap;
}

.clone {
    visibility:hidden;
}

@media all and (max-width:1240px) {
    #gnb {
        width:calc(100% - 340px);
        gap:0;
        justify-content:space-between;
    }

    footer {
        padding:90px 0 48px;
        position:relative;
        z-index:9990;
    }

    footer .container {
        gap:40px;
    }

    .f_float {
        position:absolute;
        top:28px;
        left:50%;
        transform:translateX(-50%);
    }

    .f_float ul {
        display:flex;
        gap:30px;
        justify-content:center;
    }
}


@media all and (max-width:1040px) {
    .f_float {
        width:100%;
        padding:0 10px;
    }

    .f_float ul {
        justify-content:flex-start;
    }

    footer .container {
        flex-direction:column;
        gap:20px;
    }

    footer {
        padding:100px 0 48px;
    }
}


@media all and (max-width:1024px) {

    header {
        height:80px;
    }

    h1 a {
        width:102px;
        height:26px;
        background-size:contain;
    }

    .wall {
        width:100vw;
        height:100vh;
        position:fixed;
        top:0;
        left:0;
        background:rgba(255,255,255,0.05);
        z-index:9997;
        display:none;
    }

    .wall.all {
        display:block;
    }

    .burger {
        display:block;
        width:33px;
        height:33px;
        background:url('../img/burger.svg') 50% 50% no-repeat;
        background-size:cover;
        cursor:pointer;
        position:relative;
        z-index:9999;
    }

    .burger.x {
        background:url('../img/burgerx.svg') 50% 50% no-repeat;
        background-size:cover;
    }

    header .container{
        justify-content:space-between;
        gap:0;
    }

    #gnb {
        background:#fff;
        position:fixed;
        top:0;
        right:-100%;
        width:300px;
        height:100vh;
        justify-content:flex-start;
        flex-direction:column;
        align-items:baseline;
        z-index:9998;
        padding:44px 20px;
        border: 1px solid #D9D9D9;
        transition:0.2s all ease;
    }

    #gnb.open {
        right:0;
    }

    #gnb > li {
        margin-bottom:30px;
        height:auto;
        line-height:160%;
    }
    
    #gnb > li > a {
        font-size:18px;
        font-weight:500;
    }
    
    .sub {
        position:static;
        background:transparent;
        box-shadow: none;
        overflow:hidden;
        max-height:0;
        transition:0.3s all ease-out;
    }

    .sub.show {
        padding:8px 0 20px;
        max-height:500px;
    }

    .subtree {
        width:auto;
        height:auto;
    }


    .f_right p, .f_float a{
        font-size:14px;
    }

    footer .container {
        align-items:flex-start;
    }
}

@media all and (max-width:560px) {
    .ul_pagination {
        gap:10px;
    }

    .f_float ul {
        justify-content: space-between;
        gap:0;
    }

    .f_right p, .f_float a{
        font-size:12px;
    }

    .f_float {
        top:6px;
    }

    footer {
        padding:70px 0 48px;
        margin-top:70px;
    }
}