@charset "utf-8";
body { background: #F1F1F5; }
.hide { display: none; }
/*效果图列表*/
.demo_list_main, .demo_list_con, .demo-page-view, .panel-group { box-sizing: border-box; overflow: hidden; }
.demo_list_main { padding-bottom: 5.6rem; }
.demo_list_main .nav-picker { position: fixed; top: 40px; display: flex; width: 100%; max-width: 640px; background: #fff; border-top: 1px solid #F1F1F5; z-index: 15; }
.demo_list_main .nav-picker .nav-title { position: relative; flex: 1; -webkit-flex: 1; font-size: 0; text-align: center; }
.demo_list_main .nav-picker .active { color: #000; font-weight: 600; }
.demo_list_main .nav-picker .active .picker-icon { transform: rotate(180deg); }
.nav-picker .nav-title::after { content: ''; position: absolute; top: 1rem; left: 0; width: 1px; height: 1rem; background: #d6d6d6; }
.nav-picker .nav-title:first-child::after { display: none; }
.nav-picker .nav-title span { font-size: 1.2rem; line-height: 2.5; vertical-align: middle; }
.nav-picker .nav-title .picker-icon, .list-wrap .page_list span::after { display: inline-block; margin-left: 1rem; width: .85rem; height: .4rem; background: url(../images/arrow-down.png) no-repeat; background-size: 100% 100%; vertical-align: middle; }
.demo_list_main .demo_list_con { position: relative; padding-top: 3rem; width: 100%; color: #4c4c4c; text-align: center; /*overflow-y: scroll;*/ }
.demo_list_main .demo_list_con .tab-action { padding: 1rem 0 .7rem 15px; overflow: hidden; }
.demo_list_main .demo_list_con .tab-action a { float: left; display: block; width: 4.5rem; height: 2rem; line-height: 2rem; font-size: 1.1rem; color: #000; border-radius: 20px 0 0 20px; background: #fff; }
.demo_list_main .demo_list_con .tab-action a.hot { color: #a8a8a8; border-radius: 0 20px 20px 0; background: #f7f7f7; }
.demo_list_main .demo_list_con .tab-action a.current { color: #dc137b; }
.demo_list_main .demo_list_con .list-wrap { position: relative; padding: 0 15px; }
.demo_list_main .demo_list_con .demo:after { content: ''; display: block; padding-bottom: 4rem; }
.demo_list_main .demo_list_con .list { width: 100%; min-height: 10rem; }
.demo_list_main .demo_list_con .list-wrap .list-scroll { min-height: 10rem; height: auto; overflow: hidden; -webkit-overflow-scrolling: touch; }
.demo_list_main .demo_list_con .list .item-group, .panel-group-cont .list .item-group { width: 50%; float: left; }
.demo_list_main .demo_list_con .list .item-group img, .panel-group-cont .item-group img { display: block; width: 100%; height: auto; border-radius: 8px 8px 0 0; }
.demo_list_main .demo_list_con .list .item-group img { border-radius: 4px 4px 0 0; }
.demo_list_main .demo_list_con .list .item-group p, .panel-group-cont .item-group .item-group-text { padding: 0 .7rem; height: 2.9rem; line-height: 2.9; color: #4c4c4c; background: #fff; border-radius: 0 0 8px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo_list_main .demo_list_con .list .item-group p { border-radius: 0 0 4px 4px; }
.demo_list_main .demo_list_con .list .item-group { width: calc((100% - 15px)/2); box-sizing: border-box; }
.demo_list_main .demo_list_con .list .item-group-cont { padding-bottom: 1rem; }
.demo_list_main .demo_list_con .list .item-group a { display: block; }
.demo_list_main .demo_list_con .list .ad-group img { border-radius: 4px; }
.demo_list_con .list .link-group { margin: 0.8rem 0 0 0; font-size: 0; }
.demo_list_con .list .link-group a.link-item { display: inline-block; margin: 0 0 .8rem 8%; width: 28%; line-height: 2rem; font-size: 1.1rem; border-radius: 4px; background: #fff; }
.demo_list_con .list .link-group a.link-item:nth-of-type(3n+1) { margin-left: 0; }
.demo-list { padding-top: 41px; overflow: hidden; }
.list-wrap .page_list { display: none; padding: 0 15px; }
.list-wrap .page_list a { display: block; line-height: 3rem; font-size: 1.1rem; color: #a8a8a8; background: #fff; border-radius: 8px; }
.list-wrap .page_list span { position: relative; }
.list-wrap .page_list span::after { content: ''; }
.demo_list_con .mescroll { position: absolute; top: 3.7rem; left: 0; bottom: 0; padding-bottom: 60px; width: 100%; height: auto; overflow-y: auto; }
.mescroll .data-list { overflow: hidden; }
.mescroll-upwarp { padding: 15px 0; min-height: 30px; text-align: center; }
.mescroll-downwarp .downwarp-progress, .mescroll-upwarp .upwarp-progress { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid gray; border-bottom-color: transparent; vertical-align: middle; }
.mescroll-downwarp .downwarp-tip, .mescroll-upwarp .upwarp-tip, .mescroll-upwarp .upwarp-nodata { display: inline-block; font-size: 12px; color: gray; vertical-align: middle; }
.mescroll-downwarp .downwarp-tip, .mescroll-upwarp .upwarp-tip { margin-left: 8px; }
/*效果图详情页*/
.tk-detail-container { position: relative; }
.demo-page-view { position: relative; top: 0; left: 0; padding-top: 3.25rem; width: 100%; }
.demo-page-view .bar-nav { position: absolute; top: 0; left: 0; width: 100%; font-size: 0; display: flex; -webkit-display: flex; -webkit-align-items: center; align-items: center; justify-content: space-between; -webkit-justify-content: space-between; background: #fff; z-index: 5; }
.demo-page-view .bar-nav .icon { display: inline-block; width: 4rem; padding: 0.7rem 0; background: url(../images/arrow-left-gray.png) no-repeat center center; background-size: .7rem 1.2rem; }
.demo-page-view .bar-nav .title { display: inline-block; font-size: 0; width: 60%; max-width: 440px; font-weight: 500; }
.demo-page-view .bar-nav .title span { display: inline-block; font-size: 1.3rem; }
.demo-page-view .bar-nav .icon-right { padding-left: 3rem; width: 4.3rem; font-size: 1.3rem; background: url(../images/cate-dark.png) no-repeat 1.5rem center; background-size: 1.1rem .9rem; }
.demo-page-view .bar-nav .page-title, .demo-page-view .bar-nav.cur .sliding { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-page-view .panel-header-pic, .panel-group { background: #fff; }
.header-pic-swipe { position: relative; width: 100%; height: 24rem; overflow: hidden; }
.header-pic-swipe .swiper-wrapper { position: relative; height: 24rem; overflow: hidden; }
.header-pic-swipe .swiper-wrapper .swiper-slide { position: relative; width: 100%; height: 100%; float: left; }
.header-pic-swipe .num { position: absolute; left: 50%; bottom: 0.25rem; margin-left: -66px; z-index: 3; }
.header-pic-swipe .numbg { width: 130px; height: 16px; opacity: 0.3; }
.header-pic-swipe #numlist { padding: 0; position: absolute; left: 0; bottom: 1px; width: 100%; text-align: center; }
.header-pic-swipe #numlist li { width: 8px; height: 8px; display: inline-block; border-radius: 5px; border: 1px solid #DDDDDD; box-sizing: border-box; background: rgba(0,0,0,0.3); }
.header-pic-swipe #numlist li.cur { background: #FFF; }
.header-pic-swipe .swiper-slide .img-box { height: 100%; font-size: 0; text-align: center; }
.header-pic-swipe .swiper-slide .img-box::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.header-pic-swipe .swiper-slide .img-box img { display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; }
.demo-page-view .panel-header-pic .panel-content { padding: 0 15px; }
.demo-page-view .panel-header-pic .panel-content-title { font-size: 1.4rem; line-height: 2.7; color: #333; }
.demo-page-view .panel-header-pic .panel-content-text { line-height: 1.3; color: #808080; }
.demo-page-view .panel-header-pic .link-popup { display: block; margin: 1rem 1rem 0; height: 3rem; line-height: 3rem; font-size: 1.2rem; color: #fff; border-radius: 7px; background: #fd2b2d; text-align: center; }
.demo-page-view .panel-header-pic .panel-footer { padding: 34px 15px; font-size: 0; text-align: center; }
.demo-page-view .panel-header-pic .panel-footer .link { width: 7.9rem; display: inline-block; font-size: 1rem; }
.panel-header-pic .panel-footer .link span { display: inline-block; width: 3.2rem; height: 3.2rem; line-height: 8.5rem; background: url(../images/xiaoguotu_icons.png) no-repeat 0 -3.25rem; background-size: 6.45rem 6.45rem; }
.panel-header-pic .panel-footer .link.active span { background-position: 0 0 }
.panel-header-pic .panel-footer .share span { background-position: -3.25rem -3.25rem; }
.panel-group { padding: 0 15px; margin-top: 20px; }
.panel-group .item-group { display: block; margin-bottom: 20px; }
.panel-group-heading-title { line-height: 3.3; font-size: 1.2rem; color: #333; }
.panel-group-cont .list .item-group a { display: block; }
.panel-group-cont .list .item-group:nth-of-type(2n+1) a { padding-right: 7px; }
.panel-group-cont .list .item-group:nth-of-type(2n+2) a { padding-left: 7px; }
.recommend-panel .item-group { margin-bottom: 0; }
.recommend-panel .item-group .item-group-text { padding: 0; line-height: 3.2; font-size: .9rem; border-radius: 0; text-align: left; }
.recommend-panel .item-group img, .sale-panel .item-group img { border-radius: 0; }
.demo-page-view .more-panel-demo { padding: 0 0 0 15px; background: none; }
.demo-page-view .more-panel-demo .grid { position: relative; width: 100%; }
.demo-page-view .more-panel-demo .grid .grid-item { position: absolute; box-sizing: border-box; }
.demo-page-view .more-panel-demo .grid .grid-item a { padding: 0 15px 20px 0; }
/*弹出页面*/
.popup { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; max-width: 640px; min-width: 320px; color: #fff; overflow: hidden; }
.popup-mask { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,.9); overflow: hidden; }
.popup-demo-apply { display: none; height: 100%; z-index: 1002; }
.popup-demo-apply .popup-demo-apply-cont { position: absolute; left: 0; right: 0; top: 50%; margin: auto; width: 86%; max-width: 549px; max-height: 477px; height: auto; min-height: 238.5px; min-width: 275px; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.popup-demo-apply .popup-demo-apply-cont form { position: absolute; left: 0; top: 28%; width: 100%; height: 71.7%; max-height: 342px; text-align: center; }
.popup-demo-apply .popup-demo-apply-cont .app-inp { padding: 0 16%; height: 20.46%; max-height: 70px; }
.popup-demo-apply .popup-demo-apply-cont .text { display: block; width: 100%; height: 100%; line-height: 3.5rem; font-size: 1.1rem; color: #a8a8a8; text-indent: 2.5rem; background: none; border: none; }
.popup-demo-apply .popup-demo-apply-cont .app_tel { margin-top: 5.2%; }
.popup-demo-apply .popup-demo-apply-cont .popup-demo-apply-close { position: absolute; right: 0; top: 0; width: 3rem; height: 3rem; }
.popup-demo-apply-bg { width: 100%; }
.popup-demo-apply .popup-demo-apply-cont .tip_show { height: 7.9%; max-height: 27px; line-height: 1.3rem; color: #f00; font-size: 1.2rem; }
.popup-demo-apply .popup-demo-apply-cont .btn_appsubmit { margin: 0 auto; width: 72.1%; height: 26.3%; }
.bar-selection { top: 40px; }
.bar-selection .popup-mask { background: rgba(0,0,0,.6); }
.popup-bar-selection { top: 3.05rem; }
.popup-bar-selection .item-selection { display: none; }
.item-selection { position: relative; padding: 1.5rem 1rem 1rem .25rem; font-size: 0; background: #fff; }
.item-selection::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #F1F1F5; }
.item-selection .link { display: inline-block; margin-bottom: 1rem; width: 25%; height: 2rem; line-height: 2rem; font-size: .8rem; }
.item-selection .link span { display: block; margin: 0 .25rem 0 1rem; background: #F1F1F5; border-radius: 4px; text-align: center; }
.item-selection .link.active span { background: #dc137b; color: #fff; }
/*分享页面*/
.share_box { position: fixed; z-index: 1002; bottom: 1%; left: 0; right: 0; margin: 0 auto; width: 96%; height: 100px; background: #ffffff; border-radius: 6px; }
.share_box .social-share { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.share_box .share_style { position: relative; height: 100%; width: 25%; display: inline-block; float: left; margin: 0; }
.share_box .share_style a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.header_tckbg { position: fixed; left: 0; top: 44px; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; overflow: hidden; z-index: 1000; }