/* common */
.wrapper{margin:0 auto;width:1260px}
.form{margin:0 auto;width:410px}
.form-item{position: relative; display:flex;margin-bottom:28px;align-items:center}
.form-item.has-tip {margin-bottom: 0;}
.form-item.required::before {content: '*'; position: absolute; left: -10px; top: 13px; z-index: 1; display: flex; align-items: center; margin-right: 2px;color: #FF5722;}
.form-ipt{box-sizing:border-box;padding:0 12px;height:50px;border:none;background-color:#e9e9e9;font-size:14px;flex:1; border: #e9e9e9 solid 1px;}
.form-ipt.textarea {padding: 18px 12px; resize: none; height: 248px;}
.form-item:last-child{margin-bottom:0}
.form-item.tip-correct::after,
.form-item.tip-error::after { content: ''; position: absolute; top: 17px; right: 12px; z-index: 1; width: 16px; height: 16px; background: url("../images/error.png") 0 0 no-repeat; background-size: 100% 100%;}
.form-item.tip-correct::after { background-image: url("../images/correct.png");}
.form-item.tip-correct .form-ipt,
.form-item.tip-error .form-ipt,
.form-item.password .form-ipt { padding-right: 36px; }
.form-item.password .btn-eye {position: absolute; top: 15px; right: 10px; z-index: 1; width: 20px; height: 20px; background: url("../images/eye_close.png") 0 0 no-repeat; background-size: 100% 100%;}
.form-item.password .btn-eye.open {background-image: url("../images/eye_open.png");}
.btn-submit-common{display:flex;margin:0 auto;width:126px;height:50px;border:1px solid #979797;color:#000;font-size:14px;align-items:center;justify-content:center}
.form-tip {position: relative; margin-top: 3px; margin-bottom: 28px; padding-left: 22px; font-size: 13px; color: #9a9a9a;}
.form-tip::before {content: ''; position: absolute; top: 2px; left: 0; z-index: 1; width: 13px; height: 13px; background: url("../images/icon_warn.svg") 0 0 no-repeat; background-size: 100% 100%;}
.page {display: flex; justify-content: center; padding: 20px 0 0; font-size: 16px; text-align: center;}
.page .page-item {margin: 0 2px;}
.page .active {text-decoration: underline;}
.page a,
.page span {margin: 0 2px;}
.page-head .classify-list {color: #000;}
.page-head .classify-list a {margin-right: 30px;}
.page-head .classify-list .active {color: #9a9a9a;}
.page-head {display: flex; justify-content: space-between; padding: 0px 0 30px; border-bottom:1px solid #979797; font-size: 14px; color: #9a9a9a; line-height: 36px;}
.page-head .head-text { font-size: 40px; line-height: 1; color: #000; padding-bottom:35px;}
.page-head .user-info {padding-top: 26px; text-align: right;}
.page-head .user-name {/*display: flex; align-items: center; */font-size: 14px; color: #737373; line-height: 46px; }
.page-head .user-name .icon {margin-right: 10px;width: 15px;vertical-align: middle;}
.page-head #dataInput{ height:30px; line-height: 30px; }
.page-head .return-btn{ margin-top: 10px; }
 .classify-list {color: #000;}
 .classify-list a {margin-right: 30px;color: #333;}
.classify-list .active {color: #9a9a9a;}


/* dialog */
.dialog-common {position: relative; padding: 30px 50px 48px;}
.dialog-common .btn-close {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: -6px;}
.dialog-common .btn-close .layui-icon {font-size: 26px;}
.dialog-common .dialog-title {margin-top: 6px; font-size: 36px; line-height: 64px;}
.dialog-common .dialog-info {margin: 40px 0 24px; font-size: 16px;}

/* 登录/注册/找回密码 */
.form-title{padding-top:20px;text-align:center;font-size:42px;line-height:128px}
.verification-code{margin-left:10px;width:150px;height:50px;flex:none}
.login-remember{height:82px;color:#8f8f8f;font-size:14px}
.login-remember,.login-remember a{display:flex;align-items:center;justify-content:center}
.login-remember span,.sex-item span{box-sizing:border-box;margin-right:6px;width:12px;height:12px;border:1px solid #979797;border-radius:50%;flex:none}
.login-remember .active span:after {content:''; width: 6px; height: 6px; background-color: #000;    margin: 2px 0 0 2px; display: block; border-radius: 50%;}
.login-remember i {text-decoration: underline;}
.login-remember.active span:after {content:''; width: 6px; height: 6px; background-color: #000;    margin: 2px 0 0 2px; display: block; border-radius: 50%;}
.login-remember .icon-arrow {flex: none; width: 16px; margin-left: 2px; transition: all .3s;}
.login-remember .icon-arrow.active {transform: rotate(180deg);}
.agreement-list { display: none; padding-left: 16px;}
.agreement-list a {display: block; color: #8f8f8f; font-size: 14px; text-decoration: underline;}
.sex-item.active span:after {content:''; width: 6px; height: 6px; background-color: #000;    margin: 2px 0 0 2px; display: block; border-radius: 50%;}
.link-box{padding:60px 0 36px}
.btn-link{display:flex;margin-bottom:10px;color:#a2a2a2;font-size:16px;line-height:24px;justify-content:center}
.btn-link a{text-decoration:underline}
.sex-box{width:200px;color:#a2a2a2;font-size:14px;justify-content:space-around}
.sex-box,.sex-item{display:flex;align-items:center;cursor: pointer;}
.info-other{padding-bottom:60px;color:#a2a2a2;text-align:center;line-height:28px}
.info-other a{margin:0 12px;text-decoration:underline}
.select-address{justify-content:space-between}
.select-address .layui-form-select{width:49%}
.select-address .layui-input{height: 50px; background-color:#e9e9e9; padding-right: 20px;}
.register,.reset-password,.map{padding-bottom:60px}
.register .login-remember{height:26px;justify-content:start}
.register .btn-submit-common,
.reset-password .btn-submit-common {margin-top:40px}
.reset-info{margin:0 auto 40px;width:410px;text-align:center}
.register .link-box {padding: 0 0 30px; margin-top: -20px;}
.register .agreement-content {padding: 12px;}
.phone-number .area-number{ flex: none; width: 20%; margin-right: 12px; }
.phone-number #userTel{ width: 70%; float: right; }
.account-new .sub-title {line-height: 36px; text-decoration: underline;}
.account-new .control-field { padding-bottom: 28px;}
.account-new .control-field .sex-box { width: 140px;}
.account-new .control-field .control-title,
.account-new .control-content .form-item { margin-bottom: 8px;}
.account-new .control-content .form-ipt { margin-right: 5px;}
.account-new .control-content .form-ipt:last-child { margin-right: 0;}
.account-new .control-content .form-ipt.number-ipt { flex: none; width: 96px;}
.account-new .control-field .select-address .layui-form-select { width: 40%; margin-right: 5px;}

/* 经销商地图 */
.page-title-box {padding: 0 0 28px; border-bottom: 1px solid #979797;}
.map .page-title {font-size: 40px; font-weight: normal; line-height: 1; padding-bottom: 35px;}
.map .page-title-info{ font-size: 0.96rem; }
.map .content-title {font-size: 16px; color: #8d8d8d; line-height: 86px;}
.map .content-title span {text-decoration: underline;}
.map .left-side {float: left; width: 31.6%; background-color: #f9f6f1;}
.map .map-content {float: right; width: 66%; height: 600px; background-color: #8d8d8d;}
.map .screen-box {width: 84.6%; margin: 0 auto; padding-top: 10px; font-size: 16px;}
.map .location-info {display: flex; align-items: center; height: 70px; font-size: 16px; color: #8d8d8d;}
.map .location-info .icon {width: 22px; height: auto; margin: 0 16px 0 10px;}
.map .form-line {display: flex; justify-content: space-between;}
.map .form-line .layui-form-select {width: 47.4%; height: 50px;}
.map .form-item .layui-form-select {width: 100%;}
.map .form-line,
.map .form-item {margin-bottom: 20px;}
.map .screen-box .form-item .form-ipt { width: 100%; padding-right: 58px; font-size: 16px; background-color: #fff;}
.map .screen-box .layui-input {height: 50px; border: none;}
.map .form-item .icon-search {position: absolute; top: 50%; right: 9px; z-index: 1; display: flex; align-items: center; width: 18px; transform: translate3d(0, -50%, 0);}
.map .dealer-list {max-height: 310px; margin: 0 auto; padding-bottom: 22px;}
.map .dealer-item {width: 84.6%; margin: 0 auto; padding: 15px 0; border-bottom: 1px solid #979797;}
.map .dealer-item .name {font-size: 16px; line-height: 64px;}
.map .dealer-item .btns {display: flex; align-items: center; justify-content: flex-end; height: 34px; margin-top: 20px; color: #8d8d8d;}
.map .form {width: 100%;}
.map .btn-submit-common { margin-top: 50px;}
.map .success-info {position: absolute; top: 70px; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #fff;}
.map .success-info .tip {margin-bottom: 12px; font-size: 34px;}
.map .success-info.hide {display: none;}

/* 物料首页 */
.material-index-list,
.material-list {padding-top: 20px;}
.material-list .row a {font-size: 15px;color: #a2a2a2; text-decoration: underline;}
.material-index-list ul {display: flex; justify-content: space-between; flex-wrap: wrap;}
.material-index-list .material-item {display: flex; width: 48%; margin-bottom: 40px; background-color: #f9f6f1;}
.material-index-list .material-item.color0{background-color: #d9e5e0; }
.material-index-list .material-item.color1 {background-color: #F9F6F1;}
.material-index-list .material-item.color2 {background-color: #fce387;}
.material-index-list .material-item.color3 {background-color: #062b22;}
.material-index-list .material-item.color4 {background-color: #0a1c3f;}
.material-index-list .material-item.color5 {background-color: #bccde1;}
.material-index-list .material-item.color6 {background-color: #edcfbf;}
.material-index-list .material-item.color7 {background-color: #F9F6F1;}
.material-index-list .material-item.color3,
.material-index-list .material-item.color4 {color: #fff;}
.material-index-list .material-item .item-img {flex: none; width: 50%;}
.material-index-list .material-item .item-img img {display: block; width: 100%; height: 100%;}
.material-index-list .material-item .item-info {flex: 1;display: flex; align-items: center; justify-content: center; text-align: center;}
.material-index-list .material-item .item-info div {width: 100%;}
.material-index-list .material-item .item-title {font-size: 24px; line-height: 60px;}
.material-index-list .material-item .item-info-info {max-width: 60%; margin: 14px auto; font-size: 12px;}
.material-index-list .material-item .btn-view {margin-top: 16px; font-size: 14px; color: #9a9a9a; text-decoration: underline;}
.material-item .item-img .full {transform: scale3d(1,1,1); transition: all .5s; background-size:contain!important; }
/*.material-item:hover .item-img .full {transform:scale3d(1.3,1.3,1.3)}*/

/* 物料列表 */
.material-list ul {width: 102%; margin-left: -1%;}
.material-list .material-item {float: left; width: 22.8%; margin: 0 1.1% 30px;}
.material-list .material-item .rect-80{ padding-bottom: 62%; }
.material-list .item-info {display: flex; justify-content: space-between; height: 70px; padding: 12px 3px; font-size: 14px; position: relative;}
.material-list .item-info .item-title{ width: 100%; text-align: center;  padding: 0 25px;}
.material-list .btn-download {flex: none; width: 24px; height: 24px; margin-left: 12px; background: url("../images/download.png") center center no-repeat; background-size: 24px auto; position: absolute; right: 0; top: 10px;}
.material-list .item-img {position: relative; overflow: hidden;}
.material-list .mask {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, .36); transform:scale3d(1.3,1.3,1.3); opacity: 0; transition: all .5s; cursor: pointer;}
.material-list .mask img {width: 26px;}
.material-list .material-item:hover .mask {transform:scale3d(1,1,1); opacity: 1;}
.material .form {width: 100%; padding-top: 14px; font-size: 16px; line-height: 28px;}
.material .form-line {margin-bottom: 24px;}
.material .radio-item {display: flex; align-items: center; cursor: pointer;}
.material .radio-item .icon {flex: none; box-sizing: border-box; width: 8px; height: 8px; margin-right: 6px; border: 1px solid #9a9a9a; border-radius: 50%;}
.material .radio-item.active {color: #9a9a9a;}
.material .radio-item.active .icon {background-color: #9a9a9a;}
.material .radio-item.active .label {text-decoration: underline;}
.material .check-label {display: flex; align-items: center; margin-top: 6px; padding-right: 18px; font-size: 14px; line-height: 18px; cursor: pointer;}
.material .check-label.special {margin-top: 0;}
.material .check-label span {position: relative; flex: none; box-sizing: border-box; width: 12px; height: 12px; margin-right: 6px; border: 1px solid #9c9c9c;}
.material .form-line.active .check-label span::before {content: ''; position: absolute; top: 50%; left: 50%; z-index: 1; width: 6px; height: 6px; margin: -3px 0 0 -3px; background-color: #9c9c9c;}
.material .spread-box.active .check-label {color: #9a9a9a;}
.material .custom-ipt {padding-bottom: 3px; border-bottom: 1px solid #eaeaea;}
.material .spread-box.disabled .custom-ipt {opacity: .6;}
.material .custom-ipt input {width: 100%; border: none; font-size: 14px;}
.material .custom-ipt input:disabled {background-color: transparent;}
.material .attention {font-size: 14px; color: #8e8e8e; line-height: 28px;}
.material .attention-agree {margin-top: 12px; font-size: 14px;}

/* 下载记录 */
.download-list {padding-top: 20px;}
.download-list .item {display: flex; align-items: center; justify-content: space-between; padding: 16px 10px; border-bottom: 1px solid #eee;}
.download-list .source-info {display: flex; align-items: center;}
.download-list .source-info .item-img {flex: none; width: 105px; margin-right: 24px;}
.download-list .item-info-info .name {font-size: 16px; color: #000; line-height: 32px;}
.download-list .item-info-info .info-detail {display: flex; margin-top: 22px; font-size: 14px; color: #9a9a9a;}
.download-list .date-box span {margin-right: 30px;}
.download-list .link a {margin: 0 6px; text-decoration: underline;}
.download-list .item-btns {display: flex; align-items: center;}
.download-list .item-btns .btn-item {flex: none; display: flex; align-items: center; justify-content: center; width: 130px; height: 50px; margin: 0 11px; border: 1px solid #d2d2d2;}
.download .agreement-confirm {text-align: center;}
.download .agreement-confirm .confirm-title {font-size: 30px; line-height: 82px;}
.download .agreement-confirm .confirm-info {margin: 20px 0;}
.download .confirm-btns {display: flex; align-items: center; justify-content: center;}
.download .confirm-btns a {flex: none; display: flex; align-items: center; justify-content: center; width: 130px; height: 50px; margin: 38px 34px 0; border: 1px solid #cdcdcd;}
.download .dialog-common {padding-bottom: 68px;}
.download .form {width: 100%; padding: 12px 0 30px;}
.download .btn-upload {text-decoration: underline;}

/* 素材申请 */
.source-download .download-list .item-info-info {padding-bottom: 48px;}

.btn-apply {cursor: pointer}

/* 天然钻石在线培训-进阶课程 */
.training .sub-title {margin-top: 63px; font-size: 36px; color: #000; line-height: 46px; text-align: center;}
.training .sub-info { width: 673px; margin: 43px auto; font-size: 22px; line-height: 46px; text-align: center;}
.training-form .sub-title,
.training-form .sub-info {width: 100%; text-align: left;}
.training-form .btn-submit-common {font-family: Arial;}
.training .advanced-info {padding: 50px 0 55px; background-color: #F9F6F1;}
.training .advanced-info .content-field {display: flex; max-width: 1920px; margin:  0 auto;}
.training .advanced-info .img-phone {flex: none; width: 30.5%; margin: 76px 0 0 4.375%;}
.training .advanced-info .img-phone img {display: block;}
.training .advanced-info .info-content {width: 63%;}
.training .advanced-info .tit {font-size: 30px; color: #000; line-height: 46px;}
.training .advanced-info .info-list { margin-top: 37px; overflow: hidden;}
.training .advanced-info .info-item { float: left; box-sizing: border-box; width: 31.9%; height: 230px; margin: 0 1% 13px 0; padding: 20px 16px 16px; background-color: #fff; overflow: hidden;}
.training .advanced-info .item-tit {margin-top: 6px; font-size: 22px; color: #000;}
.training .advanced-info .item-info-info {margin-top: 6px; font-size: 14px; color: #A2A2A2; line-height: 26px;}
.training .advanced-info .item3 { width: 43.3%;}
.training .advanced-info .item4 { width: 53.4%;}
.training .advanced-info .item5 { width: 48.3%;}
.training .advanced-info .item6 { width: 48.3%;}

/* 天然钻石在线培训-入门课程 */
.started-lessons-info {display: flex; justify-content: space-around; width: 1079px; margin: 60px auto;}
.started-lessons-info .info-item {flex: none; width: 279px; text-align: center;}
.started-lessons-info .info-tit {font-size: 26px; color: #000; line-height: 46px;}
.started-lessons-info .info-info {width: 182px; margin: 0 auto; font-size: 18px; color: #A2A2A2; line-height: 30px;}
.started-lessons-info .item2 .info-info {width: 200px;}
.started-lessons-info .item3 .info-info {width: 262px;}
.started-lessons-info .info-item-img {position: relative; width: 234px; margin: 20px auto 0; padding: 0 0 16px 16px;}
.started-lessons-info .info-item-img img {display: block; width: 100%;}
.started-lessons-info .info-item-img::after {content: ''; position: absolute; left: 0; bottom: 0; z-index: -1; width: 212px; height: 350px; background-color: #D9E5E0;}
.started-lessons-bottom {position: relative; display: flex; align-items: center;}
.started-lessons-bottom::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 50%; background-color: #D9E5E0;}
.started-lessons-bottom .img-phone {width: 37%; margin-right: 7%;}
.started-lessons-bottom .qrcode-box {position: relative; width: 220px; height: 220px; margin-top: 80px;}
.started-lessons-bottom .qrcode-box::after {content: ''; position: absolute; right: -10px; bottom: -10px; z-index: -1; width: 100%; height: 100%; background-color: #D9E5E0;}
.started-lessons-bottom .qrcode {display: block; width: 100%; height: 100%;}
.started-lessons-bottom .bottom-info-text {margin-top: 48px; font-size: 40px; line-height: 60px; color: #000;}

/* 天然钻石在线培训-天然钻石零售故事培训系统 */
.training .sub-info-info {width: 89%; margin: 0 auto; padding-bottom: 36px; border-bottom: 1px solid #D4D4D4; font-size: 22px;}
.training .sub-info-info .kantar-logo {width: 91px; display: inline-block; margin-left: 2px; vertical-align: baseline;}
.lessons-info-first .info-tit {width: 89%; margin: 36px auto 0; font-size: 26px; line-height: 46px; color: #000;}
.lessons-info-first .info-first-list {display: flex; align-items: center;}
.lessons-info-first .info-first-list .info-first-item {flex: 1; position: relative; padding: 60px 0;}
.lessons-info-first .info-first-item::after {content: ''; position: absolute; top: 50%; right: 0; z-index: 1; width: 1px; height: 188px; margin-top: -94px; background-color: #D4D4D4;}
.lessons-info-first .info-first-item:last-child::after {display: none;}
.lessons-info-first .info-first-item .text {font-size: 20px; color: #A2A2A2; line-height: 46px; text-align: center;}
.lessons-info-first .info-first-item .icon {display: block; width: 80px; margin: 22px auto 0;}
.lessons-info-second {display: flex;}
.lessons-info-second .info-side {flex: 1; padding: 20px 0 48px;}
.lessons-info-second .side1 {background-color: #D9E5E0;}
.lessons-info-second .side2 {background-color: #F9F6F1;}
.lessons-info-second .info-tit {font-size: 24px; text-align: center; line-height: 34px; color: #000;}
.lessons-info-second .info-list {display: flex; align-items: center; width: 79%; height: 240px; margin: 42px auto 0; padding: 0 20px; background-color: #fff;}
.lessons-info-second .info-list > div {width: 100%;}
.lessons-info-second .info-list p {padding: 12px 0; border-bottom: 1px solid #D4D4D4; font-size: 16px; color: #A2A2A2; line-height: 26px;}
.lessons-info-second .info-list p:last-child {border: none;}
.lessons-info-second .info-list p span {margin-right: 12px; font-size: 20px; color: #000;}
.training .sub-title-icon {display: block; margin: 96px auto 0;}
.training .sub-title.title2 {margin-top: 23px;}
.lessons-info-third {display: flex; align-items: center; height: 308px; margin-bottom: 114px; background-color: #E9E9E9;}
.lessons-info-third .left-side {padding: 0 116px 0 70px; font-size: 40px; line-height: 46px;}
.lessons-info-third .side-title span {font-style: italic;}
.lessons-info-third .side-bottom {display: flex; align-items: center; padding-top: 32px;}
.lessons-info-third .side-bottom-info {font-size: 20px; line-height: 46px; color: #9B9B9B;}
.lessons-info-third .side-bottom-info a{ text-decoration: underline;}
.lessons-info-third .side-bottom .icon {flex: none; width: 60px; margin-right: 18px;}
.lessons-info-third .side-bottom .icon img {display: block; width: 100%;}
.lessons-info-third .right-side {width: 46.3%; font-size: 22px; line-height: 46px;}
.lessons-info-third.third1 {margin-top: 64px; margin-bottom: 284px;}
.lessons-info-third.third1 .right-side {display: flex;}
.lessons-info-third.third1 .right-side .side-item {flex: 1;}
.lessons-info-third.third1 .right-side .side-item img { width: 67%;}
.lessons-info-third.third1 {align-items: initial;}
.lessons-info-third.third1 .left-side {height: 100%; display: flex; align-items: center;}
.lessons-info-third.third1 .right-side {flex: 1; padding-top: 14px;}
.lessons-info-third.third1 .right-side .item-info {height: 80px; padding: 0 6px; font-size: 14px; line-height: 20px; color: #A2A2A2;}

/* 个人中心-设置-密码修改 */
.user-setting .content-box {display: flex;}
.user-setting .menu-box { width: 120px; position: absolute;}
.user-setting .menu-box + .layui-form{ margin: 0 auto; }
.user-setting .menu-box .menu-item { display: flex; align-items: center; line-height: 32px;}
.user-setting .menu-box .icon {flex: none; width: 16px; margin-left: 5px;}
.user-setting .menu-box .menu-item.active {color: #9a9a9a;}

@media screen and (max-width:1024px){
  .material-index-list .material-item {display: block; padding-bottom: 24px;}
  .material-index-list .material-item .item-img {width: 100%;}
  /* 天然钻石在线培训-进阶课程 */
  .training .advanced-info .info-item {width: 48.3%;}
  .training .advanced-info .item6 { width: 97.6%;}

  /* 天然钻石在线培训-入门课程 */
  .started-lessons-info {width: 100%;}

  /* 天然钻石在线培训-天然钻石零售故事培训系统 */
  .training .sub-info-info,
  .lessons-info-first .info-tit {width: 97%;}
  .lessons-info-first .info-first-item .text {font-size: 18px; line-height: 28px;}
  .lessons-info-second .info-list p {padding: 5px 0; line-height: 26px;}
  .lessons-info-third .left-side {padding-right: 24px; padding-left: 36px;}
  .lessons-info-third.third1 {margin-bottom: 230px;}
  .lessons-info-third.third1 .right-side .item-info {height: 130px; padding: 0 6px;}
  .lessons-info-third .right-side {width: 35%; line-height: 36px;}
}

@media screen and (max-width:768px){
  .wrapper{width:90.625%}
  .form{width:100%}
  .form-item{margin-bottom:20px;}
  .form-ipt{height:54px}
  .page {font-size: 14px;}
  .page a,
  .page span {margin: 0 8px;}
  .page-head {display: block; position: relative; padding-top: 50px; padding-bottom: 8px;}
  .page-head .head-text {margin-bottom: 20px; margin-top: 18px; font-size: 1.5rem; line-height: 1.875rem;}
  .page-head .user-name .icon {width: 12px;}
  .page-head .user-info {position: absolute; top: 12px; left: 0; right: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding-top: 0;}
  .page-head .classify-list a {margin-right: 16px;}

  /* dialog common */
  .dialog-common {padding-left: 30px; padding-right: 30px;}
  .dialog-common .btn-close {margin-left: -2px;}
  .dialog-common .dialog-info {margin-top: 18px;}

  /* 登录/注册/找回密码  */
  .form-title{padding-top:0;font-size:30px;line-height:90px}
  .verification-code{margin-left:6px;width:120px;height:54px}
  .link-box{padding-bottom:20px}
  .btn-link,.info-other{font-size:13px;line-height:20px}
  .reset-info{width:100%}
  .register .form-item {padding-left: 10px;}
  .register .login-remember {padding-left: 10px;}

  /* 经销商地图 */
  .map .page-title-box {padding-bottom: 34px;}
  .map .page-title {font-size: 36px; line-height: 80px;}
  .map .left-side {width: 100%;}
  .map .map-content {width: 100%; height: 460px;}

  /* 物料首页 */
  .material-index-list {padding-top: 36px;}
  .material-index-list .material-item {width: 100%; margin-bottom: 24px;}
  .material-index-list .material-item .item-info {padding: 0 10px; text-align: left;}
  .material-index-list .material-item .item-title {font-size: 20px; line-height: 36px;}
  .material-index-list .material-item .item-info-info {max-width: 100%; margin: 3px auto;display:-webkit-box;overflow:hidden;white-space:normal!important;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .material-index-list .material-item .btn-view {font-size: 12px;}

  /* 物料列表 */
  .material-list ul {width: 102%; margin-left: -1%;}
  .material-list .material-item {width: 48%; margin-left: 1%; margin-right: 1%;}
  .material-list .btn-download {margin-left: 8px;}
  .material-list .mask {top: unset; left: unset; width: 36px; height: 36px; opacity: 1; background-color: rgba(0, 0, 0, 0); transform:scale3d(1,1,1);}
  .material-list .mask img {width: 20px;}

  /* 下载记录 */
  .download .item {display: block; padding: 12px 0;}
  .download-list .source-info {padding-bottom: 6px; border-bottom: 1px dashed #eee;}
  .download-list .source-info .item-img {width: 126px; margin-right: 12px;}
  .download-list .item-info-info .name {font-size: 14px; line-height: 20px; display:-webkit-box;overflow:hidden;white-space:normal!important;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .download-list .item-info-info .info-detail {display: block; margin-top: 2px;}
  .download-list .date-box span {display: block; margin-right: 0; font-size: 13px;}
  .download-list .link a { margin: 0; margin-right: 12px;}
  .download-list .item-btns {padding-top: 6px; justify-content: flex-end;}
  .download-list .item-btns .btn-item {width: 106px; height: 38px; margin: 0 0 0 6px;}
  .download .confirm-btns a {margin: 26px 20px 0;}

  /* 天然钻石在线培训-进阶课程 */
  .training .sub-title {margin-top: 42px; font-size: 30px; line-height: 36px;}
  .training .sub-info {width: 100%; margin: 26px auto; font-size: 16px; line-height: initial;}
  .training .advanced-info {display: block; padding: 32px 0;}
  .training .advanced-info .img-phone { width: 40%; margin: 0 auto;}
  .training .advanced-info .info-content { width: 100%; box-sizing: border-box; padding: 0 15px;}
  .training .advanced-info .tit {font-size: 24px; line-height: initial;}
  .training .advanced-info .info-item {height: 284px; margin-right: 3.4%;}
  .training .advanced-info .info-item:nth-child(even) {margin-right: 0;}
  .training .advanced-info .info-item .icon {transform: scale(.8);}
  .training .advanced-info .item-tit {font-size: 18px;}
  .training .advanced-info .item-info-info {font-size: 13px; line-height: initial;}
  .training .advanced-info .item6 {height: 210px;}

  /* 天然钻石在线培训-入门课程 */
  .started-lessons-info .info-item {width: 226px;}
  .started-lessons-info .info-item .info-tit {width: 134px; margin: 0 auto 12px; line-height: 34px;}
  .started-lessons-info .info-item-img {width: 210px;}
  .started-lessons-info .info-item-img::after {width: 188px; height: 304px;}
  .started-lessons-bottom .qrcode-box {width: 188px; height: 188px; margin-top: 40px;}
  .started-lessons-bottom .bottom-info-text {margin-top: 20px; font-size: 30px; line-height: 42px;}

  /* 天然钻石在线培训-天然钻石零售故事培训系统 */
  .training .sub-info-info,
  .lessons-info-first .info-tit {width: 100%;}
  .lessons-info-first .info-first-list {display: block;}
  .lessons-info-first .info-first-list .info-first-item::after {display: none;}
  .lessons-info-second {display: block;}
  .lessons-info-third {display: block; height: auto; margin-bottom: 60px; padding: 24px 0;}
  .lessons-info-third.third1 {margin-bottom: 60px;}
  .lessons-info-third .side-bottom .icon {width: 44px;}
  .lessons-info-third .left-side {font-size: 24px; line-height: 34px;}
  .lessons-info-third .right-side {width: 90%; margin: 12px auto 0; font-size: 16px; line-height: 28px;}

  /*个人中心-设置*/
  .user-setting .menu-box { width: 100%; position: relative; overflow: hidden; margin-bottom: 30px;}
    .user-setting .menu-box .menu-item{ width: 33.33%; float: left; }
  .user-setting .content-box{ display: block; }
}

@media screen and (max-width:375px){
  /* 天然钻石在线培训-进阶课程 */
  .training .advanced-info .content-field {display: block;}
  /* 天然钻石在线培训-入门课程 */
  .started-lessons-info {display: block;}
  .started-lessons-info .info-item {width: 100%;}
  .started-lessons-info .info-item .info-tit {width: 100%; margin: 24px auto 0; font-size: 20px;}
  .started-lessons-info .info-item-img {padding: 0 0 12px 12px;}
  .started-lessons-bottom .qrcode-box {width: 100px; height: 100px;}
  .started-lessons-bottom .qrcode-box::after {right: -6px; bottom: -6px;}
  .started-lessons-bottom .bottom-info-text {margin-top: 12px; font-size: 16px; line-height: 22px;}

  /* 天然钻石在线培训-天然钻石零售故事培训系统 */
  .training .sub-info-info {font-size: 16px;}
  .training .sub-info-info .kantar-logo {width: 72px;}
  .lessons-info-first .info-tit {font-size: 18px; line-height: 28px;}
  .lessons-info-first .info-first-list .info-first-item {padding: 28px 0;}
  .training .sub-title {font-size: 26px;}
}
/*  gjx*/
.main .layui-form-select dl dd.layui-this{
  background-color: #909090;
}
.layui-form-select dl dd.layui-this{
  background-color: #909090!important;
}

.material .layui-layer-content video{ max-height: 100%;max-width: 100%; margin:0 auto; width: auto!important;}
.layui-input, .layui-select, .layui-textarea{ height: 30px;}