﻿.chain-store .banner {
    height:420px;
    width:100%;
    background-image:url(../images/img_00web.png);
    background-size:cover;
    color:#fff
}
@media only screen and (-o-min-device-pixel-ratio:3/2),only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
    .chain-store .banner {
        background-image:url(../images/img_00web@2x.png)
    }
}
.chain-store .banner .shade {
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -moz-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -moz-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.4)
}
.chain-store .banner .shade h1 {
    line-height:38px;
    font-size:38px
}
.chain-store .banner .shade h2 {
    font-size:20px;
    margin:20px 0 0
}
.chain-store .light-shade {
    background:#f8fbff
}
.chain-store .item {
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -moz-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -moz-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.chain-store .item>h3 {
    font-size:28px;
    line-height:28px
}
.chain-store .item-ctn {
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -moz-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    width:1000px
}
.chain-store .functions-ctn .item {
    height:400px
}
.chain-store .functions-ctn .item-ctn .description {
    width:380px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -moz-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.chain-store .functions-ctn .item-ctn .description h3 {
    font-size:30px;
    line-height:100%
}
.chain-store .functions-ctn .item-ctn .description h4 {
    margin:16px 0 25px;
    font-size:18px
}
.chain-store .functions-ctn .item-ctn .description p {
    color:#666;
    line-height:21px
}
.chain-store .functions-ctn .item-ctn img {
    max-height:1000%
}
.chain-store .functions-ctn .item .reverse {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:reverse;
    -webkit-flex-direction:row-reverse;
    -moz-box-orient:horizontal;
    -moz-box-direction:reverse;
    -ms-flex-direction:row-reverse;
    flex-direction:row-reverse
}
.chain-store .hardware {
    padding:60px 0 118px
}
.chain-store .hardware h3 {
    margin-bottom:80px
}
.chain-store .hardware ul li {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
.chain-store .hardware ul li,.chain-store .hardware ul li div {
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -moz-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.chain-store .hardware ul li div {
    width:151px;
    height:151px;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -moz-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin-bottom:37px
}
.chain-store .hardware ul li div img {
    max-width:100%;
    max-height:100%
}
.chain-store .business-case {
    padding:69px 0 86px
}
.chain-store .business-case h3 {
    margin-bottom:50px
}
.chain-store .business-case .showcase-card:first-child {
    background-image:url(../images/companycase1.png)
}
@media only screen and (-o-min-device-pixel-ratio:3/2),only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
    .chain-store .business-case .showcase-card:first-child {
        background-image:url(../images/companycase1@2x.png)
    }
}
.chain-store .business-case .showcase-card:nth-child(2) {
    background-image:url(../images/companycase2.png)
}
@media only screen and (-o-min-device-pixel-ratio:3/2),only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
    .chain-store .business-case .showcase-card:nth-child(2) {
        background-image:url(../images/companycase2@2x.png)
    }
}
.chain-store .business-case .showcase-card:nth-child(3) {
    background-image:url(../images/companycase3.png)
}
@media only screen and (-o-min-device-pixel-ratio:3/2),only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
    .chain-store .business-case .showcase-card:nth-child(3) {
        background-image:url(../images/companycase3@2x.png)
    }
}
.chain-store .business-case .showcase-card {
    width:320px;
    height:295px;
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    background-size:auto 150px
}
.chain-store .business-case .showcase-card .showcase-intro {
    background:#fff url(../images/company-icon.png) no-repeat 30px 24px;
    height:100%;
    top:150px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:95px 20px 0;
    width:100%;
    position:absolute;
    color:#666;
    -webkit-transition:top .4s;
    -moz-transition:top .4s;
    transition:top .4s
}
.chain-store .business-case .showcase-card .showcase-intro p {
    color:#666;
    line-height:22px
}
.chain-store .business-case .showcase-card .showcase-intro p:last-child {
    margin-top:25px
}
.chain-store .business-case .showcase-card:hover .showcase-intro {
    top:0
}
.chain-store .business-case .showcase-card:first-child .showcase-intro {
    background:#fff url(../images/case1logo.png) no-repeat 15px 29px;
    background-size:120px 50px
}
@media only screen and (-o-min-device-pixel-ratio:3/2),only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
    .chain-store .business-case .showcase-card:first-child .showcase-intro {
        background-image:url(../images/case1logo@2x.png)
    }
}
.chain-store .business-case .showcase-card:nth-child(2) .showcase-intro {
    background:#fff url(../images/case2logo.png) no-repeat 15px 29px;
    background-size:120px 50px
}
@media only screen and (-o-min-device-pixel-ratio:3/2),only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
    .chain-store .business-case .showcase-card:nth-child(2) .showcase-intro {
        background-image:url(../images/case2logo@2x.png)
    }
}
.chain-store .business-case .showcase-card:nth-child(3) .showcase-intro {
    background:#fff url(../images/case3logo.png) no-repeat 15px 29px;
    background-size:120px 50px
}
@media only screen and (-o-min-device-pixel-ratio:3/2),only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
    .chain-store .business-case .showcase-card:nth-child(3) .showcase-intro {
        background-image:url(../images/case3logo@2x.png)
    }
}
.chain-store .service-company {
    padding:75px 0 96px
}
.chain-store .service-company h3 {
    margin-bottom:60px
}
.chain-store .service-company li {
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -moz-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.chain-store .service-company li .icon {
    width:80px;
    height:80px;
    margin-right:20px
}
.chain-store .service-company li p:first-child {
    font-size:16px;
    margin-bottom:7px
}
.chain-store .service-company li p:last-child {
    color:#666
}