/***********************************sei banner images*********************************/
.banner-top1 {
  background: url("../images/1.jpg") no-repeat center;
    background-size: 100% 100%;
}

.banner-top2 {
  background: url("../images/2.jpg") no-repeat center;
  background-size: 100% 100%;
}

.banner-top3 {
  background: url("../images/3.jpg") no-repeat center;
  background-size: 100% 100%;
}
.banner-top4 {
  background: url("../images/4.png") no-repeat center;
  background-size: 100% 100%;
}


.fin-top-banner1 {
  background: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/fin/1.jpg") no-repeat
    center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
}

.fin-top-banner2 {
  background: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/fin/2.jpg") no-repeat
    center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
}

.customer-top-banner1 {
  background: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/customer/1.jpg")
    no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
}

.customer-top-banner2 {
  background: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/customer/2.jpg")
    no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
}

.tac-top-banner1 {
  background: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/tac/1.jpg") no-repeat
    center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
}

.tac-top-banner2 {
  background: url("https://powerinvoice168.aibooksbank.com/contents/frontend/assets/images/tac/2.jpg") no-repeat
    center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
}

/*sei*/
.seiapplicationsteps {
  font-family: 微軟正黑體;
  text-align: center;
  display: flex;
  overflow-x:hidden;
}
.seiapplicationsteps li {
  float: left;
  min-width: 20%;
  width: 33.33%;
  padding: 10px;
}
.seiapplicationsteps li a {
  color: #000000;
}
.seiapplicationsteps li a h3 {
  width: auto;
  margin: 15px auto;
  color: #000000;
  font-weight: 500;
}
.sei .category {
  margin-top: 25px;
  margin-bottom: 25px;
}
.sei .category li a {
  font-size: 15px;
  color: #000;
  font-weight: 600;
}
/*.seibanner {
  width: 100%;
  display: table;
  padding: 30px 0;
  font-family: "微軟正黑體";
  line-height: 1.6;
  position: relative;
}
.seibanner-wrapper {
  display: table;
  width: 100%;
}
.seibanner dt,
.seibanner dt2,
.seibanner dd {
  display: table-cell;
  vertical-align: middle;
  font-weight: normal;
  height: 360px;
  width: 50%;
}
.seibanner dt {
  width: 50%;
}

.seibanner dt2 {
  width: 30%;
}

.seibanner dd {
  padding-left: 50px;
  font-family: 微軟正黑體;
}
.seibanner .socialAbout {
  margin-top: 20px;
}
.seibanner h1 {
  
  color: #000000;
  font-size: 4rem;
  margin: 20px 0;
  font-weight: 500;
}

.seibanner hs1 {
  
  color: #0dc8a7;
  font-size: 32px;
  font-weight: 700;
}

.seibanner h2 {
  margin-bottom: 20px;
}

.seibanner hs2 {
  
  color: #000000;
  font-size: 22px;
  font-weight: 300;
  
}

.seibanner h3 {
  font-family: 微軟正黑體;
  color: rgb(147, 111, 175);
  margin-bottom: 15px;
}
.seibanner p {
  line-height: 1.2;
  font-size: 20px;
  color: #000000;
}*/
.sei_bottom {
  width: 33.33%;
  height: 4em;
  background: #4b6552;
  border-radius: 12px;
}
.sei_bottom a {
  color: #fff;
  font-size: 1.15em;
  letter-spacing: 2px;
}
.sei_bottom:hover a,
.sei_bottom a:hover {
  letter-spacing: 6px;
  transition: 1s all;
  -webkit-transition: 1s all;
  -moz-transition: 1s all;
  -o-transition: 1s all;
  -ms-transition: 1s all;
}
.sei_bottom:active,
.sei_bottom:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.sei_bottom:active a,
.sei_bottom:focus a {
  color: #495057;
}
.bg-clr {
  /*background-color: #f0eef5;*/
  background-color: #e6f9f7;
}

.advantage {
  display: table;
  width: 100%;
}
.advantage h1 {
  color: rgb(147, 111, 175);
}
.advantage h2 {
  color: #4b6225;
  font-weight: 700;
  border-bottom: 5px solid;
  padding-bottom: 10px;
  width: 340px;
  font-size: 32px;
}
.advantage h4 {
  color: rgb(147, 111, 175); /*line-height:3;*/
  padding: 15px 0;
  font-size: 24px;
  font-weight: 600;
}
.advantage h5 {
  width: 100%;
  text-align: left;
  color: #000000;
  line-height: 1.5;
  font-size: 20px;
}

.advantage ol {
   list-style-type:disc;
}

.advantage2 {
  background: url("https://powerinvoice168.aibooksbank.com/upload/selectronicinvoice/4.jpg") center no-repeat
    fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
}
.advantage2 h3 {
  font-size: 40px;
  font-weight: 700;
  color: #000000;
  line-height: 3;
}
.advantage-nav img {
  width: 311px;
}
.advantage-nav h4 {
  color: #ff9300;
  font-size: 24px;
  font-weight: 600;
  line-height: 2;
}
.advantage-nav h5 {
  color: #000000;
  font-size: 20px;
  line-height: 1.2;
  text-align: left;
}

.description-nav {
  display: flex;
}
.description {
  display: inline-block;
  width: 50%;
  max-width: 100%;
  border: 3px solid #7c68ab;
  transition: 0.3s;
  margin: 10px 15px;
  background: #fff;
  border-collapse: collapse;
  border-radius: 10px;
}
.description img {
  height: 82px !important;
  padding-left: 15px;
  position: absolute;
  bottom: 10px;
}
.description div {
  position: relative;
}
.description-head {
  background-color: #7c68ab;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  padding: 10px 15px;
  padding-left: 90px;
  color: #fff !important;
  font-weight: 700;
  height: 72px;
}
.description-head h3 {
  padding-left: 75px;
  color: #fff !important;
  font-weight: 700;
}
.description-content {
  padding: 15px;
}
.description-content h4 {
  font-size: 27px;
  color: rgb(147, 111, 175);
  padding: 10px 0;
  font-weight: 600;
}
.description-content h5,
.description-content h5 li {
  font-size: 20px;
  font-weight: 500;
}

.csslider {
  text-align: left;
  position: relative;
  margin-bottom: 0px;
}

.csslider > input {
  display: none;
}

.csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
  margin-left: -900%;
}

.csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
  margin-left: -800%;
}

.csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
  margin-left: -700%;
}

.csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
  margin-left: -600%;
}

.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
  margin-left: -500%;
}

.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
  margin-left: -400%;
}

.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
  margin-left: -300%;
}

.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
  margin-left: -200%;
}

.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
  margin-left: -100%;
}

.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
  margin-left: 0%;
}

.csslider > ul {
  position: relative;
  height: 680px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.csslider > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}

.csslider > ul > li.scrollable {
  overflow-y: scroll;
}

.csslider > .navigation {
  position: absolute;
  bottom: 10%;
  left: 49.5%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.csslider > .navigation > div {
  margin-left: -100%;
}

.csslider > .navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 5px;
  padding: 5px;
  background: #fff;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
}

.csslider > .navigation label:hover:after {
  opacity: 1;
}

.csslider > .navigation label:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -7px;
  margin-top: -7px;
  background: #d84315;
  border-radius: 50%;
  padding: 7px;
  opacity: 0;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
}

.csslider > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.csslider.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}

.csslider.inside .navigation label {
  border: 1px solid #7e7e7e;
}

.csslider
  > input:nth-of-type(1):checked
  ~ .navigation
  label:nth-of-type(1):after,
.csslider
  > input:nth-of-type(2):checked
  ~ .navigation
  label:nth-of-type(2):after,
.csslider
  > input:nth-of-type(3):checked
  ~ .navigation
  label:nth-of-type(3):after,
.csslider
  > input:nth-of-type(4):checked
  ~ .navigation
  label:nth-of-type(4):after,
.csslider
  > input:nth-of-type(5):checked
  ~ .navigation
  label:nth-of-type(5):after,
.csslider
  > input:nth-of-type(6):checked
  ~ .navigation
  label:nth-of-type(6):after,
.csslider
  > input:nth-of-type(7):checked
  ~ .navigation
  label:nth-of-type(7):after,
.csslider
  > input:nth-of-type(8):checked
  ~ .navigation
  label:nth-of-type(8):after,
.csslider
  > input:nth-of-type(9):checked
  ~ .navigation
  label:nth-of-type(9):after,
.csslider
  > input:nth-of-type(10):checked
  ~ .navigation
  label:nth-of-type(10):after,
.csslider
  > input:nth-of-type(11):checked
  ~ .navigation
  label:nth-of-type(11):after {
  opacity: 1;
}

.csslider > .arrows {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 26px;
  z-index: 1;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.csslider > .arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 8px;
  box-shadow: inset 2px -2px 0 1px #ffffff;
  cursor: pointer;
  -moz-transition: box-shadow 0.15s, margin 0.15s;
  -o-transition: box-shadow 0.15s, margin 0.15s;
  -webkit-transition: box-shadow 0.15s, margin 0.15s;
  transition: box-shadow 0.15s, margin 0.15s;
}

.csslider > .arrows label:hover {
  box-shadow: inset 3px -3px 0 2px #ff3c41;
  margin: 0 0px;
}

.csslider > .arrows label:before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}

.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
  display: block;
  left: 5%;
  right: auto;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
  display: block;
  right: 5%;
  left: auto;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

#slider1 > input:nth-of-type(1):checked ~ ul #bg,
#slider1 > input:nth-of-type(2):checked ~ ul #bg1,
#slider1 > input:nth-of-type(3):checked ~ ul #bg2,
#slider1 > input:nth-of-type(4):checked ~ ul #bg3 {
  width: 100%;
  -moz-transition: 0.5s 0.5s;
  -o-transition: 0.5s 0.5s;
  -webkit-transition: 0.5s 0.5s;
  transition: 0.5s 0.5s;
  text-align: center;
  padding: 0;
  height: 100%;
}

#slider1 > input:nth-of-type(1):checked ~ ul #bg div,
#slider1 > input:nth-of-type(2):checked ~ ul #bg1 div,
#slider1 > input:nth-of-type(3):checked ~ ul #bg2 div,
#slider1 > input:nth-of-type(4):checked ~ ul #bg3 div {
  -moz-transform: translate(0);
  -ms-transform: translate(0);
  -o-transform: translate(0);
  -webkit-transform: translate(0);
  transform: translate(0);
  -moz-transition: 0.5s 0.9s;
  -o-transition: 0.5s 0.9s;
  -webkit-transition: 0.5s 0.9s;
  transition: 0.5s 0.9s;
}
/* sei css end */

/* responsive */

@media screen and (max-width: 1280px) {
  .csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
  .csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
  .csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
  .csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
  .csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
  .csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
  .csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
  .csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
  .csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
  .csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
  .csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
  .csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
    right: 3%;
  }

  .csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
  .csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
  .csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
  .csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
  .csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
  .csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
  .csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
  .csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
  .csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
  .csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
  .csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
  .csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
    left: 3%;
  }
}

@media screen and (max-width: 900px) {
  .csslider > .navigation {
    bottom: 7%;
  }
}

@media screen and (max-width: 800px) {
  .csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
  .csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
  .csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
  .csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
  .csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
  .csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
  .csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
  .csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
  .csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
  .csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
  .csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
  .csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
    right: 5%;
  }

  .csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
  .csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
  .csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
  .csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
  .csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
  .csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
  .csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
  .csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
  .csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
  .csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
  .csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
  .csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
    left: 5%;
  }
}