/*common*/
html,body{width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
html{font-size:16px;}
@media only screen and (min-width: 768px) {
	html{font-size:24px;}
}
body{font-size:1rem;}
#intro{position:fixed;padding:0;margin:0;top:0;left:0;width:100%;height:100%;z-index:999999;background: url('../images/221_intro2.jpg') #F6B13B center top no-repeat;background-size:cover;}
/*#intro{position:fixed;padding:0;margin:0;top:0;left:0;width:100%;height:100%;z-index:99;background: url('images/221_intro.jpg') #F6B13B center top no-repeat;background-size:cover;}*/
.page{display:none;position:relative;height:100%;width:100%;margin:0 auto;padding:0;}
.page.active{display:block;}
.none{display:none !important;}
.contents{position:relative;width:100%;height:100%;margin:0 auto;padding:0;}
.color-1{background:#87B14A;color:#fff;}/*³ì»ö*/
.color-2{background:#87B14A;color:#fff;}/*û·Ï1*/
.color-3{background:#87B14A;color:#fff;}/*ÆĶõ*/
.color-4{background:#87B14A;color:#fff;}/*û·Ï2*/
.color-5{background:#E65174;color:#fff;}/*ÇÎÅ©*/
.color-6{background:#F8B038;color:#fff;}/*ÁÖȲ*/
.color-x{background:#D1D2D4;color:#D1D2D4}/*ȸ»ö*/
/*ÆùÆ® ÆÄ(#00AEEF), »¡(#D1232A), ÃÊ (#D1232A)*/
.text-color-b{color:#00AEEF}
.text-color-r{color:#D1232A}
.text-color-g{color:#D1232A}
.text-color-t{color:#4cc0c1}
._p{color:#0072BC}
._b{color:#8E52A1}
._r{color:#E65174}
.mt10{margin-top:0.625rem;}
.mt20{margin-top:1.25rem;}
.title_close{color:#E65174}
span.word{font-size: 1.4rem;display:inline-block;}
span.word.lg{font-size:2.2rem;margin-top:0.625rem;}

.tip_area{display:block;position:absolute;top:-1.25rem;right:0;width:auto;text-align:right;padding:0.625rem;}
.tip_area > .btnTip{background:#E65174;color:#fff;font-size:0.7rem;padding:2px 6px;text-align:center;border-radius:3px;border:none;outline:none;}
.tip_area .tip{list-style:circle; width:10rem;padding-left:5px;font-size:0.625rem;}
.tip_area .popover{max-width:11.25rem !important;top:0.625rem !important;}

/* verbs > header*/
.contents > header{background:#fff; position:fixed;z-index:9; width:100%;top:0;left:0;height:2.45rem;line-height:2.45rem;padding:0 1.25rem;text-align:center; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);-moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);}
.chapter{display:block;float:left;font-size:1.05rem;color:#333;letter-spacing:-0.7rem;}
.chapter > span{font-size:1.05rem;color:#BDBDBD}
.pageing{display:block;float:right;font-size:0.95rem;color:#BDBDBD;letter-spacing:.1em;width:65px;text-align:right;}
.pageing > b{font-weight:bold;color:#333;}
.sel_area{margin-left:3.75rem}

/* verbs > footer*/
.contents > footer{position:fixed;width:100%;height:100%; bottom:0;left:0;height:3.75rem;background:#EEEEEE;z-index:9;}
.play_area{position:relative;width:100%;height:100%;text-align:center;line-height:3.75rem;box-shadow: -2px -2px 15px rgba(0, 0, 0, 0.2);-webkit-box-shadow: -2px -2px 15px rgba(0, 0, 0, 0.2);-moz-box-shadow: -2px -2px 15px rgba(0, 0, 0, 0.2);}
.play_area > .play{display:inline-block;color:#BDBDBD;font-size:1.8rem;padding:0 1.25rem;}
.play_area > .play:hover{color:#6A6A6A}
.play_area > .play.start{font-size:2.5em;color:#6A6A6A}
.play_area > .play.start > i.fa-stop{display:none;}
.play_area > .play.start.active > i.fa-stop{display:inline;}
.play_area > .play.start.active > i.fa-play{display:none;}

/*.play_area > .play.pre{position:absolute;left:6.25rem;color:#BDBDBD;}*/
/*.play_area > .play.next{position:absolute;right:6.25rem;color:#BDBDBD;}*/
.play_area > .play.pre{color:#BDBDBD;margin-right:100px;}
.play_area > .play.next{color:#BDBDBD;margin-left:100px;}

.play_area > .play.search{position:absolute;right:2rem;color:#BDBDBD;}
.play_area > .play.search:hover{color:#6A6A6A}

.auto{display:none;font-size:0.5rem;text-align:center;border-radius:3px;border:none;outline:none;padding:2px 4px;color:#E65174;opacity:.5;}
.auto.l{position:absolute;top:4px;left:-0.625rem;}
.auto.r{position:absolute;top:4px;right:-0.625rem; }
.auto.active{color:#fff;background:#E65174;opacity:1;display:block;}
/*.auto{display:block;background-color:transparent;color:#E65174;font-size:0.5rem;text-align:center;border-radius:3px;border:none;outline:none;padding:4px;}*/


/* verbs > contents*/
.contents > section{text-align:center;width:100%;height:100%;padding-top:2.45rem;padding-bottom:3.75rem;}
.contents > section > table{table-layout:fixed;width:100%;height:100%;margin-bottom:3.75rem;border-spacing:0;}
.contents > section > table td.guide{text-align:left;font-size:0.8rem;vertical-align:top;height:1.25rem;padding:1.25rem 1.25rem 0 1.25rem;}
.contents > section > table td.card_area{vertical-align:middle;}
.contents > section > table td > .swiper-container{height:100%;}
li.swiper-slide{padding:1.25rem;padding-top:0.625rem;}
table.card{table-layout:fixed;width:100%;height:100%;border-spacing:0;border:1px solid #EEEEEE;font-size:0.95rem;}
table.card.complete{border:1px solid #BDBDBD;box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);}
table.card.bookmark{border:1px solid #E65174}
table.card th{text-align:center;vertical-align:middle;height:25px;padding:0 25px;font-size:0.8rem;}
table.card th > span{display:inline-block;width:100%;padding:3px 0;font-size:0.8rem;}
table.card td{text-align:center;vertical-align:top;min-height:30px;padding:0 0.625rem;font-size:1.4rem;}
table.card td.main{min-height:150px;height:40%;position:relative;font-size:0.95rem;vertical-align:middle;}
table.card td.main > img{display:block;margin:1.25rem auto;height:3.75rem;}
table.card td.main > .icon_area{display:block;position:absolute;top:0;left:0;width:auto;text-align:left;padding:0.625rem;}
table.card td.main > .icon_area > i{color:#0072BC}
table.card td.main > .icon_area > i.fa-star{color:#8E52A1;margin-left:5px;}
table.card td.main > .bookmark_area{display:block;position:absolute;top:-0.625rem;right:0.625rem;width:auto;text-align:right;margin:0;padding:0;background:#fff;}
table.card td.main > .bookmark_area .bookmark{font-size:1.5rem;color:#E65174}

table.card td.main > .dict_area{display:block;position:absolute;bottom:0;right:0;width:auto;text-align:right;padding:0.625rem;}
table.card td.main > .dict_area > i{color:#BDBDBD}
table.card td.main > .dict_area.o > i{color:#00AEEF}
table.card td.main > .dict_area.x > i{color:#D1232A}

.bookmark > i{display:none;}
.bookmark > i.fa-bookmark-o{display:inline-block;}
.bookmark.active > i.fa-bookmark{display:inline-block;}
.bookmark.active > i.fa-bookmark-o{display:none;}

table.card td a.btn_sound{opacity:0.1;float:left;vertical-align:middle;display:inline-block;color:#333;width:1.25rem;}
table.card td a.btn_sound > i.fa-volume-up{display:none;}
table.card td a.btn_sound.active > i.fa-volume-up{display:inline-block;}
table.card td a.btn_sound.active > i.fa-volume-off{display:none;}
table.card td.main a.btn_sound{font-size:1.5rem;margin-top:1.25rem;}
table.card td a.btn_sound.active{opacity:1;}

.mean{font-size:1.2rem}

/*option*/
.overlay{height:100%;width:100%;padding:0;margin:0;position:fixed;background:#000;z-index:10;overflow:hidden;opacity:.8;width:0;}
.btn_opt_close{color:#fff;font-size:3rem;position:absolute;bottom:0;right:0;opacity:1 !important;margin-right:1.25rem;margin-bottom:0.625rem;opacity:1;}

.opt_area{position:fixed;top:0;left:0;z-index:11;height:100%;width:100%;overflow-x:hidden;overflow-y:auto;margin-left:-100px;padding-left:100px;background:#fff;padding-bottom:1.25rem;width:0;}
.opt_area > .btn_area > p{color: #31708f;background:#d9edf7;padding:0.625rem 0.95rem;}
.opt_area > .btn_area > a{position: relative;display: block;padding: 0.625rem 0.95rem;background-color: #fff;border-bottom: 1px solid #EEEEEE;color:#333;text-align:left;}
.opt_area > .btn_area > a > span{float:right;background:#1ccacc}
.opt_area > .btn_area > p.set{color: #3c763d;background-color: #dff0d8;}

#opt_word_sp > label > i{display:none;}
#opt_word_sp > label.active > i{display:inline-block;}

.kakao{width:100%;margin:0.625rem auto;text-align:right;}
.kakao > a{display:inline-block;padding:0 0.625rem;background:#F5EB0F;color:#442F31;line-height:30px;font-size:0.8rem;border-radius:4px;margin-top:0.625rem;margin-right:0.95rem;}
.kakao > a > img{height:25px;vertical-align:middle;}

.report{margin:1.25rem auto;text-align:center;position:relative;}
.chart{display:inline-block;text-align:center;margin:0 auto;}
.ver{position:absolute;bottom:0;right:1.25rem;color:#D1D2D4;font-size:.5rem;}
.logo{position:absolute;top:-0.625rem;left:0;color:#EEEEEE;font-size:.5rem;display:block;border:none;width:70px;}
#btn_std_init{color:#333;}
.easypiechart {  position: relative;  text-align: center;}
.easypiechart canvas {  position: absolute;  top: 0;  left: 0;  z-index: 0;}


input:-ms-input-placeholder { color: #EEEEEE;}
input::-webkit-input-placeholder { color: #EEEEEE;} 
input::-moz-placeholder { color: #EEEEEE;}
input::-moz-placeholder { color: #EEEEEE;}

input{ 
-webkit-ime-mode:disabled; 
-moz-ime-mode:disabled; 
-ms-ime-mode:disabled; 
ime-mode:disabled; 
} 

 
.txt_answer{border:none;outline:none;border-bottom:1px solid #EEEEEE;width:99%;font-size:2em;font-weight:bold;text-align:center;display:inline-block;vertical-align:top;}
table.card.dictation tr{border:1px solid #EEEEEE}
table.card.dictation a.btn_sound{display:block;font-size:2em;}
table.card.dictation td{padding-left:2.45rem; padding-right:2.45rem;position:relative;vertical-align:middle;}
table.card.dictation td > div.over{min-height:100%;min-width:100%;padding:0;margin:0;position:absolute;top:0;left:0;overflow:hidden;opacity:.5;}
table.card.dictation td > div.over i.o{color:#00AEEF;font-size:6rem;display:inline-block;margin:0 auto;vertical-align:middle;line-height:100%;}
table.card.dictation td > div.over i.x{color:#D1232A;font-size:6rem;display:inline-block;margin:0 auto;vertical-align:middle;line-height:100%;}

table.card.dictation tr.ox div.over{display:none;}
table.card.dictation tr.ox span.word{display:none;}
table.card.dictation tr.ox.o div.over{
  display:flex;
  align-items:center;
  justify-content:center;

  display:-webkit-flex;
  -webkit-align-item;center;
  -webkit-justify-content:center;

}
table.card.dictation tr.ox.o div.over i.x {display:none;}
table.card.dictation tr.ox.o span.word{display:block;}
table.card.dictation tr.ox.o a.btn_sound{display:none}

table.card.dictation tr.ox.x div.over{
  display:flex;
  align-items:center;
  justify-content:center;

  display:-webkit-flex;
  -webkit-align-item;center;
  -webkit-justify-content:center;
}
table.card.dictation tr.ox.x div.over i.o {display:none;}
table.card.dictation tr.ox.x span.word{display:block;}
table.card.dictation tr.ox.x a.btn_sound{display:none}

.hint{font-size:0.5rem;display:none;}

table.card.dictation tr.ox.o .hint{display:none;}
table.card.dictation tr.ox.x .hint{display:none;}


.menu_area{min-width:100%;text-align:center;margin:2.45rem auto;}

.txt_area{display:inline-block;}
/*.txt_area.active{z-index:9;padding:0 1.25rem;padding-bottom:3.75rem; background:#333;position:fixed;top:0;right:0;bottom:0;left:0;align-items:center;display:flex;justify-content:center;display:-webkit-flex;-webkit-align-item:center; -webkit-justify-content:center;}*/
.txt_area.active{z-index:9;padding:0 1.25rem;background:#333;position:fixed;top:0;right:0;bottom:0;left:0;align-items:center;display:flex;justify-content:center;display:-webkit-flex;-webkit-align-item:center; -webkit-justify-content:center;}

.btn-group > .btn{font-size:.8rem !important;}
.btn_area > .btn{font-size:.875rem !important;}
.badge{font-size:0.75rem !important;}
.popover{font-size:0.875rem !important;}
.popover-content{width:100% !important;}
._btn{width:1rem;}

@media only screen and (max-width: 768px) {
	.none-mobile {display: none !important}
}