@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

/* 공용변수 */
:root {
    --main-text-family:"Noto Sans KR", sans-serif;
    --main-text-size: 1.2em;
    --main-input-size: 1.6em;
    --main-color-text:rgba(80,80,80,1);
    --main-color-brand:rgba(68,153,196,1);
    --main-color-brand2:rgba(98,167,125,1);
    --main-color-banner-bg:rgba(50,50,50,1);
    --main-color-white:rgba(255,255,255,1);
    --main-color-white-alpha:rgba(255,255,255,0.05);
    --main-color-white-alpha2:rgba(255,255,255,0.75);
    --main-color-gray:rgba(120,120,120,1);
    --main-color-gray2:rgba(200,200,200,1);
    --main-color-gray-alpha:rgba(0,0,0,0.05);
    --main-color-black:rgba(0,0,0,1);
    --main-color-black-alpha:rgba(0,0,0,0.8);
    --main-bg-category-0:rgba(100,100,200,1);
    --main-bg-category-1:rgba(50,50,150,1);
    --main-bg-category-2:rgba(0,0,100,1);
    --main-bg-category-3:rgba(120,50,200,1);
    --main-bg-category-4:rgba(50,0,100,1);
    --main-bg-category-5:rgba(30,30,70,1);
    --main-bg-category-6:rgba(0,0,0,1);
}

/* 초기화 */

html {overflow-y:scroll;height:100%;min-width:320px; }
body {font-size:10px;margin:0;padding:0;background:#f8f8f8;height:100%;font-family:var(--main-text-family);}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img, figure {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:var(--main-text-size);font-family:var(--main-text-family);}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:var(--main-input-size);font-family:var(--main-text-family);}}
button {cursor:pointer}
input[type=text], input[type=password], input[type=submit], input[type=image], button {font-size:var(--main-input-size);-webkit-appearance:none}
textarea, select {font-size:var(--main-input-size);font-family:'Malgun Gothic', dotum, sans-serif}
textarea {border-radius:0;-webkit-appearance:none;font-family:'Malgun Gothic', dotum, sans-serif}
select {margin:0;background:none;font-family:var(--main-text-family);}}
p {font-size:var(--main-text-size);margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {font-size:var(--main-text-size);color:#000;text-decoration:none}
ul,li,dl,dt,dd {padding:0;margin:0}
ul {list-style:none}

div.to_content,
h1#hd_h1 {
    display:none;
}
ul#bnb_1dul {  }
ul#bnb_1dul>li {
    float:left;
}


a { text-decoration:none; outline:none; cursor:pointer; }
#zBody { position:relative; width:100%; height:100%; z-index:90; }
#zBG { position:fixed; top:0; left:0; width:100%; height:100%; z-index:50; }
.zWrap { margin:0 auto; width:340px; }

.zTitle { text-align:center; font-size:12px; color:#fff; padding:20px 0 10px 0; }
.zInfo { text-align:center; font-size:12px; color:#fff; padding:20px 0 10px 0; }
.zInfo>ol {
    margin:0;
}
.zLogo { text-align:center; margin-top:20%; padding-left:5px; }
.zLogo img { width:100px;  }
.zBtn { clear:both; color:#fff; font-size:0; text-align:center; margin:10px; padding-bottom:90px; }
.zBtn a { display:inline-block; text-align:center; font-size:12px; color:#fff; margin:0; padding:5px; border:solid 3px rgba(255,255,255,0); }
.zBtn a:hover { border:solid 3px #fff; }
.zBtn a i.fa { font-size:32px; color:#fff; margin-bottom:5px; }

a.zBox { padding:1px 4px; background:rgba(255,255,255,0.3); color:rgba(0,0,0,0.8); border-radius:3px; display:inline-block; margin:3px 0; }
a.zBox:hover { background:rgba(255,255,255,1); }
span.zBox { padding:1px 4px; background:rgba(255,255,255,1); color:rgba(0,0,0,0.8); border-radius:3px; display:inline-block; margin-bottom:3px; }

.zIndexImg { width:100%; height:100%; }
.zIndexImg .zFilter { position:absolute; left:0; top:0; width:100%; height:100%; background:url('/theme/basic/mobile/img/index_filter.png'); z-index:52; }
.zIndexImg .zSlide { z-index:51; }

.zSlide a { position:absolute; width:100%; height:100%; display:block; background-position: center center !important; background-size:cover !important; }

.embed-youtube { position: relative; width: 100%; height: 0; padding-bottom: 56.25%;
    margin-bottom:5px;border-radius:10px;overflow:hidden;}
.embed-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.fb_iframe_widget {
            margin:5px 0 900px; border-radius:10px; overflow:hidden;
            }

#posts { font-family:var(--main-text-family); }
#posts>div { background:var(--main-color-white-alpha2); border-radius:10px; padding:10px; margin-bottom:4px; }
#posts>div:hover { background:#fff; cursor:pointer;}
#posts>div>img { overflow:hidden; width:20px; border-radius:5px; }
#posts>div>strong { margin-left:5px; }
#posts>div>span { margin-left:5px; color:var(--main-color-gray); }
#posts>div>div { font-size:1rem; white-space:wrap; clear:both; margin-top:5px; line-height:1.3; }