/* =========================================================
   Topic 6769 - Zhejiang Mobile / 2026 World Internet Conference
   PSD 2000x3850, content width 1200, colors sampled from PSD
   Responsive: PC / tablet / mobile
   ========================================================= */
div,p,h1,h2,h3,h4,h5,h6,span,i,a,li,ul,body{font-family: "Microsoft YaHei"; padding:0; margin:0; font-size:18px; line-height:27px; color:#666666;}
ul,ol,li{list-style: none;}
a{text-decoration: none;}
a:hover,a:link{text-decoration: none;}
img{border:0;}
.of{overflow: hidden;}
body{background: #040959;}

/*container (override basic2.css, design width 1200)*/
.container{margin: 0 auto;}
@media screen and (min-width: 768px){
	.container{width: 750px;}
}
@media screen and (min-width: 992px){
	.container{width: 970px;}
}
@media screen and (min-width: 1200px){
	.container{width: 1199px;}
}
@media screen and (min-width: 1220px){
	.container{width: 1200px;}
}

/*banner*/
.banner{background: url(banner.jpg) no-repeat center top; background-size: cover; height: 560px;}

/*headline (头条) - PSD: img 646x432 over panel 603x363, title 24px, body 18px/26px*/
.toutiao{display: flex; align-items: stretch; margin-top: 90px; border-radius: 10px; overflow: hidden;}
.tt_pic{width: 53.4%; flex: none;  overflow: hidden; }
.tt_pic img{display: block; width: 100%; }
.tt_con{flex: 1; min-width: 0; background: linear-gradient(225deg, #3a0b85 0%, #1a0e7b 55%, #0d0f74 100%); padding: 25px 30px 0; box-sizing: border-box;}
.tt_con h4{color: #fff; font-size: 24px; line-height: 32px; font-weight: bold;}
.tt_con p{color: #bbdeff; font-size: 16px; line-height: 27px; margin-top: 16px;}
.tt_con .more{display: inline-block; width: 120px; height: 33px; line-height: 33px; border-radius: 17px; background: #099cec; color: #fff; font-size: 18px; text-align: center; margin-top: 23px;}

/*section title (PSD: 40px white, glow bar 163x18 behind)*/
.sec-title{text-align: center; margin: 90px 0 45px;}
.sec-title h2{display: inline-block; position: relative; color: #fff; font-size: 40px; line-height: 52px; font-weight: bold; z-index: 1;}
.sec-title h2::before{content: ''; position: absolute; left: 50%; bottom: 4px; width: 163px; height: 18px; transform: translateX(-50%); background: #400080;  border-radius: 2px; z-index: -1;}

/*interview (前沿访谈) - PSD: card 1202x228, thumb 402x227, title 18px, desc 16px/23px, btn 122x34*/
.iv-row{display: flex; align-items: stretch; background: #0e1273; border-radius: 10px; overflow: hidden; margin-bottom: 27px;}
.iv-row.rev{flex-direction: row-reverse;}
.iv-pic{width: 33.5%; flex: none; position: relative; cursor: pointer; overflow: hidden;}
.iv-pic img{display: block; width: 100%; height: 100%; object-fit: cover;}
/* 缩略图居中播放按钮（点击整个图仍弹出视频） */
.iv-pic::after{content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; background: url(play.png) no-repeat center; background-size: contain; pointer-events: none;}
.iv-con{flex: 1; min-width: 0; padding: 34px 44px;}
.iv-con h4{color: #fff; font-size: 18px; line-height: 27px; font-weight: bold;}
.iv-con p{color: #bbdeff; font-size: 16px; line-height: 23px; margin-top: 18px;}
.iv-btn{display: inline-block; min-width: 122px; height: 34px; line-height: 34px; padding: 0 20px; box-sizing: border-box; border-radius: 17px; background: #099cec; color: #fff; font-size: 16px; text-align: center; margin-top: 20px; cursor: pointer;}

/*live reports (现场报道) - PSD: card 382x216 + title 18px/23px, 3 cols, gap 28; rows 7+ hidden until expanded*/
.live-list .relateds{width: 31.86%; float: left; margin: 0 2.2% 34px 0;}
.live-list .relateds:nth-child(3n){margin-right: 0;}
.live-list .relateds a{display: block;}
.live-list .relateds img{display: block; width: 100%; height: 216px; object-fit: cover; border-radius: 10px;}
.live-list .relateds_text{padding: 13px 15px 0; background: #0e1273; height: 70px; border-radius: 0 0 10px 10px;}
.live-list .relateds_text span{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #fff; font-size: 16px; line-height: 24px;}
/*默认只显示前 6 条，第 7 条起隐藏；点击“展开更多”显示，再点收起*/
.live-list .relateds:nth-child(n+7){display: none;}
.live-list.open .relateds:nth-child(n+7){display: block;}
.more-btn{display: block; width: 162px; height: 42px; line-height: 42px; border-radius: 21px; background: #099cec; color: #fff; font-size: 18px; text-align: center; margin: 6px auto 0; cursor: pointer;}

/*gallery (精彩图集) - PSD: center 1000x560 (83.3%), sides 800x449 (66.7%), arrows 58x58*/
.gallery{position: relative; margin-top: 38px;}
.gal-view{overflow: hidden;}
.gal-track{display: flex; align-items: center; transition: transform .45s ease;}
/* 所有项布局宽度一致（不参与过渡），非当前项用 transform 缩小并位移补偿 → 不触发重排、容器高度恒定 */
.gal-item{flex: 0 0 83.3%; transform: scale(.8); opacity: .45; transition: transform .45s ease, opacity .45s ease; will-change: transform;}
.gal-item.on{transform: scale(1); opacity: 1; position: relative; z-index: 2;}
.gi{width: 100%; aspect-ratio: 1000/560; border-radius: 10px; overflow: hidden; background: #0e1273;}
.gi img{display: block; width: 100%; height: 100%; object-fit: cover;}
/* 左右切换按钮使用图片（80x80 自带蓝色圆底） */
.gal-arrow{position: absolute; top: 50%; margin-top: -29px; width: 58px; height: 58px; z-index: 5; cursor: pointer; background: url(left.png) no-repeat center; background-size: contain;}
.gal-prev{left: 22px;}
.gal-next{right: 22px; background-image: url(right.png);}

/*video modal (视频弹窗，居中)*/
.video-modal{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(1,3,51,.88); display: none; align-items: center; justify-content: center; z-index: 9999;}
.video-modal.show{display: flex;}
.vm-box{position: relative; width: 72%; max-width: 960px;}
.vm-box video{display: block; width: 100%; background: #000; border-radius: 8px; outline: none;}
.vm-close{position: absolute; top: -46px; right: -4px; width: 36px; height: 36px; line-height: 38px; text-align: center; color: #fff; font-size: 30px; font-family: Arial, sans-serif; cursor: pointer; border: 2px solid rgba(255,255,255,.7); border-radius: 50%;}
.vm-close:hover{border-color: #fff;}

/*foot (styled for inc/topic_foot_3.asp output, colors follow PSD)*/
.foot{background: #010333; width: 100%; margin-top: 100px; padding: 50px 0; text-align: center;}
.foot p{color: #bbdeff; font-size: 14px; line-height: 20px; }

/* ---------------- responsive ---------------- */
@media screen and (max-width: 1199px){
	.tt_con{padding: 26px 34px 30px 26px;}
	.tt_con h4{font-size: 21px; line-height: 29px;}
	.tt_con p{font-size: 16px; line-height: 25px; margin-top: 12px;}
	.sec-title h2{font-size: 34px; line-height: 46px;}
	.sec-title h2::before{width: 140px; height: 16px;}
	.iv-con{padding: 26px 32px;}
	.iv-con p{margin-top: 10px;}
	.live-list .relateds img{height: 175px;}
	.gal-arrow{width: 48px; height: 48px; margin-top: -24px;}
}

@media screen and (max-width: 991px){
	.live-list .relateds{width: 48.9%; margin: 0 2.2% 30px 0;}
	.live-list .relateds:nth-child(3n){margin-right: 2.2%;}
	.live-list .relateds:nth-child(2n){margin-right: 0;}
	.live-list .relateds img{height: 170px;}
}

@media screen and (max-width: 767px){
	.container{margin: 0 15px;}
	.toutiao{display: block; margin-top: 30px;}
	.tt_pic{width: 100%;}
	.tt_pic img{height: auto;}
	.tt_con{margin-left: 0; padding: 24px 20px 28px;}
	.tt_con h4{font-size: 19px; line-height: 27px;}
	.tt_con p{font-size: 15px; line-height: 24px; margin-top: 12px;}
	.tt_con .more{margin-top: 18px;}
	.sec-title{margin: 50px 0 26px;}
	.sec-title h2{font-size: 28px; line-height: 38px;}
	.sec-title h2::before{width: 110px; height: 14px; bottom: 2px;}
	.iv-row,.iv-row.rev{display: block;}
	.iv-pic{width: 100%;}
	.iv-pic::after{width: 48px; height: 48px; margin: -24px 0 0 -24px;}
	.iv-con{padding: 20px 20px 26px;}
	.iv-btn{margin-top: 16px;}
	.live-list .relateds{width: 47.8%; margin: 0 4.4% 26px 0;}
	.live-list .relateds:nth-child(3n){margin-right: 4.4%;}
	.live-list .relateds:nth-child(2n){margin-right: 0;}
	.live-list .relateds img{height: 110px; border-radius: 8px;}
	.live-list .relateds_text{margin-top: 8px;}
	.live-list .relateds_text span{font-size: 14px; line-height: 20px;}
	.more-btn{width: 140px; height: 38px; line-height: 38px; font-size: 16px;}
	.gal-item{flex-basis: 92%;}
	.gal-arrow{width: 38px; height: 38px; margin-top: -19px;}
	.gal-prev{left: 8px;}
	.gal-next{right: 8px;}
	.vm-box{width: 92%;}
	.vm-close{top: -42px; right: 0;}
	.foot{margin-top: 50px;}
}