@charset "UTF-8";           /* 언어세트 선언 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/xpressengine/XEIcon@2.3.3/xeicon.min.css');

*  { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Quicksand', 'Noto Sans KR', sans-serif; font-size: 14px; color: #333; }
li { list-style: none; }
a { text-decoration: none; color: #333; }
img { vertical-align: middle; }
.clearfix:after { content: ""; display: block; clear: both; }
.inner { width: 1300px; margin: 0 auto; }
html { scroll-behavior: smooth; }

/* -----header----- */
header { position: fixed; left: 0; top: 0; width: 100%; border-bottom: 1px solid #eee; box-shadow: 0 3px 5px rgba(0,0,0,0.1); background: #fff; z-index: 10; }
header .inner { max-width: 100%; display: flex; justify-content: space-between; align-items: center; }
#m_header { display: none; }

/* top */
.underline { border: 0; border-bottom: 1px solid #eee; }
.left { position: relative; float: left; text-align: left; line-height: 40px; }
.left p { border-left: 1px solid #eee; border-right: 1px solid #eee; padding: 0 15px; color: #999; }
.left span { color: #333; margin-right: 10px; }
.text { position: absolute; left: 108%; top: 0; width: 100px; }
.text a { color: #333; }

.right { position: relative; float: right; text-align: right; line-height: 40px; }
#wrap { position: absolute; right: 96%; top: 0; }
#search { height: 35px; font-size: 16px; display: inline-block; font-weight: 100; border: none; outline: none; color: #999; padding: 3px; padding-right: 60px; width: 0px; position: absolute; top: 0; right: 0; background: none; z-index: 3; transition: width .6s ease; cursor: pointer; }
        /*cubic-bezier(0.000, 0.795, 0.000, 1.000);*/
#search:focus:hover { border-bottom: 1px solid #bbb; }
#search:focus { width: 200px; z-index: 1; border-bottom: 1px solid #bbb; cursor: text; }
#search_submit { position: absolute; top: 0; right: 0; display: inline-block; width: 40px; height: 40px; background: url(../img/search_h.png) center center no-repeat; text-indent: -10000px; border: none; z-index: 2; cursor: pointer; opacity: 0.2; cursor: pointer; transition: opacity .6s ease; }
#search_submit:hover { opacity: 0.8; }
.right li { display: inline-block; padding-left: 10px; }
.right li a { font-size: 13px; color: #999; }
.right li:hover a { color: #333; }

/* -----nav----- */
#header h1 a img { width: 100%; height: 40px; display: block; line-height: 0; }
#header nav { padding: 15px 0; }
#header .gnb { display: flex; align-items: center; }
#header .gnb > li > a { display: block; padding-left: 50px; transition: all .5s; font-size: 1.2rem; font-weight: 600; }
#header .gnb > li:hover > a { color: #a0b58d; }
#header .gnb > li.active > a { color: #a0b58d; }

/* -----footer----- */
footer { padding: 60px 0; text-align: center; font-family: 'Noto Sans KR', sans-serif; }
.cs_tit h2 { margin: 15px 0; }
.cs_tit span { line-height: 25px; font-weight: 700; }
.cs_t { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.cs_t li { flex: 0 1 auto; margin-right: 15px; }
.cs_t li:last-child { margin-right: 0; }
.cs_t li:nth-child(3) { margin-top: 4px; }
.cs_b { margin-top: 15px; }
.cs_b li:first-child { display: none; }
.cs_btn { display: inline-block; padding: 5px 10px; background: #eee; }
.cs_btn a { color: #888; }
.cs_btn:hover { background: #a0b58d; }
.cs_btn:hover a { color: #fff; }

/* sns */
#sns { position: fixed; right: 10px; bottom: 50%; width: 40px; height: 40px; background: #333; border-radius: 50% 50% 0 0; text-align: center; z-index: 99; }
#sns a { line-height: 46px; font-size: 22px; color: #fff; }
#sns:hover { background: #a0b58d; }
#sns_in { position: fixed; right: 10px; bottom: 45.6%; width: 40px; height: 40px; background: #333; border-radius: 0; text-align: center; z-index: 99; }
#sns_in a { line-height: 43px; font-size: 22px; color: #fff; }
#sns_in:hover { background: #a0b58d; }
#sns_fa { position: fixed; right: 10px; bottom: 41.2%; width: 40px; height: 40px; background: #333; border-radius: 0 0 50% 50%; text-align: center; z-index: 99; }
#sns_fa a { line-height: 40px; font-size: 22px; color: #fff; }
#sns_fa:hover { background: #a0b58d; }

/* up & down */
#up { position: fixed; right: 10px; bottom: 81px; width: 40px; height: 40px; background: #333; border-radius: 50% 50% 0 0; text-align: center; }
#up a { line-height: 45px; font-size: 22px; color: #fff; }
#up:hover { background: #a0b58d; }
#down { position: fixed; right: 10px; bottom: 40px; width: 40px; height: 40px; background: #333; border-radius: 0 0 50% 50%; text-align: center; }
#down a { line-height: 40px; font-size: 22px; color: #fff; }
#down:hover { background: #a0b58d; }

/* ＊＊＊＊＊＊＊＊＊＊ 반응형 ＊＊＊＊＊＊＊＊＊＊ */
/* Tablet */
@media all and (max-width:1024px) {
    /* -----header----- */
    #top { display: none; }
    nav { display: none; }
    .inner { width: 95%; margin: 0 auto; }
    #m_header { position: fixed; display: inline-block; left: 0; top: 0; width: 100%; height: 60px; border-bottom: 1px solid #eee; box-shadow: 0 3px 5px rgba(0,0,0,0.1); background: #fff; z-index: 999; text-align: left; }
    #m_header a { margin-left: 19px; height: 60px; }
    #m_header .mlogo { line-height: 60px; }
    #m_header img { height: 40px; }
    .menu { position: absolute; top: 0; right: 0; width: 60%; height: 100vh; max-width: 0; transition: 0.5s ease; z-index: 1; background: #fff; }
    .burger-icon { cursor: pointer; display: inline-block; position: absolute; z-index: 2; padding: 8px 0; top: 22px; right: 19px; user-select: none; width: auto; margin: 0; }
    .burger-icon .burger-sticks { background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 22px; }
    .burger-icon .burger-sticks:before, .burger-icon .burger-sticks:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; }
    .burger-icon .burger-sticks:before { top: 7px; }
    .burger-icon .burger-sticks:after { top: -7px; }
    .burger-check { display: none; }
    .burger-check:checked~.menu { max-width: 100%; }
    .burger-check:checked~.burger-icon .burger-sticks { background: transparent; }
    .burger-check:checked~.burger-icon .burger-sticks:before { transform: rotate(-45deg); }
    .burger-check:checked~.burger-icon .burger-sticks:after { transform: rotate(45deg); }
    .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before, .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after { top: 0; }
    /* menu */
    #header nav { display: none; }
    .minner { padding: 80px 100px 0 0; line-height: 1.5; text-align: right; }
    .member { margin: 0 0 15%; }
    .member li { display: block; }
    .member li a { font-size: 13px; color: #888; }
    .list li a { font-size: 20px; font-weight: bold; color: #333; }
    .msns { display: inline-block; width: 130px; margin-top: 40px; }
    .msns ul { display: flex; justify-content: flex-end; flex-wrap: wrap; }
    .msns li { flex: 0 1 auto; margin-left: 3%; position: relative; width: 36px; height: 36px; background: #a0b58d; border-radius: 50%; }
    .msns li a { position: absolute; right: 20%; top: 7%; font-size: 22px; font-weight: bold; color: #fff; }

    #search { height: 35px; font-size: 16px; display: inline-block; font-weight: 100; border: none; outline: none; color: #999; padding: 3px; padding-right: 25px; width: 0px; position: absolute; top: 12px; right: 50px; background: none; z-index: 3; transition: width .6s ease; cursor: pointer; }
    #search:focus:hover { border-bottom: 1px solid #bbb; }
    #search:focus { width: 200px; z-index: 1; border-bottom: 1px solid #bbb; cursor: text; }
    #search_submit { position: absolute; top: 12px; right: 40px; display: inline-block; width: 40px; height: 40px; background: url(../img/search_h.png) center center no-repeat; text-indent: -10000px; border: none; z-index: 2; cursor: pointer; opacity: 0.4; cursor: pointer; transition: opacity .6s ease; }
    #search_submit:hover { opacity: 0.8; }


    /* -----footer----- */
    .cs_tit h2 { font-size: 1.8rem; margin: 5px 0; }
    .cs_tit span { font-size: 16px; line-height: 30px; }
    .cs_t { display: none; }
    .cs_b { margin-top: 30px; }
    .cs_b li:first-child { display: inline-block; }
    .cs_btn { padding: 1px 10px 4px; }
    .cs_btn a { font-size: 12px; }


    /* -----sns----- */
    #sns { display: none; }
    #sns_in { display: none; }
    #sns_fa { display: none; }

    /* -----up&down----- */
    #up { display: none; }
    #down { display: none; }
}

/* Mobile1 */
@media all and (max-width:760px) {
    /* -----header----- */
    .burger-icon { right: 12px; }
    /* menu */
    .menu { width: 100%; }
    .minner { padding: 80px 60px 0 0; }
    .msns li { width: 32px; height: 32px; }
    .msns li a { font-size: 20px; }


    /* -----footer----- */

    
}

/* Mobile2 */
@media all and (max-width:380px) {
    /* -----header----- */
    .burger-icon { right: 12px; }
    /* menu */
    .minner { padding: 80px 60px 0 0; }
    .msns li { width: 32px; height: 32px; }

    /* -----footer----- */
    .cs_tit h2 { margin: 0 0 5px; font-size: 22px; }
    .cs_tit p { width: 98%; margin: 0 auto; font-size: 12px; }
    .cs_tit p.time { margin: 5px 0; }
    .cs_b li:nth-child(1) { margin-top: 0; }
    .cs_b li:nth-child(2) { margin-top: 0; }
    .cs_b li:nth-child(4) { margin-top: 0px; }
    .cs_btn { width: 45%; margin-top: 4px; padding: 4px 10px; }
    .cs_btn a { font-size: 13px; }

}