@import url('font-awesome.css');
@charset "utf-8";
:root {
    --color-main-light: #1aa0e2;
    --color-main-light-hover: #3fafe7;
    --color-main-dark: #1d3c6f;
    --main-color: #1aa0e2;
    --main-color-bg: #1d3c6f;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-radius-lg: 8px;
    --color-yellow: #F9E547;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: Microsoft New Tai Lue, Arial, sans-serif, serif;
    background-position: top center;
    background-repeat: no-repeat;
    font-weight: normal;
    font-size: 16px;
    -webkit-text-size-adjust: none;
    color: #393939;
}

html {
    overflow-x: hidden;
}

.clear {
    clear: both;
}

a {
    color: var(--color-main-light);
    text-decoration: none;
    cursor: pointer;
}

p {
    padding: 5px 0 10px;
    margin: 0;
}

ol li a {
    color: var(--color-main-light);
}

ol li a:hover {
    color: #1f3e73;
}

ol,
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

h3 {
    font-size: 18px;
    font-weight: bold;
}

h4 {
    font-size: 16px;
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
}

img {
    max-width: 100%;
    vertical-align: top;
}

sub,
sup {
    position: relative;
    font-size: 50%;
    line-height: 0;
}

a:focus,
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: 0;
}

.submit_search {
    order: 3
}

@media (min-width: 1280px) {
    .site_nav {
        width: 100%;
        position: sticky;
        background: #fff;
        z-index: 999999;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding: 0 2%;
        height: 106px;
        border-bottom: 1px solid #eee;
    }
    .height-div {
        height: 106px;
    }
    .logo {
        width: 300px;
        height: 74px;
    }
    .logo img {
        width: 300px;
        height: 74px;
    }
    .top_search {
        width: 5%;
        float: right;
        text-align: right;
        margin-top: 45px;
    }
    .top_search a span {
        font-size: 20px;
        color: #393939;
        padding-right: 30px;
        display: inline-block;
        -webkit-transform: scaleX(-1);
        -moz-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    .fixed {
        position: fixed;
        z-index: 999;
        background: #fff;
        width: 96%;
        padding: 0 2%;
        display: inline-block;
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow: 2px 2px 10px #909090;
        filter: alpha(opacity=98);
        -moz-opacity: 0.98;
        -khtml-opacity: 0.98;
        opacity: 0.98;
    }
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .site_nav {
        width: 100%;
        height: auto;
        position: sticky;
        z-index: 999999;
        left: 0;
        right: 0;
        background: #fff;
        padding: 0;
        margin: 0 auto;
        border-bottom: 1px solid #eee;
    }
    .height-div {
        height: 100px;
    }
    .logo img {
        height: 45px;
    }
    .top_search {
        width: 5%;
        float: right;
        text-align: right;
        margin-top: 15px;
    }
    .top_search a span {
        font-size: 20px;
        color: #393939;
        padding-right: 0px;
        display: inline-block;
        -webkit-transform: scaleX(-1);
        -moz-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    #cssmenu {
        float: left;
        margin-top: 28px;
    }
    .fixed {
        position: fixed;
        z-index: 999;
        background: #fff;
        width: 96%;
        padding: 0 2%;
        display: inline-block;
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow: 2px 2px 10px #909090;
        filter: alpha(opacity=98);
        -moz-opacity: 0.98;
        -khtml-opacity: 0.98;
        opacity: 0.98;
    }
}

@media all and (max-width: 1024px) {
    .site_nav {
        width: 100%;
        height: auto;
        position: sticky;
        z-index: 999999;
        left: 0;
        right: 0;
        background: #fff;
        padding: 0;
        margin: 0 auto;
        border-bottom: 1px solid #eee;
    }
    .height-div {
        height: 49px;
    }
    .menu {
        margin: 0 !important;
        background: #f0f0f0;
    }
    .submit_search {
        top: 41px;
        right: 2% !important;
    }
    .title-page {
        margin-top: 49px;
    }
    .logo img {
        height: 38px;
    }
    .submit_search button {
        padding-right: 4%;
    }
    .top_search {
        display: none;
    }
    #search {
        line-height: 59px !important;
        display: block !important;
        position: absolute !important;
        top: 93px !important;
    }
    #search .search-fix input {
        width: 64%;
        padding: 10px 1%;
        margin: 2px 1%;
    }
    #search .search-fix button {
        margin: 2px 1%;
        border: 0;
        width: 30%;
        height: 39px;
        line-height: 39px;
        text-transform: uppercase;
    }
    #search .icon_close {
        display: none;
        font-size: 20px;
        cursor: pointer;
    }
}

.redbg_nav {
    top: 0
}

.auto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 105px;
}

.logo {
    z-index: 9;
}


/* .submit_search {
    position: absolute;
    right: 0;
    z-index: 9;
} */

#search {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    /*box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);*/
    z-index: 9999;
    width: 100%;
    line-height: 99px;
    background: rgba(255, 255, 255, 1);
}

#search .search-fix {
    width: 80%;
    margin: 0 auto;
}

#search input {
    width: 70%;
    padding: 15px 1%;
    margin: 5px 1%;
}

#search button {
    margin: 5px 1%;
    border: 0;
    width: 15%;
    height: 49px;
    line-height: 49px;
    text-transform: uppercase;
    background: var(--color-main-light);
    color: #fff;
    cursor: pointer;
}

#search .icon_close {
    font-size: 20px;
    cursor: pointer;
}

#search button:hover {
    background: #1f3e73;
}

.menu-mobile {
    display: none;
    padding: 20px;
    color: #333;
    text-decoration: none;
    text-align: left;
}

.menu-mobile:after {
    content: "\f0c9";
    font-family: "FontAwesome";
    font-size: 30px;
    color: #333;
}

.menu-mobile.active:after {
    content: "\f00d";
}

.navi-submenu {
    float: right;
    width: 37px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu .navi-menu-2 ul {
    overflow-x: hidden;
}

.menu>ul>li>ul>li>.navi-submenu {
    height: 53px;
}

.navi-submenu:before {
    content: "\f0dd";
    font-family: "FontAwesome";
    cursor: pointer;
    color: #444;
    display: inline-block;
    padding: 0 1em;
    font-size: 14px;
    transform: rotate(0deg);
    transition: all ease .3s;
}

.navi-submenu.active:before {
    transform: rotate(180deg);
}

.menu>ul {
    margin: 0 auto;
    width: auto;
    list-style: none;
    padding: 0;
    box-sizing: border-box;
    display: flex;
}

.menu>ul:before,
.menu>ul:after {
    content: "";
    display: table;
}


/* .menu>ul:before {
    height: 56px;
    width: 1px;
    background: #eee;
} */

.menu>ul:after {
    clear: both;
}

.menu>ul>li {
    padding: 0;
    margin: 0;
    display: inline-block;
    font-size: 18px;
    text-align: left;
}

.menu>ul>li>a {
    font-size: 18px;
    font-weight: bold;
    padding: 1.2em 2em 1.2em 1.2em;
    position: relative;
}

.menu>ul>li a {
    text-decoration: none;
    color: #333;
    display: inline-block;
}

.menu>ul>li>a::after {
    position: absolute;
    top: 28px;
    right: 15px;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #000000;
    border-bottom-color: rgb(0, 0, 0);
    border-right: 2px solid #000000;
    border-right-color: rgb(0, 0, 0);
    content: "";
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    -ms-transition: border-color 0.2s ease;
    -o-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
    border-color: #333;
}

.menu>ul>li>a.home::after {
    display: none;
}

.menu>ul>li {
    border-bottom: #ffffff00 solid 4px;
}

.menu>ul>li:hover {
    border-bottom: var(--color-main-light) solid 4px;
}

.menu>ul>li:hover>a {
    color: var(--color-main-light);
}

.menu>ul>li:hover>a::after {
    border-color: var(--color-main-light);
}

.menu>ul>li>ul {
    display: none;
    width: 100%;
    background: #fefefe;
    padding: 10px;
    position: absolute;
    z-index: 9999;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    box-shadow: 3px 17px 17px 4px #00000017;
    border-radius: 0 0 5px 5px;
    height: auto;
    margin-top: 4px;
    max-height: 630px;
    overflow-x: auto;
    top: auto;
}

@media screen and ( max-width: 1320px) {
    .menu>ul>li>ul {
        max-height: unset;
        overflow-x: unset;
    }
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track {
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}

.menu>ul>li>ul:before,
.menu>ul>li>ul:after {
    content: "";
    display: table;
}

.menu>ul>li>ul:after {
    clear: both;
}

.menu>ul>li>ul>li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: 24%;
    padding-left: 1%;
    display: inline-block;
    font-weight: bold;
    vertical-align: text-top;
}

.menu>ul>li>ul>li>a {
    font-size: 17px !important;
}

.menu>ul>li>ul>li a {
    padding: 14px 0;
    width: calc(100% - 50px);
    /* border-bottom: 1px solid #333; */
    color: #333;
}

.menu>ul>li>ul>li a span {
    float: right;
    text-align: right;
    padding-right: 10px;
}

.menu>ul>li>ul>li>ul {
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    font-weight: normal;
    max-height: 200px;
    overflow-y: auto;
}

.menu>ul>li>ul>li>ul:before,
.menu>ul>li>ul>li>ul:after {
    content: "";
    display: table;
}

.menu>ul>li>ul>li>ul:after {
    clear: both;
}

.menu>ul>li>ul>li>ul>li {
    float: left;
    width: 100%;
    margin: 0;
    font-size: 15px;
    font-weight: normal;
}

.menu>ul>li>ul>li>ul>li a {
    padding: .1em 0 .1em;
    border: 0;
    color: #444;
    width: 80%;
}

.menu>ul>li>ul>li>ul>li ul {
    border-bottom: #eee solid 1px;
}

.menu>ul>li>ul>li>ul>li li {
    font-size: 15px;
    font-weight: normal;
}

.menu>ul>li>ul>li>ul>li li a {
    color: #747474;
}

.menu>ul>li>ul>li a:hover {
    color: var(--color-main-light);
}

.banner {
    position: relative;
    width: 100%;
    height: 705px;
    background-color: #e6e6e6;
    overflow: hidden;
}

.navi-menu-3 .navi-menu-3 li a {
    padding: 0.1em 0;
}

.navi-menu-3 .navi-menu-3,
.navi-menu-4 {
    display: none;
    font-size: 14px;
    font-weight: bold;
}

.navi-menu-3 .navi-menu-3 li,
.navi-menu-4 li {
    padding-left: 12px;
}

.menu>ul>li>ul.normal-sub {
    width: 320px;
    left: auto;
    padding: 0;
    font-size: 16px;
}

.menu>ul>li>ul.normal-sub>li {
    width: 100%;
    padding: 0 10px;
}

.menu>ul>li>ul.normal-sub>li a {
    border: 0;
    padding: 0.5em 0;
    font-weight: normal;
    color: #444;
}

.menu>ul>li>ul.normal-sub>li:hover {
    background-color: #f0f0f0;
    border-radius: 8px;
}

.menu>ul>li>ul.normal-sub>li a:hover {
    color: var(--color-main-light);
}

@media (min-width: 1025px) {
    .menu>ul>li:nth-child(3) {
        position: relative;
    }
    .menu>ul>li:nth-child(3)>ul.normal-sub {
        width: 595px;
        left: auto;
    }
    .menu>ul>li:nth-child(4)>ul.normal-sub {
        width: 375px;
    }
    .menu>ul>li:nth-child(3)>ul.normal-sub>li {
        width: calc(50% - 18px);
        display: inline-block;
        float: left;
        padding: 0 0 0 18px;
    }
    /* .menu>ul>li:nth-child(3)>ul.normal-sub>li:nth-child(15) {
        width: 500px;
    } */
}

@media only screen and (max-width: 1279px) {
    .menu-container {
        width: 100%;
    }
    .auto-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 54px;
    }
    .submit_search {
        position: unset;
        margin: 0 15px 0 auto;
    }
    .menu-mobile {
        display: unset;
        padding: 0;
    }
    .menu-dropdown-icon:before {
        display: block;
        padding: 1.5em 2em;
    }
    .menu>ul {
        display: none;
        padding: 0;
        background-color: #fff;
    }
    .menu>ul>li {
        width: 100%;
        float: none;
        display: block;
        position: relative;
    }
    .menu>ul>li a {
        padding: 1em 10px;
        width: 100%;
        display: block;
    }
    .menu>ul>li>a::after {
        display: none;
    }
    .menu>ul>li>ul {
        position: unset;
    }
    .menu>ul>li>ul.normal-sub {
        width: 100%;
    }
    .menu>ul>li>ul>li {
        float: none;
        width: 100%;
        margin-top: 0;
    }
    .menu>ul>li>ul>li:first-child {
        margin: 0;
    }
    .menu>ul>li>ul>li>ul {
        position: relative;
    }
    .menu>ul>li>ul>li>ul>li {
        float: none;
        position: relative;
    }
    .navi-submenu:before {
        position: absolute;
        top: 0;
        right: 20px;
    }
    .menu .show-on-mobile {
        display: block;
        position: absolute;
        z-index: 999;
        width: 100%;
        top: 100%;
        left: 0;
        max-height: calc(100vh - 54px);
        overflow-y: auto;
    }
    .menu .submenu-button {
        position: absolute;
        z-index: 299;
        right: 0;
        top: 0;
        display: block;
        /* border-left: 1px solid rgba(120, 120, 120, 0.15); */
        height: 63px;
        width: 63px;
        cursor: pointer;
    }
    .menu .show-on-mobile>li>.submenu-button {
        width: 100%;
    }
    .menu .submenu-button::after {
        content: '';
        position: absolute;
        top: 21px;
        right: 26px;
        display: block;
        width: 1px;
        height: 11px;
        background: #444;
        z-index: 99;
    }
    .menu .submenu-button::before {
        content: '';
        position: absolute;
        right: 21px;
        top: 26px;
        display: block;
        width: 11px;
        height: 1px;
        background: #444;
        z-index: 99;
    }
    .menu .submenu-button.submenu-opened:after {
        display: none;
    }
    .menu-dropdown-icon.active .submenu-button::after {
        display: none;
    }
}

.banner ul.flicks {
    width: 10000%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.banner ul.flicks>li {
    float: left;
    width: 1%;
    height: 100%;
    background-position: center;
    background-size: cover;
    display: table;
}

.banner ul.flicks>li .flick-inner {
    height: 100%;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}

.banner ul.flicks>li .flick-inner .flick-content {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.banner ul.flicks>li .flick-inner .flick-content h2 {
    color: #fff;
    line-height: 72px;
    text-align: left;
    font-size: 48px;
    font-weight: bold;
}

.banner ul.flicks>li .flick-inner .flick-content h2 a {
    color: #fff;
    text-decoration: none;
}

.banner ul.flicks>li .flick-inner .flick-content p {
    color: #fff;
    line-height: 30px;
    text-align: left;
    font-size: 18px;
}

.banner-page .btn {
    display: inline-block;
    padding: 8px 15px;
    clear: both;
    color: #fff;
    text-decoration: none;
    background-color: var(--color-main-light);
    font-weight: bold;
    margin-top: 20px;
    transition: background-color .3s;
    border-radius: 0;
    font-size: 1.25rem;
}

.banner-page .btn:hover {
    background-color: var(--color-main-light-hover);
}

.banner .arrow-navigation {
    position: absolute;
    height: 80%;
    width: 5%;
    top: 10%;
    z-index: 100;
    overflow: hidden;
}

.banner .arrow-navigation .arrow {
    display: block;
    height: 100%;
    width: 90%;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.banner .arrow-navigation:hover,
.banner .arrow-navigation .arrow:hover {
    cursor: pointer;
}

.banner .arrow-navigation.left {
    left: 0%;
}

.banner .arrow-navigation.left .arrow {
    opacity: 0;
    margin: 0px 0px 0px 50%;
    background-image: url("../images/arrow-left-light.png");
    background-repeat: no-repeat;
    background-position: left
}

.banner .arrow-navigation.right {
    right: 0%
}

.banner .arrow-navigation.right .arrow {
    opacity: 0;
    margin: 0px 0px 0px -50%;
    background-image: url("../images/arrow-right-light.png");
    background-repeat: no-repeat;
    background-position: right
}

.banner .arrow-navigation.left.hover .arrow {
    opacity: 1;
    margin: 0px 0px 0px 20%;
}

.banner .arrow-navigation.right.hover .arrow {
    opacity: 1;
    margin: 0px 0px 0px -20%;
}

.banner .dot-navigation {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    z-index: 100;
}

.banner .dot-navigation ul {
    text-align: center;
    list-style: none;
    padding: 0px 15px;
}

.banner .dot-navigation ul li {
    display: inline-block;
    float: none
}

.banner .dot-navigation .dot {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    margin: 0px 6px;
    background-color: rgba(255, 255, 255, 1);
    transition: all 0.2s ease-out;
}

.banner .dot-navigation .dot:hover {
    cursor: pointer;
    background-color: var(--color-main-light);
}

.banner .dot-navigation .dot.active {
    background-color: var(--color-main-light);
    width: 80px;
}

.banner.animate-transform-slide ul.flicks {
    transform: translate3d(0%, 0px, 0px);
    -webkit-transform: translate3d(0%, 0px, 0px);
    -webkit-transition: -webkit-transform 0.6s;
    -o-transition: -o-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    transition: transform 0.6s
}

.banner.animate-transition-slide ul.flicks {
    position: relative;
    left: 0%;
    -webkit-transition: left 0.4s ease-out;
    -moz-transition: left 0.4s ease-out;
    -o-transition: left 0.4s ease-out;
    -ms-transition: left 0.4s ease-out;
    transition: left 0.4s ease-out
}

@media (min-width: 769px) and (max-width: 1279px) {
    .submit_search button {
        margin-top: -37px !important;
    }
    #code-s {
        width: 720px !important;
    }
    .search-input {
        width: 56% !important;
    }
}

@media (max-width: 768px) {
    .banner {
        top: 0;
        height: 450px;
    }
    .submit_search button {
        margin-top: -55px !important;
    }
    #code-s {
        width: 90% !important;
    }
    .searchtxt {
        width: 100% !important;
        height: auto;
        overflow: hidden;
        margin: 0 auto;
    }
    .searchtxt select {
        width: 100%;
        margin-bottom: 20px;
    }
    .search-input {
        width: 100% !important;
        margin-bottom: 20px;
    }
    .searchtxt .btn {
        width: 100% !important;
    }
    .banner ul.flicks>li .flick-inner .flick-content h1 {
        color: #fff;
        line-height: 45px;
        text-align: left;
        font-size: 30px;
    }
    .banner ul.flicks>li .flick-inner .flick-content {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding-right: 0;
    }
    .banner ul.flicks>li .flick-inner .flick-content p {
        color: #fff;
        line-height: 24px;
        text-align: left;
    }
    .main-row-a h2 {
        text-align: center;
        font-size: 24px !important;
        line-height: 30px !important;
        padding: 40px 5% 10px 5% !important;
    }
}

@media (max-width: 450px) {
    .banner ul.flicks>li .flick-inner .flick-content h1 {
        color: #fff;
        line-height: 36px;
        text-align: left;
        font-size: 24px;
    }
}

.main-center {
    width: 100%;
}

.main-row-a {
    width: 100%;
    background: #fff;
}

.main-row-a h2 {
    text-align: center;
    font-size: 32px;
    line-height: 40px;
    padding-top: 50px;
    padding-bottom: 20px;
}

.main-row-a h2 a {
    color: #393939;
}

.main-row-a .row-a {
    margin: 0 auto;
    text-align: center;
    padding-bottom: 50px;
}

.main-row-b {
    width: 100%;
    min-height: 160px;
    background: #f0f0f0;
}

.main-row-b .row-b {
    width: 100%;
    margin: 0 auto;
    padding: 80px 0;
}

@media (min-width: 769px) and (max-width: 1279px) {
    .main-row-a .row-a {
        width: 90%;
    }
    .main-row-b .row-b {
        width: 100%;
    }
}

@media all and (max-width: 1279px) {
    .main-row-a .row-a {
        width: 90%;
    }
    .main-row-b .row-b {
        width: 100%;
    }
}

.scroll_horizontal {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 auto;
}

.scroll_horizontal .box {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.scroll_horizontal .list {
    overflow: hidden;
    width: 9999px;
}

.scroll_horizontal .list li {
    float: left;
    width: 390px;
    padding: 5px;
    text-align: center;
    position: relative;
}

.scroll_horizontal .list li .row-b-span {
    opacity: 0;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
    width: 380px;
    height: 293px;
    background: rgba(7, 105, 177, 0.8);
}

.scroll_horizontal .list li:hover .row-b-span {
    opacity: 1;
}

.scroll_horizontal .list li .row-b-span span {
    display: table;
    height: 100%;
    padding: 30px;
    overflow: hidden;
}

.scroll_horizontal .list li .row-b-span span p {
    color: #fff;
}

.scroll_horizontal .list li:hover p a {
    color: var(--color-main-light);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.scroll_horizontal .list .pw {
    height: 300px;
}

.scroll_horizontal .list li img {
    max-width: 100%;
    max-height: 300px;
    margin: auto;
}

.scroll_horizontal .list li p {
    margin-top: 0px;
}

.scroll_horizontal .list li p a {
    display: block;
    width: 380px;
    height: 100px;
    line-height: 100px;
    background: #fff;
    color: #393939;
    font-size: 18px;
}

@media (min-width: 1701px) {
    .scroll_horizontal .box {
        width: 1200px;
    }
    .scroll_horizontal .list li .row-b-span span p {
        display: table-cell;
        vertical-align: middle;
        color: #fff;
        overflow: hidden;
    }
}

@media (min-width: 1279px) and (max-width: 1700px) {
    .scroll_horizontal .box {
        width: 1200px;
    }
    .scroll_horizontal .list li .row-b-span span p {
        display: table-cell;
        vertical-align: middle;
        color: #fff;
        overflow: hidden;
    }
}

@media (min-width: 769px) and (max-width: 1278px) {
    .scroll_horizontal .box {
        width: 644px;
    }
}

@media (min-width: 500px) and (max-width: 768px) {
    .scroll_horizontal .box {
        width: 312px;
    }
}

@media all and (max-width: 499px) {
    .scroll_horizontal .box {
        width: 234px;
    }
}

.scroll_horizontal .slide-nav a {
    position: absolute;
    z-index: 99;
    top: 150px;
    text-indent: -9000px;
    cursor: pointer;
    opacity: 0.8;
    display: block;
    width: 65px;
    height: 100px;
}

.scroll_horizontal .slide-nav a span {
    color: #fff;
    font-size: 30px;
}

.scroll_horizontal .slide-nav a:hover {
    opacity: 1.0
}

.scroll_horizontal .slide-nav a.prev {
    left: 150px;
    background: url(../images/next.png);
}

.scroll_horizontal .slide-nav a.next {
    right: 150px;
    left: auto;
    background: url(../images/prev.png);
}

@media (min-width: 1481px) and (max-width: 1701px) {
    .scroll_horizontal .slide-nav a.prev {
        left: 50px;
    }
    .scroll_horizontal .slide-nav a.next {
        right: 50px;
        left: auto;
    }
}

@media (min-width: 1279px) and (max-width: 1480px) {
    .scroll_horizontal .slide-nav a.prev {
        left: 10px;
    }
    .scroll_horizontal .slide-nav a.next {
        right: 10px;
        left: auto;
    }
}

@media (min-width: 500px) and (max-width: 1278px) {
    .scroll_horizontal .list li {
        width: 312px;
    }
    .scroll_horizontal .list li .row-b-span {
        width: 312px;
        height: 240px;
    }
    .scroll_horizontal .list .pw {
        height: 240px;
    }
    .scroll_horizontal .list li img {
        max-width: 100%;
        max-height: 240px;
        margin: auto;
    }
    .scroll_horizontal .list li p a {
        width: 312px;
        height: 80px;
        line-height: 80px;
        font-size: 16px;
    }
    .scroll_horizontal .list li p {
        display: -webkit-box;
        display: -o-box;
        display: -moz-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7;
        -o-box-orient: vertical;
        -o-line-clamp: 7;
        -moz-box-orient: vertical;
        -moz-line-clamp: 7;
        overflow: hidden;
    }
    .scroll_horizontal .slide-nav a {
        top: 120px;
        width: 52px;
        height: 80px;
    }
    .scroll_horizontal .slide-nav a.prev {
        left: 50px;
        background-size: 52px 80px;
    }
    .scroll_horizontal .slide-nav a.next {
        right: 50px;
        left: auto;
        background-size: 52px 80px;
    }
}

@media all and (max-width: 499px) {
    #topcontrol {
        display: none;
    }
    .scroll_horizontal .list li {
        width: 234px;
    }
    .scroll_horizontal .list li .row-b-span {
        width: 234px;
        height: 180px;
    }
    .scroll_horizontal .list .pw {
        height: 180px;
    }
    .scroll_horizontal .list li img {
        max-width: 100%;
        max-height: 180px;
        margin: auto;
    }
    .scroll_horizontal .list li p a {
        width: 234px;
        height: 60px;
        line-height: 60px;
        font-size: 14px;
    }
    .scroll_horizontal .list li p {
        display: -webkit-box;
        display: -o-box;
        display: -moz-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        -o-box-orient: vertical;
        -o-line-clamp: 5;
        -moz-box-orient: vertical;
        -moz-line-clamp: 5;
        overflow: hidden;
    }
    .scroll_horizontal .slide-nav a {
        top: 90px;
        width: 39px;
        height: 60px;
    }
    .scroll_horizontal .slide-nav a.prev {
        left: 10px;
        background-size: 39px 60px;
    }
    .scroll_horizontal .slide-nav a.next {
        right: 10px;
        left: auto;
        background-size: 39px 60px;
    }
}

table {
    border-collapse: collapse;
    margin: 1.25em 0 0;
    width: 100%;
    border: 1px solid #ddd;
}

table tr,
table th,
table td {
    border: 0;
}

table th,
table td {
    padding: 8px 12px;
    text-align: left;
    line-height: 1.5;
    border-top: 1px solid #ddd;
}

table th {
    color: #fff;
    background: #4f4f4f;
    min-width: 135px;
}

table tr td {
    background: #fff;
    color: #000000;
    font-size: 0.98em;
}

.sequence {
    word-wrap: break-word;
    word-break: break-all;
}


/* .table-breakpoint tr td, .table-breakpoint tr th  {width: 120px; } */


/* .table-breakpoint tr td:nth-child(1),
.table-breakpoint tr th:nth-child(1) {
    width: 130px;
}

.table-breakpoint tr td:nth-child(2),
.table-breakpoint tr th:nth-child(2) {
    width: 400px;
}

.table-breakpoint tr td:nth-child(3),
.table-breakpoint tr th:nth-child(3) {
    width: 190px;
}

.table-breakpoint tr td:nth-child(4),
.table-breakpoint tr th:nth-child(4) {
    width: 210px;
} */

table tr td {
    font-size: 16px;
}

table tr th {
    font-size: 14px;
}

table tr th,
table tr td {
    padding: 3px 4px!important;
}

table a {
    text-decoration: none;
}

table tr:nth-of-type(2n+2) td {
    background: #efefef;
}

table.bt tfoot th,
table.bt tfoot td,
table.bt tbody td {
    padding: 0;
}

table.bt tfoot th:before,
table.bt tfoot td:before,
table.bt tbody td:before {
    padding: 5px;
}

table.bt tfoot th .bt-content,
table.bt tfoot td .bt-content,
table.bt tbody td .bt-content {
    display: inline-block;
    padding: 5px;
}

table.bt tfoot th:first-of-type:before,
table.bt tfoot th:first-of-type .bt-content,
table.bt tfoot td:first-of-type:before,
table.bt tfoot td:first-of-type .bt-content,
table.bt tbody td:first-of-type:before,
table.bt tbody td:first-of-type .bt-content {
    padding-top: 10px;
}

table.bt tfoot th:last-of-type:before,
table.bt tfoot th:last-of-type .bt-content,
table.bt tfoot td:last-of-type:before,
table.bt tfoot td:last-of-type .bt-content,
table.bt tbody td:last-of-type:before,
table.bt tbody td:last-of-type .bt-content {
    padding-bottom: 10px;
}

table.bt thead,
table.bt tbody th {
    display: none;
}

table.bt tfoot th,
table.bt tfoot td,
table.bt tbody td {
    border: none !important;
    width: 100% !important;
    display: block;
    vertical-align: top;
    text-align: left !important;
}

table.bt tfoot th:before,
table.bt tfoot td:before,
table.bt tbody td:before {
    content: attr(data-th) ": ";
    font-weight: bold;
    width: 30%;
    display: inline-block;
}

table.bt tfoot th.bt-hide,
table.bt tfoot td.bt-hide,
table.bt tbody td.bt-hide {
    display: none;
}

table.bt tfoot th .bt-content,
table.bt tfoot td .bt-content,
table.bt tbody td .bt-content {
    vertical-align: top;
    width: 65%;
    display: inline-block;
}

.container-bottom {
    width: 100%;
    height: auto;
}

.bottom-center {
    width: 100%;
    padding: 30px 0 60px 0;
    background: #393939;
}

.bottom-center .icon_pin,
.bottom-center .icon_phone,
.bottom-center .icon_printer-alt,
.bottom-center .icon_mail {
    padding-right: 5px;
    color: #fff;
}

.bottom-center span {
    color: #fff;
    font-size: 14px;
    padding-right: 10px;
}

.bottom-center span a {
    color: #fff;
}

.bottom-center span a:hover {
    color: #84b2ff;
    text-decoration: underline;
}

.bottom-a {
    width: 25%;
    margin-left: 10%;
    float: left;
}

.bottom-b {
    width: 25%;
    float: left;
}

.bottom-bb {
    float: left;
    width: 10%;
}

.bottom-c {
    width: 20%;
    float: left;
    text-align: right;
}

.bottom-c img {
    display: inline-block;
    max-width: 240px;
}

.bottom-cop {
    background: #fff;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #393939;
}

@media (min-width: 880px) and (max-width: 1279px) {
    .bottom-a {
        width: 35%;
        margin-left: 5%;
        float: left;
    }
    .bottom-b {
        width: 30%;
        float: left;
    }
    .bottom-c {
        width: 25%;
        float: left;
    }
}

@media all and (max-width: 879px) {
    .search-tab>li {
        width: 100% !important;
    }
    .bottom-a {
        width: 95%;
        margin-left: 5%;
        float: left;
    }
    .bottom-b {
        width: 95%;
        margin-left: 5%;
        float: left;
    }
    .bottom-c {
        width: 95%;
        margin-top: 10px;
        margin-left: 5%;
        float: left;
    }
    .bottom-c {
        text-align: left;
    }
    .bottom-cop {
        font-size: 12px;
    }
}

.title-page {
    width: 100%;
    height: 300px;
    background: url(../images/title-bg-1.jpg) center center;
    display: table;
}

.title-page-box {
    width: 85%;
    padding: 0 12%;
    margin: 0 auto;
    padding-top: 5px;
    display: table-cell;
    vertical-align: middle;
}

@media (min-width: 769px) and (max-width: 1279px) {
    .title-page h2 {
        font-size: 36px !important;
    }
    .title-page h2 {
        line-height: 42px !important;
    }
}

@media (max-width: 768px) {
    .title-page h2 {
        font-size: 30px !important;
    }
    .title-page h2 {
        line-height: 36px !important;
    }
}

.title-page p {
    text-align: center;
    color: #fff;
    font-size: 16px;
    padding-bottom: 10px;
    margin: 0;
}

.title-page p a {
    color: #fff;
}

.title-page p a:hover {
    color: #84b2ff;
}


/* .title-page p span {
	color: #84b2ff;
} */

.title-page h2 {
    text-align: center;
    font-size: 46px;
    line-height: 55px;
    font-weight: normal;
    color: #fff;
    margin: 0;
}

.row-a-1 {
    text-align: left;
    margin: 0 auto;
}

.row-a-1 h3 {
    margin-top: 0;
}

.row-a-2 {
    text-align: left;
    margin: 0 auto;
    padding-bottom: 20px;
}

p a {
    color: var(--color-main-light);
}

p a:hover {
    color: #1f3e73;
}

.row-article {
    width: 100%;
    padding-bottom: 50px;
    min-height: 240px;
}

.row-article img {
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
}

.row-article h3 {
    font-size: 18px;
}

.row-article h3 a {
    color: var(--color-main-light);
}

.row-article h3 a:hover {
    color: #1f3e73;
}

@media all and (max-width: 1279px) {
    .row-article img {
        float: none !important;
        margin-right: 0 !important;
    }
}

.service-list {
    width: 70%;
    margin: 0 auto;
}

.service-list li {
    width: 33.3%;
    float: left;
    position: relative;
    margin: 20px 0;
}

@media (min-width: 1278px) and (max-width: 1499px) {
    .service-list li {
        width: 50%;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .service-list {
        width: 80%;
        margin: 0 auto;
    }
    .service-list li {
        width: 50%;
    }
}

@media (min-width: 490px) and (max-width: 1023px) {
    .service-list {
        width: 80%;
        margin: 0 auto;
    }
    .service-list li {
        width: 100%;
    }
}

@media all and (max-width: 489px) {
    .service-list {
        width: 90%;
        margin: 0 auto;
    }
    .service-list li img {
        width: 100% !important;
    }
    .service-list li {
        width: 100%;
    }
    .service-list li .pw {
        height: auto !important;
    }
    .service-list li p a {
        width: 100% !important;
        height: 80px !important;
        line-height: 75px !important;
        font-size: 16px !important;
    }
    .service-list li .row-b-span {
        display: none;
    }
    .row-list-1,
    .row-list-2,
    .row-list-3,
    .row-list-4,
    .row-list-5,
    .row-list-6 {
        background: #fff;
    }
}

.service-list li .row-b-span {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 390px;
    height: 300px;
    background: rgba(31, 62, 115, 0.8);
}

.service-list li:hover .row-b-span {
    opacity: 1;
}

.service-list li:hover .row-b-span span {
    display: block;
    width: 80%;
    margin: 0 auto;
    padding-top: 15%;
    overflow: hidden;
}

.service-list li:hover .row-b-span span p {
    color: #fff;
}

.service-list li:hover p a {
    color: var(--color-main-light);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.service-list li .pw {
    height: 300px;
}

.service-list li img {
    max-width: 100%;
    max-height: 300px;
    margin: auto;
}

.service-list li p {
    margin-top: 0px;
}

.service-list li p a {
    display: block;
    width: 390px;
    height: 100px;
    line-height: 100px;
    background: #fff;
    color: #393939;
    font-size: 18px;
    text-align: center;
}

.row-a-3 h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 2px 0;
    padding: 10px 0;
}

.row-a-3 h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 2px 0;
    padding: 10px 0;
}

.row-a-3 h4,
.row-a-3 h5,
.row-a-3 h6 {
    font-size: 16px;
    font-weight: bold;
    margin: 2px 0;
    padding: 10px 0;
}

.img-right {
    display: block;
    max-width: 350px;
    float: right;
    margin-top: 8px;
    margin-left: 15px;
    margin-bottom: 10px;
    text-align: center;
    color: #666;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
}

.img-left {
    display: block;
    max-width: 350px;
    float: left;
    margin-top: 8px;
    margin-left: 15px;
    margin-bottom: 10px;
    text-align: center;
    color: #666;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
}

.img-middle {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
    color: #666;
    font-size: 12px;
    line-height: 18px;
}

.img-left img,
.img-right img,
.img-middle img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width:700px) {
    .img-middle,
    .img-right,
    .img-left {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.text-left {
    font-size: 13px;
    color: #393939;
    text-align: center;
}

.article-table {
    width: 100%;
}

.article-table-box,
.article-tablebox {
    width: 100%;
    max-width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.article-table-box tr td {
    padding: 8px;
    border: 1px solid #ddd;
}

.article-tablebox tr td {
    padding: 12px 20px;
}

@media (max-width: 1000px) {
    .article-table {
        width: 100%;
        overflow-y: hidden;
        border: 1px solid #ddd;
    }
    .article-table .article-tablebox {
        width: 1100px;
    }
}

.wes-ullist,
.wes-ollist {
    margin: 0 0 10px 0;
    padding: 0px 0px 0 22px;
}

.wes-ullist li {
    list-style: disc;
}

.wes-ullist li a {
    color: var(--color-main-light);
}

.wes-ullist li a:hover {
    color: #1f3e73;
}

.wes-ollist li {
    list-style: decimal;
}

.wes-ollist li a {
    color: var(--color-main-light);
}

.wes-ollist li a:hover {
    color: #1f3e73;
}

.other-box a {
    display: block;
    color: #393939;
    background: #f0f0f0;
    border-radius: 3px;
    margin-bottom: 15px;
    padding: 5px 15px;
}

.other-box a:hover {
    color: #fff;
    background: var(--color-main-light);
}

.other-box a:hover {
    color: #fff;
    background: var(--color-main-light);
}

.wes-line {
    display: block;
    width: 100%;
    height: 2px;
    background: #d9d6e8;
    margin-top: 20px;
}

.Online-Inquiry {
    width: 100%;
}

.Online-Inquiry h2 {
    width: 100%;
    padding-bottom: 20px;
    padding-top: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.Online-Inquiry .two_columns {
    width: 100%;
}

.Online-Inquiry .two_columns .services-form-div1 {
    width: 48%;
    float: left;
    margin-right: 2%;
    padding-bottom: 15px;
}

.Online-Inquiry .two_columns .services-form-div2 {
    width: 48%;
    float: left;
    margin-left: 2%;
    padding-bottom: 15px;
}

.Online-Inquiry .two_columns .services-form-div3 {
    width: 48%;
    float: left;
    margin-right: 2%;
    padding-bottom: 15px;
}

.Online-Inquiry .two_columns .services-form-div4 {
    width: 48%;
    float: left;
    margin-left: 2%;
    padding-bottom: 15px;
}

.Online-Inquiry .two_columns .services-form-div5 {
    width: 48%;
    padding-bottom: 15px;
}

.Online-Inquiry .two_columns .services-form-div6 {
    width: 48%;
    padding-bottom: 15px;
}

.Online-Inquiry .two_columns span {
    display: block;
    width: 100%;
    padding-bottom: 15px;
}

.Online-Inquiry input[type='text'],
textarea {
    width: 100%;
    padding: 10px 17px;
    outline: 0;
    resize: none;
    font-family: inherit;
    font-size: inherit;
    line-height: 18px;
    background: #f0f0f0;
    color: #8d8d8d;
    border: 1px solid transparent;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.qbutton {
    border: 0;
    width: 240px;
    height: 49px;
    line-height: 49px;
    text-transform: uppercase;
    background: var(--color-main-light);
    color: #fff;
    cursor: pointer;
}

.qbutton:hover {
    background: #1f3e73;
}

@media (max-width: 768px) {
    .Online-Inquiry .two_columns .services-form-div1,
    .Online-Inquiry .two_columns .services-form-div2,
    .Online-Inquiry .two_columns .services-form-div3,
    .Online-Inquiry .two_columns .services-form-div4,
    .Online-Inquiry .two_columns .services-form-div5,
    .Online-Inquiry .two_columns .services-form-div6 {
        width: 100%;
        float: left;
        margin-right: 0;
        margin-left: 0;
        padding-bottom: 15px;
    }
}

.about-article-box {
    margin: 0 auto;
}

.about-article-1eft {
    float: left;
    width: 48%;
    margin-right: 2%;
}

.about-article-right {
    float: left;
    width: 48%;
    margin-left: 2%;
}

@media (max-width: 1279px) {
    .about-article-1eft,
    .about-article-right {
        float: none;
        width: 100%;
        margin: 0 auto;
    }
}

.Contact-box {
    width: 90%;
    min-height: 582px;
    background: url(../images/map.jpg) right center no-repeat;
}

.contact-list li {
    line-height: 35px;
}

.contact-list li span {
    padding-right: 10px;
}

.contact-list li span a {
    color: #393939;
}

.contact-list li span a:hover {
    color: var(--color-main-light);
}

.Follow-us li {
    width: 30px;
    height: 30px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
}

.Follow-us li:hover {
    background: #1f3e73;
}

.Follow-us li span {
    line-height: 30px;
    color: #fff;
    padding-right: 0;
}

.contact-map {
    float: right;
}

@media (max-width: 1024px) {
    .Contact-box {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .Contact-box {
        background-size: 100% auto;
        min-height: 482px;
    }
}

table {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

table tr th {
    padding: 8px;
    line-height: 30px;
    background: var(--color-main-light);
    color: #fff;
    font-weight: blod;
    text-align: left;
}

table tr .th-center {
    text-align: center;
}

table tr td {
    padding: 6px 8px;
    text-align: left;
}

table tr:nth-of-type(2n+2) td {
    background: #efefef;
}

table tr td a {
    display: inline-block;
}

@media screen and (max-width: 768px) {
    table tr td {
        font-size: 16px;
    }
}

.btn-pdf {
    width: 80px;
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    text-align: center;
    color: #ca0c1a !important;
}

.btn-pdf:hover {
    color: #fd6205 !important;
}

.btn-inquiry {
    display: inline-block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    background-color: var(--color-main-light);
    border: none;
    font-size: 15px;
}

.btn-inquiry:hover {
    color: #fff;
    background: #1f3e73;
}

.pages-box a,
.pages-box .cpb-span {
    text-decoration: none;
    float: left;
    padding: 2px 7px;
    border: 1px solid #ddd;
    background: #ffff;
    font-size: 13px;
    color: #000;
    margin-right: 8px;
}

.pages-box {
    padding-bottom: 50px;
}

.pages-box a:hover {
    color: #fff;
    background: var(--color-main-light);
    border: 1px solid var(--color-main-light);
}

.pages-box .cpb-span {
    font-weight: bold;
    color: #fff;
    background: var(--color-main-light);
    border: 1px solid var(--color-main-light);
}

.Inquiry_form ul {
    list-style-type: none;
    list-style-position: outside;
    margin: 0px;
    padding: 0px;
}

.Inquiry_form li {
    width: 100%;
    display: block;
    float: left;
}

.Inquiry_form label {
    width: 100%;
    display: inline-block;
    text-align: left;
    padding: 10px 0;
    font-size: 14px;
}

.Inquiry_form input {
    height: 38px;
    width: 100%;
    background: #f0f0f0;
    border: 0;
    padding-left: 10px;
    outline: none;
}

.Inquiry_form textarea {
    padding-left: 10px;
    width: 94%;
    outline: none;
}

.Inquiry_form .submit {
    display: inline-block;
    text-align: center;
    padding: 1em 3em;
    clear: both;
    color: #fff;
    text-decoration: none;
    background-color: var(--color-main-light);
    border: 0px;
    cursor: pointer;
    border: 2px var(--color-main-light) solid;
    font-weight: bold;
    margin: 20px 0;
}

.Inquiry_form .submit:hover {
    background: #fff;
    color: #393939;
    transition: background-color .3s;
    border: 2px var(--color-main-light) solid;
    font-weight: bold;
}

.Inquiry_form .Code {
    width: 50%;
}

.Inquiry_form textarea {
    padding-top: 10px;
}

@media (max-width: 768px) {
    .Inquiry_form li {
        width: 100%;
        margin-left: 0;
    }
    .Inquiry_form textarea {
        width: 100%;
    }
}

#code-s {
    width: 800px;
    height: auto;
    padding: 10px 10px 0 0;
    position: fixed;
    display: none;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 999999;
    text-align: center;
}

.searchtxt {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0 auto;
}

.search-input {
    border: 0;
    outline: none;
    font-size: 16px;
    height: 45px;
    padding-left: 20px;
    width: 58%;
    float: left;
}

.searchtxt select {
    height: 47px;
    border: 0;
    font-size: 16px;
    color: #393939;
    outline: none;
    padding: 0 10px;
    float: left;
    background: #eee;
}

.searchtxt .btn {
    padding: 13px 40px;
    clear: both;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    background-color: var(--color-main-light);
    border: 0px;
    outline: none;
    cursor: pointer;
}

.searchtxt .btn:hover {
    color: #FFF;
    transition: background-color .3s;
    background: #2751a3;
}

.submit_search button {
    border: none;
    cursor: pointer;
    margin: 0 auto;
    outline: none;
    background-color: transparent;
    background: var(--color-main-light);
    width: 115px;
    text-align: center;
    border-radius: 50px;
}

.submit_search button:hover {
    background: var(--color-main-light-hover);
}

.submit_search button:before {
    content: "\f002";
    font-family: FontAwesome;
    font-size: 30px;
    color: #fff;
}

#goodcover {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 999999;
    -moz-opacity: 0.8;
    opacity: 0.70;
    filter: alpha(opacity=80);
    overflow: hidden;
}

.close1 {
    width: 100%;
    height: 40px;
}

#closebt {
    float: right;
}

#closebt img {
    width: 22px;
}

.Verification-code {
    position: relative;
}

.Verification-code .check-fa {
    position: absolute;
    top: 17px;
    right: 0px;
    font-size: 22px;
    color: #7b9d3b;
}

.icon-bg-circle {
    display: inline-block;
    width: 33px;
    height: 33px;
    line-height: 33px;
    background-color: #1c447f;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    -webkit-border-radius: 33px;
    -moz-border-radius: 33px;
    -o-border-radius: 33px;
    border-radius: 33px;
}

.icon-bg-circle .fa-envelope,
.fa-fax {
    font-size: 18px;
}

.post-holder {
    border-bottom: 1px #f6f6f6 solid;
    margin: 10px 0;
}

.post-content h1 {
    font-size: 18px;
    margin: 0;
    padding: 10px 0;
}

.post-content h1 a {
    color: var(--color-main-light);
    text-decoration: none;
}

.post-content p {
    margin: 0;
    padding: 0;
}

.productname-h2 {
    display: inline-block;
    color: #393939;
    padding-right: 5px;
}

.datasheet {
    display: inline-block;
    font-size: 18px;
    padding-top: 5px;
    padding-bottom: 15px;
}

.datasheet .icon {
    font-size: 20px;
    color: #ca0c1a !important;
}

.datasheet:hover .icon {
    color: #fd6205 !important;
}

.datasheet:hover {
    color: #fd6205 !important;
}

.row-a-3 {
    text-align: left;
    margin: 0 auto;
}

.bread-crumb-title {
    text-align: left;
    margin: 0 auto;
    padding-top: 15px;
}

.bread-crumb-title p,
.bread-crumb-title p a {
    color: #888;
    font-size: 16px;
}

.bread-crumb-title p a:hover {
    color: var(--color-main-light);
}

.row-a-1,
.row-a-2,
.row-a-3,
.main-row-a .row-a,
.bread-crumb-title,
.about-article-box {
    max-width: 1200px;
}

@media (max-width: 1279px) {
    .main-row-a .row-a {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
    }
}

.row-a-3 h1 {
    font-size: 28px;
    font-weight: bold;
    color: var(--color-main-light);
    margin: 0 0 10px 0;
}

.Reference {
    padding-bottom: 0px;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #888888 !important;
}

.Referencemargin {
    line-height: 30px;
    margin: 0;
    color: #888888 !important;
}

.row-a-3 p a:hover,
.row-a-3 table a:hover {
    text-decoration: underline;
}

.icon-ul {
    width: 100%;
    margin: 0 0 10px 0;
}

.icon-ul li {
    width: 14%;
    height: auto;
    float: left;
    position: relative;
}

.icon-ul li img {
    max-width: 100%;
}

.icon-ul li div {
    display: table;
    position: absolute;
    left: 0;
    bottom: 12%;
    width: 70%;
}

@media (min-width: 1280px) {
    .icon-ul li div span {
        display: table-cell;
        vertical-align: middle;
        font-size: 17px;
        line-height: 20px;
        color: #fff;
        padding: 8px;
        text-align: center;
        font-weight: 500;
    }
    .two-middle {
        padding-bottom: 14px;
    }
    .one-middle {
        padding-bottom: 25px;
    }
}

@media (min-width: 769px) and (max-width: 1279px) {
    .icon-ul li div span {
        display: table-cell;
        vertical-align: middle;
        font-size: 10px;
        line-height: 15px;
        color: #fff;
        padding: 5px 8px;
        text-align: center;
        font-weight: 500;
    }
}

@media (max-width: 768px) {
    .icon-ul li div span {
        display: table-cell;
        vertical-align: middle;
        font-size: 10px;
        line-height: 15px;
        color: #fff;
        padding: 5px 8px;
        text-align: center;
        font-weight: 500;
    }
}

@media (max-width: 1023px) {
    .icon-ul-div {
        width: 100%;
        overflow-y: hidden;
    }
    .icon-ul-div-img {
        width: 700px;
    }
    .icon-ul {
        width: 870px;
    }
}


/* .row {
    width: 100%;
}

.row .col-md-4 {
    width: 50%;
    float: left;
    text-align: center;
}

@media (max-width: 768px) {
    .row .col-md-4 {
        width: 100%;
        float: none;
    }
} */

.Services_bg {
    background: url(../images/custom-synthesis_bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

.Technology_bg {
    background: url(../images/Technology_bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

.Resource_bg {
    background: url(../images/Resource_bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

.products_bg {
    background: url(../images/products_bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

.about_bg {
    background: url(../images/about_bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

.contact_bg {
    background: url(../images/contact_bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

.banner_inpage {
    width: 100%;
    position: relative;
}

.banner-table {
    width: 100%;
    display: table;
    height: 100%;
}

.banner-table-cell {
    display: table-cell;
    vertical-align: middle;
}

.auto-container h1 {
    color: #fff;
    text-align: center;
    width: 100%;
    margin: 0;
    letter-spacing: 1px;
    font-weight: normal;
    display: -webkit-box;
    display: -o-box;
    display: -moz-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    -o-box-orient: vertical;
    -o-line-clamp: 2;
    -moz-box-orient: vertical;
    -moz-line-clamp: 2;
    overflow: hidden;
}

.auto-container p {
    color: #FFF;
    margin: 0;
    padding: 10px 0;
    font-size: 20px;
    padding-top: 15px;
    text-align: center;
    line-height: 28px;
}

.container-center,
.container {
    max-width: 1200px;
}

@media (min-width: 1280px) {
    .banner_inpage {
        height: 95px;
    }
    .auto-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .auto-container h1 {
        font-size: 36px;
        line-height: 50px;
    }
}

@media (min-width: 769px) and (max-width: 1279px) {
    .banner_inpage {
        height: 95px;
    }
    .auto-container {
        max-width: 95%;
        margin: 0 auto;
    }
    .auto-container h1 {
        font-size: 32px;
        line-height: 42px;
    }
}

@media (max-width: 768px) {
    .banner_inpage {
        height: 95px;
    }
    .auto-container {
        max-width: 95%;
        margin: 0 auto;
    }
    .auto-container h1 {
        font-size: 26px;
        line-height: 36px;
    }
}

@media (max-width: 400px) {
    .auto-container h1 {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (min-width: 1280px) {
    .container-title-a {
        width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 1279px) {
    .container-title-a {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .container-title-a {
        width: 100%;
    }
}

.contact-article {
    float: right;
}

.list-style-two li {
    position: relative;
    font-size: 15px;
    font-weight: 400;
    color: #444;
    line-height: 30px;
    padding-left: 27px;
}

.list-style-two li .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 30px;
    color: #444;
}

.bottom-a li,
.bottom-b li {
    position: relative;
    line-height: 30px;
    padding-left: 27px;
    font-size: 14px;
    color: #fff;
}

.bottom-a li a,
.bottom-b li a {
    color: #fff;
}

.bottom-a li .icon,
.bottom-b li .icon {
    position: absolute;
    top: 0;
    left: 0;
}

.bottom-b li .fa-map-marker {
    font-size: 20px;
}

.bottom-a li .fa-phone {
    font-size: 17px;
}

.list-style-two li .fa-map-marker {
    font-size: 23px;
}

.list-style-two li .fa-phone {
    font-size: 20px;
}

.list-style-two li a {
    color: var(--color-main-light);
    text-decoration: none;
}

.contact-article .social-icon-two li a {
    display: block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    background: var(--color-main-light);
    color: #fff;
    font-size: 16px;
    text-align: center;
}

.contact-article .social-icon-two li a:hover {
    background: #393939;
    color: #fff;
}

.list-style-two li a:hover {
    text-decoration: underline;
    color: var(--color-main-light);
}

.inquiry-article {
    float: left;
    margin-bottom: 20px;
}

.inquiry-article h1 {
    font-weight: normal;
}

.inquiry-article span {
    display: block;
    font-size: 15px;
    color: #444;
    width: 100%;
}

.inquiry-article input {
    width: 100%;
    height: 42px;
    padding: 2px 5px;
    margin-bottom: 10px;
    font-size: 14px;
    font-family: 'Roboto Light', sans-serif;
    background: #f0f0f0;
}

.inquiry-article textarea {
    width: 100%;
    padding: 2px 5px;
    margin-bottom: 5px;
    font-size: 14px;
    font-family: 'Roboto Light', sans-serif;
    background: #f0f0f0;
}

.inquiry-article .qbutton {
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    padding: 10px 40px;
    border: none;
    cursor: pointer;
    background: #55565a;
    margin: 10px 0;
}

.inquiry-article .qbutton:hover {
    background: var(--color-main-light);
}

@media (min-width: 1280px) {
    .contact-article {
        max-width: 315px;
        padding-top: 40px;
    }
    .contactimg {
        width: 660px;
        padding-top: 10px;
        float: right;
    }
    .inquiry-article {
        width: 655px;
        padding-top: 0;
    }
}

@media (min-width: 769px) and (max-width: 1279px) {
    .contact-article {
        width: 40%;
        padding-top: 40px;
    }
    .contactimg {
        width: 55%;
        padding-top: 10px;
        padding-left: 4%;
        float: right;
    }
    .inquiry-article {
        width: 55%;
        padding-top: 0;
        padding-right: 4%;
    }
}

@media (max-width: 768px) {
    .contact-article {
        width: 100%;
        padding-bottom: 20px;
    }
    .contactimg {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        float: right;
    }
    .inquiry-article {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.bread-crumb {
    position: relative;
    font-size: 16px;
    margin: 10px 0;
}

.bread-crumb li {
    position: relative;
    display: inline-block;
    font-size: 16px;
    margin-right: 24px;
    color: var(--color-main-light);
    line-height: 1.3;
}

.bread-crumb li:last-child {
    margin-right: 0px;
}

.bread-crumb li:after {
    content: '\f105';
    font-family: 'FontAwesome';
    position: absolute;
    right: -20px;
    top: -1px;
    width: 10px;
    line-height: 26px;
    font-size: 14px;
    color: #666;
}

.bread-crumb li:last-child:after {
    display: none;
}

.bread-crumb li a {
    color: #666;
    font-weight: 400;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    text-decoration: none;
}

.bread-crumb li a:hover {
    color: var(--color-main-light);
}

@media screen and (max-width: 768px) {
    .bread-crumb {
        margin: 5px 0;
        padding: 0
    }
}

.social-icon-two {
    padding: 15px 0;
    list-style-type: none;
    margin: 0;
    height: auto;
    overflow: hidden;
}

.social-icon-two li {
    margin-right: 15px;
    float: left;
}

.social-icon-two li a {
    color: var(--color-main-light);
    font-size: 22px;
    display: block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    background: #fff;
    font-size: 16px;
    text-align: center;
}

.ServiceShowPic {
    font-size: 0.75em;
    text-align: center;
    line-height: 1.7em !important;
    color: #666666;
    display: block;
}

.ServiceShowPic img {
    margin: auto;
}

.ServiceShowleftPic {
    float: left;
    margin-right: 15px;
    text-align: center;
    color: #666666;
    display: inline-block;
}

.ServiceShowrightPic {
    float: right;
    margin-left: 15px;
    text-align: center;
    color: #666666;
    display: inline-block;
}

.ServiceShowPic,
.ServiceShowrightPic,
.ServiceShowleftPic {
    font-size: 0.75em;
    text-align: center;
    line-height: 1.7em !important;
}

.ServiceShowPic img,
.ServiceShowrightPic img,
.ServiceShowleftPic img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
}

table .ullist {
    padding: 0px 0px 0px 19px !important;
}

.ullist {
    padding: 5px 0px 5px 19px;
    margin: 0px;
}

.ollist {
    padding: 5px 0px 5px 19px;
    margin: 0px;
}

.ollist li,
.ullist li {
    line-height: 24px;
    margin-bottom: 10px;
}

.ullist li {
    list-style: disc !important;
}

.ollist .ullist li {
    list-style: disc !important;
}

.ullist .ullist li {
    list-style: circle !important;
}

.ollist li {
    list-style: decimal !important;
}

.ollist li a,
.ullist li a {
    color: var(--color-main-light);
}

.ollist li a:hover,
.ullist li a:hover {
    text-decoration: underline;
}

.star {
    padding: 0px 0px 5px 0px;
}

.star li {
    list-style: none !important;
    background: url(../images/icon-star.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 16px 24px;
    padding-left: 24px;
    padding-bottom: 0;
    line-height: 28px;
}

.decimal-1 li {
    list-style: decimal !important;
}

.disc li {
    list-style: disc !important;
}

.roman li {
    list-style: lower-roman !important;
}

.greek li {
    list-style: lower-greek !important;
}

.latin li {
    list-style: lower-latin !important;
}

.upper-latin li {
    list-style: upper-latin !important;
}

.tablecontentshow {
    margin: auto auto 15px auto;
}

.tablecontentshow td {
    padding: 8px;
}

.tablecontentshow .servicetheadbg {
    background-color: var(--color-main-light);
    color: #ffffff;
}

.tableimgshow {
    margin: 0px 0px 15px;
    border: 0;
}

.tableimgshow tr,
.tableimgshow th,
.tableimgshow td {
    padding: 5px 12px;
    border-bottom: none;
    text-align: center !important;
    background: #fff;
}

@media (min-width: 769px) and (max-width: 1279px) {
    .ServiceShowleftPic,
    .ServiceShowrightPic {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .ServiceShowleftPic img,
    .ServiceShowrightPic img {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .ServiceShowleftPic,
    .ServiceShowrightPic {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .ServiceShowleftPic img,
    .ServiceShowrightPic img {
        margin-bottom: 15px;
    }
    .table-responsive .tableimgshow tr,
    .table-responsive .tableimgshow th,
    .table-responsive .tableimgshow td {
        padding: 5px 0;
        text-align: left;
        background: #fff;
    }
}

h2 {
    font-size: 22px;
    margin: 0;
    padding: 12px 0 12px 0;
    /* color: var(--color-main-light); */
}

h3 {
    font-size: 18px;
    margin: 0;
    padding: 10px 0 10px 0;
}

.row-a2 {
    width: 100%;
}

.row-a2 .col-md-22 {
    width: 50%;
    float: left;
}

@media (max-width: 768px) {
    .row-a2 .col-md-22 {
        width: 100%;
        float: none;
        padding-right: 0;
    }
}

.inquiry-tablebox,
.inquiry-tablebox tr,
.inquiry-tablebox tr td {
    border: 0;
    padding: 0;
    background: #fff;
    line-height: 22px;
    margin: 0;
}

.inquiry-check {
    text-align: center;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-color: #7da1c4;
    color: #ffffff;
    line-height: 40px;
    font-weight: bolder;
    font-size: 22px;
    position: relative;
    z-index: 9;
}

.inquiry-check img {
    top: 10px;
    left: 5px;
    position: absolute;
    z-index: 10;
}

.inquiry-successfully {
    font-size: 24px !important;
    color: #7da1c4 !important;
    font-weight: bold;
    margin-bottom: 0;
}

.E404 {
    line-height: 26px;
}

.E404 img {
    display: block;
    max-width: 100%;
    height: auto;
}

.E404 {
    width: 510px;
    margin: 70px auto auto auto;
    border: 0px solid #ff0000;
}

.E404 .Etit {
    font-size: 25px;
    line-height: 35px;
    color: #525151;
}

.E404 .content {
    color: #767676;
}

.E404 a {
    color: #525151;
    text-decoration: none;
}

.E404 .btn {
    border: 1px solid #dddddd;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
    background-color: #efefef;
}

.E404 .btn:hover {
    background-color: #3399cc;
    color: #ffffff;
}

@media only screen and (max-width: 1024px) {
    .E404 {
        width: 90%;
        margin: 0px auto auto auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.inquiry-button {
    cursor: pointer
}

.project-notes {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
    color: #000;
    background: #f5f5f5;
    margin-top: 15px;
    margin-bottom: 0px;
    line-height: 26px;
}

.project-notes i {
    display: inline-block;
    padding-right: 8px;
    font-size: 19px;
    color: #fb6627;
}

.listsearchkey {
    color: #030303;
    background: #f9f9f9;
    height: 100%;
    line-height: 36px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 1rem;
    position: absolute;
    top: auto;
    left: 0;
    width: calc(56% + 176px);
    min-height: 190px;
    overflow: auto;
    display: none;
}

.listsearchkey ul li.curr {
    color: #fff;
    background: #337ab7;
}

.listsearchkey ul li {
    display: block;
    padding: 0px 25px;
    margin-top: 1px;
}

.listsearchkey ul li:hover {
    color: #fff;
    background: #337ab7;
}

@media screen and (max-width: 768px) {
    .listsearchkey {
        width: 100%;
    }
}

.row:after {
    display: table;
    content: " ";
}

.row:after {
    clear: both;
}

#groupframe {
    width: 100%;
    background: #f5f5f5;
    position: relative;
    padding: 6px 0 0;
    margin-bottom: 20px;
}

#groupframe:after {
    display: table;
    content: " ";
}

#groupframe:after {
    clear: both;
}

#groupframe>ul {
    display: inline-block;
}

#groupframe .dropdown-menu {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    overflow-y: auto;
    padding: 20px 0;
    max-height: 400px;
    display: none;
    float: left;
    min-width: 160px;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

#groupframe .dropdown-menu li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#groupframe .dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

#groupframe .dropdown-menu>li>a:hover,
#groupframe .dropdown-menu>li>a:focus {
    color: #337ab7;
    text-decoration: none;
    background-color: #f5f5f5;
}

#groupframe .btn-group {
    position: static;
    display: inline-block;
    padding-right: 10px;
    padding-bottom: 0;
    float: left;
}

#groupframe .btn-group:hover .dropdown-menu {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
}

#groupframe .btn-group .btn-default {
    color: #337ab7;
}

#groupframe .btn-group:hover .btn-default {
    color: #333;
}

#groupframe .btn {
    border-radius: 0;
    display: inline-block;
    padding: 6px 32px;
    cursor: pointer;
    font-size: 16px;
}

#groupframe .btn:hover {
    background-color: #337ab7;
}

#groupframe .btn:hover a {
    color: #fff;
}

.drop-box {
    position: relative;
}

#groupframe .dropdown-menu>li {
    float: left;
    width: 25%;
}

#groupframe .dropdown-toggle {
    padding-left: 0;
}

#groupframe .btn-group .btn-default {
    background-color: #f5f5f5;
    border: 0;
    width: auto !important;
    font-weight: bold;
}

.crumbs-handle {
    display: inline-block;
    padding: 1px 30px 1px 6px;
    margin-right: 10px;
    margin-bottom: 20px;
    border: 1px dashed #535fb0;
    position: relative;
    color: #337ab7;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 30px !important;
}

.crumbs-handle a {
    padding: 1px 9px;
    position: absolute;
    right: 0px;
    top: 0;
    text-decoration: none;
    color: #337ab7;
}

.nomain-listfilter-header {
    display: inline-block;
    padding: 5px 15px;
    float: right;
}

.nomain-listfilter-header .cclear {
    display: inline-block;
    padding: 5px 25px;
    margin-left: 20px;
    background: var(--color-main-light);
    border-radius: 10px;
}

.nomain-listfilter-header .cclear a {
    color: #fff;
}

.nomain-listfilter-header .cclear:hover {
    background: #1f3e73;
}

.nomain-listfilter-header .cclear:hover a {
    color: #fff;
}

@media (max-width: 1100px) {
    #groupframe .dropdown-menu>li {
        width: 33%;
    }
}

@media (max-width: 767px) {
    #groupframe .dropdown-menu>li {
        width: 50%;
    }
    .nomain-listfilter-header {
        display: block;
        float: none;
    }
    #groupframe .dropdown-menu {
        top: 86px;
    }
}

.bottom-c .Follow-us {
    margin-top: 20px;
}


/************************************************************************/


/*********************shopping car***************************************/


/************************************************************************/

.genenum {
    font-size: 1em;
    font-weight: bold;
    padding-bottom: 10px;
    line-height: 1.7em;
}

.genenum strong {
    display: inline-block;
    padding-bottom: 5px;
    color: #2751a3;
}

.genenum span {
    padding: 3px 5px 3px 5px;
    margin: 2px;
    color: #2751a3;
    cursor: pointer;
}

.genenum span:hover {
    background-color: #2751a3;
    color: #fff;
}

.genenum .choosebg {
    background-color: #2751a3;
    color: #fff;
}

.basket-sidecontainer .side-content .sidebasket tr td span {
    color: #84b2ff !important;
}


/*shopping basket - start*/

.icon-basket:before {
    content: "\f07a";
    font-family: "FontAwesome";
    padding: 5px;
    display: block;
    color: #fff;
    font-size: 1.5em;
}

.basket-sidecontainer {
    position: fixed;
    top: 30%;
    padding: 10px;
    right: 0;
    background-color: #1F3E74;
    line-height: 18px;
    z-index: 100000;
    border-radius: 5px;
}

.basket-sidecontainer:hover .glyphicon {
    color: #ffffff;
}

.basket-sidecontainer a {
    color: #f2f2f2;
    text-decoration: none;
}

.basket-sidecontainer:hover a {
    color: #ffffff;
}

.basket-sidecontainer:hover .side-content {
    display: block;
    color: #b9e8f7;
}

.basket-sidecontainer .side-content {
    z-index: 99;
    position: absolute;
    top: 0px;
    right: 0;
    background-color: #21241D;
    display: none;
    color: #fff;
    padding: 15px;
    width: 360px;
}

.basket-sidecontainer .side-content .h {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ffffff;
}

.basket-sidecontainer .side-content .sidebasket {
    font-size: 12px;
    max-height: 300px;
    overflow: hidden;
    overflow-x: auto;
    overflow-y: scroll;
    color: #ffffff;
}

.basket-sidecontainer .side-content .sidebasket tr td {
    border-bottom: 1px solid #ccc;
    padding: 8px;
    color: #ffffff;
    line-height: 18px;
    background-color: #21241D;
}

.basket-sidecontainer .side-content .sidebasket tr:last-child td {
    border-bottom: 0px;
}

.basket-sidecontainer .basket-count {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: #F00;
    color: #ffffff;
    z-index: 12;
    position: absolute;
    top: -5px;
    right: 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    z-index: 110;
}

.cartbtn {
    display: inline-block;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background-color: #1F3E74;
    border: 0px;
    cursor: pointer;
    border-radius: 5px;
    outline: none;
    margin: 10px 0;
    padding: 10px 15px;
}

.cartbtn:hover {
    color: #ffffff;
}

.addtobasket:before {
    content: "\f07a";
    font-family: "FontAwesome";
    padding: 3px 0px;
    display: block;
    color: #fff;
    border-radius: 3px;
    background-color: #1F3E74;
    font-size: 1.3em;
    text-align: center;
    width: 50px;
    cursor: pointer;
    margin-right: 5px;
}

.addtobasket:hover:before {
    background-color: var(--color-main-light);
}

.new-add-btn {
    background-color: #1F3E74;
    display: flex !important;
    align-items: center;
    padding: 5px 20px 5px 10px;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.new-add-btn:hover {
    background-color: var(--color-main-light);
}

.basket-sidecontainer .side-content .sidebasket tr td span {
    color: #84b2ff !important;
}


/**car**/

.tdaddtobasket {
    display: inline-block;
}

.ShoppingCar {}

.ShoppingCar .carTit {
    font-size: 20px;
    font-weight: bold;
}

.ShoppingCarList {
    display: table;
    width: 100%;
    font-size: 14px;
    padding: 5px;
    /* background-color:#fafafa;*/
}

.ShoppingCarqiansebg {
    background-color: #f2f2f2;
    font-weight: bold;
}

.ShoppingCarList td {
    padding: 8px;
}

.ShoppingCarList tr:first-child td,
.ShoppingCarList tr:last-child td {
    background-color: #E6E6E6;
}

.ShoppingCarList tr td {
    border-bottom: 1px solid #efefef;
    background-color: #FFF;
}

.ShoppingCarList a:hover {
    color: #ff0000;
}

.ShoppingCarList .docare {
    color: #000000;
    cursor: pointer
}

.ShoppingCarList .docare:hover {
    color: #ff0000;
}

.ShoppingCarList .dellink {
    color: #000000;
    cursor: pointer
}

.ShoppingCarList table tr:nth-of-type(2n+2) td {
    background-color: #FAFAFA
}

.shoppoingNote {
    padding: 10px 10px 10px 30px;
    background-color: #fcf6ee;
    font-size: 16px;
    margin-bottom: 15px;
    border: 1px solid #f4dec0;
    font-weight: lighter;
    position: relative;
}


/*shopping basket - end*/

.input-group .arrow {
    height: 31px;
    width: 31px;
    background-color: #efefef;
    text-align: center;
    font-size: 12px;
    display: inline-block;
    z-index: 1;
    line-height: 31px;
    cursor: pointer;
}

.input-group input {
    padding-left: 35px;
    height: 31px;
}

.input-group .arrow.sitetop {
    position: absolute;
    top: 0px;
    right: 0px;
    border: 1px solid #a1a1a1;
}

.input-group .arrow.sitebottom {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid #a1a1a1;
}

.input-group .arrow:hover {
    background-color: #203869;
    transform: background-color 0.3s;
    border: 1px solid #203869;
    color: #ffffff;
}

.shopping-unit {
    display: table;
    padding: 0px;
    margin: 0px;
}

.shopping-unit:nth-child(2n+1) {
    background-color: #f2f2f2;
}

.headbg {
    background-color: #1e3664 !important;
    color: #ffffff !important;
    font-weight: bold;
}

.headbg li:nth-child(8) {
    color: #ffffff !important;
    cursor: none !important;
}

.shopping-unit li {
    float: left;
    padding: 10px;
}

.shopping-unit li:first-child {
    width: 7%;
}

.shopping-unit li:nth-child(2) {
    width: 15%;
}

.shopping-unit li:nth-child(3) {
    width: 26%;
}

.shopping-unit li:nth-child(4) {
    width: 7%;
}

.shopping-unit li:nth-child(5) {
    width: 10%;
}

.shopping-unit li:nth-child(6) {
    width: 15%;
}

.shopping-unit li:nth-child(7) {
    width: 10%;
}

.shopping-unit li:nth-child(8) {
    width: 10%;
}

.shopping-unit li:nth-child(8) i {
    font-weight: bold;
}

.shopping-unit li:nth-child(8):hover {
    color: #ff0000;
}

.shopping-unit li:nth-child(8) {
    color: #666666;
    cursor: pointer;
}

.cash {
    display: table;
    width: 100%;
    margin-top: 20px;
}

.cash ul {
    padding: 0px;
    margin: 0px;
    display: table;
    width: 100%;
    height: 100px
}

.cash ul li {
    padding: 10px;
    background-color: #efefef;
    color: #666666;
    position: relative;
    height: 100px;
    list-style: none;
}

.cash ul li select {
    margin-top: 5px;
    display: block;
}

.cash ul li .fuhao {
    position: absolute;
    right: 15px;
    top: 15%;
    color: #dddddd;
    font-size: 40px;
}

.cash ul li:last-child {
    background-color: #f2e63b;
    color: #000000;
}

.cash ul li .num {
    font-size: 18px;
    display: block;
    font-family: Arial, " sans-serif", Helvetica Neue, Helvetica;
    font-weight: bold;
    margin-top: 5px;
}

.shoppingTit {
    font-weight: bold;
    font-size: 28px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.smallshoppingTit {
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #efefef;
    padding-bottom: 15px;
}

.smallshoppingTit i {
    color: #f2e63b;
    margin-right: 8px;
}

.Checkout-info-unit {
    display: table;
    width: 100%;
    padding-bottom: 30px;
    margin-top: 15px;
}

.radio-inline {
    margin-bottom: 15px;
}

.Checkout-info-unit .info-title {
    vertical-align: middle;
}

.checkout-btn {
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #ffffff;
    background-color: #1e3664;
    border: 0;
    padding: 10px 20px 10px 20px;
    font-family: Arial, " sans-serif", Helvetica Neue, Helvetica;
    font-weight: bold;
    font-size: 20px;
}

.checkout-btn:hover {
    background-color: #f2e63b;
    color: #000000;
}

.checkout-btn-mod {
    color: #000000;
    background-color: #f2e63b;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 0;
    padding: 10px 20px 10px 20px;
    font-family: Arial, " sans-serif", Helvetica Neue, Helvetica;
    font-weight: bold;
    font-size: 20px;
}

.checkout-btn-mod:hover {
    background-color: #1e3664;
    color: #ffffff;
}

.price-total:before {
    content: '$';
}

#cartTable .input-group input {
    padding-left: 10px;
    height: 31px;
    width: 80px
}

.minus-icon,
.plus-icon {
    cursor: pointer;
}

.minus-icon:before {
    font-family: glyphicons;
    content: "\2212";
    color: #9c9b9b;
}

.plus-icon:before {
    font-family: glyphicons;
    content: "\002b";
    color: #9c9b9b;
}

.table-cart .input-sm {
    min-width: 40px;
}

.table-cart select {
    padding: 5px;
    border: none;
    background: #FFF;
}

@media only screen and (min-width:1366px) {
    .shopping-unit {
        width: 100%;
    }
    .cash ul li {
        width: 18%;
        float: left;
    }
    .cash ul li:first-child {
        width: 28%;
        float: left;
    }
    .Checkout-info-unit .info-title {
        padding-top: 11px;
    }
    .Checkout-info-page div[class*="col"].info-input {
        padding-top: 11px;
    }
    .Checkout-info-unit div[class*="col"] {
        padding-bottom: 10px;
    }
}

.tabledetail {
    margin-top: 15px;
    display: flex;
}

.tabledetailbox {
    width: 100%;
    flex: 1;
}

@media screen and (max-width: 768px) {
    .tabledetail {
        display: flex;
        flex-direction: column;
    }
}

.tabledetail:after {
    display: table;
    content: " ";
}

.tabledetail:after {
    clear: both;
}

.tabledetailbox table {
    border-collapse: collapse;
}

.tabledetailbox table,
.tabledetailbox table tr,
.tabledetailbox table tr th,
.tabledetailbox table tr td {
    border: 1px solid #ddd;
    text-align: center;
}

.tabledetailbox table tr th {
    background: #f5f5f5;
    color: #000;
}

.tabledetailbox table tr:nth-of-type(2n+2) td {
    background: #fff;
}

.tabledetailbox table input {
    text-align: center;
    border: 1px solid #a7a6a6;
}

.input-group input {
    padding: 0 10px;
    text-align: center;
    line-height: 31px;
}

@media (min-width: 992px) {
    .tabledetail .tabledetailimg {
        width: 35%;
        float: left;
        border: #ddd solid 1px;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        margin: 10px 5% 20px 0;
        background: url(../images/loadinfo.gif) no-repeat;
        background-position: center;
        min-height: 330px;
    }
    .tabledetail .tabledetailimg img {
        max-width: 100% !important;
        background: #fff;
    }
}

.btn-inquiry.inquiry-button {
    width: 120px;
    height: 36px;
    line-height: 36px;
}


/**/

.product_list thead,
.product_list tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.product_list thead {
    padding-right: 20px;
}

.product_list tbody {
    display: block;
    max-height: 580px;
    overflow-y: scroll;
}


/* .product_list table thead tr th:nth-child(3),
.product_list table tbody tr td:nth-child(3) {
	width: 13%;
}
.product_list table thead tr th:nth-child(4),
.product_list table tbody tr td:nth-child(4) {
	width: 15%;
} */

table.bt tr .th-center {
    text-align: left;
}

table.bt .btn-pdf {
    text-align: left !important;
}

table.bt thead {
    display: none !important;
}

.width-100 {
    width: 8%;
}

.width-120 {
    width: 10%;
}

.width-460 {
    width: 38%;
}

.table-responsive table {
    margin: 0 !important;
}

.table-responsive {
    margin: 10px 0 20px;
}

.t-checkbox {
    width: 60px;
}

.list-style-two li,
.bottom-center {
    font-family: Arial, sans-serif;
}

.careers-detail {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dddddd;
    margin: 0 !important;
}

.row.careers-detail:nth-child(2n+1) {
    background-color: #fafafa;
}

.careers-detail .col-md-3 {
    font-weight: bold;
    padding-right: 15px;
    padding-left: 15px;
    line-height: 25px;
}

.careers-detail .col-md-9 {
    font-size: 14px;
    line-height: 25px;
    padding-right: 15px;
    padding-left: 15px;
}

.careers-detail ul,
.careers-detail ol {
    padding: 0px 0px 5px 19px;
    margin: 0px;
}

.careers-detail ul li {
    list-style: disc;
}

.careers-detail ol li {
    list-style: decimal;
}

.careers-detail p {
    padding: 0;
}

.careersform {
    margin-top: 0;
    margin-bottom: 20px;
}

.careersform input,
.careersform textarea {
    width: 100%;
    padding: 6px 10px;
    background: #f0f0f0;
    border: 0;
    border-radius: 4px;
}

.careersform label {
    margin: 0;
}

@media (min-width: 992px) {
    .careersform .col-md-4 {
        width: 33.33333333% !important;
    }
}

@media (max-width: 991px) {
    .careersform .col-md-4 {
        width: 100% !important;
    }
}

.hand-right-h {
    position: relative;
    padding-left: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
    -webkit-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .2);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .2);
    margin: 15px 0;
}

.hand-right-h .fa {
    position: absolute;
    top: 10px;
    left: 20px;
}

.hand-right-h a {
    display: block;
}

.hand-right-h:hover {
    background: #44546a;
    color: #fff;
}

.hand-right-h:hover a {
    color: #fff;
}

.container-job li .jobbox {
    position: relative;
    background: #fff;
    -webkit-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .2);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .2);
    margin: 5px 0;
    padding-left: 50px;
}

.container-job li .fa {
    position: absolute;
    top: 8px;
    left: 20px;
}

.container-job li a {
    display: block;
    font-weight: bold;
    color: #393939;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 8px 0;
}

.container-job li .jobbox:hover {
    background: var(--color-main-light);
    color: #fff;
}

.container-job li .jobbox:hover a {
    color: #fff;
    text-decoration: none;
}

.careers-online-t {
    border-top: 2px solid #ccc;
    padding-top: 20px;
}

.careersform .row {
    width: auto;
}

.project-notes {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
    color: #000;
    background: #f5f5f5;
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 26px;
}

.project-notes i {
    display: inline-block;
    padding-right: 8px;
    font-size: 19px;
    color: #fb6627;
}

.owl-carousel-show {
    max-width: 1200px;
}

.owl-carousel-show .item .row-b-span {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(7, 105, 177, 0.8);
}

.owl-carousel-show .item:hover .row-b-span {
    opacity: 1;
}

.owl-carousel-show .item .row-b-span span {
    display: table;
    height: 100%;
    padding: 30px 15px;
    overflow: hidden;
}

.owl-carousel-show .item .row-b-span span p {
    color: #fff;
    padding: 0;
}

.owl-carousel-show .item:hover p a {
    color: var(--color-main-light);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.owl-carousel-show .item .pw {
    position: relative;
    height: auto;
}

.owl-carousel-show .item img {
    width: 100%;
    margin: auto;
}

.owl-carousel-show .item p {
    margin-top: 0px;
    text-align: center;
}

.owl-carousel-show .item p a {
    display: block;
    width: 100%;
    height: 100px;
    line-height: 100px;
    background: #fff;
    color: #393939;
    font-size: 18px;
}

@media (max-width: 1200px) {
    .owl-carousel-show .item .row-b-span span p {
        display: -webkit-box;
        display: -o-box;
        display: -moz-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        -o-box-orient: vertical;
        -o-line-clamp: 6;
        -moz-box-orient: vertical;
        -moz-line-clamp: 6;
        overflow: hidden;
    }
    .owl-carousel-show .item .row-b-span span {
        padding: 20px 15px;
    }
}


/*2021-07*/

.mt-40 {
    margin-top: 40px !important;
}

.custom-tabs .nav-tabs {
    border-color: var(--color-main-light);
}

.custom-tabs .nav-tabs>li>a {
    padding: 10px;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 18px;
}

.custom-tabs .nav-tabs>li.active>a {
    border-color: var(--color-main-light);
    background-color: var(--color-main-light);
    color: #fff;
}

@media screen and (max-width: 768px) {
    .custom-tabs .nav-tabs>li>a {
        font-size: 14px;
        padding: 10px 5px;
        line-height: 1;
    }
}

.search-btn {
    background-color: #E94380;
    padding: 10px 20px;
    border-radius: 4px;
    color: #fff;
    width: 150px;
    cursor: pointer;
    text-align: center;
}

.search-btn:hover {
    background-color: #E21B66;
}

.pro_list_title {
    display: table;
    font-weight: bold;
    margin-bottom: 10px;
}

.search-tab {
    padding-bottom: 120px;
}

.search-tab>li {
    width: 31.6%;
    /* text-align: right; */
    position: relative;
    padding: 10px;
    border: 1px solid #042e5c;
    margin-right: 1.4%;
    margin-bottom: 10px;
    float: left;
    border-radius: 2px;
}

.search-tab input::-webkit-input-placeholder {
    color: rgb(110, 110, 110);
    font-weight: normal;
}

.search-tab>li::after {
    position: absolute;
    top: 13px;
    right: 15px;
    width: 11px;
    height: 11px;
    border-bottom: 3px solid #042e5c;
    border-bottom-color: rgb(0, 0, 0);
    border-right: 3px solid #042e5c;
    border-right-color: rgb(0, 0, 0);
    content: "";
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    -ms-transition: border-color 0.2s ease;
    -o-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
    border-color: #042e5c;
}

.search-tab>li select {
    position: absolute;
    left: 0;
    top: 0;
    color: #000;
    padding: 5px;
    height: 40px;
    border: 0;
    width: 50px;
    box-sizing: border-box;
}

.search-tab input {
    outline: none;
    border: none;
    width: 100%;
    color: #042e5c;
    font-weight: bold;
}

.search-tab li select option {
    /* background-color: #fff; */
}

select:focus {
    outline: none;
}

select option:hover {
    outline-color: rgba(0, 0, 0, 0) !important;
}

select:focus option:selected {
    background: #fff;
    color: #000;
    border: 0 !important;
    outline: none !important;
}

.fa-file-pdf-o {
    color: red;
}

.select-item-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 500px;
    background-color: #fff;
    top: 40px;
    margin-top: 10px;
    border: 1px solid #042e5c;
    overflow: auto;
    opacity: 0;
    z-index: -1;
    transition: all 0.2s linear 0s;
}

.select-item-box li {
    padding: 10px;
    cursor: pointer;
}

.select-item-box .choose {
    background-color: #3B7BF7;
    color: #fff !important;
}

.select-item:first-child {
    display: block !important;
    color: #3B7BF7;
}

.select-active .select-item-box {
    opacity: 1;
    z-index: 100;
}

@media (max-width:800px) {
    .index-line {
        width: 100% !important;
    }
    .services-1,
    .services-2 {
        padding: 50px 10px;
    }
    .main-right {
        padding: 50px 10px;
    }
    .f6-contact {
        display: none;
    }
}

.social a {
    font-size: 18px;
    margin-right: 10px;
}

#table-breakpoint a {
    color: #3B7BF7;
}

.search-list li {
    padding-left: 30px;
    margin-bottom: 20px;
}

.search-list a {
    color: #3B7BF7;
}

.img-list {
    margin: 15px 0
}

.img-list ul li {
    height: auto;
    min-height: 26px;
    line-height: 1.3;
    padding: 15px 5px;
    border-bottom: #acd6f7 solid 1px;
}

.img-list ul li:nth-child(odd) {
    background: #f3faff;
}

.img-list ul li a:hover {
    text-decoration: none;
}


/* text border box */

.page-box {
    width: 100%;
    margin-bottom: 45px!important;
    clear: both;
    border: #458ad1 solid 24px;
    padding: 30px 20px 30px 20px;
    position: relative;
}

.page-box::before {
    content: url(../img/box-top.png);
    display: block;
    position: absolute;
    top: -61px;
    left: -30px;
}

.page-box::after {
    content: url(../img/box-bottom.png);
    display: block;
    position: absolute;
    bottom: -68px;
    right: -31px;
}

.page-box h3,
h3.page-box-title,
h2.page-box-title {
    margin-top: 0;
    font-size: .25rem;
    line-height: 1.5;
    margin-left: 12px;
    color: #458ad1;
}

h3.page-box-title,
h2.page-box-title {
    font-size: 35px;
    margin-left: 188px;
    text-shadow: 2px 2px 3px #b68dc7;
    -webkit-text-stroke: 1px #fff;
    font-weight: bolder;
    padding-bottom: 0;
}

.page-box2 {
    border: .5px solid #458ad1;
    border-radius: 32px;
    padding: 35px 35px 20px 35px;
    margin-bottom: 20px;
    position: relative;
    margin-top: 30px;
    clear: both
}

.page-box2 h3 {
    display: inline-block;
    margin: 0 auto;
    background-color: #458ad1;
    color: #fff;
    font-size: 18px !important;
    border-radius: 40px;
    position: absolute;
    top: -21px;
    left: 0;
    right: 0;
    width: 400px;
    padding: 10px 30px;
    text-align: center;
}

.gray-bg {
    background: #f6f6f6;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
}

.border-title {
    border-top: #1c3c6f solid 1px;
    border-bottom: #1c3c6f solid 1px;
    padding: 10px 0 8px 0;
    margin-bottom: 10px;
}

.d-flex {
    display: flex;
}

.m-10 {
    margin-bottom: 10px;
}

.border-box {
    height: 100%;
    width: 100%;
    border: #99b9ed solid 2px;
    padding: 10px 10px 0 10px;
}

.page-tab {
    display: flex;
    gap: 10px;
    position: sticky;
    top: 106px;
    left: 0;
    background: #fff;
    padding: 15px 0;
    z-index: 96;
    flex-wrap: wrap;
}

#ql-go3 {
    position: sticky;
    top: 106px;
    left: 0;
    background: #fff;
}

#ql-go3 .page-tab {
    position: unset;
}

@media screen and (max-width: 768px) {
    .page-tab,
    #ql-go3 {
        top: 54px;
    }
}

.page-tab span {
    cursor: pointer;
    background-color: #eee;
    color: #333;
    border-radius: 8px;
    width: auto;
    padding: 5px 10px;
    text-align: center;
    display: inline;
}

.page-tab span:hover,
.page-tab span.active {
    background: var(--color-main-dark);
    color: #fff
}

.page-tab span:active {
    background: #2083ca;
    color: #fff
}

@media screen and (max-width: 768px) {
    .page-tab {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .page-tab span {
        white-space: nowrap;
    }
    .page-tab::-webkit-scrollbar {
        opacity: 0;
        display: none;
    }
}

.h2_tit,
h2.h2_tit {
    border-left: var(--color-main-dark) solid 4px;
    margin: 20px 0;
    padding: 5px 10px;
    background: #f7f7f7;
    font-weight: 700;
    color: #000;
}

.faq .fs-5 {
    font-size: 17px;
    font-weight: bold;
}

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

.cr-box p {
    padding: 15px 10px;
    background: #f2f9ff;
    border-left: 2px #2083ca solid;
    margin-bottom: 15px;
}

.tag-in-stock {
    background: red;
    color: #fff;
    font-size: 12px;
    border-radius: 16px;
    padding: 3px 8px;
    font-weight: bold;
    position: relative;
    top: -5px;
}

.list-arrow li {
    list-style: none !important;
    background: url(../images/ico-awr.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 16px 24px;
    padding-left: 24px;
    padding-bottom: 0;
    line-height: 28px;
}

.left-1 {
    margin-left: 17px;
}

.rs-box {
    display: flex;
    row-gap: 15px;
    margin-bottom: 15px;
}

.rs-box a {
    display: flex;
    border-radius: 3px;
    border: #ffffff solid 1px;
    color: #0078d7;
    padding: 5px 15px;
    box-shadow: 0 0 5px 0 #00000024;
    height: 100%;
    align-items: center;
}

.rs-box a:hover {
    background: #0078d7;
    color: #fff;
}

.services-container {
    overflow: unset;
}

.services-container .tooltip-box {
    position: relative
}

.services-container .tooltip-box:hover .tooltip {
    display: block
}

.services-container .tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(30, 30, 30, 1);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: wrap;
    width: 100%;
    font-size: 14px;
    text-align: left;
    opacity: 1
}

.services-container .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    border-width: 8px;
    border-style: solid;
    border-color: rgba(30, 30, 30, 1) transparent transparent transparent;
    transform: translateX(-50%)
}

.services-container .tooltip a {
    color: #0ff;
    text-decoration: underline
}


/* new */

.footer {
    background: var(--color-main-dark);
    color: #fff;
    position: relative;
    z-index: 19;
}

.footer a {
    color: #fff;
}

.footer ul.nor>li {
    line-height: 1.7;
    margin-bottom: 15px;
    display: flex;
    gap: 5px;
}

.ico-phone::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V2zm6 11a1 1 0 1 0-2 0 1 1 0 0 0 2 0z' fill='%23ffffff'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 5px;
}

.ico-fax::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='2' y='4' width='12' height='8' rx='1' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M4 8h8 M4 11h8' stroke='%23ffffff' stroke-width='2'/%3E%3Crect x='4' y='1' width='8' height='3' fill='%23ffffff'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 6px;
}

.ico-envelope::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z' fill='%23ffffff'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 5px;
}

.ico-mapmarker::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z' fill='%23ffffff'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 5px;
}

.ico-globe::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpath d='M3 8h10 M8 3.5C6.5 5 5.5 7 5.5 8s1 3 2.5 4.5c1.5-1.5 2.5-3.5 2.5-4.5S9.5 5 8 3.5z' stroke='%23ffffff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 5px;
}

@media screen and ( max-width: 1279px) {
    /* menu */
    .submit_search button {
        width: 48px;
        margin: 0 !important;
        background: none;
        padding: 0;
    }
    .submit_search button:before {
        color: #333
    }
    .submit_search button:hover {
        background: #f5f5f5
    }
    .menu>ul {
        margin: 0 auto;
    }
    .menu {
        background: none;
        width: 48px;
        order: 4;
    }
    .navi-submenu {
        display: none;
    }
    .menu>ul>li>ul {
        box-shadow: none;
    }
}

@media screen and ( max-width: 769px) {
    /* banner */
    .banner ul.flicks>li .flick-inner .flick-content h2 {
        font-size: 22px !important;
        line-height: 1.5;
    }
    /* index title */
    .main-title {
        padding: 15px;
        margin: 0 !important;
    }
    /* sp img */
    .p-ind-img {
        position: relative !important;
        transform: translateX(0) translateY(110px) !important;
        margin-top: -110px;
        top: 0;
        left: 0 !important;
        display: none;
    }
}

.input-group-addon {
    background: #fff;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: #eee solid 1px;
}

.input-group-addon:hover {
    background: var(--color-main-light);
    color: #fff;
}

.input-group-addon:hover:before {
    color: #fff!important;
}

#ql-go ul li {
    border-bottom: #f8f8f8 solid 1px;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

#ql-go ul li a {
    display: block
}

#ql-go ul li a,
#ql-go ul li a::before {
    color: #000;
}

#ql-go ul li a::before {
    content: "→";
    margin-right: 5px;
    font-weight: 900;
    color: var(--color-main-light);
    font-size: 1.25rem;
    vertical-align: middle;
}

#ql-go ul li a:hover::before,
#ql-go ul li a:hover,
#ql-go ul li.active a,
#ql-go ul li.active a:before {
    color: var(--color-main-light);
}

#ql-go ul li.active {
    background: #f5f5f5
}

.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 25px;
}

.faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden
}

.question,
h3.question {
    color: #2c5282;
    margin: 0;
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    transition: background-color .3s ease
}

.question:hover {
    background: #edf2f7
}

.question::after {
    content: '+';
    font-size: 24px;
    font-weight: 400
}

.question.active::after {
    content: '-'
}

.answer {
    color: #4a5568;
    margin: 0;
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease;
    background: #fff
}

.answer.active {
    padding: 24px;
    max-height: 1000px
}

.answer p {
    margin: 0 0 16px
}

.answer p:last-child {
    margin-bottom: 0
}

.pop-inquiry {
    cursor: pointer;
}

.page-tab .pop-inquiry {
    cursor: pointer;
    background-color: var(--color-yellow);
    color: var(--color-main-dark);
    border-radius: 8px;
    width: auto;
    padding: 5px 10px;
    text-align: center;
}

.page-tab .pop-inquiry:hover {
    background: var(--color-main-light);
    color: #fff;
}

.inquiry-box>button {
    display: none;
}

.inquiry-box.active>button {
    display: unset;
}

.inquiry-box.active {
    max-width: 728px;
    padding: 20px;
    background: #fff;
    border: #eee solid 1px;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1888888;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.inquiry-box.active .h2_tit {
    background: none;
}

#popupbg {
    display: none;
    background: #000000c4;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1888887;
}

.sp-style-1 {
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.sp-style-1>* {
    background: #1aa0e2;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    width: calc( 20% - 14px);
    text-align: center;
    font-weight: normal;
    line-height: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-style-1>*:hover {
    background: #0a6d9e;
}

@media screen and ( max-width: 769px) {
    .sp-style-1>* {
        width: 100%
    }
}

.table-responsible {
    width: 100%;
    overflow-x: auto;
}

.tooltip-box {
    position: relative;
}

.tooltip-box:hover .tooltip {
    display: block;
}

.tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(30, 30, 30, 1);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: wrap;
    width: 100%;
    font-size: 14px;
    text-align: left;
    opacity: 1;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    border-width: 8px;
    border-style: solid;
    border-color: rgba(30, 30, 30, 1) transparent transparent transparent;
    transform: translateX(-50%)
}

.tooltip a {
    color: #00ffff;
    text-decoration: underline;
}

.btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-main-light);
    --bs-btn-border-color: var(--color-main-light);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1f3e73;
    --bs-btn-hover-border-color: #1f3e73;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1f3e73;
    --bs-btn-active-border-color: #1f3e73;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-main-light);
    --bs-btn-disabled-border-color: var(--color-main-light)
}

.btn-blue-outline {
    --bs-btn-color: var(--color-main-light);
    --bs-btn-border-color: var(--color-main-light);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-main-light);
    --bs-btn-hover-border-color: var(--color-main-light);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-main-light);
    --bs-btn-active-border-color: var(--color-main-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-main-light);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-main-light);
    --bs-gradient: none;
}


/* left menu */

.sidemenu {
    width: 100%;
    display: block;
    margin-bottom: 4rem
}

#sidemenu,
#sidemenu ul {
    padding: 0
}

#sidemenu li {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: relative
}

#sidemenu ul {
    width: 100%
}

#sidemenu li>a {
    width: 100%;
    line-height: 1.3;
    padding: 5px 28px 5px 5px;
}

#sidemenu li>a:hover {
    background: rgba(0, 0, 0, .05);
    border-radius: 4px
}

#sidemenu li.active>a {
    color: #fff;
    background: var(--color-main-light);
    ;
    border-radius: 4px
}

#sidemenu li.active>span {
    color: #fff;
    border-color: #fff
}

#sidemenu>li>a {
    font-weight: 700
}

#sidemenu>ul>li>ul>li>ul>li>a {
    width: 100%;
    font-size: .675rem
}

#sidemenu a {
    position: relative
}

#sidemenu a:hover {
    color: var(--main-color)
}

#sidemenu span {
    width: 20px;
    height: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 3px
}

#sidemenu span:hover {
    background: #eee;
    border-radius: 2px
}

#sidemenu li.active>span:hover {
    background: #eeeeee7d
}

#sidemenu>li>ul a {
    padding-left: 18px
}

#sidemenu>li>ul>li>ul>li>a {
    padding-left: 30px
}

#sidemenu>li>ul>li>ul>li>ul>li>a {
    padding-left: 45px
}

#sidemenu li ul {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease-in-out, opacity .5s ease-in-out
}

#sidemenu li ul.show {
    opacity: 1;
    max-height: 1000px
}

#sidemenu span::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    transform: rotate(90deg);
}

#sidemenu span.active::after {
    transform: rotate(-90deg);
}

#sidemenu li.active>span::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}

.img-box-1 {
    width: 100%;
    height: 227px;
    overflow: hidden;
    margin-bottom: 15px;
}

.an-1 {
    transition: all ease .3s;
    transform: translateY(0);
}

.an-1:hover {
    box-shadow: var(--bs-box-shadow-lg)!important;
    transform: translateY(-10px);
}

.an-2 .img-box-1 img {
    transform: scale(1);
    transition: all .5s ease-in-out;
}

.an-2:hover .img-box-1 img {
    transform: scale(1.1);
}

.fd-style-3 {
    border-radius: var(--bs-border-radius-lg);
    text-align: left;
    position: relative;
    overflow: hidden;
    height: 100%;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    background: #fff;
    transition: all .3s ease;
}

.fd-style-3 .title {
    background-color: var(--color-main-dark);
    color: #fff;
    padding: 0.3rem 1.5rem;
    height: auto;
    line-height: 1.3;
    margin: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    transition: all .3s ease;
}

.fd-style-3:hover .title {
    white-space: normal;
}

.fd-style-3 .title>a {
    color: var(--color-yellow);
    line-height: 1.3;
}

.fd-style-3 .content {
    padding: 0rem 1.5rem 1rem;
}

.fd-style-3a {
    border-radius: var(--bs-border-radius-lg);
    text-align: left;
    position: relative;
    height: 100%;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    background: #fff;
    transition: all .3s ease;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

.fd-style-3a .title {
    background-color: var(--color-main-dark);
    color: #fff;
    padding: 0.3rem 1.5rem;
    height: auto;
    line-height: 1.3;
    border-radius: 4px;
    width: auto;
    position: relative;
    top: -20px;
    margin: 0 15px;
}

.fd-style-3a .title a {
    color: var(--main-color-bg);
    line-height: 1.3;
}

.fd-style-3a .content {
    padding: 0rem 1.5rem;
    transform: translateY(-1rem);
}

.fd-style-8 {
    border-radius: 0 8px 8px 8px;
    text-align: left;
    position: relative;
    height: 100%;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    background: #fff;
    transition: all .3s ease;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}

.fd-style-8 .title {
    background-color: var(--main-color);
    color: #fff;
    padding: 1rem 1.5rem;
    height: auto;
    line-height: 1.3;
    border-radius: 4px 4px 0 0;
    width: auto;
    top: -56px;
    width: 50%;
    min-width: 350px;
    position: absolute;
    margin-top: 30px;
}

.fd-style-8 .content {
    padding: 2.5rem 1.5rem 0.85rem 1.5rem;
}

.fd-style-8 .title a {
    color: #84f1ff;
    line-height: 1.3;
}

.border-box-2 {
    padding: 15px;
    border: var(--main-color) dotted 2px;
    margin: 25px 0;
    border-radius: 15px;
}

@media screen and (max-width: 768px) {
    .privacy-policy-message-layer {
        position: sticky!important;
    }
    table.ds-table tr {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    table.ds-table tr td {
        width: 100%
    }
    .product_list tbody {
        display: unset;
        max-height: unset;
        overflow-y: unset;
    }
}

.tabledetail .tabledetailbox table {
    width: 100%;
    max-width: 900px;
}

.tabledetail .tabledetailbox table th {
    min-width: unset;
}

.fs-list-1 {
    max-width: 768px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 25px auto;
}

.fs-list-1 .li {
    display: flex;
}

.fs-list-1 .li .li-title {
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    font-size: 14px;
    justify-content: center;
    position: relative;
    text-align: center;
    text-decoration: none;
    height: 56px;
    padding: 0;
    transition: all .2s ease;
    width: 57px;
    background: #1aa0e2;
    /* cursor: pointer; */
    color: #fff;
    padding-top: 25px;
}

.fs-list-1 .li .li-content {
    border: #1aa0e2 solid 1px;
    padding: 15px;
    border-radius: 0 15px 15px 0;
    width: calc(100% - 57px);
    font-size: 16px;
    line-height: 1.3;
}

.fs-list-1 .li .li-title::after,
.fs-list-1 .li .li-title::before {
    border-style: solid;
    content: "";
    width: 0;
    position: absolute;
    -moz-transition: border-color .15s ease-out 0s;
    -webkit-transition: border-color .15s ease-out 0s;
    -o-transition-property: border-color .15s ease-out 0s;
    -ms-transition-property: border-color .15s ease-out 0s;
    transition: border-color .15s ease-out 0s;
    height: 0;
}

.fs-list-1 .li .li-title::before {
    border-color: #1aa0e2 transparent transparent transparent;
    border-width: 1.5625em 2.0625em 0 2.0625em;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.5em;
    z-index: 2;
    transition: all .2s ease;
    color: #fff;
}

.fs-list-1 .li .li-title::after {
    border-color: #fff transparent transparent transparent;
    border-width: 1.6875em 2.1875em 0 2.1875em;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}


/* .fs-list-1 .li .li-title.active::before,
.fs-list-1 .li .li-title:hover::before {
    border-color: #195ea3 transparent transparent transparent;
} */

.fa-triangle::before {
    content: "▶";
    font-style: normal;
    font-weight: normal;
    padding-right: 5px;
    font-size: 30%;
}

.fa-star::before {
    content: "★";
    font-style: normal;
    font-weight: normal;
    padding-right: 5px;
}

.fd-style-7 {
    border-radius: 0 8px 8px 8px;
    text-align: left;
    position: relative;
    height: 100%;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    background: #fff;
    transition: all .3s ease;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}

.fd-style-7 .title {
    background-color: var(--main-color);
    color: #fff;
    padding: 1rem 1.5rem;
    height: auto;
    line-height: 1.3;
    border-radius: 4px 4px 0 0;
    width: auto;
    position: relative;
    top: -56px;
    width: 50%;
    min-width: 350px;
    padding-left: 95px;
    position: relative;
    margin-top: 30px;
}

.fd-style-7 .title a {
    color: var(--color-main-dark);
    line-height: 1.3;
}

.fd-style-7 .content {
    padding: 0rem 1.5rem;
    transform: translateY(-66px);
    margin-bottom: -56px;
}

.fd-style-7 .title::before {
    display: inline-block;
    color: #aedffc;
    font-size: 60px;
    position: absolute;
    top: -50%;
    left: 15px;
}

.fd-style-7:nth-child(n) .title::before {
    content: attr(data-number);
}

.fd-style-9>div.img {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.fd-style-9>div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.fd-style-9 .img img {
    width: 100%;
    height: auto;
    max-width: 400px;
}

.textboxstyle-45 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.textboxstyle-45 div[class*="col"] {
    margin-bottom: 25px;
    padding-top: 25px;
}

.textboxstyle-45 .textboxstylecont {
    display: block;
    border-radius: 5px;
    height: 100%;
    position: relative;
    padding: 10px 15px 10px 15px;
}

.textboxstyle-45 .textboxstylecont span {
    display: block;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    width: 80%;
    margin: -30px auto auto auto !important;
}

.textboxstyle-45 .col-md-4 .textboxstylecont.doarea_box span a {
    color: #000;
}

.textboxstyle-45 .col-md-4 .textboxstylecont.doarea_box span a:hover {
    text-decoration: underline;
}

.textboxstyle-45 .textboxstylecont span a {
    color: var(--color-main-light);
}


/* .textboxstyle-45 .textboxstylecont span a:hover {
    color: #000;
} */


/* .textboxstyle-45 .textboxstylecont.doarea_box span a {
    color: #000;
} */

.textboxstyle-45 .textboxstylecont.doarea_box span a:hover {
    text-decoration: underline;
}

.textboxstyle-45 .textboxstylecont .inquiry-button {
    font-size: 14px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.textboxstyle-45 .textboxstylecont div {
    padding-top: 5px;
    margin: 0px !important;
}

.textboxstyle-45 .textboxstylecont div p {
    margin: 0px;
    padding: 0px;
}


/* .doarea_box .cont_area {
    padding-bottom: 45px;
} */

.blue45 span {
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 174, 255, 0.1);
    border: 1px solid var(--color-main-light);
}

.blue45 .textboxstylecont {
    border: 1px solid var(--color-main-light);
}

.yellow45 span {
    border: 1px solid var(--color-main-light);
    background-color: var(--color-main-light);
    color: #000;
}

.yellow45 .textboxstylecont {
    border: 1px solid var(--color-main-light);
}

.process-area {
    display: flex;
    flex-wrap: wrap;
}

.process-area .doarea_box {
    height: 100%;
    padding-bottom: 20px;
    padding-left: 20px;
}

.process-area .doarea_box .textbox-border {
    color: #000;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid var(--color-main-light);
    border-radius: 8px;
    padding: 20px 20px 20px 30px;
    position: relative;
}

.process-area .doarea_box .textbox-border .num {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 38%;
    left: -18px;
    background-color: var(--color-main-dark);
    color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.process-area .doarea_box .textbox-border p {
    padding: 0px;
    margin: 0px;
}

.textboxstylecont.doarea_box p.doarea,
.flow-chart.doarea_box p.doarea {
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
}

.featuresunit {
    margin-bottom: 15px;
    position: relative;
}

.featurestit {
    display: block;
    text-align: center;
}

.featurestit img {
    border-radius: 100px;
    margin-bottom: 10px;
    border: 4px solid #fff;
}

.featurescont {
    display: none;
    position: absolute;
    top: 100%;
    left: 15px;
    width: 100%;
    background-color: var(--color-main-light);
    padding: 15px;
    z-index: 100;
    color: #fff;
}

.featurescont::after {
    content: "▲";
    color: var(--color-main-light);
    position: absolute;
    top: -18px;
    left: 44%;
    width: 30px;
    height: 25px;
    font-size: 30px;
    text-align: center;
}

.featuresunit:hover .featurestit {
    color: var(--color-main-light);
}

.featuresunit:hover .featurestit img {
    border: 4px solid var(--color-main-light);
}

.featuresunit:hover .featurescont {
    display: block;
}

.fd-style-6 {
    border-radius: 6px;
    text-align: left;
    padding: 1rem 1.5rem;
    height: 100%;
    border: 1px solid var(--color-main-light);
    background: #fff;
    transition: all .3s ease;
    position: relative;
    background: #fff;
}

.fd-style-6 .title::before {
    content: "\1F449";
    display: inline-block;
    margin-right: 5px;
}

.fd-style-11 {
    background: #ffffff;
    border-radius: 8px;
    padding: 15px 32px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    border-left: 4px solid var(--color-main-light);
    transform: translateX(0);
}

.fd-style-11:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fd-style-11 .icon-container {
    width: 48px;
    height: 48px;
    background: #ebf8ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

.fd-style-11 .icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--color-main-light);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fd-style-11 .card-title-container {
    flex-grow: 1;
}

.fd-style-11 .phase-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-main-light);
    margin-bottom: 4px;
}

.fd-style-11 .card-title {
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
    padding: 0;
}

.fd-style-11 .card-content {
    color: #4a5568;
    font-size: 16px;
    line-height: 1.6;
    padding: 0;
}

.fd-style-11 .card-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.cta-section {
    text-align: center;
    margin-top: 48px;
}

.cta-button {
    background-color: var(--color-main-light);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
    background-color: var(--color-main-light);
    transform: translateY(-2px);
}

.fd-style-1 {
    border-radius: 10px;
    text-align: left;
    padding: 1rem 1.5rem;
    height: 100%;
    border: #0078d7 solid 1px;
    background: #fff;
    transition: all .3s ease;
    position: relative;
}

.quick-item {
    position: relative;
    margin-bottom: 15px;
    display: block;
}

.quick h2 {
    border-left: #2083ca solid 4px;
    margin: 20px 0;
    padding: 5px 10px;
    background: #f7f7f7;
    font-weight: 700;
    color: #000;
}

.quick .row {
    row-gap: 25px;
}

.quick-item {
    height: 210px;
    width: 100%;
    overflow: hidden;
}

.quick-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-item span {
    background-color: #ffffffaa;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    color: #000;
    font-size: 15px;
}

.quick-item:hover span {
    background-color: #0078d7;
    color: #fff;
}

.page-box {
    z-index: 1000;
}

.st-pagination {
    margin-bottom: 30px;
}

.sd {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    margin-bottom: 20px;
    flex-wrap: wrap;
    row-gap: 10px;
}

.pagination li {
    margin-right: 5px;
}

.pagination li:last-child {
    margin-right: 0;
}

.pagination li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #337ab7;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pagination li.active a {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.pagination li a:hover:not(.active) {
    background-color: #eee;
}

.note1 {
    margin: 0 0 30px 0;
    width: 100%;
    max-width: 451px;
    text-align: right;
}

.note-btn {
    display: inline-block;
    font-size: 18px;
    border-radius: 60px;
    margin-top: 10px;
    cursor: pointer;
    border: #337ab7 solid 1px;
    padding: 8px 16px;
    color: #337ab7;
    background-color: transparent;
    transition: all 0.3s ease;
}

.note-btn:hover {
    color: #fff;
    background-color: #337ab7;
}

.text-blue {
    color: #0078d7
}

.bg-gray {
    background: #f5f5f5;
}