/* Template Preview */
body,html { height:100%;}
.template-preview-body { margin:0; padding:0; padding-top:60px; overflow:hidden;}

/* Template Preveiw Header */
.template-preview-header { *position:relative; clear:both; margin-top:-60px; height:60px; line-height:60px; background-color:#262626; color:#fff;}
.template-preview-header .logo-s { float:left; display:inline-block; margin:10px 0 0 10px; width:310px; height:40px; background:url(../images/logo.png) no-repeat left center; text-indent:-100000px;}
.template-preview-header .template-preview-infobar { float:right; display:inline-block;}
.template-preview-header .template-preview-infobar .template-preview-item { float:left; display:inline-block; padding:0 10px; height:60px; line-height:60px; border-right:1px solid #434343; font-size:14px;}

/*- Template Preveiw Item -*/
.share-icon { display:inline-block; margin:0 5px; *margin-top:15px; padding:0; width:30px; height:30px; line-height:30px; line-height:1.4; border-radius:50%; border:1px solid #939393; background-color:transparent; font-size:14px; color:#939393;}
.share-icon:hover { color:#fff; text-decoration:none;}
.share-icon .fa { margin-top:30%;}
.share-text { display:inline-block; *position:relative; *margin-top:-40px; *line-height:32px;}

.template-designer,.template-price { display:inline-block; margin:0 5px;}

.template-use-btn { display:inline-block; padding:4px 8px 3px; width:110px; line-height:30px; border-radius:3px; background-color:#8EC960; text-align:center; font-size:14px; color:#fff;}
.template-use-btn:hover { color:#fff; text-decoration:none;}
.template-use-btn .fa { margin-right:5px;}

.template-close-btn { display:inline-block; *margin-top:24px; padding:0 15px; font-size:14px; color:#939393;}
.template-close-btn:hover { color:#fff; text-decoration:none;}

/* Media Type */
.media-type { display:inline-block; margin:0 10px; line-height:30px;}
.media-type .media-type-item { display:inline-block; width:36px; height:36px;}
.media-type .media-type-item a { display:block; line-height:36px; border-radius:3px; text-align:center; font-size:14px; color:#939393; text-decoration:none;}
.media-type .media-type-item a:hover { color:#fff; text-decoration:none;}
.media-type .media-type-item.active a { background-color:#939393; color:#fff;}

/* Template Preview Container */
.template-preview-container { position:relative; clear:both; margin:0 auto; width:100%; height:100%;}
.template-preview-container iframe { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;}


/* Mobile Preview */
.template-wrap { clear:both; margin:0 auto; padding:0; width:1160px;}
/* Header */
.header-nav-wrap { clear:both; display:block; height:60px; background:url(../images/opacity-line.png) repeat-x center bottom;}
.header-nav-wrap .inner-wrap { height:60px; line-height:60px;}

.logo { float:left; display:inline-block; *display:block; width:310px; height:60px; background:url(../images/logo.png) no-repeat left center; text-indent:-10000000px;}

.header-nav { float:right; display:inline-block; *display:block; margin:0; padding:0; list-style:none;}
.header-nav .header-nav-item { float:left; display:inline-block; margin:0 5px; height:60px;}
.header-nav .header-nav-item a { display:block; padding:0 10px; line-height:57px; border-top:3px solid transparent; text-align:center; font-size:16px; color:#fff;}
.header-nav .header-nav-item a:hover { border-top-color:#fff; color:#fff;}

.log-group { float:right; display:inline-block; max-width:200px; height:60px; line-height:60px; text-align:right;}
.log-group .log-btn { display:inline-block; margin-right:10px; padding:5px 10px; border-radius:2px; border:1px solid #fff; line-height:1.5; font-size:12px;}
.log-group .reg-btn { background-color:#fff; color:#55BBA0;}
.log-group .reg-btn:hover { border-color:rgba(255,255,255,.3); background-color:rgba(255,255,255,.5); *background-color:transparent; color:#fff;}
.log-group .login-btn { background-color:transparent; color:#fff;}
.log-group .login-btn:hover { border-color:rgba(255,255,255,.3); background-color:rgba(255,255,255,.5); *background-color:transparent; color:#fff;}

.login-group { float:right; display:inline-block; margin-top:15px; line-height:60px;}
.login-group .loged-btn { float:right; padding:5px; max-width:100px; background-color:#fff; color:#55BBA0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all; text-align:center;}
.login-group .logout-btn { float:right; background-color:transparent; color:#fff;}


/*- Sidebar Left -*/
.qcode-box { position:fixed; margin:120px auto 0 auto; width:174px; height:264px;}
.qcode-box .qcode-img { clear:both; padding:5px; width:174px; height:174px; background-color:#EEE;}
.qcode-box .qcode-text { line-height:50px; text-align:center; font-size:16px; color:#444;}
.choosed-template-btn { margin-top:20px;}

/*- Sidebar Right -*/


/* Baidu Share */
.bdshare-button-style0-24 a, .bdshare-button-style0-24 .bds_more {
	float:none !important;
	font-size:14px !important;
	padding-left:0 !important;
	line-height:30px !important;
	height:30px !important;
	background-image:none !important;
	background-repeat:no-repeat;
	cursor:pointer;
	margin:0 !important;
}
.bd_weixin_popup { height:305px !important;}

.bdshare-button-style0-24 a:hover:before { color:#fff;}

/* mobile preview*/
.mobile-preview-wrap { width: 100%; text-align: center; overflow-y: auto; height: 100%; overflow-x: hidden; top: 100px; }
.mobile-preview-wrap .mp-sidebar-left { display: inline-block; height: 560px; width: 200px; }
.mobile-preview-wrap .mp-sidebar-right { display: inline-block; height: 560px; width: 200px; }
.preview-iframe { display: block; position: relative; width: 320px; height: 504px; transform: scale(.9); -webkit-transform: scale(.9); -ms-transform: scale(.9); -moz-transform: scale(.9); transform-origin: 0 0; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; -moz-transform-origin: 0 0; outline: 0; border: none }
.phone-content { position: absolute; top: 139px; left: 22px; width: 288px; height: 454px; overflow: hidden; background-color: #fff }
#phone-component { position: relative; display: inline-block; width: 332px; height: 678px; margin-left: 30px; margin-right: 30px; background-image: url(../images/mobile-preview/6s.png); background-size: 100% 100%; background-repeat: no-repeat; vertical-align: top; z-index: 999; }
#phone-component.iphoneX { width: 329px; height: 661px; background-image: url(../images/mobile-preview/iphonex.png) }
#phone-component.iphoneX .phone-head { top: 19px; left: 20px; width: 288px; height: 64px; border-radius: 27px 27px 0 0; background-image: url(../images/mobile-preview/iphonex-head-black.png) }
#phone-component.iphoneX .page-title { margin-top: 37px; display: inline-block }
#phone-component.iphoneX.white .phone-head { background-image: url(../images/mobile-preview/iphonex-head-white.png) }
#phone-component.iphoneX #go-back { top: 40px }
#phone-component.iphoneX .phone-content { top: 80px; left: 21px; width: 286px; height: 560px; border-bottom-left-radius: 27px; border-bottom-right-radius: 27px; }
#phone-component.iphoneX .preview-iframe { width: 320px; height: 636px; transform: scale(.9); -webkit-transform: scale(.9); -ms-transform: scale(.9); -moz-transform: scale(.9) }
#phone-component.iphoneX .phone-head #go-back { color: #000; font-size: 12px; line-height: 12px; background-image: url(../images/mobile-preview/left-black.png) }
#phone-component .page-title { width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.phone-head { position: absolute; top: 81px; left: 22px; width: 288px; height: 58px; background-image: url(images/mobile-preview/phone-head.jpg); background-size: 100% 100%; background-repeat: no-repeat; text-align: center }
.phone-head #go-back { color: #fff; cursor: pointer; position: absolute; left: 10px; top: 25px; font-size: 14px; line-height: 25px; padding-left: 14px; background-image: url(../images/mobile-preview/left.png); background-size: auto 15px; background-repeat: no-repeat; background-position: left center }
.app-link-wrap { position: relative; text-align: left; width: 180px; }
.app-link-wrap label { display: inline-block; width: 40px; margin-left: 40px; }
.app-link-wrap input { width: 140px; height: 24px; padding: 0 10px 0 5px; border: 1px solid #ccc; background-color: #fff; color: #535353; font-size: 14px; line-height: 24px; outline: none; /*border-radius:3px;*/ }
.app-link-wrap .copy-link-btn { display: inline-block; position: absolute; top: 0; left: 137px; width: 45px; height: 24px; line-height: 24px; border: 1px solid #3498db; color: #3498db; background: #fff; text-align: center; /*border-top-right-radius:3px;border-bottom-right-radius:3px;*/ cursor: pointer; }