/* CSS初始化 */
*{margin: 0; padding: 0; box-sizing: border-box;}
html, body {margin: 0; padding: 0; width: 100%;}
body { padding: 0; margin: 0; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;width: 100%; background-color: #F7F8FA;}
a {color: rgba(0, 0, 0, 0.9); text-decoration: none; }
ul, li, h1, h2, h3, h4, h5, h6, dl, dt, dd, form, input, hr, img, div, label, span, p{ margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 ,h7 ,h8 ,h9 { font-weight: normal;  font-family:"Microsoft YaHei",arial;}
input { font-size: 12px; }
ul, li { list-style: none outside none; }
h4 { font-size: 14px; }
h5 { font-size: 13px; }
h6 { font-size: 12px; }
img { border: 0 none; }
input { font-family: Arial, Helvetica, sans-serif; }
a{text-decoration:none;-webkit-tap-highlight-color: transparent;}
a:hover{text-decoration:none}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.text-center {
	text-align: center;
}
/*移动页面布局*/
.container{
	width: 100%;
	z-index: 9;
	padding-top: 62px;
}

/*头部*/
.mobile-head {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 62px;
	z-index: 3;
	box-sizing: border-box;
	padding-bottom: 12px;
	background: #F7F8FA;
}

.mobile-head.success-page {
	border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

.mobile-head a {
	display: inline-block;
	padding-top: 16px;
	padding-left: 20px;
}

.mobile-head .nav-icon {
	width: 20px;
  height: 15px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
	float: right;
	display: inline-block;
	margin-top: 24px;
	margin-right: 20px;
	-webkit-tap-highlight-color:rgba(0,0,0,0);

}

.mobile-head .nav-icon::before {
	content: '';
	position: absolute;
	left: -20px;
	right: -20px;
	top: -20px;
	bottom: -20px;
}

.mobile-head .nav-icon span {
	display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #656565;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.15s ease-in-out;
  -moz-transition: 0.15s ease-in-out;
  -o-transition: 0.15s ease-in-out;
  transition: 0.15s ease-in-out;
}

.mobile-head .nav-icon span:nth-child(1) {
  top: 0px;
}

.mobile-head .nav-icon span:nth-child(2),
.mobile-head .nav-icon span:nth-child(3) {
  top: 6px;
}

.mobile-head .nav-icon span:nth-child(4) {
  top: 12px;
}

.nav-icon.open span:nth-child(1) {
  top: 6px;
  width: 0%;
  left: 50%;
}
.nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nav-icon.open span:nth-child(4) {
  top: 6px;
  width: 0%;
  left: 50%;
}

.mobile-head .mobile-head-text {
	font-size: 12px;
	line-height: 17px;
	color: #606060;
	font-weight: 500;
	margin-top: 4px;
	text-align: center;
}

.logo {
	display: block;
	margin: 0 auto;
	width: 130px;
	height: 30px;
	background: url(//static.clewm.net/cli/images/cli_logo_new.png) no-repeat;
	background-size: contain;
	background-position: center;
}

.navbar-collapse {
	position: fixed;
	top: 62px;
	left: 0;
	right: 0;
	height: 0;
 background-color: #f5f5f5;
 border-top: 0.5px solid transparent;
 z-index: 1200;
}

.collapsing {
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

.navbar-collapse.in {
	height: 440px;
	display: block;
	z-index: 1200;
	background-color: #F7F8FA;
	border-top: 0.5px solid rgba(0, 0, 0, 0.1);
}

.navbar-nav.nav {
	position: relative;
	z-index: 2;
	padding: 10px 0 20px;
}

.navbar-nav.nav li + li {
	margin-top: 4px;
}

.navbar-nav.nav li a {
	padding: 12px 24px;
	display: block;
	line-height: 26px;
	font-size: 18px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.9);
}

.navbar-nav.nav li a.active {
	color: #06AE56;
}

.navbar-nav.nav li a:hover,
.navbar-nav.nav li a:active {
	background-color: #F0F0F0;
}

.navbar-collapse .navbar-pc-tips {
	padding: 20px 0 20px;
	margin: 0 24px;
	border-top: 1px solid #f0f0f0;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.5);
	line-height: 22px;
	font-weight: normal;
}

.navbar-collapse .navbar-pc-tips a {
	color: #576B95;
}

.navbar-collapse-bg {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.45);
	display: none;
}

.navbar-collapse.in + .navbar-collapse-bg {
	display: block;
}

.context-wrap {
	margin: 0 16px 12px;
	background: #FFFFFF;
	border-radius: 12px;
}

.contain{
	padding: 16px;
	background-color: #fff;
	position: relative;
}

.contain textarea {
	width: 100%;
	height: 140px;
	font-size: 16px;
	line-height: 22px;
	color: rgba(0, 0, 0, 0.9);
	background-color: #F7F8FA;
	border: none;
	border-radius: 8px;
	resize: none;
	padding: 12px 16px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	margin-bottom: 4px;
}

.platform {
	padding: 16px;
  padding-bottom: 0;
}

.platform .info-pc,
.platform .info-mina {
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.platform .info-pc {
  border-top: 0.5px solid var(--78828-c-13, rgba(120, 130, 140, 0.13));
}


.platform svg {
  width: 25px;
  height: 25px;
}

.platform .info {
  margin-left: 20px;
  margin-right: 12px;
  flex: 1;
}

.platform h3,
.badgeItemTitle {
  color: rgba(0, 0, 0, 0.85);
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}

.platform h3 + p,
.badgeDesc {
  color: var(--00045-text-color-secondary, rgba(0, 0, 0, 0.45));
  font-family: "PingFang SC";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 153.846% */
  margin-top: 4px;
}

.platform .title {
	font-weight: 600;
	font-size: 19px;
	line-height: 27px;
	color: rgba(0, 0, 0, 0.9);
	margin-bottom: 6px;
}

.platform .desc {
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.5);
}

.other-platform-entry {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 24px 0 6px;
}

.platform-entry {
	padding: 8px 16px;
  border-radius: 16px;
  background: #F7F8FA;
  color: var(--primary-6166-bc-7, #166BC7);
  font-family: "PingFang SC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  word-break: keep-all;
  display: flex;
  align-items: center;
}

.platform-entry:hover,
.platform-entry:active {
	background: #F0F0F0;
}

.comp-wrap {
	padding: 16px 16px 0;
}

.comp-wrap .full-stylelib-wrapper {
	margin-left: -16px;
	margin-right: -16px;
}

.submit {
	text-align: center;
	margin-top: 12px;
}

.submit a {
	display: inline-block;
	text-align: center;
	line-height: 48px;
	background-color: #07C160;
	border-radius: 8px;
	color: #fff;
	font-size: 17px;
	width: 160px;
	height: 48px;
}

.submit a:hover {
	background-color: #30D27E;
}

.input-error {
	height: 24px;
	font-size: 14px;
	color: #e64340;
	text-align: left;
	line-height: 20px;
	margin-top: 8px;
}

.section-title {
	color: rgba(0, 0, 0, 0.85);
  -webkit-text-stroke-width: 0.2px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.40);
  font-family: "PingFang SC";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px; /* 144.444% */
}

.section-info {
	margin-top: 8px;
	font-size: 13px;
	line-height: 18px;
	color: #666;
}

.know-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #3073a6;
	margin-top: 10px;
	font-weight: bold;
	line-height: 18px;
}

/* 兼容安卓文字不垂直居中 */
.know-more span,
.more-link span {
	box-sizing: border-box;
	padding: 2px 0;
	line-height: normal;
	font-size: 12px;
}

.flex-box {
	display: flex;
	justify-content: center;
}

.desc-ul {
	margin-top: 32px;
	text-align: center;
}

.desc-ul li {
	color: #333;
	font-size: 13px;
	font-weight: 400;
	line-height: 24px;
	text-align: left;
	list-style: disc;
}

.more-link {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: #357BB3;
	line-height: 18px;
}

.more-link:focus {
	outline: none;
}

.codeGuide {
	margin-top: 25px;
	border-radius: 6px;
	padding: 22px 20px 24px;
	background-color: #f8f8f8;
}

.codeGuide h3 {
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 4px;
}

.guide-item {
	margin-top: 24px;
	display: flex;
	width: 100%;
}

/* .guide-item-left,
.guide-item-right {
	flex: 1;
} */

.guide-item-left {
	height: 26px;
	font-weight: bold;
	color: #333;
	line-height: 26px;
	padding-left: 26px;
	margin-top: 8px;
}

.guide-item-right {
	font-size: 13px;
	font-weight: 400;
	color: #333;
	line-height: 22px;
	margin-left: 14px;
}

.guide-item-right p {
	color: #999;
	line-height: 18px;
}

.mina-icon {
	background: url(//static.clewm.net/static/images/mob/mina_icon@2x_abc3670.png);
}

.pc-icon {
	position: relative;
	background: url(//static.clewm.net/static/images/mob/pc_icon@2x_922fe03.png);
}

.pc-icon::after {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(//static.clewm.net/static/images/mob/clilogo-all@2x_37d8858.png);
	background-repeat: no-repeat;
	background-size: 7px 5px;
	background-position: 5px 6px;
}

.mina-icon,
.pc-icon {
	background-repeat: no-repeat;
	background-size: 24px 24px;
	background-position: 0 0;
}

.important-text {
	margin-left: 4px;
	color: #666;
}

/* success 页面 */

.success-top-text {
	margin-bottom: 16px;
	font-weight: 400;
	font-size: 17px;
	line-height: 24px;
	color: rgba(0, 0, 0, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
}

.success-top-text .clifont {
	display: inline-block;
	text-align: center;
	line-height: 14px;
	margin-right: 8px;
	color: #07C160;
	padding: 2px;
	font-size: 22px;
}

.success-body {
	position: relative;
	margin-bottom: 32px;
}

.success-container {
	display:block;
	margin-top: calc(36px + 62px);
	text-align: center;
}

.qr-img {
	display: inline-block;
	width: 220px;
	height: 220px;
}

.btn-wrap {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
	justify-content: center;
}

.btn {
	display: inline-block;
	line-height: 48px;
	border: none;
	font-size: 17px;
	text-align: center;
	width: 180px;
	height: 48px;
	background: #07C160;
	border-radius: 8px;
}

.btn::after {
	border: none;
}

.btn-saveqr {
	margin-top: 100px;
	background-color: #07C160;
	color: #fff;
}

.btn-saveqr:hover,
.btn-saveqr:active,
.btn-saveqr:focus {
    background-color: #30D27E;
	color: #fff;
}

.btn-create {
	color: #06AE57;
	background-color: #fff;
}

.btn-create:hover,
.btn-create:active
{
	color: #333;
}

.btn-create.primary:hover,
.btn-create.primary:active {
	color: #fff;
	background-color: #30D27E;
}

.subText {
	text-align: center;
	color: #999;
}

.card-wrap {
	display: flex;
	justify-content: center;
	margin-top: 16px;
	padding: 0 40px;
}

.card {
	font-family: 'PingFang SC';
	padding: 16px 0;
	border-top: 0.5px solid rgba(0, 0, 0, 0.1);
	font-size: 14px;
	line-height: 22px;
	color: rgba(0, 0, 0, 0.5);
}

.card-desc {
	box-sizing: border-box;
	text-align: left;
	margin-top: 6px;
}

.detail-btn {
	padding: 0 2px;
	background:#f4f4f4;
	font-size: 13px;
	color: #607892;
	border: none;
	outline: none;
}

/*底部*/
.foot{
	padding-top: 40px;
	padding-bottom: 40px;
	font-size: 12px;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}
.foot-slogan {
	padding: 0 20px;
	line-height: 1.5;
	margin-bottom: 32px;
	display: flex;
    flex-direction: column;
    align-items: center;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.5);
}
.foot-logo {
	display: block;
	margin: 0 0 8px;
	width: 110px;
	height: 20px;
	background: url(//static.clewm.net/cli/images/cli_logo_new.png) no-repeat;
	background-size: contain;
	background-position: center;
}
.foot a{
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	padding: 0 8px;
	color: #576B95;
}

.foot a + a {
	border-left: 1px solid #CCC;
}

.foot p {
	margin-top: 10px;
	color: #999;
}

.foot-slogan p {
	margin: 0 auto;
	color: rgba(0, 0, 0, 0.5);
	text-align: center;
	font-size: 14px;
	line-height: 22px;
}

#qrcode {
	position: fixed;
	left: -10000px;
}

.save-tip {
	margin-top: 24px;
	white-space: nowrap;
	font-size: 14px;
}

.weui-mask_transparent {
	position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
}

.weui-toast {
		position: fixed;
		z-index: 5000;
		width: auto;
		padding: 5px 16px;
		top: 180px;
		left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
		background: rgba(17, 17, 17, 0.6);
		text-align: center;
		border-radius: 5px;
		color: #FFFFFF;
		font-size: 12px;
		height: 32px;
		line-height: 23px;
}

.weui-toast__content {
		margin: 0 auto;
}

@media screen and (max-height: 500px){
	.success-footer {
		position: static;
		padding-bottom: 24px;
	}
}

/* 首页内容 */

.weui-cell {
	height: 88px;
}

#wraper .weui-cell a:focus,
#wraper .weui-cell a:hover {
	color: unset;
}

.weui-cell_access:active {
	background-color: #F0F0F0;
}

.weui-cells:before,
.weui-cells:after {
	display: none;
}

.cliInfoWrapper .title {
	font-size: 20px;
	line-height: 24px;
}

.cliInfoWrapper .subTitle {
	font-size: 14px;
	line-height: 1.8;
	color: rgba(0, 0, 0, 0.3);
	margin-top: 8px;
	margin-bottom: 16px;
}

.cliInfoWrapper .text-link {
	font-size: 17px;
	line-height: 1.8;
}

.cliCommunityWrapper .title {
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
}

.cliCommunityWrapper .subTitle {
	font-size: 14px;
	line-height: 20px;
	text-align: justify;
	color: rgba(0, 0, 0, 0.5);
	margin-top: 8px;
}

.demo_badge_cells .weui-cell__hd img {
	width: 40px;
}

.demo_badge_cells .weui-cell__hd {
	position: relative;
	margin-right: 20px;
}

.badgeDesc {
	margin-top: 4px;
}

.badgeTitle {
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: rgba(0, 0, 0, 0.9);
	margin-bottom: -6px;
}

.badgeTitleApply {
	font-weight: 600;
	font-size: 16px;
	line-height: 28px;
	color: rgba(0, 0, 0, 0.9);
	margin-bottom: -6px;
}

.clifont.leftIcon {
	color: #07C160;
	font-size: 25px;
}
/* 首页内容 end */


.none {
	display: none;
}

.demo_badge_cells .section-title {
  padding-top: 16px;
  padding-left: 16px;
}

.demo_badge_cells .weui-cell:before {
  opacity: 0;
}

.demo_badge_cells .weui-cell + .weui-cell::before {
  opacity: 1;
}