body{ color:#333}
a{color:#005599;}
a:hover{color:#3792FF;}

.move{transition:all .3s ease-out;-moz-transition:all .3s ease-out;-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;}
.bgmove{transition:background .3s ease-out;	-moz-transition:background .3s ease-out; -webkit-transition:background .3s ease-out; -o-transition:background .3s ease-out; -ms-transition:background .3s ease-out;}
img{height:auto}
.lb-box a.bc,.rec-box .bc,.a-bbox .bc,.box-title:before,.box-title:after,.l-two:before,.l-two:after,.l-three:before,.l-three:after,div.timec,.per-info-out a,.exebar ul,.exebar > a,.exename ol li:after,.exename ol li:before,.exelm li span, .del,.c-push input[type="text"],.ans-corner,.step-select ul,.mtbox .ibr,.mtbox .bc,.pro-sel:before,.pro-sel:after,.p-complete,.p-complete:before,.large-ad p:before,.f-course:before,.f-play-c:before,.a-point,.b-point,.course-box .bc,.courselist img,.life-bar span,.life-bar span:after,.c-tag li:before,.c-tag li:after,.fblike,.step-select .fa,.exename img, .a-bboxs img,.rec-main,.a-bbox .fa,.exebar li span,.exebar .sel span{ position:absolute}
.i-main:after,.exe-out:after,.course:after,.box-title:before,.box-title:after,.l-two:before,.l-two:after,.l-three:before,.l-three:after,.exename ol li:after,.exename ol li:before,.lb-box:after,.pro-sel:before,.pro-sel:after,.p-complete:before,.large-ad p:before,.f-course:before,.f-play-c:before,.life-bar span:after,.c-tag li:before,.c-tag li:after{content:"";}


a.bc, .bc, a.bb, .bb, .ibr{ text-align:center; padding: 10px; display:inline-block;}
.bb{ display:inline}
a.bc, .bc{background:#FFE628; color:#000; border:0;}
a.bc:hover, .bc:hover{background:#FFD428;}
a.bb, .bb{background: #F5F5F5; color:#333; border: 1px solid #B6B6B6;}
a.bb:hover, .bb:hover{background:#FFF;}
.del{background-position:0 -188px; background-color:transparent; border:none;}
.del:hover{background-position:-21px -188px;}
.ibr{background:#ff3019; color:#fff; border:0;}
.ibr:hover{background:#e02716;}
.bh{ margin-top: 10px}
.i-main-top-ad{ width: 980px; margin:0 auto;}
.i-main{ width: 1170px; margin:16px auto;}
.i-main.ad-bg-top{ min-height:120px; }
.i-main:after,.exe-out:after,.course:after{display:block; clear:both}
.lb-box div h2,.mtbox span,.single-lesson a,.l-one h1,.l-two h2,.l-three li,.user-inf p,.exebar h1,.exelm a,.rec-box h1,.int .rec-box h1,.cou-box-r h2, .personal-info p,.int .rec-r li,.cl-in-t h1,.step-select a,.r-material h2, .ans-w .user-inf h2,.reference-inf h3{white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}
.lb-box a.bc,.rec-box .bc,.a-bbox .bc{ padding: 6px 10px; right: 15px; bottom: 15px;}
.rec-box .bc{ bottom: 15px; right: 15px;}
.a-bbox .bc{bottom:initial;top:50%;margin:-13px 0 0 0;}
/*----------廣告背景----------*/
.ad-block {display: flex;align-items: center;justify-content: center;}
.ad-img {background-repeat: no-repeat;background-position: center;}
.ad-img-top {background-image: url(http://fsv.cmoney.tw/cmstatic/image/ad/bg-airplane.svg); min-height: 87px;}
.ad-img-side {background-image: url(http://fsv.cmoney.tw/cmstatic/image/ad/bg-hot-air-balloon.svg); min-height: 180px;}
.ad-bg-top {background-color: #F1F1F1;}
.ad-bg-side {background-color: #F4F4F4;}
.ad-absolute {position: absolute;bottom: 0;width: 100%;}

/*----------廣告背景----------*/
/*------------表單------------*/
.b-step input[type="radio"]{margin:0 4px 0 0;}
.b-step input[type="text"],.q-down input[type="text"],.pbox-t input[type="text"],textarea, .b-stap__input{padding:7px 6px 5px 9px; background-color:#FFFFFF; border:1px solid #b3b3b3; border-radius:5px; box-shadow: inset 2px 2px 4px #F1F1F1; resize:none;font-size:15px; line-height:22px; color:#686868; box-sizing:border-box}
.b-step input[type="text"]:hover{}
.b-step input[type="text"]:focus,.q-down input[type="text"]:focus,.pbox-t input[type="text"]:focus,textarea:focus{
	border-collapse:collapse;
	/*box-shadow:inset 3px 3px 2px #E2E2E2;*/
	border-color:#60ABFF
}
input[type="button"]{cursor:pointer;-webkit-appearance:none;}
/*------------表單------------*/
/*------------圖示------------*/
.exelm li span,.del,.r-material .user-inf div:before,.f-course:before,.f-play-c:before,.search-btn{background-image:url(../images/l-icon.png); background-repeat:no-repeat}
/*------------圖示------------*/
.search-btn{text-indent:-9999px;width:29px;height:30px;background-position:-7px -487px;top:1px;background-color:#fff;}
.m-left{width:69%; float:left;} 
.m-right{margin:0 0 0 70.4%;}
.m-left .ad-300x250, .idx.ad-300x250{ display: none;}
.box-title{ line-height: 40px; padding-left: 25px; font-size:20px; border-bottom: 6px solid #007FCA; margin-bottom: 15px;}
.box-title:before{width:16px; height:16px; border: 2px solid #007FCA; left:0; border-radius:13px; top: 9px;}
.box-title:after{width:0; height:0; border:5px solid transparent; border-left: 5px solid #007FCA; left:8px; top: 14px;}
.single-lesson, .personal-info, .exebar, .lb-box div, .ans-next, .class-info, .rec-box, .user-inf, .a-bbox, .editdata td, .editdata th, .exename img,
.c-content-out, .topic-qa, .b-step, .tb-out{border:1px solid #C5C5C5}
hr{height:0px; border:0px; border-top:1px solid #C7C7C7;}
.single-lesson{border-top:none}
/*------------底部高度------------*/
.learning-map, .learn-standings, .learn-what, .completion, .personal-info, .r-material, .large-ad, .class-info, .rec, .my-record, .interested, .courselist, .course-out, .search-results, .all-badges{ margin-bottom: 15px}
/*------------底部高度------------*/
.personal-info li span,.cl-in-t li span{color:#C00; margin:0 5px}
.fa{margin-right:4px; }
.single-lesson li,.l-three{border-top:1px solid #b3b3b3;}
.l-one h1{background:#f3f3f3; font-size:24px; height:70px; line-height:70px; padding: 0 140px 0 40px; cursor: pointer;}
.l-two h2{font-size:20px; line-height:53px; height:53px;padding: 0 150px 0 110px;cursor: pointer;}
.l-three li{font-size:15px; border-top:none; padding:11px 160px 11px 186px; cursor:pointer;}
.l-two{ /*background:url(../images/box-sd.png) no-repeat -110px -42px;*/}
.l-one h1:hover,.l-two h2:hover,.l-three li:hover,.user-inf:hover,.lb-box div:hover,.exelm a:hover,.exebar li a:hover,.bas-tb tr:hover,.bas-tb tr:nth-child(odd):hover,.rec-box:hover,.courselist li:hover,.a-bbox:hover{background-color:#FFFCEC;}
h1.last-visit,h2.last-visit,h1.last-visit:hover,h2.last-visit:hover,li.last-visit,li.last-visit:hover{background: #FFE628;}
.last-visit + ul:before,.last-visit + ul:before{border-top:10px solid #FFEA4D;}
.l-one h1.last-visit:hover + ul:before,.l-two h2.last-visit:hover + ul:before{border-top:10px solid #f9d80b;}
li.chb,h1.chb,h2.chb{background:#FFD428;}
.course-box:hover{background:#FFFCEC; cursor:pointer}
.l-two:before,.l-two:after{border:10px solid transparent;border-top:10px solid #f3f3f3;top:-1px; left:28px; width:0; z-index:2}
.l-two:after{border:10px solid transparent;border-top:10px solid #b3b3b3;top:0; z-index:1;}
.l-three:before,.l-three:after{border:10px solid transparent;border-top:10px solid #FFFFFF;top:-1px; left:70px; width:0; z-index:2}
.l-three:after{border:10px solid transparent;border-top:10px solid #b3b3b3;top:0; z-index:1;}
.l-one h1:hover + ul:before{border-top:10px solid #FFFCEC}
.l-two h2:hover + ul:before{border-top:10px solid #FFFCEC}

.fb-container {
    position: relative;
    height: 200px;
    overflow: hidden;
}
.fb-container-show {
    height: auto !important;
}

.name-box .fb-comments span{ width: 100%!important;}
.name-box .fb-comment__more {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    z-index: 1;
}

.fb-comment__more .btn {
    padding: 3px 12px;
    margin-bottom: .5em;
}

.user-inf{ padding: 15px; background:#fff; border-left: 0; border-right: 0; margin: -1px 0 0; overflow: hidden;}
.user-inf img{ width: 60px; margin-right: 15px; border-radius:50%; height:60px; float: left;}
.user-inf div{}
.user-inf p{line-height:19px; font-size:13px;}
.user-inf p span,.sea-w span,.sea-n span,.sea-n span,.sea-n .fa,.a-bbox div span,.a-bboxs div span,.rec-r li span,.ans-w p,.ans-w p .fa,.settling-t span{color:#C00}
.user-inf p:first-child{font-size:15px;}
.user-inf .fa{font-size:17px; margin-right:9px;}
div.timec{font-size:13px; height:0; right:8px; top:56px;}
div.timec span{color:#C00}
.outline-info {
	display: flex;
}
.class-info{
	display: flex;
	flex-direction: column;
	min-height: 350px;
	padding: 15px;
	box-sizing: border-box;
}
.class-info .clc {
	flex: 1;
}
.class-info .img-inner {
	width: 225px;
	height: 135px;
	margin-right: 15px;
}

.cl-in-t {
	min-height: 170px;
}
.cl-in-t > div{}
.cl-in-t h1{
	font-size:36px;
	margin-right: 50px;
	margin-bottom:7px;
	min-height: 48px;
}
.clc{ line-height: 1.8em; margin-bottom: 15px;}
.clc + .bc {
	width: 360px;
	height: 30px;
}
.class-info .bc{ font-size: 22px; margin: 0 auto; display: block;}
.cl-in-t ul {
	min-height: 60px;
}
.cl-in-t .fa{margin-right:8px}
.cl-in-t li{font-size:13px;min-height: 20px;}
.cl-in-t li i{width:5px; height:13px;}
.personal-info{ padding: 15px; overflow: hidden;}
.personal-info > img{ float: left; width:142px; height:142px;}
.per-info-out{ margin: 0 0 0 160px; height: 142px;}
.per-info-out a{ right: 0; bottom: 0;}
.personal-info p,.personal-info li{margin-bottom: 8px;}
.personal-info p{font-size:30px;padding: 2px 0;}
.p-rate span{display:inline-block; text-indent:-9999px; width:18px; top:3px; height:6px; background:#DFDFDF; pointer-events:none; box-shadow:1px 1px 1px #747474 inset;}
.p-rate{display:none;}
span.do-f{background: #FFC200;}
.exebar, .pop-ups, .pop-upb, .ans-next,.exename{background:#fff}	
.exebar{border-top: 6px solid #007FCA; height:62px;}
.exebar h1{font-size: 25px;margin: 19px 0 0 10px;width: 250px;}
.exebar ul{left:259px; top:30px;height:33px;}
.exebar li{margin-right:-1px;float:left;border:1px solid #C7C7C7;background:#F7F7F7;}
.exebar li a{display:block; padding:0 38px; text-align:center; top:0; right:0; color:#333; text-decoration:none;line-height:31px;height:31px;}
.exebar .sel a:hover{background:#fff}
.exebar li span{border: 6px solid transparent; border-top: 6px solid #bfbfbf; border-left: 6px solid #bfbfbf; top:0;  width:0; height:0; z-index:1; float:left; pointer-events:none;}
.exebar > a{right:14px;top:16px;padding:5px 8px;}
.exebar .sel{top:-9px;  border-bottom:1px solid #FFF; background:#fff; padding-top:5px;height:35px;}
.exebar .sel span{border: 10px solid transparent;border-top: 10px solid #007FCA; border-left:10px solid #007FCA;}
.exeout .m-left{ width:260px; float:left; margin-top: -1px;}
.exeout .m-right{margin-left: 259px;}
.exename{ border: 1px solid #c7c7c7; border-top: 6px solid #007FCA; padding: 15px; min-height: 90px;}
.exename img{ width:145px; height:85px; margin-left: 40px; cursor:pointer;}
.exename ul{ display: inline-block;}
.exename .class-infor-right{}
.exename .class-infor-right li, .exename .class-infor-left li{
	height: 20px
}
.exename .class-infor-left{ display: flex; }
.exename ul li{ margin-right: 10px}
.exename ol{margin:0 0 10px 0; display: none;}
.exename ol li{display:inline-block; margin:5px 49px 0 0;}
.exename ol li:after,.exename ol li:before{border:8px solid transparent;border-left:8px solid #FFFFFF;top:1px;right:-39px;}
.exename ol li:last-child:after,.exename ol li:last-child::before{ display:none}
.exename ol li:before{border-left:8px solid #A3A3A3;right:-40px;}
.exename h1{ font-size: 28px; line-height:1.3; margin-bottom: .667em;}
.exename h2,.exename h3,.exename h4{font-size: 19px;}
.exename div{ margin-left: 250px;}
li a.addnew-q{padding:0 15px; background:#FFE734;}
li a.addnew-q:hover{background:#FFD733;}
.exelm{ margin:0 0 20px 0;}
.exelm li{ border: 1px solid #c7c7c7; margin-bottom: -1px;}
.exelm a{ height:43px; display:block; color:#AAAAAA; text-decoration:none; line-height:41px; text-indent:40px;}
.exelm li span{width:17px; height:17px; top:13px; left:12px; z-index:1; pointer-events:none; background-position:-36px -93px;}
.exelm li span.do-k{background-position:-59px -84px; height:26px; width:25px; top:4px;}
/*span.do-k + a{color:#000}*/
.exelm a.do {color:#000 }
.exelm .sel a{background:#007CC5; z-index:1; color:#fff;}
.r-material .user-inf{}
.r-material .user-inf div,.ans-w .user-inf div{}
.r-material p,.ans-w .user-inf p{font-size:15px; display:inline-block;}
.r-material h2,.ans-w .user-inf h2{font-size:16px;padding: 0 142px 0 0;}
.r-material p span{color:#C00}
/*.r-material p{background-position:-56px -164px; right:8px; height:30px; padding-left:34px; top:0;}*/
.reference {height:305px;}
ul.reference-inf { overflow:hidden;}
.reference-inf li:nth-child(3n) { margin-right: 0;}
.reference-inf li { float: left; margin-right: 15px; width: 291px; margin-bottom: 15px; border:1px #CCC solid;}
.reference-inf li > a { display: block; height: 156px; overflow: hidden;}
.reference-inf li > a img { transition: all .5s ease-in-out; width: 100%;}
.reference-inf h3 { font-size: 15px; line-height: 1.4;overflow: hidden; margin: 10px;}
.reference-inf p { font-size: 15px; display:block; position: relative; text-align:right; margin: 10px;}
.c-content-out,.topic-qa,.b-step,.tb-out{border-top:none; margin:0 0 20px 0; padding: 15px;}
.c-content-out .sb-out .bc{}
.c-content table { width: 100%!important;}

/*===  修改內容頁樣式，請同步ckeditor樣式，位置：/learn/style/ckeditorcontent.css ====*/
.c-content{ word-break:break-all; min-height:400px; line-height: 1.7;}
.c-content iframe{ width:100%;}
.c-content p{ margin-bottom: .5em;}
.c-content img{ max-width:100%; height:auto!important; margin:10px 0;cursor: pointer;}
.c-content a{ text-decoration:underline; margin:0!important;}
.c-content h1, .c-content h2, .c-content h3, .c-content h4 { margin-bottom: .5em; }
.c-content h2, .c-content h3 { margin-bottom: .5rem; line-height: 2.067rem; }
.c-content h2 { font-size: 1.467rem; }
.c-content h3 { padding-left: 1rem; font-size: 1.267rem; border-left: solid 3px #3D6AAF; }
.c-content h4 { font-size: 18px; border-left: medium; color: #3D6AAF; font-weight: 100; }
.c-content ul li, .c-content ol li{ line-height:1.6; margin-bottom:.2em;}
.c-content ul, .c-content ol{ margin: .2em 0 1em 1em;padding: 0;}
.c-content li{margin-left:30px; line-height:1.3;margin-bottom:.5em}
.c-content ul li{ list-style:square;}
.c-content ol li{ list-style:decimal;}
.prompt-content {font-size: 22px; line-height:1.5; font-weight:900; }
.prompt-content a {text-decoration:underline;}
.b-step{min-height:500px;}
.b-step .bb{padding: 9px 20px;}
.tb-out{padding:20px; min-height:620px;}
.topic-qa{padding:0 60px 0;}
.progress-b{ border-bottom:1px solid #C5C5C5; padding: 50px 0 25px; margin-bottom:25px;}
.progress-b p{font-size:18px;height:39px;}
.progress-b li{display:inline-block; margin-right:9px;}
.progress-b li:last-child{ margin-right:0}
.progress-b .bc,.progress-b .bb{padding: 10px 26px;}
.progress-b .bc{border:1px solid #FFE628;}
.progress-b span{font-size: 14px;margin-left: 46px;background: #dddddd;float: right;padding: 5px;top: -23px;right: -35px;cursor:pointer;}
.question{margin-top:40px; line-height:38px; font-size:23px;}
.question h1{font-size: 26px;color: #C00;font-weight: bold;line-height: 1.3;margin-bottom: .5em;}
.question h2{font-size: 22px;color: #F60;font-weight: bold;line-height: 1.5;margin-bottom: .5em;}
.question a{text-decoration: underline;}
.q-up{margin:0 0 20px;}
.q-up p, .q-down p{}
.q-up p:first-child{font-size:41px; margin-bottom:10px;display:none;}
.q-down{border-top:1px solid #b3b3b3; padding:30px 60px 45px; margin:0 -60px; background:url(../images/t-bg.png) repeat-x  bottom #e8e8e8;}
.q-down span{ font-size:15px; color:#797979; display:block;}
.q-down input[type="text"]{width: 500px;margin:0 0 0 2px;}
.q-down .bc{width:300px; font-size:18px; margin:10px 0 0 0;}
.cbox{margin:20px 0 38px; line-height:48px;}
.cbox span{display:block}
input[type=radio].m-choice{display:none;}
input[type=radio].m-choice + label.c-label{padding-left:34px; display:inline-block; line-height:28px; background-repeat:no-repeat;cursor:pointer ;font-size:23px; color: #333; height:27px;}
input[type=radio].m-choice:checked + label.c-label{background-position:0 -26px;}
label.c-label{background-image:url(../images/checkbox.png);}
table *{position:static}
.tit{font-size:22px; border-bottom:1px solid #D8D8D8; padding-bottom:10px; margin-bottom:10px;}
.tit span{font-size: 13px;}
.bn{border-bottom:none; margin-bottom:0;}
.s-tips{font-size:13px;}
.step-box{width:100%;}
.step-box td{padding:26px 0;}
.step-box input[type="text"],.step-box textarea{width:100%;}
.step-box textarea{ height:200px;}
textarea.short{ height:90px;}
.step-box label{ margin-right:19px;}
.step-box .bb{padding:9px 27px; font-size:15px;}
.step-box input[type="text"].sb-w01{width:230px;}
.step-box input[type="text"].sb-w02{margin:0 0 0 12px; width:450px;}
.cs-style{background:#0095ed;padding:11px 0;margin:-38px 0 0 126px;text-align:center;}
.sb-out .bc{font-size: 18px;width: 290px;margin-left: 20px;}
.sb-out .bc.da{font-size: 13px;width: 100px;margin-left: 46px;background: #dddddd;}
.b-step .sb-out{ margin: 0px -15px -15px;}
.sb-out{background:#F3F3F3; padding:35px 0; border-top:1px solid #C5C5C5; margin: 0 -15px -15px; text-align: center;} 
table.bas-tb,.bas-tb td,.bas-tb th{border:1px solid #b3b3b3; border-collapse:collapse;margin-bottom:10px;}
.bas-tb{text-align:center; width:100%;}
.bas-tb td,.bas-tb th{padding:8px 10px;}
.bas-tb th{padding:10px 10px; background:#ECEBEB;}
.bas-tb td:first-child,.bas-tb th:first-child{text-align:left}
.bas-tb tr:nth-child(odd){background:#FFFDF5;}
span.tps{font-size:13px; text-align:right; display:block; line-height:29px;}
.m-recommend,.choice-q-set,.blank-q-set, .c-push{margin:10px 0;}
.st-gy{border-radius:4px; padding: 12px; margin-bottom:10px; background: #F5F5F5; position:relative;}
.st-gy label{display:block;}
.m-recommend img {line-height: 30px; vertical-align: middle; height: 30px; cursor:pointer;}
.m-recommend input[type="text"].dep{width:190px; margin-right:3px;}
.m-recommend input[type="text"].ads{width:447px;}
.del{padding:0;width:15px;right:11px;top:25px;}
.choice-q-set input[type="text"]{width:610px;margin: 8px 0;}
.c-push input[type="text"]{width:416px;margin:-36px 0 0 230px;}
.blank-q-set input[type="text"]{width:588px;margin:8px 0;}
.blank-q-set span{font-size:13px; padding-left:74px;}
.pop-ups, .pop-upb, .ans-next{ margin:5px; width:340px; text-align:center;}
.altext{line-height:22px; margin:22px 0 0; text-align:left;}
.pop-ups .altext .bb{width:100px; display:inline-block;}
.pop-ups .altext .bb:last-child{width:214px; margin-left:20px;}
.ans-corner{ border:15px solid transparent; border-top:15px solid #007FCA; border-left:15px solid #007FCA; left:0; top:0;}
.ans-w, .ans-r{ padding:50px 30px;}
.ans-r p,.ans-w p,.an-box p{font-size:30px;}
.ans-r p .fa, .an-box p .fa{color: #4b9800;}
.ans-w span{display: inline-block; margin-bottom:10px;}
.ans-w .user-inf{height:40px;text-align:left;}
.ans-w .name-box{ margin-top: 20px;}
.pop-upb .bb, .pop-ups .bb{ margin:20px auto 0;}
.badge{ display: inline-block; vertical-align: top; margin-left: 10px;}
.badge img{width:50px; height:50px; margin:0 10px 7px 0;}
.step-select{width:220px;}
.step-select a{display: block;background: #F8F8F8;color: #333;height: 34px;line-height: 33px;padding: 0 15px 0 10px;border: 1px solid #B9B9B9;}
.step-select a:hover{background:#fff}
.step-select ul{border:1px solid #B9B9B9; margin:-1px 0 0 0; background:#fff; display:none; width:218px; z-index:1; max-height:231px; overflow-y: scroll;}
.step-select li{padding: 8px;}
.step-select li:hover{background: #eff5fd;}
.step-select .fa{font-size:20px; left:208px; top:20px;}
.step-select .h{ background:#FFF}
.badge div{top: -4px; font-size: 13px;}
.learn-build{ margin: 0 auto;}
.lb-box{}
.lb-box:after{display:block; clear:both;}
.lb-box div{ margin-bottom: 15px; background:#fff; padding: 15px; height: 80px;}
.lb-box div img{ margin-right: 15px; width: 128px; height: 78px; float: left;}
.lb-box div h2{ line-height: 1.5;}
.addnew{margin: 20px 0; text-align: center;}
.addnew .bc{ font-size:22px;}
.pbox-t{}
.pbox-t div{padding:0 50px; line-height:30px; text-align:left;}
.pbox-t input[type="text"]{ width: 452px; margin-bottom:15px;}
.pbox-t input[type="text"].b{ width:180px;}
.pbox-t .bb{display:block;font-size:15px;}
.pbox-t span{font-size: 24px; margin: 17px 5px 0 0; display:inline-block;}
.pbox-t hr{margin: 20px 0 37px;}
.m-together,.add-together{margin:18px -20px 0 0;}
.add-together{margin:0 -20px 0 0;}
.add-together .bb{}
.mtbox{display:inline-block; background:#fff; margin:0 14px 14px 0; width:100px; position:relative;}
.mtbox span{display:block; text-align:center; padding:6px 0;margin-top:5px;}
.mtbox .ibr,.mtbox .bc{z-index:10;padding:10px 0;width:56px;margin:35px 0 0 -28px;left:50%;display:none}
.mtbox img{width:100px;}
.add-together .mtbox .bc{margin:32px 0 0 -43px;padding:10px 0;width:86px;}
.add-together input[type="text"]{ width:364px; margin:0 7px 18px 0;}
.mtbox:hover .ibr,.mtbox:hover .bc{ display:block}
.mtbox:hover.mtbox img{opacity:0.5}
.pro-sel:before,.pro-sel:after{top:43px; z-index:10; left:50%; margin-left:-11px; border:10px solid transparent; border-bottom:10px solid #C5C5C5;}
.pro-sel:after{top:44px; border-bottom:10px solid #FFFFFF;}
.ans-next,.pop-upb{width:570px;}
.ans-next .progress-b{margin:0 auto 42px;width:500px;}
.an-box{ margin-bottom:50px;}
.an-box span{ font-size:20px; display:block; padding:18px 0;}
.p-complete{padding:6px 0 6px 6px; background:#AD0000; color:#fff; top:9px; font-size:13px; z-index:100; display:none; box-shadow:3px 3px 10px #9B9B9B; left:266px; width:240px;}
.p-complete:before{border:12px solid transparent; border-right:11px solid #AD0000; margin:-6px 0 0 -29px;}
.exelm li:hover .p-complete{display:block}
.large-ad{background:#E7E7E7; text-align:center; margin-top: -15px;}
.large-ad div{ padding-top: 230px; padding-bottom: 60px; background:url(../images/index-bg.png) no-repeat center top; width: 1170px; margin:0 auto; box-sizing: border-box; background-size: contain;}
.large-ad p{ font-size:28px; margin-bottom: 50px;}
.large-ad p:before{ border:30px solid transparent; border-top:26px solid #f9d80b; margin:42px -30px; left:50%;}
.large-ad .bc{ font-size:22px;}
.course{ margin-bottom: 15px;}
.course-box{ text-align:center; border:1px solid #c9c9c9; margin-bottom: -1px; padding:45px 0; line-height:24px;}
.course-box img{ width: 120px; height: 120px; margin-bottom:5px;}
.course-box h2{ width:240px; margin:0 auto 12px;line-height:31px;height:24px;word-wrap:break-word;word-break:normal;overflow:hidden;}
.course-box ul{ padding-top: 10px; line-height: 20px; width:246px; border-top:1px dotted #c9c9c9; margin:0 auto 10px;}
.course-box span{}
.f-course{width:16px; height:16px; border-radius:100%; display:none; border:1px solid #A6ADB6; background:#fff;}
.f-course:before{background-position:-152px -84px; width:23px; height:24px; top: -10px;left: 2px;/* border: 1px solid; */}
.f-play-c{width:16px; height: 16px;border-radius:100%; display:none; border:1px solid #C00000; text-indent:-9999px; background:#F70000;}
.f-play-c:hover{background:#000; border:1px solid #000;}
.f-play-c:before{background-position: -117px -93px; width:23px; height:24px; left: 1px;/* border: 1px solid; */}
.a-point,.b-point{z-index:1;}
.a-point{ right: 15px; top: 29px;}
.b-point{ left: 15px; top: 25px;}
.l-two .a-point{top: 20px;}
.l-three .a-point{top: 14px;text-indent: 0;}
.l-two .b-point{top: 18px;left: 85px;}
.l-three .b-point{top: 11px;left: 159px;}
.mb-n{margin-bottom:0;border-bottom:0!important;}
.course-box .bc{background:transparent;border:0;box-shadow:none;width:63px;font-size:12px;bottom:19px;left:50%;margin-left:-30px;color:#005599; display:none;}
.course-box .bc:hover{ color:#000000;  background:#f9d80b;}
.course-box .view-count{ margin-bottom: 10px;}
.course-box .view-count span{ color:#C00;}
.courselist{}
.courselist img{width:20px; height:20px; margin:15px 0 0 12px;}
.courselist li{border-bottom:1px solid #CFCFCF;}
.courselist a{display:block; padding:17px 0 16px 44px;}  
li.c-sel,li.c-sel:hover{background:#F1F1F1;}
.course-out{}
/*分類tab*/
.rec-main{ font-size:16px; bottom: 0; right: 0;}
.rec-main a{ padding: 0 15px;}
.rec-main li{ display:inline-block;}
.rec-main li.sel{ background: #007FCA;}
.rec-main li.sel a{ color:#fff;}
/*分類tab*/
.cou-m, .rec, .my-r, .sea-y, .a-b-out, .lb-box{ padding: 15px; background:#F1F1F1; margin-bottom: 15px;}
.rec-box{ padding: 15px; margin-bottom: 15px; background:#fff; overflow: hidden;}
.rec-box:last-child, .a-bbox:last-child, .lb-box div:last-child{margin:0}
.rec-box img{ float: left; width:270px; height:165px;}
.rec-r{ margin-left: 285px;}
.rec-r h1{ font-size: 23px; line-height: 1.5; margin-bottom: 10px;}
.rec-r h2{ font-size: 15px;}
.rec-r ul{ margin-bottom: 10px; font-size: 13px;}
.rec-r li{ margin-right: 10px; display: inline-block; line-height: 1.5;}
.rec-r li span{ margin:0 3px;}
.rec-r p{ line-height: 1.5; height:64px; overflow:hidden; font-size:13px;}
.life-bar{ background:#EBEBEB; box-shadow:1px 1px 1px #919191 inset; padding: 4px 8px 6px 4px;height: 6px;border-radius: 10px;}
.life-bar div{ background: #6F6F6F;  height: 6px; border:1px solid #FFF; border-radius: 10px;}
.life-bar span{background: #6F6F6F;top: 26px;font-size: 14px;padding: 5px 0;border-radius: 4px;width: 42px;text-align: center; color: #fff;right: 0;}
.life-bar span:after{border:7px solid #6F6F6F;border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;top: -14px;width:0;height:0;z-index:10;left:15px;}
.zero div{background:transparent; border:transparent;}
.short-sp span{left: -5px;}
.int .rec-box{ margin:-1px 0 0; border-left:0; border-right:0; padding: 15px 0; height: auto;}
.int .rec-box img{ width: 120px; height: auto;}
.int .rec-box h1{ font-size: 18px;}
.int .rec-r{ margin-left: 135px; height: auto;}
.int .rec-r ul{border: 0;}
.int .rec-r li{ margin: 0; display:block;}
.rec .rec-box{ height:74px;}
.rec .rec-box img{ width:120px; height:75px; float: left; margin-right: 15px;}
.rec .rec-r{}
.rec .rec-r ul{ border:0}
.sea-y .rec-box{}
.sea-y .rec-box img{}
.sea-y .rec-r{}
.sea-y .rec-r p{ height: initial;}
.sea-bg,.rec-r li span.sea-bg{background: #FFFFC3;}
.rec-r li span.sea-bg{color:#005599}
.sea-w{border-bottom: 6px solid #007FCA; text-align: center; padding: 0px 0 11px; font-size: 26px;}
.sea-n{ text-align: center; font-size: 26px; border: 1px solid #C7C7C7; border-top: 0; padding: 200px 0;}
.sea-n div {font-size: 15px;text-align: left;margin: 20px auto;line-height: 26px;width: 185px;}
.sea-n ul{list-style: square; margin-left: 18px;}
.sea-n div span{font-size: 20px;}
.sea-n .fa{font-size: 68px;top: -13px;display: block;}
.c-tag{ margin-left: 285px; font-size: 13px; position: absolute; bottom: 15px;}
.c-tag ul{ display: inline-block;}
.c-tag li{ margin-left: 10px; display: inline-block; border: 1px solid #D8D8D8;}
.c-tag li:before{width:0; height:0; left: -17px; border:10px solid transparent; border-right:6px solid #C5C5C5;}
.c-tag li:after{width:0; height:0; left: -16px; top:0px; border:10px solid transparent; border-right:6px solid #FFFFFF;}
.c-tag a{display:block; padding:3px 6px; text-indent: -4px;}
.c-complete .life-bar div{background: #4E8B00;}
.c-complete .life-bar span{background: #4E8B00; color: #fff;width: 100px;}
.c-complete .life-bar span:after{border: 7px solid #4E8B00;border-top-color: transparent;border-left-color:transparent;border-right-color:transparent;left: 46px;}
.c-complete .fa{color: #fff;font-size: 16px;top: 1px;}

.class-info .fblike{ position: absolute; top: 15px; right: 15px; z-index: 1;}
.fblike iframe{ width: 44px;}
.fblike02{ margin: 50px -15px 0;background: #F3F3F3;  padding: 6px 20px 13px;  border-top: 1px solid #C5C5C5;}
.fblike02 iframe{width:140px; top:5px;}

.exeout .fblike{position: fixed;margin-left: 1215px;right: inherit;top: 105px;}
.exeout .collect{position: fixed;margin-left: 1215px;right: inherit;top: 205px;}
.all-badges{}
.bname{font-size:30px;}
.a-b-out{text-align:left;}
.a-bbox{padding:20px; background:#fff; margin:0 0 18px 0; min-height:88px;}
.a-bbox img{ float: left; width: 85px; height: 85px;}
.a-bbox div{ margin-left: 105px; font-size:26px; border-left:1px solid #C5C5C5; padding-left: 15px;}
.a-bbox p{font-size:15px; margin-top:7px; line-height: 20px;}
.a-bbox div span{margin: 0 6px;}
.a-bbox .fa{color:#4b9800;font-size:46px;top:50%;right:0;margin:-22px 14px 0 0;}
.a-bboxs{}
.a-bboxs img{width:70px; height:70px; left:0;}
.a-bboxs div{font-size: 18px;min-height: 90px;margin: 30px 0;border-bottom: 1px solid #C7C7C7;}
.a-bboxs div span{margin:0}
.a-bboxs div p{margin: 0 0 26px 86px; text-align:left; line-height:25px;}
.linkpage{ text-align:center; font-size:13px; margin-bottom: 15px;}
.linkpage a{ display: inline-block; color: #464646; border: 2px solid #e9e9e9; padding: 7px 10px;}
.linkpage a:hover{background:#929292; color:#fff; border:2px solid #929292;}
.linkpage li, .linkpage ul{ display:inline-block}
.linkpage .fa{margin: 0;}
.linkpage a:hover .fa{ color:#FFF}
li.lpnow a,li.lpnow a:hover{background: #007FCA; border:2px solid #007FCA; color:#fff; cursor:default}
.noclass{text-align: center; padding: 18px; font-size:20px;}
.noclass .bc{margin:10px 170px; font-size:initial;}
.editdata{border-collapse: collapse; width:100%;}
.editdata td, .editdata th{padding:7px; text-align:center}
.editdata td:first-child{width:10%;}
.editdata tr{}
.editdata th{background:#F5F5F5;}
td.tl{text-align:left;}
.editdata span{float:right;}
.settling-t{border-bottom:1px solid #C7C7C7; padding-bottom:7px;}
.settling-t h1{display:inline-block; margin-right:5px;} 
.settling-t span{margin:0 10px;}
.settling-t .fa{}
.sort{ margin-bottom: .7em; min-height: 20px;}

.learn-overlay {display:none; background:rgba(0,0,0,.3); position:absolute; width:100%; height:100%; top:0; left:0; z-index:2;}

/* tools */
.lineTllipsis {
	height: 6em;
}

.lineTllipsis-show {
	height: auto!important;
}

/* course */
.course-input {
	display: flex;
	align-items: center;
}

.course-input__info {
	flex-grow: 1;
	margin-left: 5px;
}

.question-info {
	position: relative;
	line-height: 1.7;
}

.question-info__btn:hover + .question-info__content {
	display: block;
}

.question-info__content {
	display: none;
	position: absolute;
	max-width: 490px;
	background-color: #fff;
	padding: 12px;
	border-radius: 7px;
	box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.25);
	font-size: 16px;
	z-index: 3;
}

/* faq */

.faq__question + .faq__question {
	margin-top: 5px;
}

.faq__inner {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.faq__order {
	padding: 6px;
}

.faq__order + .faq__input {
	margin-left: 5px;
}

/* btn */
.btn {
	padding: 1px 1em;
	border: 0;
	font-size: 1em;
}

.btn-link {
	padding: 0;
	color: #005599;
	cursor: pointer;
}

.btn-link:hover {
	color: #3792FF;
}

.btn-round {
	border-radius: 3px;
}

.btn-icon {
	background-color: transparent;
	padding: 0;
}

.btn-peace {
	color: #fff;
	background-color: #2ba5ed;
}

/* img reset */
.img-inner .img-resp {
	width: 100%;
}

.img-resp {
	height: auto;
	vertical-align: middle;
}


/*首頁 start */
.course-link {
	color: #005599;
	text-align: center;
	font-size: 30px;
	margin: 15px 0;
}
.course-link .fa-angle-right{font-size:40px;color:#005599;font-weight:900;}
.course-link a:hover .fa-angle-right{color:#3792FF;}

.progress-out{ width: 80%; margin: auto;}
.progress-out .progress{}
.progress-out .progress-bar{ width: 100%; background:#eee; height:5px;}

.progress-bar div {background:#2ba5ed; height:5px;}

.progress-out .progress-complete{ display: none;}
.progress-out .progress-complete-title{ position: absolute; z-index:2; border:1px solid #2ba5ed; background:#fff; line-height:34px; color:#333; font-size:15px; padding: 0 10px;}
.progress-out .progress-complete-title .fa-child{ font-size:24px; color:#2ba5ed; top: 2px;}
.progress-out .fa-check-circle{ font-size:40px; color:#2ba5ed;}

.progress-out .progress-rate{ display:none; color:#999;}
.progress-out .progress-rate span{ font-size:12px; line-height:3.3;}

.mobile-adv{ position: fixed; bottom: 10px; z-index: 1000; left:50%; margin-left: -160px; height: 50px;}

/* 小學堂2.0 start */







.ie-large-map{
	width:1399px;
	height:953px;
	overflow: hidden;
	margin: 0 auto;
}


.large-map{
	width:1200px;
	height:817px;
	overflow: hidden;
	margin: 0 auto;
}

.middle-map{
	width:1024px;
	height:697px;
	overflow: hidden;
	margin: 0 auto;
}

.small-map{
	width:768px;
	height:523px;
	overflow: hidden;
	margin: 0 auto;
}


.map{
	position:absolute; top:0; left:0;

	-ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	
	width:1399px;
	height:953px;
}

.map-overlays {
	z-index: 1;
}
.overlay-plane-img {
	-ms-transform: rotate(180deg); /* IE 9 */
	-moz-transform: rotate(180deg); /* Mozilla */
	-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
	transform: rotate(180deg);
}

.last-course-overlay{ position: absolute;z-index: 2;font-size: 14px;
	color:#FFF; text-decoration: none; font-weight:900;
}



.last-course-overlay .bc {
	padding: 5px;
	border-radius: 5px;
    background:#FFD428;
}

.last-course-overlay .ani-pause {
	animation-play-state: paused;
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused;

}

.overlay-plane-img{ position: absolute;}

.course-box-overlay{ text-align:center;

}
.course-box-overlay-img{
	position:absolute; cursor:pointer;
}
.course-box-overlay-img img{
	width: 100%;
}

.course-box-overlay-title{
	position:absolute; cursor:pointer;
	font-size:18px;margin-top:5px;border:1px solid #999; border-radius:3px; padding:5px 10px;background: #fff;
}
.course-box-overlay-title a{color:#4d4d4d;white-space: nowrap;}


.progress-bar-vertical{height:50px; width:3px; background:#2ba5ed; display: inline-block; position:absolute;border: 1px solid #999;border-radius: 2px;}
.progress-bar-vertical div{ background: #eeeeee;}
.progress-rate-vertical{color:#2ba5ed;position:absolute;}

.tooltip-box1{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter: alpha(opacity=70); opacity: 0.7;
background:#4A4A4A; width:130px; padding:7px 5px; position:absolute; z-index:9; color:#ffffff; line-height: 1;font-size:12px;
border-radius:3px;font-size:12px;
}

.tooltip-box1:after{ content:''; display:block; border:solid 10px transparent; border-left-color:#4A4A4A; position:absolute; right:-20px; top:20%;}
.tooltip-box1 h3{
	color:#ffff00;font-size:14px;width: 130px;
	text-overflow: ellipsis;

}
.tooltip-box1 h4{
	color:#ffff00;font-size:14px;width: 130px;
	text-overflow: ellipsis;

}
.tooltip-box1 div {
    margin-top: 5px;
}

.overlay-building-img { position: absolute;cursor: pointer;}
.overlay-building-img img{ width: 100%;}
.overlay-building-name{position: absolute;z-index: 2; white-space: nowrap;}



/* Line、Facebook 分享*/
.m-social-btn{display: none; position: fixed; z-index: 5; bottom: 58px;}
.m-social-btn-bottom{ left: 0; right: .667em; text-align: center;}
.m-social-btn-bottom a{ display:inline-block; margin: 0 .3em;}
/*.m-social-btn-right{ right: 15px;}
.m-social-btn-right a{ display:block}
.m-social-btn-right a + a{ margin-top: .667em;}*/
.w-line img, .w-fb img{ border-radius: 50%;}


/* 小學堂2.0 end */

/*收藏 start */
.collect{ cursor:pointer; vertical-align: top;  text-align:center;}
.collectIcon .fa{ color:#f8848d;}
.exeout .collectIcon{ width:38px; line-height:32px; color:#f8848d; border:solid 1px #9b9b9b; border-radius:2px; margin-bottom:7px;}
.exeout .collectIcon:before, .exeout .collectIcon:after, .exeout .collectIcon:before, .exeout .collectIcon:after{ content:''; position:absolute; left: 6px; border:solid 5px transparent;}
.exeout .collectIcon:before,.exeout .collectIcon:before{ border-top-color:#9b9b9b; bottom:-10px;}
.exeout .collectIcon:after,.exeout .collectIcon:after{ border-top-color:#fff; bottom:-8px;}
.exeout .collectBtn,.exeout .collectBtn{
	padding: 4px 0; color:white; font-size:12px; border-radius:2px;
	background: #9b9b9b;
	background:linear-gradient(#9b9b9b, #888);
	background:-webkit-linear-gradient(#9b9b9b, #888);
	background:-moz-linear-gradient(#9b9b9b, #888);
	background:-ms-linear-gradient(#9b9b9b, #888);
	background:-o-linear-gradient(#9b9b9b, #888);}
.exeout .collectBtn:hover,.exeout .collectBtn:hover{
		background:#a6a6a6;
		background:linear-gradient(#a6a6a6, #9b9b9b);
		background:-webkit-linear-gradient(#a6a6a6, #9b9b9b);
		background:-moz-linear-gradient(#a6a6a6, #9b9b9b);
		background:-ms-linear-gradient(#a6a6a6, #9b9b9b);
		background:-o-linear-gradient(#a6a6a6, #9b9b9b);}
/*收藏 end*/

/*收藏頁 start*/
.search-msg{ text-align:center; font-size:16px; margin-bottom: 1em;}
.search-msg strong{ color:red;}
.search-result-out{ margin-bottom:20px; min-height: 500px;}
.search-result-out > div{ background: #fff;}
.list-post-con{ height: 165px; float: left; width: 60%;}
.list-post-con .bc{ right: 0; bottom: 0;}
.list-post{ border-top:solid 1px #d6d6d6; padding:15px;}
.list-post-con h2{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height: 1.5;}
.list-post-con p{ line-height:20px; }

.list-post-img-block{ float: left; width: 270px; height: 165px; overflow: hidden; margin-right: 15px;}
.list-post-img-link{}
.rec-box .list-post-img-block img { float: none; width: 100%; height:165px; display: block;}
.list-post-img-block .socialCountOut{position:absolute; bottom: 15px; right: 15px; top:auto; z-index: 1;}
.list-post-img-block .collect{ display: block; border: solid 1px #9b9b9b; border-radius: 2px; padding: 3px 0 3px 3px; background: #fff;}
.list-post a:hover{ text-decoration: underline;}
.list-post a img{ width:190px; height: auto;transition: all .7s ease-in-out;}
.list-post p{ line-height:1.5; margin-bottom:5px; height:45px; overflow:hidden;}
.s-list{ float: right; font-size:13px; color:#666;}
.s-list li{ line-height:1.5; padding-left: 23px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.s-list li:before{ content:''; width:17px; height:17px; position:absolute; background:url(../images/icon.png); left:0; top:1px; opacity:.3;}
li.s-icon1:before{ background-position:-39px 0px;}
li.s-icon2:before{ background-position:-59px 0px;}
li.s-icon3:before{ background-position:-79px 0px;}
li.s-icon4:before{ background-position:-99px 0px;}

.sea-y .rec-box-collect{}
.sea-y .rec-box-alert{min-height:initial; text-align:center;}
.rec-box-alert .fa-exclamation-circle{font-size: 24px; vertical-align: middle; color:#e00000;}
/*收藏頁 end*/
.name-box .adsbygoogle{ margin: 0 2px;}
.name-box .adsbygoogle:nth-child(3n){ margin-right: 0;}
.adsbygoogle{ background: #f8f8f8;}
/*首頁 end */

.learn-ad-all, .learn-ad-sbr, .learn-ad-navi{ margin:15px auto; background: #eee;}
.learn-ad-all{ width: 970px; height: 90px;}
.learn-ad-sbr{ width: 300px; height: 250px;}
.learn-ad-navi{ width: 250px; height: 500px;}

.mobi-adv{}
.mobi-adv{ display: none; background: #eee; margin: 10px auto; height: 100px; width: 320px;}
.recommend .rec-r{ margin-left: auto;}

/*------------廣告版位CLS------------*/
.pc-ad-h280 { height: 280px; }
/*------------廣告版位CLS------------*/

@media screen and (max-width:1024px){
    .i-main { width: auto; padding: 0 10px;}
    .large-ad+.i-main{ width: auto; box-sizing: border-box; padding: 0 10px;}
	.large-ad div{ width: auto; padding-top: 200px; padding-bottom: 50px;}
	.course-box h2{}
	.course-box ul{ width:80%;}	
	.learning-map, .learn-standings, .learn-what, .completion, .personal-info, .r-material, .large-ad, .class-info, .rec, .my-record, .interested, .courselist, .course-out, .search-results, .all-badges{ margin-bottom: 10px;}
    
    .m-recommend .capture { margin-top: 5px;}
    .del { top: 21px; }
    
    .reference-inf li ,.reference-inf li > a img { width: 230px;}
    .cou-m, .rec, .my-r, .sea-y, .a-b-out, .lb-box, .rec-box{ padding: 10px;}
    .list-post-con{ /*margin-left: 280px;*/ width: 54%;}
    .rec-box{ margin-bottom: 10px;}
    .list-post-con .bc{ right: 10px; bottom: 10px;}
    .rec-box .bc{ right: 10px; bottom: 10px;}

    .learn-ad-all, .learn-ad-sbr, .learn-ad-navi{ display: none;}
    .reference-inf li{ margin-bottom: 10px;}
    .rec-r{ margin-left: 280px;}
    .box-title, .linkpage{ margin-bottom: 10px;}
    .course-box{ padding: 10px 0;}
    .cou-m, .rec, .my-r, .sea-y, .a-b-out, .lb-box, .course{ margin-bottom: 10px;}
    .course-link{ margin: 10px 0;}
    .c-tag{ bottom: 10px; margin-left: 280px;}
    .personal-info{ padding: 10px;}
    .user-inf, .int .rec-box{ padding: 10px 0;}
    .list-post-img-block .socialCountOut{ right: 10px; bottom: 10px;}
    .list-post-img-block, .class-info img, .rec .rec-box img, .user-inf img, .lb-box div img{ margin-right: 10px;}
    .list-post-con .bc{ right: 0; bottom: 0;}
    .class-info, .lb-box div{ padding: 10px;}
    .clc, .lb-box div{ margin-bottom: 10px;}
    .lb-box a.bc, .rec-box .bc, .a-bbox .bc{ right: 10px; bottom: 10px; top: auto;}
    .addnew{ margin: 10px 0;}
    .exename h1{ margin-bottom: 10px;}
    .c-content-out, .topic-qa, .b-step, .tb-out{ padding: 10px;}
    .q-down{ margin: 0 -10px -10px;}
   	.fblike02{ margin-left: -10px; margin-right: -10px; padding: 10px;}
   	.sb-out{ margin: 0 -10px -10px;}
   	.b-step .sb-out{ margin: -5px -10px -10px;}
	.class-info .fblike{ top: 10px; right: 10px;}
	.a-bbox{ padding: 10px; margin-bottom: 10px;}
	.a-bbox div{ margin-left: 95px; padding-left: 10px;}
	.mtbox{ margin-right: 10px;}
    /*------------推薦課程------------*/
    #recommendBlock{height: 280px;}
    /*------------推薦課程------------*/
    /*------------學習風雲榜------------*/
    #rankListBlock{height: 490px;}
    /*------------學習風雲榜------------*/
    /*------------大家都在上什麼課------------*/
    #courseHistoryListBlock{height: 501px;}
    /*------------大家都在上什麼課------------*/    
}

@media screen and (max-width:768px){
	.cmHdr{ margin-bottom: 10px;}
	.i-main{ width:100%; box-sizing: border-box; padding: 0 10px;}
	.large-ad div{ padding-top: 150px;}
	.large-ad p{}
	.large-ad .bc {}
	.sea-w{ padding:0px 0 7px;}
	.learning-map,.learn-standings,.learn-what,.completion,.personal-info,.r-material,.large-ad,.course:after,.class-info,.rec,.my-record,.interested,.courselist, .course-out,.search-results,.all-badges{margin-bottom:11px;}
	.progress-b .bc, .progress-b .bb{padding:10px 8px;}
	.cou-m,.rec,.my-r,.sea-y,.a-b-out,.lb-box{padding:10px;}
	.rec-box,.lb-box div,.a-bbox{margin:0 0 10px 0;}
	.rec-box img{ width:185px; height:113px;}
	.cl-in-t{min-height:127px;}
	.cl-in-t h1{font-size:24px;min-height: 32px;}
	.class-info img {width: 205px;height: 125px;}
	.exename ol li{margin:10px 30px 0 0;}
	.exename ol li:after, .exename ol li:before{right:-31px;}
	.exename ol li:before{right:-32px;}
	.exebar h1{width:190px;}
	.exebar ul{left:199px;}
	.exebar li a{padding:0 30px;}
	.exeout .m-left{width:200px;}
	.exeout .m-right{ margin:0 0 0 199px;}
	.exeout .fblike{display:none}
	.step-box input[type="text"].sb-w01{width:100%;}
	.step-box input[type="text"].sb-w02{width:100%; margin:12px 0 0 0;}
	.l-two .b-point{left:55px;}
	.l-three .b-point{left:108px;}
	.l-one h1{padding:0 140px 0 34px;}
	.l-two h2{padding:0 150px 0 80px;}
	.l-three li{padding:11px 160px 11px 135px;}
	.int .rec-box{ height: initial;padding: 10px 0;}
	.int .rec-box img{ width: 100%; height:auto; position:relative; box-sizing:border-box; float: none;}
	.int .rec-r{ margin-left: auto; height: auto;}
	.int .rec-r ul{border:0;margin:0;padding:0;}
	.jstree-default .jstree-anchor{width:118px !important;}
	.jstree-default .jstree-wholerow{width:200px !important;}
	.jstree{ font-size:13px !important;}
	.addnew .bc{margin:0 30%;}
	.add-together .bb{margin:0 50px 0 0;}
	.b-point{left:10px;}
	.p-complete{left:202px;}
	.personal-info{padding:10px;}
	.per-info-out{margin: 0 0 0 150px;}
	.c-tag{ margin: 0; position: static;}
	.class-info .fblike{ top:10px; right:10px;}
	.class-info{padding:10px;}
	.q-down input[type="text"]{width:90%;}
	.c-push input[type="text"]{width:213px;}
	.m-recommend input[type="text"].ads{width:245px;}
	.choice-q-set input[type="text"]{width:406px;}
	.blank-q-set input[type="text"]{width:384px;}
	.blank-q-set span{padding-left:0;}
	.fblike02 span{display:inline-block;margin:8px 0 0;line-height:18px;font-size:13px;}
	.sea-n{padding:100px 30px;line-height:26px;}
	.settling-t span{margin:4px 0; display:block;}
	.exename ul{ display: block;}
	.exename ul + ul{ margin-top: .667em;}
	.exename > div{ margin-left: 190px;}
	.exename img{ margin-left: 9px;}
	.clc + .bc{ width:270px;}
	.c-content img{ box-sizing:border-box; width:100%!important;}

    .fb-comments span{width:auto;}
    .reference-inf li:nth-child(3n) { margin-right: 2em;}
    .reference-inf li:nth-child(2n) { margin-right: 0;}
    .reference-inf li,.reference-inf li > a img { width: 265px;}
    .reference-inf li > a { height:132px;}
    
    .m-social-btn{ display: block;}
    .name-box .adsbygoogle{ margin-left:0; margin-bottom: 1em;}
    .rec-box .list-post-img-block{ width: 185px; height: 115px;}
    .rec-box .list-post-img-block img{ width: 100%; height: 113px;}
    .list-post-con{}
    .sea-y .rec-box-collect{}
    .sea-y .rec-box{}
    .list-post-img-block .socialCountOut{ right: 10px; bottom: 10px;}
    .my-r .rec-box{ min-height: 153px;}
    .rec-r{ margin-left: 195px;}
    .list-post-con{ width: 50%; height: 115px;}
    .rec-r h1{ font-size: 20px;}
    .m-right .ad-300x250{ display: none;}
    .sea-y .rec-r p, #FixAD{ display: none;}
    /*------------推薦課程------------*/
    #recommendBlock{height: 280px;}
    /*------------推薦課程------------*/
    /*------------學習風雲榜------------*/
    #rankListBlock{height: 490px;}
    /*------------學習風雲榜------------*/
    /*------------大家都在上什麼課------------*/
    #courseHistoryListBlock{height: 501px;}
    /*------------大家都在上什麼課------------*/
}

@media screen and (max-width:480px){
	.large-ad div{ background-image:url(../images/index-bg-480.png); padding-top: 235px; padding-bottom: 30px;}
	.large-ad p {}
	.large-ad .bc{}
	.course-box{}
	.cou-m .rec-box img, .sea-y .rec-box img{position:relative;}
	.sea-y .rec-r{ overflow: hidden;}
	.sea-w,.sea-n{font-size:20px;}
	.sea-n div{font-size:14px;margin:10px auto;}
	.lb-box div h2{ font-size: 20px; line-height: 1.5;}
	.lb-box a.bc{ bottom: 10px; right: 10px;}
	.recommend .rec-box .bc{/*bottom:15px;right:197px;*/}
	.pbox-t div{padding:0;}
	.pbox-t input[type="text"]{width:100%;}
	.pbox-t input[type="text"].b{width:100px;}
	.exeout .m-left{width:100%;float:none;}
	.exeout .m-right{margin:0;}
	.exeout .m-right.hasad{margin-bottom: 70px;}
	.rec .rec-r{}
	.m-left{ width:100%; float:none;}
	.outline-info {
		display: block;
	}

	.class-info .img-inner {
		width: 100%;
		height: 230px;
		margin-right: 0;
	}
	.class-info, .learn-standings { /*margin-bottom: 2em;*/}
	.m-right{ margin:0;}
	.class-info {
		min-height: 500px;
	}
	.class-info img {
		width: 360px;
		height: 230px;
		position: relative;
		object-fit: cover
	}
	.cl-in-t{
		min-height: 330px;
	}
	.exelm{border:1px solid #C5C5C5; border-top:none;border-bottom:none; margin:0}
	.exename{padding: 10px;}
	.exename h1{font-size:25px;}
	/*.exename ul{margin:0;top:2px;}*/
	.exename ol{margin: 16px 150px 10px 0;}
	.exename h2,.exename h3,.exename h4{font-size:16px;}
	.exename ol li:after,.exename ol li:before{border:6px solid transparent; border-left:6px solid #FFFFFF; top:1px; right:-28px;}
	.exename ol li:before{border-left:6px solid #A3A3A3;right: -29px;}
    .exename > div { margin-left:155px}
	.exename img{margin:0;}
	.p-complete{top:38px;left:50%;margin-left:-123px;text-align:center;}
	.p-complete:before{border:14px solid transparent;border-bottom:11px solid #AD0000;margin:-30px 0 0 72px;}
	.c-content-out, .topic-qa, .b-step, .tb-out{ padding: 10px 10px 0;}
	.fblike02{margin:50px -10px 0;padding:6px 10px 8px;}
	.sb-out{margin:0 -10px;}
	.progress-b .bc{padding:10px 8px;}
	.progress-b span{right: -8px;}
	.q-down{padding:30px 10px 45px;margin:0 -10px;}
	.ans-r p, .ans-w p, .an-box p{font-size:26px;}
	.int .rec-box{height:74px;padding:10px 0;}
	.int .rec-box img{width:118px;height:73px;position:absolute}
	.int .rec-r{margin:0 0 0 128px;}
	.pop-ups, .pop-upb, .ans-next{ width:auto;}
	.exebar{ height: auto;}
	.exebar h1{ width: auto; text-align: center; margin: 10px;}
	.exebar ul{ position: static; text-align: center; height: auto;}
	.exebar li{ display: inline-block; float: none;}
	.exebar li span{ float: none; left: 0;}
	.exebar .sel{ top: 1px; height: auto;}
	.jstree-default .jstree-wholerow {width:100% !important; border-right:1px solid #C5C5C5 !important;}
	.step-select{width:100%;}
	.step-select .fa{left:initial; right:20px;}
	.step-select ul{width:412px;}
	.c-push input[type="text"],.m-recommend input[type="text"].ads{ width: 93%; margin:10px 0 0 0; position:relative;}
	.del{top:67px;}
	.s-tips{display:inline-block;margin:10px 0 0 0;}
	.b-step .sb-out{margin:20px -10px 0;}
	.sb-out .bc{margin:0 auto;width:90%;}
	.add-together input[type="text"]{width:290px;}
	.m-recommend input[type="text"].dep{width:100%;}
	.editdata span{float:none;display:block;margin:7px 0 0;}
	td.tl {width:250px;}
	.choice-q-set input[type="text"]{ width: 100%;}
	.blank-q-set input[type="text"]{width:331px;}
	.q-down .bc{width:100%;}
	.q-down input[type="text"]{width: 100%;}
	.mtbox{margin:0 10px 14px 0;width:98px;}
	.mtbox img{width:98px;}
	.tb-out{min-height:initial;}
	.clc + .bc{}
	.ans-corner{ border-width:10px;}
	.reference {height: 340px;}
    .reference-2 {height: 625px;}
    .reference-3 {height: 850px;}
    .reference-inf li,.reference-inf li > a img { /*width: 212px;*/ width: 100%; box-sizing: border-box;}
    .reference-inf li{ float: none;}
    .reference-inf li > a { height: 200px;}
    .cl-in-t img { width:100%;}
	.exename ul { bottom: 0; font-size: 13px;}
	.exename h1 { font-size: 23px;}
	.list-post-img-block{ width: 185px; height: 105px;}
	.rec-box .list-post-img-block img{ width: 100%; height: auto;}
	.rec-box .list-post-img-block{ float: none; margin: 0 0 10px; width: auto; height: auto;}
	.list-post-con{ margin: 0 0 10px; width: 100%;}
	.s-list{ position: static;}
	.s-list li{ display: inline-block; padding-left: 19px;}
	.rec .rec-box img{ float: none; width: 100%; height: auto;}
	.mobi-adv{ display: flex; justify-content: center;}
	.large-ad{ margin-top: auto;}
	.rec-r{ margin-left: auto; /*margin-bottom: 50px;*/}
	.rec .rec-box{ height: auto;}
	.badge img{ width: 30px; height: 30px; margin-left: 0; margin-right: 10px;}
	.badge{ display: block; margin: 10px 0 0;}
	.list-post-con .bc{ position: static; display: block; line-height: 1.5;}
	.list-post-con p{ margin-bottom: 10px;}
	.list-post-con{ height: auto;}
	.c-tag, .rec-box .bc{ position: static; margin-top: 10px;}
	.rec-r, .rec-r p{ height: auto;}
	.rec-box .bc{ display: block; line-height: 1.5;}
	.class-info img{ margin-bottom: 10px;}
	.cl-in-t{ overflow: hidden;}
	.cl-in-t li{min-height: 20px}
	.rec-box img{ float: none; width: 100%; height: auto;}
	.exelm li{ margin-left: -1px; margin-right: -1px;}
	.a-bbox{ text-align: center;}
	.a-bbox img{ float: none; margin-bottom: 10px; width: 120px; height: 120px;}
	.a-bbox div{ margin: auto auto 10px; border: 0; padding: 0;}
	.a-bbox .bc, .a-bbox .fa{ position: static; margin: auto;}
	.a-bbox .bc{ display: block;}
	.step-box td{ padding: 10px 0;}
	.m-left .ad-300x250, .idx.ad-300x250{ display: block;}
	.mobi-page{ padding-bottom: 115px;}
	/*.i-main{ margin-bottom: 120px;}*/
	.l-two > li > .b-point { left: 30px;}
	.l-two h2{ padding-left: 55px;}
	.l-three > li > .b-point { left: 50px;}
	.l-three li{ padding-left: 75px; padding-right: 130px;}
	.l-two:before, .l-two:after, .l-three:before, .l-three:after, .l-two h2:hover + ul:before, .l-three h2:hover + ul:before{ border-width: 7px;}
	.l-two:before, .l-two:after{ left: 13px;}
	.l-three:before, .l-three:after{ left: 33px;}
	.l-two:before{ top: -1px;}
	.l-two:after{ top: 0px;}
    /*------------推薦課程------------*/
    #recommendBlock{height: 800px;}
    /*------------推薦課程------------*/
    /*------------學習風雲榜------------*/
    #rankListBlock{height: 490px;}
    /*------------學習風雲榜------------*/
    /*------------大家都在上什麼課------------*/
    #courseHistoryListBlock{height: 501px;}
    /*------------大家都在上什麼課------------*/
    /*------------廣告CLS------------*/
    .mb-ad-h250 { height: 250px; }
    .mb-ad-h100 { height: 100px; }
    .mb-ad-h90 { height: 90px; }
    .pc-ad-h280 { display: none; }
    /*------------廣告CLS------------*/
    /*------------手機底部------------*/
    div.fixed { z-index: 200;}
    /*------------手機底部------------*/
}
@media screen and (max-width:414px){
    .exename img {display:none!important;}
	.exename > div { margin-left:0;}
	.exename ul { left:0;}
	.exename h1 { font-size: 26px;}
	.reference-inf li:nth-child(2n) { margin-right: 2em;}
    .rec-box{ /*min-height: 365px;*/}
    .large-ad div{ padding-top: 205px; padding-bottom: 25px;}
    .add-together input[type="text"]{ width: 245px;}
    .c-push input[type="text"], .m-recommend input[type="text"].ads{}
    .step-select ul{ width: 346px;}
    /*------------推薦課程------------*/
    #recommendBlock{height: 800px;}
    /*------------推薦課程------------*/
    /*------------學習風雲榜------------*/
    #rankListBlock{height: 490px;}
    /*------------學習風雲榜------------*/
    /*------------大家都在上什麼課------------*/
    #courseHistoryListBlock{height: 501px;}
    /*------------大家都在上什麼課------------*/
    /*------------廣告CLS------------*/
    .mb-ad-h250 { height: 250px; }
    .mb-ad-h100 { height: 100px; }  
    .mb-ad-h90 { height: 90px; }
    .pc-ad-h280 { display: none; }
    /*------------廣告CLS------------*/
}
@media screen and (max-width: 375px){
	.rec-box{ /*min-height: 335px;*/}
	.large-ad div{ padding-top: 185px; padding-bottom: 20px;}
	.reference-inf li > a{ height: 150px;}
	.exebar li a{ padding: 0 15px;}
	.l-one h1, .l-one h2, .l-three li{ padding-right: 10px;}
	.l-three .a-point{ display: none;}
    /*------------推薦課程------------*/
    #recommendBlock{height: 750px;}
    /*------------推薦課程------------*/
    /*------------學習風雲榜------------*/
    #rankListBlock{height: 490px;}
    /*------------學習風雲榜------------*/
    /*------------大家都在上什麼課------------*/
    #courseHistoryListBlock{height: 501px;}
    /*------------大家都在上什麼課------------*/
    /*------------廣告CLS------------*/
    .mb-ad-h250 { height: 250px; }
    .mb-ad-h100 { height: 100px; }
    .mb-ad-h90 { height: 90px; }
    .pc-ad-h280 { display: none; }
    /*------------廣告CLS------------*/
}
@media screen and (max-width:360px){
	.large-ad div{}
	.large-ad p {}
	.large-ad p:before{ margin: 40px -30px;}
	.course-box{ width:100%;}
	.lb-box div img{ width:100%; height:auto; float: none; margin-right: 0; margin-bottom: 10px;}
	.rec-box, .lb-box div, .a-bbox,.rec .rec-box{height:initial;}
	.lb-box > div{ padding:10px; height: 270px;}
	.lb-box div h2{ margin-bottom: 10px;}
	.lb-box a.bc{ position: static; display: block; line-height: 1.5;}
	.addnew .bc{margin:0 20%;}
	.pbox-t span{font-size:22px;display:block;}
	.pbox-t br{display:none}
	.pbox-t input[type="text"].b{width:100%;}
	.cou-m .rec-box img, .my-record .rec-box img, .sea-y .rec-box img, .rec .rec-box img,.exename img{position:relative;width:100%;height:auto;right:initial;}
	.sea-y .rec-box .bc, .recommend .rec-box .bc{ bottom:0; right:initial; position:relative; margin:10px auto 0;}
	.my-record .rec-box .bc{}
	.rec .rec-r{margin:0;}
	.sea-w, .sea-n{font-size:17px;}
	.c-tag ul{width:initial;}
	.fblike{display:none;}
	.class-info img {width: 100%;}
	.p-rate span{width:12px;}
	.l-one h1{font-size:20px; padding: 0 90px 0 30px;}
	.l-two h2{font-size:17px; line-height: 56px;/*padding:0 98px 0 46px;*/}
/*	.l-three li{padding:11px 100px 11px 70px;}*/
	.a-point{right:10px;}
	.b-point{left:6px;}
	.l-two .b-point{left:22px;}
	.l-three .b-point{left:45px;}
	.l-two:before, .l-two:after{left:7px;}
	.l-two{background:url(../images/box-sd.png) no-repeat -130px -42px;}
	.l-three:before, .l-three:after{left:24px;}

    .exename > div { margin-left:0;}
	.exename h1 { font-size:24px; margin-top: 0;}
	.exename ol{margin:18px 0 16px;}
	.r-material .user-inf div, .ans-w .user-inf div{}
	.pro-sel:before, .pro-sel:after{top: 36px;}
	.pro-sel:after {top:37px;}
	.progress-b li{margin-right:4px;font-size: 13px;}
	.progress-b .bc,.progress-b .bb{padding:8px 5px;}
	.progress-b {height:71px;}
	.progress-b span{top: -74px;}
	.ans-w .user-inf h2{padding:0;}
	.ans-r p, .ans-w p, .an-box p{font-size:22px;line-height:29px;}
	.an-box span {font-size:17px;}
	.altext br{ display:none;}
	.pop-ups .altext .bb{width:100%;}
	.pop-ups .altext .bb:last-child{width:100%; margin-left:initial;}
	.pop-ups, .pop-upb, .ans-next{padding:70px 10px;}
	.per-info-out{ margin-left: 90px;}
	.personal-info > img{ width: 80px; height: 80px;}
	.a-bbox {padding:10px;}
	.a-bbox img{}
	.a-bbox div{ font-size:26px;}
	.a-bbox .fa{top:118px;}
	.a-bbox .bc{}
	.exebar ul{}
	.exebar li a {padding:0 15px;}
	.cs-style{margin:10px 0 0 0;}
	.c-push input[type="text"], .m-recommend input[type="text"].ads{width: 270px;}
	.add-together input[type="text"]{width: 208px;}
	.add-together .bb {margin:0;}
	.m-together{margin:18px -10px 0 0;}
	.add-together{margin:0;}
	.mtbox{margin:0 8px 14px 0;}
	.choice-q-set input[type="text"]{width:232px;}
	.blank-q-set input[type="text"]{width:210px;}
	.choice-q-set label {display:block;margin:13px 0 0 13px;}
	.step-select ul {width:292px;}
	.learn-standings, .learn-what{ display: none!important;}
	.sb-out .bc{ line-height: 1.5;}
	.pop-ups, .pop-upb, .ans-next{ padding: 10px!important; width:260px!important;}
	.ans-corner{ display: none;}    
    /*------------推薦課程------------*/
    #recommendBlock{height: 750px;}
    /*------------推薦課程------------*/
    /*------------廣告CLS------------*/
    .mb-ad-h250 { height: 250px; }
    .mb-ad-h100 { height: 100px; }
    .mb-ad-h90 { height: 90px; }
    .pc-ad-h280 { display: none; }
    /*------------廣告CLS------------*/
}

@media screen and (max-width:320px){
	.large-ad div { padding-top: 190px; background-image:url(../images/index-bg-320.png);}
	.ans-r p, .ans-w p,.an-box p {font-size:20px;}
	.step-select ul {width:252px;}
	.c-push input[type="text"],.m-recommend input[type="text"].ads {width:230px;}
	.bas-tb {font-size:13px;}
	.mtbox{width:84px;}
	.mtbox img{width:84px;}
	.add-together input[type="text"]{width:166px;}
	.mtbox .ibr{margin:25px 0 0 -28px;}
	.add-together .mtbox .bc{margin:24px 0 0 -38px;width:76px;}
	.choice-q-set input[type="text"]{width:192px;}
	.blank-q-set input[type="text"]{width:170px;}
	.tit {font-size:18px;}
	.settling-t h1 {display:block;margin:10px 0 5px;}
	.settling-t span {margin:9px 0;}
	.pop-ups, .pop-upb, .ans-next{ width:220px!important;}
	a.bb, .bb{ padding:10px 5px;}

    .mobile-adv{ bottom: 0;}
    .rec-box{ /*min-height: 310px;*/}
    .lb-box > div{ height: 245px;}
    .rec-r{/* height: 155px;*/}
    /*------------推薦課程------------*/
    #recommendBlock{height: 750px;}
    /*------------推薦課程------------*/
    /*------------廣告CLS------------*/
    .mb-ad-h250 { height: 250px; }
    .mb-ad-h100 { height: 100px; }
    .pc-ad-h90,.mb-ad-h90 { height: 90px; }
    .pc-ad-h280 { display: none; }

    /*------------廣告CLS------------*/
}