@charset "utf-8";
*{margin: 0;padding:0;}
html{font-size:15px;}
body{background:url(../images/bg.jpg); color:#333; font-family: 'Noto Sans KR', sans-serif; letter-spacing:-0.025em; font-weight:300;}
ul,ol{list-style: none; margin:0;}
h1,h2,h3,h4,h5,h6{line-height:1.1;}
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="submit"]{outline:0; border:0;}
button{border:0; outline:0; background:none;}


.wrap{
    margin:50px auto;
    padding:10px 22px 16px 23px;
    max-width:945px;
    background-image:url(../images/bg-top.png), url(../images/bg-right.png), url(../images/bg-bottom.png), url(../images/bg-left.png);
    background-position:23px 0, 100% 10px, 23px 100%, 0 10px;
    background-size:calc(100% - 45px) 10px, 22px calc(100% - 26px), calc(100% - 45px) 16px, 23px calc(100% - 26px);
    background-repeat:no-repeat;
}

.wrap-inner{
    border:1px solid #e1e1e1;
    box-shadow:3px 0px 7px rgba(19, 35, 47, 0.13);
    background:#fff;
}

.inner{
    padding-left:30px;
    padding-right:30px;
}

/*header*/
header{
    display: flex;
    align-items:center;
    justify-content:center;
    position: relative;
    height:130px;
    padding-left:180px;
    padding-right:82px;
    padding-bottom:4px;
    text-align:center;
}

header .volume{
    position: absolute;
    top:50%;
    left:30px;
    width:100%;
    max-width:140px;
    color:#fff;
    font-family:'nanumsquare', sans-serif;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    line-height:32px;
    border-radius:16px;
    background:#0d5289;
    transform:translateY(calc(-50% + 5px));
}

header h1{
    width:100%;
    max-width:431px;
}

header h1>a{
    display: block;
    height:72px;
    background:url(../images/logo.png)left center no-repeat;
    background-size:100%;
}

header .menu-btn{
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position: absolute;
    top:50%;
    right:30px;
    width:42px;
    height:42px;
    border-radius:100%;
    background:#f5f5f5;
    transform:translateY(calc(-50% + 5px));
}

header .menu-btn span{
    display: block;
    width:15px;
    height:2px;
    margin-bottom:3px;
    background:#000;
}

header .menu-btn span:nth-child(2){
    width:12px;
    margin-right:3px;
    background:#000;
}

header .menu-btn span:last-of-type{
    margin-bottom:0;
}

header .line{
    position: absolute;
    left:0;
    bottom:0;
    display: flex;
    width:100%;
    background:#f5f5f5;
}

header .line span{
    display: block;
    height:4px;
}

header .line span:nth-of-type(1){
    width:16.1%;
    background:#0d5289;
}

header .line span:nth-of-type(2){
    width:17.5%;
    background:#ef7f00;
}

header .line span:nth-of-type(3){
    width:34%;
    background:#f7b951;
}

header nav{
    display: none;
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    word-wrap: break-word;
    word-break: keep-all;
    background:#fff;
    transform:translateY(100%);
    box-shadow:0px 5px 5px rgba(0,0,0,0.3);
    z-index:99;
}

header nav a{
    display: block;
    padding:10px 0;
    border-bottom:1px solid #e1e1e1
}

header nav a:last-of-type{
    border-bottom:none;
}

footer{
    text-align:center;
    
}

footer .f-menu{
    display: flex;
    flex-wrap:wrap;
    background:#0d5289;
}

footer .f-menu li{
    position: relative;
    width:33.33%
}

footer .f-menu li::after{
    position: absolute;
    top:50%;
    right:0;
    width:1px;
    height:30px;
    background:#fff;
    transform: translateY(-50%);
    content:'';
}

footer .f-menu li:last-of-type::after{
    display: none;
}

footer .f-menu li a{
    display: block;
    color:#fff;
    font-size:16px;
    font-weight:400;
    line-height:47px;
}

footer .f-link{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-around;
    padding-top:21px;
    padding-bottom:25px;
    background:#f5f5f5;
}

footer .f-link .img{
    position: relative;
    display: flex;
    align-items:center;
    justify-content:center;
    width:105px;
    height:105px;
    border-radius:100%;
    background:#fff;
}

footer .f-link .img::after{
    display: block;
    position: absolute;
    right:0;
    bottom:0;
    width:24px;
    height:24px;
    border-radius:100%;
    background:url(../images/f-link-more.png)#f49b00 center no-repeat;
    content:'';
}

footer .f-link p{
    margin-top:15px;
    color:#333;
    font-size:13px;
    font-weight:400;
}

footer .f-info{
    text-align:center;
    background:#32373d;
}

footer .f-info .mail{
    padding:25px 0;
    color:#b1b1b1;
    font-size:15px;
    font-weight:400;
    letter-spacing:-0.025em;
    line-height:1.6;
    border-bottom:1px solid #5b5f64;
}

footer .f-info .mail a{
    color:#fff;
}

footer .f-info .add-copy{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:19px 0 23px;
    color:#fff;
    font-size:13px;
    font-weight:400;
    letter-spacing:-0.025em;
    line-height:1.5;
}

footer .f-info .add-copy>p{
    width:calc(100% - 133px);
    text-align:left;
}

footer .f-info .add-copy .prev-webzine{
    display: flex;
    justify-content:center;
    width:113px;
    padding:4px 0;
    border:1px solid #fff;
}

/* footer .f-info .add-copy #select{
    height:28px;
    padding-right:15px;
    color:#fff;
    text-align-last: center;
    text-align: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
    border:none;
    background:transparent;
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    background:url(../images/sel-arr.png)right center no-repeat;
}

footer .f-info .add-copy select::-ms-expand {
    display:none
}

footer .f-info .add-copy #select option{
    color:#333;
} */

@media (max-width:875px){
    /* footer .f-link{
        padding-left:153px;
        padding-right:153px;
    } */
    .wrap{
        margin-top:0;
    }
    footer .f-link li:nth-of-type(-n+4){
        width:25%;
        margin-bottom:10px;
    }

    footer .f-link li:nth-last-of-type(-n+3){
        width:33.3%;
    }
    footer .f-link .img{
        margin:0 auto;
    }
}

@media (max-width:767px){
    header{
        justify-content: flex-start;
        padding-left:30px;
        padding-right:100px;
    }
    header .volume{
        display: none;
    }
}

@media (max-width:575px) {
    html{
        font-size:15px;
    }

    .wrap{
        margin:0;
        padding:0;
        background: none;
    }
    
    .wrap-inner{
        border:none;
        box-shadow:none;
    }

    .inner{
        padding-left:10px;
        padding-right:10px;
    }

    header{
        height:90px;
    }

    header h1{
        max-width:191px;
    }

    header h1>a{
        height:44px;
        background:url(../images/logo_m.png)left center no-repeat;
    }

    /* footer .f-link li{
        width:33.3% !important;
    } */

    footer .f-link{
        justify-content: flex-start;
        padding:0;
        background:#fff;
    }

    footer .f-link li{
       width:50% !important;
       margin-bottom:0 !important;
       border-bottom:1px solid #e1e1e1
    }

    footer .f-link li:nth-child(2n){
        border-left:1px solid #e1e1e1
    }

    footer .f-link li:last-of-type{
        width:100% !important;
    }

    footer .f-link .img{
        width:100%;
        height:50px;
        border-radius:0;
    }

    footer .f-link .img::after{
        position: relative;
        margin-left:10px;
    }

    footer .f-link p{
        display: none;
    }
    

    /* footer .f-link p br{
        display: none;
    } */
    
    footer .f-menu li{
        width:100%;
        padding:0 10px;
        
    }

    footer .f-menu li::after{
        display: none;
    }

    footer .f-menu li a{
        border-bottom:1px solid #fff;
    }

    footer .f-menu li:last-child a{
        border-bottom:none;
    }

    footer .f-info .mail br{
        display: none;
    }

    footer .f-info .add-copy{
        flex-direction:column;
        justify-content:center;
    }

    footer .f-info .add-copy>p{
        order:2;
        justify-content:center;
        width:100%;
        margin-top:10px;
        text-align:center;
    }

    footer .f-info .add-copy .prev-webzine{
        order:1;
    }
}