a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite, code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, sup, tfoot, th, thead, time, tr, ul, var, video {
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal
}
body {
	position:fixed;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust:none;
   /* background-color: #222;*/
    font: 16px/1.25 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    letter-spacing: -0.05em;
    overflow: hidden;
}
html{
    -webkit-text-size-adjust: none;
}

body * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: #fff;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:hover {
    opacity: 1
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
    font-size: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

th, td, caption {
    vertical-align: top;
    text-align: left
}

sub,sup{
    font-size: 10px;
}

.bold{
    font-weight: 600;
}
.fr{
    float:right;
}
.fl{
    float:left;
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,
.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,
h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small {
    font-weight: normal;
    line-height: 1;
    color: #999999;
}

h1,h2,h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small {
    font-size: 65%;
}

h4,h5,h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small {
    font-size: 75%;
}

h1,.h1 {
    font-size: 36px;
}

h2,.h2 {
    font-size: 30px;
}

h3,.h3 {
    font-size: 24px;
}

h4,.h4 {
    font-size: 18px;
}

h5,.h5 {
    font-size: 14px;
}

h6,.h6 {
    font-size: 12px;
}
/******colors**********/
.turquoise{background-color: #1ABC9C !important;}
.green-sea{background-color: #16A085 !important;}
.emerland{background-color: #78ba00 !important;}
.nephritis{background-color: #27AE60 !important;}
.peter-river{background-color: #3498DB !important;}
.belize-hole{background-color: #2980B9 !important;}
.amethyst{background-color: #9B59B6 !important;}
.wisteria{background-color: #8E44AD !important;}
.wet-asphalt{background-color: #2C3E50 !important;}
.midnight-blue{background-color: #2C3E50 !important;}
.concrete{background-color: #95A5A6 !important;}
.asbestos{background-color: #7F8C8D !important;}
.clouds{background-color: #ECF0F1 !important;color:#666 !important}
.sliver{background-color:#BDC3C7 !important;}
.alizarin{background-color:#E74C3C !important;}
.pomegranate{background-color:#C0392B !important;}
.carrot{background-color:#E67E22 !important;}
.pumpkin{background-color:#D35400 !important;}
.sun-flower{background-color:#F1C40F !important;}
.orange{background-color:#F39C12 !important;}
.violet{background-color: #9f00a7 !important;}
/********** tip arrow*****************/
.tip-arrow-down:after{
    content: "▼";
    position: relative;
    left: 1px;
    font-size: 0.9em
}
.tip-arrow-up:after{
    content: "▲";
    position: relative;
    left: 1px;
    font-size: 0.9em;
}
[data-scroll="true"]{
    overflow: auto;
}
#jingle_welcome{
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    overflow: hidden;
    background-color: #fff;
}
/****  for page ***/
@-webkit-keyframes emptyAnim{
    0% { -webkit-transform: scale(1)}
	100% { -webkit-transform:scale(1)}
}
@-webkit-keyframes slideLeftIn {
	0% { -webkit-transform: translate3d(100%,0,0)}
	100% { -webkit-transform: translate3d(0,0,0)}
}
@-webkit-keyframes slideLeftOut {
	0% { -webkit-transform: translate3d(0,0,0)}
	100% { -webkit-transform: translate3d(-100%,0,0)}
}
@-webkit-keyframes slideRightIn {
	0% { -webkit-transform: translate3d(-100%,0,0)}
	100% { -webkit-transform: translate3d(0%,0,0) }
}
@-webkit-keyframes slideRightOut {
	0% { -webkit-transform: translate3d(0%,0,0)}
	100% { -webkit-transform: translate3d(100%,0,0)}
}
@-webkit-keyframes scaleIn {
	0% {opacity: 0;-webkit-transform: scale(.5)}
	100% {opacity: 1;-webkit-transform: scale(1)}
}
@-webkit-keyframes scaleOut {
	0% {opacity: 1;-webkit-transform: scale(1)}
	100% {opacity: 0;-webkit-transform: scale(.5)}
}
@-webkit-keyframes slideDownIn {
	0% {opacity: 0;-webkit-transform: translate3d(0,-100%,0)}
	100% {opacity: 1;-webkit-transform: translate3d(0,0,0)}
}
@-webkit-keyframes slideUpOut {
	0% {opacity: 1;-webkit-transform: translate3d(0,0,0)}
	100% {opacity: 0;-webkit-transform: translate3d(0,-100%,0)}
}
@-webkit-keyframes slideDownOut {
	0% {-webkit-transform: translate3d(0,0,0)}
	100% {-webkit-transform: translate3d(0,100%,0)}
}
@-webkit-keyframes slideUpIn {
	0% {-webkit-transform: translate3d(0,90%,0)}
	100% {-webkit-transform: translate3d(0,0,0)}
}

section.anim{
    -webkit-animation-duration: 250ms;
    -webkit-animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out
}
.empty{
    z-index: 4 !important;
    -webkit-animation-name: emptyAnim;
}

.slideLeftOut{
    -webkit-animation-name: slideLeftOut;
}
.slideLeftIn{
    -webkit-animation-name: slideLeftIn;
}
.slideRightIn{
    -webkit-animation-name: slideRightIn;
}
.slideRightOut{
    -webkit-animation-name: slideRightOut;
}
.scaleIn{
    -webkit-animation-name: scaleIn;
}
.scaleOut{
    -webkit-animation-name: scaleOut;
}
.slideDownIn{
    -webkit-animation-name: slideDownIn;
}
.slideDownOut{
    -webkit-animation-name: slideDownOut;
}
.slideUpIn{
    z-index: 10;
    -webkit-animation-name: slideUpIn;
}
.slideUpOut{
    -webkit-animation-name: slideUpOut;
}
/******** for calendar *******/
@-webkit-keyframes slideLeftRound {
	0% { -webkit-transform: translate3d(0%,0,0)}
	40% { -webkit-transform: translate3d(-40%,0,0)}
	41% { -webkit-transform: translate3d(60%,0,0)}
	100% { -webkit-transform: translate3d(0%,0,0)}
}
@-webkit-keyframes slideRightRound {
	0% { -webkit-transform: translate3d(0%,0,0)}
	40% { -webkit-transform: translate3d(40%,0,0)}
	41% { -webkit-transform: translate3d(-60%,0,0)}
	100% { -webkit-transform: translate3d(0%,0,0)}
}
/********** for popup  toast **********/
@-webkit-keyframes bounceIn {
	0% {opacity: 0;-webkit-transform: scale(.3);}
	50% {opacity: 1;-webkit-transform: scale(1.1);}
	100% {-webkit-transform: scale(1);}
}
@-webkit-keyframes bounceOut {
	0% {-webkit-transform: scale(1);}
	100% {opacity: 0;-webkit-transform: scale(.5);}
}
aside[data-position="left"]{
    left:0;
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
}
aside[data-position="right"]{
    right:0;
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
}
aside[data-transition="overlay"]{
    z-index: 4;
}
aside[data-transition="reveal"]{
    z-index: 2;
}
aside[data-position][data-transition="reveal"]{
    -webkit-transform:translateX(0);
    transform:translateX(0);
}
aside{
    display: none;
    font-size: 1.1em;
    box-orient:vertical;
    -webkit-box-orient:vertical;
}
aside.active{
    display: -webkit-box;
    display: box;
}
.aside-close{
    position: absolute;
    top:0;
    color: #ECF0F1;
    padding: 10px;
}
aside[data-position="left"] .aside-close{
    right: 0;
}
aside[data-position="right"] .aside-close{
    left: 0;
}
aside > *{
    -webkit-box-flex : 0;
}
aside>.header{
    overflow: hidden;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}
aside>.center{
    -webkit-box-flex : 1;
    overflow: auto;
}
aside ul.menu li {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
aside ul.menu li a {
    padding: 10px 20px;
    display: block;
}
aside ul.menu li a .icon{
    float:left;
}
aside ul.menu li.anchor{
    padding: 2px 10px;
    font-size: 0.9em;
}
.back-mask{
    width: 200px;margin:60px auto;text-align: center;color: #7F8C8D
}
.back-mask .icon{
    font-size: 80px;line-height: 80px;display: block;margin-bottom: 10px;
}
.button, button {
    display: inline-block;
    padding: 8px 14px;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    border-radius: 4px;
}

.button:disabled, button:disabled, .button.disabled, button.disabled {
    background: rgba(185, 180, 182, 0.20);
    color: #999 !important
}

.button.small, button.small {
    height: 30px;
    padding: 0 8px;
    font-size: 1em;
    line-height: 28px
}
.button:active,button:active {
    opacity: .6;
}
.button.block,button.block{
    width:100%;
}
.button .icon, button .icon{
    float:left;
}
.jingle-calendar{
    width: 100%;
    overflow: hidden;
}
.jingle-calendar-nav{
    height: 50px;
    line-height: 50px;
    display: -webkit-box;
    display: box;
    text-align: center;
}
.jingle-calendar-nav>div{
    -webkit-box-flex : 1;
}
.jingle-calendar-nav i.icon{
    padding: 10px;
}
.jingle-calendar-body{
    overflow-x: hidden;
}
.jingle-calendar table{
    width: 100%;
}
.jingle-calendar table th{
    text-align: center;
    padding: 5px 0;
}
.jingle-calendar table td{
    text-align: center;
    padding: 15px 0;
}

.control-group {
    display: -webkit-box;
    display: box;
    overflow: hidden;
    list-style: none;
    border-radius: 4px;
}

.control-group li {
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    -webkit-box-flex: 1;
    box-flex: 1;
    padding: 5px 0;
    border-width: 1px;
    border-style: solid;
    border-right-width: 0;
}

.control-group li > a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.control-group li:first-child {
    border-radius: 4px 0 0 4px;
}
.control-group li:last-child {
    border-right-width: 1px;
    border-radius: 0 4px 4px 0;
}
.control-group i.icon ~ a {
    padding: 0;
}

[data-count]{
    position: relative;
}
.count{
    position:absolute;
    border-radius: 30px;
    color: #fff;
    line-height: 18px;
    padding: 0 5px;
    font-size: 12px;
    font-weight: 500;
    min-width: 8px;
    text-align: center;
    right: 7px;
    left: auto;
    top:0;
    opacity: .8;
}
.count.left{
    left:7px;
    right:auto;
}
footer{
    bottom:0;
    display: -webkit-box;
    display: box;
    border-top: 1px solid #d7d7d7;
}
footer > a{
    -webkit-box-flex : 1;
    box-flex : 1;
    display: block;
    text-align: center;
    font-size: 0.80em;
}
footer > a > .icon{
    float: none;
    display: block;
    height: 27px;
    padding-top: 7px;
    margin-bottom: 5px;
}
footer > a > .icon:before{
	width: 20px;
    height: 20px;
}
footer > a.label-right{
    text-align: left;
    line-height: 51px;
}
footer > a.label-right .icon{
    float: left;
    line-height: 51px;
    padding: 0 5px;
    font-size: 2em;
}
.footer-secondary{
    position: absolute;
    bottom: 51px;
    left: 0;
    width: 100%;
    z-index: 2;
    padding: 10px;
    display: none;
}
input,
textarea,
button,
select {
    font-family: inherit;
    font-size: inherit;
}

select,
textarea,
input[type="text"],
input[type=search],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
    width: 100%;
    height: 40px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1);
    -webkit-appearance: none;
    -webkit-user-select: text;
    -webkit-font-smoothing: antialiased;
    -wekbit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

input[type=search] {
    height: 34px;
    font-size: 1em;
    border-radius: 30px;
}

textarea {
    height: auto;
}

select {
    height: auto;
    font-size: 1em;
    background-color: #f8f8f8;
    background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
    background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
}
.submit {
	text-align: center;
	font-size: 0.95em;
	color: #fff;
	border-radius: 3px;
	background-color: #12a7ed;
	display: block;
}
.input-group {
    width: auto;
    height: auto;
    padding: 0;
}

.input-group input {
    margin-bottom: 0;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0;
    box-shadow: none;
}

.input-group input:last-child {
    border-bottom-width: 0;
}

.input-row {
    display: -webkit-box;
    display: box;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.input-row:last-child {
    border-bottom-width: 0;
}

.input-row label {
    display: block;
    width: 100px;
    padding: 11px 10px 9px 13px;
    font-weight: 400;
}

.input-row label + input {
    display: block;
    -webkit-box-flex: 1;
    box-flex : 1;
    padding-left: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.input-row label + .toggle {
    margin: 10px;
}

.label {
    color: #888;
    margin: 0 15px 0 5px;
	font-size: 0.95em;
}
.grid{
    display: -webkit-box;
    display: box;
}
.grid.middle{
    -webkit-box-pack:center;
    -webkit-box-align:center;
    box-pack:center;
    box-align:center;
}
.grid.vertical{
    -webkit-box-orient:vertical;
    box-orient:vertical;
}
.grid-label{
    -webkit-box-flex:0;
    box-flex:0;
    width: 100px;
    font-weight: 600;
}
.col-0 {-webkit-box-flex:0;box-flex:0;}
.col-1 {-webkit-box-flex:1;box-flex:1;}
.col-2 {-webkit-box-flex:2;box-flex:2;}
.col-3 {-webkit-box-flex:3;box-flex:3;}
.col-4 {-webkit-box-flex:4;box-flex:3;}
.col-5 {-webkit-box-flex:5;box-flex:5;}

header {
    top: 0;
    display: -webkit-box;
    display: box;
}
header > *{
    -webkit-box-flex : 0;
    box-flex : 0;
}
header nav.left{
    position: absolute;
    left:0;
    top:0;
    z-index: 2;
}
header nav.right{
    position: absolute;
    right:0;
    top:0;
    z-index: 2;
}
header .title {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    margin: 0;
    width: 100%;
    font-size: 1.2em;
    line-height: 45px;
    text-align: center;
    white-space: nowrap;
    z-index: 1;
}

header .button,header button{
    height: 30px;
    line-height: 30px;
    margin: 5px;
    padding: 0 5px;
}
header .button:active,
header button:active {
    opacity: .6;
}
header .url {
    position: absolute;
    top: 5px;
    left: 16px;
	right:40px;
    display: block;
    margin: 0;
	height: 35px;
    font-size: 1.2em;
    z-index: 1;
}
header .searchBox {
    position: absolute;
    top: 5px;
    left: 15px;
	right:15px;
    display: block;
    margin: 0;
	height: 35px;
    font-size: 1.2em;
    z-index: 1;
}
header .url input ,header .searchBox input{
	height: 35px;
	padding: 0 35px 0 10px;
	border: none;
	width: 100%;
}
header .searchBox input
{
	padding: 0 35px 0 35px;
}
header .url span, header .searchBox span {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 25px;
	height: 25px;
}
header .url .icon:before, header .searchBox .icon:before {
	width: 100%;
	height: 100%;
	display:block;
}
header nav{
    padding: 0 5px;
}
header nav a{
    float: left;
}
header nav a:not(.button) {
    height: 44px;
}
header nav a:not(.button):active {
    opacity: .6;
}

header nav a:not(.button) > .icon {
	width:25px;
	height:45px;
    float:left;
}
header nav a:not(.button) > .icon:before {
	width:20px;
	height:45px;
	display:block;
	margin:0 auto;
}
header nav a:not(.button) > .nomsg, header nav a:not(.button) > .msg {
	width:30px;
}
header nav a:not(.button) > .nomsg:before, header nav a:not(.button) > .msg:before {
	width:25px;
	height:45px;
	display:block;
	margin:0 auto;
}

header .control-group{
    margin: 0 auto;
    width:140px;
    height: 30px;
    margin-top: 8px;
}

.header-secondary{
    display: -webkit-box;
    display: box;
    text-align: center;
}
.header-secondary > a{
    -webkit-box-flex : 1;
    box-flex : 1;
    display: block;
}
.icon{
    /*  reset */
    display: inline;
    width: auto; 
    height: auto;
    line-height: inherit;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin: 0 3px;
}
.icon.left{
    float:left;
}
.icon.right{
    float:right;
}
.icon:before {
    text-decoration: inherit;
    display: inline-block;
    speak: none;
}
.icon.add:before {
    content: "";
	background: url(../image/icon_add.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.back:before {
    content: "";
	background: url(../image/icon_back.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.next:before {
    content: "";
	background: url(../image/icon_next.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.history:before {
    content: "";
	background: url(../image/icon_history.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.delete:before {
    content: "";
	background: url(../image/icon_delete.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.down:before {
    content: "";
	background: url(../image/icon_down.png) no-repeat center center;
	background-size: 100% auto;
}
.active > .icon.down:before {
    content: "";
	background: url(../image/icon_down_a.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.ie:before {
    content: "";
	background: url(../image/icon_ie.png) no-repeat center center;
	background-size: 100% auto;
}
.active > .icon.ie:before {
    content: "";
	background: url(../image/icon_ie_a.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.nav:before {
    content: "";
	background: url(../image/icon_nav.png) no-repeat center center;
	background-size: 100% auto;
}
.active > .icon.nav:before {
    content: "";
	background: url(../image/icon_nav_a.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.search:before {
    content: "";
	background: url(../image/icon_search.png) no-repeat center center;
	background-size: 100% auto;
}
.active > .icon.search:before {
    content: "";
	background: url(../image/icon_search_a.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.setting:before {
    content: "";
	background: url(../image/icon_setting.png) no-repeat center center;
	background-size: 100% auto;
}
.active > .icon.setting:before {
    content: "";
	background: url(../image/icon_setting_a.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.nomsg:before {
    content: "";
	background: url(../image/icon_nomsg.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.msg:before {
    content: "";
	background: url(../image/icon_msg.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.pause:before {
    content: "";
	background: url(../image/icon_pause.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.play:before {
    content: "";
	background: url(../image/icon_play.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.refresh:before {
    content: "";
	background: url(../image/icon_refresh.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.enter:before {
    content: "";
	background: url(../image/icon_enter.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.choice:before {
    content: "";
	background: url(../image/icon_choice.png) no-repeat center center;
	background-size: 100% auto;
}
.icon.delete_g:before {
    content: "";
	background: url(../image/icon_delete_gray.png) no-repeat center center;
	background-size: 15px;
}
.icon.book:before {
    content: "";
	background: url(../image/icon_book.png) no-repeat center center;
	background-size: 100% auto;
}
@-webkit-keyframes spinner {
	0% { -webkit-transform: rotate(0deg); }
	50% { -webkit-transform: rotate(-180deg); }
    100% { -webkit-transform: rotate(-360deg); }
}
.icon.spinner{
    display: inline-block;
    -webkit-animation: spinner 1.25s infinite linear;
    animation: spinner .8s infinite linear;
}
.icon.spinner:before {
	margin:15px 0;
	width:60px;
	height:60px;
    content:"";
	background:url(../image/loading.png) no-repeat;
	background-size:100% 100%;
	display:block;
}
/**
     ******************************
     *       *        header      *
     *       **********************
     *       *                    *
     * aside *                    *
     *       *      article       *
     *       *                    *
     *       *                    *
     *       **********************
     *       *       footer       *
     ******************************

**/
aside{
    position: absolute;
    width: 264px;
    top:0;
    bottom:0;
    -webkit-transform : translateX(-100%);
    transform : translateX(-100%);
    z-index: 3;
}

#section_container{
    position: absolute;
    overflow: hidden;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    z-index: 3;
    background: #64A4E1;
    background-image: -webkit-linear-gradient(top left, #64A4E1, #2CCD8A);
    background-image: -moz-linear-gradient(top left, #64A4E1, #2CCD8A);
    background-image: -o-linear-gradient(top left, #64A4E1, #2CCD8A);
    background-image: linear-gradient(to bottom right, #64A4E1, #2CCD8A);
}
#section_container_mask{
    position: absolute;
    overflow: hidden;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    z-index: 10;
    display: none;
}

section{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 4;
    overflow:hidden;
    display: none;
}
section.anim:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}
section.active{
    z-index: 6 ;
    display: block;
}
section.animating{
    z-index: 5 ;
    display: block;
}
article{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    visibility: hidden;
    display: none;
    overflow:hidden;
    z-index: 0;
    background-color: #fff;
}
article.active{
    visibility: visible;
    display: block;
    z-index: 1;
}
header,footer,.header-secondary{
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10
}
header{
    top:0;
    height: 45px;
    line-height: 45px;
}
.header-secondary{
    top:44px;
    height: 30px;
    line-height: 30px;
    font-size: .9em;
}
footer{
    bottom: 0;
    height: 55px;
}
footer ~ article {
    bottom: 55px;
}
header ~ article{
    top:45px;
}
.header-secondary{
    top:45px;
}
.header-secondary ~ article{
    top:75px;
}

/* Lists
-------------------------------------------------- */
ul.list {
    list-style: none;
}

.list>li {
    position: relative;
    padding: 15px 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
	overflow: hidden;
}
.list>li[data-icon="next"] {
    padding: 15px 20px 15px 10px;
}
.list>li:first-child {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.list>li > a:not([class*="button"]) {
    position: relative;
    display: block;
    padding: inherit;
    margin:-15px -20px -15px -10px;;
    color: inherit;
}
.list>li strong{
    color: #333;
    font-size: 0.95em;
}
.list>li h1{
	height: 42px;
	margin: 0;
    font-size: 1em;
    line-height: 1.3em;
	overflow:hidden;
}
.list>li p{
    color:#7a7a7a;
    font-size: 0.9em;
    padding-top: 5px;
}
.list>li p em{
	margin-left:15px;
	font-style:normal;
	color:#12a7ed;
}
.list>li .l_img{
	width:120px;
	height:100px;
    border:1px solid rgba(0, 0, 0, .1);
	display:block;
	position:absolute;
	left:10px;
	top:15px;
}
.list>li .l_img img{
	width:100%;
	height:100%;
}
.list>li .r_info{
	height:100px;
	margin:0 0 0 10px;
}
.list>li > .icon{
    position: absolute;
    right: 5px;
    top:50%;
    margin-top: -9px;
    color: #BDC3C7;
}
.list>li >.icon.play, .list>li >.icon.pause{
	width: 30px;
	height: 30px;
	right: 10px;
	margin-top: 0;
	background-color: #12a7ed;
	border-radius: 50%;
}
.list>li >.icon.play:before, .list>li >.icon.pause:before{
	width: 100%;
	height: 100%;
	background-size: 50% auto;
}
.list>li >.icon.next{
	width: 20px;
	height: 20px;
	right: 5px;
	margin-top: -10px;
}
.list>li >.icon.next:before{
	width: 100%;
	height: 100%;
	background: url(../image/icon_next_gray.png) no-repeat center center;
	background-size: 100% auto;
}
.list>li >.icon.choice{
	width: 20px;
	height: 20px;
	right: 5px;
	margin-top: -10px;
}
.list>li >.icon.choice:before{
	width: 100%;
	height: 100%;
}
.list>li .tag{
    position: absolute;
    top:10px;
    right: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.8em;
}
.icon ~ .tag{
    right: 30px !important;
}


/* Inset list
-------------------------------------------------- */

.list.inset {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.list.inset>li:first-child {
    border-top-width: 0;
}
.list.inset>li:last-child {
    border-bottom-width: 0;
}


.list .divider {
    position: relative;
    top: -1px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 25px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    background-color: #f8f8f8;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.list.inset .divider:first-child {
    top: 0;
    border-top-width: 0;
    border-radius: 6px 6px 0 0;
}

.list.inset .divider:last-child {
    border-radius: 0 0 6px 6px;
}
#jingle_popup_mask{
    display: none;
    position: absolute;
    z-index: 90;
    left: 0;
    right:0;
    top:0;
    bottom: 0;
    opacity: 0;
}
#jingle_popup{
    display: none;
    position: absolute;
    left: 0;
    right:0;
    z-index: 98;
    min-height: 50px;
}
#jingle_popup.arrow{
    border-radius: 5px;
}
#jingle_popup.arrow:after{
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 10px;
}
#jingle_popup.arrow.top:after{
     bottom: 100%;
     left: 50%;
     margin-left: -10px;
 }
#jingle_popup.arrow.right:after{
    left: 100%;
    top: 50%;
    margin-top: -10px;
}
#jingle_popup.arrow.bottom:after{
    top: 100%;
    left: 50%;
    margin-left: -10px;
}
#jingle_popup.arrow.left:after{
    top: 50%;
    right: 100%;
    margin-top: -10px;
}
#popup_btn_container{
    text-align: center;
    margin-top: 10px;
    display: -webkit-box;
    display: box;
}
#popup_btn_container > a{
    -webkit-box-flex:1;
    box-flex:1;
    padding: 10px;
    display: block;
    color: #222;
    border:1px solid rgba(0, 0, 0, 0.2);
    border-left: none;
    border-bottom: none;
}
#popup_btn_container > a:last-child{
    border-right: 0 none;
}
.popup-title{
    text-align: left;
    padding: 10px;
}
.popup-content{
    padding: 0 10px 10px 10px;
    line-height: 1.2em;
}
#tag_close_popup{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1em;
    padding: 5px 5px 10px 10px;
}
#jingle_popup .nav{
    text-align: center;
    font-size: 1em;
}

#jingle_popup.loading{
    top:50%;
    left: 50%;
    margin: -75px 0 0 -75px;
    opacity: .9;
    text-align: center;
    width: 150px;
    height: 130px;
    border-radius: 3px;
}
#jingle_popup.loading i.icon{
    font-size: 4em;
    line-height: 110px;
    margin:0;
}
.actionsheet{
    display: -webkit-box;
    display: box;
    -webkit-box-orient:vertical;
    box-orient:vertical;
    padding: 5px 10px 15px;
}
.actionsheet > button{
   -webkit-box-flex:1;
    box-flex:1;
    margin : 10px 0 0;
    display: block;
    width:100%;
	background-color: #eef3f3;
	border: 1px solid #12a7ed;
	color: #12a7ed;
}
[data-progress]{
    border-radius: 10px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 0.9em;
}
[data-progress] .bar{
    float: left;
    width:0;
    height: 100%;
    white-space: nowrap;
    border-radius: 10px 0 0 10px;
    margin-left: -1px;

}
[data-rangeinput] input[type="range"]{
    width:80%;
}
input[type="range"] {
    width: 100%;
    height: 12px;
    border-radius: 5px;
    -webkit-appearance: none !important;
    outline: none;
    display: inline-block;
}

input[type="range"]::-webkit-slider-thumb{
    width: 22px;
    height: 22px;
    border-radius: 14px;
    -webkit-appearance: none !important;
}
[data-rangeinput] input[type="text"]{
    width: 15%;
    padding: 5px;
    margin:0 5px;
    height: 30px;
   display: inline-block;
}
.refresh-container{
    padding:10px;
    text-align: center;
}
.refresh-icon{
    font-size: 1.1em;
    display: inline-block;
}
.refresh-label{
    font-size: 1em;
    display: inline-block;
}
.refresh-tip{
    display: block;
    padding: 3px;
    font-size: .9em;
}
.icon-reverse{
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    -webkit-transition-duration:.5s;
    transition-duration:.5s;
}
.slider{
    position: relative;
    overflow: hidden;
}
.slider>div>*{
    display: none;
}
.dots{
    width:100%;height: 20px;position:absolute;left: 0;bottom: 10px;z-index: 999;
    opacity: .7;
}
.dots ul{
    margin:0 auto;
    width: 112px;
    height: 20px;
    padding: 0px 8px;
    display: -webkit-box;
    display: box;
}
.dots ul li{
    list-style: none;
    -webkit-box-flex : 1;
    height: 20px;
    padding:5px 10px;
}
.dots ul li a{
    display: block;
    width: 10px;height: 10px;
    border-radius: 10px;
}
/*** aside  ****/
aside{
    background: #393939;
    color: #fff;
}
.aside-close{
    color: #ECF0F1;
}
aside>.header{
    border-bottom: 1px solid #000;
    background-color: #393939;
    background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%);
    color: #fff;
}
aside ul.menu li a {
    color: #fff;
}
aside ul.menu li.anchor{
    color: #8b9195;
}
/*** background mask **/
.back-mask{
    color: #7F8C8D
}
/**** button ****/
.button, button {
    color: #fff;
    background-color: #12a7ed;
}
.button.light,button.light{
    border: 1px solid #46CA5E;
    color: #46CA5E;
    background: none;
}
/**** control group **/
.control-group li{
    border-color:#46CA5E;
}
.control-group li > a {
    color: #46CA5E;
}
.control-group li.active {
    background: #46CA5E;
    color:#fff;
}
.control-group .icon{
    color: #46CA5E;
}
header .control-group {
    margin: 0 auto;
    width: 140px;
    height: 30px;
    margin-top: 8px;
    line-height: 30px;
}
header .control-group li{
    border-color: #fff;
    padding: 0;
}
header .control-group li.active{
    background: #fff;
    color: #158f75;
}
.control-group li.active a,.control-group li.active .icon{
    color: #fff;
}
.control-group .icon{
    color: #46CA5E;
}

/**** counts ****/
.count{
    background-color: #E74C3C;
}
/**** dots ****/
.dots ul li a{
    background: #b9b4b6;
}
.dots ul li.active a{
    background-color: #4c4d4c;
}
/**** footer ****/
footer{
    background-color: #fdfdfd;
}
footer > a{
    color: #5c5c5c;
}
footer > a.active{
    color: #12a7ed;
}
.footer-secondary{
    background-color: #262F3D;
    color: #fff;
}
/**** header ****/
header{
    background-color: #12a7ed;
    color: #fff;
}
header .title{
    color: #fff;
}
header .button,header button{
    background: none;
    border: 1px solid #fff;
    color: #fff;
}
header nav a:not(.button){
    color: #fff;
}
.header-secondary{
    background-color: #6A7991;
    color: #fff;
}
/**** list ****/
ul.list {
    background-color: #fff;
}
.list>li.active{
    background-color: rgba(231, 238, 229, 0.75) !important;
}
.list>li.active>.icon{
    color: #46CA5E;
}
.list>li .tag{
    background-color: #3498DB;
    color: #fff;
}
/**** popup ****/
#jingle_popup_mask{
    background-color: #222;
}
#jingle_popup{
    background-color: #eef3f3;
    color: #222;
    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.6);
}
#jingle_popup.arrow.top:after{
    border-bottom-color: #CAD1DA;
}
#jingle_popup.arrow.right:after{
    border-left-color: #CAD1DA;
}
#jingle_popup.arrow.bottom:after{
    border-top-color: #CAD1DA;
}
#jingle_popup.arrow.left:after{
    border-right-color: #CAD1DA;
}
#popup_btn_container{
}
.popup-title{
    color: #33b4db;
}
#tag_close_popup{
    color: #BDC3C7;
}
#jingle_popup .nav{
    color: #000;
}
#jingle_popup .nav.active,#jingle_popup .nav:active{
    background-color: #79db8d !important;
    color: #fff;
}
#jingle_popup.loading{
    background-color: rgba(0,0,0,.8);
}
#jingle_popup.loading p{
    color: #BDC3C7;
}
#jingle_popup.loading i.icon{
    color: #fff;
}
/**** progress ****/
[data-progress]{
    background: #fff;
    border: 1px solid #46CA5E;
}
[data-progress] .bar{
    background: #46CA5E;
    color: #fff;
}
/**** range ****/
input[type="range"]{
    border:1px solid #46CA5E;
}
input[type="range"]::-webkit-slider-thumb{
    background: #46CA5E;
}
/**** toggles ****/
.toggle {
    background-color: #ececec;
}
.toggle-handle{
    background-color: #fff;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.5);
	box-shadow: 0 0 3px rgba(0,0,0,.5);
}
.toggle.active {
    background-color: #12a7ed;
}
/**** selected ****/
.selected{
    background-color: #f9f9f9 !important;
}
/**** calendar ****/
.jingle-calendar{
    background-color: #eee;
}
.jingle-calendar-nav{
    background-color: #262F3D;
    color: #fff;
}
.jingle-calendar table thead{
    background: #eee;
}
.jingle-calendar table tbody{
    background: #f5f5f5;
}
.jingle-calendar table td{
    border: 1px solid #fff;
}
.jingle-calendar table td.active{
    background-color: #46CA5E;
}
#jingle_toast{
    display: none;
    position: absolute;
    z-index: 99;
    color: #fff;
}
#jingle_toast{
    top: 70%;
    font-size: 1em;
    text-align: center;
    width: 100%;;left: 0;
}
#jingle_toast.top{
    top: 50px;
    opacity: .7;
}
#jingle_toast>a{
    padding: 10px 15px;
    background: #222;
    display: inline-block;
    max-width: 90%;
    margin: 0 auto;
    color:#fff;
    text-align: center;
}
#jingle_toast.top>a{
    width:90%;
}
#jingle_toast.success>a{background-color: #27AE60;!important}
#jingle_toast.error>a{background-color: #E74C3C;!important}
#jingle_toast.info>a{background-color: #F1C40F;!important}

#jingle_toast i.icon{
    margin-right: 10px;
}
.toggle {
    position: relative;
    width: 56px;
    height: 30px;
    border-radius: 28px;
    display:inline-block;
    text-align: center;
}
/** 自定义文本 **/
[data-on]:before {
    content: attr(data-off) !important;
    font-family: "Open Sans" !important;
    font-size: .9em !important;
    line-height: 28px;
    color: #fff;
    margin-left: 30px;
}

[data-on].active:before {
    content: attr(data-on) !important;
    margin-right: 30px;
    margin-left: 0;
}
.toggle-handle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 30px;
    height: 30px;
    -webkit-transition : left 0.1s ease-in-out;
    transition : left 0.1s ease-in-out;
    border-radius: 15px;
}
.toggle.active .toggle-handle {
    left:27px;
}