@charset "utf-8";

/**** reset ****/
body {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: #f3f3f3;
    color: #000000;
    font-size: 13px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, sans-serif;
    line-height: 1.5;
    vertical-align: baseline; /*word-break:break-all;*/
}

html, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, i, img, strong, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, figcaption, footer, header, hgroup, menu, nav, section, time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: inherit;
    font-family: inherit;
    vertical-align: inherit;
    list-style-type: none;
    font-weight: inherit;
    font-style: normal; /*word-break:break-all;*/
}

img {
    vertical-align: top;
}
.font-weight {
    font-weight: bold;
}
select, input, textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

article, aside, dialog, div, figure, footer, header, hgroup, nav, section {
    display: block;
}

a {
    color: #418abb;
    text-decoration: none;
}

a:hover {
    color: #1da0d0;
    text-decoration: none;
}

.clear {
    clear: both;
    zoom: 1;
}

.clear:after {
    content: '';
    display: block;
    clear: both;
}

audio {
    position: absolute;
    display: none;
}
[hidden] {
    display: none!important;
}
/* for iOS 7 */

/**** fonts ****/
.lang-en, .lang-ja {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, sans-serif;
}

.lang-zh, .lang-ce, .lang-hj, .lang-zh_cp {
    font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "MS PGothic", Helvetica, Arial, sans-serif;
}

.lang-tw {
    font-family: "Hiragino Sans GB", "Microsoft JhengHei", "微軟正黑體", "MS PGothic", Helvetica, Arial, sans-serif;
}

.lang-pt {
    font-family: Helvetica, Arial, sans-serif;
}

.lang-ko {
    font-family: Helvetica, Arial, sans-serif;
}

.lang-it {
    font-family: Helvetica, Arial, sans-serif;
}

.lang-ru {
    font-family: Helvetica, Arial, sans-serif;
}

.lang-fa {
    font-family: Helvetica, Arial, sans-serif;
}

.lang-mm {
    font-family: Myanmar3, Arial, Tahoma, Georgia, serif;
}


/**** form ****/
input {
    line-height: normal;
}

/*input[type="text"],input[type="password"],textarea { height:32px; padding:5px 8px 5px 8px; font-size:13px; line-height:1.53846153; vertical-align:middle; color:#000000; background:#ffffff; border:1px solid #c7cad3; outline:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }*/
input[type="text"], input[type="password"], textarea {
    height: 32px;
    padding: 7px 8px 4px 8px;
    font-size: 13px;
    line-height: 19px;
    vertical-align: middle;
    color: #000000;
    background: #ffffff;
    border: 1px solid #c7cad3;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 0;
    -webkit-appearance: none;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    background-color: #fdfdfd; /*background-color:#faffba;*/
}

input[type="text"]:disabled, input[type="password"]:disabled, textarea:disabled {
    background-color: #f6f6f6;
}

/*input[type="text"]::-webkit-input-placeholder,input[type="password"].input::-webkit-input-placeholder { padding-top:2px; }*/
textarea {
    height: auto;
}

input::-ms-clear {
    visibility: hidden;
}

::-moz-placeholder {
    color: #cccccc !important;
    opacity: 1 !important;
}

:-ms-input-placeholder {
    color: #cccccc !important;
}

::-webkit-input-placeholder {
    color: #cccccc !important;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

input[type="text"].warning, input[type="password"].warning, textarea.warning {
    border-color: #ee0000;
}

/* default checkbox,radio,select */
label {
    line-height: 32px;
    vertical-align: middle;
}

label + label {
    margin-left: 10px;
}

input[type="checkbox"], input[type="radio"] {
    display: inline;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    margin: 0 6px 0 0;
}

input[type="checkbox"] {
    position: relative;
    top: -1px;
}

select {
    height: 32px;
    font-size: 13px;
    line-height: 32px;
    vertical-align: middle;
    border: 1px solid #c7cad3;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* customized checkbox,radio,select */
.form-checkbox {
    display: inline-block;
    position: relative;
    padding: 0 8px 0 0;
    min-width: 40px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    vertical-align: middle;
    background: transparent;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.form-checkbox:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #c7cad3;
}

.form-checkbox.checked:after {
    content: "\e6fe";
    font-family: "icon";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 3px;
    font-size: 12px;
    line-height: 32px;
    vertical-align: middle;
    color: #000000;
}

.form-checkbox > label {
    padding: 0 0 0 22px;
}

.form-checkbox.disabled {
    color: #aaaaaa;
}

.form-checkbox.disabled.checked:after {
    color: #aaaaaa;
}

.form-checkbox.padding1px > label {
    padding: 0 0 0 23px;
}

.form-checkbox.padding2px > label {
    padding: 0 0 0 24px;
}

.form-checkbox.padding3px > label {
    padding: 0 0 0 25px;
}

.form-checkbox.box-only {
    padding: 0;
    min-width: 18px;
    width: 18px;
}

.form-checkbox.box-only > label {
    padding: 0;
}

.form-checkbox.wide-span > label {
    padding-left: 27px;
}

.form-checkbox.warning:before {
    border-color: #ee0000;
}

.form-checkbox.warning.checked:after {
    color: #ee0000;
}

.form-checkbox.warning > label {
    color: #ee0000;
}

.form-checkbox.strong-blue.checked > label {
    color: #418abb;
}

.form-checkbox.strong-blue.checked:before {
    border-color: #418abb;
}

.form-checkbox.strong-blue.checked:after {
    color: #418abb;
}

.form-checkbox.strong-blue.checked.disabled {
    opacity: 0.5;
}

.form-checkbtn {
    display: inline-block;
}

.form-radio {
    display: inline-block;
    position: relative;
    padding: 0 8px 0 0;
    min-width: 40px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    vertical-align: middle;
    background: transparent;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.form-radio:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #c7cad3;
    border-radius: 8px;
    background: #ffffff;
}

.form-radio.checked:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 12px;
    left: 5px;
    width: 8px;
    height: 8px;
    background: #000000;
    border-radius: 4px;
}

.form-radio > label {
    padding: 0 0 0 22px;
}

.form-radio.disabled {
    color: #aaaaaa;
}

.form-radio.disabled.checked:after {
    background: #aaaaaa;
}

.form-radio.radio-only {
    padding: 0;
    min-width: 18px;
    width: 18px;
}

.form-radio.radio-only > label {
    padding: 0;
}

.form-radio.wide-span > label {
    padding-left: 27px;
}

.form-radio.strong-orange.checked > label {
    color: #d94d38;
    font-weight: bold;
}

.form-radio.strong-orange.checked:before {
    border-color: #d94d38;
}

.form-radio.strong-orange.checked:after {
    background: #d94d38;
}

.form-radio.warning:before {
    border-color: #ee0000;
}

.form-radio.warning.checked:after {
    background-color: #ee0000;
}

.form-select {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 0 32px 0 0;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    vertical-align: middle;
    border: 1px solid #c7cad3;
    background: #ffffff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.form-select > label {
    display: block;
    padding: 0 8px 0 8px;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}

.form-select > label.placeholder {
    color: #cccccc;
}

.form-select > div {
    position: absolute;
    top: 30px;
    left: -1px;
    z-index: 1;
    min-width: 100px;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #ffffff;
    border-bottom: 1px solid #c7cad3;
}

.form-select > div > button {
    display: block;
    width: 100%;
    border: 1px solid #c7cad3;
    border-bottom: none;
    padding: 0 30px 0 8px;
    line-height: 31px;
    font-size: 13px;
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.form-select > div > button:hover, .form-select > div > button.selected {
    background-color: #f0f0f0;
}

.form-select > a.carret {
    outline: none;
    position: absolute;
    bottom: 0;
    right: 0;
}

.form-select > a.carret:after {
    content: "\e8c9";
    font-family: "icon";
    display: inline-block;
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    color: #747474;
    background: #ffffff;
    border: 1px solid #c7cad3;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.form-select.disabled > label {
    color: #aaaaaa;
}

.form-select.disabled > a.carret:after {
    color: #c7cad3;
}

.form-select.warning {
    border-color: #ee0000;
}

.form-select.warning > a.carret:after {
    border-color: #ee0000;
    color: #ee0000;
}

.form-select.order {
    padding: 0 28px 0 0;
    height: 28px;
    line-height: 28px;
    font-size: 11px;
    border-color: #dadada;
}

.form-select.order > label {
    line-height: 28px;
}

.form-select.order > div {
    position: absolute;
    top: 26px;
}

.form-select.order > div > button {
    padding: 0 26px 0 8px;
    line-height: 29px;
    font-size: 11px;
}

.form-select.order > a.carret:after {
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-color: #dadada;
}

.form-inline {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
}

.form-inline.small, .form-inline.xsmall, .form-inline.xxsmall {
    line-height: 32px !important;
}

.form-inline.mini {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
}

.form-date {
    display: inline-block;
    position: relative;
}

dl.form-field {
    display: table;
    width: 100%;
    border-bottom: 1px solid #e1e1e1;
}

dl.form-field.border-top {
    border-top: 1px solid #e1e1e1;
}

dl.form-field > dt {
    display: table-cell;
    width: 190px;
    padding: 8px 20px 8px 8px;
    text-align: right;
    vertical-align: top;
    line-height: 32px;
    background: #f9f9f9;
    border-right: 1px solid #e1e1e1;
    position: relative;
    color: #222222;
}

dl.form-field > dt:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #ffffff;
}

dl.form-field > dt.required:after {
    content: "\e6fb";
    display: inline-block;
    font-family: "icon";
    font-size: 11px;
    line-height: 32px;
    color: #d38b8b;
    padding: 0 0 0 8px;
}

dl.form-field > dd {
    display: table-cell;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

dl.form-field > dd + dd.border-left {
    border-left: 1px solid #e1e1e1;
}

dl.form-field > dd + dd.min {
    width: 1%;
    white-space: nowrap;
}

dl.form-field > dd.list {
    padding: 0;
}

dl.form-field > dd.list > dl {
    display: table;
    width: 100%;
}

dl.form-field > dd.list > dl > dt,
dl.form-field > dd.list > dl > dd {
    display: table-cell;
    border-top: 1px solid #e1e1e1;
    padding: 8px;
    line-height: 32px;
    vertical-align: middle;
}

dl.form-field > dd.list > dl:first-child > dt,
dl.form-field > dd.list > dl:first-child > dd {
    border-top: none;
}

dl.form-field > dd.list > dl > dd {
    border-left: 1px solid #e1e1e1;
}

dl.form-field > dd.list > dl > dd.status {
    width: 40px;
    text-align: center;
}

dl.form-field > dd.list > dl > dd.min {
    width: 1%;
    white-space: nowrap;
}

dl.form-field > dd.list > dl.invalid {
    background: #fdfdfd;
}


dl.list-field {
    display: table;
    width: 100%;
    border-bottom: 1px solid #e1e1e1;
}

dl.list-field.border-none {
    border-bottom: none;
}

dl.list-field.border-top {
    border-top: 1px solid #e1e1e1;
}

dl.list-field > dt {
    display: table-cell;
    padding: 6px 20px 6px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 22px;
    font-size: 12px;
    white-space: nowrap;
    position: relative;
}

dl.list-field > dd {
    display: table-cell;
    padding: 6px 12px 6px 6px;
    text-align: right;
    vertical-align: top;
    line-height: 22px;
    font-size: 12px;
}


/**** mark & tag ****/
.mark, .tag {
    display: inline-block;
    padding: 2px 3px 0 3px;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    vertical-align: middle;
    color: #333333;
    background: transparent;
    border: 1px solid #333333;
    border-radius: 2px;
}

.mark.no-border {
    border: none;
}

.mark.black {
    border-color: #000000;
    color: #000000;
}

.mark.blue {
    border-color: #418abb;
    color: #418abb;
}

.mark.red {
    border-color: #ee0000;
    color: #ee0000;
}

.mark.gray {
    border-color: #999999;
    color: #999999;
}

.mark.lightgray {
    border-color: #bbbbbb;
    color: #bbbbbb;
}

.mark.bluegray {
    border-color: #858da3;
    color: #858da3;
}

.mark.blackgray {
    border-color: #555555;
    color: #555555;
}

.mark.orange {
    border-color: #d94d38;
    color: #d94d38;
}

.mark.green {
    border-color: #11aa11;
    color: #11aa11;
}

.tag.black {
    border-color: #000000;
    background-color: #000000;
    color: #fff;
}

.tag.blue {
    border-color: #418abb;
    background-color: #418abb;
    color: #fff;
}

.tag.red {
    border-color: #ee0000;
    background-color: #ee0000;
    color: #fff;
}

.tag.gray {
    border-color: #999999;
    background-color: #999999;
    color: #fff;
}

.tag.orange {
    border-color: #d94d38;
    background-color: #d94d38;
    color: #fff;
}

.tag.green {
    border-color: #11aa11;
    background-color: #11aa11;
    color: #fff;
}

/**** display,position ****/
.block {
    display: block !important;
}

.inline {
    display: inline !important;
}

.inline-block {
    display: inline-block !important;
}

.tl {
    text-align: left !important;
}

.tr {
    text-align: right !important;
}

.tc {
    text-align: center !important;
}

.vt {
    vertical-align: top !important;
}

.vb {
    vertical-align: bottom !important;
}

.vm, .vc {
    vertical-align: middle !important;
}

.vbase {
    vertical-align: baseline !important;
}

.fl {
    float: left !important;
}

.fr {
    float: right !important;
}

.nr {
    white-space: nowrap !important;
}

.wp {
    white-space: wrap !important;
}

.nr-force {
    white-space: nowrap !important;
    overflow: hidden !important;
}

.absolute {
    position: absolute !important;
}

.relative {
    position: relative !important;
}

.fixed {
    position: fixed !important;
}

.absolute-top-right {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

.absolute-top-left {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.absolute-bottom-right {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
}

.absolute-bottom-left {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
}

.absolute-left-50p {
    position: absolute !important;
    left: 50% !important;
}

.absolute-top-50p {
    position: absolute !important;
    top: 50% !important;
}

.absolute-top-left-50p {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
}

.reset-position {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

.top1px {
    position: relative;
    top: 1px;
}

.top2px {
    position: relative;
    top: 2px;
}

.top3px {
    position: relative;
    top: 3px;
}

.top4px {
    position: relative;
    top: 4px;
}

.top5px {
    position: relative;
    top: 5px;
}

.top10px {
    position: relative;
    top: 10px;
}

.top-1px {
    position: relative;
    top: -1px;
}

.top-2px {
    position: relative;
    top: -2px;
}

.top-3px {
    position: relative;
    top: -3px;
}

.top-4px {
    position: relative;
    top: -4px;
}

.top-5px {
    position: relative;
    top: -5px;
}

.top-10px {
    position: relative;
    top: -10px;
}

.left1px {
    position: relative;
    left: 1px;
}

.left2px {
    position: relative;
    left: 2px;
}

.left3px {
    position: relative;
    left: 3px;
}

.left-1px {
    position: relative;
    left: -1px;
}

.left-2px {
    position: relative;
    left: -2px;
}

.left-3px {
    position: relative;
    left: -3px;
}

.break-all {
    word-break: break-all;
}


/**** font,color ****/
.f7px {
    font-size: 7px !important;
}

.f8px {
    font-size: 8px !important;
}

.f9px {
    font-size: 9px !important;
}

.f10px {
    font-size: 10px !important;
}

.f11px {
    font-size: 11px !important;
}

.f12px {
    font-size: 12px !important;
}

.f13px {
    font-size: 13px !important;
}

.f14px {
    font-size: 14px !important;
}

.f15px {
    font-size: 15px !important;
}

.f16px {
    font-size: 16px !important;
}

.f17px {
    font-size: 17px !important;
}

.f18px {
    font-size: 18px !important;
}

.f19px {
    font-size: 19px !important;
}

.f20px {
    font-size: 20px !important;
}

.f21px {
    font-size: 21px !important;
}

.f22px {
    font-size: 22px !important;
}

.f23px {
    font-size: 23px !important;
}

.f24px {
    font-size: 24px !important;
}

.f25px {
    font-size: 25px !important;
}

.f30px {
    font-size: 30px !important;
}

div.small, p.small, span.small, strong.small, em.small, i.small, ul.small, li.small {
    font-size: 12px !important;
}

div.xsmall, p.xsmall, span.xsmall, strong.xsmall, em.xsmall, i.xsmall, ul.xsmall, li.xsmall {
    font-size: 11px !important;
}

div.xxsmall, p.xxsmall, span.xxsmall, strong.xxsmall, em.xxsmall, i.xxsmall, ul.xxsmall, li.xxsmall {
    font-size: 10px !important;
}

div.xxxsmall, p.xxxsmall, span.xxxsmall, strong.xxxsmall, em.xxxsmall, i.xxxsmall, ul.xxxsmall, li.xxxsmall {
    font-size: 9px !important;
}

div.small, p.small {
    line-height: 17px;
}

div.xsmall, p.xsmall {
    line-height: 16px;
}

div.bold, p.bold, span.bold, strong.bold, em.bold, i.bold, a.bold, h1.bold, h2.bold {
    font-weight: bold !important;
}

div.normal, p.normal, span.normal, strong.normal, em.normal, i.normal, a.normal {
    font-weight: normal !important;
}

.line-through {
    text-decoration: line-through;
}

.underline {
    text-decoration: underline;
}

a.underline:hover {
    text-decoration: underline;
}

.black {
    color: #000000;
}

.blue {
    color: #418abb;
}

.red {
    color: #ee0000;
}

.gray {
    color: #999999;
}

.lightgray {
    color: #bbbbbb;
}

.bordergray {
    color: #c7cad3;
}

.bluegray {
    color: #858da3;
}

.blackgray {
    color: #555555;
}

.orange {
    color: #d94d38;
}

.green {
    color: #11aa11;
}

.purple {
    color: #d82974;
}

.skype-blue {
    color: #009fe3;
}

/**** border ****/
.r0 {
    border-radius: 0 !important;
}

.r1 {
    border-radius: 1px !important;
}

.r2 {
    border-radius: 2px !important;
}

.r3 {
    border-radius: 3px !important;
}

.r4 {
    border-radius: 4px !important;
}

.r5 {
    border-radius: 5px !important;
}

.r6 {
    border-radius: 6px !important;
}

.r7 {
    border-radius: 7px !important;
}

.r8 {
    border-radius: 8px !important;
}

.r9 {
    border-radius: 9px !important;
}

.r10 {
    border-radius: 10px !important;
}

/**** opacity ****/
.op50 {
    opacity: 0.5 !important;
}

.op75 {
    opacity: 0.75 !important;
}

/**** width,height,margin,padding ****/
.wauto {
    width: auto !important;
}

.w10 {
    width: 10px !important;
}

.w20 {
    width: 20px !important;
}

.w30 {
    width: 30px !important;
}

.w40 {
    width: 40px !important;
}

.w50 {
    width: 50px !important;
}

.w60 {
    width: 60px !important;
}

.w70 {
    width: 70px !important;
}

.w80 {
    width: 80px !important;
}

.w90 {
    width: 90px !important;
}

.w100 {
    width: 100px !important;
}

.w110 {
    width: 110px !important;
}

.w120 {
    width: 120px !important;
}

.w130 {
    width: 130px !important;
}

.w140 {
    width: 140px !important;
}

.w150 {
    width: 150px !important;
}

.w160 {
    width: 160px !important;
}

.w170 {
    width: 170px !important;
}

.w180 {
    width: 180px !important;
}

.w190 {
    width: 190px !important;
}

.w200 {
    width: 200px !important;
}

.w210 {
    width: 210px !important;
}

.w220 {
    width: 220px !important;
}

.w230 {
    width: 230px !important;
}

.w240 {
    width: 240px !important;
}

.w250 {
    width: 250px !important;
}

.w260 {
    width: 260px !important;
}

.w270 {
    width: 270px !important;
}

.w280 {
    width: 280px !important;
}

.w290 {
    width: 290px !important;
}

.w300 {
    width: 300px !important;
}

.w350 {
    width: 350px !important;
}

.w400 {
    width: 400px !important;
}

.w450 {
    width: 450px !important;
}

.w500 {
    width: 500px !important;
}

.w600 {
    width: 600px !important;
}

.w700 {
    width: 700px !important;
}

.w800 {
    width: 800px !important;
}

.w900 {
    width: 900px !important;
}

.w1000 {
    width: 1000px !important;
}

.w225 {
    width: 225px !important;
}

.w255 {
    width: 255px !important;
}

.w320 {
    width: 320px !important;
}

.w720 {
    width: 720px !important;
}

.w10p {
    width: 10% !important;
}

.w14p {
    width: 14% !important;
}

.w16p {
    width: 16% !important;
}

.w17p {
    width: 17% !important;
}

.w20p {
    width: 20% !important;
}

.w25p {
    width: 25% !important;
}

.w30p {
    width: 30% !important;
}

.w33p {
    width: 33% !important;
}

.w40p {
    width: 40% !important;
}

.w45p {
    width: 45% !important;
}

.w49p {
    width: 49% !important;
}

.w50p {
    width: 50% !important;
}

.w60p {
    width: 60% !important;
}

.w70p {
    width: 70% !important;
}

.w80p {
    width: 80% !important;
}

.w90p {
    width: 90% !important;
}

.w100p {
    width: 100% !important;
}

.minw100 {
    min-width: 100px;
}

.minw150 {
    min-width: 150px;
}

.minw200 {
    min-width: 200px;
}

.minh100 {
    min-height: 100px;
}

.minh150 {
    min-height: 150px;
}

.minh200 {
    min-height: 200px;
}

.hauto {
    height: auto !important;
}

.h10 {
    height: 10px !important;
}

.h20 {
    height: 20px !important;
}

.h30 {
    height: 30px !important;
}

.h40 {
    height: 40px !important;
}

.h50 {
    height: 50px !important;
}

.h60 {
    height: 60px !important;
}

.h70 {
    height: 70px !important;
}

.h80 {
    height: 80px !important;
}

.h90 {
    height: 90px !important;
}

.h100 {
    height: 100px !important;
}

.h110 {
    height: 110px !important;
}

.h120 {
    height: 120px !important;
}

.h130 {
    height: 130px !important;
}

.h140 {
    height: 140px !important;
}

.h150 {
    height: 150px !important;
}

.h160 {
    height: 160px !important;
}

.h170 {
    height: 170px !important;
}

.h180 {
    height: 180px !important;
}

.h190 {
    height: 190px !important;
}

.h200 {
    height: 200px !important;
}

.h210 {
    height: 210px !important;
}

.h220 {
    height: 220px !important;
}

.h230 {
    height: 230px !important;
}

.h240 {
    height: 240px !important;
}

.h250 {
    height: 250px !important;
}

.h260 {
    height: 260px !important;
}

.h270 {
    height: 270px !important;
}

.h280 {
    height: 280px !important;
}

.h290 {
    height: 290px !important;
}

.h300 {
    height: 300px !important;
}

.h350 {
    height: 300px !important;
}

.h400 {
    height: 400px !important;
}

.h450 {
    height: 450px !important;
}

.h500 {
    height: 500px !important;
}

.h600 {
    height: 600px !important;
}

.h700 {
    height: 700px !important;
}

.h800 {
    height: 800px !important;
}

.h900 {
    height: 900px !important;
}

.h1000 {
    height: 1000px !important;
}

.h165 {
    height: 165px !important;
}

.h50p {
    height: 50% !important;
}

.h100p {
    height: 100% !important;
}

.mauto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mrauto {
    margin-right: auto !important;
}

.mlauto {
    margin-left: auto !important;
}

.m0 {
    margin: 0px !important;
}

.m1 {
    margin: 1px !important;
}

.m2 {
    margin: 2px !important;
}

.m3 {
    margin: 3px !important;
}

.m4 {
    margin: 4px !important;
}

.m5 {
    margin: 5px !important;
}

.m6 {
    margin: 6px !important;
}

.m7 {
    margin: 7px !important;
}

.m8 {
    margin: 8px !important;
}

.m9 {
    margin: 9px !important;
}

.m10 {
    margin: 10px !important;
}

.m15 {
    margin: 15px !important;
}

.m20 {
    margin: 20px !important;
}

.m30 {
    margin: 30px !important;
}

.m40 {
    margin: 40px !important;
}

.m50 {
    margin: 50px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

.mb1 {
    margin-bottom: 1px !important;
}

.mb2 {
    margin-bottom: 2px !important;
}

.mb3 {
    margin-bottom: 3px !important;
}

.mb4 {
    margin-bottom: 4px !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mb6 {
    margin-bottom: 6px !important;
}

.mb7 {
    margin-bottom: 7px !important;
}

.mb8 {
    margin-bottom: 8px !important;
}

.mb9 {
    margin-bottom: 9px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb15 {
    margin-bottom: 15px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb25 {
    margin-bottom: 25px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb60 {
    margin-bottom: 60px !important;
}

.mb70 {
    margin-bottom: 70px !important;
}

.mb80 {
    margin-bottom: 80px !important;
}

.mb90 {
    margin-bottom: 90px !important;
}

.mb100 {
    margin-bottom: 100px !important;
}

.mb110 {
    margin-bottom: 110px !important;
}

.mb120 {
    margin-bottom: 120px !important;
}

.mb130 {
    margin-bottom: 130px !important;
}

.mb140 {
    margin-bottom: 140px !important;
}

.mb150 {
    margin-bottom: 150px !important;
}

.mb160 {
    margin-bottom: 160px !important;
}

.mb170 {
    margin-bottom: 170px !important;
}

.mb180 {
    margin-bottom: 180px !important;
}

.mb190 {
    margin-bottom: 190px !important;
}

.mb200 {
    margin-bottom: 200px !important;
}

.mb300 {
    margin-bottom: 300px !important;
}

.mt0 {
    margin-top: 0px !important;
}

.mt1 {
    margin-top: 1px !important;
}

.mt2 {
    margin-top: 2px !important;
}

.mt3 {
    margin-top: 3px !important;
}

.mt4 {
    margin-top: 4px !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt6 {
    margin-top: 6px !important;
}

.mt7 {
    margin-top: 7px !important;
}

.mt8 {
    margin-top: 8px !important;
}

.mt9 {
    margin-top: 9px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt25 {
    margin-top: 25px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mt50 {
    margin-top: 50px !important;
}

.mt60 {
    margin-top: 60px !important;
}

.mt70 {
    margin-top: 70px !important;
}

.mt80 {
    margin-top: 80px !important;
}

.mt90 {
    margin-top: 90px !important;
}

.mt100 {
    margin-top: 100px !important;
}

.mt110 {
    margin-top: 110px !important;
}

.mt120 {
    margin-top: 120px !important;
}

.mt130 {
    margin-top: 130px !important;
}

.mt140 {
    margin-top: 140px !important;
}

.mt150 {
    margin-top: 150px !important;
}

.mt160 {
    margin-top: 160px !important;
}

.mt170 {
    margin-top: 170px !important;
}

.mt180 {
    margin-top: 180px !important;
}

.mt190 {
    margin-top: 190px !important;
}

.mt200 {
    margin-top: 200px !important;
}

.mt300 {
    margin-top: 300px !important;
}

.mr0 {
    margin-right: 0px !important;
}

.mr1 {
    margin-right: 1px !important;
}

.mr2 {
    margin-right: 2px !important;
}

.mr3 {
    margin-right: 3px !important;
}

.mr4 {
    margin-right: 4px !important;
}

.mr5 {
    margin-right: 5px !important;
}

.mr6 {
    margin-right: 6px !important;
}

.mr7 {
    margin-right: 7px !important;
}

.mr8 {
    margin-right: 8px !important;
}

.mr9 {
    margin-right: 9px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mr15 {
    margin-right: 15px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.mr40 {
    margin-right: 40px !important;
}

.mr50 {
    margin-right: 50px !important;
}

.ml0 {
    margin-left: 0px !important;
}

.ml1 {
    margin-left: 1px !important;
}

.ml2 {
    margin-left: 2px !important;
}

.ml3 {
    margin-left: 3px !important;
}

.ml4 {
    margin-left: 4px !important;
}

.ml5 {
    margin-left: 5px !important;
}

.ml6 {
    margin-left: 6px !important;
}

.ml7 {
    margin-left: 7px !important;
}

.ml8 {
    margin-left: 8px !important;
}

.ml9 {
    margin-left: 9px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.ml15 {
    margin-left: 15px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.ml40 {
    margin-left: 40px !important;
}

.ml50 {
    margin-left: 50px !important;
}

.ml80 {
    margin-left: 80px !important;
}

.pauto {
    padding-left: auto !important;
    padding-right: auto !important;
}

.prauto {
    padding-right: auto !important;
}

.plauto {
    padding-left: auto !important;
}

.p0 {
    padding: 0px !important;
}

.p1 {
    padding: 1px !important;
}

.p2 {
    padding: 2px !important;
}

.p3 {
    padding: 3px !important;
}

.p4 {
    padding: 4px !important;
}

.p5 {
    padding: 5px !important;
}

.p6 {
    padding: 6px !important;
}

.p7 {
    padding: 7px !important;
}

.p8 {
    padding: 8px !important;
}

.p9 {
    padding: 9px !important;
}

.p10 {
    padding: 10px !important;
}

.p15 {
    padding: 15px !important;
}

.p20 {
    padding: 20px !important;
}

.p30 {
    padding: 30px !important;
}

.p40 {
    padding: 40px !important;
}

.p50 {
    padding: 50px !important;
}

.pb0 {
    padding-bottom: 0px !important;
}

.pb1 {
    padding-bottom: 1px !important;
}

.pb2 {
    padding-bottom: 2px !important;
}

.pb3 {
    padding-bottom: 3px !important;
}

.pb4 {
    padding-bottom: 4px !important;
}

.pb5 {
    padding-bottom: 5px !important;
}

.pb6 {
    padding-bottom: 6px !important;
}

.pb7 {
    padding-bottom: 7px !important;
}

.pb8 {
    padding-bottom: 8px !important;
}

.pb9 {
    padding-bottom: 9px !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb15 {
    padding-bottom: 15px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb25 {
    padding-bottom: 25px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb50 {
    padding-bottom: 50px !important;
}

.pb60 {
    padding-bottom: 60px !important;
}

.pb70 {
    padding-bottom: 70px !important;
}

.pb80 {
    padding-bottom: 80px !important;
}

.pb90 {
    padding-bottom: 90px !important;
}

.pb100 {
    padding-bottom: 100px !important;
}

.pb110 {
    padding-bottom: 110px !important;
}

.pb120 {
    padding-bottom: 120px !important;
}

.pb130 {
    padding-bottom: 130px !important;
}

.pb140 {
    padding-bottom: 140px !important;
}

.pb150 {
    padding-bottom: 150px !important;
}

.pb160 {
    padding-bottom: 160px !important;
}

.pb170 {
    padding-bottom: 170px !important;
}

.pb180 {
    padding-bottom: 180px !important;
}

.pb190 {
    padding-bottom: 190px !important;
}

.pb200 {
    padding-bottom: 200px !important;
}

.pb300 {
    padding-bottom: 300px !important;
}

.pt0 {
    padding-top: 0px !important;
}

.pt1 {
    padding-top: 1px !important;
}

.pt2 {
    padding-top: 2px !important;
}

.pt3 {
    padding-top: 3px !important;
}

.pt4 {
    padding-top: 4px !important;
}

.pt5 {
    padding-top: 5px !important;
}

.pt6 {
    padding-top: 6px !important;
}

.pt7 {
    padding-top: 7px !important;
}

.pt8 {
    padding-top: 8px !important;
}

.pt9 {
    padding-top: 9px !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt15 {
    padding-top: 15px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt25 {
    padding-top: 25px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pt50 {
    padding-top: 50px !important;
}

.pt60 {
    padding-top: 60px !important;
}

.pt70 {
    padding-top: 70px !important;
}
.pt75 {
    padding-top: 75px !important;
}
.pt80 {
    padding-top: 80px !important;
}

.pt90 {
    padding-top: 90px !important;
}

.pt100 {
    padding-top: 100px !important;
}

.pt110 {
    padding-top: 110px !important;
}

.pt120 {
    padding-top: 120px !important;
}

.pt130 {
    padding-top: 130px !important;
}

.pt140 {
    padding-top: 140px !important;
}

.pt150 {
    padding-top: 150px !important;
}

.pt160 {
    padding-top: 160px !important;
}

.pt170 {
    padding-top: 170px !important;
}

.pt180 {
    padding-top: 180px !important;
}

.pt190 {
    padding-top: 190px !important;
}

.pt200 {
    padding-top: 200px !important;
}

.pt300 {
    padding-top: 300px !important;
}

.pr0 {
    padding-right: 0px !important;
}

.pr1 {
    padding-right: 1px !important;
}

.pr2 {
    padding-right: 2px !important;
}

.pr3 {
    padding-right: 3px !important;
}

.pr4 {
    padding-right: 4px !important;
}

.pr5 {
    padding-right: 5px !important;
}

.pr6 {
    padding-right: 6px !important;
}

.pr7 {
    padding-right: 7px !important;
}

.pr8 {
    padding-right: 8px !important;
}

.pr9 {
    padding-right: 9px !important;
}

.pr10 {
    padding-right: 10px !important;
}

.pr15 {
    padding-right: 15px !important;
}

.pr20 {
    padding-right: 20px !important;
}

.pr30 {
    padding-right: 30px !important;
}

.pr35 {
    padding-right: 35px !important;
}

.pr40 {
    padding-right: 40px !important;
}

.pr45 {
    padding-right: 45px !important;
}

.pr50 {
    padding-right: 50px !important;
}

.pl0 {
    padding-left: 0px !important;
}

.pl1 {
    padding-left: 1px !important;
}

.pl2 {
    padding-left: 2px !important;
}

.pl3 {
    padding-left: 3px !important;
}

.pl4 {
    padding-left: 4px !important;
}

.pl5 {
    padding-left: 5px !important;
}

.pl6 {
    padding-left: 6px !important;
}

.pl7 {
    padding-left: 7px !important;
}

.pl8 {
    padding-left: 8px !important;
}

.pl9 {
    padding-left: 9px !important;
}

.pl10 {
    padding-left: 10px !important;
}

.pl15 {
    padding-left: 15px !important;
}

.pl20 {
    padding-left: 20px !important;
}

.pl30 {
    padding-left: 30px !important;
}

.pl35 {
    padding-left: 35px !important;
}

.pl40 {
    padding-left: 40px !important;
}

.pl45 {
    padding-left: 45px !important;
}

.pl50 {
    padding-left: 50px !important;
}


/**** icon ****/
.icon, [class^="icon-"], [class*=" icon-"] {
    font-family: "icon";
    speak: none;
    font-size: inherit;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: inherit;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* alias */
.icon-clock:before {
    content: "\e648";
}

.icon-clock-fill:before {
    content: "\e649";
}

.icon-info:before {
    content: "\e6f7";
}

.icon-info-fill:before {
    content: "\e6f8";
}

.icon-header-nav-arrow-down:before {
    content: "\e7af";
}

.icon-header-nav-arrow-right:before {
    content: "\e8cb";
}

.icon-footer-scroller-arrow-up:before {
    content: "\e8ca";
}

.icon-pager-prev:before {
    content: "\e8c8";
}

.icon-pager-next:before {
    content: "\e8cb";
}

.icon-schedule:before {
    content: "\e6b3";
}

.icon-teacher:before {
    content: "\e95f";
}

.icon-staff:before {
    content: "\e611";
}

.icon-curriculum:before {
    content: "\e626";
}

.icon-fixing:before {
    content: "\e6f1";
}

.icon-review:before {
    content: "\e6d0";
}

.icon-search:before {
    content: "\e67f";
}

.icon-arrow-up-small:before {
    content: "\e8c3";
}

.icon-arrow-down-small:before {
    content: "\e8c2";
}

.icon-arrow-left-small:before {
    content: "\e8c1";
}

.icon-arrow-right-small:before {
    content: "\e8c4";
}

.icon-arrow-up:before {
    content: "\e8ca";
}

.icon-arrow-down:before {
    content: "\e8c9";
}

.icon-arrow-left:before {
    content: "\e8c8";
}

.icon-arrow-right:before {
    content: "\e8cb";
}

.icon-star-fill:before {
    content: "\e6d0";
}

.icon-star-half:before {
    content: "\e6cf";
}

.icon-star-empty:before {
    content: "\e6ce";
}

.icon-information-forward:before {
    content: "\e800";
}

.icon-facebook:before {
    content: "\e76a";
    color: #3b5999;
}

.icon-googleplus:before {
    content: "\e766";
    color: #db4a39;
}

.icon-twitter:before {
    content: "\e76e";
    color: #55acee;
}

.icon-skype:before {
    content: "\e79d";
    color: #009fe3;
}

.icon-close:before {
    content: "\e6fa";
}

.icon-closed:before {
    content: "\e6fd";
}

.icon-cancel:before {
    content: "\e6fd";
}

.icon-error:before {
    content: "\e87b";
}

.icon-required:before {
    content: "\e6fb";
    color: #d38b8b;
}

.icon-coupons:before {
    content: "\e88e";
}

.icon-tickets:before {
    content: "\e890";
}

.icon-group:before {
    content: "\e66f";
}

.icon-status-on:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #9fdf7b;
    border-radius: 6px;
    border: 1px solid #9fdf7b;
}

.icon-status-off:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-radius: 6px;
    border: 1px solid #9fdf7b;
}

.icon-sns:before {
    content: "\e6c1";
}

.icon-sns-teacher:before {
    content: "\e95f";
    margin-left: 4px;
}

.icon-sns-staff:before {
    content: "\e611";
    margin-left: 5px;
    position: relative;
    top: -1px;
}

.icon-sns-student {
    display: none;
}

.icon-sns-student:before {
    content: "";
    display: none;
}

.icon-entry-public:before {
    content: "\e8c2";
}

.icon-entry-required_approval:before {
    content: "\e831"; /*color:#d94d38;*/
}

.icon-entry-rejected:before {
    content: "\e6f9";
    color: #ee0000;
}

.ticket-status-invalid {
    color: #d94d38;
}

.ticket-status-inactive {
    color: #d94d38;
}

.ticket-status-expired {
    color: #d94d38;
}

.ticket-status-completed {
    color: #c7cad3;
}

.ticket-status-active {
    color: #c7cad3;
}


/**** country-flag ****/
[class^="country-flag-"] {
    display: inline-block;
    background: #f3f3f3 url(../images/country-flag/sprite.png) top left no-repeat;
    background-size: 16px 2346px;
    width: 16px;
    line-height: inherit;
    vertical-align: middle;
}

[class^="country-flag-"].border {
    border: 1px solid #e1e1e1;
}

.country-flag-afg {
    background-position: 0 -0px;
    height: 10px;
}

.country-flag-alb {
    background-position: 0 -10px;
    height: 11px;
}

.country-flag-ata {
    background-position: 0 -21px;
    height: 10px;
}

.country-flag-dza {
    background-position: 0 -31px;
    height: 10px;
}

.country-flag-asm {
    background-position: 0 -41px;
    height: 8px;
}

.country-flag-and {
    background-position: 0 -49px;
    height: 11px;
}

.country-flag-ago {
    background-position: 0 -60px;
    height: 10px;
}

.country-flag-atg {
    background-position: 0 -70px;
    height: 10px;
}

.country-flag-aze {
    background-position: 0 -80px;
    height: 8px;
}

.country-flag-arg {
    background-position: 0 -88px;
    height: 10px;
}

.country-flag-aus {
    background-position: 0 -98px;
    height: 8px;
}

.country-flag-aut {
    background-position: 0 -106px;
    height: 10px;
}

.country-flag-bhs {
    background-position: 0 -116px;
    height: 8px;
}

.country-flag-bhr {
    background-position: 0 -124px;
    height: 9px;
}

.country-flag-bgd {
    background-position: 0 -133px;
    height: 9px;
}

.country-flag-arm {
    background-position: 0 -142px;
    height: 8px;
}

.country-flag-brb {
    background-position: 0 -150px;
    height: 10px;
}

.country-flag-bel {
    background-position: 0 -160px;
    height: 14px;
}

.country-flag-bmu {
    background-position: 0 -174px;
    height: 8px;
}

.country-flag-btn {
    background-position: 0 -182px;
    height: 10px;
}

.country-flag-bol {
    background-position: 0 -192px;
    height: 11px;
}

.country-flag-bih {
    background-position: 0 -203px;
    height: 8px;
}

.country-flag-bwa {
    background-position: 0 -211px;
    height: 10px;
}

.country-flag-bvt {
    background-position: 0 -221px;
    height: 11px;
}

.country-flag-bra {
    background-position: 0 -232px;
    height: 11px;
}

.country-flag-blz {
    background-position: 0 -243px;
    height: 10px;
}

.country-flag-iot {
    background-position: 0 -253px;
    height: 8px;
}

.country-flag-slb {
    background-position: 0 -261px;
    height: 8px;
}

.country-flag-vgb {
    background-position: 0 -269px;
    height: 8px;
}

.country-flag-brn {
    background-position: 0 -277px;
    height: 8px;
}

.country-flag-bgr {
    background-position: 0 -285px;
    height: 9px;
}

.country-flag-mmr {
    background-position: 0 -294px;
    height: 10px;
}

.country-flag-bdi {
    background-position: 0 -304px;
    height: 9px;
}

.country-flag-blr {
    background-position: 0 -313px;
    height: 8px;
}

.country-flag-khm {
    background-position: 0 -321px;
    height: 10px;
}

.country-flag-cmr {
    background-position: 0 -331px;
    height: 10px;
}

.country-flag-can {
    background-position: 0 -341px;
    height: 8px;
}

.country-flag-cpv {
    background-position: 0 -349px;
    height: 9px;
}

.country-flag-cym {
    background-position: 0 -358px;
    height: 8px;
}

.country-flag-caf {
    background-position: 0 -366px;
    height: 10px;
}

.country-flag-lka {
    background-position: 0 -376px;
    height: 8px;
}

.country-flag-tcd {
    background-position: 0 -384px;
    height: 10px;
}

.country-flag-chl {
    background-position: 0 -394px;
    height: 10px;
}

.country-flag-chn {
    background-position: 0 -404px;
    height: 10px;
}

.country-flag-twn {
    background-position: 0 -414px;
    height: 10px;
}

.country-flag-cxr {
    background-position: 0 -424px;
    height: 8px;
}

.country-flag-cck {
    background-position: 0 -432px;
    height: 8px;
}

.country-flag-col {
    background-position: 0 -440px;
    height: 10px;
}

.country-flag-com {
    background-position: 0 -450px;
    height: 9px;
}

.country-flag-myt {
    background-position: 0 -459px;
    height: 10px;
}

.country-flag-cog {
    background-position: 0 -469px;
    height: 10px;
}

.country-flag-cod {
    background-position: 0 -479px;
    height: 12px;
}

.country-flag-cok {
    background-position: 0 -491px;
    height: 8px;
}

.country-flag-cri {
    background-position: 0 -499px;
    height: 9px;
}

.country-flag-hrv {
    background-position: 0 -508px;
    height: 8px;
}

.country-flag-cub {
    background-position: 0 -516px;
    height: 8px;
}

.country-flag-cyp {
    background-position: 0 -524px;
    height: 10px;
}

.country-flag-cze {
    background-position: 0 -534px;
    height: 10px;
}

.country-flag-ben {
    background-position: 0 -544px;
    height: 10px;
}

.country-flag-dnk {
    background-position: 0 -554px;
    height: 12px;
}

.country-flag-dma {
    background-position: 0 -566px;
    height: 8px;
}

.country-flag-dom {
    background-position: 0 -574px;
    height: 10px;
}

.country-flag-ecu {
    background-position: 0 -584px;
    height: 10px;
}

.country-flag-slv {
    background-position: 0 -594px;
    height: 9px;
}

.country-flag-gnq {
    background-position: 0 -603px;
    height: 10px;
}

.country-flag-eth {
    background-position: 0 -613px;
    height: 8px;
}

.country-flag-eri {
    background-position: 0 -621px;
    height: 8px;
}

.country-flag-est {
    background-position: 0 -629px;
    height: 10px;
}

.country-flag-fro {
    background-position: 0 -639px;
    height: 11px;
}

.country-flag-flk {
    background-position: 0 -650px;
    height: 8px;
}

.country-flag-sgs {
    background-position: 0 -658px;
    height: 8px;
}

.country-flag-fji {
    background-position: 0 -666px;
    height: 8px;
}

.country-flag-fin {
    background-position: 0 -674px;
    height: 10px;
}

.country-flag-ala {
    background-position: 0 -684px;
    height: 10px;
}

.country-flag-fra {
    background-position: 0 -694px;
    height: 10px;
}

.country-flag-guf {
    background-position: 0 -704px;
    height: 10px;
}

.country-flag-pyf {
    background-position: 0 -714px;
    height: 10px;
}

.country-flag-atf {
    background-position: 0 -724px;
    height: 10px;
}

.country-flag-dji {
    background-position: 0 -734px;
    height: 10px;
}

.country-flag-gab {
    background-position: 0 -744px;
    height: 12px;
}

.country-flag-geo {
    background-position: 0 -756px;
    height: 10px;
}

.country-flag-gmb {
    background-position: 0 -766px;
    height: 10px;
}

.country-flag-pse {
    background-position: 0 -776px;
    height: 8px;
}

.country-flag-deu {
    background-position: 0 -784px;
    height: 9px;
}

.country-flag-gha {
    background-position: 0 -793px;
    height: 10px;
}

.country-flag-gib {
    background-position: 0 -803px;
    height: 8px;
}

.country-flag-kir {
    background-position: 0 -811px;
    height: 8px;
}

.country-flag-grc {
    background-position: 0 -819px;
    height: 10px;
}

.country-flag-grl {
    background-position: 0 -829px;
    height: 10px;
}

.country-flag-grd {
    background-position: 0 -839px;
    height: 9px;
}

.country-flag-glp {
    background-position: 0 -848px;
    height: 10px;
}

.country-flag-gum {
    background-position: 0 -858px;
    height: 8px;
}

.country-flag-gtm {
    background-position: 0 -866px;
    height: 10px;
}

.country-flag-gin {
    background-position: 0 -876px;
    height: 10px;
}

.country-flag-guy {
    background-position: 0 -886px;
    height: 9px;
}

.country-flag-hti {
    background-position: 0 -895px;
    height: 9px;
}

.country-flag-hmd {
    background-position: 0 -904px;
    height: 8px;
}

.country-flag-vat {
    background-position: 0 -912px;
    height: 16px;
}

.country-flag-hnd {
    background-position: 0 -928px;
    height: 8px;
}

.country-flag-hkg {
    background-position: 0 -936px;
    height: 10px;
}

.country-flag-hun {
    background-position: 0 -946px;
    height: 8px;
}

.country-flag-isl {
    background-position: 0 -954px;
    height: 11px;
}

.country-flag-ind {
    background-position: 0 -965px;
    height: 10px;
}

.country-flag-idn {
    background-position: 0 -975px;
    height: 10px;
}

.country-flag-irn {
    background-position: 0 -985px;
    height: 9px;
}

.country-flag-irq {
    background-position: 0 -994px;
    height: 10px;
}

.country-flag-irl {
    background-position: 0 -1004px;
    height: 8px;
}

.country-flag-isr {
    background-position: 0 -1012px;
    height: 11px;
}

.country-flag-ita {
    background-position: 0 -1023px;
    height: 10px;
}

.country-flag-civ {
    background-position: 0 -1033px;
    height: 10px;
}

.country-flag-jam {
    background-position: 0 -1043px;
    height: 8px;
}

.country-flag-jpn {
    background-position: 0 -1051px;
    height: 10px;
}

.country-flag-kaz {
    background-position: 0 -1061px;
    height: 8px;
}

.country-flag-jor {
    background-position: 0 -1069px;
    height: 8px;
}

.country-flag-ken {
    background-position: 0 -1077px;
    height: 10px;
}

.country-flag-prk {
    background-position: 0 -1087px;
    height: 8px;
}

.country-flag-kor {
    background-position: 0 -1095px;
    height: 10px;
}

.country-flag-kwt {
    background-position: 0 -1105px;
    height: 8px;
}

.country-flag-kgz {
    background-position: 0 -1113px;
    height: 9px;
}

.country-flag-lao {
    background-position: 0 -1122px;
    height: 10px;
}

.country-flag-lbn {
    background-position: 0 -1132px;
    height: 10px;
}

.country-flag-lso {
    background-position: 0 -1142px;
    height: 10px;
}

.country-flag-lva {
    background-position: 0 -1152px;
    height: 8px;
}

.country-flag-lbr {
    background-position: 0 -1160px;
    height: 8px;
}

.country-flag-lby {
    background-position: 0 -1168px;
    height: 8px;
}

.country-flag-lie {
    background-position: 0 -1176px;
    height: 9px;
}

.country-flag-ltu {
    background-position: 0 -1185px;
    height: 9px;
}

.country-flag-lux {
    background-position: 0 -1194px;
    height: 9px;
}

.country-flag-mac {
    background-position: 0 -1203px;
    height: 10px;
}

.country-flag-mdg {
    background-position: 0 -1213px;
    height: 10px;
}

.country-flag-mwi {
    background-position: 0 -1223px;
    height: 10px;
}

.country-flag-mys {
    background-position: 0 -1233px;
    height: 8px;
}

.country-flag-mdv {
    background-position: 0 -1241px;
    height: 10px;
}

.country-flag-mli {
    background-position: 0 -1251px;
    height: 10px;
}

.country-flag-mlt {
    background-position: 0 -1261px;
    height: 10px;
}

.country-flag-mtq {
    background-position: 0 -1271px;
    height: 10px;
}

.country-flag-mrt {
    background-position: 0 -1281px;
    height: 10px;
}

.country-flag-mus {
    background-position: 0 -1291px;
    height: 10px;
}

.country-flag-mex {
    background-position: 0 -1301px;
    height: 9px;
}

.country-flag-mco {
    background-position: 0 -1310px;
    height: 13px;
}

.country-flag-mng {
    background-position: 0 -1323px;
    height: 8px;
}

.country-flag-mda {
    background-position: 0 -1331px;
    height: 8px;
}

.country-flag-mne {
    background-position: 0 -1339px;
    height: 8px;
}

.country-flag-msr {
    background-position: 0 -1347px;
    height: 8px;
}

.country-flag-mar {
    background-position: 0 -1355px;
    height: 10px;
}

.country-flag-moz {
    background-position: 0 -1365px;
    height: 10px;
}

.country-flag-omn {
    background-position: 0 -1375px;
    height: 8px;
}

.country-flag-nam {
    background-position: 0 -1383px;
    height: 10px;
}

.country-flag-nru {
    background-position: 0 -1393px;
    height: 8px;
}

.country-flag-npl {
    background-position: 0 -1401px;
    height: 19px;
}

.country-flag-nld {
    background-position: 0 -1420px;
    height: 10px;
}

.country-flag-cuw {
    background-position: 0 -1430px;
    height: 10px;
}

.country-flag-abw {
    background-position: 0 -1440px;
    height: 10px;
}

.country-flag-sxm {
    background-position: 0 -1450px;
    height: 10px;
}

.country-flag-bes {
    background-position: 0 -1460px;
    height: 10px;
}

.country-flag-ncl {
    background-position: 0 -1470px;
    height: 8px;
}

.country-flag-vut {
    background-position: 0 -1478px;
    height: 9px;
}

.country-flag-nzl {
    background-position: 0 -1487px;
    height: 8px;
}

.country-flag-nic {
    background-position: 0 -1495px;
    height: 9px;
}

.country-flag-ner {
    background-position: 0 -1504px;
    height: 13px;
}

.country-flag-nga {
    background-position: 0 -1517px;
    height: 8px;
}

.country-flag-niu {
    background-position: 0 -1525px;
    height: 8px;
}

.country-flag-nfk {
    background-position: 0 -1533px;
    height: 8px;
}

.country-flag-nor {
    background-position: 0 -1541px;
    height: 11px;
}

.country-flag-mnp {
    background-position: 0 -1552px;
    height: 8px;
}

.country-flag-umi {
    background-position: 0 -1560px;
    height: 8px;
}

.country-flag-fsm {
    background-position: 0 -1568px;
    height: 8px;
}

.country-flag-mhl {
    background-position: 0 -1576px;
    height: 8px;
}

.country-flag-plw {
    background-position: 0 -1584px;
    height: 10px;
}

.country-flag-pak {
    background-position: 0 -1594px;
    height: 10px;
}

.country-flag-pan {
    background-position: 0 -1604px;
    height: 10px;
}

.country-flag-png {
    background-position: 0 -1614px;
    height: 12px;
}

.country-flag-pry {
    background-position: 0 -1626px;
    height: 9px;
}

.country-flag-per {
    background-position: 0 -1635px;
    height: 10px;
}

.country-flag-phl {
    background-position: 0 -1645px;
    height: 8px;
}

.country-flag-pcn {
    background-position: 0 -1653px;
    height: 8px;
}

.country-flag-pol {
    background-position: 0 -1661px;
    height: 10px;
}

.country-flag-prt {
    background-position: 0 -1671px;
    height: 10px;
}

.country-flag-gnb {
    background-position: 0 -1681px;
    height: 8px;
}

.country-flag-tls {
    background-position: 0 -1689px;
    height: 8px;
}

.country-flag-pri {
    background-position: 0 -1697px;
    height: 10px;
}

.country-flag-qat {
    background-position: 0 -1707px;
    height: 6px;
}

.country-flag-reu {
    background-position: 0 -1713px;
    height: 10px;
}

.country-flag-rou {
    background-position: 0 -1723px;
    height: 10px;
}

.country-flag-rus {
    background-position: 0 -1733px;
    height: 10px;
}

.country-flag-rwa {
    background-position: 0 -1743px;
    height: 10px;
}

.country-flag-blm {
    background-position: 0 -1753px;
    height: 10px;
}

.country-flag-shn {
    background-position: 0 -1763px;
    height: 8px;
}

.country-flag-kna {
    background-position: 0 -1771px;
    height: 10px;
}

.country-flag-aia {
    background-position: 0 -1781px;
    height: 8px;
}

.country-flag-lca {
    background-position: 0 -1789px;
    height: 8px;
}

.country-flag-maf {
    background-position: 0 -1797px;
    height: 10px;
}

.country-flag-spm {
    background-position: 0 -1807px;
    height: 10px;
}

.country-flag-vct {
    background-position: 0 -1817px;
    height: 10px;
}

.country-flag-smr {
    background-position: 0 -1827px;
    height: 12px;
}

.country-flag-stp {
    background-position: 0 -1839px;
    height: 8px;
}

.country-flag-sau {
    background-position: 0 -1847px;
    height: 10px;
}

.country-flag-sen {
    background-position: 0 -1857px;
    height: 10px;
}

.country-flag-srb {
    background-position: 0 -1867px;
    height: 10px;
}

.country-flag-syc {
    background-position: 0 -1877px;
    height: 8px;
}

.country-flag-sle {
    background-position: 0 -1885px;
    height: 10px;
}

.country-flag-sgp {
    background-position: 0 -1895px;
    height: 10px;
}

.country-flag-svk {
    background-position: 0 -1905px;
    height: 10px;
}

.country-flag-vnm {
    background-position: 0 -1915px;
    height: 10px;
}

.country-flag-svn {
    background-position: 0 -1925px;
    height: 8px;
}

.country-flag-som {
    background-position: 0 -1933px;
    height: 10px;
}

.country-flag-zaf {
    background-position: 0 -1943px;
    height: 10px;
}

.country-flag-zwe {
    background-position: 0 -1953px;
    height: 8px;
}

.country-flag-esp {
    background-position: 0 -1961px;
    height: 10px;
}

.country-flag-ssd {
    background-position: 0 -1971px;
    height: 8px;
}

.country-flag-sdn {
    background-position: 0 -1979px;
    height: 8px;
}

.country-flag-esh {
    background-position: 0 -1987px;
    height: 8px;
}

.country-flag-sur {
    background-position: 0 -1995px;
    height: 10px;
}

.country-flag-sjm {
    background-position: 0 -2005px;
    height: 11px;
}

.country-flag-swz {
    background-position: 0 -2016px;
    height: 10px;
}

.country-flag-swe {
    background-position: 0 -2026px;
    height: 10px;
}

.country-flag-che {
    background-position: 0 -2036px;
    height: 16px;
}

.country-flag-syr {
    background-position: 0 -2052px;
    height: 10px;
}

.country-flag-tjk {
    background-position: 0 -2062px;
    height: 8px;
}

.country-flag-tha {
    background-position: 0 -2070px;
    height: 10px;
}

.country-flag-tgo {
    background-position: 0 -2080px;
    height: 10px;
}

.country-flag-tkl {
    background-position: 0 -2090px;
    height: 8px;
}

.country-flag-ton {
    background-position: 0 -2098px;
    height: 8px;
}

.country-flag-tto {
    background-position: 0 -2106px;
    height: 9px;
}

.country-flag-are {
    background-position: 0 -2115px;
    height: 8px;
}

.country-flag-tun {
    background-position: 0 -2123px;
    height: 10px;
}

.country-flag-tur {
    background-position: 0 -2133px;
    height: 10px;
}

.country-flag-tkm {
    background-position: 0 -2143px;
    height: 10px;
}

.country-flag-tca {
    background-position: 0 -2153px;
    height: 8px;
}

.country-flag-tuv {
    background-position: 0 -2161px;
    height: 8px;
}

.country-flag-uga {
    background-position: 0 -2169px;
    height: 10px;
}

.country-flag-ukr {
    background-position: 0 -2179px;
    height: 10px;
}

.country-flag-mkd {
    background-position: 0 -2189px;
    height: 8px;
}

.country-flag-egy {
    background-position: 0 -2197px;
    height: 10px;
}

.country-flag-gbr {
    background-position: 0 -2207px;
    height: 8px;
}

.country-flag-ggy {
    background-position: 0 -2215px;
    height: 10px;
}

.country-flag-jey {
    background-position: 0 -2225px;
    height: 9px;
}

.country-flag-imn {
    background-position: 0 -2234px;
    height: 8px;
}

.country-flag-tza {
    background-position: 0 -2242px;
    height: 10px;
}

.country-flag-usa {
    background-position: 0 -2252px;
    height: 8px;
}

.country-flag-vir {
    background-position: 0 -2260px;
    height: 10px;
}

.country-flag-bfa {
    background-position: 0 -2270px;
    height: 10px;
}

.country-flag-ury {
    background-position: 0 -2280px;
    height: 10px;
}

.country-flag-uzb {
    background-position: 0 -2290px;
    height: 8px;
}

.country-flag-ven {
    background-position: 0 -2298px;
    height: 10px;
}

.country-flag-wlf {
    background-position: 0 -2308px;
    height: 10px;
}

.country-flag-wsm {
    background-position: 0 -2318px;
    height: 8px;
}

.country-flag-yem {
    background-position: 0 -2326px;
    height: 10px;
}

.country-flag-zmb {
    background-position: 0 -2336px;
    height: 10px;
}

.country-flag-none {
    display: none;
}


/**** header ****/
body {
    padding: 44px 0 0 0;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 104;
    width: 100%;
    height: 42px;
    background-color: #4f4f4f;
    border-top: 2px solid #4f4f4f;
    border-bottom: 1px solid #5d5d5d;
    box-shadow: 0 1px 0 0 #4f4f4f;
}

header > .inner {
    width: 1020px;
    margin: 0 auto 0 auto;
    position: relative;
}

header .logo {
    position: absolute;
    top: 0;
    left: 10px;
    width: 120px;
    height: 42px;
}

header .logo > a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_new_logo_img.png) bottom left no-repeat;
    text-indent: -9999px;
}

header .jp_logo > a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_jp_new_2025_6_4.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}
header .logo_school > a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_school.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}
header .logo_lxj > a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_for_lxj.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}
header .logo_sky > a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_for_sky.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}
header .logo_ce > a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_for_ce.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}
header .logo_ds > a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_for_ds.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}
header .logo_hj > a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_for_hj.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}
header .logo_td > a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_for_td.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}
header .logo_ph {
    height: 34px
}
header .logo_ph > a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_for_ph.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}
header .navigation-bar {
    width: 120px;
    text-align: right;
    position: absolute;
    top: 0;
    left: 10px;
    font-size: 20px;
    line-height: 42px;
    vertical-align: middle;
}

header .navigation-bar a, header .navigation-bar span {
    color: #fff;
}

header .clock {
    position: absolute;
    top: 0;
    left: 150px;
}

header .clock [class^="icon-"] {
    color: #9a9a9a;
    font-size: 10px;
    line-height: 42px;
    vertical-align: middle;
}

header .clock span {
    color: #ffffff;
    font-size: 12px;
    line-height: 44px;
    vertical-align: middle;
}

header ul.nav {
    position: absolute;
    top: 0;
    right: 10px;
    display: table;
    height: 42px;
    font-size: 12px;
}

header ul.nav > li {
    display: table-cell;
    padding: 6px 2px 0 2px;
    text-align: center;
    vertical-align: top;
}

header ul.nav > li > a {
    display: block;
    height: 26px;
    padding: 1px 10px 0 10px;
    color: #ffffff;
    line-height: 26px;
    vertical-align: middle;
    border: 1px solid #4f4f4f;
    border-radius: 4px;
}

header ul.nav > li > a:hover {
    border-color: #787878;
}

header ul.nav > li > a > img.thumb {
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin: 0 4px 0 0;
}

header ul.nav > li.active > a {
    position: relative;
    z-index: 12;
    border-color: #ffffff;
    background-color: #ffffff;
    color: #000000;
    border-radius: 4px 4px 0 0;
    padding-bottom: 9px;
}

header ul.nav > li > .children {
    position: absolute;
    top: 44px;
    z-index: 11;
    padding: 10px 0 3px 0;
    background-color: #ffffff;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

header ul.nav > li > ul.children > li {
    display: block;
    text-align: left;
    padding: 0 12px 12px 12px;
}

header ul.nav > li > ul.children > li > a {
    display: block;
    color: #000000;
    position: relative;
}

header ul.nav > li > ul.children > li:hover > a {
    color: #418abb;
    text-decoration: underline;
}

header ul.nav > li > ul.children > li > .children {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    padding: 10px 0 3px 0;
    background-color: #ffffff;
    border-radius: 0 0 4px 4px;
    box-shadow: 1px 0 2px 1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

header ul.nav > li > ul.children > li > ul.children > li {
    text-align: left;
    padding: 0 12px 12px 12px;
}

header ul.nav > li > ul.children > li > ul.children > li > a {
    color: #000000;
}

header ul.nav > li > ul.children > li > ul.children > li:hover > a {
    color: #418abb;
    text-decoration: underline;
}

header ul.nav > li > a > [class^="icon-"] {
    color: #9a9a9a;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

header ul.nav > li.active > a > [class^="icon-"] {
    color: #666666;
}

header ul.nav > li.active > a > img.thumb {
    border-color: #dadada;
}

header ul.nav > li > a > .badge {
    display: inline-block;
    min-width: 12px;
    height: 13px;
    color: #ffffff;
    font-size: 9px;
    line-height: 13px;
    padding: 1px 1px 0 1px;
    text-align: center;
    vertical-align: middle;
    background-color: #ee3344;
    border: 1px solid #ee5566;
    font-weight: bold;
    white-space: nowrap;
}

header ul.nav > li > ul.children > li > a > .icon-header-nav-arrow-right {
    position: absolute;
    top: 0;
    right: 0;
    color: #d6d6d6;
}

/* children width */
header ul.nav > li.mylesson > .children {
    width: 168px;
}

header ul.nav > li.account > .children {
    width: 150px;
}

header ul.nav > li.help > .children {
    width: 140px;
}

/* border controll */
header ul.nav {
    border-left: 1px solid #414141;
}

header ul.nav > li.notification {
    border-left: 1px solid #5d5d5d;
    border-right: 1px solid #414141;
}

header ul.nav > li.mylesson {
    border-left: 1px solid #5d5d5d;
}

/* notification */
header ul.nav > li.notification > .children {
    padding: 0px 0 5px 0;
}

header ul.nav > li.notification > .children ul {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}

header ul.nav > li.notification > .children ul > li {
    clear: both;
    display: box;
    width: 280px;
    margin: 0;
    padding: 8px;
    text-align: left;
    border-top: 1px solid #dadada;
    white-space: normal;
    cursor: pointer;
}

header ul.nav > li.notification > .children ul > li:hover {
    background-color: #fcfcfc;
}

header ul.nav > li.notification > .children ul > li:first-child {
    border-top: none;
}

header ul.nav > li.notification > .children ul > li:after {
    content: '';
    display: block;
    clear: both;
}

header ul.nav > li.notification > .children ul > li > dl {
    display: table;
    width: 100%;
}

header ul.nav > li.notification > .children ul > li > dl > dt {
    display: table-cell;
    width: 58px;
    text-align: left;
    vertical-align: top;
}

header ul.nav > li.notification > .children ul > li > dl > dt img.thumb {
    width: 50px;
    height: 50px;
    background-color: #eeeeee;
    border: 1px solid #dadada;
}

header ul.nav > li.notification > .children ul > li > dl > dd {
    display: table-cell;
    text-align: left;
    vertical-align: top;
}

header ul.nav > li.notification > .children ul > li > dl > dd > div {
    font-size: 12px;
    color: #666666;
}

header ul.nav > li.notification > .children ul > li > dl > dd > div > a {
    color: #333333;
    font-weight: bold;
}

header ul.nav > li.notification > .children ul > li > dl > dd > p {
    font-size: 11px;
    margin-top: 2px;
}

header ul.nav > li.notification > .children ul > li > dl > dd > em {
    display: block;
    font-size: 11px;
    margin-top: 2px;
    color: #999999;
}

header ul.nav > li.notification > .children ul > li.unread {
    border-left: 3px solid #418abb;
}

header ul.nav > li.notification > .children a.more {
    display: block;
    padding: 5px 0 0 0;
    text-align: center;
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
}

header ul.nav > li.notification > .children a.more:hover {
    text-decoration: underline;
}

header ul.nav > li.notification > .children .none {
    width: 200px;
    color: #999999;
    font-size: 12px;
    line-height: 100px;
    text-align: center;
    vertical-align: middle;
}

header ul.nav > li.notification > .children .progress {
    width: 200px;
    height: 100px;
}

header ul.nav > li.notification > .children .progress .indicator {
    position: absolute;
    top: 50px;
    left: 100px;
}

/* account */
header ul.nav > li.account > .children > li.family > div.children {
    padding: 0 0 5px 0;
    min-width: 150px;
}

header ul.nav > li.account > .children > li.family > div.children ul {
    margin: 0;
    padding: 0;
}

header ul.nav > li.account > .children > li.family > div.children ul > li {
    margin: 0;
    padding: 10px;
    border-top: 1px solid #eeeeee;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    max-width: 170px;
    overflow: hidden;
}

header ul.nav > li.account > .children > li.family > div.children ul > li:first-child {
    border-top: none;
}

header ul.nav > li.account > .children > li.family > div.children ul > li:hover {
    background-color: #f2f3f4;
}

header ul.nav > li.account > .children > li.family > div.children ul > li > a {
    color: #000000;
}

header ul.nav > li.account > .children > li.family > div.children ul > li > a > img.thumb {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-color: #eeeeee;
    border: 1px solid #dadada;
    margin: 0 8px 0 0;
}

header ul.nav > li.account > .children > li.family > div.children ul > li.checked:after {
    content: "\e6fe";
    position: absolute;
    top: 12px;
    right: 10px;
    text-align: right;
    vertical-align: middle;
    font-size: 10px;
    font-family: "icon";
    color: #aaaaaa;
}

header ul.nav > li.account > .children > li.family > div.children div.none {
    padding: 20px 20px 20px 20px;
    color: #999999;
    font-size: 11px;
    text-align: center;
}

header ul.nav > li.account > .children > li.family > div.children a.more {
    display: block;
    padding: 5px 20px 0 20px;
    text-align: center;
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
}

header ul.nav > li.account > .children > li.family > div.children a.more:hover {
    text-decoration: underline;
}

header ul.nav > li.account > .children > li.family > div.children .progress {
    width: 130px;
    height: 80px;
}

header ul.nav > li.account > .children > li.family > div.children .progress .indicator {
    position: absolute;
    top: 40px;
    left: 70px;
}

/* account > lang (for debug) */
header ul.nav > li.account > .children > li.lang > .children > li {
    position: relative;
    padding-right: 30px;
}

header ul.nav > li.account > .children > li.lang > .children > li.checked:after {
    content: "\e6fe";
    position: absolute;
    top: 2px;
    right: 10px;
    text-align: right;
    vertical-align: middle;
    font-size: 10px;
    font-family: "icon";
    color: #aaaaaa;
}

/* account > time_zone (for debug) */
header ul.nav > li.account > .children > li.time_zone > .children > li {
    position: relative;
    padding-right: 30px;
    font-size: 11px;
}

header ul.nav > li.account > .children > li.time_zone > .children > li.checked:after {
    content: "\e6fe";
    position: absolute;
    top: 2px;
    right: 10px;
    text-align: right;
    vertical-align: middle;
    font-size: 10px;
    font-family: "icon";
    color: #aaaaaa;
}

/* register */
header ul.nav > li.register {
    padding-left: 10px;
}

header ul.nav > li.register > a {
    display: block;
    height: 26px;
    padding: 1px 25px 0 25px;
    color: #ffffff;
    line-height: 26px;
    vertical-align: middle;
    border: 1px solid #993311;
    border-radius: 0;
    background: #d94d38;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
}

header ul.nav > li.register > a:hover {
    box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
}

/* login */
header ul.nav > li.login > .children {
}

header ul.nav > li.login > .children > .inner {
    padding: 0 10px 6px 10px;
    text-align: left;
}

header ul.nav > li.login > .children > .inner > p {
    font-size: 11px;
    vertical-align: middle;
}

header ul.nav > li.login > .children > .inner > .form-checkbox {
    font-size: 11px;
}

header ul.nav > li.login > .children > .more {
    display: block;
    padding: 6px 0 0 10px;
    text-align: left;
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
    font-size: 11px;
}

header ul.nav > li.login > .children > .more > a:hover {
    text-decoration: underline;
}

/* sns */
header ul.nav > li.sns > a > .icon-sns {
    color: #cccccc;
    position: relative;
    top: -1px;
    left: -3px;
}

@media screen and (max-device-width: 640px) {
    header .clock {
        display: none;
    }
}


/**** footer ****/
footer {
    width: 100%;
    min-width: 1020px;
    margin: 90px 0 0 0;
    background-color: #ffffff;
    border-top: 1px solid #dddddd;
    position: relative;
}

footer > .top {
    width: 1000px;
    margin: 0 auto 0 auto;
    padding: 20px 10px 50px 10px;
    position: relative;
}

footer > .top:after {
    content: '';
    display: block;
    clear: both;
}

footer > .top > .scroller {
    position: absolute;
    top: -65px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background-color: #a5aaba;
    color: #ffffff;
    font-size: 17px;
    text-align: center;
    line-height: 32px;
    vertical-align: middle;
    cursor: pointer;
}

footer > .top > .scroller:hover {
    background-color: #888fa4;
}

footer > .top ul.banners {
    width: 1000px;
    height: 86px;
    margin: 0 0 20px 0;
    letter-spacing: -.40em;
    overflow: hidden;
}

footer > .top ul.banners > li {
    display: inline-block;
    letter-spacing: normal;
    width: 320px;
    height: 86px;
    margin: 0 0 0 20px;
    position: relative;
    border: 1px solid #e1e1e1;
    background-color: #ffffff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

footer > .top ul.banners > li:first-child {
    margin: 0;
}

footer > .top ul.banners > li a {
    position: absolute;
    top: 0;
    left: 0;
}

footer > .top ul.banners > li img {
    width: 100%;
}

footer > .top ul.banners > li img:hover {
    opacity: 0.75;
}

footer > .top ul.nav {
    display: block;
    float: left;
    width: 160px;
}

footer > .top ul.nav.double {
    width: 320px;
}

footer > .top ul.nav.divider {
    border-right: 1px solid #e8e8e8;
    margin-right: 20px;
}

footer > .top ul.nav > li {
    display: block;
    float: left;
    width: 160px;
    margin: 0 0 10px 0;
}

footer > .top ul.nav > li.heading {
    width: 100%;
    margin: 0 0 15px 0;
    font-weight: bold;
}

footer > .top ul.nav > li a {
    font-size: 12px;
    color: #858da3;
}

footer > .top ul.nav > li a:hover {
    color: #1da0d0;
}

footer > .top ul.nav > li .icon-sns {
    position: relative;
    top: -1px;
    left: -3px;
}

footer > .bottom {
    width: 100%;
    background-color: #2d2d2d;
    clear: both;
}

footer > .bottom > .inner {
    width: 1110px;
    margin: 0 auto 0 auto;
    padding: 20px 10px 100px 10px;
    position: relative;
}

footer > .bottom * {
    color: #929292;
    font-size: 11px;
}

footer > .bottom ul.nav {
    letter-spacing: -.40em;
}

footer > .bottom ul.nav > li {
    display: inline-block;
    letter-spacing: normal;
    padding: 0 12px 0 12px;
    border-right: 1px solid #000000;
    box-shadow: 1px 0 0 0 #676767;
}

footer > .bottom ul.nav > li:first-child {
    border-left: none;
    padding-left: 0;
}

footer > .bottom ul.nav > li > a:hover {
    color: #ffffff;
}

footer > .bottom .copyright {
    position: absolute;
    top: 18px;
    right: 115px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
}

footer > .bottom .logo {
    position: absolute;
    top: 18px;
    right: 10px;
    width: 100px;
    height: 20px;
}

footer > .bottom .logo > a {
    display: block;
    width: 100px;
    height: 20px;
    background: url(../images/common/logo.footer.png) center right no-repeat;
    text-indent: -9999px;
}

footer > .bottom .logo_jp > a {
    display: block;
    width: 100px;
    height: 20px;
    background: url(../images/common/logo.header_jp_new_2025_6_4.png) center right no-repeat;
    text-indent: -9999px;
    background-size: contain;
}

footer > .bottom .logo_school > a {
    display: block;
    width: 150px;
    height: 20px;
    background: url(../images/common/logo.header_school.png) center left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}
footer > .bottom .logo_ce > a {
    display: block;
    width: 100px;
    height: 20px;
    background: url(../images/common/logo.header_for_ce.png) center right no-repeat;
    text-indent: -9999px;
}
footer > .bottom .logo_ds > a {
    display: block;
    width: 100px;
    height: 20px;
    background: url(../images/common/logo.header_for_ds.png) center right no-repeat;
    text-indent: -9999px;
}
footer > .bottom .logo_hj > a {
    display: block;
    width: 100px;
    height: 20px;
    background: url(../images/common/logo.header_for_hj.png) center right no-repeat;
    text-indent: -9999px;
}
footer > .bottom .logo_td > a {
    display: block;
    width: 100px;
    height: 20px;
    background: url(../images/common/logo.header_for_td.png) center right no-repeat;
    text-indent: -9999px;
}
footer > .bottom .logo_ph > a {
    display: block;
    width: 100px;
    height: 20px;
    background: url(../images/common/logo.header_for_ph.png) center right no-repeat;
    text-indent: -9999px;
    background-size: 100%;
}
/**** grid ****/
.contents {
    clear: both;
    width: 1000px;
    margin: 0 auto 0 auto;
    padding: 0 10px 0 10px;
}

.contents:after {
    content: '';
    display: block;
    clear: both;
}

.contents > .left {
    width: 720px;
    margin: 0;
    padding: 0;
    float: left;
}

.contents > .right {
    width: 255px;
    margin: 0;
    padding: 0;
    float: right;
    position: relative;
}

.contents > .single {
    clear: both;
    width: 720px;
    margin: 0 auto 0 auto;
    padding: 0;
}

.contents > .full {
    clear: both;
    width: 1000px;
    margin: 0 auto 0 auto;
    padding: 0;
}

.contents > .left > .left {
    width: 350px;
    margin: 0;
    padding: 0;
    float: left;
}

.contents > .left > .right {
    width: 350px;
    margin: 0;
    padding: 0;
    float: right;
}

.contents > .left > .three-columns-left {
    width: 255px;
    margin: 0;
    padding: 0;
    float: left;
}

.contents > .left > .three-columns-center {
    width: 445px;
    margin: 0;
    padding: 0;
    float: right;
}

.contents > .left > .sns-columns-left {
    width: 195px;
    margin: 0;
    padding: 0;
    float: left;
}

.contents > .left > .sns-columns-center {
    width: 505px;
    margin: 0;
    padding: 0;
    float: right;
}

.contents > .left > .single {
    clear: both;
    width: 720px;
    margin: 0;
    padding: 0;
}

.contents > .left.table, .contents > .right.table, .contents > .single.table, .contents > .full.table, .contents > .left > .left.table, .contents > .left > .right.table {
    display: table;
}

.contents .table > .table-cell {
    display: table-cell;
    text-align: left;
    vertical-align: top;
}


/**** heading ****/
h1.heading {
    width: 1000px;
    margin: 0 auto 0 auto;
    padding: 0 10px 0 10px;
    color: #414756;
    font-size: 17px;
    font-weight: bold;
    line-height: 76px;
    vertical-align: middle;
}

h1.heading.large {
    font-size: 20px;
}

h1.heading.error {
    color: #ee0000 !important;
}

h1.heading.weak {
    font-weight: normal;
    font-size: 16px;
}

h1.heading > a {
    color: #414756;
}

h1.heading > a:hover {
    opacity: 0.75;
}

h2.heading {
    color: #414756;
    font-size: 17px;
    font-weight: normal;
    line-height: 76px;
    vertical-align: middle;
}

h2.heading.bluegray {
    color: #858da3 !important;
}

h2.heading.disk {
    position: relative;
    padding-left: 16px;
}

h2.heading.disk:before {
    content: "";
    position: absolute;
    top: 33px;
    left: 0;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #cccccc;
}

h2.heading.disk:after {
    content: "";
    position: absolute;
    top: 36px;
    left: 3px;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #f3f3f3;
}

h2.heading.disc {
    position: relative;
    padding-left: 16px;
}

h2.heading.disc:before {
    content: "";
    position: absolute;
    top: 33px;
    left: 0;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #cccccc;
}

h2.heading.disc:after {
    content: "";
    position: absolute;
    top: 36px;
    left: 3px;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #f3f3f3;
}

div.heading {
    padding: 0 0 0 20px;
    position: relative;
    vertical-align: middle;
}

div.heading:after {
    content: "\e8be";
    font-family: "icon";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 18px;
    line-height: 20px;
    color: #858da3;
    vertical-align: middle;
    opacity: 0.75;
}

.history-back {
    font-size: 11px !important;
    margin: -10px 0 5px 0;
}


ul.crumb {
    width: 1000px;
    margin: 0 auto 0 auto;
}

ul.crumb > li {
    display: inline-block;
    padding: 0;
    color: #414756;
    font-size: 13px;
    font-weight: normal;
    line-height: 76px;
    vertical-align: middle;
}

ul.crumb > li a {
    color: #414756;
}

ul.crumb > li a:hover {
    color: #777777;
}

ul.crumb > li + li:before {
    display: inline-block;
    content: "\e8c4";
    font-family: "icon";
    color: #999999;
    font-size: 11px;
    font-weight: normal;
    margin: 0 10px 0 3px;
    vertical-align: middle;
}

.heading-lead {
    width: 1000px;
    margin: -15px auto 20px auto;
    color: #858da3;
    font-size: 12px;
}

ul.heading-lead > li {
    display: inline-block;
    padding: 0;
    color: #858da3;
    font-size: 12px;
    font-weight: normal;
    vertical-align: middle;
}

ul.heading-lead > li a {
    color: #858da3;
}

ul.heading-lead > li a:hover {
    color: #1da0d0;
}

ul.heading-lead > li + li:before {
    display: inline-block;
    content: "\e8c4";
    font-family: "icon";
    color: #858da3;
    font-size: 11px;
    font-weight: normal;
    margin: 0 10px 0 3px;
    vertical-align: middle;
}


/**** message ****/
#message {
    position: fixed;
    top: 46px;
    left: 0;
    z-index: 20;
    width: 100%;
    background: transparent;
    overflow: hidden;
}

#message > .inner {
    position: relative;
    z-index: 21;
    padding: 25px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}

#message > .inner a.close {
    color: #ffffff;
}

#message > .inner a.close > .icon-close {
    font-size: 14px;
    font-weight: normal;
    margin-left: 10px;
}

#message > .inner a:hover > .icon-close {
    opacity: 0.8;
}

#message:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    background: #ced96c;
    opacity: 0.9;
}


/**** error ****/
.error {
    color: #ee0000;
}

/**** box ****/
.box {
    border: 1px solid #c7cad3;
    background-color: #ffffff;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.box.no-border {
    border: none;
}

.box.border-top {
    border: none;
    border-top: 1px solid #c7cad3;
}

.box.border-light {
    border-color: #e1e1e1;
}

.box.border-blue {
    border-color: #418abb;
}

.box.border-orange {
    border-color: #d94d38;
}

.box.border-red {
    border-color: #ee0000;
}

.box.border-purple {
    border-color: #d82974;
}

.box.clickable {
    cursor: pointer;
}

.box.clickable:hover {
    background-color: #f9f9f9;
}

.box.clickable:hover .thumb {
    opacity: 0.75;
}

.box.hover:hover {
    background: #fcfcfc;
}

.box.hover_with_op75:hover {
    opacity: 0.75;
}

.box.pointer {
    cursor: pointer;
}

.box.error {
    border-color: #ee0000;
}

.box.bg-transparent {
    background: transparent;
}

.box.bg-gray {
    background: #fcfcfc;
}

.box.bg-darkgray {
    background: #f3f3f3;
}

/* dl table */
dl.box.table {
    display: table;
    width: 100%;
}

dl.box.table > dt {
    display: table-cell;
}

dl.box.table > dd {
    display: table-cell;
}

/* message */
.box.message {
    border: none;
    background: #d94d38;
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
}

.box.message * {
    color: #ffffff;
}

/* balloon */
.box.balloon {
    position: relative;
}

.box.balloon:after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 49%;
    border-top: 14px solid #ffffff;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.box.balloon:before {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 49%;
    border-top: 14px solid #c7cad3;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.box.balloon.error:before {
    border-top-color: #ee0000;
}

.box.balloon.left-side:after {
    left: 40px;
}

.box.balloon.left-side:before {
    left: 40px;
}
.box.balloon.left-side-style:after {
    left: 15%;
}

.box.balloon.left-side-style:before {
    left: 15%;
}
.box.balloon.right-side-style:after {
    left: 82%;
}

.box.balloon.right-side-style:before {
    left: 82%;
}
.box.balloon.left-side-min-tip:after {
    left: 55px;
}

.box.balloon.left-side-min-tip:before {
    left: 55px;
}
/* tip */
.box.tip {
    position: relative;
    margin-bottom: 7px;
    padding: 1px 0 0 0;
    border-radius: 4px;
    color: #666666;
    font-size: 11px;
    font-weight: bold;
    line-height: 19px;
    text-align: center;
    vertical-align: bottom;
}

.box.tip:after {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: -6px;
    left: 49%;
    border-top: 8px solid #ffffff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.box.tip:before {
    content: '';
    position: absolute;
    z-index: 1;
    bottom: -8px;
    left: 49%;
    border-top: 8px solid #c7cad3;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.box.tip.error:before {
    border-top-color: #ee0000;
}

/* banner */
.box.banner {
}

.box.banner:hover {
    opacity: 0.75;
}

.box.banner img {
    width: 100%;
}


/* heading */
.box h1.heading {
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    line-height: 60px;
    vertical-align: middle;
    width: auto;
    margin: 0;
    padding: 0;
}

.box h2.heading {
    color: #757575;
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
    vertical-align: middle;
}

.box h2.heading > [class^="icon-"] {
    color: #b0b0b0;
    font-size: 16px;
    vertical-align: middle;
    margin-right: 3px;
}

.box .heading-with-border {
    padding: 0 10px 0 10px;
    border-bottom: 1px solid #c7cad3;
    background: #f6f6f6;
    font-size: 12px;
    line-height: 28px;
    vertical-align: middle;
    font-weight: bold;
    color: #505050;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
    position: relative;
    border: 1px solid #ffffff;
}

.box .heading-with-border > em {
    font-size: 12px;
    font-weight: normal;
    color: #aaaaaa;
    position: absolute;
    top: 0;
    right: 5px;
}


/* with-tabs */
.box.with-tabs {
    border: none;
    background: transparent;
}

.box.with-tabs > ul.tabs {
    height: 47px;
    position: relative;
}

.box.with-tabs > ul.tabs > li {
    display: block;
    height: 44px;
    position: absolute;
    top: 3px;
}

.box.with-tabs > ul.tabs > li > a {
    display: block;
    height: 44px;
    border: 1px solid #c7cad3;
    white-space: nowrap;
    overflow: hidden;
    color: #a4a4a4;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);
}

.box.with-tabs > ul.tabs > li > a:hover {
    color: #404040;
}

.box.with-tabs > ul.tabs > li > a > i {
    font-size: 14px;
    line-height: 44px;
    vertical-align: middle;
}

.box.with-tabs > ul.tabs > li.active {
    height: 47px;
    position: absolute;
    top: 0;
}

.box.with-tabs > ul.tabs > li.active > a {
    border-top: 2px solid #404040;
    border-bottom: none;
    height: 47px;
    color: #404040;
    background: #ffffff;
}

.box.with-tabs.with-tabs-1 > ul.tabs > li.first {
    width: 361px;
    left: 0;
    z-index: 1;
}

.box.with-tabs.with-tabs-1 > ul.tabs > li.first > a {
    height: 46px;
}

/*.box.with-tabs.with-tabs-1 > ul.tabs > li:after { content:""; display:block; position:absolute; top:3px; left:360px; z-index:2; width:360px; height:44px; border-bottom:1px solid #c7cad3; } */
.box.with-tabs.with-tabs-1 > ul.tabs > li:after {
    content: "";
    width: 358px;
    position: absolute;
    top: 3px;
    left: 360px;
    z-index: 2;
    display: block;
    height: 44px;
    border: 1px solid #c7cad3;
    white-space: nowrap;
    overflow: hidden;
    color: #a4a4a4;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);
}

.box.with-tabs.with-tabs-2 > ul.tabs > li.first {
    width: 361px;
    left: 0;
    z-index: 1;
}

.box.with-tabs.with-tabs-2 > ul.tabs > li.second {
    width: 360px;
    left: 360px;
    z-index: 2;
}

.box.with-tabs.with-tabs-3 > ul.tabs > li.first {
    width: 241px;
    left: 0;
    z-index: 1;
}

.box.with-tabs.with-tabs-3 > ul.tabs > li.second {
    width: 241px;
    left: 240px;
    z-index: 2;
}

.box.with-tabs.with-tabs-3 > ul.tabs > li.third {
    width: 240px;
    left: 480px;
    z-index: 3;
}

.box.with-tabs.with-tabs-4 > ul.tabs > li.first {
    width: 181px;
    left: 0;
    z-index: 1;
}

.box.with-tabs.with-tabs-4 > ul.tabs > li.second {
    width: 181px;
    left: 180px;
    z-index: 2;
}

.box.with-tabs.with-tabs-4 > ul.tabs > li.third {
    width: 181px;
    left: 360px;
    z-index: 3;
}

.box.with-tabs.with-tabs-4 > ul.tabs > li.fourth {
    width: 180px;
    left: 540px;
    z-index: 4;
}

.box.with-tabs > .content {
    background: #ffffff;
    border: 1px solid #c7cad3;
    border-top: none;
    padding: 12px 0 0 0;
}

.box.with-tabs > .content ul.btns {
    padding: 10px;
    background: #f9f9f9 url("../images/common/bg.dotted.png") top left repeat;
    border-top: 1px solid #c7cad3;
    text-align: center;
}

.box.with-tabs > .content ul.btns.with-form {
    border-top: none;
    border-bottom: 1px solid #e1e1e1;
}

.box.with-tabs > .content ul.btns.with-form.no-border {
    border-bottom: none;
}

.box.with-tabs > .content ul.btns > li {
    display: inline;
    vertical-align: middle;
}

.box.with-tabs > .content ul.btns > li + li {
    margin-left: 4px;
}

/* informations */
.box.informations {
}

.box.informations > .heading {
    position: relative;
    border-bottom: 1px solid #e8e8e8;
}

.box.informations > .heading > .more {
    position: absolute;
    right: 10px;
    color: #b7b7b7;
}

.box.informations > .heading.rtl > .more {
    position: absolute;
    left: 10px;
    right: auto;
    color: #b7b7b7;
}

.box.informations > ul {
    height: 200px;
    overflow-y: scroll;
}

.box.informations > ul > li {
    border-top: 1px solid #e8e8e8;
    padding: 13px 15px 10px 10px;
    color: #5a5a5a;
    word-break: break-all;
}

.box.informations > ul > li:first-child {
    border-top: none;
}

.box.informations > ul > li:hover {
    background: #f9f9f9;
}

.box.informations > ul > li > h3 {
    display: inline-block;
    padding: 0 0 4px 0;
    color: #757575;
    font-weight: bold;
    font-size: 13px;
    line-height: 20px;
    margin: 0 0 0 0;
    vertlica-align: middle;
}

.box.informations > ul > li > em {
    display: inline-block;
    float: right;
    padding: 0 0 8px 10px;
    line-height: 20px;
    text-align: right;
    color: #999999;
    font-size: 10px;
    vertlica-align: middle;
}

.box.informations > ul > li > p {
    clear: both;
    font-size: 12px;
    margin: 0 0 5px 0;
}

.box.informations > ul > li > ul > li {
    margin: 8px 0 0 0;
    font-size: 12px;
}

.box.informations > ul.extend {
    height: auto;
    overflow: visible;
}

.box.informations > ul.extend > li {
    padding-right: 10px;
}

/* box parts */
.box .box-inner.border-bottom {
    border-bottom: 1px solid #e1e1e1;
}

.box .box-inner.border-bottom.dotted {
    border-bottom: 1px dotted #e1e1e1;
}

.box .box-inner.border-top {
    border-top: 1px solid #e1e1e1;
}

.box .box-inner.border-top.dotted {
    border-top: 1px dotted #e1e1e1;
}

.box .box-inner.bg-gray {
    background: #fcfcfc;
}

.box dl.box-inner.with-thumb {
    display: table;
    width: 100%;
}

.box dl.box-inner.with-thumb > dt {
    display: table-cell;
    width: 102px;
    height: 102px;
    text-align: left;
    vertical-align: top;
}

.box dl.box-inner.with-thumb > dt img.thumb {
    width: 102px;
    height: 102px;
}

.box dl.box-inner.with-thumb > dd {
    display: table-cell;
    text-align: left;
    vertical-align: top;
}

.box dl.box-inner.with-thumb > dd.min {
    width: 1%;
    white-space: nowrap;
}

.box dl.box-inner.with-thumb.half > dt {
    width: 72px;
    height: 72px;
}

.box dl.box-inner.with-thumb.half > dt img.thumb {
    width: 72px;
    height: 72px;
}

.box dl.box-inner.with-thumb.micro > dt {
    width: 50px;
    height: 50px;
}

.box dl.box-inner.with-thumb.micro > dt img.thumb {
    width: 50px;
    height: 50px;
}

.box dl.box-inner.with-thumb.xmicro > dt {
    width: 30px;
    height: 30px;
}

.box dl.box-inner.with-thumb.xmicro > dt img.thumb {
    width: 30px;
    height: 30px;
}

.box .box-inner.title {
    border-bottom: 1px solid #e1e1e1;
    padding: 10px 20px 7px 20px;
    vertical-align: middle;
}

.box .box-inner.title h1 {
    color: #404040;
    font-size: 16px;
    line-height: 44px;
    vertical-align: middle;
}

.box .box-inner.title h2 {
    color: #404040;
    font-size: 16px;
    line-height: 44px;
    vertical-align: middle;
}


ul.btns.sheet {
    padding: 10px;
    background: #f9f9f9 url("../images/common/bg.dotted.png") top left repeat;
    border-top: 1px solid #c7cad3;
    text-align: center;
}

ul.btns.sheet.border-light {
    border-color: #e1e1e1 !important;
}

ul.btns.sheet.with-form {
    border-top: none;
}

ul.btns.sheet.border-bottom {
    border-bottom: 1px solid #c7cad3;
}

ul.btns.sheet > li {
    display: inline;
    vertical-align: middle;
}

ul.btns.sheet > li + li {
    margin-left: 4px;
}

dl.ticket-counts {
    display: inline-block;
    min-width: 90px;
    border: 1px solid #c7cad3;
    background: transparent;
}
.dialog dl.ticket-counts {
    margin-right: -4px !important;
}

.cursor {
    cursor: pointer;
}

.underline-blue {
    text-decoration: underline;
    color: #1da0d0;
}

dl.ticket-counts > dt {
    line-height: 28px;
    padding: 0 8px 0 8px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #c7cad3;
    white-space: nowrap;
}

dl.ticket-counts > dd {
    line-height: 47px;
    padding: 0 8px 0 8px;
    text-align: center;
    vertical-align: bottom;
    white-space: nowrap;
}

dl.ticket-counts + dl.ticket-counts {
    border-left: none;
}

dl.flush-detail {
    display: table;
    width: 100%;
    margin: 0 0 8px 0;
}

dl.flush-detail > dt {
    display: table-cell;
    padding: 8px 8px 4px 8px;
    border-bottom: 1px solid #c7cad3;
    text-align: left;
    vertical-align: bottom;
}

dl.flush-detail > dd {
    display: table-cell;
    padding: 8px 8px 4px 8px;
    border-bottom: 1px solid #c7cad3;
    text-align: right;
    vertical-align: bottom;
}

dl.table {
    display: table;
}

dl.table > dt, dl.table > dd {
    display: table-cell;
}

div.divider {
    height: 1px;
    padding: 0;
    border-bottom: 1px solid #fcfcfc;
    color: #fcfcfc;
    position: relative;
}

div.divider:after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #dddddd;
}


/**** thumb,points,star,voice ****/
.thumb {
    border: 1px solid #c7cad3;
    background-color: #f9f9f9;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.thumb.hover:hover {
    opacity: 0.75;
}

.points {
    display: inline-block;
    display: inline-block;
    padding: 2px 3px 0 3px;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    vertical-align: middle;
    color: #d94d38;
    background: transparent;
    border: 1px solid #d94d38;
    border-radius: 2px;
}

.points > em {
    font-size: 9px;
    vertical-align: baseline;
    margin-left: 1px;
}

.points.bluegray {
    border-color: #858da3;
    color: #858da3;
}

.points.disabled {
    border-color: #858da3;
    color: #858da3;
    opacity: 0.7;
}

.star {
    color: #d94d38;
}

.voice {
    display: inline;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #111122;
    opacity: 0.3;
    color: #ffffff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.voice:hover, .voice.active {
    background-color: #ed5cb7;
    color: #ffffff;
    opacity: 1.0;
}

.voice:before {
    display: inline;
    content: "\e715";
    font-family: "icon";
}

.voice.active:before {
    display: inline;
    content: "\e718";
    font-family: "icon";
}

.number-circle {
    display: inline-block;
    margin: 0 3px 0 0;
    background-color: #d0d2d9;
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 11px;
    text-align: center;
    vertical-align: middle;
}

.flag-dummy {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
}

/**** prize ****/
span.prize {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-family: "icon";
    text-align: center;
    border-radius: 5px;
    color: #868c9f;
    border: 1px solid #c7cad3;
    background: #e9eaed;
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
}

span.prize:hover {
    opacity: 0.75;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

span.prize:before {
    content: "\e69a";
    display: inline;
    line-height: 26px;
    color: #888888;
}

span.prize.disabled {
    opacity: 0.3;
}

span.prize.disabled:before {
    color: #555555;
}

span.prize.grade-beginner:before {
    content: "\e6d8";
    color: #888888;
}

span.prize.grade-bronze:before {
    content: "\e69a";
    color: #ce7754;
}

span.prize.grade-silver:before {
    content: "\e69a";
    color: #8f95a2;
}

span.prize.grade-gold:before {
    content: "\e69a";
    color: #DEBD29;
}

span.prize.grade-platinum:before {
    content: "\e69a";
    color: #8e8eaa;
}

span.prize.offline-itpark:before {
    content: "\e603";
    color: #888888;
}

span.prize.offline-seafront:before {
    content: "\e7ca";
    color: #888888;
}


/**** list ****/
ul.inline {
    display: block !important;
}

ul.inline > li {
    display: inline;
}

ul.notes {
}

ul.notes > li {
    padding: 0 0 0 14px;
    vertical-align: top;
    position: relative;
}

ul.notes > li + li {
    margin-top: 4px;
}

ul.notes > li:before {
    display: inline-block;
    content: "\e8c0";
    font-family: "icon";
    width: 16px;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

table.history {
    width: 100%;
    border-collapse: collapse;
}

table.history > thead > tr > th {
    padding: 8px;
    border-bottom: 1px solid #c7cad3;
    text-align: left;
    vertical-align: middle;
}

table.history > tbody > tr > td {
    padding: 8px;
    border-bottom: 1px solid #c7cad3;
    text-align: left;
    vertical-align: middle;
}

table.history > tbody > tr > td.min {
    width: 1%;
    white-space: nowrap;
}

table.history > tbody > tr.hover:hover > td {
    background: #fcfcfc;
}


/**** button ****/
.btn {
    display: inline-block;
    margin: 0;
    padding: 0 8px 0 8px;
    font-size: 13px;
    font-weight: normal;
    line-height: 1;
    cursor: pointer;
    outline: 0;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.btn:hover {
    text-decoration: none;
}

.btn {
    font-size: 13px;
    line-height: 30px;
}

.btn.fill {
    width: 100%;
}

.btn.small {
    font-size: 12px;
    line-height: 26px;
}

.btn.xsmall {
    font-size: 11px;
    line-height: 22px;
}

.btn.disabled {
    cursor: default;
    opacity: 0.5;
}

.btn.prev {
    padding-left: 20px;
}

.btn.prev:after {
    content: "\e8c8";
    font-family: "icon";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.75;
    height: 100%;
    vertical-align: middle;
    padding: 0 10px 0 10px;
    border-right: 1px solid #cccccc;
    box-shadow: rgba(255, 255, 255, 0.3) -1px 0 0 0 inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.3) -1px 0 0 0 inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.3) -1px 0 0 0 inset;
}

.btn.next {
    padding-right: 20px;
}

.btn.next:after {
    content: "\e8cb";
    font-family: "icon";
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.75;
    height: 100%;
    vertical-align: middle;
    padding: 0 10px 0 10px;
    border-left: 1px solid #cccccc;
    box-shadow: rgba(255, 255, 255, 0.3) 1px 0 0 0 inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.3) 1px 0 0 0 inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.3) 1px 0 0 0 inset;
}

.btn.blue.prev:after, .btn.blue.next:after {
    border-color: #1f98c6;
}

.btn.red.prev:after, .btn.red.next:after {
    border-color: #bd2b83;
}

.btn.orange.prev:after, .btn.orange.next:after {
    border-color: #d94d38;
}

.btn.gray.prev:after, .btn.gray.next:after {
    border-color: #c7cad3;
}

.btn.white.prev:after, .btn.white.next:after {
    border-color: #aeb3bf;
}

.btn.facebook.prev:after, .btn.facebook.next:after {
    border-color: #3c47a1;
}

.btn.twitter.prev:after, .btn.twitter.next:after {
    border-color: #008BE8;
}

.btn.googleplus.prev:after, .btn.googleplus.next:after {
    border-color: #9a2f29;
}

.btn > [class^="icon-"]:before {
    color: #ffffff;
}

.btn.blue, .btn.blue.disabled, .btn.blue.disabled:hover {
    color: #ffffff;
    border: 1px solid #1f98c6;
    background: #3cb6e3;
    background: -moz-linear-gradient(top, #3cb6e3 0%, #1fa9db 30%, #1c97c6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3cb6e3), color-stop(30%, #1fa9db), color-stop(100%, #1c97c6));
    background: -webkit-linear-gradient(top, #3cb6e3 0%, #1fa9db 30%, #1c97c6 100%);
    background: -o-linear-gradient(top, #3cb6e3 0%, #1fa9db 30%, #1c97c6 100%);
    background: -ms-linear-gradient(top, #3cb6e3 0%, #1fa9db 30%, #1c97c6 100%);
    background: linear-gradient(to bottom, #3cb6e3 0%, #1fa9db 30%, #1c97c6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3cb6e3', endColorstr='#1c97c6', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
}

.btn.blue:hover {
    background: #2dafe1;
    background: -moz-linear-gradient(top, #2dafe1 0%, #1fa9db 30%, #1c97c6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2dafe1), color-stop(30%, #1fa9db), color-stop(100%, #1c97c6));
    background: -webkit-linear-gradient(top, #2dafe1 0%, #1fa9db 30%, #1c97c6 100%);
    background: -o-linear-gradient(top, #2dafe1 0%, #1fa9db 30%, #1c97c6 100%);
    background: -ms-linear-gradient(top, #2dafe1 0%, #1fa9db 30%, #1c97c6 100%);
    background: linear-gradient(to bottom, #2dafe1 0%, #1fa9db 30%, #1c97c6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dafe1', endColorstr='#1c97c6', GradientType=0);
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.btn.red, .btn.red.disabled, .btn.red.disabled:hover {
    color: #ffffff;
    border: 1px solid #bd2b83;
    background: #ed5cb7;
    background: -moz-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed5cb7), color-stop(100%, #cc2d98));
    background: -webkit-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -o-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -ms-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: linear-gradient(to bottom, #ed5cb7 0%, #cc2d98 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed5cb7', endColorstr='#cc2d98', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
}

.btn.red:hover {
    background: #ec55b4;
    background: -moz-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ec55b4), color-stop(100%, #bf2b8f));
    background: -webkit-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -o-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -ms-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: linear-gradient(to bottom, #ec55b4 0%, #bf2b8f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ec55b4', endColorstr='#bf2b8f', GradientType=0);
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.btn.orange, .btn.orange.disabled, .btn.orange.disabled:hover {
    color: #ffffff;
    border: 1px solid #d94d38;
    background: #d87568;
    background: -moz-linear-gradient(top, #d87568 0%, #d94d38 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d87568), color-stop(100%, #d94d38));
    background: -webkit-linear-gradient(top, #d87568 0%, #d94d38 100%);
    background: -o-linear-gradient(top, #d87568 0%, #d94d38 100%);
    background: -ms-linear-gradient(top, #d87568 0%, #d94d38 100%);
    background: linear-gradient(to bottom, #d87568 0%, #d94d38 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d87568', endColorstr='#d94d38', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
}

.btn.orange:hover {
    background: #d6685c;
    background: -moz-linear-gradient(top, #d6685c 0%, #d94d38 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6685c), color-stop(100%, #d94d38));
    background: -webkit-linear-gradient(top, #d6685c 0%, #d94d38 100%);
    background: -o-linear-gradient(top, #d6685c 0%, #d94d38 100%);
    background: -ms-linear-gradient(top, #d6685c 0%, #d94d38 100%);
    background: linear-gradient(to bottom, #d6685c 0%, #d94d38 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6685c', endColorstr='#d94d38', GradientType=0);
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.btn.gray, .btn.gray.disabled, .btn.gray.disabled:hover {
    color: #868c9f;
    border: 1px solid #c7cad3;
    background: #e9eaed;
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
}
.btn.white_btn, .btn.white_btn.disabled, .btn.white_btn.disabled:hover {
    color: #d8dce6;
    border: 1px solid #d8dce6;
    background: #ffffff;
    box-shadow: rgb(255 255 255 / 50%) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgb(255 255 255 / 50%) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
}
.btn.gray:hover {
    background: #e4e6e9;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.btn.gray > [class^="icon-"]:before {
    color: #868c9f;
}
.btn.white_btn > [class^="icon-"]:before {
    color: #d8dce6;
}
.btn.white, .btn.white.disabled, .btn.white.disabled:hover {
    color: #444444;
    border: 1px solid #aeb3bf;
    background: #ffffff;
}

.btn.white:hover {
    color: #555555;
    background: #f6f6f6;
}

.btn.white > [class^="icon-"]:before {
    color: #444444;
}

.btn.facebook, .btn.facebook.disabled, .btn.facebook.disabled:hover {
    color: #ffffff;
    border: 1px solid #3c47a1;
    background: #5887d3;
    background: -moz-linear-gradient(top, #5887d3 0%, #3c72cc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5887d3), color-stop(100%, #3c72cc));
    background: -webkit-linear-gradient(top, #5887d3 0%, #3c72cc 100%);
    background: -o-linear-gradient(top, #5887d3 0%, #3c72cc 100%);
    background: -ms-linear-gradient(top, #5887d3 0%, #3c72cc 100%);
    background: linear-gradient(to bottom, #5887d3 0%, #3c72cc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5887d3', endColorstr='#3c72cc', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
}

.btn.facebook:hover {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.btn.facebook > [class^="icon-"] {
    margin-right: 3px;
}

.btn.googleplus, .btn.googleplus.disabled, .btn.googleplus.disabled:hover {
    color: #ffffff;
    border: 1px solid #9a2f29;
    background: #d65656;
    background: -moz-linear-gradient(top, #d65656 0%, #d65656 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d65656), color-stop(100%, #d65656));
    background: -webkit-linear-gradient(top, #d65656 0%, #d65656 100%);
    background: -o-linear-gradient(top, #d65656 0%, #d65656 100%);
    background: -ms-linear-gradient(top, #d65656 0%, #d65656 100%);
    background: linear-gradient(to bottom, #d65656 0%, #d65656 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d65656', endColorstr='#d65656', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
}

.btn.googleplus:hover {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.btn.googleplus > [class^="icon-"] {
    margin-right: 3px;
}

.btn.googleplus > .icon-googleplus:before {
    content: "\e764";
}

.btn.twitter, .btn.twitter.disabled, .btn.twitter.disabled:hover {
    color: #ffffff;
    border: 1px solid #008BE8;
    background: #55acee;
    background: -moz-linear-gradient(top, #55acee 0%, #289bed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #55acee), color-stop(100%, #289bed));
    background: -webkit-linear-gradient(top, #55acee 0%, #289bed 100%);
    background: -o-linear-gradient(top, #55acee 0%, #289bed 100%);
    background: -ms-linear-gradient(top, #55acee 0%, #289bed 100%);
    background: linear-gradient(to bottom, #55acee 0%, #289bed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#55acee', endColorstr='#289bed', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
}

.btn.twitter:hover {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.btn.twitter > [class^="icon-"] {
    margin-right: 3px;
}

.btn.twitter > .icon-twitter:before {
    content: "\e76d";
}
.btn.darkblue {
    color: #ffffff;
    border: 1px solid #2A7BFB;
    background: #2A7BFB;
}
.btn.darkblue:hover {
    background: #2A7BFB;
    background: -moz-linear-gradient(top, #2A7BFB 0%, #2A7BFB 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2A7BFB), color-stop(100%, #2A7BFB));
    background: -webkit-linear-gradient(top, #2A7BFB 0%, #2A7BFB 100%);
    background: -o-linear-gradient(top, #2A7BFB 0%, #2A7BFB 100%);
    background: -ms-linear-gradient(top, #2A7BFB 0%, #2A7BFB 100%);
    background: linear-gradient(to bottom, #2A7BFB 0%, #2A7BFB 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2A7BFB', endColorstr='#2A7BFB', GradientType=0);
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
.btn.darkblue, .btn.darkblue.disabled, .btn.blue.darkblue:hover {
    color: #ffffff;
    border: 1px solid #119bee;
    background: #119bee;
    background: -moz-linear-gradient(top, #119bee 0%, #2A7BFB 30%, #2A7BFB 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #119bee), color-stop(30%, #2A7BFB), color-stop(100%, #2A7BFB));
    background: -webkit-linear-gradient(top, #119bee 0%, #2A7BFB 30%, #2A7BFB 100%);
    background: -o-linear-gradient(top, #119bee 0%, #2A7BFB 30%, #2A7BFB 100%);
    background: -ms-linear-gradient(top, #119bee 0%, #2A7BFB 30%, #2A7BFB 100%);
    background: linear-gradient(to bottom, #119bee 0%, #2A7BFB 30%, #2A7BFB 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3cb6e3', endColorstr='#1c97c6', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
}
/**** pager,selector ****/
ul.pager {
    display: inline-block;
    letter-spacing: -.30em;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
}

ul.pager > li {
    display: inline-block;
    letter-spacing: normal;
    width: 28px;
    height: 28px;
    margin: 0 2px 0 0;
    padding: 0;
}

ul.pager > li > a:hover {
    background: #f5f5f5;
}

ul.pager > li > a, ul.pager > li > span,
ul.pager > li.disabled > a, ul.pager > li.disabled > a:hover {
    display: inline-block;
    width: 28px;
    height: 28px;
    font-size: 11px;
    font-weight: normal;
    line-height: 28px;
    cursor: pointer;
    outline: 0;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: #333333;
    border: 1px #dadada solid;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #f5f5f5), color-stop(100%, #f5f5f5));
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
}

ul.pager > li.disabled > a, ul.pager > li.disabled > a:hover, ul.pager > li.disabled > span {
    color: #999999;
    cursor: default;
}

ul.pager > li.divider > a, ul.pager > li > span {
    cursor: default;
}

ul.pager > li.current > span {
    text-decoration: none;
    color: #ffffff;
    border: 1px #404040 solid;
    background: #6e6e6e;
    background: -moz-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6e6e6e), color-stop(100%, #3d3d3d));
    background: -webkit-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: -o-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: -ms-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: linear-gradient(to bottom, #6e6e6e 0%, #3d3d3d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6e6e6e', endColorstr='#3d3d3d', GradientType=0);
}

ul.pager > li > a > em, ul.pager > li > span > em {
    display: inline-block;
    width: 100%;
    text-align: center;
    vertical-align: center;
    transform: scale(0.9, 1);
    -moz-transform: scale(0.9, 1);
    -webkit-transform: scale(0.9, 1);
    -ms-transform: scale(0.9, 1);
}

ul.selector {
    display: table;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
}

ul.selector > li {
    display: table-cell;
    height: 28px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

ul.selector > li > a, ul.selector > li > span {
    display: block;
    height: 28px;
    padding: 0 8px 0 8px;
    color: #000000;
    background: #ffffff;
    border: 1px #dadada solid;
    border-left: none;
    font-size: 11px;
    font-weight: normal;
    line-height: 28px;
    cursor: pointer;
    outline: 0;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

ul.selector > li:first-child > span {
    border-left: 1px #dadada solid;
    position: relative;
    padding: 0 5px 0 8px;
    overflow: visible;
}

ul.selector > li:first-child > span:before {
    content: '';
    position: absolute;
    top: 0;
    right: -15px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 7px solid #dadada;
    border-right: 7px solid transparent;
}

ul.selector > li:first-child > span:after {
    content: '';
    position: absolute;
    top: 0;
    right: -14px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 7px solid #ffffff;
    border-right: 7px solid transparent;
}

ul.selector > li:first-child + li > a {
    padding-left: 15px;
}

ul.selector > li > a:hover {
    background: #f5f5f5;
}

ul.selector > li.active > a, ul.selector > li.active > a:hover {
    background: #ffffff;
    color: #cc2d98;
    cursor: default;
}

ul.selector > li.disabled > a {
    color: #aaaaaa;
    cursor: default;
}

ul.selector > li.disabled > a:hover {
    background: #ffffff;
}


/**** parts > search box ****/
.searchbox {
    position: relative;
}

.searchbox > ul.tabs {
    height: 47px;
    position: relative;
}

.searchbox > ul.tabs > li {
    display: block;
    width: 241px;
    height: 44px;
}

.searchbox > ul.tabs > li.schedule {
    position: absolute;
    top: 3px;
    left: 0;
    z-index: 1;
}

.searchbox > ul.tabs > li.teacher {
    position: absolute;
    top: 3px;
    left: 240px;
    z-index: 2;
}
.searchbox > ul.tabs > li.country {
    position: absolute;
    top: 3px;
    left: 0px;
    z-index: 2;
}
.searchbox > ul.tabs > li.prefecture {
    position: absolute;
    top: 3px;
    left: 359px;
    z-index: 2;
}
.searchbox > ul.tabs > li.curriculum {
    position: absolute;
    top: 3px;
    left: 480px;
    z-index: 3;
    width: 240px;
}

.searchbox > ul.tabs > li > a {
    display: block;
    height: 44px;
    border: 1px solid #c7cad3;
    white-space: nowrap;
    overflow: hidden;
    color: #a4a4a4;
    cursor:pointer;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);
}

.searchbox > ul.tabs > li > a:hover {
    color: #404040;
}

.searchbox > ul.tabs > li.schedule > a > .icon-schedule {
    font-size: 12px;
    margin-right: 5px;
    line-height: 44px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.searchbox > ul.tabs > li.teacher > a > .icon-teacher {
    font-size: 16px;
    margin-right: 4px;
    line-height: 44px;
    vertical-align: middle;
}

.searchbox > ul.tabs > li.curriculum > a > .icon-curriculum {
    font-size: 12px;
    margin-right: 5px;
    line-height: 44px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.searchbox > ul.tabs > li.active {
    height: 47px;
    position: absolute;
    top: 0;
}

.searchbox > ul.tabs > li.active > a {
    border-top: 2px solid #404040;
    border-bottom: none;
    height: 47px;
    color: #404040;
    background: #ffffff;
}

.searchbox > .content {
    background: #ffffff;
    border: 1px solid #c7cad3;
    border-top: none;
    padding: 12px 0 0 0;
}

.searchbox > .content ul.btns {
    display: table;
    width: 100%;
    height: 48px;
    background: #f9f9f9 url("../images/common/bg.dotted.png") top left repeat;
    border-top: 1px solid #c7cad3;
}

.searchbox > .content ul.btns > li {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    padding: 0 10px 0 0;
}

.searchbox > .content ul.btns > li + li {
    width: 1%;
    white-space: nowrap;
}

.searchbox > .content dl.field {
    border-top: 1px dotted #dadada;
    display: table;
    width: 100%;
    line-height: 32px;
}

.searchbox > .content dl.field > dt {
    display: table-cell;
    width: 150px;
    border-right: 1px solid #dadada;
    padding: 10px;
    text-align: right;
    vertical-align: top;
}

.searchbox > .content dl.field > dd {
    display: table-cell;
    padding: 10px;
    text-aling: left;
    vertical-align: top;
}

.searchbox > .content dl.field.top {
    border-top: 1px solid #dadada;
}

.searchbox > .content ul.results {
    padding: 10px 0 0 0;
    border-top: 1px solid #dadada;
    letter-spacing: -.40em;
}

.searchbox > .content ul.results > li.result {
    display: inline-block;
    letter-spacing: normal;
    width: 343px;
    height: 110px;
    float: left;
    overflow: hidden;
    margin: 0 0 10px 10px;
    padding: 9px;
    cursor: pointer;
    border: 1px solid #c7cad3;
    background-color: #ffffff;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.searchbox > .content ul.results > li.result > dl {
    display: table;
    width: 100%;
}

.searchbox > .content ul.results > li.result > dl > dt {
    display: table-cell;
    width: 100px;
    text-align: left;
    vertical-align: top;
    position: relative;
}

.searchbox > .content ul.results > li.result > dl > dd {
    display: table-cell;
    text-align: left;
    vertical-align: top;
    position: relative;
}

.searchbox > .content ul.results > li.result > dl > dt img.thumb {
    width: 90px;
    height: 90px;
    border: 1px solid #c7cad3;
    background: #f9f9f9;
}

.searchbox > .content ul.results > li.result > dl > dt a.no-image {
    display: inline-block;
    width: 90px;
    height: 90px;
    border: 1px solid #c7cad3;
    background: #fafafa;
    line-height: 90px;
    text-align: center;
    vertical-align: middle;
}

.searchbox > .content ul.results > li.result > dl > dt .voice {
    position: absolute;
    top: 4px;
    right: 14px;
}

.searchbox > .content ul.results > li.result > dl > dd p.message {
    margin: 6px 0 0 0;
    color: #646464;
    font-size: 11px;
    line-height: 16px;
}

.searchbox > .content ul.results > li.result > dl > dd .bluegray:hover {
    color: #858da3;
}

.searchbox > .content ul.results > li.result > dl > dd .point {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 2px 0 3px;
    font-size: 10px;
    line-height: 14px;
    vertical-align: baseline;
    color: #ffffff;
    background: #858da3; /*background:#cc2d98;*/
    border-radius: 2px;
}

.searchbox > .content ul.results > li.result > dl > dd .point > em {
    font-size: 9px;
    vertical-align: baseline;
}

.searchbox > .content ul.results > li.result > dl > dd .level {
    display: inline-block;
    position: relative;
    top: -1px;
    padding: 2px 3px 0 3px;
    font-size: 10px;
    font-weight: normal;
    line-height: 14px;
    vertical-align: middle; /*color:#d94d38;*/
    color: #858da3;
    background: transparent;
    border: 1px solid #858da3;
    border-radius: 2px;
}

.searchbox > .content ul.results > li.result:hover {
    background-color: #fcfcfc;
}

.searchbox > .content ul.results > li.result:hover > dl > dt img.thumb {
    opacity: 0.75;
}

.searchbox > .content .no-results {
    border-top: 1px solid #dadada;
    padding: 40px 20px 40px 20px;
    text-align: center;
}

.searchbox > .content.schedule .palette {
    padding: 10px;
}

.searchbox > .content.schedule .palette ul.dates {
    width: 100%;
    height: 60px;
    margin: 0 0 10px 0;
    position: relative;
}

.searchbox > .content.schedule .palette ul.dates > li {
}

.searchbox > .content.schedule .palette ul.dates > li.prev {
    width: 40px;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
}

.searchbox > .content.schedule .palette ul.dates > li.next {
    width: 40px;
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
}

.searchbox > .content.schedule .palette ul.dates > li.prev > a,
.searchbox > .content.schedule .palette ul.dates > li.next > a {
    display: inline-block;
    width: 38px;
    height: 58px;
    border: 1px #dadada solid;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    line-height: 58px;
    outline: 0;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #f5f5f5), color-stop(100%, #f5f5f5));
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
}

.searchbox > .content.schedule .palette ul.dates > li.prev > a:hover,
.searchbox > .content.schedule .palette ul.dates > li.next > a:hover {
    font-size: 16px;
}

.searchbox > .content.schedule .palette ul.dates > li.prev.disabled > a,
.searchbox > .content.schedule .palette ul.dates > li.next.disabled > a,
.searchbox > .content.schedule .palette ul.dates > li.prev.disabled > a:hover,
.searchbox > .content.schedule .palette ul.dates > li.next.disabled > a:hover {
    font-size: 12px;
    color: #aaaaaa;
    cursor: default;
}

/* 86 * 7 + 1 = 603 */
.searchbox > .content.schedule .palette ul.dates > li.selection {
    width: 602px;
    height: 60px;
    margin: 0 auto 0 auto;
    overflow: hidden;
    border-left: 1px solid #dadada;
    position: relative;
}

.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner {
    position: absolute;
    top: 0;
    left: 0;
    display: table;
    height: 60px;
}

.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li {
    display: table-cell;
    width: 86px;
    height: 60px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li > a,
.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li.disabled > a,
.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li.disabled > a:hover {
    display: block;
    width: 86px;
    height: 60px;
    border: 1px solid #dadada;
    color: #777777;
    border-left: none;
    vertical-align: middle;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #f2f2f2;
    background: -moz-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #f2f2f2), color-stop(99%, #ffffff));
    background: -webkit-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -o-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -ms-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: linear-gradient(to bottom, #f2f2f2 2%, #ffffff 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#ffffff', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
}

.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li > a strong {
    display: block;
    margin: 6px 0 0 0;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    transform: scale(0.8, 1);
    -moz-transform: scale(0.8, 1);
    -webkit-transform: scale(0.8, 1);
    -ms-transform: scale(0.8, 1);
}

.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li > a em {
    display: block;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
}

.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li > a:hover {
    color: #333333;
    background: #f2f2f2;
}

.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li.disabled > a,
.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li.disabled > a:hover {
    color: #cccccc;
    opacity: 0.75;
    cursor: default;
}

.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li.active > a {
    color: #ffffff;
    border: 1px solid #bd2b83;
    background: #ed5cb7;
    background: -moz-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed5cb7), color-stop(100%, #cc2d98));
    background: -webkit-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -o-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -ms-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: linear-gradient(to bottom, #ed5cb7 0%, #cc2d98 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed5cb7', endColorstr='#cc2d98', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
}

.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li.active > a:hover {
    background: #ec55b4;
    background: -moz-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ec55b4), color-stop(100%, #bf2b8f));
    background: -webkit-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -o-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -ms-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: linear-gradient(to bottom, #ec55b4 0%, #bf2b8f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ec55b4', endColorstr='#bf2b8f', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
}

.searchbox > .content.schedule .palette ul.times {
    display: table;
    width: 100%;
}

.searchbox > .content.schedule .palette ul.times > li {
    display: table-cell;
    width: 20%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

.searchbox > .content.schedule .palette ul.times > li > a:hover {
    color: #000000;
    background: #f2f2f2;
}

.searchbox > .content.schedule .palette ul.times > li > a,
.searchbox > .content.schedule .palette ul.times > li.disabled > a,
.searchbox > .content.schedule .palette ul.times > li.disabled > a:hover {
    display: block;
    border: 1px solid #dadada;
    border-left: none;
    padding: 1px 0 0 0;
    color: #575757;
    font-size: 11px;
    line-height: 27px;
    vertical-align: middle;
    background: #f2f2f2;
    background: -moz-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #f2f2f2), color-stop(99%, #ffffff));
    background: -webkit-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -o-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -ms-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: linear-gradient(to bottom, #f2f2f2 2%, #ffffff 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#ffffff', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
}

.searchbox > .content.schedule .palette ul.times > li:first-child > a,
.searchbox > .content.schedule .palette ul.times > li:first-child.disabled > a {
    border-left: 1px solid #dadada;
}

.searchbox > .content.schedule .palette ul.times > li.disabled > a,
.searchbox > .content.schedule .palette ul.times > li.disabled > a:hover {
    color: #777777;
    opacity: 0.75;
    cursor: default;
}

.searchbox > .content.schedule .palette ul.times > li.active > a {
    color: #ffffff;
    border: 1px solid #bd2b83;
    background: #ed5cb7;
    background: -moz-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed5cb7), color-stop(100%, #cc2d98));
    background: -webkit-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -o-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -ms-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: linear-gradient(to bottom, #ed5cb7 0%, #cc2d98 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed5cb7', endColorstr='#cc2d98', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
}

.searchbox > .content.schedule .palette ul.times > li.active > a:hover {
    background: #ec55b4;
    background: -moz-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ec55b4), color-stop(100%, #bf2b8f));
    background: -webkit-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -o-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -ms-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: linear-gradient(to bottom, #ec55b4 0%, #bf2b8f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ec55b4', endColorstr='#bf2b8f', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
}

.searchbox > .content.teacher {
    position: relative;
}

.searchbox > .content.teacher .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 720px;
    background: transparent;
    z-index: 1;
}

.searchbox > .content.teacher .progress .indicator {
    position: absolute;
    top: 140px;
    left: 360px;
}

.searchbox > .content.teacher .no-results {
    padding: 110px 0 110px 0;
    background: #fcfcfc;
}

.searchbox > .content.curriculum {
    position: relative;
}

.searchbox > .content.curriculum .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 720px;
    background: transparent;
    z-index: 1;
}

.searchbox > .content.curriculum .progress .indicator {
    position: absolute;
    top: 140px;
    left: 360px;
}

.searchbox > .content.curriculum .no-results {
    padding: 110px 0 110px 0;
    background: #fcfcfc;
}


.searchbox > .content.curriculum .palette {
    padding: 10px;
}

.searchbox > .content.curriculum .palette ul.dates {
    width: 100%;
    height: 60px;
    margin: 0 0 10px 0;
    position: relative;
}

.searchbox > .content.curriculum .palette ul.dates > li {
}

.searchbox > .content.curriculum .palette ul.dates > li.prev {
    width: 40px;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
}

.searchbox > .content.curriculum .palette ul.dates > li.next {
    width: 40px;
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
}

.searchbox > .content.curriculum .palette ul.dates > li.prev > a,
.searchbox > .content.curriculum .palette ul.dates > li.next > a {
    display: inline-block;
    width: 38px;
    height: 58px;
    border: 1px #dadada solid;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    line-height: 58px;
    outline: 0;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #f5f5f5), color-stop(100%, #f5f5f5));
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
}

.searchbox > .content.curriculum .palette ul.dates > li.prev > a:hover,
.searchbox > .content.curriculum .palette ul.dates > li.next > a:hover {
    font-size: 16px;
}

.searchbox > .content.curriculum .palette ul.dates > li.prev.disabled > a,
.searchbox > .content.curriculum .palette ul.dates > li.next.disabled > a,
.searchbox > .content.curriculum .palette ul.dates > li.prev.disabled > a:hover,
.searchbox > .content.curriculum .palette ul.dates > li.next.disabled > a:hover {
    font-size: 12px;
    color: #aaaaaa;
    cursor: default;
}

/* 86 * 7 + 1 = 603 */
.searchbox > .content.curriculum .palette ul.dates > li.selection {
    width: 602px;
    height: 60px;
    margin: 0 auto 0 auto;
    overflow: hidden;
    border-left: 1px solid #dadada;
    position: relative;
}

.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner {
    position: absolute;
    top: 0;
    left: 0;
    display: table;
    height: 60px;
}

.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li {
    display: table-cell;
    width: 86px;
    height: 60px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li > a,
.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li.disabled > a,
.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li.disabled > a:hover {
    display: block;
    width: 86px;
    height: 60px;
    border: 1px solid #dadada;
    color: #777777;
    border-left: none;
    vertical-align: middle;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #f2f2f2;
    background: -moz-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #f2f2f2), color-stop(99%, #ffffff));
    background: -webkit-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -o-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -ms-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: linear-gradient(to bottom, #f2f2f2 2%, #ffffff 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#ffffff', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
}

.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li > a strong {
    display: block;
    margin: 6px 0 0 0;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    transform: scale(0.8, 1);
    -moz-transform: scale(0.8, 1);
    -webkit-transform: scale(0.8, 1);
    -ms-transform: scale(0.8, 1);
}

.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li > a em {
    display: block;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
}

.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li > a:hover {
    color: #333333;
    background: #f2f2f2;
}

.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li.disabled > a,
.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li.disabled > a:hover {
    color: #cccccc;
    opacity: 0.75;
    cursor: default;
}

.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li.active > a {
    color: #ffffff;
    border: 1px solid #bd2b83;
    background: #ed5cb7;
    background: -moz-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed5cb7), color-stop(100%, #cc2d98));
    background: -webkit-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -o-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -ms-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: linear-gradient(to bottom, #ed5cb7 0%, #cc2d98 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed5cb7', endColorstr='#cc2d98', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
}

.searchbox > .content.curriculum .palette ul.dates > li.selection ul.inner > li.active > a:hover {
    background: #ec55b4;
    background: -moz-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ec55b4), color-stop(100%, #bf2b8f));
    background: -webkit-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -o-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -ms-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: linear-gradient(to bottom, #ec55b4 0%, #bf2b8f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ec55b4', endColorstr='#bf2b8f', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
}

.searchbox > .content.curriculum .palette ul.times {
    display: table;
    width: 100%;
}

.searchbox > .content.curriculum .palette ul.times > li {
    display: table-cell;
    width: 20%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

.searchbox > .content.curriculum .palette ul.times > li > a:hover {
    color: #000000;
    background: #f2f2f2;
}

.searchbox > .content.curriculum .palette ul.times > li > a,
.searchbox > .content.curriculum .palette ul.times > li.disabled > a,
.searchbox > .content.curriculum .palette ul.times > li.disabled > a:hover {
    display: block;
    border: 1px solid #dadada;
    border-left: none;
    padding: 1px 0 0 0;
    color: #575757;
    font-size: 11px;
    line-height: 27px;
    vertical-align: middle;
    background: #f2f2f2;
    background: -moz-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #f2f2f2), color-stop(99%, #ffffff));
    background: -webkit-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -o-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: -ms-linear-gradient(top, #f2f2f2 2%, #ffffff 99%);
    background: linear-gradient(to bottom, #f2f2f2 2%, #ffffff 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#ffffff', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 1px 1px inset;
}

.searchbox > .content.curriculum .palette ul.times > li:first-child > a,
.searchbox > .content.curriculum .palette ul.times > li:first-child.disabled > a {
    border-left: 1px solid #dadada;
}

.searchbox > .content.curriculum .palette ul.times > li.disabled > a,
.searchbox > .content.curriculum .palette ul.times > li.disabled > a:hover {
    color: #777777;
    opacity: 0.75;
    cursor: default;
}

.searchbox > .content.curriculum .palette ul.times > li.active > a {
    color: #ffffff;
    border: 1px solid #bd2b83;
    background: #ed5cb7;
    background: -moz-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed5cb7), color-stop(100%, #cc2d98));
    background: -webkit-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -o-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: -ms-linear-gradient(top, #ed5cb7 0%, #cc2d98 100%);
    background: linear-gradient(to bottom, #ed5cb7 0%, #cc2d98 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed5cb7', endColorstr='#cc2d98', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
}

.searchbox > .content.curriculum .palette ul.times > li.active > a:hover {
    background: #ec55b4;
    background: -moz-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ec55b4), color-stop(100%, #bf2b8f));
    background: -webkit-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -o-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: -ms-linear-gradient(top, #ec55b4 0%, #bf2b8f 100%);
    background: linear-gradient(to bottom, #ec55b4 0%, #bf2b8f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ec55b4', endColorstr='#bf2b8f', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 1px 1px inset;
}


/**** parts > resultset ****/
.resultset {
    border: 1px solid #c7cad3;
    background: #ffffff;
    position: relative;
}

.resultset > .header {
    padding: 10px;
    border-bottom: 1px solid #e1e1e1;
}

.resultset > .footer {
    padding: 10px;
    border-top: 1px solid #e1e1e1;
}

.resultset > .header:after, .resultset > .footer:after {
    content: '';
    display: block;
    clear: both;
}

/* teacher, curriculum */
.resultset > ul.results {
    padding: 10px 0 0 0;
    letter-spacing: -.40em;
}

.resultset > ul.results:after {
    content: "";
    display: block;
    clear: both;
}

.resultset > ul.results > li.result {
    display: inline-block;
    letter-spacing: normal;
    width: 343px;
    height: 110px;
    float: left;
    overflow: hidden;
    margin: 0 0 10px 10px;
    padding: 9px;
    cursor: pointer;
    border: 1px solid #c7cad3;
    background-color: #ffffff;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.resultset > ul.results > li.result > dl {
    display: table;
    width: 100%;
}

.resultset > ul.results > li.result > dl > dt {
    display: table-cell;
    width: 100px;
    text-align: left;
    vertical-align: top;
    position: relative;
}

.resultset > ul.results > li.result > dl > dd {
    display: table-cell;
    text-align: left;
    vertical-align: top;
    position: relative;
}

.resultset > ul.results > li.result > dl > dt img.thumb {
    width: 90px;
    height: 90px;
    border: 1px solid #c7cad3;
    background: #f9f9f9;
}

.resultset > ul.results > li.result > dl > dt a.no-image {
    display: inline-block;
    width: 90px;
    height: 90px;
    border: 1px solid #c7cad3;
    background: #fafafa;
    line-height: 90px;
    text-align: center;
    vertical-align: middle;
}

.resultset > ul.results > li.result > dl > dt .voice {
    position: absolute;
    top: 4px;
    right: 14px;
}

.resultset > ul.results > li.result > dl > dd p.message {
    margin: 6px 0 0 0;
    color: #646464;
    font-size: 11px;
    line-height: 16px;
}

/*
.resultset > ul.results > li.result > dl > dd .point { position:absolute; top:0; right:0; padding:2px 2px 0 3px; font-size:10px; line-height:14px; vertical-align:baseline; color:#ffffff; background:#858da3; border-radius:2px; }
.resultset > ul.results > li.result > dl > dd .point > em { font-size:9px; vertical-align:baseline; }
*/
.resultset > ul.results > li.result > dl > dd .level {
    display: inline-block;
    position: relative;
    top: -1px;
    padding: 2px 3px 0 3px;
    font-size: 10px;
    font-weight: normal;
    line-height: 14px;
    vertical-align: middle; /*color:#d94d38;*/
    color: #858da3;
    background: transparent;
    border: 1px solid #858da3;
    border-radius: 2px;
}

.resultset > ul.results > li.result > dl > dd .bluegray:hover {
    color: #858da3;
}

.resultset > ul.results > li.result:hover {
    background-color: #fcfcfc;
}

/*.resultset > ul.results > li.result:hover > dl > dt img.thumb { opacity:0.75; }*/
.resultset > .no-results {
    padding: 100px 20px 100px 20px;
    text-align: center;
    background: #fcfcfc;
}

/* schedule */
.resultset > .schedule {
    position: relative;
    border-top: 1px solid #e1e1e1;
}

.resultset > .schedule.no-border {
    border: none;
}

.resultset > .schedule > .teachers {
    position: relative;
    border-bottom: 1px solid #e1e1e1;
    overflow: hidden;
}

.resultset > .schedule > .teachers:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    border-left: 1px solid #e1e1e1;
}

.resultset > .schedule > .teachers ul.inner {
    margin: 0 0 0 68px;
    display: table;
    height: 100%;
    border-right: 1px solid #e1e1e1;
}

.resultset > .schedule > .teachers ul.inner > li {
    display: table-cell;
    width: 124px;
    border-left: 1px solid #e1e1e1;
}

.resultset > .schedule > .teachers ul.inner > li:fist-child {
    border: none;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher {
    padding: 10px 0 0 0;
    cursor: pointer;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher:hover {
    background-color: #f9f9f9;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher > dt {
    position: relative;
    width: 124px;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher > dt img.thumb {
    display: block;
    width: 102px;
    height: 102px;
    border: 1px solid #c7cad3;
    background: #f9f9f9;
    margin: 0 auto 0 auto;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher > dt .voice {
    position: absolute;
    top: 4px;
    right: 16px;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher > dd {
    position: relative;
    padding: 8px 0 10px 10px;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher > dd .bluegray:hover {
    color: #858da3;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher > dd .point_and_star {
    width: 114px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher > dd .point_and_star .point {
    display: inline-block;
    display: inline-block;
    padding: 2px 3px 0 3px;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    vertical-align: middle;
    color: #d94d38;
    background: transparent;
    border: 1px solid #d94d38;
    border-radius: 2px;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher > dd .point_and_star .point > em {
    font-size: 9px;
    vertical-align: baseline;
    margin-left: 1px;
}

.resultset > .schedule > .teachers ul.inner > li dl.teacher > dd .point_and_star .star {
    display: inline-block;
    font-size: 10px;
    font-weight: normal;
    vertical-align: middle;
}

.resultset > .schedule > .schedules {
    position: relative;
    width: 706px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.resultset > .schedule > .schedules:after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 100%;
    border-left: 1px solid #e1e1e1;
}

.resultset > .schedule > .schedules ul.inner {
    display: table;
    border-right: 1px solid #e1e1e1;
}

.resultset > .schedule > .schedules ul.inner > li {
    display: table-cell;
    width: 124px;
    border-left: 1px solid #e1e1e1;
}

.resultset > .schedule > .schedules ul.inner > li > ul > li {
    padding: 0 8px 0 8px;
    height: 50px;
    line-height: 50px;
    color: #575757;
    text-align: center;
    vertical-align: middle;
}

.resultset > .schedule > .schedules ul.inner > li > ul > li.odd {
    background: #fafafa;
}

.resultset > .schedule > .schedules ul.inner > li > ul > li.open {
}

.resultset > .schedule > .schedules ul.inner > li > ul > li.group {
}

.resultset > .schedule > .schedules ul.inner > li > ul > li.mine {
}

.resultset > .schedule > .schedules ul.inner > li > ul > li.reserved {
    color: #a1a1a1;
}

.resultset > .schedule > .schedules ul.inner > li > ul > li.closed {
    color: #dfdfdf;
}

.resultset > .schedule > .schedules ul.inner > li.scale {
    width: 68px;
    border: none;
}

.resultset > .schedule > .schedules ul.inner > li.scale > ul > li {
    text-align: right;
}

.resultset > .schedule > .navs {
    position: relative;
    height: 20px;
    border-top: 1px solid #e1e1e1;
}

.resultset > .schedule .nav {
    display: inline-block;
    width: 68px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    text-decoration: none;
    background: #6e6e6e;
    background: -moz-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6e6e6e), color-stop(100%, #3d3d3d));
    background: -webkit-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: -o-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: -ms-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: linear-gradient(to bottom, #6e6e6e 0%, #3d3d3d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6e6e6e', endColorstr='#3d3d3d', GradientType=0);
}

.resultset > .schedule .nav:hover {
    opacity: 0.75;
}

.resultset > .schedule .nav.up {
    position: absolute;
    top: -323px;
    left: 0;
    border-top: 1px solid #e1e1e1;
}

.resultset > .schedule .nav.down {
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid #e1e1e1;
}


/**** parts > recommendbox ****/
.recommendbox {
    position: relative;
    width: 100%;
    height: 170px;
}

.recommendbox > .progress {
    width: 100%;
    height: 170px;
    position: absolute;
    top: 0;
}

.recommendbox > .progress .indicator {
    display: block;
    width: 100px;
    margin: 50px auto 0 auto;
    position: relative;
}

/* 104 * 6 + 10 * 5 = 560 */
.recommendbox .items {
    width: 674px;
    height: 170px;
    margin: 0 auto 0 auto;
    overflow: hidden;
    position: relative;
}

.recommendbox .items > ul.inner {
    display: table;
    width: 674px;
    position: absolute;
    top: 0;
    left: 0;
}

.recommendbox .items > ul.inner > li {
    display: table-cell;
}

.recommendbox .nav {
    position: absolute;
    width: 20px;
    height: 100%;
}

.recommendbox .nav.prev {
    top: 0;
    left: 0;
    text-align: left;
}

.recommendbox .nav.next {
    top: 0;
    right: 0;
    text-align: right;
}

.recommendbox .nav:before {
    font-family: "icon";
    font-size: 18px;
    color: #858da3;
    position: relative;
    top: 40px;
}

.recommendbox .nav.next:before {
    content: "\e8c4";
}

.recommendbox .nav.prev:before {
    content: "\e8c1";
}

.recommendbox .nav:hover:before {
    opacity: 0.75;
}

/* teachers */
.recommendbox.teachers .items > ul.inner > li > dl.teacher {
    width: 104px;
    margin: 0 10px 0 0;
}

.recommendbox.teachers .items > ul.inner > li > dl.teacher > dt {
    position: relative;
    margin: 0 0 8px 0;
}

.recommendbox.teachers .items > ul.inner > li > dl.teacher > dt img.thumb {
    width: 102px;
    height: 102px;
}

.recommendbox.teachers .items > ul.inner > li > dl.teacher > dt .voice {
    position: absolute;
    bottom: 3px;
    right: 11px;
}

.recommendbox.teachers .items > ul.inner > li > dl.teacher > dd .bluegray:hover {
    color: #858da3;
}

.recommendbox.teachers .items > ul.inner > li > dl.teacher > dt img.thumb:hover {
    opacity: 0.75;
}


/**** parts > profilebox ****/
.profilebox {
    border: 1px solid #c7cad3;
    border-bottom: none;
    background-color: #ffffff;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.profilebox img.thumb {
    border: none;
    border-right: 1px solid #c7cad3;
    background: #f9f9f9;
    width: 151px;
    height: 150px;
}

.profilebox > dl {
    display: table;
    width: 100%;
}

.profilebox > dl > dt {
    display: table-cell;
    width: 150px;
    position: relative;
}

.profilebox > dl > dd {
    display: table-cell;
    padding: 5px;
    position: relative;
}

.profilebox > dl > dd > dl {
    margin: 0 0 6px 0;
}

.profilebox > dl > dd > dl > dt {
    color: #bbbbcc;
    font-size: 10px;
    font-weight: bold;
}

.profilebox > dl > dd > dl > dd {
    color: #222222;
    font-size: 12px;
}

.profilebox > dl > dd .btn {
    width: 93px;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
}

.profilebox > dl > dd .btn-follow {
    position: absolute;
    bottom: 5px;
    left: 5px;
}

.profilebox > dl > dd .link-settings {
    position: absolute;
    bottom: 5px;
    right: 8px;
    font-size: 12px;
    color: #bbbbbb;
}

.profilebox > dl > dd .link-settings:hover {
    color: #1da0d0;
}

.profilebox > dl > dd .btn > .icon-checkmark3 {
    position: relative;
    top: -1px;
    left: -2px;
}

.profilebox > dl > dd .btn > span > .icon-checkmark3 {
    position: relative;
    left: -2px;
}

.profilebox > dl > dd .btn > span > [class^="icon-"] {
    position: relative;
    left: -2px;
}

.profilebox > ul.tabs {
    display: table;
    width: 100%;
    border-top: 1px solid #c7cad3;
    border-right: 1px solid #c7cad3;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #efefef));
    background: -webkit-linear-gradient(top, #ffffff 0%, #efefef 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #efefef 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #efefef 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef', GradientType=0);
}

.profilebox > ul.tabs > li {
    display: table-cell;
}

.profilebox > ul.tabs > li > a {
    display: block;
    width: 84px;
    height: 25px;
    padding: 10px 0 0 0;
    border-left: 1px solid #c7cad3;
    border-bottom: 1px solid #c7cad3;
    color: #858da3;
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    box-shadow: rgba(255, 255, 255, 1) 0 0 0 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 1) 0 0 0 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 1) 0 0 0 1px inset;
}

.profilebox > ul.tabs > li:first-child > a {
    display: block;
    width: 83px;
    border-left: none;
}

.profilebox > ul.tabs > li > a > em {
    margin-left: 2px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    transform: scale(0.9, 1);
    -moz-transform: scale(0.9, 1);
    -webkit-transform: scale(0.9, 1);
    -ms-transform: scale(0.9, 1);
}

.profilebox > ul.tabs > li.active > a {
    border-bottom: 1px solid #404040;
    background: #ffffff;
    color: #000000;
}

.profilebox > ul.tabs > li.active > a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: #404040;
}

.profilebox > ul.tabs > li > a:hover {
    color: #000000;
}

.profilebox > ul.tabs.inactive > li > a {
    cursor: default;
}

.profilebox > ul.tabs.inactive > li > a:hover {
    color: #858da3;
}

.profilebox > ul.tabs.inactive > li.active > a:hover {
    color: #000000;
}

/* teacher face */
.profilebox.teacher > dl > dt > .voice {
    position: absolute;
    top: 5px;
    right: 6px;
}

.profilebox.teacher > ul.tabs > li > a {
    width: 126px;
    font-size: 11px;
}

.profilebox.teacher > ul.tabs > li > a > em {
    font-size: 13px;
    padding-left: 1px;
}

/* staff face */
.profilebox.staff > ul.tabs > li > a {
    width: 126px;
    font-size: 11px;
}

.profilebox.staff > ul.tabs > li > a > em {
    font-size: 13px;
}

/* student face */
.profilebox.student > ul.tabs.double > li > a {
    width: 126px;
    font-size: 11px;
}

.profilebox.student > ul.tabs.double > li > a > em {
    font-size: 13px;
}


/* fixed */
.profilebox-fixed {
    padding: 0 0 0 10px;
    position: relative;
}

.profilebox-fixed > dl {
    display: inline-block;
    margin-bottom: 5px;
}

.profilebox-fixed > dl > dt {
    display: inline;
    color: #858da3;
    font-size: 11px;
    font-weight: bold;
    vartical-align: baseline;
}

.profilebox-fixed > dl > dd {
    display: inline;
    color: #858da3;
    font-size: 13px;
    vartical-align: baseline;
}

/* content */
.profilebox-content {
    border-bottom: 1px solid #c7cad3;
    background: #ffffff;
    position: relative;
}

.profilebox-content > .content {
    border: 1px solid #c7cad3;
    border-bottom: none;
    color: #333333;
}

.profilebox-content > .content > h2.heading {
    padding: 0 10px 0 10px;
    border-bottom: 1px solid #c7cad3;
    background: #f6f6f6;
    font-size: 12px;
    line-height: 28px;
    vertical-align: middle;
    font-weight: bold;
    color: #505050;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
    position: relative;
    border: 1px solid #ffffff;
}

.profilebox-content > .content > h2.heading > em {
    font-size: 12px;
    font-weight: normal;
    color: #aaaaaa;
    position: absolute;
    top: 0;
    right: 5px;
}

.profilebox-content > .content.with-show-hide {
    cursor: pointer;
}

.profilebox-content > .content.with-show-hide > h2.heading > a {
    position: absolute;
    top: 0;
    right: 10px;
}

.profilebox-content > .content.with-show-hide > h2.heading > a:after {
    content: "\e8cb";
    display: inline-block;
    font-family: "icon";
    color: #777777;
    font-size: 12px;
    font-weight: normal;
    line-height: 28px;
    vertical-align: middle;
}

.profilebox-content > .content.with-show-hide > h2.heading > a.hide:after {
    content: "\e8cb";
}

.profilebox-content > .content.with-show-hide > h2.heading > a.show:after {
    content: "\e8c9";
}

.profilebox-content > .content > .inner {
    border-top: 1px solid #c7cad3;
    padding: 10px;
}

.profilebox-content > .content > .inner > p + p {
    margin-top: 3px;
}

.profilebox-content > .content > .inner.with-min-height {
    min-height: 60px;
}

.profilebox-content > .content > .inner.ellipsis {
    max-height: 100px;
    min-height: 60px;
    overflow: hidden;
    position: relative;
}

.profilebox-content > .content > .inner.ellipsis a.more {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    border-bottom: 12px solid #ffffff;
    text-align: middle;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='#ffffff', GradientType=0);
}

.profilebox-content > .content > .inner.ellipsis a.more > i {
    text-shadow: 0 0 4px rgba(255, 255, 255, 1);
    color: #858da3;
    font-size: 20px;
    position: relative;
    top: 42px;
}

.profilebox-content > .content > .inner.ellipsis a.more:hover > i {
    color: #1da0d0;
}

.profilebox-content > .content .sns [class^="icon-"] {
    font-size: 16px;
}

.profilebox-content > .content .sns a:hover {
    opacity: 0.75;
}

/* content.movie */
.profilebox-content > .content.movie > .inner {
    padding: 9px 0 9px 0;
}

.profilebox-content > .content.movie > .inner > iframe {
    display: block;
    margin: 0 auto 0 auto;
    z-index: 0;
}

.profilebox-content > .content.movie > .inner > iframe * {
    z-index: 0;
}

/* content.curriculums */
.profilebox-content > .content.curriculums ul > li {
    margin: 0 0 6px 0;
    line-height: 17px;
}

.profilebox-content > .content.curriculums ul > li > a {
    display: block;
    color: #333333;
    padding: 0 0 0 15px;
    position: relative;
}

.profilebox-content > .content.curriculums ul > li > a:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #9fdf7b;
    border-radius: 4px;
    border: 1px solid #9fdf7b;
}

.profilebox-content > .content.curriculums ul > li > a:hover, .profilebox-content > .content.curriculums ul > li > a:hover:before {
    color: #418abb;
}

/* content.communities */
.profilebox-content > .content.communities ul > li {
    margin: 0 0 6px 0;
    line-height: 17px;
}

.profilebox-content > .content.communities ul > li > a {
    display: block;
    color: #333333;
    padding: 0 0 0 15px;
    position: relative;
    word-break: break-all;
}

.profilebox-content > .content.communities ul > li > a em {
    font-size: 11px;
    color: #999999;
    margin-left: 3px;
}

.profilebox-content > .content.communities ul > li > a:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #858da3;
    border-radius: 4px;
    border: 1px solid #858da3;
    opacity: 0.5;
}

.profilebox-content > .content.communities ul > li > a:hover, .profilebox-content > .content.curriculums ul > li > a:hover:before {
    color: #418abb;
}

/* content.members */
.profilebox-content > .content.members {
    min-height: 200px;
    position: relative;
}

.profilebox-content > .content.members.no-min-height {
    min-height: 0;
}

.profilebox-content > .content.members .inner {
    padding: 0 0 10px 11px;
}

.profilebox-content > .content.members ul > li {
    display: inline-block;
    width: 52px;
    margin: 10px 8px 0 0;
    vertical-align: top;
}

.profilebox-content > .content.members ul > li img.thumb {
    width: 50px;
    height: 50px;
    border: 1px solid #c7cad3;
}

.profilebox-content > .content.members ul > li > dl > dt {
    width: 52px;
    margin: 0 0 3px 0;
}

.profilebox-content > .content.members ul > li > dl > dd {
    font-size: 11px;
    line-height: 15px;
    color: #858da3;
    text-align: center;
    overflow-x: hidden;
}

.profilebox-content > .content.members ul > li > dl:hover {
    opacity: 0.75;
}

.profilebox-content > .content.members a.more {
    display: block;
    line-height: 25px;
    vertical-align: middle;
    text-align: center;
    font-size: 12px;
    background: #f6f6f6;
    color: #666666;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}

.profilebox-content > .content.members div.more {
    padding: 6px 0 4px 10px;
    background: #f6f6f6;
    font-size: 12px;
}

.profilebox-content > .content.members .no-results {
    padding: 20px 20px 30px 20px;
    font-size: 11px;
    color: #858da3;
    text-align: center;
}

.profilebox-content > .content.members .progress {
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 1;
}

.profilebox-content > .content.members .progress .indicator {
    position: absolute;
    top: 0;
    left: 50%;
}


/**** parts > teacherbox ****/
.teacherbox {
    position: relative;
}

.teacherbox > ul.tabs {
    height: 40px;
    position: relative;
}

.teacherbox > ul.tabs > li {
    display: block;
    width: 149px;
    height: 37px;
}

.teacherbox > ul.tabs > li.schedule {
    position: absolute;
    top: 3px;
    left: 0;
    z-index: 1;
}

.teacherbox > ul.tabs > li.fixing {
    position: absolute;
    top: 3px;
    left: 148px;
    z-index: 2;
}

.teacherbox > ul.tabs > li.reviews {
    position: absolute;
    top: 3px;
    left: 296px;
    z-index: 3;
}

.teacherbox > ul.tabs > li > a {
    display: block;
    height: 37px;
    border: 1px solid #c7cad3;
    white-space: nowrap;
    overflow: hidden;
    color: #a4a4a4;
    font-size: 14px;
    line-height: 37px;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);
}

.teacherbox > ul.tabs > li > a:hover {
    color: #404040;
}

.teacherbox > ul.tabs > li.schedule > a > .icon-schedule {
    font-size: 12px;
    margin-right: 5px;
    line-height: 37px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.teacherbox > ul.tabs > li.fixing > a > .icon-fixing {
    font-size: 12px;
    margin-right: 3px;
    line-height: 37px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.teacherbox > ul.tabs > li.reviews > a > .icon-review {
    font-size: 12px;
    margin-right: 3px;
    line-height: 37px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.teacherbox > ul.tabs > li.active {
    height: 40px;
    position: absolute;
    top: 0;
}

.teacherbox > ul.tabs > li.active > a {
    border-top: 2px solid #404040;
    border-bottom: none;
    height: 40px;
    color: #404040;
    background: #ffffff;
    cursor: default;
}

.teacherbox > ul.tabs.single {
    height: 30px;
}

.teacherbox > ul.tabs.single > li {
    height: 27px;
}

.teacherbox > ul.tabs.single > li.active {
    height: 29px;
    width: 180px;
}

.teacherbox > ul.tabs.single > li.active > a {
    height: 29px;
}

.teacherbox > ul.tabs.single > li.empty {
    position: absolute;
    top: 3px;
    left: 179px;
    width: 265px;
    z-index: 2;
    border-bottom: 1px solid #c7cad3;
}

.teacherbox > ul.tabs.single > li.empty_:before {
    content: "";
    display: block;
    border: 1px solid #c7cad3;
}

.teacherbox > ul.tabs.double {
}

.teacherbox > ul.tabs.double > li {
    width: 223px;
}

.teacherbox > ul.tabs.double > li.fixing {
    left: 222px;
}

.teacherbox > ul.tabs.double > li.reviews {
    left: 222px;
}

.teacherbox > .content {
    background: #ffffff;
    border: 1px solid #c7cad3;
    border-top: none;
    position: relative;
    padding: 10px 0 0 0;
}

.teacherbox > .content .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 445px;
    background: transparent;
    z-index: 1;
}

.teacherbox > .content .progress .indicator {
    position: absolute;
    top: 140px;
    left: 222px;
}

.teacherbox > .content .no-results {
    background: #fcfcfc;
    margin: 15px 0 25px 0;
    padding: 100px 10px 100px 10px;
    text-align: center;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}


/* .content.schedule */
.teacherbox > .content.schedule {
}

.teacherbox > .content.schedule .selectors {
    height: 40px;
    padding: 20px 10px 10px 10px;
}

.teacherbox > .content.schedule .nav {
    display: block;
    width: 18px;
    height: 55px;
    line-height: 55px;
    color: #000000;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    outline: none;
    text-decoration: none;
    border: 1px solid #e1e1e1;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #f5f5f5), color-stop(100%, #f5f5f5));
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f5f5f5 51%, #f5f5f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
}

.teacherbox > .content.schedule .nav:hover {
    font-size: 13px;
}

.teacherbox > .content.schedule .nav.disabled, .teacherbox > .content.schedule > .nav.disabled:hover {
    font-size: 11px;
    color: #aaaaaa;
    cursor: default;
}

.teacherbox > .content.schedule .nav.prev {
    position: absolute;
    top: 80px;
    left: 39px;
    border-right: none;
}

.teacherbox > .content.schedule .nav.next {
    position: absolute;
    top: 80px;
    right: 7px;
    border-left: none;
}

.teacherbox > .content.schedule .week {
    width: 428px;
    margin: 0 auto 0 auto;
    overflow: hidden;
    position: relative;
}

.teacherbox > .content.schedule .week > .progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.teacherbox > .content.schedule .week > .progress .indicator {
    position: absolute;
    top: 200px;
    left: 215px;
}

.teacherbox > .content.schedule .week > .header {
    border-bottom: 1px solid #e1e1e1;
}

.teacherbox > .content.schedule .week > .header > ul {
    margin: 0 0 0 51px;
    display: table;
    border: 1px solid #e1e1e1;
    border-left: none;
    border-bottom: none;
}

.teacherbox > .content.schedule .week > .header > ul > li {
    display: table-cell;
    width: 50px;
    height: 55px;
    color: #333333;
    line-height: 15px;
    text-align: center;
    vertical-align: center;
    border-left: 1px solid #e1e1e1;
    background: #f7f7f7;
    background: -moz-linear-gradient(top, #f7f7f7 2%, #ffffff 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #f7f7f7), color-stop(99%, #ffffff));
    background: -webkit-linear-gradient(top, #f7f7f7 2%, #ffffff 99%);
    background: -o-linear-gradient(top, #f7f7f7 2%, #ffffff 99%);
    background: -ms-linear-gradient(top, #f7f7f7 2%, #ffffff 99%);
    background: linear-gradient(to bottom, #f7f7f7 2%, #ffffff 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#ffffff', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
}

.teacherbox > .content.schedule .week > .header > ul > li > strong {
    display: block;
    margin: 13px 0 2px 0;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    transform: scale(0.8, 1);
    -moz-transform: scale(0.8, 1);
    -webkit-transform: scale(0.8, 1);
    -ms-transform: scale(0.8, 1);
}

.teacherbox > .content.schedule .week > .header > ul > li em {
    display: block;
    font-weight: normal;
    font-size: 10px;
    text-align: center;
}

.teacherbox > .content.schedule .week > .header > ul > li.disabled {
    color: #cccccc;
}

.teacherbox > .content.schedule .week > .scrollview {
    width: 421px;
    height: 511px;
    border-bottom: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    position: relative;
}

.teacherbox > .content.schedule .week ul.scale {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-top: none;
    border-bottom: none;
}

.teacherbox > .content.schedule .week ul.scale > li {
    height: 31px;
    border-bottom: 1px solid #e1e1e1;
    padding: 0 5px 0 0;
    font-size: 10px;
    line-height: 30px;
    text-align: right;
    color: #333333;
}

.teacherbox > .content.schedule .week ul.scale > li.tail {
    _height: 32px;
    border-bottom: none;
}

.teacherbox > .content.schedule .week ul.schedules {
    margin: 0 0 0 51px;
    display: table;
    border-right: 1px solid #e1e1e1;
}

.teacherbox > .content.schedule .week ul.schedules > li {
    display: table-cell;
    width: 50px;
    border-left: 1px solid #e1e1e1;
    overflow: hidden;
}

.teacherbox > .content.schedule .week ul.schedules > li > ul {
    width: 50px;
}

.teacherbox > .content.schedule .week ul.schedules > li > ul > li {
    height: 30px;
    padding: 1px;
    font-size: 8px;
    line-height: 30px;
    text-align: center;
    vertical-align: center;
    overflow: hidden;
}

.teacherbox > .content.schedule .week ul.schedules > li > ul > li > a.btn {
    padding: 0;
    font-size: 9px;
    width: 100%;
}

.teacherbox > .content.schedule .week ul.schedules > li > ul > li.odd {
    background: #fafafa;
}

.teacherbox > .content.schedule .week ul.schedules > li > ul > li.open > .btn {
    font-size: 9px;
    line-height: 28px;
    letter-spacing: 1px;
}

.teacherbox > .content.schedule .week ul.schedules > li > ul > li.group > .btn {
    font-size: 8px;
    line-height: 28px;
    letter-spacing: 0px;
}

.teacherbox > .content.schedule .week ul.schedules > li > ul > li.mine > .btn {
    font-size: 8px;
    line-height: 28px;
    letter-spacing: 0px;
}

.teacherbox > .content.schedule .week ul.schedules > li > ul > li.reserved {
    font-size: 8px;
    color: #a1a1a1;
}

.teacherbox > .content.schedule .week ul.schedules > li > ul > li.closed {
    font-size: 9px;
    color: #dfdfdf;
}

/* .content.fixing */
.teacherbox > .content.fixing {
}

.teacherbox > .content.fixing .cant_accept {
    background: #fcfcfc;
    margin: 20px 0 0 0;
    padding: 100px 10px 100px 10px;
    text-align: center;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

.teacherbox > .content.fixing .selectors {
    height: 40px;
    padding: 20px 10px 10px 10px;
}

/* .weeks is for an old layout */
.teacherbox > .content.fixing .weeks {
    margin: 0 10px 0 10px;
}

.teacherbox > .content.fixing .weeks .week {
    border: 1px solid #e1e1e1;
    border-bottom: none;
    position: relative;
    padding: 0 0 0 100px;
    position: relative;
}

.teacherbox > .content.fixing .weeks .week .wday {
    font-weight: bold;
    font-size: 13px;
    line-height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100%;
    text-align: center;
    background: #f7f7f7;
    border-top: 1px solid #ffffff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.teacherbox > .content.fixing .weeks .week dl.block {
    border-left: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    display: table;
    width: 100%;
}

.teacherbox > .content.fixing .weeks .week dl.block.first {
    border-top: none;
}

.teacherbox > .content.fixing .weeks .week dl.block > dt {
    display: table-cell;
    border-right: 1px solid #e1e1e1;
    width: 110px;
    padding-left: 8px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
}

.teacherbox > .content.fixing .weeks .week dl.block > dd {
    display: table-cell;
    padding: 0 0 0 4px;
    vertical-align: middle;
}

.teacherbox > .content.fixing .weeks .week:last-child {
    border-bottom: 1px solid #e1e1e1;
}

.teacherbox > .content.fixing .weeks .week dl.block.reserved > dt {
    color: #bbbbbb;
}

.teacherbox > .content.fixing .weeks .week dl.block.reserved > dd {
    color: #bbbbbb;
}

.teacherbox > .content.fixing .week {
    margin: 0 auto 0 auto;
    overflow: hidden;
    position: relative;
}

.teacherbox > .content.fixing .week > .progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.teacherbox > .content.fixing .week > .progress .indicator {
    position: absolute;
    top: 200px;
    left: 215px;
}

.teacherbox > .content.fixing .week > .header {
    border-bottom: 1px solid #e1e1e1;
}

.teacherbox > .content.fixing .week > .header > ul {
    margin: 0 0 0 51px;
    display: table;
    border: 1px solid #e1e1e1;
    border-left: none;
    border-bottom: none;
}

.teacherbox > .content.fixing .week > .header > ul > li {
    display: table-cell;
    width: 50px;
    height: 40px;
    color: #333333;
    line-height: 40px;
    text-align: center;
    vertical-align: center;
    font-weight: bold;
    font-size: 12px;
    border-left: 1px solid #e1e1e1;
    background: #f7f7f7;
    background: -moz-linear-gradient(top, #f7f7f7 2%, #ffffff 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #f7f7f7), color-stop(99%, #ffffff));
    background: -webkit-linear-gradient(top, #f7f7f7 2%, #ffffff 99%);
    background: -o-linear-gradient(top, #f7f7f7 2%, #ffffff 99%);
    background: -ms-linear-gradient(top, #f7f7f7 2%, #ffffff 99%);
    background: linear-gradient(to bottom, #f7f7f7 2%, #ffffff 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#ffffff', GradientType=0);
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
}

.teacherbox > .content.fixing .week > .scrollview {
    width: 421px;
    height: 511px;
    border-bottom: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    position: relative;
}

.teacherbox > .content.fixing .week ul.scale {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-top: none;
    border-bottom: none;
}

.teacherbox > .content.fixing .week ul.scale > li {
    height: 31px;
    border-bottom: 1px solid #e1e1e1;
    padding: 0 5px 0 0;
    font-size: 10px;
    line-height: 30px;
    text-align: right;
    color: #333333;
}

.teacherbox > .content.fixing .week ul.scale > li.tail {
    _height: 32px;
    border-bottom: none;
}

.teacherbox > .content.fixing .week ul.schedules {
    margin: 0 0 0 51px;
    display: table;
    border-right: 1px solid #e1e1e1;
}

.teacherbox > .content.fixing .week ul.schedules > li {
    display: table-cell;
    width: 50px;
    border-left: 1px solid #e1e1e1;
    overflow: hidden;
}

.teacherbox > .content.fixing .week ul.schedules > li > ul {
    width: 50px;
}

.teacherbox > .content.fixing .week ul.schedules > li > ul > li {
    height: 30px;
    padding: 1px;
    font-size: 8px;
    line-height: 30px;
    text-align: center;
    vertical-align: center;
    overflow: hidden;
}

.teacherbox > .content.fixing .week ul.schedules > li > ul > li > a.btn {
    padding: 0;
    font-size: 9px;
    width: 100%;
}

.teacherbox > .content.fixing .week ul.schedules > li > ul > li.odd {
    background: #fafafa;
}

.teacherbox > .content.fixing .week ul.schedules > li > ul > li.open > .btn {
    font-size: 9px;
    line-height: 28px;
    letter-spacing: 1px;
}

.teacherbox > .content.fixing .week ul.schedules > li > ul > li.mine > .btn {
    font-size: 8px;
    line-height: 28px;
    letter-spacing: 0px;
}

.teacherbox > .content.fixing .week ul.schedules > li > ul > li.reserved {
    font-size: 8px;
    color: #a1a1a1;
}

.teacherbox > .content.fixing .week ul.schedules > li > ul > li.closed {
    font-size: 9px;
    color: #dfdfdf;
}


/* .content.reviews */
.teacherbox > .content.reviews {
}

.teacherbox > .content.reviews .none {
    background: #fcfcfc;
    margin: 0 0 10px 0;
    padding: 100px 10px 100px 10px;
    text-align: center;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}


/**** parts > curriculumbox ****/
.curriculumbox {
    position: relative;
}

.curriculumbox > .title {
    margin: 30px 0 30px 20px;
    width: 500px;
}

.curriculumbox > .title > h1 {
    font-size: 17px;
    font-weight: bold;
}

.curriculumbox .picture {
    display: inline-block;
    float: right;
    margin: 0 0 0 15px;
}

.curriculumbox .picture img.thumb {
    width: 160px;
    height: 160px;
}

.curriculumbox .picture > .no-image {
    display: inline-block;
    width: 158px;
    height: 158px;
    border: 1px solid #c7cad3;
    background: #fafafa;
    line-height: 158px;
    text-align: center;
    vertical-align: middle;
}

.curriculumbox > .content {
    border-top: 1px dotted #dadada;
    padding: 10px;
}

.curriculumbox > ul.btns {
    display: block;
    padding: 10px;
    background: #f9f9f9 url("../images/common/bg.dotted.png") top left repeat;
    border-top: 1px solid #c7cad3;
    text-align: center;
}

.curriculumbox > ul.btns > li {
    display: inline-block;
    vertical-align: middle;
}

.curriculumbox > dl.bookmark {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 90px;
}

.curriculumbox > dl.bookmark > dt {
    display: block;
}

.curriculumbox > dl.bookmark > dd {
    display: block;
}

/**** parts > articlebox ****/
.articlebox > .title > h1 {
    font-size: 17px;
    font-weight: bold;
    line-height: 30px;
}

.articlebox > .content {
    font-size: 14px;
    line-height: 1.7;
}

.articlebox > .content strong {
    font-weight: bold !important;
}
.articlebox > .content em {
    font-style: italic !important;
}
.articlebox > .content em strong span {
    font-style: italic !important;
}
.articlebox > .content em span strong {
    font-style: italic !important;
}
.articlebox > .content em strong  {
    font-style: italic !important;
}
.articlebox > .content em span  {
    font-style: italic !important;
}
.articlebox > .content em p,.articlebox > .content em div  {
    font-style: italic !important;
}
.articlebox > .content p {
    margin: 14px 0;
}

.articlebox > .content img {
    max-width: 100%;
    height: auto;
}


/**** parts > calendarbox ****/
.calendarbox {
    border-top: 2px solid #404040;
}

.calendarbox > ul.header {
    display: table;
    width: 100%;
    background: #f6f6f6;
}

.calendarbox > ul.header > li {
    display: table-cell;
    border-left: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    position: relative;
    text-align: left;
    vertical-align: middle;
    line-height: 44px;
    color: #404040;
}

.calendarbox > ul.header > li:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-left: 1px solid #ffffff;
}

.calendarbox > ul.header > li:first-child {
    border-left: none;
}

.calendarbox > ul.header > li:first-child:after {
    display: none;
}

.calendarbox > ul.header > li.title {
    width: 150px;
    padding: 0 0 0 20px;
    font-size: 14px;
    font-weight: bold;
}

.calendarbox > ul.header > li.title > i {
    color: #858585;
    font-size: 13px;
}

.calendarbox > ul.header > li.year-month {
    padding: 0 0 0 20px;
    font-size: 14px;
}

.calendarbox > ul.header > li.nav {
    width: 40px;
    text-align: center;
    cursor: pointer;
}

.calendarbox > ul.header > li.nav > a {
    color: #404040;
    font-weight: bold;
}

.calendarbox > ul.header > li.nav:hover {
    background: #f0f0f0;
}

.calendarbox > .calendar {
    position: relative;
    min-height: 240px;
}

.calendarbox > .calendar > table {
    margin: 8px auto 0 auto;
    border: 1px solid #e1e1e1;
    border-collapse: collapse;
}

.calendarbox > .calendar > table th, .calendarbox > .calendar > table td {
    width: 99px;
    border: 1px solid #e1e1e1;
    border-collapse: collapse;
    background: #ffffff;
    font-size: 12px;
    text-align: left;
    vertical-align: top;
}

.calendarbox > .calendar > table > thead > tr > th {
    padding: 1px 0 0 0;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    background: #f5f5f5;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.calendarbox > .calendar > table > thead > tr > th:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 1px solid #ffffff;
}

.calendarbox > .calendar > table > thead > tr > th.wday0 {
    background: #f5e7e7;
    color: #ff2626;
}

.calendarbox > .calendar > table > thead > tr > th.wday6 {
    background: #e4ebf8;
    color: #2693ff;
}

.calendarbox > .calendar > table > thead > tr > th.wday0:after,
.calendarbox > .calendar > table > thead > tr > th.wday6:after {
    opacity: 0.8;
}

.calendarbox > .calendar > table > tbody > tr > td {
    height: 58px;
}

.calendarbox > .calendar > table > tbody > tr > td:hover {
    background: #fcfcfc;
}

.calendarbox > .calendar > table > tbody > tr > td > em {
    display: block;
    padding: 5px;
    font-size: 11px;
    color: #5a5a5a;
    text-align: right;
}

.calendarbox > .calendar > table > tbody > tr > td.invalid > em {
    color: #b0b0b0;
}

.calendarbox > .calendar > table > tbody > tr > td.today {
    background: #f9f9f9;
}

.calendarbox > .calendar > table > tbody > tr > td.today > em {
    font-weight: bold;
}

.calendarbox > .calendar > table > tbody > tr > td > ul > li {
    margin: 0 2px 3px 2px;
}

.calendarbox > .calendar > table > tbody > tr > td > ul > li > a {
    display: block;
    padding: 1px 0 0 0;
    color: #898fa3;
    font-size: 10px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    border: 1px solid #c8cbd4;
    border-radius: 5px;
    background: #e9eaed;
    white-space: nowrap;
    overflow: hideen;
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px 1px inset;
    transform: scale(0.95, 1);
    -moz-transform: scale(0.95, 1);
    -webkit-transform: scale(0.95, 1);
    -ms-transform: scale(0.95, 1);
}

.calendarbox > .calendar > table > tbody > tr > td > ul > li > a:hover {
    background: #e4e6e9;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.calendarbox > .calendar > table > tbody > tr > td > ul > li > a.reserved {
    color: #ffffff;
    border: 1px solid #1f98c6;
    background: #3cb6e3;
    box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 1px inset;
}

.calendarbox > .calendar > table > tbody > tr > td > ul > li > a.reserved:hover {
    background: #2dafe1;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.calendarbox > .calendar > .progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
}

.calendarbox > .calendar > .progress .indicator {
    position: absolute;
    top: 160px;
    left: 360px;
}

.calendarbox > .footer {
    padding: 10px;
    background: #f9f9f9 url("../images/common/bg.dotted.png") top left repeat;
    border-top: 1px solid #c7cad3;
    text-align: right;
}

.calendarbox > ul.lessons {
    width: 702px;
    margin: 0 auto 0 auto;
}

.calendarbox > ul.lessons > li {
    padding: 12px 0 12px 0;
}

.calendarbox > ul.lessons > li > dl.box {
    border-color: #e1e1e1;
    background: #f9f9f9;
}

.calendarbox > ul.lessons > li > dl.box:after {
    border-top-color: #f9f9f9;
}

.calendarbox > ul.lessons > li > dl.box > dt .thumb {
    border-color: #dddddd;
}

.calendarbox > ul.lessons > li > dl.box > dd {
    position: relative;
}

.calendarbox > ul.lessons > li > dl.box > dd ul.btns {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
}


/* parts > informationbox */
.informationbox {
    border: 1px solid #c7cad3;
    background-color: #ffffff;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.informationbox > .heading {
    color: #757575;
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
    vertical-align: middle;
    position: relative;
    border-bottom: 1px solid #e8e8e8;
}

.informationbox > .heading > a.more {
    position: absolute;
    right: 10px;
    color: #b7b7b7;
}

.informationbox > .heading.rtl > a.more {
    position: absolute;
    left: 10px;
    right: auto;
    color: #b7b7b7;
}

.informationbox > ul {
    height: 250px;
    overflow-y: scroll;
}

.informationbox > ul > li {
    border-top: 1px solid #e8e8e8;
    padding: 13px 15px 10px 10px;
    color: #5a5a5a;
}

.informationbox > ul > li:first-child {
    border-top: none;
}

.informationbox > ul > li:hover {
    background: #f9f9f9;
}

.informationbox > ul > li > h3 {
    display: inline-block;
    padding: 0 0 4px 0;
    color: #757575;
    font-weight: bold;
    font-size: 13px;
    line-height: 20px;
    margin: 0 0 0 0;
    vertlica-align: middle;
}

.informationbox > ul > li > em {
    display: inline-block;
    float: right;
    padding: 0 0 8px 10px;
    line-height: 20px;
    text-align: right;
    color: #999999;
    font-size: 10px;
    vertlica-align: middle;
}

.informationbox > ul > li > p {
    clear: both;
    font-size: 12px;
    margin: 0 0 5px 0;
}

.informationbox > ul > li > ul > li {
    margin: 8px 0 0 0;
    font-size: 12px;
}

.informationbox > ul.extend {
    height: auto;
    overflow: visible;
}

.informationbox > ul.extend > li {
    padding-right: 10px;
}


/**** parts > pointsbox ****/
.pointsbox {
    position: relative;
    height: 165px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #c7cad3;
    background: #ffffff;
    box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.pointsbox h2.heading {
    color: #757575;
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
    vertical-align: middle;
}

.pointsbox h2.heading [class^="icon-"] {
    color: #b0b0b0;
    font-size: 16px;
    vertical-align: middle;
    margin-right: 3px;
}

.pointsbox h2.heading a {
    color: #757575;
}

.pointsbox h2.heading a:hover {
    opacity: 0.75;
}

.pointsbox .point {
    padding-top: 6px;
    width: 160px;
    color: #343845;
    font-size: 12px;
    text-align: center;
    vertical-align: baseline;
}

.pointsbox .point strong {
    font-size: 25px;
    font-weight: bold;
    vertical-align: baseline;
    margin-right: 2px;
}

.pointsbox .description {
    margin: 10px 0 0 10px;
    font-size: 10px;
    line-height: 14px;
    text-shadow: -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, 1px 0px 0px #ffffff, 0px 1px 0px #ffffff;
}

.pointsbox .paypal {
    width: 53px;
    height: 13px;
    position: absolute;
    top: 12px;
    right: 15px;
}

.pointsbox a.more {
    width: 180px;
    position: absolute;
    bottom: 11px;
    left: 10px;
}

.pointsbox a.mtl-10 {
    margin: 10px 0 0 10px;
}

.pointsbox-h {
    height: 220px;
}

.start_guide {
    padding-left: 14px;
}

.pointsbox a.flush {
    display: block;
    width: 180px;
    margin: 12px 10px 0 10px;
    text-align: center;
    border-radius: 5px;
    background: rgba(217, 77, 56, 0.6);
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    line-height: 27px;
    vertical-align: baseline;
    white-space: nowrap;
    overflow: hidden;
}

/**** parts > ranking ****/
.learnRanking{position:relative;padding-bottom:10px;background-color:#fff;text-align:left;vertical-align:top;border:1px solid #c7cad3;background:#ffffff url("") top right no-repeat;box-shadow:rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;-webkit-box-shadow:rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;-moz-box-shadow:rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
.learnRanking>h2.heading{color:#333;font-size:13px;font-weight:bold;line-height:16px; vertical-align:middle;border-bottom:1px solid #c7cad3;}
.learnRanking .point{text-align:left;line-height:18px;margin:0 50px 0 10px;padding-top:1px;font-size:12px;vertical-align:baseline;color:#333}
.learnRanking .point p{margin-top:8px;}
.learnRanking .point p:last-child{margin-top:5px;}
.learnRanking .point strong{font-size:25px;font-weight:bold;vertical-align:baseline;margin-right:2px;color:#000;line-height:28px;}
.learnRanking .more{position:absolute;right:0;width:60px;top:40%;}
.learnRanking .more img{width:40px;}

/**** parts > ranking box ****/
.rankBox{margin:30px auto;border-image: initial;overflow: hidden;}
.rankBox .hd{overflow:hidden;background: #ffffff;background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);}
.rankBox .hd li{position:relative;margin-left:-1px;height:37px;cursor:pointer;line-height:37px;text-align:center;width:122px;float:left;border:1px solid #ddd;border-top:0;border-right:none;_font-weight:bold;color: rgb(164, 164, 164);}
.rankBox .hd li:first-child{width:131px;}
.rankBox .hd li.on{background:#fff;border-bottom:1px solid #fff;color: rgb(64, 64, 64);border-top: 2px solid rgb(64, 64, 64);}
.rankBox .bd{border-top:0;}
.rankBox .lh{overflow:hidden;}
.rankBox .lh li{padding:0 10px;}
.rankBox .lh li .p-img{width:130px;height:132px;padding:30px 13px 0 13px;margin:0 auto;text-align:center;}
.rankBox .lh li .p-name{height:36px;line-height:18px;word-break:break-all;word-wrap:break-word;overflow:hidden;}
.rankBox .lh li .p-price{color:#999;}
.rankBox .lh li .p-price strong{color:#c00;font-size:14px;}
.rankBox .point{text-align:left;line-height:18px;margin:0 0px 0 8px;padding-top:1px;font-size:12px;vertical-align:baseline;color:#333}
.tab-group .tab_content.active {
    height: auto;
    overflow: visible;
}
.tab-group .tab_content {
    height: 0;
    padding: 0 0;
    margin-top:10px;
    overflow: hidden;
    transition: opacity 0.4s ease, height 0.4s ease;
}
.rankBox .lh li .tab_list li {
    display: inline;
    padding:0;
}
.rankBox .lh li .tab_list {
    margin: 0 10px;
    display: flex;
    justify-content: space-between;
}

.tab_list li a {
    color: rgb(68, 68, 68);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(174, 179, 191);
    border-image: initial;
    background: rgb(255, 255, 255);
    display: inline-block;
    font-size: 12px;
    line-height: 26px;
    font-weight: normal;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    -webkit-appearance: none;
    box-sizing: border-box;
    margin: 0px;
    padding: 0px 5px;
    outline: 0px;
    text-decoration: none;
    overflow: hidden;
    border-radius: 5px;
    width:90px;
}
.tab_list li.active a {
    color: rgb(255, 255, 255);
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(189, 43, 131);
    border-image: initial;
    background: linear-gradient(rgb(237, 92, 183) 0%, rgb(204, 45, 152) 100%);
}
.rankBox .moreData {
    text-align:center;
}
.rankContent .searchbox .tabs li {width:361px;}
.tab_wrapper .content_wrapper .accordian_header {
    display:none;
}
.border-Top {border-top:1px solid #c7cad3}

dl.change_prefecture {border:none;}
.change_prefecture dl.form-field  { border-top:1px solid #e1e1e1;}
.change_prefecture dl.search-field > dd { padding-left:15px; }

.tabStyle span{padding-right:5px;}
.tabStyle span img {border:1px solid #c7cad3;width:40px;}
.tabStyle .point strong{padding-left:0px;font-size:23px;margin-right:0px;}
.learnRanking .tabStyle .point p:last-child {margin-top:8px;}

.tabStyle span {font-size:12px; padding-right:2px;}
.tabStyle .moreData {text-align:right;}
.tabStyle .moreData a {font-size:12px;line-height:26px;}

prefecture_now {line-height:62px;}
.prefecture_now .change_btn {height:35px;}
.prefecture_now .box.balloon:before {content:none;}
.prefecture_now  .box.balloon:after {content: none;}
.area_content_text .description span {display:inline-block;}

.tabStyle .country_content p span {display: inline-block;line-height: 38px;padding-right:0;}
.tabStyle .country_content p span:first-child {width:105px;}
/**** parts > ticketbox ****/
.ticketbox {
    position: relative;
    height: 165px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #c7cad3;
    background: #ffffff;
    box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.ticketbox h2.heading {
    color: #757575;
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
    vertical-align: middle;
}

.ticketbox h2.heading > [class^="icon-"] {
    color: #b0b0b0;
    font-size: 16px;
    vertical-align: middle;
    margin-right: 3px;
}

.ticketbox table {
    position: absolute;
    left: 10px;
    bottom: 10px;
    border: 1px solid #e1e1e1;
    border-collapse: collapse;
    background: #ffffff;
}

.ticketbox table > thead > tr > th {
    border: 1px solid #e1e1e1;
    padding: 4px;
    text-align: center;
    vertical-align: middle;
    font-size: 11px;
}

.ticketbox table > tbody > tr > td {
    border: 1px solid #e1e1e1;
    padding: 6px;
    text-align: center;
    vertical-align: bottom;
    width: 68px;
}

/**** parts > termbox ****/
.termbox {
    position: relative;
    height: 165px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #c7cad3;
    background: #ffffff;
    box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;
    -moz-box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 1px inset;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.termbox h2.heading {
    color: #757575;
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
    vertical-align: middle;
}

.termbox h2.heading > [class^="icon-"] {
    color: #b0b0b0;
    font-size: 16px;
    vertical-align: middle;
    margin-right: 3px;
}

.termbox table {
    position: absolute;
    left: 10px;
    bottom: 10px;
    border: 1px solid #e1e1e1;
    border-collapse: collapse;
    background: #ffffff;
}

.termbox table > thead > tr > th {
    border: 1px solid #e1e1e1;
    padding: 4px;
    text-align: center;
    vertical-align: middle;
    font-size: 11px;
}

.termbox table > tbody > tr > td {
    border: 1px solid #e1e1e1;
    padding: 6px;
    text-align: center;
    vertical-align: bottom;
    width: 68px;
}

/**** parts > fanpagebox ****/
.fanpagebox {
    position: relative;
    border: 1px solid #c7cad3;
    background: #ffffff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    word-break: break-all;
}

.fanpagebox .cover {
    display: block;
    position: relative;
    width: 253px;
    height: 120px;
    background: #f9f9f9;
}

.fanpagebox .cover:hover {
    opacity: 0.75;
}

.fanpagebox .cover img {
    width: 253px;
    height: 120px;
}

.fanpagebox .cover span {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    color: #444444;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.75);
    font-weight: bold;
}

.fanpagebox .cover span > em {
    display: block;
    padding: 6px 0 4px 4px;
}


/**** parts > latestlesson ****/
.latestlesson {
    position: relative;
    height: 165px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #c7cad3;
    background: #ffffff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.latestlesson h2.heading {
    color: #757575;
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
    vertical-align: middle;
}

.latestlesson h2.heading a {
    color: #757575;
}

.latestlesson h2.heading a:hover {
    opacity: 0.75;
}

.latestlesson h2.heading [class^="icon-"] {
    color: #b0b0b0;
    font-size: 16px;
    vertical-align: middle;
    margin-right: 3px;
}

.latestlesson .none {
    padding: 30px 0 0 30px;
    color: #b7b7b7;
    font-weight: bold;
    vertical-align: middle;
}

.latestlesson .none [class^="icon-"] {
    font-size: 30px;
    vertical-align: middle;
    margin-right: 15px;
}

.latestlesson dl {
    position: absolute;
    bottom: 0;
    left: 0;
    display: table;
    width: 100%;
    height: 120px;
}

.latestlesson dl > dt {
    display: table-cell;
    width: 130px;
    text-align: center;
    vertical-align: top;
}

.latestlesson dl > dd {
    display: table-cell;
    padding: 0 8px 0 0;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
}

.latestlesson dl > dt img.thumb {
    width: 110px;
    height: 110px;
    border: 1px solid #c7cad3;
    background-color: #e0e0e0;
}

.latestlesson a.more {
    width: 113px;
    position: absolute;
    bottom: 11px;
    right: 10px;
    padding: 0;
}

/* caution face */
.latestlesson.caution {
    border-color: #d94d38;
    background-color: #d87568;
}

.latestlesson.caution h2.heading {
    color: #ffffff;
}

.latestlesson.caution h2.heading > [class^="icon-"] {
    color: #ffffff;
}

.latestlesson.caution dl > dt img.thumb {
    border-color: #d94d38;
}

.latestlesson.caution dl > dd * {
    color: #ffffff !important;
}

.latestlesson.caution .btn.orange {
    border: 1px solid #f3b7ae;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 1px 0px inset;
    -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 1px 0px inset;
    -moz-box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 1px 0px inset;
}

/**** parts > sidemenu ****/
.sidemenu {
    position: relative;
    text-align: left;
    vertical-align: top;
    border: 1px solid #c7cad3;
    background: #ffffff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.sidemenu > ul {
}

.sidemenu > ul > li {
    border-top: 1px solid #c7cad3;
}

.sidemenu > ul > li:first-child {
    border: none;
}

.sidemenu > ul > li > a {
    display: block;
    padding: 1px 10px 0 10px;
    line-height: 36px;
    vartical-ailgn: middle;
    color: #858da3;
}

.sidemenu > ul > li > a:hover {
    color: #418abb;
}


/**** pars > banners ****/
.banners-right-progress {
    height: 80px;
    position: relative;
}

.banners-right-progress .indicator {
    position: absolute;
    top: 40px;
    left: 50%;
}

.banners-footer-progress {
    height: 85px;
    margin: 0 0 20px 0;
    position: relative;
}

.banners-footer-progress .indicator {
    position: absolute;
    top: 35px;
    left: 50%;
}

/**** pars > simplemenu ****/
ul.simplemenu {
    position: relative;
    top: -3px;
    margin: 0 0 7px 0;
}

ul.simplemenu > li {
    position: relative;
}

ul.simplemenu > li > a {
    display: block;
    padding: 3px;
    position: relative;
    color: #858da3;
    font-size: 12px;
}

ul.simplemenu > li > a > em {
    display: inline-block;
    position: absolute;
    right: 6px;
    font-size: 12px;
    font-weight: bold;
    transform: scale(0.9, 1);
    -moz-transform: scale(0.9, 1);
    -webkit-transform: scale(0.9, 1);
    -ms-transform: scale(0.9, 1);
}

ul.simplemenu > li > a > span {
    display: inline-block;
    position: absolute;
    right: 6px;
    font-size: 12px;
    font-weight: bold;
}

ul.simplemenu > li > a > span > i {
    font-weight: normal;
}

ul.simplemenu > li > a:hover {
    background: #e9e9e9;
}

ul.simplemenu > li.me > a {
    vertical-align: middle;
    color: #333333;
    font-weight: bold;
}

ul.simplemenu > li.me > a > strong {
    display: inline-block;
    margin-right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid #c7cad3;
    background-color: #ffffff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

ul.simplemenu > li.me > a > strong > img {
    margin: 1px;
    width: 30px;
    height: 30px;
    border: 1px solid #c7cad3;
    background-color: #f9f9f9;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

ul.simplemenu > li.divider {
    padding: 0;
    margin: 10px 0 10px 0;
    border-bottom: 1px solid #fcfcfc;
}

ul.simplemenu > li.divider:after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #dddddd;
}


/**** pars > communityface ****/
.communityface {
    width: 720px;
    height: 242px;
    border: 1px solid #c7cad3;
    background-color: #ffffff;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}

.communityface > .description {
    width: 214px;
    height: 240px;
    border-right: 1px solid #c7cad3;
}

.communityface > .description > .head {
    width: 100%;
    height: 38px;
    padding: 8px 8px 0 8px;
    border-bottom: 1px dotted #c7cad3;
}

.communityface > .description > .head dl {
    display: inline-block;
}

.communityface > .description > .head dl > dt {
    font-size: 11px;
    font-weight: bold;
    color: #999999;
    margin-bottom: 1px;
}

.communityface > .description > .head dl > dd {
    font-size: 11px;
}

.communityface > .description > .head dl + dl {
    margin-left: 20px;
}

.communityface > .description > .about {
    width: 100%;
    height: 194px;
    overflow-y: auto;
}

.communityface > .description > .about > .inner {
    padding: 8px;
}

.communityface > .description > .about dl > dt {
    font-size: 11px;
    font-weight: bold;
    color: #999999;
    margin-bottom: 2px;
}

.communityface > .description > .about dl > dd {
    font-size: 11px;
}

.communityface > .cover {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 503px;
    height: 240px;
    background: #f9f9f9;
}

.communityface > .cover img {
    width: 503px;
    height: 240px;
}

.communityface > .edit {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: none;
}

.communityface:hover > .edit {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-block;
}

/**** pars > myaccountbox ****/
.myaccountbox {
    border: 1px solid #c7cad3;
    background-color: #ffffff;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}

.myaccountbox > .account {
}

.myaccountbox > .account > dl {
    display: table;
    width: 100%;
}

.myaccountbox > .account > dl > dt {
    display: table-cell;
    width: 110px;
    text-align: left;
}

.myaccountbox > .account > dl > dt img {
    width: 110px;
    height: 110px;
}

.myaccountbox > .account > dl > dt img:hover {
    opacity: 0.75;
}

.myaccountbox > .account > dl > dd {
    display: table-cell;
    vertical-align: top;
    border-left: 1px solid #c7cad3;
    padding: 8px 0 8px 8px;
    position: relative;
}

.myaccountbox > .account > dl > dd > strong > a {
    font-size: 13px;
    font-weight: bold;
    color: #333333;
}

.myaccountbox > .account > dl > dd > strong > a:hover {
    color: #1da0d0;
}

.myaccountbox > .account > dl > dd > .settings {
    position: absolute;
    bottom: 4px;
    right: 8px;
}

.myaccountbox > .account > dl > dd > ul {
    margin: 5px 0 0 0;
}

.myaccountbox > .account > dl > dd > ul > li {
    margin: -2px 0 0 0;
    padding: 0;
    color: #858da3;
    vertical-align: bottom;
}

.myaccountbox > .account > dl > dd > ul > li > a {
    font-size: 10px;
    color: #858da3;
}

.myaccountbox > .account > dl > dd > ul > li > a:hover {
    color: #1da0d0;
}

.myaccountbox > .account > dl > dd > ul > li > a > em {
    padding-left: 4px;
    font-size: 11px;
    font-weight: bold;
    transform: scale(0.9, 1);
    -moz-transform: scale(0.9, 1);
    -webkit-transform: scale(0.9, 1);
    -ms-transform: scale(0.9, 1);
}

/**** pars > notificationlist ****/
.notificationlist {
}

.notificationlist > ul > li {
    display: block;
    border: 1px solid #c7cad3;
    background-color: #ffffff;
    padding: 8px 20px 4px 8px;
    cursor: pointer;
    position: relative;
}

.notificationlist > ul > li + li {
    border-top: none;
}

.notificationlist > ul > li:hover {
    background-color: #fdfdfd;
}

.notificationlist > ul > li.unread {
    border-left: 2px solid #418abb;
}

.notificationlist > ul > li:after {
    display: inline-block;
    content: "\e8cb";
    font-size: 11px;
    font-family: "icon";
    color: #cccccc;
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -8px;
}

.notificationlist > ul > li > dl {
    display: table;
}

.notificationlist > ul > li > dl > dt {
    display: table-cell;
    text-align: left;
    vertical-align: top;
    width: 58px;
}

.notificationlist > ul > li > dl > dt img.thumb {
    width: 50px;
    height: 50px;
}

.notificationlist > ul > li > dl > dd {
    display: table-cell;
    text-align: left;
    vertical-align: top;
}

.notificationlist > ul > li > dl > dd > div {
    color: #666666;
}

.notificationlist > ul > li > dl > dd > div > a {
    color: #333333;
    font-weight: bold;
}

.notificationlist > ul > li > dl > dd > em {
    display: block;
    font-size: 11px;
    margin-top: 3px;
    color: #999999;
}

.notificationlist > ul > li > dl > dd > p {
    display: block;
    font-size: 11px;
    margin-top: 3px;
}

.notificationlist > .progress {
    height: 40px;
    position: relative;
}

.notificationlist > .progress .indicator {
    position: absolute;
    top: 20px;
    left: 50%;
}


/**** emoji ****/
img[class^="emoji-"], img[class*=" emoji-"] {
    margin: -3px 2px 0 2px;
    width: 25px;
    height: 25px;
    background: transparent url("../images/emoji/emoji.png") center center no-repeat;
    background-size: 125px 200px;
    vertical-align: middle;
}

img.emoji-smile {
    background-position: 0 0;
}

img.emoji-happy {
    background-position: -25px 0;
}

img.emoji-sad {
    background-position: -50px 0;
}

img.emoji-suprised {
    background-position: -75px 0;
}

img.emoji-cry {
    background-position: -100px 0;
}

img.emoji-why {
    background-position: 0 -25px;
}

img.emoji-why2 {
    background-position: -25px -25px;
}

img.emoji-joke {
    background-position: -50px -25px;
}

img.emoji-joke2 {
    background-position: -75px -25px;
}

img.emoji-fever {
    background-position: -100px -25px;
}

img.emoji-sick {
    background-position: 0 -50px;
}

img.emoji-sleepy {
    background-position: -25px -50px;
}

img.emoji-heart {
    background-position: -50px -50px;
}

img.emoji-hearts {
    background-position: -75px -50px;
}

img.emoji-angry {
    background-position: -100px -50px;
}

img.emoji-water {
    background-position: 0 -75px;
}

img.emoji-zzzz {
    background-position: -25px -75px;
}

img.emoji-explosion {
    background-position: -50px -75px;
}

img.emoji-like {
    background-position: -75px -75px;
}

img.emoji-dislike {
    background-position: -100px -75px;
}

img.emoji-aloha {
    background-position: 0 -100px;
}

img.emoji-aloha2 {
    background-position: -25px -100px;
}

img.emoji-qqe {
    background-position: -50px -100px;
}

img.emoji-d-smile {
    background-position: -75px -100px;
}

img.emoji-d-laugh {
    background-position: -100px -100px;
}

img.emoji-d-angry {
    background-position: 0 -125px;
}

img.emoji-d-serious {
    background-position: -25px -125px;
}

img.emoji-d-sad {
    background-position: -50px -125px;
}

img.emoji-r-smile {
    background-position: -75px -125px;
}

img.emoji-r-laugh {
    background-position: -100px -125px;
}

img.emoji-r-angry {
    background-position: 0 -150px;
}

img.emoji-r-joke {
    background-position: -25px -150px;
}

img.emoji-r-surprised {
    background-position: -50px -150px;
}

img.emoji-r-why {
    background-position: -75px -150px;
}

img.emoji-r-shout {
    background-position: -100px -150px;
}

img.emoji-r-tamori {
    background-position: 0 -175px;
}

img.emoji-r-beard {
    background-position: -25px -175px;
}

img.emoji-quick {
    background-position: -50px -175px;
}

.emoji-editor {
    font-family: inherit;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    vertical-align: middle;
    color: #000000;
    background: #ffffff;
    border: 1px solid #c7cad3;
    outline: none;
    height: 32px;
    padding: 7px 8px 4px 8px;
    overflow-y: auto;
    word-break: break-all;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.emoji-placeholder {
    display: inline;
    position: absolute;
    top: 7px;
    left: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    color: #cccccc;
    background: transparent;
}

.emoji-palette {
    border-top: 1px solid #c7cad3;
    border-left: 1px solid #c7cad3;
    background: #f6f6f6;
    z-index: 100;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
}

.emoji-palette > ul {
    width: 130px;
}

.emoji-palette > ul > li {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-right: 1px solid #c7cad3;
    border-bottom: 1px solid #c7cad3;
    background: #ffffff;
}

.emoji-palette > ul > li:hover {
    opacity: 0.75;
}

.emoji-palette > ul > li > img {
    margin: 0;
    width: 25px;
    height: 25px;
    cursor: pointer;
}


/**** pars > timeline ****/
.timeline {
}

.timeline .progress {
    width: 100%;
    height: 40px;
    background: transparent;
    position: relative;
    margin-bottom: 20px;
}

.timeline .progress .indicator {
    position: absolute;
    top: 20px;
    left: 50%;
}

.timeline .feed {
    margin: 0 0 15px 0;
    border: 1px solid #c7cad3;
    background-color: #ffffff;
    font-size: 12px;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    word-break: break-all;
}

.timeline .feed > dl.title {
    display: table;
    width: 100%;
    margin: 0 0 7px 0;
}

.timeline .feed > dl.title > dt {
    display: table-cell;
    width: 30px;
    height: 30px;
    padding: 8px 5px 0 8px;
    text-align: left;
    vertical-align: top;
}

.timeline .feed > dl.title > dt img.thumb {
    width: 30px;
    height: 30px;
}

.timeline .feed > dl.title > dd {
    display: table-cell;
    padding: 8px 8px 0 0;
    text-align: left;
    vertical-align: top;
    color: #858da3;
    position: relative;
}

.timeline .feed > dl.title.with-menu > dd {
    padding-right: 20px;
}

.timeline .feed > dl.title > dd a.menu {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #bbbbbb;
    font-size: 14px;
}

.timeline .feed > dl.title > dd a.menu:hover {
    color: #444444;
}

.timeline .feed > div.title {
    padding: 8px 8px 6px 8px;
    color: #858da3;
}

.timeline .feed > .title.border-bottom {
    border-bottom: 1px solid #e1e1e1;
}

.timeline.wide .feed > dl.title > dd {
    vertical-align: middle;
}

.timeline .feed > dl.profile {
    display: table;
    width: 100%;
    border-top: 1px solid #e1e1e1;
    cursor: pointer;
}

.timeline .feed > dl.profile > dt {
    display: table-cell;
    width: 72px;
    height: 72px;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.timeline .feed > dl.profile > dt img.thumb {
    width: 72px;
    height: 72px;
}

.timeline .feed > dl.profile > dd {
    display: table-cell;
    padding: 8px 8px 8px 0;
    text-align: left;
    vertical-align: top;
}

.timeline .feed > dl.profile:hover {
    background: #fcfcfc;
}

.timeline .feed > dl.community {
    display: block;
    width: 100%;
    border-top: 1px solid #e1e1e1;
    cursor: pointer;
}

.timeline .feed > dl.community > dt {
    display: block;
    border-bottom: 1px solid #e1e1e1;
}

.timeline .feed > dl.community > dt img {
    width: 100%;
}

.timeline .feed > dl.community > dd {
    display: block;
    padding: 8px;
}

.timeline .feed > dl.community:hover {
    background: #fcfcfc;
}

.timeline .feed > .review {
    padding: 8px 8px 5px 8px;
    border-top: 1px solid #e1e1e1;
}

.timeline .feed > .review:hover {
    background: #fcfcfc;
}

.timeline .feed > .review > dl.student {
    display: table;
    width: 100%;
}

.timeline .feed > .review > dl.student > dt {
    display: table-cell;
    width: 37px;
    height: 37px;
    text-align: left;
    vertical-align: top;
}

.timeline .feed > .review > dl.student > dt img.thumb {
    width: 30px;
    height: 30px;
}

.timeline .feed > .review > dl.student > dd {
    display: table-cell;
    text-align: left;
    vertical-align: top;
    position: relative;
}

.timeline .feed > .review.with-menu > dl.student > dd {
    padding-right: 20px;
}

.timeline .feed > .review > dl.student > dd a.menu {
    position: absolute;
    top: 0;
    right: 5px;
    color: #bbbbbb;
    font-size: 14px;
}

.timeline .feed > .review > dl.student > dd a.menu:hover {
    color: #444444;
}

.timeline .feed > .review > div {
    padding: 0 0 3px 0;
}

.timeline .feed > .review > span {
    display: block;
    margin: 2px 0 0 0;
    font-size: 10px;
    line-height: 14px;
    color: #bbbbbb;
}

.timeline .feed > .review > ul.btns {
    margin: 2px 0 0 0;
}

.timeline .feed > .review > ul.btns > li {
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    line-height: 14px;
    color: #bbbbbb;
    margin-right: 4px;
}

.timeline .feed > .review > ul.btns > li a {
    color: #bbbbbb;
}

.timeline .feed > .review > ul.btns > li a:hover {
    color: #1da0d0;
}

.timeline .feed > .review > ul.btns > li i {
    font-size: 12px;
}

.timeline .feed > .review > ul.btns > li.likes {
    float: right;
    position: relative;
    top: 3px;
}

.timeline .feed > .review > ul.btns > li.like a.liked:before {
    content: "\e86b";
    font-family: "icon";
    display: inline-block;
    padding-right: 1px;
    position: relative;
    top: 1px;
}

.timeline .feed > .entry {
    border-top: 1px solid #e1e1e1;
}

.timeline .feed > .entry > .content {
    padding: 8px;
    word-break: break-all;
    position: relative;
}

.timeline .feed > .entry > ul.images {
    padding: 0 8px 8px 8px;
}

.timeline .feed > .entry > ul.images > li {
    display: block;
    width: 100%;
    min-height: 40px;
    background: #fcfcfc;
    position: relative;
}

.timeline .feed > .entry > ul.images > li img {
    width: 100%;
}

.timeline .feed > .entry > ul.images > li + li {
    margin-top: 3px;
}

.timeline .feed > .entry > .content.required_approval {
}

.timeline .feed > .entry > .content.rejected {
    opacity: 0.4;
}

.timeline .feed > .entry > ul.images.required_approval {
}

.timeline .feed > .entry > ul.images.rejected {
    opacity: 0.4;
}

.timeline .feed > .entry.form {
}

.timeline .feed > .entry.form .emoji-editor {
    width: 100%;
    height: 180px;
    padding: 3px 0 0 0;
    border: none;
    font-size: 12px;
}

.timeline .feed > .entry.form .emoji-placeholder {
    font-size: 12px;
}

.timeline .feed > .entry.form .emoji-palette {
    position: absolute;
    top: 60%;
    left: -40px;
}

.timeline .feed > .entry.form > ul.images > li .close {
    display: none;
    cursor: pointer;
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 10;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #565656;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
}

.timeline .feed > .entry.form > ul.images > li .close:before {
    content: "\e6fd";
    font-family: "icon";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}

.timeline .feed > .entry.form > ul.images > li .close:hover {
    background: #777777;
}

.timeline .feed > .entry.form > ul.images > li:hover .close {
    display: inline-block;
}

.timeline .feed > .entry.form > ul.btns {
    display: table;
    width: 100%;
    border-top: 1px solid #c7cad3;
    background: #f6f6f6;
    position: relative;
}

.timeline .feed > .entry.form > ul.btns > li {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    height: 34px;
    border-top: 1px solid #ffffff;
    text-align: center;
    vertical-align: middle;
    padding: 0 0 0 12px;
}

.timeline .feed > .entry.form > ul.btns > li > a {
    font-size: 14px;
    color: #858da3;
    opacity: 0.75;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}

.timeline .feed > .entry.form > ul.btns > li > a:hover {
    color: #1da0d0;
    opacity: 1.0;
}

.timeline .feed > .entry.form > ul.btns > li.submit {
    width: auto;
    text-align: right;
    padding: 0 6px 0 0;
}

.timeline .feed > .entry.form .progress {
    width: 100%;
    height: 40px;
    position: relative;
}

.timeline .feed > .entry.form .progress .indicator {
    position: absolute;
    top: 20px;
    left: 50%;
}

.timeline .feed > .comments {
    background: #fcfcfc;
    padding: 0 8px 0 8px;
    margin: 4px 0 0 0;
    position: relative;
}

.timeline .feed > .comments:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #e1e1e1;
}

.timeline .feed > .comments > .expand-comments {
    padding: 8px 0 8px 0;
    font-size: 11px;
    text-align: right;
}

.timeline .feed > .comments > .expand-replies {
    margin-left: 24px;
    border-top: 1px solid #e1e1e1;
    padding: 8px 0 8px 0;
    font-size: 11px;
    font-size: 11px;
    color: #418abb;
    vertical-align: middle;
    cursor: pointer;
}

.timeline .feed > .comments > .expand-replies:hover {
    color: #1da0d0;
}

.timeline .feed > .comments > .expand-replies img.thumb {
    width: 20px;
    height: 20px;
}

.timeline .feed > .comments dl.author {
    display: table;
    width: 100%;
}

.timeline .feed > .comments dl.author > dt {
    display: table-cell;
    width: 20px;
    height: 20px;
    padding: 0 5px 0 0;
    text-align: left;
    vertical-align: middle;
}

.timeline .feed > .comments dl.author > dt img.thumb {
    width: 20px;
    height: 20px;
}

.timeline .feed > .comments dl.author > dd {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    color: #858da3;
    position: relative;
}

.timeline .feed > .comments dl.author.with-menu > dd {
    padding-right: 20px;
}

.timeline .feed > .comments dl.author > dd a.menu {
    position: absolute;
    top: -4px;
    right: 5px;
    color: #bbbbbb;
    font-size: 14px;
}

.timeline .feed > .comments dl.author > dd a.menu:hover {
    color: #444444;
}

.timeline .feed > .comments .comment {
    border-top: 1px solid #e1e1e1;
    padding: 8px 0px 4px 0px;
    position: relative;
}

.timeline .feed > .comments .comment > .content {
    margin: 5px 0 6px 0;
    word-break: break-all;
}

.timeline .feed > .comments .comment > .content.required_approval {
}

.timeline .feed > .comments .comment > .content.rejected {
    opacity: 0.4;
}

.timeline .feed > .comments .comment > ul.btns {
}

.timeline .feed > .comments .comment > ul.btns > li {
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    line-height: 14px;
    color: #bbbbbb;
    margin-right: 4px;
}

.timeline .feed > .comments .comment > ul.btns > li a {
    color: #bbbbbb;
}

.timeline .feed > .comments .comment > ul.btns > li a:hover {
    color: #1da0d0;
}

.timeline .feed > .comments .comment > ul.btns > li i {
    font-size: 12px;
}

.timeline .feed > .comments .comment > ul.btns > li.likes {
    float: right;
    position: relative;
    top: 3px;
}

.timeline .feed > .comments .comment > ul.btns > li.like a.liked:before {
    content: "\e86b";
    font-family: "icon";
    display: inline-block;
    padding-right: 1px;
    position: relative;
    top: 1px;
}

.timeline .feed > .comments .comment.no-border {
    border: none;
}

.timeline .feed > .comments .comment.reply {
    margin-left: 24px;
}

.timeline .feed > .comments .comment.form {
    padding-bottom: 6px;
}

.timeline .feed > .comments .comment.form .emoji-editor {
    width: 100%;
    height: 60px;
    margin: 8px 0 6px 0;
    border: 1px solid #e1e1e1;
    font-size: 12px;
}

.timeline .feed > .comments .comment.form .emoji-placeholder {
    font-size: 12px;
}

.timeline .feed > .comments .comment.form .emoji-palette {
    position: absolute;
    top: 60%;
    left: -40px;
}

.timeline .feed > .comments .comment.form .btns {
    text-align: right;
    position: relative;
}

.timeline .feed > .comments .comment.form .btns a {
    min-width: 80px;
}

.timeline .feed > .comments .comment.form .btns a.emoji {
    min-width: 0;
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 14px;
    color: #858da3;
    opacity: 0.75;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}

.timeline .feed > .comments .comment.form .btns a.emoji:hover {
    color: #1da0d0;
    opacity: 1.0;
}

.timeline .feed > ul.btns {
    display: table;
    width: 100%;
    border-top: 1px solid #c7cad3;
    background: #f6f6f6;
    position: relative;
}

.timeline .feed > ul.btns > li {
    display: table-cell;
    border-top: 1px solid #ffffff;
    border-right: 1px solid #c7cad3;
    vertical-align: middle;
}

.timeline .feed > ul.btns > li span,
.timeline .feed > ul.btns > li > a {
    display: inline-block;
    font-size: 10px;
    line-height: 24px;
    vertical-align: middle;
    color: #858da3;
    margin-left: 8px;
}

.timeline .feed > ul.btns > li > a:hover {
    color: #1da0d0;
}

.timeline .feed > ul.btns > li > a em {
    padding-right: 1px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    transform: scale(0.9, 1);
    -moz-transform: scale(0.9, 1);
    -webkit-transform: scale(0.9, 1);
    -ms-transform: scale(0.9, 1);
}

.timeline .feed > ul.btns > li.like,
.timeline .feed > ul.btns > li.comment {
    width: 24px;
    height: 24px;
    text-align: center;
    cursor: pointer;
}

.timeline .feed > ul.btns > li.like > a,
.timeline .feed > ul.btns > li.comment > a {
    display: inline;
    margin: 0;
    font-size: 14px;
    color: #858da3;
    opacity: 0.75;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}

.timeline .feed > ul.btns > li.like > a {
    position: relative;
    top: -1px;
}

.timeline .feed > ul.btns > li.like:hover > a,
.timeline .feed > ul.btns > li.comment:hover > a {
    color: #1da0d0;
    opacity: 1.0;
}

.timeline .feed > ul.btns > li.like,
.timeline .feed > ul.btns > li.comment {
    border-left: 1px solid #ffffff;
    border-right: 1px solid #c7cad3;
}

.timeline .feed > ul.btns > li.timestamp {
    padding-top: 1px;
}

.timeline .feed > ul.btns > li.like > a.liked {
    color: #1da0d0;
    opacity: 1.0;
}

.timeline .feed > ul.btns > li:last-child {
    border-right: none;
}

/* popups */
.timeline .feed .click-helper a {
    display: block;
    padding: 6px 10px 6px 10px;
    white-space: nowrap;
    font-size: 11px;
    color: #858da3;
}

.timeline .feed .click-helper a:hover {
    color: #1da0d0;
}

.timeline .feed ul.edit-menu > li {
    border-top: 1px solid #e1e1e1;
    padding: 6px 10px 6px 10px;
    font-size: 11px;
    white-space: nowrap;
}

.timeline .feed ul.edit-menu > li:first-child {
    border: none;
}

.timeline .feed ul.edit-menu > li a {
    color: #858da3;
}

.timeline .feed ul.edit-menu > li a:hover {
    color: #1da0d0;
}

.timeline .feed ul.edit-menu > li.required_approval {
    color: #d94d38;
}

.timeline .feed ul.edit-menu > li.required_approval a {
    color: #d94d38;
}

.timeline .feed ul.edit-menu > li.required_approval a:hover {
    opacity: 0.75;
}

.timeline .feed ul.edit-menu > li.rejected {
    color: #ee0000;
}

.timeline .feed ul.edit-menu > li.rejected a {
    color: #ee0000;
}

.timeline .feed ul.edit-menu > li.rejected a:hover {
    opacity: 0.75;
}

.timeline .feed ul.edit-menu > li.rejected span {
    display: block;
    font-size: 10x;
    color: #999999;
    padding-top: 2px;
}

.timeline .feed ul.popup-likes-summary {
    padding: 6px 8px 2px 8px;
    min-width: 100px;
}

.timeline .feed ul.popup-likes-summary > li {
    white-space: nowrap;
    font-size: 11px;
    color: #858da3;
    padding: 0 0 3px 0;
}

.timeline .feed ul.popup-likes-summary > li a {
    color: #858da3 !important;
}

.timeline .feed ul.popup-likes-summary > li a:hover {
    color: #1da0d0 !important;
}

/* stream */
.timeline ul.stream {
    display: table;
}

.timeline ul.stream > li {
    display: table-cell;
    width: 238px;
    padding: 0 15px 0 0;
    text-align: left;
    vertical-align: top;
}

.timeline ul.stream > li.tail {
    padding: 0;
}

.timeline ul.stream > li .feed {
    width: 238px;
    margin-bottom: 25px;
}


/**** pars > post-entry-form ****/
.post-entry-form {
    margin: 0 0 15px 0;
    border: 1px solid #c7cad3;
    background-color: #ffffff;
    font-size: 12px;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}

.post-entry-form > dl.title {
    display: table;
    width: 100%;
    margin: 0 0 7px 0;
    border-bottom: 1px solid #e1e1e1;
}

.post-entry-form > dl.title > dt {
    display: table-cell;
    width: 30px;
    height: 30px;
    padding: 8px 5px 8px 8px;
    text-align: left;
    vertical-align: middle;
}

.post-entry-form > dl.title > dt img.thumb {
    width: 30px;
    height: 30px;
}

.post-entry-form > dl.title > dd {
    display: table-cell;
    padding: 8px 8px 8px 0;
    text-align: left;
    vertical-align: middle;
    color: #858da3;
    position: relative;
}

.post-entry-form .emoji-editor {
    width: 100%;
    height: 60px;
    border: none;
    font-size: 12px;
}

.post-entry-form .emoji-placeholder {
    font-size: 12px;
}

.post-entry-form .emoji-palette {
    position: absolute;
    top: 60%;
    left: -40px;
}

.post-entry-form > ul.images {
    padding: 0 8px 8px 8px;
}

.post-entry-form > ul.images > li {
    display: block;
    width: 100%;
    min-height: 40px;
    background: #fcfcfc;
    position: relative;
}

.post-entry-form > ul.images > li + li {
    margin-top: 3px;
}

.post-entry-form > ul.images > li img {
    width: 100%;
}

.post-entry-form > ul.images > li .close {
    display: none;
    cursor: pointer;
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 10;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #565656;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
}

.post-entry-form > ul.images > li .close:before {
    content: "\e6fd";
    font-family: "icon";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}

.post-entry-form > ul.images > li .close:hover {
    background: #777777;
}

.post-entry-form > ul.images > li:hover .close {
    display: inline-block;
}

.post-entry-form > ul.btns {
    display: table;
    width: 100%;
    border-top: 1px solid #c7cad3;
    background: #f6f6f6;
    position: relative;
}

.post-entry-form > ul.btns > li {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    height: 34px;
    border-top: 1px solid #ffffff;
    text-align: center;
    vertical-align: middle;
    padding: 0 0 0 12px;
}

.post-entry-form > ul.btns > li > a {
    font-size: 14px;
    color: #858da3;
    opacity: 0.75;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}

.post-entry-form > ul.btns > li > a:hover {
    color: #1da0d0;
    opacity: 1.0;
}

.post-entry-form > ul.btns > li.submit {
    width: auto;
    text-align: right;
    padding: 0 6px 0 0;
}

.post-entry-form .progress {
    width: 100%;
    height: 40px;
    position: relative;
}

.post-entry-form .progress .indicator {
    position: absolute;
    top: 20px;
    left: 50%;
}

.post-entry-form .click-helper a {
    display: block;
    padding: 6px 10px 6px 10px;
    white-space: nowrap;
    font-size: 11px;
    color: #858da3;
}

.post-entry-form .click-helper a:hover {
    color: #1da0d0;
}

.post-entry-form-arrow {
    margin: -5px 0 10px 0;
    text-align: center;
    font-size: 14px;
    color: #858da3;
    opacity: 0.75;
}


/**** popup ****/
.popup {
    position: absolute;
    z-index: 2000;
    background: #ffffff;
    border: 1px solid #c7cad3;
    box-shadow: rgba(0, 0, 0, 0.25) 0 0 5px 0;
}

.popup .shadow {
    box-shadow: rgba(0, 0, 0, 0.25) 0 0 5px 0;
}

.popup .close {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #565656;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
}

.popup .close:before {
    content: "\e6fd";
    font-family: "icon";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}

.popup .close:hover {
    background: #777777;
}

.popup > .progress {
    width: 40px;
    height: 40px;
}

.popup > .progress .indicator {
    position: absolute;
    top: 50%;
    left: 50%;
}

.popup > .popup-help {
    padding: 0 8px 0 8px;
    line-height: 24px;
    font-size: 11px;
    color: #858da3;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
}

.popup > .popup-tooltip {
    padding: 0 16px 0 16px;
    line-height: 32px;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
}

.popup > .popup-image {
    padding: 2px;
}


/**** dialog ****/
.page-dialog-preview {
    background-color: #555555;
    padding: 40px;
}

.page-dialog-preview > .dialog {
    margin: 0 auto 0 auto;
}

.dialog {
    position: relative;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
}

.dialog > .close {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 10;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #565656;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
}

.dialog > .close:before {
    content: "\e6fd";
    font-family: "icon";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}

.dialog > .close:hover {
    background: #777777;
}

.dialog > .header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-bottom: 1px solid #e1e1e1;
    background: #ffffff;
    width: 100%;
    height: 55px;
    line-height: 55px;
    color: #333333;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px 5px 0 0;
}

.dialog > .header:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 27px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 2%, #f2f2f2 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #f2f2f2), color-stop(99%, #f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 2%, #f2f2f2 99%);
    background: -o-linear-gradient(top, #ffffff 2%, #f2f2f2 99%);
    background: -ms-linear-gradient(top, #ffffff 2%, #f2f2f2 99%);
    background: linear-gradient(to bottom, #ffffff 2%, #f2f2f2 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);
}

.dialog > .header > strong {
    position: relative;
    z-index: 1;
    font-weight: bold;
    font-size: 16px;
}

.dialog > .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    border-top: 1px solid #e1e1e1;
    background-color: #f9f9f9;
    width: 100%;
    height: 55px;
    line-height: 55px;
    color: #333333;
    text-align: center;
    vertical-align: middle;
    border-radius: 0 0 5px 5px;
}

.dialog > .content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 55px 0 55px 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.dialog > .content > .inner {
    padding: 20px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.dialog > .inbox-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
}

.dialog > .inbox-error > .inner {
    display: inline-block;
    width: 320px;
    background: #ffffff;
    color: #d94d38;
    padding: 20px 30px 20px 30px;
    border: 1px solid #d94d38;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.dialog > .inbox-error > .inner > strong {
    display: block;
    font-weight: bold;
}

.dialog > .inbox-error > .inner > div {
    font-size: 11px;
    margin-top: 4px;
}

.dialog > .inbox-error > .inner > .close {
    cursor: pointer;
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #d94d38;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
}

.dialog > .inbox-error > .inner > .close:before {
    content: "\e6fd";
    font-family: "icon";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}

/* black face */
.dialog.black {
    background-color: #f2f2f2;
}

.dialog.black > .header {
    color: #ffffff;
    background: #6e6e6e;
}

.dialog.black > .header:after {
    height: 36px;
    background: #6e6e6e;
    background: -moz-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6e6e6e), color-stop(100%, #3d3d3d));
    background: -webkit-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: -o-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: -ms-linear-gradient(top, #6e6e6e 0%, #3d3d3d 100%);
    background: linear-gradient(to bottom, #6e6e6e 0%, #3d3d3d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6e6e6e', endColorstr='#3d3d3d', GradientType=0);
}

/* for confirm dialog */
.dialog.confirm > .header {
    height: 30px;
    line-height: 30px;
}

.dialog.confirm > .header:after {
    height: 15px;
}

.dialog.confirm > .content {
    padding-top: 40px;
}


/* common parts */
.dialog ul.help {
}

.dialog ul.help > li {
    margin: 0 0 8px 0;
    font-size: 11px;
}


/**** inline-dialog ****/
.inline-dialog-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.inline-dialog {
    position: relative;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
    display: inline-block;
}

.inline-dialog > .inner {
    position: relative;
    padding: 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.inline-dialog > .inner.with-alert-icon {
    padding-left: 28px;
}

.inline-dialog > .inner.with-alert-icon:after {
    content: "\e7d3";
    font-family: "icon";
    display: inline-block;
    position: absolute;
    top: 19px;
    left: 10px;
    color: #aaaaaa;
    font-weight: normal;
}

.inline-dialog > .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    border-top: 1px solid #e1e1e1;
    background: #f9f9f9 url("../images/common/bg.dotted.png") top left repeat;
    width: 100%;
    height: 55px;
    line-height: 55px;
    color: #333333;
    text-align: center;
    vertical-align: middle;
    border-radius: 0 0 5px 5px;
}

.inline-dialog > .close {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #565656;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 2px 2px rgba(0, 0, 0, 0.2);
}

.inline-dialog > .close:before {
    content: "\e6fd";
    font-family: "icon";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}

.inline-dialog > .close:hover {
    background: #777777;
}


/**** jScrollPane ****/
.jspContainer {
    overflow: hidden;
    position: relative;
}

.jspPane {
    position: absolute;
}

.jspVerticalBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    background: red;
}

.jspHorizontalBar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: red;
}

.jspCap {
    display: none;
}

.jspHorizontalBar .jspCap {
    float: left;
}

.jspTrack {
    background: #f7f7f7;
    position: relative;
}

.jspDrag {
    background: #555555;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
}

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}

.jspArrow {
    background: #50506d;
    text-indent: -20000px;
    display: block;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.jspArrow.jspDisabled {
    cursor: default;
    background: #80808d;
}

.jspVerticalBar .jspArrow {
    height: 12px;
}

.jspHorizontalBar .jspArrow {
    width: 12px;
    float: left;
    height: 100%;
}

.jspVerticalBar .jspArrow:focus {
    outline: none;
}

.jspCorner {
    background: #eeeef4;
    float: left;
    height: 100%;
}

* html .jspCorner {
    margin: 0 -3px 0 0;
}

.jspDrag > .jspDragTop:before {
    content: "\e8c3";
    font-family: "icon";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #eeeeee;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}

.jspDrag > .jspDragBottom:before {
    content: "\e8c2";
    font-family: "icon";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #eeeeee;
    font-size: 10px;
    font-weight: normal;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}

.jspDragForIE, .jspPaneForIE {
    transition: top 0.3s ease-out;
}


/**** .page-mypage-top ****/
.page-mypage-top {
}

/* .balloon-intro */
.page-mypage-top .balloon-intro {
    width: 100%;
    height: 55px;
    position: relative;
}

.page-mypage-top .balloon-intro span {
    color: #424652;
    font-size: 16px;
    line-height: 55px;
    vertical-align: middle;
    padding: 0 0 0 20px;
}

.page-mypage-top .balloon-intro span strong {
    font-size: 18px;
    font-weight: bold;
    vertical-align: top;
}

.page-mypage-top .balloon-intro a.btn {
    position: absolute;
    top: 11px;
    right: 10px;
}


/*2019-11-28*/
.box.with-tabs.with-tabs-2 > ul.tabs > li.fullname {
    width: 720px;
    left: 0;
    z-index: 1;
}

.box.with-tabs > ul.tabs > li > span {
    display: block;
    height: 44px;
    border: 1px solid #c7cad3;
    white-space: nowrap;
    overflow: hidden;
    color: #404040;;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);
}

.box-inner > h2.bluegray_content {
    font-size: 14px;
}

.box-inner .titleLeft {
    display: table-cell;
    width: 82%;
    font-size: 14px;
}

.box-inner .creatTime {
    display: table-cell;
    width: 18%;
}

.box-inner .titleStyle {
    display: table;
    width: 100%;
    box-sizing: border-box;
}

.resultes_noborder {
    border-top-color: white;
}

h1.heading-addtime {
    display: table;

}

h1.heading-addtime > span.titleleft {
    display: table-cell;
    width: 62%;
}

h1.heading-addtime > span.creatTime {
    display: table-cell;
}

header ul.nav > li.studyTour {
    border-left: 1px solid #5d5d5d;
}

header ul.nav > li.mylesson2 {
    border-left: none;
}

.dcss ol, .dcss ol li {
    list-style-type: decimal;
    margin: auto;
}

.dcss ol, .dcss ul {
    padding: 5px 20px;
}

.dcss ul, .dcss ul li {
    list-style-type: disc;
    margin: auto;
}

.dcss i, .dcss cite, .dcss em, .dcss var, .dcss address {
    font-style: italic
}

.dcss strong {
    font-weight: bold;
}

/*Test introduction*/
.examDescription {
    width: 100%;
    position: relative;
    margin-bottom: -90px;
}

.examContainerBg {
    background: url("../images/common/examDescriptionBg.jpg") no-repeat center;
    background-size: cover;
    height: 550px;
}

.examText {
    position: absolute;
    top: 20%;
    z-index: 2;
    width: 60%;
    text-align: center;
    font-size: 30px;
    color: white;
    letter-spacing: 8px;
}

.examTitle {
    background: url(../images/common/blackbg50.png);
    margin: 0 auto;
    height: 150px;
    padding: 30px 10px 10px 10px;
    line-height: 30px;
    box-sizing: border-box;
}

.btnblueExam {
    padding: 0;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #1daee0;
    margin: 10px;
    width: 200px;
    height: 55px;
}

.btnblueExam a {
    display: block;
    text-align: center;
    color: #fff;
    text-decoration: none;
    line-height: 55px;
    letter-spacing: 8px;
}

.noticeText {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 40%;
    background: url(../images/common/blackbg50.png);
    margin: 0 auto;
    height: 100%;
    padding: 30px;
    text-align: center;
    font-size: 30px;
    color: white;
    letter-spacing: 3px;
    box-sizing: border-box;
}

.noticeTitle {
    padding: 10px;
}

.noticeContent {
    font-size: 18px;
    text-align: left;
    line-height: 40px;
}

.noticeContent li {
    line-height: 35px;
    border-bottom: 1px dashed #fff;
    margin: 2px 0;
    padding: 5px 0;
    box-sizing: border-box;
}

.noticeContent li:last-child {
    border-bottom: none;
}

.examTextAfter {
    position: absolute;
    top: 20%;
    z-index: 2;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: white;
    letter-spacing: 8px;
}

.examTitleAfter {
    background: url(../images/common/blackbg50.png);
    margin: 0 auto;
    height: 150px;
    padding: 30px 10px 10px 10px;
    line-height: 88px;
    box-sizing: border-box;
}

.exceedThreeText {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 40%;
    background: url(../images/common/blackbg50.png);
    margin: 0 auto;
    height: 100%;
    padding: 30px;
    text-align: center;
    font-size: 30px;
    color: white;
    letter-spacing: 2px;
    box-sizing: border-box;
}

.exceedThreeContent {
    text-align: left;
    font-size: 24px;
}

.exceedThreeContent li {
    line-height: 35px;
    border-bottom: 1px dashed #fff;
    margin-bottom: 10px;
}

.exceedThreeContent li p {
    font-size: 18px;
    letter-spacing: 3px;
}

.exceedThreeTitle {
    padding: 10px;
}

.btnblueExamexceedThree {
    width: 200px;
}

.exceedThreeTimes {
    top: 25%;
    letter-spacing: 7px;
}

.exceedThree {
    height: 160px;
    line-height: 35px;
}

/*listingPage*/
.listeningPage .box.with-tabs.with-tabs-3 > ul.tabs > li.progressBarBox {
    width: 720px;
    left: 0;
    z-index: 1;
}

.listeningPage .box.with-tabs > ul.tabs > li > .progressBarContainer {
    display: block;
    height: 44px;
    border: 1px solid #c7cad3;
    white-space: nowrap;
    overflow: hidden;
    color: #a4a4a4;
    font-size: 16px;
    line-height: 44px;
    vertical-align: middle;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);
}

#progressBar {
    width: 60%;
    height: 50px;
    position: relative;
    margin: auto;
    margin-top: 15px;
}

#progressBar div {
    width: 100%;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -20px;
    background: #ccc;
}

#progressBar div span {
    position: absolute;
    display: inline-block;
    background: #1f98c6;
    height: 10px;
    width: 0%;
    -webkit-animation: bgLoad 5.5s linear;
}

#progressBar > span {
    position: absolute;
    top: 0;
    margin-top: -3px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ccc;
    margin-left: -20px;
    color: #fff;
    text-align: center;
    line-height: 25px;
}

#progressBar span:nth-child(2) {
    left: 0%;
    background: #1f98c6;
    -webkit-animation: circleLoad_2 3s ease-in;
}

#progressBar span:nth-child(3) {
    left: 50%;
    -webkit-animation: circleLoad_2 3s ease-in;
}

#progressBar span:nth-child(4) {
    left: 100%;
    -webkit-animation: circleLoad_4 6s ease-in;
}

.readingPage #progressBar div span {
    position: absolute;
    display: inline-block;
    background: #1f98c6;
    height: 10px;
    width: 50%;
    -webkit-animation: bgLoad 5.5s linear;
}

.readingPage #progressBar > span {
    position: absolute;
    top: 0;
    margin-top: -3px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ccc;
    margin-left: -20px;
    color: #fff;
    text-align: center;
    line-height: 25px;
}

.readingPage #progressBar span:nth-child(2) {
    left: 0%;
    background: #1f98c6;
    -webkit-animation: circleLoad_2 3s ease-in;
}

.readingPage #progressBar span:nth-child(3) {
    left: 50%;
    background: #1f98c6;
    -webkit-animation: circleLoad_2 3s ease-in;
}

.readingPage #progressBar span:nth-child(4) {
    left: 100%;
    /*background: green;*/
    -webkit-animation: circleLoad_4 6s ease-in;
}

.writingPage #progressBar div span {
    position: absolute;
    display: inline-block;
    background: #1f98c6;
    height: 10px;
    width: 100%;
    -webkit-animation: bgLoad 5.5s linear;
}

.writingPage #progressBar > span {
    position: absolute;
    top: 0;
    margin-top: -3px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ccc;
    margin-left: -20px;
    color: #fff;
    text-align: center;
    line-height: 25px;
}

.writingPage #progressBar span:nth-child(2) {
    left: 0%;
    background: #1f98c6;
    -webkit-animation: circleLoad_2 3s ease-in;
}

.writingPage #progressBar span:nth-child(3) {
    left: 50%;
    background: #1f98c6;
    -webkit-animation: circleLoad_2 3s ease-in;
}

.writingPage #progressBar span:nth-child(4) {
    left: 100%;
    background: #1f98c6;
    -webkit-animation: circleLoad_4 6s ease-in;
}

.listeningPage .mainDescription {
    text-align: justify;
    text-indent: 20px;
}

.listeningPage .partOneDirection {
    margin: 10px 10px 30px 10px;
}

.listeningPage .partOneDirection .contentText {
    text-indent: 20px;
}

.listeningPage .box dl.box-inner.with-thumb > dt img.thumb {
    width: 300px;
    height: 200px;
}

.listeningPage .content .box-inner .box .exampleTitle {
    text-align: center;
}

.listeningPage .listingRadio {
    margin: 0rem 0.5rem;
    width: 60px;
    display: inline-block;
}

.listeningPage .listingRadio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.listeningPage .listingRadio input[type="radio"] + .radio-label:before {
    content: '';
    background: #f4f4f4;
    border-radius: 100%;
    border: 1px solid #b4b4b4;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    position: relative;
    top: -0.2em;
    margin-right: 1em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
}

.listeningPage .listingRadio input[type="radio"]:checked + .radio-label:before {
    background-color: #3197EE;
    box-shadow: inset 0 0 0 4px #f4f4f4;
}

.listeningPage .listingRadio input[type="radio"]:focus + .radio-label:before {
    outline: none;
    border-color: #3197EE;
}

.listeningPage .listingRadio input[type="radio"]:disabled + .radio-label:before {
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: #b4b4b4;
    background: #b4b4b4;
}

.listeningPage .listingRadio input[type="radio"] + .radio-label:empty:before {
    margin-right: 0;
}

.listeningPage .radio-label {
    line-height: 10px;
    vertical-align: middle;
    display: inline-block;
}

.listeningPage .listingStart {
    position: relative;
    width: 300px;
    display: inline-block;
    margin: 10px;
}


.listeningPage .listingStart .answerChoose {
    border: 1px solid #c7cad3;
    height: 32px;
    border-top: none;
    text-align: center;
    box-sizing: border-box;
}

.listeningPage .listingStart .listingRadio {
    width: 40px;
}

.listeningPage .box dl.box-inner.with-thumb > dt.listingPart2 {
    width: 50%;
}

.listeningPage .listingStart .examlist {
    position: absolute;
    top: 0;
    right: 0;
    height: 28px;
    width: 28px;
    /*line-height: 28px;*/
    text-align: right;
    padding-right: 6px;
    padding-top: 4px;
    box-sizing: border-box;
    color: #fff;
    background: url(../images/common/toprightbg.png) no-repeat center;
    background-size: 100%;

}

.listeningPage .part2 dt {
    vertical-align: bottom;
    padding: 6px 0 5px 10px;
}

.listeningPage .part2 dd {
    text-align: right;
}

.listeningPage .pink {
    color: #ed5cb7;
}

.listeningPage .nextReading {
    text-align: center;
}

.listeningPage .nextReading a {
    width: 130px;
}

.listeningPage .singlePosition {
    position: relative;
}

/*音频*/
.audioplayer {
    margin: 10px 0;
    height: 2.5em; /* 40 */
    color: #fff;
    border: 1px solid #222;
    position: fixed;
    z-index: 9999;
    top: 35px;
    left: 0px;
    width: 300px;
    background: #222;


}

.audioplayer-mini {
    width: 2.5em; /* 40 */
    margin: 0 auto;
}

.audioplayer > div {
    position: absolute;
}

.audioplayer-playpause {
    width: 2.5em; /* 40 */
    height: 100%;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    left: 0;
}

.audioplayer-mini .audioplayer-playpause {
    width: 100%;
}

.audioplayer-playpause:hover,
.audioplayer-playpause:focus {
    background-color: #222;
}

.audioplayer-playpause a {
    display: block;
}

.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
    width: 0;
    height: 0;
    border: 0.5em solid transparent; /* 8 */
    border-right: none;
    border-left-color: #fff;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.5em 0 0 -0.25em; /* 8 4 */
}

.audioplayer-playing .audioplayer-playpause a {
    width: 0.75em; /* 12 */
    height: 0.75em; /* 12 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.375em 0 0 -0.375em; /* 6 */
}

.audioplayer-playing .audioplayer-playpause a:before,
.audioplayer-playing .audioplayer-playpause a:after {
    width: 40%;
    height: 100%;
    background-color: #fff;
    content: '';
    position: absolute;
    top: 0;
}

.audioplayer-playing .audioplayer-playpause a:before {
    left: 0;
}

.audioplayer-playing .audioplayer-playpause a:after {
    right: 0;
}

.audioplayer-time {
    width: 4.375em; /* 70 */
    height: 100%;
    line-height: 2.375em; /* 38 */
    text-align: center;
    z-index: 2;
    top: 0;
}

.audioplayer-time-current {
    border-left: 1px solid #111;
    border-left-color: rgba(0, 0, 0, .25);
    left: 2.5em; /* 40 */
}

.audioplayer-time-duration {

    right: 2.5em; /* 40 */
}

.audioplayer-novolume .audioplayer-time-duration {
    border-right: 0;
    right: 0;
}

.audioplayer-bar {
    height: 0.875em; /* 14 */
    background-color: #222;
    cursor: pointer;
    z-index: 1;
    top: 50%;
    right: 6.875em; /* 110 */
    left: 6.875em; /* 110 */
    margin-top: -0.438em; /* 7 */
}

.audioplayer-novolume .audioplayer-bar {
    right: 4.375em; /* 70 */
}

.audioplayer-bar div {
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.audioplayer-bar-loaded {
    background-color: #333;
    z-index: 1;
}

.audioplayer-bar-played {
    background: #1ba1e2;
    z-index: 2;
}

.audioplayer-volume {
    width: 2.5em; /* 40 */
    height: 100%;
    border-left: 1px solid #111;
    border-left-color: rgba(0, 0, 0, .25);
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    right: 0;
}

.audioplayer-volume:hover,
.audioplayer-volume:focus {
    background-color: #222;
}

.audioplayer-volume-button {
    width: 100%;
    height: 100%;
}

.audioplayer-volume-button a {
    width: 0.313em; /* 5 */
    height: 0.375em; /* 6 */
    background-color: #fff;
    display: block;
    position: relative;
    z-index: 1;
    top: 42%;
    left: 30%;
}

.audioplayer-volume-button a:before,
.audioplayer-volume-button a:after {
    content: '';
    position: absolute;
}

.audioplayer-volume-button a:before {
    width: 0;
    height: 0;
    border: 0.5em solid transparent; /* 8 */
    border-left: none;
    border-right-color: #fff;
    z-index: 2;
    top: 50%;
    right: -0.25em;
    margin-top: -0.5em; /* 8 */
}

.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after {
    /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
    width: 0.313em; /* 5 */
    height: 0.313em; /* 5 */
    border: 0.25em double #fff; /* 4 */
    border-width: 0.25em 0.25em 0 0; /* 4 */
    left: 0.563em; /* 9 */
    top: -0.063em; /* 1 */
    -webkit-border-radius: 0 0.938em 0 0; /* 15 */
    -moz-border-radius: 0 0.938em 0 0; /* 15 */
    border-radius: 0 0.938em 0 0; /* 15 */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.audioplayer-volume-adjust {
    height: 6.25em; /* 100 */
    cursor: default;
    position: absolute;
    left: 0;
    right: -1px;
    top: -9999px;
    background: #222;
}

.audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
    opacity: 0;
}

.audioplayer-volume:hover .audioplayer-volume-adjust {
    top: auto;
    bottom: 100%;
}

.audioplayer-volume-adjust > div {
    width: 40%;
    height: 80%;
    background-color: #333;
    cursor: pointer;
    position: relative;
    z-index: 1;
    margin: 30% auto 0;
}

.audioplayer-volume-adjust div div {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #1ba1e2;
}

.audioplayer-novolume .audioplayer-volume {
    display: none;
}

.audioplayer *,
.audioplayer *:before,
.audioplayer *:after {
    -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    transition: color .25s ease, background-color .25s ease, opacity .5s ease;
}

/*loading page*/
#loading {
    background: linear-gradient(45deg, #222428, #444856);
    color: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999999;
    margin-top: 0px;
    top: 0px;
    overflow: hidden;
}

#loading-center {
    width: 100%;
    height: 100%;
    position: relative;
}

#loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 150px;
    width: 150px;
    margin-top: -75px;
    margin-left: -75px;
}

#loading .object {
    width: 20px;
    height: 20px;
    background-color: #FFF;
    float: left;
    margin-right: 20px;
    margin-top: 65px;
    -moz-border-radius: 50% 50% 50% 50%;
    -webkit-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
}

#loading #object_one {
    -webkit-animation: object_one 1.5s infinite;
    animation: object_one 1.5s infinite;
}

#loading #object_two {
    -webkit-animation: object_two 1.5s infinite;
    animation: object_two 1.5s infinite;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

#loading #object_three {
    -webkit-animation: object_three 1.5s infinite;
    animation: object_three 1.5s infinite;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

@-webkit-keyframes object_one {
    75% {
        -webkit-transform: scale(0);
    }
}

@keyframes object_one {

    75% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
}

@-webkit-keyframes object_two {
    75% {
        -webkit-transform: scale(0);
    }
}

@keyframes object_two {
    75% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
}

@-webkit-keyframes object_three {

    75% {
        -webkit-transform: scale(0);
    }
}

@keyframes object_three {

    75% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
}

#loading .text-shadowl {
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#loading .font-weight-boldl {
    font-weight: 700;
    font-size: 2.5rem;
}

#loading .loadingtext {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 55%;
}

/*进度条倒计时*/
.progressBoxContent {
    position: fixed;
    top: 46px;
    left: 50%;
    width: 360px;
    margin-left: -180px;
    z-index: 1000;
}

progress {
    vertical-align: baseline
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0
    }
    to {
        background-position: 0 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0
    }
    to {
        background-position: 0 0
    }
}

.readingPageProgress .progress {
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #1f98c6;
    border-radius: .25rem
}

.readingPageProgress .progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #ccc;
    transition: width .6s ease
}

@media screen and (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none
    }
}

.readingPageProgress .progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem
}

.readingPageProgress .progress-bar-animated {
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite
}

/*时钟倒计时*/
figure, figcaption {
    display: block;
}

.transition {
    -webkit-transition: top 400ms linear;
    -moz-transition: top 400ms linear;
    -ms-transition: top 400ms linear;
    -o-transition: top 400ms linear;
    transition: top 400ms linear;
}

.timeTo {
    font-family: Tahoma, Verdana, Aial, sans-serif;
    font-size: 28px;
    line-height: 108%;
    font-weight: bold;
    height: 32px;
    position: fixed;
    top: 45px;
    left: 50%;
    z-index: 888;
    margin-left: -60px;
}

.timeTo span {
    vertical-align: top;
}

.timeTo.timeTo-white div {
    color: black;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 38%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(38%, #ffffff), color-stop(100%, #cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 38%, #cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 38%, #cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 38%, #cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 38%, #cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0); /* IE6-9 */
}

.timeTo.timeTo-black div {
    color: white;
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45484d), color-stop(100%, #000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #45484d 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #45484d 0%, #000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #45484d 0%, #000000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #45484d 0%, #000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#000000', GradientType=0); /* IE6-9 */
}

.timeTo.timeTo-black .timeTo-alert {
    background: #a74444; /* Old browsers */
    background: -moz-linear-gradient(top, #a74444 0%, #3f0000 67%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a74444), color-stop(67%, #3f0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a74444 0%, #3f0000 67%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a74444 0%, #3f0000 67%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #a74444 0%, #3f0000 67%); /* IE10+ */
    background: linear-gradient(to bottom, #a74444 0%, #3f0000 67%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a74444', endColorstr='#3f0000', GradientType=0); /* IE6-9 */
}

.timeTo.timeTo-white .timeTo-alert {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 35%, #e17373 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(35%, #ffffff), color-stop(100%, #e17373)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 35%, #e17373 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 35%, #e17373 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 35%, #e17373 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 35%, #e17373 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e17373', GradientType=0); /* IE6-9 */
}

.timeTo figure {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.timeTo figcaption {
    text-align: center;
    /*font-size: 12px;*/
    line-height: 80%;
    font-weight: normal;
    color: #888;
}

.timeTo div {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 30px;
    border-top: 1px solid silver;
    border-right: 1px solid silver;
    border-bottom: 1px solid silver;
    overflow: hidden;
}

.timeTo div.first {
    border-left: 1px solid silver;
}

.timeTo ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 3px;
}

.timeTo ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.modelContenbox {
    display: none;
}

/*reading page*/
.readingPage .readingRadio {
    margin: 0.5rem 0.5rem;
    width: 100%;
    display: block;
}

/*2019-12-24*/
.box.balloon22:after {
    content: '';
    position: absolute;
    bottom: 137px;
    left: 49%;
    border-top: none;
    border-bottom: 14px solid #ffffff;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.box.balloon22:before {
    content: '';
    position: absolute;
    bottom: 138px;
    left: 49%;
    border-top: none;
    border-bottom: 14px solid #c7cad3;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.listeningPage .partOneDirection2 {
    margin: 30px 10px 30px 10px;
}

.textareaContent {
    min-height: 200px;
    width: 100%;
    padding: 10px;
    resize: none;
    overflow: hidden;
}

/*titleimgwidth*/
.imgWidth100p {
    max-width: 100%;
    height: auto;
    word-wrap:break-word;
    word-break:break-all;
    overflow: hidden;
}

.imgWidth300p {
    max-width: 630px;
    height: auto;
}

.imgWidth600p img {
    max-width: 630px;
    height: auto;
}

.noticeContent2 li {
    line-height: 32px;
}

.examTitle2 {
    padding: 38px 10px 10px 10px;
    line-height: 22px;
}

/*tanchuang*/
.modal-open {
    overflow: hidden
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%)
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5)
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000
}

.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5
}

.modal-title {
    margin: 0;
    line-height: 1.42857143
}

.modal-body {
    position: relative;
    padding: 15px;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
    text-align: center;
}

.modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px
}

.modal-footer .btn-group .btn + .btn {
    margin-left: -1px
}
#notice_center_model .close_nootice {
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    cursor:pointer;
}
#notice_center_model .notice_icon {
    font-size:36px;
    color:#3cb6e3;
}
#notice_center_model .notice_title {
    font-size:18px;
}
.modal-footer .btn-block + .btn-block {
    margin-left: 0
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

.modal-header .close-suit-modal {
    margin-top: -2px;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}



@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

.noBorder input {
    border-top: none;
    border-left: none;
    border-right: none;
    width:50%;
}
#childrenPartTwoSectionBForm .listingStart .answerChoose2 {
    display: block;
    height: auto;
}
#childrenPartTwoSectionBForm .listingStart .answerChoose2 .listingRadio {
    display:block;
    margin-bottom:5px;
}
.readingPage .changeRadio {
    margin: 0.5rem 0.5rem;
    width: 45%;
    display: inline-block;
}
.listeningPage .listingStart .listeningRadio2 {
    margin: 0.2rem 0rem 0.2rem 1rem;
    width: 100%;
    display: block;
    text-align: left;
}
.box dl.box-inner.with-thumb #AddDt {
    display: block;
    width: 100%;
    height: auto;
}
.box dl.box-inner.with-thumb #AddDt2 {
    display: block;
    width: 100%;
    height: auto;
}
/*Placement Result*/
.resultTable {
    width: 100%;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
.resultTable th{
    font-weight: bold;
}
.resultTable th,.resultTable td {
    text-align: center;
    padding: 5px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
}
.partOneDirection .pink {
    color:#ed5cb7;
}
.contentText p {
    padding-left: 15px;
    text-align: justify;
}
.partOneDirection2 .contentText p {
    text-indent: 20px;
    padding-left: 0;
    text-align: justify;
}
.examTitleAfter2 {
    line-height: 50px;
}
.partOneDirection2 {
    word-wrap: break-word;
}

/*Reserve Priority*/
.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li {
    position:relative;
}

.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li .addOneIcon,
.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li.disabled > a.addOneIcon {
    position:absolute;
    top:3px;
    right:2px;
    width:auto;
    height:auto;
    cursor:pointer;
    display:inline-block;
    border:0!important;
    background:none !important;
    box-shadow:none !important;
}
.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li .addOneIcon img,
.searchbox > .content.schedule .palette ul.dates > li.selection ul.inner > li.disabled > a.addOneIcon img {
    border:0!important;
}
.iconStyle .addOneIcon {
    position:absolute;
    top:0px;
    right:0px;
    width:auto;
    height:auto;
    cursor:pointer;
    display:inline-block;
    border:0!important;
    background:none !important;
    box-shadow:none !important;
}
.iconStyle .addOneIcon img {
    border:0!important;
    width:18px;
}



.resultset .social_effects_table {
    width: 100%; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;
}
.resultset .social_effects_table,.resultset .social_effects_table tr th, .resultset .social_effects_table tr td {border:1px solid #c7cad3;padding:5px;text-align:center;}
.table_list_lesson {border:none !important;border-bottom:1px solid #e1e1e1  !important;word-break: break-all;}
.table_list_lesson thead tr th:before{content: none !important;}
.table_list_lesson tr th {background:none !important;border:none !important;}
.table_list_lesson_content {display: flex;justify-content: space-between;padding:0 10px;}
.table_list_lesson tbody tr td {border:none !important;}
.table_list_lesson > tbody > tr:hover > td {background:none!important;}
.arrow_target { line-height:30px;position:relative;text-align:center}
.arrow_up_down {position:absolute;right:0px;top:0px;}
.arrow_content dl.border-bottom {border-bottom:none;}
.arrow_content_box {word-break: break-all;}


.notices_center {
    position: relative;
}
.notices_center .div_right {
    position: absolute;
    color: white;
    font-size: 12px;
    background-color: red;
    width: 21px;
    height: 21px;
    line-height: 21px;
    left: 92%;
    top: 5px;
    text-align: center;
    -webkit-border-radius: 24px;
    border-radius: 24px;
}
.notices_top {
    position: relative;
}
.notices_top .div_right {
    position: absolute;
    color: white;
    font-size: 12px;
    background-color: red;
    width: 21px;
    height: 21px;
    line-height: 21px;
    left: 80%;
    top: 0px;
    text-align: center;
    -webkit-border-radius: 24px;
    border-radius: 24px;
}
/*Home dialog*/
.naranja-notification-box {
    box-sizing: content-box;
    display: flex;
    flex-direction: column-reverse;
    position: fixed;
    bottom: 30px;
    right: 0;
    width: auto;
    height: auto;
    max-height: 100vh;
    overflow: auto;
    padding: 8px;
    padding-top: 20px;
    z-index:9999;
}
.naranja-notification {
    height: 0;
    box-sizing: content-box;
    padding: 10px 0;
    transition: padding .7s cubic-bezier(0, .5, 0, 1),height .7s cubic-bezier(0, .5, 0, 1);
}
.naranja-notification .naranja-body-notification {
    animation: .4s fadeUpIn 1 cubic-bezier(0, .5, 0, 1);
    position: relative;
    display: flex;
    width: 420px;
    padding: 7px 10px;

    opacity: 1;
    transition: opacity .15s ease,marginTop .3s ease,marginBottom .3s ease,padding .3s ease;
}
.naranja-notification .naranja-body-notification>div {
    display: inline-flex;
    justify-content: center;
    align-items: top;
}
.naranja-notification .naranja-body-notification .naranja-text-and-title {
    padding-left: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.naranja-notification .naranja-body-notification .naranja-text-and-title>p {
    margin: 5px;
}

.naranja-notification .naranja-body-notification .naranja-title {
    font-size: 20px;
    opacity: 1;
}
.naranja-notification .naranja-body-notification .naranja-parragraph {
    font-size: 14px;
    opacity: .6;
    padding-right: 30px;
    line-height: 1.4em;
}
.naranja-notification .naranja-body-notification .naranja-text-and-title>div {
    width: 100%;
}
.naranja-notification .naranja-body-notification .naranja-text-and-title>div button {
    float: right;
    margin-left: 6px;
    margin-top: 10px;
    margin-bottom: 2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    border-radius: 3px;
    padding: 2px 11px;
    font-size: 14px;
    text-align: center;
    outline: none;
    border-width: 1px;
    box-shadow: 0 2px 4px -2px rgba(0,0,0,0.2);
    cursor: pointer;
}
.naranja-notification .narj-success {
    background: #f9f9f9;
}

.naranja-notification .close_top {
    position:absolute;
    top:0;
    right:0;
    color: #a4a4a4;
    cursor:pointer;
}
.narj-icon-success  img { width:100px;}

.naranja-notification-box .lobibox-header {
    color: #eee;
    background-color: rgb(0, 204, 205);
    border-radius: 4px 4px 0px 0px;

}
.naranja-notification-box .lobibox-header {
    font-size: 20px;
    padding: 5px 10px;
    color: #eee;
}
.naranja-notification-box .lobibox-header .btn-close {
    float: right;
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.naranja-notification-box .icon_tip_style {
    font-size:32px;
    color: rgb(0, 204, 205);
}
.naranja-notification-box .lobibox-footer {
    color: #eee;
    border-top: 1px solid rgb(225, 225, 225);
    background: url(../images/common/bg.dotted.png) left top repeat rgb(249, 249, 249);
    font-size:18px;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.16);
    padding:5px 8px;;
    text-align:right;
}
.naranja-notification-box .lobibox-footer button {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    border-radius: 3px;
    padding: 2px 11px;
    font-size: 14px;
    text-align: center;
    outline: none;
    border-width: 1px;
    box-shadow: 0 2px 4px -2px rgba(0,0,0,0.2);
    cursor: pointer;
    margin:0 5px;
    border:1px solid rgb(225, 225, 225);
    color: rgb(255, 255, 255);
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 1px 1px inset;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(189, 43, 131);
    border-image: initial;
    background: linear-gradient(rgb(237, 92, 183) 0%, rgb(204, 45, 152) 100%);
}
.title_list_style {word-break: break-word;}

.break_word {
    word-wrap: break-word;
    word-break: break-all;
}
.break_word2 {
    word-wrap: break-word;
    word-break: normal;
    text-align: justify;
}
.dialog-gift-card {
    background: url(../images/register/gift_card/dialog_background.png)no-repeat;
    background-size: 100%;
    height: 484px;
}
.dialog-gift-card .message{
    margin: 0 auto;
    margin-top: 15px;
    padding:20px 28px 0 28px;
    background: url(../images/register/gift_card/dialog_message_background.png)no-repeat;
    background-size:cover;
    width: 397px;
    height:210px;
    box-sizing:border-box;
    color:white;
}
.dialog-gift-card .button{
    display:block;
    text-align:center;
    line-height: 90px;
    margin: 0 auto;
    margin-top: 20px;
    background: url(../images/register/gift_card/dialog_button.png)no-repeat;
    background-size:cover;
    width: 397px;
    height: 90px;
    color:rgb(185,96,24);
    font-weight: 200;
    font-size: 28px;
    cursor:pointer;
}
.dialog-gift-card .button:hover {
    text-decoration:none;
}
.dialog-gift-card .button:focus {
    text-decoration:none;
}
.dialog-gift-card .gift_close{
    text-align:center;
    background: url(../images/register/gift_card/close.png)no-repeat;
    background-size:cover;
    width: 35px;
    height: 35px;
    margin-top: 40px;
    right: 5px;
    cursor:pointer;
    position: absolute;
}

.fs25{ font-size:25px;}
.fs30{ font-size:30px;}
.fs18 {font-size: 18px;}
.fs22{ font-size:22px;}
.flex_style {
    display:flex;
    justify-content:space-between;
}
.flex_style_center {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.position_right {
    position: absolute;
    right: 0px;
    top: 0px;
}
.agreement {
    font-size:12px;
}
.agreement .cleckout {
    width: 17px;
    height: 17px;
    display: inline-block;
    vertical-align:bottom;
    background: url("../images/common/r_icons.png") -250px 0 no-repeat;
}
.agreement .checked {
    background-position: -300px 0;
}
.agreement_null {
    font-size: 12px;
    display: none;

}
/*progress_bg*/
.progress_bg {
    background: #fff;
}
.progress_container {
    padding: 30px 0;
    margin: 0 auto;
    text-align: center;
}
.progress_container li {
    display: inline-block;
    padding-left: 20px;
}
.progress_container li span {
    vertical-align: middle;
    padding: 0 10px;
}
.progress_container li span.num {
    border-radius: 50%;
    border: 1px solid #333;
    font-size: 12px;
    vertical-align: middle;
    line-height: 60px;
    display: inline-block;
    width:60px;
    box-sizing: border-box;
    height: 60px;
}
.progress_step_css li span.num {
    border: 1px solid #418abb;
    color: #418abb;
    font-size: 26px;
}
.num1 {
    background: #f3f3f3;
}
.progress_bg_mb .progress_container li {
    padding-left: 0px;
}
.progress_bg_mb .progress_container li span.num {
    width:45px;
    height: 45px;
    line-height: 45px;
}
.gold_box .clipped-box {
    display: none;
    position: absolute;
    bottom: 40px;
    left: 50%;
    height: 540px;
    width: 980px;
}
.gold_box .clipped-box img {
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    z-index: 999;
    -webkit-transition: -webkit-transform 1.4s ease-in, background 0.3s ease-in;
    transition: transform 1.4s ease-in;
}
.gold_box .gold_text {
    position: absolute;
    top: -65%;
    left: 0;
    width:100%;
    text-align: center;
}
.gold_num_content {
    display: none;
    position: absolute;
    top:-450%;
    left:0;
    text-align: center;
    width:100%;

}
.gold_num_content span.num_text {
    font-size: 54px;
    color: #ffcf19;
}
.gold_num_content span img {
    border: none;
}

#ball {
    display:none;
    position:fixed;
    left:300px;
    top:300px;
    transition:all .5s cubic-bezier(0.49,-0.5,0.75,0.41);
    z-index: 99;
}
#ball .ball-hook {
    width:35px;
    height:35px;
    background: url("../images/game/assets/sprites/jb0.png") no-repeat;
    transition:all .5s linear;
    background-size: 100%;
    z-index: 99;
}
.single_style_position {
    position: absolute;
    top: -121px;
    left: 0;
    width: 100%
}

.single_style_position_left {
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%
}
.page-mypage-top .min_section_tip {
    height: 39px!important;
    text-align: center;
    padding: 0 15px;
}
.page-mypage-top .balloon-intro span.min_tip {
    line-height: 30px;
    font-size: inherit;
    padding-left: 0;
}

.icon-star3-color {
    color: #ed5cb7;
}
.icon-checkmark-color {
    color: #898fa3;
}

.page-teacher-detail .balloon-intro span {
    color: #424652;
    font-size: 16px;
    line-height: 55px;
    vertical-align: middle;
    padding: 0 0 0 20px;
}


.page-teacher-detail .balloon-intro {
    width: 100%;
    height: 55px;
    position: relative;
}
.page-curriculum-detail .balloon-intro span {
    color: #424652;
    font-size: 16px;
    line-height: 55px;
    vertical-align: middle;
    padding: 0 0 0 20px;
}
.page-curriculum-detail .balloon-intro {
    width: 100%;
    height: 55px;
    position: relative;
}
.bottom_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 15%;
    width: 100%;
    display: inline-block;
    background: rgba(0, 0, 0, 0.05);
}
.icon_style_bottom {
    position: absolute;
    bottom: 8px;
    right: 25px;
    font-size: 24px;
    display: inline-block;
    color: #000;
    cursor: pointer;
}
#swiper-pagination-top {
    width: auto;
    left: 50%;
    bottom:20px;
    background: rgba(255,255,255,.6);
    border-radius: 25px;
    padding: 0 5px;
}
#swiper-button-prev-top {
    background: rgba(0,0,0,.3);
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-background-clip: padding-box;
    -moz-border-radius-bottomright: 15px;
    -moz-background-clip: padding;
    border-bottom-right-radius: 15px;
    background-clip: padding-box;
    display: block;
    height: 30px;
    width: 20px;
    line-height: 30px;
    color: #fff;
    margin-top: -15px;
    left: 0;
    text-align: left;
}
#swiper-button-next-top {
    background: rgba(0,0,0,.3);
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-left-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -webkit-background-clip: padding-box;
    -moz-border-radius-bottomleft: 15px;
    -moz-background-clip: padding;
    border-bottom-left-radius: 15px;
    background-clip: padding-box;
    display: block;
    height: 30px;
    width: 20px;
    line-height: 30px;
    color: #fff;
    margin-top: -15px;
    right: 0;
    text-align: right;
}
.swiper_hide {
    display: none!important;
}
.rankBox .hd li.comparison_title_li_style {
    width: 100%;
    border-bottom: 1px solid #ddd;
    border-top: none;
}

.resultset > ul.results > li.result > dl > dd p.message_style {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cancellation {
    position: absolute;
    right: 3%;
    top:-69%;
}
.account_inactive {
    cursor: pointer;
}
.line_content {
    position: fixed;
    right: 2%;
    bottom:12%;
}
.puzzle_game_content {
    /*position: relative;*/
}
.puzzle_game_flag {
    position: absolute;
    top: 0;
    left: 63%;
    color: red;
    font-weight: bold;
}
.ai_icon_flag {
    position: absolute;
    top: 0;
    left: 14%;
    color: red;
    font-weight: bold;
    width:18px;
}
.ai_icon_flag img {
    width:100%;
}
.lesson_leave_style,.lesson_leave_style_pc{
    float: right;
    line-height: 16px;
    text-align: right;
    cursor: pointer;
    font-size: 12px;
}
.lesson_leave_style span,.lesson_leave_reserved span,.lesson_leave_style_pc span{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    display: inline-block;
}
.lesson_leave_style span i.icon-arrow-left8:last-child,.lesson_leave_reserved span i.icon-arrow-left8:last-child,.lesson_leave_style_pc span i.icon-arrow-left8:last-child {
    position: relative;
    left: -15px;
}
.lesson_leave_style span i.icon-arrow-right8:first-child,.lesson_leave_reserved span i.icon-arrow-right8:first-child,.lesson_leave_style_pc span i.icon-arrow-right8:first-child {
    position: relative;
    right: -15px;
}
.lesson_leave_style span i.icon-arrow-down8:last-child,.lesson_leave_reserved span i.icon-arrow-down8:last-child ,.lesson_leave_style_pc span i.icon-arrow-down8:last-child  {
    position: relative;
    left: -21px;
    top: 5px;
}
.calendarbox > ul.lessons > li > dl.box > dd ul.btns {
    position: inherit;
}
.lesson_leave_reserved{
    line-height: 16px;
    text-align: right;
    cursor: pointer;
    font-size: 12px;
}
header.jp_header_style ul.nav > li > a {

    padding: 1px 6px 0 6px;

}
.btn_style li a {
    height: 40px;
    border-radius: 3px;
    line-height: 40px;
}

.btn_style .google_li a {
    font-family: 'Roboto', sans-serif;
    background: #fff;
    border: 1px solid #ddd;
    padding-left: 0;
    color: #333;
    line-height: 40px;
}
.btn_style .google_li .btn.next:after {
    display:none
}
.btn_style .btn.next:after {
    display:none;
}
.google_text {
    color: #9a9a9a;
    line-height: 16px;
    padding-left: 20px;
    position: relative;
}
.google_text i {
    position: absolute;
    left: 0;
    top: 0;
}
.btn_style .google_li a img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    transform: scale(0.7);
}
#searchbox_fixing_f .fixing_content .form-radio {
    padding-right: 6px;
}
#searchform_fixings_f .fixing_content .form-radio {
    padding-right: 6px;
}
.max_title {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.font_weight {
    font-weight: bold;
}
/*Information top */

.information_top_content {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    background: #FFEDED;
    color: #FE0000;
    padding: 0px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #D6CCCB;
    margin-bottom: 25px;
}
.information_top_content div {
    display: inline-block;
}
.information_top_content .in_title {
    background: #FE0000;
    color: #fff;
    padding: 3px 10px;
    display: inline-block;
    border-radius: 25px;
    font-size: 12px;
}
.information_top_content .text_content {
    cursor: pointer;
}
.information_top_content .more_right {
    position: absolute;
    right: 0;
    top: 13px;
    cursor: pointer;
}
.information_top_content .more_right a {
    color: #FE0000;
    font-size: 12px;
}
.notice_list_top {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    min-height: 42px;
}
.notice_list_top li {
    display: none;
    padding: 10px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}
.notice_list_top li a{
    color: #FE0000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 700px;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
}

.notice_list_top li.active {
    display: block;
    animation: scroll 7s linear;
}
.notice_list_top li.active_one {
    display: block;
}
.notice_list_top li.active_first {
    display: block;
    animation: scroll2 7.4s linear;
}
@keyframes scroll2 {
    0% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
@keyframes scroll {
    0% {
        transform: translateY(100%);
    }
    10% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
.start_content .label_btn {
    display: inline-block;
    background: #E4E7EC;
    color: #667085;
    padding: 2px 10px;
    margin-right: 5px;
    margin-bottom: 4px;
    margin-top: 4px;
    border-radius: 25px;
    cursor: pointer;
}
.ml100 {
    margin-left: 100px;
}
.start_content .label_btn.tag_active {
    background: rgba(255,193,7,.2);
    color: #FFA807;
}
.start_content .dialog_label_btn {
    font-size: 12px;
}
.pb40 {
    padding-bottom: 40px !important;
}
.change_email_login {
    position: absolute;
    left: 30px;
    bottom:8px;
    cursor: pointer;
    font-size: 12px;
}
.change_email_login a {
    color: #000;
}
.font_normal label{
    font-weight: 500;
}

.upload_picture_support .image-preview {
    display: flex;
    flex-wrap: wrap;
}

.upload_picture_support .image-box {
    position: relative;
    width: 81px;
    height: 50px;
    margin-right: 13px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.upload_picture_support .image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.upload_picture_support .delete-icon {
    position: absolute;
    top: -15px;
    right: -15px;
    cursor: pointer;
    color: red;
    font-weight: bold;
    font-size: 16px;
    border-radius: 3px;
    padding: 2px 5px;
}
.upload_picture_support_modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload_picture_support_modal .modal-content-container {
    position: relative;
}

.upload_picture_support_modal .modal-content {
    max-width: 800px;
    min-width: 100px;
    max-height: 90vh;
    margin: auto;
    display: block;
}
.upload_picture_support_modal .delete-icon-modal {
    position: absolute;
    top: -25px;
    right: -25px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    font-size: 22px;
    border-radius: 3px;
    padding: 2px 5px;
}

.ai_curriculum_lesson_time,
.normal_curriculum_lesson_time {
    display: inline-block;
}