@font-face {
  font-family: 'form_icons';  /* Project id 2726437 */
  src: url('//at.alicdn.com/t/font_2726437_yy7g9iv11oh.woff2?t=1652281496509') format('woff2'),
       url('//at.alicdn.com/t/font_2726437_yy7g9iv11oh.woff?t=1652281496509') format('woff'),
       url('//at.alicdn.com/t/font_2726437_yy7g9iv11oh.ttf?t=1652281496509') format('truetype');
}
.icon{
    font-family:"form_icons" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.icon_box{
    width:20px;height:20px;text-align: center;line-height: 20px;padding:5px;margin-right:6px;
    vertical-align: middle;
}
.icon_box.big{
	width:28px;height:28px;line-height: 28px;
}
.icon_box.max{padding:5px;}
.icon_box:hover{
    background:#f0f0f0 !important;
}
.icon_box:active{
    background:#e0e0e0 !important;
}
.icon_box .icon{pointer-events: none;}


.ui-select,.ui-text{
    display: inline-block;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease 0s;
    border: 1px solid rgb(187, 187, 187);
    background-color: rgb(255, 255, 255);
    color: rgb(38, 38, 39);
    font-size: 14px;
    line-height: 20px;
    width: 200px;
    height: 32px;
    padding-right: 11px;
    padding-left: 11px;
    border-radius: 4px;position: relative;
}
.ui-text:focus{outline:none;border:1px solid rgba(4, 135, 175, 0.85);}
.ui-select:hover,.ui-text:hover{
    background-color: rgb(240, 240, 240);
    color: rgb(38, 38, 39);
    border-color: rgb(187, 187, 187);
}
.ui-select *{pointer-events: none;}
.ui-select .ui-select-type{font-size:18px;}
.ui-select .ui-select-text{padding-left:4px;font-size:13px;}
.ui-select .icon:last-child{font-size:13px;color:#666;position: absolute;right:8px;}
.ui-text:hover{
    background: unset;
}
/****************************************/
.dlg{
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #FFF;
    border-radius: 4px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
    position: relative;
    max-width: 800px;
    width:100%;
    box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.06);
    max-height: 100%;
    position:fixed;
    z-index:-1;display:none;
    height:50vh;
    transform: scale(0.8, 0.8);
}
.dlg.show{
    display:flex;left:50%;top:50%;transform:translate(-50%, -50%) scale(1, 1);
}
.dlg.max{
    height:90vh;
    max-width: 1000px;
}
.dlg.max1{
    height:95%;
    width:100%;
    max-width: 900px;
    max-height:unset;
}
.dlg.thinner{
    height:90vh;
    max-width: 700px;
}
.dlg.min{
    max-width: 500px;
    max-height: 230px;
}
.dlg.confirm{
    max-width: 400px;
    max-height:210px;
}
.dlg.middle{
    max-width: 360px;
    max-height: 370px;
}
.dlg.middle1{
    height:70vh;
    max-width: 700px;
}
.dlg h3{
    font-size: 24px;
    line-height: 20px;
    color: #262627;
    padding: 32px 32px 26px 32px;
    font-weight:400;margin:0px;
}
.dlg .dlg-close{
    position:absolute;right:18px;top:18px;cursor:pointer;line-height:30px;
    padding:1px;height:30px;width:30px;text-align:center;border-radius:3px;transition:all 200ms;
}
.dlg .dlg-close:hover{
    background:#f0f0f0;
}
.dlg .dlg-close > .icons{
    font-size:13px;vertical-align:middle;color:#555;
}
.dlg .dlg-des{
    padding:0px 32px 8px 32px;font-size:14px;color:#555;
}
.dlg .dlg-btns{
    padding:10px 32px 24px 32px;text-align:right;
}
.dlg .dlg-content{
    padding: 0 32px 10px 32px;position:relative;font-size: 14px;flex:1;overflow-y:auto;
}
.dlg .dlg-content > div{height:100%;}
.dlg .dlg-btns > span:last-child{
    margin-left:10px;
}
.dlg-form{}
.dlg-form .dlg-form-text{margin-bottom:5px;font-size:13px;color:#aaa;}
.dlg-form .ui-text, .dlg-form .ui-select{width: calc(100% - 22px);}
.dlg-form .dlg-form-tip{color:#af0404;font-size:12px;padding:3px;}

.mask{
    position:fixed;left:0px;top:0px;width:100%;height:100%;z-index:10;background:rgba(0,0,0, 0.4);
    display:none;
}
.toast{
	position:absolute;
	display:flex;
	opacity:0;font-size:13px;
	z-index:12;min-width:80px;
	padding:3px 6px;border-radius:2px;
	transition:all 100ms;
	background:#fff;box-shadow:1px 1px 1px #ddd;
}
.toast.success{
    background-color: #67C23A;
    color:#fff;
}
.toast.error{
    background-color: #f56c6c;
    color: #fff;
}
.toast.info{
    color: #002da0;
    border: 1px solid #d5e7ff;
    background-color: #d5e7ff;
}
.disable{
    opacity:.3;
    pointer-events:none;
}
.ml20{margin-left:20px}
.ml10{margin-left:10px}
.ml4{margin-left:4px}
.mt110{margin-top:110px;}
.mt50{margin-top:50px;}
.mt5{margin-top:5px;}
.mt65{margin-top:65px;}
.mt80{margin-top:80px;}
.pt160{padding-top:160px;}
.ptb0{padding-top:0px;padding-bottom:0px;}
.pt80{padding-top:80px;}
.pb100{padding-bottom:100px;}
.mt20{margin-top:20px;}
.mb20{margin-bottom:20px;}
.mt10{margin-top:10px;}
.mt30{margin-top:30px;}
.mt16{margin-top:16px;}
.mt8{margin-top:8px;}
.mt3{margin-top:3px;}
.pt0{padding-top:0px !important;}
.pt20{padding-top:20px !important;}
.pb0{padding-bottom:0px !important;}
.pl0{padding-left:0px !important;}
.wid100{width:100px;}
.wid30{width:30px !important;}
.fs30{font-size:30px;}
.fs22{font-size:22px;}
.fs20{font-size:20px;}
.fs16{font-size:16px;}
.fs18{font-size:18px;}
.fs15{font-size:15px;}
.fs14{font-size:14px;}
.fs13{font-size:13px;}
.h26{height:26px;line-height: 26px;}
.h28{height:28px;line-height: 28px;}
.h90{height:90% !important;}
.flex{
	display:flex;align-items:center;
}
.des{
	font-size:12px;color:#888;
}
/*page*/
.m-style {
    position: relative;
    text-align: center;
    zoom: 1;margin-top:20px;
}

.m-style:before,
.m-style:after {
    content: "";
    display: table;
}

.m-style:after {
    clear: both;
    overflow: hidden;
}

.m-style span {
    float: left;
    margin: 0 5px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
}

.m-style .active {
    float: left;
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #ebf2f2;
    color: #555;
    font-size: 14px;
    border: 1px solid #ebf2f2;
}

.m-style a {
    float: left;
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #fff;
    border: 1px solid #ebebeb;
    color: #555;
    font-size: 13px;text-decoration: none;margin-right:5px;
}

.m-style a:hover {
    color: #fff;
    background: #62aa38;opacity:0.8;
}
.m-style .now, .m-style .count {
    padding: 0 5px;
    color: #f00;
}

.m-style .eg img {
    max-width: 800px;
    min-height: 500px;
}
/*********view************/
.main-nav{
	height:100%;
	transition:all 150ms;
	width:0%;overflow-x:hidden;
	position:absolute;top:0px;left:0px;
	z-index:10;
	background:#fff;
	border-right:1px solid #ddd;
	background:#f8f7f9;
	display:none;
}
.main-nav.show{
	display:block;
}
.nav-title{font-size:16px;padding:8px 10px;}
.nav-list{
	overflow-y:auto;
}
.nav-list ul{
	padding:0px;margin:0px;
}
.nav-list li{
	padding:6px 20px;margin:0px;
	list-style: none;font-size:14px;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-break:keep-all;
}

#view-con{
	height:100%;
}
.view-con{
	display:flex;
	flex-direction: column;
	overflow:hidden;
	height:100%;
}

.view-con video{
	position:absolute;left:0px;top:0px;
	object-fit:contain;width:100%;max-height:100%;height:100%;
}
.view-con .img-con{
	position:relative;
	display:flex;align-items:center;
	height:100%;justify-content:center;overflow:auto;
}
.view-con .swiper-container img{
	position:absolute;max-height:100%;
/* 	pointer-events:none; */
	max-width:100%;
}
.view-con .swiper-slide{
	overflow-x:auto;
}
.view-con-head{
	display:flex;justify-content: space-between;width:100%;height:50px;align-items:center;
/* 	border-bottom: 1px solid #ddd;background:#f7f8f9; */
	background:#000;
	border-bottom:1px solid #111;
}
.view-con-head .head-title{
	padding-left:6px;display:flex;align-items:center;margin-top: 2px;
}
.view-con-head .head-share{
	padding-right:6px;height:100%;display:flex;align-items:center;margin-top: 2px;
}
.view-con-head .head-title #file_des{
	font-size:15px;
/* 	color:#444;	 */
	color:#fff;
}
.view-con-head .head-title .icon_box{color:#fff;}
.view-con #videolist{
	flex:1;position:relative;overflow-y:auto;
}
.view-con .view-bottom{
	height:50px;line-height:50px;
	background:#000;
/* 	background:#f7f8f9; */
	border-top: 1px solid #111;
	display:flex;align-items:center;justify-content: space-around;
}
.view-con .view-bottom > .icon_box{
	display:flex;align-items:center;width:80px;justify-content: center;color:#fff;
}
.view-con .view-bottom label{
	font-size:15px;
/* 	color:#666; */
	color:#fff;
}
.view-con .icon_box:active{
	background:#333 !important;
}
.view-con .icon_box:hover{
	background:#212121 !important;
}
/***********uplooad page start***********/
.templates-con{
	height:calc(100% - 10px);width:340px;background:#f7f7f7;border:1px solid #ddd;border-right:0px;
	padding:10px 10px 0px 10px;overflow:hidden;
}
#templates_list{
	display:flex;flex-wrap: wrap;margin-top:8px;justify-content: space-between;
	overflow-y:auto;height:100%;
	align-items: baseline;align-content: baseline;
}
#types_list{
	display:flex;align-items: center;
}
#types_list span{
	padding:2px  4px;margin-right:4px;cursor:pointer;color:#888;
}
#types_list span:hover, #types_list span.active{
	color:#333;text-decoration: underline;
}
.templates-con .word-template-item{
	width:143px;
	border:1px solid #ddd;border-radius:6px;overflow:hidden;
	margin-bottom:8px;
	position:relative;
}
.templates-con .word-template-item:hover{
	border:1px solid #ccc;
}
.templates-con .word-template-item:hover .word-template-op{
	height:50px;
}
.templates-con .word-template-item img{
	width:100%;
}
.templates-con .word-template-op{
	position:absolute;bottom:0px;width:100%;left:0px;
	text-align: center;
	display: flex;
    align-items: center;height:0px;overflow:hidden;
    transition:all 100ms;
    justify-content: center;
}
.templates-con .word-template-op .button{padding:6px  10px;}

/***********upload page end*************/
#watermark{
	font-size:15px;
	color:#444;
	position:absolute;z-index:2;left:10px;top:80px;
}
#watermark a{
	color:#444;text-decoration: none;
}
#page-editor video{
	width:100% !important;
}
#page-editor img{
	width:100%;
	max-width:100%;
	height:auto !important;
	vertical-align: top;
}
/************view end**************/

.price-con{
	display:flex;width:100%;margin-top:40px;
}
.price-item{
	background:#fbfbfd;border-radius:8px;height:576px;width:90%;margin:0 auto;box-shadow:0px 1px 0px #ddd;border:1px solid #eee;
	border-top: 5px solid transparent;position:relative;overflow:hidden;
}
.price-item:hover{
	background:#f8f8fa;
	border-top: 5px solid #92eaa8;
}
.price-item.active{
	border-top: 5px solid #63abf7;
}
.price-item.active:before{
	content:"";
	position:absolute;
	right:0px;top:-35px;
	border:35px solid transparent;
	border-right:35px solid #63abf7;
}
.price-item.active > .icon{
	display:block;
}
.price-item > .icon{
	display:none;
	position:absolute;
	right:3px;top:0px;color:#fff;font-size:17px;
}
.price-item .price-item-title{
	text-align:center;line-height:80px;font-size:18px;color: #63abf7;
}
.price-item .price-item-price{
	text-align:center;font-size:19px;padding:0px 0px 30px 0px;font-weight:300;
}
.price-item .price-item-price label{font-size:16px;}
.price-item .price-item-line{
	display:flex;justify-content:space-between;align-items:center;padding:5px 20px;
}
.price-item .price-item-line span:first-child{font-size:13px;color:#888;}
.price-item .price-item-line span:last-child{font-size:13px;color:#333;}
.price-item .price-item-upgrade{padding:10px;text-align:center;margin-top:20px;}

.upgrade-price{
	display:flex;margin-top:20px;
}
.upgrade-price > div{
	border:2px solid transparent;border-radius:4px;width:140px;height:66px;padding:4px 20px;margin-left:20px;
	box-shadow:0px 0px 2px #ccc;position:relative;overflow:hidden;
}
.upgrade-price > div * {
	pointer-events:none;
}

.upgrade-price > div:hover{
	border:2px solid #63abf7;
}
.upgrade-price > div.active{
	border:2px solid #63abf7;
}
.upgrade-price > div.active:before{
	content:"";
	position:absolute;
	right:0px;top:-35px;
	border:35px solid transparent;
	border-right:35px solid #63abf7;
}
.upgrade-price > div > .icon{
	position:absolute;
	right:-2px;top:0px;color:#fff;display:none;font-size: 20px;
}
.upgrade-price > div.active > .icon{
	display:block;
}

.upgrade-price > div:first-child{
	margin-left:0px;
}
.upgrade-price .price-text{
	font-size:22px;
}
.upgrade-price .price-text-lt{
	font-size:15px;text-decoration: line-through;
}
.price-pay-text{
	color:#f60;font-size:20px;
}
.upgrade-pay-con{
	display:flex;justify-content: space-around;text-align:center;align-items:center;
}
.upgrade-pay-con > div{
	width:150px;height:70px;display:flex;align-items:center;border:1px solid #ddd;text-align:center;justify-content: center;
	border-radius: 4px;position:relative;overflow:hidden;
}
.upgrade-pay-con > div:hover{
	border:1px solid #63abf7;
}
.upgrade-pay-con > div.active{
	border:1px solid #63abf7;
}
.upgrade-pay-con > div.active:before{
	content:"";
	position:absolute;
	right:0px;top:-35px;
	border:35px solid transparent;
	border-right:35px solid #63abf7;
}
.upgrade-pay-con > div > .icon:last-child{
	position:absolute;
	right:0px;top:0px;color:#fff;display:none;font-size: 20px;
}

.upgrade-pay-con > div * {
	pointer-events:none;
}
.upgrade-pay-con > div.active > .icon:last-child{
	display:block;
}


.upgrade-head{
	text-align:center;position:relative;
}
.upgrade-head hr{
	position:absolute;width:100%;background:#ddd;top:24px;z-index:-1;left:0px;border:0px;height:1px;
}
.upgrade-head-con{
	background:#fff;padding:0px 20px;width:150px;display:flex;align-items:center;margin:0 auto;
}
.upgrade-pay-tip{
	margin:40px 0px;text-align:center;position:relative;
}
.upgrade-pay-tip-con{
	background:#fff;padding:0px 20px;width:160px;margin:0 auto;
}

.upgrade-pay-tip hr{
	position:absolute;width:100%;background:#ddd;top:9px;z-index:-1;left:0px;border:0px;height:1px;
}
.upgrade-tip{
	position: absolute;
    background: #f60;
    color: #fff;
    padding: 2px 20px;
    left: -22px;
    top: 5px;
    transform: rotate(-45deg);
    font-size: 13px;
}
#upgrade_pay_win.small{
	width:320px !important;height:450px !important;
}

.text-row{
	
}
.text-row .text-row-title{
	display:inline-block;width:60px;text-align:right;color:#666;
}
.text-row .text-row-val{
	font-size:15px;padding-left:6px;
}

.image-list{
	display:flex;flex-wrap: wrap;margin-top:15px;height:360px;max-height:360px;overflow-y:auto;
}
.image-list > div{
	flex:0.25;min-width:25%;max-height:160px;border-radius:6px;position:relative;
}
.image-list > div img{
	height:calc(100% - 20px);width:calc(100% - 20px);
	margin:10px;border-radius:6px;
}
.image-list > div .icon_box{
	position:absolute;right:10px;top:16px;background:#fff;color:#333;border-radius:5px;
}
.image-list > div .iconfont{
	color:#333;    transform: rotateZ(45deg);pointer-events:none;
    display: inline-block;
}
/***view****/
.swiper-container {
        width: 100%;
        height: 100%;
    }
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#file_des_type{
	border-radius:4px;padding:0px 10px;font-size:14px;min-height:30px;
	line-height:30px;background:rgba(0,0,0,.45);position:absolute;max-width:87%;
	left:14px;width:auto;z-index:9;bottom:64px;color:#fff;transition:all 150ms;
}
#file_des_type.video_tip{
	bottom:150px;
}
#file_des_type a{
	color:#fff;
}
.view-list{
	height:100%;position:absolute;top:0px;width:65%;background:#fff;z-index:10;
	transition:all 150ms;
}
.view-list.hide{
	width:0px;opacity:0;z-index:-1;
}
.view-list.show{
	width:65%;opacity:1;z-index:10;
}
#video_list{
	display:flex;flex-direction: column;overflow:hidden;height: 100%;
}
#video_list .video-item-con{
	flex:1;overflow-y:auto;
}
#video_list .video-item-title{
	height:30px;padding:10px 10px;
}
#video_list .video-item-title > div{
	display: flex;justify-content: space-between;align-items: center;
}
#video_list .video-item{
	height:34px;line-height:34px;padding:0px 10px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;
	cursor: pointer;color:#666;text-decoration: none;font-size:13px;
}
#video_list .video-item a{
	
}
#video_list .video-item.active{
	background:#f3f3f3;
}
#video_list .video-item:hover{
	background:#f7f7f7;
}
#video_list .iconfont{
	transform:rotate(45deg);display:inline-block;pointer-events:none;
}


@media only screen and (max-width: 1500px) {
    .view-list{
    	max-width:300px;
    }
}