@charset "utf-8";


.cz-top-nav {width: 100%;margin: auto;position: relative;z-index: 100;}
.cz-top-nav-item {width: 76%;margin: auto;position: absolute;left:12%;top:-45px; z-index: 30;background: #fff;box-shadow: 0px 10px 50px 0px rgba(15, 23, 38, 0.1);}
.cz-top-nav-item a{display: block;overflow: hidden;padding:30px 3%;float: left;width:19%;position: relative;font-weight: 200}
.cz-top-nav-item a:last-child::after {display: none;}
.cz-top-nav-item a::after {content: '';width: 1px;height: 100%;position: absolute;right: 0;top: 0;background: #e6e8ed;}
.cz-top-nav-item strong{color: #666e80;font-size: 18px;padding: 0;display: block;width: 100%;}
.cz-top-nav-item p{color: #a1a7b2;font-size: 12px;padding:10px 0 0 0;margin: 0;}
.cz-top-nav-item i{display: block;width: 50px;height: 50px;position: absolute;right: 10%;top: 50%;margin-top: -22.5px;}
.cz-top-nav-item a:hover,.cz-top-nav-item a.cur{background: #c7437d;}
.cz-top-nav-item a:hover strong,.cz-top-nav-item a:hover p,.cz-top-nav-item a.cur strong,.cz-top-nav-item a.cur p {color: #fff;}
.cz-top-nav-item a:hover img,.cz-top-nav-item a.cur img,.cz-top-nav-item a:hover svg,.cz-top-nav-item a.cur svg,.cz-top-nav-item a.cur svg *,.cz-top-nav-item a:hover svg *{fill: #fff;}
.cz-top-nav-item a.cur p{opacity: .6;}
.cz-top-nav-item.num2 {width: 40%;left:30%;}
.cz-top-nav-item.num2 a {width:40%;padding:30px 5%;}
.cz-top-nav-item.num3 {width: 56%;left:22%;}
.cz-top-nav-item.num3 a {width:33.33333%;padding:30px 5%;text-align: center;}
.cz-top-nav-item.num4 {width: 76%;left:12%;}
.cz-top-nav-item.num4 a{width:25%;box-sizing: border-box;}
.cz-top-nav-item.num6 {width: 90%;width:calc(90% - 60px); left:5%;margin:0 30px;top: -75px;}
.cz-top-nav-item.num6 a {width:16.66666%;padding:30px 0;}
.cz-top-nav-item.num6 a i {left: 50%;right: auto;top:20%;margin-top: 0; margin-left: -25px;}
.cz-top-nav-item.num6 a strong {text-align: center;display: block;font-weight: normal;}
.cz-top-nav-two {width: 63%;left: 18.5%;margin:0;bottom: -104px;padding: 0 2.5%;position: absolute;background: #eef0f3;z-index: 20;}
.cz-top-nav-tow-nav {position: relative;overflow: hidden;display: none;}
.cz-top-nav-tow-nav.cur {display: block;}
.cz-top-nav-tow-nav a{font-size: 17px;color: #666e80;display: block;float: left;padding: 20px 0;margin-right: 40px;position: relative;}
.cz-top-nav-tow-nav a::after {content: '';position: absolute;left: 0;bottom: 0;width:0;height: 1px;background: #c7437d;transition:all .4s ease;}
.cz-top-nav-tow-nav a:hover::after {width: 100%;}
.cz-top-nav-item strong{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.cz-product-item .title-1 {font-size: 18px;line-height: 30px;}
.cz-top-nav-item.num2 {width: 40%;left:30%;}
.cz-top-nav-item.num3 {width: 63%;left:18.5%;overflow: hidden;text-align: center}
.cz-top-nav-item.num4 {width: 80%;left:10%;}
.cz-top-nav-item.num6 {width: 90%;width:calc(90% - 60px); left:5%;margin:0 30px;top: -75px;}
.case-study__area-2::before {
    position: absolute;
    content: '';/*background-image: url("../imgs/rose/dd.png");*/
    background-color: #a8396a;
    width: 100%;
    height: 20%;
    bottom: 0;
    z-index: 2
}
.footer__quick-link sub{bottom: .15rem;}
.jup{padding: 130px 0;}
.bg-sr1{background: url("../imgs/rose/sr1.jpg") no-repeat;background-position: top center;background-size: cover;  padding: 250px 0 150px;}
.bg-sr2{background: url("../imgs/rose/sr2.jpg") no-repeat;background-position: top center;background-size: cover;  padding: 150px 0 150px;}
.bg-sr3{background: url("../imgs/rose/sr3.jpg") no-repeat;background-position: top center;background-size: cover;  padding: 150px 0 150px;}
.bg-sr4{background: url("../imgs/rose/sr4.jpg") no-repeat;background-position: top center;background-size: cover;  padding: 150px 0 150px;}
.bg-sr5{background: url("../imgs/rose/sr6.jpg") no-repeat;background-position: top center;background-size: cover;  padding: 150px 0 150px;}
.ac {
    max-width: 95%;
    position: relative;
    z-index: 7
}
.widget__search.ss {
    padding: 0 2px 15px;
}
.concontent {
    position: relative;
    padding: 100px 0;
}
.conbox h1 {
    font-size: 20px;
    padding: 40px
}
.lg-b {
    display: block;
}
.sm-b {
    display: none;
}
.conbox.one {
    background: var(--primary);
}
.conbox.one h1 {
    color: #fff;
}
.blog__v2 {
    padding: 100px 0;
    background: #ebedf2
}
.newsh {
    padding: 100px 0
}
.a-container {
    max-width: 89%
}
.b-container {
    max-width: 80%
}
.bea {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}
.bealist {
    display: flex;
    justify-content: flex-start;
}
.bealist li {
}


.oco p,.oco span{color: #fff;
    text-align: justify;
    padding-right: 20%;
    padding-top: 20px;}

.bealist li a {
    padding: 20px 0;
    color: #999;
    transition: .3s ease;
    display: block;
    font-size: 20px;
    margin-right: 36px;
}
.bealist li a:hover, .bealist li a.cur {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}
.step__area.cc {
    overflow: visible;
}
.bealist li a.hx {
    color: var(--primary)
}
.occ {
    box-shadow: 5px 5px 25px rgba(62,63,67,.3)
}
.olo {
    position: relative;
    overflow: hidden;
    background: var(--primary) url(../imgs/rose/line-bg3.png) !important;
    background-position: bottom center;
    padding: 180px 0 80px;
}
.olo h1 {
    color: #fff;
    font-size: 42px;
}
.poo {
    position: relative;
    overflow: hidden;
    background: var(--primary) url(../imgs/rose/line-bg3.png) !important;
    background-position: bottom center;
    padding: 70px 10% 70px;
}
.poo.ki {
    position: relative;
    overflow: hidden;
    background: #31343a url(../imgs/rose/line-bg2.png) !important;
    background-position: bottom center;
    padding: 40px 10% 40px;
}
.kc h3 {
    color: #fff;
    font-size: 34px;
    padding-bottom: 10px;
}
.kc p {
    color: #8a92a3;
    font-size: 16px;
    font-family: 'HmRegular';

}
.poo h1 {
    color: #fff;
    font-size: 30px;
}
.cp li {
    color: #fff;
    padding-bottom: 30px;
}
.cp li:last-child {
    padding-bottom: 0;
}
.service__detail.poc {
    margin-top: 50px;
    padding-top: 80px;
    padding-bottom: 80px;
    background: #ebedf2;
}
.service__detail.poc.bg-white {
    background: #fff;
    padding-top: 15px;
    padding-bottom: 15px;
}
.linex {
    background: var(--primary);
    display: inline-block;
    width: 30px;
    height: 3px;
}
.hero__content-2.ab {
    padding-bottom: 30px;
}
.hero__content-2.ac p {
    max-width: 100%
}
.hero__area-2.ab p {
    font-size: 17px;
}
.hero__area-2.hon {
    padding: 120px 0 180px;
}
.hero__area-2.hii {
    padding: 80px 0 0;
}
.hero__area-2.hii.xx {
    padding-bottom: 120px;
}
.hero__area-2.ab h4 {
    color: var(--primary);
    font-size: 22px;
    padding-bottom: 10px;
}
.hero__area-2.his {
    background: url("../imgs/rose/hisbg.jpg") no-repeat;
    background-position: top center;
    background-size: cover;
    margin-top: 50px;
    padding-bottom: 350px
}
.ppb, .ppc {
    position: relative;
    border: 2px solid var(--primary);
    padding: 40px 40px 25px;
}
.ppb p, .ppc p {
    padding-top: 20px;
    padding-bottom: 0;
    text-align: justify;
    font-family: 'HmRegular';
    line-height: 1.7;
}
.ppb h2, .ppc h2 {
    text-align: left;
    font-size: 24px;
}
.ppc {
    margin-bottom: 30px;
}
.hisbox {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .8);
    /* background: url(../image/ssss.jpg) no-repeat; */
    background-size: cover;
    background-position: center center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px)!important;
    padding: 40px 40px;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(168,57,106,.4)
}
.hisbox h2 {
    font-size: 48px;
    margin-bottom: -10px;
}
.honbox {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .8);
    /* background: url(../image/ssss.jpg) no-repeat; */
    background-size: cover;
    background-position: center center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px)!important;
    padding: 20px 20px;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(168,57,106,.4);
    margin-bottom: 30px;
}
.hisbox h2 {
    font-size: 48px;
    margin-bottom: -10px;
}
.hisbox p {
    font-size: 24px;
    padding-top: 15px;
}
.features-bg-img {
    background-size: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    background-position: center center;
}
.pos-rel {
    position: relative;
}
.features-02-wrapper {
    padding: 80px 240px 100px 100px;
}
.features-02-wrapper.ll {
    padding: 180px 240px 180px 100px;
}
.border-right {
    border-right: 1px solid #ddd;
}
.features-02-wrapper .counter__content-2 {
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 30px;
    padding-top: 30px
}
.features-02-wrapper .counter__content-2 sub {
    font-size: 18px;
    top: -1.5rem;
    left: .2rem
}
.features-02-wrapper .counter__number {
    color: var(--primary);
    font-size: 48px;
    position: relative;
}
.features-02-wrapper .counter__content-2 p {
    color: #111;
    font-size: 24px;
}
.numbox {
    padding-top: 15px;
    text-align: center;
}
.numbox h2 {
    margin-bottom: -10px;
}
.skills-bg-img {
    background-size: cover;
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    width: 50%;
    background-position: center center;
}
.skills-wrapper {
    padding: 170px 199px 170px 201px;
}

@media (min-width: 1200px) and (max-width: 1500px) {
.features-02-wrapper {
    padding: 80px 105px 100px 64px;
}
.skills-wrapper {
    padding: 97px 80px 100px 65px;
}
.features-02-wrapper.ll {
    padding: 137px 80px 137px 65px;
}
}
.team__info-2.ww {
    background: #fff;
}
.border-bottom-1 {
    border-bottom: 1px solid #eee
}
.hero__area-2 {
    padding: 140px 0 50px
}
.case {
    position: absolute;
    color: #fff;
    text-align: center;
    top: 45%;
    transition: all 1.3s ease;
    opacity: 0;
    z-index: 55
}
.portfolio__slide-img::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0);
    opacity: 0;
    -webkit-transition: opacity .3s ease .3s, visibility .3s ease .3s;
    -moz-transition: opacity .3s ease .3s, visibility .3s ease .3s;
    transition: ease .3s
}
.portfolio__slide-img:hover::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    opacity: 1;
    z-index: 50
}
.portfolio__slide-img {
    overflow: hidden
}
.portfolio__slide-img img {
    transition: .3s ease;
    overflow: hidden
}
.portfolio__slide-img:hover img {
    webkit-transform: scale(1.07);
    transform: scale(1.07);
}
.portfolio__slide-img:hover .case {
    color: #fff;
    opacity: 1
}
.pi img {
    padding-right: 30px;
    height: 120px;
}
.hero__content-2 h2.pi {
    padding-bottom: 0
}
.case-study__area-2 {
    padding: 100px 0;
    position: relative
}
.gh {
    padding-bottom: 30px;
}
.gx {
    padding-bottom: 80px;
}
.box-shaow {
    -webkit-transition: -webkit-transform .3s ease, border .3s ease, -webkit-box-shadow .3s ease, background .3s ease, z-index .3s ease;
    -moz-transition: -moz-transform .3s ease, border .3s ease, -moz-box-shadow .3s ease, background .3s ease, z-index .3s ease;
    transition: transform .3s ease, border .3s ease, box-shadow .3s ease, background .3s ease, z-index .3s ease;
    -webkit-box-shadow: 0px 40px 100px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 40px 100px 0px rgba(0,0,0,0.15);
    -o-box-shadow: 0px 40px 100px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 40px 100px 0px rgba(0,0,0,0.15);
}
.box-shaow:hover {
    box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.08);
}
.qr {
    width: 160px;
    padding-top: 20px;
    display: block
}
.case-study__info-2 ul li {
    color: #333;
    font-family: 'HmRegular';
    padding-bottom: 5px;
    font-size: 18px;
}
.case-study__info-2 ul li i {
    color: var(--primary);
    padding-right: 5px;
}
.cp p {
    color: #fff;
    font-family: 'HmLight';
    padding-bottom: 20px;
}
.cp li p {
    padding-bottom: 0;
}
.case2 {
    position: relative
}
.case2 img {
    height: 406px;
}
.case2 h4 {
    font-family: 'HmRegular';
    color: #fff;
    position: absolute;
    z-index: 20;
    top: 29%;
    left: 36%;
    font-size: 75px;
}
.app p {
    color: #fff;
    font-size: 16px;
    font-family: 'HmRegular'
}
.app h3 {
    color: #fff;
    font-size: 44px;
    padding-right: 15px;
}
.app img {
    max-width: 350px
}
.appt {
    padding-top: 10px;
}
.appt {
    display: flex
}
.con {
    padding: 50px;
    z-index: 99;
    position: relative
}
.step__area::before {
    position: absolute;
    content: '';
    /* background-image: url(../imgs/rose/dd.png); */
    background-color: #31343a;
    width: 100%;
    height: 45%;
    bottom: 0;
    z-index: 0;
}
.step__content p {
    font-size: 24px;
    font-family: 'din';
    color: #7b7b7b
}
.step__content p.bb {
    font-size: 24px;
    font-family: 'din';
    color: var(--primary);
    font-weight: 600
}
.step__content p.cc {
    font-size: 24px;
    font-family: 'HmRegular';
    color: #7b7b7b
}
.step__content p.co {
    font-size: 20px;
    font-family: 'HmRegular';
    color: #7b7b7b
}
.footer__bottom-3 {
    padding: 20px 0 10px
}

@media(max-width:1800px) {
.features-02-wrapper {
    padding: 80px 140px 100px 100px;
}
.features-02-wrapper.ll {
    padding: 160px 140px 160px 100px;
}
.skills-wrapper {
    padding: 140px 100px 140px 140px;
}
}

@media(max-width:1600px) {
    .cz-top-nav-item.num3,.cz-top-nav-two{width: 80%;left: 10%;}
    .b-container{max-width: 90%}
.header__nav {
    padding-left: 0;
}
.case2 img {
    height: 432px;
}
.hero__slide-left p.text-white {
    font-size: 120px;
}
.hero__slide-left p {
    font-size: 34px;
}
.header__nav ul li a {
    font-size: 14px;
    padding: 18px 15px;
}
.hero__slide {
    padding: 200px 0 200px
}
.hero__slide-left h1.text-white {
    font-size: 50px;
    letter-spacing: 11px;
}
}

@media(max-width:1400px) {
    .breadcrumb__title{font-size: 55px;}
    .breadcrumb__area{padding: 220px 0 150px!important;}
    .case2 h4{top: 32%;left: 33%;font-size: 60px;}
    .case2 img{height: 350px;}
    .pi img{height: 100px;}
    .hero__content-2 h2{font-size: 28px;line-height: 1.1;}
    .case-study__tab-btns button{padding: 25px 30px;}
    .wc-btn-primary{font-size: 14px;padding: 10px 22px;}
.hero__area-2.ab {
    padding: 140px 0 140px
}
.features-02-wrapper {
    padding: 60px 30px 60px 30px;
}
.skills-wrapper {
    padding: 160px 33px 160px 30px;
}
.features-02-wrapper.ll {
    padding: 160px 33px 160px 30px;
}
.header__nav ul li a {
    padding: 18px 10px;
}
.hero__slide-left h1.text-white {
    font-size: 34px;
    letter-spacing: 15px;
    padding-bottom: 0
}
}

@media(max-width:1200px) {
.hero__slide-left p.text-white {
    padding-left: 0;
}
        .b-container{max-width: 98%}
}

@media(max-width:991px) {
.hero__area-2.ab.hii {
    padding: 40px 0 20px
}
.hero__area-2.his.ab {
    padding: 20px 0 150px;
}
.features-02-wrapper .counter__number {
    font-size: 38px;
}
.features-02-wrapper .counter__content-2 p {
    font-size: 16px;
}
.hero__area-2.ab {
    padding: 80px 0 60px
}
.features-02-wrapper, .skills-wrapper, .features-02-wrapper.ll {
    padding: 40px 10px 60px 10px
}
.skills-bg-img, .features-bg-img {
    height: 400px;
    position: static;
    width: 100%;
}
.app img {
    max-width: 100%;
}
.header__logo-2 img {
    width: 180px;
}

.case-study__area-4 {
    padding: 50px 0 50px
}
.hero__content-2 h2 {
    font-size: 24px;
}
.pi img {
    display: none
}
.case2 {
    display: none
}
.hero__content-2 p {
    max-width: 100%
}
.hero__area-2 {
    padding: 140px 0 240px;
}
}

@media(max-width:768px) {
    .oco p, .oco span{padding-right: 0;padding-bottom: 20px;}
    .team__info-2 p{font-size: 14px;}
    .team__area-4{padding: 80px 0 40px;}
    .cz-top-nav-item.num4 {width:90%;left: 5%;top: -103px;}
	.cz-top-nav-item.num4::before {content: '';width: 100%;height:1px;position: absolute;right: 0;top: 50%;background: #e6e8ed;}
	.cz-top-nav-item.num4 a {width: 50%;}
	.cz-top-nav-item i {width: 40px;position: relative;right: auto;top: auto;margin-top: auto;}
	.cz-top-nav-item p {display: none;}
	.cz-top-nav-item strong {font-size: 14px;text-align: center;}
	.cz-top-nav-item a {padding: 5%;}
	.cz-top-nav-item.num6 {width: 90%;width: calc(90% - 0px);left: 5%;margin:0px;top: -103px;}
	.cz-top-nav-item.num6::before {content: '';width: 100%;height:1px;position: absolute;right: 0;top: 50%;background: #e6e8ed;}
	.cz-top-nav-item.num6 a {width: 33.3333333%;padding: 5%;box-sizing: border-box;}
	.cz-top-nav-item.num6 a strong {padding-top: 0px;}
	.cz-top-nav-item.num6 a i { margin-left:0px;left: auto;margin: auto;top: auto;}
	.cz-top-nav-item.num6 a:nth-child(3)::after,.cz-top-nav-item.num4 a:nth-child(2)::after {display: none;}
	.cz-top-nav-item.num3 {width: 100%;left: 0;text-align: center;}
	.cz-top-nav-item.num2 {width: 90%;left:5%;}
	.cz-top-nav-item.num2 a {width: 40%;padding:5%;}
	.cz-top-nav-item i {margin: auto;}
	.cz-top-nav-two {display: none!important;}
    .breadcrumb__title{
        font-size: 36px;
        padding-bottom: 10px;
    }
    .olo h1{font-size: 36px;}
    .service__detail-thumb,.service__detail{padding-top: 0}
    .bg-sr1,.bg-sr2{padding: 150px 0 20px;}
    
    .bg-sr2,.bg-sr3,.bg-sr4,.bg-sr5{padding:100px 0 50px}
    .service__text{margin-left: 0;}
.hero__area-2.ini {
    padding: 80px 0 20px;
}
.lg-b {
    display: none;
}
.sm-b {
    display: block;
}
.footer__bottom-inner {
    display: block;
}
.footer__widget p {
    display: none
}
.hero__slide-left h1.text-white {
    font-size: 32px;
    padding-bottom: 30px;
}
.hero__slide-left p {
    font-size: 24px;
}
.hero__slide-left p.text-white {
    display: none;
}
.cc a strong {
    display: none;
}
.workflow__thumb {
    display: none;
}
.wc-btn-primary {
    font-size: 12px;
    padding: 10px 22px;
}
    .footer__widget img{max-width: 100%;}
    .step__area{display: none;}
    .about__area-3{padding: 80px 0 20px;}
    .case-study__area-2{padding: 30px 0;}
    .breadcrumb__area{padding: 190px 0 120px!important;}
    .ac{width: 100%;}
    .bealist li a{margin-right: 10px;font-size: 13px;}
    .olo{padding: 120px 0 40px}
    .olo h1{font-size: 24px;}
    .service__detail .container{padding: 0;}
    .poo,.poo.ki{padding: 30px 10px 40px;}
    .kc{padding-bottom: 10px;}
    .poo h1{display: none;}
    .ppb, .ppc{margin: 10px;padding: 20px;}
    .service__detail-title{margin: 10px;}
    .ppb h2, .ppc h2{font-size: 18px;}
    .kc h3{font-size: 20px;}
    .kc p{font-size: 16px;}
    .service__detail{padding-bottom: 0}
    .service__detail.poc{margin-top: 0;padding-top: 90px;}
    .offcanvas__logo img{max-width: 100%;}
}