/*
* name: common.css
* author: sourcenode.cn
* time: 2022-08-11
*/

/* font */

@font-face {
    font-family: 'aideepbold';
    src: url('../css/fonts/aideep-2.woff2') format('woff2'),
    url('../css/fonts/aideep-2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*################ tools ################*/
.red { margin-right: 6px; color: #f00;}
.display-flex { display: flex; display: -webkit-flex;}
.justify-center { justify-content: center; -webkit-justify-content: center;}
.justify-between { justify-content: space-between; -webkit-justify-content: space-between;}
.justify-around { justify-content: space-around; -webkit-justify-content: space-around;}
.align-center { align-items: center; -webkit-align-items: center;}
.pos-center { left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.transition-300ms { transition: all ease 0.3s; -webkit-transition: all ease 0.3s;}


/*################ common ################*/
.icon { display: block;}
.logo { display: block; width: 250px; height: 60px; background: url("../static/images/logo.png") no-repeat; background-size: 100% 100%;}

/*################ global ################*/

/*header*/
.header { position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: 147px; background-color: #fff;}
.top-bar { height: 43px; background-color: #fff; border-bottom: #f4f4f4 solid 1px;}
.top-bar .bar-right { position: initial;}
.bar-ele { height: 43px;}
.language { position: relative;}
.language:hover .select-language{ display: block;}
.select-language { display: none; position: absolute; top: 43px; width: 100px; background-color: #fff; border-bottom: #0e6434 solid 1px; box-shadow: 0 0 5px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);}
.select-language li { height: 40px; line-height: 40px; text-align: center;}
.select-language li:nth-child(1) { border-bottom: #f4f4f4 solid 1px;}
.mobile-end { position: relative;}
.mobile-end:hover .mobile-entrance{ display: block;}
.mobile-entrance { display: none; position: absolute; top: 43px; width: 110px; height: 110px; padding: 6px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);}

/*导航第一层*/
.nav-bar { height: 103px; background-color: #fff;}
.nav-right { height: 103px;}
.nav { max-width: 860px; margin-right: 42px; font-size: 20px;}
.nav li { position: relative;}
.nav>ul>li { height: 103px; margin: 0 32px;}
.nav>ul>li>a { display: block; position: relative; height: 50px; padding: 0 1px; margin-top: 26px; line-height: 50px;}
.nav>ul>li>a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #0e6434; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; transform: scaleX(0); -webkit-transform: scaleX(0);}
.nav>ul>li:hover>a { color: #0e6434;}
.nav>ul>li:hover>a::after { transform: scaleX(1); -webkit-transform: scaleX(1);}
.nav>ul>li.cur>a { color: #0e6434;}
.nav>ul>li.cur>a::after { transform: scaleX(1); -webkit-transform: scaleX(1);}

/*导航第二层*/
.sub-nav { display: none; position: absolute; top: 93px; width: 180px; padding: 20px 0; background-color: #fff; border-bottom: #0e6434 solid 2px; box-shadow: 0 0 14px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 14px rgba(0,0,0,0.1);}
.sub-nav .n-text { width: 100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.sub-nav>ul li { position: relative; padding: 0 30px;}
.sub-nav>ul>li a{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; line-height: 52px;}
.sub-nav .iconfont { position: relative; top: 2px; font-size: 14px; font-weight: bold; transition: all ease 0.3s; -webkit-transition: all ease 0.3s;}
.sub-nav>ul>li:hover>a { color: #0e6434;}
.sub-nav>ul>li:hover>a .iconfont { transform: translateX(3px); -webkit-transform: translateX(3px);}
.nav>ul>li:hover .sub-nav{ display: block;}

/*导航第三层*/
.third-nav { display: none; position: absolute; left: 170px; top: 0; width: 180px; padding: 20px 0; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-bottom: #0e6434 solid 2px;}
.third-nav>ul>li:hover>a { color: #0e6434;}
.third-nav>ul>li:hover>a .iconfont { transform: translateX(3px); -webkit-transform: translateX(3px);}
.sub-nav>ul>li:hover .third-nav { display: block;}

/*导航第四层*/
.forth-nav { display: none; position: absolute; left: 170px; top: 0; width: 160px; padding: 20px 0; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-bottom: #0e6434 solid 2px;}
.third-nav>ul>li:hover .forth-nav { display: block;}

.search { width: 40px; height: 40px; margin-right: 16px; background: #f4f4f4; border-radius: 50%; cursor: pointer;}
.contact-us a { display: block; width: 105px; height: 40px; background-color: #0e6434; border-radius: 20px; color: #fff; font-size: 16px; line-height: 40px; text-align: center;}
.contact-us a:hover { color: #f8f8f8;}
.mobile-tb { display: none; margin-left: 36px; cursor: pointer;}
.mobile-tb .iconfont{ font-size: 26px; line-height: 40px;}

/*mobile-nav*/
.mobile-nav{ display: none; position: fixed; left: 0; top: 147px; z-index: 999; width: 100%; height: calc(100vh - 147px); background-color: rgba(0,0,0,0.5); box-shadow: 0 0 20px rgba(0,0,0,0.1);}
.side-nav{ position: absolute; right: 0; top: 0; width: 100%; height: 100%; background-color: #fff; overflow: hidden;}
.side-nav>ul{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all ease 0.3s;}
.side-nav>ul.cur{ left: -100%;}
.side-nav>ul>li{ display: block;}
.side-nav>ul>li>a{ display: block; height: 82px; padding: 0 24px; border-bottom: #f7f7f7 solid 1px; font-size: 20px; line-height: 82px;}
.side-nav li i{ font-size: 20px;}

.mobile-sub-nav{ display: none; position: absolute; right: -100%; top: 0; width: 100%; height: calc(100vh - 147px); background-color: #fff;}
.return-item>a{ display: block; height: 82px; padding: 0 24px; border-bottom: #f7f7f7 solid 1px; font-size: 20px; line-height: 82px;}
.mobile-sub-nav ul{ height: calc(100% - 82px); background-color: #f8f8f8; overflow-y: scroll;}
.mobile-sub-nav ul li>a{ display: block; height: 82px; padding: 0 24px; border-bottom: #f7f7f7 solid 1px; font-size: 20px; line-height: 82px;}


/*g-main*/
.main-pro { /*margin-top: 72px;*/}
.main-about { height: 842px; margin-top: 70px; background-image: url("../static/images/about_bg.jpg"); background-position: center center;}
.main-news { margin-top: 20px; padding-bottom: 80px;}
.main-solution { padding-top: 20px; padding-bottom: 80px; background-color: #f7f7f7;}

/*footer*/
.footer { height: 529px; background: url("../static/images/footer_bg.png") no-repeat center top;}
.footer-part { height: 426px;}
.footer-part .company-info { padding-top: 84px;}
.company-slogan { margin-top: 36px; font-size: 36px; color: #68951f;}
.other-contact { width: 134px; margin-top: 36px;}

.footer-nav { width: 900px; padding-top: 85px;}
.part-item { width: 252px; padding-top: 26px; border-top: #7d7d7d solid 2px;}
.footer-nav .part-title { font-size: 24px; color: #fff; font-weight: normal;}
.footer-nav .part-list { padding-top: 30px; color: #7d7d7d; font-size: 16px; line-height: 32px;}
.footer-nav a { color: #7d7d7d;}
.footer-nav a:hover { color: #68951f;}
.phone-num { margin-top: 14px; font-family: aideepbold; font-size: 31px; color: #fff;}
.more-type { height: 36px; margin-top: 10px; font-size: 18px; color: #68951f;}
.more-type a { color: #68951f;}
.more-type .iconfont { display: inline-block; margin-left: 18px; color: #fff; font-size: 30px; transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg);}
.more-type:hover .iconfont { transform: translateX(4px) rotateZ(90deg); -webkit-transform: translateX(4px) rotateZ(90deg);}

.footer-copyright { height: 103px; background-color: rgba(0,0,0,0.3); color: #7f8486; font-size: 16px;}
.footer-copyright a { color: #7f8486;}
.footer-copyright a:hover { color: #68951f;}
.copyright-wrap { height: 103px;}


/* inner-main */
.inner-main { padding-top: 58px; padding-bottom: 82px; background-color: #f4f5f6;}
.part-left { position: relative; top: 0; width: 308px; transition: all ease 0.3s; -webkit-transition: all ease 0.3s;}
.fixed { position: fixed; top: 164px; z-index: 99;}
.aside-nav { padding: 28px 14px 28px 52px; background-color: #fff;}
.aside-nav .nav-wrap{ position: relative;}
.aside-nav .nav-wrap::before { content: ""; position: absolute; left: 0; top: 18px; width: 4px; height: calc(100% - 36px); background-color: #eee;}
.aside-nav li { position: relative; padding-right: 20px;}
.aside-nav li a { width: 222px; padding-left: 32px; font-size: 20px; line-height: 72px;}
.aside-nav .nav-wrap>ul>li.cur>a,
.aside-nav .nav-wrap>ul>li:hover>a{ color: #0e6434;}
.aside-nav li.has-line::before { content: ""; position: absolute; left: 0; top: 18px; width: 4px; height: 36px; background-color: #0e6434; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; transform: scaleY(0); -webkit-transform: scaleY(0);}
.aside-nav li.has-line.cur::before,
.aside-nav li.has-line:hover::before { transform: scaleY(1); -webkit-transform: scaleY(1);}
.aside-nav li .iconfont { font-weight: bold; transition: all ease 0.3s; -webkit-transition: all ease 0.3s;}
.aside-nav .nav-wrap>ul>li.cur>a .iconfont,
.aside-nav .nav-wrap>ul>li:hover>a .iconfont { color: #0e6434; transform: translateX(6px); -webkit-transform: translateX(6px);}
.sub-aside-nav { display: none; position: absolute; left: 100%; top: 0; z-index: 9; padding: 28px 14px 28px 34px; background-color: #fff; box-shadow: 0 0 14px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 14px rgba(0,0,0,0.1);}
.aside-nav .nav-wrap>ul>li:hover>.sub-aside-nav { display: block;}
.sub-aside-nav li a { width: 160px; padding-left: 0;}
.sub-aside-nav li.cur>a,
.sub-aside-nav li:hover>a { color: #0e6434;}
.sub-aside-nav li.cur>a .iconfont,
.sub-aside-nav li:hover>a .iconfont { color: #0e6434; transform: translateX(6px); -webkit-transform: translateX(6px);}
.sub-aside-nav li:hover .sub-aside-nav{ display: block;}

.part-right { width: 1110px;}
.part-right.little { width: 1014px;}
.part-right .part-title { width: 100%;}
.part-right .part-title .title-left { position: relative; padding-left: 32px; font-size: 36px; line-height: 1;}
.part-right .part-title .title-left::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 36px; background-color: #0e6434; transform: translateY(-50%); -webkit-transform: translateY(-50%);}


/*################ module ################*/

/*search-layer*/
.search-layer{ display: none; position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: 300px; background-color: #fff;}
.header.cur .search-layer{ top: 35px;}
.search-layer .layer-content{ padding: 80px 0 0;}
.search-layer .layer-title{ font-size: 32px; color: #0e6434; text-align: center;}
.search-layer .search-box{ position: relative; width: 800px; margin: 40px auto;}
.search-layer .input-search{ width: 100%; height: 48px; padding-right: 80px; border-width: 0; border-bottom: #666 solid 1px; font-size: 16px;}
.search-layer .input-search::placeholder{ color: #999;}
.search-layer .input-search:focus{ border-width: 0; border-bottom: #0e6434 solid 1px; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none;}
.btn-search{ position: absolute; right: 0; top: 0; width: 48px; height: 48px; background-color: transparent; border: none; outline: none; color: #333; text-align: center;}
.btn-search:hover { background-color: transparent; border: none; outline: none; color: #000;}
.btn-search i{ font-size: 30px; line-height: 48px;}
.btn-close{ position: absolute; right: 0; top: 0; width: 60px; height: 60px; background-color: #0e6434; text-align: center;}
.btn-close i{ font-size: 20px; color: #fff; line-height: 60px;}

/*btn-go*/
.btn-go { width: 125px; height: 48px;}
.get-more { font-size: 18px;}
.get-tb { width: 40px; height: 18px; margin-top: 4px; background-color: #0e6434; border-radius: 9px;}
.btn-go:hover .icon-right,
.get-tb:hover .icon-right { transform: translateX(3px); -webkit-transform: translateX(3px);}

/*part-bar*/
.bar-left { position: relative;}
.left-text { font-size: 36px; line-height: 48px; font-weight: bold;}
.left-text::after { display: none; content: ""; width: 56px; height: 2px; margin-left: 30px; background-color: #0e6434;}
.text-pic { position: absolute; top: -42px; left: 0;}

/*part-content*/
.part-content { margin-top: 44px;}

/*show-video-container*/
.show-video-container { display: none; position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background-color: #fff;}
.video-container { padding: 40px; height: 100%;}

/*show-pic-container*/
.show-pic-container { display: none; position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background-color: #fff;}
.pic-container { padding: 40px; height: 100%;}
.pic-container img { height: 100%;}

/* inner-banner */
.inner-banner { position: relative; width: 100%; overflow: hidden;}
.inner-banner-pic img { width: 100%;}
.inner-banner-text { position: absolute; left: 0; top: 50%; width: 100%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); text-align: center;}
.column-name { color: #fff; font-size: 36px; font-weight: normal; line-height: 56px;}

/* select-box */
.select-box { color: #999; font-size: 18px;}
.select-item { position: relative; line-height: 36px; cursor: pointer;}
.select-box em { margin: 0 22px;}
.select-box em:last-child { display: none;}
.select-box .iconfont { margin-left: 28px;}
.select-box .option-list { display: none; position: absolute; left: 50%; top: 100%; z-index: 9; padding: 20px 40px; border-bottom: #0e6434 solid 2px; background-color: #fff; box-shadow: 0 0 14px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 14px rgba(0,0,0,0.1); transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.select-item:hover .option-list { display: block;}

/* contact-form */
.contact-form { padding: 0 64px;}
.contact-form .title { font-size: 36px; font-weight: bold;}
.contact-form .title::after { display: none; content: ""; width: 48px; height: 2px; margin-left: 28px; background-color: #0e6434;}
.contact-form .des { margin-top: 24px; color: #666; font-size: 18px; text-align: center;}
.form-list { flex-wrap: wrap; -webkit-flex-wrap: wrap; width: 100%; padding-top: 42px;}
.form-item { width: 45%; height: 60px; margin-top: 20px; border-bottom: #e0e0e0 solid 1px; font-size: 18px; line-height: 60px; transition: all ease 0.3s; -webkit-transition: all ease 0.3s;}
.form-item:nth-child(5),
.form-item:nth-child(6) { height: 84px; padding-top: 24px; border-bottom: none;}
.form-item:hover { border-color: #0e6434;}
.form-item input { width: 70%; height: 40px; border: none; font-size: 18px;}
.form-item input[type="text"]:focus,
.form-item input[type="text"]:active { outline: none; border: none; box-shadow: none; -webkit-box-shadow: none;}
.form-item input[type="text"].user-code { width: 172px; height: 48px; padding: 0 1em; border: #e7e7e7 solid 1px;}
.form-item input[type="text"].user-code:active,
.form-item input[type="text"].user-code:focus { border:#0e6434 solid 1px;}
.check-code { width: 158px; height: 48px; margin-left: 16px;}
.btn-submit { width: 210px; height: 58px; background-color: #0e6535; border-radius: 12px; color: #fff; font-size: 24px;}
.btn-submit:hover { background-color: #0c793d;}
.btn-submit:active { background-color: #074d26;}
.icon-submit { margin-right: 20px;}

/* part-content */
.part-right .part-content { padding: 56px 48px; background-color: #fff; font-size: 16px; line-height: 30px;}
.part-right .part-content img { width: 100%; margin: 2em 0;}
.part-right .part-content p{ margin-bottom: 1em;}

/* theme */
.theme { text-align: center;}
.theme h3 { font-size: 36px; line-height: 58px;}
.theme p { color: #666; font-size: 18px; line-height: 36px;}

/* page-num */
.page-num{ padding-top: 30px; text-align: center; font-size: 0; line-height: 0;}
.page-num a{ display: inline-block; padding: 0 20px; margin: 0 4px; font-size: 14px; line-height: 32px; border: #e8e8e8 solid 1px;}
.page-num a.cur{ pointer-events: none; background-color: #0e6434; border-color: #0e6434; color: #fff;}


/*################ unit ##################*/
.icon-tel { width: 16px; height: 16px; background: url("../static/images/icon_tel.png") no-repeat;}
.icon-email { width: 16px; height: 16px; background: url("../static/images/icon_email.png") no-repeat;}
.icon-map { width: 21px; height: 13px; background: url("../static/images/icon_map.png") no-repeat;}
.icon-down { width: 10px; height: 6px; background: url("../static/images/icon_down.png") no-repeat;}
.icon-mobile { width: 16px; height: 16px; background: url("../static/images/icon_mobile.png") no-repeat;}
.icon-search { width: 18px; height: 18px; background: url("../static/images/icon_search.png") no-repeat;}
.icon-right { width: 14px; height: 7px; background: url("../static/images/icon_right.png") no-repeat; background-size: 14px 7px;}
.icon-to { width: 34px; height: 17px; background: url("../static/images/icon_to.png") no-repeat;}
.icon-shop { width: 32px; height: 32px; background: url("../static/images/icon_shop.png") no-repeat; background-size: 32px 32px;}
.icon-phone { width: 36px; height: 36px; background: url("../static/images/icon_phone.png") no-repeat; background-size: 36px 36px;}
.icon-submit { width: 32px; height: 32px; background: url("../static/images/icon_submit.png") no-repeat; background-size: 32px 32px;}

.add-up::before { content: ""; position: absolute; left: 50%; top: -6px; width: 0; height: 0; margin-left: -6px; border-left: transparent solid 6px; border-bottom: #ccc solid 6px; border-right: transparent solid 6px;}

/*crumbs*/
.crumbs { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; color: #fff; font-size: 18px;}
.crumbs a { color: #fff;}
.crumbs a:hover { color: #f0f0f0;}
.icon-home { font-size: 20px;}
.icon-next { margin-right: 24px; margin-left: 24px; font-size: 12px;}
.crumbs .wrap>.iconfont:last-child { display: none;}

/*tag*/
.tag-item { display: block; height: 28px; padding: 0 14px; border-radius: 2px; font-size: 16px; line-height: 28px; text-align: center;}
.tag-column { margin-right: 16px; background-color: #0e6535; color: #fff;}
.tag-time { background-color: #fff;}

/*btn-play*/
.btn-play { text-align: center;}
.btn-play .dot { position: relative; z-index: 5; display: inline-block; cursor: pointer; width: 77px; height: 77px; background: url("../static/images/play.png") no-repeat center center;}
.btn-play .dot:after { content: ""; position: absolute; top: -11.5px; left: -11.5px; width: 100px; height: 100px; -webkit-box-shadow: inset #fff 0 0 40px; box-shadow: inset #fff 0 0 40px; border-radius: 50%; opacity: 0; -webkit-animation: warn-2 2s ease-out 1.1s infinite; animation: warn-2 2s ease-out 1.1s infinite;}
.btn-play .dot:before { content: ""; position: absolute; top: 0; left: 0; width: 77px; height: 77px; box-shadow: inset #fff 0 0 40px; border-radius: 50%; opacity: 0; -webkit-animation: warn 2s ease-out .1s infinite; animation: warn 2s ease-out .1s infinite;}

/*btn-shop*/
.btn-shop { width: 210px; height: 58px; background-color: #0e6535; border-radius: 12px; font-size: 24px; color: #fff;}
.btn-shop:hover { color: #f0f0f0;}
.btn-shop .icon { margin-right: 16px;}

/*btn-tel*/
.btn-tel { height: 58px; font-family: aideepbold; font-size: 32px;}
.btn-tel .icon { margin-right: 16px;}

/* btn-return */
.btn-return { width: 182px; height: 54px; border: #0e6535 solid 1px; border-radius: 3px; color: #666; font-size: 24px;}
.btn-return .iconfont { position: relative; top: 2px; margin-right: 12px; color: #666; font-size: 24px;}
.btn-return:hover .iconfont { color: #0e6535;}

@-webkit-keyframes warn {
    0% { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
    5% { opacity: 1}
    to { opacity: 0; -webkit-transform: scale(2); transform: scale(2)}
}
@keyframes warn {
    0% { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
    5% { opacity: 1}
    to { opacity: 0; -webkit-transform: scale(2); transform: scale(2)}
}

@-webkit-keyframes warn-2 {
    0% { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
    5% { opacity: 8}
    to { opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4)}
}
@keyframes warn-2 {
    0% { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
    5% { opacity: 8}
    to { opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4)}
}
