@import url('/refer/fontello/css/fontello.css');
@font-face {
    font-family: 'NanumBarunGothic';
    font-style: normal;
    font-weight: 400;    
    src: url(/refer/font/NanumBarunGothicSubset.woff2) format("woff2"), 
        url(/refer/font/NanumBarunGothicSubset.woff) format("woff"), 
        url(/refer/font/NanumBarunGothicSubset.ttf) format("truetype");    
}

/* CSS-RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {padding: 0; margin: 0; border: 0; font-size: 100%; font: inherit;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
img,fieldset {border: 0;}
input, button, select {outline: none;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
ol, ul {list-style: none; padding: 0; margin: 0;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, button {outline: none;}

/* LINK-RESET */
a:link{text-decoration:none; color: inherit; }
a:visited{text-decoration:none; color: inherit;}
a:hover{text-decoration:none; color: inherit;}
a:active{text-decoration:none; color: inherit;}	

/* CLEAR */
.clear {zoom:1;}
.clear::after{content:''; display:block; clear:both;}

/* Hide */
.hide {display: inline-block !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;
}
.hides {position: absolute; left: -3000%;}
@media screen and (max-width:768px) {}

/* END CSS-RESET */

/* === BASIC === */
body {
    font-family:'NanumBarunGothic','Apple SD Gothic Neo','Malgun Gothic',sans-serif;    
    font-size: 0.9rem;
    letter-spacing: -0.05em;
    /* font-weight: 400; */
    white-space: normal;
    word-break: break-all;
    color: #353535;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
}
@media screen and (max-width:768px) {
    body {font-size: 0.967rem;}
}
/* === Layout === */
.main-mc {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 10px auto 18px;
}
.content-mc, .side-mc {
    padding: 0 8px;
    box-sizing: border-box;
}
.content-mc {
    flex: 1; 
    width: 100%; 
    max-width: 920px;
}
.side-mc {
    flex: 1; 
    max-width: 450px;
}
@media screen and (max-width:768px) {
    .main-mc {flex-direction:column;}
    .content-mc {flex: none; width: 100%;}
    .side-mc {width: 100%; max-width: 100%; margin-top: 18px; flex:none;}
}
header {
    position: sticky;
    top: 0; left: 0; right: 0;
    z-index: 20;
}
/* === End-Layout === */

/* === Header === */
.headza {
    background: #b41010 repeating-linear-gradient(-50deg, transparent, transparent 7px, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 14px) ;  
    color: #fff;
    position: relative;
    overflow: hidden;
}
.headza::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent url(/images/icons/linx2.png) no-repeat right 60% / 40%;
}
.headza .back-imz {
    position: absolute;
    top: 0; left: 145px; right: 0; height: 0;
    z-index: 0;
    animation: rumo 1.5s infinite alternate;
}
.headza .back-imz > span {
    display: inline-block;
    border-radius: 100%;
    position: absolute;
}
.headza .back-imz > span:first-child {width: 8px; height: 8px; background-color: #fff; top: 18px; left: 3px;}
.headza .back-imz > span:nth-child(2) {width: 13px; height: 13px; background-color: yellow; top: 30px; left: 13px;}
.headza .back-imz > span:last-child {width: 15px; height: 15px; background-color: #fff; top: 13px; left: 27px;}
@keyframes rumo {
    from {opacity: 0;}
    to {opacity: 1;}
}

.headza .bx-headza {
    width: 100%;
    max-width: 1400px;
    height: 75px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.bx-headza h1 {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    left: 10px;
    z-index: 20;
}
.bx-headza h1 img {
    width: 30px;
    vertical-align: middle;
    margin-right: -3px;
}
.bx-headza h1 .titx {
    display: inline-block;
    transform: skew(-10deg);
    font-size: 1.6em;
    font-weight: 600;
    color:#fee8ca;
    font-family: sans-serif;
    vertical-align: middle;
}
.bx-headza .pc-form {
    position: absolute;
    bottom: 22px; left: 215px;
    font-size: 16px;
    font-weight: 550;
    z-index: 10;
}
.bx-headza .pc-form ul {
    display: flex;
}
.bx-headza .pc-form li {
    margin-left: 10px;
}
.bx-headza .pc-form li:not(:first-child)::before {
    content: '/';
    margin-right: 10px;
    color: rgba(255,255,255,0.5);
}
/* - Side Menu - */
.bx-headza label {
    position: absolute; 
    top: 50%; transform: translateY(-50%);
    z-index: 30;
    right: 10px;
    width: 33px;
    height: 33px;
    font-size: 28px;
    color: #e5e5e5;
    cursor: pointer;
    text-align: center;
    display: none;
}
.bx-headza label span.nav-out {
    color:#fff;
    display: none;
}
.bx-headza > input {display: none;}
.bx-headza > input:checked ~ .nav-side {right: 0; z-index: 20;}
.bx-headza > input:checked ~ label span.nav-in {display: none;}
.bx-headza > input:checked ~ label span.nav-out {display: block;}
.bx-headza > input:checked ~ label {
    position: fixed;
    top: 40px; right: 10px;
}
.bx-headza .nav-side {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0; 
    right: -100%;
    background-color: rgba(0,0,0,0.7);    
    transition: right 0.3s;
    z-index: 20;
}
.bx-headza .nav-side .menu-box {
    position: absolute;
    width: 65%;
    top: 0; bottom: 0; right: 0;
    background-color: #fafbfc;
}
.bx-headza .nav-side .menu-box .barza {
    height: 70px;
    background-color: #414141;
    color: #fff;   
    line-height: 70px;
    padding-left: 17px;
    font-size: 1.1em; 
    font-weight: 600;
}
.bx-headza .nav-side ul {
    margin: 20px auto 0;
    padding: 0 10px 0;
    color: #444;
}
.bx-headza .nav-side li {
    display: block;
    position: relative;
}
.bx-headza .nav-side li a {
    display: block;
    width: 100%;
    text-align: left;
    height: 45px;
    line-height: 45px;    
    font-size: 1em;
    font-weight: 550;
    padding-left: 10px;
    box-sizing: border-box;
}
.bx-headza .nav-side li a::before {
    content: '\e831';
    font-family: 'fontello';
    margin-right: 8px;
    color: #999;
}
.bx-headza .nav-side li fieldset {
    display: block;
    width: 65%;
    padding: 15px 0;
    position: relative;
    margin: auto;
}
.bx-headza .nav-side li input {
    height: 40px;
    width: 100%;
    font-size: 0.95em;
    box-sizing: border-box;
    padding: 0 35px 0 15px;
    border: 1px solid #bbb;
    border-radius: 35px;
    }
.bx-headza .nav-side li button {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    font-size: 20px;
    right: 5px;
    border: none;
    background-color: transparent;
}
@media screen and (max-width:768px) {
    .headza .bx-headza {height: 70px;}    
    .bx-headza .pc-form {display: none;}    
    .bx-headza label {
        display: block;
    }
}
/* === End-Header === */

/* === Title & Basic === */
.tit03 {
    position: relative;
    font-size: 1.27em;
    font-weight: 600;
    padding: 8px 5px 13px 0;
    box-sizing: border-box;
    color: #187cbd; 
    vertical-align: middle;   
}
.tit03::before {
    content: '';
    display: inline-block;
    width: 5px; height: 1em;
    background-color: #b52928;
    margin-right: 5px;
    vertical-align: middle; 
    border-radius: 0.2em;
    box-sizing: border-box;  
}
.tit03 .plus-mx {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    right: 4px;
    font-size: 15px;
    color: #999;    
    background-color: #eee;
    border-radius: 100%;
    padding: 6px 8px;
    font-weight: 400; 
    vertical-align: middle;       
}
.tit03 .plus-mx::before {
    content: '\f196';
    font-family: 'fontello';
    vertical-align: middle;
}
.contza {
    border-radius: 5px;
    border: 1px solid #e4e8eb;
    background-color: #fafbfc;
    box-sizing: border-box;
    padding: 5px 7px;
    margin-bottom: 10px;    
} 
/* === End-Title & Basic === */

/* === Main-Page === */

/* -- Top slide -- */
.wwp-slxo {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to bottom, transparent, transparent 80%, #aaa 80%, #aaa 100%) ;  
}
.wwp-slxo .bx-slxo {
    overflow: hidden;
}
.bx-slxo .im-slxo {
    display: block;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    overflow: hidden;
}
.bx-slxo .im-slxo .imgxo {
    position: relative;
    padding-top: 60%;
    overflow: hidden;
    background: #f5f5f5 url(/images/icons/no-imgs.png) no-repeat center / 25%;    
}
.bx-slxo .im-slxo .imgxo img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    min-height: 100%;
}
.bx-slxo .im-slxo .titxo {
    text-align: center;
    line-height: 2.6em;
    padding: 0 7px;
    display: block;
    background-color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;    
    box-sizing: border-box;
}

/* -- End-Top slide -- */


/* -- Thums-Gallery -- */
.mx-thumx {
    width: 100%;
    overflow: hidden;
}
.mx-thumx .bx-thumxo {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0;
}
.mx-thumx .bx-thumxo li {
    flex: 1;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
}
.mx-thumx .bx-thumxo li:not(:first-child) {
    margin-left: 2%;
}
.mx-thumx .bx-thumxo li .imgx {
    display: block;
    position: relative;
    padding-top: 66%;
    background: #f5f5f5 url(/images/icons/no-imgs.png) no-repeat center / 43%;
    overflow: hidden;
}
.mx-thumx .bx-thumxo li .imgx img {
    position: absolute;
    top: 0; left: 0; width: 100%; min-height: 100%;
}
.mx-thumx .bx-thumxo li .titlex {
    line-height: 2.3em;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;  
    background-color: #fff;  
    padding: 0 7px;
    box-sizing: border-box;
}
@media screen and (max-width:768px) {
    .mx-thumx .bx-thumxo li {
        flex: none;
        width: 49%;
    }   
    .mx-thumx .bx-thumxo li:not(:first-child) {margin-left: 0;} 
    .mx-thumx .bx-thumxo li:nth-child(2n) {margin-left: 2%;}
    .mx-thumx .bx-thumxo li:nth-child(n+3) {margin-top: 2%;}
}
/* -- End-Thums-Gallery -- */

/* -- list02 -- */
.m-list2 {}
.m-list2 a {
    display: flex;
}
.m-list2 li .descz {
    display: flex;
    flex: 1;
    align-items: center;
    line-height: 2.4em;
    overflow: hidden;
}
.m-list2 li .descz .catez {
    display: block;
    color: #187cbd;
    font-size: 0.88em;
    padding-right: 6px;
}
.m-list2 li .descz .catez:before {content: '[';}
.m-list2 li .descz .catez:after {content: ']';}
.m-list2 li .descz .titlz {
    flex: 1;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;    
}
/* -- End-list02 -- */

/* -- List Article -- */
.list-tx {}
.list-tx ul {
    /* border-top: 1px solid #e6e6e6; */
}
.list-tx li {
    border-bottom: 1px dotted #cdcdcd;
    box-sizing: border-box;
}
.list-tx li a {
    display: flex;
    align-items: center;
    padding: 3px 5px;
    box-sizing: border-box;
}
.list-tx li .imgo {
    width: 125px;
    height: 85px;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    margin-right: 7px;
    background: #f5f5f5 url(/images/icons/no-imgs.png) no-repeat center / 43%;
}
.list-tx li img {
    display: block;
    width: 100%;
    min-height: 100%;
}
.list-tx li .desco {
    flex: 1;
}
.list-tx li .desco .cateo {
    display: block;
    padding: 3px 0 5px;
    font-size: 0.88em;
    color: #187cbd;
    /* margin: 3px 0; */
}
.list-tx li .desco .cateo:before {content: '[';}
.list-tx li .desco .cateo:after {content: ']';}
.list-tx li .desco .titleo {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5em;
    max-height: 3em;
    overflow: hidden;   
}
/* -- End-List Article -- */


/* -- Detail_Page -- */
.wwp-atp {
    padding: 10px 8px;
    box-sizing: border-box;
}
.wwp-atp .vtitle {
    font-size: 1.2em;
    font-weight: 600;
    overflow: hidden;
    padding: 4px 0 9px;
    color: #111;
}
.wwp-atp .vtitle > p {
    display: block;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5em;
    max-height: 3em;
    overflow: hidden;   
}
.wwp-atp .vcategory {
    text-align: right;
    font-size: 0.85em;
    color:#777;
    padding: 9px 7px 9px 0;
    box-sizing: border-box;
    background-color: #fff;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ddd;
}
.wwp-atp .vcontent {
    line-height: 1.8;
    padding: 7px 0 13px;
}
.wwp-atp .vcontent img {
    display: block;
    max-width: 100%;
    margin: 10px auto;
}
.wwp-atp .vshare {
    text-align: right;
    padding: 7px 0 10px;
}
.wwp-atp .vshare a {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 3px;
    overflow: hidden;
    margin-left: 5px;
}
.wwp-atp .vshare a img {
    max-width: 100%;
}
.wwp-atp .vother {
    border-top: 1px solid #cdcdcd;
}
.wwp-atp .vother li {
    display: block;
}
.wwp-atp .vother li:not(:last-child) {
    border-bottom: 1px dotted #888;
}
.wwp-atp .vother li a {
    display: block;
    line-height: 37px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;    
}
.wwp-atp .vother li a:before {
    content: '\f104';
    font-family: 'fontello';
    margin-right: 6px;
    color: #187cbd;
}
.wwp-atp .vboxx {
    text-align: right;
    border-top: 1px solid #cdcdcd;
    padding: 10px 0;
    box-sizing: border-box;
}
.wwp-atp .vboxx .go_list {
    display: inline-block;
    padding: 7px 15px;
    background-color: #187cbd;
    color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 2px #666;

}
/* -- End-Detail_Page -- */

/* === Side-Area === */
.wwp-atss {
    width: 100%;
    box-sizing: border-box;
}
.rank-ats, .list-rea {
    border: 1px solid #e4e8eb;
    background-color: #fafbfc;
    padding: 5px 10px 10px;
    border-radius: 5px;
    box-sizing: border-box;
}
/* - gallery Box - */
.wwp-imgr {}
.wwp-imgr img {
    max-width: 100%;
    width: 100%;
    min-height: 100%;
}
.wwp-imgr .top-imgr {
    position: relative;
    padding-top: 60%;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #f5f5f5 url(/images/icons/no-imgs.png) no-repeat center / 35%; 
    border-radius: 3px;
    box-sizing: border-box;   
}
.wwp-imgr .top-imgr a {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
}
.wwp-imgr .mm-imgr {
    padding: 5px 0 10px;
}
.wwp-imgr .mm-imgr ul {display: flex;}
.wwp-imgr .mm-imgr li:first-child {margin-right: 5px;}
.wwp-imgr .mm-imgr li {
    flex: 1;
    border: 1px solid #ddd;
    background: #f5f5f5 url(/images/icons/no-imgs.png) no-repeat center / 35%;  
    border-radius: 3px;
    box-sizing: border-box;  
    overflow: hidden;  
}
/* - article list - */
.list-ats {}
.list-rnk {counter-reset : itex;}
.list-ats li:first-child {border-top: 1px dotted #cdcdcd;}
.list-ats li {
    border-bottom: 1px dotted #cdcdcd;
}
.list-ats li a {
    line-height: 2.55em;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;  
    vertical-align: middle; 
}
.list-rnk li a::before {
    counter-increment: itex;    
    content: counter(itex);
    display: inline-block;
    background-color: #187cbd;
    padding: 0 7px;
    height: 22px;
    line-height: 22px;
    border-radius: 3px;
    font-size: 0.7em;
    color: #fff;
    margin-right: 4px;
}
.list-dod li a::before {
    content: '\e831';
    font-family: 'fontello';
    margin-right: 5px;
    color: #187cbd;
}
/* .list-rea {padding: 10px 0 20px;} */

/* === End-Side-Area === */

/* -- Banner -- */
.ba30 {
    text-align: center;
    padding: 15px 0;
    box-sizing: border-box;
}
.ba30 img {
    max-width: 100%;
}
/* -- End-Banner -- */

/* -- List-DP -- */
.wwp-listdt {
    padding: 5px 7px;
    border: 1px solid #e4e8eb;
    background-color: #fafbfc;    
    box-sizing: border-box;
}
.bx-listdt {
    border-top: 1px solid #ccc;
}
.bx-listdt li {}
.bx-listdt li a {
    display: flex;
    line-height: 2.6em;
    align-items: center;
    border-bottom: 1px dotted #ccc;
}
.bx-listdt li .title, .bx-listdt li .cate {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;    
}
.bx-listdt li .title {
    flex: 1;
}
.bx-listdt li .title::before {
    content: '\e831';
    font-family: 'fontello';
    margin-right: 5px;
    font-size: 0.8em;
    color: #999;
}
.bx-listdt li .cate {
    width: 65px;
    font-size: 0.85em;
    text-align: center;
    position: relative;
    color: #187cbd;
}
.bx-listdt li .cate::before {content: '[';}
.bx-listdt li .cate::after {content: ']';}
.paging-bx {
    text-align: center;
    padding: 10px 4px;
}
.paging-bx a {
    display: inline-block;
    text-align: center;
    width: 23px;
    height: 23px;
    line-height: 23px;
    font-size: 0.9em;
    background-color: #fafafa;
    border: 1px solid #dadada;

}
.sch-bxo {
    text-align: left;
    padding: 11px 0 8px;
}
.sch-bxo input, .sch-bxo .subx {
    border: 1px solid #b4bcc3;
    box-sizing: border-box;
    height: 25px;
    line-height: 25px;
}
.sch-bxo input {
    width: 130px;
    padding: 0 8px;
}
.sch-bxo .subx {
    padding: 0 8px;
    background-color: #748594;
    color: #f5f5f5;

}
/* -- End-List-DP -- */
/* === End-Main-Page === */

/* === Footer === */
.footza {
    background-color: #414141;
    font-size: 12.5px;
    color: #bfbfbf;
    text-align: center;
    padding: 10px 7px;
    line-height: 1.6;
    box-sizing: border-box;
}
.footza .menu-bar {display: block;}
.footza .menu-bar a {
    display: inline-block;
    margin: 0 5px;
    color: #999;
}
.footza .com-info {
    padding-top: 13px;
}
.footza .com-info .copy {
    display: block;
    padding-top: 3px;
}
@media screen and (max-width:768px) {
    .footza .menu-bar {display: none;}
    .footza { padding: 10px 7px 35px; }    
}
/* === End-Footer === */

/* === Top Button === */
#back-to-top {
    position: fixed;
    bottom: 65px;
    right: 15px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    color: #444;
    padding: 7px 12px;
    border-radius: 5px;
    font-size: 1.25em;
    letter-spacing: normal;
    display: none;
}
/* === End-Top Button === */

/* === Banner-bottom === */
.bann-bom {
    display: none;
}
@media screen and (max-width:768px) {
    .bann-bom {
        //display: block;
        position: fixed;
        left: 0; right: 0; bottom:0;
        height: 110px;
        padding: 5px 0;
        background-color: #eee;
        box-sizing: border-box;
    }
    .closeoo {
        position: absolute;
        font-size: 20px;
        top: 2px; right: 6px;
        color: #bbb;
    }
    .bann-bom img {
        width: 320px;
        
    }
}