.banner-inner .banner-img {

    width: 100%;

    position: relative;

    overflow: hidden

}

.sidebar-item.inquiry .webfeedback {

    padding: 0px 20px;

    margin-top: 10px

}

.sidebar-item.inquiry .webfeedback .inquiry-form {

    display: flex;

    flex-direction: column

}

.sidebar-item.inquiry .webfeedback input,.sidebar-item.inquiry .webfeedback textarea {

    width: 100%!important;

    border: none;

    outline: 0;

    height: 45px;

    background: #f2f2f2;

    border-radius: 3px;

    padding: 0px 10px;

    margin-bottom: 1em;

    font-size: 15px

}

.sidebar-item.inquiry .webfeedback input::placeholder,.sidebar-item.inquiry .webfeedback textarea::placeholder {

    color: #666

}

.sidebar-item.inquiry .webfeedback textarea {

    font-family: inherit;

    padding: 10px;

    min-height: 100px

}

.sidebar-item.inquiry .webfeedback .select-menu {

    width: 100%;

    margin-right: 0;

    margin-bottom: 15px

}

.sidebar-item.inquiry .webfeedback .send-btn {

    width: 100%;

    height: 50px;

    background: var(--color);

    border-radius: 3px;

    color: #FFF;

    text-transform: uppercase;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .1s linear

}

.sidebar-item.inquiry .webfeedback .send-btn:hover {

    opacity: .9

}

.webfeedback input,.webfeedback textarea {

    font-size: 16px

}

.inquiry-pc .webfeedback .inquiry-form {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between

}

.inquiry-pc .webfeedback input::placeholder,.inquiry-pc .webfeedback textarea::placeholder {

    color: #666

}

.inquiry-pc .webfeedback input {

    width: 49%;

    height: 50px;

    background: #f1f5fe;

    border-radius: 3px;

    outline: 0;

    border: 1px solid #f1f5fe;

    padding: 0px 10px;

    margin-bottom: 20px;

    transition: all .1s linear

}

.inquiry-pc .webfeedback input:focus {

    border-color: var(--color)

}

.inquiry-pc .webfeedback input.input-error {

    border-color: red

}

.inquiry-pc .webfeedback input:nth-child(3n) {

    margin-right: 0

}

.inquiry-pc .webfeedback textarea {

    font-family: inherit;

    width: 100%;

    background: #f1f5fe;

    border-radius: 3px;

    outline: 0;

    border: 1px solid #f1f5fe;

    padding: 10px;

    margin-bottom: 20px;

    resize: none

}

.inquiry-pc .webfeedback textarea:focus {

    border-color: var(--color)

}

.inquiry-pc .webfeedback textarea.input-error {

    border-color: red

}

.inquiry-pc .webfeedback .send-btn {

    background: var(--color);

    color: #FFF;

    text-transform: uppercase;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 200px;

    height: 50px;

    border-radius: 3px;

    cursor: pointer;

    transition: all .1s linear

}

.inquiry-pc .webfeedback .send-btn:hover {

    background: var(--fontcolor)

}

.contact-box .webfeedback input,.contact-box .webfeedback textarea {

    background: 0 0;

    border: 1px solid rgba(231,231,231,.56);

    color: #FFF

}

.contact-box .webfeedback input::placeholder,.contact-box .webfeedback textarea::placeholder {

    color: #FFF

}

.contact-box .webfeedback .send-btn {

    margin: 0px auto 20px

}

@media (max-width: 1024px) {

    .inquiry-pc .webfeedback input {

        width:100%;

        margin-right: 0

    }

    .inquiry-pc .webfeedback .send-btn {

        width: 180px;

        height: 48px;

        margin-top: 10px

    }

}

@media (max-width: 500px) {

    .inquiry-pc .webfeedback input {

        height:46px

    }

}

.webfeedback .select-menu {

    width: 49%;

    margin-bottom: 20px;

    position: relative

}

.webfeedback .select-menu input {

    margin: 0!important;

    width: 100%!important;

    cursor: pointer

}

.webfeedback .select-menu .select-menu-div em {

    margin-right: 5px;

    position: absolute;

    right: 32px;

    top: 50%;

    transform: translateY(-50%);

    transition: all .4s ease

}

.webfeedback .select-menu .select-menu-div em.select-menu-i {

    transform: rotateX(180deg)

}

.webfeedback .select-menu .select-menu-div em::after,.webfeedback .select-menu .select-menu-div em::before {

    content: "";

    width: 10px;

    height: 2px;

    background: #999;

    position: absolute;

    top: 50%;

    left: 0;

    transform: rotate(45deg)

}

.webfeedback .select-menu .select-menu-div em::after {

    transform: rotate(-45deg);

    left: 6px

}

.webfeedback .select-menu .select-menu-ul {

    box-shadow: 0 1px 15px 0 rgba(15,19,39,.1);

    list-style: none;

    display: none;

    width: 100%;

    text-align: left;

    border: 1px solid #ddd;

    background: #FFF;

    position: absolute;

    z-index: 9

}

.webfeedback .select-menu .select-menu-ul li {

    color: #000;

    padding: 0px 20px;

    line-height: 2.5;

    cursor: pointer;

    font-size: 13px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

    overflow: hidden

}

.webfeedback .select-menu .select-menu-ul li:hover {

    background: #f2faea

}

.webfeedback .select-menu .select-menu-ul li:nth-child(2n) {

    background: #f5f4f4

}

.webfeedback .select-menu .select-menu-ul li:nth-child(2n):hover {

    background: #f2faea

}

.webfeedback .select-menu .select-menu-ul li.select-this {

    background: #f2faea

}

.webfeedback .select-menu .select-menu-ul li.select-this:hover {

    background: #f2faea!important

}

.webfeedback .send-btn[disabled] {

    background: #EEE!important;

    color: #999!important

}

.webfeedback .send-btn[disabled]::before {

    content: none!important

}

.webfeedback .loading {

    position: relative;

    width: 18px;

    height: 18px;

    margin-left: 8px;

    border: 2px solid #000;

    border-top-color: rgba(0,0,0,.2);

    border-right-color: rgba(0,0,0,.2);

    border-bottom-color: rgba(0,0,0,.2);

    border-radius: 100%;

    animation: feedbacksenloading infinite .75s linear

}

@keyframes feedbacksenloading {

    0% {

        transform: rotate(0)

    }

    100% {

        transform: rotate(360deg)

    }

}

.webfeedback .feed-verification {

    position: relative;

    width: 100%;

    max-width: 320px;

    margin-bottom: 15px

}

.webfeedback .feed-verification input {

    width: 100%!important;

    margin: 0!important

}

.webfeedback .feed-verification img {

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%)

}

@media (max-width: 1024px) {

    .webfeedback input {

        width:100% !important;

        height: 44px

    }

    .webfeedback .send-btn {

        height: 45px

    }

    .webfeedback .feed-verification {

        max-width: 100%

    }

    .webfeedback .select-menu {

        width: 100%;

        margin-right: 0

    }

}

.page-section-contact .webfeedback .send-btn {

    border: none!important;

    width: 100%;

    background-color: var(--color);

    border-radius: 10px;

    margin: 20px 0px;

    transition: all .3s ease-in-out;

    height: 50px;

    display: flex;

    cursor: pointer;

    align-items: center;

    font-weight: 700;

    color: #FFF;

    text-align: center;

    justify-content: center

}

.page-section-contact .webfeedback .send-btn:hover {

    box-shadow: 1px 1px 5px 0 #818080;

    border: none;

    border-radius: 5px;

    overflow: hidden

}

.page-section-contact .webfeedback .select-menu {

    width: 49% !important

}

.page-section-contact .webfeedback .select-menu input {

    width: 100% !important

}

.page-section-contact-l .webfeedback textarea, .page-section-contact-right .send-inquiry .inquiry-form textarea {

    margin-bottom: 20px

}

@media(max-width: 1024px) {

    .page-section-contact .webfeedback .select-menu {

        width:100% !important

    }

}

.page-section-liaison-sl .webfeedback .select-menu {

    width: 100% !important

}

.page-section-liaison .page-section-liaison-sl .webfeedback input, .page-section-liaison .page-section-liaison-sl .webfeedback textarea {

    font-size: 16px;

    width: 100%!important;

    border: none;

    outline: 0;

    height: 45px;

    background: #FFF;

    border-radius: 3px;

    padding: 0px 10px;

    margin-bottom: 1em;

    font-size: 15px;

    color: #000

}

.page-section-liaison .page-section-liaison-sl .webfeedback textarea {

    font-family: inherit;

    padding: 10px;

    min-height: 80px

}

.page-section-liaison .page-section-liaison-sl .webfeedback .send-btn {

    width: 100%;

    height: 50px;

    background: var(--color);

    border-radius: 3px;

    color: #FFF;

    text-transform: uppercase;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .1s linear

}

.page-section-contact .page-section-contact-right .webfeedback input, .page-section-contact .page-section-contact-right .webfeedback textarea {

    font-size: 16px;

    width: 100%;

    min-height: 40px;

    margin-bottom: 1em;

    padding: 10px;

    outline: 0;

    border-radius: 5px;

    border: 1px solid #ccc

}

.banner-inner .banner-img::after {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,.7)

}

.banner-inner .banner-img img {

    width: 100%

}

.banner-inner .banner-content {

    background: #EEE;

    padding: 6px 0px;

    height: 54px;

}

.banner-inner .banner-content .banner-title-h1 img {

    width: 24px;

}

.banner-inner .banner-content .banner-title-h1 {

    font-size: 17px;

}

.banner-inner .banner-content .l-wrap {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 44px;

}

.banner-inner .banner-content .banner-title-h1 {

    text-transform: capitalize;

    font-weight: var(--fontblod5);

    width: 46%;

    float: left;

}







.banner-inner .banner-content .banner-breadcrumbs {

    font-size: 14px

}

.banner-inner .banner-content .banner-breadcrumbs em {

    color: var(--color);

    margin-right: 2px

}

.banner-inner .banner-content .banner-breadcrumbs a {

    transition: all 0.1s linear

}

.banner-inner .banner-content .banner-breadcrumbs a:hover {

    color: var(--color)

}

.table-wrap {

    overflow-x: auto;

    width: 100%

}

table {

    border-collapse: collapse

}

article {

    color: #333;

    font-size: 16px

}

article hr {

    height: 0px;

    border: none;

    border-top: 1px solid #DFDFDF;

    margin: 1em 0px

}

article a {

    color:#000000;

    text-decoration: none

}

article a:hover {

    text-decoration: underline

}

table {

    border-collapse: collapse;

    width: 100%

}

table td {

    padding: 6px 10px;

    border: 1px solid #CCC

}

table th {

    padding: 12px 10px;

    border: 1px solid #CCC;

    background: var(--summarycolor);

    color: #FFF

}



table tr {

    background: #FFF

}

table tr:nth-child(2n) {

    background: #EFEFEF

}

h4.cate-h4, h4.pro-h4 {

    clear: both;

    font-weight: var(--fontblod6)

}

ul.cate-ulli, ul.pro-ulli {

    clear: both;

    padding: 10px 0px 10px 20px

}

ul.cate-ulli li, ul.pro-ulli li {

    list-style-type: disc;

    line-height: 1.7

}

ol.cate-ulli, ol.pro-ulli {

    clear: both;

    padding: 10px 0px 10px 30px

}

ol.cate-ulli li, ol.pro-ulli li {

    list-style-type: decimal;

    line-height: 1.7

}

.prohome-content {

    clear: both;

    margin: 0px auto 30px;

    padding: 0px 70px;

    max-width: 1740px;

    line-height: 1.6;

    box-sizing: border-box

}

.prolist-bottom {

    clear: both;

    margin: 0px auto 30px;

    padding: 0px 70px;

    max-width: 1740px;

    line-height: 1.6;

    box-sizing: border-box

}

.prolist-bottom a {

    text-decoration: underline

}

.prolist-bottom a:hover {

    color: var(--color)

}

@media(max-width: 1024px) {

    .prohome-content {

        clear:both;

        margin: 0px auto 30px;

        padding: 0px 15px

    }

    .shang{width:100%}

.tu{width:100%}

.banner-inner .banner-content{height: 153px!important;}

    .prolist-bottom {

        clear: both;

        margin: 0px auto 20px;

        padding: 0px 15px

    }

}

.prolist-content {

    clear: both;

    margin: 0px auto 15px;

    line-height: 1.6

}

.ck-widget-toc {

    display: table;

    border: 1px solid #A2A9B1;

    background-color: #F8F9FA;

    padding: 10px 20px 10px 10px;

    font-size: 95%;

    margin: 15px 0px;

    min-width: 300px;

    max-width: 100%

}

.ck-widget-toc ol {

    padding: 0px 0px 0px 30px;

    counter-reset: item

}

.ck-widget-toc ol li {

    display: block;

    position: relative;

    list-style: none

}

.ck-widget-toc ol li:before {

    content: counters(item, ".");

    counter-increment: item;

    position: absolute;

    margin-right: 100%;

    right: 10px

}

.ck-widget-toc-title {

    text-align: left;

    font-weight: 700;

    margin: 0px 0px 5px 0px;

    padding: 0px 0px 0px 5px

}

.ck-widget-pt {

    padding-top: 100px;

    margin-top: -100px

}

.ck-widget-toc1 {

    display: table;

    border: 1px solid #A2A9B1;

    background-color: #F8F9FA;

    padding: 10px 20px 10px 10px;

    font-size: 95%;

    margin: 15px 0px;

    min-width: 300px;

    max-width: 100%

}

.ck-widget-toc1 ol {

    padding: 0px 0px 0px 30px;

    counter-reset: item

}

.ck-widget-toc1 ol li {

    display: block;

    position: relative;

    list-style: none

}

.ck-widget-toc1 ol li:before {

    content: counters(item, ".");

    counter-increment: item;

    position: absolute;

    margin-right: 100%;

    right: 10px

}

.common-main {

    padding: 50px 0px 80px

}

.aboutblue {

    font-size: 14px;

    font-weight: var(--fontblod5);

    color: var(--color);

    line-height: 58px

}

.abouttitle {

    font-size: 30px;

    font-weight: var(--fontblod5);

    line-height: 1.2;

    margin-bottom: 20px

}

.aboutfloat {

    float: right;

    margin-left: 30px

}

.certificates-list {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between

}

.certificates-list li {

    width: 31%

}

.certificates-list li .img {



    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1em 0px

}

.certificates-list li .info {

    margin-top: 5px

}

.certificates-list li .info .title {

    font-size: 20px;

    font-weight: var(--fontblod5);

    line-height: 28px;

    margin-bottom: 10px;

    color: var(--fontcolor)

}

.teamtitle {

    text-align: center;

    font-size: 36px;

    font-weight: var(--fontblod5);

    line-height: 28px

}

.teamdes {

    color: var(--summarycolor);

    line-height: 28px;

    max-width: 1000px;

    margin: 30px auto;

    text-align: center

}

.team-list {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between

}

.team-list li {

    width: 23%;

    background: #FFF;

    box-shadow: 0 3px 35px 0 rgba(211,211,211,.56);

    position: relative

}

.team-list li:hover::after {

    width: 80%

}

.team-list li::after {

    content: "";

    position: absolute;

    bottom: 0px;

    left: 50%;

    transform: translateX(-50%);

    width: 0px;

    transition: all .1s linear;

    height: 6px;

    background: #ff0000

}

.team-list li .img img {

    width: 100%

}

.team-list li .info {

    text-align: center;

    position: relative;

    padding: 50px 20px 20px

}

.team-list li .info .box {

    width: 86%;

    background: var(--color);

    color: #FFF;

    z-index: 9;

    position: absolute;

    top: -50px;

    left: 50%;

    transform: translateX(-50%);

    padding: 16px 10px

}

.team-list li .info .box .title {

    font-size: 18px;

    font-weight: var(--fontblod5);

    line-height: 28px

}

.team-list li .info .share {

    display: flex;

    justify-content: center;

    margin-top: 20px

}

.team-list li .info .share a {

    width: 56px;

    height: 56px;

    background: rgba(0,146,255,0);

    border: 2px solid #d6d6d6;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none

}

.team-list li .info .share a:hover em {

    color: var(--color)

}

.team-list li .info .share a:nth-child(n+2) {

    border-left: none

}

.team-list li .info .share a em {

    color: var(--fontcolor)

}

.historytitle {

    font-size: 34px;

    font-weight: var(--fontblod5)

}

.history-wrap {

    display: flex;

    margin-top: 30px

}

.history-wrap .history-img {

    width: 40%

}

.history-wrap .history-info {

    width: 60%;

    padding-left: 5%

}

#history {

    height: 100%

}

#history .history-button {

    position: absolute;

    bottom: 0px;

    right: 0px;

    display: flex;

    align-items: center;

    z-index: 999

}

#history .history-button .history-button-next,#history .history-button .history-button-prev {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid #ababab;

    border-radius: 50%;

    color: #ababab;

    cursor: pointer;

    margin-left: 10px;

    transition: all .1s linear

}

#history .history-button .history-button-next.swiper-button-disabled,#history .history-button .history-button-next:hover,#history .history-button .history-button-prev.swiper-button-disabled,#history .history-button .history-button-prev:hover {

    background: #f2f2f2

}

#history .history-button .history-button-next em,#history .history-button .history-button-prev em {

    font-weight: var(--fontblod5)

}

.history-item {

    display: flex;

    flex-direction: column;

    justify-content: space-between

}

.history-item .title {

    font-size: 32px;

    font-weight: var(--fontblod5);

    margin-bottom: 15px

}

.history-item .year {

    font-size: 36px;

    color: var(--color)

}

.product-catelist {

    display: flex;

    flex-wrap: wrap;

    width: 100%

}

.product-catelist .product-cateitem {

    width: 32%;

    margin-bottom: 2em;

    position: relative;

    margin-right: 2%;

    border: 1px solid #EEE

}

.product-catelist .product-cateitem:nth-child(3n) {

    margin-right: 0px

}

.product-catelist .product-cateitem .cate-img {

    overflow: hidden;

    min-height: 300px

}

.product-catelist .product-cateitem .cate-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all .1s linear

}

.product-catelist .product-cateitem .cate-info {

    position: absolute;

    left: 0px;

    bottom: 10%;

    background: #FFFFFF9c;

    width: 65%;

    border-radius: 0 50px 50px 0px;

    padding: 20px 20px 10px 20px;

    transition: all .1s linear

}

.product-catelist .product-cateitem .cate-info::after {

    content: "";

    position: absolute;

    left: 20px;

    bottom: 0px;

    width: 72px;

    height: 4px;

    background: var(--color)

}

.product-catelist .product-cateitem .cate-info .cate-title {

    font-size: 18px;

    font-weight: var(--fontblod5);

    margin-bottom: 10px

}

.product-catelist .product-cateitem .cate-info .cate-text {

    height: 0px;

    opacity: 0;

    transition: height .1s linear

}

.product-catelist .product-cateitem .cate-info .cate-more {

    position: absolute;

    right: 0px;

    top: 50%;

    transform: translateY(-50%);

    transition: all .1s linear;

    width: 50px;

    height: 50px;

    background: #FFF;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color);

    opacity: 0

}

.product-catelist .product-cateitem .cate-info .cate-more em {

    font-weight: var(--fontblod5)

}

.product-catelist .product-cateitem:hover .cate-img img {

    transform: scale(1.02)

}

.product-catelist .product-cateitem:hover .cate-info {

    background: var(--color);

    color: #FFF;

    padding-bottom: 30px

}

.product-catelist .product-cateitem:hover .cate-info .cate-text {

    height: auto;

    opacity: 1

}

.product-catelist .product-cateitem:hover .cate-info .cate-more {

    animation: catemore .3s forwards;

    animation-delay: .2s

}

@keyframes catemore {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1;

        right: -25px

    }

}

.page-container {

    display: flex

}

.sidebar {

    width: 340px

}

.sidebar-item {

    width: 100%;

    margin-bottom: 30px;

    border-radius: 3px;

    background: #FFF;

    border: 1px solid #E7E7E7

}

.sidebar-item.search {

    border: none

}

.sidebar-item .sidebar-search {

    width: 100%;

    display: flex;

    height: 50px

}

.sidebar-item .sidebar-search input {

    flex: 1;

    background: #E7E7E7;

    border: none;

    outline: 0;

    border: 1px solid #E7E7E7;

    border-top-left-radius: 3px;

    border-bottom-left-radius: 3px;

    padding: 0px 20px

}

.sidebar-item .sidebar-search input:focus {

    border-color: var(--color)

}

.sidebar-item .sidebar-search .search-btn {

    width: 50px;

    height: 100%;

    background: var(--color);

    color: #FFF;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    outline: 0;

    border-top-right-radius: 3px;

    border-bottom-right-radius: 3px

}

.sidebar-item .sidebar-search .search-btn em {

    font-weight: var(--fontblod5);

    font-size: 20px;

    cursor: pointer

}

.sidebar-item .sidebar-cate {

    padding: 10px 20px

}

.sidebar-item .sidebar-cate>li {

    border-bottom: 1px solid rgba(219,217,215,.5);

    position: relative

}

.sidebar-item .sidebar-cate>li:last-child {

    border-bottom: none

}

.sidebar-item .sidebar-cate>li.active>a {

    color: var(--color)

}

.sidebar-item .sidebar-cate>li.active>em {

    color: var(--color);

    transform: rotateX(180deg)

}

.sidebar-item .sidebar-cate>li>a {

    padding-right: 30px;

    height: 50px;

    line-height: 50px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

    overflow: hidden;

    color: var(--fontcolor);

    font-weight: var(--fontblod5);

    transition: all 0.1s linear

}

.sidebar-item .sidebar-cate>li>a:hover {

    color: var(--color)

}

.sidebar-item .sidebar-cate>li>em {

    position: absolute;

    right: 0px;

    top: 0px;

    font-weight: var(--fontblod5);

    width: 30px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    cursor: pointer;

    color: #acacac;

    transition: all .2s linear;

    font-size: 12px

}

.sidebar-item .sidebar-cate>li ul {

    display: none;

    padding-bottom: 10px;

    padding-left: 10px

}

.sidebar-item .sidebar-cate>li ul li.active>a {

    color: var(--color)

}

.sidebar-item .sidebar-cate>li ul a {

    display: block;

    padding: 4px 0px

}

.sidebar-item .sidebar-cate>li ul a:hover {

    color: var(--color)

}

.sidebar-item.inquiry {

    background: url(../images/feedback.webp) no-repeat center;

    background-size: cover;

    padding: 10px 0px 50px

}

.sidebar-item.inquiry .sidebar-title {

    background: 0 0;

    color: #FFF

}

.sidebar-item.related .related-list {

    padding: 20px;

    display: flex;

    flex-wrap: wrap

}

.sidebar-item.related .related-list .related-item {

    display: flex;

    align-items: center;

    margin-bottom: 1em;

    width: 33.33333%

}

.sidebar-item.related .related-list .related-item:hover .related-img img {

    transform: scale(1.1)

}

.sidebar-item.related .related-list .related-item:hover .related-info .related-title {

    color: var(--color)

}

.sidebar-item.related .related-list .related-item:last-child {

    margin-bottom: 0px

}

.sidebar-item.related .related-list .related-item .related-img {

    width: 120px;

    height: 120px;

    background: #FFF;

    border: 1px solid #ececec

}

.sidebar-item.related .related-list .related-item .related-img img {

    transition: all .1s linear

}

.sidebar-item.related .related-list .related-item .related-info {

    flex: 1;

    padding-left: 20px

}

.sidebar-item.related .related-list .related-item .related-info .related-title {

    font-weight: var(--fontblod5)

}

.sidebar .sidebar-item.related .related-list .related-item {

    width: 100%

}

.sidebar-title {

    width: 100%;

    height: 50px;

    background: #F3F3F3;

    display: flex;

    align-items: center;

    font-size: 20px;

    font-weight: var(--fontblod5);

    padding: 0px 20px;

    text-transform: capitalize;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis

}

.page-main {

    flex: 1;

    width: calc(100% - 340px);

    padding-left: 50px

}

.pro-cate-title {

    font-size: 26px;

    font-weight: var(--fontblod5);

    margin: 0px;

    margin-bottom: 20px;

    padding: 0px

}

.pro-list {

    display: flex;

    flex-wrap: wrap

}

.pro-list li {

    position: relative;

    margin-bottom: 30px

}

.pro-list li .pro-img {position: relative;background: #ffffff;}

.pro-list li .pro-img a {

    height: 100%;

    width: 100%;

    border-radius: 5px;

    position: relative;

    border-top-width: 0px;

    border-right-width: 0px;

    border-bottom-width: 0px;

    border-left-width: 0px;

    border-top-style: solid;

    border-right-style: solid;

    border-bottom-style: solid;

    border-left-style: solid;



}

.pro-list li .pro-img img {

    width: 100%;

    height: auto;

    object-fit: cover;

    transition: all .1s linear

}

.pro-list li .pro-info {

    position: relative

}

.pro-list li .pro-info .data-price {

    display: none

}

.pro-list li .pro-info .title {

    font-size: 18px;

    font-weight: var(--fontblod5)

}

.pro-list li .pro-info .text {

    margin-top: 5px;

    font-size: 15px;

    color: var(--summarycolor)

}

.pro-list li .pro-info .btn {

    margin-top: 20px;

    height: 40px;

    border-radius: 3px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: all .1s linear;

    color: var(--summarycolor)

}

.pro-list li:hover .pro-info .btn {

    background: var(--color);

    color: #FFF;

    padding: 0px 20px

}

.pro-list li .pro-info .btn em {

    margin-left: 6px

}

.pro-list li .icon {

    position: absolute;

    bottom: 0px;

    right: 10px;

    width: 40px;

    height: 40px;

    border: 1px solid rgba(93,106,128,.3);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all .1s linear;

    opacity: 0;

    visibility: hidden

}

.pro-list li:hover .icon {

    bottom: 10px;

    opacity: 1;

    visibility: inherit

}

.pro-list li .icon.pro-checked {

    opacity: 1;

    visibility: inherit;

    bottom: 10px

}

.pro-list li .icon.pro-checked em {

    color: var(--color)

}

.pro-list li .icon em {

    font-size: 18px;

    color: #999

}

.pro-list li .icon-hottitle {

    position: absolute;

    top: 15px;

    left: -14px;

    color: #FFF;

    width: 50px;

    height: 25px;

    background: var(--color);

    font-size: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-transform: uppercase

}

.pro-list li .icon-hottitle::before {

    content: "";

    position: absolute;

    bottom: -9px;

    left: 4px;

    border: 10px solid transparent;

    border-bottom: 10px solid var(--color);

    opacity: 0.8;

    transform: rotate(45deg)

}

.pro-list li:hover .pro-img img {

    transform: scale(1.02)

}

.pro-list li:hover .pro-info .title {

    color: var(--color)

}

.pro-list.list1 li {width: 31%;margin-right: 3%;background-color: rgb(250, 250, 250);padding: 10px;}

.pro-list.list1 li:nth-child(3n) {

    margin-right: 0px

}

.pro-list li:hover {

       background-color: rgb(219 217 217);   
    padding: 10px;
}
.preview-container .preview-box img:hover{   background-color: rgb(219 217 217);   
    padding: 10px;}
.pro-list.list1 li .pro-img {

    width: 100%;

    height: auto

}

.pro-list.list1 li .pro-info {

    margin-top: 15px

}

.pro-list.list0 li {

    width: 100%;

    display: flex;

    align-items: center

}

.pro-list.list0 li .pro-img {

    width: 300px

}

.pro-list.list0 li .pro-info {

    flex: 1;

    padding-left: 30px

}

.common-page {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    margin: 50px 0px

}

.common-page.newslist-common-page {

    margin-top: 20px

}

.common-page>* {

    margin: 5px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 51px;

    height: 51px;

    transition: all .1s linear;

    background: #FAFAFA

}

.common-page>.ctxt {

    background: var(--color);

    color: #FFF

}

.common-page a:hover {

    background: var(--color);

    color: #FFF

}

.pro-bottom {

    background: #FFF;

    padding: 10px;

    box-shadow: 0 3px 10px 0 rgba(196,196,196,.35)

}

.prodetails-top {

    display: flex;

    flex-wrap: wrap

}

.preview-container {

    width: 450px;

    position: relative;

    margin-right: 3%

}

.singglepic {

    width: 450px;

    height: 450px;

    margin-right: 3%

}

.singglepic img {

    width: 100%;

    height: 100%;

    object-fit: cover

}

.preview-container #media {

    position: absolute;

    width: 100%;

    height: 450px;

    z-index: 2

}

.preview-container .preview-box {

    position: relative

}

.preview-container .preview-box .list {

    border: 1px solid #DFDFDF;

    position: relative;

    height: 450px

}

.preview-container .preview-box img {

    width: 100%;

    height: 100%;

    object-fit: contain

}

.preview-container .preview-box .imgalt {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    z-index: 99;

    bottom: 10px;

    background: rgba(0,0,0,.2);

    color: #FFF;

    width: 95%;

    padding: 0px 6px;

    line-height: 34px;

    text-align: center;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

    overflow: hidden;

    border-radius: 30px;

    font-size: 14px;

    display: none;

    text-transform: capitalize

}

@media(max-width: 500px) {

    .preview-container .preview-box .imgalt {

        padding-right:46px;

        display: -webkit-box

    }

}

.preview-container .preview-box .vClose,.preview-container .preview-box .vPlay {

    position: absolute;

    top: 0px;

    right: 0px;

    z-index: 99;

    width: 40px;

    height: 40px;

    background: rgba(0,0,0,.2);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #FFF;

    font-size: 22px;

    cursor: pointer

}

.preview-container .preview-box .vClose,.preview-container .preview-box .vPlay {

    display: none

}

.preview-container .preview-box .prodetails-button-next,.preview-container .preview-box .prodetails-button-prev {

    position: absolute;

    top: 42%;

    transform: translateY(-50%);

    left: 20px;

    width: 42px;

    height: 42px;

    background: rgba(0,0,0,.3);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 98;

    cursor: pointer;

    transition: all .1s linear

}

.preview-container .preview-box .prodetails-button-next:hover,.preview-container .preview-box .prodetails-button-prev:hover {

    box-shadow: 1px 2px 10px rgba(0,0,0,.4)

}

.preview-container .preview-box .prodetails-button-next em,.preview-container .preview-box .prodetails-button-prev em {

    color: #FFF

}

.preview-container .preview-box .prodetails-button-next {

    left: auto;

    right: 20px

}

.preview-container .preview-box .prodetails-pagination {

    position: relative;

    bottom: 0px;

    margin-top: 20px;

    text-align: center

}

.preview-container .preview-box .prodetails-pagination .swiper-pagination-bullet {

    width: 8px;

    height: 8px;

    background: #aaadaf;

    margin: 0px 10px;

    opacity: 1;

    position: relative

}

.preview-container .preview-box .prodetails-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {

    background: var(--color)

}

.preview-container .preview-box .prodetails-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    width: 15px;

    height: 15px;

    border: 1px solid var(--color);

    border-radius: 50%

}

.preview-container .banner-page {

    display: none

}

.prodetails-info {

    flex: 1

}

.prodetails-info .prodetails-name {

    font-weight: var(--fontblod5);

    font-size: 24px;

    line-height: 1.4;

    margin-bottom: 20px

}

.prodetails-info .prodetails-price {

    color: var(--summarycolor);

    margin-bottom: 10px

}

.prodetails-text {color: var(--summarycolor);line-height: 41px;}

.prodetails-info .share-btn-list {margin-top: 25px;/* border-bottom: 1px solid #d7d7d7; */padding-bottom: 25px}

.prodetails-info .prodetails-btnlist {

    display: flex;

    flex-wrap: wrap;

    margin-top: 30px

}

.prodetails-info .prodetails-btnlist>* {

    width: 25%;

    height: 45px;

    background: rgba(51,51,51,0);

    border: 1px solid #CCC;

    border-radius: 3px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1em;

    margin-right: 20px;

    cursor: pointer;

    text-transform: uppercase;

    transition: all .1s linear;

    font-size: 14px;

    font-weight: var(--fontblod5)

}

.prodetails-info .prodetails-btnlist>*:hover {

    opacity: .9;

    border-color: var(--color);

    color: var(--color)

}

.prodetails-info .prodetails-btnlist #A_DownLoadProduct {

    width: 100%;

    text-align: center

}

.prodetails-info .prodetails-btnlist .send {

    border-color: var(--color);

    color: var(--color)

}

.prodetails-info .prodetails-btnlist .send em {

    margin-right: 5px

}

.prodetails-info .prodetails-btnlist .addToCart.added {

    background: var(--color);

    color: #FFF

}

.prodetails-info .prodetails-btnlist .addToCart i {

    margin-left: 5px

}

.prodetails-info .pagelink {

    margin-top: 25px

}

.prodetails-info .pagelink .pagelink-item {

    display: flex;

    align-items: center;

    margin-bottom: 15px

}

.prodetails-info .pagelink .pagelink-item:hover .link-intro {

    background: var(--color);

    color: #FFF

}

.prodetails-info .pagelink .pagelink-item:hover p {

    color: var(--color)

}

.prodetails-info .pagelink .pagelink-item .link-intro {

    width: 38px;

    height: 38px;

    background: #FFF;

    border: 1px solid #ababab;

    display: flex;

    align-items: center;

    margin-right: 20px;

    color: var(--summarycolor);

    padding: 0px 10px;

    transition: all 0.1s linear

}

.prodetails-info .pagelink .pagelink-item .link-intro em {

    font-size: 14px

}

.prodetails-info .pagelink .pagelink-item p {

    flex: 1;

    height: 38px;

    line-height: 38px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

    overflow: hidden

}

.prodetails-info .pagelink .pagelink-item p a {

    display: block;

    width: 100%;

    height: 100%

}

.prodetails-content {

    margin-top: 50px

}

.prodetails-content .prodetails-des {

    position: relative;

    margin-bottom: 20px

}

.prodetails-content .prodetails-des::after {

    content: "";

    position: absolute;

    left: 0px;

    bottom: 0px;

    width: 100%;

    height: 2px;

    background: #EAEAEA;

    z-index: -1

}

.prodetails-content .prodetails-des span {

    width: 184px;

    height: 50px;

    background: var(--color);

    font-weight: var(--fontblod5);

    text-transform: uppercase;

    font-size: 18px;

    color: #FFF;

    display: flex;

    align-items: center;

    justify-content: center

}

.prodetails-wrap {

    margin-top: 40px

}

.prodetails-img {

    position: relative

}

.prodetails-img img {

    width: 100%

}

.prodetails-img .content {

    position: absolute;

    left: 50%;

    top: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transform: translate(-50%,-50%);

    width: 100%;

    color: #FFF;

    text-align: center;

    font-size: 18px

}

.prodetails-img .content .span1 {

    font-weight: var(--fontblod5);

    margin-bottom: 15px;

    font-size: 42px

}

.prodetails-template-title {

    width: 100%;

    height: 43px;

    margin-bottom: 30px;

    display: flex;

    background-color: #EAEAEA;

    color: #FFF;

    position: relative

}

.prodetails-template-title h5 {

    display: inline-block;

    background: var(--color);

    color: #FFF;

    margin: 0px;

    padding: 0px 30px 0px 20px;

    font-size: 18px;

    position: relative;

    text-transform: uppercase;

    position: absolute;

    left: 0px;

    top: 50%;

    transform: translateY(-50%);

    height: 54px;

    line-height: 54px

}

.prodetails-template-title h5::after {

    content: "";

    display: block;

    width: 26px;

    height: 104%;

    background-color: #FFF;

    position: absolute;

    right: -15px;

    top: -1px;

    transform: skewX(18deg)

}

.prodetails-list li {

    margin-bottom: 20px

}

.prodetails-list li .li1 {

    color: #0162c9;

    font-weight: var(--fontblod5)

}

.prodetails4 {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between

}

.prodetails4 .item {

    width: 48%;

    border-radius: 6px;

    overflow: hidden;

    margin-bottom: 20px

}

.prodetails4 .item img {

    width: 100%

}

.prodetails-flex {

    display: flex;

    align-items: center

}

.prodetails-flex .left {

    width: 45%

}

.prodetails-flex .right {

    flex: 1;

    padding-left: 30px

}

.prodetails-flex .right .title {

    display: flex;

    align-items: center;

    justify-content: space-between

}

.prodetails-flex .right .title .lable {

    font-size: 26px;

    font-weight: var(--fontblod5);

    position: relative;

    padding-bottom: 10px

}

.prodetails-flex .right .title .lable::after {

    content: "";

    position: absolute;

    left: 0px;

    bottom: 0px;

    background: var(--color);

    width: 70px;

    height: 3px

}

.prodetails-flex .right .title .more {

    text-transform: uppercase;

    color: var(--color);

    font-weight: var(--fontblod5)

}

.prodetails-flex .right .text {

    margin-top: 20px

}

.prodetails-list3 {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    margin-top: 30px

}

.prodetails-list3 li {

    width: 32%;

    border-radius: 10px;

    overflow: hidden;

    margin-bottom: 20px

}

.prodetails-list3 li img {

    width: 100%

}

.prodetails6 {

    margin-top: 50px;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    padding-left: 10px

}

.prodetails6 .item {

    width: 30%;

    background: #153a6e;

    color: #FFF;

    text-align: center;

    margin-bottom: 50px;

    padding: 20px 20px;

    position: relative

}

.prodetails6 .item:nth-child(2n) {

    background: #f6ab00

}

.prodetails6 .item:nth-child(2n) .num {

    border-color: #f6ab00;

    color: #f6ab00

}

.prodetails6 .item .num {

    position: absolute;

    left: -20px;

    top: -20px;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid #153a6e;

    color: #153a6e;

    background: #FFF

}

.prodetails6 .item .title {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    margin-bottom: 15px;

    font-weight: var(--fontblod5)

}

.prodetails6 .item .title img {

    margin-right: 10px;

    width: 25px

}

.prodetails6 .item .text {

    font-size: 14px;

    line-height: 1.4

}

.packaging-log .title {

    text-align: center;

    font-size: 30px;

    font-weight: var(--fontblod5);

    margin-bottom: 10px

}

.packaging-log .text {

    text-align: center;

    margin-bottom: 30px

}

.packagingul {

    margin-top: 50px;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between

}

.packagingul li {

    width: 31%;

    position: relative;

    overflow: hidden

}

.packagingul li:hover img {

    transform: scale(1.02)

}

.packagingul li img {

    width: 100%;

    transition: all .1s linear

}

.packagingul li .info {

    position: absolute;

    bottom: 0px;

    left: 0px;

    width: 100%;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0,0,0,.4);

    color: #FFF

}

.recentnews-list {

    padding: 20px

}

.recentnews-list li {

    display: flex;

    align-items: center;

    margin-bottom: 20px

}

.recentnews-list li:last-child {

    margin-bottom: 0px

}

.recentnews-list li:hover .img img {

    transform: scale(1.05)

}

.recentnews-list li:hover .info .title {

    color: var(--color)

}

.recentnews-list li .img {

    width: 110px;

    height: 80px;

    background: #F3F3F3;

    border-radius: 3px

}

.recentnews-list li .img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all .1s linear

}

.recentnews-list li .info {

    flex: 1;

    padding-left: 15px

}

.recentnews-list li .info .title {

    color: var(--fontcolor);

    font-weight: 500;

    line-height: 1.4

}

.recentnews-list li .info .date {

    color: var(--summarycolor);

    margin-top: 5px;

    font-size: 14px

}

.recentnews-list li .info .date em {

    color: var(--color);

    margin-right: 5px

}

.tagslist {

    display: flex;

    flex-wrap: wrap;

    padding: 30px 20px

}

.tagslist a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 4px 10px;

    margin-right: 10px;

    margin-bottom: 10px;

    background: #FFF;

    border: 1px solid #E3E3E3;

    border-radius: 3px;

    transition: all .1s linear

}

.tagslist a:hover {

    background: var(--color);

    color: #FFF

}

.newslist {

    display: flex;

    flex-wrap: wrap;

    margin-top: 20px

}

.newslist li {

    margin-bottom: 4em

}

.newslist li:last-child {

    margin-bottom: 0px

}

.newslist li:hover .news-img a::after {

    opacity: 1

}

.newslist li:hover .news-info .title {

    color: var(--color)

}

.newslist li .news-img {

    position: relative

}

.newslist li .news-img a {

    border-radius: 5px;

    overflow: hidden

}

.newslist li .news-img a::after {

    content: "";

    position: absolute;

    left: 0px;

    top: 0px;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,.2);

    z-index: 1;

    opacity: 0;

    transition: all .1s linear

}

.newslist li .news-img img {

    width: 100%;

    height: 100%;

    transition: all .1s linear;

    object-fit: cover

}

.newslist li .news-img .date {

    position: absolute;

    left: 20px;

    top: -20px;

    z-index: 1;

    width: 60px;

    height: 90px;

    background: #FFF;

    border-radius: 0 0 3px 3px;

    border-top: 2px solid var(--color);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    z-index: 2

}

.newslist li .news-img .date span {

    font-size: 14px

}

.newslist li .news-img .date span:nth-child(1) {

    line-height: 1;

    font-size: 26px;

    font-weight: var(--fontblod5)

}

.newslist li .news-info .title {

    color: #091d3f;

    font-size: 18px;

    font-weight: var(--fontblod5);

    line-height: 1.2;

    margin-bottom: 10px

}

.newslist li .news-info .text {

    color: var(--summarycolor)

}

.newslist li .news-info .btn {

    display: inline-flex;

    align-items: center;

    margin-top: 30px;

    color: #091d3f;

    padding: 6px 0px;

    border-radius: 3px;

    transition: all .1s linear

}

.newslist li .news-info .btn em {

    margin-right: 10px;

    background: var(--color);

    color: #FFF;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    font-size: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center

}

.newslist li:hover .news-info .btn {

    background: var(--color);

    color: #FFF;

    padding: 6px 14px

}

.newslist li:hover .news-info .btn em {

    background: #FFF;

    color: var(--color)

}

.newslist.list1 li {

    width: 23%;

    margin-right: 2%

}

.newslist.list1 li:nth-child(4n) {

    margin-right: 0px

}

.newslist.list1 li .news-info {

    padding: 20px 0px

}

.newslist.list1 li .news-img {

    width: 100%;

    overflow: hidden;

    background: #F3F3F3;

    max-height: 611px;

}

.newslist.list0 li {

    width: 100%;

    display: flex;

    align-items: center

}

.newslist.list0 li .news-img {

    width: 300px

}

.newslist.list0 li .news-info {

    flex: 1;

    padding: 0px 20px

}

.newscontent-title {

    font-size: 28px;

    font-weight: var(--fontblod5);

    line-height: 1.2

}

.newscontent-date {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    padding: 15px 0px;

    font-size: 15px;

    color: var(--color)

}

.newscontent-date span {

    margin-right: 20px

}

.newscontent-date span em {

    margin-right: 5px

}

.newscontent-details article {

    padding-bottom: 30px;

    margin-bottom: 30px;

    border-bottom: 1px solid #d6d6d6

}

.newscontent-details .share-btn-list {

    justify-content: flex-end

}

.news-pagelink {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    margin-top: 50px

}

.news-pagelink .pagelink-item {

    width: 50%;

    display: flex

}

.news-pagelink .pagelink-item:hover .link-intro {

    background: var(--color);

    border-color: var(--color)

}

.news-pagelink .pagelink-item:hover .link-intro em {

    color: #FFF

}

.news-pagelink .pagelink-item:hover .link-text {

    color: var(--color)

}

.news-pagelink .pagelink-item .link-intro {

    min-width: 50px;

    height: 50px;

    background: #FFF;

    border: 2px solid #e6e6e6;

    border-radius: 3px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .1s linear

}

.news-pagelink .pagelink-item .link-intro em {

    color: var(--fontcolor);

    font-size: 18px

}

.news-pagelink .pagelink-item .link-text {

    flex: 1;

    display: flex;

    align-items: center;

    padding: 0px 20px

}

.news-pagelink .pagelink-item .link-text a {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

    overflow: hidden

}

.news-pagelink .pagelink-item.prev .link-text {

    justify-content: flex-start

}

.news-pagelink .pagelink-item.next .link-text {

    justify-content: flex-end

}

.inquiry-pc {

    margin-top: 50px

}

.inquiry-pc .inquiry-title {

    font-size: 30px;

    font-weight: var(--fontblod5);

    margin-bottom: 20px

}

.inquiry-pc .sidebar-title {

    background: none;

    font-size: 20px

}

.pagecase-list {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between

}

.pagecase-list .item {

    width: 48%;

    margin-bottom: 40px;

    display: flex;

    align-items: center;

    position: relative;

    padding: 30px 0px

}

.pagecase-list .item:hover::before {

    background: var(--color)

}

.pagecase-list .item:hover .content {

    color: #FFF

}

.pagecase-list .item:hover .content .more {

    color: #FFF

}

.pagecase-list .item::before {

    content: "";

    position: absolute;

    left: 0px;

    top: 0px;

    width: 70%;

    height: 100%;

    background: #F4F4F4;

    z-index: -1;

    transition: all .1s linear

}

.pagecase-list .item .content {

    height: 100%;

    width: 48%;

    padding: 20px 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    text-align: right

}

.pagecase-list .item .content .title {

    font-size: 20px;

    font-weight: var(--fontblod5);

    text-align: left

}

.pagecase-list .item .content .more {

    display: inline;

    color: var(--color);

    text-decoration: none

}

.pagecase-list .item .img {

    flex: 1

}

.pagecase-list .item .img img {

    width: 100%

}

.contact-list {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between

}

.contact-list .contact-item {

    width: 29%;

    background: #FFF;

    box-shadow: 0 1px 22px 7px rgba(198,198,198,.3);

    border-radius: 5px;

    padding: 30px;

    text-align: center;

    transition: all .1s linear

}

.contact-list .contact-item:hover {

    box-shadow: 0 1px 22px 7px rgba(198,198,198,.5)

}

.contact-list .contact-item:hover img {

    transform: rotateY(180deg)

}

.contact-list .contact-item img {

    height: 80px;

    transition: all .2s linear

}

.contact-list .contact-item .title {

    font-size: 24px;

    font-weight: var(--fontblod5);

    color: #091c3d;

    padding: 20px 0px 10px

}

.contact-list .contact-item .text,.contact-list .contact-item a {

    color: var(--summarycolor)

}

.contact-box {

    padding: 70px 20px;

    position: relative;

    margin: 79px 0px -79px;

}

.contact-box::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 0px;

    transform: translateX(-50%);

    width: 1920px;

    max-width: 1920px;

    height: 100%;

    background: url(../images/contact-bg.webp) no-repeat center;

    background-size: cover;

    z-index: -1

}

.contact-box .inquiry-pc {

    margin: 0px

}

.contact-box .inquiry-pc .title {

    text-align: center;

    color: #000;

    font-size: 36px;

    font-weight: var(--fontblod5)

}

.contact-box .inquiry-pc .des {

    text-align: center;

    color: #FFF;

    margin-bottom: 40px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center

}

.contact-box .inquiry-pc .des::after,.contact-box .inquiry-pc .des::before {

    content: "";

    display: inline-block;

    width: 40px;

    height: 1px;

    background: rgba(255,255,255,.5);

    margin: 0px 10px

}

.contact-box .inquiry-pc .des::after {

    left: auto;

    right: 110%

}

.download-list {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between

}

.download-list li {

    width: 49%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    box-shadow: 1px 2px 10px rgba(0,0,0,.1);

    transition: all .1s linear;

    padding: 15px;

    margin-bottom: 20px

}

.download-list li:hover {

    box-shadow: 1px 2px 10px rgba(0,0,0,.2)

}

.download-list li .download-img {

    width: 80px

}

.download-list li .download-img img {

    width: 100%

}

.download-list li .download-info {

    flex: 1;

    padding: 0px 20px

}

.download-list li .download-btn {

    background: var(--color);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #FFF;

    border-radius: 4px;

    width: 140px;

    height: 36px;

    transition: all .2s linear;

    white-space: nowrap;

    overflow: hidden;

    padding: 0px 10px

}

.download-list li .download-btn:hover {

    box-shadow: 1px 2px 10px var(--color)

}

.project-list {

    display: flex;

    flex-wrap: wrap

}

.project-list li {

    width: 23%;

    margin-right: 2%;

    box-shadow: 1px 2px 10px rgba(0,0,0,.05);

    transition: all .1s linear;

    margin-bottom: 20px

}

.project-list li:hover {

    box-shadow: 1px 2px 10px rgba(0,0,0,.15)

}

.project-list li:hover .project-info .project-name {

    color: var(--color)

}

.project-list li:nth-child(4n) {

    margin-right: 0px

}

.project-list li .project-img {

    overflow: hidden

}

.project-list li .project-img img {

    width: 100%;

    transition: all .1s linear

}

.project-list li .project-info {

    padding: 15px

}

.project-list li .project-info a {

    color: var(--fontcolortitle)

}

.project-list li .project-info a .project-name {

    font-size: 18px;

    height: 50px;

    font-weight: var(--fontblod5);

    margin-bottom: 10px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden

}

.project-list li .project-info a .project-content {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    overflow: hidden

}

.faqs-list li {

    width: 100%;

    box-shadow: none;

    margin: 0px

}

.faqs-list li:hover {

    box-shadow: none

}

.faqs-list li .project-info {

    border-top: 1px solid #edf2f7;

    padding: 15px 0px

}

.faqs-list li .project-info.open .project-name {

    color: var(--color)

}

.faqs-list li:hover .project-info .project-name {

    color: var(--fontcolor)

}

.faqs-list li:hover .project-info.open .project-name {

    color: var(--color)

}

.faqs-list li .project-info .project-name {

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

    padding: 15px 0px;

    font-size: 18px;

    font-weight: var(--fontblod5);

    position: relative;

    cursor: pointer

}

.faqs-list li .project-info .project-name em {

    font-size: 22px;

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%)

}

.faqs-list li .project-info .project-content {

    display: none;

    background: #f3f7fa;

    border-radius: 5px;

    padding: 20px

}

.inquiry-prolist {

    margin: 20px 0px

}

.inquiry-prolist .inquiry-pro-item {

    display: flex;

    align-items: center;

    box-shadow: 1px 2px 10px rgba(0,0,0,.1);

    padding: 20px

}

.inquiry-prolist .inquiry-pro-item:nth-child(n+2) {

    margin-top: 20px

}

.inquiry-prolist .inquiry-pro-item .pro-item-img {

    width: 160px

}

.inquiry-prolist .inquiry-pro-item .pro-item-img img {

    border: 1px solid #EEE

}

.inquiry-prolist .inquiry-pro-item .pro-item-name {

    flex: 1;

    padding: 0px 10px;

    color: #999

}

.inquiry-prolist .inquiry-pro-item .pro-item-name a {

    color: var(--color);

    font-size: 18px;

    font-weight: var(--fontblod5)

}

.inquiry-prolist .inquiry-pro-item .pro-item-del {

    background: var(--color);

    margin-right: 30px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #FFF;

    cursor: pointer;

    border-radius: 4px;

    transition: all .2s linear

}

.inquiry-prolist .inquiry-pro-item .pro-item-del:hover {

    box-shadow: 1px 2px 10px var(--color)

}

@media (max-width: 1500px) {

    .prodetails-info .prodetails-btnlist {

        justify-content:space-between

    }

    .prodetails-info .prodetails-btnlist>* {

        width: 48%;

        margin-right: 0px

    }

}

@media (max-width: 1300px) {

    .page-main {

        padding-left:20px

    }

    .pro-list.list1 {

        justify-content: space-between

    }

    .pro-list.list1 li {

        width: 48%;

        margin-right: 0px

    }

}

@media (max-width: 1280px) {

    .prodetails-info .prodetails-name {

        font-size:22px

    }

}

.feed-verification {

    display: flex;

    align-items: center

}

.feed-verification>#in-verification {

    width: 180px!important

}

.newsendinquiry {

    cursor: pointer

}

.hover {

    position: absolute;

    width: 180px;

    height: 180px;

    background-color: rgba(204,204,204,.6);

    border: 1px solid #EEE;

    display: none;

    cursor: move;

    z-index: 9

}

.small-box {

    position: relative;

    border: 1px solid #dfdfdf

}

.big-box {

    display: none;

    border: 1px solid #dfdfdf;

    border-left: none;

    width: 450px;

    height: 450px;

    position: absolute;

    left: 100%;

    top: 0px;

    overflow: hidden;

    z-index: 999;

    background: #FFF

}

.big-box img {

    display: block;

    max-width: none;

    max-height: none;

    height: auto!important;

    width: 150%!important

}

@media(max-width: 1024px) {

    .big-box,.hover {

        display:none!important

    }



    table td{padding: 0px!important;}

    .tu{display: block!important;}

}

.mediaplay {

    text-align: center;

    width: 70px;

    height: 70px;

    line-height: 70px;

    border: 2px solid #fff;

    border-radius: 50%;

    color: #fff;

    text-align: center;

    position: relative;

    transition: .5s;

    cursor: pointer;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%) rotate(-90deg);

    z-index: 9;

    display: none

}

.mediaplay em {

    font-size: 36px

}

.mediaplay:hover {

    color: var(--color);

    background: rgba(255,255,255,.7)

}

.mediaplay::after {

    content: '';

    display: block;

    position: absolute;

    left: -2px;

    right: -2px;

    bottom: -2px;

    top: -2px;

    border-radius: 50%;

    border: 3px solid;

    opacity: .8;

    border-color: transparent;

    border-right-color: var(--color);

    animation: runDot 2s infinite ease-in-out

}

@keyframes runDot {

    0% {

        transform: rotate(0)

    }

    100% {

        transform: rotate(359deg)

    }

}

.tu{display: none;}

#filterlist .filterlist-ul {

    padding: 10px 20px

}

#filterlist .filterlist-ul li {

    display: flex;

    align-items: center;

    margin: 10px 0px 20px;

    line-height: 1;

    cursor: pointer;

    user-select: none

}

#filterlist .filterlist-ul li:nth-child(n+21) {

    display: none

}

#filterlist .filterlist-ul li.act {

    color: var(--color)

}

#filterlist .filterlist-ul li.act .input::after {

    transform: translate(-50%,-50%) scale(1)

}

#filterlist .filterlist-ul li .input {

    width: 16px;

    height: 16px;

    margin-right: 10px;

    border: 1px solid #666;

    position: relative

}

#filterlist .filterlist-ul li .input::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%) scale(0);

    width: 9px;

    height: 9px;

    background: var(--color);

    transition: all .1s linear

}

#filterlist .filterlist-ul li span {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

    overflow: hidden

}

.xuanfu1 {

    position: absolute;

    height: 100%;

    width: 100%;

    font-size: 33px;

    color: #fff;

    margin: 133px;

}

#filterlist .viewmore-filter {

    color: var(--color);

    text-transform: uppercase;

    cursor: pointer;

    padding: 0 10px

}

.erji {

    font-size: 17px;

    width: 26%;

    text-align: left;

}

#filterlist .viewmore-filter:hover {

    text-decoration: underline

}

.hover1 a {

    color: #f00;

}







@media (max-width: 767px) {

    .banner-inner .banner-content .l-wrap {

        flex-wrap: wrap;



    }

    .nihaoya {

        display: flex;

        overflow-x: auto;

        overflow-y: hidden;

        white-space: nowrap;

        -webkit-overflow-scrolling: touch;

        justify-content: left;

        height: 50px;

    }

    .nihaoya .erji {

        width: auto !important;

        display: inline-block;

    }

    .banner-inner .banner-content {

        height: 100px !important;

    }

}