﻿
/*头部banner样式*/

.info-banner {

    width: 100%;

    height: 468px;

    background: url("../images/financial_banner.jpg") no-repeat center;

}

.web-banner {

    padding: 110px 0px 0px 53px;

}

.web-name {

    font-size: 50px;

    color: #fff;

}

.web-info {

    margin-top: 12px;

    font-size: 24px;

    color: #fff;

}

/*网站部署面临的问题*/

.issue-title {

    font-size: 28px;

    color: #555;

    text-align: center;

}

.issue-title-ico {

    margin: 20px 0px 60px 0px;

    width: 100%;

    height: 29px;

    background: url("../images/issue_title_ico.png") no-repeat center;

}

.web-issue-list {

    padding-bottom: 110px;

}

.web-issue-list li {

    width: 23%;

    margin: 0px 1%;

    float: left;

}

.web-issue-list li a {

    display: inline-block;

    width: 100%;

    height: 100%;

}

.web-issue-list li span {

    display: block;

    width: 100%;

    height: 106px;

}

.issue_type_01 {

    background: url("../images/fissue_ico01.png") no-repeat center;

}

.issue_type_02 {

    background: url("../images/fissue_ico02.png") no-repeat center;

}

.issue_type_03 {

    background: url("../images/fissue_ico03.png") no-repeat center;

}

.issue_type_04 {

    background: url("../images/fissue_ico04.png") no-repeat center;

}

.web-issue-list li a:hover .issue_type_01 {

    background: url("../images/fissue_ico_hover_01.png") no-repeat center;

}

.web-issue-list li a:hover .issue_type_02 {

    background: url("../images/fissue_ico_hover_02.png") no-repeat center;

}

.web-issue-list li a:hover .issue_type_03 {

    background: url("../images/fissue_ico_hover_03.png") no-repeat center;

}

.web-issue-list li a:hover .issue_type_04 {

    background: url("../images/fissue_ico_hover_04.png") no-repeat center;

}

.web-issue-list li p {

    font-size: 20px;

    color: #555;

    text-align: center;

    margin: 20px 0px 15px 0px;

}

.web-issue-list li .issue-introduce {

    margin: 0px 15px;

    font-size: 12px;

    color: #555;

    line-height: 24px;

}

/*解决方案构架部署 开始*/

.deploy-box {

    margin-top: 78px;

    padding-bottom: 70px;

}

.deploy-box span {

    display: inline-block;

    height: 472px;

    width: 55%;

    float: left;

    margin-left: 19px;

    background: url("../images/deploy_img1.jpg") no-repeat left center;

}

.deploy-box .deploy-info {

    padding: 25px;

    width: 35%;

    float: right;

    border: 1px solid #ccc;

    line-height: 32px;

    font-size: 14px;

    color: #555;

}

/*网站服务优势*/

.web-superiority {

    width: 100%;

    height: 640px;

    background: url("../images/superiority_bg.jpg") no-repeat center;

}

.superiority-outside {

    overflow: hidden;

}

.web-superiority .issue-title {

    padding: 120px 0px 60px 0px;

}

.superiority-list li {

    position: absolute;

    float: left;

    width: 310px;

    margin: 0px 32px

}

.superiority-list li a {

    display: inline-block;

    position: relative;

    width: 100%;

    height: 100%;

}

.issue-form, .issue-back {

    position: absolute;

    left: 0px;

    top: 0px;

}

.issue-back {

    height: 310px;

    width: 310px;

    font-size: 14px;

    color: #fff;

    line-height: 24px;

}

.issue-back p {

    padding: 90px 57px;

}

.issue-back .p2 {

    padding: 63px 57px;

}

.superiority-limit {

    position: relative;

    overflow: hidden;

}

.superiority-limit .superiority-span {

    position: absolute;

    top: 0px;

    display: inline-block;

    width: 23px;

    height: 310px;

    z-index: 88;

    cursor: pointer;

}

.superiority-box {

    margin: 0px 38px;

    height: 345px;

    width: 1200px;

    overflow: hidden;

}

.superiority-list {

    position: relative;

}

.superiority-limit .superiority-left {

    left: 0px;

    background: url("../images/superiority_left.png") no-repeat left center;

}

.superiority-limit .superiority-right {

    right: 0px;

    background: url("../images/superiority_right.png") no-repeat left center;

}

.issue-form {

    width: 310px;

    height: 310px;

    background: url("../images/superiority_bg.png") no-repeat center;

    -o-transform: perspective(800px) rotateY(0deg);

    -webkit-transform: perspective(800px) rotateY(0deg);

    -ms-transform: perspective(800px) rotateY(0deg);

    transform: perspective(800px) rotateY(0deg);

    -o-transition: all 500ms ease-in-out;

    -ms-transition: all 500ms ease-in-out;

    -webkit-transition: all 500ms ease-in-out;

    transition: all 500ms ease-in-out;

    opacity: 1;

    filter: alpha(opacity=100);

}

.issue-back {

    background: url("../images/superiority_hover_bg.png") no-repeat center;

    -o-transition: transform 500ms cubic-bezier(0.07, 0.42, 0.65, 1.3);

    -ms-transition: transform 500ms cubic-bezier(0.07, 0.42, 0.65, 1.3);

    -moz-transition: transform 500ms cubic-bezier(0.07, 0.42, 0.65, 1.3);

    -webkit-transition: transform 500ms cubic-bezier(0.07, 0.42, 0.65, 1.3);

    transition: transform 500ms cubic-bezier(0.07, 0.42, 0.65, 1.3);

    -o-transform: perspective(800px) rotateY(-180deg);

    -ms-transform: perspective(800px) rotateY(-180deg);

    -moz-transform: perspective(800px) rotateY(-180deg);

    -webkit-transform: perspective(800px) rotateY(-180deg);

    transform: perspective(800px) rotateY(-180deg);

    opacity: 0;

    filter: alpha(opacity=0);

}

.superiority-list li a:hover .issue-form {

    -o-transform: perspective(800px) rotateY(180deg);

    -ms-transform: perspective(800px) rotateY(180deg);

    -moz-transform: perspective(800px) rotateY(180deg);

    -webkit-transform: perspective(800px) rotateY(180deg);

    transform: perspective(800px) rotateY(180deg);

    opacity: 0;

    filter: alpha(opacity=0);

}

.superiority-list li a:hover .issue-back {

    -o-transform: perspective(800px) rotateY(0deg);

    -ms-transform: perspective(800px) rotateY(0deg);

    -moz-transform: perspective(800px) rotateY(0deg);

    -webkit-transform: perspective(800px) rotateY(0deg);

    transform: perspective(800px) rotateY(0deg);

    opacity: 1;

    filter: alpha(opacity=100);

}

.issue-form .issue-centen {

    padding: 42px 60px;

    width: 310px;

    height: 310px;

    *width: auto;

    *height: auto;

}

.issue-form span {

    display: inline-block;

    width: 100%;

    height: 111px;

}

.issue-form .span_bg1 {

    background: url("../images/fyoushi_img1.jpg") no-repeat center;

}

.issue-form .span_bg2 {

    background: url("../images/fyoushi_img2.jpg") no-repeat center;

}

.issue-form .span_bg3 {

    background: url("../images/fyoushi_img3.jpg") no-repeat center;

}

.issue-form .span_bg4 {

    background: url("../images/fyoushi_img4.jpg") no-repeat center;

}

.issue-centen .issue-centen-title {

    text-align: center;

    font-size: 20px;

    color: #555;

    margin: 32px 0px 10px 0px;

}

.issue-centen .youshi1 {

    font-size: 14px;

    color: #555;

    text-align: center;

    height: 22px;

    line-height: 22px;

}

/*合作伙伴*/

.web-partner {

    width: 100%;

    height: 420px;

    background: url("../images/partner_bg1.jpg") no-repeat center;

}

.partner-title {

    font-size: 30px;

    color: #fff;

    padding-top: 48px;

    text-align: center;

}

.partner-box {

    position: relative;

    width: 732px;

    height: 260px;

    margin: 0px auto;

}

.partner-box .partner-box-span {

    display: inline-block;

    position: absolute;

    width: 27px;

    height: 260px;

    top: 0px;

    cursor: pointer;

}

.partner-box .partner-left {

    background: url("../images/partner_left.png") no-repeat center;

    left: 0px;

}

.partner-box .partner-right {

    background: url("../images/partner_right.png") no-repeat center;

    right: 0px;

}

.partner-single {

    position: absolute;

    top: 0px;

    left: 27px;

    width: 678px;

    height: 260px;

    overflow: hidden;

}

.partner-list {

    height: 260px;

    position: relative;

}

.partner-list li {

    margin: 0px 19px;

    float: left;

    width: 188px;

    height: 260px;

}

.partner-list .par_bg1 {

    background: url("../images/fpartner_01.png") no-repeat center;

}

.partner-list .par_bg2 {

    background: url("../images/fpartner_02.png") no-repeat center;

}

.partner-list .par_bg3 {

    background: url("../images/fpartner_03.png") no-repeat center;

}

.text-show {

    width: 100%;

    position: absolute;

    bottom: 0px;

}

.text-show span {

    display: none;

    width: 100%;

    font-size: 20px;

    color: #fff;

    text-align: center;

}

.partner-list-text {

    display: none;

    position: absolute;

    bottom: -50px;

    left: 0px;

    width: 100%;

    text-align: center;

    margin-top: 27px;

    font-size: 14px;

    color: #fff;

}

/*.partner-list li:hover,
.partner-list li.active{
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
}
.partner-list li:hover.par_bg1,
.partner-list li.active.par_bg1{
	background: url("../images/partner_hover01.png") no-repeat center;
}
.partner-list li:hover.par_bg2,
.partner-list li.active.par_bg2
{
	background: url("../images/partner_hover01.png") no-repeat center;
}
.partner-list li:hover.par_bg3,
.partner-list li.active.par_bg3{
	background: url("../images/partner_hover01.png") no-repeat center;
}
.partner-list li:hover .text-show span,
.partner-list li.active .text-show span{
	display: block;
}*/

.show-single {

    display: none;

    position: absolute;

    left: 270px;

    top: 40px;

    width: 188px;

    height: 188px;

    -moz-transform:scale(0.65);

    -webkit-transform:scale(0.65);

    -o-transform:scale(0.65);

}

.show-single.active {

    display: block;

    -moz-transform:scale(1);

    -webkit-transform:scale(1);

    -o-transform:scale(1);

    -o-transition: all 500ms ease-in-out;

    -ms-transition: all 500ms ease-in-out;

    -webkit-transition: all 500ms ease-in-out;

    transition: all 500ms ease-in-out;

}

.show-single .text-show {

    display: block;

    width: 100%;

    position: absolute;

    bottom: -34px;

    text-align: center;

}

.show-single .text-show span {

    display: inline-block;

    width: 100%;

    font-size: 20px;

    color: #fff;

    text-align: center;

}

/*更多解决方案*/

.more-title {

    font-size: 30px;

    color: #555;

    text-align: center;

    padding: 83px 0px;

}

.more-list {

    padding-bottom: 80px;

}

.more-list li {

    float: left;

    width: 24%;

    height: 175px;

}

.more-list li a {

    display: block;

    position: relative;

    width: 100%;

    height: 100%;

    background: url("../images/fangan_bg.png") no-repeat center top;

}

.more-list li a:hover {

    background: url("../images/fangan_hover_bg.png") no-repeat center top;

}

.more-list-01 {

    background: url("../images/mobile_ico.png") no-repeat center;

    width: 100%;

    height: 175px;

}

.more-list-02 {

    background: url("../images/game_ico.png") no-repeat center;

    width: 100%;

    height: 175px;

}

.more-list-03 {

    background: url("../images/website_ico.png") no-repeat center;

    width: 100%;

    height: 175px;

}

.more-list-04 {

    background: url("../images/ecommerce_ico.png") no-repeat center;

    width: 100%;

    height: 175px;

}

.more-list li a:hover .more-list-01 {

    background: url("../images/mobile_1ico.png") no-repeat center;

}

.more-list li a:hover .more-list-02 {

    background: url("../images/game_1ico.png") no-repeat center;

}

.more-list li a:hover .more-list-03 {

    background: url("../images/website_1ico.png") no-repeat center;

}

.more-list li a:hover .more-list-04 {

    background: url("../images/ecommerce_1ico.png") no-repeat center;

}

.more-list li a p {

    position: absolute;

    width: 100%;

    left: 0px;

    bottom: 0px;

}

.more-list li a p span {

    display: block;

    width: 100%;

    text-align: center;

    font-size: 20px;

    color: #555;

}

.more-list li a:hover p span {

    color: #00a8e5;

}