@charset "utf-8";
/* banner */
.page-banner{position: relative; padding-top: 64px; overflow: hidden;}
.page-banner img{width: 100%;}

@media (max-width:640px) {
    .page-banner{padding-top: 50px;}
}

/* path */
.page-path{margin: 15px 0; height: 40px;line-height: 40px; display: flex;display: -webkit-box; display: -webkit-flex;  -webkit-align-items: center; align-items: center; justify-content: flex-end; overflow: hidden; color: #999; }
.page-path a{color: #999;}
.page-path b{display: inline-block; margin: 0 7px; width: 6px; height: 6px; border-top: 1px solid #777; border-right: 1px solid #777; transform: rotate(45deg);}
.page-path span{color:var(--default);}

/* @media (max-width:640px) {
	.page-path{display: none;}
} */
/* pagination */
.pagination{padding: 20px 0;}
.pagination ul{display: flex;display: -webkit-box; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; justify-content: center; align-items: center;}
.pagination ul li {width: 35px; height: 35px; line-height: 33px; }
.pagination ul li a,.pagination ul li span{display: block; margin: 0 2px; text-align: center;}


/* .pagination ul li span{display: inline-block; width: 8px; height: 8px;border: 1px solid #333; transform: rotate(45deg);} */
/* .pagination ul li:first-child a{padding-left: 3px;}
.pagination ul li:last-child a{padding-right: 3px;}
.pagination ul li:first-child span{border-top: none;border-right: none;}
.pagination ul li:last-child span{border-bottom: none;border-left: none;} */

.pagination ul li.active a,
.pagination ul li.active span,
.pagination ul li a:hover{background-color: var(--default); color: #fff;}
.pagination ul li a:hover span{border-color: #fff;}
/*  */
.nextpage{margin-top: 40px;padding-top: 20px;border-top: 1px solid #d7d7d7;}
.nextpage ul li{width: 50%; white-space: nowrap;}
.nextpage ul li a{margin: 0 2px;color: #656565;font-size: 12px;line-height: 30px;}
.nextpage ul li a:hover{color: var(--default);}

/* pages */
body{background-color: #f7f7f7;}
.pages-wrap{display: flex;}

.pages-left{width: 204px;}
.pages-right{ padding-left: 40px; flex: 1; width: 50%;}

@media (max-width:768px) {
    .pages-wrap{flex-wrap: wrap;}
    .pages-left,
    .pages-right{width: 100%; padding-left: 0; flex: auto;}
}

.aside-nav-title{padding-left: 20px; align-items: center; height: 100px;background: var(--default);}
.aside-nav-title{color: #fff;font-size: 24px;line-height: 24px;}
.aside-nav-current{border-left: 1px solid #eee; border-right: 1px solid #eee;}
.aside-nav-current ul li a{position: relative; display: block; padding: 10px 20px; line-height: 30px; color: #666; border-bottom: 1px solid #eee;}
.aside-nav-current ul li a::before,
.aside-nav-current ul li a::after{position: absolute; content: '';}
.aside-nav-current ul li a::before{top: 50%; right: 18px;margin-top: -8px;width: 16px;height: 16px;border-radius: 100%; background-color: #ccc;}
.aside-nav-current ul li a::after{top: 50%;right: 19px;margin-top: -4px;border-color: transparent transparent transparent #fff;border-style: solid;border-width: 4px;}

.aside-nav-current ul li:hover a,
.aside-nav-current ul li.on a{color: var(--default);}
.aside-nav-current ul li:hover a::before,
.aside-nav-current ul li.on a::before{background-color: var(--default);}

.aside-nav-current ul li:hover a,
.aside-nav-current ul li.current_page_item a[aria-current="page"]{color: var(--default);}
.aside-nav-current ul li:hover a::before,
.aside-nav-current ul li.current_page_item a[aria-current="page"]::before{background-color: var(--default);}

.aside-nav-current ul li.current_page_item a[aria-current="page"]{color: var(--default);}

@media (max-width:768px) {
    .aside-nav-title{ padding-left: 20px; height: 50px;}
    .aside-nav-title{color: #fff;font-size: 18px;line-height: 20px;}
    .aside-nav-current ul{display: flex; flex-wrap: wrap;}
    .aside-nav-current ul li{width: 33.33%; flex: auto;}
}

@media (max-width:480px) {
    .aside-nav-current ul li{width: 50%;}
}
/*  */
.aside-menu-random {margin-top: 45px;}
.aside-menu-random ul li a{position: relative; display: block; padding: 10px 20px 10px 40px; line-height: 30px; border-bottom: 1px solid #eee;}
.aside-menu-random ul li img{position: absolute; top: 8px; left: 0; width: 35px; height: 35px;}
.aside-menu-random ul li h3{ line-height: 18px; font-size: 12px; color: #828282;}
.aside-menu-random ul li h3 span{display: block; font-size: 12px; color: #bfbfbf;}

.aside-menu-random ul li a::before,
.aside-menu-random ul li a::after{position: absolute; content: '';}

.aside-menu-random ul li a::before{top: 50%; right: 18px;margin-top: -6px;width: 12px;height: 12px;border-radius: 100%; background-color: #ccc;}
.aside-menu-random ul li a::after{top: 50%;right: 19px;margin-top: -3px;border-color: transparent transparent transparent #fff;border-style: solid;border-width: 3px;}

.aside-menu-random ul li:hover a h3{color: var(--default);}
.aside-menu-random ul li:hover a::before{background-color: var(--default);}
@media (max-width:768px) {
    .aside-menu-random {margin-top: 25px;}
    .aside-menu-random ul{display: flex; flex-wrap: wrap;}
    .aside-menu-random ul li{width: 33.33%;}
}

@media (max-width:640px) {
    .aside-menu-random ul li{width: 50%;}
}

@media (max-width:480px) {
    .aside-menu-random ul li{width: 100%;}
/*    .aside-menu-random ul li a::before,
    .aside-menu-random ul li a::after{display: none;} */
}
/*  */
.aside-contact {margin-top: 45px;}
.aside-contact ul li a{position: relative; display: block; padding: 10px 20px 10px 40px; line-height: 30px; border-bottom: 1px solid #eee;}
.aside-contact ul li img{position: absolute; top: 8px; left: 0; width: 35px; height: 35px;}
.aside-contact ul li h3{ font-size: 12px; color: #828282;}
.aside-contact ul li p{ line-height: 20px; color: #777;}

@media (max-width:768px) {
    .aside-contact {display: none;}
}

/*  */
.pages-curcatagory{padding-bottom: 12px; border-bottom: 1px solid #cfcfcf;overflow: hidden;}
.pages-curcatagory h3 i{position: relative; vertical-align: middle; display: inline-block; margin: 0 11px 0 6px; width: 23px;height: 23px;}
.pages-curcatagory h3 i:before,
.pages-curcatagory h3 i:after { position: absolute;  content: ""; width: 15px; height: 15px; background: var(--default); opacity: 0.7;}
.pages-curcatagory h3 i:before{top: 0; left: 0;}
.pages-curcatagory h3 i:after {bottom: 0; right: 0;}
.pages-curcatagory h3 { font-size: 24px; line-height: 28px; color: #666;}

@media (max-width:768px) {
    .pages-curcatagory h3 { font-size: 20px; }
}



/* case */
.case ul {padding: 50px 0;}
.case ul li{padding: 25px 0; border-bottom: 1px solid #eee;}
.case-poster{display: block; width: 220px;}
.case-poster img{width: 100%;}

.case-content{flex: 1; padding-left: 40px;}
.case-content h3{ margin-bottom: 10px;}
.case-content span{display: block; color: #a2a2a2;font-size: 12px;padding-bottom: 20px;}
.case-content p{color: #a2a2a2;font-size: 12px; line-height: 20px;}

.case-content h3 a:hover{color: var(--default);}

@media (max-width:640px) {
    .case ul {padding: 20px 0;}
    .case-poster{ width: 120px;}
    .case-content{padding-left: 20px;}
    .case-content span{padding-bottom: 10px;}
}

@media (max-width:480px) {
    .case-poster{ width: 80px;}
    .case-content{padding-left: 15px;}
}

/*  */
.pages-swipers{ margin-top: 50px;}

.gallery-top .swiper-container  {margin-bottom: 15px !important;background-color: #eee;}
.gallery-top .gallery-top-img img {max-width: 100%;max-height: 100%;width: auto !important;height: auto !important;}
.gallery-top .swiper-slide h3 {padding: 10px 0 10px;color: #fff;line-height: 30px;text-align: center;}

.gallery-top .gallery-top-img {margin-top: 15px;height: 400px;display: flex;justify-content: center;align-items: center;}

@media(max-width:640px){
    .gallery-top .gallery-top-img {height: 300px;}
}


.gallery-thumbs .swiper-slide {width: 100px;height: 90px;opacity: 0.4;border: 2px solid transparent;}
.gallery-thumbs .swiper-slide-thumb-active {opacity: 1;border-color: var(--default);}
@media (max-width:768px) {
    .gallery-thumbs .swiper-slide {width: 50px;height: 50px;}
}



/* solution */
.solution {padding: 50px 0;}
.solution ul{flex-wrap: wrap; margin-left: -15px;}
.solution ul li{padding-left: 15px; width: 33.33%;}
.solution ul li a{display: block; width: 100%; padding-bottom: 15px;}
.solution ul li h3{line-height: 40px; font-size: 14px; text-align: center;}
.solution-poster{overflow: hidden;}
.solution-poster img{width: 100%;}

.solution ul li a:hover h3{color: var(--default);}

@media (max-width:1200px) {
    .solution ul li{ width: 50%;}
}

@media (max-width:1200px) {
    .solution {padding: 20px 0;}
}

@media (max-width:480px) {
    .solution ul li{ width: 100%;}
}



/* case-detail */
.case-detail-title { margin: 35px 0 25px; padding: 10px 15px ; text-align: center; background: #eee;}
.case-detail-title h3{margin-bottom: 5px; font-weight: bold;}
.case-detail-title p span{display: inline-block; margin: 5px; color: #666; }
.case-detail-content{margin-top: 25px; padding-bottom: 25px;font-size: 14px;color: #848484;}
.case-detail-content p {line-height: 1.5;}
.case-detail-content img {margin: 14px 0;height: auto;max-width: 100%;}

/*  */
.contact{margin-top: 25px; padding-bottom: 25px;}
.contact-info{line-height: 24px; color: #666;}

#contact-map{margin: 15px 0; height: 350px;}