@charset "UTF-8";

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
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-family:"dotum,gulim,arial"; vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1; background:#fff;}
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;}

/* Layout */
@media screen and (min-width:0px) and (max-width:430px) {
	html {height:100% !important;}
	body {height:100% !important;}
	.mainC {height:100%;}
}
@media screen and (min-width:431px) and (max-width:480px) {
	html {min-height:700px !important;}
	body {min-height:700px !important;}
	.mainC {min-height:700px !important;}
}
@media screen and (min-width:481px) and (max-width:550px) {
	html {height:800px !important;}
	body {height:800px !important;}
	.mainC {min-height:800px !important;}
}
@media screen and (min-width:551px) and (max-width:630px) {
	html {height:900px !important;}
	body {height:900px !important;}
	.mainC {min-height:900px !important;}
}
@media screen and (min-width:631px) and (max-width:700px) {
	html {height:1000px !important;}
	body {height:1000px !important;}
	.mainC {min-height:1000px !important;}
}
@media screen and (min-width:701px) and (max-width:765px) {
	html {height:1100px !important;}
	body {height:1100px !important;}
	.mainC {min-height:1100px !important;}
}
@media screen and (min-width:766px) and (max-width:830px) {
	html {height:1200px !important;}
	body {height:1200px !important;}
	.mainC {min-height:1200px !important;}
}
@media screen and (min-width:831px) and (max-width:970px) {
	html {height:1400px !important;}
	body {height:1400px !important;}
	.mainC {min-height:1400px !important;}
}
@media screen and (min-width:971px) and (max-width:1110px) {
	html {height:1600px !important;}
	body {height:1600px !important;}
	.mainC {min-height:1600px !important;}
}
@media screen and (min-width:1111px) and (max-width:1320px) {
	html {height:1900px !important;}
	body {height:1900px !important;}
	.mainC {min-height:1900px !important;}
}
@media screen and (min-width:1320px) and (max-width:1600px) {
	html {height:2300px !important;}
	body {height:2300px !important;}
	.mainC {min-height:2300px !important;}
}
@media screen and (min-width:1601px) and (max-width:1820px) {
	html {height:2600px !important;}
	body {height:2600px !important;}
	.mainC {min-height:2600px !important;}
}
@media screen and (min-width:1821px) and (max-width:3000px) {
	html {height:3100px !important;}
	body {height:3100px !important;}
	.mainC {min-height:3100px !important;}
}


body.hide {overflow:hidden; height:100%; position:relative;}


.mainC {position:relative;}
.mainC * {box-sizing:border-box;}
.mainC img {max-width:100%;}
.mainC a {text-decoration:none;}
.mainC em {font-style:normal;}
.mainC.bg-main {background:url(/allso/img/HI1/bg_main.jpg) no-repeat 0 0; background-size:100% 100%;}


/* main */
.main_area {width:100%; height:100%; position:relative; overflow:hidden;}
.main_area .mainTitle {position:absolute; z-index:100;}
.main_area .mainTitle .tit {position:relative;}
.main_area .mainTitle .tit > span {position:absolute; font-size:1.5rem; font-weight:bold; color:#fff; letter-spacing:-1px;}
.main_area .btnService {position:absolute; top:0; right:12px; width:25px; height:48px; background:url(/images/studyroom/ico_dots_white.png) no-repeat 50% 50%; background-size:3px auto; z-index:200;}

.main_area .mainVisual {position:relative;}
.main_area .mainVisual .rollingBanner {position:relative;}
.main_area .mainVisual .rollingBanner > ul {width:100%;}
.main_area .mainVisual .rollingBanner > ul > li {display:block; width:100%; position:absolute; text-align:center;}
.main_area .mainVisual .rollingBanner > ul > li > img {width:100%;}
.main_area .mainVisual .rollingBanner .nav {/* position:absolute; top:10%; left:9%; */ z-index:10;}
.main_area .mainVisual .rollingBanner .nav a {display:inline-block; width:15px; height:13px; background:url(/allso/img/HI1/ico_dot_white_default.png) no-repeat 0 0; background-size:13px auto; margin:0 0.1em;}
.main_area .mainVisual .rollingBanner .nav a.on {background:url(/allso/img/HI1/ico_dot_white_active.png) no-repeat 0 0; background-size:13px auto;}

.main_area .mainBtns {padding:0 1em;}
.main_area .mainBtns > ul {overflow:hidden; clear:both;}
.main_area .mainBtns .mainBtns_etc > li:nth-child(2) {float:left; display:table; width:25%; padding:0.2em 0.2em; text-align:center; letter-spacing:-1px;}
.main_area .mainBtns .mainBtns_etc > li:last-child {float:right; display:table; width:25%; padding:0.2em 0.2em; text-align:center; letter-spacing:-1px;}
.main_area .mainBtns > ul > li {float:left; display:table; width:50%; padding:0.2em 0.2em; text-align:center; letter-spacing:-1px;}
.main_area .mainBtns > ul > li > div {display:table-cell; border:1px solid #7ca3ca; background-color:#fff; vertical-align:middle;}
.main_area .mainBtns > ul > li > div > p.sub {color:#8ba6c3; font-size:0.95rem; margin-bottom:0.4em;}
.main_area .mainBtns > ul > li > div > p.bold {color:#2f7de1; font-size:1.4rem; font-weight:bold;}
.main_area .mainBtns > ul > li > div > p.boldB {color:#2f7de1; font-size:1.1rem; font-weight:bold; position:relative; top:1px; line-height:25px;}


/* list */
.list_area .header {background-image:linear-gradient(180deg, #4691f1, #3a87e8, #2f7de1); position:relative; letter-spacing:-0.4px;}
.list_area .header .hTarea {height:56px; line-height:56px; position:relative;}
.list_area .service-L {position:absolute; top:0; left:4px; width:34px; height:100%; background:url(/images/studyroom/ico_dots_white.png) no-repeat 50% 50%; background-size:3px auto; z-index:200;}
.list_area .service-R {position:absolute; top:0; right:5px; width:34px; height:100%; background:url(/images/studyroom/ico_dots_white.png) no-repeat 50% 50%; background-size:3px auto; z-index:200;}
.list_area .header .header-L {position:absolute; top:0; left:5%; width:24px; height:100%; background:url(/allso/img/ico_menu_white.png) no-repeat 50% 50%; background-size:24px auto; z-index:100}
.list_area .header .header-C {position:absolute; top:0; left:-65px; right:0; text-align:center; color:#fff; font-size:1.1rem; font-weight:bold;}
.list_area .header .header-R {position:absolute; top:1px; right:3%;}
.list_area .header .header-R.middle {right:12%;}
.list_area .header .header-R > a {color:#fff; font-size:0.78rem; font-weight:bold; border:1px solid #fff; border-radius:10px; padding:0.4em 0.7em 0.3em;}
.list_area .header .hBarea {height:50px; line-height:50px;}
.list_area .header .hBarea input {padding:0 0.8em;}
.list_area .header .hBarea select {-webkit-appearance:none; -moz-appearance:none; appearance:none; background:url(/allso/img/ico_arrow_down_black.png) #fff no-repeat 95% 50%; background-size:12px auto; padding:0 0.6em;}
.list_area .header .hBarea input, .list_area .header .hBarea select, .list_area .header .hBarea select option {border:none; outline-style:none; font-size:0.9rem; color:#222; background-color:#fff; letter-spacing:-0.5px;}
.list_area .header .hBarea input, .list_area .header .hBarea select, .list_area .header .hBarea .btn > a > img {width:100%; height:100%;}
.list_area .header .searchBox {height:100%; overflow:hidden; clear:both; padding:0 1.2em 0.8em;}
.list_area .header .searchBox > .inp {float:left; width:84%; height:100%;}
.list_area .header .searchBox > .btn {float:right; width:14%; height:100%;}
.list_area .header .searchBox.typeB > .inp input {background:url(/allso/img/HI1/ico_expand_blueBox.png) #fff no-repeat 97% 45%; background-size:38px auto;}

.list_area .tabWrap {border-bottom:1px solid #dfe3e6; letter-spacing:-1px;}
.list_area .tabWrap ul {overflow:hidden; clear:both;}
.list_area .tabWrap ul > li {float:left; color:#222; font-size:0.98rem; text-align:center; background-color:#fff; padding:1.1em 0 0.9em;}
.list_area .tabWrap ul > li.on {color:#2f7de1; font-weight:bold; border-bottom:3px solid #2f7de1;}
.list_area .tabWrap ul.col3 > li {width:33.3%;}
.list_area .tabWrap ul.col2 > li {width:50%;}

.list_area .listBox .list-more {padding:1em 0.5em 1.2em; text-align:right; position:relative; top:7px;}

.list_area .listBox.video .list-item .thumb, .list_area .listBox.note .list-item .thumb {width:32%; position:relative; text-align:center;}
.list_area .listBox.quiz .list-item .thumb {width:28%; position:relative; text-align:center;}

.list_area .listBox .list-item .thumb > img {max-height:65px;}
.list_area .listBox.video .list-item .detail, .list_area .listBox.note .list-item .detail {width:68%; letter-spacing:-0.8px;}
.list_area .listBox.quiz .list-item .detail {width:72%; letter-spacing:-0.8px;}
.list_area .listBox .list-item .detail .mainTit {color:#307ee0; font-size:0.85rem; font-weight:bold; margin-bottom:0.5em;}
.list_area .listBox .list-item .detail .subTit {color:#333; font-size:0.88rem; line-height:140%;}

.list_area .listBox.video .list-item {border-bottom:1px solid #dfe3e6; padding:1.2em 0.8em 1.1em; overflow:hidden; clear:both;}
.list_area .listBox.video .list-item .thumb {float:left;}
.list_area .listBox.video .list-item .thumb .screen {width:100%; height:100%; background:url(/allso/img/bg_black35.png) repeat 0 0; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1;}
.list_area .listBox.video .list-item .detail {float:left; padding-left:1em;}

.list_area .listBox.note .list-item {display:table; width:100%; border-bottom:1px solid #dfe3e6; padding:1.2em 0.8em 1.1em;}
.list_area .listBox.note .list-item .thumb {display:table-cell;}
.list_area .listBox.note .list-item .thumb:not([class*=note]) > img {border:1px solid #dfe3e6;}
.list_area .listBox.note .list-item .thumb[class*=note] {border:1px solid #dfe3e6; position:relative; padding:0.2em 0.35em 0.2em 0.7em;}
.list_area .listBox.note .list-item .thumb[class*=note]:after {content:""; position:absolute; top:0; right:0; width:4px; height:100%; background:url(/allso/img/ico_note_after.png) repeat-y 0 0; background-size:auto 100%;}
.list_area .listBox.note .list-item .thumb[class*=note]:before {content:""; position:absolute; top:-1px; left:-1px; width:10px; height:103%; background-size:auto 100%;}
.list_area .listBox.note .list-item .thumb.noteBlue:before {background:url(/allso/img/ico_note_before_blue.png) repeat-y 0 0; background-size:auto 100%;}
.list_area .listBox.note .list-item .thumb.notePink:before {background:url(/allso/img/ico_note_before_pink.png) repeat-y 0 0; background-size:auto 100%;}
.list_area .listBox.note .list-item .thumb.noteOrange:before {background:url(/allso/img/ico_note_before_orange.png) repeat-y 0 0; background-size:auto 100%;}
.list_area .listBox.note .list-item .thumb.noteGreen:before {background:url(/allso/img/ico_note_before_green.png) repeat-y 0 0; background-size:auto 100%;}
.list_area .listBox.note .list-item .detail {display:table-cell; vertical-align:middle; padding-left:1em;}

.list_area .listBox.quiz .list-item {border-bottom:1px solid #dfe3e6; padding:1.2em 0.2em 1.1em 0.8em; /* overflow:hidden; clear:both; */ display:table; width:100%;}
.list_area .listBox.quiz .list-item .thumb {display:table-cell; vertical-align:middle;}
/* .list_area .listBox.quiz .list-item .thumb[class*=quiz] {display:inline-block;}
.list_area .listBox.quiz .list-item .thumb.quizBlue {background:url(/allso/img/HI1/ico_quiz_thumbnail_blue.png) no-repeat 50% 50%; background-size:auto 100%;}
.list_area .listBox.quiz .list-item .thumb.quizPink {background:url(/allso/img/HI1/ico_quiz_thumbnail_pink.png) no-repeat 50% 50%; background-size:auto 100%;}
.list_area .listBox.quiz .list-item .thumb.quizOrange {background:url(/allso/img/HI1/ico_quiz_thumbnail_orange.png) no-repeat 50% 50%; background-size:auto 100%;}
.list_area .listBox.quiz .list-item .thumb.quizGreen {background:url(/allso/img/HI1/ico_quiz_thumbnail_green.png) no-repeat 50% 50%; background-size:auto 100%;} */
.list_area .listBox.quiz .list-item .detail {display:table-cell; vertical-align:middle; padding:0.2em 0 0 0.4em;}

.list_area .listBox.word .list-item > ul {overflow:hidden; clear:both;}
.list_area .listBox.word .list-item > ul > li {float:left; display:table; width:33.3%; height:100px; padding:0.3em 0.3em; text-align:center;}
.list_area .listBox.word .list-item > ul > li > a {display:table-cell; height:100px; color:#333; border:1px solid #dfe3e6; padding:2em 0 1.9em; font-size:0.9rem; letter-spacing:-0.6px; vertical-align:middle;}
.list_area .listBox.word .list-item > ul > li.on > a {color:#4690ef; border:1px solid #4591ef; font-weight:bold;}

.list_area .listBox .no-data {text-align:center; padding:4em 1.2em 1em; font-size:1.5rem; font-weight:bold; color:#333; line-height:180%;}


/* view */
.view_area {position:relative; height:100%; /* overflow:hidden; */}
.view_area .contents {text-align:center; padding:0.5em 0 35%; /* overflow-y:scroll; */}
.view_area .contents .contBox {margin-bottom:0.3em; padding:1em 0.8em; letter-spacing:-1px;}
/* .view_area .contents .contBox#summarynoteContentsBox {margin-top:87px;} */
.view_area .contents .contBox:last-child {margin-bottom:3em;}
.view_area .contents .contImg {margin:0.6em 0; text-align:center;}
.view_area .contents .contImg > img {margin-bottom:0.8em;}
.view_area .contents p.title {text-align:left; font-size:1.05rem; font-weight:bold; color:#140607; margin-bottom:0.8em; line-height:140%;}
.view_area .contents p.title > em {color:#0f9b9f; margin-right:0.3em;}


/* quiz */
.quiz_area {position:relative; height:100%; overflow:hidden;}
.quiz_area .quizBox {margin-top:87px;}
.quiz_area .quizTit {text-align:center; padding-top:2em; margin-bottom:2em;}
.quiz_area .quizTit > img {width:80%;}
.quiz_area .quizInfo {text-align:center; font-size:0.85rem; font-weight:bold; color:#333; line-height:140%; letter-spacing:-0.5px; margin-bottom:2.5em;}
.quiz_area .quizInfo i.icon {display:block; width:100%; height:0; padding-top:calc(454/303*100px); background:url(/allso/img/ico_quiz_character.png) no-repeat 50% 50%; background-size:100px auto; margin-bottom:2em;}
.quiz_area .quizInfo strong {color:#4590f0;}
.quiz_area .quizBtn {text-align:center;}

.quiz_area .quiz-view {letter-spacing:-1px; padding:1.6em 1em;}
.quiz_area .quiz-view .timer {display:table; width:100%; margin-bottom:2em;}
.quiz_area .quiz-view .timer .time_left {display:table-cell; width:88%; vertical-align:middle; padding:0 0.2em;}
.quiz_area .quiz-view .timer .time_left .progress {display:block; height:10px; background-color:#727272; position:relative; border-top:2px solid #4c4c4c; border-radius:10px;}
.quiz_area .quiz-view .timer .time_left .progress .loader {display:inline-block; width:60%; height:10px; background-color:#e0514b; border-top:2px solid #d2322e; border-left:2px solid #d2322e; border-top-left-radius:10px; border-bottom-left-radius:10px; position:absolute; top:-2px; left:0;}
.quiz_area .quiz-view .timer .time_right {display:table-cell; width:12%; vertical-align:middle;}
.quiz_area .quiz-view .question {height:50%;}  /* require : mobile device test */
.quiz_area .quiz-view .question .que_top {overflow:hidden; clear:both; border-bottom:2px solid #999; font-size:0.88rem; padding:0 0.2em 0.8em; margin-bottom:1em;}
.quiz_area .quiz-view .question .que_top .cnt_left {float:left; color:#777;}
.quiz_area .quiz-view .question .que_top .cnt_right {float:right; color:#777;}
.quiz_area .quiz-view .question .que_bot {color:#333; font-size:0.98rem; font-weight:bold; line-height:160%;}
.quiz_area .quiz-view .answer > div {display:block; height:54px; line-height:54px; border:1px solid #cecece; border-radius:3px; color:#333; font-size:0.92rem; font-weight:bold; text-align:center; margin-bottom:1.2em; cursor:pointer;}
.quiz_area .quiz-view .answer > div.on {border:2px solid #e0514b; color:#e0514b; position:relative;}
.quiz_area .quiz-view .answer > div.on:after {content:'정답'; width:50px; height:26px; line-height:26px; position:absolute; top:-13px; right:8px; background-color:#e0514b; border-radius:10px; color:#fff; font-size:0.8rem; font-weight:normal;}
.quiz_area .quiz-view .answer > div.on > span:before {content:""; display:inline-block; width:15px; height:14px; background:url(/allso/img/ico_check_red.png) no-repeat 0 50%; background-size:15px auto; margin-right:0.4em;}
.quiz_area .quiz-view .answer > div:last-child {margin-bottom:0;}

.quiz_area .quiz-result {letter-spacing:-1px;}
.quiz_area .quiz-result .rst-msg > p {color:#333; font-size:1.1rem; font-weight:bold; text-align:center; margin-bottom:1em;}
.quiz_area .quiz-result .rst-msg > i {display:inline-block; width:100%; height:0;}
.quiz_area .quiz-result .rst-msg .msg {text-align:center;}
.quiz_area .quiz-result .rst-msg .msg .sub {color:#333; font-size:0.88rem; margin-bottom:0.5em;}
.quiz_area .quiz-result .rst-msg .msg .big {color:#333; font-size:1.4rem; font-weight:bold;}
.quiz_area .quiz-result .rst-msg .msg .big strong {color:#3c81de; margin-right:0.2em;}
.quiz_area .quiz-result .rst-note {padding:0 1.2em; margin-bottom:1.5em;}
.quiz_area .quiz-result .rst-note > p {color:#333; font-size:0.85rem; background-color:#e9edf0; border-top:1px solid #ccd1d5; border-bottom:1px solid #ccd1d5; padding:0.5em 0.6em 0.4em; margin-bottom:1em;}
.quiz_area .quiz-result .rst-note > div {color:#333; font-size:0.8rem; line-height:150%; padding:0 0.6em;}
.quiz_area .quiz-result .rst-btn {text-align:center; margin-bottom:2em;}
.quiz_area .quiz-result .rst-btn > a {font-size:0.85rem;}

.quiz_area .quiz-review {padding:1.8em 1.5em; letter-spacing:-1px; overflow-y:auto;}
.quiz_area .quiz-review > p {color:#333; font-size:1rem; font-weight:bold; margin-bottom:0.5em;}
.quiz_area .quiz-review .quiz_item {border-bottom:1px solid #ccd1d5; padding:1.1em 0 1em; position:relative;}
.quiz_area .quiz-review .quiz_item .question {margin-bottom:1.2em;}
.quiz_area .quiz-review .quiz_item .question > p {color:#777; font-size:0.95rem; margin-bottom:0.8em;}
.quiz_area .quiz-review .quiz_item .question .detail {color:#333; font-size:0.85rem; line-height:150%;}
.quiz_area .quiz-review .quiz_item .answer > p {color:#d2322e; font-size:0.95rem; margin-bottom:0.8em;}
.quiz_area .quiz-review .quiz_item .answer .detail {line-height:130%;}
.quiz_area .quiz-review .quiz_item .answer .detail > p {color:#777; font-size:0.85rem; text-decoration:line-through;}
.quiz_area .quiz-review .quiz_item .answer .detail > p.on {color:#d2322e; font-weight:bold; background:url(/allso/img/ico_check_red.png) no-repeat 0 50%; background-size:10px auto; padding-left:0.8em; text-decoration:none;}
.quiz_area .quiz-review .quiz_item .result .correct {width:70px; height:77px; position:absolute; top:15%; right:0; left:0; background-size:70px auto; margin:0 auto;}
.quiz_area .quiz-review .quiz_item .result .incorrect {width:70px; height:77px; position:absolute; top:15%; right:0; left:0; background-size:70px auto; margin:0 auto;}
.quiz_area .quiz-review .btn {text-align:center; padding-top:2em;}

.quiz_area .quizAnswer {position:absolute; top:0; right:0; bottom:0; left:0;}
.quiz_area .quizAnswer .correct {width:100px; height:102px; position:absolute; top:45%; right:0; left:0; background-size:100px auto; margin:-50px auto 0;}
.quiz_area .quizAnswer .incorrect {width:100px; height:102px; position:absolute; top:45%; right:0; left:0; background-size:100px auto; margin:-50px auto 0;}

.correct {background:url(/allso/img/ico_answer_correct.png) no-repeat 50% 50%;}
.incorrect {background:url(/allso/img/ico_answer_incorrect.png) no-repeat 50% 50%;}


/* card */
.card_area {width:100%; height:100%; overflow:hidden; letter-spacing:-1px;}
.card_area .cardBox {width:100%; background:url(/allso/img/HI1/bg_card.jpg); background-size:100% 100%; position:relative; overflow-y:auto; margin-top:41px;}
.card_area .cardBox.no-bg {background:#fff; padding:0 0.2em;}
.card_area .cardBox .bot-bar {background-color:#e9edf0; border-bottom:1px solid #ccd1d5; color:#333; font-size:0.88rem; padding:1em 1em 0.8em; line-height:140%; letter-spacing:-1px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.card_area .cardBox .card_wrap {/* padding:1.2em 1em; */ padding:2em 1em 1em;}
.card_area .cardBox .card_item {height:80%; margin-top:2em;}
.card_area .cardBox .card_item .card-head {width:100%; /* height:42px; line-height:44px; */ color:#fff; font-size:1.1rem; font-weight:bold; background:url(/allso/img/HI1/bg_card_head.jpg) no-repeat 0 0; background-size:100% auto; padding:0.85em 1em 0.6em;}
.card_area .cardBox .card_item .card-body {width:100%; display:table-cell; vertical-align:middle; overflow-y:auto; background-color:#fff; border-right:4px solid #6c86a9; border-bottom:4px solid #6c86a9; border-left:4px solid #6c86a9; position:relative; padding:1.1em 1.8em 1.2em; line-height:140%;}
.card_area .cardBox .card_item .card-body .txt {margin-bottom:1.5em; font-size:1.1rem; color:#333;}
.card_area .cardBox .card_item .card-body .img {text-align:center; margin-bottom:1em; padding:0 1.8em;}
.card_area .cardBox > .list-item {padding:0.3em 0;}
.card_area .list-item > ul {overflow:hidden; clear:both;}
.card_area .list-item > ul > li {float:left; display:table; width:33.3%; padding:0.3em 0.3em; text-align:center; height:130px;}
.card_area .list-item > ul > li > a {display:table-cell; width:100%; vertical-align:middle; color:#333; border:1px solid #dfe3e6; padding:2em 0 1.9em; font-size:0.9rem; letter-spacing:-0.6px; height:120px;}
.card_area .list-item > ul > li.on > a {color:#4690ef; border:1px solid #4591ef; font-weight:bold;}
.card_area .list-more {padding:1em 0.5em 1.2em; text-align:right; position:relative; top:7px;}

.btnCardLeft {position:absolute; top:55%; left:0; /* left:6.2%; margin-top:-5px; */ width:50px; height:50px; background:url(/allso/img/HI1/ico_arrow_left_circle.png) no-repeat 0 0; background-size:50px auto; cursor:pointer;}
.btnCardRight {position:absolute; top:55%; right:0; /* right:6.2%; margin-top:-5px; */ width:50px; height:50px; background:url(/allso/img/HI1/ico_arrow_right_circle.png) no-repeat 0 0; background-size:50px auto; cursor:pointer;}


/* layer */
.layer_area {letter-spacing:-1px; position:relative; height:100%; overflow:hidden;}
.layer_area .layerHead {width:100%; height:94px; /* padding-top:calc(319/1078*100%); */ background:url(/allso/img/HI1/bg_layer_head.jpg) no-repeat 0 0; background-size:100% auto; position:relative;}
.layer_area .layerHead .head_title > img {width:17%;}
.layer_area .layerBody .listWrap {height:100%; overflow-y:auto;}
.layer_area .layerBody .listWrap > ul {overflow:hidden; clear:both;}

.layer_area .middle .layerHead .head_title {position:absolute; bottom:13px; left:16px;}
.layer_area .middle .layerHead .head_title > span {color:#fff; font-size:1.05rem; font-weight:bold; position:relative; top:-5px; padding-left:0.3em;}
.layer_area .middle .layerBody .tabWrap > ul {overflow:hidden; clear:both; border-top:1px solid #296bc2; border-left:1px solid #296bc2;}
.layer_area .middle .layerBody .tabWrap > ul > li {float:left; text-align:center; font-size:0.9rem; color:#fff; background-color:#4690f1; border-right:1px solid #296bc2; padding:1.4em 0 1.4em; position:relative;}
.layer_area .middle .layerBody .tabWrap > ul.col4 > li {width:20%; height:60px;}
.layer_area .middle .layerBody .tabWrap > ul.col4 > li:nth-child(2) {padding:1.0em 0 1.3em;}
.layer_area .middle .layerBody .tabWrap > ul.col4 > li:nth-child(3) {padding:1.0em 0 1.3em;}
.layer_area .middle .layerBody .tabWrap > ul > li.on {background-color:#3277d2;}
.layer_area .middle .layerBody .tabWrap > ul > li.on:after {content:""; width:10px; height:6px; position:absolute; bottom:0; left:50%; margin-left:-5px; background:url(/allso/img/ico_arrow_up_white.png) no-repeat 0 0; background-size:10px auto;}
.layer_area .middle .layerBody .listWrap > ul > li {border-bottom:1px solid #dfe3e6; padding:1.1em 1em 1em;}
.layer_area .middle .layerBody .listWrap > ul > li > a {display:block; font-size:0.85rem; color:#333;}

.layer_area .high .layerHead .head_title > img {position:absolute; bottom:13px; right:16px;}
.layer_area .high .layerHead .head_title > span {position:absolute; left:16px; bottom:18px; opacity:0.9;}
.layer_area .high .layerHead .head_title > span > a {color:#fff; font-size:0.9rem;}
.layer_area .high .layerHead .head_title > span > a.on {font-size:1.05rem; font-weight:bold; background:url(/allso/img/HI1/ico_check_white.png) no-repeat 0 62%; background-size:20px auto; padding-left:1.4em;}
.layer_area .high .layerHead .head_title > span > a:first-child:after {content:""; display:inline-block; width:1px; height:13px; background-color:#fff; opacity:0.8; margin:0 0.3em 0 0.7em;}
.layer_area .high .layerBody .listWrap {padding:0.7em 0.5em;}
.layer_area .high .layerBody .listWrap > ul > li {float:left; padding:0.3em 0.3em;}
.layer_area .high .layerBody .listWrap > ul.col3 > li {width:33.3%;}
.layer_area .high .layerBody .listWrap > ul > li > a {display:block; height:90px; font-size:0.8rem; color:#333; border:1px solid #dfe3e6; padding:0.6em 0.8em; line-height:150%;}
.layer_area .high .layerBody .listWrap > ul > li.on > a {border:1px solid #4690f1; color:#4690ef;}



/** common **/
.titleBar {/* position:relative; */ position:fixed; width:100%; top:0; right:0; left:0;}
.titleBar .top-bar {background-color:#4690f1; border-bottom:1px solid #3173c7; color:#fff; font-size:0.93rem; font-weight:bold; padding:1em 1em 0.8em; letter-spacing:-0.8px;}
.titleBar .bot-bar {background-color:#e9edf0; border-bottom:1px solid #ccd1d5; color:#333; font-size:0.9rem; padding:1em 1em 0.8em; line-height:140%; letter-spacing:-1px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}


.footer {background-color:#e9ecef; text-align:center; padding:1em 0; margin-top:2em;}
.footer > img {width:70%;}


/* fix btn - list */
.fixBtns {position:fixed; right:0; bottom:2%; left:0;}
.fixBtns .btnReturn {position:absolute; bottom:0; left:4%; width:36px; height:36px; background:url(/allso/img/ico_arrow_return_gray.png) no-repeat 0 0; background-size:36px auto;}
.fixBtns .btnTop {position:absolute; right:4%; bottom:0; width:36px; height:36px; background:url(/allso/img/ico_arrow_top_gray.png) no-repeat 0 0; background-size:36px auto;}


/* fix btn - view, quiz */
.fixLayerBtns {position:fixed; right:0; bottom:0; left:0; background-color:#fafafa; border-top:4px solid #458ff0;}
.fixLayerBtns .corner {position:absolute; top:-22px; left:50%; margin-left:-30px; width:60px; height:20px; background:url(/allso/img/HI1/ico_arrow_up_blueBox.png) no-repeat 0 0; background-size:60px auto; cursor:pointer;}
.fixLayerBtns.on .corner {background:url(/allso/img/HI1/ico_arrow_down_blueBox.png) no-repeat 0 0; background-size:60px auto;}
.fixLayerBtns .btnArea {overflow:hidden; clear:both; padding:0.8em 0.9em 0.8em;}
.fixLayerBtns .btnArea > div {float:left; width:50%; padding:0 0.2em; text-align:center;}
.fixLayerBtns .btnArea > div > a {display:block; border:1px solid #cecece; border-radius:3px; color:#333; font-size:0.9rem; font-weight:bold; letter-spacing:-0.8px; padding:0.8em 0 0.7em;}
.fixLayerBtns .btnArea .btnBlank.on {background-color:#aad0f4; color:#fff;}


/* dl */
dl {text-align:left; margin:0 0 1em;}
dl > dt {padding-left:10px; font-size:0.95rem; font-weight:bold; color:#161015; margin-bottom:0.4em; line-height:140%;}
dl > dd {padding-left:17px; margin:0; font-size:0.82rem; color:#474543;}
dl > dd > p {line-height:180%;}


/* table */
table {margin:0.8em 0;}
table caption {display:none;}
table.tbl-sty {width:100%;}
table.tbl-sty > thead > tr > th {text-align:center; font-size:0.8rem; color:#e6fcfb; background-color:#8fc5c4; padding:0.65em 0 0.5em;}
table.tbl-sty > thead > tr > th:nth-child(1) {border-right:1px solid #636d6c;}
table.tbl-sty > tbody > tr > td {font-size:0.8rem; color:#464844; border-top:1px solid #636d6c; padding:0.65em 0.8em 0.5em; line-height:160%;}
table.tbl-sty > tbody > tr > td:nth-child(1) {border-right:1px solid #636d6c;}

table.tbl-sty2 > tbody > tr > th, table.tbl-sty2 > tbody > tr > td {vertical-align:middle; line-height:160%;}
table.tbl-sty2 > tbody > tr > th {text-align:center; font-size:0.8rem; color:#e6fcfb; background-color:#8fc5c4; padding:0.65em 0.5em 0.5em; border-right:1px solid #636d6c; border-bottom:1px solid #636d6c;}
table.tbl-sty2 > tbody > tr > td {font-size:0.8rem; color:#464844; padding:0.65em 0.8em 0.5em; border-bottom:1px solid #636d6c;}
table.tbl-sty2 > tbody > tr:last-child > th, table.tbl-sty2 > tbody > tr:last-child > td {border-bottom:none;}


/* btn */
a.btn-sty {display:block; text-align:center;}
a.btn-sty2 {display:inline-block;}
a.bold {font-weight:bold;}
a.blue {background-color:#4590f0; border:1px solid #3274c9; color:#fff;}
a.blue2 {color:#3b81dc; text-decoration:underline;}
a.blue3 {background-color:#4590f0; border:1px solid #4590f0; color:#fff; font-weight:bold; border-radius:10px; width:80px; height:40px; line-height:40px;}
a.white {background-color:#fff; border:1px solid #cecece; color:#222;}
a.radius {border-radius:3px;}
a.arrow {background:url(/allso/img/HI1/ico_arrow_right_blue.png) no-repeat right 50%; background-size:6px auto; padding-right:0.8em;}
a.btnStart {display:inline-block; background-color:#4590f0; border:1px solid #4590f0; border-radius:10px; color:#fff; font-size:1.2rem; font-weight:bold; padding:0.8em 2.8em 0.8em;}
a.btnMore {display:inline-block; font-size:0.78rem; color:#333; border:1px solid #333; border-radius:3px; padding:0.5em 1.4em 0.4em 0.6em; letter-spacing:-0.8px; background:url(/allso/img/HI1/ico_plus_black.png) no-repeat 88% 50%; background-size:8px auto;}
a.btnList {display:inline-block; font-size:0.78rem; color:#333; border:1px solid #333; border-radius:3px; padding:0.6em 1.7em 0.3em 0.6em; letter-spacing:-1px; background:url(/allso/img/HI1/ico_rect_black.png) no-repeat 90% 50%; background-size:11px auto;}

a.btnBlank {color:#000; text-decoration:none; font-size:1.3em; font-weight:bold; border:1px solid #999; padding:0.4em 1em 0.3em;}
a.btnBlank.on {color:#ccc; font-weight:bold; border:1px dashed #cecece;}
span.blank {color:#333; font-weight:bold; background:transparent; /* border:1px solid #fff; */ cursor:pointer;}
span.blank.on {color:#aad0f4; background-color:#aad0f4; /* border:1px solid #aad0f4; */}

.btnClose {position:absolute; background:url(/allso/img/ico_close_white.png) no-repeat 50% 50%; z-index:10; cursor:pointer;}

.layer_area .btnClose {width:20px; height:20px; top:12px; right:12px; background-size:20px auto;}
.titleBar .btnClose {width:25px; height:25px; top:7px; right:7px; background-size:18px auto;}


/* icon */
i.ico-play {width:23px; height:100%; background:url(/allso/img/HI1/ico_play_blue.png) no-repeat 0 50%; background-size:23px auto; position:absolute; top:0; left:0; right:0; bottom:0; margin:0 auto; z-index:2;}
i.ico-great {background:url(/allso/img/ico_quiz_result_great.jpg) no-repeat 50% 50%;}
i.ico-good {background:url(/allso/img/ico_quiz_result_good.jpg) no-repeat 50% 50%;}
i.ico-oops {background:url(/allso/img/ico_quiz_result_oops.jpg) no-repeat 50% 50%;}
i.ico-ohno {background:url(/allso/img/ico_quiz_result_ohno.jpg) no-repeat 50% 50%;}
i.ico-clock {display:inline-block; width:100%; height:28px; background:url(/allso/img/ico_clock_default.png) no-repeat 80% 50%; background-size:25px auto;}
i.ico-clock.on {background:url(/allso/img/ico_clock_active.gif) no-repeat 80% 50%; background-size:25px auto;}


.popup {position:fixed; top:0; right:0; bottom:0; left:0; background:url(/allso/img/bg_black80.png) repeat 0 0; z-index:200;}
.popup .pop {position:fixed; top:50%; right:0; left:0; background-color:#fff; margin:-20px 2em 0; letter-spacing:-1px;}
.popup .pop.quiz_quit {top:20%; padding:2.2em 0 2.1em; border-radius:3px;}
.popup .pop.quiz_quit i.icon {display:block; width:100%; height:0; padding-top:calc(454/303*82px); background:url(/allso/img/ico_quiz_character.png) no-repeat 50% 50%; background-size:82px auto; margin-bottom:1em;}
.popup .pop .msg {margin-bottom:1.4em; font-size:0.95rem; font-weight:bold; line-height:140%; text-align:center;}
.popup .pop .msg p {color:#333;}
.popup .pop .msg p.blue {color:#4590f0;}
.popup .pop .btn {padding:0 2.4em;}
.popup .pop .btn > a {margin-bottom:0.9em; padding:1em 0 0.9em; font-size:0.9rem;}
.popup .pop .btn > a:last-child {margin-bottom:0;}


/* @media only screen and (min-height:0px) and (max-height:400px) {
} */
@media only screen and (min-height:0px) and (max-height:500px) {
	.main_area .mainTitle {padding:1.5em 0 0 1.5em;}
	.main_area .mainTitle .tit > img {width:42%;}
	.main_area .mainTitle .tit > span {top:5px; left:36px;}
	.main_area .mainVisual {margin-bottom:0; padding-top:15%;}
	.main_area .mainVisual .rollingBanner .nav {position:absolute; top:25%; left:9%;}
	.main_area .mainBtns > ul > li > div {height:90px;}
	
	.quiz_area .quizTit {padding-top:1.2em; margin-bottom:1.5em;}
	.quiz_area .quizInfo {margin-bottom:1.6em;}
	.quiz_area .quizInfo i.icon {padding-top:calc(454/303*85px); background-size:85px auto; margin-bottom:1.5em;}
	.quiz_area .quizBtn .btnStart {font-size:1rem;}
	
	.quiz_area .quiz-view .question {height:46%;}
	.quiz_area .quiz-view .answer > div {height:48px; line-height:48px; font-size:0.9rem; margin-bottom:1em;}
	
	.quiz_area .quiz-result .rst-msg {padding-top:1.5em; margin-bottom:1.2em;}
	.quiz_area .quiz-result .rst-msg > i {padding-top:calc(358/628*160px); background-size:160px auto; margin-bottom:0.6em;}
	.quiz_area .quiz-result .rst-note {margin-bottom:1em;}
	
	.popup .pop.quiz_quit {top:15%;}
}
@media only screen and (min-height:501px) and (max-height:600px) {
	.main_area .mainTitle {padding:1.6em 0 0 1.6em;}
	.main_area .mainTitle .tit > img {width:45%;}
	.main_area .mainTitle .tit > span {top:8px; left:38px;}
	.main_area .mainVisual {margin-bottom:1.0em; padding-top:20%;}
	.main_area .mainVisual .rollingBanner .nav {position:absolute; top:25%; left:9%;}
	.main_area .mainBtns > ul > li > div {height:95px;}
	
	.quiz_area .quizTit {padding-top:2em; margin-bottom:2em;}
	.quiz_area .quizInfo {margin-bottom:2em;}
	.quiz_area .quizInfo i.icon {padding-top:calc(454/303*90px); background-size:90px auto; margin-bottom:2.5em;}
	
	.quiz_area .quiz-result .rst-msg {padding-top:2em; margin-bottom:2.4em;}
	.quiz_area .quiz-result .rst-msg > i {padding-top:calc(358/628*200px); background-size:200px auto; margin-bottom:1.3em;}
	
}
@media only screen and (min-height:601px) and (max-height:700px) {
	.main_area .mainTitle {padding:1.8em 0 0 1.8em;}
	.main_area .mainTitle .tit > img {width:50%;}
	.main_area .mainTitle .tit > span {top:8px; left:43px;}
	.main_area .mainVisual {margin-bottom:1.5em; padding-top:22%;}
	.main_area .mainVisual .rollingBanner .nav {position:absolute; top:26%; left:9%;}
	.main_area .mainBtns > ul > li > div {height:100px;}
	
	.quiz_area .quizTit {padding-top:2.8em; margin-bottom:2.5em;}
	.quiz_area .quizInfo {font-size:0.9rem; margin-bottom:2.3em;}
	.quiz_area .quizInfo i.icon {padding-top:calc(454/303*100px); background-size:100px auto; margin-bottom:3em;}
	
	.quiz_area .quiz-view .question .que_bot {font-size:1.1rem;}
	.quiz_area .quiz-view .answer > div {height:56px; line-height:56px; font-size:1rem; margin-bottom:1.4em;}
	
	.quiz_area .quiz-result .rst-msg {padding-top:2.8em; margin-bottom:3em;}
	.quiz_area .quiz-result .rst-msg > i {padding-top:calc(358/628*250px); background-size:250px auto; margin-bottom:1.5em;}
	.quiz_area .quiz-result .rst-note > div {font-size:0.95rem;}
}
@media only screen and (min-height:701px) and (max-height:1000px) {
	.main_area .mainTitle {padding:1.8em 0 0 1.8em;}
	.main_area .mainTitle .tit > img {width:60%;}
	.main_area .mainTitle .tit > span {top:17px; left:53px;}
	.main_area .mainVisual {margin-bottom:1.8em; padding-top:22%;}
	.main_area .mainVisual .rollingBanner .nav {position:absolute; top:28%; left:9%;}
	.main_area .mainBtns > ul > li > div {height:105px;}
	
	.quiz_area .quizTit {padding-top:3.3em; margin-bottom:3.5em;}
	.quiz_area .quizInfo {font-size:0.98rem; margin-bottom:2.5em;}
	.quiz_area .quizInfo i.icon {padding-top:calc(454/303*110px); background-size:110px auto; margin-bottom:3.3em;}
	
	.quiz_area .quiz-view .question .que_bot {font-size:1.1rem;}
	.quiz_area .quiz-view .answer > div {height:56px; line-height:56px; font-size:1rem; margin-bottom:1.4em;}
	
	.quiz_area .quiz-result .rst-msg {padding-top:3em; margin-bottom:4em;}
	.quiz_area .quiz-result .rst-msg > i {padding-top:calc(358/628*280px); background-size:280px auto; margin-bottom:1.5em;}
	.quiz_area .quiz-result .rst-note > div {font-size:0.98rem;}
	
	.layer_area .layerHead {height:122px;}
}
@media only screen and (min-height:1001px) and (max-height:1100px) {
	.main_area .mainTitle {padding:1.8em 0 0 1.8em;}
	.main_area .mainTitle .tit > img {width:80%;}
	.main_area .mainTitle .tit > span {top:20px; left:70px;}
	.main_area .mainVisual {margin-bottom:2em; padding-top:10%;}
	.main_area .mainVisual .rollingBanner .nav {position:absolute; top:28%; left:9%;}
	.main_area .mainBtns > ul > li > div {height:110px;}
	
	.quiz_area .quizTit {padding-top:5.5em; margin-bottom:4em;}
	.quiz_area .quizTit > img {width:60%;}
	.quiz_area .quizInfo {font-size:1.3rem; margin-bottom:3em;}
	.quiz_area .quizInfo i.icon {padding-top:calc(454/303*120px); background-size:120px auto; margin-bottom:3.3em;}
	.quiz_area .quizBtn .btnStart {font-size:1.6rem;}
	
	.quiz_area .quiz-view .question .que_bot {font-size:1.1rem;}
	.quiz_area .quiz-view .answer > div {height:56px; line-height:56px; font-size:1rem; margin-bottom:1.4em;}
	
	.quiz_area .quiz-result .rst-msg {padding-top:3.3em; margin-bottom:3.5em;}
	.quiz_area .quiz-result .rst-msg > i {padding-top:calc(358/628*300px); background-size:300px auto; margin-bottom:1.6em;}
	.quiz_area .quiz-result .rst-note > div {font-size:1rem;}
	
	.layer_area .layerHead {height:200px;}
	.layer_area .layerHead .head_title > img {width:16%;}
}
@media only screen and (min-height:1101px) and (max-height:3000px) {
	.main_area .mainTitle {padding:1.8em 0 0 1.8em;}
	.main_area .mainTitle .tit > img {width:80%;}
	.main_area .mainTitle .tit > span {top:20px; left:70px;}
	.main_area .mainVisual {margin-bottom:2em; padding-top:10%;}
	.main_area .mainVisual .rollingBanner .nav {position:absolute; top:28%; left:9%;}
	.main_area .mainBtns > ul > li > div {height:115px;}
	
	.quiz_area .quizTit {padding-top:9.8em; margin-bottom:5em;}
	.quiz_area .quizTit > img {width:60%;}
	.quiz_area .quizInfo {font-size:2rem; margin-bottom:3.2em;}
	.quiz_area .quizInfo i.icon {padding-top:calc(454/303*150px); background-size:150px auto; margin-bottom:3.5em;}
	.quiz_area .quizBtn .btnStart {font-size:2.2rem;}
	
	.quiz_area .quiz-view .question .que_bot {font-size:1.1rem;}
	.quiz_area .quiz-view .answer > div {height:56px; line-height:56px; font-size:1rem; margin-bottom:1.4em;}
	
	.quiz_area .quiz-result .rst-msg {padding-top:3.3em; margin-bottom:3.5em;}
	.quiz_area .quiz-result .rst-msg > i {padding-top:calc(358/628*300px); background-size:300px auto; margin-bottom:1.6em;}
	.quiz_area .quiz-result .rst-note > div {font-size:1rem;}
	
	.layer_area .layerHead {height:200px;}
	.layer_area .layerHead .head_title > img {width:12%;}
}