:root {
    --vs-blue: #94c3e7;
    --vs-blue-hover: #b2d7f1;
    --vs-blue-light-hover: #c4e8fd;
    --vs-blue-font-hover: #404041;
    --vs-blue-disabled: #dce5ed;
    --vs-blue-bg: #f0f4f7;
    --vs-blue-bar:#B2D7F1;
     --vs-blue-bar-hover:#ddeaf6;
     --vs-grey-bg:#f9f9f9;
     --vs-Saving:#3C5AAA;
}
.rc p, .container p, #product-filter p{font-size: 17px;}
.btn-blue, .btn-blue-light {
    background: var(--vs-blue-hover);
    font-weight: 700;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: .5px;
    margin-top: 0;
    color: var(--vs-blue-font-hover);
    padding: 0.5em 2em;
    text-transform: uppercase;
    transition: border .5s, color .5s, background .5s;
    -webkit-transition: border .5s, color .5s, background .5s;
    min-width: 180px;
}
.btn-blue:hover {
    background: #0000;
    color: var(--vs-blue-font-hover);
    border: 1px solid #777
}
.btn-blue-light:hover {
    background: var(--vs-blue-light-hover);
    color: var(--vs-blue-font-hover);
    border: 1px solid var(--vs-blue-hover);
}
.btn-blue:disabled {
    opacity: 1;
    color: rgba(127, 127, 127, .65);
    background-color: var(--vs-blue-disabled);
}
.btn-md {
    padding: 0.7em 3em;
}
.btn-white-dark {
    border-radius: 50px;
    font-weight: 700;
    border: 1px solid #00000080;
}
.btn-white-dark:hover{
    background: var(--vs-blue-hover);
    color: var(--vs-blue-font-hover);
    border-color: var(--vs-blue-hover);
}

.btn-blue-primary,.btn-blue-secondary,.btn-blue-ghost {  
    font-weight: 700;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: .5px;
    margin-top: 0;
    padding: 0.9em 3em;
    text-transform: uppercase;
    transition: border .5s, color .5s, background .5s;
    -webkit-transition: border .5s, color .5s, background .5s;
    min-width: 200px;
}

.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,.btn-blue-secondary:hover,
.btn-blue-secondary:active{background: var(--vs-blue-hover);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue);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);}
.btn-saving{ background: var(--vs-Saving); border: 1px solid var(--vs-Saving);
color: #fff; min-width: 280px}
.dropdown-menu.dropdown-menu-wide {
    min-width: 100%;
    text-align: center;
    margin: 0;
}

.btn-group.dropup>.btn[aria-expanded=true] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.btn-group.dropup>.btn:focus {
    box-shadow: none;
}

.btn-group.dropup>.dropdown-menu.dropdown-menu-wide {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group.dropup .dropdown-item:hover {
    background: var(--vs-blue-hover);
}



.bg-blue-bottom {
    background: -webkit-gradient(linear, left bottom, left top, from(var(--vs-blue-bg)), color-stop(40%, var(--vs-blue-bg)), color-stop(40%, #ffffff00));
    background: linear-gradient(to top, var(--vs-blue-bg) 0%, var(--vs-blue-bg) 40%, #ffffff00 40%);
}
.bg-blue{background: var(--vs-blue-bg)}

.bg-blue-top {
    background: -webkit-gradient(linear, left top, left bottom, from(var(--vs-blue-bg)), color-stop(65%, var(--vs-blue-bg)), color-stop(65%, #ffffff00));
    background: linear-gradient(to bottom, var(--vs-blue-bg) 0%, var(--vs-blue-bg) 65%, #ffffff00 65%);
}
:focus-visible{outline-color: #333 !important;}
.btn:focus-visible{outline:2px dotted #333 !important;}
.bg-grey{background-color: var(--vs-grey-bg);}
.btn:focus{-webkit-box-shadow: none;box-shadow: none;}
.footer {
    background-color: var(--vs-blue-bg);
}
h2 {font-size: 2.5rem; font-weight: 700;}
h1{font-size:3.5em}
.kv h1{font-size: 5.5vh;}
.kv{background-size: cover;background-position: 50% 50%; position: relative;height:calc(100vh + 60px)}
.kv h2, .kv h1{font-size: 28px;}
.kv .uk-overlay { top: 0 ; right:0; left:auto;position: absolute;}
.key3 .col-md-4{display: flex;}
.key3 .col-md-4 div{
    background-color: var(--vs-blue-bg);
    border-radius: 10px;
    flex: 1;
    transition: 0.5s;  
}
  .icon{display: flex;container-type: inline-size; width: 100%;}
   .icon h4 {
       text-align: center;
       font-weight: 700 !important;
       margin: 15px auto;
       color: var(--vs-blue-font-hover);
       font-size: 1.3em;
       padding-left: 0.5em;
       padding-right: 0.5em;
        overflow-wrap: break-word;
   }
  #scenarios .uk-subnav .hover-effect {
       position: absolute;
       -webkit-transition: 0.5s;
       transition: 0.5s;
       height: 5px;
       bottom: 0;
       left: 0px;
       background: var(--vs-blue-bar);
       width: calc( 100% / 4);
       border-radius: 5px;
       z-index: 1;
   }
   #scenarios .uk-subnav{align-items: inherit;}
   
   #scenarios .uk-subnav a{width: 100%; z-index: 2;}
#scenarios .uk-subnav .tabbar::before{
    content: "";
    position: absolute;
    height: 5px;
    bottom: 0;
    left: 0px;
    background: #ffffff;
    width: 100%;
   }
#scenarios .uk-subnav .tabbar:first-child::before{
    border-radius: 5px 0 0 5px;
}
#scenarios .uk-subnav .tabbar:nth-child(4):before{
    border-radius: 0 5px 5px 0;
}
#scenarios .uk-subnav .tabbar {
    padding-left: 0;
    /* width:  calc(100% / 4); */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 0;
    -webkit-filter: drop-shadow(1px 1px 10px #00000010);
    filter: drop-shadow(1px 1px 10px #00000010);
}
#scenarios .uk-subnav .tabbar::before{-webkit-transition: all 0.3s;transition: all 0.3s;}
#scenarios .uk-subnav .tabbar:hover .icon h4{color:#41538A;}
#scenarios .uk-subnav .tabbar:hover::before  {background: #B2D7F150;}
#scenarios .uk-subnav .tabbar.uk-active .icon h4{color:var(--vs-blue-font-hover)}
#scenarios a svg{-webkit-filter: drop-shadow(1px 1px 5px #000);filter: drop-shadow(1px 1px 5px #000);}
.desktop-nav{-webkit-transform: translate(-50%);transform: translate(-50%);
    top: 50%;
    position: absolute;
    left: 50%;}

.uk-dotnav > .uk-active > * {background-color: var(--vs-blue-hover);}
.uk-dotnav > * > *{border:0; background:#cccccc75}
#scenarios .uk-dotnav > * > *{border:1px #cccccc75; background:#cccccc75}
.snbar::-webkit-scrollbar{ background: transparent; display: none;}
.snbar{ overflow: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */}
.snbar::-webkit-scrollbar {
    width: 8px; /* 設定 scrollbar 寬度 */
}

.snbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0); /* 讓滑塊透明 */
}

.snbar::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0); /* 讓軌道透明 */
}
    
#mtrproducts h3,#productset h3{font-size: 1.5em; font-weight: 700;}
#mtrproducts h4, #productset h4{font-size: 1rem; font-weight: normal; color:#000}
#mtrproducts a, #productset{text-decoration: none;}
.mtr-list a:hover { text-decoration: none; color: initial; }

.mdc-tab-indicator .mdc-tab-indicator__content--underline{
  border-color:var(--vs-blue-hover);
  border-top-width:6px;
  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:hover::before {
   content: "";
    position: absolute;
    height: 6px;
    bottom: 0;
    left: 0px;
    background: var(--vs-blue-bar-hover);
    width: 100%;
    border-radius: 5px;
}
.mdc-tab .mdc-tab__text-label {
    text-align: center;
    font-weight: 700 !important;
    margin: 15px auto;
    color: var(--vs-blue-font-hover);
    font-size: 16px;
    line-height: 1.2;
}
.mdc-tab-scroller{min-height: 56px;}
.mdc-tab-scroller__scroll-content::after{content:""; position: absolute; bottom: 0; width:100%; border-radius: 5px; height: 6px;background: #fff;}
.mdc-tab-scroller__scroll-area--scroll {scrollbar-width: initial}
.mdc-tab:hover .mdc-tab__text-label{color:var(--vs-blue-font) ;}
.mdc-tab-indicator .mdc-tab-indicator__content{
    transition-duration: 0.5s;

}
button:focus{outline:0}
.mdc-tab-bar button:focus{outline:0}
.mdc-tab-bar button:focus-visible {
  outline: 2px dotted #333;outline-offset: -2px;
}
.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, #touch-tech .uk-card{display: flex; flex-direction: column; padding-top: 0.8em; width: 100%;}
#product-filter .uk-card-default, .uk-card-default{ border-radius: 10px;}
#product-filter .uk-card-hover:hover, #video-list .uk-card-hover:hover, #touch-tech .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, #video-list .uk-card-hover:hover, #touch-tech .uk-card-hover:hover {margin-top: -5px;margin-bottom: 5px;}
#product-filter .uk-card-hover, #video-list .uk-card-hover, #touch-tech .uk-card-hover{
    transition: all .3s ease;
}
#product-filter h4.uk-card-title, #video-list h4.uk-card-title{font-weight: 700;}
#product-filter .uk-card-body, #video-list .uk-card-body, #touch-tech .uk-card-body {padding-bottom: 0;}
#product-filter .uk-card-body a:hover, #video-list .uk-card-body a:hover, #touch-tech .uk-card-body a:hover{ text-decoration: none; color: initial;}
#product-filter .uk-card-default .uk-card-footer, #video-list .uk-card-default .uk-card-footer, #touch-tech .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, #video-list .uk-card-footer a, #touch-tech .uk-card-footer a{display: block;}
#product-filter h6, #video-list h6 {color:#222; font-weight: 700; text-align: center; text-transform: uppercase;}
#product-filter a:hover, #video-list a:hover, #touch-tech a:hover{text-decoration: none;}
.tab-card{background: white; border-radius:0 0 10px 10px; margin-bottom: 1em;}
.video-tb {
    background-size: cover;
}

#video-list .radius-card {
    position: relative;
    margin: 20px 10px;
    padding: 0 0 .5em;
    background: #fff;
    border-radius: 1em;
    overflow: hidden;
    height: 92%; 
}

#video-list .radius-card .video-text {
    position: relative;
    height: 100%;
    padding-bottom: 3em;
}

#video-list .radius-card .video-text .arraw-r {
    position: absolute;
    bottom: 0;
    font-weight: 700;
    color: var(--vs-blue-font-hover);
}

#video-list .uk-card-small.uk-card-body p, #video-list .uk-card-small.uk-card-body a {
    max-height: initial;
    min-height: initial;
    padding: 1em 1.5em 0;
}
#video-list .uk-position-center-right-out{margin-left: 0px}
#video-list .uk-position-center-left-out{margin-right: 0px}
.arraw-r::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f105";
    font-weight: 900;
    padding-left: 5px;
}

.footer-height{flex-basis: 133px;}
#calculator {background-position: 50% 50%; background-size: 92%; background-image:url("/vsAssetFile/global/img/commercial-display/mtr/TeamJoin-Calculator.svg")}
a.wp-feature-tile:hover h4, a.wp-feature-tile:hover .vs-read-more{color:#005a9e}

@media(max-width:768px) {
      #calculator {background-image: none;}
    .kv h1{margin-top: 0;font-size: 32px;}
    h2{font-size:2rem}
    .kv h2,.kv h1{font-size: 18px;}
    .kv{height: 80vh; background-image:url("/vsAssetFile/global/img/commercial-display/mtr/kv-m.jpg") !important ;}
    .bg-blue-top {
    background: -webkit-gradient(linear, left top, left bottom, from(var(--vs-blue-bg)), color-stop(80%, var(--vs-blue-bg)), color-stop(80%, #ffffff00));
    background: linear-gradient(to bottom, var(--vs-blue-bg) 0%, var(--vs-blue-bg) 80%, #ffffff00 80%);
}

}
@media(max-width:992px) {
  
     #scenarios .uk-subnav .tabbar a{border: 1px solid #000;
    border-radius: 30px;
    margin: 0.2em;}
  #scenarios .uk-subnav .tabbar:hover::before  {background: none;}
  #scenarios .uk-subnav .tabbar a:active{ background: var(--vs-blue-hover);
    color: var(--vs-blue-font-hover);
    border-color: var(--vs-blue-hover);
}
  .icon h4{font-size:1em; margin: 8px auto;}
  #scenarios .uk-subnav{flex-wrap: nowrap}
  #scenarios .uk-subnav a{height: 100%;}
  #scenarios .uk-subnav .tabbar::before{background:none}
  #scenarios a[aria-selected='true'] { border-radius: 30px; background: var(--vs-blue-hover);
    color: var(--vs-blue-font-hover);
    border: 1px solid var(--vs-blue-hover) !important}

   #product-filter .uk-card-hover:hover, #touch-tech .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-font-hover);border: 1px solid var(--vs-blue-font-hover);
    font-weight: 700;
    border-radius: 50px;
    margin-top: 0;
    margin: 0.2em;
    min-height: 44px;
    transition: border .5s, color .5s, background .5s;
    -webkit-transition: border .5s, color .5s, background .5s;
    }
   
    .mdc-tab:hover .mdc-tab__text-label{color: var(--vs-blue-font-hover);} 
    .mdc-tab__content{margin: auto; }
    .mdc-tab .mdc-tab__text-label{font-size: 12px; margin:2px 5px; line-height:1}
    .mdc-tab:active, .mdc-tab--active{background: var(--vs-blue-hover);
        color: var(--vs-blue-font-hover);
        border: 1px solid var(--vs-blue-hover);
    }
    .mdc-tab-scroller__scroll-content::after{height: 0;}
    .content{padding-top: 1em;}
    .tab-card{background:transparent; margin-bottom: 0;}
    .embed-responsive-16by9 .fa-5x{font-size: 3em;}
    #video-list .uk-position-center-right-out{margin-left: -10px}
    #video-list .uk-position-center-left-out{margin-right: -10px}
    
}
@media (min-aspect-ratio: 16/7)  {
 .kv{background-position: 50% 0%; height: 180vh;background-image:url("/vsAssetFile/global/img/commercial-display/mtr/kv.jpg") !important ;}
 .kv h1{ padding-bottom: 0 !important;}
 .kv img{max-height: 4vh; width: auto;}
 

}