@charset "utf-8";
/* CSS Document */
body {
  --font-f01: 0.722rem; /* 13px */
  --font-f02: 0.778rem; /* 14px */
  --font-f03: 0.833rem; /* 15px */
  --font-f04: 0.889rem; /* 16px */
  --font-f05: 0.944rem; /* 17px */
  --font-f06: 1rem;     /* 18px */
  --font-f07: 1.111rem; /* 20px */
  --font-f08: 1.222rem; /* 22px */
  --font-f09: 1.333rem; /* 24px */
  --font-f10: 1.444rem; /* 26px */
  --font-f11: 1.556rem; /* 28px */
  --font-f12: 1.667rem; /* 30px */
  --font-f13: 1.778rem; /* 32px */
  --font-f14: 1.889rem; /* 34px */
  --font-f15: 2rem;     /* 36px */
  --font-f16: 2.111rem; /* 38px */
  --font-f17: 2.222rem; /* 40px */
  --font-f18: 2.333rem; /* 42px */
  --font-f19: 2.444rem; /* 44px */
  --font-f20: 2.556rem; /* 46px */
  --font-f21: 2.667rem; /* 48px */

  --color-c01: #017ebe;
}

.pageHeader{ width: 100%; margin:0 auto 0 auto; padding:0px 0 0px 0; position: relative; }
.pageHeader .box-2{ display: flex; justify-content: space-between; align-items: center; min-height: 100px;}
.pageHeader h1{ width: 387px; padding:0 0px 0 0; margin:10px 0px 0 0; }
.pageHeader h1 img{ width: 100%; }
.pageHeader nav.menubox{ margin: 0px 0px 0px 0; display: flex; justify-content: flex-end; align-items: center;}

.pageHeader .lang{ margin:0 0px 0 10px; padding: 0 0px 0 0px; display: flex; justify-content: flex-start; align-items: center;}
.pageHeader .lang:before {
    content: "";
    width: 1px;
    height: 26px;
    background: #d5d5d5;
    display: block;
}
.pageHeader .lang .nav-active{ display: flex; justify-content: center; align-items: center; }
.pageHeader .lang .nav-active:after { 
    content: "";
    width: 9px;
    height: 6px;
    background: url(../images/arrow.png) no-repeat;
    background-size: 100% auto;
    display: block;
}
.pageHeader .lang a {
    margin:0 10px 0 10px;
}
.pageHeader .lang .icon:before {
    content: "";
    width: 25px;
    height: 25px;
    background: url(../images/lang.png) no-repeat;
    background-size: 100% auto;
    display: block;
}
.pageHeader .lang .txt{ margin:0 15px 0 18px; }

.pageHeader .searchBtn{ margin:0 0px 0 0px; padding: 6px 26px; display: flex; justify-content: flex-end; align-items: center; color:#017ebf; font-size:var(--font-f09); border: 2px solid #017ebf; border-radius: 40px; font-weight:600;}
.pageHeader .searchBtn .icon:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../images/search.png) no-repeat;
    background-size: 100% auto;
    display: block;
}
.pageHeader .searchBtn .txt{ margin:0 0px 0 18px; }
@media screen and (max-width: 1850px) {
.pageHeader h1{ width: 360px; }
.pageHeader .searchBtn { font-size:var(--font-f08); }
}
@media screen and (max-width: 1750px) {
.pageHeader .searchBtn { font-size:var(--font-f07); }
}
@media screen and (max-width: 1550px) {
.pageHeader h1{ width: 340px; }
.pageHeader .lang .txt{ margin:0 15px 0 15px; }
.pageHeader .searchBtn .txt{ margin:0 0px 0 15px; }
}
@media screen and (max-width: 1450px) {
.pageHeader h1{ width: 320px; }
.pageHeader .searchBtn{ margin:0 0px 0 0px; padding: 0px; border: none; border-radius: 0px; }
.pageHeader .searchBtn .txt{ display: none; }

.pageHeader .box-3{ min-height: 90px;}
.pageHeader .lang .icon{
    padding: 10px 0;
}
.pageHeader .lang .txt{ display: none; }
.pageHeader .lang .nav-active{ display: flex; justify-content: flex-start; align-items: center; }
.pageHeader .lang .nav-active:after { 
    content: "";
    background: none;
}
.pageHeader .lang ul {
    margin:0 0px 0 -20px;
}
}
@media screen and (max-width: 1280px) {
.pageHeader h1{ width: 300px; }
.pageHeader .box-2{ min-height: 80px;}
}
@media screen and (max-width: 1150px) {
.pageHeader h1{ width: 280px; }
.pageHeader nav.menubox .nav-menu{ display: none; }
.pageHeader .searchBtn{ margin:0 50px 0 0px; }
}
@media screen and (max-width: 1000px) {
.pageHeader h1{ width: 260px; }
}
@media screen and (max-width: 600px) {
.pageHeader h1{ width: 240px; }
.pageHeader .box-2{ min-height: 70px;}
}

/* -search-*/
.search_block{
  z-index: 9;
  width: 100%; background: #f1f1f1;
  margin: 0 auto; padding: 40px 0;
  position: relative;
}
.search_block_bg{
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 100px;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(100% - 100px);
        z-index: 15;

        display: none;
        opacity: 0;
  animation: FadeOut 1s ease-in-out;
}
@media screen and (max-width: 1450px) {
.search_block_bg{ top: 90px; height: calc(100% - 90px); }
}
@media screen and (max-width: 1280px) {
.search_block_bg{ top: 80px; height: calc(100% - 80px); }
}
@media screen and (max-width: 600px) {
.search_block_bg{ top: 70px; height: calc(100% - 70px); }
}

.search_block_bg.active {
    display: block;
    opacity: 1;
    animation: FadeIn 0.5s ease-in-out;
  }
@keyframes FadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes FadeOut {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
    opacity: 0;
  }
  100% {
    display:none;
    opacity: 0;
  }
}

.search{ margin:0px 0 0px 0; width:auto; height:auto; overflow: hidden; 
 display: flex;
  justify-content: center; align-items: center; flex-wrap: nowrap;
}
.search form{ 
 display: flex;
  justify-content: center; align-items: center; flex-wrap: nowrap;
}
.search h2{ width: auto; color: #333; font-weight: 600; font-size: var(--font-f08); margin:0px 25px 0px 0; padding:0px; }
.search .box{ float:right; background:#fff ; border-radius: 30px; border: none; 
  display: flex;
  justify-content: center; align-items: center;}
.search .box .sbox{
  display: block;
  margin: 0;
  width: 480px;
  color: #333; font-weight: 600;
  line-height: 50px;
  height:50px;
  padding:0px 0px 0px 25px;
  border: none;
  outline: none;
  background:none;
}
.search .box .sbtn {
  background:url(../images/search.png) no-repeat center center;
  width:24px;
  height:24px;
  display:block;
  margin:0px 20px 0px 0px;
  padding:0px;
  font: inherit;
  cursor: pointer;
  border: none;
  outline: none;
}
@media screen and (max-width: 1750px) {
.search h2 { font-size:var(--font-f06); }
}
@media screen and (max-width: 780px) {
.search{ flex-wrap: wrap;
}
.search form{ flex-wrap: wrap;
}
.search h2{ width: 100%; text-align:center; margin:0px 0px 10px 0; }
.search .box{ width: 100%;}
.search .box .sbox{
  width: 100%;
}
.search .box .sbtn {
  padding:0px 15px;
}
}

/* mobile menu */
.menu-btn {
  display: none;
  position: absolute;
  width: 50px; margin: 0 0 0 0px; 
  height: 80px;
  transition: 0.5s;
  top: 0px;
  right:5px;
}
@media screen and (max-width: 1150px) {
.menu-btn {
    display: block;
  }
}
@media screen and (max-width: 600px) {
.menu-btn {
  height: 70px;
}
}

.menu-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 30px;
  height: 3px;
  background-color: var(--color-c01);
  border-radius: 2px;
  transition: 0.3s;
}
.menu-btn span:nth-child(1) {
  top: calc(50% - 8px);
}
.menu-btn span:nth-child(3) {
  top: calc(50% + 8px);
}
.menu-btn.active span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: #333;
}
.menu-btn.active span:nth-child(2) {
  width: 0;
}
.menu-btn.active span:nth-child(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background-color: #333;
}

/* menu style */
section.menu {
  display: none;
  position: fixed;
  z-index: 98;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  background-color: var(--color-c01);
  transform: translateX(100%);
  opacity: 0;
  transition: 0.5s;
  overflow-y: auto;
}
@media screen and (max-width: 600px) {
section.menu {
  top: 70px;
  height: calc(100% - 70px);
}
}

section.menu.show {
  opacity: 1;
  transform: translateX(0);
}

.scrollbar-inner::-webkit-scrollbar {
  display: none;
}
.scrollbar-inner.scroll-content {
  max-height: calc(100vh - 62px) !important;
}
.scrollbar-inner > .scroll-element.scroll-y {
  width: 5px;
}
.scrollbar-inner > .scroll-element .scroll-bar {
  opacity: 0.8;
}

.scrollbar-inner .lang{ display: flex; justify-content: center; align-items: center; margin:20px 0px 0 0px; padding: 0 0 0 0px; position: relative;
}
.scrollbar-inner .lang:before {
    content: "";
    width: 1px;
    height: 26px;
    background: #888686;
    position: absolute; left: -20px;
}
.scrollbar-inner .lang li{ padding: 0 9px 0 0px; margin:0 0px 0 0; list-style: none; color: #fff; font-size:20px;
display: flex;
  justify-content: center; align-items: center; 
}
.scrollbar-inner .lang li a{ color: rgba(255, 255, 255, 0.7); }
.scrollbar-inner .lang li:hover a{ color: #c8161d;}
.scrollbar-inner .lang li.active a{ color: #fff;}
.scrollbar-inner .lang li:after {
    content: "";
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    margin: 0 0px 0 5px;
}
.scrollbar-inner .lang li:last-child:after { display: none;}

ul.main-list {
  width: 100%;
  color: #000;
  margin: 0; padding: 0;
  list-style: none;
  border-top:1px solid rgba(0, 0, 0, 0.1);
}
ul.main-list > li {
  position: relative;
  cursor: pointer;
  box-shadow: 0 1px rgba(255, 255, 255, 0.3);
  transition: 0.5s;
}
ul.main-list > li.more::before {
  position: absolute;
  content: "";
  top: 25px;
  right: 20px;
  width: 12px;
  height: 8px;
  background: url(../images/icon-arrow-down-white.svg) no-repeat;
  opacity: 0.7;
  transition: 0.5s;
}
ul.main-list > li.more.active::before {
  transform: scale(-1);
}
ul.main-list > li > a {
  display: inline-block;
  padding: 15px 20px;
  font-size: 18px;
  color: #fff;
  transition: 0.5s;
}
ul.main-list > li > a:hover {
  color: #ffc832;
}

ul.sub-list {
  display: none;
  background-color: rgba(0, 0, 0, 0.2);
  margin: 0; padding: 0; list-style: none;
}
ul.sub-list > li {
  position: relative;
  cursor: pointer;
  padding: 0; margin: 0; list-style: none;
}
ul.sub-list > li + li {
  border-top: 1px solid rgba(255,255, 255, 0.1);
}
ul.sub-list > li.more::before {
  position: absolute;
  content: "";
  top: 20px;
  right: 20px;
  width: 12px;
  height: 8px;
  background: url(../images/icon-arrow-down-white.svg) no-repeat;
  opacity: 0.7;
  transition: 0.5s;
}
ul.sub-list > li.more.active::before {
  transform: scale(-1);
}
ul.sub-list > li > a {
  display: inline-block;
  padding: 15px 10px 15px 40px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  transition: 0.5s;
}
ul.sub-list > li > a:hover {
  color: #ffc832;
}

ul.third-list {
  display: none;
  background-color: rgba(0, 0, 0, 0.4);
  margin: 0; padding: 0; list-style: none;
}
ul.third-list > li + li {
  border-top: 1px solid #0b0b0b;
  cursor: pointer;
}
ul.third-list > li > a {
  display: block;
  padding: 15px 10px 15px 60px;
  color: rgba(255, 255, 255, 0.8);
  transition: 0.5s;
}
ul.third-list > li > a:hover {
  color: #ffc832;
}

ul.main-list li.mo_lang {
    display: flex; justify-content:center; align-items: center;
    margin: 0; padding: 0 20px; 
}
ul.main-list li.mo_lang .icon {
    margin: 0 10px 0 0;
}
ul.main-list li.mo_lang .icon:before {
    content: "";
    width: 25px;
    height: 25px;
    background: url(../images/lang02.png) no-repeat;
    background-size: 100% auto;
    display: block;
}
ul.main-list > li.mo_lang > a{
    padding: 15px 10px;
}

/* banner */
.Modern-Slider  {
  margin: 0; padding: 0; width: 100%;
}
.Modern-Slider .item {
  margin: 0; padding: 0; position:relative;
}
.Modern-Slider .item .img-fill, .Modern-Slider .item .img-fill a{
  width: 100%;
  margin: 0; padding: 0;
  display: flex;
    justify-content: center;
  align-items: center;
}

.Modern-Slider .for_PC {
  width: 100%;
  margin: 0 0 0 0; padding: 0;
}

.Modern-Slider .for_mobile {
  display: none;
}

.Modern-Slider .for_PC img, .Modern-Slider .for_mobile img {
  width: 100%; 
}

.Modern-Slider .slick-dots {
  bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Modern-Slider .slick-dots li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  width: auto;
  height: auto;
}

.Modern-Slider .slick-dots li+li {
  margin-left: 15px;
}

.Modern-Slider .slick-dots li button {
  background-color: #00aeff;
  opacity: 0.6;
  display: block;
  width: 9px;
  height: 9px;
  border: none;
  padding: 0;
  border-radius: 50%;
  border: none;
}

.Modern-Slider .slick-dots li.slick-active button {
  background-color: #fff;
  width: 12px;
  height: 12px;
  border: 2px solid #00aeff;
  opacity: 1;
}
.Modern-Slider .slick-dots li button:before {
  font-size: 0;
}
@media screen and (max-width: 1280px) {
.Modern-Slider .slick-dots {
  bottom: 10px;
}
}
@media screen and (max-width: 900px) {
.Modern-Slider .for_PC {
  display: none;
}
.Modern-Slider .for_mobile {
  display: block; width: 100%; 
}
}

/* page-banner */
.page-banner {
  width: 100%; position: relative;
}
.page-banner .box{
  position: absolute; top: 0;
  width: 100%;
  z-index: 1;
  max-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.page-banner .for_PC{
  background-size: cover;
  position: relative;
  width: 100%;
  height: 350px;
  margin: 0;
  padding: 0;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;

  background-attachment: fixed;
}
.page-banner .for_PC:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    background: rgba(0, 0, 0, 0.28);
}
.page-banner .for_mobile{ display: none; }
.page-banner .banner_ttbox {
  width: 100%;
  display: flex;
  justify-content: center; align-items: center;
  flex-wrap: wrap;
  z-index: 2;
}
.page-banner .banner_ttbox h2{
  color: #fff;
  font-size:var(--font-f20);
  font-weight: 600;
  letter-spacing: 3px;
  margin: 0px 0 0px 0;
  z-index: 2;
  text-align: center;
}
@media (max-width: 1280px) {
.page-banner .banner_ttbox h2 {
  font-size:var(--font-f15);
}
}
@media screen and (max-width: 768px) {
.page-banner .for_PC{ display: none; }
.page-banner .for_mobile{ display: block; position: relative;
margin: 0;
  padding: 0;
}
.page-banner .for_mobile:before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% - 5px);
    display: block;
    z-index: 1;
    background: rgba(0, 0, 0, 0.28);
}
.page-banner .for_mobile img{ width: 100%; }
}

/* 麵包屑 */
.bread-crumbs {
  width: 100%;
  margin: 0px auto  0px auto;
  display: flex;
  justify-content: flex-start; align-items: center;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 0;
}
.bread-crumbs li {
  display: inline-block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.bread-crumbs li a {
  color: rgba(255, 255, 255, 0.7);
}

.bread-crumbs li a:hover {
  text-decoration:underline;
}
.bread-crumbs li:after {
    display: inline-block;
    content: '/';
    margin: 0px 5px 0 5px;
}
.bread-crumbs li:last-child{
  color: #fff;
}
.bread-crumbs li:last-child:after {
  display: none;
}

.bread-crumbs.style {
  width: 100%;
  margin: 40px auto  0px auto;
  display: flex;
}
.bread-crumbs.style li {
  color: #666;
}

.bread-crumbs.style li a {
  color: #666;
}
@media screen and (max-width: 768px) {
.bread-crumbs {
  padding: 10px 0 15px 0;
}
}

/* SCROLL TO TOP */
.scrollToTop {
    display: none;
    position: fixed;
    right: 2%;
    bottom: 10%;
    border: none;
    background: none;
    z-index: 99;
}
/* top */
.pagetop{ width: 58px; height: 58px; border-radius: 100%; background: var(--color-c01); font-size: var(--font-f09);  
display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.pagetop:hover{ background:  #ffc832; }
.pagetop:before{ content: ""; display: block; font-size: 12px;
content: "\f077" ; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #fff; }
@media screen and (max-width: 1024px) {
.pagetop{ width: 42px; height: 42px; font-size: var(--font-f06); }
}

/* 定義區塊 */
.main_top{ height:auto; overflow: hidden; padding: 100px 0px 0px 0px; }
.box-1{ max-width:1365px; width: 90%; margin:0px auto; padding:0px 0;}
.box-2{ width: 95%; margin:0px auto; padding:0px 0;}

@media screen and (max-width: 1450px) {
.main_top{ padding: 90px 0px 0px 0px; }
}
@media screen and (max-width: 1280px) {
.main_top{ padding: 80px 0px 0px 0px; }
}
@media screen and (max-width: 600px) {
.main_top{ padding: 70px 0px 0px 0px; }
}

.user_editor{ width:100%; height:auto; overflow: hidden; position: static !important;}
.user_editor img{ max-width:100% !important; height:auto !important;  }
.line-height{ line-height:1.7;}
.text-center{ text-align:center;}

.title01 {
  width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; line-height: 1.3; position: relative;
}
.title01 h2 {
  width: 100%; font-size:var(--font-f21); margin:0; padding:0 0 10px 0; font-weight: 600; color: #0c0c0c; text-align: center;
}
.title01 h3 {
  width: 100%; font-size:var(--font-f09); margin:0px 0 0px 0px; padding:0 0 30px 0; font-weight: 600; color: var(--color-c01); text-align: center;
}
.title01:after {
    content: '';
    position: absolute;
    bottom: 0px;
    display: inline-block;
    width: 40px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: var(--color-c01);
}

.title02 {
  width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; line-height: 1.3; position: relative;
}
.title02 h2 {
  width: 100%; font-size:var(--font-f17); margin:0; padding:0 0 10px 0; font-weight: 600; color: #0c0c0c; text-align: center;
}
.title02 h3 {
  width: 100%; font-size:var(--font-f09); margin:0px 0 0px 0px; padding:0 0 30px 0; font-weight: 600; color: var(--color-c01); text-align: center;
}
.title02:after {
    content: '';
    position: absolute;
    bottom: 0px;
    display: inline-block;
    width: 40px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: var(--color-c01);
}

.title03 {
  width: 100%;display: flex; justify-content: flex-start; align-items: center;
}
.title03 h2 {
  position: relative;
  display: block;
  font-size:var(--font-f09); margin:0; padding:0; color: var(--color-c01);
}

.title04 {
  width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; line-height: 1.3; position: relative;
}
.title04 h2 {
  width: 100%; font-size:var(--font-f11); margin:0; padding:0 0 10px 0; font-weight: 600; color: #0c0c0c; 
}
.title04:after {
    content: '';
    position: absolute;
    bottom: 0px;
    display: inline-block;
    width: 45px;
    height: 3px;
    left: 0;
    background-color: #ffc832;
}
@media screen and (max-width: 1850px) {
.title01 h2 {
  font-size:var(--font-f19); 
}
}
@media screen and (max-width: 1750px) {
.title01 h2 {
  font-size:var(--font-f18); 
}
}
@media (max-width: 1280px) {
.title01 h2 {
  font-size:var(--font-f15); 
}
.title02 h2 {
  font-size:var(--font-f15); 
}
}

.bg-style01 { background: #f1f1f1; }
.bg-style02 { background: #f3eded; }
.bg-style03 { background: linear-gradient(to bottom, #f1f1f1 0%, #ffffff 72%, #ffffff 100%); }

.space-style01{ padding:120px 0;}
@media screen and (max-width: 1366px) {
.space-style01{ padding:100px 0;}
}
@media screen and (max-width: 1024px) {
.space-style01{ padding:80px 0;}
}
@media screen and (max-width: 1000px) {
.space-style01{ padding:60px 0;}
}
@media screen and (max-width: 600px) {
.space-style01{ padding:50px 0;}
}

/* 首頁 */
/* 最新消息 */
.ind_news { width:100%; }
.ind_news ul{ margin:45px 0 0px 0px; padding: 0px 0px 0px 0px; width:100%; list-style:none;
display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ind_news ul:after {
    content: "";
    width:calc(100% / 3 - 25px);
}
.ind_news li{ margin:0px 0px 0px 0px; padding:20px 0px 20px 0px; width:calc(100% / 3 - 25px); list-style:none; transition: all 0.6s;
  border-bottom: 1px solid #d8d8d8; border-top: 3px solid #3d3d3d; position: relative;
}
.ind_news li a{ display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap; }
.ind_news li .date { 
    font-family: 'Montserrat';
    display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  width: 100px;
  font-weight: 600;
  letter-spacing: 1px;
}
.ind_news li .date div{ 
    width: 100%; color: rgba(61,61,61,0.7); font-size: var(--font-f03);
}
.ind_news li .date div:nth-child(2){ 
    width: 100%; color: #3d3d3d; font-size: var(--font-f21);
}
.ind_news li .text {
    width: calc(100% - 100px);
    border-left: 1px solid #d8d8d8;
    display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 0 15px;
}
.ind_news li .text h2 {
    width: 100%;
    font-size: var(--font-f07);
    color: #0c0c0c;
    font-weight: 600;
    padding: 0; margin: 0 0 0px 0;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ind_news li:hover .text h2 {
    color: var(--color-c01);
}
.ind_news li .text p {
    width: 100%;
    font-size: var(--font-f06);
    color: #3d3d3d;
    font-weight: normal;
    padding: 18px 0 0 0; margin: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media screen and (max-width: 1280px) {
.ind_news li .date { 
  width: 90px;
}
.ind_news li .date div:nth-child(2){ 
    font-size: var(--font-f15);
}
.ind_news li .text {
    width: calc(100% - 90px);
}
}
@media screen and (max-width: 1024px) {
.ind_news ul{
    border-bottom: 1px solid #d8d8d8;
}
.ind_news ul:after {
    content: "";
    width:100%;
}
.ind_news li{ width:100%; border-bottom: none;
}
}


.title_box01{ width:100%; position: relative;
display: flex;
  justify-content: center;
  align-items: center;
}
.title_box01 .more{ position: absolute; bottom:35px; right:0;}

@media screen and (max-width: 1024px) {
.title_box01{ flex-wrap: wrap; }
.title_box01 .more{ position: relative; bottom:auto; right:auto; margin: 35px 0 0px 0;
}
}

/* 關於鑫霸 */
.ind_about { width:100%; 
display: flex; 
    justify-content: space-between;
    align-items: stretch;
}
.ind_about .pic{ width:50%; margin: 0 0 0px 0; padding:0; }
.ind_about .pic img{
  width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
} 

.ind_about .txt{ width:50%; background: url(../images/ind_about_pic02.jpg) no-repeat center center #006bb7;
display: flex; 
    justify-content: flex-start; flex-wrap: wrap;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-right: calc((100% - 1365px) / 2);
    padding-left: 6%;
}
.ind_about .txt .title01 {
  justify-content: flex-start; margin: 0 0 30px 0;
}
.ind_about .txt .title01:after {
    content: '';
    position: absolute;
    bottom: 0px;
    display: inline-block;
    width: 120px;
    height: 2px;
    left: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-color: #ffc832;
}
.ind_about .txt .title01 h2 {
  text-align: left; color: #ffc832; font-size:var(--font-f18); font-weight: 600;
}
.ind_about .txt .title01 h2 span{
  color: #fff; font-size:var(--font-f09); font-weight: 600; padding: 0 0 0 10px; font-style: italic;
}
.ind_about .txt .title01 h3 {
  text-align: left; font-size:var(--font-f07); color: #fff; padding:0 0 10px 0;
}
.ind_about .txt p{ width:100%; 
    color: #fff;
}
@media screen and (max-width: 1500px) {
.ind_about .txt{ 
    padding-right: 5%;
    padding-left: 5%;
  }
}
@media screen and (max-width: 1366px) {
.ind_about .txt{ 
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 1280px) {
.ind_about .txt .title01 h2 {
  font-size:var(--font-f15); 
}
}
@media screen and (max-width: 1024px) {
.ind_about .txt{ 
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 1000px) {
.ind_about .txt{ 
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 900px) {
.ind_about { flex-wrap: wrap;}
.ind_about .txt { width:100%; padding:60px 5%;}
.ind_about .pic { width:100%; }
}

/* 產品 */
.ind_pd { width:100%; background: url(../images/ind_pd_bg.jpg) no-repeat center center #f1f1f1;}
.ind_pd.pd01 { background: none;}
.ind_pd ul{ margin:45px 0 0px 0px; padding: 0px 0px 0px 0px; width:100%; list-style:none;
display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ind_pd.pd01 ul{ margin:0px 0 0px 0px;}
.ind_pd ul:after {
    content: "";
    width:calc(100% / 3);
}
.ind_pd li{ margin:0px 0px 0px 0px; padding:20px 35px 20px 35px; width:calc(100% / 3); list-style:none; transition: all 0.6s;
  border-right: 1px solid #d8d8d8;
}
.ind_pd.pd01 li{ margin:45px 0 0px 0px;}
.ind_pd li:last-child {
    border-right: none;
}
.ind_pd.pd01 li:nth-child(3n+3){ border-right: none;}
.ind_pd li a{ display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; 
}
.ind_pd li .pic {
    width: 100%; overflow: hidden; 
}
.ind_pd li .pic img{
    width: 100%;

    transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -moz-transform: scale(1);
  transition: 0.8s;
  -moz-transition: 0.8s;
  -ms-transition: 0.8s;
  -o-transition: 0.8s;
}
.ind_pd li:hover .pic img {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.ind_pd li .text {
  width: 100%;
  padding: 0 0 0 0px;
  font-family: 'Montserrat', '微軟正黑體', 'Microsoft JhengHei';
}
.ind_pd li .text h2 {
    width: 100%;
    font-size: var(--font-f09);
    color: #0c0c0c;
    font-weight: 600;
    padding: 0; margin: 0 0 0px 0;
}
.ind_pd li .text p {
    width: 100%;
    font-size: var(--font-f06);
    color: #3d3d3d;
    font-weight: normal;
    padding: 0; margin: 20px 0 50px 0;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.ind_pd li:hover .text h2 {
    color: var(--color-c01);
}
.ind_pd li:hover .btn-style02{
    color: var(--color-c01);
}
.ind_pd li:hover .btn-style02:after{
    transform: translate(10px, 0);
}
@media screen and (max-width: 950px) {
.ind_pd ul:after {
    content: "";
    width:100%;
}
.ind_pd li{ padding:20px 0px 20px 0px; width:100%; border-right: none;
  border-bottom: 1px solid #d8d8d8;
}
.ind_pd li .pic {
    width: 40%; 
}
.ind_pd li .text {
  width: calc(100% - 40%);
}
}
@media screen and (max-width: 700px) {
.ind_pd li .pic {
    width: 100%; text-align: center;
}
.ind_pd li .pic img{
    width: 80%;
}
.ind_pd li .text {
  width: 100%;
}
}

/* 快速連結 */
.ind_linkbox { width:100%; }
.ind_linkbox .image-grid:hover .btn-style03{
    background: #fff;
}
.ind_linkbox .image-grid:hover .btn-style03:after{
  content: ""; margin: 0px 0 0px 0px; 
  width: 14px; height: 8px; display: block;
    background: url(../images/right-arrow-blue.png) no-repeat center center;
    background-size: 100% auto;
}

.image-grid {
        width: 50%;
        margin: 0px;
        height: 190px;
        overflow: hidden;
        position: relative;
        float: left;
        display: block;
      }
.image-grid:before {
content: "";
top: 0;
left: 0;
position: absolute; z-index: 1;
width: 100%; height: 100%;
background: rgba(61,61,61,0.5);
}
.image-grid.blue:before {
content: "";
background: none;
}
      .image-grid .bg {
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
      }
   
      .image-grid:hover .bg,
      .image-grid:focus .bg {
        -ms-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
      }
.image-grid .text_box {
  width:100%; height: 100%; 
  position: absolute; top: 0; z-index: 2; left: 10%;

  display: flex;
    justify-content: center;
    align-items: center;
}
.image-grid.blue .text_box {
    justify-content: flex-start;
}
.image-grid .text_box .text_main{
  width:62%; display: flex;
    justify-content: center;
    align-items: center;
}
.image-grid .text_box .text_main .info_box {
  width:calc(100% - 27px); padding: 0 20px 0 0;
  display: flex;
    justify-content: flex-start;
    align-items: center;
}
.image-grid .text_box .text_main .info_box .icon{
  width:64px;
}
.image-grid .text_box .text_main .info_box .icon img{
  width:100%;
}
.image-grid .text_box .text_main .info_box .text{
  width:calc(100% - 64px); display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;  
    padding: 0 0px 0 25px;
}
.image-grid .text_box .text_main .info_box .text h2{
  width:100%; font-size: var(--font-f12); color: #fff; font-weight: 600;
  margin: 0px; padding: 0;
}
.image-grid .text_box .text_main .info_box .text p{
  width:100%; font-size: var(--font-f09); color: #fff; 
  margin: -6px 0px 0px 0px; padding: 0;
}
@media screen and (max-width: 1800px) {
.image-grid .text_box .text_main{
  width:65%; 
}
}
@media screen and (max-width: 1600px) {
.image-grid .text_box {
    justify-content: flex-start;
}
.image-grid .text_box .text_main{
  width:70%; 
}
}
@media screen and (max-width: 1400px) {
.image-grid .text_box .text_main{
  width:80%; 
}
.image-grid .text_box .text_main .info_box .icon{
  width:55px;
}
.image-grid .text_box .text_main .info_box .text{
  width:calc(100% - 55px);
}
}
@media screen and (max-width: 1000px) {
.image-grid {
        width: 100%; 
}
.image-grid .text_box {
  left: 5%;
}
.image-grid .text_box .text_main{
  width:90%; 
}
.image-grid .text_box .text_main .info_box .text p{
  margin: -3px 0px 0px 0px; 
}
}

/* -關於我們--------------------------------------------------------------------------------------------------*/
.about .user_editor{ margin:40px 0 0px 0px; }

.aboutbox{ margin:0px 0 0px 0px; width:100%; height:auto; overflow: hidden;
display: flex; justify-content: center;
  align-items: center;
}
.aboutbox .txt{
display: flex; justify-content: center; text-align: center;
  align-items: center;
  color: var(--color-c01); font-size:var(--font-f10); font-weight: 600; margin:0px 10px;
}
.aboutbox .t01:before {
  content: "“";
  color: var(--color-c01); font-size:var(--font-f21);
  font-family: 'Montserrat';
}
.aboutbox .t02:after{
  content: '”';
  color: var(--color-c01); font-size:var(--font-f21);
  font-family: 'Montserrat';
}
.aboutbox02{ margin:40px 0 0px 0px; width:100%; height:auto; overflow: hidden;

}
.aboutbox02 .aleft{ float:left; width:calc(100% - 50%); margin:0px 0px 0px 0px; }
.aboutbox02 .aleft .tt01 { padding: 0px; float:left; margin:10px 0 0px 0px;}
.aboutbox02 .aright{ float:right; width:50%; padding: 0 0 0 30px; height:auto; overflow: hidden;}
.aboutbox02 .aright img{ width:100%;}
@media screen and (max-width: 1280px) {
.aboutbox .txt{
font-size:var(--font-f08);
}
}
@media screen and (max-width: 1000px) {
.aboutbox02 .aleft{ width:100%; margin:0px 0px 20px 0px;}
.aboutbox02 .aright{ width:100%; padding: 0 0 0 0px;}
}

/* -最新消息--------------------------------------------------------------------------------------------------*/
.news { width:100%; }
.news ul{ margin:45px 0 0px 0px; padding: 0px 0px 0px 0px; width:100%; list-style:none;
display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid #d8d8d8;
}
.news li{ margin:0px 0px 0px 0px; padding:30px 0px 30px 0px; width:100%; list-style:none; transition: all 0.6s;
  border-bottom: 1px solid #d8d8d8;  position: relative;
}
.news li a{ display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap; }
.news li .date { 
    font-family: 'Montserrat';
    display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  width: 100px;
  font-weight: 600;
  letter-spacing: 1px;
}
.news li .date div{ 
    width: 100%; color: rgba(61,61,61,0.7); font-size: var(--font-f03);
}
.news li .date div:nth-child(2){ 
    width: 100%; color: #3d3d3d; font-size: var(--font-f21);
}
.news li .text {
    width: calc(100% - 100px);
    border-left: 1px solid #d8d8d8;
    display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 0 15px;
}
.news li .text h2 {
    width: 100%;
    font-size: var(--font-f07);
    color: #0c0c0c;
    font-weight: 600;
    padding: 0; margin: 0 0 0px 0;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.news li:hover .text h2 {
    color: var(--color-c01);
}
.news li .text p {
    width: 100%;
    font-size: var(--font-f06);
    color: #3d3d3d;
    font-weight: normal;
    padding: 18px 0 0 0; margin: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media screen and (max-width: 1280px) {
.news li .date { 
  width: 90px;
}
.news li .date div:nth-child(2){ 
    font-size: var(--font-f15);
}
.news li .text {
    width: calc(100% - 90px);
}
}

.news02 { }
.news02 .bread-crumbs {
  border-top: none;
}
.news02 .bread-crumbs li {
  color: rgba(0, 0, 0, 0.7);
}

.news02 .bread-crumbs li a {
  color: rgba(0, 20, 0, 0.7);
}
.news03 .info{ margin:0px 0px 0px 0px; padding:20px 0px 20px 0px; width:100%; border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.news03 .date { 
    font-family: 'Montserrat';
  width: 100%;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: var(--font-f03);
  color: rgba(61,61,61,0.7); 

  display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}
.news03 .date div{ 
}
.news03 .date div:nth-child(2){ 
}
.news03 .date div:nth-child(2):before {
content: ".";
}
.news03 .text {
    width: 100%;
}
.news03 .text h2 {
    width: 100%;
    font-size: var(--font-f17);
    color: #0c0c0c;
    font-weight: 600;
    padding: 0; margin: 0 0 0px 0;
}
.news03 .user_editor {
    margin: 40px 0 0px 0;
}
@media (max-width: 1280px) {
.news03 .text h2 {
  font-size:var(--font-f15); 
}
}

/* -產品介紹--------------------------------------------------------------------------------------------------*/
.pd02 { width:100%; margin: 0px; height:auto; overflow: hidden;
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 72%,#f1f1f1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.pd02 .box-1{ display: flex;
  justify-content: space-between;
  align-items: center;
}
.pd02 .right_img{
  width:60%;
  margin:0px 0px 0px 0px; padding:0; list-style:none;

display: flex;
  justify-content: space-between;
  align-items: center;

  height:auto; overflow: hidden; order: 2;
  }
.pd02 .txtbox{ width:calc(100% - 60%); padding:0px 30px 0 0; order: 1;}
.pd02 .txtbox .title04 { margin:0px 0 30px 0; }
.pd02 .txtbox .title04 h2{ font-size: var(--font-f16); font-weight: 600; 
    font-family: 'Montserrat', '微軟正黑體', 'Microsoft JhengHei';
}
.pd02 .txtbox .title04:after {
    content: '';
    width: 65px;
    height: 5px;
    background-color: var(--color-c01);
}
.pd02 .txtbox .nonumlist { margin: 0px 0px 0px 0px; padding: 0; font-size: var(--font-s01);}
.pd02 .txtbox .nonumlist li{ line-height: 1.5; }
.pd02 .txtbox .nonumlist li:before {
  top: 10px;
  left: 5px;
}
@media (max-width: 1280px) {
.pd02 .txtbox .title04 h2 {
  font-size:var(--font-f14); 
}
}
@media screen and (max-width: 850px) {
.pd02 .box-1{ flex-wrap: wrap;}
.pd02 .right_img{ width:100%; order: 1;}
.pd02 .txtbox{ width:100%; padding:30px 0px 0 0; order: 2;}
}

.pd03 {}
.pd03 .title04, .pd04 .title04 { margin:0px 0 30px 0; }
.pd03 .title04 h2, .pd04 .title04 h2{ font-size: var(--font-f12); font-weight: 600; 
    font-family: 'Montserrat', '微軟正黑體', 'Microsoft JhengHei';
}
.pd03 .title04:after, .pd04 .title04:after {
    content: '';
    width: 65px;
    height: 5px;
    background-color: var(--color-c01);
}

.pd04 .video{ margin:0px 0 0px 0px; padding: 0px 0px 0px 0px; width:100%; 
display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pd04 .video:after {
    content: "";
    width:calc(100% / 3 - 20px);
}
.pd04 .video iframe{
  width:calc(100% / 3 - 20px); 
  }
@media screen and (max-width: 800px) {
.pd04 .video:after {
    content: "";
    width:100%;
}
.pd04 .video iframe{
  width:100%; margin:0px 0 20px 0px;
  }
}

/* -產品照片-*/
.product-slick {
  width:calc(100% - 150px); margin:0px 30px 0px 0px; padding:0px 0px 0px 0px; list-style:none; 
  }
.product-slick li{
  width:100%; margin:0px 0px 0px 0px; padding:0; list-style:none;
  }
.product-slick li img{
  width:100%;
  }
.product-nav {
  width: 120px;
  margin:0px; padding:0; list-style:none;
  height:auto; overflow: hidden;
}
@media screen and (max-width: 600px) {
.product-slick {
  width:calc(100% - 120px); margin:0px 20px 0px 0px; 
  }
.product-nav {
  width: 100px;
}
}

.product-nav li {
  width:100%;
  margin:3px 0px; padding:0 0px;
  cursor: pointer;
}
.product-nav li img{
  width:100%; border: 1px solid rgba(0, 0, 0, 0.1);
  }
.product-nav .slick-prev:before, .product-nav .slick-next:before { font-size: 22px;}
.product-nav .slick-prev:before{ content: "\f053" ; font-family: 'Font Awesome 5 Free';
  font-weight: 900; color: #b2b2b2;
}
.product-nav .slick-next:before{ content: "\f054" ; font-family: 'Font Awesome 5 Free';
  font-weight: 900; color: #b2b2b2;
}
.product-nav .slick-prev{ top: 50%; left:0px; z-index: 9; 
display: flex; justify-content: center;
  align-items: center;
}
.product-nav .slick-next{ top: 50%; right:0px; z-index: 9; 
display: flex; justify-content: center;
  align-items: center;
}
.product-nav .slick-prev:hover,
.product-nav .slick-prev:focus,
.product-nav .slick-next:hover,
.product-nav .slick-next:focus
{
    color: #d51f27;
}
.product-nav .slick-prev:hover:before, .product-nav .slick-next:hover:before,
.product-nav .slick-prev:focus:before, .product-nav .slick-next:focus:before 
{ color: #b2b2b2; opacity: 1;}

/* -聯絡我們--------------------------------------------------------------------------------------------------*/
.contact {
    margin: 0px 0px 0px 0px; padding:0px 0 0px 0; display: flex; justify-content: space-between; align-items: stretch;
}
.contact .left{
    margin: 0px 0px 0px 0px; padding:3% 6%; width: 45%; 
    background: #028dc7 url(../images/demo/contact_bg.jpg) no-repeat center center;
    display: flex; 
    justify-content: center;
    align-items: center;
}
.contact .left ul{
    width: 80%;
    margin: 0px 0px 0px 0px; padding:0; list-style: none;
}
.contact .left li{
    margin: 30px 0px; padding:0px 0px 30px 0; list-style: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.contact .left li:last-child { border-bottom: none;}
.contact .left li h3{
    margin: 0px 0px 6px 0px; padding:0; list-style: none; color: #ffc832;
    font-size:var(--font-f08);
}
.contact .left li p{
    margin: 0px 0px 6px 0px; padding:0; list-style: none; color: #fff;
    display: flex; 
    justify-content: flex-start;
    align-items: center;
    font-size:var(--font-f05);
}
.contact .left li p a{
    color: #fff;
    display: flex; 
    justify-content: flex-start;
    align-items: center;
}
.contact .left li p a:hover{
    color: #ffc832;
}
.contact .left li i {
    color: #666;
    font-size: 14px;
    margin: 0px 10px 0px 0px;
    width: 25px;
    height: 25px;
    background: none;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}
.contact .right{
    margin: 0px 0px 0px 0px; padding:3% 6% 3% 6%; width: 55%;
}
.contact .right .btn-box .btn-style01, .contact .right .btn-box .btn-style04{
    margin: 0px 5px; 
}
@media screen and (max-width: 1366px) {
.contact .left ul{
    width: 100%;
}
}
@media screen and (max-width: 1000px) {
.contact {
    flex-wrap: wrap;
}
.contact .left{
    width: 100%; padding:0 5%;
}
.contact .left li:last-child { border-bottom: none; margin: 30px 0px 0px 0px;}
.contact .right{
    width: 100%; padding:40px 5%;
}
}

/* -隱私權條款------------------------------------------------------------------------------------------------*/
.privacy {  width:100%; margin: 0px auto 0px auto; padding:0px 0 0px 0; } 
.privacy .txtbox { width:100%; margin: 10px auto 30px auto; padding:0px 0 0px 0; color: #666; } 


/* -button---------------------------------------------------------------------------------------------------*/
.btn-box{ padding: 0; margin: 40px 0 0px 0; 
display: flex; 
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.product-back-box{ margin-top: 50px; margin-bottom: 50px; }

.btn-style01{
  margin: 0px 0px; 
    padding: 10px 20px 10px 20px;
    text-align: center;
    color: var(--color-c01);
    font-size: var(--font-f06);
    font-weight: 600;
    background: #fff;
    -webkit-transition: all .2s;
    transition: all .2s;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration:none !important;
    border: 2px solid var(--color-c01);

    -webkit-border-radius: 25px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 25px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 25px;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
}
.btn-style01:after{
  content: ""; margin: 0px 0 0px 10px; 
  width: 24px; height: 13px; display: block;
 background: url(../images/right-arrow-blue.png) no-repeat center center;
    background-size: 100% auto;
}
.btn-style01:hover{
    background: var(--color-c01);
    color: #fff;
    border: 2px solid #fff;
}
.btn-style01:hover:after{
 background: url(../images/right-arrow-white.png) no-repeat center center;
}
.btn-style01 a{
    color: var(--color-c01);
}
.btn-style01 a:hover{
    color: #fff;
}

.btn-style02{
  margin: 0px 0px; 
    padding: 0px;
    color: #0c0c0c;
    font-size: var(--font-f06);
    font-weight: 600;
    background:none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    text-decoration:none !important;
    border: none;
}
.btn-style02:after{
  content: ""; margin: 0px 0 0px 10px; 
  width: 24px; height: 13px; display: block;
 background: url(../images/right-arrow-blue.png) no-repeat center center;
    background-size: 100% auto;

    -webkit-transition: all .75s;
    -o-transition: all .75s;
    -moz-transition: all .75s;
    transition: all .75s
}
.btn-style02:hover{
    color: var(--color-c01);
}
.btn-style02:hover:after{
 transform: translate(10px, 0);
}

.btn-style03{
  margin: 0px 0px; 
    padding: 0px;
    background:#0c0c0c;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration:none !important;
    border: none;
    width: 27px;
    height: 27px;
    border-radius: 100%;
}
.btn-style03:after{
  content: ""; margin: 0px 0 0px 0px; 
  width: 14px; height: 8px; display: block;
 background: url(../images/right-arrow-white.png) no-repeat center center;
    background-size: 100% auto;

    -webkit-transition: all .75s;
    -o-transition: all .75s;
    -moz-transition: all .75s;
    transition: all .75s
}
.btn-style03:hover{
    background: #fff;
}
.btn-style03:hover:after{
  content: ""; margin: 0px 0 0px 0px; 
  width: 14px; height: 8px; display: block;
    background: url(../images/right-arrow-blue.png) no-repeat center center;
    background-size: 100% auto;
}

.btn-style04{
  margin: 0px 0px; 
    padding: 10px 20px 10px 20px;
    text-align: center;
    color: #fff;
    font-size: var(--font-f06);
    font-weight: 600;
    background: var(--color-c01);
    -webkit-transition: all .2s;
    transition: all .2s;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration:none !important;
    border: 2px solid var(--color-c01);

    -webkit-border-radius: 25px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 25px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 25px;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
}
.btn-style04:after{
  content: ""; margin: 0px 0 0px 10px; 
  width: 24px; height: 13px; display: block;
 background: url(../images/right-arrow-white.png) no-repeat center center;
    background-size: 100% auto;
}
.btn-style04:hover{
    background: #ffc832;
    color: #fff;
    border: 2px solid #ffc832;
}
.btn-style04 a{
    color: var(--color-c01);
}
.btn-style04 a:hover{
    color: #ffc832;
}

@media screen and (max-width: 1000px) {
.btn-box{ margin: 30px 0 0px 0;}
}

/*頁碼*/
div.page {
  font-family: 'Helvetica';
  font-size: 15px; 
  padding: 0px;
  margin:50px 0px 0px 0px; text-align:center;
  width:100%; height:auto; overflow: hidden;

  display: flex;
    justify-content: center;
    align-items: center;
}
div.page a {
  padding: 0; margin: 5px; color: #888; background: #FFF; text-decoration: none; border-radius: 5px; 
  width: 30px; height: 30px; border: 1px solid #ddd;
  display: flex;
    justify-content: center;
    align-items: center;
}
div.page a:hover {
  color: #fff; background:var(--color-c01); border: 1px solid var(--color-c01);
}
div.page a.current {
  color: #fff; background:var(--color-c01); border: 1px solid var(--color-c01);
}