/*======Product集合頁======*/
.Po-depict .btn{
	background-color:#313993;
	border-color:#313993;
	font-size:15px!important;
	color:#ffffff;
}
.Po-depict .btn:hover{
	background-color: #00598d;
	border-color:#00598d;
}
.Po-depict p{
	margin-bottom:1em!important;
}
/*改成4行一排*/
@media only screen and (min-width: 41.625rem){
body.node--type-overview-page .layout-main-wrapper>.container-fluid article.node.node--type-overview-page .twodiv.basic-mode .pd-s .flex>a, body.node--type-overview-page .layout-main-wrapper>.container-sm article.node.node--type-overview-page .twodiv.basic-mode .pd-s .flex>a, body.node--type-overview-page .layout-main-wrapper>.container-md article.node.node--type-overview-page .twodiv.basic-mode .pd-s .flex>a, body.node--type-overview-page .layout-main-wrapper>.container-lg article.node.node--type-overview-page .twodiv.basic-mode .pd-s .flex>a, body.node--type-overview-page .layout-main-wrapper>.container-xxl article.node.node--type-overview-page .twodiv.basic-mode .pd-s .flex>a{
	flex-basis:25%;
	max-width:25%;
}
body.node--type-overview-page .layout-main-wrapper>.container-fluid article.node.node--type-overview-page .twodiv.basic-mode .pd-s, body.node--type-overview-page .layout-main-wrapper>.container-sm article.node.node--type-overview-page .twodiv.basic-mode .pd-s, body.node--type-overview-page .layout-main-wrapper>.container-md article.node.node--type-overview-page .twodiv.basic-mode .pd-s, body.node--type-overview-page .layout-main-wrapper>.container-lg article.node.node--type-overview-page .twodiv.basic-mode .pd-s, body.node--type-overview-page .layout-main-wrapper>.container-xxl article.node.node--type-overview-page .twodiv.basic-mode .pd-s{
	max-width:780px;
}
	
}
/*在影片圖添加youtube圖示*/
.video-img{
    position: relative;
    overflow: hidden;
    object-position: 50% 50%;
}
.video-img img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.video-img:before {
    content: " ";
    display: block;
    height: 40px;
    width: 70px;
    top: calc(50% - 10px);
    left: calc(50% - 35px);
    position: absolute;
    background-color: #c00;
    color: #fff;
    border-radius: 7px;
    z-index: 1;

}
.video-img:after {
    content: " ";
    display: block;
    top: calc(50% - 0px);
    left: calc(50% - 10px);
    position: absolute;
    z-index: 10;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent #fff;
}

/*======Product pages======*/
.Pp-div:after {
    content: " ";
    display: block;
    clear: both;
}

.Pp-div hr {
    border: 0px;
    border-bottom: 1px dashed #333333;
}

.Pp-div p,
.Pp-div ul,
.Pp-div ol,
.Pp-div table {
    font-size: 16px !important;
    line-height: 1.5rem !important;
    margin: 5px 0;
}

.Pp-div strong {
    font-weight: bolder
}

.Pp-div h3 {
    color: #2d3994;
    font-size: 20px;
    line-height: 1.6rem;
    margin: 10px 0;
}

.Pp-div ul {
    color: #333333;
    display: inline;
    list-style-position: inside;
    font-size: 14px;
    padding: 0 0 5px 0px;
    list-style-type: none !important;
}

.Pp-div div ul li {
    padding-bottom: 10px
}

.Pp-div table {
    font-size: 16px !important;
    width: 100%;
    line-height: 20px;
    border: 1px solid white;
    border-collapse: collapse;
    margin: 0px;
}

.span-blue {
    color: #2d3994;
    font-weight: 600;
}

.span-red {
    color: rgb(178, 34, 34);
}

.Pp-div table tr td:first-child {
    background-color: rgb(206, 206, 206);
    border: 1px solid white;
    border-collapse: collapse;
    width: 28%;
    font-weight: bold;
    text-align: center;
}

.Pp-div table tr td {
    background-color: rgb(222, 222, 222);
    border: 1px solid white;
    border-collapse: collapse;
    padding: 4px 6px;
    text-align: left;
}

/*-- 2020 New Template --*/
/*2023 新增 Pp-div2 flex 排版*/
.Pp-div2:after,.Pp-div3:after {
    content: " ";
    display: block;
    clear: both;
}

.Pp-div2 > div {
    width: 50%;
    float: left;
}
.Pp-div2 div table{
    margin-right: 20px
}
 .Pp-div2 .column2{
    column-count: 2;
     width: 100%;
    float: none;
}
 .Pp-div2 .column3{
    column-count:3;
     width: 100%;
    float: none;
}
  .no-break{
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: block;
  }
 .Pp-div2 .d-flex{
    width: 100%;
    float: none;
}
.Pp-div2 div:nth-child(2n)::after {
    content: " ";
    display: block;
    clear: both;
}

.paragraph_content_wrapper .field-items img {
    display: block;
    margin: 0 auto
}
.Pp-div2 p,
.Pp-div2 ul,
.Pp-div2 ol,
.Pp-div2 table{
    font-size: 16px !important;
    line-height: 1.5rem !important;
    margin: 5px 0;
}
.Pp-div2 h2{
    color: #2d3994;
    font-weight: 600 !important;
    font-size: 26px;
    line-height: 1.8rem;
    margin: 10px 0 !important;
    position: relative;
}
.Pp-div2 h3{
    color: #2d3994;
    font-weight: 600 !important;
    font-size: 22px;
    line-height: 1.5rem;
    margin: 10px 0 !important;
    position: relative;
    padding-left: 25px;
}
.Pp-div2 .column2 h3,.Pp-div2 .column3 h3{
    margin: 0px 0 15px 0 !important;
}
.Pp-div2 h3::before{
    position: absolute;
    display: block;
    left: 0;
}

.Pp-div2 h4:before{
    position: absolute;
    display: block;
    left: 0;
}

.Pp-div2 h4{
    color: #2d3994;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.6rem !important;
    margin: 10px 0;
    padding-bottom: 5px;
    position: relative;
    padding-left: 35px;
}

.Pp-div2 p{
    margin-top: 0px;
}

.Pp-div2 ul,.Pp-div2 ol{
    margin: 0px;
    margin-bottom: 10px;
    padding-left: 38px;
    list-style-type: none !important;
    padding-bottom: 5px;
}

.Pp-div2 div ul {
    list-style: none;
    padding-left: 22px;
    margin: 0px;
    margin-bottom: 10px;
}

.Pp-div2 div ul li {
    padding-bottom: 3px
}

.Pp-div2 div:first-child ul li{
    font-weight: normal !important;
    padding: 0px 0 3px 0;
}

.Pp-div2 div > ul > li{
    font-weight: 600;
    padding: 7px 0 5px 0;
}
.Pp-div2 div > ul > li ul,.Pp-div2 td > ul > li ul{
    font-weight: normal;
    padding: 0px;
}
/*ordering-info*/
.Pp-div2 table{
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 4px solid #c7e2ec;
    margin-top: 0px;
    margin-bottom: 15px;
}
article.node--product .Pp-div2 table td:first-child {
    width: 28%!important;
    font-weight: 600;
    border-right: 8px solid #ffffff;
}
.Pp-div2 table td {
    border-bottom: 1px solid #c7e2ec;
    padding: 4px 8px;
}
.Pp-div2 .ordering-info{
    border-collapse: collapse!important;
    border-spacing: 0;
    border-top: 4px solid #c7e2ec!important;
    margin-top: 0px!important;
    margin-bottom: 15px!important;
}
.Pp-div2 .ordering-info td:first-child {
    width: 28%;
    font-weight: 600;
    border-right: 8px solid #ffffff!important;
}
.Pp-div2 .ordering-info td {
    border-bottom: 1px solid #c7e2ec!important;
    padding: 4px 8px!important;
}

article.node--product .Pp-div2 td ul{
    list-style: none;
    padding-left: 1.375rem;
    margin: 0;
    margin-bottom: 0.625rem;
}
article.node--product .Pp-div2 td > ul > li {
    font: 600;
    padding: 0.4375rem 0 0.3125rem;
}
article.node--product .Pp-div2 td > ul > li ul {
    padding: 0;
}
.Pp-div2 td ul>li{
    font-weight: 600;
    padding: 7px 0 5px 0;
}
.Pp-div2 td ul>li ul {
    font-weight: 400;
    padding: 0;
}
.Pp-div2 td ul:first-child li {
    font-weight: 400 !important;
    padding: 0 0 3px;
}

/*列印*/
.Pp-div2 td{
    padding: 0!important;
    margin: 0!important;
    vertical-align: top; 
}

@media only screen and (max-width: 768px) {
    .Pp-div2 > div {
        width: 100%;
        float: none;
    }
    .Pp-div2 .column2,.Pp-div2 .column3{
          column-count: 1; 
}
   .Pp-div2 td{
    padding: 0!important;
    margin: 0!important;
    display: block;
    width: 100%!important;
} 
.Pp-div2{
        overflow: auto;
    }
   .Pp-div2 .ordering-info td{
    display: table-cell!important;
    }
}

/*-- Frequency Table --*/
.Pp-table {
    font-size: 16px;
    width: 100%;
    border: 1px solid rgb(206, 206, 206);
    border-collapse: collapse;
    margin: 0px;
}

.Pp-table tr:first-child {
    background-color: rgb(185, 185, 185);
    border-collapse: collapse;
    border: 1px solid #ffffff;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

.Pp-table tr:nth-child(2) {
    background-color: rgb(153, 153, 153);
    border-collapse: collapse;
    border: 1px solid #ffffff;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    color: #ffffff;
}

.Pp-table tr:first-child td {
    border: 1px solid #ffffff;
}

.Pp-table tr td {
    border: 1px solid rgb(206, 206, 206);
    border-collapse: collapse;
    padding: 4px 6px;
    line-height: 20px;
}

/*-- youtube --*/
.Pp-video {
    position: relative;
    padding-bottom: 50%;
    padding-top: 30px;
    max-width: 650px;
    height: auto;
    overflow: hidden;
    margin: auto;
}

.Pp-video iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

/*======Case studies======*/
article.node--type-case-studies .field--name-body .case-studies .col,article.node--type-case-studies .field--name-body .case-studies .row{
    width: 100%;
    float: none
        }
.node--type-article .node--type-article.node--view-mode-full .field--name-body .case-studies h2 {
    font-size: 1.375rem;
    line-height: 1.375rem;
    font-weight: 600;
    margin :0 0 0.9375rem 0;
     color: #2d3994;
}
.case-studies h2 {
    font-size: 1.375rem;
    line-height: 1.375rem;
    font-weight: 600;
    margin :0 0 0.9375rem 0;
     color: #2d3994;
}
.case-studies h3 {
    font-size: 1.1rem;
    line-height: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.9375rem 0;
    color: #111;
}
.case-studies table{
    width: 100%;
    margin: 10px 0
}
.case-studies th{
    background-color: #2d3994;
    color: #fff
}
.case-studies th a{
    color: #fff
}
.case-studies th,
.case-studies td {
    padding: 5px;
    border: 1px solid #ccc;
}
.case-studies tr:nth-last-child(2n) {
    background-color: #eee
}
.company-profile ul{
	list-style:disc!important;
}
.company-profile ul li{
	margin-left:20px;
}
.case-studies .tag-block{
    position: absolute;
    top: -5px;
    padding: 5px;
    background-color: rgba(26, 43, 112, 0.56);
    color: #fff;
    font-size: 12px;
    width: 70px!important;
    }
/*--table style --*/
.blue-table th {
    font-size: 16px;
    font-weight: bold;
    background-color: #0077b3;
    color: #ffffff;
}

.blue-table th a {
    color: #ffffff
}

.blue-table th,
.blue-table td {
    padding: 5px;
    border: 1px solid #ffffff;
    text-align: center
}

.blue-table td:first-child {
    text-align: center;
}
.blue-table {
    width: 100%
}
.blue-table tr:first-child {
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}

.blue-table tr:nth-last-child(2n) {
    background-color: #eee
}
/*======EOL======*/
.EOL table{
    width: 100%;
    margin: 10px 0
}
.EOL th{
    background-color: #2d3994;
    color: #fff
}
.EOL th a{
    color: #fff
}
.EOL th,
.EOL td {
    padding: 5px;
    border: 1px solid #ccc;
}
.EOL tr:nth-last-child(2n) {
    background-color: #eee
}

/* ------------------------------------------------------------------
   Dot-banner override — 7 hotspots
   Scoped .sec-dots .circles.circle-N so they outrank the .circle-N
   rules in INDEX, including the ones inside its max-width:1400px
   media query (media queries add no specificity).
   ------------------------------------------------------------------ */


/* ------------------------------------------------------------------
   Dot-banner override — 7 hotspots
   ------------------------------------------------------------------ */

.sec-dots .circles.circle-1 {
    top: calc(28% - 40px);
    left: calc(35% - 40px);
}
.sec-dots .circles.circle-2 {
    top: calc(24% - 40px);
    left: calc(60% - 40px);
}
.sec-dots .circles.circle-3 {
    top: calc(50% - 40px);
    left: calc(78% - 40px);
}
.sec-dots .circles.circle-4 {
    top: calc(50% - 40px);
    left: calc(26% - 40px);
}
.sec-dots .circles.circle-5 {
    top: calc(48% - 40px);
    left: calc(62.5% - 40px);
}
.sec-dots .circles.circle-6 {
    top: calc(63% - 40px);
    left: calc(86% - 40px);
}
.sec-dots .circles.circle-7 {
    top: calc(55% - 40px);
    left: calc(67% - 40px);
}

.sec-dots .circle-1 .circle-after > span,
.sec-dots .circle-4 .circle-after > span {
    right: auto !important;
}
.sec-dots .circle-2 .circle-after > span {
    right: auto;
    top: auto;
}

.sec-dots .circle-3 .circle-after > span,
.sec-dots .circle-5 .circle-after > span,
.sec-dots .circle-6 .circle-after > span,
.sec-dots .circle-7 .circle-after > span {
    right: 75px !important;
}

.sec-dots .circles .circle-after {
	pointer-events: none;
}

.sec-dots .circles {
	cursor: pointer;
}

.sec-dots .circle-after > span {
    width: 150px;
    padding: 10px 12px;
    text-align: left;
    line-height: 1.35;
    border-radius: 3px;
}

/* Undo everything INDEX applies to the inner spans */
.sec-dots .circle-after > span span {
    position: static;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
    opacity: 1;
    transition: none;
}

/* INDEX's `.circle-N span` selectors match the inner .cs-* spans too.
   The `> span` rules only cover the wrapper, so the children need
   their own reset at equal-or-greater weight. */
.sec-dots .circle-1 .circle-after > span span,
.sec-dots .circle-2 .circle-after > span span,
.sec-dots .circle-3 .circle-after > span span,
.sec-dots .circle-4 .circle-after > span span,
.sec-dots .circle-5 .circle-after > span span,
.sec-dots .circle-6 .circle-after > span span,
.sec-dots .circle-7 .circle-after > span span {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
}

.sec-dots .circle-after > span .cs-title {
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 7px;
    margin-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.sec-dots .circle-after > span .cs-sub {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    padding-top: 7px;
    padding-bottom: 5px;
}

.sec-dots .circle-after > span .cs-item {
    position: relative;
    font-size: 12px;
    font-weight: 400;
    padding-left: 12px;
    margin-top: 2px;
}

.sec-dots .circle-after > span .cs-item::before {
    content: "•";
    position: absolute;
    left: 2px;
    top: 0;
}

.sec-dots .circles:focus .circle-after span,
.sec-dots .circles:focus .circle-after::after {
	opacity: 1;
}

.sec-dots .circles:focus > div {
	animation: none;
}

.sec-dots .circles:focus-visible {
	outline: 2px solid #002e5a;
	outline-offset: 6px;
	border-radius: 50%;
}




/* ------------------------------------------------------------------
   TOP ROW
   ------------------------------------------------------------------ */

.epp .epp-top {
    padding-bottom: 20px;
}


/* ------------------------------------------------------------------
   FEATURES COLUMN
   ------------------------------------------------------------------ */

.epp-features {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.epp .epp-title {
    padding: 10px 0;
    text-align: center;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0;
}


/* ------------------------------------------------------------------
   FEATURE GRID
   ------------------------------------------------------------------ */

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(110px, auto);
    gap: 12px;
}

.grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 16px;
    background: #F0F0F0;
}

.grid-item.full-row {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.grid-item > .Pp-div2 {
    width: 100%;
}

/* --- The icon gutter ---
   .Pp-div2 h3::before is absolutely positioned at left:0 and gets its
   content from the theme. The 25px padding is the space it lives in —
   remove the padding and the icon lands on the first letter.
   Heading and body share the same gutter so their text edges line up
   and the icon hangs outside it. Change 26px in one place to retune. */
.epp .epp-features .Pp-div2 h3 {
    padding-left: 26px;
    font-size: 19px;
    line-height: 1.3rem;
    margin: 0 0 6px 0 !important;
}

.epp .epp-features .Pp-div2 ul {
    padding-left: 26px;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.epp .epp-features .Pp-div2 ul li {
    font-size: 15px !important;
    line-height: 1.4rem;
    padding-bottom: 0;
}


/* ------------------------------------------------------------------
   BENEFITS ROW
   ------------------------------------------------------------------ */

.epp .epp-benefits {
    background: #313B93;
    border-radius: 12px;
    padding: 16px 0;
    margin-left: 0;
    margin-right: 0;
}

.epp .epp-benefits-title {
    color: #fff;
    padding: 20px 0 10px 0;
    text-align: center;
    font-size: 1.9rem;
    line-height: 1.2;
    margin: 0;
}

.epp .epp-benefits .epp-benefits-body {
    padding: 10px 0 10px 10px;
    width: 100%;
}

/* Kills the inherited 38px left / 5px bottom outright. */
.epp .epp-benefits .Pp-div2 ul.epp-benefits-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.epp .epp-benefits .Pp-div2 ul.epp-benefits-list > li {
    flex: 1 1 240px;
    padding: 0;
    margin: 0;
    font-weight: 400;
}

/* align-items: flex-start rather than center, so the three icons sit
   on one line across the row instead of each centring against its own
   block of text. */
.epp .epp-benefits .epp-benefit {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.epp .epp-benefits .epp-benefit-text h2 {
	padding: 0;
	margin: 0 0 4px 0 !important;
}

.epp .epp-benefits .epp-benefit-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}

.epp .epp-benefits .Pp-div2 h2 {
    color: #fff;
    font-size: 22px;
    line-height: 1.3rem;
    margin: 0 0 4px 0 !important;
}

.epp .epp-benefits .Pp-div2 p {
    color: #fff;
    font-size: 15px !important;
    line-height: 1.4rem !important;
    margin: 0;
}

/* ------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------ */

.epp .epp-cta-row {
    margin-left: 0;
    margin-right: 0;
    padding: 40px 0 8px 0;
    text-align: center;
}

.epp a.epp-cta {
    display: inline-block;
    background-color: transparent;
    border: 2px solid #313B93;
    border-radius: 6px;
    color: #313B93;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    padding: 13px 32px;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.epp a.epp-cta:hover,
.epp a.epp-cta:focus {
    background-color: #313B93;
    border-color: #313B93;
    color: #fff;
    text-decoration: none;
}

.epp a.epp-cta:focus-visible {
    outline: 2px solid #313B93;
    outline-offset: 3px;
}


/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media screen and (max-width: 1199px) {
    .epp .epp-title {
        font-size: 1.7rem;
    }
    .epp .epp-features .Pp-div2 h3 {
        font-size: 17px;
    }
    .epp .epp-features .Pp-div2 ul li {
        font-size: 14px !important;
    }
    .grid-container {
        grid-auto-rows: minmax(96px, auto);
        gap: 10px;
    }
    .grid-item {
        padding: 12px;
    }
    .epp .epp-benefits .epp-benefit-icon {
        width: 48px;
        height: 48px;
    }
    .epp .epp-benefits .epp-benefit {
        gap: 14px;
    }
    .epp .epp-benefits .Pp-div2 h2 {
        font-size: 16px;
    }
}

@media screen and (max-width: 991px) {
    .epp .epp-benefits .Pp-div2 ul.epp-benefits-list > li {
        flex: 1 1 45%;
    }
}

@media screen and (max-width: 767px) {
    .epp-features {
        display: block;
        padding-top: 24px;
    }
    .epp .epp-title {
        font-size: 1.6rem;
        padding-bottom: 4px;
    }
    .epp .epp-benefits-title {
        font-size: 1.5rem;
        padding-top: 10px;
    }
    /* Even side padding — the 10px-left/0-right split reads as
       off-centre once the row is full width. */
    .epp .epp-benefits .epp-benefits-body {
        padding: 8px 4px;
    }
    .epp .epp-benefits .Pp-div2 ul.epp-benefits-list > li {
        flex: 1 1 100%;
    }
    .sec-dots .circle-after span {
    	display: block;
    }
    .epp .epp-cta-row {
        padding-top: 24px;
    }
    .epp a.epp-cta {
        display: block;
        padding: 14px 20px;
    }
}

@media screen and (max-width: 575px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(0, auto);
        gap: 10px;
    }
    .grid-item,
    .grid-item.full-row {
        justify-content: flex-start;
        padding: 14px 12px;
    }
    /* Tighter gutter on narrow screens — 26px is a big share of a
       320px line. The icon still clears the text. */
    .epp .epp-features .Pp-div2 h3 {
        padding-left: 22px;
    }
    .epp .epp-features .Pp-div2 ul {
        padding-left: 22px;
    }
    .epp .epp-top {
        padding-bottom: 10px;
    }
    .epp .epp-benefits {
        padding: 12px 0;
    }
    .epp .epp-benefits .epp-benefit-icon {
        width: 42px;
        height: 42px;
    }
    .epp .epp-benefits .epp-benefit {
        gap: 12px;
    }
}


/* ==================================================================
   MOTION
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sec-dots .circles > div {
        animation: none;
    }
}