﻿.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {line-height:1.4 !important;}
.bt-NVcolor {color: #fff; background-color: #76b701; display: inline-block; padding: 10px 30px; border-radius: 2px; letter-spacing: 1px; margin-top: 1rem;}

.d-none {display: none!important;}
h2 {color:#000;}
section i {margin-right:5px;}

.NVColor {color: #76b900;}
a.NVColor:focus, a.NVColor:active  {color: #76b900;}
a.NVColor:hover {color: #a3ff00;}
.textcomp {font-weight:normal;}
.tabs-wrapper { margin: 0 auto; display: block; width: 100%; overflow: hidden; position: relative;}
.tabs-wrapper ul.tabs {list-style: none; margin: 0; padding: 0; font-size: 0; overflow-x: auto; -ms-overflow-style: none; overflow: -moz-hidden-unscrollable; width: 100%; list-style-position: inside; white-space: nowrap; text-align: center;}
.tabs-wrapper ul.tabs::-webkit-scrollbar { display: none;}
.tabs-wrapper ul.tabs li { width: auto; margin: 0; border-bottom: 1px solid #ccc; padding-bottom: 4px; cursor: pointer; display: inline-block; font-size: 16px; line-height: 24px; list-style: none;}
.tabs-wrapper ul.tabs li.active { border-bottom: 4px solid #337ab7; padding-bottom: 1px;}
.tabs-wrapper ul.tabs li.active a { color: #337ab7; font-weight: 600;}
.tabs-wrapper ul.tabs li a { color: #000; font-size: 16px; padding-top: 10px; padding-bottom: 0; display: block; line-height: 50px;}
.mx-auto {margin-left:auto !important; margin-right:auto !important;}
.margin-b-0 {margin-bottom:0 !important;}
.table thead.thead-dark { border: 1px solid #b1b1b1;}
.table-bordered th, .table-bordered td {border-color:#b1b1b1 !important; vertical-align: middle !important;}
#HtmlTag[lang="en-US"] .table-bordered th, .table-bordered td {line-height:1.3 !important;}
.newtable th {background: #f0f9ff !important; vertical-align: middle !important;}

#robotic {position:absolute; z-index:1000; top:0;}
#s1_svg {width:200px; height: 238px; transform-origin:bottom center !important;}
#apply_txt {fill: #fff; font-family: -apple-system, BlinkMacSystemFont,微軟正黑體, 'Microsoft YaHei', 'Microsoft JhengHei UI', SimSun, 'Segoe UI', Helvetica, Tahoma,'DIN Next', 'メイリオ',Meiryo,Osaka,'小塚ゴシック Pro H',KozGoPr6N-Heavy,KozGoPro-Heavy,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Sans-Serif; font-size: 40px; isolation: isolate;}
#upload_txt {fill: #565656; font-family: -apple-system, BlinkMacSystemFont,微軟正黑體, 'Microsoft YaHei', 'Microsoft JhengHei UI', SimSun, 'Segoe UI', Helvetica, Tahoma,'DIN Next', 'メイリオ',Meiryo,Osaka,'小塚ゴシック Pro H',KozGoPr6N-Heavy,KozGoPro-Heavy,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Sans-Serif; font-size: 14px;}
#g_buttom { cursor:pointer;}
#aidms_top { display: flex; width: 100%; height: 550px;transition: background 0.2s linear; background-repeat: no-repeat;}
#p_banner {width: 100%; height: 510px; display: flex; position:relative; z-index:1; align-content: center; justify-content: center;}
#aidms_logo {max-width: 180px;}
#bt_app {width: 180px; background-color: #2b58eb; margin-bottom:8px;}
#bt_app:active, #bt_app:hover {background-color: #143cbf;}
#banner_subject { display: flex; justify-content: center; flex-direction: column; }
#banner_subject > h2 { color: #fff; font-size:26px; font-weight: 600; letter-spacing: -.01em; margin:0; }
#HtmlTag[lang="en-US"] #banner_subject > h2 { font-size:20px !important;}
#banner_subject > h2:first-of-type {margin-top:15px; line-height:1 !important;}
#banner_subject > p {color:#fff; margin-top:10px;}
#aidms_UI { position: relative; z-index: 2;}
#laptop {width:100%; max-width:706px;}
#AIDMS_UI { position: relative; width: 100%; height: 100%;}

#UI {
    animation-name: move_bg;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes move_bg {
    0% {transform: translate(82px, 21px);}
    3% {transform: translate(-458px, 21px);}
    16.6% {transform: translate(-458px, 21px);}
    19.6% { transform: translate(-998px, 21px);}
    33.3% { transform: translate(-998px, 21px);}
    36.3% { transform: translate(-1538px, 21px);}
    50% { transform: translate(-1538px, 21px);}
    53% { transform: translate(-2078px, 21px);}
    66.4% { transform: translate(-2078px, 21px);}
    69.4% { transform: translate(-2618px, 21px);}
    83.4% { transform: translate(-2618px, 21px);}
    90% { transform: translate(82px, 21px);}
}

#section2 {
    background-image: url(/images/AIDMS/section2_bk.webp), url(/images/AIDMS/section2_1_bk.webp);
    background-repeat: no-repeat, repeat-x;
    background-position: top center, top center;
    background-size: auto 100%, auto 100%;
    height: auto;
    padding-bottom: 30px;
}
#section2 .cardbox { padding: 35px 30px 20px; margin-bottom:0; margin-top: -35px; background-color: #fff; border: 2px solid #2f6081; border-radius:6px;}
#section2 h3 { font-size:16px; font-weight:bold; color: #2f6081; margin-bottom:0;}
#HtmlTag[lang="en-US"] #section3 h3 { line-height: 1.2 !important;}
.photo { width: 80px; height:80px; padding:10px; background-color: #2f6081; z-index: 1; position: relative;}
.card{ background-color: #fff; border: 1px solid transparent; border-radius: 3px; width: 100%;}
.card > .card-link{ color: #333; }
.card > .card-link:hover{  text-decoration: none; }
.card > .card-link .card-img img{ border-radius: 6px 6px 0 0; }
.card .card-img{ position: relative; padding: 0; display: table; }
.card .card-img .card-caption { position: absolute; right: 0; bottom: 16px; left: 0;}
.card .card-body{ display: flex; flex-direction: column; width: 100%; padding: 15px 20px; }
.card .card-header{ border-radius: 6px 6px 0 0; padding: 8px; }
.card .card-footer{ border-radius: 0 0 6px 6px; padding: 8px; }
.card .card-left{ position: relative; float: left; padding: 0 0 8px 0; }
.card .card-right{ position: relative; float: left; padding: 8px 0 0 0; }
.card .card-body h1:first-child,
.card .card-body h2:first-child,
.card .card-body h3:first-child, 
.card .card-body h4:first-child,
.card .card-body .h1,
.card .card-body .h2,
.card .card-body .h3, 
.card .card-body .h4{ margin-top: 0; }
.card .card-body .heading{ display: block;  }
.card .card-body .heading:last-child{ margin-bottom: 0; }

.card-default{ border-color: #ddd; background-color: #fff; margin: 5px;}
.card-default > .card-header, .card-default > .card-footer{ color: #333; background-color: #ddd; }
.card-default > .card-header{ border-bottom: 1px solid #ddd; padding: 8px; }
.card-default > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
.card-default > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
.card-default > .card-left{ padding-right: 4px; }
.card-default > .card-right{ padding-left: 4px; }
.card-default .card-caption { color: #fff; text-align: center; text-transform: uppercase; }

.card .list-icon li {border-color:#d5d5d5;}
.card .card-bottom { position: absolute; bottom: 5px; width: 90%;}
[class*="card-columns-"] .card {border-color:#d7d7d7;}
[class*="card-columns-"] .card-body { padding: 0.3rem 1.5rem 30px;}
[class*="card-columns-"] img {padding:10px 10px 0;}
[class*="card-columns-"] p.card-text {color:#000; padding-bottom:20px; font-size:16px;}
[class*="card-columns-"] h3 {padding-top:15px;}
[class*="card-columns-"] .card-bottom a {float:right;}

.list-icon { display: block; list-style-type: none; margin-bottom: 30px; padding:0;}
.list-icon li a, .list-icon li a:focus, .list-icon li a:active {color:#000;}
.list-icon li a:hover {color:#a3ff00;}
.list-icon li { width: 100%; line-height: 1.4; font-size: 16px; border-top: 1px solid #565656; text-align: left;  padding: 8px 0 8px 30px;}
#HtmlTag[lang="en-US"] .list-icon li {font-size: 13px;}
.list-icon li:not(.arrow) {background: url(/images/blog-icon.png) 3px 10px no-repeat; background-size: auto 18px;}
.list-icon li.arrow:before { content: "\f105"; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; color: #76b900; margin-right: 10px; display: inline-block;}
.list-icon li.arrow { padding-left: 10px; line-height: 1.2;}
.list-icon li:first-child {border: 0;}

#HtmlTag[lang="en-US"] #section4 h3, #HtmlTag[lang="en-US"] #section4 p {font-family:-apple-system,BlinkMacSystemFont,'Microsoft JhengHei UI',微軟正黑體,PMingLiU,MingLiU,'Segoe UI',Tahoma,Helvetica,Sans-Serif !important;}

/* Track */
.scroll-y::-webkit-scrollbar { width: 3px;}
.scroll-y::-webkit-scrollbar-track { background-color:#cecece; border-left:1px solid #dde0e4; border-radius: 0px;}
.scroll-y::-webkit-scrollbar-thumb { background: #7f7f7f; border-radius: 0px;}
.scroll-y::-webkit-scrollbar-thumb:hover { background: #9b9b9b;}
.scroll-x::-webkit-scrollbar-thumb {border-radius:0; background-color:#7f7f7f; }
.scroll-x::-webkit-scrollbar {height: 4px; background-color:#f2f2f2;}
.scrollsmooth, .scroll-x, .scroll-y {scroll-behavior: smooth;}

/* Video Block
================================================== */
.video-block .nav-tabs .nav-item.show .nav-link, .video-block .nav-tabs .nav-link.active {background: transparent;}
.video-tab {width: 100%;}
.video-tab .row {width: 100%;background: #fdfdfd;padding: 25px 10px}
.video-block {background-color: #f5f5f5; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;}

.video-block .scroll-y {overflow-y: auto;padding-right: 0;max-height: 285px;}
.video-block .row {margin-left: 0;margin-right: 0}
.video-block .row .row .row {border: 1px solid #c8c8c8;}
.video-block .col-lg-7 {max-height: 285px;overflow: hidden;}
.video-block .tab-content.muti:before {display: none;background-color: #f7f7f7;position: absolute;z-index: 2;content: '';bottom: 40px;left: -5px;width: 20px;height: 20px;-webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);transform: translateY(-50%) translateX(50%) rotate(-45deg);}
.video-block.color-green a.post-cat {background: #32b336;color: #fff;font-size: 11px;text-transform: uppercase;font-weight: 600;padding: 1px 5px}
.video-tab-title {color: #fff;font-size: 18px;text-transform: uppercase;margin: 0 0 30px 15px}
.video-tab .post-overaly-style .post-content {padding: 0 30px 37px}
.video-tab .post-thumb {transition: all .5s;}
.video-tab .post-title {font-size: 20px !important; margin-top: 0;}
.video-tab .nav-tabs {background-color: rgb(241 241 241 / 50%);box-shadow:inset rgb(0 0 0 / 20%) 8px 0px 20px 0;}
.video-tab .nav-tabs > li {width: 100%;clear: both;display: flex;margin-bottom: -1px;border: 1px solid #afafaf;padding: 25px 35px 32px}
.video-tab .nav-tabs > li:hover {background-color: rgb(224 224 224 / 40%);}
.video-tab .nav-tabs > li.active {background-color: rgb(232 232 232 / 63%);}
.video-tab .nav-tabs > li > a {background: 0 0;border: 0;padding: 0;display: block !important;width:100%; height: 100%;}
.video-tab .nav-tabs > li > a.active .post-thumb img {border-color: #fff;}
.video-tab .nav-tabs > li > a .post-thumb img {max-width: 110px;min-height: 85px;border: 2px solid rgba(255, 255, 255, 0.5);}
.video-tab .nav-tabs > li > a .post-thumb {float: left;margin-right: 20px;position: relative;overflow: hidden}
.video-tab .nav-tabs > li > a h3 {color: #1c1c1c;font-weight: 400;line-height: 1.4;font-size: 15px !important;margin: 0;padding-top: 3px}
.video-tab .tab-content > .tab-pane {border-bottom: 0px solid #000;}
.video-tab li.active>a:hover, .video-tab li.active>a:focus, .video-tab li.active>a:active {background-color:unset !important; border:0;}
.video-icon {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 11;}
.video-icon:after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    opacity: 1;
    display: block;
    z-index: 3;
    content: '';
    background: url(/images/AIDMS/btn_player.png) no-repeat;
    background-size: 100% 300%;
    border-radius: 50%;
    transition: opacity .3s cubic-bezier(0.165, 0.840, 0.440, 1.000), transform .3s cubic-bezier(0.165, 0.840, 0.440, 1.000);  
}
.video-icon:hover:after, .video-icon:focus:after {opacity: 1;-webkit-transform: scale(1.1, 1.1) rotate(0.001deg);-ms-transform: scale(1.1, 1.1) rotate(0.001deg);transform: scale(1.1, 1.1) rotate(0.001deg);background-position: 0 50%;}
.nav-tabs > li > a.active:hover, .nav-tabs > li > a:hover, .nav-tabs > li > a {border: 0;background: none;}
.post-thumb.hover {filter: brightness(50%);}
.video-block .post-overaly-style:before {
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: -webkit-gradient(linear, left bottom, left bottom, color-stop(60%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, .85)));
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%)
}
.video-tab .thumbnail {background-color:#f5f5f5;}
.video-tab .thumbnail .caption {margin: auto 20px; display: flex; flex-direction: column; justify-content: space-evenly;}
.post-thumb > a, .video-block .post-overaly-style .post-thumb {display: block;width: 100%;background-size: auto 100%;background-position: top center;background-repeat: no-repeat;}
.post-thumb {max-width: 100%;position: relative;overflow: hidden;}
.bg-pos-center {background-position: center !important;}
.bg-cover {background-size: cover !important;background-repeat: no-repeat;}

#case_3 > .container {max-width: calc(90vw - 30px);}
#case_3 .carousel-inner>.item { height:100%; min-height:unset; height:100%;}
#case_3 .thumbnail {margin-bottom: 0;border: 0;padding: 0;border-radius:0; height:100%;}
#case_3 .thumbnail img {border:1px solid rgb(173 173 173 / 75%);}

#case_3 .caption {width: 95%;color: #333;display: flex;flex-direction: column;height: 100%;justify-content: flex-end;}
#case_3 .carousel-inner { background-color: #fff;border:1px solid #c8c8c8;}
#case_3 .carousel-indicators {top:unset; bottom: 0;margin-bottom: -40px; background:unset; right: calc(50% - 25px);}
#case_3 .carousel-indicators li {background-color: rgb(0 0 0 / 50%);border: 1px solid #727272;}
#case_3 .carousel-indicators .active {background-color: #e9e9e9;}
#case_3 .carousel-control {
    position: absolute;
    width: 30px;
    top: 35px;
    font-size: 15px;
    background: #ffffff;
    background-image: unset;
    color: #3c3c3c;
    text-align: center;
    bottom: unset;
    border: 1px solid #d2d2d2;
    border-radius: 2px;
    text-shadow: none;
    padding: 4px 7px;
}
#case_3 .carousel-control.right {right: 50px; padding-left: 10px;}
#case_3 .carousel-control.left {right: 83px; left: unset; padding-right: 10px;}
#case_3 h3 {font-size:17px; color:#337ab7; font-weight:600;}
#case_3 p { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical;color: #616161;}

#section6 {background-color:#f3f6f8; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;}
#section6 .table th, #section6 .table td {font-size:13px; line-height:1.1;}
#deploy { background: url(/images/AIDMS/upload_border.png) no-repeat; background-size: 100% 100%; width: 804px; max-width: 100%; height: 410px; margin: 20px auto 0; display:flex; justify-content: center;}
#deploy img {width:239px; height:298px; margin: 20px 0.5rem 0;}

#fileupload {text-align:center;}
#s6_svg {width:376px; height:223px;}
#window_b, #baseline, #upload_txt, #icon_file, #file_01, #Proce_wrap, #Proce_bar { opacity: 0;}

.table_rollup {overflow-y: hidden;transition: height 2s;}
.table_rollup .table_opener {display: none;}
.table_rollup table {width: calc(100% - 20px); margin: 10px;}

.table_rollup.table_rolled .table_opener {display: block;}
.table_opener {position: absolute;width: 100%;top: 8.75em;left: 0;text-align: center;padding: 5em 0;background: rgb(255, 255, 255);background: linear-gradient(0deg, rgb(243 246 248) 25%, rgba(255, 255, 255, 0) 100%);}
.table-wrapper {overflow-x: auto;}

#aidms_model td.first {background:#e7e7e7 !important; color:#292929;} 
#aidms_model tr.odd-row td:not(.first) {background:#fff !important;}
td.bt {text-align: left;}
td.bt span { display: inline-block; margin: 2px 0; border: 1px solid #a1a1a1; padding: 4px 10px; font-size: 12px; line-height: 1.4; border-radius: 3px; color: #616161;}
#aidms_model tr:not(.odd-row) td.bt span {background-color: #fff8f3;}
#aidms_model tr.odd-row td.bt span {background-color: #f3f9ff;}

/* Track */
.scroll-y::-webkit-scrollbar { width: 3px;}
.scroll-y::-webkit-scrollbar-track { background-color:#f2f2f2; border-left:1px solid #dde0e4; border-radius: 0px;}
.scroll-y::-webkit-scrollbar-thumb { background: #b3b3b3; border-radius: 0px;}
.scroll-y::-webkit-scrollbar-thumb:hover { background: #9b9b9b;}
.scroll-x::-webkit-scrollbar-thumb {border-radius:0; background-color:#b3b3b3; }
.scroll-x::-webkit-scrollbar {height: 3px; background-color:#f2f2f2;}
.scrollsmooth, .scroll-x, .scroll-y {scroll-behavior: smooth;}

#bt_unroll { background-color: transparent; border: 0; font-size: 24px; color: #337ab7;}

#deploy2 img { width: 100%; max-width: 180px; margin: 0 auto; z-index: 1; position: relative;}
#deploy3 .cardbox { padding: 35px 30px 20px; margin-left: -8px; margin-right: -8px; margin-bottom:0; margin-top: -55px; background-color: #fff; border-radius:6px; border: 2px solid #cdcdcd;}
#deploy3 h3 { font-size:20px; color: #2f6081; margin-bottom:0;}
#deploy3 img { width: 120px; height:120px; margin: 0 auto; z-index: 1; position: relative;}
#deploy3 li {text-align:left; font-size:17px;}
#deploy4 .card_wrap {padding: 20px 30px 25px; background-color: #e9e9e9; border-radius: 50px;}
#deploy4 .card {display:flex; background-color: transparent; border: 0;}
#deploy4 p {color:#000; margin-bottom:0;}
#HtmlTag[lang="en-US"] #deploy4 p {line-height:1.2 !important;}

#section6 .btn-ww {
    position: relative;
    margin-bottom: -50px;
    padding: 6px 40px;
    font-size: 17px;
    z-index: 1;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    border-radius: 10px;
}
#section7 {background-color: #000308;}
#section7 h2, #section7 h3 {color:#fff;}
#security {background-repeat:no-repeat; background-position:center bottom; background-size: auto 100%;}
#icon_browser2 {width:90px; margin: 0 auto; padding-bottom:10px; }
#browser_ux {padding-top:40px;}
#browser_ux .developer {width:100px; margin:0 auto;}
#flow_down { max-width: calc(100% - 130px); margin: 0 65px 5px;}
#flow_down3 { width:80px; margin:5px auto;}
#browser_ux .cardbox { padding: 35px 30px 20px; margin-left: -8px; margin-right: -8px; margin-bottom: 0; margin-top: -55px; background-color: #fff; border-radius: 6px; border: 3px solid #005ebc;}
#browser_ux>h3 {margin:0; color:#000; font-size:18px;}
#browser_ux .cardbox h3 {padding-top:10px; color:#00509f;}
#section9 { background-color: #f9f9f9; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
#started {max-width:180px; padding-top:40px;}
#section9 h3 {color: #d78300;}
#section9 h4 {margin: 0 0 5px 0;}
#section9 h4>a {font-size:15px;}
#join_contact {width:100%; max-width:480px; margin:0 auto;}
#join_alert {border: 1px solid #ddd; background-color: #f1f1f1; padding: 10px; border-radius: 6px; margin: 0 auto;}
#section10 {background-color: #000308;}
#section10, #section10 h2, #section10 p, #section10 li  {color:#fff;}
#section10 ul  {margin-left:-15px;}
#GPU_accelerate {background-repeat:no-repeat; background-position:center bottom; background-size: auto 100%;}

@media (min-width: 1200px) {
    #HtmlTag[lang="en-US"] #container_wrap .h2, #HtmlTag[lang="en-US"] #container_wrap h2 {font-size:28px;}
    .tabs-wrapper ul.tabs li {padding-left: 20px; padding-right: 20px;}
    #case_3 .carousel-inner { height: 337px !important;}
    #case_3 p { -webkit-line-clamp: 6;}
    #HtmlTag[lang="en-US"] #section3 h3 {font-size:18px;}
}

@media (max-width: 1199px) {
    .tabs-wrapper ul.tabs li {padding-left: 15px; padding-right: 15px;}
    #p_banner {margin-left:30px;}
    #laptop {width:calc(95vw); margin-right:5vw;}   
    #case_3 p { -webkit-line-clamp: 2;}
}

@media (max-width: 1199px) and (min-width: 768px) {
    #HtmlTag[lang="en-US"] #section3 h3 {font-size:16px;}
    #HtmlTag[lang="en-US"] #container_wrap .h2, #HtmlTag[lang="en-US"] #container_wrap h2 {font-size:22px;}
    #HtmlTag[lang="en-US"] #section10 h3 {font-size: 19px;}
}

@media (min-width: 992px) {
    .textcomp {font-size:19px; padding: 20px 0 0;}  
    #robotic {width:200px; left:calc(50vw - 230px);}
    #aidms_top {background-position: 60% 0;}
   .card-columns-4 { column-count: 4; padding-bottom: 40px; }
    #case_3 .thumbnail img { width:100%; height: 100%;}
    #case_3 .carousel-inner { height: 285px;}
    #case_3 .carousel-inner>.item {padding: 25px 0 0 10px;}
    #case_3 .carousel-inner>.item>div[class*="col-"] {height: calc(100% - 25px);}
    #case_3 .caption {padding: 20px 0 25px 0;}
    #security {height: 530px;}
    #section10 p, #HtmlTag[lang="en-US"] #section10 li {font-size:17px;}
    #GPU_accelerate {height: 521px;}
    #icon_good { width: 40px; height: 40px; margin-right: 5px;}
    th.row1, th.row3, th.row4 {width:200px;}
}

@media (max-width: 991px) and (min-width: 785px) {
    #robotic {width:160px; left:calc(50vw - 60px);}
    #aidms_top {background-position: 30% 0;}
    .card-columns-4 { column-count: 2; padding-bottom: 40px; }
    #case_3 .caption { padding: 0 5px 20px; }
    #security { height: 55vw; background-position-x: 55%;}
    #GPU_accelerate { height: 52.5vw;}    
}

@media (max-width: 991px) and (min-width: 768px) {
    .textcomp {font-size:17px; padding: 10px 0 0;}
    .tabs-wrapper ul.tabs li {padding-left: 15px; padding-right: 15px;}
    #banner_subject > h2 {font-size: 20px;}
    #HtmlTag[lang="en-US"] #banner_subject > h2 { font-size:16px !important;}
    #banner_subject > p {font-size:13px;}
    #icon_good { width: 35px; height: 35px; margin-right: 5px;}
    th.row1, th.row3, th.row4 {width: 120px;}
}

@media (max-width: 991px) {
    [class*="card-columns-"] .card { margin-bottom: 15px;}
    #case_3 .carousel-inner>.item {padding: 25px 10px;}
    #case_3 .caption {width:100%;}
}

@media (min-width: 821px) {
    #deploy img {max-width: calc(32% - 10px);}
}

@media (max-width: 820px) {
    #deploy { width: 100%; height: calc((50vw - 5px)); margin: 5px auto 0; }
    #deploy img {width: calc(((100vw - 30px) / 3) - 20px); max-width: calc(33.3% - 10px); height: calc((((100vw - 30px) / 3) - 20px) * 1.246); margin: 15px 2px 0;}
}

@media (min-width: 785px) {
    #aidms_top {
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        background-image: url(/images/AIDMS/AIDMS_BG_L.webp?v=1.0),url(/images/AIDMS/top01BG_X.png);
        background-repeat: no-repeat, repeat-x;
    }
    #p_banner { width: calc(50% - 60px);  max-width: 400px; }
    #bt_app {display:none;}
    #robotic.actived > #s1_svg {transition: margin-top 0.3s ease-in 1.8s, margin-left 0.3s ease-out 2.4s, transform 0.2s ease-out 2.8s; margin-top: -25px; margin-left: -30px; transform:translateY(5px)}    
    #section7 h3 {font-size:17px;}
}

@media (max-width: 784px) {
    #robotic {display:none;}
    #aidms_top {height: auto; background-size: 100% calc(100% - 6vw); background-image: url(/images/AIDMS/AIDMS_BG_M.webp?v=1.0); align-items: center; flex-direction: column;}
    #p_banner {width: calc(100% - 60px);  max-width: 970px; height: auto; padding-top: 50px; padding-bottom: 10px;}
    #laptop {width:calc(90vw); margin:0 5vw;}
    #banner_subject { align-items: center; margin: 0 15px 0 0;}
    #aidms_logo { max-width: 140px;}
    #security {height: 70.5vw;}
    #section7 h3 {font-size:15px;}
    #GPU_accelerate { height: 66.1vw; }
}

@media (min-width: 768px) {
    #section4 {padding-bottom:40px;}
    #deploy4 .card_wrap {display:flex;}
    #join_alert {width: calc(90% - 50px);}
    #aidms_model tr.odd-row td.bt span {font-size:13px; padding: 5px 20px;}
}

@media (max-width: 767px) {
    #HtmlTag[lang="en-US"] #container_wrap .h2, #HtmlTag[lang="en-US"] #container_wrap h2 {font-size:18px;}
    .container-fluid {padding: 0;}
    .container-fluid > .container {padding: 0; width:calc(100vw - 30px)}    
    .textcomp {font-size:15px;}  
    section .row {margin-left:0; margin-right:0;}
    #banner_subject > h2 {font-size: 17px;}
    #HtmlTag[lang="en-US"] #banner_subject > h2 { font-size:15px !important;}
    #banner_subject > p {font-size:12px;}
    #section2 .row { margin-right: 0; margin-left: 0;}
    #section2 {
        background-image: url(/images/AIDMS/section2m_bk.webp);
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
    }
    #HtmlTag[lang="en-US"] #section3 h3 {font-size:15px;}
    #section5 h4 {font-size:15px;}
    #deploy3 .cardbox {padding: 35px 5px 15px 0;}
    #deploy3 img { width: 90px; height: 90px;}
    #deploy3 h3 {font-size: 16px;}
    #deploy3 li {font-size: 12px;}
    #deploy4 .card_wrap {display:block; column-count: 3;}
    #browser_ux .developer { width: 70px; margin: 0 auto;}
    #browser_ux .cardbox { padding: 15px 10px 10px; margin-top: -35px; border: 2px solid #005ebc;}
    #flow_down { max-width: 100%; margin: 0 0 5px;}
    #browser_ux .cardbox h3 {font-size:15px !important;}
    #started { max-width: 150px;}
    #join_alert {width: calc(100%);}
    .video-tab .thumbnail .caption h3 {font-size: 18px;}
    #icon_good { width: 28px; height: 28px; margin-right: 5px;}
    th.row1, th.row3, th.row4 {width: 100px;}
    #icon_browser2 { width: 50px; }
    #HtmlTag[lang="en-US"] #section10 h3 {font-size: 19px;}
}

@media (max-width: 680px) {
    .tabs-wrapper ul.tabs { width: calc(100vw - 40px); overflow-x:auto;}
    .tabs-wrapper ul.tabs.end::before {content: ' '; }
    .tabs-wrapper ul.tabs li {padding-left: 10px; padding-right: 10px;}
    .tabs-wrapper ul.tabs li:last-child {padding-right:10px;}
    .tabs-wrapper ul.tabs li a {font-size:13px; padding-top: 0; line-height:40px;}    
    section h2.title {font-size:24px;}
}

@media (max-width: 580px) {
   #banner_subject h2 {font-size:17px;}
   #aidms_logo { max-width: 130px;}
   section h2.title {font-size:22px !important;}
   #section2 .photo { width: 60px; height: 60px; }
   #section2 .cardbox { padding: 25px 20px 15px;}
   .select_model {width:130px;}
    #deploy2 img { max-width: 100px;}
   #section9 h4 {font-size:15px;}
   #section9 h4 > a {font-size:13px;}
   #HtmlTag[lang="en-US"] #section10 h2 {font-size: 18px;}
   #HtmlTag[lang="en-US"] #section10 h3 {font-size: 16px;}
}

@media (max-width: 460px) {
    #HtmlTag[lang="en-US"] #container_wrap .h2, #HtmlTag[lang="en-US"] #container_wrap h2 {font-size: 17px !important; line-height: 1.3 !important;}
    .textcomp {font-size:14px;}   
    .tabs-wrapper ul.tabs li a {font-size:12px; padding-top: 0; line-height:35px;}
    .list-icon li {background-size: auto 15px; background-position-y:9px; padding: 8px 0 8px 28px; line-height: 20px;}
    .card .list-icon li { font-size: 13px;}
    #HtmlTag[lang="en-US"] .card .list-icon li  {font-size: 12px;}
    .newtable th, .newtable td { font-size: 12px !important; font-weight: 500 !important; vertical-align:middle !important;}   
    #section2 h3 {font-size: 13px;}
    #section2 .match-height.padding-b-40 {padding-bottom: 15px;}
    #section3 .card-columns-4 { column-count: 2; gap: 5px; margin-left: -10px; margin-right: -10px;}
    #HtmlTag[lang="en-US"] #section3 .card-columns-4 { column-count: 1;}
    #section3 .card-columns-4 img {padding: 7px 7px 0;}
    #section3 .card-columns-4 h3 { font-size: 15px;}
    #section3 .card-columns-4 .list-icon { margin-bottom: 0;}
    #section3 .card .card-bottom { bottom: -25px; right: 10vw;}
    #section3 .card-bottom a {font-size: 12px;}
    .tabs-wrapper { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px;}
    #case_1 { height: 484px; }
    .scroll-x::-webkit-scrollbar-thumb {border-radius:0; }
    .scroll-x::-webkit-scrollbar {height: 3px;}
    .scroll-y::-webkit-scrollbar { width: 3px;}
    .video-block .scroll-y {max-height: 216px;}
    .video-tab .post-overaly-style .post-content { padding: 0;}
    .video-tab h2.post-title {display:none;}
    .video-tab .nav-tabs > li > a .post-thumb { margin-right: 5px;}
    .video-tab .nav-tabs > li { padding: 15px 20px 22px;}
    .video-tab .nav-tabs > li > a h3 {font-size: 12px !important; margin: 0 7px; padding-top: 7px;}
    .video-tab .thumbnail { margin-bottom:0; border-radius:0; border-bottom: 0; border-color: #b0b0b0;}
    .video-tab .thumbnail .caption {margin: auto 5px;}
    #s6_svg {width: 55vw; height:auto;}
    #deploy3 li {margin-left: -8px;}
    #deploy4 .card_wrap { column-count: 3; gap: 1px; padding: 15px 20px 20px; border-radius: 20px; }
    #deploy4 p { margin-bottom: 5px;}
    #icon_browser2 { width: 45px; left: calc(50% - 32px);}
    #flow_down3 { width: 45px;}
    #browser_ux .developer { width: 60px;}
    section h2.title {font-size: 18px !important;}
    #section7 h3 { margin-top: 0; font-size: 12px;}
    #browser_ux .cardbox h3 {margin-top: 15px;}
    #join_alert {font-size: 12px;}
    .video-tab .thumbnail .caption h3 { font-size: 15px !important; margin-top: 0;}
    .video-tab .thumbnail .caption .btn { font-size: 12px; margin-top:-5px;}
    th.row1, th.row3, th.row4 { width: 60px;}
    #section6 .btn-ww { margin-bottom: -25px; font-size: 12px;}
    #HtmlTag[lang="en-US"] #section10 h3 {font-size: 14px;}
    #started { max-width: 120px;}
}