@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=Noto+Serif+KR:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
/* font-family: 'Noto Serif KR', serif; */
/* @import url('https://fonts.googleapis.com/earlyaccess/nanumpenscript.css'); */
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GangwonEdu_OTFBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MapoAgape';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoAgapeA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BMEULJIRO';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/BMEULJIRO.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html{font-size:15px;}
body{color:#555; font-family: 'Noto Sans KR', sans-serif; font-size:17px; letter-spacing:-0.06em;}
*{margin: 0; padding: 0; box-sizing:border-box;}
img{vertical-align: top;}
ul, ol, li{list-style: none; margin:0;}
h1,h2,h3,h4,h5,h6,p,ul{margin: 0;}
a{text-decoration: none;color: inherit;}
a:hover{text-decoration: none; color:inherit;}
input[type=button], button, input[type=submit]{border:none; outline:none;}
button{text-align:inherit; background:transparent;}
button, button:active, button:focus{border:none; outline:none; cursor:pointer;}


/* 초기 설정 */

.wrap{position: relative;}
.inner{width:100%; max-width:1160px; padding-left:30px; padding-right:30px; margin:0 auto;}

/*header*/
header{
    /* position: relative; */
    position: fixed !important;
    width:100%;
    padding:0;
    /* box-shadow:0px 5px 5px rgba(0,0,0,0.1); */
    z-index:999;
    padding-bottom:49px;
    background:#fff;
}

header>div{
    display: flex;
    align-items:center;
    justify-content:space-between;
    height:144px;
}

header>div .webzine-vol{
    width:227px;
    margin-left:22px;
    margin-right:19px;
    padding:12px 0;
    color:#fff;
    font-size:16px;
    font-weight:500;
    text-align:center;
    line-height:1;
    letter-spacing:0;
    border-top-left-radius:15px;
    border-bottom-right-radius:15px;
    background:url(/webzine/202311/images/vol_bg.png) #8c5cb0 right center no-repeat;
}

header>div .sns-wrap li{
    margin-right:6px;
}

header>div .sns-wrap li:last-of-type{
    margin-right:0px;
}

header>div .prev-view,
nav .gnb .prev-view>a{
    display: flex;
    align-items:center;
    justify-content:center;
    width:160px;
    height:40px;
    margin-left:auto;
    color:#8c5cb0;
    font-size:16px;
    font-weight:700;
    border:1px solid #8c5cb0;
}

header>div .prev-view::before{
    display: block;
    /* width:15px;
    height:14px; */
    /* margin-top:3px; */
    margin-right:5px;
    color:#8c5cb0;
    font-family: xeicon!important;
    font-size:19px;
    font-weight:400;
    line-height:1;
    /* background:url(/images/ico-list.png) center no-repeat; */
    transform: translateY(1px);
    content:'\e95c';
}

header .search{
    margin-left:5px;
}

header>div .search>form{
    display: flex;
}

header>div .search input[type=text]{
    width: 188px;
    height:40px;
    padding:0 14px;
    font-size:16px;
    border:1px solid #464646;
}

header>div .search input[type=text]::placeholder{
    color: #999;
}

header>div .search input[type=text]:focus::placeholder{
    color:transparent;
}

header>div .search input[type=submit]{
    font-size:0;
    width:40px;
    height:40px;
    background:url(/images/ico-search.png) #464646 center no-repeat;
}

header .m-nav-btn{
    display: none;    
}

/*nav*/
header nav{
    position:absolute;
    left:0;
    top:144px;
    width:100%;
    color:#fff;
    background:#8c5cb0;
    z-index:999;
    height:49px;
    transition:height 0.5s;
    overflow:hidden;
}

header nav::after{
    display:block;
    position: absolute;
    top:49px;
    left:0;
    width:100%;
    background:#fff;
    content:'';
    z-index: 998;
}

header nav.on{
    height:310px;
    box-shadow:0px 7px 29px rgba(0,0,0,0.1);
}

/* header nav::after,
header nav .gnb .lnb{
    height:270px;
} */

header nav::after{
    height:100%;
}

header nav .gnb{
    display: flex;
}

header nav .gnb>li{
    position: relative;
    width:25%;
}

header nav .gnb>li::after{
    display: block;
    position: absolute;
    left:0;
    top:50%;
    width:1px;
    height:17px;
    background:#fff;
    opacity:0.4;
    transform:translateY(-50%);
    content:'';
}

header nav .gnb>li:first-of-type::after{
    display:none;
}

header nav .gnb>li>a{
    display: block;
    position: relative;
    font-size:18px;
    font-weight:400;
    text-align:center;
    line-height:49px;
    letter-spacing:0;
    white-space: nowrap;
}

/* nav li a::before{
    display: block;
    position: absolute;
    left:0;
    top:50%;
    width:1px;
    height:1.133rem;
    background:#fff;
    opacity:0.4;
    transform:translateY(-50%);
    content:'';
} */

/* nav .gnb>li:first-of-type>a,
nav .gnb>li:last-of-type>a{
    padding-left:0;
    margin-left:0;
}

nav .gnb>li:first-of-type>a::before,
nav .gnb>li:last-of-type>a::before{
    display: none;
} */

header nav .gnb .lnb{
    display:block;
    position: absolute;
    top:49px;
    width:100%;
    padding-top:9px;
    padding-bottom:50px;
    text-align:center;
    z-index:999;
}

header nav .gnb .lnb a{
    display: block;
    padding:8px 0;
    color:#666;
    font-size:16px;
    letter-spacing:0;
    word-break:keep-all;
}

header nav .gnb .lnb a:hover{
    color:#333;
    font-weight:bold;
}

header nav .gnb .prev-view{
    display: none;
    background:#fff;
}

main,
.sub-wrap{
    padding-top:193px;
}


/*.footer-wrap*/

footer{
    position: relative;
}

.btn-top{
    position:fixed;
    display: flex;
    justify-content:center;
    align-items:center;
    bottom:40px;
    right:50px;
    width:60px;
    height:60px;
    color:#333;
    font-size:11px;
    font-weight:bold;
    text-align:center;
    line-height:1.3;
    letter-spacing:0.045em;
    border-radius:100%;
    box-shadow:0px 3px 4px rgba(4,0,0,0.13);
    background:#e8eef1;
    /* transform:translateY(-50%); */
}

.btn-top.fix{
    position: absolute;
    top:-20px;
    bottom:auto;
    transform:translateY(-100%);
}

/**** background  ****/
.bg-purple{
    background: #7459b9 !important;
}

.bg-white-purple{
    background: #f7f6fc !important;
}

/**** text color  ****/

/****************** box-wrap ******************/
.box-wrap dl{
    margin-bottom:50px;
}

.box-wrap dt{
    display: inline-block;
    padding:5px 30px;
    color:#fff;
    font-size:18px;
    font-weight:700;
    text-align:center;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    background:#7459b9;
}

.box-wrap dd{
    padding:15px 25px;
    border:1px solid #7459b9;
}

.box-wrap .sub-list{
    font-size:16px;
    margin-bottom:10px;
}

.footer-wrap{
    background:#404040;
}

.footer-wrap>.inner{
    height:225px;
}

.footer-wrap .f-logo{
    margin-right:67px;
}

.footer-wrap .add-copy{
    color:#a3a3a3;
    font-size:14px;
    font-weight:300;
    letter-spacing:0em;
    word-break:keep-all !important;
    line-height:1.8;
}

.footer-wrap .add-copy .point{
    color:#fff;
    letter-spacing:0em;
}

.footer-wrap .news-btn{
    display: flex;
    align-items:center;
    justify-content:center;
    width:160px;
    margin-left:auto;
    color:#fff;
    font-size:13px;
    line-height:36px;
    border:1px solid #636363;
}
.footer-wrap .news-btn::before{
    display: block;
    width:17px;
    height:12px;
    margin-right:6px;
    background:url(/images/f-news.png) center no-repeat;
    content:'';
}

.footer-wrap .sns-wrap{
    display: none !important;
}

.t-show,
.m-show{
    display: none;
}



/* 모바일 */
@media(max-width:1200px){
    .btn-top{
        right:10px;
    }
}
@media(max-width:991px){
    header .search{
        display: none !important;
    }

    .footer-wrap>.inner{
        flex-direction:column;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: center;
        /* height:170px; */
        /* min-height:225px; */
    }

    .btn-top{
        display:none;
    }

    .footer-wrap .f-logo{
        order:1;
        margin:0;
    }

    .footer-wrap .add-copy{
        order:3;
        width:calc(100% - 225px);
        padding:50px 0;
    }

    .footer-wrap .news-btn{
        order:2;
        margin-left:0;
        margin-top:15px;
    }
}

@media(max-width:767px){
    html{
        font-size:14px;
    }

    html.on{
        position: relative;
        overflow:hidden;
    }

    header{
        position: fixed !important;
        width:100%;
        padding:0;
        
        z-index:999;
    }

    header>div{
        position: relative;
        background:#fff;
        z-index:9999;
        box-shadow:0px 5px 5px rgba(0,0,0,0.1);
    }

    header .logo{
        max-width:200px;
        margin-bottom:10px;
    }

    header .sns-wrap{
        display: none !important;
    }

    header>div .prev-view{
        display: none;
    }

    header nav .gnb>li>a{
        padding:0 20px;
        text-align:left;
        white-space:normal;
    }
    
    header nav .gnb .prev-view{
        display: flex;
        justify-content:center;
        align-items:center;
        padding:40px 0; 
        border-top:1px solid #e1e1e1
    }

    header nav .gnb .prev-view a{
        margin-left:0;
    }
    
    header nav .gnb .prev-view a::before{
        display: inline-block;
        width:19px;
        height:15px;
        margin-right:5px;
        background:url('/webzine/202211/images/ico-list.png') left center no-repeat;
        content:'';
    }

    header .m-nav-btn{
        display: block;
        /* align-items:center;
        justify-content:center;
        transform:translateY(-50%); */
    }
    /* header .m-nav-btn{
        position: absolute;
        right:30px;
        top:50%;
        display: flex;
        align-items:center;
        justify-content:center;
        transform:translateY(-50%);
    } */
    /* header .m-nav-btn span{
        display: block;
        width:16px;
        height:2px;
        margin-bottom:3px;
        background:#000;
    }
    header .m-nav-btn span:nth-of-type(2){
        width:13px;
        margin-right:3px;
    }
    header .m-nav-btn span:last-of-type{
        margin-bottom:0;
    } */


    header nav{
        display:none !important;
    }
    /* nav.on{
        display:none !important;
    } */

    header nav::after{
        display: none;
    }
    
    header nav.on{
        display: block !important;
        height:100%;
    }

    header nav{
        position: fixed;
        /* top:0;
        padding-top: */
        top:0;
        height:100%;
        background:transparent;
        overflow-y:scroll;
    }

    header nav>.inner{
        padding:0;
        max-width:none;
    }
    
    header nav .gnb{
        position: relative;
        flex-direction:column;
        overflow-y:scroll;
        background:#f79147;
        z-index:999;
    }

    header nav .gnb>li{
        width:100%;
    }

    header nav .gnb>li:nth-of-type(1)>a{
        background:#7459B9;
    }

    header nav .gnb>li:nth-of-type(1)>.lnb a:hover{
        color:#7459B9;
    }

    header nav .gnb>li:nth-of-type(2)>a{
        background:#3870CC;
    }

    header nav .gnb>li:nth-of-type(2)>.lnb a:hover{
        color:#3870CC;
    }

    header nav .gnb>li:nth-of-type(3)>a{
        background:#E4756E;
    }

    header nav .gnb>li:nth-of-type(3)>.lnb a:hover{
        color:#E4756E;
    }

    header nav .gnb>li:nth-of-type(4)>a{
        background:#7AA880;
    }

    header nav .gnb>li:nth-of-type(4)>.lnb a:hover{
        color:#7AA880;
    }

    header nav .gnb>li:nth-of-type(5)>a{
        background:#288195;
    }

    header nav .gnb>li:nth-of-type(5)>.lnb a:hover{
        color:#288195;
    }


    
    header nav .gnb .lnb{
        display: flex;
        flex-wrap:wrap;
        position: relative;
        top:auto;
        height:auto;
        padding-top:10px;
        padding-bottom:50px;
        background:#fff;
        transform:none;
    }

    header nav .gnb .lnb::after,
    header nav .gnb>li::after{
        display: none;
    }

    header nav .gnb .lnb>li{
        width:50%;
        /* border-bottom:1px solid #f5f5f5; */
    }

    header nav .gnb .lnb>li:nth-of-type(2n-1){
        padding-left:20px;
    }

    header nav .gnb .lnb>li:nth-of-type(2n){
        padding-right:20px;
    }

    /* nav .gnb .lnb>li:first-of-type{
        padding-top:9px;
    }

    nav .gnb .lnb>li:last-of-type{
        padding-bottom:36px;
    } */

    header nav .gnb .lnb a{
        text-align:left;
        color:#a7a7a7;
        font-weight:500;
        padding:6px;
    }

    header nav,
    .sub-wrap,
    main{
        padding-top:144px;
    }
    
    .footer-wrap>.inner{
        flex-direction:row;
        align-content: center;
        justify-content:space-between;
    }

    .footer-wrap .f-logo{
        max-width:170px;
    }

    .footer-wrap .add-copy{
        width:100%;
        padding:0;
        margin-top:20px;
        order:4;
    }

    .footer-wrap .sns-wrap{
        display: flex !important;
        order:2;
        margin-left:auto;
        margin-right:10px;
    }

    .footer-wrap .sns-wrap>li{
        margin-left:2px;
    }

    .footer-wrap .sns-wrap>li:first-of-type{
        margin-left:0;
    }

    .footer-wrap .sns-wrap img{
        max-width:30px;
    }

    .footer-wrap .news-btn{
        width:144px;
        margin-top:0;
    }

    .t-show{
        display: block;
    }

    .t-hide{
        display: none;
    }

    .back{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:#000;
        opacity:0.3;
        z-index:998;
    }
    
}

@media(max-width:575px){
    .inner{
        padding-left:10px;
        padding-right:10px;
    }
    header{
        height:120px;
    }
    header>div{
        height: 100%;
    }
    header .logo{
        max-width:150px;
    }
    header>div .webzine-vol{
        width:170px;
        padding:12px 0;
        margin-left:15px;
        font-size:14px;
    }

    header nav,
    .sub-wrap,
    main{
        padding-top:120px;
    }

    header .m-nav-btn{
        width:23px;
        right:10px;
    }
    
    .footer-wrap>.inner{
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:center;
        height:auto;
        padding-top:30px;
        padding-bottom:30px;
    }
    .footer-wrap .f-logo{
        max-width:220px;
        width:100%;
    }

    .footer-wrap .f-logo img{
        width:100%;
    }

    .footer-wrap .add-copy{
        width:auto;
        padding:0;
        text-align:center;
    }
    .footer-wrap .news-btn{
        order:3;
        max-width:232px;
        width:100% !important;
        margin-top:12px;
        margin-bottom:0px;
    }
    .footer-wrap .sns-wrap{
        margin:0;
        margin-top:25px;
    }
    
    .footer-wrap .main-footer .sns-wrap li,
    .footer-wrap .sns-wrap>li{
        margin-left:8px;
    }



    .footer-wrap .sns-wrap img{
        max-width:100%;
    }

    .m-hide{
        display: none;
    }

    .m-show{
        display:block;
    }
}