@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, #5c656c, #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: rgb(195.8415178571, 27.4709821429, 2.6584821429);
  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_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 rgb(208.25, 208.25, 208.25);
  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: rgb(228.65, 228.65, 228.65);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn:focus {
  background: rgb(228.65, 228.65, 228.65);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn.active {
  background: rgb(228.65, 228.65, 228.65);
  cursor: pointer;
}
.btn:hover, .btn:focus {
  color: #666;
  background-color: rgb(230, 230, 230);
}

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

.btn-blue {
  background: #3e78c0;
  border: 1px solid rgb(55.7755905512, 107.9527559055, 172.7244094488);
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn-blue:hover {
  background: rgb(73.0535433071, 128.0165354331, 196.2464566929);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn-blue:focus {
  background: rgb(73.0535433071, 128.0165354331, 196.2464566929);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn-blue.active {
  background: rgb(73.0535433071, 128.0165354331, 196.2464566929);
  cursor: pointer;
}

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

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

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

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

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

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

.btn-white {
  background: #fff;
  border: 1px solid rgb(242.25, 242.25, 242.25);
  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: rgb(230.35, 230.35, 230.35);
}

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

.btn_active {
  background: #b94b00;
  border: 1px solid rgb(159.5, 64.6621621622, 0);
  color: #fff;
  box-shadow: 0px 2px 2px RGBA(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: 0.2s;
}
.btn_active:hover {
  background: rgb(200.3, 81.2027027027, 0);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.btn_active:focus {
  background: rgb(200.3, 81.2027027027, 0);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.btn_active.active {
  background: rgb(200.3, 81.2027027027, 0);
  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 rgb(72.25, 72.25, 72.25);
  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: rgb(92.65, 92.65, 92.65);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button:focus,
input[type=button]:focus {
  background: rgb(92.65, 92.65, 92.65);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.active,
input[type=button].active {
  background: rgb(92.65, 92.65, 92.65);
  cursor: pointer;
}
button.btn-green,
input[type=button].btn-green {
  background: #107859;
  border: 1px solid rgb(13, 97.5, 72.3125);
  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: rgb(17.8, 133.5, 99.0125);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-green:focus,
input[type=button].btn-green:focus {
  background: rgb(17.8, 133.5, 99.0125);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-green.active,
input[type=button].btn-green.active {
  background: rgb(17.8, 133.5, 99.0125);
  cursor: pointer;
}
button.btn-blue,
input[type=button].btn-blue {
  background: #3e78c0;
  border: 1px solid rgb(55.7755905512, 107.9527559055, 172.7244094488);
  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: rgb(73.0535433071, 128.0165354331, 196.2464566929);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-blue:focus,
input[type=button].btn-blue:focus {
  background: rgb(73.0535433071, 128.0165354331, 196.2464566929);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-blue.active,
input[type=button].btn-blue.active {
  background: rgb(73.0535433071, 128.0165354331, 196.2464566929);
  cursor: pointer;
}
button.btn-yellow,
input[type=button].btn-yellow {
  background: #f1ad00;
  border: 1px solid rgb(215.5, 154.6950207469, 0);
  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: rgb(255, 183.4165975104, 1.3);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-yellow:focus,
input[type=button].btn-yellow:focus {
  background: rgb(255, 183.4165975104, 1.3);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-yellow.active,
input[type=button].btn-yellow.active {
  background: rgb(255, 183.4165975104, 1.3);
  cursor: pointer;
}
button.btn-orange,
input[type=button].btn-orange {
  background: #b94b00;
  border: 1px solid rgb(159.5, 64.6621621622, 0);
  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: rgb(200.3, 81.2027027027, 0);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-orange:focus,
input[type=button].btn-orange:focus {
  background: rgb(200.3, 81.2027027027, 0);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-orange.active,
input[type=button].btn-orange.active {
  background: rgb(200.3, 81.2027027027, 0);
  cursor: pointer;
}
button.btn-red,
input[type=button].btn-red {
  background: #dc0122;
  border: 1px solid rgb(194.6153846154, 0.8846153846, 30.0769230769);
  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: rgb(235.2307692308, 1.0692307692, 36.3538461538);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-red:focus,
input[type=button].btn-red:focus {
  background: rgb(235.2307692308, 1.0692307692, 36.3538461538);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-red.active,
input[type=button].btn-red.active {
  background: rgb(235.2307692308, 1.0692307692, 36.3538461538);
  cursor: pointer;
}
button.btn-purple,
input[type=button].btn-purple {
  background: #aa5ac5;
  border: 1px solid rgb(160.2802690583, 71.1322869955, 190.3677130045);
  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: rgb(175.831838565, 101.3206278027, 200.9793721973);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-purple:focus,
input[type=button].btn-purple:focus {
  background: rgb(175.831838565, 101.3206278027, 200.9793721973);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-purple.active,
input[type=button].btn-purple.active {
  background: rgb(175.831838565, 101.3206278027, 200.9793721973);
  cursor: pointer;
}
button.btn-gray,
input[type=button].btn-gray {
  background: #555;
  border: 1px solid rgb(72.25, 72.25, 72.25);
  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: rgb(92.65, 92.65, 92.65);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-gray:focus,
input[type=button].btn-gray:focus {
  background: rgb(92.65, 92.65, 92.65);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-gray.active,
input[type=button].btn-gray.active {
  background: rgb(92.65, 92.65, 92.65);
  cursor: pointer;
}
button.btn-white,
input[type=button].btn-white {
  background: #fff;
  border: 1px solid rgb(242.25, 242.25, 242.25);
  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: rgb(230.35, 230.35, 230.35);
}
button.btn-greenline,
input[type=button].btn-greenline {
  background: #06c755;
  border: 1px solid rgb(5.2536585366, 174.2463414634, 74.4268292683);
  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: rgb(6.447804878, 213.852195122, 91.343902439);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn-greenline:focus,
input[type=button].btn-greenline:focus {
  background: rgb(6.447804878, 213.852195122, 91.343902439);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn-greenline.active,
input[type=button].btn-greenline.active {
  background: rgb(6.447804878, 213.852195122, 91.343902439);
  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 rgb(159.5, 64.6621621622, 0);
  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: rgb(200.3, 81.2027027027, 0);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
button.btn_active:focus,
input[type=button].btn_active:focus {
  background: rgb(200.3, 81.2027027027, 0);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
button.btn_active.active,
input[type=button].btn_active.active {
  background: rgb(200.3, 81.2027027027, 0);
  cursor: pointer;
}

input[type=submit] {
  background: #005d98;
  border: 1px solid rgb(0, 77.3980263158, 126.5);
  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: rgb(0, 102.3611842105, 167.3);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
input[type=submit]:focus {
  background: rgb(0, 102.3611842105, 167.3);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
input[type=submit].active {
  background: rgb(0, 102.3611842105, 167.3);
  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;
  resize: none;
}
@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 rgb(72.25, 72.25, 72.25);
  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: rgb(92.65, 92.65, 92.65);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
input[type=reset]:focus {
  background: rgb(92.65, 92.65, 92.65);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
input[type=reset].active {
  background: rgb(92.65, 92.65, 92.65);
  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: rgb(249.25, 249.25, 249.25);
  color: rgb(185.5, 185.5, 185.5);
  border-color: rgb(185.5, 185.5, 185.5);
}
input[readonly] ~ label,
input[disable] ~ label {
  color: rgb(185.5, 185.5, 185.5);
}
input[readonly]:hover, input[readonly]:focus,
input[disable]:hover,
input[disable]:focus {
  border-color: rgb(185.5, 185.5, 185.5);
  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 rgb(72.25, 72.25, 72.25);
  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: rgb(92.65, 92.65, 92.65);
  box-shadow: none;
  cursor: pointer;
  color: #fff;
}
.upload_grp .upload_btn:focus {
  background: rgb(92.65, 92.65, 92.65);
  box-shadow: 0 0px 0px 2px #f1ad00;
  cursor: pointer;
  color: #fff;
}
.upload_grp .upload_btn.active {
  background: rgb(92.65, 92.65, 92.65);
  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 3px;
  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: rgb(254.9053254438, 251.3076923077, 239.0946745562);
  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: rgb(254.3319526627, 228.9461538462, 142.7680473373);
  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: rgb(0, 61.7960526316, 101);
}
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: rgb(0, 61.7960526316, 101);
}
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: 10;
}
.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: rgb(160.097826087, 133.6739130435, 54.402173913);
  color: #fff;
}
.category a.here {
  background: rgb(160.097826087, 133.6739130435, 54.402173913);
  color: #fff;
}
.category a.here:before {
  content: "";
  border: 10px solid rgb(160.097826087, 133.6739130435, 54.402173913);
  border-color: rgb(160.097826087, 133.6739130435, 54.402173913) 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;
  overflow: auto;
  /* 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;
}

body:has(.customization04):has(.wrapperin) {
  background-color: #f3efe8;
}

.wrapper {
  max-width: 1400px;
  margin: 0px auto;
  padding: 55px 0 0 0;
  position: relative;
  background-color: #fff;
}
.wrapper.customization03, .wrapper.customization04 {
  width: 100%;
  max-width: 100%;
}
.wrapper.customization03 .header, .wrapper.customization04 .header {
  width: 100%;
}
.wrapper.customization03 .header .container, .wrapper.customization04 .header .container {
  max-width: 1400px !important;
}
.wrapper.customization03 .main_mp, .wrapper.customization04 .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, .wrapper.customization04 .main_mp .related_block .container,
.wrapper.customization04 .main_mp .newbooks_block .container,
.wrapper.customization04 .main_mp .featured_block .container,
.wrapper.customization04 .main_mp .hotrankings_block .container {
  max-width: 1400px !important;
}
.wrapper.customization03 .main_mp .search_block, .wrapper.customization04 .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: rgb(0, 61.7960526316, 101);
  border: 2px solid rgb(0, 61.7960526316, 101);
}
.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: rgb(118.8618421053, 97.4934210526, 84.1381578947);
  border: 2px solid rgb(118.8618421053, 97.4934210526, 84.1381578947);
}
.btnstyle.orangebg {
  background-color: rgb(183.7, 74.772361809, 0);
  border: 2px solid rgb(183.7, 74.772361809, 0);
  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 .query_system_block .AI_situational_btn {
  left: 200px !important;
}
.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.4em;
}

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

.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: rgb(0, 124.2039473684, 203);
}

.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 .explainblock {
  padding: 1em;
  background-color: #f3f3f3;
  border-radius: 5px;
  margin: 10px 0;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .explainblock p {
  font-weight: bold;
}
.lightboxstyle .lightboxstyle_block .lightbox_data .explainblock label {
  display: block;
}
.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: rgb(210.4150197628, 17.0849802372, 41.3636363636);
}
.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: rgb(210.4150197628, 17.0849802372, 41.3636363636);
}
.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: rgb(137.6554878049, 90.362804878, 0.8445121951);
}
.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: rgb(87.1141732283, 100.7007874016, 0.7992125984);
}
.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: rgb(179.7012987013, 25.7987012987, 48.038961039);
}
.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: rgb(139.2529880478, 66.4820717131, 159.0179282869);
}
.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: rgb(0, 108.1803797468, 132.5);
}
.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: rgb(133.6528497409, 97.2020725389, 33.8471502591);
}
.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: rgb(128.0172413793, 20.4827586207, 47.7931034483);
}
.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: rgb(164.765625, 78.046875, 1.734375);
}
.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: rgb(201.6768292683, 18.8231707317, 112.9390243902);
}
.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: rgb(115.6964285714, 100.9081632653, 54.8035714286);
}
.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: rgb(140.5584415584, 95.1883116883, 64.9415584416);
}
.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: rgb(51.9895287958, 113.5104712042, 90.1151832461);
}
.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: rgb(0.8598901099, 106.6263736264, 155.6401098901);
}
.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: rgb(27.1137724551, 114.3862275449, 53.380239521);
}
.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: rgb(0, 68.25, 110.5);
}
.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: rgb(13.1294642857, 40.1607142857, 73.3705357143);
}
.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 .loading_block {
  width: 107px;
  height: 107px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background-color: #fff;
  border-radius: 5px;
}
.lightboxAI_situational .loading_block img {
  width: 107px;
  height: 107px;
  border-radius: 5px;
}
.lightboxAI_situational .content {
  text-align: left;
  position: relative;
}
.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 .recordinformation_block {
  display: flex;
  justify-content: space-between;
}
.lightboxAI_situational .content .remainingwords {
  flex: 0 0 auto;
  color: #dc0122;
  font-size: 0.875em;
}
.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;
  text-align: left;
  position: relative;
}
.lightboxAI_situational .content .query_records_group .query_records_list ul li:last-child {
  margin-bottom: 0;
}
.lightboxAI_situational .content .query_records_group .query_records_list ul li a {
  display: block;
  color: #333;
  padding: 0.5em 0.8em;
  margin-right: 40px;
  transition: 0.5s;
}
.lightboxAI_situational .content .query_records_group .query_records_list ul li a:hover {
  background-color: #005d98;
  color: #fff;
}
.lightboxAI_situational .content .query_records_group .query_records_list ul li .del {
  position: absolute;
  right: 0.5em;
  top: 0.3em;
  bottom: 0;
  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: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border: none;
  box-shadow: none;
  line-height: 0;
}
.lightboxAI_situational .content .query_records_group .query_records_list ul li .del:hover {
  background-color: #eee;
  border-radius: 0 5px 5px 0;
}
.lightboxAI_situational .content .query_records_group .query_records_list .more {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.lightboxAI_situational .content .query_records_group .query_records_list .more a {
  display: block;
  padding: 0 0 0 1em;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  transition: 0.5s;
  position: relative;
}
.lightboxAI_situational .content .query_records_group .query_records_list .more a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  border: 6px solid #005d98;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  transition: 0.5s;
}
.lightboxAI_situational .content .query_records_group .query_records_list .more a:hover {
  color: #005d98;
}
.lightboxAI_situational .content .query_records_group .query_records_list .more a:hover:before {
  left: 3px;
}
.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);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  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) {
  margin-bottom: 2.5em;
}
.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 (max-width: 480px) {
  .search_block .searchsystem .search_fieldtype {
    display: block;
  }
  .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;
  display: flex;
  flex-wrap: wrap;
}
.search_block .searchsystem .query_system_block:has(.titlename) {
  padding: 0 20px 10px;
}
.search_block .searchsystem .query_system_block .AI_situational_btn {
  flex: 0 0 auto;
  position: absolute;
  top: -1.1em;
  left: 185px;
  border-radius: 50px;
  font-size: 1rem;
  margin: 0;
  background-color: #fff;
  color: #005d98;
  border: none;
  padding: 0.5em 1.5em;
  box-shadow: 0 0 0 2px #005d98 inset;
}
.search_block .searchsystem .query_system_block .AI_situational_btn:hover, .search_block .searchsystem .query_system_block .AI_situational_btn:focus {
  background-color: #005d98;
  color: #fff;
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .query_system_block .AI_situational_btn {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto 0.5em;
    width: 100%;
  }
}
.search_block .searchsystem .query_system_block .titlename {
  flex: 0 0 auto;
  font-size: 1.063em;
  background-color: #005d98;
  color: #fff;
  margin-right: 1em;
  margin-bottom: 1em;
  margin-top: -1.5em;
  padding: 0.7em 1.5em 0.7em 2.5em;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../images/icon_search01.png");
  background-position: 1em center;
  background-repeat: no-repeat;
  background-size: 18px;
}
.search_block .searchsystem .form_search {
  flex: 1 1 auto;
  flex-basis: 100%;
  background-color: #fff;
  position: relative;
  height: 48px;
  margin: 0 auto 10px;
  text-align: left;
  padding: 0px;
}
@media screen and (max-width: 575px) {
  .search_block .searchsystem .form_search {
    margin: 0 auto 15px;
  }
}
.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: rgb(193.8916256158, 35.3448275862, 11.1083743842);
}
.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: rgb(0, 71.1572368421, 116.3);
  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: rgb(0, 117.9631578947, 192.8);
}
.related_block .related_links div a:hover span {
  transform: scale(1.1, 1.1);
  background-color: rgb(0, 117.9631578947, 192.8);
}
.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: rgb(210.5, 85.3378378378, 0);
}
.related_block .related_links div a.new:hover span {
  background-color: rgb(210.5, 85.3378378378, 0);
}
@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: rgb(255, 200.6846473029, 62.5);
}
.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, #5c656c, #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: rgb(0, 77.3980263158, 126.5);
}
.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: rgb(254.7544378698, 245.4230769231, 213.7455621302);
}
.booklist_block .booklist:last-child {
  border-bottom: none;
}
.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 #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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-radius: 5px;
  padding: 0;
  position: relative;
  width: 19%;
  float: left;
  margin: 0 0.4% 15px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
}
@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 #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  padding: 20px;
  border-radius: 5px;
  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 #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  padding: 0px;
  border-radius: 5px;
  margin-bottom: 15px;
}
.hotqa_block .related_linksblock .linkstitle {
  font-size: 1.25em;
  text-align: center;
  background-color: #666;
  color: #fff;
  padding: 10px;
  border-radius: 5px 5px 0 0;
}
.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: rgb(255, 207.8796680498, 88);
  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: 5px;
  padding: 30px 50px 20px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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;
  padding: 20px 50px 20px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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: rgb(255, 207.8796680498, 88);
  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: rgb(194.6153846154, 0.8846153846, 30.0769230769);
}

.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: rgb(255, 207.8796680498, 88);
  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;
  padding: 20px 50px 20px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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;
  padding: 20px 50px 20px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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: 5px;
  padding: 50px 30px 20px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .lp_content .listconten {
    padding: 40px 20px 20px;
  }
}
.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;
  padding: 0;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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:last-child {
  border-bottom: none;
}
.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;
  padding: 20px 50px 20px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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%;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  min-height: 100px;
  padding: 20px;
  border-radius: 5px;
}
.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: rgb(103.9309210526, 85.2467105263, 73.5690789474);
}

.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: rgb(210.4150197628, 17.0849802372, 41.3636363636);
}
.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: rgb(210.4150197628, 17.0849802372, 41.3636363636);
}
.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: rgb(137.6554878049, 90.362804878, 0.8445121951);
}
.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: rgb(87.1141732283, 100.7007874016, 0.7992125984);
}
.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: rgb(179.7012987013, 25.7987012987, 48.038961039);
}
.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: rgb(139.2529880478, 66.4820717131, 159.0179282869);
}
.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: rgb(0, 108.1803797468, 132.5);
}
.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: rgb(133.6528497409, 97.2020725389, 33.8471502591);
}
.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: rgb(128.0172413793, 20.4827586207, 47.7931034483);
}
.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: rgb(164.765625, 78.046875, 1.734375);
}
.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: rgb(201.6768292683, 18.8231707317, 112.9390243902);
}
.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: rgb(115.6964285714, 100.9081632653, 54.8035714286);
}
.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: rgb(140.5584415584, 95.1883116883, 64.9415584416);
}
.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: rgb(51.9895287958, 113.5104712042, 90.1151832461);
}
.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: rgb(0.8598901099, 106.6263736264, 155.6401098901);
}
.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: rgb(27.1137724551, 114.3862275449, 53.380239521);
}
.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: rgb(0, 68.25, 110.5);
}
.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: rgb(13.1294642857, 40.1607142857, 73.3705357143);
}
.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: 20px 50px;
  background: #eee;
  border-radius: 5px;
}
@media screen and (max-width: 767px) {
  .sitemap .accesskeyDefine {
    padding: 20px 40px;
  }
}
.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: rgb(193.8916256158, 35.3448275862, 11.1083743842);
}
.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 rgb(95.2075892857, 13.3549107143, 1.2924107143);
}
.search_blockin .searchsystem .form_advanced .btn_grp input[type=submit]:hover {
  background-color: rgb(188.9004291845, 27.2214592275, 3.2995708155);
}

.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;
  padding: 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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%;
  }
}
@media screen and (max-width: 767px) {
  .advanced_search .advanced_block {
    padding: 20px;
  }
}
.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 rgb(95.2075892857, 13.3549107143, 1.2924107143);
}
.advanced_search .advanced_block .btn_grp input[type=submit]:hover {
  background: rgb(180.7464285714, 25.3535714286, 2.4535714286);
}
.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: rgb(255, 186.2946058091, 11.5);
}
.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: rgb(143.8461538462, 0.6538461538, 22.2307692308);
  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: rgb(228.248, 35.352, 50.84);
}
.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 rgb(228.248, 35.352, 50.84) 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;
  padding: 0px 30px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  box-sizing: border-box;
}
.write_data h3 {
  color: #dd1f03;
}
@media screen and (max-width: 767px) {
  .write_data {
    padding: 20px;
  }
}

.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;
  padding: 20px 20px 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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 30px;
  box-sizing: border-box;
  line-height: 1.7em;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  font-size: 1.063em;
}
@media screen and (max-width: 767px) {
  .explain_group {
    padding: 20px;
  }
}

.security_deposit_group {
  flex: none;
  flex-basis: 60%;
  max-width: 60%;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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-radius: 5px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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: rgb(255, 186.2946058091, 11.5);
}

.super_business_block {
  margin-bottom: 20px;
}
.super_business_block .super_business_group {
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  position: relative;
  box-sizing: border-box;
  padding: 30px;
  border-radius: 5px;
}
.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;
}
.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;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  padding: 30px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .stored_value_block .stored_value_group {
    padding: 20px;
  }
}
.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;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  padding: 30px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .reader_form_group {
    padding: 20px;
  }
}

.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;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  line-height: 1.55em;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .mystudy_sdg_reading .SDG_explain {
    padding: 20px;
  }
}
.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: 5px;
  margin: 2em auto;
  padding: 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
}
.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, .featuredTopics_block 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;
  padding: 30px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  box-sizing: border-box;
}
.network_certificate .certificate_content h3 {
  margin: 0 0 20px;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .network_certificate .certificate_content {
    padding: 20px;
  }
}
.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, #5c656c, #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;
  padding: 30px 50px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .forgetpassword_block .forget_password {
    padding: 30px 30px;
  }
}
.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;
  padding: 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .onlinesearch_block .onlinesearch {
    padding: 20px;
  }
}
.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: rgb(193.8916256158, 35.3448275862, 11.1083743842);
}
.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;
  box-shadow: 0 0 10px 0px #ddd inset;
  border-radius: 5px;
}
@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, #5c656c, #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: rgb(193.8916256158, 35.3448275862, 11.1083743842);
}
.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-radius: 0 10px 10px 10px;
  height: 210px;
  margin-top: 10px;
  transition: 0.2s;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
}
.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 #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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;
  padding: 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
}
@media screen and (max-width: 767px) {
  .manualrecommend_block {
    padding: 20px;
  }
}

.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;
  background-color: #eee;
}
.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 30px 5px;
  border-radius: 5px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd 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 #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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: 0 0 10px 0px #ddd inset;
}
.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 #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
}
.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;
  padding: 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .diversified_block .diversified_content {
    padding: 20px;
  }
}
.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 #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  padding: 30px 30px 0px;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .mobile_lending_block {
    padding: 30px 20px 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: rgb(0, 108.6019736842, 177.5);
}
.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: 30px;
  text-align: left;
  background-color: #eee;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .read_passbook_block .read_passbook_content {
    padding: 20px 20px;
  }
}
.read_passbook_block .read_passbook_content.eventDescription {
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
}
.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.16) 0px 1px 4px;
  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;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  border-radius: 5px;
  padding: 15px;
  background-color: #fff;
  box-sizing: border-box;
  transition: 0.5s;
}
.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 20px;
  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.16) 0px 1px 4px;
}
.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.16) 0px 1px 4px;
}
.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.3) 0px 1px 4px;
  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;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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(0, 0, 0, 0.16) 0px 1px 4px;
  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 30px;
  margin: 0 35px 60px;
  box-sizing: border-box;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  border-radius: 5px;
}
@media screen and (max-width: 767px) {
  .AI_block {
    margin: 0 20px 60px;
    padding: 30px 20px;
  }
}
.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: rgb(0, 77.3980263158, 126.5);
}
.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: rgb(0, 77.3980263158, 126.5);
  left: 0;
  top: 0;
  border-radius: 5px;
}
.AIgptgroup .directions .contentother button.shiny:hover, .AIgptgroup .directions .contentother button.shiny:focus {
  background-color: rgb(0, 77.3980263158, 126.5);
}
.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 rgb(210.5, 85.3378378378, 0);
}
.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: rgb(253.6982248521, 204.2307692308, 36.3017751479);
}
.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: rgb(169.2307692308, 0.7692307692, 26.1538461538);
}
.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 30px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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: rgb(255, 186.2946058091, 11.5);
}
.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 30px;
  text-align: left;
  background-color: #eee;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .sharedreadingbox_block .readingboxtab_content {
    padding: 20px 20px;
  }
}
.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;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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%;
  }
}

.featured_area_block {
  overflow: hidden;
  padding: 20px 30px;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .featured_area_block {
    padding: 20px 20px;
  }
}
.featured_area_block .featured_area_tab {
  margin: 30px 10px 30px;
  box-sizing: border-box;
}
@media screen and (max-width: 991px) {
  .featured_area_block .featured_area_tab {
    width: 90%;
    margin: 30px auto;
  }
}
@media (max-width: 480px) {
  .featured_area_block .featured_area_tab {
    width: 75%;
  }
}
.featured_area_block .featured_area_tab .sort {
  padding: 0 5px;
}
.featured_area_block .featured_area_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;
}
.featured_area_block .featured_area_tab .sort a:hover {
  background-image: none;
  background-color: #f1ad00;
  color: #000;
}
.featured_area_block .featured_area_tab .sort a.here {
  background: #f1ad00;
  color: #000;
}
.featured_area_block .featured_area_tab .sort a.here:focus {
  box-shadow: 0 0px 0px 2px #f1ad00;
}
.featured_area_block .featured_area_tab .slick-next {
  right: -45px;
  top: 0;
}
.featured_area_block .featured_area_tab .slick-prev {
  left: -45px;
  top: 0;
}
@media (max-width: 400px) {
  .featured_area_block .featured_area_tab .slick-next {
    right: -36px;
  }
  .featured_area_block .featured_area_tab .slick-prev {
    left: -36px;
  }
}
.featured_area_block .featured_area_sort {
  display: flex;
  justify-content: center;
  margin: 20px 0 30px;
  flex-wrap: wrap;
}
.featured_area_block .featured_area_sort div {
  margin: 0 3px 5px;
}
.featured_area_block .featured_area_sort div a {
  display: block;
  font-size: 1.313em;
  font-weight: 500;
  color: #333;
  padding: 0.5em 1em;
  border-radius: 5px;
  text-align: center;
}
.featured_area_block .featured_area_sort div a:hover, .featured_area_block .featured_area_sort div a.here {
  color: #005d98;
  text-decoration: underline;
  text-underline-offset: 15px;
}
.featured_area_block .featured_area_search {
  margin: 20px;
  background-color: #eee;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
}
.featured_area_block .featured_area_search .form_grp {
  border-bottom: none;
}
.featured_area_block .featured_area_search .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) {
  .featured_area_block .featured_area_search .form_title {
    width: 100%;
    text-align: left;
  }
}
.featured_area_block .featured_area_search .form_content {
  display: flex;
  align-items: center;
}
.featured_area_block .featured_area_search .form_content input[type=text] {
  margin: 0.25em 0.3em;
  padding: 0.6em;
}
@media screen and (max-width: 991px) {
  .featured_area_block .featured_area_search .form_content {
    width: 100%;
  }
}
.featured_area_block .featured_area_content {
  margin: 10px 20px 15px;
  border-radius: 5px;
  float: none;
  clear: both;
  padding: 30px;
  text-align: left;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
}
@media screen and (max-width: 767px) {
  .featured_area_block .featured_area_content {
    padding: 20px 20px;
  }
}
.featured_area_block .featured_area_content .bookselection_list ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.featured_area_block .featured_area_content .bookselection_list ul li {
  flex: none;
  flex-basis: 17%;
  width: 17%;
  margin: 0 1.5% 25px;
  position: relative;
}
@media (max-width: 1200px) {
  .featured_area_block .featured_area_content .bookselection_list ul li {
    flex-basis: 21%;
    width: 21%;
    margin: 0 2% 25px;
  }
}
@media (max-width: 900px) {
  .featured_area_block .featured_area_content .bookselection_list ul li {
    flex-basis: 29%;
    width: 29%;
    margin: 0 2.16% 25px;
  }
}
@media screen and (max-width: 767px) {
  .featured_area_block .featured_area_content .bookselection_list ul li {
    flex-basis: 29%;
    width: 29%;
    margin: 0 2.16% 25px;
  }
}
@media (max-width: 650px) {
  .featured_area_block .featured_area_content .bookselection_list ul li {
    flex-basis: 45%;
    width: 45%;
    margin: 0 2.5% 25px;
  }
}
@media (max-width: 400px) {
  .featured_area_block .featured_area_content .bookselection_list ul li {
    flex-basis: 210px;
    width: 210px;
    margin: 0 auto 25px;
  }
}
.featured_area_block .featured_area_content .bookselection_list ul li a {
  color: #000;
  display: block;
  padding: 3px;
  box-sizing: border-box;
}
.featured_area_block .featured_area_content .bookselection_list ul li a:hover {
  color: #dd1f03;
}
.featured_area_block .featured_area_content .bookselection_list ul li a .image {
  height: 210px;
  background-color: #fff;
  position: relative;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.featured_area_block .featured_area_content .bookselection_list ul li a .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  z-index: 8;
  display: block;
}
.featured_area_block .featured_area_content .bookselection_list ul li a span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.125em;
  display: block;
}
.featured_area_block .featured_area_content .bookselection_list ul li .image_titlepage,
.featured_area_block .featured_area_content .bookselection_list ul li .image_titlepage2 {
  margin: 0 auto 15px;
  height: 210px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.featured_area_block .featured_area_content .bookselection_list ul li .image_titlepage:before,
.featured_area_block .featured_area_content .bookselection_list ul li .image_titlepage2:before {
  height: 120px;
}

.featured_videos_list {
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 900px) {
  .featured_videos_list {
    display: block;
  }
}
.featured_videos_list .videos_list {
  flex: auto;
  flex-basis: 49%;
  max-width: 49%;
  position: relative;
  margin-bottom: 20px;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  display: flex;
  padding: 20px;
}
.featured_videos_list .videos_list:hover {
  background-color: #ffc;
}
@media (max-width: 900px) {
  .featured_videos_list .videos_list {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .featured_videos_list .videos_list {
    display: block;
    margin: 0 auto 20px;
  }
}
.featured_videos_list .videos_list .image {
  flex: 0 0 auto;
  flex-basis: 150px;
  max-width: 150px;
  margin-right: 20px;
}
.featured_videos_list .videos_list .image img {
  max-width: 150px;
  max-height: 170px;
}
@media (max-width: 480px) {
  .featured_videos_list .videos_list .image {
    margin: 0 auto 20px;
  }
}
.featured_videos_list .videos_list .content {
  flex: 1 1 auto;
  overflow: hidden;
}
.featured_videos_list .videos_list .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: 0;
}
@media (max-width: 480px) {
  .featured_videos_list .videos_list .content .title {
    text-align: center;
  }
}
.featured_videos_list .videos_list .content p {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  height: calc(1.5em * 3);
}
.featured_videos_list .videos_list .content .datalist {
  margin: 0 0 15px;
  padding: 0;
  list-style-type: none;
}
.featured_videos_list .videos_list .content .datalist li {
  margin: 0 0 5px;
}
.featured_videos_list .videos_list .content .datalist li em {
  font-style: normal;
  color: #b94b00;
  margin-right: 5px;
  font-weight: 600;
}
.featured_videos_list .videos_list .content .linklist ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  justify-content: flex-start;
}
@media (max-width: 480px) {
  .featured_videos_list .videos_list .content .linklist ul {
    justify-content: center;
  }
}
.featured_videos_list .videos_list .content .linklist ul li {
  margin-right: 0.5em;
  margin-bottom: 5px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 50px;
  background: #fff;
}
.featured_videos_list .videos_list .content .linklist ul li:hover {
  background: #eee;
  background: linear-gradient(180deg, rgb(238, 238, 238) 0%, rgb(204, 204, 204) 100%);
}
.featured_videos_list .videos_list .content .linklist 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;
  color: #666;
}
.featured_videos_list .videos_list .content .linklist ul li a:hover {
  color: #000;
}
.featured_videos_list .videos_list .content .linklist ul li.moreinformation a {
  background-image: url("../images/feature_options03.svg");
  background-repeat: no-repeat;
  background-position: 10px 8px;
  background-size: 13px;
}
.featured_videos_list .videos_list .content .linklist ul li.scanqrcode_btn a {
  padding: 0.2em 0.8em;
  display: block;
}
.featured_videos_list .videos_list .content .linklist ul li.scanqrcode_btn a img {
  width: 20px;
  margin-right: 0;
  margin-top: -2px;
  vertical-align: middle;
}

.videosqrcode_btn {
  font-size: 0;
  background-image: url("../images/qr_code_icon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  min-width: auto;
  transform: translateY(-3px);
  margin-left: 15px;
  display: inline-block;
}
.videosqrcode_btn:hover, .videosqrcode_btn:focus {
  background-color: #fff;
  background-image: url("../images/qr_code_icon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
}

.featuredTopics_block {
  width: 90%;
  margin: 40px auto 60px;
  box-sizing: border-box;
}
.featuredTopics_block h2 {
  margin-bottom: 30px;
}

.featuredTopics_list {
  padding: 2em 0;
}
.featuredTopics_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.featuredTopics_list ul li {
  margin: 0 1.5% 25px;
}
.featuredTopics_list ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.5s;
}
.featuredTopics_list ul li a .pic {
  width: 180px;
  height: 180px;
  display: flex;
  border: 1px solid #eee;
  background: #dddcd9;
  background: linear-gradient(180deg, rgb(221, 220, 217) 0%, rgb(248, 248, 246) 56%, rgb(221, 220, 217) 100%);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;
  box-sizing: border-box;
  transition: 0.5s;
}
.featuredTopics_list ul li a .pic img {
  width: 100px;
  height: 100px;
}
.featuredTopics_list ul li a span {
  font-size: 1.25em;
  font-weight: bolder;
  color: #333;
  margin-top: 10px;
}
.featuredTopics_list ul li a:hover {
  transform: translateY(-10px);
}
.featuredTopics_list ul li a:hover .pic {
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.featuredTopics_list ul li a:hover span {
  color: #005d98;
}

.linecontent {
  padding: 0;
  position: relative;
}
.linecontent.mobile-card {
  padding: 0;
  margin: 40px auto 60px;
  width: 90%;
  padding: 40px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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, #dfd7c3, #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%;
  padding: 40px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0px #ddd inset;
  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 :focus:not(:focus-visible) {
  box-shadow: none; /* 滑鼠點擊時不顯示 */
}
.havewa .goCenter,
.havewa .accesskey {
  display: block;
}
.havewa a:focus-visible,
.havewa .scrollToTop:focus-visible,
.havewa .mystudycontent .mycardlist li a:focus-visible {
  box-shadow: 0 0px 0px 2px #f1ad00 inset !important;
}
.havewa .btn:focus-visible,
.havewa .header .qrcode_mpbtn a:focus-visible,
.havewa footer .footer_accessibility a:focus-visible,
.havewa .search_block .searchsystem .form_search input[type=submit]:focus-visible,
.havewa .advanced_search .advanced_block .searchsystem ul li a:focus-visible,
.havewa .advanced_search .advanced_block .btn_grp input[type=submit]:focus-visible,
.havewa .search_blockin .searchsystem .select_left select:focus-visible,
.havewa .header .member_record .member_pic a:focus-visible,
.havewa .customization02 .search_blockin .form_search input[type=submit]:focus-visible,
.havewa .btnstyle.morebg:focus-visible,
.havewa .mainrightblock .book_detaildata .bookdata .listdata ul.no_icon li a.btnstyle:focus-visible,
.havewa .mystudycontent .service_list ul li span a:focus-visible,
.havewa .booklist_block .booklist .bookmidblock ul li .addtagbtn:focus-visible,
.havewa .booklist_block .booklist .bookmidblock ul li .closebtn:focus-visible,
.havewa .tracking_subscription_block .searchsystem ul li a:focus-visible,
.havewa .mystudy_sdg_reading .SDG_banner .SDG_img a:focus-visible,
.havewa .reservation_block .btn_grp a.btnstyle:focus-visible,
.havewa .linecontent .book-gallery .book .cover a:focus-visible,
.havewa .linecontent .book-gallery .book .cover a:focus-visible,
.havewa .linecontent .book-gallery .book .cover a:focus-visible img,
.havewa .bookselection_block .bookselection_group .leftblock .bookselection_list ul li a:focus-visible,
.havewa .SDG_block .SDG_banner .SDG_img a:focus-visible,
.havewa .RSS_button a:focus-visible {
  box-shadow: 0 0px 0px 2px #f1ad00 !important;
}
.havewa .featured_block .themebook2 ul li a:focus-visible {
  box-shadow: 0 0px 0px 3px #fff;
}
.havewa button:focus-visible,
.havewa input[type=button]:focus-visible,
.havewa input[type=submit]:focus-visible,
.havewa input[type=text]:focus-visible,
.havewa input[type=reset]:focus-visible,
.havewa input[type=file]:focus-visible,
.havewa input[type=tel]:focus-visible,
.havewa input[type=email]:focus-visible,
.havewa input[type=password]:focus-visible,
.havewa textarea:focus-visible,
.havewa select:focus-visible {
  box-shadow: 0 0px 0px 2px #f1ad00 !important;
}
.havewa .customization02 .search_blockin .form_search input[type=submit]:focus-visible {
  background-color: #bf8e07;
}
.havewa .theme_recommend .themerecommend_box a:focus-visible,
.havewa .theme_recommend2 .themerecommend_box a:focus-visible {
  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 */