@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

@font-face {
    font-family: 'Maplestory';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Light.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Light.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Light.otf') format('opentype'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Maplestory';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Bold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Bold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Bold.otf') format('opentype'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Bold.ttf') format('truetype');
}

:root{
    --dk-primary:#84D64D;
    --dk-maincolor01:#85E399;

    --dk-black: #183A36;
    --dk-gray: #BEC7DE;
    --dk-gray-bg: #f8f8f8;

    --dk-body-bg: #ffffff;
    --dk-body-font-family: 'Maplestory';
    --dk-body-font-size: 1.5rem;
    --dk-body-font-weight: 300;
    --dk-body-line-height: 1.4;

    --dk-f12: 0.75rem;
    --dk-f14: 0.875rem;
    --dk-f16: 1rem;
    --dk-f18: 1.125rem;
    --dk-f20: 1.250rem;
    --dk-f24: 1.5rem;
    --dk-f26: 1.625rem;
    --dk-f30: 1.875rem;
    --dk-f32: 2.000rem;
    --dk-f36: 2.25rem;
}

/* reset */
body {
    margin: 0;
    font-family: var(--dk-body-font-family);
    font-size: var(--dk-body-font-size);
    font-weight: var(--dk-body-font-weight);
    line-height: var(--dk-body-line-height);
    color: var(--dk-black);
    background-color: var(--dk-body-bg);
}

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 {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0;}

a {color: var(--dk-black); text-decoration:none;}
a:hover {color: var(--dk-black);}
a:not([href]):not([class]), a:not([href]):not([class]):hover { color: var(--dk-black); text-decoration: none; }
input, button, select{font-family: var(--dk-body-font-family);}
input{border: 1px solid #ccc; border-radius: 10px; box-shadow: none; padding: 15px 17px ; font-size: var(--dk-f16);}
img{width: 100%;}
img.img-auto{width: auto;}

.pc{display: block;}
.mo{display: none;}

.pc-br{display: block;}
.mo-br{display: none;}

.vertical-wrapper { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - (1.625rem * 2)); }  

.header{position:fixed; top: 0; width: 100%; z-index: 2; background: var(--dk-maincolor01); color: var(--dk-black); text-align: center; height: 60px;}
.fix-top-right{position: fixed; top: 15px; right: 20px;}

.header-logo{position: absolute; left: 20px; top: 5px; width: 54px; height: 50px; display: inline-block; background: url(../images/logo.png) no-repeat; background-size: cover;}
.time-area{position: absolute; left: 94px; top: 20px; display: flex; justify-content: left; gap: 3px;}
.time-area span{height: 20px; line-height: 20px; padding-right: 5px; font-size: var(--dk-f16); display: inline-block;}
.time-area em{display: inline-block; width: 10px; height: 20px; background: #fff; border-radius: 4px;}
.time-area em.pass{background: #FAFF00;}
.header-title{font-weight: 700; font-size:var(--dk-f30); line-height: 60px;}
.header-brn-area{position: absolute; right: 20px; top: 10px; display: inline-block;}
.header-btn-group{display: flex; align-items: center; justify-content: center; gap: 10px;}
.header-btn{height: 40px; display: inline-block; border-radius: 40px; cursor: pointer;}
.header-btn img{width: 100%;}
.header-btn.logout{width: 40px; background: url(../images/header_btn_logout.png) no-repeat; background-size: cover;}
.header-btn.list{width: 111px; background: url(../images/header_btn_list.png) no-repeat; background-size: cover;}
.header-btn.quit{width: 117px; background: url(../images/header_btn_quit.png) no-repeat; background-size: cover;}
.header-btn.home{width: 121px; background: url(../images/header_btn_home.png) no-repeat; background-size: cover;}
.header-btn.sound{width: 40px; background: url(../images/header_btn_sound.png) no-repeat; background-size: cover;}

.menu-game-bg{background: #F4FFF6;}

.sr-only { position: absolute; overflow: hidden; white-space: nowrap; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0); }
.text-underline{text-decoration: underline; min-width: 50px; display: inline-block; letter-spacing: 50px;}

.login-container{display: flex; align-items: center; justify-content: center; height: 100vh; background: url(../images/login_bg.png); background-size: 40%; padding: 0 30px;}
.login-container .login-warp{background: url(../images/login_warp_cont.png) no-repeat 50% 50%; background-size: cover; width: 100%; max-width: 1220px; padding: 80px 0 50px; border: 5px solid #3B7D23;}
.login-container .logo-title{display: flex; align-items: center; justify-content: center; margin-bottom: 30px;}
.login-container .logo-title img{width: 100%; max-width: 900px;}
.login-container .login-form{display: flex; justify-content:center; gap: 20px;}
.login-container .login-form input{min-width: 270px;}
.login-container .login-form ul li:first-child{margin-bottom: 10px;}
.login-container .login-form .login-btn button{background: var(--dk-primary); cursor: pointer; border: none; width: 130px; height: 118px; border-radius: 10px; text-align: center; font-size: var(--dk-f24); color: #ffffff; font-weight: 700;}
.login-container .foot-copyright{ margin: 30px auto 0 auto;  max-width: 700px;}
.copyright-iboram-coment{ background: url(../images/copyright_iboram.png) no-repeat 0 50%; background-size: 85px; padding-left: 100px; color: #2C2C2C; font-family: "Zilla Slab"; font-size: 10px; font-weight: 500; line-height: 110%; letter-spacing: -0.5px;}

.home-container{display: flex; align-items: center; justify-content: center; height: 100vh; padding-bottom: 10%;}
.home-container .home-title{background: url(../images/logo.png) no-repeat; background-position: 50% 0%; background-size: 108px; padding-top: 105px; font-size: 28px; margin-bottom: 30px; text-align: center;}
.home-container .home-menu{display: flex; justify-content: center; gap: 50px; max-width: 900px;}
.home-container .home-menu a{display: block; border: 2px solid var(--dk-black); border-radius: 32px;}
.home-container .home-menu a span{ display: block; width: 275px; height: 307px;  border: 11px solid #fff; border-radius: 30px; overflow: hidden;}
.home-container .home-menu a h5{width: 100%; text-align: center; font-size: var(--dk-f32); font-weight: 700; padding: 30px 0 10px 0;}

.home-container .home-menu a.home-menu01:hover{border-color: #FFAF24;}
.home-container .home-menu a.home-menu02:hover{border-color: #00BD4A;}
.home-container .home-menu a.home-menu03:hover{border-color: #0095FF;}
.home-container .home-menu a.home-menu01:hover span{border-color: #FFAF24;}
.home-container .home-menu a.home-menu02:hover span{border-color: #00BD4A;}
.home-container .home-menu a.home-menu03:hover span{border-color: #0095FF;}

.home-container .home-menu a img{width: 100%;}

#view-container{margin-top: 107px;}

.alphabet-nav-area{ position:fixed; background: #fff; width: 100%; top: 60px; z-index: 1; font-size: var(--dk-f32); border-bottom: 2px solid #BEC7DE;}
.alphabet-nav-area .alphabet-nav{display: flex; justify-content: center; height: 45px;}
.alphabet-nav-area .alphabet-nav a{display: inline-block; width: 68px; height: 60px; margin: 0 -12px; text-align: center;}

.alphabet-nav-area .alphabet-nav a:hover{background: url(../images/alphabet_nav_on_hover.png) no-repeat; background-size: 68px;}
.alphabet-nav-area .alphabet-nav a.on{background: url(../images/alphabet_nav_on.png) no-repeat; background-position: 0 0; background-size: 68px; font-weight: 700;}

.alphabet-word-list-warp{display: flex; align-items: center; justify-content: center;}
.alphabet-word-list{ margin: 40px 0 50px 0; display: flex; width: 1030px; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;}
.alphabet-word-list span{width: 20%; display: flex; justify-content: center; align-items: center;}
.alphabet-word-list .word-card-area{ margin-bottom: 30px;}

.word-card{ display: block; border-radius: 20px; overflow: hidden; border: 1px solid #E6E6E6; background: #FFF; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);}
.word-card .word-card-img{ width: 178px; height: auto; overflow: hidden; padding: 3px 3px 0px 3px;}
.word-card .word-card-txt{font-size: var(--dk-f18); padding: 0 0 10px 0; display: block; text-align: center; width: 100%;}
.word-card-area{position: relative; cursor: pointer;}
.word-card-area .star_sticker{ position: absolute; top: -20px; right: -0px; width: 77px; height: 77px; background: url(../images/word_star_sticker.png) no-repeat; background-size: cover;}

.mode-set-area .mode-set{display: flex;background: var(--dk-black); height: 60px; padding: 0 20px; justify-content: space-between; align-items: center; flex-shrink: 0; align-self: stretch;}
.mode-set-area .mode-title{color: #fff; font-size: var(--dk-f16); line-height: 27px; padding-right: 10px;}
.mode-set-area .mode-lavel-btn{display: inline-block;}
.mode-set-area .mode-lavel-btn a{cursor: pointer; display: inline-block; font-size: var(--dk-f16); border: 1px solid var(--dk-primary); color: var(--dk-primary); padding: 5px 20px; border-radius: 20px;}
.mode-set-area .mode-lavel-btn a.on,
.mode-set-area .mode-lavel-btn a.on:hover{background: var(--dk-primary); color: var(--dk-black);}
.mode-set-area .mode-lavel-btn a:hover{color: var(--dk-primary);}

.highlight-set{display: flex; justify-content: center;}
.highlight-switch {display: inline-block;}

.highlight-switch .tgl {display: none;}
.highlight-switch .tgl,
.highlight-switch .tgl:after,
.highlight-switch .tgl:before,
.highlight-switch .tgl *,
.highlight-switch .tgl *:after,
.highlight-switch .tgl *:before,
.highlight-switch .tgl + .tgl-btn {box-sizing: border-box}
.highlight-switch .tgl::selection,
.highlight-switch .tgl:after::selection,
.highlight-switch .tgl:before::selection,
.highlight-switch .tgl *::selection,
.highlight-switch .tgl *:after::selection,
.highlight-switch .tgl *:before::selection,
.highlight-switch .tgl + .tgl-btn::selection {background: none;}
.highlight-switch .tgl + .tgl-btn {outline: 0; display: block; width: 57px; height: 27px; position: relative; cursor: pointer; user-select: none; font-size: var(--dk-f12); color: #fff; }
.highlight-switch .tgl + .tgl-btn:after,
.highlight-switch .tgl + .tgl-btn:before { position: relative; display: block; content: ""; width: 44%; height: 100%; }
.highlight-switch .tgl + .tgl-btn:after {left: 0;}
.highlight-switch .tgl + .tgl-btn:before { display: inline; position: absolute; top: 7px;}
.highlight-switch .tgl:checked + .tgl-btn:after {left: 56.5%;}

.highlight-switch .tgl-ios + .tgl-btn {
    background: #E1E5EB;
    border-radius: 20rem;
    padding: 2px;
    transition: all 0.4s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.highlight-switch .tgl-ios + .tgl-btn:after {
    border-radius: 2em;
    background: #fff;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.highlight-switch .tgl-ios + .tgl-btn:before {
    content: "OFF";
    left: 28px;
    color: #848ea1;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.highlight-switch .tgl-ios + .tgl-btn:active {
    box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
}
.highlight-switch .tgl-ios + .tgl-btn:active:after {
    padding-right: 0.4em;
}
.highlight-switch .tgl-ios:checked + .tgl-btn {
    background: #FAFF00;
}
.highlight-switch .tgl-ios:checked + .tgl-btn:active {
    box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
}
.highlight-switch .tgl-ios:checked + .tgl-btn:active:after {
    margin-left: -0.4em;
}
.highlight-switch .tgl-ios:checked + .tgl-btn:before {
    content: "ON";
    left: 9px;
    font-weight: 700;
    color: var(--dk-black);
}

.alphabet-word-view{ margin-top: 40px; display: flex; align-items: center;}
.swiper { width: 100%; height: 100%; overflow: visible;}
.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swiper { margin-left: 50px; margin-right: 50px; }
.swiper-button-next:after, .swiper-button-prev:after{font-size: 80px; color:rgba(0, 0, 0, 0.6);}

.alphabet-word-cont{width: 1100px; height: 564px; display: flex; justify-content: flex-start; text-align: left;}
.alphabet-word-cont dl{word-break: keep-all; margin: 0 50px;}
.alphabet-word-cont dl dt{width: 100%; margin-bottom: 10px; color: #3300CC; font-size: 100px; font-weight: 700;}
.alphabet-word-cont dl dd{width: 50%; font-size: var(--dk-f36); font-weight: 400;}

.alphabet-word-cont dl.word-img-right00 dd{width: 100%;}
.alphabet-word-cont dl.word-img-right10 dd{width: 90%;}
.alphabet-word-cont dl.word-img-right20 dd{width: 80%;}
.alphabet-word-cont dl.word-img-right30 dd{width: 70%;}
.alphabet-word-cont dl.word-img-right40 dd{width: 60%;}
.alphabet-word-cont dl.word-img-right50 dd{width: 50%;}
.alphabet-word-cont dl.word-img-right60 dd{width: 40%;}
.alphabet-word-cont dl.word-img-right70 dd{width: 30%;}
.alphabet-word-cont dl.word-img-right80 dd{width: 20%;}
.alphabet-word-cont dl.word-img-right90 dd{width: 10%;}

/* .alphabet-word-cont .checked-word{color: #D40000;} */
.alphabet-word-cont .word a,
.alphabet-word-cont .word a:visited,
.alphabet-word-cont .word a:hover,
.alphabet-word-cont .word a:active,
.alphabet-word-cont .word a:focus {
    color: #D40000;
    text-decoration: none;
}
.alphabet-word-cont .highlight{background: linear-gradient(to top, #FAFF00 90%, transparent 10%);}

.icon-bugle{display: inline-block; cursor: pointer; background: url(../images/icon_speaker_bugle.png) no-repeat; background-size: cover;}
.alphabet-word-cont dl .icon-bugle{width: 46px; height: 28px; }

.error-cont-area dl{text-align: center;}
.error-cont-area dl dt {max-width: 400px; width: 70%; margin:0 auto 30px auto;}
.error-cont-area dl dt img{width: 100%; max-width: 300px;}
.error-cont-area dl dd{font-size: 16px; padding: 0 30px; word-break: keep-all; line-height: 180%;}
.error-cont-area dl dd p{font-size: 36px; padding: 10px 0 10px 0; font-weight: 500;}
.error-cont-area dl dd span{font-size: 20px;}
.error-cont-area dl dd .btn{max-width: 200px; width: 100%;}
.error-cont-area dl dd a{background: #fffecd; color: #000; display: inline-block; padding: 0 5px; border-radius: 3px;}
.error-cont-area dl dd a:hover{color: #000;}

.game-quiz-area{display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 150px 0 50px 0;} 
.game-quiz-box{width: 720px;}
.game-quiz-box .game-quiz-title{background: url(../images/game_title_icon.png) no-repeat; background-size: 165px; padding: 15px 0 30px 185px; font-weight: 700; text-align: left; font-size: 36px; line-height: 130%;}
.game-quiz-box .game-quiz-title.result{background: url(../images/game_title_result_icon.png) no-repeat; width: 484px; margin: 0 auto; text-align: center; font-size: 64px; line-height: 100%;}
.quiz-box {display: flex; align-items: center; justify-content: left; gap: 50px; padding: 50px; border-radius: 50px; background: #fff; border: 3px solid var(--dk-black);}

.quiz-box .answer-example {width: 260px; height: 220px; margin: 20px 0; overflow: hidden;}
.quiz-box .answer-example .type01{padding: 25px 30px ; font-size: var(--dk-f20); position: relative;}
.quiz-box .answer-example .type01 .icon-bugle-area{position: absolute; top: 65px; left: 70px;}
.quiz-box .answer-example .type02{display: flex; align-items: center; justify-content: center; height: 220px;}
.quiz-box .answer-example .type03{padding: 25px 30px ; font-size: var(--dk-f20); background: #F4FFF6;}
.quiz-box .answer-example .type04{padding: 25px 30px ; font-size: var(--dk-f20); background: #F4FFF6; position: relative;}
.quiz-box .answer-example .type04 .icon-bugle-area{position: absolute; top: 65px; left: 70px;}
.quiz-box .answer-example .icon-bugle{width: 126px; height: 78px; }
.quiz-box .answer-example .blur-text{ filter: blur(5px); -webkit-filter: blur(5px);}
.quiz-box .answer-choice ul li{text-align: left; padding: 11px 0; cursor: pointer; }
.quiz-box .answer-choice span{font-size: var(--dk-f30);}
/* .quiz-box .answer-choice span.pick{font-weight: 700; color: #3300CC;} */
.quiz-box .answer-choice li.selected{font-weight: 700; color: #3300CC;}

.result-box{gap: 50px; padding: 50px; border-radius: 50px; background: #fff; border: 3px solid var(--dk-black);}
.result-box .result-correct{display: flex; align-items: center; justify-content: center; gap: 20px;}

.result-correct-box{padding: 10px; border-radius: 70px; border: 5px solid rgba(132, 214, 77, 0.30); overflow: hidden; }
.result-correct-box > div{background: #84D64D; border-radius: 60px; padding: 10px 30px; color: #fff;}
.result-correct-box > div span{display: inline-block; padding-left: 10px;}
.result-correct-box > div strong{font-size: 41px;}

.result-correct-box.cycle{border-color: rgba(255, 46, 42, 0.20);}
.result-correct-box.cycle > div{background: #FF2E2A;}

.result-box .correct-list-area{background: #DAF3CA; font-size: 16px; padding: 15px 30px; border-radius: 30px; margin-top: 30px;}
.result-box .correct-list-area ul li{border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding: 13px;}
.result-box .correct-list-area ul li:last-child{border-bottom:none;}
.result-box .correct-list-area ul li .correct{display:block; float: right;}

.btn-warp{display: flex; align-items: center; justify-content: center; gap: 30px;}
.btn-warp.error{padding-top: 45px;}
.btn{cursor: pointer; position: relative; display: inline-block; font-size: var(--dk-f26); padding: 8px 30px 6px 30px; background: var(--dk-primary); border: 3px solid var(--dk-black); font-weight: 700; border-radius:50px; min-width: 174px;}
.btn:hover{background: var(--dk-primary); border: 3px solid var(--dk-black);}
.btn span{display: block;}
.btn .right{text-align: right;}
.btn .center{text-align: center;}
.btn svg{width: 14px; height: 19px;}
.btn svg.icon-right{position: absolute; top: 14px; right: 25px;}
.btn svg.icon-left{position: absolute; top: 14px; left: 25px;}
.btn-sub{display:inline-block; font-weight: 400; padding: 9px 20px 8px 20px; border-radius: 50px; background: var(--dk-primary); border: 2px solid var(--dk-primary); font-size: var(--dk-f18); color: #fff;}
.btn-sub.outline{background: #fff; color: var(--dk-primary);}
.btn-sub.outline:hover { background: var(--dk-primary); color: #fff;}
.btn-sub .icon-download{width: 16px; height: 21px; position: relative; top: -2px; display: inline-block;}
.btn-sub .icon-download path{fill: #fff;}
.btn-sub.outline .icon-download path{fill: var(--dk-primary);}

.btn-sub.black{ background: var(--dk-black); border-color: var(--dk-black);}
.btn-sub:hover{color: #fff;}


.mydk-box-area{padding: 150px 0 30px 0; margin: 0 auto; width: 1000px;}
.mydk-box-area .mydk-box{border-radius: 0px 50px 50px 50px; border: 3px solid var(--dk-black); min-height: 450px; padding: 70px 50px;}
.mydk-box-area .mydk-box-tab{display: flex; justify-content:flex-start; align-items:start; }
.mydk-box-area .mydk-box-tab a{ width: 350px; height: 65px; border-radius: 50px 10px 0px 0px; background: #D1D8D7;display: flex; align-items: center; justify-content: center;}
.mydk-box-area .mydk-box-tab a.on{background: var(--dk-black); color: #fff;}

.mydk-list{width: 100%;}
.mydk-list-thead{display: flex; justify-content:center; gap: 10px; margin-bottom: 10px;}
.mydk-list-thead > div{width: 100%; text-align: center; font-size: var(--dk-f18); font-weight: 700;}
.mydk-list-tr{display: flex; justify-content:center; gap: 10px; font-weight: 700; padding-bottom: 10px;}
.mydk-list-tr > div{display: flex; align-items: center; justify-content: center; border-radius: 20px; height: 100px; width: 100%; text-align: center; background: #F8F8F8; font-size: var(--dk-f20);}
.mydk-list-tr > div span{font-size: 41px;}
.mydk-list-tr > div em{font-size: 29px; font-style: normal; padding-left: 5px; display: inline-block;}

.no-content-area{width: 100%; margin: 0 auto; text-align: center;}
.no-content-area dl dt{margin-bottom: 30px;}
.no-content-area img{width: 200px; margin-left: 20px;}



.mydk-box hr{border:1px dashed var(--dk-black); margin: 50px 0;}
.mydk-cont-tit{background: url(../images/mydk_cont_tit_icon.png) no-repeat; background-size: 38px; padding-left: 55px; font-size: var(--dk-f24); font-weight: 700; margin-bottom: 10px;}

.mydk-account-list{color: #BAC4C3; padding-left: 52px;}
.mydk-account-list ul{display: flex; justify-content: left; padding:5px; gap: 10px; margin: 5px 0;}
.mydk-account-list ul.login-user-mark{border-radius: 10px; border: 5px solid rgba(132, 214, 77, 0.30); color: var(--dk-black);}
.mydk-account-list ul li{font-size: 18px; line-height: 32px;}
.mydk-account-list ul li:nth-child(1), 
.mydk-account-list ul li:nth-child(2){width: 100px; text-align: center;}
.mydk-account-list .mydk-login-id{font-weight: 700;}
.mydk-account-list .mydk-account-mark span{border-radius: 5px; background: var(--dk-primary); font-size: var(--dk-f20); font-weight: 700; display: none; color: #fff; padding: 0 5px;}

.mydk-dailyset-list{ font-size: 18px; padding:10px 0 10px 55px;}
.mydk-dailyset-list span{line-height: 42px;}
.mydk-dailyset-list .select-area{border-radius: 10px; margin-left: 10px; border: 2px solid var(--dk-black); display: inline-block; padding: 5px 10px 3px 7px;}
.mydk-dailyset-list .select-area select{font-size: var(--dk-f24); font-weight: 700; border: none; padding-right: 10px;}



.modal .modal-content{background: url(../images/popup_top_point.png) no-repeat 50% 0; background-size: 168px; border: none;}
.modal .modal-content .btn-close-area{position: absolute; top: 25px; right: 20px; z-index: 1070;}
.modal .modal-content .btn-close-area .btn-close{background: url(../images/popup_close.png) no-repeat; background-size: 34px;}
.modal .modal-body{border-radius: 50px; border: 10px solid var(--dk-maincolor01); margin-top: 70px; background: #fff; text-align: center; padding: 40px 30px 30px 30px;}
.modal .modal-cont dl{ margin-bottom: 10px;}
.modal .modal-cont dl dt{font-size:var(--dk-f32);}
.modal .modal-cont dl dd{font-size: var(--dk-f18);}
.modal .modal-cont-img{width: 100%; text-align: center; margin-top: 30px;}
.modal .modal-btn-area{display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 30px;}
.modal .btn-sub{font-size: var(--dk-f20); height: 50px; padding: 0 30px; min-width: 150px;}

.select-game-level-area{display: flex; width: 250px; margin: 0 auto 10px auto; flex-direction: column; align-items: center; gap: 5px;}
.select-game-level-area li{position: relative; border: 3px solid rgba(0, 0, 0, 0.10); cursor: pointer; width: 100%; font-size: 20px; height: 47px; display: flex; align-items: center; justify-content: center;}
.select-game-level-area li em{display:none; width: 38px; height: 29px; transform: rotate(-15deg); position: absolute; left: -23px; bottom: 5px; background: url(../images/mydk_cont_tit_icon.png) no-repeat; background-size: 38px;}
.select-game-level-area li:nth-child(1){background: #FFF090;}
.select-game-level-area li:nth-child(2){background: #FFEA00;}
.select-game-level-area li:nth-child(3){background: #FFAF24;}
.select-game-level-area li:nth-child(4){background: #FF7520;}
.select-game-level-area li:nth-child(5){background: #FF2B00;}
.select-game-level-area li:hover{border: 3px solid rgba(0, 0, 0, 1); font-weight: 700;}
.select-game-level-area li:hover em{display:block;}

.login-user-mark .mydk-account-mark > span {display: inline;}



.print-certification-warp{padding: 30px;}
.print-certification{background: url(../images/print_certification_bg.jpg) no-repeat center / contain; box-sizing: border-box; position:relative; margin: 0 auto 20px auto; width: 100%; height:708px; padding-top: 270px;}
.print-certification dl { width: 340px; margin: 0 auto; display: flex; flex-wrap: wrap; font-size: 12px; font-family: "Nanum Myeongjo", serif; font-weight: 800; line-height: 170%;}
.print-certification dl > dt { width: 30%;}
.print-certification dl > dd { width: 70%;}
.print-certification dl > dd::before{content: ':'; padding-right: 20px;}
.certification-desc{font-family: 'Times New Roman', Times, serif; text-align: center; font-weight: 700; font-size: 15px; width: 400px; margin: 30px auto; line-height: 160%;}
.certification-desc .date{font-size: 14px; padding-top: 20px;}
.certification-certify{position: relative; width: 127px; height: 63px; margin: 0 auto;}
.certification-certify img{width: 100%;}
.certification-certify .certify-company{width: 127px;}
.certification-certify .seal{position: absolute; bottom: 0; right: -40px; width: 50px; height: 50px;}
.print-certification-warp .btn-warp{margin-bottom: 0;}



@media (max-width: 820px){
    .pc{display: none;}
    .mo{display: block;}

    .pc-br{display: none;}
    .mo-br{display: block;}


    .header-logo{left: 10px; top: 10px; width: 43px; height: 40px;}
    .header-brn-area {right: 10px;}

    .login-container{padding: 0 100px;}
    .login-container .logo-title img{width: 70%;}
    .login-container .login-form{display: block;}
    .login-container .login-warp{padding: 0 0 0 0; background: #fff;}
    .login-container .login-area{padding: 50px 30px 30px 30px;}
    .login-container .login-form input{width: 100%;}
    .login-container .login-form .login-btn button{ width: 100%; height: 60px; margin-top: 10px; border-radius: 10px;}
    .copyright-iboram-coment {background-size: 40px; padding-left: 46px; font-size: 6px; letter-spacing: -0.6px;}
    .login-container .foot-copyright {margin: 50px auto 0 auto;}

    .home-container .home-contents{padding: 0 30px;}
    .home-container .home-menu{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; flex: 1 0 0;}
    .home-container .home-menu a{display: block; width: 100%;}
    .home-container .home-menu a span {width: 100%; height: 150px; display: flex; justify-content: flex-start;}
    .home-container .home-menu a h5{display: flex; align-items: center; justify-content: left; padding: 0 0 0 20px;}

    .alphabet-nav-area{overflow-y: scroll; border-bottom: none;}
    .alphabet-nav-area .alphabet-nav {width: 1180px; height: 60px;}
    .alphabet-nav-area .alphabet-nav a::after{border-bottom: 1px solid #ccc;}
    .alphabet-word-list{padding: 0px 20px 0 20px;}
    .alphabet-word-list span{width: 25%;}
    .alphabet-word-list .word-card .word-card-img{ width: 148px; }

    .mode-set-area .mode-set{position:fixed; top: 120px; width: 100%; height: 50px; padding: 0 10px;}
    .mode-set-area .mode-title{font-size: 12px; line-height: 120%;}
    .mode-set-area .mode-lavel-btn{padding-bottom: 3px;}
    .mode-set-area .mode-lavel-btn a { font-size: 12px; padding: 5px 5px 3px 5px;}
    .mode-set-area .mode-title {padding-right: 0px;}
    .highlight-set{gap: 5px;}
    .highlight-set .mode-title{text-align: center;}
    

    .alphabet-word-view{padding-top: 50px;}
    
    .header-btn.home,
    .header-btn.list,
    .header-btn.quit{ width: 40px; background-position: -10px 50%;}
    
    .swiper {margin:50px 0px 0 0px;}
    .swiper-button-next:after, .swiper-button-prev:after { font-size: 50px;}
    .alphabet-word-cont{width: 100%; height: 420px;}
    .alphabet-word-cont dl{margin: 0 70px;}
    .alphabet-word-cont dl dt{font-size: 80px; margin-bottom: 0;}
    .alphabet-word-cont dl dt .icon-bugle{ position: relative; top: -10px;}
    .alphabet-word-cont dl dd{font-size: 28px;}
    .game-quiz-box {width:90%; margin: 0 auto;}
    .game-quiz-box .game-quiz-title{background-position: 55% 40px; padding: 170px 0px 20px 0px; font-size: 24px; text-align: center;}
    .game-quiz-box .game-quiz-title.result{background-size: 180px; background-position: 55% 30px; padding: 150px 0 20px 0px; font-size: 50px; text-align: center; width: 100%;}

    .btn-warp{width: 100%; display: block; text-align: center; margin-bottom: 30px;}
    .btn{font-size: var(--dk-f20);}
    .game-quiz-area{padding: 100px 0 30px 0;}
    .result-box{padding: 30px 20px;}
    .result-box .correct-list-area {padding: 10px 10px; margin-top: 20px;}
    .result-box .correct-list-area ul li{text-align: center; padding:  10px 10px 5px 10px;}
    .result-box .correct-list-area ul li .correct{float: none; font-size: var(--dk-f18);}
    .result-box .result-correct{ flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;}
    .result-correct-box {width: 100%; text-align: center;}
    .result-correct-box > div{display: flex; justify-content: center; align-items: center;}
    .result-correct-box > div strong{line-height: 100%;}

    .mydk-box-area .mydk-box-tab a{font-size: var(--dk-f18); width: 40%; padding-top: 5px;border-radius: 30px 10px 0px 0px;}
    .mydk-box-area{width: 100%; padding: 90px 20px 30px 20px;}

    .mydk-list-tr{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; flex: 1 0 0; margin-bottom: 30px;}
    .mydk-list-tr > div{text-align: left; background: #F1f1f1; height: auto; font-size:24px; height: 60px;}
    .mydk-list-tr > div span{font-size: 24px;}
    .mydk-list-tr > div em{font-size: 18px;}
    .mydk-list-tr > div.btn-area{background: #fff; margin-top: 5px;}
    .mydk-list-tr > div.btn-area .btn-sub{width: 100%; text-align: center; line-height: 40px; font-size: 22px;}
    .mydk-list-tr p i{font-style: normal; display: block; font-weight: 400; font-size: 14px;}
    .mydk-box-area .mydk-box { padding: 30px 30px 0px 30px; border-radius: 0px 30px 30px 30px;}
    .mydk-dailyset-list .select-area{margin-left: 0;}
    .mydk-dailyset-list{padding: 10px 0 50px 0px;}

    .mydk-account-list{padding-left: 0;}
    .mydk-account-list ul{display: block; margin: 10px 0;}
    .mydk-account-list ul li{text-align: left; padding: 0 10px;}
    .mydk-account-list ul li:nth-child(1), .mydk-account-list ul li:nth-child(2){text-align: left; width: 100%;}
    .mydk-account-list .mydk-account-mark span{padding: 0 10px;}
    
    .mydk-box hr{margin: 20px 0 30px 0;}
    
}

@media (max-width: 768px){
    .alphabet-word-cont { height: 400px;}
}

@media (max-width: 430px){
    .login-container{padding: 0 30px;}
    .alphabet-word-cont { height: 230px;}
    .alphabet-word-cont dl { margin: 0 50px; }
    .alphabet-word-cont dl dt{font-size: 40px;}
    .alphabet-word-cont dl dd{font-size: 16px; line-height: 120%;}
    .alphabet-word-cont dl .icon-bugle { width: 30px; height: 18px; }
    
    .alphabet-word-list span {width: 50%;}

    .quiz-box{display: block; padding: 30px;}
    .quiz-box .answer-example{margin: 0 auto; height: 160px;}
    .quiz-box .answer-example .icon-bugle{margin-top: -40px;}
    .quiz-box .answer-choice ul li{padding: 5px 0;}
    .quiz-box .answer-example .type02{ height: 160px;}
    .time-area{top: 80px; left: 50%; margin-left: -100px; width: 200px; background: var(--dk-black); padding: 5px 10px; border-radius: 10px;}
    .time-area span{color: #fff; width: 50px;}


    .print-certification-warp{padding: 0px;}
    .print-certification{ padding-top: 52%; background-position: 50% 0%; height: 600px;}
    .print-certification dl { padding: 0 20px;}
    .certification-desc{ font-size: 13px; padding: 0 20px; margin: 20px auto;}
    .certification-desc .date{font-size: 11px; padding-top: 10px;}
    .certification-certify{width: 100px; height: 50px;}
    .certification-certify .certify-company{width: 100px;}
    .certification-certify .seal{position: absolute; bottom: 0; right: -40px; width: 50px; height: 50px;}
    .print-certification-warp .btn-warp{margin-bottom: 0;}
}

@media (max-width: 414px){
    .alphabet-word-cont { height: 210px;}
}

@media (max-width: 390px){
    .alphabet-word-cont { height: 200px;}
}





@media print {
    @page {
        size:210mm 297mm;
        margin:0mm
    }
    * {
        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
        color-adjust: exact !important;                 /* Firefox 48 – 96 */
        print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
    }
    body {
        margin: 0;
        padding: 0;
        height: auto;
        margin-top: 490px;	/* 아래 pop_from_fix 의 margin-top을 적절히 조절해서 위치를 조정한다. */
    }
    .print-certification-warp{padding: 0 0;}
    .print-certification{transform: scale(2.35);}
    .print-certification-warp .btn-warp{display: none;}

}