@charset "utf-8";

/* reset.css */
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;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
html {
	-webkit-touch-callout: none;
	user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
body {
    line-height: 1;
}
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;
}
.hide {display:none !important;}



.wrap{
    position: relative;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    font-family: "Nunito", sans-serif;
}
/* header */
.wrap .top{
    height: 100px;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 999;
}

.wrap .top a{
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}
.wrap .top a.home{
    display: inline-block;
    width: 120px;
    height: 62px;
    background-image: url(../img/00.logo.png);
}
.wrap .top a.set, .wrap .top a.back, .wrap .top a.worksheet{
    display: inline-block;
    width: 64px;
    height: 64px;
    opacity: 0.2;
}
.wrap .top a.set{background-image: url(../img/00.btn_set.png);}
.wrap .top a.back{background-image: url(../img/00.btn_back.png);}
.wrap .top a.worksheet{
	position: relative;
	background-color: transparent;
	border-radius: 50%;
}
.wrap .top a.worksheet:before {
	position: absolute;
	top: 13%;
	left: -2%;
	content: '\1F4D6';
	font-size: 50px;
}

.wrap .top a.set.on, .wrap .top a.back.on, .wrap .top a.worksheet.on{
    opacity: 1;
}

/* container */

.wrap .container {
    position: relative;
    height: 100%;
    min-height: 100vh;
}

.wrap .container .inner{
    width: 100%;
    height: auto;
    max-width: 1138px;
    position: relative;
    z-index: 99;
    text-align: center;
    margin: 0 auto;
    padding: 150px 0;
}
.wrap.song .container .inner{padding: 90px 0;}
.wrap.main .container .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wrap .container .inner>.tit{
    margin-bottom: 25px;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -1px;
    font-family: "Nunito", sans-serif;
}
.wrap .container .inner .cont_wrap{
    background-color: #fff;
    padding: 40px;
    box-sizing: border-box;
    border-radius: 30px;
    filter: drop-shadow(0px 3px 5px rgba(000, 000, 000, 0.03));
}
.wrap .container .inner .cont_wrap .list{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.wrap .container .btn_wrap{margin-top: 30px; display: flex; justify-content: center;}
.wrap .container .btn_wrap>button{
    border: none;
    border-radius: 35px;
    padding: 0 40px;
    line-height: 70px;
    font-family: "Nunito", sans-serif;
    font-weight: 900;
    font-size: 32px;
    margin: 0 8px;
	cursor: pointer;
}
.wrap .container button.more, .wrap .container button.play, .wrap .container button.repeat{
    background-color: #222;
    color: #fff;
}
.wrap .container button.done, .wrap .container button.next{
    background-color: #ffcc33;
    color: #222;
}
.wrap .container button.guide {
	width: 71px;
	height: 71px;
    background: #222;
    color: #fff;
    border-radius: 90%;
    opacity: .5;
	padding: 0px;
}

/* cont_wrap.song>.cont_wrap.learning */
.wrap .container .inner .cont_wrap.learning{
    background-color: transparent;
    padding: 0;
    width: 853px;
    margin: 0 auto;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(000, 000, 000, 0.1);
}
.wrap .container .inner .cont_wrap.learning .video_tit{
    background-color: #F2F2F2;
    width: 100%;
    line-height: 60px;
    font-family: Nunito;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 0 0 3px rgba(000, 000, 000, 0.1);
}
.wrap .container .inner .cont_wrap.learning .video_wrap video{
    background-color: #222;
}

.player-controls {
	display: flex;
	position: absolute;
	bottom: 4%;
	width: 96%;
	transform: translate(2%, 2%);
	transition: 0.3s;
	flex-wrap: wrap;
	background: rgba(0, 0, 0, 0.6);
}	

.player-controls .time {
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 2px;
    border-radius: 16px;
	font-size: 14px;
	color: #ededed;
    position: absolute;
    top:-30px; 
	right: 0px;
	width: 15%;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
}

.player-controls input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  margin: 0;
  width: 75%; 
  padding: 0 10px;
    display: none;
}
.player-controls input[type="range"]:focus {
	outline: none;
}
.player-controls input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 10px;
	cursor: pointer;
	background: #666;
	border-radius:50px;
}
.player-controls input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 10px;
	width: 10px;
	background: #ffcc00;
	cursor: pointer;
	border-radius: 50px;
}

.player-controls .video-progress {
	position: relative;
	display: flex;
	width: 100%;
	transition: 0.3s;
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
	height: 19px;
    pointer-events: none; 
}

.player-controls .video-progress-filled {
	width: 0;
	background: #ffcc33;
}

.wrap .container .btn_wrap.bottom{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translatex(-50%);
    margin-top: 0;
    z-index: 999;
    width: auto;
    background-color: #FFE7E7;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: inset 0px 3px 10px rgba(000, 000, 000, 0.05);
}

/* cont_wrap.song>.cont_wrap.reward */
.wrap .container .inner .cont_wrap.reward .point_tit{
    padding-bottom: 20px;
    border-bottom: 2px solid #f2f2f2;
    width: 100%;
    max-width: 944px;
    margin: 0 auto;
    font-size: 52px;
    line-height: 80px;
    font-family: Nunito;
    font-weight: 900;
}
.wrap .container .inner .cont_wrap.reward .point_tit>.point{
    background-color: #f2f2f2;
    border-radius: 40px;
    padding: 0 30px;
    margin: 0 20px;
    color: #E45153;
}






/* acc* */
.wrap .acc_wrap{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}
.wrap .acc_wrap ul{position: relative; height: 100%;}
.wrap .acc_wrap ul li{
    position: absolute; 
    filter: drop-shadow(0px 3px 5px rgba(000, 000, 000, 0.03));
}
.wrap .acc_wrap ul li.parts{
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}


.wrap .acc_wrap ul li.rk{
    background-image: url(../img/00.acc_RK.png);
    width: 95px;
    height: 121px;
    top: 16%;
    right: 8%;
    animation: rk 1s infinite alternate;  
}
@keyframes rk{
   0%{transform:translate(0,0);}
   100%{transform:translate(0,10px);}
}  
.wrap .acc_wrap ul li.cd1{
    background-image: url(../img/00.acc_cd1.png);
    width: 163px;
    height: 110px;
    top: 29%;
    left: 14%;
    opacity: 90%;
    animation: cd1 1s infinite alternate;  
}
@keyframes cd1{
   0%{transform:translate(0,0);}
   100%{transform:translate(0, -15px);}
} 
.wrap .acc_wrap ul li.star{
    background-image: url(../img/00.acc_star.png);
    width: 116px;
    height: 113px;
    bottom: 50%;
    right: 12%;
    animation: star 0.8s infinite alternate;  
}
@keyframes star{
   0%{transform:translate(0,0);}
   100%{transform:translate(0, 10px);}
} 
.wrap .acc_wrap ul li.ap{
    background-image: url(../img/00.acc_AP.png);
    width: 117px;
    height: 125px;
    bottom: 29%;
    left: 8%;
    animation: ap 0.8s infinite alternate;  
}
@keyframes ap{
   0%{transform:translate(0,0);}
   100%{transform:translate(0, 10px);}
}
.wrap .acc_wrap ul li.cd2{
    background-image: url(../img/00.acc_cd2.png);
    width: 163px;
    height: 110px;
    right: 13%;
    bottom: 25%;
    opacity: 90%;
    animation: cd2 0.7s infinite alternate;  
}
@keyframes cd2{
   0%{transform:translate(0,0);}
   100%{transform:translate(0, -12px);}
} 
.wrap .acc_wrap ul li.cl{
    background-image: url(../img/00.acc_CL.png);
    width: 104px;
    height: 127px;
    bottom: 7%;
    right: 5%;
    animation: cl 1s infinite alternate;  
}
@keyframes cl{
   0%{transform:translate(0,0);}
   100%{transform:translate(0, -15px);}
} 

/* main */

.wrap.main{
    background-image: url(../img/01.gate_bg.png);
    background-color: #FFEEBA;
    width: 100%;
    height: 100vh;
}
.wrap .container#main .inner ul.gate{
    display: flex;
    justify-content: center;
}
.wrap .container#main .inner ul.gate li{
    max-width: 368px;
    width: 100%;
}
.wrap .container#main .inner ul.gate li:first-child{margin-right: 8px;}
.wrap .container#main .inner ul.gate li:last-child{margin-left: 8px;}
.wrap .container#main .inner ul.gate li a{width: 100%;}
.wrap .container#main .inner ul.gate li a img{width: 100%;}
.wrap .container#main .inner ul.gate li a img{
    filter: drop-shadow(0px 3px 5px rgba(000, 000, 000, 0.2));
}

/* literacy */
.wrap .container#main .inner ul.literacy{
    justify-content: center;
    max-width: 944px;
    flex-wrap: wrap; 
    margin: 0 auto;
}
.wrap .container#main .inner ul.literacy li{
    max-width: 274px;
    margin: 0 8px 16px;
}

/* song */

.wrap.song{
    background-image: url(../img/02.song_bg.png);
    background-color: #FFCBCB;
    width: 100%;
    height: 100%;
}
.wrap.song .container .inner>.tit {
    color: #842B2B;
}
.wrap .container .inner .list.song li{
    width: 20%;
    margin-bottom: 16px;
}
.wrap .container .inner .list.song li p.tit {
	width: 100%;
	max-width: 90%;
	line-height: 1.2;
	margin: 0 auto;
    text-align: center;
}
.wrap .container .inner .list.song li>a{
    color: #222;
    text-decoration: none;
    width: 100%;
    display: block;
    text-align: center;
    position: relative;
}
.wrap .container .inner .list.song li.clear>a::before{
    display: block;
    content: "";
    width: 100%;
    height: 132px;
    background-image: url(../img/02.song_list_clear.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}
.wrap .container .inner .list.song li.lock>a::before{
    display: block;
    content: "";
    width: 100%;
    height: 132px;
    background-image: url(../img/02.song_list_lock.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}
.wrap .container .inner .list.song li>a>img{
    width: auto;
    display: block;
    margin: 0 auto 10px;
    filter: drop-shadow(0px 3px 5px rgba(000, 000, 000, 0.2));
    z-index: 999;
}
.wrap.song .container .btn_wrap.bottom{background-color: #FFE7E7;}

/* glossary */

.wrap.glossary{
    background-image: url(../img/03.glossary_bg.png);
    background-color: #BAE7FF;
    width: 100%;
    height: 100%;
}

.wrap.glossary .container .inner .tit{
    color: #3D6F8A;
}

.wrap.glossary .container .inner .cont_wrap.list{
    background-color: transparent;
    padding: 0;
}

.wrap.glossary .container .inner .list li{
    width: calc(16.88% - 16px);
    margin-bottom: 16px;
    margin-right: 16px;
    box-shadow: 0px 3px 5px rgba(000, 000, 000, 0.03);
    border-radius: 18px;
}
.wrap.glossary .container .inner .list li:nth-child(6n){margin-right: 0;}
.wrap.glossary .container .inner .list li>a{
    width: 100%;
    margin: 0 auto;
    border-radius: 30px;
    overflow: hidden;
    display: block;
    position: relative;
    color: #222;
}
.wrap.glossary .container .inner .list li>a>img{    
    width: 100%;
    display: block;
    margin: 0 auto;  
    filter: none;
}
.wrap.glossary .container .inner .list li>a>p{    
    font-family: Nunito;
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    bottom: 37px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}


.wrap.glossary .container .inner .list li.clear>a::after,
.wrap .container .inner .cont_wrap .list.hf li.clear>a::after, 
.wrap .container .inner .cont_wrap .list.vb li.clear>a::after, 
.wrap .container .inner .cont_wrap .list.sp li.clear>a::after, 
.wrap .container .inner .cont_wrap .list.pc li.clear>a::after,
.wrap .container .inner .cont_wrap .list.oral li.clear>a::after,
.wrap .container .inner .cont_wrap .list.lc li.clear>a::after{
    display: block;
    content: "";
    width: 116px;
    height: 116px;
    background-image: url(../img/03-1.glossary_lesson_clear.png);
    background-position: left top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(0px 3px 5px rgba(000, 000, 000, 0.2));
}
.wrap .container .inner .cont_wrap .list.pc li.clear>a::after{
    background-image: url(../img/04.pc_list_clear.png.png);
    width: 96px;
    height: 96px;
}
.wrap .container .inner .cont_wrap .list.pc li.clear>a>img{opacity: 0.3;}
.wrap.glossary .container .inner .list li.lock>a::after,
.wrap .container .inner .cont_wrap .list.hf li.lock>a::after,
.wrap .container .inner .cont_wrap .list.vb li.lock>a::after,
.wrap .container .inner .cont_wrap .list.sp li.lock>a::after,
.wrap .container .inner .cont_wrap .list.oral li.lock>a::after,
.wrap .container .inner .cont_wrap .list.lc li.lock>a::after{
    display: block;
    content: "";
    background-color: #222;
    height: 100%;    
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.6;
}
.wrap.glossary .container .inner .list li.lock>a::before,
.wrap .container .inner .cont_wrap .list.hf li.lock>a::before,
.wrap .container .inner .cont_wrap .list.vb li.lock>a::before,
.wrap .container .inner .cont_wrap .list.sp li.lock>a::before,
.wrap .container .inner .cont_wrap .list.oral li.lock>a::before,
.wrap .container .inner .cont_wrap .list.lc li.lock>a::before{
    display: block;
    content: "";
    width: 69px;
    height: 86px;
    background-image: url(../img/03-1.glossary_lesson_lock.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.wrap.glossary .container .inner .btn_wrap{
    background-color: transparent;
}
.wrap.glossary .container .btn_wrap.bottom{background-color: #DCF3FF;}


.wrap.glossary .container .inner .cont_wrap ul.list_221, ul.list_232{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 455px;
    padding: 0px;
    align-items: center;
}
.wrap.glossary .container .inner .cont_wrap ul.list_221 li, ul.list_232 li{
    width: 176px;
    height: 220px;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0px 3px 5px rgba(000, 000, 000, 0.03);
    margin: 0 8px 16px 8px;
}

.wrap.glossary .container .inner .cont_wrap ul.list_221 li:first-child{
    margin-left: 0;
}
.wrap.glossary .container .inner .cont_wrap ul.list_221 li:last-child{
    margin-right: 0;
}

ul.list_232 #talkb5, ul.list_232 #talkb10 {
    margin-right: 0;
}
ul.list_232 #talkb1, ul.list_232 #talkb6 {
    margin-left: 0;
}
ul.list_232 li.off img {width:100%;}

.wrap.glossary .container .inner .cont_wrap ul.list_221 li.on>a::before, ul.list_232 li.on>a::before{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../img/03-2.glossary_card_on_frame.png);
    background-size: 100% auto;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
}
.wrap.glossary .container .inner .cont_wrap ul.list_221 li.sound>button, .wrap.glossary .container .inner .cont_wrap ul.list_232 li.sound>button{
    width: 120px;
    height: 80px;
    background-image: url(../img/03-3.glossary_card_sound_icon.png);
    background-color: transparent;
    background-size: 54px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    z-index: 90;
    /* 영역 구분용 color+cursir, 확인 후 삭제 요망 */
    background-color: #f2f2f2;
    cursor: pointer;
    border-radius: 15px;
}
.wrap.glossary .container .inner .cont_wrap ul.list_221 li>a, ul.list_232 li>a{
    border-radius: 33px;
    display: block;
    width: 100%;
    height: 100%;
}
.wrap.glossary .container .inner .cont_wrap ul.list_221 li.sound>a,.wrap.glossary .container .inner .cont_wrap ul.list_232 li.sound>a{
    display: block;
    width: 100%;
    height: 100%;
}
.wrap.glossary .container .inner .cont_wrap ul.list_221 li>a>img, ul.list_232 li>a>img{    
    width: auto;
    height: 100%;
}
.wrap.glossary .container .inner .cont_wrap ul.list_221 li.text>a, ul.list_232 li.text>a{
    /* width: 100%;
    max-width: 140px; */
    text-decoration: none;
    /* height: auto; */
}
.wrap.glossary .container .inner .cont_wrap ul.list_221 li.text>a>p, ul.list_232 li.text>a>p{    
    max-width: 140px;
    font-family: Nunito;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #222;
    padding: 10px;
    line-height: 1;
    word-break: keep-all;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.wrap.glossary .container .inner .cont_wrap ul.list_221 li.img>a, ul.list_232 li.img>a{
    height: 100%;
    display: block;
}
.wrap.glossary .container .inner .cont_wrap ul.list_221 li.on.img::before, ul.list_232 li.on.img::before{
    z-index: 99;
}

.wrap.glossary .container .inner .cont_wrap ul.list_221 li.select>a::before, ul.list_232 li.select>a::before{
    border: 2px solid #E45153;
    border-radius: 18px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

/* pc */

.wrap.pc{
    background-image: url(../img/04.pc_bg.png);
    background-color: #FFDD74;
    width: 100%;
    height: 100%;
}
.wrap.pc .container .inner .tit{color: #8E7115;}


.wrap.pc .container .inner .cont_wrap.alphabet{
    background-color: transparent;
    padding: 0;
}
.wrap.pc .container .inner .cont_wrap .img_wrap,
.wrap.pc .container .inner .cont_wrap .alphabet_wrap{margin-bottom: 60px;}
.wrap.pc .container .inner .cont_wrap .img_wrap img{
    width: 100%;
    max-width: 753px;
    height: auto;
    border-radius: 18px;
    border: 3px solid rgba(000, 000, 000, 0.1);
}
.wrap.pc .container .inner .cont_wrap .alphabet_wrap{
    position: relative;
    width: 100%;
    margin: 0 auto 60px;
}
.wrap.pc .container .inner .cont_wrap .alphabet_wrap #bgCanvas{
    width: 100%;
}
.wrap.pc .container .inner .cont_wrap .alphabet_wrap #drawCanvas{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}


.wrap.pc .container .inner .cont_wrap .line{
    padding: 30px 0;
    border-radius: 40px;
    font-size: 20px;
    background-color: #F2F2F2;
}
.wrap.pc .container .inner .cont_wrap .line span.br {margin-left:5px;}


.wrap .container .inner .cont_wrap .list.pc{
    max-width: 944px;
    margin: 0 auto;
    justify-content: center;
}
.wrap .container .inner .list.pc li>a>img{width: 100%;}
.wrap .container .inner .cont_wrap .list.pc li{
    margin: 0 6px 16px;
}
.wrap .container .inner .cont_wrap .list.pc li>a{
    display: block;
    position: relative;
}

.wrap.pc .container .btn_wrap.bottom{
    background-color: #FFEFC1;
}



/* sp */

.wrap.sp{
    background-image: url(../img/05.sp_bg.png);
    background-color: #E8BEFF;
    width: 100%;
    height: 100%;
}
.wrap.sp .container .inner .tit{color: #70249B;}
.wrap.sp .container .inner .cont_wrap.list {
    background-color: transparent;
    padding: 0;
}
/*
.wrap .container .inner .cont_wrap .list.sp{
    justify-content: center;
    margin: 0 auto;
}*/
.wrap .container .inner .cont_wrap .list.sp li{
    width: calc(16.88% - 16px);
    margin-bottom: 16px;
    margin-right: 16px;
    box-shadow: 0px 3px 5px rgba(000, 000, 000, 0.03);
    border-radius: 30px;
        overflow: hidden;
}
.wrap .container .inner .cont_wrap .list.sp li:nth-child(6n){
    margin-right: 0;
}
.wrap.sp .container .inner .list li>a{
    position: relative;
    color: #222;
    width: 100%;
    display: block;
    border-radius: 2.5vw;
}
.wrap.sp .container .inner .list li>a>img{width: 100%;}
.wrap.sp .container .inner .list li>a>p{
    font-family: Nunito;
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}


.wrap.sp .container .inner .cont_wrap.alphabet{
    background-color: transparent;
    padding: 0;
}
.wrap.sp .container .inner .cont_wrap .img_wrap,
.wrap.sp .container .inner .cont_wrap .alphabet_wrap{margin-bottom: 60px;}
.wrap.sp .container .inner .cont_wrap .img_wrap img{
    width: 100%;
    max-width: 753px;
    height: auto;
    border-radius: 18px;
    border: 3px solid rgba(000, 000, 000, 0.1);
}
.wrap.sp .container .inner .cont_wrap .alphabet_wrap{
    position: relative;
    width: 100%;
    margin: 0 auto 60px;
}
.wrap.sp .container .inner .cont_wrap .alphabet_wrap #bgCanvas{
    width: 100%;
}
.wrap.sp .container .inner .cont_wrap .alphabet_wrap #drawCanvas{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.wrap.sp .container .inner .cont_wrap .number_wrap{
    border-radius: 35px;
    line-height: 1.5;
	padding: 20px 70px;
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    background-color: rgba(000, 000, 000, 0.4);
    position: absolute;
    top: 0;
    right: 0;
}


.wrap.sp .container .inner .cont_wrap .line{
    line-height: 80px;
    border-radius: 40px;
    font-size: 20px;
    background-color: #F2F2F2;
}
.wrap.sp .container .btn_wrap.bottom{
        background-color: #F3DDFF;
}




/* hf */

.wrap.hf{
    background-image: url(../img/06.hf_bg.png);
    background-color: #C8F2A4;
    width: 100%;
    height: 100%;
}
.wrap.hf .container .inner .tit{color: #548827;}
.wrap.hf .container .inner .cont_wrap.list {
    background-color: transparent;
    padding: 0;
    margin: 0 auto;
}
.wrap .container .inner .cont_wrap .list.hf li{
    width: calc(16.88% - 16px);
    margin-bottom: 16px;
    margin-right: 16px;
    box-shadow: 0px 3px 5px rgba(000, 000, 000, 0.03);
    border-radius: 30px;
    overflow: hidden;
}
.wrap .container .inner .cont_wrap .list.hf li:nth-child(6n){
    margin-right: 0;
}
.wrap .container .inner .cont_wrap .list.hf li>a>img{width: 100%}
.wrap.hf .container .inner .list li>a{
    position: relative;
    color: #222;
    width: 100%;
    display: block;
    border-radius: 2.5vw;
}
.wrap.hf .container .inner .list li>a>p{
    font-family: Nunito;
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}


.wrap.hf .container .inner .cont_wrap ul.list_221{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 455px;
    padding: 0px;
    align-items: center;
}
.wrap.hf .container .inner .cont_wrap ul.list_221 li{
        width: 176px;
    height: 220px;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0px 3px 5px rgba(000, 000, 000, 0.03);
    margin: 0 8px 16px 8px;
}
.wrap.hf .container .inner .cont_wrap ul.list_221 li img{width: 100%; height: auto;}

.wrap.hf .container .inner .cont_wrap ul.list_221 li.text>a>p, ul.list_232 li.text>a>p{    
    max-width: 140px;
    font-family: Nunito;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #222;
    padding: 10px;
    line-height: 1;
    word-break: keep-all;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wrap.hf .container .inner .cont_wrap ul.list_221 li.on>a::before, .wrap.hf .container .inner .cont_wrap ul.list_232 li.on>a::before{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../img/03-2.glossary_card_on_frame.png);
    background-size: 100% auto;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
}
.wrap.hf .container .inner .cont_wrap ul.list_221 li.sound>button, .wrap.hf .container .inner .cont_wrap ul.list_232 li.sound>button{
    width: 120px;
    height: 80px;
    background-image: url(../img/03-3.glossary_card_sound_icon.png);
    background-color: transparent;
    background-size: 54px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    z-index: 90;
    /* 영역 구분용 color+cursir, 확인 후 삭제 요망 */
    background-color: #f2f2f2;
    border-radius: 15px;
    cursor: pointer;
}
.wrap.hf .container .inner .cont_wrap ul.list_221 li.select>a::before, .wrap.hf .container .inner .cont_wrap ul.list_232 li.select>a::before {
    border: 2px solid #E45153;
    border-radius: 18px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

.wrap.hf .container .btn_wrap.bottom{
    background-color: #E7F9D6;
}



/* vb */
.wrap.vb{
    background-image: url(../img/07.vb_bg.png);
    background-color: #FFCDA7;
    width: 100%;
    height: 100%;
}
.wrap.vb .container .inner .tit{color: #854D23;}
.wrap .container .btn_wrap.level {
    position: inherit;
    top: 0;
    margin: 0;
    width: 100%;
    display: block;
    text-align: end;
    margin-bottom: 20px;
}
.wrap .container .btn_wrap.level>button{
    border-radius: 18px;
    line-height: 60px;
    font-size: 20px;
    text-align: start;
    width: 160px;
    padding: 0 20px;
    background-color: #854D23;
    color: #fff;
    position: relative;
}
.wrap .container .btn_wrap.level>button::after{
    display: inline-block;
    content: "";
    width: 12px;
    height: 30px;
    background-image: url(../img/more.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 24px;
}
.wrap.vb .container .inner .cont_wrap.list {
    background-color: transparent;
    padding: 0;
    margin: 0 auto;
}
.wrap .container .inner .cont_wrap .list.vb li{
    width: calc(16.88% - 16px);
    margin-bottom: 16px;
    margin-right: 16px;
    box-shadow: 0px 3px 5px rgba(000, 000, 000, 0.03);
    border-radius: 30px;
    overflow: hidden;
}
.wrap .container .inner .cont_wrap .list.vb li:nth-child(6n){
    margin-right: 0;
}
.wrap .container .inner .cont_wrap .list.vb li>a>img{
    width: 100%;
    display: block;
    margin: 0 auto;
    filter: none;
}
.wrap.vb .container .inner .list li>a{
    position: relative;
    color: #222;
    width: 100%;
    display: block;
    border-radius: 2.5vw;
}
.wrap.vb .container .inner .list li>a>p{
    font-family: Nunito;
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}


.wrap.vb .container .inner .cont_wrap ul.list_221{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    min-height: 455px;
    padding: 0px;
    align-items: center;
}
.wrap.vb .container .inner .cont_wrap ul.list_221 li{
    width: 176px;
    height: 220px;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0px 3px 5px rgba(000, 000, 000, 0.03);
    margin: 0 8px 16px 8px;
}

.wrap.vb .container .inner .cont_wrap ul.list_221 li.text>a>p, ul.list_232 li.text>a>p{    
    max-width: 140px;
    font-family: Nunito;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #222;
    padding: 10px;
    line-height: 1;
    word-break: keep-all;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wrap.vb .container .inner .cont_wrap ul.list_221 li.on>a::before, .wrap.vb .container .inner .cont_wrap ul.list_232 li.on>a::before{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../img/03-2.glossary_card_on_frame.png);
    background-size: 100% auto;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
}
.wrap.vb .container .inner .cont_wrap ul.list_221 li.sound>button, .wrap.vb .container .inner .cont_wrap ul.list_232 li.sound>button{
    width: 120px;
    height: 80px;
    background-image: url(../img/03-3.glossary_card_sound_icon.png);
    background-color: transparent;
    background-size: 54px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    z-index: 90;
    /* 영역 구분용 color+cursir, 확인 후 삭제 요망 */
    background-color: #f2f2f2;
    border-radius: 15px;
    cursor: pointer;
}
.wrap.vb .container .inner .cont_wrap ul.list_221 li.select>a::before, .wrap.vb .container .inner .cont_wrap ul.list_232 li.select>a::before {
    border: 2px solid #E45153;
    border-radius: 18px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

.wrap.vb .container .btn_wrap.bottom{
    background-color: #FFE6D3;
}

/* oral */

.wrap.oral{
    background-image: url(../img/09.or_bg.png);
    background-color: #28c281;
    width: 100%;
    height: 100%;
}
.wrap.oral .container .inner.full {max-width:944px;}
.wrap.oral .container .inner .tit{color: #fff;}
.wrap.oral .container .inner .cont_wrap.list {
    background-color: transparent;
    padding: 0;
    margin: 0 auto;
}
.wrap .container .inner .cont_wrap .list.oral li{
    width: calc(16.88% - 16px);
    margin-bottom: 16px;
    margin-right: 16px;
    box-shadow: 0px 3px 5px rgba(000, 000, 000, 0.03);
    border-radius: 30px;
    overflow: hidden;
}
.wrap .container .inner .cont_wrap .list.oral li:nth-child(6n){
    margin-right: 0px;
}
.wrap .container .inner .cont_wrap .list.oral li>a>img{width: 100%}
.wrap.oral .container .inner .list li>a{
    position: relative;
    color: #222;
    width: 100%;
    display: block;
    border-radius: 2.5vw;
}
.wrap.oral .container .inner .list li>a>p{
    font-family: Nunito;
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.wrap.oral .container .btn_wrap.bottom{
    background-color: #E7F9D6;
}
.cont_paragraph_wrap{background:white; border-radius:15px; padding:40px; position:relative;}
.cont_paragraph_wrap .mtext_box{width:auto; height:320px; min-height:320px; text-align:left; background:#f1f1f1; padding:32px 30px; overflow-y:scroll; position:relative;}
.cont_paragraph_wrap .mtext_box > div{font-size:18px; color:#231f1e; font-weight:400; line-height:27px;}
.cont_paragraph_wrap .activity {font-size:24px; font-weight:800; margin-bottom:20px; text-align:center; padding:0 80px; line-height:1.2;}
.wrap.oral .container .btn_wrap.bottom .rectimer {font-size:.9em;}

/* book */

.wrap.book{
    background-image: url('../img/05.sp_bg.png');
    background-color: #E8BEFF;
    width: 100%;
    height: 100%;
}
.wrap.book .container .inner .tit{color: #70249B;}
.wrap.book .container .inner.full {max-width:944px; padding:100px 0 150px;}

.wrap.book .container .inner .cont_wrap.booklist {
	background-color:transparent;
	padding:0px;
}
.wrap.book .container .inner .cont_wrap.booklist .ebook {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
}
.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail {
    position: relative;
	width: calc(16.66% - 16px);
    height: 162px;
    padding: 0 0 80px;
    margin: 16px 8px;
}
.wrap.book .container .inner .cont_wrap.booklist .ebook li.thumbnail .clear::after{
    display: block;
    content: "";
    width: 98px;
    height: 98px;
	border-radius: 10px 0;
    background-image: url('/useprep/img/03-1.glossary_lesson_clear.png');
    background-position: left top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(0px 3px 5px rgba(000, 000, 000, 0.2));
}
.wrap.book .container .inner .cont_wrap.booklist .ebook li.thumbnail .lock>a div.cover::after{
    display: block;
    content: "";
    background-color: #222;
    width: 100%;
    height: 162px;    
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.6;
}
.wrap.book .container .inner .cont_wrap.booklist .ebook li.thumbnail .lock>a div.cover::before{
    display: block;
    content: "";
    width: 69px;
    height: 86px;
    background-image: url('/useprep/img/03-1.glossary_lesson_lock.png');
    background-size: 80% auto;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-45%, -50%);
    z-index: 2;
}
.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner {
    width: 100%;
    height: 100%;
}
.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner p.title {
	font-size: 20px;
	font-weight: 800;
	font-family: 'Nunito';
	line-height: 1.2;
	margin-top: 10px;
	color:#222;
}

.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner .cover {
	position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-size: 130%;
    background-position: center 0%;
	background-repeat: no-repeat;
    border-radius: 10px 5px 10px 5px;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1) inset, 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1) inset, 0 0 4px rgba(0, 0, 0, 0.2);
}

.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner .cover .template {
    z-index: 10;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px 5px 10px 5px;
    overflow: hidden;
}

.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner .cover .template::before {
    content: '';
    display: block;
    width: 5%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}

.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner .cover .template::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 6%;
    background: #c6bfa3;
}

.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner .cover .template span {
    z-index: 20;
    display: block;
    position: absolute;
    left: 0;
    bottom: 1.5%;
    margin-left: 3.2%;
    width: 100%;
    height: 2.4%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0 0 0 3px;
}
.wrap.book .container .btn_wrap.bottom{
    background-color: #E7F9D6;
}
.wrap.book .container .btn_wrap.course {
    width: calc(100% - 8px);
    display: flex;
	justify-content: end;
    margin: 0px 0px 20px;
}
.wrap.book .container .btn_wrap.course .nice-select {
	width:403px;
	font-size: 20px;
	font-weight: 800;
	font-family: "Nunito", sans-serif;
	height: 60px;
	line-height: 60px;
	border-radius: 16px;
	border: 0px;
	background-color: #70249b;
	color: #fff;
}
.wrap.book .container .btn_wrap.course .nice-select:after {border-bottom: 2px solid #fff; border-right: 2px solid #fff;}
.wrap.book .container .btn_wrap.course .nice-select .list {width:403px; font-size: 18px; border-radius: 16px; background-color: #E8BEFF; color: #000; font-weight:600; left:initial; right:0;}
.wrap.book .container .cont_paragraph_wrap .mtext_box {height:300px; line-height:300px;}

/* listening_comprehension */

.wrap.listening_comp{
    background-image: url(../img/08.lc_bg.png);
    background-color: #ff8484;
    width: 100%;
    height: 100%;
}
.wrap.listening_comp .container .inner .tit{color: #fff;}
.wrap.listening_comp .container .inner.list .tit{margin-bottom:50px;}
.wrap.listening_comp .container .inner.full {max-width:944px; padding:100px 0;}
.wrap.listening_comp .container .inner .cont_wrap.list {
    background-color: transparent;
    padding: 0;
    margin: 0 auto;
}
.wrap .container .inner .cont_wrap .list.lc li{
    width: calc(16.88% - 16px);
    margin-bottom: 16px;
    margin-right: 16px;
    box-shadow: 0px 3px 5px rgba(000, 000, 000, 0.03);
    border-radius: 30px;
    overflow: hidden;
}
.wrap .container .inner .cont_wrap .list.lc li:nth-child(6n){
    margin-right: 0;
}
.wrap .container .inner .cont_wrap .list.lc li>a>img{width: 100%}
.wrap.listening_comp .container .inner .list li>a{
    position: relative;
    color: #222;
    width: 100%;
    display: block;
    border-radius: 2.5vw;
}
.wrap.listening_comp .container .inner .list li>a>p{
    font-family: Nunito;
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
}
.wrap.listening_comp .container .btn_wrap.bottom{
    background-color: #E7F9D6;
}
.wrap.listening_comp .container .inner .cont_wrap {padding:40px 0 60px;}
.wrap.listening_comp .container .inner .cont_wrap .activity {font-size:24px; font-weight:800; margin-bottom:20px; text-align:center;}
.wrap.listening_comp .container .inner .txt_box_q {display:table; width:100%; max-width:744px; margin:0 auto; padding:40px 0 10px; font-size:20px;}
.wrap.listening_comp .container .inner .txt_box_q p{display:table-cell; width:calc(100% - 50px); text-align:left; line-height:1.2; word-break:keep-all;}
.wrap.listening_comp .container .inner .txt_box_q strong {width:50px; display:table-cell; text-align:center; font-weight:700;}
.wrap.listening_comp .container .inner .txt_box_q a.sound_btn {
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
	text-indent: -999999;
	overflow: hidden;
	width: 29px;
	height: 29px;
	background: #fdc958 url('/img/sub/sound_icon.png') 50% 50% no-repeat;
	border-radius: 100%;
	margin: 0 0 0 5px;
}
.wrap.listening_comp .container .inner .multi_list_box{width:100%; margin-top:5px;}
.wrap.listening_comp .container .inner .multi_list_box ul{width:100%; max-width:640px; margin:0 auto;}
.wrap.listening_comp .container .inner .multi_list_box ul li{width:100%; padding:5px 0; text-align:left;}
.wrap.listening_comp .container .inner .multi_list_box ul li > div div{width:100%; display:table; padding:18px 0px; border:1px solid #ccc; cursor:pointer; position:relative; transition: all 0.2s;}
.wrap.listening_comp .container .inner .multi_list_box ul li > div div span{width:50px; display:table-cell; text-align:center; font-size:18px; color:#231f1e; font-weight:700;}
.wrap.listening_comp .container .inner .multi_list_box ul li > div div p{width:calc(100% - 50px); display:table-cell; vertical-align:top; font-size:18px; color:#231f1e; font-weight:400; line-height:1.2; padding-right:10px;}
.wrap.listening_comp .container .inner .multi_list_box ul li > div div.on{border:1px solid #000;}
.wrap.listening_comp .container .inner .multi_list_box ul li > div div:before{content: ''; width: 100%; height: 100%; box-shadow: 0 0 0 2px #000 inset; opacity: 0;  position: absolute; top: 0px; left: 0px; visibility: hidden; transition: all 0.2s;}
.wrap.listening_comp .container .inner .multi_list_box ul li > div div.on:before{opacity: 1; visibility: visible;}


/* modal */
.modal_wrap{
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(000, 000, 000, 0.8);
    position: fixed;
    z-index: 9999;
}
.modal_wrap .modal_box{
    width: 100%;
    height: 100%;
    position: relative;
}
.modal_wrap .modal_box .modal{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 300px;
    padding: 40px;
    text-align: center;
    background-color: #fff;
    border-radius: 30px;
    box-sizing: border-box;
}
.modal_wrap .modal_box .modal .inner{display: block; position: relative;}
.modal_wrap .modal_box .modal .inner .card{
    margin-bottom: 30px;
}
.modal_wrap .modal_box .modal .inner .card>div{
    width: 176px;
    height: 220px;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0px 3px 5px rgba(000, 000, 000, 0.03);
    margin: 0 auto;
}
.modal_wrap .modal_box .modal .inner .card>div::before{    
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../img/03-2.glossary_card_on_frame.png);
    background-size: 100% auto;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
}



.modal_wrap .modal_box .modal .inner .card>div.sound button{
    width: 120px;
    height: 80px;
    background-image: url(../img/03-3.glossary_card_sound_icon.png);
    background-color: transparent;
    background-size: 54px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    z-index: 90;
    cursor: pointer;
    /* 영역 구분용 color 확인 후 삭제 요망 */
    background-color: #f2f2f2;
    border-radius: 15px;
}


.modal_wrap .modal_box .modal .inner .card>div.text p{
    max-width: 140px;
    font-family: Nunito;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #222;
    padding: 10px;
    line-height: 1;
    overflow-wrap: break-word;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



.modal_wrap .modal_box .modal .inner .card>div.img img{
        width: auto;
    height: 100%;
}




.modal_wrap .modal_box .modal .inner button{
    border: none;
    border-radius: 35px;
    padding: 0 40px;
    line-height: 70px;
    font-family: Nunito;
    font-weight: 900;
    font-size: 32px;
    margin: 0 8px;
    cursor: pointer;
    background-color: #222;
    color: #fff;
}
.modal_wrap .modal_box .modal .inner .close{
    display: block;
    width: 33px;
    height: 33px;
    background-image: url(../img/03-4.glossary_modal_close.png);
    position: absolute;
    top: -83px;
    right: -83px;
}

/* reset modal */
.modal_wrap.set .modal_box .modal{
    max-width: 554px; 
    background-image: url(../img/00.madal_reset_bg.png);
    background-size: 554px auto;
    background-position: bottom right;
}
.modal_wrap.set .modal_box .modal .inner>h2{margin-bottom: 20px;}
.modal_wrap.set .modal_box .modal .inner .btns{
    display: flex; 
    justify-content: center;
    margin-bottom: 20px;
}
.modal_wrap.set .modal_box .modal .inner .btns li{ width: 50%; margin: 0 8px; max-width: 178px;}
.modal_wrap.set .modal_box .modal .inner .btns li a img{width: 100%; height: auto;}
.modal_wrap.set .modal_box .modal .inner .notice{
    background-color: #222;
    color: #fff;
    border-radius: 15px;
    padding: 30px;
}
.modal_wrap.set .modal_box .modal .inner .notice li{
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.09em;
	text-align: left;
}
.modal_wrap.set .modal_box .modal .inner .notice li:last-child{margin-bottom: 0;}


/* ltr_set modal */
.modal_wrap.ltr_set .modal_box .modal{
    max-width: 554px;
    background-image: url(../img/00.madal_reset_bg.png);
    background-size: 554px auto;
    background-position: bottom right;
    background-repeat: no-repeat;
}
.modal_wrap.ltr_set .modal_box .modal .inner>h2{margin-bottom: 30px;}
.modal_wrap.ltr_set .modal_box .modal .inner>div{
    margin-bottom: 20px;
    display: block;
    position: relative;
    background-color: #f9f9f9;
    border-radius: 20px;
    padding: 30px;
}

.modal_wrap.ltr_set .modal_box .modal .inner .btns{
    height: 16vw;
    overflow-y: scroll;
}
.modal_wrap.ltr_set .modal_box .modal .inner .btns li{
    width: 100%; 
    max-width: 280px;
    margin: 0 auto 10px;
}
.modal_wrap.ltr_set .modal_box .modal .inner .btns li:last-child{margin-bottom: 0;}

/* scroll css */
.modal_wrap.ltr_set .modal_box .modal .inner .btns::-webkit-scrollbar{width: 6px; background-color: #f2f2f2; border-radius: 3px; overflow: hidden;}
.modal_wrap.ltr_set .modal_box .modal .inner .btns::-webkit-scrollbar-thumb{width: 6px; background-color: #ccc; border-radius: 3px;}


.modal_wrap.ltr_set .modal_box .modal .inner .btns li a{display: block; position: relative;}
.modal_wrap.ltr_set .modal_box .modal .inner .btns li a img{width: 100%; height: auto;}
.modal_wrap.ltr_set .modal_box .modal .inner .notice{
    background-color: #222;
    color: #fff;
    border-radius: 15px;
    padding: 30px;
	text-align: left;
}
.modal_wrap.ltr_set .modal_box .modal .inner .notice li{
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.09em;
}
.modal_wrap.ltr_set .modal_box .modal .inner .notice li:last-child{margin-bottom: 0;}


@keyframes scroll-animation{
    0%{
        left: 0;
    }
    100%{
        left: -260px; /* 텍스트 width와 동일 */
    }
}

.modal_wrap.ltr_set .modal_box .modal .inner .btns li a>.txt_wrap{
    width: 160px;
    overflow: hidden;
    position: absolute;
    bottom: 26px;
    right: 30px;
}
.modal_wrap.ltr_set .modal_box .modal .inner .btns li a>.txt_wrap>.txt_track{
    display: flex;
    position: relative;
    width: 1300px;
    animation: scroll-animation 5s linear infinite;
}
.modal_wrap.ltr_set .modal_box .modal .inner .btns li a>.txt_wrap>.txt_track p:first-child{
    margin-left: 10px;
}
.modal_wrap.ltr_set .modal_box .modal .inner .btns li a>.txt_wrap>.txt_track p{
    width: 260px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    color: #222;
    font-family: 'Pretendard';
}
.modal_wrap.ltr_set .modal_box .modal .inner .btns li a>.txt_wrap>.txt_track p>span{
    background-color: rgba(0, 0, 0, 0.4);
    font-weight: 300;
    border-radius: 20px;
    color: #fff;
    padding: 0 15px;
    line-height: 24px;
}
.modal_wrap.ltr_set .modal_box .modal .inner .btns li a::after{
    display: block;
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 30px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    background-image: url(../img/icon_check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    box-shadow: -2px 0 10px rgba(000, 000, 000, 0.1);
}

/* guide modal */
.modal_wrap.guide .modal_box .modal{
    max-width: 554px;
    background-image: url('/useprep/img/00.madal_reset_bg.png');
    background-size: 554px auto;
    background-position: bottom right;
    background-repeat: no-repeat;
}
.modal_wrap.guide .modal_box .modal .inner>h2{
	font-size: 30px;
	font-weight: 800;
	font-family: "Nunito", sans-serif;
	margin-bottom: 20px;
}
.modal_wrap.guide .modal_box .modal .inner>div{
    margin-bottom: 20px;
    display: block;
    position: relative;
    background-color: #f9f9f9;
    border-radius: 20px;
    padding: 30px;
}
.modal_wrap.guide .modal_box .modal .inner .notice,
.modal_wrap.guide .modal_box .modal .inner .notice2{
    background-color: #222;
    color: #fff;
    border-radius: 15px;
    padding: 30px;
	text-align: left;
}
.modal_wrap.guide .modal_box .modal .inner .notice li,
.modal_wrap.guide .modal_box .modal .inner .notice2 li{
	position: relative;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.3;
	margin-left: 20px;
    margin-bottom: 10px;
}
.modal_wrap.guide .modal_box .modal .inner .notice li:before{
    position: absolute;
    top: 0;
    left: -25px;
    content:'\1F514';
}
.modal_wrap.guide .modal_box .modal .inner .notice2 li:before{
    position: absolute;
    top: 0;
    left: -25px;
    content:'\1F4DA';
}
.modal_wrap.guide .modal_box .modal .inner .notice li:last-child,
.modal_wrap.guide .modal_box .modal .inner .notice2 li:last-child{margin-bottom: 0;}


/* modal text */
.modal_wrap{
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(000, 000, 000, 0.8);
    position: fixed;
    z-index: 9999;
}
.modal_wrap .modal_box{
    width: 100%;
    height: 100%;
    position: relative;
}
.modal_wrap.vb .modal_box .modal{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 40px;
    text-align: center;
    background-color: #fff;
    border-radius: 30px;
    box-sizing: border-box;
}
.modal_wrap.vb .modal_box .modal.wide {
    max-width: 675px;
}

.modal_wrap.vb .modal_box .modal .inner .card{
    display: flex;
    justify-content: center;
}
.modal_wrap.vb .modal_box .modal .inner .card>div.info{
    width: 368px;
    height: 220px;
    border-radius: 18px;
    text-align: start;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    background-color: #f2f2f2;
    overflow-y: scroll;
    box-sizing: border-box;
    position: relative;
}
.modal_wrap.vb .modal_box .modal .inner .card>div.info P{
    width: 100%;
    display: block;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    max-width: none;
    position: initial;
    transform: none;
    padding: 30px;
    box-sizing: border-box;
}
.modal_wrap.vb .modal_box .modal .inner .card>div.info::before{
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
    width: 100%;
    background: linear-gradient(rgba(242, 242, 242, 1), rgba(242, 242, 242, 0.0));
    background-image: none;
    z-index: 1;
}


.modal_wrap.vb .modal_box .modal .inner .card>div.text p{
    max-width: 140px;
    font-family: Nunito;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #222;
    padding: 10px;
    line-height: 1;
    overflow-wrap: break-word;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



.modal_wrap.vb .modal_box .modal .inner .card>div.img img{
    width: auto;
    height: 100%;
}




.modal_wrap.vb .modal_box .modal .inner button{
    border: none;
    border-radius: 35px;
    padding: 0 40px;
    line-height: 70px;
    font-family: Nunito;
    font-weight: 900;
    font-size: 32px;
    margin: 0 8px;
    cursor: pointer;
    background-color: #222;
    color: #fff;
}
.modal_wrap.vb .modal_box .modal .inner .close{
    display: block;
    width: 33px;
    height: 33px;
    background-image: url(../img/03-4.glossary_modal_close.png);
    position: absolute;
    top: -83px;
    right: -83px;
}

@media (min-width: 1279px) and (max-width: 1440px) {
	#draw.wrap .container .inner {padding:80px 40px 130px;}
}

/* PC 최소(1280px) */
/* 태블릿 가로(1024px) */
@media (min-width: 768px) and (max-width: 1279px) {
    .wrap .top{position: sticky;}
	#draw.wrap .top {position:fixed;}

    .wrap .top a.set, .wrap .top a.back, .wrap .top a.worksheet {width: 60px; height: 60px;}
	.wrap .top a.worksheet:before {top:12%; left:-6%;}
    .wrap .top a.home {
        width: 103px;
        height: 53px;
    }
	.wrap .container {min-height:initial;}

    .wrap.main .container .inner{
        position: sticky; 
        top: 0;
        left: 0;
        transform: none;
    }
	.wrap.main.math .container .inner {
		padding: 60px 40px 110px;
	}

    .wrap .container .inner {
        padding: 20px 40px 110px;
        box-sizing: border-box;
        max-width: none;
    }
	.wrap.listening_comp .container .inner {padding: 20px 40px 160px;}

	#draw.wrap .container .inner {padding:110px 40px;}


    .wrap.song .container .inner{padding: 80px 40px;}
    .wrap .container#main .inner ul.gate li {
        max-width: 328px;
        width: 100%;
    }
    .wrap .container#main .inner ul.literacy{
        max-width: 80%;
    }
    .wrap .container#main .inner ul.literacy li{
        max-width: 232px;
        width: 30%;
    }
    .wrap .acc_wrap ul li.rk{
        width: 65px;
        height: 91px;
        top: 6%;
        right: 20%;
    }
    .wrap .acc_wrap ul li.cd1{
        width: 102px;
        height: 70px;
        top: 12%;
        left: 2%;
        opacity: 90%;
    } 
    .wrap .acc_wrap ul li.star{
        width: 76px;
        height: 73px;
        bottom: 0;
        top: 180px;
        right: -21px;
    }
    .wrap .acc_wrap ul li.ap{
        width: 77px;
        height: 85px;
        bottom: 5%;
        left: 2%;
    }
    .wrap .acc_wrap ul li.cd2{
        width: 102px;
        height: 70px;
        right: -1%;
        bottom: 25%;
        opacity: 90%;
    }
    .wrap .acc_wrap ul li.cl{
        width: 74px;
        height: 97px;
        bottom: 0;
        right: 5%;
    }

    .wrap .container .btn_wrap>button{
        padding: 0 30px;
        line-height: 50px;    
        font-size: 24px;
        margin: 0 10px;
    }
    /* song_list */
    .wrap.glossary .container .inner .list li{border-radius: 2vw;}
    /* glossary_list */
    .wrap.glossary .container .inner .list li>a{border-radius: 2.5vw;}
    .wrap.glossary .container .inner .list li>a>p{
        bottom: 14%;
    }

    /* glossary_list card1 */
    .wrap.glossary .container .inner .cont_wrap ul.list_221{
        height: 100%;
        padding: 50px 50px;
    }
    .wrap.glossary .container .inner .cont_wrap ul.list_221 li{
        width: 140px;
        height: 175px;
    }
    .wrap.glossary .container .inner .cont_wrap ul.list_221 li{
        margin-right: 0;
    }
    ul.list_232 #talkb1, ul.list_232 #talkb6{ margin: 0 8px 16px 8px;
    }
    ul.list_232 #talkb5, ul.list_232 #talkb10{margin: 0 8px 16px 8px;}
	/*
    .wrap.hf .container .inner .cont_wrap ul.list_232 li, .wrap.vb .container .inner .cont_wrap ul.list_232 li{
        width: 140px;
        height: 175px;
        margin: 0 8px 16px 8px;
    } */
	/*
    .wrap.hf .container .inner .cont_wrap ul.list_221 li{
        width: 140px;
        height: 175px;
        margin: 0 8px 16px 8px;
    }*/
	.wrap.glossary .container .inner .cont_wrap ul.list_221 li.text>a>p, ul.list_232 li.text>a>p{
		max-width:110px;
		font-size:24px;
	}

    .modal_wrap .modal_box .modal .inner button{
        padding: 0 30px;
        line-height: 50px;
        font-size: 24px;
        margin: 0 10px 
    }
    .wrap.hf .container .inner .cont_wrap ul.list_232{
        height: 100%;
    }
    
    .wrap.vb .container .inner .cont_wrap ul.list_232{
        height: 100%;
    }
    .wrap.vb .container .inner .cont_wrap ul.list_221{height: 100%;min-height:100%;}

    .wrap .container .btn_wrap.level>button{
        width: 14vw;
        font-size: 1.5625vw;
        padding: 0 1.8vw;
    }
    .wrap.vb .container .inner .list li>a>p{font-size: 1.4vw;}


	/* sp */
	.wrap.sp .container .inner .cont_wrap .number_wrap {
		padding: 10px 50px;
	}

    /* vb */
    
    .wrap.vb .container .inner .list li>a>p{
        font-size: 1.8vw;
        bottom: 2.2vw;
    }
	 /* .wrap.vb .container .inner .cont_wrap ul.list_221 li {width:140px;height:175px;margin:0 8px 16px 8px;} */
	.wrap.vb .container .inner .cont_wrap ul.list_221 li.text>a>p, ul.list_232 li.text>a>p {max-width:130px;}
	.wrap.vb .container .inner .cont_wrap ul.list_221 li img {width:100%; height:auto;}

    /* cont_wrap.song>.cont_wrap.reward */
    .wrap .container .inner .cont_wrap.reward .point_tit{
        max-width: 780px;
        font-size: 32px;
        line-height: 50px;
    }

    .modal_wrap.text .modal_box .modal{
        width: 90%;
    }
	
	/* book */
	.wrap.book .container .inner.full{padding: 0px 0 150px;}
	.wrap.book .container .inner .cont_wrap.booklist .ebook {justify-content:center;}
	.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner .cover {background-size:150%;}
	.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner p.title {font-size:1.94vw;}
}
/* 태블릿 세로(768px) */
@media (min-width: 300px) and (max-width: 768px) {
    .wrap .top{position: sticky;}

	.wrap .top a.set, .wrap .top a.back, .wrap .top a.worksheet {width: 60px; height: 60px;}
    .wrap .top a.home {
        width: 103px;
        height: 53px;
    }

    .wrap.song .container .inner{padding: 80px 40px;}
    .wrap .container .inner {
        padding: 80px 20px 120px;
        box-sizing: border-box;
        max-width: none;
    }
	.wrap .container.result .inner {padding: 20px 20px 120px;}

   	.wrap .container .inner .tit {width:80%; margin:0 auto 25px; line-height:1.2;}

     .wrap .container#main .inner ul.gate li {
        max-width: 300px;
        width: 100%;
    }
     .wrap.literacy .container .inner{
        padding: 80px 40px;
        box-sizing: border-box;
        max-width: none;
        position: inherit;
        top: 0;
        left: 0;
        transform: translate(0);
    }
     .wrap .container#main .inner ul.literacy li{
        max-width: 300px;
        width: 40%;
    }
    .wrap .acc_wrap ul li.ap, .wrap .acc_wrap ul li.cl, .wrap .acc_wrap ul li.rk, .wrap .acc_wrap ul li.star {display: none;}
    .wrap .acc_wrap ul li.cd1{
        top: 14%;
        left: -3%;
    } 
    .wrap .acc_wrap ul li.cd2{
        right: -3%;
        bottom: 4%
    }
	.wrap .container .inner .cont_wrap.reward .point_tit>.point {display:block; width:50%; margin:0 auto;}
	.wrap .container .btn_wrap>button {padding:0 20px; font-size:28px; border-radius:31px; line-height:62px;}
	.wrap .container button.guide {width:62px; height:62px;}
    .wrap .container .inner .cont_wrap .list {justify-content:center;}
	.wrap .container .inner .cont_wrap .list li>a>img {max-width:max-content;}

    .wrap.glossary .container .inner .list li.clear>a::after, 
    .wrap .container .inner .cont_wrap .list.hf li.clear>a::after,
    .wrap .container .inner .cont_wrap .list.vb li.clear>a::after,
    .wrap .container .inner .cont_wrap .list.sp li.clear>a::after,
	.wrap .container .inner .cont_wrap .list.oral li.clear>a::after,
	.wrap .container .inner .cont_wrap .list.lc li.clear>a::after{
        width: 116px;
        height: 116px;  
    }

    /* song_list */
    .wrap .container .inner .list.song li{width: 33.33%;}

    /* glossary_list */
    
    .wrap.glossary .container .inner .cont_wrap ul.list_221, ul.list_232{
        height: auto;
    }
    .wrap.glossary .container .inner .list li{width: calc(33.33% - 16px);}
    .wrap.glossary .container .inner .list li>a {
        border-radius: 5vw;
    }
    .wrap.glossary .container .inner .list li:nth-child(3n){margin-right: 0;}
    /* glossary_list card1 */
    .wrap.glossary .container .inner{padding: 80px 40px;}
    .wrap.glossary .container .inner.full{padding: 80px 0 140px;}
    .wrap.glossary .container .inner.full .cont_wrap{
        border-radius: 0px;
        padding: 40px 40px 20px 40px;
    }
    .wrap.glossary .container .inner .cont_wrap ul.list_232{
        height: 100%;
        padding: 0;
    }
    .wrap.glossary .container .inner .cont_wrap ul.list_221 li{
        width: 154px;
        height: 193px;
    }
    .wrap.hf .container .inner .cont_wrap ul.list_232 li{
	width: 140px;
    height: 175px;
    }
	/*
    .wrap.hf .container .inner .cont_wrap ul.list_221 li{width: 140px;
    height: 175px;} */

	/*
	ul.list_232 li, ul.list_232 #talkb1, ul.list_232 #talkb6, ul.list_232 #talkb5, ul.list_232 #talkb10 {
		margin: 0 8px 16px 8px;
	} */

    .wrap .container .inner .cont_wrap.reward .point_tit {
        max-width: 80%;
        font-size: 32px;
        line-height: 50px;
    }
    .wrap .container .inner .cont_wrap.reward .reward_img{
        width: 100%;
        height: auto;
    }

	/* pc */
	.wrap.pc .container .inner .cont_wrap .line span.br {margin-left:0px; display:block;}

    /* sp */
    .wrap .container .inner .cont_wrap .list.sp li{
        width: calc(50% - 32px);
		max-width:176px;
        margin: 16px;
    }
	.wrap .container .inner .cont_wrap .list.sp li:nth-child(6n){
        margin-right: 16px;
	}
    .wrap.sp .container .inner .list li>a>p{
        font-size: 20px;
    }

    /* hf */
    .wrap .container .inner .cont_wrap .list.hf li{
        width: calc(50% - 32px);
		max-width:176px;
        margin: 16px;
    }
	.wrap .container .inner .cont_wrap .list.hf li:nth-child(6n) {margin-right:16px;}
    .wrap.hf .container .inner.full{padding: 80px 0 140px;}
	.wrap.hf .container .inner .cont_wrap{width:90%; margin:0 auto;}
    .wrap.hf .container .inner .cont_wrap ul.list_221{height: 100%}
    
    /* oral */
    .wrap .container .inner .cont_wrap .list.oral li{
        width: calc(50% - 32px);
		max-width:176px;
        margin: 16px;
    }
    .wrap .container .inner .cont_wrap .list.oral li:nth-child(6n){
		margin-right: 16px;
	}
    .wrap.oral .container .inner.full{padding: 40px 40px 140px;}
	.cont_paragraph_wrap .mtext_box {height:auto;}

    /* book */
	.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail {
		width: calc(33.3333% - 48px);
		margin: 16px 16px;
	}
	.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner p.title {font-size:2.6vw;}
    .wrap.book .container .inner.full{padding: 0px 40px 140px;}

	.wrap.book .container .btn_wrap.course {justify-content:center;}
	.wrap.book .container .btn_wrap.course .nice-select {width: max-content; max-width:96%;}
	.wrap.book .container .btn_wrap.course .nice-select .list {width: 100%; min-width:300px; left:0%; right:initial; font-size:.98rem;}

    /* listening_comp */
    .wrap.listening_comp .container .inner .cont_wrap .list.lc li{
        width: calc(50% - 32px);
		max-width:176px;
        margin: 16px;
    }
    .wrap.listening_comp .container .inner.full{padding: 40px 40px 140px;}

    /* vb */
	.wrap .container .btn_wrap.level {text-align:center;}

    .wrap .container .inner .cont_wrap .list.vb li{
        width: calc(50% - 32px);
		max-width:176px;
        margin: 16px;
    }
	.wrap .container .inner .cont_wrap .list.vb li:nth-child(6n){
        margin-right: 16px;
	}

    .wrap.vb .container .inner .list li>a>p{
        font-size: 20px;
    }
    .wrap.vb .container .inner.full{padding: 80px 0 140px;}
    .wrap.vb .container .inner .cont_wrap{width:90%; margin:0 auto;}
    .wrap.vb .container .inner .cont_wrap ul.list_221{height: 100%;}
    .wrap .container .btn_wrap.level>button{
        width: 200px;
        font-size: 20px;
        padding: 0 20px;
    }
    .wrap .container .btn_wrap.level>button::after{right: 1.8vw;}

    .modal_wrap.text .modal_box .modal{
        width: 90%;
    }
    .modal_wrap.vb .modal_box .modal .inner .card{
        display: block;
    }
    .modal_wrap.vb .modal_box .modal .inner .card>div.info{
        margin-top: 20px;
        width: 100%;
        max-width: none;
        height: 100%;
    }
    .modal_wrap.vb .modal_box .modal .inner .card>div.info p{
        width: 100%;
        height: 140px;
        font-size: 16px;
        padding: 20px;

    }


    /* reset modal */
    .modal_wrap.ltr_set .modal_box .modal{
        width: 90%;
        max-width: 410px;
        border-radius: 22px;
    }
    .modal_wrap.ltr_set .modal_box .modal .inner>h2>img{
        width: 60%;
        max-width: 2206px;
        height: auto;
    }

    .modal_wrap .modal_box .modal .inner .close{
        top: -90px;
        right: -43px
    }

    .modal_wrap.ltr_set .modal_box .modal .inner>div::after{
        max-width: 270px;
    }
    
    .modal_wrap.ltr_set .modal_box .modal .inner .btns{
        height: 30vh;
    }
    .modal_wrap.ltr_set .modal_box .modal .inner .btns li{
        max-width: 220px;
        width: 100%;
    }
    .modal_wrap.ltr_set .modal_box .modal .inner .btns li a::after{
        width: 35px;
        height: 35px;
        bottom: 15px;
        right: 12px;
        background-size: 16px auto;
    }
    .modal_wrap.ltr_set .modal_box .modal .inner .btns li a>.txt_wrap{
        width: 120px;
        bottom: 19px;
    }

    @keyframes scroll-animation{
    0%{
        left: 0;
    }
    100%{
        left: -190px; /* 텍스트 width와 동일 */
    }
    }
    .modal_wrap.ltr_set .modal_box .modal .inner .btns li a>.txt_wrap>.txt_track{
        width: 800PX;
    }
    .modal_wrap.ltr_set .modal_box .modal .inner .btns li a>.txt_wrap>.txt_track p{
        font-size: 14px;
        width: 190px;
    }
    .modal_wrap.ltr_set .modal_box .modal .inner .notice,
	.modal_wrap.guide .modal_box .modal .inner .notice,
	.modal_wrap.guide .modal_box .modal .inner .notice2{
        border-radius: 12px;
        padding: 20px;
    }
    .modal_wrap.ltr_set .modal_box .modal .inner .notice li,
	.modal_wrap.guide .modal_box .modal .inner .notice li,
	.modal_wrap.guide .modal_box .modal .inner .notice2 li{
        font-size: 14px;
        margin-bottom: 10px;
    }
}

@media (max-width: 454px) {
	.wrap .top {padding:0 20px;}
	.cont_paragraph_wrap .activity {padding:0px;}
	.wrap .container .btn_wrap.bottom {width:80%;}
	.modal_wrap .modal_box .modal {width:90%;}

	.wrap .container.result .inner {padding: 0px 20px 100px;}

	/* pc */
	.wrap.pc .container .inner .cont_wrap {padding:40px 10px;)}
	.wrap.pc .container .inner .cont_wrap .list.pc li {margin:0 0 16px;}
	.wrap.pc .container .inner .cont_wrap .alphabet_wrap {margin:0 auto;}
	.wrap.pc .container .inner .cont_wrap .line {line-height:1.2; padding:20px 40px;}
	.wrap.pc .container .inner .cont_wrap .line span.br {display:initial; margin-left:5px;}

	/* sp */
	.wrap.sp .container .inner {padding:40px 20px 100px;}
	.wrap.sp .container.result .inner {padding:0px 20px 100px;}
	.wrap.sp .container .inner .cont_wrap .number_wrap {padding:10px 40px;}
	.wrap.sp .container .inner .cont_wrap .line {line-height:1.2; padding:20px 40px;}
	.wrap.sp .container .inner .cont_wrap .alphabet_wrap {margin:0 auto;}
	.wrap.sp .container .btn_wrap>button {padding:0 20px; margin:0 4px; font-size:24px; border-radius:27px; line-height:54px;}

	/* hf */
	.wrap.hf .container .inner .cont_wrap {width:94%; margin:0 auto; padding:40px 0 24px; border-radius:30px;}
	.wrap.hf .container .inner .cont_wrap ul.list_221 li {width:calc(50% - 16px); max-width:176px; height:51vw; margin:0 8px 16px 8px;}
	.wrap.hf .container .inner .cont_wrap ul.list_221 li img {width:100%; max-width:max-content;}

	/* vb */
	.wrap.vb .container .inner .cont_wrap {width:94%; margin:0 auto; padding:40px 0 24px; border-radius:30px;}
	.wrap.vb .container .inner .cont_wrap ul.list_221 li {width:calc(50% - 16px); max-width:176px; height:51vw; margin:0 8px 16px 8px;}
	.wrap.vb .container .inner .cont_wrap ul.list_221 li img {width:100%; max-width:max-content;}
	.modal_wrap.vb .modal_box .modal.wide {width:90%;}

    /* book */
    .wrap.book .container .inner.full{padding: 40px 20px 120px;}
	.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail {
		width: calc(50% - 32px);
	}
	.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner p.title {font-size:4.6vw;}

    .wrap .container .inner .cont_wrap .list.book li{
        width: calc(50% - 32px);
		max-width:176px;
        margin: 16px;
    }
	.wrap.book .container .btn_wrap.course .nice-select {font-size:4vw;}
}

@media (max-width: 320px) {
	.wrap .top a.home {width:86px; height:45px;}
	.wrap .top a.set, .wrap .top a.back, .wrap .top a.worksheet {width:54px; height:54px;}
	.wrap .top a.worksheet:before {top:15%; left:0%; font-size:40px;}
	.cont_paragraph_wrap {padding:40px 20px;}
	.cont_paragraph_wrap .mtext_box {padding:16px 15px;}
    .wrap.book .container .inner.full{padding: 40px 20px 120px;}
	.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail {
		width: 80%;
	}
	.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner .cover {background-size:120%;}
	.wrap.book .container .inner .cont_wrap.booklist .ebook .thumbnail_inner p.title {font-size:20px;}
	.wrap.book .container .btn_wrap.course {width:100%;}
	.wrap.book .container .btn_wrap.course .nice-select .list {width:80%; left:-5%; min-width:268px; font-size:.88rem;}
}