:root {
    --vs-blue: #94c3e7;
    --vs-blue-hover: #004DA5;
    --vs-blue-light-hover: #c4e8fd;
    --vs-blue-font-hover: #404041;
    --vs-blue-font: #41538A;
    --vs-blue-bar-font:#757575;
    --vs-blue-bar-font-hover: #222;
    --vs-blue-disabled: #dce5ed;
    --vs-blue-bg: #f0f4f7;
    --vs-blue-bar-hover:#CFE9F7;
    --vs-blue-bg-hover:#d6edff;
    --vs-brand:#DB0025;
    --vs-brand-hover:#EF1A3E;
    --vs-brand-press:#A6011D;
    --vs-white-bg-hover:#F7F7F7;
    --vs-white-bg-press:#F2f2f2;
    --vs-body-font: #404041;
    --vs-body-font-hover:#005a9e;
    --vs-sky-400:#5EA4DA;
    --vs-sky-100:#D6EDff;
    --vs-red-300:#FFBDC8;
    --vs-lighter-blue:#E8F2F9;
    --vs-subtle-blue:#F2F7FC;

    
}
/* *{color: var(--vs-body-font);} */
.btn-blue-primary,.btn-blue-secondary,.btn-blue-ghost ,.btn-red, .btn-white{  
    font-weight: 700;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: .5px;
    margin-top: 0;
    padding: 0.65em 24px;
    text-transform: capitalize;
    transition: border .5s, color .5s, background .5s;
    -webkit-transition: border .5s, color .5s, background .5s;
    min-width: 180px;
}
.btn-red{background: var(--vs-brand);color: #fff;border: 1px solid var(--vs-brand);}
.btn-red:hover{background: var(--vs-brand-hover);color: #fff;border: 1px solid var(--vs-brand-hover);}
.btn-red:active{background: var(--vs-brand-press);color: #fff;border: 1px solid var(--vs-brand-press); box-shadow:none}
.btn-white{color:var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover); background: #fff;}
.btn-white:hover{background: var(--vs-brand-hover);color:#fff;border: 1px solid var(--vs-brand-hover);}
.btn-white:active{background: var(--vs-white-bg-press);color:var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover); box-shadow:none}
.btn-blue-primary{background: var(--vs-blue);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue);}
.btn-blue-secondary{background: #fff;color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);}
.btn-blue-ghost{color:var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);}
.btn-blue-primary:hover,.btn-blue-primary:active{background: var(--vs-blue-bg-hover);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-bg-hover);}
.btn-blue-secondary:hover,.btn-blue-secondary:active{background: var(--vs-blue-bg-hover);color: var(--vs-blue-font-hover);border:1px solid transparent;box-shadow:0 0 0 1px var(--vs-blue)}
.btn-blue-ghost:hover{background: #fff;color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);}
.btn-blue-ghost:active{background: var(--vs-blue-hover);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue);}
.bg-blue{background:var(--vs-blue-bg)}
.bg-blue-bottom{background: linear-gradient(to top,#f0f4f7 0%,#f0f4f7 40%, #fff 40%);}
.bg-blue-top {background: linear-gradient(to bottom, #f0f4f7 0%, #f0f4f7 60%, #fff 60%);}
.bg-white-blue {background: linear-gradient(to top, #f0f4f7 70%, #fff 100%);}
.bg-gray{background: linear-gradient(to top, var(--vs-white-bg-hover) 25%, #fff 100%);}
.bg-dark-gray{background: linear-gradient(to bottom, #00000000 0%, #000 100%); opacity: 0.6;}
h1{font-size: 48px;}
h2{font-size: 32px; line-height: 36px; font-weight: 700;}
h3{font-size: 24px; line-height: 30px; font-weight: 700;}
/* h5{font-size: 15px; color:#222; line-height: 24px;} */
.h5{font-size: 14px; font-weight: 700; line-height: 22px;}
.p-lg{font-size:18px; font-weight: 400; line-height: 28px;}
p,.p-md{font-size: 16px;font-weight: 400; line-height: 22px;}
.round-img{border-radius: 16px;}

.key3 .col-md-4{display: flex;}
.key3 .col-md-4 div{
    background-color: #fff;
    box-shadow: 0 4px 24px rgb(0 0 0 / 10%);
    border-radius: 16px;
    flex: 1;
    transition: 0.5s;  
}

.mdc-tab--active.mdc-tab .mdc-tab__text-label{
    color: #000;
}

.equal-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.equal-card .p-4,
.equal-card .pb-3 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.equal-card-wrapper {
    display: flex;
    flex-direction: column;
}

.uk-card-default {
    color: #000;
}
.card-border-y {
    border: 1.5px solid #FFCC00;
}
.card-border-g {
    border: 1.5px solid #3AC9CC;
}
.card-border-r {
    border: 1.5px solid #DB0025;
}
.card-border-b {
    border: 1.5px solid #003399;
}

.btn-arrow:after {
    font-family: var(--fa-style-family, "Font Awesome 6 Pro");
    content: "\f105";
    margin-left: 8px;
    -webkit-transition: .2s;
    transition: .2s;
}
.btn-arrow:hover:after {
    content: "\f105";
    font-family: var(--fa-style-family, "Font Awesome 6 Pro");
    margin-left: 12px;
    -webkit-transition: .2s;
    transition: .2s;
}

.mdc-tab--active.mdc-tab:before {
    border: solid #EF1A3E 3px;
    border-radius: 5px;
}

.mdc-tab-indicator .mdc-tab-indicator__content--underline{
  border-color:var(--vs-brand-hover);
  border-top-width:8px;
  border-radius:5px;
  
}
.mdc-tab{position:relative; height:auto; white-space:normal; padding:5px 12px;min-width: 50px; text-transform: none;
    text-transform: var(--mdc-typography-button-text-transform, none);
letter-spacing: 0;letter-spacing: var(--mdc-typography-button-letter-spacing, 0);}
.mdc-tab::before {
    transition: all ease 0.3s;
}
.mdc-tab:first-child::before{border-radius: 5px 0 0 5px;}
.mdc-tab:last-of-type::before{border-radius: 0 5px 5px 0;}
.mdc-tab::before {
   content: "";
    position: absolute;
    height: 6px;
    bottom: 0;
    left: 0px;
    background-color: #CDDAE3;
    width: 100%;
    border-radius: 5px;
}
.mdc-tab:hover::before{background: var(--vs-red-300);}
.mdc-tab .mdc-tab__text-label {
    text-align: center;    
    margin: 15px auto;
   /* color: var(--vs-blue-bar-font); */
    font-size: 18px;
    line-height: 1.2;
}
.mdc-tab[aria-selected='true']  .mdc-tab__text-label { color: #222; font-weight: 700 !important;}
.mdc-tab[aria-selected='false']  .mdc-tab__text-label { color: var(--vs-blue-bar-font);}
.mdc-tab-scroller{min-height: 56px;}
.mdc-tab-scroller__scroll-content::after{content:""; position: absolute; bottom: 0; width:100%; border-radius: 5px; height: 8px;background: #fff;}
.mdc-tab-scroller__scroll-area--scroll {scrollbar-width: initial}
.mdc-tab:hover .mdc-tab__text-label{color:var(--vs-body-font) }
.mdc-tab-indicator .mdc-tab-indicator__content{
    transition-duration: 0.5s;

}
.mdc-tab-bar button:focus{outline:0}
.mdc-tab-bar button:focus-visible {
  outline: 2px dotted #333;
  outline-offset: -2px;
}
.mdc-tab-scroller.uk-sticky-fixed{background-color: #fff;}
.content{
  display: none;
  padding-top:1em;

}

.contentTouch {
    display: none;
    padding-top: 0;

}
.content--active {
  display: block;
  animation-name: uk-fade;
  animation-duration: 0.5s;
  animation-delay: 0.1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.mdc-tab-scroller__scroll-area--scroll{scrollbar-color: transparent;overflow: -moz-scrollbars-none;}
#product-filter .uk-card{display: flex; flex-direction: column; padding-top: 0.8em; width: 100%;}
#product-filter .uk-card-default, .uk-card-default{ border-radius: 16px;}
#product-filter .uk-card-hover:hover, #subscribe .uk-card-hover:hover {
    background-color: #fff;
    box-shadow: 0 8px 20px rgb(0 0 0 / 16%);
}
#product-filter .uk-card-hover:hover{margin-top: -5px;margin-bottom: 5px;}
#product-filter .uk-card-hover{
    transition: all .3s ease;
}
#product-filter .uk-card-body{padding-bottom: 0;}
#product-filter .uk-card-body a:hover{ text-decoration: none; color: initial;}
#product-filter .uk-card-default .uk-card-footer{border-top: 0;margin-top: auto; margin-right: auto;margin-left: auto;padding-top: 0; padding-bottom: 30px;padding-right: 15px;padding-left: 15px;}
#product-filter .uk-card-footer a{display: block;}
#product-filter h6{color:#222; font-weight: 700; text-align: center; text-transform: uppercase;}
#product-filter a:hover{text-decoration: none;}
.tab-card{background: white; border-radius:0 0 10px 10px; margin-bottom: 1em;}
.footer-height{flex-basis: 133px;}
#product-cat .uk-inline{overflow: hidden;}
#product-cat .uk-grid-column-small>*, .uk-grid-small>* {
    padding-left: 24px;}
#product-cat .uk-grid-column-small, .uk-grid-small {
    margin-left: -24px;
}
.uk-transition-toggle:hover .uk-transition-scale-up{--uk-scale-x: 1.2;--uk-scale-y: 1.2;}
.rc-container{max-width: 1500px}
.feature-icon img{width: auto; height: 60px;}
.feature-icon img:nth-of-type(2){margin-left: 20px;margin-right: 20px;;}
a.wp-feature-tile:focus-visible{outline: 2px dotted #333  }
a.wp-feature-tile:hover p,a.wp-feature-tile:hover .vs-read-more *{color:var(--vs-brand-hover)}
a.wp-feature-tile:hover .vs-read-more *{text-decoration: underline;}
.wp-feature-tile *{transition: all 0.3s ease; color: var(--vs-body-font);}
.vs-read-more span{font-weight: 400;}

.bg-fixed-desktop {background-attachment: fixed;}

.uk-dotnav > * > *{width: 16px; height: 16px;}
.uk-dotnav > .uk-active > *,.uk-dotnav > * > :hover
{background-color: var(--vs-brand);}
.uk-slidenav{
        color: #000 !important;
    background-color: rgba(255,255,255,.35);
    border-radius: 50%;
    padding: 10px 15px;
    -webkit-box-shadow: 0 0px 8px rgba(0, 0, 0, .1);
    box-shadow: 0 0px 8px rgba(0, 0, 0, .1);
}
.uk-slidenav:hover{ -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .1);}
.uk-slidenav svg {padding: 2px;}
/* #faq h3 a{display: block;}
#faq h3 a:hover {
    text-decoration: none;
    color: initial;
} */
#faq p a{color:var(--vs-brand);}
#fag .uk-card-default{box-shadow: 0 0px 8px rgba(0, 0, 0, .1);}
#fag .uk-card-default:hover{box-shadow: 0 2px 16px rgba(0, 0, 0, .1);}
#faq .accordion-faq .uk-open {
    /* border: 5px solid var(--vs-sky-400); */
    background: #fff;
}
#faq ul.uk-accordion li {
    background: var(--vs-white-bg-hover)

}
#faq li:not(.uk-open) .uk-accordion-title:hover {
    background: var(--vs-white-bg-press);
    color: #222;
    border-radius: 16px;
}
#faq .uk-accordion-title {
    cursor: pointer;
    color:#222;
    font-weight: 700;
}
#faq .uk-accordion-title:hover{color:#222}
#faq .uk-accordion-content{padding: ; color:var(--vs-body-font)}
.uk-open>.uk-accordion-title:before {
    background-image: url(/vsAssetFile/global/img/education/software/Minus.svg);
}
.uk-accordion-title:before {
    background-image: url(/vsAssetFile/global/img/education/software/Plus.svg);
    background-size: 50%;
}
#faq .uk-border-rounded{border-radius: 16px;}
#contact{background-image: url(/vsAssetFile/global/img/about/eaa/b_bg.jpg);
background-size: cover;
background-position: center;
}


/* @media(min-width: 1200px){#product-filter .uk-grid{margin-left: -30px;}} */
@media(max-width: 1600px){
    .vs-container{max-width: 1400px;}
    .rc-container{max-width: 1300px;}
}
@media(max-width: 1366px){.rc-container{max-width: 1200px;}}
@media(max-width: 992px){
    h1{font-size: 32px;line-height: 36px;}
    .h5{font-size: 14px;line-height: 18px;}
    h2{font-size: 24px; line-height: 26px; font-weight: 700;}
   
    #product-filter .uk-card-hover:hover{margin-top: 0;margin-bottom: 0;}
    .mdc-tab-scroller__scroll-area--scroll {scrollbar-width: none}
    .mdc-tab::before{display: none;}

    .mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:0px;}
    .mdc-tab{color:var(--vs-blue-bar-font);border: 1px solid #d5d5d5;
    border-radius: 50px;
    margin-top: 0;
    margin: 0.2em 0.3em;
    min-height: 44px;
    transition: border .5s, color .5s, background .5s;
    -webkit-transition: border .5s, color .5s, background .5s;
    }
   
    .mdc-tab:hover{color: var(--vs-blue-font-hover);border:1px solid #d5d5d5; background: var(--vs-subtle-blue); font-weight: 400;} 
    .mdc-tab__content{margin: auto; }
    .mdc-tab .mdc-tab__text-label{font-size: 16px; margin:2px 10px; line-height:1}
    .mdc-tab:active, .mdc-tab--active{background: var(--vs-lighter-blue);
        color: #222;
        border: 1px solid var(--vs-lighter-blue);
    }
    .mdc-tab-scroller__scroll-content::after{height: 0;}
    .content{padding-top: 2em;}
    .tab-card{background:transparent; margin-bottom: 0;}
    .bg-fixed-desktop {background-attachment: initial}
    .feature-icon img{width: auto; height: 50px;}
}

/* 手機、平板、小螢幕：隱藏 */
@media (max-width: 1199px) {
  .mdc-tab-indicator .mdc-tab-indicator__content--underline {
    border: none;
  }
}

/* 桌機：顯示 */
@media (min-width: 1200px) {
  .mdc-tab-indicator .mdc-tab-indicator__content--underline {
    border: none;
}}

@media (max-width:768px) {
  /* #contact{background-size: 100%;} */
  #contact .row{background-position: 15% 100% !important;}
}