.pages{ padding-top:30px; padding-bottom: 30px; text-align:center; justify-content:center; grid-gap: 10px; display:flex; align-items:center; }
.pages a,.page span{ color:#333; font-size:15px; padding: 8px 14px;  border-radius: 3px; background: #f6f6f6}
.pages a.active{background: #333333; color: #fff;}

.padding{ padding-top:80px; padding-bottom:80px; }
.pt0{ padding-top:0; }

.search_box{ margin-top:120px; }
.search_box{ position:relative; padding: 100px 100px; padding-bottom: 140px; overflow: hidden; border-radius: 12px;}
.search_box:after{content: "";position: absolute;bottom: 0;width: 100%;height: 150px; left: 0px; top: 0; right: 0px; background: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.4)); z-index: 1; }
.search_box .bg{ width:100%; position:absolute; left:0px; right:0px; top: 0px;bottom: 0px; object-fit:cover; }
.search_box h3{ font-size:40px; font-weight:bold; position: relative; z-index:2; color:#fff; text-align:center; margin-bottom:32px; }
.search_box .layui-form{ position:relative; z-index:2;width:900px; margin: 0 auto; }
.search_box .layui-form i{ position:absolute; left:20px; top:50%; transform:translateY(-50%); font-size:20px; color:#999; }
.search_box .layui-form .layui-input{ height:50px; font-size:16px; border-radius:40px; padding-left:50px; }
.search_box .layui-form .layui-btn{ height:44px; padding-left: 32px; padding-right: 32px; font-size:16px; border-radius:40px; position:absolute; right:3px; top:3px; }


.search_box_bg{ margin-top:120px; }
.search_box_bg{ position:relative; padding: 20px;  overflow: hidden; border-radius: 12px;}
.search_box_bg h3{ font-size:40px; font-weight:bold; position: relative; z-index:2; color:var(--sc); text-align:center; margin-bottom:32px; }
.search_box_bg .layui-form{ position:relative; z-index:2;width:900px; margin: 0 auto; }
.search_box_bg .layui-form i{ position:absolute; left:20px; top:50%; transform:translateY(-50%); font-size:20px; color:#999; }
.search_box_bg .layui-form .layui-input{ height:50px; font-size:16px; background:#f9f9f9; border-radius:40px; padding-left:50px; }
.search_box_bg .layui-form .layui-btn{ height:44px; padding-left: 32px; padding-right: 32px; font-size:16px; border-radius:40px; position:absolute; right:3px; top:3px; }


.layui-form-item:after{ display:none!important; }
.block100{ height:100px; }
.block150{ height:150px; }
.block200{ height:200px; }






.recommend{ padding-top:48px; padding-bottom:48px }
.recommend .recommend_title{ text-align:center;font-size:24px; font-weight:bold; margin-bottom:36px; }
.recommend .recommend_title span{ position:relative;display:inline-block; }
.recommend .recommend_title span::after{ position:absolute; left:-180px; width: 160px; top: 50%; transform: translateY(-50%); height:2px; background:var(--sc); content:""; }
.recommend .recommend_title span::before{ position:absolute; right:-180px; width: 160px; top: 50%; transform: translateY(-50%); height:2px; background:var(--sc); content:""; }
.recommend .list{ display:grid; grid-template-columns:repeat(5, 1fr); grid-gap:24px; }
.recommend .list .item .img{ border-radius:12px; overflow:hidden; aspect-ratio:192/108; }
.recommend .list .item .img img{ width:100%; height:100%; object-fit:cover; transition-duration:0.3s }
.recommend .list .item:hover .img img{ transform: scale(1.1);}
.recommend .list .item .info { padding-top:16px; }
.recommend .list .item .info .row{ display:grid; grid-template-columns: repeat(2,1fr); align-items:center; margin-bottom:12px; }
.recommend .list .item .info .row .title{color:#666; display: -webkit-box;  -webkit-line-clamp:1;  -webkit-box-orient: vertical; overflow: hidden; }
.recommend .list .item .info .row .view{  color:#666; font-size:12px; text-align:right; }
.recommend .list .item .info .user{ display:grid; grid-template-columns: 32px auto;align-items:center;grid-gap:12px; }
.recommend .list .item .info .user .photo{ border-radius:50px; height: 32px; width: 32px; overflow:hidden; aspect-ratio:1; }
.recommend .list .item .info .user .photo img{ width:100%; height:100%; object-fit:cover; transition-duration:0.3s }
.recommend .list .item .info .user .name{ color:#666;font-size:12px;display: -webkit-box;  -webkit-line-clamp:1;  -webkit-box-orient: vertical; overflow: hidden;}
.recommend .list .item .info .row .date{ color:#666;font-size:12px;  text-align:right; }

.layui-layer a:hover{ color: var(--mc)}


.layui-layer{ border-radius:12px!important; overflow:hidden; }
#layer-wrapper .box{ background:#fff; width:1000px; padding:50px; }
#layer-wrapper .box .title{ justify-content:space-between; display:flex; align-items:center; margin-bottom:24px; }
#layer-wrapper .box .title h2{ font-size:24px; }
#layer-wrapper .box .title a{ color:#fff; border-radius:20px; padding:10px 20px; background:var(--sc); color:#fff; line-height:1;  }
#layer-wrapper .img { aspect-ratio:10/5; margin-bottom:24px; }
#layer-wrapper .img img{ width:100%; height:100%; object-fit:cover; } 

#layer-wrapper .bottom{ justify-content:space-between; display:flex; align-items:center; }
#layer-wrapper .bottom .user{ display:flex; justify-content:left; align-items:center;grid-gap:12px; }
#layer-wrapper .bottom .user .photo{ border-radius:50px; height: 48px; width: 48px; overflow:hidden; aspect-ratio:1; }
#layer-wrapper .bottom .user .photo img{ width:100%; height:100%; object-fit:cover; transition-duration:0.3s }

#layer-wrapper .bottom .user .name h4{ color:#222;font-size:16px;  }
#layer-wrapper .bottom .user .name p{ color:#666;font-size:12px;  }
#layer-wrapper .bottom .info{ display:flex; justify-content:space-between; grid-gap:24px; }

#layer-user .box{ background:#fff; width:720px; display: grid; grid-template-columns: repeat(2, 1fr);}
#layer-user .box .img{ height:420px; }
#layer-user .box .img img{ width:100%; height:100%; object-fit:cover; transition-duration:0.3s }
#layer-user .box .layui-form{ padding:32px; }
#layer-user .box .layui-form h3{ font-size:25px; padding-top: 54px; margin-bottom: 24px; text-align:center; } 
#layer-user .box .layui-form .layui-input{ font-size:15px; height:48px; }
#layer-user .box .layui-form .row{ display: flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
#layer-user .box .layui-form .layui-btn.submit{ border-radius:50px; height: 52px; background: var(--sc);}


#layer-creator .box{ width:400px; }
#layer-creator .box .layui-form{ padding:32px; }
#layer-creator .box .layui-form h3{ font-size:25px; padding-top: 24px; margin-bottom: 24px; text-align:center; } 
#layer-creator .box .layui-form .layui-input{ font-size:15px; height:48px; }
#layer-creator .box .layui-form .right{ text-align: right; }
#layer-creator .box .layui-form .layui-btn.submit{ border-radius:50px; height: 52px; background: var(--sc);}
#layer-creator .box .layui-form p{ color:#999; line-height:1.6; font-size:14px; text-align:center; }


#layer-upload .box{ width:640px; }
#layer-upload .box .layui-form{ padding:32px; }
#layer-upload .box .layui-form h3{ font-size:25px; padding-top: 24px; margin-bottom: 24px; text-align:center; } 
#layer-upload .box .layui-form .layui-input{ font-size:15px; height:48px; }
#layer-upload .box .layui-form .right{ text-align: right; }

#layer-upload .box .layui-form .submit{ text-align:center; }
#layer-upload .box .layui-form .submit .layui-btn{ border-radius:50px; height: 52px; background: var(--sc); padding-left:80px; padding-right: 80px;}
#layer-upload .box .layui-form p{ color:#999; line-height:1.6; font-size:14px; text-align:center; }
#layer-upload .box .layui-form .row{ display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:16px; }


#layer-upload #ID-upload-demo-drag{ height:178px; padding-top: 100px;}
#layer-upload #ID-upload-demo-preview{ position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; z-index: 2; overflow: hidden; }
#layer-upload #ID-upload-demo-preview img{ object-fit:cover; width:100%; height:100%; }
#layer-upload #ID-upload-demo-preview hr{ display: none}
#layer-upload #ID-upload-demo-delete{ z-index: 3; position: absolute; transition-duration: 0.3s; right: 12px; top: 12px; font-size: 16px; background: rgba(0,0,0,0.3); color: #fff; border-radius: 3px; height: 24px; width: 24px; line-height:24px; text-align: center;}
#layer-upload #ID-upload-demo-delete:hover{ background: var(--mc); color: #fff;}


.layui-checkbox{ font-size: 14px; display: flex; justify-content: center; align-items: center; line-height: 1;}
.layui-form-checkbox[lay-skin=primary]>div{ padding-right: 5px!important; line-height: 1!important; margin-top: 1px!important;}
.layui-form-item .layui-form-checkbox[lay-skin=primary]{ margin-top: 1px!important;}
.layui-checkbox a{ margin-right: 10px; color: var(--mc); text-decoration: underline }


.layer-agreement{}
.layer-agreement .box{ width:600px;  padding:32px}
.layer-agreement .box h3{ font-size:25px; padding-top: 24px; margin-bottom: 24px; text-align:center;  }
.layer-agreement .box p{ color:#666; line-height:1.6; font-size:14px; text-align:left; }
.layer-agreement .box p:first-child{ font-size: 24px; color: #333; font-weight: 500;margin-bottom: 20px;}





#layer-contact .box{ width:600px; }
#layer-contact .box .layui-form{ padding:32px; }
#layer-contact .box .layui-form h3{ font-size:25px; padding-top: 24px; margin-bottom: 24px; text-align:center; } 
#layer-contact .box .layui-form .layui-input{ font-size:15px; height:48px; }
#layer-contact .box .layui-form .right{ text-align: right; }
#layer-contact .box .layui-form .submit{ text-align:center; }
#layer-contact .box .layui-form .submit .layui-btn{ border-radius:50px; height: 52px; background: var(--sc); padding-left:80px; padding-right: 80px;}
#layer-contact .box .layui-form p{ color:#999; line-height:1.6; font-size:14px; text-align:center; }
#layer-contact .box .layui-form .row{ display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:32px; }
#layer-contact .box .layui-form h4{ font-size:18px;margin-bottom:12px; }
#layer-contact .box .layui-form hr{ padding-top:12px; margin-bottom:12px; }
#layer-contact .box .layui-form .layui-textarea{ font-size:15px; }




.register{ height:100vh; display:grid; grid-template-columns:repeat(2, 1fr); }
.register .img{ height:100%; width: 100%; overflow:hidden; }
.register .img img{ width:100%; height:100%; object-fit:cover; transition-duration:0.3s }
.register .content{ height:100%; width: 100%; overflow:hidden; position: relative; background:url(../img/bg1.jpg) no-repeat;background-size:cover; }
.register .content .box{ width: 400px; background: #fff; border-radius: 12px; padding: 32px; box-shadow:0px 4px 10px rgba(0, 0, 0, 0.05);  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.register .content .box h3{ font-size:25px; padding-top: 24px; margin-bottom: 24px; text-align:center; } 
.register .content .box .layui-input{ font-size:15px; height:48px; }
.register .content .box .layui-btn.submit{ border-radius:50px; height: 52px;  background: var(--sc);}
.register .content .box .row{ display:flex; justify-content:space-between; align-items:center; grid-gap:12px; }
.register .content .box .layui-btn.obtain{ font-size:15px; height:48px; color: #666; background:#fff; border:#ddd solid 1px; }



.forgetpassword{ height:100vh; display:grid; grid-template-columns:repeat(2, 1fr); }
.forgetpassword .img{ height:100%; width: 100%; overflow:hidden; }
.forgetpassword .img img{ width:100%; height:100%; object-fit:cover; transition-duration:0.3s }
.forgetpassword .content{ height:100%; width: 100%; overflow:hidden; position: relative; background:url(../img/bg1.jpg) no-repeat;background-size:cover; }
.forgetpassword .content .box{ width: 400px; background: #fff; border-radius: 12px; padding: 32px; box-shadow:0px 4px 10px rgba(0, 0, 0, 0.05);  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.forgetpassword .content .box h3{ font-size:25px; padding-top: 24px; margin-bottom: 24px; text-align:center; } 
.forgetpassword .content .box .layui-input{ font-size:15px; height:48px; }
.forgetpassword .content .box .layui-btn.submit{ border-radius:50px; height: 52px;  background: var(--sc);}
.forgetpassword .content .box .row{ display:flex; justify-content:space-between; align-items:center; grid-gap:12px; padding-bottom: 20px; }
.forgetpassword .content .box .row a:hover { color: var(--mc); }
.forgetpassword .content .box .layui-btn.obtain{ font-size:15px; height:48px; color: #666; background:#fff; border:#ddd solid 1px; }

.user_content{ padding-top:120px; padding-bottom:120px;} 
.user_content .pagewidth{ display: grid; grid-template-columns:240px auto; grid-gap:32px;  width: 1200px; margin: 0 auto; }
.user_content .pagewidth .side ul li a{ display:block;  color: #333; background: #fff;box-shadow:0px 4px 10px rgba(0, 0, 0, 0.05); padding:18px; border:#fff solid 2px ; border-radius:10px; }
.user_content .pagewidth .side ul li a:hover{ border:#ececec solid 2px; ; }
.user_content .pagewidth .side ul li a.active{ border:var(--sc) solid 2px; ; }
.user_content .pagewidth .side ul li { margin-bottom:12px; }
.user_content .pagewidth .main .box{ display:block;  color: #333; background: #fff;box-shadow:0px 4px 10px rgba(0, 0, 0, 0.05); padding:32px; border:#fff solid 2px ; border-radius:10px; }

.user_content .pagewidth .main .box h3{ font-size:20px; }
.user_content .pagewidth .main .box .title{ display: flex; margin-bottom: 24px; justify-content:space-between; align-items:center; }

.user_content .pagewidth .main .box .user_photo{ border-radius:50px; height: 60px; width: 60px; aspect-ratio:1; position: relative; }
.user_content .pagewidth .main .box .user_photo .icon{ position:absolute; right:0px; background: #fff; border-radius: 30px;height: 24px; width: 24px; bottom:0; z-index:2; font-size:15px; color:#666;  display:flex; align-items:center;  justify-content:center; }
.user_content .pagewidth .main .box .user_photo img{ width:100%; height:100%; border-radius: 50%; object-fit:cover; transition-duration:0.3s }
.user_content .pagewidth .main .box .layui-input{ font-size:15px; height:48px; }
.user_content .pagewidth .main .box .layui-textarea{ font-size:15px; }
.user_content .pagewidth .main .box hr{ margin-bottom:36px;  margin-top: 24px;}
.user_content .pagewidth .main .layui-form-item.submit{  text-align:center; }
.user_content .pagewidth .main .layui-btn.submit{border-radius:50px; height: 52px; padding-left: 120px; padding-right: 120px; background: var(--sc);}
.user_content .pagewidth .main .bottom { text-align:center; padding-top:24px }

.user_content .pagewidth .main .box .row2{ display:grid; grid-template-columns:repeat(2, 1fr);  grid-gap: 32px;}
.user_content .pagewidth .main .box .row2 p{ margin-bottom:12px; color:#999;font-size:14px; }
.user_content .pagewidth .main .box .row2 h4 strong{ color:#f00; }
.user_content .pagewidth .main .box .row2 h4{ margin-bottom:10px; }
.user_content .pagewidth .main .box .prompt{ text-align:center; font-size:14px; color:#999; }


.user_content .pagewidth .main .bottom_list{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; padding-top: 32px;}
.user_content .pagewidth .main .bottom_list .item{ background: #000; position:relative; aspect-ratio:1/0.7; border-radius: 10px; overflow:hidden; }
.user_content .pagewidth .main .bottom_list .item img{ opacity: 0.9; width:100%; transition-duration: 0.3s; height:100%; object-fit:cover;  }
.user_content .pagewidth .main .bottom_list .item:hover img{ transform:scale(1.1);opacity: 0.8; }
.user_content .pagewidth .main .bottom_list .item a{ color: #fff; font-weight: box; font-size: 16px; position:absolute; left: 0px; right:0px; top:0px; bottom:0px; z-index:2; display:flex; justify-content:center;  align-items:center;  }




.user_content .pagewidth .main .integral_list{ border-radius:10px; border:#ddd solid 1px; padding:24px; }
.user_content .pagewidth .main .integral_list ul li{  display:flex; justify-content:space-between; align-items:center; padding-top:15px; padding-bottom:15px; border-bottom:#ececec solid 1px; }
.user_content .pagewidth .main .integral_list ul li h3{ font-weight:normal;font-size:16px; }
.user_content .pagewidth .main .integral_list ul li span{font-size:15px; color:#999 }

.user_content .pagewidth .main .integral_list ul li h3 .plus{ color:#379122 }
.user_content .pagewidth .main .integral_list ul li h3 .minus{ color:#ff0000 }