@charset "utf-8";
/* CSS Document */
body {
  --font-f01: 0.7857rem;
  --font-f00: 0.875rem;
  --font-s00: 0.9375rem;
  --font-s01: 1rem;
  --font-s02: 1.0625rem;
  --font-s03: 1.125rem;
  --font-s04: 1.25rem;
  --font-s05: 1.3125rem;
  --font-s06: 1.375rem;
  --font-s07: 1.5rem;
  --font-s08: 1.625rem;
  --font-s09: 1.75rem;
  --font-s10: 1.875rem;
  --font-s11: 2rem;
  --font-s12: 2.125rem;
  --font-s13: 2.25rem;
  --font-s14: 2.375rem;
  --font-s15: 2.5rem;
  --font-s16: 2.625rem;
  --font-s17: 2.75rem;
  --font-s18: 2.875rem;
  --font-s19: 3rem;
  --font-s20: 3.125rem;
  --font-s21: 3.25rem;
  --font-s22: 3.375rem;
  --font-s23: 3.5rem;
  --font-s24: 3.625rem;
  --font-s25: 3.75rem;
  --font-s26: 3.875rem;
  --font-s27: 4rem;

  --color-c01: #50738a;
  --color-c02: #799eb6;
  --color-c03: #0a84af;
  --color-c04: #354049;
  --color-c05: #657784;
  --color-c06: #cf0037;
  --color-c07: #4f5e68;

  --border-radius01: 8px;

  --fontstyle01: 'Bahnschrift SemiCondensed';
}
@media screen and (max-width: 1280px) {
body {
}
}
@media screen and (max-width: 1000px) {
body {
  --border-radius01: 4px;
}
}
@media screen and (max-width: 768px) {
body {
  --fontstyle01: -apple-system, BlinkMacSystemFont, sans-serif;
}
}

.pageHeader{ width: 100%; margin:0 auto 0 auto; padding:0px 0 0px 0; position: relative; }
.pageHeader .box-1{ display: flex; flex-wrap: wrap; }
.pageHeader .logobox{ width: 100%; display: flex;  justify-content: center; align-items: center; padding:0 0px 0 0; margin:0 0px 0 0; position: relative; border-bottom:1px solid rgba(0,0,0,0.1); min-height: 95px;}
.ind_color_style .pageHeader .logobox{ border-bottom:1px solid rgba(255,255,255,0.5); }
.pageHeader .logobox h1{ width: 135px; padding:0 0px 0 0; margin:0 0px 0 0;  }
.pageHeader .logobox h1 img{ width: 100%; }

.pageHeader .logobox .more {
  font-size:var(--font-s00); color: #002b49; font-weight: normal; letter-spacing: 1px;
  display: flex;  justify-content: flex-start; align-items: center;
  padding: 0; margin: 0;
  cursor: pointer;
  position:absolute; left:0px; top: 40px;
}
.pageHeader .logobox .more .ham {
  width: 24px; margin: 0 12px 0 0px;
  height: 15px; position: relative;

  background: url(../images/ham.svg) no-repeat;
  display: block;
  background-size: 100% auto;
}
.pageHeader .logobox .more .ham span {
  top: 0;
  right: 0;
  display: none;
  width: 24px;
  height: 1px;
  background-color: #002b49;
  transition: 0.3s;
  position: absolute;
}
.pageHeader .logobox .more .MENU{
  letter-spacing: 2px;
}
.pageHeader .logobox .more .ham span:nth-child(2) {
  top: calc(50%);
  left: 0%;
}
.pageHeader .logobox .more .ham span:nth-child(3) {
  bottom: 0; top: auto;
  right: 0%;
}
.ind_color_style .pageHeader .logobox .more {
  color: #fff; 
}
.ind_color_style .pageHeader .logobox .more .ham {
  background: url(../images/ham_white.svg) no-repeat;
}
.ind_color_style .pageHeader .logobox .more .ham span {
  background-color: #fff;
}

.pageHeader .logobox .dropdown{ margin:0px 0px 0 0; font-size:var(--font-s00); letter-spacing: 2px; color: #002b49; position:absolute; right:0px; top: 28px;}
.ind_color_style .pageHeader .logobox .dropdown{ color: #fff; }
.pageHeader .logobox .dropdown .dropbtn{
  display: flex; justify-content: flex-start; align-items: center; line-height: 60px;
}
.pageHeader .logobox .dropdown .dropbtn span{ margin:0 0 0 13px;}
.pageHeader .logobox .dropdown .dropbtn:before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../images/logo.svg) no-repeat;
  display: block;
  background-size: 100% auto;
}
.pageHeader .logobox .dropdown .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.pageHeader .logobox .dropdown .dropdown-content a {
  color: var(--color-c05);
  font-size:var(--font-s00);
  padding: 10px 15px;
  text-decoration: none;
  display: block;
}

.pageHeader .logobox .dropdown .dropdown-content a:hover {background-color: #ddd;}
.pageHeader .logobox .dropdown:hover .dropdown-content {display: block;}

.header_offcanvas_bg{ backdrop-filter: blur(20px) saturate(1.8);
    background: rgba(0, 0, 0, .3) !important;
    top: 0;
    left: 0;
    width: 25%;
    transform: translateX(-100%);
 }

.header_offcanvas_close{ border: none; outline: none; margin:0px 0 20px 0; cursor: pointer;}

.pageHeader .menubox{ width: 100%; padding: 0px 0 0 0px; margin: 25px 0px 0px 0;
}
.pageHeader .menubox > nav{ width: auto; padding: 0px 0 0 0px; margin: 0px 0px 0px 0;
float: right;
}
@media screen and (max-width: 1365px) {
.header_offcanvas_bg{ 
    width: 35%;
 }
}
@media screen and (max-width: 1280px) {
.pageHeader .logobox{ min-height: 100px;}
.pageHeader .logobox h1{ width: 120px; }
.pageHeader .logobox .more {
  top: 49px;
}
.pageHeader .logobox .dropdown {
  top: 23px;
}
}
@media screen and (max-width: 1024px) {
.header_offcanvas_bg{ 
    width: 45%;
}

.pageHeader .menubox{ margin: 15px 0px 0px 0;
}
.pageHeader .logobox .dropdown {
  display: none;
}

.pageHeader .logobox{ min-height: 75px;}
.pageHeader .logobox h1{ width: 105px; }
.pageHeader .logobox .more {
  top: 33px;
}
.pageHeader .logobox .more .MENU{
  display: none;
}
.pageHeader .logobox .more .ham {
  width: 11px; background: none;
}
.ind_color_style .pageHeader .logobox .more .ham {
  background: none;
}
.pageHeader .logobox .more .ham span {
  display: block;
  width: 11px; top: 3px;
}
.pageHeader .logobox .more .ham span:nth-child(2) {
  top: 13px;
}
.pageHeader .logobox .more .ham span:nth-child(3) {
  display: none;
}
}
@media screen and (max-width: 900px) {
.header_offcanvas_bg{ 
    width: 75%;
 }
}


/* -header scroll-*/
.ovhe{-webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
header.ovhe {
    box-shadow: 0px 0px 15px rgb(0 0 0 / 10%); background: rgba(204, 204, 204, 0.7);
}
header.ovhe .pageHeader .box-1{ position: relative; }
header.ovhe .pageHeader .logobox h1{ width: 120px; }
header.ovhe .dropdown{
    display: none;
}
header.ovhe .bread-crumbs{
    display: none;
}
header.ovhe .pageHeader .logobox{ border-bottom:none; min-height: auto;  }
header.ovhe .pageHeader .menubox > nav{ position: absolute; right: 0; top: -32px;
}
header.ovhe .pageHeader .logobox .more {
    top: 25px;
}
@media screen and (max-width: 1024px) {
header.ovhe .pageHeader .logobox{ min-height: 50px;  }
header.ovhe .pageHeader .logobox h1{ width: 90px; }
header.ovhe .pageHeader .menubox{ margin: 10px 0px 0px 0;}

header .pageHeader .menubox > nav{ display:none;}
.pageHeader .logobox .dropdown { top: 33px; }
.pageHeader .logobox .dropdown .dropbtn span{ display:none;}
header.ovhe .pageHeader .logobox .more {
    top: 20px;
}
}

.sidebar-nav .metismenu > li.mo_lan {
    display: flex;
   justify-content: flex-start;
   align-items: center;
   color: #fff;
}
.sidebar-nav .metismenu > li.mo_lan a{
   font-size: var(--font-s01);
}
.sidebar-nav .metismenu > li.mo_lan a:hover{
   text-decoration:underline;
}
.sidebar-nav .metismenu > li.mo_lan span{
   margin:0px 10px; 
}
.sidebar-nav .metismenu > li.mo_lan:before {
    content: "";
    width: 22px;
    height: 22px;
    background: url(../images/logo.svg) no-repeat;
    display: block;
    background-size: 100% auto;
    margin:0px 10px 0px 0px; 
}

/* 定義區塊 */
.box-1{ max-width:1460px; width: 90%; margin:0px auto; padding:0px 0;}
.box-2{ max-width:1340px; width: 90%; margin:0px auto; padding:0px 0;}
.box-3{ max-width:1130px; width: 90%; margin:0px auto; padding:0px 0;}
.box-4{ max-width:1260px; width: 90%; margin:0px auto; padding:0px 0;}
.box-5{ max-width:1390px; width: 90%; margin:0px auto; padding:0px 0;}
.box-6{ max-width:1150px; width: 90%; margin:0px auto; padding:0px 0;}
.box-7{ max-width:1570px; width: 95%; margin:0px auto; padding:0px 0;}
.box-8{ max-width:1460px; width: 100%; margin:0px auto; padding:0px 0;}
@media screen and (max-width: 1470px) {
.box-8 .join .pic img {
    border-radius: 0px;
}
}
@media screen and (max-width: 768px) {
.box-8 .join .pic img {
    width: 100%;
    height:  29vh;
    -o-object-fit: cover;
    object-fit: cover;
}
}

.index00{ width: 100%; margin:0px auto; padding:0px 0;}
.index00 img{ width: 100%; }

.main_top {
    height: auto;
    overflow: hidden;
    padding: 230px 0px 0px 0px;
}
@media screen and (max-width: 900px) {
.main_top {
    padding: 180px 0px 0px 0px;
}
}

.main_content{ 
display: flex;
  flex-wrap: wrap;
}
.main_content00{ padding:8% 0px 0 0px; 
display: flex;
  flex-wrap: wrap;
}
.main_content01{ padding:0 0px 8% 0px; 
display: flex;
  flex-wrap: wrap;
}
.main_content02{ padding:4% 0px 8% 0px; 
display: flex;
  flex-wrap: wrap;
}
.main_content03{ padding:8% 0px 13% 0px; 
display: flex;
  flex-wrap: wrap;
}
.main_content04{ margin: 0 auto -80px auto;
display: flex;
  flex-wrap: wrap;
}
.main_content05{ padding:1% 0px 0 0px; 
display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 600px) {
.main_content00{ padding:15% 0px 0 0px; 
}
.main_content01{ padding:0 0px 15% 0px; 
}
.main_content03{ padding:15% 0px 13% 0px; 
}
.main_content05{ padding:0 0px 0 0px; 
}
}

.modal-content {
    border: none !important;
    border-radius: 0px !important;
}

.bg-style01 { background: #f5f6f7;}
.bg-style02 { background: url(../images/bg03.jpg) repeat; }
.bg-style03 { background: url(../images/bg06.jpg) repeat; }
.bg-style04 { background: #444;}
.bg-style05 { background: url(../images/bg07.jpg) no-repeat; }
.bg-style06{ background: url(../images/about_history_bg.jpg) no-repeat; background-attachment: fixed; position:relative; }
.bg-style06:before{ content: "";  backdrop-filter: blur(10px) saturate(1.8); position: absolute;
    background: rgba(0, 0, 0, .2) ;
    top: 0;
    left: 0;
    width: 100%; height:100%; z-index: 1;
 }
@media screen and (max-width: 768px) {
.bg-style03 { background-size: cover;}
}

.space001{ padding:15% 0 0px 0 ;}

.title01 {
  width: 100%;
}
.title01 h2 {
  font-size:var(--font-s06); margin:0; padding:0; font-weight: 600; color: var(--color-c04);
  letter-spacing: 3px;
}
.title02 {
  width: 100%;
}
.title02 h2 {
  font-size:var(--font-s20); margin:0; padding:0; font-weight: bold; color: #444;
  font-family: var(--fontstyle01);
  letter-spacing: 9px;
}
.title02 table{
 text-align: justify; /* 两端对齐 */
    text-align-last: justify; /* 最后一行两端对齐 */
    text-justify: distribute-all-lines; /* 兼容IE */
    display: block;
}
.title03 {
  width: 100%;
}
.title03 h2 {
  font-size:90px; padding:0; font-weight: 400; color: rgba(255,255,255,0.8);
  font-family: var(--fontstyle01);
  display: flex; justify-content: flex-start; align-items: center;
  letter-spacing: 5px;
}
.title03 h2:before{
  content: ""; 
  width: 8px; height: 92px; display: block; margin:0 50px 0 0;
  background: rgba(255,255,255,0.8);
}
.title03 table{
 text-align: justify; /* 两端对齐 */
    text-align-last: justify; /* 最后一行两端对齐 */
    text-justify: distribute-all-lines; /* 兼容IE */
    display: block;
}
.title04 {
  width: 100%;
}
.title04 h2 {
  font-size:var(--font-s20); padding:0; font-weight: 600; color: #fff;
  font-family: var(--fontstyle01);
  font-weight: bold;
  letter-spacing: 4px;
}
.title04 h3 {
  font-size:var(--font-s10); padding:0; font-weight: 600; color: rgba(255,255,255,0.8);
  font-weight: 500;
}
.title04 table{
 text-align: justify; /* 两端对齐 */
    text-align-last: justify; /* 最后一行两端对齐 */
    text-justify: distribute-all-lines; /* 兼容IE */
    display: block;
}
.title05 {
  width: 100%; position: relative;
  display: flex;
    justify-content: flex-start;
}
.title05:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-block;
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.1);
  z-index: 1;
}
.title05.long:after {
  content: '';
  width: calc(100% - 420px);
}
.title05 h2 {
  font-size:var(--font-s04); color: var(--color-c04);
  font-weight: normal;
  padding: 0 64px 0 0px; 
  background: #fff;
  z-index: 2;
}
.title05 h2.bg01 { background: #f5f6f7;}
.title06 {
  width: 100%; 
}
.title06  h2 {
  font-size:var(--font-s11); color: var(--color-c04);
  font-weight: 600; letter-spacing: 3px;
}
.title07 {
  width: 100%; 
}
.title07  h2 {
  font-size:var(--font-s03); color: var(--color-c04);
  font-weight: 600;
}
.title08 {
  width: 100%;
}
.title08 h2 {
  font-size:var(--font-s20); margin:0; padding:0; font-weight: 100; color: var(--color-c04);
  font-family: var(--fontstyle01); letter-spacing: 4px;
}
.title09 {
  width: 100%;
}
.title09 h2 {
  font-size:var(--font-s10); margin:0; padding:0; font-weight: 100; color: var(--color-c04);
  font-family: var(--fontstyle01); letter-spacing: 4px;
}
.title10 {
  width: 100%; display: flex; justify-content: space-between; align-items: center; border-left:1px solid rgba(0,0,0,0.1) ;
}
.title10 h2 {
  font-size:var(--font-s04); margin:0; padding:0 0 0 15px; font-weight: 400; color: var(--color-c04);
}
.title11 {
  width: 100%; display: flex; justify-content: center; align-items: center; margin:0 0 50px 0;
}
.title11 h2 {
  font-size:var(--font-s14); color: #50771c;
  font-weight: 600; letter-spacing: 3px;
}
.title11 h2.color02 {
  color: #85490e;
}
.title11 h2.color03 {
  color: var(--color-c03);
}
.word_nowrap { 
white-space:nowrap;
}
@media screen and (max-width: 1050px) {
.title02 h2 {
  font-size:var(--font-s12); 
}
.title03 h2 {
  font-size:70px;
}
.title03 h2:before{
  display: none;
}
.title04 h2 {
  font-size:var(--font-s12); letter-spacing: 9px;
}
.title04 h3 {
  font-size: var(--font-s05); 
}
.title06 h2 {
  font-size: var(--font-s07); letter-spacing: 2px;
}
.title10 h2 {
  font-size: var(--font-s03);
}
.title11 h2 {
  font-size:var(--font-s12);
}
}
@media screen and (max-width: 700px) {
.title05 h2 {
  padding: 0 30px 0 0px; 
}
}

.user_editor{ width:100%; height:auto; overflow: hidden; position: static !important;}
.user_editor img{ max-width:100% !important; height:auto !important;  }
.user_editor table{ width:100% !important;  }

.numlist { margin: 0px 0px 0px 0px; padding: 0; line-height:2;}

.nonumlist { margin: 0px 0px 0px 0px; padding: 0; line-height:2;}
.nonumlist > li{  margin: 0px 0px 0px 0px; padding: 0 0 0 20px; list-style:none; position: relative; color: var(--color-c05);
display: flex;
    justify-content: flex-start;
    align-items: center;
}
.nonumlist > li:before{ content: ""; position: absolute;
  display: block;
  width: 5px;
  height: 5px; border-radius: 100%;
  background: var(--color-c05);
  top: calc(50% - 2px); left: 5px;
}

.line_txt_box{ width:100%; margin: 30px 0 0 0; padding:0 0 0 0px; position: relative; }
.line_txt_box .txt{ width:100%; margin: 0px 0 0 0; padding:20px 0 20px 33px; color: var(--color-c05); }
.line_txt_box:before {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  height: 100%;
  background: rgba(0,0,0,0.1);
}
@media screen and (max-width: 700px) {
.line_txt_box .txt{ padding:0px 0 0px 5%; }
}

/* mobile menu */
.menu-btn {
  display: none;
  position: absolute;
  width: 24px; margin: 0 0 0 0px;
  height: 24px;
  transition: 0.5s;
  top: 28px;
  right:3.5%;
}
@media screen and (max-width: 1200px) {
.menu-btn {
    display: block;
  }
}
.menu-btn span {
  position: absolute;
  top: 50%;
  right: 0%;
  display: block;
  width: 24px;
  height: 1px;
  background-color: #fff;
  transition: 0.3s;
}
.menu-btn span:nth-child(1) {
  top: calc(50% - 7px);
}
.menu-btn span:nth-child(3) {
  top: calc(50% + 7px);
}
.menu-btn.active span:nth-child(1) {
  top: 50%;
  transform: translate(0%, 50%) rotate(45deg);
  background-color: #fff;
}
.menu-btn.active span:nth-child(2) {
  width: 0;
}
.menu-btn.active span:nth-child(3) {
  top: 50%;
  transform: translate(0%, 50%) rotate(-45deg);
  background-color: #fff;
}

/* menu style */
section.menu {
  display: none;
  position: fixed;
  z-index: 98;
  top: 71px;
  left: 0;
  width: 100%;
  height: calc(100% - 71px);
  background-color: rgba(0, 80, 191, 0.95);
  transform: translateX(100%);
  opacity: 0;
  transition: 0.5s;
  overflow-y: auto;
}
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: #ffffff;
  margin: 0; padding: 0;
  list-style: none;
}
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: #ffffff;
  transition: 0.5s;
}
ul.main-list > li > a:hover {
  color: #f27f88;
}

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: 16px;
  color: rgba(255, 255, 255, 0.8);
  transition: 0.5s;
}
ul.sub-list > li > a:hover {
  color: #f27f88;
}

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: #ceb07c;
}

/* 麵包屑 */
.bread-crumbs {
  width: auto;
  margin: 8px 0px 0px 0px;
  float: left;
}
.bread-crumbs.mobile{
  display: none;
}
.bread-crumbs ul {
  padding: 0; margin: 0; list-style:none;
  display: flex;
    justify-content: flex-start;
    align-items: center;
}

.bread-crumbs li {
  font-size:var(--font-s00);
  letter-spacing: 2px;
  color: #002b49;

  display: flex;
    justify-content: flex-start;
    align-items: center;
}

.bread-crumbs li a {
  color: #002b49;
}

.bread-crumbs li a:hover {
  color: rgba(0, 0, 0, 0.7);
}
.bread-crumbs li:after {
    display: block;
    content: '';
    margin: 0px 10px 0 10px;
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.2);
}
.bread-crumbs li:last-child:after {
  display: none;
}
@media screen and (max-width: 900px) {
.bread-crumbs.mobile{
  display: block;
}
}

/* page-banner */
/* banner */
.index-banner {
    width: 100%;
    position: relative;
}
.index-banner-mouse {
    position: absolute;
    left: calc(50% - 23px);
    z-index: 11;
    bottom: 7%;
}
.index-banner-mouse .mouse {
display: block;
width: 46px;
  height: 40px;
  background-size: 100% auto;
   animation: arrowMove 1.6s infinite;
}
.index-banner-mouse .mouse:hover {
animation: arrowMove02 1.6s infinite;
}
.index-banner-mouse .mouse:before:hover {
  content: "";
  width: 46px;
  height: 40px;
  background: url(../images/banner_arrow.png) no-repeat;
  display: block;
  background-size: 100% auto;
  opacity: 1;
}
.index-banner-mouse .mouse:before {
  content: "";
  width: 46px;
  height: 40px;
  background: url(../images/banner_arrow.png) no-repeat;
  display: block;
  background-size: 100% auto;
}
@media screen and (max-width: 900px) {
.index-banner-mouse {
    left: calc(50% - 11px);
}
.index-banner-mouse .mouse {
  width: 22px;
  height: 24px;
}
.index-banner-mouse .mouse:before:hover {
  content: "";
  width: 22px;
  height: 24px;
  background: url(../images/banner_arrow02.png) no-repeat;
  background-size: 100% auto;
}
.index-banner-mouse .mouse:before {
  content: "";
  width: 22px;
  height: 24px;
  background: url(../images/banner_arrow02.png) no-repeat;
  background-size: 100% auto;
}
}

@keyframes arrowMove {
   to {
     transform: rotate(0) translateY(20px) translateX(0px);
     opacity: 0;

  }
}
@keyframes arrowMove02 {
   to {
     transform: rotate(0) translateY(0px) translateX(0px);
     opacity: 1;

  }
}

.img-fill{
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}
/* ==== Slider Style === */
.Modern-Slider {
  width: 100%;
  margin: 0 0 0 0; padding: 0;
}
.Modern-Slider .for_PC {
  width: 100%;
  height: 100vh;
  margin: 0 0 0 0; padding: 0;
  background-size: cover;
  background-position: left; 
}

.Modern-Slider .for_mobile {
  width: 100%;display: none;
}

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

.Modern-Slider .item .img-fill{
}
.Modern-Slider .item .img-fill .slide_img {
  width: 100%;
  height: 100vh;
  margin: 0 0 0 0; padding: 0;
  background-size: cover;
  background-position: center; 
}
.Modern-Slider .item .img-fill .slide_img.for_PC {
}
.Modern-Slider .item .img-fill .slide_img.for_mobile {
  display: none;
}

.Modern-Slider .item .img-fill .info{
  position:absolute;
  width:100%;
  height:100%;

  top:0px;
  left:0px;

  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.Modern-Slider .item .img-fill img{
}
.Modern-Slider .item .img-fill .info .box-1{
  flex-wrap: wrap; 
  height:75%;
}
.Modern-Slider .item .img-fill .info .box-1.style01{
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 2%;
}
.Modern-Slider .item .img-fill .info .box-1.style02{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 2%;
}
.Modern-Slider .item .img-fill .info .box-1.style03{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 2%;
}
.Modern-Slider .item .img-fill .info .box-1.style04{
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 15%;
}
.Modern-Slider .item .img-fill .info .box-1.style05{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 15%;
}
.Modern-Slider .item .img-fill .info .box-1.style06{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 15%;
}

.Modern-Slider .item .img-fill .info .box-1 .txtbox{
  width: 23%;
  backdrop-filter: blur(12px) saturate(1);
  background: rgba(255, 255, 255, 0.3) ;
  padding: 45px 40px;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;

  animation:fadeIn 1s both 0.5s;
}
.Modern-Slider .item .t01{
  margin:0 0 20px 0;
  padding:0;
  font-size:var(--font-s10);
  letter-spacing: 2px;
  color:#002b49;
  width: 100%;
  font-weight: 600;
  font-family: var(--fontstyle01);
  line-height: 1.2;
  text-shadow: 3px 3px 15px rgba(255, 255, 255, 0.8);
}
.Modern-Slider .item .t02{
  font-size:var(--font-s01);
  letter-spacing: 1px;
  color:#444;
  margin:0 0 0px 0;
  padding:0;
  width: 100%;
  font-weight: normal;
  font-family: 'Arial';
}

.Modern-Slider .slick-dots {
   position: absolute;
   top: 55%;
   transform: translateY(-50%);
   left: 3.5%;
   width: 2px;
}
.Modern-Slider .slick-dots li {
   list-style: none;
   margin: 0px 0px 15px 0px;
   display: block;
   width: 2px;
   height: 52px;
}
.Modern-Slider .slick-dots button {
   width: 2px;
   height: 52px;
   border: none;
   background: rgba(255,255,255,0.4);
   text-indent: -9999px;
   outline: 0;
   padding: 0;
}
.Modern-Slider .slick-dots button:hover {
   background-color: #fff;
}
.Modern-Slider .slick-dots li.slick-active button {
  background: rgba(255,255,255,0.8);
}

@media screen and (max-width: 1250px) {
.Modern-Slider .item .img-fill .info .box-1 .txtbox{
  width: 40%;
  padding: 30px;
}
}
@media screen and (max-width: 900px) {
.Modern-Slider .item .img-fill .slide_img {
  height: calc(100vh - 20px);
}
.Modern-Slider .for_PC {
  display: none;
}
.Modern-Slider .for_mobile {
  display: block;
}
.Modern-Slider .item .t01{
  font-size:var(--font-s09);
}
.Modern-Slider .item .t02{
  font-size:var(--font-s00);
}
.Modern-Slider .item .img-fill .info {
  display: none;
}
.Modern-Slider .item .img-fill .info .box-1 .txtbox{
  padding: 20px;
  width: 50%;
}
.Modern-Slider .slick-dots li {
   height: 40px;
}
.Modern-Slider .slick-dots button {
   height: 40px;
}

.Modern-Slider .item .img-fill .slide_img.for_PC {
  display: none;
}
.Modern-Slider .item .img-fill .slide_img.for_mobile {
  display: block;
}
}
@media screen and (max-width: 500px) {
.Modern-Slider .item .img-fill .slide_img {
  height: calc(100vh - 50px);
}
}

.page-banner {
  background-size: cover;
  position: relative;
  width: 100%;
  height: 400px;
  margin-top: 0;
  padding: 0;
  background-position:top center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-banner .box-1 {
  position: relative;
}
.page-banner .banner_ttbox {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center; align-items: center; 
  flex-wrap: wrap;
  z-index: 2;
  text-align: center; 
}
.page-banner .banner_ttbox h2{
  color: #fff;
  font-size: var(--font-s12);
  font-weight: normal;
  letter-spacing: 3px;
  margin: 0 0 0px 0; padding: 0 0 0px 0;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.page-banner:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0.25+0,0.25+100,1+100,0.25+100 */
background: linear-gradient(to bottom, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@media only screen and (min-width: 0px) and (max-width: 1024px) {
  .page-banner {
    height: 40vh; justify-content: center;
  }
  .page-banner .banner_ttbox {
  top: 40%;
}
}

.min_box {
    width: 100%; display: flex;
  justify-content: center; align-items: stretch; flex-wrap: wrap;
}
.min_box .i_left{
    width: 230px; display: flex; margin: 0 0 0px 0;
  justify-content: center; align-items: center; 
  flex-wrap: wrap; 
  position: relative;
}
.min_box .i_left h3{
    font-size:var(--font-s08); color: #3f5a6d;
    padding: 20px 0;
    text-align: center; 
    letter-spacing: 2px;
    line-height: 1.7;
}
.min_box .i_left .line{
  width: 100%;
  height: 4px;
  background: #586f80;
  position: absolute;
  top:0px;
}
.min_box .i_left .line:after {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  border-top: 2px solid #586f80;
  position: absolute;
  top:6px;
}
.min_box .i_left .line02 {
  width: 100%;
  height: 4px;
  background: #586f80;
  position: absolute;
  bottom:0px;
}
.min_box .i_left .line02:after {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  border-top: 2px solid #586f80;
  position: absolute;
  bottom:6px;
}
.min_box .i_right{
    width:calc(100% - 230px); padding:0px 0 0px 8%; margin: 0 0 0px 0;
}
@media screen and (max-width: 1050px) {
.min_box .i_left{
    width: 220px; 
}
.min_box .i_right{
    width:calc(100% - 220px);
}
}
@media screen and (max-width: 850px) {
.min_box .i_left{
    width: 100%; margin: 0px 0px 30px 0px;
}
.min_box .i_right{
    width:100%; padding:0px 0 0px 0;
}

.min_box .i_left .line{
  height: 3px;
}
.min_box .i_left .line:after {
  height: 1px;
  border-top: 1px solid #586f80;
  top:5px;
}
.min_box .i_left .line02 {
  height: 3px;
}
.min_box .i_left .line02:after {
  border-top: 1px solid #586f80;
  bottom:5px;
}
}

.min_box02 {
    width: 100%; display: flex;
  justify-content: center; align-items: flex-start; flex-wrap: wrap;
}
.min_box02 .i_left{
    width: 210px; display: flex; margin: 0 0 0px 0; padding: 50px 0 0 0;
  justify-content: flex-start; align-items: center; 
  flex-wrap: wrap; 
}
.min_box02 .i_left .btn-style02, .min_box02 .i_left .btn-style03{
  width: 100%;
  margin: 0px 0px 10px 0px; 
}
.min_box02 .i_left .btn-box{ 
    margin: 50px 0px 0px 0px; 
}
.min_box02 .i_right{
    width:calc(100% - 210px - 80px); margin:0px 0 0px 80px; padding: 0;
}
.min_box02 .i_right .listGrid-responsive{
    padding: 0 0 40px 0;
    min-height: 805px;
}
.min_box02 .i_right .btn-box{ 
    justify-content: flex-end;
    margin: 30px 0px 0px 0px; 
}
@media screen and (max-width: 1500px) {
.min_box02 .i_left{
    width: 220px; 
}
.min_box02 .i_right{
    width:calc(100% - 220px - 60px); margin:0px 0 0px 60px; padding: 0;
}
}
@media screen and (max-width: 1024px) {
.min_box02 .i_right .listGrid-responsive{
    min-height: auto;
}
}
@media screen and (max-width: 900px) {
.min_box02 .i_left{
    width: 100%; margin: 0px 0px 30px 0px; padding: 0px 0 0 0;
}
.min_box02 .i_left h3{
    padding: 3% 0; 
}
.min_box02 .i_right{
    width:100%; margin:0px 0 0px 0%; 
    padding: 0;
    background:none;
    box-shadow: 0px 0px 0px;
}
}

.min_box03 {
    width: 100%; display: flex;
  justify-content: center; align-items: stretch; flex-wrap: wrap;
  margin: 0 0 80px 0;
}
.min_box03 .i_left{
    width: 300px; display: flex; margin: 0 0 0px 0;
  justify-content: flex-start; align-items: flex-start; 
  flex-wrap: wrap; 
}
.min_box03 .i_right{
    width:calc(100% - 300px - 50px); margin:0px 0 0px 50px; padding: 0;
}
@media screen and (max-width: 1500px) {
.min_box03 .i_left{
    width: 220px; 
}
.min_box03 .i_right{
    width:calc(100% - 220px - 60px); margin:0px 0 0px 60px; padding: 0;
}
}
@media screen and (max-width: 900px) {
.min_box03 .i_left{
    width: 100%; margin: 0px 0px 30px 0px;
}
.min_box03 .i_right{
    width:100%; margin:0px 0 0px 0%; 
    padding: 0;
    background:none;
    box-shadow: 0px 0px 0px;
}
}

/* 左邊分類 */
.list-drop{
  display: none; 
}
@media screen and (max-width: 900px) {
.list-drop{
  width: 100%; display: block; 
  color: var(--color-c05);
  background: rgba(0, 0, 0, 0.05);
}
.list-drop .drop-text{
  font-size: var(--font-s03);
  color: var(--color-c05);
  display: flex;
  align-items: center; justify-content: center;
  margin: 0px 0 0px 0;
  cursor: pointer;

  padding: 12px 10px;

  position: relative;
}
.list-drop i {
  position: absolute;
  top: 13px;
    right: 20px;
}
.list-drop i.down:after {
  content: "\F282";
  font-family: bootstrap-icons ;
    display: block;
    font-weight: 100;
    font-style: normal;
}
.list-drop i.up:after {
  content: "\F286";
  font-family: bootstrap-icons ;
    display: block;
    font-weight: 100;
    font-style: normal;
}
.listbox {
    width: 100%; margin: 0px auto 10px auto;
    display: none;
}
}

.kind{
  width: 100%;
  position:relative; list-style: none;
  padding: 0px 0px;
  margin: 0 0 20px 0px;
  border-radius: 3px; 
}
.kind .inputGroup_pd {
   width: 100%;
}
.kind li {
  position:relative;
  color: var(--color-c04);
  font-size: var(--font-s03);
  font-weight:600;
  padding: 14px 0 10px 0px;
  display:block;
  margin-bottom:10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;

  display: flex; 
    justify-content: space-between;
    align-items: center;
}
.kind li .clean{
  color: var(--color-c05);
  font-size: 12px;
  margin-left:10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 3px 5px;
  border-radius: 5px;
  background: #fff;
  outline: none;
}

.kind li a:hover::before,
.kind li.active a::before{
  color:#ffffff;
}

.kind li.active a,
.kind li a:hover{
  color:#ffffff;
  background-color:#0068b7;
}
@media screen and (max-width: 1000px) {
.kind{
  margin: 0 0 0 0px;
}
.kind li .clean{
  font-size: 10px;
}
}

.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:2;}

.listGrid-responsive {
    overflow-x: auto;
    margin: 0px 0px 0px 0px;
}

.listGrid-responsive02 {
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0px 0px 0px 0px;
    height: 80vh;
}
@media screen and (max-width: 1024px) {
.listGrid-responsive02 {
    overflow-x: auto;
}
}

.form01 {   
    font-size:var(--font-s01);
    
}
.form01 td {   
    text-align:center;
}
.form01 thead { padding: 10px 0px;  }
.form01 thead td { padding: 20px 10px; background: #fff; font-weight: 600;}
.form01 thead td.tt { border-bottom: 3px solid #005086; color: var(--color-c04);}
.form01 thead td:nth-child(even).tt { border-bottom: 3px solid rgba(0%,0%,0%,0.2); }
.form01 thead td:last-child { border-right:none;}
.form01 tbody td { padding: 10px 10px; border-bottom:1px solid rgba(0%,0%,0%,0.1);}
.form01 tbody tr.qlist { border-top:2px solid #fff; background:#f7f7f7; margin:0px 0 0 0;}
@media screen and (max-width: 768px) {
  .form01 {
    margin: 10px 0px; 
    width: 100%;  
  }
  .form01 thead {
    display: none;
  }
  .form01 tbody {
    display: block; display: flex;
  flex-direction: column; align-items: stretch;
  }
  .form01 tbody tr {
    border-bottom: 3px solid rgba(0%,0%,0%,0.1);
    border-top: 1px solid rgba(0%,0%,0%,0.1);
    border-right: 1px solid rgba(0%,0%,0%,0.1);
    border-left: 1px solid rgba(0%,0%,0%,0.1);
    display: block;
    margin-bottom: 20px;
    border-radius: 3px; 
display: flex;
  flex-direction: column; align-items: stretch;
  }

  .form01 tbody td {
    border-bottom: 1px solid rgba(0%,0%,0%,0.1); border-right:0px;
    display: block;
    text-align: right;
  }
  .form01 tbody td:nth-child(even) { background: #fff; }
  .form01 tbody td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  .form01 tbody td:last-child {
    border-bottom: 0;
  }
}

.form02 {   
    font-size:var(--font-s01);
    
}
.form02 td {   
    text-align:center;
}
.form02 thead { padding: 28px 0px; }
.form02 thead tr{ }
.form02 thead td { padding: 28px 10px; background: #fff; font-weight: 600; position:relative; }
.form02 thead td.tt { color: var(--color-c04); border-left:20px solid #fff; border-right:20px solid #fff; white-space:nowrap; position:relative; }
.form02 thead td:before { content: ''; width: calc(100% + 40px); height: 100%; background: #FFF; position: absolute; bottom: 0; left: -20px; z-index:-1}
.form02 thead td.tt:after { content: ''; width: 100%; height: 3px; background: #005086; position: absolute; bottom: -3px; left: 0;}
.form02 thead td:last-child.tt{ border-right:none;}
.form02 thead td:first-child.tt{ border-left:none; z-index: 5;}
.form02 thead td:nth-child(even).tt:after { background: rgba(0%,0%,0%,0.2); }
.form02 thead td:last-child { border-right:none;}
.form02 tbody td { padding: 28px 10px; border-bottom:1px solid rgba(0%,0%,0%,0.1); }
.form02 tbody tr { }
.form02 tbody tr.qlist { border-top:2px solid #fff; background:#f7f7f7; margin:0px 0 0 0;}
.form02 .small { font-size: 13px;}
.form02 .text-left { text-align: left;}
.form02 .space-f01 { padding: 0 30px 0 30px;}

.form02 thead tr.sticky {
  position: sticky;
  top: 0;
  background: #FFF;
  z-index: 1;
}
.form02 thead td.sticky {
  position: sticky;
  left: 0;
  
}
.form02 tbody td.sticky {
  position: sticky;
  left: 0;
  background: #FFF;
  border-bottom:1px solid rgba(0%,0%,0%,0.1);
}
.form02 tbody tr.qlist td.sticky {
  background:#f7f7f7; 
}
@media screen and (max-width: 850px) {
.form02 thead td:after {
  content: '';
  height: 4px; 
  width: 20px;
  background: #fff;
  display: block;
  bottom: -4px;
  left: -20px;
  position: absolute;
}
.form02 tbody td { border-bottom:1px solid #f5f5f5; }
.form02 tbody td.sticky {
  border-bottom:1px solid #f5f5f5;
}
}
@media screen and (max-width: 850px) {
.form02 thead td {
    background: none;
}
}

/* loading */
.loading_box {
    position: fixed !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(128,174,197,0.99);
    z-index: 99999 !important;
    animation-name: loader;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    overflow: hidden;
}
.loading_box .loader {
    box-sizing: border-box;
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
@keyframes loader {
    0% {}
    92% {
        opacity: 1
    }
    100% {
        visibility: hidden;
        opacity: 0
    }
}

.logo_box {
  width: 150px;
  height: 125px;
  position: relative;
  display: flex; justify-content: center; align-items: center; 
  left: 0; top: 0;
}
@media screen and (max-width: 768px) {
.logo_box {
  width: 105px;
  height: 87px;
}
}

.logo_box #st01 {
  position: absolute;
  left: 0; top: 0;
}

.logo_box #st01 .st0 {
  fill: #CF0037;
  fill-opacity: 0;
  stroke: #fff;
  stroke-width: 0.1px;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}
.logo_box #st01 .st0 {
  animation: brush 2s 0s 1 ease-in forwards;
}
@keyframes brush {
  0% {
    stroke-dashoffset: 80;
    fill-opacity: 0;
  }
  75%{
    stroke-width: 0.1px;
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 1;
    stroke-width: 0;
    stroke-dashoffset: 0;
  }
}

.logo_box #st02 {
  position: absolute;
  left: 0px; top: 0;
}
.logo_box #st02 .st0{
  fill: #002c4a;
  fill-opacity: 0;
  stroke: #fff;
  stroke-width: 0.1px;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}

.logo_box #st02 .st0 {
  animation: brush02 2s 0s 1 ease-in forwards;

  -webkit-animation-delay: 0s;
  animation-delay: 0s; 
}

@keyframes brush02 {
  0% {
    stroke-dashoffset: 150;
    fill-opacity: 0;
  }
  75%{
    stroke-width: 0.1px;
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 1;
    stroke-width: 0;
    stroke-dashoffset: 0;
  }
}

/* dot-nav */
.side:hover .side-item:hover .side-item-content,
.side .side-item--default .side-item-content {
    height: 150px;
    border-left:1px solid rgba(0, 0, 0, .2) ;
    margin: 0 0 0 8px;
    padding: 0 0 0 15px;
}

.side.wh:hover .side-item:hover .side-item-content,
.side.wh .side-item--default .side-item-content {
    border-left:1px solid rgba(255, 255, 255, .2) ;
}

.side-item-content{
    height: 0;
    overflow: hidden;
    transition: height .5s;
}

.side {
    padding: 0;
    margin: 0 auto;
    width: 150px;

    position: fixed;
    top: 22%;
    left: 20px;
    z-index: 5;
}
.side .side-item {
  padding: 0;
  margin-bottom: 5px;
}
.side .side-item .side-item-title{
  padding: 0;
  margin: 0px;
  font-size: 14px;
  color: var(--color-c05);
}
.side.wh .side-item .side-item-title{
  color: rgba(255, 255, 255, 1);
}
.side .side-item .side-item-title a{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--color-c05);
}
.side.wh .side-item .side-item-title a{
  color: rgba(255, 255, 255, 1);
}
.side .side-item .side-item-title a:hover{
  color: var(--color-c03); 
}
.side .side-item .num{
  font-size: var(--font-s00);
  margin: 0px 5px 0px 0px;
}
.side .side-item .tt{
  opacity: 0;
}
.side:hover .side-item .tt{
  opacity: 1;
}
@media screen and (max-width: 1279px) {
.side {
     display: none;
}
}

ul.main-navigation {
  list-style: none;
  padding: 0 ;
  margin: 0;
  opacity: 0;

  transition: all .1s;
}

.side:hover .side-item:hover .side-item-content ul.main-navigation{
  opacity: 1;
}
ul.main-navigation li {
  padding: 0; margin: -7px 0 -7px 0;
}
ul.main-navigation > li > a {
  padding: 0; margin: 0;
  text-decoration: none;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-c05);
}
.side.wh ul.main-navigation > li > a{
  color: rgba(255, 255, 255, 0.7);
}
ul.main-navigation li a:hover, .side.wh ul.main-navigation li a:hover{ color: var(--color-c03); }

ul.main-navigation li span.is-active {
    border-bottom: 1px solid rgb(154, 171, 179);
}

/* -首頁------------------------------------------------------------------------------------------------------*/
/* 100vh 
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  position: relative;
}
.scroll-container section {
  height: 100vh;
  scroll-snap-align: center;
}
Scroll Full Page */

.full_page01 {
    min-height: calc(100vh + 5px);
}
.full_page02 {
    min-height: calc(100vh + 5px);
}
@media screen and (max-width: 1000px) {
.full_page01 {
    min-height: auto;
}
.full_page02 {
    min-height: 100vh;
}
}

.content_center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.full_space {
    padding-top: 8%;
    padding-bottom: 8%;
}
.full_space02 {
    padding-bottom: 8%;
}
.full_space03 {
    padding-top: 8%;
}
.head_space {
    padding-top: 80px;
}
@media screen and (max-width: 1000px) {
.head_space {
    padding-top: 0px;
}
}
@media screen and (max-width: 600px) {
.full_space {
    padding-top: 15%;
    padding-bottom: 15%;
}
.full_space02 {
    padding-bottom: 15%;
}
.full_space03 {
    padding-top: 15%;
}
}

.ind_about {
    width: 100%; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-attachment: fixed;
}
.ind_about .box-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ind_about .txtbox{
    width: 360px; 
}
.ind_about .txtbox h3{
    font-size: var(--font-s07);
    color:var(--color-c04);
    margin:20px 0px 0px 0px;
    width: 95%;
}
.ind_about .txtbox p{
    width: 100%;
    color:var(--color-c04);
    margin:20px 0px 20px 0px;
    line-height: 1.8;
}
.ind_about .txtbox .icon_box{
    width: 100%;
}
.ind_about .txtbox .icon_box ul{ margin:40px 0px 0px 0px; padding: 0px; width:110%; list-style:none; 
display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
.ind_about .txtbox .icon_box ul li{ margin:0px 0px 0px 0px; padding: 0px; width:calc(100% / 2); list-style:none; 
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ind_about .txtbox .icon_box ul li .numbox{ 
  display: flex;
  justify-content: flex-start;
  align-items: center; 
  flex-wrap: nowrap;
}
.ind_about .txtbox .icon_box ul li .numbox .num{ 
  padding: 0px;
  margin: 0;
  font-size:var(--font-s19);
  font-family: var(--fontstyle01);
  text-align: center;
  color: transparent;

  background: url(../images/bg04.png);
  background-position: center center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

  letter-spacing: 2px;
}
.ind_about .txtbox .icon_box ul li .numbox .ps{ 
    color:var(--color-c05);
    margin:0px 0px 0px 10px;
}
.ind_about .txtbox .icon_box ul li .text{ 
  width: 100%;
    color:var(--color-c05);
    margin:-10px 0px 0px 0px;

    letter-spacing: 2px;
}
.ind_about .pic{
    width: calc(100% - 360px - 6%); padding: 0 0 0 6%; margin:0 0px 0px 6%; border-left: 1px solid rgba(0,0,0,0.1);
}
.ind_about .pic img{
    width: 100%; border-radius: var(--border-radius01);
}
@media screen and (max-width: 1500px) {
.ind_about .txtbox{
    width: 30%; 
}
.ind_about .pic{
    width: calc(100% - 30% - 5%); padding: 0 0 0 5%; margin:0 0px 0px 5%; 
}
}
@media screen and (max-width: 1300px) {
.ind_about .txtbox{
    width: 35%; 
}
.ind_about .pic{
    width: calc(100% - 35% - 5%); 
}
}
@media screen and (max-width: 1100px) {
.ind_about .txtbox{
    width: 40%; 
}
.ind_about .pic{
    width: calc(100% - 40% - 5%); 
}
}
@media screen and (max-width: 1050px) {
.ind_about .txtbox h3{
    font-size: var(--font-s07); margin:12px 0px 0px 0px;
}
.ind_about .txtbox .icon_box ul li .numbox .num{
    font-size: var(--font-s13);
}
.ind_about .txtbox p, .ind_about .txtbox .icon_box ul li .text{
    text-align: left;
}
.ind_about .txtbox p{
    margin:12px 0px 0px 0px;
}
.ind_about .txtbox .icon_box ul{ margin:20px 0px 0px 0px; }
}
@media screen and (max-width: 1000px) {
.ind_about .txtbox{
    width: 100%; 
}
.ind_about .pic{
    width: 100% ; padding: 0 0 0 0; margin:8% 0px 0px 0; border-left: none;
}
.ind_about .box-1{
    flex-wrap: wrap;
}
.ind_about .txtbox .icon_box ul li{ width:160px;}
.ind_about .txtbox .icon_box ul{ width:100%; justify-content: center;}
}
@media screen and (max-width: 500px) {
.ind_about .txtbox .icon_box ul li{ width:120px;}
.ind_about .txtbox .icon_box ul li:nth-child(2){ margin:0 0 0 10%;}
}

.ind_map {
    width: 100%; 
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}
.ind_map .pic{
    width:100%; width: 98%; position: relative;
}
.ind_map .pic .pic_tw{
    position: absolute; top: 15%; left: 80%;
}
.ind_map img{
    max-width: 100%;
}
.ind_map .mbox-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; 
    height: 100%;
    position: absolute; 

    left: 0;
}
.ind_map .mbox-1 .mlist{
    width: auto;
    position: absolute;
}
.ind_map .mbox-1.pc, .ind_map .pic.pc{
}
.ind_map .mbox-1.mobile, .ind_map .pic.mobile{
  display: none;
}
.ind_map .mbox-1 .mlist.tw{
    top:29%;
    left: 68%;
}
.ind_map .mbox-1 .mlist.thailand{
    bottom:27%;
    left: 40%;
}
.ind_map .mbox-1 .mlist h2{
    width: 100%;
    color: var(--color-c04);
    font-size: var(--font-s07);
    letter-spacing: 8px;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding: 0 0 0 15px;
    text-align: center;
}
.ind_map .mbox-1 .mlist ul{
    width: 100%;
    padding: 0; margin: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.ind_map .mbox-1 .mlist ul li{
    width: auto;  
    padding: 0 30px 0 30px; margin:0 0 0 15px;
    list-style: none;
    border-right: 1px solid rgba(0,0,0,0.1);
}
.ind_map .mbox-1 .mlist ul li:last-child{
    border-right: none;
}
.ind_map .mbox-1 .mlist ul li h3{
    width: 100%;
    color: var(--color-c04);
    font-size: var(--font-s01);
    font-weight: 600;
    margin: 5px 0 6px 0;
    padding: 0 0 0 18px;
    position: relative;
}
.ind_map .mbox-1 .mlist ul li h3:before{
  content: ""; display: block; 
    background: url(../images/local.svg) no-repeat center center; 
 width: 12px; height: 18px; background-size: 100% auto;
 position: absolute; left: 0px; top: 1px;
}
.ind_map .mbox-1 .mlist ul li p{
    width: 100%;
    color: var(--color-c05);
    margin: 0 0 0px 0; padding: 0;
}
.ind_map .mbox-1 .mlist ul li p.branch{
    line-height: 1.5;
}
@media screen and (max-width: 1900px) {
.ind_map .mbox-1 .mlist.tw{
    left: 67%;
}
}
@media screen and (max-width: 1850px) {
.ind_map .mbox-1 .mlist.thailand{
    left: 36%;
}
.ind_map img{
    margin: 0 0 0 -5%;
}
}
@media screen and (max-width: 1750px) {
.ind_map img{
    margin: 0 0 0 -10%;
}
.ind_map .mbox-1 .mlist.tw{
    left: 66%;
}
}
@media screen and (max-width: 1650px) {
.ind_map img{
    margin: 0 0 0 -15%;
}
.ind_map .mbox-1 .mlist.tw{
    left: 65%;
}
.ind_map .mbox-1 .mlist.thailand{
    left: 32%;
}
}
@media screen and (max-width: 1550px) {
.ind_map img{
    margin: 0 0 0 -20%;
}
.ind_map .mbox-1 .mlist.tw{
    left: 64%;
}
.ind_map .mbox-1 .mlist.thailand{
    left: 28%;
}
}
@media screen and (max-width: 1450px) {
.ind_map img{
    margin: 0 0 0 -25%;
}
.ind_map .mbox-1 .mlist.tw{
    left: 63%;
}
}
@media screen and (max-width: 1400px) {
.ind_map .mbox-1 .mlist.tw{
    left: 63%;
}
.ind_map .mbox-1 .mlist.thailand{
    left: 22%;
}
.ind_map img{
    margin: 0 0 0 -30%;
}
}
@media screen and (max-width: 1350px) {
.ind_map img{
    margin: 0 0 0 -35%;
}
}
@media screen and (max-width: 1280px) {
.ind_map .mbox-1 .mlist h2{
    font-size: var(--font-s06);
}
.ind_map .mbox-1 .mlist ul li h3{
    font-size: var(--font-s01);
    padding: 0 0 0 16px;
}
.ind_map .mbox-1 .mlist ul li h3:before{
  content: ""; 
    background: url(../images/local.svg) no-repeat center center; 
 width: 12px; height: 18px; 
}
}
@media screen and (max-width: 1250px) {
.ind_map img{
    margin: 0 0 0 -40%;
}
.ind_map .mbox-1 .mlist.tw{
    left: 59%;
}
}
@media screen and (max-width: 1150px) {
.ind_map img{
    margin: 0 0 0 -45%;
}
.ind_map .mbox-1 .mlist.tw{
    left: 58%;
}
}
@media screen and (max-width: 1050px) {
.ind_map img{
    margin: 0 0 0 0;
}
.ind_map .pic{
    text-align: left; 
}
.ind_map .mbox-1{
    width: 50%; 

    left: auto;
    right: 0;
}
.ind_map .mbox-1.pc, .ind_map .pic.pc{
  display: none;
}
.ind_map .mbox-1.mobile, .ind_map .pic.mobile{
  display: block;
}
.ind_map .slick-list{
  top: 60%;
}
.ind_map .mbox-1 .mlist{
    width: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.ind_map .mbox-1 .mlist ul {
    justify-content: center;
}
.ind_map .mbox-1 .mlist ul li {
  padding: 0 15px 0 15px;
}
.ind_map .mbox-1 .mlist h2{
    margin: 0 0 10px 0;
}
.ind_map .mbox-1 .mlist ul li h3{
    font-size: 14px;
    padding: 0 0 0 14px;
}
.ind_map .mbox-1 .mlist ul li h3:before{
  content: ""; 
    background: url(../images/local.svg) no-repeat center center; 
 width: 10px; height: 15px; 
}
}
@media screen and (max-width: 900px) {
.ind_map {
    flex-wrap: wrap; justify-content: center; align-items: center;
}
.ind_map .mbox-1{
    width: 100%;
    height: 100%;
    position: relative;
    margin: 30px 0 8% 0;
}
.ind_map .mbox-1 .mlist ul li {
        padding: 0 10px 0 10px;
    }
.ind_map .mbox-1 .mlist ul li:nth-child(1) {
        padding: 0 23px 0 0px;
    }
}


.ind_sign {
    width: 100%; 
    padding: 0 0; margin: 0px 0;
    background: url(../images/sign_bg.jpg) repeat center center;
    background-size: cover;

    display: flex;
    justify-content: flex-end;
}
.ind_sign .box-7{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
}
.ind_sign .sign{
  width:calc(100% - 35%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5% 5% 0 0;
}
.ind_sign .sign.mobile{
  display: none;
}
.ind_sign .signbox{
  width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 0 0;
}
.ind_sign .signbox div{
  margin: 0 5.5% 0 0;
}
.ind_sign .signbox div:nth-child(1){
  margin: 0 1% 0 0;
}
.ind_sign .signbox div:last-child{
  margin: 0 0px 0 0;
}
.ind_sign .sign img{
  max-width: 100%;
}
.ind_sign .title{
    width:25%; 
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: center;
}
.ind_sign .title .tbox{
  display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 0 0 0;
}
.ind_sign .title .tbox img{
  max-width: 100%;
}
.ind_sign .title .t01{
    padding: 0; margin: 0;
    font-size:var(--font-s16);
    font-family: 'DFT_S5', 'cwTeXKai';

    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

    order: 3;
}
.ind_sign .title .t02{
    padding: 0; margin: 0;
    font-size:var(--font-s16);
    font-family: 'DFT_S5', 'cwTeXKai';
    text-align: right;

    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

    order: 2;
}
.ind_sign .title .t03{
    padding: 0 0 0 0; margin: 0 10px 0 0;
    font-size:var(--font-s09);
    font-family: 'DFT_S5', 'cwTeXKai';
    text-align: right;

    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

    order: 1;
}
.ind_sign .title .t03 span{
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    font-family: 'DFT_S5', 'cwTeXKai', serif;
}

@media screen and (max-width: 1300px) {
.ind_sign .sign img{
  max-width: 80%;
}
.ind_sign .title .tbox img{
  max-width: 80%;
}
}
@media screen and (max-width: 1200px) {
.ind_sign .title{
    width:25%; 
}
}
@media screen and (max-width: 1050px) {
.ind_sign {
    padding: 12% 0% 12% 0;
}
.ind_sign.full_page01 {
    min-height: 50vh !important;
}
.ind_sign .sign{
    padding: 0;
}
.ind_sign .sign{
  width:100%;
}
.ind_sign .title{
    display: none;
}
}
@media screen and (max-width: 768px) {
.ind_sign .sign.pc{
    display: none;
}
.ind_sign .sign.mobile{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ind_sign .signbox{
  width:auto;
    margin: 0 auto;
}
.ind_sign .signbox div{
  margin: 0 1% 0 0;
}
.ind_sign .signbox div:nth-child(1){
  margin: 0 0% 0 1%;
}
.ind_sign .signbox img{
  max-width: 70%;
}
}

.ind_sustainable {
    width: 100%; 
    background: url(../images/sustainable_bg.jpg) no-repeat center center; 
    background-size: cover;
}
.ind_sustainable .box-2{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ind_sustainable .btnbox{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;  
}
.ind_sustainable .btnbox .icon_pdf, .ind_sustainable .btnbox .icon_arrow_right{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ind_sustainable .btnbox .icon_pdf:before, .ind_sustainable .btnbox .icon_arrow_right:before, .ind_sustainable.esg04 .btnbox .icon_pdf:before { margin:0 0 0 15px; font-size:var(--font-s04); line-height: 1;}
.ind_sustainable .btnbox .icon_arrow_right:before { margin:0 0 0 30px; font-size:var(--font-s04);}
.ind_sustainable .btnbox .btn-style04{
 width: 260px; margin:0 0 25px 0; font-family: 'Microsoft JhengHei';
 letter-spacing: 5px;
 min-height: 50px;
}
.ind_sustainable .title03 h3 {
  display: none;
}
.ind_sustainable .title03 .leaf {
  display: none;
}
@media screen and (max-width: 1000px) {
.ind_sustainable .title03 {
  display: flex;
    justify-content: center;
    align-items: center;
}
.ind_sustainable .title03 h2 {
  justify-content: center; letter-spacing: 20px; padding: 0 0 0 23px;
}
.ind_sustainable .title03 h3 {
  display: block; padding: 0 0 0 23px;
  color: rgba(255, 255, 255, 0.8); letter-spacing: 25px; font-size: var(--font-s12); text-align: center; font-weight: normal;
}
.ind_sustainable .title03 .leaf {
  display: flex; margin: 20px 0px 0px 0px; 
  justify-content: center; align-items: center; 
}
.ind_sustainable .title03 .leaf img{
  width: 60px;
}
.ind_sustainable .box-2{
    flex-wrap: wrap;  
}
.ind_sustainable .btnbox{
  width: 100%; flex-wrap: nowrap;  
    margin:25px 0 0  0; justify-content: center; 
}
.ind_sustainable .btnbox .btn-style04{
 width: 250px; margin: 0 15px;
}
.ind_sustainable .btnbox .btn-style04 .icon_arrow_right, .ind_sustainable .btnbox .btn-style04 .icon_pdf{
  display: none;
}
}
@media screen and (max-width: 650px) {
.ind_sustainable .title03 h2 {
        font-size: 65px;
}
.ind_sustainable .btnbox{
  flex-wrap: wrap !important;
}
.ind_sustainable .btnbox .btn-style04{
 margin: 8px 0px;
}
}

.ind_service { width:100%; margin: 0px auto 0px auto; 
    background: url(../images/ind_service_bg.jpg) no-repeat center center;
    background-size: cover;
    display: flex; justify-content: center; align-items: center; 
}
.ind_service.service01{ 
    background: none; 
}
.ind_service .box-3 { 
display: flex;
    flex-wrap: wrap;
}
.ind_service .box-3 .title04{ width:100%; margin: 0px; padding:0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.ind_service .box-3 .title04 h2 { color: #444; letter-spacing: 6px; text-align:justify;}
.ind_service .box-3 .title04 h3 { color: #444; width:99%;}
.ind_service .box-3 ul { width:100%; margin: 0px auto; padding:7% 0 0 0; display: flex; justify-content: space-between; align-items: center;}
.ind_service .box-3 ul li{ width:calc(100% / 3); margin: 0px 0px 0px 0px; padding:40px 3%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border-right:1px solid rgba(0,0,0,0.1);}
.ind_service .box-3 ul li:last-child{ border-right:none;}
.ind_service .box-3 ul li .icon{ width:76px; margin: 0px 0px 0px 0px; padding:0; }
.ind_service .box-3 ul li .icon img{ width:100%;  }
.ind_service .box-3 ul li .txt{ width: 100%; padding: 0 0px 0px 0px; }
.ind_service .box-3 ul li .txt h4{ width: 100%; padding: 0 0px 0px 0px; margin: 15px 0px 0px 0px; font-size:var(--font-s07); font-weight: 600; color: var(--color-c04); text-align:center; letter-spacing: 2px;}
.ind_service .box-3 ul li .txt p{ width: 100%; padding: 0 0px 0px 0px; margin: 15px 0px 0px 0px; color: var(--color-c05); line-height: 1.8; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.ind_service .box-3 ul li .txt p .s01, .ind_service .box-3 ul li .txt p .s02 { width: 100%; text-align: center; }
@media screen and (max-width: 1050px) {
.ind_service .box-3 .title04 h3 { font-size:var(--font-s04); width:96%;}
.ind_service .box-3 ul { align-items: flex-start; }
.ind_service .box-3 ul li .txt h4{ font-size:var(--font-s03); }
.ind_service .box-3 ul li .icon{ width:60px; }
.ind_service .box-3 ul li .txt p{ display:block;}
.ind_service .box-3 ul li .txt p .s01, .ind_service .box-3 ul li .txt p .s02 { width: auto; text-align: left; }
.ind_service .box-3 ul li .txt p .s02 { margin:0px 0 0px -4px; }
}

@media screen and (max-width: 700px) {
.ind_service .box-3 ul { width:80%; flex-wrap: wrap;}
.ind_service .box-3 ul li{ width:100%; padding:15px 0px; border-right:none; border-bottom:1px solid rgba(0,0,0,0.1); flex-wrap: wrap;}
.ind_service .box-3 ul li:last-child{border-bottom:none; }
.ind_service .box-3 ul li .txt{ width:calc(100% - 60px); padding:0px 0 0px 20px; }
.ind_service .box-3 ul li .txt h4{ text-align: left; margin: 10px 0px 0px 0px;}
.ind_service .box-3 ul li .txt p{ text-align: left; margin: 10px 0px 0px 0px;}
.ind_service .box-3 ul li .txt p span {  word-break: normal;}
}

.ind_service02 { width:100%; margin: 0px auto 0px auto; }
.ind_service02 .box-3 { 
display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.ind_service02 .slider-for { width:100%; margin: 0px; padding:0; border-radius: var(--border-radius01);}
.ind_service02 .slider-for li{ width:100%; margin: 0px; padding:0px; list-style: none;}
.ind_service02 .slider-for img{ border-radius: var(--border-radius01);
width: 100%;
  height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.ind_service02 .slider-for img.for_PC{ display: block;}
.ind_service02 .slider-for img.for_mobile{ display: none;}
.ind_service02 .slider-nav { width:calc(100% + 20px); margin: 50px -10px 0px -10px;}
.ind_service02 .slider-nav li{ width:calc(100% - 20px); margin: 0px 10px; padding:15px 0px 0px 0px; list-style: none; 
display: flex; flex-wrap: wrap; border-top: 2px solid rgba(0, 0, 0, 0.1); cursor: pointer;
}
.ind_service02 .slider-nav li h2 {
    width: 100%;
    font-size: var(--font-s04);
    color: rgba(0, 0, 0, 0.35);
    font-weight: normal;
    padding: 0; margin: 0 0 20px 0;
}
.ind_service02 .slider-nav li p {
    width: 100%;
    font-size: var(--font-s00);
    color: rgba(0, 0, 0, 0.35);
    font-weight: normal;
    padding: 0; margin: 0;
}
#sync2 .synced li, #sync2 .current li {
   border-top: 4px solid #111;
}
#sync2 .synced li h2, #sync2 .current li h2{
   color: var(--color-c04);
}
#sync2 .synced li p, #sync2 .current li p{
   color: var(--color-c04);
}
.ind_service02 .owl-nav{
  display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 20px 5% 0px 0px;
}
.ind_service02 .owl-prev, .ind_service02 .owl-next{
  font-size: 0px; 
  width: 38px; height: 38px; border-radius: 100%;
display: flex; justify-content: center; border: none;
  align-items: center; 
  background: none;
}
.ind_service02 .owl-prev.disabled, .ind_service02 .owl-next.disabled{
  display: none;
}
.ind_service02 .owl-next{
  margin: 0px 0px 0px 10px;
  background: none;
}
.ind_service02 .owl-prev:before{
  font-size: var(--font-s01);
  color: #333;
  content: "\F284";
  font-family: bootstrap-icons ;
    display: block;
    font-weight: 100;
    font-style: normal;
    padding:0 0 0 3px;
}
.ind_service02 .owl-next:before{
  font-size: var(--font-s01);
  color: #333;
  content: "\F285";
  font-family: bootstrap-icons ;
    display: block;
    font-weight: 100;
    font-style: normal;
    padding:0 0 0 3px;
}

@media screen and (max-width: 1050px) {
.ind_service02 { min-height: 100vh;
display: flex;
    justify-content: center;
    align-items: center;
}
.ind_service02 .slider-nav { margin: 30px -10px 0px -10px;}
.ind_service02 .slider-nav li h2 {
    font-size: var(--font-s03);
}
.ind_service02 .slider-nav li p {
    font-size: 14px;
}
.ind_service02 .slider-for img {
    height: 350px;
}
}
@media screen and (max-width: 699px) {
.ind_service02 { 
display: flex;
  justify-content: flex-end;
  margin: 0px;
}
.ind_service02 .box-3 { 
width:95%;
display: flex;
  justify-content: flex-end;
  margin: 0px;
}
.ind_service02 .slider-for li{ padding: 0px 95px 0px 0px; }
.ind_service02 .slider-nav { width:100%; margin: 30px 0px 0px 0px;}
.ind_service02 .slider-nav li{ width:calc(100% - 95px); margin: 0px 95px 0px 0px; padding: 15px 0 0px 0px; }
}
@media screen and (max-width: 530px) {
.ind_service02 .slider-for img.for_PC{ display: none;}
.ind_service02 .slider-for img.for_mobile{ display: block;}
}

.ind_pd { width:100%; margin: 0px auto 0px auto; padding:10% 0; 
display: flex;
  justify-content: center;
  align-items: center;
}
.ind_pd ul{ margin:0px 0 0px 0px; padding: 0px 0px 0px 0px; width:100%; list-style:none;
display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; }
.ind_pd ul:after {
    content: "";
    width:calc(100% / 4 - 25px);
}
.ind_pd li{ margin:0px 0px 0px 0px; padding:0px; width:calc(100% / 4 - 25px); list-style:none; transition: all 0.6s;
 }
.ind_pd li a{ display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; }
.ind_pd li .pic{ width:100%; position: relative; overflow: hidden;  }
.ind_pd li .pic img{ margin: 0 0px -10px 0;
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;

width: 100%;
  height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.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 .txtbox {
    width: 100%;
    padding: 0px;
    margin:20px 0px 0 0px;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    padding: 5px 0 5px 20px;
}
.ind_pd li .txtbox h2 {
    width: 100%;
    font-size: var(--font-s03);
    color: var(--color-c04);
    font-weight: normal;
    padding: 0; margin: 0 0 5px 0;
}
.ind_pd li .txtbox p {
    width: 100%;
    color: var(--color-c04);
    font-weight: normal;
    padding: 0; margin: 0;
}
@media screen and (max-width: 1200px) {
.ind_pd ul:after {
    content: "";
    width:calc(100% / 2 - 20px);
}
.ind_pd li{ width:calc(100% / 2 - 20px); margin:0px 0px 30px 0px;}
}
@media screen and (max-width: 1000px) {
.ind_pd { padding:15% 0; }
.ind_pd ul{ padding: 0px 0px 0px 0px; }
.ind_pd ul:after {
    content: "";
    width:calc(100% / 2 - 15px);
}
.ind_pd li{ width:calc(100% / 2 - 15px); }
}
@media screen and (max-width: 580px) {
.ind_pd ul:after {
    content: "";
    width:100%;
}
.ind_pd li{ width:100%; margin:0px 0px 50px 0px; }
.ind_pd li:last-child{ margin:0px 0px 0px 0px; }
}
@media screen and (max-width: 600px) {
.ind_pd li .pic img {
    max-height: 350px; border-radius: var(--border-radius01);
}
}

.ind_pdinfo { width:100%; margin: 0px auto -5% auto; padding:10% 0; 
background: url(../images/ind_pdinfo.png) repeat center center; 
    background-size: cover;
}
.ind_pdinfo .box-1{ 
display: flex;
    justify-content: space-between;
}
.ind_pdinfo .txtbox{ width:31%; margin: 0px; padding:0;}
.ind_pdinfo .txtbox .title04{ width:100%; margin: 0px; padding:0;}
.ind_pdinfo .txtbox p{ width:100%; margin: 40px 0px 0px 0px; padding:0; color: rgba(255,255,255,0.5); }
.ind_pdinfo .infobox{ width:calc(100% - 31%); margin: 5% 0px 0px 0px; padding:0;  display: flex;  justify-content: flex-end; align-items: center;}
.ind_pdinfo .infobox .box{ width:630px; position:relative;}
.ind_pdinfo .infobox .pic{ margin: 0px; padding:0; width:100%;}
.ind_pdinfo .infobox .pic img{ width: 100%; }
.ind_pdinfo .infobox .i_slit{ margin: 0px; padding:0; }
.ind_pdinfo .infobox .i_slit.i01{ position:absolute; right:150px; top:50px;}
.ind_pdinfo .infobox .i_slit.i02{ position:absolute; right:360px; top:210px;}
.ind_pdinfo .infobox .i_slit.i03{ position:absolute; right:540px; top:400px;}
.ind_pdinfo .infobox .i_slit .tt{ width: 550px; height: 40px; display: block; background: url(../images/ind_pdinfo_line.svg) no-repeat center center; position: relative;
background-size: 100% auto;}
.ind_pdinfo .infobox .i_slit .tt span{ font-family: var(--fontstyle01); font-size:var(--font-s07); color: #fff; padding: 2px 12px 1px 12px; font-weight: 100; position: absolute; left: 0; top: -4px; line-height: 1.7;
background: linear-gradient(to right, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.ind_pdinfo .infobox .i_slit .part_box{ width:100%; margin: 0px; padding:5px 0 0 10px;}
.ind_pdinfo .infobox .i_slit .part_box li{ width:100%; margin: 0px; padding:2px 0; list-style: none; font-family: var(--fontstyle01); font-weight: 100;
    color:rgba(255,255,255,0.7); line-height: 1.6;
}
.ind_pdinfo .infobox .i_slit .part_box li:before { content: "\F231"; font-family: bootstrap-icons ; font-size:12px; margin:0 5px 0 0; color:rgba(255,255,255,0.9);}
@media screen and (max-width: 1430px) {
.ind_pdinfo { margin: 0px auto 0 auto; }
.ind_pdinfo .infobox .box{ width:540px;}

.ind_pdinfo .infobox .i_slit.i01{ right:145px; top:50px;}
.ind_pdinfo .infobox .i_slit.i02{ right:330px; top:190px;}
.ind_pdinfo .infobox .i_slit.i03{ right:500px; top:370px;}

.ind_pdinfo .infobox .i_slit .tt{ width: 450px; height: 33px; }
.ind_pdinfo .infobox .i_slit .tt span{ font-size:var(--font-s04); padding: 2px 10px 0px 10px; top: -2px; }
}
@media screen and (max-width: 1280px) {
.ind_pdinfo .infobox .i_slit .tt{ width: 400px; height: 35px; background: url(../images/ind_pdinfo_line05.png) no-repeat center center; }
.ind_pdinfo .infobox .i_slit .tt span{ padding: 6px 10px 2px 10px; top: -9px;}
}
@media screen and (max-width: 1200px) {
.ind_pdinfo .infobox .i_slit.i01{ right:140px; }
.ind_pdinfo .infobox .i_slit.i02{ right:360px; }
.ind_pdinfo .infobox .i_slit.i03{ right:550px;}
}
@media screen and (max-width: 1100px) {
.ind_pdinfo .infobox{ margin: 7% 0px 0px 0px; }
.ind_pdinfo .infobox .box{ width:500px;}

.ind_pdinfo .infobox .i_slit .tt{ width: 350px; height: 31px; background: url(../images/ind_pdinfo_line05.png) no-repeat center center; background-size: 100% auto;}
.ind_pdinfo .infobox .i_slit .tt span{ padding: 3px 10px 0px 10px; top: -3px; font-size:var(--font-s03);}
.ind_pdinfo .infobox .i_slit.i01{ right:130px; }
.ind_pdinfo .infobox .i_slit.i02{ right:300px; top:180px}
.ind_pdinfo .infobox .i_slit.i03{ right:460px; top:360px;}
}
@media screen and (max-width: 1050px) {
.ind_pdinfo .box-1{ flex-wrap: wrap;}
.ind_pdinfo .txtbox{ width:100%; padding: 0% 5% 8% 5%;}
.ind_pdinfo .txtbox .title04 h3 {
        width: 95%;
    }
.ind_pdinfo .infobox { width:100%; }
.ind_pdinfo .infobox .i_slit .tt span{ padding: 4px 10px 2px 10px;}
.ind_pdinfo .infobox .i_slit .part_box li{ padding:0px 0;}
.ind_pdinfo .infobox .i_slit .part_box li:before {
    font-size: 10px;
}
}
@media screen and (max-width: 1000px) {
.ind_pdinfo { margin: 0px auto 0 auto; }
.ind_pdinfo .box-1{ 
height: 100vh;
display: table-cell; /* ★ */
  vertical-align: middle; /* ★ */
}
}
@media screen and (max-width: 900px) {
.ind_pdinfo .infobox .i_slit .tt{ width: 300px; height: 26px; background: url(../images/ind_pdinfo_line05.png) no-repeat center center; background-size: 100% auto;}
.ind_pdinfo .infobox .i_slit .tt span{ padding: 2px 10px 1px 10px; top: -5px;}
}
@media screen and (max-width: 850px) {
.ind_pdinfo .infobox .box{ width:400px;}
.ind_pdinfo .infobox .i_slit.i01{ right:90px; top:30px;}
.ind_pdinfo .infobox .i_slit.i02{ right:230px; top:140px}
.ind_pdinfo .infobox .i_slit.i03{ right:360px; top:280px;}
}

@media screen and (max-width: 730px) {
.ind_pdinfo { padding:10% 0 20% 0;}

.ind_pdinfo .infobox .i_slit .tt{ width: 270px; height: 24px; background: url(../images/ind_pdinfo_line06.png) no-repeat center center; background-size: 100% auto;}
.ind_pdinfo .infobox .i_slit .tt span{ padding: 2px 0px 0px 8px;}

.ind_pdinfo .infobox .i_slit.i01{ right:100px; top:30px;}
.ind_pdinfo .infobox .i_slit.i02{ right:240px; top:150px}
.ind_pdinfo .infobox .i_slit.i03{ right:370px; top:290px;}
}

@media screen and (max-width: 700px) {
.ind_pdinfo .infobox .box{ margin: 0px -10% 0px 0px;}
}
@media screen and (max-width: 660px) {
.ind_pdinfo .infobox .box{ margin: 0px 0 0px 0px;}
.ind_pdinfo .infobox .i_slit.i03{ right:260px; top:290px;}
}
@media screen and (max-width: 550px) {
.ind_pdinfo .infobox .box{ width:350px;}
.ind_pdinfo .infobox .i_slit .tt{ width: 230px; height: 20px; background: url(../images/ind_pdinfo_line06.png) no-repeat center center; background-size: 100% auto;}
.ind_pdinfo .infobox .i_slit .tt span{ padding: 2px 0px 0px 8px; font-size:var(--font-s00); top: -3px;}
.ind_pdinfo .infobox .i_slit .part_box li{ font-size: 12px; }
.ind_pdinfo .infobox .i_slit .part_box li:before {
    font-size: 8px; margin: 0 0px 0 0;
}

.ind_pdinfo .infobox .i_slit.i01{ right:90px; top:30px;}
.ind_pdinfo .infobox .i_slit.i02{ right:220px; top:130px}
.ind_pdinfo .infobox .i_slit.i03{ right:220px; top:250px;}
}
@media screen and (max-width: 450px) {
.ind_pdinfo .infobox .box{ width:290px; }

.ind_pdinfo .infobox .i_slit .tt{ width: 203px; height: 18px; background: url(../images/ind_pdinfo_line06.png) no-repeat center center; background-size: 100% auto;}
.ind_pdinfo .infobox .i_slit .tt.lineb{ width: 225px; height: 18px; background: url(../images/ind_pdinfo_line06b.png) no-repeat center center; background-size: 100% auto;}
.ind_pdinfo .infobox .i_slit .tt span{ padding: 2px 0px 0px 4px; font-size: 10px; letter-spacing: 0.5px;}
.ind_pdinfo .infobox .i_slit .part_box{ padding:5px 0 0 0px;}
.ind_pdinfo .infobox .i_slit .part_box li{ font-size: 10px; line-height: 1.2; letter-spacing: 0.5px;}
.ind_pdinfo .infobox .i_slit.i01{ right:80px; top:25px;}
.ind_pdinfo .infobox .i_slit.i02{ right:175px; top:95px}
.ind_pdinfo .infobox .i_slit.i03{ right:195px; top:190px;}
}
@media screen and (max-width: 400px) {
.ind_pdinfo .infobox .i_slit .tt{ width: 169px; height: 15px; background: url(../images/ind_pdinfo_line06.png) no-repeat center center; background-size: 100% auto;}
.ind_pdinfo .infobox .i_slit .tt.lineb{ width: 188px; height: 15px; background: url(../images/ind_pdinfo_line06b.png) no-repeat center center; background-size: 100% auto;}
.ind_pdinfo .infobox .i_slit .tt span{ top: -5px; }
.ind_pdinfo .infobox .i_slit.i01{ right:80px; }
.ind_pdinfo .infobox .i_slit.i02{ right:170px; }
.ind_pdinfo .infobox .i_slit.i03{ right:180px; }
.ind_pdinfo .infobox .i_slit.i03 .tt{ width: 189px; }
}


.ind_pdinfo02 { width:100%; margin: 0px auto 0px auto; padding:0; 
background: linear-gradient(to right, #8fb5c2 0%,#dee6e9 50%,#8fb5c2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
display: flex;
    justify-content: center;
    align-items: flex-end;
}
.ind_pdinfo02 .box{ width:100%; margin: 0px; padding:0;
display: flex;
    justify-content: space-between;
    align-items: center;
}
.ind_pdinfo02 .box .pic{ width:calc(100% - 50%); margin: 20px 0px 0px 0px; padding:0;}
.ind_pdinfo02 .box .pic img{ width:100%; }
.ind_pdinfo02 .box .txtbox{ width:43%; margin: 0px; padding-left:calc((100% - 1460px) / 2 + 34px); padding-top:5%; padding-bottom:5%;}
.ind_pdinfo02 .box .txtbox .title04{ width:100%; margin: 0px; padding:0;}
.ind_pdinfo02 .box .txtbox .title04 h2 { color: #444;}
.ind_pdinfo02 .box .txtbox .title04 h3 {color: #444; }
.ind_pdinfo02 .box .txtbox p{ width:100%; margin: 40px 0px 0px 0px; padding:0; color: var(--color-c01); line-height:1.8;}

.ind_pdinfo02 .box .txtbox .infobox { width:100%; margin: 60px 0px 0px 0px; padding:0; display: flex; justify-content: space-between; align-items: center;}
.ind_pdinfo02 .box .txtbox .infobox .i_slit{ width:calc(100% / 2); margin: 0px; padding:0 8% 0 0; }
.ind_pdinfo02 .box .txtbox .infobox .i_slit.last{ padding:0 0 0 15%; }
.ind_pdinfo02 .box .txtbox .infobox .i_slit .tt{ font-size:var(--font-s07); color: var(--color-c05);}
.ind_pdinfo02 .box .txtbox .infobox .i_slit .part_box{ width:100%; margin: 0px; padding:5px 0 0 0px; border-right:1px solid rgba(0,0,0,0.1); }
.ind_pdinfo02 .box .txtbox .infobox .i_slit.last .part_box{ border-right:none; }
.ind_pdinfo02 .box .txtbox .infobox .i_slit .part_box li{  margin: 0px; padding:10px 0; list-style: none; font-family: var(--fontstyle01); font-weight: 100;
position: relative;
    color: var(--color-c05);
}
.ind_pdinfo02 .box .txtbox .infobox .i_slit .part_box li:before { content: ""; background: var(--color-c05); width:15px; height: 1px; display:block; position:absolute; left:0px; bottom:5px;}
@media screen and (max-width: 1630px) {
.ind_pdinfo02 .box .txtbox{ padding-left:5%;}
}
@media screen and (max-width: 1380px) {
.ind_pdinfo02 .box .txtbox .infobox { margin: 50px 0px 0px 0px; }
}
@media screen and (max-width: 1280px) {
.ind_pdinfo02 .box .pic{ width:calc(100% - 34%); margin: -17px -10% 0px 0px; }
}
@media screen and (max-width: 1050px) {
.ind_pdinfo02 { padding:10% 0;}
.ind_pdinfo02 .box{ flex-wrap: wrap; position:relative; height: 100vh; justify-content: center;}
.ind_pdinfo02 .box .txtbox{ width:100%; padding:0% 5% 15% 5%; z-index:2;}
.ind_pdinfo02 .box .title04 h3 {
        width: 95%;
    }
.ind_pdinfo02 .box .txtbox .infobox { width:auto; margin: 60px 0px 0px 0px; justify-content: flex-start;}
.ind_pdinfo02 .box .txtbox .infobox .i_slit{  width:160px; padding:0 0 0 0; }
.ind_pdinfo02 .box .txtbox .infobox .i_slit.last{ padding:0 0 0 5%; }
.ind_pdinfo02 .box .txtbox .infobox .i_slit .tt{ font-size:var(--font-s03); }
.ind_pdinfo02 .box .txtbox .infobox .i_slit .part_box li{  font-size:14px; }
.ind_pdinfo02 .box .pic{ width:60%; position:absolute; right:0; bottom: 20%; z-index:1;}
}
@media screen and (max-width: 700px) {
.ind_pdinfo02 .box .txtbox .infobox .i_slit .part_box li{  
    color: var(--color-c01);
}
.ind_pdinfo02 .box .txtbox .infobox .i_slit .part_box li:before { display:none; }
}
@media screen and (max-width: 650px) {
.ind_pdinfo02 .box .txtbox .infobox .i_slit{ width:115px; }
.ind_pdinfo02 .box .txtbox .infobox .i_slit.last{ width:160px; }
.ind_pdinfo02 .box .txtbox .infobox .i_slit .tt{ font-size:var(--font-s01); }
.ind_pdinfo02 .box .txtbox .infobox .i_slit .part_box li{  font-size:12px; letter-spacing:1px; padding: 5px 0;}
.ind_pdinfo02 .box .pic{ width:80%; right: -15% ; bottom: 16%;}
}

/* -投資專區--------------------------------------------------------------------------------------------------*/
.investor_selet {
    width: 100%; font-size: 18px; padding:0px 0 18px 0; background: #fff;
}
@media screen and (max-width: 850px) {
.investor_selet {
    padding:0px 0 36px 0; background: #fff;
}
}

.mainnav {
  display: flex; justify-content: flex-end;  align-items: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.mainnav ul {
  border-radius: 0;
  display: block;
  list-style-type: none;
  margin: 0;
  min-width: 160px;
  padding: 1rem 0.3rem;
  position: absolute;
  background: #fff;
  box-shadow: 0 0 20px rgb(0 0 0 / 10%);
  z-index: 9;
}

.mainnav li {
  margin: 0;
}

.mainnav > li {
  margin: 0 0px 0 20px;
}
.mainnav ul a {
  border: 0;
  color: var(--color-c04);
  display: block;
  margin: 0;
  padding: 0.5rem 1rem;
  font-size:var(--font-s01);
}

.mainnav ul a:hover,
.mainnav ul a:focus {
  margin-bottom: 0;
  text-decoration: none;
}

.mainnav ul a:focus {
  color: var(--color-c03);
  position: relative;
}

.mainnav button {
  align-items: center;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  display: flex;
  padding: 0.3rem 2rem;
  font-size:var(--font-s01);
  color:var(--color-c05);
  background: rgba(0,0,0,0.05);
}

.mainnav button::after {
  content: "";
  border-bottom: 1px solid var(--color-c04);
  border-right: 1px solid var(--color-c04);
  height: 0.5em;
  margin-left: 0.75em;
  width: 0.5em;
  transform: rotate(45deg);
}

.mainnav button:focus {
  border-color: var(--color-c03);
  position: relative;
}

.mainnav button:hover,
.mainnav button[aria-expanded=true] {
  color: var(--color-c03);
}

.mainnav button:hover::after,
.mainnav button[aria-expanded=true]::after {
  border-color: var(--color-c03);
}

.investors01 { width:100%; margin: 0px auto 0px auto; padding:0px 0 0px 0; }
.investors01 .accordion .item{ width:100%; margin: 0px 0px 0px 0px; padding:0px 0 0px 0; }
.investors01 .accordion-button {
    font-size:var(--font-s04);
    padding: 1.25rem 2rem 1.25rem 2rem;
    color: var(--color-c04);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.investors01 .accordion-button:not(.collapsed) {
    color: var(--color-c03);
    background-color: #fff;
}
.investors01 .accordion {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A84AF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.investors01 .accordion-button:focus {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    box-shadow: none;
    border-radius: 0px;
}
.investors01 .accordion-body {
    background-color: #fff;
    padding: 1rem 2rem 1rem 2rem;
}
@media screen and (max-width: 850px) {
.investors01 .accordion-button {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.investors01 .accordion-button:focus {
    border-bottom: none;
}
}

.investors02 { width:100%; margin: 0px auto 0px auto; padding:0px 0 0px 0; }
.investors02 ul{ width:100%; margin: 0; padding:0px 0 0px 0; list-style: none;}
.investors02 ul li{ width:100%; padding: 1rem 0px; margin: 0; list-style: none; font-size:var(--font-s03); line-height: 1.5; position:relative; 
display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap;
}
.investors02 ul li a{ display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap;}
.investors02 ul li:hover a p{ color: var(--color-c03); }
.investors02 ul li .date{ width: 70px; font-size:var(--font-s01); color: var(--color-c05); display: flex; justify-content: flex-start; align-items: center;
}
.investors02 ul li .date:after {
  content: '';
  width: 1px;
  height: 23px;
  background: rgba(0, 0, 0, .125);
  margin: 0 0px 0px 20px;
}
.investors02 ul li p{ width: calc(100% - 70px); color: var(--color-c05); padding: 0 0 0 20px; margin: 0; }
@media screen and (max-width: 1000px) {
.investors02 ul li{ border-bottom: 1px solid rgba(0, 0, 0, .125);}
.investors02 ul li a, .investors02 ul li{ flex-wrap: wrap;}
.investors02 ul li p{ width:100%; padding: 5px 0 0 0px;}
.investors02 ul li .date:after {
  display: none;
}
.investors02 ul li:last-child { border-bottom: none;}
}

.investors03 { width:100%; margin: 0px auto 0px auto; padding:0px 0 0px 0; }
.investors03 ul{ width:100%; margin: 0; padding:0px 0 0px 0; list-style: none;}
.investors03 ul li{ width:100%; padding: 1rem 0px; margin: 0; list-style: none; font-size:var(--font-s03); line-height: 1.5; position:relative; 
display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap;
}
.investors03 ul li a{ display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap;}
.investors03 ul li:hover a p{ color: var(--color-c03); }
.investors03 ul li .date{ width: 70px; font-size:var(--font-s01); color: var(--color-c05); display: flex; justify-content: flex-start; align-items: center;
}
.investors03 ul li .date:after {
  content: '';
  width: 1px;
  height: 23px;
  background: rgba(0, 0, 0, .125);
  margin: 0 0px 0px 20px;
}
.investors03 ul li .info{ width: calc(100% - 70px); display: flex; justify-content: space-between; align-items: center;}
.investors03 ul li .txt{ width: calc(100% - 90px ); color: var(--color-c05); padding: 0 20px 0 20px; margin: 0; }
.investors03 ul li .icon_box{ width: 90px; display: flex; justify-content: flex-end; align-items: center;}
.investors03 ul li .icon_box .icon_file:before, .investors03 ul li .icon_box .icon_youtube:before { margin:0 0 0 10px;}

@media screen and (max-width: 700px) {
.investors03 ul li{ border-bottom: 1px solid rgba(0, 0, 0, .125);}
.investors03 ul li a, .investors03 ul li{ flex-wrap: wrap;}
.investors03 ul li .info{ width: 100%; padding: 5px 0 0 0px;}
.investors03 ul li .txt{ padding: 0 20px 0 0px; }
.investors03 ul li p{ width: 100%; padding: 5px 0 0 0px;}
.investors03 ul li .date:after {
  display: none;
}
.investors03 ul li:last-child { border-bottom: none;}
}

.investors04 { width:100%; margin: 0px auto 0px auto; padding:2rem 2.5rem 1rem 2.5rem; }
.investors04 .i_list{ width:100%; margin: 0; padding:0px 0 0px 0; list-style: none;
display: flex; 
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.investors04 .i_list .tt{ font-size:var(--font-s03); color: var(--color-c01);
}
.investors04 ul li{ width:100%; padding: 1rem 0px; margin: 0; list-style: none; font-size:var(--font-s03); line-height: 1.5; position:relative; 
display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap;
}
.investors04 ul li a{ display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap;}
.investors04 ul li:hover a p{ color: var(--color-c03); }
.investors04 ul li .date{ width: 70px; font-size:var(--font-s01); color: var(--color-c05); display: flex; justify-content: flex-start; align-items: center;
}
@media screen and (max-width: 991px) {
.investors04 .i_list .tt{ width:100%; margin: 0 0 8px 0;}
}

.investors05 { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; }
.investors05 canvas { margin: 0 0px 4rem 0px; }
.investors05 .financial{ width:100%; margin: 0px; padding:0; display: flex;  justify-content: flex-start; align-items: center;}
.investors05 .financial .title01{ width:auto; padding:0 0 0 0;}
.investors05 .financial .nav{ margin: 0px; padding:0; display: flex;  justify-content: flex-start; align-items: center;}
.investors05 .financial .nav button{ margin:0 0.5rem 0 0.5rem; padding:0; outline: 0px; border: 0px; background: var(--color-c01); color: #fff; padding: 0.5rem 1rem; font-size:var(--font-s03); }
.investors05 .financial .nav button.active{ background: var(--color-c06);}

.investors05 .income{ width:100%; margin: 2rem 0px 0px 0px; padding:0; }
.investors05 .income .year{ width:100%; margin: 0; padding:28px 0; text-align: center; font-weight:600; color: var(--color-c04); font-size: var(--font-s06);}
.investors05 .income .wrapper {
    position:relative;
    margin:0 auto 30px auto;
    overflow:hidden;
  padding:0px;
    height:55px;
}

.investors05 .income .wrapper .nav{ margin: 0px; padding:0; display: flex;  justify-content: flex-start; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1) ;}
.investors05 .income .wrapper .nav button{ margin:0 0.5rem 0 0.5rem; padding:0; outline: 0px; border: 0px; color: var(--color-c01); padding: 0.5rem 1rem; background: none; font-size:var(--font-s03); position:relative;}
.investors05 .income .wrapper .nav button.active{ color: var(--color-c06); }
.investors05 .income .wrapper .nav button:after {
    border-bottom: .125rem solid var(--color-c06);
    bottom: -1px;
    content: "";
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    transition: all .6s ease;
    width: 0;
}
.investors05 .income .wrapper .nav button.active:after {
    width: 2rem;
}
.investors05 .canvas_box { width:75%; margin: 0px auto; display: flex; justify-content: center; align-items: center; position:relative; }
.investors05 .canvas_box .unit01 { color:#666; font-size:14px; position:absolute; top:0; left:-95px; width:150px; text-align:right; }
.investors05 .canvas_box .unit02 { color:#666; font-size:14px; position:absolute; top:0; right:-50px; width:150px; text-align:right; }
.investors05 .canvas_box canvas { width:100%; margin: 30px 0px 70px 0px; }
.investors05 .ps{ width:100%; margin: 0px; padding: 0; }
.investors05 .ps .txtbox{ color: var(--color-c05);}
.investors05 .ps .txtbox p{ margin-bottom: 0; padding: 0;}
.investors05 .ps a{ color: var(--color-c05); text-decoration:underline;}
.investors05 .ps a:hover{ 
text-decoration:none;
}
@media screen and (max-width: 1000px) {
.investors05 .canvas_box .unit01 { left:0px; width:150px; text-align:left;}
.investors05 .canvas_box .unit02 { right:0px; width:150px; }
.investors05 .income .year{ padding:0px 0 28px 0; 

}
}
@media screen and (max-width: 850px) {
.investors05 .inputGroup_box04 { margin: 0px 0px 40px 0px;}
}
@media screen and (max-width: 700px) {
.investors05 .canvas_box .unit01 { font-size:10px; }
.investors05 .canvas_box .unit02 { font-size:10px; }
}

.income_table01{ display:none;}

.investors06 { width:100%; margin: 0px; display: flex; justify-content: flex-start; align-items: center; letter-spacing:3px;}
.investors06 .title{ width:35%; margin: 0px; padding: 0px 8% 0px 0px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; border-right:1px solid rgba(0, 0, 0, 0.1);}
.investors06 .title h2{ width:100%; text-align: left; margin: 0px; padding:0; font-family: var(--fontstyle01); font-weight: 100;
color: var(--color-c04);
  font-size:var(--font-s17); letter-spacing:6px; white-space:nowrap;
}
.investors06 .title h3{ width:100%; text-align: left; letter-spacing:6px;
color: var(--color-c04);
  font-size:var(--font-s06);
}
.investors06 .info{ width:65%; margin: 0px; padding: 20px 0 0px 0;}
.investors06 .info ul{ margin:0px; padding: 0px; width:100%; list-style:none; 
display: flex;
  justify-content: center; align-items: center;
  flex-wrap: nowrap; }
.investors06 .info ul li{ margin:0px; padding: 0px; width:45%; list-style:none; 
display: flex;
  justify-content: center;
  flex-wrap: wrap; }

.investors06 .info ul li:last-child{ margin:0px -20% 0px 0px;}
.investors06 .info h4{ width:100%; text-align: center; letter-spacing:6px;
color: var(--color-c05);
  font-size:var(--font-s04);
}
.investors06 .info p{ width:100%; text-align: center; margin: 8px 0 0 0; letter-spacing:6px;
color: var(--color-c05);
  font-size:var(--font-s03);
}
.investors06 .info p a{ 
color: var(--color-c05); text-decoration:underline; 
}
.investors06 .info p a:hover{ 
text-decoration:none;
}
@media screen and (max-width: 1000px) {
.investors05 .canvas_box { width:100%; }
}
@media screen and (max-width: 1300px) {
.investors06 .title{ width:330px; }
.investors06 .info{ width:calc(100% - 330px); }
}
@media screen and (max-width: 900px) {
.investors06 { flex-wrap: wrap;}
.investors06 .title{ width:100%; padding: 0px 0 5% 0px; border-right:none; border-bottom:1px solid rgba(0, 0, 0, 0.1);}
.investors06 .title h2, .investors06 .title h3{ text-align: left;}
.investors06 .info{ width:100%; padding: 5% 0 0 0px;}
.investors06 .info ul{ justify-content: space-between; }
.investors06 .info ul li{ width:auto; display: block;}
.investors06 .info ul li:last-child{ margin:0px 0px 0px 0px;}
}
@media screen and (max-width: 700px) {
.investors06 { padding: 5% 0 ; }
.investors06 .title h2{  font-size:var(--font-s14);}
.investors06 .title h3{ text-align: left; margin:20px 0px 0 0px;}
.investors06 .title {
        padding: 0px 0 30px 0px;
}
.investors06 .info{
        padding: 30px 0 0 0px;
}
}
@media screen and (max-width: 300px) {
.investors06 .info ul{ flex-wrap: wrap; }
.investors06 .info ul li{ width:100%; }
.investors06 .info ul li:last-child{ margin:30px 0px 0px 0px;}
}

.investors07 { width:100%; margin: 0px auto 0px auto; padding:0 2.5rem 0rem 2.5rem; }
.investors07 .i_txtbox{ width:100%; margin: 0px; padding:0; color: var(--color-c05); font-size:var(--font-s03); line-height:2; }
.investors07 .i_date{ width:100%; margin: 0px; padding:0 0 2rem 0; color: var(--color-c05); font-size:var(--font-s00); line-height:2; text-align: right; }
.investors07 .i_txtbox .table001 td{ padding:3px 7px; }

/* -tabs with scroll-*/
.list {
    position:absolute;
    left:0px;
    top:0px;
    min-width:3500px;
    margin-top:0px;
}
.list li{
  display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
}
.scroller {
  text-align:center;
  cursor:pointer;
  display:none;
  padding:7px;
  padding-top:13px;
  white-space:no-wrap;
  vertical-align:middle;
  background-color:#fff;
}

.investors_dialog { width:100%; }
.investors_dialog .modal-title{ width:100%; padding: 0 10px 0 0; text-align:center; color: var(--color-c04); font-size:var(--font-s04);}
.investors_dialog .modal-header{ padding: 2.5rem;}

/* -公司治理--------------------------------------------------------------------------------------------------*/
.governance { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; }
.governance ul{ width:100%; margin: 0px 0px 100px 0px; padding:0 0 0 0; list-style: none; }
.governance ul:last-child {
  margin: 0px 0px 0 0px;
}
.governance ul li{ width:100%; margin: 0px; padding:0 0 0 10%; list-style: none; }
.governance ul li ul{ width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 0; list-style: none; 
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.governance ul li ul:after {
    content: "";
    width:calc(100% / 3 - 25px);
}
.governance ul li ul li{ width:calc(100% / 3 - 25px); margin:50px 0px 0px 0px; padding:0 0 0 0; list-style: none; }
.governance ul li ul li .company{ margin: -10px 0px 20px 0px; padding:0 0 0 0; 
display: flex;  justify-content: space-between; align-items: center;
}
.governance ul li ul li .company h4{ margin: 0px 0px 0px 0px; padding:0 0 0 0; font-size:var(--font-s03); color: var(--color-c04); font-weight: 600;}
.governance ul li ul li .name{ margin: 0px 0px 20px 0px; padding:0 30% 0 0; 
display: flex;  justify-content: flex-start; align-items: center;
}
.governance ul li ul li .name h3{ margin: 0px 8px 0px 0px; padding:0 0 0 0; font-size:var(--font-s09); color: var(--color-c04); font-weight: 600; letter-spacing: 8px;}
.governance ul li ul li .name span{ margin: 0px 0px 0px 0px; padding:2px 12px; font-size:var(--font-s00); display:block;
clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%); background: #deebf7; color: var(--color-c05);
}
.governance ul li ul li .name span.color01{ background: #dedeff; }
.governance ul li ul li .name span.color02{ background: #e2f0d9; }
.governance ul li ul li .name span.color03{ background: #fff2cc; }
.governance ul li ul li p{ margin: 0px 0px 5px 0px; padding:0 0 0 0; font-size:var(--font-s01); color: var(--color-c05); }
.governance ul li ul li .dot{ padding: 0px 6px 0px 4px; }
@media screen and (max-width: 1366px) {
.governance ul li{ padding:0 0 0 0; }
}
@media screen and (max-width: 1250px) {
.governance ul li ul li .name{ padding:0 0 0 0; }
}
@media screen and (max-width: 1000px) {
.governance ul li ul li .name h3{ font-size:var(--font-s07); }
}
@media screen and (max-width: 1000px) {
.governance ul li ul li{ width:calc(100% / 2 - 25px); }
.governance ul li ul:after {
    content: "";
    width:calc(100% / 2 - 25px);
}
}
@media screen and (max-width: 960px) {
.governance ul li ul li .name{ justify-content: flex-start; }
.governance ul li ul li .name span{ margin: 0px 0px 0px 20px; }
}
@media screen and (max-width: 400px) {
.governance ul li ul li{ width:100% ; }
}

.governance02 { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; }
@media screen and (max-width: 850px) {
.governance02  .form02 .space-f01{ padding: 0 10px 0 10px; width:20%;}
}

.execution_box {margin: 0px; padding:0 0 0 0; display: flex;
  justify-content: center; align-items: center; flex-wrap: nowrap;}
.execution_box .txt{margin: 0px; padding:0 0 0 0; }
.execution_box .check{margin: 0px; padding:0 0 0 0; }

.governance03 { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; }
.governance03 .line_txt_box .txt{ line-height: 1.8;}

.governance04 { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; }
.governance04 ul { width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 0; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
.governance04 ul:after {
    content: "";
    width:calc(100% / 3 - 30px);
}
.governance04 ul li{ width:calc(100% / 3 - 30px); margin: 15px 0px 15px 0px; padding:40px 3%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background:rgba(255,255,255,0.5); border-radius: var(--border-radius01); 
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.08);
}
.governance04 ul li:last-child{ border-right:none;}
.governance04 ul li h4{ width: 100%; padding: 0 0px 0px 0px; margin: 0 0px 25px 0px; font-size:var(--font-s11); font-weight: 600; color: var(--color-c04);  text-align:center; letter-spacing: 5px; }
.governance04 ul li:nth-child(5) h4, .governance04 ul li:nth-child(6) h4{ min-height: 78px; }
.governance04 ul li .icon{ margin: 0px; padding:0 30px 20px 30px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.governance04 ul li .icon img{ width:76px; }
.governance04 ul li .txt{ width: 100%; padding: 25px 0px 0px 0px; }
.governance04 ul li .txt p{ width: 100%; padding: 0 0px 0px 0px; margin: 0px 0px 5px 0px; color: var(--color-c07);  text-align:center; line-height: 1.8;}
@media screen and (max-width: 1199px) {
.governance04 ul:after {
    content: "";
    width:calc(100% / 2 - 10px);
}
.governance04 ul li:nth-child(3) h4{ min-height: 78px; }
.governance04 ul li{ width:calc(100% / 2 - 10px); }
.governance04 ul li:nth-child(5) h4, .governance04 ul li:nth-child(6) h4{ min-height: auto; }
}
@media screen and (max-width: 1050px) {
.governance04 ul li h4 { font-size: var(--font-s08); }
}
@media screen and (max-width: 800px) {
.governance04 ul li{ width:100%; }
.governance04 ul li:nth-child(3) h4{ min-height: auto; }
}
@media screen and (max-width: 700px) {
.governance04 ul li .icon img{ width:60px; }
}

.governance05 { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; 
display: flex;
  justify-content: center; align-items: center; flex-wrap: nowrap;
}
.governance05 .title06{ width:250px; }
.governance05 .pic{ width:calc(100% - 250px);  margin: 0px 0px 0px 0px; padding:0 0 0 0;text-align: center;  }
.governance05 .pic img{ max-width:100%; }
@media screen and (max-width: 1024px) {
.governance05 { flex-wrap: wrap;}
.governance05 .title06{ width:100%; text-align:center}
.governance05 .pic{ width:100%; margin: 30px 0px 0px 0px; }
.governance05 .pic img{ max-width:75%; }
}
@media screen and (max-width: 700px) {
.governance05 .pic{ margin: 30px 0px 20px 0px; }
}



/* -產品----------------------------------------------------------------------------------------------------*/
.pd01 { width:100%; margin: 0px; padding:0px 0 0px 40px; display: flex; flex-wrap: wrap; border-left:1px solid rgba(0,0,0,0.1);}
.pd01 h2 { width: 100%; 
    text-align: left;
    margin: 0px 0px 20px 0px;
    padding: 0;
    font-family: var(--fontstyle01);
    font-weight: 100;
    color: var(--color-c04);
    font-size: var(--font-s20);
    letter-spacing: 3px;
}
.pd01 .navbar {
    padding: 0;
}
.pd01 .navbar-expand-lg { flex-wrap: wrap;}
.pd01 .collapse { width: 100%; }
.pd01 .collapse .navbar-nav{ width: 100%; }
.pd01 .navbar-expand-lg .navbar-nav {
   flex-direction: column;
}
.pd01 .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 0;
        color: var(--color-c05);
        font-size:var(--font-s03);
        letter-spacing: 3px;
}
.pd01 .navbar-expand-lg .navbar-nav .nav-link.active {
        color: var(--color-c03);
}
@media screen and (max-width: 1500px) {
.pd01 h2 { font-size: var(--font-s15); }
}
@media screen and (max-width: 1024px) {
.pd01 h2 { font-size: var(--font-s13); }
}
@media screen and (max-width: 1024px) {
.pd01 { padding:0px 0 0px 5%; }
}

.pd02 { width:100%; margin: 0px; padding:0px 0 0px 25px;  }
.pd02 ul{  width:100%; margin: 0px; padding:0px 0 0px 0; list-style: none; display: flex; justify-content: space-between; align-items: center;}
.pd02 ul li{  width:calc(100% / 3); margin: 0px 0 0px 0; padding:0px 0 0px 0; list-style: none; }
.pd02 ul li img{  width:100%; margin: 0px 0 0px 0; padding:0px 0 0px 0; }

.pd03 { width:100%; margin: 0px; padding:0px 0 0px 25px;  }
.pd03 ul{  width:100%; margin: 0px; padding:0px 0 0px 0; list-style: none; display: flex; justify-content: space-between; align-items: center;}
.pd03 ul li{  width:100%; margin: 0px 0 0px 0; padding:0px 0 0px 0; list-style: none; }
.pd03 ul li img{  width:100%; margin: 0px 0 0px 0; padding:0px 0 0px 0; border-radius: var(--border-radius01);}

/* -研發----------------------------------------------------------------------------------------------------*/
.rd02 {  width:100%; margin: 0px; padding:0px 0 0px 0; display: flex;  justify-content: space-between; align-items: flex-start; }
.rd02 .txtbox{  width:48%; margin: 0px; padding:0px 7% 0px 0; }
.rd02 .txtbox .title06 {  margin: 0 0 30px 0; padding:0px 0 0px 0; }
.rd02 .txtbox p{  width:100%; margin: 0px; padding:0px 0 0px 0; color: var(--color-c05); line-height: 2;}
.rd02 .txtbox .icon_list{  width:100%; margin: 0px; padding:0px 0 0px 0; }
.rd02 .txtbox .icon_list ul{  width:100%; margin: 60px 0px 0px 0px; padding:0px 0 0px 0; list-style: none; display: flex; justify-content: flex-start; align-items: center;}
.rd02 .txtbox .icon_list ul li{  width:auto; margin: 0 10% 0 0; padding:0px 0 0px 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.rd02 .txtbox .icon_list ul li .icon {
    width: 58px;
    margin: 0px 0px 0px 0px;
    padding: 0;
}
.rd02 .txtbox .icon_list ul li .icon img{ width:100%;  }
.rd02 .pic{  width:48%; margin: 0px 0px 0px 0; padding:0px 0 0px 0; text-align:right;}
.rd02 .pic img{  max-width:100%; }
@media screen and (max-width: 1350px) {
.rd02 .txtbox{  width:55%; }
.rd02 .pic{  width:45%; }
}
@media screen and (max-width: 1250px) {
.rd02 .txtbox .icon_list ul li .icon {
    width: 48px;
}
}
@media screen and (max-width: 1100px) {
.rd02 {  flex-wrap: wrap; }
.rd02 .txtbox{  width:100%; padding:0px 0 0px 0;}
.rd02 .pic{  width:100%; text-align:center}
.rd02 .txtbox .icon_list ul{  margin: 60px 0px 60px 0px; justify-content: center; flex-wrap: wrap;}
.rd02 .txtbox .icon_list ul li{  margin: 10px 20px; }
}
@media screen and (max-width: 768px) {
.rd02 .txtbox .title06 {  margin: 0 0 15px 0; }
}

.rd03 { width: 100%; }
.rd03 ul{ padding: 0; margin: 0px 0 0px 0; list-style: none;
display: flex;
  justify-content: space-between; flex-wrap: wrap; position: relative;
 }
.rd03 ul:before {
    content: "";
    left:50%;
    height: 500px;
    display: block;
    border-right: 1px solid rgba(255,255,255,0.20);  
    position: absolute;
}
.rd03 li {
  width:500px; height: 500px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  list-style: none;
}
.rd03 .txtbox {
  width: 100%; height: 100%;
  position: relative;
}
.rd03 li:hover {
  background: rgba(255,255,255,0.2);
}
.rd03 .txtbox figcaption {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: .5s ease;
}
.rd03 .txtbox figcaption.r_box01, .rd03 .txtbox figcaption.r_box02 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    text-align: center;
}
.rd03 .txtbox figcaption.r_box01 h2{
  color: #fff;
  font-family: var(--fontstyle01);
  font-weight: 100;
  font-size: var(--font-s23);
  letter-spacing: 8px;
  text-align: center;
  width: 100%;
  margin: 0px 0px 20px 0px;
  padding: 0;
}
.rd03 .txtbox figcaption.r_box01 h3{
  color: #fff;
  font-weight: normal;
  font-size: var(--font-s05);
  text-align: center;
  width: 100%;
  margin: 0px;
  padding: 0;
  letter-spacing: 3px;
}
.rd03 li:hover .txtbox figcaption.r_box01 {
  opacity: 0;
}
.rd03 .txtbox figcaption.r_box02{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;
  z-index: 9;
}
.rd03 li:hover .txtbox figcaption.r_box02{
  opacity: 1;
}
.rd03 .txtbox figcaption.r_box02 h2{
  color: #fff;
  font-family: var(--fontstyle01);
  font-weight: 100;
  font-size: var(--font-s11);
  letter-spacing: 8px;
  text-align: center;
  width: 100%;
  margin: 0px 0px 50px 0px;
  padding: 0;
  position: relative;
}
.rd03 .txtbox figcaption.r_box02 h2:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: calc(50% - 25px);
  display: block;
  width: 50px;
  height: 1px;
  background: rgba(255,255,255,0.5);
}
.rd03.rd06 .txtbox figcaption.r_box02 h2:after {
  content: '';
  left: 10%;
  width: 75%;
}
.rd03 .txtbox figcaption.r_box02 .r_list{
  color: #fff;
  font-size: var(--font-s03);
  width: 100%;
}
.rd03 .txtbox figcaption.r_box02 .r_list p{
  width: 100%; margin: 0px; padding:0px 0 10px 0; letter-spacing: 3px;
}
.rd03.rd06 .txtbox figcaption.r_box02 .r_list{
  text-align: left;
}
.rd03.rd06 .txtbox figcaption.r_box02 .r_list p{
  width: 100%; margin: 0px; padding:0px 0 0px 0; letter-spacing: 3px;
  display: flex; 
    justify-content: flex-start;
    align-items: center;
}
.rd03.rd06 .txtbox figcaption.r_box02 .r_list p:before{
  content: "\F272";
  font-family: bootstrap-icons ;
    display: block;
    font-weight: 100;
    font-style: normal;
    color: #fff;
    font-size: 14px;
    padding:0px 5px 0px 0;
}
@media screen and (max-width: 1300px) {
.rd03 ul:before {
    content: "";
    height: 450px;
}
.rd03 li {
  width:450px; height: 450px;
}
}
@media screen and (max-width: 1100px) {
.rd03 ul:before {
    content: "";
    height: 400px;
}
.rd03 li {
  width:400px; height: 400px;
}
.rd03 .txtbox figcaption.r_box01 h2{
  font-size: var(--font-s16);
}
}
@media screen and (max-width: 1050px) {
.rd03 .txtbox figcaption.r_box02 .r_list{
  font-size: var(--font-s01);
}
}
@media screen and (max-width: 900px) {
.rd03 ul:before {
    display: none;
}
.rd03 li {
  width:100%; height: 330px;
  border-bottom: 1px solid rgba(255,255,255,0.20); 
  margin:0px 0;
  padding:20px 0px;
}
.rd03 li:last-child{ border-bottom: none; }
.rd03 .txtbox figcaption.r_box02 h2{
  font-size: var(--font-s08);
  margin: 0px 0px 40px 0px;
}
.rd03 .txtbox figcaption.r_box02 .r_list p, .rd03.rd06 .txtbox figcaption.r_box02 .r_list p{
  padding:0px 0 0px 0;
}
}
@media screen and (max-width: 768px) {
.rd03 { width: 90%; margin: 0px auto;}
.rd03 li:hover {
  background: none;
}
.rd03 li .txtbox figcaption.r_box01 {
  animation: fade 6s infinite;
}
.rd03 li .txtbox figcaption.r_box02 {
  animation: fade02 6s infinite;
}
.rd03 li:nth-child(2) .txtbox figcaption.r_box01 {
  animation: fade03 6s infinite;
}
.rd03 li:nth-child(2) .txtbox figcaption.r_box02 {
  animation: fade04 6s infinite;
}
}
@media screen and (max-width: 490px) {
.rd03 li {
  height: 290px;
}
.rd03.rd06 li {
  height: 330px;
}
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade02 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade03 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade04 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.rd04 { width:100%; margin: 0px auto 0px auto;}
.rd04 ul{ margin:40px 0 0px 0px; padding: 0px; width:100%; list-style:none;
display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap; }
.rd04 ul:after {
    content: "";
    width:calc(100% / 3 - 40px);
}
.rd04 li{ margin:20px 0px 20px 0px; padding:0px; width:calc(100% / 3 - 40px); list-style:none; transition: all 0.6s;
 }
.rd04 li a{ display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; }
.rd04 li .pic{ width:100%; position: relative; overflow: hidden;  }
.rd04 li .pic img{ width:100%; margin: 0 0px -10px 0;
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;
}
.rd04 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);
}
.rd04 li .txtbox {
    width: 100%;
    padding: 0px;
    margin:20px 0px 0 0px;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    padding: 5px 0 5px 20px;
}
.rd04 li .txtbox h3 {
    width: 100%;
    margin: 0px 0 10px 0;
    padding: 0px 0 0px 0;
    color: var(--color-c04);
    font-size: var(--font-s04);
    font-weight: 600;
}
.rd04 li .txtbox p {
    width: 100%;
    color: var(--color-c04);
    font-weight: normal;
    padding: 0; margin: 0;
}
@media screen and (max-width: 1000px) {
.rd04 { padding:10% 0;}
}
@media screen and (max-width: 900px) {
.rd04 ul:after {
    content: "";
    width:calc(100% / 2 - 20px);
}
.rd04 li{ width:calc(100% / 2 - 20px); }
}
@media screen and (max-width: 580px) {
.rd04 li .txtbox {
    padding: 5px 0 5px 5%;
}
}
@media screen and (max-width: 580px) {
.rd04 ul:after {
    content: "";
    width:100%;
}
.rd04 li{ width:100%; margin:0px 0px 50px 0px;}
.rd04 li:last-child{ margin:0px 0px 0px 0px;}
}

.rd05 { width:100%; margin: 0px auto 0px auto; padding:0;
display: flex;
    justify-content: space-between;
    align-items: center;
}
.rd05 .pic{ width:calc(100% - 40%); margin: 0px 0px 0px 0px; padding:0 0 0 60px; text-align:center;}
.rd05 .pic img{ max-width:100%; }
.rd05 .txtbox{ width:40%; margin: 0px; padding:30px 60px 30px 0; border-right:1px solid rgba(255,255,255,0.1); }
.rd05 .txtbox .title06 h2{ margin: 0px 0px 30px 0px; color: #fff; letter-spacing:3px; }
.rd05 .txtbox p{ width:100%; margin: 0px; padding:0; color: #fff; line-height: 2;}
@media screen and (max-width: 1000px) {
.rd05 { flex-wrap: wrap;}
.rd05 .pic{ width:100%; padding:0 0 0 0px; }
.rd05 .txtbox{ width:100%; margin: 0px; padding:0px 0px 40px 0; border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); }
}
@media screen and (max-width: 768px) {
.rd05 .txtbox .title06 h2{ margin: 0px 0px 15px 0px; }
.rd05 .txtbox{ padding:0px 0px 15px 0; border-bottom:none;}
}

.rd07 { width:100%; margin: 0px auto 0px auto;}
.rd07 ul{ margin:0px 0 0px 0px; padding: 0px; width:100%; list-style:none;
display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap; }
.rd07 li{ margin:0px 0px 0px 0px; padding:0px; width:calc(100% / 2 - 5%); list-style:none; }
.rd07 > li:last-child{ margin:0px 0px 0px 0px; }
.rd07 li .title{ margin:0px 0px 20px 0px; padding:0px 0px 20px 0px; width:100%; border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: flex;
  justify-content: flex-start;
  align-items: center;
}
.rd07 li .title h2{ margin:0px 0px 0px 0px; padding:0px; width:100%; 
    color: var(--color-c04);
    font-size: var(--font-s09);
    font-weight: 600;
}
.rd07 li .title .icon{ width:60px; margin:0px 10px 0px 0px;}
.rd07 li .title .icon img{ width:100%; }
.rd07 li .txtbox{ width:100%; margin: 0px; padding:0; 
display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.rd07 li .txtbox ul{ width:calc(100% / 2 ); margin: 0px; padding:0 10px 0 10px; list-style:none;}
.rd07 li .txtbox.style01 ul{ width:100%; }
.rd07 li .txtbox ul li{ width:100%; margin: 0px 0px 10px 0px; padding:0; list-style:none;
color: var(--color-c05);
    display: flex;
  justify-content: flex-start;
  align-items: center;
  line-height: 2;
}
.rd07 li .txtbox ul li:before{ content: ""; 
  display: block;
  width: 2px;
  height: 17px; 
  background: #cbae5d;
  margin: 0px 10px 0px 0px;
}
@media screen and (max-width: 600px) {
.rd07 li{ width:100%; margin:0px 0px 40px 0px;}
.rd07 ul > li:last-child{ margin:0px 0px 0px 0px; }
}


/* -製程----------------------------------------------------------------------------------------------------*/
.process02 {  width:60%; margin: 0px auto; padding:0px 0 0px 0; }
.process02 .line_txt_box .txt{  line-height: 2; }
@media screen and (max-width: 1366px) {
.process02 {  width:70%; }
}
@media screen and (max-width: 1280px) {
.process02 {  width:80%; }
}
@media screen and (max-width: 1000px) {
.process02 {  width:100%; }
}

.process03 { width:100%; margin: 0px auto 0px auto; padding:0;
display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.process03 .pic{ width:calc(100% - 46%); margin: 0px 0px 0px 0px; padding:0 0 0 80px; text-align:center; border-left:1px solid rgba(255,255,255,0.1);}
.process03.wh01 .pic{ border-left:1px solid rgba(0,0,0,0.1); }
.process03 .pic img{ max-width:100%; border-radius: var(--border-radius01); }
.process03 .txtbox{ width:46%; margin: 0px; padding:30px 80px 30px 0;  }
.process03 .txtbox .title06 h2{ margin: 0px 0px 30px 0px; color: #fff;}
.process03.wh01 .txtbox .title06 h2, .process03.wh01 .txtbox p{ color: var(--color-c04);}
.process03 .txtbox p{ width:100%; margin: 0px; padding:0; color: #fff; line-height: 2;}
@media screen and (max-width: 1000px) {
.process03 { flex-wrap: wrap;}
.process03 .pic{ width:100%; padding: 40px 0 0 0px; border-left:none; border-top:1px solid rgba(255,255,255,0.1); }
.process03.wh01 .pic{ border-left:none; border-top:1px solid rgba(0,0,0,0.1); }
.process03 .txtbox{ width:100%; margin: 0px; padding:0px 0px 40px 0; }
}
@media screen and (max-width: 768px) {
.process03 .txtbox .title06 h2{ margin: 0px 0px 15px 0px; }
.process03 .pic{ padding: 0px 0 0 0px;border-top:none; }
.process03.wh01 .pic{ border-top:none; }
.process03 .txtbox{ padding:0px 0px 15px 0; }
.process03.space01{ padding:15% 0px; }
}

/* -服務-----------------------------------------------------------------------------------------------------*/
.serve01 {  width:100%; margin: 0px; padding:0px 0 0px 0; display: flex;  justify-content: space-between; align-items: center;}
.serve01 .logo{  width:200px; margin: 0px 80px 0px 0px; padding:0px 0 0px 0; }
.serve01 .logo img{  width:100%; }
.serve01 .line_txt_box .txt { padding: 20px 0 20px 80px;
    line-height: 2;
}
@media screen and (max-width: 1000px) {
.serve01 .logo{  margin: 0px 60px 0px 0px; }
.serve01 .line_txt_box .txt { padding: 20px 0 20px 60px;
}
}
@media screen and (max-width: 800px) {
.serve01 { flex-wrap: wrap;}
.serve01 .logo{  width:100%; text-align:center; margin: 0px 0px 0px 0px;}
.serve01 .logo img{  width:100px; }
.serve01 .line_txt_box .txt { padding: 20px 0 20px 33px;}
}
@media screen and (max-width: 700px) {
.serve01 .line_txt_box .txt { padding: 0px 0 0px 5%;}
}

/* -關於民盛-------------------------------------------------------------------------------------------------*/
.ind_about.about01 {  padding: 0 0; }
.ind_about.about01 .txtbox{
    width: 450px; border-right: 1px solid rgba(0,0,0,0.1);
}
.ind_about.about01 .txtbox .txt{ display: none;}
.ind_about.about01 .txtbox .icon_box ul li .numbox .num {
    font-size: var(--font-s15);
}
.ind_about.about01 .txtbox .icon_box ul { width:100%; justify-content: flex-start;}
.ind_about.about01 .txtbox .icon_box ul li{ width:240px; }
.ind_about.about01 .txtbox .icon_box ul li:nth-child(2){ width:auto; }
.ind_about.about01 .line_txt_box .txt {
    line-height: 1.8;
}
.ind_about.about01 .pic{
    border-left: none;
}
.ind_about.about01 .txtbox02{ width:calc(100% - 450px); margin: 0px 0 0 0; padding:0 0 0 0px; }
.ind_about.about01 .txtbox02 .txt{ width:100%; margin: 0px 0 0 0; padding:0px 0 0px 80px; color: var(--color-c05);
    line-height: 1.8;
}
@media screen and (max-width: 1000px) {
.ind_about.about01 {  flex-wrap: wrap; }
.ind_about.about01 .txtbox{  margin: 0 0 40px 0; padding:0 0 0px 0px;
    width: 100%; border-right: none; 
}
.ind_about.about01 .txtbox .txt{ display: block; width:100%; margin: 40px 0 0 0; padding:0px 0 0px 0px; color: var(--color-c05);
    line-height: 1.8;
}
.ind_about.about01 .txtbox02 {
    width: 100%; 
}
.ind_about.about01 .txtbox02 .txt{ display: none; }
.ind_about.about01 .txtbox .icon_box {width: 100%; }

.ind_about.about01 .txtbox .icon_box ul li{ width:160px !important;}
.ind_about.about01 .txtbox .icon_box ul{ justify-content: center;}
}
@media screen and (max-width: 500px) {
.ind_about.about01 .txtbox .icon_box ul li{ width:120px !important;}
.ind_about.about01 .txtbox .icon_box ul li:nth-child(2){ margin:0 0 0 10%;}
}

.about02 {  width:100%; margin: 0px; }
.about02 .pic{  width:100%; text-align: center; }
.about02 .pic img{  max-width:100%; }
@media screen and (max-width: 1300px) {
.about02 .pic img { max-width: 80%; }
}
@media screen and (max-width: 1000px) {
.about02 {  padding-bottom: 10%; }
}

.about03 .line_txt_box .txt{  line-height: 2; }
.about03 .iconlist_box{  width:100%; margin: 50px 0px 0px 0px; padding:0px 0 0px 0; position: relative;}
.about03 .iconlist_box:before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}
.about03 .iconlist_box ul{  width:100%; margin: 0px; padding: 0px 0 0px 33px; list-style: none; display: flex;  justify-content: space-between; align-items: center; flex-wrap: wrap;}
.about03 .iconlist_box ul:after {
    content: "";
    width:calc(100% / 3 - 80px);
}
.about03 .iconlist_box ul li{  width:calc(100% / 3 - 80px); margin: 20px 0 20px 0; padding:0px 0 0px 0; list-style: none; display: flex;  justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.about03 .iconlist_box ul li .text_box{  width:auto; position: relative;}
.about03 .iconlist_box ul li h3{  width:100%; margin: 0px 0 15px 0; padding:0px 0 0px 0; letter-spacing: 7px;
font-family: var(--fontstyle01);
    font-weight: 500;
    color: var(--color-c04);
    font-size: var(--font-s10);
}
.about03 .iconlist_box ul li h4{  width:100%; margin: 0px 0 0px 0; padding:0px 0 0px 0; 
font-family: var(--fontstyle01); line-height: 1.7;
    font-weight: 100;
    color: var(--color-c04);
    font-size: var(--font-s01);
}
.about03 .iconlist_box ul li .icon{  width:auto; margin: 0px 0 0px 0; padding:0px 0 0px 0; position: absolute; right: 0; bottom:0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap; 
}
.about03 .iconlist_box ul li .icon span{  width:auto; margin: 0px 10px 0px 0; padding:0px 0 0px 0;}
.about03 .iconlist_box ul li .icon span img{  width:58px; }
@media screen and (max-width: 1300px) {
.about03 .iconlist_box ul:after {
    content: "";
    width:calc(100% / 3 - 40px);
}
.about03 .iconlist_box ul li{  width:calc(100% / 3 - 40px); }
.about03 .iconlist_box ul li h3{  
    font-size: var(--font-s08);
}
.about03 .iconlist_box ul li .icon span img{  width:50px; }
}
@media screen and (max-width: 1050px) {
.about03 .iconlist_box ul li h3{  letter-spacing: 2px;}
.about03 .iconlist_box ul li h4{  line-height: 2;}
.about03 .iconlist_box ul li .text_box{  width:100%;}
.about03 .iconlist_box ul li .icon span img{  width:40px; }
.about03 .line_txt_box .txt { line-height: 2.4;}
}
@media screen and (max-width: 1100px) {
.about03 .iconlist_box ul li h3{  
    font-size: var(--font-s06);
}
}
@media screen and (max-width: 900px) {
.about_cus01 {  display: none; }
}
@media screen and (max-width: 700px) {
.about03 .iconlist_box { margin: 30px 0px 0px 0px;}
.about03 .iconlist_box ul{ padding: 0px 0 0px 5%;}
.about03 .iconlist_box ul li h3{  
    font-size: var(--font-s04); 
}
.about03 .iconlist_box ul:after {
    content: "";
    width:calc(100% / 2 - 30px);
}
.about03 .iconlist_box ul li{  width:calc(100% / 2 - 30px); margin: 0px 0 20px 0;}
.about03 .iconlist_box ul li:nth-child(5), .about03 .iconlist_box ul li:nth-child(6){  margin: 0px 0 0px 0;}
.about03 .iconlist_box ul li .icon span {
    margin: 0px 5px 0px 0;
}
.about03 .line_txt_box {
    margin: 30px 0 0 0;
}
}
@media screen and (max-width: 650px) {
.about03 .iconlist_box ul li h3{  letter-spacing: 0px;}
.about03 .iconlist_box ul li .icon span {
    margin: 0px 0px 0px 0;
}
.about03 .iconlist_box ul li .icon span img{  width:30px; }
}
@media screen and (max-width: 450px) {
.about03 .iconlist_box ul:after {
    content: "";
    width:calc(100% / 2 - 15px);
}
.about03 .iconlist_box ul li{  width:calc(100% / 2 - 15px); }
}


.about_cus02 {  display: none; }
.about03-2 .line_txt_box .txt{  line-height: 2; }
.about03-2 .iconlist_box{  width:100%; margin: 50px 0px 0px 0px; padding:0px 0 0px 0; position: relative;}
.about03-2 .iconlist_box:before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}
.about03-2 .iconlist_box ul{  width:100%; margin: 0px; padding: 0px 0 0px 33px; list-style: none; display: flex;  justify-content: space-between; align-items: center; flex-wrap: wrap;}
.about03-2 .iconlist_box ul:after {
    content: "";
    width:calc(100% / 3 - 80px);
}
.about03-2 .iconlist_box ul li{  width:calc(100% / 3 - 80px); margin: 20px 0 20px 0; padding:0px 0 0px 0; list-style: none; display: flex;  justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.about03-2 .iconlist_box ul li .text_box{  width:auto; position: relative;}
.about03-2 .iconlist_box ul li h3{  width:100%; margin: 0px 0 15px 0; padding:0px 0 0px 0; letter-spacing: 7px;
font-family: var(--fontstyle01);
    font-weight: 500;
    color: var(--color-c04);
    font-size: var(--font-s10);
}
.about03-2 .iconlist_box ul li h4{  width:100%; margin: 0px 0 0px 0; padding:0px 0 0px 0; 
font-family: var(--fontstyle01); line-height: 1.7;
    font-weight: 100;
    color: var(--color-c04);
}
.about03-2 .iconlist_box ul li .icon{  width:auto; margin: 0px 0 0px 0; padding:0px 0 0px 0; 
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap; 
}
.about03-2 .iconlist_box ul li .icon span{  width:auto; padding:0px 0 0px 0;}
.about03-2 .iconlist_box ul li .icon.up span{  margin: -30px 10px 0px 0;}
.about03-2 .iconlist_box ul li .icon.up span img, .about03-2 .iconlist_box ul li .icon span img{  width:50px; }
@media screen and (max-width: 1300px) {
.about03-2 .iconlist_box ul:after {
    content: "";
    width:calc(100% / 3 - 40px);
}
.about03-2 .iconlist_box ul li{  width:calc(100% / 3 - 40px); }
.about03-2 .iconlist_box ul li h3{  
    font-size: var(--font-s08);
}
.about03-2 .iconlist_box ul li .icon.up span img,.about03-2 .iconlist_box ul li .icon span img{  width:50px; }
}
@media screen and (max-width: 1050px) {
.about03-2 .iconlist_box ul li h3{  letter-spacing: 4px;}
.about03-2 .iconlist_box ul li h4{  font-size: var(--font-s00);}
.about03-2 .iconlist_box ul li .text_box{  width:100%;}
.about03-2 .iconlist_box ul li .icon.up span img, .about03-2 .iconlist_box ul li .icon span img{  width:40px; }
}
@media screen and (max-width: 1100px) {
.about03-2 .iconlist_box ul li h3{  
    font-size: var(--font-s06);
}
}
@media screen and (max-width: 900px) {
.about_cus02 {  display: flex;  justify-content: center; align-items: center; }
}
@media screen and (max-width: 700px) {
.about03-2 .iconlist_box ul{  padding: 0px 0 0px 5%;}
.about03-2 .iconlist_box ul li h3{  
    font-size: var(--font-s04); 
}
.about03-2 .iconlist_box ul:after {
    content: "";
    width:calc(100% / 2 - 30px);
}
.about03-2 .iconlist_box ul li{  width:calc(100% / 2 - 30px); }
.about03-2 .iconlist_box ul li .icon.up span {
    margin: -30px 5px 0px 0;
}
}
@media screen and (max-width: 650px) {
.about03-2 .iconlist_box ul li h3{  letter-spacing: 0px;}
.about03-2 .iconlist_box ul li .icon.up span {  margin: -30px 0px 0px 0;}
.about03-2 .iconlist_box ul li .icon.up span img, .about03-2 .iconlist_box ul li .icon span img{  width:30px; }
}
@media screen and (max-width: 450px) {
.about03-2 .iconlist_box ul:after {
    content: "";
    width:calc(100% / 2 - 15px);
}
.about03-2 .iconlist_box ul li{  width:calc(100% / 2 - 15px); }
}

.about04 { width:100%; margin: 0px; padding:0px 0 0px 0;}
.about04 ul{ margin:20px 0 0px 0px; padding: 0px; width:100%; list-style:none;
display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap; }
.about04 ul:after {
    content: "";
    width:calc(100% / 4 - 25px);
}
.about04 li{ margin:15px 0px 15px 0px; padding:0px; width:calc(100% / 4 - 25px); list-style:none; transition: all 0.6s;
 }
.about04 li .pic{ width:100%; position: relative; overflow: hidden; margin: 0px 0px 20px 0px;}
.about04 li .pic img{ width:100%; margin: 0 0px -10px 0;
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;
}
.about04 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);
}
.about04 li .txtbox{ border-left:1px solid rgba(0,0,0,0.1); margin: 0px 0px 0px 0px; padding:5px 0 8px 15px;}
.about04 li .txtbox .title10{ margin: 0px 0px 3px 0px; letter-spacing:2px; border-left:none; justify-content: flex-start;}
.about04 li .txtbox .title10 h2 {
    padding: 0 0 0 0px;
}
.about04 li .txtbox .title10 .icon{ width:auto; }
.about04 li .txtbox .title10 .icon span{ margin: 0px 0px 0px 10px;}
.about04 li .txtbox .title10 .icon img{ width:27px; }
.about04 li .txtbox p {
    width: 100%;
    font-size: var(--font-s01);
    color: var(--color-c05);
    font-weight: normal;
    padding: 0; margin: 0;
}
@media screen and (max-width: 1150px) {
.about04 ul:after {
    width:calc(100% / 4 - 15px);
}
.about04 li{ width:calc(100% / 4 - 15px);  }
}
@media screen and (max-width: 1000px) {
.about04 { padding:10% 0;}
.about04 ul:after {
    width:calc(100% / 2 - 15px);
}
.about04 li{ width:calc(100% / 2 - 15px); margin: 20px 0px 20px 0px;}
.about04 li .txtbox .title10{ margin: 0px 0px 15px 0px; }
}
@media screen and (max-width: 700px) {
.about04 li .txtbox{ padding:0px 0 0px 5%;}
.about04 li .txtbox .title10{ margin: 0px 0px 7px 0px; }
.about04 li .txtbox p {
    font-size: var(--font-f00);
}
}
@media screen and (max-width: 600px) {
.about04 li .txtbox .title10 .icon img{ width:20px; }
.about04 li .txtbox .title10 .icon span {
    margin: 0px 0px 0px 3px;
}
.about04 li .txtbox .title10 h2 {
    padding: 0 5px 0 0px;
}
}

.about05 {
    width: 100%; 
    background: url(../images/demo/about_banner02.jpg) no-repeat center center; 
    background-size: cover;

    display: flex;
    justify-content: center;
    align-items: center;
}
.about05 .pic{
    width: calc(100% - 45% - 6%); padding: 0 6% 0 0; margin:0 6% 0px 0; border-right: 1px solid rgba(0,0,0,0.1);
}
.about05 .pic img{
    width: 100%;
}
.about05 .box-1{
    display: flex;
    justify-content: center;
    align-items: center;
}
.about05 .txtbox{
    width: 50%; text-align: center;
}
.about05 .txtbox h3 {
    width: 100%; 
    font-size: var(--font-s10);
    color: var(--color-c04);
    margin: 20px 0px 40px 0px;
    font-family: var(--fontstyle01);
}
.about05 .txtbox p {
    width: 100%; 
    color: var(--color-c05);
    margin: 0px 0px 0px 0px;
    line-height: 2;
}
@media screen and (max-width: 1050px) {
.about05 {  flex-wrap: wrap; }
.about05 .pic{
    width: 100%; padding: 0 0 0 0; margin:0 0 30px 0; border-right: none;
}
.about05 .txtbox{
    width: 100%; 
}
.about05 .txtbox h3 {
    font-size: var(--font-s07);
}
}
@media screen and (max-width: 768px) {
.about05 .title02 h2 {
    letter-spacing: 5px;
    font-size: var(--font-s11);
}
}

.about06 { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; }
.about06 ul{ width:100%; margin: 0px 0px 90px 0px; padding:0 0 0 10%; list-style: none; 
display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.about06 ul li{ width:calc(100% / 3 - 20px); margin:50px 0 0px 0px; padding:0 0 0 0; list-style: none; }
.about06 ul li .title{ width:100%; margin: 0px 0px 10px 0px; padding:0 0 0 0; text-align: left; color: var(--color-c05); letter-spacing: 3px;
display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.about06 ul li .name{ width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 0;
}
.about06 ul li .name h3{ width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 0; font-size:var(--font-s10); color: var(--color-c04); font-weight: 600;  text-align: left; letter-spacing: 3px;}
.about06 p{ width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 10%; color: var(--color-c05); line-height: 2; }
@media screen and (max-width: 1024px) {
.about06 ul:after {
    content: "";
    width:calc(100% / 3 - 20px);
}
.about06 ul li{ width:calc(100% / 3); }
}
@media screen and (max-width: 1050px) {
.about06 ul { padding:0 0 0 0; margin: 0px 0px 50px 0px;}
.about06 p{ padding:0 0 0 0; }
.about06 ul li .name h3{ font-size:var(--font-s07); }
}
@media screen and (max-width: 700px) {
.about06 ul {
    justify-content: space-between;
}
.about06 ul li:nth-child(3n) { width:27%; }
}
@media screen and (max-width: 600px) {
.about06 ul li:nth-child(1) .title, .about06 ul li:nth-child(2) .title, .about06 ul li:nth-child(3) .title{
height: 48px;
}
.about06 ul li .title{
    flex-wrap: wrap;
}
.about06 ul li .title div{
    width:100%;
}
}
@media screen and (max-width: 300px) {
.about06 ul li{ width:calc(100% / 2); }
}

.about07 { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; }
.about07 .pic{ width:100%; text-align:center}
.about07 .pic img{ max-width:100%; }

.about08 { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; display: flex;  justify-content: space-between; align-items: flex-start; z-index:2;}
.about08 .a_text{ width:calc(100% - 32%); margin: 0px 0px 0px 0px; padding:0 6% 0 0; }
.about08 .a_text ul{ width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 0; list-style: none; }
.about08 .a_text ul li{ width:100%; margin: 0px 0px 50px 0px; padding:0 0 0 0; list-style: none; display: flex;  justify-content:space-between; align-items: flex-start;}
.about08 .a_text ul li:last-child{ margin: 0px 0px 0px 0px; }
.about08 .a_text ul li .yearbox{ width:150px; display: flex;  justify-content: center; align-items: center; flex-wrap: wrap;}
.about08 .a_text ul li .yearbox .year{ width:100%; margin: 0px 0; padding:0 0 0 0; letter-spacing: 5px; text-align: center;
font-size:var(--font-s20); font-weight: 300; color: #fff;
  font-family: var(--fontstyle01);
}
.about08 .a_text ul li .yearbox .line{ width:5px; margin: 5px 0 10px 0;
height:70px; display: block; background:#fff;}
.about08 .a_text ul li .line_txt_box{ width:calc(100% - 150px); margin: 0px 0 0 0;}
.about08 .a_text ul li .line_txt_box:before {
    background: rgba(255, 255, 255, 0.3);
}
.about08 .a_text ul li .line_txt_box .txt{ margin: 0px 0 0 0; padding:15px 0 15px 33px; }
.about08 .a_text ul li .line_txt_box .txt h2{ margin: 0px 0 10px 0; padding:0px 0 0px 0px; color: rgba(255, 255, 255, 1); font-size:var(--font-s09); line-height:1.5;}
.about08 .a_text ul li .line_txt_box .txt p{ margin: 0px 0 0 0; padding:0px 0 0px 0px; color: rgba(255, 255, 255,0.8); font-size:var(--font-s03); line-height:2;}

.about08 .pic{ width:32%; margin: 0px 0px 0px 0px; padding:0 0 0 0; }
.about08 .pic ul{ width:100%; margin: 0px 0px 0px 0px; padding:10px 0; list-style: none; background:rgba(255, 255, 255,0.5);}
.about08 .pic ul li{ width:100%; margin: 0px 0px 0px 0px; padding:10px 20px; list-style: none; }
.about08 .pic ul li img{ width:100%; }
.about08 .pic ul li img:hover{ -webkit-filter:grayscale(1);}
@media screen and (max-width: 1100px) {
.about08 .a_text ul li{ margin: 0px 0px 20px 0px; }
.about08 .a_text ul li:last-child{ margin: 0px 0px 20px 0px; }
.about08 .a_text ul li .line_txt_box{ width:calc(100% - 130px); }
.about08 .a_text ul li .line_txt_box .txt{ padding:8px 0 8px 20px; }

.about08 .a_text ul li{ flex-wrap: wrap;}
.about08 .a_text ul li .yearbox { width:100%; flex-wrap: nowrap; justify-content: flex-start; padding: 00px 0 00px 20px;}
.about08 .a_text ul li .yearbox .line{ width:60px; margin: 0px 10px;
height:5px; }
.about08 .a_text ul li .yearbox .year{ width:auto; text-align: left; font-size:var(--font-s13); margin: 0px 0;}
.about08 .a_text ul li .line_txt_box .txt h2 { font-size: var(--font-s08); }
.about08 .a_text ul li .line_txt_box .txt p{ font-size:var(--font-s02);}
.about08 .a_text ul li .line_txt_box{ width:100%; }
}
@media screen and (max-width: 1050px) {
.about08 .a_text ul li .yearbox .year { font-size: var(--font-s12); }
.about08 .a_text ul li .line_txt_box .txt h2 { font-size: var(--font-s06); }
.about08 .a_text ul li .line_txt_box .txt p{font-size:var(--font-s01);}

}
@media screen and (max-width: 800px) {
.about08 { flex-wrap: wrap;}
.about08 .a_text{ width:100%; padding:0 0px 0 0;}
.about08 .pic{ width:100%; }
}

/* -人才招募-------------------------------------------------------------------------------------------------*/
.join {  width:100%; margin: 0px; padding:0px 0 0px 0; }
.join .pic{  width:100%; }
.join .pic img{  width:100%; border-radius: var(--border-radius01); }
.join02 {  width:100%; margin: 0px; padding:0px 0 0px 0; }
.join02 ul{  width:100%; margin: 0px; padding:0px 0 0px 0; list-style: none; }
.join02 ul li{  width:100%; margin: 0px 0 12% 0; padding:0px 0 0px 0; list-style: none; display: flex;  justify-content: center; align-items: center;}
.join02 ul li:last-child{  margin: 0px 0 0px 0; }
.join02 ul li .title06{  width:20%; margin: 0px; padding:0px 0 0px 0; list-style: none; }
.join02 ul li .line_txt_box{  width:80%; margin: 0px; line-height: 2;}
.join02 ul li .line_txt_box .txt{  margin: 0px; padding:0px 0 0px 10%; font-size:var(--font-s03); color: var(--color-c05); }
.join02 ul li .line_txt_box .icon_list{  width:100%; margin: 0px; padding:0px 0 0px 0; }
.join02 ul li .line_txt_box .icon_list{  width:100%; margin: 0px; padding:0px 0 0px 0; }
.join02 ul li .line_txt_box .icon_list ul{  width:100%; margin: 15px 0px 0px 0px; padding:0px 0 0px 0; list-style: none; display: flex; justify-content: space-between; align-items: center;}
.join02 ul li .line_txt_box .icon_list ul li{  width:calc(100% / 5 - 20px); margin: 15px 0; padding:0px 0 0px 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.join02 ul li .line_txt_box .icon_list ul li .icon {
    width: 58px;
    margin: 0px 0px 0px 0px;
    padding: 0;
}
.join02 ul li .line_txt_box .icon_list ul li .icon img{ width:100%;  }
.join02 ul li .line_txt_box .icon_list ul li .itxt{ width: 100%; padding: 0 0px 0px 0px; }
.join02 ul li .line_txt_box .icon_list ul li .itxt h4{ width: 100%; padding: 0 0px 0px 0px; margin: 10px 0px 0px 0px; font-weight: normal; color: var(--color-c05);  text-align:center;}
@media screen and (max-width: 900px) {
.join02 ul li{ flex-wrap: wrap;}
.join02 ul li .title06{  width:100%; margin: 0px 0px 30px 0px;}
.join02 ul li .line_txt_box{  width:100%; }
.join02 ul li .line_txt_box .txt{  width:100%; padding:10px 0 10px 33px;}
.join02 ul li .line_txt_box .icon_list ul{  flex-wrap: wrap;}
.join02 ul li .line_txt_box .icon_list ul li{  width:calc(100% / 2); }
}

.join04 {  width:100%; margin: 0px; padding:0px 0 0px 0; }
.join04 > ul{  width:100%; margin: 80px 0 0px 0; padding:0px 0 0px 30px; list-style: none; }
.join04.process05 > ul{  margin: 0px 0 0px 0; }
.join04 > ul > li{  width:100%; margin: 0px 0 0px 0; padding:0px 0 0px 0; list-style: none; display: flex; align-items: stretch;}
.join04 > ul > li .titlebox{  width:30px; margin: 0px 0 0px 0; padding:0px 0 0px 0; position: relative; 
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
display: flex;  justify-content: center; align-items: center; 
}
.join04.process05 > ul > li .titlebox{  min-height: 300px;}
.join04 > ul > li .titlebox span {
    font-size: var(--font-s04);
    color: var(--color-c04);
    font-weight: normal;
    padding: 10px 0px 10px 0px;
    background: #f5f6f7;
    letter-spacing: 20px;
    z-index: 2;
    position: absolute;
    top: 35px;
}
.join04.process05.serve03 > ul > li .titlebox.wh01 span{ background: #fff;}
.join04 > ul > li .titlebox:before{ content: '';
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); 
}
.join04 > ul > li .titlebox h5{  margin: 0px 0 0px 0; padding:0px 0 0px 0;
}
.join04 ul li .infobox{  width:calc(100% - 30px); margin: 0px 0 0px 0; padding:0px 0 0px 100px; }
.join04.serve03 ul li .infobox{  padding:0px 0 0px 50px; }
.join04 ul li .infobox > ul{  width:100%; margin: 0px 0px 0px 0px; padding:0px 0 0px 0; list-style: none; display: flex;  justify-content: flex-start; align-items: flex-start; }
.join04.j04 ul li .infobox > ul{  padding:0px 0 0px 9%; }
.join04.process05 ul li .infobox > ul{  width:100%; justify-content: center; }
.join04 ul li .infobox > ul > li{  width:270px; margin: 0px 0 40px 0; padding:0px 60px 0px 0; list-style: none; display: flex;  justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.join04.process05 .infobox > ul > li{  width:auto; }
.join04 ul li .infobox ul li .info_tt{  width:100%; margin: 0px 0 0px 0; padding:0px 0 0px 0; }
.join04 ul li .infobox ul li .info_tt h3{  width:100%; margin: 0px 0 10px 0; padding:0px 0 0px 0; 
color: var(--color-c04);
    font-size: var(--font-s07);
    font-weight: 600;
}
.join04 ul li .infobox ul li .info_tt h4{  width:100%; margin: 0px 0 0px 0; padding:0px 0 0px 0; 
color: var(--color-c04); font-size: var(--font-s02);
    font-weight: 600;
}
.join04 ul li .infobox ul li .info_txt{  width:100%; margin: 20px 0 0px 0; padding:0px 0 0px 0; }
@media screen and (max-width: 1400px) {
.join04.j04 ul li .infobox > ul{  padding:0px 0 0px 0; }
}
@media screen and (max-width: 1200px) {
.join04 ul li .infobox > ul{ flex-wrap: wrap; justify-content: flex-start;}
.join04.process05 ul li .infobox > ul{  justify-content: flex-start; }
.join04 ul li .infobox > ul > li{ width:calc(100% / 3); }
.join04.process05 .infobox > ul > li{  width:calc(100% / 3); }
}
@media screen and (max-width: 1000px) {
.join04 ul li .infobox ul li .info_tt h3{ 
font-size: var(--font-s05);
}
.join04 ul li .infobox ul li .info_tt h4{ 
font-size: var(--font-s01);
}

.join04 ul li .infobox{  padding:0px 0 0px 60px; }
.join04 ul li .infobox ul li .info_txt{  margin: 0px 0 0px 0; }
.join04 > ul{  padding:0px 0 0px 0px;}
}
@media screen and (max-width: 768px) {
.join04 > ul{  margin: 60px 0 0px 0; }
.join04 ul li .infobox > ul > li{ width:calc(100% / 2); }
.join04.process05 .infobox > ul > li{  width:calc(100% / 2); }
}
@media screen and (max-width: 600px) {
.join04 > ul > li{  align-items: flex-start; flex-wrap: wrap;}
.join04 > ul > li .titlebox{  width:100%; height: 30px; margin: 0px 0 30px 0;
-webkit-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
display: flex;  justify-content: flex-start; align-items: center; 
}
.join04 > ul > li .titlebox span {
    padding: 0px 10px 0px 0px;
    top: 0px; 
}
.join04.process05 > ul > li .titlebox{  min-height: auto;}
.join04 > ul > li .titlebox:before{ content: '';
    width: 100%;
    height: 1px;
}
.join04 ul li .infobox{  width:100%; padding:0px 0 0px 0px; }
.join04.serve03 ul li .infobox{  padding:0px 0 0px 0px; }
.join04 > ul{  margin: 40px 0 0px 0; }
}
@media screen and (max-width: 400px) {
.join04 ul li .infobox > ul > li{ margin: 0px 0 30px 0;}
}

.join05 { width:100%; margin: 0px; padding:0px 0 0px 0; display: flex;  justify-content: flex-start; align-items: stretch; }
.join05 .tw{ width:30%; margin: 0px; padding:0 0px; background: #eae7e3;}
.join05 .tw ul{ width:100%; margin: 0px 0 0px 0; padding:40px 40px; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.join05 .tw ul li{ width:100%; margin: 30px 0px 30px 0px; padding:0px 0 0px 0; list-style: none; display: flex; justify-content: space-between; align-items: flex-start;}
.join05 .tw ul li .tt{ width:70px; margin: 0px 0 0px 0; padding:0px 0 0px 0; font-size:var(--font-s04); color: var(--color-c04);
position: relative;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
}
.join05 .tw ul li .tt span{ border-right: 1px solid rgba(0,0,0,0.1); padding:0px 10px 0px 0; margin: 0px 0 0px -10px; letter-spacing:6px;}
.join05 .tw ul li .txt{ width:calc(100% - 70px); }
.join05 .tw ul li .txt .pic{ width:100%; }
.join05 .tw ul li .txt .pic img{ width:100%; }
.join05 .tw ul li .infobox{  width:100%; margin: 0px 0 0px 0; padding:0px 0 0px 0; color: var(--color-c05);}
.join05 .tw ul li .infobox p {
    width: 100%;
    margin: 8px 0 0px 0;
    padding: 0px 0 0px 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    word-break: break-all
}

.join05 .tan{  width:calc(100% - 30%); margin: 0px; padding:0px 0 0px 12%; }
.join05 .tan ul{  width:100%; margin: 0px; padding:30px 0 30px 0; list-style:none;
display: flex; 
  justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.join05 .tan ul li{  width:calc(100% / 2 - 60px); margin: 50px 0px 50px 0px; padding:0px 0 0px 0; list-style:none;
display: flex;
    justify-content: space-between;
    align-items: flex-start; flex-wrap: wrap;
}
.join05 .tan ul li .pic{ width:100%; }
.join05 .tan ul li .pic img{ width:100%; }
.join05 .tan ul li .title10{ margin: 15px 0px 8px 0px; letter-spacing:2px;}
.join05 .tan ul li .title10 .icon{  }
.join05 .tan ul li .title10 .icon img{ width:38px; }
.join05 .tan ul li .infobox{  width:100%; margin: 0px; padding:0px 0 0px 18px; color: var(--color-c05);}
.join05 .tan ul li .infobox p{  width:100%; margin: 8px 0 0px 0; padding:0px 0 0px 0; display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    word-break: break-all
}
@media screen and (max-width: 1200px) {
.join05 { flex-wrap: wrap; }
.join05 .tw{ width:100%; }
.join05 .tw ul{ width:100%; margin: 0px 0 0px 0; padding:40px; flex-wrap: nowrap; justify-content: space-between;}
.join05 .tw ul li{ width:calc(100% / 2 - 30px); margin: 0px 0px 0px 0px; flex-wrap: wrap;}

.join05 .tw ul li .tt{ width:100%; border-left: 1px solid rgba(0,0,0,0.1); margin: 0px 0 20px 0;
-webkit-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
display: flex;  justify-content: flex-start; align-items: center; 
}
.join05 .tw ul li .tt span{ border-right: none; margin: 0px 0 0px 0px; padding: 0 0 0 15px;}
.join05 .tw ul li .txt{ width:100%;  }


.join05 .tan{  width:100%; padding:0px 0 0px 0px; }
.join05 .tan ul{  padding:40px; }
.join05 .tan ul li{  margin: 30px 0px 30px 0px; }
}
@media screen and (max-width: 900px) {
.join05 .tw ul li{ width:calc(100% / 2 - 20px); }
.join05 .tan ul li {
    width: calc(100% / 2 - 20px);
    margin: 30px 0px 30px 0px;
}
.join05 .tan ul{  padding:30px; }
}
@media screen and (max-width: 650px) {
.join05 .tw ul{ flex-wrap: wrap; }
.join05 .tw ul li{ width:100%; margin: 30px 0px 30px 0px;}
.join05 .tan ul li {
    width: 100%;
}
}

.join06{  width:100%; margin: 0px; padding:0px 0 0px 0; }
.join06 ul{ padding: 0; margin: 40px 0 0 0; list-style: none;
column-count: 3;
  column-gap: 20px;
 }
.join06 li{ margin:0px 0px 20px 0px; width:100%; list-style:none; height: auto; overflow: hidden;  transition: all 0.6s; 
  display: flex;
}
.join06 li .pic{ width: 100%; height: auto; overflow: hidden; }
.join06 li .pic img{ margin: 0 0px 0px 0 ;
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;
  
max-width: 100%;
  height: auto;
}
.join06 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);
}
@media screen and (max-width: 800px) {
.join06 li{ margin:0px 0px 15px 0px; }
.join06 ul{ column-count: 2; column-gap: 15px;}
}
@media screen and (max-width: 500px) {
.join06 li{ margin:0px 0px 10px 0px; }
.join06 ul{ column-gap: 10px;}
}

.join06-2{  width:100%; margin: 0px; padding:0px 0 0px 0; }
.join06-2 ul{ padding: 0; margin: 40px 0 0 0; list-style: none;
column-count: 2;
  column-gap: 20px;
 }
.join06-2 li{ margin:0px 0px 20px 0px; width:100%; list-style:none; height: auto; overflow: hidden;  transition: all 0.6s; 
  display: flex;
}
.join06-2 li .pic{ width: 100%; height: auto; overflow: hidden; }
.join06-2 li .pic img{ margin: 0 0px 0px 0 ;
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;
  
max-width: 100%;
  height: auto;
}
.join06-2 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);
}
@media only screen and (min-width: 0px) and (max-width: 800px) {
.join06-2 ul{ column-count: 2; }
}


.join07{  width:100%; margin: 0px; padding:0px 0 0px 0; }
.join07 ul{ padding: 0; margin: 40px 0 0 0; list-style: none;
display: flex;  justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;
 }
.join07 li{ margin:0px 0px 20px 0px; width:100%; list-style:none; height: auto; overflow: hidden;  transition: all 0.6s; 
  display: flex; 
}
.join07 li.fifth{ width:calc(50% - 10px); margin:0px 10px 20px 0px;}
.join07 li.fifth02{ width:calc(50% - 10px); margin:0px 0 20px 10px;}
.join07 li .pic{ width: 100%; height: auto; overflow: hidden; }
.join07 li .pic img{ margin: 0 0px 0px 0 ;
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;
  
max-width: 100%;
  height: auto;
}
.join07 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);
}
@media screen and (max-width: 800px) {
.join07 li.fifth{ width:calc(50% - 15px); margin:0px 15px 15px 0px;}
.join07 li.fifth02{ width:calc(50% - 15px); margin:0px 0 15px 15px;}
.join07 li{ margin:0px 0px 15px 0px; }
}
@media screen and (max-width: 500px) {
.join07 li.fifth{ width:calc(50% - 5px); margin:0px 5px 10px 0px;}
.join07 li.fifth02{ width:calc(50% - 5px); margin:0px 0 10px 5px;}
.join07 li{ margin:0px 0px 10px 0px; }
}

.join08 { width:100%; margin: 0px; padding:0 0 0 0; }
.selet_jobbox  {
    margin: 40px 0px 0px 0px;
    padding:0 0 0 0;
}
.selet_jobbox .dropdown {
  display: flex; justify-content: flex-start; align-items: center;
  margin: 0px; padding:0 0 0 0; list-style: none;
}
.selet_jobbox .dropdown .dropdown-menu {
    min-width: 100%;
    border-radius: 0;
    margin: 0px 0px 0px 0px; padding: 1rem 0.3rem; list-style: none;
    background: #fff;
    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
    border: 0px;
}
.selet_jobbox .dropdown > li{
    width: 25%; margin: 0 0px 0 0px; position: relative;
}
.selet_jobbox .dropdown .dropdown-menu > li a {
    border: 0;
    color: var(--color-c04);
    display: block;
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: var(--font-s01);
}
.selet_jobbox .dropdown > li:nth-child(2){
    margin: 0 20px 0 5%;
}
.selet_jobbox .dropdown > li:last-child{
    width: 18%; margin: 0 0px 0 5%;
}
.selet_jobbox .dropdown .allbox { border-right: 1px solid rgba(0,0,0,0.1); padding:0px 5% 0px 0; }
.selet_jobbox .dropdown button.all{ cursor: default; }
.selet_jobbox .dropdown button {
  width: 100%;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  padding: 12px 20px;
  color:var(--color-c05);
  background: #fff;
  border-radius: 5px;
  letter-spacing: 5px;
}
.selet_jobbox .dropdown button::after {
  content: "";
    border-bottom: 1px solid var(--color-c04);
    border-right: 1px solid var(--color-c04);
    height: 0.5em;
    margin: 0 0px 3px 0.75em;
    width: 0.5em;
    transform: rotate(45deg);
}
.selet_jobbox .dropdown button.search {
  background: rgba(0,0,0,0.1);
}
.selet_jobbox .dropdown button.search:hover{
    background: linear-gradient(to right, #0c9cc6 0%,#096798 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: 1px solid rgba(0,0,0,0.1);
    color: #fff;
}
.selet_jobbox .dropdown button.all::after, .selet_jobbox .dropdown button.search::after {
  display: none;
}

@media screen and (max-width: 750px) {
.selet_jobbox .dropdown {
 flex-wrap: wrap; justify-content: space-between;
}
.selet_jobbox .dropdown > li{
    width: calc( (100% - 18% ) / 2 - 20px);
}
.selet_jobbox .dropdown > li:nth-child(2){
    margin: 0 0px 0 0;
}
.selet_jobbox .dropdown > li:nth-child(3){
    margin: 0 10px 0 10px;
}
.selet_jobbox .dropdown > li:last-child{
    margin: 0 0px 0 0;
}
.selet_jobbox .dropdown .allbox { width: 100%; border-right: none; padding:0px 0 0px 0; margin: 0 0px 20px 0px;}
.selet_jobbox .dropdown button {
    padding: 12px 0px;
    letter-spacing: 3px;
}
}

.join09 { width: 100%; }
.join09 ul{ padding: 0; margin: 0px 0 0px 0; list-style: none;
display: flex;
  justify-content: space-between; flex-wrap: wrap; position: relative;
 }
.join09 ul:before {
    content: "";
    left:50%;
    height: 400px;
    display: block;
    border-right: 1px solid rgba(0,0,0,0.1);  
    position: absolute;
}
.join09 li {
  width:500px; height: 400px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  list-style: none;
  display: flex;
  justify-content: center; 
  align-items: center;
}
.join09 .txtbox {
  width: 100%; height: auto; padding: 10% 0;
  display: flex;
  justify-content: center; 
  align-items: center;
  flex-wrap: wrap;
}
.join09 .txtbox h2{
  font-family: var(--fontstyle01);
  font-weight: 100;
  font-size: var(--font-s23);
  letter-spacing: 8px;
  text-align: center;
  width: 100%;
  margin: 0px 0px 20px 0px;
  padding: 0;
}
.join09 .txtbox .button {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px 20px;
    color: var(--color-c05);
    background: #fff;
    border-radius: 5px;
    letter-spacing: 5px;
}
.join09 .txtbox .button:hover{
    background: linear-gradient(to right, #0c9cc6 0%,#096798 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: 1px solid rgba(0,0,0,0.1);
    color: #fff;
}
.join09 .txtbox .button.tw {
    width: 210px;
}
.join09 .txtbox .button.tha {
    width: 260px;
}
.join09 .txtbox figcaption.r_box01 h3{
  color: #fff;
  font-weight: normal;
  font-size: var(--font-s06);
  text-align: center;
  width: 100%;
  margin: 0px;
  padding: 0;
  letter-spacing: 3px;
}
.join09 li:hover .txtbox figcaption.r_box01 {
  opacity: 0;
}
.join09 .txtbox figcaption.r_box02{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;
  z-index: 9;
}
.join09 li:hover .txtbox figcaption.r_box02{
  opacity: 1;
}
.join09 .txtbox figcaption.r_box02 h2{
  color: #fff;
  font-family: var(--fontstyle01);
  font-weight: 100;
  font-size: var(--font-s15);
  letter-spacing: 8px;
  text-align: center;
  width: 100%;
  margin: 0px 0px 50px 0px;
  padding: 0;
  position: relative;
}
.join09 .txtbox figcaption.r_box02 h2:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: calc(50% - 25px);
  display: block;
  width: 50px;
  height: 1px;
  background: rgba(255,255,255,0.5);
}
.join09 .txtbox figcaption.r_box02 .r_list{
  color: #fff;
  font-size: var(--font-s04);
  width: 100%;
}
.join09 .txtbox figcaption.r_box02 .r_list p{
  width: 100%; margin: 0px; padding:0px 0 10px 0; letter-spacing: 3px;
}
.join09.rd06 .txtbox figcaption.r_box02 .r_list{
  text-align: left;
}
.join09.rd06 .txtbox figcaption.r_box02 .r_list p{
  width: 100%; margin: 0px; padding:0px 0 10px 0; letter-spacing: 3px;
  display: flex; 
    justify-content: flex-start;
    align-items: center;
}
.join09.rd06 .txtbox figcaption.r_box02 .r_list p:before{
  content: "\F272";
  font-family: bootstrap-icons ;
    display: block;
    font-weight: 100;
    font-style: normal;
    color: #fff;
    font-size: 14px;
    padding:0px 5px 0px 0;
}
@media screen and (max-width: 1300px) {
.join09 ul:before {
    content: "";
    height: 450px;
}
.join09 li {
  width:450px; height: 450px;
}
}
@media screen and (max-width: 1100px) {
.join09 .txtbox h2{
  font-size: var(--font-s16);
}
.join09 ul:before {
    content: "";
    height: 400px;
}
.join09 li {
  width:400px; height: 400px;
}
}
@media screen and (max-width: 900px) {
.join09 ul:before {
    display: none;
}
.join09 li {
  width:100%; height: 330px;
  border-bottom: 1px solid rgba(0,0,0,0.08); 
}
.join09 li:last-child{ border-bottom: none; }
.join09 .txtbox figcaption.r_box02 h2{
  font-size: var(--font-s12);
  margin: 0px 0px 40px 0px;
}
.join09 .txtbox figcaption.r_box02 .r_list p{
  padding:0px 0 8px 0;
}
}

.join10 { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; }
.join10 .title06{ text-align: center; }
.join10 ul { width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 0; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
.join10 ul:after {
    content: "";
    width:calc(100% / 3 - 30px);
}
.join10 ul li{ width:calc(100% / 3 - 50px); margin: 30px 0px 30px 0px; padding:30px 3%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border-radius: var(--border-radius01); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
.join10 ul li a{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.join10 ul li h4{ width: 100%; padding: 0 0px 0px 0px; margin: 0 0px 10px 0px; font-size:var(--font-s07); font-weight: 600; color: var(--color-c04);  text-align:center; letter-spacing: 5px; }
.join10 ul li .icon{ margin: 0px; padding:0 30px 0px 30px; }
.join10 ul li .icon img{ width:76px; }
.join10 ul li p{ width: 100%; padding: 0 0px 0px 0px; margin: 0px 0px 10px 0px; color: var(--color-c07);  text-align:center; }
@media screen and (max-width: 1199px) {
.join10 ul:after {
    content: "";
    width:calc(100% / 2 - 20px);
}
.join10 ul li:nth-child(3) h4{ min-height: 78px; }
.join10 ul li{ width:calc(100% / 2 - 20px); }
.join10 ul li:nth-child(5) h4, .join10 ul li:nth-child(6) h4{ min-height: auto; }
}
@media screen and (max-width: 800px) {
.join10 ul li{ width:100%; }
.join10 ul li:nth-child(3) h4{ min-height: auto; }
}
@media screen and (max-width: 700px) {
.join10 ul li .icon img{ width:60px; }
}

.join11 { width:100%; margin: 0px auto 0px auto; padding:63px 0 0 0; }
.join11 .result{ width:100%; text-align: right; color: var(--color-c05); font-size: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding:0 0 20px 0;}
.join11 > ul { width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 0; }
.join11 > ul > li{ width:100%; margin: 0px 0px 0px 0px; padding:30px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.join11 > ul > li .ttbox{ width:100%; margin: 0px; padding:0px 0px 0px 0; 
display: flex;
    justify-content: flex-start;
    align-items: center; flex-wrap: nowrap;
}
.join11 ul li .ttbox h2{ width:auto; margin: 0px 20px 0px 0px; padding:0px 0px 0px 0; font-size: var(--font-s03); color: var(--color-c04);}
.join11 ul li .ttbox h2:hover{ text-decoration:underline !important;}
.join11 ul li .ttbox .tagbox{ width:auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.join11 ul li .ttbox .tagbox span{ margin: 0px 20px 0px 0px; padding:0px 0px 0px 0; font-size: var(--font-f00); color: var(--color-c05);
display: flex;
    justify-content: flex-start;
    align-items: center; 
}
.join11 ul li .ttbox .tagbox span.map:before {
  content: "\F3E8";
  font-family: bootstrap-icons ;
    font-weight: 100;
    font-style: normal;
    font-size: var(--font-f00); color: rgba(0, 0, 0, 0.3);
}
.join11 ul li .ttbox .tagbox span.year:before {
  content: "\F1CC";
  font-family: bootstrap-icons ;
    font-weight: 100;
    font-style: normal;
    font-size: var(--font-f00); color: rgba(0, 0, 0, 0.3);
    margin: 0px 5px 0px 0;
}
.join11 ul li .ttbox .tagbox span.experience:before {
  content: "\F6FE";
  font-family: bootstrap-icons ;
    font-weight: 100;
    font-style: normal;
    font-size: var(--font-f00); color: rgba(0, 0, 0, 0.3);
    margin: 0px 5px 0px 0;
}
.join11 ul li .infobox{ width:100%; margin: 0px; padding:0px 0px 0px 0; 
display: flex;
    justify-content: flex-start;
    align-items: center; flex-wrap: nowrap;
}
.join11 ul li .infobox ul{ width:100%; margin: 20px 0px 0px 0; padding:0px 0px 0px 0;}
.join11 > ul > li .infobox > ol { list-style-type: decimal !important; margin: 20px 0px 0px 0px; padding:0px 0px 0px 20px;} 
.join11 > ul > li .infobox > ol > li{ width:100%; margin: 0px; padding:0px 0px 0px 0; font-size: var(--font-f00); color: var(--color-c05);
}
@media screen and (max-width: 900px) {
.join11 { padding:0px 0 0 0; }
}
@media screen and (max-width: 550px) {
.join11 > ul > li .ttbox{ flex-wrap: wrap; }
.join11 ul li .ttbox h2{ width:100%; margin: 0px 0px 10px 0px;}
.join11 ul li .ttbox .tagbox{ width:100%; }
}

.join12 { width:100%; margin: 0px auto 0px auto; padding:0 0 0 0; }
.join12 .ttbox{ width:100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin: 0px 0px 30px 0px; padding:0px 0px 20px 0px;}
.join12 .ttbox h2{ margin: 0px; padding:0px 0px 0px 0; font-size: var(--font-s07); color: var(--color-c04);}
.join12 .infobox{ width:100%; display: flex; justify-content: space-between; align-items: center; }
.join12 .infobox .info_left{ width:50%; padding:0px 50px 0px 0;}
.join12 .infobox .info_left > ul { width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 0; list-style: none;}
.join12 .infobox .info_left > ul > li{ width:100%; margin: 0px 0px 40px 0px; padding:0px 0; }
.join12 .infobox .info_left > ul > li h3{ font-size: var(--font-s01); color: var(--color-c05); margin: 0px 0px 10px 0px; padding:0px 0; font-weight:600;}
.join12 .infobox .info_left > ul > li p{ font-size: var(--font-s01); color: var(--color-c05);  }
.join12 .infobox .info_left > ul > li > ol { list-style-type: decimal !important; margin: 0px 0px 0px 0px; padding:0px 0px 0px 20px;} 
.join12 .infobox .info_left > ul > li > ol > li{ width:100%; margin: 0px; padding:0px 0px 0px 0; font-size: var(--font-s01); color: var(--color-c05);
}
.join12 .infobox .info_right{ width:50%; border-left: 1px solid rgba(0, 0, 0, 0.1); padding:0px 0 0px 50px;}
.join12 .infobox .info_right ul { width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 0; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
.join12 .infobox .info_right ul:after {
    content: "";
    width:calc(100% / 3 - 50px);
}
.join12 .infobox .info_right ul li{ width:calc(100% / 3 - 20px); margin: 15px 0px 15px 0px; padding:20px; background:#f5f6f7; 
display: flex; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 200px;
}
.join12 .infobox .info_right ul li figure{ width:100%; margin: 0px 0px 0px 0px; padding:0px; 
display: flex; justify-content: center; align-items: center; flex-wrap: wrap; 
}
.join12 .infobox .info_right ul li .icon{ margin: 0px 0px 10px 0px; padding:0 0px 0px 0px; }
.join12 .infobox .info_right ul li .icon img{ width:60px; }
.join12 .infobox .info_right ul li .text{ width:100%; margin: 0px; padding:0 0px 0px 0px; text-align:center;}
.join12 .infobox .info_right ul li .text p{ width:100%; margin: 0px 0px 10px 0px; padding:0 0px 0px 0px;}
.join12 .infobox .info_right ul li .text .ps{ width:100%; font-size:12px;}
.join12 .btn-box {
    justify-content: flex-end;
    margin: 30px 0px 0px 0px;
}
@media screen and (max-width: 1000px) {
.join12 .infobox{ width:100%; flex-wrap: wrap; }
.join12 .infobox .info_left{ width:100%; padding:0px 0px 0px 0;}
.join12 .infobox .info_right{ width:100%; border-left: none; padding:0px 0 0px 0px;}
}
@media screen and (max-width: 768px) {
.join12 .infobox .info_right ul li{ width:calc(100% / 3 - 3px); padding:5px 10px; margin: 2px 0px 2px 0px; min-height: 150px;}
.join12 .infobox .info_right ul li .icon{ margin: 0px 0px 5px 0px; }
.join12 .infobox .info_right ul li .icon img{ width:40px; }
.join12 .infobox .info_right ul li .text p{ margin: 0px 0px 0px 0px; }
.join12 .infobox .info_right ul li .text .ps{ font-size:11px;}
}
@media screen and (max-width: 500px) {
.join12 .infobox .info_right ul li .text .ps{ font-size:10px;}
}

.join12 .form{ width:100%; }
.join12 .form .ttbox{ width:100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin: 0px 0px 30px 0px; padding:0px 0px 20px 0px;}
.join12 .form .ttbox h2{ margin: 0px; padding:0px 0px 0px 0; font-size: var(--font-s07); color: var(--color-c04);}
.join12 .form .send{ padding: 10px 18px 9px 18px; background:#fff;}
.join12 .form .send:hover{
    background: linear-gradient(to right, #0c9cc6 0%,#096798 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: 1px solid #0c9cc6;
    color: #fff;
}

.join13 { width:100%; margin: 0px; padding:0 0 0 0; }
.join13 > ul{ width:100%; margin: 0px; padding:0 0 0 0; }
.join13 > ul:nth-child(2){ margin: 80px 0 0 0; }
.join13 .tt {
    font-family: var(--fontstyle01);
    font-weight: 100;
    font-size: var(--font-s23);
    letter-spacing: 8px;
    text-align: center;
    width: 100%;
    margin: 0px 0px 20px 0px;
    padding: 0;
}
.join13 > ul ul{ width:100%; margin: 0px; padding:0; list-style: none;
display: flex;
    justify-content: center;
    align-items: center;
}
.join13 > ul ul li{ width:calc(100% / 4 - 60px); margin: 0px 30px; padding:0px 0px 0px 0px; list-style: none;
display: flex;
    justify-content: flex-start;
    align-items: center; flex-wrap: wrap;
}
.join13 > ul ul li a{ 
display: flex;
    justify-content: flex-start;
    align-items: center; flex-wrap: wrap;
}
.join13 > ul ul li .pic{ width:100%; }
.join13 > ul ul li .pic img{ width:100%; }
.join13 > ul ul li .title10{ margin: 15px 0px 8px 0px; letter-spacing:2px;}
.join13 > ul ul li .title10 .icon{  }
.join13 > ul ul li .title10 .icon img{ width:30px; }
.join13 > ul ul li .infobox{  width:100%; margin: 0px; padding:0px 0 0px 18px; color: var(--color-c05);
display: flex;
    justify-content: flex-start;
    align-items: center; flex-wrap: nowrap;
}
.join13 > ul ul li .infobox p{  width:100%; margin: 8px 0 0px 0; padding:0px 0 0px 0; display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    word-break: break-all
}
.join13 > ul ul li .infobox.add p{  margin: 0px 0 0px 0 ; }
.join13 > ul ul li .infobo.jobbkk{  display: flex;
    justify-content: flex-start;
    align-items: center; flex-wrap: nowrap;
}

.join13 > ul ul li .infobox.jobbkk a{  color: var(--color-c05);}
.join13 > ul ul li .infobox.jobbkk a:nth-child(2){ padding:0px 0 0px 50px;}
@media screen and (max-width: 1420px) {
.join13 > ul ul li .infobox.jobbkk a:nth-child(2){ padding:0px 0 0px 30px;}
}
@media screen and (max-width: 1366px) {
.join13 > ul ul li .infobox p{ font-size:var(--font-s00);}
}
@media screen and (max-width: 1300px) {
.join13 > ul ul li{ width:calc(100% / 4 - 30px); margin: 0px 15px; }
.join13 > ul ul li .infobox.jobbkk a:nth-child(2){ padding:0px 0 0px 20px;}
}
@media screen and (max-width: 1100px) {
.join13 .tt {
  font-size: var(--font-s16);
}
.join13 > ul ul li .infobox p{ font-size:var(--font-f00);}
}
@media screen and (max-width: 1000px) {
.join13 .tt {
    margin: 0px 0px 0px 0px;
}
.join13 > ul ul{ flex-wrap: wrap; justify-content: space-between;}
.join13 > ul ul li{ width:calc(100% / 2 - 15px); margin: 15px 0px; 
}
.join13 > ul ul li .title10{ margin: 15px 0px 0px 0px; }
.join13 > ul ul li .infobox p { margin: 5px 0 0px 0;}
}
@media screen and (max-width: 600px) {
.join13 > ul ul li .title10 .icon img { width: 20px; }
.join13 > ul ul li .infobox {
    padding: 0px 0 0px 15px;
}
.join13 > ul ul li .infobox p .icon_briefcase02{ display: none; }
}


.join_modal .modal-dialog-centered {
    align-items: flex-start;
}
.join_modal .modal-dialog {
        max-width: 1200px;
        margin-top: 80px;
    }

.join14 .wrapper {
  width: 100%;
    position:relative;
    margin:10px auto 0px auto;
    overflow:hidden;
  padding:0px;
}
.join14 .wrapper .nav{ width: auto; margin: 0px; padding:0; display: flex;  justify-content: center; align-items: center; }
.join14 .wrapper .nav button{ margin:10px 0; padding:0; outline: 0px; border: 0px; color: var(--color-c01); padding: 0.5rem 1rem 0.5rem 1rem; background: none; font-size:var(--font-s03); position:relative; }
.join14 .wrapper .nav button.active{ background: #f5f6f7;}
.join14 .wrapper .nav button:after {
    background: rgba(0, 0, 0, 0.1) ;
    width: 1px; height: 20px;
    content: "";
    right: 0;
    top: calc(50% - 8px);
    position: absolute;
}
.join14 .wrapper .nav button:last-child:after {
    display: none;
}

.join14 .swiper-wrapper {
    padding: 0 0 20px 0;
}
.join14 .swiper-slide {
    width: 100%; 
     display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
    aspect-ratio: 3 / 2;

}
.join14 .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.join14 .swiper-container-horizontal>.swiper-pagination-progressbar, 
.join14 .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    height: 4px;
    top: auto;
    bottom: 0;
}
.join14 .swiper-pagination-progressbar {
    background: #dcddde; position: relative;
}
.join14 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: rgb(162, 142, 83);

    width: 0%;

    animation-name: countingBar;
   animation-duration: 3s;
   animation-timing-function: ease-in;
   animation-iteration-count: 1;
   animation-direction: alternate;
   animation-fill-mode: forwards;
}
 @keyframes countingBar {
   0% {
     width: 0;
  }
   100% {
     width: 100%;
  }
}

.join14 .swiper-button-prev{
    background-image: url(../images/join_album_arrow.svg);
    filter: drop-shadow(-5px 1px 2px rgba(0, 0, 0, 0.5));
    animation: fadeIna 1s ease-in forwards;
}
.join14 .swiper-button-next {
    background-image: url(../images/join_album_arrow02.svg);
    filter: drop-shadow(-5px 1px 2px rgba(0, 0, 0, 0.5));
    animation: fadeIna 1s ease-in forwards;
}
@keyframes fadeIna {
      0% { opacity: 0; }
      100% { opacity: 1; }
}
@media screen and (max-width: 900px) {
.join14 .swiper-button-next, .join14 .swiper-button-prev {
    position: absolute;
    width: 18px;
    height: 30px;
    margin-top: -15px;
    background-size: 18px 30px;
}
}
@media screen and (max-width: 500px) {
.join14 .swiper-button-next, .join14 .swiper-button-prev {
    position: absolute;
    width: 12px;
    height: 20px;
    margin-top: -10px;
    background-size: 12px 20px;
}
}

.join14 .tab-content {  position: relative; }
.join14 .btn-close {  color: #fff; position: absolute; z-index:9; right:10px; top: 10px;
background: url(../images/white-btn-close.svg) center/1em auto no-repeat !important;
opacity: 1;
}
@media screen and (max-width: 900px) {
.join_modal .modal-dialog-centered {
    align-items: center;
}
}

/* -企業永續-------------------------------------------------------------------------------------------------*/
.esg01 { width:100%; margin: 0px auto 0px auto; padding:0;}
.esg01 ul{ width:100%; margin: 0px; padding:0; list-style: none;}
.esg01 li{ width:100%; margin: 0px 0px 80px 0px; padding:0px 0px 80px 0px; list-style: none;
display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom:1px solid rgba(0,0,0,0.1);
}
.esg01 li:last-child{ border-bottom:none;}
.esg01 .pic{ width:calc(100% - 40%); margin: 0px 0px 0px 0px; padding:0 0 0 60px; text-align:right;}
.esg01 .pic img{ max-width:100%; border-radius: var(--border-radius01); }
.esg01 .txtbox{ width:40%; margin: 0px; padding:0px 0px 0px 0; border-right:1px solid rgba(255,255,255,0.1); }
.esg01 .txtbox .title06 {
    margin: 0 0 30px 0;
    padding: 0px 0 0px 0;
}
.esg01 .txtbox p{ width:100%; margin: 0px; padding:0; color: var(--color-c05); }
.esg01 li:nth-child(even) .pic{order: 1; padding:0 60px 0 0; text-align:left;}
.esg01 li:nth-child(even) .txtbox{ order: 2;}
@media screen and (max-width: 1000px) {
.esg01 { flex-wrap: wrap;}
.esg01 .pic{ width:100%; padding:0 0 0 0px; }
.esg01 .pic img{ width:100%;  }
.esg01 li{ margin: 0px 0px 40px 0px; padding:0px 0px 0px 0px; flex-wrap: wrap; }
.esg01 li:last-child{ margin: 0px 0px 0 0px; }
.esg01 li:nth-child(even) .pic{ padding:0 0px 0 0;}
.esg01 li:nth-child(even) .txtbox{ order: 1; }
.esg01 .txtbox{ width:100%; margin: 0px; padding:0px 0px 40px 0; border-right:none;  }
}
@media screen and (max-width: 768px) {
.esg01 .txtbox .title06 {
    margin: 0 0 15px 0;
}
.esg01 .txtbox{ padding:0px 0px 15px 0; }
.esg01 li{ margin: 0px 0px 15% 0px; }
}

.esg02 {  width:100%; margin: 0px; padding:0px 0 0px 0; display: flex;  justify-content: space-between; align-items: center; }
.esg02 .txtbox{  width:40%; margin: 0px; padding:0px 0 0px 0; }
.esg02 .txtbox .title06 {  margin: 0 0 30px 0; padding:0px 0 0px 0; }
.esg02 .txtbox p{  width:100%; margin: 0px; padding:0px 0 0px 0; color: var(--color-c05); }
.esg02 .pic{  width:calc(100% - 40%); margin: 0px 0px 0px 0; padding:0 0 0 60px; text-align:right}
.esg02 .pic img{  max-width:100%; border-radius: var(--border-radius01);}
@media screen and (max-width: 1000px) {
.esg02 {  flex-wrap: wrap; }
.esg02 .txtbox{  width:100%; margin: 0px; padding:0px 0px 40px 0;}
.esg02 .pic{  width:100%; padding:0 0 0 0px;}
.esg02 .pic img{ width:100%;  }
}
@media screen and (max-width: 768px) {
.esg02 .txtbox .title06 {
    margin: 0 0 15px 0;
}
.esg02 .txtbox{ padding:0px 0px 15px 0; }
}

.esg03 { width:100%; margin: 0px; padding:0px 0 0px 0; }
.esg03 .slider-for{ margin: 0px; padding:0px 0 0px 0; list-style: none; }
.esg03 ul { width:calc(100% + 20px); margin: 0px -10px 0px -10px; padding:0 0 0 0; display: flex; justify-content: space-between; align-items: center;}
.esg03 ul li{ width:calc(100% - 20px); margin: 20px 10px 20px 10px; padding:0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

.esg03 ul li .arrow{ width:calc(100% - 10px);  height: 30px; background:#e9eaea; display: flex; justify-content: flex-start; align-items: center; position: relative;
}
.esg03 ul li .arrow:after {
   content: "";
   position: absolute;
   right: -20px;
   top: -1px;
   clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 50% 50%, 0% 0%);
   width:40px; height: 32px; background: #f5f6f7;
}
.esg03 ul li .arrow:before {
   content: "";
   position: absolute;
   left: 0px;
   top: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   border-left: 15px solid #f5f6f7;
}
#eync2 .current li .arrow .arrow_value {
  animation: load 2.5s normal forwards;
  height: 30px;
  width: 0;
}
@keyframes load {
  0% { width: 0; }
  100% { width: 100%; }
}

#eync2 .current li .arrow.style01 .arrow_value {
  background: #d1e8e7;
}
#eync2 .current li .arrow.style02 .arrow_value {
  background: #b8dbda;
}
#eync2 .current li .arrow.style03 .arrow_value {
  background: #88c2c1;
}
#eync2 .current li .arrow.style04 .arrow_value {
  background: #4a908e;
}

.esg03 ul li .title{ width:100%; margin: 20px 0px 20px 0px; padding:0 0 0 20px; 
color: rgba(0, 0, 0, 0.35);
    font-size: var(--font-s04);
    font-weight: 600;
}
.esg03 ul li .txtbox{ width:100%; margin: 0px 0px 0px 0px; padding:0 0 0 20px; position: relative;
color: rgba(0, 0, 0, 0.35); 
}
.esg03 ul li .txtbox:before{ content: ''; display: block; top: 5px; left: 0px; position: absolute;
    width: 1px;
    height: 50px;
    background: rgba(0, 0, 0, 0.1); 
}

#eync2 .synced li, #eync2 .current li {
}
#eync2 .synced li .title, #eync2 .current li .title{
   color: var(--color-c04);
}
#eync2 .synced li .txtbox, #eync2 .current li .txtbox{
   color: var(--color-c05);
}

.esg03 .owl-nav{
  display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 20px 0 0px 0px;
}
.esg03 .owl-prev, .esg03 .owl-next{
  font-size: 0px !important; 
  width: 38px; height: 38px; border-radius: 100% !important;
display: flex !important; justify-content: center; border: none;
  align-items: center; 
  background: none !important;
}
.esg03 .owl-next{
  margin: 0px 0px 0px 10px;
  background: none !important;
}
.esg03 .owl-prev:before{
  font-size: var(--font-s01);
  color: #333;
  content: "\F284";
  font-family: bootstrap-icons ;
    display: block;
    font-weight: 100;
    font-style: normal;
    padding:0 0 0 3px;
}
.esg03 .owl-next:before{
  font-size: var(--font-s01);
  color: #333;
  content: "\F285";
  font-family: bootstrap-icons ;
    display: block;
    font-weight: 100;
    font-style: normal;
    padding:0 0 0 3px;
}
.esg03 .owl-theme .owl-nav .disabled {
    opacity: 0;
}
@media screen and (max-width: 699px) {
.esg03 ul { width:100%; margin: 0px 0px 0px 0px; }
.esg03 ul li{ width:calc(100% - 95px); margin: 20px 95px 20px 0px; }
}

.ind_sustainable.esg04 .box-2{
     display: flex; 
  justify-content: center; align-items: center; 
  flex-wrap: wrap;
  position: relative;
  height: 100vh;
}
.ind_sustainable.esg04 .title03{
  width:auto;
}
.ind_sustainable.esg04 .title03 h2 {
  font-size:190px; justify-content: center; letter-spacing: 40px; padding: 0 0 0 40px;
}
.ind_sustainable.esg04 .title03 h2:before{
  display: none;
}
.ind_sustainable.esg04 .btnbox{
    position: absolute; bottom: 10%;
}
.ind_sustainable.esg04 .btnbox .btn-style04{
 width: 220px; margin:0 15px;
}
@media screen and (max-width: 1050px) {
.ind_sustainable.esg04 .title03 h2 {
        font-size: 70px; padding: 0 0 0 23px;
}
}
@media screen and (max-width: 1000px) {
.ind_sustainable.esg04 .btnbox{
  width: 100%; flex-wrap: nowrap;  
    margin:25px 0 0  0; position: relative;
}
.ind_sustainable.esg04 .title03 h2 {
        letter-spacing: 20px;
}
.ind_sustainable.esg04 .btnbox .btn-style04{
 width: 250px;
}
}
@media screen and (max-width: 650px) {
.ind_sustainable.esg04 .title03 h2 {
font-size: 65px;
}
.ind_sustainable.esg04 .btnbox{
flex-wrap: wrap;  
}
.ind_sustainable.esg04 .btnbox .btn-style04{
 margin: 8px 0px;
}
}


.esg05 {  width:100%; margin: 0px auto; }
.esg05 .canvas_box { width:50%; margin: 0px auto; display: flex; justify-content: center; align-items: center;}
.esg05 .canvas_box canvas { width:100%;}
@media screen and (max-width: 1000px) {
.esg05 .canvas_box { width: 80%; }
}

.esg06 {  width:100%; margin: 0px; padding:0px 0 0px 0; }
.esg06 .pic{  width:100%; }
.esg06 .pic img{  width:100%; }

.esg07 {  width:100%; margin: 0px; padding:0px 0 0px 0; height: 100vh; background-size: cover; 
    background: no-repeat center center;
}

/* -聯絡民盛-------------------------------------------------------------------------------------------------*/
.contact {  width:100%; margin: 0px auto 0px auto; padding:0px 0 0px 0; 
display: flex; 
  justify-content: center; align-items: center; 
}
.contact .c_left{  width:35%; margin: 0px; padding:30px 8% 30px 0; border-right: 1px solid rgba(0,0,0,0.1); }
.contact .c_left .title08{  margin: 0px 0px 20px 0px; }
.contact .c_left .name{  }
.contact .c_left h3{  margin: 0px; padding:0px 0 0px 0; font-family: var(--fontstyle01); font-size:var(--font-s06); color: var(--color-c04); font-weight: 100; letter-spacing:3.6px;}
.contact .c_left h4{  margin: 0px; padding:0px 0 0px 0; font-size:var(--font-s03); color: var(--color-c04); letter-spacing:5.2px;}
.contact .c_left .infobox{  width:100%; margin: 0px; padding:0px 0 0px 0; color: var(--color-c05);}
.contact .c_left .infobox p{  width:100%; margin: 0px; padding:0px 0 0px 0; display: flex; justify-content: flex-start; align-items: center;}
.contact .c_left .infobox p .icon_mail:before,
.contact .c_left .infobox p .icon_tel:before,
.contact .c_left .infobox p .icon_address:before{ color: var(--color-c05); margin:0 10px 0 0;}
.contact .c_right{  width:auto; margin: 0px; padding:0px 0 0px 8%;}
.contact .c_right .title09 {
    margin: 0px 0px 20px 0px; 
}
.contact .c_right > ul{  width:100%; margin: 0px; padding:0px 0 0px 0; list-style:none;
display: flex; 
  justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.contact .c_right > ul > li{  width:calc(100% / 2 - 20px); margin: 50px 0px 50px 0px; padding:0px 0 0px 0; list-style:none;}
.contact .c_right .infobox{  width:100%; margin: 0px; padding:0px 0 0px 0; color: var(--color-c05);}
.contact .c_right .infobox p{  width:100%; margin: 0px; padding:0px 0 0px 0; }
@media screen and (max-width: 1400px) {
.contact .c_left{  width:45%; padding:30px 6% 30px 0;}
.contact .c_right{  padding:0px 0 0px 6%;}
}
@media screen and (max-width: 1200px) {
.contact .c_left{  width:50%; padding:30px 5% 30px 0;}
.contact .c_right{  padding:0px 0 0px 5%;}
}
@media screen and (max-width: 1050px) {
.contact { flex-wrap: wrap;}
.contact .c_left{ width:100%; margin: 0px; padding:0px 0 50px 0; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.1);}
.contact .c_right{ width:100%; margin: 0px; padding:0px 0 0px 0;}
}
@media screen and (max-width: 768px) {
.contact .c_left{ padding:0px 0 40px 0; }
.contact .c_left h3{ margin: 0px 0px 5px 0px; font-size: 14px; font-weight:500;}
.contact .c_left .mt-5{ margin-top: 2rem !important; }
}
@media screen and (max-width: 600px) {
.contact .c_right > ul > li{  width:100%; margin: 35px 0px 35px 0px;}
.contact .c_right > ul > li:last-child{  margin: 35px 0px 0px 0px;}
}

/* -隱私權條款------------------------------------------------------------------------------------------------*/
.privacy {  width:100%; margin: 0px auto 0px auto; padding:0px 0 0px 0; color: var(--color-c05);}
.privacy .data{  width:100%; margin: 0px 0 30px 0; padding:0px 0 0px 0; color: var(--color-c05); text-align:right; font-size: var(--font-s00);}
.privacy .txtbox { width:100%; margin: 10px auto 30px auto; padding:0px 0 0px 0; color: #333; }
.privacy .line_txt_box .txt{ width:100%; margin: 0px 0 0 0; padding:0px 0 0px 33px; color: var(--color-c05); }
.privacy .line_txt_box .txt p{ margin: 0px 0 0 0; padding:0px 0 0px 0px; }
@media screen and (max-width: 1024px) {
.privacy .data{ font-size: var(--font-f01);}
}
@media screen and (max-width: 700px) {
.privacy .line_txt_box .txt {
        padding: 0px 0 0px 5%;
    }
}

/* -button---------------------------------------------------------------------------------------------------*/
.btn-box{ padding: 0; margin: 50px 0 0px 0; 
display: flex; 
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.btn-style01{
  margin: 5px 5px; 
    padding: 6px 18px 6px 18px;
    text-align: center;
    text-decoration: none;
    color: var(--color-c05);
    font-size: var(--font-s01); 
    border: 1px solid var(--color-c05);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration:none !important;
    border-radius: 5px;

  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.btn-style01:hover{
    background: linear-gradient(to right, #0c9cc6 0%,#096798 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: 1px solid #0c9cc6;
    color: #fff;
}
.icon_pdf:before { content: "\F756"; font-family: bootstrap-icons ; font-size:var(--font-s05); margin:0 10px 0 0;}
.icon_download:before { content: "\F30A"; font-family: bootstrap-icons ; font-size:var(--font-s05); margin:0 10px 0 0;}
.icon_file { 
font-size: var(--font-s05);
    color: var(--color-c04);
}
.btn-style01:hover .icon_file{
    color: #fff;
}
.icon_file:before { content: "\F444"; font-family: bootstrap-icons ; font-size:var(--font-s05); margin:0 10px 0 0;}
.icon_arrow_right:before { content: "\F138"; font-family: bootstrap-icons ; font-size:var(--font-s05); margin:0 10px 0 0;}
.icon_arrow_right:before { content: "\F138"; font-family: bootstrap-icons ; font-size:var(--font-s05); margin:0 10px 0 0;}
.icon_arrow_left:before { content: "\F12F"; font-family: bootstrap-icons ; font-size:var(--font-s05); margin:0 10px 0 0;}
.icon_check:before { content: "\F633"; font-family: bootstrap-icons ; font-size:var(--font-s08); margin:0 10px 0 0; color: #a2ce84;}
.icon_triangle_top:before { content: ""; margin:0 10px 0 0; display: block; 
width: 21px;
  height: 16px;
  background: url(../images/icon_triangle_top.svg) no-repeat; background-size: 100% auto;
}
.icon_mail:before { content: "\F32F"; font-family: bootstrap-icons ; font-size:var(--font-s03); margin:0 10px 0 0; color: var(--color-c05);}
.icon_tel:before { content: "\F5C1"; font-family: bootstrap-icons ; font-size:var(--font-s03); margin:0 10px 0 0; color: var(--color-c05);}
.icon_address:before { content: "\F3E8"; font-family: bootstrap-icons ; font-size:var(--font-s05); margin:0 10px 0 0; color: var(--color-c05);}
.icon_briefcase:before { content: "\F1CC"; font-family: bootstrap-icons ; font-size:var(--font-s03); margin:0 10px 0 0; color: var(--color-c05);}
.icon_briefcase02:before { content: "\F1CB"; font-family: bootstrap-icons ; font-size:var(--font-s03); margin:0 10px 0 0; color: var(--color-c05);}
.icon_youtube { 
font-size: var(--font-s05);
    color: var(--color-c04);
}
.icon_youtube:before { content: "\F62B"; font-family: bootstrap-icons ; font-size:var(--font-s05); margin:0 10px 0 0;}

.btn-style02{
  margin: 0px; 
    padding: 8px 18px 8px 18px;
    text-align: center;
    text-decoration: none;
    color: var(--color-c05);
    font-size: var(--font-s01); 
    border: 1px solid rgba(0,0,0,0.1);
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration:none !important;
  border-radius: var(--border-radius01);

  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.btn-style02:hover{
    background: linear-gradient(to right, #0c9cc6 0%,#096798 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: 1px solid rgba(0,0,0,0.1);
    color: #fff;
}
.btn-style03{
  margin: 0px; 
    padding: 8px 18px 8px 18px;
    text-align: center;
    text-decoration: none;
    color: var(--color-c05);
    font-size: var(--font-s01); 
    border: 1px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration:none !important;
  border-radius: var(--border-radius01);

  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.btn-style03:hover{
    background: linear-gradient(to right, #0c9cc6 0%,#096798 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: 1px solid rgba(0,0,0,0.1);
    color: #fff;
}
.btn-style04{
  margin: 0px; 
    padding: 8px 18px 8px 18px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: var(--font-s01); 
    border: 1px solid rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration:none !important;
  border-radius: var(--border-radius01);
  box-shadow: 0 0 20px rgb(0 0 0 / 10%);

  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
@media screen and (max-width: 900px) {
.btn-style01, .btn-style02, .btn-style03, .btn-style04{
    font-size: var(--font-s03); 
    padding: 5px 18px 5px 18px;
}
}

/*頁碼*/
div.page {
  font-size:var(--font-s00);
  padding: 0px;
  margin:30px 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: 0px 3px; padding:5px 10px; color: #888;text-decoration: none; 
  display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
div.page a:hover {
  color: #fff; background: var(--color-c03); 
}
div.page a.current {
  color: #fff; background: var(--color-c03); 
}

/*404*/
.e404box {
  width: 90%;
  max-width: 700px;
  background: #FFF;
  padding: 50px 30px;
  margin: 10% auto 0 auto;
  display: block;
  border-radius: 5px;
  -moz-box-shadow: 3px 3px 2px rgba(0%, 0%, 0%, 0.1);
  -webkit-box-shadow: 3px 3px 2px rgba(0%, 0%, 0%, 0.1);
  box-shadow: 0 0 40px rgba(0%, 0%, 0%, 0.1)
}

.e404 {
  width: 100%;
  display: block;
  padding: 0;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.e404 .pic {
  width: 100%;
}

.e404 .pic img {
  width: 180px;
}

.e404 .textbox {
  width: 100%;
  margin: 10px 0px 0px 0px;
  height: auto;
  overflow: hidden;
}

.e404 .textbox dd {
  width: 100%;
  display: block;
  margin: 5px 0px;
  padding: 0;
  list-style: none
}

.e404 .textbox dd.error {
  font-family: Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--color-c04);
  margin: 25px 0 0;
  vertical-align: top
}

.e404 .textbox dd.text {
  font-size: 14px;
  color: var(--color-c05);
}

.e404 .textbox dd.text a {
  color: var(--color-c05);
}

.e404 .textbox dd.topbtn {
  vertical-align: top;
  margin: 18px 0;
  display: flex; justify-content: center; align-items: center;
}
.e404 .textbox dd.topbtn .icon_arrow_right:before { margin:0px 0 0 8px;}