@media screen and (max-width: 1024px) {
    ul.header-nav > li > a {
        padding: 0 7px
    }

    .header-nav-wrapper .nav-external {
        border-left: 0;
        box-shadow: none;
        padding-left: 0
    }
}


@media screen and (max-width: 1024px) {
    #advan-header .header-logo {
        width: 146px;
        height: 30px
    }

        #advan-header .header-logo a {
            background-image: url(css-img/advantech-logo.svg);
            background-image: url(css-img/advantech-logo-notagl.png)\9
        }

    #advan-header {
        padding-bottom: 0
    }
}

@media screen and (max-width: 1023px) {
    #advan-heading, #advan-heading .breadcrumb {
        margin-bottom: 2%
    }

    .header-panel-wrapper {
        position: static;
        margin-bottom: 20px;
        padding: 0 3%;
        box-sizing: border-box;
    }

    .row-maxwidth-100pct {
        padding: 0 4%;
        width: auto
    }

    .register-panel .panel-block {
        float: none
    }

    .search-Mainbox {
        margin-top: 2%;
    }

    .block-register {
        width: 100%;
        margin-bottom: 0px
    }

        .block-register > div {
            padding-left: 0;
            background: none;
        }

    .block-login {
        width: 100%;
        margin-left: auto
    }

    .row-maxwidth-95pct {
        width: 95%
    }

    .row-maxwidth-80pct {
        width: 90%;
        min-width: auto;
        margin: 0 auto
    }

    .usermenu-login .account-popup ol li.mb-username {
        display: block;
        font-size: 12px;
        line-height: 24px;
        margin-bottom: 6px
    }

    .user-language {
        border: 0;
        padding-right: 0
    }

        .user-language:hover a, .user-language:hover {
            background-color: transparent;
            color: #004280
        }

            .user-language:hover i {
                color: #004280
            }

    .user-language {
        float: right
    }

        .user-language a {
            text-indent: -9999px;
            padding: 3px 0
        }

        .user-language i {
            font-size: 20px;
            margin-top: 4px;
            margin-left: 0
        }

    .user-live-chat {
        background: #fff;
        color: #004280;
        padding: 0 10px 0 15px !important;
    }

        .user-live-chat i {
            font-size: 20px;
        }

        .user-live-chat:hover {
            background: #fff;
            color: #004280;
        }

    .toggleMenu {
        margin: 28px 0 20px 10px;
    }
}

@media screen and (max-width: 500px) {
    .block-register > div {
        background: none;
        padding-left: 0
    }

    .row-maxwidth-95pct {
        width: 90%
    }
}

@media screen and (max-width: 1023px) {
    .recent-panel {
        display: none
    }

    .compare-panel {
        display: none
    }
}

@media screen and (max-width: 1023px) {
    #advan-header .header-usermenu {
        margin: 28px 0 20px
    }

    #advan-header .user-history {
        display: none
    }

    .header-usermenu > li > a {
        margin-left: 21px;
        margin-right: 0;
        padding-left: 23px;
        text-indent: -9999px
    }

    .header-usermenu > li.usermenu-register > span {
        display: none
    }

    /*li.usermenu-register > a.register-icon-svg {
        background-size: 24px;
        background-position: right;
        padding-left: 24px;
    }*/

    /*    .header-usermenu li.usermenu-myadv,
    .header-usermenu li.usermenu-register {
        display: none;
    }*/

    .header-usermenu li.usermenu-customize {
        display: none;
    }

    .header-usermenu li.usermenu-myadv,
    html:not([lang="zh-cn"]):not([lang="en-us"]) .header-usermenu li.usermenu-register {
        display: none;
    }

    .header-nav li.usermenu-myadv,
    html:not([lang="zh-cn"]):not([lang="en-us"]) .header-nav li.usermenu-register {
        display: block;
    }

        .header-nav li.usermenu-myadv > a.myadv-icon-svg,
        .header-nav li.usermenu-register > a.register-icon-svg {
            background-position: left 40%;
            background-repeat: no-repeat;
            background-size: 22px;
            /*padding-left: 28px;*/
            text-indent: 28px;
            color: #004280;
            font-weight: bold;
        }

    .header-nav li.usermenu-customize {
        display: flex;
        margin-left: 0;
        align-items: center;
    }

        .header-nav li.usermenu-customize i {
            margin-left: 2px;
            margin-right: 6px;
        }

        .header-nav li.usermenu-customize > a {
            color: #004280;
            font-weight: bold;
        }

    .header-usermenu li.usermenu-search > a {
        padding-left: 21px
    }

    .header-usermenu li.user-language {
        margin-left: 21px
    }

    .header-usermenu .user-language a,
    .header-usermenu .user-live-chat a {
        display: none;
    }

    .active {
        display: block
    }
}

@media screen and (max-width: 1023px) {
    ul.header-nav {
        width: 100%;
        border-top: 1px solid #ccc
    }

    .header-nav-wrapper .nav-external {
        border-left: 0;
        padding-left: 0;
        border-top: #fff 1px solid;
        box-shadow: 0 -2px #ccc
    }

    ul.header-nav > li {
        float: none;
        width: 100%;
        clear: both;
        border-bottom: 1px solid #ccc
    }

        ul.header-nav > li > a {
            padding: 0%;
            line-height: 45px;
            width: 100%;
            box-sizing: border-box
        }

    html[lang=ru-ru] ul.header-nav > li > a,
    html[lang=ja-jp] ul.header-nav > li > a {
        padding: 0;
    }

    ul.header-nav > li > a::after {
        content: "";
        clear: both
    }

    ul.header-nav > li > a > i {
        line-height: 46px;
        float: right;
        margin-right: 10px
    }

    ul.header-nav > li > a:hover::after {
        opacity: 0;
        transition: none;
        -webkit-transition: none;
        -o-transition: none
    }

    ul.header-nav > li.show-mega > a::after {
        opacity: 1 !important;
        transition: none;
        -webkit-transition: none;
        -o-transition: none
    }

    ul.header-nav > li.show-mega > div {
        position: static
    }

    ul.header-nav .col1 {
        float: none;
        width: 100% !important;
        padding-right: 0
    }

    ul.header-nav .cols3 .col1 {
        padding-right: 0
    }

    ul.header-nav h5 {
        margin: 20px 20px 15px 20px
    }

        ul.header-nav h5.grouptitle-empty {
            padding: 0;
            line-height: 0;
            margin: 0
        }

        ul.header-nav h5.grouptitle-sub {
            padding-top: 35px;
            padding-bottom: 10px
        }

    ul.header-nav ol li a {
        display: block;
        padding-top: 13px;
        padding-bottom: 13px;
        border-bottom: solid 1px #ccc
    }

        ul.header-nav ol li a:hover {
            text-decoration: none;
            background: #ebebeb
        }

    ul.header-nav .col1 p {
        margin: 0 20px
    }

    ul.header-nav .col1 .searchBox {
        margin: 2.5% 20px 0 20px;
        width: auto;
        max-width: 100% !important
    }
}

@media screen and (max-width: 1023px) {
    .fixed-element {
        border: 0
    }

        .fixed-element .previous {
            top: auto;
            left: auto;
            right: 25px;
            bottom: 65px
        }
}

@media screen and (max-width: 500px) {
    .addthis_sharing_toolbox {
        float: none;
        width: 100%;
        background-color: #4d4d4d;
        display: block;
        clear: both !important;
        padding: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000;
        text-align: center;
        opacity: .9;
        filter: alpha(opacity=90)
    }

    .at-share-btn-elements a {
        background-color: transparent !important
    }

        .at-share-btn-elements a .at-icon-wrapper, .at-share-btn-elements a .at-icon-wrapper svg {
            line-height: 150% !important;
            height: 33px !important;
            width: 33px !important
        }

    .at-style-responsive .at-share-btn {
        padding-bottom: 0 !important
    }
}

@media screen and (max-width: 960px) {
    .aonline-contactTitle {
        display: none
    }

    .aonline-contact {
        border-left: 0;
        padding-left: 0;
        width: 100%
    }

        .aonline-contact li {
            margin-right: 0;
            width: 21%
        }
}

@media screen and (max-width: 1023px) {
    ul.header-nav ol li {
        margin: 0 20px
    }

    .aonline-contact {
        width: 85%;
        padding: 5px 7.5%
    }

        .aonline-contact li {
            width: 47%;
            font-size: 16px;
            line-height: 165%;
            background-size: 22px 22px;
            padding: 9px 0;
            margin: 2px 0
        }
}

@media screen and (max-width: 500px) {
    .aonline-contactTitle {
        float: none;
        width: auto;
        margin: 0 0;
        padding-top: 15px;
        padding-right: 0;
        padding-left: 4%;
        text-align: left
    }

    .aonline-contact {
        float: none;
        border-left: 0;
        margin: 0 0;
        width: 90%;
        padding-left: 5%;
        padding-right: 5%
    }

        .aonline-contact li {
            float: none;
            width: 90%
        }

            .aonline-contact li i {
                font-size: 18px
            }
}

@media screen and (max-width: 1023px) {
    .footer-nav-wrapper .footer-logo {
        text-align: center;
        width: 48%;
        line-height: 150%
    }

    .footer-nav-wrapper {
        width: 85%;
        padding-left: 7.5%;
        padding-right: 7.5%
    }

        .footer-nav-wrapper .footer-nav {
            width: 51%;
            padding: 0
        }

            .footer-nav-wrapper .footer-nav ul li {
                margin-bottom: 3%;
                float: none;
                display: block
            }

    .footer-sub-item li a {
        padding: 11px 0
    }

    .footer-sub-item.second-col {
        margin-top: 30px;
    }

    .footer-contact .card-item .cardBtn a {
        padding: 12px 20px
    }
}

@media screen and (max-width: 500px) {
    .footer-nav-wrapper {
        width: 90%;
        padding-left: 4.5%;
        padding-right: 4.5%
    }

        .footer-nav-wrapper .footer-logo {
            margin: 15px 0;
            text-align: left
        }

        .footer-nav-wrapper .footer-nav {
            width: 100%;
            margin: 0;
            margin-bottom: 15px
        }
}

@media screen and (max-width: 500px) {
    .footer-wrapper {
        padding: 2% 4%
    }

    .footer-copyright {
        margin-top: 3%;
        margin-bottom: 3%
    }

        .footer-copyright li {
            margin-bottom: 2%
        }
}

@media screen and (max-width: 1023px) {
    .header-nav .productMenu .col1 {
        width: 100%
    }

    .header-nav .productMenu h5 {
        padding-top: 35px !important;
        padding-bottom: 5px
    }

    .header-nav .productMenu .cols-brdr {
        margin-top: 35px !important
    }

    .search-input-txt {
        font-size: 14px;
        left: 5px;
        transform: translate(0,-50%)
    }

    .block-search {
        padding: 1% 0% 3.5% 0%;
    }

    .search-Mainbox {
        margin: 2.5% auto 0 auto;
    }
}

@media screen and (max-width: 500px) {
    .search-panel a.search-suggestion-select h4:first-child {
        margin-top: 2%
    }

    .search-panel .search-input {
        font-size: 22px;
        width: calc(100% - 24% - 15px - 20px - 20px);
        height: 48px
    }

    .search-panel .search-btnSubmit, .search-panel .search-btnSubmit-svg {
        width: 24%;
        height: 48px
    }

    .search-panel .search-btnClear, .search-panel .search-btnClear-svg {
        right: calc(24% + 15px)
    }

    .search-input-txt {
        max-width: 60%;
        top: 60px;
        left: 5px;
        font-size: 14px;
        transform: translate(0,-50%)
    }

    .block-search {
        padding-bottom: 40px
    }

    #search-panel .search-Mainbox .search-input::-webkit-input-placeholder {
        font-size: 16px
    }

    #search-panel .search-Mainbox .search-input::-moz-placeholder {
        font-size: 16px
    }

    #search-panel .search-Mainbox .search-input:-ms-input-placeholder {
        font-size: 16px
    }

    #search-panel .search-Mainbox .search-input::placeholder {
        font-size: 16px
    }
}

@media screen and (max-width: 580px) {
    .pagination ul {
        margin-left: 0
    }

        .pagination ul li a {
            padding: 8px 11px
        }

    .pagination, .act-btn {
        padding: 25px 0
    }
}

@media screen and (max-width: 1023px) {
    li .usermenu-register a {
        display: none;
    }

        li.usermenu-register a.usermenu-login {
            display: none
        }

    li.usermenu-login > a.register-icon-svg {
        height: 23px
    }

    #main-menu-login .col1 h5 {
        margin: 0 0;
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 14px;
        line-height: 1.3em;
        color: #4d4d4d;
        font-weight: normal
    }

    #main-menu-login .row-brdrgray {
        padding: 0 0 0 0
    }
    /*Scrollbar*/
    .AI-search-suggestionBox::-webkit-scrollbar {
        width: 6px;
    }

    .AI-search-suggestionBox::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

        .AI-search-suggestionBox::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

    .AI-search-suggestionBox::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
}

@media screen and (max-width: 768px) {
    #main-menu-login {
        display: block
    }
}

@media screen and (max-width: 1023px) {
    .footer-nav-wrapper {
        box-sizing: content-box
    }

        .footer-nav-wrapper .col-6 {
            float: none;
            width: 100%;
            max-width: 100%;
            margin-bottom: 5%
        }

    .footer-contact .card-item {
        max-width: 100%
    }

    .footer-menu .sub-title {
        margin-bottom: 5px
    }
}

@media screen and (max-width: 580px) {
    .footer-nav-wrapper .col-6 {
        margin-bottom: 0
    }

    .footer-menu {
        float: none;
        width: 100%;
        margin-bottom: 5%
    }

    .col-6:last-child .footer-menu {
        width: 100%;
    }

        .col-6:last-child .footer-menu:last-child {
            width: 100%;
            margin-top: -5%;
        }

    .footer-menu .sub-title {
        margin-bottom: 2%
    }
}

/*AI Search*/
@media screen and (max-width: 1023px) {
    .AI-search-suggestionBox {
        flex-wrap: wrap;
        flex-direction: column;
        padding: 15px 0 0;
    }

        .AI-search-suggestionBox .keyword {
            width: 100%;
            margin-bottom: 3%;
            padding: 0 10px 0;
            box-sizing: border-box;
        }

        .AI-search-suggestionBox .recommended {
            width: 100%;
            padding: 3% 10px 15px 10px;
            box-sizing: border-box;
            border-top: 1px solid #ccc;
            display: block;
        }

            .AI-search-suggestionBox .recommended .productItem .info {
                width: 79%;
            }

            .AI-search-suggestionBox .recommended .productItem .product-img {
                width: 21%;
            }
}

@media screen and (max-width: 580px) {
    .AI-search-suggestionBox {
        padding-top: 28px;
        overflow-y: scroll;
        display: block;
    }

    .search-results .AI-search-suggestionBox {
        padding-top: 9px;
    }

    .AI-search-suggestionBox h4 {
        padding: 6px 0;
    }

    .AI-search-suggestionBox .recommended .productItem {
        gap: 2%;
    }

        .AI-search-suggestionBox .recommended .productItem .info {
            width: 70%;
        }

        .AI-search-suggestionBox .recommended .productItem .product-img {
            width: 30%;
        }

    .AI-search-suggestionBox .keyword .keywordItem i {
        padding-top: 2px;
    }
}