/*
 *  2018-02-05 12:06:28 by xieqq
 *  案例的mobile页面
 */
 
#page-templates,#page-templates  .mod-body{
    background: #f5f5f4;
}
#page-templates .topSearchInputAll{
    background: rgba(255, 255, 255, .9);
    position: fixed;
    top: 44px;
    left: 0px;
    width: 100%;
    z-index: 1000;
}
#page-templates .topSearchInputAll .topInputs{
    width: 100%;
    height: 1.174rem;
    padding-top: .16rem;
    border-bottom: 1px solid #eee;
}
#page-templates .topSearchInputAll .topInputs .leftInput{
    width: 7.46rem;
    height: 0.853rem;
    border-radius: 0.853rem;
    background: #fcfcfc;
    border: 1px solid #e7e7e7;
    margin-left: .4rem;
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
#page-templates .topSearchInputAll .topInputs .leftInput>input{
    border: none;
    height: 0.853rem;
    width: 7.46rem;
    border-radius: 0.853rem;
    outline: none;
    padding-left: 1rem;
    background: #fcfcfc;
    vertical-align: middle;
}
#page-templates .topSearchInputAll .topInputs .leftInput .leftIcon{
    position: absolute;
    width: .374rem;
    height: .374rem;
    background: url("images/searchIcon.png") left top no-repeat;
    background-size: 100% auto;
    left: .3rem;
    top: .2rem;
}
#page-templates .topSearchInputAll .topInputs>a{
    margin-left: .7rem;
    text-decoration: none;
    color: #fe661f;
    font-size:.374rem;
    vertical-align: middle;
}
#page-templates .topSearchInputAll .underSlideDownBox{
    margin-top: .4rem;
    padding: 0px .4rem;
    padding-bottom: .53rem;
    display: none;
}
#page-templates .topSearchInputAll .underSlideDownBox>li{
    float: left;
    margin-right: .13rem;
    margin-top: .13rem;
}
#page-templates .topSearchInputAll .underSlideDownBox>li>a{
    line-height: .64rem;
    display: block;
    border-radius: .64rem;
    border: 1px solid #e7e7e7;
    background: #fcfcfc;
    font-size: .267rem;
    color: #999;
    padding: 0px .4rem;
    text-decoration: none;
}
#page-templates .topSearchInputAll .underSlideDownBox>li.active>a{
    background: #fe661f;
    color: #fff;
    border-color: #fe661f;
}
#page-templates .darkModel{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, .8);
}
#page-templates .underDemoList{
    padding-bottom: .5rem;
    padding-top: 1.334rem;
}
.underDemoList>li{
    width: 47%;
    margin-left: 2%;
    border-radius: .14rem;
    margin-top: .14rem;
    background: #fff;
    float: left;
    padding-bottom: .5rem;
    box-shadow: 0 .05rem .2rem rgba(131,131,131,.2);
    position: relative;
}
.underDemoList>li>a{
    display: block;
    text-decoration: none;
}
.underDemoList>li>a>.topImg{
    width: 100%;
    height: 6.8rem;
    overflow: hidden;
}
.underDemoList>li>a>.topImg>.vipTaps{
    display: block;
    width: .6667rem;
    height: .32rem;
    border-radius: .1rem;
    background: url("/mobile/images/vipTaps.png") top left no-repeat;
    background-size: 100% auto;
    left: -.1rem;
    top: .53rem;
    position: absolute;
}
.underDemoList>li>a>.topImg>img{
    width: 100%;
}
.underDemoList>li>a>.underInfos{
    font-size: .373rem;
    color: #282828;
    margin-top: .4rem;
    padding: 0px .3rem;
    line-height: .5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
#page-templates .topSearchInputAll .topInputs .leftInput>a{
    position: absolute;
    display: block;
    height: 0.853rem;
    right: 0px;
    top: 0px;
    line-height: 0.853rem;
    background: #fe661f;
    color: #fff;
    width: 1rem;
    text-align: center;
    text-decoration: none;
}
#page-templatesDetail .mod-body{
    background: #f5f5f4;
}
#page-templatesDetail .crumbNav{
    width: 100%;
    border-bottom: 1px solid #fcfcfc;
    border-top: 1px solid #fcfcfc;
    padding: .267rem 0rem;
    background: #fff;
}
#page-templatesDetail .navInset{
    border-left: .08rem solid #fd4131;
    padding-left: .267rem;
    line-height: .4533rem;
    height: .4533rem;
}
#page-templatesDetail .navInset>a{
    line-height: .4533rem;
    text-decoration: none;
    color: #333;
    font-size: .32rem;
}
#page-templatesDetail .navInset>span{
    color: #666;
    font-size: .32rem;
}
#page-templatesDetail .navInset>b{
    font-weight: normal;
    margin: 0px .05rem;
    color: #d6d6d6;
}
#page-templatesDetail .topBannersAll{
    width: 100%;
}
#page-templatesDetail .topBannersAll>h1{
    line-height: 1.06667rem;
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-size: .48rem;
    color: #333;
    background: #fff;
}
#page-templatesDetail .topBannersAll>.singleBanner{
    display: none;
}
#page-templatesDetail.single .topBannersAll>.swiper-container,#page-templatesDetail .topBannersAll.single>h1{
    display: none;
}
#page-templatesDetail.single .topBannersAll>.singleBanner{
    display: block;
    text-align: center;
}
#page-templatesDetail.single .topBannersAll>.singleBanner>img{
    max-width: 80%;
    margin: .3rem 0rem;
}
#page-templatesDetail .swiper-container {
    width: 100%;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    perspective: 1200px
}
#page-templatesDetail .swiper-wrapper {
    margin-top: .2rem;
    margin-bottom: .2rem;
}
#page-templatesDetail .swiper-slide {
    width: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d
}
#page-templatesDetail .swiper-slide .main-img {
    width: 100%;
    margin: 0 auto;
    display: block
}
#page-templatesDetail .middleInfos{
    width: 100%;
    padding: 0px .32rem;
    background: #fff;
    padding-bottom: .53rem;
}
#page-templatesDetail .middleInfos>h3{
    font-size: .37333rem;
    color: #333;
    margin: 0px;
    padding: 0px;
    padding-top: .54rem;
    margin-bottom: .4rem;
}
#page-templatesDetail .middleInfos>p{
    font-size: .32rem;
    line-height: .48rem;
    color: #999;
    text-align: justify;
}
#page-templatesDetail .middleInfos>p>span{
    color: #333;
}
#page-templatesDetail .middleInfos .underBtns{
    text-align: center;
    margin-top: .7rem;
}
#page-templatesDetail.single .middleInfos>.underBtns{
    display: none;
}
#page-templatesDetail .middleInfos .underBtns>a{
    display: inline-block;
    width: 4.267rem;
    height: 1rem;
    line-height: 1rem;
    font-size: .453rem;
    color: #fff;
    background: #ff4501;
    border-radius: 1rem;
    text-decoration: none;
    outline: none;
    letter-spacing: .05rem;
    background: -webkit-linear-gradient(left, #ff6d01, #ff0d00); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #ff6d01, #ff0d00); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #ff6d01, #ff0d00); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #ff6d01 , #ff0d00); /* 标准的语法 */
}
#page-templatesDetail .moreDemos{
    margin-top: .2667rem;
    width: 100%;
    padding-bottom: .3rem;
}
#page-templatesDetail .moreDemos .moreDemosTitle{
    width: 100%;
    background: #fff;
    padding: .267rem 0rem;
}
#page-templatesDetail .moreDemos .moreDemosTitle .insetTitle{
    border-left: .08rem solid #fd4131;
    padding-left: .267rem;
    line-height: .4533rem;
    height: .4533rem;
}
#page-templatesDetail .moreDemos .moreDemosTitle .insetTitle>h4{
    float: left;
    font-size: .32rem;
    color: #333;
    font-weight: normal;
}
#page-templatesDetail .moreDemos .moreDemosTitle .insetTitle>a{
    float: right;
    text-decoration: none;
    color: #999;
    font-size:.26667rem;
    margin-right: .1rem;
}
#page-templatesDetail .case-swiper{
    width: 100%;
    height: 380px;
    margin: 30px 0;
    overflow: hidden;
}
#page-templatesDetail .case-swiper .case{
    width: 214px;
    height: 100%;
}