@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;
}

.icon-edit {
    width: 100%;
    height: 100%;
    background: url(../images/common/icon_edit.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}

.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_sa {
    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 .logo_sa>a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/logo.header_for_sa.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>.children.ai_study_sub {
    top: -9px !important;
}

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%;
}

footer>.bottom .logo_sa>a {
    display: block;
    width: 100px;
    height: 20px;
    background: url(../images/common/logo.header_for_sa.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;
    overflow: visible;
}

.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.curriculum>.no-extra-fee-badge {
    position: absolute;
    top: 0px;
    right: 0;
    background-color: #FF9400;
    color: #ffffff;
    font-size: 10px;
    /*font-weight: bold;*/
    line-height: 1.2;
    padding: 1px 4px;
    /* text-transform: uppercase; */
    white-space: nowrap;
    z-index: 10;
    border-bottom-left-radius: 6px;
    pointer-events: none;
}

.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;
    position: relative;
}

.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 .btn-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: url(../images/common/icon_del.png) bottom left no-repeat;
    background-size: contain;
}

/*.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;
    display: inline-block;
    padding-left: 10px;
    box-sizing: border-box;
}

.resultset>.schedule>.teachers ul.inner>li dl.teacher>dt img.thumb {
    display: inline-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 .icon-wraper {
    width: 90px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 3px;
}

.profilebox .icon-wraper .btn .icon-collect {
    display: block;
    width: 40px;
    height: 32px;
    background: url(../images/common/icon_collect.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}

.profilebox .icon-wraper .btn .icon-collected {
    display: block;
    width: 40px;
    height: 32px;
    background: url(../images/common/icon_collected.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}

.profilebox .icon-wraper .btn .icon-remark {
    display: block;
    width: 40px;
    height: 32px;
    background: url(../images/common/icon_remark.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}

.profilebox .icon-wraper .btn .icon-remarked {
    display: block;
    width: 40px;
    height: 32px;
    background: url(../images/common/icon_remarked.png) bottom left no-repeat;
    text-indent: -9999px;
    background-size: contain;
}

.profilebox>dl>dd .btn {
    width: 41px;
    height: 30px;
    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>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;
    word-wrap: break-word;
}

.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;
}

.message_icon {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 16px;
    cursor: pointer;
}

.table_list_lesson .icon-copy3_style {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 16px;
    cursor: pointer;
}

.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;
}


.progress_new_box .progress_bg {
    background: #fff;
}

.progress_new_box .progress_container {
    padding: 30px 0;
    margin: 0 auto;
}

.progress_new_box .progress_container ul {
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 1.16em;
    text-align: center;
}

.progress_new_box .progress_container ul::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 45em;
    height: 2px;
    background: #ccc;
    transform: translateX(-50%);
    z-index: 0;
}

.progress_new_box .progress_container li {
    position: relative;
    width: 15em;
    z-index: 1;
    padding-left: 0;
}

.progress_new_box .progress_container li::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 auto 0.5em;
    background: #ccc;
    border-radius: 50%;
}

.progress_new_box .progress_container li.current {
    color: #27aedf;
    font-weight: 700;
}

.progress_new_box .progress_container li.current::before {
    background: #27aedf;
}

.progress_new_box .progress_container {
    margin: 3.5em 0 3em;
    padding: 0;
    padding: 40px 0 30px;
}

@media screen and (max-width: 768px) {
    .progress_new_box .progress_container {
        margin: 2em -1em;
    }

    .progress_new_box ul::before {
        width: 21em;
    }

    .progress_new_box li {
        width: 7em;
    }
}

.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;
}

.fixing_content .rate-free>label {
    color: #ee0000;
}

.fixing .weeks .rate-free dt {
    color: #ee0000;
}

.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;
}

.italic {
    font-style: italic;
}

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

/* lesson note styles */
.lesson_note_content_box .lesson_note_css {
    background: #ffffff;
    border: 1px solid #c7cad3;
    margin-top: 2px;
}

.lesson_note_content_box .lesson_note_title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
    padding: 10px 15px;
    border-bottom: 1px solid #c7cad3;
}

.lesson_note_content_box .lesson_note_content .lesson_note_field {
    padding: 15px;
    padding-top: 0;
}

.lesson_note_content_box .lesson_note_content .lesson_note_label {
    display: block;
    font-size: 14px;
    color: #222222;
    font-weight: 700;
    margin-bottom: 8px;
}

.lesson_note_content_box .lesson_note_content .lesson_note_input_group {
    position: relative;
}

.lesson_note_content_box .lesson_note_content .lesson_note_input {
    width: 100%;
    height: 32px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 32px;
    color: #000000;
    background: #ffffff;
    border: 1px solid #c7cad3;
    outline: none;
    box-sizing: border-box;
    border-radius: 5px;
}

.lesson_note_content_box .lesson_note_content .lesson_note_input:focus {
    background-color: #fdfdfd;
}

.lesson_note_content_box .lesson_note_content .lesson_note_textarea_group {
    position: relative;
}

.lesson_note_content_box .lesson_note_content .lesson_note_textarea {
    width: 100%;
    min-height: 400px;
    padding: 7px 8px 4px 8px;
    font-size: 13px;
    line-height: 19px;
    color: #000000;
    background: #ffffff;
    border: 1px solid #c7cad3;
    outline: none;
    box-sizing: border-box;
    resize: none;
    border-radius: 5px;
}

.lesson_note_content_box .lesson_note_content .lesson_note_textarea:focus {
    background-color: #fdfdfd;
}

.lesson_note_content_box .lesson_note_content .lesson_note_counter {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 11px;
    color: #999999;
    line-height: 32px;
}

.lesson_note_content_box .lesson_note_content .lesson_note_input_group .lesson_note_counter {
    bottom: -1px;
    right: 8px;
}

.lesson_note_content_box .lesson_note_content .lesson_note_textarea_group .lesson_note_counter {
    bottom: 0;
    right: 8px;
}

.lesson_note_content_box .lesson_note_content .lesson_note_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
    padding-top: 15px;
    border-top: 1px solid #c7cad3;
}

.lesson_note_content_box .lesson_note_content .lesson_note_button {
    min-width: 80px;
    height: 32px;
    padding: 0 15px;
    font-size: 13px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #c7cad3;
    background: #ffffff;
    color: #000000;
    outline: none;
    box-sizing: border-box;
}

.lesson_note_content_box .lesson_note_content .lesson_note_button_cancel {
    background: #f9f9f9;
}

.lesson_note_content_box .lesson_note_content .lesson_note_button_save {
    background: #d82974;
    border-color: #d82974;
    color: #ffffff;
}

.lesson_note_content_box .lesson_note_content .lesson_note_button:hover {
    opacity: 0.9;
}

.lesson_note_content_box .lesson_note_content .lesson_note_button:active {
    opacity: 0.8;
}


.lesson_note_content_box {
    animation: slideInFromRight 0.3s ease-out;
}

.lesson_note_content_box .detail_lesson_note {
    min-height: 300px;
    padding: 15px;
    padding-top: 0;
}

.lesson_note_content_box .detail_lesson_note h2 {
    font-weight: bold;
    font-size: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: justify;
}

.lesson_note_content_box .detail_lesson_note p {
    font-size: 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-top: 5px;
    text-align: justify;
}

.lesson_note_content_box .lesson_note_content .edit_style {
    background: #FFFFFF;
    border: 1px solid #39B4E2;
    color: #39B4E2;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}