/* 0905以下新增 */
/* navBarLogo */
#menu .wrap .cayin_logo {
    width: 146px;
}

.btn--link {
    position: relative;
    display: inline-block;
    background: rgb(0, 160, 233);
    background: var(--gradient-color);
    color: #fff;
    padding: 8px 32px 8px 32px;
    border-radius: 50px;
    margin-top: 12px;
    font-weight: 500;
    z-index: 1;

    border: none !important;
}


.w3-row-padding {
    display: flex;
    flex-wrap: wrap;
}

#MainWrap .container {
    width: 100%;
    padding: 0;
}

.container .w3-row-padding {
    justify-content: center;
}

.container .w3-row-padding .SMPcompareBox {
    width: 33.333%;
    float: none;
}

.productImg {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .container .w3-row-padding .SMPcompareBox {
        width: 50%;
    }
}


.finalButton .box {
    margin-bottom: 0;
    margin: unset;
}


/*-------------finalButton開始-----------------*/
.finalButton {
    margin: 0;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    background-color: #e7e7e7;
    padding-top: 1%;
    padding-bottom: 2%;
}

.finalButton .contents {
    max-width: 1200px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 2% 0 5% 0;
}

.finalButton .contents .box {
    width: 20%;
    height: auto;
    padding: 20px;
    text-decoration: none;
    box-sizing: border-box;
    text-align: center;
}

.finalButton .contents .box h2 {
    width: 100%;
    display: block;
    color: #595959;
    line-height: 1.5em;
    margin: 15px 0 2px 0;
    text-align: center;
}

.finalButton .contents .box .Photo {
    width: 100%;
    height: auto;
    color: #595959;
}

.finalButton .contents .box span {
    width: 100%;
    display: block;
    color: #595959;
    text-align: center;
}

.finalButton .contents .box a {
    margin-top: 5%;
    text-decoration: none;
    color: var(--primary-color);
    width: 100%;
    display: block;
    text-align: center;
}

.finalButton .contents .box a:hover {
    text-decoration: underline;
}

.index-dataSheet,
.index-brochure,
.index-needHelp,
.index-downloadTrial,
.index-orderingInfo,
.index-FAQ,
.index-needHelp,
.index-Technical-support,
.index-InstallionGide,
.index-applyTrial {
    font-size: 7em;
}

.qig_icon {
    width: 140px;
}

.small-icon .index-dataSheet,
.small-icon .index-brochure,
.small-icon .index-needHelp,
.small-icon .index-downloadTrial,
.small-icon .index-orderingInfo,
.small-icon .index-FAQ,
.small-icon .index-needHelp,
.small-icon .index-Technical-support,
.small-icon .index-InstallionGide,
.small-icon .index-applyTrial {
    font-size: 5em;
}

.small-icon .qig_icon {
    width: 100px;
}

@media only screen and (max-width: 1680px) {
    div.productName span {
        max-width: 1366px;
        padding: 0 5%;
    }

    .subButtonAll {
        max-width: 1366px;
        padding: 0 5%;
    }
}

@media only screen and (max-width: 1366px) {
    div.productName span {
        max-width: 1024px;
        padding: 0 5%;
    }

    .subButtonAll {
        max-width: 1024px;
        padding: 0 5%;
    }
}

/*--1024寬開始--------------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
    .finalButton {
        padding-top: 2%;
        padding-bottom: 0;
    }

    .finalButton .contents {
        width: 768px;
    }

    .subButtonAll a {
        font-size: 0.9em;
    }

    .subButtonAll {
        padding: 2px;
    }

    div.productName span {
        width: 90%;
        max-width: 768px;
        padding: 0 2%;
    }

    .subButtonAll {
        width: 90%;
        max-width: 768px;
        padding: 0 2%;
    }
}

/*--768寬開始--------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {

    .subButtonAll {
        column-gap: 12px;
    }

    .finalButton {
        padding-top: 9%;
        padding-bottom: 3%;
    }

    .finalButton .contents {
        width: 600px;
        margin: 20px auto;
    }

    .finalButton .contents .box {
        width: 31.33%;
        margin: 1%;
        padding: 10px;
        margin-bottom: 10%;
    }

    div.productName {
        flex-direction: column;
        width: 70%;
        padding-left: 20px;
    }
}

/*--736(iphone橫)寬開始--------------------------------------------------------------------*/
@media only screen and (max-width: 736px) {
    .subButtonAll a {
        font-size: 0.85em;
        margin-left: 15px;
        padding-top: 1.5px;
    }

    div.productName span {
        font-size: 1em;
        padding-top: 1.5px;
    }
}

/*--700寬開始--------------------------------------------------------------------*/
@media only screen and (max-width: 700px) {
    .subButtonAll a {
        font-size: 0.8em;
        margin-left: 10px;

    }

    div.productName span {
        font-size: 0.95em;
        padding-top: 5px;
    }
}

/*--600寬開始--------------------------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
    .whiteSelector {
        opacity: 1;
        height: 505px;
    }

    .subButtonAll {
        display: none;
        flex-direction: column;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        right: 0%;
        top: 110px;
        background-color: white;
        z-index: 19;
    }

    .show {
        display: flex;
    }

    .subButtonAll a {
        margin: 0 3%;
        padding: 0;
        text-decoration: none;
        height: 34px;
        width: 94%;
        padding-top: 20px;
        text-align: center;
        border-top: 1px solid #dbdbdb;
        color: #707070;
        font-size: 0.85em;
    }

    .subButtonAll a:hover {
        text-decoration: none;
    }

    div.productName span {
        /* top:70px; */
        top: 195px;
        left: 5%;
    }

    .submenuArrow {
        top: 189px;
    }

    .finalButton {
        padding-bottom: 0;
    }

    .finalButton .contents {
        width: 100%;
        margin: 20px auto;
        justify-content: center;
    }

    .finalButton .contents .box {
        /* width: 90%; */
        margin: 5% 5%;
        padding: 10px;
        margin-bottom: 10%;
    }

    .index-dataSheet,
    .index-brochure,
    .index-needHelp,
    .index-downloadTrial,
    .index-orderingInfo,
    .index-FAQ,
    .index-needHelp {
        font-size: 5em;
    }

    .finalButton2 .qig_icon {
        width: 100px;
    }
}

/* 0905以上新增 */
/*----------解決overflow-x:hidden後,平板手機滾動不順的問題---------------*/
* {
    -webkit-overflow-scrolling: touch;
}

.index-needHelp {
    font-size: 7em;
    color: #595959;
}

/*----------finalButton2-START---------------*/
.finalButton2 {
    margin: 0;
    width: 100%;
    height: auto;
    float: left;
    background-color: #e7e7e7;
    padding-top: 1%;
    padding-bottom: 3%;
}

.finalButton2 .contents {
    height: auto;
    padding: 0 5px;
    margin: 5% auto;
    box-sizing: border-box;
}

.finalButton2 .contents .box {
    width: 96%;
    height: auto;
    float: left;
    margin: 1% 2%;
    padding: 20px;
    text-decoration: none;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 10%;
}

.finalButton2 .contents .box h2 {
    width: 100%;
    float: left;
    display: block;
    color: #595959;
    line-height: 1.5em;
    margin: 15px 0 10px 0;
    text-align: center;
}

.finalButton2 .contents .box .Photo {
    width: 100%;
    height: auto;
    float: left;
    color: #595959;
}

.finalButton2 .contents .box span {
    width: 100%;
    float: left;
    display: block;
    color: #595959;
    text-align: center;
}

.finalButton2 .contents .box .mylinks {
    float: left;
    margin-top: 5%;
    text-decoration: none;
    color: #007ed4;
    width: 100%;
    display: block;
    text-align: center;
    cursor: pointer;
}

.finalButton2 .contents .box .mylinks:hover {
    text-decoration: underline;
}

.finalButton2 .contents .box a {
    text-decoration: none;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: auto;
    text-decoration: none;
}




/*警告視窗, 已選超過超出3個產品*/
.warningModal {
    margin-top: 10%;
}

.productImg {
    max-width: 240px;
}

@media only screen and (max-width: 1024px) {
    .productImg {
        max-width: 200px;
    }
}

@media only screen and (max-width: 768px) {
    .productImg {
        max-width: 240px;
    }
}

.comparePanle {
    top: 144px;
    height: 40px;
    opacity: 1;
}

h1 {
    color: #595959;
}

h2 {
    color: #595959;
}


h4 {
    color: #595959;
}

/*這是產品說明span*/
h5 {
    display: block;
    text-align: center;
    color: #595959;
}


a {
    text-decoration: none;
}

.imgFill1 {
    width: 100%;
}

.panwidth {
    width: 80%;
}

.relPos {
    position: relative;
}

.addButtonCircular {
    width: 30px;
    height: 30px;
    line-height: 30px;
    /*position: absolute;*/
    margin: 0 auto;
    /*right: 20px;*/
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.selected {
    /*border-style:solid !important;*/
    border-style: none !important;
    border-color: #d9d9d9 !important;
    border-width: thin !important;
    background: #edf5fd;
}

.rotateBtn {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.comparePanle {
    position: fixed;
    bottom: 10px;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 3;
}

.product {
    list-style-type: none;
    /*border: 1px solid blue;*/
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.product:hover {
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}

.product .header {
    background-color: #111;
    color: white;

}

.product li {
    border-bottom: 1px solid #B5B4B7;
    padding: 10px;
    text-align: center;
}

.product .grey {
    background-color: #eee;
}

/*這是跳出來的框*/
.contentPop {
    width: 98%;
    margin-left: 1%;
    height: auto;
    /* 少於 3 個產品時，展開的比較表置中（Meg 2026-09） */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contentPop::before,
.contentPop::after {
    content: none;
}

.contentPop > .compareItemParent {
    float: none;
}

.compHeader {
    min-height: 170px;
}

.compHeader img {
    max-width: 270px;
    height: auto;
}

.titleMargin {
    padding: 4px 0px 4px 4px;
}

.titleMargin1 {
    padding: 0px 0px 0px 4px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.contents {
    width: 1200px;
    margin: 0 auto;
}

.box {

    margin-bottom: 20%;
    border-radius: 5px;
}

/*20210809*/
.marg_bottom {
    margin: 4% 0 5% 0;

}

.modal {
    z-index: 3;
    display: none;
    margin-top: 60px;
    padding-top: 100px;
    padding-bottom: 10%;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4)
}

.modPos {
    padding-top: 40px;
}

li.Inquiry a {
    color: #007ed4;
    text-decoration: none;
}

li.Inquiry a:hover {
    color: #007ed4;
    text-decoration: underline;
}

.addcoloryellow {
    color: #007ed4 !important;
}

.fas.fa-check {
    transform: scale(0.6);
}

.comparewbtn {
    background-color: #007ed4;
    color: #fff;
    border-radius: 30px;
    padding: 5px 30px;
}

.back_to_compare_btn {
    background-color: #f2f2f2;
    color: #007ed4;
    border-radius: 30px;
    padding: 5px 30px;
}

.container {
    padding: 0.01em 11px;
}

.container:after {
    content: "";
    display: table;
    clear: both;
}

a.inquiry_link {
    display: block;
    text-align: center;
    color: #007ed4;
    margin-bottom: 20px;
    text-decoration: none;
}


a.inquiry_link:hover {
    text-decoration: underline;
}

.w3-col ul {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto repeat(2, 50px) 80px repeat(5, 50px) 80px 50px 120px repeat(16, auto);
}

.w3-col ul li {
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-content {
    width: 100%;
}


/*--contents1680寬開始--------------------------------------------------------------------------------*/
@media only screen and (max-width: 1680px) {
    .compHeader {
        min-height: 170px;
    }

    .compHeader img {
        max-width: 270px;
        height: auto;
    }

    .modPos {
        padding-top: 80px;
        /*20210809*/
    }
}

/*--contents1366寬開始--------------------------------------------------------------------------------*/
@media only screen and (max-width: 1366px) {
    .contents {
        width: 1024px;
    }

    .compHeader {
        min-height: 190px;
    }

    .modPos {
        padding-top: 70px;
        /*20210809*/
    }
}

/*--contents1024寬開始--------------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
    .contents {
        width: 768px;
    }

    .backToSelect {
        margin-top: 6%;
    }

    .compHeader {
        min-height: 145px;
    }

    .compHeader img {
        max-width: 200px;
        height: auto;
    }

    .modPos {
        padding-top: 80px;
        /*20210809*/
    }

}

/*--contents768寬開始--------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
    .contents {
        width: 600px;
    }

    .backToSelect {
        margin-top: 20px;
    }

    .compHeader {
        min-height: 120px;
    }

    .compHeader img {
        max-width: 170px;
        height: auto;
    }

    /*20210809*/
    .contentPop {
        margin-bottom: 1%;
    }

    .modPos {
        padding-top: 120px;
    }

    .w3-col ul {
        grid-template-rows: auto repeat(2, 50px) repeat(2, 80px) repeat(2, 50px) repeat(3, 80px) 50px 120px repeat(16, auto);
    }
}

/*--contents600寬開始--------------------------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
    .contents {
        width: 100%;
    }

    .backToSelect {
        margin-top: 20px;
    }

    .warningModal {
        margin-top: 50%;
    }

    .productImg {
        max-width: 240px;
        float: left;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding-bottom: 10px;
    }

    /*20210809*/
    .modPos {
        padding-top: 144px;
    }

    .w3-col ul {
        grid-template-rows: auto repeat(2, 50px) repeat(2, 80px) 50px repeat(3, 80px) 120px 80px 120px repeat(8, 50px) 80px repeat(5, 50px) 80px 50px;
    }
}

/*20210809*/
/*--contents 425寬開始--------------------------------------------------------------------------------*/
@media only screen and (max-width: 425px) {
    .w3-col ul {
        grid-template-rows: auto repeat(2, 50px) 120px 100px 50px repeat(3, 100px) 120px 80px 260px repeat(8, 50px) 80px repeat(3, 50px) repeat(3, 80px) 50px;
    }
}

/*--contents 320寬開始--------------------------------------------------------------------------------*/
@media only screen and (max-width: 320px) {
    .w3-col ul {
        grid-template-rows: auto repeat(2, 80px) 160px 120px 50px 100px repeat(2, 120px) 140px 100px 280px 100px repeat(7, 50px) 100px 50px 80px 50px repeat(2, 80px) 100px 80px;
    }

    .small-icon .index-dataSheet,
    .small-icon .index-brochure,
    .small-icon .index-needHelp,
    .small-icon .index-downloadTrial,
    .small-icon .index-orderingInfo,
    .small-icon .index-FAQ,
    .small-icon .index-needHelp,
    .small-icon .index-Technical-support,
    .small-icon .index-InstallionGide,
    .small-icon .index-applyTrial {
        font-size: 3em;
    }
}

@media only screen and (max-width: 992px) {
    .box {
        margin: auto;
        margin-bottom: 20%;
    }
}


@media only screen and (max-width:992px) {
    .titleMargin {
        padding: 4px 0px 0px 4px;
    }

    .titleMargin1 {
        padding: 0px 0px 0px 4px;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
}


@media only screen and (max-width:600px) {
    .compareThumb {
        height: 100px;
    }

    .compHeader {
        min-height: 65px;
    }

    .compHeader img {
        max-width: 75px;
        height: auto;
    }
}

@media only screen and (min-width:993px) {
    .comparePanle {
        position: fixed;
        bottom: 10px;
        width: 50%;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        z-index: 3;
    }
}
/* ===== 比較結果 popup（Meg 2026-09）===== */
#id01.modPos { background-color: rgba(0,0,0,0.55); }
.modPos .contentPop {
    max-width: 1200px; margin: 0 auto; padding: 46px 18px 10px;
    background: #fff; border-radius: 14px; position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.modPos .contentPop .product li.productName {
    position: static; left: auto; z-index: auto; display: block;
    width: auto; height: auto; color: #333; font-weight: 700;
}
.modPos .contentPop .product li.productName span {
    position: static; top: auto; left: auto; width: auto; max-width: none; color: #333;
}
.cmp-pop-x {
    position: absolute; top: 4px; right: 16px;
    line-height: 1; text-align: center; font-size: 40px; font-weight: 300;
    color: #007ED4; background: none; border-radius: 0; box-shadow: none;
    cursor: pointer; z-index: 5; transition: color 0.2s;
}
.cmp-pop-x:hover { color: #005c9e; }
.cmp-screens-svg text.gt-svg { font-family: good-times, "Poppins", sans-serif !important; }

/* ===== compare-smp 內容區塊：導言 / 規格總表 / 如何選擇 / FAQ（Meg 2026-09）===== */
.cmp-intro {
    max-width: 900px;
    margin: 0 auto 10px;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: left;
}
.cmp-lede {
    font-size: 1.05em;
    line-height: 1.7;
    color: #595959;
    margin: 0 0 14px;
}
.cmp-quick {
    font-size: 1em;
    line-height: 1.7;
    color: #595959;
    background: #edf5fd;
    border-left: 4px solid #007ed4;
    border-radius: 4px;
    padding: 14px 18px;
    margin: 0;
}
.cmp-quick strong {
    color: #007ed4;
}
.cmp-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 0;
    box-sizing: border-box;
    text-align: left;
}
.cmp-section .cmp-h {
    color: #595959;
    font-weight: 500;
    text-align: left;
    margin: 0 0 16px;
}
.cmp-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cmp-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 720px;
    font-size: 0.92em;
    color: #595959;
}
.cmp-table th,
.cmp-table td {
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}
.cmp-table thead th {
    background: #f2f2f2;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #cbd5db;
    white-space: nowrap;
}
.cmp-table tbody th[scope="row"] {
    text-align: left;
    font-weight: 500;
    color: #333;
    background: #fafafa;
    white-space: nowrap;
}
.cmp-table tbody tr:hover td,
.cmp-table tbody tr:hover th {
    background: #edf5fd;
}
.cmp-choose {
    margin: 0;
    padding-left: 1.2em;
    line-height: 1.7;
    color: #595959;
}
.cmp-choose li {
    margin-bottom: 10px;
}
.cmp-faq {
    border-top: 1px solid #e5e5e5;
}
.cmp-faq details {
    border-bottom: 1px solid #e5e5e5;
    padding: 14px 4px;
}
.cmp-faq summary {
    cursor: pointer;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
    list-style: none;
    position: relative;
    padding-right: 24px;
}
.cmp-faq summary::-webkit-details-marker {
    display: none;
}
.cmp-faq summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    color: #007ed4;
}
.cmp-faq details[open] summary::after {
    content: "\2013";
}
.cmp-faq details p {
    margin: 10px 0 0;
    line-height: 1.7;
    color: #595959;
}

@media only screen and (max-width: 600px) {
    .cmp-section {
        padding-top: 32px;
    }
    .cmp-intro,
    .cmp-section {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* screens 圖 + note（Meg 2026-09）*/
.cmp-screens {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 4px 0 6px;
}
.cmp-screens-svg {
    display: block;
    width: 100%;
    min-width: 640px;
    height: auto;
}
.cmp-note {
    font-size: 0.9em;
    line-height: 1.6;
    color: #888;
    margin: 0;
}
/* 收掉多餘垂直空白，讓選擇區與 COMPARE 按鈕盡量同屏（Meg 2026-09）*/
#MainWrap > br,
#MainWrap > .w3-center > br {
    display: none;
}
#MainWrap > .w3-center:first-of-type {
    margin-top: 6px;
}
#MainWrap > .w3-center:first-of-type h1.f35 {
    margin: 6px 0;
}
#MainWrap > .w3-center:first-of-type h2.f20 {
    margin: 0 0 4px;
}
/* 精簡的選擇卡：寬螢幕 5 個一排，中螢幕 3 個，窄螢幕 2 個（Meg 2026-09）*/
.container .w3-row-padding .SMPcompareBox {
    width: 20%;
}
@media only screen and (max-width: 1200px) {
    .container .w3-row-padding .SMPcompareBox {
        width: 33.333%;
    }
}
@media only screen and (max-width: 768px) {
    .container .w3-row-padding .SMPcompareBox {
        width: 50%;
    }
}
.container .w3-row-padding .SMPcompareBox .box {
    margin-bottom: 14px;
}
@media only screen and (max-width: 992px) {
    .container .w3-row-padding .SMPcompareBox .box {
        margin: 0 auto 14px;
    }
}
.container .w3-row-padding .selectProduct.box {
    padding: 10px 8px 6px;
}
.container .w3-row-padding .productImg {
    max-width: 148px;
}
.container .w3-row-padding .SMPcompareBox h4.f20 {
    font-size: 1em;
    margin: 6px 0 2px;
}
.container .w3-row-padding .SMPcompareBox h5.f16 {
    font-size: 0.78em;
    line-height: 1.35;
    margin: 0 0 6px;
    min-height: 2.7em;
}
.container .w3-row-padding a.inquiry_link {
    font-size: 0.8em;
    margin-bottom: 8px;
}

/* SMP / CMS 等用 good-times，壓過 font.css 的整批 !important 規則 */
.gt {
    font-family: good-times, 'Poppins', sans-serif !important;
}

/* COMPARE 按鈕：大小比照 web-technologies 的 Contact Us（.mail_btn）*/
.cmprBtn,
.cmprBtn.btn--link {
    padding: 8px 22px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: normal;
}

/* COMPARE hover/focus：拿掉 W3.CSS 黑陰影，改淡藍色光暈（Meg 2026-09）*/
.cmprBtn.btn--link { transition: box-shadow 0.2s ease, filter 0.2s ease; }
.cmprBtn.btn--link:hover,
.cmprBtn.btn--link:focus,
.cmprBtn.btn--link:focus-visible { box-shadow: none; outline: none; }
.cmprBtn.btn--link.active:hover,
.cmprBtn.btn--link.active:focus-visible {
    box-shadow: 0 0 0 3px rgba(0,126,212,0.20), 0 6px 16px rgba(0,145,220,0.40);
    filter: brightness(1.04);
}

/* ===== 套用 web-technologies 的 FAQ 樣式（Meg 2026-09）===== */
.wt-faq { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.wt-faq details { border-bottom: 1px solid #e5e5e5; padding: 16px 4px; }
.wt-faq summary { font-size: 16px; font-weight: 500; color: #222; cursor: pointer; list-style: none; position: relative; padding-right: 26px; }
.wt-faq summary::-webkit-details-marker { display: none; }
.wt-faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; color: #007ed4; font-weight: 600; font-size: 20px; line-height: 1; }
.wt-faq details[open] summary::after { content: "-"; }
.wt-faq details p { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: #595959; }

/* ===== 套用 web-technologies 的 finalButton 樣式（Meg 2026-09）===== */
.finalButton { margin: 0; width: 100%; height: auto; display: flex; justify-content: center; background-color: #e7e7e7; padding: 1% 0; font-family: "Poppins", "Noto Sans TC", sans-serif; font-weight: 400; }
.finalButton .contents { width: 1200px; max-width: 100%; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap; margin: 2% 0 5% 0; }
.finalButton .contents .box { width: 20%; height: auto; padding: 20px; text-decoration: none; box-sizing: border-box; text-align: center; }
.finalButton .contents .box h2 { width: 100%; display: block; color: #595959; line-height: 1.5em; margin: 15px 0 2px 0; text-align: center; font-weight: 500; min-height: 3em; }
.finalButton .contents .box span { width: 100%; display: block; color: #595959; text-align: center; }
.finalButton .contents .box span.f16 { min-height: 4.8em; }
.finalButton .contents .box .mylinks a, .finalButton .contents .box > a { margin-top: 18px; text-decoration: none; color: #007ED4; width: 100%; display: block; text-align: center; }
.finalButton .contents .box a:hover { text-decoration: underline; }
.finalButton [class^="index-"] { font-size: 7em; color: #595959; }
.finalButton.small-icon [class^="index-"], .finalButton .small-icon [class^="index-"] { font-size: 5em; }
@media only screen and (max-width: 1024px) {
    .finalButton { padding: 2% 0 0; }
    .finalButton .contents { width: 768px; }
}
@media only screen and (max-width: 767px) {
    .finalButton .contents { width: 100%; }
    .finalButton .contents .box { width: 50%; }
}
@media only screen and (max-width: 480px) {
    .finalButton .contents .box { width: 100%; }
}

/* ===== 點整張選擇卡即可選取 + WarningModal flex（Meg 2026-09）===== */
.container .w3-row-padding .selectProduct.box {
    cursor: pointer;
}
.warningModal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 24px 22px;
    box-sizing: border-box;
}
.warningModal .w3-container {
    width: 100%;
    padding: 0;
}
.warningModal h4.f20 {
    margin: 10px 0 !important;
}
.warningModal h3 {
    margin: 8px 0;
}


/* ===== 黏頂子選單（port from webtech.css，2026-09，底色改 CAYIN 藍）===== */
.whiteSelector { background-color: #007ED4; opacity: 0.96; width: 100%; position: fixed; top: 0; z-index: 20; transition: opacity 0.5s; }
div.productName { position: fixed; left: 0; z-index: 21; display: flex; justify-content: center; width: 100%; height: auto; color: #fff; font-weight: 300; font-size: 1.125em; text-decoration: none; transition: all 0.5s; font-family: "Poppins", "Noto Sans TC", serif; }
.productName-short { display: none; }
div.productName span { width: 95%; max-width: 1200px; font-family: 'Poppins', sans-serif; color: #fff; }
.subButtonAll { position: fixed; left: 50%; transform: translateX(-50%); display: flex; justify-content: end; column-gap: 24px; width: 95%; max-width: 1200px; height: auto; font-weight: 300; font-size: 1.125em; z-index: 25; transition: all 0.5s; font-family: "Poppins", "Noto Sans TC", serif; }
.subButtonAll.show { display: flex; }
.subButtonAll a { color: #fff; padding: 0; text-decoration: none; font-size: 18px; font-family: 'Poppins', sans-serif; }
.subButtonAll a:hover { text-decoration: underline; color: #fff; }
.subButtonAll a .gt { font-family: good-times, 'Poppins', sans-serif !important; }
.submenuArrow { position: absolute; right: 0; bottom: 285px; width: 100%; height: 30px; cursor: pointer; }
.downArrow, .upArrow { width: 96%; height: 30px; background-repeat: no-repeat; background-position: right center; display: none; }
.downArrow { background-image: url(/images/digital_signage_products/submenu_arrow_down.png); }
.upArrow { background-image: url(/images/digital_signage_products/submenu_arrow_up.png); }
@media only screen and (max-width: 768px) {
    div.productName { width: 60%; padding-left: 14px; }
    .productName-full { display: none; }
    .productName-short { display: inline; }
}
@media only screen and (max-width: 600px) {
    .whiteSelector { opacity: 1; height: 505px; }
    div.productName span { top: 195px; left: 5%; }
    .submenuArrow { top: 189px; }
    .subButtonAll { display: none; flex-direction: column; width: 100%; height: auto; margin: 0; top: 110px; left: 0; transform: none; justify-content: center; align-items: center; background-color: #007ED4; opacity: 1; }
    .subButtonAll.show { display: flex; }
    .subButtonAll a { margin: 0 3%; padding: 0; height: 34px; width: 94%; display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,0.3); justify-content: center; }
    .subButtonAll a:hover { text-decoration: none; }
}

/* h1 往下一些（子選單下方留空間） + 導言往上 padding 60px */
#MainWrap > .w3-center:first-of-type { margin-top: 136px; }
.cmp-intro { padding-top: 60px; }

/* selectProduct 卡片：縮短、勾勾改右上角方格（Meg 2026-09）*/
.container .w3-row-padding .selectProduct.box { position: relative; padding: 10px 10px 6px; }
.container .w3-row-padding .SMPcompareBox .box { margin-bottom: 10px; }
.container .w3-row-padding .productImg { max-width: 116px; }
.container .w3-row-padding .SMPcompareBox h4.f20 { margin: 4px 0 2px; }
.container .w3-row-padding .SMPcompareBox h5.f16 { min-height: 0; margin: 0 0 4px; }
.container .w3-row-padding a.inquiry_link { margin-bottom: 4px; }
.selectProduct.box .addToCompare.addButtonCircular {
    position: absolute; top: 8px; right: 8px;
    width: 20px; height: 20px; line-height: 20px; margin: 0;
    border-radius: 4px; border: 1.6px solid #c2c2c2;
    background: #fff !important; background-color: #fff !important; box-shadow: none !important;
    transition: background-color .15s, border-color .15s;
}
.selectProduct.box .addToCompare.addButtonCircular .fas.fa-check { display: none !important; }
.selectProduct.box .addToCompare.addButtonCircular.addcoloryellow {
    background: #007ED4 !important; background-color: #007ED4 !important; border-color: #007ED4 !important;
}
.selectProduct.box .addToCompare.addButtonCircular.addcoloryellow::after {
    content: ""; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* client-server 架構圖 */
.cmp-arch { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 6px; }
.cmp-arch-svg { display: block; width: 100%; min-width: 700px; height: auto; }
.cmp-arch-svg text.gt-svg, .cmp-arch-svg tspan.gt-svg { font-family: good-times, "Poppins", sans-serif !important; }

/* 說明文字大小與「如何選擇」的條目一致 */
.cmp-note { font-size: 1em; line-height: 1.7; color: #595959; }
/* FAQ 最後一題保留底線，區塊下方留 30px */
.cmp-section .wt-faq { padding-bottom: 30px; }
.cmp-section .wt-faq details:last-child { border-bottom: 1px solid #e5e5e5; }

/* 每個 section 之間固定 60px */
.cmp-section { padding-top: 60px; }
@media only screen and (max-width: 600px) { .cmp-section { padding-top: 44px; } }

/* FAQ 之後的 Contact Us 按鈕（port from web-technologies .mail_btn）*/
.cmp-contact { text-align: center; padding-bottom: 60px; }
.cmp-contact .contact-us-section { display: flex; justify-content: center; }
.btn_wrap { display: flex; justify-content: center; margin-top: 4px; }
.mail_btn { position: relative; border: none; cursor: pointer; background: #007ED4; border-radius: 50px; padding: 10px 26px; color: #fff; font-weight: 700; font-size: 18px; word-spacing: 2px; user-select: none; text-decoration: none; display: flex; width: auto; justify-content: center; align-items: center; column-gap: 8px; transition: padding 0.3s 0.15s, background 0.45s; font-family: "Poppins", "Noto Sans TC", sans-serif; }
.mail_btn:hover { text-decoration: none; padding: 10px 65px 10px 26px; transition: all 0.3s; }
.mail_btn_icon { position: absolute; top: 50%; right: 8%; transform: translate(-50%, -50%); display: flex; align-items: flex-end; height: 30px; opacity: 0; transition: opacity 0.3s, right 0.2s; }
.mail_btn:hover .mail_btn_icon { right: 2%; opacity: 1; transition: opacity 0.3s 0.15s, right 0.2s 0.15s; }
.mail_btn_img { width: 32px; }
.mail_btn_img.bg { height: 20px; background-color: #007ED4; box-shadow: 0 2px 10px rgba(0,70,120,0.2); transition: all 0.3s; }
.mail_btn_img.front { width: 32px; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); }
.mail_btn_icon > img:nth-child(2) { transform: translate(-50%, -40%); opacity: 0.9; transition: all 0.35s linear 0.4s; }
.mail_btn:hover .mail_btn_icon > img:nth-child(2) { transform: translate(-50%, -52%); opacity: 1; }

/* 「最多選 3 個」提示 popup 重新設計 */
.cmp-warn .cmp-warn-box { background: #fff; border-radius: 16px; max-width: 360px; width: 88%; margin: 14vh auto 0; padding: 34px 30px 28px; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,0.28); }
.cmp-warn .cmp-warn-icon { width: 54px; height: 54px; line-height: 54px; margin: 0 auto 18px; border-radius: 50%; background: #fff4e5; color: #f5a623; font-size: 26px; }
.cmp-warn .cmp-warn-text { font-size: 16px; line-height: 1.55; color: #333; margin: 0 0 24px; font-family: "Poppins", "Noto Sans TC", sans-serif; }
.cmp-warn .cmp-warn-ok { background: #007ED4; color: #fff; border: 0; border-radius: 50px; padding: 10px 44px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.cmp-warn .cmp-warn-ok:hover { background: #0069b0; }

/* 頁面標題與區塊標題字重同 web-technologies（300），compare-smp / compare-cms 共用（Meg 2026-09-30） */
#MainWrap .w3-center h1.f35,
#MainWrap .cmp-section h2.f35 { font-weight: 300; color: #595959; }

/* compare-smp：6 台機種分兩排、一排三個並置中（Meg 2026-10-07）；compare-cms 不加這個 class */
.container .w3-row-padding.cmp-grid-3 { max-width: 900px; margin-left: auto; margin-right: auto; }
.container .w3-row-padding.cmp-grid-3 .SMPcompareBox { width: 33.333%; }
@media only screen and (max-width: 768px) {
    .container .w3-row-padding.cmp-grid-3 .SMPcompareBox { width: 50%; }
}

/* compare-cms hero banner（Meg 2026-10-07）：smpBanner 斜切版型（smp-hero-banner.css 的 .device-seeker-sol）
   + Server 金色，主色 #b19a6a（Meg 2026-10-07 指定；Server Comparison Guide 是 #a08959）。圖：productoverview/compare-cms_banner */
.cmp-menubg { margin: 60px 0 0; width: 100%; height: 51px; }
.cmp-menubg--server { background: linear-gradient(225deg, #cdb98f 0%, #b19a6a 100%); }
.smpBanner-section.smpBanner-section--slant.device-seeker-sol.cmp-hero {
	--smp-image-position-x: 55%;
	--smp-image-position-y: 50%;
}
.smpBanner-section.smpBanner-section--slant.device-seeker-sol.cmp-hero--server {
	--smp-right-bg: linear-gradient(225deg, #cdb98f 0%, #b19a6a 100%);
	--smp-purple: linear-gradient(225deg, #cdb98f 0%, #b19a6a 100%);
	--smp-stripe: rgba(177, 154, 106, 0.7);
	background: linear-gradient(225deg, #cdb98f 0%, #b19a6a 100%);
}
.smpBanner-section--slant.device-seeker-sol.cmp-hero--server .smpBanner-stripe--primary {
	background: linear-gradient(180deg, rgba(205, 185, 143, 0.7) 0%, rgba(177, 154, 106, 0.7) 100%);
}
.smpBanner-section--slant.cmp-hero + .w3-center { padding-top: 40px; }
@media screen and (max-width: 600px) {
	.smpBanner-section--slant.device-seeker-sol.cmp-hero--server { background: linear-gradient(135deg, #cdb98f 0%, #b19a6a 100%); }
}
/* 有 hero 的比較頁（body.cmp-server）：黏頂子選單列改 Server 金色 */
.cmp-server .whiteSelector { background-color: #b19a6a; }
/* 頁面上原本的鎧應藍裝飾改用主色：Quick answer、每台伺服器可管理台數圖（inline SVG 的 fill/stroke）、FAQ 的 +/-、產品卡勾選框 */
.cmp-server .cmp-quick { background: #f7f2e8; border-left-color: #b19a6a; }
.cmp-server .cmp-quick strong { color: #b19a6a; }
.cmp-server .cmp-screens-svg [fill="#007ED4" i] { fill: #b19a6a; }
.cmp-server .cmp-screens-svg [stroke="#007ED4" i] { stroke: #b19a6a; }
.cmp-server .cmp-screens-svg [fill="#e9f3fc" i] { fill: #f7f2e8; }
.cmp-server .wt-faq summary::after { color: #b19a6a; }
/* COMPARE 按鈕與 hover 光暈 */
.cmp-server .cmprBtn.btn--link { background: #b19a6a; }
.cmp-server .cmprBtn.btn--link.active:hover,
.cmp-server .cmprBtn.btn--link.active:focus-visible { box-shadow: 0 0 0 3px rgba(177, 154, 106, 0.25), 0 6px 16px rgba(177, 154, 106, 0.45); }
/* Contact us 按鈕 */
.cmp-server .mail_btn { background: #b19a6a; }
.cmp-server .mail_btn_img.bg { background-color: #b19a6a; box-shadow: 0 2px 10px rgba(120, 100, 60, 0.2); }
/* 文字連結、選取中的產品卡、比較表 hover、比較結果彈窗與提示視窗（架構圖 cmp-arch 不動） */
.cmp-server .selected { background: #f7f2e8; }
.cmp-server .addcoloryellow { color: #b19a6a !important; }
.cmp-server a.inquiry_link,
.cmp-server li.Inquiry a,
.cmp-server li.Inquiry a:hover,
.cmp-server .back_to_compare_btn,
.cmp-server .cmp-pop-x,
.cmp-server .cmp-intro a,
.cmp-server .cmp-section a:not(.mail_btn),
.cmp-server .finalButton2 .contents .box .mylinks,
.cmp-server .finalButton .contents .box .mylinks a,
.cmp-server .finalButton .contents .box > a { color: #b19a6a; }
.cmp-server .comparewbtn { background-color: #b19a6a; }
.cmp-server .btn--link { background: #b19a6a; }
.cmp-server .cmp-warn .cmp-warn-ok { background: #b19a6a; }
.cmp-server .cmp-table tbody tr:hover td,
.cmp-server .cmp-table tbody tr:hover th { background: #f7f2e8; }
.cmp-server .selectProduct.box .addToCompare.addButtonCircular.addcoloryellow { background: #b19a6a !important; background-color: #b19a6a !important; border-color: #b19a6a !important; }
@media only screen and (max-width: 600px) {
	.cmp-server .subButtonAll { background-color: #b19a6a; }
}

/* compare-smp hero banner（Meg 2026-10-07）：同上版型；主色 SMP 紫 #70326e（Meg 2026-10-08 指定，同 SMP 產品頁 hero）。
   圖：productoverview/compare-smp_banner（Meg 2026-10-08 提供，主體約在 30%–75%） */
.cmp-menubg--player { background: #70326e; }
.smpBanner-section.smpBanner-section--slant.device-seeker-sol.cmp-hero--player {
	--smp-right-bg: #70326e;
	--smp-purple: #70326e;
	--smp-stripe: rgba(112, 50, 110, 0.7);
	--smp-image-position-x: 55%;
	background: #70326e;
}
.smpBanner-section--slant.device-seeker-sol.cmp-hero--player .smpBanner-stripe--primary {
	background: rgba(112, 50, 110, 0.7);
}
.cmp-player .whiteSelector { background-color: #70326e; }
@media only screen and (max-width: 600px) {
	.smpBanner-section--slant.cmp-hero--player .smpBanner-media img { object-position: 55% center; }
	.cmp-player .subButtonAll { background-color: #70326e; }
}
/* 頁面上原本的鎧應藍改用主色（架構圖 cmp-arch 不動，同 compare-cms 的做法） */
.cmp-player .cmp-quick { background: #f5edf4; border-left-color: #70326e; }
.cmp-player .cmp-quick strong { color: #70326e; }
.cmp-player .cmp-screens-svg [fill="#007ED4" i] { fill: #70326e; }
.cmp-player .cmp-screens-svg [stroke="#007ED4" i] { stroke: #70326e; }
.cmp-player .cmp-screens-svg [fill="#e9f3fc" i] { fill: #f5edf4; }
.cmp-player .wt-faq summary::after { color: #70326e; }
.cmp-player .selectProduct.box .addToCompare.addButtonCircular.addcoloryellow { background: #70326e !important; background-color: #70326e !important; border-color: #70326e !important; }
.cmp-player .cmprBtn.btn--link.active:hover,
.cmp-player .cmprBtn.btn--link.active:focus-visible { box-shadow: 0 0 0 3px rgba(112, 50, 110, 0.25), 0 6px 16px rgba(112, 50, 110, 0.45); }
.cmp-player .mail_btn { background: #70326e; }
.cmp-player .mail_btn_img.bg { background-color: #70326e; box-shadow: 0 2px 10px rgba(70, 30, 70, 0.2); }
.cmp-player .selected { background: #f5edf4; }
.cmp-player .addcoloryellow { color: #70326e !important; }
.cmp-player a.inquiry_link,
.cmp-player li.Inquiry a,
.cmp-player li.Inquiry a:hover,
.cmp-player .back_to_compare_btn,
.cmp-player .cmp-pop-x,
.cmp-player .cmp-intro a,
.cmp-player .cmp-section a:not(.mail_btn),
.cmp-player .finalButton2 .contents .box .mylinks,
.cmp-player .finalButton .contents .box .mylinks a,
.cmp-player .finalButton .contents .box > a { color: #70326e; }
.cmp-player .comparewbtn { background-color: #70326e; }
.cmp-player .btn--link { background: #70326e; }
.cmp-player .cmp-warn .cmp-warn-ok { background: #70326e; }
.cmp-player .cmp-table tbody tr:hover td,
.cmp-player .cmp-table tbody tr:hover th { background: #f5edf4; }

/* 手機版 hero 是整片主色底，主標原本的灰字 #595959 在紫底上幾乎看不到：compare 頁的 hero 主標改白字（2026-10-08） */
@media screen and (max-width: 600px) {
	.smpBanner-section--slant.device-seeker-sol.cmp-hero .smpBanner-copy__inner h1.smpBanner-title .smpBanner-title__line:first-child { color: #fff; }
}

/* compare-smp 與 compare-cms 的架構圖在手機直接等比縮小，不用左右滑動（Meg 2026-10-08） */
.cmp-player .cmp-arch,
.cmp-server .cmp-arch { overflow: visible; }
.cmp-player .cmp-arch-svg,
.cmp-server .cmp-arch-svg { min-width: 0; }