@charset "utf-8";
/**
 * CSS Document
 * ==========================================================================
 * 版權所有 2021 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Date: 2021-07 $
 * $Description: Pages $
 */
/* --------------------------------------------
   內頁/共用樣式
-------------------------------------------- */
/* 橫幅 */
.ban {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 320px;
}
.ban .pic {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.ban .pic:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  z-index: 2;
}
.ban .pic img {
  display: block;
  width: 100%;
  height: auto;
}
.ban .headline {
  position: absolute;
  z-index: 5;
  top: 0;
  padding-top: 60px;
}
.ban.second .headline {
  padding-top: 70px;
}
.ban.black .htit-s,
.ban.black .htit-b {
  color: #000;
}
@media only screen and (min-width:992px) {
  .ban .pic:before {
    display: none;
  }
  .ban .headline {
    padding-top: 0;
    top: 28%;
  }
  .ban.second .headline {
    padding-top: 0;
    top: 25%;
  }
}
@media only screen and (max-width:1280px) {
  .ban {
    padding-bottom: 200px;
  }
}
@media only screen and (max-width:991px) {
  .ban.black .htit-s,
  .ban.black .htit-b {
    color: #fff;
  }
}
@media only screen and (min-width:1281px) {
  .ban .headline {
    top: 50%;
  }
  .ban.second .headline {
    top: 45%;
  }
}
@media only screen and (max-width:767px) {
  .ban {
    padding-bottom: 160px;
  }
}
/* 大標 */
.headline {
  width: 100%;
  text-align: center;
}
.headline .htit-b,
.headline .htit-s {
  margin: 0;
  color: #fff;
  line-height: 1.2;
}
.headline .htit-b {
  font-size: 1.5625rem;
}
.headline .htit-s {
  margin-top: 15px;
  font-size: 1.125rem;
}
.ban-down {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  text-align: center;
}
.ban-menu .title {
  display: none;
}
.ban-menu .links-area {
  font-size: 0;
}
.ban-menu .links-area a {
  display: inline-block;
  font-size: 0.875rem;
  padding: 10px 25px;
  color: #444;
  background-color: #FFF;
  vertical-align: top;
  text-decoration: none;
}
.ban-menu .links-area a.current,
.ban-menu .links-area a:hover {
  color: #fff;
  background-color: #cc1d24;
  text-decoration: none;
}
@media only screen and (max-width:992px) {
  .ban-down {
    left: 0;
    border-bottom: 1px solid #ddd;
  }
}
@media only screen and (max-width:767px) {
  .ban-down {
    display: none;
  }
}
/* 麵包屑 */
.page-current {
  margin: 5px 0 25px;
}
.breadcrumb {
  margin-bottom: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}
.breadcrumb > li {
  font-size: 0.75rem;
  color: #666;
  word-break: normal;
}
.breadcrumb > li + li:before {
  display: inline-block;
  content: '';
  margin: -2px 6px 0 1px;
  padding: 0;
  width: 5px;
  height: 5px;
  vertical-align: middle;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.breadcrumb > li a {
  color: #666;
}
.breadcrumb > li a:hover {
  color: #000;
  text-decoration: none;
}
@media only screen and (min-width:992px) {
  .page-current {
    margin: 15px 0 60px;
  }
  .breadcrumb > li {
    font-size: 0.8125rem;
  }
  .breadcrumb > li + li:before {
    margin: -2px 7px 0 2px;
  }
}
/* share 社群分享 */
.share {
  padding-bottom: 30px;
}
.share a,
.share span {
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  line-height: 20px;
  overflow: hidden;
}
.share > a {
  display: block;
  position: relative;
  top: -15px;
  margin: 0 auto -10px;
  padding-top: 5px;
  width: 95px;
  font-size: 1.25rem;
  font-size: 15px;
  color: #474747;
  text-align: center;
  background-color: #fff;
  cursor: text;
}
.share > a span,
.share .ti span {
  margin: -4px 8px 0 0;
  width: 13px;
  height: 15px;
  background: url(../images/icon_share.gif) no-repeat 0 0;
  background-size: cover;
}
.share ul {
  margin-top: 8px;
  width: 100%;
  text-align: center;
}
.share ul li {
  display: inline-block;
  position: relative;
  margin-left: -4px;
}
.share ul li:after {
  display: inline-block;
  content: '';
  margin-top: 2px;
  width: 1px;
  height: 16px;
  vertical-align: middle;
  background-color: #ddd;
}
.share ul li:last-child:after {
  display: none;
}
.share ul li a {
  padding: 0 9px;
  color: #333;
}
.share ul li span {
  font-size: 1.416666rem;
  font-size: 16px;
  text-align: center;
}
.share ul li.instr span {
  font-size: 1.583333rem;
  font-size: 19px;
}
.share ul li.fb a:hover {
  color: #3c5a99;
}
.share ul li.g-plus a:hover {
  color: #ce3c23;
}
.share ul li.twitter a:hover {
  color: #28a9e0;
}
.share ul li.instr a:hover {
  color: #7a31bf;
}
.share ul li.twitter a:hover {
  color: #28a9e0;
}
.share ul li.weixin a:hover {
  color: #01ab04;
}
.share ul li.weixin {
  position: relative;
}
.weixin-wrap {
  opacity: 0;
  position: absolute;
  padding: 10px 10px 5px;
  top: -110px;
  left: -25px;
  border: 1px solid #ddd;
  background: #fff;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.weixin-wrap span {
  color: #666;
  font-size: 13px !important;
}
.weixin-wrap.is-visible {
  opacity: 1;
}
.share ul li.weibo span {
  width: 16px;
  height: 20px;
  background: url(../images/share_weibo3.png) no-repeat center bottom;
  background-size: 16px 20px;
}
.share ul li.weibo:hover span {
  width: 16px;
  height: 20px;
  background: url(../images/share_weibo.png) no-repeat center bottom;
  background-size: 16px 20px;
}
.share ul li.down span {
  width: 17px;
  height: 20px;
  background: url(../images/btn_price2.png) no-repeat center bottom;
  background-size: 17px 20px;
}
.share ul li.line span {
  width: 17px;
  height: 16px;
  background: url(../images/icon_line.gif) no-repeat 0 0;
  background-size: cover;
}
.share ul li.line a:hover span {
  background: url(../images/icon_line.gif) no-repeat 0 -16px;
  background-size: cover;
}
.share ul li.tel span {
  width: 15px;
  height: 15px;
  background: url(../images/icon_tel.gif) no-repeat 0 0;
  background-size: cover;
}
.share ul li.tel a:hover span {
  background: url(../images/icon_tel.gif) no-repeat 0 -15px;
  background-size: cover;
}
.share ul li.mail span {
  width: 17px;
  height: 13px;
  background: url(../images/icon_mail.gif) no-repeat 0 0;
  background-size: cover;
}
.share ul li.mail a:hover span {
  background: url(../images/icon_mail.gif) no-repeat 0 -13px;
  background-size: cover;
}
.share > a:hover,
.share > a.is-visible {
  color: #cc1d24;
}
.share > a:hover span,
.share > a.is-visible span {
  opacity: .5;
}
.share.in-article {
  text-align: left;
  width: auto;
}
.share.in-article ul {
  width: auto;
  display: inline-block;
  vertical-align: top;
  margin: 0 10px;
}
.share.in-article .ti {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  margin-top: 2px;
}
@media only screen and (min-width:415px) {
  .share ul li a {
    padding: 0 12px;
  }
}
@media only screen and (max-width:992px) {
  .share ul {
    display: block;
  }
  /* .share.in-article .ti {
    float: none;
    width: 100%;
    padding: 0 0 10px;
    text-align: center;
  }
  .share.in-article ul {
    float: none;
    margin: 0 0 10px;
    padding-bottom: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
  } */
}
/* 輪播樣式 - 箭頭 + 圓點 (內頁) */
.slick-wrap .slick-arrow {
  z-index: 2;
  width: 25px;
  height: 25px;
  border: #fff solid 1px;
  border-radius: 50%;
}
.slick-wrap .slick-prev {
  left: 15px;
}
.slick-wrap .slick-next {
  right: 15px;
}
.slick-wrap .slick-prev:before,
.slick-wrap .slick-prev:after,
.slick-wrap .slick-next:before,
.slick-wrap .slick-next:after {
  margin-top: -3px;
  width: 7px;
  height: 7px;
}
.slick-wrap .slick-prev:before {
  left: 9px;
}
.slick-wrap .slick-prev:after {
  left: 15px;
}
.slick-wrap .slick-prev:hover:before {
  left: 3px;
}
.slick-wrap .slick-prev:hover:after {
  left: 9px;
}
.slick-wrap .slick-next:before {
  right: 9px;
}
.slick-wrap .slick-next:after {
  right: 15px;
}
.slick-wrap .slick-next:hover:before {
  right: 3px;
}
.slick-wrap .slick-next:hover:after {
  right: 9px;
}
/* 頁籤 */
.pbn-links {
  padding-bottom: 60px;
}
.pbn-links.ban-copy {
  display: none;
}
.pbn-links .sub {
  text-align: center;
}
.pbn-links .sub a {
  display: inline-block;
  margin: 0 5px;
  padding: 5px 20px;
  color: #fff;
  font-size: 0.9375rem;
  border: 1px solid #fff;
}
.pbn-links .sub a.current,
.pbn-links .sub a:hover {
  color: #cc1d24;
  background-color: #fff;
  text-decoration: none;
}
@media only screen and (max-width:767px) {
  .pbn-links {
    margin-bottom: 15px;
    padding-bottom: 0;
    text-align: center;
    border: 1px solid #ddd;
    background-color: #eee;
    border-radius: 5px;
  }
  .pbn-links.ban-copy {
    display: block;
    margin: 0 0 15px;
  }
  .pbn-links .hidden-ele {
    display: block;
    position: relative;
    top: 0;
    height: auto;
    color: #222;
    text-align: left;
    margin: 0;
    padding: 10px 12px;
    font-size: 0.9375rem;
    line-height: 1.5;
    cursor: pointer;
    background-color: #eee;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  .pbn-links .hidden-ele:before,
  .pbn-links .hidden-ele:after {
    pointer-events: none;
    content: "";
    position: absolute;
    background-color: #222;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  .pbn-links .hidden-ele:before {
    top: 20px;
    right: 10px;
    width: 12px;
    height: 2px;
  }
  .pbn-links .hidden-ele:after {
    top: 15px;
    right: 15px;
    width: 2px;
    height: 12px;
  }
  .pbn-links .sub {
    max-height: 0;
    overflow: hidden;
    text-align: left;
    background-color: #fff;
    border-radius: 5px;
  }
  .pbn-links.open .sub {
    max-height: 1000px;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  .pbn-links.open .hidden-ele:before,
  .pbn-links.open .hidden-ele:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .pbn-links .sub a {
    display: block;
    padding: 10px 8px;
    color: #000;
    border: none;
    font-size: 0.9375rem;
    border-bottom: 1px solid #ccc;
  }
  .pbn-links .sub a:last-child {
    border-bottom: none;
  }
  /* 專給應用實績不同 */
  #case-list .pbn-links .hidden-ele:before {
    pointer-events: none;
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    right: 15px;
    top: 15px;
    background: none;
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-color: #222;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #case-list .pbn-links .hidden-ele:after {
    display: none;
  }
}
/* 內頁容器 */
.page-main {
  margin: 0 auto;
  padding: 150px 0 100px;
  max-width: 1200px;
}
.page-main.two {
  padding-bottom: 0;
}
@media only screen and (max-width:767px) {
  .page-main {
    padding: 120px 0 30px;
    max-width: 1200px;
  }
  .page-main.two {
    padding-right: 10px;
    padding-left: 10px;
    background: #fff;
  }
}
/* 表格 */
.rwd-tab {
  margin: 0 auto;
  width: 100%;
}
.rwd-tab > tr > th,
.rwd-tab > tr > td,
.rwd-tab > thead > tr > th,
.rwd-tab > thead > tr > td,
.rwd-tab > tbody > tr > th,
.rwd-tab > tbody > tr > td {
  position: relative;
  padding: 15px;
}
.rwd-tab > thead {
  background: url("../images/line1.png") left bottom repeat-x;
}
.rwd-tab > thead > tr > th {
  color: #cc1d24;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-align: center;
}
.rwd-tab > tr > th.order,
.rwd-tab > thead > tr > th.order,
.rwd-tab > tbody > tr > th.order {
  padding-left: 0;
  padding-right: 0;
}
.rwd-tab > tbody {
  border-bottom: 1px solid #ddd;
}
@media only screen and (max-width:767px) {
  .rwd-tab > thead {
    /* 隱藏 thead 區塊 */
    position: absolute;
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
  .rwd-tab > tbody,
  .rwd-tab > tbody > tr,
  .rwd-tab > tr,
  .rwd-tab > tr > th,
  .rwd-tab > tr > td,
  .rwd-tab > thead > tr,
  .rwd-tab > thead > tr > th,
  .rwd-tab > thead > tr > td,
  .rwd-tab > tbody > tr,
  .rwd-tab > tbody > tr > th,
  .rwd-tab > tbody > tr > td {
    display: block;
  }
  .rwd-tab > tbody > tr > th,
  .rwd-tab > tbody > tr > td,
  .rwd-tab > thead > tr > th,
  .rwd-tab > thead > tr > td,
  .rwd-tab > tr > th,
  .rwd-tab > tr > td {
    padding: 5px;
  }
  .rwd-tab > tbody {
    padding: 1px;
    margin-bottom: 10px;
    background-color: #fefefe;
  }
  .rwd-tab > tbody .title {
    position: relative;
    padding: 10px 10px 10px 20px;
    font-size: 0.9375rem;
    font-weight: bold;
    /*background-color: #eee;*/
    border-bottom: none;
    background: url("../images/line1.png") left bottom repeat-x;
  }
  .rwd-tab > tbody .title:before {
    pointer-events: none;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 4px 4px;
    border-color: transparent transparent transparent #c62329;
  }
  .rwd-tab > tbody [data-title] {
    text-align: right;
  }
  .rwd-tab > tbody [data-title]:before {
    content: attr(data-title);
    float: left;
    text-align: left;
    width: 40px;
    color: #cc1d24;
    font-size: 0.875rem;
  }
  .rwd-tab > tbody > tr > th {
    font-size: 0.875rem;
    border-bottom: 1px solid #ddd;
  }
}
/* 頁碼 */
.page-tb {
  margin: 0 auto;
}
#page-wrap {
  height: 28px;
  line-height: 28px;
}
#page-wrap a {
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
#page-wrap .numbers {
  display: inline-block;
  padding: 0 5px;
  text-align: center;
}
#page-wrap .numbers a {
  display: inline-block;
  margin: 0 2px;
  width: 28px;
  height: 28px;
  font-size: 0.8125rem;
  color: #6a6a6a;
  text-align: center;
  text-decoration: none;
  line-height: 28px;
  border: #d2d2d2 solid 1px;
  background-color: #fff;
}
#page-wrap .numbers a:hover,
#page-wrap .numbers span a {
  color: #fff;
  border: #5d5c53 solid 1px;
  background-color: #5d5c53;
}
#page-wrap .btn-prev,
#page-wrap .btn-next {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: top;
  line-height: 28px;
}
#page-wrap .btn-prev a,
#page-wrap .btn-next a,
#page-wrap .btn-prev .no-prev,
#page-wrap .btn-next .no-next {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  border: #d2d2d2 solid 1px;
  background-color: #fff;
}
#page-wrap .btn-prev a:before,
#page-wrap .btn-next a:before,
#page-wrap .btn-prev .no-prev:before,
#page-wrap .btn-next .no-next:before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -3px;
  width: 0;
  height: 0;
  border-width: 4px;
  border-style: solid;
  border-color: transparent;
}
#page-wrap .btn-prev a:before {
  border-left-width: 0;
  border-right-color: #5d5c53;
}
#page-wrap .btn-next a:before {
  margin-left: -2px;
  border-right-width: 0;
  border-left-color: #5d5c53;
}
#page-wrap .btn-prev .no-prev:before {
  border-left-width: 0;
  border-right-color: #bbb;
}
#page-wrap .btn-next .no-next:before {
  margin-left: -2px;
  border-right-width: 0;
  border-left-color: #bbb;
}
#page-wrap .btn-prev a:hover,
#page-wrap .btn-next a:hover {
  border: #5d5c53 solid 1px;
  background-color: #5d5c53;
}
#page-wrap .btn-prev a:hover:before {
  border-right-color: #fff;
}
#page-wrap .btn-next a:hover:before {
  border-left-color: #fff;
}
/* --------------------------------------------
   共用 - Nav & Wrap
-------------------------------------------- */
#left-nav {
  float: left;
  margin-bottom: 80px;
  width: 200px;
  background-color: #f8f8f8;
}
#left-nav.light-bg {
  background-color: transparent;
}
#left-nav a {
  position: relative;
  display: block;
  padding: 12px 12px 12px 30px;
  color: #000;
  font-size: 0.9375rem;
  border-bottom: 1px solid #fff;
}
#left-nav a:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 25px;
  left: 15px;
  width: 7px;
  height: 1px;
  background-color: #000;
}
#left-nav a.current,
#left-nav a:hover {
  color: #cc1d24;
  text-decoration: none;
}
#left-nav a.current:before,
#left-nav a:hover::before {
  background-color: #cc1d24;
}
.right-wrap {
  float: right;
  margin-bottom: 40px;
  line-height: 28px;
  width: calc(100% - 230px);
}
.right-wrap img {
  max-width: 100% !important;
  height: auto !important;
}
@media only screen and (max-width:992px) {
  .right-wrap {
    width: calc(100% - 200px);
  }
}
@media only screen and (max-width:767px) {
  #left-nav,
  .right-wrap {
    float: none;
    margin: 0;
    width: 100%;
  }
  #left-nav a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #left-nav a:before {
    top: 21px;
  }
  .right-wrap {
    margin-top: 20px;
    padding-bottom: 20px;
  }
}
#right-nav {
  float: right;
  margin-bottom: 30px;
  width: 285px;
}
#right-nav .subject {
  margin-bottom: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  color: #000;
  font-size: 1rem;
  font-weight: bold;
  background: url("../images/line1.png") 0 bottom repeat-x;
}
#right-nav .top-list {
  margin-bottom: 20px;
  padding: 0 20px 15px;
  background-color: #fafafa;
}
#right-nav .top-list .subject {
  padding-left: 0;
  padding-right: 0;
}
#right-nav .top-list li {
  padding: 3px 0;
  line-height: 22px;
}
#right-nav .top-list li a {
  color: #444;
}
#right-nav .news li {
  padding: 10px 20px;
  border-bottom: 1px dotted #ebebeb;
}
#right-nav .news li .date {
  margin-bottom: 5px;
  color: #cc1d24;
}
#right-nav .news li a {
  color: #333;
  line-height: 22px;
}
.left-wrap {
  float: left;
  margin-bottom: 30px;
  width: calc(100% - 350px);
}
@media only screen and (max-width:1200px) {
  .left-wrap {
    width: calc(100% - 260px);
  }
  #right-nav {
    width: 230px;
  }
}
@media only screen and (max-width:992px) {
  .left-wrap {
    margin-bottom: 20px;
  }
  #right-nav {
    margin-bottom: 0;
  }
}
@media only screen and (max-width:767px) {
  .left-wrap,
  #right-nav {
    float: none;
    width: 100%;
  }
  #right-nav .top-list {
    display: none;
  }
  .news-article {
    display: none;
  }
}
/* --------------------------------------------
   側欄，商品搜尋、商品分類
-------------------------------------------- */
/* 側功能 - 行動版開啟按鈕 */
.func-mb-switch {
  z-index: 96;
  font-size: 0;
  position: fixed;
  top: 70px;
  left: 0;
  width: 100vw;
  background: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.func-mb-switch a {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  display: inline-block;
  vertical-align: top;
  width: 50%;
  background: #000;
  color: #fff;
  font-size: 0.9375rem;
  text-align: center;
  padding: 10px;
  position: relative;
}
.func-mb-switch a.open {
  background: #cc1d24;
}
.func-mb-switch a:hover {
  text-decoration: none;
  ;
}
.func-mb-switch .en {
  font-style: italic;
  font-weight: 600;
}
.func-mb-switch a::before {
  content: '';
  display: block;
  width: 1px;
  left: 0;
  top: 10px;
  bottom: 10px;
  background: #fff;
  opacity: 0.3;
  position: absolute;
}
.func-mb-switch a:first-child::before {
  display: none;
}
.func-mb-switch a.switch-search .deco {
  display: inline-block;
  position: relative;
  margin-top: 1px;
  margin-left: 5px;
  width: 15px;
  height: 15px;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.func-mb-switch a.switch-search .deco:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.func-mb-switch a.switch-search .deco:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 2px;
  right: -1px;
  width: 7px;
  height: 1px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.func-mb-switch a.switch-pcate {
  display: none !important
}
.func-mb-switch a.switch-pcate .deco {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}
.func-mb-switch a.switch-pcate .deco span {
  display: block;
  margin-bottom: 2px;
  width: 17px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.func-mb-switch a.switch-pcate .deco span + span {
  width: 21px;
}
.func-mb-switch a.switch-pcate .deco span + span + span {
  width: 8px;
}
.func-mb-switch a.switch-pcate:hover .deco span {
  width: 21px;
  background-color: #fff;
}
@media only screen and (min-width:768px) {
  .func-mb-switch {
    display: none;
  }
}
/* 側功能閉じる按鈕 */
.aside-pcate .btn-close,
.aside-search .btn-close {
  display: none;
}
@media only screen and (max-width:767px) {
  .aside-pcate .btn-close,
  .aside-search .btn-close {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    overflow: hidden;
    font-size: 0;
    cursor: pointer;
  }
  .aside-pcate .btn-close {
    left: 15px
  }
  .aside-search .btn-close {
    right: 25px
  }
  .aside-pcate .btn-close:before,
  .aside-pcate .btn-close:after,
  .aside-search .btn-close:before,
  .aside-search .btn-close:after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 5px;
    width: 28px;
    height: 1px;
    background-color: #fff;
  }
  .aside-pcate .btn-close:before,
  .aside-search .btn-close:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .aside-pcate .btn-close:after,
  .aside-search .btn-close:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
@media only screen and (max-width:499px) {
  .aside-pcate .btn-close,
  .aside-search .btn-close {
    top: 15px;
    margin-top: auto;
    margin-left: -20px;
  }
  .aside-pcate .btn-close {
    left: 50%;
  }
  .aside-search .btn-close {
    left: 50%;
    right: auto;
  }
}
/* 側功能 - 分類 */
.aside-pcate {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  text-align: center;
}
.aside-pcate .links-area > li a .no,
.aside-pcate .links-area > li a .name small {
  display: none;
}
@media only screen and (max-width:992px) {
  .aside-pcate {
    left: 0;
    border-bottom: 1px solid #ddd;
  }
}
@media only screen and (min-width:768px) {
  .aside-pcate {
    display: none !important
  }
}
@media only screen and (max-width:767px) {
  .aside-pcate {
    background: #000;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 50px;
    height: 100vh;
    width: calc(100vw - 50px);
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    padding: 50px 50px 50px 100px;
  }
  .aside-pcate.open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  .aside-pcate .ban-menu {
    width: 100%;
    margin-top: 45px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .aside-pcate .ban-menu::-webkit-scrollbar {
    width: 2px;
    border-radius: 40px;
  }
  .aside-pcate .ban-menu::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    border-radius: 40px;
    background: rgba(200, 200, 200, 0.1);
  }
  .aside-pcate .ban-menu::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 40px;
    background: rgba(200, 200, 200, 0.4);
  }
  .aside-pcate .links-area {
    position: relative;
    display: block;
    bottom: auto;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .aside-pcate .links-area > li {
    padding-bottom: 20px;
  }
  .aside-pcate .links-area > li a {
    display: block;
    text-align: left;
    background: none;
    text-decoration: none;
    padding: 10px;
    margin: 0;
  }
  .aside-pcate .links-area > li a .no {
    display: block;
    line-height: 1;
    margin: 0;
    font-size: 1.125rem;
    margin-bottom: 5px;
    color: #777142;
    font-weight: 700;
    font-style: italic;
    font-family: 'Roboto Condensed';
  }
  .aside-pcate .links-area > li a .name {
    font-size: 1.25rem;
    color: #eee;
    font-weight: 400;
    margin: 0;
    padding: 0;
    line-height: 1.5;
  }
  .aside-pcate .links-area > li a .name small {
    display: block;
    padding-top: 3px;
    font-size: 1.125rem;
    color: #AAA;
    font-weight: 400;
    font-family: 'Roboto Condensed';
  }
  .aside-pcate .links-area > li > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
  }
  .aside-pcate .links-area > li > ul > li {
    display: block;
  }
  .aside-pcate .links-area > li > ul > li > a {
    position: relative;
    padding: 10px 10px 10px 25px;
    margin: 0;
    display: block;
    color: #ddd;
    font-size: 0.9375rem;
  }
  .aside-pcate .links-area > li > ul > li > a::before {
    content: '';
    display: block;
    width: 6px;
    height: 1px;
    position: absolute;
    top: 22px;
    left: 10px;
    background: #ccc;
  }
  .ban-menu .links-area > li.current > a,
  .ban-menu .links-area a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
  }
}
@media only screen and (max-width:499px) {
  .aside-pcate {
    padding: 40px 30px 30px 30px;
    right: 0;
    width: 100vw;
  }
}
/* 側功能 - 搜尋 */
.aside-search {
  color: #111;
  padding: 15px;
  margin-bottom: 20px;
}
@media only screen and (min-width:768px) {
  .aside-search {
    padding: 0 15px 15px;
  }
}
.aside-title {
  position: relative;
  font-size: 1.25rem;
  color: inherit;
  display: block;
  padding: 0;
  margin: 0 auto 15px;
  font-weight: 600;
}
.aside-title small {
  display: none;
}
.aside-search .form-group {
  margin-bottom: 15px;
}
.aside-search .form-group .ti-label,
.aside-search .form-group .input-txt,
.aside-search .form-group label.item {
  font-size: 0.8125rem;
}
.aside-search .form-group .input-style {
  height: 29px;
  line-height: 29px;
  border-color: #818181;
  background: transparent;
}
.aside-search .btn-wrap {
  margin-top: 15px;
}
.aside-search .btn-wrap ul {
  margin: 0 -2px;
  font-size: 0;
}
.aside-search .btn-wrap ul li {
  padding: 0 2px;
}
.aside-search .btn-wrap .btn-style {
  line-height: 38px;
  font-size: 0.875rem;
  padding-left: 5px;
  padding-right: 5px;
  white-space: nowrap;
}
@media only screen and (min-width:480px) {
  .aside-search .btn-wrap {
    max-width: 100%;
  }
}
@media only screen and (min-width:768px) {
  .aside-search .form-group.first {
    margin-bottom: 25px;
  }
  .aside-search .form-group.first .ti-label {
    display: none;
  }
  .aside-search .form-group .ti-label {
    display: block;
    float: none;
    width: auto;
    font-size: 0.875rem;
    margin: 0 0 10px;
    padding: 3px 5px;
    border: 1px solid #ddd;
    background-color: #eee;
    color: #111;
    border-radius: 2px;
    ;
  }
}
@media only screen and (max-width:767px) {
  .aside-search {
    color: #fff;
    background: #000;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 50px;
    height: 100vh;
    width: calc(100vw - 50px);
    -webkit-transform: translateX(150%);
    -ms-transform: translateX(150%);
    transform: translateX(150%);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    padding: 50px 100px 120px 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .aside-search.open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  .aside-search .scrollbar-y {
    max-height: calc(100vh - 370px);
    overflow-y: auto;
    padding-right: 10px;
  }
  .aside-search .scrollbar-y::-webkit-scrollbar {
    width: 2px;
    border-radius: 40px;
  }
  .aside-search .scrollbar-y::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    border-radius: 40px;
    background: rgba(200, 200, 200, 0.1);
  }
  .aside-search .scrollbar-y::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 40px;
    background: rgba(200, 200, 200, 0.4);
  }
  .aside-search .form-group {
    margin-bottom: 35px;
    position: relative;
    padding-left: 100px;
  }
  .aside-search .form-group .ti-label {
    color: #ddd;
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
  }
  .aside-search .aside-title {
    text-align: center;
    width: 100%;
  }
  .aside-search .aside-title:after {
    display: block;
    content: '';
    position: absolute;
    z-index: 0;
    bottom: 15px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
  }
  .aside-search .aside-title > div {
    position: relative;
    z-index: 2;
    font-size: 1.25rem;
    font-size: 0.9375rem;
    color: #fff;
  }
  .aside-search .aside-title > div span {
    display: inline-block;
    background: #000;
    padding: 5px 15px
  }
  .aside-search .aside-title small {
    display: block;
    font-size: 1.25rem;
    font-weight: 300;
  }
  .aside-search label.item > input + span:not([class="color"]),
  .aside-search label.item > input:checked + span:not([class="color"]) {
    background-image: url(../images/btn_filter_light.png)
  }
}
@media only screen and (max-width:499px) {
  .aside-search {
    padding: 40px 30px 140px 30px;
    left: 0;
    width: 100vw;
  }
}
/* --------------------------------------------
   共用 - Common View Pages
-------------------------------------------- */
.article-view {
  padding-bottom: 40px;
}
.article-view .top-area .date {
  margin: 0 0 10px;
  color: #cc1d24;
}
.article-view .top-area .date:before {
  display: block;
  content: '';
  margin-bottom: 8px;
  width: 26px;
  height: 2px;
  background-color: #cc1d24;
}
.article-view .top-area .title {
  margin: 10px 0 15px;
  padding-bottom: 15px;
  font-size: 1.25rem;
  font-size: 1.125rem;
  color: #333;
  line-height: 22px;
  background: url("../images/line1.png") 0 bottom repeat-x;
}
.article-view .edit-wrap {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
}
.article-view .edit-wrap .lpic,
.article-view .edit-wrap .rtxt,
.article-view .edit-wrap .rpic,
.article-view .edit-wrap .ltxt,
#blog .summary .lpic,
#blog .summary .rtxt,
#blog .summary .rpic,
#blog .summary .ltxt {
  display: inline-block;
  width: calc(100% / 2 - 10px);
  vertical-align: top;
  margin-bottom: 15px;
}
#blog .more-wrap {
  text-align: right;
}
#blog .more {
  display: inline-block;
  margin-top: 20px;
  padding: 5px 10px;
  color: #cc262d;
  font-family: 'Roboto';
  text-transform: uppercase;
  border: 1px solid #ddd;
}
#blog .more:hover {
  color: #fff;
  text-decoration: none;
  background-color: #cc262d;
  border-color: #cc262d;
}
.article-view .edit-wrap .rtxt,
.article-view .edit-wrap .ltxt {
  padding: 10px 15px;
}
#blog .summary .rtxt,
#blog .summary .ltxt {
  padding: 5px 15px 15px;
}
#blog .share .ti {
  display: inline-block;
  vertical-align: top;
}
#blog .share ul {
  display: inline-block;
  vertical-align: top;
  width: auto;
  margin-top: 0;
}
#finance .edit-wrap img,
.article-view .edit-wrap img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
}
@media only screen and (max-width:1199px) {
  .article-view .edit-wrap .lpic,
  .article-view .edit-wrap .rtxt,
  .article-view .edit-wrap .rpic,
  .article-view .edit-wrap .ltxt,
  #blog .summary .lpic,
  #blog .summary .rtxt,
  #blog .summary .rpic,
  #blog .summary .ltxt {
    width: 100%;
  }
}
@media only screen and (max-width:767px) {
  .article-view {
    padding-bottom: 20px;
  }
  .article-view .edit-wrap {
    padding-bottom: 10px;
    margin-bottom: 0;
  }
  .btn-back {
    margin-top: 20px;
  }
}
/* --------------------------------------------
   商品列表
-------------------------------------------- */
.goods-list-editor {
  margin-bottom: 20px;
}
.goods-list {
  margin: 0 -5px;
}
.goods-list .box {
  margin: 0 auto 30px;
  padding: 0 5px;
  display: inline-block;
  vertical-align: top;
  float: none;
  width: 50%;
}
.goods-list .box a {
  display: block;
  text-decoration: none;
  text-align: center;
}
.goods-list .box .pic {
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  max-width: 195px;
  display: inline-block;
}
.goods-list .box h4 {
  margin: 15px 0 0 0;
  font-size: 0.875rem;
  color: #555;
  font-weight: normal;
  text-align: center;
  line-height: 1.5;
  overflow: hidden;
}
.goods-list .box h4 small {
  display: block;
  padding-bottom: 8px;
  font-size: 1rem;
  color: #000;
}
.goods-list .box:hover small {
  color: #777142;
}
.goods-list .box h4 span {
  display: -webkit-box;
  overflow: hidden;
  /*! autoprefixer: off;*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#goods-list .pic-over .mask {
  background-color: transparent;
  background-image: -o-linear-gradient(bottom, #1e120d, transparent);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#1e120d), to(transparent));
  background-image: linear-gradient(to top, #1e120d, transparent);
}
@media only screen and (min-width:640px) {
  .goods-list .box {
    width: calc(100% / 3);
  }
}
@media only screen and (min-width:1024px) {
  .goods-list {
    margin: 0 -20px;
  }
  .goods-list .box {
    margin-bottom: 65px;
    padding: 0 20px;
    width: 25%;
  }
  .goods-list .box .img-responsive {
    max-width: auto;
    width: 100%;
  }
}
@media only screen and (min-width:1200px) {
  .goods-list {
    margin: 0 -15px;
  }
  .goods-list .box {
    width: 20%;
    padding: 0 15px;
  }
}
@media only screen and (max-width:768px) {
  #goods-list .ban .headline {
    padding-top: 80px;
  }
}
/* --------------------------------------------
   商品詳細頁 - 主要
-------------------------------------------- */
#goods-view .view-intro {
  margin-bottom: 60px;
}
#goods-view .info {
  position: relative;
  margin-bottom: 35px;
}
#goods-view .info .btn-back.show1024 {
  display: none;
  margin-top: 0;
}
@media only screen and (min-width:1024px) {
  /* #goods-view .info {
    margin-bottom: 90px;
  } */
  #goods-view .info .btn-back.show1024 {
    display: block;
    position: absolute;
    top: 48px;
    right: 0;
  }
  #goods-view .btn-back.hide1024 {
    display: none;
  }
}
@media only screen and (min-width:1024px) and (max-width:1279px) {
  #goods-view .info .btn-back.show1024 {
    top: 22px;
  }
}
#goods-view .info .box-r {
  font-size: 1.25rem;
  font-size: 0.9375rem;
  overflow: hidden;
}
#goods-view .info .box-l {
  margin-left: 10px;
  margin-right: 10px;
}
#goods-view .info .pic {
  position: relative;
  margin: 0 auto;
  padding: 9px 9px 19px;
  max-width: 620px;
  border: #ddd solid 1px;
  overflow: hidden;
  text-align: center;
}
#goods-view .info .pic img {
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  max-width: 100%;
  width: 100%;
}
#goods-view .info .pic .icon-zoom {
  display: block;
  position: absolute;
  z-index: 2;
  right: 5px;
  bottom: 5px;
  width: 28px;
  height: 28px;
  overflow: hidden;
}
#goods-view .info .pic .icon-zoom:before,
#goods-view .info .pic .icon-zoom:after {
  display: block;
  content: '';
  position: absolute;
}
#goods-view .info .pic .icon-zoom:before {
  top: 5px;
  left: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #bbb;
}
#goods-view .info .pic .icon-zoom:after {
  bottom: 8px;
  right: 5px;
  width: 7px;
  height: 2px;
  background: #bbb;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.mb #goods-view .info .pic .icon-zoom,
.mb #goods-view .info .pic .zoom {
  display: none !important;
}
@media only screen and (min-width:415px) {
  #goods-view .info .pic {
    padding: 34px;
  }
}
@media only screen and (min-width:1024px) {
  #goods-view .info .box-l {
    margin-left: 0;
    margin-right: 0;
  }
  #goods-view .info .pic {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width:1023px) {
  #goods-view .info .pic .icon-zoom,
  #goods-view .info .pic .zoom {
    display: none !important;
  }
}
#goods-view .info h4 {
  margin: 15px 0 20px 0;
  font-size: 1.5rem;
  font-size: 1.125rem;
  color: #000;
}
#goods-view .info h4 small {
  display: block;
  padding-bottom: 20px;
  font-size: 1.5rem;
  font-size: 1.125rem;
  color: #5d5c53;
  font-weight: 300;
}
#goods-view .info .txt {
  color: #222;
  line-height: 24px;
}
/* 詳細頁 輪播 */
#goods-view .slick-wrap .slick-dots {
  display: none !important;
  top: -40px !important;
  bottom: auto;
  padding-right: 6px;
  text-align: right;
}
#goods-view .slick-wrap .slick-dots li button:before {
  border: #444 solid 1px;
  background-color: #fff;
}
#goods-view .slick-wrap .slick-dots li:hover button:before,
#goods-view .slick-wrap .slick-dots li.slick-active button:before {
  border-color: #525252;
  background-color: #525252;
}
#goods-view .container img {
  max-width: 100% !important;
  height: auto !important;
}
@media only screen and (min-width:414px) {
  #goods-view .slick-wrap .slick-dots {
    display: block !important;
  }
}
@media only screen and (min-width:1200px) {
  #goods-view .slick-wrap .slick-arrow {
    display: none;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  #goods-view .slick-wrap:hover .slick-arrow {
    display: block;
    opacity: 1;
  }
}
@media only screen and (min-width:1360px) {
  #goods-view .container.view-intro {
    width: 1260px;
  }
}
@media only screen and (min-width:1400px) {
  #goods-view .container.view-intro {
    width: 1280px;
  }
}
/* 相關文章 */
.related-article {
  padding: 0;
  margin-bottom: 50px;
}
.related-article ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.related-article ul li {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  position: relative;
  padding: 3px 0 3px 18px;
  margin: 0 0 5px 0;
  border-bottom: 1px solid #ddd;
}
.related-article ul li a {
  color: #333;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.related-article ul li a:hover {
  color: #cc1d24;
}
.related-article ul li::before {
  content: '';
  width: 3px;
  height: 3px;
  background-color: #cc1d24;
  border-radius: 10px;
  position: absolute;
  top: 15px;
  left: 3px;
}
.related-article .area-ti small {
  font-size: 1.375rem;
}
@media only screen and (max-width:767px) {
  .related-article {
    padding: 0 10px;
  }
  .related-article ul li {
    display: block;
    width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
  }
}
@media only screen and (max-width:375px) {
  .related-article .area-ti {
    text-align: center;
  }
}
/* --------------------------------------------
   商品詳細頁 - 同色系
-------------------------------------------- */
.similar-goods {
  border-top: 1px solid #ddd;
  padding-top: 10px;
  margin-top: 30px;
}
.similar-goods .ti {
  display: block;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px;
  padding: 0;
  font-size: 1.125rem
}
.similar-goods ul {
  font-size: 0;
  list-style: none;
  margin: 0 -8px;
  padding: 0;
}
.similar-goods ul li {
  display: inline-block;
  vertical-align: top;
  width: calc((100% / 8) - 16px);
  padding: 0;
  margin: 0 8px 10px
}
.similar-goods ul li a {
  display: block;
  padding: 0;
  margin: 0;
  color: #000;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
}
.similar-goods ul li a:hover {
  color: #777142
}
.similar-goods ul li .pic {
  display: block;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 550px) and (max-width: 1399px),
(max-width: 639px) {
  .similar-goods ul li {
    width: calc((100% / 6) - 16px);
  }
}
@media (max-width: 839px) {
  .similar-goods ul li {
    width: calc((100% / 5) - 16px);
  }
}
@media (max-width: 549px) {
  .similar-goods ul li {
    width: calc(25% - 16px);
  }
}
@media (max-width: 399px) {
  .similar-goods ul li {
    width: calc((100% / 3) - 16px);
  }
}
@media (min-width: 1024px) {
  .similar-goods .scrollbar {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .similar-goods .scrollbar::-webkit-scrollbar {
    width: 5px;
    border-radius: 20px;
  }
  .similar-goods .scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    border-radius: 20px;
    background: rgba(200, 200, 200, 0.1);
  }
  .similar-goods .scrollbar::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 40px;
    background: rgba(200, 200, 200, 0.4);
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .similar-goods .scrollbar {
    max-height: 430px;
  }
}
/* --------------------------------------------
   商品詳細頁 - 商品介紹 + 實績介紹
-------------------------------------------- */
.info .data li {
  padding: 8px 0;
  color: #555;
  line-height: 22px;
}
.info .data span {
  display: inline-block;
  width: 90px;
  color: #222;
  vertical-align: top;
}
.info .data span.letter-sp {
  letter-spacing: 29px;
}
.info .spec-unwrap,
.info .spec-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.info .spec-unwrap > span,
.info .spec-wrap > span {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 90px;
  flex: 0 0 90px;
}
.info .spec-unwrap > ul,
.info .spec-wrap > ul {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: inline-block;
  vertical-align: top;
}
.info .spec-unwrap > ul li {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 0 20px 0 0;
  margin: 0 0 5px 0;
}
.info .spec-unwrap > ul li::before {
  content: '';
  width: 3px;
  height: 3px;
  background: #555;
  border-radius: 50px;
  position: absolute;
  top: 9px;
  right: 8px;
}
.info .spec-unwrap > ul li:last-child:before {
  display: none;
}
.info .spec-wrap > ul li {
  padding: 0;
  margin: 0 0 8px;
}
#goods-view .info .data {
  margin-left: 20px;
  overflow: hidden;
}
#goods-view .info .data span {
  display: block;
  float: left;
}
#goods-view .info .data p {
  margin: 0;
  overflow: hidden;
}
#goods-view .info .format {
  position: relative;
  margin: 20px 0 16px;
  padding: 9px 20px 9px 0;
  border: #ddd solid 1px;
}
#goods-view .info .format-line {
  position: relative;
  margin: 20px 0 16px;
  border-bottom: #ddd solid 1px;
}
#goods-view .info .format:before,
#goods-view .info .format:after {
  display: block;
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
}
#goods-view .info .format:before {
  top: -1px;
  left: -1px;
  border-top: #a6a6a6 solid 1px;
  border-left: #a6a6a6 solid 1px;
}
#goods-view .info .format:after {
  bottom: -1px;
  right: -1px;
  border-bottom: #a6a6a6 solid 1px;
  border-right: #a6a6a6 solid 1px;
}
#goods-view .info .down {
  position: relative;
  padding-bottom: 10px;
  margin-top: 20px;
}
#goods-view .info .advi,
#goods-view .info .download-btn {
  width: auto;
  height: 38px;
  line-height: 38px;
  border-radius: 50px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
#goods-view .info .advi span,
#goods-view .info .download-btn span {
  display: inline-block;
  position: relative;
  top: -2px;
  margin-right: 20px;
  width: 21px;
  height: 18px;
  vertical-align: middle;
  background: url(../images/icon_consul.png) no-repeat 0 0;
  background-size: 100% auto;
}
#goods-view .info .advi.aw span {
  width: 18px;
  background: url(../images/icon_back.png) no-repeat 0 100% / auto 200%;
}
#goods-view .info .download-btn span {
  background: url(../images/btn_price.png) no-repeat center bottom;
  background-size: 17px 20px;
}
#goods-view .info .advi span:after,
#goods-view .info .download-btn span:after {
  display: block;
  content: '';
  position: absolute;
  z-index: 1;
  top: 3px;
  right: -10px;
  width: 1px;
  height: 10px;
  background-color: #8d8c80;
}
/* body[data-series=doors] #goods-view .info .advi span:after, body[data-series=doors] #goods-view .info .download-btn span:after {
  background-color: #ddd;
} */
.cate-icons {
  position: relative;
  padding: 8px 0 8px 90px;
  margin-left: 20px;
}
.cate-icons::before {
  content: '特徴';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  max-height: 90px;
  width: 90px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.9375rem;
  color: #222;
}
.cate-icons ul {
  list-style: none;
  margin: 0 -5px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cate-icons ul li {
  display: inline-block;
  vertical-align: top;
  width: auto;
  padding: 0 5px;
  margin-bottom: 5px;
  max-width: 109px;
  text-align: center;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 min(50%, 109px);
  flex: 1 1 min(50%, 109px);
}
.cate-icons ul li .img {
  width: 100%;
  max-width: 70px;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.cate-icons ul li .img img {
  display: inline-block;
}
.cate-icons ul li span {
  display: block;
  font-size: 0.8rem;
  margin: 5px 0 0 0;
  color: #333;
  font-weight: normal;
  text-align: center;
  line-height: 1.1;
  overflow-wrap: break-all
}
@media only screen and (min-width: 1200px) {
  .cate-icons {
    margin-left: 30px;
  }
}
@media only screen and (max-width:569px) {
  #goods-view .info .box-r .down {
    padding-bottom: 50px;
  }
  #goods-view .info .advi,
  #goods-view .info .download-btn {
    /* position: absolute;
    bottom: 0; */
    width: 100%;
    margin: 5px auto;
    position: relative;
  }
  #goods-view .info .download-btn {
    bottom: 0;
  }
  .cate-icons ul li .img {
    max-width: 65px;
  }
}
@media only screen and (min-width:570px) {
  #goods-view .info .advi,
  #goods-view .info .download-btn {
    margin-top: 110px;
    margin-left: 5px;
    float: right;
    height: 38px;
  }
}
@media only screen and (min-width:1024px) {
  #goods-view .info .box-l {
    margin-right: 30px;
    float: left;
    width: 582px;
  }
  body[data-series=panels] #goods-view .info .box-l {
    width: 405px;
  }
}
@media only screen and (min-width:1200px) {
  #goods-view .info .box-l {
    margin-right: 60px;
  }
  .info .data span {
    margin-right: 10px;
  }
  #goods-view .info .data {
    margin-left: 30px;
  }
  #goods-view .info .format {
    padding: 9px 30px 9px 0;
  }
}
@media only screen and (min-width:1024px) and (max-width:1279px) {
  #goods-view .info h4 {
    margin-top: 0;
  }
}
@media only screen and (min-width:1280px) {
  #goods-view .info h4 {
    margin-top: 25px;
  }
  .info .data li {
    padding: 8px 0;
  }
  #goods-view .info .format .data li p > span,
  .info .data li p > span {
    width: auto;
  }
  #goods-view .info .format {
    margin-top: 30px;
  }
}
/* --------------------------------------------
   商品詳細頁 - 相關
-------------------------------------------- */
#goods-view .related > div {
  margin-bottom: 30px;
}
#goods-view .related .area-ti small {
  font-size: 1.833333rem;
  font-size: 1.375rem;
}
#goods-view .related .btn-more {
  display: block;
  margin-top: 10px;
  font-size: 1.25rem;
  font-size: 0.9375rem;
  color: #000;
  text-decoration: none;
}
#goods-view .related .btn-more span {
  position: relative;
  display: inline-block;
  margin-left: 8px;
  width: 26px;
  height: 1px;
  background-color: #5d5c53;
}
#goods-view .related .btn-more span:before {
  display: block;
  content: '';
  position: absolute;
  top: -3px;
  right: -1px;
  width: 10px;
  height: 1px;
  background-color: #5d5c53;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#goods-view .related .btn-more:hover {
  color: #777142;
}
#goods-view .like,
#goods-view .case {
  position: relative;
  width: 100%;
}
#goods-view .like .slick-wrap,
#goods-view .case .slick-wrap {
  margin: 0 auto;
}
#goods-view .like .slick-wrap .box,
#goods-view .case .slick-wrap .box {
  padding: 0 10px;
}
#goods-view .slick-wrap .box .pic {
  position: relative;
}
#goods-view .like .box h5 {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.25rem;
  font-size: 0.9375rem;
  color: #fff;
  font-weight: 300;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#goods-view .like .box h5 small {
  display: block;
  font-size: 1rem;
  color: #fff;
}
#goods-view .like .box h5 small:after {
  display: block;
  content: '';
  margin: 15px auto;
  width: 14px;
  height: 1px;
  background-color: #fff;
}
#goods-view .case .box .name {
  position: relative;
  top: 50%;
  margin-top: -23px;
}
#goods-view .case .box .name span {
  display: block;
  position: relative;
  margin: 0 auto 15px;
  width: 14px;
  height: 14px;
  border: #fff solid 1px;
  border-radius: 50px;
}
#goods-view .case .box .name span:after {
  display: block;
  content: '';
  position: absolute;
  right: -5px;
  bottom: -2px;
  width: 7px;
  height: 1px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#goods-view .case .box .name h5 {
  margin: 0;
  font-size: 1.25rem;
  font-size: 0.9375rem;
  color: #fff;
  font-weight: 300;
  text-align: center;
}
@media only screen and (max-width:767px) {
  #goods-view .like .wrap,
  #goods-view .case .wrap {
    padding: 0;
  }
}
@media only screen and (max-width:640px) {
  #goods-view .related .area-ti small {
    padding-bottom: 5px;
  }
}
@media only screen and (max-width:374px) {
  #goods-view .like .area-ti,
  #goods-view .case .area-ti {
    text-align: center;
  }
  #goods-view .like .slick-wrap,
  #goods-view .case .slick-wrap {
    max-width: 230px;
  }
  #goods-view .related .btn-more {
    text-align: center;
  }
}
@media only screen and (min-width:375px) {
  #goods-view .related .area-ti {
    margin-left: 8px;
  }
  #goods-view .related .btn-more {
    margin-right: 8px;
    float: right;
  }
}
@media only screen and (min-width:1024px) {
  #goods-view .related > div {
    margin-bottom: 50px;
  }
  #goods-view .like {
    float: left;
    width: 42%;
  }
  #goods-view .case {
    padding-left: 52px;
    float: right;
    width: 58%;
  }
}
@media only screen and (min-width:1200px) {
  #goods-view .like {
    width: 47.6%;
  }
  #goods-view .case {
    padding-left: 60px;
    width: 52.4%;
  }
}
/* body[data-series=flooring] #goods-view .info .data span {
  color: #afa8a4;
}
body[data-series=flooring] #goods-view .info .format .data li:nth-child(even):before {
  background-color: #473931;
}
body[data-series=flooring] #goods-view .info .data p {
  color: #ccc;
}
body[data-series=flooring] #goods-view .info .format {
  border: #473931 solid 1px;
}
body[data-series=flooring] #goods-view .info .format:before {
  border-top: #5d554f solid 1px;
  border-left: #a6a6a6 solid 1px;
}
body[data-series=flooring] #goods-view .info .format:after {
  border-bottom: #5d554f solid 1px;
  border-right: #a6a6a6 solid 1px;
}
body[data-series=flooring] #goods-view .related .btn-more {
  color: #afa8a4;
}
body[data-series=flooring] #goods-view .related .btn-more:hover {
  color: #ccc;
}
body[data-series=flooring] #goods-view .related .btn-more span {
  background-color: #564338;
}
body[data-series=flooring] #goods-view .related .btn-more span:before {
  background-color: #564338;
}
body[data-series=doors] #goods-view .info .data span {
  color: #aaa;
}
body[data-series=doors] #goods-view .info .format .data li:nth-child(even):before {
  background-color: #473931;
}
body[data-series=doors] #goods-view .info .data p {
  color: #ddd;
}
body[data-series=doors] #goods-view .info .format {
  border: #444 solid 1px;
}
body[data-series=doors] #goods-view .info .format:before {
  border-top: #666 solid 1px;
  border-left: #666 solid 1px;
}
body[data-series=doors] #goods-view .info .format:after {
  border-bottom: #666 solid 1px;
  border-right: #666 solid 1px;
}
body[data-series=doors] #goods-view .related .btn-more {
  color: #aaa;
}
body[data-series=doors] #goods-view .related .btn-more:hover {
  color: #ccc;
}
body[data-series=doors] #goods-view .related .btn-more span {
  background-color: #3b3b3b;
}
body[data-series=doors] #goods-view .related .btn-more span:before {
  background-color: #3b3b3b;
}
 */
/* --------------------------------------------
   製品のお問い合わせ
-------------------------------------------- */
#inquiry .form-wrap {
  padding: 15px;
  line-height: 24px;
  border: #ddd solid 1px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}
#inquiry .remarks {
  margin-bottom: 20px;
  color: #666;
  line-height: 24px;
}
#inquiry .form-wrap .btn-style {
  margin: 0 auto;
  width: 178px;
}
body[data-series=flooring] #inquiry .remarks {
  color: #e1d8d3;
}
body[data-series=flooring] #inquiry .form-wrap {
  border: #473931 solid 1px;
}
@media only screen and (min-width:570px) {
  #inquiry .form-wrap .btn-style {
    margin-top: 15px;
  }
}
@media only screen and (min-width:640px) {
  #inquiry .remarks {
    text-align: center;
  }
  #inquiry .form-wrap {
    padding: 30px 30px 20px;
  }
}
@media only screen and (min-width:1200px) {
  #inquiry .form-wrap {
    padding: 40px 40px 25px;
  }
}
/* table - 框架 */
.list-tb {
  width: 100%;
}
.list-tb thead {
  position: relative;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}
.list-tb tr {
  display: table-row;
}
.list-tb th,
.list-tb td {
  display: table-cell;
}
.list-tb tbody {
  display: table-row-group;
}
.list-tb tbody tr {
  display: table-row;
}
/* table - 樣式 */
.list-tb thead th {
  color: #fff;
  font-weight: normal;
  text-align: center;
  line-height: 32px;
  background-color: #5d5c53;
}
.list-tb tbody th a,
.list-tb tbody td a {
  word-break: normal;
  text-decoration: none;
  overflow: hidden;
}
.list-tb tbody th,
.list-tb tbody td {
  padding: 10px;
  font-size: 1.25rem;
  font-size: 0.9375rem;
  text-align: center;
  line-height: 20px;
  border-bottom: #ddd solid 1px;
}
.list-tb tbody td.type a {
  font-weight: 300;
}
.list-tb tbody td a {
  color: #000;
}
.list-tb tbody td a:hover {
  color: #777142;
}
.list-tb .box {
  margin: 0 auto;
}
.list-tb .name .size {
  margin-top: 5px;
  font-size: 0.8125rem;
  color: #888;
}
.list-tb .wan-spinner input[type="text"] {
  border: 0;
  border-radius: 0;
}
.list-tb .del a {
  color: #999;
  font-weight: 300;
}
.list-tb .del a:hover {
  color: #777142;
}
body[data-series=flooring] .list-tb thead th {
  background-color: #564338;
}
body[data-series=flooring] .list-tb tbody th,
body[data-series=flooring] .list-tb tbody td {
  border-bottom: #564338 solid 1px;
}
body[data-series=flooring] .list-tb tbody td a {
  color: #e1d8d3;
}
body[data-series=flooring] .list-tb tbody td a.plus,
body[data-series=flooring] .list-tb tbody td a.minus {
  color: #999;
}
@media only screen and (max-width:569px) {
  .list-tb thead {
    display: none;
  }
  .list-tb tbody,
  .list-tb tbody tr,
  .list-tb tr,
  .list-tb td {
    display: block;
    line-height: 32px;
  }
  .list-tb tbody tr {
    margin-bottom: 30px;
  }
  .list-tb tbody th,
  .list-tb tbody td {
    padding: 8px 5px;
    width: 100%;
    text-align: left;
  }
  .list-tb tbody th[data-title]:before,
  .list-tb tbody td[data-title]:before {
    content: attr(data-title);
    margin-right: 10px;
    float: left;
    width: 50px;
    color: #000;
    vertical-align: top;
  }
  .list-tb .goods {
    border-bottom: 0;
  }
  .list-tb .goods .box {
    width: 150px;
  }
  .list-tb tbody td.type {
    font-size: 1.5rem;
    font-size: 1.125rem;
    text-align: center;
  }
  .list-tb tbody td.name a {
    float: left;
    width: 72%;
  }
  .list-tb .input-style {
    display: inline-block;
    width: 60%;
  }
  .list-tb td.qa[data-title]:before {
    vertical-align: middle;
    line-height: 38px;
  }
  .list-tb td.qa span {
    display: inline-block;
    margin-left: 5px;
    vertical-align: top;
    line-height: 38px;
  }
  .list-tb .del-l {
    display: none;
  }
  .list-tb .del a {
    font-size: 1.25rem;
    font-size: 0.9375rem;
  }
  .list-tb .del a span {
    display: inline-block;
    margin-right: 5px;
  }
}
@media only screen and (min-width:570px) {
  .list-tb .hide570 {
    display: none;
  }
  .list-tb .del {
    width: 8%;
  }
  .list-tb .del a {
    font-size: 1.5rem;
    font-size: 1.125rem;
  }
  .list-tb .goods {
    width: 10%;
  }
  .list-tb .goods .box {
    width: 70px;
  }
  .list-tb .goods .view {
    display: none;
  }
  .list-tb .name {
    padding-left: 30px;
    text-align: left;
  }
  .list-tb td.qa span {
    display: none;
  }
  .list-tb .input-txt {
    width: 27%;
  }
  .list-tb .input-txt input {
    margin: 0 auto;
    width: 75%;
  }
  .list-tb .input-txt span {
    display: none;
  }
}
@media only screen and (min-width:640px) {
  .list-tb .input-txt {
    width: 30%;
  }
}
@media only screen and (min-width:992px) {
  .list-tb .input-txt {
    width: 25%;
  }
  .list-tb .name .size {
    margin-top: 10px;
  }
}
#inquiry .form {
  margin: 30px auto 0;
  max-width: 1150px;
}
#inquiry .form h3 {
  margin-bottom: 20px;
}
#inquiry .form h3 small {
  padding-left: 18px;
  font-size: 0.8125rem;
}
#inquiry .btn-wrap {
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
@media only screen and (min-width:570px) {
  #inquiry .form {
    margin-top: 40px;
  }
}
@media only screen and (min-width:992px) {
  #inquiry .form h3 {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width:1024px) {
  #inquiry .form {
    margin-top: 50px;
  }
}
/* --------------------------------------------
   施工事例 - 列表
-------------------------------------------- */
#case-list .content {
  padding-bottom: 50px;
}
#case-list .list .col-md-3 {
  float: none !important;
  display: inline-block !important;
  vertical-align: top !important;
}
/* 篩選 */
.filter {
  position: relative;
  margin-bottom: 30px;
}
.filter .ti {
  position: absolute;
  z-index: 1;
  top: -8px;
  left: 10px;
  width: 50px;
  color: #000;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  background-color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.filter .wrap {
  position: relative;
  padding: 16px 18px 8px;
  border: #dedede solid 1px;
}
.filter .wrap:before,
.filter .wrap:after {
  display: block;
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
}
.filter .wrap:before {
  top: -1px;
  right: -1px;
  border-top: #999 solid 1px;
  border-right: #999 solid 1px;
}
.filter .wrap:after {
  bottom: -1px;
  left: -1px;
  border-bottom: #999 solid 1px;
  border-left: #999 solid 1px;
}
.accoradion-wrap > div {
  margin-bottom: 6px;
  padding-top: 6px;
  border-top: #ededed solid 1px;
}
.filter .wrap .form-group {
  margin-bottom: 0;
}
.filter label.item {
  color: #525149;
}
.filter .form-group.sn {
  padding-bottom: 10px;
  padding-top: 5px;
}
.filter .input-style {
  display: block;
  padding: 0 8px;
  width: 100%;
  max-width: calc(100% - 86px);
  height: 30px;
  font-weight: normal;
  line-height: 30px;
  border: #ccc solid 1px;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none #fff;
  border-radius: 2px;
}
.filter .btn-wrap {
  margin-top: 15px;
  width: auto;
}
.filter button {
  display: inline-block;
  width: 49%;
  font-size: 0.75rem;
  line-height: 28px;
  border-radius: 3px;
  white-space: nowrap;
}
#designer-list .filter .input-style {
  max-width: calc(100% - 129px);
}
@media only screen and (min-width:768px) {
  .accoradion-wrap {
    display: block !important;
  }
}
@media only screen and (max-width:767px) {
  .filter {
    min-height: 5px;
    margin-top: 25px;
  }
  .filter .ti {
    top: -9px;
    left: 10px;
    width: 86px;
    font-size: 1rem;
    text-align: center;
    display: none;
  }
  .filter .ti span {
    padding-left: 5px;
    font-size: 0.8125rem;
    font-style: normal;
  }
  .filter .ti.is-visible {
    left: 10px;
    background-color: #fff;
  }
  .filter .btn-open {
    position: absolute;
    z-index: 2;
    top: -10px;
    right: 18px;
    width: auto;
    height: 22px;
    white-space: nowrap;
    cursor: pointer;
    background-color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .filter .btn-open:before {
    content: 'Filter';
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0.9375rem;
    padding-left: 3px;
    font-weight: 600;
  }
  .filter .btn-open:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
    width: 15px;
    height: 15px;
    margin-top: -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z'/%3E%3C/svg%3E") no-repeat 0 0 / contain;
  }
  .filter .btn-open.is-visible {
    right: 18px;
  }
  .filter .accoradion-wrap {
    display: none;
  }
}
@media only screen and (min-width:415px) {
  .filter .btn-wrap {
    float: right;
  }
  .filter button {
    width: 110px;
  }
}
@media only screen and (min-width:767px) {
  .filter .ti span {
    display: none;
  }
  .filter .btn-open {
    display: none;
  }
  .filter .select {
    display: block !important;
  }
}
/* 列表 */
#case-list .list {
  margin-bottom: 20px;
  font-size: 0;
}
#case-list .list .box {
  margin-bottom: 30px;
  font-size: 1rem;
}
#case-list .list .box a {
  text-decoration: none;
}
#case-list .list .pic-over a.unlink {
  cursor: default;
}
#case-list .list .pic-over a.unlink .icon,
#case-list .list .pic-over a.unlink .mask {
  display: none;
}
#case-list .list .box h3 {
  margin: 15px 0 0 0;
  min-height: 55px;
  font-size: 1rem;
  color: #000;
  font-weight: normal;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
#case-list .list .box h3 small {
  display: block;
  margin-top: 8px;
  font-size: 0.9375rem;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
#case-list .list .box h3:after {
  display: block;
  content: '';
  margin-top: 12px;
  width: 22px;
  height: 1px;
  background-color: #5d5c53;
}
#case-list .list .box:hover h3 {
  color: #777142;
}
#case-list .list .box img.case {
  max-height: 280px !important;
}
@media only screen and (max-width:515px) {
  #case-list .list > div {
    /* width: 100%; */
    display: inline-block;
    vertical-align: top;
    float: none
  }
}
@media only screen and (min-width:768px) {
  #case-list .list .box {
    margin-bottom: 40px;
  }
}
/* --------------------------------------------
   施工事例 - 詳細
-------------------------------------------- */#case-view {
  /* 為了使內部sticky正常不能更改overflow */
  overflow: visible;
}
#case-view .content {
  padding-bottom: 50px;
}
#case-view .box-l {
  position: relative;
  width: 100%;
}
#case-view .info {
  font-size: 0.9375rem;
}
#case-view .subhead {
  margin: 0;
  font-size: 1.5rem;
  color: #000;
  font-weight: normal;
  line-height: 24px;
}
#case-view .subhead small {
  display: block;
  margin-top: 10px;
  font-size: 1.125rem;
  color: #000;
}
#case-view .box-r .subhead {
  margin-bottom: 15px;
}
#case-view .info .brief {
  padding: 15px 0;
  color: #222;
  line-height: 28px;
}
#case-view .info .data h4 {
  width: 100%;
  display: inline-block;
  margin: 0;
  font-size: 1rem;
  font-weight: normal;
  white-space: nowrap;
}
#case-view .info .data h4 i {
  display: inline-block;
  margin: -5px 8px 0 0;
  width: 26px;
  font-size: 1.625rem;
  text-align: center;
  vertical-align: middle;
}
#case-view .info .data li:first-child h4 i {
  font-size: 1.75rem;
}
#case-view .info .data a {
  color: #555;
  text-decoration: none;
}
#case-view .info .data a:hover {
  color: #777142;
}
#case-view .info .data .community-links {
  padding-left: 130px;
  justify-content: flex-start;
  margin-top: 3px;
}
#case-view .info .data .community-links a {
  color: #fff;
}
#case-view .info .data .btn-open {
  color: #555;
  text-decoration: none;
}
#case-view .info .data .btn-open:hover,
#case-view .info .data .btn-open.is-visible {
  color: #777142;
}
#case-view .info .scrollbar {
  margin: 10px 0;
  overflow: hidden;
}
#case-view .info .scrollbar .mCSB_inside > .mCSB_container {
  margin-right: 12px;
}
#case-view .info .scrollbar .mCSB_scrollTools {
  width: 4px;
}
#case-view .info .goods-pic li {
  margin-bottom: 15px;
  padding: 0 3px;
  width: 100%;
  max-width: 75px;
  display: inline-block;
  vertical-align: top;
}
#case-view .info .goods-pic li a {
  text-decoration: none;
}
#case-view .info .goods-pic h5 {
  margin: 5px 0 0 0;
  font-size: 0.8125rem;
  color: #000;
  text-align: center;
}
#case-view .info .goods-pic li a:hover h5 {
  color: #777142;
}
#case-view .box-r {
  width: 100%;
  margin-bottom: 20px;
}
#case-view .pic-wrap {
  position: relative;
}
#case-view .slick-wrap:not(.slick-initialized), 
#case-view .thumb-slick:not(.slick-initialized) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
}
#case-view .thumb-slick img {
  max-height: 86px!important;
}
#case-view .pic-wrap .slick-slider {
  margin-bottom: 0;
}
#case-view .pic-wrap .slick-wrap .box {
  position: relative;
  top: 0;
  outline: none;
}
#case-view .pic-wrap .slick-wrap .box img {
  display: block;
  width: 100%;
  height: auto;
}
#case-view .pic-wrap .thumb {
  position: relative;
  margin: 15px auto 0;
  padding: 0 35px;
  width: 100%;
  height: auto;
}
#case-view .pic-wrap .thumb-slick .slick-slide {
  padding: 0 4px;
}
#case-view .pic-wrap .thumb-slick a {
  display: block;
  padding-bottom: 1px;
  outline: none;
  background-color: #fff;
}
#case-view .pic-wrap .thumb-slick a img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .8;
  border: #dedede solid 1px;
}
#case-view .pic-wrap .thumb-slick .slick-current a img {
  border-color: #5d5c53;
}
#case-view .pic-wrap .thumb-slick a:hover img,
#case-view .pic-wrap .thumb-slick .slick-current a img {
  opacity: 1;
}
#case-view .info .data span.text {
  width: calc(100% - 160px);
  white-space: normal;
}
#case-view .pic-wrap .big .slick-arrow {
  border: none;
  border-radius:0;
  width: 45px;
  height: 45px;
  top: 50%;
  background-repeat: no-repeat;
  background-size: auto 25px;
  background-position: center;
  transform: translateY(-50%);
}
#case-view .pic-wrap .big .slick-arrow::before {
  display: none;
}
#case-view .pic-wrap .big .slick-prev {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50' enable-background='new 0 0 50 50' xml:space='preserve'%3E%3Cg%3E%3Cpolygon fill='%23333' points='36.646,1.721 36.646,12.252 23.809,25.025 36.646,37.801 36.646,48.279 13.354,25'/%3E%3C/g%3E%3C/svg%3E");
  left: -45px;
  border-radius: 0 25px 25px 0;
}
#case-view .pic-wrap .big .slick-next {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50' enable-background='new 0 0 50 50' xml:space='preserve'%3E%3Cg%3E%3Cpolygon fill='%23333' points='13.354,1.721 13.354,12.252 26.191,25.024 13.354,37.801 13.354,48.279 36.646,25'/%3E%3C/g%3E%3C/svg%3E%0A");
  right: -45px;
  border-radius: 25px 0 0 25px;
}
.btn-img-download {
  position: absolute;
  z-index: 100;
  right: 10px;
  bottom: 10px;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  background: #ffda00;
  -webkit-box-shadow: 0 0 15px rgb(0 0 0 / 20%);
  box-shadow: 0 0 15px rgb(0 0 0 / 20%);
  text-align: center;
  color: #000;
  font-size: 0;
}
.btn-img-download::before {
  content: '';
  display: block;
  width: 72%;
  height: 72%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M11 40q-1.2 0-2.1-.9Q8 38.2 8 37v-7.15h3V37h26v-7.15h3V37q0 1.2-.9 2.1-.9.9-2.1.9Zm13-7.65-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15Z'/%3E%3C/svg%3E") no-repeat 0 0/contain;
}
@media only screen and (max-width:460px) {
  #case-view .info .goods-pic li {
    width: calc(100% / 3);
  }
}
@media only screen and (min-width:414px) and (max-width:1199px) {
  #case-view .info .data li.pic .ti {
    display: block;
    float: left;
    width: 132px;
  }
  #case-view .info .data li.pic .scrollbar {
    margin-top: 0;
  }
}
@media only screen and (min-width:992px) {
  #case-view .page-current {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width:1200px) {
  #case-view {
    /* 為了使內部sticky正常不能更改overflow */
    overflow: visible;
  }
  #case-view .column-half {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #case-view .box-l {
    position: relative;
    margin-right: 30px;
    width: 260px;
  }
  #case-view .info {
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    width: 100%;
    background: #fff;
    overflow: hidden;
  }
  #case-view .box-r {
    width: calc(100% - 290px);
  }
  #case-view .pc-hide {
    display: none!important;
  }
  #case-view .info .data > li {
    border-bottom: #e5e5e5 solid 1px;
  }
  #case-view .info .data > li:last-child {
    border-bottom: 0;
  }
  #case-view .info .scrollbar {
    max-height: 300px;
    overflow-y: auto;
  }
  #case-view .info .scrollbar::-webkit-scrollbar {
    width: 5px;
    border-radius: 20px;
  }
  #case-view .info .scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    border-radius: 20px;
    background: rgba(200, 200, 200, 0.1);
  }
  #case-view .info .scrollbar::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 40px;
    background: rgba(200, 200, 200, 0.4);
  }
  #case-view .info .goods-pic {
    max-width: 260px;
  }
  #case-view .info .goods-pic li {
    width: calc(100% / 3);
  }
}
@media only screen and (min-width:1400px) {
  #case-view .box-l {
    margin: 15px 70px 0 20px;
    width: 260px;
  }
  #case-view .info .data span {
    display: inline-block;
    margin-right: 0;
    vertical-align: top;
  }
  #case-view .box-r {
    width: calc(100% - 350px);
  }
  #case-view .info .data span.text {
    width: calc(100% - 140px);
  }
}
@media (max-width:1199px) {
  #case-view .info {
    top: auto !important;
  }
  #case-view .mb-hide {
    display: none!important;
  }
}
@media (max-width:991px) {
  #case-view .pic-wrap .big .slick-arrow { 
    width: 35px;
  }
  #case-view .pic-wrap .big .slick-prev {
    background-color: #fff;
    left: 0
  }
  #case-view .pic-wrap .big .slick-next {
    background-color: #fff;
    right: 0
  }
}
@media (max-width:767px) {
  .btn-img-download {
    width: 40px;
    height: 40px;
  }
}
/* --------------------------------------------
   会社紹介 - 科定について
-------------------------------------------- */
#overview {
  line-height: 2;
}
#overview .p-wrap {
  max-width: 1280px;
  margin: auto;
}
#overview .page-current {
  margin-top: 0;
  padding-top: 15px;
}
#overview .zone-top {
  height: 780px;
}
#overview .ban-ti-box {
  max-width: 750px;
  margin: 70px auto 0;
  text-align: center;
  color: #fff;
}
#overview .ban-ti-box .htitle {
  margin: 0 0 55px 0;
  font-size: 2.0625rem;
  letter-spacing: 5px;
  font-weight: bold;
}
#overview .ban-ti-box p {
  margin: 0;
  font-size: 1rem;
}
#overview .zone-1 {
  height: 755px;
}
#overview .zone-1 .p-wrap {
  padding: 0 30px;
}
#overview .zone-1 .box {
  font-size: 0;
  padding-top: 85px;
}
#overview .zone-1 .box .pic,
#overview .zone-1 .box .txt {
  display: inline-block;
  vertical-align: top;
}
#overview .zone-1 .box .pic {
  width: 625px;
}
#overview .zone-1 .box .pic img {
  max-width: 100%;
}
#overview .zone-1 .box .txt {
  width: calc(100% - 625px);
  padding: 55px 30px 30px;
}
#overview .zone-1 .box .txt .ti {
  color: #cc1d24;
}
#overview .zone-1 .box .txt .ti .stit {
  margin: 0 0 20px 0;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 5px;
}
#overview .zone-1 .box .txt .ti span {
  font-size: 55px;
  font-family: Arial, Helvetica, sans-serif;
  color: rgba(204, 29, 36, .7);
}
#overview .zone-1 .box .txt p {
  font-size: 1rem;
  color: #222;
  margin-bottom: 30px;
  padding-left: 30px;
  text-align: justify;
}
#overview .zone-2 {
  height: 620px;
}
#overview .zone-2 .txt {
  max-width: 795px;
  margin: auto;
  color: #222;
  text-align: center;
  padding-top: 220px;
}
#overview .zone-2 .txt .stit {
  margin: 0 0 30px 0;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 4px;
}
#overview .zone-2 .txt p {
  margin-bottom: 0;
  font-size: 1rem;
}
.search-result {
  margin-bottom: 30px;
}
.gsc-adBlock {
  display: none !important;
}
@media (max-width:1400px) {
  #overview .zone-top {
    height: 680px;
  }
  #overview .zone-2 .txt {
    padding-top: 150px;
  }
}
@media (max-width:1399px) {
  #overview .zone-1 .p-wrap {
    padding: 0 20px;
  }
  #overview .zone-1 .box {
    padding: 85px 20px 0;
  }
  #overview .zone-1 .box .txt .ti .stit {
    letter-spacing: 0px;
    margin: 0 0 15px 0;
  }
  #overview .zone-1 .box .txt .ti span {
    font-size: 45px;
  }
  #overview .zone-1 .box .txt p {
    margin-bottom: 15px;
  }
  #overview .zone-1 {
    height: auto;
  }
}
@media (max-width:1199px) {
  #overview .zone-1 .box .pic {
    width: 500px;
  }
  #overview .zone-1 .box .txt {
    width: calc(100% - 500px);
  }
  #overview .zone-1 .box .txt .ti span {
    font-size: 1.5rem;
  }
  #overview .zone-1 .box .txt p {
    padding-left: 15px;
  }
}
@media (max-width:991px) {
  #overview .zone-top {
    height: auto;
  }
  #overview .ban-ti-box {
    margin: 30px auto 0;
  }
  #overview .ban-ti-box .htitle {
    margin: 0 0 35px 0;
  }
  #overview .zone-1 .box .pic {
    width: 430px;
  }
  #overview .zone-1 .box .txt {
    width: calc(100% - 430px);
    padding: 30px 0
  }
  #overview .zone-1 .box {
    padding: 75px 20px 0;
  }
  #overview .zone-2 {
    height: auto;
  }
  #overview .zone-2 .txt {
    width: 100%;
    max-width: unset;
    padding: 100px 20px 80px;
    text-align: left;
  }
  #overview .zone-2 .txt .stit,
  #overview .zone-1 .box .txt .ti .stit {
    text-align: center;
  }
}
@media (max-width:899px) {
  #overview .zone-1 .box .pic {
    display: block;
    width: 700px;
    margin: auto;
    text-align: center;
  }
  #overview .zone-1 .box .txt p {
    padding-left: 0;
  }
  #overview .zone-1 .box .txt {
    width: 100%;
  }
  #overview .zone-1 .box {
    padding: 45px 0px 0;
  }
}
@media (max-width:767px) {
  #overview .ban-ti-box {
    margin: 100px auto 0;
    padding: 0 20px;
  }
  #overview .zone-1 .box {
    padding: 45px 0 0;
  }
  #overview .zone-1 .box .pic {
    width: 100%;
  }
  #overview .pbn-links {
    margin: 0 25px
  }
}
@media (max-width:599px) {
  #overview .ban-ti-box {
    margin: 70px auto 0;
  }
  #overview .ban-ti-box .htitle {
    font-size: 1.75rem;
  }
  #overview .zone-2 .txt .stit {
    letter-spacing: 0;
  }
  #overview .zone-2 .txt .stit,
  #overview .zone-1 .box .txt .ti .stit {
    font-size: 1.125rem;
  }
  #overview .zone-2 .txt {
    padding: 55px 20px 35px;
  }
}
/* --------------------------------------------
   会社紹介 - 沿革
-------------------------------------------- */
#history .item-box {
  position: relative;
  color: #444;
}
#history .item-box:before,
#history .item-box:after {
  pointer-events: none;
  content: "";
  position: absolute;
  background-color: #fff;
}
#history .item-box:before {
  top: 22px;
  width: 100px;
  height: 4px;
}
#history .item-box:after {
  top: 22px;
  width: 4px;
  height: 100%;
}
#history .item-box:last-child:after {
  top: 22px;
  height: 4px;
}
#history .item-box .year {
  font-size: 2.5rem;
  font-family: 'Roboto Condensend';
}
#history .item-box .text {
  line-height: 1.5;
}
@media only screen and (max-width:1320px) {
  #history .list {
    margin: 0 auto;
    max-width: 1000px;
  }
}
@media only screen and (max-width:767px) {
  #history .page-content {
    padding: 0;
    background-color: #fff;
  }
  #history .page-main {
    padding-left: 10px;
    padding-right: 10px;
    background: none;
    background-color: #fff;
  }
  #history .item-box {
    margin-bottom: 15px;
    color: #222;
    font-size: 0.9375rem;
    border-bottom: 1px dotted #ccc;
  }
  #history .item-box .year {
    position: relative;
    padding-left: 10px;
    color: #cc1d24;
    font-size: 1.375rem;
  }
  #history .item-box .year:before,
  #history .item-box .year:after {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 3px;
  }
  #history .item-box .year:before {
    height: 13px;
    background-color: #CC1D24;
    z-index: 1;
  }
  #history .item-box .year:after {
    height: 18px;
    background-color: #000;
    z-index: 0;
  }
  #history .item-box:before,
  #history .item-box:after {
    display: none;
  }
  #history .item-box:nth-child(odd),
  #history .item-box:nth-child(even) {
    float: none;
    padding: 0 15px 15px;
    text-align: left;
  }
  #history .item-box:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }
}
#timeline {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  height: 600px;
  overflow: hidden;
}
#dates {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0 0 0 10px;
  width: 130px;
  height: 600px;
  overflow: hidden;
  float: left;
}
#dates li {
  position: relative;
  padding-left: 15px;
  height: 100px;
  color: #444;
  font-size: 1.625rem;
  list-style: none;
}
#dates li:before,
#dates li:after {
  pointer-events: none;
  content: "";
  position: absolute;
}
#dates li:before {
  top: 15px;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #444;
}
#dates li:after {
  left: -4px;
  top: 15px;
  width: 9px;
  height: 9px;
  background-color: #444;
  border-radius: 50%;
}
#dates a {
  color: #444;
  line-height: 38px;
  text-decoration: none;
}
#dates .selected {
  font-size: 2.5rem;
}
.issues-wrap {
  margin-top: 80px;
  padding-top: 80px;
  height: 400px;
  overflow: hidden;
  text-align: center;
}
#issues {
  margin: 0 auto;
  padding: 0;
  width: 400px;
  height: 400px;
  overflow: hidden;
}
#issues li {
  width: 400px;
  height: 400px;
  list-style: none;
}
#issues li .year {
  display: block;
  margin: 0 0 20px;
  padding: 50px 0 0;
  color: #333;
  font-size: 2.5rem;
  font-weight: normal;
}
#next:hover,
#prev:hover {
  background-position: 0 0;
}
#timeline #next,
#timeline #prev {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  overflow: hidden;
  text-indent: -9999px;
}
#timeline #next {
  bottom: 80px;
}
#timeline #prev {
  top: 80px;
}
#timeline #next:before,
#timeline #prev:before {
  display: block;
  position: absolute;
  content: '';
  left: 0;
  width: 60px;
  height: 60px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#timeline #next:before {
  top: -13px;
  border-right: #444 solid 4px;
  border-bottom: #444 solid 4px;
}
#timeline #prev:before {
  bottom: -13px;
  border-left: #444 solid 4px;
  border-top: #444 solid 4px;
}
#timeline #next.disabled {
  border-right: #ccc solid 4px;
  border-bottom: #ccc solid 4px;
}
#timeline #prev.disabled {
  border-left: #ccc solid 4px;
  border-top: #ccc solid 4px;
}
@media only screen and (max-width:1400px) {
  #dates {
    left: 100px;
  }
}
@media only screen and (max-width:1000px) {
  #timeline {
    height: 400px;
  }
  #dates {
    left: 40px;
  }
  .issues-wrap {
    margin-top: 0;
  }
  #timeline #next {
    bottom: 20px;
  }
  #timeline #prev {
    top: 20px;
  }
  #issues li .year {
    padding: 20px 0 0;
  }
}
@media only screen and (max-width:992px) {
  #timeline {
    height: 300px;
  }
  #dates {
    left: 5px;
  }
  #dates a {
    font-size: 0.875rem;
  }
  #dates .selected {
    font-size: 1.125rem;
  }
  #timeline #next {
    bottom: 10px;
    margin-left: 20px;
  }
  #timeline #prev {
    top: auto;
    bottom: 10px;
    margin-left: -5px;
  }
  #timeline #next,
  #timeline #prev {
    -webkit-transform: scale(.4);
    -ms-transform: scale(.4);
    transform: scale(.4);
  }
  #timeline #next:before,
  #timeline #prev:before {
    top: 0;
    left: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #timeline #next:before {
    left: -12px;
  }
  #timeline #prev:before {
    left: 12px;
  }
  .issues-wrap {
    padding-top: 10px;
  }
  #issues {
    padding-left: 100px;
    width: 100%;
    height: 300px;
  }
  #issues li {
    width: 100%;
    height: 300px;
    text-align: left;
  }
  #issues li .year {
    padding: 0;
    font-size: 1.375rem;
  }
  #issues li p {
    font-size: 0.875rem;
  }
}
/* --------------------------------------------
   会社紹介 - 経営理念
-------------------------------------------- */
#company {
  line-height: 26px;
}
#company .area-top {
  padding: 240px 0 0;
  min-height: 630px;
  color: #fff;
  text-align: center;
}
#company .area-top .slogan {
  font-size: 1.625rem;
}
#company .area-top .slogan strong {
  font-size: 2.1875rem;
  font-weight: normal;
}
#company .area-top .slogan.two {
  display: none;
}
#company .area-top .slogan2 {
  margin-bottom: 30px;
  font-size: 1.5rem;
  letter-spacing: 5px;
}
#company .area-top .summary {
  margin: 0 auto;
  max-width: 670px;
}
#company .area-mid {
  margin: 0 auto;
  padding: 100px 20px 150px;
  max-width: 1200px;
  text-align: center;
}
#company .box-list {
  margin: 0 auto;
  padding: 70px 0;
  max-width: 800px;
}
#company .box-list .box {
  float: left;
  position: relative;
  color: #333;
  width: 25%;
  font-size: 1rem;
}
#company .box-list .box span {
  display: block;
  position: relative;
  margin: 10px 0;
  z-index: 1;
}
#company .area-mid .slogan {
  margin-top: 20px;
  color: #cc1d24;
  font-size: 1.5rem;
  letter-spacing: 5px;
  font-weight: 600;
}
#company .area-mid .slogan span {
  font-size: 4.375rem;
  opacity: 0.7;
  font-family: 'Arial';
}
#company .area-mid .slogan span:last-child {
  display: inline-block;
  -webkit-transform: scale(-1);
  -ms-transform: scale(-1);
  transform: scale(-1);
}
#company .area-mid .summary {
  margin: 0 auto;
  padding: 20px 40px;
  max-width: 730px;
  color: #222;
  line-height: 2;
  font-size: 1rem;
}
#company .area-down {
  margin: 0 auto;
  padding: 20px;
  max-width: 1200px;
}
#company .area-down .img {
  position: relative;
  top: -120px;
  z-index: 0;
}
#company .area-down .img img {
  width: 100%;
}
#company .area-down .box-wrap {
  position: relative;
  top: -160px;
  margin: 0 auto;
  max-width: 1000px;
  padding: 50px 20px;
  text-align: center;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 11px rgba(0, 0, 0, .15);
  box-shadow: 0 1px 11px rgba(0, 0, 0, .15);
  z-index: 1;
}
#company .area-down .box {
  position: relative;
  padding: 100px 0;
}
#company .area-down .box:first-child:before {
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 2px;
  background-color: #cc1d24;
}
#company .area-down .slogan {
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: #222;
  font-weight: 600;
  letter-spacing: 5px;
}
#company .area-down .summary {
  margin: 0 auto;
  max-width: 660px;
  font-size: 1rem;
  line-height: 2;
}
@media only screen and (max-width:1440px) {
  #company .area-top {
    padding: 140px 0 180px;
    min-height: 0;
  }
  #company .area-mid {
    padding: 20px;
  }
  #company .area-down .img {
    top: -20px;
  }
  #company .area-down .box-wrap {
    top: -70px;
    max-width: 800px;
  }
  #company .area-down .box {
    padding: 50px 0;
  }
}
@media only screen and (max-width:992px) {
  #company .page-main {
    padding-left: 15px;
    padding-right: 15px;
  }
  #company .area-top {
    padding: 100px 0 120px;
  }
  #company .area-mid {
    padding: 0 20px 30px;
    background-color: #fff;
  }
  #company .box-list {
    padding: 50px 0;
    max-width: 600px;
  }
  #company .area-down .img {
    top: 0;
  }
  #company .area-down .box-wrap {
    top: 0;
    max-width: 100%;
  }
  #company .area-down .box {
    padding: 50px 0;
  }
}
@media only screen and (max-width:767px) {
  #company .area-top {
    padding: 50px 0;
  }
  #company .area-top .slogan {
    font-size: 0.9375rem;
  }
  #company .area-top .slogan strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.25rem;
  }
  #company .box-list,
  #company .area-mid .summary,
  #company .area-down .box-wrap,
  #company .area-down .box {
    padding: 20px 10px;
    max-width: 100%;
  }
  #company .box-list .box {
    padding: 0 10px;
  }
  #company .box-list img {
    width: 100%;
  }
  #company .area-mid .slogan,
  #company .area-down .slogan {
    font-size: 1.125rem;
  }
  #company .area-mid .slogan span {
    font-size: 2.5rem;
  }
}
@media only screen and (max-width:640px) {
  #company .box-list .box {
    width: 50%;
  }
  #company .box-list .box img {
    max-width: 70px;
  }
  #company .box-list .box span {
    margin-bottom: 20px;
  }
}
/* --------------------------------------------
   会社紹介 - 社長挨拶
-------------------------------------------- */
#boss .main {
  padding: 0 20px;
}
#boss .img-area {
  display: table-cell;
  max-width: 530px;
  width: calc(100% - 630px);
  vertical-align: bottom;
}
#boss .img-area img {
  width: 100%;
}
#boss .txt-area {
  display: table-cell;
  padding: 0 30px 20px;
  width: 630px;
  color: #444;
}
#boss .txt-area .slogan {
  margin: 15px 0;
  font-size: 1.625rem;
  font-weight: 600;
}
#boss .txt-area .slogan.two {
  display: none;
}
#boss .txt-area .text {
  line-height: 28px;
  font-size: 0.9375rem;
}
#boss .txt-area .text p {
  margin-bottom: 20px;
  text-align: justify;
  text-justify: auto;
}
#boss .boss-sign {
  font-size: 0.9375rem;
  text-align: right;
}
#boss .boss-sign .title {
  padding-right: 15px;
}
#boss .boss-sign .name {
  float: right;
  position: relative;
  padding-left: 30px;
}
#boss .boss-sign .name:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 1px;
  background-color: #444;
}
@media only screen and (min-width:1200px) {
  #boss .img-area img {
    width: 110%;
    -webkit-transform: translateX(-10%);
    -ms-transform: translateX(-10%);
    transform: translateX(-10%);
  }
}
@media only screen and (max-width:1199px) {
  #boss .img-area,
  #boss .txt-area {
    display: block;
    padding: 0;
    max-width: 100%;
    width: 100%;
  }
  #boss .img-area {
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  #boss .img-area img {
    width: 60%;
    max-width: 280px;
  }
  #boss .txt-area {
    padding-bottom: 20px;
  }
}
@media only screen and (max-width:767px) {
  #boss .main {
    padding: 0 5px;
  }
  #boss .img-area {
    float: none;
    margin: 20px auto 10px;
    width: 200px;
  }
  #boss .img-area img {
    width: 100%;
  }
  #boss .txt-area {
    float: none;
    margin: 0;
    width: 100%;
  }
  #boss .txt-area .slogan.one {
    display: none;
  }
  #boss .txt-area .slogan.two {
    display: block;
  }
  #boss .txt-area .slogan {
    margin: 20px 0 0;
    text-align: center;
    font-size: 1.125rem;
  }
  #boss .txt-area .text {
    padding: 10px 0;
    font-size: 0.9375rem;
  }
}
/* --------------------------------------------
   グローバル拠点
-------------------------------------------- */
#global .area-links {
  margin-bottom: 3px;
  background: #f8f8f8;
  padding: 25px 25px 10px;
}
#global .area-links:nth-child(odd) {
  background: #f8f8f8;
}
#global .area-links .title {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 180px;
  margin: 0;
  padding: 8px 0 0 0;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  color: #cc1d24;
}
/* #global .area-links .title:before {
  position: absolute;
  display: block;
  content: '';
  width: 18px;
  height: 2px;
  top: 0;
  background-color: #cc1d24;
} */
#global .area-links .box {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 180px);
  padding-top: 8px;
}
#global .area-links .box a {
  position: relative;
  display: inline-block;
  width: calc(100% / 7 - 4px);
  vertical-align: top;
  padding: 0 0 15px;
  padding-left: 15px;
  font-size: 0.9375rem;
  color: #222;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#global .area-links .box a.current,
#global .area-links .box a:hover {
  color: #cc1d24;
}
#global .area-links .box a:before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #999;
  left: 0;
  top: 8px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#global .area-links .box a:hover:before {
  background: #cc1d24;
}
@media (max-width:1199px) {
  #global .area-links .box a {
    width: calc(100% / 5 - 4px);
  }
}
@media (max-width:991px) {
  #global .area-links .title {
    width: 150px;
  }
  #global .area-links .box {
    width: calc(100% - 150px);
  }
  #global .area-links .box a {
    width: calc(100% / 4 - 4px);
  }
}
@media (max-width:767px) {
  #global .area-links .title {
    width: 100px;
  }
  #global .area-links .box {
    width: calc(100% - 100px);
  }
  #global .area-links .box a {
    width: calc(100% / 3 - 4px);
  }
}
@media (max-width:639px) {
  #global .area-links .title,
  #global .area-links .box {
    width: 100%;
  }
}
#global th {
  font-weight: normal;
  min-height: 40px;
}
#global th.order {
  text-align: right;
}
#global th.en {
  letter-spacing: 0;
}
#global th.tel {
  text-align: center;
}
#global th.tel .num {
  padding: 5px 0;
}
#global .fa-map-marker {
  margin-right: 5px;
  font-size: 1.125rem;
  color: #777;
}
#global th.link {
  text-align: center;
}
#global th.link span {
  display: none;
  height: 26px;
  padding: 4px 0 0 10px;
}
#global a.location-btn,
#global a.location-map {
  display: inline-block;
  margin: 2px;
  line-height: 1.2;
  padding: 8px;
  width: calc(50% - 25px);
  max-width: 130px;
  text-align: center;
  color: #666;
  font-size: 0.8125rem;
  border: 1px solid #999;
  vertical-align: middle;
  border-radius: 4px;
  text-decoration: none;
}
#global a.location-btn:hover,
#global a.location-map:hover,
#global .open .location-map {
  text-decoration: none;
  color: #fff;
  background-color: #d22027;
  border: 1px solid #d22027;
}
#global a.location-map {
  width: 130px;
}
#global .title span {
  display: inline-block;
  vertical-align: middle;
}
#global .map-wrap {
  display: none;
  padding: 10px 0;
  border-bottom: none;
  margin-bottom: 10px;
}
#global .map-box {
  height: 385px;
}
#global .map-box iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
}
#global .open .fa-map-marker {
  color: #cc1d24;
}
#global .open th {
  background: url("../images/line2.png") left bottom repeat-x;
}
#global .open .map-wrap {
  display: table-cell;
}
#global .open .map-wrap .txt,
#global .open .map-wrap .map-box {
  padding: 15px;
}
#global .open .map-wrap .txt:after {
  content: '';
  clear: both;
  display: table;
}
#global .open .map-wrap .map-box {
  position: relative;
  margin-top: 10px;
}
#global .open .map-wrap .map-box > iframe {
  left: 0;
  top: 0;
  position: absolute;
}
@media only screen and (min-width:768px) {
  #global tbody th:before,
  #global tbody td:before {
    pointer-events: none;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
  }
  #global tbody td:before {
    background-color: #eee;
  }
  #global a.location-btn,
  #global a.location-map {
    width: 130px;
  }
}
@media only screen and (max-width:767px) {
  #global th.tel {
    text-align: right;
  }
  #global th.tel .num {
    padding: 0;
  }
  #global th.link {
    position: relative;
    border-bottom: none;
    text-align: center;
  }
  #global th.link:before,
  #global th.link:after {
    display: none;
    pointer-events: none;
    content: "";
    position: absolute;
    background-color: #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #global th.link:before {
    top: 19px;
    right: 12px;
    width: 12px;
    height: 2px;
  }
  #global th.link:after {
    top: 14px;
    right: 17px;
    width: 2px;
    height: 12px;
  }
  #global .open th.link:before,
  #global .open th.link:after {
    display: block;
    z-index: 1;
  }
  #global th.link span {
    display: inline-block;
  }
  #global .fa-map-marker {
    display: none;
  }
  #global .map-box {
    height: 280px;
  }
  #global .open .map-wrap {
    display: block;
    padding: 0;
    width: 100%;
  }
  #global th {
    text-align: left;
  }
  #global .open th {
    background: none;
  }
  #global .open th.title {
    color: #fff;
    background-color: #000;
  }
  #global .open th.link span:before {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 3px;
    right: 2px;
    width: 32px;
    height: 32px;
    background-color: #cc1d24;
    z-index: 0;
  }
  #global .open th.link span {
    display: inline-block;
  }
}
/* --------------------------------------------
   会社紹介 - 品質認證
-------------------------------------------- */
#quality .quality-ti {
  margin: 10px 0 15px;
  padding-bottom: 15px;
  font-size: 1.125rem;
  color: #333;
  line-height: 22px;
  background: url(../images/line1.png) 0 bottom repeat-x;
}
#quality .gridder-list img,
#quality .gri-list img {
  max-width: 100%;
  height: auto;
}
#quality .gridder-list,
#quality .gri-list {
  margin: 25px 0;
  width: 20%;
}
#quality .gridder-list .pic,
#quality .gri-list .pic {
  width: 100%;
  max-width: 185px;
  position: relative;
  margin: 0 auto;
  background-color: #fff;
}
#quality .gridder-list .pic:before,
#quality .gridder-list .pic:after {
  display: none;
  pointer-events: none;
  content: "";
  position: absolute;
}
#quality .gridder-list .pic:before {
  bottom: 0;
  right: 0;
  width: 56px;
  height: 53px;
  background: url("../images/zoom.png");
  z-index: 11;
}
#quality .gridder-list .pic:after {
  opacity: 0;
  bottom: -16px;
  left: -16px;
  width: 70px;
  height: 70px;
  /*background: url("../images/quality_shadow.png") 0 bottom;*/
  z-index: 1;
}
#quality .gridder-list .pic div {
  position: relative;
  background-color: #fff;
  z-index: 2;
}
#quality .gridder-list .pic div:before,
#quality .gridder-list .pic div:after {
  display: none;
  pointer-events: none;
  content: "";
  position: absolute;
}
#quality .gridder-list .pic div:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .7);
}
#quality .gridder-list .pic div:after {
  top: 50%;
  left: 50%;
  margin: -22.5px 0 0 -22.5px;
  width: 45px;
  height: 45px;
  background: url("../images/zoom2.png");
}
#quality .gridder-list,
#quality .gri-list {
  display: inline-block;
  vertical-align: top;
}
#quality .gridder-show {
  display: block;
  float: left;
  position: relative;
  padding: 30px 40px 20px;
  color: #777;
  font-size: 0.875rem;
  line-height: 34px;
  background: #fff;
  border: 1px solid #ddd;
}
#quality .gridder-show.disNone {
  height: 0;
  opacity: 0;
  display: none !important;
}
#quality .gridder-show:before,
#quality .gridder-show:after {
  pointer-events: none;
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  background-color: transparent;
  z-index: 1;
}
#quality .gridder-show:before {
  right: -1px;
  top: -1px;
  border-right: 1px solid #a6a6a6;
  border-top: 1px solid #a6a6a6;
}
#quality .gridder-show:after {
  left: -1px;
  bottom: -1px;
  border-left: 1px solid #a6a6a6;
  border-bottom: 1px solid #a6a6a6;
}
#quality .gridder-show.loading {
  background: #eee url("../images/loading.gif") no-repeat center;
}
#quality .gridder-content {
  display: none;
}
.mfp-zoom-out-cur #quality .gridder-content,
.mfp-zoom-out-cur #quality .gridder-show {
  display: none !important;
}
#quality .subject {
  position: relative;
  padding-bottom: 10px;
  margin: 10px 0;
  font-size: 1rem;
  text-align: center;
}
#quality .edit-wrap {
  line-height: 22px;
}
#quality .gridder-navigation .gridder-nav.disabled {
  opacity: .4;
}
#quality .gridder-list {
  cursor: pointer;
}
#quality .gridder-list:hover {
  opacity: 0.8;
}
#quality .hasSelectedItem .selectedItem .pic:before {
  display: none;
}
#quality .hasSelectedItem .selectedItem .pic:after {
  opacity: 1;
}
#quality .hasSelectedItem .gridder-list.selectedItem {
  opacity: 1;
}
#quality .gridder-navigation {
  position: absolute;
  top: -10px;
  left: 30px;
  width: 100%;
  height: 20px;
  z-index: 2;
}
#quality .gridder-navigation:before,
#quality .gridder-navigation:after {
  pointer-events: none;
  position: absolute;
}
#quality .gridder-navigation:before {
  content: "Certification";
  top: -6px;
  left: 10px;
  font-family: 'Roboto Condensend';
  color: #c62329;
  font-style: italic;
  font-size: 0.9375rem;
  z-index: 1;
}
#quality .gridder-navigation:after {
  content: "";
  top: 0;
  left: 0;
  width: 110px;
  height: 20px;
  background-color: #FFF;
  z-index: 0;
}
#quality .gridder-close {
  position: absolute;
  top: 15px;
  right: 35px;
  width: 30px;
  height: 30px;
  color: #888;
  font-size: 1.25rem;
  line-height: 30px;
  text-align: center;
  font-weight: normal;
  z-index: 2;
  text-decoration: none;
  background-color: #fff;
}
#quality .gridder-close:before,
#quality .gridder-close:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 5px;
  left: 15px;
  width: 1px;
  height: 20px;
  background-color: #000;
}
#quality .gridder-close:before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#quality .gridder-close:after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media (max-width:1200px) {
  #quality .gridder-list {
    width: 25%;
  }
}
@media (max-width:992px) {
  #quality .gridder-list {
    width: 33.3%;
  }
}
@media (max-width:735px) {
  #quality .content {
    padding: 0 10px;
  }
  #quality .gridder-list {
    margin: 0 0 20px;
    width: 50%;
    padding: 0;
  }
  #quality .gridder-list .pic div {
    padding-left: 5px;
    padding-right: 5px;
  }
  #quality .gridder-show {
    margin: 0 auto 10px;
    padding: 10px 15px;
    width: 100%;
  }
  #quality .gridder-close {
    top: -30px;
    right: -15px;
  }
}
/* --------------------------------------------
   お問い合わせ
-------------------------------------------- */
#contact .edit-wrap {
  margin-bottom: 35px;
}
#contact img {
  max-width: 100%;
  height: auto;
}
#contact #footer {
  margin-top: 40px;
}
@media only screen and (min-width:768px) {
  #contact #footer {
    margin-top: 60px;
  }
}
#contact .max-w-200 {
  max-width: 200px;
}
#contact .info {
  padding-top: 13px;
}
#contact .info .box {
  position: relative;
  margin-bottom: 30px;
  padding: 25px 20px 15px;
  border: #ddd solid 1px;
}
#contact .info .box:before,
#contact .info .box:after {
  display: block;
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
}
#contact .info .box:before {
  top: -1px;
  right: -1px;
  border-top: #999 solid 1px;
  border-right: #999 solid 1px;
}
#contact .info .box:after {
  bottom: -1px;
  left: -1px;
  border-bottom: #999 solid 1px;
  border-left: #999 solid 1px;
}
#contact .info .box h3 {
  position: absolute;
  z-index: 1;
  top: -13px;
  left: 10px;
  margin: 0;
  padding: 5px 10px 4px;
  font-size: 0.875rem;
  color: #000;
  text-align: center;
  background-color: #fff;
}
#contact .info .box h3 small {
  display: inline-block;
  margin-right: 3px;
  font-size: 0.875rem;
  color: #000;
  font-weight: 700;
  font-style: italic;
  vertical-align: middle;
}
#contact .info .box h4 {
  margin: 0;
  font-size: 0.875rem;
  color: #333;
  line-height: 20px;
}
#contact .info .box h4 span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  color: #333;
}
#contact .info .box h4 a {
  color: #333;
}
#contact .info .box ul li {
  margin-bottom: 10px;
}
#contact .info .box ul li:last-child {
  margin-bottom: 0;
}
#contact .info .box ul li h4 span {
  margin-bottom: 0;
}
@media only screen and (min-width:992px) {
  #contact .info {
    padding-right: 40px;
    float: left;
    width: 280px;
  }
  #contact .info .box {
    margin-bottom: 45px;
  }
  #contact .info .box:last-child {
    margin-bottom: 0;
  }
}
@media only screen and (min-width:1200px) {
  #contact .info {
    padding-right: 70px;
    width: 320px;
  }
}
#contact .form {
  overflow: hidden;
}
/* --------------------------------------------
   實績上傳
-------------------------------------------- */
.pop-win {
  position: relative;
  margin: 0 auto;
  width: 800px;
}
.pop-win .title {
  padding: 18px;
  color: #fff;
  font-size: 1.125rem;
  text-align: center;
  background-color: #000;
}
.pop-win .main-wrap-area {
  position: relative;
  padding: 20px;
  font-size: 1rem;
  background-color: #fff;
}
.pop-win .main-wrap-area:before {
  pointer-events: none;
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: url("../images/select_pop_bg.png") center no-repeat;*/
}
.pop-win .mfp-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  font-size: 0;
  background-color: transparent;
  opacity: 1;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.pop-win .mfp-close:before,
.pop-win .mfp-close:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -13px 0 0 0;
  width: 1px;
  height: 26px;
  background-color: #fff;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.pop-win .mfp-close:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.pop-win .mfp-close:after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.pop-win .mfp-close:hover {
  background-color: #fff;
}
.pop-win .mfp-close:hover:before,
.pop-win .mfp-close:hover:after {
  background-color: #000;
}
@media only screen and (max-width:1024px) {
  .pop-win {
    max-width: 1000px;
    width: 100%;
  }
}
#list-import {
  text-align: left;
  font-size: 0.875rem;
}
#list-import .import-list {
  margin: 0;
  padding: 0;
  text-align: left;
}
#list-import .import-list li {
  display: block;
  position: relative;
  padding: 2px 10px 2px 18px;
  margin: 0 0 5px 0;
  line-height: 1.5;
}
#list-import .import-list li:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  width: 6px;
  height: 6px;
  background-color: #cc1d24;
}
.drop-file {
  position: relative;
  margin: 10px 0;
  min-height: 130px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  background: #fff;
  border-radius: 6px;
  text-align: center;
}
.drop-file .plupload-file-wrap {
  margin-top: 15px;
  height: 100%;
}
.drop-file label.file-btn {
  width: 120px;
  height: 34px;
  color: #999;
  line-height: 34px;
  border: 1px solid #ababab;
  border-radius: 2px;
  z-index: 1;
  cursor: pointer;
}
.drop-file label.file-btn:hover {
  color: #222;
  background-color: #ccc;
}
.drop-file .info {
  display: block;
  margin-top: 5px;
}
.drop-file .plupload-file-queue {
  padding-bottom: 5px;
}
.drop-file input[type=file] {
  display: block;
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  /* z-index: -999;
  width: 1px;
  height: 1px;
  overflow: hidden; */
}
#updata .form-group .input-style.two {
  margin-bottom: 10px;
}
#updata .btn-wrap {
  max-width: 100%;
  text-align: right;
}
#updata .btn-wrap ul {
  display: inline-block;
  font-size: 0;
}
#updata .btn-wrap li {
  display: inline-block;
  min-width: 120px;
  font-size: 15px;
}
#updata input[type=file] {
  height: 38px;
}
#updata input[type=file]::file-selector-button {
  margin-top: 8px;
}
@media screen and (max-width: 479px) {
  #updata .input-txt {
    width: 100%;
  }
}
/* --------------------------------------------
   お問い合わせ + 實績上傳等表單
-------------------------------------------- */
.form h3 {
  position: relative;
  margin: 0 0 15px 0;
  padding-bottom: 15px;
  font-size: 1rem;
  color: #000;
  border-bottom: #ddd solid 1px
}
.form h3:after {
  display: block;
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 65px;
  height: 1px;
  background-color: #000;
}
.form p {
  margin: 0 0 20px 0;
  color: #666;
  line-height: 24px;
}
.form .form-group .ti-label {
  width: 140px;
  font-size: 0.875rem;
  line-height: 30px;
}
.form .form-group .ti-label + div {
  width: calc(100% - 140px)
}
.form .form-group .ti-label span {
  padding-left: 5px;
  color: #db2724;
}
.form .form-group ul li {
  vertical-align: middle;
}
.form .form-group .remarks {
  color: #888;
}
.form .code .input-txt div {
  overflow: hidden;
}
.form .code .input-txt span {
  float: right;
  display: block;
  margin-left: 3px;
  width: 100px;
  height: 30px;
  overflow: hidden;
}
.form .code .input-txt span img {
  display: block;
  max-width: 100%;
  height: auto;
}
.form .btn-wrap {
  margin-top: 10px;
}
@media only screen and (min-width:480px) {
  .form .btn-wrap {
    padding-left: 138px;
  }
}
@media only screen and (max-width:479px) {
  .form .form-group .ti-label {
    width: 100%;
  }
  .form .form-group .ti-label + div {
    width: 100%
  }
}
.cke_editable .edit-wrap {
  max-width: 910px;
}
#cont-form-wrap.form {
  margin-top: 35px;
}
#contact .edit-wrap .info-box,
.cke_editable .info-box {
  display: inline-block;
  width: calc(100% / 3 - 4px);
  padding: 15px;
  margin-bottom: 20px;
  vertical-align: top;
  border-bottom: 1px dashed #ddd;
}
#contact .edit-wrap .info-box .img,
.cke_editable .info-box .img {
  display: inline-block;
  width: 85px;
  height: auto;
  vertical-align: middle;
  margin-bottom: 10px;
}
#contact .edit-wrap .info-box img,
.cke_editable .info-box img {
  max-width: 100%;
  width: 100%;
}
#contact .edit-wrap .info-box p,
.cke_editable .info-box p {
  display: inline-block;
  width: calc(100% - 90px);
  vertical-align: middle;
  padding: 20px 10px 5px;
  color: #666;
}
.cke_editable .edit-wrap p {
  margin: 0 0 20px 0;
  color: #666;
  line-height: 24px;
}
.cke_editable .edit-wrap p span {
  padding-left: 5px;
  font-size: 1rem;
  color: #db2724;
}
#contact .edit-wrap .info-box p span,
.cke_editable .info-box p span {
  display: block;
  padding-left: 0;
  font-size: 0.875rem;
  color: #000;
}
@media (max-width:1225px) {
  #contact .edit-wrap .info-box .img,
  #contact .edit-wrap .info-box p,
  .cke_editable .info-box .img,
  .cke_editable .info-box p {
    display: block;
  }
  #contact .edit-wrap .info-box p,
  .cke_editable .info-box p {
    width: 100%;
    padding-left: 0;
  }
  #contact .edit-wrap .info-box p span,
  .cke_editable .info-box p span {
    display: inline-block;
    margin-top: 5px;
  }
}
@media (max-width:1199px) {
  #contact .edit-wrap .info-box p span,
  .cke_editable .info-box p span {
    display: block;
  }
  #contact .edit-wrap .info-box p,
  .cke_editable .info-box p {
    padding: 5px 0 0;
  }
}
@media (max-width:991px) {
  #contact .edit-wrap .info-box p span,
  .cke_editable .info-box p span {
    display: inline-block;
    margin-top: 5px;
  }
  #contact .edit-wrap .info-box p,
  .cke_editable .info-box p {
    text-align: center;
  }
  #contact .edit-wrap .info-box .img,
  .cke_editable .info-box .img {
    margin: 0 auto;
  }
}
@media (max-width:767px) {
  #contact .edit-wrap,
  .cke_editable {
    margin-bottom: 15px;
  }
  #contact .edit-wrap .info-box p,
  .cke_editable .info-box p {
    padding-left: 5px;
  }
  #contact .edit-wrap .info-box p span,
  .cke_editable .info-box p span {
    display: block;
  }
  #contact .edit-wrap .info-box p,
  .cke_editable .info-box p {
    text-align: left;
  }
  #contact .edit-wrap .info-box .img,
  .cke_editable .info-box .img {
    margin: 0;
  }
}
@media (max-width:639px) {
  #contact .edit-wrap .info-box,
  .cke_editable .info-box {
    width: 100%;
    margin-bottom: 13px;
    padding-top: 5px;
  }
  #contact .edit-wrap .info-box p,
  .cke_editable .info-box p {
    margin-bottom: 8px;
    padding-left: 0;
  }
  #contact .edit-wrap .info-box .img,
  #contact .edit-wrap .info-box p,
  .cke_editable .info-box .img,
  .cke_editable .info-box p {
    display: inline-block;
  }
  #contact .edit-wrap .info-box p,
  .cke_editable .info-box p {
    display: inline-block;
    width: calc(100% - 90px);
    padding-left: 5px;
  }
  #contact .edit-wrap .info-box p span,
  .cke_editable .info-box p span {
    display: inline-block;
  }
}
/* --------------------------------------------
最新消息
-------------------------------------------- */
#news {
  overflow: hidden;
}
#news .list {
  font-size: 0;
  margin: 0 -15px;
}
#news .box {
  display: inline-block;
  vertical-align: top;
  padding: 0 15px;
  margin: 0 0 15px 0;
  width: 25%;
}
#news .box a {
  display: block;
  font-size: 1rem;
}
#news .box a:hover {
  text-decoration: none;
}
#news .box img {
  width: 100%;
  line-height: 0;
}
#news .box .title {
  margin: 0;
  padding: 0;
  font-size: 1rem;
}
#news .box .date {
  font-size: 0.875rem;
  margin: 10px 0 5px;
  color: #cc1d24;
}
#news .box .date:before {
  display: block;
  content: '';
  margin-bottom: 8px;
  width: 26px;
  height: 2px;
  background-color: #cc1d24;
}
#news .box h3 {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: #333;
  line-height: 1.5;
  max-height: 3.375rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
#news.article-view .box {
  padding: 0;
}
@media only screen and (max-width:991px) {
  #news .list {
    margin: 0 -10px;
  }
  #news .box {
    padding: 0 10px;
    width: calc(100% / 3);
  }
}
@media only screen and (max-width:767px) {
  #news .box {
    width: 50%;
  }
}
@media only screen and (max-width:499px) {
  #news .list {
    margin: 0 auto;
  }
  #news .box {
    display: block;
    padding: 0;
    margin: 0 auto 20px;
    width: 100%;
    max-width: 285px;
  }
}
/* --------------------------------------------
ニュース
-------------------------------------------- */
#media {
  overflow: hidden;
}
#media .list {
  font-size: 0;
  margin: 0 -15px;
}
#media .box {
  display: inline-block;
  vertical-align: top;
  padding: 0 15px;
  margin: 0 0 30px 0;
  width: calc(100% / 3);
}
#media .box a {
  display: block;
  font-size: 1rem;
}
#media .box a:hover {
  text-decoration: none;
}
#media .box .pic {
  position: relative;
  overflow: hidden;
}
#media .box .pic::after {
  content: '';
  display: block;
  padding-bottom: 59.74%;
  position: relative;
}
#media .box .pic img {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#media .box .date {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  padding: 5px 10px;
  color: #fff;
  font-size: 0.875rem;
  background-color: #cc1d24;
}
#media .box h3 {
  margin: 10px 10px 0 10px;
  padding: 0;
  font-size: 0.9375rem;
  color: #333;
  line-height: 1.5;
  max-height: 3.375rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
#media .box.video .circle {
  z-index: 2;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
  width: 60px;
  height: 60px;
  outline: none;
  background: url(../images/btn_video.png) no-repeat 0 0;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
}
#media .box.video .circle div {
  position: relative;
  margin: 18px 0 0 23px;
  width: 20px;
  height: 22px;
}
#media .box.video .circle span {
  display: block;
  width: 1px;
  height: 23px;
  background-color: #fff;
}
#media .box.video .circle div:before,
#media .box.video .circle div:after {
  display: block;
  content: '';
  position: absolute;
  left: -2px;
  width: 22px;
  height: 1px;
  background-color: #fff;
}
#media .box.video .circle div:before {
  top: 5px;
  -webkit-transform: rotate(-145deg);
  -ms-transform: rotate(-145deg);
  transform: rotate(-145deg);
}
#media .box.video .circle div:after {
  bottom: 4px;
  -webkit-transform: rotate(145deg);
  -ms-transform: rotate(145deg);
  transform: rotate(145deg);
}
#media .box.video:hover .circle div {
  -webkit-animation: ani-btn .3s;
  animation: ani-btn .3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
#media .box.video:hover .circle {
  background-color: rgba(0, 0, 0, 0.6)
}
#media .video:not(.box) {
  position: relative;
  margin-bottom: 20px;
}
#media .video-wrap {
  padding: 20px 20px 8px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}
#media .video-box {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
#media .video-box .frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
@media only screen and (max-width:992px) {
  #media .list {
    margin: 0 -10px;
  }
  #media .box {
    padding: 0 10px;
  }
}
@media only screen and (max-width:767px) {
  #media .list {
    margin: 0 -5px;
  }
  #media .box {
    padding: 0 5px;
    width: 50%;
  }
  #media .box.video .circle {
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
  }
}
@media only screen and (max-width:499px) {
  #media .box {
    display: block;
    margin: 0 auto;
    max-width: 390px;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
  }
  #media .box:first-of-child {
    padding-top: 0;
  }
}
/* --------------------------------------------
   サイトマップ
-------------------------------------------- */
#sitemap a:hover {
  text-decoration: none;
}
#sitemap #footer {
  margin-top: 10px;
}
@media only screen and (min-width:768px) {
  #sitemap #footer {
    margin-top: 30px;
  }
}
#sitemap .list {
  font-size: 0;
  margin: 0 -15px;
}
#sitemap .list .box {
  margin-bottom: 40px;
  padding: 0 15px;
  width: 25%;
  display: inline-block;
  vertical-align: top;
}
#sitemap .list .box.wide {
  width: 100%;
}
#sitemap .tit-lg a,
#sitemap .tit-md a,
#sitemap .tit-sm a {
  display: block;
  color: inherit
}
#sitemap .tit-lg {
  position: relative;
  margin: 0 0 10px 0;
  padding: 10px 20px;
  line-height: 1.5;
  font-size: 1rem;
  color: #fff;
  background-color: #5d5c53;
  border-bottom: 2px solid #c3c3c3;
}
#sitemap .tit-lg a {
  display: block;
}
#sitemap .tit-md {
  display: block;
  margin: 0 0 5px 0;
  padding: 0;
  line-height: 1.5;
  font-size: 1rem;
  color: #555;
  font-weight: 600;
}
#sitemap .tit-sm {
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  color: #444;
  line-height: 1.5;
}
#sitemap .tit-sm a:hover {
  color: #cc1d24;
}
#sitemap .list ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}
#sitemap .list .sublist > li {
  display: block;
  font-size: 1rem;
  color: #333;
  padding: 3px 0 3px 20px;
}
#sitemap .list .sublist > li a {
  display: block;
  color: inherit;
  font: inherit;
}
#sitemap .list .sublist > li a:hover {
  color: #cc1d24;
}
#sitemap .list .sublist > li > ul > li {
  display: block;
  position: relative;
  font-size: 0.9375rem;
  color: #444;
  padding: 3px 0 3px 15px;
}
#sitemap .list .sublist > li > ul > li:before {
  content: '';
  width: 6px;
  height: 1px;
  background: #999;
  position: absolute;
  top: 13px;
  left: 3px;
}
#sitemap .list .sublist > li > ul > li > ul > li {
  display: block;
  position: relative;
  font-size: 0.875rem;
  color: #444;
  padding: 3px 0 3px 15px;
}
#sitemap .wideList {
  font-size: 0;
  margin: 0 -10px;
}
#sitemap .wideList > ul {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  padding: 0 10px;
  margin-bottom: 30px;
}
@media only screen and (max-width:991px) {
  #sitemap .list {
    margin: 0 -10px;
  }
  #sitemap .list .box {
    margin-bottom: 30px;
    padding: 0 10px;
    width: calc(100% / 3)
  }
}
@media only screen and (max-width:767px) {
  #sitemap .wideList > ul {
    width: calc(100% / 3)
  }
}
@media only screen and (max-width:639px) {
  #sitemap .wideList > ul {
    width: 50%;
    border-top: 1px solid #ddd;
    padding-top: 15px;
    margin-bottom: 20px;
  }
  #sitemap .list .box {
    width: 50%
  }
}
@media only screen and (min-width: 450px) and (max-width:639px) {
  #sitemap .wideList > ul:nth-child(1),
  #sitemap .wideList > ul:nth-child(2) {
    border-top: none;
    padding-top: 0;
  }
}
@media only screen and (max-width:449px) {
  #sitemap .wideList {
    margin: 0 auto;
  }
  #sitemap .wideList > ul {
    padding: 15px 0 0 0;
    width: 100%;
  }
  #sitemap .wideList > ul:nth-child(1) {
    border-top: none;
    padding-top: 0;
  }
  #sitemap .list {
    margin: 0 -5px;
  }
  #sitemap .list .box {
    padding: 0 5px;
  }
}
/* --------------------------------------------
   個人情報保護方針
-------------------------------------------- */
#privacy .content {
  padding-bottom: 30px;
}
#privacy .txt {
  padding: 15px;
  border: #ddd solid 1px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}
@media only screen and (min-width:480px) {
  #privacy .btn-wrap {
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width:768px) {
  #privacy .content {
    padding-bottom: 50px;
  }
  #privacy .txt {
    padding: 30px;
  }
}
/* --------------------------------------------
   FAQ(採用情報)
-------------------------------------------- */
#job-faq .item {
  position: relative;
  margin-bottom: 10px;
  background-color: #fff;
  border: solid 1px #ddd;
}
#job-faq .item:hover {
  background-color: #f3f3f3;
}
#job-faq .item:before {
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #f8f8f8;
}
#job-faq .item .qus-box {
  position: relative;
  padding: 7px 15px 10px;
  cursor: pointer;
}
#job-faq .item .qus-box:before,
#job-faq .item .qus-box:after {
  pointer-events: none;
  content: "";
  position: absolute;
  background-color: #cc1d24;
}
#job-faq .item .qus-box:before {
  top: 24px;
  right: 16px;
  width: 13px;
  height: 1px;
}
#job-faq .item .qus-box:after {
  top: 18px;
  right: 22px;
  width: 1px;
  height: 13px;
}
#job-faq .item .icon {
  display: block;
  float: left;
  margin-right: 5px;
  width: 25px;
  color: #cc1d24;
  font-size: 1.375rem;
  font-style: italic;
}
#job-faq .item h3 {
  display: block;
  float: left;
  width: calc(100% - 50px);
  margin: 0;
  padding: 5px 0 0 0;
  font-size: 0.9375rem;
  font-weight: normal;
  color: #000;
  line-height: 22px;
}
#job-faq .item .ans-box {
  display: none;
  padding: 15px 10px 15px 42px;
}
#job-faq .item.open .qus-box {
  background-color: #CC1D24;
}
#job-faq .item.open .qus-box:before {
  background-color: #FFF;
  z-index: 1;
}
#job-faq .item.open .icon,
#job-faq .item.open h3 {
  color: #FFF;
}
@media only screen and (max-width:767px) {
  #job-faq .item .qus-box {
    padding: 5px 10px 10px;
  }
  #job-faq .item .ans-box {
    padding: 10px;
  }
  #job-faq .item:hover {
    background-color: #fff;
  }
  #job-faq .item .qus-box:before {
    top: 21px;
    right: 11px;
  }
  #job-faq .item .qus-box:after {
    top: 15px;
    right: 17px;
  }
}
/* --------------------------------------------
採用情報
-------------------------------------------- */
#human .top-area {
  text-align: center;
  margin: 0 auto 40px;
}
#human .top-area .title {
  font-size: 1.625rem;
}
#human .top-area .summary {
  padding: 10px 0;
  font-size: 1.125rem;
}
#human .top-area .en {
  text-transform: uppercase;
  color: #cc1d24;
  font-size: 1rem;
  font-style: italic;
}
#human .list {
  max-width: 960px;
  margin: 0 auto;
  font-size: 0;
  display: block;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#human .item {
  display: inline-block;
  vertical-align: top;
  padding: 15px 20px 20px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  margin: 0 0 30px 25px;
  width: calc(50% - 50px);
  color: #555;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  -webkit-transition: background .25s, border .25s, color .25s, box-shadow .25s;
  -o-transition: background .25s, border .25s, color .25s, box-shadow .25s;
  -webkit-transition: background .25s, border .25s, color .25s, -webkit-box-shadow .25s;
  transition: background .25s, border .25s, color .25s, -webkit-box-shadow .25s;
  transition: background .25s, border .25s, color .25s, box-shadow .25s;
  transition: background .25s, border .25s, color .25s, box-shadow .25s, -webkit-box-shadow .25s;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 33%;
  flex: 1 1 33%;
}
#human .item:first-of-type {
  margin-left: 0;
}
#human .img {
  width: 180px;
  height: 180px;
  display: block;
  position: relative;
  margin: 0 auto;
  border-radius: 100px;
  border: 5px solid transparent;
}
#human .item p {
  min-height: 45px;
}
#human .item p span {
  display: inline-block;
}
#human .item .img::before {
  content: '';
  position: absolute;
  z-index: 5;
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url(../images/icon_human.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  -webkit-transition: width .25s, height .25s;
  -o-transition: width .25s, height .25s;
  transition: width .25s, height .25s;
}
#human .item .img.one::before {
  background-position: 0 0;
}
#human .item .img.two::before {
  background-position: 100% 0;
}
#human .item .img.three::before {
  background-image: url(../images/icon_distributors.png);
  background-position: 0 0;
}
#human .item:hover {
  color: #000;
  background: #fff;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
#human .item:hover .img::before {
  width: 190px;
  height: 190px;
}
#human .txt strong {
  position: relative;
  display: inline-block;
  padding: 15px 0 7px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #444;
}
#human .txt strong:before {
  display: none;
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: 5px;
  width: 100%;
  height: 2px;
}
#human .item:hover strong {
  color: #cc1d24;
}
/* centered columns styles */
.row-centered {
  text-align: center;
}
#human .item.col-centered {
  display: inline-block;
  float: none;
  text-align: center;
  margin-right: -4px;
  margin-top: 30px;
}
#human .page-main {
  padding: 30px 0 50px;
}
/* human video */
#human .video {
  position: relative;
  height: 370px;
}
#human .video .con {
  position: absolute;
  z-index: 1;
  top: 35%;
  width: 100%;
}
#human .video h2 {
  color: #fff;
  text-align: center;
}
#human .video h2 small {
  color: #fff;
  font-weight: 400;
}
#human .video a {
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 60px;
  outline: none;
  background: url(../images/btn_video.png) no-repeat 0 0;
  overflow: hidden;
  background-size: cover;
}
#human .video a div {
  position: relative;
  margin: 18px 0 0 23px;
  width: 20px;
  height: 22px;
}
#human .video a span {
  display: block;
  width: 1px;
  height: 23px;
  background-color: #fff;
}
#human .video a div:before,
#human .video a div:after {
  display: block;
  content: '';
  position: absolute;
  left: -2px;
  width: 22px;
  height: 1px;
  background-color: #fff;
}
#human .video a div:before {
  top: 5px;
  -webkit-transform: rotate(-145deg);
  -ms-transform: rotate(-145deg);
  transform: rotate(-145deg);
}
#human .video a div:after {
  bottom: 4px;
  -webkit-transform: rotate(145deg);
  -ms-transform: rotate(145deg);
  transform: rotate(145deg);
}
#human .video:hover a div {
  -webkit-animation: ani-btn .3s;
  animation: ani-btn .3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
#human .video .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
}
@-webkit-keyframes ani-btn {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes ani-btn {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@media only screen and (max-width:767px) {
  #human .list,
  #human .page-main {
    padding-bottom: 0;
  }
  #human .list {
    padding: 0 20px;
    max-width: 600px;
    display: block;
  }
  #human .item {
    position: relative;
    display: block;
    margin: 0 auto 30px;
    width: 100%;
    padding: 15px 20px 15px 170px;
    min-height: 120px;
  }
  #human .img,
  #human .txt {
    display: block;
    text-align: left;
  }
  #human .img {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
  }
  #human .item .img::before {
    width: 120px;
    height: 120px;
  }
  #human .item:hover .img::before {
    width: 130px;
    height: 130px;
  }
  #human .txt strong {
    position: relative;
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 5px;
    font-size: 1.375rem;
    font-weight: normal;
  }
  #human .txt strong:before {
    display: none;
    pointer-events: none;
    content: "";
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 2px;
    color: #cc1d24;
  }
  #human .txt p {
    padding: 0;
  }
  #human .item.col-centered {
    display: block;
    text-align: center;
    margin-top: 0;
    margin-right: 0;
  }
  #human .item {
    border-bottom: 1px solid #d3d7b9;
  }
  #human .item:last-child {
    border-bottom: none;
  }
}
@media only screen and (max-width:640px) {
  #human .top-area {
    margin-bottom: 20px;
  }
  #human .top-area .title {
    font-size: 1.5625rem;
  }
  #human .top-area .summary,
  #human .top-area .en {
    margin: 0;
    padding: 0;
    font-size: 1rem;
  }
  #human .top-area .en {
    margin-top: 5px;
  }
}
@media only screen and (max-width:499px) {
  #human .item {
    padding: 10px 0 10px 90px;
    margin-bottom: 15px;
    min-height: 70px;
  }
  #human .img {
    width: 70px;
    height: 70px;
    left: 10px;
  }
  #human .item .img::before {
    width: 70px;
    height: 70px;
  }
  #human .item:hover .img::before {
    width: 80px;
    height: 80px;
  }
}
/* --------------------------------------------
   Join Info
-------------------------------------------- */
#join-info .import {
  margin-bottom: 10px;
  font-size: 1rem;
}
#join-info .list .year {
  margin-top: 20px;
}
#join-info .list .year .year-ti {
  line-height: 30px;
  font-size: 0.875rem;
}
#join-info .list .year .year-ti span {
  font-size: 1.5rem;
  margin-right: 6px;
}
#join-info .list .month .month-ti {
  width: 85px;
  line-height: 30px;
  font-size: 0.875rem;
  margin: 0;
  padding: 5px 0;
  text-align: center;
}
#join-info .list .month .month-ti span {
  font-size: 1.5rem;
  margin-right: 6px;
}
#join-info .list .month-list li {
  position: relative;
  font-size: 0;
}
#join-info .list .month-list li:last-child {
  padding-bottom: 30px;
}
#join-info .list .month-list li:before {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 100%;
  background: #ddd;
  top: 0;
  left: 42px;
}
#join-info .list .month-list li:last-child:before {
  height: 18px;
}
#join-info .list .month-list li .date {
  display: inline-block;
  position: relative;
  width: 135px;
  vertical-align: top;
  padding: 18px 0 18px 26px;
}
#join-info .list .month-list li .date:before {
  content: '';
  display: block;
  position: absolute;
  width: 10px;
  height: 1px;
  background: #ddd;
  top: 34px;
  left: 59px;
}
#join-info .list .month-list li .date .day {
  display: inline-block;
  position: relative;
  width: 33px;
  height: 33px;
  line-height: 33px;
  font-size: 1rem;
  color: #fff;
  background: #f1c600;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
}
#join-info .list .month-list li.two .date .day {
  background: #eb5f54;
}
#join-info .list .month-list li .date .time {
  display: inline-block;
  position: relative;
  width: 55px;
  height: 22px;
  line-height: 22px;
  font-size: 0.875rem;
  color: #333;
  background: #ededed;
  border-radius: 11px;
  text-align: center;
  vertical-align: middle;
  margin-left: 10px;
  margin-bottom: 0;
}
#join-info .list .month-list li .info {
  display: inline-block;
  position: relative;
  width: calc(100% - 135px);
  border-bottom: 2px solid #f6f6f6;
  vertical-align: top;
  padding: 20px 0 21px;
}
#join-info .list .month-list li .info:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #ddd;
  left: 0;
  bottom: 0;
}
#join-info .list .month-list li .info .locate {
  margin: 0;
}
#join-info .list .month-list li .info .locate .main-locate {
  display: inline-block;
  line-height: 22px;
  font-size: 1rem;
  background-image: url('../images/icon_stduent.png');
  background-repeat: no-repeat;
  background-position: left center;
  vertical-align: middle;
  padding-left: 30px;
}
#join-info .list .month-list li.two .info .locate .main-locate {
  background-image: url('../images/icon_corp.png');
  background-position: 5px center;
}
#join-info .list .month-list li .info .locate .sub-locate {
  display: inline-block;
  line-height: 1.5;
  font-size: 0.875rem;
  vertical-align: middle;
  margin-left: 5px;
}
#join-info .list .month-list li .info .note {
  line-height: 1.5;
  font-size: 0.875rem;
  color: #666;
  margin: 4px 0 0;
}
#join-info .col-md-3 {
  position: relative;
  float: left;
  width: 22%;
  padding: 10px 0;
  margin: 10px 35px 30px 0;
  border: 1px solid #ddd;
}
#join-info .col-md-3:before {
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #f8f8f8;
}
#join-info .col-md-3.hover-one:hover {
  border: 1px solid #f0c500;
}
#join-info .col-md-3.hover-two:hover {
  border: 1px solid #e95549;
}
#join-info .col-md-3:nth-child(4n) {
  margin-right: 0;
}
#join-info .col-md-3 .num {
  width: 74px;
  padding: 5px;
  color: #fff;
  font-size: 56px;
  font-family: 'Roboto Condensend';
  text-align: center;
  line-height: 74px;
}
#join-info .col-md-3 .txt {
  width: 100%;
  padding: 10px 30px;
  text-align: center;
}
#join-info .col-md-3 .title {
  color: #222;
  font-size: 1.125rem;
}
#join-info .col-md-3 .info {
  color: #666;
  font-size: 0.875rem;
}
#join-info .time {
  color: #1a6c92;
  font-size: 0.8125rem;
  margin-bottom: 10px;
}
#join-info .mark-one {
  display: inline-block;
  color: #66560b;
  padding-left: 30px;
  margin-top: 20px;
  text-align: left;
  background: url(../images/icon_stduent.png) left center no-repeat;
  vertical-align: middle;
}
#join-info .mark-two {
  display: inline-block;
  color: #5b2c29;
  padding-left: 20px;
  margin-top: 20px;
  margin-left: 10px;
  text-align: left;
  background: url(../images/icon_corp.png) left center no-repeat;
}
#join-info .mark-list {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}
#join-info .mark-list .mark-one,
#join-info .mark-list .mark-two {
  margin-top: 0;
  font-size: 0.9375rem;
  color: #666;
}
.md-step-show,
.sm-step-show {
  display: none;
}
@media only screen and (max-width:1199px) {
  .lg-step-show {
    display: none;
  }
  .md-step-show {
    display: block;
  }
  #join-info .col-md- {
    width: 25%;
  }
}
@media only screen and (max-width:767px) {
  .md-step-show {
    display: none;
  }
  .sm-step-show {
    display: block;
  }
  #join-info .col-md-3 {
    width: 47%;
    margin: 20px 8px 5px;
  }
}
@media only screen and (max-width:639px) {
  .sm-step-show {
    display: none;
  }
  #join-info .col-md-3 {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
}
@media (max-width:991px) {
  #join-info .list .month .month-ti {
    width: 100%;
    text-align: left;
    padding: 0;
  }
  #join-info .list .month-list li:before {
    left: 16px;
  }
  #join-info .list .month-list li .date {
    width: 110px;
    padding-left: 0;
  }
  #join-info .list .month-list li .date:before {
    left: 33px;
  }
  #join-info .list .month-list li .info {
    width: calc(100% - 110px);
  }
}
@media (max-width:639px) {
  #join-info .list .month-list li:last-child:before {
    height: calc(100% - 30px);
  }
  #join-info .list .month-list li .date {
    display: block;
    width: 100%;
    padding: 15px 0 5px;
  }
  #join-info .list .month-list li .date:before {
    top: 31px;
  }
  #join-info .list .month-list li .info {
    display: block;
    width: 100%;
    padding-top: 0;
    padding-left: 43px;
  }
  #join-info .list .month-list li .info .locate .sub-locate {
    display: block;
    margin-top: 2px;
    margin-left: 0;
  }
}
/* --------------------------------------------
   優渥福利
-------------------------------------------- */
#people .subject,
#people_life .subject {
  position: relative;
  margin: 30px 0 15px;
  padding: 0 0 15px;
  color: #cc1d24;
  font-size: 1.125rem;
  font-weight: bold;
}
#people .subject.mt25 {
  margin-top: 25px;
}
#people .subject:after,
#people_life .subject:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 1px;
  left: 0;
  bottom: 0;
  background-color: #cc1d24;
}
#people h5 {
  font-size: 0.9375rem;
  font-weight: bold;
}
#people .item {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
#people .item p {
  line-height: 28px;
  color: #666;
}
#people .one {
  min-height: 300px;
  background: url("../images/people_list.png");
  background-size: cover;
}
#people .one .item {
  padding: 30px;
  width: calc(100% / 3);
  margin-left: -4px;
  color: #666;
  text-align: center;
}
#people .one .item h5 {
  margin-bottom: 10px;
  font-size: 1rem;
}
#people .one .item p {
  padding: 0 10px;
  line-height: 22px;
}
#people .one .item:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 30px;
  right: 0;
  width: 2px;
  height: 200px;
  background: url("../images/line3.png");
}
#people .one .item.last:before {
  display: none;
}
#people .two .item {
  padding: 10px 10px 10px 0;
  margin-left: -4px;
  width: 50%;
}
#people .two .icon {
  float: left;
  margin-right: 15px;
  width: 74px;
  height: 74px;
  border: 2px solid #cc1d24;
  border-radius: 50%;
}
#people .two .txt {
  float: left;
  width: calc(100% - 89px);
}
#people .three .item {
  margin: 0 0 0 -4px;
  width: 50%;
  padding: 10px 0;
}
#people .three .icon {
  float: left;
  margin-right: 20px;
  width: 70px;
  height: 70px;
  text-align: center;
  background-color: #cc1f26;
}
#people .three .txt {
  float: left;
  padding: 5px 20px 0 0;
  width: calc(100% - 110px);
}
#people .three .txt h5 {
  margin: 0 0 10px;
}
#people .four {
  margin: 10px 0 30px;
  padding: 0 15px;
  background: url("../images/bg.gif");
}
#people .four .item {
  float: left;
  padding: 30px 20px;
  width: 33.3%;
  text-align: center;
}
#people .four .icon {
  margin: 0 auto 10px;
  width: 70px;
  height: 70px;
  text-align: center;
  background-color: #cc1f26;
  border-radius: 50%;
}
#people .four h5 {
  margin-top: 20px;
  color: #cc1f26;
  font-size: 1rem;
}
#people .four p {
  color: #666;
}
#people_life {
  padding-bottom: 40px;
}
#people_life img {
  max-width: 100%;
}
#people_life .sm-show img {
  max-width: 180px;
}
#people.boss {
  background: url("../images/people_boss.png") right bottom no-repeat;
}
#people .subject.two {
  padding: 30px 0 30px;
  font-size: 1.625rem;
}
#people .subject.two:after {
  display: none;
}
#people .text-wrap {
  padding: 0 550px 20px 0;
  font-size: 0.9375rem;
  line-height: 30px;
}
.md-show,
.sm-show {
  display: none;
}
.people_list {
  margin: 40px 0;
  padding-bottom: 30px;
  background: url(../images/line1.png) 0 bottom repeat-x;
}
.people_list:last-child {
  background: none;
}
.people_list .pic {
  float: left;
  width: 25%;
}
.people_list .txt {
  float: right;
  width: 72%;
  padding-right: 15px;
}
.people_list .txt .title {
  color: #444;
  font-size: 1.375rem;
}
.people_list .txt .title span {
  color: #cc1d24;
  font-size: 0.9375rem;
  font-weight: bold;
  margin-right: 5px;
}
.people_list .txt .slogan {
  margin: 15px 0;
  padding-left: 20px;
  background: url(../images/icon_people.png) 0 6px no-repeat;
}
.people_list .promotion {
  padding: 5px 15px;
  color: #666;
  margin-bottom: 15px;
  background-color: #eee;
}
.people_list .cont {
  color: #444;
  font-size: 0.875rem;
  line-height: 28px;
}
.sm-hide {
  margin-bottom: 55px;
}
@media only screen and (max-width:1200px) {
  #people.boss {
    background-size: 55%;
  }
  #people .subject.two {
    padding: 0;
  }
  #people .text-wrap {
    padding: 0 250px 50px 0;
  }
}
@media only screen and (max-width:992px) {
  .md-show {
    display: block;
  }
  #people .item .icon {
    margin: 0 auto;
  }
  #people .item .icon img {
    width: 100%;
  }
  #people h5 {
    padding-top: 10px;
    color: #000;
  }
  #people p {
    color: #666;
  }
  #people .one {
    position: relative;
    min-height: auto;
    background: none;
  }
  #people .one:before,
  #people .one:after {
    pointer-events: none;
    content: "";
    position: absolute;
    background-color: #fff;
  }
  #people .one:before {
    top: 50%;
    left: 0;
    margin-top: -20px;
    height: 10px;
    width: 100%;
  }
  #people .one:after {
    top: 0;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 100%;
  }
  #people .one .item {
    margin: 5px;
    padding: 10px;
    width: calc(50% - 10px);
    min-height: auto;
  }
  #people .one .item:before {
    display: none;
  }
  #people .one .icon {
    width: 74px;
    height: 74px;
    padding: 10px;
    border: 2px solid #cc1d24;
    background-color: #fff;
    border-radius: 50%;
  }
  #people .two .item {
    padding-bottom: 0;
    width: 50%;
    text-align: center;
  }
  #people .two .icon {
    float: none;
  }
  #people .two .txt {
    margin-left: 10px;
    width: calc(100% - 25px);
  }
  #people .three .item {
    margin-top: 10px;
    width: 50%;
    text-align: center;
  }
  #people .three .icon {
    float: none;
    padding-top: 0;
  }
  #people .three .txt {
    margin-left: 10px;
    width: calc(100% - 15px);
  }
  #people .four .item {
    padding-left: 10px;
    padding-right: 10px;
  }
  #people.boss {
    background-size: 100%;
  }
  #people .subject.two {
    font-size: 1.125rem;
  }
  #people .text-wrap {
    padding: 0 0 520px 0;
    line-height: 22px;
  }
}
@media only screen and (max-width:767px) {
  .sm-hide {
    display: none;
  }
  .sm-show {
    display: block;
    text-align: center;
  }
  #people .one:before,
  #people .one:after {
    display: none;
  }
  #people .four {
    padding: 0;
    margin-bottom: 0;
    background: none;
  }
  #people.boss {
    background: none;
  }
  #people .text-wrap {
    padding-bottom: 0;
  }
}
@media only screen and (max-width:479px) {
  #people .one .item,
  #people .four .item {
    margin: 0;
    padding: 15px;
    width: 50%;
    border-bottom: 4px solid #fff;
  }
}
/* --------------------------------------------
   KD LIFE
-------------------------------------------- */
#album-list .list a {
  margin: 10px;
  text-decoration: none;
}
#album-list .list a:focus {
  outline: none;
}
#album-list .list a .title {
  display: block;
  padding: 5px;
  text-align: center;
  color: #000;
}
#album-list .mfp-bottom-bar {
  margin: 5px 0 0;
  line-height: 22px;
}
#album-list .mfp-counter {
  display: none;
}
#album-list .mfp-image-holder .mfp-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  color: #666;
  line-height: 50px;
  text-align: center;
  opacity: 1;
  background-color: rgba(0, 0, 0, .5);
}
#album-list img.mfp-img {
  padding: 50px 0 0;
}
#album-list .mfp-arrow {
  opacity: 1;
  margin-top: -20px;
  width: 50px;
  height: 50px;
  background-color: #cc1d24;
  border-radius: 50%;
}
#album-list .mfp-arrow:after {
  display: none;
}
#album-list .mfp-arrow.mfp-arrow-right {
  right: 10px;
}
#album-list .mfp-arrow.mfp-arrow-left {
  left: 10px;
}
#album-list .mfp-arrow.mfp-arrow-right:before,
#album-list .mfp-arrow.mfp-arrow-left:before {
  display: block;
  content: '';
  position: absolute;
  border: none;
  opacity: 1;
  width: 16px;
  height: 16px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#album-list .mfp-arrow.mfp-arrow-right:before {
  border-right: #fff solid 2px;
  border-bottom: #fff solid 2px;
  top: -16px;
  left: -20px;
}
#album-list .mfp-arrow.mfp-arrow-left:before {
  border-top: #fff solid 2px;
  border-left: #fff solid 2px;
  top: -16px;
  left: -5px;
}
@media only screen and (max-width:767px) {
  #album-list .list a {
    margin: 0;
    width: 50%;
    border: 1px solid #fff;
  }
}
/* --------------------------------------------
   電子書 Catalog (電子カタログ / KD雑誌)
-------------------------------------------- */
@media only screen and (min-width:640px) {
  .catalog .page-current {
    position: absolute;
    z-index: 10;
    top: 110px;
    left: 15px;
  }
  .catalog .breadcrumb > li {
    color: #000;
  }
  .catalog .breadcrumb > li a {
    color: #666;
  }
  .catalog .breadcrumb > li a:hover {
    color: #fff;
  }
}
@media only screen and (min-width:992px) {
  .catalog .page-current {
    top: 65px;
    left: 50px;
  }
}
body.is-opened {
  overflow-y: hidden;
}
.album-close {
  z-index: 1000;
  position: fixed;
  top: 85px;
  right: 15px;
  width: 50px;
  height: 50px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.wowbook-container.wowbook-fullscreen-fix .album-close {
  top: 15px;
}
.album-close::before,
.album-close::after {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background: #777142;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -15px;
}
.album-close::before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.album-close::after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.album-close:hover {
  background: #f5f5f5;
  border-color: #999
}
.album-close:hover::before,
.album-close:hover::after {
  background: #454437;
}
.wowbook-container:not(.wowbook-fullscreen-fix) {
  max-width: 100vw;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.wowbook-cs-white.wowbook-thumbnails {
  bottom: 50px !important;
}
.wowbook-container {
  z-index: 100;
  top: 70px;
  height: calc(100% - 70px);
  background: #f8f8f8;
}
.wowbook-container.wowbook-fullscreen-fix {
  top: 0;
  height: 100% !important;
}
.wowbook-container.wowbook-fullscreen-fix .wowbook-toolbar {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.wowbook-book-shadow {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.wowbook-left .wowbook-gutter-shadow,
.wowbook-right .wowbook-gutter-shadow {
  opacity: .3;
}
.wowbook-toolbar {
  height: 54px;
}
.wowbook-controls {
  padding-top: 8px;
  line-height: 54px;
  background: none transparent;
}
.wowbook-control {
  margin: 0 2px;
  width: 38px;
  height: 38px;
  font-size: 0.9375rem;
  color: #777142;
  line-height: 38px;
  border: #ddd solid 1px;
  border-radius: 3px;
}
.wowbook-cs-white .wowbook-control {
  color: #777142;
}
.wowbook-cs-white .wowbook-control:hover {
  color: #454437;
}
.wowbook-button {
  border: 0;
  border-radius: 0;
}
@media only screen and (max-width:640px) {
  .catalog .search-box {
    display: none;
  }
  .album-close {
    width: 40px;
    height: 40px;
  }
  .album-close::before,
  .album-close::after {
    width: 20px;
    margin-left: -10px;
  }
}
@media only screen and (max-width:433px) {
  .wowbook-book-container .wowbook {
    left: 12%;
  }
}
@media only screen and (min-width:992px) {
  .wowbook-container .wowbook-book-container {
    padding: 50px !important;
  }
  .wowbook-container.wowbook-fullscreen-fix .wowbook-book-container {
    padding: 15px !important;
  }
  .wowbook-horizontal.wowbook-thumbnails {
    left: 40px;
    width: calc(100% - 80px);
  }
  .wowbook-button {
    border: 0;
    border-radius: 0;
  }
  .wowbook-container.wowbook-fullscreen-fix .wowbook-horizontal.wowbook-thumbnails {
    left: 0 !important;
    width: 100% !important;
  }
}
/* --------------------------------------------
   CASE
-------------------------------------------- */
#cases .row {
  padding-bottom: 20px;
}
#cases .area {
  padding-left: 40px;
  padding-right: 40px;
}
#cases .subject {
  margin-bottom: 20px;
  padding: 3px 10px 1px 10px;
  border: none;
  border-left: 4px solid #cc1d24;
}
#cases .subject h3:after {
  display: none;
}
#cases .subject h3,
#cases .subject strong {
  display: inline-block;
  border: none;
  margin: 0;
  padding: 0;
}
#cases .subject h3 {
  font-size: 1.125rem;
}
#cases .subject strong {
  padding-left: 20px;
}
#cases .subject strong span {
  color: #cc1d24;
}
#cases .input-txt .input-style:focus {
  border-color: #cc1d24;
}
#cases .agree-wrap {
  border: #DCDCDC 1px solid;
}
#cases .agree-wrap .scroll {
  padding: 15px 20px;
  line-height: 30px;
}
#cases .agree-wrap .agree-click {
  padding: 15px 20px;
  border-top: 1px solid #DCDCDC;
}
#cases label.item > input + span:not([class="color"]),
#cases label.item > input:checked + span:not([class="color"]) {
  background-image: url("../images/btn_filter2.png");
}
#cases .btn-wrap {
  float: none;
  border-top: 1px solid #ddd;
  padding: 20px 0 40px;
  max-width: 100%;
  width: 100%;
  text-align: center;
}
#cases .btn-wrap .btn-style {
  float: none;
  display: inline-block;
  padding: 2px 40px;
  width: auto;
}
#cases .import-list {
  padding-bottom: 15px;
}
#cases .import-list li {
  position: relative;
  padding: 5px 10px 5px 50px;
  line-height: 22px;
}
#cases .import-list li:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 12px;
  left: 30px;
  width: 6px;
  height: 6px;
  background-color: #cc1d24;
}
#cases .scroll {
  height: 270px;
  overflow: hidden;
}
#cases .scroll .mCSB_inside > .mCSB_container {
  margin-right: 15px;
}
#cases .scroll .mCSB_scrollTools,
#cases .mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
}
#cases .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #cc1d24;
}
#cases .scroll .mCSB_scrollTools .mCSB_draggerRail {
  background-color: #dcdcdc;
}
#cases .drop-file {
  position: relative;
  margin: 0 30px 26px;
  padding-top: 80px;
  height: 130px;
  border: 1px solid #e8e8e8;
  background: #fff;
  border-radius: 6px;
  text-align: center;
}
#cases .drop-file a.file-btn,
#cases .drop-file a.file-btn:before {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -45px;
  width: 90px;
  height: 34px;
}
#cases .drop-file a.file-btn {
  display: block;
  font-size: 0;
  z-index: 2;
}
#cases .drop-file a.file-btn:before {
  pointer-events: none;
  content: "画像アップロード";
  color: #999;
  font-size: 0.875rem;
  line-height: 34px;
  border: 1px solid #ababab;
  border-radius: 2px;
  z-index: 1;
  cursor: pointer;
}
#cases .drop-file a.file-btn:hover:before {
  color: #222;
  background-color: #ccc;
}
#cases .drop-file #file {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
#cases .form .code:not('.two') .input-txt span,
#cases .form .code:not('.two') .input-txt div {
  float: left;
}
#cases .done-txt {
  padding: 40px;
  font-size: 1.125rem;
  text-align: center;
}
#cases .done-txt i {
  display: block;
  margin: 0 auto 15px;
  width: 60px;
  height: 60px;
  color: #fff;
  font-size: 2.5rem;
  line-height: 60px;
  text-align: center;
  background-color: #cc1f26;
  border-radius: 50%;
}
#cases .subject.two {
  border-bottom: 1px solid #eee;
}
#cases .subject strong.big {
  margin-bottom: 5px;
  font-size: 1.25rem;
}
#cases .regist-box {
  padding: 30px;
  font-size: 0.9375rem;
  line-height: 24px;
  background-color: #f3f3f3;
}
#cases .btn-back.two {
  margin: 10px auto 40px;
}
/* --------------------------------------------
   部落格
-------------------------------------------- */
#blog .item {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: #EBEBEB 1px solid;
}
#blog .item .top-bar {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 20px;
  padding-left: 15px;
  background: url("../images/line1.png") 0 bottom repeat-x;
}
#blog .item .top-bar:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: calc(100% - 20px);
  background-color: #cc1d24;
}
#blog .item .top-bar .date {
  color: #cc1d24;
}
#blog .item .top-bar .title {
  color: #333;
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
#blog .item .top-bar .title a {
  color: inherit;
  font: inherit;
  display: block;
}
#blog .item .main {
  margin: 0 auto;
  max-width: 820px;
}
#blog .item .main .img {
  margin-bottom: 10px;
}
#blog .item .main .img img {
  width: 100%;
}
#blog .item .main .summary {
  line-height: 26px;
}
#blog .item .main img {
  width: 100%;
  max-width: 100%;
  height: auto !important;
}
#blog .btn-back {
  margin: 0 0 20px;
}
@media only screen and (max-width:992px) {
  #blog .item {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
  #blog .item .top-bar .title {
    font-size: 1.125rem;
  }
  #blog .item .top-bar {
    margin-bottom: 10px;
  }
  #blog .btn-back {
    margin: 0 auto;
  }
}
/* Blog - 編輯器 */
#blog .summary,
.edit-wrap,
.cke_editable {
  font-size: 1rem;
  text-align: justify;
}
#blog .summary h1,
.edit-wrap h1,
.cke_editable h1 {
  font-size: 1.25rem;
  color: #d35400;
  margin-bottom: 20px;
  font-weight: bold;
}
#blog .summary h2,
.edit-wrap h2,
.cke_editable h2 {
  font-size: 1.25rem;
  color: #d35400;
  margin-bottom: 20px;
}
#blog .summary h3,
.edit-wrap h3,
.cke_editable h3 {
  font-size: 1.125rem;
  color: #cc1d24;
  margin-top: 25px;
}
#blog .summary h4,
.edit-wrap h4,
.cke_editable h4 {
  font-size: 1.125rem;
  color: #4e5f70;
  margin-top: 30px;
}
#blog .summary h5,
.edit-wrap h5,
.cke_editable h5 {
  font-size: 1.125rem;
  text-align: center;
  margin: 30px 0 10px;
}
/* --------------------------------------------
   優質產品找KD，木知識(原裝潢選KD)
-------------------------------------------- */
.know-list {
  width: 100%;
  font-size: 0;
  margin: 0 -15px
}
.know-list .box {
  margin-bottom: 30px;
  padding: 0 15px;
  width: 100%;
  display: block;
}
.know-list .box a {
  text-decoration: none;
}
.know-list .box img {
  display: block;
  width: 100%;
  height: auto;
}
.know-list .box .name {
  margin-top: 10px;
}
.know-list .box h4 {
  margin: 0 0 8px 0;
  width: 100%;
  font-size: 1.333333rem;
  font-size: 16px;
  color: #000;
  font-weight: normal;
  line-height: 22px;
}
.know-list .box h4 small {
  display: block;
  margin-bottom: 5px;
  font-size: 1rem;
  font-size: 12px;
  color: #777142;
  font-weight: 700;
  font-style: italic;
}
.know-list .box h4 small:after {
  display: inline-block;
  content: '';
  margin-left: 5px;
  width: 22px;
  height: 1px;
  vertical-align: middle;
  background-color: #8c8b80;
}
.know-list .box a:hover h4 {
  color: #777142;
}
.know-list .box .share {
  min-height: 22px;
  padding-bottom: 0;
  padding-left: 0;
}
.know-list .box .share > a {
  position: static;
  top: 0;
  margin: 0;
  float: right;
  white-space: nowrap;
  font-size: 13px;
  text-align: right;
  background: none;
}
.know-list .share > a span {
  margin: -3px 6px 0 0;
  width: 10px;
  height: 12px;
}
.know-list .share ul {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 32px;
  padding: 8px 0;
  text-align: right;
  background-color: #fff;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
  box-shadow: 0 0 5px rgba(0, 0, 0, .15);
}
.know-list .share ul li {
  margin-left: 0;
}
.know-list .share ul li a {
  padding: 0 7px;
}
.know-list .page-tb {
  margin-top: 30px;
}
@media only screen and (min-width:570px) {
  .know-list .box {
    width: 50%;
    display: inline-block;
    vertical-align: top;
  }
}
@media only screen and (min-width:1400px) {
  .know-list .box {
    width: calc(100% / 3);
  }
}
/* --------------------------------------------
   ウッドデザインに入る-詳細
-------------------------------------------- */
.view-con .content {
  padding-bottom: 50px;
}
.view-con .ban {
  height: 520px;
}
.view-con .path {
  position: absolute;
  z-index: 2;
  left: 0;
  padding: 0 15px;
  width: 100%;
}
.view-con .path .page-current {
  margin: 0;
}
.view-con .path .breadcrumb > li {
  color: #dedede;
}
.view-con .path .breadcrumb > li + li:before {
  border-right-color: #dedede;
  border-bottom-color: #dedede;
}
.view-con .path .breadcrumb > li a {
  color: #dedede;
}
.view-con .path .breadcrumb > li a:hover {
  color: #fff;
}
.view-con .ban .subtitle {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 100%;
  font-size: 2.8rem;
  line-height: 1.5;
  color: #fff;
  font-weight: 300;
  margin: 0;
  padding: 0;
  text-align: center;
  text-shadow: 0 0 4px rgba(0, 0, 0, .5);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.view-con .ban .subtitle .date {
  display: block;
  font-size: 0.875rem;
  text-align: center;
  margin: 0 auto 10px
}
.view-con .share {
  position: relative;
  z-index: 2;
  top: -18px;
  margin: 0 auto -18px;
  padding: 12px 0;
  max-width: 360px;
  min-height: 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 4px;
}
.view-con .share .ti,
.view-con .share ul {
  display: inline-block;
  vertical-align: middle;
}
.view-con .share .ti {
  width: 85px;
  text-align: left;
  line-height: 20px;
}
.view-con .share ul {
  margin-top: 0;
  width: auto;
}
.view-con .share ul li:last-child a {
  padding-right: 0;
}
.view-con .txt {
  margin-top: 25px;
}
.view-con .txt img {
  max-width: 100%;
  height: auto !important;
  display: block;
  margin: 0 auto;
}
/* .view-con h2.ti {
  margin: 20px 0 0 0;
  font-size: 2.5rem;
  font-size: 30px;
  color: #000;
  font-weight: 300;
} */
@media only screen and (min-width:992px) {
  .view-con .path {
    top: 15px;
  }
  /* .view-con h2.ti {
    display: none;
  } */
}
@media only screen and (min-width:1281px) {
  .view-con .path {
    top: 80px;
  }
  .view-con .ban .subtitle {
    padding-top: 35px;
  }
}
@media only screen and (max-width:1280px) {
  .view-con .ban {
    height: 420px;
  }
  .view-con .ban .subtitle {
    font-size: 2.5rem;
  }
}
@media only screen and (max-width:991px) {
  .view-con .ban {
    height: 320px;
  }
  .view-con .ban .subtitle {
    font-size: 2rem;
  }
}
@media only screen and (max-width:767px) {
  .view-con .ban {
    height: 220px;
  }
  .view-con .ban .subtitle {
    font-size: 1.625rem;
  }
}
@media only screen and (max-width:480px) {
  .view-con .share .ti {
    width: 53px;
  }
  .view-con .share .ti span {
    display: none;
  }
  .view-con .share ul li a {
    padding: 0 7px;
  }
  .view-con .ban .subtitle {
    font-size: 1.375rem;
  }
}
/* --------------------------------------------
   與設計師有約
-------------------------------------------- */
#design {
  padding-bottom: 50px;
  overflow: hidden;
}
#design .big-subject {
  margin: 0 0 20px;
  padding: 3px 0 3px 10px;
  font-size: 1.125rem;
  border-left: 4px solid #cc1d24;
}
#design .share {
  margin: 15px 0 0 20px;
}
#design .share ul {
  display: block;
  margin: 0 10px;
  text-align: left;
  width: auto;
}
#design .date {
  color: #cc262d;
}
#design .date span {
  display: inline-block;
  margin-right: 10px;
  padding: 6px 13px;
  color: #fff;
  background-color: #cc262d;
}
#design .big-box {
  margin-bottom: 40px;
}
#design .big-box .pic {
  float: left;
  margin: 0;
}
#design .big-box .right-txt {
  float: right;
  width: calc(100% - 790px);
}
#design .big-box .title {
  margin: 30px 0;
  font-size: 1.5rem;
}
#design .big-box .summary {
  font-size: 0.9375rem;
  line-height: 26px;
}
#design .big-box .more {
  display: inline-block;
  margin-top: 30px;
  padding: 5px 10px;
  color: #cc262d;
  font-family: 'Roboto';
  text-transform: uppercase;
  border: 1px solid #ddd;
}
#design .big-box .more:hover {
  color: #fff;
  text-decoration: none;
  background-color: #cc262d;
  border-color: #cc262d;
}
#design .pic {
  display: block;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
#design .pic:hover img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#design .list {
  width: calc(100% + 50px);
}
#design .list .box {
  float: left;
  width: 25%;
  padding-right: 50px;
}
#design .list .box a {
  text-decoration: none;
}
#design .list .box h3 {
  margin: 10px 0 0;
  padding: 0;
  color: #444;
  font-size: 0.9375rem;
}
#design .list.history {
  padding: 50px 0 0;
  margin-top: 50px;
  border-top: 1px solid #ddd;
}
#design .list.history h2 {
  float: left;
}
#design .list.history .more-history {
  float: right;
  margin: 5px 50px 0 0;
  display: block;
  color: #000;
  font-size: 0.9375rem;
}
#design .list.history .more-history span {
  display: inline-block;
  margin-left: 5px;
  width: 24px;
  height: 16px;
  vertical-align: middle;
  background: url("../images/history_btn.png");
}
#design .list.history .date {
  color: #999;
}
#design .list.history .date span {
  background-color: #999;
}
#design.list .list.history {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
#design.list .list.history h2 {
  float: none;
}
#design.list .list .box {
  margin-bottom: 30px;
}
#design .top-area {
  padding: 0 0 0 15px;
  border-left: 4px solid #cc262d;
}
#design .top-area .date {
  color: #cc262d;
}
#design .top-area .title {
  margin-top: 5px;
}
#design .top-area .title span,
#design .resgiter {
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.875rem;
  color: #fff;
  background-color: #cc262d;
  vertical-align: middle;
}
#design .resgiter:hover {
  background-color: #444;
}
#design .information {
  position: relative;
  margin-top: 40px;
  margin-bottom: 10px;
  background-color: #fff;
}
#design .information:before {
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #f8f8f8;
}
#design .information .box {
  position: relative;
  padding: 10px 15px;
  border: 1px solid #ddd;
}
#design .information .title {
  color: #000;
  font-size: 1.125rem;
  margin-bottom: 10px;
}
#design .tab {
  width: 100%;
}
#design .tab thead {
  position: relative;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}
#design .tab tr {
  display: table-row;
}
#design .tab th,
#design .tab td {
  display: table-cell;
}
#design .tab tbody {
  display: table-row-group;
}
#design .tab tbody tr {
  display: table-row;
}
#design .tab thead {
  border: 1px solid #ddd;
  margin-bottom: 5px;
}
#design .tab thead th {
  color: #333;
  font-size: 0.9375rem;
  font-weight: normal;
  text-align: center;
}
#design .tab th,
#design .tab td {
  padding: 10px;
  font-weight: normal;
}
#design .tab tbody tr:nth-of-type(even) {
  background-color: #efefee;
}
#design .tab td {
  text-align: center;
}
#design .tab .img {
  width: 102px;
}
#design .tab .ti {
  padding-left: 10px;
  width: 400px;
  text-align: left;
}
@media (max-width:1280px) {
  #design .big-box .pic {
    width: 50%;
  }
  #design .big-box .pic img {
    width: 100%;
  }
  #design .big-box .right-txt {
    padding-left: 30px;
    width: 50%;
  }
}
@media (max-width:992px) {
  #design .big-box .pic,
  #design .big-box .right-txt {
    float: none;
    padding-left: 0;
    width: 100%;
  }
  #design .big-box .pic {
    margin-bottom: 15px;
  }
  #design .big-box .title {
    margin: 10px 0;
    font-size: 1.125rem;
  }
  #design .big-box .more {
    margin-top: 10px;
  }
  #design .list.history {
    padding-top: 20px;
    margin-top: 20px;
  }
  #design .list .box {
    padding: 5px;
    width: 50%;
    margin-bottom: 10px;
  }
  #design .list .box img {
    width: 100%;
  }
  #design .tab thead {
    position: absolute;
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
  #design .tab tbody,
  #design .tab tbody tr,
  #design .tab tr,
  #design .tab th,
  #design .tab td {
    display: block;
  }
  #design .tab tbody td[data-title]:before {
    content: attr(data-title);
    float: left;
    color: #cc1d24;
  }
  #design .tab tbody tr {
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid #efefee;
  }
  #design .tab tbody td {
    text-align: right;
  }
  #design .tab a {
    font-size: 1rem;
    color: #fff;
  }
}
@media (max-width:640px) {
  #design .list .box {
    float: none;
    padding: 0;
    width: 100%;
  }
}
#design .information .price {
  color: #cc262d;
}
#design .information table.two th {
  padding-left: 50px;
  width: 170px;
}
#design .resgiter {
  margin-left: 15px;
  padding-top: 3px;
  padding-bottom: 3px;
  text-decoration: none;
}
.step-sm {
  display: none;
}
.step-lg {
  position: relative;
}
.step-lg a.links {
  position: absolute;
  width: 20%;
  height: 5.5%;
  top: 5px;
  left: 34%;
  z-index: 9;
}
.step-img.bd-step {
  text-align: center;
}
.step-img.bd-step img {
  display: inline-block;
}
@media only screen and (max-width:992px) {
  .step-img {
    padding: 20px 0;
    text-align: center;
  }
  .step-lg {
    display: none;
  }
  .step-sm {
    position: relative;
    display: block;
  }
  .step-sm a.links {
    position: absolute;
    width: 47%;
    height: 6%;
    top: 0px;
    left: 27%;
    z-index: 9;
  }
  .step-sm img {
    margin: 0 auto;
  }
}
/* --------------------------------------------
   電子書
-------------------------------------------- */
@media only screen and (min-width:640px) {
  .catalog .page-current {
    position: absolute;
    z-index: 2;
    top: 110px;
    left: 15px;
  }
  .catalog .breadcrumb > li {
    color: #eee;
  }
  .catalog .breadcrumb > li a {
    color: #eee;
  }
  .catalog .breadcrumb > li + li:before {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .catalog .breadcrumb > li a:hover {
    color: #fff;
  }
}
@media only screen and (min-width:992px) {
  .catalog .page-current {
    top: 65px;
    left: 50px;
  }
}
/* --------------------------------------------
   KD雑誌 列表頁
-------------------------------------------- */
#catelog:after {
  content: '';
  display: block;
  clear: both;
}
#catelog {
  padding-bottom: 50px;
}
.ctlog-aside {
  width: 200px;
  float: left;
}
.ctlog-aside .mb-text {
  display: none;
}
.ctlog-aside .pc-text {
  display: block;
}
.ctlog-aside .list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ctlog-aside .list li {
  display: block;
  border-top: 1px solid #ddd;
}
.ctlog-aside .list li:first-child {
  border-top: none
}
.ctlog-aside .list li a {
  position: relative;
  display: block;
  padding: 8px 0;
  line-height: 1.6;
  color: #333;
}
.ctlog-aside .list li a:hover {
  color: #c62329;
  text-decoration: none;
}
.ctlog-aside .list li.current a {
  color: #cc1d24;
}
.ctlog-aside .list li img {
  display: none;
}
.ctlog-right {
  width: calc(100% - 200px);
  float: right;
  padding-left: 30px;
}
.ctlog-stage {
  position: relative;
  overflow: hidden;
}
.ctlog-stage.hide {
  display: none;
}
.ctlog-stage.is-loading .ctlog-slider {
  background: url(../images/loading.gif) no-repeat center center / 20px auto;
  width: 100%;
  min-height: 80px
}
.ctlog-slider > .pic {
  display: none;
}
.ctlog-stage.is-loading .ctlog-funcs {
  display: none;
}
.ctlog-thumbnail .slick-slide,
.ctlog-slider .slick-slide {
  position: relative;
  min-height: auto;
}
.ctlog-slider .slick-track,
.ctlog-slider .slick-list,
.ctlog-thumbnail .slick-track,
.ctlog-thumbnail .slick-list {
  font-size: 0;
  white-space: nowrap !important;
}
.ctlog-slider img,
.ctlog-thumbnail img {
  width: 100%;
  min-height: auto !important;
  height: auto !important
}
.ctlog-slider .zoom-btn:hover {
  opacity: 1;
}
.ctlog-slider .zoom-btn {
  cursor: pointer;
  width: 40px;
  height: 40px;
  opacity: 0.5;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z'/%3E%3C/svg%3E") no-repeat 60% 55% / 30px 30px;
}
.ctlog-thumbnail .zoom-btn {
  display: none;
}
.ctlog-thumbnail {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  -webkit-box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 40px;
  width: 100%;
  -webkit-transform: translateY(130%);
  -ms-transform: translateY(130%);
  transform: translateY(130%);
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  -o-transition: transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  white-space: nowrap;
}
.ctlog-thumbnail.is-open {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.ctlog-thumbnail .slick-slide {
  padding: 3px;
  cursor: pointer;
  border: 1px solid transparent;
}
.ctlog-thumbnail .slick-slide:hover {
  border-color: #ddd;
}
.ctlog-thumbnail .slick-current {
  border-color: #cc1d24;
}
.ctlog-thumbnail .slick-arrow {
  font-size: 0;
  position: absolute;
  top: 0;
  margin-top: 0;
  height: 100%;
  border: none;
  background-color: rgba(255, 255, 255, 0.65);
  border-radius: 0;
  width: 30px;
}
.ctlog-thumbnail .slick-arrow:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.ctlog-thumbnail .slick-arrow:before {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  border-style: solid;
  border-color: #333;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.ctlog-thumbnail .slick-prev {
  left: 0
}
.ctlog-thumbnail .slick-prev:before {
  left: 50%;
  margin-left: -4px;
  border-width: 0 0 2px 2px;
}
.ctlog-thumbnail .slick-next {
  right: 0
}
.ctlog-thumbnail .slick-next:before {
  right: 50%;
  margin-right: -4px;
  border-width: 2px 2px 0 0;
}
.ctlog-funcs {
  padding: 5px;
  background: #fff;
  font-size: 0;
  margin-top: 15px;
  text-align: center;
}
.ctlog-funcs .func {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: 38px;
  height: 38px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #ddd;
  margin: 0 2px;
  padding: 0;
  cursor: pointer;
}
.ctlog-funcs .func.is-open,
.ctlog-funcs .func.is-open:hover {
  border-color: #cc1d24;
  background: #cc1d24;
}
.ctlog-funcs .func.is-open:before {
  -webkit-filter: brightness(350%);
  filter: brightness(350%);
}
.ctlog-funcs .func:hover {
  background-color: #f5f5f5;
  border-color: #999;
}
.ctlog-funcs .func:before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-image: url(../images/icon_ctlog_func.png);
  background-size: auto 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.ctlog-funcs .func.first:before {
  background-position: 0 0;
}
.ctlog-funcs .func.prev:before {
  background-position: 16.5% 0;
}
.ctlog-funcs .func.next:before {
  background-position: 33% 0;
}
.ctlog-funcs .func.end:before {
  background-position: 49.5% 0;
}
.ctlog-funcs .func.detail:before {
  background-position: 66% 0;
}
.ctlog-funcs .func.thumbnail:before {
  background-position: 82.5% 0;
}
.ctlog-funcs .func.download:before {
  background-position: 100% 0;
}
.ctlog-funcs .func.back {
  white-space: nowrap;
  font-size: 0.75rem;
  color: #777142;
  padding: 0 10px;
  width: auto;
  line-height: 38px;
  text-decoration: none;
}
.ctlog-funcs .func.back:before {
  display: none;
}
.slide-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.slide-group > * {
  display: inline-block;
  vertical-align: top;
}
.ctlog-slider .slide-group > * {
  width: 50%;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
}
.ctlog-thumbnail .slide-group > *,
.ctlog-thumbnail .slide-group img {
  max-height: 80px;
  width: auto;
}
@media only screen and (max-width:767px) {
  .ctlog-right {
    width: 100%;
    float: none;
    padding-left: 0;
  }
  .ctlog-aside .mb-text {
    display: block;
  }
  .ctlog-aside .pc-text {
    display: none;
  }
  .ctlog-aside {
    width: 100%;
    float: none;
    margin-bottom: 15px;
  }
  .ctlog-aside.open .top-title {
    border-radius: 5px 5px 0 0;
    border: 1px solid #ccc;
  }
  .ctlog-aside.open .top-title:before,
  .ctlog-aside.open .top-title:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .ctlog-aside.open .list {
    display: block;
    border-radius: 0 0 5px 5px;
    border: 1px solid #ccc;
    border-top: none
  }
  .ctlog-aside .top-title {
    display: block;
    position: relative;
    font-size: 0.9375rem;
    background-image: none;
    cursor: pointer;
    margin: 0;
    padding: 8px 15px;
    border: 1px solid #ddd;
    background-color: #eee;
    border-radius: 5px;
    color: #222;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  .ctlog-aside .top-title:before,
  .ctlog-aside .top-title:after {
    pointer-events: none;
    content: "";
    position: absolute;
    background-color: #222;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  .ctlog-aside .top-title:before {
    top: 20px;
    right: 10px;
    width: 12px;
    height: 2px;
  }
  .ctlog-aside .top-title:after {
    top: 15px;
    right: 15px;
    width: 2px;
    height: 12px;
  }
  .ctlog-aside .list {
    display: none;
    z-index: 10;
    left: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    width: 100%;
    padding: 0 10px;
  }
  .ctlog-aside .list li {
    display: block;
    padding: 0;
    border-top: 1px solid #ddd
  }
  .ctlog-aside .list li:first-child {
    border-top: none;
  }
  .ctlog-aside .list li:before {
    display: none;
  }
  .ctlog-aside .list li a {
    display: block;
    padding: 8px;
    color: #333;
    border: none;
    font-size: 0.9375rem;
  }
  .ctlog-aside .list li a::after {
    display: none;
  }
  .ctlog-aside .list li a:hover {
    color: #cc1d24
  }
}
/* --------------------------------------------
   型錄-詳細
-------------------------------------------- */
#catalog-view {
  padding-top: 100px;
  background: #000 url('../images/catelog_bg.png') no-repeat 0 0 / cover;
}
#catalog-view .page-current {
  top: 70px;
}
#catalog-view .ctlog-stage {
  padding: 20px 50px;
}
#catalog-view .ctlog-slider {
  max-width: calc(100vh * 1.1);
  margin: 0 auto;
}
#catalog-view .ctlog-funcs {
  margin-top: 0;
}
.mfp-imgzoom .mfp-container {
  overflow: auto;
}
.mfp-imgzoom .mfp-figure {
  line-height: 0;
}
.mfp-imgzoom .mfp-figure img {
  max-width: none !important;
  max-height: none !important;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.mfp-imgzoom {
  height: 100vh;
  width: 100vw;
}
.mfp-imgzoom .mfp-close,
.mfp-imgzoom button.mfp-close {
  top: 10px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 1550;
}
@media only screen and (max-width:767px) {
  #catalog-view .ctlog-stage {
    padding: 20px;
  }
}
@media only screen and (max-width: 639px) {
  #catalog-view .page-current {
    position: fixed;
    top: 75px;
    left: 15px;
    color: #fff;
    margin: 0;
  }
  #catalog-view .page-current a {
    color: #ddd
  }
}
@media only screen and (max-width:599px) {
  #catalog-view .ctlog-slider {
    max-width: 100%
  }
}
/* --------------------------------------------
   投資專區
-------------------------------------------- */
#finance .maininfo {
  text-align: center;
  font-size: 1rem;
  margin: 30px auto
}
#finance .maininfo a,
.red-txt {
  display: inline-block !important;
  color: #c62329;
}
#finance .right-wrap.full {
  float: none;
  width: 100%;
}
#finance .news-list {
  font-size: 0;
  margin-bottom: 40px;
}
#finance .news-list-head div {
  display: inline-block;
  line-height: 22px;
  font-size: 1rem;
  color: #fff;
  background: #c62329;
  text-align: center;
  vertical-align: top;
  padding: 15px;
}
#finance .news-list-head .title {
  width: calc(100% - 130px);
  text-align: left;
  padding: 15px 20px;
}
#finance .news-list-head .title.w100 {
  width: 100%;
}
#finance .news-list-head .date {
  width: 130px;
  border-left: 5px solid #fff;
}
#finance .news-list-item {
  display: block;
  border-bottom: 1px solid #eee;
  text-decoration: none;
}
#finance .news-list-item:hover {
  border-bottom-color: #ccc;
}
#finance .news-list-item div {
  display: inline-block;
  line-height: 20px;
  font-size: 0.875rem;
  color: #333;
  text-align: center;
  vertical-align: top;
  padding: 15px;
}
#finance .news-list-item .title {
  width: calc(100% - 130px);
  text-align: left;
  padding: 15px 20px;
}
#finance .news-list-item:hover .title {
  color: #cc1d24;
}
#finance .news-list-item .date {
  width: 130px;
  color: #999;
}
#finance .conference-list {
  font-size: 0;
  margin: 0 -15px;
}
#finance .conference-list .box {
  display: inline-block;
  width: 25%;
  vertical-align: top;
  margin-bottom: 30px;
  padding: 0 15px;
}
#finance .conference-list .box a {
  text-decoration: none;
  outline: none;
}
#finance .conference-list .box .pic {
  position: relative;
}
#finance .conference-list .box .pic:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  top: 0;
  left: 0;
  opacity: 0;
  -o-transition: opacity .3s;
  transition: opacity .3s;
  -moz-transition: opacity .3s;
  -webkit-transition: opacity .3s;
}
#finance .conference-list .box a:hover .pic:after {
  opacity: 1;
}
#finance .conference-list .box .pic i {
  display: block;
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -20px;
}
#finance .conference-list .box .pic i:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 14px;
  border-color: transparent transparent transparent #fff;
  top: 9px;
  left: 14px;
}
#finance .conference-list .box .title {
  line-height: 26px;
  font-size: 1rem;
  color: #444;
  margin: 10px 0 0;
}
#finance .conference-list .box a:hover .title {
  color: #cc1d24;
}
#finance .conference-list .box .date {
  line-height: 24px;
  font-size: 0.875rem;
  color: #999;
  margin: 4px 0 0;
}
#finance .back-list {
  display: block;
  position: relative;
  width: 100px;
  height: 30px;
  line-height: 28px;
  font-size: 0.8125rem;
  color: #444;
  border: 1px solid #999;
  text-align: center;
  text-decoration: none;
  margin: 40px auto 0;
  -o-transition: color .3s;
  transition: color .3s;
  -moz-transition: color .3s;
  -webkit-transition: color .3s;
}
#finance .back-list:hover {
  color: #cc1d24;
}
#finance .back-list:before,
#finance .back-list:after {
  content: '';
  display: block;
  position: absolute;
  width: 9px;
  height: 9px;
  -o-transition: width .3s, height .3s;
  transition: width .3s, height .3s;
  -moz-transition: width .3s, height .3s;
  -webkit-transition: width .3s, height .3s;
}
#finance .back-list:before {
  border-top: 1px solid #010101;
  border-left: 1px solid #010101;
  top: -1px;
  left: -1px;
}
#finance .back-list:after {
  border-right: 1px solid #010101;
  border-bottom: 1px solid #010101;
  right: -1px;
  bottom: -1px;
}
#finance .back-list:hover:before,
#finance .back-list:hover:after {
  width: 13px;
  height: 13px;
}
#left-nav .finance-nav .dropdown-menu a {
  line-height: 1.5;
  border: none;
  font-size: 1rem;
  padding: 10px 15px;
  text-decoration: none;
  white-space: normal;
}
#left-nav .finance-nav .dropdown-menu li.current > a {
  color: #cc1d24;
}
#left-nav .finance-nav .dropdown-menu li.current > a:before {
  background: #cc1d24;
}
#left-nav .finance-nav .dropdown-menu > li > a:before {
  display: none;
}
#left-nav .finance-nav .dropdown-menu > li > a:hover {
  background: none;
}
#left-nav .finance-nav .dropdown-menu > li > ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 15px;
}
#left-nav .finance-nav .dropdown-menu > li > ul > li > a {
  padding-left: 30px;
}
#left-nav .finance-nav .dropdown-menu > li > ul > li > a:before {
  top: 21px;
}
@media (min-width:992px) {
  .finance-nav .btn {
    display: none;
  }
  .finance-nav .dropdown-menu {
    display: block !important;
    position: relative;
    top: auto;
    left: auto;
    z-index: inherit;
    float: none;
    min-width: inherit;
    padding: 5px 0 15px;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }
  .finance-nav .dropdown-menu .dropdown-header {
    line-height: 26px;
    font-size: 1rem;
    color: #333;
    padding: 10px 15px;
    white-space: normal;
  }
  .finance-nav .dropdown-menu .dropdown-header:not(:first-child) {
    border-top: 1px solid #eee;
    margin-top: 10px;
  }
}
@media (max-width:1199px) {
  #finance .conference-list .box {
    width: 33.333%;
  }
}
@media (max-width:991px) {
  #finance #left-nav,
  #finance .right-wrap {
    float: none;
    width: 100%;
    margin-bottom: 0;
  }
  #finance .right-wrap {
    margin-top: 30px;
    margin-bottom: 40px;
  }
  #finance #left-nav {
    background: none;
  }
  .finance-nav .btn {
    display: block;
    width: 100%;
    position: relative;
    line-height: 26px;
    font-size: 0.9375rem;
    border-color: #ddd;
    border-radius: 5px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding: 8px 20px 8px 12px;
    white-space: normal;
    text-align: left;
  }
  .finance-nav .btn:hover {
    background: #fff;
  }
  .finance-nav .btn:focus,
  .finance-nav .btn:active,
  .finance-nav.open .btn {
    border-color: #ccc !important;
    background: #f2f2f2 !important;
  }
  .finance-nav.open .btn {
    border-radius: 5px 5px 0 0;
  }
  .finance-nav .btn:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: #666 transparent transparent transparent;
    top: 18px;
    right: 10px;
  }
  .finance-nav.open .btn:before {
    border-width: 0 6px 8px 6px;
    border-color: transparent transparent #666 transparent;
  }
  .finance-nav .dropdown-menu {
    width: 100%;
    max-height: 240px;
    margin: 0;
    padding: 0;
    border-color: #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
    overflow-y: auto;
  }
  .finance-nav .dropdown-menu .dropdown-header {
    line-height: 24px;
    font-size: 0.9375rem;
    padding: 4px 12px;
    white-space: normal;
  }
  .finance-nav .dropdown-menu .dropdown-header:not(:first-child) {
    border-top: 1px solid #ddd;
    margin-top: 2px;
  }
  #left-nav .finance-nav .dropdown-menu a {
    font-size: 0.875rem;
  }
  #left-nav .finance-nav .dropdown-menu > li.current > a {
    background: #f5f5f5;
  }
  #finance .conference-list {
    margin: 0 -10px;
  }
  #finance .conference-list .box {
    width: 50%;
    padding: 0 10px;
  }
  #finance .conference-list .box .pic img {
    width: 100%;
  }
  #finance .conference-list .box .title {
    line-height: 24px;
    font-size: 0.9375rem;
    margin-top: 5px;
  }
}
@media (max-width:767px) {
  #finance .news-list-head .title {
    width: 100%;
    padding: 10px;
  }
  #finance .news-list-head .date {
    display: none;
  }
  #finance .news-list-item .title {
    width: 100%;
    padding: 15px 10px 10px;
  }
  #finance .news-list-item .date {
    width: 100%;
    padding: 0 10px 15px;
    text-align: left;
  }
}
@media (max-width:419px) {
  #finance .conference-list .box {
    width: 100%;
    margin-bottom: 20px;
  }
}
#finance .report-select {
  position: relative;
  width: 94px;
  height: 30px;
  margin-bottom: 15px;
}
#finance .report-select:before,
#finance .report-select:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  -o-transition: width .3s, height .3s;
  transition: width .3s, height .3s;
  -moz-transition: width .3s, height .3s;
  -webkit-transition: width .3s, height .3s;
}
#finance .report-select:before {
  border-top: 1px solid #010101;
  border-left: 1px solid #010101;
  top: 0;
  left: 0;
}
#finance .report-select:after {
  border-right: 1px solid #010101;
  border-bottom: 1px solid #010101;
  right: 0;
  bottom: 0;
}
#finance .report-select:hover:before,
#finance .report-select:hover:after {
  width: 13px;
  height: 13px;
}
#finance .report-select button {
  display: block;
  position: relative;
  padding: 0 10px 1px;
  width: 100%;
  height: 30px;
  font-size: 0.8125rem;
  color: #333;
  text-align: left;
  line-height: 28px;
  border: #999 solid 1px;
  background: transparent;
  -o-transition: color .3s;
  transition: color .3s;
  -moz-transition: color .3s;
  -webkit-transition: color .3s;
}
#finance .report-select:hover button {
  color: #cc1d24;
}
#finance .report-select button:after {
  display: block;
  content: '';
  position: absolute;
  top: 9px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-right: #444 solid 1px;
  border-bottom: #444 solid 1px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#finance .report-select.open button:after {
  top: 12px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#finance .report-select .dropdown-menu {
  display: block !important;
  top: 100%;
  padding: 0;
  min-width: 94px;
  text-align: center;
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: rgba(246, 246, 246, .95);
  opacity: 0;
  margin-top: 12px;
  -ms-transform: scale(0);
  transform: scale(0);
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -webkit-transition: opacity .3s, margin .3s, -webkit-transform 0s .3s;
  transition: opacity .3s, margin .3s, -webkit-transform 0s .3s;
  -o-transition: opacity .3s, transform 0s .3s, margin .3s;
  transition: opacity .3s, transform 0s .3s, margin .3s;
  transition: opacity .3s, transform 0s .3s, margin .3s, -webkit-transform 0s .3s;
  -moz-transition: opacity .3s, transform 0s .3s, margin .3s;
  -webkit-transition: opacity .3s, transform 0s .3s, margin .3s;
}
#finance .report-select:hover .dropdown-menu {
  opacity: 1;
  margin-top: 2px;
  -ms-transform: scale(1);
  transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -webkit-transition: opacity .3s, margin .3s, -webkit-transform 0s;
  transition: opacity .3s, margin .3s, -webkit-transform 0s;
  -o-transition: opacity .3s, transform 0s, margin .3s;
  transition: opacity .3s, transform 0s, margin .3s;
  transition: opacity .3s, transform 0s, margin .3s, -webkit-transform 0s;
  -moz-transition: opacity .3s, transform 0s, margin .3s;
  -webkit-transition: opacity .3s, transform 0s, margin .3s;
}
#finance .report-select .dropdown-menu:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  top: -2px;
  left: 0;
}
#finance .report-select .dropdown-menu li a {
  display: block;
  padding: 0;
  width: 100%;
  font-size: 0.8125rem;
  color: #333;
  line-height: 25px;
}
#finance .report-select .dropdown-menu li a:hover {
  background-color: #ddd;
}
#finance .report-select .dropdown-menu li a.current {
  color: #fff;
  background-color: #c62329;
}
#finance .report-select:hover button:after {
  top: 12px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#finance .table {
  border: 1px solid #ddd;
  background: #fff;
}
#finance .table th {
  width: 20%;
  color: #fff;
  background: #c62329;
  font-size: 1rem;
  padding: 15px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #fff;
}
#finance .table th:first-of-type {
  width: 15%;
}
#finance .table th.price {
  background: #fff;
  color: #222;
  text-align: right;
}
#finance .table th:last-child:before {
  display: none;
}
#finance .table tbody tr {
  border-bottom: 1px solid #ddd;
}
#finance .table tbody tr:last-of-type {
  border: none;
}
#finance .table tbody tr:last-of-type td {
  border-bottom: none;
}
#finance .table tbody td {
  color: #222;
  font-size: 1rem;
  padding: 10px 2.5%;
  text-align: center;
  border: 1px solid #ddd;
  vertical-align: middle;
}
#finance .table tbody tr:nth-child(2n) {
  background: #f6f6f6;
}
#finance .table tbody td.border-none {
  border-bottom: none;
}
#finance .table tbody td:first-of-type {
  border-left: none;
}
#finance .table tbody td:last-of-type {
  border-right: none;
}
#finance .table .data-title {
  display: none;
}
#finance .table li {
  position: relative;
  text-align: left;
  padding: 5px 0 5px 20px;
}
#finance .table li::before {
  position: absolute;
  content: '';
  width: 8px;
  height: 1px;
  background: #71c6e0;
  top: 20px;
  left: 0;
}
@media (max-width:991px) {
  #finance .table thead {
    display: none;
  }
  #finance .table tbody tr {
    border: none;
  }
  #finance .table tbody tr:nth-child(2n) {
    background: none;
  }
  #finance .table tbody td {
    display: block;
    text-align: left;
    border: none;
  }
  #finance .table tbody td:nth-child(2n) {
    background: #f6f6f6;
  }
  #finance .table tbody td:nth-child(1) {
    width: 100%;
    color: #fff;
    font-weight: bold;
    background: #c62329;
  }
  #finance .table tbody td.hidden-sm {
    display: none;
  }
  #finance .table .data-title {
    display: inline-block;
    width: auto;
    font-weight: bold;
    color: #c62329;
    margin-right: 15px;
    min-width: 120px;
  }
}
/* --------------------------------------------
   股東專欄 - 股利政策
-------------------------------------------- */
.sec-shareholder {
  margin: 0 auto 50px;
}
.dividend-table {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}
.dividend-table::-webkit-scrollbar {
  height: 10px;
  border-radius: 20px;
}
.dividend-table::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 0;
  border-radius: 20px;
  background: rgba(200, 200, 200, 0.1);
}
.dividend-table::-webkit-scrollbar-thumb {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 40px;
  background: rgba(200, 200, 200, 0.4);
}
.dividend-table table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
  min-width: 500px
}
.dividend-table table th,
.dividend-table table td {
  padding: 10px 15px;
  white-space: nowrap;
  margin: 0 auto;
  border: 1px solid #ccc;
  line-height: 1.5;
  text-align: center;
}
.dividend-table table thead {
  text-align: center;
  font-weight: 600;
}
.dividend-table table thead th,
.dividend-table table thead td {
  background: #e6e6e6;
  text-align: center;
  padding: 5px 10px;
}
.dividend-table table thead .legend {
  padding: 15px;
  font-size: 1rem;
  line-height: 1.2;
  color: #fff;
  background: #c62329;
}
.dividend-table table thead small {
  display: block;
  font-size: 0.75rem;
  margin: 3px auto 0;
}
.dividend-table table tbody th {
  font-weight: 600;
}
.dividend-table table tbody tr:hover th,
.dividend-table table tbody tr:hover td {
  background: #f9f9f9
}
/* --------------------------------------------
   Jog Openings
-------------------------------------------- */
.jobopen-list {
  list-style: none;
  margin: 30px auto 20px;
  padding: 0 2px;
}
.jobopen-list li {
  display: block;
  margin: 0 auto 25px auto;
}
.jobopen-list li a {
  display: block;
  padding: 25px 10px 25px 10px;
  text-align: center;
  font-size: 1.125rem;
  color: #333;
  background: #f8f8f8;
  font-weight: 600;
  min-height: 50px;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-transition: background .25s, color .25s;
  -o-transition: background .25s, color .25s;
  -webkit-transition: background .25, color .25ss;
  -o-transition: background .25, color .25ss;
  transition: background .25, color .25ss
}
.jobopen-list li a:hover {
  background: #fff;
  color: #cc1d24;
  text-decoration: none;
}
.jobopen-list li a:hover > span:before {
  border-color: #cc1d24;
  color: #cc1d24;
}
.jobopen-list li a > span {
  position: relative;
  padding-left: 65px;
  min-width: 150px;
  text-align: left;
  display: inline-block;
}
.jobopen-list li a > span:before {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  border: 5px solid #666;
  color: #666;
  text-align: center;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 43px;
  position: absolute;
  white-space: nowrap;
  top: 50%;
  margin-top: -25px;
  left: 0;
}
.jobopen-list li a > span.tw:before {
  content: 'TW';
}
.jobopen-list li a > span.my:before {
  content: 'MY';
}
.jobopen-list li a > span.sg:before {
  content: 'SG';
}
.jobopen-list li a > span.hk:before {
  content: 'HK';
}
@media (max-width: 767px) {
  .jobopen-list li {
    margin-bottom: 15px;
  }
  .jobopen-list li a {
    display: block;
    padding: 20px 10px 20px 10px;
  }
}
/* --------------------------------------------
   合作機會
-------------------------------------------- */
#opportunity .o-maintitle {
  display: block;
  font-size: 1.875rem;
  margin: 30px auto;
  text-align: center;
  max-width: 780px;
}
#opportunity .o-pf {
  display: block;
  margin: 0 auto 40px auto;
  max-width: 780px;
}
#opportunity .o-pf .text-red {
  color: #cc1d24;
}
#opportunity .o-pf a {
  text-decoration: underline;
  color: #cc1d24;
}
#opportunity .o-pf a:hover {
  text-decoration: none;
}
#opportunity .o-pf.big {
  text-align: center;
  font-size: 1.0625rem;
}
#opportunity .o-sec {
  display: block;
  background: #f2f2f2;
  padding: 35px;
  margin: 0 auto 30px auto;
}
#opportunity .o-sec .tit {
  font-size: 1.625rem;
  position: relative;
  display: block;
  margin: 0 0 15px 0;
  padding: 0 0 10px 0;
  color: #cc1d24;
}
#opportunity .o-sec .tit::after {
  content: '';
  display: block;
  position: absolute;
  height: 1px;
  width: 30px;
  background: #cc1d24;
  left: 0;
  bottom: 0;
}
#opportunity .o-sec ul {
  list-style: none;
  margin: 15px 0;
  padding: 0;
}
#opportunity .o-sec ul li {
  display: block;
  position: relative;
  padding: 0 0 0 26px;
  margin: 0 0 6px 0;
}
#opportunity .o-sec ul li::before {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 7px;
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-color: #cc1d24;
  top: 8px;
  left: 5px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#opportunity .o-sec .strong {
  font-size: 1.5rem;
  font-style: italic;
  display: block;
  margin: 15px auto 0;
  font-family: 'Times New Roman', serif;
}
@media (max-width: 767px) {
  #opportunity .o-sec {
    padding: 30px 20px 20px;
    margin: 0 auto 20px auto;
  }
  #opportunity .o-pf {
    margin: 0 auto 20px auto;
  }
}
/* --------------------------------------------
  ダウンロード
-------------------------------------------- */
.download-table-notice {
  font-size: 0.875rem;
  display: block;
  color: red;
}
.download-table {
  border: none;
  border-collapse: separate;
  border-spacing: 3px;
  width: 100%;
  margin: 0 auto 50px;
}
.download-table tfoot tr:first-child td {
  border-top: 1px solid #ddd
}
.download-table tfoot td,
.download-table tfoot tr:nth-child(even):hover td,
.download-table tfoot tr:nth-child(odd):hover td {
  background: none;
}
.download-table th {
  font-weight: 600;
  text-align: center;
  font-size: 0.9375rem;
  color: #333;
}
.download-table thead th,
.download-table thead td {
  padding: 0 15px 10px 15px;
}
.download-table th,
.download-table td {
  padding: 10px 15px;
  font-size: 1rem;
}
.download-table td {
  background: #ebebeb;
  text-align: left;
  font-size: 0.9375rem;
}
.download-table tr:hover td {
  background: #f8f4eb;
}
.download-table .t-op {
  width: 120px;
  text-align: center;
}
.download-table tr.sub td {
  background: #f8f8f8;
  padding: 6px 15px;
}
.download-table tr.sub .t-name {
  padding-left: 45px;
  position: relative;
}
.download-table tr.sub .t-name::before {
  content: '';
  display: block;
  position: absolute;
  top: 18px;
  left: 25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #999;
}
.btn-download {
  position: relative;
  width: 35px;
  height: 35px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #333;
  font-size: 0;
  vertical-align: middle;
}
.btn-download::before {
  content: '';
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z'/%3E%3C/svg%3E") no-repeat 0 0 / contain;
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.btn-download:hover {
  background: #cc1d24;
  border-color: #cc1d24
}
.btn-download:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z'/%3E%3C/svg%3E")
}
@media only screen and (max-width:640px) {
  .download-table th,
  .download-table td {
    padding: 8px 15px;
  }
  .download-table .t-op {
    width: 70px;
    padding: 8px 5px
  }
  .download-table th.t-name {
    text-align: left;
  }
  .download-table tr.sub td {
    padding: 8px 15px;
  }
  .download-table tr.sub .t-name {
    padding-left: 32px;
  }
  .download-table tr.sub .t-name::before {
    top: 1.2em;
    left: 16px;
  }
}
/* --------------------------------------------
   商品簡介
-------------------------------------------- */
.pi-ban {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
  aspect-ratio: 100 / 33.85;
  min-height: 300px;
}
.pi-ban > * {
  opacity: 0;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}
.pi-ban.shown > * {
  opacity: 1;
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s;
}
.pi-ban .pic {
  width: 100%;
  overflow: hidden;
  position: relative;
  color: #fff;
  min-height: 300px;
}
.pi-ban .pic::before {
  content: '';
  display: block;
  padding-bottom: 33.85%;
}
.pi-ban .pic .text {
  z-index: 5;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  padding: 0 30px;
  line-height: 1.5;
}
.pi-ban .pic .text .t1 {
  font-size: 2rem;
  display: block;
}
.pi-ban .pic .text .t2 {
  display: block;
  font-size: 1.5rem;
  margin-top: 10px;
}
.pi-ban .pic img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  max-width: none !important;
  width: 100%;
  height: 100% !important;
  min-height: 300px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.pi-ban .slick-dots {
  bottom: 15px;
  padding: 0;
  margin: 0;
  text-align: center;
}
.pi-ban .slick-dots li {
  margin: 0;
  padding: 0 6px;
  width: auto;
  height: auto;
}
.pi-ban .slick-dots li button {
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid #fff;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important
}
.pi-ban .slick-dots li button:before {
  display: none;
}
.pi-ban .slick-dots li.slick-active button {
  background: #fff;
}
.pi-btn {
  border-radius: 50px;
  border: 1px solid #d4d4d4;
  padding: 8px 15px;
  background: #fff;
  color: #666;
  font-size: 0.9375rem;
  text-decoration: none;
}
.pi-btn::before {
  content: '';
  display: inline-block;
  margin: -2px 8px 0 0;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background: url(../images/icon_back.png) no-repeat 0 0;
  overflow: hidden;
  background-size: 100% auto;
}
.pi-btn:active {
  text-decoration: none;
}
.pi-btn:hover {
  background: #cc1d24;
  border-color: #cc1d24;
  color: #fff;
  text-decoration: none;
}
.pi-btn:hover::before {
  background-position: 0 100%;
}
.pi-subhead {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 2.0625rem;
  color: #333;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 5px;
  text-align: center;
}
@media only screen and (max-width:1199px) {
  .pi-subhead {
    font-size: 1.875rem;
  }
  .pi-ban .pic .text .t1 {
    font-size: 1.875rem;
  }
  .pi-ban .pic .text .t2 {
    font-size: 1.375rem;
  }
}
@media only screen and (max-width:767px) {
  .pi-subhead {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }
  .pi-ban .pic .text .t1 {
    font-size: 1.5rem;
  }
  .pi-ban .pic .text .t2 {
    font-size: 1.125rem;
    margin-top: 5px;
  }
  .pi-ban .slick-dots {
    bottom: 2px
  }
}
@media only screen and (max-width:499px) {
  .pi-subhead {
    font-size: 1.375rem;
  }
  .pi-ban .pic .text .t1 {
    font-size: 1.37rem;
  }
  .pi-ban .pic .text .t2 {
    font-size: 1rem;
  }
}
/* 商品簡介 - 頁籤 */
#goods-intro {
  text-align: justify;
}
#goods-intro .page-current {
  margin-bottom: 20px;
}
.pi-tab-wrap {
  background: #f6f6f6;
  text-align: center;
}
.pi-tab {
  margin: 0;
  padding: 0;
  list-style: none;
  ;
}
.pi-tab li {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
.pi-tab li:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -6px;
  height: 12px;
  width: 1px;
  background: #999;
}
.pi-tab li:first-child:before {
  display: none;
}
.pi-tab li a {
  display: inline-block;
  padding: 22px 15px;
  position: relative;
  color: #222;
}
.pi-tab li a:hover {
  text-decoration: none;
}
.pi-tab li a::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #cc1d24;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  -o-transition: transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}
.pi-tab li a:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}
.pi-tab-cur {
  display: none;
}
@media only screen and (min-width:992px) {
  #goods-intro.no-ban .pi-tab-wrap {
    background: none;
    border-bottom: 1px solid #ddd
  }
}
@media only screen and (max-width:1299px) {
  .pi-tab li {
    padding-left: 5px;
    padding-right: 5px;
  }
  .pi-tab li a {
    padding: 20px 10px;
  }
}
@media only screen and (max-width:991px) {
  .pi-tab-wrap {
    margin-bottom: 15px;
  }
  .pi-tab-wrap .container {
    padding: 10px;
  }
  .pi-tab-wrap.open .pi-tab-cur {
    border-radius: 5px 5px 0 0;
    border: 1px solid #ccc;
  }
  .pi-tab-wrap.open .pi-tab-cur:before,
  .pi-tab-wrap.open .pi-tab-cur:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .pi-tab-wrap.open .pi-tab {
    display: block;
    border-radius: 0 0 5px 5px;
    border: 1px solid #ccc;
    border-top: none
  }
  .pi-tab-cur {
    display: block;
    position: relative;
    font-size: 0.9375rem;
    cursor: pointer;
    padding: 8px 15px;
    border: 1px solid #ddd;
    background-color: #eee;
    border-radius: 5px;
    color: #222;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  .pi-tab-cur:before,
  .pi-tab-cur:after {
    pointer-events: none;
    content: "";
    position: absolute;
    background-color: #222;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  .pi-tab-cur:before {
    top: 20px;
    right: 10px;
    width: 12px;
    height: 2px;
  }
  .pi-tab-cur:after {
    top: 15px;
    right: 15px;
    width: 2px;
    height: 12px;
  }
  .pi-tab {
    display: none;
    z-index: 10;
    left: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    width: 100%;
    padding: 0 10px;
  }
  .pi-tab li {
    display: block;
    padding: 0;
    border-top: 1px solid #ddd
  }
  .pi-tab li:first-child {
    border-top: none;
  }
  .pi-tab li:before {
    display: none;
  }
  .pi-tab li a {
    display: block;
    padding: 8px;
    color: #333;
    border: none;
    font-size: 0.9375rem;
  }
  .pi-tab li a::after {
    display: none;
  }
  .pi-tab li a:hover {
    color: #cc1d24
  }
}
/* 商品簡介 - 次分類 */
.pi-subcate {
  margin: 10px -10px 25px;
  padding: 5px 15px 5px 155px;
  border-radius: 0;
  border: 1px solid #ccc;
  background: #fff;
  color: #666;
  font-size: 0.9375rem;
  position: relative;
  text-align: left;
}
.pi-subcate .tit {
  position: absolute;
  white-space: nowrap;
  width: 135px;
  top: 5px;
  left: 5px;
  background: #cc1d24;
  border-radius: 0;
  padding: 3px 0 3px 15px;
  color: #fff
}
.pi-subcate .tit::after {
  content: '';
  display: inline-block;
  margin: -2px 8px 0 6px;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background: url(../images/icon_back.png) no-repeat 0 100%;
  overflow: hidden;
  background-size: 100% auto;
}
.pi-subcate a {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 3px 10px;
  margin-right: 10px;
  color: #333
}
.pi-subcate a:hover {
  color: #cc1d24;
}
.pi-subcate a::after {
  content: '';
  position: absolute;
  top: 10px;
  right: -6px;
  background: #999;
  width: 1px;
  height: 14px;
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
}
.pi-subcate a:last-of-type::after {
  display: none;
}
.pi-subcate.no-border {
  border: none;
}
.pi-subcate.no-border .tit {
  color: #222;
  font-size: 1.25rem;
  background: none;
  font-weight: bold;
  top: 2px;
  padding-left: 16px;
}
.pi-subcate.no-border .tit::after {
  content: '';
  display: block;
  width: 3px;
  height: 1.3rem;
  top: 0.6em;
  left: 0;
  position: absolute;
  background: #cc1d24;
}
.pi-subcate.no-border a {
  padding: 5px 15px 5px 35px;
  border: 1px solid #ddd;
  border-radius: 50px;
  margin: 0 5px 5px 10px;
  -webkit-transition: border .5s, background .5s;
  -o-transition: border .5s, background .5s;
  transition: border .5s, background .5s;
}
.pi-subcate.no-border a:hover {
  color: #fff;
  background: #cc1d24;
  border: 1px solid #cc1d24;
  text-decoration: none;
}
.pi-subcate.no-border a::before {
  position: absolute;
  content: '';
  width: 18px;
  height: 18px;
  top: 9px;
  left: 10px;
  background: url(../images/icon_back.png) no-repeat 0 0;
  background-size: 100% auto;
}
.pi-subcate.no-border a:hover:before {
  background: url(../images/icon_back.png) no-repeat 0 100%;
  background-size: 100% auto;
}
.pi-subcate.no-border a::after {
  display: none;
}
@media (max-width:767px) {
  .pi-subcate a {
    padding: 3px 5px;
    margin-right: 5px;
  }
  .pi-subcate a::after {
    top: 10px;
    right: -5px;
    height: 12px;
  }
}
@media (max-width:499px) {
  .pi-subcate {
    margin: 10px auto 20px;
    padding: 10px;
    font-size: 0.875rem;
  }
  .pi-subcate .tit {
    display: block;
    position: relative;
    text-align: center;
    width: auto;
    top: auto;
    left: auto;
    font-size: 0.9375rem;
    margin: -5px -5px 8px -5px;
    padding: 2px 10px;
  }
  .pi-subcate .tit::after {
    margin-top: -2px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .pi-subcate.no-border .tit {
    top: auto;
    padding: 0 0 15px 0
  }
  .pi-subcate.no-border .tit::after {
    width: 24px;
    height: 3px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    top: auto;
    bottom: 8px;
    left: 50%;
    margin: 0 0 0 -12px
  }
  .pi-subcate.no-border a {
    margin: 0 5px 5px 0;
  }
}
/* 商品簡介 - 主要介紹 */
.pi-sec1 {
  margin-bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.pi-sec1 .left {
  -ms-flex-item-align: start;
  align-self: flex-start;
  width: 52%;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 52%;
  flex: 1 1 52%;
}
.pi-sec1 .right {
  width: 48%;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 48%;
  flex: 1 1 48%;
  padding-left: 40px;
  padding-right: 30px;
}
.pi-sec1 .left .pic img {
  aspect-ratio: 640 / 400;
  width: 100%;
  max-width: 100%;
  height: auto !important;
}
.pi-sec1 .pi-h-top {
  position: relative;
  padding-right: 180px;
  margin-bottom: 30px
}
.pi-sec1 .pi-h-top .pi-btn {
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
}
.pi-sec1 .pi-desc {
  line-height: 2;
  color: #333;
}
.pi-name {
  position: relative;
  display: block;
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 2.0625rem;
  color: #333;
  font-weight: 600;
  line-height: 1.5;
}
.pi-name::before {
  content: '';
  display: block;
  width: 4px;
  height: 1.9rem;
  top: 0.3em;
  left: 0;
  position: absolute;
  background: #cc1d24;
}
@media only screen and (max-width:1199px) {
  .pi-sec1 .pi-h-top {
    padding-right: 0;
    margin-bottom: 20px;
  }
  .pi-name {
    margin-bottom: 10px;
  }
  .pi-sec1 .pi-h-top .pi-btn {
    position: relative;
    top: auto;
    right: auto;
  }
}
@media only screen and (max-width:1099px) {
  .pi-name {
    font-size: 1.875rem;
  }
  .pi-name::before {
    height: 1.7rem
  }
  .pi-sec1 .left {
    width: 42%;
    -ms-flex: 1 1 42%;
    -webkit-box-flex: 1;
    flex: 1 1 42%;
  }
  .pi-sec1 .right {
    width: 58%;
    -ms-flex: 1 1 58%;
    -webkit-box-flex: 1;
    flex: 1 1 58%;
  }
}
@media only screen and (max-width:767px) {
  .pi-sec1 {
    display: block;
  }
  .pi-sec1 .left {
    display: block;
    width: 100%;
    text-align: center;
  }
  .pi-sec1 .right {
    margin-top: 20px;
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .pi-name {
    padding-left: 0;
  }
  .pi-name::before {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-right: 10px;
  }
}
@media only screen and (max-width:499px) {
  .pi-name {
    font-size: 1.5rem;
  }
  .pi-name::before {
    height: 1.3rem
  }
}
/* 商品簡介 - editor */
.pi-sec2 {
  line-height: 2;
  color: #333;
  padding-top: 50px;
  padding-bottom: 50px;
}
.pi-sec2 iframe {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.pi-sec2 img {
  max-width: 100%;
  height: auto !important
}
.pi-sec2 .btn-wrap {
  text-align: center;
  margin: 40px auto;
}
.pi-sec2 .btn-wrap .pi-btn {
  padding: 10px 15px;
  font-size: 1.0625rem;
}
@media only screen and (max-width:767px) {
  .pi-sec2 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .pi-sec2 .btn-wrap .pi-btn {
    font-size: 1rem;
  }
}
/* 商品簡介 - 品牌優勢 */
.pi-sec3 {
  position: relative;
  padding-top: 75px;
  padding-bottom: 75px;
  background: url(../images/pi_sec3_bg.jpg) repeat 0 0 #f8f8f7;
}
.pi-sec3 .container {
  position: relative;
  z-index: 10;
}
.pi-sec3 .bg {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100vw - 80px);
  height: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background: url(../images/pi_sec3_bg.jpg) repeat 0 0 #f8f8f7;
}
.pi-feature {
  margin: 20px -24px;
  padding: 0;
  font-size: 0
}
.pi-feature .item {
  display: inline-block;
  width: calc(100% / 3);
  vertical-align: top;
  padding: 0 24px;
  margin: 0 0 24px 0;
}
.pi-feature .inner {
  position: relative;
  background: #fff;
  padding: 30px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.pi-feature .inner::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border: 1px solid #e9cacb;
  pointer-events: none;
  ;
}
.pi-feature .pic {
  display: block;
  position: relative;
  margin: 0 auto;
  text-align: center;
}
.pi-feature .pic img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.pi-feature .title {
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
  color: #cc1d24;
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  font-weight: 600;
}
.pi-feature .desc {
  display: block;
  padding: 20px 0 10px;
  position: relative;
  border-top: 1px solid #dddddd;
  margin: 20px auto 0;
  font-size: 0.9375rem;
  line-height: 2;
  text-align: justify
}
.pi-feature .desc::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 50%;
  top: -1px;
  margin-left: -10px;
  height: 2px;
  width: 20px;
  background: #cc1d24;
  pointer-events: none;
  ;
}
@media only screen and (max-width:1199px) {
  .pi-feature {
    margin: 20px -10px;
  }
  .pi-feature .item {
    padding: 0 10px;
    margin: 0 0 20px 0;
  }
}
@media only screen and (max-width:991px) {
  .pi-feature .item {
    width: 50%;
  }
  .pi-feature .inner {
    padding: 25px;
  }
  .pi-feature .inner::before {
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
}
@media only screen and (max-width:767px) {
  .pi-sec3 {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .pi-sec3 .container {
    padding-left: 0;
    padding-right: 0;
  }
  .pi-sec3 .bg {
    width: 100vw;
  }
  .pi-feature {
    margin: 20px auto;
  }
  .pi-feature .item {
    padding: 0;
    margin: 0 0 10px 0;
    width: 100%;
    display: block;
  }
  .pi-feature .inner {
    position: relative;
    padding: 25px;
  }
  .pi-feature .title {
    font-size: 1.375rem;
    line-height: 1.2;
    padding: 0;
    margin-top: 15px;
  }
  .pi-feature .desc {
    text-align: left;
    padding: 10px 0;
    margin: 10px auto 0
  }
}
@media only screen and (max-width:639px) {
  .pi-feature .inner {
    padding: 18px;
  }
  .pi-feature .inner::before {
    left: 8px;
    top: 8px;
    bottom: 8px;
    right: 8px;
  }
}
@media only screen and (max-width:499px) {
  .pi-sec3 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .pi-feature {
    margin: 20px auto;
  }
  .pi-feature .title {
    padding: 15px 0 0;
    margin-top: 0;
    font-size: 1.25rem;
  }
}
/* 商品簡介 - 檢驗報告 */
.pi-sec4 {
  padding-top: 75px;
  padding-bottom: 75px;
}
.pi-certi {
  margin: 40px -24px;
  padding: 0;
  font-size: 0
}
.pi-certi .item {
  display: inline-block;
  width: 20%;
  vertical-align: top;
  padding: 0 24px;
  margin: 0 0 35px 0;
}
.pi-certi .item .tit {
  display: block;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  margin: 8px 0 0;
  padding: 0
}
.pi-certi .item img {
  width: 100%;
  height: auto !important;
  cursor: pointer;
  -webkit-transition: -webkit-transform .35s;
  transition: -webkit-transform .35s;
  -o-transition: transform .35s;
  transition: transform .35s;
  transition: transform .35s, -webkit-transform .35s;
}
.pi-certi .item img:hover {
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
}
@media only screen and (max-width:1299px) {
  .pi-certi {
    margin: 40px -20px;
  }
  .pi-certi .item {
    width: 25%;
    padding: 0 20px;
  }
}
@media only screen and (max-width:991px) {
  .pi-certi {
    margin: 40px -15px;
  }
  .pi-certi .item {
    width: calc(100% / 3);
    padding: 0 15px;
    margin: 0 0 30px 0;
  }
}
@media only screen and (max-width:767px) {
  .pi-sec4 {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .pi-certi {
    margin: 30px -10px;
  }
  .pi-certi .item {
    padding: 0 10px;
    margin: 0 0 25px 0;
  }
}
@media only screen and (max-width:499px) {
  .pi-sec4 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .pi-certi .item {
    width: 50%;
  }
}
/* 商品簡介 - FAQ */
.pi-sec5 {
  padding-top: 15px;
  padding-bottom: 25px;
}
.pi-sec5 .pi-subhead {
  margin-bottom: 30px;
}
.faq-list .box {
  margin-bottom: 10px;
  border-bottom: #e7e6df solid 1px;
}
.faq-list .box:last-child {
  border-bottom: 0;
}
.faq-list .box .ti {
  position: relative;
  padding: 3px 50px 25px 15px;
  color: #000;
  cursor: pointer;
}
.faq-list .box .ti:after {
  display: block;
  content: '+';
  position: absolute;
  top: -1px;
  right: 0;
  width: 40px;
  height: 40px;
  font-size: 1.125rem;
  color: #777142;
  font-weight: 300;
  text-align: center;
  line-height: 40px;
}
.faq-list .box .ti span {
  display: block;
  position: relative;
  margin-top: 6px;
  float: left;
  width: 28px;
}
.faq-list .box .ti span:before {
  display: block;
  content: 'Q.';
  position: absolute;
  top: 0;
  right: 0;
  color: #cc1d24;
  width: 100%;
  height: 100%;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 20px;
}
.faq-list .box .ti h4 {
  margin: 5px 0 0 0;
  font-size: 0.9375rem;
  font-weight: normal;
  line-height: 22px;
  overflow: hidden;
}
.faq-list .box .ti.open span:before {
  content: 'A.';
}
.faq-list .box .ti.open:after {
  content: '-';
  font-size: 1.5rem;
}
.faq-list .box .txt {
  display: none;
  padding: 0 10px 25px 15px;
  font-size: 0.9375rem;
  color: #444;
  line-height: 28px;
  word-break: break-all;
  overflow: hidden;
}
@media only screen and (min-width:1024px) {
  .faq-list .box .txt {
    padding-left: 43px;
    padding-right: 100px;
  }
}
/* 溫馨提醒 */
.cate-remind {
  position: relative;
  margin: 8px 0 20px;
  padding: 20px 20px 20px 130px;
  background: #f3f3f3;
}
.cate-remind .ti {
  position: absolute;
  font-style: normal;
  z-index: 1;
  top: 20px;
  left: 30px;
  width: 100px;
  color: #000;
  padding: 0;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  font-style: normal;
}
.cate-remind .wrap {
  position: relative;
}
@media (max-width: 1199px) {
  .cate-remind {
    padding: 20px 20px 20px 110px;
  }
  .cate-remind .ti {
    left: 20px;
  }
}
@media (max-width: 767px) {
  .cate-remind {
    padding: 15px 15px 15px 110px;
  }
  .cate-remind .ti {
    top: 15px
  }
}
/* --------------------------------------------
投資專區
-------------------------------------------- */
/* 下載按鈕 */
/* #profile .btn-back {
  display: inline-block;
  vertical-align: middle;
}
#profile .download a {
  display: inline-block;
  height: 38px;
  color: #fff;
  text-decoration: none;
  line-height: 38px;
  background-color: #c62329;
  overflow: hidden;
  border-radius: 50px;
}
#profile .download div {
  display: inline-block;
  vertical-align: middle;
}
#profile .download span {
  display: block;
  margin: -2px auto 0;
  overflow: hidden;
}
#profile .download a.catalog span {
  width: 22px;
  height: 18px;
  background: url(../images/btn_profile.png) no-repeat 0 0;
  background-size: cover;
}
@media only screen and (max-width:1279px) {
  #profile .btn-download {
    text-align: center;
  }
  #profile .btn-download a {
    margin-right: 3px;
    margin-left: 3px;
  }
  #profile .download {
    display: inline-block;
    margin: 40px 0;
    vertical-align: middle;
  }
  #profile .download a {
    padding: 0 18px 0 10px;
  }
  #profile .download div {
    min-width: 38px;
  }
}
@media only screen and (min-width:1280px) {
  #profile .download {
    position: fixed;
    bottom: 82px;
    left: 58px;
  }
  #profile .download a {
    display: block;
    margin-bottom: 10px;
    width: 42px;
    border-radius: 4px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  #profile .download a.catalog:hover {
    width: 118px;
    background-color: #c62329;
  }
  #profile .download div {
    margin-right: 3px;
    width: 42px;
  }
}
@media only screen and (min-width:640px) {
  #profile .lang-box {
    width: 104px;
  }
  #profile .lang-box .dropdown-menu {
    width: 104px;
  }
}
@media only screen and (min-width:1025px) {
  #profile .lang-box .dropdown-menu {
    display: block;
    top: 35px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s 0s, top .3s 0s;
    -o-transition: opacity .3s 0s, top .3s 0s;
    transition: opacity .3s 0s, top .3s 0s;
  }
  #profile .lang-box:hover .dropdown-menu {
    top: 28px;
    opacity: 1;
    visibility: visible;
  }
}
@media only screen and (max-width:991px) {
  #profile .right-wrap {
    float: none;
    width: 100%;
  }
  .company-nav {
    float: none;
    width: 100%;
    padding: 15px;
  }
  .company-nav div {
    display: inline-block;
    width: 45%;
    padding: 0 15px;
  }
} */
/*
#profile .lang-box {
  float: right;
  position: relative;
  width: 94px;
  height: 30px;
} */
/*#profile .right-wrap {
float: left;
}*/
/* #profile .lang-box span {
  display: block;
  position: absolute;
  z-index: 1;
  width: 9px;
  height: 9px;
}
#profile .lang-box span.border-top-left {
  top: 0;
  left: 0;
  border-top: #010101 solid 1px;
  border-left: #010101 solid 1px;
}
#profile .lang-box span.border-bottom-right {
  bottom: 2px;
  right: 0;
  border-bottom: #010101 solid 1px;
  border-right: #010101 solid 1px;
}
#profile .lang-box button {
  display: block;
  position: relative;
  padding: 0 10px 1px;
  width: 100%;
  height: 28px;
  font-size: 0.8125rem;
  color: #444;
  text-align: left;
  line-height: 28px;
  border: #999 solid 1px;
  background: transparent;
}
#profile .lang-box button:after {
  display: block;
  content: '';
  position: absolute;
  top: 9px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-right: #444 solid 1px;
  border-bottom: #444 solid 1px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#profile li.lang.open button:after {
  top: 12px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#profile .lang-box .dropdown-menu {
  top: 28px;
  padding: 0;
  min-width: 94px;
  text-align: center;
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: rgba(246, 246, 246, .95);
}
#profile .lang-box .dropdown-menu li a {
  display: block;
  padding: 0;
  width: 100%;
  font-size: 0.8125rem;
  color: #333;
  line-height: 25px;
}
#profile .lang-box .dropdown-menu li a:hover {
  background-color: #ddd;
}
#profile .lang-box .dropdown-menu li a.current {
  color: #fff;
  background-color: #c62329;
}
#profile .lang-box:hover button:after {
  top: 12px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.shareholder-tab {
  width: 100%;
  border: 1px solid #ddd;
  margin-bottom: 30px;
  text-align: center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0 1px 2px #ddd;
  -moz-box-shadow: 0 1px 2px #ddd;
  -webkit-box-shadow: 0 1px 2px #ddd;
}
.shareholder-tab.noshadow {
  margin-bottom: 0;
  border-bottom: none;
  border-radius: none;
  -moz-border-radius: none;
  -webkit-border-radius: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.shareholder-tab th {
  padding: 6px;
  border: 1px solid #ddd;
  background: #fafafa;
  color: #c62329;
  text-align: center;
}
.shareholder-tab tr:first-child th:first-child {
  -moz-border-radius-top-left: 3px;
  border-top-left-radius: 3px;
}
.shareholder-tab tr:first-child th:last-child {
  border-top-right-radius: 3px;
}
.shareholder-tab tr {
  text-align: center;
  padding-left: 20px;
}
.shareholder-tab td.title {
  background: #c62329;
  color: #fff;
}
.shareholder-tab td.title span {
  color: #fbdbdc;
  padding-left: 10px;
}
.shareholder-tab td {
  padding: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-bottom: none;
}

.download-list {
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.download-list .title {
  font-size: 1rem;
  padding: 10px 15px;
  background: #f8f8f8;
  color: #000;
  margin-bottom: 5px;
  border-bottom: 1px solid #ddd;
}
.download-list .col-md-6 {
  padding: 6px 15px;
}
.download-list td {
  padding: 6px 15px;
}
.btn-pdf a {
  display: inline-block;
  margin-top: 15px;
  padding: 0 15px 0 30px;
  color: #444;
  background: url(../images/icon_pdf.png) 0 0 no-repeat;
  display: inline-block;
  text-decoration: none;
}
.btn-pdf a:hover {
  color: #666;
}

.company-nav {
  float: right;
  width: 200px;
  padding: 15px 30px 0;
  background: #fafafa;
}
.company-nav strong {
  display: block;
  color: #000;
}
.company-nav div {
  margin-bottom: 15px;
  color: #666;
} */
/* --------------------------------------------
產品編輯器樣板
-------------------------------------------- */
.edit-wrap {
  --gap-item: 15px;
  --fz-title: 1.5em;
  --fz-h1: 1.25em;
  --fz-h2: 1.1875em;
  --fz-h3: 1.125em;
  --fz-h4: 1.125em;
  --fz-h5: 1.0625em;
  --fz-h6: 1.125em;
}
@media (max-width: 991px) {
  .edit-wrap {
    --gap-item: 10px;
  }
}
@media only screen and (max-width:767px) {
  .edit-wrap {
    --fz-title: 1.375rem;
    --fz-h1: 1.125rem;
    --fz-h2: 1.125em;
  }
}
/*
 * 【樣板】標題
 */
.view-con .txt,
.view-intro,
.edit-wrap {
  font-size: 16px;
  text-align: justify;
  line-height: 1.8;
}
.view-con .txt h1,
.view-intro h1,
.edit-wrap h1 {
  font-size: var(--fz-h1);
  color: #d35400;
  margin-bottom: 20px;
  font-weight: bold;
}
.view-con .txt h2,
.view-intro h2,
.edit-wrap h2 {
  font-size: var(--fz-h2);
  color: #d35400;
  margin-bottom: 20px;
}
.view-con .txt h3,
.view-intro h3,
.edit-wrap h3 {
  font-size: var(--fz-h3);
  color: #cc1d24;
  margin-top: 25px;
}
.view-con .txt h4,
.view-intro h4,
.edit-wrap h4 {
  font-size: var(--fz-h4);
  color: #4e5f70;
  margin-top: 30px;
}
.view-con .txt h5,
.view-intro h5,
.edit-wrap h5 {
  font-size: var(--fz-h5);
  text-align: center;
  margin: 30px 0 10px;
}
.view-con .txt h6,
.view-intro h6,
.edit-wrap h6 {
  font-size: var(--fz-h6);
}
.theme-block-title {
  font-size: var(--fz-title);
  line-height: 1.4;
  color: #222;
  padding: 0;
  margin: 5px 0 10px 0;
  display: block;
  font-weight: 600;
  letter-spacing: 3px;
}
.theme-block-title h1,
.theme-block-title h2,
.theme-block-title h3,
.theme-block-title h4,
.theme-block-title h5,
.theme-block-title h6 {
  font: inherit;
  margin: 0;
  padding: 0;
}
.theme-sub-title {
  font-size: var(--fz-h1);
  line-height: 1.5;
  font-weight: 600;
  color: #222;
  padding: 0;
  margin: 10px 0;
  display: block;
  letter-spacing: 2px;
}
.theme-sub-title h1,
.theme-sub-title h2,
.theme-sub-title h3,
.theme-sub-title h4,
.theme-sub-title h5,
.theme-sub-title h6 {
  font: inherit;
  margin: 0;
  padding: 0;
}
/*
 * 【樣板】單圖單文
 */
.theme-full {
  width: 100%;
  margin: 0 auto 40px;
}
.theme-full .pic {
  line-height: 0;
}
.theme-full img {
  width: 100%;
  display: block;
  margin: 0 auto 20px;
}
.theme-full p {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
}
/*
 * 【樣板】左圖右文
 */
.theme-r-word-l-pic {
  display: table;
  width: 100%;
  margin: 0 auto 40px auto;
}
.theme-r-word-l-pic p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.theme-r-word-l-pic .pic {
  display: table-cell;
  vertical-align: middle;
  width: 55%;
  line-height: 0;
  position: relative;
  z-index: 10;
}
.theme-r-word-l-pic .pic img {
  max-width: 100%;
  margin: 0 auto;
}
.theme-r-word-l-pic .word {
  display: table-cell;
  vertical-align: middle;
  width: 45%;
  padding-right: 15px;
  padding-left: 60px;
}
/*
  * 【樣板】左文右圖
  */
.theme-r-pic-l-word {
  display: table;
  width: 100%;
  margin: 0 auto 40px auto;
  direction: rtl;
}
.theme-r-pic-l-word p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.theme-r-pic-l-word .pic {
  display: table-cell;
  vertical-align: middle;
  width: 55%;
  direction: ltr;
  text-align: right;
  line-height: 0;
  position: relative;
  z-index: 10;
}
.theme-r-pic-l-word .pic img {
  max-width: 100%;
  margin: 0 auto;
}
.theme-r-pic-l-word .word {
  display: table-cell;
  vertical-align: middle;
  width: 45%;
  direction: ltr;
  padding-left: 15px;
  padding-right: 60px;
}
/*
  * 【樣板】多欄圖文
  */
.theme-mutiple-columns {
  position: relative;
  width: 100%;
  margin: 0 calc(var(--gap-item) * -1) 20px calc(var(--gap-item) * -1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.theme-mutiple-columns > * {
  display: inline-block;
  vertical-align: top;
  width: calc(33.3333333333% - var(--gap-item) * 2);
  margin: 0 var(--gap-item) var(--gap-item);
  height: auto !important;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  z-index: 10;
}
.theme-mutiple-columns p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.theme-mutiple-columns .pic {
  text-align: center;
  margin-bottom: calc(var(--gap-item) * 0.5);
}
.theme-mutiple-columns .pic + .word {
  margin-top: 20px;
}
.theme-mutiple-columns img {
  line-height: 0;
  display: inline-block;
}
/*
  * 【樣板】聯絡我們(新2023/08)
  */
.theme-contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 8px;
  margin: 0 auto 20px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.theme-contact > * {
  display: inline-block;
  vertical-align: top;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 calc(25% - 10px);
  flex: 1 1 calc(25% - 10px);
}
.theme-contact > * img {
  width: 100% !important;
  height: auto !important;
}
@media only screen and (max-width:1199px) {
  .theme-full p {
    padding-left: 0;
    padding-right: 0;
  }
  .theme-r-pic-l-word .pic {
    width: 50%;
  }
  .theme-r-pic-l-word .word {
    width: 50%;
    padding-left: 0;
    padding-right: 30px;
  }
  .theme-r-word-l-pic .pic {
    width: 50%;
  }
  .theme-r-word-l-pic .word {
    width: 50%;
    padding-right: 0;
    padding-left: 30px;
  }
  .theme-contact > * {
    -ms-flex: 1 1 calc(50% - 10px);
    -webkit-box-flex: 1;
    flex: 1 1 calc(50% - 10px);
  }
}
@media only screen and (max-width:849px) {
  .theme-r-pic-l-word {
    display: block;
    direction: ltr;
  }
  .theme-r-pic-l-word .pic {
    display: block;
    width: 100%;
    margin: 0 auto 20px auto;
    text-align: center;
    max-width: none;
  }
  .theme-r-pic-l-word .word {
    display: block;
    width: 100%;
    padding-right: 0;
    max-width: none;
  }
  .theme-r-pic-l-word .theme-tour-stit {
    text-align: center;
  }
  .theme-r-word-l-pic {
    display: block;
  }
  .theme-r-word-l-pic .pic {
    display: block;
    width: 100%;
    margin: 0 auto 20px auto;
    text-align: center;
    max-width: none;
  }
  .theme-r-word-l-pic .word {
    display: block;
    width: 100%;
    padding-left: 0;
    max-width: none;
  }
  .theme-r-word-l-pic .theme-tour-stit {
    text-align: center;
  }
}
@media (max-width: 549px) {
  .theme-mutiple-columns > * {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
  .theme-mutiple-columns .pic {
    width: 100%;
  }
  .theme-mutiple-columns .pic img {
    position: relative;
    top: auto;
    left: auto;
  }
  .theme-mutiple-columns .pic + .word {
    margin-top: 10px;
  }
  .theme-mutiple-columns .word {
    padding-left: 0;
  }
  .theme-contact > * {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
  }
}
/* 案場實績 - 設計公司 - 列表 */
.designer-list .item {
  position: relative;
  min-height: 220px;
  padding-left: 250px;
  padding-top: max(5vh, 40px);
  margin-bottom: max(5vh, 40px);
  border-top: 1px solid #eee;
}
.designer-list .item:first-of-type {
  padding-top: 0;
  border-top: none;
}
.designer-list .profile {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.designer-list .img {
  position: absolute;
  display: block;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 100%;
  overflow: hidden;
  left: -250px;
  top: 0px;
  background-color: #fff;
}
.designer-list .img::before {
  content: '';
  position: absolute;
  display: block;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/default_designer.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.designer-list .img img {
  position: relative;
  z-index: 5;
  -o-object-position: center;
  object-position: center;
  -o-object-fit: cover;
  object-fit: cover;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s;
  -o-transition: transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
}
.designer-list .img:hover img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}
.designer-list .text a {
  color: #000;
}
.designer-list .text a:hover {
  color: #cc1d24
}
.designer-list .inst {
  font-size: 18px;
  display: block;
  font-weight: 600;
  color: #000;
  line-height: 1.4;
}
.designer-list .name {
  font-size: 20px;
  display: block;
  font-weight: 600;
  color: #000;
  line-height: 1.4;
  margin: 0.25em 0;
  padding: 0;
}
.designer-list .type {
  display: block;
  font-size: 14px;
  color: #666;
  font-style: normal;
  line-height: 1.4;
}
.designer-list .gallery {
  margin-top: 20px;
  margin-right: -10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 10px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.designer-list .gallery > * {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: calc(25% - 10px);
  flex-basis: calc(25% - 10px);
  width: calc(25% - 10px);
}
.designer-list .gallery a img {
  position: relative;
  z-index: 0;
}
@media (max-width: 991px) {
  .designer-list .item {
    min-height: 180px;
    padding-left: 200px;
  }
  .designer-list .img {
    width: 180px;
    left: -200px;
  }
}
@media (max-width: 767px) {
  .designer-list .gallery > * {
    -ms-flex-preferred-size: calc(50% - 10px);
    flex-basis: calc(50% - 10px);
    width: calc(50% - 10px);
  }
}
@media (max-width: 639px) {
  .designer-list .item {
    min-height: 150px;
    padding-left: 0;
  }
  .designer-list .img {
    width: 150px;
    left: auto;
    top: auto;
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 150px;
    flex: 0 0 150px;
  }
  .designer-list .profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 20px;
  }
  .designer-list .profile .text {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}
@media (max-width: 499px) {
  .designer-list .item {
    min-height: 80px;
  }
  .designer-list .img {
    width: 80px;
    -ms-flex: 0 0 80px;
    flex: 0 0 80px;
  }
  #designer-list .filter .ti-label {
    float:none;
    width: 100%;
  }
  #designer-list .filter .input-style {
    max-width: none;
  }
}
/* 案場實績 - 設計公司 - 詳細 */
#designer-view {
  /* 為了使內部sticky正常不能更改overflow */
  overflow: visible;
}
.designer-half {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: 0 30px;
  padding-bottom: 50px;
}
.designer-half .col-left {
  width: 300px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 300px;
  flex: 0 0 300px;
}
.designer-half .col-right {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: calc(100% - 300px);
  flex-basis: calc(100% - 300px);
}
.designer-profile {
  position: -webkit-sticky;
  position: sticky;
  top: 110px;
  border: 1px solid #eee;
  -webkit-box-shadow: 0 0 20px rgb(0 0 0 / 10%);
  box-shadow: 0 0 20px rgb(0 0 0 / 10%);
  background-color: #fff;
  padding: 20px 20px;
  overflow-y: auto;
  max-height: calc(100dvh - 120px);
}
.designer-profile::-webkit-scrollbar {
  width: 6px;
  background: rgba(0, 0, 0, 0);
}
.designer-profile::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  margin: 0;
}
.designer-profile::-webkit-scrollbar-thumb {
  -webkit-box-shadow: none;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
}
.designer-profile::-webkit-scrollbar-thumb:hover {
  width: 16px;
}
.designer-profile .head {
  text-align: center;
}
.designer-profile .head .img {
  position: relative;
  display: block;
  margin: 0 auto 20px;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 100%;
  overflow: hidden;
  background-color: #fff;
}
.designer-profile .head .img::before {
  content: '';
  position: absolute;
  display: block;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/default_designer.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.designer-profile .head .img img {
  position: relative;
  z-index: 5;
  -o-object-position: center;
  object-position: center;
  -o-object-fit: cover;
  object-fit: cover;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
}
.designer-profile .head .inst {
  font-size: 16px;
  display: block;
  font-weight: 600;
  line-height: 1.4;
  margin: 0.25em 0;
}
.designer-profile .head .name {
  font-size: 22px;
  display: block;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
.designer-profile .head .job {
  font-style: normal;
  line-height: 1.4;
  display: block;
}
.designer-profile .info {
  list-style: none;
  margin: 25px auto 20px;
  padding: 0;
}
.designer-profile .info a {
  color: #000;
  text-decoration: none;
}
.designer-profile .info a:hover {
  color: #cc1d24;
  text-decoration: underline;
}
.designer-profile .info > li {
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  word-break: break-all;
}
.designer-profile .info > li .stit {
  white-space: nowrap;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  display: inline-block;
  vertical-align: top;
}
#designer-view .list .col-md-3 {
  float: none !important;
  display: inline-block !important;
  vertical-align: top !important;
}
#designer-view .list {
  margin-bottom: 20px;
  font-size: 0;
}
#designer-view .list .box {
  margin-bottom: 30px;
  font-size: 1rem;
}
#designer-view .list .box a {
  text-decoration: none;
}
#designer-view .list .pic {
  position: relative;
  display: block;
}
#designer-view .list .box .name {
  margin: 15px 0 0 0;
  font-size: 1rem;
  color: #000;
  font-weight: normal;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
#designer-view .list .box .area {
  display: inline-block;
  padding: 7px 5px 5px 5px;
  line-height: 1.2;
  white-space: nowrap;
  font-size: 0.875rem;
  color: #fff;
  background: rgb(0 0 0 / 50%);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 15;
}
#designer-view .list .box .name:after {
  display: block;
  content: '';
  margin-top: 12px;
  width: 22px;
  height: 1px;
  background-color: #5d5c53;
}
#designer-view .list .box .style {
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.9375rem;
  color: #333;
  display: block;
}
#designer-view .list .box .style + .style {
  margin: 0;
}
#designer-view .list .box .style a {
  color: #333;
}
#designer-view .list .box .style a:hover {
  color: #333;
  text-decoration: underline
}
#designer-view .list .box .style + .brief {
  margin-top: 5px;
}
#designer-view .list .box .brief {
  display: block;
  margin: 8px 0 5px;
  padding: 0;
  font-size: 0.9375rem;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}
#designer-view .list .box:hover .name {
  color: #cc1d24;
}
#designer-view .list .box:hover .area {
  color: #fff;
  background: #cc1d24
}
@media only screen and (max-width:1199px) {
  .designer-half .col-left {
    width: 250px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
  }
  .designer-half .col-right {
    -ms-flex-preferred-size: calc(100% - 250px);
    flex-basis: calc(100% - 250px);
  }
}
@media only screen and (max-width:991px) {
  .designer-half {
    display: block;
  }
  .designer-half .col-left {
    width: 100%;
  }
  .designer-half .col-right {
    width: 100%;
  }
  .designer-profile {
    position: relative;
    max-height: none;
    margin-bottom: 30px;
    top: auto;
    padding: 30px;
  }
  .designer-profile .head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 120px;
    gap: 0 30px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .designer-profile .head .img {
    width: 100px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    margin: 0;
  }
  .designer-profile .head .text {
    text-align: left;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
  }
  .designer-profile .cont {
    position: relative;
  }
  .designer-profile .info {
    margin: 20px 0 0;
    border-top: 1px solid #ddd;
    padding-top: 20px;
  }
}
@media only screen and (max-width:515px) {
  #designer-view .list > div {
    /* width: 100%; */
    display: inline-block;
    vertical-align: top;
    float: none
  }
}
@media (max-width: 499px) {
  .designer-profile .head .img {
    width: 80px;
    flex-basis: 80px;
  }
  .designer-profile .head {
    gap: 0 15px;
    min-height: 80px;
  }
  .designer-profile {
    padding: 15px;
  }
  .designer-profile .info {
    margin-top: 30px;
    padding-top: 30px;
  }
}
@media (max-width: 399px) {
  #designer-view .list > div {
    width: 100%;
    display: block;
  }
}
@media only screen and (min-width:768px) {
  #designer-view .list .box {
    margin-bottom: 40px;
  }
}
/* 社群 */
.community-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.community-links a {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50px;
  background-color: #ddd;
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 5px;
}
.community-links a {
  background-color: #333;
  color: #fff;
}
.community-links a:hover {
  -webkit-filter: brightness(110%);
  filter: brightness(110%);
}
.community-links a.line {
  background-color: #00c300;
}
.community-links a.fb {
  background-color: #1877f2;
}
.community-links a.ig {
  background-color: #d6249f;
  background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.community-links a.x {
  background-color: #000;
}
.community-links a.yt {
  background-color: #ff0000;
}
.community-links a.url {
  background-color: #cc1d24;
}
.community-links a.wechat {
  background-color: #7bb32e;
}
.community-links a.linkedin {
  background-color: #0077b5;
}
.pic-wrap + .community-links {
  margin: 20px auto;
}
@media only screen and (max-width:991px) {
  .designer-half .community-links {
    position: absolute;
    top: -15px;
    right: 0;
    gap: 5px;
    z-index: 15;
  }
}
@media (max-width: 499px) {
  .community-links a {
    width: 26px;
    height: 26px
  }
}