/**-- 重写基础字号 --**/
@media (max-width: 767px) {
	html, body { font-size: 14px; height: 100%; }
}

/**-- 全局背景图片 --**/
.body-bg-wrap { position: fixed; z-index: -1; background-color: #b0d8f9; top: 0; left: 0; right: 0; bottom: 0; }
.body-bg-wrap .body-bg-anim { position: absolute; width: 100%; height: 10rem; background: linear-gradient(to bottom, #b0d8f9 0%, #FFF 100%); }
.body-bg-wrap .body-bg-mask { position: absolute; width: 100%; height: 100%; /*background-image: url(images/body-pic.png);*/ background-image: url(//common.itez.com.cn/pic/account/body-pic.png); background-repeat: repeat; }

/**-- 全局排版 --**/
.layout-wrap { width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

/**-- 模板：页头 --**/
.header-container { position: relative; height: 24rem; }
.header-container .header-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.header-container .header-bg-b1 { clip-path: polygon(0 0, 100% 0, 100% 90%); z-index: 1; background-color: rgba(5, 133, 237, .25); }
.header-container .header-bg-b2 { clip-path: polygon(0 10%, 100% 0, 100% 80%); z-index: 1; background-color: rgba(5, 133, 237, .25); }
.header-container .header-bg-01 { clip-path: polygon(0 0, 100% 0, 100% 42%, 0 100%); z-index: 1; background-color: rgba(5, 133, 237, .5); }
.header-container .header-bg-02 { clip-path: polygon(0 0, 100% 0, 100% 41%, 0 95%); z-index: 2; background-color: rgba(5, 133, 237, .5); }
.header-container .header-bg-inner { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 85%); z-index: 9; background-color: #0585ed; /*background-image: url(images/bg-header.jpg);*/ background-image: url(//common.itez.com.cn/pic/account/bg-header.jpg); background-repeat: no-repeat; padding-top: 3rem; }
.header-container .header-bg-inner .logo-box { position: relative; z-index: 11; }
.header-container .header-bg-inner .logo-box .logo-comp { max-width: 80%; max-height: 4rem; }
.header-container .header-bg-inner .logo-box .logo-acc { display: flex; justify-content: center; align-items: center; font-size: 1.2rem; color: #FFF; margin-top: 2rem; }
.header-container .header-bg-inner .logo-box .logo-acc p { font-size: 1.3rem; margin-left: 1rem; padding-left: 1rem; position: relative; }
.header-container .header-bg-inner .logo-box .logo-acc p:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 1px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); }
.header-container .header-bg-inner .header-canvas { z-index: 9; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

@media (max-width: 767px) {
	.header-container { height: 18rem; }
	.header-container .header-bg-01 { clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%); }
	.header-container .header-bg-02 { clip-path: polygon(0 0, 100% 0, 100% 61%, 0 95%); }
	.header-container .header-bg-inner { clip-path: polygon(0 0, 100% 0, 100% 60%, 0 85%); }
	.header-container .header-bg-inner .layout .logo-box .logo-acc { margin-top: 1.5rem; }
}

/**-- 模板：主体区域 --**/
.main-container { position: relative; z-index: 10; }
.main-inner { background: #FFF; overflow: hidden; border-radius: 1rem; transition: all 0.3s; margin: 0 auto; }

/**-- 模板：悬浮导航按钮 --**/
.main-btns-wrapper { position: fixed; z-index: 999; }
.main-btns { text-align: center; display: flex; flex-direction: column; }
.main-btn { background: rgba(3,85,152,.3); font-size: 0.8rem;  color: #EEE; display: flex; flex-direction: column; justify-content: center; align-items: center; text-shadow: 2px 2px 4px rgb(0 0 0 / 30%); }
.main-btn:not(:first-child) { margin-top: 1px; }
.main-btn:hover { background: rgba(3,85,152,.8); color: #FFF; }
.main-btn i { font-size: 1.3rem; padding-bottom: 0.1rem; }

@media (max-width: 767px) {
	.main-container { margin-top: -3rem; }
	.main-inner { width: 90%; }
	.main-btns-wrapper { left: 0; bottom: 40%; }
	.main-btn { padding: 0.4rem; }
	.main-btn:first-child { border-top-right-radius: 1rem;  }
	.main-btn:last-child { border-bottom-right-radius: 1rem;  }
}
@media (min-width: 768px) {
	.main-container { margin-top: -7rem; }
	.main-inner { width: 50rem; }
	.main-btns-wrapper { left: 8rem; bottom: 30%; }
	.main-btn { width: 4rem; height: 4rem; border-radius: 2rem; }
	.main-btn:not(:first-child) { margin-top: 0.5rem; }
}

/**-- 模板：页脚 --**/
.footer-container { position: relative; height: 10rem; margin-top: 5rem; }
.footer-container .footer-bg, .footer-container .footer-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.footer-container .footer-bg { z-index: 21; background-color: rgba(5, 133, 237, .6); clip-path: polygon(0 0, 100% 5rem, 100% 100%, 0 100%); }
.footer-container .footer-content { z-index: 22; background-color: rgba(5, 133, 237, .8); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 1rem; clip-path: polygon(0 5rem, 100% 0, 100% 100%, 0 100%); }
.footer-inner { color: #e4f2fe; text-shadow: 1px 1px 4px rgb(0 0 0 / 50%); position: relative; display: inline-block; }
.footer-inner:after { position: absolute; content: ''; width: 100%; height: 1px; left: 0; top: 55%; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%); }
.footer-inner a { color: #e4f2fe !important; }
.footer-inner a:hover { color: #FFF !important; }
.footer-inner .footer-support { opacity: .6; margin-top: 1.5rem; }

/**-- 页面：主标题 --**/
.main-title { position: relative; padding: 1.2rem; display: flex; justify-content: space-between; align-items: center; }
.main-title:after { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, #0080eb 40%, #CCC 60%); }

/**-- 页面：分组标题 --**/
.group-title { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.group-title:before, .group-title:after  { height: 1px; content: ''; flex: 1; }
.group-title:before { background: linear-gradient(to right, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 30%); }
.group-title:after { background: linear-gradient(to left, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 30%); }
.group-title h5 { padding: 0 1rem; color: #666; }

/**-- 页面：按钮 --**/
.link-group .link:first-child { border-top-left-radius: 2rem; border-bottom-left-radius: 2rem; }
.link-group .link:last-child { border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; }
.link { background-color: #0080eb; color: #FFF; padding: 0.4rem 1rem; display: inline-block; }
.link:hover { background-color: #00559b; color: #FFF; }
.link.link-sm { padding: 0.2rem 0.8rem; }
.link.link-lg { font-size: 1.2rem; padding: 0.6rem 1.2rem; }
.link.round { border-radius: 2rem; }

/**-- 页面：加载提示 --**/
.space-loading { width: 100%; height: 16rem; text-align: center; line-height: 16rem; font-size: 0.8rem; color: #999; }

/**-- 页面：图片标题 --**/
.pic-title { width: 100%; padding: 2rem 0; display: flex; justify-content: center; align-items: center; }
.pic-title.max { width: 100%; padding: 5rem 0; display: flex; justify-content: center; align-items: center; }
.pic-title > img { width: 6rem; }
.pic-title.max > img { width: 10rem; }
.pic-title h5 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.pic-title p { color: #666; }
.pic-title em { color: #0080eb; font-style: normal; font-weight: bold; margin: 0 0.2rem; }

@media (max-width: 767px) {
	.pic-title { flex-direction: column; }
	.pic-title-inner { margin-top: 1rem; text-align: center; }
}
@media (min-width: 768px) {
	.pic-title { flex-direction: row; }
	.pic-title-inner { margin-left: 2rem; }
}

/**-- 页面：分组导航（主要用于登录方式） --**/
.group-navi { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0 2rem 0; }
.group-navi-item { transition: all 0.3s; flex: 1; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.group-navi-colu { width: 1px; height: 3rem; background: linear-gradient(rgba(196,196,196,0) 0%, rgba(196,196,196,1) 35%, rgba(196,196,196,1) 65%, rgba(196,196,196,0) 100%); }
.group-navi-item-icon { transition: all 0.3s; display: flex; justify-content: center; align-items: center; background: transparent; border-radius: 50%; color: #666; }
.group-navi-item.act .group-navi-item-icon, .group-navi-item:hover .group-navi-item-icon { background: #0080eb; color: #FFF; }
.group-navi-item.act, .group-navi-item:hover { color: #0080eb; }

@media (max-width: 767px) {
	.main-body { padding: 1rem; }
	.group-navi-colu { display: none; }
	.group-navi-item { flex-direction: column; font-size: 0.8rem; }
	.group-navi-item-icon { width: 2.4rem; height: 2.4rem; font-size: 1.3rem; margin-bottom: 0.5rem; }
}
@media (min-width: 768px) {
	.main-body { padding: 2rem; }
	.main-form { padding-right: 6rem; }
	.group-navi-item { font-size: 1rem; }
	.group-navi-item-icon { width: 3rem; height: 3rem; font-size: 1.5rem; margin-right: 0.5rem; }
}

/**-- 页面：主要用于忘记密码 --**/
.forget-box { border: 1px solid #f0f0f0; padding: 15px; margin-bottom: 20px; cursor: pointer; background: #fff; }
.forget-box:hover { transition: all 0.3s; background: #0080eb; color: #FFF; }
.forget-box i { font-size: 1.5rem; margin-right: 0.5rem; }

/**-- 页面：表单扩展，主要用于注册认证 --**/
.append-box { border: 1px solid #acddac; background: #eaf4eb; }
.append-row { padding: 1rem; display: flex; justify-content: space-between; align-items: center; }
.append-row:not(:first-child) { border-top: 1px solid #FFF; }
.append-label { color: #2b8636; display: flex; align-items: center; }
.append-label .append-icon { width: 3rem; height: 3rem; text-align: center; line-height: 3rem; background: #39b54a; font-size: 1.2rem; border-radius: 50%; color: #FFF; }
.append-label .append-text { margin-left: 0.5rem; }
.append-label .append-text p { margin-top: 5px; color: #1e4021; font-size: 0.8rem; }
.append-row .link { background: #39b54a; font-size: 0.8rem; }
.append-row .link:hover { background: #2d8e39; }
.append-row .link.valied { background: #FFF; border: 1px solid #39b54a; color: #39b54a; }
@media (min-width: 768px) {
	.append-wrap { margin-left: 6rem; }
}

/**-- 页面：我的账号 --**/
.info-header { text-align: center; }
.info-header img { width: 10rem; }
.info-row { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.info-row .info-text { width: 40%; text-align: right; color: #777; }
.info-row .info-val { width: 60%; margin-left: 1rem; color: #0080eb; }
.id-row { display: flex; justify-content: center; align-items: center; margin-top: 1rem; }
.id-text { background: #999; color: #FFF; padding: 0.2rem 0.8rem; border-radius: 1rem; }

@media (min-width: 768px) {
	.info-wrap.auth, .info-wrap.quick { margin-left: 6rem; margin-right: 6rem; }
}

/**-- 重写BootStrap --**/
.form-group > * { padding-left: 8px; padding-right: 7px; }
.btn-primary { background-color: #0080eb !important; border-color: #0080eb !important; }
.btn-primary:hover, .btn-primary:active, .btn-primary.hover { background-color: #0070ca!important; }

/**-- 动画 --**/
.ani-stars { animation: starsDraw 10s ease-in-out infinite; }
.ani-move { animation: moveDraw 10s ease-in-out infinite; }
.ani-scale { animation: scaleDraw 5s ease-in-out infinite; }

@keyframes starsDraw {
	0% { transform: scaleY(0.8) rotate(0deg); }
	50% { transform: scaleY(0.4) rotate(-180deg); }
	100% { transform: scaleY(0.8) rotate(-360deg); }
}
@keyframes moveDraw {
	0% { top: -15rem; }
	100% { top: 100%; }
}
@keyframes scaleDraw {
	0% { transform: scale(1); }
	50% { transform: scale(0.8); }
	100% { transform: scale(1); }
}