@charset "utf-8";

@import url(language.css);

:root {
    --color: #ff982a;
    --fontcolor: #333333;
    --fontbold3: 300;
    --fontbold4: 400;
    --fontbold5: 500;
    --fontbold6: 600;
    --fontbold7: 700
}

*,html,body,h1,h2,h3,h4,h5,h6,table,th,td,ul,li,dl,dt,dd,div,p {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box
}

body {
    margin: 0px auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fontcolor);
    font-family: 'Alegreya Sans',sans-serif
}

a {
    text-decoration: none;
    color: var(--fontcolor);
    cursor: pointer;
    transition: .5s all;
    -webkit-transition: .5s all
}

img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    transition: .5s all;
    -webkit-transition: .5s all
}

ol,ul,li {
    list-style: none
}

input,textarea {
    outline: 0;
    border: none
}

textarea {
    resize: none;
    overflow: auto
}

table {
    border-collapse: collapse;
    table-layout: fixed
}

.h2,.h3 {
    font-weight: var(--fontbold6)
}

.clearfix {
    zoom: 1;
    clear: both
}

.clearfix:after {
    content: ".";
    width: 0px;
    height: 0px;
    visibility: hidden;
    display: block;
    clear: both;
    overflow: hidden
}

.fl {
    float: left
}

.fr {
    float: right
}

.tl {
    text-align: left
}

.tc {
    text-align: center
}

.tr {
    text-align: right
}

.ellipse {
    overflow: hidden;
    text-overflow: ellipsis
}

.inline {
    display: inline-block;
    display: inline;
    zoom: 1
}

.ft-12 {
    font-size: .75rem
}

.ft-14 {
    font-size: .875rem
}

.ft-16 {
    font-size: 1rem
}

.ft-22 {
    font-size: 1.375rem
}

.ft-24 {
    font-size: 1.5rem
}

.ft-36 {
    font-size: 2.25rem
}

.ft-48 {
    font-size: 3rem
}

.mt-8 {
    margin-top: 1rem
}

.mt-10 {
    margin-top: .625rem
}

.mt-16 {
    margin-top: 1rem
}

.mt-20 {
    margin-top: 1.25rem
}

.mt-30 {
    margin-top: 1.875rem
}

.mt-48 {
    margin-top: 3rem
}

.mt-98 {
    margin-top: 6.125rem
}

.pt-8 {
    padding-top: 1rem
}

.pt-10 {
    padding-top: .625rem
}

.pt-16 {
    padding-top: 1rem
}

.pt-20 {
    padding-top: 1.25rem
}

.pt-30 {
    padding-top: 1.875rem
}

.pt-48 {
    padding-top: 3rem
}

.pt-98 {
    padding-top: 6.125rem
}

.news-box,.plist {
    overflow: hidden
}

.clearboth {
    clear: both
}

.back_to_top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 62px;
    cursor: pointer;
    z-index: 1001
}

.yellow {
    color: #ff9003
}

.gray {
    color: #666666
}

.head-top {
    overflow: hidden
}

.logo {
    max-width: 50%;
    height: 5rem;
    vertical-align: middle
}

.logo img {
    max-width: 400px;
    max-height: 80px
}

.social_link {
    width: 50%;
    font-size: 1.5rem;
    margin-top: 1.255rem
}

.social_link li {
    display: inline-block;
    margin-right: .75rem
}

.social_link li a {
    color: var(--color)
}

.social_link li a:hover {
    color: #212121
}

.navBox {
    width: 100%
}

.nav {
    margin: 0px auto;
    list-style: none;
    width: auto;
    border: 0 solid #CCCCCC
}

.navBox .title {
    display: none
}

.mainmenu ul li {
    display: inline-block;
    position: relative;
    line-height: 3em
}

.mainmenu ul li a {
    text-decoration: none;
    letter-spacing: 1px;
    padding: .5rem 1rem;
    font-size: 1.375rem;
    display: block
}

.mainmenu ul li a.inmenu_1,.mainmenu ul li:hover {
    color: #FFFFFF;
    background: var(--color)
}

.mainmenu ul li:hover>a {
    color: #FFFFFF
}

.mainmenu ul ul {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    width: auto;
    padding: .375rem 0;
    margin: 0px;
    text-align: left;
    background-color: #FFFFFF;
    display: none
}

.mainmenu ul li:hover>ul {
    display: block
}

.mainmenu ul li ul li {
    border-bottom: 1px solid #EEEEEE;
    display: block
}

.mainmenu ul ul>li>a {
    display: block;
    padding: .5rem 1.25rem;
    font-weight: var(--fontbold4);
    white-space: nowrap;
    font-size: .875rem
}

@media(min-width:1025px) {
    #liinquiry {
        display: inline-flex;
        align-items: center;
        background: none;
    }

    #liinquiry a {
        background: var(--color);
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        border-radius: 30px;
        color: #fff;
        transition: all .1s linear;
        text-decoration: none
    }

    #liinquiry a:hover {
        opacity: .9
    }
}

.pagination {
    position: absolute;
    margin: -10px 0px 0px 160px;
    width: 100px;
    z-index: 999999
}

.pagination li {
    float: left;
    margin: 0px 2px
}

.pagination li a {
    display: block;
    width: 10px;
    height: 0px;
    padding-top: 10px;
    background-image: url(../images/pagination.png);
    background-position: 0 0;
    float: left;
    overflow: hidden
}

.pagination li.current a {
    background-position: 0 -10px
}

.banner {
    width: 100%;
    text-align: center;
    min-width: 1000px;
    position: relative;
    margin: 0px auto;
    background: #FFFFFF
}

.banner img {
    max-width: 100%
}

.banner .all_mar {
    position: absolute;
    bottom: 0px;
    width: 100%
}

.banner .all_mar .in_w {
    margin: 0px auto;
    text-align: left
}

#banner {
    clear: both;
    width: 100%;
    margin: 0px auto;
    position: relative
}

.slider_img {
    display: block!important;
    text-align: center;
    height: 100%
}

.slider_img img {
    margin: 0px
}

.wmuSlider {
    height: 100%!important;
    position: relative;
    overflow: hidden
}

.bbdd {
    z-index: 2;
    position: absolute;
    bottom: 2%;
    margin: 0px;
    padding: 0px;
    width: 100%;
    text-align: center
}

.bbdd li {
    margin: 0px 8px 10px 0px;
    list-style-type: none;
    display: inline-block
}

.bbdd a {
    display: inline-block;
    text-indent: -9999px;
    width: 28px;
    height: 16px;
    background: url(../images/defuat.png) no-repeat;
    display: block;
    overflow: hidden
}

.bbdd a.wmuActive {
    background: url(../images/active.png) no-repeat
}

.wmuSliderNext,.wmuSliderPrev {
    width: 52px;
    height: 134px;
    line-height: 99em;
    overflow: hidden;
    margin: -35px 0px 0px;
    display: block;
    position: absolute;
    top: 45%;
    z-index: 1000000000;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all .3s ease
}

.wmuSliderNext {
    background: url(../images/next.png) no-repeat;
    right: 0px
}

.wmuSliderPrev {
    background: url(../images/prev.png) no-repeat;
    left: 0px
}

.wmuSlider:hover .wmuSliderNext,.wmuSliderPrev:hover {
    opacity: .8;
    filter: alpha(opacity=25)
}

.wmuSlider:hover .wmuSliderPrev,.wmuSliderPrev:hover {
    opacity: .8;
    filter: alpha(opacity=25)
}

.wmuSlider:hover .wmuSliderNext:hover,.wmuSlider:hover .wmuSliderPrev:hover {
    opacity: 1;
    filter: alpha(opacity=50)
}

.about {
    overflow: hidden
}

.con-title {
    margin: 6.125rem auto 3rem
}

.abou-pic {
    width: 46%;
    margin-right: 4%;
    text-align: center
}

.about-text {
    width: 50%
}

.about-title {
    font-size: 2.25rem;
    line-height: 2.8125rem;
    font-weight: var(--fontbold6)
}

.about-text .company {
    line-height: 1.5rem;
    font-size: .875rem
}

.about-more a {
    padding: 1rem 1.875rem;
    background: var(--color);
    margin-top: 1.875rem;
    font-size: 1.125rem;
    color: #FFFFFF;
    text-transform: uppercase;
    display: inline-block
}

.about-more a:hover {
    background: #232323
}

.pro-box {
    overflow: hidden
}

.index-tit {
    font-size: 2.25rem;
    padding: .5rem;
    font-weight: var(--fontbold6);
    text-transform: uppercase;
    margin-bottom: 3rem;
    text-align: center
}

.pro-item {
    width: 24%;
    margin-right: 1%;
    float: left;
    margin-bottom: .5rem
}

.pro-item-tit {
    width: 100%;
    height: 3rem;
    overflow: hidden;
    text-overflow: ellipsis
}

.pro-item-tit h2,.pro-item-tit .h2 {
    color: var(--fontcolor);
    font-weight: var(--fontbold4);
    font-size: 1rem;
    text-align: center;
    line-height: 3rem;
    overflow: hidden;
    text-overflow: ellipsis
}

.hovereffect {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default
}

.hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,.3);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(460px,-100px) rotate(180deg);
    -ms-transform: translate(460px,-100px) rotate(180deg);
    transform: translate(460px,-100px) rotate(180deg);
    -webkit-transition: all .2s .4s ease-in-out;
    transition: all .7s .1s ease-in-out
}

.hovereffect img {
    position: relative;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in
}

.hovereffect h4 {
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: center;
    position: relative;
    font-size: 1rem;
    padding: .625rem;
    background: rgba(0,0,0,.2)
}

.hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 1rem .875rem;
    text-transform: uppercase;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    margin: 0px;
    background-color: transparent;
    -webkit-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.hovereffect a.info:hover {
    box-shadow: 0 0 .25rem #FFFFFF
}

.hovereffect:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0)
}

.pro-item:hover .pro-item-tit a {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color);
    color: #FFFFFF
}

.hovereffect:hover h4 {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.hovereffect:hover a.info {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.overlay p {
    padding-top: 2.5rem;
    color: #FAFAFA
}

.controller {
    width: 100%;
    height: 6.25rem;
    background: #eff1f6;
    clear: both
}

.controller-btn span {
    margin-top: .625rem;
    display: inline-block
}

.controller-btn .load {
    margin-right: .5rem;
    margin-left: .5rem
}

.news-item {
    width: 33.33%;
    padding: 0px 1%;
    margin: 1% 0;
    float: left
}

.news-item-text {
    padding: 2.5rem 1.5rem
}

.news-text-tit h3,.news-text-tit .h3 {
    line-height: 2rem;
    margin-bottom: 1rem;
    height: 2rem
}

.news-item-text .news-pubdate {
    font-size: .75rem;
    margin-bottom: 1rem
}

.news-item-text p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden
}

.news-item-text .news-more {
    width: 30px;
    height: 30px;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
    border-radius: 50%;
    margin-top: 1rem;
    text-align: center;
    display: block
}

.news-more i.fa {
    font-size: 1.5rem
}

.news-item:hover {
    color: #FFFFFF;
    -moz-box-shadow: 2px 2px 5px #333333;
    -webkit-box-shadow: 2px 2px 5px #333333;
    box-shadow: 2px 2px 5px #333333;
    transition: .5s all;
    -webkit-transition: .5s all
}

.news-item:hover h3 a,.news-item:hover .h3 a {
    color: #FFFFFF
}

.news-item a img {
    transition: 1s all;
    -webkit-transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
    -ms-transition: 1s all
}

.news-item:hover>a img {
    -moz-transform: rotate(360deg) scale(.9);
    -webkit-transform: rotate(360deg) scale(.9);
    -ms-transform: rotate(360deg) scale(.9);
    -o-transform: rotate(360deg) scale(.9);
    transform: rotate(360deg) scale(.9)
}

.news-item:hover .news-item-text {
    background: var(--color)
}

.news-item:hover .news-more {
    border-color: #FFFFFF
}

.news-item:hover .news-more i.fa,.news-text-tit h3 a,.news-text-tit .h3 a {
    color: var(--color)
}

.footer {
    margin-top: 5rem;
    background: url(../images/bottom-bg.jpg) no-repeat;
    background-size: cover;
    overflow: hidden;
    clear: both
}

.footer-main {
    margin: 3rem 2rem;
    color: #FFFFFF;
    line-height: 2.25rem;
    overflow: hidden
}

.footer-tit {
    font-size: 1.5rem;
    margin: 1rem auto
}

.contact-info a,.footer-pro-items li a {
    color: #FFFFFF
}

.footer-main>div .atextarea,.footer-main>div input {
    width: 100%;
    border: 1px solid #EEEEEE;
    padding: 1rem .5rem;
    margin: 1rem 0;
    border-radius: .25rem;
    color: #666666
}

.footer-main>div .ebtn {
    border: none;
    padding: .5rem 1rem;
    background: #FFFFFF;
    color: var(--color);
    width: 8rem;
    border-radius: none
}

.copy {
    line-height: 5rem;
    color: #FFFFFF
}

.bPosition {
    line-height: 3rem;
    background: #212121;
    margin: 1rem auto
}

.bPosition,.bPosition a {
    color: var(--color)
}

.sidebar {
    width: 15rem;
    float: left
}

.main {
    padding: 0px;
    float: right;
    width: 72%
}

.inside-tit h3 {
    font-size: 1.25rem;
    margin: 1rem auto;
    line-height: 4rem;
    border-bottom: 1px solid #CCCCCC;
    text-align: center;
    margin-bottom: .75rem;
    background: var(--color);
    color: #FFFFFF;
    box-shadow: 2px 2px 5px #CCCCCC
}

.sf-menu {
    width: 100%;
    margin: 0px auto;
    padding-bottom: 20px
}

.sf-menu li {
    clear: both;
    border-bottom: 1px solid #FFFFFF
}

.sf-menu li a,.sf-menu li:hover a {
    display: block;
    color: #FFFFFF;
    line-height: 1.875rem;
    background: var(--color);
    padding: .625rem 0 .625rem 1.25rem
}

.sf-menu li a:hover {
    background-color: #212121;
    color: #FFFFFF
}

.sf-menu li li {
    clear: both;
    text-transform: capitalize;
    margin: 0px auto;
    position: relative;
    border-bottom: none;
    padding-bottom: 0px;
    border-bottom: 1px dashed #EEEEEE
}

.sf-menu li li.LiLevel2 a {
    background: #FFFFFF
}

.sf-menu li li.LiProDetail a {
    background: url(../images/ico_sort.png) no-repeat 8px 11px
}

.sf-menu li li a,.sf-menu li:hover li a {
    display: block;
    line-height: 1.6875rem;
    color: var(--fontcolor);
    padding: .375rem 0 .25rem 0;
    text-decoration: none;
    font-size: .875rem;
    padding-left: 1rem;
    font-weight: var(--fontbold4)
}

.sf-menu li li a:hover {
    text-decoration: none;
    color: var(--color)
}

ul.sf-menu ul {
    display: block
}

.sf-menu li:hover ul {
    display: block
}

ul.sf-menu ul ul {
    position: absolute;
    left: 100%;
    width: 100%;
    top: 0px;
    margin: 0px;
    visibility: hidden;
    border: 0px;
    border-radius: 0;
    border-left: 0px;
    z-index: 999999
}

.sf-menu li li li {
    background: #FFFFFF;
    padding: 0px
}

.sf-menu li li:hover {
    opacity: 1
}

.sf-menu li li li a,.sf-menu li:hover li li a {
    text-decoration: none;
    background: #F2F2F2;
    border-bottom: 1px solid #DDDDDD;
    padding: .3125rem 0 .25rem .75rem;
    text-indent: 8px
}

ul.pro-menu {
    margin: 0px;
    padding: 0px;
    text-transform: capitalize
}

ul.sf-menu li:hover>ul {
    visibility: visible;
    margin: 0px;
    padding: 0px
}

.sf-menu1 {
    width: 100%;
    margin: 0px auto;
    padding-bottom: 20px
}

.sf-menu1 li {
    clear: both;
    border-bottom: 1px solid #FFFFFF;
    position: relative
}

.sf-menu1 li a,.sf-menu1 li:hover a {
    display: block;
    color: #FFFFFF;
    line-height: 1.875rem;
    background: var(--color);
    padding: .625rem 0 .625rem 1.25rem
}

.sf-menu1 li a:hover {
    background-color: #212121;
    color: #FFFFFF
}

.sf-menu1 li li {
    clear: both;
    text-transform: capitalize;
    margin: 0px auto;
    position: relative;
    border-bottom: none;
    padding-bottom: 0px;
    border-bottom: 1px dashed #EEEEEE
}

.sf-menu1 li li.LiLevel2 a {
    background: #FFFFFF
}

.sf-menu1 li li a,.sf-menu1 li:hover li a {
    display: block;
    color: var(--fontcolor);
    text-decoration: none;
    font-size: .875rem;
    padding-left: 1rem;
    font-weight: var(--fontbold4)
}

.sf-menu1 li li a:hover {
    text-decoration: none;
    color: var(--color)
}

ul.sf-menu1 ul {
    display: none;
    width: 100%
}

ul.pro-menu {
    margin: 0px;
    padding: 0px;
    text-transform: capitalize;
    position: absolute;
    left: 100%;
    top: 0px
}

.sf-menu1 li:hover ul {
    display: block
}

ul.sf-menu1 ul ul {
    position: absolute;
    left: 100%;
    width: 100%;
    top: 0px;
    margin: 0px;
    visibility: hidden;
    border: 0px;
    border-radius: 0;
    border-left: 0px;
    z-index: 999999
}

.sf-menu1 li li li {
    background: #FFFFFF;
    padding: 0px
}

.sf-menu1 li li:hover {
    opacity: 1
}

.sf-menu1 li li li a,.sf-menu1 li:hover li li a {
    text-decoration: none;
    background: #F2F2F2;
    border-bottom: 1px solid #DDDDDD;
    padding: .3125rem 0 .25rem .75rem;
    text-indent: 8px
}

ul.sf-menu1 li:hover ul {
    display: block;
    margin: 0px;
    padding: 0px
}

.inside-pro-box {
    float: left;
    width: 100%;
    background: #FFFFFF;
    margin-bottom: 1.25rem;
    border-bottom: 1px dashed #CCCCCC;
    padding-bottom: 1.25rem
}

.inside-pro-box .inside-pro-img {
    width: 30%;
    float: left;
    text-align: center;
    font-size: 0
}

.inside-pro-box .inside-pro-img img {
    max-width: 100%
}

.inside-pro-box .inside-pro-text {
    width: 67%;
    float: right
}

.inside-pro-box .inside-pro-text h3 {
    margin: .625rem 0;
    line-height: 1.5rem;
    font-size: 1.25rem;
    font-weight: var(--fontbold6)
}

.inside-pro-box .inside-pro-text h3:hover {
    color: var(--color)
}

.inside-pro-box .inside-pro-text p {
    line-height: 1.5rem;
    padding: 0px
}

.inside-pro-box .inside-pro-text .inside-pro-more {
    margin: 1rem 0
}

.inside-pro-box .inside-pro-text .inside-pro-more a {
    padding: .5rem 1.25rem;
    background: var(--color);
    color: #FFFFFF;
    border-radius: .3125rem
}

.inside-pro-box .inside-pro-text .inside-pro-more a:hover {
    background: #222222
}

.pro_lb1 {
    display: flex;
    flex-wrap: wrap
}

.pro_lb1 li {
    width: 33.3333%;
    padding: 10px
}

.pro_lb1 li span.fl {
    float: none;
    width: 100%;
    position: relative;
    height: 220px;
    display: block
}

.pro_lb1 li span.fl img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -o-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.pro_lb1 li span.fl+div {
    margin: 10px 0px
}

.pro_lb1 li span.fl+div h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 48px;
    text-align: center
}

@media screen and (max-width:992px) {
    .pro_lb1 li {
        width: 50%
    }
}

@media screen and (max-width:500px) {
    .pro_lb1 li {
        width: 100%
    }
}

.pages {
    text-align: center;
    font-size: 12px;
    padding: 15px 0px 20px 0px;
    color: #b2b2b2;
    clear: both
}

.pages a,.pages span {
    display: inline-block;
    margin: 1px 5px;
    min-width: 10px;
    height: 30px;
    padding: 0px 10px;
    line-height: 30px
}

.pages a:link,.pages a:visited {
    color: #666666;
    background: #FFFFFF
}

.pages a:active,.pages a:hover,.pages span.ctxt {
    color: #FFFFFF;
    background: #333333;
    color: #FFFFFF;
    text-decoration: none
}

.left-tel,.search,left-email {
    width: 100%;
    height: 2.5rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    line-height: 2.5rem
}

.left-email i.fa,.left-tel i.fa {
    width: 2.5rem;
    height: 2.5rem;
    vertical-align: middle;
    padding-top: 4px
}

.sss {
    border: 1px solid #EEEEEE;
    border-radius: .625rem 10px
}

.sss .textarea {
    width: 11.625rem;
    height: 2.5rem;
    margin-left: .375rem;
    padding-left: .375rem;
    border: none;
    color: #303030;
    background: #EEEEEE
}

.sss .submit {
    display: inline-block;
    text-align: center
}

.sss .fa {
    font-size: .875rem;
    line-height: 2rem;
    width: 2rem;
    height: 2rem;
    border: none;
    cursor: pointer;
    margin-right: .375rem
}

.ejfl {
    font-size: 1.5rem;
    margin: 0px 0 1.25rem;
    font-weight: var(--fontbold4)
}

.pcon_l {
    float: left
}

.pcon_r {
    padding: 0px 1rem 0 27.5rem
}

h1.pd-title {
    font-size: 1.25rem;
    font-weight: var(--fontbold6);
    color: #4a4a4a;
    padding-bottom: .625rem;
    line-height: 1.5rem;
    border-bottom: 1px solid #e4e2e2;
    text-transform: none;
    margin-bottom: 1rem
}

.pcon_r .pcon_info {
    line-height: 1.5rem;
    color: var(--fontcolor);
    font-size: .875rem
}

.pcon_r .p_more {
    line-height: 3rem;
    height: 3rem;
    padding: 0px 1.25rem;
    margin-right: 1rem
}

.pcon {
    padding-top: 1.875rem;
    float: left;
    width: 100%
}

.pcon .tit {
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 1.25rem;
    background: #e2e2e2;
    color: var(--color);
    font-weight: var(--fontbold6)
}

.pcon .pinfo {
    display: block;
    line-height: 1.5rem;
    padding: 1.25rem 1.25rem 30px 1.25rem
}

.productsTags {
    padding: .5rem
}

.pcon .pinfo img {
    max-width: 100%;
    margin: 0px auto
}

.acon {
    float: left;
    width: 100%
}

.acon .pinfo {
    display: block;
    line-height: 1.5rem;
    padding: 0px 0 1.875rem .625rem
}

.proIntro {
    clear: both;
    margin: 10px auto 30px;
    padding: 0px;
    line-height: 1.6;
    color: #555
}

.proIntro a {
    color: #555
}

.pcon_info+a,.pcon_info+a+a {
    background-color: var(--color);
    padding: .5rem 1.25rem!important;
    border-radius: .25rem;
    color: #FFFFFF
}

.pcon_info+a+a:hover,.pcon_info+a:hover {
    background-color: #000000;
    color: #FFFFFF
}

.newslist {
    margin: 0px auto .75rem auto;
    float: left;
    width: 100%
}

.newslist ul {
    padding-right: 1rem
}

.newslist li {
    text-align: right;
    height: 2.5rem;
    border-bottom: 1px dashed #DDDDDD;
    line-height: 2.5rem;
    color: #EEEEEE;
    overflow: hidden
}

.newslist li a {
    float: left;
    font-size: 1rem;
    text-align: left;
    text-indent: 1rem;
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.newslist li a:hover {
    color: var(--color);
    text-decoration: underline
}

.newslist li span {
    font-size: .875rem;
    color: var(--fontcolor)
}

.rnews,.rollPro {
    margin: 0px auto 3.125rem
}

.rnews h3,.rollPro h3 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding: .625rem 0 2.1875rem 0;
    color: var(--fontcolor);
    font-weight: var(--fontbold4);
    height: 1.875rem;
    color: var(--color)
}

.rnews li {
    float: left;
    width: 50%;
    height: 2.1875rem;
    line-height: 2.1875rem
}

.rnews li a {
    display: block;
    white-space: nowrap;
    margin-right: 3%;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: .875rem;
    border-bottom: 1px dashed #CCCCCC;
    color: var(--fontcolor)
}

.rnews li a:hover {
    color: var(--color)
}

.rollPro {
    height: 220px;
    margin-bottom: 30px
}

.rollPro .Cont {
    width: 94%;
    overflow: hidden;
    margin: 0px auto
}

.rollPro .ScrCont {
    width: 2500px
}

.rollPro .pic {
    position: relative;
    width: 170px;
    height: 160px;
    margin: 0px 3px;
    border: 1px solid #EEEEEE;
    text-align: center
}

.rollPro .pbox img {
    max-width: 162px;
    max-height: 100px
}

.rollPro .pbox {
    width: 100%;
    height: 120px;
    text-align: center
}

.rollPro p {
    height: 42px;
    overflow: hidden;
    line-height: 20px;
    position: absolute;
    bottom: 0px
}

.rollPro #List1,.rollPro #List2,.rollPro .Cont,.rollPro .pic,.rollPro .wen_jt {
    float: left
}

.rollPro .wen_jt {
    width: 24px;
    padding-top: 45px
}

.newcon {
    padding-top: 0px
}

.newcon .tit {
    text-align: center;
    color: #000000;
    font-size: 1.375rem
}

.newcon .time {
    line-height: 1.875rem;
    border-bottom: 1px solid #CCCCCC;
    padding-top: .625rem;
    font-size: .75rem;
    color: #999;
    width: 10rem;
    margin: 0px auto 1.25rem;
    text-align: center
}

.newcon p {
    line-height: 1.5rem;
    font-size: .875rem
}

.pinfo {
    font-size: .875rem
}

.newcon .pn {
    padding: .75rem 0 0 0;
    min-height: 2.5rem
}

.newcon .next,.newcon .prev {
    font-size: 1rem;
    padding: .375rem 0 0 0;
    width: 100%
}

.newcon .next {
    margin-right: 0px
}

.newcon .next a,.newcon .prev a {
    color: #666666
}

.newcon .next a:hover,.newcon .prev a:hover {
    color: var(--color)
}

.table {
    border-collapse: collapse
}

.table td,.table th {
    border: 1px solid #cdcdcd;
    padding: .375em
}

.table p {
    padding: 0px;
    margin: 0px
}

.pshare {
    float: left;
    padding: .5em 0 0 0
}

.jsshare {
    text-align: center;
    padding-top: 8px
}

.pshare li {
    float: left;
    width: 48%;
    height: 2em;
    line-height: 2em
}

.pshare li img {
    vertical-align: middle;
    margin-right: .75em
}

.jsshare span.stxt {
    display: inline-block;
    font-size: .875em;
    line-height: 1.5em;
    padding: 0px .5em 0 0;
    position: relative
}

.jsshare a,.jsshare a img {
    width: 2.125em;
    vertical-align: middle
}

.addthis_sharing_toolbox {
    display: inline-block
}

.keywords {
    margin: .75em auto
}

.keywords a {
    margin-right: .75em;
    color: #2e66b5;
    line-height: 1.8;
    text-decoration: underline;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis
}

.keywords a:hover {
    text-decoration: none
}

.pdown1 #A_DownLoadProduct {
    display: inline-block;
    clear: both;
    height: 2em;
    margin: 1em 0em 0em 0em;
    line-height: 2em;
    background: url(../images/down1_2.webp) right top no-repeat;
    padding-right: 50px
}

.pdown1 #A_DownLoadProduct span {
    display: inline-block;
    height: 2em;
    background: url(../images/down1_1.webp) no-repeat;
    padding: 0em 0em 0em 1em
}

.pdown2 #A_DownLoadProduct,.pdown3 #A_DownLoadProduct,.pdown4 #A_DownLoadProduct {
    display: inline-block;
    clear: both;
    height: 3em;
    margin: 1em 0em 0em 0em;
    line-height: 3em;
    padding-right: 45px
}

.pdown2 #A_DownLoadProduct span,.pdown3 #A_DownLoadProduct span,.pdown4 #A_DownLoadProduct span {
    display: inline-block;
    height: 3em;
    background: url(../images/down2_1.webp) no-repeat;
    padding: 0px .75em 0 1em
}

.pdown2 #A_DownLoadProduct {
    background: url(../images/down2_2.webp) right top no-repeat
}

.pdown3 #A_DownLoadProduct {
    background: url(../images/down2_3.webp) right top no-repeat
}

.pdown4 #A_DownLoadProduct {
    background: url(../images/down2_4.webp) right top no-repeat
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width:1080px) {
    .mainmenu ul li a {
        font-size: 1rem
    }

    .about-title {
        font-size: 1.5rem
    }

    .index-tit {
        font-size: 2rem
    }

    .pro-item {
        width: 32%
    }

    .about-text .company {
        line-height: 1.5rem;
        font-size: .875rem;
        height: 6rem;
        overflow: hidden;
        margin-top: 1rem
    }

    .about-more a {
        padding: 1rem 1.5rem;
        background: var(--color);
        margin-top: 1rem;
        font-size: 1rem;
        color: #FFFFFF;
        text-transform: uppercase;
        display: inline-block
    }

    .con-title {
        margin: 3rem auto 3rem
    }
}

@media screen and (max-width:991px) {
    .mainmenu ul li a {
        padding: .5rem .75rem
    }

    .news-item {
        width: 50%
    }

    .main {
        padding: 0px;
        float: right;
        width: 60%
    }

    .newslist li a {
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .footer-main {
        margin: 2rem 1rem;
        color: #FFFFFF;
        line-height: 2rem;
        overflow: hidden
    }

    .footer-tit {
        font-size: 1.25rem;
        margin-bottom: 1rem;
        text-align: center
    }

    .copy {
        line-height: 2rem;
        font-size: .875rem
    }
}

@media screen and (max-width:800px) {
    html {
        font-size: 14px
    }

    .abou-pic,.about-text {
        width: 100%;
        float: none;
        margin-top: 1rem
    }

    .about-title h2 {
        font-size: 2rem;
        text-align: center
    }

    .about-title p.ft-24 {
        font-size: 1rem
    }

    .pro-item {
        width: 48%
    }

    .newslist li a {
        font-size: .875em
    }

    .pcon_l {
        float: none
    }

    .pcon_r {
        padding: 1rem
    }
}

@media screen and (max-width:667px) {
    .container {
        margin: 0px auto
    }

    .logo {
        float: none;
        margin: 0px auto;
        max-width: 50%;
        display: inline-block;
        height: 4rem
    }

    .navBox {
        height: auto;
        width: 100%
    }

    .nav {
        width: auto;
        height: auto;
        position: relative;
        display: none
    }

    .mainmenu ul li {
        width: 100%;
        float: none;
        border-bottom: 1px solid #EEE
    }

    .mainmenu ul li a {
        padding: .25rem;
        font-size: 1rem;
        display: block
    }

    .mainmenu ul li ul {
        position: inherit
    }

    .mainmenu ul ul>li>a {
        display: block;
        padding: 0px 1.25rem;
        font-weight: var(--fontbold4);
        white-space: nowrap;
        font-size: .875rem
    }

    .mainmenu ul li:hover>ul {
        display: block
    }

    .navBox .title {
        position: relative;
        width: 100%;
        height: 2.5rem;
        text-align: center;
        letter-spacing: 1px;
        font-size: 1.5rem;
        line-height: 2.5rem;
        display: block
    }

    .navBox .title a {
        color: #FFFFFF;
        text-decoration: none
    }

    .navBox .title .btn {
        position: absolute;
        right: .625rem;
        top: 0px;
        width: 2rem;
        cursor: pointer
    }

    .social_link {
        font-size: 1.5rem
    }

    .sidebar {
        float: none;
        width: 100%;
        padding-top: 12px
    }

    .left-tel,.search,left-email {
        width: 15rem
    }

    .main {
        padding: 0px;
        float: right;
        width: 100%
    }

    .inside-pro-box {
        float: none
    }

    .inside-pro-box .inside-pro-img,.inside-pro-box .inside-pro-text {
        width: 100%;
        float: none
    }

    .newcon .next,.newcon .prev {
        font-size: .875rem
    }

    .footer-tit,.newcon .tit,.rnews h3,.rollPro h3 {
        font-size: 1rem
    }

    .footer-main {
        font-size: .875em
    }
}

@media screen and (max-width:567px) {
    .controller {
        width: 100%;
        height: 50px
    }

    .controller-btn span {
        margin-top: 0px
    }

    .pro-box {
        width: 86%;
        margin: 0px auto
    }

    .news-item {
        width: 100%
    }

    .news-item,.pro-item {
        width: 100%
    }

    .news-item {
        padding: 3% 1%
    }

    .news-item-text {
        padding: 1.5rem 1.5rem
    }

    .about-more a {
        padding: .5rem 1rem;
        background: var(--color);
        margin-top: 1.5rem;
        font-size: 1rem
    }

    .news-more i.fa {
        margin-top: 2px;
        margin-left: 2px
    }
}

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media(min-width:992px) {
    .container {
        width: 970px
    }
}

@media(min-width:1200px) {
    .container {
        width: 1170px
    }

    .mainmenu ul li a {
        padding: .5rem 1.5rem
    }
}

@media(min-width:1366px) {
    .container {
        width: 1280px
    }
}

.pcon .ptit {
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 1.25rem;
    background: #e2e2e2;
    color: var(--color);
    font-weight: var(--fontbold6)
}

.rollPro1 {
    width: 100%;
    margin: 10px 0px
}

.rollPro1:after {
    content: '';
    display: block;
    visibility: hidden;
    clear: both;
    height: 0px
}

.rollPro1 li {
    float: left;
    width: 33.3333%;
    padding: 10px;
    margin-bottom: 10px
}

.rollPro1 li .pbox {
    width: 100%
}

.rollPro1 li .pbox a {
    width: 380px;
    height: 280px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #CCCCCC
}

.rollPro1 li .pbox img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0px auto
}

.rollPro1 li p {
    font-size: 14px;
    text-align: center;
    line-height: 1.4;
    margin-top: 10px
}

.rollPro1 li:hover a {
    color: var(--color)
}

@media screen and (max-width:1100px) {
    .rollPro1 li .pbox a {
        height: 200px
    }
}

@media screen and (max-width:992px) {
    .rollPro1 li .pbox a {
        height: 130px
    }
}

@media screen and (max-width:768px) {
    .rollPro1 li {
        width: 50%
    }

    .rollPro1 li .pbox a {
        height: 180px
    }
}

@media screen and (max-width:667px) {
    .rollPro1 li .pbox a {
        height: 250px
    }
}

@media screen and (max-width:460px) {
    .rollPro1 li {
        width: 100%
    }

    .rollPro1 li .pbox a {
        height: auto
    }
}

.prodcate {
    width: 100%;
    margin-bottom: 50px
}

.catelist:after {
    content: '';
    display: block;
    visibility: hidden;
    height: 0px;
    clear: both
}

.cateli {
    width: 33.33333%;
    float: left;
    position: relative
}

.cateli img {
    width: 100%
}

.catewor {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(255,152,42,.7)
}

.catewor a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition: all ease-in .5s;
    -moz-transition: all ease-in .5s;
    -o-transition: all ease-in .5s;
    transition: all ease-in .5s
}

.cateli:nth-child(2n) .catewor {
    background: rgba(255,255,255,.7)
}

.catewor p {
    position: absolute;
    width: 100%;
    padding: 0px 15px;
    color: #FFFFFF;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
    left: 0px;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    margin-top: -8%
}

.cateli:nth-child(2n) .catewor p {
    color: var(--color)
}

.catebtn {
    width: 48px;
    height: 48px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    text-align: center;
    line-height: 44px;
    color: #FFFFFF;
    position: absolute;
    bottom: 24px;
    left: 50%;
    margin-left: -24px
}

.catebtn i {
    font-size: 24px
}

.cateli:nth-child(2n) .catebtn {
    border-color: #7e7e7e;
    color: #7e7e7e
}

.cateli:hover .catewor a {
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9);
    -webkit-transition: all ease-in .5s;
    -moz-transition: all ease-in .5s;
    -o-transition: all ease-in .5s;
    transition: all ease-in .5s
}

@media screen and (max-width:1200px) {
    .cateli {
        width: 50%
    }

    .catewor p {
        font-size: 23px
    }
}

@media screen and (max-width:700px) {
    .cateli {
        width: 100%
    }
}

#con {
    margin-top: 30px
}

#tagContent {
    padding-top: 20px
}

#tags:after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0px
}

#tags li {
    margin-bottom: 10px;
    float: left
}

#tags li a {
    text-decoration: none;
    display: block;
    line-height: 40px;
    padding: 0px 18px;
    margin-right: 8px;
    background: #efefef;
    color: var(--fontcolor);
    font-size: 18px
}

ul#tags li.selectTag a {
    color: #FFFFFF;
    background: var(--color)
}

.tagContent {
    display: none;
    width: 100%;
    color: var(--fontcolor);
    padding-top: 10px;
    font-size: 14px;
    line-height: 28px
}

#tagContent div.selectTag {
    display: block
}

.social_link {
    display: flex;
    justify-content: flex-end
}

.head-top {
    overflow: visible
}

.nav {
    font-size: 0
}

.mainmenu ul li a {
    font-size: 1rem;
    line-height: 3em
}

.newslist li.nwmor {
    height: auto;
    padding: 8px 0px
}

.newslist li.nwmor>a {
    width: 240px;
    text-indent: 0
}

.newslist li.nwmor .newstxt {
    padding-left: 250px;
    position: relative;
    text-align: left
}

.newslist li.nwmor .newstxt a {
    font-size: 18px;
    max-width: 100%;
    text-indent: 0;
    white-space: normal;
    float: none;
    width: 100%;
    padding: 6px 100px 6px 0px;
    display: block;
    line-height: 1.3
}

.newslist li.nwmor .newstxt .txtime {
    line-height: 24px;
    display: block;
    position: absolute;
    right: 0px;
    top: 6px
}

.newslist li.nwmor .newstxt p {
    color: #444444;
    line-height: 1.4;
    font-size: 15px
}

@media screen and (max-width:991px) {
    .newslist li.nwmor .newstxt {
        padding-left: 0px;
        float: left;
        margin-top: 5px
    }
}

.news-item:hover>a img {
    transform: scale(1.05)
}

.news-box {
    overflow: visible
}

.news-items {
    display: flex
}

.news-item {
    width: 32%;
    padding: 0px;
    margin: 0px 2% 0 0
}

.news-item:nth-child(3n+3) {
    margin-right: 0px
}

.news-item:hover {
    box-shadow: 0 0 10px rgba(0,0,0,.3)
}

.news-item .news-item-text {
    transition: background .3s
}

.news-item>a {
    display: block;
    overflow: hidden
}

.pro-item .pro-item-tit a {
    display: block
}

.newcon .ptit {
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding: .625rem 0 2.1875rem 0;
    font-weight: var(--fontbold4);
    height: 1.875rem;
    color: #000000
}

.footer-tit {
    text-align: left
}

.footer-main {
    display: flex;
    justify-content: space-between
}

.footer-main>div {
    width: auto;
    max-width: 320px;
    margin: 0px;
    padding: 0px 15px
}

.footer-main>div:first-child {
    padding-left: 0px
}

.footer-main>div:last-child {
    padding-right: 0px;
    width: 300px
}

@media screen and (max-width:1200px) {
    .footer-main {
        flex-wrap: wrap
    }

    .footer-main>div:first-child {
        width: 100%;
        max-width: 100%;
        padding: 0px 0px 15px
    }

    .footer-main>div:nth-child(2) {
        padding-left: 0px
    }
}

@media screen and (max-width:640px) {
    .footer-main>div:nth-child(2),.footer-main>div:nth-child(3) {
        display: none
    }

    .footer-main>div:last-child {
        padding-left: 0px
    }
}

section.cate {
    padding: 70px 0px;
    background-color: var(--color);
    position: relative
}

section.cate .sec-title {
    color: #FFFFFF;
    font-size: 2.2em;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.2
}

section.cate .sec-con {
    color: #FFFFFF;
    font-size: 14px;
    margin: 20px 0px;
    text-align: center
}

.cate ul {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    justify-content: space-between
}

.cate .img-wrap {
    background-color: #F2F2F2;
    border-radius: 50%;
    height: 90%;
    left: 5%;
    overflow: hidden;
    position: absolute;
    top: 5%;
    width: 90%
}

.cate .img-wrap>img {
    display: block;
    height: 100%;
    transition: transform .3s ease;
    width: 100%
}

.cate-item {
    box-sizing: border-box;
    width: calc(25% - 60px)
}

.cate-item:hover img {
    transform: scale(1.05)
}

.cate-img {
    background-color: #FFFFFF;
    border-radius: 50%;
    padding-bottom: 100%;
    position: relative;
    width: 100%
}

.cate-img:after {
    border-bottom: 8px solid #84b93e;
    border-left: 8px solid #84b93e;
    border-color: #84b93e #84b93e transparent transparent;
    border-radius: 50%;
    border-style: solid;
    border-width: 8px;
    content: "";
    height: 98%;
    left: calc(1% - 8px);
    position: absolute;
    top: calc(1% - 8px);
    transform: rotate(135deg);
    width: 98%
}

.cate-img>.btn-more {
    -ms-flex-pack: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fcb54e;
    border-radius: 50%;
    bottom: 5%;
    color: #FFFFFF;
    display: -ms-flexbox;
    display: flex;
    font-weight: var(--fontbold6);
    height: 70px;
    justify-content: center;
    position: absolute;
    right: 5%;
    text-transform: uppercase;
    width: 70px;
    z-index: 9
}

.cate-name {
    color: #FFFFFF;
    display: block;
    font-family: Arial;
    font-weight: var(--fontbold6);
    margin-top: 38px;
    text-align: center;
    transition: transform .2s;
    width: 100%
}

.cate-name i {
    display: inline-block;
    transition: transform .2s;
    margin-left: 5px
}

.cate-name:hover i {
    transform: translateX(5px)
}

@media screen and (max-width:992px) {
    .cate-item {
        width: calc(50% - 20px);
        margin-bottom: 30px
    }

    .cate-name {
        margin-top: 20px
    }

    .cate ul {
        flex-wrap: wrap
    }
}

@media screen and (max-width:560px) {
    .cate-img>.btn-more {
        width: 50px;
        height: 50px;
        right: 2%;
        bottom: 2%
    }

    section.cate {
        padding: 40px 0px 10px
    }
}

h4.cate-h4, h4.pro-h4 {
    clear: both;
    font-weight: bold
}

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: 20px auto;
    padding: 0px;
    line-height: 1.6;
    box-sizing: border-box;
    max-width: 1350px
}

.prolist-content {
    clear: both;
    margin: 0px auto;
    padding: 0px;
    line-height: 1.6;
    box-sizing: border-box
}

.prolist-content .kche-wrap-width {
    padding-left: 0px!important;
    padding-right: 0px!important
}

.prolist-bottom {
    clear: both;
    margin: 20px auto;
    padding: 0px;
    line-height: 1.6;
    box-sizing: border-box;
    max-width: 1350px
}

.prolist-bottom a {
    text-decoration: underline
}

.prolist-bottom a:hover {
    color: var(--color)
}

.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: var(--fontbold6);
    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
}

article.blogcontent {
    clear: both;
    margin: 0px auto 40px;
    padding: 0px
}

article.blogcontent h2 {
    margin: 20px 0px 0px 0px;
    font-size: 24px;
    line-height: 1.3
}

article.blogcontent h3 {
    margin: 20px 0px 0px 0px;
    font-size: 22px;
    line-height: 1.3
}

article.blogcontent h4 {
    margin: 20px 0px 0px 0px;
    font-size: 20px;
    line-height: 1.3
}

article.blogcontent h5 {
    margin: 20px 0px 0px 0px;
    font-size: 18px;
    line-height: 1.3
}

article.blogcontent img {
    margin: 0px 0px 10px 0px;
    padding: 0px;
    max-width: 49%;
    margin-right: 1%;
    border: solid 1px #EEEEEE;
    vertical-align: top
}

article.blogcontent p {
    margin: 0px 0px 10px 0px;
    padding: 0px;
    line-height: 1.6
}

article.blogcontent p a {
    color: var(--color)
}

article.blogcontent p a:hover {
    text-decoration: underline
}

article.blogcontent ul {
    margin: 0px;
    padding: 5px 0px 0px 20px
}

article.blogcontent ul li {
    margin: 0px 0px 5px 0px;
    list-style-type: disc
}

.lang {
    z-index: 99999;
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 10px
}

.lang-icon {
    display: flex;
    align-items: center;
    height: 30px;
    border: none;
    cursor: pointer;
    font-size: var(--fontsize16);
    user-select: none;
    white-space: nowrap
}

.lang-icon img {
    width: 24px
}

.lang-icon span {
    position: relative;
    padding-right: 18px;
    color: var(--fontcolor);
    margin-left: 6px;
    font-size: 14px
}

.lang-icon span::before {
    content: "";
    position: absolute;
    right: 4px;
    top: 13px;
    width: 8px;
    height: 1px;
    background: #333333;
    transform: rotate(50deg)
}

.lang-icon span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 13px;
    width: 8px;
    height: 1px;
    background: #333333;
    transform: rotate(-50deg)
}

.lang-drop {
    position: absolute;
    top: calc(100% + 26px);
    right: 50%;
    transform: translateX(50%);
    background: #FFFFFF;
    border: 1px solid #EBEEF5;
    border-radius: var(--borderradius);
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,.1);
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s,top .3s
}

.lang-drop.lang-flex {
    transform: translateX(20%)
}

.lang-drop.active {
    visibility: visible;
    opacity: 1;
    top: calc(100% + 7px)
}

.lang-arrow {
    display: block;
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    border-top: 1px solid #EBEEF5;
    border-left: 1px solid #EBEEF5;
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    top: -6px;
    left: 50%
}

.lang-drop.lang-flex .lang-arrow {
    left: 79%
}

.lang-wrap {
    list-style: none;
    width: 140px;
    padding: 8px 0px;
    box-sizing: border-box
}

.lang-flex .lang-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 8px
}

.lang-wrap li {
    width: 100%;
    box-sizing: border-box;
    transition: background-color .3s
}

.lang-flex .lang-wrap li {
    width: 33.3333%
}

.lang-wrap li.lang-active,.lang-wrap li:hover {
    background-color: #EEEEEE
}

.lang-wrap li a {
    display: block;
    color: var(--fontcolor);
    font-size: 12px;
    padding: 10px 12px;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.lang-wrap li img {
    display: inline-block;
    width: 24px;
    height: 16px;
    vertical-align: -.25em;
    margin-right: 4px
}

@media (max-width:1024px) {
    .lang {
        transition: all .2s linear
    }

    .lang-icon img {
        width: 28px;
        filter: invert(70%)
    }

    .lang-icon span {
        display: none
    }

    .lang-drop {
        display: none
    }

    .lang-drop.lang-flex {
        position: fixed;
        width: 95%;
        right: auto;
        left: 50%;
        transform: translateX(-50%)
    }

    .lang-drop.lang-flex .lang-arrow {
        left: 84%
    }

    .lang-drop.lang-flex .lang-wrap {
        width: 100%
    }

    .lang-drop.active {
        display: block;
        top: calc(100% + 3px)
    }
}

.sidebar {
    margin-bottom: 30px
}

.sidebar-item {
    width: 100%;
    margin-bottom: 30px;
    position: relative
}

.sidebar-item.sidebar-search {
    background: #F1F1F1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: 20px 12px
}

.email-subscription {
    display: flex;
    flex-direction: column;
    width: 100%
}

.email-subscription input {
    font-size: 13px;
    width: 100%;
    outline: 0;
    border: 1px solid #CCCCCC;
    height: 40px;
    border-radius: 0;
    padding: 0 10px;
    transition: all .1s linear
}

.email-subscription button {
    margin-top: 10px;
    width: 100%;
    height: 40px;
    background: var(--color);
    color: #FFFFFF;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all .1s linear
}

.company-intro {
    border: none
}

.company-intro p {
    padding: 10px 12px 15px;
    border: 1px solid #EEEEEE;
    font-size: 14px
}

.sidebar-item .sidebar-list .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em
}

.sidebar-item .sidebar-list .item:last-child {
    margin-bottom: 0em
}

.sidebar-item .sidebar-list .item:hover .img img {
    transform: scale(1.02)
}

.sidebar-item .sidebar-list .item:hover .info .title {
    color: var(--color)
}

.sidebar-item .sidebar-list .item .img {
    width: 100px;
    height: 80px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 3px;
    overflow: hidden
}

.sidebar-item .sidebar-list .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .1s linear
}

.sidebar-item .sidebar-list .item .info {
    flex: 1;
    padding-left: 15px
}

.sidebar-item .sidebar-list .item .info .title {
    font-size: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.2;
    transition: all .1s linear
}

.sidebar-item .sidebar-list .item .info .more {
    font-size: 14px;
    margin-top: 4px;
    text-transform: capitalize;
    color: var(--color)
}

.blogflex {
    display: flex;
    align-items: flex-start;
    padding: 20px 12px;
    border: none;
    background: #F1F1F1
}

.blogflex .blogflex-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #EEEEEE;
    overflow: hidden
}

.blogflex .blogflex-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.blogflex .blogflex-info {
    flex: 1;
    padding-left: 10px
}

.blogflex .blogflex-info .blogflex-name {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700
}

.blogflex .blogflex-info .blogflex-content {
    font-size: 13px;
    line-height: 1.4;
    color: #666666;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 30;
    overflow: hidden
}

.main .common-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    width: 100%;
    height: 60px
}

.main .common-pages. span {
    opacity: .8
}

.main .common-pages a,.main .common-pages span {
    margin: 5px;
    padding: 8px 14px;
    color: var(--fontcolor);
    border: 1px solid #F9F9F9;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease
}

.main .common-pages a:hover,.main .common-pages span.ctxt {
    background: var(--color);
    color: #FFFFFF
}

.main .common-pages span.ctxt {
    opacity: 1;
    border: none
}
.common-pages .active a{
    color: #CCCCCC;
}