@charset "UTF-8";
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active, a:hover {
  outline: 0;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

button[disabled],
html input[disabled] {
  cursor: not-allowed;
}

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

input {
  line-height: normal;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

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

td,
th {
  padding: 0;
}

/* @include transition(all,2s,ease-out); */
.row {
  margin-left: -15px;
  margin-right: -15px;
  clear: both;
  zoom: 1;
}
.row:before, .row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}
.row > div {
  box-sizing: border-box;
}

.container {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  clear: both;
  zoom: 1;
}
.container:before, .container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}

.breadcrumb ul li:before {
  content: " / ";
  display: inline-block;
  padding: 0px 4px;
  margin: 0px 5px 0px 5px;
  color: #CCC;
}

.cp {
  font-size: 1.0666666em;
  line-height: 1.65em;
}
@media screen and (max-width: 575px) {
  .cp {
    font-size: 1.2em;
  }
}
.cp h1 {
  font-size: 2em;
}
.cp h2 {
  font-size: 1.75em;
  margin-bottom: 1.25em;
}
.cp h3 {
  font-size: 1.5em;
}
.cp h4 {
  font-size: 1.25em;
  margin-top: 0;
  margin-bottom: 1em;
}
.cp h5 {
  font-size: 1.125em;
  margin-top: 0;
  margin-bottom: 1em;
}
.cp h6 {
  font-size: 1.125em;
  margin-top: 0;
  margin-bottom: 1em;
}
.cp p {
  font-size: 1em;
  line-height: 1.85em;
  margin-top: 0;
}
.cp ul,
.cp ol {
  font-size: 1em;
  margin-bottom: 1em;
}
.cp ul li,
.cp ol li {
  margin-bottom: 0.5em;
}
.cp dd,
.cp th,
.cp td figure {
  font-size: 1em;
}
.cp blockquote {
  background: #f1f1f1;
  font-style: normal;
  display: block;
  font-size: 1em;
  border-left: 5px solid #005d98, #5c9588, #5c9588, #0e664c, #313131, #1c4b82, #bc5702, #097e76, #774181, #088c6f, #0078c6;
  padding: 2em;
  box-sizing: border-box;
  margin: 0 0em 2em;
}
.cp img {
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .cp img {
    max-width: 100%;
    width: auto;
    clear: both;
  }
}

body {
  font-size: 1em;
  font-weight: normal;
  color: #666;
  line-height: 1.45em;
  font-family: Lato, "PingFang TC", "Helvetica Neue", Helvetica, 微軟正黑體, 新細明體, Arial, sans-serif;
  -webkit-text-size-adjust: none;
  color: #333;
}
@media print {
  body {
    font-size: 0.75em;
  }
}

a {
  color: #666;
  text-decoration: none;
}
a:hover, a:focus {
  color: #dd1f03;
  cursor: pointer;
}

.font_size {
  display: flex;
  padding: 0;
  margin-right: 5px;
}
.font_size span {
  font-size: 0;
  color: #222;
  padding-top: 0;
}
.font_size ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex: 0 0 6em;
}
.font_size ul li {
  font-size: 1em;
  flex: 0 0 auto;
  margin: 0 2px !important;
  align-items: center;
}
.font_size ul li a {
  display: block;
  text-align: center;
  line-height: 32px;
  border-radius: 50%;
  background: #fff;
  width: 32px;
  height: 32px;
  color: #000 !important;
  border: none;
  font-size: 0;
  background-image: url("../images/fontsize_middle.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
  transition: 0.5s;
}
.font_size ul li a:hover, .font_size ul li a:focus {
  background: #666;
  color: #FFF;
  background-image: url("../images/fontsize_middle_hover.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}
.font_size ul li a:hover.small, .font_size ul li a:focus.small {
  background-image: url("../images/fontsize_small_hover.svg");
}
.font_size ul li a:hover.large, .font_size ul li a:focus.large {
  background-image: url("../images/fontsize_big_hover.svg");
}
.font_size ul li a.active {
  background: #666;
  color: #FFF;
  background-image: url("../images/fontsize_middle_hover.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}
.font_size ul li a.active.small {
  background-image: url("../images/fontsize_small_hover.svg");
}
.font_size ul li a.active.large {
  background-image: url("../images/fontsize_big_hover.svg");
}
.font_size ul li a.active:hover, .font_size ul li a.active:focus {
  background: #666;
  color: #FFF;
  background-image: url("../images/fontsize_middle_hover.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}
.font_size ul li a.active:hover.small, .font_size ul li a.active:focus.small {
  background-image: url("../images/fontsize_small_hover.svg");
}
.font_size ul li a.active:hover.large, .font_size ul li a.active:focus.large {
  background-image: url("../images/fontsize_big_hover.svg");
}
.font_size ul li a.small {
  background-image: url("../images/fontsize_small.svg");
}
.font_size ul li a.large {
  background-image: url("../images/fontsize_big.svg");
}
@media screen and (max-width: 767px) {
  .font_size {
    display: none;
  }
}

.breadcrumb {
  background-color: #e5e5e5;
  background: linear-gradient(to bottom, #fff, #e5e5e5);
  border-bottom: 1px solid #d3d3d3;
  padding: 0.5em 1em 0.4em;
  font-size: 1em;
  margin: 0px;
  overflow: hidden;
}
.breadcrumb span {
  float: left;
  color: #666;
}
.breadcrumb ul {
  padding: 0;
  margin: 0;
  float: left;
}
.breadcrumb ul li {
  display: inline-block;
  margin: 0px 0.1em 0.1em 0px;
}
.breadcrumb ul li:first-child:before {
  content: "";
  margin: 0;
}
.breadcrumb a {
  color: #666;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: #c41b03;
  text-decoration: underline;
}

.divider, .divider-vertical {
  text-align: center;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-size: 0.813em;
  color: grey;
  text-shadow: 0 1px 1px #fff;
  cursor: default;
  display: block;
  clear: both;
  zoom: 1;
}
.divider:before, .divider-vertical:before, .divider:after, .divider-vertical:after {
  content: "";
  display: table;
}
.divider:after, .divider-vertical:after {
  clear: both;
}

.divider {
  display: table;
  line-height: 1;
  margin: 20px 0;
}
.divider:after, .divider:before {
  content: "";
  display: table-cell;
  position: relative;
  top: 50%;
  width: 50%;
  background-repeat: no-repeat;
  background-image: url("../images/basic/divider.jpg");
}
.divider:before {
  background-position: right 1em top 50%;
}
.divider:after {
  background-position: left 1em top 50%;
}

.divider-vertical {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: auto;
  height: 50%;
  line-height: 0;
  transform: translateX(-50%);
}
.divider-vertical:after, .divider-vertical:before {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 3;
  width: 0;
  height: calc(100% - 1.2rem);
  border-left: 1px solid #cfcfcf;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.divider-vertical:before {
  top: -100%;
}
.divider-vertical:after {
  bottom: 0;
}

.btn_grp {
  text-align: center;
  padding: 1em 0;
  clear: both;
}

.upload_grp .upload_btn, input[type=reset], input[type=submit], button,
input[type=button], .btn_primaryColor, .btn_active, .btn-greenline, .btn-white, .btn-black, .btn-gray, .btn-purple, .btn-red, .btn-yellow, .btn-blue, .btn-green, .btn {
  font-size: 1em;
  background-image: none;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
  line-height: normal;
  width: auto;
  min-width: 5em;
  margin: 0.25em 0.1em;
}

.btn {
  padding: 0.5em 2em !important;
  touch-action: manipulation;
  box-sizing: border-box;
  background: #ddd;
  border: 1px solid #d0d0d0;
  color: #666;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
  text-shadow: RGBA(0, 0, 0, 0.3) 0px 0px 0px;
  background-color: rgb(247, 247, 247);
}
.btn:hover {
  background: #e5e5e5;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn:focus {
  background: #e5e5e5;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn.active {
  background: #e5e5e5;
  cursor: pointer;
}
.btn:hover, .btn:focus {
  color: #666;
  background-color: rgb(230, 230, 230);
}

.btn-green {
  background: #107859;
  border: 1px solid #0d6248;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-green:hover {
  background: #128663;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-green:focus {
  background: #128663;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-green.active {
  background: #128663;
  cursor: pointer;
}

.btn-blue {
  background: #3e78c0;
  border: 1px solid #386cad;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-blue:hover {
  background: #4980c4;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-blue:focus {
  background: #4980c4;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-blue.active {
  background: #4980c4;
  cursor: pointer;
}

.btn-yellow {
  background: #f1ad00;
  border: 1px solid #d89b00;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-yellow:hover {
  background: #ffb701;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-yellow:focus {
  background: #ffb701;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-yellow.active {
  background: #ffb701;
  cursor: pointer;
}

.btn-orange {
  background: #b94b00;
  border: 1px solid #a04100;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-orange:hover {
  background: #c85100;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-orange:focus {
  background: #c85100;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-orange.active {
  background: #c85100;
  cursor: pointer;
}

.btn-red {
  background: #dc0122;
  border: 1px solid #c3011e;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-red:hover {
  background: #eb0124;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-red:focus {
  background: #eb0124;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-red.active {
  background: #eb0124;
  cursor: pointer;
}

.btn-purple {
  background: #aa5ac5;
  border: 1px solid #a047be;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-purple:hover {
  background: #b065c9;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-purple:focus {
  background: #b065c9;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-purple.active {
  background: #b065c9;
  cursor: pointer;
}

.btn-gray {
  background: #555;
  border: 1px solid #484848;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-gray:hover {
  background: #5d5d5d;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-gray:focus {
  background: #5d5d5d;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-gray.active {
  background: #5d5d5d;
  cursor: pointer;
}

.btn-black {
  background: #333;
  border: 1px solid #262626;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-black:hover {
  background: #3b3b3b;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-black:focus {
  background: #3b3b3b;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-black.active {
  background: #3b3b3b;
  cursor: pointer;
}

.btn-white {
  background: #fff;
  border: 1px solid #f2f2f2;
  color: #333;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-white:hover {
  background: white;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-white:focus {
  background: white;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-white.active {
  background: white;
  cursor: pointer;
}
.btn-white:hover, .btn-white:focus {
  color: #333;
  background: #e6e6e6;
}

.btn-greenline {
  background: #06c755;
  border: 1px solid #05ae4a;
  color: #333;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-greenline:hover {
  background: #06d65b;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-greenline:focus {
  background: #06d65b;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-greenline.active {
  background: #06d65b;
  cursor: pointer;
}
.btn-greenline:hover {
  color: #333;
}

.btn_active {
  background: #b94b00;
  border: 1px solid #a04100;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn_active:hover {
  background: #c85100;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn_active:focus {
  background: #c85100;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn_active.active {
  background: #c85100;
  cursor: pointer;
}

.btn_primaryColor {
  background: #005d98;
  border: 1px solid #004d7f;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
  border: none;
}
.btn_primaryColor:hover {
  background: #0066a7;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn_primaryColor:focus {
  background: #0066a7;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn_primaryColor.active {
  background: #0066a7;
  cursor: pointer;
}
.btn_primaryColor:hover, .btn_primaryColor.avtive {
  color: #005d98 !important;
  background: #eee;
  border: 1px solid #e1e1e1;
  color: #005d98;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
  box-shadow: 0 0 0 2px #005d98 inset;
  border: none;
}
.btn_primaryColor:hover:hover, .btn_primaryColor.avtive:hover {
  background: #f6f6f6;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn_primaryColor:hover:focus, .btn_primaryColor.avtive:focus {
  background: #f6f6f6;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn_primaryColor:hover.active, .btn_primaryColor.avtive.active {
  background: #f6f6f6;
  cursor: pointer;
}

.btn-xl {
  font-size: 1.5em;
}

.btn-lg {
  font-size: 1.25em;
}

.btn-sm {
  font-size: 0.938em;
}

.btn-xs {
  font-size: 0.75em;
}

.disabled {
  pointer-events: none;
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
  display: inline-block;
  -webkit-filter: grayscale(1);
}

.pointer-events {
  pointer-events: none;
}

.disabled_hidebtn {
  opacity: 0.8;
  box-shadow: none;
  cursor: not-allowed;
  display: inline-block;
  -webkit-filter: grayscale(1);
}
.disabled_hidebtn:hover {
  cursor: not-allowed;
  display: inline-block;
  -webkit-filter: grayscale(1);
}

.reflashbtn {
  font-size: 0;
  background-image: url("../images/icon/icon_reflash.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  font-size: 0;
  background-image: url(../images/icon/icon_reflash.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  padding: 0.5em 1em !important;
  height: 38px;
  width: 50px;
}
.reflashbtn:hover, .reflashbtn:focus {
  background-image: url(../images/icon/icon_reflash.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  padding: 0.5em 1em !important;
  height: 40px;
  width: 50px;
}

.readbtn {
  padding: 0.5em 1em !important;
}

hr {
  margin: 1em 0px;
  display: block;
  border: none;
  clear: both;
}

hr {
  border-top: 1px solid #666;
}
hr.hr1 {
  border-top: 3px double #666;
}
hr.hr2 {
  border-top: 1px dashed #666;
}
hr.hr3 {
  border-top: 1px dotted #666;
}
hr.hr4 {
  background-color: #fff;
  border-top: 2px dashed #666;
}
hr.hr5 {
  background-color: #fff;
  border-top: 2px dotted #666;
}
hr.hr6 {
  border-top: 1px solid #666;
  border-bottom: 1px solid #fff;
}
hr.hr7 {
  border-top: 1px solid #666;
  border-bottom: 1px solid #fff;
}

img.img_rounded {
  border-radius: 16px;
}
img.img_circle {
  border-radius: 50%;
}

.single_setting .thumbnail {
  position: relative;
  margin: 1%;
  display: block;
  padding: 0;
  float: left;
  width: 31.3333333333%;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
}
@media (max-width: 767px) {
  .single_setting .thumbnail {
    float: none;
    display: inline-block;
    width: 98%;
    margin: 1% auto;
  }
}
.single_setting .thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
}
.single_setting .thumbnail:nth-child(1) .imgOuter {
  position: relative;
  overflow: hidden;
  background: #dedede;
}
.single_setting .thumbnail:nth-child(1) .imgOuter:before {
  display: block;
  content: "";
  padding-top: 100%;
}
.single_setting .thumbnail:nth-child(1) .imgOuter img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.single_setting .thumbnail:nth-child(2) .imgOuter {
  position: relative;
  overflow: hidden;
  background: #dedede;
}
.single_setting .thumbnail:nth-child(2) .imgOuter:before {
  display: block;
  content: "";
  padding-top: 75%;
}
.single_setting .thumbnail:nth-child(2) .imgOuter img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.single_setting .thumbnail:nth-child(3) .imgOuter {
  position: relative;
  overflow: hidden;
  background: #dedede;
}
.single_setting .thumbnail:nth-child(3) .imgOuter:before {
  display: block;
  content: "";
  padding-top: 56.25%;
}
.single_setting .thumbnail:nth-child(3) .imgOuter img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

/*for IE */
.img-container {
  height: 400px;
  width: 100%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .img-container {
    height: 280px;
    width: 100%;
  }
}
.img-container a {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}
.img-container a .caption {
  position: absolute;
  width: 100%;
  height: 3em;
  background: rgba(0, 0, 0, 0.45);
  padding: 1em 0.5em 0.5em;
  font-size: 1.125em;
  color: #FFF;
  margin: 0;
  text-align: center;
  bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .img-container a .caption {
    height: 5em;
    width: 100%;
    left: 0;
    padding: 1em 1em;
    text-align: center;
  }
}
.img-container img {
  width: 100%;
  height: 100%;
}

.ie-object-cover {
  position: relative;
  background-size: cover;
  background-position: center center;
}

.ie-object-fill {
  position: relative;
  background-size: auto;
  background-position: center center;
}

.ie-object-contain {
  position: relative;
  background-size: contain;
  background-position: center center;
}

.ie-object-cover,
.ie-object-fill,
.ie-object-contain {
  background-repeat: no-repeat;
}
.ie-object-cover img,
.ie-object-fill img,
.ie-object-contain img {
  opacity: 0;
  width: 0px;
  height: 0px;
}

.fill {
  -o-object-fit: fill;
     object-fit: fill;
}

.contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.none {
  -o-object-fit: none;
     object-fit: none;
}

.scale-down {
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

[tooltip] {
  position: relative;
}

[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: "";
  border: 5px solid transparent;
  z-index: 1001;
}

[tooltip]::after {
  content: attr(tooltip);
  text-align: left;
  min-width: 150px;
  line-height: 1.5em;
  max-width: 300px;
  font-size: 0.813em;
  max-height: 5.182875em;
  overflow: hidden;
  padding: 0.5em;
  border-radius: 4px;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000;
  box-sizing: border-box;
}

[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

[tooltip=""]::before,
[tooltip=""]::after {
  display: none !important;
}

[tooltip]:not([flow])::before,
[tooltip][flow^=up]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^=up]::after {
  bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^=up]::before,
[tooltip][flow^=up]::after {
  left: 50%;
  transform: translate(-50%, -0.5em);
}

[tooltip][flow^=down]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}

[tooltip][flow^=down]::after {
  top: calc(100% + 5px);
}

[tooltip][flow^=down]::before,
[tooltip][flow^=down]::after {
  left: 50%;
  transform: translate(-50%, 0.5em);
}

[tooltip][flow^=left]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-0.5em, -50%);
}

[tooltip][flow^=left]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-0.5em, -50%);
}

[tooltip][flow^=right]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(0.5em, -50%);
}

[tooltip][flow^=right]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(0.5em, -50%);
}

@keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^=up]:hover::before,
[tooltip][flow^=up]:hover::after,
[tooltip][flow^=down]:hover::before,
[tooltip][flow^=down]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^=left]:hover::before,
[tooltip][flow^=left]:hover::after,
[tooltip][flow^=right]:hover::before,
[tooltip][flow^=right]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

.tabSet {
  max-width: 90%;
  margin: 20px auto;
  clear: both;
  *zoom: 1;
}
.tabSet:before, .tabSet:after {
  content: "";
  display: table;
}
.tabSet:after {
  clear: both;
}
@media screen and (max-width: 767px) {
  .tabSet {
    max-width: 100%;
    width: auto;
    height: auto !important;
  }
}

.tabs {
  position: relative;
}
@media screen and (max-width: 767px) {
  .tabs {
    position: relative;
  }
}
.tabs > .tabItem {
  float: left;
  font-size: 1em;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: normal;
}
.tabs > .tabItem.active > a {
  background-color: #dd1f03;
  color: #FFF;
  position: relative;
  border: none;
}
@media screen and (max-width:767px) {
  .tabs > .tabItem {
    float: none;
  }
  .tabs > .tabItem > a {
    width: 100% !important;
    border-bottom: 1px solid #888;
  }
  .tabs > .tabItem.active > a {
    border-color: #bbb;
  }
}
.tabs > .tabItem > a {
  display: block;
  padding: 16px 5px 14px;
  text-align: center;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.tabs > .tabItem > a:hover {
  background-color: #dd1f03;
  color: #fff;
}

.example-2 .tabItem > a:hover {
  background: #781f79;
}
.example-2 .tabItem.active > a {
  background: #781f79;
}

.active + .tabContent {
  display: block;
}

.tabContent {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  clear: both;
  padding: 30px 0px;
  display: none;
}
@media screen and (max-width: 767px) {
  .tabContent {
    position: static;
  }
}
.tabContent ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
.tabContent li {
  margin: 0 0 1.3em 0;
  padding: 0;
  border-bottom: 1px #CCC dashed;
}
@media screen and (max-width: 767px) {
  .tabContent li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.tabContent li span {
  display: inline-block;
  margin: 0 0 0 1em;
  font-size: 0.813em;
  color: #666;
}
.tabContent .slick-dots li {
  margin: 0 10px;
  border-bottom: none;
}
.tabContent .slick-dots li button:before {
  background-color: #fff;
  opacity: 1;
}
.tabContent .slick-dots li.slick-active button:before {
  background-color: #000;
}

table {
  width: 100%;
  border-collapse: collapse;
}
@media screen and (max-width: 575px) {
  table {
    width: 100%;
    position: relative;
  }
}
table th,
table td {
  padding: 0.5em;
  text-align: left;
}
table td {
  border: #ddd 1px solid;
  word-break: break-all;
}
table td a {
  word-break: break-all;
  color: #774e2b;
  text-decoration: underline;
  display: block;
}
table td a:hover {
  color: #dd1f03;
}
table td.aCenter {
  text-align: center;
}
table td.aLeft {
  text-align: left;
}
table td.aRight {
  text-align: right;
}
table td.time {
  text-align: center;
  white-space: nowrap;
}
table td.date {
  text-align: center;
  white-space: nowrap;
}
table th {
  background-color: #f3f3f3;
  color: #333;
  border: #ddd 1px solid;
  text-align: center;
  white-space: nowrap;
}
table.table_hover tr:hover {
  background: #f3f3f3;
}
table.table_sprite tr:nth-child(even) {
  background: #f5f5f5;
}
table .information_icon {
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff !important;
  border-radius: 50%;
  display: block;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  text-decoration: none;
}
table .information_icon:hover {
  color: #fff;
}
table input[type=checkbox] {
  margin: 0 !important;
}
table img {
  vertical-align: middle;
}
table .the_term {
  display: inline-block;
  padding: 0 5px;
}
table .surplus {
  font-size: 0.875em;
  display: inline-block;
}
table .collection {
  width: 40px;
  margin: 0 auto;
}
table .collection a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  line-height: 40px;
  text-align: center;
}
table .collection a:hover {
  background-color: #e5e5e5;
}
table .collection a img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.table_list {
  width: 100%;
  display: block;
  clear: both;
  zoom: 1;
  overflow: hidden;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table_list {
    background-color: transparent !important;
  }
  .table_list thead,
  .table_list tbody,
  .table_list th,
  .table_list td,
  .table_list tr {
    display: block;
  }
  .table_list thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .table_list tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .table_list td {
    border: none !important;
    border-bottom: 1px solid #eee !important;
    position: relative;
    white-space: normal;
    text-align: left;
  }
  .table_list td:before {
    content: attr(data-title);
    top: 0.5em;
    left: 0.5em;
    width: 30%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: #000;
  }
  .table_list td.aCenter {
    text-align: left;
  }
  .table_list td.aRight {
    text-align: left;
  }
  .table_list td.date {
    text-align: left;
  }
  .table_list td a {
    display: inline-block;
  }
  .table_list td br {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .table_list2 {
    background-color: transparent !important;
  }
  .table_list2 thead,
  .table_list2 tbody,
  .table_list2 th,
  .table_list2 td,
  .table_list2 tr {
    display: block;
  }
  .table_list2 thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .table_list2 tr {
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .table_list2 td {
    border: none !important;
    border-bottom: 1px solid #eee !important;
    position: relative;
    padding-left: 35% !important;
    white-space: normal;
    text-align: left;
  }
  .table_list2 td:before {
    content: attr(data-title);
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: 30%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: #000;
  }
  .table_list2 td.aCenter {
    text-align: left;
  }
  .table_list2 td.cancelpadding {
    padding-left: 10px !important;
  }
}

.table_list3 {
  width: 100%;
  display: block;
  clear: both;
  zoom: 1;
  overflow: hidden;
  overflow-x: auto;
}
.table_list3 table td ul {
  margin: 10px;
  padding: 0;
  list-style-type: none;
}
.table_list3 table td ul li {
  padding: 0 0 0 15px;
  margin-bottom: 5px;
  position: relative;
}
.table_list3 table td ul li:before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #333;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 0;
}
@media (max-width: 1200px) {
  .table_list3 {
    background-color: transparent !important;
  }
  .table_list3 thead,
  .table_list3 tbody,
  .table_list3 th,
  .table_list3 td,
  .table_list3 tr {
    display: block;
  }
  .table_list3 thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .table_list3 tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .table_list3 td {
    border: none !important;
    border-bottom: 1px solid #eee !important;
    position: relative;
    white-space: normal;
    text-align: left;
  }
  .table_list3 td:before {
    content: attr(data-title);
    top: 0.5em;
    left: 0.5em;
    width: 30%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: #000;
  }
  .table_list3 td.aCenter {
    text-align: left;
  }
  .table_list3 td a {
    display: inline-block;
  }
  .table_list3 td br {
    display: none;
  }
}

.form_grid {
  margin: 0em;
}
.form_grid .form_grp {
  border-bottom: 1px solid #ddd;
  padding: 0.4em 0;
  display: flex;
  flex-wrap: wrap;
}
.form_grid .form_title {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  padding-top: 0.5em;
  padding-left: 20px;
  margin-top: 0;
}
@media (min-width: 768px) {
  .form_grid .form_title {
    float: left;
    width: 25%;
  }
}
@media (min-width: 992px) {
  .form_grid .form_title {
    float: left;
    width: 25%;
  }
}
@media (min-width: 1400px) {
  .form_grid .form_title {
    float: left;
    width: 25%;
  }
}
.form_grid .form_title.hidden + .form_content {
  width: 100%;
}
.form_grid .form_content {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  padding-top: 0.5em;
}
@media (min-width: 768px) {
  .form_grid .form_content {
    float: left;
    width: 75%;
  }
}
@media (min-width: 992px) {
  .form_grid .form_content {
    float: left;
    width: 75%;
  }
}
@media (min-width: 1400px) {
  .form_grid .form_content {
    float: left;
    width: 75%;
  }
}

form .form_grp,
form .check_grp,
form .radio_grp,
form .btn_grp,
form .upload_grp {
  margin-bottom: 0.2em;
}
form .check_grp label,
form .radio_grp label {
  display: block;
}
form .check_grp.form_inline label,
form .radio_grp.form_inline label {
  display: inline-block;
  margin: 0.2em 0.5em 0 0;
}
form .form_grp.form_inline,
form .upload_grp.form_inline {
  position: relative;
}
form .form_grp.form_inline label,
form .upload_grp.form_inline label {
  display: inline-block;
  margin-right: 0.5em;
}
form .form_grp.form_inline input,
form .form_grp.form_inline textarea,
form .form_grp.form_inline select,
form .upload_grp.form_inline input,
form .upload_grp.form_inline textarea,
form .upload_grp.form_inline select {
  width: auto;
}
form.form_inline label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}
form.form_inline label ~ input, form.form_inline label ~ textarea {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
form.form_inline input[type=text],
form.form_inline input[type=password],
form.form_inline select,
form.form_inline textarea {
  width: auto;
  display: inline-block;
}
form.form_inline .form_grp,
form.form_inline .check_grp,
form.form_inline .radio_grp,
form.form_inline .btn_grp,
form.form_inline .upload_grp {
  display: inline-block;
  margin-right: 0.5em;
}
form.form_inline .btn_grp .btn,
form.form_inline .btn_grp input[type=submit],
form.form_inline .btn_grp input[type=reset],
form.form_inline .btn_grp input[type=button],
form.form_inline .btn_grp input[type=search] {
  margin-top: -3px;
  padding: 0.45em 1em;
}
form.form_inline select,
form.form_inline textarea {
  width: auto;
}

label,
legend {
  display: inline-block;
  margin: 0 0 0.5em 0;
}
@media screen and (max-width: 575px) {
  label,
  legend {
    display: inline-block;
  }
}
label.inline input,
label.inline select,
label.inline textarea,
legend.inline input,
legend.inline select,
legend.inline textarea {
  width: auto;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

input,
textarea,
select,
button {
  color: #666;
  font-size: 1em;
  border: 1px solid #d3d3d3;
  padding: 0.5em;
  background: #fff;
  vertical-align: middle;
  margin-bottom: 0.3em;
  box-sizing: border-box;
  border-radius: 5px;
  transition: border, 0.2s, ease-out;
  transition: box-shadow, 0.2s, ease-out;
  border-radius: 4px;
}

input,
select,
textarea {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none;
  /*IE*/
}

input[type=text]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=file]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=mail]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #666;
}
input[type=text]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=file]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=mail]::-moz-placeholder,
input[type=number]::-moz-placeholder {
  /* Firefox 19+ */
  color: #666;
}
input[type=text]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=file]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=mail]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder {
  /* IE 10+ */
  color: #666;
}
input[type=text]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=file]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=mail]:-moz-placeholder,
input[type=number]:-moz-placeholder {
  /* Firefox 18- */
  color: #666;
}

button,
input[type=button] {
  background: #555;
  border: 1px solid #484848;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
  width: auto;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
}
button:hover,
input[type=button]:hover {
  background: #5d5d5d;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button:focus,
input[type=button]:focus {
  background: #5d5d5d;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.active,
input[type=button].active {
  background: #5d5d5d;
  cursor: pointer;
}
button.btn-green,
input[type=button].btn-green {
  background: #107859;
  border: 1px solid #0d6248;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
button.btn-green:hover,
input[type=button].btn-green:hover {
  background: #128663;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-green:focus,
input[type=button].btn-green:focus {
  background: #128663;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-green.active,
input[type=button].btn-green.active {
  background: #128663;
  cursor: pointer;
}
button.btn-blue,
input[type=button].btn-blue {
  background: #3e78c0;
  border: 1px solid #386cad;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
button.btn-blue:hover,
input[type=button].btn-blue:hover {
  background: #4980c4;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-blue:focus,
input[type=button].btn-blue:focus {
  background: #4980c4;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-blue.active,
input[type=button].btn-blue.active {
  background: #4980c4;
  cursor: pointer;
}
button.btn-yellow,
input[type=button].btn-yellow {
  background: #f1ad00;
  border: 1px solid #d89b00;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
button.btn-yellow:hover,
input[type=button].btn-yellow:hover {
  background: #ffb701;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-yellow:focus,
input[type=button].btn-yellow:focus {
  background: #ffb701;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-yellow.active,
input[type=button].btn-yellow.active {
  background: #ffb701;
  cursor: pointer;
}
button.btn-orange,
input[type=button].btn-orange {
  background: #b94b00;
  border: 1px solid #a04100;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
button.btn-orange:hover,
input[type=button].btn-orange:hover {
  background: #c85100;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-orange:focus,
input[type=button].btn-orange:focus {
  background: #c85100;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-orange.active,
input[type=button].btn-orange.active {
  background: #c85100;
  cursor: pointer;
}
button.btn-red,
input[type=button].btn-red {
  background: #dc0122;
  border: 1px solid #c3011e;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
button.btn-red:hover,
input[type=button].btn-red:hover {
  background: #eb0124;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-red:focus,
input[type=button].btn-red:focus {
  background: #eb0124;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-red.active,
input[type=button].btn-red.active {
  background: #eb0124;
  cursor: pointer;
}
button.btn-purple,
input[type=button].btn-purple {
  background: #aa5ac5;
  border: 1px solid #a047be;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
button.btn-purple:hover,
input[type=button].btn-purple:hover {
  background: #b065c9;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-purple:focus,
input[type=button].btn-purple:focus {
  background: #b065c9;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-purple.active,
input[type=button].btn-purple.active {
  background: #b065c9;
  cursor: pointer;
}
button.btn-gray,
input[type=button].btn-gray {
  background: #555;
  border: 1px solid #484848;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
button.btn-gray:hover,
input[type=button].btn-gray:hover {
  background: #5d5d5d;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-gray:focus,
input[type=button].btn-gray:focus {
  background: #5d5d5d;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-gray.active,
input[type=button].btn-gray.active {
  background: #5d5d5d;
  cursor: pointer;
}
button.btn-white,
input[type=button].btn-white {
  background: #fff;
  border: 1px solid #f2f2f2;
  color: #333;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
button.btn-white:hover,
input[type=button].btn-white:hover {
  background: white;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-white:focus,
input[type=button].btn-white:focus {
  background: white;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-white.active,
input[type=button].btn-white.active {
  background: white;
  cursor: pointer;
}
button.btn-white:hover, button.btn-white:focus,
input[type=button].btn-white:hover,
input[type=button].btn-white:focus {
  color: #333;
  background: #e6e6e6;
}
button.btn-greenline,
input[type=button].btn-greenline {
  background: #06c755;
  border: 1px solid #05ae4a;
  color: #333;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
button.btn-greenline:hover,
input[type=button].btn-greenline:hover {
  background: #06d65b;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-greenline:focus,
input[type=button].btn-greenline:focus {
  background: #06d65b;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-greenline.active,
input[type=button].btn-greenline.active {
  background: #06d65b;
  cursor: pointer;
}
button.btn-greenline:hover,
input[type=button].btn-greenline:hover {
  color: #333;
}
button.btn_active,
input[type=button].btn_active {
  background: #b94b00;
  border: 1px solid #a04100;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
button.btn_active:hover,
input[type=button].btn_active:hover {
  background: #c85100;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn_active:focus,
input[type=button].btn_active:focus {
  background: #c85100;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn_active.active,
input[type=button].btn_active.active {
  background: #c85100;
  cursor: pointer;
}

input[type=submit] {
  background: #005d98;
  border: 1px solid #004d7f;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
}
input[type=submit]:hover {
  background: #0066a7;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
input[type=submit]:focus {
  background: #0066a7;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
input[type=submit].active {
  background: #0066a7;
  cursor: pointer;
}

textarea {
  color: #666;
  font-size: 1em;
  border: 1px solid #d3d3d3;
  padding: 0.5em;
  background: #fff;
  vertical-align: middle;
  margin-bottom: 0.3em;
  box-sizing: border-box;
  border-radius: 5px;
  transition: border, 0.2s, ease-out;
  transition: box-shadow, 0.2s, ease-out;
  height: 5em;
  overflow-y: scroll;
}
@media screen and (max-width: 575px) {
  textarea {
    width: 100%;
  }
}

button:focus,
input[type=button]:focus,
input[type=submit]:focus,
input[type=text]:focus,
input[type=reset]:focus,
input[type=file]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
  outline: none;
}

select {
  line-height: 2.4em;
  height: 2.4em;
  padding: 0 24px 0 0.5em;
  border: 1px solid #d3d3d3 !important;
  background: #fff url("../images/basic/icon_select_arrow.svg") no-repeat right center;
  background-size: 25px;
  margin-right: 2px;
  display: inline-block;
  box-shadow: none;
}
select option {
  outline: none;
  border: none;
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

input[type=reset] {
  background: #555;
  border: 1px solid #484848;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
  text-shadow: none;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
}
input[type=reset]:hover {
  background: #5d5d5d;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
input[type=reset]:focus {
  background: #5d5d5d;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
input[type=reset].active {
  background: #5d5d5d;
  cursor: pointer;
}

input[type=checkbox],
input[type=radio] {
  font-size: 1em;
  margin: -3px 0.4em 0 0;
  width: 1em;
  height: 1em;
  background-color: #f7f6ee;
  border: 1px solid #999;
}

input[type=radio] {
  border-radius: 50%;
}

input[type=checkbox]:checked,
input[type=checkbox]:focus,
input[type=radio]:checked,
input[type=radio]:focus {
  border-color: #f1ad00;
  background-color: #f1ad00;
  outline: none;
}

input[type=checkbox]:checked {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAg0lEQVRYhe3VQQrAIAxEUY/sTTzydNNuBEliklFK5gC+Dy3aWq1GGoAOoJ/Ev3EjJpwbscA5EQIOAONO3Pu3RuDb3ygSN0dk4OoIF/4eMIQDlhFu3BMRhu9EhOOWiDTcEJGHOyNir1djRM7drozIe1gUEbm4EMHBFxFcfIo4g9dqv9wDlueWlO5nssIAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 98%;
  box-shadow: #b94b00 0 0 0 1px;
  border-radius: 3px;
}

input[type=radio]:checked {
  box-shadow: #fff 0 0 0 3px inset, #f1ad00 0 0 0 2px;
}

input[type=radio]:focus {
  border-color: #f1ad00;
  background-color: #f1ad00;
  box-shadow: #fff 0 0 0 3px inset, #f1ad00 0 0 0 2px;
}

input[type=checkbox]:focus {
  border-color: #f1ad00;
  background-color: #f1ad00;
  box-shadow: #f1ad00 0 0 0 2px;
}

input[readonly],
input[disable] {
  background: #f9f9f9;
  color: #bababa;
  border-color: #bababa;
}
input[readonly] ~ label,
input[disable] ~ label {
  color: #bababa;
}
input[readonly]:hover, input[readonly]:focus,
input[disable]:hover,
input[disable]:focus {
  border-color: #bababa;
  box-shadow: none;
}

.upload_grp {
  position: relative;
}
.upload_grp input[readonly],
.upload_grp input[disable] {
  background: transparent;
  color: #666;
}
.upload_grp .upload_btn {
  position: absolute;
  overflow: hidden;
  top: 1px;
  right: 3px;
  background: #555;
  border: 1px solid #484848;
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
  padding: 0.2em 1em !important;
  border-radius: 4px;
}
.upload_grp .upload_btn:hover {
  background: #5d5d5d;
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.upload_grp .upload_btn:focus {
  background: #5d5d5d;
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.upload_grp .upload_btn.active {
  background: #5d5d5d;
  cursor: pointer;
}
.upload_grp .upload_btn:hover, .upload_grp .upload_btn:focus {
  cursor: pointer !important;
}
.upload_grp .upload_btn:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
  background-color: #000;
}

input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 1.25em;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

img.captcha {
  display: inline-block;
  vertical-align: middle;
  max-height: 2.4em;
  margin-bottom: 0;
}
img.captcha + input {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
img.captcha ~ img {
  display: inline-block;
  vertical-align: middle;
  max-height: 2.4em;
  margin-bottom: 0.5em;
}

abbr {
  color: #ff0000 !important;
  margin: 0px 5px 0 -18px;
  font-size: 1.25em;
  font-weight: bold;
  vertical-align: middle;
  line-height: 110%;
}

abbr[title] {
  border-bottom: none;
  text-decoration: none;
}

.select_date {
  float: left;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 0.3em;
  width: 100%;
}
.select_date input {
  margin-bottom: 0;
  border: none;
  padding: 0.4em;
  width: 75%;
  z-index: 8;
}
.select_date .image {
  float: right;
  margin-top: 5px;
}
.select_date .image img {
  vertical-align: middle;
  margin-right: 5px;
  width: 20px;
}

input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none;
  /*IE*/
}

.any_width {
  width: auto !important;
  margin-right: 10px;
}
@media (max-width: 400px) {
  .any_width {
    width: 100% !important;
    margin-right: 0;
  }
}

.password_toggle {
  position: relative;
}
.password_toggle button.btn-icon {
  font-size: 0;
  right: 0.5em;
  top: 3px;
  height: 30px;
  background: none;
  border: transparent;
  position: absolute;
  padding: 0 !important;
  min-width: 3em;
  box-shadow: none;
  margin-right: 22px;
}
.password_toggle button.btn-icon:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.password_toggle button.btn_icon_hide {
  background-image: url("../images/icon/icon_hide.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  width: 20px;
}
.password_toggle button.btn_icon_show {
  background-image: url("../images/icon/icon_show.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  width: 20px;
}
@media screen and (max-width: 991px) {
  .password_toggle button {
    top: 1.7em;
  }
}

.form-group {
  margin-left: 20%;
}
@media screen and (max-width: 991px) {
  .form-group {
    margin-left: 0;
  }
}
.form-group img {
  vertical-align: center;
  margin-bottom: 0;
}
@media (max-width: 400px) {
  .form-group img {
    margin-bottom: 6px;
  }
}

[class^=i_]:before {
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  vertical-align: middle;
  speak: none;
}

.i_invert:before {
  filter: invert(100%);
}

.i_apple:before {
  background-image: url(../images/icon/icon_apple.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_arrow_left:before {
  background-image: url(../images/icon/icon_arrow_left.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_arrow_right:before {
  background-image: url(../images/icon/icon_arrow_right.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_bookmark:before {
  background-image: url(../images/icon/icon_bookmark.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_chat:before {
  background-image: url(../images/icon/icon_chat.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_check:before {
  background-image: url(../images/icon/icon_check.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_clock:before {
  background-image: url(../images/icon/icon_clock.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_close:before {
  background-image: url(../images/icon/icon_close.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_edit:before {
  background-image: url(../images/icon/icon_edit.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_facebook:before {
  background-image: url(../images/icon/icon_facebook.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_googleplus:before {
  background-image: url(../images/icon/icon_googleplus.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_grid:before {
  background-image: url(../images/icon/icon_grid.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_heart:before {
  background-image: url(../images/icon/icon_heart.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_home:before {
  background-image: url(../images/icon/icon_home.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_hide:before {
  background-image: url(../images/icon/icon_hide.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_info:before {
  background-image: url(../images/icon/icon_info.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_link:before {
  background-image: url(../images/icon/icon_link.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_linkedin:before {
  background-image: url(../images/icon/icon_linkedin.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_lock:before {
  background-image: url(../images/icon/icon_lock.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_mail:before {
  background-image: url(../images/icon/icon_mail.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_rss:before {
  background-image: url(../images/icon/icon_rss.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_setting:before {
  background-image: url(../images/icon/icon_setting.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_star:before {
  background-image: url(../images/icon/icon_star.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_show:before {
  background-image: url(../images/icon/icon_show.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_twitter:before {
  background-image: url(../images/icon/icon_twitter.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_video:before {
  background-image: url(../images/icon/icon_video.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_vimeo:before {
  background-image: url(../images/icon/icon_vimeo.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

.i_youtube:before {
  background-image: url(../images/icon/icon_youtube.svg);
  background-size: cover;
  margin-top: -0.1em;
  margin-bottom: 0.1em;
}

body {
  -webkit-text-size-adjust: none;
}

a:focus {
  outline: none;
  box-shadow: 0 0px 0px 2px #f1ad00 inset;
}

.accesskey {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 5;
  color: rgba(232, 224, 196, 0.5);
  font-size: 1em;
}
.accesskey:hover {
  color: rgba(232, 224, 196, 0.5);
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  .accesskey {
    display: none;
  }
}

a.more {
  display: block;
  width: 10em;
  text-align: center;
  height: 2.5em;
  margin: 0.5em auto 0.5em;
  line-height: 2.5;
  color: #005d98;
  border: 1px solid #005d98;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  transition-property: color;
  transition-duration: 0.2s;
}
a.more:after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  right: -10px;
  top: 14px;
  border-left: none;
  border-bottom: none;
  transition: 0.3s ease-out;
}
a.more:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #005d98;
  transform: scale(0);
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
a.more:hover, a.more:focus, a.more.active {
  color: white;
}
a.more:hover:before, a.more:focus:before, a.more.active:before {
  transform: scale(1);
}
a.more:hover:after, a.more:focus:after, a.more.active:after {
  right: 15px;
}

.scrollToTop {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  color: #fff;
  line-height: 70px;
  text-decoration: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  transition: 0.3s ease-out;
  display: none;
  z-index: 9;
}
.scrollToTop:hover, .scrollToTop:focus {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f1ad00;
}
.scrollToTop:before {
  content: "";
  border: 7px solid #fff;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: 5px;
  left: 36%;
}

img.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.necessary {
  color: red;
  margin: 0px 0.2em;
}

.tooltip {
  text-align: center;
  padding: 40px 0;
}
.tooltip span {
  display: inline-block;
  background: #dedede;
  text-align: center;
  padding: 10px;
  width: 100px;
  height: 20px;
  line-height: 20px;
  vertical-align: baseline;
}
.tooltip p > em {
  color: red;
}

.hr_block {
  text-align: left;
}
.hr_block span {
  font-size: 0.75em;
}
.hr_block hr {
  margin: 10px 0 !important;
}

/*檔案下載*/
.file_download {
  width: 100%;
  margin: 0 auto;
  clear: both;
  zoom: 1;
}
.file_download:before, .file_download:after {
  content: "";
  display: table;
}
.file_download:after {
  clear: both;
}
.file_download h3 {
  font-size: 1.25em;
  padding: 12px 20px 15px;
  margin: 0.5em 0px 0.2em;
  background-color: #eee;
  color: #333 !important;
}
.file_download ul {
  counter-reset: counter;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.file_download li {
  position: relative;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #ccc;
  padding: 0.5em 0 0.5em 45px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .file_download li {
    flex-wrap: wrap;
  }
}
.file_download li:before {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  text-align: right;
  width: 30px;
  counter-increment: counter;
  content: counters(counter, ".") " . ";
}
@media screen and (max-width: 767px) {
  .file_download li:before {
    top: 0.6em;
    transform: none;
  }
}
.file_download li .update,
.file_download li .file_view {
  font-size: 0.813em;
  color: #aaa;
  width: 100px;
  float: right;
  margin-top: 5px;
}
@media screen and (max-width: 767px) {
  .file_download li .update,
  .file_download li .file_view {
    display: inline-block;
    float: none;
    width: auto;
    margin-top: 0;
  }
}
@media screen and (max-width: 575px) {
  .file_download li .update,
  .file_download li .file_view {
    display: none;
  }
}
.file_download li .update {
  width: 150px;
}
@media screen and (max-width: 767px) {
  .file_download li .update {
    margin-left: 5px;
  }
}
.file_download li span {
  flex: 0 0 auto;
  color: #999;
  padding: 0 0.3em;
}
.file_download li .valuedata {
  flex: 1 1 auto;
  text-align: left;
  display: none;
  word-break: break-all;
  background-color: #fef3d0;
  padding: 0.8em 1em;
  border-radius: 5px;
  margin-left: 1em;
}
@media screen and (max-width: 767px) {
  .file_download li .valuedata {
    margin-left: 0;
    margin-top: 0.3em;
  }
}
.file_download li .valuedata ul {
  margin: 0;
  padding: 0;
  list-style: disc;
}
.file_download li .valuedata ul li {
  padding: 0.2em 0.3em 0.2em 1em;
  border-bottom: 0;
  margin-bottom: 0.5em;
}
.file_download li .valuedata ul li:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50px;
  background-color: #333;
  position: absolute;
  left: 0;
  top: 1em;
}
@media screen and (max-width: 767px) {
  .file_download li .valuedata ul li:before {
    top: 0.8em;
  }
}
.file_download li .valuedata span {
  padding: 0;
  color: #dc0122;
}
@media screen and (max-width: 767px) {
  .file_download li .valuedata {
    flex-basis: 100%;
    text-align: left;
  }
}
.file_download li a {
  flex: 0 0 auto;
  padding: 0;
  position: relative;
  line-height: 1.45em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.file_download li a.directions_icon {
  padding: 0;
}
.file_download li a.directions_icon img {
  width: 22px;
  vertical-align: middle;
}
.file_download li a .kb {
  font-size: 0.75em;
  color: #666;
  display: inline-block;
  margin: 0px 0.5em;
}
.file_download li a:hover, .file_download li a:focus {
  color: #dd1f03 !important;
}

.web_link {
  width: 100%;
  margin: 0 auto;
  clear: both;
  zoom: 1;
}
.web_link:before, .web_link:after {
  content: "";
  display: table;
}
.web_link:after {
  clear: both;
}
.web_link h3 {
  font-size: 1.5em;
  padding: 12px 0px 15px 0px;
  margin: 0.5em 0px 0.2em;
  border-bottom: 1px solid #005d98;
}
.web_link ol,
.web_link ul {
  counter-reset: counter;
  list-style-type: none;
  padding: 0;
  margin-left: 1em;
}
@media screen and (max-width: 767px) {
  .web_link ol,
  .web_link ul {
    margin-left: 0;
  }
}
.web_link li {
  position: relative;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.web_link li a {
  padding: 0.2em 0px 0.2em 35px;
  position: relative;
  height: auto;
  line-height: 1.45em;
  display: block;
}
.web_link li a:before {
  position: absolute;
  top: 5px;
  left: 0px;
  text-align: right;
  width: 30px;
  counter-increment: counter;
  content: counters(counter, ".") " . ";
}

.header {
  position: fixed;
  z-index: 10;
  height: 55px;
  background: #1b1b1b;
  width: 1400px;
  top: 0;
  background: #5c5c5c;
  background: linear-gradient(to bottom, #5c5c5c, #1b1b1b);
  box-shadow: 0px 2px 5px RGBA(0, 0, 0, 0.3);
}
@media screen and (max-width: 1399px) {
  .header {
    width: 100%;
  }
}
.header > .container .searchCtrl, .header > .container .sidebarCtrl {
  width: 60px !important;
  height: 60px !important;
  position: absolute;
  top: 0px;
  display: block;
  font-size: 0em;
  padding: 15px;
  margin: 0;
  min-width: auto;
  min-height: auto;
  background: transparent;
  border: none;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .header > .container .searchCtrl, .header > .container .sidebarCtrl {
    display: block !important;
  }
}
.header > .container {
  max-width: 1400px;
  overflow: visible;
  position: relative;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.header > .container .sidebarCtrl {
  display: none;
  left: 0px;
  background-image: url("../images/sidebarCtrl.png");
  background-repeat: no-repeat;
  background-position: 15px 15px;
  box-shadow: none;
}
.header > .container .sidebarCtrl span {
  position: absolute;
  background: #fed857;
  width: 50%;
  height: 4px;
  top: 35%;
  left: 50%;
  margin-left: -25%;
  display: block;
}
.header > .container .sidebarCtrl span:nth-child(2) {
  top: 50%;
}
.header > .container .sidebarCtrl span:nth-child(3) {
  top: 65%;
}
.header > .container .accesskey {
  color: #1b1b1b;
}
.header > .container .accesskey:hover, .header > .container .accesskey:focus {
  color: #fff;
}
.header > .container .searchCtrl {
  display: none;
  right: 0px;
  font-size: 0em;
}
.header > .container .searchCtrl:before {
  width: 40px;
  height: 40px;
  background: url(../images/basic/icon_search.png) no-repeat center center;
  background-size: 32px;
  opacity: 0.6;
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
}
.header h1 {
  flex: none;
  flex-basis: 200px;
  width: 200px;
  height: 39px;
  margin: -3px 0 0 20px;
  padding: 0;
  order: -1;
  box-sizing: border-box;
}
.header h1 a {
  display: inline-block;
}
.header h1 img {
  display: block;
  max-width: 220px;
  max-height: 50px;
}
@media screen and (max-width: 767px) {
  .header h1 {
    padding: 2px 60px;
    width: 100%;
    text-align: center;
    height: 50px;
    margin: -5px 0 8px;
  }
  .header h1 img {
    width: auto;
    height: auto;
    max-height: 50px;
    margin: 0px auto;
  }
}
@media (max-width: 345px) {
  .header h1 {
    padding: 2px 60px 2px 50px;
  }
  .header h1 img {
    width: auto;
    height: auto;
    max-height: 50px;
    margin: 0px auto;
    transform: scale(0.8);
  }
}
.header .navigation {
  flex: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.header .navigation > ul {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: 0.938em;
  list-style: none;
  vertical-align: middle;
}
.header .navigation > ul.left_nav {
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .header .navigation > ul.left_nav {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .header .navigation > ul {
    display: none;
  }
}
.header .navigation li {
  float: left;
  margin: 0 0.2em;
}
.header .navigation li a {
  display: inline-block;
  padding: 0.4em 0.5em;
  text-decoration: none;
  color: #fff;
}
.header .navigation li a:hover {
  color: #fed857;
}
.header .language {
  margin-top: 0px;
  margin-right: 10px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .header .language {
    display: none;
  }
}
.header .language a {
  color: #333;
  display: block;
  background-color: #fed857;
  border-radius: 50px;
  width: 130px;
  font-size: 0.938em;
  padding: 4px 30px 3px 15px;
  background-image: url(../images/language_icon.png);
  background-repeat: no-repeat;
  background-position: right center;
  text-align: left;
  margin-bottom: 3px;
  overflow: hidden;
  box-sizing: border-box;
}
.header .language a:hover {
  color: #000 !important;
}
.header .language ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: none;
  position: absolute;
  top: auto;
  left: 0;
}
.header .language ul li {
  margin: 0 0 2px;
  width: 100%;
}
.header .language ul li a {
  background-image: none;
  color: #333;
  text-align: left;
  padding: 3px 15px 3px;
  display: block;
  transition: 0.5s;
  margin: 0;
  box-sizing: border-box;
}
.header .language ul li a:hover {
  background-color: #fffbef;
  color: #000 !important;
}
.header .login {
  margin-top: 0px;
  margin-right: 20px;
}
@media screen and (max-width: 991px) {
  .header .login {
    margin-right: 10px;
  }
}
@media screen and (max-width: 767px) {
  .header .login {
    position: absolute;
    right: 10px;
    top: 10px;
    margin: 0;
    display: none;
  }
}
.header .login .btn {
  box-sizing: border-box;
  padding: 4px 15px 3px !important;
  border-radius: 50px;
}
@media screen and (max-width: 767px) {
  .header .login .btn {
    min-width: auto;
    padding: 4px 10px 3px !important;
  }
}
.header .login_mobile_btn {
  display: none;
}
@media screen and (max-width: 767px) {
  .header .login_mobile_btn {
    display: block;
  }
}
.header .qrcode_mpbtn {
  margin-right: 10px;
}
@media screen and (max-width: 767px) {
  .header .qrcode_mpbtn {
    position: absolute;
    right: 72px;
    top: 14px;
    margin: 0;
  }
}
.header .qrcode_mpbtn a {
  display: block;
}
.header .qrcode_mpbtn a img {
  width: 23px;
  height: 23px;
  vertical-align: middle;
}
.header .qrcode_mpbtn a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.header .menu {
  display: none;
}
.header .member_record {
  display: inline-block;
  position: relative;
  margin-right: 20px;
}
@media screen and (max-width: 767px) {
  .header .member_record {
    position: absolute;
    right: 20px;
    top: 10px;
    margin: 0;
    display: block;
    z-index: 8;
    display: none;
  }
}
.header .member_record .heart {
  display: inline-block;
  margin-right: 10px;
  margin-top: 5px;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .header .member_record .heart {
    display: none;
  }
}
.header .member_record .heart .comment {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  padding: 2px 5px;
  border-radius: 5px;
  position: absolute;
  left: -25%;
  top: 40px;
  font-size: 0.813em;
  display: none;
}
.header .member_record .member_name {
  display: inline-block;
  color: #fff;
  margin-right: 10px;
  margin-top: 0;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .header .member_record .member_name {
    display: none;
  }
}
.header .member_record .member_pic {
  width: 35px;
  height: 35px;
  display: inline-block;
  border-radius: 50%;
  background-color: #dcdcdc;
  text-align: center;
  line-height: 35px;
  position: relative;
  margin-right: 0px;
  margin-top: 0;
  vertical-align: middle;
  padding-top: 0;
  box-sizing: border-box;
}
.header .member_record .member_pic a {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  position: relative;
  overflow: hidden;
}
.header .member_record .member_pic a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.header .member_record .member_pic img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.header .member_record .member_pic span {
  width: auto;
  height: 13px;
  border-radius: 50px;
  background-color: #dc0122;
  color: #fff;
  text-align: center;
  position: absolute;
  bottom: -3px;
  right: -5px;
  display: block;
  line-height: 1em;
  padding: 2px 5px;
  font-size: 0.813em;
}
.header .member_record .member_data {
  background-color: #fff;
  clear: both;
  float: none;
  padding: 0px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  position: absolute;
  width: 170px;
  right: -10px;
  top: 43px;
  text-align: left;
  display: none;
}
.header .member_record .member_data > ul {
  margin: 0;
  padding: 0;
}
.header .member_record .member_data > ul > li {
  list-style-type: none;
  border-bottom: 1px solid #d2d2d2;
  display: block;
  float: none;
  clear: both;
  overflow: hidden;
  margin: 0;
}
.header .member_record .member_data > ul > li:last-child {
  border-bottom: none;
}
.header .member_record .member_data > ul > li a {
  padding: 12px 15px 10px;
  display: block;
  color: #333;
  transition: 0.5s;
}
.header .member_record .member_data > ul > li a.signout {
  border-radius: 50px;
  background-color: #fff;
  border: 1px solid #d2d2d2;
  text-align: center;
  margin: 15px auto 10px;
  width: 70px;
  padding: 5px 20px;
}
.header .member_record .member_data > ul > li a.signout:hover {
  background-color: #d2d2d2;
  color: #333;
}
.header .member_record .member_data > ul > li a:hover {
  color: #000;
  background-color: #eee;
}
.header .member_record .member_data > ul > li ul {
  margin: 0 0 10px;
  padding: 0;
  float: none;
  clear: both;
}
.header .member_record .member_data > ul > li ul li {
  font-size: 0.983em;
  list-style-type: none;
  float: none;
  clear: both;
  margin: 0;
}
.header .member_record .member_data > ul > li ul li a {
  color: #666;
  padding: 5px 10px 5px 30px;
  position: relative;
}
.header .member_record .member_data > ul > li ul li a:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 14px;
  left: 17px;
  background-color: #666;
}
.header .member_record .member_data > ul > li ul li a:hover {
  color: #000;
  background-color: #ffc;
}
.header .member_record .member_data > ul > li ul li a:hover:before {
  background-color: #333;
}
.header .member_mobile_btn {
  display: none;
}
@media screen and (max-width: 767px) {
  .header .member_mobile_btn {
    display: block;
  }
}

.search {
  min-width: 25%;
  max-width: 50%;
  float: right;
  vertical-align: middle;
  padding: 0em 0.3em 0em;
  box-sizing: border-box;
}
.search label {
  font-size: 0em;
}
.search .form_grp {
  margin-bottom: 0;
  margin-right: 0 !important;
}
.search .form_grp input {
  margin: -0.2em 0 0;
  padding: 0.2em 35px 0.2em 0.5em;
}
.search .form_grp input[type=submit] {
  font-size: 0em;
  width: 30px !important;
  height: 30px;
  max-width: auto;
  min-width: auto;
  background: url(../images/basic/icon_search.png) no-repeat center center;
  background-size: 20px;
  border: none;
  display: inline-block;
  margin-left: -40px !important;
  margin-top: -2px !important;
  opacity: 0.8;
}
.search .form_grp input[type=submit]:hover, .search .form_grp input[type=submit]:focus {
  opacity: 1;
}
.search .btn_grp {
  padding: 0.2em;
  margin-bottom: 0;
}
.search .btn_grp input,
.search .btn_grp input[type=submit] {
  margin: 0;
  padding: 0.4em 1em 0.4em !important;
  font-size: 0.813em;
}
.search .keywordHot {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
  padding: 0.1em 0 0.3em;
}
.search .keywordHot ul {
  display: inline-block;
  font-size: 0.813em;
  line-height: 1.65em;
  margin: 0;
  padding: 0;
}
.search .keywordHot ul:before {
  display: inline-block;
  content: "熱門關鍵字：";
  color: #999;
  float: left;
}
.search .keywordHot ul li {
  margin: 0 0.6em 0 0;
  padding: 0;
  display: inline-block;
}
.search .keywordHot ul a:hover, .search .keywordHot ul a:focus {
  text-decoration: underline;
}
.search.m_search {
  width: 100% !important;
  max-width: 100% !important;
  min-width: auto;
  padding: 0.2em 0.3em 0.5em;
  display: block;
  height: auto;
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 98;
  background: #333;
}
.search.m_search label {
  font-size: 0em;
  line-height: 0;
}
.search.m_search .form_grp {
  width: 65%;
  height: auto;
  padding: 0 0 0 5% !important;
  margin-top: 0;
  text-align: right;
  float: left;
  height: 50px;
  position: relative;
  box-sizing: border-box;
}
.search.m_search .form_grp input {
  width: 100%;
  margin: -0.2em 0 0;
  padding: 0.5em 45px 0.4em 0.5em;
}
.search.m_search .form_grp input[type=submit] {
  font-size: 0em;
  width: 36px !important;
  height: 36px;
  padding: 0;
  max-width: auto;
  min-width: auto;
  background: url(../images/basic/icon_search.png) no-repeat center center;
  background-size: 24px;
  border: none;
  display: inline-block;
  position: absolute;
  right: 5px;
  top: 22px;
  opacity: 0.8;
}
.search.m_search .form_grp input[type=submit]:hover, .search.m_search .form_grp input[type=submit]:focus {
  opacity: 1;
}
.search.m_search .btn_grp {
  display: inline-block;
  padding: 0.2em;
  margin-bottom: 0;
  width: 20%;
  margin-top: 20px;
  padding-left: 5%;
  box-sizing: border-box;
}
.search.m_search .btn_grp input {
  width: 80% !important;
  padding: 0.6em 1em 0.7em !important;
  margin: 0;
}
.search.m_search .keywordHot {
  padding-left: 5%;
  margin-top: 10px;
  clear: both;
  zoom: 1;
}
.search.m_search .keywordHot:before, .search.m_search .keywordHot:after {
  content: "";
  display: table;
}
.search.m_search .keywordHot:after {
  clear: both;
}
.search.m_search .keywordHot a {
  color: #FFF;
}
.search.m_search .keywordHot a:hover, .search.m_search .keywordHot a:focus {
  color: #005d98;
}

.header.fixed {
  position: fixed;
  width: 100%;
  right: 0;
  top: 0;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 25px;
  background: #1b1b1b;
  z-index: 7;
}
.header.fixed .menu > ul > li > a {
  color: #FFF;
}

.menu {
  box-sizing: border-box;
  margin: 0 auto;
  min-height: 2.5em;
  position: relative;
  z-index: 99;
  clear: both;
  display: none;
}
.menu > ul {
  text-align: left;
  margin: 0;
  padding: 0;
}
.menu > ul > li {
  display: inline-block;
  vertical-align: top;
  min-width: 10em;
}
.menu > ul > li > a {
  display: block;
  padding: 0 1em;
  height: 2.5em;
  font-weight: bold;
  line-height: 2.5em;
}
.menu > ul ul {
  display: none;
  overflow: visible;
  width: 200px;
  background: rgba(0, 0, 0, 0.8);
  padding: 0;
  z-index: 999999;
  position: absolute;
  top: auto;
  left: 0;
  list-style: none;
  text-align: left;
}
.menu > ul ul ul {
  top: 0;
  left: 170px;
}
.menu li {
  position: relative;
}
.menu li a {
  display: block;
  outline: none;
  text-decoration: none;
}
.menu li li {
  float: none;
}
.menu li li a {
  padding: 1em 1.2em;
  color: #FFF;
}
.menu li li a:hover, .menu li li a:focus {
  background: #005d98;
}
.menu li li.hasChild > ul {
  z-index: 999;
}
.menu li li.hasChild > a {
  padding-right: 2em;
}
.menu li li.hasChild > a:hover, .menu li li.hasChild > a:focus {
  background: #005d98;
}
.menu li li.hasChild > a:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 1.3em;
  width: 6px;
  height: 6px;
  border: 2px solid #FFF;
  transform: rotate(45deg);
  border-bottom: none;
  border-left: none;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 99999999;
  display: none;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
  box-sizing: border-box;
}
.sidebar > .menu_overlay {
  background: RGBA(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 9;
  display: none;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.sidebar .m_area {
  width: 280px;
  padding-top: 3em;
  position: absolute;
  top: 0;
  left: 0;
  padding-bottom: 3em;
  height: 100%;
  background: #000;
  overflow: hidden;
  overflow-y: auto;
  z-index: 9999;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
  box-sizing: border-box;
}
.sidebar .m_area:before {
  content: "";
  width: 280px;
  position: absolute;
  top: 0;
  left: 0;
  color: #FFF;
  width: 100%;
  height: 3em;
  background: #000;
  padding: 0 1em;
  line-height: 3em;
  box-sizing: border-box;
}
.sidebar .m_area .menu {
  width: 100%;
  box-shadow: 0px 0px 4px RGBA(0, 0, 0, 0.4);
  margin-bottom: 1em;
  background: #CCC;
  display: block;
  margin-top: 0;
  border: none;
  padding-right: 0;
}
.sidebar .m_area .menu li {
  display: block;
  float: none;
  width: 100%;
  margin-left: 0;
}
.sidebar .m_area .menu li ul {
  background: #FFF;
}
.sidebar .m_area .menu li > a {
  padding: 0.5em 1em;
  background: #FFF;
  border-bottom: 1px solid #CCC;
  text-align: left;
}
.sidebar .m_area .menu li > a:hover {
  background-color: #fed857;
}
.sidebar .m_area .menu li.hasChild > a {
  padding: 0.5em 1em !important;
  color: #222;
  background: #FFF;
  padding-right: 36px;
  position: relative;
}
.sidebar .m_area .menu li.hasChild > a:after {
  content: "";
  position: absolute;
  right: 16px;
  top: 1.5em;
  width: 5px;
  line-height: 1.25em;
  height: 5px;
  border: 2px solid #222;
  transform: rotate(45deg);
  border-top: none;
  border-left: none;
  transition: 0.3s;
}
.sidebar .m_area .menu li li {
  background: #FFF;
}
.sidebar .m_area .menu li li a {
  padding: 1em 1em 1em 2em !important;
  background: rgba(0, 0, 0, 0.05);
}
.sidebar .m_area .menu li li a:hover, .sidebar .m_area .menu li li a:focus {
  color: #000;
  background: rgba(0, 0, 0, 0.15);
}
.sidebar .m_area .menu li li a:after {
  display: none;
}
.sidebar .m_area .menu li li.hasChild a {
  background: rgba(0, 0, 0, 0.05);
  padding: 1em 1em 1em 2em !important;
}
.sidebar .m_area .menu li li.hasChild a:hover, .sidebar .m_area .menu li li.hasChild a:focus {
  background: rgba(0, 0, 0, 0.15);
}
.sidebar .m_area .menu a {
  display: block;
  color: #333;
  text-decoration: none;
  transition: 0.4s;
}
.sidebar .m_area .font-size {
  display: none;
}

.sidebar .menu ul ul {
  display: none;
  width: 100%;
  margin: 0;
  background: rgba(0, 0, 0, 0.09);
  font-size: 0.938em;
  position: relative;
}
.sidebar .menu ul ul a {
  padding-left: 2em;
}

.sidebar .menu ul ul ul {
  display: none;
}

.sidebar .navigation {
  position: relative;
  text-align: left;
  display: block;
}

.sidebar .language {
  display: block;
}

.sidebar .login, .sidebar .member_record {
  display: none;
}

.sidebar .navigation ul {
  float: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.sidebar .navigation ul li {
  border-bottom: 1px solid #fff;
  border-top: none;
  border-left: none;
  box-sizing: border-box;
}
.sidebar .navigation ul li:last-child {
  width: 100%;
  border: none;
}
.sidebar .navigation ul li a {
  color: #fff;
  padding: 0.5em 1em;
  display: block;
}

.sidebar button.sidebarClose {
  position: absolute;
  display: block;
  width: 3em !important;
  height: 3em !important;
  padding: 0;
  min-width: auto;
  top: 0px;
  right: 0px;
  margin: 0;
  text-indent: -9999px;
  border: none;
  background: none;
  border: none;
}
.sidebar button.sidebarClose:before {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 3px solid #eee;
  content: "";
  top: 15px;
  right: 10px;
  transform: rotate(45deg);
  border-right: none;
  border-top: none;
}

.sidebar .language {
  display: block;
  margin: 0 10px 1em;
  position: relative;
  z-index: 100;
  box-sizing: border-box;
}
.sidebar .language a {
  color: #333;
  display: block;
  background-color: #fed857;
  border-radius: 50px;
  width: 100%;
  font-size: 0.938em;
  padding: 4px 30px 3px 15px;
  background-image: url(../images/language_icon.png);
  background-repeat: no-repeat;
  background-position: right center;
  margin-bottom: 5px;
  text-align: left;
  box-sizing: border-box;
}
.sidebar .language a:hover {
  color: #000 !important;
}
.sidebar .language ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: none;
  position: absolute;
  top: auto;
  left: 0;
  width: 100%;
  background-color: #000;
  overflow: hidden;
  border-radius: 5px;
  border: none !important;
}
.sidebar .language ul li {
  margin-bottom: 2px;
  width: 100%;
  border: none;
}
.sidebar .language ul li a {
  background-image: none;
  color: #333;
  text-align: left;
  padding: 4px 15px 3px;
  display: block;
  transition: 0.5s;
}
.sidebar .language ul li a:hover {
  background-color: #fee58f;
  color: #000 !important;
}

@keyframes showMenu {
  0% {
    left: 20px;
  }
  100% {
    left: 0px;
  }
}
footer {
  box-sizing: border-box;
  clear: both;
  zoom: 1;
  background-color: #313131;
  text-align: left;
  font-size: 0.938em;
  position: relative;
  z-index: 9;
}
footer:before, footer:after {
  content: "";
  display: table;
}
footer:after {
  clear: both;
}
@media screen and (max-width: 767px) {
  footer {
    display: none;
  }
}
footer .container {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
footer .container > div {
  padding-bottom: 1em;
}
footer a {
  text-decoration: none;
  color: #fff;
}
footer a:hover, footer a:focus {
  color: #003e65;
}
footer .footer_info {
  flex: auto;
}
footer .footer_accessibility {
  flex: none;
  flex-basis: 150px;
  max-width: 150px;
}
footer .footer_accessibility a {
  display: block;
}
footer .footer_accessibility a img {
  width: 150px;
  margin: auto;
}
footer .footer_accessibility a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
footer .footer_link {
  margin: 0;
  padding: 0;
  list-style: none;
  clear: both;
  zoom: 1;
}
footer .footer_link:before, footer .footer_link:after {
  content: "";
  display: table;
}
footer .footer_link:after {
  clear: both;
}
footer .footer_link li {
  float: left;
  display: block;
  margin: 0px 5px 5px 0px;
}
footer .footer_link li a {
  display: block;
  padding: 0.5em 1em;
  background: #005d98;
  color: #FFF;
  border-radius: 3px;
  transition: all, 0.3s, ease-out;
}
footer .footer_link li a:hover, footer .footer_link li a:focus {
  background: #003e65;
}
footer p {
  line-height: 1.65em;
  text-align: center;
  color: #fff;
}
footer .update,
footer .counter {
  display: inline-block;
  margin-right: 5px;
}
footer .update em,
footer .counter em {
  font-style: normal;
  color: #005d98;
  padding: 0 0.5em;
}
footer .footer_icon a {
  display: inline-block;
  vertical-align: top;
}
footer .footer_icon img {
  max-width: 120px;
}
footer ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  footer ul {
    margin: 20px 0 10px;
  }
}
footer ul li {
  display: inline-block;
  color: #fff;
  padding: 0 10px;
  position: relative;
}
footer ul li:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 15px;
  background-color: #fff;
  top: 5px;
  right: -4px;
}
footer ul li:last-child:before {
  width: 0;
}
footer ul li a {
  color: #fff;
}
@media screen and (max-width: 767px) {
  footer ul li {
    display: block;
  }
  footer ul li:before {
    width: 0;
  }
}

.fatfooter nav {
  max-width: 100%;
}
.fatfooter nav > ul > li {
  box-sizing: border-box;
  width: 26%;
}
@media screen and (max-width: 991px) {
  .fatfooter nav > ul > li {
    width: 26%;
  }
}
@media screen and (max-width: 767px) {
  .fatfooter nav > ul > li {
    width: 95%;
    margin: 0px auto 3px;
  }
}
.fatfooter {
  position: relative;
  padding-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  background-color: #313131;
  position: relative;
  z-index: 9;
}
.fatfooter .container {
  position: relative;
  box-sizing: border-box;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
.fatfooter .btn-fatfooter {
  font-size: 0.813em;
  cursor: pointer;
  display: inline-block;
  width: 50px;
  height: 50px;
  color: #FFF;
  border: none;
  background: #313131;
  position: absolute;
  right: 50%;
  top: -25px;
  margin: 0 -25px 0 0;
  padding: 10px !important;
  min-width: auto;
  max-width: auto;
  transition: 0.5s;
  z-index: 9;
  text-indent: -9999px;
  border-radius: 50%;
  box-shadow: none;
}
.fatfooter .btn-fatfooter:before {
  position: absolute;
  width: 18px;
  height: 17px;
  content: "";
  transform: rotate(0deg);
  top: 18px;
  left: 50%;
  background-image: url("../images/fatfooter_icon01.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  margin-left: -9px;
  transition: 0.3s ease-out;
}
.fatfooter .btn-fatfooter.close:before {
  top: 18px;
  transform: rotate(180deg);
}
.fatfooter .btn-fatfooter:hover, .fatfooter .btn-fatfooter:focus {
  background: #000;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-shadow: none;
}
.fatfooter nav {
  clear: both;
  color: #fff;
  overflow: hidden;
  display: block;
  position: relative;
  padding-top: 40px;
  margin: 0 auto;
  width: 85%;
  box-sizing: border-box;
}
.fatfooter nav ul {
  list-style: none;
  margin: 0;
  overflow: hidden;
  width: 100%;
  padding: 0;
  text-align: center;
}
@media (max-width: 767px) {
  .fatfooter nav ul {
    width: 100%;
    display: block;
    margin: 0px auto;
  }
}
.fatfooter nav ul > li {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  line-height: 2.6em;
  margin: 0 30px 0 0;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .fatfooter nav ul > li {
    display: block;
  }
}
.fatfooter nav ul > li > a {
  color: #fff;
  text-align: left;
  line-height: 1.65em;
  display: block;
  font-size: 1.25em;
  font-weight: normal;
  padding: 1% 0;
}
.fatfooter nav ul > li > a:hover, .fatfooter nav ul > li > a:focus {
  color: #fff;
  text-decoration: none;
}
.fatfooter nav ul > li ul {
  padding: 10px 0 0 0;
  margin-top: 5px;
  margin-right: 20px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}
@media (max-width: 767px) {
  .fatfooter nav ul > li ul {
    width: auto;
    padding-left: 5%;
  }
}
.fatfooter nav ul > li ul li {
  display: block;
  margin: 0;
  padding: 5px 0;
  border: none;
  background: none;
  width: 100%;
}
.fatfooter nav ul > li ul li a {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-weight: normal;
  text-align: left;
  text-decoration: none;
  font-size: 0.938em;
  font-weight: normal;
  line-height: 1.4em;
  padding: 3px 0px0;
  background: none;
  box-sizing: border-box;
  border-bottom: none;
}
.fatfooter nav ul > li ul li a:hover, .fatfooter nav ul > li ul li a:focus {
  color: #fff;
  text-decoration: underline;
}
.fatfooter nav ul > li ul ul {
  display: none;
}

.function ul li.icon_forward a:before, .function ul li.icon_print a:before, .function ul li.icon_next:before, .function ul li.icon_pre:before, .function ul li.icon_back:before {
  vertical-align: middle;
  content: "";
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.2em;
  display: inline-block;
}

.function {
  margin: 0px;
  padding: 8px 5px 5px;
  overflow: hidden;
  text-align: right;
  border-bottom: 1px solid #d3d3d3;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .function {
    text-align: center;
  }
  .function.fixed {
    top: 55px;
    position: fixed;
    width: 100%;
    background-color: #eee;
    z-index: 999;
    border-bottom: none;
  }
}
.function ul {
  padding: 0;
  margin: 0;
}
.function ul li {
  list-style: none;
  display: block;
  display: inline-block;
  margin: 0 3px 3px 0;
  position: relative;
  list-style-type: none;
}
.function ul li button,
.function ul li a {
  display: block;
  padding: 0.2em 1em 0.2em 1.5em;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  color: #333;
  border-radius: 4px;
}
.function ul li button:hover, .function ul li button:focus,
.function ul li a:hover,
.function ul li a:focus {
  background-color: #eee;
}
.function ul li.icon_back:before {
  background: url(../images/icon_back.png) no-repeat center center;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}
.function ul li.icon_back a {
  padding: 0.2em 1em 0.2em 2em;
}
@media (max-width: 480px) {
  .function ul li.icon_pre a {
    padding: 0.2em 0.5em 0.2em 1.2em;
  }
}
.function ul li.icon_pre:before {
  background: url(../images/icon_pre.png) no-repeat center center;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}
@media (max-width: 480px) {
  .function ul li.icon_pre:before {
    left: 0px;
  }
}
.function ul li.icon_next a {
  padding: 0.2em 2em 0.2em 1em;
}
@media (max-width: 480px) {
  .function ul li.icon_next a {
    padding: 0.2em 1.2em 0.2em 0.5em;
  }
}
.function ul li.icon_next:before {
  background: url(../images/icon_next.png) no-repeat center center;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
@media (max-width: 480px) {
  .function ul li.icon_next:before {
    right: -3px;
  }
}
.function ul li.icon_print a:before {
  background: url(../images/basic/icon_print.svg) no-repeat center center;
  background-size: cover;
}
.function ul li.icon_forward a:before {
  background: url(../images/basic/icon_forward.svg) no-repeat center center;
  background-size: cover;
}

.modal {
  position: fixed;
  display: none;
  width: 400px;
  height: 300px;
  background: #FFF;
  z-index: 99999999;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -200px;
  padding: 1em 1em 1em;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 1px 1px 35px RGBA(0, 0, 0, 0.75);
  animation: scaleUp 0.4s ease-out;
}
.modal h2 {
  border-bottom: 1px solid #005d98;
  padding-bottom: 0.5em;
}
.modal .close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px !important;
  min-width: auto;
  height: 30px;
  font-size: 0em;
  border: none;
  display: block;
  padding: 0;
  background: url(../images/basic/icon_close.svg) no-repeat center center;
}
.modal .close:hover, .modal .close:focus {
  cursor: pointer;
}

@keyframes scaleUp {
  0% {
    transform: scale(1) translateY(-100px);
    opacity: 0;
  }
  10% {
    transform: scale(1) translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}
.modal_overlay {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: RGBA(0, 0, 0, 0.5);
  z-index: 99999998;
}

/*pagination*/
.pagination {
  margin: 10px auto 60px;
  padding: 0px;
  display: block;
  text-align: center;
  clear: both;
  font-size: 0.938em;
  clear: both;
  zoom: 1;
}
.pagination:before, .pagination:after {
  content: "";
  display: table;
}
.pagination:after {
  clear: both;
}
.pagination span {
  color: #b94b00;
  margin: 0px 0.5em;
}
.pagination .page {
  margin: 0px 0;
  padding: 0;
  flex-wrap: wrap;
  display: flex;
}
.pagination .page li {
  min-width: 40px;
  height: 40px;
  margin: 0 2px 5px;
  list-style: none;
  box-sizing: border-box;
}
.pagination .page li a {
  border-radius: 4px;
  padding: 6px 6px;
  font-weight: 800;
  display: block;
  white-space: nowrap;
  color: #666;
  background-color: rgb(247, 247, 247);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr="#FFF7F7F7", endColorstr="#FFEAEAEA");
  background-image: -owg-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(234, 234, 234) 100%);
  background-image: linear-gradient(top, rgb(247, 247, 247) 0%, rgb(234, 234, 234) 100%);
  border: #ccc solid 1px;
  text-align: center;
  transition: 0.5s;
}
.pagination .page li a:hover, .pagination .page li a:focus {
  background: #666;
  color: #fff !important;
  border: #666 solid 1px;
}
.pagination .page li.active a {
  color: #fff !important;
  background: #005d98;
  border: #005d98 solid 1px;
  text-align: center;
}
.pagination .page li.last a:after, .pagination .page li.last a:before, .pagination .page li.next a:before, .pagination .page li.prev a:before, .pagination .page li.first a:after, .pagination .page li.first a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border: 2px solid #666;
  border-left: none;
  border-bottom: none;
}
.pagination .page li.first a, .pagination .page li.prev a, .pagination .page li.next a, .pagination .page li.last a {
  text-indent: -9999px;
  position: relative;
}
.pagination .page li.first a:hover:before, .pagination .page li.first a:hover:after, .pagination .page li.first a:focus:before, .pagination .page li.first a:focus:after, .pagination .page li.prev a:hover:before, .pagination .page li.prev a:hover:after, .pagination .page li.prev a:focus:before, .pagination .page li.prev a:focus:after, .pagination .page li.next a:hover:before, .pagination .page li.next a:hover:after, .pagination .page li.next a:focus:before, .pagination .page li.next a:focus:after, .pagination .page li.last a:hover:before, .pagination .page li.last a:hover:after, .pagination .page li.last a:focus:before, .pagination .page li.last a:focus:after {
  border: 2px solid #fff;
  border-left: none;
  border-bottom: none;
}
.pagination .page li.first a:before {
  margin-left: -6px;
  transform: rotate(-135deg);
}
.pagination .page li.first a:after {
  margin-left: 0px;
  transform: rotate(-135deg);
}
.pagination .page li.prev a:before {
  margin-left: -2px;
  transform: rotate(-135deg);
}
.pagination .page li.next a:before {
  margin-left: -6px;
  transform: rotate(45deg);
}
.pagination .page li.last a:before {
  margin-left: -3px;
  transform: rotate(45deg);
}
.pagination .page li.last a:after {
  margin-left: -9px;
  transform: rotate(45deg);
}
.pagination .page li .number_pages {
  min-width: 2em;
  max-width: 4em;
  text-align: center;
}

.pagination .total {
  padding: 5px;
}
.pagination .total select {
  margin-right: 5px;
  width: auto;
}
.pagination .total .btn {
  min-width: auto;
  padding: 0.4em 1em !important;
}
.pagination .total .every_page {
  color: #333;
}

@media (max-width: 767px) {
  .pagination .total select.form-control {
    margin: 0px 0px;
    text-align: center;
  }
}
.lightbox_pagination {
  margin: 10px auto;
  padding: 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.938em;
  clear: both;
  zoom: 1;
}
.lightbox_pagination:before, .lightbox_pagination:after {
  content: "";
  display: table;
}
.lightbox_pagination:after {
  clear: both;
}
@media screen and (max-width: 575px) {
  .lightbox_pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.lightbox_pagination span {
  color: #b94b00;
  margin: 0px 0.5em;
}
.lightbox_pagination .num_entries {
  flex: 1 1 auto;
  text-align: left;
}
@media screen and (max-width: 575px) {
  .lightbox_pagination .num_entries {
    flex-basis: 100%;
    text-align: center;
  }
}
.lightbox_pagination .page {
  margin: 0px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.lightbox_pagination .page li {
  min-width: 30px;
  height: 30px;
  margin: 0 2px 5px;
  box-sizing: border-box;
}
.lightbox_pagination .page li a {
  border-radius: 5px;
  padding: 3px 3px;
  font-weight: 800;
  display: block;
  white-space: nowrap;
  color: #666;
  background-color: rgb(247, 247, 247);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr="#FFF7F7F7", endColorstr="#FFEAEAEA");
  background-image: -owg-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(234, 234, 234) 100%);
  background-image: linear-gradient(top, rgb(247, 247, 247) 0%, rgb(234, 234, 234) 100%);
  border: #ccc solid 1px;
  text-align: center;
  transition: 0.5s;
}
.lightbox_pagination .page li a:hover, .lightbox_pagination .page li a:focus {
  background: #666;
  color: #fff !important;
  border: #666 solid 1px;
}
.lightbox_pagination .page li.active a {
  color: #fff !important;
  background: #005d98;
  border: #005d98 solid 1px;
  text-align: center;
}
.lightbox_pagination .page li.last a:after, .lightbox_pagination .page li.last a:before, .lightbox_pagination .page li.next a:before, .lightbox_pagination .page li.prev a:before, .lightbox_pagination .page li.first a:after, .lightbox_pagination .page li.first a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border: 2px solid #666;
  border-left: none;
  border-bottom: none;
}
.lightbox_pagination .page li.first a, .lightbox_pagination .page li.prev a, .lightbox_pagination .page li.next a, .lightbox_pagination .page li.last a {
  text-indent: -9999px;
  position: relative;
}
.lightbox_pagination .page li.first a:hover:before, .lightbox_pagination .page li.first a:hover:after, .lightbox_pagination .page li.first a:focus:before, .lightbox_pagination .page li.first a:focus:after, .lightbox_pagination .page li.prev a:hover:before, .lightbox_pagination .page li.prev a:hover:after, .lightbox_pagination .page li.prev a:focus:before, .lightbox_pagination .page li.prev a:focus:after, .lightbox_pagination .page li.next a:hover:before, .lightbox_pagination .page li.next a:hover:after, .lightbox_pagination .page li.next a:focus:before, .lightbox_pagination .page li.next a:focus:after, .lightbox_pagination .page li.last a:hover:before, .lightbox_pagination .page li.last a:hover:after, .lightbox_pagination .page li.last a:focus:before, .lightbox_pagination .page li.last a:focus:after {
  border: 2px solid #fff;
  border-left: none;
  border-bottom: none;
}
.lightbox_pagination .page li.first a:before {
  margin-left: -6px;
  transform: rotate(-135deg);
}
.lightbox_pagination .page li.first a:after {
  margin-left: 0px;
  transform: rotate(-135deg);
}
.lightbox_pagination .page li.prev a:before {
  margin-left: -2px;
  transform: rotate(-135deg);
}
.lightbox_pagination .page li.next a:before {
  margin-left: -6px;
  transform: rotate(45deg);
}
.lightbox_pagination .page li.last a:before {
  margin-left: -3px;
  transform: rotate(45deg);
}
.lightbox_pagination .page li.last a:after {
  margin-left: -9px;
  transform: rotate(45deg);
}
.lightbox_pagination .page li .number_pages {
  min-width: 2em;
  max-width: 4em;
  text-align: center;
}
.lightbox_pagination .total {
  padding: 5px;
  display: flex;
}
.lightbox_pagination .total label {
  font-size: 0;
}
.lightbox_pagination .total select {
  margin-right: 5px;
  width: auto;
  height: 32px;
  line-height: 32px;
}
.lightbox_pagination .total .btn {
  min-width: auto;
  padding: 0.2em 1em !important;
  height: 32px;
  margin: 0em 0.1em;
}
.lightbox_pagination .total .every_page {
  color: #333;
}

/*----------------------------------------------------條件查詢 */
.condition {
  float: right;
  margin: 0px 0 1em;
  background-color: #fff;
}
.condition a {
  display: inline-block;
  padding: 8px 6px 8px 30px;
  background: url(../images/search_icon.png) no-repeat 8px 10px;
  line-height: 110%;
  border: 1px solid #fff !important;
  text-decoration: none;
  color: #666;
}
.condition a:hover {
  border-color: #bbb !important;
  box-shadow: rgba(0, 0, 0, 0.35) 0 0 4px;
  color: #333;
  background-color: #fff;
}

.thumbnail {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .thumbnail {
    float: left;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .thumbnail {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 1400px) {
  .thumbnail {
    float: left;
    width: 33.3333333333%;
  }
}
.thumbnail a {
  display: block;
  border-radius: 5px;
  border: 1px solid #DDD;
  padding: 0.5em;
}
.thumbnail a:hover, .thumbnail a:focus {
  border: 1px solid #005d98;
}
.thumbnail .imgOuter {
  position: relative;
  overflow: hidden;
  background: #dedede;
}
.thumbnail .imgOuter:before {
  display: block;
  content: "";
  padding-top: 75%;
}
.thumbnail .imgOuter img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.thumbnail .caption {
  max-width: 90%;
  margin: 0px auto;
}

.category {
  text-align: left;
  box-sizing: border-box;
  margin: 30px 30px 0;
}
.category ul {
  padding: 0;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .category ul {
    width: 100%;
  }
}
.category ul li {
  margin: 0px 3px 3px 0px;
  display: block;
  float: left;
  font-size: 1.25em;
}
@media screen and (max-width: 767px) {
  .category ul li {
    width: 100%;
  }
}
.category a {
  background: #675623;
  padding: 20px 30px;
  display: block;
  color: #FFF;
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
  text-align: center;
}
.category a:hover, .category a:focus {
  background: #a08636;
  color: #fff;
}
.category a.here {
  background: #a08636;
  color: #fff;
}
.category a.here:before {
  content: "";
  border: 10px solid #a08636;
  border-color: #a08636 transparent transparent transparent;
  position: absolute;
  bottom: -20px;
  left: 45%;
}
@media screen and (max-width: 767px) {
  .category a.here:before {
    border: none;
  }
}

.gallery .lightbox {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  display: none;
}
.gallery .lightbox .galler_overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  width: 100vw;
  height: 100vh;
  z-index: 1;
  display: block;
}
.gallery .lightbox .caption {
  color: #FFF;
  position: absolute;
  bottom: 0px;
  text-align: center;
  z-index: 999999;
  width: 60%;
  height: 8%;
  left: 50%;
  margin-left: -30%;
  line-height: 1.3em;
}
.gallery .lightbox .light_prev,
.gallery .lightbox .light_next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  left: 0px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  font-size: 0.938em;
  color: #FFF;
  z-index: 999;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  transition: 0.3s ease-out;
}
.gallery .lightbox .light_next {
  right: 0px;
  left: auto;
}
.gallery .lightbox .light_prev:hover,
.gallery .lightbox .light_next:hover {
  background: #FFF;
  color: #000;
  cursor: pointer;
}
.gallery .lightbox .light_close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 80px;
  height: 30px;
  color: #FFF;
  line-height: 30px;
  font-size: 0.938em;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
  transition: 0.3s ease-out;
  text-align: center;
}
.gallery .lightbox .light_close:hover {
  background: #FFF;
  color: #000;
  cursor: pointer;
}
.gallery .lightbox img {
  max-width: 80vw;
  max-height: 80vh;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.share {
  margin: 0px;
  box-sizing: border-box;
}
.share ul {
  list-style-type: none;
  padding: 0;
}
.share ul li {
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: left;
  margin: 0px 3px 3px;
}
@media screen and (max-width: 991px) {
  .share ul li {
    margin: 0px 1px 2px;
    width: 30px;
    height: 30px;
  }
}
.share ul li img {
  width: 100%;
  height: 100%;
}

*[class^=notice] {
  padding: 0.4em 2em 0.4em 2em;
  display: block;
  font-size: 0.938em;
  margin: 0.2em 0;
  position: relative;
  color: #666;
  background-color: #f2f2f2;
  vertical-align: middle;
  position: relative;
  border-left: 0.5em solid #f2f2f2;
  box-sizing: border-box;
  border-radius: 4px;
}
*[class^=notice]:before {
  position: absolute;
  top: 0.7em;
  left: 0.5em;
  display: block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  content: "";
}
*[class^=notice]:before img {
  width: 100%;
}
*[class^=notice] a.close {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0.4em;
  right: 1em;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
*[class^=notice] a.close:hover, *[class^=notice] a.close:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
*[class^=notice] a.close img {
  width: 12px;
  height: 12px;
}

*[class*=notice_info] {
  border: none;
  color: #00529B;
  background-color: #BDE5F8;
  border-left: 0.5em solid #BDE5F8;
}
*[class*=notice_info]:before {
  background: url(../images/basic/icon_info.svg) no-repeat center center;
  background-size: 15px;
}

*[class*=notice_success] {
  border: none;
  color: #4F8A10;
  background-color: #DFF2BF;
  border-left: 0.5em solid #DFF2BF;
}
*[class*=notice_success]:before {
  background: url(../images/basic/icon_success.svg) no-repeat center center;
  background-size: 15px;
}

*[class*=notice_warning] {
  border: none;
  color: #CE5605;
  background-color: #FEEFB3;
  border-left: 0.5em solid #FEEFB3;
}
*[class*=notice_warning]:before {
  background: url(../images/basic/icon_warning.svg) no-repeat center center;
  background-size: 15px;
}

*[class*=notice_error] {
  border: none;
  color: #D8000C;
  background-color: #FFD2D2;
  border-left: 0.5em solid #FFD2D2;
}
*[class*=notice_error]:before {
  background: url(../images/basic/icon_error.svg) no-repeat center center;
  background-size: 15px;
}

.tabSet_block {
  position: relative;
}
@media screen and (max-width: 767px) {
  .tabSet_block {
    padding-top: 10px;
  }
}
.tabSet_block .analysis_prompt {
  position: absolute;
  right: 0;
  top: 0px;
}
.tabSet_block .analysis_prompt span {
  position: relative;
  top: 0px;
  right: 0px;
}
.tabSet_block .analysis_prompt span .prompt_btn {
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  line-height: 25px;
  font-size: 1em;
  display: inline-block;
  text-align: center;
  position: relative;
}
.tabSet_block .analysis_prompt .promptblock {
  background-color: #666;
  color: #fff;
  position: absolute;
  top: 40px;
  right: 0;
  width: 200px;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 5px;
  z-index: 9;
  text-align: left;
}
.tabSet_block .analysis_prompt .promptblock:before {
  content: "";
  border: 12px solid #666;
  border-color: transparent transparent #666 transparent;
  position: absolute;
  top: -22px;
  right: 0;
}
.tabSet_block .tabSet {
  margin: 30px auto;
}
.tabSet_block .tabSet .tabItems {
  display: flex;
}
.tabSet_block .tabSet .modeBBtn,
.tabSet_block .tabSet .tabBtn {
  flex: 1 1 auto;
  font-size: 1em;
  height: 2.8em;
  text-align: center;
  border: none;
  margin: 0 1px;
  border-radius: 5px;
  box-shadow: none;
  background: #ddd;
  cursor: pointer;
  color: #333;
  position: relative;
}
.tabSet_block .tabSet .modeBBtn:focus-visible,
.tabSet_block .tabSet .tabBtn:focus-visible {
  outline: none;
  box-shadow: 0 0px 0px 2px #f1ad00 inset;
}
.tabSet_block .tabSet .modeBBtn.active,
.tabSet_block .tabSet .tabBtn.active {
  cursor: default;
  background: #005d98;
  color: #fff;
}
.tabSet_block .tabSet .modeBBtn.active:before,
.tabSet_block .tabSet .tabBtn.active:before {
  content: "";
  border: 11px solid #005d98;
  border-color: #005d98 transparent transparent transparent;
  position: absolute;
  bottom: -22px;
  left: calc(50% - 11px);
}
@media screen and (max-width: 991px) {
  .tabSet_block .tabSet .tabItems {
    flex-wrap: wrap;
  }
  .tabSet_block .tabSet .tabBtn {
    flex: 1 1 33%;
    margin-bottom: 13px;
  }
}
.tabSet_block .tabSet .tabContent {
  position: relative;
  padding: 15px 0;
  display: none;
}
@media screen and (max-width: 767px) {
  .tabSet_block .tabSet .tabContent {
    padding: 0;
    margin-bottom: 10px;
    border: none;
  }
}
.tabSet_block .tabSet .tabContent.active {
  display: block;
}
.tabSet_block .tabSet .tabContent a:focus {
  outline: none;
  box-shadow: 0 0px 0px 2px #f1ad00 inset;
}
@media screen and (max-width: 767px) {
  .tabSet_block .tabSet .tabContent a:focus {
    box-shadow: none;
  }
}
.tabSet_block .tabSet .tabContent .content {
  background-color: #005d98;
  padding: 5px;
  border-radius: 5px;
}
.tabSet_block .tabSet .tabContent .content ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.tabSet_block .tabSet .tabContent .content ul li {
  flex: 0 0 18%;
  margin: 0 1% 0 0;
  border: none;
}
.tabSet_block .tabSet .tabContent .content ul li a {
  display: block;
  background-color: transparent;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3em 1em;
  border-radius: 5px;
  font-weight: bold;
}
.tabSet_block .tabSet .tabContent .content ul li a:hover {
  background-color: #fff;
  color: #005d98;
}
.tabSet_block .tabSet .tabContent .content ul li a.active {
  background-color: #fff;
  color: #005d98;
}
@media screen and (max-width: 991px) {
  .tabSet_block .tabSet .tabContent .content ul li {
    flex: 0 0 24%;
    margin: 0 1% 5px 0;
  }
}
@media screen and (max-width: 767px) {
  .tabSet_block .tabSet .tabContent .content ul li {
    flex: 0 0 33%;
    margin: 0 1% 5px 0;
  }
}
@media screen and (max-width: 575px) {
  .tabSet_block .tabSet .tabContent .content ul li {
    flex: 0 0 48%;
    margin: 0 1% 5px 0;
  }
}
@media (max-width: 480px) {
  .tabSet_block .tabSet .tabContent .content ul li {
    flex: 0 0 100%;
    margin: 0 0 5px 0;
  }
}
.tabSet_block .tabSet .modeBBtn {
  width: 100%;
  margin: 0 0 15px;
  display: none;
}
.tabSet_block .tabSet.modeB .tabItems {
  display: none;
}
.tabSet_block .tabSet.modeB .tabContent {
  display: block;
}
.tabSet_block .tabSet.modeB .tabContent .content {
  display: none;
  background-color: #005d98;
}
.tabSet_block .tabSet.modeB .tabContent .content ul li a {
  background-color: #fff;
  color: #005d98;
}
.tabSet_block .tabSet.modeB .tabContent .content ul li a.active {
  background-color: #005d98;
  color: #fff;
}
.tabSet_block .tabSet.modeB .tabContent .content a:focus-visible {
  outline: #0066cc 2px solid;
}
.tabSet_block .tabSet.modeB .modeBBtn {
  display: block;
}
.tabSet_block .tabSet.modeB .modeBBtn + .content.active {
  display: block;
}
.tabSet_block .tabSet.modeB .modeBBtn:focus {
  box-shadow: none !important;
}
.tabSet_block .tabSet.modeB .modeBBtn:focus-visible {
  box-shadow: 0 0px 0px 2px #f1ad00 !important;
}

.AI_block .tabSet_block .tabSet .tabContent .content ul li {
  margin: 0;
}
@media screen and (max-width: 991px) {
  .AI_block .tabSet_block .tabSet .tabContent .content ul li {
    flex: 0 0 24%;
  }
}
@media screen and (max-width: 767px) {
  .AI_block .tabSet_block .tabSet .tabContent .content ul li {
    flex: 0 0 100%;
  }
}

.segmented-control {
  position: relative;
  display: flex;
  list-style-type: none;
  flex-wrap: nowrap;
  justify-content: center;
  height: 34px;
  background-color: #005d98;
  border-radius: 5px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .segmented-control {
    flex-direction: column;
    height: auto;
  }
}

.segmented-control .segment {
  flex: 0 0 18%;
  max-width: 18%;
  text-align: center;
  line-height: 34px;
  font-size: 1em;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  transition: color 0.3s;
  position: relative;
  z-index: 2;
  padding: 0 5px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .segmented-control .segment {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.segmented-control .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 18%;
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
  transition: left 0.3s ease;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .segmented-control .slider {
    width: 100%;
    height: auto;
  }
}

.segmented-control .segment.active {
  color: #005d98;
  font-weight: bold;
  border-radius: 5px;
}
@media screen and (max-width: 767px) {
  .segmented-control .segment.active {
    background-color: #fff;
  }
}

body {
  background-color: #eee;
  transition: 0.5s;
  /* Turn on custom 8px wide scrollbar */
  /* hover effect for both scrollbar area, and scrollbar 'thumb' */
  /* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
}
body.noscroll {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden !important;
}
body ::-webkit-scrollbar {
  width: 10px;
  /* 1px wider than Lion. */
  /* This is more usable for users trying to click it. */
  background-color: rgba(0, 0, 0, 0);
  -webkit-border-radius: 100px;
}
body ::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}
body ::-webkit-scrollbar-thumb:vertical {
  /* This is the EXACT color of Mac OS scrollbars. 
   Yes, I pulled out digital color meter */
  background: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 100px;
  background-clip: padding-box;
  border: 2px solid rgba(0, 0, 0, 0);
  min-height: 10px;
  /*Prevent it from getting too small */
}
body ::-webkit-scrollbar-thumb:vertical:active {
  background: rgba(0, 0, 0, 0.61);
  /* Some darker color when you click it */
  -webkit-border-radius: 100px;
}

.wrapper {
  max-width: 1400px;
  margin: 0px auto;
  padding: 55px 0 0 0;
  position: relative;
  background-color: #fff;
}
.wrapper.customization03 {
  width: 100%;
  max-width: 100%;
}
.wrapper.customization03 .header {
  width: 100%;
}
.wrapper.customization03 .header .container {
  max-width: 1400px !important;
}
.wrapper.customization03 .main_mp {
  max-width: 100%;
}
.wrapper.customization03 .main_mp .related_block .container,
.wrapper.customization03 .main_mp .newbooks_block .container,
.wrapper.customization03 .main_mp .featured_block .container,
.wrapper.customization03 .main_mp .hotrankings_block .container {
  max-width: 1400px !important;
}
.wrapper.customization03 .main_mp .search_block {
  margin-bottom: 3em;
}
.wrapper.wrapperin {
  max-width: 1400px;
}
.wrapper.wrapperin .header {
  max-width: 1400px;
}

.loading {
  box-sizing: border-box;
}
.loading img {
  width: 44px;
  height: 44px;
  z-index: 9999;
  animation-name: loading01;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes loading01 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes lds-ellipsis3 {
  0%, 25% {
    left: 32px;
    transform: scale(0);
  }
  50% {
    left: 32px;
    transform: scale(1);
  }
  75% {
    left: 100px;
  }
  100% {
    left: 168px;
    transform: scale(1);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: scale(1);
  }
  25%, 100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis {
  0% {
    left: 32px;
    transform: scale(0);
  }
  25% {
    left: 32px;
    transform: scale(1);
  }
  50% {
    left: 100px;
  }
  75% {
    left: 168px;
    transform: scale(1);
  }
  100% {
    left: 168px;
    transform: scale(0);
  }
}
.loading .lds-ellipsis {
  position: relative;
}
.loading .lds-ellipsis > div {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
}
.loading .lds-ellipsis div > div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f00;
  position: absolute;
  top: 50px;
  left: 32px;
  animation: lds-ellipsis 1.5s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
}
.loading .lds-ellipsis div:nth-child(1) div {
  animation: lds-ellipsis2 1.5s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
  background: #58493f;
}
.loading .lds-ellipsis div:nth-child(2) div {
  animation-delay: -0.75s;
  background: #7d6b5a;
}
.loading .lds-ellipsis div:nth-child(3) div {
  animation-delay: -0.375s;
  background: #a4937d;
}
.loading .lds-ellipsis div:nth-child(4) div {
  animation-delay: 0s;
  background: #cfc1a6;
}
.loading .lds-ellipsis div:nth-child(5) div {
  animation: lds-ellipsis3 1.5s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
  background: #58493f;
}
.loading .lds-ellipsis {
  width: 200px !important;
  height: 100px !important;
  transform: scale(0.5);
  margin: 0 auto;
}

.container {
  padding: 0;
  margin: 0 auto;
  max-width: 1400px;
}

.main_mp .container {
  padding: 0 25px;
  margin: 0 auto;
  max-width: 1400px;
}
@media (min-width: 992px) and (max-width: 1200px) {
  .main_mp .container {
    width: 980px;
  }
}

.main {
  position: relative;
  margin: 0 auto;
  padding: 0;
  min-height: 600px;
}

.more a {
  padding: 3px 10px;
  border-radius: 4px;
  text-align: center;
  transition: all, 0.3s, ease-out;
}
.hidden {
  display: none !important;
}

@media (min-width: 768px) {
  .mobile_visible {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .mobile_hidden {
    display: none !important;
  }
  .mobile_visible {
    display: inline-block !important;
  }
}
a:hover {
  color: #dd1f03;
}

.innerpage {
  padding-top: 2em;
}
@media screen and (max-width: 767px) {
  .innerpage {
    padding-top: 5em;
  }
}
.innerpage > .container {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.word_bolder {
  font-weight: bolder;
}

.word_big {
  font-size: 1.125em;
}

.word_red {
  color: #dc0122 !important;
}

.word_blue {
  color: #3e78c0 !important;
}

.word_green {
  color: #107859 !important;
}

.word_orange {
  color: #b94b00 !important;
}

.word_yellow {
  color: #f1ad00 !important;
}

.word_gray {
  color: #d3d3d3 !important;
}

pre {
  font-family: Lato, "PingFang TC", "Helvetica Neue", Helvetica, 微軟正黑體, Arial, sans-serif !important;
  line-height: 2em;
  letter-spacing: 5px;
  word-spacing: 5px;
}

.RSS_button {
  vertical-align: middle;
  width: 80px;
  margin: 0 auto;
}
.RSS_button .btn {
  background-color: #f8941b;
  background-image: none;
  border: 1px solid #f8941b;
  color: #000;
  padding: 0em 0.3em 0em 1.3em !important;
  background-image: url("../images/icon_rss_black.png") !important;
  background-repeat: no-repeat;
  background-position: 4px center;
  background-size: 15px 14px;
}
.RSS_button .btn img {
  margin-right: 5px !important;
}
.RSS_button .btn:hover, .RSS_button .btn:focus {
  color: #fff;
  background-color: #b06000 !important;
  border: 1px solid #b06000 !important;
  background-image: url("../images/icon_rss.png") !important;
  background-repeat: no-repeat;
  background-position: 4px center;
  background-size: 15px 14px !important;
}

.ui-datepicker-trigger {
  float: right;
  margin-top: 5px;
  margin-right: 5px;
}

.btnstyle {
  border: 2px solid #d3d3d3;
  background-color: #fff;
  padding: 2px 10px 2px !important;
  color: #535353;
  margin: 0 5px 5px 1px;
  border-radius: 4px;
  display: inline-block;
  background-position: 8px center;
  transition: 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #fff !important;
  text-decoration: none !important;
  position: relative;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.btnstyle:hover {
  background-color: #e5e5e5;
  color: #000;
  box-shadow: none;
  filter: brightness(110%);
}
.btnstyle:focus {
  background-color: #e5e5e5;
  color: #000;
  filter: brightness(110%);
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.btnstyle:active {
  box-shadow: none;
}
.btnstyle.label {
  padding: 2px 25px 2px 10px !important;
}
.btnstyle.label .close {
  position: absolute;
  top: 3px;
  right: 1px;
  z-index: 9;
}
.btnstyle.label .close a {
  background-image: url("../images/icon_close03.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  font-size: 0;
  display: block;
  width: 20px !important;
  height: 20px !important;
}
.btnstyle.label .close_black {
  position: absolute;
  top: 3px;
  right: 1px;
  z-index: 9;
}
.btnstyle.label .close_black a {
  background-image: url("../images/icon_close03_black.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  font-size: 0;
  display: block;
  width: 20px !important;
  height: 20px !important;
}
.btnstyle img {
  margin-right: 5px;
  vertical-align: middle;
  width: 16px;
  margin-top: -2px;
}
.btnstyle.renew {
  background-image: url("../images/btnstyle_icon01.png");
}
.btnstyle.borrowing {
  background-image: url("../images/btnstyle_icon02.png");
}
.btnstyle.recommend {
  background-image: url("../images/btnstyle_icon03.png");
}
.btnstyle.filelink {
  background-image: url("../images/btnstyle_icon04.png");
}
.btnstyle.filedownload {
  background-image: url("../images/btnstyle_icon05.png");
}
.btnstyle.ebookpreview {
  background-image: url("../images/btnstyle_icon06.png");
}
.btnstyle.ebookborrowing {
  background-image: url("../images/btnstyle_icon07.png");
}
.btnstyle.no_borrowing {
  background-image: url("../images/btnstyle_icon08.png");
}
.btnstyle.extend_search {
  background-image: url("../images/btnstyle_icon09.png");
}
.btnstyle.message {
  background-image: url("../images/btnstyle_icon10.png");
}
.btnstyle.cancel {
  background-image: url("../images/btnstyle_icon11.png");
}
.btnstyle.bluebg {
  background-color: #016593;
  border: 2px solid #016593;
  color: #fff;
  transition: 0.2s;
}
.btnstyle.bluebg:hover, .btnstyle.bluebg:focus {
  background-color: #027eb6;
  border: 2px solid #027eb6;
}
.btnstyle.bluebg2 {
  background-color: #0d5cbe;
  border: 2px solid #0d5cbe;
  color: #fff;
  transition: 0.2s;
}
.btnstyle.bluebg2:hover, .btnstyle.bluebg2:focus {
  background-color: #3e78c0;
  border: 2px solid #3e78c0;
}
.btnstyle.bluebg3 {
  background-color: #005d98;
  border: 2px solid #005d98;
  color: #fff;
  transition: 0.2s;
}
.btnstyle.bluebg3:hover, .btnstyle.bluebg3:focus {
  background-color: #003e65;
  border: 2px solid #003e65;
}
.btnstyle.greenbg {
  background-color: #496809;
  border: 2px solid #496809;
  color: #fff;
  filter: brightness(120%);
  transition: 0.2s;
}
.btnstyle.greenbg:hover, .btnstyle.greenbg:focus {
  background-color: #59800b;
  border: 2px solid #59800b;
}
.btnstyle.greenbg2 {
  background-color: #00807b;
  border: 2px solid #00807b;
  color: #fff;
  transition: 0.2s;
}
.btnstyle.greenbg2:hover, .btnstyle.greenbg2:focus {
  background-color: #15827e;
  border: 2px solid #15827e;
}
.btnstyle.redbg {
  background-color: #ae031d;
  border: 2px solid #ae031d;
  color: #fff;
  transition: 0.2s;
}
.btnstyle.redbg:hover, .btnstyle.redbg:focus {
  background-color: #e20022;
  border: 2px solid #e20022;
}
.btnstyle.redbg2 {
  background-color: #b0582d;
  border: 2px solid #b0582d;
  color: #fff;
  transition: 0.2s;
}
.btnstyle.redbg2:hover, .btnstyle.redbg2:focus {
  background-color: #b05f46;
  border: 2px solid #b05f46;
}
.btnstyle.whitebg {
  border: 2px solid #fff;
  background-color: #fff;
  color: #333 !important;
  transition: 0.2s;
}
.btnstyle.whitebg:hover, .btnstyle.whitebg:focus {
  background-color: #d2d2d2;
  border: 2px solid #d2d2d2;
  color: #333 !important;
}
.btnstyle.whitebg2 {
  border: 1px solid #005d98;
  background-color: #fff;
  color: #005d98 !important;
  transition: 0.2s;
  box-shadow: none;
}
.btnstyle.whitebg2:hover, .btnstyle.whitebg2:focus {
  background-color: #eee;
  border: 1px solid #005d98;
  color: #005d98 !important;
}
.btnstyle.brownbg {
  background-color: #59493f;
  border: 2px solid #59493f;
  color: #fff;
  transition: 0.2s;
}
.btnstyle.brownbg:hover, .btnstyle.brownbg:focus {
  background-color: #776154;
  border: 2px solid #776154;
}
.btnstyle.orangebg {
  background-color: #b84b00;
  border: 2px solid #b84b00;
  color: #fff;
  transition: 0.2s;
}
.btnstyle.orangebg:hover, .btnstyle.orangebg:focus {
  background-color: #c75100;
  border: 2px solid #c75100;
}
.btnstyle.graybg {
  background-color: #666666;
  border: 2px solid #666666;
  color: #fff;
  transition: 0.2s;
}
.btnstyle.graybg:hover, .btnstyle.graybg:focus {
  background-color: #757575;
  border: 2px solid #757575;
}
.btnstyle.blackbg {
  background-color: #000;
  border: 2px solid #000;
  color: #fff;
  transition: 0.2s;
}
.btnstyle.blackbg:hover {
  background-color: #333;
  border: 2px solid #333;
}
.btnstyle.morewidth {
  padding: 5px 80px !important;
  border-radius: 50px;
  font-size: 0.938em;
}
.btnstyle.btn-lg {
  padding: 10px 50px !important;
  font-size: 1em;
  box-sizing: border-box;
}
.btnstyle.morebg {
  background-color: transparent;
  border: none;
  color: #016593 !important;
  position: relative;
  font-weight: 600;
  box-shadow: none;
  transition: 0.2s;
  padding-right: 20px !important;
}
.btnstyle.morebg:hover {
  background-color: transparent;
  border: none;
  text-decoration: underline !important;
}
.btnstyle.morebg:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.btnstyle.morebg:before {
  content: "";
  border: 8px solid #016593;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  position: absolute;
  right: 0;
  top: 10px;
}
.btnstyle.morebg.open:before {
  content: "";
  border: 8px solid #016593;
  border-right-color: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
  position: absolute;
  right: 0;
  top: 2px;
}
.btnstyle.border_graybg {
  background-color: #fff !important;
  border: 1px solid #666 !important;
  color: #666 !important;
  transition: 0.2s;
  min-width: 150px;
  text-align: center;
}
.btnstyle.border_graybg:hover {
  background-color: #666 !important;
  border: 1px solid #666 !important;
  color: #fff !important;
}
.btnstyle.border_redbg {
  background-color: #fff !important;
  border: 1px solid #900 !important;
  color: #900 !important;
  transition: 0.2s;
  min-width: 150px;
  text-align: center;
}
.btnstyle.border_redbg:hover {
  background-color: #900 !important;
  border: 1px solid #900 !important;
  color: #fff !important;
}
.btnstyle.border_bluebg {
  background-color: #fff !important;
  border: 1px solid #0288c5 !important;
  color: #0288c5 !important;
  transition: 0.2s;
  min-width: 150px;
  text-align: center;
}
.btnstyle.border_bluebg:hover {
  background-color: #0288c5 !important;
  border: 1px solid #0288c5 !important;
  color: #fff !important;
}
.btnstyle.border_greenbg {
  background-color: #fff !important;
  border: 1px solid #638e0c !important;
  color: #638e0c !important;
  transition: 0.2s;
  min-width: 150px;
  text-align: center;
}
.btnstyle.border_greenbg:hover {
  background-color: #638e0c !important;
  border: 1px solid #638e0c !important;
  color: #fff !important;
}

.hide_description {
  background-color: #fbe8d3;
  color: #333;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.938em;
  display: none;
}

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

.shopping_cart {
  position: fixed;
  bottom: 80px;
  right: 10px;
  z-index: 9;
  width: 60px;
  height: 60px;
}
.shopping_cart a {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(229, 33, 4, 0.6);
  text-align: center;
  color: #fff;
  line-height: 70px;
  text-decoration: none;
  transition: 0.3s ease-out;
  position: relative;
  display: block;
  background-image: url("../images/shopping_cart.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px;
}
.shopping_cart a:hover {
  background-color: rgb(229, 33, 4);
}
.shopping_cart a span {
  width: auto;
  height: 13px;
  border-radius: 50px;
  background-color: #666;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
  line-height: 1em;
  padding: 4px 5px;
  font-size: 0.813em;
}

.add_tobeseen {
  position: fixed;
  bottom: 80px;
  right: 10px;
  z-index: 9;
  width: 60px;
  height: 60px;
}
.add_tobeseen a {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 139, 0, 0.6);
  text-align: center;
  color: #fff;
  line-height: 70px;
  text-decoration: none;
  transition: 0.3s ease-out;
  position: relative;
  display: block;
  background-image: url("../images/feature_options02_white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.add_tobeseen a:hover {
  background-color: rgb(255, 139, 0);
}
.add_tobeseen a.dynamic {
  animation: jello-vertical 1s 2 both;
  background-color: rgb(255, 139, 0);
}
@keyframes jello-vertical {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
.add_tobeseen a span {
  width: auto;
  height: 13px;
  border-radius: 50px;
  background-color: #666;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
  line-height: 1em;
  padding: 4px 5px;
  font-size: 0.813em;
}

.small_size {
  font-size: 0.938em;
  transition: 0.5s;
}

.large_size {
  font-size: 1.125em;
  transition: 0.5s;
}
.large_size .mystudycontent .mycardlist li .data > span em {
  margin-right: 0px;
}
.large_size .mystudycontent .mycardlist li .data > span:nth-child(2) em {
  margin-right: 0px;
}
.large_size .devicereservation_block .device_list a {
  height: 240px;
}
@media screen and (max-width: 767px) {
  .large_size .devicereservation_block .device_list a {
    height: auto;
  }
}
.large_size .linecontent .book-gallery .book .title {
  max-height: 48px;
  height: 48px;
}
@media only screen and (min-device-width: 480px) {
  .large_size .linecontent .book-gallery .book {
    padding: 0px 15px;
  }
}
@media only screen and (min-device-width: 568px) {
  .large_size .linecontent .book-gallery .book {
    width: 33.3333333333%;
    padding: 0px 10px;
  }
}
@media only screen and (min-device-width: 640px) {
  .large_size .linecontent .book-gallery .book {
    padding: 0px 15px;
    width: 33.3333333333%;
  }
}
@media only screen and (min-device-width: 768px) {
  .large_size .linecontent .book-gallery .book {
    width: 25%;
    padding: 0px 10px;
  }
}
@media only screen and (min-device-width: 853px) {
  .large_size .linecontent .book-gallery .book {
    padding: 0px 15px;
  }
}
@media only screen and (min-device-width: 960px) {
  .large_size .linecontent .book-gallery .book {
    width: 25%;
    padding: 0px 10px;
  }
}
@media only screen and (min-device-width: 1024px) {
  .large_size .linecontent .book-gallery .book {
    width: 20%;
  }
}
@media only screen and (min-device-width: 1200px) {
  .large_size .linecontent .book-gallery .book {
    width: 20%;
  }
}
@media only screen and (min-device-width: 1366px) {
  .large_size .linecontent .book-gallery .book {
    width: 16.6666666667%;
  }
}
@media only screen and (min-device-width: 1700px) {
  .large_size .linecontent .book-gallery .book {
    width: 14.2857142857%;
  }
}
.large_size .search_block .searchsystem .form_search input[type=text] {
  padding: 10px;
  height: 2.6em;
}

body.fix {
  height: 100%;
  overflow: hidden !important;
  width: 100%;
  position: fixed;
}

.login_lightbox,
.related_lightbox,
.lightboxstyle,
.exportstyle,
.forwardstyle,
.referencestyle,
.mystudymenu_lightbox,
.choose_librarycard_lightbox,
.explain_linghtbox,
.qrcode_lightbox,
.recommendbook_lightbox,
.search_field_lightbox,
.AI_situationalstyle,
.AI_situationalstyle_records {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
  display: none;
}
.login_lightbox .overlay,
.related_lightbox .overlay,
.lightboxstyle .overlay,
.exportstyle .overlay,
.forwardstyle .overlay,
.referencestyle .overlay,
.mystudymenu_lightbox .overlay,
.choose_librarycard_lightbox .overlay,
.explain_linghtbox .overlay,
.qrcode_lightbox .overlay,
.recommendbook_lightbox .overlay,
.search_field_lightbox .overlay,
.AI_situationalstyle .overlay,
.AI_situationalstyle_records .overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.login_lightbox .pagination,
.related_lightbox .pagination,
.lightboxstyle .pagination,
.exportstyle .pagination,
.forwardstyle .pagination,
.referencestyle .pagination,
.mystudymenu_lightbox .pagination,
.choose_librarycard_lightbox .pagination,
.explain_linghtbox .pagination,
.qrcode_lightbox .pagination,
.recommendbook_lightbox .pagination,
.search_field_lightbox .pagination,
.AI_situationalstyle .pagination,
.AI_situationalstyle_records .pagination {
  margin-bottom: 10px !important;
}

.close a {
  background-image: url("../images/icon_close.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 31px;
  height: 31px;
  display: block;
  cursor: pointer;
  font-size: 0;
}

.mainleftblock .lightboxstyle .close {
  display: block !important;
  z-index: 9;
}

.login_lightbox .loginblock,
.choose_librarycard_lightbox .loginblock,
.qrcode_lightbox .loginblock,
.recommendbook_lightbox .loginblock,
.search_field_lightbox .loginblock {
  max-width: 50vw;
  min-width: 450px;
  max-height: 80vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px 25px 15px 25px;
  background-color: #fff;
  border-radius: 5px;
  overflow: auto;
  text-align: left;
}
@media screen and (max-width: 575px) {
  .login_lightbox .loginblock,
  .choose_librarycard_lightbox .loginblock,
  .qrcode_lightbox .loginblock,
  .recommendbook_lightbox .loginblock,
  .search_field_lightbox .loginblock {
    transform: translate(0, 0);
    padding: 30px 20px 15px 20px;
    left: 0;
    top: 0;
    border-radius: 0;
    height: 100%;
    width: 100%;
    max-width: 100vh;
    min-width: auto;
    max-height: 100vh;
    box-sizing: border-box;
  }
}
.login_lightbox .loginblock .close,
.choose_librarycard_lightbox .loginblock .close,
.qrcode_lightbox .loginblock .close,
.recommendbook_lightbox .loginblock .close,
.search_field_lightbox .loginblock .close {
  position: absolute;
  right: 15px;
  top: 10px;
}
.login_lightbox .loginblock h2,
.choose_librarycard_lightbox .loginblock h2,
.qrcode_lightbox .loginblock h2,
.recommendbook_lightbox .loginblock h2,
.search_field_lightbox .loginblock h2 {
  font-size: 1.875em !important;
  text-align: center;
  border-bottom: 2px solid #005d98;
  margin: 0px auto 10px;
  padding: 0 0 8px;
  color: #005d98 !important;
  line-height: 1.35em;
}
.login_lightbox .loginblock .form_grp label,
.choose_librarycard_lightbox .loginblock .form_grp label,
.qrcode_lightbox .loginblock .form_grp label,
.recommendbook_lightbox .loginblock .form_grp label,
.search_field_lightbox .loginblock .form_grp label {
  font-size: 1.188em;
  width: 20%;
}
.login_lightbox .loginblock .form_grp input[type=text],
.login_lightbox .loginblock .form_grp input[type=password],
.choose_librarycard_lightbox .loginblock .form_grp input[type=text],
.choose_librarycard_lightbox .loginblock .form_grp input[type=password],
.qrcode_lightbox .loginblock .form_grp input[type=text],
.qrcode_lightbox .loginblock .form_grp input[type=password],
.recommendbook_lightbox .loginblock .form_grp input[type=text],
.recommendbook_lightbox .loginblock .form_grp input[type=password],
.search_field_lightbox .loginblock .form_grp input[type=text],
.search_field_lightbox .loginblock .form_grp input[type=password] {
  width: 75%;
}
@media screen and (max-width: 991px) {
  .login_lightbox .loginblock .form_grp label,
  .choose_librarycard_lightbox .loginblock .form_grp label,
  .qrcode_lightbox .loginblock .form_grp label,
  .recommendbook_lightbox .loginblock .form_grp label,
  .search_field_lightbox .loginblock .form_grp label {
    font-size: 1.25em;
    width: 100%;
  }
  .login_lightbox .loginblock .form_grp input[type=text],
  .login_lightbox .loginblock .form_grp input[type=password],
  .choose_librarycard_lightbox .loginblock .form_grp input[type=text],
  .choose_librarycard_lightbox .loginblock .form_grp input[type=password],
  .qrcode_lightbox .loginblock .form_grp input[type=text],
  .qrcode_lightbox .loginblock .form_grp input[type=password],
  .recommendbook_lightbox .loginblock .form_grp input[type=text],
  .recommendbook_lightbox .loginblock .form_grp input[type=password],
  .search_field_lightbox .loginblock .form_grp input[type=text],
  .search_field_lightbox .loginblock .form_grp input[type=password] {
    width: 100%;
  }
}
.login_lightbox .loginblock .form_grp img,
.choose_librarycard_lightbox .loginblock .form_grp img,
.qrcode_lightbox .loginblock .form_grp img,
.recommendbook_lightbox .loginblock .form_grp img,
.search_field_lightbox .loginblock .form_grp img {
  vertical-align: middle;
}
.login_lightbox .loginblock .btn_grp,
.choose_librarycard_lightbox .loginblock .btn_grp,
.qrcode_lightbox .loginblock .btn_grp,
.recommendbook_lightbox .loginblock .btn_grp,
.search_field_lightbox .loginblock .btn_grp {
  padding: 0;
  margin: 10px 0;
}
.login_lightbox .loginblock .unable_login,
.login_lightbox .loginblock .other_login,
.choose_librarycard_lightbox .loginblock .unable_login,
.choose_librarycard_lightbox .loginblock .other_login,
.qrcode_lightbox .loginblock .unable_login,
.qrcode_lightbox .loginblock .other_login,
.recommendbook_lightbox .loginblock .unable_login,
.recommendbook_lightbox .loginblock .other_login,
.search_field_lightbox .loginblock .unable_login,
.search_field_lightbox .loginblock .other_login {
  margin: 20px 0 30px;
  padding: 0;
  text-align: center;
  position: relative;
}
.login_lightbox .loginblock .unable_login:before,
.login_lightbox .loginblock .other_login:before,
.choose_librarycard_lightbox .loginblock .unable_login:before,
.choose_librarycard_lightbox .loginblock .other_login:before,
.qrcode_lightbox .loginblock .unable_login:before,
.qrcode_lightbox .loginblock .other_login:before,
.recommendbook_lightbox .loginblock .unable_login:before,
.recommendbook_lightbox .loginblock .other_login:before,
.search_field_lightbox .loginblock .unable_login:before,
.search_field_lightbox .loginblock .other_login:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  z-index: 9;
  border-top: 2px solid #999;
  border-radius: 0px;
  z-index: 2;
}
.login_lightbox .loginblock .unable_login.otherstyle,
.login_lightbox .loginblock .other_login.otherstyle,
.choose_librarycard_lightbox .loginblock .unable_login.otherstyle,
.choose_librarycard_lightbox .loginblock .other_login.otherstyle,
.qrcode_lightbox .loginblock .unable_login.otherstyle,
.qrcode_lightbox .loginblock .other_login.otherstyle,
.recommendbook_lightbox .loginblock .unable_login.otherstyle,
.recommendbook_lightbox .loginblock .other_login.otherstyle,
.search_field_lightbox .loginblock .unable_login.otherstyle,
.search_field_lightbox .loginblock .other_login.otherstyle {
  padding: 5px 10px;
}
.login_lightbox .loginblock .unable_login.otherstyle:before,
.login_lightbox .loginblock .other_login.otherstyle:before,
.choose_librarycard_lightbox .loginblock .unable_login.otherstyle:before,
.choose_librarycard_lightbox .loginblock .other_login.otherstyle:before,
.qrcode_lightbox .loginblock .unable_login.otherstyle:before,
.qrcode_lightbox .loginblock .other_login.otherstyle:before,
.recommendbook_lightbox .loginblock .unable_login.otherstyle:before,
.recommendbook_lightbox .loginblock .other_login.otherstyle:before,
.search_field_lightbox .loginblock .unable_login.otherstyle:before,
.search_field_lightbox .loginblock .other_login.otherstyle:before {
  border: 1px solid #999;
  border-radius: 5px;
}
.login_lightbox .loginblock .unable_login.otherstyle h3,
.login_lightbox .loginblock .other_login.otherstyle h3,
.choose_librarycard_lightbox .loginblock .unable_login.otherstyle h3,
.choose_librarycard_lightbox .loginblock .other_login.otherstyle h3,
.qrcode_lightbox .loginblock .unable_login.otherstyle h3,
.qrcode_lightbox .loginblock .other_login.otherstyle h3,
.recommendbook_lightbox .loginblock .unable_login.otherstyle h3,
.recommendbook_lightbox .loginblock .other_login.otherstyle h3,
.search_field_lightbox .loginblock .unable_login.otherstyle h3,
.search_field_lightbox .loginblock .other_login.otherstyle h3 {
  text-align: center;
}
.login_lightbox .loginblock .unable_login.otherstyle h3 span,
.login_lightbox .loginblock .other_login.otherstyle h3 span,
.choose_librarycard_lightbox .loginblock .unable_login.otherstyle h3 span,
.choose_librarycard_lightbox .loginblock .other_login.otherstyle h3 span,
.qrcode_lightbox .loginblock .unable_login.otherstyle h3 span,
.qrcode_lightbox .loginblock .other_login.otherstyle h3 span,
.recommendbook_lightbox .loginblock .unable_login.otherstyle h3 span,
.recommendbook_lightbox .loginblock .other_login.otherstyle h3 span,
.search_field_lightbox .loginblock .unable_login.otherstyle h3 span,
.search_field_lightbox .loginblock .other_login.otherstyle h3 span {
  margin-left: 0;
}
.login_lightbox .loginblock .unable_login h3,
.login_lightbox .loginblock .other_login h3,
.choose_librarycard_lightbox .loginblock .unable_login h3,
.choose_librarycard_lightbox .loginblock .other_login h3,
.qrcode_lightbox .loginblock .unable_login h3,
.qrcode_lightbox .loginblock .other_login h3,
.recommendbook_lightbox .loginblock .unable_login h3,
.recommendbook_lightbox .loginblock .other_login h3,
.search_field_lightbox .loginblock .unable_login h3,
.search_field_lightbox .loginblock .other_login h3 {
  position: relative;
  text-align: left;
  margin: 0 0 5px !important;
  padding: 0 !important;
  font-size: 1.25em;
  border: none !important;
}
.login_lightbox .loginblock .unable_login h3 span,
.login_lightbox .loginblock .other_login h3 span,
.choose_librarycard_lightbox .loginblock .unable_login h3 span,
.choose_librarycard_lightbox .loginblock .other_login h3 span,
.qrcode_lightbox .loginblock .unable_login h3 span,
.qrcode_lightbox .loginblock .other_login h3 span,
.recommendbook_lightbox .loginblock .unable_login h3 span,
.recommendbook_lightbox .loginblock .other_login h3 span,
.search_field_lightbox .loginblock .unable_login h3 span,
.search_field_lightbox .loginblock .other_login h3 span {
  background-color: #fff;
  padding: 5px 15px;
  position: relative;
  z-index: 98;
  display: inline-block;
  margin-left: 20px;
  color: #333;
}
.login_lightbox .loginblock .unable_login input,
.login_lightbox .loginblock .unable_login button,
.login_lightbox .loginblock .other_login input,
.login_lightbox .loginblock .other_login button,
.choose_librarycard_lightbox .loginblock .unable_login input,
.choose_librarycard_lightbox .loginblock .unable_login button,
.choose_librarycard_lightbox .loginblock .other_login input,
.choose_librarycard_lightbox .loginblock .other_login button,
.qrcode_lightbox .loginblock .unable_login input,
.qrcode_lightbox .loginblock .unable_login button,
.qrcode_lightbox .loginblock .other_login input,
.qrcode_lightbox .loginblock .other_login button,
.recommendbook_lightbox .loginblock .unable_login input,
.recommendbook_lightbox .loginblock .unable_login button,
.recommendbook_lightbox .loginblock .other_login input,
.recommendbook_lightbox .loginblock .other_login button,
.search_field_lightbox .loginblock .unable_login input,
.search_field_lightbox .loginblock .unable_login button,
.search_field_lightbox .loginblock .other_login input,
.search_field_lightbox .loginblock .other_login button {
  position: relative;
  z-index: 3;
}
@media (max-width: 400px) {
  .login_lightbox .loginblock .btn,
  .login_lightbox .loginblock .btn-green,
  .login_lightbox .loginblock .btn-blue,
  .login_lightbox .loginblock .btn-yellow,
  .login_lightbox .loginblock .btn-orange,
  .login_lightbox .loginblock .btn-red,
  .login_lightbox .loginblock .btn-purple,
  .login_lightbox .loginblock form button,
  .login_lightbox .loginblock form input[type=button],
  .login_lightbox .loginblock form input[type=submit],
  .login_lightbox .loginblock form input[type=reset],
  .login_lightbox .loginblock form .upload_grp .upload_btn,
  .choose_librarycard_lightbox .loginblock .btn,
  .choose_librarycard_lightbox .loginblock .btn-green,
  .choose_librarycard_lightbox .loginblock .btn-blue,
  .choose_librarycard_lightbox .loginblock .btn-yellow,
  .choose_librarycard_lightbox .loginblock .btn-orange,
  .choose_librarycard_lightbox .loginblock .btn-red,
  .choose_librarycard_lightbox .loginblock .btn-purple,
  .choose_librarycard_lightbox .loginblock form button,
  .choose_librarycard_lightbox .loginblock form input[type=button],
  .choose_librarycard_lightbox .loginblock form input[type=submit],
  .choose_librarycard_lightbox .loginblock form input[type=reset],
  .choose_librarycard_lightbox .loginblock form .upload_grp .upload_btn,
  .qrcode_lightbox .loginblock .btn,
  .qrcode_lightbox .loginblock .btn-green,
  .qrcode_lightbox .loginblock .btn-blue,
  .qrcode_lightbox .loginblock .btn-yellow,
  .qrcode_lightbox .loginblock .btn-orange,
  .qrcode_lightbox .loginblock .btn-red,
  .qrcode_lightbox .loginblock .btn-purple,
  .qrcode_lightbox .loginblock form button,
  .qrcode_lightbox .loginblock form input[type=button],
  .qrcode_lightbox .loginblock form input[type=submit],
  .qrcode_lightbox .loginblock form input[type=reset],
  .qrcode_lightbox .loginblock form .upload_grp .upload_btn,
  .recommendbook_lightbox .loginblock .btn,
  .recommendbook_lightbox .loginblock .btn-green,
  .recommendbook_lightbox .loginblock .btn-blue,
  .recommendbook_lightbox .loginblock .btn-yellow,
  .recommendbook_lightbox .loginblock .btn-orange,
  .recommendbook_lightbox .loginblock .btn-red,
  .recommendbook_lightbox .loginblock .btn-purple,
  .recommendbook_lightbox .loginblock form button,
  .recommendbook_lightbox .loginblock form input[type=button],
  .recommendbook_lightbox .loginblock form input[type=submit],
  .recommendbook_lightbox .loginblock form input[type=reset],
  .recommendbook_lightbox .loginblock form .upload_grp .upload_btn,
  .search_field_lightbox .loginblock .btn,
  .search_field_lightbox .loginblock .btn-green,
  .search_field_lightbox .loginblock .btn-blue,
  .search_field_lightbox .loginblock .btn-yellow,
  .search_field_lightbox .loginblock .btn-orange,
  .search_field_lightbox .loginblock .btn-red,
  .search_field_lightbox .loginblock .btn-purple,
  .search_field_lightbox .loginblock form button,
  .search_field_lightbox .loginblock form input[type=button],
  .search_field_lightbox .loginblock form input[type=submit],
  .search_field_lightbox .loginblock form input[type=reset],
  .search_field_lightbox .loginblock form .upload_grp .upload_btn {
    margin: 0 0 10px;
  }
}
.login_lightbox .loginblock .logintab ul,
.choose_librarycard_lightbox .loginblock .logintab ul,
.qrcode_lightbox .loginblock .logintab ul,
.recommendbook_lightbox .loginblock .logintab ul,
.search_field_lightbox .loginblock .logintab ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.login_lightbox .loginblock .logintab ul li,
.choose_librarycard_lightbox .loginblock .logintab ul li,
.qrcode_lightbox .loginblock .logintab ul li,
.recommendbook_lightbox .loginblock .logintab ul li,
.search_field_lightbox .loginblock .logintab ul li {
  width: 48%;
  float: left;
  list-style: none;
  margin: 0 0.2em !important;
}
.login_lightbox .loginblock .logintab ul li a,
.choose_librarycard_lightbox .loginblock .logintab ul li a,
.qrcode_lightbox .loginblock .logintab ul li a,
.recommendbook_lightbox .loginblock .logintab ul li a,
.search_field_lightbox .loginblock .logintab ul li a {
  display: block !important;
  color: #005d98;
  border: 2px solid #005d98;
  padding: 0.5em !important;
  text-align: center;
  box-sizing: border-box;
}
.login_lightbox .loginblock .logintab ul li a:hover, .login_lightbox .loginblock .logintab ul li a.active,
.choose_librarycard_lightbox .loginblock .logintab ul li a:hover,
.choose_librarycard_lightbox .loginblock .logintab ul li a.active,
.qrcode_lightbox .loginblock .logintab ul li a:hover,
.qrcode_lightbox .loginblock .logintab ul li a.active,
.recommendbook_lightbox .loginblock .logintab ul li a:hover,
.recommendbook_lightbox .loginblock .logintab ul li a.active,
.search_field_lightbox .loginblock .logintab ul li a:hover,
.search_field_lightbox .loginblock .logintab ul li a.active {
  background-color: #005d98;
  color: #fff;
}
@media (max-width: 400px) {
  .login_lightbox .loginblock .logintab ul li,
  .choose_librarycard_lightbox .loginblock .logintab ul li,
  .qrcode_lightbox .loginblock .logintab ul li,
  .recommendbook_lightbox .loginblock .logintab ul li,
  .search_field_lightbox .loginblock .logintab ul li {
    width: auto;
    float: none;
    clear: both;
    margin: 0 0 5px;
  }
}
.login_lightbox .loginblock .account_content,
.choose_librarycard_lightbox .loginblock .account_content,
.qrcode_lightbox .loginblock .account_content,
.recommendbook_lightbox .loginblock .account_content,
.search_field_lightbox .loginblock .account_content {
  clear: both;
}
.login_lightbox .loginblock .account_content p,
.choose_librarycard_lightbox .loginblock .account_content p,
.qrcode_lightbox .loginblock .account_content p,
.recommendbook_lightbox .loginblock .account_content p,
.search_field_lightbox .loginblock .account_content p {
  margin: 10px 0 !important;
}
.login_lightbox .loginblock .account_content .form_grp label,
.choose_librarycard_lightbox .loginblock .account_content .form_grp label,
.qrcode_lightbox .loginblock .account_content .form_grp label,
.recommendbook_lightbox .loginblock .account_content .form_grp label,
.search_field_lightbox .loginblock .account_content .form_grp label {
  margin: 5px 0;
}
.login_lightbox .loginblock .account_content .form_grp input[type=text],
.login_lightbox .loginblock .account_content .form_grp input[type=password],
.choose_librarycard_lightbox .loginblock .account_content .form_grp input[type=text],
.choose_librarycard_lightbox .loginblock .account_content .form_grp input[type=password],
.qrcode_lightbox .loginblock .account_content .form_grp input[type=text],
.qrcode_lightbox .loginblock .account_content .form_grp input[type=password],
.recommendbook_lightbox .loginblock .account_content .form_grp input[type=text],
.recommendbook_lightbox .loginblock .account_content .form_grp input[type=password],
.search_field_lightbox .loginblock .account_content .form_grp input[type=text],
.search_field_lightbox .loginblock .account_content .form_grp input[type=password] {
  width: 78%;
}
@media screen and (max-width: 991px) {
  .login_lightbox .loginblock .account_content .form_grp input[type=text],
  .login_lightbox .loginblock .account_content .form_grp input[type=password],
  .choose_librarycard_lightbox .loginblock .account_content .form_grp input[type=text],
  .choose_librarycard_lightbox .loginblock .account_content .form_grp input[type=password],
  .qrcode_lightbox .loginblock .account_content .form_grp input[type=text],
  .qrcode_lightbox .loginblock .account_content .form_grp input[type=password],
  .recommendbook_lightbox .loginblock .account_content .form_grp input[type=text],
  .recommendbook_lightbox .loginblock .account_content .form_grp input[type=password],
  .search_field_lightbox .loginblock .account_content .form_grp input[type=text],
  .search_field_lightbox .loginblock .account_content .form_grp input[type=password] {
    width: 100%;
  }
}
.login_lightbox .loginblock .account_content .form_grp.password_toggle,
.choose_librarycard_lightbox .loginblock .account_content .form_grp.password_toggle,
.qrcode_lightbox .loginblock .account_content .form_grp.password_toggle,
.recommendbook_lightbox .loginblock .account_content .form_grp.password_toggle,
.search_field_lightbox .loginblock .account_content .form_grp.password_toggle {
  display: flex;
  position: relative;
  flex-wrap: wrap;
}
.login_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon,
.choose_librarycard_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon,
.qrcode_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon,
.recommendbook_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon,
.search_field_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon {
  font-size: 0;
  right: 0.5em;
  bottom: 10px;
  height: 30px;
  top: auto;
  background: none;
  border: transparent;
  position: absolute;
  padding: 0 !important;
  min-width: 3em;
  box-shadow: none;
  margin-right: 22px;
}
@media (max-width: 400px) {
  .login_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon,
  .choose_librarycard_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon,
  .qrcode_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon,
  .recommendbook_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon,
  .search_field_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon {
    bottom: 0;
  }
}
.login_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon:focus,
.choose_librarycard_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon:focus,
.qrcode_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon:focus,
.recommendbook_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon:focus,
.search_field_lightbox .loginblock .account_content .form_grp.password_toggle button.btn-icon:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.login_lightbox .loginblock .account_content .form_grp.password_toggle button.btn_icon_hide,
.choose_librarycard_lightbox .loginblock .account_content .form_grp.password_toggle button.btn_icon_hide,
.qrcode_lightbox .loginblock .account_content .form_grp.password_toggle button.btn_icon_hide,
.recommendbook_lightbox .loginblock .account_content .form_grp.password_toggle button.btn_icon_hide,
.search_field_lightbox .loginblock .account_content .form_grp.password_toggle button.btn_icon_hide {
  background-image: url("../images/icon/icon_hide.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  width: 20px;
}
.login_lightbox .loginblock .account_content .form_grp.password_toggle button.btn_icon_show,
.choose_librarycard_lightbox .loginblock .account_content .form_grp.password_toggle button.btn_icon_show,
.qrcode_lightbox .loginblock .account_content .form_grp.password_toggle button.btn_icon_show,
.recommendbook_lightbox .loginblock .account_content .form_grp.password_toggle button.btn_icon_show,
.search_field_lightbox .loginblock .account_content .form_grp.password_toggle button.btn_icon_show {
  background-image: url("../images/icon/icon_show.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  width: 20px;
}
@media screen and (max-width: 991px) {
  .login_lightbox .loginblock .account_content .form_grp.password_toggle button,
  .choose_librarycard_lightbox .loginblock .account_content .form_grp.password_toggle button,
  .qrcode_lightbox .loginblock .account_content .form_grp.password_toggle button,
  .recommendbook_lightbox .loginblock .account_content .form_grp.password_toggle button,
  .search_field_lightbox .loginblock .account_content .form_grp.password_toggle button {
    top: 1.7em;
  }
}
.login_lightbox .loginblock .qrcode_content,
.choose_librarycard_lightbox .loginblock .qrcode_content,
.qrcode_lightbox .loginblock .qrcode_content,
.recommendbook_lightbox .loginblock .qrcode_content,
.search_field_lightbox .loginblock .qrcode_content {
  text-align: center;
  display: none;
  padding-top: 30px;
}
.login_lightbox .loginblock .qrcode_content .qrcode,
.choose_librarycard_lightbox .loginblock .qrcode_content .qrcode,
.qrcode_lightbox .loginblock .qrcode_content .qrcode,
.recommendbook_lightbox .loginblock .qrcode_content .qrcode,
.search_field_lightbox .loginblock .qrcode_content .qrcode {
  border: 1px solid #ccc;
  text-align: center;
  padding: 15px;
  width: 60%;
  margin: 0 auto 10px;
}
.login_lightbox .loginblock .qrcode_content .qrcode img,
.choose_librarycard_lightbox .loginblock .qrcode_content .qrcode img,
.qrcode_lightbox .loginblock .qrcode_content .qrcode img,
.recommendbook_lightbox .loginblock .qrcode_content .qrcode img,
.search_field_lightbox .loginblock .qrcode_content .qrcode img {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto;
}
.login_lightbox .loginblock .qrcode_content .qrcode .reorganize,
.choose_librarycard_lightbox .loginblock .qrcode_content .qrcode .reorganize,
.qrcode_lightbox .loginblock .qrcode_content .qrcode .reorganize,
.recommendbook_lightbox .loginblock .qrcode_content .qrcode .reorganize,
.search_field_lightbox .loginblock .qrcode_content .qrcode .reorganize {
  background-image: url("../images/icon_reorganize.png");
  background-repeat: no-repeat;
  background-position: 10px center;
  display: block;
  padding: 5px 5px 5px 30px;
  width: 70px;
  margin: 0 auto;
  text-align: left;
}
.login_lightbox .loginblock .qrcode_content .means,
.choose_librarycard_lightbox .loginblock .qrcode_content .means,
.qrcode_lightbox .loginblock .qrcode_content .means,
.recommendbook_lightbox .loginblock .qrcode_content .means,
.search_field_lightbox .loginblock .qrcode_content .means {
  margin: 10px 10px 20px;
  position: relative;
  display: inline-block;
  padding: 0;
}
.login_lightbox .loginblock .qrcode_content .means:before,
.choose_librarycard_lightbox .loginblock .qrcode_content .means:before,
.qrcode_lightbox .loginblock .qrcode_content .means:before,
.recommendbook_lightbox .loginblock .qrcode_content .means:before,
.search_field_lightbox .loginblock .qrcode_content .means:before {
  content: "i";
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  line-height: 25px;
  position: absolute;
  left: -30px;
}
.login_lightbox .loginblock .qrcode_content .qrcode_btn a,
.choose_librarycard_lightbox .loginblock .qrcode_content .qrcode_btn a,
.qrcode_lightbox .loginblock .qrcode_content .qrcode_btn a,
.recommendbook_lightbox .loginblock .qrcode_content .qrcode_btn a,
.search_field_lightbox .loginblock .qrcode_content .qrcode_btn a {
  background-color: #005d98;
  color: #fff;
  display: block;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
}
.login_lightbox .loginblock .qrcode_content .qrcode_btn a:hover,
.choose_librarycard_lightbox .loginblock .qrcode_content .qrcode_btn a:hover,
.qrcode_lightbox .loginblock .qrcode_content .qrcode_btn a:hover,
.recommendbook_lightbox .loginblock .qrcode_content .qrcode_btn a:hover,
.search_field_lightbox .loginblock .qrcode_content .qrcode_btn a:hover {
  background-color: #007ccb;
}

.recommendbook_lightbox .loginblock {
  max-width: 50vw;
  min-width: 900px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 45px 25px 35px 25px;
  background-color: #fff;
  border-radius: 5px;
  overflow: auto;
  text-align: left;
}
@media screen and (max-width: 991px) {
  .recommendbook_lightbox .loginblock {
    min-width: 700px;
  }
}
@media (max-width: 767px) {
  .recommendbook_lightbox .loginblock {
    min-width: 500px;
    top: 50%;
    left: 50%;
    padding: 35px 20px 35px 20px;
  }
}
@media screen and (max-width: 575px) {
  .recommendbook_lightbox .loginblock {
    max-width: 100vh;
    transform: translate(0, 0);
    padding: 50px 20px 35px 20px;
    left: 0;
    top: 0;
    border-radius: 0;
    height: 100%;
    width: 100%;
    max-width: auto;
    min-width: auto;
    box-sizing: border-box;
  }
}

.search_field_lightbox .loginblock {
  max-width: 50vw;
  min-width: 250px;
  max-height: 80vh;
}
@media (max-width: 767px) {
  .search_field_lightbox .loginblock {
    max-width: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 35px 20px 35px 20px;
  }
}
@media screen and (max-width: 575px) {
  .search_field_lightbox .loginblock {
    transform: translate(0, 0);
    padding: 50px 20px 35px 20px;
    left: 0;
    top: 0;
    border-radius: 0;
    height: 100%;
    width: 100%;
    max-height: 100vh;
    max-width: auto;
    min-width: auto;
    box-sizing: border-box;
  }
}

.choose_librarycard_lightbox .loginblock {
  width: 100%;
}
@media (max-width: 767px) {
  .choose_librarycard_lightbox .loginblock {
    width: auto;
  }
}

.librarycard_blcok {
  text-align: center;
  padding: 10px 0;
}
.librarycard_blcok .librarycard {
  display: inline-block;
  margin: 0 1% 10px;
  width: 47%;
}
@media screen and (max-width: 1399px) {
  .librarycard_blcok .librarycard {
    width: 100%;
    margin-bottom: 10px;
  }
}
.librarycard_blcok .librarycard a {
  display: block;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
@media screen and (max-width: 575px) {
  .librarycard_blcok .librarycard a {
    padding: 15px 10px;
  }
}
.librarycard_blcok .librarycard a .picimg {
  width: 56px;
  background-color: #eee;
  border: 3px solid #fff;
  float: left;
  margin-right: 20px;
  padding: 8px;
}
.librarycard_blcok .librarycard a .picimg img {
  width: 56px;
}
@media screen and (max-width: 575px) {
  .librarycard_blcok .librarycard a .picimg {
    margin-right: 10px;
  }
}
.librarycard_blcok .librarycard a ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
  font-size: 0.938em;
}
.librarycard_blcok .librarycard a ul li {
  margin-bottom: 8px;
  display: block;
  float: none;
  text-align: left;
  padding: 0 0 8px;
  border-bottom: 1px dashed #ddd;
}
.librarycard_blcok .librarycard a:hover {
  background-color: #ffc;
  color: #333;
}

.related_lightbox .relatedbox {
  max-width: 80vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 35px 20px 35px 20px;
  background-color: #fff;
  border-radius: 5px;
}
@media (max-width: 767px) {
  .related_lightbox .relatedbox {
    top: 45%;
  }
}
@media (max-width: 575px) {
  .related_lightbox .relatedbox {
    max-width: 90vh;
    left: 30%;
    transform: translate(-20%, -50%);
    padding: 35px 20px 35px 10px;
  }
}
.related_lightbox .relatedbox .close a {
  background-image: url("../images/icon_close03.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 38px;
  width: 38px;
  height: 38px;
  display: block;
  cursor: pointer;
  position: absolute;
  right: 3%;
  top: 12px;
  z-index: 9999;
}
.related_lightbox .relatedbox h2 {
  font-size: 1.875em;
  text-align: left;
  border-bottom: 2px solid #005d98;
  margin: 0px auto 20px;
  padding: 0 0 20px;
  color: #005d98;
}
.related_lightbox .relatedbox .relatedlist {
  margin: 25px 0 0 15px;
  height: 50vh;
  overflow-y: auto;
  padding-right: 0px;
  scrollbar-face-color: #eee;
  scrollbar-highlight-color: #ccc;
  scrollbar-shadow-color: #ccc;
  scrollbar-3dlight-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-arrow-color: #666;
  scrollbar-track-color: #fff;
  box-sizing: border-box;
}
.related_lightbox .relatedbox .relatedlist ul {
  margin: 0;
  padding: 0;
}
.related_lightbox .relatedbox .relatedlist ul li {
  display: inline-block;
  width: 48%;
  margin-bottom: 8px;
  margin-right: 0.8%;
}
.related_lightbox .relatedbox .relatedlist ul li:nth-child(2n) {
  margin-right: 0;
}
@media (max-width: 767px) {
  .related_lightbox .relatedbox .relatedlist ul li {
    width: 100%;
    margin-right: 0;
  }
}
.related_lightbox .relatedbox .relatedlist ul li a {
  padding: 10px 15px 10px 35px;
  display: block;
  background-color: #eee;
  border-radius: 5px;
  transition: 0.5s;
  position: relative;
}
.related_lightbox .relatedbox .relatedlist ul li a:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #005d98;
  left: 15px;
  top: 20px;
  transition: 0.5s;
}
.related_lightbox .relatedbox .relatedlist ul li a:hover {
  padding: 10px 15px 10px 45px;
  background-color: #fed857;
  color: #000;
}
.related_lightbox .relatedbox .relatedlist ul li a:hover:before {
  left: 25px;
}

.related_lightbox .relatedboxmp {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.related_lightbox .relatedboxmp .close {
  position: absolute;
  right: 25px;
  top: 20px;
  cursor: pointer;
}
.related_lightbox .relatedboxmp .close a {
  background-image: url("../images/icon_close03.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 38px;
  width: 38px;
  height: 38px;
  display: block;
  cursor: pointer;
}
.related_lightbox .relatedboxmp h2 {
  font-size: 1.875em;
  text-align: left;
  border-bottom: 2px solid #005d98;
  margin: 0px auto 20px;
  padding: 0 0 20px;
  color: #005d98;
}
.related_lightbox .relatedboxmp .relatedlist {
  margin: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 100px;
  scrollbar-face-color: #eee;
  scrollbar-highlight-color: #ccc;
  scrollbar-shadow-color: #ccc;
  scrollbar-3dlight-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-arrow-color: #666;
  scrollbar-track-color: #fff;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .related_lightbox .relatedboxmp .relatedlist {
    padding: 100px 50px;
  }
}
.related_lightbox .relatedboxmp .relatedlist ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.related_lightbox .relatedboxmp .relatedlist ul li {
  flex: 0 0 auto;
  flex-basis: 31%;
  margin: 0 1.166% 0.8em;
  font-size: 1.5em;
}
@media (max-width: 1200px) {
  .related_lightbox .relatedboxmp .relatedlist ul li {
    flex-basis: 48%;
    margin: 0 1% 0.8em;
  }
}
@media screen and (max-width: 575px) {
  .related_lightbox .relatedboxmp .relatedlist ul li {
    flex-basis: 100%;
    margin: 0 0 0.8em;
  }
}
.related_lightbox .relatedboxmp .relatedlist ul li a {
  padding: 10px 15px 10px 35px;
  display: block;
  color: #fff;
  text-align: left;
  transition: 0.5s;
  position: relative;
}
.related_lightbox .relatedboxmp .relatedlist ul li a:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
  left: 15px;
  top: 20px;
  transition: 0.5s;
}
.related_lightbox .relatedboxmp .relatedlist ul li a:hover {
  padding: 10px 15px 10px 45px;
  color: #000;
  background-color: #fed857;
  border-radius: 50px;
}
.related_lightbox .relatedboxmp .relatedlist ul li a:hover:before {
  left: 25px;
  background-color: #000;
}

.lightboxstyle {
  overflow-y: auto;
}
.lightboxstyle .lightboxstyle_block {
  width: 80vh;
  position: relative;
  padding: 20px 20px 25px 20px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .lightboxstyle .lightboxstyle_block {
    width: 70vh;
  }
}
@media screen and (max-width: 575px) {
  .lightboxstyle .lightboxstyle_block {
    padding: 50px 20px 0px 20px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    border-radius: 0;
    margin: 0;
    box-sizing: border-box;
  }
}
.lightboxstyle .lightboxstyle_block.block_extend {
  width: 90vh;
}
@media screen and (max-width: 767px) {
  .lightboxstyle .lightboxstyle_block.block_extend {
    width: 80vh;
  }
}
@media screen and (max-width: 575px) {
  .lightboxstyle .lightboxstyle_block.block_extend {
    width: 100%;
  }
}
.lightboxstyle .lightboxstyle_block.block_extend_further {
  width: 70%;
}
@media screen and (max-width: 767px) {
  .lightboxstyle .lightboxstyle_block.block_extend_further {
    width: 80%;
  }
}
@media screen and (max-width: 575px) {
  .lightboxstyle .lightboxstyle_block.block_extend_further {
    width: 100%;
  }
}
.lightboxstyle .lightboxstyle_block.fullyopen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  margin: 0;
  border-radius: 0;
  padding: 20px 0px 25px 10px;
}
.lightboxstyle .lightboxstyle_block.fullyopen h2 {
  text-align: center;
}
.lightboxstyle .lightboxstyle_block.fullyopen .booklist_block {
  max-width: 1400px;
  margin: 0 auto;
  overflow-y: auto;
  height: calc(100vh - 100px);
  padding-right: 10px;
}
.lightboxstyle .lightboxstyle_block.fullyopen .booklist_block .directions {
  margin: 1em 0.5em 0.5em;
}
.lightboxstyle .lightboxstyle_block.fullyopen .booklist_block .data_all {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.5em;
}
.lightboxstyle .lightboxstyle_block.fullyopen .booklist_block .data_all .choosebtn {
  flex: 1 1 auto;
}
@media screen and (max-width: 575px) {
  .lightboxstyle .lightboxstyle_block.fullyopen .booklist_block .data_all .choosebtn {
    flex-basis: 100%;
  }
}
.lightboxstyle .lightboxstyle_block.fullyopen .booklist_block .data_all .choosebtn a {
  margin-bottom: 5px;
}
.lightboxstyle .lightboxstyle_block.fullyopen .booklist_block .data_all .data_quantity2 {
  flex: 0 0 auto;
  text-align: right;
}
@media screen and (max-width: 575px) {
  .lightboxstyle .lightboxstyle_block.fullyopen .booklist_block .data_all .data_quantity2 {
    flex: 1 1 auto;
    flex-basis: 100%;
  }
}
.lightboxstyle .lightboxstyle_block.fullyopen .booklist_block .booklist .bookmidblock h2 {
  border-bottom: none;
}
.lightboxstyle .lightboxstyle_block .close {
  position: absolute;
  right: 15px;
  top: 10px;
}
.lightboxstyle .lightboxstyle_block h2 {
  font-size: 1.375em;
  text-align: left;
  border-bottom: 2px solid #005d98;
  margin: 0px auto 20px;
  padding: 0 30px 10px 0;
  color: #005d98;
  line-height: 1.3em;
}
.lightboxstyle .lightboxstyle_block .subtitle {
  margin: 0.5em 0;
  font-weight: bolder;
  color: #333;
  font-size: 1.125em;
}
.lightboxstyle .lightboxstyle_block .lightbox_data {
  width: 100% !important;
  overflow-x: hidden;
  scrollbar-face-color: #eee;
  scrollbar-highlight-color: #ccc;
  scrollbar-shadow-color: #ccc;
  scrollbar-3dlight-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-arrow-color: #666;
  scrollbar-track-color: #fff;
}
.lightboxstyle .lightboxstyle_block .lightbox_data table {
  border: 1px dotted #d3d3d3;
}
.lightboxstyle .lightboxstyle_block .lightbox_data table th {
  border: 1px dotted #d3d3d3;
  text-align: left;
  padding: 10px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data table th span {
  margin: 0 5px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data table th span img {
  vertical-align: middle;
}
.lightboxstyle .lightboxstyle_block .lightbox_data table th a {
  color: #005d98;
}
.lightboxstyle .lightboxstyle_block .lightbox_data table th a:hover {
  color: #3e78c0;
}
.lightboxstyle .lightboxstyle_block .lightbox_data table td {
  border: none;
  padding: 10px 10px 4px;
  border: 1px dotted #d3d3d3;
  vertical-align: top;
}
.lightboxstyle .lightboxstyle_block .lightbox_data table label {
  margin: 0;
  padding: 0 0 0 30px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data table label input {
  border-radius: 3px !important;
  margin-right: 6px;
  margin-left: -28px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .more {
  margin: 0 auto;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .more a {
  display: block;
  text-align: center;
  padding: 8px;
  background-image: none;
  background-color: #f3f3f3 !important;
  color: #333;
  border-radius: 0;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .more a:hover {
  color: #dd1f03;
}
.lightboxstyle .lightboxstyle_block .lightbox_data p {
  line-height: 1.8em;
  margin: 0 0 10px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .serialnumber {
  text-align: center;
  padding: 20px;
  border-radius: 5px;
  border: 1px dashed #ccc;
  line-height: 1.8em;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .serialnumber .number {
  font-size: 1.125em;
  margin-bottom: 0.5em;
  display: block;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .radio_grp label {
  margin: 0 0 8px;
  padding-left: 23px;
  padding-top: 3px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .radio_grp label input {
  margin-right: 6px;
  margin-left: -20px;
}
@media screen and (max-width: 767px) {
  .lightboxstyle .lightboxstyle_block .lightbox_data .form_grid .form_title {
    padding-left: 0px;
  }
}
@media (max-width: 767px) {
  .lightboxstyle .lightboxstyle_block .lightbox_data .form_grid .form_content {
    padding-left: 0;
    padding-right: 0;
  }
}
.lightboxstyle .lightboxstyle_block .lightbox_data .form_grid .form_content img.captcha {
  margin-right: 5px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .form_grid .form_content textarea {
  height: 7em;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .form_grid button {
  margin: 0;
  vertical-align: middle;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .form_grid .btn {
  padding: 0.4em 1em !important;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .form_grid .form_title,
.lightboxstyle .lightboxstyle_block .lightbox_data .form_grid .form_content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .to {
  float: left;
  margin: 5px 5px 0;
}
@media (max-width: 615px) {
  .lightboxstyle .lightboxstyle_block .lightbox_data .to {
    display: none;
  }
}
.lightboxstyle .lightboxstyle_block .lightbox_data .select_date {
  width: 45% !important;
}
@media screen and (max-width: 767px) {
  .lightboxstyle .lightboxstyle_block .lightbox_data .select_date {
    width: 47% !important;
  }
}
@media (max-width: 580px) {
  .lightboxstyle .lightboxstyle_block .lightbox_data .select_date {
    width: 99% !important;
  }
}
.lightboxstyle .lightboxstyle_block .lightbox_data .word_red {
  font-size: 1.125em;
  font-style: normal;
  margin: 0 5px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .usage_time {
  text-align: right;
  display: inline-block;
  width: 100%;
  margin: 10px 0 5px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .listdata p {
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .listdata ul {
  margin: 10px 0;
  padding: 0;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .listdata ul li {
  display: block;
  margin: 0 0 8px;
  background-image: url("../images/icon_point.png");
  background-repeat: no-repeat;
  background-position: 0 5px;
  padding-left: 20px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .listdata ul li em {
  font-style: normal;
  color: #b94b00;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .score_star {
  position: relative;
  text-align: left;
  width: 180px;
  height: 34px;
  z-index: 0;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .score_star > img {
  position: absolute;
  z-index: 99;
  width: 180px;
  height: 34px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .score_star .score_color {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 180px;
  height: 34px;
  overflow: hidden;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .form_contentinline {
  padding: 0;
  text-align: left;
  margin: 10px 0;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .form_contentinline select {
  width: auto;
  display: inline-block;
  margin-right: 5px;
}
@media screen and (max-width: 767px) {
  .lightboxstyle .lightboxstyle_block .lightbox_data .form_contentinline select {
    width: 49%;
    margin-right: 0px;
  }
}
@media screen and (max-width: 575px) {
  .lightboxstyle .lightboxstyle_block .lightbox_data .form_contentinline select {
    width: 100%;
    margin-right: 0px;
  }
}
.lightboxstyle .lightboxstyle_block .lightbox_data .bookname {
  margin: 30px 0 10px;
  font-size: 1.5em;
  color: #005d98;
  line-height: 1.2em;
  background-image: url("../images/icon_book.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  padding: 0 0 0 30px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .timedata {
  display: flex;
  font-size: 1.125em;
  align-items: center;
  margin: 0 0 20px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .timedata .reciprocal {
  flex: none;
  flex-basis: 50%;
  text-align: center;
  font-size: 1.125em;
}
@media (max-width: 400px) {
  .lightboxstyle .lightboxstyle_block .lightbox_data .timedata .reciprocal {
    flex-basis: 40%;
  }
}
.lightboxstyle .lightboxstyle_block .lightbox_data .timedata .retime {
  flex: none;
  flex-basis: 50%;
}
@media (max-width: 400px) {
  .lightboxstyle .lightboxstyle_block .lightbox_data .timedata .retime {
    flex-basis: 60%;
  }
}
.lightboxstyle .lightboxstyle_block .lightbox_data .timedata .retime a {
  display: inline-block;
  border-radius: 50px;
  background-color: #e57373;
  color: #fff;
  padding: 10px 25px;
  text-align: center;
  white-space: nowrap;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .timedata .retime a img {
  width: 20px;
  margin-right: 10px;
  vertical-align: middle;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .barcode_block {
  text-align: center;
  padding: 20px 10px 0;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .barcode_block .num {
  margin-bottom: 5px;
  display: block;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .barcode_block img {
  width: 300px;
  margin-bottom: 10px;
  display: block;
  margin: 0 auto;
}
@media (max-width: 400px) {
  .lightboxstyle .lightboxstyle_block .lightbox_data .barcode_block img {
    width: 90%;
  }
}
.lightboxstyle .lightboxstyle_block .lightbox_data .barcode_block p {
  font-size: 0.813em;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block {
  padding: 5px 0;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .title {
  margin-bottom: 0.5em;
  font-size: 1.125em;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li {
  display: block;
  margin-bottom: 0.5em;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li .close {
  top: 3px;
  right: 1px;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li.content_inline {
  display: flex;
  position: relative;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li.content_inline .addoption {
  position: absolute;
  top: 41px;
  left: 0;
  width: calc(100% - 98px);
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 4px 10px;
  background-color: #fff;
  box-sizing: border-box;
  display: none;
  z-index: 1;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li.content_inline .addoption ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li.content_inline .addoption ul li {
  display: block;
  margin: 0;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li.content_inline .addoption ul li a {
  display: block;
  padding: 4px;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  color: #666;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li.content_inline .addoption ul li a:hover {
  color: #dd1f03;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li.content_inline .addoption ul li:last-child a {
  border: none;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li.content_inline .addoption ul li:before {
  content: "";
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata ul li button {
  min-width: auto;
  margin-left: 0.3em;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .editlabel_block .editlabeldata .usedlabel {
  margin-bottom: 0.5em;
  font-size: 1.125em;
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid #ccc;
}
.lightboxstyle .lightboxstyle_block .lightbox_image img {
  width: 100%;
  height: auto;
}
.lightboxstyle .lightboxstyle_block .super_business_data .data_content {
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  padding: 20px;
  box-sizing: border-box;
}
.lightboxstyle .lightboxstyle_block .super_business_data .data_content .title {
  color: #774e2b;
  font-weight: bolder;
  font-size: 1.25em;
  margin-bottom: 15px;
}
.lightboxstyle .lightboxstyle_block .super_business_data .data_content ul {
  margin: 0 0 10px;
  padding: 0;
  list-style-type: none;
}
.lightboxstyle .lightboxstyle_block .super_business_data .data_content ul li {
  margin-bottom: 5px;
}
.lightboxstyle .lightboxstyle_block .super_business_data .data_content ul li span {
  font-weight: bolder;
}
.lightboxstyle .lightboxstyle_block .super_business_data .data_content .btn_group button {
  margin-right: 5px;
}
.lightboxstyle .lightboxstyle_block .bank_code_data .banklist ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.lightboxstyle .lightboxstyle_block .bank_code_data .banklist ul li {
  flex: none;
  flex-basis: 23%;
  margin: 0 1%;
}
.lightboxstyle .lightboxstyle_block .bank_code_data .banklist ul li em {
  font-style: normal;
  margin-right: 3px;
  font-weight: bolder;
}
.lightboxstyle .lightboxstyle_block .bank_code_data .banklist ul li a {
  display: block;
}
.lightboxstyle .lightboxstyle_block2 {
  max-width: 90vh;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 25px 20px 25px 20px;
  background-color: #fff;
  border-radius: 5px;
}
@media (max-width: 768px) {
  .lightboxstyle .lightboxstyle_block2 {
    max-width: 100vh;
    left: 27%;
    transform: translate(-20%, -50%);
    padding: 35px 20px 35px 20px;
  }
}
@media screen and (max-width: 575px) {
  .lightboxstyle .lightboxstyle_block2 {
    transform: translate(0, 0);
    padding: 50px 20px 35px 20px;
    width: auto;
    left: 0;
    top: 0;
    border-radius: 0;
    height: 100%;
  }
}
.lightboxstyle .lightboxstyle_block2 .close {
  position: absolute;
  right: 20px;
  top: 15px;
}
.lightboxstyle .lightboxstyle_block2 h2 {
  font-size: 1.562em;
  text-align: left;
  border-bottom: 2px solid #005d98;
  margin: 0px auto 10px;
  padding: 0 0 10px;
  color: #005d98;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data {
  max-height: 70vh;
  width: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-face-color: #eee;
  scrollbar-highlight-color: #ccc;
  scrollbar-shadow-color: #ccc;
  scrollbar-3dlight-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-arrow-color: #666;
  scrollbar-track-color: #fff;
}
@media (max-width: 768px) {
  .lightboxstyle .lightboxstyle_block2 .lightbox_data {
    width: 100% !important;
    max-height: 40vh;
  }
}
@media screen and (max-width: 575px) {
  .lightboxstyle .lightboxstyle_block2 .lightbox_data {
    width: 100% !important;
    max-height: 55vh;
  }
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data p {
  padding: 0;
  margin: 0 0 5px;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data table {
  border: 1px dotted #d3d3d3;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data table th {
  border: 1px dotted #d3d3d3;
  padding: 10px;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data table th span {
  margin: 0 5px;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data table th span img {
  vertical-align: middle;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data table td {
  border: none;
  padding: 10px 10px 4px;
  border: 1px dotted #d3d3d3;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data table label {
  margin: 0;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data table label input {
  border-radius: 3px !important;
  margin-right: 6px;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data .more {
  margin: 0 auto;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data .more a {
  display: block;
  text-align: center;
  padding: 8px;
  background-image: none;
  background-color: #f3f3f3 !important;
  color: #333;
  border-radius: 0;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data .more a:hover {
  color: #dd1f03;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data .form_grid .form_title,
.lightboxstyle .lightboxstyle_block2 .lightbox_data .form_grid .form_content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data .select_date {
  width: 45% !important;
}
@media screen and (max-width: 767px) {
  .lightboxstyle .lightboxstyle_block2 .lightbox_data .select_date {
    width: 47% !important;
  }
}
@media (max-width: 580px) {
  .lightboxstyle .lightboxstyle_block2 .lightbox_data .select_date {
    width: 99% !important;
  }
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data .form_contentinline {
  padding: 0;
  text-align: left;
  margin: 10px 0;
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data .form_contentinline select {
  width: auto;
  display: inline-block;
  margin-right: 5px;
}
@media screen and (max-width: 767px) {
  .lightboxstyle .lightboxstyle_block2 .lightbox_data .form_contentinline select {
    width: 49%;
    margin-right: 0px;
  }
}
@media screen and (max-width: 575px) {
  .lightboxstyle .lightboxstyle_block2 .lightbox_data .form_contentinline select {
    width: 100%;
    margin-right: 0px;
  }
}
.lightboxstyle .lightboxstyle_block2 .lightbox_data .bookname {
  margin: 30px 0 10px;
  font-size: 1.5em;
  color: #005d98;
  line-height: 1.2em;
  background-image: url("../images/icon_book.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  padding: 0 0 0 30px;
}
.lightboxstyle .lightboxbank_style_block {
  width: 60vw;
  position: relative;
  padding: 20px 20px 25px 20px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 15px;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
  .lightboxstyle .lightboxbank_style_block {
    width: 80vw;
  }
}
@media screen and (max-width: 575px) {
  .lightboxstyle .lightboxbank_style_block {
    padding: 50px 20px 25px 20px;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    margin: 0;
    box-sizing: border-box;
  }
}
.lightboxstyle .lightboxbank_style_block .close {
  position: absolute;
  right: 15px;
  top: 10px;
}
.lightboxstyle .lightboxbank_style_block h2 {
  font-size: 1.375em;
  text-align: left;
  border-bottom: 2px solid #005d98;
  margin: 0px auto 20px;
  padding: 0 30px 10px 0;
  color: #005d98;
  line-height: 1.3em;
}
.lightboxstyle .lightboxbank_style_block .bank_code_data .banklist ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.lightboxstyle .lightboxbank_style_block .bank_code_data .banklist ul li {
  flex: none;
  flex-basis: 23%;
  margin: 0 1% 5px;
}
@media screen and (max-width: 991px) {
  .lightboxstyle .lightboxbank_style_block .bank_code_data .banklist ul li {
    flex-basis: 32%;
    margin: 0 0.66% 5px;
  }
}
@media screen and (max-width: 767px) {
  .lightboxstyle .lightboxbank_style_block .bank_code_data .banklist ul li {
    flex-basis: 48%;
    margin: 0 1% 5px;
  }
}
@media (max-width: 400px) {
  .lightboxstyle .lightboxbank_style_block .bank_code_data .banklist ul li {
    flex-basis: 100%;
    margin: 0 0% 5px;
  }
}
.lightboxstyle .lightboxbank_style_block .bank_code_data .banklist ul li em {
  font-style: normal;
  margin-right: 3px;
  font-weight: bolder;
}
.lightboxstyle .lightboxbank_style_block .bank_code_data .banklist ul li a {
  display: block;
}
.lightboxstyle .function {
  padding: 0;
  text-align: left;
}
.lightboxstyle .agreecontent {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ccc;
  padding-top: 1em;
  padding-left: 0.2em;
}
.lightboxstyle .Consent_list {
  margin: 0 0 0 2em;
  padding: 0;
}
.lightboxstyle .Consent_list li {
  margin-bottom: 1em;
}
.lightboxstyle .Consent_list li span {
  display: block;
  margin-bottom: 0.5em;
  font-weight: bold;
}

.commentcontent_lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  display: none;
}
.commentcontent_lightbox .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);
}
.commentcontent_lightbox .close2 {
  background-image: url("../images/icon_close03.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 46px;
  height: 48px;
  display: block;
  cursor: pointer;
  position: absolute;
  left: 7%;
  top: 50px;
  z-index: 99999;
  margin-left: -23px;
}
@media screen and (max-width: 767px) {
  .commentcontent_lightbox .close2 {
    display: none;
  }
}
.commentcontent_lightbox .close3 {
  display: block !important;
  padding: 10px 10px 5px;
  display: block;
  cursor: pointer;
  background-color: #f3f3f3;
  position: relative;
  z-index: 99999;
}
.commentcontent_lightbox .bookcomment2 {
  z-index: 999999;
  background-color: #fff;
  position: absolute;
}
.commentcontent_lightbox .bookcomment2 .commentblock {
  border: none !important;
  padding: 20px;
  margin-right: 0 !important;
}
.commentcontent_lightbox .bookcomment2 .commentblock h4 {
  white-space: normal !important;
}

@media screen and (max-width: 767px) {
  .mystudymenu_lightbox .mystudybox {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .mystudymenu_lightbox .mystudybox .close {
    position: absolute;
    right: 25px;
    top: 20px;
    background-image: url("../images/icon_close03.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 46px;
    height: 48px;
    display: block;
    cursor: pointer;
  }
  .mystudymenu_lightbox .member_data2 {
    clear: both;
    float: none;
    padding: 0px 30px;
    box-shadow: none;
    position: relative;
    top: 100px;
    text-align: left;
  }
  .mystudymenu_lightbox .member_data2 > ul {
    margin: 0;
    padding: 0;
  }
  .mystudymenu_lightbox .member_data2 > ul > li {
    list-style-type: none;
    border-bottom: 1px solid #d2d2d2;
    display: block;
    float: none;
    clear: both;
    overflow: hidden;
    margin: 0;
    font-size: 1.125em !important;
  }
  .mystudymenu_lightbox .member_data2 > ul > li > a {
    padding: 12px 15px 10px;
    display: block;
    color: #fff;
    transition: 0.5s;
    position: relative;
  }
  .mystudymenu_lightbox .member_data2 > ul > li > a:after {
    content: "";
    position: absolute;
    right: 20px;
    top: 9px;
    border: 2px solid #fff;
    width: 10px;
    height: 10px;
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(225deg);
    transition: 0.5s;
  }
  .mystudymenu_lightbox .member_data2 > ul > li > a.turnicon:after {
    transform: rotate(45deg);
    top: 18px;
    border-color: #333;
    border-right-color: transparent;
    border-bottom-color: transparent;
  }
  .mystudymenu_lightbox .member_data2 > ul > li > a:hover {
    color: #000;
    background-color: #eee;
  }
  .mystudymenu_lightbox .member_data2 > ul > li ul {
    margin: 10px 0 10px;
    padding: 0;
    float: none;
    clear: both;
  }
  .mystudymenu_lightbox .member_data2 > ul > li ul li {
    font-size: 0.983em;
    list-style-type: none;
    float: none;
    clear: both;
    margin: 0;
  }
  .mystudymenu_lightbox .member_data2 > ul > li ul li a {
    color: #fff;
    padding: 7px 10px 7px 30px;
    position: relative;
    display: block;
  }
  .mystudymenu_lightbox .member_data2 > ul > li ul li a:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    top: 16px;
    left: 17px;
    background-color: #fff;
  }
  .mystudymenu_lightbox .member_data2 > ul > li ul li a:hover {
    color: #000;
    background-color: #ffc;
  }
  .mystudymenu_lightbox .member_data2 > ul > li ul li a:hover:before {
    background-color: #333;
  }
}
.qrcode_lightbox .qrcode_block {
  text-align: center;
}

.recommendbook_lightbox .bookselection_list {
  padding-right: 30px;
  height: 520px;
  overflow-y: auto;
}
@media screen and (max-width: 1399px) {
  .recommendbook_lightbox .bookselection_list {
    padding-right: 0;
  }
}
.recommendbook_lightbox .bookselection_list ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.recommendbook_lightbox .bookselection_list ul li {
  flex: none;
  flex-basis: 18%;
  width: 18%;
  margin: 0 3.5% 25px;
  position: relative;
}
@media screen and (max-width: 991px) {
  .recommendbook_lightbox .bookselection_list ul li {
    flex-basis: 23%;
    width: 23%;
    margin: 0 5.16% 25px;
  }
}
@media screen and (max-width: 767px) {
  .recommendbook_lightbox .bookselection_list ul li {
    flex-basis: 40%;
    width: 40%;
    margin: 0 5% 25px;
  }
}
@media (max-width: 400px) {
  .recommendbook_lightbox .bookselection_list ul li {
    flex-basis: 220px;
    width: 220px;
    margin: 0 auto 25px;
  }
}
.recommendbook_lightbox .bookselection_list ul li a {
  color: #000;
  display: block;
}
.recommendbook_lightbox .bookselection_list ul li a:hover {
  color: #dd1f03;
}
.recommendbook_lightbox .bookselection_list ul li a .image {
  height: 210px;
  background-color: #fff;
  position: relative;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.recommendbook_lightbox .bookselection_list ul li a .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  margin: auto;
  z-index: 8;
  display: block;
}
.recommendbook_lightbox .bookselection_list ul li a span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.125em;
  display: block;
}
.recommendbook_lightbox .bookselection_list ul li .image_titlepage,
.recommendbook_lightbox .bookselection_list ul li .image_titlepage2 {
  margin: 0 auto 15px;
  height: 210px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.recommendbook_lightbox .bookselection_list ul li .image_titlepage:before,
.recommendbook_lightbox .bookselection_list ul li .image_titlepage2:before {
  height: 120px;
}

.search_field_lightbox .content ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.search_field_lightbox .content ul li {
  border-bottom: 1px solid #ccc;
  font-size: 1.125em;
}
.search_field_lightbox .content ul li a {
  padding: 10px !important;
  display: block !important;
  text-align: center;
  color: #666 !important;
}
.search_field_lightbox .content ul li a:hover {
  color: #f4573f;
  cursor: pointer;
}
.search_field_lightbox .content ul li a.active {
  background-color: #eee;
  color: #f4573f !important;
}

.prove_content p {
  font-size: 1.063em;
  line-height: 1.7em;
}
.prove_content .upload_block {
  width: 100%;
  background-color: #eee;
  text-align: center;
  line-height: 1.7em;
  padding: 20px 30px 30px;
  margin: 20px auto;
  border-radius: 5px;
  box-sizing: border-box;
}
.prove_content .upload_block .image {
  width: 50px;
  margin: 20px auto;
}
.prove_content .upload_block .image img {
  width: 50px;
}

.equipment_pass_date {
  margin-bottom: 1em;
  text-align: right;
}

.method_block {
  overflow-y: auto;
  height: 50vh;
  border: 1px solid #ddd;
  padding: 20px;
}

.appointment_cycle_block {
  margin-left: 2em;
  display: none;
}

.previousdata {
  display: inline-block;
}
.previousdata a {
  display: block;
  border-radius: 50px;
  background-color: #ddd;
  border: 1px solid #ddd;
  padding: 0.5em 1.5em 0.5em 2.5em;
  color: #333;
  position: relative;
}
.previousdata a:before {
  content: "";
  border: 2px solid #333;
  border-right: none;
  border-bottom: none;
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
  position: absolute;
  left: 1.4em;
  top: 0.9em;
  transition: 0.2s;
}
.previousdata a:hover {
  color: #333;
  background-color: #eee;
}
.previousdata a:hover:before {
  left: 1.1em;
}

.appointmentdate_group {
  display: flex;
  flex-wrap: wrap;
  padding: 1em 0;
  justify-content: space-between;
}
.appointmentdate_group .title {
  flex: 0 0 auto;
  margin-bottom: 1em;
  font-size: 1.125em;
  font-weight: bolder;
}
.appointmentdate_group .datedata {
  flex: 0 0 auto;
  margin-bottom: 1em;
}
.appointmentdate_group .datedata em {
  color: #dc0122;
  padding: 0 0.5em;
}
.appointmentdate_group .datelist {
  flex: 1 1 auto;
  flex-basis: 100%;
}
.appointmentdate_group .datelist .date {
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

.AIGPT_information {
  padding: 0 1em;
}
.AIGPT_information .AIGPT_group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.AIGPT_information .AIGPT_group .AIGPT_btn {
  flex: 1 1 auto;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
}
.AIGPT_information .AIGPT_group .AIGPT_btn button {
  margin: 0;
}
@media (max-width: 400px) {
  .AIGPT_information .AIGPT_group .AIGPT_btn {
    justify-content: center;
  }
  .AIGPT_information .AIGPT_group .AIGPT_btn button {
    margin: 0 0 0.5em;
    flex: 0 0 auto;
  }
}
.AIGPT_information .AIGPT_group .evaluate_block {
  margin-right: 0.5em;
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 670px) {
  .AIGPT_information .AIGPT_group .evaluate_block {
    justify-content: center;
  }
  .AIGPT_information .AIGPT_group .evaluate_block .evaluate {
    text-align: center !important;
  }
}
@media (max-width: 400px) {
  .AIGPT_information .AIGPT_group .evaluate_block {
    flex-basis: 100%;
  }
}
.AIGPT_information .AIGPT_group .evaluate_block .evaluate {
  padding: 0.3em 1em 0.3em 0;
  background: rgb(221, 221, 221);
  background: linear-gradient(0deg, rgb(221, 221, 221) 0%, rgb(255, 255, 255) 100%);
  border: 1px solid #ddd;
  border-radius: 50px;
  text-align: right;
  display: inline-block;
}
.AIGPT_information .AIGPT_group .evaluate_block label {
  margin: 0 0 0 1em;
  cursor: pointer;
}
.AIGPT_information .AIGPT_group .recommendbook {
  flex: 0 0 auto;
  flex-basis: 160px;
  margin-right: 20px;
}
.AIGPT_information .AIGPT_group .recommendbook img {
  max-width: 150px;
}
@media (max-width: 670px) {
  .AIGPT_information .AIGPT_group .recommendbook {
    text-align: center;
    flex: 1 1 auto !important;
    flex-basis: 100% !important;
    margin-right: 0 !important;
  }
}
.AIGPT_information .AIGPT_group .recommendbook .image_titlepage,
.AIGPT_information .AIGPT_group .recommendbook .image_titlepage2 {
  width: 110px;
  margin: 0 auto 1em;
}
.AIGPT_information .AIGPT_group .content {
  flex: 1 1 auto;
  flex-basis: calc(100% - 180px);
  margin-bottom: 2em;
}
.AIGPT_information .AIGPT_group .content .booktitle {
  color: #005d98;
  font-size: 1.125em;
  font-weight: bolder;
  margin-bottom: 0.3em;
}
.AIGPT_information .AIGPT_group .content .introduce {
  margin-bottom: 0.5em;
}
.AIGPT_information .recommended_categories {
  border: 1px solid #ddd;
  padding: 2em 1.5em 2em;
  border-radius: 5px;
  margin-bottom: 1em;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px inset;
}
.AIGPT_information .recommended_categories:nth-of-type(2) .category_people:after {
  background-color: #f5a7a7;
}
.AIGPT_information .recommended_categories:nth-of-type(3) .category_people:after {
  background-color: #f2ca91;
}
.AIGPT_information .recommended_categories:nth-of-type(5) .category_people:after {
  background-color: #91c6f2;
}
.AIGPT_information .recommended_categories .category_people {
  font-size: 1.125em;
  font-weight: bolder;
  margin-bottom: 1em;
  position: relative;
  display: inline-block;
  position: relative;
  padding-right: 0.3em;
  padding-left: 2em;
}
.AIGPT_information .recommended_categories .category_people:before {
  content: "";
  width: 3px;
  height: 2em;
  background-color: #ccc;
  transform: skewX(-30deg);
  position: absolute;
  left: 0.7em;
  top: -0.2em;
}
.AIGPT_information .recommended_categories .category_people:after {
  content: "";
  width: auto;
  height: 8px;
  background-color: #9be09c;
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 2em;
  z-index: 1;
}
.AIGPT_information .recommended_categories .category_people span {
  position: relative;
  z-index: 2;
}
.AIGPT_information .recommended_categories .category_people::first-letter {
  font-size: 1.875em;
  margin-right: 0.3em;
  color: #333;
  position: relative;
}
.AIGPT_information .recommended_categories .reason {
  color: #774e2b;
  margin-bottom: 0.3em;
}
.AIGPT_information .recommended_categories ul {
  margin: 0 0 0 20px;
  padding: 0;
}
.AIGPT_information .recommended_categories ul li a {
  color: #333;
  text-decoration: underline;
}
.AIGPT_information .recommended_categories ul li a:hover {
  color: #dd1f03;
}

.exclusive_book {
  display: flex;
  flex-wrap: wrap;
}
.exclusive_book .booktitle {
  flex: 1 1 auto;
  color: #005d98;
  font-size: 1.625em;
  font-weight: bolder;
  margin-bottom: 1em;
  margin-top: 0;
  padding-left: 1.8em;
  position: relative;
  line-height: 1.2em;
}
@media screen and (max-width: 767px) {
  .exclusive_book .booktitle {
    flex-basis: 100%;
    max-width: 100%;
  }
}
.exclusive_book .booktitle:before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-image: url("../images/icon_exclusivebook.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  background-color: rgba(221, 221, 221, 0.8666666667);
  position: absolute;
  left: 0;
  top: -3px;
}
.exclusive_book .E_SDG_logo_block {
  flex: 0 0 auto;
  flex-basis: 300px;
  max-width: 300px;
  margin-bottom: 1em;
  display: flex;
}
.exclusive_book .E_SDG_logo_block .esdg_logo {
  flex: 1 1 auto;
  margin-right: 10px;
}
.exclusive_book .E_SDG_logo_block .esdg_logo img {
  width: 100%;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock {
  flex: 0 0 auto;
  flex-basis: 40px;
  max-width: 40px;
  display: flex;
  flex-wrap: wrap;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span {
  margin-right: 0.3em;
  margin-bottom: 0.5em;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a {
  display: block;
  padding: 5px;
  background-color: #ea132e;
  color: #fff;
  border-radius: 5px;
  font-size: 1.125em;
  transform: 0.5s;
  min-width: 30px;
  text-align: center;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a:hover {
  background-color: #d21129;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget1 {
  background-color: #ea132e;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget1:hover {
  background-color: #d21129;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget2 {
  background-color: #a36b01;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget2:hover {
  background-color: #8a5a01;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget3 {
  background-color: #6d7e01;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget3:hover {
  background-color: #576501;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget4 {
  background-color: #ca1d36;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget4:hover {
  background-color: #b41a30;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget5 {
  background-color: #9b4ab1;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget5:hover {
  background-color: #8b429f;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget6 {
  background-color: #00819e;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget6:hover {
  background-color: #006c85;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget7 {
  background-color: #9a7027;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget7:hover {
  background-color: #866122;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget8 {
  background-color: #961838;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget8:hover {
  background-color: #801430;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget9 {
  background-color: #be5a02;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget9:hover {
  background-color: #a54e02;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget10 {
  background-color: #e1157e;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget10:hover {
  background-color: #ca1371;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget11 {
  background-color: #85743f;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget11:hover {
  background-color: #746537;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget12 {
  background-color: #9e6b49;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget12:hover {
  background-color: #8d5f41;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget13 {
  background-color: #3c8368;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget13:hover {
  background-color: #34725a;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget14 {
  background-color: #017cb5;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget14:hover {
  background-color: #016b9c;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget15 {
  background-color: #20873f;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget15:hover {
  background-color: #1b7235;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget16 {
  background-color: #005488;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget16:hover {
  background-color: #00446f;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget17 {
  background-color: #11345f;
}
.exclusive_book .E_SDG_logo_block .sdgstargetblock span a.sdgstarget17:hover {
  background-color: #0d2849;
}
.exclusive_book .content {
  flex: 1 1 auto;
  flex-basis: 100%;
  max-width: 100%;
  border: 1px solid #ddd;
  padding: 2em 1.5em 2em;
  border-radius: 5px;
  margin-bottom: 0;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px inset;
}
.exclusive_book .content .title {
  font-size: 1.25em;
  margin: 0 0 1em;
  color: #b94b00;
  padding: 0 0 0 1em;
  position: relative;
}
.exclusive_book .content .title:before {
  content: "";
  width: 8px;
  height: 20px;
  background-color: #f1ad00;
  transform: skewX(-15deg);
  position: absolute;
  left: 0;
  top: 0;
}
.exclusive_book .content p {
  line-height: 1.8em;
}
.exclusive_book .content ul {
  margin: 0 0 2em;
  padding: 0;
  list-style-type: none;
}
.exclusive_book .content ul li {
  margin-bottom: 0.5em;
}

button {
  position: relative;
}
button.backbtn {
  padding: 0.3em 0.8em 0.3em 2em;
  background-image: url("../images/icon_back.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0.5em center !important;
  margin-bottom: 10px !important;
}

.sharedreading_lightbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 2em;
}
.sharedreading_lightbox .contentlist,
.sharedreading_lightbox .subtitle {
  flex: 1 1 auto;
  flex-basis: 100%;
}
.sharedreading_lightbox .subtitle {
  font-size: 1.063em;
}
@media (max-width: 670px) {
  .sharedreading_lightbox .contentlist {
    order: 4;
  }
}
.sharedreading_lightbox .recommendbook {
  flex: 0 0 auto;
  flex-basis: 160px;
  max-width: 160px;
  margin-left: 2em;
  text-align: center;
  margin-bottom: 1em;
}
.sharedreading_lightbox .recommendbook img {
  max-width: 100%;
  max-height: 100%;
}
@media (max-width: 670px) {
  .sharedreading_lightbox .recommendbook {
    flex-basis: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    order: 1;
  }
}
.sharedreading_lightbox .content {
  flex: 1 1 auto;
  flex-basis: calc(100% - 180px - 2em);
  margin-bottom: 1em;
}
@media (max-width: 670px) {
  .sharedreading_lightbox .content {
    flex-basis: 100%;
    order: 2;
  }
}
.sharedreading_lightbox .content .booktitle {
  font-size: 1.125em;
  font-weight: bolder;
  margin-bottom: 0.5em;
  color: #005d98;
}
.sharedreading_lightbox .content .datelist {
  margin-bottom: 0.3em;
}
.sharedreading_lightbox .content .datelist ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.sharedreading_lightbox .content .datelist ul li {
  color: #774e2b;
  margin-bottom: 0.1em;
  position: relative;
  padding-right: 1em;
  margin-right: 0.5em;
}
.sharedreading_lightbox .content .datelist ul li:after {
  content: "/";
  position: absolute;
  right: 0;
  top: 0;
}
.sharedreading_lightbox .content .datelist ul li:last-child:after {
  display: none;
}
.sharedreading_lightbox .discuss_list {
  flex: 1 1 auto;
  flex-basis: 100%;
  background-color: #eee;
  padding: 1em;
  border-radius: 5px;
  margin-bottom: 1em;
}
@media (max-width: 670px) {
  .sharedreading_lightbox .discuss_list {
    flex-basis: 100%;
    order: 3;
  }
}
.sharedreading_lightbox .discuss_list .subtitle {
  margin: 0 0 0.5em;
}
.sharedreading_lightbox .discuss_list ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.sharedreading_lightbox .discuss_list ul li {
  padding: 0.3em 1em;
  background-color: #774e2b;
  color: #fff;
  margin-right: 0.5em;
  border-radius: 5px;
}

.lightpicblock {
  line-height: 0;
  margin-top: 2em;
}
.lightpicblock img {
  max-width: 100%;
}
@media screen and (max-width: 575px) {
  .lightpicblock {
    margin-top: 0;
  }
}

.AI_situationalstyle,
.AI_situationalstyle_records {
  background-color: rgba(255, 255, 255, 0.5);
}

.lightboxAI_situational {
  width: 60vw;
  position: relative;
  padding: 50px 60px;
  margin: 60px auto;
  background-color: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.lightboxAI_situational:before {
  content: "";
  width: 70%;
  height: 16px;
  background-color: #005d98;
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%);
  border-radius: 50px;
}
@media (max-width: 1200px) {
  .lightboxAI_situational {
    width: 80vw;
  }
}
@media screen and (max-width: 575px) {
  .lightboxAI_situational {
    padding: 50px 20px 25px 20px;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    margin: 0;
    box-sizing: border-box;
  }
}
.lightboxAI_situational .close {
  position: absolute;
  right: 15px;
  top: 10px;
}
.lightboxAI_situational .backbtn {
  position: absolute;
  left: 60px;
  top: 15px;
}
@media screen and (max-width: 575px) {
  .lightboxAI_situational .backbtn {
    left: 20px;
  }
}
.lightboxAI_situational h2 {
  font-size: 1.25em;
  font-weight: bold;
  text-align: left;
  border-bottom: none !important;
  margin: 10px auto 20px;
  padding: 0 30px 10px 0;
  line-height: 1.5em;
  text-align: center;
  color: #005d98 !important;
}
.lightboxAI_situational .title {
  font-size: 1.25em;
  font-weight: bold;
  margin: 0px auto 20px;
  padding: 3px 15px;
  color: #005d98;
  line-height: 1.5em;
  text-align: left;
  position: relative;
  border: 1px solid #005d98;
  display: inline-block;
  border-radius: 50px;
  border-width: 0px 8px;
}
.lightboxAI_situational .title a {
  color: #005d98;
}
.lightboxAI_situational .title a:hover {
  color: #dc0122;
}
.lightboxAI_situational .content {
  text-align: left;
}
.lightboxAI_situational .content .describe_block {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  text-align: right;
  margin-bottom: 8px;
}
.lightboxAI_situational .content .describe_block textarea {
  border: none;
  margin-bottom: 10px;
  height: auto;
}
.lightboxAI_situational .content .describe_block textarea:focus {
  box-shadow: none !important;
}
.lightboxAI_situational .content .describe_block button {
  font-size: 0;
}
.lightboxAI_situational .content .describe_block button.voice {
  width: 20px;
  height: 36px;
  background-image: url("../images/icon_voice.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 36px;
  background-color: transparent;
  border: none;
  box-shadow: none;
  margin-right: 8px;
}
.lightboxAI_situational .content .describe_block button.voice:hover, .lightboxAI_situational .content .describe_block button.voice.active {
  background-image: url("../images/icon_voice_active.svg");
}
.lightboxAI_situational .content .describe_block button.btn {
  background-color: #888;
  width: 56px;
  height: 36px;
  border-radius: 50px;
  background-image: url("../images/icon/icon_aiarrow_white.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40%;
}
.lightboxAI_situational .content .describe_block button.btn-submit {
  background-color: #b94b00;
}
.lightboxAI_situational .content .query_records_btn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1em;
}
.lightboxAI_situational .content .query_records_btn a {
  display: block;
  padding: 0 0 0 1.5em;
  background-image: url("../images/icon/icon_clock2.svg");
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 18px;
  color: #333;
}
.lightboxAI_situational .content .query_records_btn a:hover {
  color: #dc0122;
  text-decoration: underline;
}
.lightboxAI_situational .content .example_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.lightboxAI_situational .content .example_list ul li {
  flex: 0 0 auto;
  flex-basis: 49%;
  margin-bottom: 1em;
}
@media screen and (max-width: 767px) {
  .lightboxAI_situational .content .example_list ul li {
    flex-basis: 100%;
    margin-bottom: 12px;
  }
}
.lightboxAI_situational .content .example_list ul li a {
  display: block;
  text-align: left;
  padding: 15px;
  height: 100%;
  border: 1px solid #ccc;
  border-left-width: 8px;
  border-radius: 4px;
  box-sizing: border-box;
  transition: 0.5s;
}
.lightboxAI_situational .content .example_list ul li a:hover {
  border: 1px solid #005d98;
  color: #005d98;
  border-left-width: 14px;
}
.lightboxAI_situational .content .query_records_group .query_records_list {
  margin-bottom: 2em;
}
.lightboxAI_situational .content .query_records_group .query_records_list .query_function {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5em;
}
.lightboxAI_situational .content .query_records_group .query_records_list .query_function .time {
  padding: 0 0 0 1.5em;
  background-image: url("../images/icon/icon_clock2.svg");
  background-repeat: no-repeat;
  background-position: 0 3px;
  background-size: 18px;
  color: #005d98;
  font-weight: bold;
}
.lightboxAI_situational .content .query_records_group .query_records_list .query_function .batch_del a {
  display: block;
  background-image: url(../images/icon_cancel.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  padding: 3px 10px 3px 30px;
  border-radius: 4px;
  background-color: #eee;
}
.lightboxAI_situational .content .query_records_group .query_records_list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.lightboxAI_situational .content .query_records_group .query_records_list ul li {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 0.5em;
  padding: 0.5em 2em 0.5em 0.8em;
  text-align: left;
  position: relative;
  transition: 0.5s;
}
.lightboxAI_situational .content .query_records_group .query_records_list ul li:hover {
  background-color: #005d98;
  color: #fff;
}
.lightboxAI_situational .content .query_records_group .query_records_list ul li:hover .del {
  background-image: url(../images/icon_cancel_white.png);
}
.lightboxAI_situational .content .query_records_group .query_records_list ul li .del {
  position: absolute;
  right: 0.5em;
  top: 0.3em;
  font-size: 0;
  display: block;
  background-image: url(../images/icon_cancel.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 13px 17px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
}
.lightboxAI_situational .content .extendblock {
  padding: 8px 12px;
  background-color: #eee;
  margin-bottom: 2em;
}
.lightboxAI_situational .content .extend_list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.lightboxAI_situational .content .extend_list ul li {
  padding: 12px 10px;
  border-bottom: 1px dashed #ccc;
  display: flex;
  align-items: center;
}
.lightboxAI_situational .content .extend_list ul li span {
  flex: 1 1 auto;
  margin-right: 1em;
}
.lightboxAI_situational .content .extend_list ul li button {
  font-size: 0;
  flex: 0 0 auto;
  flex-basis: 56px;
}
.lightboxAI_situational .content .extend_list ul li button.btn {
  background-color: #888;
  width: 56px;
  height: 36px;
  border-radius: 50px;
  background-image: url("../images/icon/icon_aiarrow_white.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40%;
}
.lightboxAI_situational .content .extend_list ul li button.btn:hover {
  background-color: #005d98;
}
.lightboxAI_situational .content .Keyelements_list ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.lightboxAI_situational .content .Keyelements_list ul li {
  flex: 0 0 auto;
  flex-basis: 18%;
  margin: 0 1% 10px;
}
.lightboxAI_situational .content .Keyelements_list ul li a {
  display: block;
  padding: 0.5em 1em;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
  color: #333;
  border-radius: 50px;
  transition: 0.5s;
}
.lightboxAI_situational .content .Keyelements_list ul li a:hover, .lightboxAI_situational .content .Keyelements_list ul li a:focus, .lightboxAI_situational .content .Keyelements_list ul li a.active {
  background-color: #005d98;
  color: #fff;
}

.section {
  padding: 0em 0 3em;
  text-align: center;
}
.section [class^=col] {
  box-sizing: border-box;
}

.event .news {
  float: left;
  width: 100%;
}
@media (min-width: 768px) {
  .event .news {
    float: left;
    width: 66.6666666667%;
  }
}
@media (min-width: 992px) {
  .event .news {
    float: left;
    width: 66.6666666667%;
  }
}
@media (min-width: 1400px) {
  .event .news {
    float: left;
    width: 66.6666666667%;
  }
}
.event .video {
  float: left;
  width: 100%;
}
@media (min-width: 768px) {
  .event .video {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 992px) {
  .event .video {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 1400px) {
  .event .video {
    float: left;
    width: 33.3333333333%;
  }
}
.event + .event .container {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.col-12 .col {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .col-12 .col {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-12 .col {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1400px) {
  .col-12 .col {
    float: left;
    width: 100%;
  }
}

.col-3 .col {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .col-3 .col {
    float: left;
    width: 25%;
  }
}
@media (min-width: 992px) {
  .col-3 .col {
    float: left;
    width: 25%;
  }
}
@media (min-width: 1400px) {
  .col-3 .col {
    float: left;
    width: 25%;
  }
}

.news .container {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
.news .col {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .news .col {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 992px) {
  .news .col {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 1400px) {
  .news .col {
    float: left;
    width: 33.3333333333%;
  }
}

.col-6 .container {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
.col-6 .col {
  float: left;
  width: 100%;
}
@media (min-width: 768px) {
  .col-6 .col {
    float: left;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .col-6 .col {
    float: left;
    width: 50%;
  }
}
@media (min-width: 1400px) {
  .col-6 .col {
    float: left;
    width: 50%;
  }
}

.col-8-4 .col {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .col-8-4 .col {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-8-4 .col {
    float: left;
    width: 66.6666666667%;
  }
}
@media (min-width: 1400px) {
  .col-8-4 .col {
    float: left;
    width: 66.6666666667%;
  }
}
.col-8-4 .col:nth-child(2) {
  float: left;
  width: 100%;
}
@media (min-width: 768px) {
  .col-8-4 .col:nth-child(2) {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-8-4 .col:nth-child(2) {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 1400px) {
  .col-8-4 .col:nth-child(2) {
    float: left;
    width: 33.3333333333%;
  }
}

.col-3-3-3 .col {
  float: left;
  width: 100%;
}
@media (min-width: 768px) {
  .col-3-3-3 .col {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 992px) {
  .col-3-3-3 .col {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 1400px) {
  .col-3-3-3 .col {
    float: left;
    width: 33.3333333333%;
  }
}
.col-3-3-3 .imgOuter {
  position: relative;
  overflow: hidden;
  background: #dedede;
}
.col-3-3-3 .imgOuter:before {
  display: block;
  content: "";
  padding-top: 75%;
}
.col-3-3-3 .imgOuter img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.col-3-3-3 + .col-3-3-3 {
  background: #005d98;
}

.col-1-2-1 .col {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  min-height: 250px;
}
@media (min-width: 768px) {
  .col-1-2-1 .col {
    float: left;
    width: 25%;
  }
}
@media (min-width: 992px) {
  .col-1-2-1 .col {
    float: left;
    width: 25%;
  }
}
@media (min-width: 1400px) {
  .col-1-2-1 .col {
    float: left;
    width: 25%;
  }
}
.col-1-2-1 .col:nth-child(2) {
  float: left;
  width: 100%;
}
@media (min-width: 768px) {
  .col-1-2-1 .col:nth-child(2) {
    float: left;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .col-1-2-1 .col:nth-child(2) {
    float: left;
    width: 50%;
  }
}
@media (min-width: 1400px) {
  .col-1-2-1 .col:nth-child(2) {
    float: left;
    width: 50%;
  }
}

.col-5 .col {
  float: left;
  width: 100%;
}
@media (min-width: 768px) {
  .col-5 .col {
    float: left;
    width: 16.6666666667%;
  }
}
@media (min-width: 992px) {
  .col-5 .col {
    float: left;
    width: 16.6666666667%;
  }
}
@media (min-width: 1400px) {
  .col-5 .col {
    float: left;
    width: 16.6666666667%;
  }
}
.col-5 .col:first-child {
  margin-left: 0%;
}
@media (min-width: 768px) {
  .col-5 .col:first-child {
    margin-left: 8.3333333333%;
  }
}
@media (min-width: 992px) {
  .col-5 .col:first-child {
    margin-left: 8.3333333333%;
  }
}
@media (min-width: 1400px) {
  .col-5 .col:first-child {
    margin-left: 8.3333333333%;
  }
}

.search_block {
  background-image: url("../images/search_blockbg02.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  height: 584px;
  padding: 0;
  position: relative;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .search_block {
    min-height: 630px;
    height: auto;
  }
}
@media (max-width: 380px) {
  .search_block {
    min-height: 700px;
    height: auto;
  }
}
.search_block:before {
  content: "";
  background-image: url("../images/search_blockbg01.png");
  background-repeat: no-repeat;
  background-position: center top;
  position: absolute;
  bottom: 0;
  height: 200px;
  width: 100%;
  z-index: 1;
  display: block;
}
.search_block .searchsystem {
  width: 80%;
  background-color: rgba(0, 0, 0, 0.6);
  margin: 45px auto;
  padding: 50px 60px 40px;
  text-align: center;
  font-size: 1em;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
@media (max-width: 992px) {
  .search_block .searchsystem {
    padding: 50px 55px 40px;
    width: 85%;
  }
}
@media (max-width: 767px) {
  .search_block .searchsystem {
    padding: 50px 40px 40px;
    width: 90%;
  }
}
@media (max-width: 520px) {
  .search_block .searchsystem {
    padding: 50px 40px 40px;
    width: 95%;
    margin: 50px auto 0;
  }
}
@media (max-width: 470px) {
  .search_block .searchsystem {
    padding: 50px 35px 40px;
    width: 95%;
  }
}
@media (max-width: 400px) {
  .search_block .searchsystem {
    padding: 30px;
    width: 100%;
  }
}
.search_block .searchsystem h2 {
  color: #fff;
  margin-bottom: 20px;
  margin-top: 0;
  font-size: 2.812em;
  line-height: 1.3em;
}
@media (max-width: 992px) {
  .search_block .searchsystem h2 {
    font-size: 2.687em;
  }
}
@media (max-width: 767px) {
  .search_block .searchsystem h2 {
    font-size: 2.375em;
  }
}
.search_block .searchsystem h2 br {
  display: none;
}
@media (max-width: 767px) {
  .search_block .searchsystem h2 br {
    display: block;
  }
}
@media (max-width: 430px) {
  .search_block .searchsystem h2 br {
    display: none;
  }
}
.search_block .searchsystem .search_fieldtype {
  display: flex;
  margin-bottom: 0.5em;
}
.search_block .searchsystem .search_fieldtype:has(+ .query_system_block .query_system_tabs) {
  margin-bottom: 3em;
}
.search_block .searchsystem .search_fieldtype select {
  color: #fff !important;
  width: auto;
  border-radius: 0;
  border: none !important;
  border-bottom: 1px solid #fff !important;
  padding: 0 30px 0 0em;
  margin-right: 1em;
  background: transparent url(../images/basic/icon_select_arrow_white.svg) no-repeat right center;
  background-size: 22px;
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .search_fieldtype:has(+ .query_system_block .query_system_tabs) {
    margin-bottom: 1em;
  }
}
@media (max-width: 480px) {
  .search_block .searchsystem .search_fieldtype {
    display: block;
  }
  .search_block .searchsystem .search_fieldtype:has(+ .query_system_block .query_system_tabs) {
    margin-bottom: 1em;
  }
  .search_block .searchsystem .search_fieldtype select {
    width: 100%;
  }
}
.search_block .searchsystem .query_system_block {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 24px 20px 14px;
  position: relative;
  margin-bottom: 1em;
  border-radius: 10px;
}
.search_block .searchsystem .query_system_block:has(.query_system_tabs) {
  padding: 30px 20px 10px;
}
.search_block .searchsystem .query_system_tabs {
  display: flex;
  justify-content: flex-start;
  position: absolute;
  top: -30px;
  left: 20px;
}
.search_block .searchsystem .query_system_tabs button {
  margin-right: 0.4em;
  margin-left: 0;
  border-radius: 50px;
  font-size: 1rem;
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .query_system_tabs {
    display: block;
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 1em;
  }
  .search_block .searchsystem .query_system_tabs button {
    width: 100%;
  }
}
.search_block .searchsystem .form_search {
  background-color: #fff;
  position: relative;
  height: 48px;
  margin: 0 auto 10px;
  text-align: left;
  padding: 0px;
}
.search_block .searchsystem .form_search input[type=text] {
  border-radius: 0;
  border: none;
  font-size: 1.125em;
  line-height: 1.125em;
  width: calc(100% - 52px - 50px);
  padding: 13px 10px 11px;
  font-weight: normal;
  margin: 0px;
  color: #333;
  height: 48px;
}
@media screen and (max-width: 767px) {
  .search_block .searchsystem .form_search input[type=text] {
    width: calc(100% - 52px);
  }
}
.search_block .searchsystem .form_search input {
  padding: 15px;
}
.search_block .searchsystem .form_search input[type=submit] {
  margin: 0;
  background-color: #dc0122;
  border: none;
  border-radius: 0;
  float: right;
  background-image: url("../images/icon_search01.png");
  background-repeat: no-repeat;
  background-position: center center;
  width: 52px;
  min-width: auto;
  height: 48px;
}
.search_block .searchsystem .form_search input[type=submit]:focus {
  background-color: #c2230b;
}
.search_block .searchsystem .form_search ::-webkit-input-placeholder {
  /* Chrome */
  color: #666;
}
.search_block .searchsystem .form_search :-ms-input-placeholder {
  /* IE 10+ */
  color: #666;
}
.search_block .searchsystem .form_search ::-moz-placeholder {
  /* Firefox 19+ */
  color: #666;
  opacity: 1;
}
.search_block .searchsystem .form_search :-moz-placeholder {
  /* Firefox 4 - 18 */
  color: #666;
  opacity: 1;
}
.search_block .searchsystem .recent_searches {
  width: 100%;
  background-color: rgb(255, 255, 255);
  border: 1px solid #eee;
  box-shadow: 0px 2px 2px #999;
  padding: 20px;
  box-sizing: border-box;
  position: absolute;
  display: none;
  z-index: 99;
}
.search_block .searchsystem .recent_searches:empty {
  padding: 0;
  box-shadow: none;
  border: none;
}
.search_block .searchsystem .recent_searches .title {
  font-size: 1.25em;
  margin-bottom: 10px;
  color: #005d98;
  float: left;
}
.search_block .searchsystem .recent_searches .save_record {
  float: right;
}
.search_block .searchsystem .recent_searches .promptword {
  margin: 0 0 20px;
  padding: 0;
  clear: both;
}
.search_block .searchsystem .recent_searches .promptword li {
  list-style: none;
  position: relative;
  border-bottom: 1px solid #eee;
}
.search_block .searchsystem .recent_searches .promptword li a {
  padding: 8px;
  display: block;
}
.search_block .searchsystem .recent_searches .promptword li a:hover {
  background-color: #eee;
  color: #000;
}
.search_block .searchsystem .recent_searches .record_list {
  margin: 0;
  padding: 0;
  clear: both;
}
.search_block .searchsystem .recent_searches .record_list li {
  list-style: none;
  position: relative;
  border-bottom: 1px solid #eee;
}
.search_block .searchsystem .recent_searches .record_list li a {
  display: block;
  padding: 8px 8px 8px 30px;
  text-align: left;
  background-image: url("../images/recent_searches_icon.png");
  background-repeat: no-repeat;
  background-position: 5px 12px;
  z-index: 5px;
  margin-right: 90px;
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .recent_searches .record_list li a {
    margin-right: 0;
  }
}
.search_block .searchsystem .recent_searches .record_list li a:hover {
  background-color: #eee;
  color: #000;
}
.search_block .searchsystem .recent_searches .record_list li a span {
  padding: 0 8px;
}
.search_block .searchsystem .recent_searches .record_list li a span em {
  padding-left: 8px;
  font-style: normal;
}
.search_block .searchsystem .recent_searches .record_list li .del {
  position: absolute;
  right: 0;
  top: 0px;
  z-index: 9;
  width: 80px;
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .recent_searches .record_list li .del {
    position: relative;
    width: 100%;
  }
}
.search_block .searchsystem .recent_searches .record_list li .del a {
  display: block;
  background-image: none;
  padding: 8px 0;
  margin-right: 0;
  text-align: center;
  font-size: 0.938em;
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .recent_searches .record_list li .del a {
    text-align: right;
  }
}
.search_block .searchsystem .recent_searches .record_list li .del a:hover {
  background-color: transparent;
  color: #dd1f03;
}
.search_block .searchsystem .searchall {
  margin-bottom: 10px;
  text-align: left;
  padding-left: 0;
}
.search_block .searchsystem .searchall a {
  padding: 5px 15px 5px 10px;
  margin-bottom: 7px;
  margin-left: 0;
  margin-right: 0;
  display: inline-block;
  color: #fff;
  position: relative;
}
.search_block .searchsystem .searchall a:before {
  content: "";
  position: absolute;
  border: 5px solid #fff;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  top: 12px;
  left: 0px;
  display: block;
}
.search_block .searchsystem .searchall a:hover {
  color: #fed857;
  text-decoration: underline;
}
.search_block .searchsystem .searchall a.addfield {
  background-color: #005d98;
  border-radius: 4px;
  margin: 0 10px 7px 0;
  padding: 5px 10px 5px 20px;
}
.search_block .searchsystem .searchall a.addfield:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
}
.search_block .searchsystem .searchall a.addfield:hover {
  background-color: #004774;
  color: #fff;
  text-decoration: none;
}
.search_block .searchsystem .onlysearch {
  text-align: left;
  color: #fff;
  margin: 5px 0;
}
.search_block .searchsystem .keywordHot {
  color: #fff;
  font-size: 1em;
  width: 100%;
  margin: 0 auto 20px;
  text-align: left;
  position: relative;
  float: none;
  clear: both;
}
.search_block .searchsystem .keywordHot span {
  float: left;
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .keywordHot span {
    float: none;
    display: inline-block;
  }
}
.search_block .searchsystem .keywordHot .RSS_button {
  position: absolute;
  left: 0;
  top: 20px;
  font-size: 0.938em;
}
.search_block .searchsystem .keywordHot .RSS_button .btn {
  padding: 0em 0.2em 0em 1.5em !important;
  min-width: 3.5em;
  margin: 0.5em 0.1em;
  background-size: 12px;
  font-size: 0.938em;
}
.search_block .searchsystem .keywordHot .RSS_button .btn:hover, .search_block .searchsystem .keywordHot .RSS_button .btn:focus {
  background-size: 13px !important;
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .keywordHot .RSS_button {
    position: relative;
    top: -3px;
    display: inline-block;
  }
}
.search_block .searchsystem .keywordHot ul {
  width: calc(100% - 6.5em);
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
  line-height: 25px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .keywordHot ul {
    width: 100%;
  }
}
.search_block .searchsystem .keywordHot ul li {
  display: inline-block;
  position: relative;
  margin-right: 20px;
}
.search_block .searchsystem .keywordHot ul li:after {
  content: "、";
  position: absolute;
  top: 0px;
  right: -19px;
}
.search_block .searchsystem .keywordHot ul li:last-child:after {
  content: "";
}
.search_block .searchsystem .keywordHot ul li a {
  color: #fff;
}
.search_block .searchsystem .keywordHot ul li a:hover {
  color: #fed857;
  text-decoration: underline;
}
.search_block .searchsystem .searchbutton {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1em;
}
.search_block .searchsystem .searchbutton span {
  margin-right: 0.5em;
}
.search_block .searchsystem .searchbutton span.primary_btn a {
  background-color: #005d98;
  color: #fff;
  background-image: url("../images/searchbutton_arrow01.png");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding: 0.5em 2.5em 0.5em 1em;
  transition: 0.2s;
  display: block;
  border-radius: 5px;
  border: 1px solid #005d98;
}
.search_block .searchsystem .searchbutton span.primary_btn a:hover {
  background-position: right 1em center;
  padding: 0.5em 3em 0.5em 1em;
}
.search_block .searchsystem .searchbutton span.white_btn a {
  background-color: #fff;
  color: #333;
  background-image: url("../images/searchbutton_arrow02.png");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding: 0.5em 2.5em 0.5em 1em;
  transition: 0.2s;
  border-radius: 4px;
  border: 1px solid #fff;
  display: block;
}
.search_block .searchsystem .searchbutton span.white_btn a:hover {
  background-position: right 1em center;
  padding: 0.5em 3em 0.5em 1em;
}
.search_block .searchsystem .btn-yellow {
  color: #000;
  position: relative;
  z-index: 999;
}
.search_block .searchsystem .newsblcok {
  padding-top: 10px;
  border-top: 1px solid #fff;
  text-align: left;
  height: 40px;
  overflow: hidden;
  position: relative;
  display: flex;
}
.search_block .searchsystem .newsblcok.openblock {
  height: auto;
  overflow: visible;
}
@media screen and (max-width: 767px) {
  .search_block .searchsystem .newsblcok {
    height: 70px;
  }
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .newsblcok {
    flex-wrap: wrap;
  }
}
.search_block .searchsystem .newsblcok .newslist {
  flex: auto;
  flex-basis: calc(100% - 120px);
  max-width: calc(100% - 120px);
}
@media screen and (max-width: 767px) {
  .search_block .searchsystem .newsblcok .newslist {
    width: 100%;
    flex-basis: 100%;
    max-width: 100%;
    order: 2;
  }
}
.search_block .searchsystem .newsblcok .newslist .title {
  display: inline-block;
  background-color: #dd1f03;
  color: #fff;
  padding: 3px 7px 3px 27px;
  border-radius: 4px;
  display: inline-block;
  margin-right: 10px;
  margin-top: 5px;
  background-image: url("../images/news2.svg");
  background-repeat: no-repeat;
  background-size: 14px 11px;
  background-position: 6px 8px;
  width: auto;
  line-height: 1.3em;
  font-size: 1em;
  vertical-align: top;
  box-sizing: border-box;
}
.search_block .searchsystem .newsblcok .newslist .title span {
  display: block;
}
.search_block .searchsystem .newsblcok .newslist ul {
  width: 75%;
  display: inline-block;
  margin: 5px 0 0 0;
  padding: 0;
}
@media screen and (max-width: 1399px) {
  .search_block .searchsystem .newsblcok .newslist ul {
    width: 65%;
  }
}
@media (max-width: 860px) {
  .search_block .searchsystem .newsblcok .newslist ul {
    width: 55%;
  }
}
@media screen and (max-width: 767px) {
  .search_block .searchsystem .newsblcok .newslist ul {
    width: 100%;
  }
}
.search_block .searchsystem .newsblcok .newslist ul li {
  list-style-type: none;
}
.search_block .searchsystem .newsblcok .newslist ul li a {
  display: inline-block;
  color: #fff;
  padding: 3px 0px 3px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.search_block .searchsystem .newsblcok .newslist ul li a:hover {
  color: #fed857;
  text-decoration: underline;
}
.search_block .searchsystem .newsblcok .rightblock {
  flex: none;
  flex-basis: 110px;
  max-width: 110px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .search_block .searchsystem .newsblcok .rightblock {
    flex-basis: 100%;
    max-width: 100%;
    order: 1;
    position: absolute;
    right: 0;
    top: 10px;
  }
}
.search_block .searchsystem .newsblcok .rightblock .openclosebtn {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  font-size: 0;
}
.search_block .searchsystem .newsblcok .rightblock .openclosebtn a {
  display: block;
}
@media (max-width: 380px) {
  .search_block .searchsystem .newsblcok .rightblock .openclosebtn {
    margin-right: 5px;
  }
}
.search_block .searchsystem .newsblcok .rightblock .openclosebtn:before {
  content: "";
  border: 2px solid #fff;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 7px;
  left: 8px;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  transition: 0.5s;
}
.search_block .searchsystem .newsblcok .rightblock .openclosebtn.open:before {
  transform: rotate(-135deg);
  top: 10px;
}
.search_block .searchsystem .newsblcok .rightblock .newsmore {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  padding-left: 15px;
}
@media (max-width: 380px) {
  .search_block .searchsystem .newsblcok .rightblock .newsmore {
    padding-left: 10px;
  }
}
.search_block .searchsystem .newsblcok .rightblock .newsmore:before {
  content: "";
  width: 1px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 5px;
  background-color: #fff;
}
.search_block .searchsystem .newsblcok .rightblock .newsmore a {
  color: #fff;
}
.search_block .searchsystem .newsblcok .rightblock .newsmore a:hover {
  text-decoration: underline;
}

.related_block {
  background-color: #fff;
}
.related_block .related_links {
  height: 230px;
  width: 95%;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 1399px) {
  .related_block .related_links {
    width: 92%;
  }
}
.related_block .related_links div a {
  display: block;
  text-align: center;
  font-size: 1.483em;
  color: #333;
  padding-top: 20px;
  line-height: 1.3em;
  position: relative;
}
.related_block .related_links div a span {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: block;
  background-color: #005d98;
  text-align: center;
  position: relative;
  margin: 0 auto 30px;
  transition: 0.5s;
}
.related_block .related_links div a span img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  max-width: 70px;
  max-height: 70px;
}
.related_block .related_links div a:hover {
  color: #0076c1;
}
.related_block .related_links div a:hover span {
  transform: scale(1.1, 1.1);
  background-color: #0076c1;
}
.related_block .related_links div a.new span {
  background-color: #b94b00;
}
.related_block .related_links div a.new span:before {
  content: "";
  position: absolute;
  top: -10px;
  right: -8px;
  height: 60px;
  width: 60px;
  background-image: url("../images/related_links_bg.svg");
  background-size: 60px;
}
.related_block .related_links div a.new span:after {
  content: "new";
  color: #333;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.688em;
  z-index: 9;
  font-weight: bold;
  transition: 0.5s;
}
.related_block .related_links div a.new:hover {
  color: #d35500;
}
.related_block .related_links div a.new:hover span {
  background-color: #d35500;
}
@media (min-width: 1200px) {
  .related_block .related_links .slick-next {
    right: -40px;
  }
  .related_block .related_links .slick-prev {
    left: -30px;
  }
}
@media screen and (max-width: 1399px) {
  .related_block .related_links .slick-next {
    right: -45px;
  }
  .related_block .related_links .slick-prev {
    left: -45px;
  }
}
@media screen and (max-width: 767px) {
  .related_block .related_links .slick-next {
    right: -25px;
  }
  .related_block .related_links .slick-prev {
    left: -25px;
  }
}
@media (max-width: 430px) {
  .related_block .related_links .slick-next {
    right: -20px;
  }
  .related_block .related_links .slick-prev {
    left: -20px;
  }
}
.related_block .alllink a {
  display: inline-block;
  font-size: 1.25em;
  color: #555;
  padding: 0 0 2em 0;
  position: relative;
  background-image: url("../images/alllink_icon.png");
  background-size: 15px 10px;
  background-repeat: no-repeat;
  background-position: center bottom 0.5em;
  font-weight: bold;
  transition: 0.5s;
}
.related_block .alllink a:hover {
  color: #000;
  background-position: center bottom 1em;
}

.newbooks_block,
.recommendbooks_block,
.recommendbooks_block2 {
  padding: 30px 0;
}
.newbooks_block h2,
.recommendbooks_block h2,
.recommendbooks_block2 h2 {
  color: #dc0122;
  font-size: 1.875em;
  text-align: center;
  font-weight: 700;
  width: 100%;
  margin: 0 auto 40px;
}
@media screen and (max-width: 767px) {
  .newbooks_block h2,
  .recommendbooks_block h2,
  .recommendbooks_block2 h2 {
    text-align: center;
  }
}
.newbooks_block .newbooks,
.newbooks_block .recommendbooks,
.newbooks_block .recommendbooks2,
.recommendbooks_block .newbooks,
.recommendbooks_block .recommendbooks,
.recommendbooks_block .recommendbooks2,
.recommendbooks_block2 .newbooks,
.recommendbooks_block2 .recommendbooks,
.recommendbooks_block2 .recommendbooks2 {
  width: 95%;
  margin: 0 auto 50px;
  height: 240px;
  padding-left: 15px;
  box-sizing: border-box;
}
@media screen and (max-width: 1399px) {
  .newbooks_block .newbooks,
  .newbooks_block .recommendbooks,
  .newbooks_block .recommendbooks2,
  .recommendbooks_block .newbooks,
  .recommendbooks_block .recommendbooks,
  .recommendbooks_block .recommendbooks2,
  .recommendbooks_block2 .newbooks,
  .recommendbooks_block2 .recommendbooks,
  .recommendbooks_block2 .recommendbooks2 {
    width: 92%;
  }
}
.newbooks_block .newbooks div,
.newbooks_block .recommendbooks div,
.newbooks_block .recommendbooks2 div,
.recommendbooks_block .newbooks div,
.recommendbooks_block .recommendbooks div,
.recommendbooks_block .recommendbooks2 div,
.recommendbooks_block2 .newbooks div,
.recommendbooks_block2 .recommendbooks div,
.recommendbooks_block2 .recommendbooks2 div {
  text-align: center;
  display: inline-block;
  margin-right: 30px;
}
.newbooks_block .newbooks div a,
.newbooks_block .recommendbooks div a,
.newbooks_block .recommendbooks2 div a,
.recommendbooks_block .newbooks div a,
.recommendbooks_block .recommendbooks div a,
.recommendbooks_block .recommendbooks2 div a,
.recommendbooks_block2 .newbooks div a,
.recommendbooks_block2 .recommendbooks div a,
.recommendbooks_block2 .recommendbooks2 div a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 156px;
  height: 237px;
  color: #000;
  text-align: center;
  vertical-align: bottom;
  margin: 0 auto;
  padding: 3px;
  box-sizing: border-box;
}
.newbooks_block .newbooks div a img,
.newbooks_block .recommendbooks div a img,
.newbooks_block .recommendbooks2 div a img,
.recommendbooks_block .newbooks div a img,
.recommendbooks_block .recommendbooks div a img,
.recommendbooks_block .recommendbooks2 div a img,
.recommendbooks_block2 .newbooks div a img,
.recommendbooks_block2 .recommendbooks div a img,
.recommendbooks_block2 .recommendbooks2 div a img {
  width: 148px;
  height: 200px;
  margin: 0 auto 10px;
  border: 1px solid #d3d3d3;
  display: block;
}
.newbooks_block .newbooks div a .image_titlepage,
.newbooks_block .newbooks div a .image_titlepage2,
.newbooks_block .recommendbooks div a .image_titlepage,
.newbooks_block .recommendbooks div a .image_titlepage2,
.newbooks_block .recommendbooks2 div a .image_titlepage,
.newbooks_block .recommendbooks2 div a .image_titlepage2,
.recommendbooks_block .newbooks div a .image_titlepage,
.recommendbooks_block .newbooks div a .image_titlepage2,
.recommendbooks_block .recommendbooks div a .image_titlepage,
.recommendbooks_block .recommendbooks div a .image_titlepage2,
.recommendbooks_block .recommendbooks2 div a .image_titlepage,
.recommendbooks_block .recommendbooks2 div a .image_titlepage2,
.recommendbooks_block2 .newbooks div a .image_titlepage,
.recommendbooks_block2 .newbooks div a .image_titlepage2,
.recommendbooks_block2 .recommendbooks div a .image_titlepage,
.recommendbooks_block2 .recommendbooks div a .image_titlepage2,
.recommendbooks_block2 .recommendbooks2 div a .image_titlepage,
.recommendbooks_block2 .recommendbooks2 div a .image_titlepage2 {
  margin: 0 auto 10px;
  width: 148px;
  height: 200px;
}
.newbooks_block .newbooks div a .image_titlepage:before,
.newbooks_block .newbooks div a .image_titlepage2:before,
.newbooks_block .recommendbooks div a .image_titlepage:before,
.newbooks_block .recommendbooks div a .image_titlepage2:before,
.newbooks_block .recommendbooks2 div a .image_titlepage:before,
.newbooks_block .recommendbooks2 div a .image_titlepage2:before,
.recommendbooks_block .newbooks div a .image_titlepage:before,
.recommendbooks_block .newbooks div a .image_titlepage2:before,
.recommendbooks_block .recommendbooks div a .image_titlepage:before,
.recommendbooks_block .recommendbooks div a .image_titlepage2:before,
.recommendbooks_block .recommendbooks2 div a .image_titlepage:before,
.recommendbooks_block .recommendbooks2 div a .image_titlepage2:before,
.recommendbooks_block2 .newbooks div a .image_titlepage:before,
.recommendbooks_block2 .newbooks div a .image_titlepage2:before,
.recommendbooks_block2 .recommendbooks div a .image_titlepage:before,
.recommendbooks_block2 .recommendbooks div a .image_titlepage2:before,
.recommendbooks_block2 .recommendbooks2 div a .image_titlepage:before,
.recommendbooks_block2 .recommendbooks2 div a .image_titlepage2:before {
  height: 100px;
}
.newbooks_block .newbooks div a .image_titlepage .booktitle,
.newbooks_block .newbooks div a .image_titlepage2 .booktitle,
.newbooks_block .recommendbooks div a .image_titlepage .booktitle,
.newbooks_block .recommendbooks div a .image_titlepage2 .booktitle,
.newbooks_block .recommendbooks2 div a .image_titlepage .booktitle,
.newbooks_block .recommendbooks2 div a .image_titlepage2 .booktitle,
.recommendbooks_block .newbooks div a .image_titlepage .booktitle,
.recommendbooks_block .newbooks div a .image_titlepage2 .booktitle,
.recommendbooks_block .recommendbooks div a .image_titlepage .booktitle,
.recommendbooks_block .recommendbooks div a .image_titlepage2 .booktitle,
.recommendbooks_block .recommendbooks2 div a .image_titlepage .booktitle,
.recommendbooks_block .recommendbooks2 div a .image_titlepage2 .booktitle,
.recommendbooks_block2 .newbooks div a .image_titlepage .booktitle,
.recommendbooks_block2 .newbooks div a .image_titlepage2 .booktitle,
.recommendbooks_block2 .recommendbooks div a .image_titlepage .booktitle,
.recommendbooks_block2 .recommendbooks div a .image_titlepage2 .booktitle,
.recommendbooks_block2 .recommendbooks2 div a .image_titlepage .booktitle,
.recommendbooks_block2 .recommendbooks2 div a .image_titlepage2 .booktitle {
  text-align: left !important;
  white-space: normal !important;
}
.newbooks_block .newbooks div a .image_titlepage .author,
.newbooks_block .newbooks div a .image_titlepage2 .author,
.newbooks_block .recommendbooks div a .image_titlepage .author,
.newbooks_block .recommendbooks div a .image_titlepage2 .author,
.newbooks_block .recommendbooks2 div a .image_titlepage .author,
.newbooks_block .recommendbooks2 div a .image_titlepage2 .author,
.recommendbooks_block .newbooks div a .image_titlepage .author,
.recommendbooks_block .newbooks div a .image_titlepage2 .author,
.recommendbooks_block .recommendbooks div a .image_titlepage .author,
.recommendbooks_block .recommendbooks div a .image_titlepage2 .author,
.recommendbooks_block .recommendbooks2 div a .image_titlepage .author,
.recommendbooks_block .recommendbooks2 div a .image_titlepage2 .author,
.recommendbooks_block2 .newbooks div a .image_titlepage .author,
.recommendbooks_block2 .newbooks div a .image_titlepage2 .author,
.recommendbooks_block2 .recommendbooks div a .image_titlepage .author,
.recommendbooks_block2 .recommendbooks div a .image_titlepage2 .author,
.recommendbooks_block2 .recommendbooks2 div a .image_titlepage .author,
.recommendbooks_block2 .recommendbooks2 div a .image_titlepage2 .author {
  text-align: left !important;
  white-space: normal !important;
  -webkit-line-clamp: 2 !important;
}
.newbooks_block .newbooks div a:hover,
.newbooks_block .recommendbooks div a:hover,
.newbooks_block .recommendbooks2 div a:hover,
.recommendbooks_block .newbooks div a:hover,
.recommendbooks_block .recommendbooks div a:hover,
.recommendbooks_block .recommendbooks2 div a:hover,
.recommendbooks_block2 .newbooks div a:hover,
.recommendbooks_block2 .recommendbooks div a:hover,
.recommendbooks_block2 .recommendbooks2 div a:hover {
  color: #dd1f03;
}
@media (min-width: 1200px) {
  .newbooks_block .newbooks .slick-next,
  .newbooks_block .recommendbooks .slick-next,
  .newbooks_block .recommendbooks2 .slick-next,
  .recommendbooks_block .newbooks .slick-next,
  .recommendbooks_block .recommendbooks .slick-next,
  .recommendbooks_block .recommendbooks2 .slick-next,
  .recommendbooks_block2 .newbooks .slick-next,
  .recommendbooks_block2 .recommendbooks .slick-next,
  .recommendbooks_block2 .recommendbooks2 .slick-next {
    right: -40px;
  }
  .newbooks_block .newbooks .slick-prev,
  .newbooks_block .recommendbooks .slick-prev,
  .newbooks_block .recommendbooks2 .slick-prev,
  .recommendbooks_block .newbooks .slick-prev,
  .recommendbooks_block .recommendbooks .slick-prev,
  .recommendbooks_block .recommendbooks2 .slick-prev,
  .recommendbooks_block2 .newbooks .slick-prev,
  .recommendbooks_block2 .recommendbooks .slick-prev,
  .recommendbooks_block2 .recommendbooks2 .slick-prev {
    left: -30px;
  }
}
@media screen and (max-width: 1399px) {
  .newbooks_block .newbooks .slick-next,
  .newbooks_block .recommendbooks .slick-next,
  .newbooks_block .recommendbooks2 .slick-next,
  .recommendbooks_block .newbooks .slick-next,
  .recommendbooks_block .recommendbooks .slick-next,
  .recommendbooks_block .recommendbooks2 .slick-next,
  .recommendbooks_block2 .newbooks .slick-next,
  .recommendbooks_block2 .recommendbooks .slick-next,
  .recommendbooks_block2 .recommendbooks2 .slick-next {
    right: -45px;
  }
  .newbooks_block .newbooks .slick-prev,
  .newbooks_block .recommendbooks .slick-prev,
  .newbooks_block .recommendbooks2 .slick-prev,
  .recommendbooks_block .newbooks .slick-prev,
  .recommendbooks_block .recommendbooks .slick-prev,
  .recommendbooks_block .recommendbooks2 .slick-prev,
  .recommendbooks_block2 .newbooks .slick-prev,
  .recommendbooks_block2 .recommendbooks .slick-prev,
  .recommendbooks_block2 .recommendbooks2 .slick-prev {
    left: -45px;
  }
}
@media screen and (max-width: 767px) {
  .newbooks_block .newbooks .slick-next,
  .newbooks_block .recommendbooks .slick-next,
  .newbooks_block .recommendbooks2 .slick-next,
  .recommendbooks_block .newbooks .slick-next,
  .recommendbooks_block .recommendbooks .slick-next,
  .recommendbooks_block .recommendbooks2 .slick-next,
  .recommendbooks_block2 .newbooks .slick-next,
  .recommendbooks_block2 .recommendbooks .slick-next,
  .recommendbooks_block2 .recommendbooks2 .slick-next {
    right: -25px;
  }
  .newbooks_block .newbooks .slick-prev,
  .newbooks_block .recommendbooks .slick-prev,
  .newbooks_block .recommendbooks2 .slick-prev,
  .recommendbooks_block .newbooks .slick-prev,
  .recommendbooks_block .recommendbooks .slick-prev,
  .recommendbooks_block .recommendbooks2 .slick-prev,
  .recommendbooks_block2 .newbooks .slick-prev,
  .recommendbooks_block2 .recommendbooks .slick-prev,
  .recommendbooks_block2 .recommendbooks2 .slick-prev {
    left: -25px;
  }
}
@media (max-width: 430px) {
  .newbooks_block .newbooks .slick-next,
  .newbooks_block .recommendbooks .slick-next,
  .newbooks_block .recommendbooks2 .slick-next,
  .recommendbooks_block .newbooks .slick-next,
  .recommendbooks_block .recommendbooks .slick-next,
  .recommendbooks_block .recommendbooks2 .slick-next,
  .recommendbooks_block2 .newbooks .slick-next,
  .recommendbooks_block2 .recommendbooks .slick-next,
  .recommendbooks_block2 .recommendbooks2 .slick-next {
    right: -20px;
  }
  .newbooks_block .newbooks .slick-prev,
  .newbooks_block .recommendbooks .slick-prev,
  .newbooks_block .recommendbooks2 .slick-prev,
  .recommendbooks_block .newbooks .slick-prev,
  .recommendbooks_block .recommendbooks .slick-prev,
  .recommendbooks_block .recommendbooks2 .slick-prev,
  .recommendbooks_block2 .newbooks .slick-prev,
  .recommendbooks_block2 .recommendbooks .slick-prev,
  .recommendbooks_block2 .recommendbooks2 .slick-prev {
    left: -20px;
  }
}
.newbooks_block .newbooks.slick-initialized,
.newbooks_block .recommendbooks.slick-initialized,
.newbooks_block .recommendbooks2.slick-initialized,
.recommendbooks_block .newbooks.slick-initialized,
.recommendbooks_block .recommendbooks.slick-initialized,
.recommendbooks_block .recommendbooks2.slick-initialized,
.recommendbooks_block2 .newbooks.slick-initialized,
.recommendbooks_block2 .recommendbooks.slick-initialized,
.recommendbooks_block2 .recommendbooks2.slick-initialized {
  height: auto;
  overflow: visible;
}
.newbooks_block .newbooks.slick-initialized div,
.newbooks_block .recommendbooks.slick-initialized div,
.newbooks_block .recommendbooks2.slick-initialized div,
.recommendbooks_block .newbooks.slick-initialized div,
.recommendbooks_block .recommendbooks.slick-initialized div,
.recommendbooks_block .recommendbooks2.slick-initialized div,
.recommendbooks_block2 .newbooks.slick-initialized div,
.recommendbooks_block2 .recommendbooks.slick-initialized div,
.recommendbooks_block2 .recommendbooks2.slick-initialized div {
  margin: 0;
  display: inherit;
}
.newbooks_block .slick-initialized > div,
.recommendbooks_block .slick-initialized > div,
.recommendbooks_block2 .slick-initialized > div {
  display: block;
  margin-right: 0px;
}
.newbooks_block .more,
.recommendbooks_block .more,
.recommendbooks_block2 .more {
  text-align: center;
  width: 98%;
  margin: 20px auto;
  clear: both;
  float: none;
}
.newbooks_block .more a,
.recommendbooks_block .more a,
.recommendbooks_block2 .more a {
  padding: 10px 35px !important;
}
@media (max-width: 620px) {
  .newbooks_block .more,
  .recommendbooks_block .more,
  .recommendbooks_block2 .more {
    text-align: center;
    width: 100%;
  }
}

.recommendbooks_block {
  border-bottom: 1px solid #ccc;
}

.recommendbooks_block2 {
  padding: 20px 20px 10px !important;
}

.themebook_block {
  background-color: #fed857;
  position: relative;
  padding: 75px 0 20px;
  z-index: 999;
}
@media screen and (max-width: 767px) {
  .themebook_block {
    padding: 55px 0 20px;
  }
}
.themebook_block h2 {
  color: #000;
  font-size: 1.875em;
  text-align: left;
  font-weight: 700;
  width: 90%;
  margin: 0 auto 20px;
}
@media screen and (max-width: 767px) {
  .themebook_block h2 {
    text-align: center;
  }
}
.themebook_block .tabs > .tabItem.active > a:before {
  content: "";
  border: 15px solid #dd1f03;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  position: absolute;
  bottom: -30px;
  display: block;
  left: 40%;
}
@media (max-width: 767px) {
  .themebook_block .tabs > .tabItem.active > a:before {
    left: 48%;
  }
}
.themebook_block .themebook {
  width: 100%;
  margin: 0 auto 50px;
}
@media (max-width: 620px) {
  .themebook_block .themebook {
    margin: 0 auto 30px;
  }
}
.themebook_block .themebook div {
  text-align: center;
}
.themebook_block .themebook div a {
  display: block;
  width: 150px;
  color: #000;
  margin: 0 auto;
  text-align: center;
}
.themebook_block .themebook div a img {
  width: 150px;
  height: 200px;
  margin: 0 auto 10px;
  border: 1px solid #d3d3d3;
}
.themebook_block .themebook div a:hover {
  color: #dd1f03;
}
.themebook_block .themebook div a div {
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
  line-height: 25px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
}
.themebook_block .themebook .slick-next {
  right: -45px;
  background: url("../vendor/slick/icon_arrow_right.png") center center no-repeat;
}
.themebook_block .themebook .slick-prev {
  left: -45px;
  background: url("../vendor/slick/icon_arrow_left.png") center center no-repeat;
}
@media screen and (max-width: 767px) {
  .themebook_block .themebook .slick-next {
    right: -5px;
  }
  .themebook_block .themebook .slick-prev {
    left: -5px;
  }
}
.themebook_block .themebook .slick-dots {
  bottom: -40px;
}
@media (max-width: 480px) {
  .themebook_block .themebook .slick-dots {
    bottom: -60px;
  }
}
.themebook_block .more {
  text-align: right;
  width: 98%;
  margin: 0 auto;
}
.themebook_block .more a {
  background-color: #59493f;
}
@media (max-width: 620px) {
  .themebook_block .more {
    text-align: center;
    width: 100%;
  }
}

.featured_block {
  background-color: #fed857;
  position: relative;
  padding: 0;
  text-align: left;
}
.featured_block .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 75px 30px;
  box-sizing: border-box;
  position: relative;
}
@media screen and (max-width: 767px) {
  .featured_block .container {
    padding: 55px 30px 20px;
  }
}
@media (max-width: 380px) {
  .featured_block .container {
    padding: 55px 15px 20px;
  }
}
.featured_block h2 {
  color: #000;
  font-size: 1.875em;
  text-align: center;
  font-weight: 700;
  width: 100%;
  margin: 0 auto 40px;
  clear: both;
}
@media screen and (max-width: 767px) {
  .featured_block h2 {
    text-align: center;
  }
}
.featured_block .featured_data_list {
  display: block;
}
.featured_block .featured_data {
  width: 23%;
  float: left;
  margin-right: 1%;
  margin-left: 1%;
  margin-bottom: 25px;
  max-height: 520px;
  background-color: #fff;
  display: block;
}
.featured_block .featured_data:nth-of-type(4) {
  margin-right: 0;
}
@media (max-width: 1000px) {
  .featured_block .featured_data {
    width: 260px;
    margin-right: 10px;
  }
  .featured_block .featured_data:nth-of-type(4) {
    display: none;
  }
}
@media (max-width: 900px) {
  .featured_block .featured_data:nth-of-type(3) {
    display: none;
  }
}
@media (max-width: 640px) {
  .featured_block .featured_data {
    float: none;
    margin: 0 auto 25px;
  }
  .featured_block .featured_data:nth-of-type(2) {
    display: none;
  }
}
.featured_block .featured_data a {
  display: block;
  position: relative;
  padding: 0;
  background-color: #fff;
  box-sizing: border-box;
  color: #333;
}
.featured_block .featured_data a:hover {
  color: #333;
}
.featured_block .featured_data a:hover .description {
  display: block;
  width: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.featured_block .featured_data a .datablock_top {
  position: relative;
  padding: 15px 15px 0 15px;
}
.featured_block .featured_data a .datablock_top .number {
  background-color: #606060;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  padding: 0.5em 0.4em;
  display: block;
  position: absolute;
  top: -0.5em;
  left: 15px;
  z-index: 9;
  font-size: 1.375em;
  font-weight: bold;
  letter-spacing: 0.07em;
}
.featured_block .featured_data a .datablock_top .number ~ .description p {
  padding-top: 30px;
  -webkit-line-clamp: 5;
}
@media (max-width: 1700px) {
  .featured_block .featured_data a .datablock_top .number ~ .description p {
    -webkit-line-clamp: 5;
  }
}
@media (max-width: 1500px) {
  .featured_block .featured_data a .datablock_top .number ~ .description p {
    -webkit-line-clamp: 5;
  }
}
@media (max-width: 1300px) {
  .featured_block .featured_data a .datablock_top .number ~ .description p {
    -webkit-line-clamp: 4;
  }
}
@media (max-width: 1100px) {
  .featured_block .featured_data a .datablock_top .number ~ .description p {
    -webkit-line-clamp: 3;
  }
}
@media (max-width: 1000px) {
  .featured_block .featured_data a .datablock_top .number ~ .description p {
    -webkit-line-clamp: 4;
  }
}
.featured_block .featured_data a .datablock_down {
  position: relative;
  padding: 0px 15px 20px 15px;
  overflow: hidden;
}
.featured_block .featured_data a .images {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #dedede;
  background-color: #fff;
}
.featured_block .featured_data a .images:before {
  display: block;
  content: "";
  padding-top: 75%;
}
.featured_block .featured_data a .images img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.featured_block .featured_data a .images img {
  width: 100%;
}
.featured_block .featured_data a .description {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: 0.5s ease-out;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.featured_block .featured_data a .description p {
  margin: 10px 15px;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  text-align: left;
}
@media (max-width: 1700px) {
  .featured_block .featured_data a .description p {
    -webkit-line-clamp: 6;
  }
}
@media (max-width: 1400px) {
  .featured_block .featured_data a .description p {
    -webkit-line-clamp: 5;
  }
}
@media (max-width: 1200px) {
  .featured_block .featured_data a .description p {
    -webkit-line-clamp: 4;
  }
}
@media (max-width: 1000px) {
  .featured_block .featured_data a .description p {
    -webkit-line-clamp: 5;
  }
}
.featured_block .featured_data h3 {
  color: #005d98;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
  line-height: 25px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
}
.featured_block .featured_data .datalist {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}
.featured_block .featured_data .datalist li {
  text-align: left;
  margin-bottom: 5px;
  font-family: Lucida Console;
  font-size: 0.938em;
}
.featured_block .featured_data .datalist li span {
  display: inline-block;
}
.featured_block .featured_data .personal_photos {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
.featured_block .featured_data .personal_photos li {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border-radius: 50%;
  text-align: center;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.5em;
  color: #333;
}
.featured_block .featured_data .personal_photos li.redbg {
  background-color: #f3b8bc;
}
.featured_block .featured_data .personal_photos li.orangebg {
  background-color: #f6ce8a;
}
.featured_block .featured_data .personal_photos li.yellowbg {
  background-color: #fef75f;
}
.featured_block .featured_data .personal_photos li.greenbg {
  background-color: #cbe398;
}
.featured_block .featured_data .personal_photos li.bluebg {
  background-color: #99d5f5;
}
.featured_block .featured_data .personal_photos li.darkbluebg {
  background-color: #87b7f6;
}
.featured_block .featured_data .personal_photos li.purplebg {
  background-color: #dab5d7;
}
.featured_block .featured_data .personal_photos li img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.featured_block .featured_data .personal_photos li.more:after {
  content: "99+";
  position: absolute;
  width: 27px;
  height: 27px;
  background-color: #fff;
  color: #333;
  bottom: -5px;
  font-size: 0.688em;
  right: -20px;
  border-radius: 50%;
  text-align: center;
  line-height: 27px;
}
.featured_block .featured_data .btn_grp {
  padding: 0.5em 0 1em;
  float: right;
  clear: none;
  margin-top: 8px;
}
.featured_block .featured_data .btn_grp .btn {
  min-width: 4em;
  padding: 0.5em 0 !important;
  border: 1px solid #959595;
  color: #333;
}
.featured_block .featured_data .btn_grp .btn:hover {
  background: #f77810;
  border: 1px solid #cd6007;
  color: #fff;
}
.featured_block .featured_data .btn_grp .btnstyle {
  padding: 0.5em 10px !important;
}
.featured_block .more {
  text-align: center;
  width: 98%;
  margin: 20px auto;
  clear: both;
  float: none;
}
.featured_block .more a {
  padding: 10px 35px !important;
}
.featured_block .themebook2 {
  float: left;
  width: 73%;
  padding: 30px 0;
}
@media screen and (max-width: 1399px) {
  .featured_block .themebook2 {
    width: 70%;
  }
}
@media screen and (max-width: 991px) {
  .featured_block .themebook2 {
    width: 60%;
  }
}
@media screen and (max-width: 767px) {
  .featured_block .themebook2 {
    width: 250px;
  }
}
@media (max-width: 640px) {
  .featured_block .themebook2 {
    display: none;
  }
}
.featured_block .themebook2 ul {
  list-style: none;
}
.featured_block .themebook2 ul li {
  float: left;
  width: 22%;
  margin-right: 3%;
  font-size: 1.25em;
}
@media screen and (max-width: 1399px) {
  .featured_block .themebook2 ul li {
    margin-right: 10px;
    width: 31%;
  }
}
@media screen and (max-width: 991px) {
  .featured_block .themebook2 ul li {
    width: 45%;
  }
}
.featured_block .themebook2 ul li a {
  color: #000;
  display: block;
}
.featured_block .themebook2 ul li a:hover {
  text-decoration: underline;
}
.featured_block .themebook2 ul li a:focus {
  box-shadow: 0 0px 0px 3px #fff;
}
.featured_block .themebook2 ul li .image {
  height: 268px;
  background-color: #fff;
  position: relative;
  margin-bottom: 15px;
}
@media screen and (max-width: 1399px) {
  .featured_block .themebook2 ul li .image {
    width: 170px;
    height: 220px;
  }
}
.featured_block .themebook2 ul li .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}
.featured_block .themebook2 ul li .image_titlepage,
.featured_block .themebook2 ul li .image_titlepage2 {
  margin: 0 auto 15px;
  height: 268px;
  box-shadow: none;
}
@media (max-width: 1400px) {
  .featured_block .themebook2 ul li .image_titlepage,
  .featured_block .themebook2 ul li .image_titlepage2 {
    height: 370px;
  }
}
@media screen and (max-width: 1399px) {
  .featured_block .themebook2 ul li .image_titlepage,
  .featured_block .themebook2 ul li .image_titlepage2 {
    width: 170px;
    height: 220px;
    margin: 0 0 15px;
  }
}
.featured_block .themebook2 ul li .image_titlepage:before,
.featured_block .themebook2 ul li .image_titlepage2:before {
  height: 120px;
}
.featured_block .themebook2 ul li span {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
}
@media screen and (max-width: 1399px) {
  .featured_block .themebook2 ul li span {
    width: 170px;
  }
}
@media screen and (max-width: 1399px) {
  .featured_block .themebook2 ul li:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .featured_block .themebook2 ul li:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .featured_block .themebook2 ul li:nth-child(2) {
    display: none;
  }
}

.hotrankings_block {
  position: relative;
  padding: 75px 0;
  text-align: left;
}
.hotrankings_block .container {
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  min-height: 1px;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}
@media (max-width: 380px) {
  .hotrankings_block .container {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 767px) {
  .hotrankings_block {
    padding: 55px 0 20px;
  }
}
.hotrankings_block h2 {
  color: #000;
  font-size: 1.875em;
  text-align: center;
  font-weight: 700;
  width: 100%;
  margin: 0 auto 40px;
  clear: both;
}
@media screen and (max-width: 767px) {
  .hotrankings_block h2 {
    text-align: center;
  }
}
.hotrankings_block .more {
  text-align: center;
  width: 98%;
  margin: 20px auto;
  clear: both;
  float: none;
}
.hotrankings_block .more a {
  padding: 10px 35px !important;
}

.hotrankings {
  margin: 30px auto 20px;
  box-sizing: border-box;
  width: 100%;
}
@media screen and (max-width: 991px) {
  .hotrankings {
    width: 95%;
  }
}
@media (max-width: 480px) {
  .hotrankings {
    width: 75%;
  }
}
.hotrankings .sort {
  padding: 0 5px;
}
.hotrankings .sort a {
  display: block;
  padding: 20px;
  background: #dcdcdc;
  background: linear-gradient(to bottom, #dcdcdc, #e5e5e5);
  color: #333;
  font-size: 1.25em;
  text-align: center;
  border-radius: 5px;
  position: relative;
  transition: 0.2s;
}
.hotrankings .sort a:hover {
  background-image: none;
  background-color: #f1ad00;
  color: #333;
}
.hotrankings .sort a:hover:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 !important;
}
.hotrankings .sort a.here {
  background: #f1ad00;
  color: #333;
}
.hotrankings .sort a.here:hover, .hotrankings .sort a.here:focus {
  background: #ffc93f;
}
.hotrankings .slick-next {
  right: -45px;
  top: 0;
}
.hotrankings .slick-prev {
  left: -45px;
  top: 0;
}

.hotbook_column {
  margin: 0 5px 20px;
  overflow: hidden;
  padding: 0px;
  position: relative;
  clear: both;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .hotbook_column {
    margin: 0 0px 20px;
  }
}
.hotbook_column .hotbook_block01 {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 5;
  padding-right: 5;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .hotbook_column .hotbook_block01 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .hotbook_column .hotbook_block01 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1400px) {
  .hotbook_column .hotbook_block01 {
    float: left;
    width: 33.3333333333%;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block01 {
    display: none;
  }
}
.hotbook_column .hotbook_block01 .hotbook_title {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  background-color: #fff;
}
@media (min-width: 768px) {
  .hotbook_column .hotbook_block01 .hotbook_title {
    float: left;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .hotbook_column .hotbook_block01 .hotbook_title {
    float: left;
    width: 50%;
  }
}
@media (min-width: 1400px) {
  .hotbook_column .hotbook_block01 .hotbook_title {
    float: left;
    width: 50%;
  }
}
.hotbook_column .hotbook_block01 .bookno01 {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  background-color: #fff;
}
@media (min-width: 768px) {
  .hotbook_column .hotbook_block01 .bookno01 {
    float: left;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .hotbook_column .hotbook_block01 .bookno01 {
    float: left;
    width: 50%;
  }
}
@media (min-width: 1400px) {
  .hotbook_column .hotbook_block01 .bookno01 {
    float: left;
    width: 50%;
  }
}
.hotbook_column .hotbook_block01 .bookno01 a {
  display: block;
}
.hotbook_column .hotbook_block02 {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .hotbook_column .hotbook_block02 {
    float: left;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .hotbook_column .hotbook_block02 {
    float: left;
    width: 50%;
  }
}
@media (min-width: 1400px) {
  .hotbook_column .hotbook_block02 {
    float: left;
    width: 33.3333333333%;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block02 {
    display: none;
  }
}
.hotbook_column .hotbook_block03 {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .hotbook_column .hotbook_block03 {
    float: left;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .hotbook_column .hotbook_block03 {
    float: left;
    width: 50%;
  }
}
@media (min-width: 1400px) {
  .hotbook_column .hotbook_block03 {
    float: left;
    width: 33.3333333333%;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block03 {
    display: none;
  }
}
.hotbook_column .hotbook_block04 {
  float: left;
  width: 33.3333333333%;
  position: relative;
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  display: none;
}
@media (min-width: 768px) {
  .hotbook_column .hotbook_block04 {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 992px) {
  .hotbook_column .hotbook_block04 {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 1400px) {
  .hotbook_column .hotbook_block04 {
    float: left;
    width: 33.3333333333%;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block04 {
    display: block;
    left: 32.5%;
  }
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block04 {
    width: 100%;
    left: 0%;
  }
}
.hotbook_column .hotbook_block05 {
  float: left;
  width: 33.3333333333%;
  position: relative;
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  display: none;
}
@media (min-width: 768px) {
  .hotbook_column .hotbook_block05 {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 992px) {
  .hotbook_column .hotbook_block05 {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 1400px) {
  .hotbook_column .hotbook_block05 {
    float: left;
    width: 33.3333333333%;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block05 {
    display: block;
    left: -35%;
  }
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block05 {
    width: 100%;
    position: relative;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    left: 0%;
  }
}
.hotbook_column .hotbook_block06 {
  float: left;
  width: 33.3333333333%;
  position: relative;
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  display: none;
}
@media (min-width: 768px) {
  .hotbook_column .hotbook_block06 {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 992px) {
  .hotbook_column .hotbook_block06 {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 1400px) {
  .hotbook_column .hotbook_block06 {
    float: left;
    width: 33.3333333333%;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block06 {
    display: block;
  }
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block06 {
    width: 100%;
  }
}
.hotbook_column h3 {
  font-size: 1.125em;
  font-weight: normal;
  margin: 10px 0;
  padding: 0;
}
.hotbook_column h3 a {
  display: block;
  color: #81511b;
  text-decoration: underline;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hotbook_column h3 a:hover, .hotbook_column h3 a:focus {
  color: #dd1f03;
}
.hotbook_column .score_star {
  position: relative;
  text-align: left;
  width: 100px;
  height: 29px;
  z-index: 0;
  margin: 10px 0 0;
  display: inline-block;
  float: left;
  margin-top: 5px;
}
.hotbook_column .score_star > img {
  position: absolute;
  z-index: 5;
  width: 100px;
  height: 29px;
}
.hotbook_column .score_star .score_color {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100px;
  height: 29px;
  overflow: hidden;
}
.hotbook_column .clickblock {
  width: 150px;
  overflow: hidden;
  margin: 0 auto 10px;
  text-align: left;
}
.hotbook_column .clickblock .ranking {
  background-color: #59493f;
  color: #fff;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: inline-block;
  line-height: 35px;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
  letter-spacing: 0.1em;
  float: left;
  margin-right: 5px;
}
@media screen and (max-width: 767px) {
  .hotbook_column .clickblock .ranking {
    display: block;
  }
}
.hotbook_column .clickblock .clicktimes {
  display: inline-block;
  font-size: 1.25em;
  margin-top: 8px;
}
.hotbook_column .hotbook_block01 .hotbook_title,
.hotbook_column .hotbook_block04 .hotbook_title,
.hotbook_column .hotbook_block05 .hotbook_title,
.hotbook_column .hotbook_block06 .hotbook_title {
  text-align: center;
  position: relative;
  height: 350px;
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  width: 47%;
  margin-right: 3%;
  box-sizing: border-box;
}
@media screen and (max-width: 1399px) {
  .hotbook_column .hotbook_block01 .hotbook_title,
  .hotbook_column .hotbook_block04 .hotbook_title,
  .hotbook_column .hotbook_block05 .hotbook_title,
  .hotbook_column .hotbook_block06 .hotbook_title {
    width: 48.8%;
    margin-right: 1.2%;
  }
}
.hotbook_column .hotbook_block01 .hotbook_title h2,
.hotbook_column .hotbook_block04 .hotbook_title h2,
.hotbook_column .hotbook_block05 .hotbook_title h2,
.hotbook_column .hotbook_block06 .hotbook_title h2 {
  font-size: 1.5em;
  color: #000;
  margin: 20px 0 40px;
  padding: 0;
  text-align: center;
}
.hotbook_column .hotbook_block01 .hotbook_title .image,
.hotbook_column .hotbook_block04 .hotbook_title .image,
.hotbook_column .hotbook_block05 .hotbook_title .image,
.hotbook_column .hotbook_block06 .hotbook_title .image {
  width: 130px;
  height: 130px;
  padding: 0;
  margin: 0 auto 50px;
  position: relative;
  border-radius: 50%;
}
.hotbook_column .hotbook_block01 .hotbook_title .image img,
.hotbook_column .hotbook_block04 .hotbook_title .image img,
.hotbook_column .hotbook_block05 .hotbook_title .image img,
.hotbook_column .hotbook_block06 .hotbook_title .image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  width: 100px;
}
@media (max-width: 1450px) {
  .hotbook_column .hotbook_block01 .hotbook_title .image,
  .hotbook_column .hotbook_block04 .hotbook_title .image,
  .hotbook_column .hotbook_block05 .hotbook_title .image,
  .hotbook_column .hotbook_block06 .hotbook_title .image {
    width: 120px;
    height: 120px;
  }
  .hotbook_column .hotbook_block01 .hotbook_title .image img,
  .hotbook_column .hotbook_block04 .hotbook_title .image img,
  .hotbook_column .hotbook_block05 .hotbook_title .image img,
  .hotbook_column .hotbook_block06 .hotbook_title .image img {
    width: 90px;
  }
}
@media screen and (max-width: 1399px) {
  .hotbook_column .hotbook_block01 .hotbook_title .image,
  .hotbook_column .hotbook_block04 .hotbook_title .image,
  .hotbook_column .hotbook_block05 .hotbook_title .image,
  .hotbook_column .hotbook_block06 .hotbook_title .image {
    width: 140px;
    height: 140px;
  }
  .hotbook_column .hotbook_block01 .hotbook_title .image img,
  .hotbook_column .hotbook_block04 .hotbook_title .image img,
  .hotbook_column .hotbook_block05 .hotbook_title .image img,
  .hotbook_column .hotbook_block06 .hotbook_title .image img {
    width: 100px;
  }
}
.hotbook_column .hotbook_block01 .hotbook_title .RSS_button,
.hotbook_column .hotbook_block04 .hotbook_title .RSS_button,
.hotbook_column .hotbook_block05 .hotbook_title .RSS_button,
.hotbook_column .hotbook_block06 .hotbook_title .RSS_button {
  position: relative;
  bottom: 20px;
}
.hotbook_column .hotbook_block01 .bookno01,
.hotbook_column .hotbook_block04 .bookno01,
.hotbook_column .hotbook_block05 .bookno01,
.hotbook_column .hotbook_block06 .bookno01 {
  width: 47%;
  margin-right: 3%;
  height: 350px;
  text-align: center;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
}
@media screen and (max-width: 1399px) {
  .hotbook_column .hotbook_block01 .bookno01,
  .hotbook_column .hotbook_block04 .bookno01,
  .hotbook_column .hotbook_block05 .bookno01,
  .hotbook_column .hotbook_block06 .bookno01 {
    width: 50%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.hotbook_column .hotbook_block01 .bookno01 .image,
.hotbook_column .hotbook_block04 .bookno01 .image,
.hotbook_column .hotbook_block05 .bookno01 .image,
.hotbook_column .hotbook_block06 .bookno01 .image {
  width: 140px;
  margin: 0 auto;
  position: relative;
}
.hotbook_column .hotbook_block01 .bookno01 .image > img,
.hotbook_column .hotbook_block04 .bookno01 .image > img,
.hotbook_column .hotbook_block05 .bookno01 .image > img,
.hotbook_column .hotbook_block06 .bookno01 .image > img {
  width: 100%;
  max-height: 200px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.hotbook_column .hotbook_block01 .bookno01 .image_titlepage,
.hotbook_column .hotbook_block01 .bookno01 .image_titlepage2,
.hotbook_column .hotbook_block04 .bookno01 .image_titlepage,
.hotbook_column .hotbook_block04 .bookno01 .image_titlepage2,
.hotbook_column .hotbook_block05 .bookno01 .image_titlepage,
.hotbook_column .hotbook_block05 .bookno01 .image_titlepage2,
.hotbook_column .hotbook_block06 .bookno01 .image_titlepage,
.hotbook_column .hotbook_block06 .bookno01 .image_titlepage2 {
  margin: 0 auto;
  width: 140px;
  height: 200px;
}
.hotbook_column .hotbook_block01 .bookno01 .image_titlepage:before,
.hotbook_column .hotbook_block01 .bookno01 .image_titlepage2:before,
.hotbook_column .hotbook_block04 .bookno01 .image_titlepage:before,
.hotbook_column .hotbook_block04 .bookno01 .image_titlepage2:before,
.hotbook_column .hotbook_block05 .bookno01 .image_titlepage:before,
.hotbook_column .hotbook_block05 .bookno01 .image_titlepage2:before,
.hotbook_column .hotbook_block06 .bookno01 .image_titlepage:before,
.hotbook_column .hotbook_block06 .bookno01 .image_titlepage2:before {
  height: 90px;
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block01 .bookno01,
  .hotbook_column .hotbook_block01 .bookno02,
  .hotbook_column .hotbook_block01 .bookno03,
  .hotbook_column .hotbook_block04 .bookno01,
  .hotbook_column .hotbook_block04 .bookno02,
  .hotbook_column .hotbook_block04 .bookno03,
  .hotbook_column .hotbook_block05 .bookno01,
  .hotbook_column .hotbook_block05 .bookno02,
  .hotbook_column .hotbook_block05 .bookno03,
  .hotbook_column .hotbook_block06 .bookno01,
  .hotbook_column .hotbook_block06 .bookno02,
  .hotbook_column .hotbook_block06 .bookno03 {
    width: 100%;
    float: none;
    height: 380px;
    text-align: center;
    padding: 15px;
    margin-right: 0%;
    border-radius: 5px;
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
  }
  .hotbook_column .hotbook_block01 .bookno01 .image,
  .hotbook_column .hotbook_block01 .bookno02 .image,
  .hotbook_column .hotbook_block01 .bookno03 .image,
  .hotbook_column .hotbook_block04 .bookno01 .image,
  .hotbook_column .hotbook_block04 .bookno02 .image,
  .hotbook_column .hotbook_block04 .bookno03 .image,
  .hotbook_column .hotbook_block05 .bookno01 .image,
  .hotbook_column .hotbook_block05 .bookno02 .image,
  .hotbook_column .hotbook_block05 .bookno03 .image,
  .hotbook_column .hotbook_block06 .bookno01 .image,
  .hotbook_column .hotbook_block06 .bookno02 .image,
  .hotbook_column .hotbook_block06 .bookno03 .image {
    width: 80%;
    height: 250px;
    vertical-align: bottom;
    margin: 0 auto;
    position: relative;
  }
  .hotbook_column .hotbook_block01 .bookno01 .image > img,
  .hotbook_column .hotbook_block01 .bookno02 .image > img,
  .hotbook_column .hotbook_block01 .bookno03 .image > img,
  .hotbook_column .hotbook_block04 .bookno01 .image > img,
  .hotbook_column .hotbook_block04 .bookno02 .image > img,
  .hotbook_column .hotbook_block04 .bookno03 .image > img,
  .hotbook_column .hotbook_block05 .bookno01 .image > img,
  .hotbook_column .hotbook_block05 .bookno02 .image > img,
  .hotbook_column .hotbook_block05 .bookno03 .image > img,
  .hotbook_column .hotbook_block06 .bookno01 .image > img,
  .hotbook_column .hotbook_block06 .bookno02 .image > img,
  .hotbook_column .hotbook_block06 .bookno03 .image > img {
    width: 100%;
    max-height: 250px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  }
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block04 .bookno01 {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block04 .bookno01 .image {
    width: 95% !important;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block04 .bookno01 .image_titlepage,
  .hotbook_column .hotbook_block04 .bookno01 .image_titlepage2 {
    width: 95% !important;
    height: 240px !important;
    margin: 20px auto 0;
  }
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block05 .bookno02 {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block05 .bookno02 .image {
    width: 85% !important;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block05 .bookno02 .image_titlepage,
  .hotbook_column .hotbook_block05 .bookno02 .image_titlepage2 {
    width: 85% !important;
    height: 210px !important;
    margin: 50px auto 0;
  }
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block06 .bookno03 {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block06 .bookno03 .image {
    width: 75% !important;
  }
}
@media screen and (max-width: 767px) {
  .hotbook_column .hotbook_block06 .bookno03 .image_titlepage,
  .hotbook_column .hotbook_block06 .bookno03 .image_titlepage2 {
    width: 75% !important;
    height: 160px !important;
    margin: 100px auto 0;
  }
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block04 .bookno01,
  .hotbook_column .hotbook_block04 .bookno02,
  .hotbook_column .hotbook_block04 .bookno03,
  .hotbook_column .hotbook_block05 .bookno01,
  .hotbook_column .hotbook_block05 .bookno02,
  .hotbook_column .hotbook_block05 .bookno03,
  .hotbook_column .hotbook_block06 .bookno01,
  .hotbook_column .hotbook_block06 .bookno02,
  .hotbook_column .hotbook_block06 .bookno03 {
    height: auto;
    position: relative;
    overflow: hidden;
    text-align: left;
  }
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block04 .bookno01 .clickblock,
  .hotbook_column .hotbook_block04 .bookno02 .clickblock,
  .hotbook_column .hotbook_block04 .bookno03 .clickblock,
  .hotbook_column .hotbook_block05 .bookno01 .clickblock,
  .hotbook_column .hotbook_block05 .bookno02 .clickblock,
  .hotbook_column .hotbook_block05 .bookno03 .clickblock,
  .hotbook_column .hotbook_block06 .bookno01 .clickblock,
  .hotbook_column .hotbook_block06 .bookno02 .clickblock,
  .hotbook_column .hotbook_block06 .bookno03 .clickblock {
    margin-left: 30%;
  }
}
@media (max-width: 480px) {
  .hotbook_column .hotbook_block04 .bookno01 .clickblock,
  .hotbook_column .hotbook_block04 .bookno02 .clickblock,
  .hotbook_column .hotbook_block04 .bookno03 .clickblock,
  .hotbook_column .hotbook_block05 .bookno01 .clickblock,
  .hotbook_column .hotbook_block05 .bookno02 .clickblock,
  .hotbook_column .hotbook_block05 .bookno03 .clickblock,
  .hotbook_column .hotbook_block06 .bookno01 .clickblock,
  .hotbook_column .hotbook_block06 .bookno02 .clickblock,
  .hotbook_column .hotbook_block06 .bookno03 .clickblock {
    margin-left: 35%;
  }
}
@media (max-width: 380px) {
  .hotbook_column .hotbook_block04 .bookno01 .clickblock,
  .hotbook_column .hotbook_block04 .bookno02 .clickblock,
  .hotbook_column .hotbook_block04 .bookno03 .clickblock,
  .hotbook_column .hotbook_block05 .bookno01 .clickblock,
  .hotbook_column .hotbook_block05 .bookno02 .clickblock,
  .hotbook_column .hotbook_block05 .bookno03 .clickblock,
  .hotbook_column .hotbook_block06 .bookno01 .clickblock,
  .hotbook_column .hotbook_block06 .bookno02 .clickblock,
  .hotbook_column .hotbook_block06 .bookno03 .clickblock {
    margin-left: 40%;
  }
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block04 .bookno01 .image,
  .hotbook_column .hotbook_block04 .bookno02 .image,
  .hotbook_column .hotbook_block04 .bookno03 .image,
  .hotbook_column .hotbook_block05 .bookno01 .image,
  .hotbook_column .hotbook_block05 .bookno02 .image,
  .hotbook_column .hotbook_block05 .bookno03 .image,
  .hotbook_column .hotbook_block06 .bookno01 .image,
  .hotbook_column .hotbook_block06 .bookno02 .image,
  .hotbook_column .hotbook_block06 .bookno03 .image {
    width: 80px !important;
    height: 80px;
    float: left;
    margin-top: -20px;
  }
}
.hotbook_column .hotbook_block04 .bookno01 .image > img,
.hotbook_column .hotbook_block04 .bookno02 .image > img,
.hotbook_column .hotbook_block04 .bookno03 .image > img,
.hotbook_column .hotbook_block05 .bookno01 .image > img,
.hotbook_column .hotbook_block05 .bookno02 .image > img,
.hotbook_column .hotbook_block05 .bookno03 .image > img,
.hotbook_column .hotbook_block06 .bookno01 .image > img,
.hotbook_column .hotbook_block06 .bookno02 .image > img,
.hotbook_column .hotbook_block06 .bookno03 .image > img {
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  margin: auto;
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block04 .bookno01 .image_titlepage,
  .hotbook_column .hotbook_block04 .bookno01 .image_titlepage2,
  .hotbook_column .hotbook_block04 .bookno02 .image_titlepage,
  .hotbook_column .hotbook_block04 .bookno02 .image_titlepage2,
  .hotbook_column .hotbook_block04 .bookno03 .image_titlepage,
  .hotbook_column .hotbook_block04 .bookno03 .image_titlepage2,
  .hotbook_column .hotbook_block05 .bookno01 .image_titlepage,
  .hotbook_column .hotbook_block05 .bookno01 .image_titlepage2,
  .hotbook_column .hotbook_block05 .bookno02 .image_titlepage,
  .hotbook_column .hotbook_block05 .bookno02 .image_titlepage2,
  .hotbook_column .hotbook_block05 .bookno03 .image_titlepage,
  .hotbook_column .hotbook_block05 .bookno03 .image_titlepage2,
  .hotbook_column .hotbook_block06 .bookno01 .image_titlepage,
  .hotbook_column .hotbook_block06 .bookno01 .image_titlepage2,
  .hotbook_column .hotbook_block06 .bookno02 .image_titlepage,
  .hotbook_column .hotbook_block06 .bookno02 .image_titlepage2,
  .hotbook_column .hotbook_block06 .bookno03 .image_titlepage,
  .hotbook_column .hotbook_block06 .bookno03 .image_titlepage2 {
    width: 80px !important;
    height: 140px !important;
    float: left;
    margin-top: -40px !important;
  }
}
@media screen and (max-width: 575px) {
  .hotbook_column .hotbook_block04 .bookno01 h3,
  .hotbook_column .hotbook_block04 .bookno02 h3,
  .hotbook_column .hotbook_block04 .bookno03 h3,
  .hotbook_column .hotbook_block05 .bookno01 h3,
  .hotbook_column .hotbook_block05 .bookno02 h3,
  .hotbook_column .hotbook_block05 .bookno03 h3,
  .hotbook_column .hotbook_block06 .bookno01 h3,
  .hotbook_column .hotbook_block06 .bookno02 h3,
  .hotbook_column .hotbook_block06 .bookno03 h3 {
    overflow: visible;
    white-space: normal;
    text-align: left;
    margin-left: 30%;
  }
}
@media (max-width: 480px) {
  .hotbook_column .hotbook_block04 .bookno01 h3,
  .hotbook_column .hotbook_block04 .bookno02 h3,
  .hotbook_column .hotbook_block04 .bookno03 h3,
  .hotbook_column .hotbook_block05 .bookno01 h3,
  .hotbook_column .hotbook_block05 .bookno02 h3,
  .hotbook_column .hotbook_block05 .bookno03 h3,
  .hotbook_column .hotbook_block06 .bookno01 h3,
  .hotbook_column .hotbook_block06 .bookno02 h3,
  .hotbook_column .hotbook_block06 .bookno03 h3 {
    margin-left: 35%;
  }
}
@media (max-width: 380px) {
  .hotbook_column .hotbook_block04 .bookno01 h3,
  .hotbook_column .hotbook_block04 .bookno02 h3,
  .hotbook_column .hotbook_block04 .bookno03 h3,
  .hotbook_column .hotbook_block05 .bookno01 h3,
  .hotbook_column .hotbook_block05 .bookno02 h3,
  .hotbook_column .hotbook_block05 .bookno03 h3,
  .hotbook_column .hotbook_block06 .bookno01 h3,
  .hotbook_column .hotbook_block06 .bookno02 h3,
  .hotbook_column .hotbook_block06 .bookno03 h3 {
    margin-left: 40%;
  }
}
.hotbook_column .hotbook_block02 .hotbooklist,
.hotbook_column .hotbook_block03 .hotbooklist {
  height: 170px;
  padding: 10px 15px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
  margin-bottom: 10px;
  margin-right: 10px;
}
.hotbook_column .hotbook_block02 .hotbooklist .image,
.hotbook_column .hotbook_block03 .hotbooklist .image {
  width: 100px;
  margin: 0 20px 0 0;
  float: left;
}
.hotbook_column .hotbook_block02 .hotbooklist .image > img,
.hotbook_column .hotbook_block03 .hotbooklist .image > img {
  width: 100%;
  max-height: 200px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
@media (max-width: 480px) {
  .hotbook_column .hotbook_block02 .hotbooklist .image,
  .hotbook_column .hotbook_block03 .hotbooklist .image {
    width: 75px;
  }
}
.hotbook_column .hotbook_block02 .hotbooklist .image_titlepage,
.hotbook_column .hotbook_block02 .hotbooklist .image_titlepage2,
.hotbook_column .hotbook_block03 .hotbooklist .image_titlepage,
.hotbook_column .hotbook_block03 .hotbooklist .image_titlepage2 {
  margin: 0 20px 0 0;
  width: 100px;
  float: left;
}
.hotbook_column .hotbook_block02 .hotbooklist .clickblock,
.hotbook_column .hotbook_block03 .hotbooklist .clickblock {
  margin: 0 0 10px;
}
.hotbook_column .hotbook_block03 .hotbooklist {
  margin-right: 0;
}

.lp table td.date {
  text-align: center;
  color: #666;
}
@media screen and (max-width: 767px) {
  .lp table td.date {
    text-align: left;
  }
}
.lp table td.num {
  text-align: center;
  color: #666;
}
@media screen and (max-width: 767px) {
  .lp table td.num {
    text-align: left;
  }
}
.lp .list ul,
.lp .list ol {
  list-style-type: none;
  padding: 0;
  border-top: 2px solid #005d98, #5c9588, #5c9588, #0e664c, #313131, #1c4b82, #bc5702, #097e76, #774181, #088c6f, #0078c6;
}
.lp .list ul li,
.lp .list ol li {
  padding: 1em 0;
  border-bottom: 1px solid #ddd;
  position: relative;
}
.lp .list ul li a,
.lp .list ol li a {
  display: block;
  padding-left: 2em;
  position: relative;
  line-height: 1.45em;
}
.lp .list ul li a .num,
.lp .list ol li a .num {
  width: 1.5em;
  text-align: right;
  position: absolute;
  top: 0;
  left: 0;
}
.lp .list ul li a .num:after,
.lp .list ol li a .num:after {
  content: ".";
  display: inline-block;
}
.lp .list ul li span.dept,
.lp .list ol li span.dept {
  display: inline-block;
  font-size: 0.938em;
}
@media screen and (max-width: 767px) {
  .lp .list ul li span.dept,
  .lp .list ol li span.dept {
    display: block;
  }
}
.lp .list ul li time,
.lp .list ol li time {
  display: block;
  color: #aaa;
  font-size: 0.938em;
}
.lp .album {
  margin: 1em auto;
  overflow: hidden;
}
.lp .album ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.lp .album ul li {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .lp .album ul li {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 992px) {
  .lp .album ul li {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 1400px) {
  .lp .album ul li {
    float: left;
    width: 33.3333333333%;
  }
}
.lp .album ul li a {
  display: block;
  text-align: center;
}
.lp .album ul li .imgOuter {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #dedede;
}
.lp .album ul li .imgOuter:before {
  display: block;
  content: "";
  padding-top: 75%;
}
.lp .album ul li .imgOuter img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.no_bottomline .data_all {
  border-bottom: none;
}

.no_bottomline_s .data_all {
  border-bottom: none;
  padding: 6px 30px 3px;
  margin-bottom: 0px;
}

.disabledCard {
  pointer-events: none;
  opacity: 0.6;
  box-shadow: none;
  cursor: not-allowed;
}

.data_all {
  border-bottom: 1px solid #d3d3d3;
  position: relative;
  padding: 6px 10px 3px;
  min-height: 35px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.data_all.no_bottomline {
  border-bottom: none;
  margin-bottom: 5px;
}
.data_all.no_bottomline_s {
  border-bottom: none;
  padding: 6px 30px 3px;
  margin-bottom: 5px;
}
@media (max-width: 380px) {
  .data_all.no_bottomline_s .data_quantity2 {
    position: relative;
    right: 5px;
  }
}
.data_all .leftdata {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
.data_all .rightdata {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  padding-left: 5px;
}
.data_all .rightdata .choosebtn {
  margin-left: 5px;
}
.data_all .rightdata .choosebtn .prompt_block3 {
  right: 0 !important;
  left: auto;
}

.material_explain {
  margin: 0px 30px 5px;
  text-align: left;
  vertical-align: top;
  font-size: 1.063em;
  position: relative;
  color: #333;
  padding-left: 20px;
}
.material_explain:before {
  content: "";
  border: 8px solid #eb574b;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  left: 0;
  top: 2px;
}

.read_remind {
  flex: 1 1 auto;
  flex-basis: 100%;
  background-color: #fdeeee;
  color: #dc0122;
  padding: 5px 10px 3px 40px;
  margin: 0 10px 15px;
  text-align: left;
  border-radius: 5px;
  border: 1px solid #fee8e8;
  position: relative;
}
.read_remind:before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid #dc0122;
  border-radius: 50%;
  position: absolute;
  left: 13px;
  top: 8px;
}
.read_remind:after {
  content: "!";
  position: absolute;
  left: 19px;
  top: 6px;
  color: #dc0122;
}

.prize_category {
  flex: 0 0 auto;
  margin-bottom: 5px;
}
.prize_category ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.prize_category ul li {
  color: #333;
  margin-right: 5px;
}
.prize_category ul li a {
  padding: 5px 10px;
  display: block;
  border-radius: 4px;
  background-color: #ddd;
}
.prize_category ul li a.here {
  background-color: #005d98;
  color: #fff;
  transition: 0.5s;
}
.prize_category ul li a.here:hover {
  color: #fff;
  background-color: #004d7f;
}
.prize_category ul li a:hover {
  color: #005d98;
}

.date_selection {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 5px 0 10px;
  margin-bottom: 5px;
  margin-right: 5px;
}
.date_selection span {
  margin-right: 0px;
  color: #666;
}
.date_selection .datepick {
  flex: 0 0 auto;
  position: relative;
  display: flex;
}
.date_selection .datepick input {
  padding: 0.25em 0em;
  margin-bottom: 0;
  border: none;
}
.date_selection .datepick > input[type=text] {
  width: 7.5em;
}
.date_selection .datepick span.image {
  float: right;
}
.date_selection .datepick span.image img {
  width: 24px;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: 3px;
}
.date_selection .datepick + .datepick {
  margin-left: 1em;
}
.date_selection .datepick + .datepick:before {
  content: "~";
  font-size: 1.5em;
  color: #777;
  position: absolute;
  top: 5px;
  left: -14px;
}
@media screen and (max-width: 575px) {
  .date_selection {
    flex: 1 1 auto;
    flex-basis: 100%;
  }
}

.choosebtn {
  margin: 0;
  display: inline-block;
  text-align: left;
  float: left;
  vertical-align: top;
}
.choosebtn input[type=button] {
  float: left;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  height: 2.1em;
  line-height: 1em;
  color: #333;
  box-shadow: none;
  margin: 0 10px 0 0;
}
.choosebtn select {
  width: auto;
  height: 2.1em;
  line-height: 2.1em;
  padding: 0 24px 0 0.5em;
  border: 1px solid #d3d3d3 !important;
  background: #fff url(../images/basic/icon_select_arrow.svg) no-repeat right center;
  background-size: 25px;
  margin-right: 2px;
  display: inline-block;
  box-shadow: none;
}
.choosebtn a {
  margin: 0 5px 0 0;
}

.data_explain {
  margin: 5px 0 0 0;
  display: inline-block;
  text-align: left;
  float: left;
  vertical-align: top;
  font-size: 1.063em;
  position: relative;
  color: #333;
  padding-left: 20px;
}
.data_explain:before {
  content: "";
  border: 8px solid #eb574b;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  left: 0;
  top: 2px;
}

.data_quantity2 {
  color: #333;
  padding: 0px;
  margin: 0;
  display: inline-block;
  vertical-align: top;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .data_quantity2 {
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
@media (max-width: 380px) {
  .data_quantity2 {
    position: relative;
    margin: 5px 0px;
  }
}
.data_quantity2 .number_pens {
  margin: 5px 0;
  float: left;
}
.data_quantity2 span {
  padding-top: 5px;
  margin-right: 5px;
  display: inline-block;
}
@media (max-width: 374px) {
  .data_quantity2 span {
    padding-top: 0px;
    padding-bottom: 5px;
  }
}
.data_quantity2 em {
  color: #b94b00;
  font-style: normal;
  padding: 0 5px;
}

.sorticon a,
.searchicon a {
  padding: 2px 3px !important;
  width: 18px;
  height: 18px;
  border: 1px #999 solid;
  border-radius: 3px;
  line-height: 16px;
  margin-left: 4px;
  display: block;
}
.sorticon img,
.searchicon img {
  width: 16px;
  vertical-align: middle;
}

.option {
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: top;
}
.option form select {
  width: auto;
  height: 2em;
  line-height: 2em;
}
@media screen and (max-width: 767px) {
  .option form select.sortby {
    display: none;
  }
  .option form select.view_mode {
    display: none;
  }
}

.optionblock {
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 8;
  vertical-align: top;
}
@media screen and (max-width: 767px) {
  .optionblock {
    display: none;
    width: 100%;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    text-align: center;
    margin: 5px 0 0;
  }
}
@media (max-width: 380px) {
  .optionblock {
    margin: 10px 0 0 0;
    padding: 0;
    text-align: right;
  }
}
@media (max-width: 345px) {
  .optionblock {
    margin: 0;
  }
}
.optionblock .option_01 {
  position: relative;
  display: inline-block;
  margin-left: 0px;
}
@media (max-width: 380px) {
  .optionblock .option_01 {
    margin: 0px 0px 5px 5px;
  }
}
.optionblock .option_01 .name {
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
}
.optionblock .option_01 .name a {
  display: block;
  background: url(../images/basic/icon_select_arrow.svg) no-repeat right center;
  background-size: 25px;
  padding: 3px 20px 3px 5px;
  cursor: pointer;
}
.optionblock .option_01 .option_list {
  position: absolute;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 185px;
  top: 40px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 2px 1px -1px rgba(0, 0, 0, 0.2);
  display: none;
}
@media screen and (max-width: 575px) {
  .optionblock .option_01 .option_list {
    width: 150px;
  }
}
.optionblock .option_01 .option_list:before {
  content: "";
  border: 11px solid #ccc;
  border-color: transparent transparent #ccc transparent;
  position: absolute;
  top: -22px;
  right: 5px;
  z-index: 12;
}
.optionblock .option_01 .option_list:after {
  content: "";
  border: 9px solid #fff;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: -18px;
  right: 7px;
  z-index: 13;
}
.optionblock .option_01 .option_list ul {
  margin: 0 5px;
  padding: 0;
  list-style: none;
}
.optionblock .option_01 .option_list ul li a {
  display: block;
  padding: 5px 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}
.optionblock .option_01 .option_list ul li a.here {
  background-color: #dc0122;
  color: #fff;
}
.optionblock .option_01 .option_list ul li:last-child a {
  border-bottom: none;
}

.sortbyblock {
  display: none;
}
@media screen and (max-width: 767px) {
  .sortbyblock {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
  }
  .sortbyblock.linedel {
    display: none;
  }
  .sortbyblock ul {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .sortbyblock ul li {
    float: left;
    width: 25%;
    list-style-type: none;
    position: relative;
  }
  .sortbyblock ul li:after {
    content: "";
    width: 1px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 9px;
    background-color: #ccc;
  }
  .sortbyblock ul li:last-child:after {
    content: "";
    width: 0;
  }
  .sortbyblock ul li:before {
    content: "";
    width: 1px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 9px;
    background-color: #fff;
  }
  .sortbyblock ul li:first-child:before {
    content: "";
    width: 0;
  }
  .sortbyblock ul li a {
    display: block;
    text-align: center;
    padding: 12px 8px;
    font-size: 1.063em;
    color: #333;
    background-color: #eee;
  }
}
@media screen and (max-width: 767px) and (max-width: 575px) {
  .sortbyblock ul li a {
    padding: 12px 4px;
  }
}

.showPage {
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.booklist_block {
  clear: both;
}
.booklist_block .directions {
  line-height: 1.8em;
  padding: 1em 1.5em;
  border-radius: 5px;
  background-color: #f0f0f0;
  margin: 1em 1em 0.5em;
}
@media (max-width: 380px) {
  .booklist_block.mystudyooklist .booklist2 .bookmidblock .bookdata {
    flex: auto !important;
  }
}
.booklist_block .booklist {
  border-bottom: 1px solid #d3d3d3;
  padding: 18px 15px;
  clear: both;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.booklist_block .booklist.special {
  background-color: #fff5d6;
}
.booklist_block .booklist .bookleftblock {
  margin-right: 20px;
  margin-bottom: 10px;
  flex: none;
  flex-basis: 120px;
  padding-left: 5px;
  vertical-align: top;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist .bookleftblock {
    margin-right: 0;
  }
}
@media (max-width: 480px) {
  .booklist_block .booklist .bookleftblock {
    padding-left: 0;
    flex-basis: 100px;
  }
}
.booklist_block .booklist .bookleftblock label {
  display: block;
  margin-right: 15px;
}
.booklist_block .booklist .bookleftblock label input {
  border-radius: 4px !important;
}
.booklist_block .booklist .bookleftblock label input[type=checkbox] {
  margin-right: 5px;
}
.booklist_block .booklist .bookleftblock .book {
  float: left;
  width: 100px;
}
@media (max-width: 480px) {
  .booklist_block .booklist .bookleftblock .book {
    float: none;
    clear: both;
    margin: 0;
    width: 80px;
  }
}
.booklist_block .booklist .bookleftblock .book .image {
  margin-bottom: 3px;
  text-align: center;
  height: 150px;
}
.booklist_block .booklist .bookleftblock .book .image > img {
  max-width: 100%;
  max-height: 140px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
@media (max-width: 480px) {
  .booklist_block .booklist .bookleftblock .book .score_star,
  .booklist_block .booklist .bookleftblock .book .then {
    display: none;
  }
}
.booklist_block .booklist .bookleftblock .book .score {
  display: block;
  clear: both;
  margin: 10px 0;
  overflow: hidden;
}
.booklist_block .booklist .bookleftblock .book .score a {
  display: block;
  padding: 3px 10px;
  color: #333;
  text-align: center;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
}
@media screen and (max-width: 575px) {
  .booklist_block .booklist .bookleftblock .book .score a {
    padding: 3px 3px;
  }
}
.booklist_block .booklist .bookleftblock .book .score a:hover {
  background-color: #fadb5b;
}
.booklist_block .booklist .bookmidblock {
  vertical-align: top;
  position: relative;
  flex: auto;
  flex-basis: calc(100% - 150px);
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist .bookmidblock {
    flex-basis: calc(100% - 125px);
  }
}
@media (max-width: 480px) {
  .booklist_block .booklist .bookmidblock {
    flex-basis: calc(100% - 100px);
  }
}
.booklist_block .booklist .bookmidblock .bookdata {
  flex: 0 0 auto;
  flex-basis: calc(100% - 140px);
}
@media (max-width: 800px) {
  .booklist_block .booklist .bookmidblock .bookdata {
    order: 2;
    flex-basis: 100%;
  }
}
.booklist_block .booklist .bookmidblock h2 {
  margin: 0 0 10px;
  padding: 0;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.3em;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist .bookmidblock h2 {
    margin: 0px 0 10px;
  }
}
.booklist_block .booklist .bookmidblock h2 a {
  color: #774e2b;
  text-decoration: underline;
  transition: 0.5s;
}
.booklist_block .booklist .bookmidblock h2 a:hover {
  color: #dd1f03;
}
.booklist_block .booklist .bookmidblock .data_type_block {
  padding: 3px 15px;
  margin-bottom: 10px;
  font-size: 0.875em;
  background-color: #fed857;
  color: #000;
  border-radius: 50px;
  display: inline-block;
  position: relative;
}
.booklist_block .booklist .bookmidblock .data_type_block2 {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 0.8em;
}
.booklist_block .booklist .bookmidblock .data_type_block2 .type_list {
  margin: 0 5px 0 0;
  padding: 5px 12px;
  margin-bottom: 10px;
  font-size: 1em;
  border: 1px solid #ddd;
  border-radius: 20px;
  color: #555;
  border-radius: 50px;
  display: flex;
  align-items: center;
}
.booklist_block .booklist .bookmidblock .data_type_block2 .type_list img {
  margin-right: 0.4em;
  vertical-align: middle;
  width: 20px;
}
.booklist_block .booklist .bookmidblock .booktype {
  float: left;
  margin-right: 15px;
  background-color: #b94b00;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  text-align: center;
  position: relative;
}
.booklist_block .booklist .bookmidblock .booktype img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.booklist_block .booklist .bookmidblock .basic_data {
  overflow: hidden;
}
.booklist_block .booklist .bookmidblock ul {
  margin: 0 0 6px 1px;
  padding: 0;
}
.booklist_block .booklist .bookmidblock ul li {
  list-style-type: none;
  margin: 0 15px 0 0;
  padding: 0;
  display: block;
  position: relative;
  text-align: left;
  transition: 0.5s;
  display: inline-block;
}
.booklist_block .booklist .bookmidblock ul li.aRight {
  text-align: right;
  float: right;
}
.booklist_block .booklist .bookmidblock ul li.aRight a {
  border: 1px solid #d3d3d3;
  padding: 0px 10px;
  border-radius: 5px;
  display: block;
}
.booklist_block .booklist .bookmidblock ul li.aRight a:hover {
  color: #333;
  background-color: #e5e5e5;
}
.booklist_block .booklist .bookmidblock ul li a {
  color: #dd1f03;
  text-decoration: underline;
}
.booklist_block .booklist .bookmidblock ul li a:hover {
  text-decoration: none;
}
.booklist_block .booklist .bookmidblock ul li a img {
  vertical-align: middle;
}
.booklist_block .booklist .bookmidblock ul li.more {
  margin-bottom: 5px !important;
}
.booklist_block .booklist .bookmidblock ul li.more a {
  background-color: #fff !important;
  color: #333 !important;
  text-decoration: none !important;
}
.booklist_block .booklist .bookmidblock ul li.more a:hover {
  color: #333 !important;
  background-color: #e5e5e5 !important;
}
.booklist_block .booklist .bookmidblock ul li.commentblock {
  margin-bottom: 15px;
  height: 70px;
  overflow: hidden;
}
.booklist_block .booklist .bookmidblock ul li.cancelrows {
  display: block;
}
.booklist_block .booklist .bookmidblock ul li:before {
  content: "；";
  position: absolute;
  right: -17px;
  top: 0;
  font-weight: bolder;
  color: #333;
}
.booklist_block .booklist .bookmidblock ul li:last-child:before, .booklist_block .booklist .bookmidblock ul li:only-child:before {
  content: "";
}
.booklist_block .booklist .bookmidblock ul li.no_semicolon {
  margin: 0 2px 0 0px;
}
.booklist_block .booklist .bookmidblock ul li.no_semicolon:before {
  content: "";
}
.booklist_block .booklist .bookmidblock ul li.word_title {
  font-size: 1.125em;
  position: relative;
  display: block;
  margin-bottom: 0.5em;
}
.booklist_block .booklist .bookmidblock ul li.word_title:before {
  display: none;
}
.booklist_block .booklist .bookmidblock ul li.word_title a {
  font-weight: bolder;
  color: #774e2b;
  text-decoration: underline;
  transition: 0.5s;
}
.booklist_block .booklist .bookmidblock ul li.word_title a:hover {
  color: #dd1f03;
}
.booklist_block .booklist .bookmidblock ul li input[type=button] {
  border: 1px solid #d3d3d3;
  background-color: #fff;
  padding: 4px 20px 4px 33px;
  color: #313131;
  margin: 0.25em 0.2em;
}
.booklist_block .booklist .bookmidblock ul li input[type=button]:hover {
  background-color: #e5e5e5;
}
.booklist_block .booklist .bookmidblock ul li input.download {
  background-image: url("../images/icon_download.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.booklist_block .booklist .bookmidblock ul li input.borrow {
  background-image: url("../images/icon_borrowing.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.booklist_block .booklist .bookmidblock ul li input.renew {
  background-image: url("../images/icon_renew.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.booklist_block .booklist .bookmidblock ul li input.delreservation {
  background-image: url("../images/icon_delreservation.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.booklist_block .booklist .bookmidblock ul li.addtag_block {
  display: none;
}
.booklist_block .booklist .bookmidblock ul li.tagblock {
  margin: 0;
}
.booklist_block .booklist .bookmidblock ul li .addtagbtn,
.booklist_block .booklist .bookmidblock ul li .addtag_lightboxbtn {
  display: inline-block;
}
@media (max-width: 380px) {
  .booklist_block .booklist .bookmidblock ul li .addtagbtn,
  .booklist_block .booklist .bookmidblock ul li .addtag_lightboxbtn {
    display: block;
  }
}
.booklist_block .booklist .bookmidblock ul li .addtagbtn:focus,
.booklist_block .booklist .bookmidblock ul li .addtag_lightboxbtn:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.booklist_block .booklist .bookmidblock ul li .addtag {
  position: relative;
  float: left;
  z-index: 10;
  margin-right: 2px;
}
.booklist_block .booklist .bookmidblock ul li .addtag input[type=text] {
  width: 210px;
  padding: 5px 8px 4px;
}
@media screen and (max-width: 575px) {
  .booklist_block .booklist .bookmidblock ul li .addtag input[type=text] {
    width: 170px;
  }
}
@media (max-width: 480px) {
  .booklist_block .booklist .bookmidblock ul li .addtag input[type=text] {
    width: 100%;
  }
}
.booklist_block .booklist .bookmidblock ul li .addtag .addoption {
  position: absolute;
  top: 34px;
  left: 0;
  width: 210px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 4px 10px;
  background-color: #fff;
  box-sizing: border-box;
  display: none;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist .bookmidblock ul li .addtag .addoption {
    width: 180px;
    top: auto;
    bottom: 45px;
  }
}
@media (max-width: 480px) {
  .booklist_block .booklist .bookmidblock ul li .addtag .addoption {
    width: 100%;
  }
}
.booklist_block .booklist .bookmidblock ul li .addtag .addoption ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.booklist_block .booklist .bookmidblock ul li .addtag .addoption ul li {
  display: block;
  margin: 0;
}
.booklist_block .booklist .bookmidblock ul li .addtag .addoption ul li a {
  display: block;
  padding: 4px;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  color: #666;
}
.booklist_block .booklist .bookmidblock ul li .addtag .addoption ul li a:hover {
  color: #dd1f03;
}
.booklist_block .booklist .bookmidblock ul li .addtag .addoption ul li:last-child a {
  border: none;
}
.booklist_block .booklist .bookmidblock ul li .addtag .addoption ul li:before {
  content: "";
}
.booklist_block .booklist .bookmidblock ul li .addtag + button.btn-xs {
  font-size: 0.938em !important;
}
.booklist_block .booklist .bookmidblock ul li .addtag + button.btn {
  padding: 0.3em 1em 0.3em !important;
  margin: 0 0.3em 0 0.1em !important;
}
.booklist_block .booklist .bookmidblock ul li .closebtn {
  display: inline-block;
}
.booklist_block .booklist .bookmidblock ul li .closebtn:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.booklist_block .booklist .bookmidblock ul.borrowdate_data {
  margin: 0;
  padding: 0;
}
.booklist_block .booklist .bookmidblock ul.borrowdate_data li {
  list-style-type: none;
  background-image: url("../images/icon_point.png");
  background-position: 0 center;
  background-repeat: no-repeat;
  background-size: 6px;
  padding-left: 15px;
  margin: 0 0 5px 0 !important;
  display: block !important;
  color: #000 !important;
}
.booklist_block .booklist .bookmidblock ul.borrowdate_data li:after {
  content: "";
}
.booklist_block .booklist .bookmidblock p {
  padding: 0;
  margin: 15px 0;
  font-size: 1.125em;
}
.booklist_block .booklist .bookmidblock .bookbtn {
  clear: both;
}
.booklist_block .booklist .bookmidblock .bookbtn span {
  margin-right: 10px;
}
.booklist_block .booklist .bookmidblock .bookbtn input[type=button] {
  border: 1px solid #d3d3d3;
  background-color: #fff;
  padding: 4px 20px 4px 33px;
  color: #313131;
}
.booklist_block .booklist .bookmidblock .bookbtn input[type=button]:hover {
  background-color: #e5e5e5;
}
.booklist_block .booklist .bookmidblock .bookbtn input.download {
  background-image: url("../images/icon_download.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.booklist_block .booklist .bookmidblock .bookbtn input.borrow {
  background-image: url("../images/icon_borrowing.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.booklist_block .booklist .bookmidblock .bookbtn input.renew {
  background-image: url("../images/icon_renew.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.booklist_block .booklist .bookmidblock .bookbtn input.delreservation {
  background-image: url("../images/icon_delreservation.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.booklist_block .booklist .bookmidblock .bookbtn input.recommend {
  background-image: url("../images/icon_recommend.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.booklist_block .booklist .bookmidblock .bookshare {
  position: relative;
  flex: none;
  flex-basis: 130px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
@media (max-width: 800px) {
  .booklist_block .booklist .bookmidblock .bookshare {
    flex-basis: 100%;
    order: 1;
  }
}
.booklist_block .booklist .bookmidblock .bookshare ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.booklist_block .booklist .bookmidblock .bookshare ul li {
  display: inline-block;
  margin-left: 0px;
  list-style-type: none;
  padding: 0;
  background-image: none;
  margin: 0 0 0 3px;
}
@media screen and (max-width: 991px) {
  .booklist_block .booklist .bookmidblock .bookshare ul li {
    display: block;
  }
}
.booklist_block .booklist .bookmidblock .bookshare ul li:before {
  content: "";
}
.booklist_block .booklist .bookmidblock .bookshare ul li a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  line-height: 40px;
  text-align: center;
  margin: 0 auto;
}
.booklist_block .booklist .bookmidblock .bookshare ul li a:hover {
  background-color: #e5e5e5;
}
.booklist_block .booklist .bookmidblock .bookshare ul li a img {
  width: 22px;
  height: 22px;
}
.booklist_block .booklist .bookmidblock .bookshare ul li .borrowed {
  padding: 2px 8px;
  background-color: #107859;
  color: #fff;
  border-radius: 4px;
  font-size: 0.938em;
}
.booklist_block .booklist .bookmidblock .bookshare ul li select {
  font-size: 0.875em;
}
.booklist_block .booklist .bookmidblock .bookshare .moreshareblock {
  position: absolute;
  top: 50px;
  right: 10px;
  width: 430px;
  background-color: #e5e5e5;
  border-radius: 5px;
  padding: 20px 30px 15px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  display: none;
}
.booklist_block .booklist .bookmidblock .bookshare .moreshareblock:after {
  content: "";
  position: absolute;
  border: 10px #e5e5e5 solid;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  right: 10px;
  top: -18px;
}
@media screen and (max-width: 1399px) {
  .booklist_block .booklist .bookmidblock .bookshare .moreshareblock {
    position: relative;
    top: 10px;
    left: 10px;
    margin-bottom: 20px;
  }
  .booklist_block .booklist .bookmidblock .bookshare .moreshareblock:after {
    left: 135px;
    right: auto;
  }
}
@media screen and (max-width: 991px) {
  .booklist_block .booklist .bookmidblock .bookshare .moreshareblock {
    width: 90%;
  }
}
.booklist_block .booklist .bookmidblock .bookshare .moreshareblock div {
  text-align: center;
}
.booklist_block .booklist .bookmidblock .bookshare .moreshareblock div a {
  text-align: center;
  font-size: 0.939em;
}
.booklist_block .booklist .bookmidblock .bookshare .moreshareblock div a img {
  width: 24px;
  margin: 0 auto 10px;
}
.booklist_block .booklist .bookmidblock .bookshare .moreshareblock .slick-prev {
  background-image: url("../vendor/slick/icon_arrow_left2.png");
  left: 0;
  box-shadow: none;
}
.booklist_block .booklist .bookmidblock .bookshare .moreshareblock .slick-next {
  background-image: url("../vendor/slick/icon_arrow_right2.png");
  right: 0;
  box-shadow: none;
}
.booklist_block .booklist .bookmidblock .moreshare {
  flex-basis: 100%;
  position: absolute;
  bottom: 0px;
  right: 0;
  margin-top: 5px;
}
@media screen and (max-width: 991px) {
  .booklist_block .booklist .bookmidblock .moreshare {
    position: relative;
    right: 0;
    bottom: auto;
    float: none;
    clear: both;
    text-align: right;
  }
}
@media (max-width: 800px) {
  .booklist_block .booklist .bookmidblock .moreshare {
    flex-basis: 100%;
    order: 3;
  }
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist .bookmidblock .moreshare {
    display: none;
  }
}
.booklist_block .booklist .bookmidblock .moreshare ul {
  margin: 0;
  padding: 0;
  text-align: right;
}
.booklist_block .booklist .bookmidblock .moreshare ul li {
  display: inline-block;
  margin-left: 0px;
  list-style-type: none;
  padding: 0;
  background-image: none;
  margin: 0;
}
.booklist_block .booklist .bookmidblock .moreshare ul li:before {
  content: "";
}
.booklist_block .booklist .bookmidblock .moreshare ul li a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  line-height: 35px;
  text-align: center;
}
.booklist_block .booklist .bookmidblock .moreshare ul li a:hover {
  background-color: #e5e5e5;
}
.booklist_block .booklist .booklist_type {
  clear: both;
  float: none;
  flex: auto;
  flex-basis: 100%;
  position: relative;
  padding: 10px 0 0;
  margin-top: 10px;
  border-top: 1px solid #ccc;
  overflow: hidden;
}
.booklist_block .booklist .booklist_type .displaymore {
  float: right;
  width: 65px;
  margin-bottom: 5px;
  position: relative;
  padding: 3px 5px 3px 25px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.875em;
}
@media screen and (max-width: 575px) {
  .booklist_block .booklist .booklist_type .displaymore {
    float: none;
    margin: 0 auto 5px;
  }
}
.booklist_block .booklist .booklist_type .displaymore:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 5px;
  border: 6px solid #666;
  border-color: #666 transparent transparent transparent;
}
.booklist_block .booklist .booklist_type .displaymore a {
  display: block;
  color: #333;
}
.booklist_block .booklist .booklist_type .displayonly {
  float: right;
  width: 60px;
  margin-bottom: 5px;
  position: relative;
  padding: 3px 5px 3px 25px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.875em;
  display: none;
}
@media screen and (max-width: 575px) {
  .booklist_block .booklist .booklist_type .displayonly {
    float: none;
    margin: 0 auto 5px;
  }
}
.booklist_block .booklist .booklist_type .displayonly:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  border: 6px solid #666;
  border-color: transparent transparent #666 transparent;
}
.booklist_block .booklist .booklist_type .displayonly a {
  display: block;
  color: #333;
}
.booklist_block .booklist .booklist_type ul {
  margin: 0;
  padding: 0;
  float: left;
  width: calc(100% - 100px);
}
@media screen and (max-width: 575px) {
  .booklist_block .booklist .booklist_type ul {
    width: 100%;
    float: none;
    clear: both;
  }
}
.booklist_block .booklist .booklist_type ul li {
  list-style: none;
  line-height: 1.5em;
  position: relative;
  margin: 0 0 5px 0;
  padding: 0 0 0 15px;
  display: none;
}
.booklist_block .booklist .booklist_type ul li:first-child {
  display: block;
}
.booklist_block .booklist .booklist_type ul li:before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  background-color: #666;
  left: 0px;
  top: 9px;
}
.booklist_block .booklist .booklist_type ul li span {
  padding: 0 15px 0 0;
  position: relative;
  display: inline-block;
}
.booklist_block .booklist .booklist_type ul li span:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 15px;
  right: 8px;
  top: 5px;
  background-color: #999;
}
.booklist_block .booklist .booklist_type ul.morelist li {
  display: block;
}
.booklist_block .booklist .booklist_type ul.onlylist {
  width: 100%;
  float: none;
}
.booklist_block .booklist .score_star {
  position: relative;
  text-align: left;
  width: 100px;
  height: 29px;
  float: left;
  z-index: 0;
}
.booklist_block .booklist .score_star > img {
  position: absolute;
  z-index: 5;
  width: 100px;
  height: 29px;
}
.booklist_block .booklist .score_star .score_color {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100px;
  height: 29px;
  overflow: hidden;
}
.booklist_block .booklist .then {
  color: #b4b4b4;
  float: left;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}
.booklist_block .booklist2 {
  display: flex;
}
.booklist_block .booklist2 .bookleftblock {
  width: auto;
  flex-basis: auto;
  margin-right: 0;
}
.booklist_block .booklist2 .bookmidblock {
  flex: 1;
  width: auto;
  float: none;
}
.booklist_block .booklist2 .bookmidblock .bookdata {
  flex: 1 1 auto;
}
@media (max-width: 800px) {
  .booklist_block .booklist2 .bookmidblock .bookdata {
    flex-basis: 100%;
    order: 2;
  }
}
.booklist_block .booklist2 .bookmidblock .bookshare {
  display: none;
}
@media (max-width: 800px) {
  .booklist_block .booklist2 .bookmidblock .bookshare {
    display: flex;
    flex-basis: 100%;
    order: 1;
  }
}
.booklist_block .booklist_hot_block {
  padding: 15px 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.booklist_block .booklist_hot_block .choosebtn {
  margin-left: 7px;
  clear: both;
}
.booklist_block .booklist_hot {
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  padding: 0;
  position: relative;
  width: 19%;
  float: left;
  margin: 0 0.4% 15px;
  height: 390px;
}
@media (max-width: 1400px) {
  .booklist_block .booklist_hot {
    width: 24%;
    margin: 0 0.4% 15px;
  }
}
@media screen and (max-width: 1399px) {
  .booklist_block .booklist_hot {
    width: 32%;
    margin: 0 0.55% 15px;
  }
}
@media (max-width: 900px) {
  .booklist_block .booklist_hot {
    width: 48%;
    margin: 0 0.8% 15px;
  }
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot {
    width: 100%;
    margin: 0 0 15px 0;
    padding: 15px 0 0;
  }
}
.booklist_block .booklist_hot .clickblock {
  overflow: hidden;
  margin: 0 auto 20px;
  background-color: #eee;
  padding: 10px 10px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .clickblock {
    text-align: left;
    position: absolute;
    left: 100px;
    top: 10px;
    background-color: transparent;
  }
}
.booklist_block .booklist_hot .clickblock .ranking {
  background-color: #59493f;
  color: #fff;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: inline-block;
  line-height: 35px;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
  letter-spacing: 0.1em;
  margin-right: 5px;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .clickblock .ranking {
    display: inline-block;
  }
}
@media (max-width: 480px) {
  .booklist_block .booklist_hot .clickblock .ranking {
    display: block;
  }
}
.booklist_block .booklist_hot .clickblock .clicktimes {
  display: inline-block;
  font-size: 1.125em;
  margin-top: 8px;
}
.booklist_block .booklist_hot .bookleftblock {
  width: auto;
  overflow: hidden;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  padding: 0 15px 5px;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .bookleftblock {
    float: left;
  }
}
.booklist_block .booklist_hot .bookleftblock label {
  display: inline-block;
  position: absolute;
  top: 2px;
  margin-left: -45px;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .bookleftblock label {
    display: none;
  }
}
.booklist_block .booklist_hot .bookleftblock label input {
  border-radius: 3px !important;
}
.booklist_block .booklist_hot .bookleftblock label input[type=checkbox] {
  margin-right: 5px;
}
.booklist_block .booklist_hot .bookleftblock .book {
  display: inline-block;
  width: 145px;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .bookleftblock .book {
    width: 80px;
  }
}
.booklist_block .booklist_hot .bookleftblock .book .image {
  margin-bottom: 10px;
  text-align: center;
  height: 200px;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .bookleftblock .book .image {
    height: 120px;
  }
}
.booklist_block .booklist_hot .bookleftblock .book .image > img {
  width: 100%;
  max-height: 200px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .bookleftblock .book .image > img {
    max-height: 120px;
  }
}
.booklist_block .booklist_hot .bookleftblock .book .image_titlepage,
.booklist_block .booklist_hot .bookleftblock .book .image_titlepage2 {
  margin: 0 auto;
  height: 200px;
  width: 145px;
}
.booklist_block .booklist_hot .bookleftblock .book .score {
  display: block;
  clear: both;
  margin: 10px 0;
  overflow: hidden;
}
.booklist_block .booklist_hot .bookleftblock .book .score a {
  display: block;
  padding: 3px 10px;
  color: #333;
  text-align: center;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
}
.booklist_block .booklist_hot .bookleftblock .book .score a:hover {
  background-color: #fadb5b;
}
.booklist_block .booklist_hot .bookmidblock {
  padding: 0 15px;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .bookmidblock {
    float: left;
    width: 80%;
    padding: 0;
  }
}
@media (max-width: 580px) {
  .booklist_block .booklist_hot .bookmidblock {
    width: 72%;
  }
}
@media (max-width: 430px) {
  .booklist_block .booklist_hot .bookmidblock {
    width: 68%;
  }
}
@media (max-width: 380px) {
  .booklist_block .booklist_hot .bookmidblock {
    width: 60%;
  }
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .bookmidblock .bookdata {
    margin: 60px 0 0px 0;
  }
}
@media (max-width: 480px) {
  .booklist_block .booklist_hot .bookmidblock .bookdata {
    margin: 90px 0 0px 0;
  }
}
.booklist_block .booklist_hot .bookmidblock h2 {
  margin: 0 0 10px;
  padding: 0;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.3em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .bookmidblock h2 {
    text-align: left;
  }
}
.booklist_block .booklist_hot .bookmidblock h2 a {
  color: #774e2b;
  text-decoration: underline;
  transition: 0.5s;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.booklist_block .booklist_hot .bookmidblock h2 a:hover {
  color: #dd1f03;
}
.booklist_block .booklist_hot .bookmidblock .bookshare {
  position: relative;
  text-align: center;
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .bookmidblock .bookshare {
    position: absolute;
    top: 10px;
    right: 0px;
  }
}
.booklist_block .booklist_hot .bookmidblock .bookshare ul {
  margin: 0 10px 0 0;
  padding: 0;
}
.booklist_block .booklist_hot .bookmidblock .bookshare ul li {
  display: inline-block;
  margin-left: 0px;
  list-style-type: none;
  padding: 0;
  background-image: none;
  margin: 0;
}
.booklist_block .booklist_hot .bookmidblock .bookshare ul li:before {
  content: "";
}
.booklist_block .booklist_hot .bookmidblock .bookshare ul li a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  line-height: 50px;
  text-align: center;
}
.booklist_block .booklist_hot .bookmidblock .bookshare ul li a:hover {
  background-color: #e5e5e5;
}
.booklist_block .booklist_hot .bookmidblock .bookshare ul li a img {
  width: 22px;
}
@media screen and (max-width: 767px) {
  .booklist_block .booklist_hot .bookmidblock .bookshare ul li {
    display: none;
  }
  .booklist_block .booklist_hot .bookmidblock .bookshare ul li:nth-child(2) {
    display: block;
  }
}
.booklist_block .booklist_hot .bookmidblock .bookshare .moreshareblock2 {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  background-color: #e5e5e5;
  border-radius: 5px;
  padding: 20px 30px 15px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  display: none;
}
.booklist_block .booklist_hot .bookmidblock .bookshare .moreshareblock2 div {
  text-align: center;
}
.booklist_block .booklist_hot .bookmidblock .bookshare .moreshareblock2 div a {
  text-align: center;
  font-size: 0.939em;
}
.booklist_block .booklist_hot .bookmidblock .bookshare .moreshareblock2 div a img {
  width: 25px;
  margin: 0 auto 10px;
}
.booklist_block .booklist_hot .bookmidblock .bookshare .moreshareblock2 .slick-prev {
  background-image: url("../vendor/slick/icon_arrow_left2.png");
  left: 0;
  box-shadow: none;
}
.booklist_block .booklist_hot .bookmidblock .bookshare .moreshareblock2 .slick-next {
  background-image: url("../vendor/slick/icon_arrow_right2.png");
  right: 0;
  box-shadow: none;
}
@media screen and (max-width: 767px) and (min-width: 575px) {
  .booklist_block .booklist_hot {
    height: auto;
  }
  .booklist_block .booklist_hot:nth-child(1), .booklist_block .booklist_hot:nth-child(2), .booklist_block .booklist_hot:nth-child(3) {
    width: 32%;
    float: left;
    margin-right: 1.4%;
    background-color: #eee;
    border: none;
  }
  .booklist_block .booklist_hot:nth-child(1) .clickblock, .booklist_block .booklist_hot:nth-child(2) .clickblock, .booklist_block .booklist_hot:nth-child(3) .clickblock {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 auto 10px;
    padding: 0;
  }
  .booklist_block .booklist_hot:nth-child(1) .clickblock .ranking, .booklist_block .booklist_hot:nth-child(2) .clickblock .ranking, .booklist_block .booklist_hot:nth-child(3) .clickblock .ranking {
    margin: 0 auto;
    display: block;
  }
  .booklist_block .booklist_hot:nth-child(1) .clickblock .clicktimes, .booklist_block .booklist_hot:nth-child(2) .clickblock .clicktimes, .booklist_block .booklist_hot:nth-child(3) .clickblock .clicktimes {
    font-size: 1.063em;
    text-align: center;
    display: block;
  }
  .booklist_block .booklist_hot:nth-child(1) .bookleftblock, .booklist_block .booklist_hot:nth-child(2) .bookleftblock, .booklist_block .booklist_hot:nth-child(3) .bookleftblock {
    float: none;
  }
  .booklist_block .booklist_hot:nth-child(1) .bookleftblock .book, .booklist_block .booklist_hot:nth-child(2) .bookleftblock .book, .booklist_block .booklist_hot:nth-child(3) .bookleftblock .book {
    width: 145px;
  }
  .booklist_block .booklist_hot:nth-child(1) .bookleftblock .book .image, .booklist_block .booklist_hot:nth-child(2) .bookleftblock .book .image, .booklist_block .booklist_hot:nth-child(3) .bookleftblock .book .image {
    height: 200px;
    margin: 0 auto;
    vertical-align: bottom;
    position: relative;
  }
  .booklist_block .booklist_hot:nth-child(1) .bookleftblock .book .image > img, .booklist_block .booklist_hot:nth-child(2) .bookleftblock .book .image > img, .booklist_block .booklist_hot:nth-child(3) .bookleftblock .book .image > img {
    max-height: 200px;
    max-width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .booklist_block .booklist_hot:nth-child(1) .bookmidblock, .booklist_block .booklist_hot:nth-child(2) .bookmidblock, .booklist_block .booklist_hot:nth-child(3) .bookmidblock {
    width: auto;
    float: none;
  }
  .booklist_block .booklist_hot:nth-child(1) .bookmidblock .bookdata, .booklist_block .booklist_hot:nth-child(2) .bookmidblock .bookdata, .booklist_block .booklist_hot:nth-child(3) .bookmidblock .bookdata {
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .booklist_block .booklist_hot:nth-child(1) .bookmidblock .bookdata h2, .booklist_block .booklist_hot:nth-child(2) .bookmidblock .bookdata h2, .booklist_block .booklist_hot:nth-child(3) .bookmidblock .bookdata h2 {
    text-align: center;
  }
  .booklist_block .booklist_hot:nth-child(1) {
    position: relative;
    left: 33.7%;
    height: 390px;
  }
  .booklist_block .booklist_hot:nth-child(2) {
    position: relative;
    left: -33%;
    height: 390px;
  }
  .booklist_block .booklist_hot:nth-child(2) .image {
    width: 85% !important;
  }
  .booklist_block .booklist_hot:nth-child(2) .image_titlepage,
  .booklist_block .booklist_hot:nth-child(2) .image_titlepage2 {
    margin: 26px auto 0 !important;
    height: 180px !important;
    width: 85% !important;
  }
  .booklist_block .booklist_hot:nth-child(3) {
    margin-right: 0%;
    position: relative;
    right: 0;
    height: 390px;
  }
  .booklist_block .booklist_hot:nth-child(3) .image {
    width: 80% !important;
  }
  .booklist_block .booklist_hot:nth-child(3) .image_titlepage,
  .booklist_block .booklist_hot:nth-child(3) .image_titlepage2 {
    margin: 35px auto 0 !important;
    height: 170px !important;
    width: 80% !important;
  }
}
@media (max-width: 575px) {
  .booklist_block .booklist_hot {
    height: auto;
  }
  .booklist_block .booklist_hot .image_titlepage,
  .booklist_block .booklist_hot .image_titlepage2 {
    margin: 0 auto;
    height: 150px !important;
    width: 80px !important;
  }
}

.booklist_more {
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  .booklist_more {
    margin: 0 auto 55px;
  }
}
.booklist_more a {
  display: block;
  text-align: center;
  padding: 20px 8px 30px;
  background-image: none;
  background-color: #f3f3f3;
  color: #333;
  border-radius: 0;
}
@media screen and (max-width: 767px) {
  .booklist_more a {
    padding: 15px 8px;
  }
}
.booklist_more a:hover {
  color: #dd1f03;
}

.hotqa_block {
  overflow: hidden;
  padding: 30px;
  margin-bottom: 30px;
}
.hotqa_block .choosebtn {
  margin-left: 0px;
  clear: both;
}
.hotqa_block .hotqa_leftblock {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .hotqa_block .hotqa_leftblock {
    float: left;
    width: 66.6666666667%;
  }
}
@media (min-width: 992px) {
  .hotqa_block .hotqa_leftblock {
    float: left;
    width: 75%;
  }
}
@media (min-width: 1400px) {
  .hotqa_block .hotqa_leftblock {
    float: left;
    width: 75%;
  }
}
.hotqa_block .hotqa_rightblock {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .hotqa_block .hotqa_rightblock {
    float: left;
    width: 33.3333333333%;
  }
}
@media (min-width: 992px) {
  .hotqa_block .hotqa_rightblock {
    float: left;
    width: 25%;
  }
}
@media (min-width: 1400px) {
  .hotqa_block .hotqa_rightblock {
    float: left;
    width: 25%;
  }
}
.hotqa_block .hotqa_list {
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  padding: 0;
  position: relative;
  width: 19%;
  float: left;
  box-shadow: 0 0 10px 3px #eee inset;
  margin: 0 0.4% 15px;
}
@media (max-width: 1400px) {
  .hotqa_block .hotqa_list {
    width: 24%;
    margin: 0 0.4% 15px;
  }
}
@media screen and (max-width: 1399px) {
  .hotqa_block .hotqa_list {
    width: 32%;
    margin: 0 0.55% 15px;
  }
}
@media (max-width: 900px) {
  .hotqa_block .hotqa_list {
    width: 48%;
    margin: 0 0.8% 15px;
  }
}
@media screen and (max-width: 767px) {
  .hotqa_block .hotqa_list {
    width: 100%;
    margin: 0 0 15px 0;
  }
}
.hotqa_block .hotqa_list h2 {
  margin: 0;
  padding: 12px 15px;
  text-align: center;
  background-color: #005d98;
  color: #fff;
  font-size: 1.25em;
  font-weight: 400;
}
.hotqa_block .hotqa_list .more {
  text-align: center;
}
.hotqa_block .hotqa_list ul {
  margin: 10px 30px;
  padding: 0;
}
.hotqa_block .hotqa_list ul li {
  list-style: none;
}
.hotqa_block .hotqa_list ul li a {
  display: block;
  padding: 5px 5px 5px 15px;
  border-bottom: 1px solid #eee;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #535353;
}
.hotqa_block .hotqa_list ul li a:hover {
  color: #dd1f03;
}
.hotqa_block .hotqa_list ul li a:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 15px;
  background-color: #333;
}
.hotqa_block .hotqa {
  border: 1px solid #d3d3d3;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px 3px #eee inset;
  min-height: 280px;
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  .hotqa_block .hotqa {
    min-height: inherit;
  }
}
.hotqa_block .hotqa .question {
  margin-bottom: 15px;
  font-size: 1.25em;
  padding: 10px 15px 10px 60px;
  background-color: #b94b00;
  color: #fff;
  border-radius: 5px;
  position: relative;
}
.hotqa_block .hotqa .question:before {
  content: "Q：";
  font-size: 1.25em;
  position: absolute;
  left: 10px;
  top: 10px;
  font-weight: 800;
}
.hotqa_block .hotqa .answer {
  position: relative;
  padding: 0 0 0 60px;
  line-height: 1.7em;
}
.hotqa_block .hotqa .answer:before {
  content: "A：";
  font-size: 1.5em;
  position: absolute;
  left: 10px;
  top: 0px;
  font-weight: 800;
}
.hotqa_block .related_linksblock {
  border: 1px solid #d3d3d3;
  padding: 0px;
  border-radius: 5px;
  margin-bottom: 15px;
  box-shadow: 0 0 10px 3px #eee inset;
}
.hotqa_block .related_linksblock .linkstitle {
  font-size: 1.25em;
  text-align: center;
  background-color: #666;
  color: #fff;
  padding: 10px;
}
.hotqa_block .related_linksblock ul {
  margin: 10px 20px 20px;
  padding: 0;
}
.hotqa_block .related_linksblock ul li {
  list-style: none;
  position: relative;
  border-bottom: 1px solid #eee;
  padding: 5px 5px 5px 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.hotqa_block .related_linksblock ul li:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 15px;
  background-color: #333;
}
.hotqa_block .related_linksblock ul li span {
  flex: 0 0 auto;
  color: #999;
  padding: 0 0.3em;
}
.hotqa_block .related_linksblock ul li .valuedata {
  flex: 1 1 auto;
  text-align: left;
  display: none;
  word-break: break-all;
  background-color: #fef3d0;
  padding: 0.8em 1em;
  border-radius: 5px;
  margin-left: 0;
  margin-top: 0.3em;
}
.hotqa_block .related_linksblock ul li .valuedata ul {
  margin: 0;
  padding: 0;
  list-style: disc;
}
.hotqa_block .related_linksblock ul li .valuedata ul li {
  padding: 0.2em 0.3em 0.2em 1em;
  border-bottom: 0;
  margin-bottom: 0.5em;
}
.hotqa_block .related_linksblock ul li .valuedata ul li:before {
  content: "";
  border: 5px solid #666;
  border-color: transparent transparent transparent #666;
  position: absolute;
  left: 0;
  top: 0.6em;
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
}
.hotqa_block .related_linksblock ul li .valuedata span {
  padding: 0;
  color: #dc0122;
}
@media screen and (max-width: 767px) {
  .hotqa_block .related_linksblock ul li .valuedata {
    flex-basis: 100%;
    text-align: left;
  }
}
.hotqa_block .related_linksblock ul li a {
  flex: 0 0 auto;
  padding: 0;
  position: relative;
  line-height: 1.45em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hotqa_block .related_linksblock ul li a.directions_icon {
  padding: 0;
}
.hotqa_block .related_linksblock ul li a.directions_icon img {
  width: 22px;
  vertical-align: middle;
}
.hotqa_block .related_linksblock ul li a:hover, .hotqa_block .related_linksblock ul li a:focus {
  color: #dd1f03 !important;
}

.devicereservation_block {
  overflow: hidden;
  padding: 0;
  width: 90%;
  margin: 40px auto 50px;
  display: flex;
  flex-wrap: wrap;
}
.devicereservation_block h2 {
  flex: 1 1 auto;
  flex-basis: 100%;
  margin-bottom: 0.5em !important;
}
.devicereservation_block .choosebtn {
  flex: 1 1 auto;
  flex-basis: 100%;
  clear: both !important;
  display: block !important;
  float: none !important;
  margin: 0 0 1em 2px;
}

.device_list {
  flex: 0 0 auto;
  flex-basis: 24%;
  position: relative;
  margin: 0 0.5% 20px;
  background-color: #ffd058;
  border-radius: 5px;
  transition: 0.2s;
  padding: 20px;
  color: #000;
  box-sizing: border-box;
}
.device_list:hover, .device_list:focus {
  background-color: #f1ad00;
  box-shadow: 3px 2px 4px 3px #ccc;
  color: #000;
}
@media (max-width: 1500px) {
  .device_list {
    flex-basis: 32%;
    margin: 0 0.66% 20px;
  }
}
@media (max-width: 1100px) {
  .device_list {
    flex-basis: 48%;
    margin: 0 1% 20px;
  }
}
@media screen and (max-width: 767px) {
  .device_list {
    flex-basis: 100%;
    margin: 0 0 20px;
  }
}
.device_list a {
  display: block;
  overflow: hidden;
  color: #000;
  transition: 0.2s;
  height: 100%;
}
.device_list a:hover, .device_list a:focus {
  color: #000;
}
.device_list h3 {
  margin: 0 0 20px;
  font-size: 1.5em;
  padding: 0 0 10px;
  border-bottom: 1px solid #fff;
  color: #333;
}
.device_list .content {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
.device_list .content .images {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 0 20px 0 0;
  position: relative;
  border-radius: 50%;
}
.device_list .content .images img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 65%;
  max-height: 65%;
  margin: auto;
  opacity: 0.9;
}
.device_list .content ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.device_list .content ul li {
  list-style: none;
  margin: 0 0 5px;
  font-size: 1.063em;
  position: relative;
  padding: 0 0 0 10px;
}
.device_list .content ul li:before {
  content: "";
  border: 5px solid #333;
  border-color: transparent transparent transparent #333;
  position: absolute;
  left: 0;
  top: 6px;
}
.device_list .content .quantity {
  font-size: 1.125rem;
}
.device_list .content .quantity span {
  margin-left: 10px;
  letter-spacing: 0.4em;
}
.device_list .content .quantity span em {
  font-style: normal;
  font-size: 1.5rem;
  color: #a42829;
  font-weight: bolder;
}
.device_list button {
  width: 100%;
  border: none;
}
@media (max-width: 380px) {
  .device_list .content .images {
    width: 60px;
    height: 60px;
  }
  .device_list .content .images img {
    max-width: 70%;
    max-height: 70%;
  }
}

.devicefiltering_block {
  flex: 1 1 auto;
  flex-basis: 100%;
  margin: 0 0 1.5em 0;
  display: flex;
  font-size: 1.125em;
}
@media screen and (max-width: 767px) {
  .devicefiltering_block {
    flex-wrap: wrap;
  }
}
.devicefiltering_block .filter_group {
  flex: 1 1 auto;
  border: 1px solid #ddd;
  padding: 10px;
  margin-right: 0;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  background-color: #eee;
}
@media screen and (max-width: 767px) {
  .devicefiltering_block .filter_group {
    flex-basis: 100%;
    margin-bottom: 0.5em;
  }
}
.devicefiltering_block .filter_group .title {
  flex: 0 0 auto;
  flex-basis: 60px;
  font-weight: bolder;
  margin-left: 0.5em;
  margin-top: 0.2em;
}
.devicefiltering_block .filter_group .filtercontent {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  line-height: 1.7em;
  height: auto;
  transition: 0.5s;
}
.devicefiltering_block .filter_group .filtercontent.contentclose {
  height: 31px;
  overflow: hidden;
}
.devicefiltering_block .filter_group .filtercontent label {
  margin: 0 0.5em;
}
.devicefiltering_block .filter_group .filterbtn {
  flex: 0 0 auto;
  flex-basis: 60px;
  display: none;
}
.devicefiltering_block .filter_group .filterbtn.hasbtn {
  display: block;
}
.devicefiltering_block .filter_group .filterbtn a {
  display: block;
  text-align: center;
  font-size: 0;
  position: relative;
  border-radius: 5px;
}
.devicefiltering_block .filter_group .filterbtn a:hover, .devicefiltering_block .filter_group .filterbtn a:focus {
  background-color: #ccc;
  box-shadow: none !important;
}
.devicefiltering_block .filter_group .filterbtn a:before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid #666;
  border-top: none;
  border-left: none;
  position: absolute;
  top: 3px;
  right: 25px;
  transform: rotate(45deg);
  transition: 0.2s;
}
.devicefiltering_block .filter_group .filterbtn a.open:before {
  top: 10px;
  transform: rotate(-135deg);
}
.devicefiltering_block .filtersearch {
  flex: 0 0 auto;
  flex-basis: 200px;
  margin-left: 10px;
  padding: 0;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  transition: 0.5s;
}
@media screen and (max-width: 767px) {
  .devicefiltering_block .filtersearch {
    flex-basis: 100%;
    flex: 1 1 auto;
    margin-left: 0;
  }
}
.devicefiltering_block .filtersearch.clicksearch {
  flex-basis: 390px;
}
.devicefiltering_block .filtersearch input[type=text] {
  border-radius: 5px 0 0 5px;
  margin-bottom: 0;
  height: 3em;
}
.devicefiltering_block .filtersearch button.searchbtn {
  background-color: #005d98;
  font-size: 0;
  border-radius: 0 5px 5px 0;
  width: 70px;
  background-image: url(../images/icon/icon_search2.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px;
  height: 53px;
  border: none;
}

.select_discussionroom {
  flex: 1 1 auto;
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  margin: 10px 0;
  font-size: 1.125em;
}
.select_discussionroom .discussionroom_title {
  flex: 0 0 auto;
  font-weight: bolder;
  background-color: #ddd;
  color: #333;
  padding: 0.5em 1em;
  border-radius: 50px;
}
.select_discussionroom .discussionroom_content {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  line-height: 1.7em;
  height: auto;
  transition: 0.5s;
  padding-top: 7px;
}
.select_discussionroom .discussionroom_content label {
  margin: 0 0.5em;
}

.time_overview_block {
  flex: 1 1 auto;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  margin: 10px 0;
}
@media (max-width: 480px) {
  .time_overview_block {
    flex-wrap: wrap;
  }
}
.time_overview_block .todaydate {
  font-size: 1.5em;
  color: #dc0122;
  font-weight: bolder;
  margin-right: 0.5em;
  white-space: nowrap;
}
.time_overview_block .calendar_options {
  margin: 0 0.5em;
}
.time_overview_block .calendar_options a {
  padding: 0;
  display: block;
}
.time_overview_block .calendar_options a.btn {
  padding: 0.4em 0.8em !important;
  min-width: 4em !important;
  border-radius: 8px;
}
.time_overview_block .calendar_options img {
  width: 20px;
  height: 20px;
}
.time_overview_block .datebutton {
  display: flex;
  align-items: center;
}
.time_overview_block .datebutton .btn {
  min-width: 3.5em !important;
}
.time_overview_block .datebutton .prev {
  border-radius: 8px 0px 0px 8px;
  padding: 0.5em 0.4em !important;
  position: relative;
  text-indent: -99999px;
  background-image: url("../images/icon/icon_arrow_left.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
}
.time_overview_block .datebutton .today {
  border-radius: 0;
  padding: 0.5em 0.2em !important;
}
.time_overview_block .datebutton .next {
  border-radius: 0 8px 8px 0;
  padding: 0.5em 0.4em !important;
  position: relative;
  text-indent: -99999px;
  background-image: url("../images/icon/icon_arrow_right.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
}

.viewdata_block {
  flex: 1 1 auto;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
@media screen and (max-width: 767px) {
  .viewdata_block {
    flex-wrap: wrap;
  }
}
.viewdata_block .viewmode_group {
  flex: 1 1 auto;
  display: flex;
}
@media screen and (max-width: 767px) {
  .viewdata_block .viewmode_group {
    margin-bottom: 1em;
  }
}
.viewdata_block .viewmode_group .viewmode_parallel a,
.viewdata_block .viewmode_group .viewmode_vertical a {
  display: block;
  padding: 5px 10px 5px 35px;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
  color: #333;
  background-color: #fff;
}
.viewdata_block .viewmode_group .viewmode_parallel a:hover, .viewdata_block .viewmode_group .viewmode_parallel a:focus, .viewdata_block .viewmode_group .viewmode_parallel a.active,
.viewdata_block .viewmode_group .viewmode_vertical a:hover,
.viewdata_block .viewmode_group .viewmode_vertical a:focus,
.viewdata_block .viewmode_group .viewmode_vertical a.active {
  border: 1px solid #005d98;
  background-color: #005d98;
  color: #fff;
}
.viewdata_block .viewmode_group .viewmode_parallel {
  margin-right: 1em;
}
.viewdata_block .viewmode_group .viewmode_parallel a:before {
  content: "";
  width: 15px;
  height: 2px;
  background-color: #666;
  position: absolute;
  top: calc(50% - 1px);
  left: 10px;
  box-shadow: 0 -5px 0 #666, 0 5px 0 #666;
}
.viewdata_block .viewmode_group .viewmode_parallel a:hover:before, .viewdata_block .viewmode_group .viewmode_parallel a:focus:before, .viewdata_block .viewmode_group .viewmode_parallel a.active:before {
  background-color: #fff;
  box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff;
}
.viewdata_block .viewmode_group .viewmode_vertical a:before {
  content: "";
  width: 2px;
  height: 15px;
  background-color: #666;
  position: absolute;
  top: calc(50% - 7.5px);
  left: 15px;
  box-shadow: -5px 0px 0 #666, 5px 0 0 #666;
}
.viewdata_block .viewmode_group .viewmode_vertical a:hover:before, .viewdata_block .viewmode_group .viewmode_vertical a:focus:before, .viewdata_block .viewmode_group .viewmode_vertical a.active:before {
  background-color: #fff;
  box-shadow: -5px 0px 0 #fff, 5px 0 0 #fff;
}
.viewdata_block .viewcolor_group {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 767px) {
  .viewdata_block .viewcolor_group {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
.viewdata_block .viewcolor_group .viewcolor_gray {
  margin-left: 1em;
  padding: 0 0 0 20px;
  position: relative;
}
.viewdata_block .viewcolor_group .viewcolor_gray:before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #ccc;
  position: absolute;
  left: 0;
  top: 4px;
}
.viewdata_block .viewcolor_group .viewcolor_orange {
  margin-left: 1em;
  padding: 0 0 0 20px;
  position: relative;
}
.viewdata_block .viewcolor_group .viewcolor_orange:before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #b94b00;
  position: absolute;
  left: 0;
  top: 4px;
}
.viewdata_block .viewcolor_group .viewcolor_green {
  margin-left: 1em;
  padding: 0 0 0 20px;
  position: relative;
}
.viewdata_block .viewcolor_group .viewcolor_green:before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #107859;
  position: absolute;
  left: 0;
  top: 4px;
}
.viewdata_block .viewcolor_group .viewcolor_blue {
  margin-left: 1em;
  padding: 0 0 0 20px;
  position: relative;
}
.viewdata_block .viewcolor_group .viewcolor_blue:before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #3e78c0;
  position: absolute;
  left: 0;
  top: 4px;
}

.discussionroom_timeblock {
  flex: 1 1 auto;
  flex-basis: 100%;
  margin: 10px 0 20px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 30px 50px 20px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .discussionroom_timeblock {
    padding: 20px 20px 20px;
  }
}
.discussionroom_timeblock:before {
  content: "";
  border: 30px solid #b94b00;
  border-color: #b94b00 transparent transparent #b94b00;
  position: absolute;
  top: 0;
  left: 0;
}
.discussionroom_timeblock .title {
  font-size: 1.25em;
  margin: 10px 30px 20px 0;
  color: #b94b00;
  font-weight: bolder;
}
@media (max-width: 600px) {
  .discussionroom_timeblock .title {
    margin: 10px 30px 20px;
  }
}
.discussionroom_timeblock .timelinegroup {
  display: flex;
  margin-bottom: 2em;
}
.discussionroom_timeblock .timelinegroup .timeline_hour {
  flex: 1 1 auto;
  width: 3.8461538462%;
  margin-left: -1px;
}
.discussionroom_timeblock .timelinegroup .timeline_hour:last-of-type a {
  border-radius: 0 50px 50px 0;
}
.discussionroom_timeblock .timelinegroup .timeline_hour:last-of-type a span {
  left: auto;
  right: -10px;
}
.discussionroom_timeblock .timelinegroup .timeline_hour:first-of-type a {
  border-radius: 50px 0 0 50px;
}
.discussionroom_timeblock .timelinegroup .timeline_hour.past_reserve a {
  background-color: #ddd;
  cursor: not-allowed;
}
.discussionroom_timeblock .timelinegroup .timeline_hour.past_reserve a:hover {
  background-color: #ddd;
}
.discussionroom_timeblock .timelinegroup .timeline_hour.yorbooked a {
  background-color: #b94b00;
  cursor: not-allowed;
}
.discussionroom_timeblock .timelinegroup .timeline_hour.yorbooked a:hover {
  background-color: #b94b00;
}
.discussionroom_timeblock .timelinegroup .timeline_hour.visited a {
  background-color: #107859;
}
.discussionroom_timeblock .timelinegroup .timeline_hour.visited a:hover {
  background-color: #107859;
}
.discussionroom_timeblock .timelinegroup .timeline_hour a {
  display: block;
  border: 1px solid #ccc;
  height: 28px;
  background-color: #fff;
  position: relative;
  transition: 0.2s;
}
.discussionroom_timeblock .timelinegroup .timeline_hour a span {
  position: absolute;
  top: 30px;
  left: -10px;
  font-size: 0.938em;
  width: 20px;
  text-align: center;
}
.discussionroom_timeblock .timetablegroup {
  margin: 0;
  margin-bottom: 2em;
  width: 100%;
  overflow-x: scroll;
}
.discussionroom_timeblock .timetablegroup table {
  table-layout: fixed;
  border: 1px solid #ddd;
  position: relative;
}
.discussionroom_timeblock .timetablegroup table thead tr th {
  position: sticky;
  top: 0; /* 列首永遠固定於上 */
}
.discussionroom_timeblock .timetablegroup table td:first-child,
.discussionroom_timeblock .timetablegroup table th:first-child {
  position: sticky;
  left: 0; /* 首行永遠固定於左 */
  z-index: 1;
  background-color: rgba(255, 182, 193, 0.8);
}
.discussionroom_timeblock .timetablegroup table th[scope=col] {
  border: 1px solid #ddd;
  background-color: #666;
  color: #fff;
  padding: 0.8em 0.5em;
  font-size: 1.125em;
  width: 120px;
}
.discussionroom_timeblock .timetablegroup table th[scope=col].today {
  background-color: #3e78c0;
}
.discussionroom_timeblock .timetablegroup table th[scope=row] {
  background-color: #fff8e4;
  color: #333;
  padding: 0.8em 0.5em;
  font-size: 1em;
  width: 120px;
}
.discussionroom_timeblock .timetablegroup table td {
  border: 1px solid #ccc;
  padding: 0;
  position: relative;
  width: 120px;
}
.discussionroom_timeblock .timetablegroup table td a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transition: 0.2s;
}
.discussionroom_timeblock .timetablegroup table td a.past_reserve {
  background-color: #ddd;
  cursor: not-allowed;
}
.discussionroom_timeblock .timetablegroup table td a.past_reserve:hover {
  background-color: #ddd;
}
.discussionroom_timeblock .timetablegroup table td a.yorbooked {
  background-color: #b94b00;
  cursor: not-allowed;
}
.discussionroom_timeblock .timetablegroup table td a.yorbooked:hover {
  background-color: #b94b00;
}
.discussionroom_timeblock .timetablegroup table td a.visited {
  background-color: #107859;
}
.discussionroom_timeblock .timetablegroup table td a.visited:hover {
  background-color: #107859;
}
.discussionroom_timeblock .timetablegroup table tr th,
.discussionroom_timeblock .timetablegroup table tr td {
  border-top: none;
}
.discussionroom_timeblock .timetablegroup table tr th:first-child,
.discussionroom_timeblock .timetablegroup table tr td:first-child {
  border-left: none;
}
.discussionroom_timeblock .timetablegroup table tr th:last-child,
.discussionroom_timeblock .timetablegroup table tr td:last-child {
  border-right: none;
}

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

.reservation_block {
  width: 90%;
  margin: 40px auto 50px;
}
.reservation_block h2 {
  margin-bottom: 1em !important;
}
.reservation_block .reservationform {
  margin-bottom: 40px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 20px 50px 20px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
}
.reservation_block .reservationform:before {
  content: "";
  border: 30px solid #b94b00;
  border-color: #b94b00 transparent transparent #b94b00;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .reservation_block .reservationform {
    padding: 20px 20px 30px;
  }
}
.reservation_block .reservationform .form_title {
  color: #000;
  font-size: 1.125em;
}
.reservation_block .reservationform .to {
  float: left;
  margin: 5px 5px 0;
}
@media (max-width: 615px) {
  .reservation_block .reservationform .to {
    display: none;
  }
}
.reservation_block .reservationform .select_date {
  width: 45%;
}
@media screen and (max-width: 767px) {
  .reservation_block .reservationform .select_date {
    width: 46%;
  }
}
@media (max-width: 615px) {
  .reservation_block .reservationform .select_date {
    width: 98%;
  }
}
.reservation_block .reservationform .word_red {
  font-size: 1.125em;
}
.reservation_block .reservationform_time {
  margin-bottom: 40px;
  padding: 0px;
  position: relative;
  box-sizing: border-box;
}
.reservation_block .reservationform_time .form_content {
  width: 100%;
  float: none;
  padding: 0;
}
.reservation_block .reservationform_time label {
  width: auto;
}
.reservation_block .reservationform_time .form_title {
  color: #000;
  font-size: 1.125em;
  float: left;
}
@media screen and (max-width: 575px) {
  .reservation_block .reservationform_time .form_title {
    float: none;
  }
}
.reservation_block .reservationform_time .to {
  float: left;
  margin: 5px 5px 0;
}
@media screen and (max-width: 575px) {
  .reservation_block .reservationform_time .to {
    display: none;
  }
}
.reservation_block .reservationform_time .select_date {
  width: 20%;
}
@media screen and (max-width: 991px) {
  .reservation_block .reservationform_time .select_date {
    width: 50%;
  }
}
@media screen and (max-width: 575px) {
  .reservation_block .reservationform_time .select_date {
    float: none;
    width: 99%;
  }
}
.reservation_block .reservationform_time .select_time {
  width: 8%;
  float: left;
}
@media screen and (max-width: 991px) {
  .reservation_block .reservationform_time .select_time {
    width: 15%;
  }
}
@media screen and (max-width: 575px) {
  .reservation_block .reservationform_time .select_time {
    float: none;
    width: 100%;
  }
}
@media screen and (max-width: 991px) {
  .reservation_block .reservationform_time .content_block {
    display: block;
    width: 100%;
    overflow: hidden;
  }
}
.reservation_block .btn_grp {
  padding-bottom: 0;
  margin-top: 10px;
}
.reservation_block .device_explain {
  padding: 25px 35px;
  background-color: #fed857;
  border-radius: 5px;
  margin: 20px 0 0;
}
.reservation_block .device_explain h3 {
  font-size: 1.5em;
}
.reservation_block .device_explain p {
  font-size: 1.125em;
  line-height: 1.7em;
}
.reservation_block .sortrecommend {
  margin: 30px 0 20px;
}
@media screen and (max-width: 767px) {
  .reservation_block .sortrecommend {
    width: 80%;
    margin: 30px auto;
  }
}
@media (max-width: 480px) {
  .reservation_block .sortrecommend {
    width: 75%;
  }
}

.reservation_explain {
  flex: 1 1 auto;
  flex-basis: 100%;
  text-align: center;
  padding: 25px;
  background-color: #fed857;
  border-radius: 4px;
  margin: 20px 0;
  font-size: 1.25em;
  line-height: 1.5em;
}

.reservetime_block {
  clear: both;
  display: flex;
  margin-bottom: 2em;
  width: 100%;
}
@media (max-width: 900px) {
  .reservetime_block {
    flex-wrap: wrap;
  }
}
.reservetime_block .reservetime_group {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-right: 2%;
}
@media (max-width: 900px) {
  .reservetime_block .reservetime_group {
    flex-basis: 48%;
    justify-content: space-between;
    margin-right: 0;
    margin-bottom: 1em;
  }
  .reservetime_block .reservetime_group:nth-of-type(2n-1) {
    margin-right: 4%;
  }
}
@media screen and (max-width: 767px) {
  .reservetime_block .reservetime_group {
    flex-basis: 100%;
  }
  .reservetime_block .reservetime_group:nth-of-type(2n-1) {
    margin-right: 0;
  }
}
.reservetime_block .reservetime_group .title {
  flex: 1 1 auto;
  flex-basis: 100%;
  position: relative;
  padding-left: 15px;
}
.reservetime_block .reservetime_group .title:before {
  content: "";
  border: 5px solid #b94b00;
  border-color: transparent transparent transparent #b94b00;
  position: absolute;
  left: 0;
  top: 6px;
}
.reservetime_block .reservetime_group .content {
  flex: 1 1 auto;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  padding-left: 15px;
}
.reservetime_block .reservetime_group .content .timedata {
  flex: 1 1 auto;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
}
.reservetime_block .reservetime_group .content .timedata input {
  border: none;
  margin-right: 5px;
  padding: 0.2em 0em;
}
.reservetime_block .reservetime_group .content .timedata img {
  width: 20px;
  height: 20px;
}
.reservetime_block .reservetime_group .content .timedata select {
  border: none !important;
  height: 1.9em;
  line-height: 1.9em;
}
.reservetime_block .reservetime_group .content .to {
  margin: 0 1em;
}
.reservetime_block .btn_grp {
  flex: 0 0 auto;
  flex-basis: 80px;
}
@media screen and (max-width: 767px) {
  .reservetime_block .btn_grp {
    flex-basis: 100%;
  }
}

.currently_item {
  flex: 1 1 auto;
  flex-basis: 100%;
  font-size: 1.375em;
  margin-bottom: 0.8em;
  padding: 0 0 0 20px;
  position: relative;
  font-weight: bolder;
}
.currently_item:before {
  content: "";
  border: 8px solid #666;
  border-color: transparent transparent transparent #666;
  position: absolute;
  left: 0;
  top: 3px;
}
.currently_item span {
  color: #dc0122;
}

.itemtitle {
  flex: 1 1 auto;
  flex-basis: 100%;
  font-size: 1.25em;
  margin: 1em 0;
  padding: 0;
  position: relative;
  font-weight: bolder;
  display: block;
}
.itemtitle:after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #ddd;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
}
.itemtitle span {
  position: relative;
  padding: 0 20px 0 20px;
  color: #333;
  background-color: #fff;
  z-index: 3;
}
.itemtitle span:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #dc0122;
  position: absolute;
  left: 0;
  top: 7px;
  z-index: 2;
}

.itemselect_block {
  flex: 1 1 auto;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.itemselect_block .itemselect_group {
  flex: 0 0 auto;
  flex-basis: 49%;
  background-color: #ffd058;
  color: #000;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 1em;
  box-sizing: border-box;
  margin-bottom: 1em;
}
@media (max-width: 900px) {
  .itemselect_block .itemselect_group {
    flex-basis: 100%;
  }
}
@media (max-width: 480px) {
  .itemselect_block .itemselect_group {
    flex-wrap: wrap;
  }
}
.itemselect_block .itemselect_group .image {
  flex: 0 0 auto;
  flex-basis: 70px;
  border-right: 1px solid #fff;
}
.itemselect_block .itemselect_group .image img {
  width: 50px;
  margin: 0 auto;
}
.itemselect_block .itemselect_group .spacecontent {
  flex: 1 1 auto;
  font-size: 1.25em;
  padding: 0 10px;
  box-sizing: border-box;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .itemselect_block .itemselect_group .spacecontent {
    flex-basis: calc(100% - 90px);
  }
}
.itemselect_block .itemselect_group button {
  flex: 0 0 auto;
  flex-basis: 100px;
  border: none;
  padding: 0.5em 0 !important;
}
@media (max-width: 480px) {
  .itemselect_block .itemselect_group button {
    flex: 1 1 auto;
    flex-basis: 100%;
    margin-top: 0.8em;
  }
}

.appointment_record {
  position: fixed;
  right: 50%;
  top: 45%;
  transform: translateX(700px);
  width: 2em;
  z-index: 99;
}
@media (max-width: 1400px) {
  .appointment_record {
    right: 0;
    transform: translateX(0);
  }
}
.appointment_record a {
  display: block;
  padding: 1em 0.5em;
  background-color: #dc0122;
  color: #fff;
  border-radius: 4px 0 0 4px;
}
.appointment_record a:hover, .appointment_record a:focus {
  color: #fff;
  background-color: #c3011e;
}

.googlecalendar {
  text-align: center;
}
.googlecalendar img {
  width: 45%;
  margin: 0 auto;
}

.meetsblock {
  width: 90%;
  margin: 20px auto 60px;
  overflow: hidden;
}
.meetsblock .meetstitle {
  font-size: 1.375em;
  margin-bottom: 0.8em;
  padding: 0 0 0 20px;
  position: relative;
  font-weight: bolder;
}
.meetsblock .meetstitle:before {
  content: "";
  border: 8px solid #666;
  border-color: transparent transparent transparent #666;
  position: absolute;
  left: 0;
  top: 3px;
}
.meetsblock .meets_box {
  width: 32%;
  line-height: 180px;
  text-align: center;
  float: left;
  margin: 0px 0.66% 10px;
  height: 180px;
  position: relative;
  box-sizing: border-box;
}
@media screen and (max-width: 1399px) {
  .meetsblock .meets_box {
    width: 48%;
    margin: 0px 1% 10px;
  }
}
@media screen and (max-width: 767px) {
  .meetsblock .meets_box {
    width: 100%;
    margin: 0px 0 10px;
  }
}
.meetsblock .meets_box a {
  border-radius: 5px;
  height: 170px;
  transition: 0.2s;
  background-color: #ffd058;
  color: #333;
  font-weight: 500;
  display: block;
}
.meetsblock .meets_box a:hover, .meetsblock .meets_box a:focus {
  box-shadow: 3px 2px 4px 3px #ccc;
  color: #333;
  background-color: #f1ad00;
  border-radius: 10px;
}
.meetsblock .meets_box a .box {
  display: inline-block;
  height: auto;
  line-height: 1.5em;
  font-size: 2em;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  box-sizing: border-box;
}
.meetsblock .meets_box a .box .images {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.8);
  display: inline-block;
  margin: 0px 20px 0 0;
  position: relative;
  border-radius: 50%;
  vertical-align: middle;
}
@media screen and (max-width: 575px) {
  .meetsblock .meets_box a .box .images {
    margin: 0;
  }
}
.meetsblock .meets_box a .box .images img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 70%;
  max-height: 70%;
  margin: auto;
  opacity: 0.7;
}

.device_borrow {
  margin: 30px 0 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 20px 50px 20px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.device_borrow:before {
  content: "";
  border: 30px solid #b94b00;
  border-color: #b94b00 transparent transparent #b94b00;
  position: absolute;
  top: 0;
  left: 0;
}
.device_borrow h3 {
  margin: 0 0 30px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.device_borrow .title {
  font-size: 2.125em;
  float: left;
  margin: 0px 30px 20px 0;
  padding: 0;
  color: #b94b00;
  width: 25%;
  line-height: 1.3em;
}
@media screen and (max-width: 767px) {
  .device_borrow .title {
    width: auto;
    float: none;
  }
}
.device_borrow .content {
  overflow: hidden;
}
.device_borrow .content ul {
  margin: 0;
  padding: 0;
}
.device_borrow .content ul li {
  list-style: none;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}
.device_borrow .content ul li:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  left: 0;
  top: 8px;
}
.device_borrow .remarks {
  clear: both;
  margin: 10px 0;
}

.device_borrow_time {
  margin: 30px 0 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 20px 50px 20px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .device_borrow_time {
    padding: 20px 20px 20px;
  }
}
.device_borrow_time:before {
  content: "";
  border: 30px solid #b94b00;
  border-color: #b94b00 transparent transparent #b94b00;
  position: absolute;
  top: 0;
  left: 0;
}
.device_borrow_time h3 {
  margin: 0 0 30px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 575px) {
  .device_borrow_time h3 {
    padding: 10px 20px;
  }
}
.device_borrow_time .title {
  font-size: 2.125em;
  margin: 0px 30px 20px 0;
  padding: 0;
  color: #b94b00;
  line-height: 1.3em;
}
.device_borrow_time .content {
  overflow: hidden;
}
.device_borrow_time .content ul {
  margin: 0;
  padding: 0;
}
.device_borrow_time .content ul li {
  list-style: none;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.device_borrow_time .content ul li:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  left: 0;
  top: 8px;
}
.device_borrow_time .remarks {
  clear: both;
  margin: 10px 0;
}

.reader_advice {
  margin: 0px 30px 70px;
}
.reader_advice .choosebtn {
  margin: 0 0 10px;
}
.reader_advice .reaction,
.reader_advice .reply,
.reader_advice .supplement {
  margin-top: 30px;
}
.reader_advice .reaction h2,
.reader_advice .reply h2,
.reader_advice .supplement h2 {
  margin: 0;
  padding: 8px 20px;
  font-size: 1.25em;
  color: #fff;
  background-color: #3e78c0;
  float: left;
  text-align: center;
  border-radius: 5px 5px 0 0;
  width: 20%;
  box-sizing: border-box;
}
@media screen and (max-width: 1399px) {
  .reader_advice .reaction h2,
  .reader_advice .reply h2,
  .reader_advice .supplement h2 {
    width: 25%;
  }
}
@media screen and (max-width: 575px) {
  .reader_advice .reaction h2,
  .reader_advice .reply h2,
  .reader_advice .supplement h2 {
    width: 100%;
    float: none;
  }
}
.reader_advice .reaction table,
.reader_advice .reply table,
.reader_advice .supplement table {
  clear: both;
  border-top: 4px solid #3e78c0;
}
.reader_advice .reaction table th,
.reader_advice .reply table th,
.reader_advice .supplement table th {
  width: 20%;
  border: 1px solid #ccc;
}
.reader_advice .reaction table td,
.reader_advice .reply table td,
.reader_advice .supplement table td {
  border: 1px solid #ccc;
}
@media screen and (max-width: 575px) {
  .reader_advice .reaction table th,
  .reader_advice .reaction table td,
  .reader_advice .reply table th,
  .reader_advice .reply table td,
  .reader_advice .supplement table th,
  .reader_advice .supplement table td {
    display: block;
    width: auto;
    text-align: left;
  }
}
.reader_advice .reply h2 {
  background-color: #dc0122;
}
.reader_advice .reply table {
  border-top: 4px solid #dc0122;
}
.reader_advice .supplement h2 {
  background-color: #107859;
}
.reader_advice .supplement table {
  border-color: #76ae73;
}
.reader_advice .btn_grp {
  text-align: left;
  margin-left: 0;
}

.timelineblock {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
}
.timelineblock .timeline {
  opacity: 1;
  max-width: 99%;
  margin: 10px auto 30px;
  background: #fff;
  width: 100%;
  height: 22px;
  border-radius: 35px;
  border: 1px solid #a9a9a9;
}
.timelineblock .availability {
  position: relative;
  float: left;
  height: 22px;
  transition: all 1s ease-in-out;
}
.timelineblock .availability:after {
  content: "";
  width: 1px;
  height: 22px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #d6d6d6;
}
.timelineblock .availability:first-child {
  border-radius: 35px 0 0 35px;
}
.timelineblock .availability:last-child {
  border-right: none;
  border-radius: 0 35px 35px 0;
}
.timelineblock .availability:last-child:after {
  width: 0;
}
.timelineblock .availability.disabled {
  background-color: #d6d6d6;
}
.timelineblock .availability-hours-label {
  margin-top: 25px;
  position: absolute;
  font-size: 0.688em;
  color: #5a5a5a;
  cursor: default;
  padding: 0 0 0 6px;
}
.timelineblock .availability-hours-label:first-child, .timelineblock .availability-hours-label:last-child {
  padding: 0;
}
.timelineblock .selectedTime {
  background-color: #41996d;
}
.timelineblock .selectedTimeLabel {
  color: #41996d;
  font-weight: 500;
}

.timelineTable table {
  border-spacing: 5px;
  border-collapse: inherit;
}
.timelineTable table td {
  padding: 0;
  height: 60px;
  position: relative;
  width: 14.28%;
}
.timelineTable table td a {
  display: block;
  text-decoration: none;
  color: #000 !important;
  width: 100%;
  position: relative;
  text-align: center;
}
.timelineTable table td a:hover {
  text-decoration: underline;
}
.timelineTable table td a span {
  line-height: 60px;
}
.timelineTable table td a.disabled {
  color: #dedede !important;
}
.timelineTable table td a.selectedDate {
  background-color: #ffad5c;
  height: 60px;
}
.timelineTable table td a.halfday_Am {
  height: 30px;
  position: absolute;
  top: 0;
}
.timelineTable table td a.halfday_Am span {
  line-height: 30px;
}
.timelineTable table td a.halfday_Pm {
  height: 30px;
  position: absolute;
  bottom: 0;
}
.timelineTable table td a.halfday_Pm span {
  line-height: 30px;
}

.no_result {
  padding: 25px;
}
.no_result .explain {
  padding: 20px 25px;
  background-color: #c41e06;
  border-radius: 4px;
  color: #fff;
  font-size: 1.125em;
}
.no_result .explain span {
  font-size: 1.25em;
  color: #f7e091;
  padding: 0 20px;
}
.no_result .related_words {
  padding: 20px 0 30px;
  border-bottom: 1px solid #d3d3d3;
}
.no_result .related_words h2 {
  font-size: 1.25em;
  margin: 20px 0 30px;
  color: #005d98;
}
.no_result .related_words ul {
  margin: 0;
  padding: 0;
}
.no_result .related_words ul li {
  display: inline-block;
  margin: 0 7px 7px 0;
  padding: 0;
  list-style: none;
}
.no_result .related_words ul li a {
  display: block;
  padding: 10px 20px;
  background-color: #eee;
  border-radius: 4px;
}
.no_result .otherbtn {
  clear: both;
  float: none;
  margin: 30px 0;
}
.no_result .otherbtn ul {
  margin: 0;
  padding: 0;
}
.no_result .otherbtn ul li {
  list-style: none;
  display: inline-block;
  margin: 0 5px 0 0;
}
.no_result .otherbtn ul li a {
  padding: 10px 15px !important;
}

.lp_content {
  width: 90%;
  margin: 40px auto 50px;
  box-sizing: border-box;
}
.lp_content .listconten {
  margin-bottom: 30px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 50px 20px 20px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.lp_content p {
  margin: 10px 0;
  line-height: 1.8em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.lp_content .list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.lp_content .list li {
  border-bottom: 1px solid #ccc;
  padding: 0px 0 20px 30px;
  margin-bottom: 30px;
  position: relative;
}
.lp_content .list li:after {
  content: "";
  border: 10px solid #dc0122;
  border-color: transparent transparent transparent #dc0122;
  position: absolute;
  left: 5px;
  top: 2px;
}
.lp_content .list li a {
  font-size: 1.25em;
  color: #333;
  font-weight: 600;
}
.lp_content .list li a:hover, .lp_content .list li a:focus {
  color: #dc0122;
  text-decoration: underline;
}
.lp_content .publish_info {
  margin: 10px 0 !important;
  padding: 0;
  text-align: left;
}
.lp_content .publish_info li {
  display: inline-block;
  margin: 0 20px 0 0;
  position: relative;
  border-bottom: none;
  padding: 0;
}
.lp_content .publish_info li:before {
  content: "";
  width: 1px;
  height: 15px;
  background-color: #333;
  position: absolute;
  right: -13px;
  top: 5px;
  transform: skewX(-30deg);
}
.lp_content .publish_info li:after {
  display: none;
}
.lp_content .publish_info li:first-child:before {
  display: none;
}

.image_titlepage,
.image_titlepage2 {
  margin-bottom: 3px;
  text-align: left;
  height: 150px;
  background-color: #f3d394;
  color: #333;
  padding: 5px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.image_titlepage:before,
.image_titlepage2:before {
  content: "";
  width: 100%;
  right: 0;
  left: 0;
  bottom: -20px;
  height: 85px;
  position: absolute;
  background-color: #333;
  transform: skewY(-10deg);
  z-index: 1;
}
.image_titlepage .booktitle,
.image_titlepage2 .booktitle {
  font-size: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 4.5em;
  position: relative;
  z-index: 3;
}
.image_titlepage .author,
.image_titlepage2 .author {
  font-size: 0.813em;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff;
  padding: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 4em;
  box-sizing: border-box;
  z-index: 2;
}

.image_titlepage2 {
  background-color: #296360;
  color: #fff;
  overflow: hidden;
}
.image_titlepage2:before {
  background-color: #367e7b;
}

.filter_data_block {
  padding: 6px 10px 3px;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1em;
}
@media (max-width: 480px) {
  .filter_data_block {
    flex-wrap: wrap;
  }
}
.filter_data_block .title {
  flex: none;
  font-weight: bolder;
  color: #005d98;
}
@media (max-width: 480px) {
  .filter_data_block .title {
    flex-basis: 100%;
    margin-bottom: 5px;
  }
}
.filter_data_block ul {
  flex: auto;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
@media (max-width: 480px) {
  .filter_data_block ul {
    flex-basis: 100%;
  }
}
.filter_data_block ul li {
  display: inline-block;
  margin-right: 5px;
  min-width: 50px;
}
@media (max-width: 480px) {
  .filter_data_block ul li {
    margin-bottom: 5px;
  }
}
.filter_data_block ul li a {
  display: block;
  padding: 25px 5px 3px 5px;
  background-color: #eee;
  border: 1px solid #ddd;
  border-radius: 4px;
  line-height: 1em;
  transition: 0.5s;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.filter_data_block ul li a:hover {
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.filter_data_block ul li a span {
  font-size: 0;
  line-height: 1em;
}
.filter_data_block ul li a em {
  font-style: normal;
  font-size: 0.75em;
  color: #333;
  padding: 0 5px;
  border-radius: 4px;
  width: auto;
  background-color: #fff;
  margin-top: -12px;
  display: block;
  text-align: center;
}
.filter_data_block ul li a.all {
  background-image: url("../images/filter_icon01.svg");
  background-repeat: no-repeat;
  background-position: center 5px;
  background-size: 18px;
}
.filter_data_block ul li a.book {
  background-image: url("../images/filter_icon02.svg");
  background-repeat: no-repeat;
  background-position: center 6px;
  background-size: 20px;
}
.filter_data_block ul li a.periodicals {
  background-image: url("../images/filter_icon03.svg");
  background-repeat: no-repeat;
  background-position: center 5px;
  background-size: 17px;
}
.filter_data_block ul li a.media {
  background-image: url("../images/filter_icon04.svg");
  background-repeat: no-repeat;
  background-position: center 5px;
  background-size: 20px;
}
.filter_data_block ul li a.ebook {
  background-image: url("../images/filter_icon05.svg");
  background-repeat: no-repeat;
  background-position: center 5px;
  background-size: 20px;
}

.send_illustrate_block {
  padding-bottom: 60px;
}

.send_illustrate_group {
  margin: 40px 30px;
}
.send_illustrate_group .content ol {
  margin: 30px 0px 30px 30px;
  padding: 0;
}
.send_illustrate_group .content ol li {
  margin-bottom: 10px;
}

.send_block_title {
  padding: 10px 20px;
  background-color: #b94b00;
  color: #fff;
  margin-bottom: 20px;
  font-size: 1.125em;
}

.delivery_method_block {
  margin: 0 30px 30px;
}
.delivery_method_block .payment_method {
  display: flex;
}
@media (max-width: 992px) {
  .delivery_method_block .payment_method {
    flex-wrap: wrap;
  }
}
.delivery_method_block .payment_method a {
  flex: auto;
  text-align: center;
}
@media (max-width: 992px) {
  .delivery_method_block .payment_method a {
    flex: none;
    flex-basis: 48%;
    margin: 0 1% 10px;
  }
}
@media (max-width: 575px) {
  .delivery_method_block .payment_method a {
    flex-basis: 100%;
    margin: 0 0 10px;
  }
}

.fee_matters_block {
  margin: 30px;
}
.fee_matters_block .mycardlist {
  margin: 0 0 20px;
  padding: 0;
  overflow: hidden;
}
.fee_matters_block .mycardlist li {
  width: 31%;
  margin-right: 2%;
  margin-bottom: 15px;
  float: left;
  list-style-type: none;
  height: 190px;
  box-sizing: border-box;
}
@media (max-width: 1300px) {
  .fee_matters_block .mycardlist li {
    width: 48%;
  }
}
@media screen and (max-width: 991px) {
  .fee_matters_block .mycardlist li {
    width: 100%;
    margin-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .fee_matters_block .mycardlist li {
    width: 48%;
    margin-right: 2%;
  }
}
@media (max-width: 730px) {
  .fee_matters_block .mycardlist li {
    width: 100%;
    margin-right: 0;
    float: none;
    clear: both;
  }
}
@media (max-width: 480px) {
  .fee_matters_block .mycardlist li {
    height: auto;
  }
}
.fee_matters_block .mycardlist li:last-child {
  margin-right: 0;
}
.fee_matters_block .mycardlist li a {
  display: block;
}
.fee_matters_block .mycardlist li a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 inset;
}
.fee_matters_block .mycardlist li a:focus .cardblock {
  box-shadow: 3px 2px 4px 3px #ccc;
}
.fee_matters_block .mycardlist li .cardblock {
  display: block;
  border: 1px solid #ccc;
  padding: 15px 5px;
  width: 100%;
  height: 180px;
  border-radius: 10px;
  position: relative;
  margin-top: 10px;
  transition: 0.2s;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .fee_matters_block .mycardlist li .cardblock {
    height: auto;
    min-height: 200px;
  }
}
.fee_matters_block .mycardlist li .cardblock:hover {
  margin-top: 0px;
  box-shadow: 3px 2px 4px 3px #ccc;
}
.fee_matters_block .mycardlist li h3 {
  margin: 0 0 10px 10px;
  font-size: 1.5em;
  position: relative;
  padding-left: 20px;
  color: #000;
}
.fee_matters_block .mycardlist li h3:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  border: 8px solid #666;
  border-color: transparent transparent transparent #666;
}
.fee_matters_block .mycardlist li .data {
  text-align: center;
  color: #898989;
  display: block;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
@media (max-width: 480px) {
  .fee_matters_block .mycardlist li .data {
    display: block;
  }
}
.fee_matters_block .mycardlist li .data > span {
  display: inline-block;
  vertical-align: top;
  margin: 0 5px;
}
@media (max-width: 480px) {
  .fee_matters_block .mycardlist li .data > span {
    display: block;
    margin-bottom: 30px;
  }
}
.fee_matters_block .mycardlist li .data > span em {
  font-size: 3.6em;
  margin-right: 5px;
}
.fee_matters_block .mycardlist li .data > span:nth-child(2) {
  position: relative;
  padding-top: 50px;
  padding-left: 5px;
}
.fee_matters_block .mycardlist li .data > span:nth-child(2):before {
  content: "";
  width: 7px;
  height: 80px;
  background-color: #999;
  position: absolute;
  top: 0;
  left: 0;
  transform: skewX(-30deg);
}
.fee_matters_block .mycardlist li .data > span:nth-child(2) em {
  font-size: 2.5em;
  margin-right: 5px;
}
@media (max-width: 480px) {
  .fee_matters_block .mycardlist li .data > span:nth-child(2) {
    padding-top: 0;
  }
  .fee_matters_block .mycardlist li .data > span:nth-child(2):before {
    width: 0;
    height: 0;
  }
  .fee_matters_block .mycardlist li .data > span:nth-child(2) em {
    font-size: 3.7em;
  }
}
.fee_matters_block .mycardlist li .badrecord {
  display: block;
  margin-top: 30px;
}
@media (max-width: 380px) {
  .fee_matters_block .mycardlist li .badrecord {
    text-align: center;
  }
}
.fee_matters_block .mycardlist li .badrecord .caveat {
  float: left;
  margin: 0 30px 0 10px;
}
@media screen and (max-width: 767px) {
  .fee_matters_block .mycardlist li .badrecord .caveat {
    margin: 0 20px 0 10px;
  }
}
@media (max-width: 380px) {
  .fee_matters_block .mycardlist li .badrecord .caveat {
    float: none;
    clear: both;
    margin: 0 0 20px;
  }
}
.fee_matters_block .mycardlist li .badrecord ul {
  margin: 0px;
  padding: 0;
  overflow: hidden;
}
@media (max-width: 380px) {
  .fee_matters_block .mycardlist li .badrecord ul {
    margin: 0 30px;
  }
}
.fee_matters_block .mycardlist li .badrecord ul li {
  display: block;
  float: none;
  border: none;
  width: auto;
  height: auto;
  padding: 0 0 5px 15px;
  margin: 0 0 5px;
  list-style-type: none;
  position: relative;
  text-align: left;
}
.fee_matters_block .mycardlist li .badrecord ul li:after {
  content: "";
  border: none;
}
.fee_matters_block .mycardlist li .badrecord ul li:before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #777;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 7px;
}
.fee_matters_block .mycardlist li .remark {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 5px;
  background-color: #999;
  color: #fff;
  border-radius: 0 0 10px 10px;
  text-align: center;
  font-size: 0.938em;
}
.fee_matters_block .contact_person_block .contact_person_group {
  margin-bottom: 40px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 20px 50px 10px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
}
.fee_matters_block .contact_person_block .contact_person_group:before {
  content: "";
  border: 30px solid #b94b00;
  border-color: #b94b00 transparent transparent #b94b00;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .fee_matters_block .contact_person_block .contact_person_group {
    padding: 20px 20px 10px 50px;
  }
}
.fee_matters_block .contact_person_block .contact_person_group .data_list {
  flex: none;
  flex-basis: 48%;
  margin: 0 1% 20px;
  display: flex;
}
@media screen and (max-width: 991px) {
  .fee_matters_block .contact_person_block .contact_person_group .data_list {
    flex-basis: 100%;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px dotted #999;
  }
}
.fee_matters_block .contact_person_block .contact_person_group .data_list .title {
  flex: none;
  flex-basis: 48%;
  color: #005d98;
  font-weight: bolder;
  position: relative;
}
.fee_matters_block .contact_person_block .contact_person_group .data_list .title span {
  padding-bottom: 3px;
  border-bottom: 2px solid #005d98;
}
@media screen and (max-width: 991px) {
  .fee_matters_block .contact_person_block .contact_person_group .data_list .title span {
    border-bottom: none;
  }
}
@media (max-width: 480px) {
  .fee_matters_block .contact_person_block .contact_person_group .data_list .title {
    flex-basis: 100%;
    margin-bottom: 10px;
  }
}
.fee_matters_block .contact_person_block .contact_person_group .data_list .content {
  flex-basis: 48%;
}
.fee_matters_block .contact_person_block .contact_person_group .data_list .content span {
  display: block;
}
@media (max-width: 480px) {
  .fee_matters_block .contact_person_block .contact_person_group .data_list .content {
    flex-basis: 100%;
  }
}

.remark_block {
  line-height: 1.5em;
}

.myorder_block {
  padding: 20px 0 60px;
}
.myorder_block .order_list_group {
  margin: 0 30px 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
}
.myorder_block .order_number {
  background-color: #b94b00;
  padding: 10px 20px;
  color: #fff;
  font-size: 1.125em;
  border-radius: 5px 5px 0 0;
}
.myorder_block .order_content {
  padding: 20px 0px;
  border-bottom: 1px solid #d3d3d3;
}
.myorder_block .order_content ul {
  margin: 0 50px;
  padding: 0;
}
.myorder_block .order_content ul li {
  margin-bottom: 10px;
}
.myorder_block .order_content ul li .money {
  color: #dc0122;
  font-size: 1.5em;
  font-weight: bolder;
  letter-spacing: 0.02em;
}
.myorder_block .order_content ul li .btn {
  padding: 0.3em 1em !important;
}
.myorder_block .order_content .btn_grp {
  text-align: right;
  padding: 0 20px 0 0;
}

.equipment_item_block {
  margin-bottom: 2em;
}

.equipment_item_group {
  margin: 0 0 1em;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 20px 50px 20px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
}
.equipment_item_group:before {
  content: "";
  border: 30px solid #b94b00;
  border-color: #b94b00 transparent transparent #b94b00;
  position: absolute;
  top: 0;
  left: 0;
}
.equipment_item_group h3 {
  margin: 0 0 30px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  font-size: 1.875em;
  color: #b94b00;
}
.equipment_item_group .title {
  font-size: 1.5em;
  float: left;
  margin: 0px 30px 20px 0;
  padding: 0;
  width: 25%;
  line-height: 1.3em;
}
@media screen and (max-width: 767px) {
  .equipment_item_group .title {
    width: auto;
    float: none;
  }
}
.equipment_item_group .content {
  overflow: hidden;
}
.equipment_item_group .content ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.equipment_item_group .content ul li {
  list-style: none;
  margin-bottom: 8px;
  padding-left: 18px;
  position: relative;
  margin-right: 2em;
  white-space: nowrap;
}
.equipment_item_group .content ul li:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  left: 0;
  top: 8px;
}
.equipment_item_group .content ul li em {
  color: #dc0122;
}
.equipment_item_group .content ul.total {
  margin: 0 0 1.5em;
}
.equipment_item_group .content ul.total li {
  font-size: 1.5em;
  flex: 0 0 auto;
  flex-basis: 40%;
  margin: 0 2em 0.5em 0;
}
.equipment_item_group .btn_grp {
  text-align: right;
  border-top: 1px solid #ddd;
}

.equipment_Tb {
  clear: both;
  float: none;
  margin-bottom: 2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.equipment_Tb .currently_item {
  flex: 0 0 auto;
  flex-basis: auto;
}
.equipment_Tb .batchbtn {
  flex: 0 0 auto;
  flex-basis: auto;
}
.equipment_Tb .selectall_btn {
  flex: 1 1 auto;
  flex-basis: 100%;
  margin-left: 15px;
  display: none;
}
@media screen and (max-width: 767px) {
  .equipment_Tb .selectall_btn {
    display: block;
  }
}
.equipment_Tb .selectall_btn label {
  margin: 0;
}
.equipment_Tb .table_list {
  flex: 1 1 auto;
  flex-basis: 100%;
  background-color: #eee;
  min-height: 100px;
  padding: 15px;
}
.equipment_Tb .table_list table {
  background-color: #fff;
}
.equipment_Tb .table_list.nodata {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 1.25em;
}

.studybook_tabs {
  margin: 0;
  padding: 0;
  position: relative;
}
.studybook_tabs:before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}
.studybook_tabs ul {
  display: flex;
  margin: 0 15px;
  padding: 0;
  list-style-type: none;
  position: relative;
}
.studybook_tabs ul li {
  font-size: 1.125em;
  flex: 0 0 auto;
  margin-right: 3px;
}
.studybook_tabs ul li a {
  display: block;
  text-align: center;
  padding: 0.3em 1em;
  background-color: #eee;
  border-radius: 4px 4px 0 0;
  border: 1px solid #ccc;
}
.studybook_tabs ul li a.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
  color: #000;
}
.studybook_tabs .prompt {
  position: absolute;
  top: 5px;
  left: 289px;
}
.studybook_tabs .prompt a {
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}

.reminder_window_block {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 300px;
  min-height: 150px;
  background-color: #774e2b;
  color: #fff;
  padding: 1.5em 1em;
  box-sizing: border-box;
  display: block;
  border-radius: 4px 0 0 4px;
  z-index: 10;
}
@media (max-width: 400px) {
  .reminder_window_block {
    width: 100%;
    border-radius: 0;
  }
}
.reminder_window_block .btn_grp {
  display: flex;
  justify-content: center;
  padding: 0;
}
.reminder_window_block .btn_grp .btn {
  padding: 0.5em 0.5em !important;
  margin: 0 0.2em;
}

.np ul, .np ol {
  overflow: hidden;
  padding: 1em 0;
  margin: 0;
  overflow: hidden;
}
.np li {
  display: block;
  width: 49%;
  margin: 0 1% 10px 0;
  float: left;
  box-sizing: border-box;
}
.np li:nth-child(even) {
  width: 50%;
  margin-right: 0px;
}
@media screen and (max-width: 767px) {
  .np li {
    float: none;
    width: 96%;
    margin: 0px auto 10px;
  }
  .np li:nth-child(even) {
    width: 96%;
    margin-right: auto;
  }
}
.np li a {
  border-radius: 4px;
  border: 2px solid #DDD;
  padding: 1em 1em 1em 2em;
  display: block;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}
.np li a .num {
  position: absolute;
  width: 1em;
  top: 1em;
  left: 0.5em;
  text-align: right;
}
.np li a .num:after {
  content: ".";
  display: inline-block;
}
.np li a:hover, .np li a:focus {
  border: 2px solid #005d98;
}

.more {
  margin: 20px 0px;
}
.more a {
  background-color: #59493f;
}
.more a:hover {
  background-color: #68554a;
}

.book_detail {
  margin: 0 auto 20px;
  border-bottom: 1px solid #d3d3d3;
  box-sizing: border-box;
  padding: 15px 5px;
}
.book_detail.fixed {
  position: fixed;
  left: 15px;
  top: 70px;
}
.book_detail .image {
  box-shadow: none;
  text-align: center;
  margin: 0 auto 10px;
  width: 55%;
}
@media screen and (max-width: 767px) {
  .book_detail .image {
    width: 65%;
  }
}
.book_detail .image img {
  width: 100%;
  outline: 1px solid #d3d3d3;
}
.book_detail .image_titlepage,
.book_detail .image_titlepage2 {
  margin: 0 auto 10px;
  width: 55%;
}
@media screen and (max-width: 767px) {
  .book_detail .image_titlepage,
  .book_detail .image_titlepage2 {
    width: 65%;
  }
}
.book_detail .book_qrcode {
  margin: 5px 0 10px;
  text-align: center;
}
.book_detail .book_qrcode ul {
  margin: 0;
  padding: 0;
}
.book_detail .book_qrcode ul li {
  display: inline-block;
  padding: 0;
  position: relative;
}
.book_detail .book_qrcode ul li:after {
  content: "";
  width: 1px;
  height: 17px;
  position: absolute;
  top: 3px;
  right: 0px;
  background-color: #333;
}
.book_detail .book_qrcode ul li:last-child:after {
  width: 0;
}
.book_detail .book_qrcode ul li a {
  display: block;
  text-align: center;
  padding: 0 6px 0 0;
  color: #333;
}
.book_detail .fraction {
  float: left;
  font-size: 1.75em;
  margin-right: 5px;
  margin-top: 3px;
  margin-bottom: 5px;
  margin-left: 20px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .book_detail .fraction {
    margin-left: 25px;
  }
}
@media (max-width: 480px) {
  .book_detail .fraction {
    margin-left: 25px;
    margin-right: 0px;
  }
}
.book_detail .score_star {
  position: relative;
  text-align: left;
  width: 100px;
  height: 29px;
  float: left;
  z-index: 0;
  margin-left: 20px;
}
@media screen and (max-width: 767px) {
  .book_detail .score_star {
    margin-left: 25px;
  }
}
@media (max-width: 480px) {
  .book_detail .score_star {
    margin-left: 5px;
    margin-right: 0px;
  }
}
.book_detail .score_star > img {
  position: absolute;
  z-index: 99;
  width: 100px;
  height: 29px;
}
.book_detail .score_star .score_color {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100px;
  height: 29px;
  overflow: hidden;
}
.book_detail .then {
  color: #333;
  float: none;
  clear: both;
  margin-left: 20px;
}
@media screen and (max-width: 767px) {
  .book_detail .then {
    margin-left: 25px;
  }
}
@media (max-width: 480px) {
  .book_detail .then {
    margin-left: 0px;
    text-align: center;
  }
}
.book_detail .book_cover_source {
  text-align: center;
}
.book_detail .book_cover_source a {
  color: #774e2b;
  text-decoration: underline;
  display: inline-block;
}
.book_detail .book_cover_source a:hover {
  text-decoration: none;
}

.anchor_menu {
  margin: 0 auto 20px;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .anchor_menu {
    padding: 0 10px;
  }
}
.anchor_menu ul {
  margin: 0;
  padding: 0;
}
.anchor_menu ul li {
  list-style-type: none;
  font-size: 1.063em;
}
.anchor_menu ul li a {
  display: block;
  padding: 2px 0;
  color: #313131;
}
.anchor_menu ul li a:hover {
  color: #dd1f03;
}
.anchor_menu.fixed {
  position: fixed;
  left: 15px;
  top: 70px;
}

.mainrightblock .book_detaildata,
.mainrightblock2 .book_detaildata {
  position: relative;
}
.mainrightblock .book_detaildata .book_detail,
.mainrightblock2 .book_detaildata .book_detail {
  float: left;
  width: 160px;
  margin: 20px;
  display: none;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .book_detail,
  .mainrightblock2 .book_detaildata .book_detail {
    display: block;
    padding: 0;
    border: none;
  }
}
@media (max-width: 480px) {
  .mainrightblock .book_detaildata .book_detail,
  .mainrightblock2 .book_detaildata .book_detail {
    float: none;
    clear: both;
    margin: 20px auto;
    width: 200px;
  }
}
.mainrightblock .book_detaildata .bookdata,
.mainrightblock2 .book_detaildata .bookdata {
  padding: 20px;
  overflow: hidden;
}
.mainrightblock .book_detaildata .bookdata.columnsblock,
.mainrightblock2 .book_detaildata .bookdata.columnsblock {
  display: flex;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata.columnsblock,
  .mainrightblock2 .book_detaildata .bookdata.columnsblock {
    flex-wrap: wrap;
  }
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_leftblock,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_leftblock {
  flex: 1 1 auto;
  position: relative;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock {
  flex: 0 0 auto;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock,
  .mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock {
    flex: 1 1 auto;
    flex-basis: 100%;
  }
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information {
  width: 150px;
  margin-left: 1em;
  text-align: center;
  padding: 1em 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
@media (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information,
  .mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information {
    width: auto;
    margin: 0 0 1em;
  }
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .title,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .title {
  font-size: 1.375em;
  margin-bottom: 0.5em;
  font-weight: bolder;
  color: #774e2b;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_data2,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_data2 {
  margin-bottom: 0.5em;
  padding: 0;
  background-color: #eee;
  border-radius: 5px;
  display: block;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_data2 ul,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_data2 ul {
  margin: 0;
  padding: 0.5em;
  list-style-type: none;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_data2 ul li,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_data2 ul li {
  text-align: left;
  margin-bottom: 0.4em;
  white-space: nowrap;
  position: relative;
  padding-right: 2.2em;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_data2 ul li:last-child,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_data2 ul li:last-child {
  margin-bottom: 0;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_data2 ul li em,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_data2 ul li em {
  font-size: 1.375em;
  margin-right: 0;
  color: #b94b00;
  display: inline-block;
  font-weight: bolder;
  border-radius: 50px;
  text-align: right;
  width: 2em;
  position: absolute;
  right: 0;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .bookdata_btn button,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .bookdata_btn button {
  width: 100%;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .bookdata_btn button.btn,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .bookdata_btn button.btn {
  margin: 0 0 0.5em;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_editor_block ul,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_editor_block ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_editor_block ul li,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_editor_block ul li {
  border-bottom: 1px solid #ccc;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_editor_block ul li:last-child,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_editor_block ul li:last-child {
  border-bottom: none;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_editor_block ul li a,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_editor_block ul li a {
  display: block;
  padding: 0.5em 0.3em;
}
.mainrightblock .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_editor_block ul li a img,
.mainrightblock2 .book_detaildata .bookdata.columnsblock .columns_rightblock .collection_information .collection_editor_block ul li a img {
  width: 20px;
  margin-right: 1em;
  vertical-align: middle;
}
.mainrightblock .book_detaildata .bookdata .data_type_block,
.mainrightblock2 .book_detaildata .bookdata .data_type_block {
  padding: 3px 15px;
  margin-bottom: 10px;
  font-size: 0.875em;
  background-color: #fed857;
  color: #000;
  border-radius: 50px;
  display: inline-block;
  position: relative;
}
.mainrightblock .book_detaildata .bookdata h2,
.mainrightblock2 .book_detaildata .bookdata h2 {
  color: #333;
  margin: 0 40px 20px 0;
  padding: 0;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 25px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
}
@media (max-width: 480px) {
  .mainrightblock .book_detaildata .bookdata h2,
  .mainrightblock2 .book_detaildata .bookdata h2 {
    margin: 0 0px 20px 0;
  }
  .mainrightblock .book_detaildata .bookdata h2.fixed,
  .mainrightblock2 .book_detaildata .bookdata h2.fixed {
    top: 102px;
    left: 0;
    position: fixed;
    background-color: #eee;
    z-index: 9;
    margin: 0;
    padding: 5px 20px;
    z-index: 999;
    height: 69px;
    line-height: 30px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
  }
}
.mainrightblock .book_detaildata .bookdata h2 a,
.mainrightblock2 .book_detaildata .bookdata h2 a {
  color: #774e2b;
  text-decoration: none;
  display: block;
}
.mainrightblock .book_detaildata .bookdata h2 a:hover,
.mainrightblock2 .book_detaildata .bookdata h2 a:hover {
  color: #dd1f03;
}
.mainrightblock .book_detaildata .bookdata .collection,
.mainrightblock2 .book_detaildata .bookdata .collection {
  position: absolute;
  top: 22px;
  right: 20px;
}
.mainrightblock .book_detaildata .bookdata .collection a,
.mainrightblock2 .book_detaildata .bookdata .collection a {
  display: block;
}
@media (max-width: 480px) {
  .mainrightblock .book_detaildata .bookdata .collection,
  .mainrightblock2 .book_detaildata .bookdata .collection {
    top: 0;
  }
}
.mainrightblock .book_detaildata .bookdata .collection img,
.mainrightblock2 .book_detaildata .bookdata .collection img {
  width: 22px;
}
.mainrightblock .book_detaildata .bookdata .listdata,
.mainrightblock2 .book_detaildata .bookdata .listdata {
  margin: 0 20px;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata .listdata,
  .mainrightblock2 .book_detaildata .bookdata .listdata {
    margin: 0px;
  }
}
.mainrightblock .book_detaildata .bookdata .listdata ul,
.mainrightblock2 .book_detaildata .bookdata .listdata ul {
  margin: 0;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata .listdata ul li,
.mainrightblock2 .book_detaildata .bookdata .listdata ul li {
  list-style-type: none;
  background-image: url("../images/icon_point.png");
  background-position: 0 8px;
  background-repeat: no-repeat;
  background-size: 6px;
  padding-left: 15px;
  margin-bottom: 10px;
  display: block;
}
.mainrightblock .book_detaildata .bookdata .listdata ul li.limitrows,
.mainrightblock2 .book_detaildata .bookdata .listdata ul li.limitrows {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mainrightblock .book_detaildata .bookdata .listdata ul li.limitrows.cancel span,
.mainrightblock2 .book_detaildata .bookdata .listdata ul li.limitrows.cancel span {
  height: auto;
  -webkit-line-clamp: unset;
}
.mainrightblock .book_detaildata .bookdata .listdata ul li.limitrows span,
.mainrightblock2 .book_detaildata .bookdata .listdata ul li.limitrows span {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 23px;
  height: calc(23px * 3);
  flex: 1 1 auto;
  flex-basis: 100%;
}
.mainrightblock .book_detaildata .bookdata .listdata ul li.limitrows .more,
.mainrightblock2 .book_detaildata .bookdata .listdata ul li.limitrows .more {
  display: block;
  margin: 10px 0;
}
.mainrightblock .book_detaildata .bookdata .listdata ul li.limitrows .more a,
.mainrightblock2 .book_detaildata .bookdata .listdata ul li.limitrows .more a {
  display: inline-block;
  white-space: nowrap;
}
.mainrightblock .book_detaildata .bookdata .listdata ul li a,
.mainrightblock2 .book_detaildata .bookdata .listdata ul li a {
  color: #774e2b;
  text-decoration: underline;
}
.mainrightblock .book_detaildata .bookdata .listdata ul li a:hover,
.mainrightblock2 .book_detaildata .bookdata .listdata ul li a:hover {
  text-decoration: none;
}
.mainrightblock .book_detaildata .bookdata .listdata ul.no_icon,
.mainrightblock2 .book_detaildata .bookdata .listdata ul.no_icon {
  margin: 0 0 20px;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata .listdata ul.no_icon li,
.mainrightblock2 .book_detaildata .bookdata .listdata ul.no_icon li {
  background-image: none;
  padding: 0;
  margin: 0;
}
.mainrightblock .book_detaildata .bookdata .listdata ul.no_icon li a.btnstyle,
.mainrightblock2 .book_detaildata .bookdata .listdata ul.no_icon li a.btnstyle {
  padding: 3px 0 !important;
  box-shadow: none !important;
}
.mainrightblock .book_detaildata .bookdata .listdata ul.no_icon li a.morebg,
.mainrightblock2 .book_detaildata .bookdata .listdata ul.no_icon li a.morebg {
  padding-right: 20px !important;
}
.mainrightblock .book_detaildata .bookdata .listdata ul.no_icon li a:hover,
.mainrightblock2 .book_detaildata .bookdata .listdata ul.no_icon li a:hover {
  text-decoration: underline !important;
}
.mainrightblock .book_detaildata .bookdata .listdata ul.no_icon li a:focus,
.mainrightblock2 .book_detaildata .bookdata .listdata ul.no_icon li a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 !important;
}
.mainrightblock .book_detaildata .bookdata .listdata p,
.mainrightblock2 .book_detaildata .bookdata .listdata p {
  padding: 0;
  margin: 15px 0;
}
.mainrightblock .book_detaildata .bookdata .listdata .bookbtn,
.mainrightblock2 .book_detaildata .bookdata .listdata .bookbtn {
  clear: both;
  margin-bottom: 10px;
}
.mainrightblock .book_detaildata .bookdata .listdata .bookbtn input[type=button],
.mainrightblock2 .book_detaildata .bookdata .listdata .bookbtn input[type=button] {
  border: 1px solid #d3d3d3;
  background-color: #fff;
  padding: 4px 20px 4px 33px;
  color: #313131;
  box-shadow: none;
  border-radius: 4px;
  margin-bottom: 5px;
}
.mainrightblock .book_detaildata .bookdata .listdata .bookbtn input.download,
.mainrightblock2 .book_detaildata .bookdata .listdata .bookbtn input.download {
  background-image: url("../images/icon_download.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.mainrightblock .book_detaildata .bookdata .listdata .bookbtn input.borrow,
.mainrightblock2 .book_detaildata .bookdata .listdata .bookbtn input.borrow {
  background-image: url("../images/icon_borrowing.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.mainrightblock .book_detaildata .bookdata2,
.mainrightblock2 .book_detaildata .bookdata2 {
  padding: 20px 20px 10px;
  clear: both;
  float: none;
  box-sizing: border-box;
}
.mainrightblock .book_detaildata .bookdata2 h3,
.mainrightblock2 .book_detaildata .bookdata2 h3 {
  color: #005d98;
  position: relative;
  padding: 15px 0 0 0;
  margin: 0 0 25px;
  font-size: 1.25em;
  border-top: 1px solid #c9c9c9;
  font-weight: 500;
}
.mainrightblock .book_detaildata .bookdata2 .bookexport,
.mainrightblock2 .book_detaildata .bookdata2 .bookexport {
  padding: 0 30px;
  margin: 0 0 10px;
}
.mainrightblock .book_detaildata .bookdata2 .bookexport div a,
.mainrightblock2 .book_detaildata .bookdata2 .bookexport div a {
  text-align: center;
  display: block;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: transparent;
  margin: 0 auto;
  padding-top: 14px;
  box-sizing: border-box;
}
.mainrightblock .book_detaildata .bookdata2 .bookexport div a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .bookexport div a:hover {
  background-color: #e5e5e5;
  color: #000;
}
.mainrightblock .book_detaildata .bookdata2 .bookexport div a img,
.mainrightblock2 .book_detaildata .bookdata2 .bookexport div a img {
  width: 44px;
  margin: 0 auto 8px;
}
.mainrightblock .book_detaildata .bookdata2 .bookexport .slick-prev,
.mainrightblock2 .book_detaildata .bookdata2 .bookexport .slick-prev {
  background-image: url("../vendor/slick/icon_arrow_left3.png");
  left: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookexport .slick-next,
.mainrightblock2 .book_detaildata .bookdata2 .bookexport .slick-next {
  background-image: url("../vendor/slick/icon_arrow_right3.png");
  right: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookexport .slick-prev.slick-disabled:before,
.mainrightblock .book_detaildata .bookdata2 .bookexport .slick-next.slick-disabled:before,
.mainrightblock2 .book_detaildata .bookdata2 .bookexport .slick-prev.slick-disabled:before,
.mainrightblock2 .book_detaildata .bookdata2 .bookexport .slick-next.slick-disabled:before {
  opacity: 0.25;
}
.mainrightblock .book_detaildata .bookdata2 .export_block,
.mainrightblock2 .book_detaildata .bookdata2 .export_block {
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  padding: 30px 30px 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background-color: #eee;
  display: none;
}
.mainrightblock .book_detaildata .bookdata2 .export_block .close,
.mainrightblock2 .book_detaildata .bookdata2 .export_block .close {
  position: absolute;
  top: 20px;
  right: 20px;
}
.mainrightblock .book_detaildata .bookdata2 .export_block h2,
.mainrightblock2 .book_detaildata .bookdata2 .export_block h2 {
  font-size: 1.25em;
  margin: 0 0 20px;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .export_block .communitywebsite,
.mainrightblock2 .book_detaildata .bookdata2 .export_block .communitywebsite {
  margin: 0 0 20px;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .export_block .communitywebsite div a,
.mainrightblock2 .book_detaildata .bookdata2 .export_block .communitywebsite div a {
  display: block;
  text-align: center;
  padding-top: 30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: #c9c9c9;
  color: #fff;
  margin: 0 auto;
  box-sizing: border-box;
}
.mainrightblock .book_detaildata .bookdata2 .export_block .communitywebsite div a img,
.mainrightblock2 .book_detaildata .bookdata2 .export_block .communitywebsite div a img {
  width: 47px;
  margin: 0 auto 5px;
}
.mainrightblock .book_detaildata .bookdata2 .export_block .communitywebsite .slick-prev,
.mainrightblock2 .book_detaildata .bookdata2 .export_block .communitywebsite .slick-prev {
  background-image: url("../vendor/slick/icon_arrow_left3.png");
  left: -10px;
}
.mainrightblock .book_detaildata .bookdata2 .export_block .communitywebsite .slick-next,
.mainrightblock2 .book_detaildata .bookdata2 .export_block .communitywebsite .slick-next {
  background-image: url("../vendor/slick/icon_arrow_right3.png");
  right: -10px;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace {
  margin: 0 30px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace {
    margin: 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookplace label,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace label {
  margin-top: 3px;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace label input,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace label input {
  margin-right: 5px;
  color: #313131;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace select,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace select {
  color: #313131;
  height: 2.1em;
  line-height: 2.1em;
  margin-top: 1px;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace input[type=button],
.mainrightblock2 .book_detaildata .bookdata2 .bookplace input[type=button] {
  padding: 4px 5px;
  height: 2em;
  box-shadow: none;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  color: #313131;
  margin-top: -1px;
}
.mainrightblock .book_detaildata .bookdata2 .librarylist,
.mainrightblock2 .book_detaildata .bookdata2 .librarylist {
  margin: 10px 20px;
  padding: 0;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .librarylist,
  .mainrightblock2 .book_detaildata .bookdata2 .librarylist {
    margin: 10px 0px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .librarylist a,
.mainrightblock2 .book_detaildata .bookdata2 .librarylist a {
  display: block;
  color: #666;
  padding: 5px 10px;
}
.mainrightblock .book_detaildata .bookdata2 .librarylist a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .librarylist a:hover {
  background-color: #eee;
}
.mainrightblock .book_detaildata .bookdata2 .librarylist ul,
.mainrightblock2 .book_detaildata .bookdata2 .librarylist ul {
  margin: 0;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .librarylist ul li,
.mainrightblock2 .book_detaildata .bookdata2 .librarylist ul li {
  list-style-type: none;
  padding: 0;
  border-bottom: 1px solid #d3d3d3;
}
.mainrightblock .book_detaildata .bookdata2 .librarylist ul li h4,
.mainrightblock2 .book_detaildata .bookdata2 .librarylist ul li h4 {
  margin: 10px 0;
  padding: 0 25px 0 0;
  color: #b94b00;
  font-size: 1.125em;
  background-image: url("../images/icon_next2.png");
  background-repeat: no-repeat;
  background-position: right center;
  float: left;
  background-size: 12px;
}
.mainrightblock .book_detaildata .bookdata2 .librarylist ul li p,
.mainrightblock2 .book_detaildata .bookdata2 .librarylist ul li p {
  margin: 0 0 10px;
  padding: 0;
  clear: both;
  float: none;
}
.mainrightblock .book_detaildata .bookdata2 .library_materials,
.mainrightblock2 .book_detaildata .bookdata2 .library_materials {
  margin: 20px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .library_materials,
  .mainrightblock2 .book_detaildata .bookdata2 .library_materials {
    margin: 20px 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .library_materials .backpage,
.mainrightblock2 .book_detaildata .bookdata2 .library_materials .backpage {
  margin-bottom: 15px;
  overflow: hidden;
}
.mainrightblock .book_detaildata .bookdata2 .library_materials .backpage a,
.mainrightblock2 .book_detaildata .bookdata2 .library_materials .backpage a {
  background-image: url("../images/icon_back.png");
  background-repeat: no-repeat;
  background-position: 5px 6px;
  padding: 3px 10px 2px 30px;
  border-bottom: 1px dashed #d3d3d3;
  display: block;
}
.mainrightblock .book_detaildata .bookdata2 .library_materials h4,
.mainrightblock2 .book_detaildata .bookdata2 .library_materials h4 {
  margin: 10px 0;
  padding: 0;
  color: #b94b00;
  font-size: 1.125em;
  float: none;
  clear: both;
}
.mainrightblock .book_detaildata .bookdata2 .library_materials p,
.mainrightblock2 .book_detaildata .bookdata2 .library_materials p {
  margin: 0 0 10px;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace2,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace2 {
  margin: 5px 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace2 label,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace2 label {
  margin: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace2 label input,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace2 label input {
  margin-right: 5px;
  color: #313131;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace2 select,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace2 select {
  color: #313131;
  height: 2.1em;
  line-height: 2.1em;
  margin: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace2 input[type=button],
.mainrightblock2 .book_detaildata .bookdata2 .bookplace2 input[type=button] {
  padding: 4px 5px;
  height: 2em;
  box-shadow: none;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  color: #313131;
  margin-top: -1px;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace2 .rightblock,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace2 .rightblock {
  position: relative;
  margin-bottom: 5px;
  display: inline-block;
  padding-left: 10px;
  margin-left: 10px;
  float: right;
  vertical-align: top;
}
@media screen and (max-width: 991px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace2 .rightblock,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace2 .rightblock {
    float: none;
    padding-left: 10px;
    margin-left: 8px;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace2 .rightblock:after,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace2 .rightblock:after {
    content: "";
    width: 1px;
    height: 31px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #ccc;
  }
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace2 .rightblock,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace2 .rightblock {
    margin-bottom: 5px;
    padding-left: 7px;
    margin-left: 3px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookplace2 .rightblock span,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace2 .rightblock span {
  margin: 0px 5px 0 0;
  padding-top: 5px;
  vertical-align: middle;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace2 .rightblock select,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace2 .rightblock select {
  line-height: 1.9em;
  height: 1.9em;
}
@media screen and (max-width: 991px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace2 .rightblock span,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace2 .rightblock span {
    display: none;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace2 .rightblock select,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace2 .rightblock select {
    width: 100px;
  }
}
@media (max-width: 830px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace2 .rightblock select,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace2 .rightblock select {
    width: 65px;
    padding-left: 0.3em !important;
    letter-spacing: 0.04em;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookplace2 em,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace2 em {
  padding: 0 5px;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace {
  display: inline-block;
  vertical-align: middle;
  margin: 0px 0px 10px 0;
  position: relative;
  padding: 0;
  vertical-align: top;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .number,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .number {
  background-color: #b94b00;
  color: #fff;
  min-width: 25px;
  height: 1.6em;
  margin-right: 3px;
  line-height: 1.6em;
  text-align: center;
  border-radius: 5px;
  padding: 0 3px;
  display: inline-block;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .collectionplace .number,
  .mainrightblock2 .book_detaildata .bookdata2 .collectionplace .number {
    margin-right: 3px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .title,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .title {
  display: inline-block;
  width: 80px;
  padding-right: 8px;
  padding-top: 6px;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  z-index: 9;
  margin-right: 3px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .collectionplace .title,
  .mainrightblock2 .book_detaildata .bookdata2 .collectionplace .title {
    width: 60px;
    margin-right: 5px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .title .closebtn,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .title .closebtn {
  right: 2px;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .title:before,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .title:before {
  content: "";
  border: 7px solid #333;
  border-color: #333 transparent transparent transparent;
  position: absolute;
  top: 13px;
  right: 15px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .collectionplace .title:before,
  .mainrightblock2 .book_detaildata .bookdata2 .collectionplace .title:before {
    right: 3px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .title:after,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .title:after {
  content: "";
  width: 1px;
  height: 31px;
  position: absolute;
  right: 5px;
  top: 0px;
  background-color: #ccc;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .collectionplace .title:after,
  .mainrightblock2 .book_detaildata .bookdata2 .collectionplace .title:after {
    right: 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .title.word_orange:before,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .title.word_orange:before {
  content: "";
  border: 7px solid #b94b00;
  border-color: #b94b00 transparent transparent transparent;
  position: absolute;
  top: 10px;
  right: 15px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .collectionplace .title.word_orange:before,
  .mainrightblock2 .book_detaildata .bookdata2 .collectionplace .title.word_orange:before {
    right: 3px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .closebtn,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .closebtn {
  position: absolute;
  top: 5px;
  right: 18px;
  width: 15px;
  height: 15px;
  background-color: #fff;
  z-index: 9;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .collectionplace .closebtn,
  .mainrightblock2 .book_detaildata .bookdata2 .collectionplace .closebtn {
    right: 7px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary {
  position: absolute;
  width: 200px;
  padding: 10px 0 10px 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  top: 38px;
  display: none;
  box-sizing: border-box;
  z-index: 9;
  box-shadow: 0 0 3px #ccc;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary:before,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary:before {
  content: "";
  border: 10px solid #fff;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: -20px;
  left: 30px;
  z-index: 9;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary:after,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary:after {
  content: "";
  border: 12px solid #ccc;
  border-color: transparent transparent #ccc transparent;
  position: absolute;
  top: -24px;
  left: 28px;
  z-index: 8;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary span,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary span {
  height: 210px;
  overflow-y: scroll;
  display: block;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary span label,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary span label {
  margin-bottom: 5px;
  padding-left: 2px;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .btnstyle,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .btnstyle {
  padding: 3px 8px !important;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .collectionbtn,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .collectionbtn {
  display: block;
  margin: 0 0 10px;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .collectionbtn ul,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .collectionbtn ul {
  margin: 0;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .collectionbtn ul li,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .collectionbtn ul li {
  display: inline-block;
  text-align: center;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .collectionbtn ul li a,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .collectionbtn ul li a {
  display: block;
  padding: 0px 15px;
  text-align: center;
  color: #3e78c0;
  text-decoration: underline;
}
.mainrightblock .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .collectionbtn ul li a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .collectionplace .collectionlibrary span .collectionbtn ul li a:hover {
  color: #dd1f03;
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block {
  display: inline-block;
  margin: 0 0px 10px 0;
  position: relative;
  vertical-align: top;
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title {
  display: inline-block;
  width: 80px;
  padding-right: 8px;
  padding-top: 3px;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  z-index: 9;
  margin-right: 3px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title,
  .mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title {
    width: 70px;
    padding-right: 0px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title:before,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title:before {
  content: "";
  border: 7px solid #333;
  border-color: #333 transparent transparent transparent;
  position: absolute;
  top: 10px;
  right: 15px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title:before,
  .mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title:before {
    right: 3px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title.addyear,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title.addyear {
  width: 125px;
  color: #b94b00;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title.addyear,
  .mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title.addyear {
    width: 115px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title.addyear span,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title.addyear span {
  background-color: #b94b00;
  color: #fff;
  height: 1.6em;
  margin-right: 3px;
  line-height: 1.6em;
  text-align: center;
  border-radius: 5px;
  padding: 0 6px;
  display: inline-block;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title.addyear span,
  .mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title.addyear span {
    margin-right: 3px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title.addyear:before,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title.addyear:before {
  content: "";
  border: 7px solid #b94b00;
  border-color: #b94b00 transparent transparent transparent;
  position: absolute;
  top: 10px;
  right: 15px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title.addyear:before,
  .mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title.addyear:before {
    right: 3px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title:after,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title:after {
  content: "";
  width: 1px;
  height: 31px;
  position: absolute;
  right: 5px;
  top: 0px;
  background-color: #ccc;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .publishing_year_block .title:after,
  .mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .title:after {
    right: 0px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .closebtn,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .closebtn {
  position: absolute;
  top: 5px;
  right: 18px;
  width: 15px;
  height: 15px;
  background-color: #fff;
  z-index: 9;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .publishing_year_block .closebtn,
  .mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .closebtn {
    right: 5px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .yearblock,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .yearblock {
  position: absolute;
  width: 100px;
  padding: 10px 0;
  border: 1px solid #ccc;
  background-color: #fff;
  top: 38px;
  display: none;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: 0 0 3px #ccc;
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .yearblock:before,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .yearblock:before {
  content: "";
  border: 10px solid #fff;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: -20px;
  left: 40px;
  z-index: 9;
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .yearblock:after,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .yearblock:after {
  content: "";
  border: 12px solid #ccc;
  border-color: transparent transparent #ccc transparent;
  position: absolute;
  top: -24px;
  left: 38px;
  z-index: 8;
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .yearblock ul,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .yearblock ul {
  margin: 0;
  padding: 0;
  height: 220px;
  overflow-y: scroll;
  display: block;
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .yearblock ul li,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .yearblock ul li {
  list-style: none;
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .yearblock ul li a,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .yearblock ul li a {
  display: block;
  padding: 5px 10px;
  text-align: center;
}
.mainrightblock .book_detaildata .bookdata2 .publishing_year_block .yearblock ul li a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .publishing_year_block .yearblock ul li a:hover {
  background-color: #999;
  color: #fff;
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch {
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  padding: 0px 15px 0 5px;
  position: relative;
  margin-bottom: 5px;
  line-height: 1.8em;
  height: 1.8em;
  vertical-align: middle;
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch span,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch span {
  display: none;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch span,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch span {
    display: block;
    float: left;
    margin-right: 5px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch input[type=text],
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch input[type=text] {
  border: none;
  padding: 0px 10px 0 5px;
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch input.volume,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch input.volume {
  width: 100px;
}
@media (max-width: 830px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch input.volume,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch input.volume {
    width: 46px;
    transition: 0.5s;
  }
  .mainrightblock .book_detaildata .bookdata2 .volumesearch input.volume.open,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch input.volume.open {
    width: 100px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch a,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch a {
  display: inline-block;
  padding-top: 2px;
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch3,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch3 {
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  padding: 0px 15px 0 5px;
  position: relative;
  margin-bottom: 5px;
  margin-left: 20px;
  line-height: 1.8em;
  height: 1.8em;
  vertical-align: middle;
}
@media (max-width: 380px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch3,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch3 {
    margin-left: 15px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch3:before,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch3:before {
  content: "";
  width: 1px;
  height: 31px;
  position: absolute;
  left: -15px;
  top: 0px;
  background-color: #ccc;
}
@media (max-width: 380px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch3:before,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch3:before {
    left: -10px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch3 span,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch3 span {
  display: none;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch3 span,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch3 span {
    display: block;
    float: left;
    margin-right: 5px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch3 input[type=text],
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch3 input[type=text] {
  border: none;
  padding: 0px 10px 0 5px;
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch3 input.volume,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch3 input.volume {
  width: 150px;
}
@media (max-width: 830px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch3 input.volume,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch3 input.volume {
    width: 46px;
    transition: 0.5s;
  }
  .mainrightblock .book_detaildata .bookdata2 .volumesearch3 input.volume.open,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch3 input.volume.open {
    width: 100px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch3 a,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch3 a {
  display: inline-block;
  padding-top: 2px;
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch2,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 {
  border: 1px solid #ccc;
  border-radius: 5px;
  display: inline-block;
  padding: 4px 15px 4px 5px;
  position: relative;
  margin-bottom: 5px;
  margin-right: 5px;
  line-height: 1.8em;
  height: 1.8em;
  vertical-align: middle;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch2,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 {
    display: block;
    margin-right: 0px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch2 span,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 span {
  display: none;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch2 span,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 span {
    display: block;
    float: left;
    margin-right: 5px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch2 input[type=text],
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 input[type=text] {
  border: none;
  padding: 0px 10px 0 5px;
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch2 input.volume,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 input.volume {
  width: 145px;
}
@media (max-width: 830px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch2 input.volume,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 input.volume {
    width: 145px;
    transition: 0.5s;
  }
  .mainrightblock .book_detaildata .bookdata2 .volumesearch2 input.volume.open,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 input.volume.open {
    width: 100px;
  }
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch2 input.volume,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 input.volume {
    width: 92%;
  }
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch2 input.volume,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 input.volume {
    width: 92%;
  }
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch2 a,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 a {
  display: inline-block;
  padding-top: 2px;
}
.mainrightblock .book_detaildata .bookdata2 .volumesearch2 + div,
.mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 + div {
  float: right;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .volumesearch2 + div,
  .mainrightblock2 .book_detaildata .bookdata2 .volumesearch2 + div {
    float: none;
  }
}
.mainrightblock .book_detaildata .bookdata2 .journal_tab,
.mainrightblock2 .book_detaildata .bookdata2 .journal_tab {
  padding: 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  overflow: hidden;
}
.mainrightblock .book_detaildata .bookdata2 .journal_tab ul,
.mainrightblock2 .book_detaildata .bookdata2 .journal_tab ul {
  margin: 0;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .journal_tab ul li,
.mainrightblock2 .book_detaildata .bookdata2 .journal_tab ul li {
  list-style: none;
  float: left;
  border-right: 1px solid #ccc;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .journal_tab ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .journal_tab ul li {
    width: 33%;
  }
  .mainrightblock .book_detaildata .bookdata2 .journal_tab ul li:last-child,
  .mainrightblock2 .book_detaildata .bookdata2 .journal_tab ul li:last-child {
    border: none;
  }
}
.mainrightblock .book_detaildata .bookdata2 .journal_tab ul li a,
.mainrightblock2 .book_detaildata .bookdata2 .journal_tab ul li a {
  padding: 6px 30px;
  display: block;
  box-sizing: border-box;
  text-align: center;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .journal_tab ul li a,
  .mainrightblock2 .book_detaildata .bookdata2 .journal_tab ul li a {
    padding: 6px 5px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .journal_tab ul li a:hover, .mainrightblock .book_detaildata .bookdata2 .journal_tab ul li a.here,
.mainrightblock2 .book_detaildata .bookdata2 .journal_tab ul li a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .journal_tab ul li a.here {
  background-color: #005d98;
  color: #fff;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list {
  margin: 10px 0 20px;
  position: relative;
  clear: both;
}
@media screen and (max-width: 991px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list {
    width: 100%;
    overflow-x: auto;
    display: block;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th {
  position: relative;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th span,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th span {
  display: inline-block;
  margin-right: 5px;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th a.prompt, .mainrightblock .book_detaildata .bookdata2 .bookplace_list table th a.prompt2, .mainrightblock .book_detaildata .bookdata2 .bookplace_list table th a.prompt_in3,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th a.prompt,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th a.prompt2,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th a.prompt_in3 {
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  display: block;
  line-height: 25px;
  display: inline-block;
  text-align: center;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th a.arrow,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th a.arrow {
  position: relative;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th a.arrow:before,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th a.arrow:before {
  content: "";
  border: 12px solid #666;
  border-color: #666 transparent transparent transparent;
  position: absolute;
  bottom: 15px;
  left: 0;
}
@media screen and (max-width: 991px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table th a.arrow:before,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th a.arrow:before {
    bottom: auto;
    top: 15px;
    border-color: transparent transparent #666 transparent;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .shelf_block,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .shelf_block {
  background-color: #666;
  color: #fff;
  position: absolute;
  bottom: 45px;
  left: 0;
  width: 200px;
  border: 2px solid #fff;
  border-bottom: none;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 5px;
  z-index: 9;
}
@media screen and (max-width: 991px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block,
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2,
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3,
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .shelf_block,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .shelf_block {
    top: 45px;
    bottom: auto;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block ul,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2 ul,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3 ul,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .shelf_block ul,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block ul,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2 ul,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3 ul,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .shelf_block ul {
  margin: 0;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block ul li,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2 ul li,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3 ul li,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .shelf_block ul li,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block ul li,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2 ul li,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3 ul li,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .shelf_block ul li {
  margin-bottom: 5px;
  list-style: none;
  text-align: left;
  white-space: normal;
  padding-left: 40px;
  display: block;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block ul li span,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2 ul li span,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3 ul li span,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .shelf_block ul li span,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block ul li span,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2 ul li span,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3 ul li span,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .shelf_block ul li span {
  width: 36px;
  height: 36px;
  background-color: #a0a0a0;
  border-radius: 50%;
  line-height: 36px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  margin-left: -40px;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block ul li span img,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2 ul li span img,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3 ul li span img,
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .shelf_block ul li span img,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block ul li span img,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2 ul li span img,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block_in3 ul li span img,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .shelf_block ul li span img {
  vertical-align: middle;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th .prompt_block2 {
  left: auto;
  right: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.libraryname,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.libraryname {
  text-align: left;
  background-image: url("../images/icon_next.png");
  background-repeat: no-repeat;
  background-position: 15px center;
  padding-left: 30px;
  background-color: #f2eee7;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.libraryname:hover,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.libraryname:hover {
  background-color: #fffbc4;
  cursor: pointer;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td input.btn_orange,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td input.btn_orange {
  background-color: #eb6000;
  color: #fff;
  padding: 5px 20px;
  border-radius: 4px;
  border: 1px solid #eb6000;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td input.btn_orange:hover,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td input.btn_orange:hover {
  background-color: #f57923;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td ul,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td ul {
  display: block;
  list-style: none;
  margin: 0 0 0 0px;
  padding: 0;
  vertical-align: middle;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td ul li,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td ul li {
  display: inline-block;
  margin-right: -2px;
  margin-bottom: 0px;
  position: relative;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td ul li a,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td ul li a {
  display: block;
  width: 36px;
  height: 36px;
  background-color: #a0a0a0;
  border-radius: 50%;
  line-height: 36px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  position: relative;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td ul li a img,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td ul li a img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td ul li a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td ul li a:hover {
  background-color: #f57923;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td ul li a.arrow,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td ul li a.arrow {
  position: relative;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td ul li a.arrow:before,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td ul li a.arrow:before {
  content: "";
  border: 12px solid #666;
  border-color: transparent transparent #666 transparent;
  position: absolute;
  bottom: -12px;
  left: 6px;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td ul li:only-child,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td ul li:only-child {
  margin-right: 0px;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td ul li .close a,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td ul li .close a {
  width: 31px;
  height: 31px;
  background-color: transparent;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td ul li .close a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td ul li .close a:hover {
  background-color: transparent;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td .shelf_block,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td .shelf_block {
  background-color: #666;
  color: #fff;
  position: absolute;
  top: 48px;
  left: 0;
  width: 200px;
  display: none;
  border-bottom: none;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 5px;
  z-index: 9;
  text-align: left;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td .shelf_block .shelf_number,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td .shelf_block .shelf_number {
  display: block;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td .type_annotation,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td .type_annotation {
  width: 36px;
  height: 36px;
  background-color: #a0a0a0;
  border-radius: 50%;
  line-height: 36px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  margin: 0 0 0 8px;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.tdswitch,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.tdswitch {
  display: none;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.active,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.active {
  border: 1px solid #dc0122;
  background-color: #dc0122;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.active a,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.active a {
  color: #fff;
  text-decoration: none;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.active a:focus,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.active a:focus {
  box-shadow: none;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.innertable,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.innertable {
  display: none;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.innertable table,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.innertable table {
  border: 4px solid #dc0122;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.innertable table thead,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.innertable table thead {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.innertable table tr,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.innertable table tr {
    margin-bottom: 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.innertable table th,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.innertable table th {
  background-color: #fffadc;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td a.open_innertable,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td a.open_innertable {
  position: relative;
  padding-right: 30px;
  white-space: nowrap;
  display: block;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td a.open_innertable:before,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td a.open_innertable:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #666;
  border-radius: 5px;
  position: absolute;
  right: 0;
  top: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td a.open_innertable:after,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td a.open_innertable:after {
  content: "";
  border: 2px solid #fff;
  width: 6px;
  height: 6px;
  border-top: none;
  border-left: none;
  position: absolute;
  right: 6px;
  top: 4px;
  transform: rotate(45deg);
  transition: 0.5s;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td a.open_innertable.active:after,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td a.open_innertable.active:after {
  transform: rotate(-135deg);
  top: 8px;
}
.mainrightblock .book_detaildata .bookdata2 .bookplace_list table td:last-child .shelf_block,
.mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td:last-child .shelf_block {
  right: 0;
  left: auto;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table {
    background-color: transparent !important;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table thead,
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table tbody,
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table th,
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td,
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table tr,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table thead,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table tbody,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table th,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table tr {
    display: block;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table thead tr,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table tr,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    position: relative;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td {
    border: none !important;
    border-bottom: 1px solid #eee !important;
    position: relative;
    white-space: normal;
    text-align: left;
    display: none;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.tdopen,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.tdopen {
    display: block;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.tdopen.active:before,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.tdopen.active:before {
    color: #fff;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td:before,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td:before {
    content: attr(data-title);
    top: 0.5em;
    left: 0.5em;
    width: 30%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: #000;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td:nth-child(1), .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td:nth-child(2), .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td:nth-child(3), .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td:nth-child(4),
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td:nth-child(1),
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td:nth-child(2),
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td:nth-child(3),
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td:nth-child(4) {
    display: block;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.innertable,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.innertable {
    display: none;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.innertable table,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.innertable table {
    width: 100%;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.tdswitch,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.tdswitch {
    display: block;
    height: 0;
    padding: 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.tdswitch .switch_btn,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.tdswitch .switch_btn {
    position: absolute;
    bottom: 5px;
    right: 10px;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.tdswitch .switch_btn a,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.tdswitch .switch_btn a {
    width: 25px;
    height: 25px;
    display: block;
    position: relative;
    background-color: #005d98;
    border-radius: 5px;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.tdswitch .switch_btn a:before,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.tdswitch .switch_btn a:before {
    content: "";
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-right: none;
    border-bottom: none;
    position: absolute;
    bottom: 9px;
    right: 6px;
    transform: rotate(-135deg);
    transition: 0.5s;
  }
  .mainrightblock .book_detaildata .bookdata2 .bookplace_list table td.tdswitch .switch_btn a.arrowopen:before,
  .mainrightblock2 .book_detaildata .bookdata2 .bookplace_list table td.tdswitch .switch_btn a.arrowopen:before {
    transform: rotate(45deg);
    bottom: 4px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .listdata,
.mainrightblock2 .book_detaildata .bookdata2 .listdata {
  margin: 0 20px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .listdata,
  .mainrightblock2 .book_detaildata .bookdata2 .listdata {
    margin: 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .listdata p,
.mainrightblock2 .book_detaildata .bookdata2 .listdata p {
  line-height: 2em;
  margin-bottom: 30px;
}
.mainrightblock .book_detaildata .bookdata2 .listdata ul,
.mainrightblock2 .book_detaildata .bookdata2 .listdata ul {
  margin: 0;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .listdata ul li,
.mainrightblock2 .book_detaildata .bookdata2 .listdata ul li {
  list-style-type: none;
  background-image: url("../images/icon_point.png");
  background-position: left 8px;
  background-repeat: no-repeat;
  background-size: 6px;
  padding: 0 0 0 15px;
  margin-bottom: 10px;
  display: block;
  word-wrap: break-word;
}
.mainrightblock .book_detaildata .bookdata2 .listdata ul li span,
.mainrightblock2 .book_detaildata .bookdata2 .listdata ul li span {
  display: block;
  color: #999;
}
.mainrightblock .book_detaildata .bookdata2 .listdata ul li a,
.mainrightblock2 .book_detaildata .bookdata2 .listdata ul li a {
  text-decoration: underline;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block {
  display: flex;
  align-items: flex-start;
  margin: 0 30px 20px;
}
@media screen and (max-width: 991px) {
  .mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block,
  .mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block,
  .mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block {
    margin: 0 0 20px;
    flex-wrap: wrap;
  }
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .esdg_logo,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .esdg_logo {
  flex: 0 0 auto;
  flex-basis: 320px;
  max-width: 320px;
  margin-right: 10px;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .esdg_logo img,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .esdg_logo img {
  width: 320px;
}
@media (max-width: 380px) {
  .mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .esdg_logo,
  .mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .esdg_logo {
    margin: 0 0 10px;
    flex-basis: 100%;
    max-width: 100%;
  }
  .mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .esdg_logo img,
  .mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .esdg_logo img {
    width: 100%;
  }
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span {
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a {
  display: block;
  padding: 10px 10px 8px;
  background-color: #ea132e;
  color: #fff;
  border-radius: 5px;
  font-size: 1.25em;
  transform: 0.5s;
  min-width: 30px;
  text-align: center;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a:hover {
  background-color: #d21129;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget1,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget1 {
  background-color: #ea132e;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget1:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget1:hover {
  background-color: #d21129;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget2,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget2 {
  background-color: #a36b01;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget2:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget2:hover {
  background-color: #8a5a01;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget3,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget3 {
  background-color: #6d7e01;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget3:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget3:hover {
  background-color: #576501;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget4,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget4 {
  background-color: #ca1d36;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget4:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget4:hover {
  background-color: #b41a30;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget5,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget5 {
  background-color: #9b4ab1;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget5:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget5:hover {
  background-color: #8b429f;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget6,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget6 {
  background-color: #00819e;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget6:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget6:hover {
  background-color: #006c85;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget7,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget7 {
  background-color: #9a7027;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget7:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget7:hover {
  background-color: #866122;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget8,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget8 {
  background-color: #961838;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget8:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget8:hover {
  background-color: #801430;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget9,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget9 {
  background-color: #be5a02;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget9:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget9:hover {
  background-color: #a54e02;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget10,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget10 {
  background-color: #e1157e;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget10:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget10:hover {
  background-color: #ca1371;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget11,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget11 {
  background-color: #85743f;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget11:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget11:hover {
  background-color: #746537;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget12,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget12 {
  background-color: #9e6b49;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget12:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget12:hover {
  background-color: #8d5f41;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget13,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget13 {
  background-color: #3c8368;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget13:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget13:hover {
  background-color: #34725a;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget14,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget14 {
  background-color: #017cb5;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget14:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget14:hover {
  background-color: #016b9c;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget15,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget15 {
  background-color: #20873f;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget15:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget15:hover {
  background-color: #1b7235;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget16,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget16 {
  background-color: #005488;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget16:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget16:hover {
  background-color: #00446f;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget17,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget17 {
  background-color: #11345f;
}
.mainrightblock .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget17:hover,
.mainrightblock2 .book_detaildata .bookdata2 .E_SDG_logo_block .sdgstargetblock span a.sdgstarget17:hover {
  background-color: #0d2849;
}
.mainrightblock .book_detaildata .bookdata2 .sdgstarget_tab,
.mainrightblock2 .book_detaildata .bookdata2 .sdgstarget_tab {
  margin-bottom: 2em;
}
.mainrightblock .book_detaildata .bookdata2 .sdgstarget_tab ul,
.mainrightblock2 .book_detaildata .bookdata2 .sdgstarget_tab ul {
  margin: 0 30px;
  padding: 0;
  list-style-type: none;
  display: flex;
  border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .sdgstarget_tab ul,
  .mainrightblock2 .book_detaildata .bookdata2 .sdgstarget_tab ul {
    margin: 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .sdgstarget_tab ul li,
.mainrightblock2 .book_detaildata .bookdata2 .sdgstarget_tab ul li {
  margin-right: 0.8em;
  font-size: 1.125em;
  font-weight: bold;
}
.mainrightblock .book_detaildata .bookdata2 .sdgstarget_tab ul li a,
.mainrightblock2 .book_detaildata .bookdata2 .sdgstarget_tab ul li a {
  padding: 0.5em 1em;
  display: block;
  color: #555;
}
.mainrightblock .book_detaildata .bookdata2 .sdgstarget_tab ul li a.active,
.mainrightblock2 .book_detaildata .bookdata2 .sdgstarget_tab ul li a.active {
  color: #3e78c0;
  border-bottom: 6px solid #3e78c0;
}
.mainrightblock .book_detaildata .bookdata2 .listdata_sdg .title,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_sdg .title {
  font-size: 1.25em;
  margin: 0 30px 1em;
  color: #666;
  font-weight: bold;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .listdata_sdg .title,
  .mainrightblock2 .book_detaildata .bookdata2 .listdata_sdg .title {
    margin: 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .listdata_sdg ul,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_sdg ul {
  margin: 0 30px;
  padding: 0;
  list-style-type: none;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .listdata_sdg ul,
  .mainrightblock2 .book_detaildata .bookdata2 .listdata_sdg ul {
    margin: 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .listdata_sdg ul li,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_sdg ul li {
  margin-bottom: 10px;
  padding: 0 0 15px;
  border-bottom: 1px dotted #ccc;
}
.mainrightblock .book_detaildata .bookdata2 .listdata_sdg ul li:last-child,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_sdg ul li:last-child {
  border-bottom: none;
}
.mainrightblock .book_detaildata .bookdata2 .listdata_sdg ul li span,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_sdg ul li span {
  color: #c75100;
  display: block;
  font-weight: bolder;
  font-size: 1.125em;
  margin-bottom: 5px;
  position: relative;
  float: left;
}
.mainrightblock .book_detaildata .bookdata2 .listdata_sdg ul li p,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_sdg ul li p {
  line-height: 1.5em;
  clear: both;
  float: none;
  padding: 0;
  margin: 0;
}
.mainrightblock .book_detaildata .bookdata2 .listdata_content,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_content {
  margin: 0 20px 20px;
  height: 130px;
  overflow: hidden;
  position: relative;
  transition: 0.5s;
}
.mainrightblock .book_detaildata .bookdata2 .listdata_content.open,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_content.open {
  height: auto;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .listdata_content,
  .mainrightblock2 .book_detaildata .bookdata2 .listdata_content {
    margin: 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .listdata_content:before,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_content:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 40px;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0));
}
.mainrightblock .book_detaildata .bookdata2 .listdata_content p,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_content p {
  line-height: 1.7em;
  margin-bottom: 30px;
}
.mainrightblock .book_detaildata .bookdata2 .listdata_content ul,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_content ul {
  margin: 0;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .listdata_content ul li,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_content ul li {
  list-style-type: none;
  background-image: url("../images/icon_point.png");
  background-position: left 6px;
  background-repeat: no-repeat;
  background-size: 6px;
  padding: 0 0 0 15px;
  margin-bottom: 10px;
  display: block;
}
.mainrightblock .book_detaildata .bookdata2 .listdata_content ul li span,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_content ul li span {
  display: block;
  color: #999;
}
.mainrightblock .book_detaildata .bookdata2 .listdata_content ul li a,
.mainrightblock2 .book_detaildata .bookdata2 .listdata_content ul li a {
  text-decoration: underline;
}
.mainrightblock .book_detaildata .bookdata2 .more,
.mainrightblock2 .book_detaildata .bookdata2 .more {
  text-align: right;
}
.mainrightblock .book_detaildata .bookdata2 .more_left,
.mainrightblock2 .book_detaildata .bookdata2 .more_left {
  text-align: left;
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend {
  padding: 0 100px 0 120px;
}
@media screen and (max-width: 1399px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend {
    padding: 0 70px 0 90px;
  }
}
@media screen and (max-width: 991px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend {
    padding: 0 50px 0 60px;
  }
}
@media (max-width: 900px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend {
    padding: 0 20px 0 30px;
  }
}
@media (max-width: 830px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend {
    padding: 0 50px 0 60px;
  }
}
@media (max-width: 380px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend {
    padding: 0 30px 0 30px;
  }
}
@media (max-width: 330px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend {
    padding: 0 15px 0 15px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend div,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend div {
  text-align: center;
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend .books01,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books01 {
  background-color: #e5e5e5;
  border-radius: 4px;
  padding: 15px;
  width: 230px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend .books01 img,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books01 img {
  display: block;
  margin-bottom: 10px;
  width: 100%;
  border: 1px solid #d3d3d3;
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend .books02,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 {
  text-align: center;
  width: 100%;
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul {
  margin: 0;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
  display: inline-block;
  width: 100px;
  margin: 0 35px 20px 0;
  list-style-type: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 1600px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 25px 20px 0;
  }
}
@media (max-width: 1550px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 35px 20px 0;
  }
}
@media (max-width: 1300px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 25px 20px 0;
  }
}
@media (max-width: 1250px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 20px 20px 0;
  }
}
@media (max-width: 1200px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 35px 20px 0;
  }
}
@media (max-width: 900px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 20px 20px 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n),
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n) {
  margin: 0 0 20px 0;
}
@media (max-width: 831px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 75px 20px 0;
  }
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n),
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n) {
    margin: 0 15px 20px 0;
  }
}
@media (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 25px 20px 0;
  }
}
@media (max-width: 670px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 50px 20px;
  }
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n),
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n) {
    margin: 0 50px 20px;
  }
}
@media (max-width: 560px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 30px 20px;
  }
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n),
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n) {
    margin: 0 30px 20px;
  }
}
@media (max-width: 480px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 15px 20px;
  }
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n),
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n) {
    margin: 0 15px 20px;
  }
}
@media (max-width: 420px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 5px 20px;
  }
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n),
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n) {
    margin: 0 5px 20px;
  }
}
@media (max-width: 330px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li {
    margin: 0 3px 20px;
  }
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n),
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li:nth-child(2n) {
    margin: 0 3px 20px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li .bookimg,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li .bookimg {
  border: 1px solid #d3d3d3;
  margin-bottom: 5px;
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend .books02 ul li .bookimg img,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend .books02 ul li .bookimg img {
  display: block;
  width: 100%;
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend .slick-prev,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend .slick-prev {
  background-image: url("../vendor/slick/icon_arrow_left3.png");
  left: 0;
}
.mainrightblock .book_detaildata .bookdata2 .read_recommend .slick-next,
.mainrightblock2 .book_detaildata .bookdata2 .read_recommend .slick-next {
  background-image: url("../vendor/slick/icon_arrow_right3.png");
  right: 0;
}
@media (max-width: 350px) {
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .slick-prev,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .slick-prev {
    left: -15px;
  }
  .mainrightblock .book_detaildata .bookdata2 .read_recommend .slick-next,
  .mainrightblock2 .book_detaildata .bookdata2 .read_recommend .slick-next {
    right: -15px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .tag_cloud,
.mainrightblock2 .book_detaildata .bookdata2 .tag_cloud {
  margin: 0 20px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .tag_cloud,
  .mainrightblock2 .book_detaildata .bookdata2 .tag_cloud {
    margin: 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .tag_cloud ul,
.mainrightblock2 .book_detaildata .bookdata2 .tag_cloud ul {
  margin: 0;
  padding: 0;
}
.mainrightblock .book_detaildata .bookdata2 .tag_cloud ul li,
.mainrightblock2 .book_detaildata .bookdata2 .tag_cloud ul li {
  display: inline-block;
  margin: 0 10px 15px 0;
}
.mainrightblock .book_detaildata .bookdata2 .tag_cloud ul li a,
.mainrightblock2 .book_detaildata .bookdata2 .tag_cloud ul li a {
  display: block;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  color: #313131;
}
.mainrightblock .book_detaildata .bookdata2 .tag_cloud ul li a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .tag_cloud ul li a:hover {
  background-color: #fed857;
}
.mainrightblock .book_detaildata .bookdata2 .rating_review,
.mainrightblock2 .book_detaildata .bookdata2 .rating_review {
  margin: 0 20px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .rating_review,
  .mainrightblock2 .book_detaildata .bookdata2 .rating_review {
    margin: 0;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookscore,
.mainrightblock2 .book_detaildata .bookdata2 .bookscore {
  margin: 0 0px 20px;
  overflow: hidden;
  padding: 20px 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookscore .scoreleft,
.mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreleft {
  float: left;
  width: 100px;
  margin-right: 50px;
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .bookscore .scoreleft,
  .mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreleft {
    width: 100%;
    margin-bottom: 20px;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookscore .scoreleft .fraction,
.mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreleft .fraction {
  font-size: 4em;
  margin-bottom: 25px;
  font-weight: 700;
}
.mainrightblock .book_detaildata .bookdata2 .bookscore .scoreleft .then,
.mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreleft .then {
  color: #333;
  margin-bottom: 7px;
}
.mainrightblock .book_detaildata .bookdata2 .bookscore .scoreleft input[type=button],
.mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreleft input[type=button] {
  background-color: #dcdcdc;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 2px 10px;
  color: #333;
}
.mainrightblock .book_detaildata .bookdata2 .bookscore .scoreright,
.mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreright {
  float: left;
  width: 70%;
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .bookscore .scoreright,
  .mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreright {
    width: 65%;
  }
}
@media screen and (max-width: 575px) {
  .mainrightblock .book_detaildata .bookdata2 .bookscore .scoreright,
  .mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreright {
    width: 100%;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul,
.mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul {
  margin: 0;
  padding: 0;
  width: 100%;
}
.mainrightblock .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul li,
.mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul li {
  list-style-type: none;
}
.mainrightblock .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul li span,
.mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul li span {
  color: #313131;
  display: inline-block;
  margin-right: 20px;
  width: 10px;
}
.mainrightblock .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul li a,
.mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul li a {
  display: inline-block;
  background-color: #e5e5e5;
  height: 8px;
  width: 90%;
  position: relative;
}
@media (max-width: 380px) {
  .mainrightblock .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul li a,
  .mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul li a {
    width: 80%;
  }
}
.mainrightblock .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul li a img,
.mainrightblock2 .book_detaildata .bookdata2 .bookscore .scoreright .proportion ul li a img {
  height: 8px;
  position: absolute;
  top: 0;
  left: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list {
  clear: both;
  float: none;
  margin: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment .commentblock,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 .commentblock,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list .commentblock,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment .commentblock,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 .commentblock,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .commentblock {
  border: 1px solid #ccc;
  padding: 20px;
  margin-right: 15px;
  box-sizing: border-box;
  height: 260px;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment h4,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 h4,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list h4,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment h4,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 h4,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list h4 {
  margin: 0 0 10px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.25em;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment .score_star,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 .score_star,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list .score_star,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment .score_star,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 .score_star,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .score_star {
  position: relative;
  text-align: left;
  width: 100px;
  height: 29px;
  float: left;
  margin: 0 0 10px;
  z-index: 0;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment .score_star > img,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 .score_star > img,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list .score_star > img,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment .score_star > img,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 .score_star > img,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .score_star > img {
  position: absolute;
  z-index: 99;
  width: 100px;
  height: 29px;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment .score_star .score_color,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 .score_star .score_color,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list .score_star .score_color,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment .score_star .score_color,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 .score_star .score_color,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .score_star .score_color {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100px;
  height: 29px;
  overflow: hidden;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment .name,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 .name,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list .name,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment .name,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 .name,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .name {
  float: right;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment p,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 p,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list p,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment p,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 p,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list p {
  clear: both;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment p.haveRows,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 p.haveRows,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list p.haveRows,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment p.haveRows,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 p.haveRows,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list p.haveRows {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.7em;
  height: 5.1em;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment .more,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 .more,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list .more,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment .more,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 .more,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .more {
  margin: 15px 0 0 0 !important;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment .more a,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 .more a,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list .more a,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment .more a,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 .more a,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .more a {
  padding: 0;
  color: #313131;
  background-image: none !important;
  background-color: #fff !important;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment .more a:hover,
.mainrightblock .book_detaildata .bookdata2 .bookcomment2 .more a:hover,
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list .more a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment .more a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment2 .more a:hover,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .more a:hover {
  color: #dd1f03 !important;
}
.mainrightblock .book_detaildata .bookdata2 .commentmore,
.mainrightblock2 .book_detaildata .bookdata2 .commentmore {
  margin: 20px 15px;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list {
  margin: 0 0 50px;
  overflow: hidden;
}
.mainrightblock .book_detaildata .bookdata2 .bookcomment_list .commentblock,
.mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .commentblock {
  width: 23%;
  float: left;
  margin: 0 1% 15px !important;
  height: 250px;
  box-sizing: border-box;
}
@media (max-width: 1300px) {
  .mainrightblock .book_detaildata .bookdata2 .bookcomment_list .commentblock,
  .mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .commentblock {
    width: 31%;
    margin: 0 1.16% 15px !important;
  }
}
@media screen and (max-width: 991px) {
  .mainrightblock .book_detaildata .bookdata2 .bookcomment_list .commentblock,
  .mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .commentblock {
    width: 48%;
    margin: 0 1% 15px !important;
  }
}
@media screen and (max-width: 767px) {
  .mainrightblock .book_detaildata .bookdata2 .bookcomment_list .commentblock,
  .mainrightblock2 .book_detaildata .bookdata2 .bookcomment_list .commentblock {
    width: 100%;
    margin: 0 0 15px !important;
    height: auto;
  }
}
.mainrightblock .book_detaildata .bookdata2 .MARC,
.mainrightblock2 .book_detaildata .bookdata2 .MARC {
  margin-bottom: 30px;
}
.mainrightblock .book_detaildata .bookdata2 .MARC table,
.mainrightblock2 .book_detaildata .bookdata2 .MARC table {
  width: 100%;
  border: none;
}
.mainrightblock .book_detaildata .bookdata2 .MARC table td,
.mainrightblock2 .book_detaildata .bookdata2 .MARC table td {
  border: none;
  white-space: nowrap;
}
@media screen and (max-width: 991px) {
  .mainrightblock .book_detaildata .bookdata2 .MARC table,
  .mainrightblock2 .book_detaildata .bookdata2 .MARC table {
    background-color: transparent !important;
  }
  .mainrightblock .book_detaildata .bookdata2 .MARC table thead,
  .mainrightblock .book_detaildata .bookdata2 .MARC table tbody,
  .mainrightblock .book_detaildata .bookdata2 .MARC table th,
  .mainrightblock .book_detaildata .bookdata2 .MARC table td,
  .mainrightblock .book_detaildata .bookdata2 .MARC table tr,
  .mainrightblock2 .book_detaildata .bookdata2 .MARC table thead,
  .mainrightblock2 .book_detaildata .bookdata2 .MARC table tbody,
  .mainrightblock2 .book_detaildata .bookdata2 .MARC table th,
  .mainrightblock2 .book_detaildata .bookdata2 .MARC table td,
  .mainrightblock2 .book_detaildata .bookdata2 .MARC table tr {
    display: block;
  }
  .mainrightblock .book_detaildata .bookdata2 .MARC table thead tr,
  .mainrightblock2 .book_detaildata .bookdata2 .MARC table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .mainrightblock .book_detaildata .bookdata2 .MARC table tr,
  .mainrightblock2 .book_detaildata .bookdata2 .MARC table tr {
    border-bottom: 1px solid #d3d3d3 !important;
    border-bottom: none;
    margin-bottom: 10px;
  }
  .mainrightblock .book_detaildata .bookdata2 .MARC table td,
  .mainrightblock2 .book_detaildata .bookdata2 .MARC table td {
    border: none !important;
    position: relative;
    white-space: normal;
    text-align: left;
    padding: 0.3em 0.5em;
  }
}
.mainrightblock .book_detaildata .bookdata2 .MARC pre,
.mainrightblock2 .book_detaildata .bookdata2 .MARC pre {
  white-space: pre-wrap;
  word-break: break-all;
  overflow: auto;
}
.mainrightblock .book_detaildata .bookdata2 .borrow_appointment > div,
.mainrightblock2 .book_detaildata .bookdata2 .borrow_appointment > div {
  margin: 0 0 5px;
}
.mainrightblock .book_detaildata .bookdata2 .borrow_appointment > div a,
.mainrightblock2 .book_detaildata .bookdata2 .borrow_appointment > div a {
  display: inline-block;
  margin: 0 15px 8px 0;
}
.mainrightblock .book_detaildata .bookdata2 .borrow_appointment > div span,
.mainrightblock2 .book_detaildata .bookdata2 .borrow_appointment > div span {
  display: inline-block;
}
.mainrightblock .book_detaildata .bookdata2 .borrow_appointment > div span em,
.mainrightblock2 .book_detaildata .bookdata2 .borrow_appointment > div span em {
  font-style: normal;
  padding: 0 5px;
  color: #b94b00;
  font-weight: 600;
}
@media (max-width: 480px) {
  .mainrightblock .book_detaildata .bookdata2 .borrow_appointment > div,
  .mainrightblock2 .book_detaildata .bookdata2 .borrow_appointment > div {
    margin: 0 0 10px;
  }
  .mainrightblock .book_detaildata .bookdata2 .borrow_appointment > div a,
  .mainrightblock2 .book_detaildata .bookdata2 .borrow_appointment > div a {
    display: block;
  }
  .mainrightblock .book_detaildata .bookdata2 .borrow_appointment > div a span,
  .mainrightblock2 .book_detaildata .bookdata2 .borrow_appointment > div a span {
    width: auto;
    text-align: center;
  }
}

.mainrightblock2 .book_detail {
  float: left;
  width: 200px !important;
  margin: 0 20px !important;
  display: block !important;
  border: none;
  padding: 20px !important;
}
@media screen and (max-width: 767px) {
  .mainrightblock2 .book_detail {
    display: block;
    padding: 0;
    border: none;
    margin: 20px;
  }
}
@media (max-width: 480px) {
  .mainrightblock2 .book_detail {
    float: none;
    clear: both;
    margin: 20px auto !important;
    width: 200px;
    padding: 0px !important;
  }
}
.mainrightblock2 .listdata {
  margin: 0 !important;
}

.cp_content {
  width: 90%;
  margin: 40px auto 50px;
  box-sizing: border-box;
}
.cp_content h3 {
  font-size: 1.375em;
  margin: 15px 0 15px;
  color: #005d98;
  line-height: 1.4em;
}
.cp_content h4 {
  font-size: 1.125em;
  margin: 15px 0 15px;
}
.cp_content ol,
.cp_content ul {
  margin-bottom: 30px;
}
.cp_content ol li,
.cp_content ul li {
  margin-bottom: 14px;
  line-height: 1.5em;
}
@media screen and (max-width: 575px) {
  .cp_content table {
    overflow-x: auto;
  }
}
.cp_content p {
  margin: 0 0 20px;
  line-height: 1.8em;
}

.publish_info {
  margin: 10px 0 !important;
  padding: 0;
  text-align: right;
}
.publish_info li {
  display: inline-block;
  margin-left: 20px;
  position: relative;
}
.publish_info li:before {
  content: "";
  width: 1px;
  height: 15px;
  background-color: #333;
  position: absolute;
  left: -13px;
  top: 5px;
  transform: skewX(-30deg);
}
.publish_info li:first-child:before {
  display: none;
}

.not_included {
  padding: 25px;
  background-color: #f3f3f3;
  color: #333;
  text-align: center;
}

.reserve_block {
  padding: 10px 30px 0;
  background-color: #666;
  color: #eee;
}
.reserve_block.fixed {
  position: fixed;
  top: 55px;
  width: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  z-index: 10;
  scrollbar-face-color: #eee;
  scrollbar-highlight-color: #fff;
  scrollbar-shadow-color: #fff;
  scrollbar-3dlight-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-arrow-color: #666;
  scrollbar-track-color: #fff;
}
@media (max-width: 767px) {
  .reserve_block.fixed {
    width: 90%;
  }
}
.reserve_block .title {
  margin: 10px 0 15px !important;
  color: #fff !important;
}
.reserve_block .form_grid .form_grp {
  border-bottom: 1px solid #bbb;
  padding: 0.4em 0 0.2em;
}
.reserve_block .form_grid .form_grp.single_field .form_title {
  width: auto !important;
  padding: 0.3em 0.3em 0.3em 0;
  color: #eee;
}
.reserve_block .form_grid .form_grp.single_field .form_content {
  width: auto !important;
  padding: 0.3em 0;
}
@media (max-width: 500px) {
  .reserve_block .form_grid .form_grp.single_field .form_title {
    width: 100% !important;
  }
  .reserve_block .form_grid .form_grp.single_field .form_content {
    width: 100% !important;
  }
}
.reserve_block .form_grid .form_grp .form_title {
  width: auto !important;
  padding: 0.3em 0.3em 0.3em 0;
  color: #eee;
  font-weight: bolder;
}
.reserve_block .form_grid .form_grp .form_content {
  width: auto !important;
  padding: 0.3em 0;
}
@media (max-width: 500px) {
  .reserve_block .form_grid .form_grp .form_title {
    width: 100% !important;
  }
  .reserve_block .form_grid .form_grp .form_content {
    width: 100% !important;
  }
}

.fp {
  margin: 1em auto;
  box-sizing: border-box;
  padding: 1em;
}

/* sitemap */
.sitemap {
  margin: 40px auto 30px;
  width: 90%;
  color: #666;
  clear: both;
  zoom: 1;
}
.sitemap:before, .sitemap:after {
  content: "";
  display: table;
}
.sitemap:after {
  clear: both;
}
.sitemap .accesskeyDefine {
  padding: 1em 2em;
  background: #eee;
  border-radius: 6px;
}
.sitemap .accesskeyDefine li {
  margin-bottom: 5px;
}
.sitemap p {
  line-height: 1.5em;
}

.cascading {
  margin: 0;
  padding: 0;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}
.cascading ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.cascading li {
  margin: 0 1% 1em;
  line-height: 1.5em;
  font-size: 1em;
  list-style: none;
  width: 23%;
  vertical-align: top;
}
@media screen and (max-width: 767px) {
  .cascading li {
    width: 48%;
  }
}
@media screen and (max-width: 575px) {
  .cascading li {
    width: 100%;
    margin: 0 0 1em;
  }
}
.cascading li a {
  margin: 10px 0px;
  color: #333;
  padding: 0.5em;
  display: block;
  font-size: 1.25em;
  font-weight: bold;
  border-bottom: 2px solid #005d98;
}
.cascading li a:hover, .cascading li a:focus {
  color: #005d98 !important;
  text-decoration: none;
}
.cascading li ul {
  margin-left: 0px;
  padding-left: 0%;
}
.cascading li ul li {
  width: 100%;
  display: block !important;
  margin-bottom: 0;
}
.cascading li ul li a {
  margin-top: 0px;
  margin-bottom: 0px;
  display: block;
  font-size: 1em;
  border-bottom: 1px dotted #ccc;
  background-color: transparent;
  font-weight: normal;
  color: #666;
  font-weight: normal;
}

.qp {
  margin: 1em auto;
  box-sizing: border-box;
  padding: 1em;
}

@media screen and (max-width: 767px) {
  .keyboardInputInitiator {
    display: none;
  }
}
.search_blockin {
  background-image: url("../images/search_blockinbg01.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  margin: 0;
  padding: 20px 0;
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .search_blockin {
    min-height: 130px;
    height: auto;
  }
}
.search_blockin .container {
  max-width: 1400px;
}
.search_blockin .col {
  padding-left: 10px;
  padding-right: 10px;
}
.search_blockin .searchsystem {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-size: 1em;
  overflow: hidden;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
  .search_blockin .searchsystem {
    width: 70%;
  }
}
@media (max-width: 992px) {
  .search_blockin .searchsystem {
    width: 85%;
  }
}
@media (max-width: 700px) {
  .search_blockin .searchsystem {
    width: 100%;
  }
}
.search_blockin .searchsystem.searchblackbg {
  background-color: rgba(0, 0, 0, 0.5);
}
.search_blockin .searchsystem.diminutive {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 50px;
  padding-bottom: 40px;
}
.search_blockin .searchsystem.diminutive .searchtitle {
  flex: 0 0 auto;
}
@media screen and (max-width: 575px) {
  .search_blockin .searchsystem.diminutive {
    flex-wrap: wrap;
  }
  .search_blockin .searchsystem.diminutive .searchtitle {
    flex-basis: 100%;
  }
}
.search_blockin .searchsystem.diminutive .diminutive_link {
  margin-left: 40px;
  flex: 0 0 auto;
}
@media screen and (max-width: 575px) {
  .search_blockin .searchsystem.diminutive .diminutive_link {
    margin-left: 0px;
  }
}
.search_blockin .searchsystem.diminutive .diminutive_link a {
  color: #fff;
  display: block;
  position: relative;
  padding: 3px 10px 3px 25px;
  transition: 0.5s;
  border-radius: 5px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.search_blockin .searchsystem.diminutive .diminutive_link a:before {
  content: "";
  border: 6px solid #fff;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  position: absolute;
  left: 10px;
  top: 8px;
}
.search_blockin .searchsystem.diminutive .diminutive_link a:hover {
  background-color: #000;
}
.search_blockin .searchsystem .searchtitle {
  color: #fff;
  font-size: 1.687em;
  margin-bottom: 15px;
  letter-spacing: 0.05em;
  line-height: 1.2em;
}
.search_blockin .searchsystem .select_left {
  float: left;
  width: 27%;
  margin-right: 0;
  margin-bottom: 5px;
}
@media (max-width: 575px) {
  .search_blockin .searchsystem .select_left {
    width: 100%;
    margin: 0;
  }
}
.search_blockin .searchsystem .select_left select {
  background-color: #fff;
  border-radius: 0;
  border: none;
  font-size: 1em;
  height: 2.5em;
  line-height: 2.2em;
  border: none !important;
  border-right: 1px solid #d3d3d3 !important;
}
.search_blockin .searchsystem .select_left select:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 inset;
}
.search_blockin .searchsystem .form_search {
  float: left;
  background-color: #fff;
  width: 73%;
  margin: 0 auto 5px;
  text-align: left;
  padding: 0px;
  overflow: hidden;
  height: 40px;
  box-shadow: none;
}
@media (max-width: 575px) {
  .search_blockin .searchsystem .form_search {
    width: 100%;
    margin: 0 0 5px;
  }
}
.search_blockin .searchsystem .form_search input[type=text] {
  border-radius: 0;
  border: none;
  font-size: 1em;
  width: 80%;
  padding: 12px 10px 10px;
  font-weight: normal;
  margin: 0;
  height: 2.5em;
  color: #333;
}
@media screen and (max-width: 767px) {
  .search_blockin .searchsystem .form_search input[type=text] {
    width: 75%;
  }
}
@media screen and (max-width: 575px) {
  .search_blockin .searchsystem .form_search input[type=text] {
    width: 70%;
  }
}
@media (max-width: 480px) {
  .search_blockin .searchsystem .form_search input[type=text] {
    width: 70%;
  }
}
@media (max-width: 380px) {
  .search_blockin .searchsystem .form_search input[type=text] {
    width: 60%;
  }
}
.search_blockin .searchsystem .form_search input[type=text].nobtn {
  width: 89%;
}
.search_blockin .searchsystem .form_search input {
  padding: 15px;
}
.search_blockin .searchsystem .form_search input[type=submit] {
  margin: 0;
  background-color: #dd1f03;
  border: none;
  border-radius: 0;
  float: right;
  height: 40px;
  background-image: url("../images/icon_search01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 25px;
  width: 52px;
  min-width: auto;
}
.search_blockin .searchsystem .form_search input[type=submit]:focus {
  background-color: #c2230b;
}
.search_blockin .searchsystem .form_search ::-webkit-input-placeholder {
  /* Chrome */
  color: #666;
}
.search_blockin .searchsystem .form_search :-ms-input-placeholder {
  /* IE 10+ */
  color: #666;
}
.search_blockin .searchsystem .form_search ::-moz-placeholder {
  /* Firefox 19+ */
  color: #666;
  opacity: 1;
}
.search_blockin .searchsystem .form_search :-moz-placeholder {
  /* Firefox 4 - 18 */
  color: #666;
  opacity: 1;
}
.search_blockin .searchsystem .onlysearch {
  float: none;
  clear: both;
  color: #fff;
  margin: 5px 0;
  text-align: left;
}
.search_blockin .searchsystem .onlysearch input {
  margin-right: 5px !important;
}
.search_blockin .searchsystem .btn_grp {
  margin: 0;
  clear: both;
  text-align: left;
  padding: 0 0 10px;
  float: none;
  clear: both;
}
.search_blockin .searchsystem .btn_grp a {
  padding: 5px 15px 5px 10px;
  margin-bottom: 7px;
  margin-left: 0;
  margin-right: 0;
  display: inline-block;
  color: #fff;
  position: relative;
}
.search_blockin .searchsystem .btn_grp a:before {
  content: "";
  position: absolute;
  border: 7px solid #fff;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  top: 10px;
  left: 0px;
  display: block;
}
.search_blockin .searchsystem .btn_grp a:hover {
  color: #fed857;
  text-decoration: underline;
}
.search_blockin .searchsystem .btn_grp a.addfield {
  background-color: #005d98;
  border-radius: 5px;
  margin: 0 10px 7px 0;
  padding: 5px 10px 5px 20px;
}
.search_blockin .searchsystem .btn_grp a.addfield:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
}
.search_blockin .searchsystem .query_word {
  text-align: left;
  color: #fff;
  padding: 10px 0 0 65px;
  border-top: 1px solid #fff;
  clear: both;
}
.search_blockin .searchsystem .query_word span {
  margin-left: -65px;
}
@media (max-width: 480px) {
  .search_blockin .searchsystem .query_word {
    padding: 10px 0 0 0;
  }
  .search_blockin .searchsystem .query_word span {
    display: block;
    margin-left: 0;
    margin-bottom: 10px;
  }
}
.search_blockin .searchsystem .form_advanced {
  margin: 0 0 5px;
  display: none;
  float: none;
  clear: both;
}
.search_blockin .searchsystem .form_advanced table {
  border: none;
}
.search_blockin .searchsystem .form_advanced table td {
  border: none;
  padding: 0;
  vertical-align: top;
  float: left;
}
.search_blockin .searchsystem .form_advanced table td:nth-child(1), .search_blockin .searchsystem .form_advanced table td:nth-child(2) {
  width: 15%;
}
.search_blockin .searchsystem .form_advanced table td:nth-child(3) {
  width: 70%;
}
.search_blockin .searchsystem .form_advanced table td.adddelbtn {
  width: 100% !important;
}
@media (max-width: 575px) {
  .search_blockin .searchsystem .form_advanced table td:nth-child(1) {
    width: 50%;
  }
  .search_blockin .searchsystem .form_advanced table td:nth-child(2) {
    width: 50%;
  }
  .search_blockin .searchsystem .form_advanced table td:nth-child(3) {
    width: 100%;
  }
  .search_blockin .searchsystem .form_advanced table td:nth-child(4) {
    width: 100%;
    display: block;
    text-align: left;
  }
}
.search_blockin .searchsystem .form_advanced .select_left {
  width: 100%;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .search_blockin .searchsystem .form_advanced .select_left {
    display: block;
  }
}
.search_blockin .searchsystem .form_advanced .select_left select {
  background-color: #fff;
  border: 1px solid #d3d3d3;
  font-size: 1em;
  box-shadow: none;
  padding: 0 24px 0 0.5em;
  height: 40px;
  line-height: 2.2em;
}
.search_blockin .searchsystem .form_advanced .select_left select:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 inset;
}
.search_blockin .searchsystem .form_advanced .form_search {
  box-shadow: none;
  width: 100%;
  margin: 0;
  padding: 0 24px 0 0.5em !important;
  height: 40px;
  box-shadow: none;
  line-height: 2em;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .search_blockin .searchsystem .form_advanced .form_search {
    padding: 0 0.5em !important;
  }
}
.search_blockin .searchsystem .form_advanced .form_search input[type=text] {
  border-radius: 0;
  border: none;
  font-size: 1em;
  width: 93.2%;
  padding: 7px 10px 5px 0;
  font-weight: normal;
  margin: 0;
  color: #333;
}
@media screen and (max-width: 767px) {
  .search_blockin .searchsystem .form_advanced .form_search input[type=text] {
    width: 100%;
  }
}
.search_blockin .searchsystem .form_advanced ul {
  margin: 5px 0 0;
  padding: 0;
  float: right;
}
.search_blockin .searchsystem .form_advanced ul li {
  display: inline-block;
  margin: 0 3px;
}
.search_blockin .searchsystem .form_advanced ul li a {
  display: block;
}
.search_blockin .searchsystem .form_advanced ul li a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.search_blockin .searchsystem .form_advanced .onlysearchin {
  float: left;
  color: #fff;
  margin-top: 5px;
}
.search_blockin .searchsystem .form_advanced .onlysearchin input {
  margin-right: 5px !important;
}
.search_blockin .searchsystem .form_advanced .btn_grp {
  margin: 5px 0 15px;
  clear: both;
  float: none;
}
@media screen and (max-width: 767px) {
  .search_blockin .searchsystem .form_advanced .btn_grp {
    text-align: center;
  }
}
.search_blockin .searchsystem .form_advanced .btn_grp input[type=submit] {
  background-color: #dd1f03;
  border: 1px solid #5f0d01;
}
.search_blockin .searchsystem .form_advanced .btn_grp input[type=submit]:hover {
  background-color: #bd1b03;
}

.search_blockin2 {
  background-image: url("../images/search_blockinbg01.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  margin: 0;
  padding: 0;
  height: 80px;
  position: relative;
  box-sizing: border-box;
}

.advanced_search {
  width: 90%;
  margin: 40px auto 50px;
  border-radius: 5px;
  z-index: 9999;
  background-image: url("../images/advanced_searchbg.png");
  background-repeat: repeat-x;
  background-position: left top;
}
.advanced_search .advanced_block {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 1em;
  box-sizing: border-box;
}
@media (max-width: 992px) {
  .advanced_search .advanced_block {
    width: 100%;
  }
}
.advanced_search .advanced_block .close {
  display: none;
}
@media screen and (max-width: 767px) {
  .advanced_search .advanced_block .close {
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 9999999;
    cursor: pointer;
  }
}
.advanced_search .advanced_block .searchsystem {
  width: 100%;
  border-bottom: 1px dotted #d3d3d3;
}
@media screen and (max-width: 767px) {
  .advanced_search .advanced_block .searchsystem {
    margin-bottom: 5px;
  }
}
.advanced_search .advanced_block .searchsystem table {
  border: none;
}
.advanced_search .advanced_block .searchsystem table td {
  border: none;
  padding: 0 5px 5px 0;
  vertical-align: top;
}
@media screen and (max-width: 767px) {
  .advanced_search .advanced_block .searchsystem table td {
    display: block;
    overflow: hidden;
  }
}
.advanced_search .advanced_block .searchsystem .select_left {
  width: 100%;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .advanced_search .advanced_block .searchsystem .select_left {
    display: block;
  }
}
.advanced_search .advanced_block .searchsystem .select_left select {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  font-size: 1em;
  padding: 0 24px 0 0.5em;
  height: 2.4em;
  line-height: 2.4em;
}
.advanced_search .advanced_block .searchsystem .form_search {
  box-shadow: none;
  width: 100%;
  margin: 0;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  padding: 0 24px 0 0.5em !important;
  height: 2.4em;
  line-height: 2em;
  background-color: #fff;
  box-sizing: border-box;
}
.advanced_search .advanced_block .searchsystem .form_search input[type=text] {
  border-radius: 0;
  border: none;
  font-size: 1em;
  width: 90%;
  padding: 7px 10px 5px 0;
  font-weight: normal;
  margin: 0;
  color: #333;
}
.advanced_search .advanced_block .searchsystem ul {
  margin: 5px 0 0;
  padding: 0;
}
.advanced_search .advanced_block .searchsystem ul li {
  display: inline-block;
  margin: 0 3px;
}
@media screen and (max-width: 767px) {
  .advanced_search .advanced_block .searchsystem ul li {
    margin: 0 3px 5px;
  }
}
.advanced_search .advanced_block .searchsystem ul li a {
  display: block;
}
.advanced_search .advanced_block .searchsystem ul li a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.advanced_search .advanced_block .searchsystem .btn_grp {
  margin: 5px 0 15px;
  clear: both;
  float: none;
}
.advanced_search .advanced_block h2 {
  text-align: left;
  margin: 0 0 10px;
  padding: 0;
  font-size: 1.125em;
  color: #59493f;
}
.advanced_search .advanced_block .col-6 {
  margin: 20px 0;
}
.advanced_search .advanced_block .col-6 .col {
  padding: 0;
}
.advanced_search .advanced_block .col-6 .rightcol {
  padding-right: 15px;
}
.advanced_search .advanced_block .col-6 .leftcol {
  padding-left: 15px;
}
@media screen and (max-width: 767px) {
  .advanced_search .advanced_block .col-6 .rightcol,
  .advanced_search .advanced_block .col-6 .leftcol {
    padding-right: 0;
    padding-left: 0;
  }
}
.advanced_search .advanced_block .searchblockdata {
  text-align: left;
  margin-bottom: 15px;
  float: none;
  clear: both;
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 1px dotted #d3d3d3;
  width: 100%;
}
.advanced_search .advanced_block .searchblockdata .radio_grp {
  margin-left: 2px;
}
.advanced_search .advanced_block .searchblockdata .radio_grp label input[type=radio] {
  margin-right: 8px;
}
.advanced_search .advanced_block .searchblockdata .radio_grp select {
  width: 97%;
}
@media screen and (max-width: 767px) {
  .advanced_search .advanced_block .searchblockdata .radio_grp select {
    width: 100%;
  }
}
.advanced_search .advanced_block .searchblockdata .radio_grp select:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 inset;
}
.advanced_search .advanced_block .searchblockdata .form_content .to {
  float: left;
  margin: 5px 0 0;
  width: 6%;
  text-align: center;
}
@media (max-width: 580px) {
  .advanced_search .advanced_block .searchblockdata .form_content .to {
    display: none;
  }
}
.advanced_search .advanced_block .searchblockdata .form_content .select_date {
  width: 45% !important;
}
@media (max-width: 580px) {
  .advanced_search .advanced_block .searchblockdata .form_content .select_date {
    width: 99% !important;
  }
}
.advanced_search .advanced_block .searchblockdata .form_content .select_date input {
  width: 100% !important;
}
.advanced_search .advanced_block .searchblockdata .form_content .select_date2 {
  float: left;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 0.3em;
  background-color: #fff;
  width: 46% !important;
}
@media (max-width: 580px) {
  .advanced_search .advanced_block .searchblockdata .form_content .select_date2 {
    width: 99% !important;
    float: none;
  }
}
.advanced_search .advanced_block .searchblockdata .form_content .select_date2 input {
  margin-bottom: 0;
  border: none;
  padding: 0.4em;
  width: 70% !important;
}
.advanced_search .advanced_block .searchblockdata .form_content .select_date2 .image {
  vertical-align: middle;
  width: 24px;
  float: right;
  margin: 5px 5px 0 0;
}
.advanced_search .advanced_block .searchblockdata .form_content .select_date2 .image img {
  width: 24px;
}
.advanced_search .advanced_block .searchblockdata .form_content .select_date2 .image a {
  display: block;
}
.advanced_search .advanced_block .searchblockdata .form_content .select_date2 .image a img {
  width: 24px;
}
.advanced_search .advanced_block .searchblockdata .form_content .ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
  z-index: 9 !important;
}
.advanced_search .advanced_block .btn_grp {
  clear: both;
}
.advanced_search .advanced_block .btn_grp input[type=submit] {
  background: #dd1f03;
  border: 1px solid #5f0d01;
}
.advanced_search .advanced_block .btn_grp input[type=submit]:hover {
  background: #b51902;
}
.advanced_search .advanced_block .btn_grp input[type=submit]:focus {
  border: 1px solid #dd1f03;
  box-shadow: 0 0px 0px 2px #f1ad00;
}

.imitateselect_block {
  position: relative;
  width: 100%;
}
.imitateselect_block .select {
  line-height: 2.4em;
  height: 2.4em;
  padding: 0 24px 0 0.5em;
  border: 1px solid #d3d3d3 !important;
  background: #fff url(../images/basic/icon_select_arrow.svg) no-repeat right center;
  background-size: 25px;
  margin-right: 2px;
  margin-bottom: 0;
  display: inline-block;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}
.imitateselect_block .selectdownblock {
  border: 1px solid #d3d3d3;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  display: none;
  position: absolute;
  top: 2.5em;
  left: 0;
  z-index: 9;
  width: 100%;
  max-height: 300px;
  overflow-y: scroll;
  box-sizing: border-box;
}
.imitateselect_block .selectdownblock ul {
  margin: 0;
  padding: 0;
}
.imitateselect_block .selectdownblock ul li {
  list-style: none;
  padding: 0;
}
.imitateselect_block .selectdownblock ul li input {
  margin-right: 8px;
  vertical-align: middle;
}

.maincolumn {
  position: relative;
  background-color: #fff;
}
.maincolumn .mainleftblock_overlay {
  display: none;
}
@media screen and (max-width: 767px) {
  .maincolumn .mainleftblock_overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
  }
}
.maincolumn .mainleftblock {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  width: 250px;
  float: left;
  box-sizing: border-box;
  padding-top: 15px;
  padding-bottom: 30px;
  position: relative;
  padding-right: 0px;
}
@media screen and (max-width: 991px) {
  .maincolumn .mainleftblock {
    width: 230px;
  }
}
.maincolumn .mainleftblock:before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #d3d3d3;
}
@media screen and (max-width: 767px) {
  .maincolumn .mainleftblock {
    position: fixed;
    left: -100%;
    top: 0;
    overflow-y: scroll;
    width: 100%;
    padding-right: 30px;
    padding-top: 50px;
    transition: 0.5s;
    height: 100%;
    display: none;
    background-color: #fff;
    z-index: 11;
  }
}
.maincolumn .mainleftblock .close {
  display: none;
}
@media screen and (max-width: 767px) {
  .maincolumn .mainleftblock .close {
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
  }
}
.maincolumn .mainleftblock .mainleftcontent {
  padding-right: 15px;
}
.maincolumn .mainleftblock .mainleftcontent.fixed {
  position: fixed;
  top: 55px;
  overflow-y: scroll;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 70px;
  z-index: 9;
  scrollbar-face-color: #eee;
  scrollbar-highlight-color: #fff;
  scrollbar-shadow-color: #fff;
  scrollbar-3dlight-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-arrow-color: #666;
  scrollbar-track-color: #fff;
}
.maincolumn .mainleftblock .mainleftcontent.fixed .limit h2 {
  padding-top: 20px;
}
.maincolumn .mainrightblock {
  width: calc(100% - 250px);
  float: left;
  position: relative;
}
@media screen and (max-width: 991px) {
  .maincolumn .mainrightblock {
    width: calc(100% - 230px);
  }
}
.maincolumn .mainrightblock:before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: -1px;
  top: 0;
  background-color: #d3d3d3;
}
@media screen and (max-width: 767px) {
  .maincolumn .mainrightblock {
    width: 100%;
  }
}
.maincolumn .mainrightblock2 {
  float: left;
  width: 100%;
}
@media (min-width: 768px) {
  .maincolumn .mainrightblock2 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .maincolumn .mainrightblock2 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1400px) {
  .maincolumn .mainrightblock2 {
    float: left;
    width: 100%;
  }
}

.maincolumn_cp {
  position: relative;
  background-color: #fff;
}
.maincolumn_cp .mainleftblock_overlay {
  display: none;
}
@media screen and (max-width: 767px) {
  .maincolumn_cp .mainleftblock_overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
  }
}
.maincolumn_cp .mainleftblock {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  width: 250px;
  float: left;
  box-sizing: border-box;
  padding-top: 15px;
  padding-bottom: 30px;
  position: relative;
  padding-right: 0px;
}
.maincolumn_cp .mainleftblock:before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #d3d3d3;
}
@media screen and (max-width: 767px) {
  .maincolumn_cp .mainleftblock {
    position: fixed;
    left: -100%;
    top: 0;
    overflow-y: scroll;
    width: 100%;
    padding-right: 30px;
    padding-top: 50px;
    transition: 0.5s;
    height: 100%;
    display: none;
    background-color: #fff;
    z-index: 11;
  }
}
.maincolumn_cp .mainleftblock .close {
  display: none;
}
@media screen and (max-width: 767px) {
  .maincolumn_cp .mainleftblock .close {
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
  }
}
.maincolumn_cp .mainleftblock .mainleftcontent.fixed {
  position: fixed;
  left: 0;
  top: 70px;
  overflow-y: scroll;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 70px;
  z-index: 99999;
  scrollbar-face-color: #eee;
  scrollbar-highlight-color: #ccc;
  scrollbar-shadow-color: #ccc;
  scrollbar-3dlight-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-arrow-color: #666;
  scrollbar-track-color: #fff;
}
.maincolumn_cp .mainrightblock {
  width: calc(100% - 250px);
  float: left;
  position: relative;
}
.maincolumn_cp .mainrightblock:before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: -1px;
  top: 0;
  background-color: #d3d3d3;
}
@media screen and (max-width: 767px) {
  .maincolumn_cp .mainrightblock {
    width: 100%;
  }
}
.maincolumn_cp .mainrightblock2 {
  float: left;
  width: 100%;
}
@media (min-width: 768px) {
  .maincolumn_cp .mainrightblock2 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .maincolumn_cp .mainrightblock2 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1400px) {
  .maincolumn_cp .mainrightblock2 {
    float: left;
    width: 100%;
  }
}

.limit_range {
  display: none;
}
@media screen and (max-width: 767px) {
  .limit_range {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 4;
  }
  .limit_range a {
    display: block;
    text-align: center;
    padding: 15px 8px;
    background-image: none;
    background-color: #d5d5d5;
    color: #333;
    border-radius: 0;
    font-size: 1.125em;
  }
  .limit_range a img {
    vertical-align: middle;
    margin-right: 10px;
  }
  .limit_range a:hover {
    color: #000;
  }
}

.limit h2 {
  color: #774e2b;
  font-size: 1.25em;
  margin: 0px 0 5px;
  padding: 0;
}
.limit .condition_block {
  border: 1px solid #d2d2d2;
  padding: 5px 15px;
  margin: 0 0 15px;
  overflow: hidden;
  border-radius: 4px;
}
.limit .condition_block h3 {
  font-size: 1em;
  margin: 13px 0 5px;
  padding: 0;
}
.limit .condition_block .condition {
  position: relative;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  padding: 3px 30px 3px 10px;
  margin: 0 0 6px;
  float: none;
}
.limit .condition_block .condition span {
  position: absolute;
  top: 0px;
  right: 5px;
}
.limit .condition_block .condition a {
  display: block;
  padding: auto;
  background: none;
  line-height: auto;
  border: none !important;
  text-decoration: none;
  color: #666;
}
.limit .condition_block .condition a:hover {
  border: none !important;
  box-shadow: none;
  color: #333;
  background-color: transparent !important;
}
.limit .condition_block .cancel {
  float: right;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  margin: 10px 0;
}
.limit .condition_block .cancel a {
  display: block;
  background-image: url("../images/icon_cancel.png");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding: 3px 10px 3px 30px;
}

.publication_year {
  border: 1px solid #d2d2d2;
  padding: 15px 10px;
  margin: 0 0 25px;
  border-radius: 3px;
  text-align: center;
}
@media screen and (max-width: 991px) {
  .publication_year {
    padding: 15px 3px;
  }
}
.publication_year h2 {
  margin: 0 0 10px;
  padding: 0;
  font-size: 1.125em;
}
.publication_year p {
  padding: 0;
  margin: 0 0px 15px;
  text-align: center;
  clear: both;
}
.publication_year label {
  width: 70px;
  display: inline-block;
  text-align: center;
}
.publication_year input[type=text] {
  border: 1px solid #d2d2d2;
  color: #666;
  font-weight: bold;
  width: 27%;
  display: inline-block;
  padding: 3px 5px;
  text-align: center;
}
.publication_year input[type=tel] {
  border: 1px solid #d2d2d2;
  color: #666;
  font-weight: bold;
  width: 27%;
  display: inline-block;
  padding: 3px 5px;
  text-align: center;
}

input.hasDatepicker {
  cursor: pointer;
}

.ui-datepicker {
  border-width: 0;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 18.5rem;
  z-index: 999;
}

@media (max-width: 480px) {
  .ui-datepicker {
    width: 17rem;
  }
}
.ui-datepicker.ui-corner-all {
  border-radius: 0;
}

.ui-datepicker .ui-datepicker-header {
  background: #666666;
  padding: 15px 0;
  border-width: 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  top: 15px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  background: transparent;
  width: 0px;
  height: 0px;
  border-width: 5px 9px;
  border-style: solid;
  border-color: transparent;
  margin-top: 0;
  top: 32%;
}

.ui-datepicker .ui-datepicker-prev span {
  left: 59%;
  border-right-color: #fff;
  border-left-width: 0;
}

.ui-datepicker .ui-datepicker-next span {
  left: 67%;
  border-left-color: #fff;
  border-right-width: 0;
}

.ui-datepicker .ui-datepicker-title {
  text-shadow: none;
}

.ui-datepicker .ui-datepicker-title select {
  border: 0;
  height: 1.7em;
  width: 45%;
  width: calc(49% - 5px);
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #414141;
  padding-left: 5px;
  line-height: 1.7em;
  font-weight: normal;
}

.ui-datepicker .ui-datepicker-title select:focus {
  outline: none;
}

.ui-datepicker .ui-datepicker-title .ui-datepicker-month {
  margin-right: 5px;
}

.ui-datepicker .ui-datepicker-title .ui-datepicker-year {
  margin-left: 5px;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  transition: all 0.15s ease-in-out;
  background: #fff;
  border: 0px;
  font-weight: 600;
  margin: 10px 5px;
  padding: 5px 12px;
  font-size: 1em;
  text-transform: uppercase;
  box-shadow: none;
}

.ui-datepicker .ui-datepicker-buttonpane button[data-handler=today]:hover,
.ui-datepicker .ui-datepicker-buttonpane button[data-handler=today]:active {
  opacity: 1;
  color: #4f4f4f;
}

.ui-datepicker .ui-datepicker-buttonpane button[data-handler=hide]:hover,
.ui-datepicker .ui-datepicker-buttonpane button[data-handler=hide]:active {
  color: #666666;
}

.ui-datepicker table {
  margin-top: 0.625rem;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 0.938em;
}

.ui-datepicker th {
  font-weight: 600;
  text-transform: uppercase;
  background-color: #fff;
  padding: 0.3em 0.3em;
}

.ui-datepicker th.ui-datepicker-week-end * {
  color: #666666;
}

.ui-datepicker td span,
.ui-datepicker td a {
  padding: 0.3em 0.2em;
  font-size: 0.938em;
  text-align: center;
}

.ui-datepicker-calendar .ui-state-default {
  border: none;
  background: transparent;
}

.ui-datepicker td .ui-state-default.ui-state-hover {
  border-color: transparent;
  text-shadow: none;
  background: #ddd;
  font-weight: normal;
  color: #333;
}

.ui-datepicker td .ui-state-highlight {
  color: #dc0122;
}

.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-active.ui-state-highlight,
.ui-datepicker td .ui-state-active.ui-state-hover {
  text-shadow: none;
  font-weight: 400;
  background: #666666;
  border-color: #666666;
  color: #fff;
}

.ui-datepicker td.ui-datepicker-week-end * {
  color: #949494;
}

.ui-datepicker td.ui-datepicker-week-end .ui-state-active {
  color: #fff;
}

.ui-datepicker .ui-datepicker-today {
  border: solid 1px #fff;
}

.ui-datepicker .ui-datepicker-today .ui-state-default.ui-state-highlight {
  color: #dc0122;
}

.ui-datepicker .ui-datepicker-today .ui-state-default.ui-state-highlight.ui-state-active {
  background-color: #666;
  color: #fff;
}

.ui-datepicker .ui-datepicker-today .ui-state-default.ui-state-highlight.ui-state-hover {
  background-color: #fde6a0;
  color: #dc0122;
}

.ui-datepicker .ui-widget-content {
  border-color: #e3e3e3;
}

.ui-datepicker .ui-widget-content [type=button] {
  font-size: 0.938em;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.ui-datepicker-trigger {
  margin: 10px;
}

.datepicker.sample {
  margin-left: 50px;
}

.sort_block {
  margin: 20px 0 0px;
}
.sort_block form input {
  border-radius: 3px !important;
}
.sort_block .sortlist_block {
  border-top: 1px solid #d5d5d5;
  margin: 0 0 10px;
  padding-top: 14px;
}
.sort_block .sortlist_block h2 {
  color: #774e2b;
  font-size: 1.25em;
  margin: 0px 0 10px;
  padding: 0;
  position: relative;
}
.sort_block .sortlist_block h2 a {
  display: block;
  color: #774e2b;
}
.sort_block .sortlist_block h2 a:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 3px;
  border: 1px solid #72777e;
  width: 10px;
  height: 10px;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(225deg);
  transition: 0.5s;
}
.sort_block .sortlist_block h2 a.turnicon:after {
  transform: rotate(45deg);
  top: 8px;
}
.sort_block .sortlist_block .sortlist {
  display: none;
}
.sort_block .sortlist_block .sortlist label {
  display: block;
  padding: 0 0 0 25px;
}
.sort_block .sortlist_block .sortlist label input[type=checkbox] {
  margin-right: 8px !important;
  margin-left: -25px !important;
}
.sort_block .sortlist_block .sortlist label span {
  color: #b94b00;
  margin-left: 8px;
}
.sort_block .sortlist_block .sortlist .more a {
  display: block;
  background-image: url("../images/more_icon02.png");
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 25px;
  text-align: left;
  background-color: #fff !important;
  color: #333;
}
.sort_block .sortlist_block .sortlist .more a:hover {
  color: #000;
  text-decoration: underline;
}

.rightlineblock {
  overflow: hidden;
  height: 100%;
  float: none;
  clear: both;
}
@media screen and (max-width: 767px) {
  .rightlineblock {
    border-left: none;
  }
}

.detailpage_lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
}
.detailpage_lightbox .close2 {
  background-image: url("../images/icon_close03.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 38px;
  width: 38px;
  height: 38px;
  display: block;
  cursor: pointer;
  position: absolute;
  right: 3%;
  top: 12px;
  z-index: 9999;
}
.detailpage_lightbox .detailpage_block {
  max-height: 600px;
  color: #ddd;
  z-index: 999;
  position: relative;
}
.detailpage_lightbox .detailpage_block ul {
  margin: 0.5em 2em;
  padding: 0;
  list-style-type: none;
  font-size: 1.375em;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 575px) {
  .detailpage_lightbox .detailpage_block ul {
    margin: 1em;
    font-size: 1.25em;
    justify-content: flex-start;
  }
}
.detailpage_lightbox .detailpage_block ul li {
  display: inline-block;
  position: relative;
  flex: none;
  margin: 0 45px;
}
@media screen and (max-width: 575px) {
  .detailpage_lightbox .detailpage_block ul li {
    margin: 0 10px;
  }
}
.detailpage_lightbox .detailpage_block ul li a {
  color: #ddd;
  display: block;
  font-weight: bolder;
  padding: 10px 0;
}
@media screen and (max-width: 575px) {
  .detailpage_lightbox .detailpage_block ul li a {
    padding: 2px 0;
  }
}
.detailpage_lightbox .detailpage_block ul li.icon_pre a {
  padding-left: 45px;
}
@media screen and (max-width: 575px) {
  .detailpage_lightbox .detailpage_block ul li.icon_pre a {
    padding-left: 25px;
  }
}
.detailpage_lightbox .detailpage_block ul li.icon_pre a:before {
  content: "";
  border: 15px solid #ddd;
  border-color: transparent #ddd transparent transparent;
  position: absolute;
  left: 0;
  top: 7px;
}
@media screen and (max-width: 575px) {
  .detailpage_lightbox .detailpage_block ul li.icon_pre a:before {
    border: 10px solid #ddd;
    border-color: transparent #ddd transparent transparent;
    top: 3px;
    left: -5px;
  }
}
.detailpage_lightbox .detailpage_block ul li.icon_next a {
  padding-right: 45px;
}
@media screen and (max-width: 575px) {
  .detailpage_lightbox .detailpage_block ul li.icon_next a {
    padding-right: 25px;
  }
}
.detailpage_lightbox .detailpage_block ul li.icon_next a:before {
  content: "";
  border: 15px solid #ddd;
  border-color: transparent transparent transparent #ddd;
  position: absolute;
  right: 0;
  top: 7px;
}
@media screen and (max-width: 575px) {
  .detailpage_lightbox .detailpage_block ul li.icon_next a:before {
    border: 10px solid #ddd;
    border-color: transparent transparent transparent #eee;
    top: 3px;
    right: -5px;
  }
}
.detailpage_lightbox .maincolumn_cp {
  z-index: 999999;
  position: relative;
}
@media screen and (max-width: 767px) {
  .detailpage_lightbox .maincolumn_cp .rightlineblock {
    border: none;
  }
}

.page {
  text-align: center;
  margin: 20px 0;
  padding: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.page.fixed {
  position: fixed;
  z-index: 9;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, 0);
}
@media screen and (max-width: 767px) {
  .page.fixed {
    bottom: 50px;
  }
}
.page.fixed .pageblock {
  box-shadow: 0 0px 20px -1px rgba(0, 0, 0, 0.3), 0 2px 20px 0 rgba(0, 0, 0, 0.2), 0 1px 20px 0 rgba(0, 0, 0, 0.2);
}
.page.fixed .subpage div.number01 {
  box-shadow: 0 0px 10px -1px rgba(0, 0, 0, 0.3), 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 575px) {
  .page {
    display: none;
  }
}
.page .pageblock {
  display: inline-block;
  margin: 0 auto;
  box-shadow: 0 0px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 50px;
  padding: 5px 10px;
  background-color: #fff;
}
.page .pageblock .first,
.page .pageblock .pre,
.page .pageblock .next,
.page .pageblock .last {
  padding: 5px 8px 0;
  vertical-align: middle;
  margin: 0px;
  float: left;
}
.page .pageblock .first a,
.page .pageblock .pre a,
.page .pageblock .next a,
.page .pageblock .last a {
  display: block;
  width: 20px;
}
.page .pageblock .fakespace {
  width: 85px;
  float: left;
  display: block;
  padding: 15px 0;
  position: relative;
}
.page .pageblock .subpage {
  overflow: hidden;
  margin: -32px 0 0 0;
  padding: 10px 5px;
  position: absolute;
  vertical-align: middle;
  top: 0;
  left: 0;
}
.page .pageblock .subpage div.number01 {
  text-align: center;
  box-shadow: 0 0px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 50px;
  padding: 5px;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  width: 75px;
  height: 75px;
}
.page .pageblock .subpage div.number01 span {
  display: block;
  margin-bottom: 0;
  line-height: 1.7em;
  text-align: center;
  font-size: 1.125em;
  font-weight: bold;
}
.page .pageblock .subpage div.number01 a {
  display: inline-block;
  padding: 5px 10px;
  background-color: #707070;
  border-radius: 50px;
  width: auto;
  font-size: 0.938em;
  line-height: 1em;
  color: #fff;
}
.page .pageblock .subpage div.number02 {
  overflow: hidden;
  display: none;
}
.page .pageblock .subpage div.number02 span {
  float: left;
  margin-right: 8px;
  line-height: 1.7em;
}
@media screen and (max-width: 991px) {
  .page .pageblock .subpage div.number02 span {
    display: none;
  }
  .page .pageblock .subpage div.number02 span:nth-child(1),
  .page .pageblock .subpage div.number02 span:nth-child(2),
  .page .pageblock .subpage div.number02 span:nth-child(3),
  .page .pageblock .subpage div.number02 span:nth-child(4),
  .page .pageblock .subpage div.number02 span:nth-child(5) {
    display: block;
  }
}
.page .pageblock .subpage div.number02 a {
  display: block;
  padding: 7px 10px;
  background-color: #eee;
  border-radius: 50px;
  width: auto;
  font-size: 0.938em;
  line-height: 1em;
  float: left;
  color: #333;
}
.page .pageblock .subpage div.number02 a:hover {
  color: #dd1f03;
}
.page .pageblock .subpage div.number02 a.here {
  background-color: #707070;
  color: #fff;
}
.page .pageblock .numberpage {
  display: flex;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 0 10px;
}
.page .pageblock .numberpage em {
  padding: 0 5px;
}
.page .pageblock .numberpage .exact_page {
  width: 60px;
  height: 30px;
  padding: 5px;
  margin: 0 5px;
}
.page .pageblock .numberpage .go_btn {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 30px;
  border-radius: 50%;
  background-color: #666;
  color: #fff;
}
.page .pageblock .numberpage .go_btn:hover, .page .pageblock .numberpage .go_btn:focus {
  background-color: #333;
}

.page02 .pageblock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0px 10px;
}
.page02 .pageblock .first,
.page02 .pageblock .pre,
.page02 .pageblock .next,
.page02 .pageblock .last,
.page02 .pageblock .fakespace {
  padding: 16px 8px 0;
}
.page02 .pageblock .fakespace {
  width: auto;
  padding: 0px 0;
}
.page02 .pageblock .subpage {
  display: inline-block;
  float: none;
  margin: 0;
  position: relative;
}
.page02 .pageblock .subpage div.number01 {
  display: none;
}
.page02 .pageblock .subpage div.number02 {
  display: flex;
}
.page02 .pageblock .numberpage {
  display: flex;
}

.hiddenpage.fixed {
  position: fixed;
  z-index: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
}

.general_block {
  background-image: url("../images/search_blockinbg01.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  margin: 0;
  padding: 50px 0 40px;
  position: relative;
  min-height: 130px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .general_block {
    min-height: 130px;
    height: auto;
  }
}
@media (max-width: 480px) {
  .general_block {
    padding: 60px 0 30px;
  }
}
.general_block .general_title {
  font-size: 2.5em;
  float: left;
  margin: 0px 20px 0 100px;
  color: #fff;
  text-shadow: 0px 0px 6px rgb(0, 0, 0), 0px 0px 6px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.05em;
  vertical-align: middle;
  line-height: 1.2em;
}
.general_block .general_title span {
  display: inline-block;
}
.general_block .RSS_button {
  float: left;
  margin-top: 0px;
  vertical-align: middle;
}
.general_block .generalbtn {
  float: right;
}
@media screen and (max-width: 767px) {
  .general_block .generalbtn {
    float: none;
  }
}
@media screen and (max-width: 767px) {
  .general_block .general_title {
    float: none;
    display: inline-block;
    margin: 0 20px 0px 0;
  }
  .general_block .RSS_button {
    float: none;
    display: inline-block;
  }
}
@media (max-width: 480px) {
  .general_block .general_title {
    margin: 0 0px 20px 0;
    display: block;
  }
  .general_block .RSS_button {
    display: block;
  }
}

.sortrecommend,
.bookselection_tab {
  margin: 30px 30px 20px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .sortrecommend,
  .bookselection_tab {
    width: 80%;
    margin: 30px auto;
  }
}
@media (max-width: 480px) {
  .sortrecommend,
  .bookselection_tab {
    width: 75%;
  }
}
.sortrecommend .sort,
.bookselection_tab .sort {
  padding: 0 5px;
}
.sortrecommend .sort a,
.bookselection_tab .sort a {
  display: block;
  padding: 20px 10px;
  background: #dcdcdc;
  background: linear-gradient(to bottom, #dcdcdc, #e5e5e5);
  color: #333;
  font-size: 1.313em;
  text-align: center;
  border-radius: 5px;
  position: relative;
  transition: 0.2s;
  line-height: 1.3em;
}
.sortrecommend .sort a:hover,
.bookselection_tab .sort a:hover {
  background-image: none;
  background-color: #f1ad00;
  color: #000;
}
.sortrecommend .sort a.here,
.bookselection_tab .sort a.here {
  background: #f1ad00;
  color: #000;
}
.sortrecommend .sort a.here:focus,
.bookselection_tab .sort a.here:focus {
  background: #ffba0c;
}
.sortrecommend .slick-next,
.bookselection_tab .slick-next {
  right: -20px;
  top: 0;
  background-color: transparent;
}
.sortrecommend .slick-prev,
.bookselection_tab .slick-prev {
  left: -20px;
  top: 0;
  background-color: transparent;
}
@media (max-width: 767px) {
  .sortrecommend .slick-next,
  .bookselection_tab .slick-next {
    right: -45px;
    top: 0;
  }
  .sortrecommend .slick-prev,
  .bookselection_tab .slick-prev {
    left: -45px;
    top: 0;
  }
}
@media (max-width: 400px) {
  .sortrecommend .slick-next,
  .bookselection_tab .slick-next {
    right: -36px;
  }
  .sortrecommend .slick-prev,
  .bookselection_tab .slick-prev {
    left: -36px;
  }
}

em {
  font-style: normal;
}
em.yellowbg {
  background-color: #ff9;
}

.privacy_consent {
  position: fixed;
  z-index: 999;
  top: -50%;
  width: 1400px;
  background-color: #005d98;
  color: #fff;
  line-height: 1.5em;
  padding: 0;
  font-size: 0.938em;
  transition: 0.5s;
}
@media screen and (max-width: 1399px) {
  .privacy_consent {
    width: 100%;
  }
}
.privacy_consent.goin {
  top: 0;
}
.privacy_consent .container {
  margin: 0 auto;
  max-width: 1200px;
  text-align: left;
  padding: 20px;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .privacy_consent .container {
    text-align: center;
  }
}
.privacy_consent .container span {
  float: left;
  width: 80%;
}
@media screen and (max-width: 575px) {
  .privacy_consent .container span {
    float: none;
    width: 100%;
    display: block;
    margin-bottom: 10px;
    text-align: left;
  }
}
.privacy_consent .container .btn_grp {
  float: right;
}
@media screen and (max-width: 575px) {
  .privacy_consent .container .btn_grp {
    float: none;
    clear: both;
  }
}

.member_message {
  background-color: #900116;
  color: #fff;
  position: fixed;
  z-index: 998;
  width: 450px;
  top: -50%;
  left: 50%;
  margin-left: -225px;
  padding: 20px 60px 0px 30px;
  border-radius: 0 0 10px 10px;
  transition: 0.5s;
  box-shadow: 1px 1px 4px #666;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .member_message {
    width: 100%;
    margin-left: 0;
    left: auto;
    border-radius: 0;
  }
}
.member_message.goin {
  top: 0;
}
.member_message .close {
  position: absolute;
  right: 15px;
  top: 15px;
  background-color: #fff;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background-position: center;
  display: block;
}
.member_message .explain {
  padding-bottom: 15px;
  border-bottom: 1px solid #fff;
}
.member_message ul {
  margin: 0px 0 20px 20px;
  padding: 0;
}
.member_message ul li {
  margin-bottom: 8px;
}

.bookselection_explain {
  margin: 30px 30px 0px;
  text-align: center;
  padding: 25px;
  background-color: #fed857;
  border-radius: 5px;
  font-size: 1.25em;
  line-height: 1.5em;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .bookselection_explain {
    width: 80%;
    margin: 30px auto 0;
  }
}
@media (max-width: 480px) {
  .bookselection_explain {
    width: 75%;
  }
}

.mystudyname {
  background-image: url("../images/search_blockinbg01.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  margin: 0;
  padding: 40px 0 15px;
  position: relative;
  box-sizing: border-box;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .mystudyname {
    min-height: 130px;
    height: auto;
    padding: 20px 0 25px;
  }
}
.mystudyname .member_pic {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  position: relative;
  margin: 0 20px 0 20px;
  vertical-align: middle;
  position: relative;
  float: left;
}
@media screen and (max-width: 767px) {
  .mystudyname .member_pic {
    display: none;
  }
}
.mystudyname .member_pic a {
  display: block;
  width: 110px;
  height: 110px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.mystudyname .member_pic a img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.mystudyname .member_pic > span {
  width: auto;
  height: 15px;
  border-radius: 50px;
  background-color: #dc0122;
  color: #fff;
  text-align: center;
  position: absolute;
  bottom: 0;
  right: -4px;
  display: block;
  line-height: 1em;
  font-size: 1.125em;
  padding: 7px 10px;
  text-shadow: none;
}
.mystudyname .nameblock {
  overflow: hidden;
}
@media screen and (max-width: 575px) {
  .mystudyname .nameblock {
    display: block;
  }
}
.mystudyname .nameblock h2 {
  margin: 55px 0 0 0;
  padding: 0 0 0 5px;
  float: left;
  color: #fff;
  text-shadow: 0px 0px 6px rgb(0, 0, 0), 0px 0px 6px rgba(0, 0, 0, 0.5);
  font-weight: 600;
  font-size: 2em;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 991px) {
  .mystudyname .nameblock h2 {
    margin: 20px 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  .mystudyname .nameblock h2 {
    display: none;
  }
}
.mystudyname .nameblock .name {
  margin: 65px 0 0 0px;
  float: left;
  padding: 3px 20px;
  color: #333;
  border-radius: 50px;
  font-weight: 400;
  line-height: 1.7em;
  text-shadow: #fff 0px 0px 2px, #fff 0px 0px 3px, #fff 0px 0px 4px, #fff 0px 0px 5px, #fff 0px 0px 6px;
}
@media screen and (max-width: 991px) {
  .mystudyname .nameblock .name {
    margin: 30px 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  .mystudyname .nameblock .name {
    margin: 10px 0 0 0;
    display: block;
    float: none;
    clear: both;
    padding: 3px 0px;
    text-align: center;
  }
}
.mystudyname .nameblock .name em {
  font-style: normal;
  margin-right: 5px;
}
@media (max-width: 380px) {
  .mystudyname .nameblock .name em {
    display: block;
  }
}
.mystudyname .nameblock .name em span {
  display: none;
}
.mystudyname .nameblock .mystudybtn {
  float: right;
  margin: 45px 0 0 0;
}
@media screen and (max-width: 991px) {
  .mystudyname .nameblock .mystudybtn {
    margin: 20px 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  .mystudyname .nameblock .mystudybtn {
    text-align: center;
    float: none;
    clear: both;
    margin: 10px 0 0 0;
  }
}
.mystudyname .nameblock .mystudybtn input.linedel {
  display: none;
}
.mystudyname .nameblock .mystudybtn .btnstyle {
  padding: 0.5em 2em !important;
}
.mystudyname .nameblock .mystudybtn .btnstyle:focus {
  background-color: #d3d3d3 !important;
}

.mystudymenu {
  background-color: #fff;
  padding: 0px;
  position: relative;
  text-align: left;
}
.mystudymenu.fixed {
  position: fixed;
  left: 15px;
  top: 80px;
}
.mystudymenu > ul {
  margin: 0;
  padding: 0;
}
.mystudymenu > ul > li {
  list-style-type: none;
  border-bottom: 1px solid #d2d2d2;
  display: block;
  float: none;
  clear: both;
  overflow: hidden;
  margin: 0;
  font-size: 1.25em;
  font-weight: bolder;
}
.mystudymenu > ul > li:last-child {
  border-bottom: none;
}
.mystudymenu > ul > li > a {
  padding: 12px 15px 10px;
  display: block;
  color: #6a3905;
  transition: 0.5s;
  position: relative;
}
.mystudymenu > ul > li > a:hover {
  color: #6a3905;
}
.mystudymenu > ul > li.hasChild > a:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 13px;
  border: 1px solid #72777e;
  width: 10px;
  height: 10px;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(225deg);
  transition: 0.5s;
}
.mystudymenu > ul > li.hasChild > a.turnicon:after {
  transform: rotate(45deg);
  top: 18px;
}
.mystudymenu > ul > li ul {
  margin: 10px 0;
  padding: 0;
  float: none;
  clear: both;
  display: none;
}
.mystudymenu > ul > li ul li {
  font-size: 0.813em;
  list-style-type: none;
  float: none;
  clear: both;
  margin: 0 0 5px;
  font-weight: normal;
}
.mystudymenu > ul > li ul li a {
  color: #666;
  padding: 5px 10px 5px 30px;
  position: relative;
  display: block;
}
.mystudymenu > ul > li ul li a:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 14px;
  left: 17px;
  background-color: #666;
}
.mystudymenu > ul > li ul li a:hover {
  color: #000;
  background-color: #ffc;
}
.mystudymenu > ul > li ul li a:hover:before {
  background-color: #333;
}

.mystudysearchbtn {
  clear: both;
  float: none;
  margin: 5px;
  position: absolute;
  right: 5px;
  top: 0;
}
@media screen and (max-width: 767px) {
  .mystudysearchbtn {
    position: relative;
    top: auto;
    right: auto;
    margin: 10px 0 0;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    display: none;
  }
}
.mystudysearchbtn a {
  display: block;
  padding: 2px 10px 3px 30px;
  text-align: left;
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  background-image: url("../images/icon_search.png");
  background-repeat: no-repeat;
  background-position: 7px 6px;
}
@media screen and (max-width: 767px) {
  .mystudysearchbtn a {
    width: 70px;
    margin: 0 auto 10px;
  }
}

.mystudysearch {
  padding: 20px;
  border-bottom: 1px solid #ccc;
  background-color: #fffae3;
  clear: both;
  display: none;
}
.mystudysearch .to {
  float: left;
  margin: 5px 5px 0;
}
@media (max-width: 580px) {
  .mystudysearch .to {
    display: none;
  }
}
.mystudysearch .select_date {
  width: 45%;
}
@media screen and (max-width: 767px) {
  .mystudysearch .select_date {
    width: 46%;
  }
}
@media (max-width: 580px) {
  .mystudysearch .select_date {
    width: 99%;
  }
}
.mystudysearch .btn_grp {
  margin: 10px 0 0 0;
  padding: 0;
}

.mystudycontent {
  margin: 20px 30px;
  display: flex;
  flex-flow: column nowrap;
}
.mystudycontent h2 {
  margin: 0 0 20px;
  padding: 0;
  color: #dc0122;
  font-size: 1.5em;
  font-weight: 700;
}
.mystudycontent .booknotice {
  margin: 0 0 30px;
  padding: 0;
}
.mystudycontent .booknotice li {
  list-style-type: none;
  border-bottom: 1px solid #ccc;
  padding: 13px 0 13px 115px;
  line-height: 1em;
}
.mystudycontent .booknotice li em {
  text-align: center;
  background-color: #3e78c0;
  color: #fff;
  padding: 5px 10px;
  margin-right: 15px;
  border-radius: 4px;
  margin-left: -115px;
  font-style: normal;
  width: 80px;
  display: inline-block;
  vertical-align: middle;
}
.mystudycontent .booknotice li em.redbg {
  background-color: #e42333;
}
.mystudycontent .booknotice li em.orangebg {
  background-color: #b94b00;
}
.mystudycontent .booknotice li em.greenbg {
  background-color: #107859;
}
@media screen and (max-width: 575px) {
  .mystudycontent .booknotice li {
    padding: 13px 0;
    line-height: 1.5em;
  }
  .mystudycontent .booknotice li em {
    margin-left: 0px;
    margin-bottom: 10px;
    display: block;
    width: auto;
  }
}
.mystudycontent .mycardlist {
  margin: 0 0 10px;
  padding: 1em 0 0 0;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style-type: none;
}
.mystudycontent .mycardlist li {
  width: 32%;
  margin: 0 0.66% 20px;
  border: 1px solid #ccc;
  border-radius: 10px 0 10px 10px;
  position: relative;
  transition: 0.2s;
  box-sizing: border-box;
  min-height: 200px;
}
.mystudycontent .mycardlist li:hover {
  transform: translateY(-10px);
  box-shadow: 3px 2px 4px 3px #ccc;
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .mystudycontent .mycardlist li {
    width: 48%;
    margin: 0 1% 20px;
  }
}
@media screen and (min-width: 769px) and (max-width: 991px) {
  .mystudycontent .mycardlist li {
    width: 100%;
    margin: 0 0 20px;
  }
}
@media screen and (min-width: 700px) and (max-width: 768px) {
  .mystudycontent .mycardlist li {
    width: 48%;
    margin: 0 1% 20px;
  }
}
@media (max-width: 699px) {
  .mystudycontent .mycardlist li {
    width: 100%;
    margin: 0 0 20px;
  }
}
.mystudycontent .mycardlist li a {
  display: block;
}
.mystudycontent .mycardlist li .cardblock {
  display: block;
  padding: 15px 5px;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .mystudycontent .mycardlist li .cardblock {
    height: auto;
    min-height: 200px;
  }
}
.mystudycontent .mycardlist li .cardblock:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent #ccc transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
}
.mystudycontent .mycardlist li .cardblock.redblock:after {
  border-color: transparent #e42333 transparent transparent;
}
.mystudycontent .mycardlist li .cardblock.blueblock:after {
  border-color: transparent #3e78c0 transparent transparent;
}
.mystudycontent .mycardlist li .cardblock.greenblock:after {
  border-color: transparent #107859 transparent transparent;
}
.mystudycontent .mycardlist li .cardblock.yellowblock:after {
  border-color: transparent #ebb100 transparent transparent;
}
.mystudycontent .mycardlist li .cardblock.orangeblock:after {
  border-color: transparent #b94b00 transparent transparent;
}
.mystudycontent .mycardlist li .cardblock.purpleblock:after {
  border-color: transparent #a063b5 transparent transparent;
}
.mystudycontent .mycardlist li .cardbutton {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}
.mystudycontent .mycardlist li h3 {
  margin: 0 0 10px 10px;
  font-size: 1.5em;
  position: relative;
  padding-left: 20px;
  color: #000;
}
.mystudycontent .mycardlist li h3:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  border: 8px solid #666;
  border-color: transparent transparent transparent #666;
}
.mystudycontent .mycardlist li .data {
  text-align: center;
  color: #898989;
  display: block;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
@media (max-width: 480px) {
  .mystudycontent .mycardlist li .data {
    display: block;
  }
}
.mystudycontent .mycardlist li .data > span {
  display: inline-block;
  vertical-align: top;
  margin: 0 5px;
}
@media (max-width: 480px) {
  .mystudycontent .mycardlist li .data > span {
    display: block;
    margin-bottom: 30px;
  }
}
.mystudycontent .mycardlist li .data > span em {
  font-size: 3.6em;
  margin-right: 5px;
}
.mystudycontent .mycardlist li .data > span:nth-child(2) {
  position: relative;
  padding-top: 50px;
  padding-left: 5px;
}
.mystudycontent .mycardlist li .data > span:nth-child(2):before {
  content: "";
  width: 7px;
  height: 80px;
  background-color: #999;
  position: absolute;
  top: 0;
  left: 0;
  transform: skewX(-30deg);
}
.mystudycontent .mycardlist li .data > span:nth-child(2) em {
  font-size: 2.5em;
  margin-right: 5px;
}
@media (max-width: 480px) {
  .mystudycontent .mycardlist li .data > span:nth-child(2) {
    padding-top: 0;
  }
  .mystudycontent .mycardlist li .data > span:nth-child(2):before {
    width: 0;
    height: 0;
  }
  .mystudycontent .mycardlist li .data > span:nth-child(2) em {
    font-size: 3.7em;
  }
}
.mystudycontent .mycardlist li .badrecord {
  display: block;
  margin-top: 30px;
}
@media (max-width: 380px) {
  .mystudycontent .mycardlist li .badrecord {
    text-align: center;
  }
}
.mystudycontent .mycardlist li .badrecord .caveat {
  float: left;
  margin: 0 30px 0 10px;
}
@media screen and (max-width: 767px) {
  .mystudycontent .mycardlist li .badrecord .caveat {
    margin: 0 20px 0 10px;
  }
}
@media (max-width: 380px) {
  .mystudycontent .mycardlist li .badrecord .caveat {
    float: none;
    clear: both;
    margin: 0 0 20px;
  }
}
.mystudycontent .mycardlist li .badrecord ul {
  margin: 0px;
  padding: 0;
  overflow: hidden;
}
@media (max-width: 380px) {
  .mystudycontent .mycardlist li .badrecord ul {
    margin: 0 30px;
  }
}
.mystudycontent .mycardlist li .badrecord ul li {
  display: block;
  float: none;
  border: none;
  width: auto;
  height: auto;
  padding: 0 0 5px 15px;
  margin: 0 0 5px;
  list-style-type: none;
  position: relative;
  text-align: left;
  min-height: auto;
}
.mystudycontent .mycardlist li .badrecord ul li:after {
  content: "";
  border: none;
}
.mystudycontent .mycardlist li .badrecord ul li:before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #777;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 7px;
}
.mystudycontent .mycardlist li .badrecord ul li:hover {
  transform: translate(0);
  box-shadow: none;
}
.mystudycontent .mycardlist li .customcard {
  width: 100px;
  margin: 40px auto;
  text-align: center;
  transition: 0.5s;
}
.mystudycontent .mycardlist li .customcard a {
  display: block;
  text-align: center;
}
.mystudycontent .mycardlist li .customcard a img {
  display: block;
  margin: 0 auto 10px;
  width: 67px;
}
.mystudycontent .mycardlist li .complete_custom {
  width: 100px;
  margin: 40px auto;
  text-align: center;
  display: none;
}
.mystudycontent .mycardlist li .complete_custom a {
  display: block;
  text-align: center;
}
.mystudycontent .mycardlist li .complete_custom a img {
  display: block;
  margin: 0 auto 10px;
  width: 67px;
}
.mystudycontent .cardstyle {
  position: relative;
  display: block;
  border: 1px solid #ccc;
  padding: 20px 20px 15px;
  border-radius: 10px;
  background-color: #eee;
  margin: 0;
  display: none;
}
.mystudycontent .cardstyle ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
.mystudycontent .cardstyle ul li {
  display: inline-block;
  border: 1px solid #ccc;
  list-style-type: none;
  padding: 20px 20px;
  font-size: 1.25em;
  margin: 0 0 5px;
  background-color: #fff;
  border-radius: 10px;
  width: 29%;
  text-align: left;
}
@media (max-width: 1400px) {
  .mystudycontent .cardstyle ul li {
    width: 28%;
  }
}
@media (max-width: 1200px) {
  .mystudycontent .cardstyle ul li {
    width: 26%;
  }
}
@media screen and (max-width: 991px) {
  .mystudycontent .cardstyle ul li {
    width: 40%;
  }
}
@media screen and (max-width: 767px) {
  .mystudycontent .cardstyle ul li {
    width: 90%;
  }
}
@media screen and (max-width: 575px) {
  .mystudycontent .cardstyle ul li {
    width: 85%;
  }
}
.mystudycontent .cardstyle ul li input[type=checkbox] {
  margin-right: 7px;
}
.mystudycontent .cardstyle ul li label {
  margin: 0;
}
.mystudycontent .service_list {
  margin-bottom: 60px;
}
.mystudycontent .service_list h2 {
  display: flex;
  align-items: center;
}
.mystudycontent .service_list h2 .prompt_btn {
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  line-height: 25px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin-left: 10px;
  font-size: 1rem;
}
.mystudycontent .service_list .explain_block {
  background-color: #eee;
  padding: 1.5em;
  color: #333;
  border-radius: 5px;
  margin-bottom: 0.5em;
  line-height: 1.6em;
}
.mystudycontent .service_list .explain_block a {
  color: #005d98;
  padding: 0 5px;
  text-decoration: underline;
}
.mystudycontent .service_list .explain_block a:hover {
  color: #dd1f03;
}
.mystudycontent .service_list .explain_block .prompt {
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  line-height: 25px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin: 0 5px;
  font-size: 1rem;
}
.mystudycontent .service_list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.mystudycontent .service_list ul li {
  padding: 13px 0 13px 20px;
  border-bottom: 1px solid #ccc;
  position: relative;
  display: flex;
  align-items: center;
}
.mystudycontent .service_list ul li:before {
  content: "";
  position: absolute;
  top: 20px;
  left: 3px;
  border: 8px solid #666;
  border-color: transparent transparent transparent #666;
}
.mystudycontent .service_list ul li div {
  flex: 1 1 auto;
}
.mystudycontent .service_list ul li span {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.mystudycontent .service_list ul li span a {
  display: block;
  text-align: center;
  margin: 0 5px 0 0;
}
.mystudycontent .service_list ul li span a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
@media screen and (max-width: 767px) {
  .mystudycontent .service_list ul li {
    flex-wrap: wrap;
  }
  .mystudycontent .service_list ul li:before {
    top: 16px;
  }
  .mystudycontent .service_list ul li div {
    flex-basis: 100%;
    margin-bottom: 0.5em;
  }
  .mystudycontent .service_list ul li span {
    flex: 1 1 auto;
    flex-basis: 100%;
  }
}

.modify_data .title,
.write_data .title,
.forget_password .title,
.mystudysearch_data .title,
.stored_value_group .title,
.reader_form_group .title,
.delivery_method_block .title,
.reserve_block .title {
  font-style: 1.313em;
  margin: 30px 0 20px;
  padding: 0;
  color: #005d98;
  font-size: 1.375em;
  font-weight: 700;
}
.modify_data .form_grp,
.write_data .form_grp,
.forget_password .form_grp,
.mystudysearch_data .form_grp,
.stored_value_group .form_grp,
.reader_form_group .form_grp,
.delivery_method_block .form_grp,
.reserve_block .form_grp {
  margin-bottom: 0px;
  vertical-align: top;
  padding: 5px 0 15px;
}
.modify_data .form_grp.form_inline,
.write_data .form_grp.form_inline,
.forget_password .form_grp.form_inline,
.mystudysearch_data .form_grp.form_inline,
.stored_value_group .form_grp.form_inline,
.reader_form_group .form_grp.form_inline,
.delivery_method_block .form_grp.form_inline,
.reserve_block .form_grp.form_inline {
  display: inline-block;
  width: 48%;
  margin-right: 3%;
}
@media screen and (max-width: 991px) {
  .modify_data .form_grp.form_inline,
  .write_data .form_grp.form_inline,
  .forget_password .form_grp.form_inline,
  .mystudysearch_data .form_grp.form_inline,
  .stored_value_group .form_grp.form_inline,
  .reader_form_group .form_grp.form_inline,
  .delivery_method_block .form_grp.form_inline,
  .reserve_block .form_grp.form_inline {
    width: 100%;
  }
}
.modify_data .form_grp.form_inline input[type=text],
.modify_data .form_grp.form_inline input[type=password],
.modify_data .form_grp.form_inline select,
.write_data .form_grp.form_inline input[type=text],
.write_data .form_grp.form_inline input[type=password],
.write_data .form_grp.form_inline select,
.forget_password .form_grp.form_inline input[type=text],
.forget_password .form_grp.form_inline input[type=password],
.forget_password .form_grp.form_inline select,
.mystudysearch_data .form_grp.form_inline input[type=text],
.mystudysearch_data .form_grp.form_inline input[type=password],
.mystudysearch_data .form_grp.form_inline select,
.stored_value_group .form_grp.form_inline input[type=text],
.stored_value_group .form_grp.form_inline input[type=password],
.stored_value_group .form_grp.form_inline select,
.reader_form_group .form_grp.form_inline input[type=text],
.reader_form_group .form_grp.form_inline input[type=password],
.reader_form_group .form_grp.form_inline select,
.delivery_method_block .form_grp.form_inline input[type=text],
.delivery_method_block .form_grp.form_inline input[type=password],
.delivery_method_block .form_grp.form_inline select,
.reserve_block .form_grp.form_inline input[type=text],
.reserve_block .form_grp.form_inline input[type=password],
.reserve_block .form_grp.form_inline select {
  width: 100%;
}
.modify_data .form_grp.form_inline input[type=radio],
.write_data .form_grp.form_inline input[type=radio],
.forget_password .form_grp.form_inline input[type=radio],
.mystudysearch_data .form_grp.form_inline input[type=radio],
.stored_value_group .form_grp.form_inline input[type=radio],
.reader_form_group .form_grp.form_inline input[type=radio],
.delivery_method_block .form_grp.form_inline input[type=radio],
.reserve_block .form_grp.form_inline input[type=radio] {
  width: 1em;
  height: 1em;
}
.modify_data .form_grp.form_inline label,
.write_data .form_grp.form_inline label,
.forget_password .form_grp.form_inline label,
.mystudysearch_data .form_grp.form_inline label,
.stored_value_group .form_grp.form_inline label,
.reader_form_group .form_grp.form_inline label,
.delivery_method_block .form_grp.form_inline label,
.reserve_block .form_grp.form_inline label {
  margin: 0;
}
.modify_data .form_grp.form_inline input[type=checkbox],
.write_data .form_grp.form_inline input[type=checkbox],
.forget_password .form_grp.form_inline input[type=checkbox],
.mystudysearch_data .form_grp.form_inline input[type=checkbox],
.stored_value_group .form_grp.form_inline input[type=checkbox],
.reader_form_group .form_grp.form_inline input[type=checkbox],
.delivery_method_block .form_grp.form_inline input[type=checkbox],
.reserve_block .form_grp.form_inline input[type=checkbox] {
  width: 1.3em;
  height: 1.3em;
}
.modify_data .form_grp.form_inline .checkbox,
.write_data .form_grp.form_inline .checkbox,
.forget_password .form_grp.form_inline .checkbox,
.mystudysearch_data .form_grp.form_inline .checkbox,
.stored_value_group .form_grp.form_inline .checkbox,
.reader_form_group .form_grp.form_inline .checkbox,
.delivery_method_block .form_grp.form_inline .checkbox,
.reserve_block .form_grp.form_inline .checkbox {
  margin: 0;
}
.modify_data .form_grp.rightcol,
.write_data .form_grp.rightcol,
.forget_password .form_grp.rightcol,
.mystudysearch_data .form_grp.rightcol,
.stored_value_group .form_grp.rightcol,
.reader_form_group .form_grp.rightcol,
.delivery_method_block .form_grp.rightcol,
.reserve_block .form_grp.rightcol {
  margin-right: 0;
}
.modify_data .form_grp.single_field .form_title,
.write_data .form_grp.single_field .form_title,
.forget_password .form_grp.single_field .form_title,
.mystudysearch_data .form_grp.single_field .form_title,
.stored_value_group .form_grp.single_field .form_title,
.reader_form_group .form_grp.single_field .form_title,
.delivery_method_block .form_grp.single_field .form_title,
.reserve_block .form_grp.single_field .form_title {
  width: 12%;
}
@media screen and (max-width: 991px) {
  .modify_data .form_grp.single_field .form_title,
  .write_data .form_grp.single_field .form_title,
  .forget_password .form_grp.single_field .form_title,
  .mystudysearch_data .form_grp.single_field .form_title,
  .stored_value_group .form_grp.single_field .form_title,
  .reader_form_group .form_grp.single_field .form_title,
  .delivery_method_block .form_grp.single_field .form_title,
  .reserve_block .form_grp.single_field .form_title {
    width: 25%;
  }
}
@media screen and (max-width: 767px) {
  .modify_data .form_grp.single_field .form_title,
  .write_data .form_grp.single_field .form_title,
  .forget_password .form_grp.single_field .form_title,
  .mystudysearch_data .form_grp.single_field .form_title,
  .stored_value_group .form_grp.single_field .form_title,
  .reader_form_group .form_grp.single_field .form_title,
  .delivery_method_block .form_grp.single_field .form_title,
  .reserve_block .form_grp.single_field .form_title {
    width: 100%;
  }
}
.modify_data .form_grp.single_field .form_content,
.write_data .form_grp.single_field .form_content,
.forget_password .form_grp.single_field .form_content,
.mystudysearch_data .form_grp.single_field .form_content,
.stored_value_group .form_grp.single_field .form_content,
.reader_form_group .form_grp.single_field .form_content,
.delivery_method_block .form_grp.single_field .form_content,
.reserve_block .form_grp.single_field .form_content {
  width: 88%;
}
@media screen and (max-width: 991px) {
  .modify_data .form_grp.single_field .form_content,
  .write_data .form_grp.single_field .form_content,
  .forget_password .form_grp.single_field .form_content,
  .mystudysearch_data .form_grp.single_field .form_content,
  .stored_value_group .form_grp.single_field .form_content,
  .reader_form_group .form_grp.single_field .form_content,
  .delivery_method_block .form_grp.single_field .form_content,
  .reserve_block .form_grp.single_field .form_content {
    width: 75%;
  }
}
@media screen and (max-width: 767px) {
  .modify_data .form_grp.single_field .form_content,
  .write_data .form_grp.single_field .form_content,
  .forget_password .form_grp.single_field .form_content,
  .mystudysearch_data .form_grp.single_field .form_content,
  .stored_value_group .form_grp.single_field .form_content,
  .reader_form_group .form_grp.single_field .form_content,
  .delivery_method_block .form_grp.single_field .form_content,
  .reserve_block .form_grp.single_field .form_content {
    width: 100%;
  }
}
.modify_data .form_grp .address input[type=text],
.write_data .form_grp .address input[type=text],
.forget_password .form_grp .address input[type=text],
.mystudysearch_data .form_grp .address input[type=text],
.stored_value_group .form_grp .address input[type=text],
.reader_form_group .form_grp .address input[type=text],
.delivery_method_block .form_grp .address input[type=text],
.reserve_block .form_grp .address input[type=text] {
  width: 100% !important;
}
@media screen and (max-width: 991px) {
  .modify_data .form_grp .address select,
  .write_data .form_grp .address select,
  .forget_password .form_grp .address select,
  .mystudysearch_data .form_grp .address select,
  .stored_value_group .form_grp .address select,
  .reader_form_group .form_grp .address select,
  .delivery_method_block .form_grp .address select,
  .reserve_block .form_grp .address select {
    width: 100% !important;
  }
}
.modify_data p a,
.write_data p a,
.forget_password p a,
.mystudysearch_data p a,
.stored_value_group p a,
.reader_form_group p a,
.delivery_method_block p a,
.reserve_block p a {
  color: #774e2b;
  text-decoration: underline;
}
.modify_data p a:hover,
.write_data p a:hover,
.forget_password p a:hover,
.mystudysearch_data p a:hover,
.stored_value_group p a:hover,
.reader_form_group p a:hover,
.delivery_method_block p a:hover,
.reserve_block p a:hover {
  color: #dd1f03;
}
.modify_data .form_title,
.write_data .form_title,
.forget_password .form_title,
.mystudysearch_data .form_title,
.stored_value_group .form_title,
.reader_form_group .form_title,
.delivery_method_block .form_title,
.reserve_block .form_title {
  color: #000;
  font-size: 1.125em;
}
.modify_data .form_title span,
.write_data .form_title span,
.forget_password .form_title span,
.mystudysearch_data .form_title span,
.stored_value_group .form_title span,
.reader_form_group .form_title span,
.delivery_method_block .form_title span,
.reserve_block .form_title span {
  color: #999;
  margin-right: 10px;
  font-size: 0.875em;
  margin-left: 10px;
}
.modify_data .form_content .select_date,
.write_data .form_content .select_date,
.forget_password .form_content .select_date,
.mystudysearch_data .form_content .select_date,
.stored_value_group .form_content .select_date,
.reader_form_group .form_content .select_date,
.delivery_method_block .form_content .select_date,
.reserve_block .form_content .select_date {
  padding: 0.2em 0;
}
.modify_data .form_content .select_date input,
.write_data .form_content .select_date input,
.forget_password .form_content .select_date input,
.mystudysearch_data .form_content .select_date input,
.stored_value_group .form_content .select_date input,
.reader_form_group .form_content .select_date input,
.delivery_method_block .form_content .select_date input,
.reserve_block .form_content .select_date input {
  width: 75% !important;
  padding: 0.2em 0.4em !important;
}
.modify_data .form_content .select_date .image,
.write_data .form_content .select_date .image,
.forget_password .form_content .select_date .image,
.mystudysearch_data .form_content .select_date .image,
.stored_value_group .form_content .select_date .image,
.reader_form_group .form_content .select_date .image,
.delivery_method_block .form_content .select_date .image,
.reserve_block .form_content .select_date .image {
  margin-top: 0 !important;
}
.modify_data .form_content .select_date .image a,
.write_data .form_content .select_date .image a,
.forget_password .form_content .select_date .image a,
.mystudysearch_data .form_content .select_date .image a,
.stored_value_group .form_content .select_date .image a,
.reader_form_group .form_content .select_date .image a,
.delivery_method_block .form_content .select_date .image a,
.reserve_block .form_content .select_date .image a {
  display: block;
}
.modify_data .form_content .select_date .image img,
.write_data .form_content .select_date .image img,
.forget_password .form_content .select_date .image img,
.mystudysearch_data .form_content .select_date .image img,
.stored_value_group .form_content .select_date .image img,
.reader_form_group .form_content .select_date .image img,
.delivery_method_block .form_content .select_date .image img,
.reserve_block .form_content .select_date .image img {
  vertical-align: middle;
  width: 24px;
}
.modify_data .form_content .address select,
.write_data .form_content .address select,
.forget_password .form_content .address select,
.mystudysearch_data .form_content .address select,
.stored_value_group .form_content .address select,
.reader_form_group .form_content .address select,
.delivery_method_block .form_content .address select,
.reserve_block .form_content .address select {
  width: auto;
}
.modify_data .form_content .address input[type=text],
.write_data .form_content .address input[type=text],
.forget_password .form_content .address input[type=text],
.mystudysearch_data .form_content .address input[type=text],
.stored_value_group .form_content .address input[type=text],
.reader_form_group .form_content .address input[type=text],
.delivery_method_block .form_content .address input[type=text],
.reserve_block .form_content .address input[type=text] {
  width: 69%;
}
@media screen and (max-width: 991px) {
  .modify_data .form_content .address select,
  .write_data .form_content .address select,
  .forget_password .form_content .address select,
  .mystudysearch_data .form_content .address select,
  .stored_value_group .form_content .address select,
  .reader_form_group .form_content .address select,
  .delivery_method_block .form_content .address select,
  .reserve_block .form_content .address select {
    width: 49%;
  }
  .modify_data .form_content .address input[type=text],
  .write_data .form_content .address input[type=text],
  .forget_password .form_content .address input[type=text],
  .mystudysearch_data .form_content .address input[type=text],
  .stored_value_group .form_content .address input[type=text],
  .reader_form_group .form_content .address input[type=text],
  .delivery_method_block .form_content .address input[type=text],
  .reserve_block .form_content .address input[type=text] {
    width: 100%;
  }
}
@media screen and (max-width: 575px) {
  .modify_data .form_content .address select,
  .write_data .form_content .address select,
  .forget_password .form_content .address select,
  .mystudysearch_data .form_content .address select,
  .stored_value_group .form_content .address select,
  .reader_form_group .form_content .address select,
  .delivery_method_block .form_content .address select,
  .reserve_block .form_content .address select {
    width: 100%;
  }
}
.modify_data .form_content ::-moz-placeholder, .write_data .form_content ::-moz-placeholder, .forget_password .form_content ::-moz-placeholder, .mystudysearch_data .form_content ::-moz-placeholder, .stored_value_group .form_content ::-moz-placeholder, .reader_form_group .form_content ::-moz-placeholder, .delivery_method_block .form_content ::-moz-placeholder, .reserve_block .form_content ::-moz-placeholder {
  color: #666;
}
.modify_data .form_content ::placeholder,
.write_data .form_content ::placeholder,
.forget_password .form_content ::placeholder,
.mystudysearch_data .form_content ::placeholder,
.stored_value_group .form_content ::placeholder,
.reader_form_group .form_content ::placeholder,
.delivery_method_block .form_content ::placeholder,
.reserve_block .form_content ::placeholder {
  color: #666;
}
.modify_data .form_content .upload_grp,
.write_data .form_content .upload_grp,
.forget_password .form_content .upload_grp,
.mystudysearch_data .form_content .upload_grp,
.stored_value_group .form_content .upload_grp,
.reader_form_group .form_content .upload_grp,
.delivery_method_block .form_content .upload_grp,
.reserve_block .form_content .upload_grp {
  display: block;
  border: 1px solid #ccc;
  overflow: hidden;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
}
@media screen and (max-width: 575px) {
  .modify_data .form_content .upload_grp,
  .write_data .form_content .upload_grp,
  .forget_password .form_content .upload_grp,
  .mystudysearch_data .form_content .upload_grp,
  .stored_value_group .form_content .upload_grp,
  .reader_form_group .form_content .upload_grp,
  .delivery_method_block .form_content .upload_grp,
  .reserve_block .form_content .upload_grp {
    text-align: center;
  }
}
.modify_data .form_content .upload_grp .member_pic,
.write_data .form_content .upload_grp .member_pic,
.forget_password .form_content .upload_grp .member_pic,
.mystudysearch_data .form_content .upload_grp .member_pic,
.stored_value_group .form_content .upload_grp .member_pic,
.reader_form_group .form_content .upload_grp .member_pic,
.delivery_method_block .form_content .upload_grp .member_pic,
.reserve_block .form_content .upload_grp .member_pic {
  width: 110px;
  height: 110px;
  border-radius: 0;
  background-color: #eee;
  text-align: center;
  position: relative;
  margin: 0 20px 0 0;
  vertical-align: middle;
  position: relative;
  float: left;
}
@media screen and (max-width: 575px) {
  .modify_data .form_content .upload_grp .member_pic,
  .write_data .form_content .upload_grp .member_pic,
  .forget_password .form_content .upload_grp .member_pic,
  .mystudysearch_data .form_content .upload_grp .member_pic,
  .stored_value_group .form_content .upload_grp .member_pic,
  .reader_form_group .form_content .upload_grp .member_pic,
  .delivery_method_block .form_content .upload_grp .member_pic,
  .reserve_block .form_content .upload_grp .member_pic {
    margin: 0 auto 15px;
    float: none;
    clear: both;
  }
}
.modify_data .form_content .upload_grp .member_pic a,
.write_data .form_content .upload_grp .member_pic a,
.forget_password .form_content .upload_grp .member_pic a,
.mystudysearch_data .form_content .upload_grp .member_pic a,
.stored_value_group .form_content .upload_grp .member_pic a,
.reader_form_group .form_content .upload_grp .member_pic a,
.delivery_method_block .form_content .upload_grp .member_pic a,
.reserve_block .form_content .upload_grp .member_pic a {
  display: block;
  width: 110px;
  height: 110px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}
.modify_data .form_content .upload_grp .member_pic a img,
.write_data .form_content .upload_grp .member_pic a img,
.forget_password .form_content .upload_grp .member_pic a img,
.mystudysearch_data .form_content .upload_grp .member_pic a img,
.stored_value_group .form_content .upload_grp .member_pic a img,
.reader_form_group .form_content .upload_grp .member_pic a img,
.delivery_method_block .form_content .upload_grp .member_pic a img,
.reserve_block .form_content .upload_grp .member_pic a img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  width: auto;
}
.modify_data .form_content .upload_grp .upload_btn,
.write_data .form_content .upload_grp .upload_btn,
.forget_password .form_content .upload_grp .upload_btn,
.mystudysearch_data .form_content .upload_grp .upload_btn,
.stored_value_group .form_content .upload_grp .upload_btn,
.reader_form_group .form_content .upload_grp .upload_btn,
.delivery_method_block .form_content .upload_grp .upload_btn,
.reserve_block .form_content .upload_grp .upload_btn {
  position: relative;
  display: inline-block;
  margin: 0 0 15px 0;
}
.modify_data .form_content .upload_grp .upload_remark,
.write_data .form_content .upload_grp .upload_remark,
.forget_password .form_content .upload_grp .upload_remark,
.mystudysearch_data .form_content .upload_grp .upload_remark,
.stored_value_group .form_content .upload_grp .upload_remark,
.reader_form_group .form_content .upload_grp .upload_remark,
.delivery_method_block .form_content .upload_grp .upload_remark,
.reserve_block .form_content .upload_grp .upload_remark {
  display: block;
}
.modify_data .form_content img,
.write_data .form_content img,
.forget_password .form_content img,
.mystudysearch_data .form_content img,
.stored_value_group .form_content img,
.reader_form_group .form_content img,
.delivery_method_block .form_content img,
.reserve_block .form_content img {
  vertical-align: middle;
}
.modify_data .form_content .form_col,
.write_data .form_content .form_col,
.forget_password .form_content .form_col,
.mystudysearch_data .form_content .form_col,
.stored_value_group .form_content .form_col,
.reader_form_group .form_content .form_col,
.delivery_method_block .form_content .form_col,
.reserve_block .form_content .form_col {
  display: flex;
}
.modify_data .form_content ul,
.write_data .form_content ul,
.forget_password .form_content ul,
.mystudysearch_data .form_content ul,
.stored_value_group .form_content ul,
.reader_form_group .form_content ul,
.delivery_method_block .form_content ul,
.reserve_block .form_content ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.modify_data .form_content ul li input[type=radio],
.write_data .form_content ul li input[type=radio],
.forget_password .form_content ul li input[type=radio],
.mystudysearch_data .form_content ul li input[type=radio],
.stored_value_group .form_content ul li input[type=radio],
.reader_form_group .form_content ul li input[type=radio],
.delivery_method_block .form_content ul li input[type=radio],
.reserve_block .form_content ul li input[type=radio] {
  margin-right: 10px;
}
.modify_data .form_content .selectblock,
.write_data .form_content .selectblock,
.forget_password .form_content .selectblock,
.mystudysearch_data .form_content .selectblock,
.stored_value_group .form_content .selectblock,
.reader_form_group .form_content .selectblock,
.delivery_method_block .form_content .selectblock,
.reserve_block .form_content .selectblock {
  position: relative;
}
.modify_data .form_content .select,
.write_data .form_content .select,
.forget_password .form_content .select,
.mystudysearch_data .form_content .select,
.stored_value_group .form_content .select,
.reader_form_group .form_content .select,
.delivery_method_block .form_content .select,
.reserve_block .form_content .select {
  line-height: 2.4em;
  height: 2.4em;
  padding: 0 24px 0 0.5em;
  border: 1px solid #d3d3d3 !important;
  background: #fff url(../images/basic/icon_select_arrow.svg) no-repeat right center;
  background-size: 25px;
  margin-right: 2px;
  margin-bottom: 0;
  display: inline-block;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}
.modify_data .form_content .selectdownblock,
.write_data .form_content .selectdownblock,
.forget_password .form_content .selectdownblock,
.mystudysearch_data .form_content .selectdownblock,
.stored_value_group .form_content .selectdownblock,
.reader_form_group .form_content .selectdownblock,
.delivery_method_block .form_content .selectdownblock,
.reserve_block .form_content .selectdownblock {
  border: 1px solid #d3d3d3;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  display: none;
  position: absolute;
  top: 2.5em;
  left: 0;
  z-index: 9;
  width: 100%;
  max-height: 300px;
  overflow-y: scroll;
  box-sizing: border-box;
}
.modify_data .form_content .selectdownblock ul,
.write_data .form_content .selectdownblock ul,
.forget_password .form_content .selectdownblock ul,
.mystudysearch_data .form_content .selectdownblock ul,
.stored_value_group .form_content .selectdownblock ul,
.reader_form_group .form_content .selectdownblock ul,
.delivery_method_block .form_content .selectdownblock ul,
.reserve_block .form_content .selectdownblock ul {
  margin: 0;
  padding: 0;
}
.modify_data .form_content .selectdownblock ul li,
.write_data .form_content .selectdownblock ul li,
.forget_password .form_content .selectdownblock ul li,
.mystudysearch_data .form_content .selectdownblock ul li,
.stored_value_group .form_content .selectdownblock ul li,
.reader_form_group .form_content .selectdownblock ul li,
.delivery_method_block .form_content .selectdownblock ul li,
.reserve_block .form_content .selectdownblock ul li {
  list-style: none;
  padding: 0;
}
.modify_data .form_content .selectdownblock ul li input,
.write_data .form_content .selectdownblock ul li input,
.forget_password .form_content .selectdownblock ul li input,
.mystudysearch_data .form_content .selectdownblock ul li input,
.stored_value_group .form_content .selectdownblock ul li input,
.reader_form_group .form_content .selectdownblock ul li input,
.delivery_method_block .form_content .selectdownblock ul li input,
.reserve_block .form_content .selectdownblock ul li input {
  margin-right: 8px;
  vertical-align: middle;
}

.mystudysearch_data .form_grp {
  display: flex;
  overflow: visible !important;
}
@media screen and (max-width: 767px) {
  .mystudysearch_data .form_grp {
    flex-wrap: wrap;
  }
}

.write_data {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 0px 30px 30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.write_data h3 {
  color: #dd1f03;
}

.modify_data .form_grid .form_content .radio_grp {
  min-height: 41px;
}
@media screen and (max-width: 991px) {
  .modify_data .form_grid .form_content .radio_grp {
    height: auto;
  }
}
.modify_data .form_grid .form_content .radio_grp label {
  padding-top: 0px;
  padding-bottom: 2px;
}

.mystudytrack_block {
  margin: 0px 15px 20px;
  overflow: hidden;
}
.mystudytrack_block .btn_grp {
  text-align: left;
  margin-left: 10px;
}
.mystudytrack_block .mystudytrack_list {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 20px 20px 20px 30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  width: 32%;
  float: left;
  margin: 0 0.66% 15px;
  box-sizing: border-box;
}
@media (max-width: 1300px) {
  .mystudytrack_block .mystudytrack_list {
    width: 48%;
    margin: 0 1% 15px;
  }
}
@media screen and (max-width: 991px) {
  .mystudytrack_block .mystudytrack_list {
    width: 100%;
    margin: 0 0 15px;
  }
}
.mystudytrack_block .mystudytrack_list:before {
  content: "";
  border: 30px solid #b94b00;
  border-color: #b94b00 transparent transparent #b94b00;
  position: absolute;
  top: 0;
  left: 0;
}
.mystudytrack_block .mystudytrack_list .listfunction {
  margin: 0 0 10px;
  padding: 0;
  text-align: right;
}
.mystudytrack_block .mystudytrack_list .listfunction li {
  display: inline-block;
  list-style: none;
  margin: 0 0 0 5px;
}
.mystudytrack_block .mystudytrack_list .listfunction li a {
  display: block;
  padding: 0 5px;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 50%;
  line-height: 50px;
  box-sizing: border-box;
}
.mystudytrack_block .mystudytrack_list .listfunction li a:hover {
  background-color: #e5e5e5;
}
.mystudytrack_block .mystudytrack_list .listfunction li a img {
  width: 22px;
}
.mystudytrack_block .mystudytrack_list .listul {
  margin: 0;
  padding: 0;
}
.mystudytrack_block .mystudytrack_list .listul li {
  list-style: none;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mystudytrack_block .mystudytrack_list .listul li:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  left: 0;
  top: 8px;
}

.tracking_subscription_block {
  margin: 30px;
}
.tracking_subscription_block .form_title {
  color: #000;
  font-size: 1.125em;
}
.tracking_subscription_block .searchsystem {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .tracking_subscription_block .searchsystem {
    margin-bottom: 5px;
  }
}
.tracking_subscription_block .searchsystem table {
  border: none;
}
.tracking_subscription_block .searchsystem table td {
  border: none;
  padding: 0 5px 0 0;
  vertical-align: top;
}
@media screen and (max-width: 767px) {
  .tracking_subscription_block .searchsystem table td {
    display: block;
    overflow: hidden;
  }
}
.tracking_subscription_block .searchsystem .select_left {
  width: 100%;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .tracking_subscription_block .searchsystem .select_left {
    display: block;
  }
}
.tracking_subscription_block .searchsystem .select_left select {
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #d3d3d3;
  font-size: 1em;
  padding: 0 24px 0 0.5em;
  height: 2.4em;
  line-height: 2.4em;
}
.tracking_subscription_block .searchsystem .form_search {
  box-shadow: none;
  width: 100%;
  margin: 0;
  border-radius: 5px;
  border: 1px solid #d3d3d3;
  padding: 0 24px 0 0em !important;
  height: 2.4em;
  line-height: 2em;
  position: relative;
  box-sizing: border-box;
}
@media screen and (max-width: 991px) {
  .tracking_subscription_block .searchsystem .form_search {
    width: 100px;
  }
}
@media screen and (max-width: 767px) {
  .tracking_subscription_block .searchsystem .form_search {
    width: 100%;
  }
}
.tracking_subscription_block .searchsystem .form_search input[type=text] {
  border-radius: 0;
  border: none;
  font-size: 1em;
  width: 90%;
  padding: 7px 10px 5px;
  font-weight: normal;
  margin: 0;
  color: #333;
}
.tracking_subscription_block .searchsystem .form_search img {
  position: absolute;
  right: 5px;
  top: 10px;
}
.tracking_subscription_block .searchsystem ul {
  margin: 5px 0 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .tracking_subscription_block .searchsystem ul {
    margin: 5px 0;
  }
}
.tracking_subscription_block .searchsystem ul li {
  display: inline-block;
  margin-right: 3px;
}
.tracking_subscription_block .searchsystem ul li a {
  display: block;
}
.tracking_subscription_block .searchsystem ul li a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.tracking_subscription_block .searchsystem .btn_grp {
  margin: 5px 0 15px;
  clear: both;
  float: none;
}

.reward_block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.reward_block .reward_img {
  width: 80px;
  margin-right: 10px;
}
.reward_block .reward_img img {
  width: 80px;
}
.reward_block .serial_number {
  display: block;
  margin-top: 5px;
}

.mystudy_data_blcok {
  margin: 20px 30px 70px;
}

.security_deposit_block {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 991px) {
  .security_deposit_block {
    display: block;
  }
}
.security_deposit_block .title {
  font-size: 1.5em;
  font-weight: bolder;
  color: #005d98;
}

.explain_group {
  flex: auto;
  flex-basis: 100%;
  max-width: 100%;
  padding: 20px;
  box-sizing: border-box;
  line-height: 1.7em;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  font-size: 1.063em;
}

.security_deposit_group {
  flex: none;
  flex-basis: 60%;
  max-width: 60%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  margin-right: 20px;
  position: relative;
}
@media screen and (max-width: 991px) {
  .security_deposit_group {
    flex-basis: 100%;
    max-width: 100%;
    margin: 0 0 20px;
  }
}
.security_deposit_group:before {
  content: "";
  border: 30px solid #b94b00;
  border-color: #b94b00 transparent transparent #b94b00;
  position: absolute;
  top: 0;
  left: 0;
}
.security_deposit_group .content {
  padding: 20px 10px;
  box-sizing: border-box;
}
.security_deposit_group .content .title {
  margin-bottom: 10px;
  margin-left: 50px;
}
.security_deposit_group .content .money {
  font-size: 1.25em;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media screen and (max-width: 575px) {
  .security_deposit_group .content .money {
    display: block;
    text-align: center;
  }
}
.security_deposit_group .content .money .image {
  margin-right: 20px;
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(232, 232, 232) 100%);
  border: 1px solid #ddd;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.security_deposit_group .content .money .image img {
  width: 70px;
  margin: 0 auto;
}
@media screen and (max-width: 575px) {
  .security_deposit_group .content .money .image {
    margin: 0 auto 50px;
  }
}
.security_deposit_group .content .money span {
  font-weight: bolder;
}
.security_deposit_group .content .money span em {
  font-size: 4em;
  color: #b94b00;
  font-weight: bolder;
  padding: 0 10px;
}
@media (max-width: 400px) {
  .security_deposit_group .content .money span em {
    font-size: 3em;
  }
}
.security_deposit_group .content .btn_group {
  margin-bottom: 10px;
  text-align: center;
}
.security_deposit_group .content .btn_group button {
  margin-right: 5px;
}
@media screen and (max-width: 575px) {
  .security_deposit_group .content .btn_group button {
    width: 140px;
  }
  .security_deposit_group .content .btn_group button.btn {
    padding: 0.5em !important;
  }
}
@media (max-width: 400px) {
  .security_deposit_group .content .btn_group button {
    width: 80%;
    margin-right: 0px;
  }
}
.security_deposit_group .content .remind {
  text-align: center;
  line-height: 1.7em;
}
.authority_group {
  flex: none;
  flex-basis: calc(40% - 20px);
  max-width: calc(40% - 20px);
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
}
@media screen and (max-width: 991px) {
  .authority_group {
    flex-basis: 100%;
    max-width: 100%;
    margin: 0 0 20px;
  }
}
.authority_group:before {
  content: "";
  border: 30px solid #b94b00;
  border-color: #b94b00 transparent transparent #b94b00;
  position: absolute;
  top: 0;
  left: 0;
}
.authority_group .content {
  padding: 20px 10px;
  box-sizing: border-box;
}
.authority_group .content .title {
  margin-bottom: 50px;
  margin-left: 50px;
}
.authority_group .content .state {
  font-size: 3.5em;
  color: #b94b00;
  margin-bottom: 40px;
  font-weight: bolder;
  text-align: center;
  line-height: 1.2em;
}
@media (max-width: 400px) {
  .authority_group .content .state {
    font-size: 2.5em;
  }
}
.authority_group .content .btn_group {
  margin-bottom: 10px;
  text-align: center;
}
.authority_group .content .btn_group button {
  margin-right: 5px;
}
@media (max-width: 400px) {
  .authority_group .content .btn_group button {
    width: 80%;
    margin-right: 0px;
  }
}

.study_tab {
  display: flex;
  margin: 0 0 20px;
}
.study_tab .bookmark {
  width: 30%;
  margin-right: 10px;
}
@media screen and (max-width: 575px) {
  .study_tab .bookmark {
    width: 48%;
  }
}
.study_tab .bookmark a {
  display: block;
  padding: 20px 10px;
  background: #dcdcdc;
  background: linear-gradient(to bottom, #dcdcdc, #e5e5e5);
  color: #333;
  font-size: 1.313em;
  text-align: center;
  border-radius: 5px;
  position: relative;
  transition: 0.2s;
}
.study_tab .bookmark a:hover {
  background-image: none;
  background-color: #f1ad00;
  color: #000;
}
.study_tab .bookmark a.here {
  background: #f1ad00;
  color: #000;
}
.study_tab .bookmark a.here:focus {
  background: #ffba0c;
}

.super_business_block {
  margin-bottom: 20px;
}
.super_business_block .super_business_group {
  border: 1px solid #ddd;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
  padding: 20px;
}
.super_business_block .super_business_group ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.super_business_block .super_business_group ul li {
  margin-bottom: 15px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 12px;
  padding-left: 110px;
}
.super_business_block .super_business_group ul li:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.super_business_block .super_business_group ul li span {
  padding: 5px 15px;
  color: #fff;
  background-color: #b94b00;
  border-radius: 5px;
  margin-right: 15px;
  margin-left: -110px;
}

.mystudy_tabl_data {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media screen and (max-width: 575px) {
  .mystudy_tabl_data {
    display: block;
  }
}
@media screen and (max-width: 575px) {
  .mystudy_tabl_data div {
    margin-bottom: 5px;
  }
}
.mystudy_tabl_data div em {
  color: #b94b00;
  font-style: normal;
  padding: 0 5px;
}

.mystudy_pack_block {
  margin: 20px 0;
}
.mystudy_pack_block .pack_group {
  border: 1px solid #ddd;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
  padding: 20px 10px 20px 60px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 5px;
  position: relative;
  margin-bottom: 20px;
}
.mystudy_pack_block .pack_group:before {
  content: "";
  border: 30px solid #b94b00;
  border-color: #b94b00 transparent transparent #b94b00;
  position: absolute;
  top: 0;
  left: 0;
}
.mystudy_pack_block .pack_group .pack_list_num {
  flex-basis: 100%;
  max-width: 100%;
  position: absolute;
  left: 10px;
  top: 10px;
}
@media (max-width: 1200px) {
  .mystudy_pack_block .pack_group .pack_list_num {
    margin: 0px;
  }
}
.mystudy_pack_block .pack_group .pack_list_num span {
  width: 30px;
  height: 30px;
  min-width: auto;
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mystudy_pack_block .pack_group .pack_list {
  flex: none;
  flex-basis: 48%;
  max-width: 48%;
  margin: 0 1% 10px;
  display: flex;
  align-items: center;
}
@media (max-width: 1200px) {
  .mystudy_pack_block .pack_group .pack_list {
    display: block;
  }
}
@media screen and (max-width: 575px) {
  .mystudy_pack_block .pack_group .pack_list {
    flex-basis: 100%;
    max-width: 100%;
    margin: 0 0 20px;
  }
}
.mystudy_pack_block .pack_group .pack_list a {
  margin-left: 15px;
}
.mystudy_pack_block .pack_group .pack_list.moredata {
  display: block;
}
.mystudy_pack_block .pack_group .pack_list span {
  color: #333;
  min-width: 200px;
  margin-right: 15px;
  display: flex;
  font-weight: bolder;
  font-size: 1.125em;
}
@media (max-width: 1200px) {
  .mystudy_pack_block .pack_group .pack_list span {
    margin: 0 0 20px;
  }
}
.mystudy_pack_block .pack_group .pack_list span em {
  color: #005d98;
  padding: 5px 0px;
  box-sizing: border-box;
  border-bottom: 2px solid #005d98;
}
.mystudy_pack_block .pack_group .pack_list ul {
  margin: 20px 30px;
  padding: 0;
}
.mystudy_pack_block .pack_group .pack_list ul li {
  margin-bottom: 5px;
}

.study_form {
  margin: 20px 0;
  background-color: #eee;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  border: #ddd 1px solid;
}
.study_form .order_number .form_grp {
  border-bottom: none;
}
.study_form .order_number .form_title {
  width: 20%;
  font-size: 1.125em;
  font-weight: bolder;
  text-align: right;
  margin: 8px 0 0 0;
}
@media screen and (max-width: 991px) {
  .study_form .order_number .form_title {
    width: 100%;
    text-align: left;
  }
}
.study_form .order_number .form_content {
  display: flex;
  align-items: center;
}
.study_form .order_number .form_content input[type=text] {
  margin: 0.25em 0.3em;
  padding: 0.6em;
}
@media screen and (max-width: 991px) {
  .study_form .order_number .form_content {
    width: 100%;
  }
}

.stored_value_block .stored_value_group {
  line-height: 1.7em;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  padding: 20px;
  box-sizing: border-box;
}
.stored_value_block .upload_grp {
  padding-left: 136px;
  padding-top: 5px;
}
@media screen and (max-width: 575px) {
  .stored_value_block .upload_grp {
    text-align: left !important;
  }
}
.stored_value_block .upload_grp .upload_btn {
  left: 0;
  right: auto;
}
@media screen and (max-width: 575px) {
  .stored_value_block .upload_grp .upload_btn {
    top: 0 !important;
  }
}
@media screen and (max-width: 575px) {
  .stored_value_block .form_col.bank_data {
    display: block;
  }
}
.stored_value_block .form_col.bank_data input {
  width: 20%;
  margin-right: 5px;
  vertical-align: middle;
}
.stored_value_block .form_col.bank_data .bank_num {
  width: 20%;
}
.stored_value_block .form_col.bank_data .bank_name {
  width: 60%;
}
.stored_value_block .form_col.bank_data .btn {
  margin: 0 0 0.25em;
  min-width: auto;
  padding: 0.5em !important;
}
@media screen and (max-width: 575px) {
  .stored_value_block .form_col.bank_data input,
  .stored_value_block .form_col.bank_data .bank_num,
  .stored_value_block .form_col.bank_data .bank_name {
    width: 100%;
  }
}

.reader_form_group {
  margin: 20px 0 0;
  line-height: 1.7em;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  padding: 20px;
  box-sizing: border-box;
}

.mystudy_sdg_reading {
  margin: 40px 30px;
}
.mystudy_sdg_reading .title {
  margin-bottom: 30px !important;
}
.mystudy_sdg_reading .SDG_explain {
  margin-bottom: 30px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  line-height: 1.55em;
  box-sizing: border-box;
}
.mystudy_sdg_reading .SDG_banner {
  overflow: hidden;
  margin: 0 0 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.mystudy_sdg_reading .SDG_banner .SDG_img {
  flex: none;
  flex-basis: 170px;
  margin: 0 5px 5px;
}
.mystudy_sdg_reading .SDG_banner .SDG_img a {
  display: block;
}
.mystudy_sdg_reading .SDG_banner .SDG_img a.unread {
  opacity: 0.4;
  box-shadow: none;
  -webkit-filter: grayscale(1);
}
.mystudy_sdg_reading .SDG_banner .SDG_img a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}

.wallet_module_block {
  text-align: center;
  max-width: 600px;
  border-radius: 8px;
  margin: 2em auto;
  padding: 3em;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.wallet_module_block p {
  font-size: 1.25em;
  line-height: 1.8em;
  margin: 0 0 2em;
}
.wallet_module_block ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
.wallet_module_block ul li {
  margin: 0 10px;
}
.wallet_module_block ul li a {
  display: block;
  padding: 0;
}
.wallet_module_block ul li a img {
  margin: 0;
  padding: 0;
  line-height: none;
}
@media screen and (max-width: 767px) {
  .wallet_module_block {
    width: auto;
    padding: 2em;
  }
  .wallet_module_block ul {
    flex-wrap: wrap;
  }
  .wallet_module_block ul li {
    margin: 0 10px 10px;
  }
}

.block01_h2, .SDG_targetdata .title, .SDG_block h2, .diversified_block h2, .onlinesearch_block h2, .forgetpassword_block h2, .network_certificate h2, .devicereservation_block h2, .reservation_block h2, .lp_content h2, .send_illustrate_group .title, .cp_content h2, .sitemap h2, .mystudy_sdg_reading .title {
  margin: 0;
  padding: 0 0 10px;
  text-align: center;
  color: #dc0122;
  font-size: 1.75em;
  line-height: 1.25em;
}

.network_certificate {
  width: 90%;
  margin: 40px auto 60px;
  box-sizing: border-box;
}
.network_certificate .certificate_content {
  margin-bottom: 30px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 30px 30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.network_certificate .certificate_content h3 {
  margin: 0 0 20px;
  padding: 0;
}
.network_certificate .check_grp {
  padding-top: 20px;
  border-top: 1px solid #ccc;
}
.network_certificate .btn_grp {
  padding: 0;
}
.network_certificate ul li {
  margin-bottom: 10px;
}

.annotation {
  text-align: center;
  margin-bottom: 20px;
}
.annotation a {
  color: #005d98, #5c9588, #5c9588, #0e664c, #313131, #1c4b82, #bc5702, #097e76, #774181, #088c6f, #0078c6;
  text-decoration: underline;
}
.annotation a:hover {
  color: #dd1f03;
}
.annotation span {
  font-size: 1.25em;
  display: block;
  margin-bottom: 10px;
}

.forgetpassword_block {
  width: 700px;
  margin: 40px auto 60px;
}
@media screen and (max-width: 767px) {
  .forgetpassword_block {
    width: auto;
    margin: 20px;
  }
}
.forgetpassword_block .forget_password {
  margin-bottom: 30px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 30px 50px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .forgetpassword_block .forget_password {
    padding: 30px 20px;
  }
}
.forgetpassword_block .forget_password .form_grp .password_toggle {
  display: flex;
  position: relative;
  flex-wrap: wrap;
}
.forgetpassword_block .forget_password .form_grp .password_toggle button.btn-icon {
  font-size: 0;
  right: 0.5em;
  top: 3px;
  height: 30px;
  background: none;
  border: transparent;
  position: absolute;
  padding: 0 !important;
  min-width: 3em;
  box-shadow: none;
  margin-right: 22px;
}
.forgetpassword_block .forget_password .form_grp .password_toggle button.btn-icon:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.forgetpassword_block .forget_password .form_grp .password_toggle button.btn_icon_hide {
  background-image: url("../images/icon/icon_hide.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  width: 20px;
}
.forgetpassword_block .forget_password .form_grp .password_toggle button.btn_icon_show {
  background-image: url("../images/icon/icon_show.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  width: 20px;
}
@media screen and (max-width: 991px) {
  .forgetpassword_block .forget_password .form_grp .password_toggle button {
    top: 1.7em;
  }
}
.forgetpassword_block label {
  margin-right: 10px;
  padding: 3px 0 0 3px;
}
.forgetpassword_block .btn_grp {
  padding-bottom: 0;
  margin-top: 40px;
  border-top: 1px solid #ccc;
}

.onlinesearch_block {
  width: 90%;
  margin: 40px auto 60px;
}
.onlinesearch_block .onlinesearch {
  margin-bottom: 40px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 20px 20px 40px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .onlinesearch_block .onlinesearch {
    padding: 20px 15px 30px;
  }
}
.onlinesearch_block .onlinesearch p {
  text-align: center;
}
.onlinesearch_block .onlinesearch .searchsystem {
  width: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  padding: 30px 30px;
  border-radius: 5px;
  background-color: #eee;
  box-sizing: border-box;
}
.onlinesearch_block .onlinesearch .searchsystem .select_left {
  float: left;
  width: 30%;
  margin-right: 0;
  margin-bottom: 5px;
  height: 40px;
  border: 1px solid #d3d3d3 !important;
}
@media (max-width: 480px) {
  .onlinesearch_block .onlinesearch .searchsystem .select_left {
    width: 100%;
    margin: 0 0 5px;
  }
}
.onlinesearch_block .onlinesearch .searchsystem .select_left select {
  background-color: #fff;
  border-radius: 0;
  border: none;
  font-size: 1em;
  height: 2.5em;
  line-height: 2.2em;
  border: none !important;
}
.onlinesearch_block .onlinesearch .form_search {
  background-color: #fff;
  width: 68%;
  height: 40px;
  margin: 0 auto 10px;
  text-align: left;
  padding: 0px;
  overflow: hidden;
  float: left;
  border: 1px solid #d3d3d3 !important;
}
@media (max-width: 480px) {
  .onlinesearch_block .onlinesearch .form_search {
    width: 100%;
  }
}
.onlinesearch_block .onlinesearch .form_search input[type=text] {
  border-radius: 0;
  border: none;
  font-size: 1em;
  width: 82%;
  padding: 15px 10px 12px;
  font-weight: normal;
  margin: 0;
  color: #333;
  height: 38px;
}
@media (max-width: 992px) {
  .onlinesearch_block .onlinesearch .form_search input[type=text] {
    width: 77%;
  }
}
@media (max-width: 767px) {
  .onlinesearch_block .onlinesearch .form_search input[type=text] {
    width: 77%;
  }
}
@media (max-width: 650px) {
  .onlinesearch_block .onlinesearch .form_search input[type=text] {
    width: 74%;
  }
}
@media (max-width: 360px) {
  .onlinesearch_block .onlinesearch .form_search input[type=text] {
    width: 70%;
  }
}
.onlinesearch_block .onlinesearch .form_search input[type=text]:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 inset;
}
.onlinesearch_block .onlinesearch .form_search input {
  padding: 15px;
}
.onlinesearch_block .onlinesearch .form_search input[type=submit] {
  margin: 0;
  background-color: #f4573f;
  border: none;
  border-radius: 0;
  float: right;
  background-image: url("../images/icon_search01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px;
  width: 52px;
  min-width: auto;
  height: 40px;
}
.onlinesearch_block .onlinesearch .form_search input[type=submit]:focus {
  background-color: #c2230b;
}
.onlinesearch_block .onlinesearch .form_search ::-webkit-input-placeholder {
  /* Chrome */
  color: #666;
}
.onlinesearch_block .onlinesearch .form_search :-ms-input-placeholder {
  /* IE 10+ */
  color: #666;
}
.onlinesearch_block .onlinesearch .form_search ::-moz-placeholder {
  /* Firefox 19+ */
  color: #666;
  opacity: 1;
}
.onlinesearch_block .onlinesearch .form_search :-moz-placeholder {
  /* Firefox 4 - 18 */
  color: #666;
  opacity: 1;
}
.onlinesearch_block .onlinesearch .result_no {
  color: #999;
  clear: both;
}
.onlinesearch_block .onlinesearch .result_no em {
  color: #dc0122;
  font-style: normal;
  margin: 0 5px;
}
.onlinesearch_block .onlinesearch .result_yes .result1,
.onlinesearch_block .onlinesearch .result_yes .result2,
.onlinesearch_block .onlinesearch .result_yes .result3 {
  margin-bottom: 15px;
}
.onlinesearch_block .onlinesearch .result_yes .result1 p,
.onlinesearch_block .onlinesearch .result_yes .result2 p,
.onlinesearch_block .onlinesearch .result_yes .result3 p {
  text-align: left;
}
.onlinesearch_block .onlinesearch .result_yes .backpage {
  margin-bottom: 15px;
  overflow: hidden;
}
.onlinesearch_block .onlinesearch .result_yes .backpage a {
  background-image: url("../images/icon_back.png");
  background-repeat: no-repeat;
  background-position: 5px 6px;
  padding: 3px 10px 2px 30px;
  border-bottom: 1px dashed #d3d3d3;
  display: block;
}
.onlinesearch_block .onlinesearch .result_yes table td input.btn-orange {
  background-color: #eb6000;
  color: #fff;
  padding: 5px 20px;
  border-radius: 4px;
  border: 1px solid #eb6000;
}
.onlinesearch_block .onlinesearch .result_yes table td input.btn-orange:hover {
  background-color: #f57923;
}
.onlinesearch_block .onlinesearch .result_yes .onlinebooksearch {
  width: 100%;
}
@media screen and (max-width: 991px) {
  .onlinesearch_block .onlinesearch .result_yes .onlinebooksearch .form_grid .form_title {
    width: 100%;
  }
  .onlinesearch_block .onlinesearch .result_yes .onlinebooksearch .form_grid .form_content {
    width: 100%;
  }
}
.onlinesearch_block .onlinesearch .result_yes .onlinebooksearch .form_title {
  color: #000;
  font-size: 1.125em;
}
.onlinesearch_block .onlinesearch .result_yes div .select_date {
  float: left;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 0.3em;
  width: 100%;
}
.onlinesearch_block .onlinesearch .result_yes div .select_date input {
  margin-bottom: 0;
  border: none;
  padding: 0.4em;
  width: 75%;
}
.onlinesearch_block .onlinesearch .result_yes div .select_date .image {
  float: right;
  margin-top: 5px;
}
.onlinesearch_block .onlinesearch .result_yes div .select_date .image img {
  vertical-align: middle;
  margin-right: 3px;
}
.onlinesearch_block .onlinesearch .more {
  text-align: right;
}

.featured_blockin {
  background-color: #fed857;
  position: relative;
  padding: 40px 0 70px;
  text-align: left;
}
.featured_blockin .container {
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  min-height: 1px;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}
@media (max-width: 380px) {
  .featured_blockin .container {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 767px) {
  .featured_blockin {
    padding: 55px 0 20px;
  }
}
.featured_blockin h2 {
  color: #000;
  font-size: 1.875em;
  text-align: center;
  font-weight: 700;
  width: 100%;
  margin: 0 auto 40px;
  clear: both;
}
@media screen and (max-width: 767px) {
  .featured_blockin h2 {
    text-align: center;
  }
}
.featured_blockin .featured_data_group {
  display: flex;
  flex-wrap: wrap;
}
.featured_blockin .featured_data {
  flex: 0 0 auto;
  flex-basis: 24%;
  margin-right: 1%;
  margin-bottom: 1%;
  max-height: 520px;
  background-color: #fff;
  overflow: hidden;
}
@media screen and (max-width: 1399px) {
  .featured_blockin .featured_data {
    flex-basis: 32%;
    margin-right: 1%;
  }
}
@media screen and (max-width: 991px) {
  .featured_blockin .featured_data {
    flex-basis: 49%;
    margin-right: 1%;
  }
}
@media screen and (max-width: 575px) {
  .featured_blockin .featured_data {
    flex-basis: 100%;
    margin: 0 auto 20px;
    height: auto;
    max-height: none;
  }
}
.featured_blockin .featured_data a {
  display: block;
  position: relative;
  padding: 0px;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  color: #333;
}
.featured_blockin .featured_data a:hover {
  color: #333;
}
.featured_blockin .featured_data a:hover .description {
  display: block;
  width: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .featured_blockin .featured_data a:hover .description {
    display: none;
  }
}
.featured_blockin .featured_data a .datablock_top {
  position: relative;
  padding: 15px 15px 0 15px;
}
.featured_blockin .featured_data a .datablock_down {
  position: relative;
  padding: 0px 15px 20px 15px;
  overflow: hidden;
}
.featured_blockin .featured_data a .images {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #dedede;
  background-color: #fff;
  outline: 1px solid #eee;
}
.featured_blockin .featured_data a .images:before {
  display: block;
  content: "";
  padding-top: 75%;
}
.featured_blockin .featured_data a .images img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.featured_blockin .featured_data a .images img {
  width: 100%;
}
.featured_blockin .featured_data a .description {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: 0.5s ease-out;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .featured_blockin .featured_data a .description {
    display: none;
  }
}
.featured_blockin .featured_data a .description p {
  margin: 10px 15px;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30.5px;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  text-align: left;
}
@media (max-width: 1700px) {
  .featured_blockin .featured_data a .description p {
    -webkit-line-clamp: 8;
  }
}
@media (max-width: 1500px) {
  .featured_blockin .featured_data a .description p {
    -webkit-line-clamp: 7;
  }
}
@media (max-width: 1300px) {
  .featured_blockin .featured_data a .description p {
    -webkit-line-clamp: 6;
  }
}
@media (max-width: 1300px) {
  .featured_blockin .featured_data a .description p {
    -webkit-line-clamp: 5;
  }
}
.featured_blockin .featured_data a h3 {
  color: #005d98, #5c9588, #5c9588, #0e664c, #313131, #1c4b82, #bc5702, #097e76, #774181, #088c6f, #0078c6;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
  line-height: 25px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
}
.featured_blockin .featured_data a .datalist {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}
.featured_blockin .featured_data a .datalist li {
  text-align: left;
  margin-bottom: 5px;
  font-family: Lucida Console;
  font-size: 0.938em;
}
.featured_blockin .featured_data a .datalist li span {
  display: inline-block;
}
.featured_blockin .featured_data a .personal_photos {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
.featured_blockin .featured_data a .personal_photos li {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border-radius: 50%;
  text-align: center;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.5em;
  color: #333;
}
.featured_blockin .featured_data a .personal_photos li.redbg {
  background-color: #f3b8bc;
}
.featured_blockin .featured_data a .personal_photos li.orangebg {
  background-color: #f6ce8a;
}
.featured_blockin .featured_data a .personal_photos li.yellowbg {
  background-color: #fef75f;
}
.featured_blockin .featured_data a .personal_photos li.greenbg {
  background-color: #cbe398;
}
.featured_blockin .featured_data a .personal_photos li.bluebg {
  background-color: #99d5f5;
}
.featured_blockin .featured_data a .personal_photos li.darkbluebg {
  background-color: #87b7f6;
}
.featured_blockin .featured_data a .personal_photos li.purplebg {
  background-color: #dab5d7;
}
.featured_blockin .featured_data a .personal_photos li img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.featured_blockin .featured_data a .personal_photos li.more:after {
  content: "99+";
  position: absolute;
  width: 27px;
  height: 27px;
  background-color: #fff;
  color: #333;
  bottom: -5px;
  font-size: 0.688em;
  right: -20px;
  border-radius: 50%;
  text-align: center;
  line-height: 27px;
}
.featured_blockin .featured_data .btn_grp {
  padding: 0.5em 0 1em;
  float: right;
  clear: none;
  margin-top: 8px;
  position: relative;
}
.featured_blockin .featured_data .btn_grp .btn {
  min-width: 4em;
  padding: 0.5em 0 !important;
  border: 1px solid #959595;
  color: #333;
}
.featured_blockin .featured_data .btn_grp .btn:hover, .featured_blockin .featured_data .btn_grp .btn:focus {
  background: #f77810;
  border: 1px solid #cd6007;
  color: #fff;
}
.featured_blockin .featured_data .btn_grp .btnstyle {
  padding: 0.5em 10px !important;
}
.featured_blockin .featured_data .btn_grp input[type=button] {
  min-width: 4em !important;
}
.featured_blockin .featured_data .btn_grp input[type=button]:focus {
  background-color: #ddd;
}
.featured_blockin .more {
  text-align: center;
  width: 98%;
  margin: 20px auto;
  clear: both;
  float: none;
}
.featured_blockin .more a {
  background-color: #59493f;
  text-align: center;
  background-image: none;
  padding: 10px 35px;
}
.featured_blockin .more a:hover {
  background-color: #000;
}

.featured_blocklist {
  background-color: #fed857;
  position: relative;
  padding: 20px 0px;
  text-align: left;
  border-bottom: 1px solid #d3d3d3;
}
.featured_blocklist .container {
  width: 100% !important;
  max-width: 100% !important;
}
.featured_blocklist .featured_data {
  margin: 0 20px;
}
@media screen and (max-width: 767px) {
  .featured_blocklist .featured_data {
    margin: 0;
  }
}
.featured_blocklist .featured_data .images {
  width: 300px;
  position: relative;
  overflow: hidden;
  background: #dedede;
  background-color: transparent;
  float: left;
  margin-right: 30px;
}
.featured_blocklist .featured_data .images:before {
  display: block;
  content: "";
  padding-top: 75%;
}
.featured_blocklist .featured_data .images img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.featured_blocklist .featured_data .images img {
  width: 100%;
  bottom: auto;
}
@media (max-width: 620px) {
  .featured_blocklist .featured_data .images {
    width: 100%;
    float: none;
    margin: 20px 0;
  }
}
.featured_blocklist .featured_data h3 {
  color: #333;
  margin-bottom: 20px;
}
.featured_blocklist .featured_data .datalist {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}
.featured_blocklist .featured_data .datalist li {
  text-align: left;
  margin-bottom: 5px;
}
.featured_blocklist .featured_data .datalist li span {
  display: inline-block;
}
.featured_blocklist .featured_data .explain {
  color: #333;
  line-height: 1.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  text-align: left;
}
.featured_blocklist .featured_data .personal_photos {
  list-style: none;
  margin: 0px 0 0;
  padding: 0;
  float: left;
}
.featured_blocklist .featured_data .personal_photos li {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border-radius: 50%;
  text-align: center;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.5em;
  color: #333;
}
.featured_blocklist .featured_data .personal_photos li.redbg {
  background-color: #f3b8bc;
}
.featured_blocklist .featured_data .personal_photos li.orangebg {
  background-color: #f6ce8a;
}
.featured_blocklist .featured_data .personal_photos li.yellowbg {
  background-color: #fef75f;
}
.featured_blocklist .featured_data .personal_photos li.greenbg {
  background-color: #cbe398;
}
.featured_blocklist .featured_data .personal_photos li.bluebg {
  background-color: #99d5f5;
}
.featured_blocklist .featured_data .personal_photos li.darkbluebg {
  background-color: #87b7f6;
}
.featured_blocklist .featured_data .personal_photos li.purplebg {
  background-color: #dab5d7;
}
.featured_blocklist .featured_data .personal_photos li img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.featured_blocklist .featured_data .personal_photos li.more:after {
  content: "99+";
  position: absolute;
  width: 27px;
  height: 27px;
  background-color: #fff;
  color: #333;
  bottom: -5px;
  font-size: 0.688em;
  right: -20px;
  border-radius: 50%;
  text-align: center;
  line-height: 27px;
}
.featured_blocklist .featured_data .description {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  height: 57.5%;
  width: 100%;
  overflow: hidden;
  transition: 0.5s ease-out;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
@media (max-width: 1800px) {
  .featured_blocklist .featured_data .description {
    height: 55%;
  }
}
@media (max-width: 1700px) {
  .featured_blocklist .featured_data .description {
    height: 53%;
  }
}
@media (max-width: 1600px) {
  .featured_blocklist .featured_data .description {
    height: 52%;
  }
}
@media (max-width: 1500px) {
  .featured_blocklist .featured_data .description {
    height: 50%;
  }
}
@media (max-width: 1400px) {
  .featured_blocklist .featured_data .description {
    height: 47%;
  }
}
@media (max-width: 1300px) {
  .featured_blocklist .featured_data .description {
    height: 43%;
  }
}
@media (max-width: 1200px) {
  .featured_blocklist .featured_data .description {
    height: 41%;
  }
}
.featured_blocklist .featured_data .description p {
  margin: 10px 15px;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  text-align: left;
}
@media (max-width: 1700px) {
  .featured_blocklist .featured_data .description p {
    -webkit-line-clamp: 8;
  }
}
@media (max-width: 1500px) {
  .featured_blocklist .featured_data .description p {
    -webkit-line-clamp: 7;
  }
}
@media (max-width: 1300px) {
  .featured_blocklist .featured_data .description p {
    -webkit-line-clamp: 6;
  }
}
@media (max-width: 1300px) {
  .featured_blocklist .featured_data .description p {
    -webkit-line-clamp: 5;
  }
}
.featured_blocklist .featured_data .btn_grp {
  padding: 0.5em 0 1em;
  float: right;
  clear: none;
  margin-top: 8px;
}
.featured_blocklist .featured_data .btn_grp .btn {
  min-width: 4em;
  padding: 0.5em 0 !important;
  border: 1px solid #959595;
  color: #333;
}
.featured_blocklist .featured_data .btn_grp .btn:hover {
  background: #f77810;
  border: 1px solid #cd6007;
  color: #fff;
}
.featured_blocklist .featured_data .keywords {
  margin: 30px 0;
}
.featured_blocklist .featured_data .keywords ul {
  margin: 0;
  padding: 0;
}
.featured_blocklist .featured_data .keywords ul li {
  background: #774e2b;
  padding: 2px 10px 2px !important;
  color: #fff;
  margin: 0 2px 5px;
  border-radius: 4px;
  display: inline-block;
  color: #fff !important;
  text-decoration: none !important;
  position: relative;
  font-size: 0.938em;
}
.featured_blocklist .featured_data_sdg {
  margin: 10px 20px 0;
}
@media (max-width: 620px) {
  .featured_blocklist .featured_data_sdg {
    margin: 10px 10px 0;
  }
}
.featured_blocklist .featured_data_sdg .SDG_img {
  width: 300px;
  background-color: #f51733;
  color: #fff;
  float: left;
  overflow: hidden;
  margin-right: 30px;
  padding: 10px 10px 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.featured_blocklist .featured_data_sdg .SDG_img.no01 {
  background-color: #ea132e;
}
.featured_blocklist .featured_data_sdg .SDG_img.no02 {
  background-color: #a36b01;
}
.featured_blocklist .featured_data_sdg .SDG_img.no03 {
  background-color: #6d7e01;
}
.featured_blocklist .featured_data_sdg .SDG_img.no04 {
  background-color: #ca1d36;
}
.featured_blocklist .featured_data_sdg .SDG_img.no05 {
  background-color: #9b4ab1;
}
.featured_blocklist .featured_data_sdg .SDG_img.no06 {
  background-color: #00819e;
}
.featured_blocklist .featured_data_sdg .SDG_img.no07 {
  background-color: #9a7027;
}
.featured_blocklist .featured_data_sdg .SDG_img.no08 {
  background-color: #961838;
}
.featured_blocklist .featured_data_sdg .SDG_img.no09 {
  background-color: #be5a02;
}
.featured_blocklist .featured_data_sdg .SDG_img.no10 {
  background-color: #e1157e;
}
.featured_blocklist .featured_data_sdg .SDG_img.no11 {
  background-color: #85743f;
}
.featured_blocklist .featured_data_sdg .SDG_img.no12 {
  background-color: #9e6b49;
}
.featured_blocklist .featured_data_sdg .SDG_img.no13 {
  background-color: #3c8368;
}
.featured_blocklist .featured_data_sdg .SDG_img.no14 {
  background-color: #017cb5;
}
.featured_blocklist .featured_data_sdg .SDG_img.no15 {
  background-color: #20873f;
}
.featured_blocklist .featured_data_sdg .SDG_img.no16 {
  background-color: #005488;
}
.featured_blocklist .featured_data_sdg .SDG_img.no17 {
  background-color: #11345f;
}
@media (max-width: 620px) {
  .featured_blocklist .featured_data_sdg .SDG_img {
    width: 100%;
    float: none;
    margin: 0 0 20px;
  }
}
.featured_blocklist .featured_data_sdg .SDG_img em {
  font-size: 2em;
  flex: 0 0 none;
  flex-basis: 35px;
}
.featured_blocklist .featured_data_sdg .SDG_img span {
  flex: 1 1 auto;
  font-size: 1.25em;
  flex-basis: calc(100% - 35px);
}
.featured_blocklist .featured_data_sdg .SDG_img img {
  width: 100%;
}
.featured_blocklist .featured_data_sdg h3 {
  color: #333;
  margin: 0 0 20px;
}
.featured_blocklist .featured_data_sdg .explain {
  color: #333;
  line-height: 1.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  text-align: left;
}
.featured_blocklist .featured_data_sdg .keywords {
  margin: 30px 0;
}
.featured_blocklist .featured_data_sdg .keywords ul {
  margin: 0;
  padding: 0;
}
.featured_blocklist .featured_data_sdg .keywords ul li {
  background: #555;
  padding: 2px 10px 2px !important;
  color: #fff;
  margin: 0 2px 5px;
  border-radius: 4px;
  display: inline-block;
  color: #fff !important;
  text-decoration: none !important;
  position: relative;
  font-size: 0.938em;
}
.featured_blocklist .featured_data_sdg .content {
  flex: auto;
}
@media (max-width: 620px) {
  .featured_blocklist .featured_data_sdg .content {
    flex-basis: 100%;
  }
}
.featured_blocklist .more {
  text-align: center;
  width: 98%;
  margin: 20px auto;
  clear: both;
  float: none;
}
.featured_blocklist .more a {
  background-color: #59493f;
  text-align: center;
  background-image: none;
  padding: 10px 35px;
}
.featured_blocklist .more a:hover {
  background-color: #000;
}

.themetour_block {
  padding: 30px 30px 50px;
  overflow: hidden;
  box-sizing: border-box;
  background-image: linear-gradient(135deg, #fffcec 10%, #cfdcd1 100%);
  position: relative;
}
.themetour_block:before {
  content: "";
  background-image: url("../images/themetour_block_bg.png");
  background-position: 0 bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}
.themetour_block .themetour {
  width: 19%;
  line-height: 220px;
  text-align: center;
  float: left;
  margin: 0 0.5% 15px;
  height: 220px;
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 1600px) {
  .themetour_block .themetour {
    width: 24%;
    margin: 0 0.5% 15px;
  }
}
@media (max-width: 1250px) {
  .themetour_block .themetour {
    width: 32%;
    margin: 0 0.66% 15px;
  }
}
@media screen and (max-width: 991px) {
  .themetour_block .themetour {
    width: 48%;
    margin: 0 1% 15px;
  }
}
@media screen and (max-width: 575px) {
  .themetour_block .themetour {
    width: 100%;
    margin: 0px 0 2% 0;
    height: auto;
  }
}
.themetour_block .themetour .content {
  border: 1px solid #a4b2a6;
  border-radius: 0 10px 10px 10px;
  height: 210px;
  margin-top: 10px;
  transition: 0.2s;
  background-color: #fff;
}
.themetour_block .themetour .content:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px;
  border-color: #a4b2a6 transparent transparent #a4b2a6;
  position: absolute;
  top: 10px;
  left: 0px;
  transition: 0.2s;
}
.themetour_block .themetour .content:hover {
  margin-top: 0px;
  box-shadow: 3px 2px 4px 3px #ccc;
}
.themetour_block .themetour .content:hover:before {
  top: 0px;
}
.themetour_block .themetour .box {
  display: inline-block;
  height: auto;
  line-height: 1.3em;
  font-size: 2em;
  vertical-align: middle;
  padding: 10px 20px 10px 20px;
  box-sizing: border-box;
}
.themetour_block .themetour:nth-child(2n) .content:before {
  border-color: #ebb100 transparent transparent #ebb100;
}

.bookrecommend_block {
  margin: 0px 15px 20px;
  padding: 0;
  border-radius: 5px;
  clear: both;
}
@media (max-width: 420px) {
  .bookrecommend_block {
    padding: 10px 10px;
  }
}
.bookrecommend_block .bookrecommend_search {
  padding: 30px 30px;
  margin-right: 20px;
  margin-left: 20px;
  border-radius: 5px;
  background-color: #eee;
  overflow: hidden;
}
@media (max-width: 420px) {
  .bookrecommend_block .bookrecommend_search {
    padding: 20px 20px;
  }
}
@media (max-width: 350px) {
  .bookrecommend_block .bookrecommend_search {
    padding: 20px 10px;
  }
}
.bookrecommend_block .bookrecommend_search .searchsystem {
  width: 100%;
  margin-bottom: 0px;
}
.bookrecommend_block .bookrecommend_search .searchsystem .select_left {
  overflow: hidden;
  width: 40%;
  margin-right: 0;
  float: left;
}
@media (max-width: 480px) {
  .bookrecommend_block .bookrecommend_search .searchsystem .select_left {
    width: 100%;
  }
}
.bookrecommend_block .bookrecommend_search .searchsystem .select_left select {
  float: left;
  width: 50%;
  margin-right: 0;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  font-size: 1em;
  padding: 0 24px 0 0.5em;
  height: 2.5em;
  line-height: 2.2em;
  border-radius: 0;
}
@media (max-width: 480px) {
  .bookrecommend_block .bookrecommend_search .searchsystem .select_left select {
    width: 50%;
    margin-bottom: 5px;
  }
}
.bookrecommend_block .bookrecommend_search .searchsystem .select_left select:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 inset;
}
.bookrecommend_block .bookrecommend_search .form_search {
  border: 1px solid #d3d3d3;
  background-color: #fff;
  box-shadow: none;
  height: 40px;
  width: 60%;
  float: left;
  padding: 0;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .bookrecommend_block .bookrecommend_search .form_search {
    width: 100%;
  }
}
.bookrecommend_block .bookrecommend_search .form_search input[type=text] {
  width: 88%;
  height: 2.3em;
  padding: 0 10px;
  font-size: 1em;
}
@media (max-width: 1300px) {
  .bookrecommend_block .bookrecommend_search .form_search input[type=text] {
    width: 85%;
  }
}
@media screen and (max-width: 991px) {
  .bookrecommend_block .bookrecommend_search .form_search input[type=text] {
    width: 77%;
  }
}
@media screen and (max-width: 767px) {
  .bookrecommend_block .bookrecommend_search .form_search input[type=text] {
    width: 77%;
  }
}
@media (max-width: 350px) {
  .bookrecommend_block .bookrecommend_search .form_search input[type=text] {
    width: 70%;
  }
}
.bookrecommend_block .bookrecommend_search .form_search input[type=submit] {
  margin: 0;
  background-color: #f4573f;
  border: none;
  border-radius: 0;
  float: right;
  background-image: url("../images/icon_search01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px;
  width: 52px;
  min-width: auto;
  height: 38px;
}
.bookrecommend_block .bookrecommend_search .form_search input[type=submit]:focus {
  background-color: #c2230b;
}
.bookrecommend_block .bookrecommend_search .form_search ::-webkit-input-placeholder {
  /* Chrome */
  color: #666;
}
.bookrecommend_block .bookrecommend_search .form_search :-ms-input-placeholder {
  /* IE 10+ */
  color: #666;
}
.bookrecommend_block .bookrecommend_search .form_search ::-moz-placeholder {
  /* Firefox 19+ */
  color: #666;
  opacity: 1;
}
.bookrecommend_block .bookrecommend_search .form_search :-moz-placeholder {
  /* Firefox 4 - 18 */
  color: #666;
  opacity: 1;
}

.themerecommend_block {
  padding: 30px;
}

.theme_recommend {
  margin: 0px;
  overflow: hidden;
  padding: 30px 30px 55px;
  border-bottom: 1px solid #ccc;
}
.theme_recommend h2 {
  color: #dc0122;
  font-size: 1.875em;
  text-align: center;
  font-weight: 700;
  width: 100%;
  margin: 0 auto 40px;
}
.theme_recommend .themerecommend_box {
  width: 18.5%;
  line-height: 220px;
  text-align: center;
  float: left;
  margin: 0px 1.5% 1% 0;
  height: 220px;
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 1500px) {
  .theme_recommend .themerecommend_box {
    width: 25%;
  }
  .theme_recommend .themerecommend_box:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 1399px) {
  .theme_recommend .themerecommend_box {
    width: 35%;
  }
  .theme_recommend .themerecommend_box:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .theme_recommend .themerecommend_box {
    width: 48%;
    margin-bottom: 30px;
  }
}
@media (max-width: 650px) {
  .theme_recommend .themerecommend_box {
    width: 98%;
  }
  .theme_recommend .themerecommend_box:nth-child(2) {
    display: none;
  }
}
.theme_recommend .themerecommend_box a {
  display: block;
}
.theme_recommend .themerecommend_box a:focus {
  box-shadow: 3px 2px 4px 3px #ccc;
  border-radius: 10px;
}
.theme_recommend .themerecommend_box a .content {
  border: 1px solid #ccc;
  border-radius: 0 10px 10px 10px;
  height: 210px;
  margin-top: 10px;
  transition: 0.2s;
  background-color: #fff;
}
.theme_recommend .themerecommend_box a .content:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px;
  border-color: #f1ad00 transparent transparent #f1ad00;
  position: absolute;
  top: 10px;
  left: 0;
  transition: 0.2s;
}
.theme_recommend .themerecommend_box a .content:hover {
  margin-top: 0px;
  box-shadow: 3px 2px 4px 3px #ccc;
  color: #000;
  background-color: #f1ad00;
  border-radius: 10px;
}
.theme_recommend .themerecommend_box a .content:hover:before {
  border: none;
}
.theme_recommend .themerecommend_box a .box {
  display: inline-block;
  height: auto;
  line-height: 1.5em;
  font-size: 2em;
  vertical-align: middle;
  padding: 10px 20px;
  box-sizing: border-box;
}
.theme_recommend .more {
  text-align: center;
  width: 16%;
  margin: 60px auto 0;
  float: right;
}
@media screen and (max-width: 1399px) {
  .theme_recommend .more {
    width: 26%;
  }
}
@media screen and (max-width: 767px) {
  .theme_recommend .more {
    width: 100%;
    float: none;
    clear: both;
    margin: 0 auto;
  }
}
.theme_recommend .more a {
  background-color: #59493f;
  text-align: center;
  background-image: none;
  padding: 10px 35px !important;
}

.theme_recommend2 {
  margin: 0px;
  overflow: hidden;
  padding: 30px 30px 55px;
  text-align: center;
  background-image: linear-gradient(135deg, #fffcec 10%, #cfdcd1 100%);
  position: relative;
}
.theme_recommend2:before {
  content: "";
  background-image: url("../images/themetour_block_bg.png");
  background-position: 0 bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}
.theme_recommend2 .themerecommend_box {
  width: 19%;
  line-height: 220px;
  text-align: center;
  float: left;
  margin: 0px 0.5% 15px;
  height: 220px;
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 1600px) {
  .theme_recommend2 .themerecommend_box {
    width: 24%;
    margin: 0 0.5% 15px;
  }
}
@media (max-width: 1250px) {
  .theme_recommend2 .themerecommend_box {
    width: 32%;
    margin: 0 0.66% 15px;
  }
}
@media screen and (max-width: 991px) {
  .theme_recommend2 .themerecommend_box {
    width: 48%;
    margin: 0 1% 15px;
  }
}
@media screen and (max-width: 575px) {
  .theme_recommend2 .themerecommend_box {
    width: 100%;
    margin: 0px 0 2% 0;
    height: auto;
  }
}
.theme_recommend2 .themerecommend_box a {
  display: block;
}
.theme_recommend2 .themerecommend_box a:focus {
  box-shadow: 3px 2px 4px 3px #ccc;
  border-radius: 10px;
}
.theme_recommend2 .themerecommend_box a .content {
  border: 1px solid #ccc;
  border-radius: 0 10px 10px 10px;
  height: 210px;
  margin-top: 10px;
  transition: 0.2s;
  background-color: #fff;
}
.theme_recommend2 .themerecommend_box a .content:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px;
  border-color: #f1ad00 transparent transparent #f1ad00;
  position: absolute;
  top: 10px;
  left: 0;
  transition: 0.2s;
}
.theme_recommend2 .themerecommend_box a .content:hover {
  margin-top: 0px;
  box-shadow: 3px 2px 4px 3px #ccc;
  color: #000;
  background-color: #f1ad00;
  border-radius: 10px;
}
.theme_recommend2 .themerecommend_box a .content:hover:before {
  border: none;
}
.theme_recommend2 .themerecommend_box a .box {
  display: inline-block;
  height: auto;
  line-height: 1.5em;
  font-size: 2em;
  vertical-align: middle;
  padding: 10px 20px 10px;
  box-sizing: border-box;
}

.manualrecommend_block {
  margin: 0px 30px 60px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 30px 20px 40px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

.classification_block {
  width: 90%;
  margin: 40px auto 60px;
}

.classification {
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #005d98;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.classification span {
  margin-right: 10px;
  color: #fff;
}
.classification select {
  line-height: 2.4em;
  height: 2.4em;
  padding: 0 24px 0 0.5em;
  border: none !important;
  background: #fff url("../images/basic/icon_select_arrow.svg") no-repeat right center;
  background-size: 25px;
  margin-right: 2px;
  margin-bottom: 0;
  display: inline-block;
  width: auto;
  color: #333;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 2px 1px -1px rgba(0, 0, 0, 0.2);
}
.classification .path {
  display: inline-block;
  margin: 0 0 0 20px;
  padding: 0;
}
@media screen and (max-width: 575px) {
  .classification .path {
    margin: 10px 0 0 0;
    display: block;
  }
}
.classification .path li {
  display: inline-block;
  color: #fff;
  position: relative;
  padding-left: 5px;
  padding-right: 15px;
}
.classification .path li:before {
  content: "/";
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
}
.classification .path li:last-child:before {
  content: "";
}
@media screen and (max-width: 575px) {
  .classification .path li:first-child {
    padding-left: 0;
  }
}
.classification .path li a {
  color: #fff;
  text-decoration: underline;
}
.classification .path li a:hover {
  color: #fff;
  text-decoration: none;
}
.classification .leftblock {
  float: left;
  color: #fff;
  padding-top: 6px;
  font-size: 1.125em;
}
@media screen and (max-width: 575px) {
  .classification .leftblock {
    float: none;
    margin-bottom: 10px;
  }
}
.classification .rightblock {
  float: right;
  font-size: 1.125em;
}
@media screen and (max-width: 575px) {
  .classification .rightblock {
    float: none;
  }
}

.filter_block {
  clear: both;
  margin-bottom: 30px;
  overflow: hidden;
  padding: 5px 15px 10px;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 0 10px 3px #eee inset;
}
.filter_block .form_grid {
  display: flex;
}
@media screen and (max-width: 991px) {
  .filter_block .form_grid {
    flex-wrap: wrap;
  }
}
.filter_block .form_grid .form_grp {
  border-bottom: none;
  padding: 0;
}
.filter_block .form_grid .form_grp.form_inline {
  display: flex;
  width: 50%;
  align-items: center;
}
@media screen and (max-width: 991px) {
  .filter_block .form_grid .form_grp.form_inline {
    width: 100%;
    flex-wrap: wrap;
    margin-right: 0;
  }
}
.filter_block .form_grid .form_grp.rightcol {
  margin-right: 0;
}
.filter_block .form_grid .form_grp .form_title {
  font-size: 1.125em;
  margin: 0;
}
.classification_projectblock {
  clear: both;
  margin-bottom: 30px;
  overflow: hidden;
  padding: 25px 20px 5px;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 0 10px 3px #eee inset;
}
@media screen and (max-width: 575px) {
  .classification_projectblock {
    padding: 25px 20px 10px;
  }
}
.classification_projectblock .classification_list {
  text-align: center;
}
.classification_projectblock .classification_list ul {
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.classification_projectblock .classification_list ul li {
  flex: 0 0 auto;
  flex-basis: 18%;
  margin: 0 1% 3%;
  list-style: none;
  font-size: 1.375em;
  box-shadow: 0 0 3px #ccc;
  background-image: linear-gradient(135deg, #fff 10%, #ccc 100%);
  border-radius: 5px;
  transition: 0.2s;
}
.classification_projectblock .classification_list ul li:hover, .classification_projectblock .classification_list ul li:focus {
  background-image: linear-gradient(135deg, #fff 10%, #fed857 100%);
  color: #000;
  box-shadow: 3px 2px 4px 3px #ccc;
  transform: scale(1.05, 1.05);
}
@media screen and (max-width: 1399px) {
  .classification_projectblock .classification_list ul li {
    margin: 0 1% 3%;
    flex-basis: 23%;
  }
}
@media (max-width: 900px) {
  .classification_projectblock .classification_list ul li {
    margin: 0 1.16% 3%;
    flex-basis: 31%;
  }
}
@media (max-width: 680px) {
  .classification_projectblock .classification_list ul li {
    margin: 0 1% 3%;
    flex-basis: 48%;
  }
}
@media (max-width: 480px) {
  .classification_projectblock .classification_list ul li {
    margin: 0 0 3%;
    flex-basis: 100%;
  }
}
.classification_projectblock .classification_list ul li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
  text-align: center;
  margin: 0 auto;
  color: #333;
  box-sizing: border-box;
  position: relative;
}
.classification_projectblock .classification_list ul li a img {
  width: 80px;
  display: block;
  margin: 0 auto 25px;
}
.classification_projectblock .classification_list_left {
  width: 20%;
  float: left;
  margin: 0 2% 0 0;
}
@media screen and (max-width: 991px) {
  .classification_projectblock .classification_list_left {
    width: 27%;
  }
}
@media screen and (max-width: 767px) {
  .classification_projectblock .classification_list_left {
    width: 100%;
    margin: 0 0 10px;
    float: none;
  }
}
.classification_projectblock .classification_list_left > div {
  display: block;
  width: 100%;
  border-radius: 5px;
  padding: 20px 15px;
  font-size: 1.375em;
  transition: 0.2s;
  margin: 0 auto;
  color: #000;
  line-height: 1.5em;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 0 3px #ccc;
  border: 1px solid #eee;
  background-image: linear-gradient(135deg, #fff 10%, #ccc 100%);
}
@media screen and (max-width: 767px) {
  .classification_projectblock .classification_list_left > div {
    width: 98%;
  }
}
.classification_projectblock .classification_list_left > div img {
  width: 100px;
  display: block;
  margin: 0 auto 15px;
}
.classification_projectblock .classification_list_right {
  width: 78%;
  float: left;
  padding-bottom: 20px;
}
@media screen and (max-width: 991px) {
  .classification_projectblock .classification_list_right {
    width: 71%;
  }
}
@media screen and (max-width: 767px) {
  .classification_projectblock .classification_list_right {
    width: 100%;
  }
}
.classification_projectblock .classification_list_right .classification_list_box {
  width: 24%;
  line-height: 170px;
  text-align: left;
  float: left;
  margin: 0px 0.5% 15px;
  height: 170px;
  position: relative;
  box-sizing: border-box;
}
@media screen and (max-width: 1399px) {
  .classification_projectblock .classification_list_right .classification_list_box {
    width: 32%;
    margin: 0px 0.66% 15px;
  }
}
@media screen and (max-width: 991px) {
  .classification_projectblock .classification_list_right .classification_list_box {
    width: 48%;
    margin: 0px 1% 15px;
  }
  .classification_projectblock .classification_list_right .classification_list_box:nth-child(2n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 575px) {
  .classification_projectblock .classification_list_right .classification_list_box {
    width: 100%;
    margin: 0px 0 1% 0;
    height: auto;
  }
}
.classification_projectblock .classification_list_right .classification_list_box a {
  display: block;
}
.classification_projectblock .classification_list_right .classification_list_box a:focus {
  box-shadow: 3px 2px 4px 3px #ccc;
  border-radius: 10px;
}
.classification_projectblock .classification_list_right .classification_list_box .content {
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 5px;
  height: 170px;
  margin-top: 10px;
  transition: 0.2s;
}
.classification_projectblock .classification_list_right .classification_list_box .content:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px;
  border-color: #ec636e transparent transparent #ec636e;
  position: absolute;
  top: 10px;
  left: 0px;
  transition: 0.2s;
}
.classification_projectblock .classification_list_right .classification_list_box .content:hover {
  margin-top: 0px;
  box-shadow: 3px 2px 4px 3px #ccc;
}
.classification_projectblock .classification_list_right .classification_list_box .content:hover:before {
  top: 0px;
}
.classification_projectblock .classification_list_right .classification_list_box .box {
  display: inline-block;
  height: auto;
  line-height: 1.5em;
  font-size: 1.25em;
  vertical-align: middle;
  padding: 10px 20px 10px 30px;
  text-align: left;
  word-break: normal;
  box-sizing: border-box;
}
.classification_projectblock .classification_list_right .classification_list_box .box span {
  margin-right: 10px;
}
.classification_projectblock .classification_list_right .classification_list_box:nth-child(2n) .content:before {
  border-color: #ebb100 transparent transparent #ebb100;
}
.classification_projectblock .classification_list_right .classification_list_box:nth-child(3n) .content:before {
  border-color: #107859 transparent transparent #107859;
}
.classification_projectblock .classification_list_right .classification_list_box:nth-child(5n) .content:before {
  border-color: #9cf transparent transparent #9cf;
}
.classification_projectblock .classification_list_all {
  width: 100%;
  padding-bottom: 20px;
  overflow: hidden;
}
.classification_projectblock .classification_list_all .classification_list_box {
  width: 24%;
  text-align: left;
  float: left;
  margin: 0px 0.5% 0;
  height: 170px;
  position: relative;
  box-sizing: border-box;
}
@media screen and (max-width: 1399px) {
  .classification_projectblock .classification_list_all .classification_list_box {
    width: 24%;
    margin: 0px 0.5%;
  }
}
@media screen and (max-width: 991px) {
  .classification_projectblock .classification_list_all .classification_list_box {
    width: 32%;
    margin: 0px 0.66%;
  }
}
@media screen and (max-width: 575px) {
  .classification_projectblock .classification_list_all .classification_list_box {
    width: 48%;
    margin: 0px 1%;
  }
  .classification_projectblock .classification_list_all .classification_list_box:nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 380px) {
  .classification_projectblock .classification_list_all .classification_list_box {
    width: 100%;
    margin: 0px 0%;
  }
}
.classification_projectblock .classification_list_all .classification_list_box a {
  display: block;
}
.classification_projectblock .classification_list_all .classification_list_box a:focus {
  box-shadow: 3px 2px 4px 3px #ccc;
  border-radius: 10px;
}
.classification_projectblock .classification_list_all .classification_list_box .content {
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 5px;
  height: 80px;
  margin-top: 10px;
  transition: 0.2s;
  text-align: center;
  font-size: 1.25em;
  padding: 55px 10px 10px;
  line-height: 1.7em;
}
.classification_projectblock .classification_list_all .classification_list_box .content:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px;
  border-color: #ec636e transparent transparent #ec636e;
  position: absolute;
  top: 10px;
  left: 0px;
  transition: 0.2s;
}
.classification_projectblock .classification_list_all .classification_list_box .content:hover {
  margin-top: 0px;
  box-shadow: 3px 2px 4px 3px #ccc;
}
.classification_projectblock .classification_list_all .classification_list_box .content:hover:before {
  top: 0px;
}
.classification_projectblock .classification_list_all .classification_list_box:nth-child(2n) .content:before {
  border-color: #ebb100 transparent transparent #ebb100;
}
.classification_projectblock .classification_list_all .classification_list_box:nth-child(3n) .content:before {
  border-color: #107859 transparent transparent #107859;
}
.classification_projectblock .classification_list_all .classification_list_box:nth-child(5n) .content:before {
  border-color: #9cf transparent transparent #9cf;
}

.login_instructions {
  width: 70%;
  margin: 60px auto;
  padding: 0;
  font-size: 1.375em;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 991px) {
  .login_instructions {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .login_instructions {
    flex-wrap: wrap;
    display: block;
  }
}
.login_instructions .images {
  flex: none;
  flex-basis: 306px;
  max-width: 306px;
  margin-right: 20px;
}
@media screen and (max-width: 767px) {
  .login_instructions .images {
    margin: 0 auto;
  }
}
.login_instructions .images img {
  width: 306px;
}
@media screen and (max-width: 767px) {
  .login_instructions .images img {
    margin: 0 auto;
  }
}
@media (max-width: 400px) {
  .login_instructions .images img {
    width: 100%;
  }
}
.login_instructions p {
  flex: auto;
  line-height: 1.7em;
  font-size: 1.125em;
  text-align: left;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .login_instructions p {
    text-align: center;
  }
}

.diversified_block {
  width: 90%;
  margin: 40px auto 50px;
}
.diversified_block .diversified_content {
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .diversified_block .diversified_content {
    padding: 15px;
  }
}
.diversified_block .diversified_content .advanced_search {
  background-color: #eee;
  background-image: none;
  width: 100%;
  margin: 0 0 20px;
}
@media screen and (max-width: 767px) {
  .diversified_block .diversified_content .advanced_search {
    margin: 0px 0px 20px;
  }
}
.diversified_block .diversified_content .advanced_block {
  width: 100%;
  box-shadow: none;
  border: none;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .diversified_block .diversified_content .advanced_block {
    padding: 20px 0px;
  }
}
.diversified_block .diversified_content .advanced_block .searchsystem {
  margin-bottom: 15px;
  padding-bottom: 10px;
}
.diversified_block .diversified_content .advanced_block .searchsystem .form_search {
  padding: 0 14px 0 0.5em !important;
}
@media screen and (max-width: 1399px) {
  .diversified_block .diversified_content .advanced_block .searchsystem .form_search input[type=text] {
    width: 85%;
  }
}
.diversified_block .diversified_content .advanced_block .searchblockdata h2 span {
  margin-left: 10px;
  font-size: 0.813em;
}
.diversified_block .diversified_content .advanced_block .searchblockdata h2 span a {
  color: #fff;
  background-color: #555;
  padding: 0 8px;
  font-weight: normal;
  border-radius: 5px;
}
.diversified_block .diversified_content .advanced_block .searchblockdata h2 span a:hover {
  background-color: #666;
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date {
  width: 46% !important;
}
@media (max-width: 580px) {
  .diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date {
    width: 99% !important;
  }
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .to {
  float: left;
  margin: 5px 0 0;
  width: 6%;
  text-align: center;
}
@media (max-width: 580px) {
  .diversified_block .diversified_content .advanced_block .searchblockdata .form_content .to {
    display: none;
  }
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date_inline {
  display: flex;
}
@media (max-width: 580px) {
  .diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date_inline {
    flex-wrap: wrap;
  }
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date_inline .select_left {
  margin-right: 5px;
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date_inline .select_left select {
  flex: 0 0 auto;
  flex-basis: 200px;
  width: 200px;
  height: 40px;
  margin-right: 5px;
}
@media (max-width: 580px) {
  .diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date_inline .select_left select {
    width: 100%;
  }
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date_inline .form_search {
  flex: 1 1 auto;
  flex-basis: calc(100% - 205px);
  background-color: #fff;
  box-shadow: none;
  margin: 0;
  border-radius: 5px;
  border: 1px solid #d3d3d3;
  padding: 0 24px 0 0.5em !important;
  height: 2.5em;
  line-height: 2em;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date_inline .form_search input[type=text] {
  border-radius: 0;
  border: none;
  margin: 0;
  color: #333;
  flex: 1 1 auto;
  flex-basis: calc(100% - 50px);
  height: 2.3em;
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date_inline .form_search input[type=text].nobtn {
  width: 95%;
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .select_date_inline .form_search .keyboardInputInitiator {
  flex: 0 0 auto;
  flex-basis: 25px;
  width: 25px;
  height: 16px;
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .grade_list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .grade_list ul li {
  width: 15.5%;
  margin: 0 0.58% 10px;
}
@media (max-width: 1200px) {
  .diversified_block .diversified_content .advanced_block .searchblockdata .form_content .grade_list ul li {
    width: 19%;
    margin: 0 0.5% 10px;
  }
}
@media screen and (max-width: 991px) {
  .diversified_block .diversified_content .advanced_block .searchblockdata .form_content .grade_list ul li {
    width: 24%;
  }
}
@media screen and (max-width: 767px) {
  .diversified_block .diversified_content .advanced_block .searchblockdata .form_content .grade_list ul li {
    width: 32%;
    margin: 0 0.66% 10px;
  }
}
@media screen and (max-width: 575px) {
  .diversified_block .diversified_content .advanced_block .searchblockdata .form_content .grade_list ul li {
    width: 48%;
    margin: 0 1% 10px;
  }
}
@media (max-width: 400px) {
  .diversified_block .diversified_content .advanced_block .searchblockdata .form_content .grade_list ul li {
    width: 100%;
    margin: 0 0 10px;
  }
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .grade_list ul li a {
  display: block;
  padding: 8px 15px;
  background-color: #fff;
  color: #333;
  border-radius: 5px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  transition: 0.5s;
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .grade_list ul li a:hover {
  box-shadow: none;
  background-color: #666;
  color: #fff;
}
.diversified_block .diversified_content .advanced_block .searchblockdata .form_content .grade_list ul li a.here {
  background-color: #666;
  color: #fff;
}
.diversified_block .diversified_content .data_all {
  padding: 6px 0 3px;
  border: none;
}
.diversified_block .diversified_content .data_all a {
  position: relative;
}
.diversified_block .diversified_content .data_all a.prompt3 {
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  display: block;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}
.diversified_block .diversified_content .data_all a.arrow {
  position: relative;
}
.diversified_block .diversified_content .data_all .prompt_block3 {
  background-color: #666;
  color: #fff;
  position: absolute;
  bottom: 45px;
  left: 0;
  width: 200px;
  border-radius: 5px;
  display: none;
  box-sizing: border-box;
  padding: 10px 15px;
}
.diversified_block .diversified_content .data_all .prompt_block3:before {
  content: "";
  border: 12px solid #666;
  border-color: #666 transparent transparent transparent;
  position: absolute;
  bottom: -24px;
  left: 57%;
}

.delete {
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  margin: 10px 0;
  display: inline-block;
}
.delete a {
  display: block;
  background-image: url(../images/icon_cancel.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  padding: 3px 10px 3px 30px;
}

.mobile_lending_block {
  width: 90%;
  margin: 40px auto 50px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 30px 30px 0px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .mobile_lending_block {
    padding: 30px 15px 0px;
  }
}
.mobile_lending_block .mobile_lending_tab {
  text-align: center;
}
.mobile_lending_block .tabItem {
  float: left;
  margin: 0 1% 40px;
  width: 48%;
}
.mobile_lending_block .tabItem a {
  display: block;
  padding: 20px 30px;
  background: #dcdcdc;
  background: linear-gradient(to bottom, #dcdcdc, #e5e5e5);
  color: #333;
  font-size: 1.25em;
  text-align: center;
  border-radius: 5px;
  position: relative;
  transition: 0.2s;
}
@media (max-width: 480px) {
  .mobile_lending_block .tabItem a {
    font-size: 1.063em;
    padding: 20px 10px;
  }
}
.mobile_lending_block .tabItem a:hover {
  background-image: none;
  background-color: #f1ad00;
  color: #000;
}
.mobile_lending_block .tabItem a.here {
  background: #f1ad00;
  color: #000;
}
.mobile_lending_block .tabItem a.here:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.mobile_lending_block .content {
  margin: 10px;
  float: none;
  clear: both;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
}
.mobile_lending_block .explain {
  position: relative;
  color: #333;
  padding-left: 20px;
  margin-bottom: 20px;
  font-size: 1.125em;
}
.mobile_lending_block .explain:before {
  content: "";
  border: 10px solid #dc0122;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  left: 0;
  top: 2px;
}
.mobile_lending_block .explain a {
  color: #b94b00;
  position: relative;
}
.mobile_lending_block .explain a.explain_btn {
  padding-right: 30px;
  display: inline-block;
}
.mobile_lending_block .explain a.explain_btn:after {
  content: "i";
  border: 1px solid #b94b00;
  border-radius: 50%;
  font-size: 1em;
  position: absolute;
  right: 0;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 1.125em;
}
.mobile_lending_block .explain a:hover {
  color: #dd1f03;
  text-decoration: underline;
}
.mobile_lending_block .bar_code_block {
  padding: 20px;
  display: block;
  background-color: #eee;
  border: 1px solid #ddd;
  text-align: center;
  margin-bottom: 40px;
}
.mobile_lending_block .bar_code_block img {
  width: 318px;
}
@media (max-width: 480px) {
  .mobile_lending_block .bar_code_block img {
    width: 100%;
  }
}
.mobile_lending_block .bar_code_block2 {
  padding: 0;
  display: block;
  text-align: center;
  margin-bottom: 30px;
}
.mobile_lending_block .bar_code_block2 img {
  width: 100%;
}
.mobile_lending_block .scanning_button {
  display: inline-block;
  text-align: center;
  padding: 15px 30px;
  font-size: 1.125em;
  color: #fff;
  border-radius: 4px;
  width: 250px;
  background-color: #005d98;
}
@media (max-width: 400px) {
  .mobile_lending_block .scanning_button {
    width: 70%;
  }
}
.mobile_lending_block .scanning_button:hover {
  background-color: #006db2;
}
.mobile_lending_block .collection_data {
  margin: 0px;
  padding: 30px 40px 40px;
  border-top: 1px solid #d3d3d3;
}
@media screen and (max-width: 767px) {
  .mobile_lending_block .collection_data {
    padding: 30px 0px 40px;
  }
}
.mobile_lending_block .collection_data .bookpic {
  float: left;
  width: 150px;
  margin-right: 60px;
  position: relative;
}
@media screen and (max-width: 575px) {
  .mobile_lending_block .collection_data .bookpic {
    float: none;
    margin: 0 auto 30px;
  }
}
.mobile_lending_block .collection_data .bookpic img {
  outline: 1px solid #d3d3d3;
  width: 100%;
  box-shadow: 2px 2px 5px #999;
}
.mobile_lending_block .collection_data .bookpic .success {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50px;
  padding: 15px;
  position: absolute;
  top: 40%;
  left: -25px;
  width: 180px;
  color: #fff;
  font-size: 1.125em;
  z-index: 3;
}
.mobile_lending_block .collection_data .bookpic .success img {
  width: 40px;
  box-shadow: none;
  margin-right: 10px;
  vertical-align: middle;
  outline: none;
}
.mobile_lending_block .collection_data .bookpic .image_titlepage,
.mobile_lending_block .collection_data .bookpic .image_titlepage2 {
  height: 200px;
}
.mobile_lending_block .collection_data ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 1.125em;
  overflow: hidden;
}
.mobile_lending_block .collection_data ul li {
  padding: 0 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px dashed #ddd;
}
@media screen and (max-width: 575px) {
  .mobile_lending_block .collection_data ul li {
    padding: 0 0 15px;
    margin-bottom: 15px;
  }
}

.read_passbook_block {
  overflow: hidden;
  padding: 20px 30px;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .read_passbook_block {
    padding: 20px 20px;
  }
}
.read_passbook_block .read_passbook_tab {
  margin: 30px 10px 30px;
  box-sizing: border-box;
}
@media screen and (max-width: 991px) {
  .read_passbook_block .read_passbook_tab {
    width: 90%;
    margin: 30px auto;
  }
}
@media (max-width: 480px) {
  .read_passbook_block .read_passbook_tab {
    width: 75%;
  }
}
.read_passbook_block .read_passbook_tab .sort {
  padding: 0 5px;
}
.read_passbook_block .read_passbook_tab .sort a {
  display: block;
  padding: 20px 30px;
  background: #dcdcdc;
  background: linear-gradient(to bottom, #dcdcdc, #e5e5e5);
  color: #333;
  font-size: 1.25em;
  text-align: center;
  border-radius: 5px;
  position: relative;
  transition: 0.2s;
}
.read_passbook_block .read_passbook_tab .sort a:hover {
  background-image: none;
  background-color: #f1ad00;
  color: #000;
}
.read_passbook_block .read_passbook_tab .sort a.here {
  background: #f1ad00;
  color: #000;
}
.read_passbook_block .read_passbook_tab .sort a.here:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.read_passbook_block .read_passbook_tab .slick-next {
  right: -45px;
  top: 0;
}
.read_passbook_block .read_passbook_tab .slick-prev {
  left: -45px;
  top: 0;
}
@media (max-width: 400px) {
  .read_passbook_block .read_passbook_tab .slick-next {
    right: -36px;
  }
  .read_passbook_block .read_passbook_tab .slick-prev {
    left: -36px;
  }
}
.read_passbook_block .read_passbook_sort {
  display: flex;
  justify-content: center;
  margin: 20px 0 30px;
}
.read_passbook_block .read_passbook_sort div {
  margin: 0 15px;
}
.read_passbook_block .read_passbook_sort div a {
  display: block;
  font-size: 1.313em;
  font-weight: 500;
}
.read_passbook_block .read_passbook_sort div a.here {
  color: #dc0122;
  text-decoration: underline;
  text-underline-offset: 15px;
}
.read_passbook_block .read_passbook_content {
  margin: 10px 12px 15px;
  border-radius: 5px;
  float: none;
  clear: both;
  padding: 20px;
  text-align: left;
  background-color: #e5e5e5;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .read_passbook_block .read_passbook_content {
    padding: 20px 10px;
  }
}
.read_passbook_block .read_passbook_content.eventDescription {
  background-color: #fff;
  border: 1px solid #ccc;
}
.read_passbook_block .read_passbook_content .btn_grp {
  margin: 0;
  padding: 1em 0 0.5em 0;
}
.read_passbook_block .read_passbook_content p {
  line-height: 1.8em;
}
.read_passbook_block .read_passbook_content ol li {
  margin-bottom: 8px;
  line-height: 1.8em;
}
.read_passbook_block .read_passbook_content.formclose .form_grid .form_grp {
  display: none;
}
.read_passbook_block .read_passbook_content.formclose .form_grid .form_grp:nth-child(1), .read_passbook_block .read_passbook_content.formclose .form_grid .form_grp:nth-child(2) {
  display: block;
}
.read_passbook_block .mypoints {
  margin: 20px 10px;
}
.read_passbook_block .form_grid {
  display: flex;
  flex-wrap: wrap;
}
.read_passbook_block .form_grp {
  display: flex;
  flex: none;
  flex-basis: 48%;
  margin-right: 1.5%;
}
@media screen and (max-width: 991px) {
  .read_passbook_block .form_grp {
    flex-basis: 100%;
    margin-right: 0;
  }
}
@media screen and (max-width: 575px) {
  .read_passbook_block .form_grp {
    display: block;
  }
}
.read_passbook_block .form_grp .form_title {
  flex: none;
  flex-basis: 140px;
  width: 140px !important;
}
@media screen and (max-width: 575px) {
  .read_passbook_block .form_grp .form_title {
    flex-basis: 100%;
    width: 100% !important;
  }
}
.read_passbook_block .form_grp .form_content {
  flex: auto;
  display: flex;
  width: calc(100% - 150px) !important;
}
@media screen and (max-width: 575px) {
  .read_passbook_block .form_grp .form_content {
    width: 100% !important;
  }
}
.read_passbook_block .form_grp .form_content select {
  width: 100%;
}
.read_passbook_block .form_grp .form_content .select_date {
  width: 47%;
  display: flex;
  position: relative;
}
.read_passbook_block .form_grp .form_content .select_date input[type=text] {
  width: 60%;
}
.read_passbook_block .form_grp .form_content .select_date .image {
  position: absolute;
  right: 5px;
}
.read_passbook_block .form_grp .form_content .points {
  width: 47%;
}
.read_passbook_block .form_grp .form_content .points input[type=text] {
  width: 100%;
}
.read_passbook_block .form_grp .form_content .to {
  padding: 5px 10px;
  width: 6%;
  text-align: center;
}

.mypoints {
  margin: 20px 30px;
  padding: 0;
  border-radius: 5px;
  background-color: #fff;
  font-size: 1em;
  border: 1px solid #ddd;
  position: relative;
  overflow: hidden;
}
.mypoints .title {
  font-size: 1.25em;
  font-weight: 700;
  margin-bottom: 15px;
  background-color: #ddd;
  position: relative;
  box-sizing: border-box;
}
.mypoints .title span {
  display: inline-block;
  color: #fff;
  background-color: #b94b00;
  padding: 10px 30px;
  position: relative;
  min-width: 150px;
}
@media screen and (max-width: 575px) {
  .mypoints .title span {
    padding: 10px 15px;
  }
}
.mypoints .title span:before {
  content: "";
  border: 21.5px solid #b94b00;
  border-color: transparent transparent transparent #b94b00;
  position: absolute;
  right: -42px;
  top: 0;
}
.mypoints .title.bluebg span {
  background-color: #005d98;
}
.mypoints .title.bluebg span:before {
  content: "";
  border: 21.5px solid #005d98;
  border-color: transparent transparent transparent #005d98;
  position: absolute;
}
.mypoints .content {
  display: flex;
  flex-wrap: wrap;
  padding: 0 25px 5px;
}
@media screen and (max-width: 575px) {
  .mypoints .content {
    padding: 0 15px 5px;
  }
}
.mypoints .content .accumulation,
.mypoints .content .maturity {
  padding: 0;
  margin: 0px 40px 8px 0;
  min-width: 50px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 575px) {
  .mypoints .content .accumulation,
  .mypoints .content .maturity {
    flex-wrap: wrap;
  }
}
.mypoints .content .subtitle {
  font-size: 0.938em;
  color: #fff;
  background-color: #ddd;
  padding: 5px 10px;
  border-radius: 4px;
  margin: 0 15px 0 0;
  position: relative;
  white-space: nowrap;
  display: inline-block;
}
@media screen and (max-width: 575px) {
  .mypoints .content .subtitle {
    margin-bottom: 5px;
  }
}
.mypoints .content .subtitle:before {
  content: "";
  border: 8px solid #ddd;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  right: -15px;
  top: 10px;
}
.mypoints .content .subtitle.bluebg {
  background-color: #666;
}
.mypoints .content .subtitle.bluebg:before {
  border-color: #666;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.mypoints .content .subtitle.greenbg {
  background-color: #107859;
}
.mypoints .content .subtitle.greenbg:before {
  border-color: #107859;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.mypoints .content .data {
  display: flex;
}
@media (max-width: 420px) {
  .mypoints .content .data {
    flex-wrap: wrap;
  }
}
.mypoints .content .data span {
  display: inline-block;
}
.mypoints .content .data .points {
  display: flex;
  margin-right: 10px;
}
.mypoints .content .data .points em {
  color: #dc0122;
  font-size: 1.5em;
  margin-right: 5px;
  font-weight: 600;
}
.mypoints .content .data .date {
  font-weight: bolder;
  font-size: 1.125em;
  color: #107859;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .mypoints .content .data .date {
    display: block;
  }
}

.mypoints2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: rgb(247, 247, 247);
  background: linear-gradient(180deg, rgb(247, 247, 247) 0%, rgb(255, 255, 255) 100%);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 5px;
  border-radius: 5px;
  padding: 20px 20px 10px;
  margin: 10px 12px 15px;
  box-sizing: border-box;
  font-weight: bold;
}
.mypoints2 .content {
  flex: 0 0 auto;
  padding: 0 20px 0 0;
  position: relative;
  margin-bottom: 10px;
  margin-right: 20px;
}
.mypoints2 .content:before {
  content: "";
  width: 1px;
  height: 35px;
  background-color: #ccc;
  position: absolute;
  right: 0;
  top: -5px;
}
.mypoints2 .content:last-child:before {
  display: none;
}
.mypoints2 .content.hasbtn {
  flex: 1 1 auto;
  margin-right: 0;
  padding: 0;
}
.mypoints2 .content.hasbtn .reward_btn2 {
  display: flex;
  justify-content: flex-end;
}
.mypoints2 .content span {
  font-size: 1.375em;
  padding: 0 8px;
  color: #dc0122;
}
.mypoints2 .content span a {
  color: #dc0122;
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media screen and (max-width: 991px) {
  .mypoints2 .content.hasbtn {
    flex: 1 1 auto;
    margin-right: 0;
    padding: 0;
  }
  .mypoints2 .content.hasbtn .reward_btn2 {
    display: block;
  }
}
@media screen and (max-width: 575px) {
  .mypoints2 .content {
    margin: 0 0 10px;
    padding: 0 0 12px 0;
    box-sizing: border-box;
    flex-basis: 100%;
    border-bottom: 1px dotted #ddd;
  }
  .mypoints2 .content:last-child {
    border-bottom: none;
  }
  .mypoints2 .content:before {
    display: none;
  }
}

.reward_btn {
  margin: 10px 10px 20px;
  text-align: center;
}
.reward_btn a {
  display: inline-block;
  padding: 10px 50px;
  font-size: 1.125em;
  border-radius: 50px;
  background-color: #fff;
  text-align: left;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  color: #333;
  transition: 0.5s;
}
@media (max-width: 400px) {
  .reward_btn a {
    padding: 10px 30px;
  }
}
.reward_btn a:hover, .reward_btn a:focus {
  box-shadow: none;
  color: #fff;
  background-color: #b94b00;
}
.reward_btn a img {
  width: 20px;
  vertical-align: middle;
  margin-right: 15px;
}
@media (max-width: 400px) {
  .reward_btn a img {
    margin-right: 10px;
  }
}

.reward_btn2 {
  margin: 0;
  padding: 0;
}
.reward_btn2 a {
  display: inline-block;
  padding: 8px 20px 8px 45px;
  font-size: 1.125em;
  border-radius: 5px;
  background-color: #fff;
  text-align: left;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  color: #333;
  transition: 0.5s;
  background-image: url("../images/icon_gift.svg");
  background-repeat: no-repeat;
  background-position: 15px 8px;
  background-size: 20px;
}
.reward_btn2 a:hover, .reward_btn2 a:focus {
  box-shadow: none;
  color: #fff;
  background-color: #b94b00;
}

.data_all {
  margin: 0;
}
.data_all .choosebtn {
  position: relative;
}
.data_all .choosebtn a {
  position: relative;
}
.data_all .choosebtn a.prompt3 {
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  display: block;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}
.data_all .choosebtn a.arrow {
  position: relative;
}
.data_all .choosebtn a.arrow:before {
  content: "";
  border: 12px solid #666;
  border-color: #666 transparent transparent transparent;
  position: absolute;
  bottom: 15px;
  left: 0;
}
.data_all .choosebtn .prompt_block3 {
  background-color: #666;
  color: #fff;
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 200px;
  border-radius: 5px;
  display: none;
  box-sizing: border-box;
  padding: 10px 15px;
}
.data_all .choosebtn .prompt {
  display: inline;
}
.data_all .choosebtn .prompt a {
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}

.read_passbook_list {
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 900px) {
  .read_passbook_list {
    display: block;
  }
}
.read_passbook_list .reward_list {
  flex: auto;
  flex-basis: 49%;
  max-width: 49%;
  position: relative;
  margin-bottom: 20px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  border-radius: 5px;
  padding: 15px;
  background-color: #fff;
  box-sizing: border-box;
}
.read_passbook_list .reward_list:hover {
  background-color: #ffc;
}
.read_passbook_list .reward_list.noused {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 900px) {
  .read_passbook_list .reward_list {
    flex-basis: 100%;
    max-width: 100%;
  }
}
.read_passbook_list .reward_list > a {
  display: flex;
  color: #333;
  transition: 0.5s;
}
.read_passbook_list .reward_list > a:focus {
  color: #333;
  box-shadow: none !important;
}
.read_passbook_list .reward_list > a:focus-visible {
  box-shadow: 0 0px 0px 2px #f1ad00 inset !important;
}
.read_passbook_list .reward_list > a .image {
  flex: 0 0 auto;
  flex-basis: 150px;
  max-width: 150px;
  margin-right: 20px;
}
.read_passbook_list .reward_list > a .image img {
  max-width: 150px;
  max-height: 170px;
}
.read_passbook_list .reward_list > a .content {
  flex: 1 1 auto;
  overflow: hidden;
}
.read_passbook_list .reward_list > a .content .title {
  font-size: 1.25em;
  margin-bottom: 10px;
  color: #333;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 40px;
}
@media (max-width: 480px) {
  .read_passbook_list .reward_list > a .content .title {
    margin-right: 0;
  }
}
.read_passbook_list .reward_list > a .content ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.read_passbook_list .reward_list > a .content ul li {
  margin: 0 0 5px;
}
.read_passbook_list .reward_list > a .content ul li em {
  font-style: normal;
  color: #b94b00;
  margin-right: 5px;
  font-weight: 600;
}
@media (max-width: 480px) {
  .read_passbook_list .reward_list > a {
    display: block;
  }
  .read_passbook_list .reward_list > a .image {
    margin: 0 auto 20px;
  }
}
.read_passbook_list .reward_list .collection {
  position: absolute;
  top: 10px;
  right: 10px;
}
.read_passbook_list .reward_list .collection a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  line-height: 40px;
  text-align: center;
}
.read_passbook_list .reward_list .collection a:hover {
  background-color: #e5e5e5;
}
.read_passbook_list .reward_list .collection a img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.points_set_block {
  margin: 20px 30px;
  background: rgb(232, 232, 232);
  background: linear-gradient(180deg, rgb(232, 232, 232) 15%, rgb(255, 255, 255) 100%);
  padding-top: 16px;
  border-radius: 5px;
}
.points_set_block .points_project {
  margin: 0 20px;
}
.points_set_block .points_project ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.points_set_block .points_project ul li {
  font-size: 1.25em;
}
.points_set_block .points_project ul li a {
  padding: 10px 20px;
  display: block;
  position: relative;
  text-align: center;
}
.points_set_block .points_project ul li a.here {
  color: #dc0122;
}
.points_set_block .points_project ul li a.here:before {
  content: "";
  height: 2px;
  background-color: #dc0122;
  position: absolute;
  right: 20px;
  left: 20px;
  bottom: -3px;
}
@media (max-width: 400px) {
  .points_set_block .points_project ul li {
    font-size: 1.25em;
  }
  .points_set_block .points_project ul li a {
    padding: 10px 15px;
  }
  .points_set_block .points_project ul li a.here:before {
    right: 15px;
    left: 15px;
  }
}

.bookselection_block {
  margin: 0 15px 50px;
  padding: 20px 0;
}
.bookselection_block .bookselection_group {
  display: flex;
  justify-content: flex-start;
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group {
    flex-wrap: wrap;
  }
}
.bookselection_block .bookselection_group .leftblock {
  flex: auto;
  flex-basis: 70%;
  width: 70%;
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group .leftblock {
    flex-basis: 100%;
    width: 100%;
  }
}
.bookselection_block .bookselection_group .leftblock.expand ul li {
  flex-basis: 13% !important;
  width: 13% !important;
  margin: 0 1.8% 25px !important;
}
@media screen and (max-width: 1399px) {
  .bookselection_block .bookselection_group .leftblock.expand ul li {
    flex-basis: 16% !important;
    width: 16% !important;
    margin: 0 2% 25px !important;
  }
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group .leftblock.expand ul li {
    flex-basis: 18% !important;
    width: 18% !important;
    margin: 0 3.5% 25px !important;
  }
}
@media screen and (max-width: 767px) {
  .bookselection_block .bookselection_group .leftblock.expand ul li {
    flex-basis: 23% !important;
    width: 23% !important;
    margin: 0 5.16% 25px !important;
  }
}
@media screen and (max-width: 575px) {
  .bookselection_block .bookselection_group .leftblock.expand ul li {
    flex-basis: 40% !important;
    width: 40% !important;
    margin: 0 5% 25px !important;
  }
}
@media (max-width: 400px) {
  .bookselection_block .bookselection_group .leftblock.expand ul li {
    flex-basis: 220px !important;
    width: 220px !important;
    margin: 0 auto 25px !important;
  }
}
.bookselection_block .bookselection_group .leftblock .bookselection_list {
  padding-right: 30px;
}
@media screen and (max-width: 1399px) {
  .bookselection_block .bookselection_group .leftblock .bookselection_list {
    padding-right: 0;
  }
}
.bookselection_block .bookselection_group .leftblock .bookselection_list ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li {
  flex: none;
  flex-basis: 18%;
  width: 18%;
  margin: 0 3.5% 25px;
  position: relative;
}
@media screen and (max-width: 1399px) {
  .bookselection_block .bookselection_group .leftblock .bookselection_list ul li {
    flex-basis: 23%;
    width: 23%;
    margin: 0 5.16% 25px;
  }
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group .leftblock .bookselection_list ul li {
    flex-basis: 18%;
    width: 18%;
    margin: 0 3.5% 25px;
  }
}
@media screen and (max-width: 767px) {
  .bookselection_block .bookselection_group .leftblock .bookselection_list ul li {
    flex-basis: 23%;
    width: 23%;
    margin: 0 5.16% 25px;
  }
}
@media screen and (max-width: 575px) {
  .bookselection_block .bookselection_group .leftblock .bookselection_list ul li {
    flex-basis: 40%;
    width: 40%;
    margin: 0 5% 25px;
  }
}
@media (max-width: 400px) {
  .bookselection_block .bookselection_group .leftblock .bookselection_list ul li {
    flex-basis: 220px;
    width: 220px;
    margin: 0 auto 25px;
  }
}
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li a {
  color: #000;
  display: block;
  padding: 3px;
  box-sizing: border-box;
}
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li a:hover {
  color: #dd1f03;
}
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li a .image {
  height: 210px;
  background-color: #fff;
  position: relative;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li a .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  margin: auto;
  z-index: 8;
  display: block;
}
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li a span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.125em;
  display: block;
}
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li .image_titlepage,
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li .image_titlepage2 {
  margin: 0 auto 15px;
  height: 210px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li .image_titlepage:before,
.bookselection_block .bookselection_group .leftblock .bookselection_list ul li .image_titlepage2:before {
  height: 120px;
}
.bookselection_block .bookselection_group .rightblock {
  flex: none;
  flex-basis: 30%;
  width: 30%;
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group .rightblock {
    flex-basis: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
  }
}
.bookselection_block .bookselection_group .rightblock .analysis_group {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  border-radius: 5px;
  margin-right: 20px;
  padding: 10px 0 30px;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
}
.bookselection_block .bookselection_group .rightblock .analysis_group.fixed {
  position: fixed;
  top: 55px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
  z-index: 9;
  scrollbar-face-color: #eee;
  scrollbar-highlight-color: #fff;
  scrollbar-shadow-color: #fff;
  scrollbar-3dlight-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-arrow-color: #666;
  scrollbar-track-color: #fff;
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group .rightblock .analysis_group.fixed {
    top: 0;
    overflow-y: inherit;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    width: 100% !important;
    height: 100% !important;
  }
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group .rightblock .analysis_group {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99;
    margin-right: 0;
  }
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group .rightblock .analysis_group .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
.bookselection_block .bookselection_group .rightblock .analysis_group .analysis_block {
  margin: 10px auto;
  padding: 0 20px;
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group .rightblock .analysis_group .analysis_block {
    max-width: 50vw;
    min-width: 450px;
    max-height: 60vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 25px;
    background-color: #fff;
    border-radius: 5px;
    overflow: auto;
    text-align: left;
  }
}
@media screen and (max-width: 575px) {
  .bookselection_block .bookselection_group .rightblock .analysis_group .analysis_block {
    max-width: 100vw;
    min-width: 100vw;
    max-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    padding: 25px;
    background-color: #fff;
    border-radius: 0px;
    overflow: auto;
    text-align: left;
    box-sizing: border-box;
    margin: 0;
  }
}
.bookselection_block .bookselection_group .rightblock .analysis_group .close {
  float: right;
  margin-bottom: 10px;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .Selected_book {
  float: none;
  clear: both;
  border-radius: 5px;
  padding: 30px 10px;
  background-color: #eee;
  text-align: center;
  margin-bottom: 30px;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .Selected_book a {
  text-align: center;
  display: block;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .Selected_book a:hover span {
  color: #dd1f03;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .Selected_book a:hover .image .view {
  opacity: 1;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .Selected_book a .image {
  width: 180px;
  height: 250px;
  position: relative;
  margin: 0 auto 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .Selected_book a .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .Selected_book a .image .view {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.5s;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .Selected_book a .image .view span {
  color: #fff;
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .Selected_book a .image .view span img {
  width: 30px;
  height: 30px;
  position: relative;
  margin-bottom: 10px;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .Selected_book a span {
  font-size: 1.125em;
  color: #333;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .content_analysis {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  min-height: 350px;
  margin-bottom: 30px;
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group .rightblock .analysis_group .content_analysis {
    flex: auto;
    margin: 0 0 30px;
  }
}
.bookselection_block .bookselection_group .rightblock .analysis_group .content_analysis .title {
  font-size: 1.125em;
  background-color: #005d98;
  color: #fff;
  padding: 15px 12px;
  text-align: center;
  border-radius: 5px 5px 0 0;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 991px) {
  .bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis {
    flex-basis: 100%;
    width: 100%;
  }
}
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis .good,
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis .nogood {
  flex: none;
  flex-basis: 48%;
  width: 48%;
  margin: 0 1%;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis .good a,
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis .nogood a {
  background-color: #666;
  color: #fff;
  border-radius: 5px;
  display: block;
  padding: 8px 20px;
  text-align: center;
  transition: 0.5s;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis .good a:hover,
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis .nogood a:hover {
  background-color: #333;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis .good a img,
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis .nogood a img {
  margin-left: 10px;
  vertical-align: middle;
}
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis .good a.active,
.bookselection_block .bookselection_group .rightblock .analysis_group .recommend_analysis .nogood a.active {
  background-color: #b94b00;
}
.analysis_statistics_block {
  margin: 40px 35px;
}
@media screen and (max-width: 767px) {
  .analysis_statistics_block {
    margin: 40px 20px;
  }
}
.analysis_statistics_block .analysis_statistics_group {
  margin-bottom: 40px;
  text-align: center;
  position: relative;
}
.analysis_statistics_block .analysis_statistics_group .title {
  margin: 20px 0;
  padding: 0;
  color: #dc0122;
  font-size: 1.75em;
  font-weight: 700;
  text-align: center;
  line-height: 1.35em;
  position: relative;
  display: inline-block;
}
.analysis_statistics_block .analysis_statistics_group .analysis_prompt {
  position: absolute;
  right: 0;
  top: 23px;
}
@media screen and (max-width: 575px) {
  .analysis_statistics_block .analysis_statistics_group .analysis_prompt {
    margin: 0 0 10px;
    position: relative;
    top: 0;
  }
}
.analysis_statistics_block .analysis_statistics_group .analysis_prompt span {
  position: relative;
  top: 0px;
  right: 0px;
}
.analysis_statistics_block .analysis_statistics_group .analysis_prompt span .prompt_btn {
  width: 25px;
  height: 25px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  line-height: 25px;
  font-size: 1em;
  display: inline-block;
  text-align: center;
  position: relative;
}
.analysis_statistics_block .analysis_statistics_group .analysis_prompt .promptblock {
  background-color: #666;
  color: #fff;
  position: absolute;
  top: 40px;
  right: 0;
  width: 200px;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 5px;
  z-index: 9;
  text-align: left;
}
.analysis_statistics_block .analysis_statistics_group .analysis_prompt .promptblock:before {
  content: "";
  border: 12px solid #666;
  border-color: transparent transparent #666 transparent;
  position: absolute;
  top: -22px;
  right: 0;
}
@media screen and (max-width: 575px) {
  .analysis_statistics_block .analysis_statistics_group .analysis_prompt .promptblock {
    position: relative;
    top: 17px;
    right: auto;
    width: 200px;
    margin: 0 auto 40px;
  }
  .analysis_statistics_block .analysis_statistics_group .analysis_prompt .promptblock:before {
    top: -22px;
    right: 50%;
    margin-right: -11px;
  }
}
.analysis_statistics_block .analysis_statistics_group .explain {
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.125em;
}
.analysis_statistics_block .analysis_statistics_group .bookmark {
  display: flex;
  flex-wrap: nowrap;
}
.analysis_statistics_block .analysis_statistics_group .bookmark .tabs {
  flex: auto;
  flex-basis: auto;
}
.analysis_statistics_block .analysis_statistics_group .bookmark .tabs.active a {
  background-color: #f1ad00;
  color: #fff;
}
.analysis_statistics_block .analysis_statistics_group .bookmark .tabs a {
  display: block;
  background-color: #ddd;
  padding: 13px 25px;
  box-sizing: border-box;
  font-size: 1.188em;
  border-radius: 5px 5px 0 0;
  line-height: 1.5em;
  margin: 0 2px;
}
.analysis_statistics_block .analysis_statistics_group .content {
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
  text-align: left;
}
.analysis_statistics_block .analysis_statistics_group .content.rowblock {
  display: flex;
}
@media screen and (max-width: 991px) {
  .analysis_statistics_block .analysis_statistics_group .content.rowblock {
    display: block;
  }
}
.analysis_statistics_block .analysis_statistics_group .content .leftblock {
  flex: auto;
  flex-basis: calc(100% - 350px);
}
.analysis_statistics_block .analysis_statistics_group .content .rightblock {
  flex: none;
  flex-basis: 350px;
  width: 350px;
}
@media screen and (max-width: 991px) {
  .analysis_statistics_block .analysis_statistics_group .content .rightblock {
    width: auto;
  }
}
.analysis_statistics_block .analysis_statistics_group .content .rightblock .sortgroup {
  background-color: #eee;
  border-radius: 5px;
}
.analysis_statistics_block .analysis_statistics_group .content .rightblock .sortgroup .sec_title {
  color: #333;
  font-size: 1.125em;
  padding: 15px 10px;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: 2px solid #fff;
}
.analysis_statistics_block .analysis_statistics_group .content .rightblock .sortgroup .sortcontent {
  padding: 15px 20px;
  text-align: center;
  box-sizing: border-box;
}
.analysis_statistics_block .analysis_statistics_group .content .rightblock .sortgroup .sortcontent ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.analysis_statistics_block .analysis_statistics_group .content .rightblock .sortgroup .sortcontent ul li {
  margin: 0 0 20px 0;
  position: relative;
}
.analysis_statistics_block .analysis_statistics_group .content .rightblock .sortgroup .sortcontent ul li span {
  margin-right: 5px;
  width: 60%;
  display: inline-block;
  text-align: left;
}
@media (max-width: 400px) {
  .analysis_statistics_block .analysis_statistics_group .content .rightblock .sortgroup .sortcontent ul li span {
    width: 90%;
    margin: 0 0 10px;
  }
}
.analysis_statistics_block .analysis_statistics_group .content .rightblock .sortgroup .sortcontent ul li span em {
  font-size: 1.875em;
  font-weight: bolder;
  margin-right: 10px;
}
@media (max-width: 400px) {
  .analysis_statistics_block .analysis_statistics_group .content .rightblock .sortgroup .sortcontent ul li a {
    width: 90%;
    margin: 0 0 10px;
  }
}
.analysis_statistics_block .analysis_statistics_group .content .compare_data {
  margin: 60px 0;
}
@media (max-width: 600px) {
  .analysis_statistics_block .analysis_statistics_group .content .compare_data {
    margin: 30px 0;
  }
}
.analysis_statistics_block .analysis_statistics_group .content .compare_data ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.analysis_statistics_block .analysis_statistics_group .content .compare_data ul li {
  display: inline-block;
  padding: 20px;
  margin: 0 10px;
  background-color: #666;
  color: #fff;
  font-size: 1.25em;
}
@media (max-width: 600px) {
  .analysis_statistics_block .analysis_statistics_group .content .compare_data ul li {
    display: block;
    margin: 0 0 10px;
  }
}
.analysis_statistics_block .analysis_statistics_group .content .compare_data ul li em {
  font-size: 2em;
  padding: 0 10px;
  font-weight: bolder;
}
.analysis_statistics_block .analysis_statistics_group .analysisblock {
  display: flex;
  padding: 20px 30px;
  justify-content: center;
}
@media (max-width: 850px) {
  .analysis_statistics_block .analysis_statistics_group .analysisblock {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  .analysis_statistics_block .analysis_statistics_group .analysisblock {
    padding: 20px 10px;
  }
}
.analysis_statistics_block .analysis_statistics_group .analysis_chart {
  height: 500px;
  width: auto;
  overflow: hidden;
  display: block;
  padding: 0 30px;
}
@media screen and (max-width: 991px) {
  .analysis_statistics_block .analysis_statistics_group .analysis_chart {
    height: 500px;
  }
}
@media screen and (max-width: 767px) {
  .analysis_statistics_block .analysis_statistics_group .analysis_chart {
    height: 200px;
  }
}
.analysis_statistics_block .analysis_statistics_group .analysis_chart img {
  width: 100%;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list {
  flex: none;
  flex-basis: 20%;
  text-align: center;
  padding: 0;
  box-sizing: border-box;
}
@media (max-width: 850px) {
  .analysis_statistics_block .analysis_statistics_group .analysis_list {
    flex-basis: 33%;
    margin-bottom: 30px;
  }
}
@media (max-width: 600px) {
  .analysis_statistics_block .analysis_statistics_group .analysis_list {
    flex-basis: 50%;
  }
}
@media (max-width: 450px) {
  .analysis_statistics_block .analysis_statistics_group .analysis_list {
    flex-basis: 100%;
  }
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .years {
  position: relative;
  margin-bottom: 40px;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .years span {
  background-color: #005d98;
  color: #fff;
  padding: 10px 15px;
  display: block;
  border-radius: 50px;
  margin: 0 15%;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .years:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #666;
  position: absolute;
  left: 48%;
  bottom: -27px;
  z-index: 3;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .years:after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #666;
  position: absolute;
  bottom: -22px;
  right: 0;
  left: 0;
  z-index: 2;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .book {
  margin: 0 0 10px;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .leader {
  font-size: 1.125em;
  color: #dc0122;
  margin: 0 0 15px;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .interval_block {
  display: flex;
  justify-content: center;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .interval_block .percentage {
  margin-right: 5px;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .interval_block .percentage ul {
  margin: -9px 0 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75em;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .interval_block .percentage ul li {
  margin: 0 0 3.5px;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .interval_block .ladderblock {
  position: relative;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .interval_block .ladderblock .ladderpic {
  position: relative;
  z-index: 1;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .interval_block .ladderblock .ladderpic img {
  width: 84px;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .interval_block .ladderblock .climber01 {
  position: absolute;
  z-index: 2;
  width: 84px;
}
.analysis_statistics_block .analysis_statistics_group .analysis_list .interval_block .ladderblock .climber01 img {
  width: 40px;
  margin: 0 auto;
}

.recommended_setting_block {
  padding: 30px;
  margin: 0 35px 60px;
  box-sizing: border-box;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
  border-radius: 5px;
}
@media screen and (max-width: 767px) {
  .recommended_setting_block {
    padding: 30px 20px;
    margin: 0 20px 60px;
  }
}
.recommended_setting_block .recommendedform {
  width: 100%;
  margin-bottom: 40px;
}
.recommended_setting_block .recommendedform .title {
  color: #dc0122;
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 30px;
}
.recommended_setting_block .recommendedform .form_grid .form_grp.being_switched.off {
  pointer-events: none;
  opacity: 0.3;
  box-shadow: none;
  cursor: not-allowed;
  -webkit-filter: grayscale(1);
}
.recommended_setting_block .recommendedform .form_grid .form_title {
  color: #000;
  font-size: 1.125em;
  width: 50%;
  position: relative;
  padding-left: 20px;
}
.recommended_setting_block .recommendedform .form_grid .form_title:before {
  content: "";
  border: 10px solid #dc0122;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  left: 0;
  top: 13px;
}
@media screen and (max-width: 991px) {
  .recommended_setting_block .recommendedform .form_grid .form_title {
    width: 100%;
  }
}
.recommended_setting_block .recommendedform .form_grid .form_content {
  width: 50%;
}
@media screen and (max-width: 991px) {
  .recommended_setting_block .recommendedform .form_grid .form_content {
    width: 100%;
  }
}
.recommended_setting_block .btn_grp input[type=submit] {
  min-width: 10em;
}

.switchOnOff,
.switchOnOff2 {
  display: inline-block;
  position: relative;
  font-size: 1 em;
  font-weight: bold;
  width: 64px;
  height: 32px;
  line-height: 32px;
  border-radius: 20px;
  background: #999;
  color: #fff;
  cursor: pointer;
}
.switchOnOff::before,
.switchOnOff2::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
  z-index: 2;
  transition: left 0.12s linear;
}
.switchOnOff::after,
.switchOnOff2::after {
  content: "Off";
  position: absolute;
  right: 8px;
}
.switchOnOff.on,
.switchOnOff2.on {
  background: #3e78c0;
}
.switchOnOff.on::before,
.switchOnOff2.on::before {
  left: 36px;
}
.switchOnOff.on::after,
.switchOnOff2.on::after {
  content: "On";
  left: 9px;
  right: auto;
}

.SDG_block {
  width: 90%;
  margin: 40px auto 60px;
  box-sizing: border-box;
}
.SDG_block h2 {
  margin-bottom: 30px;
}
.SDG_block .SDG_explain {
  margin-bottom: 30px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  line-height: 1.55em;
  box-sizing: border-box;
}
.SDG_block .SDG_banner {
  overflow: hidden;
  margin: 0 0 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.SDG_block .SDG_banner .SDG_img {
  flex: none;
  flex-basis: 170px;
  margin: 0 5px 5px;
}
.SDG_block .SDG_banner .SDG_img a {
  display: block;
}
.SDG_block .SDG_banner .SDG_img a.unread {
  opacity: 0.4;
  box-shadow: none;
  -webkit-filter: grayscale(1);
}
.SDG_block .SDG_banner .SDG_img a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.SDG_block .SDG2_banner {
  overflow: hidden;
  margin: 0 0 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.SDG_block .SDG2_banner .SDG_img {
  flex: 0 0 auto;
  flex-basis: 170px;
  margin: 0 5px 10px;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(2) a {
  background-color: #a36b01;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(3) a {
  background-color: #6d7e01;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(4) a {
  background-color: #ca1d36;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(5) a {
  background-color: #9b4ab1;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(6) a {
  background-color: #00819e;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(7) a {
  background-color: #9a7027;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(8) a {
  background-color: #961838;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(9) a {
  background-color: #be5a02;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(10) a {
  background-color: #e1157e;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(11) a {
  background-color: #85743f;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(12) a {
  background-color: #9e6b49;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(13) a {
  background-color: #3c8368;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(14) a {
  background-color: #017cb5;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(15) a {
  background-color: #20873f;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(16) a {
  background-color: #005488;
}
.SDG_block .SDG2_banner .SDG_img:nth-of-type(17) a {
  background-color: #11345f;
}
.SDG_block .SDG2_banner .SDG_img a {
  display: block;
  background-color: #ea132e;
  color: #fff;
  height: 100%;
  padding: 10px 5px 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.SDG_block .SDG2_banner .SDG_img a.unread {
  box-shadow: none;
  background-color: #666;
}
.SDG_block .SDG2_banner .SDG_img a em {
  font-size: 1.875em;
  flex: 0 0 none;
  flex-basis: 35px;
}
.SDG_block .SDG2_banner .SDG_img a span {
  flex: 1 1 auto;
  flex-basis: calc(100% - 35px);
}

.SDG_targetdata {
  margin: 0 40px 40px;
  padding: 30px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 5px;
}
@media screen and (max-width: 575px) {
  .SDG_targetdata {
    margin: 0 20px 40px;
    padding: 30px 20px;
  }
}
.SDG_targetdata .title {
  margin-bottom: 10px;
}
.SDG_targetdata .finishitem {
  margin-bottom: 10px;
  font-size: 1.25em;
  text-align: right;
  margin-right: 10px;
}
.SDG_targetdata .finishitem em {
  font-style: normal;
  color: #b94b00;
  padding: 0 5px;
}
.SDG_targetdata .SDG_targetdata_group {
  display: flex;
  flex-wrap: wrap;
}
.SDG_targetdata .SDG_targetdata_group .targetdata_box {
  flex: none;
  flex-basis: 48%;
  margin: 0 1% 20px;
  display: flex;
  background-color: #fff;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
  border: 1px solid #ddd;
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 5px;
  align-items: center;
}
@media screen and (max-width: 1399px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 991px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box {
    flex-basis: 100%;
    margin: 0 0 20px;
    flex-wrap: nowrap;
  }
}
@media screen and (max-width: 767px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box {
    flex-wrap: wrap;
  }
}
.SDG_targetdata .SDG_targetdata_group .targetdata_box .images {
  flex: none;
  flex-basis: 100px;
  max-width: 100px;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0px 20px 0 0;
  position: relative;
  border-radius: 50%;
  vertical-align: middle;
}
@media screen and (max-width: 575px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box .images {
    margin: 0 10px 0 0;
  }
}
.SDG_targetdata .SDG_targetdata_group .targetdata_box .images img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 70%;
  max-height: 70%;
  margin: auto;
  opacity: 0.7;
}
@media (max-width: 400px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box .images {
    margin: 0px auto;
  }
}
.SDG_targetdata .SDG_targetdata_group .targetdata_box p {
  flex: 1 1 auto;
  font-size: 1.125em;
  text-align: left;
}
@media screen and (max-width: 1399px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box p {
    flex-basis: calc(100% - 120px);
  }
}
@media screen and (max-width: 991px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box p {
    flex-basis: auto;
  }
}
@media screen and (max-width: 767px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box p {
    flex-basis: calc(100% - 140px);
  }
}
@media (max-width: 400px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box p {
    flex-basis: 100%;
  }
}
.SDG_targetdata .SDG_targetdata_group .targetdata_box .finish_block {
  flex: 0 0 auto;
  flex-basis: 120px;
  margin-left: 1em;
}
.SDG_targetdata .SDG_targetdata_group .targetdata_box .finish_block label {
  margin: 0;
  padding: 0.5em;
  border: 1px solid #ddd;
  border-radius: 5px;
}
@media screen and (max-width: 1399px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box .finish_block {
    flex: 1 1 auto;
    margin: 0em 0 0 0;
  }
}
@media screen and (max-width: 991px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box .finish_block {
    flex: 0 0 auto;
    margin: 0 0 0 1em;
  }
}
@media screen and (max-width: 767px) {
  .SDG_targetdata .SDG_targetdata_group .targetdata_box .finish_block {
    flex: 1 1 auto;
    margin: 0em 0 0 0;
  }
}
.SDG_targetdata .more a {
  padding: 10px 20px 10px 45px !important;
  background-image: url("../images/more_icon01.png");
  background-position: 20px center;
  background-repeat: no-repeat;
}

.actionitemsl_block .sortrecommend {
  margin: 30px 0 20px !important;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .actionitemsl_block .sortrecommend {
    width: 80%;
    margin: 30px auto !important;
  }
}
@media (max-width: 480px) {
  .actionitemsl_block .sortrecommend {
    width: 75% !important;
  }
}
.actionitemsl_block .SDG_targetdata_group {
  display: block !important;
}

.AI_block {
  padding: 30px 20px;
  margin: 0 35px 60px;
  box-sizing: border-box;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
  border-radius: 5px;
}
@media screen and (max-width: 767px) {
  .AI_block {
    margin: 0 20px 60px;
  }
}
.AI_block.nobox {
  box-shadow: none;
  padding: 30px 0;
  border: none;
}
.AI_block.studyroom {
  box-shadow: none;
  padding: 30px 0px;
  border: none;
  margin: 0 20px 0px;
}
.AI_block .consent {
  position: relative;
}
.AI_block .consent .title {
  text-align: center;
  font-size: 1.375em;
  color: #333;
  font-weight: bolder;
  padding-bottom: 1em;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1.5em;
}
@media screen and (max-width: 767px) {
  .AI_block .consent .title {
    margin-bottom: 1em;
  }
}
.AI_block .consent .sign {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #107859;
  color: #fff;
  padding: 0.3em 1em;
  border-radius: 5px;
}
.AI_block .consent .sign.notyet {
  background-color: #f1ad00;
}
@media screen and (max-width: 767px) {
  .AI_block .consent .sign {
    position: relative;
    margin-bottom: 1em;
    float: right;
  }
}
.AI_block .consent .content {
  border-bottom: 1px solid #ccc;
  margin-bottom: 1.5em;
  clear: both;
}
.AI_block .consent .content p {
  line-height: 1.8em;
  text-indent: 2em;
}
.AI_block .consent .agreecontent {
  display: flex;
  justify-content: space-between;
}
.AI_block .consent .agreecontent .signblock {
  padding: 0 0 0 1em;
  border-left: 6px solid #005d98;
  font-weight: bolder;
}

.AIgptgroup .title {
  color: #dc0122;
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}
.AIgptgroup .directions {
  line-height: 1.8em;
  padding: 1.5em;
  border-radius: 5px;
  background-color: #f0f0f0;
  margin-bottom: 1.5em;
  display: flex;
}
.AIgptgroup .directions .content {
  flex: 1 1 auto;
}
.AIgptgroup .directions .content ul {
  margin: 0em 0 0 2em;
  padding: 0;
}
.AIgptgroup .directions .content .directions {
  color: #774e2b;
  margin: 0;
  padding: 0;
  font-size: 1.125em;
  font-weight: bolder;
}
.AIgptgroup .directions .content p {
  padding-top: 0;
  margin-top: 0;
}
.AIgptgroup .directions .content p:only-child {
  margin-bottom: 0;
}
.AIgptgroup .directions .contentother {
  flex: 0 0 auto;
  padding-left: 1em;
}
.AIgptgroup .directions .contentother button.btn {
  background-color: #005d98;
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 5px;
}
.AIgptgroup .directions .contentother button.btn:hover, .AIgptgroup .directions .contentother button.btn:focus {
  background-color: #004d7f;
}
.AIgptgroup .directions .contentother button.shiny {
  background-color: #005d98;
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 5px;
}
.AIgptgroup .directions .contentother button.shiny:before {
  content: "";
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  border-radius: 5px;
}
.AIgptgroup .directions .contentother button.shiny:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #004d7f;
  left: 0;
  top: 0;
  border-radius: 5px;
}
.AIgptgroup .directions .contentother button.shiny:hover, .AIgptgroup .directions .contentother button.shiny:focus {
  background-color: #004d7f;
}
.AIgptgroup .directions .contentother button.shiny:hover:before {
  opacity: 1;
}
@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@media screen and (max-width: 767px) {
  .AIgptgroup .directions {
    flex-wrap: wrap;
  }
  .AIgptgroup .directions .content {
    flex-basis: 100%;
    max-width: 100%;
  }
  .AIgptgroup .directions .contentother {
    flex: 1 1 auto;
    flex-basis: 100%;
    max-width: 100%;
    text-align: center;
  }
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_select {
  background-color: #666;
  border-radius: 5px;
  color: #fff;
  margin-bottom: 0.5em;
  font-size: 1.125em;
  position: relative;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_select label {
  display: block;
  padding: 0.8em 1em;
  cursor: pointer;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_select span {
  position: absolute;
  right: 1em;
  top: 0.7em;
  padding: 0.2em 0.8em;
  background-color: #333;
  color: #fff;
  font-size: 0.938em;
  border-radius: 5px;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content {
  display: none;
  padding: 1em;
}
@media screen and (max-width: 767px) {
  .AIgptgroup .directions .reading_needs_block .needs_group .needs_content {
    padding: 1em 0;
  }
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .needs_directions {
  margin-bottom: 1em;
  font-size: 1.125em;
  padding: 0 0 0 1em;
  position: relative;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .needs_directions:before {
  content: "";
  width: 8px;
  height: 16px;
  background-color: #005d98;
  position: absolute;
  top: 5px;
  left: 0;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .needsquesiotn {
  padding-right: 100px;
  position: relative;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .needsquesiotn span {
  position: absolute;
  right: 0;
  top: 0;
  color: #dc0122;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .needsanswer {
  margin-bottom: 1em;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .needsanswer textarea {
  height: auto;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .readdescription_block {
  display: flex;
  flex-wrap: wrap;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .readdescription_block .readdescription_list {
  flex: 0 0 auto;
  flex-basis: 48%;
  max-width: 48%;
  margin: 0 1% 1.5em;
  background-color: #fff;
  border-radius: 5px;
  padding: 1.5em;
  box-sizing: border-box;
  position: relative;
}
@media screen and (max-width: 767px) {
  .AIgptgroup .directions .reading_needs_block .needs_group .needs_content .readdescription_block .readdescription_list {
    flex-basis: 100%;
    max-width: 100%;
    margin: 0 0 1.5em;
  }
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .readdescription_block .readdescription_list.active {
  border: 8px solid #d35500;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .readdescription_block .readdescription_list .title {
  font-size: 1.25em !important;
  text-align: left;
  margin-bottom: 15px;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .readdescription_block .readdescription_list p {
  padding-bottom: 3.5em;
}
.AIgptgroup .directions .reading_needs_block .needs_group .needs_content .readdescription_block .readdescription_list .btn_grp {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0.5em;
}
.AIgptgroup .describe {
  line-height: 1.8em;
  padding: 1.5em 1.5em 1em;
  border-radius: 5px;
  background-color: #f0f0f0;
  margin-bottom: 1.5em;
  position: relative;
}
.AIgptgroup .describe .title {
  text-align: left;
  font-size: 1.125em;
  color: #774e2b;
  margin-bottom: 0.8em;
  padding-bottom: 0em;
}
.AIgptgroup .describe button {
  position: absolute;
  right: 20px;
  top: 15px;
}
.AIgptgroup .describe button.btn {
  padding: 0.2em 0.5em !important;
  min-width: 3em;
}
.AIgptgroup .describe p {
  clear: both;
  padding-top: 0;
  margin-top: 0;
}
.AIgptgroup .describe p.singleline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.AIgptgroup .AIgptstep {
  display: flex;
  margin: 0;
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep {
    flex-wrap: wrap;
  }
}
.AIgptgroup .AIgptstep .Step_block {
  flex: 0 0 none;
  flex-basis: 200px;
  max-width: 200px;
  margin-right: 40px;
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block {
    flex: 1 1 auto;
    flex-basis: 100%;
    max-width: 100%;
    margin-right: 0;
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock {
  border-radius: 5px;
  padding: 0 0 30px 0;
  font-size: 1em;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock {
    padding: 70px 0 30px;
    margin-bottom: 0px;
    width: 100%;
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul {
  margin: 0;
  padding: 0;
  display: block;
  justify-content: center;
  list-style-type: none;
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock ul {
    display: flex;
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li {
  flex: auto;
  flex-basis: 100%;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0px 80px;
  box-sizing: border-box;
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock ul li {
    padding: 0 5px 0;
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li div {
  border-radius: 5px;
  line-height: 1.2em;
  background-color: #bbb;
  color: #fff;
  padding: 20px 15px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 1.125em;
  position: relative;
  z-index: 4;
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li div span {
  font-size: 1.063em;
  margin: 0;
  padding: 0;
  flex: auto;
  flex-basis: 100%;
  font-weight: bolder;
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li div span em {
  padding: 0 5px;
  font-style: normal;
  font-weight: 900;
  font-size: 1.5em;
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  border: 6px solid #bbb;
  position: absolute;
  left: 50%;
  right: 0;
  top: 16px;
  z-index: 3;
  transform: translate(-50%, -50%);
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:before {
    left: 50%;
    top: -46px;
    transform: translate(-50%);
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:after {
  content: "";
  width: 6px;
  height: 100%;
  background-color: #bbb;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  z-index: 2;
  transform: translate(-50%);
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:after {
    width: 100%;
    height: 6px;
    left: 0;
    right: 0;
    top: -32px;
    bottom: 0;
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:first-child:after {
  content: "";
  width: 6px;
  background: rgb(187, 187, 187);
  background: linear-gradient(0deg, rgb(187, 187, 187) 0%, rgb(187, 187, 187) 85%, rgba(236, 236, 236, 0) 50%, rgba(236, 236, 236, 0) 100%);
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:first-child:after {
    width: 0;
    background: rgb(187, 187, 187);
    background: linear-gradient(90deg, rgb(187, 187, 187) 0%, rgb(187, 187, 187) 50%, rgba(236, 236, 236, 0) 50%, rgba(236, 236, 236, 0) 100%);
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:last-child {
  padding-bottom: 0;
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:last-child:after {
  background: rgb(187, 187, 187);
  background: linear-gradient(180deg, rgb(187, 187, 187) 0%, rgb(187, 187, 187) 50%, rgba(236, 236, 236, 0) 50%, rgba(236, 236, 236, 0) 100%);
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:last-child:after {
    background: rgb(187, 187, 187);
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:last-child.active:after {
  background: #005d98;
  background: linear-gradient(180deg, #005ab0 0%, #005ab0 50%, rgb(236, 236, 236) 50%, rgb(236, 236, 236) 100%);
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock ul li:last-child.active:after {
    background: rgb(187, 187, 187);
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li.active div {
  background-color: #005d98;
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock ul li.active div:before {
    content: "";
    width: 6px;
    height: 18px;
    background-color: #005d98;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: -14px;
    z-index: 1;
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li.active:before {
  border: 6px solid #005d98;
  background-color: #005d98;
  background-image: url("https://i.postimg.cc/m2D0BtTR/icon-tick.png");
  background-position: 0;
  background-repeat: no-repeat;
  background-size: 20px;
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li.active:after {
  background: #005d98;
  background: linear-gradient(180deg, #005d98 0%, #005d98 50%, rgb(187, 187, 187) 50%, rgb(187, 187, 187) 100%);
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock ul li.active:after {
    background: rgb(187, 187, 187);
  }
}
.AIgptgroup .AIgptstep .Step_block .online_stepblock ul li.pass:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #bbb;
  border: 5px solid #fff;
  box-shadow: 0 0 0 6px #bbb;
  position: absolute;
  left: 50%;
  right: 0;
  top: 16px;
  z-index: 3;
  transform: translate(-50%, -50%);
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Step_block .online_stepblock ul li.pass:before {
    top: -40px;
    transform: translate(-50%);
  }
}
.AIgptgroup .AIgptstep .Features_block {
  flex: 1 1 auto;
  flex-basis: calc(100% - 240px);
  max-width: calc(100% - 240px);
}
@media (max-width: 992px) {
  .AIgptgroup .AIgptstep .Features_block {
    flex: 1 1 auto;
    flex-basis: 100%;
    max-width: 100%;
  }
}
.AIgptgroup .AIgptstep .Features_block .featureslist {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 1.2em 1.2em 1.2em 1.5em;
  margin-bottom: 1em;
  box-sizing: border-box;
  overflow: hidden;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .del {
  position: absolute;
  right: 0;
  top: 0;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .del a {
  padding: 0.5em 0.5em 0.5em 1.7em;
  background-color: #fed857;
  color: #333;
  display: block;
  border-radius: 0 0 0 5px;
  transition: 0.5s;
  position: relative;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .del a:before {
  content: "";
  background-image: url("../images/icon/icon_close.svg");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: center;
  position: absolute;
  width: 14px;
  height: 14px;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.AIgptgroup .AIgptstep .Features_block .featureslist .del a:hover {
  background-color: #fecc24;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .title {
  font-size: 1.25em;
  color: #005d98;
  margin-bottom: 0.8em;
  text-align: left;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .content {
  line-height: 1.6em;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .star {
  font-weight: bolder;
  color: #dc0122;
  font-size: 1.25em;
  margin-right: 5px;
  vertical-align: middle;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .hovercontent {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  opacity: 0;
  transition: 0.5s;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .hovercontent.open {
  top: 0;
  opacity: 1;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .hovercontent .reserve {
  position: absolute;
  right: 0;
  top: 0;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .hovercontent .reserve a {
  padding: 0.5em 0.5em 0.5em 1.7em;
  background-color: #dc0122;
  color: #fff;
  display: block;
  border-radius: 0 0 0 5px;
  transition: 0.5s;
  position: relative;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .hovercontent .reserve a:before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  left: 0.5em;
  top: 12px;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .hovercontent .reserve a:hover {
  background-color: #a9011a;
}
.AIgptgroup .AIgptstep .Features_block .featureslist .hovercontent .content {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.AIgptgroup .AIgptstep .Features_block .replenish .title {
  text-align: left;
  font-size: 1.125em;
  color: #333;
  margin-bottom: 1em;
  padding-bottom: 0em;
  padding-left: 1em;
  position: relative;
}
.AIgptgroup .AIgptstep .Features_block .replenish .title:before {
  content: "";
  width: 8px;
  height: 20px;
  border-radius: 50px;
  background-color: #dc0122;
  position: absolute;
  left: 0;
  top: 3px;
}
.AIgptgroup .AIgptstep .Features_block .replenish textarea {
  height: auto;
}
.AIgptgroup .AIgptstep .Features_block .replenish .remaining_num {
  text-align: right;
  color: #dc0122;
}
.AIgptgroup .AIrecommendbook {
  line-height: 1.8em;
  padding: 1.5em;
  border-radius: 5px;
  background-color: #f0f0f0;
  margin-bottom: 1.5em;
  position: relative;
}
.AIgptgroup .AIrecommendbook .recommendbook_list {
  padding: 0.8em 1em;
  border-radius: 5px;
  background-color: #fff;
  margin-bottom: 1em;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options {
  margin-right: 0em;
  margin-bottom: 0.5em;
  flex: 1 1 auto;
  flex-basis: 100%;
}
@media screen and (max-width: 767px) {
  .AIgptgroup .AIrecommendbook .recommendbook_list .feature_options {
    margin-bottom: 1em;
  }
}
@media (max-width: 670px) {
  .AIgptgroup .AIrecommendbook .recommendbook_list .feature_options {
    flex: 0 0 auto;
    flex-basis: 110px;
    order: 2;
    border-radius: 5px;
  }
}
@media (max-width: 440px) {
  .AIgptgroup .AIrecommendbook .recommendbook_list .feature_options {
    flex: 1 1 auto;
    flex-basis: 100%;
    order: 1;
  }
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style-type: none;
  justify-content: flex-end;
}
@media (max-width: 670px) {
  .AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul {
    flex-wrap: wrap;
  }
}
@media (max-width: 440px) {
  .AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul {
    justify-content: center;
  }
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li {
  margin-left: 0.5em;
  position: relative;
  flex: 0 0 auto;
}
@media (max-width: 670px) {
  .AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li {
    margin: 0 0 0.5em;
  }
}
@media (max-width: 440px) {
  .AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li {
    margin: 0 0 0.5em 1em;
  }
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li.disabled a {
  background-color: #eee;
  pointer-events: none;
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed !important;
  display: block;
  -webkit-filter: grayscale(1);
  border: 1px solid #ddd;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li:hover {
  background: rgb(221, 221, 221);
  background: linear-gradient(0deg, rgb(221, 221, 221) 0%, rgb(255, 255, 255) 100%);
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li a {
  display: block;
  position: relative;
  z-index: 2;
  line-height: 1.3em;
  border: 1px solid #ccc;
  padding: 0.2em 0.8em 0.2em 1.7em;
  border-radius: 50px;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li a:hover {
  color: #000;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li a:focus {
  box-shadow: none !important;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li.borrowbooks a {
  background-image: url("../images/feature_options01.svg");
  background-repeat: no-repeat;
  background-position: 10px 5px;
  background-size: 12px;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li.tobeseen a {
  background-image: url("../images/feature_options02.svg");
  background-repeat: no-repeat;
  background-position: 10px 8px;
  background-size: 10px;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li.tobeseen a:focus, .AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li.tobeseen a.active {
  color: #ed8301;
  background-image: url("../images/feature_options02_active.svg");
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li.moreinformation a {
  background-image: url("../images/feature_options03.svg");
  background-repeat: no-repeat;
  background-position: 10px 8px;
  background-size: 13px;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .feature_options ul li.bookboxreservation a {
  padding: 0.2em 0.8em 0.2em 1.9em;
  background-image: url("../images/feature_options04.svg");
  background-repeat: no-repeat;
  background-position: 10px 7px;
  background-size: 14px;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .recommendbook {
  flex: 0 0 auto;
  flex-basis: 160px;
  margin-right: 20px;
  text-align: center;
}
@media (max-width: 670px) {
  .AIgptgroup .AIrecommendbook .recommendbook_list .recommendbook {
    margin-bottom: 1em;
    margin-right: 0;
    flex: 0 0 auto;
    flex-basis: calc(100% - 110px - 0.5em);
    order: 1;
  }
}
@media (max-width: 440px) {
  .AIgptgroup .AIrecommendbook .recommendbook_list .recommendbook {
    flex: 1 1 auto;
    flex-basis: 100%;
    order: 2;
  }
}
.AIgptgroup .AIrecommendbook .recommendbook_list .recommendbook img {
  max-width: 150px;
  max-height: 150px;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .recommendbook .image_titlepage,
.AIgptgroup .AIrecommendbook .recommendbook_list .recommendbook .image_titlepage2 {
  width: 110px;
  margin: 0 auto 1em;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content {
  flex: 1 1 auto;
  flex-basis: calc(100% - 180px);
}
@media (max-width: 670px) {
  .AIgptgroup .AIrecommendbook .recommendbook_list .content {
    flex-basis: 100%;
    order: 3;
  }
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content .booktitle {
  color: #005d98;
  font-size: 1.125em;
  font-weight: bolder;
  margin-bottom: 0.3em;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content .booktitle a {
  color: #005d98;
  text-decoration: underline;
  display: block;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content .booktitle a:hover {
  color: #dd1f03;
  text-decoration: none;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content .recommendobjects {
  color: #774e2b;
  margin-bottom: 0.3em;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content .datelist {
  margin-bottom: 0.3em;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content .datelist ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content .datelist ul li {
  color: #774e2b;
  margin-bottom: 0.1em;
  position: relative;
  padding-right: 1em;
  margin-right: 0.5em;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content .datelist ul li:after {
  content: "/";
  position: absolute;
  right: 0;
  top: 0;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content .datelist ul li:last-child:after {
  display: none;
}
.AIgptgroup .AIrecommendbook .recommendbook_list .content .introduce {
  line-height: 1.8em;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.8em;
  height: calc(1.8em * 3);
}
.AIgptgroup .AIinformation {
  flex: 1 1 auto;
  flex-basis: 100%;
  display: flex;
  padding-bottom: 0.5em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #fff;
}
@media screen and (max-width: 767px) {
  .AIgptgroup .AIinformation {
    flex-wrap: wrap;
  }
}
.AIgptgroup .AIinformation:last-of-type {
  margin-bottom: 0;
  border-bottom: none;
  border-top: 1px solid #fff;
  padding-top: 1em;
  margin-top: 1.5em;
}
.AIgptgroup .AIinformation .AIpage {
  flex: 0 0 none;
}
@media screen and (max-width: 767px) {
  .AIgptgroup .AIinformation .AIpage {
    flex: 1 1 auto;
    flex-basis: 100%;
    margin-bottom: 0.5em;
  }
}
.AIgptgroup .AIinformation .AIpage input[type=text] {
  width: 2.5em;
  text-align: center;
  margin: 0 0.3em;
  padding: 0.3em 0.5em;
}
.AIgptgroup .AIinformation .AIpage button {
  width: 2em;
  min-width: auto;
}
.AIgptgroup .AIinformation .AIpage button.prev {
  border-radius: 8px 0px 0px 8px;
  padding: 0.3em !important;
  position: relative;
  text-indent: -99999px;
  background-image: url(../images/icon/icon_arrow_left.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  margin-left: 0.5em;
}
.AIgptgroup .AIinformation .AIpage button.next {
  border-radius: 0 8px 8px 0;
  padding: 0.3em !important;
  position: relative;
  text-indent: -99999px;
  background-image: url(../images/icon/icon_arrow_right.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
}
.AIgptgroup .AIinformation .AIselect {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .AIgptgroup .AIinformation .AIselect {
    flex-basis: 100%;
    flex-wrap: wrap;
  }
}
.AIgptgroup .AIinformation .AIselect .viewmode {
  margin-right: 5px;
}
.AIgptgroup .AIinformation .AIselect .viewmode a {
  display: block;
  padding: 0em 0.8em 0em 2em;
  border: 1px solid #d3d3d3 !important;
  border-radius: 5px;
  line-height: 2.3em;
  height: 2.3em;
}
.AIgptgroup .AIinformation .AIselect .viewmode.list a {
  background-image: url("../images/viewmode_icon02.svg");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 15px;
}
.AIgptgroup .AIinformation .AIselect .viewmode.juxtapose a {
  background-image: url("../images/viewmode_icon01.svg");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 15px;
}
.AIgptgroup .AIinformation .AIselect select {
  width: auto;
  margin-left: 0.2em;
  margin-bottom: 0;
}
@media screen and (max-width: 575px) {
  .AIgptgroup .AIinformation .AIselect select {
    width: 100%;
    margin-left: 0;
    margin-bottom: 5px;
  }
}
.AIgptgroup .AIrecommendbook_sidebyside {
  line-height: 1.8em;
  padding: 1.5em;
  border-radius: 5px;
  background-color: #f0f0f0;
  margin-bottom: 1.5em;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.AIgptgroup .AIrecommendbook_sidebyside.nobgcolor {
  background-color: #fff;
  padding: 0em;
  margin-bottom: 0;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list {
  flex: 0 0 auto;
  flex-basis: 18%;
  max-width: 18%;
  margin: 0 1% 1em;
  padding: 1em;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
@media (max-width: 1200px) {
  .AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list {
    flex-basis: 23%;
    max-width: 23%;
  }
}
@media (max-width: 992px) {
  .AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list {
    flex-basis: 31%;
    max-width: 31%;
    margin: 0 1.16% 1em;
  }
}
@media (max-width: 767px) {
  .AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list {
    flex-basis: 48%;
    max-width: 48%;
    margin: 0 1% 1em;
  }
}
@media (max-width: 500px) {
  .AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list {
    flex-basis: 100%;
    max-width: 100%;
    margin: 0 0 1em;
  }
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .recommendbook {
  text-align: center;
  margin-bottom: 0.5em;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .recommendbook img {
  max-width: 150px;
  max-height: 150px;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .recommendbook .image_titlepage,
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .recommendbook .image_titlepage2 {
  width: 110px;
  margin: 0 auto 1em;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options {
  margin-bottom: 0.5em;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style-type: none;
  justify-content: center;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li {
  margin-left: 0.5em;
  position: relative;
  flex: 0 0 auto;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li:hover {
  background: rgb(221, 221, 221);
  background: linear-gradient(0deg, rgb(221, 221, 221) 0%, rgb(255, 255, 255) 100%);
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li a {
  display: block;
  position: relative;
  z-index: 2;
  line-height: 1.3em;
  border: 1px solid #ccc;
  padding: 0.2em 0.8em 0.2em 1.7em;
  border-radius: 50%;
  font-size: 0;
  width: 28px;
  height: 28px;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li a:hover {
  color: #000;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li a:focus {
  box-shadow: none !important;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li.borrowbooks a {
  background-image: url("../images/feature_options01.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li.tobeseen a {
  background-image: url("../images/feature_options02.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li.tobeseen a.active {
  background-image: url(../images/feature_options02_active.svg);
  border: 1px solid #ed8301;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li.moreinformation a {
  background-image: url("../images/feature_options03.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li.bookboxreservation a {
  padding: 0.2em 0.8em 0.2em 1.9em;
  background-image: url("../images/feature_options04.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .feature_options ul li.bookboxreservation.disabled a {
  background-color: #eee;
  pointer-events: none;
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed !important;
  display: block;
  -webkit-filter: grayscale(1);
  border: 1px solid #ddd;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .content .booktitle {
  color: #005d98;
  font-size: 1.125em;
  font-weight: bolder;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .content .booktitle a {
  color: #005d98;
  text-decoration: underline;
  text-align: center;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.AIgptgroup .AIrecommendbook_sidebyside .recommendbook_list .content .booktitle a:hover {
  color: #dd1f03;
  text-decoration: none;
}
.AIgptgroup .AI_explain {
  display: flex;
  position: relative;
  justify-content: flex-end;
}
.AIgptgroup .AI_explain span {
  position: relative;
}
.AIgptgroup .AI_explain span:before {
  content: "";
  border: 8px solid #005d98;
  border-color: transparent transparent transparent #005d98;
  position: absolute;
  left: -1em;
  top: 3px;
}
@media screen and (max-width: 767px) {
  .AIgptgroup .AI_explain {
    justify-content: flex-start;
  }
  .AIgptgroup .AI_explain span {
    padding-left: 1.2em;
  }
  .AIgptgroup .AI_explain span:before {
    left: 0;
  }
}
.AIgptgroup .classification_group {
  padding: 5px;
  background-color: #005d98;
  border-radius: 5px;
  margin: 10px 0 20px;
}
.AIgptgroup .query_context_block {
  display: flex;
  padding: 0.5em;
  background-color: #eee;
  border-radius: 5px;
  margin-bottom: 1.5em;
  align-items: center;
}
.AIgptgroup .query_context_block .title {
  flex: 0 0 auto;
  flex-basis: 108px;
  font-size: 1.125rem;
  margin: 0 1em 0 0;
  background-color: #005d98;
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 5px;
  position: relative;
  box-sizing: border-box;
}
.AIgptgroup .query_context_block .title:after {
  content: "";
  border: 8px solid #005d98;
  border-color: transparent transparent transparent #005d98;
  position: absolute;
  right: -15px;
  top: 13px;
}
.AIgptgroup .query_context_block .content {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.AIgptgroup .query_context_block .contextbtn_group {
  flex: 0 0 auto;
}
.AIgptgroup .query_context_block .contextbtn_group ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.AIgptgroup .query_context_block .contextbtn_group ul li {
  margin-left: 0.3em;
}
.AIgptgroup .query_context_block .contextbtn_group ul li a {
  display: block;
  padding: 0.5em 1em 0.5em 2.2em;
  background-color: #666;
  color: #fff;
  border-radius: 50px;
  transition: 0.5s;
}
.AIgptgroup .query_context_block .contextbtn_group ul li a.extend {
  background-image: url("../images/context_icon01.svg");
  background-position: 0.6em center;
  background-repeat: no-repeat;
  background-size: 18px;
}
.AIgptgroup .query_context_block .contextbtn_group ul li a.edit {
  background-image: url("../images/context_icon02.svg");
  background-position: 0.8em center;
  background-repeat: no-repeat;
  background-size: 15px 20px;
}
.AIgptgroup .query_context_block .contextbtn_group ul li a:hover, .AIgptgroup .query_context_block .contextbtn_group ul li a:focus, .AIgptgroup .query_context_block .contextbtn_group ul li a.active {
  background-color: #005d98;
}
@media screen and (max-width: 767px) {
  .AIgptgroup .query_context_block {
    flex-wrap: wrap;
    justify-content: center;
  }
  .AIgptgroup .query_context_block .content {
    flex-basis: calc(100% - 108px - 3em);
  }
  .AIgptgroup .query_context_block .contextbtn_group {
    flex-basis: 100%;
  }
}
@media screen and (max-width: 575px) {
  .AIgptgroup .query_context_block {
    padding: 0.5em 1em;
  }
  .AIgptgroup .query_context_block .title {
    margin-bottom: 1em;
    margin-right: 0;
  }
  .AIgptgroup .query_context_block .title:after {
    border: 8px solid #005d98;
    border-color: #005d98 transparent transparent transparent;
    position: absolute;
    right: calc(50% - 8px);
    top: auto;
    bottom: -16px;
  }
  .AIgptgroup .query_context_block .content {
    flex-basis: 100%;
    margin-bottom: 0.5em;
  }
}
.AIgptgroup .continue_search_group {
  z-index: 9;
  background-color: #ddd;
  display: flex;
  padding: 8px 8px;
  border-radius: 5px;
  width: 45vw;
  margin: 0 auto;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
@media (max-width: 1200px) {
  .AIgptgroup .continue_search_group {
    width: 60vw;
  }
}
@media screen and (max-width: 767px) {
  .AIgptgroup .continue_search_group {
    width: 80vw;
  }
}
@media screen and (max-width: 575px) {
  .AIgptgroup .continue_search_group {
    width: 85vw;
  }
}
.AIgptgroup .continue_search_group.fixed {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, 0);
}
.AIgptgroup .continue_search_group .contextext {
  flex: 1 1 auto;
  display: flex;
  background-color: #fff;
  border-radius: 5px;
  padding: 3px 5px;
  margin-right: 5px;
  align-items: center;
}
.AIgptgroup .continue_search_group .contextext input {
  margin: 0;
  border: none;
}
.AIgptgroup .continue_search_group .contextext button {
  font-size: 0;
  flex: 0 0 auto;
  flex-basis: 56px;
}
.AIgptgroup .continue_search_group .contextext button.btn {
  background-color: #888;
  width: 56px;
  height: 36px;
  border-radius: 50px;
  background-image: url("../images/icon/icon_aiarrow_white.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40%;
}
.AIgptgroup .continue_search_group .contextext button.btn:hover {
  background-color: #005d98;
}
.AIgptgroup .continue_search_group .expand_block {
  flex: 0 0 auto;
}
.AIgptgroup .continue_search_group .expand_block button.expandbtn {
  padding-left: 1em;
  background-image: url("../images/icon_expand.svg");
  background-position: 11px center;
  background-repeat: no-repeat;
  background-size: 16px;
  background-color: #005d98 !important;
  color: #fff;
  margin: 0;
  padding: 0.7em 0.1em 0.6em 1.2em;
  border: none;
  transition: 0.5s;
}

.btn_grp {
  margin-top: 1em;
}
.btn_grp input {
  margin-bottom: 0;
}
.btn_grp input[type=submit] {
  margin-top: 0;
  margin-bottom: 0;
}

.transitions_block {
  position: fixed;
  width: 60vw;
  height: auto;
  background-color: rgb(67, 67, 67);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: auto;
  z-index: 99;
  color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  padding: 3em;
  box-sizing: border-box;
  font-size: 1em;
}
@media (max-width: 1200px) {
  .transitions_block {
    width: 70vw;
  }
}
@media (max-width: 992px) {
  .transitions_block {
    width: 80vw;
    padding: 2em;
  }
}
@media (max-width: 767px) {
  .transitions_block {
    width: 90vw;
    padding: 1em;
  }
}
@media (max-width: 575px) {
  .transitions_block {
    width: 100vw;
    height: 100vh;
  }
}
.transitions_block .directions {
  text-align: center;
  margin-bottom: 1em;
  font-size: 1.188em;
  line-height: 1.6em;
}
.transitions_block .directions em {
  font-style: normal;
  padding: 0 0.2em;
  font-weight: bolder;
}
.transitions_block .dynamic_pic {
  margin-bottom: 1em;
}
.transitions_block .dynamic_pic .frame {
  width: 300px;
  height: 100px;
  margin: 0 auto;
  transform: scale(0.8);
}
.transitions_block .dynamic_pic .day21 {
  position: relative;
}
.transitions_block .dynamic_pic .day21 .pacman {
  position: absolute;
  width: 100px;
  height: 100px;
  fill: none;
  stroke: #f4d146;
  stroke-width: 50px;
  stroke-dasharray: 157;
  animation: mouth_d21 0.7s ease-in-out infinite;
}
.transitions_block .dynamic_pic .day21 .eye {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 20px;
  left: 50px;
  fill: #2c2e2e;
  animation: eye_d21 0.7s ease-in-out infinite;
}
.transitions_block .dynamic_pic .day21 .dots {
  position: absolute;
  height: 14px;
  width: 400px;
  top: 40px;
  left: 50px;
  stroke: #f4d146;
  stroke-width: 14px;
  stroke-dasharray: 0px 50px;
  stroke-linecap: round;
  animation: points_d21 0.7s linear infinite;
  stroke-dashoffset: 14;
}
@keyframes mouth_d21 {
  0%, 100% {
    translate: -10px;
    stroke-dashoffset: 0;
    rotate: 0deg;
  }
  50% {
    translate: 5px;
    stroke-dashoffset: 39.25;
    rotate: 45deg;
  }
}
@keyframes eye_d21 {
  0%, 100% {
    translate: 0px;
  }
  50% {
    translate: -6px -3px;
  }
}
@keyframes points_d21 {
  0% {
    stroke-dashoffset: 14;
  }
  100% {
    stroke-dashoffset: 64;
  }
}
.transitions_block .project_group {
  padding: 2em;
  border-radius: 10px;
  border: 1px solid #eee;
  overflow-y: scroll;
  height: calc(100% - 200px);
}
.transitions_block .project_group .project_title {
  margin-bottom: 0;
  font-size: 1.125em;
  background-color: #000;
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 20px;
  letter-spacing: 0.02em;
  color: #f1ad00;
}
.transitions_block .project_group p {
  line-height: 1.8em;
}
@media (max-width: 767px) {
  .transitions_block .project_group {
    padding: 1.5em 1em;
  }
}

.sharedreadingbox_block {
  margin: 40px 35px 60px;
}
@media screen and (max-width: 767px) {
  .sharedreadingbox_block {
    margin: 40px 0px 60px;
  }
}
.sharedreadingbox_block .title {
  color: #dc0122;
  font-size: 1.75em;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}
.sharedreadingbox_block .readingbox_group {
  padding: 30px 20px;
  margin: 0;
  box-sizing: border-box;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
  border-radius: 5px;
}
@media screen and (max-width: 767px) {
  .sharedreadingbox_block .readingbox_group {
    margin: 0 20px 60px;
  }
}
.sharedreadingbox_block .readingbox_tab {
  margin: 0 0 20px;
  box-sizing: border-box;
}
.sharedreadingbox_block .readingbox_tab .sort {
  padding: 0 5px;
}
.sharedreadingbox_block .readingbox_tab .sort a {
  display: block;
  padding: 20px 10px;
  background: #dcdcdc;
  background: linear-gradient(to bottom, #dcdcdc, #e5e5e5);
  color: #333;
  font-size: 1.313em;
  text-align: center;
  border-radius: 5px;
  position: relative;
  transition: 0.2s;
  line-height: 1.3em;
}
.sharedreadingbox_block .readingbox_tab .sort a:hover {
  background-image: none;
  background-color: #f1ad00;
  color: #000;
}
.sharedreadingbox_block .readingbox_tab .sort a.here {
  background: #f1ad00;
  color: #000;
}
.sharedreadingbox_block .readingbox_tab .sort a.here:focus {
  background: #ffba0c;
}
.sharedreadingbox_block .readingbox_tab .slick-next {
  right: -20px;
  top: 0;
  background-color: transparent;
}
.sharedreadingbox_block .readingbox_tab .slick-prev {
  left: -20px;
  top: 0;
  background-color: transparent;
}
@media (max-width: 767px) {
  .sharedreadingbox_block .readingbox_tab .slick-next {
    right: -45px;
    top: 0;
  }
  .sharedreadingbox_block .readingbox_tab .slick-prev {
    left: -45px;
    top: 0;
  }
}
@media (max-width: 400px) {
  .sharedreadingbox_block .readingbox_tab .slick-next {
    right: -36px;
  }
  .sharedreadingbox_block .readingbox_tab .slick-prev {
    left: -36px;
  }
}
.sharedreadingbox_block .readingboxtab_content {
  margin: 10px 0 20px;
  border-radius: 5px;
  float: none;
  clear: both;
  padding: 20px 10px;
  text-align: left;
  background-color: #eee;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .sharedreadingbox_block .readingboxtab_content {
    padding: 20px 10px;
  }
}
.sharedreadingbox_block .readingboxtab_content .form_grid {
  display: flex;
  flex-wrap: wrap;
}
.sharedreadingbox_block .readingboxtab_content .form_grp {
  flex: none;
  flex-basis: 50%;
  max-width: 50%;
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .sharedreadingbox_block .readingboxtab_content .form_grp {
    flex-basis: 100%;
    max-width: 100%;
    margin-right: 0;
    display: block;
  }
}
.sharedreadingbox_block .readingboxtab_content .form_grp .form_title {
  flex: 1 1 auto;
  flex-basis: 100%;
  width: 100% !important;
}
.sharedreadingbox_block .readingboxtab_content .form_grp .form_content {
  flex: auto;
  width: 100% !important;
}
.sharedreadingbox_block .readingboxtab_content .form_grp .form_content select {
  width: 100%;
}
.sharedreadingbox_block .readingboxtab_content .flex-col-equal-3 {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.sharedreadingbox_block .readingboxtab_content .flex-col-equal-3 .form_grp {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .sharedreadingbox_block .readingboxtab_content .flex-col-equal-3 {
    flex-wrap: wrap;
  }
  .sharedreadingbox_block .readingboxtab_content .flex-col-equal-3 .form_grp {
    flex-basis: 100%;
    max-width: 100%;
    margin-right: 0;
    display: block;
  }
}
.sharedreadingbox_block .readingboxtab_content .btn_grp {
  margin: 0;
}
.sharedreadingbox_block .AIgptgroup .AIrecommendbook {
  margin-bottom: 0;
  background-color: #fff;
  padding: 0;
}
.sharedreadingbox_block .AIgptgroup .AIinformation {
  border-bottom: 1px solid #ddd;
}
.sharedreadingbox_block .AIgptgroup .AIinformation:last-child {
  margin-bottom: 0;
  border-bottom: none;
  border-top: 1px solid #ddd;
  padding-top: 1em;
  margin-top: 1.5em;
}

.points_content_block {
  margin: 0 20px 50px;
}
.points_content_block .read_passbook_list {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 900px) {
  .points_content_block .read_passbook_list {
    display: block;
  }
}
.points_content_block .read_passbook_list .reward_list2 {
  flex: auto;
  flex-basis: 49%;
  max-width: 49%;
  position: relative;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  padding: 15px;
  border-radius: 5px;
  color: #333;
  display: flex;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .points_content_block .read_passbook_list .reward_list2 {
    flex-basis: 100%;
    max-width: 100%;
  }
}
.points_content_block .read_passbook_list .reward_list2 .image {
  flex: 0 0 auto;
  flex-basis: 150px;
  max-width: 150px;
  margin-right: 20px;
  overflow: hidden;
}
.points_content_block .read_passbook_list .reward_list2 .image img {
  max-width: 150px;
  max-height: 170px;
}
.points_content_block .read_passbook_list .reward_list2 .content {
  overflow: hidden;
  flex: 1 1 auto;
}
.points_content_block .read_passbook_list .reward_list2 .content .title {
  font-size: 1.25em;
  margin-bottom: 10px;
  color: #333;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.points_content_block .read_passbook_list .reward_list2 .content ul {
  margin: 0 0 15px;
  padding: 0;
  list-style-type: none;
}
.points_content_block .read_passbook_list .reward_list2 .content ul li {
  margin: 0 0 5px;
}
.points_content_block .read_passbook_list .reward_list2 .content ul li em {
  font-style: normal;
  color: #b94b00;
  margin-right: 5px;
  font-weight: 600;
}
.points_content_block .read_passbook_list .reward_list2 .content .btnblock span {
  display: inline-block;
}
@media (max-width: 480px) {
  .points_content_block .read_passbook_list .reward_list2 {
    display: block;
  }
  .points_content_block .read_passbook_list .reward_list2 .image {
    margin: 0 auto 20px;
  }
}
@media (max-width: 992px) {
  .points_content_block .read_passbook_list .reward_list {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.linecontent {
  padding: 0;
  position: relative;
}
.linecontent.mobile-card {
  padding: 0;
  margin: 40px auto 60px;
  width: 90%;
  border: 1px solid #ccc;
  padding: 40px 30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-sizing: border-box;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card {
    padding: 20px 10px;
  }
}

.linecontent.mobile-card .main-title {
  color: #005d98;
  font-size: 1.8em;
  font-weight: bold;
  padding: 0px 0 0 16px;
  margin: 0 0 10px 0;
  position: relative;
  line-height: 1em;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .main-title {
    font-size: 1.5em;
  }
}
.linecontent.mobile-card .main-title span {
  font-size: 0.87rem;
  display: block;
  margin-top: 5px;
  color: #005d98;
  line-height: 1.4em;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .main-title span {
    font-size: 0.85rem;
    margin-top: 10px;
  }
}
.linecontent.mobile-card .main-title:before {
  content: "";
  width: 6px;
  height: 56px;
  display: block;
  border-radius: 5px;
  background: #005d98;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .main-title:before {
    height: 54px;
  }
}
.linecontent.mobile-card .card-step {
  display: block;
  margin: 25px 0 20px 0;
  letter-spacing: 0.03em;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-step {
    margin: 15px 0 10px 0;
  }
}
.linecontent.mobile-card .card-step span {
  color: #fff;
  font-size: 0.98em;
  padding: 10px 16px;
  border-radius: 50px;
  box-sizing: border-box;
  background: #005d98;
  vertical-align: middle;
  display: inline-block;
  margin-bottom: 10px;
}
@media screen and (max-device-width: 767px) {
  .linecontent.mobile-card .card-step span {
    padding: 10px 10px;
  }
}
@media screen and (max-device-width: 375px) {
  .linecontent.mobile-card .card-step span {
    padding: 10px 10px;
  }
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-step span {
    padding: 10px 8px;
    font-size: 0.875em;
    margin-bottom: 8px;
  }
}
.linecontent.mobile-card .card-step span.active {
  color: #fff;
  background: #dc0122;
}
.linecontent.mobile-card .card-step em {
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 8px solid #005d98;
  border-left: none;
  border-bottom: none;
  transform: rotate(45deg);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 10px;
}
@media screen and (max-device-width: 767px) {
  .linecontent.mobile-card .card-step em {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    margin-left: -5px;
  }
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-step em {
    margin-bottom: 8px;
    width: 10px;
    height: 10px;
    border: 5px solid #005d98;
    border-left: none;
    border-bottom: none;
  }
}
.linecontent.mobile-card .card-consent {
  padding: 25px;
  height: 380px;
  box-sizing: border-box;
  background: #eee;
  overflow-y: scroll;
  margin-bottom: 20px;
}
@media screen and (max-device-width: 375px) {
  .linecontent.mobile-card .card-consent {
    height: 310px;
  }
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-consent {
    height: 250px;
    padding: 0;
    margin-bottom: 15px;
  }
}
.linecontent.mobile-card .card-consent p {
  margin-top: 0;
  line-height: 160%;
  color: #666;
}
.linecontent.mobile-card .card-login {
  padding: 0 0 15px 0;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-login {
    padding: 15px 0;
  }
}
.linecontent.mobile-card .card-login label {
  color: #000;
  font-size: 1.1em;
  margin-bottom: 15px;
  display: block;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-login label {
    font-size: 1em;
    margin-bottom: 10px;
  }
}
.linecontent.mobile-card .card-login input {
  margin-bottom: 20px;
  padding-right: 44px;
}
.linecontent.mobile-card .card-login input.check {
  background: #fff url(../images/check.png) right center no-repeat;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-login input {
    margin-bottom: 15px;
  }
}
.linecontent.mobile-card .card-login .id {
  color: #005d98;
  margin-bottom: 20px;
  font-size: 1.2em;
  letter-spacing: 1px;
  font-family: Arial, sans-serif;
}
.linecontent.mobile-card .card-login .alert {
  color: #fff;
  background: #dc0122;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  font-size: 1.1em;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-login .alert {
    font-size: 1em;
    padding: 8px;
  }
}
.linecontent.mobile-card .card-ok {
  text-align: center;
  margin: 40px 0 30px 0;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-ok {
    margin: 15px 0 15px 0;
  }
}
.linecontent.mobile-card .card-ok span {
  font-size: 1.2em;
  color: #005d98;
  font-weight: bold;
  display: block;
  line-height: 160%;
  letter-spacing: 1px;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-ok span {
    font-size: 1.1em;
    line-height: 140%;
  }
}
.linecontent.mobile-card .card-ok:before {
  content: "";
  width: 128px;
  height: 128px;
  display: block;
  background: url(../images/check-big.png) 0 0 no-repeat;
  background-size: cover;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-ok:before {
    width: 100px;
    height: 100px;
    margin: 0 auto 10px auto;
  }
}
.linecontent.mobile-card .card-barcode {
  text-align: center;
}
.linecontent.mobile-card .card-barcode .menber-info {
  font-size: 1.2em;
  line-height: 160%;
  letter-spacing: 1px;
  font-weight: bold;
  margin: 10px 0;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-barcode .menber-info {
    font-size: 1.1em;
    line-height: 140%;
  }
}
.linecontent.mobile-card .card-barcode .menber-info span {
  display: block;
}
.linecontent.mobile-card .card-barcode .barcode {
  width: 100%;
  max-width: 400px;
  margin: 10px auto;
}
.linecontent.mobile-card .card-barcode .barcode img {
  width: 100%;
  height: auto;
}
.linecontent.mobile-card .card-barcode .barcode-date {
  margin-bottom: 10px;
}
.linecontent.mobile-card .card-barcode .barcode-refresh {
  font-size: 1.8em;
  color: #fed857, #5c9588, #5c9588, #f3d22f, #dddddd, #e9846a, #a7c077, #f49a6e, #e6b2c6, #f3d394, #fbe8d3;
  margin: 10px 10px 10px 0;
  vertical-align: middle;
  padding-left: 10px;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-barcode .barcode-refresh {
    font-size: 1.5em;
  }
}
.linecontent.mobile-card .card-barcode .barcode-refresh .btn {
  font-size: 0.6em;
  margin-left: 10px;
  margin-top: -5px;
  padding: 8px 16px;
  width: auto;
  vertical-align: middle;
}
.linecontent.mobile-card .card-barcode .barcode-refresh .btn:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../images/refresh.png) 0 0 no-repeat;
  background-size: cover;
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 5px;
}
@media screen and (max-device-width: 320px) {
  .linecontent.mobile-card .card-barcode .barcode-refresh .btn:before {
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-device-width: 380px) {
  .linecontent.mobile-card .card-barcode .barcode-refresh .btn {
    display: block;
    margin-top: 10px;
  }
}
.linecontent.mobile-card .btn {
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 1.1em;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  width: 48%;
  margin-right: 0.5%;
  border: 0;
}
@media screen and (max-width: 320px) {
  .linecontent.mobile-card .btn {
    font-size: 1em;
  }
}
.linecontent.mobile-card .btn:nth-of-type(2) {
  margin-right: 0;
  margin-right: 0;
}
.linecontent.mobile-card .btn.btn-all {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}
.linecontent.mobile-card .btn:hover {
  color: #fff;
}

.linecontent.library {
  margin: 40px auto 60px;
  width: 90%;
  border: 1px solid #ccc;
  padding: 40px 30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-sizing: border-box;
}
@media screen and (max-device-width: 320px) {
  .linecontent.library {
    padding: 20px 10px;
  }
}
.linecontent.library.pb {
  padding-bottom: 156px;
}
.linecontent.library .main-title {
  font-size: 1.6em;
  color: #005d98;
  position: relative;
  padding-bottom: 12px;
  letter-spacing: 1px;
  font-weight: normal;
  line-height: 110%;
  margin-top: 0;
  position: relative;
}
@media screen and (max-width: 320px) {
  .linecontent.library .main-title {
    font-size: 1.4em;
  }
}
.linecontent.library .main-title:before {
  content: "";
  width: 135px;
  height: 6px;
  display: block;
  border-radius: 5px;
  background: #005d98;
  position: absolute;
  left: 0;
  bottom: 0;
}
.linecontent.library .alert-list {
  font-size: 1.2em;
  line-height: 160%;
  margin-bottom: 15px;
}
@media screen and (max-width: 320px) {
  .linecontent.library .alert-list {
    font-size: 1em;
  }
}
.linecontent.library .alert-list ul {
  margin: 0;
  padding: 0;
}
.linecontent.library .alert-list li {
  display: block;
  padding: 8px 0;
  border-bottom: 2px dotted #ccc;
}
.linecontent.library .alert-list li span {
  margin-right: 8px;
}
.linecontent.library .alert-list li.active {
  background: url("../images/check.png") right center no-repeat;
}
.linecontent.library .id-list {
  font-size: 1.2em;
  line-height: 160%;
  margin-bottom: 15px;
}
@media screen and (max-width: 320px) {
  .linecontent.library .id-list {
    font-size: 1em;
  }
}
.linecontent.library .id-list ul {
  margin: 0;
  padding: 0;
}
.linecontent.library .id-list li {
  display: block;
  padding: 8px 0;
  border-bottom: 2px dotted #ccc;
}
.linecontent.library .id-list li span {
  margin-right: 8px;
}
.linecontent.library .id-list li span.delete-id {
  float: right;
  width: 30px;
  height: 30px;
  display: inline-block;
}
.linecontent.library .id-list li span.delete-id a {
  display: block;
}
.linecontent.library .id-list li span.delete-id a img {
  width: 30px;
  height: 30px;
}
.linecontent.library .btn {
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 1.1em;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  width: 48%;
  margin-right: 0.5%;
  border: 0;
}
@media screen and (max-width: 320px) {
  .linecontent.library .btn {
    font-size: 1em;
  }
}
.linecontent.library .btn:nth-of-type(2) {
  margin-right: 0;
  margin-right: 0;
}
.linecontent.library .btn.btn-all {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}
.linecontent.library .btn:hover {
  color: #fff;
}

.linecontent .chart-block {
  margin: 10px 0 20px 0;
}
.linecontent .chart-block .switch {
  margin-bottom: 15px;
}
.linecontent .chart-block .highcart-container {
  background: #fff;
}

.linecontent .year-slide {
  padding: 20px 0;
}
.linecontent .year-slide .slick-prev, .linecontent .year-slide .slick-next {
  opacity: 0.3;
}
.linecontent .year-slide .slick-prev {
  left: 10px !important;
  top: 32%;
  height: 40px !important;
}
.linecontent .year-slide .slick-next {
  right: 10px !important;
  top: 32%;
  height: 40px !important;
}
.linecontent .year-slide .year {
  height: 330px;
  position: relative;
}
.linecontent .year-slide .year .title {
  font-size: 1.4em;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
  margin-top: 10px;
}
.linecontent .year-slide .year .title:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -5px;
  background: #ccc;
}
.linecontent .year-slide .year .title:after {
  content: "";
  width: 100%;
  height: 1px;
  background: #ccc;
  display: block;
  position: absolute;
  bottom: 0;
}
.linecontent .year-slide .year .book-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
}
.linecontent .year-slide .year .book-bg .book-number {
  font-size: 1.3em;
  color: #b94b00;
  margin-bottom: 8px;
}
.linecontent .year-slide .year .book-bg .over {
  font-size: 1em;
  margin-bottom: 10px;
}
.linecontent .year-slide .year .book-bg .more {
  width: 36px;
  height: 36px;
  display: block;
  background: none !important;
  float: none;
  margin: -5px auto 5px auto;
}
.linecontent .year-slide .year .book-bg .more a {
  display: block;
  width: 36px;
  height: 36px;
  background: url(../images/more.png) 0 0 no-repeat;
  background-size: 36px;
}
.linecontent .year-slide .year .book-bg ul {
  margin: 0;
  padding: 0;
}
.linecontent .year-slide .year .book-bg li {
  width: 100%;
  height: 23px;
  display: block;
  background: url(../images/book.png) top center no-repeat;
  text-align: center;
}
.linecontent .year-slide .year .book-bg li:first-child {
  height: auto;
  background: none;
}
.linecontent .year-slide .year .book-bg li:nth-child(even) {
  height: 21px;
  background: url(../images/book2.png) top center no-repeat;
}

.linecontent .book-gallery {
  margin-left: -10px;
  margin-right: -10px;
}
@media only screen and (min-device-width: 480px) {
  .linecontent .book-gallery {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media only screen and (min-device-width: 568px) {
  .linecontent .book-gallery {
    margin-left: -10px;
    margin-right: -10px;
  }
}
@media only screen and (min-device-width: 640px) {
  .linecontent .book-gallery {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media only screen and (min-device-width: 667px) {
  .linecontent .book-gallery {
    margin-left: -10px;
    margin-right: -10px;
  }
}
@media only screen and (min-device-width: 853px) {
  .linecontent .book-gallery {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media only screen and (min-device-width: 966px) {
  .linecontent .book-gallery {
    margin-left: -10px;
    margin-right: -10px;
  }
}
.linecontent .book-gallery .book {
  overflow: hidden;
  display: inline-block;
  margin-bottom: 20px;
  margin-right: -5px;
  vertical-align: top;
  width: 50%;
  padding: 0px 10px;
  box-sizing: border-box;
}
@media only screen and (min-device-width: 480px) {
  .linecontent .book-gallery .book {
    padding: 0px 15px;
  }
}
@media only screen and (min-device-width: 568px) {
  .linecontent .book-gallery .book {
    width: 33.3333333333%;
    padding: 0px 10px;
  }
}
@media only screen and (min-device-width: 640px) {
  .linecontent .book-gallery .book {
    padding: 0px 15px;
  }
}
@media only screen and (min-device-width: 768px) {
  .linecontent .book-gallery .book {
    width: 25%;
    padding: 0px 10px;
  }
}
@media only screen and (min-device-width: 853px) {
  .linecontent .book-gallery .book {
    padding: 0px 15px;
  }
}
@media only screen and (min-device-width: 960px) {
  .linecontent .book-gallery .book {
    width: 25%;
    padding: 0px 10px;
  }
}
@media only screen and (min-device-width: 1024px) {
  .linecontent .book-gallery .book {
    width: 20%;
  }
}
@media only screen and (min-device-width: 1200px) {
  .linecontent .book-gallery .book {
    width: 16.6666666667%;
  }
}
@media only screen and (min-device-width: 1366px) {
  .linecontent .book-gallery .book {
    width: 14.2857142857%;
  }
}
@media only screen and (min-device-width: 1700px) {
  .linecontent .book-gallery .book {
    width: 12.5%;
  }
}
@media only screen and (min-device-width: 1900px) {
  .linecontent .book-gallery .book {
    width: 11.1111111111%;
  }
}
@media only screen and (min-device-width: 2250px) {
  .linecontent .book-gallery .book {
    width: 10%;
  }
}
@media only screen and (min-device-width: 2468px) {
  .linecontent .book-gallery .book {
    width: 9.0909090909%;
  }
}
.linecontent .book-gallery .book .cover, .linecontent .book-gallery .book .title {
  width: 100%;
}
.linecontent .book-gallery .book .cover {
  height: auto;
  overflow: hidden;
  margin-bottom: 10px;
}
.linecontent .book-gallery .book .cover a {
  display: block;
  padding: 2px;
}
.linecontent .book-gallery .book .cover a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 !important;
}
.linecontent .book-gallery .book .cover a:focus img {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.linecontent .book-gallery .book .cover img {
  width: 100%;
  height: auto;
}
.linecontent .book-gallery .book .title {
  line-height: 140%;
  max-height: 44px;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
  color: #000;
  margin-bottom: 10px;
  font-weight: bold;
}
.linecontent .book-gallery .book dl {
  margin: 0 0 10px 0;
  color: #333;
}
.linecontent .book-gallery .book dl dt {
  float: left;
  margin-bottom: 6px;
}
.linecontent .book-gallery .book dl dd {
  margin-bottom: 6px;
}
.nowa .goCenter, .nowa .accesskey {
  display: none;
}
.nowa a:focus, .nowa .scrollToTop:focus {
  box-shadow: none;
}
.nowa .btn:focus, .nowa .header .qrcode_mpbtn a:focus, .nowa footer .footer_accessibility a:focus, .nowa .search_block .searchsystem .form_search input[type=submit]:focus, .nowa .advanced_search .advanced_block .searchsystem ul li a:focus, .nowa .advanced_search .advanced_block .btn_grp input[type=submit]:focus, .nowa .search_blockin .searchsystem .select_left select:focus, .nowa .header .member_record .member_pic a:focus, .nowa .customization02 .search_blockin .form_search input[type=submit]:focus, .nowa .btnstyle.morebg:focus, .nowa .mainrightblock .book_detaildata .bookdata .listdata ul.no_icon li a.btnstyle:focus, .nowa .mystudycontent .mycardlist li a:focus, .nowa .mystudycontent .service_list ul li span a:focus, .nowa .booklist_block .booklist .bookmidblock ul li .addtagbtn:focus, .nowa .booklist_block .booklist .bookmidblock ul li .closebtn:focus, .nowa .tracking_subscription_block .searchsystem ul li a:focus, .nowa .mystudy_sdg_reading .SDG_banner .SDG_img a:focus, .nowa .linecontent .book-gallery .book .cover a:focus, .nowa .linecontent .book-gallery .book .cover a:focus img, .nowa .bookselection_block .bookselection_group .leftblock .bookselection_list ul li a:focus, .nowa .SDG_block .SDG_banner .SDG_img a:focus {
  box-shadow: none !important;
}
.nowa .featured_block .themebook2 ul li a:focus {
  box-shadow: none;
}
.nowa button:focus,
.nowa input[type=button]:focus,
.nowa input[type=submit]:focus,
.nowa input[type=text]:focus,
.nowa input[type=reset]:focus,
.nowa input[type=file]:focus,
.nowa input[type=tel]:focus,
.nowa input[type=email]:focus,
.nowa input[type=password]:focus,
.nowa textarea:focus,
.nowa select:focus {
  box-shadow: none !important;
}
.nowa .customization02 .search_blockin .form_search input[type=submit]:focus {
  background-color: #f0b209 !important;
}

.havewa .goCenter,
.havewa .accesskey {
  display: block;
}
.havewa a:focus,
.havewa .scrollToTop:focus,
.havewa .mystudycontent .mycardlist li a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 inset !important;
}
.havewa .btn:focus,
.havewa .header .qrcode_mpbtn a:focus,
.havewa footer .footer_accessibility a:focus,
.havewa .search_block .searchsystem .form_search input[type=submit]:focus,
.havewa .advanced_search .advanced_block .searchsystem ul li a:focus,
.havewa .advanced_search .advanced_block .btn_grp input[type=submit]:focus,
.havewa .search_blockin .searchsystem .select_left select:focus,
.havewa .header .member_record .member_pic a:focus,
.havewa .customization02 .search_blockin .form_search input[type=submit]:focus,
.havewa .btnstyle.morebg:focus,
.havewa .mainrightblock .book_detaildata .bookdata .listdata ul.no_icon li a.btnstyle:focus,
.havewa .mystudycontent .service_list ul li span a:focus,
.havewa .booklist_block .booklist .bookmidblock ul li .addtagbtn:focus,
.havewa .booklist_block .booklist .bookmidblock ul li .closebtn:focus,
.havewa .tracking_subscription_block .searchsystem ul li a:focus,
.havewa .mystudy_sdg_reading .SDG_banner .SDG_img a:focus,
.havewa .reservation_block .btn_grp a.btnstyle:focus,
.havewa .linecontent .book-gallery .book .cover a:focus,
.havewa .linecontent .book-gallery .book .cover a:focus,
.havewa .linecontent .book-gallery .book .cover a:focus img,
.havewa .bookselection_block .bookselection_group .leftblock .bookselection_list ul li a:focus,
.havewa .SDG_block .SDG_banner .SDG_img a:focus,
.havewa .RSS_button a:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 !important;
}
.havewa .featured_block .themebook2 ul li a:focus {
  box-shadow: 0 0px 0px 3px #fff;
}
.havewa button:focus,
.havewa input[type=button]:focus,
.havewa input[type=submit]:focus,
.havewa input[type=text]:focus,
.havewa input[type=reset]:focus,
.havewa input[type=file]:focus,
.havewa input[type=tel]:focus,
.havewa input[type=email]:focus,
.havewa input[type=password]:focus,
.havewa textarea:focus,
.havewa select:focus {
  box-shadow: 0 0px 0px 2px #f1ad00 !important;
}
.havewa .customization02 .search_blockin .form_search input[type=submit]:focus {
  background-color: #bf8e07;
}
.havewa .theme_recommend .themerecommend_box a:focus,
.havewa .theme_recommend2 .themerecommend_box a:focus {
  box-shadow: 3px 2px 4px 3px #ccc !important;
}

a.goCenter {
  position: absolute;
  top: -2.2em;
  left: 50%;
  margin-left: -480px;
  padding: 0 0.5em;
  height: 2em;
  line-height: 2em;
  background: #fff;
  color: #333;
  text-decoration: none;
  z-index: 999999999999;
  opacity: 0;
  transition: 0.5s;
  border-radius: 0px 0px 4px 4px;
}
@media screen and (max-width: 767px) {
  a.goCenter {
    display: none;
  }
}
a.goCenter:hover, a.goCenter:focus {
  outline: none;
  top: 0;
  opacity: 1;
}

.no-js noscript {
  display: block;
  padding: 0.5em;
  border: 2px solid #005d98;
  background: #FFF;
  color: #666;
  overflow: hidden;
  line-height: 1.45em;
  font-size: 0.813em;
  margin: 0 0.5em 0.5em;
  border-radius: 4px;
  box-sizing: border-box;
  width: 98%;
}
.no-js noscript a {
  color: #005d98;
}
.no-js noscript a:hover, .no-js noscript a:focus {
  color: #dd1f03;
}
.no-js .search noscript {
  margin-left: 1%;
  margin-right: 1%;
}
.no-js .tabSet {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.no-js .tabSet .tabItem {
  width: 100%;
  display: block;
  position: relative;
  color: #000;
  margin-bottom: 0px;
  border-bottom: 3px solid #ddd;
}
.no-js .tabSet .tabItem > a {
  background: none;
  font-size: 1.5em;
  color: #000;
}
.no-js .tabSet .tabItem:before {
  display: none;
}
.no-js .tabSet .tabItem.active {
  color: #000;
  width: 100%;
  display: block;
  position: relative;
  border-bottom: 3px solid #ddd;
}
.no-js .tabSet .tabItem.active > a {
  color: #000;
  background: none;
}
.no-js .tabSet .tabContent {
  width: 100%;
  position: relative;
  display: block;
}
@media screen and (max-width: 991px) {
  .no-js .hotrankings {
    width: 100%;
  }
}
.no-js .hotrankings .sort {
  display: inline-block;
  width: 24%;
}
@media (max-width: 1500px) {
  .no-js .hotrankings .sort {
    width: 23%;
  }
}
@media screen and (max-width: 991px) {
  .no-js .hotrankings .sort {
    width: auto;
  }
}
@media (max-width: 800px) {
  .no-js .hotrankings .sort:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 575px) {
  .no-js .hotrankings .sort:nth-child(3) {
    display: none;
  }
}
@media (max-width: 400px) {
  .no-js .hotrankings .sort:nth-child(2) {
    display: none;
  }
  .no-js .hotrankings .sort:nth-child(1) {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .no-js .sortrecommend {
    margin: 20px 15px;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .no-js .sortrecommend {
    width: 100%;
  }
}
.no-js .sortrecommend .sort {
  display: inline-block;
  width: 32%;
  padding: 0 5px;
}
@media screen and (max-width: 1399px) {
  .no-js .sortrecommend .sort {
    width: 30%;
  }
}
@media screen and (max-width: 991px) {
  .no-js .sortrecommend .sort {
    width: 47%;
  }
  .no-js .sortrecommend .sort:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .no-js .sortrecommend .sort {
    width: 45%;
  }
}
@media (max-width: 480px) {
  .no-js .sortrecommend .sort:nth-child(2) {
    display: none;
  }
  .no-js .sortrecommend .sort:nth-child(1) {
    width: 90%;
  }
}
.no-js .related_links {
  height: auto;
}
.no-js .related_links div {
  text-align: center;
  display: inline-block;
  margin-right: 35px;
}
.no-js .newbooks_block .newbooks {
  height: auto;
}

@media screen and (max-width: 767px) {
  .line .linedel {
    display: none;
  }
  .line .keyboardInputInitiator {
    display: none;
  }
  .line .search_blockin .searchsystem .btn_grp .branchsearch {
    display: none;
  }
  .line .sortbyblock ul li {
    width: 50% !important;
  }
  .line .option {
    display: none;
  }
  .line .booklist_block .booklist .score_star,
  .line .booklist_block .booklist .then {
    display: none;
  }
  .line .booklist_block .booklist .bookleftblock .book .score {
    display: none;
  }
  .line .mystudyname {
    padding: 20px 0 25px;
  }
  .line .mystudyname .member_pic {
    display: none;
  }
  .line .mystudyname .nameblock h2 {
    display: none;
  }
  .line .mystudyname .nameblock .name em span {
    display: block;
    display: inline-block;
  }
  .line .mystudysearchbtn {
    display: none;
  }
}
@media (max-width: 480px) {
  .line .mainrightblock .book_detaildata .bookdata h2.fixed {
    top: 64px;
  }
}

@media print {
  .main,
  .content, body {
    background: none;
  }
  header,
  .fatfooter,
  footer,
  .accesskey,
  .submenu {
    display: none;
  }
  body {
    background: transparent;
    font-size: 12pt;
    float: none;
    width: 100%;
    -webkit-print-color-adjust: exact;
  }
  .container {
    margin: 0px auto;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .cp {
    position: relative;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .main,
  .content {
    position: relative;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    box-shadow: none;
    float: none;
    font-size: 12pt;
    clear: both;
    zoom: 1;
  }
  .main:before, .main:after,
  .content:before,
  .content:after {
    content: "";
    display: table;
  }
  .main:after,
  .content:after {
    clear: both;
  }
  .main img.float_left,
  .content img.float_left {
    float: right;
    max-width: 50%;
    margin: 0px 1em 1em 0;
  }
  .main img.float_right,
  .content img.float_right {
    float: right;
    max-width: 50%;
    margin: 0px 0 1em 1em;
  }
  .main a:link,
  .main a:visited,
  .main a,
  .content a:link,
  .content a:visited,
  .content a {
    background: transparent;
    color: #222;
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
    word-wrap: break-word;
  }
  .main p a,
  .content p a {
    word-wrap: break-word;
  }
  .main p a[href^=http]:after,
  .content p a[href^=http]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
  .main p a[href^="#"]:after,
  .content p a[href^="#"]:after {
    display: none;
  }
  .main abbr[title]:after,
  .content abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .main table,
  .content table {
    background: #FFF;
  }
  .main li,
  .content li {
    content: "» ";
  }
  .file_download a {
    display: block !important;
    clear: both !important;
    width: 100% !important;
  }
  .file_download .update,
  .file_download .file_view {
    float: none !important;
    width: 30% !important;
    display: inline-block !important;
    margin-left: 3em;
  }
  *,
  *:before,
  *:after,
  *:first-letter,
  p:first-line,
  div:first-line,
  blockquote:first-line,
  li:first-line {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  thead {
    display: table-header-group;
    /* 表格即使分頁也會顯示表頭 */
  }
  .lightbox_slider {
    page-break-inside: avoid;
    overflow: hidden;
    height: 6cm;
  }
  .lightbox_slider .cp_slider {
    text-align: center;
  }
  .lightbox_slider .cp_slider .slick-slide {
    width: 30%;
    height: 4cm;
    display: inline-block;
    background: #DEDEDE;
    position: relative;
  }
  .lightbox_slider .cp_slider .slick-slide:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 0px 1px #ccc;
  }
  .lightbox_slider .cp_slider .slick-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 4cm;
    display: inline-block;
    vertical-align: middle;
  }
}/*# sourceMappingURL=hyui.css.map */