@import url('https://cdn.vbegin.com.cn/weui/2.1.2/weui.min.css');
@import url('https://cdn.vbegin.com.cn/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://cdn.vbegin.com.cn/stylesheet/reset/reset.min.css');
@import url('https://cdn.vbegin.com.cn/swiper/4.0.7/css/swiper.min.css');
@import url('preview.css');
@import url('viewer.min.css');

body{ font-size:14px; color:#222; width: 100%; height: 100%; overflow: hidden; }
a{ text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0); color:#000;}
.overauto{ -webkit-overflow-scrolling: touch;}
.red{ color: #f00;}
.viewer-button{ background: rgba(255, 0, 0, .5);width: 50px;height: 50px; right: 30px; top: 20px; margin: 0;}
.viewer-button:before{left: 50%;bottom: 50%;margin: 0 0 -10px -10px;}
.viewer-fixed{ z-index: 9999;}
.foot{ width: 100%; height: 30px; line-height: 30px; text-align: center; font-size: 11px; position: fixed; left: 0; bottom:0; z-index: 9; border-top:1px solid #eee; background: #f5f5f5;}

.box h1 { font-size:22px; line-height:36px;  margin:0px 13px; }
.box h2,.box h5,.box h6 { font-size:20px; line-height:36px; margin:0px 13px; }
.box p{ font-size: 14px; line-height:20px; }

.box a{ position: absolute; right: 0; top: 0; cursor: pointer; display: block; width: 40px; height: 40px; line-height: 40px; background: rgba(255,255,255,.3); text-align: center;}
.box a .fa{ font-size: 34px; opacity: .1;}

.app.body{ width: 100%; height: 100%; max-width: 100%; margin: 0 auto; position: relative; overflow: hidden;}
.menu{ width: 400px; height: 100%; padding-bottom: 30px; box-sizing: border-box; min-width: auto; max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; position: absolute; left: 0; top: 0;border-right: 1px solid #ddd;z-index: 1;background: #fff;}
.menu .menutitle{ height: 47px; line-height: 47px; font-weight: 600; border-bottom: 1px solid #ddd; text-align: center; font-size: 20px;}
.menu .submenu{ display: none; line-height: 16px; border-bottom:1px solid #eee; padding: 10px 15px 10px 115px; font-size: 16px; position: relative; cursor: pointer;}
.menu .submenu .icon{ width: 40px; height: 40px; margin-right: 15px; position: absolute; top: 50%; left: 15px; margin-top: -20px; }
.menu .submenu .text{ line-height: 20px; padding: 0 20px 0 55px; display: flex;align-items: center; min-height: 40px;word-wrap: break-word;word-break: normal;word-break:break-all;}
.menu .submenu .fa{ height: 40px; line-height: 40px; width: 18px;text-align: center; font-size: 20px; position: absolute; right: 15px; top: 50%; margin-top: -20px; color: #333;}
.menu .submenu .fa.fa-plus-square-o{ display: none;}
.menu .submenu .fa.fa-minus-square-o{ display: none;}
.menu .submenu.first{ display: block;}
.menu .submenu.next .fa{ display: none;}
.menu .submenu.next .fa-plus-square-o{ display: block; }
.menu .submenu.active{ background: #f5f5f5;}
.menu .sub0{ padding-left: 15px;}
.menu .sub1{ padding-left: 45px;}
.menu .sub1 .icon{ left: 45px;}
.menu .sub2{ padding-left: 75px;}
.menu .sub2 .icon{ left: 75px;}
.menu .sub3{ padding-left: 95px;}
.menu .sub3 .icon{ left: 95px;}
.menu .sub4{ padding-left: 115px;}
.menu .sub4 .icon{ left: 115px;}

.product{ width: 100%; height: 100%; overflow-x: hidden; padding-bottom: 30px; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 2; position: absolute; left: 401px; top: 0; background: #eee; box-sizing: border-box;}
.product .welcome{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; box-sizing: border-box; background: #eee; z-index: 999;align-items:center;justify-content:center;display: flex; font-size: 60px; }
.product .title{ display: none; background: #f5f5f5; padding: 10px 40px; position: fixed; width: 100%; max-width: 800px; box-sizing: border-box; border-bottom: 1px solid #ddd; z-index: 9;}
.product .title .icon{ position: absolute; left: 0; top: 50%; height: 20px; padding: 10px 0; margin-top: -20px; width: 40px; text-align: center;}
.product .title .icon .fa{ line-height: 20px; font-size: 18px;}
.product .title .text{ text-align: center; line-height: 20px; min-height: 20px; height: 20px;overflow: hidden;}
.product .template{ background: #fff; max-height: 800px; padding:150px 0 15px 0;}
.product .template .box{ border: 0; width: 100%; height: 100%; max-width: 800px; max-height: 800px; margin: 0 auto;}
.product .template .box p{ font-family: auto;}
.product .probox{ position: fixed; width: 100%;left: 401px; top: 0; min-height: 20px; font-size: 14px; text-align: center; box-sizing: border-box; z-index: 9;}
.product .probox::before{ position: absolute; right: 25px; top: 50%; height: 20px; line-height: 20px; font-size: 20px; margin-top: -14px; z-index: 9; }
.product .probox .name{ position: relative; padding: 15px 30px; line-height: 16px; background: #f5f5f5; border-top: 1px solid #ddd; border-bottom: 1px solid #bbb; cursor: pointer; }
.product .probox .name img{ display: none;}

ul.select{ position: absolute; left: 0; top: 100%; width: 100%; background: #fff; border: 1px solid #ddd; box-sizing: border-box; max-height: 400px; overflow-y: auto; display: none;}
ul.select li{ text-align: center; padding: 10px; border-bottom: 1px solid #ddd; cursor: pointer;}
ul.select li img{ width: 30px; height: 30px; vertical-align: middle; margin-right: 10px;}
ul.select li:hover, ul.select li.active{background: #f5f5f5;}

.product .typelist{ text-align: center; position: fixed; left: 401px; top: 48px; width: 100%; box-sizing: border-box;}
.product .typelist .weui-flex{}
.product .typelist .weui-flex.typetitle{ background: #e5e5d9;}
.product .typelist .weui-flex.typebox{ background: #fff;}
.product .typelist .weui-flex .weui-flex__item{ border-right:1px solid #bbb; border-bottom:1px solid #bbb; cursor: pointer; padding: 10px; position: relative; }
.product .typelist .weui-flex .weui-flex__item::before{ position: absolute; right: 10px; top: 50%; height: 20px; line-height: 20px; font-size: 14px; margin-top: -12px; }
.product .typelist .weui-flex .weui-flex__item .placeholder{align-items:center;justify-content:center;display: flex; height: 100%; line-height: 16px;}
.product .typelist .weui-flex .weui-flex__item:last-child{ border-right: 0;}
.product .typelist .weui-flex .weui-flex__item:last-child::before{ right: 25px;}

.product .swiperBox{ padding: 10px 0; background: #fff; position: relative; border-top: 1px solid #ddd;}
.product .swiperBox .swiper-slide{ text-align: center; cursor: pointer;}
.product .swiperBox .swiper-slide img{ max-width: 400px;}
.product .swiperBox .swiper-button-next{ background: none; text-align: center;opacity: .85; width: 40px; height: 80px; color: #aaa; margin-top: -40px; z-index: 9999;}
.product .swiperBox .swiper-button-prev{ background: none; text-align: center;opacity: .85; width: 40px; height: 80px; color: #aaa; margin-top: -40px; z-index: 9999;}
.product .swiperBox .swiper-button-next.swiper-button-disabled{opacity: .35; z-index: 9999;}
.product .swiperBox .swiper-button-prev.swiper-button-disabled{opacity: .35; z-index: 9999;}
.product .swiperBox .swiper-button-next::before{ font-size: 34px; line-height: 80px; position: relative;}
.product .swiperBox .swiper-button-prev::before{ font-size: 34px; line-height: 80px;}

.weui-half-screen-dialog__hd{ height: 40px; }
.weui-half-screen-dialog__bd{ height: 210px;overflow: hidden;padding: 0; position: relative; z-index: 1; }
.weui-half-screen-dialog__ft{ padding: 10px 24px 30px;position: relative;bottom: 0px;left: 0;text-align: center;width: 100%;box-sizing: border-box;z-index: 99;}
.weui-picker__item img{ margin-right: 10px;}
.weui-half-screen-dialog__hd__side{ top: 11px; left: -3px;}


    .box.box800{ width: 800px!important; height: 800px!important;}
    .box.box800 h1 { font-size:20px!important; line-height:32px!important;  margin:0px 11px!important; }
    .box.box800 h2,.box h5,.box h6 { font-size:18px!important; line-height:32px!important; margin:0px 11px!important; }
    .box.box800 p{ font-size: 13px!important; line-height:18px!important; }

    .box.box700{ width: 700px!important; height: 700px!important;}
    .box.box700 h1 { font-size:18px!important; line-height:28px!important; margin:0px 9px!important; }
    .box.box700 h2,.box h5,.box h6 { font-size:16px!important; line-height:28px!important; margin:0px 9px!important; }
    .box.box700 p {font-size: 12px!important; line-height:16px!important; }

    .box.box600{ width: 600px!important; height: 600px!important;}
    .box.box600 h1 { font-size:16px!important; line-height:24px!important; margin:0px 7px!important; }
    .box.box600 h2,.box h5,.box h6 { font-size:14px!important; line-height:24px!important; margin:0px 7px!important; }
    .box.box600 p {font-size: 11px!important; line-height:14px!important; }

    .box.box500{ width: 500px!important; height: 500px!important;}
    .box.box500 h1 { font-size:14px!important; line-height:20px!important; margin:0px 5px!important; }
    .box.box500 h2,.box h5,.box h6 { font-size:12px!important; line-height:20px!important; margin:0px 5px!important; }
    .box.box500 p{ font-size: 10px!important; line-height:12px!important; }


@media (max-width: 1200px) {
    .box h1 { font-size:20px; line-height:32px;  margin:0px 11px; }
    .box h2,.box h5,.box h6 { font-size:18px; line-height:32px; margin:0px 11px; }
    .box p{ font-size: 13px; line-height:18px; }
}
@media (max-width: 1100px) {
    .box h1 { font-size:18px; line-height:28px; margin:0px 9px; }
    .box h2,.box h5,.box h6 { font-size:16px; line-height:28px; margin:0px 9px; }
    .box p {font-size: 12px; line-height:16px; }
}
@media (max-width: 1000px) {
    .app.body{ width: 100%; height: 100%; max-width: 800px; margin: 0 auto; position: relative; overflow: hidden;}
    .menu{ width: 100%; height: 100%; min-width: 100%; max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 1; position: absolute; left: 0; top: 0; border: 0;}
    .menu .submenu{ display: none; line-height: 16px; border-bottom:1px solid #eee; padding: 10px 15px 10px 115px; font-size: 16px; position: relative;}
    .menu .submenu .icon{ width: 40px; height: 40px; margin-right: 15px; position: absolute; top: 50%; left: 15px; margin-top: -20px; }
    .menu .submenu .text{ line-height: 20px; padding: 0 20px 0 55px; display: flex;align-items: center; min-height: 40px;}
    .menu .submenu .fa{ height: 40px; line-height: 40px; width: 18px;text-align: center; font-size: 20px; position: absolute; right: 15px; top: 50%; margin-top: -20px; color: #333;}
    .menu .submenu .fa.fa-plus-square-o{ display: none;}
    .menu .submenu .fa.fa-minus-square-o{ display: none;}
    .menu .submenu.first{ display: block;}
    .menu .submenu.next .fa{ display: none;}
    .menu .submenu.next .fa-plus-square-o{ display: block; }
    .menu .submenu.active{ background: none;}
    .menu .sub0{ padding-left: 15px;}
    .menu .sub1{ padding-left: 45px;}
    .menu .sub1 .icon{ left: 45px;}
    .menu .sub2{ padding-left: 75px;}
    .menu .sub2 .icon{ left: 75px;}
    .menu .sub3{ padding-left: 95px;}
    .menu .sub3 .icon{ left: 95px;}
    .menu .sub4{ padding-left: 115px;}
    .menu .sub4 .icon{ left: 115px;}

    .product{ width: 100%; height: 100%; padding-left: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 2; position: absolute; left: 100%; top: 0; background: #eee;}
    .product .title{ display: block; background: #f5f5f5; padding: 10px 40px; position: fixed; width: 100%; max-width: 800px; box-sizing: border-box; border-bottom: 1px solid #ddd; z-index: 9;}
    .product .title .icon{ position: absolute; left: 0; top: 50%; height: 20px; padding: 10px 0; margin-top: -20px; width: 40px; text-align: center;}
    .product .title .icon .fa{ line-height: 20px; font-size: 18px;}
    .product .title .text{ text-align: center; line-height: 20px; min-height: 20px; height: 20px;overflow: hidden;}
    .product .template{ background: #fff; max-height: 800px; padding:46px 0 5px 0;}
    .product .template .box{ border: 0; width: 100%; height: 100%; max-width: 800px; max-height: 800px; margin: 0 auto;}
    .product .template .box p{ font-family: auto;}
    .product .probox{ position: relative; width: 100%;left: 0; top: 0; padding-left: 0; min-height: 20px; font-size: 14px; text-align: center; background: #f5f5f5; box-sizing: border-box;}
    .product .probox::before{ position: absolute; right: 15px; top: 50%; height: 20px; line-height: 20px; font-size: 20px; margin-top: -14px; }
    .product .probox .name{  padding: 15px 30px; border-top: 1px solid #ddd; border-bottom: 1px solid #bbb; }
    .product .probox .name img{ display: none;}
    .product .typelist{ text-align: center; position: relative; left: 0; top: 0; padding-left: 0;}
    .product .typelist .weui-flex{}
    .product .typelist .weui-flex.typetitle{ background: #e5e5d9;}
    .product .typelist .weui-flex.typebox{ background: #fff;}
    .product .typelist .weui-flex .weui-flex__item{ border-right:1px solid #bbb; border-bottom:1px solid #bbb; padding: 10px; overflow-x: hidden; position: relative; }
    .product .typelist .weui-flex .weui-flex__item::before{ position: absolute; right: 10px; top: 50%; height: 20px; line-height: 20px; font-size: 14px; margin-top: -12px; }
    .product .typelist .weui-flex .weui-flex__item .placeholder{align-items:center;justify-content:center;display: flex; height: 100%; line-height: 16px;}
    .product .typelist .weui-flex .weui-flex__item:last-child{ border-right: 0;}
    .product .typelist .weui-flex .weui-flex__item:last-child::before{ right: 10px;}

    .product .swiperBox{ padding: 10px 0; background: #fff; position: relative; border: 0;}
    .product .swiperBox .swiper-slide{ text-align: center;}
    .product .swiperBox .swiper-slide img{ max-width: 400px;}
    .product .swiperBox .swiper-button-next{ background: none; text-align: center;opacity: .85; width: 40px; height: 80px; color: #aaa; margin-top: -40px; z-index: 9999;}
    .product .swiperBox .swiper-button-prev{ background: none; text-align: center;opacity: .85; width: 40px; height: 80px; color: #aaa; margin-top: -40px; z-index: 9999;}
    .product .swiperBox .swiper-button-next.swiper-button-disabled{opacity: .35; z-index: 9999;}
    .product .swiperBox .swiper-button-prev.swiper-button-disabled{opacity: .35; z-index: 9999;}
    .product .swiperBox .swiper-button-next::before{ font-size: 34px; line-height: 80px; position: relative;}
    .product .swiperBox .swiper-button-prev::before{ font-size: 34px; line-height: 80px;}


    .box h1 { font-size:18px; line-height:28px; margin:0px 9px; }
    .box h2,.box h5,.box h6 { font-size:16px; line-height:28px; margin:0px 9px; }
    .box p {font-size: 12px; line-height:16px; }
}
@media (max-width: 800px) {
    .menu{ z-index: 1;}
    .box h1 { font-size:20px; line-height:32px;  margin:0px 11px; }
    .box h2,.box h5,.box h6 { font-size:18px; line-height:32px; margin:0px 11px; }
    .box p{ font-size: 13px; line-height:18px; }
}
@media (max-width: 700px) {
    .box h1 { font-size:18px; line-height:28px; margin:0px 9px; }
    .box h2,.box h5,.box h6 { font-size:16px; line-height:28px; margin:0px 9px; }
    .box p {font-size: 12px; line-height:16px; }
}
@media (max-width: 600px) {
    .box h1 { font-size:16px; line-height:24px; margin:0px 7px; }
    .box h2,.box h5,.box h6 { font-size:14px; line-height:24px; margin:0px 7px; }
    .box p {font-size: 11px; line-height:14px; }
}
@media (max-width: 500px) {
    .box h1 { font-size:14px; line-height:20px; margin:0px 5px; }
    .box h2,.box h5,.box h6 { font-size:12px; line-height:20px; margin:0px 5px; }
    .box p{ font-size: 10px; line-height:12px; }
}
@media (max-width: 400px) {
    .box h1 { font-size:12px; line-height:16px; }
    .box h2,.box h5,.box h6 { font-size:10px; line-height:16px; }
    .box p{ font-size: 8px; line-height:9px; }
}

.canvas-wrapper{ display: none; width: 800px; height: 800px; position: fixed; left: 0; top: 0; background: #fff; z-index: 9999; border: 1px solid #ddd; overflow: auto;}
.canvas-wrapper .close{ position: absolute; right: 0; top: 0; width: 40px; text-align: center; color: #999; cursor: pointer;}
.canvas-wrapper .close .fa{height: 40px; line-height: 40px; font-size: 26px;}
.canvas-wrapper #canvas{ background: #fff;}