@import url("https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto.css");

html,
body {
    height: 100%;
}

.layout,
.overContent {
    overflow: unset !important
}

.Header__accessibility__193r3 {
    left: 0
}

#pdc {
    padding: 0 !important;
}

.clear-style {
    font-family: "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    background: #000;
    color: #fff;
    font-size: 16px;
    margin: 0;
    padding: 0;
    position: relative;
    max-width: 2560px;
    margin: 0 auto;
}

.clear-style * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: break-word
}

.clear-style ::selection {
    background: #292929;
    color: #3bbee3;
    -webkit-text-fill-color: #3bbee3
}

.clear-style ::-moz-selection {
    background: #292929;
    color: #3bbee3;
    -webkit-text-fill-color: #3bbee3
}

.clear-style ul,
.clear-style li,
.clear-style figure,
.clear-style p {
    margin: 0;
    padding: 0
}

.clear-style h1,
.clear-style h2,
.clear-style h3,
.clear-style h4,
.clear-style p,
.clear-style a,
.clear-style li {
    font: inherit
}

.clear-style img {
    display: block;
    height: auto;
    border: none;
    max-width: 100% !important;
    margin: 0 auto
}

.clear-style img.lazyLoad {
    opacity: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    height: 50vh
}

.clear-style img.lazyLoad.lazyLoaded {
    height: auto;
    opacity: 1
}

.clear-style button {
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer
}

.clear-style .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.clear-style a:focus-visible,
.clear-style button:focus-visible,
.clear-style input:focus-visible,
.clear-style select:focus-visible,
.clear-style textarea:focus-visible,
.clear-style [role="button"]:focus-visible,
.clear-style [tabindex="0"]:focus-visible {
    outline: 1px solid #0070e4;
    outline-offset: -1px
}

.clear-style a:focus:not(:focus-visible),
.clear-style button:focus:not(:focus-visible),
.clear-style input:focus:not(:focus-visible),
.clear-style select:focus:not(:focus-visible),
.clear-style textarea:focus:not(:focus-visible),
.clear-style [role="button"]:focus:not(:focus-visible),
.clear-style [tabindex="0"]:focus:not(:focus-visible) {
    outline: none
}

@-webkit-keyframes colorrun {
    0% {
        filter: hue-rotate(0deg)
    }

    100% {
        filter: hue-rotate(359deg)
    }
}

@keyframes colorrun {
    0% {
        filter: hue-rotate(0deg)
    }

    100% {
        filter: hue-rotate(359deg)
    }
}

@-webkit-keyframes hint {
    0% {
        border-width: 2px;
        margin: -2px;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    100% {
        border-width: 0;
        margin: 0;
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }
}

@keyframes hint {
    0% {
        border-width: 2px;
        margin: -2px;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    100% {
        border-width: 0;
        margin: 0;
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }
}

@-webkit-keyframes hintPort {
    0% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    100% {
        -ms-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0
    }
}

@keyframes hintPort {
    0% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    100% {
        -ms-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0
    }
}

@-webkit-keyframes hintAimesh {
    0% {
        border-width: 2px;
        margin: -2px;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    100% {
        border-width: 0;
        margin: 0;
        -ms-transform: scale(10);
        -webkit-transform: scale(10);
        transform: scale(10);
        opacity: 0
    }
}

@keyframes hintAimesh {
    0% {
        border-width: 2px;
        margin: -2px;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    100% {
        border-width: 0;
        margin: 0;
        -ms-transform: scale(10);
        -webkit-transform: scale(10);
        transform: scale(10);
        opacity: 0
    }
}

@-webkit-keyframes zoomIn {
    0% {
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 0
    }

    100% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 0
    }

    100% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes zoomOut {
    0% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        -ms-transform: scale(1.6);
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        -ms-transform: scale(1.6);
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -ms-transform: translateY(30px);
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -ms-transform: translateY(30px);
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        -ms-transform: translateY(10px);
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        -ms-transform: translateY(10px);
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -ms-transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -ms-transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -ms-transform: translateX(30px);
        -webkit-transform: translateX(30px);
        transform: translateX(30px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -ms-transform: translateX(30px);
        -webkit-transform: translateX(30px);
        transform: translateX(30px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes quickFadeInOut {

    0%,
    49.4%,
    100% {
        opacity: 1
    }

    49.5%,
    99.9% {
        opacity: 0
    }
}

@keyframes quickFadeInOut {

    0%,
    49.4%,
    100% {
        opacity: 1
    }

    49.5%,
    99.9% {
        opacity: 0
    }
}

#hd {
    font-size: 16px
}

#hd h2,
#hd .h2 {
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 3em;
    font-weight: normal;
    line-height: 1.125;
    color: inherit !important;
    letter-spacing: 0;
    margin-bottom: .5em;
    word-break: normal;
    word-wrap: normal
}
#hd h2.tagline{
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 3em;
    font-weight: normal;
    line-height: 1.125;
    color: inherit !important;
    letter-spacing: 0;
    margin-bottom: .5em;
    word-break: normal;
    word-wrap: normal
}
#hd h3,
#hd .h3 {
    font-family: "TTNormsProRegular", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 2.125em;
    font-weight: normal;
    line-height: 1.125;
    letter-spacing: 0;
    color: #000;
    margin-bottom: .25em
}

#hd .h3.mini-title {
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.4em;
    font-weight: normal;
}

#hd h3 strong,
#hd .h3 strong {
    font-weight: inherit
}

#hd h3 .txt-smaller,
#hd .h3 .txt-smaller {
    font-size: 0.875em
}

#hd h3 .txt-larger,
#hd .h3 .txt-larger {
    font-size: 1.125em
}

#hd h4,
#hd .h4 {
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.6em;
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: 0;
    color: inherit;
    margin-bottom: .5em
}

#hd h5,
#hd .h5 {
    font-family: "TTNormsProBold", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.25em;
    font-weight: normal;
    letter-spacing: .018em;
    color: inherit;
    margin-bottom: .5em
}

#hd p,
#hd small,
#hd a,
#hd li {
    font-family: "Roboto", "TTNormsProRegular", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
}

#hd p {
    font-size: 1.25em;
    line-height: 1.4;
    letter-spacing: 0;
    font-weight: 300
}

#hd b,
#hd strong {
    font-weight: bold
}

#hd small {
    font-size: .8em;
    font-weight: normal;
    letter-spacing: .018em
}

#hd .align-center {
    text-align: center
}

#hd .align-left {
    text-align: left
}

#hd .align-right {
    text-align: right
}

#hd .align-italic {
    font-style: italic
}

#hd .txt-link {
    display: inline-block;
    font-size: 1.25em;
    line-height: 1.6363;
    letter-spacing: .016em;
    font-weight: 500
}

#hd .txt-link:hover,
#hd .txt-link:focus-visible {
    text-decoration: underline
}

#hd .hd-underline {
    text-decoration: underline
}

#hd .color-primary {
    color: #0070e4 !important;
    color: #202c35 !important;
}

#hd .color-secondary {
    color: #4152d2 !important;
    color: #000000 !important;
}

#hd .color-primary-light {
    color: #3bbee3 !important
}

#hd .color-primary-dark {
    color: #3d54d8 !important
}

#hd .color-highlight {
    color: #B277FF !important
}

#hd .color-light-grey {
    color: #d9d9d6 !important
}

#hd .color-grey {
    color: #666 !important
}

#hd .color-dark-grey {
    color: #404040 !important
}

#hd .color-dark {
    color: #000 !important
}

#hd .color-white {
    color: white !important
}
#hd .color-blue {
    color: #11d2ff !important
}

#hd .font-content {
    font-family: "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
}

#hd .text-shadow {
    text-shadow: 0 0 2px black
}

#hd .color-gradient {
    display: inline-block;
    color: #3bbee3 !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: #9fc8f5;
    background-image: -moz-linear-gradient(0deg, #9fc8f5, #B277FF 60%);
    background-image: -webkit-linear-gradient(0deg, #9fc8f5, #B277FF 60%);
    background-image: linear-gradient(0deg, #9fc8f5, #B277FF 60%);
    text-shadow: none;
    position: relative;
    z-index: 2
}

#hd .color-gradient>* {
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#hd .color-gradient::selection,
#hd .color-gradient>::selection {
    background: #292929;
    color: #0070e4;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #0070e4
}

#hd .color-gradient::-moz-selection,
#hd .color-gradient>::-moz-selection {
    background: #292929;
    color: #0070e4;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #0070e4
}

#hd .color-gradient-light {
    background-color: #16dbff;
    background-image: -moz-linear-gradient(90deg, #16dbff 0%, #16c3ff 18%, #ff00e9 85%, #ff42e7);
    background-image: -webkit-linear-gradient(90deg, #16dbff 0%, #16c3ff 18%, #ff00e9 85%, #ff42e7);
    background-image: linear-gradient(90deg, #16dbff 0%, #16c3ff 18%, #ff00e9 85%, #ff42e7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    /* margin: 0; */
}

#hd .color-gradient-light>* {
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#hd .color-gradient-dark {
    background-color: #3e75c0;
    background-image: -moz-linear-gradient(58deg, #3e75c0 20%, #3e75c0 80%);
    background-image: -webkit-linear-gradient(58deg, #3e75c0 20%, #3e75c0 80%);
    background-image: linear-gradient(58deg, #3e75c0 20%, #3e75c0 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#hd .color-gradient-dark>* {
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#hd .font-title {
    font-family: "TTNormsProBold", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-weight: bold
}

#hd .hd-uppercase {
    text-transform: uppercase
}

#hd .title-animation {
    font-size: 5em
}

#hd .title-animation span {
    display: inline-block;
    position: relative
}

#hd .title-animation span:after {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% + 2px);
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -1px;
    background: black;
    clip-path: inset(0 0 0 0)
}

#hd .title-animation span:nth-child(1):after {
    transition: clip-path 0.4s .1s ease
}

#hd .title-animation span:nth-child(2):after {
    transition: clip-path 0.4s .2s ease
}

#hd .title-animation span:nth-child(3):after {
    transition: clip-path 0.4s .3s ease
}

#hd .title-animation span:nth-child(4):after {
    transition: clip-path 0.4s .4s ease
}

#hd .title-animation span:nth-child(5):after {
    transition: clip-path 0.4s .5s ease
}

#hd .title-animation span:nth-child(6):after {
    transition: clip-path 0.4s .6s ease
}

#hd .title-animation span:nth-child(7):after {
    transition: clip-path 0.4s .7s ease
}

#hd .title-animation span:nth-child(8):after {
    transition: clip-path 0.4s .8s ease
}

#hd .title-animation span:nth-child(9):after {
    transition: clip-path 0.4s .9s ease
}

#hd .title-animation span:nth-child(10):after {
    transition: clip-path 0.4s 1s ease
}

#hd .title-animation.is-animated span:after {
    clip-path: inset(0 0 0 100%)
}

/* @media screen and (min-width: 2560px){
    #hd{
        font-size:20px
    }
}
@media screen and (min-width: 3000px){
    #hd{
        font-size:28px
    }
} */
@media screen and (max-width: 1280px) {

    #hd h2,
    #hd .h2 {
        font-size: 3em
    }

    #hd h3,
    #hd .h3 {
        font-size: 1.5em
    }

    #hd h4,
    #hd .h4 {
        font-size: 1.25em
    }

    #hd p,
    #hd .txt-link {
        font-size: 1.125em
    }

    #hd .title-animation {
        font-size: 4.25em
    }
}

@media screen and (max-width: 1024px) {

    #hd h2,
    #hd .h2 {
        font-size: 2.5em
    }

    #hd .title-animation {
        font-size: 3em
    }
}

@media screen and (max-width: 1023px) {

    #hd h3 .txt-larger,
    #hd .h3 .txt-larger {
        font-size: 1em
    }
}

@media screen and (max-width: 768px) {

    #hd h3,
    #hd .h3 {
        font-size: 1.75em
    }

    #hd h4,
    #hd .h4 {
        font-size: 1.5em
    }
}

@media screen and (max-width: 620px) {

    #hd h2,
    #hd .h2 {
        font-size: 2.25em
    }

    #hd h3,
    #hd .h3 {
        font-size: 1.75em
    }

    #hd h4,
    #hd .h4 {
        font-size: 1.5em
    }
}

@media screen and (max-width: 480px) {

    #hd h2,
    #hd .h2 {
        font-size: 1.875em;
        letter-spacing: 0
    }

    #hd h3,
    #hd .h3 {
        font-size: 1.5em
    }

    #hd h4,
    #hd .h4 {
        font-size: 1.25em
    }

    #hd p,
    #hd .txt-link {
        font-size: 1em
    }
}

#hd .hd-w900,
#hd .hd-w1000,
#hd .hd-w1100,
#hd .hd-w1200,
#hd .hd-w1300,
#hd .hd-w1400,
#hd .hd-w1600 {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    position: relative
}

#hd .hd-w900 {
    max-width: 800px
}

#hd .hd-w1000 {
    max-width: 1000px
}

#hd .hd-w1100 {
    max-width: 1100px
}

#hd .hd-w1300 {
    max-width: 1300px
}

#hd .hd-w1400 {
    max-width: 1400px
}

#hd .hd-w1600 {
    max-width: 1600px
}

#hd .hd-mw800 {
    max-width: 760px
}

#hd .hd-mw1000 {
    max-width: 1000px
}

#hd .hd-col20 {
    width: 20%
}

#hd .hd-col25 {
    width: 25%
}

#hd .hd-col30 {
    width: 30%
}

#hd .hd-col33 {
    width: 33.3333%
}

#hd .hd-col35 {
    width: 35%
}

#hd .hd-col40 {
    width: 40%
}

#hd .hd-col45 {
    width: 45%
}

#hd .hd-col50 {
    width: 50%
}

#hd .hd-col55 {
    width: 55%
}

#hd .hd-col60 {
    width: 60%
}

#hd .hd-col66 {
    width: 66.6666%
}

#hd .hd-col65 {
    width: 65%
}

#hd .hd-col70 {
    width: 70%
}

#hd .hd-col75 {
    width: 75%
}

#hd .hd-col80 {
    width: 80%
}

#hd .hd-col90 {
    width: 90%
}

#hd .hd-col100 {
    width: 100%
}

#hd .ib-top {
    display: inline-block;
    vertical-align: top
}

#hd .ib-bottom {
    display: inline-block;
    vertical-align: bottom
}

#hd .flex-wrap {
    display: flex;
    flex-wrap: wrap
}

#hd .flex-nowrap {
    display: flex;
    flex-wrap: nowrap
}

#hd .flex-row-reverse {
    flex-direction: row-reverse
}

#hd .align-items-center {
    align-items: center
}

#hd .align-items-start {
    align-items: flex-start
}

#hd .align-items-end {
    align-items: flex-end
}

#hd .justify-content-center {
    justify-content: center
}

#hd .justify-content-start {
    justify-content: flex-start
}

#hd .justify-content-end {
    justify-content: flex-end
}

#hd .justify-content-between {
    justify-content: space-between
}

#hd .justify-content-around {
    justify-content: space-around
}

#hd .ml-auto {
    margin-left: auto
}

#hd .mr-auto {
    margin-right: auto
}

#hd .mx-auto {
    margin-left: auto;
    margin-right: auto
}

#hd .hd-d-none {
    display: none !important
}

#hd .hd-d-1023-block {
    display: none !important
}

@media screen and (min-width: 2560px) {
    #hd .hd-w900 {
        max-width: 900px
    }

    #hd .hd-w1000 {
        max-width: 1200px
    }

    #hd .hd-w1100 {
        max-width: 1400px
    }

    #hd .hd-w1200 {
        max-width: 1500px
    }

    #hd .hd-w1300 {
        max-width: 1600px
    }

    #hd .hd-w1400 {
        max-width: 1800px
    }

    #hd .hd-w1600 {
        max-width: 2000px
    }

    #hd .hd-mw800 {
        max-width: 1050px
    }

    #hd .hd-mw1000 {
        max-width: 1200px
    }
}

@media screen and (min-width: 3000px) {
    #hd .hd-w900 {
        max-width: 1200px
    }

    #hd .hd-w1000 {
        max-width: 1800px
    }

    #hd .hd-w1100 {
        max-width: 2000px
    }

    #hd .hd-w1200 {
        max-width: 2000px
    }

    #hd .hd-w1300 {
        max-width: 2400px
    }

    #hd .hd-w1400 {
        max-width: 2600px
    }

    #hd .hd-w1600 {
        max-width: 2800px
    }

    #hd .hd-mw800 {
        max-width: 1800px
    }

    #hd .hd-mw1000 {
        max-width: 2000px
    }
}

@media screen and (max-width: 1024px) and (orientation: portrait),
screen and (max-width: 1023px) {
    #hd .hd-d-portrait-none {
        display: none !important
    }

    #hd .hd-d-portrait-block {
        display: block !important
    }
}

@media screen and (max-width: 1023px) {
    #hd .hd-d-1023-none {
        display: none !important
    }

    #hd .hd-d-1023-block {
        display: block !important
    }

    #hd .hd-d-1023-inline-block {
        display: inline-block !important
    }
}

@media screen and (max-width: 768px) {
    #hd .hd-d-768-none {
        display: none !important
    }

    #hd .hd-d-768-block {
        display: block !important
    }
}

@media screen and (max-width: 620px) {
    #hd .hd-d-620-none {
        display: none !important
    }

    #hd .hd-d-620-block {
        display: block !important
    }
}

@media screen and (max-width: 480px) {
    #hd .hd-d-480-none {
        display: none !important
    }

    #hd .hd-d-480-block {
        display: block !important
    }
}

#hd .vid-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background: black;
    position: relative;
    overflow: hidden
}

#hd .vid-container.trigger-video-toggle .vid-control {
    cursor: pointer
}

#hd .vid-container.trigger-video-toggle .vid-control:focus {
    opacity: 1
}

#hd .vid-container video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity 0.25s ease
}

#hd .vid-container h2 {
    opacity: 0
}

#hd .vid-control {
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    box-shadow: none;
    position: absolute;
    right: 5%;
    bottom: 20px;
    margin: 5px;
    transition: all 0.3s ease-out;
    z-index: 2
}

#hd .vid-control img,
#hd .vid-control svg {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

#hd .vid-control .play {
    display: none
}

#hd .vid-control.hd-active .play {
    display: block
}

#hd .vid-control.hd-active .pause {
    display: none
}

#hd .gif-container {
    position: relative;
    overflow: hidden
}

#hd .gif-container img.hd-d-none {
    position: absolute !important;
    top: 0;
    left: 0
}

#hd .gif-container .vid-control img {
    margin: auto !important
}

#hd .gif-container.is-reduced-motion img.hd-d-none {
    display: block !important
}

@media screen and (max-width: 768px) {
    #hd .vid-control {
        width: 44px;
        height: 44px
    }
}

#hd .hd-lightbox {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11
}

#hd .hd-lightbox.hd-active {
    display: flex;
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: .4s;
    -webkit-animation-name: fadeIn;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-delay: 0s;
    animation-duration: .4s;
    animation-name: fadeIn;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

#hd .hd-lightbox .hd-filter {
    width: 100%;
    height: 100%;
    padding: 100px 3em 20px;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto
}

#hd .hd-lightbox .hd-filter::-webkit-scrollbar {
    width: 4px
}

#hd .hd-lightbox .hd-filter::-webkit-scrollbar-track {
    background: transparent
}

#hd .hd-lightbox .hd-filter::-webkit-scrollbar-thumb {
    background: #666
}

#hd .hd-lightbox .hd-filter::-webkit-scrollbar-thumb:hover {
    background: #0070e4
}

#hd .hd-lightbox .hd-box {
    width: 90%;
    max-width: 920px;
    position: relative;
    margin: 0 auto;
    z-index: 2
}

#hd .hd-lightbox .hd-box iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

#hd .hd-lightbox .hd-box h2 {
    margin-bottom: .25em
}

#hd .hd-lightbox.type-img .vid-container {
    height: auto;
    padding-bottom: 0
}

#hd .hd-lightbox .vid-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    overflow: hidden
}

#hd .hd-lightbox .vid-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#hd .hd-lightbox .hd-close {
    font-size: 1em;
    width: 44px;
    height: 44px;
    position: absolute;
    bottom: 100%;
    right: 0;
    margin: .75em;
    pointer-events: all;
    cursor: pointer
}

#hd .hd-lightbox .hd-close:before,
#hd .hd-lightbox .hd-close:after {
    content: '';
    display: block;
    width: 2.25em;
    height: 3px;
    border-radius: 2px;
    background: white;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transition: all 0.4s ease
}

#hd .hd-lightbox .hd-close:before {
    -ms-transform: translate(0, 0) rotate(-45deg);
    -webkit-transform: translate(0, 0) rotate(-45deg);
    transform: translate(0, 0) rotate(-45deg)
}

#hd .hd-lightbox .hd-close:after {
    -ms-transform: translate(0, 0) rotate(45deg);
    -webkit-transform: translate(0, 0) rotate(45deg);
    transform: translate(0, 0) rotate(45deg)
}

#hd .hd-lightbox .hd-close:hover:before,
#hd .hd-lightbox .hd-close:hover:after {
    background: #0070e4
}

@media screen and (min-width: 2560px) {
    #hd .hd-lightbox .hd-box {
        max-width: 1020px
    }
}

@media screen and (min-width: 3000px) {
    #hd .hd-lightbox .hd-box {
        max-width: 1400px
    }
}

@media screen and (max-width: 1024px) {
    #hd .hd-lightbox .hd-filter {
        padding: 50px 2em 20px
    }
}

@media screen and (max-width: 768px) {
    #hd .hd-lightbox .hd-filter {
        padding: 50px 2em
    }

    #hd .hd-lightbox .hd-box {
        width: 100%
    }

    #hd .hd-lightbox .hd-box iframe {
        width: 100%
    }
}

@media screen and (max-width: 480px) {
    #hd .hd-lightbox .hd-filter {
        padding: 50px .5em
    }

    #hd .hd-lightbox .hd-box {
        padding: 0
    }
}

#hd .bg-primary {
    background: #e7e1d3;
}

#hd .bg-white {
    background: white;
    color: #000
}

#hd .bg-white .txt-link.color-primary:hover,
#hd .bg-white .txt-link.color-primary:focus-visible {
    color: #000 !important
}

#hd .bg-grey {
    background: #d1c8c3
}

#hd .bg-dark {
    background: #292929;
    background: #1b1b1b;
    color: #e6e6e6
}

#hd .bg-dark .color-secondary {
    color: #58b1f1 !important
}

#hd .bg-light-grey {
    background: #f2f2f2
}

#hd .bg-black {
    background: #000;
    color: #fff
}

#hd .bg-light {
    background: #deebf7;
    color: #000
}

#hd .bg-gradient-dark {
    background: linear-gradient(180deg, #0e0e0e 40%, #003cda)
}

#hd .bg-gradient-light {
    background: linear-gradient(180deg, #5334f3, #00b0f0)
}

#hd .bg-gradient-light-blue {
    background: linear-gradient(0deg, #e6ebf0, #d3e4f4)
}

#hd .bg-gradient-grey {
    background: linear-gradient(180deg, #ebebeb, #f2f2f2)
}

#hd section {
    padding: 5vw 0
}

#hd .hd-tag {
    font-family: "TTNormsProNormal", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-weight: normal;
    font-size: 1.3em;
    letter-spacing: .16em;
    margin-bottom: 20px
}

#hd .list-img {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px
}

#hd .list-img li {
    /* width:33.33%; */
    padding: 10px;
}

#hd .list-img li .hd-bg {
    background: inherit;
}

#hd .list-img li:nth-child(1) .hd-frame {
    color: #000 !important;
    background: linear-gradient(to bottom, #e3dfd8, #e3dfd8);
}

#hd .list-img li:nth-child(2) .hd-frame {
    color: #000 !important;
    background: linear-gradient(to bottom, #d5d4d4, #d5d4d4);
}

#hd .list-img li p {
    margin-bottom: 0.5em;
    line-height: 1.5
}

#hd .list-img .hd-frame {
    height: 100%;
    border-radius: 10px;
    padding: 50px 50px 80%;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s
}

#hd .list-img .hd-frame>* {
    position: relative;
    z-index: 2
}

#hd .list-img .hd-frame h3 {
    color: inherit !important;
    margin-bottom: 0.5em
}

#hd .list-img .hd-frame .hd-bg {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1
}

#hd .list-img-large {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px
}

#hd .list-img-large li {
    padding: 12px
}

#hd .list-img-large li.hd-col100 .hd-frame {
    padding-bottom: 50px;
    padding-right: 60%
}

#hd .list-img-large li.hd-col100 .hd-frame .hd-bg {
    width: auto;
    max-width: none !important;
    height: 100%;
    left: auto;
    right: 0
}

#hd .list-img-large li p {
    margin-bottom: 0em;
    line-height: 1.2;
    padding-left: 5px;
}

#hd .list-img-large .hd-frame {
    height: 100%;
    border-radius: 10px;
    padding: 50px 50px 80%;
    position: relative;
    overflow: hidden
}

#hd .list-img-large .hd-frame>* {
    position: relative;
    z-index: 2
}

#hd .list-img-large .hd-frame h3 {
    color: inherit !important;
    margin-bottom: 0.5em
}

#hd .list-img-large .hd-frame .hd-img-container {
    position: static
}

#hd .list-img-large .hd-frame .hd-bg {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1
}

#hd .hd-feature-container {
    display: flex;
    flex-wrap: wrap;
    margin: 2em 0 0
}

#hd .hd-feature-container li {
    font-family: "TTNormsProRegular", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
    margin-bottom: 16px;
    padding-right: 20px;
    font-size: 1.4em;
    /*RT-BE58U*/
}

#hd .hd-feature-container li strong {
    display: block;
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 2.75em;
    font-size: 1.5em;
    /*RT-BE58U*/
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1;
    margin: .25em auto .25em
}

#hd .hd-feature-container li small {
    font: inherit;
    font-size: 0.75em;
    letter-spacing: 0
}

#hd .trigger-video {
    position: relative;
    overflow: hidden;
    cursor: pointer
}

#hd .trigger-video>img {
    width: 100%;
    transition: transform 0.8s ease
}

#hd .trigger-video .hd-play {
    width: 5em;
    height: 5em;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transition: transform 0.25s ease
}

#hd .trigger-video:hover>img,
#hd .trigger-video:focus-visible>img {
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
}

#hd .trigger-video:active .hd-play {
    -ms-transform: scale(.9, .9);
    -webkit-transform: scale(.9, .9);
    transform: scale(.9, .9)
}

@media screen and (max-width: 1280px) {
    #hd .hd-feature-container li {
        font-size: 0.875em
    }

    #hd .list-img .hd-frame {
        padding: 30px 30px 80%
    }

    #hd .list-img-large li.hd-col100 .hd-frame {
        padding-bottom: 30px
    }

    #hd .list-img-large .hd-frame {
        padding: 30px 30px 80%
    }
}

@media screen and (max-width: 1024px) {
    #hd .hd-feature-container {
        margin: 3em auto 1em
    }

    #hd .hd-feature-container li {
        padding-right: 16px;
        margin-bottom: 1em
    }

    #hd .hd-feature-container li strong {
        font-size: 2.5em;
        font-size: 2em;
        /*RT-BE58U*/
    }

    #hd .list-img .hd-btn {
        font-size: 1em
    }

    #hd .list-img-large li {
        padding: 10px
    }
}

@media screen and (max-width: 1023px) {
    #hd .list-img {
        width: 80%;
        max-width: 600px;
        margin: 0 auto;
        font-size: 0.875em
    }

    #hd .list-img li {
        width: 100%
    }

    #hd .list-img-large {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        font-size: 0.875em
    }
}

@media screen and (max-width: 768px) {
    #hd section {
        padding: 10% 0
    }
}

@media screen and (max-width: 620px) {
    #hd .hd-feature-container {
        margin: 2em auto 1em
    }

    #hd .hd-feature-container li {
        font-size: 1em;
        padding-inline: 6px
    }

    #hd .list-img-large li {
        width: 100%
    }

    #hd .list-img-large li.hd-col100 .hd-frame {
        padding-right: 30px;
        padding-bottom: 0
    }

    #hd .list-img-large li.hd-col100 .hd-frame .hd-img-container {
        margin-top: 30px;
        margin-left: -30px;
        margin-right: -30px;
        position: relative;
        overflow: hidden
    }

    #hd .list-img-large li.hd-col100 .hd-frame .hd-img-container:after {
        content: '';
        display: block;
        width: 100%;
        height: 0;
        padding-bottom: 10%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(244, 243, 239, 0);
        background-image: -moz-linear-gradient(0deg, rgba(244, 243, 239, 0), #f4f3ef);
        background-image: -webkit-linear-gradient(0deg, rgba(244, 243, 239, 0), #f4f3ef);
        background-image: linear-gradient(0deg, rgba(244, 243, 239, 0), #f4f3ef);
        z-index: 2;
        pointer-events: none;
        user-select: none
    }

    #hd .list-img-large li.hd-col100 .hd-frame .hd-bg {
        width: 145%;
        height: auto;
        margin-left: -45%;
        position: relative
    }
}

@media screen and (max-width: 480px) {
    #hd section {
        padding: 15% 0
    }

    #hd .hd-tag {
        font-size: 1.125em;
        margin-bottom: 10px
    }

    #hd .list-img {
        width: 100%
    }

    #hd .list-img .hd-frame {
        padding: 30px 20px 80%
    }

    #hd .list-img-large li.hd-col100 .hd-frame {
        padding: 30px 20px 0
    }

    #hd .list-img-large li.hd-col100 .hd-frame .hd-img-container {
        margin-top: 20px;
        margin-left: -20px;
        margin-right: -20px
    }

    #hd .list-img-large .hd-frame {
        padding: 30px 20px 90%
    }

    #hd .hd-feature-container {
        margin: 2em 0 0
    }

    #hd .hd-feature-container li {
        font-size: 0.875em;
        margin-bottom: 1.5em
    }

    #hd .hd-feature-container li strong {
        font-size: 2em
    }

    #hd .trigger-video .hd-play {
        width: 3.5em;
        height: 3.5em
    }
}

#hd .hd-btn {
    display: inline-block;
    flex-wrap: nowrap;
    align-items: center;
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-weight: normal;
    font-size: 1.25em;
    line-height: 1.5;
    letter-spacing: .018em;
    color: white;
    background: #2d30f9;
    background: #4b94f8;
    padding: .5em 1em .5em;
    border-radius: 2em;
    margin: 1em 0;
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: box-shadow 0.4s ease, transform 0.25s ease
}

#hd .hd-btn i {
    flex-shrink: 0;
    width: 1.5em;
    height: 1.5em;
    background: #f51829 url(../img/btn-arrow-right.svg) 60% 60% no-repeat;
    background-size: 40%;
    border-radius: 1em;
    margin-left: .25em
}

#hd .hd-btn:hover,
#hd .hd-btn:focus-visible {
    box-shadow: 0 0 0 5px rgba(61, 84, 216, 0.25)
}

#hd .hd-btn:active {
    box-shadow: 0 0 0 5px rgba(61, 84, 216, 0.65)
}

#hd .hd-btn.btn-grey {
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    background: #f2f2f2;
    color: #404040
}

@media screen and (max-width: 480px) {
    #hd .hd-btn {
        font-size: 0.875em
    }
}

#hd .sec-kv {
    display: flex;
    /* flex-direction:column-reverse; */
    padding: 0vw 0 0;
    position: relative;
    overflow: hidden;
    background: #000;
    flex-direction: column;
}
#hd .sec-kv .info{
    font-size: 22px;
}
#hd .sec-kv .hd-bg {
    width: 100%;
    /* height:0;
    padding-bottom:1325px; */
    margin-bottom: 0%;
    position: relative
}

#hd .sec-kv .hd-bg img {
    /* width:2560px;
    max-width:none !important;
    position:absolute;
    left:50%;
    -ms-transform:translate(-50%, 0);
    -webkit-transform:translate(-50%, 0);
    transform:translate(-50%, 0) */
}

#hd .sec-kv .hd-bg img.award-logo {
    width: 200px;
    top: 5%;
    position: absolute;
    left: calc(50% - 440px);
    -ms-transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    transform: translate(0%, 0);
    z-index: 2;
}

#hd .sec-kv .hd-bg h2 {
    position: absolute;
    left: 42.5%;
    top: 16%;
    transform: translate(-50%, -50%);
    letter-spacing: 0;
    font-size: 1.5em;
}

#hd .sec-kv .hd-bg h2 strong {
    font-size: 2em;
    display: inline-block;
    margin-top: 0.25em;
}

#hd .sec-kv .hd-title {
    position: relative;
    z-index: 2
}


#hd .sec-kv .hd-title h4 {
    font-size: 2em;
    font-family: "TTNormsProLight", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}


#hd .sec-kv .hd-title h2 strong {
    display: block;
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.6em;
    font-weight: normal;
    margin-top: 0.15em;
    text-transform: uppercase
}


#hd .section-features .get_started {
    margin-top: 3vw;
    margin-bottom: 5vw;
}

#hd .section-features .get_started p {
    font-size: 1.4em;
}

#hd .section-features .get_started a {
    display: inline-block;
    margin: 10px 0;
    padding: 1em 1.5em 1em;
    background: #008cf7;
    /* background: linear-gradient(to right, #000 0%, #008cf7 15%, #00dfed 85%, #000 100%); */
}

#hd .section-features .get_started a span {
    font-size: 2em;
    text-shadow: none;
}

@media screen and (min-width: 2560px) {
    /* #hd .sec-kv .hd-bg{
        padding-bottom:38.0859%;
        padding-bottom:33.0859%;
    }
    #hd .sec-kv .hd-bg img{
        width:100%
    } */
}

@media screen and (max-width: 1380px) {
    #hd .sec-kv .hd-bg {
        height: auto;
        padding-bottom: 0;
        margin-bottom: 0%;
    }

    #hd .sec-kv .hd-bg img {
        width: 160%;
        margin-left: -30%;
        margin-top: 1%;
        left: 0;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        position: relative;
        max-width: inherit !important;
    }

    #hd .sec-kv .hd-bg img.award-logo {
        width: 16%;
        position: absolute;
        left: 7%;
        margin-left: 0%;
    }

    #hd .sec-kv .hd-title h2 {
        font-size: 2.5em
    }

    #hd .sec-kv .hd-title p {
        font-size: 1.25em
    }
}

@media screen and (max-width: 1024px) {
    #hd .sec-kv .hd-title {
        margin-top: 20px
    }

    #hd .sec-kv .hd-title h2 {
        font-size: 1.75em
    }

    #hd .sec-kv .hd-title h2 strong {
        font-size: 1.75em
    }

    #hd .sec-kv .hd-title p {
        font-size: 1.125em
    }
}

@media screen and (max-width: 768px) {
    #hd .sec-kv .hd-bg img {
        width: 180%;
        margin-left: -40%;
        margin-top: 1%;
        left: 0;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        position: relative;
        max-width: inherit !important;
    }

    #hd .sec-kv .hd-title p {
        font-size: 1em
    }

    #hd .sec-kv .hd-bg {
        margin-bottom: 0;
    }

    #hd .sec-kv .hd-bg h2 {
        position: relative;
        left: 0;
        top: 0;
        transform: translate(0%, 0%);
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-kv .hd-bg {
        margin-bottom: 0%
    }

    #hd .sec-kv .hd-bg img {
        width: 180%;
        margin-left: -40%;
    }

    #hd .sec-kv .hd-title h2 {
        font-size: 1.25em
    }

    #hd .sec-kv .hd-title h2 strong {
        font-size: 1.6em
    }

    #hd .sec-kv .hd-bg h2 {
        font-size: 1.25em
    }

    #hd .sec-kv .hd-bg h2 strong {
        font-size: 1.6em
    }
}


#hd .sec-slider {
    display: flex;
    /* flex-direction:column-reverse; */
    padding: 0;
    position: relative;
    overflow: hidden;
    background: #fff;
    margin: 1vw 0;
}


#hd .sec-video {
    padding: 0;
    position: relative;
    overflow: hidden
}

#hd .sec-video .hd-container {
    position: relative
}

#hd .sec-video .vid-control {
    right: auto;
    left: 5%;
    bottom: 55px
}

#hd .sec-video .btn-container {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto 36px;
    z-index: 2;
    pointer-events: none
}

#hd .sec-video .hd-btn {
    font-family: "TTNormsProRegular", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.125em;
    letter-spacing: 0;
    background: #161616;
    border-radius: 2em;
    padding: .75em .75em .75em 1em;
    border: none;
    color: white;
    pointer-events: all;
    box-shadow: none;
    transition: background 0.25s
}

#hd .sec-video .hd-btn span {
    display: inline-block;
    vertical-align: middle;
    width: 1.4em;
    height: 1.4em;
    border-radius: 1em;
    background: white;
    margin-left: 0.5em;
    margin-top: -.15em;
    position: relative
}

#hd .sec-video .hd-btn span:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #000000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 2px;
    margin: auto
}

#hd .sec-video .hd-btn:hover,
#hd .sec-video .hd-btn:focus-visible {
    background: rgba(0, 0, 0, 0.5)
}

@media screen and (max-width: 1024px) {
    #hd .sec-video .btn-container {
        margin-bottom: 10px
    }

    #hd .sec-video .vid-control {
        bottom: 26px
    }
}

@media screen and (max-width: 620px) {
    #hd .sec-video .btn-container {
        position: relative;
        margin: 10px auto
    }

    #hd .sec-video .vid-control {
        bottom: 5%
    }
}

#hd .sec-award {
    padding-bottom: 0;
    background-color: #d1c8c2;
    background-image: -moz-linear-gradient(180deg, #d1c8c2, #d7cac2 40vw);
    background-image: -webkit-linear-gradient(180deg, #d1c8c2, #d7cac2 40vw);
    background-image: linear-gradient(180deg, #d1c8c2, #d7cac2 40vw);
    position: relative;
    overflow: hidden
}

#hd .sec-award .hd-scroller {
    padding-top: 40vw;
    max-width: 2560px;
    margin: 0 auto
}

#hd .sec-award .hd-logo {
    position: absolute;
    left: 60.35%;
    bottom: 13.6%;
    width: 65px;
    height: 65px;
    z-index: 10
}

#hd .sec-award .hd-logo svg {
    position: relative;
    width: 100%;
    height: 100%;
    outline: none
}

#hd .sec-award .hd-logo svg path {
    fill: transparent;
    stroke: url(#pageContent-logo-gradient);
    stroke-width: 28px;
    stroke-dasharray: 1260;
    stroke-dashoffset: 1260;
    stroke-linecap: round
}

#hd .sec-award figure {
    width: 2560px;
    height: 0;
    padding-bottom: 1240px;
    max-width: none !important;
    position: absolute;
    left: 50%;
    bottom: 0;
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

#hd .sec-award figure:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 10%;
    background-color: rgba(215, 202, 194, 0);
    background-image: -moz-linear-gradient(0deg, rgba(215, 202, 194, 0), #d7cac2);
    background-image: -webkit-linear-gradient(0deg, rgba(215, 202, 194, 0), #d7cac2);
    background-image: linear-gradient(0deg, rgba(215, 202, 194, 0), #d7cac2);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    user-select: none
}

#hd .sec-award figure img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover
}

#hd .sec-award figure .hd-pd {
    z-index: 3
}

#hd .sec-award .hd-container {
    padding: 10% 0;
    position: relative;
    z-index: 2
}

#hd .sec-award .hd-content {
    padding-left: 20px
}

#hd .sec-award .hd-logo-award {
    width: 340px;
    height: auto;
    margin: 40px 0 16px
}

#hd .sec-award blockquote {
    max-width: 30em;
    text-shadow: 0 0 3px #d7cac2, 0 0 5px #d7cac2
}

#hd .sec-award blockquote p {
    font-family: "TTNormsProRegular", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.75
}

@media screen and (max-width: 1440px) {
    #hd .sec-award .hd-container {
        padding: 8% 0 16%;
        position: relative;
        z-index: 2
    }
}

@media screen and (max-width: 1024px) {
    #hd .sec-award .hd-logo-award {
        margin-top: 30px
    }

    #hd .sec-award figure {
        width: 100%;
        height: 100%
    }

    #hd .sec-award .hd-logo {
        left: 76.5%;
        bottom: 13.8%
    }
}

@media screen and (max-width: 1023px) {
    #hd .sec-award .hd-scroller {
        padding-top: 80vw
    }

    #hd .sec-award .hd-logo {
        width: 4vw;
        height: 4vw;
        left: 0;
        right: 0;
        bottom: 14%;
        margin: 0 auto
    }

    #hd .sec-award .hd-container {
        padding: 8% 0
    }

    #hd .sec-award .hd-content {
        width: 100%;
        max-width: 40em;
        padding-left: 0;
        margin: 0 auto
    }

    #hd .sec-award .hd-logo-award {
        margin-top: 40px
    }

    #hd .sec-award figure {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        margin-top: -38%;
        position: relative
    }

    #hd .sec-award figure img {
        object-position: 72.5% bottom
    }
}

@media screen and (max-width: 768px) {
    #hd .sec-award .hd-container {
        padding: 10% 0
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-award figure {
        width: 150%;
        height: 0;
        padding-bottom: 150%;
        margin-top: -38%;
        position: relative
    }

    #hd .sec-award .hd-container {
        padding: 15% 0
    }
}

#hd .sec-wifi7,
#hd .sec-aimesh,
#hd .sec-wifi7new {
    background-color: #f2f2f2;
    background-image: -moz-linear-gradient(180deg, #f2f2f2 90%, #dde4ea);
    background-image: -webkit-linear-gradient(180deg, #f2f2f2 90%, #dde4ea);
    background-image: linear-gradient(180deg, #f2f2f2 90%, #dde4ea);
    padding: 0;
    padding-bottom: 8%;
    position: relative;
    overflow: hidden
}

#hd .sec-wifi7 .hd-scroller,
#hd .sec-aimesh .hd-scroller,
#hd .sec-wifi7new .hd-scroller {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 15% 0;
    padding: 15% 0 0 0;
    position: relative;
    overflow: hidden;
    z-index: 2
}

@media screen and (max-width: 1024px) {

    #hd .sec-wifi7 .hd-scroller,
    #hd .sec-aimesh .hd-scroller,
    #hd .sec-wifi7new .hd-scroller {
        min-height: inherit;
    }
}

#hd .sec-wifi7 .hd-slogan,
#hd .sec-aimesh .hd-slogan {
    font-family: "TTNormsProBold", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 3.875vw;
    line-height: 1;
    text-align: center;
    background-color: #0044cd;
    background-image: url("../img/wifi7/bg-txt.jpg");
    background-repeat: no-repeat;
    background-position: calc(50% - 1em) calc(50% - .62em);
    background-size: 50%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-font-smoothing: antialiased
}

#hd .sec-wifi7new .hd-slogan {
    font-family: "TTNormsProBold", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 3.875vw;
    line-height: 1;
    text-align: center;
    background-color: #8ac5f8;
    background-image: url("../img/wifi7/bg-txt-light.jpg");
    background-repeat: no-repeat;
    background-position: calc(50% - 0.6em) calc(50% - .62em);
    background-size: 110%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-font-smoothing: antialiased
}

#hd .sec-wifi7 .hd-slogan strong,
#hd .sec-aimesh .hd-slogan strong,
#hd .sec-wifi7new .hd-slogan strong {
    display: block;
    font-size: 3.45em;
    font-size: 2em;
    /* font-weight:normal;
    background-color:#528fc8;
    background-image:-moz-linear-gradient(58deg, #528fc8 20%,#47a4dd 80%);
    background-image:-webkit-linear-gradient(58deg, #528fc8 20%,#47a4dd 80%);
    background-image:linear-gradient(58deg, #528fc8 20%,#47a4dd 80%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; */
}


#hd .sec-wifi7 .hd-panel,
#hd .sec-aimesh .hd-panel,
#hd .sec-wifi7new .hd-panel {
    padding-bottom: 3%;
    position: relative
}

#hd .sec-wifi7 .hd-img-container,
#hd .sec-aimesh .hd-img-container {
    width: 92%;
    margin-left: -8.5%;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 803px;
}

#hd .sec-aimesh .hd-img-container img.pic_design {
    max-width: 803px !important;
}

#hd .sec-wifi7new .hd-img-container {
    width: 50%;
    margin-left: 25%;
    width: 40%;
    margin-left: 30%;
    position: absolute;
    top: 20%;
    left: 0;
    /*background: rgba(0,0,0,0.2);*/
}

#hd .sec-wifi7 .hd-img-container img,
#hd .sec-aimesh .hd-img-container img,
#hd .sec-wifi7new .hd-img-container img {
    width: 100%
}

#hd .sec-wifi7 .hd-container,
#hd .sec-aimesh .hd-container,
#hd .sec-wifi7new .hd-container {
    position: relative;
    z-index: 2
}

#hd .sec-wifi7 .hd-content,
#hd .sec-aimesh .hd-content,
#hd .sec-wifi7new .hd-content {
    padding-left: 3%;
    margin-left: auto
}

#hd .sec-wifi7 .hd-content p,
#hd .sec-aimesh .hd-content p,
#hd .sec-wifi7new .hd-content p {
    margin-bottom: 1em;
    margin-right: -2em
}

#hd .sec-wifi7 .hd-feature-container,
#hd .sec-aimesh .hd-feature-container,
#hd .sec-wifi7new .hd-feature-container {
    flex-wrap: wrap;
    margin-top: 60px;
    margin-right: -3em
}

#hd .sec-wifi7new .hd-feature-container {
    max-width: 800px;
    max-width: 1000px;
    /*RT-BE58U*/
    margin-left: auto;
    margin-right: auto;
}

#hd .sec-wifi7 .hd-feature-container li,
#hd .sec-aimesh .hd-feature-container li,
#hd .sec-wifi7new .hd-feature-container li {
    width: auto;
    padding-right: 40px;
    margin-bottom: 40px
}

#hd .sec-wifi7new .hd-feature-container li {
    width: 50%;
}

#hd .sec-wifi7 .hd-feature-container li small,
#hd .sec-aimesh .hd-feature-container li small,
#hd .sec-wifi7new .hd-feature-container li small {
    font-weight: 300;
    display: block;
    font-size: 0.875em;
    margin-top: 1em
}

#hd .sec-wifi7 .disclaimer {
    /*RT-BE58U*/
    text-align: center;
}

#hd .sec-wifi7 .hd-feature-container li:nth-child(2),
#hd .sec-aimesh .hd-feature-container li:nth-child(2),
#hd .sec-wifi7new .hd-feature-container li:nth-child(2) {
    padding-right: 0
}

#hd .sec-wifi7 .hd-feature-container li:nth-child(4),
#hd .sec-aimesh .hd-feature-container li:nth-child(4),
#hd .sec-wifi7new .hd-feature-container li:nth-child(4) {
    padding-right: 0
}

#hd .sec-wifi7 .hd-feature-container li:last-child,
#hd .sec-aimesh .hd-feature-container li:last-child,
#hd .sec-wifi7new .hd-feature-container li:last-child {
    /*width:100%;
    padding-right:0*/
    /*RT-BE58U*/
}

#hd .sec-wifi7 .list-feature,
#hd .sec-aimesh .list-feature,
#hd .sec-wifi7new .list-feature {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#hd .sec-user .list-feature {
    /*RT-BE58U*/
    align-items: stretch;
}

#hd .sec-wifi7new .list-feature {
    margin-top: 50px;
}

#hd .sec-wifi7new .hd-feature-container b {
    font-size: 0.5em;
    font-weight: normal;
    text-indent: 1em;
    vertical-align: super;
}

#hd sup {
    font-size: 0.5em;

    vertical-align: super;
}

#hd .sec-wifi7 .list-feature>li,
#hd .sec-aimesh .list-feature>li,
#hd .sec-wifi7new .list-feature>li {
    width: calc(50% - 24px);
    padding: 50px 4%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    margin: 12px;
    position: relative;
    overflow: hidden
}

#hd .sec-wifi7 .list-feature>li:nth-child(2n-1),
#hd .sec-aimesh .list-feature>li:nth-child(2n-1),
#hd .sec-wifi7new .list-feature>li:nth-child(2n-1) {
    margin-top: 80px;
    margin-bottom: -80px
}

#hd .sec-wifi7 .list-feature>li:nth-child(3),
#hd .sec-aimesh .list-feature>li:nth-child(3),
#hd .sec-wifi7new .list-feature>li:nth-child(3) {
    margin-top: -74px
}

#hd .sec-wifi7 .list-feature .hd-txt,
#hd .sec-aimesh .list-feature .hd-txt {
    display: flex;
    flex-direction: column;
    justify-content: center
}

#hd .sec-wifi7 .list-feature p,
#hd .sec-aimesh .list-feature p {
    letter-spacing: 0
}

#hd .sec-wifi7 .list-feature img,
#hd .sec-aimesh .list-feature img,
#hd .sec-wifi7new .list-feature img {
    width: 100%;
    margin: 30px 0
}

#hd .sec-wifi7 .list-feature img:last-child,
#hd .sec-aimesh .list-feature img:last-child {
    margin-bottom: 0
}

#hd .sec-wifi7 .list-feature p small,
#hd .sec-aimesh .list-feature p small {
    display: block;
    line-height: 1.125
}

#hd .sec-wifi7 .list-feature .vid-control,
#hd .sec-aimesh .list-feature .vid-control {
    right: -40px;
    bottom: -40px
}

#hd .sec-wifi7new .hd-intro p {
    margin-bottom: 1em;
}

@media screen and (min-width: 2560px) {

    #hd .sec-wifi7 .hd-panel,
    #hd .sec-aimesh .hd-panel {
        padding-top: 3%
    }
}

@media screen and (max-width: 1280px) {

    #hd .sec-wifi7 .hd-feature-container li strong,
    #hd .sec-aimesh .hd-feature-container li strong {
        font-size: 2.5em
    }

    #hd .sec-wifi7 .list-feature p,
    #hd .sec-aimesh .list-feature p {
        font-size: 1em
    }
}

@media screen and (max-width: 1024px) {

    #hd .sec-wifi7 .hd-img-container,
    #hd .sec-aimesh .hd-img-container {
        margin-left: -15%
    }

    #hd .sec-wifi7 .hd-content,
    #hd .sec-aimesh .hd-content {
        padding-left: 0
    }

    #hd .sec-wifi7 .hd-content p,
    #hd .sec-aimesh .hd-content p {
        margin-right: 0
    }

    #hd .sec-wifi7 .hd-feature-container,
    #hd .sec-aimesh .hd-feature-container {
        margin-top: 20px;
        margin-right: 0
    }

    #hd .sec-wifi7 .hd-feature-container li,
    #hd .sec-aimesh .hd-feature-container li {
        margin-bottom: 10px
    }

    #hd .sec-wifi7 .list-feature p,
    #hd .sec-aimesh .list-feature p {
        font-size: 0.875em
    }

    #hd .sec-wifi7 .list-feature .vid-control,
    #hd .sec-aimesh .list-feature .vid-control {
        bottom: -50px
    }
}

@media screen and (max-width: 1023px) {

    #hd .sec-wifi7 .hd-slogan,
    #hd .sec-aimesh .hd-slogan {
        font-size: 6vw
    }

    #hd .sec-wifi7 .hd-panel,
    #hd .sec-aimesh .hd-panel {
        padding-bottom: 0
    }

    #hd .sec-wifi7 .hd-feature-container li:nth-child(2),
    #hd .sec-aimesh .hd-feature-container li:nth-child(2) {
        padding-right: 40px
    }

    #hd .sec-wifi7 .hd-feature-container li:last-child,
    #hd .sec-aimesh .hd-feature-container li:last-child {
        width: auto
    }

    #hd .sec-wifi7 .hd-img-container,
    #hd .sec-aimesh .hd-img-container {
        width: 140%;
        max-width: none !important;
        margin: 0 -20% -25%;
        position: relative
    }

    #hd .sec-wifi7 .hd-content,
    #hd .sec-aimesh .hd-content {
        width: 100%
    }
}

@media screen and (max-width: 768px) {

    #hd .sec-wifi7,
    #hd .sec-aimesh {
        padding-bottom: 10%
    }

    #hd .sec-wifi7 .hd-feature-container li,
    #hd .sec-aimesh .hd-feature-container li {
        margin-bottom: 20px
    }

    #hd .sec-wifi7 .list-feature,
    #hd .sec-aimesh .list-feature {
        width: 90%;
        max-width: 400px;
        padding-top: 0;
        padding-right: 0;
        margin: 0 auto
    }

    #hd .sec-wifi7 .list-feature>li,
    #hd .sec-aimesh .list-feature>li,
    #hd .sec-wifi7new .list-feature>li {
        width: 100%;
        padding: 30px 20px;
        margin: 10px 0 !important
    }
}

@media screen and (max-width: 620px) {

    #hd .sec-wifi7 .hd-feature-container,
    #hd .sec-aimesh .hd-feature-container {
        flex-wrap: wrap;
        margin-top: 40px
    }

    #hd .sec-wifi7 .hd-feature-container li,
    #hd .sec-aimesh .hd-feature-container li {
        width: auto
    }
}

@media screen and (max-width: 480px) {

    #hd .sec-wifi7,
    #hd .sec-aimesh {
        padding-bottom: 15%
    }

    #hd .sec-wifi7 .hd-slogan,
    #hd .sec-aimesh .hd-slogan {
        font-size: 8vw
    }

    #hd .sec-wifi7 .hd-img-container,
    #hd .sec-aimesh .hd-img-container {
        width: 185%;
        margin: 0 -40% -30%
    }

    #hd .sec-wifi7 .hd-feature-container li strong,
    #hd .sec-aimesh .hd-feature-container li strong {
        font-size: 2em
    }

    #hd .sec-wifi7 .hd-feature-container li:first-child,
    #hd .sec-aimesh .hd-feature-container li:first-child {
        padding-right: 20px
    }

    #hd .sec-wifi7 .hd-feature-container li:nth-child(2),
    #hd .sec-aimesh .hd-feature-container li:nth-child(2) {
        padding-right: 0
    }
}

#hd .sec-aimesh {
    /*background:#e5dfdd !important;*/
    background: #e8e2d5 !important;
    z-index: 2;
    padding-top: 5vw;
}

#hd .sec-aimesh:before,
#hd .sec-aimesh:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 80%;
    background: url(../img/bg-design.jpg) center 101% no-repeat;
    background-size: 100% auto;
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
    user-select: none;
    z-index: -1
}

#hd .sec-aimesh .hd-img-container {
    width: 38%;
    left: auto;
    right: 10vw;
}

#hd .sec-aimesh .hd-content {
    max-width: 26em;
    padding-left: 0;
    margin-left: 0
}

#hd .sec-aimesh .hd-content p {
    margin-right: 0
}

#hd .sec-aimesh .hd-feature-container {
    flex-wrap: wrap;
    margin-right: 0
}

#hd .sec-aimesh .hd-feature-container li {
    width: 100%
}

#hd .sec-aimesh .hd-feature-container img {
    width: 12vw;
    max-width: 160px !important;
    min-width: 150px !important;
    margin: 0 0 .75em
}

#hd .sec-aimesh .list-feature>li {
    background: rgba(216, 208, 202, 0.6);
    background: rgba(255, 255, 255, 0.6);
}

#hd .sec-aimesh .list-feature>li:nth-child(2n) {
    margin-top: 80px;
    margin-bottom: -58px
}

#hd .sec-aimesh .list-feature>li:nth-child(2n-1) {
    margin: 12px
}

#hd .sec-aimesh .list-feature>li:nth-child(3) {
    margin-top: -70px
}

#hd .sec-aimesh .list-feature>li:last-child {
    padding-bottom: 0
}

#hd .sec-aimesh .list-feature>li:last-child img,
#hd .sec-aimesh .list-feature>li:last-child figure {
    margin-top: 0
}

#hd .sec-aimesh .list-feature figure {
    margin-top: 30px;
    margin-top: 60px;
    /*RT-BE58U*/
    margin-bottom: 40px;
    /*RT-BE58U*/
    position: relative
}

#hd .sec-aimesh .list-feature figure img {
    margin: 0
}

#hd .sec-aimesh .list-feature figure .hd-ui-2 {
    position: absolute;
    top: 0;
    left: 0
}

#hd .sec-aimesh .list-feature .hd-btn {
    margin-right: auto
}

#hd .sec-aimesh .hd-ani {
    position: relative
}

#hd .sec-aimesh .hd-ani img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#hd .sec-aimesh .hd-ani img:first-child {
    position: relative
}

#hd .sec-aimesh .hd-ani .hd-ui-2 {
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 3.6s;
    -webkit-animation-name: quickFadeInOut;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: both;
    animation-delay: 0s;
    animation-duration: 3.6s;
    animation-name: quickFadeInOut;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both
}

#hd .sec-aimesh .hd-ani.is-reduced-motion .hd-ui-2 {
    animation-play-state: paused !important
}

@media screen and (max-width: 1023px) {
    #hd .sec-aimesh .hd-content {
        max-width: none
    }

    #hd .sec-aimesh .hd-feature-container li {
        width: auto
    }

    #hd .sec-aimesh .hd-img-container {
        width: 100%;
        left: 0;
        right: 0;
        margin: 0%
    }
}

@media screen and (max-width: 768px) {
    #hd .sec-aimesh .list-feature>li:nth-child(1) {
        order: 1
    }

    #hd .sec-aimesh .list-feature>li:nth-child(2) {
        order: 3
    }

    #hd .sec-aimesh .list-feature>li:nth-child(3) {
        order: 2
    }

    #hd .sec-aimesh .list-feature>li:nth-child(4) {
        order: 4
    }

    #hd .sec-aimesh .hd-img-container {
        width: 140%;
        margin: 0%
    }
}

@media screen and (max-width: 620px) {
    #hd .sec-aimesh .hd-feature-container li:last-child {
        width: 100%
    }
}

#hd .sec-performance {
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
    z-index: 2;
    margin-bottom: -200px;
}

#hd .sec-performance .hd-intro p {
    max-width: 50em;
    margin: 0 auto 40px
}

#hd .sec-performance .hd-content {
    margin-left: 3%;
    margin-right: -3%;
    padding: 20px 40px;
    position: relative
}

#hd .sec-performance .hd-content p {
    line-height: 1.5;
    margin-right: -1em
}

#hd .sec-performance h3 {
    line-height: 1.3;
    margin-bottom: 0.5em
}

#hd .sec-performance .panel-coverage {
    padding: 3% 0
}

#hd .sec-performance .panel-coverage figure {
    padding-left: 5%;
    position: relative
}

#hd .sec-performance .panel-coverage figure .hd-img-container {
    position: relative
}

#hd .sec-performance .panel-coverage figure img {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2
}

#hd .sec-performance .panel-coverage figure img.hd-pd {
    margin-left: auto;
    margin-right: 0;
    position: relative;
    z-index: 1
}

#hd .sec-performance .panel-coverage figure li {
    font-family: "TTNormsProRegular", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    letter-spacing: .06em;
    position: absolute;
    left: 0;
    margin-top: -0.5em;
    margin-left: -2em;
    z-index: 3
}

#hd .sec-performance .panel-coverage figure li:nth-child(1) {
    top: 33.5%
}

#hd .sec-performance .panel-coverage figure li:nth-child(2) {
    top: 51%
}

#hd .sec-performance .panel-coverage figure li:nth-child(3) {
    top: 76%
}

@media screen and (max-width: 1440px) {
    #hd .sec-performance .hd-tag {
        margin-bottom: 10px
    }

    #hd .sec-performance h3 {
        margin-bottom: 0.25em
    }

    #hd .sec-performance .panel-coverage {
        padding-top: 0
    }
}

@media screen and (max-width: 1024px) {
    #hd .sec-performance .panel-coverage .hd-content {
        padding-left: 0
    }
}

@media screen and (max-width: 1023px) {
    #hd .sec-performance {
        margin-bottom: -100px;
    }

    #hd .sec-performance .hd-container {
        flex-direction: column
    }

    #hd .sec-performance .hd-content {
        width: 100%;
        padding: 0;
        margin: 0
    }

    #hd .sec-performance .hd-content p {
        margin-right: 0
    }

    #hd .sec-performance .panel-coverage figure {
        width: 90%;
        max-width: 600px;
        margin: 40px auto 0
    }
}

@media screen and (max-width: 620px) {
    #hd .sec-performance .panel-coverage li {
        font-size: 0.75em
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-performance .panel-coverage figure {
        padding-left: 3em;
        margin-right: 0
    }

    #hd .sec-performance .panel-coverage li {
        letter-spacing: 0
    }
}

#hd .sec-cpu {
    position: relative;
    overflow: hidden;
    z-index: 3;
}

#hd .sec-cpu .hd-left {
    padding-right: 12px
}

#hd .sec-cpu .hd-left .hd-img-container {
    margin-left: auto
}

#hd .sec-cpu .hd-right {
    padding-left: 12px
}

#hd .sec-cpu .hd-cotnent {
    padding: 10px 8% 10% 27%
}

#hd .sec-cpu h3 {
    line-height: 1.3;
    margin-bottom: 0.5em
}

#hd .sec-cpu .hd-img-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 24px
}

#hd .sec-cpu .hd-img-container img {
    width: 100%
}

@media screen and (max-width: 1440px) {
    #hd .sec-cpu .hd-cotnent {
        padding-left: 160px
    }
}

@media screen and (max-width: 1280px) {
    #hd .sec-cpu .hd-cotnent {
        padding-left: 100px
    }
}

@media screen and (max-width: 1024px) {
    #hd .sec-cpu .hd-left {
        padding-right: 10px
    }

    #hd .sec-cpu .hd-left .hd-img-container {
        width: 100%
    }

    #hd .sec-cpu .hd-right {
        padding-left: 10px
    }

    #hd .sec-cpu .hd-cotnent {
        padding-left: 3.5%
    }

    #hd .sec-cpu .hd-img-container {
        margin-bottom: 20px
    }
}

@media screen and (max-width: 1023px) {
    #hd .sec-cpu .hd-left {
        width: 100%;
        padding-right: 0
    }

    #hd .sec-cpu .hd-right {
        width: 100%;
        padding-left: 0
    }

    #hd .sec-cpu .hd-right .hd-img-container {
        width: 100%
    }

    #hd .sec-cpu .hd-cotnent {
        padding: 0 0 40px
    }

    #hd .sec-cpu .hd-img-container {
        max-width: 600px;
        margin: 0 auto 20px !important
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-cpu {
        padding-top: 18%
    }
}

#hd .sec-connectivity {
    position: relative;
    overflow: hidden;
}

#hd .sec-connectivity .hd-title {
    position: relative;
    z-index: 2
}

#hd .sec-connectivity h3 {
    line-height: 1.3;
    margin-bottom: 0.5em
}

#hd .sec-connectivity .hd-title p {
    margin-bottom: 1em;
}

#hd .sec-connectivity .hd-d-1023-block {
    margin-bottom: 30px;
}

#hd .sec-connectivity figure {
    width: 100%;
    margin: -3% auto 5%;
    position: relative
}

#hd .sec-connectivity figure img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#hd .sec-connectivity figure img.hd-pd {
    position: relative
}

#hd .sec-connectivity figure .hd-mark {
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.25s ease
}

#hd .sec-connectivity figure .hd-mark[aria-current="true"] {
    opacity: 1;
    pointer-events: all;
    user-select: unset
}

#hd .sec-connectivity figure .hd-mark[aria-current="true"]+.hd-ripple {
    opacity: 1;
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: hintPort;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-fill-mode: both;
    animation-delay: 0s;
    animation-duration: 1s;
    animation-name: hintPort;
    animation-timing-function: ease;
    animation-iteration-count: 4;
    animation-fill-mode: both
}

#hd .sec-connectivity figure .hd-mark[aria-current="true"]+.hd-ripple+.hd-ripple {
    opacity: 1;
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: hintPort;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-fill-mode: both;
    animation-delay: 0s;
    animation-duration: 1s;
    animation-name: hintPort;
    animation-timing-function: ease;
    animation-iteration-count: 4;
    animation-fill-mode: both
}

#hd .sec-connectivity .list-port li {
    cursor: pointer;
    width: 100%;
    text-align: center;
}

#hd .sec-connectivity .list-port li[aria-current="true"] .hd-frame {
    box-shadow: 0 0 0 2px #58b1f1, 0 0 8px #0070e4, 0 0 8px #0070e4
}

#hd .sec-connectivity .list-port li:nth-child(1) .hd-frame {
    background: #141531
}

#hd .sec-connectivity .list-port li:nth-child(2) .hd-frame {
    background: #06315c
}

#hd .sec-connectivity .list-port li:nth-child(3) .hd-frame {
    background: #ffffff;
    color: #000
}

@media screen and (max-width: 1023px) {
    #hd .sec-connectivity .hd-title {
        margin-bottom: 40px
    }

    #hd .sec-connectivity .list-port li {
        cursor: default
    }

    #hd .sec-connectivity .list-port li .hd-frame {
        box-shadow: none !important
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-connectivity figure {
        width: 168%;
        margin-left: -34%
    }
}

#hd .sec-port {
    position: relative;
    overflow: hidden;
    /* background: #000; */
    padding-top: 10vw;
    margin-top: -10vw;
    padding-bottom: 5vw;
}

#hd .sec-port::before {
    content: "";
    position: absolute;
    height: 100%;
    /* 或任何百分比 / 最大 / 最小寬度 */
    aspect-ratio: 1 / 1;
    /* 固定長寬比為 1:1 */
    top: 50%;
    left: 50%;
    /* 先把元素往左上推回自身中心，再水平拉寬 1.5 倍 */
    transform: translate(-50%, -50%) scaleX(1.5);
    transform-origin: center center;
    /* 從中心向外的圓形漸層：中心純白 → 邊緣純黑 */
    background: radial-gradient(circle at center,
        /* 以容器正中心為圓心 */
        rgba(28, 104, 128, 1) 0%,
        /* 0%：純白 */
        rgba(28, 104, 128, 0) 70%
        /* 100%：純黑 */
        );
}

#hd .sec-port .pic_port {
    margin-top: 3em;
}

/* spec */
#hd .sec-port .spec-wrapper {
    position: relative;
    margin-top: 5em;
}

#hd .sec-port .spec-wrapper .image img {
    margin: 0 auto;
    width: 100%;
    max-width: 766px !important;
}

#hd .sec-port .spec-wrapper p {
    position: absolute;
    text-align: left;
    font-size: 1.0em;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

#hd .sec-port .spec-wrapper p b {
    font-weight: normal;
    color: #0ddcfb;
}

#hd .sec-port .spec-wrapper p .number {
    background: #16dbff;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: #000;
    vertical-align: middle;
    font-size: 0.9em;
    font-weight: bold;
    display: none;
}

#hd .sec-port .spec-wrapper .default {}

#hd .sec-port .spec-wrapper .mobile {
    display: none;
}

#hd .sec-port .spec-wrapper .notes {
    position: absolute;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    width: 100%;
    bottom: 0;
    left: 0;
}

/*front*/
#hd .sec-port .spec-wrapper.spec-front-1 .p1 {
    top: 87%;
    left: 18%;
}

#hd .sec-port .spec-wrapper.spec-front-1 .p2 {
    top: 87%;
    left: 34%;
}

#hd .sec-port .spec-wrapper.spec-front-1 .p3 {
    top: 87%;
    left: 80%;
}

#hd .sec-port .spec-wrapper.spec-front-1 .p4 {
    top: 10%;
    left: 60%;
}

#hd .sec-port .spec-wrapper.spec-front-1 .p5 {
    top: 96%;
    left: 60%;
}

#hd .sec-port .spec-wrapper.spec-front-1 .p6 {
    top: 94%;
    left: 66%;
}

#hd .sec-port .spec-wrapper.spec-front-1 .p7 {
    top: 90%;
    left: 72%;
}

#hd .sec-port .spec-wrapper.spec-front-1 .p8 {
    top: 86%;
    left: 78%;
}

#hd .sec-port .spec-wrapper.spec-front-1 .p9 {
    top: 10%;
    left: 10%;
}

#hd .sec-port .spec-wrapper.spec-front-1 .p10 {
    top: 59%;
    left: 1%;
}

#hd .sec-port .spec-wrapper.spec-front-2 .p1 {
    top: 72%;
    left: 2%;
}

#hd .sec-port .spec-wrapper.spec-front-2 .p2 {
    top: 10%;
    left: 32%;
}

#hd .sec-port .spec-wrapper.spec-front-2 .p3 {
    top: 10%;
    left: 73%;
}

#hd .sec-port .spec-wrapper.spec-front-3 .p1 {
    top: 10%;
    left: 17%;
}

#hd .sec-port .spec-wrapper.spec-front-3 .p2 {
    top: 10%;
    left: 43%;
}

#hd .sec-port .spec-wrapper.spec-front-3 .p3 {
    top: 10%;
    left: 70%;
}

#hd .sec-port .spec-wrapper.spec-front-4 .p1 {
    top: 10%;
    left: 17%;
}

#hd .sec-port .spec-wrapper.spec-front-4 .p2 {
    top: 10%;
    left: 36%;
}

#hd .sec-port .spec-wrapper.spec-front-4 .p3 {
    top: 10%;
    left: 63%;
}

/*rear*/
#hd .sec-port .spec-wrapper.spec-rear-1 .p1 {
    top: 85%;
    left: 19%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p2 {
    top: 10%;
    left: 46%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p3 {
    top: 85%;
    left: 65%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p4 {
    top: 4%;
    left: 70%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p5 {
    top: 89%;
    left: 67%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p6 {
    top: 92%;
    left: 50%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p7 {
    top: 78%;
    left: 41%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p8 {
    top: 4%;
    left: 33%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p9 {
    top: 69%;
    left: 37%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p10 {
    top: 4%;
    left: 18%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p11 {
    top: 67%;
    left: 4%;
}

#hd .sec-port .spec-wrapper.spec-rear-1 .p12 {
    top: 79%;
    left: 11%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p1 {
    top: 4%;
    left: 69%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p2 {
    top: 61%;
    left: 66%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p3 {
    top: 68.5%;
    left: 62%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p4 {
    top: 76.5%;
    left: 57%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p5 {
    top: 83.5%;
    left: 55%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p6 {
    top: 73%;
    left: 43%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p7 {
    top: 4%;
    left: 43%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p8 {
    top: 68.5%;
    left: 33%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p9 {
    top: 61%;
    left: 25%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p10 {
    top: 4%;
    left: 18%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p11 {
    top: 61%;
    left: 4%;
}

#hd .sec-port .spec-wrapper.spec-rear-2 .p12 {
    top: 73%;
    left: 11%;
}

/*system*/
#hd .sec-port .spec-wrapper.spec-system .p1 {
    top: 55%;
    left: 24%;
    width: 50%;
    max-width: 160px;
}

#hd .sec-port .spec-wrapper.spec-system .p2 {
    top: 71%;
    left: 7%;
    width: 50%;
    max-width: 275px;
}

#hd .sec-port .spec-wrapper.spec-system .p3 {
    top: 83%;
    left: 37%;
    width: 50%;
    max-width: 270px;
}

#hd .sec-port .spec-wrapper.spec-system .p4 {
    top: 73%;
    left: 53%;
}

#hd .sec-port .spec-wrapper.spec-system .p5 {
    top: 64%;
    left: 62%;
}

#hd .sec-port .spec-wrapper.spec-system .p6 {
    top: 54%;
    left: 68%;
}

#hd .sec-port .spec-wrapper.spec-system .p7 {
    top: 36%;
    left: 15%;
}

#hd .sec-port .spec-wrapper.spec-system .p8 {
    top: 41%;
    left: 77%;
}

#hd .sec-port .spec-wrapper.spec-system .p9 {
    top: 50%;
    left: 77%;
}

#hd .sec-port .spec-wrapper.spec-system .p10 {
    top: 80.5%;
    left: 14%;
}



@media (max-width: 1023px) {
    #hd .sec-port .spec-wrapper {
        margin-top: 20px;
    }

    #hd .sec-port .spec-wrapper .default {
        display: none;
    }

    #hd .sec-port .spec-wrapper .mobile {
        display: block;

    }

    #hd .sec-port .spec-wrapper p .number {
        display: inline-block;
    }

    #hd .sec-port .spec-wrapper p {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin-bottom: 15px;
        line-height: 1.5;
        max-width: inherit !important;
    }

    #hd .sec-port .spec-wrapper .notes {
        position: relative;
        bottom: auto;
        left: auto;
    }
}

@media (max-width: 680px) {
    #hd .sec-port .spec-wrapper .image img {
        width: 130%;
        margin: 0 0 -5% -15%;
    }
}


@media screen and (max-width: 768px) {

    #hd .sec-port,
    #hd .sec-setup,
    #hd .sec-toolless {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

#hd .hd-scroller {
    padding: 15% 0 0
}

#hd .hd-scroller.removeScroll {
    padding: 0;
}

#hd .hd-scroller .hd-panel {
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
    position: relative
}

#hd .hd-scroller .hd-slogan {
    min-width: 100%;
    font-family: "TTNormsProBold", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 7vw;
    flex-shrink: 0;
    margin-bottom: -0.4em;
    margin-bottom: 3em;
    opacity: 0.32;
}

#hd .hd-scroller.removeScroll .hd-slogan {
    margin-bottom: 0em;
}

#hd .hd-scroller .slogan-step {
    position: absolute
}

@media screen and (min-width: 2560px) {
    #hd .hd-scroller .hd-slogan {
        font-size: 7em;
    }
}


#hd .sec-security {
    padding-bottom: 0;
    background: #e6ebf0
}

#hd .sec-security .hd-intro {
    position: relative;
    z-index: 2
}

#hd .sec-security .hd-intro p {
    margin-bottom: 1em
}

#hd .sec-security .hd-indicator-container {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

#hd .sec-security .hd-indicator-container .border-bottom {
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 26vw;
    left: 0;
    right: 0
}

#hd .sec-security .hd-indicator-container ul {
    width: 40%
}

#hd .sec-security .hd-indicator-container li {
    width: 33.3333%;
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-weight: normal;
    font-size: 1.4em;
    color: #666;
    line-height: 1.25;
    letter-spacing: .018em;
    text-align: center;
    padding: .5em;
    position: relative;
    cursor: pointer
}

#hd .sec-security .hd-indicator-container li:before,
#hd .sec-security .hd-indicator-container li:after {
    content: '';
    display: block;
    position: absolute
}

#hd .sec-security .hd-indicator-container li:before {
    width: .4em;
    height: .4em;
    border-radius: 1em;
    border: 1px solid #666;
    background: #f3f3f3;
    top: 100%;
    left: 0;
    right: 0;
    margin: -.2em auto 0
}

#hd .sec-security .hd-indicator-container li:after {
    width: 1.5em;
    height: 1em;
    background: url(../img/security/arrow.png) center no-repeat;
    background-size: contain;
    top: 100%;
    left: 100%;
    margin-top: -.4em;
    margin-left: -0.75em;
    opacity: 0;
    -ms-transform: translate(-20px, 0);
    -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
    transition: opacity 0.25s, transform 0.25s
}

#hd .sec-security .hd-indicator-container li:last-child:after {
    display: none
}

#hd .sec-security .hd-indicator-container li[aria-current="true"] {
    color: #4152d2
}

#hd .sec-security .hd-indicator-container li[aria-current="true"]:before {
    background: #4152d2
}

#hd .sec-security .hd-indicator-container li[aria-current="true"]:after {
    opacity: 1;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#hd .sec-security .hd-panel-container {
    height: 300vh;
    position: relative
}

#hd .sec-security .hd-panel {
    width: 100%;
    height: 100vh;
    background: #e6ebf0;
    padding-top: 31%;
    position: absolute;
    top: 0;
    left: 0
}

#hd .sec-security .hd-panel:nth-child(2),
#hd .sec-security .hd-panel:nth-child(3) {
    opacity: 0
}

#hd .sec-security .hd-bg {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -12%;
    overflow: hidden
}

#hd .sec-security .hd-bg img {
    width: 100%
}

#hd .sec-security .hd-content {
    max-width: 50em;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

#hd .sec-security .hd-content p {
    line-height: 1.5
}

@media screen and (max-width: 1280px) {
    #hd .sec-security .hd-indicator-container li {
        font-size: 1.125em
    }
}

@media screen and (max-width: 1024px) {
    #hd .sec-security .hd-content p {
        font-size: 1em
    }
}

@media screen and (max-width: 1023px) {
    #hd .sec-security .hd-indicator-container ul {
        width: 70%
    }

    #hd .sec-security .hd-indicator-container .border-bottom {
        top: 44vw
    }

    #hd .sec-security .hd-panel {
        padding-top: 55%
    }

    #hd .sec-security .hd-bg {
        padding-bottom: 70%
    }

    #hd .sec-security .hd-bg img {
        width: 140%;
        max-width: none !important;
        margin-left: -20%
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-security .hd-indicator-container ul {
        width: 100%
    }

    #hd .sec-security .hd-indicator-container .border-bottom {
        top: 64vw
    }

    #hd .sec-security .hd-panel {
        padding-top: 85%
    }

    #hd .sec-security .hd-bg {
        padding-bottom: 100%
    }

    #hd .sec-security .hd-bg img {
        width: 200%;
        margin-left: -50%
    }
}

#hd .sec-aiprotection {
    background: #e6ebf0;
    position: relative;
    overflow: hidden
}

#hd .sec-aiprotection .hd-intro p {
    max-width: 50em;
    margin: 0 auto 20px
}

#hd .sec-aiprotection .hd-main {
    width: 120%;
    max-width: none !important;
    margin-left: -10%;
    margin-bottom: 20px
}

#hd .sec-aiprotection .list-aiprotection .hd-frame {
    padding-bottom: 115%
}

#hd .sec-aiprotection .list-aiprotection .hd-frame img {
    width: 100%
}

#hd .sec-aiprotection .list-aiprotection picture {
    display: block
}

#hd .sec-aiprotection .list-aiprotection li:nth-child(1) .hd-frame {
    background: #343434;
    color: white
}

#hd .sec-aiprotection .list-aiprotection li:nth-child(2) .hd-frame {
    background: #151a1e;
    color: white
}

#hd .sec-aiprotection .list-aiprotection li:nth-child(3) .hd-frame {
    background: #d3d8d1
}

@media screen and (max-width: 1023px) {
    #hd .sec-aiprotection .list-aiprotection .hd-frame {
        padding-bottom: 120%
    }
}

@media screen and (max-width: 620px) {
    #hd .sec-aiprotection .hd-main {
        width: 160%;
        margin-left: -30%
    }
}

#hd p.note {
    font-size: 12px;
    line-height: 1.2em !important;
    margin: 10px 0 10px;
}


#hd span.txt_red {
    color: #b70000;
    font-weight: bold;
}

#hd span.txt_grey {
    color: #8a8a8a;
    font-weight: bold;
}


#hd .sec-control {
    position: relative;
    overflow: hidden;
    padding-top: 0;
}

#hd .sec-control .hd-container {
    margin-bottom: 80px;
}

#hd .sec-control .hd-container .openlist {
    margin-bottom: 2em;
}

#hd .sec-control .hd-intro {
    padding-bottom: 8%;
    position: relative;
    z-index: 2
}

#hd .sec-control .hd-intro p {
    max-width: 50em;
    margin: 0 auto 1em
}

#hd .sec-control .hd-content {
    padding-left: 2.5%;
    border-bottom: 1px solid #949494;
    padding-bottom: 10px;
}

#hd .sec-control .list-feature {
    margin-top: 0%
}

#hd .sec-control .list-feature>li {
    padding: 40px 40px;
    padding: 20px 20px;
    border-radius: 10px;
    background: #f5f4f6;
    background: #fff;
    /*border-bottom: 1px solid #ccc;*/
    margin-bottom: 20px;
    cursor: pointer
}

#hd .sec-control .list-feature>li:hover h3,
#hd .sec-control .list-feature>li:focus-visible h3 {
    color: #386688
}

#hd .sec-control .list-feature>li:hover h3:after,
#hd .sec-control .list-feature>li:focus-visible h3:after {
    border-color: #3d54d8
}

#hd .sec-control .list-feature>li[aria-expanded="true"] {
    color: white;
    background: #3d54d8;
    cursor: default
}

#hd .sec-control .list-feature>li[aria-expanded="true"] .hd-txt {
    display: block;
    -webkit-animation-delay: .1s;
    -webkit-animation-duration: .4s;
    -webkit-animation-name: fadeInUpSmall;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
    animation-delay: .1s;
    animation-duration: .4s;
    animation-name: fadeInUpSmall;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode: both
}

#hd .sec-control .list-feature>li[aria-expanded="true"] h3 {
    color: white !important
        /*color:386688 !important*/
}

#hd .sec-control .list-feature>li[aria-expanded="true"] h3:after {
    border-color: white;
    opacity: 0
}

#hd .sec-control .list-feature h3 {
    margin-bottom: 0;
    padding-right: 1.5em;
    position: relative;
}

#hd .sec-control .list-feature h3:after {
    content: '+';
    border-radius: 50%;
    background: #b0d0e8;
    display: block;
    width: 1em;
    height: 1em;
    font-size: 1.6em;
    text-align: center;
    line-height: 1em;
    /*border:solid #000;
    border-width:0 3px 3px 0;*/
    position: absolute;
    top: -10px;
    right: 0;
    /*-ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);*/
    transition: border-color 0.3s
}

#hd .sec-control .list-feature .hd-txt {
    display: none;
    margin-top: 0.5em
}

#hd .sec-control .list-feature p {
    font-size: 0.875em;
    font-size: 1em;
}

#hd .sec-control figure {
    margin-left: 2%;
    position: relative;
    padding: 0px 20px;
    text-align: right;
}

#hd .sec-control figure img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.25s
}

#hd .sec-control figure img:first-child {
    position: relative
}

#hd .sec-control figure img[aria-current="true"] {
    opacity: 1;
    transition: opacity 0s
}

#hd .sec-control .protection-ui {
    display: none;
}

#hd .sec-control .hd-content .openbox {}

#hd .sec-control .hd-content .openbox .cboxElement {
    display: inline-block;
    float: right;
    margin-bottom: 20px;
    /*     border-radius: 50%;
    color: #000;
    background: #bfbfbf url('../img/btn_play.svg') no-repeat center center;
    background-size: 50%;
    display: block;
    width: 1.5em;
    height: 1.5em;
    font-size: 1.6em;
    text-align: center;
    line-height: 1.5em;
    position: absolute;
    top: 0px;
    right: 0;
    transition: border-color 0.3s; */
}

#hd .sec-control h3 {
    padding: 0;
    font-size: 3em;
}

#hd .sec-control .hd-content .openbox h3 {
    padding: 10px 2em 10px 0;
    font-size: 1.5em;
}

#hd .sec-control .hd-content .openbox h4 {
    font-family: "TTNormsProBold", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}

#hd .sec-control .hd-content .openbox a.btn_on {
    border-radius: 50%;
    color: #000;
    background: #bfbfbf url('../img/btn_on.svg') no-repeat center center;
    background-size: 50%;
    display: block;
    width: 1.5em;
    height: 1.5em;
    font-size: 1.6em;
    text-align: center;
    line-height: 1.5em;
    position: absolute;
    top: 0px;
    right: 0;
    transition: border-color 0.3s;
    display: none;
}

#hd .sec-control .hd-content .openbox a.btn_off {
    border-radius: 50%;
    color: #000;
    background: #eed2a1 url('../img/btn_off.svg') no-repeat center center;
    background-size: 50%;
    display: block;
    width: 1.5em;
    height: 1.5em;
    font-size: 1.6em;
    text-align: center;
    line-height: 1.5em;
    position: absolute;
    top: 0px;
    right: 0;
    transition: border-color 0.3s;
    display: none;
}

#hd .sec-control .hd-content .openbox a.btn_on.active,
#hd .sec-control .hd-content .openbox a.btn_off.active {
    display: block;
}

#hd .sec-control .hd-content .openbox .open_info {
    display: none;
}

#hd .sec-control .hd-content .openbox .open_info.active {}

#hd .sec-control .hd-content .openbox .open_info a {
    color: #000;
    text-decoration: underline;
    margin-bottom: 20px;
    display: inline-block;
}

@media screen and (max-width: 1024px) {
    #hd .sec-control .list-feature>li {
        padding: 30px 40px
    }
}

@media screen and (max-width: 768px) {
    #hd .sec-control .protection-ui {
        width: 60%;
        margin: 0 auto 50px auto;
        display: block;
    }

    #hd .sec-control .protection-ui img {
        opacity: 1;
    }

    #hd .sec-control .hd-wrapper {
        flex-direction: column
    }

    #hd .sec-control .hd-wrapper .hd-col33 {
        width: 100%;
        margin: 0;
        text-align: left;
        padding: 0;
    }

    #hd .sec-control .list-feature {
        margin-top: 0
    }

    #hd .sec-control .list-feature>li {
        margin-bottom: 16px;
        color: white;
        /*background:#3d54d8;
        background:#386688 !important;*/
        background: #3d54d8 !important;
        cursor: default
    }

    #hd .sec-control .list-feature>li .hd-txt {
        display: block;
        -webkit-animation-delay: .1s;
        -webkit-animation-duration: .4s;
        -webkit-animation-name: fadeInUpSmall;
        -webkit-animation-timing-function: ease;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode: both;
        animation-delay: .1s;
        animation-duration: .4s;
        animation-name: fadeInUpSmall;
        animation-timing-function: ease;
        animation-iteration-count: 1;
        animation-fill-mode: both
    }

    #hd .sec-control .list-feature>li h3 {
        color: white !important
    }

    #hd .sec-control .list-feature>li[aria-expanded="true"] h3 {
        color: white !important
    }

    #hd .sec-control .list-feature>li h3:after {
        display: none
    }

    #hd .sec-control .hd-content {
        width: 100%;
        max-width: 600px;
        padding-left: 0;
        margin: 0 auto
    }

    #hd .sec-control .hd-txt {
        display: block !important
    }

    #hd .sec-control .hd-txt img {
        width: 100%;
        max-width: 260px !important;
        margin: 20px auto 0
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-control .list-feature>li {
        padding: 16px 20px
    }
}

#hd .sec-vpn {
    padding-top: 0;
    background: #f2f2f2;
}

#hd .sec-vpn .hd-banner {
    position: relative;
    overflow: hidden
}

#hd .sec-vpn .hd-banner img {
    width: 100%
}

#hd .sec-vpn .main-img {
    margin-top: -100px;
    overflow: hidden;
}

#hd .sec-vpn .hd-intro {
    padding: 8% 0 6%;
    padding: 8% 0 0 0;
    position: relative;
    z-index: 2
}

#hd .sec-vpn .hd-intro p {
    max-width: 50em;
    margin: 0 auto 1em
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-frame {
    background: #0f0b0a;
    background: #fff;
    /*color:#fafafa*/
}

#hd .sec-vpn .list-vpn li:nth-child(2) .hd-frame {
    background: #001020;
    color: #fafafa;
    padding-top: 120px;
    padding-bottom: 120px;
}

#hd .sec-vpn .list-vpn li:nth-child(1) {
    padding-bottom: 0
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-frame {
    padding-right: 0;
    background: #fefefe
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-txt {
    width: 47%;
    position: relative;
    z-index: 3
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-txt small {
    display: block;
    line-height: 1.25
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-img-container {
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-img-container:after {
    content: '';
    display: block;
    width: 33%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(254, 254, 254, 0);
    background-image: -moz-linear-gradient(270deg, rgba(254, 254, 254, 0), #fefefe);
    background-image: -webkit-linear-gradient(270deg, rgba(254, 254, 254, 0), #fefefe);
    background-image: linear-gradient(270deg, rgba(254, 254, 254, 0), #fefefe);
    z-index: 2;
    pointer-events: none;
    user-select: none
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-img-container img {
    /*position:relative*/
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container {
    padding-top: 5%
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container img {
    width: auto;
    margin: 0 16px 0 0
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container .hd-logo {
    height: 4.5em;
    margin-right: 24px
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container a {
    height: 3.25em;
}

#hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container a img {
    height: 100%
}

@media screen and (max-width: 1400px) {
    #hd .sec-vpn .main-img {
        margin-top: -100px;
    }

    #hd .sec-vpn .main-img img {
        width: 140% !important;
        max-width: 140% !important;
        margin-left: -20%;
    }
}

@media screen and (max-width: 1023px) {
    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-img-container img {
        position: relative
    }

    #hd .sec-vpn .list-vpn li:nth-child(2) .hd-frame {
        padding-top: 40px;
        padding-bottom: 0px;
        padding-right: 0;
        padding-left: 0;
    }

    #hd .sec-vpn .list-vpn li:nth-child(2) .hd-frame h3 {
        padding-right: 30px;
        padding-left: 30px;
    }

    #hd .sec-vpn .list-vpn li:nth-child(2) .hd-frame p {
        padding-bottom: 10px;
        padding-right: 30px;
        padding-left: 30px;
    }

    #hd .sec-vpn .list-vpn li:nth-child(2) .hd-frame img {
        position: relative;
        height: auto;
        width: 100%;
    }

    #hd .sec-vpn .main-img img {
        width: 160% !important;
        max-width: 160% !important;
        margin-left: -30%;
    }

    #hd .sec-vpn .hd-banner img {
        width: 120%;
        max-width: none !important;
        margin-left: -10%
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-txt {
        width: 100%
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-frame {
        padding-right: 30px;
        padding-bottom: 0
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-frame .hd-img-container {
        margin-top: 30px;
        margin-left: -30px;
        margin-right: -30px;
        position: relative
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-frame .hd-img-container:after {
        display: none
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-frame .hd-bg {
        width: 100%;
        height: auto;
        margin-left: 0
    }
}

@media screen and (max-width: 768px) {
    #hd .sec-vpn .hd-intro {
        padding: 10% 0 8%
    }
}

@media screen and (max-width: 620px) {
    #hd .sec-vpn .hd-banner img {
        width: 155%;
        margin-left: -40%
    }

    #hd .sec-vpn .list-img-large li.hd-col100 .hd-frame .hd-bg {
        margin-left: 0;
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-vpn .hd-intro {
        padding: 15% 0 12%
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-frame {
        padding-right: 20px
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-frame .hd-img-container {
        margin-top: 20px;
        margin-left: -20px;
        margin-right: -20px
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container {
        flex-wrap: nowrap;
        justify-content: center
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container img {
        margin: 0 6px 0 0
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container .hd-logo {
        width: 80px;
        height: 80px;
        margin: 0
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container .hd-link-container {
        flex-direction: column;
        width: 140px;
        padding-left: 10px
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container a {
        width: 100%;
        max-width: 140px;
        height: auto
    }

    #hd .sec-vpn .list-vpn li:nth-child(1) .hd-btn-container a img {
        margin: -2px 0
    }
}

#hd .sec-app .hd-content {
    padding-top: 3%
}

#hd .sec-app .hd-content p {
    margin-bottom: 1em
}

#hd .sec-app .hd-btn-container {
    margin-top: 80px
}

#hd .sec-app .hd-btn-container img {
    width: auto;
    margin: 0 16px 0 0
}

#hd .sec-app .hd-btn-container .hd-logo {
    height: 4.5em;
    margin-right: 24px
}

#hd .sec-app .hd-btn-container a {
    height: 3.25em
}

#hd .sec-app .hd-btn-container a img {
    height: 100%
}

#hd .sec-app figure {
    padding-left: 10%
}

#hd .sec-app figure .gif-container {
    width: 80%;
    margin: 0 auto;
    overflow: visible
}

#hd .sec-app figure .vid-control {
    right: 100%;
    bottom: 0
}

@media screen and (max-width: 1024px) {
    #hd .sec-app figure {
        padding-left: 5%
    }

    #hd .sec-app figure .gif-container {
        width: 75%
    }
}

@media screen and (max-width: 1023px) {
    #hd .sec-app .hd-container {
        flex-direction: column
    }

    #hd .sec-app .hd-content {
        width: 100%;
        padding-top: 0
    }

    #hd .sec-app .hd-btn-container {
        margin: 40px auto
    }

    #hd .sec-app figure {
        width: 100%;
        padding-left: 0
    }

    #hd .sec-app figure .gif-container {
        max-width: 300px
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-app .hd-btn-container {
        max-width: 280px;
        flex-wrap: nowrap;
        justify-content: center
    }

    #hd .sec-app .hd-btn-container img {
        margin: 0 6px 0 0
    }

    #hd .sec-app .hd-btn-container .hd-logo {
        width: 80px;
        height: 80px;
        margin: 0
    }

    #hd .sec-app .hd-btn-container .hd-link-container {
        flex-direction: column;
        width: 140px;
        padding-left: 10px
    }

    #hd .sec-app .hd-btn-container a {
        width: 100%;
        max-width: 140px;
        height: auto
    }

    #hd .sec-app .hd-btn-container a img {
        margin: -2px 0
    }
}




#hd .sec-user {
    background: #e6ebf0 !important;
    padding-top: 8%;
}

#hd .sec-user::before,
#hd .sec-user::after {
    background: none;
}

#hd .sec-user .hd-content {
    padding-top: 100px;
}

#hd .sec-user .list-user {
    margin-top: 100px;
}

#hd .sec-user .list-user li {
    padding: 0;
    background: #d2e0ef;
}

#hd .sec-user .list-feature>li:nth-child(2n) {
    margin: 12px;
}

@media screen and (max-width: 1023px) {
    #hd .sec-user .hd-content {
        padding-top: 50px;
        padding-bottom: 150px;
    }
}

@media screen and (max-width: 650px) {
    #hd .sec-user .hd-content {
        padding-bottom: 100px;
    }
}


#hd .align-items-center {
    align-items: center !important;
}

/*BE58U vpn-chart*/
#hd .vpn-chart {
    position: relative;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

#hd .vpn-chart .data {
    padding-left: 20px;
    position: relative;
    margin-bottom: 20px;
}

#hd .vpn-chart .entry {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

#hd .vpn-chart .title {
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.5em;
    color: #ff9e1b;
    margin-bottom: 5px;
}

#hd .vpn-chart .name {
    color: #000;
    font-size: 1.3em;
    margin-right: 20px;
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}

#hd .vpn-chart .name.primary {}

#hd .vpn-chart .bar {
    margin-right: 5px;
    height: 25px;
    display: inline-block;
    vertical-align: text-top;
    width: 24%;
    background: #8b8d99;
    background-image: linear-gradient(to right, #8b8d99, #d0d1d5 60%);
}

#hd .vpn-chart .bar.primary {
    width: 48%;
    background: #146aff;
    background-image: linear-gradient(to right, #146aff, #8dd4fe 60%);
}

#hd .vpn-chart .number {
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.2em;
    color: #000;
    line-height: 1em;
    display: inline-block;
    vertical-align: text-top;
    padding-left: 5px;
}

#hd .vpn-chart .number.primary {}

@media screen and (max-width: 650px) {
    #hd .vpn-chart .name {
        font-size: 1em;
    }

    #hd .vpn-chart .number {
        font-size: 1em;
    }
}

@media screen and (max-width: 550px) {
    #hd .vpn-chart .name {
        width: 100%;
    }
}



/*user*/
#hd .sec-user .hd-img-container {
    width: 65%;
    left: auto;
    right: 4%
}

#hd .sec-user .hd-img-container .hand-gif {
    position: absolute;
    left: 25%;
    top: 0;
    width: 35%;
    /*background: rgba(0,0,0,0.2);*/
}

#hd .sec-user .hd-img-container .hand-gif {
    position: absolute;
    left: 25%;
    top: 0;
    width: 35%;
    /*background: rgba(0,0,0,0.2);*/
}

#hd .sec-user .hd-img-container .hand-gif .gif {}

#hd .sec-user .hd-img-container .hand-gif .png {
    display: none;
}

#hd .sec-user .hd-img-container .hand-gif .hand-gif-control {
    position: absolute;
    left: 3%;
    bottom: 40%;
    width: 35px;
    height: 35px;
}

#hd .sec-user .hd-img-container .hand-gif .hand-gif-control .play {
    display: none;
}

#hd .sec-user .hd-img-container .hand-gif .hand-gif-control.play .play {
    display: block;
}

#hd .sec-user .hd-img-container .hand-gif .hand-gif-control.play .pause {
    display: none;
}

@media screen and (max-width: 1300px) {
    #hd .sec-user .hd-img-container .hand-gif {
        width: 55%;
    }
}

@media screen and (max-width: 1023px) {
    #hd .sec-user .hd-img-container {
        width: 95%;
    }

    #hd .sec-user .hd-img-container .hand-gif {
        width: 40%;
    }
}

@media screen and (max-width: 768px) {
    #hd .sec-aimesh .hd-img-container {
        width: calc(100% - 36px);
        margin: 0% 18px;
    }

    #hd .sec-user .hd-img-container .hand-gif {
        width: 50%;
    }

    #hd .sec-user .hd-img-container .hand-gif .hand-gif-control {
        left: 0%;
        bottom: 20%;
    }
}


/**/
/* nav bar */
#hd #overview-nav {
    position: fixed;
    top: 35%;
    right: 15px;
    margin-top: -11.6875em;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 10px;
    z-index: 9999;
}

#hd #overview-nav ul {
    list-style: none;
    display: block;
    margin: 0;
    position: relative;
    padding: 10px 0;
}

#hd #overview-nav ul:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 100%;
    border-radius: 18px;
    background: #999;
    opacity: 0.3;
}

#hd #overview-nav ul li {
    position: relative;
    width: auto;
    height: auto;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    margin: 0;
    display: inline-block;
    line-height: 20px;
    margin: 10px 0;
}

#hd #overview-nav ul li a {
        display: inline-block;
    width: 25px;
    position: absolute;
    padding: 0;
    height: 25px;
    z-index: 9999;
    top: -7px;
    left: -7px;
}

#hd #overview-nav ul li div {
    width: 10px;
    height: 10px;
    overflow: hidden;
    margin-left: auto;
    background: #9f9f9f;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    /* box-shadow: inset 0 0 1px #777; */
    display: inline-block;
    position: relative;
}

#hd #overview-nav ul li b {
    position: absolute;
    top: 60%;
    margin-top: -12px;
    right: -420px;
    white-space: nowrap;
    font-size: 13px;
    color: #000 !important;
    font-weight: normal;
    line-height: 1;
    background: #3e75c0;
    padding: 8px 3em 8px 2em;
    border-radius: 50px 0 0 50px;
    font-weight: 600;
    /* font-family: arial, helvetica, sans-serif; */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
            background: -webkit-linear-gradient(right, #1fb3ff  0%, #00f9ff);
    background: linear-gradient(to right, #1fb3ff  0%, #00f9ff);
}

#hd #overview-nav ul li:hover b {
    display: inline-block !important;
    position: absolute;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: auto;
    right: -20px;
}

/* #hd #overview-nav ul li.on.active b,
#hd #overview-nav ul li.active b {
    top: 0
} */

#hd #overview-nav ul li:hover div {
    background: #3e75c0 !important
}

/* #hd #overview-nav ul li.active {
    height: 30px !important
} */

#hd #overview-nav ul li.active div {
    background: #3e75c0 !important;
    /* height: 30px !important; */
    top: 0;
}

@media (max-width: 759px) {

    /* special-sectionOverview #rog_chariot_rgb_nav-nav */
    #hd #overview-nav {
        display: none;
    }
}


#hd .flexCon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#hd .flexCon.flex-50-50>.flex-item {
    position: relative;
    width: 50%;
    padding: 0 0px;
}

#hd .flexCon.flex-50-50>.flex-item.flex-25 {
    width: 25%;
}

#hd .flexCon.flex-50-50>.flex-item.flex-75 {
    width: 75%;
}

#hd .flexCon.flex-50-50>.flex-item:first-child {
    padding: 0;
}

#hd .flexCon.flex-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

#hd .flexCon .translate_box {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 1023px) {
    #hd .flexCon.flex-50-50>.flex-item {
        position: relative;
        width: 100%;
        padding: 0px 0;
    }

    #hd .flexCon.flex-reverse {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    #hd .flexCon.flex-50-50>.flex-item.flex-25 {
        width: 100%;
    }

    #hd .flexCon.flex-50-50>.flex-item.flex-75 {
        width: 100%;
    }

    #hd .flexCon .translate_box {
        position: relative;
        top: inherit;
        left: inherit;
        transform: translate(0%, 0%);
    }

    #hd .sec-network .list-network li:nth-child(1) .flexCon .flex-item {
        padding: 0;
    }

    #hd .sec-network .list-network li:nth-child(1) .flexCon {
        padding: 30px;
    }

    #hd .sec-network .list-network li:nth-child(1) .flexCon.flex-50-50>.flex-item:first-child {
        padding-bottom: 30px;
    }
}

/**/
#cboxOverlay {
    background: #000 !important;
}

#colorbox {
    /* overflow: inherit !important; */
    z-index: 9999 !important;
}

#cboxContent {
    margin: 40px 5px !important;
}

#colorbox #cboxClose {
    position: absolute;
    top: -30px;
    right: 0px;
    background: url(../img/ico_close.svg) center center no-repeat;
    background-size: cover;
    width: 20px;
    height: 20px;
    padding: 12px;
    z-index: 999;
}

#colorbox #cboxNext {
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: calc(50% - 20px);
    font-size: 0;
    background: url(../img/arrow.svg) bottom left no-repeat;
    right: -45px;
}

#colorbox #cboxPrevious {
    display: inline-block;
    position: absolute;
    left: -45px;
    width: 40px;
    top: calc(50% - 20px);
    height: 40px;
    font-size: 0;
    background: url(../img/arrow.svg) bottom left no-repeat;
    transform: rotate(-180deg);
}

#colorbox #cboxTitle {
    font-family: "TTNormsProRegular", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif;
    color: #000 !important;
    /* font-weight: 600 !important; */
    font-size: 1.2em;
    line-height: 1.2em;
    font-weight: 300;
    text-align: center;
    width: 100%;
    margin: 10px 0;
    position: absolute;
    display: inline-block !important;
    top: 100%;
    float: inherit !important;
    z-index: 2;
}

#colorbox #cboxCurrent {
    font-family: "TTNormsProRegular", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif;
    color: #000 !important;
    /* font-weight: 600 !important; */
    font-size: 1.2em;
    line-height: 1.2em;
    font-weight: 300;
    width: 100%;
    margin: 10px 0;
    position: absolute;
    display: inline-block !important;
    top: -40px;
    left: 0;
    float: inherit !important;
    z-index: 2;
    text-indent: inherit;
    text-align: left;
}

/**/
#hd #pageContent-sec-network .farther_area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

#hd #pageContent-sec-network .farther_area li {
    display: flex;
    width: 100%;
    margin-bottom: 1.5em;
    padding: 0;
    align-items: flex-start;
    flex-direction: column;
}

#hd #pageContent-sec-network .farther_area li h4 {
    font-family: "TTNormsProMedium", sans-serif;
    margin-bottom: 5px;
    font-size: 1.2em;
}

#hd #pageContent-sec-network .farther_area li:last-child {
    /* margin-bottom: 3vw; */
}

#hd #pageContent-sec-network .farther_area li .ico_box {
    display: flex;
    flex-direction: column;
    align-content: center;
    width: 15%;
    max-width: 130px;
}

#hd #pageContent-sec-network .farther_area li .ico_box img {
    display: inline-block;
    width: 60%;
    max-width: 100px;
}

#hd #pageContent-sec-network .farther_area li .ico_box p {
    font-family: "TTNormsProMedium", sans-serif;
    font-size: 1em;
    color: #000;
    text-align: center;
    margin-top: 0.5em;
    line-height: 1.1;
}

#hd #pageContent-sec-network .farther_area li .chart_box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 85%;
    padding-left: 0px;
    flex-direction: row;
}

#hd #pageContent-sec-network .farther_area li .chart_box .chart_g {
    width: 2%;
    height: 25px;
    background: linear-gradient(90deg, #949494 40%, #585857);
    position: relative;
    -moz-transition: all 1.5s ease-out;
    -o-transition: all 1.5s ease-out;
    -webkit-transition: all 1.5s ease-out;
    transition: all 1.5s ease-out;
    margin-bottom: 0.5em;
}

#hd #pageContent-sec-network .farther_area li .chart_box .chart_b {
    width: 2%;
    height: 25px;
    background: linear-gradient(90deg, #5163d0 40%, #66a6ff);
    position: relative;
    -moz-transition: all 1.5s ease-out;
    -o-transition: all 1.5s ease-out;
    -webkit-transition: all 1.5s ease-out;
    transition: all 1.5s ease-out;
}

#hd #pageContent-sec-network .farther_area li .chart_box .chart_b.on.chart_b_1 {
    width: 90%;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    -webkit-transition: all 2s ease-out;
    transition: all 2s ease-out;
}

#hd #pageContent-sec-network .farther_area li .chart_box .chart_g.on.chart_b_2 {
    width: 12%;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    -webkit-transition: all 2s ease-out;
    transition: all 2s ease-out;
}

#hd #pageContent-sec-network .farther_area li .chart_box .chart_b p {
    font-family: "TTNormsProMedium", sans-serif;
    font-size: 1.5em;
    color: #000000;
    position: absolute;
    left: calc(100% + 0em);
    display: inline-block;
    width: 6em;
    font-style: normal;
    padding-left: 10px;
    top: 0em;
    font-weight: normal;
    opacity: 0;
}

#hd #pageContent-sec-network .farther_area li .chart_box .chart_g p {
    font-family: "TTNormsProMedium", sans-serif;
    font-size: 1.5em;
    color: #000000;
    position: absolute;
    left: calc(100% + 0em);
    display: inline-block;
    width: 6em;
    font-style: normal;
    padding-left: 10px;
    top: 0em;
    font-weight: normal;
    opacity: 0;
}

#hd #pageContent-sec-network .farther_area li .chart_box .chart_b.on p {
    -moz-transition: all 1.5s ease-out 1.5s;
    -o-transition: all 1.5s ease-out 1.5s;
    -webkit-transition: all 1.5s ease-out 1.5s;
    transition: all 1.5s ease-out 1.5s;
    /* 添加 2 秒延遲 */
    opacity: 1;
}

#hd #pageContent-sec-network .farther_area li .chart_box .chart_g.on p {
    -moz-transition: all 1.5s ease-out 1.5s;
    -o-transition: all 1.5s ease-out 1.5s;
    -webkit-transition: all 1.5s ease-out 1.5s;
    transition: all 1.5s ease-out 1.5s;
    /* 添加 2 秒延遲 */
    opacity: 1;
}

#hd #pageContent-sec-network .farther_area li .chart_color_box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2em;
    margin-left: 1.2em;
}

#hd #pageContent-sec-network .farther_area li .chart_color_box .chart_color_a {
    width: 30px;
    height: 20px;
    background: #b7b6b6;
}

#hd #pageContent-sec-network .farther_area li .chart_color_box .chart_color_b {
    width: 30px;
    height: 20px;
    background: #0075e2;
}

#hd #pageContent-sec-network .farther_area li .chart_color_box .chart_color_txt {
    font-size: 1em;
    color: #000;
    margin: 0 2em 0 1em;
}

@media only screen and (max-width: 560px) {
    #hd #pageContent-sec-network .farther_area li .chart_box {
        width: 75%;
    }

    #hd #pageContent-sec-network .farther_area li .chart_box .chart_g.on.chart_b_2 {
        width: 8%;
    }

    #hd #pageContent-sec-network .farther_area li .chart_box .chart_b p {
        font-size: 1.1em;
    }

    #hd #pageContent-sec-network .farther_area li .chart_box .chart_g p {
        font-size: 1.1em;
    }
}

#hd #pageContent-sec-network ul.tabs_list {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

#hd #pageContent-sec-network ul.tabs_list .tab_style {
    display: inline-block;
    text-align: center;
    padding: 1em 3em 0.75em;
    font-family: "TTNormsProMedium", Arial, sans-serif;
    font-size: 1.5em;
    color: #333333;
    text-decoration: none;
    position: relative;
    border-bottom: 1px solid #000;
    line-height: 1.3;
    overflow: hidden;
    margin: 1em auto 0;
    transition: color 0.3s ease;
    /* 新增小過渡，點TAB時更順 */
}

#hd #pageContent-sec-network ul.tabs_list .tab_style sup {
    font-size: 0.6em;
    vertical-align: super;
}

#hd #pageContent-sec-network ul.tabs_list .tab_style.active {
    color: #000;
}

#hd #pageContent-sec-network ul.tabs_list .tab_style.active::before {
    content: '';
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 4px;
    background: #3e75c0;
    left: 0;
}

@media screen and (max-width: 780px) {
    #hd #pageContent-sec-network ul.tabs_list .tab_style {
        padding: 1em 0.5em 0.75em;
        font-size: 1.2em;
    }
}

/* --- 這邊是針對 tabs_info 新加的動態效果 --- */
#hd #pageContent-sec-network .tabs_info {
    background: url('../img/bg_tab.jpg')no-repeat top center;
    background-size: cover;
    display: none;
    /* 預設隱藏 */
    opacity: 0;
    position: relative;
    top: 20px;
    padding-top: 3em;
    padding-bottom: 3em;
    transition: opacity 0.4s ease, top 0.4s ease;
    /* 加淡入與位移過渡 */
}

#hd #pageContent-sec-network .tabs_info.active {
    display: block;
    /* 出現 */
    opacity: 1;
    top: 0;
}

/**/
#hd .tabs_info {
    display: none;
}

#hd .tabs_info.active {
    display: block;
}

#hd .tabs_info.active h3 {
    width: 100%;
    text-align: center;
    color: #3e75c0;
    font-size: 2em;
    font-weight: bold;
}

#hd .tabs_info p.tabs_info_txt {
    text-align: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

#hd .tabs_info h4 {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    text-align: left;
    font-size: 1.2em;
    margin-bottom: 10px;
}

#hd .tabs_info ol {
    width: 100%;
    max-width: 900px;
    margin: 10px auto 20px;
    list-style: none;
}

#hd .tabs_info ol li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 5px;
}

#hd .tabs_info ol li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 12px;
    height: 12px;
    background: url('../img/point_style_a.png') no-repeat center center;
    border-radius: 50%;
}

/*-----features-----*/

#hd .section-features {
    position: relative;
    background: #000 url('../img/bg_onepager.png') no-repeat top center;
    background-size: cover;
    overflow: hidden;
    color: #fff;
    padding: 0;
}

#hd .section-features .inner {
    max-width: 1200px;
    padding: 50px 30px 100px 30px;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    #hd .section-features .inner {
        padding-bottom: 20px;
    }
}

#hd .section-features .grid {}

#hd .section-features .grid .row {
    display: flex;
    flex-wrap: wrap;
}

#hd .section-features .grid .row .column {
    border: 1px solid #a7e0f9;
    background: rgba(0, 0, 0, 0.73);
    border-radius: 10px;
    overflow: hidden;
    margin: 1%;
}

#hd .section-features .grid .row .column.of1 {
    width: 98%;
}

#hd .section-features .grid .row .column.of2 {
    width: 48%;
}

#hd .section-features .grid .row .column.of3 {
    width: 33.33%;
}

#hd .section-features .grid .row .column.of4 {
    width: 23%;
}


#hd .section-features .grid .p1 {
    font-family: "TTNormsProRegular", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 2em;
    color: #fff;
    line-height: 1.1em;
    margin: 0;
}

#hd .section-features .grid .p2 {
    font-family: "TTNormsProRegular", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.1em;
    color: #fff;
    font-weight: normal;
    line-height: 1.3em;
    margin: 5px 0 0 0;
    letter-spacing: -0.02em;
}

#hd .section-features .grid .note {
    font-size: 1em;
    color: #fff;
    line-height: 1.1em;
    margin: 15px 0 0 0;
}

#hd .section-features .grid img {
    max-width: 100%;
    display: block;
}



#hd .section-features .grid .box-1 {
    background: #000;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

#hd .section-features .grid .box-1 .text {
    padding: 10px 20px 10px 10px;
    width: 60%;
}

#hd .section-features .grid .box-1 .image {
    width: 40%;
    padding: 20px 10px 20px 50px;
}

#hd .section-features .grid .box-1 .p1 {
    margin-top: 0.3em;
}

#hd .section-features .grid .box-1 .p1 span {
    font-size: 0.9em;
}


#hd .section-features .grid .box-2 {
    background: #020811;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

#hd .section-features .grid .box-2 .text {
    width: 100%;
    padding: 10px 4vw 10px 4vw;
}

#hd .section-features .grid .box-2 .image {
    width: 40%;
    padding: 20px 10px 20px 20px;
}

#hd .section-features .grid .box-2 .p1 {
    font-family: "TTNormsProRegular", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    /* color: #77b900; */
    font-size: 2em;
}

#hd .section-features .grid .box-2 .p1 span {
    font-size: 0.8em;
}

#hd .section-features .grid .box-2 .p3 {
    font-family: "TTNormsProRegular", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.4em;
    margin-bottom: 0px;
}

/*
#hd .section-features .grid .box-4{
    background: #000;
    display: flex;
    align-items: center;
}
#hd .section-features .grid .box-4 .text{
    width: 45%;
    padding: 10px 0px 10px 10px;
}
#hd .section-features .grid .box-4 .image{
    width: 55%;
    padding: 0px;
}
*/

#hd .section-features .grid .box-4 {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
}

#hd .section-features .grid .box-4 .p1 {
    font-size: 2em;
}

#hd .section-features .grid .box-4 .text {
    padding: 30px 10px 0px 10px;
    margin-bottom: -20px;
    text-align: center;
}

#hd .section-features .grid .box-4 .image {}


#hd .section-features .grid .box-4a {
    background: #000;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    flex-direction: column;
}

#hd .section-features .grid .box-4a .text {
    padding: 20px;
    text-align: center;
}

#hd .section-features .grid .box-4a .text .p1 {
    margin: 0px 0 10px 0;
}

#hd .section-features .grid .box-4a .text .p2 {
    margin: 0 0 20px 0;
}


#hd .section-features .grid .box-5 {
    background: #000;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

#hd .section-features .grid .box-5 .text {
    width: 40%;
    padding: 10px 20px 10px 0px;
}

#hd .section-features .grid .box-5 .image {
    width: 60%;
    padding: 20px 10px 20px 20px;
}

#hd .section-features .grid .box-5 .text .p1 span {
    font-size: 0.7em;
}


#hd .section-features .grid .box-3 {
    background: #000;
    display: flex;
    align-items: center;
}

#hd .section-features .grid .box-3 .text {
    width: 65%;
    padding: 30px 10px 30px 40px;
}

#hd .section-features .grid .box-3 .image {
    width: 35%;
    padding: 20px 30px 20px 0;
}

#hd .section-features .grid .box-6 {
    background: #000;
    display: flex;
    align-items: center;
}

#hd .section-features .grid .box-6 .text {
    width: 100%;
    padding: 30px 20px 30px 20px;
    text-align: center;
}

#hd .section-features .grid .box-6 .p1 {
    font-size: 4em;
}

#hd .section-features .grid .box-6 .image {
    max-width: 300px;
    margin: 0 auto;
    padding: 30px 20px 30px 20px;
}

#hd .section-features .grid .box-7 {
    background: #000;
    display: flex;
    align-items: center;
}

#hd .section-features .grid .box-7 .text {
    width: 100%;
    padding: 30px 20px 30px 20px;
    text-align: center;
}

#hd .section-features .grid .box-7 .p1 {
    font-size: 4em;
}






#hd .section-features .grid .box-8 {
    background: #0d0519;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

#hd .section-features .grid .box-8 .text {
    width: 60%;
    padding: 30px 20px 30px 10px;
}

#hd .section-features .grid .box-8 .image {
    width: 40%;
    padding: 20px 0px 20px 20px;
}

#hd .section-features .grid .box-8 .p1 {
    font-size: 1.3em;
}


#hd .section-features .grid .box-9 {
    background: #000;
    display: flex;
    align-items: center;
}

#hd .section-features .grid .box-9 .image {
    width: 100%;
    padding: 30px 20px 30px 20px;
}



#hd .section-features .grid .box-10 {
    background: #000;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#hd .section-features .grid .box-10 .text {
    width: 100%;
    padding: 30px 0.5em 10px 0.5em;
    text-align: center;
}


#hd .section-features .grid .box-11 {
    background: #000;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#hd .section-features .grid .box-11 .text {
    padding: 20px 20px 10px 10px;
    text-align: center;
}

#hd .section-features .grid .box-11 .image {}

#hd .section-features .grid .box-11 .p1 {
    margin: 10px 0 -5px 0;
}



#hd .section-features .grid .box-12 {
    background: #000;
    display: flex;
    align-items: center;
}

#hd .section-features .grid .box-12 .text {
    width: 45%;
    padding: 20px 0px 20px 30px;
}

#hd .section-features .grid .box-12 .image {
    width: 55%;
    padding: 10px 20px 10px 0;
}

#hd .section-features .grid .box-13 {
    background: #000;
    display: flex;
    align-items: center;
}

#hd .section-features .grid .box-13 .text {
    width: 65%;
    padding: 30px 10px 30px 40px;
}

#hd .section-features .grid .box-13 .image {
    width: 35%;
    padding: 20px 30px 20px 0;
}

#hd .section-features .grid .box-14 {
    background: #000;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#hd .section-features .grid .box-14 .text {
    width: 100%;
    padding: 30px 20px 10px 20px;
    text-align: center;
}

#hd .section-features .grid .box-15 {
    background: #000;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    flex-direction: column;
}

#hd .section-features .grid .box-15 .text {
    padding: 20px;
    text-align: center;
}

#hd .section-features .grid .box-15 .text .p1 {
    margin: 10px 0 0 0;
}

@media screen and (max-width: 1200px) {
    #hd .section-features .grid .p1 {
        font-size: 1.7em;
    }

    #hd .section-features .grid .box-2 .p1 {
        font-size: 1.4em;
    }
}

@media screen and (max-width: 850px) {
    #hd .section-features .grid .column {
        width: 100% !important;
        margin: 0 0 15px 0 !important;
    }
}

@media screen and (max-width: 450px) {
    #hd .section-features .grid .p1 {
        font-size: 1.3em;
    }

    #hd .section-features .grid .p2 {
        font-size: 1em;
    }
}

/**/
#hd .section-desktop{
    background: #000;
    color: #fff;
    background-size: cover;
    padding-bottom: 80px;
}

#hd .section-desktop .text-content {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0px 30px;
    text-align: center;
}

#hd .section-desktop .h3 {}

#hd .section-desktop .intro {
    position: relative;
    max-width: 1200px;
    margin: 3em auto 0;
    padding: 0px 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#hd .section-desktop .intro h3 {
    text-align: center;
    display: inline-block;
    margin: 1em auto 0.5em;
    width: 100%;
    color: #fff;
}
#hd .section-desktop .pic_scalable{
    position: relative;
}
#hd .section-desktop .pic_scalable .pic_info{
    position: absolute;
    color: #11d2ff;
    padding: 0.5em;
        font-family: "Roboto", "TTNormsProRegular", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
        font-size: 1.25em;
    line-height: 1.4;
    letter-spacing: 0;
    font-weight: 300;
}
#hd .section-desktop .intro .text {
    width: 50%;
    padding: 0px 20px 0px 20px;
}

#hd .section-desktop .intro .image>h3:first-child {
    margin-top: 0;
}

#hd .section-desktop .intro .text>h3:first-child {
    margin-top: 0;
}

#hd .section-desktop .intro .image {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#hd .section-desktop .mini-title {
    color: #fff;
}

#hd .section-desktop .intro .text b {
    font-size: 1.1em;
    color: #11d2ff;
        margin-bottom: 0.2em;
    display: inline-block;
    /* font-weight: 300; */
}

#hd .section-desktop .intro .ksp_box {
    display: flex;
    width: 100%;
    margin: 2em 0 0;
}

#hd .section-desktop .intro .ksp_box li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px 20px;
    width: 50%;
}

#hd .section-desktop .intro .ksp_box li p {
    font-size: 1.0em;
    text-align: center;
}

#hd .section-desktop .intro .ksp_box li p strong {
    background-color: #1fb3ff;
    background-image: -moz-linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    background-image: -webkit-linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    background-image: linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin: 0;
        font-size: 2.75em;
    letter-spacing: -0.025em;
}

@media screen and (max-width: 1280px) {
    #hd .section-desktop .intro .ksp_box{
        flex-direction: column;
    }
    #hd .section-desktop .intro .ksp_box li{
        width: 100%;
}

@media screen and (max-width: 950px) {
    #hd .section-desktop .intro .text {
        width: 100%;
        padding: 0;
    }

    #hd .section-desktop .intro .image {
        width: 100%;
    }

    #hd .section-desktop .intro .image img {
        max-width: 90%;
        margin: 20px auto 0;
    }
    #hd .section-desktop .intro .pic_scalable img{
        margin: 0 auto 20px;
    }
}

@media screen and (max-width: 550px) {
    #hd .section-desktop .
        padding-bottom: 30px;
    }

}

/*started*/
#hd .section-started {
    background: #000;
    color: #fff;
    background-size: cover;
    padding-bottom: 80px;
}

#hd .section-started .text-content {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0px 30px;
    text-align: center;
}

#hd .section-started .txt_Notify{
    display: inline-block;
    margin: 1em 0 1em;
    padding: 10px 2em;
    background: #37788c;
    /* background: linear-gradient(to right, #000 0%, #008cf7 15%, #00dfed 85%, #000 100%); */
    font-size: 2em;
    text-shadow: 1px 5px 8px rgba(0, 0, 0, 0.9);
}
#hd .section-started a.btn_Notify {
    display: inline-block;
    margin: 1em 0 1em;
    padding: 1em 1.5em 1em;
    background: #008cf7;
    /* background: linear-gradient(to right, #000 0%, #008cf7 15%, #00dfed 85%, #000 100%); */
}

#hd .section-started a.btn_Notify span {
    /* padding: 10px 2em; */
    font-size: 2em;
    /* text-shadow: 1px 5px 8px rgba(0, 0, 0, 0.9); */
}
#hd .section-started p.h3 {}

#hd .section-started .intro {
    position: relative;
    max-width: 1200px;
    margin: 3em auto 0;
    padding: 0px 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#hd .section-started .intro h3 {
    text-align: center;
    display: inline-block;
    margin: 1em auto 0.5em;
    width: 100%;
}

#hd .section-started .intro .text {
    width: 50%;
    padding: 0px 20px 0px 20px;
}

/*application*/
#hd .section-application {
    background: #000;
    color: #fff;
    background-size: cover;
    padding-bottom: 0px;
}

#hd .section-application .text-content {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0px 30px;
    text-align: center;
}

#hd .section-application .intro {
    position: relative;
    max-width: 1200px;
    margin: 3em auto 0;
    padding: 0px 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#hd .section-application .intro h3 {
    text-align: center;
    display: inline-block;
    margin: 1em auto 0.5em;
    width: 100%;
}

#hd .section-application .intro .text {
    width: 50%;
    padding: 0px 20px 0px 20px;
}

#hd .section-application .intro .image>h3:first-child {
    margin-top: 0;
}

#hd .section-application .intro .text>h3:first-child {
    margin-top: 0;
}

#hd .section-application .intro .image {
    width: 50%;
}

#hd .section-application .mini-title {
    color: #fff;
}

#hd .section-application .intro .text b {
    font-size: 1.2em;
    color: #11d2ff;
    /* font-weight: 300; */
}

#hd .section-application .intro .ksp_box {
    display: flex;
    width: 100%;
    margin: 2em 0 0;
}

#hd .section-application .intro .ksp_box li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px 20px;
    width: 50%;
}

#hd .section-application .intro .ksp_box li p {
    font-size: 1.0em;
    text-align: center;
}

#hd .section-application .intro .ksp_box li p strong {
    background-color: #1fb3ff;
    background-image: -moz-linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    background-image: -webkit-linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    background-image: linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin: 0;
    font-size: 3em;
}

#hd .section-application .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin-top: 80px;
}

#hd .section-application .list .entry {
    width: 30%;
    max-width: 346px;
    margin: 0 1% 60px 1%;
    box-sizing: border-box;
    /* background: #fff; */
    /* border-radius: 15px;
    overflow: hidden; */
    padding: 0 0 30px 0;
}

#hd .section-application .list .entry h4 {
    font-size: 1.2em;
    font-family: "TTNormsProRegular", "TTNorms", "MyriadPro", "Roboto", "Arial", "Apple LiGothic Medium", "STHeiti Light", "Microsoft JhengHei", sans-serif;
    margin: 0.5em 0 0.5em 0;
    text-align: center;
    line-height: 1.1em;
    /* min-height: 2.2em; */
    color: #fff;
    padding: 0 5px;
}

#hd .section-application .list .entry p {
    font-size: 1.1em;
    line-height: 1.5;
    margin: 0.8em 0 0 0;
    text-align: center;
    line-height: 1.3em;
    padding: 0 5px;
    color: #fff;
    text-align: left;
}

@media screen and (max-width: 1200px) {
    #hd .section-application .mini-title {
        font-size: 2em;
    }
}

@media screen and (max-width: 950px) {
    #hd .section-application .intro .text {
        width: 100%;
        padding: 0;
    }

    #hd .section-application .intro .image {
        width: 100%;
    }

    #hd .section-application .intro .image img {
        max-width: 90%;
        margin: 20px auto 0;
    }
}

@media screen and (max-width: 768px) {
    #hd .section-application .list .entry {
        width: 100%;
        max-width: inherit;
        margin: 0 1% 50px 1%;
    }

    #hd .section-application .list .entry h4 {
        font-size: 1.2em;
    }

    #hd .section-application .list .entry p {
        font-size: 1em;
    }
}

@media screen and (max-width: 550px) {
    #hd .section-application {
        padding-bottom: 30px;
    }

    #hd .section-application .mini-title {
        font-size: 1.5em;
    }
    #hd .section-started a.btn_Notify span{
        padding: 10px 0;
        font-size: 2em;
    }
}

@media screen and (max-width: 500px) {
    #hd .section-application .list .entry {
        width: 100%;
    }
}


.table-wrapper {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
}

.table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    table-layout: fixed;
}

.table-wrapper thead th {
    background-color: #e1ebf3;
    /* color: white; */
    padding: 12px 10px;
    /* text-align: left; */
    font-weight: bold;
}

.table-wrapper tbody td {
    border-top: 1px solid #ddd;
    padding: 10px;

}

.table-wrapper tbody tr:nth-child(even) {
    background-color: #f1f7fd;
}

.table-wrapper .test-result {
    color: #1a73e8;
    font-weight: bold;
}

.table-wrapper .method-title {
    font-weight: bold;
}

.table-wrapper td:nth-child(1),
.table-wrapper td:nth-child(2),
.table-wrapper td:nth-child(4) {
    width: 180px;
}

.table-wrapper td:nth-child(3) {
    width: 540px;
}

@media screen and (max-width: 768px) {
    .table-wrapper thead {
        display: none;
    }

    .table-wrapper tbody td {
        display: block;
        width: 100% !important;
    }

    .table-wrapper tbody td:before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
        color: #2f66b3;
    }

    .table-wrapper td:nth-child(1),
    .table-wrapper td:nth-child(2),
    .table-wrapper td:nth-child(3),
    .table-wrapper td:nth-child(4) {
        text-align: left !important;
    }

    .table-wrapper tr {
        display: inline-block;
        margin: 0 18px 20px;
        border: 1px #777 solid;
        width: calc(100% - 36px);
    }

    .table-wrapper tr.rowspan_box {
        margin: 0 18px 0;
        border-bottom: none;
    }

    .table-wrapper tr.rowspan_box_b {
        border-top: none;
    }

    .table-wrapper td.method-title {
        background: #cddef6;
    }

}


/*security*/
#hd .section-security {
    /* background: #e6ebf0; */
}
#hd .section-security h3{
    text-align: left;
    padding: 0 5px;
    background-color: #1fb3ff;
    background-image: -moz-linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    background-image: -webkit-linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    background-image: linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
#hd .section-security h2 sup{
    background-image: linear-gradient(90deg, #ff42e7 0%, #ff42e7 18%, #ff42e7 85%, #ff42e7);
}
#hd .section-security .inner {
    max-width: 1500px;
    padding: 0 30px;
    box-sizing: border-box;
    margin: 0 auto;
}

#hd .section-security .text-content {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

#hd .section-security .default-title {
    color: #000;
}

#hd .section-security .image {
    margin-bottom: 30px;
}

#hd .section-security .image img {
    max-width: 100%;
    width: 100%;
    display: block;
}

#hd .section-security .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin-top: 50px;
}

#hd .section-security .list .entry {
    width: 30%;
    max-width: 368px;
    margin: 0 1% 60px 1%;
    box-sizing: border-box;
    /* background: #fff; */
    /* border-radius: 15px;
    overflow: hidden; */
    padding: 0 0 30px 0;
}


#hd .section-security .note {
    max-width: 1100px;
    margin: 0 auto;
    margin-top: 50px;
    font-size: 1em;
}

@media screen and (max-width: 768px) {
    #hd .section-security .list .entry {
        width: 100%;
        max-width: inherit;
        margin: 0 1% 50px 1%;
    }
}

@media screen and (max-width: 768px) {
    #hd .section-security .list .entry h4 {
        font-size: 1.2em;
    }

    #hd .section-security .list .entry p {
        font-size: 1em;
    }
}

@media screen and (max-width: 500px) {
    #hd .section-security .inner {
        padding: 50px 20px;
    }

    #hd .section-security .list .entry {
        width: 100%;
    }
}

/*scalable*/
#hd .section-scalable {
    /* background: #e6ebf0; */
}

#hd .section-scalable .inner {
    max-width: 1500px;
    padding: 0 30px;
    box-sizing: border-box;
    margin: 0 auto;
}

#hd .section-scalable .text-content {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

#hd .section-scalable .info_scalable {
    position: relative;
}

#hd .section-scalable .info_scalable .info_scalable_txt {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#hd .section-scalable .info_scalable .info_scalable_txt p.p1 {
    font-size: 1.25em;
    font-weight: 500;
    width: 80%;
    display: inline-block;
    margin: 10px auto;
    padding: 1em 4em 1.2em;
    text-shadow: 0 0 10px #000;
    background: -webkit-linear-gradient(right, #000 0%, #008cf7 15%, #3500b0 85%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to right, #000 0%, #008cf7 15%, #3500b0 85%, rgba(0, 0, 0, 0) 100%);
    /* 設定 1px 邊框，但不指定顏色 */
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    /* 漸層來源、切片都設定為 1 */
    border-image-source: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%);
    border-image-slice: 1;
    /* 只對上邊框生效 */
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
}

#hd .section-scalable .info_scalable .info_scalable_txt p.p2 {
    font-size: 1.25em;
    font-weight: 500;
    width: 80%;
    display: inline-block;
    margin: 10px auto;
    padding: 1em 4em 1.2em;
    text-shadow: 0 0 10px #000;
    background: -webkit-linear-gradient(right, #000 0%, #542ee2 15%, #0065fc 85%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to right, #000 0%, #542ee2 15%, #0065fc 85%, rgba(0, 0, 0, 0) 100%);
    /* 設定 1px 邊框，但不指定顏色 */
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    /* 漸層來源、切片都設定為 1 */
    border-image-source: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%);
    border-image-slice: 1;
    /* 只對上邊框生效 */
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
}

@media screen and (max-width: 1023px) {
    #hd .section-scalable .info_scalable img {
        width: 150%;
        margin: -10% 0 -15% -50%;
        max-width: inherit !important;
    }

    #hd .section-scalable .info_scalable .info_scalable_txt {
        position: relative;
        height: auto;
        width: 100%;
        z-index: 999;
        display: inline-block;
    }

    #hd .section-scalable .info_scalable .info_scalable_txt p {
        width: 100% !important;
    }
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 500px) {
    #hd .section-scalable .inner {
        padding: 50px 20px;
    }
}

/**/
#hd .bg_style {
    position: relative;
    /* 開啟定位上下文 */
    background-color: #000;
    /* 黑底 */
    overflow: hidden;
    /* 若有需要可隱藏超出的偽元素 */
}

#hd .bg_style>* {
    position: relative;
    z-index: 1;
}

/* 圖片層 */
#hd .bg_style::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/bg_style.png) no-repeat center 65%;
    background-size: 100%;
    opacity: 1;
    z-index: 0;
}

/*experience*/
#hd .section-experience {
    /* background: #e6ebf0; */
    padding: 2vw 0 0;
}

#hd .section-experience .inner {
    max-width: 1500px;
    padding: 0 30px;
    box-sizing: border-box;
    margin: 0 auto;
}

#hd .section-experience .text-content {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

#hd .section-experience .default-title {
    color: #000;
}

#hd .section-experience .image {
    margin-bottom: 30px;
}

#hd .section-experience .image img {
    max-width: 210px !important;
    width: 100%;
    display: block;
}

#hd .section-experience .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin-top: 50px;
}

#hd .section-experience .list .entry {
    width: 30%;
    max-width: 368px;
    margin: 0 1% 60px 1%;
    box-sizing: border-box;
    /* background: #fff; */
    /* border-radius: 15px;
    overflow: hidden; */
    padding: 0 0 30px 0;
}

#hd .section-experience .list .entry h3 {
    text-align: center;
    padding: 0 5px;
    background-color: #1fb3ff;
    background-image: -moz-linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    background-image: -webkit-linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    background-image: linear-gradient(90deg, #1fb3ff 0%, #00f9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}



#hd .section-experience .note {
    max-width: 1100px;
    margin: 0 auto;
    margin-top: 50px;
    font-size: 1em;
}

@media screen and (max-width: 768px) {
    #hd .section-experience .list .entry {
        width: 100%;
        max-width: inherit;
        margin: 0 1% 50px 1%;
    }
}

@media screen and (max-width: 768px) {
    #hd .section-experience .list .entry h4 {
        font-size: 1.2em;
    }

    #hd .section-experience .list .entry p {
        font-size: 1em;
    }
}

@media screen and (max-width: 500px) {
    #hd .section-experience .inner {
        padding: 50px 20px;
    }

    #hd .section-experience .list .entry {
        width: 100%;
    }
}

/**/
.box-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 2vw auto;
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}

/* 第一區塊 */
#hd .box-container p {
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    color: #585858;
    line-height: 1.2;
}

.box-container .top-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.box-container .top-section .left-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.box-container .top-section .left-box * {
    display: inline-block;
}

.box-container .left-box {
    flex: 1 1 200px;
    background: linear-gradient(to bottom, #efeeef, #f4f4f4);
    border: 2px solid #3e75c0;
    color: white;
    padding: 40px 20px;
    text-align: center;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 18px;
    border-radius: 10px;
}

.box-container .left-box strong {
    font-size: 2.5em;
    color: #3e75c0;
}

.box-container .right-boxes {
    flex: 3 1 600px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.box-container .right-box {
    background: linear-gradient(to bottom, #efeeef, #f4f4f4);
    border: 2px solid #3e75c0;
    text-align: center;
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
}

/* 第二區塊 */
.box-container .features {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.box-container .feature-box {
    flex: 1 1 270px;
    background: linear-gradient(to bottom, #efeeef, #f4f4f4);
    border: 2px solid #3e75c0;
    text-align: center;
    padding: 40px 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.box-container .feature-title {
    font-weight: bold;
    font-size: 1.5em;
    color: #000;
    margin-bottom: 10px;
}

.box-container .feature-main {
    font-family: "TTNormsProMedium", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 2.3em;
    line-height: 1.1;
    color: #3e75c0;
    font-weight: bold;
    margin-bottom: 6px;
}

.box-container .feature-sub strong {
    font-size: 2.5em;
    color: #3e75c0;
}

.box-container .feature-sub {
    font-family: "TTNormsProMedium", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    color: #585858;
}

@media (max-width: 768px) {

    .box-container .top-section,
    .box-container .features {
        flex-direction: column;
    }

    .box-container .right-boxes {
        flex: 3 1 0px;
    }
}


/**/
#hd .section-models {
    background: -webkit-linear-gradient(bottom, #010b1a 0%, #041833 100%);
    background: linear-gradient(to bottom, #010b1a 0%, #041833 100%);
}

#hd .section-models .hd-img-container img {
    padding: 0 20px;
}

#hd .section-models .hd-container {
    align-items: center;
}

#hd .section-models .hd-content {
    padding: 0 2em 0 0;
}
#hd .section-models h3:nth-of-type(n+2){
    margin-top: 0.5em;
}
@media screen and (max-width: 950px) {
    #hd .section-models .hd-img-container img {
        padding: 0;
    }

    #hd .section-models .hd-container {
        flex-wrap: wrap;
    }

    #hd .section-models .hd-content {
        padding: 0 0 0 0;
    }

    #hd .section-models .hd-col50 {
        width: 100%;
        padding-bottom: 20px;
    }
}

/**/
#hd .section-Cooling .hd-container {
    align-items: center;
}

#hd .section-Cooling .hd-content {
    padding: 0 2em 0 0;
}

@media screen and (max-width: 950px) {
    #hd .section-Cooling .hd-container {
        flex-wrap: wrap;
    }

    #hd .section-Cooling .hd-content {
        padding: 0 0 0 0;
    }

    #hd .section-Cooling .hd-col50 {
        width: 100%;
        padding-bottom: 20px;
    }
}

#hd video {
    max-width: 100%;
}

#hd .vid-control {
    width: 5em;
    height: 5em;
    background: none;
    border: none;
    box-shadow: none;
    position: absolute;
    right: 0;
    bottom: 0;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    cursor: pointer
}

#hd .vid-control svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

#hd .vid-control .play {
    display: none
}

#hd .vid-control.hd-active .play {
    display: block
}

#hd .vid-control.hd-active .pause {
    display: none
}

#hd .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#hd .trigger-video-toggle {
    position: relative;
    overflow: hidden;
    display: flex;
}

/**/
/*#hd #BTN-Datasheet*/
#hd #BTN-Datasheet {
    position: relative;
    overflow: hidden;
    padding: 0px;
}

#hd #BTN-Datasheet .maintitle {
    text-align: center;
    width: 100%;
    max-width: 1236px;
    margin: 0 auto;
    padding-top: 0;
    padding-right: 18px;
    padding-left: 18px;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
}

#hd #BTN-Datasheet a.Button_Datasheet {
    border: 1px solid #818181 !important;
    cursor: pointer;
    padding: 11px 12px 11px 16px !important;
    text-align: left !important;
    border-radius: 4px;
    -webkit-transition: all .3s;
    display: inline-flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 48px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 197px;
    height: auto !important;
    min-width: 144px;
    font-size: 1.1875rem;
}

#hd #BTN-Datasheet a.Button_Datasheet .Button_Datasheet_Text {
    color: #181818 !important;
    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;
    font-size: 15px;
    white-space: normal !important;
    font-family: TTNormsPro, Roboto, sans-serif;
    -webkit-transition: all .3s;
}

#hd #BTN-Datasheet a.Button_Datasheet .Button_Datasheet_arrowDownloadSVG {
    height: 24px;
    width: 24px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    outline: none;
    margin-left: 10px;

}

#hd #BTN-Datasheet a.Button_Datasheet svg path {
    -webkit-transition: all .3s;
    stroke: #181818;
}

#hd #BTN-Datasheet a.Button_Datasheet:hover {
    background: #0b63a8;
    border: 1px solid #0b63a8 !important;
    -webkit-transition: all .3s;
}

#hd #BTN-Datasheet a.Button_Datasheet:hover .Button_Datasheet_Text {
    color: #fff !important;
    -webkit-transition: all .3s;
}

#hd #BTN-Datasheet a.Button_Datasheet:hover svg path {
    stroke: #fff;
    -webkit-transition: all .3s;
}

/**/

/*KSP*/
#hd .sec-ksp {

    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

#hd .sec-ksp .ksp-container {
    display: grid;
    grid-template-columns: 0.5fr .5fr .6fr .6fr .5fr .5fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 13px;
    grid-row-gap: 13px;
    padding: 20px;
    width: 96%;
    max-width: 1080px;
    margin: 0 auto;
}

#hd .sec-ksp .ksp-container>li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #a7e0f9;
    background: rgba(0, 0, 0, 0.73);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    padding: clamp(0.5em, 2vw, 1.5em)
}

#hd .sec-ksp .ksp-container>li:nth-child(1) {
    grid-area: 3 / 1 / 1 / 4
}

#hd .sec-ksp .ksp-container>li:nth-child(2) {
    grid-area: 3 / 4 / 1 / 7
}

#hd .sec-ksp .ksp-container>li:nth-child(3) {
    grid-area: 5 / 1 / 3 / 3
}

#hd .sec-ksp .ksp-container>li:nth-child(4) {
    grid-area: 5 / 5 / 3 / 3
}

#hd .sec-ksp .ksp-container>li:nth-child(5) {
    grid-area: 6 / 7 / 3 / 5
}

#hd .sec-ksp .ksp-container>li:nth-child(6) {
    grid-area: 7 / 1 / 5 / 3
}

#hd .sec-ksp .ksp-container>li:nth-child(7) {
    grid-area: 7 / 5 / 5 / 3
}

#hd .sec-ksp .ksp-container>li:nth-child(8) {
    grid-area: 9 / 1 / 7 / 3
}

#hd .sec-ksp .ksp-container>li:nth-child(9) {
    grid-area: 9 / 5 / 7 / 3
}

#hd .sec-ksp .ksp-container>li:nth-child(10) {
    grid-area: 9 / 7 / 6 / 5
}

#hd .sec-ksp .ksp-container>li:nth-child(11) {
    grid-area: 7 / 1 / 7 / 3
}

#hd .sec-ksp .ksp-container>li:nth-child(12) {
    grid-area: 2 / 6 / 8 / 7;
}

#hd .sec-ksp .ksp-container>li:nth-child(13) {
    grid-area: 7 / 2 / 6 / 3
}

#hd .sec-ksp .ksp-container>li:nth-child(14) {
    grid-area: 4 / 2 / 5 / 3
}

#hd .sec-ksp .ksp-container>li:nth-child(15) {
    grid-area: 6 / 1 / 6 / 2
}

#hd .sec-ksp .ksp-container>li:nth-child(16) {
    grid-area: 1 / 3 / 2 / 5;
}

#hd .sec-ksp .ksp-container>li:nth-child(17) {
    grid-area: 1 / 5 / 2 / 7;
}

#hd .sec-ksp .ksp-container>li:nth-child(17) {
    background: #171615;
}

#hd .sec-ksp .ksp-container>li:nth-child(17) .rog_first {
    color: #f51829;
    font-size: clamp(1.3em, 2.2vw, 2.2em) !important;
    line-height: 1;
    margin-top: 0;
    font-weight: 500;
    z-index: 1;
    width: 100%;
    position: absolute;
    top: 8%;
}

#hd .sec-ksp .ksp-container>li:nth-child(17) img {
    width: 100%;
    height: 80%;
    bottom: 0;
    top: inherit;
    left: 50%;
    transform: translate(-50%, 0%);
}

#hd .sec-ksp .ksp-container>li:nth-child(16) .rog_first_area {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    z-index: 1;
}

#hd .sec-ksp .ksp-container>li:nth-child(16) .rog_first {
    color: #f51829;
    font-size: clamp(1.3em, 2.8vw, 3em) !important;
    line-height: 1;
    margin-top: 0;
    font-weight: 500;
}

#hd .sec-ksp .ksp-container>li:nth-child(16) strong {
    font-size: clamp(1.3em, 2.8vw, 3em) !important;
    margin-top: 0.25em;
    line-height: 1.1;
}

#hd .sec-ksp .ksp-container>li:nth-child(1) {
    /* padding-left: 4%; */
    /* background-color: #01ffff 16%;
    background-image: -moz-linear-gradient(155deg, #01ffff 16%, blue, #ec00ff 90%);
    background-image: -webkit-linear-gradient(155deg, #01ffff 16%, blue, #ec00ff 90%);
    background-image: linear-gradient(155deg, #01ffff 16%, blue, #ec00ff 90%);
    background-color: #0387ff */
}

/* #hd .sec-ksp .ksp-container>li:nth-child(1) img {
    width: 70%;
    margin: 10% auto 12%
} */
#hd .sec-ksp .ksp-container>li:nth-child(13) img {
    width: 2vw;
}

#hd .sec-ksp .ksp-container>li:nth-child(2) strong {
    font-size: clamp(1.3em, 2.8vw, 3em) !important;
    margin-top: .1em;
}

#hd .sec-ksp .ksp-container>li:nth-child(3) strong {
    margin-top: 0.05em;
    font-size: clamp(1.3em, 1.6vw, 2em) !important;
}

#hd .sec-ksp .ksp-container>li .color-gradient.color_gradient_a {
    background-color: #00fff1 !important;
    background-image: -moz-linear-gradient(135deg, #00fff1 45%, #087ac7 90%) !important;
    background-image: -webkit-linear-gradient(135deg, #00fff1 45%, #087ac7 90%) !important;
    background-image: linear-gradient(135deg, #00fff1 50%, #087ac7 90%) !important;
}

#hd .sec-ksp .ksp-container>li .color-gradient.color_gradient_b {
    background-color: #ff3399 !important;
    background-image: -moz-linear-gradient(135deg, #ff3399 45%, #6601f7 90%) !important;
    background-image: -webkit-linear-gradient(135deg, #ff3399 45%, #6601f7 90%) !important;
    background-image: linear-gradient(135deg, #ff3399 50%, #6601f7 90%) !important;
}

#hd .sec-ksp .ksp-container>li:nth-child(3) .hd-bg {
    object-fit: contain
}

#hd .sec-ksp .ksp-container>li:nth-child(4) strong {
    font-size: clamp(1.3em, 2.1vw, 2em) !important;
    margin-top: .1em;
}

#hd .sec-ksp .ksp-container>li:nth-child(5) .color-gradient-silver {
    font-family: "TradeGothicBold", "TTNormsProRegular", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 500;
    line-height: 1;
    font-size: 2.75em;
    margin-bottom: 0.25em
}

#hd .sec-ksp .ksp-container>li:nth-child(5) .hd-container {
    padding: 0 7%
}

#hd .sec-ksp .ksp-container>li:nth-child(5) img {
    width: 33%;
    margin: 0 8% 0 5%
}

#hd .sec-ksp .ksp-container>li:nth-child(5) ul {
    width: 100%;
    padding-left: 4em;
}

#hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar {
    width: 100%;
    background: #fff;
    font-size: 0.9em;
    color: white;
    /* text-shadow: 0 0 2px black, 0 0 4px black; */
    text-align: left;
    white-space: nowrap;
    padding: 2px 1em 0;
    margin: 10px 0;
    background: url(../img/ksp/bg-stripe.svg) center repeat-x;
    background-size: auto 100%;
    position: relative;
    height: 1.5vw;
    max-height: 25px;
}

#hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar p {
    position: absolute;
    left: -4em;
    top: 0;
}

#hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar.bar-violet {
    width: 100%;
    background: linear-gradient(90deg, #00a0d8, #00e5b6);
}

#hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar.bar-cyan {
    width: 65%;
    background: linear-gradient(90deg, #283dd1, #01d4e3);
}

#hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar.bar-magenta {
    width: 40%;
    background: linear-gradient(90deg, #9e11d8, #f0a9f4);
}

#hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar span {
    position: absolute;
    right: 0.5em;
    top: 12%;
    color: #000;
}

#hd .sec-ksp .ksp-container>li:nth-child(6) strong {
    font-size: clamp(1.3em, 2.8vw, 3em) !important;
    margin-top: .1em
}

#hd .sec-ksp .ksp-container>li:nth-child(7) strong {
    font-size: clamp(1.4em, 2.5vw, 2.7em) !important;
    letter-spacing: -0.05em;
    margin-top: .1em;
    line-height: 1;
}

#hd .sec-ksp .ksp-container>li:nth-child(7) strong {
    margin-left: 10px;
}

#hd .sec-ksp .ksp-container>li:nth-child(6) strong {
    color: #765aff
}


#hd .sec-ksp .ksp-container>li:nth-child(8) strong {
    font-size: clamp(1.3em, 2.8vw, 3em) !important;
    margin-top: 0.25em;
    line-height: 1.1
}

#hd .sec-ksp .ksp-container>li:nth-child(8) strong small {
    display: block;
    font-size: 0.7em;
    letter-spacing: -.018em
}


#hd .sec-ksp .ksp-container>li:nth-child(9) h2 {
    font-family: "ROGFonts", "TradeGothicBold", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: clamp(1.3em, 1.3vw, 2em) !important;
    font-weight: 300;
    letter-spacing: .04em;
    position: absolute;
    bottom: 5%;
    left: 5%;
    right: 0;
    margin: 0 auto;
    z-index: 2;
    text-align: left;
}

#hd .sec-ksp .ksp-container>li:nth-child(9) h2 b {
    display: inline-block;
    width: 100%;
    font-weight: normal;
    font-size: clamp(1.6em, 2vw, 2.4em) !important;
}

#hd .sec-ksp .ksp-container>li:nth-child(9) .hd-award {
    width: 32%;
    position: absolute;
    top: var(--hd-border-radius);
    left: 0
}

#hd .sec-ksp .ksp-container>li:nth-child(10) .hd-container,
#hd .sec-ksp .ksp-container>li:nth-child(11) .hd-container {
    padding: 0 5% 0 3%
}

#hd .sec-ksp .ksp-container>li:nth-child(10) img,
#hd .sec-ksp .ksp-container>li:nth-child(11) img {
    width: 33%;
    margin: 0 5% 0 0
}

#hd .sec-ksp .ksp-container>li:nth-child(10) p,
#hd .sec-ksp .ksp-container>li:nth-child(11) p {
    line-height: 1.125
}

#hd .sec-ksp .ksp-container>li:nth-child(10) strong,
#hd .sec-ksp .ksp-container>li:nth-child(11) strong {
    font-size: clamp(1.3em, 2.5vw, 2.5em) !important;
    letter-spacing: -.005em
}

#hd .sec-ksp .ksp-container>li:nth-child(11) .color-gradient {
    font-size: clamp(1.3em, 2.1vw, 2em) !important;
}

#hd .sec-ksp .ksp-container>li:nth-child(11) img {
    margin-right: 0
}

#hd .sec-ksp .ksp-container>li:nth-child(12) {
    background: none;
    overflow: visible;
    z-index: 2;
    height: 100%;
}

#hd .sec-ksp .ksp-container>li:nth-child(12)>* {
    width: 100%
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .logo-container {
    position: absolute;
    bottom: -5px;
    width: 90%;
    height: 25%;
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .bg-phone {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: 0px;
    z-index: -1;
    height: 100%;
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .bg-home {
    width: 100%;
    border-radius: var(--hd-border-radius)
}

#hd .sec-ksp .ksp-container>li:nth-child(12) figure {
    position: absolute;
    z-index: 2;
    top: 16%;
    width: 91%;
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .title-container {
    padding: 0 5%;
    margin-top: -20%;
    position: relative;
    z-index: 2
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .title-container img {
    width: 25%;
    margin: 0 3% 0 0
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .title-container p {
    font-family: "TradeGothicBold", "TTNormsProRegular", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 500;
    font-size: 1.6vw;
    letter-spacing: .022em;
    text-align: left
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .title-container strong {
    font-size: 2.7vw;
    letter-spacing: -.018em;
    white-space: nowrap;
    margin-bottom: -0.125em
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .bg-gradient {
    position: absolute;
    top: 57%;
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .features-container .color-gradient,
#hd .sec-ksp .ksp-container>li:nth-child(12) .features-container .color-gradient-silver {
    background-color: #88e7fc;
    background-image: -moz-linear-gradient(270deg, #88e7fc, #00aae7);
    background-image: -webkit-linear-gradient(270deg, #88e7fc, #00aae7);
    background-image: linear-gradient(270deg, #88e7fc, #00aae7)
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .features-container p {
    font-family: "TTNormsProNormal", "TTNormsProRegular", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: normal;
    font-size: 1.3vw;
    line-height: 1.125
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .features-container strong {
    font-size: 2.5vw;
    letter-spacing: -.02em;
    white-space: nowrap;
    margin-top: 0.125em
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .features-container .hd-frame {
    padding-block: 6.5%
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .hd-frame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 18px 10px;
    margin: 5px;
    position: relative;
    z-index: 2;
}

#hd .sec-ksp .ksp-container>li:nth-child(13) strong {
    font-size: clamp(1.2em, 1.9vw, 1.9em);
    margin-top: 10px;
}

#hd .sec-ksp .ksp-container>li:nth-child(14) .color-gradient {
    font-size: clamp(1.3em, 2.1vw, 2em) !important;
}

#hd .sec-ksp .ksp-container>li:nth-child(15) .color-gradient {
    font-size: clamp(1.3em, 2.1vw, 2em) !important;
}

/* #hd .sec-ksp .ksp-container>li:nth-child(12) .hd-frame:before,
#hd .sec-ksp .ksp-container>li:nth-child(12) .hd-frame:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--hd-border-radius);
    z-index: -1
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .hd-frame:before {
    background-image: radial-gradient(circle at 100% 100%, transparent calc(var(--hd-border-radius) - 1px), #00479d calc(var(--hd-border-radius) - 1px), #00479d var(--hd-border-radius), transparent var(--hd-border-radius)), linear-gradient(to right, #00479d, #00b3ed), radial-gradient(circle at 0% 100%, transparent calc(var(--hd-border-radius) - 1px), #00b3ed calc(var(--hd-border-radius) - 1px), #00b3ed var(--hd-border-radius), transparent var(--hd-border-radius)), linear-gradient(to bottom, #00b3ed, #00479d), radial-gradient(circle at 0% 0%, transparent calc(var(--hd-border-radius) - 1px), #00479d calc(var(--hd-border-radius) - 1px), #00479d var(--hd-border-radius), transparent var(--hd-border-radius)), linear-gradient(to left, #00479d, rgba(0, 71, 157, 0)), radial-gradient(circle at 100% 0%, transparent calc(var(--hd-border-radius) - 1px), rgba(0, 71, 157, 0) calc(var(--hd-border-radius) - 1px), rgba(0, 71, 157, 0) var(--hd-border-radius), transparent var(--hd-border-radius)), linear-gradient(to top, rgba(0, 71, 157, 0), #00479d);
    background-size: var(--hd-border-radius) var(--hd-border-radius), calc(100% - var(--hd-border-radius) * 2) 1px, var(--hd-border-radius) var(--hd-border-radius), 1px calc(100% - var(--hd-border-radius) * 2);
    background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
    background-repeat: no-repeat
} */

#hd .sec-ksp .ksp-container>li:nth-child(12) .hd-frame:after {
    width: calc(100% - $border-width);
    height: calc(100% - $border-width);
    margin: 1px;
    background-color: rgba(0, 159, 189, 0.5);
    background-image: -moz-linear-gradient(20deg, rgba(0, 159, 189, 0.5), rgba(0, 71, 157, 0) 50%);
    background-image: -webkit-linear-gradient(20deg, rgba(0, 159, 189, 0.5), rgba(0, 71, 157, 0) 50%);
    background-image: linear-gradient(20deg, rgba(0, 159, 189, 0.5), rgba(0, 71, 157, 0) 50%);
    background-color: transparent
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .hd-frame p {
    line-height: 1.125
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container {
    padding: 0 3%;
    z-index: 2;
    position: relative;
    width: 95%;
    margin: 0 auto;
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container img {
    margin: 0 auto
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container .color-gradient,
#hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container .color-gradient-silver {
    background-color: #88e7fc;
    background-image: -moz-linear-gradient(270deg, #88e7fc 50%, #00aae7);
    background-image: -webkit-linear-gradient(270deg, #88e7fc 50%, #00aae7);
    background-image: linear-gradient(270deg, #88e7fc 50%, #00aae7)
}

#hd .sec-ksp .ksp-container>li:nth-child(12) p.Network_title {
    position: absolute;
    top: 8%;
}

#hd .sec-ksp .ksp-container>li:nth-child(12) p.rog_first {
    position: absolute;
    top: 45%;
    color: #f51829;
    font-size: clamp(1.2em, 1.5vw, 2.0em) !important;
    line-height: 1;
    margin-top: 0;
    font-weight: 500;
    z-index: 3;
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container p {
    font-family: "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    /* font-weight: 600; */
    font-size: 1em;
    line-height: 1;
    margin-top: 10px;
    white-space: nowrap
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #131313;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    margin: 0 5px;
    padding: 5%;
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .logo-container img {
    width: 70%;
    max-width: 80px !important;
    margin: 0 auto .5em;
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .logo-container .hd-frame {
    /*     justify-content: flex-start; */
    border-radius: 15px;
    background: #131313;
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .logo-container .hd-frame:before {
    opacity: 0.4
}

#hd .sec-ksp .ksp-container>li:nth-child(12) .logo-container .hd-frame:after {
    background-color: rgba(125, 138, 134, 0.5);
    background-image: -moz-linear-gradient(20deg, rgba(125, 138, 134, 0.5), rgba(30, 34, 40, 0) 30%);
    background-image: -webkit-linear-gradient(20deg, rgba(125, 138, 134, 0.5), rgba(30, 34, 40, 0) 30%);
    background-image: linear-gradient(20deg, rgba(125, 138, 134, 0.5), rgba(30, 34, 40, 0) 30%);
    background-color: transparent
}

#hd .sec-ksp .hd-container {
    width: 100%
}

#hd .sec-ksp p.p1 {
    font-family: "TTNormsProRegular", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    color: #fff;
    line-height: 1.1em;
    margin: 0;
    letter-spacing: 0;
    font-size: clamp(2em, 4vw, 2em) !important;
}

#hd .sec-ksp p.p2 {
    font-family: "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.2em;
    color: #fff;
    font-weight: normal;
    line-height: 1.3em;
    margin: 5px 0 0 0;
    letter-spacing: -0.02em;
}

#hd .sec-ksp p.p3 {
    font-family: "TTNormsProRegular", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    color: #fff;
    line-height: 1.1em;
    margin: 0;
    letter-spacing: 0;
    font-size: clamp(3em, 5vw, 3em) !important;
}

#hd .sec-ksp strong {
    font-family: "TradeGothicBold", "TTNormsProRegular", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 500;
    line-height: 1.1;
    display: block;
    font-size: clamp(1.2em, 1.8vw, 1.8em);
    margin-top: 0.2em !important;
    margin-bottom: -0.2em !important;
}

#hd .sec-ksp strong small {
    font: inherit;
    font-size: 0.65em
}

#hd .sec-ksp .hd-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover
}

#hd .sec-ksp .ksp-container>li:nth-child(1) .text {
    padding: 10px 20px 10px 10px;
    width: 60%;
}

#hd .sec-ksp .ksp-container>li:nth-child(1) .image {
    width: 40%;
    padding: 20px 0px 20px 20px;
}

#hd .sec-ksp .ksp-container>li:nth-child(1) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#hd .sec-ksp .ksp-container>li .text-left {
    text-align: left !important;
}

#hd .text-left {
    text-align: left !important;
}

#hd .text-center {
    text-align: center !important;
}

#hd .sec-ksp .ksp-container>li .text-center {
    text-align: center !important;
}

#hd .sec-ksp .ksp-container>li:nth-child(4) {
    background: none;
    border: none;
    overflow: inherit;
}

#hd .sec-ksp .ksp-container>li:nth-child(4) .onepager_pd {
    width: 130%;
    margin: 0 0 -10% -28%;
    max-width: 498px !important;

}

@media screen and (max-width: 1600px) {
    #hd .sec-ksp .ksp-container>li:nth-child(5) img {
        width: 25%;
        margin-left: 0
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar {
        margin: 5px 0
    }

    #hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container p {
        font-size: .95vw
    }

    #hd .sec-ksp .ksp-container p {
        font-size: 1.25em
    }
}

@media screen and (max-width: 1440px) {
    #hd .sec-ksp .ksp-container>li:nth-child(5) .color-gradient-silver {
        font-size: 2.25em
    }

    #hd .sec-ksp .ksp-container>li:nth-child(9) .hd-award {
        width: 28%
    }

    #hd .sec-ksp .ksp-container p {
        font-size: 1em
    }
}

@media screen and (max-width: 1280px) {
    :root {
        --hd-border-radius: 20px
    }

    #hd .sec-ksp .ksp-container {
        grid-column-gap: 10px;
        grid-row-gap: 8px;
        padding: 16px
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar {
        font-size: 0.75em;
        padding-inline: 0.5em
    }

    #hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container p {
        font-family: "TTNormsProRegular", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: 400;
        font-size: 0.8vw;
    }

    /* #hd .sec-ksp .ksp-container p {
        font-size: 0.875em
    } */
}

@media screen and (max-width: 1023px) {

    /* #hd .sec-ksp p{
        font-size: clamp(1.4em, 1.4vw, 1.4em) !important;
    }
    #hd .sec-ksp .ksp-container>li:nth-child(5) p{
        font-size: clamp(1em, 1vw, 1em) !important;
    } */
    #hd .sec-ksp .ksp-container>li:nth-child(10) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(11) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(2) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(6) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(7) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(3) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(4) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(14) .color-gradient,
    #hd .sec-ksp .ksp-container>li:nth-child(8) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(15) .color-gradient,
    #hd .sec-ksp .ksp-container>li:nth-child(13) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(11) .color-gradient,
    #hd .sec-ksp .ksp-container>li:nth-child(16) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container li strong {
        font-size: clamp(2em, 2.5vw, 2.5em) !important;
        margin-bottom: 0 !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(16) .rog_first {
        font-size: clamp(3em, 2.8vw, 3em) !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(12) p.Network_title strong,
    #hd .sec-ksp .ksp-container>li:nth-child(12) p.rog_first {
        font-size: clamp(3em, 2.8vw, 3em) !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(13) img {
        width: 20%;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(17) .rog_first {

        font-size: clamp(1.2em, 3vw, 3em) !important;

    }

    #hd .sec-ksp .ksp-container>li:nth-child(17) img {
        width: 90%;
        height: 80%;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar {
        height: 1.5em;
    }

    #hd .sec-ksp .ksp-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr
    }

    #hd .sec-ksp .ksp-container>li:nth-child(1) {
        grid-area: 1 / 1 / 1 / 1;
        z-index: 3;
        /* background: none; */
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(2) {
        grid-area: 1 / 3 / 2 / 2
    }

    #hd .sec-ksp .ksp-container>li:nth-child(3) {
        grid-area: 2 / 1 / 2 / 1
    }

    #hd .sec-ksp .ksp-container>li:nth-child(4) {
        grid-area: 2 / 3 / 2 / 2
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) {
        grid-area: 3 / 1 / 3 / 2
    }

    #hd .sec-ksp .ksp-container>li:nth-child(6) {
        grid-area: 3 / 3 / 3 / 2
    }

    #hd .sec-ksp .ksp-container>li:nth-child(7) {
        grid-area: 5 / 1 / 4 / 2
    }

    #hd .sec-ksp .ksp-container>li:nth-child(8) {
        grid-area: 5 / 2 / 4 / 2
    }

    #hd .sec-ksp .ksp-container>li:nth-child(9) {
        grid-area: 6 / 1 / 5 / 2
    }

    #hd .sec-ksp .ksp-container>li:nth-child(10) {
        grid-area: 6 / 2 / 5 / 2
    }

    #hd .sec-ksp .ksp-container>li:nth-child(11) {
        grid-area: 8 / 1 / 8 / 3
    }

    #hd .sec-ksp .ksp-container>li:nth-child(12) {
        grid-area: 12 / 1 / 11 / 3
    }

    #hd .sec-ksp .ksp-container>li:nth-child(13) {
        grid-area: 8 / 2 / 7 / 3
    }

    #hd .sec-ksp .ksp-container>li:nth-child(14) {
        grid-area: 5 / 2 / 6 / 3
    }

    #hd .sec-ksp .ksp-container>li:nth-child(15) {
        grid-area: 8 / 1 / 7 / 2
    }

    #hd .sec-ksp .ksp-container>li:nth-child(16) {
        grid-area: 10 / 1 / 9 / 3
    }

    #hd .sec-ksp .ksp-container>li:nth-child(17) {
        grid-area: 11 / 1 / 10 / 3
    }

    /* #hd .sec-ksp .ksp-container>li:nth-child(1) img {
        width: 60%;
        margin: 5% auto 6%
    } */


}

@media screen and (max-width: 768px) {
    #hd .sec-ksp p {
        font-size: clamp(1.2em, 1.2vw, 1.2em) !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(-n+17) strong {
        font-size: clamp(2em, 2vw, 2em) !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(16) .rog_first {
        font-size: clamp(3em, 3vw, 3em) !important;
    }
}

@media screen and (max-width: 620px) {
    #hd .sec-ksp .ksp-container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(4) .onepager_pd {
        width: 130%;
        margin: 0 0 -4% -22%;
        max-width: 498px !important;
    }

    #hd .sec-ksp p {
        font-size: clamp(1.2em, 1.2vw, 1.2em) !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) p {
        font-size: clamp(1em, 1vw, 1em) !important;
    }
    #hd .sec-ksp .ksp-container>li:nth-child(5) p.p1 {
        font-size: clamp(2em, 1vw, 1em) !important;
    }
    #hd .sec-ksp .ksp-container>li:nth-child(5) ul {
        padding-left: 2em;
        margin-left: 0.5em;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar p {
        left: -4em;
        font-size: 0.8em !important;
        margin: 5px 0;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar span {
        font-size: 0.7em;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(10) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(11) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(2) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(6) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(7) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(3) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(4) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(14) .color-gradient,
    #hd .sec-ksp .ksp-container>li:nth-child(8) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(15) .color-gradient,
    #hd .sec-ksp .ksp-container>li:nth-child(13) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(11) .color-gradient,
    #hd .sec-ksp .ksp-container>li:nth-child(16) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container li strong {
        font-size: clamp(1.6em, 2.0vw, 2.5em) !important;
        margin-bottom: 0 !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(16) .rog_first {
        font-size: clamp(2em, 2.2vw, 3em) !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(12) p.Network_title strong,
    #hd .sec-ksp .ksp-container>li:nth-child(12) p.rog_first {
        font-size: clamp(2em, 2.2vw, 3em) !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(13) img {
        width: 20%;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar {
        /* height: 80%; */
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) img {
        width: 80px
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar {
        font-size: 0.875em;
        margin: 5px 0
    }

    #hd .sec-ksp .ksp-container p {
        font-size: 1em
    }

    #hd .sec-ksp .ksp-container>li:nth-child(17) img {
        height: 70%;
    }
}

@media screen and (max-width: 480px) {

    #hd .sec-ksp p {
        font-size: clamp(1.2em, 1.2vw, 1.2em) !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) p {
        font-size: clamp(1em, 1vw, 1em) !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) ul {
        padding-left: 2em;
        margin-left: 0.5em;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar p {
        left: -4em;
        font-size: 0.8em !important;
        margin: 5px 0;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar span {
        font-size: 0.7em;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(10) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(11) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(2) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(6) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(7) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(3) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(4) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(14) .color-gradient,
    #hd .sec-ksp .ksp-container>li:nth-child(8) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(15) .color-gradient,
    #hd .sec-ksp .ksp-container>li:nth-child(13) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(11) .color-gradient,
    #hd .sec-ksp .ksp-container>li:nth-child(16) strong,
    #hd .sec-ksp .ksp-container>li:nth-child(12) .icon-container li strong {
        font-size: clamp(1.6em, 2.0vw, 2.5em) !important;
        margin-bottom: 0 !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(16) .rog_first {
        font-size: clamp(1.6em, 2.2vw, 3em) !important;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(12) p.Network_title strong,
    #hd .sec-ksp .ksp-container>li:nth-child(12) p.rog_first {
        font-size: clamp(1.6em, 2.2vw, 3em) !important;
    }

    #hd .sec-ksp .ksp-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr
    }

    #hd .sec-ksp .ksp-container>li:nth-child(12) .bg-phone {
        height: auto;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(12) p.Network_title {
        top: 18%;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(12) figure {
        top: 26%;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(12) p.rog_first {
        top: 47%;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar.bar-magenta {
        width: 55%;
    }

    #hd .sec-ksp .ksp-container>li:nth-child(5) .hd-bar.bar-cyan {
        width: 77%;
    }

    /*     #hd .sec-ksp .ksp-container>li:nth-child(10) {
        grid-area: 2 / 1 / 3 / 3;
    }
        #hd .sec-ksp .ksp-container>li:nth-child(5) {
        grid-area: 3 / 1 / 3 / 3;
    }
    #hd .sec-ksp .ksp-container>li:nth-child(2) {
        grid-area: 3 / 1 / 4 / 2
    }

    #hd .sec-ksp .ksp-container>li:nth-child(3) {
        grid-area: 3 / 2 / 4 / 3
    }

    #hd .sec-ksp .ksp-container>li:nth-child(4) {
        grid-area: 5 / 1 / 6 / 2
    } */
}

/*#hd #ASUS-Datasheet*/
#hd #ASUS-Datasheet{
    position: relative;
    overflow: hidden;
    padding: 0px;
        background: #fff;
        padding-top: 5px;
    padding-bottom: 4em;
}
#hd #ASUS-Datasheet .maintitle {
    text-align: center;
    width: 100%;
    max-width: 1236px;
    margin: 0 auto;
    padding-top: 0;
    padding-right: 18px;
    padding-left: 18px;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
}
#hd #ASUS-Datasheet a.Button_Datasheet{
    border: 1px solid #818181 !important;
    cursor: pointer;
    padding: 11px 12px 11px 16px !important;
    text-align: left !important;
        border-radius: 4px;
            -webkit-transition: all .3s;
            display: inline-flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 48px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 197px;
    height: auto !important;
    min-width: 144px;
        font-size: 1.1875rem;
}

#hd #ASUS-Datasheet a.Button_Datasheet .Button_Datasheet_Text{
        color: #181818 !important;
            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;
    font-size: 15px;
    white-space: normal !important;
    font-family: TT Norms Pro, Roboto, sans-serif;
    -webkit-transition: all .3s;
}
#hd #ASUS-Datasheet a.Button_Datasheet .Button_Datasheet_arrowDownloadSVG{
    height: 24px;
    width: 24px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    outline: none;
    margin-left: 10px;
        
}
#hd #ASUS-Datasheet a.Button_Datasheet svg path{
    -webkit-transition: all .3s;
    stroke: #181818;
}

#hd #ASUS-Datasheet a.Button_Datasheet:hover{
    background: #0b63a8;
        border: 1px solid #0b63a8 !important;
    -webkit-transition: all .3s;
}
#hd #ASUS-Datasheet a.Button_Datasheet:hover .Button_Datasheet_Text{
    color: #fff !important;
    -webkit-transition: all .3s;
}
#hd #ASUS-Datasheet a.Button_Datasheet:hover svg path{
    stroke: #fff;
    -webkit-transition: all .3s;
}

/*# sourceMappingURL=hd-style.css.map */