*{padding:0;margin: 0;}
body {font-family: "SourceHanSansCN Medium", "Microsoft YaHei", "微软雅黑", sans-serif; background: #f2f5f7;font-size: 14px; color:#63676f}
img {max-width: 100%;}
ul, li {list-style: none;}
.fr {float: right}
.fl {float: left}
*:focus, a:focus, a {outline: none;text-decoration: none;}
a:hover {color: #079f87;text-decoration: none;}
.btn{color: #fff;font-size: 20px;border-radius: 7px;box-shadow: 0 5px 15px #deefec;padding: 10px 27px;}
.btn:focus,.btn:active{outline: none;}
.btn-save{background: #2cd2b8;margin-right: 15px;}
.btn-cancel{background: #aad0ca;}

/**************** 头部 ****************/
.header{background: #079f87;}
.header .logo-pic{display: inline-block;max-width: calc(100% - 116px);margin-right: 80px;}
.header .name{font-size: 28px;color: #fff;vertical-align: middle;}
.header .head-r{font-size: 16px;display: inline-block;cursor: pointer;position: relative;}
.header .head-r::before{content: '';background: #fdfdfd;border-left: 20px solid #079f87;border-right: 20px solid #079f87;border-bottom: 20px solid transparent;position: absolute;top: 60px;display: none;}
.header .head-r.on:before{display: block;}
.header .head-r .arrow{display: inline-block;width: 10px;height: 10px;margin-left:10px;transition: all .5s;}
.header .head-r.on .arrow{transform: rotateZ(180deg);}
.header .user-name{color:#fff;display:inline-block;max-width: 150px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;vertical-align: middle;margin-top: -2px;}
.header .user::before{right: 25px;}
.header .user .arrow{background: url(../images/arrow-b1.png) no-repeat right center;}
.header .user .exit{display: none;background: #fff;width:150px;position: absolute;top: 76px;right: -30px;font-size: 18px;color: #7e8287;text-align: center;padding: 3px 14px;z-index: 2;}
.header .user .exit:hover{color: #079f87;}
.header .user.on .exit{display: block;}
.header .nav .arrow{background: url(../images/arrow-b.png) no-repeat right center;}

/* 网站导航 */
.web-nav{background: #fff;box-shadow: 0 10px 20px #e7e9eb;padding: 10px;display: none;position: absolute;width: 100%;top: 80px;z-index: 2}
.web-nav .level1{text-align: right;}
.web-nav .level1 > li{display: inline-block;vertical-align: top; margin-right: 40px;}
.web-nav .level1 > li > span,.web-nav a{font-size: 20px;color: #333;line-height: 32px;}
.web-nav a:hover,.web-nav a:active,.web-nav a:focus{color: #2cd2b8;}
.web-nav .level2{margin-top: 15px;}


/**************** 尾部 ****************/
.footer{background: #3a3c3c;text-align: center;color: #bebebe;padding: 40px 0 30px;}
.footer .ftop{border-bottom: 1px solid #a2a2a2;padding-bottom: 20px;margin-bottom: 17px;}
.footer .ftop li{display: inline-block;}
.footer .ftop li+li{border-left: 1px solid #fff;}
.footer .ftop a{color: #fff;font-size: 16px;padding: 32px;}
.footer .fbot a{color: #bebebe;}
.footer a:hover{text-decoration: underline;}


/************* 主体-左侧 *************/
.main{margin: 30px auto;}
.main .left{background: #fbfbfb;border:1px solid #e4e8ea;}
.main .left a{display: inline-block;width: 100%;background-repeat: no-repeat;background-position: 20px center;line-height: 69px;color: #7e8287;font-size: 20px;padding-left: 60px;border-bottom: 1px solid #e4e8ea;}
.main .left a:hover,.main .left a.on{color: #37393b;background-color: #fff;}
.main .left .menu1{background-image: url(../images/icon11.png);}
.main .left .menu2{background-image: url(../images/icon12.png);}
.main .left .menu3{background-image: url(../images/icon13.png);border-bottom: none;}
.main .left .menu1:hover,.main .left .menu1.on{background-image: url(../images/icon01.png);}
.main .left .menu2:hover,.main .left .menu2.on{background-image: url(../images/icon02.png);}
.main .left .menu3:hover,.main .left .menu3.on{background-image: url(../images/icon03.png);}
/************* 主体-右侧 *************/
.main .right{background: #fff;border: 1px solid #e4e8ea;padding: 30px 60px;}
.main .right > h2{font-size: 25px;color: #37393b;margin: 0 0 30px;padding-bottom: 25px;border-bottom: 1px solid #e9eaee;position: relative;}
.main .right > h2:before{content: '';display: inline-block;width: 27px;height: 4px;background: #2cd2b8;border-radius: 1px;bottom: 0px;position: absolute;left: 36px;}
.main .right .user-info{padding-bottom: 20px;margin-bottom: 30px;border-bottom: 1px solid #e9eaee;}
.main .right .user-safe{margin-bottom: 30px;border-bottom: 1px solid #e9eaee;}
.main .right .com-tit{font-size: 20px;color: #37393b;margin-bottom: 30px;}
.main .right .com-info{margin-bottom: 15px;}
.main .right .com-info .info-group{border: 1px solid transparent;color: #63676f;height: 50px;margin: 0 -15px;padding: 11px 10px 12px;background: #fff;}
.main .right .com-info .w1{width: 90px;font-size: 16px;text-align: right;display: inline-block;color: #949aa8;border-right: 1px solid #ccc;padding: 1px 12px 2px 0px;margin-right: 12px;}
.main .right .com-info .w2{display:inline-block; width: calc(100% - 165px);font-size: 18px;border: none;background: #fff;}
.main .right .com-info .w3{width: 50px;background-color: transparent;background-image: url(../images/icon04.png);background-repeat: no-repeat;background-position: 2px center;border: none;padding-left: 22px;color: #949aa8;}
.main .right .com-info .w3:hover{background-image: url(../images/icon14.png);color: #2cd2b8;}

.main .right .com-info .info-btn{display: none;}
.main .right .com-info.open .info-group{border-color: #e9eaee;}
.main .right .com-info.open .info-btn{display: block;}
.main .right .com-info.open .w2{width: calc(100% - 150px);}
.main .right .com-info.open .w3{display: none;}


/* 账户安全 */
.user-safe input::-webkit-input-placeholder{color:#cacbcd;}
.user-safe input::-moz-placeholder{color:#cacbcd;}
.user-safe input::-moz-placeholder{color:#cacbcd;}
.user-safe input:-ms-input-placeholder{color:#cacbcd;}
.main .right .user-safe .com-info .info-group{margin-bottom: 20px;}
.user-safe .com-info.open{background: #fbfbfb;margin: -10px -60px 10px -60px;padding: 30px 60px 30px 60px;}
.user-safe .info-change{display: none;}
.main .right .user-safe .info-change .info-group{border-color: #e9eaee;}
.main .right .user-safe .info-change .info-btn{display: block;}
.user-safe .info-change .info-btn{margin-left: -15px;margin-right: -15px;}
.user-safe .info-vcode{margin-left: -15px;margin-right: -15px;}
.user-safe .info-vcode .w4{border: 1px solid #e9eaee;background: #fff;font-size: 18px;height: 50px;padding: 11px 20px 12px;margin-right: 10px;width: calc(100% - 170px);}
.user-safe .info-vcode .btn-vcode{background: #718cf1;vertical-align: bottom;border-radius: 0px;padding: 13px 20px;font-size: 16px;}
.user-safe .info-submit{margin:20px -15px 0;}
.user-safe  .btn-save,
.user-safe  .btn-save{width: 100%;}


/* 绑定第三方账号 */
.main .right .sign-type{padding: 10px 10px 20px 20px;}
.main .right .sign-type .bound{float: right;color: #2cd2b8;}
.main .right .sign-type .unbound{float: right;color: #9b9b9b;}
.main .right .sign-type .gary{color:#9b9b9b;}



@media (min-width: 1240px){
	.web-nav .container{width: 1220px;}
}

/*Common For Max1024*/
@media only screen and (max-width: 1199px) {
	.btn{padding: 10px 12px;}
}

/*Common For Max 768*/
@media only screen and (max-width: 992px) {
	.btn{padding: 10px 19px;}
	/**************** 头部 ****************/
	.header .logo-pic{margin-right: 50px;}
}
/*Common For Max 414*/
@media only screen and (max-width: 767px) {
	.btn{padding: 4px 15px;font-size: 16px;}
	/**************** 头部 ****************/
	.header .logo-pic{margin-right: 30px;}
	.header .name{font-size: 20px;}
	/* 网站导航 */
	.web-nav{top: 150px;padding: 20px 15px;}
	.web-nav .level1 > li{width: 100%;margin-bottom: 20px;}
	.web-nav .level2 {margin-top: 10px;}
	.web-nav .level2 li{display: inline-block;margin: 0 20px;}

	.footer .ftop{text-align: left;}
	.footer .ftop li{margin: 5px;}
	.footer .ftop li+li:nth-child(even){border-left: 1px solid #fff;}
	.footer .ftop li+li:nth-child(odd){border-left: none;}

	.main .right{padding: 20px 20px;}
	.main .right .user-info{padding-bottom: 10px;margin-bottom: 40px;}
	.main .right .com-info.open .info-btn{text-align: right;margin-top: 20px;}
}
/*Common For Max 375*/
@media only screen and (max-width: 400px) {}
/*Common For Max 360*/
@media only screen and (max-width: 370px){}
/*Common For Max 320*/
@media only screen and (max-width: 330px) {
	.main .right .com-info .w1{width: 72px;font-size: 14px;}
	.main .right .com-info .w2{width: calc(100% - 144px);font-size: 16px;}
}