/* css document */

.weui-cell{padding: 10px 15px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}
.weui-cell__bd{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
.weui-cell__ft{text-align: right; color: #999999;}
@media (min-width: 640px){.container{width: 84%;}}
@media (min-width: 992px){.container{width: 70%;}}
@media (min-width: 1600px){.container{width: 63.2%;}}
.bg-white{background-color: #fff;}



.idx-solution{padding-bottom: 1rem; width:100%; overflow:hidden;}
.idx-solution .row{margin-left: 0; margin-right: -40px; height: 34.375vw; overflow: hidden;}
.idx-solution .item{position: relative; float: left; width: 20.834vw; margin-right: 14px; text-align: center; overflow: hidden; -webkit-transition: all .7s ease; transition: all .7s ease;}
.idx-solution .imgbox{position: relative; height: 20.834vw; margin-top: 6.7vw; background: no-repeat center center; background-size: cover; -webkit-transition: all .6s ease; transition: all .6s ease;}
.idx-solution .imgbox::after{opacity: 0; position: absolute; display: block; content: ""; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); -webkit-transition: all .3s; transition: all .3s;}
.idx-solution h6{padding: 15px; font-size: 20px; color: #333; opacity: 1;}
.idx-solution .textbox{position: absolute; top: 0; left: 0; margin-top: 6.7vw; width: 88%; height: 20.834vw; -webkit-animation: zoomout .7s; animation: zoomout .7s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.idx-solution .textbox p{display: inline-block; font-size: 24px; color: #fff; border: 1px solid #fff; padding:6px 12px; white-space: nowrap;}
.idx-solution .textbox .add{position: relative; display: block; margin:0px auto;  height: 20px; font-size:14px;color:#fff;margin-top: 5px;}
.idx-solution .textbox .add a{ color:#fff;}

.idx-solution .item.on{width: 34.375vw;}
.idx-solution .item.on .imgbox{margin-top: 0; height: 34.375vw;}
.idx-solution .item.on .imgbox::after{opacity: 1;}
.idx-solution .item.on .textbox{margin-top: 0; height: 34.375vw; -webkit-animation: zoomin .7s; animation: zoomin .7s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.idx-solution .item.on h6{opacity: 0;}
@media (min-width: 640px) and (max-width: 1080px){
.idx-solution .item{width: 20vw;}
.idx-solution .item .imgbox{height: 20vw;}
.idx-solution .item.on{width: 34.3vw;}
.idx-solution .item.on .imgbox{width: 34.3vw;}
.idx-solution .textbox p{padding-left: .4rem; padding-right: .4rem;}
}
@media (max-width: 991px){.idx-solution h6{font-size: 17px;}}
@media (max-width: 639px){
.idx-solution{padding-bottom: 0;}
.idx-solution .row{margin: 0 auto; height: auto; width: 90vw;}
.idx-solution .item{float: none; display: block; margin: 10px auto; width: 100%; -webkit-transition: none; transition: none;}
.idx-solution .imgbox{margin: 0; height: 90vw;}
.idx-solution .imgbox::after{opacity: 1;}
.idx-solution .textbox{margin: 0; height: 100%; -webkit-animation: zoomin .7s; animation: zoomin .7s;}
.idx-solution h6{display: none;}
.idx-solution .item.on{width: 100%;}
.idx-solution .item.on .imgbox{height: 90vw;}
.idx-solution .item.on .textbox{height: 100%;}
}