@charset "utf-8";

@font-face {
	font-family: 'NanumBarunGothic';
	font-weight: 400;
	src: local('NanumBarunGothic'),
	url('../font/NanumBarunGothic.woff2') format('woff2'),
	url('../font/NanumBarunGothic.woff') format('woff'),
	url('../font/NanumBarunGothic.ttf') format('truetype');
}

/* Common */
* {-webkit-text-size-adjust:none; box-sizing:border-box; }
html, body { width:100%; height:100%; padding:0px; margin:0px; position:relative; }
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,a,button,select{ margin:0; padding:0; line-height:1.4; word-break:keep-all; }
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,button,select { -webkit-touch-callout: none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-appearance:none; }
body,input,textarea,select,button,table{ font-family:Arial, sans-serif, 굴림, Gulim, Arial, sans-serif; font-size:12px; color:#000; font-weight:400; }
body{ word-break:break-all; }
img,fieldset,iframe{ border:0 }
img{ max-width:100%; vertical-align:top }
li{ list-style:none }
em,address{ font-style:normal }
input,select,button{ vertical-align:middle; outline:none; }
button { cursor:pointer; border:none; }

/* Common Add */
a { color:#000; text-decoration:none; }
a:hover,
a:link,
a:visited { text-decoration:none;}
caption,legend,.blind{ visibility:hidden;overflow:hidden;position:absolute;top:0;left:-999em;width:0;height:0;font-size:0;line-height:0;text-align:left } 
caption{ position:static }
input { border-radius:0px; -webkit-appearance:none; }
input[type="text"],
input[type="password"] { height:40px;padding:0 7px; border:1px solid #c7c7c7; color:#000;line-height:38px; font-size:24px; }
input[type="text"].readonly{ border-top:1px solid #bfc6cc;border-left:1px solid #bfc6cc;border-right:1px solid #d8dee3;border-bottom:1px solid #d8dee3;background:#f1f3f4 }
select:focus { border:1px solid #00a2e2;background:#edf6fb;color:#000 }
input[type="radio"]{*width:13px;*height:13px}
select{ height:24px;*margin-top:5px;padding:0 0 0 20px; border:1px solid #cccccc; line-height:1.2em;color:#000 }
textarea{ width:100%; height:2em; padding:10px;border:1px solid #cfcfcf;line-height:1.5em; font-size:24px; outline:none; vertical-align:middle; resize:none; }
table{ border-collapse:collapse; border-spacing:0;line-height:1.5em }
hr{display:none}
.input_number::-webkit-outer-spin-button,
.input_number::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type="button"] { border:none; }

input[type="checkbox"],
input[type="radio"] { position:absolute; left:-999999px; opacity:0; visibility:hidden; }

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block; }
.hide { width:1px; height:1px; overflow:hidden; text-indent:-1000px; visibility:hidden;}

input[type="radio"]+label { padding-left:28px; margin-right:70px; position:relative; font-size:24px; cursor:pointer; }
input[type="radio"]+label:after { content:''; width:18px; height:18px; position:absolute; left:0; top:50%; margin-top:-9px; border:1px solid #000; border-radius:50%; }
input[type="radio"]:checked + label:after { background:#000; }
input[type="radio"]+label:last-child { margin-right:0; }

.w20 { width:20px !important; }
.w40 { width:40px !important; }
.w50 { width:50px !important; }
.w60 { width:60px !important; }
.w80 { width:80px !important; }
.w100 { width:100px !important; }
.w120 { width:120px !important; }
.w140 { width:140px !important; }
.w160 { width:160px !important; }
.w180 { width:180px !important; }
.w200 { width:200px !important; }
.w240 { width:240px !important; }
.w260 { width:260px !important; }
.w280 { width:280px !important; }
.w300 { width:300px !important; }
.w320 { width:320px !important; }
.w340 { width:340px !important; }
.w380 { width:380px !important; }
.w400 { width:400px !important; }
.w430 { width:430px !important; }
.w450 { width:450px !important; }
.w600 { width:600px !important; }
.w700 { width:700px !important; }
.w800 { width:800px !important; }
.w900 { width:900px !important; }

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

#intro { height:100%; position:relative;
	background: rgb(79,69,182);
	background: -moz-linear-gradient(90deg, rgba(79,69,182,1) 0%, rgba(255,57,57,1) 50%, rgba(255,187,99,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(79,69,182,1) 0%, rgba(255,57,57,1) 50%, rgba(255,187,99,1) 100%);
	background: linear-gradient(90deg, rgba(79,69,182,1) 0%, rgba(255,57,57,1) 50%, rgba(255,187,99,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4f45b6",endColorstr="#ffbb63",GradientType=1);
}
#intro:after { content:''; width:900px; height:710px; position:absolute; left:50%; top:19px; margin-left:-450px; background:url('../images/bgIntro.png') no-repeat; background-size:100% auto; z-index:2; }
#intro .content { padding:228px 0; position:relative; text-align:center; color:#fff; font-family:Arial; z-index:5; }
#intro .content h1 { margin-bottom:10px; font-size:48px; }
#intro .content h2 { padding-bottom:43px; margin-bottom:43px; position:relative; font-size:60px; }
#intro .content h2:after { content:''; width:236px; height:1px; position:absolute; left:50%; bottom:0; margin-left:-118px; background:#fff; }
#intro .content a { width:150px; height:44px; display:block; margin:0 auto; background:#fff; border-radius:22px; color:#505fcf; line-height:44px; font-size:24px; font-weight:700; }

#outro { height:100%;
	background: rgb(98,89,200);
	background: -moz-linear-gradient(124deg, rgba(98,89,200,1) 0%, rgba(235,183,252,1) 100%);
	background: -webkit-linear-gradient(124deg, rgba(98,89,200,1) 0%, rgba(235,183,252,1) 100%);
	background: linear-gradient(124deg, rgba(98,89,200,1) 0%, rgba(235,183,252,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6259c8",endColorstr="#ebb7fc",GradientType=1);	
}
#outro .content { padding:228px 0; position:relative; text-align:center; color:#fff; font-family:Arial; z-index:5; }
#outro .content .btnEnding { width:46px; height:46px; display:block; margin:0 auto 20px; border-radius:50%; background:url('../images/btnEnding.png') center center no-repeat #383838; background-size:24px auto; font-size:0; text-indent:-99999px; }
#outro .content h1 { margin-bottom:20px; font-size:60px; }
#outro .content h2 { padding-bottom:43px; margin-bottom:43px; position:relative; font-size:40px; font-weight:400; }
#outro .content h2:after { content:''; width:236px; height:1px; position:absolute; left:50%; bottom:0; margin-left:-118px; background:#fff; }
#outro .content a { width:150px; height:44px; display:inline-block; margin:0 auto; background:#fff; border-radius:22px; color:#505fcf; line-height:44px; font-size:24px; font-weight:700; vertical-align:middle; }
#outro .content a.close { margin-left:16px; background:#002333; color:#00fc7f; }

.inner { max-width:1520px; margin:0 auto; padding-bottom:100px; position:relative; }
.inner:after { content:''; display:block; clear:both; }

#header { width:100%; height:68px; padding:8px 0; position:fixed; left:0; top:0; z-index:10; transition:top .5s;
	background: rgb(79,69,182);
	background: -moz-linear-gradient(90deg, rgba(79,69,182,1) 0%, rgba(255,57,57,1) 50%, rgba(255,187,99,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(79,69,182,1) 0%, rgba(255,57,57,1) 50%, rgba(255,187,99,1) 100%);
	background: linear-gradient(90deg, rgba(79,69,182,1) 0%, rgba(255,57,57,1) 50%, rgba(255,187,99,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4f45b6",endColorstr="#ffbb63",GradientType=1);
}
#header .step1 { width:50px; height:50px; float:left; background:rgba(0,0,0,.46); border-radius:50%; color:#fff; font-size:16px; text-align:center; line-height:50px; }
#header .step2 { margin-left:62px; font-size:22px; color:#fff; line-height:50px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#header .btnStep { width:50px; height:50px; float:left; background:url('../images/btnStep.png') center center no-repeat rgba(0,0,0,.46); background-size:100% auto; border-radius:50%; font-size:0; text-indent:-9999px; }
#header .btnResult { width:50px; height:50px; float:left; margin-left:11px; background:url('../images/btnResult.png') center center no-repeat rgba(0,0,0,.46); background-size:100% auto; border-radius:50%; font-size:0; text-indent:-9999px; }
#header .btnDict { width:50px; height:50px; float:left; margin-left:11px; background:url('../images/btnDict.png') center center no-repeat rgba(0,0,0,.46); background-size:100% auto; border-radius:50%; font-size:0; text-indent:-99999px; }
#header .btnExit { width:50px; height:50px; position:absolute; right:0; top:0; background:url('../images/btnExit.png') right center no-repeat; background-size:36px auto; font-size:0; text-indent:-99999px; }
#header .inner > .left { width:calc(50% - 110px); position:absolute; left:0; top:0; }
#header .inner > .right { position:absolute; right:61px; top:0; transition:bottom .5s; }

.btnToggleTool { display:none; }

#topTitle { width:100%; height:62px; position:fixed; left:0; top:68px; background:#fff; box-shadow:0 2px 5px 2px rgba(0, 0, 0, .13); text-align:center; z-index:10; transition:top .5s; }
#topTitle h1 { max-width:300px; position:fixed; left:50%; top:8px; color:#fff; text-align:center; font-size:28px; line-height:50px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; transform:translateX(-50%); }
#topTitle h2 { font-size:24px; color:#f33940; line-height:62px; }
#topTitle.is--direction h2:before { content:''; width:46px; height:46px; display:inline-block; margin-right:15px; border:2px solid #fbadab; border-radius:50%; background:url('../images/btnDirection.png') center center no-repeat; background-size:24px auto; box-sizing:border-box; overflow:hidden; vertical-align:middle; cursor:pointer; }
#topTitle.is--direction h2.on:before { background-image:url('../images/btnDirection_on.png'); }
#topTitle span.page { width:44px; height:30px; position:absolute; left:50%; top:50%; margin-left:450px; border-radius:2px; background:#f77479; text-align:center; line-height:30px; font-size:18px; color:#fff; font-weight:400; transform:translateY(-50%); }

#container { padding-top:140px; transition:padding .5s; }
#container.with--footer { padding-bottom:170px; }

.btnStepArrow { width:34px; height:54px; position:fixed; left:50%; top:370px; background:url('../images/btnStepArrow.png') center center no-repeat; font-size:0; text-indent:-99999px; z-index:20; }
.btnStepArrow.on { background-image:url('../images/btnStepArrowOn.png'); }
.btnStepArrow.prev { margin-left:-660px; }
.btnStepArrow.next { margin-left:626px; transform:rotate(180deg); }

.boxQuizTop { width:990px; margin:0 auto; position:relative; }
.boxQuizTop:after { content:''; width:100%; height:1px; position:absolute; left:0; top:50%; background:#d6d6d6; }
.boxQuizTop span { width:58px; height:58px; display:block; margin:0 auto; position:relative; background:#fff; border:1px solid #ff9493; border-radius:50%; color:#ff3b39; font-size:26px; text-align:center; line-height:56px; z-index:5; }

/* Content :: Spice it up */
.boxSpice { padding:50px 0 0; }
.boxSpice .mov { width:650px; height:360px; margin:0 auto 20px; position:relative; }
.boxSpice .mov iframe { width:100%; height:100%; }
.boxSpice .quiz .example { width:990px; margin:0 auto; padding:20px 0; text-align:center; }
.boxSpice .quiz .example ul { display:inline-block; text-align:left; }
.boxSpice .quiz .example ul li { position:relative; padding-left:24px; font-size:24px; }
.boxSpice .quiz .example ul li+li { margin-top:15px; }
.boxSpice .quiz .example ul li > span { position:absolute; left:0; top:0; }



/* Content :: Dialogue */
.boxDialogue { padding:10px 0; }
.boxDialogue .mov { width:1034px; padding:16px 17px; margin:0 auto; background:#efefef; }
.boxDialogue .mov .cont { position:relative; }
.boxDialogue .mov .cont video { width:100%; }
.boxDialogue .btn { padding:40px 0; border-top:0; }

.cont .btnPlay { width:126px; height:126px; position:absolute; left:50%; top:50%; background:url('../images/btnPlayLarge.png') no-repeat; font-size:0; text-indent:-99999px; transform:translate(-50%, -50%); }
.cont .btnPlay.hide { display:none; }


/* Content :: Shadowing & Role Play*/
.boxShadowing { width:990px; padding-top:50px; margin:0 auto; }
.boxShadowing ul { margin-bottom:45px; }
.boxShadowing ul li { overflow:hidden; }
.boxShadowing ul li+li { margin-top:20px; }
.boxShadowing ul li:before { content:''; width:56px; height:50px; float:left; border-radius:12px; background:url('../images/iconShadowPlay.png') center center no-repeat; }
.boxShadowing ul li.player1:before { background-color:#6a92f7; }
.boxShadowing ul li.player2:before { background-color:#ff6561; }
.boxShadowing ul li.player3:before { background:url('../images/iconRoleplay.png') center center no-repeat #c7c7c7; }
.boxShadowing ul li a { margin-left:66px; padding:8px 20px; position:relative; display:block; font-size:20px; line-height:30px;border:2px solid #dcdcdc; border-radius:12px; }

/* .boxShadowing ul li a.fin { background:#e9eef1; color:#7e7e7e; } */
.boxShadowing ul li a.ing { background:#05bbc9; color:#fff; }
.boxShadowing.type--after ul li a { padding-left:68px; }
.boxShadowing.type--after ul li a:after { content:''; width:30px; height:24px; position:absolute; left:20px; top:50%; margin-top:-12px; background:url('../images/iconShadowing.png') center 0 no-repeat; }
.boxShadowing.type--after ul li a.ing:after { background-position:center -24px; }
 { display:block; }
.boxShadowing.type--eng ul li a span.kor,
.boxShadowing.type--kor ul li a span.eng { display:none; }
.boxShadowing.type--eng ul li a span.eng,
.boxShadowing.type--kor ul li a span.kor { display:block; }

.boxShadowing .btn { padding-top:37px; }


/* Content :: CYU */
.boxCyu { width:990px; position:relative; padding-top:80px; margin:0 auto; }
.boxCyu ul { padding-bottom:34px; }
.boxCyu ul li+li { margin-top:18px; }
.boxCyu ul li .title { margin-bottom:5px; position:relative; padding-left:26px; font-size:24px; }
.boxCyu ul li .title .num { position:absolute; left:0; top:0; }
.boxCyu ul li .title .num span { color:#ff1e5e; }
.boxCyu ul li .inputBasic { display:block; padding-left:28px; }
.boxCyu ul li .inputBasic textarea { width:100%; height:90px; }
.boxCyu .btnDialogue { width:134px; height:40px; position:absolute; right:0; top:40px; background:#ff270a; border-radius:20px; color:#fff; text-align:center; line-height:40px; font-size:20px; }



/* Content :: Grammar */
.boxGrammar { width:990px; margin:0 auto; padding-top:10px; text-align:center; }
.boxGrammar .cont { margin:40px 0; position:relative; text-align:center; }
.boxGrammar .cont .mov { width:650px; height:360px; margin:0 auto; position:relative; }
.boxGrammar .cont .mov iframe { width:100%; height:100%; }
.boxGrammar .cont .mov+.img { margin-top:20px; }
.boxGrammar .quiz .question { position:relative; margin:40px 0 34px; padding:5px 0; font-size:24px; }
.boxGrammar .quiz .question:after { content:''; width:28px; height:2px; position:absolute; left:2px; bottom:0; background:#ff1313; }
.boxGrammar .quiz ul { margin-bottom:15px; }
.boxGrammar .quiz ul li { position:relative; padding-left:26px; font-size:24px; line-height:46px; }
.boxGrammar .quiz ul li+li { margin-top:26px; }
.boxGrammar .quiz ul li .num { position:absolute; left:0; top:0; line-height:46px; }
.boxGrammar .quiz ul li .num span { color:#ff1e5e; }
.boxGrammar .quiz+.img { padding:20px 0 40px; }
.boxGrammar .quiz .inQuiz { display:inline-block; text-align:left; }


/* Content :: PC */
.boxPC { width:990px; margin:0 auto; padding:30px 0 0; }
.boxPC .top { margin-bottom:30px; position:relative; padding-bottom:20px; text-align:center; font-size:48px; }
.boxPC .top:after { content:''; width:28px; height:2px; position:absolute; left:50%; bottom:0; margin-left:-14px; background:#ff1313; }
.boxPC .top div { display:inline-block; }
.boxPC .top div+div { margin-left:35px; }
.boxPC .cont { margin-bottom:25px; text-align:center; }
.boxPC .cont .item+.item { margin-top:20px; }
.boxPC .cont .alphabet { padding-bottom:15px; position:relative; text-align:center; font-size:32px; }
.boxPC .cont .alphabet:after { content:''; width:28px; height:1px; position:absolute; left:50%; bottom:0; margin-left:-14px; background:#898989; }
.boxPC .top a, .boxPC .cont .item .alphabet a { padding-left:50px; position:relative; }
.boxPC .top a:after,
.boxPC .cont .alphabet a:after { content:''; width:30px; height:24px; position:absolute; left:10px; top:50%; margin-top:-12px; background:url('../images/iconShadowing.png') center 0 no-repeat; }
.boxPC .top a.ing:after,
.boxPC .cont .alphabet a.ing:after { background-position:center bottom; }
.boxPC .cont .list { width:750px; display:flex; flex-wrap:wrap; padding:10px 0; margin:0 auto; overflow:hidden; }
.boxPC .cont .list li { width:33.3%; padding:10px; text-align:left; }
.boxPC .cont .list li a { display:block; padding-left:50px; position:relative; line-height:30px; font-size:24px; color:#969696; }
.boxPC .cont .list li a:after { content:''; width:30px; height:24px; position:absolute; left:10px; top:4px; background:url('../images/iconShadowing.png') center 0 no-repeat; }
.boxPC .cont .list li a.ing:after { background-position:center bottom; }
.boxPC .cont .list li a img { vertical-align:middle; }

.boxPC .cont .list.sizeA_pc li { width:50%; }

.boxPC .cont .list.type-sentence { width:auto; display:inline-block; padding:15px 0; margin-left:0; text-align:left; }
.boxPC .cont .list.type-sentence li { width:auto; float:none; padding:5px 10px; }

.boxPC .cont .list li a span { display:none; color:#000; }
.boxPC .cont .list li a span.fin { color:#000; }
.boxPC .cont .list li a span.ing { color:#ff5ea6; }
.boxPC .cont .list li a span.normal,
.boxPC .cont .list li a.ing span.ing { display:block; }
.boxPC .cont .list li a.ing span.normal,
.boxPC .cont .list li a.ing span.fin { display:none; }

/* Content :: PQ */
.boxPQ { width:990px; margin:0 auto; padding-top:50px; }
.boxPQ ul li { display:none; position:relative; }
.boxPQ ul li.active { display:block; }
.boxPQ ul li.fin:after { content:''; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(255,255,255,0); z-index:50; }
.boxPQ .top { margin-bottom:75px; text-align:center; }
.boxPQ .top a { width:36px; height:36px; position:relative; display:inline-block; border-radius:50%; background:#3689f6; text-align:center; line-height:36px; color:#fff; font-size:20px; vertical-align:middle; }
.boxPQ .top a:after { content:''; width:30px; height:24px; position:absolute; left:-40px; top:50%; margin-top:-12px; background:url('../images/iconShadowing.png') left 0 no-repeat; }
.boxPQ .top .title { display:inline-block; margin-left:10px; vertical-align:middle; font-size:28px; }
.boxPQ .cont { margin-bottom:85px; text-align:center; }
.boxPQ label.answer { color:#ff5ea6; }
.boxPQ ul li input[type="radio"]+label:before { content:''; width:40px; height:40px; position:absolute; left:-11px; top:-5px; background-position:center center; background-repeat:no-repeat; background-size:100% auto; z-index:20; }
.boxPQ ul li.correct input[type="radio"]:checked+label:before { background-image:url('../images/imgCorrect.png'); }
.boxPQ ul li.wrong input[type="radio"]:checked+label:before { background-image:url('../images/imgWrong.png'); }

.btn.type--number { padding-top:30px; position:relative; }
.btn.type--number span.num { width:70px; height:40px; display:block; margin:0 auto; border-radius:5px; background:#f77479; color:#fff; text-align:center; line-height:40px; font-size:22px; }
.btn.type--number .btnPage { width:auto; height:24px; position:absolute; right:0; top:40px; padding:0 30px 0 10px; border-radius:0; background:transparent; border-bottom:1px solid #f77479; line-height:24px; font-size:24px; color:#ff0a49; }
.btn.type--number .btnPage:after { content:''; width:20px; height:20px; position:absolute; right:0; bottom:-1px; background:url('../images/btnNext.png') no-repeat; }
.btn.type--number .btnPage.prev { left:0; right:auto; padding:0 10px 0 30px; display:none; }
.btn.type--number .btnPage.prev.on { display:block; }
.btn.type--number .btnPage.prev:after { right:auto; left:0; transform:rotateY(180deg); }


/* Cotent :: Small Talk */
.boxSmall { width:990px; margin:0 auto; padding-top:45px; }
.boxSmall .title { position:relative; padding-bottom:10px; margin-bottom:30px; font-size:24px; }
.boxSmall .title:after { content:''; width:28px; height:2px; position:absolute; left:0; bottom:0; background:#ff1313; }
.boxSmall > ul { padding-left:45px; margin-bottom:30px; }
.boxSmall > ul li+li { margin-top:16px; }
.boxSmall > ul li a { padding-left:50px; display:block; position:relative; font-size:24px; color:#000; line-height:28px; }
.boxSmall > ul li a:after { content:''; width:30px; height:24px; position:absolute; left:2px; top:6px; background:url('../images/iconShadowing.png') left 0 no-repeat; }
.boxSmall > ul li a span { display:inline-block; border-bottom:1px solid #fc4040; color:transparent; }
.boxSmall > ul li a span i { color:#000; }
.boxSmall > ul li a.fin { color:#000; }
.boxSmall > ul li a.fin span { border-bottom-color:#000; color:#000; }
.boxSmall > ul li a.ing { color:#ff5ea6; }
.boxSmall > ul li a.ing span { border-color:#ff5ea6; color:#ff5ea6; }
.boxSmall > ul li a.ing:after { background-position:left bottom; }
.boxSmall > ul+.title { margin-top:50px; }


/* Content :: Passage */
.boxPassage { width:990px; margin:0 auto; padding:45px 0; }
.boxPassage .boxImage.type--eng .en
.boxPassage .boxImage.type--kor .ko { display:block; }
.boxPassage .boxImage.type--eng .ko,
.boxPassage .boxImage.type--kor .en { display:none; }


/* Content :: Comprehension Quiz */
.boxCQ { width:990px; margin:45px auto; display:none; position:relative; z-index:1; }
.boxCQ.is--active { display:block; }
.boxCQ .top { margin-bottom:25px; padding-left:40px; position:relative; }
.boxCQ .top .num { width:36px; height:36px; position:relative; float:left; border-radius:50%; background:#3689f6; color:#fff; font-size:20px; text-align:center; line-height:36px; }
.boxCQ .top .title { margin-left:48px; margin-right:160px; line-height:36px; font-size:24px; }
.boxCQ .cont { padding:0 90px; margin-bottom:60px; }
.boxCQ .cont li+li { margin-top:20px; }
.boxCQ.fin:after { content:''; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(255,255,255,0); z-index:50; }
.boxCQ label { position:relative; }
.boxCQ label.answer { color:#ff5ea6; }
.boxCQ label:before { content:''; width:40px; height:40px; position:absolute; left:-11px; top:-5px; background-position:center center; background-repeat:no-repeat; background-size:100% auto; z-index:20; }
.boxCQ.correct input[type="radio"]:checked+label:before { background-image:url('../images/imgCorrect.png'); }
.boxCQ.wrong input[type="radio"]:checked+label:before { background-image:url('../images/imgWrong.png'); }
.boxCQ input[type="radio"]+label { display:block; }
.boxCQ input[type="radio"]+label:after { top:6px; margin:0; }

/* Content :: Writing Task */
.boxWT { width:990px; margin:45px auto; position:relative; }
.boxWT .top .title { margin-bottom:30px; padding-bottom:12px; position:relative; font-size:24px; line-height:1; }
.boxWT .top .title:after { content:''; width:26px; height:2px; position:absolute; left:0; bottom:0; background:#ff1313; }
.boxWT .cont .item+.item { margin-top:32px; }
.boxWT .cont .item .sentence { margin-bottom:5px; font-size:24px; }
.boxWT .cont .item .inputBasic { display:block; }
.boxWT .cont .btn { padding:20px 0 0; border:0; }
.boxWT .cont textarea { height:90px; }
.boxWT .cont textarea.row2 { height:110px; }
.boxWT .cont textarea.row3 { height:130px; }
.boxWT .cont textarea.row4 { height:166px; }
.boxWT .cont textarea.row5 { height:202px; }
.boxWT .cont textarea.row6 { height:238px; }
.boxWT .cont textarea.row7 { height:274px; }
.boxWT .cont textarea.row8 { height:310px; }
.boxWT > .btn { margin-top:20px; }


.popBasic { width:100%; height:100%; display:none; position:fixed; left:0; top:0; background:rgba(0,0,0,0.5); z-index:20; }
.popBasic .box { width:900px; position:absolute; left:50%; top:50%; border-radius:8px; transform:translate(-50%, -50%); background:#fff; overflow:hidden; }
.popBasic .top { 
	background: rgb(89,139,200);
	background: -moz-linear-gradient(90deg, rgba(89,139,200,1) 0%, rgba(198,183,252,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(89,139,200,1) 0%, rgba(198,183,252,1) 100%);
	background: linear-gradient(90deg, rgba(89,139,200,1) 0%, rgba(198,183,252,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#598bc8",endColorstr="#c6b7fc",GradientType=1);
}
.popBasic .top .title {height:72px; line-height:72px; color:#fff; text-align:center; font-size:24px; }
.popBasic .top .close { width:72px; height:72px; position:absolute; right:0; top:0; background:url('../images/btnClose.png') center center no-repeat; background-size:30px 30px; font-size:0; text-indent:-99999px; }
.popBasic .cont { height:620px; padding:20px; overflow:auto; text-align:center; font-size:24px; }
.popBasic .cont p { padding:10px 50px; text-align:left; }
.popBasic .cont ul { padding:10px 50px; }
.popBasic .cont ul li { overflow:hidden; font-size:24px; }
.popBasic .cont ul li+li { margin-top:30px; }
.popBasic .cont ul li .name { width:120px; padding:0 10px; float:left; text-align:right; font-weight:700; }
.popBasic .cont ul li .talk { margin-left:130px; text-align:left; }

.popBasic.sizeA .cont { height:450px; }



.btnPopPassage,
.btnPopAnswer { height:40px; padding:0 28px; position:absolute; right:50%; top:0; margin-right:-475px; background:#ff0a49; border-radius:20px; text-align:center; line-height:40px; color:#fff; font-size:20px; z-index:8; }

.btn { width:990px; margin:0 auto; padding:20px 0; border-top:1px solid #ff1414; text-align:center; }
.btn button+button { margin-left:26px; }
.btn.noLine { border-top:0; padding-top:0; }
.btnBasic { width:280px; height:60px; background:#002333; border-radius:30px; color:#00fc7f; font-size:20px; text-align:center; }
.btnBasic.active { color:#ffc569; }
.btnBasic.save { color:#fcf300; }
.btnPage { width:280px; height:60px; display:inline-block; background:#dfdfdf; border-radius:60px; font-size:24px; color:#989898; line-height:60px; vertical-align:middle; }
.btnPage.active { background:#ff4639; color:#fff; }

.guide-text { padding:15px 0; font-size:20px; }

.inputBasic { display:inline-block; position:relative; vertical-align:middle; }
.inputBasic .micPlay { display:none; }
.inputBasic input.possible { color:#ff5ea6; }

/* Footer */
#boxScript { width:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.9); transition:all .5s; z-index:5; }
#boxScript .inner { max-width:900px; height:100px; padding:0 !important; display:flex; align-items:center; color:#fff; font-size:20px; overflow:auto; }
#boxScript .txtScript { max-height:100px; padding:20px 10px; overflow:auto; }
#boxScript .btnScript { width:144px; height:32px; position:absolute; left:50%; bottom:100%; margin-left:-72px; background:url('../images/bgScript.png') center top no-repeat; font-size:0; text-indent:-99999px; }
#boxScript .btnScript:after { content:''; width:30px; height:12px; position:absolute; left:50%; top:50%; margin:-6px 0 0 -15px; background:url('../images/btnScript.png') no-repeat; transition:all .5s; }
#boxScript.active { top:-100px; }
#boxScript.active .btnScript:after { transform:rotate(180deg); }

#boxScript .inner span { display:none; }
#boxScript.type--eng .inner span.eng,
#boxScript.type--kor .inner span.kor { display:block; }

#footer { width:100%; height:128px; position:fixed; left:0; bottom:0; transition:bottom .5s; }
#footer:before { content:''; width:100%; height:100%; position:absolute; left:0; top:0; background:#4c4c4c; z-index:10; z-index:7; }
#footer .inner { max-width:900px; padding-top:17px; z-index:7; }
#footer .boxToggle { position:absolute; left:0; top:23px; overflow:hidden; }
#footer .boxToggle label { width:64px; height:64px; float:left; margin:0; padding:0; border-radius:50%; background:#eaeaea; text-align:center; line-height:64px; font-size:16px; color:#000; }
#footer .boxToggle label:after { display:none; }
#footer .boxToggle input:checked+label { background:#5398ff; color:#fff; }
#footer .boxToggle label.toggleKor { margin-left:18px; }

#footer .boxTogglePS { position:absolute; top:38px; cursor:pointer; overflow:hidden; }
#footer .boxTogglePS.area--left { left:45px; }
#footer .boxTogglePS.area--right { right:45px; }
#footer .boxTogglePS label { padding-left:0; float:left; margin:0; font-size:20px; color:#fff; line-height:36px; }
#footer .boxTogglePS label:after { display:none; }
#footer .boxTogglePS .toggleKey { width:75px; height:36px; margin:0 12px; float:left; position:relative; background:#fff; border-radius:18px; }
#footer .boxTogglePS .toggleKey:after { content:''; width:32px; height:32px; position:absolute; left:50%; top:2px; background:#ff6467; border-radius:50%; transition:all .3s; }
#footer .boxTogglePS.chk--left .toggleKey:after { margin-left:-35px; }
#footer .boxTogglePS.chk--right .toggleKey:after { margin-left:4px; }

#footer .boxOption { position:absolute; right:0; top:23px; }
#footer .boxOption:after { content:''; display:block; clear:both; }
#footer .boxOption button { width:64px; height:64px; float:left; position:relative; background:#fff; border-radius:50%; font-size:0; text-indent:-99999px; }
#footer .boxOption button.btnMic:after { content:''; width:24px; height:48px; position:absolute; left:50%; top:50%; background:url('../images/btnMic.png') center top no-repeat; transform:translate(-50%, -50%); }
#footer .boxOption button.btnPause { display:none; position:absolute; left:0; top:0; background:#ff5589; }
#footer .boxOption button.btnPause:after { content:''; width:20px; height:20px; position:absolute; left:50%; top:50%; background:#fff; transform:translate(-50%, -50%); }
#footer .boxOption button.btnSound { margin-left:20px; }
#footer .boxOption button.btnSound:after { content:''; width:40px; height:31px; position:absolute; left:50%; top:50%; background:url('../images/btnSound.png') center top no-repeat; transform:translate(-50%, -50%); }
#footer .boxOption button.active:before { content:''; width:64px; height:64px; position:absolute; left:50%; top:50%; border-radius:50%; animation:rect 2s infinite linear; transform:translate(-50%, -50%); }
#footer .boxOption button.btnMic.on,
#footer .boxOption button.btnMic.active { background:#ff5589; }
#footer .boxOption button.btnMic.active:before { background:rgba(255,71,57,.5); }
#footer .boxOption button.btnMic.on:after,
#footer .boxOption button.btnMic.active:after { background-position-y:bottom; }
#footer .boxOption button.btnPause.active { display:block; }
#footer .boxOption button.btnSound.on,
#footer .boxOption button.btnSound.active { background:#39b6ea; }
#footer .boxOption button.btnSound.active:before { background:rgba(57,182,234,.5); }
#footer .boxOption button.btnSound.on:after,
#footer .boxOption button.btnSound.active:after { background-position-y:bottom; }

@keyframes rect{
	0% { width:64px; height:64px; }
	100% { width:96px; height:96px; }
}

#footer.single { height:112px; }
#footer.single .inner { padding-top:24px; text-align:center; }
#footer.single .inner > div { position:relative; right:auto; top:0; display:inline-block; }
#footer.noBar { height:112px; }

.hide--footer+#footer { display:none; }

#progress { width:100%; height:16px; position:relative; background:#696969; overflow:hidden; z-index:7; }
#progress .bar { height:100%; position:absolute; left:0; top:0; background:#ffc949; }

.player .btnPlay { width:74px; height:74px; margin:0 auto; display:block; background:url('../images/btnPlay.png') center center no-repeat; background-size:74px auto; font-size:0; text-indent:-99999px; }
.player .btnPlay.pause { background-image:url('../images/btnPause.png'); }

.popAlert { width:580px; height:280px; padding:160px 20px 0; display:none; position:fixed; left:50%; top:50%; background:url('../images/iconAlert.png') center 82px no-repeat #fff; border:1px solid #b9b9b9; border-radius:10px; text-align:center; font-size:30px; transform:translate(-50%, -50%); z-index:20; }


#audio { position:absolute; left:-999999px; top:0; opacity:0; }
#direction { position:fixed; left:-999999px; top:0; opacity:0; }

#boxProcess { width:100%; height:100%; display:none; position:fixed; left:0; top:0; background:rgba(255, 255, 255, .9); z-index:20; overflow-y:auto; }
#boxProcess h3.title { width:990px; margin:0 auto; padding:78px 40px 30px; display:block; text-align:center; font-weight:700; color:#ff597b; font-size:36px; }
#boxProcess .box { width:990px; margin:0 auto 145px; }
#boxProcess .box li { overflow:hidden; border-top:1px solid #dddddd; }
#boxProcess .box .title { width:290px; height:70px; float:left; padding:0 30px; line-height:70px; font-size:21px; font-family:"Arial Rounded MT Bold"; font-weight:700; text-transform:uppercase; word-break:break-word; }
#boxProcess .box .step { margin-left:290px; overflow:hidden; }
#boxProcess .box .step > a { width:40%; height:70px; float:left; line-height:70px; color:#a3a3a3; font-size:20px; }
#boxProcess .box .step > a:nth-child(3) { width:20%; }
#boxProcess .box .step > a.fin { color:#000; }
#boxProcess .box .step > a.ing { color:#ee3b3b; }
#boxProcess .close { width:36px; height:36px; position:absolute; right:50%; top:86px; margin-right:-495px; background:url('../images/btnCloseBlack.png') center center no-repeat; font-size:0; text-indent:-99999px; }

.table table { width:100%; }
.table table th,
.table table td { padding:15px 22px; border:1px solid #c9c9c9; font-size:24px; }

.pageListStep { padding-bottom:50px; }
.pageListStep .topArea { height:50px; padding:0 30px; background:#363636; color:#fff; font-size:20px; line-height:50px; }
.pageListStep .list { width:1186px; margin:28px auto 8px; overflow:hidden; }
.pageListStep .list a { width:144px; height:46px; float:left; margin:0 auto; display:block; border:1px solid #000; font-size:18px; line-height:44px; text-align:center; }
.pageListStep .list a+a { margin-left:5px; }
.pageListStep .list a.on { color:#ff5ea6; }

.pageListStep .content { width:1186px; display:none; margin:0 auto; }
.pageListStep .content.is--active { display:block; }
.pageListStep .content table { width:100%; }
.pageListStep .content table th { height:46px; border:1px solid #ccc; border-bottom-width:2px; background:#eee; font-size:16px; }
.pageListStep .content table td { height:50px; padding:0 20px; border:1px solid #ccc; text-align:center; font-size:16px; }
.pageListStep .content table td:nth-of-type(2) { text-align:left; }
.pageListStep .content table td a { width:130px; height:28px; display:inline-block; background:#0077ff; border-radius:3px; border-bottom:2px solid #004695; font-size:14px; color:#fff; line-height:26px; }


/* Print */
.pagePrint { width:990px; margin:0 auto; padding-top:75px; position:relative; }
.pagePrint h1 { font-size:36px; font-weight:700; text-align:center; }
.pagePrint .topArea { padding:30px 110px 30px 18px; position:relative; border-top:2px solid #b9b9b9; border-bottom:2px solid #b9b9b9; font-family:"NanumBarunGothic", sans-serif; }
.pagePrint .topArea .user { padding-left:28px; margin-bottom:16px; position:relative; background:url('../images/iconPrintUser.png') left 2px no-repeat; font-size:20px; color:#535353; }
.pagePrint .topArea .user span { font-size:24px; color:#000; }
.pagePrint .topArea .grade { position:relative; padding-left:28px; background:url('../images/iconPrintGrade.png') left 4px no-repeat; font-size:20px; }
.pagePrint .topArea .grade:after { content:''; display:block; clear:both; }
.pagePrint .topArea .grade span { float:left; }
.pagePrint .topArea .grade span+span { margin-left:45px }
.pagePrint .topArea .btnPrint { width:80px; height:80px; position:absolute; right:20px; top:50%; background:url('../images/btnPrint.png') center center no-repeat; transform:translateY(-50%); font-size:0; text-indent:-99999px; }
.pagePrint .contArea { padding:35px 0; }
.pagePrint .contArea .row { padding:30px 20px; }
.pagePrint .contArea .row+.row { border-top:1px solid #eaeaea; }
.pagePrint .contArea .row h3.title { position:relative; margin-bottom:18px; padding-left:24px; font-size:24px; color:#1b209d; font-weight:700; }
.pagePrint .contArea .row h3.title:before { content:''; width:15px; height:15px; position:absolute; left:0; top:9px; background:#736ce9; }
.pagePrint .contArea .subject { margin-left:25px; margin-bottom:10px; font-size:22px; font-weight:700; }
.pagePrint .listLearning { margin-left:25px; }
.pagePrint .listLearning li+li { margin-top:28px; }
.pagePrint .listLearning .title { margin-bottom:10px; position:relative; padding-left:25px; font-size:20px; }
.pagePrint .listLearning .title span.num { width:20px; position:absolute; left:0; top:0; text-align:right; }
.pagePrint .listLearning .title span.answer { color:#0a56d4; }
.pagePrint .listLearning .cont { padding-left:25px; }
.pagePrint .listLearning .cont > div { position:relative; padding:2px 0 2px 36px; background-position:left 1px; background-repeat:no-repeat; font-size:20px; }
.pagePrint .listLearning .cont .user1 { background-image:url('../images/iconCheckUser1.png'); color:#ad103b; }
.pagePrint .listLearning .cont .user2 { background-image:url('../images/iconCheckUser2.png'); color:#0b0f8a; }
.pagePrint .listQuiz { padding-left:25px; }
.pagePrint .listQuiz li { padding-left:30px; position:relative; font-size:20px; line-height:30px; }
.pagePrint .listQuiz li+li { margin-top:0; }
.pagePrint .listQuiz li:before { position:absolute; left:0; top:0; }
.pagePrint .listQuiz li:nth-child(1):before { content:'(1)'; }
.pagePrint .listQuiz li:nth-child(2):before { content:'(2)'; }
.pagePrint .listQuiz li:nth-child(3):before { content:'(3)'; }
.pagePrint .listQuiz li:nth-child(4):before { content:'(4)'; }
.pagePrint .listQuiz li.select { color:#ff7084; }
.pagePrint .boxAnswerResult { width:530px; height:35px; margin:50px auto 0; background:#508ef5; font-size:20px; color:#fff; text-align:center; line-height:35px; }
.pagePrint .boxThink { margin-left:25px; font-size:20px; }
.pagePrint .boxThink + .subject { margin-top:25px; }
.pagePrint .boxTeacherComment { margin:-10px -20px 60px; }
.pagePrint .boxTeacherComment .top { height:60px; background:#96726a; color:#fff; text-align:center; line-height:60px; font-size:26px; }
.pagePrint .boxTeacherComment .top span { color:#fffaa6; }
.pagePrint .boxTeacherComment .cont { padding:30px 20px; background:#f2f2f2; }
.pagePrint .boxTeacherComment .cont .title { margin-bottom:10px; padding-left:24px; position:relative; color:#d7431b; font-size:24px; }
.pagePrint .boxTeacherComment .cont .title:before { content:''; width:15px; height:15px; position:absolute; left:0; top:9px; background:#ff803a; }
.pagePrint .boxTeacherComment .cont .txt { padding-left:24px; font-size:20px; line-height:30px; }
.pagePrint .boxTeacherComment .cont .txt+.title { margin-top:35px; }
.pagePrint .boxTeacherComment .cont .boxSpeaking { margin-bottom:25px; padding-left:24px; font-size:20px; line-height:30px; }
.pagePrint .boxTeacherComment .cont .boxSpeaking > div { position:relative; }
.pagePrint .boxTeacherComment .cont .boxSpeaking > div span { position:absolute; left:0; top:0; }
.pagePrint .boxTeacherComment .cont .boxSpeaking .mistake { padding-left:184px; }
.pagePrint .boxTeacherComment .cont .boxSpeaking .mistake span { color:#b90e0e; }
.pagePrint .boxTeacherComment .cont .boxSpeaking .correct { padding-left:144px; }
.pagePrint .boxTeacherComment .cont .boxSpeaking .correct span { padding-left:26px; background:url('../images/iconPrintCorrect.png') left center no-repeat; }
.pagePrint .boxTeacherComment .cont .boxSpeaking .correct+.mistake { margin-top:5px; }
.pagePrint .boxReview { margin:-10px -20px 0; }
.pagePrint .boxReview .top { height:60px; background:#a166c6; font-size:26px; color:#fff; line-height:60px; text-align:center; }
.pagePrint .boxReview .cont { padding:25px 45px 30px; background:#f2f2f2; }
.pagePrint .boxReview .cont textarea { width:100%; height:224px; border:2px solid #c3c3c3; resize:none; }
.pagePrint .boxReview .cont .btn { width:auto; padding:0; margin-top:30px; border-top:0; }
.pagePrint .close { width:26px; height:26px; position:absolute; right:-108px; top:86px; background:url('../images/btnCloseBlack.png') center center no-repeat; background-size:26px auto; font-size:0; text-indent:-99999px; }

#dim { width:100%; height:100%; display:none; position:absolute; left:0; top:0; background:rgba(0,0,0,0.85); z-index:25; }
#popDict { width:1280px; height:658px; max-width:90%; max-height:90%; display:none; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background:#fff; z-index:26; }
#popDict .title { height:80px; line-height:80px; text-align:center; font-size:32px; }
#popDict .cont { position:relative; overflow:hidden; border:1px solid #dadde3; font-size:22px; }
#popDict .cont:after { content:''; width:38px; height:38px; position:absolute; left:50%; top:10px; margin-left:-19px; background:url('../images/iconDictArrow.png') center center no-repeat; border-radius:50%; border:1px solid #d6d9de; }
#popDict .cont .lang { height:60px; border-bottom:1px solid #e5e5e5; text-align:center; font-size:22px; line-height:60px; }
#popDict .cont .box { height:435px; position:relative; }
#popDict .cont .left { width:50%; float:left; }
#popDict .cont .left textarea { width:100%; max-height:100%; position:relative; padding:15px 24px; border:0; z-index:1; }
#popDict .cont .left .remove { width:34px; height:34px; position:absolute; right:10px; top:12px; background:url('../images/btnClose_black.png') center center no-repeat; background-size:14px auto; z-index:5; font-size:0; text-indent:-9999px; }
#popDict .cont .left .count { position:absolute; right:18px; bottom:22px; font-size:18px; }
#popDict .cont .right { width:50%; float:right; }
#popDict .cont .right .box { padding:15px 24px; background:#f5f7f8; border-left:1px solid #e5e5e5; }
#popDict .btnTransLang { width:108px; height:62px; display:block; margin:8px auto 0; background:#3894eb; text-align:center; line-height:62px; font-size:20px; color:#fff; }
#popDict .close { width:26px; height:26px; position:absolute; right:26px; top:26px; background:url('../images/btnClose_black.png') center center no-repeat; font-size:0; text-indent:-99999px; }

@media screen and (min-width:1520px) {
	.boxShadowing ul { margin-bottom:18px; }
	.boxShadowing ul li:before { width:50px; height:44px; background-size:24px auto; }
	.boxShadowing ul li a { padding:5px 20px; font-size:18px; }
	.boxShadowing .btn { padding-bottom:18px; }
}

@media screen and (max-width:1520px) {
	#header { padding:8px 15px; }
}

@media screen and (max-width:1340px) {
	.btnStepArrow { left:15px; }
	.btnStepArrow.prev { margin:0; }
	.btnStepArrow.next { margin:0; left:auto; right:15px; }

	.btnDict { left:auto; right:20px; margin-left:0; }
}
@media screen and (max-width:1200px) {
	#topTitle span.page { left:auto; margin:0; right:15px; }
}

@media screen and (max-width:1034px) {
	.boxDialogue .mov { width:auto; }

	.pageListStep .list { width:auto; padding:0 10px; display:grid; grid-template-columns:repeat(auto-fill, 50%); }
	.pageListStep .list a { width:auto; float:none; margin:5px; display:inline-block; }
	.pageListStep .content { width:auto; padding:0 15px; }
	.pageListStep .content table td a { width:50px; }
	.pageListStep .content table th { height:40px; font-size:14px; }
	.pageListStep .content table td { height:40px; padding:0 10px; font-size:14px; }
}
@media screen and (max-width:1023px) {
	input[type="text"], input[type="password"] { width:120px; height:28px; font-size:18px; line-height:26px; }
	input[type="radio"]+label { padding-left:22px; font-size:18px; }
	input[type="radio"]+label:after { width:14px; height:14px; margin-top:-7px; }

	textarea { font-size:18px; }

	.w20 { width:14px !important; }
	.w40 { width:30px !important; }
	.w60 { width:45px !important; }
	.w80 { width:65px !important; }
	.w100 { width:85px !important; }
	.w120 { width:100px !important; }
	.w140 { width:120px !important; }
	.w160 { width:140px !important; }
	.w180 { width:150px !important; }
	.w200 { width:160px !important; }
	.w240 { width:200px !important; }
	.w260 { width:220px !important; }
	.w280 { width:240px !important; }
	.w300 { width:260px !important; }
	.w320 { width:280px !important; }
	.w340 { width:300px !important; }
	.w380 { width:340px !important; }
	.w400 { width:360px !important; }
	.w430 { width:400px !important; }
	.w450 { width:400px !important; }
	.w600 { width:400px !important; }
	.w700 { width:400px !important; }
	.w800 { width:400px !important; }
	.w900 { width:400px !important; }
	
	.pc { display:none; }
	.mo { display:block; }

	.btnDict { display:none; }

	.inner { padding:0 15px 50px; }

	#intro { display:flex; align-items:center; justify-content:center; }	
	#intro .content { max-height:100%; padding:22px 0; overflow:auto; }
	#intro .content h1 { margin-bottom:0; font-size:24px; }
	#intro .content h2 { padding-bottom:16px; margin-bottom:22px; font-size:30px; }
	#intro .content h2:after { width:120px; margin-left:-60px; }
	#intro .content a { width:75px; height:22px; font-size:12px; line-height:22px; }

	#outro { display:flex; align-items:center; justify-content:center; }
	#outro .content { max-height:100%; padding:22px 0; overflow:auto; }
	#outro .content .btnEnding { width:36px; height:36px; margin-bottom:8px; background-size:16px auto; }
	#outro .content h1 { margin-bottom:10px; font-size:30px; }
	#outro .content h2 { padding-bottom:20px; margin-bottom:20px; font-size:20px; }
	#outro .content h2:after { width:120px; margin-left:-60px; }
	#outro .content a { width:75px; height:22px; font-size:12px; line-height:22px; }

	#header { height:54px; padding:14px 15px; }
	#header .inner { padding:0; }
	#header .step1 { width:25px; height:25px; line-height:25px; font-size:12px; }
	#header .step2 { float:none; max-width:none; margin-left:32px; margin-right:30px; font-size:18px; line-height:25px; }
	#header .inner > .left { width:auto; position:relative; }
	#header .inner > .right { width:100%; height:60px; padding-top:12px; position:fixed; right:0; top:auto; bottom:0; background:#d1d1d1; text-align:center; }
	#header .btnStep { width:35px; height:35px; display:inline-block; float:none; vertical-align:middle; }
	#header .btnResult { width:35px; height:35px; margin-left:10px; display:inline-block; float:none; vertical-align:middle; }
	#header .btnDict { width:35px; height:35px; margin-left:10px; display:inline-block; float:none; vertical-align:middle; }
	#header .btnExit { width:24px; height:24px; background-size:24px auto; }
  
	#topTitle { height:50px; top:54px; padding:0 15px; overflow:hidden; text-align:left; }
	#topTitle h1 { width:auto; top:auto; left:auto; position:relative; margin-right:20px; float:left; line-height:54px; color:#333333; font-size:12px; text-align:left; line-height:50px; transform:none; }
	#topTitle h1:after { content:''; width:1px; height:26px; position:absolute; right:-10px; top:50%; margin-top:-13px; background:#adadad; }
	#topTitle h2 { position:relative; line-height:50px; font-size:15px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
	#topTitle.is--direction h2:before { display:none; }
	#topTitle.is--direction h2:after { content:''; width:34px; height:34px; display:inline-block; margin-left:5px; border-radius:50%; background:url('../images/btnDirectionWhite.png') center center no-repeat #ffbc7b; background-size:16px auto; vertical-align:middle; }
	#topTitle.is--direction h2.on:after { background-image:url('../images/btnDirectionWhite_on.png'); background-size:19px auto; }
	#topTitle span.page { width:36px; height:24px; font-size:14px; line-height:24px; }
	

	#container { padding:110px 0 70px; }
	#container.with--footer { padding-bottom:150px; }

	.btnStepArrow { width:22px; height:30px; top:auto; bottom:14px; background-size:17px auto; }

	.boxSpice { padding:25px 0 0; }
	.boxSpice .mov { width:auto; height:200px; margin:0 auto 12px; }

	.boxQuizTop { width:auto; }
	.boxQuizTop span { width:38px; height:38px; line-height:36px; font-size:18px; }
	.boxSpice .quiz .example { width:auto; padding:20px 0; }
	.boxSpice .quiz .example ul li { padding-left:20px; font-size:18px; }
	.boxSpice .quiz .example ul li+li { margin-top:13px; }
	
	.inputBasic .micPlay { width:20px; height:100%; position:absolute; right:0; top:0; display:block; background:url('../images/iconMicYellow.png') 3px center no-repeat; background-size:9px auto; font-size:0; text-indent:-99999px; }

	.boxDialogue .mov { padding:8px; }
	
	.cont .btnPlay { width:63px; height:63px; background-size:100% auto; }

	.boxShadowing { width:auto; padding-top:25px; }
	.boxShadowing ul { margin-bottom:20px; }
	.boxShadowing ul li:before { width:35px; height:33px; margin-top:3px; border-radius:6px; background-size:18px auto; }
	.boxShadowing ul li.player3:before { background-size:13px auto; }
	.boxShadowing ul li+li { margin-top:10px; }
	.boxShadowing ul li a { margin-left:43px; padding:10px 10px; border-radius:6px; border-width:1px; font-size:16px; line-height:20px; }
	.boxShadowing.type--after ul li a { padding-left:35px; }
	.boxShadowing.type--after ul li a:after { width:20px; height:16px; top:10px; left:10px; margin-top:0; background-size:100% auto; }
	.boxShadowing.type--after ul li a.ing:after { background-position:center -16px; }

	.boxCyu { width:auto; }
	.boxCyu ul { padding-bottom:18px; }
	.boxCyu ul li .title { padding-left:18px; font-size:18px; }
	.boxCyu ul li .inputBasic { padding-left:18px; }
	.boxCyu ul li .inputBasic input { height:40px; padding-right:32px; }
	.boxCyu ul li .inputBasic .micPlay { width:32px; background:url('../images/iconMicYellow.png') 8px center no-repeat; background-size:15px auto; }
	.boxCyu ul li .inputBasic textarea { height:81px; }
	.boxCyu .btn { padding:15px 0; }
	.boxCyu .btnDialogue { width:100px; height:30px; top:25px; line-height:30px; font-size:18px; }

	.boxGrammar { width:auto; padding-top:25px; }
	.boxGrammar .cont { margin:0 0 14px 0; }
	.boxGrammar .cont .mov { width:100%; height:200px; }
	.boxGrammar .quiz .question { margin:12px 0 10px; padding:0 0 10px; font-size:18px; line-height:20px; }
	.boxGrammar .quiz .question:after { width:14px; height:1px; }
	.boxGrammar .quiz ul li { padding-left:20px; font-size:18px; line-height:1.6 }
	.boxGrammar .quiz ul li+li { margin-top:18px; }
	.boxGrammar .quiz ul li .num { line-height:1.6 }

	.boxPC { width:auto; padding: 25px 0 0; }
	.boxPC .top { margin-bottom:35px; padding-bottom:10px; font-size:24px; }
	.boxPC .top div+div { margin-left:18px; }
	.boxPC .top:after { width:14px; height:1px; margin-left:-7px; }
	.boxPC .cont { margin-bottom:23px; }
	.boxPC .cont .alphabet { padding-bottom:6px; margin-bottom:8px; font-size:16px; }
	.boxPC .cont .alphabet:after { width:14px; margin-left:-7px; }
	.boxPC .cont .item+.item { margin-top:25px; }
	.boxPC .cont .list { width:auto !important; margin:0; padding:0; }
	.boxPC .cont .list li { width:33.3%; margin:0; padding:8px; }
	.boxPC .cont .list li a { padding-left:30px; font-size:18px; line-height:1.6; }
	.boxPC .cont .list li a:after,
	.boxPC .top a:after,
	.boxPC .cont .item .alphabet a:after { width:18px; height:14px; top:6px; left:5px; background-size:100% auto; }

	.boxPC .cont .list.sizeA_mo li { width:50%; }

	.boxPC .cont .list.type-sentence { padding:0; }
	.boxPC .cont .list.type-sentence li { width:auto; padding:8px; }

	.boxPC .top a, .boxPC .cont .item .alphabet a { padding-left:30px; }

	.boxPC .cont.type--sentence { padding-left:25px; margin-bottom:20px; }
	.boxPC .cont.type--sentence .list li+li { margin-top:15px; }
	.boxPC .cont.type--sentence .list li a { padding-left:22px; font-size:18px; line-height:23px; }
	.boxPC .cont.type--sentence .list li a:after { width:15px; height:12px; left:0; background-size:100% auto; }

	.boxPQ { width:auto; padding-top:25px; }
	.boxPQ .top { margin-bottom:30px; }
	.boxPQ .top a { width:24px; height:24px; line-height:24px; font-size:18px; }
	.boxPQ .top a:after { width:20px; height:16px; margin-top:-8px; left:-27px; background-size:100% auto; }
	.boxPQ .top .title { margin-left:5px; font-size:18px; }
	.boxPQ .cont { margin-bottom:40px; }

	.boxPQ ul li.correct .top a:before,
	.boxPQ ul li.wrong .top a:before { width:33px; height:33px; top:-5px; left:-5px; }

	.boxPQ ul li input[type="radio"]+label:before { width:30px; height:30px; left:-7px; top:-4px; }

	.boxSmall { width:auto; padding-top:25px; }
	.boxSmall .title { padding-bottom:6px; margin-bottom:10px; font-size:16px; }
	.boxSmall .title:after { width:14px; height:1px; }
	.boxSmall > ul { padding:0; margin-bottom:25px; }
	.boxSmall > ul+.title { margin-top:25px; }
	.boxSmall > ul li+li { margin-top:10px; }
	.boxSmall > ul li a { padding-left:22px; font-size:18px; line-height:22px; }
	.boxSmall > ul li a:after { width:15px; height:12px; left:0; background-size:100% auto; }
	.boxSmall > ul li a span { border-width:1px; }

	.boxPassage { width:auto; padding:25px 0 20px; }
	.boxPassage .title { margin-bottom:18px; font-size:18px; }
	.boxPassage ul li+li { margin-top:25px; }
	.boxPassage ul li .thumb { width:100px; }
	.boxPassage ul li .cont { margin-left:115px; font-size:12px; line-height:18px; }

	.boxCQ { width:auto; margin:25px 0 0; padding:40px 0 0; }
	.boxCQ .top { padding-left:20px; margin-bottom:20px; }
	.boxCQ .top:after { width:15px; height:12px; top:6px; margin-top:0; background-size:15px auto; }
	.boxCQ .top .num { width:22px; height:22px; margin-top:1px; font-size:14px; line-height:22px; }
	.boxCQ .top .title { height:auto; margin-left:28px; margin-right:0; font-size:18px; line-height:23px; }
	.boxCQ .cont { padding:0 48px 0; margin-bottom:30px; }
	.boxCQ .cont li+li { margin-top:16px; }
	.boxCQ label:before { width:30px; height:30px; top:-4px; left:-7px; }

	.boxPQ .cont .inBox { display:inline-block; }
	.boxPQ ul li input[type="radio"]+label { display:inline-block; margin-right:70px; text-align:left; }
	.boxPQ ul li input[type="radio"]+label:before { width:26px; height:26px; left:-5px; top:1px; }
	.boxPQ ul li input[type="radio"]+label:last-child { margin-right:0; }
	.boxPQ .cont .inBox.type--col input[type="radio"]+label { display:block; margin-right:0; }

	.boxWT { width:auto; margin:25px 0 0; }
	.boxWT .top .title { padding-bottom:6px; margin-bottom:20px; font-size:18px; }
	.boxWT .cont .item+.item { margin-top:15px; }
	.boxWT .cont .item .sentence { font-size:18px; }
	.boxWT .cont .item input { height:34px; }
	.boxWT .cont textarea { height:81px; }
	.boxWT .cont textarea.row2 { height:80px; }
	.boxWT .cont textarea.row3 { height:104px; }
	.boxWT .cont textarea.row4 { height:130px; }
	.boxWT .cont textarea.row5 { height:158px; }
	.boxWT .cont textarea.row6 { height:184px; }
	.boxWT .cont textarea.row7 { height:212px; }
	.boxWT .cont textarea.row8 { height:238px; }
	.boxWT .guide-text { padding-bottom:0; }
	.btnPopPassage { width:100px; height:30px; right:20px; padding:0; margin:0; border-radius:30px; font-size:18px; line-height:30px; }
	.btnPopAnswer { height:30px; right:20px; margin:0; border-radius:30px; font-size:18px; line-height:30px; }

	.btn { width:auto; padding:20px 0; }
	.btnBasic { width:210px; height:37px; font-size:15px; }
	.btnPage { width:115px; height:40px; font-size:18px; line-height:40px; }
	.guide-text { padding:13px 0; font-size:15px; }

	.btn.type--number { padding-top:18px; }
	.btn.type--number span.num { width:36px; height:24px; background:#bc83e0; line-height:24px; font-size:14px; }
	.btn.type--number .btnPage { height:15px; top:25px; padding:0 18px 0 6px; line-height:15px; font-size:15px; }
	.btn.type--number .btnPage.prev { padding:0 6px 0 18px; }
	.btn.type--number .btnPage:after { width:14px; height:14px; }

	.boxPassage { width:auto; }

	.table table th,
	.table table td { padding:8px 12px; font-size:16px; }

	.popAlert { width:290px; height:140px; padding:82px 10px 0; background-position:center 40px; background-size:27px auto; font-size:15px; }

	#boxProcess { background:#fff; }
	#boxProcess h3.title { width:auto; padding:24px 30px 19px; font-size:18px; }
	#boxProcess .box { width:auto; margin:0; padding-bottom:50px; }
	#boxProcess .box ul li { padding:11px 15px; }
	#boxProcess .box .title { width:155px; height:auto; padding:0; font-size:14px; line-height:1.2; }
	#boxProcess .box .step { height:auto; margin-left:160px; padding-top:2px; display:block; }
	#boxProcess .box .step > a { width:auto !important; height:auto; float:none; display:block; line-height:1.2; text-align:left; font-size:13px; }
	#boxProcess .box .step > a+a { margin-top:8px; }
	#boxProcess .close { width:47px; height:47px; top:10px; right:0; margin:0; background:url('../images/btnCloseBlack.png') center center no-repeat; background-size:13px auto; }

	#progress { height:10px; }

	#footer { height:60px; bottom:60px; }
	#footer.noBar { height:50px; }
	
	#footer .inner { padding-top:0; padding-bottom:0; }
	#footer .boxToggle { top:6px; left:15px; }
	#footer .boxToggle label { width:38px; height:38px; background:none; font-size:14px; line-height:38px; color:#fff; }
	#footer .boxToggle input:checked+label { background:none; color:#ffca4a; }
	#footer .boxToggle label.toggleKor { margin-left:11px; }
	#footer .boxOption { top:6px; right:15px; }
	#footer .boxOption button { width:38px; height:38px; background:none; }
	#footer .boxOption button.btnMic:after { width:14px; height:28px; background-size:100% auto; background-position:center bottom; }
	#footer .boxOption button.btnPause:after { width:12px; height:12px; }
	#footer .boxOption button.btnSound { margin-left:11px; }
	#footer .boxOption button.btnSound:after { width:25px; height:20px; background-size:100% auto; background-position:center bottom; }
	

	@keyframes rect{
		0% { width:38px; height:38px; }
		100% { width:66px; height:66px; }
	}

	#footer.single { height:70px; }
	#footer.single .inner { padding-top:12px; }

	#footer .boxTogglePS { top:16px; }
	#footer .boxTogglePS.area--left { left:10px; }
	#footer .boxTogglePS.area--right { right:10px; }
	#footer .boxTogglePS label { font-size:16px; line-height:20px; }
	#footer .boxTogglePS .toggleKey { width:36px; height:18px; margin:0 6px; }
	#footer .boxTogglePS .toggleKey:after { width:16px; height:16px; top:1px; }
	#footer .boxTogglePS.chk--left .toggleKey:after { margin-left:-16px; }
	#footer .boxTogglePS.chk--right .toggleKey:after { margin-left:0px; }
	

	#boxScript .btnScript { width:72px; height:16px; margin-left:-36px; background-size:100% auto; }
	#boxScript .btnScript:after { width:15px; height:6px; margin:-3px 0 0 -8px; background-size:100% auto; }
	#boxScript .inner { height:115px; padding:15px 10px; font-size:18px; }
	#boxScript .txtScript { max-height:115px; }

	#boxScript.active { top:-115px; }
	
	
	.player .btnPlay { width:50px; height:50px; background-image:url('../images/btnPlay_mobile.png'); background-size:15px auto; }
	.player .btnPlay.pause { background-image:url('../images/btnPause_mobile.png'); }

	.popBasic .box { width:100%; height:100%; left:0; top:0; border-radius:0; transform:unset; }
	.popBasic .top .title { height:54px; line-height:54px; font-size:17px; }
	.popBasic .top .close { width:54px; height:54px; background-size:18px auto; }
	.popBasic .cont { width:100%; height:calc(100% - 54px); padding:20px 10px; font-size:18px; }
	.popBasic .cont ul { padding:0; }
	.popBasic .cont ul li { font-size:18px; }
	.popBasic .cont ul li .name { width:90px; padding:0; }
	.popBasic .cont ul li .talk { margin-left:100px; }

	#popDict { width:100%; height:100%; max-width:100%; max-height:100%; left:0; top:0; transform:none; overflow-y:auto; }
	#popDict .title { height:auto; padding:50px 0 15px; font-size:18px; line-height:1.4; }
	#popDict .cont { margin:0 20px; border:0; }
	#popDict .cont:after { width:19px; height:19px; background-size:10px auto; top:217px; margin-left:-10px; transform:rotate(90deg); }
	#popDict .cont .box { height:178px; }
	#popDict .cont .lang { height:30px; line-height:30px; font-size:15px; }
	#popDict .cont .left, #popDict .cont .right { width:auto; float:none; border:1px solid #dadde3; }
	#popDict .cont .left textarea { padding:10px 12px; color:#595959; }
	#popDict .cont .left .count { right:12px; bottom:8px; color:#595959; }
	#popDict .cont .left .remove { width:26px; height:26px; right:0; top:2px; background-size:6px auto; }
	#popDict .cont .right { margin-top:35px; }
	#popDict .cont .right .box { padding:10px 12px; font-size:15px; color:#595959; border-left:0; }
	#popDict .btnTransLang { width:104px; height:30px; margin:15px auto; line-height:30px; font-size:15px; }
	#popDict .close { width:33px; height:33px; right:6px; top:6px; background-size:13px auto; }
}

@media screen and (max-width:1023px) and (orientation: landscape) {
	#header { height:32px; padding:3px 14px; }
	#header .step1 { width:23px; height:23px; font-size:10px; line-height:23px; }
	#header .inner > .left { width:auto; margin-right:80px; }
	#header .inner > .right { height:42px; padding-top:3px; }
	#header .btnExit { right:32px; }

	.btnToggleTool { width:46px; height:32px; display:block; position:fixed; right:0; top:0; font-size:0; z-index:12; }
	.btnToggleTool:after { content:''; width:19px; height:8px; position:absolute; left:50%; top:50%; margin:-4px 0 0 -10px; background:url('../images/btnToggleTool.png') center center no-repeat; background-size:19px auto; transition:all .5s; }

	#wrap.toggle .inner { padding:0 40px 42px; }

	#wrap.toggle #header { top:-32px; }
	#wrap.toggle #topTitle { top:-64px; }
	#wrap.toggle #container { padding:0; }
	#wrap.toggle #header .inner > .right { bottom:-42px; }
	#wrap.toggle .btnStepArrow { bottom:50%; }
	#wrap.toggle .btnToggleTool { background-color:#ffb260; }
	#wrap.toggle .btnToggleTool:after { transform:rotate(180deg); }
	#wrap.toggle #footer { bottom:-46px; }

	#topTitle { height:32px; top:32px; }
	#topTitle h1 { line-height:32px; }
	#topTitle h1:after { height:20px; margin-top:-10px; }
	#topTitle h2 { line-height:32px; }

	#topTitle span.page { width:30px; height:20px; line-height:20px; }

	#topTitle.is--direction h2:after { width:23px; height:23px; background-size:12px auto; }
	#topTitle.is--direction h2.on:after { background-size:13px auto; }

	#container { padding-top:64px; }

	#boxScript.active { top:-90px; }
	#boxScript .inner { height:90px; }
	#boxScript .txtScript { max-height:90px; }

	.btnStepArrow { bottom:6px; }

	.player .btnPlay { height:36px; }

	#footer { height:46px; bottom:42px; }
	#footer.noBar { height:36px; }
	#footer .boxToggle { top:0; }
	#footer .boxToggle label { height:36px; line-height:36px; }
	#footer .boxTogglePS { top:8px; }
	#footer .boxOption { top:0; }
	#footer .boxOption button { height:36px; }
	#footer .boxOption button.btnMic:after { width:10px; height:22px; }
	#footer .boxOption button.btnSound { margin-left:6px; }
	#footer .boxOption button.btnSound:after { width:20px; height:16px; }
}

@media screen and (max-width:340px) {
	.boxSpice .mov { width:auto; }
}