﻿.homepageBanner{width:100%;height:100%}
.homepageKv{position:fixed;left:0;top:0;width:100%}
.homepageKv .swiper-wrapper{width:100%;height:100%}
.homepageKv .swiper-slide{background-repeat:no-repeat;background-position:center center;background-size:cover;background-image:url(../images/redkylin-homepage_banner1.jpg);width:100%;height:100%}
.homepageKv .swiper-slide:before{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(38,43,52,.75);content:''}
.bannerKv_txtBox{position:absolute;color:#fff;text-align:center;margin-top:-4%}
.bannerKv_txtBox .titleName{font-size:18px;letter-spacing:30px;padding-left:30px}
.bannerKv_txtBox .line{height:1px;width:60px;margin-top:30px;background-color:#df3739;margin-left:auto;margin-right:auto}
.bannerKv_txtBox .desc{font-size:36px;margin-top:40px;border:solid 1px #fff;padding:25px 40px 25px 40px;font-weight:700;letter-spacing:5px;white-space:nowrap}
.bannerKv_txtBox .desc .focusIcon{-webkit-animation:focusIcon 1s 0s infinite linear both;-moz-animation:focusIcon 1s 0s infinite linear both}
.homepageKv .swiper-pagination-bullet{width:20px;height:8px;border-radius:0;background-color:transparent;border-bottom:solid 1px #fff;opacity:.8;transition:width .4s,opacity .4s,background-color .4s,border-color .4s;-moz-transition:width .4s,opacity .4s,background-color .4s,border-color .4s;-webkit-transition:width .4s,opacity .4s,background-color .4s,border-color .4s;-o-transition:width .4s,opacity .4s,background-color .4s,border-color .4s}
.homepageKv .swiper-pagination-bullet:hover{border-color:#dc2124}
.homepageKv .swiper-pagination-bullet-active{opacity:.8;border-color:#dc2124;width:40px}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:20px}
.swiper-button-next,.swiper-button-prev,.swiper-container-rtl .swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:none!important;color:#fff;font-size:48px;width:48px;height:48px;-webkit-transform:translateX(0);transition:-webkit-transform .4s,opacity .4s;-moz-transition:-webkit-transform .4s,opacity .4s;-webkit-transition:-webkit-transform .4s,opacity .4s;-o-transition:-webkit-transform .4s,opacity .4s;opacity:.3}
.swiper-button-prev{-webkit-transform:translateX(0);left:2%;display:none}
.swiper-button-prev:hover{-webkit-transform:translateX(-20%);opacity:.5}
.swiper-button-next{-webkit-transform:translateX(0);right:2%;display:none}
.swiper-button-next:hover{opacity:1;-webkit-transform:translateX(20%)}
.downLine{width:20px;height:15%;position:absolute;left:50%;bottom:15%;cursor:pointer}
.downLine .line{width:1px;height:100%;margin-left:auto;margin-right:auto;background-color:#fff;-webkit-transition:height .4s;transition:height .4s}
.downLine:hover .line{height:150%}
.kvBtnList .active{color:#df3739;background-color:#fff;border-color:#fff;overflow:visible}
.kvBox{position:absolute;left:0;top:0;z-index:2;width:100%;height:100%}
.downTips{position:absolute;font-size:32px;width:32px;height:32px;bottom:20px;left:50%;z-index:1;color:#fff!important;opacity:.3}
.caseGallery{background-color:#FFF;padding-right:4%;padding-left:4%;padding-top:55px;overflow:hidden;position:relative;z-index:2;padding-bottom:60px}
.caseGalleryTagNavBox{position:fixed;left:0;top:70px;width:100%;background-color:rgba(255,255,255,1);padding-left:4%;padding-right:4%;padding-top:20px;padding-bottom:20px;display:none;z-index:1000;-webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);-moz-box-shadow:0 3px 5px rgba(0,0,0,.2);box-shadow:0 3px 5px rgba(0,0,0,.2);border-top-width:1px;border-top-style:solid;border-top-color:#eaeaea}
.caseGalleryTagNavBox .tabNav,.case_caseGallery .tabNav{margin-top:0}
.tabNav{height:50px;border:1px solid #eaeaea;overflow:hidden;margin-top:60px}
.tabNav li{line-height:50px;text-align:center;color:#333;float:left;font-size:14px;width:25%}
.tabNav li a{color:#333;width:100%;display:block;border-right-width:1px;border-right-style:solid;border-right-color:#eaeaea}
.tabNav li a:hover{color:#df3739}
.tabNav li .current{background-color:#df3739!important;color:#fff!important}
.gallery{margin-top:30px}
.gallery .hpCaseRightList{float:left;width:50%}
.gallery .item{float:left;width:50%;display:block}
.gallery .lines{position:absolute;width:100%;height:100%;left:0;top:0}
.gallery .item .pic{position:relative;display:block;background:#fff;width:100%;overflow:hidden}
.gallery .item .pic img{width:100%;-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);-webkit-transform-origin:center center;-moz-transform-origin:center center;transition:transform .4s,-webkit-filter .4s,opacity .4s;-moz-transition:-moz-transform .4s,-moz-filter .4s,opacity .4s;-webkit-transition:-webkit-transform .4s,-webkit-filter .4s,opacity .4s;-o-transition:-o-transform .4s,-o-filter .4s,opacity .4s}
.gallery .item .pic .describe{height:50px;width:100%;position:absolute;left:0;bottom:0;background-color:rgba(0,0,0,.75);color:#999;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transform:translateY(100%);transition:transform .4s;-moz-transition:-moz-transform .4s;-webkit-transition:-webkit-transform .4s;line-height:50px;text-align:center}
.gallery .item:hover img{-webkit-filter:grayscale(0);-moz-filter:grayscale(0);-ms-filter:grayscale(0);-o-filter:grayscale(0);opacity:1}
.gallery .item:hover .pic .describe{-webkit-transform:translateY(0)}
.gallery .item .name{font-size:16px;color:#333;height:60px;text-align:center;line-height:60px;background-color:#fff;transition:background-color .4s,color .4s;-moz-transition:background-color .4s,color .4s;-webkit-transition:background-color .4s,color .4s;-o-transition:background-color .4s,color .4s}
.gallery .item:hover .name{background-color:#df3739;color:#fff}
.hp_serviceList{background-color:#fff;position:relative;min-height:675px;width:100%;overflow:hidden;z-index:2}
.hp_serviceList ul{width:100%;height:100%}
.hp_serviceList li{background-repeat:no-repeat;background-position:center center;background-size:cover;background-image:url(../images/banner_web.jpg);width:50%;height:50%;float:left;overflow:hidden;position:relative;/*-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);*/transition:all .4s;-moz-transition:all .4s;-webkit-transition:all .4s;-o-transition:all .4s;}
.hp_serviceList li:before{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(38,43,52,.9);content:'';transition:background-color .4s ease;-moz-transition:background-color .4s ease;-webkit-transition:background-color .4s ease;-o-transition:background-color .4s ease}
.hp_serviceList li a{position:absolute;left:0;top:0;z-index:1;color:#fff;font-size:14px;width:100%;height:100%;display:block}
.hp_serviceList li .item{position:absolute;left:8%;bottom:16%}
.hp_serviceList li .pic{max-width:90px;width:50%;transition:margin-top .4s ease;-moz-transition:margin-top .4s ease;-webkit-transition:margin-top .4s ease;-o-transition:margin-top .4s ease}
.hp_serviceList li a .txt .title{font-size:16px;letter-spacing:5px;margin-top:15px;width:90px;text-align:center}
.hp_serviceList li a .txt .line{height:1px;width:90px;background-color:#fff;transition:transform .4s,margin .4s;-moz-transition:-moz-transform .4s,margin .4s;-webkit-transition:-webkit-transform .4s,margin .4s;-o-transition:-o-transform .4s,margin .4s;-webkit-transform:scaleX(0);margin-bottom:0;margin-top:0}
.moreline{height:1px;width:16%;background-color:#fff;transition:transform .4s,margin .4s;-moz-transition:-moz-transform .4s,margin .4s;-webkit-transition:-webkit-transform .4s,margin .4s;-o-transition:-o-transform .4s,margin .4s;position:absolute;right:8%;bottom:16%}
.hp_serviceList li a .txt .desc{line-height:24px;height:0;opacity:0;overflow:hidden;transition:opacity .4s,height .4s,;-moz-transition:opacity .4s,height .4s;-webkit-transition:opacity .4s,height .4s;-o-transition:opacity .4s,height .4s}

.hp_serviceList li:hover{background-size:cover;/*-webkit-filter:grayscale(0%);-moz-filter:grayscale(0%);-ms-filter:grayscale(0%);-o-filter:grayscale(0%);*/}
.hp_serviceList li:hover:before{background:rgba(223,55,57,.9)}
.hp_serviceList li:hover a .txt .desc{opacity:1;height:45px}
.hp_serviceList li:hover a .txt .line{-webkit-transform:scaleX(1);margin-bottom:20px;margin-top:20px}
.hp_serviceList li:hover .moreline{-webkit-transform:scaleX(1.2)}
.hp_clientsList{background-color:#fff;position:relative;width:100%;padding-left:4%;padding-right:4%;overflow:hidden;z-index:2;padding-top:55px}
.hp_clientsList .txt{text-align:center}
.hp_clientsList .txt .title{font-size:26px;font-weight:700;color:#df3739;margin-top:60px}
.hp_clientsList .txt .desc{font-size:18px;margin-top:5px;color:#333}
.hp_clientsList ul{margin-top:60px;margin-bottom:60px;width:100%;border-bottom:solid 1px #eaeaea;border-left:solid 1px #eaeaea}
.hp_clientsList ul li{width:calc(100%/5);height:150px;float:left;text-align:center;position:relative;overflow:hidden}
.hp_clientsList ul li .clientLogo{border:solid 1px #eaeaea;border-bottom-width:0;border-left-width:0;transition:all .2s;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .3s;margin:0;width:100%;height:100%;background-image:url(../images/client_logo1.png);background-repeat:no-repeat;background-position:center center;background-size:100% auto;background-color:#fff;-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%)}
.hp_clientsList ul li .clientLogo:before{background-color:rgba(255,255,255,.2);position:absolute;width:calc(96%);height:calc(96%);left:2%;top:2%;content:""}
.hp_clientsList ul li:hover .clientLogo{border-width:10px;-webkit-filter:grayscale(0);-moz-filter:grayscale(0);-ms-filter:grayscale(0);-o-filter:grayscale(0)}
.hp_clientsList ul li:hover .clientLogo:before{background-color:rgba(255,255,255,0)}
.banner{/*background-color:#1c1f25;*/position:relative;width:100%;height:600px;overflow:hidden;min-height:500px;}

.bannerImg{
	width:100%;height:100%;min-height:500px;position:fixed; left:0;top:0;background-repeat:no-repeat;background-position:center center;background-size:cover;
}


.bannerImg:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(38,43,52,.75);
    content: '';
}

.serviceBanner .bannerImg{
	background-attachment:fixed;
}


.aboutUs_banner .bannerImg:before {
    background-color: rgba(00,00,00,.5);
}


.cont_container{padding-top:50px;padding-bottom:50px;background-repeat:no-repeat;background-position:right bottom;background-size:100% 100%;background-color:rgba(38,43,52,.8)}
/*.caseDetailsBanner .bannerImg{opacity:.25}*/
.caseDetails .caseBannerImg,.caseDetails .caseBannerWapImg{position:absolute;right:0;top:0;opacity:1;background-position:right bottom;display:none}
.caseBanner{background-image:url(../images/caseBanner.jpg)}
.banner .cont{width:640px;position:absolute;left:50%;top:25%;color:#fff;-webkit-transform:translateX(-50%);text-align:center}
.banner .cont .pageName .icon{font-size:200px;height:210px;margin-top:-50px;overflow:hidden}
.banner .cont .pageName .nameTxt{font-size:36px;font-weight:700;padding-bottom:10px;border-bottom-width:4px;border-bottom-style:solid;border-bottom-color:#df3739}
.banner .cont .txt{font-size:18px;margin-top:50px}
.banner .caseTitle{position:absolute;left:4%;bottom:100px;color:#fff;width:50%}
.banner .caseTitle .caseLogo{height:90px;width:240px;overflow:hidden;border-radius:5px}
.banner .caseTitle .caseLogo img{margin-top:-25px}
.banner .caseTitle .titleName{font-size:48px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.banner .caseTitle .desc{font-size:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.caseDetails{font-size:14px;color:#666;position:relative;z-index:2}
.caseDetails .description{line-height:24px;padding-bottom:50px;padding-top:50px;padding-left:4%;padding-right:4%;background-color:#fff}
.caseDetails .description p{width:90%;min-width:850px}
.linkBtn{line-height:28px;border:1px solid #eaeaea;padding-right:10px;padding-left:10px;display:block;float:left;margin-top:20px;border-radius:2px;background-color:#fff;transition:background-color .4s,border-color .4s,color .4s;-moz-transition:background-color .4s,border-color .4s,color .4s;-webkit-transition:background-color .4s,border-color .4s,color .4s;-o-transition:background-color .4s,border-color .4s,color .4s}
.linkBtn:hover{background-color:#df3739;border-color:#df3739;color:#fff}
.details .pcPage{padding-top:50px}
.details .cont{position:relative;width:1200px;max-width:1200px;margin-left:auto;margin-right:auto;padding:40px;border-color:rgba(255,255,255,.2);border-style:solid;border-width:1px}
.details .pcPage .cont{padding-top:0}
.details .cont .qrcode{position:absolute;right:2%;bottom:0}
.details .cont .pic{position:absolute;left:11.85%;top:5.4%;overflow:hidden;width:76.66%}
@-webkit-keyframes loadingCirlceZoomOut{0%{opacity:0;-webkit-transform:scale(1)}
1%{opacity:1;-moz-transform:scale(1)}
100%{opacity:0;-webkit-transform:scale(3)}
}
@-moz-keyframes loadingCirlceZoomOut{0%{opacity:0;-moz-transform:scale(1)}
1%{opacity:1;-moz-transform:scale(1)}
100%{opacity:0;-moz-transform:scale(3)}
}
@-webkit-keyframes verticalLineIn{0%{-webkit-transform:scaleY(0)}
100%{-webkit-transform:scaleY(1)}
}
@-moz-keyframes verticalLineIn{0%{-moz-transform:scaleY(0)}
100%{-moz-transform:scaleY(1)}
}
@-webkit-keyframes transverseLineIn{0%{-webkit-transform:scaleX(0)}
100%{-webkit-transform:scaleX(1)}
}
@-moz-keyframes transverseLineIn{0%{-moz-transform:scaleX(0)}
100%{-moz-transform:scaleX(1)}
}
.verticalLineIn{-webkit-animation-name:verticalLineIn;animation-name:verticalLineIn}
.transverseLineIn{-webkit-animation-name:transverseLineIn;animation-name:transverseLineIn}
@-webkit-keyframes downTips{0%{opacity:0;-webkit-transform:translateY(0)}
50%{opacity:.5;-webkit-transform:translateY(20%)}
100%{opacity:0;-webkit-transform:translateY(0)}
}
@-moz-keyframes downTips{0%{opacity:0;-moz-transform:translateY(0)}
50%{opacity:.5;-moz-transform:translateY(20%)}
100%{opacity:0;-moz-transform:translateY(0)}
}
@-webkit-keyframes caseItem{0%{opacity:0;-webkit-transform:scale(0)}
100%{opacity:1;-webkit-transform:scale(1)}
}
@-moz-keyframes caseItem{0%{opacity:0;-moz-transform:scale(0)}
100%{opacity:1;-moz-transform:scale(1)}
}
@-webkit-keyframes focusIcon{0%{opacity:0}
50%{opacity:1}
100%{opacity:0}
}
@-moz-keyframes focusIcon{0%{opacity:0}
50%{opacity:1}
100%{opacity:0}
}
.loadingCircle1{-webkit-animation:loadingCirlceZoomOut 2s 0s infinite linear both;-moz-animation:loadingCirlceZoomOut 2s 0s infinite linear both}
.loadingCircle2{-webkit-animation:loadingCirlceZoomOut 2s 1.1s infinite linear both;-moz-animation:loadingCirlceZoomOut 2s 1.1s infinite linear both}
.downTips{-webkit-animation:downTips 2s 0s infinite ease both;-moz-animation:downTips 2s 0s infinite ease both}
.gallery .item{-webkit-animation:caseItem .5s .5s both;-moz-animation:caseItem .5s .5s both}
.bannerAnimate .titleName{-webkit-animation:fadeInDown .8s .3s both;-moz-animation:fadeInDown .8s .3s both}
.bannerAnimate .line{-webkit-animation:transverseLineIn .8s 1s both;-moz-animation:transverseLineIn .8s 1s both}
.bannerAnimate .desc{-webkit-animation:fadeInUp .8s .3s both;-moz-animation:fadeInUp .8s .3s both}
.bannerAnimate .downLine .line{-webkit-animation:verticalLineIn .8s 1s both;-moz-animation:verticalLineIn .8s 1s both}
.aboutUs{position:relative;z-index:1;background-color:#FFF}
.banner .cont .pageName .aboutredkylin_title_en{font-size:92px;text-transform:uppercase;font-weight:700;margin-top:0;height:auto}
.aboutUs .inforTxt{width:96%}
.aboutUs .itemList{width:100%}
.aboutUs .itemList li{position:relative;float:left;width:calc(100%/3)}
.aboutUs .itemList li .pic{width:100%;height:100%;overflow:hidden}
.aboutUs .itemList li img{transition:-transform .4s ease,-webkit-filter .4s;-moz-transition:-moz-transform .4s ease,-moz-filter .4s;-webkit-transition:-webkit-transform .4s ease,-webkit-filter .4s;-o-transition:-o-transform .4s ease,-o-filter .4s;-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%)}
.aboutUs .itemList li:hover img{-webkit-filter:grayscale(0);-moz-filter:grayscale(0);-ms-filter:grayscale(0);-o-filter:grayscale(0);transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1)}
.aboutUs .itemList li .label{font-size:18px;position:absolute;top:-4%;right:2%;color:#fff;background-color:rgba(220,33,36,.9);text-align:center;width:60px;height:60px;line-height:50px}
.aboutUs .itemList li .label .line{height:1px;background:#fff;width:34px;margin-left:auto;margin-right:auto;margin-top:-8px}
.service{position:relative;z-index:1}
.serviceItem{height:500px;width:100%;position:relative;overflow:hidden;}

.serviceItem .itemInforCont{min-height:500px;position:absolute;left:0%;width:100%;top:0;padding-right:70px;padding-left:70px;background-color:rgba(255,255,255,1);transition:width .4s,left .4s,background-color .4s;-webkit-transition:width .4s,left .4s,background-color .4s;-o-transition:width .4s,left .4s,background-color .4s;-moz-transition:width .4s,left .4s,background-color .4s;-ms-transition:width .4s,left .4s,background-color .4s}
.serviceItem .itemInforCont .item{width:47%;padding-top:30px;height:180px}
.serviceItem .itemInforCont .title{width:100%; }
.serviceItem .active{width:90%;left:10%;background-color:#FFF}
.serviceItem .active .item{width:47%}
.serviceItem .active .title{width:100%}
.serviceItemActive .kvPic{opacity:.2}

.serviceItem-right .itemInforCont .title{width:100%;color:#fff; border-bottom: rgba(255,255,255,.2) solid 1px;}
.serviceItem-right .itemInforCont{left:0;width:100%;background-color: rgba(38,43,52,.5); color:#fff;}
.serviceItem-right .itemInforCont .border-bottom{border-bottom: rgba(255,255,255,.2) solid 1px;}

.service .process{background-attachment:fixed;background-image:url(../images/redkylin-process.jpg);background-repeat:no-repeat;background-position:center center;background-size:cover;height:600px;position:relative}



.service .process:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(223,55,57,.75);
    content: '';
}




.service .process .cont{width:100%;max-width:1200px;height:600px;position:absolute;left:0;top:0;text-align:center;color:#FFF}
.service .process .cont .txt{margin-top:110px}
.service .process .processItemList{margin-top:115px;position:relative}
.service .process .processItemList li{float:left;margin-left:3.3%;margin-right:3.3%}
.service .process .processItemList li .icon{width:120px;height:120px;background-color:#FFF;overflow:hidden;border-radius:100px;line-height:120px;color:#df3739;text-align:center;font-size:80px}
.service .process .processItemList li .title{margin-top:15px;font-size:18px}
.moreBtn{position:absolute;left:0;top:50%;z-index:10;cursor:pointer;background-color:#df3739;border-radius:50px;width:48px;height:48px;-webkit-transform-origin:center center;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%)}
.moreBtn:hover{width:56px;height:56px;border-radius:50px}
.moreBtn div{width:24px;height:2px;border-radius:3px;background-color:#FFF;-webkit-transform-origin:center center;-webkit-transition:250ms all;transition:250ms all;position:absolute;left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%)}
.moreBtn .bar1{width:2px;height:24px;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%)}
.moreBtnActive .bar1{display:none!important}
.serviceItem-right .moreBtn{left:100%}
.contact{background-color:#FFF;position:relative;z-index:1}
.contact .cont{width:1200px;margin-left:auto;margin-right:auto;padding-top:80px;padding-bottom:100px;color:#333}
.contact .leftCont{float:left}
.contact h1{color:#df3739;padding-bottom:5px;border-bottom:#df3739 solid 4px;font-size:48px;font-family:Arial,Helvetica,sans-serif;font-style:italic}
.contact .rightCont{float:right}
.contact .rightCont .itemList{position:relative;width:680px}
.contact .rightCont .itemList .item{float:left;border:1px solid #eaeaea;padding-top:30px;padding-bottom:30px;width:calc(100%/3);top:0;text-align:center;margin-left:-1px;-webkit-transition:.4s all;transition:.4s all}
.contact .rightCont .itemList .item .icon{width:140px;height:140px;margin-left:auto;margin-right:auto}
.contact .rightCont .itemList .item .icon i{line-height:140px;font-size:140px}
.contact .rightCont .itemList a{-webkit-transition:.4s all;transition:.4s all}
.contact .rightCont .itemList .item:hover{margin-top:-10px;padding-bottom:40px}
.contact .rightCont .itemList a:hover{color:#df3739}
.bannerMoreBtn{width:100%;height:100%;position:absolute;left:0;top:0;display:block}
.threeImg img{float:left;margin-right:3.3%;width:31.1%}
.twoImg img{float:left;width:48%;margin-right:4%}
.wapCont{display:none}
.describe{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;float:right}
