@charset "utf-8";


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, 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, p,
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, button {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Noto Sans Korean', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	letter-spacing: -0.025em;
}
/* HTML5 display-role reset for older browsers */

html, body {width:100%; height:100%; font-size: 16px; }
html, body * { letter-spacing: -0.01em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, header, footer {display: block;}
body {line-height: 1.4; color:#333333; }
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
sub { font-size: 0.875em; }
table {border-collapse: collapse; border-spacing: 0;}
strong { font-weight: 500; }

.Hidden, .blind {position:absolute; width:1px; height:1px; margin:0; padding:0; background:none; font-size:0px; color:transparent; line-height:0; left:-9999px; top:-9999px; overflow:hidden;}
.Dis_none {display:none; position:absolute; width:1px; height:1px; margin:0; padding:0; background:none; font-size:0px; color:transparent; line-height:0; left:-9999px; top:-9999px; overflow:hidden;}
caption {overflow:hidden;width:1px;height:1px;padding:0;margin-top:-1px;font-size:0;line-height:0;text-indent:-9999px; overflow: hidden;}
button { background: none; cursor: pointer; line-height: inherit; }

a { text-decoration:none; color:#333333; cursor:pointer;}

.button {
            border-radius: 4px;
            background-color: #F3F3F3;
            margin: 2px;
            width: 39.84px;
            height: 32px;
        }

.left { text-align: left !important; }
.center { text-align: center !important; }
.right { text-align: right !important; }
.justify { text-align: justify !important; }

.bold { font-weight: 500; }
.extraBold { font-weight: 600; }

.underline { text-decoration: underline;}

.fcolorBk { color: #333333 !important; }
.fcolorRed { color: #ff0000 !important; }
.fcolorBlue { color: #005aab !important; }
.fcolorGreen { color: #198c56 !important; }
.fcolorOrange { color: #DD3B00 !important; }

.relative { position:relative; }

.enterLine { display: block; }
.img-thumbnail { max-width: 100%; height: auto; }

/* margin */
.mtop0 { margin-top: 0px !important; }
.mtop5 { margin-top: 5px !important; }
.mtop10 { margin-top: 10px !important; }
.mtop20 { margin-top: 20px !important; }
.mtop30 { margin-top: 30px !important; }
.mtop40 { margin-top: 40px !important; }
.mtop50 { margin-top: 50px !important; }
.mtop60 { margin-top: 60px !important; }
.mtop70 { margin-top: 70px !important; }
.mtop80 { margin-top: 80px !important; }
.mtop90 { margin-top: 90px !important; }
.mtop100 { margin-top: 100px !important; }

.mbtm0 { margin-bottom: 0px !important; }
.mbtm5 { margin-bottom: 5px !important; }
.mbtm10 { margin-bottom: 10px !important; }
.mbtm20 { margin-bottom: 20px !important; }
.mbtm30 { margin-bottom: 30px !important; }
.mbtm40 { margin-bottom: 40px !important; }
.mbtm50 { margin-bottom: 50px !important; }
.mbtm60 { margin-bottom: 60px !important; }
.mbtm70 { margin-bottom: 70px !important; }
.mbtm80 { margin-bottom: 80px !important; }
.mbtm90 { margin-bottom: 90px !important; }
.mbtm100 { margin-bottom: 100px !important; }

.mleft0 { margin-left: 0px !important; }
.mleft5 { margin-left: 5px !important; }
.mleft10 { margin-left: 10px !important; }
.mleft20 { margin-left: 20px !important; }
.mleft30 { margin-left: 30px !important; }
.mleft40 { margin-left: 40px !important; }
.mleft50 { margin-left: 50px !important; }
.mleft60 { margin-left: 60px !important; }
.mleft70 { margin-left: 70px !important; }
.mleft80 { margin-left: 80px !important; }
.mleft90 { margin-left: 90px !important; }
.mleft100 { margin-left: 100px !important; }

.mright0 { margin-right: 0px !important; }
.mright5 { margin-right: 5px !important; }
.mright10 { margin-right: 10px !important; }
.mright20 { margin-right: 20px !important; }
.mright30 { margin-right: 30px !important; }
.mright40 { margin-right: 40px !important; }
.mright50 { margin-right: 50px !important; }
.mright60 { margin-right: 60px !important; }
.mright70 { margin-right: 70px !important; }
.mright80 { margin-right: 80px !important; }
.mright90 { margin-right: 90px !important; }
.mright100 { margin-right: 100px !important; }


/* padding */
.ptop5 { padding-top: 5px !important; }
.ptop10 { padding-top: 10px !important; }
.ptop20 { padding-top: 20px !important; }
.ptop30 { padding-top: 30px !important; }
.ptop40 { padding-top: 40px !important; }
.ptop50 { padding-top: 50px !important; }
.ptop60 { padding-top: 60px !important; }
.ptop70 { padding-top: 70px !important; }
.ptop80 { padding-top: 80px !important; }
.ptop90 { padding-top: 90px !important; }
.ptop100 { padding-top: 100px !important; }

.pbtm5 { padding-bottom: 5px !important; }
.pbtm10 { padding-bottom: 10px !important; }
.pbtm20 { padding-bottom: 20px !important; }
.pbtm30 { padding-bottom: 30px !important; }
.pbtm40 { padding-bottom: 40px !important; }
.pbtm50 { padding-bottom: 50px !important; }
.pbtm60 { padding-bottom: 60px !important; }
.pbtm70 { padding-bottom: 70px !important; }
.pbtm80 { padding-bottom: 80px !important; }
.pbtm90 { padding-bottom: 90px !important; }
.pbtm100 { padding-bottom: 100px !important; }

.pleft5 { padding-left: 5px !important; }
.pleft10 { padding-left: 10px !important; }
.pleft20 { padding-left: 20px !important; }
.pleft30 { padding-left: 30px !important; }
.pleft40 { padding-left: 40px !important; }
.pleft50 { padding-left: 50px !important; }
.pleft60 { padding-left: 60px !important; }
.pleft70 { padding-left: 70px !important; }
.pleft80 { padding-left: 80px !important; }
.pleft90 { padding-left: 90px !important; }
.pleft100 { padding-left: 100px !important; }

.pright5 { padding-right: 5px !important; }
.pright10 { padding-right: 10px !important; }
.pright20 { padding-right: 20px !important; }
.pright30 { padding-right: 30px !important; }
.pright40 { padding-right: 40px !important; }
.pright50 { padding-right: 50px !important; }
.pright60 { padding-right: 60px !important; }
.pright70 { padding-right: 70px !important; }
.pright80 { padding-right: 80px !important; }
.pright90 { padding-right: 90px !important; }
.pright100 { padding-right: 100px !important; }




/* width */
.w5 { width: 5% !important; }
.w10 { width: 10% !important; }
.w15 { width: 15% !important; }
.w20 { width: 20% !important; }
.w25 { width: 25% !important; }
.w30 { width: 30% !important; }
.w35 { width: 35% !important; }
.w40 { width: 40% !important; }
.w45 { width: 45% !important; }
.w50 { width: 50% !important; }
.w55 { width: 55% !important; }
.w60 { width: 60% !important; }
.w65 { width: 65% !important; }
.w70 { width: 70% !important; }
.w75 { width: 75% !important; }
.w80 { width: 80% !important; }
.w85 { width: 85% !important; }
.w90 { width: 90% !important; }
.w95 { width: 95% !important; }
.w100 { width: 100% !important; }





header { width: 100%; left: 0; top: 0; z-index: 999; position: fixed; }
#header { display: flex; flex-wrap: wrap; margin: 0 auto; background: #f3f3f3; padding: 20px 2%;
box-sizing: border-box; border-bottom: 4px solid #108dd3; }
#header h1 { width: 30%; font-size: 1.5em; font-weight: 600; line-height: 40px; padding-top: 20px; }

.dtnQrCode { width: 70%; text-align: right; display: flex; justify-content: flex-end; }
.dtnQrCode figure { text-align: center; margin-left: 40px; border: 2px solid #108dd3; background: #fff; height: 73px; }
.dtnQrCode figure img { padding: 0 3px; }
.dtnQrCode figure figcaption { font-size: 0.8em; background: #108dd3; color: #fff; margin: 0 auto 3px; padding: 0 3px; }
.dtnQrCode figure figcaption svg { vertical-align: top; padding: 2px 3px 0 0; }



#searchBox { width: 100%; display: flex; justify-content: flex-end; position: relative; margin-top: 10px; }
#searchBox input { width: 100%; display: block; border-radius: 100px; border: 1px solid #ccc; height: 40px; box-sizing: border-box; padding: 5px 20px; }
#searchBox button { background: #108dd3; position: absolute; right: 0; color:#fff;  font-weight: 500; border-radius: 100px; padding: 5px 25px; height: 40px; box-sizing: border-box;  }


#consonant { display: flex; flex-wrap: wrap;  box-sizing: border-box;  padding: 20px 2%; background: #fff;}
#consonant a { margin-bottom: 10px; display: block; padding: 5px 12px; border-radius: 3px; background: #efefef; margin-right: 5px; font-weight: 500; }
#consonant a:hover { background: #108dd3; transition: 0.3s; color:#fff; }

#wordList { width: 100%; box-sizing: border-box; padding: 20px 2%; margin-top: 166px; }
#wordList dl { display: block; margin-bottom: 30px; }
#wordList dl dt { font-size: 1.4em; margin-bottom: 10px; cursor: pointer; }
.wordDesc { display: none; background: #f3f3f3; box-sizing: border-box; padding: 15px; border: 1px dashed #ccc; }

.openDesc + .wordDesc { display: block; }

#wordList dl dd figure { width: 50%; display: inline-block; max-width: 250px; box-sizing: border-box; padding: 7px; }
#wordList dl dd figure img { width: 100%; }
#wordList dl dd figure figcaption { font-size: 0.75em; text-align: center;  }
#wordList dl dd p { margin-top: 15px; text-align: justify; font-size: 0.875em; }

.videoBtn {     display: block; width: 80px; line-height: 27px; font-size: 12px; padding: 4px 6px; border-radius: 4px; margin: 10px auto 0; letter-spacing: -0.07em; background: #337ab7; color: #fff; }







@media all and (max-width:790px) {
    #header h1 { width: 50%; }
    .dtnQrCode { width: 50%; }
    
}


@media all and (max-width:500px) {
    #header { display: block; }
    #header h1 { width: 100%; text-align: center;  margin-bottom: 10px; padding: 0; }
    
    .dtnQrCode { width: 100%; justify-content: center; }
    .dtnQrCode figure { height: auto; border: none; }
    .dtnQrCode figure.ios { margin-left: 0; }
    .dtnQrCode figure img { display: none; }
    .dtnQrCode figure figcaption { display: block; margin: 0; padding: 3px 7px; font-size: 1em; border-radius: 5px;}
    .dtnQrCode figure figcaption::after { content: '다운로드'; margin-left: 5px;}
    .dtnQrCode figure figcaption svg { vertical-align: top; padding: 5px 5px 0 0;}
    
    
    #searchBox { width: 100%; }
    #searchBox input { width: 100%; }
    #consonant { justify-content: center; }

#searchBox input { width: 100%; display: block; border-radius: 100px !important; border: 1px solid #ccc; height: 30px; box-sizing: border-box; padding: 5px 20px; }
 #searchBox button { background: #108dd3; position: absolute; right: 0; color:#fff;  font-weight: 400; border-radius: 100px !important; padding: 0px 20px; height: 30px; box-sizing: border-box; line-height: 30px; font-size: 15px;}


#consonant { display: flex; flex-wrap: wrap;  box-sizing: border-box;  padding: 20px 0; background: #fff; justify-content: center;}
#consonant a { margin-bottom: 10px; display: block; box-sizing: border-box;  padding: 3px 11px; border-radius: 3px !important; background: #efefef; margin-right: 4px; font-weight: 500; }
#consonant a:hover { background: #108dd3; transition: 0.3s; color:#fff; }

 #wordList { width: 100%; box-sizing: border-box; }
#wordList dl { display: block; margin-bottom: 20px; }
#wordList dl dt { font-size: 1.2em; margin-bottom: 10px; cursor: pointer; }
.wordDesc { display: none; background: #f3f3f3; box-sizing: border-box; padding: 7px; border: 1px dashed #ccc; flex-wrap: wrap; }

.openDesc + .wordDesc { display: flex; }

#wordList dl dd figure { width: 50%; display: inline-block; max-width: 250px; box-sizing: border-box; padding: 7px; }
#wordList dl dd figure img { width: 100%; }
 #wordList dl dd figure figcaption { font-size: 0.75em; text-align: center;  }
#wordList dl dd p { width: 100%; margin-top: 15px; text-align: justify; font-size: 0.875em; }

    
}