﻿.partnerships {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.partnerships-header-bgimge {
  height: 620px;
  background-image: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/Partnerships/1.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.partnerships-resources-bgimge {
  /*height: 800px;*/
  background-image: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/Partnerships/15.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.partnerships-assistant-bgimge {
  height: 500px;
  background-image: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/Partnerships/0.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.partnershipstitle {
  letter-spacing: -0rem;
  color: #f68b02;
  padding: 50px 0;
  font-weight: normal;
  font-size: 48px;
  font-family: 微軟正黑體;
  font-weight: 0;
}

.fixed-width {
  width: 58%;
  margin: auto;
  text-align: center;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.font > img {
  margin-bottom: 30px;
}
.action {
  border: 2px #fff solid;
  background-color: transparent; /*顏色透明*/
  color: #fff;
  cursor: pointer;
  width: 250px;
  line-height: 60px;
  letter-spacing: 0.1rem;
  font-size: 2.5rem;
  /*font-family: 微軟正黑體;
	font-weight:lighter;*/
  font-weight: bold;
}

.action:hover {
  color: #000000;
  background-color: #fff;
  border: 2px #fff solid;
  transition: background-color 0.3s;
}

.in {
  margin-top: 50px;
  border: 2px #417a99 solid;
  background-color: transparent; /*顏色透明*/
  color: #417a99;
  cursor: pointer;
  width: 250px;
  line-height: 60px;
  letter-spacing: 0.1rem;
  font-weight: lighter;
  font-family: 微軟正黑體;
  font-size: 2.5rem;
  font-weight: bold;
}
.in:hover {
  color: #ffffff;
  background-color: #417a99;
  border: 2px #417a99 solid;
  transition: background-color 0.3s;
}

.answer:after {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 30px 30px 0px 30px;
  border-color: #ffffff transparent transparent transparent;
  margin: auto;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1;
  background-color: transparent;
}

/*header start*/
.header1 {
  position: relative; /*圖片在下*/
  background-color: #efefef;
}

.h1111 {
  width: 80%;
  height: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 75px;
  font-weight: bold;
  letter-spacing: 0.2rem;
  margin: 0 auto;
  padding-top: 130px;
}
.h1111 > h1 {
  font-size: 75px;
}
.h1111 > p,
.h2111 > p {
  font-size: 16px;
}
.h1111 span {
  color: #00ffff;
}
.h2111 {
  text-align: left;
  position: absolute; /*文字在上*/
  top: 50%;
  left: 66%;
  transform: translate(-50%, -50%);
  font-size: 4.65rem;
  font-weight: bold;
  /*letter-spacing:0.2rem;*/
  letter-spacing: -0rem;
  color: #ffffff;
}

.banner {
  background-color: #ededed;
  padding-bottom: 100px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
.box {
  position: absolute; /*文字在上*/
  top: 50%;
  left: 23%;
  transform: translate(-50%, -50%);
  padding-bottom: 5px;
  padding-top: 100px;
  display: none;
}
.box1 {
  position: absolute; /*文字在上*/
  top: 23%;
  left: 36%;
  transform: translate(-50%, -50%);
  padding-bottom: 5px;
  padding-top: 100px;
  display: none;
}
.box2 {
  position: absolute; /*文字在上*/
  top: 22%;
  left: 55.5%;
  transform: translate(-50%, -50%);
  padding-bottom: 5px;
  padding-top: 100px;
  display: none;
}
.box3 {
  position: absolute; /*文字在上*/
  top: 50%;
  left: 68%;
  transform: translate(-50%, -50%);
  padding-bottom: 5px;
  padding-top: 100px;
  display: none;
}
.box4 {
  /*position: absolute;
    bottom: 0;
    /*left: 50%;
    transform: translate(-50%,0%) !important;*/
}

.icon {
  padding-bottom: 100px;
}

.item {
  width: 33%;
  float: left; /*浮動排列*/
}

.item1 {
  width: 50%;
  float: left; /*浮動排列*/
  text-align: center;
}

.column {
  padding-bottom: 100px;
}

.column:hover {
  transform: scale(1.1);
  transition: all 0.8s;
}

.column1 {
  position: relative;
  text-align: center;
  -webkit-animation: mymove 2s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 2s infinite;
  animation-iteration-count: 1;
  padding: 10px;
}

.column1 img {
  margin-bottom: 30px;
}

.column1 h3 {
  color: #3a3a3a;
  font-size: 36px;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from {
    bottom: -100px;
  }
  to {
    bottom: 10px;
  }
}

/* Standard syntax */
@keyframes mymove {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 10px;
    opacity: 1;
  }
}

/* hr css */
.container.row {
  margin-left: 0;
  margin-right: 0;
}
.hrblue {
  color: #000 !important;
}
.hrBanner-top1 {
  background: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/hr/HR_BANNER.png") no-repeat
    center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
}
.hrBanner-top2{
  background: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/hr/HR_BANNER02.jpg") no-repeat
    center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
}
.hrBox {
  max-width: 1250px;
  width: 100%;
  position: relative;
  margin: auto;
}
.hrList {
  display: flex;
  align-items: center;
  width: 100%;
}
.hrList div {
  display: table;
  width: 50%;
  padding-bottom: 70px;
}
.hrBox .hrList:last-child div {
  padding-bottom: 10px;
}
.hrList div:nth-child(odd) {
  margin-right: 30px;
}
.hrList div:nth-child(even) {
  margin-left: 30px;
}
.hrList div div {
  display: table-cell;
  padding: 15px;
  vertical-align: middle;
}
.hrList div div:nth-child(odd) {
  width: 33.33%;
}
.hrButton {
  display: inline-block;
  padding: 0.5em 1em 0.5em 1em;
  background: #376d90;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.9em;
  color: #fff;
  border-radius: 5px;
  margin: 0 0 0 auto;
}
.hrButton:hover {
  color: #000000;
  background-color: #f68b02;
  border: 2px #fff solid;
  transition: background-color 0.3s;
}
.hrimagebox{
  width: 100%;
  font-size: 0px;
}
.hrimagebox .hrimage{
  display: inline-block;
  box-sizing: border-box;
  width:24.8%;
  font-size: 16px;
  padding: 15px;
}
.bold {
  display: inline-block;
  padding: 1em 1.5em 1em 1.5em;
  background: #376d90;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.9em;
  color: #fff;
  border-radius: 12px;
  width: 300px;
  margin: 30px 0;
}
.bold:hover {
  color: #000000;
  background-color: #0097bc;
  border: 2px #fff solid;
  transition: background-color 0.3s;
}
.prd-category {
  color: #376d90;
  display: inline-block;
  position: relative;
  padding: 50px 0;
}
/*.prd-category:after {
  content: "";
  height: 4px;
  width: 0;
  display: block;
  background: transparent;
  transition: all 0.7s;
}
.prd-category:hover:after {
  width: 100%;
  background: #376d90;
}*/
.prd-category h2 {
  border-bottom:3px solid;
  color:#000;
  font-size: 2.2em;
  margin-bottom: 5px !important;
}

.hrNav {
  display: table;
  width: 100%;
}
.hrMenuse,
.hrNav li {
  display: table-row;
}
.hrMenuse a,
.hrNav li a {
  display: table-cell;
  text-align: center;
  padding: 20px;
}
/* hr css end */

/* customer css */
.tac-wrapper .swiper-wrapper,
.fin-wrapper .swiper-wrapper,
.customer-wrapper .swiper-wrapper {
  height: 680px;
}
.swiper-wrapper .swiper-slide img {
  width: 100%;
}

h2,
.customerList h2,
.customerList h3 {
  color: #0dc8a7;
  font-family: 微軟正黑體;
}

.customer-banner {
  background: url(https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/fta/freestocks-BStW5kYXw4E-unsplash.jpg)
    center no-repeat fixed;
  background-size: cover;
  -webkit-background-size: cover;
  padding: 60px 40px;
}

.customer-banner .title {
  font-size: 3.5rem;
}

/*.prd-category:hover:after {
  background: #000;
  width: 100%;
}*/

.item2 {
  width: 24%;
  display: inline-block;
}

.item3 {
  width: 33%;
  display: inline-block;
}

.header1 {
  /*background-image: linear-gradient(to top, #00dfbf, #2ea0d9);*/
  padding-bottom: 80px;
}

.customertitle {
  font-size: 3.5rem;
  color: #f9d536;
  padding-top: 80px;
}

.ServiceList {
  display: inline-block;
  width: 100%;
}

/*.ServiceList li {
  width: 10%;
  display: inline-table;
}*/

.ServiceList li p {
  font-size: 10px;
  color: #ffffff;
  margin: 2px 0;
}

.draw-border {
  box-shadow: inset 0 0 0 4px #58cdd1;
  color: #58afd1;
  -webkit-transition: color 0.25s 0.0833333333s;
  transition: color 0.25s 0.0833333333s;
  position: relative;
}

.draw-border::before,
.draw-border::after {
  border: 0 solid transparent;
  box-sizing: border-box;
  content: "";
  pointer-events: none;
  position: absolute;
  width: 0rem;
  height: 0;
  bottom: 0;
  right: 0;
}

.draw-border::before {
  border-bottom-width: 4px;
  border-left-width: 4px;
}

.draw-border::after {
  border-top-width: 4px;
  border-right-width: 4px;
}

.draw-border:hover::before,
.draw-border:hover::after {
  border-color: #e9501a;
  -webkit-transition: border-color 0s, width 0.25s, height 0.25s;
  transition: border-color 0s, width 0.25s, height 0.25s;
  width: 100%;
  height: 100%;
}

.draw-border:hover::after {
  -webkit-transition-delay: 0s, 0.25s, 0s;
  transition-delay: 0s, 0.25s, 0s;
}

.draw-border:hover::before {
  -webkit-transition-delay: 0s, 0s, 0.25s;
  transition-delay: 0s, 0s, 0.25s;
}

.buy-btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 30px;
  font: 700 2rem "Roboto Slab", sans-serif;
  padding: 1em 2em;
  letter-spacing: 0.05rem;
  width: 45rem;
}

.buy-btn a {
  color: #0dc8a7;
  text-decoration: none;
}

.buy-btn:hover a {
  color: #e9501a;
}

/* customer css end*/

/* fin css */
.fin h2 {
  color: #695799;
}

.fin .prd-category:after {
  content: "";
  height: 4px;
  width: 0;
  display: block;
  background: transparent;
  transition: all 0.7s;
}

.fin .prd-category:hover:after {
  width: 100%;
  background: #695799;
}

.fin-banner {
  background: url(https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/fta/bank.jpg) center
    no-repeat fixed;
  background-size: cover;
  -webkit-background-size: cover;
  padding: 60px 40px;
  position: relative;
}

.fin-banner h2 {
  font-size: 4rem !important;
}

.fin-banner h2 b {
  font-weight: 700;
}

.fin-banner p {
  color: #ffffff;
  font-size: 1.8rem;
}

.fin .draw-border {
  box-shadow: inset 0 0 0 4px#695799;
  color: #695799;
}

.fin .buy-btn a {
  color: #695799;
}

.fin .buy-btn:hover a {
  color: #e9501a;
}

.fin-answer {
  width: 100%;
  height: 87px;
  background: #eee;
  -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

.pur-bg-clr {
  width: 100%;
  background-color: #d2cde1;
  transform: skewY(-2deg);
  -webkit-transform: skewY(-2deg);
  -moz-transform: skewY(-2deg);
}

/* fin css end */

/* tac css */
.tac .prd-category:hover:after {
  background: rgb(137, 189, 31);
  width: 100%;
}
.tac-wrapper h2 {
  color: rgb(137, 189, 31);
  font-size: 4rem !important;
}

.tac-banner {
  background: url(https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/fta/mike-kononov-lFv0V3_2H6s-unsplash.jpg)
    center no-repeat fixed;
  background-size: cover;
  -webkit-background-size: cover;
  padding: 60px 40px;
  position: relative;
}

.tac-banner h2 {
  color: rgb(137, 189, 31);
  font-size: 4rem !important;
}

.tac-banner p {
  color: #ffffff;
  font-size: 16px;
}

.tac-grid {
  background-color: transparent;
  max-width: 1000px;
  width: 100%;
  margin: 20px auto;
  display: grid;
  grid-template-rows: repeat(3, 236px);
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 15px;
}

.tac-grid-item {
  padding: 20px;
  font-family: sans-serif;
  color: #fff;
}

.tac-file-wrapper {
  width: 100%;
  display: inline-block;
  margin: 10px 0;
}

.tac-file-item {
  display: inline-block;
  width: 23%;
  margin: 0 0.5%;
}

.spot-title {
  width: 154px;
  border-radius: 30px;
  background-color: #999a9a;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  margin-top: 25px;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 10px;
}

.tac .draw-border {
  box-shadow: inset 0 0 0 4px rgb(137, 189, 31);
}

.tac .buy-btn a {
  color: rgb(137, 189, 31);
}

.tac .buy-btn:hover a {
  color: #e9501a;
}

.tac-table {
  width: 100%;
}

.tac-table th {
  text-align: center;
  padding-bottom: 50px;
}

.tac-table th span.title {
  width: 100%;
  border-radius: 30px;
  background-color: #89bd1f;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  padding: 10px;
}

.tac-table td {
  padding: 6px;
  padding-bottom: 50px;
  vertical-align: bottom;
}

.tac-table td span {
  font-size: 2.25rem;
  font-weight: 700;
  text-align: justify;
  text-justify: inter-ideograph;
}

.tac-table td:last-child span {
  color: #ff0000;
}

.tac-table td hr {
  margin: 0px;
  border: 1px solid #89bd1f;
}

.process-wrapper {
  background-color: transparent;
  max-width: 1000px;
  width: 100%;
  margin: 20px auto;
  display: grid;
  grid-template-rows: repeat(3, 236px);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
}
/* tac css end */
