@import url("https://fonts.googleapis.com/css?family=Raleway:400,500,600,600i,700,800");


 /*font-icon*/
 @import url("../fonts/bs-font/bootstrap-icons.css");
 @import url("../fonts/@fortawesome/fontawesome-free/css/all.css");

 /* Colors */
 :root {
   --color-default: #1A3254;
   --color-primary: #004098;
   --color-secondary: #484848;
   --color-muted: #7f7f7f;
   --color-light: #e1e3ed;
   --color-info: #48A4D5;


 }

 html,
 body {
   line-height: 1.6;
   height: 100%;
   color: var(--color-muted);
   background: #F7F9FB;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
   font-family: "Raleway", sans-serif, arial, "Microsoft JhengHei";
 }

 html {
   scroll-padding-top: 80px;
 }

 .navbar-toggler:focus {
   box-shadow: none !important;
 }

 ul,
 li {
   list-style: none;
 }

 a {
   text-decoration: none;
 }

 /* navbar */
 .navbar {
   padding: 1rem 2%;
   transition: background .5s ease-in-out, padding .5s ease-in-out;
 }

 .navbar-nav .nav-link {
   color: rgba(255, 255, 255, 0.6);
   font-size: 16px;
 }

 .navbar-nav li+li {
   margin-left: 8px;
 }

 .navbar-nav li:last-child {
   margin-left: 20px;
 }

 .navbar-nav .nav-link:focus {
   color: #FFF;
 }

 .navbar-nav .nav-link:hover {
   color: #fff;
   cursor: pointer;
 }

 .navbar .dropdown .dropdown-menu a:hover {
   color: #47b2e4 !important;
 }

 .navbar-expand-lg .navbar-collapse {
   justify-content: flex-end;
 }

 .top-nav-collapse {
   background: #004098;
   padding: 0.53em 6%;
 }

 .navbar-toggler {
   border: 0;
 }

 .navbar-toggler-icon {
   background-image: url(../images/icon/list.svg);
 }

 .logo {
   height: 42px;
 }

 .logo-white {
   display: none;
 }

 .top-nav-collapse .logo {
   display: none;
 }

 .top-nav-collapse .logo-white {
   display: block;
 }


 /* dropdown */
 .navbar .dropdown .dropdown-menu {
   display: block;
   opacity: 0;
   visibility: hidden;
   transform: translate(0, 20px);
   transition: all .3s;
   margin-top: -1px;
   margin-left: -70px;
   min-width: 110px;
   padding: 0;
 }

 .navbar .dropdown .dropdown-menu.show .dropdown-menu {
   opacity: 1;
   transform: translate(0, 0);
 }

 .navbar .dropdown .dropdown-menu a {
   display: flex;
   align-items: center;
   padding: 12px 20px;
   border-bottom: 1px solid #eee;
   font-size: 14px;
 }

 .navbar .dropdown .dropdown-menu li:last-child a {
   border-bottom: 0;
 }

 .navbar .dropdown .dropdown-menu a:hover {
   background-color: transparent;
   color: #004098;
   ;
 }

 .navbar .dropdown .dropdown-menu a img {
   width: 20px;
   height: 20px;
   display: inline-block;
   background-size: contain;
   vertical-align: middle;
   margin: 0px 8px 0 0;
 }

 .navbar .dropdown .dropdown-menu:before {
   content: '';
   display: block;
   width: 0;
   height: 0;
   border-style: solid;
   transform: scale(0.9999);
   border-width: 0 10px 10px 10px;
   border-color: transparent transparent #fff transparent;
   position: absolute;
   right: 10px;
   top: -10px;
 }

 .navbar .dropdown .dropdown-toggle:after {
   margin-left: 0;
 }

 .navbar .dropdown:hover .dropdown-menu {
   opacity: 1;
   visibility: visible;
   transform: translate(0, 0);
 }

 .navbar .dropdown button .caret {
   margin-top: -2px;
 }

 .navbar-nav .dropdown li+li {
   margin-left: 0px;
 }

 .navbar-nav .dropdown li:last-child {
   margin-left: 0px;
 }

 /* move top animation  */
 .moveTop {
   opacity: 0;
   transition: all 1s;
   transform: translate(0, 50px);
 }

 .moveTop.active {
   opacity: 1;
   transform: translate(0, 0);
 }

 

 /*page-title*/
 .page-title-wrap {
  background-repeat: no-repeat;
  background-position: right top;
  padding: 130px 0 70px;
  position: relative;
  min-height: 230px;
  background-attachment: fixed;
}

.page-title-wrap::before {
  content: '';
  background-color: rgba(27, 47, 69, 0.7);
  position: absolute;
  inset: 0;
}

.page-title-wrap.with-img {
  overflow: visible;
}

.news-img {
  position: relative;
  margin-bottom: 0;
  border-radius: 20px;
  width: 280px;
  height: 140px;
  object-fit: cover;
  box-shadow: 0px 0 20px rgba(27, 47, 69, 0.1);
}

.page-title {
  position: relative;
  padding: 20px;
  text-align: center;
}

.page-title h2 {
  color: rgba(255, 255, 255, 0.6);
  font-weight: bold;
  line-height: 1.5;

}

.page-title h3 {
  color: #1A3254;
  font-weight: bold;
  line-height: 2;
  font-size: 24px;
}

.page-title h5 {

  font-size: 16px;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 0px;

}


 @media screen and (max-width:991px) {
   .navbar-nav {
     background: #004098;
     padding: 0.53em 2%;
   }

   .logo {
     display: none;
   }

   .logo-white {
     display: block;
     height: 30px;
   }

   .navbar-nav li+li {
     margin-left: 0px;
   }

   .navbar-nav li:last-child {
     margin-left: 0;
   }

   .navbar .dropdown .dropdown-menu {
     display: none;
     opacity: 0;
     visibility: hidden;
   }

   .navbar .dropdown .dropdown-menu.show {
     display: block;
     opacity: 1;
     visibility: visible;
     transform: translate(0, 0);
     margin-left: 0;
     margin-top: 8px;
   }

   .navbar .dropdown .dropdown-menu:before {
     right: auto;
     left: 10px;
     top: -10px;
   }

   .navbar-toggler-icon {
    width: 1em;
    height: 1em;
 }
}


 #navSection {
   position: -webkit-sticky;
   position: sticky;
   top: 68px;
   z-index: 999;
   background-color: #e4ecf5d5;
   justify-content: center;
   opacity: 0;
   display: none;

 }

 #navSection.show {
   opacity: 1;
   display: flex;
   transition: all 0.5s;
 }

 #navSection .nav-link {
   padding: 16px 16px;
   font-weight: bold;
   color: var(--color-default) !important;
 }

 #navSection .nav-link.active {
   color: var(--color-primary) !important;
   font-size: 18px;
   transition: 0.4s;
 }


 @media screen and (max-width:991px) {
   .page-title-wrap {
     margin-top: 5px;
     background-position: 70% 60px;
     padding: 80px 20px 20px;
   }

   .page-title h5 {
     font-size: 16px;
   }
 }

 @media screen and (max-width:767px) {

   #navSection.show {
     overflow-x: auto;
     flex-wrap: nowrap;
     justify-content: flex-start;
   }

   #navSection .nav-link {
     font-size: 14px;
     padding: 10px 16px;
     white-space: nowrap;

   }

   #navSection .nav-link.active {
     font-size: 15px;
   }

 }

 .tx-title {
   font-size: 28px;
   font-weight: 800;
   color: var(--color-default);

 }

 .indexTitle {
   font-size: 90px;
   font-weight: 800;
   line-height: 100px;
   background: -webkit-linear-gradient(hsl(0, 0%, 100%), hsla(0, 0%, 93%, 0.89), hsla(0, 0%, 93%, 0.539));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

 }

 .tx-info {
   font-size: 18px;
   font-weight: 600;
   color: var(--color-secondary);
 }

 .tx-link {
   color: var(--color-primary);
   text-decoration: underline;
 }

 .tx-white {
   color: #fff !important;
 }

 .tx-black {
   color: #000 !important;
 }

 .tx-red {
   color: #ef233c !important;
 }

 .tx-orange {
   color: #e85d04 !important;
 }

 .tx-primary {
   color: var(--color-primary) !important;
 }

 .tx-bold {
   font-weight: bold !important;
   ;
 }

 .tx-italic {
   font-style: italic;
 }

 .tx-18 {
   font-size: 18px;
 }

 .tx-20 {
   font-size: 20px;
 }

 .tx-24 {
   font-size: 24px;
 }

 .tx-36 {
   font-size: 36px;
 }

 .tx-note {
   color: #48A4D5 !important;
   font-weight: 400;
   line-height: 2;
 }


 .bg-white {
   background-color: #fff;
 }

 .bg-gray {
   background-color: #a4a6a8;
 }

 .bg-lightgray {
   background-color: #F7F9FB;
 }

 .bg-dark {
   background-color: #485b76a8;
 }

 .bg-intro {
   background-image: linear-gradient(90deg, #457bad, #FFFFFF);
 }

 .badge.badge-dark {
   font-size: 16px;
   /* background-color: var(--color-default); */
   padding: 8px 16px;
 }

 .badge+.badge {
   margin: 4px;
 }

 .bg-top {
   position: relative;
   background: #074987 url(../images/img/topbg.png) right no-repeat;
   background-size: 80% 100%;
   color: #fff;
   height: 520px;
   padding-top: 150px !important;
 }

 .bg-top-img {
   position: absolute;
   left: -10px;
   width: 100%;
   height: 400px;
   background: url(../images/img/top01.svg) top left no-repeat;
   background-size: contain;
   color: #fff;
   margin-top: -5rem;
 }

 @media screen and (max-width:1600px) {
   .bg-top {
     height: 480px;
     padding-top: 140px !important;
   }

   .bg-top-img {
     left: -30px;
     height: 370px;
     margin-top: -7rem;
   }
 }

 @media screen and (max-width:1400px) {
   .bg-top {
     height: 450px;
     padding-top: 120px !important;
   }

   .bg-top-img {
     left: -30px;
     height: 340px;
     margin-top: -5rem;
   }
 }

 @media screen and (max-width:1200px) {
   .bg-top {
     height: 400px;
     padding-top: 80px !important;
   }

   .bg-top-img {
     left: -40px;
     height: 280px;
     margin-top: -2rem;
   }
 }

 @media screen and (max-width:991px) {
   .bg-top {
     height: 700px;
     padding-top: 440px !important;
     background-image: linear-gradient(90deg, #074987, #32A1B1);
   }

   .bg-top-img {
     top: 40px;
     margin-top: 0;
     height: 355px;
     background: url(../images/img/top01.svg) left top no-repeat;
     background-size: contain;
   }
 }

 @media screen and (max-width:767px) {
   .bg-top {
     height: 740px;
     padding-top: 480px !important;
     background-image: linear-gradient(90deg, #074987, #32A1B1);
   }

   .bg-top-img {
     top: 40px;
     margin-top: 0;
     height: 400px;
     background: url(../images/img/top01.svg) center top no-repeat;
     background-size: cover;
   }

 }



 /*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
 .mask {
   position: relative;
   padding-bottom: 200px;
 }

 .mask::before {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 150px 0 0 1000px;
   border-color: transparent transparent transparent #fff;
 }

 .mask::after {
   content: '';
   position: absolute;
   right: 0;
   bottom: 0;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 0 150px 1000px;
   border-color: transparent transparent #fff transparent;
 }

 .mask.gray::before {
   border-color: transparent transparent transparent #F7F9FB;
 }

 .mask.gray::after {
   border-color: transparent transparent #F7F9FB transparent;
 }

 .mask .arrow-down {
   position: absolute;
   bottom: 60px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
 }

 .arrow-down {
   display: block;
   font-size: 24px;
   color: #fff;
   text-align: center;
 }

 .arrow-down.vert-move {
   -webkit-animation: mover .5s infinite alternate;
   animation: mover .5s infinite alternate;
 }

 .arrow-down.vert-move {
   -webkit-animation: mover .5s infinite alternate;
   animation: mover .5s infinite alternate;
 }

 @-webkit-keyframes mover {
   0% {
     transform: translateY(0);
   }

   100% {
     transform: translateY(-10px);
   }
 }

 @keyframes mover {
   0% {
     transform: translateY(0);
   }

   100% {
     transform: translateY(-10px);
   }
 }

 @-webkit-keyframes scale {
   0% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.08);
   }

   100% {
     transform: scale(1);
   }
 }

 @keyframes scale {
   0% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.08);
   }

   100% {
     transform: scale(1);
   }
 }

 @media screen and (max-width:991px) {
   .arrow-down {
     color: var(--color-info);
   }
 }

 section {
   overflow: hidden;
   padding: 80px 0;
 }

 .section-header {
   text-align: center;
   padding-bottom: 30px;
 }

 .section-header h2 {
   font-size: 30px;
   font-weight: 600;
   margin-bottom: 20px;
   padding-bottom: 20px;
   position: relative;
   color: var(--color-default);
 }

 .section-header h2:after {
   content: "";
   position: absolute;
   display: block;
   width: 60px;
   height: 3px;
   background: var(--color-primary);
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
 }

 .section-header.text-start h2:after {
   right: auto;
 }

 .section-header p {
   margin-bottom: 0;
   color: var(--color-default);
 }

 @media screen and (max-width:991px) {
   /* .section-header {
     text-align: left;
   } */

   .section-header h2 {
     font-size: 26px;
   }

   /* .section-header h2:after {
     right: auto;
   } */
 }


 .secureIcon {
   width: 80px;
   margin-bottom: 5px;
 }

 .secureIcon img {
   width: 80px;
   height: 80px;
 }

 /*關於我們*/
 .origin {
   background: url(../images/img/originbg.png) no-repeat left bottom;
   background-size: cover;
   padding: 120px 0;
 }

 .section-righimg {
   padding-top: 0px;
 }

 .section-righimg img {
   margin-right: -50%;
   width: 150%;
 }


 .section-leftimg {
   padding-bottom: 40px;
 }

 .section-leftimg img {
   margin-left: -50%;
   width: 150%;
 }

 .module .tx-info {
   margin-bottom: 2rem;
 }

 .module ul {
   display: flex;
   justify-content: space-evenly;
   padding-left: 0;
 }

 .module ul li {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 1%;
 }

 .module ul li:hover {
   transform: translateY(-5px);
 }

 .module ul li a {
   text-align: center;
 }

 .module ul li:hover h5 {
   color: #47b2e4;
 }

 .module ul li h5 {
   color: #000000;
   font-weight: bold;
   font-size: 20px;
   margin: 13px 0 0 0;
 }

 .module ul li p {
   color: #727171;
   font-size: 14px;
 }

 .module ul li a img {
   width: 60px;
 }

 /* #region footer*/
 .footer {
   position: relative;
   background: #004098;
   padding: 2.5rem 0 3.5rem;
   color: #FFFFFF;
 }

 .footer ul {
   list-style: none;
   padding-left: 0;
 }

 .footer li {
   font-size: 14px;
   line-height: 1.7;
 }

 .footer h4 {
   font-size: 18px;
   color: #FFFFFF;
   border-bottom: none;
   margin-bottom: 8px;
   font-weight: bold;
 }

 .footer a {
   color: #fff;
   text-decoration: underline;
 }

 .footer .freepik-link {
   color: #ffffff84;
   text-decoration: none;
 }

 .copyright {
   position: absolute;
   bottom: 0;
   display: block;
   width: 100%;
   height: 36px;
   color: #fff;
   text-align: center;
   background-color: #003988;
   line-height: 36px;
   font-size: 13px;
 }

 /**table**/
 .table_customer {
   width: 100%;
 }

 .tab-pane:has(> .table_customer) {
   max-height: 70vh;
   overflow-y: auto;
 }

 .table_customer thead th {
   border-bottom: 1px solid var(--color-muted);
   position: sticky;
   top: 0;
   background: #fff;
   z-index: 2;
 }

 .table_customer th {
   text-align: center;
 }

 .table_customer tr:nth-child(2n) {
   background-color: #eee;
 }

 .table_customer td {
   border-top: 2px solid #F7F9FB;
   border-bottom: 2px solid #F7F9FB;
   text-align: center;
   padding: 2px 8px;
 }


 .table_customer th:first-child,
 .table_customer th:nth-child(2),
 .table_customer td:first-child,
 .table_customer td:nth-child(2) {
   text-align: left;
 }

 .td-title {
   background: #F7F9FB;
   font-size: 20px;
   color: var(--color-secondary);
   font-weight: bold;
   border: 0px !important;
   padding-top: 16px !important;
 }

 .table_customer tr:hover .td-title {
   background: #F7F9FB;
 }

 .crm {
   background-color: #3fb691;
   color: #fff
 }

 .wms {
   background-color: #179bcb;
   color: #fff
 }

 .pbs {
   background-color: #38bbcd;
   color: #fff
 }

 .robo {
   background-color: #085192;
   color: #fff
 }

 .ins {
   background-color: #2F896C;
   color: #fff;
 }

 .sss {
   background-color: #2CC2B4;
   color: #fff;
 }

 .table_customer tr:hover td {
   background-color: #fff5e2;
   color: var(--color-secondary);
 }

 @media screen and (max-width:767px) {

   .table_customer thead th {
     position: static;
   }

   .table_customer thead th:first-child,
   .table_customer thead th:nth-child(2) {
     display: none;
   }

   .table_customer tr {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     align-content: center;
   }

   .table_customer tr+tr {
     margin-top: 8px;
   }

   .table_customer th,
   .table_customer td {
     flex: 1;
     border: 0;
     line-height: 1.2;
   }

   .table_customer tr th:first-child,
   .table_customer tr td:first-child {
     flex-basis: 100%;
     padding-top: 8px;

   }

   .table_customer tr th:nth-child(2),
   .table_customer tr td:nth-child(2) {
     flex-basis: 100%;
     padding-bottom: 8px;
   }


 }


 /**tab**/
 .tab-nav-line {
   position: relative;
 }

 .nav-line {
   border-bottom: 1px solid var(--color-light);
   margin-bottom: 8px;
 }

 .nav-line .nav-link {
   color: var(--color-muted);
   font-size: 20px;
   font-weight: bold;
   position: relative;
 }

 .nav-line .nav-link::before {
   left: 15px;
   right: 15px;
   bottom: -1px;
   content: "";
   height: 2px;
   opacity: 0;
   position: absolute;
   -webkit-transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   -o-transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   background-color: var(--color-muted);
 }

 .nav-line .nav-link:hover::before,
 .nav-line .nav-link.active::before {
   left: 0;
   right: 0;
   opacity: 1;
   background-color: var(--color-primary);
 }

 .nav-line .nav-link.active {
   color: var(--color-primary);
 }

 .tab-nav-lineVT {
   flex-direction: column;
 }

 .tab-nav-lineVT .nav-line {
   border-bottom: 0;
   border-right: 1px solid var(--color-muted);
   justify-content: flex-end;
 }

 .tab-nav-lineVT .nav-link {
   font-size: 14px;
   text-align: right;
 }

 .tab-nav-lineVT .nav-link::before {
   content: none;
 }

 .tab-nav-lineVT .nav-link:hover {
   border-bottom: 0;
   border-right: 2px solid #004098;
 }

 .tab-nav-lineVT .nav-link.active {
   border-bottom: 0;
   border-right: 2px solid #004098;
 }

 .icon-mpc {
   width: 100%;
   max-width: 110px;
 }

 .fa-envira {
   color: rgb(22, 142, 87);
   margin-right: 5px;
 }

 @media screen and (max-width:991px) {

   .tab-nav-lineVT {
     flex-direction: row;

   }

   .tab-nav-lineVT .nav-line {
     border-bottom: 1px solid var(--color-muted);
     border-right: 0;
     flex: 1 1 auto;
     justify-content: flex-start;

   }

   .tab-nav-lineVT .nav-link {
     text-align: left;
   }

   .tab-nav-lineVT .nav-link:hover {
     border-bottom: 2px solid #004098;
     border-right: 0;
   }

   .tab-nav-lineVT .nav-link.active {
     border-bottom: 2px solid #004098;
     border-right: 0;
   }

 }




 .info-list li {
   list-style: none;
   position: relative;
 }

 .info-list li::before {
   content: '';
   width: 12px;
   height: 12px;
   background: url("../images/icon/dot.svg");
   position: absolute;
   left: -20px;
   top: 8px;
 }

 .info-list li+li {
   margin-top: 16px;
 }

 .info-list li p {
   font-size: 18px;
   font-weight: bold;
   color: #38bbcd;
   margin-bottom: 4px;
 }

 .info-list li ul li::before {
   content: "◆";
   font-size: 20px;
   background: none;
   top: -4px;
 }

 .info-list li ul {
   margin-bottom: 16px;
 }

 .info-list li ul li+li {
   margin-top: 4px;
 }

 .info-list li ul li p {
   font-size: 16px;
   color: var(--color-secondary);
 }


 /*.list-marked*/

 .list-marked li {
   position: relative;
   list-style: none;
 }

 .list-marked li:before {
   position: absolute;
   top: -8px;
   left: -32px;
   content: '\F26E';
   font-family: "bootstrap-icons";
   display: inline-block;
   margin-right: 10px;
   font-size: 24px;
   color: var(--color-info);
 }

 .list-marked li+li {
   margin-top: 6px;
 }

 .list-marked li ul {
   padding-left: 24px;
   margin-top: 8px;
 }

 .list-marked li li:before {
   content: '◆';
   font-size: 14px;
   color: var(--color-muted);
   top: 0px;
   left: -24px;
   margin-right: 0;
 }

 .list-marked-spacing-lg li {
   padding-left: 26px;
 }

 .reason-list-container {
   border-left: 3px solid var(--color-info);
 }

 .reason-list-container .list-group {
   display: flex;
   flex-direction: row;
   margin-left: -38px;
   margin-bottom: 20px;
 }

 .reason-list-container .list-group:last-child {
   margin-bottom: 0;
 }

 .reason-list-container .list-group .list-number {
   font-size: 24px;
   font-weight: 700;
   color: #fff;
   line-height: 28px;
   width: 28px;
   height: 28px;
   background: var(--color-info);
   border-radius: 32px;
   margin-right: 24px;
   margin-left: 24px;
   text-align: center;
 }

 .reason-list-container .list-group .list-content {
   width: calc(100% - 100px);
 }

 .reason-list-container .list-group .list-content p {
   margin-bottom: 0;
 }

 .reason-listHT-container {
   display: flex;
   margin-top: 64px;
 }

 .reason-listHT-container .list-group {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .reason-listHT-container .list-group:after {
   content: '';
   position: absolute;
   top: 0;
   left: calc(50% + 32px);
   border-top: 3px dashed #fff;
   width: 100%;
 }

 .reason-listHT-container .list-group:last-child:after {
   content: none;
 }

 .reason-listHT-container .list-group .list-img {
   margin-top: -32px;
   width: 72px;
   height: 72px;
   position: relative;
   margin-bottom: 8px;
 }

 .reason-listHT-container .list-group .list-img img {
   width: 100%;
 }

 .reason-listHT-container .list-group .list-img::after {
   content: '';
   display: block;
   background-color: rgba(255, 255, 255, 0.95);
   width: 80px;
   height: 80px;
   border-radius: 50%;
   position: absolute;
   top: 0;
   left: -4px;
   z-index: -1;
 }

 .reason-listHT-container .list-group .list-content {
   width: calc(100% - 30px);
   text-align: center;
   color: #fff;
 }

 @media screen and (max-width:991px) {
   .reason-listHT-container {
     flex-direction: column;
     margin-top: 0;
   }

   .reason-listHT-container .list-group {
     align-items: center;
     flex-direction: row;
     margin-left: 20px;
   }

   .reason-listHT-container .list-group+.list-group {
     margin-top: 40px;
   }

   .reason-listHT-container .list-group:after {
     content: '';
     position: absolute;
     top: 80px;
     left: 36px;
     border-top: 0;
     border-left: 3px dashed #fff;
     width: auto;
     height: 100%;
   }

   .reason-listHT-container .list-group .list-img {
     margin-top: 0px;
     margin-bottom: 0px;
   }

   .reason-listHT-container .list-group .list-content {
     width: calc(100% - 150px);
     margin-left: 20px;
     text-align: left;
   }
 }

 .list-icon {}

 .list-icon li {
   display: flex;
   align-items: flex-start;
   padding: 8px;
   border-radius: 6px;
 }

 .list-icon li:hover {
   box-shadow: 0px 0 20px rgba(27, 47, 69, 0.1);
   transform: translateY(-5px);
   transition: 0.3s;
 }

 .list-icon li img {
   width: 64px;
 }

 .list-icon h6 {
   color: var(--color-info);
   font-size: 20px;
   letter-spacing: 1.5px;
   font-weight: bold;
   border-left: 3px solid var(--color-info);
   padding-left: 10px;
 }

 .list-icon p {
   margin-left: 14px;
 }

 .list-icon img {
   margin-right: 16px;
 }

 .list-icon.icon-circle li+li {
   margin-top: 20px;
 }

 .list-icon.icon-circle h6 {
   border-left: 0;
 }

 .list-icon.icon-circle img {
   margin-right: 0px;
   margin-left: 16px;
   background-color: #96c0eb;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   padding: 6px;

 }

 .list-icon.icon-circle i {
   margin-right: 8px;
   background-color: var(--color-info);
   min-width: 48px;
   height: 48px;
   border-radius: 50%;
   font-size: 30px;
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
 }


 .icon-box-wrap {
   padding: 20px 26px 20px 16px;
   border-radius: 6px;
   background: #fff;
   border: 2px solid #eee;
   height: 100%;
   display: flex;
   align-items: flex-start;
 }

 .icon-box-wrap:hover {
   box-shadow: 0px 0 20px rgba(27, 47, 69, 0.1);
   transform: translateY(-5px);
   transition: 0.3s;
   background-color: var(--color-info);
   color: #Fff;
 }

 .icon-box-wrap:hover h6 {
   color: #fff !important;
 }


 .icon-box-wrap .icon {
   text-align: center;
   width: 35px;
   margin-right: 10px;
 }

 .icon-box-wrap .content {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 130px;
 }

 .icon-box-wrap .content img {
   width: 20%;
   margin-bottom: 10px;
 }

 .icon-box-wrap .content h6 {
   color: var(--color-info);
   font-size: 20px;
   letter-spacing: 1.5px;
   font-weight: bold;
   padding-bottom: 4px;
 }

 .icon-box-wrap .content h6:after {
   content: '';
   background-image: linear-gradient(90deg, #48A4D5, #086AD8);
   width: 40px;
   height: 3px;
   border-radius: 8px;
   display: block;
   margin-top: 8px;
 }

 .icon-box-wrap .content h5 {
   color: var(--color-default);
   font-size: 18px;
   font-weight: bold;
   padding-bottom: 4px;
 }

 .icon-box-wrap.ins:hover {
   background-image: linear-gradient(-45deg, #33ccd1, #62dd9f);
 }

 .icon-box-wrap.ins:hover p {
   color: var(--color-default);
 }

 .icon-circle {
   border-radius: 50%;
   background-image: linear-gradient(-45deg, #33ccd1, #62dd9f);
   padding: 4px;
 }

 .icon-box-wrap .content p,
 .icon-box-wrap li {
   font-size: 15px;
   line-height: 1.2;
   letter-spacing: 1px;
   color: var(--color-default);
 }

 .icon-box .dropdown-menu {
   padding: 15px;
   font-size: 15px;
 }

 /**gotop**/
 .gotop {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 99;
   cursor: pointer;
   text-decoration: none;

 }

 .gotop:after {
   font-family: "bootstrap-icons";
   content: "\F281";
   font-size: 22px;
   color: #fff;
   background-color: #1A3254;
   opacity: 0.8;
   padding: 16px;
   border-radius: 50px;
 }

 .gotop:hover:after {
   opacity: 1;
 }

 /*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
 .contact {
   position: relative;
 }

 .contact .info-item+.info-item {
   margin-top: 24px;
 }

 .contact .info-item i {
   font-size: 16px;
   background: var(--color-primary);
   color: #fff;
   width: 32px;
   height: 32px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50px;
   transition: all0.4s ease-in-out;
   margin-right: 12px;
 }

 .contact .info-item h4 {
   padding: 0;
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 5px;
   color: var(--color-primary);
 }

 .contact .info-item p {
   padding: 0;
   margin-bottom: 0;
   font-size: 14px;
   color: var(--color-default);
   font-weight: bold;
 }

 /*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
 .call-to-action {
   background: linear-gradient(rgba(27, 47, 69, 0.7), rgba(27, 47, 69, 0.7)), url("../images/img/cta-bg.jpg") left center;
   background-size: cover;
   background-attachment: fixed;
 }


 .call-to-action h2 {
   color: #fff;
 }

 .call-to-action h2::after {
   background-color: #fff;
 }

 .call-to-action p {
   color: #fff;

 }

 .call-to-action a {
   color: #48A4D5;
   display: inline-block;
   font-size: 20px;
 }

 .call-to-action a i {
   background-color: #48A4D5;
   border-radius: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #000;
   padding: 2px;
   width: 24px;
   height: 24px;
   margin: 0 2px 0 6px;
   font-size: 16px;

 }

 /*--------------------------------------------------------------
# Services List Section
--------------------------------------------------------------*/
 .services-list .service-item {
   position: relative;
   justify-content: center;
 }

 .services-list .service-item .icon i {
   font-size: 32px;
   line-height: 0;
   margin-right: 20px;
   color: #38618e;
 }

 .services-list .service-item .icon img {
   margin-right: 20px;
   height: 38px;
 }

 .services-list .service-item .title {
   font-weight: 700;
   margin-bottom: 5px;
   font-size: 18px;
 }

 .services-list .service-item .title a {
   color: var(--color-secondary);
 }

 .services-list .service-item .title a:hover {
   color: #38618e;
 }

 .services-list .service-item .description {
   line-height: 24px;
   font-size: 14px;
 }

 .services-list {
   background-image: url("../images/service-bg2.png");
   object-fit: cover;
   background-repeat: no-repeat;
   background-position: center center;
 }

 .services .service-item .icon {
   width: 48px;
   height: 48px;
   position: relative;
   margin-right: 50px;
   line-height: 0;
 }

 .services .service-item .icon img {
   width: 56px;
   transition: ease-in-out 0.3s;
   z-index: 2;
   position: relative;
 }

 .services .service-item .title {
   font-weight: 700;
   margin-bottom: 15px;
   font-size: 18px;
 }

 .services .service-item:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: rgba(var(--color-default-rgb), 0.1);
 }

 .services .service-item {
   position: relative;
   padding-top: 40px;
 }

 /*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/
 .post-box {
   transition: 0.4s;
   height: 100%;
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: column;
   box-shadow: 3px 4px 16px rgba(var(--color-default-rgb), 0.1);
 }

 .post-box .postarticle {
   padding: 5px 20px;
 }

 .post-img {
   overflow: hidden;
   position: relative;
   height: 130px;
 }

 .post-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: 0.4s;
 }

 .post-text {
   color: var(--color-secondary);
   position: relative;
 }

 .post-title-area {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }

 .recent-posts .meta {
   padding: 10px 20px 0;
 }

 .meta .post-date {
   font-size: 15px;
   font-weight: 400;
 }

 .meta .post-author {
   font-size: 15px;
   font-weight: 400;
 }

 .post-title {
   font-size: 18px;
   color: var(--color-secondary);
   font-weight: 700;
   margin: 12px 0;
   position: relative;
   transition: 0.4s;
   letter-spacing: 0;
 }

 .swiper-slide .post-title {
   letter-spacing: 0;
 }

 .post-box .post-title {
   color: var(--color-primary);
   margin-bottom: 10px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .post-box p,
 .post-item p {
   color: var(--color-muted);
 }

 .post-box p {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .post-box .readmore {
   display: flex;
   align-items: center;
   font-weight: 600;
   line-height: 1;
   transition: 0.4s;
   margin-top: 15px;
 }

 .post-box .readmore i {
   line-height: 0;
   margin-left: 4px;
   font-size: 18px;
 }


 .post-item {
   display: flex;
   border: 1px solid #e7e7e7;
   padding: 16px;
   background: #FFF;
   transition: 0.5s;
   align-items: flex-start;
 }

 .post-item .post-img {
   width: 30%;
   min-width: 300px;
   padding-right: 20px;
   height: 150px;
 }

 .post-item .post-img span {
   position: absolute;
   z-index: 2;
   bottom: 4px;
   right: 32px;
   background-color: #6c757d;
   color: #fff;
   font-size: 12px;
   border-radius: 10px;
   padding: 2px 6px;
 }

 .post-item .post-text {
   padding-right: 100px;
   width: 70%;
 }

 .post-item .post-title {
   font-size: 24px;
 }

 .post-item .readmore {
   position: absolute;
   right: 70px;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
 }

 .post-item .readmore i {
   font-size: 40px;
   color: #ccc;
 }

 .post-box:hover .post-title,
 .post-item:hover .post-title {
   color: var(--color-primary);
 }

 .post-box:hover .post-img img {
   transform: scale(1.1);
 }

 .post-item:hover {
   transform: translateY(-8px);
   box-shadow: 0px 0 15px rgba(0, 0, 0, 0.08)
 }

 .post-item:hover .readmore {
   display: block;
   right: 50px;
   opacity: 1;
   transition: 0.4s;
 }

 /* Recent Posts Swiper */
 .recent-posts .posts-slider {
   position: relative;
   height: 500px;
   padding: 10px 0 60px;
 }

 .recent-posts .posts-slider .swiper-slide {
   height: auto;
   display: flex;
 }

 .recent-posts .posts-slider .post-box {
   width: 100%;
   background: #fff;
 }

 .recent-posts .posts-prev,
 .recent-posts .posts-next {
   width: 35px;
   height: 35px;
   top: 50%;
   margin-top: 0;
   transform: translateY(-50%);
   background-color: rgba(26, 50, 84, 0.6);
   border-radius: 50%;
   transition: 0.3s;
 }

 .recent-posts .posts-prev {
   left: 3px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='%23ffffff' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
 }

 .recent-posts .posts-next {
   right: 3px;
   transform: translateY(-50%);
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%23ffffff' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
 }

 .recent-posts .posts-prev:after,
 .recent-posts .posts-next:after {
   font-size: 16px;
   font-weight: 700;
   color: #fff;
 }

 .recent-posts .posts-prev:hover,
 .recent-posts .posts-next:hover {
   background-color: rgba(26, 50, 84, 1);
 }

 .recent-posts .posts-pagination {
   bottom: 10px;
 }

 .recent-posts .posts-pagination .swiper-pagination-bullet {
   background-color: var(--color-secondary);
   opacity: 0.4;
   margin: 0 4px;
 }

 .recent-posts .posts-pagination .swiper-pagination-bullet-active {
   background-color: var(--color-primary);
   opacity: 1;
 }

 @media (max-width: 991px) {
   .recent-posts .posts-prev,
   .recent-posts .posts-next {
     display: none;
   }
 }

 .post-content {
   padding: 10px 20px;
 }

 @media screen and (max-width:991px) {
   .post-item .post-img {
     width: 60%;
     min-width: 350px;
     height: 240px;
   }

   .post-item .post-text {
     padding-right: 0;
   }

   .post-item .readmore {
     top: auto;
     bottom: -30px;
     right: 30px;
   }

   .post-item:hover .readmore {
     top: auto;
     bottom: -30px;
     right: 20px;
   }


 }

 @media screen and (max-width:767px) {
   .post-item {
     flex-direction: column;
   }

   .post-item .post-img {
     width: 100%;
     padding-right: 0;
     height: 200px;
     min-width: auto;
   }

   .post-item:hover .readmore {
     opacity: 0.5;
   }

   .post-item .post-text {
     width: 100%;
   }

   .post-item .post-title {
     font-size: 21px;
   }
 }

 .news {
   display: none;
 }

 .tx-load {
   display: flex;
   justify-content: center;
   margin-top: 16px;
   color: var(--color-primary);
   font-size: 18px;
 }

 .tx-load:hover {
   color: #33739E;
 }

 .tx-load.hidden {
   color: #ccc;
 }

 /*--------------------------------------------------------------
# Case Section
--------------------------------------------------------------*/
 .case .post-box {
   border-radius: 3px;
   border: 1px solid #D3DAE6;
 }

 .case .post-box .post-text {
   padding: 20px;
 }

 .case .post-box .post-title {
   margin: 0;
 }

 .case .post-box p {
   margin-top: 10px;
 }

 /* .btn {
   width: 100px;
   height: 40px;
 }
*/

 .btn-primary {
   background: var(--color-primary);
 }


 button {
   background: transparent;
   padding: 8px 28px;
   color: #47b2e4;
   transition: 0.4s;
   border-radius: 50px;
   border: 2px solid #47b2e4;
   font-weight: bold;
 }


 .btn-block,
 .btn-block:hover {
   border-radius: 0;
   padding: 20px;
   font-size: 20px;
   color: #fff;
   background-color: #1A3254;
 }

 .btn-block:hover {
   opacity: 0.8;
 }

 .modal .btn-block {
   padding: 15px;
   border-radius: 0 0 6px 6px;
   background-color: var(--color-primary);
 }

 #hero {
   background: linear-gradient(#b0cafe, #ffffff);
 }

 #hero h1 {
   margin: 0 0 10px 0;
   font-size: 40px;
   font-weight: 700;
   line-height: 56px;
   color: #1A3254;
 }

 /*--------------------------------------------------------------
# Product Section
--------------------------------------------------------------*/
 .product h6 {
   color: #48A4D5;
   font-size: 20px;
   line-height: 32px;
   letter-spacing: 1.5px;
   font-weight: bold;
 }

 .product h6 img {
   margin-right: 10px;
 }

 .product .sub-title {
   font-weight: bold;
   color: #7F7F7F;
 }

 .product .content p {
   margin-left: 39px;
   color: var(--color-default);
 }

 .product .content ul li {
   margin-bottom: 20px;
 }

 .assets {
   background: #F2F4F8;
 }

 .product .assets.content ul li {
   height: 130px;
 }

 /*banner*/
 .pbs-demo {
   position: relative;
 }

 .pbs-demo img {
   display: block;
   position: absolute;
   z-index: 9;
   top: 100px;
   right: 14%;
   width: 600px;
 }

 /*--------------------------------------------------------------
# Solution Section
--------------------------------------------------------------*/
 .solution {
   background-image: linear-gradient(0deg, #E4F1FF 30%, #82b6e9);
 }

 .solution .content {
   background: #E4F1FF;
 }

 .solution .consultant {}

 .solution .consultant .solution-title {
   background: #FFF;
   padding: 13px;
   font-size: 20px;
   font-weight: bold;
   color: #3397D3;
   text-align: center;
 }

 .solution .project {
   border-left: 1px solid #AEC9E7;
   border-right: 1px solid #AEC9E7;
 }

 .solution .project .solution-title {
   background: #FFF;
   padding: 13px;
   font-size: 20px;
   font-weight: bold;
   color: #004098;
   text-align: center;
 }

 .solution .user {}

 .solution .user .solution-title {
   background: #FFF;
   padding: 13px 48px;
   font-size: 20px;
   font-weight: bold;
   color: #009076;
   text-align: center;
 }




 .solution .consultant {
   text-align: center;
 }

 .solution .row {
   padding: 60px 40px;
   text-align: center;
 }

 .solution h6 {
   color: #1A3254;
   font-size: 17px;
   font-weight: bold;
   line-height: 1.2;
 }

 .solution p {
   line-height: 1.2;
   color: #545454;
 }

 .solution .consultant .col-lg-9 {
   margin-bottom: 30px;
 }

 .solution img {
   margin-bottom: 5px;
 }

 .solution .consultant .arrow {
   position: relative;
 }

 .solution .consultant .arrow img {
   width: 60px;
   position: absolute;
   left: 0;
   top: -1px;

 }

 .solution .project .section1 {
   border-bottom: 1px solid #AEC9E7;
 }

 .solution .project .mag-modal {
   position: relative;
 }

 .solution .project .mag-modal a {
   position: absolute;
   left: 17px;
 }

 .mg-blue .fa-search {
   color: #004098;
 }

 .mg-green .fa-search {
   color: #1CBEAF;
 }

 .solution .dropdown-menu {
   width: 255px;
   padding: 30px 23px;
 }

 .solution .dropdown-menu h4 {
   font-size: 16px;
   font-weight: bold;
   line-height: 19px;
 }

 .solution .dropdown-menu p {
   font-size: 12px;
   color: #7F7F7F;
   line-height: 1.5;
   margin-bottom: 0;
 }

 .wmass {
   position: relative;
 }

 .wmass-container {
   padding: 20px 0;
 }

 .arrow-right {
   position: absolute;
   right: -31%;
   top: 10%;
 }

 .project {
   position: relative;
 }

 .server {
   position: absolute;
   top: 29%;
   right: -7%;
 }

 .server-container {
   padding: 15px 0;
   position: relative;
   height: 142px;
 }

 .server-box {
   display: flex;
   flex-direction: column;
 }

 .server-container .arrow {
   position: absolute;
   right: -49%;
   top: 19%;
   width: 116px;
 }

 .server-container .arrow p {
   margin-bottom: 0;
 }

 .system-container {
   display: flex;
 }

 .system-container li {
   width: 30%;
 }

 .arrow-switch {
   margin: 25px 0;
 }

 .user-container {
   margin-top: 160px;
 }

 .user-container li {
   height: 140px;
   padding: 20px;
   margin-left: 60px;
 }

 .user-container li:last-child {
   padding-top: 0;
 }

 .flowchart .col-lg-4 img {
   margin-top: -36px;
 }

 .flowchart .col-6 {
   display: flex;
 }

 .flowchart h5 {
   font-size: 30px;
   font-weight: bold;
   color: #000;
   line-height: 120%;
   margin-right: 20px;
 }

 .flow-container {
   margin: 10px;
 }

 .flow-title {
   display: inline-block;
   min-width: 194px;
   font-size: 20px;
   font-weight: bold;
   line-height: 120%;
   color: #FFF;
   border-radius: 10px;
   background: #0253C5;
   padding: 12px 24px;
   text-align: center;
 }

 .flow-container p {
   margin-top: 20px;
   font-size: 18px;
   font-weight: bold;
   line-height: 150%;
   color: #000;
 }

 /*--------------------------------------------------------------
# Why Choose Us Section
--------------------------------------------------------------*/

 .img-bg {
   min-height: 300px;
   background-size: cover !important;
   background-repeat: no-repeat !important;
 }

 .why-us .slides {
   background-color: #f7f9fc;
 }

 .why-us h3 {
   font-size: 24px;
   font-weight: 700;
   color: var(--color-secondary);
 }

 .why-us h4 {
   font-size: 18px;
   font-weight: 400;
   color: #29486a;
   font-family: var(--font-secondary);
 }

 .why-us .swiper {
   /* margin: 140px 140px 120px 140px; */
   overflow: hidden;
 }

 .why-us .product-text {
   margin: 100px;
 }

 .why-us .swiper-button-prev:after,
 .why-us .swiper-button-next:after {
   font-size: 24px;
   color: var(--color-secondary);
 }

 .why-us .swiper-button-prev {
   left: 30px;
   top: 50%;
 }

 .why-us .swiper-button-next {
   right: 30px;
   top: 50%;
 }

 .why-us .swiper-pagination {
   margin-top: -130px;
   position: relative;
 }

 .why-us .swiper-pagination .swiper-pagination-bullet {
   background-color: var(--color-secondary);
   margin: 0 4px;
 }

 .why-us .swiper-pagination .swiper-pagination-bullet-active {
   background-color: var(--color-primary);
 }

 @media (max-width: 1200px) {
   .why-us .swiper {
     margin: 60px 60px 40px 60px;
   }

   .page-about .why-us {
     padding: 0 0 80px 0;
   }
 }

 /*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
 .team .team-member {
   overflow: hidden;
 }

 .team .team-member .member-img {
   position: relative;
   overflow: hidden;
 }

 .team .team-member:hover img {
   transform: scale(1.1);
   transition: all 0.5s;
 }

 .team .team-member .member-info {
   padding: 15px 15px 0 15px;
   text-align: center;
 }

 .team .team-member .member-info h4 {
   font-weight: 700;
   margin-bottom: 5px;
   font-size: 18px;
   color: var(--color-secondary);
 }

 .team .team-member .member-info span {
   display: block;
   font-size: 13px;
   font-weight: 400;
   color: #6c757d;
 }

 .team .team-member .member-info p {
   font-style: italic;
   font-size: 14px;
   line-height: 26px;
   color: #6c757d;
 }


 .page-about .why-us {
   padding: 0 0 80px 0;
 }

 .why-us .swiper-button-prev,
 .why-us .swiper-button-next {
   display: none;
 }


 @media (max-width: 575px) {
   .why-us .swiper {
     margin: 40px 40px 20px 40px;
   }

   .page-about .why-us {
     padding: 0 0 80px 0;
   }

 }

 /*--------------------------------------------------------------
# Insurance Section
--------------------------------------------------------------*/
 .insurance-container {
   justify-content: space-evenly
 }

 .insurance-container .post-box {
   height: 345px;
   border: 1px solid #D3DAE6;
   background: #FFF;
   padding: 0;
   text-align: center;
   margin: 0px 69px;
 }

 .insurance-card .post-text {
   padding: 20px;
 }

 .insurance-card .post-box .post-title {
   font-size: 20px;
   line-height: 32px;
   margin: 0;
 }

 /*--------------------------------------------------------------
# Services Cards Section
--------------------------------------------------------------*/
 .services-cards {
   background: #f7f9fc;
 }

 .services-cards .card-item {
   border: 1px solid rgba(27, 47, 69, 0.1);
   background: #fff;
   position: relative;
   border-radius: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
 }

 .services-cards .card-item .card-bg {
   min-height: 300px;
   background: #f7f9fc;
   padding: 80px 60px;
   background-size: cover;
   background-position: center center;
   flex-shrink: 0;
 }

 .services-cards .card-item .card-body {
   padding: 30px;
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
 }

 .services-cards .card-item h4 {
   font-weight: 700;
   font-size: 20px;
   margin-bottom: 15px;
   color: var(--color-secondary);
 }

 .services-cards .card-item p {
   color: var(--color-secondary);
   margin: 0;
 }

 .services-cards .card-link {
   position: absolute;
   top: 144px;
   left: 20px;
   right: 20px;
   z-index: 2;
   height: 56px;
   line-height: 55px;
   text-align: center;
   background: rgba(255, 255, 255, 0.8);
   opacity: 0;
   transition: all 0.3s;

 }

 .slides-product .card-item:hover .card-link {
   top: 120px;
   opacity: 1;
 }

 .services-cards .card-link a {
   color: var(--color-default);
   text-decoration: none;
   font-size: 16px;
 }

 .services-cards .card-link a+a {
   margin-left: 16px;
 }

 .services-cards .card-link a i {
   font-size: 20px;
 }


 .card-tabs {
   box-shadow: 0px 0 20px rgba(27, 47, 69, 0.1);
   border: 0;
 }

 .card-tabs .card-header {
   background-color: transparent;
   border-bottom: 0;
   padding: 24px;
 }

 .card-tabs .card-header-pills {
   padding: 0 20px;
 }

 .card-header-pills .nav-link {
   font-size: 20px;
   font-weight: bold;
   color: var(--color-info);
   border-radius: 0;
   border-bottom: 1px solid var(--color-info);
   padding: 12px 30px;
   opacity: 0.6;
 }

 .card-header-pills .nav-link.active {

   color: var(--color-primary);
   background-color: transparent;
   border-bottom: 1px solid var(--color-primary);
   opacity: 1;
 }

 /*==================================
      TIMELINE
  ==================================*/
 /*-- GENERAL STYLES
  ------------------------------*/
 .timeline {
   line-height: 1.4em;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 100%;
 }


 /*----- TIMELINE ITEM -----*/
 .timeline-item {
   padding-left: 40px;
   position: relative;
 }

 .timeline-item:last-child {
   padding-bottom: 0;
 }

 /*----- TIMELINE INFO -----*/
 .timeline-info {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 3px;
   margin: 0 0 0.5em 0;
   text-transform: uppercase;
   white-space: nowrap;
 }

 /*----- TIMELINE MARKER -----*/
 .timeline-marker {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: 15px;
 }

 .timeline-marker:before {
   background: #004098;
   border: 3px solid transparent;
   border-radius: 100%;
   content: "";
   display: block;
   height: 15px;
   position: absolute;
   top: 4px;
   left: 0;
   width: 15px;
   transition: background0.4s ease-in-out, border0.4s ease-in-out;
 }

 .timeline-marker:after {
   content: "";
   width: 3px;
   background: #CCD5DB;
   display: block;
   position: absolute;
   top: 24px;
   bottom: 0;
   left: 6px;
 }

 .timeline-item:last-child .timeline-marker:after {
   content: none;
 }

 .timeline-item:not(.period):hover .timeline-marker:before {
   background: transparent;
   border: 3px solid #004098;
 }

 /*----- TIMELINE CONTENT -----*/
 .timeline-content {
   padding-bottom: 40px;
 }

 .timeline-content p:last-child {
   margin-bottom: 0;
 }

 .timeline-title {
   font-weight: 700;
   font-size: 18px;
   color: var(--color-secondary);
 }

 .timeline-item.first .timeline-marker {
   width: 30px;
 }

 .timeline-item.first .timeline-marker:before {
   background: #004098;
   width: 30px;
   height: 30px;
   left: -7px;
 }

 .timeline-item.first .timeline-marker::after {
   top: 40px;
 }

 .timeline-item.first .timeline-title {
   font-size: 24px;
   color: var(--color-primary);
 }

 /*--------------------------------------------------------------
# Frequently Asked Questions Section
--------------------------------------------------------------*/
 .faq .content h3 {
   font-weight: 400;
   font-size: 34px;
   color: var(--color-default);
 }

 .faq .content h4 {
   font-size: 20px;
   font-weight: 700;
   margin-top: 5px;
 }

 .faq .content p {
   font-size: 15px;
   color: #6c757d;
 }

 .faq .accordion-item {
   border: 0;
   margin-bottom: 20px;
   box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.06);
   border-radius: 10px;
 }

 .faq .accordion-item:last-child {
   margin-bottom: 0;
 }

 .faq .accordion-collapse {
   border: 0;
 }

 .faq .accordion-button {
   padding: 20px 50px 20px 20px;
   font-weight: 600;
   border: 0;
   font-size: 18px;
   line-height: 24px;
   color: var(--color-default);
   text-align: left;
   background: #fff;
   box-shadow: none;
   border-radius: 10px;
 }

 .faq .accordion-button .num {
   padding-right: 10px;
   font-size: 20px;
   line-height: 0;
   color: var(--color-primary);
 }

 .faq .accordion-button:not(.collapsed) {
   color: var(--color-primary);
   border-bottom: 0;
   box-shadow: none;
 }

 .faq .accordion-button:after {
   position: absolute;
   right: 20px;
   top: 20px;
 }

 .faq .accordion-body {
   padding: 0 40px 30px 45px;
   border: 0;
   border-radius: 10px;
   background: #fff;
   box-shadow: none;
 }

 /*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
 .testimonials {
   padding-bottom: 80px;
 }

 .testimonials .testimonial-item {
   box-sizing: content-box;
   border-radius: 6px;
   padding: 30px;
   margin: 20px 10px;
   box-shadow: 0px 0 20px rgba(27, 47, 69, 0.1);
   background: #fff;
   min-height: 320px;
   display: flex;
   flex-direction: column;
   text-align: center;
   transition: 0.3s;
 }

 .testimonial-item:hover {
   transform: translateY(-5px);
   transition: 0.3s;
 }

 .testimonials .testimonial-item .stars {
   margin: 15px 0;
 }

 .testimonials .testimonial-item .stars i {
   color: #ffc107;
   margin: 0 1px;
 }

 .testimonials .testimonial-item .testimonial-img {
   width: 48px;
   border-radius: 50%;
   border: 4px solid #fff;
   margin: 0 auto;
 }

 .testimonials .testimonial-item h3 {
   font-size: 18px;
   font-weight: bold;
   margin: 10px 0 5px 0;
   color: var(--color-default);
 }

 .testimonials .testimonial-item h4 {
   font-size: 14px;
   color: var(--color-primary);
   margin: 0;
 }

 .testimonials .testimonial-item p {
   margin: 0 auto 15px auto;
   text-align: left;
 }

 .testimonials .slides-case {
   margin-top: -20px;
 }

 .slides-case article {
   height: 200px;
   overflow-y: auto;
   margin-bottom: 10px;
 }

 article::-webkit-scrollbar {
   width: 8px;
 }

 article::-webkit-scrollbar-track {
   background: #f1f1f1;
 }

 article::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 10px;
 }

 article::-webkit-scrollbar-thumb:hover {
   background: #555;
 }

 @media screen and (max-width:991px) {
   .testimonials .slides-case {
     margin-top: 0px;
   }

   .testimonials .testimonial-item {
     margin: 10px 10px 50px;
     box-shadow: 0px 0 10px rgba(27, 47, 69, 0.1);

   }
 }

 /****/
 .img-wmsdemo {
   position: relative;
   min-height: 200px;
   padding-left: 40px;
 }

 .img-up {
   position: absolute;
   z-index: 2;
   top: 20%;
   left: 20%;
   max-width: 500px;
   opacity: 0.5;
 }

 .img-bottom {
   position: absolute;
   z-index: 1;
   width: 100%;
 }

 .hov01 {
   position: absolute;
   z-index: 5;
   width: 60%;
   bottom: -86%;
   right: -3%;
 }

 .hov02 {
   position: absolute;
   z-index: 5;
   width: 20%;
   top: 30%;
   right: 20%;
 }

 .hero-section {
   position: relative;
   padding: 180px 0 0 0;
   height: 580px;
   background-size: cover;
   color: #Fff;
   font-weight: bold;
   display: flex;
 }

 .hero-section p {
   font-size: 18px;
   line-height: 1.5;
   font-weight: normal;
   margin: 16px 0 20px;
 }

 .wmsbg {
   background-image: linear-gradient(-90deg, #0064c8, #00d8fe);
   color: #Fff;
   font-weight: bold;
   line-height: 1.8;
 }

 .mainpro-wms {
   position: absolute;
   right: 5%;
   top: 120px;
   width: 45%
 }

 .mainpro-wms img {
   width: 100%;
 }

 .img-container {
   background: #F7F9FB;
   position: relative;
   padding: 20px;
   overflow: hidden;
   min-height: 370px;
 }

 .crm04 {
   width: 85%;
   position: absolute;
   bottom: 10%;
   right: 2%;
 }


 .pbsbg {
   /* background-image: linear-gradient(-90deg,#0064c8,#00d8fe);  */
   background-image: url(../images/img/topbg2.jpg);
 }

 .pbsbg2 {
   background-image: url(../images/img/topbg3.jpg);
 }

 .pbsbg3 {
   background-image: url(../images/img/topbg4.jpg);
 }

 .pbsbg4 {
   color: #343434;
   font-weight: bold;
   line-height: 1.8;
   background-image: url(../images/img/topbg5.jpg);
 }

 .pbsbg5 {
   background-image: url(../images/img/topbg6.jpg);
 }

 .pbsbg6 {
   background-image: url(../images/img/topbg7.jpg);
 }

 .pbsbg7 {
   background-image: url(../images/img/topbg8.jpg);
 }

 .mainpro-pbs {
   position: absolute;
   z-index: 99;
   right: 0;
   top: 100px;
   width: 45%;
 }

 .mainpro-pbs .img-0 {
   position: absolute;
   top: 80px;
   max-width: 650px;
 }

 .mainpro-pbs .img-1 {
   position: absolute;
   top: 180px;
   left: -20px;
   width: 260px;
 }

 .mainpro-pbs .img-2 {
   position: absolute;
   top: 260px;
   right: -80px;
   width: 350px;
 }

 .sectionpro-pbs {
   position: relative;
   display: block;
   height: 100%;
   transition: all 0.5s;
 }

 .sectionpro-pbs img {
   max-width: 460px;
 }

 .sectionpro-pbs .img-1 {
   position: absolute;
   top: 5%;
   right: 0;
   opacity: .8;
 }

 .sectionpro-pbs .img-2 {
   position: absolute;
   z-index: 2;
   right: 10%;
   top: 120px;
 }

 .sectionpro-pbs .img-3 {
   position: absolute;
   right: 3%;
   top: 360px;
   opacity: .6;
 }

 .icon-box-wrap .content img {
   width: 64px;
   height: 64px;
   margin-bottom: 10px;
 }



 .ins_why {
   padding-bottom: 260px;
 }

 .ins_why h5 {
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 20px;
   padding: 0 30px;
   color: var(--color-default);
   line-height: 1.5;
   letter-spacing: 1px;
 }

 .ins_why .img-box {
   padding: 0 4%;
 }

 .icon-box-wrap.ins:hover {
   background-image: linear-gradient(-45deg, #483CBF, #58DBFF);
   transition: all 3s;
 }

 .icon-circle {
   border-radius: 50%;
   background-image: linear-gradient(-45deg, #483CBF, #58DBFF);
   /* background-image: linear-gradient(-45deg, #D79AF0, #5478DD); */
   padding: 4px;
 }

 .icon-box-wrap.ins:hover .content h5,
 .icon-box-wrap.ins:hover .content p {
   color: #FFF;
 }



 .crmbg {
   background-image: linear-gradient(-90deg, #0064c8, #00d8fe);

   color: #Fff;
   font-weight: bold;
   line-height: 1.8;
 }

 .mainpro-crm {
   position: absolute;
   right: 0%;
   top: 20px;
   width: 50%
 }

 .mainpro-crm img {
   width: 100%;
 }



 .sssbg {
   background: url(../images/img/topbg2.jpg) right no-repeat;
   background-size: 100% 100%;
   color: #Fff;
   font-weight: bold;
   line-height: 1.8;
 }

 .mainpro-sss {
   position: absolute;
   width: 80%;
   max-width: 940px;
   right: -5%;
   top: 0;
 }

 .mainpro-sss .img-1 {
   position: absolute;
   right: 5%;
   width: 100%;
   top: 100px;
 }

 .robotbg {
   background-image: linear-gradient(180deg, #004098, #65c5f8);
   color: #Fff;
   font-weight: bold;
   line-height: 1.8;
   position: relative;
 }

 /* .robotbg::before{ 
  content: ' ';
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/img/robotbg.png) no-repeat right top;  
  filter: opacity(30%);
  -webkit-animation: scale 50s infinite  alternate;
  animation: scale 50s infinite  alternate; 
 } */
 .mainpro-robot {
   position: absolute;
   z-index: 99;
   right: 0;
   top: 100px;
   width: 65%;
   height: 100%;
 }

 .mainpro-robot .img-1 {
   position: absolute;
   top: 20px;
   right: 150px;
   transform: rotate(-1.5deg);
 }

 .mainpro-robot .img-2 {
   position: absolute;
   right: 670px;
   top: -30px;
 }

 .mainpro-robot .img-3 {
   position: absolute;
   right: 200px;
   top: 70px;
   transform: rotate(-2deg);
 }

 .mainpro-robot .img-4 {
   position: absolute;
   right: 20px;
   top: 180px;
   transform: rotate(-2deg);
 }

 .mainpro-robot img {
   animation-name: updown;
   animation-duration: 6s;
   animation-iteration-count: infinite
 }

 .mainpro-robot img:nth-child(2) {
   animation-delay: 0.25s
 }

 .mainpro-robot img:nth-child(3) {
   animation-delay: 0.5s
 }

 .mainpro-robot img:nth-child(4) {
   animation-delay: 0.75s
 }

 @keyframes updown {
   0% {
     transform: translateY(-10px);
   }

   50% {
     transform: translateY(4px);
   }

   100% {
     transform: translateY(-10px);
   }

 }


 .mpcbg {
   background-image: url(../images/img/topbg6.jpg);
   color: #Fff;
   font-weight: bold;
   line-height: 1.8;
   padding-top: 120px;
 }

 .sqsbg {
   background-image: url(../images/img/topbg8-1.jpg);
   background-position: right;
   color: #Fff;
   font-weight: bold;
   line-height: 1.8;
 }

 .iasbg {
   background-image: url(../images/img/topbg7.jpg);
   background-repeat: no-repeat;
   color: #Fff;
   font-weight: bold;
   line-height: 1.8;
   padding-top: 100px;
 }

 .insbg {
   background-image: url(../images/img/top_ins.png);
   background-repeat: no-repeat;
   color: #Fff;
   font-weight: bold;
   line-height: 1.8;
   padding-top: 50px;
   position: relative;
 }

 .insbg img {
   max-width: 770px;
 }

 .ins_feature .icon-box-wrap.ins:hover {
   background-image: linear-gradient(-45deg, #B16CBF, #7BEEEB);
   transition: all 3s;
 }

 .ins_feature .icon-circle {
   border-radius: 50%;
   background-image: linear-gradient(-45deg, #e88bfa, #7BEEEB);
   padding: 4px;
 }

 .solutionbg p {
   font-size: 20px;
 }

 /* .solutionbg .hero-section {
   background-image: url(../images/products/banner_solution.png);
   position: relative;
   background-position: bottom left 20%;
   background-repeat: no-repeat;
   color: #Fff;
   font-weight: bold;
   line-height: 1.8;
 } */
 .solutionbg .hero-section {
   background-image: url(../images/products/banner_solution2.jpg);
   position: relative;
   background-repeat: no-repeat;
   font-weight: bold;
   line-height: 1.8;
 }

 /* .solutionbg .hero-section::before {
   content: '';
   background-color: rgba(27, 47, 69, 0.4);
   position: absolute;
   inset: 0;
 } */

 .solutionbg h2 {
   font-size: 1.5rem;
 }

 .solutionbg h1 {
   font-size: 2.5rem;
   font-weight: bold;
 }


 /* Services Section - Home Page
------------------------------*/
 :root {
   --color-default: #212529;
   --color-default-rgb: 33, 37, 41;
   --color-background: #ffffff;
   --color-background-rgb: 255, 255, 255;
   --color-primary-rgb: 175, 222, 179;
 }

 .esg h2 {
   margin-bottom: 1.5rem;
 }

 .esg .service-item {
   position: relative;
   padding-top: 40px;
 }

 .esg .service-item:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: rgba(var(--color-default-rgb), 0.1);
 }

 .esg .service-item::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 30px;
   height: 2px;
   background: #168E57;
   border-right: 5px solid var(--color-background);
 }

 .esg .service-item .icon {
   width: 48px;
   height: 48px;
   position: relative;
   margin-right: 50px;
   line-height: 0;
 }

 .esg .service-item .icon i {
   color: rgba(var(--color-default-rgb), 0.7);
   font-size: 56px;
   transition: ease-in-out 0.3s;
   z-index: 2;
   position: relative;
 }

 .esg .service-item .icon img {
   width: 56px;
   transition: ease-in-out 0.3s;
   z-index: 2;
   position: relative;
 }

 .esg .service-item .icon:before {
   position: absolute;
   content: "";
   height: 30px;
   width: 30px;
   background: rgba(var(--color-primary-rgb), 0.5);
   border-radius: 50px;
   z-index: 1;
   bottom: -15px;
   right: -15px;
   transition: 0.3s;
 }

 .esg .service-item .title {
   font-weight: 700;
   margin-bottom: 15px;
   font-size: 18px;
 }

 .esg .service-item .title a {
   color: var(--color-secondary);
 }

 .esg .service-item .title a:hover {
   color: #168E57;
 }

 .esg .service-item .description {
   line-height: 24px;
   font-size: 14px;
 }

 /* JP */
 /* #region banner */

 .jp-banner {
   width: auto;
   padding: 16rem 10rem;
   height: 500px;
   background: url(../images/bannerIndex02.png) no-repeat center right 23%;
   position: relative;
   background-size: cover;
 }

 .jp-banner .jp-banner-text {
   position: absolute;
   margin-top: 3rem;
   top: 15%;
   left: 7%;
 }

 .jp-banner h2 {
   font-size: 24px;
   font-weight: bold;
   color: #FFF;
   line-height: 1.5;
 }

 .jp-banner h2 .yellow {
   color: #FFC759;
   font-size: 28px;
 }

 .jp-banner .platform {
   position: absolute;
   top: 60%;
   left: 7%;
 }

 .jp-banner .platform h6,
 .jp-banner .platform ul li {
   color: #FFF;
 }

 .platform ul li {
   list-style-image: url("../images/icon/dot.svg");
   line-height: 2;
   letter-spacing: 1px;
 }

 .jp-banner .platform h6 {
   border-bottom: 1px solid #FFF;
   font-weight: bold;
 }

 .jp-banner .platform .platform-list {
   position: absolute;
   top: 97%;
   left: -3%;
 }

 .jp-banner .platform .platform-list2 {
   position: absolute;
   top: 97%;
   left: 27%;
 }

 .jp-container {
   padding: 5rem 0;
   color: #343741;
 }

 .jp-container .col-lg-3 {
   display: flex;
   justify-content: flex-start;
 }

 .jp-container .nav {
   flex-direction: column;
 }

 .jp-container .nav-link {
   color: #7A7A7A;
 }

 .jp-container .nav li {
   border-right: 1px solid #7A7A7A;
 }

 .jp-container .nav li:hover {
   border-right: 2px solid #006BB4;
   background: #E6F0F8;
 }

 .jp-container h1 {
   color: #484848;
   font-size: 30px;
   line-height: 1.2;
   font-weight: bold;
 }

 .jp-container h2 {
   color: #484848;
   line-height: 1;
   font-size: 26px;
   font-weight: bold;
 }

 .jp-container span {
   color: #484848;
   line-height: 2;
   font-size: 18px;
   font-weight: normal;
 }

 .jp-container p {
   font-size: 14px;
   line-height: 21px;
   font-weight: 600;
   margin: 10px 65px 10px 0;
 }

 .jp-container .chart {
   width: 600px;
   margin: 30px 121px;
 }

 :root {
   --text-white: #fff;
   --bg-gray: #EFEFEF;
   --bg-darkgray: #6F6F71;
   --card-radius: 5px;
 }

 html,
 body {
   height: 100vh;
   margin: 0;
 }

 .wrapper {
   min-height: calc(100vh - 100px);
   /*減去footer高度*/
 }

 .dropdown {
   position: relative;
   display: inline-block;
 }

 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   padding: 12px 16px;
   z-index: 1;
 }

 .dropdown:hover .dropdown-content {
   display: block;
 }

 .bg-gray {
   background: var(--bg-gray);
 }

 .card-radius {
   border-radius: 10px;
 }

 .dot-number {
   background: var(--bg-darkgray);
   color: var(--text-white);
   padding: 5px 10px;
   border-radius: 50%;
   margin-right: 10px;
   font-size: 13px;
   line-height: 18px;
 }

 .dot-word {
   background: var(--bg-darkgray);
   color: var(--text-white);
   padding: 5px 10px;
   border-radius: 15px;
   margin-right: 5px;
   font-size: 14px;
 }

 .jp-container .number-list h6 {
   border-left: none;
   margin: 0;
 }

 .jp-container .number-list {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
 }

 /* #endregion banner */
 .source {
   position: absolute;
   bottom: 0;
   left: 2%;
   color: #CCCCCC;
 }

 @media screen and (max-width:1440px) {

   .mainpro-sss .img-1 {
     top: 150px;
   }
 }

 @media screen and (max-width:1200px) {

   .mainpro-robot .img-1 {
     top: -20px;
     right: -80px;
   }

   .mainpro-robot .img-2 {
     right: 230px;
     top: 0px;
   }

   .mainpro-robot .img-3 {
     right: -200px;
     top: 100px;
   }


 }

 @media screen and (max-width:991px) {
   .sectionpro-pbs {
     height: 320px
   }

   .sectionpro-pbs .img-2 {
     right: auto;
     left: 0;
     top: 60px;
   }

   .sectionpro-pbs .img-3 {
     right: 5%;
     top: 200px;
   }

  .type a {
    display: none!important;
  }
  .indexTitle {
    font-size: 50px;
    line-height: 60px;
  }
 }

 @media screen and (max-width:768px) {
   .hero-section {
     padding-top: 100px;
     flex-direction: column;
   }

   .pbsbg {
     height: 650px;
   }

   .mainpro-pbs {
     width: 100%;
     top: 370px;
   }

   .mainpro-pbs .img-0 {
     width: 80%;
     left: 10%;
   }

   .mainpro-pbs .img-1 {
     width: 260px;
     left: 5%;
   }

   .mainpro-pbs .img-2 {
     width: 350px;
     top: -40px;
     right: -100px;
   }

   .sectionpro-pbs .img-1 {
     width: 300px;
     left: 0;
   }

   .sectionpro-pbs .img-2 {
     width: 380px;
     left: 10%;

   }

   .sectionpro-pbs .img-3 {
     width: 360px;
     top: 240px;
   }

   .mainpro-wms {
     top: 225px;
     width: 55%;
     right: 0%;
   }

   .robotbg {
     height: 650px;
   }

   .mainpro-robot {
     width: 100%;
     top: 370px;
   }

   .mainpro-sss {
     right: -5%;
     top: 100px;
   }

   .mainpro-sss .img-1 {

     width: 750px;
     right: auto;
     left: -15%;

   }

   .services-list {
     background: #EBF3F5;
   }

   .insbg {
     padding-top: 100px;
   }

   .insbg img {
     margin-top: -7rem;
     margin-left: 13rem;
     max-width: 600px;

   }

   .mainpro-robot .img-1 {
     top: -20px;
     right: -80px;
   }

   .mainpro-robot .img-2 {
     right: 230px;
     top: 0px;
   }

   .mainpro-robot .img-3 {
     right: -200px;
     top: 100px;
   }

   .mainpro-robot .img-4 {
     display: none;
   }

   .mainpro-sss {
     width: 100%;
     right: -40%;
   }


  .swiper-slide h3 {
    font-size: 20px;
   }
 }


 @media screen and (max-width:540px) {
   .hero-section {
     padding-top: 100px;
     flex-direction: column;
   }

   .mainpro-pbs {
     width: 100%;
     top: 340px;
   }

   .mainpro-pbs .img-0 {
     width: 100%;
     left: 0;
     min-width: 400px;
   }

   .mainpro-pbs .img-1 {
     width: 180px;
     top: 160px;
     left: 0;
   }

   .mainpro-pbs .img-2 {
     width: 260px;
     top: 80px;
     right: -100px;
   }

 }
 @media screen and (max-width:576px) {
  .bg-top {
    height: 700px;
    padding-top: 360px !important;
  }

  .bg-top-img {
    height: 280px;
  }
  .indexTitle {
   font-size: 40px;
   line-height: 50px;
}
}

 @media screen and (max-width:414px) {

   .mainpro-wms {
     right: 0%;
     left: 3%;
     top: 320px;
     width: 100%
   }

   .insbg img {
     margin: 0;
     max-width: 380px;
   }

   .page-title {
     padding: 20px 15px;
   }

   .solutionbg h2 {
     font-size: 1.2rem;
   }

   .solutionbg h1 {
     font-size: 2rem;
   }

   .solutionbg p {
     font-size: 16px;
   }

 }

 @media screen and (min-width:375px) and (max-width:767px) {
   .navbar {
     padding: 1rem 2rem;
   }

   .jp-banner {
     margin: 3rem 0;
   }

   .jp-banner .jp-banner-text {
     top: 6%;
     left: 2%;
     padding: 0 0.5rem;
   }

   .jp-banner h2 {
     font-size: 18px;
   }

   .jp-banner .platform {
     left: 4%;
   }

   .jp-container h2 {
     font-size: 20px;
     font-weight: bold;
   }

   .jp-banner h2 .yellow {
     font-size: 22px;
   }

   .jp-container {
     padding: 100px 30px;
   }

   .jp-container p {
     margin: 0 0 20px 0;
   }

   .jp-container .nav {
     flex-direction: row;
     margin-bottom: 3rem;
   }

   .jp-container .nav li {
     border-right: none;
     border-bottom: 1px solid #7A7A7A;
   }

   .jp-container .nav li:hover {
     border-right: none;
     border-bottom: 2px solid #006BB4;
     background: #E6F0F8;
   }

   .jp-container .chart {
     width: 100%;
     margin: 20px 12px;

   }

 }

 .modal-warning .btn-close {
  filter: brightness(0) invert(1);
}

.modal-warning .modal-content{
  height: 300px;
}

.modal-warning .modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直置中 */
  min-height: 180px;        /* 設定一個最小高度，方便置中 */

}