@charset "UTF-8";
.nbtn, .obtn, .rbtn,
.submitBtn, .wbtn,
.resetBtn, #content .question_body.group#groupBody div[draggable="true"] button, #content .question_body #zoom_img button.zoombtn,
#content .question_body form.q_input_select button.zoombtn, #content .question_pop button.btn.close, #content .question_body form.q_input_upload .upbtn label, .dropdown .dropdown-menu, .dropdown .dropdown-menu.act, #page-top a, #content .menu-list button {
  transition: .2s ease-in-out;
}

#content .panel {
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

/* ==========================================================================

    Common
    - Base..............................Base style
    - Reset.............................Reset and normalize
    - Universal.........................Helper class
    - Clearfix..........................Reset float

   ========================================================================== */
/* Base
   --------------------------------------------------- */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-style: normal;
}

html {
  height: 100%;
}

body {
  text-align: center;
  position: relative;
  height: 100%;
  color: #333;
  background: #fff;
  cursor: auto;
}

body, select, input, textarea, button {
  font: 14px/1.231 "メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック", Arial,Helvetica, sans-serif;
  *font-size: small;
  /* for IE */
  *font: x-small;
  /* for IE in quirks mode */
  color: #333;
}

select,
input,
textarea {
  font: 99% "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック", Arial,Helvetica, sans-serif;
}

input[type="text"],
input[type="number"],
input[type="password"],
textarea,
select {
  padding: 1px;
  border: 1px solid #aaa;
  font: normal normal 100%/1.5 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
}

small {
  font-size: 85%;
}

button {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  line-height: 1;
  border: none;
  background: none;
  overflow: visible;
  cursor: pointer;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
button:active, button:focus {
  outline: 0;
}

a {
  color: #3a3ae0;
}

a:link, a:visited {
  text-decoration: underline;
  cursor: pointer;
}

a:hover, a:active {
  text-decoration: none;
}

a.dim, a.dim:link, a.dim:visited, a.dim:hover, a.dim:active,
button.dim, button.dim:hover, button.dim:active,
button[disabled] {
  cursor: default !important;
  text-decoration: none;
}

form select,
form input[type="text"],
form input[type="number"],
form input[type="password"],
form textarea {
  padding: 6px;
  border-radius: 6px;
  line-height: 1;
}

form input[type="submit"],
form input[type="button"],
form button {
  padding: 0.5em 2em;
}

label {
  cursor: pointer;
}

em {
  font-weight: bold;
}

strong {
  font-weight: bold;
}

hr {
  display: none;
}

img {
  border: none;
  color: #fff;
  background: transparent;
  vertical-align: bottom;
}

abbr,
acronym {
  cursor: help;
}

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

/* Reset
   --------------------------------------------------- */
fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
th,
var {
  font-style: normal;
  font-weight: normal;
}

li {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: '';
}

abbr,
acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

/*because legend doesn't inherit in IE */
legend {
  color: #000;
}

/* universal
   --------------------------------------------------- */
.lh {
  line-height: 150%;
}

/* text-align */
.aL {
  text-align: left !important;
}

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

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

/* float */
.fR {
  float: right;
}

.fL {
  float: left;
}

/*--link--*/
.ib {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
  white-space: nowrap;
}

.option {
  color: #888;
}

/* clearfix
   --------------------------------------------------- */
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================

    Google Materialdesign styles
    - Icon font
    - Paper elements
    - Ripple effect

   ========================================================================== */
/* Paper elements
   @param .z-depth-**
   --------------------------------------------------- */
.z-depth-0 {
  box-shadow: none !important;
}

.z-depth-1 {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.z-depth-1-half {
  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.z-depth-2, .dropdown .dropdown-menu.act {
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-3 {
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-4 {
  -webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  -moz-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.z-depth-5 {
  -webkit-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
  -moz-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

.hoverable:hover {
  transition: box-shadow .25s;
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Ripple effect
   @param .ripple
   --------------------------------------------------- */
.ripple {
  position: relative;
  overflow: hidden;
}

.ink {
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}
.ink.animate {
  -moz-animation: ripple 0.4s linear;
  -webkit-animation: ripple 0.4s linear;
  animation: ripple 0.4s linear;
}

@-moz-keyframes ripple {
  0% {
    opacity: 1;
    -moz-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-webkit-keyframes ripple {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@keyframes ripple {
  0% {
    opacity: 1;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
  }
}
/* ==========================================================================

    Components
    - Button............................@param .btn / .navbtn button
    - List..............................@param .list-disc / .list-decimal
    - Dropdown..........................@param .dropdown
    - Tabs..............................@param ul.nav-tabs + .cont-tabs
    - Pagination........................@param ul.pagination
    - Form wrapper......................@param .form_input
    - Error.............................@param #errorDialog
    - Loading...........................@param #loading
    - Pagetop...........................@param #page-top

   ========================================================================== */
/* Button
   @param .btn / .navbtn button
   --------------------------------------------------- */
ul.navbtn,
ul.nav {
  letter-spacing: -0.4em;
}
ul.navbtn li,
ul.nav li {
  letter-spacing: normal;
  display: inline-block;
}
ul.navbtn li.hideitem,
ul.nav li.hideitem {
  display: none;
}

ul.nav li {
  margin: 10px 24px 10px 0;
}

.nav,
.navbtn {
  overflow: hidden;
  *zoom: 1;
}

.navbtn a,
.navbtn button {
  display: block;
  float: left;
  padding: 12px 16px;
  background-position: 50% 50%;
  font-size: 108%;
}
.navbtn a {
  min-width: 150px;
  min-height: 26px;
  line-height: 24px;
  text-decoration: none;
}
.navbtn button {
  min-width: 182px;
  min-height: 50px;
  line-height: 24px;
}

ul.navbtn {
  text-align: center;
  vertical-align: middle;
}
ul.navbtn li {
  margin: 0 10px;
}
ul.navbtn li:first-child {
  margin-left: 0;
}
ul.navbtn li:last-child {
  margin-right: 0;
}

.links {
  margin-top: 0;
}

.link {
  margin-right: 1.0rem;
}
.link .m {
  font-size: 18px;
}

button {
  color: #3F7980;
}

.nbtn, .obtn, .rbtn,
.submitBtn, .wbtn,
.resetBtn, #content .question_body.group#groupBody div[draggable="true"] button, #content .question_body #zoom_img button.zoombtn,
#content .question_body form.q_input_select button.zoombtn, #content .question_pop button.btn.close, #content .question_body form.q_input_upload .upbtn label {
  color: #fff;
  text-align: center;
  border-radius: 6px;
}
.nbtn:active, .obtn:active, .rbtn:active,
.submitBtn:active, .wbtn:active,
.resetBtn:active, #content .question_body.group#groupBody div[draggable="true"] button:active, #content .question_body #zoom_img button.zoombtn:active,
#content .question_body form.q_input_select button.zoombtn:active, #content .question_pop button.btn.close:active, #content .question_body form.q_input_upload .upbtn label:active {
  opacity: .8;
}
.nbtn:hover, .obtn:hover, .rbtn:hover,
.submitBtn:hover, .wbtn:hover,
.resetBtn:hover, #content .question_body.group#groupBody div[draggable="true"] button:hover, #content .question_body #zoom_img button.zoombtn:hover,
#content .question_body form.q_input_select button.zoombtn:hover, #content .question_pop button.btn.close:hover, #content .question_body form.q_input_upload .upbtn label:hover {
  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
.dim.nbtn:hover, .dim.obtn:hover, .dim.rbtn:hover,
.dim.submitBtn:hover, .dim.wbtn:hover,
.dim.resetBtn:hover, #content .question_body.group#groupBody div[draggable="true"] button.dim:hover, #content .question_body #zoom_img button.dim.zoombtn:hover,
#content .question_body form.q_input_select button.dim.zoombtn:hover, #content .question_pop button.dim.btn.close:hover, #content .question_body form.q_input_upload .upbtn label.dim:hover {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.nbtn {
  border: 1px solid #00576e;
  background-color: #00576e;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFjNjk3ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNTc2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1c697e), color-stop(100%, #00576e));
  background-image: -moz-linear-gradient(#1c697e, #00576e);
  background-image: -webkit-linear-gradient(#1c697e, #00576e);
  background-image: linear-gradient(#1c697e, #00576e);
}
.nbtn:hover {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNTc2ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFjNjk3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00576e), color-stop(100%, #1c697e));
  background-image: -moz-linear-gradient(#00576e, #1c697e);
  background-image: -webkit-linear-gradient(#00576e, #1c697e);
  background-image: linear-gradient(#00576e, #1c697e);
}
.nbtn.dim:hover {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFjNjk3ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNTc2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1c697e), color-stop(100%, #00576e));
  background-image: -moz-linear-gradient(#1c697e, #00576e);
  background-image: -webkit-linear-gradient(#1c697e, #00576e);
  background-image: linear-gradient(#1c697e, #00576e);
}

.obtn {
  border: 1px solid #259eab;
  background-color: #259eab;
}
.obtn:hover {
  background-color: #29b1c0;
}
.obtn.dim:hover {
  background-color: #259eab;
}

.rbtn,
.submitBtn {
  border: 1px solid #c23a2c;
  background-color: #c23a2c;
}
.rbtn:hover,
.submitBtn:hover {
  background-color: #d14536;
}
.rbtn.dim:hover,
.submitBtn.dim:hover {
  background-color: #c23a2c;
}

.wbtn,
.resetBtn {
  color: #33485E;
  border: 1px solid #ccc;
  background-color: #f6f6f6;
}
.wbtn:hover,
.resetBtn:hover {
  background-color: #fff;
}
.wbtn.dim:hover,
.resetBtn.dim:hover {
  background-color: #fdfdfd;
}

.dim,
button[disabled] {
  color: rgba(255, 255, 255, 0.75) !important;
  opacity: 0.5 !important;
}

/* List
   @param .list-disc / .list-decimal
   --------------------------------------------------- */
.list-disc,
.list-decimal {
  margin: 0 0 0 2em;
  padding: 5px 0;
}
.list-disc li,
.list-decimal li {
  padding: 0 0 5px;
}

.list-disc li {
  list-style: disc;
}

.list-decimal li {
  list-style: decimal;
}

/* Dropdown
   @param .dropdown
   --------------------------------------------------- */
.dropdown {
  position: relative;
}
.dropdown .dropdown-toggle {
  width: 100%;
  height: 100%;
}
.dropdown .dropdown-menu {
  position: absolute;
  top: 40px;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: 5555;
}
.dropdown .dropdown-menu.pull-right {
  left: auto;
  right: 0;
}
.dropdown .dropdown-menu.act {
  min-width: 240px;
  height: auto;
  background: #fff;
  border-radius: 2px;
  overflow: auto;
}
.dropdown .dropdown-menu.act.gutter {
  padding: 1.4em;
}

.dummy {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

/* Tabs
   @param ul.nav-tabs + .cont-tabs
   --------------------------------------------------- */
.nav-tabs {
  display: table;
  width: 100%;
  border-bottom: 1px solid #6FD5E0;
}
.nav-tabs li {
  float: left;
  margin: 0 2px -2px 0;
}
.nav-tabs a {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 4px 4px 0 0;
  color: #6FD5E0;
  text-decoration: none;
}
.nav-tabs a.act {
  cursor: default;
  background: #fff;
  border: 1px solid #6FD5E0;
  border-bottom-color: transparent;
  color: #333;
}
.nav-tabs a:hover {
  background: #EEF9F7;
}

.cont-tabs {
  padding: 25px 15px 15px;
}

/* Pagination
   @param ul.pagination
   --------------------------------------------------- */
.pagination {
  margin: 2em 0;
  text-align: center;
}
.pagination li {
  display: inline-block;
  margin: 0 2px;
}
.pagination button {
  width: 30px;
  height: 30px;
  border: 1px solid #cec4b4;
  border-radius: 2px;
  color: #666;
  vertical-align: middle;
}
.pagination button i {
  font-size: 16px;
  line-height: normal;
}
.pagination button.act {
  border-color: #b4a58c;
  background: #cec4b4;
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* Form wrapper
   @param .form_input
   --------------------------------------------------- */
.form_error {
  color: #f00;
  margin: 0 0 1em 0;
  padding: 0;
}

.form_input {
  padding: 15px 20px 20px;
  border-radius: 6px;
  background: #EEF9F7;
}
.form_input label {
  display: inline-block;
  width: 8em;
  /*max userinfo*/
  text-align: right;
  margin-right: 12px;
}
.form_input #form_login label,
.form_input #form_reminder label {
  display: none;
}
.form_input ul.inputs li {
  margin: 12px 0;
}
.form_input ul.inputs li input {
  width: 290px;
  border-radius: 6px;
  padding: 12px 6px;
}
.form_input ul.inputs.grp li {
  margin: 6px 0;
}
.form_input ul.navbtn li {
  margin: 0 10px;
}

/* Error
   @param #errorDialog
   --------------------------------------------------- */
#errorDialog {
  width: 440px;
  background: #fff;
  margin: 200px auto 0;
  box-shadow: 0px 4px 32px black;
}
#errorDialog .err_msg {
  padding: 2em 2em;
  line-height: 1.75;
  text-align: left;
  min-height: 4em;
}
#errorDialog .navbtn {
  padding: 18px 12px;
}
#errorDialog .navbtn li {
  margin: 0 12px;
}

/* Pagetop
   @param #page-top
   --------------------------------------------------- */
#page-top {
  position: fixed;
  bottom: -100px;
  right: 4%;
  z-index: 5555;
}
#page-top a {
  position: relative;
  display: table-cell;
  width: 40px;
  height: 40px;
  background: rgba(0, 87, 110, 0.8);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
}
#page-top a:hover {
  background: #00576e;
}

/*----------------------------------------------------------------- MAIN LAYOUT */
#header {
  width: auto;
  min-height: 40px;
  border-bottom: 1px solid #5acfdb;
  background: #6FD5E0;
  color: #0e3d42;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);
}

#container {
  min-width: 960px;
  min-height: 625px;
}
#container .inview {
  text-align: left;
}
#container .inview,
#container .default_view {
  width: 960px;
  padding: 0 15px;
  margin: 0 auto !important;
}

#content {
  min-width: 960px;
}
#content .inview,
#content .default_view {
  min-height: 560px;
  padding-top: 1px;
}
#content .inview {
  position: relative;
}
#content .default_view {
  display: none;
}

#footer {
  margin: 2em 0 1em;
}

#lock {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #999;
  opacity: 0;
  display: none;
}
#lock.lock {
  opacity: 0;
}

#dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/*----------------------------------------------------------------- HEADER */
#header {
  -moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
}
#header #logoSystem {
  float: left;
  width: 470px;
  height: 40px;
  background: url(../ref/img/logo_header2.png) no-repeat left 50%;
}
#header nav {
  float: right;
  *zoom: 1;
}
#header nav:after {
  content: "";
  display: table;
  clear: both;
}
#header nav div[id^="h-"] {
  float: left;
  display: inline-block;
  position: relative;
}
#header nav div[id^="h-"] button.ripple,
#header nav div[id^="h-"] button.dropdown-toggle {
  width: 40px;
  height: 40px;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
#header nav div[id^="h-"] button.ripple.act,
#header nav div[id^="h-"] button.dropdown-toggle.act {
  background: rgba(0, 0, 0, 0.25);
}
#header nav div[id^="h-"] .new {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff1744;
}
#header nav div#h-page-buttons button {
  padding: 7px;
  margin-top: 5px;
  margin-right: 2px;
  font-size: 13px;
}
#header .dropdown-menu #userInfo {
  margin: .8em 0 0;
  padding: 0 0 .8em;
  border-bottom: 1px solid #eee;
}
#header .dropdown-menu #userInfo .loginMsg {
  display: table-cell;
  padding: .8em 1em 1em;
  color: #555;
  font-size: 11px;
}
#header .dropdown-menu #userInfo .loginMsg i {
  font-size: 18px;
  line-height: normal;
  vertical-align: text-bottom;
}
#header .dropdown-menu #fontresize {
  border-bottom: 1px solid #eee;
}
#header .dropdown-menu #otherMenu {
  margin: .8em 0;
}
#header .dropdown-menu .horizontal {
  width: 100%;
  display: table;
  table-layout: fixed;
}
#header .dropdown-menu .horizontal li {
  display: table-cell;
}
#header .dropdown-menu .horizontal li:nth-child(2) {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
#header .dropdown-menu .horizontal button {
  padding: 14px 8px;
  text-align: center;
}
#header .dropdown-menu .horizontal button.current {
  background: #eee;
  font-weight: bold;
}
#header .dropdown-menu button {
  display: inline-block;
  width: 100%;
  padding: 1em;
  text-align: left;
}
#header .dropdown-menu button:hover {
  background: #eee;
}

/*----------------------------------------------------------------- CONTENT */
#content {
  /* HEADLINE */
  /* location */
  /* HEADER GROUP */
  /* PARAGRAPH */
  /* CHECK MARK LIST */
}
#content h1 {
  line-height: 47px;
  margin: 20px 0 30px;
  padding: 0;
  font-weight: bold;
  font-size: 123.1%;
  line-height: 40px;
  color: #259eab;
}
#content h1 .ico {
  display: inline-block;
  border-radius: 50%;
  background: #259eab;
  margin-right: 8px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
#content h1 .ico .m {
  font-size: 24px;
}
#content h2 {
  margin: 20px 0 10px;
  font-weight: bold;
  font-size: 108%;
}
#content h3 {
  margin: 20px 0 10px;
  font-weight: bold;
  font-size: 100%;
  color: #333;
  /*border-radius: 2px;
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, .05) inset;
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  border-right: 1px solid rgba(255, 255, 255, .8);
  font-size:108%;*/
}
#content h3:before {
  display: inline-block;
  content: "―";
  color: #ccc;
  margin-right: 0.25rem;
}
#content .qstep {
  display: inline-block;
  color: #259eab;
}
#content .qstep .divid:before {
  display: inline-block;
  content: "/";
  opacity: 0.5;
  margin: 0 1px;
}
#content #location {
  overflow: hidden;
  *zoom: 1;
  padding: 10px 0 0 6px;
}
#content #location .label,
#content #location .qstep {
  display: inline-block;
  font-size: 12px;
  padding: 0 4px;
  line-height: 1.5;
}
#content #location .label {
  margin-right: 3px;
}
#content #location .back {
  display: inline-block;
  background: #259eab;
  border-radius: 50%;
  color: #fff;
}
#content #location .mainloc {
  color: #6FD5E0;
}
#content #location .mainloc i {
  line-height: normal;
  font-size: 22px;
}
#content #location .mainloc .action {
  color: #fff;
  text-decoration: none;
}
#content #location .mainloc .divid:before {
  display: inline-block;
  content: "/";
  opacity: 0.5;
  margin: 0 2px;
}
#content .hgroup {
  position: relative;
  height: 50px;
  margin: 30px 0 0 0;
  border-bottom: 1px dotted #6FD5E0;
}
#content .hgroup h1 {
  display: inline-block;
  font-weight: bold;
  font-size: 108%;
  margin: 8px 0 0;
  padding: 0;
  line-height: 40px;
}
#content .hgroup h1 .ico {
  background: none;
  color: #259eab;
  margin-right: 0;
}
#content .hgroup h1 .group {
  font-size: 108%;
}
#content .hgroup h1 .part {
  font-size: 108%;
}
#content .hgroup .h_elem {
  position: absolute;
  top: 22px;
  right: 0;
  line-height: 16px;
}
#content .hgroup .h_elem i {
  font-size: 16px;
  margin-right: 2px;
}
#content .hgroup .progress {
  display: block;
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 4px;
  background: #ddd;
}
#content .hgroup .progress .progress-bar {
  display: block;
  height: 100%;
  background: #6FD5E0;
}
#content .hgroup .attention_box {
  position: absolute;
  right: 0px;
  bottom: 40px;
}
@-moz-keyframes slideup {
  0% {
    bottom: 0px;
    opacity: 0;
  }
  75% {
    bottom: 45px;
  }
  100% {
    bottom: 40px;
    opacity: 1;
  }
}
@-webkit-keyframes slideup {
  0% {
    bottom: 0px;
    opacity: 0;
  }
  75% {
    bottom: 45px;
  }
  100% {
    bottom: 40px;
    opacity: 1;
  }
}
@keyframes slideup {
  0% {
    bottom: 0px;
    opacity: 0;
  }
  75% {
    bottom: 45px;
  }
  100% {
    bottom: 40px;
    opacity: 1;
  }
}
@-moz-keyframes slidedown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes slidedown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slidedown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#content .hgroup .attention_box.hide {
  animation-name: slidedown;
  animation-duration: 600ms;
  animation-timing-function: ease;
  opacity: 0;
}
#content .hgroup .attention_box.show {
  animation-name: slideup, slidedown;
  animation-duration: 400ms, 600ms;
  animation-delay: 0s, 5s;
  animation-timing-function: ease, ease;
  animation-direction: normal, normal;
  animation-fill-mode: forwards;
  opacity: 1;
}
#content .hgroup .attention_box span {
  display: inline-block;
  position: relative;
  padding: .5rem 1rem;
  background: #259eab;
  color: #fff;
  font-size: 90%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
#content .hgroup .attention_box span:after {
  position: absolute;
  bottom: -7px;
  right: 15px;
  content: " ";
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: #259eab;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#content p {
  margin: 1em 0;
  line-height: 1.5;
}
#content p.form_input,
#content p.form_error {
  padding: 0;
  line-height: normal;
}
#content .attention {
  color: #f00;
}
#content .desc {
  margin-top: 2em;
}
#content ul.checkList {
  padding: 0 10px;
}
#content ul.checkList li {
  margin: 0 0 .5em;
  position: relative;
  padding-left: 20px;
  line-height: 18px;
}
#content ul.checkList li .m {
  position: absolute;
  font-size: 18px;
  top: 0;
  left: 0;
}
#content .wrapCol {
  font-size: 0;
}
#content .wrapCol .leftCol,
#content .wrapCol .rightCol {
  display: inline-block;
  width: 450px;
  vertical-align: top;
  font-size: 14px;
}
#content .wrapCol > div:nth-of-type(1) {
  margin-right: 24px;
}
#content .panel {
  width: auto;
  position: relative;
  margin: 40px auto 0;
  background: #fff;
  border: 1px solid #6FD5E0;
}
#content .panel h1 {
  padding: 12px 0;
  font-size: 123.1%;
  /*16*/
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #eee;
}
#content .panel .panelin {
  overflow: hidden;
  *zoom: 1;
  line-height: 1.75;
  padding: 24px 24px;
}
#content .panel .panelin > ul.navbtn {
  margin-top: 24px;
}
#content .panel ul.nav li {
  margin-top: 0;
  margin-bottom: 0;
}
#content .panel .scroll {
  padding: 1em 1.5em;
  height: 300px;
  border: 1px solid #cee;
}
#content .sd {
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
}
#content .scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#content .scroll::-webkit-scrollbar {
  width: 8px;
}
#content .scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  padding: 0px;
}
#content .scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#content .scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/*== transition
 ===================================================*/
#content {
  transition-property: opacity;
  transition-duration: 1s;
  transition-delay: 0s;
}

div.trigger {
  /*animation-name: none
  animation-duration: 0s
  animation-timing-function: ease
  animation-delay: 0s
  animation-iteration-count: 1
  animation-direction: normal
  animation-fill-mode: none*/
  /*-webkit-animation:anime1 2s ease 0 1 normal;*/
  transition-property: opacity;
  transition-duration: 1s;
  transition-delay: 0s;
  opacity: 0.0;
}

@-webkit-keyframes anime1 {
  0% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
  }
}
/*----------------------------------------------------------------- MENU */
#content .menu-list button:active {
  opacity: .8;
}
#content .menu-list button:hover {
  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
#content .menu-list button.dim:hover {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#content .menu-list button {
  display: block;
  position: relative;
  padding: 1.5em 5.5em 1.5em 46px;
  margin: 1em 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #6FD5E0;
  text-align: left;
}
#content .menu-list button i.m {
  display: inline-block;
  position: absolute;
  height: 24px;
  line-height: 24px;
  margin-top: -12px;
  top: 50%;
  left: 12px;
  color: #6FD5E0;
}
#content .menu-list button.done i.m {
  color: #ff0000;
}
#content .menu-list button .label {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 15px;
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: .5rem .6rem;
  background: #259eab;
  border-radius: 16px;
  color: #fff;
  font-size: 90% !important;
  text-align: center;
}
#content .menu-list button .label.label-done {
  background: #f00;
}
#content .menu-list.course-menu button {
  border-color: #6FD5E0;
  background-color: #6FD5E0;
  color: #fff;
  font-size: 108%;
}
#content .menu-list.course-menu button i.m {
  color: #EEF9F7;
}
#content .menu-list.lesson-menu button {
  border-width: 1px 1px 1px 12px;
}

#content .menu-back {
  text-align: left;
  margin-top: 2em;
}
#content .menu-back a, #content .menu-back button {
  font-size: 90%;
  min-width: auto;
  min-height: auto;
  line-height: 1;
}

#dialog .panel {
  background: #fff;
  width: 440px;
  margin: 200px auto 0;
  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.5);
  /*border:5px solid #33485E;*/
}
#dialog .panel .dialog-body {
  padding: 2em 2em;
  line-height: 1.75;
  text-align: left;
  min-height: 4em;
}
#dialog .panel .navbtn {
  padding: 18px 12px;
}
#dialog .panel .navbtn li {
  margin: 0 12px;
}

#loading {
  width: 36px;
  height: 36px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 50%;
  border: 8px solid #6FD5E0;
  border-right-color: transparent;
  -moz-animation: loading-spin 1s linear infinite;
  -webkit-animation: loading-spin 1s linear infinite;
  animation: loading-spin 1s linear infinite;
}

@-moz-keyframes loading-spin {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 1.0;
  }
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 0.2;
  }
}
@-webkit-keyframes loading-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 1.0;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 0.2;
  }
}
@keyframes loading-spin {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 1.0;
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 0.2;
  }
}
body.default {
  background: #6FD5E0;
}
body.default #header {
  display: none;
}
body.default .loginLogo {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  width: 100%;
  height: 480px;
  background: #EEF9F7 url(../ref/img/logo_login.png) no-repeat 50% 50%;
}
body.default #content .panel .panelin {
  padding: 24px 48px;
}
body.default #content .default_view {
  display: block;
}
body.default #content #loading {
  position: absolute;
  bottom: 70px;
  left: 50%;
}

body.login {
  background: #6FD5E0;
}
body.login #header {
  display: none;
}
body.login #content .panel {
  width: auto;
  height: 480px;
  display: table;
}
body.login #content .panel .panelin {
  padding: 24px 48px;
}
body.login .loginLogo {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  display: table-cell;
  width: 350px;
  background: #EEF9F7 url(../ref/img/logo_login.png) no-repeat 50% 50%;
}
body.login .loginLogo h1 {
  visibility: hidden;
}
body.login #loginPanel {
  display: table-cell;
  width: 580px;
  padding: 44px 0 0;
}
body.login #loginPanel p {
  line-height: 1.75;
}
body.login #loginPanel .nav {
  text-align: center;
}
body.login .form_input {
  padding: 20px 28px;
  margin: 1em 0 0;
}
body.login .form_input input#frm_loginid,
body.login .form_input input#frm_pswd {
  width: 362px;
  padding: 12px 6px 12px 54px;
  font-size: 15px;
  background: #fff no-repeat 0 50%;
}
body.login .form_input input#frm_loginid {
  background-image: url(../ref/img/fm_ico_id.png);
}
body.login .form_input input#frm_pswd {
  background-image: url(../ref/img/fm_ico_pwd.png);
}
body.login .form_input ul.inputs input {
  width: 290px;
}
body.login .form_input .navbtn {
  margin-top: 30px;
}
body.login .form_input .navbtn button {
  width: 422px;
  padding: 12px 0;
  font-size: 14px;
}

body.reminder #content .inview h2:nth-of-type(2) {
  margin-top: 70px;
}
body.reminder #form_reminder .inputs {
  display: inline-block;
}
body.reminder #form_reminder .navbtn {
  display: inline-block;
  margin: 0 0 0 1em;
  width: auto;
}
body.reminder #form_reminder .navbtn li {
  margin: 0 5px;
}

body.userinfo #form_userinfo .inputs {
  padding: 0 10px;
}
body.userinfo #form_userinfo .inputs input {
  width: 400px;
}
body.userinfo #form_userinfo label {
  width: 10em;
}
body.userinfo #form_userinfo .navbtn {
  margin-top: 30px;
}

body.qa .qa-wrap {
  margin: 0 0 10px;
  background: #fff;
  padding: 15px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
body.qa .qa-q h2 {
  margin: 0;
}
body.qa .qa-q h2:before {
  display: inline-block;
  content: 'Q';
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-weight: normal;
  width: 18px;
  height: 18px;
  line-height: 18px;
  margin: 0 8px 0 0;
  background: #73c6e4;
  border-radius: 2px;
  color: #fff;
  text-align: center;
  text-shadow: none;
}
body.qa .qa-a {
  display: none;
  margin: 15px 0 0;
  padding: 15px 20px;
  background: #f2f3f4;
  border-radius: 2px;
  color: #6c6d6e;
}
body.qa .qa-a.act {
  display: block;
}
body.qa #content .qa-a p {
  padding: 10px 0 0;
}

body.certificate {
  background: #6FD5E0;
}
body.certificate #header {
  display: none;
}
body.certificate #content .panel .panelin {
  padding: 24px 48px;
  width: 100%;
  min-height: 480px;
}

.cf-block__title {
  font-size: 150% !important;
  padding: 0;
}
.cf-block__content {
  text-align: center;
}
.cf-block__loginId {
  font-size: 10px;
  text-align: right;
}
.cf-block__nickName {
  border-bottom: 1px solid #999;
  display: inline-block;
  font-size: 123.1%;
  line-height: 1;
  margin-bottom: 1.5em;
  padding: 4px;
}
.cf-block__nickName__name {
  font-size: 150%;
}
.cf-block__result {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 8px 12px;
  margin: 1.5em 0;
}
.cf-block__result__question {
  display: inline-block;
  font-weight: bold;
  margin: 0 4px;
}
.cf-block__result__correct {
  display: inline-block;
  font-weight: bold;
  margin: 0 4px;
}
.cf-block__footer {
  text-align: right;
}
.cf-block__footer__date {
  font-size: 11px;
}
.cf-block__footer__presenter {
  font-size: 13px;
}

body.help .wrapCol #help-nav.leftCol {
  width: 200px;
  margin-right: 48px;
  border: 1px solid #6FD5E0;
}
body.help .wrapCol #help-nav.leftCol a {
  display: block;
  padding: 15px 20px;
  color: #3F7980;
  background: #EEF9F7;
  text-decoration: none;
}
body.help .wrapCol #help-nav.leftCol a:hover {
  background: #D1EFE9;
}
body.help .wrapCol #help-nav.leftCol li:not(:last-child) {
  border-bottom: 1px solid #6FD5E0;
}
body.help .wrapCol #help-cont.rightCol {
  width: 680px;
}
body.help .wrapCol #help-cont.rightCol h2:first-child {
  margin-top: 5px;
}

body.notice #content .wrapCol h2 {
  background: url(../ref/img/os.png) no-repeat 50% 0;
  margin: 30px 0;
  padding: 90px 0 20px;
  text-align: center;
  border-bottom: 1px solid #c4bfbc;
}
body.notice #content .rightCol h2 {
  background: url(../ref/img/browser.png) no-repeat 50% 0;
}

/*== question head ===================================================*/
#content .question_body.group#groupBody div[draggable="true"] button, #content .question_body #zoom_img button.zoombtn,
#content .question_body form.q_input_select button.zoombtn, #content .question_pop button.btn.close {
  background: #259eab no-repeat 50% 50%;
  color: white;
  border-radius: 3px;
}

#content .question_body.sort #sortBody, #content .question_body.group#groupBody #qBody, #content .question_body.group#groupBody #qInput table.groups td, #content .question_body .input {
  background-color: #EEF9F7;
  border: 1px solid #6FD5E0;
}

#content .question_body #qBody_before,
#content .question_body #qBody {
  background-color: #fff;
  border: 1px solid #6FD5E0;
}

#content .question_desc button {
  padding: 8px;
}

/*== common =================================================*/
/*== header =================================================*/
body.page #header div#h-news,
body.page #header div#h-dashboard,
body.question #header div#h-news,
body.question #header div#h-dashboard,
body.enquete #header div#h-news,
body.enquete #header div#h-dashboard,
body.enquete_cnf #header div#h-news,
body.enquete_cnf #header div#h-dashboard,
body.enquete_done #header div#h-news,
body.enquete_done #header div#h-dashboard,
body.judgment #header div#h-news,
body.judgment #header div#h-dashboard,
body.finished #header div#h-news,
body.finished #header div#h-dashboard {
  display: none;
}
body.page #location .label,
body.question #location .label,
body.enquete #location .label,
body.enquete_cnf #location .label,
body.enquete_done #location .label,
body.judgment #location .label,
body.finished #location .label {
  float: left;
}
body.page #location .qstep,
body.question #location .qstep,
body.enquete #location .qstep,
body.enquete_cnf #location .qstep,
body.enquete_done #location .qstep,
body.judgment #location .qstep,
body.finished #location .qstep {
  float: right;
}

/*== sub pane ===================================================*/
/*
#content{

	.sub_pane{
		display: inline-block;
		position:absolute;
		right:15px;
		top:6px;

		button{
			@extend %ui_sub_btn;
		}

		.qstep{
			padding:12px 12px;
		}
	}
	.sub_foot{
		display:none;
	}

}
*/
/*== discript ===================================================*/
#content .question_desc {
  overflow: hidden;
  *zoom: 1;
  padding: 1em 0;
}
#content .question_desc p {
  line-height: 1.5;
  margin: 0 0 0;
  width: 930px;
}
#content .question_desc button {
  float: right;
  margin: -4px 0 -4px 0.5rem;
}

/*== Q BLOCK ===================================================*/
#content .question_body {
  overflow: hidden;
  *zoom: 1;
  position: relative;
}
#content .question_body #qBody_before,
#content .question_body #qBody {
  box-sizing: border-box;
  position: relative;
  float: left;
  width: 602px;
  height: 452px;
}
#content .question_body #qInput_before,
#content .question_body #qInput {
  position: relative;
  float: right;
  width: 310px;
  height: 452px;
}
#content .question_body #qBody_before,
#content .question_body #qInput_before {
  display: none;
}
#content .question_body.step #qBody,
#content .question_body.step #qInput {
  display: none;
}
#content .question_body.step #qBody_before,
#content .question_body.step #qInput_before {
  display: block;
}
#content .question_body.sort #qBody {
  display: none;
}
#content .question_body.sort #qInput {
  float: none;
  width: auto;
}
#content .question_body.remain #qBody {
  width: 310px;
}
#content .question_body.remain #qInput {
  width: 602px;
}
#content .question_body.study #qBody {
  width: 802px;
}
#content .question_body.study #qInput {
  width: 110px;
  position: relative;
}
#content .question_body.study #qInput .input {
  display: none;
}
#content .question_body.study #qInput .next_q_btn {
  position: absolute;
  bottom: 0;
  width: 100%;
}

/*== body ======================================================================*/
.q_explain {
  line-height: 1.75;
  padding: 15px;
  word-wrap: break-word;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.q_explain::-webkit-scrollbar {
  width: 8px;
}
.q_explain::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  padding: 0px;
}
.q_explain::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.q_explain::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
.q_explain h2 {
  font-size: 108%;
  line-height: 40px;
  font-weight: bold;
  margin: 0 !important;
}
.q_explain h3 {
  font-size: 100%;
  line-height: 40px;
  margin: 0 !important;
}
.q_explain hr {
  display: block;
  border-color: #EEF9F7;
  border-style: solid;
  border-width: 0 0 1px 0;
  margin: 1em 0;
}

/*-- basic contents --*/
#content .question_body .text {
  display: block;
  margin: 0 0 1em 0;
}
#content .question_body .image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
#content .question_body .movie {
  width: 100%;
  height: 100%;
  background: #EEF9F7;
}
#content .question_body .movie video {
  display: block;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}
#content .question_body #qBody .q_explain {
  height: 450px;
}

/*-- pages --*/
#content .question_body ul.pages {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  height: 402px;
  border-bottom: 1px solid #6FD5E0;
}
#content .question_body ul.pages::-webkit-scrollbar {
  width: 8px;
}
#content .question_body ul.pages::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  padding: 0px;
}
#content .question_body ul.pages::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#content .question_body ul.pages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
#content .question_body ul.pages li {
  line-height: 1.75;
  padding: 15px;
  display: block;
  word-break: break-all;
  word-break: break-word;
}
#content .question_body ul.pages li.hide {
  display: none;
}
#content .question_body ul.pages p {
  margin-top: 0;
}
#content .question_body ul.page_ctrl {
  float: right;
  height: 46px;
  white-space: nowrap;
  margin-right: 1px;
  vertical-align: middle;
}
#content .question_body ul.page_ctrl li {
  margin: 0;
}
#content .question_body ul.page_ctrl button {
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  margin: 0;
  border-radius: 0px;
  background-position: 0 0;
  background-color: transparent;
  color: #259eab;
}
#content .question_body ul.page_ctrl .pagenum {
  float: left;
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
}
#content .question_body ul.page_ctrl .dim {
  cursor: default;
}

/*-- material --*/
#content .question_body .material p,
#content .question_body .material ul {
  margin-bottom: 1em;
}
#content .question_body .material ul li {
  margin: 0 0 10px 0;
}
#content .question_body .material button,
#content .question_body .material a.fileBtn {
  padding: 12px;
  line-height: 24px;
  background-color: #fff;
  border-radius: 6px;
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

/*-- sort ------------------------*/
#content .question_body.sort #sortBody {
  position: relative;
  min-height: 402px;
}
#content .question_body.sort #sortBody .unit0 {
  width: 100%;
}
#content .question_body.sort #sortBody .unit1 {
  float: left;
  width: 50%;
}
#content .question_body.sort #sortBody .unit2 {
  float: right;
  width: 50%;
}
#content .question_body.sort #sortBody .unit_base {
  padding: 1px 3px 0;
}
#content .question_body.sort #sortBody .unit_base ul li {
  border-radius: 4px;
  border-radius: 4px;
  background: #D1EFE9;
  font-weight: bold;
  color: #259eab;
  padding: 0px 6px 0px 12px;
  margin: 6px 2px;
  height: 70px;
  line-height: 70px;
}
#content .question_body.sort #sortBody div[draggable="true"] {
  cursor: move;
  background: #fff url(../ref/img/hd_drag.png) no-repeat 6px 50%;
  border-radius: 4px;
  border: 1px solid #6FD5E0;
  width: 404px;
  height: 52px;
  position: absolute;
  top: 0px;
  left: 10px;
}
#content .question_body.sort #sortBody div[draggable="true"] p {
  padding: 6px 12px 6px 32px;
  margin: 0;
  line-height: 20px;
  font-size: 13px;
  width: 100%;
  height: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

/*-- group ------------------------*/
#content .question_body.group#groupBody {
  background: url(../ref/img/label_drag.png) no-repeat 300px 150px;
}
#content .question_body.group#groupBody #qBody {
  width: 284px;
  height: 406px;
  border-radius: 4px;
}
#content .question_body.group#groupBody #qInput {
  position: static;
  width: 563px;
}
#content .question_body.group#groupBody #qInput table.groups {
  width: 100%;
  margin-bottom: 0;
}
#content .question_body.group#groupBody #qInput table.groups td {
  vertical-align: middle;
  text-align: center;
  width: 50%;
  height: 402px;
}
#content .question_body.group#groupBody #qInput table.groups td.hilite {
  background-color: #D1EFE9;
}
#content .question_body.group#groupBody #qInput table.groups .grpname {
  display: inline-block;
  font-weight: bold;
  color: #259eab;
  text-align: center;
  line-height: 2em;
  font-size: 153.9%;
}
#content .question_body.group#groupBody div[draggable="true"] {
  cursor: move;
  background: #fff url(../ref/img/hd_drag.png) no-repeat 6px 50%;
  border-radius: 4px;
  border: 1px solid #6FD5E0;
  padding: 0px 0px 0px 0;
  width: 270px;
  height: 36px;
  position: absolute;
  top: 0px;
  left: 10px;
}
#content .question_body.group#groupBody div[draggable="true"] p {
  padding: 6px 0px 6px 32px;
  margin: 0;
  line-height: 24px;
  width: 214px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
#content .question_body.group#groupBody div[draggable="true"] button {
  display: block;
  padding: 2px 10px;
  margin: 5px 6px;
  font-size: 11px;
  height: 24px;
  line-height: 20px;
  position: absolute;
  top: 0;
  right: 0;
}

/*---- drag ----*/
div.is-dragging {
  background-color: #f6f6f6;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}

div.drag_absorb {
  transition-property: top, left;
  transition-duration: 0.25s;
  transition-delay: 0s;
  -webkit-transition-property: top, left;
  -webkit-transition-duration: 0.25s;
  -webkit-transition-delay: 0s;
  -moz-transition-property: top, left;
  -moz-transition-duration: 0.25s;
  -moz-transition-delay: 0s;
}

/*== input ======================================================================*/
#content .question_body {
  /*--answer select --*/
  /*--answer text --*/
  /*--answer memo --*/
  /*--answer upload --*/
}
#content .question_body .input {
  height: 402px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#content .question_body .input::-webkit-scrollbar {
  width: 8px;
}
#content .question_body .input::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  padding: 0px;
}
#content .question_body .input::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#content .question_body .input::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
#content .question_body form.q_input_select label {
  display: block;
  position: relative;
  padding: 16px 12px 16px 36px;
  border-bottom: 1px solid #6FD5E0;
}
#content .question_body form.q_input_select label .on,
#content .question_body form.q_input_select label .off {
  display: none;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 10px;
  color: #259eab;
}
#content .question_body form.q_input_select input[type="radio"],
#content .question_body form.q_input_select input[type="checkbox"] {
  display: none;
}
#content .question_body form.q_input_select input[type="radio"] + label .off {
  display: block;
}
#content .question_body form.q_input_select input[type="radio"]:checked + label {
  background-color: #D1EFE9;
}
#content .question_body form.q_input_select input[type="radio"]:checked + label .on {
  display: block;
}
#content .question_body form.q_input_select input[type="radio"]:checked + label .off {
  display: none;
}
#content .question_body form.q_input_select input[type="checkbox"] + label .off {
  display: block;
}
#content .question_body form.q_input_select input[type="checkbox"]:checked + label {
  background-color: #D1EFE9;
}
#content .question_body form.q_input_select input[type="checkbox"]:checked + label .on {
  display: block;
}
#content .question_body form.q_input_select input[type="checkbox"]:checked + label .off {
  display: none;
}
#content .question_body form.q_input_select ul.img_select label {
  display: block;
  padding: 8px 0;
  border-radius: 3px;
  margin: 0;
  background-position: 10px 50%;
  text-align: center;
}
#content .question_body form.q_input_select ul.img_select label img.small {
  max-width: 75%;
}
#content .question_body form.q_input_select ul.img_select label img.large {
  display: none;
}
#content .question_body form.q_input_select ul.img_select li {
  position: relative;
}
#content .question_body #zoom_img button.zoombtn,
#content .question_body form.q_input_select button.zoombtn {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  width: 46px;
  height: 46px;
  padding: 0;
  position: absolute;
}
#content .question_body form.q_input_select button.zoombtn {
  background-image: url(../ref/img/ico_zoom_in.png);
  right: 6px;
  bottom: 6px;
}
#content .question_body #zoom_img button.zoombtn {
  background-image: url(../ref/img/ico_zoom_out.png);
  right: 6px;
  bottom: 6px;
}
#content .question_body #zoom_img {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: #fff;
  cursor: pointer;
}
#content .question_body form.q_input_text {
  padding: 12px;
}
#content .question_body form.q_input_text li {
  margin-bottom: 6px;
}
#content .question_body form.q_input_text label {
  display: block;
  padding: 6px 0px;
}
#content .question_body form.q_input_text input {
  box-sizing: border-box;
  width: 100%;
}
#content .question_body form.q_input_memo {
  padding: 12px;
}
#content .question_body form.q_input_memo label {
  display: block;
  padding: 6px 0px;
  text-align: center;
}
#content .question_body form.q_input_memo textarea {
  box-sizing: border-box;
  width: 100%;
  height: 260px;
  line-height: 1.5;
}
#content .question_body form.q_input_upload {
  padding: 12px;
}
#content .question_body form.q_input_upload .target-file {
  margin-bottom: 12px;
  /* batch */
}
#content .question_body form.q_input_upload .target-file .label {
  display: block;
  padding: 6px 0px;
}
#content .question_body form.q_input_upload .target-file .filename {
  display: inline-block;
  font-size: 11px;
}
#content .question_body form.q_input_upload .target-file .ic {
  font-size: 11px;
  margin: 0 6px 0 0;
  padding: 4px 10px;
  border-radius: 12px;
  background: #a9a9a9;
  color: #fff;
  display: inline-block;
}
#content .question_body form.q_input_upload .target-file .ic.select {
  background: #ff5050;
  color: #fff;
}
#content .question_body form.q_input_upload .upbtn label {
  display: block;
  line-height: 1.5;
  color: #33485E;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 12px 16px;
}
#content .question_body form.q_input_upload .upbtn label:hover {
  background-color: #fff;
}
#content .question_body form.q_input_upload .upbtn label.dim:hover {
  background-color: #fdfdfd;
}

/* remain layout */
#content .question_body.remain form.q_input_select ul.img_select {
  overflow: hidden;
  *zoom: 1;
}
#content .question_body.remain form.q_input_select ul.img_select label {
  padding: 24px 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
  width: 100%;
}
#content .question_body.remain form.q_input_select ul.img_select label img.small {
  display: inline;
  width: 184px;
}
#content .question_body.remain form.q_input_select ul.img_select li {
  float: left;
  width: 50%;
}
#content .question_body.remain form.q_input_select button.zoombtn {
  right: 6px;
  bottom: 6px;
}
#content .question_body.remain #zoom_img {
  position: relative;
}

/*
form.q_input_select input[type="radio"]+label:active,
form.q_input_select input[type="radio"]:checked+label:active{
	background:url(../img/q_radio_0.png) no-repeat 10px 50%;
}
*/
/*== judge ======================================================================*/
#content .question_body {
  /*-- buttons --*/
}
#content .question_body .judge_result {
  display: block;
  background: #EEF9F7;
  border: 1px solid #6FD5E0;
  margin-bottom: 10px;
}
#content .question_body .judge_result .correct,
#content .question_body .judge_result .incorrect {
  height: 394px;
  text-align: center;
}
#content .question_body .judge_result .correct .m,
#content .question_body .judge_result .incorrect .m {
  display: block;
  font-size: 230px;
  margin: 0 auto;
}
#content .question_body .judge_result .correct .txt,
#content .question_body .judge_result .incorrect .txt {
  display: block;
  padding: 2.8em 0 0;
  font-size: 180%;
  letter-spacing: 1em;
  margin-left: 1em;
}
#content .question_body .judge_result .correct .m,
#content .question_body .judge_result .correct .txt {
  color: #ff283e;
}
#content .question_body .judge_result .incorrect .m,
#content .question_body .judge_result .incorrect .txt {
  color: #0071bc;
}
#content .question_body .judge_btn button {
  display: block;
  height: 48px;
  width: 100%;
  font-size: 123.1%;
  letter-spacing: 1em;
  border-radius: 0px 0px 6px 6px;
}
#content .question_body .judge_btn button:first-letter {
  margin-left: 1em;
}
#content .question_body .judge_btn button:hover {
  text-decoration: none;
}
#content .question_body .judge_btn .m {
  font-size: 20px;
}
#content .question_body .next_q_btn button,
#content .question_body .show_q_btn button {
  display: block;
  width: 100%;
}
#content .question_body .show_q_btn button {
  height: 46px;
  border-radius: 0px 0px 6px 6px;
}
#content .question_body .next_q_btn button {
  height: 46px;
}

/*== help =================================================*/
body.question #content .help {
  display: block;
  position: absolute;
  top: 110px;
  right: 12px;
  width: 24px;
  height: 24px;
  padding: 6px;
}

/*== finish =================================================*/
body.finished #content .panel {
  width: 580px;
  margin-top: 70px;
  text-align: center;
  background: #EEF9F7;
  box-shadow: none;
}
body.finished #content .panel > h2 {
  margin: 0 0 4px;
  padding: 56px 0 28px;
  background: #fff;
  color: #33485E;
  font-size: 123.1%;
  /*16*/
  font-weight: bold;
}
body.finished #content .panel > h2 .done {
  position: relative;
  display: block;
  margin: 0 0 40px;
  color: #6FD5E0;
}
body.finished #content .panel > h2 .done:after {
  position: absolute;
  top: -10px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  display: inline-block;
  content: '';
  width: 60px;
  height: 60px;
  border: 3px solid #6FD5E0;
  border-radius: 50%;
}
body.finished #content .panel > h2 .done .icon-done {
  font-size: 36px;
}
body.finished #content .panel .navbtn {
  margin: 30px 0 10px;
}
body.finished #content .panel p {
  font-size: 108% b;
  font-size-color: #E64C3B;
  font-size-font-size: 116%;
}
body.finished #content .finish_point {
  margin: 1em 0;
  padding: 1em;
  background: #D1EFE9;
}
body.finished #content .finish_point b {
  color: #f00;
}

/*== pop =================================================*/
#content .question_pop {
  position: relative;
  background: #fff;
  width: 100%;
  height: 100%;
  display: none;
  border: 5px solid #259eab;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#content .question_pop button.btn.close {
  display: block;
  position: absolute;
  right: 6px;
  top: 6px;
  text-align: center;
  width: 56px;
  height: 42px;
  font-size: 11px;
  line-height: 42px;
  padding: 0;
  margin: 0;
}
#content .question_pop > .q_explain {
  padding-right: 80px;
  height: 442px;
  position: relative;
}

#content .question_body.pop .question_pop {
  display: block;
}
#content .question_body.pop #qBody,
#content .question_body.pop #qInput,
#content .question_body.pop #qBody_before,
#content .question_body.pop #qInput_before {
  display: none;
}

/*== UI theme ======================================================================*/
#content .enquete_body {
  padding-bottom: 3em;
}
#content .enquete_body .anq-head {
  margin: 2.5em 0 1em;
}
#content .enquete_body .anq-head h2 {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 80px;
  color: #259eab;
}
#content .enquete_body .anq-head p {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: bold;
}
#content .enquete_body .anq-head .required {
  display: inline-block;
  background: #ff0000;
  color: #fff;
  padding: 1px 4px;
  font-weight: normal;
  border-radius: 3px;
}
#content .enquete_body .anq-body {
  margin-left: 86px;
}
#content .enquete_body .anq-body .note {
  font-size: 12px;
  color: #999;
}
#content .enquete_body form label {
  display: inline-block;
  position: relative;
  padding: 0.5em 0 0.5em 26px;
  margin-right: 0.5em;
}
#content .enquete_body form label .on,
#content .enquete_body form label .off {
  display: none;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 0;
  color: #259eab;
}
#content .enquete_body form input[type="radio"],
#content .enquete_body form input[type="checkbox"] {
  display: none;
}
#content .enquete_body form input[type="radio"] + label .off {
  display: block;
}
#content .enquete_body form input[type="radio"]:checked + label {
  color: #259eab;
}
#content .enquete_body form input[type="radio"]:checked + label .on {
  display: block;
}
#content .enquete_body form input[type="radio"]:checked + label .off {
  display: none;
}
#content .enquete_body form input[type="checkbox"] + label .off {
  display: block;
}
#content .enquete_body form input[type="checkbox"]:checked + label {
  color: #259eab;
}
#content .enquete_body form input[type="checkbox"]:checked + label .on {
  display: block;
}
#content .enquete_body form input[type="checkbox"]:checked + label .off {
  display: none;
}
#content .enquete_body form textarea {
  min-width: 50%;
}
#content .enquete_body form input[type='text'] {
  min-width: 30%;
}
#content .enquete_body form select {
  min-width: 30%;
}
#content .enquete_body form .input-text label {
  padding-left: 0;
}
#content .enquete_body form .input-text td {
  padding: 0.5em 0;
}
#content .enquete_body form .input-text td input[type='text'] {
  min-width: 280px;
}
#content .enquete_body .navbtn {
  margin-top: 3em;
  margin-left: 86px;
  text-align: left;
}
#content .enquete_body.confirm .inptxt {
  color: #259eab;
}
#content .enquete_body.confirm li label {
  color: #ccc;
  cursor: default;
}
#content .enquete_body.confirm li label .off {
  color: #ccc;
}
#content .enquete_body.done .panel {
  width: 580px;
  margin-top: 70px;
  text-align: center;
  background: #EEF9F7;
  box-shadow: none;
}
#content .enquete_body.done .panel > h2 {
  margin: 0 0 4px;
  padding: 2em 0;
  background: #fff;
  color: #33485E;
  font-size: 123.1%;
  /*16*/
  font-weight: bold;
}
#content .enquete_body.done .panel .navbtn {
  text-align: center;
  margin: 30px 0 10px;
}

.prgrs {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 20px;
  background: #d8f4f7;
  border-radius: 2px;
}
.prgrs .bar {
  background: #259eab;
  height: 100%;
  border-radius: 2px;
  -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
  -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
}

.stat_table {
  margin-bottom: 2em;
}
.stat_table table {
  width: 100%;
}
.stat_table td {
  border-bottom: 1px solid #6FD5E0;
  background: #fff;
}
.stat_table th, .stat_table td {
  padding: 8px 12px;
  white-space: nowrap;
}
.stat_table .prgrs {
  width: 100px;
  height: 20px;
  margin-right: 6px;
}
.stat_table .prglbl {
  display: inline-block;
  vertical-align: top;
  height: 20px;
  min-width: 5em;
  text-align: right;
}
.stat_table button {
  padding: 4px 8px;
  font-size: 12px;
}
.stat_table table .lbl {
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat_table table.statall th {
  background: #EEF9F7;
  border-bottom: 1px solid #259eab;
}
.stat_table table.statall th:nth-child(1) .lbl, .stat_table table.statall td:nth-child(1) .lbl {
  width: 200px;
}
.stat_table table.statall th:nth-child(2), .stat_table table.statall td:nth-child(2) {
  white-space: nowrap;
}
.stat_table table.statall th:nth-child(3), .stat_table table.statall td:nth-child(3) {
  white-space: nowrap;
}
.stat_table table.statall th:nth-child(4), .stat_table table.statall td:nth-child(4) {
  white-space: nowrap;
}
.stat_table table.statall th:nth-child(5), .stat_table table.statall td:nth-child(5) {
  text-align: center;
  white-space: nowrap;
}
.stat_table table.statall th:nth-child(6), .stat_table table.statall td:nth-child(6) {
  text-align: center;
  width: 100px;
}
.stat_table table.statdetail .lbl {
  width: 200px;
}
.stat_table table.statdetail th {
  background: #EEF9F7;
  border-bottom: 1px solid #259eab;
}
@media only screen and (max-width: 640px) {
  .stat_table {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border-top: 1px solid #7c84d3;
    border-bottom: 1px solid #7c84d3;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .stat_table::-webkit-scrollbar {
    width: 8px;
  }
  .stat_table::-webkit-scrollbar:horizontal {
    height: 8px;
  }
  .stat_table::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    padding: 0px;
  }
  .stat_table::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
  }
  .stat_table::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
  }
}

/* ==========================================================================

    Icon Font

    All icons are based on 'Material Design Icons'
    https://github.com/google/material-design-icons/releases/tag/1.0.1

    By Google. Licensed under CC BY 4.0
    http://creativecommons.org/licenses/by/4.0/

   ========================================================================== */
.iconfont, .m {
  display: inline-block;
  width: 1em;
  height: auto;
  line-height: 1;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  vertical-align: middle;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  letter-spacing: normal;
  word-wrap: normal;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'icomoon';
  src: url("../font/egoal.eot?os7zfm");
  src: url("../font/egoal.eot?os7zfm#iefix") format("embedded-opentype"), url("../font/egoal.ttf?os7zfm") format("truetype"), url("../font/egoal.woff?os7zfm") format("woff"), url("../font/egoal.svg?os7zfm#icomoon") format("svg");
}
.m {
  font-family: 'icomoon' !important;
}

.icon-account_box:before {
  content: "\e900";
}

.icon-apps:before {
  content: "\e901";
}

.icon-assignment:before {
  content: "\e902";
}

.icon-attachment:before {
  content: "\e903";
}

.icon-check_circle:before {
  content: "\e904";
}

.icon-checkbox:before {
  content: "\e905";
}

.icon-checkbox_blank:before {
  content: "\e906";
}

.icon-chevron_left:before {
  content: "\e907";
}

.icon-chevron_right:before {
  content: "\e908";
}

.icon-clear:before {
  content: "\e909";
}

.icon-create:before {
  content: "\e90a";
}

.icon-done:before {
  content: "\e90b";
}

.icon-event_available:before {
  content: "\e90c";
}

.icon-expand_less:before {
  content: "\e90d";
}

.icon-file:before {
  content: "\e90e";
}

.icon-folder:before {
  content: "\e90f";
}

.icon-hantei_shiken:before {
  content: "\e910";
}

.icon-library_books:before {
  content: "\e911";
}

.icon-lock_outline:before {
  content: "\e912";
}

.icon-more_vert:before {
  content: "\e913";
}

.icon-person:before {
  content: "\e914";
}

.icon-pie_chart:before {
  content: "\e915";
}

.icon-radio_checked:before {
  content: "\e916";
}

.icon-radio_unchecked:before {
  content: "\e917";
}

.icon-timer:before {
  content: "\e918";
}

/* ==========================================================================

    Font resize styles
    - Large size font
    - XLarge size font

   ========================================================================== */
/* Large size font
   @param #wrapper.font-l
   --------------------------------------------------- */
#wrapper.font-l .hgroup .hl1 {
  font-size: 17px;
}
#wrapper.font-l .desc p,
#wrapper.font-l .menu-list button,
#wrapper.font-l .question_desc p,
#wrapper.font-l .q_explain,
#wrapper.font-l #qBody .pages,
#wrapper.font-l #qBody .q_explain button,
#wrapper.font-l #qBody .drag_absorb .handle,
#wrapper.font-l #qInput .input,
#wrapper.font-l .enquete_body {
  font-size: 16px;
}

/* XLarge size font
   @param #wrapper.font-xl
   --------------------------------------------------- */
#wrapper.font-xl .hgroup .hl1 {
  font-size: 21px;
}
#wrapper.font-xl .desc p,
#wrapper.font-xl .menu-list button,
#wrapper.font-xl .question_desc p,
#wrapper.font-xl .q_explain,
#wrapper.font-xl #qBody .pages,
#wrapper.font-xl #qBody .q_explain button,
#wrapper.font-xl #qBody .drag_absorb .handle,
#wrapper.font-xl #qInput .input,
#wrapper.font-xl .enquete_body {
  font-size: 20px;
}

#header nav div#h-news {
  display: none;
}

@media only screen and (max-width: 640px) {
  .form_input {
    padding: 4%;
  }
  .form_input label {
    display: block;
    width: 100%;
    padding: 2%;
    text-align: left;
  }
  .form_input ul.inputs {
    width: 100%;
  }
  .form_input ul.inputs li input {
    width: 100%;
  }
  .form_input ul.inputs.grp li {
    margin: 6px 0;
  }
  .form_input ul.navbtn li {
    margin: 0 10px;
  }

  .cont-tabs {
    padding: 10px 0;
  }

  #page-top {
    display: none;
  }
}
@media only screen and (max-width: 640px) {
  #container {
    min-width: 360px;
  }
  #container .inview,
  #container .default_view {
    width: 100%;
    padding: 0;
  }

  #header {
    width: 100%;
  }
  #header .inview {
    width: 100%;
    padding: 0 0 0 4%;
  }
  #header #logoSystem {
    width: 110px;
  }

  #content {
    min-width: 360px;
  }
  #content .inview,
  #content .default_view {
    min-width: auto;
    min-height: initial;
  }
  #content .wrapCol .leftCol,
  #content .wrapCol .rightCol {
    width: 100%;
    margin: 0 !important;
  }
  #content #location {
    padding: 14px 2%;
    background: #EEF9F7;
  }
  #content .hgroup {
    position: relative;
    overflow: visible;
    width: 100%;
    height: auto;
  }
  #content .hgroup h1 {
    width: 83%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #content .hgroup .h_elem {
    padding-right: 6px;
  }
  #content .desc {
    margin: 2% 4% 0;
  }
  #content .menu-list button .label {
    width: auto;
  }
  #content .attention {
    display: block;
    padding: .5em 0 0;
  }
  #content h1 {
    line-height: normal;
  }
  #content h1 .ico {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  #content h1 .ico .m {
    font-size: 20px;
  }

  #footer {
    margin: 0;
    padding: 4%;
    font-size: 10px;
  }

  #dialog {
    padding: 0 4%;
  }
  #dialog .panel {
    width: 100%;
    margin-top: 72px;
  }
  #dialog .panel .navbtn {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
  }
  #dialog .panel .navbtn li {
    display: table-cell;
    padding: 0 2%;
  }
  #dialog .panel .navbtn button {
    min-width: 100%;
    width: 100%;
  }
}
@media only screen and (max-width: 640px) {
  body.default #content .panel {
    margin: 4%;
  }
  body.default .loginLogo {
    height: 420px;
    background-position: 50% 45%;
  }

  body.login #content .panel {
    height: auto;
    display: block;
    margin: 4%;
  }
  body.login #content .loginLogo,
  body.login #content #loginPanel {
    display: block;
    width: 100%;
  }
  body.login #content .loginLogo {
    display: block;
    width: 100%;
    height: 150px;
    background-size: auto 100px;
  }
  body.login #content #loginPanel {
    padding: 0;
  }
  body.login #content #loginPanel .panelin {
    padding: 0 4%;
  }
  body.login #content #loginPanel .nav {
    padding: 4%;
    text-align: left;
  }
  body.login #content #loginPanel .nav button {
    font-size: 12px;
  }
  body.login #content .form_input {
    padding: 2% 4%;
  }
  body.login #content .form_input input#frm_loginid,
  body.login #content .form_input input#frm_pswd {
    width: 100%;
  }
  body.login #content .form_input .navbtn {
    margin: 0 0 4%;
  }
  body.login #content .form_input .navbtn button {
    width: 100%;
  }
  body.login #footer {
    color: #fff;
  }

  body.reminder #content .inview {
    padding: 0 4%;
  }
  body.reminder #content .inview h2:nth-of-type(1) {
    margin: 0;
  }
  body.reminder #content .inview h2:nth-of-type(2) {
    margin: 30px 0 0;
  }
  body.reminder #form_reminder .navbtn {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
  }
  body.reminder #form_reminder .navbtn li {
    display: table-cell;
    padding: 0 2%;
  }
  body.reminder #form_reminder .navbtn button {
    min-width: 100%;
    width: 100%;
  }

  body.userinfo #content .inview {
    padding: 0 4%;
  }
  body.userinfo #form_userinfo .navbtn {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
  }
  body.userinfo #form_userinfo .navbtn li {
    display: table-cell;
    padding: 0 2%;
  }
  body.userinfo #form_userinfo .navbtn button {
    min-width: 100%;
    width: 100%;
  }
  body.userinfo #form_userinfo .navbtn {
    margin: 20px 0 10px;
  }
  body.userinfo #form_userinfo .inputs {
    padding: 0;
  }
  body.userinfo #form_userinfo .inputs input {
    width: 100%;
  }
  body.userinfo #form_userinfo label {
    width: 100%;
  }

  body.course #content .inview {
    padding: 0 4%;
  }
  body.course #content .inview h1 {
    margin: 20px 0;
  }

  body.menu #content .inview .menu-list,
  body.menu #content .inview .menu-back {
    padding: 0 4%;
  }

  body.judgment .question_body #qInput {
    padding: 4%;
  }
  body.judgment .question_body #qInput .correct,
  body.judgment .question_body #qInput .incorrect {
    height: auto;
  }
  body.judgment .question_body #qInput .correct .txt,
  body.judgment .question_body #qInput .incorrect .txt {
    padding: 4% 0 0;
    font-size: 150%;
  }
  body.judgment .question_body #qInput .correct .m,
  body.judgment .question_body #qInput .incorrect .m {
    font-size: 140px;
  }
  body.judgment .question_body #qInput .correct {
    padding: 10px 0;
  }
  body.judgment .question_body #qInput .incorrect {
    padding: 20px 0 0;
  }
  body.judgment .question_body #qBody {
    margin: 4% 0 0;
  }
  body.judgment .question_body #qBody .q_explain {
    padding: 4%;
    border-top: 1px solid #eee;
  }
  body.judgment .question_body #qBody p {
    margin: 0 0 1em;
  }

  body.finished #content .panel {
    width: 92%;
    margin: 4%;
  }
  body.finished #content .panel h2 {
    padding: 30px 10px 20px;
  }
  body.finished #content .panel h2 .done {
    margin: 0 0 30px;
  }
  body.finished #content .panel .navbtn li {
    margin: 0 10px;
  }

  body.qa #content .inview {
    padding: 0 4%;
  }

  body.help #content .inview {
    padding: 0 4%;
  }
  body.help .wrapCol #help-nav.leftCol {
    width: 100%;
  }
  body.help .wrapCol #help-cont.rightCol {
    width: 100%;
  }
  body.help .wrapCol #help-cont.rightCol h2 {
    margin: 30px 0 10px !important;
  }

  body.notice #content .inview {
    padding: 0 4%;
  }
  body.notice #content .inview h1 + p {
    margin-bottom: 0;
  }
  body.notice #content .wrapCol > div {
    padding: 2em 0;
    border-bottom: 1px solid #eee;
  }
  body.notice #content .wrapCol h2 {
    margin: 0 0 20px;
    padding-bottom: 0;
    border: 0;
  }
}
@media only screen and (max-width: 640px) {
  #content {
    /*
    .sub_pane {
    	position: relative;
    	top: auto;
    	right: auto;
    	float:right;
    	width: 100%;

    	.qstep {
    		position: absolute;
    		bottom: 6px;
    		right: 0;
    		font-size: 12px;
    	}
    	button { display: none;}
    }
    */
  }
  #content #location .label {
    display: block;
    float: none;
    padding: 0;
    margin-right: 60px;
  }
  #content #location .qstep {
    margin-left: 10px;
  }
  #content .sub_foot {
    border-top: 1px dotted #ccc;
    display: block;
    margin-top: 4%;
    padding: 4% 4% 0;
    text-align: left;
  }
  #content .sub_foot.navbtn button {
    min-width: auto;
    min-height: auto;
    line-height: 18px;
    font-size: 14px;
    padding: 8px;
  }

  #content .question_desc {
    overflow: visible;
    padding: 4% 4%;
    border: 0;
    border-bottom: 1px solid #ccc;
  }
  #content .question_desc p {
    width: 100%;
  }
  #content .question_desc .ex {
    width: 5em;
    height: auto;
  }

  #content .question_body ul.pages {
    height: auto;
    border: 0;
  }
  #content .question_body ul.pages li {
    padding: 4%;
    border-bottom: 1px solid #eee;
  }
  #content .question_body ul.pages li.hide {
    display: block;
  }
  #content .question_body ul.page_ctrl {
    display: none;
  }
  #content .question_body .input {
    height: auto;
    border: 0;
    border-top: 1px solid #6FD5E0;
  }
  #content .question_body .q_explain {
    height: auto !important;
    padding: 4%;
  }
  #content .question_body .movie video {
    width: 100%;
    height: auto;
  }
  #content .question_body .question_pop .q_explain {
    padding: 4%;
  }
  #content .question_body .question_pop .q_explain li {
    overflow: hidden;
    width: 100%;
  }
  #content .question_body .question_pop .q_explain h2 {
    padding-right: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #content .question_body .image img {
    width: 100%;
    height: auto;
  }
  #content .question_body form.q_input_select ul.img_select label {
    padding: 0 2% 10px !important;
  }
  #content .question_body form.q_input_select ul.img_select label i {
    position: relative;
    top: auto;
    left: auto;
    margin: 6px auto;
  }
  #content .question_body form.q_input_select ul.img_select label img.small {
    display: none !important;
  }
  #content .question_body form.q_input_select ul.img_select label img.large {
    display: block;
    width: 100%;
    height: auto;
  }
  #content .question_body form.q_input_memo textarea {
    height: 130px;
  }
  #content .question_body form.q_input_select button.zoombtn {
    display: none;
  }
  #content .question_body #qBody,
  #content .question_body #qInput,
  #content .question_body #qBody_before,
  #content .question_body #qInput_before {
    float: none;
    width: 100% !important;
    height: auto;
  }
  #content .question_body #qBody,
  #content .question_body #qBody_before {
    border: 0;
  }
  #content .question_body #qInput {
    position: relative;
  }

  #content .question_body.remain form.q_input_select ul.img_select li {
    float: none;
    width: 100%;
    border-bottom: 1px solid #6FD5E0;
  }
  #content .question_body.remain #qInput {
    width: 100%;
  }

  #content .question_body.study #qBody {
    padding: 0;
  }
  #content .question_body.study #qInput {
    width: 100%;
  }
  #content .question_body.study #qInput .next_q_btn {
    position: static;
  }
  #content .question_body.study #qInput .next_q_btn button {
    border-radius: 0 0 6px 6px;
  }

  #content .question_body.sort #sortBody .unit0,
  #content .question_body.sort #sortBody .unit1,
  #content .question_body.sort #sortBody .unit2 {
    float: none;
    width: 100%;
  }
  #content .question_body.sort #sortBody div[draggable="true"] {
    background-position: -9px 50%;
    width: 84%;
  }
  #content .question_body.sort #sortBody div[draggable="true"] p {
    padding: 4px 8px 4px 16px;
    font-size: 12px;
    line-height: 1.25;
  }

  #content .question_body.group#groupBody {
    background: url(../ref/img/label_drag_sp.png) no-repeat 50% 178px;
  }
  #content .question_body.group#groupBody #qBody {
    width: 100%;
    height: 170px;
    padding: 0;
    margin-bottom: 30px;
    border-radius: 0;
    background: #eee;
    border: 0;
    border-bottom: 1px solid #ccc;
  }
  #content .question_body.group#groupBody #qInput {
    width: 100%;
  }
  #content .question_body.group#groupBody div[draggable="true"] {
    background-position: -9px 50%;
    width: 47%;
  }
  #content .question_body.group#groupBody div[draggable="true"] p {
    width: 100%;
    padding-left: 16px;
    padding-right: 45px;
    font-size: 12px;
  }
  #content .question_body.group#groupBody div[draggable="true"] button {
    position: absolute;
    top: 0;
    right: 0;
  }
}
@media only screen and (max-width: 640px) {
  #content .enquete_body {
    padding: 0 4%;
  }
  #content .enquete_body .anq-body {
    margin-left: 0;
  }
  #content .enquete_body .navbtn {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
  }
  #content .enquete_body .navbtn li {
    display: table-cell;
    padding: 0 2%;
  }
  #content .enquete_body .navbtn button {
    min-width: 100%;
    width: 100%;
  }
  #content .enquete_body .navbtn {
    margin: 30px 0 10px;
    text-align: center;
  }
  #content .enquete_body form input[type='text'] {
    display: block;
    width: 100%;
  }
  #content .enquete_body form textarea {
    width: 100%;
  }
  #content .enquete_body form .input-text {
    width: 100%;
  }
  #content .enquete_body form .input-text th,
  #content .enquete_body form .input-text td {
    display: block;
    width: 100%;
  }
  #content .enquete_body form .input-text td {
    padding: 0 0 10px;
  }
  #content .enquete_body form .note {
    display: block;
    padding: .5em 0 0;
  }
  #content .enquete_body.done {
    padding: 0;
  }
  #content .enquete_body.done .panel {
    width: 92%;
    margin: 4%;
  }
  #content .enquete_body.done .panel h2 {
    padding: 30px 10px 20px;
  }
  #content .enquete_body.done .panel h2 .done {
    margin: 0 0 30px;
  }
}
#wrapper.preview #header nav {
  display: none;
}
#wrapper.preview #content #location {
  display: none;
}
#wrapper.preview #content .sub_pane,
#wrapper.preview #content .sub_foot {
  display: none;
}
#wrapper.preview #content .question_body .next_q_btn {
  display: none;
}
#wrapper.preview #enquete .navbtn {
  display: none;
}