body,h1,h2,h3,h4,h5,p,dl,dd,ol,ul,th,td,form,fieldset,input,button,textarea{margin:0;padding:0}
html,body{height:100%;}
html{position:relative;-webkit-text-size-adjust:none;word-wrap:break-word;font-size:100%;background:#b5cbdb;}
h1,h2,h3{font-size:100%}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;font-size:inherit}
fieldset,img{border:0}
cite,em,s,i,b{font-style:normal}
input,button,textarea,select{font-size:100%}
body,input,button,textarea,select,option{font-size:normal}
a,input,textarea{text-decoration:none;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}
li,img,label,input{vertical-align:middle}var{font-style:normal}
ins{text-decoration:none}
body{font-size:1em}
img{max-width:100%;height:auto;}
.cBlue,a.cBlue{color:#2ca6e0}
.alignC{text-align:center;}
.alignR{text-align:right;}
.mag2em{margin-bottom:2em!important;}
.mag3em{margin-bottom:3em!important;}
.fSize12{font-size:1.2em}
.fSize15{font-size:1.5em}
.fSize20{font-size:2.0em}
.lft{float:left;}
.rgt{float:right;}
.cGreen{color:#35af57}
.cOrange{color:#f29600}
.cGray{color:#999}
.clearfix{zoom:1}.clearfix:after{content:'\20';display:block;clear:both;}
a{cursor:pointer;color:#333;display:block;}

.viewport{max-width:640px;min-width:320;overflow:hidden;margin:0 auto;position:relative;}
.viewport h1{background:#3e4951;text-align:center;padding:0.7em;}
.viewport h1 a.logo{font-size:1em;color:#fff;}

.curriculum{margin-left:13.750em;border-left:solid 2px #fff;margin-top:3em;margin-bottom:2em;}
.itemsWrap{margin-left:-13.750em;}
.viewport .topCont,.viewport .botCont{margin-left:11.575em;}
.viewport .topCont img,.viewport .botCont img{margin:-0.6em 0.5em 0 0;width:4.125em;}
.viewport .topCont p,.viewport .botCont p{color:#fff;text-shadow:2px 2px 4px #333;}
.viewport .botCont img{margin:-0.6em 0.5em -0.6em 0;}
#topLoading,#botLoading{line-height:2.5em;}
.viewport .lists{margin:2.1em 0;}
.viewport .lists li{padding:0.8em 1em;position:relative;}
.viewport .lists li .circleCls{position:absolute;width:1.75em;height:1.75em;background:url(../images/waplist/circleNo.png) no-repeat 0 0;top:1.7em;left:12.82em;background-size:contain;}
.viewport .lists li .cont,.viewport .lists .noCont{border-radius:.5em;background:rgba(255,255,255,.80);width:100%;overflow:hidden;display:table;box-shadow:0px 0px  0.9em #666;}

.viewport .lists .noCont{line-height: 10em;background:#fff;text-indent:10.5em;}
.viewport .lists li .cont:active{background-color: #ccc;}
.viewport .lists li .lftDate{display:table-cell;width:11.04em;text-align:right;padding-right:1.6em;}
.viewport .lists li .lftDate span{font-size:0.875em;}
.viewport .lists li .lftDate em{color:#999;display:inline-block;margin-top:.2em;font-size:0.875em;}
.viewport .lists li .rgtDet{display:table-cell;border-left:solid 2px #c8c9ca;padding:1em 1.5em 1.5em;}
.viewport .lists li .rgtDet p{margin-top:.3em;}
.viewport .lists li .rgtDet p em{display:inline-block;font-size:0.875em;}
.viewport .lists li .rgtDet p span{width:8.5em;overflow:hidden;white-space:nowrap;display:inline-block;vertical-align:-0.3em;font-size:0.875em;color:#989898;}
.viewport .lists li.playbackCls .lftDate{padding-top:10px;}
.viewport .lists li.ingCls .lftDate em{background:#35af57;color:#fff;padding:0.04em 0.8em 0.18em;border-radius:.2em;font-size:1em;}
.viewport .lists li.playbackCls .lftDate em{background:#2ca6e0;color:#fff;padding:0.1em 0.8em 0.2em;border-radius:.2em;font-size:1em;}
.viewport .lists li.ingCls .rgtDet{border-left:solid 2px #35af57;}
.viewport .lists li.playbackCls .rgtDet{border-left:solid 2px #2ca6e0;}
.viewport .lists li.ingCls .circleCls{background:url(../images/waplist/circleIng.png) no-repeat 0 0;background-size:contain;}
.viewport .lists li.playbackCls .circleCls{background:url(../images/waplist/circleIngpay.png) no-repeat 0 0;background-size:contain;}

.viewport .lists h4{font-weight:400;font-size:0.875em;color:#666;}

@-webkit-keyframes start {
	0%{-webkit-transform:scale3d(1,1,1);}
	50%{-webkit-transform:scale3d(1.25,1.25,1.25);}
	100%{-webkit-transform:scale3d(1,1,1);}
}

@-moz-keyframes start {
	0%,30%{opacity:0;-moz-transform:translate(0,10px);}	
	0%{-moz-transform:scale3d(1,1,1);}
	50%{-moz-transform:scale3d(1.25,1.25,1.25);}
	100%{-moz-transform:scale3d(1,1,1);}
}

@keyframes start {
	0%{transform:scale3d(1,1,1)}
	50%{transform:scale3d(1.25,1.25,1.25)}
	100%{transform:scale3d(1,1,1)}
}

.imgAinmate{-webkit-animation:start 1.5s infinite ease-in-out;-moz-animation:start 1.5s infinite ease-in-out;animation:start 1.5s infinite ease-in-out;}

.show{-webkit-animation:slideIn 1s;-moz-animation:slideIn 1s;animation:slideIn 1s;}
@-webkit-keyframes slideIn{
  100%{opacity:1}
	0%{opacity:0}
  }
  @keyframes slideIn{
    100%{opacity:1}
		0%{opacity:0}
  }
  
  @-moz-keyframes slideIn{
    100%{opacity:1}
		0%{opacity:0}
  }



@media only screen and (max-width:480px){body{font-size:11.33333px}.viewport{max-width:480px;}.viewport .lists li .lftDate{width:8.02em}.curriculum{margin-left:10.8em;}.itemsWrap{margin-left:-10.8em}.viewport .topCont,.viewport .botCont{margin-left:8.575em}.viewport .lists li .circleCls{left:9.9em;}.viewport .lists h4{font-size:1.2em;}.viewport .lists .noCont{text-indent: 7.5em;}
}
@media only screen and (max-width:560px) and (min-width:480px){body{font-size:13.33333px}.viewport{max-width:560px;}}

@media only screen and (max-width:570px) and (min-width:560px){body{font-size:15.83333px}.viewport{max-width:570px;}}

@media only screen and (max-width:640px) and (min-width:570px){body{font-size:15.83333px}.viewport{max-width:640px}}

@media only screen and (max-width:640px) and (min-width:630px){body{font-size:17.77778px}.viewport{max-width:640px}}