

*{margin: 0;padding: 0;}
h1,h2{line-height: 1;}
.align-center{text-align: center;}
li{list-style: none;}
img{max-width: 100%;}

p a{color: inherit;text-decoration: none;border-bottom: 1px dashed currentColor;}
.line{height: 1px;background:#2a2a2c; max-width: 1200px;margin: 0 auto;}
.container{width: 1200px;margin: 0 auto;}
h1{padding: 50px 0 20px;}
.main-content{background: #000;}	
.story-main{background:radial-gradient(600px 300px at top center,#37417d,transparent) ;}
.story-banner .container-xl{padding: 0 100px;}
.h1-mess{color: #acb4de;}
.people-intro{background: linear-gradient(45deg, #16171a, #0c0d0f);padding: 50px 0;border-radius: 20px;display: flex;justify-content: center;gap: 50px;margin: 40px 0 0;position: relative;}
.people-intro::after{content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 1px; background: linear-gradient(to right,transparent,#242b57,transparent);}
.intro-left > img{border-radius: 15px;}
.intro-share img{color: #747b91;}
.intro-share{display: flex;justify-content: center;gap: 20px;padding: 20px 0 0;}
.intro-right{width: 700px;}
.intro-rname{padding: 20px 0 0;}
.intro-rnm{padding: 10px 0 20px;}
.people-mess{background:url(../images/ai-image-enhancer/story/icon.png) no-repeat left 0 top 35px,radial-gradient(50% 100px at top center,#050815,transparent);border-top:1px solid transparent;padding:40px 0 40px 50px;font-style: italic;line-height: 1.7;}

.image-item{/* background: linear-gradient(transparent,rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 60%,transparent); */padding: 60px 0 20px;}
/* .image-item p{padding: 0 50px;} */
.item-pic{text-align: center;padding: 40px 0;}
.item-pic img{border-radius: 7px;}
.item-bg-pic{position: relative;overflow: hidden;}
.item-bg-pic .bg-pic{-webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 30%, black 70%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 40%, black 60%, transparent 100% );position: absolute;left: 0;top: 0;right:0;bottom: 0;}
.item-bg-pic .bg-pic .bg-img{width: 100%;height: 100%; object-fit: cover;filter: blur(15px);opacity: 0.3;}
.item-bg-pic .container img{position: relative;}



.more-images{ background: radial-gradient(30% 200px at top center,#0b0f24,transparent);padding: 0 0 30px;}
.more-images .container{position: relative;padding-top: 60px;}
.more-images .container::before{content: "";position: absolute;left: 0;right: 0;top: 0;height: 1px; background: linear-gradient(to right,transparent,#414c97 10%,#414c97 90%, transparent);}
.more-images p{color: #fff;}
.mimages-detl{color: #c5c7e2;padding:30px 0 0 0;}
.mimages-detl li{padding: 2px 0;}
.mimages-change-container{padding: 30px 0;}
.change-pics{text-align: center;}
.change-pics img{border-radius: 20px;display: none;}
.change-pics img.active{display: inline-block;}
.change-btn-pics{padding: 40px 0;overflow: hidden;-webkit-mask-image: linear-gradient( to right, transparent 0%, transparent calc((100vw - 1222px) / 2), black calc((100vw - 1222px) / 2), black 100% ); mask-image: linear-gradient( to right, transparent 0%, transparent calc((100vw - 1222px) / 2), black calc((100vw - 1222px) / 2), black 100% );}
.change-btn-pic-warper{display: flex;gap: 15px;transition: all 0.2s ease-in;}
.change-btn-pic-warper >img{border-radius: 11px;cursor: pointer;}
.change-btn-pic-warper >img.active{border: 1px solid #ffab1b;cursor: auto;}
.change-btns{padding: 0 0 0 30px;}
.change-btns span{display: inline-flex;justify-content: center;align-items: center;width: 39px;height: 39px;color: #65667c;border-radius: 20px;border: 1px solid currentColor;cursor: pointer;}
.change-btns span::before{content: "";border-left: 1px solid currentColor;border-bottom: 1px solid currentColor;width: 10px;height: 10px;transform:  translateX(3px) rotate(45deg);}
.change-btns span:nth-child(2){margin-left: 15px;;}
.change-btns span:nth-child(2)::before{transform:translateX(-3px) rotate(-135deg);}

.video-item{padding: 60px 0;}
/* .video-item p{padding:0 40px;} */
.video-box{max-width: 1160px;height: 650px;border-radius: 15px;overflow: hidden;margin: 40px 0 0;}
/* .video-box::before{content: "";display:inline-block; padding-bottom: 56.25%;} */
.video-box iframe{width: 100%;height: 100%;}

.about-show{padding: 40px 0 80px;}
.about-show-h2{padding-bottom: 20px;}

.popCon{position: fixed;left: 0;right: 0;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;background: rgba(0, 0, 0, 0.7);display: none;}
.pop-contain{position: relative;max-width: 95%;}
.popCon .close{position: absolute;right: -30px;top: -30px;color: #fff;font-size: 33px;cursor: pointer;}
.popCon .pop-contain img{}


@media(max-width:1200px){
    .container{width: auto;padding: 0 10px;}
    .item-pic,.change-pics{padding-left: 10px;padding-right: 10px;}

}
@media(max-width:979px){
    .people-intro{flex-wrap: wrap;}
    .intro-right{width: 80%;}
    .video-box{height: 580px;}
    .change-btn-pic-warper{height: 250px;}
    .popCon .close{left: 50%;}
}
@media(max-width:767px){
    .h1-mess{padding: 0 2%;}
    .intro-right{width: 90%;}
    .people-mess{background-position-x: 0;padding: 40px 0 10px 40px; }
    .image-item p,.more-images p,.mimages-detl,.video-item p{padding-left: 10px;padding-right: 10px;}
    .video-box{height: 500px;}
}
@media(max-width:479px){
    .intro-right{width: 100%;}
    .video-box{height:45vh;}
    .change-btn-pic-warper{height: 150px;}
}

/* .mask{position: absolute;left: 0;right: 0;bottom: 0;top: 0;backdrop-filter: blur(80px);background: rgba(0,0,0, 0.25);} */

/* 侧栏 */
aside {position: fixed;top: 30%;left: 0;width: 160px;}
aside>a {display: block;color: #adadad;line-height: 1;text-align: center;text-decoration: none;}
aside>a+a {margin-top: 40px;}
aside>a::before {content: "";display: block;height: 52px;background-position: center;background-repeat: no-repeat;}
aside>a.aside-link1::before {background-image: url(../images/ai-image-enhancer/story/icon1.svg);}
aside>a.aside-link2::before {background-image: url(../images/ai-image-enhancer/story/icon2.svg);}
aside>a.aside-link3::before {background-image: url(../images/ai-image-enhancer/story/icon3.svg);}
@media (max-width: 1200px) {
    aside {position: static;width: 100%;display: flex;justify-content: center;flex-wrap: wrap;gap: 20px;padding: 20px 0 50px;background-color: #000;}
    aside>a+a {margin-top: 0;}
}
