@charset "utf-8";

/*mods*/
.mods{ padding-bottom:15px;}
.mods dd{ float:left; margin:5px; font-size:16px}
.mods .dd-placeholder{ float:left;margin:5px; border:1px dashed #2196f3; box-sizing:border-box; min-width:100px;}

/*area*/
.phonearea{ width:500px}
.phone{ width:414px; height:736px; background:url(phone.gif) no-repeat 0 0 #f6f6f6; padding:95px 26px 98px 26px; }
.phone .area{ width:414px; height:736px; overflow-x: hidden; position: relative;}

.setarea{ vertical-align:top; padding-top:50px;}
.setarea h4{ font-size:16px; font-weight:400}
.setarea p{ padding:10px 0; color:#999}
.setarea p em{ padding-left:5px;}
.setarea p.qlink a{ margin-right:10px;}


/*handle*/
.btn-handle { display:block; padding:10px 20px; border:1px solid #2196f3; color:#2196f3; background:#fff;}
.btn-handle:hover{ background:#2196f3; color:#fff}

.dd-empty{ text-align:center; color:#ccc; padding-top:100px;}
.dd-dragel {
	position: absolute;
	pointer-events: none;
	z-index: 9999;
}
.dd-dragel > .dd-item .dd-handle {
	margin-top: 0;
}
.dd-dragel .dd-handle {
	-webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
	box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}

/**/
.area .dd-placeholder{ border:1px dashed #2196f3;}
.area .dd-item{ position:relative}
.area .dd-handle{ position:absolute; width:100%; height:100%; left:0; top:0; z-index:100}
.area .dd-item .editmod{ position:absolute; right:0px; top:0px; background:#2196f3; color:#fff; padding:2px 5px; z-index:200}
.area .dd-item .setmod{ position:absolute; right:0px; top:0px; background:#fff; z-index:300; border:1px solid #ddd; border-bottom:0px;}
.area .dd-item .setmod li{ border-bottom:1px solid #ddd; height:30px; line-height:30px; padding:0 15px}
.area .dd-item .setmod li a{ color:#2196f3}
.area .dd-item .setmod li a:hover{ color:#f00}

.modcontent img{ width:414px;}

.selectarea{ border:1px dashed #DEDDB8; padding:0 10px; background:#FCFCF1}
.selectarea li{ height:40px; line-height:40px; border-bottom:1px solid #E4E2CB; overflow:hidden;}
.selectarea li:last-child{ border-bottom:0px;}

/**/
.setnav{}
.setnav p{ padding:10px 0; font-size:16px;}
.setnav p a{ color:#06C}
.setnav li{ border-bottom:1px solid #eee; padding:10px 0;  display: -webkit-box; display: -webkit-flex;display: flex; line-height:36px;	}
.setnav li.title{ font-size:16px}
  
.setnav li em{ display:inline-block; width:50px; text-align:center;}
.setnav li em.icon{ line-height:36px; font-size:18px; cursor:pointer;}
.setnav li .navlist{ width:60px; margin-right:20px; display:inline-block}
.setnav li .navlist input{ width:38px}

.setnav li .navname{ width:120px; margin-right:20px; display:inline-block}
.setnav li .navname input{ width:98px}
.setnav li .navurl{ display:inline-block;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;	}
.setnav li .navurl input{ width:360px}
  
.setslider{}
.setnav li .sliderpic{ width:260px; margin-right:10px; display:inline-block}
.setnav li .sliderpic input{ width:150px; vertical-align:middle}
.setnav li .sliderpic img{ height:36px; vertical-align:middle; margin-right:10px;}

.returnmessage{ background:#f00; display:inline-block; padding:6px 20px; color:#fff; font-size:14px}    

#showimage{ border:1px solid #ddd; min-height:200px; width:652px;}
#showimage img{ width:100%;}
.upareaimage{ font-size:16px; line-height:42px; height:42px; padding:0 0 10px 0 !important; display:block}
.upareaimage:before{ content:"+"; margin-right:10px; font-size:24px; display:inline-block; width:40px; height:40px; text-align:center; line-height:40px; border:1px solid #ddd; vertical-align:middle; color:#000;}

#arealist{ background:#f6f6f6; padding:0 10px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
#arealist li,#arealist h4{ padding:10px 0; border-bottom:1px solid #eaeaea; display: -webkit-box; display: -webkit-flex;display: flex; line-height:38px}
#arealist h4{ border-bottom:1px solid #ddd; line-height:24px; font-weight:400}
#arealist li:last-child{ border-bottom:0px;}
#arealist em,#arealist span{ display:inline-block;}
#arealist em{ width:40px;  text-align:center;}
#arealist em.icon{ line-height:38px; vertical-align:middle; font-size:18px}
#arealist .areaid{ width:50px; text-align:center}
#arealist .areaposition{ width:182px;}
#arealist .areaposition input{ width:160px;}

#arealist .areaurl{ -webkit-box-flex: 1;-webkit-flex: 1;flex: 1; padding-left:10px}
#arealist .areaurl input{ width:320px;}
#arealist p{ padding:10px 0; border-top:1px solid #ddd;}

.addarea{ float:left; padding-left:10px; height:200px}
.addarea a{ display:block; font-size:32px; padding:0px !important; border:1px solid #ccc; -moz-border-radius: 24px;-webkit-border-radius: 24px;border-radius: 24px; width:36px; height:36px; text-align: center; line-height:32px;}


.map_position .map_position_bg {
	background-color: #6cbcff;
	filter: alpha(opacity=50);
	opacity: 0.5;
	width: 100%;
	height: 100%;
}

.map_selected_position .map_position_bg {
  background-color: #ff9933;
}

.position_container {
  position: absolute;
}
.map_position {
	border: 1px solid #6cbcff;
	position: absolute;
	cursor: move;
	z-index: 1;
}
.map_selected_position {
	border: 1px solid #ff9933;
	z-index: 2;
}
.map_position .link_number_text {
	color: #fff;
	position: absolute;
	top: -10px;
	left: -10px;
	background-color: #333;
	width:18px;
	height:18px;
	text-align:center;
	line-height:18px;
	border:2px solid #fff;
	-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius:50%;
	font-size:10px;
}
.map-selected-position .link-number-text {
	background-color: #c00;
	border: 1px solid #c00;
}
.map_position .resize {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 5px;
	height: 5px;
	border: 1px solid #fff;
	background: #333;
	filter: alpha(opacity=90);
	opacity: 0.9;
	cursor: nw-resize;
}
.map_position .delete {
    width: 16px;
    height: 16px;
		line-height:13px;
		font-size:12px;
		text-align:center;
    position: absolute;
		color:#fff;
		background-color: #000;
		filter: alpha(opacity=50);
		opacity: 0.5;
    top: 0;
    right: 0;
    cursor: pointer;
}
.map_position .delete:before{ content:"x"}


/**/
.mod_header{ height:50px; background:#F30; line-height:50px; text-align:center; color:#fff; font-size:18px}
.mod_header .icon{ display:inline-block; width:50px; height:50px; line-height:50px; font-size:24px; text-align:center;}
.mod_header .icon-back{ float:left}
.mod_header .icon-side{ float:right}

.mod_footer{ height:50px; border-top:1px solid #ddd; background:#eee;}
.mod_footer ul{ padding:10px 0 0 0}
.mod_footer li{ float:left; width:20%; text-align:center}
.mod_footer li .icon{ display:block}
.mod_footer li.a{ color:#f30;}
.mod_footer li.a .icon-nv:before{ content:"\e7ff";}

/*loginsmsot*/
.loginsmsot{}
.loginsmsot form{ display:inline-block; padding:20px 20px 10px 20px; background:#fff; width:360px; -webkit-box-shadow: 0 1px 30px rgba(0,0,0,0.15);box-shadow: 0 1px 30px rgba(0,0,0,0.15);	}
	
.loginsmsot form ul{ border-bottom:1px solid #eee; margin-bottom:10px; font-size:16px}
.loginsmsot form ul li{ float:left; height:42px; line-height:42px; padding:0 20px; border-style:solid; border-width:1px 1px 0 1px; border-color:#fff;border-color:#eee}
.loginsmsot form ul li.a{ background:#eee}

.loginsmsot form p{ padding:10px;display: -webkit-box; display: -webkit-flex;display: flex; line-height:36px;}
.loginsmsot form p span{ display:inline-block; width:60px; line-height:36px; font-size:16px}
.loginsmsot form p .input{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;}
.loginsmsot form p a{ padding-left:10px;}

.block_btn{ border-top:10px solid #f6f6f6; margin:0 20px; padding-top:20px; font-size:16px; padding-bottom:20px;}
.block_btn li{ float:left; padding:0 20px 0 0;} 
.block_btn li a{ display:block; border:1px solid #999; height:40px; line-height:40px; padding:0 20px;	-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
.block_btn li a:hover{ color:#2196f3; border:1px solid #2196f3}

/**/
.siteinfo{ -webkit-box-shadow: 0 1px 30px rgba(0,0,0,0.15);box-shadow: 0 1px 30px rgba(0,0,0,0.15); background:#fff; margin-bottom:20px;display: -webkit-box; display: -webkit-flex;display: flex;}
.siteinfo .qrcode{ width:252px; height:252px; background:url(qrcode.gif) no-repeat 0 0; border-right:1px solid #eee; padding:24px;}
.siteinfo .qrcode img{ width:252px;}
.siteinfo ul{ -webkit-box-flex: 1;-webkit-flex: 1;flex: 1; padding:40px 30px;}
.siteinfo ul li{ height:30px; line-height:30px; font-size:16px}
.siteinfo ul li span{ display:inline-block; padding-right:10px;}
.siteinfo ul li a{ padding-left:10px;}

.apis { padding:15px 30px;}
.apis li{display: -webkit-box; display: -webkit-flex;display: flex; line-height:40px;}
.apis li span{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1; height:19px; border-bottom:1px dashed #ddd}
.apis li cite{ width:100px; font-size:16px}
.apis li em{ width:180px; text-align:center; color:#390}

.paytype{}
.paytype li{ float:left; margin-right:20px;}
.paytype li a{ border:1px solid #999; color:#000; padding:0 20px; height:34px; line-height:34px; display:inline-block}
.paytype li.a a{ color:#2196f3; border:1px solid #2196f3;}


.paycode{ display:inline-table; width:150px; height:150px; background:#eee; margin-bottom:10px; }
#modset{ position:absolute; left:530px; top:630px}
.returnmessage{ background:#f00; display:inline-block; padding:6px 20px; color:#fff; font-size:14px}     

.diymods{}
.diymods li{ float:left; width:260px; border:1px solid #ddd; margin-right:15px;}
.diymods div.cover{ width:240px; height:300px; padding:10px; background:#fff; border-bottom:1px solid #ddd; vertical-align:middle;display: table-cell;}
.diymods div.cover img{ width:240px;}
.diymods div.info{ padding:10px;}
.diymods div.info h3{ font-weight:400; height:30px; line-height:30px; overflow:hidden;}
.diymods div.info h3 span.price{ float:right; color:#f30;}
.diymods div.info h3 span.price:after{ content:"元";}
.diymods div.info h3 span.free{ color:#090; float:right;}
.diymods div.info h3 em{ font-style:normal; padding-left:3px; color:#ccc; font-size:12px;}
.diymods div.info h4{ border-bottom:1px dotted #ddd; font-weight:400; padding-bottom:5px;}
.diymods div.info h4 span.sales{ float:right; color:#999; font-size:12px;}
.diymods div.info p{ padding-top:10px;}
.diymods div.info p.state{ color:#090}
.diymods div.info p.state a{ float:right;}
.block{ padding-bottom:1px;}
.block xmp{ padding:15px; background:#F7F7EC; margin:15px; -moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; display:block; border:1px dashed #000; line-height:20px;}
.block_info + xmp{ margin-top:0px;}

.synchronization{ padding:30px 50px;}
.synchronization p{ padding:10px 0;}

.modinfo{ padding-bottom:20px;}
.modinfo img{ float:left; padding:5px; border:1px solid #ddd; background:#fff; margin-right:20px;}
.modinfo h3{ font-weight:400; font-size:36px; padding:20px 0}
.modinfo p{ font-size:16px; padding:5px 0 }
.modinfo p span { color:#999}
.modinfo p span:after{ content:":"; padding:0 5px;}
.modinfo p a.c{ padding-left:5px;}
.modinfo p em.price{ color:#f00; font-size:24px}
.modinfo p em.free{ color:#090;}
.modtext{ padding:20px;}
.modtext img{ float:left; margin-right:20px; width:414px; padding:10px; border:1px solid #eee; background:#f6f6f6; }
.modtext p{ font-size:16px; line-height:1.8}
.modtext img + p{ float:left; border:1px dashed #ddd; background:#f6f6f6; padding:20px;}