body {font-size: 0px;}
body img{image-rendering: -webkit-optimize-contrast; transform: translateZ(0); backface-visibility: hidden;}
label { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none}


.levelguide_wrap .btnbox03 { margin-top: 10px;}
.levelguide_wrap .btnbox03 .btn { width: 370px; height: 50px; line-height: 50px; border-radius: 12px; background: #2F5A72; color: #FFF; text-align: center; font-family: notoM; font-size: 18px; }

.chWrap {width:100%;background-color:#fff;margin-top: 40px;}
.chWrap:after { content:''; display:block; clear:both; }
.topWrap {width: 100%;background-color: #fff;margin-bottom: 20px;}
.topWrap .indexTbl {margin-bottom: 1px;}

.lvCatBox {float:left;width:100%;margin-bottom: 20px;}
.lvCat {width: 100%;float: left;}
.lvCat li {float:left;line-height:38px;height:40px;margin-bottom:10px;margin-right:10px;border-radius:20px;padding:0;position:relative;color:#333;}
.lvCat li input[type="checkbox"] { display:none; }
.lvCat li input[type="checkbox"] + label {background-color:#ecf2fb;padding:10px 15px 10px 11px;border-radius:20px;color: #438CFD;font-size: 16px;font-family: 'robotoM';}
.lvCat li input[type="checkbox"] + label span {float:none;display:inline-block;width:14px;height:16px;margin:0 5px 0 0;top: -1px;vertical-align:middle;background: url('/resources/common/images/main/icon/levelguide_check_b.svg') center left no-repeat;cursor: pointer;background-size: 15px;}
.lvCat li input[type="checkbox"]:checked + label {background-color: #438CFD;color:#fff;}
.lvCat li input[type="checkbox"]:checked + label span {background: url('/resources/common/images/main/icon/levelguide_check_w.svg') center left no-repeat;background-size: 15px;}
.lvCat li:nth-of-type(1) input[type="checkbox"]:checked + label {background-color:#438CFD; }
.lvCat li:nth-of-type(2) input[type="checkbox"]:checked + label {background-color:#f63f31; }
.lvCat li:nth-of-type(3) input[type="checkbox"]:checked + label {background-color:#e64bc0; }
.lvCat li:nth-of-type(4) input[type="checkbox"]:checked + label {background-color:#ff731e; }
.lvCat li:nth-of-type(5) input[type="checkbox"]:checked + label {background-color:#f9b31e; }
.lvCat li:nth-of-type(6) input[type="checkbox"]:checked + label {background-color:#54ce53; }
.lvCat li:nth-of-type(7) input[type="checkbox"]:checked + label {background-color:#2eabbd; }
.lvCat li:nth-of-type(8) input[type="checkbox"]:checked + label {background-color:#3ad1f1; }

.lvCat li.Phonics input[type="checkbox"]:checked + label {background-color:#f63f31; }
.lvCat li.coursebook input[type="checkbox"]:checked + label {background-color:#e64bc0; }
.lvCat li.Reading input[type="checkbox"]:checked + label {background-color:#ff731e; }
.lvCat li.Grammar input[type="checkbox"]:checked + label {background-color:#f9b31e; }
.lvCat li.Writing input[type="checkbox"]:checked + label {background-color:#54ce53; }
.lvCat li.Speaking input[type="checkbox"]:checked + label {background-color:#2eabbd; }
.lvCat li.Listening input[type="checkbox"]:checked + label {background-color:#3ad1f1; }

.indexTbl { width:100%; margin-bottom:1px ;border-collapse:initial; table-layout:fixed; margin-bottom:10px; }
.indexTbl th {font-family:robotoM, notoM;font-size: 15px;color:#fff;text-align:center;height:24px;border-right: 1px solid #fff;}
.indexTbl td { height:30px; color:#fff; text-align:center; font-family:robotoM, notoM; font-size:10px; overflow: hidden; }
.indexTbl td p {width:100%;font-family:robotoM, notoM;font-size: 15px;color:#fff;-webkit-transform:scale(0.9);}
.indexTbl tr:first-child th, .indexTbl tr:first-child td { border-bottom:1px solid #fff; }
.indexTbl tr:first-child td:last-child, .indexTbl tr:last-child td:last-child { border-right:none; }
.indexTbl tr.CEFR th { background-color:#3f434c; }
.indexTbl tr.CEFR td { background-color:#50545d; border-right: 1px solid #96989e; }
.indexTbl tr.Level th { background-color:#1f56c8; }
.indexTbl tr.Level td { background-color:#3d7dff; border-right: 1px solid #6f9fff; }

.levelTbl { width:100%; border-top:1px solid #acb1bb; margin-bottom:10px; }
.levelTbl th {text-align:center;color:#fff;}
.levelTbl th {font-family: 'robotoM', 'notoM';font-size: 16px;word-break: break-all}
.levelTbl td.bookList span {margin:0 0 1px;padding: 3px 0 3px 10px;display:inline-block;}
.levelTbl td.bookList span img {width: 50px;height: 65px;border: 1px solid #dcdcdc;}
.levelTbl td.bookList span.blank img {width:32px; height:44px; border:none;box-shadow:none; text-shadow:none;}
.levelTbl td.bookList span.smartReading {width: calc(100% / 7);}
.levelTbl td.book p.level {font-family:robotoB, notoB;font-size: 14px;color:#333;}
.levelTbl td.book p.level>span {white-space:nowrap}
.levelTbl td.book p.level+span {font-family:robotoM, notoM;float:left;width:100%;font-size: 13px;color:#666;}

.levelTbl th { width:10%; }
.levelTbl td:nth-of-type(1) { width:15%; }
.levelTbl td {width:6.25%;border-right: 1px solid #d3d3d3;border-bottom:1px solid #d3d3d3;text-align:center;padding: 2px;} 
.levelTbl td:last-child { border-right: 1px solid #acb1bb; }
.levelTbl tr:last-child td {border-bottom:1px solid #acb1bb;}
.levelTbl tr.blank td, .levelTbl tr.blank th { height:0; border-bottom:none; }


.mgb30 { margin-bottom:30px; }
td.bookList {text-align: left;}

.Phonics th { background-color:#f63f31; border:1px solid #f63f31; }
.Phonics td.selected, .Phonics td.bookList { background-color:#fff2f1; }
.coursebook th { background-color:#e64bc0; border:1px solid #e64bc0; }
.coursebook td.selected, .coursebook td.bookList { background-color:#ffeefb; }
.Reading th { background-color:#ff731e; border:1px solid #ff731e; }
.Reading td.selected, .Reading td.bookList { background-color:#fff8f3; }
.Grammar th { background-color:#f9b31e; border:1px solid #f9b31e; }
.Grammar td.selected, .Grammar td.bookList { background-color:#fff8e8; }
.Listening th { background-color:#54ce53; border:1px solid #54ce53; }
.Listening td.selected, .Listening td.bookList { background-color:#f4fef4; }
.Speaking th { background-color:#2eabbd; border:1px solid #2eabbd; }
.Speaking td.selected, .Speaking td.bookList { background-color:#e6f8fa; }
.Writing th { background-color:#3ad1f1; border:1px solid #3ad1f1; }
.Writing td.selected, .Writing td.bookList { background-color:#f4fdff; }



@media all and (max-width: 1024px) {
  .lvCat li { height: 37px; line-height: 37px;}
  .lvCat li input[type="checkbox"] + label { font-size: 14px;}
  .indexTbl th { font-size: 12px;}
  .indexTbl td p { font-size: 12px;}
  .levelTbl th { font-size: 12px;}
  .levelTbl td.book p.level { font-size: 12px;}
  .levelTbl td.book p.level+span {font-size: 10px;}
  .levelTbl td.bookList span { padding: 2px 0 2px 5px;}
  .levelTbl td.bookList span img {width: 35px; height: 45.5px;}
}


@media all and (max-width: 767px) { 
  .chWrap { margin-top: 30px; }
  .topWrap {margin-bottom: 10px;}
  .levelguide_wrap .btnbox03 .btn { max-width: 370px; width: 100%; height:40px; line-height: 40px; font-size: 16px; }
  .lvCatBox {margin-bottom: 10px;}
  .lvCat li {height: 34px;line-height: 34px;}
  .lvCat li input[type="checkbox"] + label { font-size: 12px;}
  .indexTbl th { font-size: 8px;}
  .indexTbl td { height: 25px;}
  .indexTbl td p { font-size: 7px;}
  .levelTbl th { font-size: 7px;}
  .levelTbl td.book p.level {font-size: 7px;}
  .levelTbl td.book p.level+span { font-size: 6px;}
  .levelTbl td.bookList span { padding: 1px 0 1px 0px;}
  .levelTbl td.bookList span img {width: 15px;height: 19.5px;}


}