﻿.font2h,.font3h,.listBlog .item a.tit,.listBlog .item p{text-overflow:-o-ellipsis-lastline; overflow:hidden; text-overflow:ellipsis; display:-webkit-box!important; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.boxTopic li,.li img,li div,li p,.boxCO dl,.boxCO dl dt,i:before{transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease}
.boxTopic{font-size:20px; min-width:1000px}
.boxTopic *{margin:0; box-sizing:border-box}
.boxTopic .box{max-width:1300px; margin:0 auto}

.banner{background:url("/aivon/static/img/topic/pcba/banner.png") #082929 no-repeat center center; height:880px; display:flex; justify-items:stretch; align-items:center; width:100%}
.banner .box{color:#fff; width:100%;}
.banner h1{font-size:3.3em; display:block; margin-bottom:.2em}
.banner .box>p{font-size:1em; display:block; margin-bottom:3em}
.banner .cp{background:url("/aivon/static/img/topic/pcba/img_cp.png") no-repeat center center; width:627px; height:47px; margin-top:2.1em;}
.banner .bnsa{font-size:.8em; padding:1em 2em;}

.banner ul{display:flex; justify-content:space-between; gap:2em; padding-top:6em;}
.banner li{background-color:rgba(255,255,255,.1); border-radius:.5em; padding:1.4em; position:relative; width:100%}
.banner li{overflow:hidden}
.banner li>div:before{content:''; display:block; margin:0 auto .5em; background:no-repeat center center; width:72px; height:54px}
.banner li:nth-child(1)>div:before{background-image:url("/aivon/static/img/topic/pcba/icon_b01.png")}
.banner li:nth-child(2)>div:before{background-image:url("/aivon/static/img/topic/pcba/icon_b02.png")}
.banner li:nth-child(3)>div:before{background-image:url("/aivon/static/img/topic/pcba/icon_b03.png")}
.banner li:nth-child(4)>div:before{background-image:url("/aivon/static/img/topic/pcba/icon_b04.png")}
.banner li span{font-size:.8em; display:block; text-align:center;}
.banner li p{position:absolute; top:100%; left:0; right:0; height:100%; opacity:0; padding:1.4em; visibility:hidden; display:flex; align-items:center}
.banner li:hover div{opacity:0; visibility:hidden}
.banner li:hover p{top:0; opacity:1; visibility:visible}

.bk000{background-color:#000; color:#fff}
.bk000.pp{padding-bottom:4em;}

.titSh{text-align:center; padding:2em 0 1.5em; font-size:1.7em;}
.titSh b{position:relative}
.titSh b i{position:absolute; top:55%; right:calc(100% + 1em); transform:translateY(-50%); height:2px; width:190px;
	background: -moz-linear-gradient(left,  rgba(238,247,244,0) 0%, rgba(236,245,244,0) 1%, rgba(0,96,255,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(238,247,244,0) 0%,rgba(236,245,244,0) 1%,rgba(0,96,255,1) 100%);
	background: linear-gradient(to right,  rgba(238,247,244,0) 0%,rgba(236,245,244,0) 1%,rgba(0,96,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00eef7f4', endColorstr='#0060ff',GradientType=1 );
}
.titSh b i:before{content:''; position: absolute; top:50%; transform:translateY(-50%); left:100%; width: 4px; height: 4px; border:2px solid #0060FF; border-radius: 50%;}
.titSh b i:last-of-type{left:calc(100% + 1em); transform:translateY(-50%) rotate(180deg);}

.boxCO{display:flex; justify-content:space-between; gap:36px; padding-bottom:5em}
.boxCO>div{width:100%;}
.boxCO:before{content:''; display:block; flex:0 0 auto; background:url("/aivon/static/img/topic/pcba/img_a3.png") no-repeat center center; border-radius:.5em; overflow:hidden; width:620px; height:626px;}
.boxCO dl{border:1px solid #D9D9D9; border-radius:.5em; overflow:hidden;}
.boxCO dl+dl{margin-top:.7em;}
.boxCO dt{background-color:#fff; padding:1.3em 1.5em; cursor:pointer; position:relative;}
/* .boxCO dt:before{content:''; position:absolute; left:0; top:5px; bottom:5px; width:2px; background-color:#0060FF} */
.boxCO dt:after{content:'\eca6'; font-family:iconfont_dg; display:block; color:#0060FF; position:absolute; top:50%; right:1em; transform:translateY(-50%) rotate(0deg);}
.boxCO dl.on dt:after{transform:translateY(-50%) rotate(180deg);}
.boxCO dl:hover{border-color:#0060FF}
.boxCO dt span{font-size:.8em; display:block; line-height:1em}
.boxCO dl.on dt{background-color:#EFF5FF;color:#0060FF}
.boxCO dl.on dt:before{width:0}
.boxCO dd{display:none; border-top:1px solid #D9D9D9; padding:.5em 1.5em;}
.boxCO dd p{font-size:.7em; min-height:5em;}

.boxPP{position:relative; overflow:hidden;}
.boxPP ul{display:flex; justify-content:space-between; position:absolute; left:0; width:100%; padding-right:1em; z-index:1}
.boxPP ul.t{top:0}
.boxPP ul.b{bottom:0}
.boxPP ul i{border:1px solid #2275FF; border-radius:50%; width:1.1em; height:1.1em; position:absolute; left:50%; z-index:1; background-color:#000; transform:translateX(-50%); display:flex; align-items:center; justify-content:center}
.boxPP ul i:before{content:''; display:block; border:1px solid #2275FF; border-radius:50%; width:.5em; height:.5em;}
.boxPP ul p{display:none;}
.boxPP li{cursor:pointer; position:relative; user-select:none; text-align:center}
.boxPP li:hover{color:#a9c8ff}
.boxPP li img{display:block; max-width:100%}
.boxPP li b{font-size:.8em; line-height:1.4em; max-width:226px; display:block; font-weight:normal}
.boxPP li.on b{color:#0060FF}
.boxPP li.on i:before{background-color:#0060FF;}
/*.boxPP li.on:after{content:''; position:absolute; left:0; right:0; height:4px; background-color:#0060FF}*/
/*.boxPP ul.t li:after{bottom:-13px;}*/
.boxPP ul.t img{margin-bottom:1em}
.boxPP ul.t i{bottom:-1.8em}
.boxPP ul.b img{margin-top:1em}
.boxPP ul.b li:after{top:-13px;}
.boxPP ul.b b{min-height:2.8em}
.boxPP ul.b i{top:-1.6em}
.boxPP .showContent{margin:10.5em .5em 11.5em 0; border-radius:0 .5em .5em 0; padding:1.5em 1.5em 1.5em 0; border:2px solid #374663; border-left:none; position:relative}
.boxPP .showContent:after{content:''; position:absolute; top:50%; right:-8px; transform:translateY(-50%); background:url("/aivon/static/img/topic/pcba/icon_vector.png") no-repeat center center; width:14px; height:23px;}
/* .boxPP .showContent div{font-size:.7em; padding:3em 2em; background:url("/aivon/static/img/topic/pcba/bk_pp.png") no-repeat center center / cover;  */
.boxPP .showContent div{font-size:.7em; padding:3em 2em;background-color: rgba(138, 143, 180, 0.04);border: 1px solid rgba(76, 76, 76, 0.42);
	border-radius:10px; }
.boxPP .showContent b{display:block; margin-bottom:.5em}
.boxPP .showContent p{color:rgba(255,255,255,0.7)}

.boxHO{border:1px solid #D9D9D9; border-radius:.5em; display:flex; justify-content:space-between; padding:3em}
.boxHO:after{content:''; display:block; background:url("/aivon/static/img/topic/pcba/img_a1.png") no-repeat center center; width:687px; height:367px; flex:auto 0 0; border-radius:10px; overflow:hidden}
.boxHO b{display:block; margin-bottom:1.2em;}
.boxHO li:first-of-type:after,.boxHO li:last-of-type:before{display:none}
.boxHO li{display:flex; gap:.7em; align-items:center; padding:.8em 0; position:relative}
.boxHO li:after,.boxHO li:before{content:''; position:absolute; left:12px; height:50%; width:1px; background-color:#0060FF; opacity:.4}
.boxHO li:after{top:0}
.boxHO li:before{bottom:0}
.boxHO li em{font-size:.7em; background-color:#0060FF; color:#fff; border-radius:50%; width:1.8em; height:1.8em; line-height:1.8em; text-align:center; position:relative; z-index:2;}
.boxHO li span{font-size:.7em;}
.boxHO .bnsa{font-size:.8em; margin-top:4em}

.boxSV{display:flex; justify-content:space-between; flex-wrap:wrap; gap:3em; padding:1em 0 2em}
.boxSV li{width:29%}
.boxSV i{display:block; width:3.6em; height:3.6em; background:#D9E7FF no-repeat center center; border-radius:50%}
.boxSV i.s01{background-image:url("/aivon/static/img/topic/pcba/icon_s01.png")}
.boxSV i.s02{background-image:url("/aivon/static/img/topic/pcba/icon_s02.png")}
.boxSV i.s03{background-image:url("/aivon/static/img/topic/pcba/icon_s03.png")}
.boxSV i.s04{background-image:url("/aivon/static/img/topic/pcba/icon_s04.png")}
.boxSV i.s05{background-image:url("/aivon/static/img/topic/pcba/icon_s05.png")}
.boxSV i.s06{background-image:url("/aivon/static/img/topic/pcba/icon_s06.png")}
.boxSV b{display:block; margin:1em 0 .5em}
.boxSV p{font-size:.7em;}

/* FAQ Section */
.faq-item{border-radius:12px; margin-bottom:20px; border:1px solid #E5E5E5; overflow:hidden;}
.faq-item.active{border:1px solid #E5E5E5; box-shadow:0 2px 17.9px rgba(118,141,201,0.25);}
.faq-item:hover{box-shadow:0px 2px 17.9px rgba(118,141,201,0.25); border:1px solid #E5E5E5}
.faq-question{font-size:18px; font-weight:500; color:#000000; line-height:1.4; padding:25px 30px; margin:0; cursor:pointer; background:white; border:none; width:100%; text-align:left; position:relative; transition:all 0.3s ease}
.faq-question:hover{color:#0060ff}
.faq-item.active .faq-question{color:#0060ff}
.faq-question:after{content:""; background-image:url("/aivon/static/img/activity/invite/arrow_down.png"); width:24px; height:24px; position:absolute; right:30px; top:50%; transform:translateY(-50%) rotate(0deg); font-size:16px; color:#0060ff; transition:transform 0.3s ease}
.faq-item.active .faq-question:after{transform:translateY(-50%) rotate(180deg)}
.faq-answer{background:white; padding:0 30px; font-size:14px; max-height:0; overflow:hidden; transition:max-height 0.4s ease,padding 0.4s ease; opacity:0}
.faq-item.active .faq-answer{max-height:600px; padding:25px 30px 30px; opacity:1; transition:max-height 0.4s ease,padding 0.4s ease,opacity 0.2s ease 0.1s}
.faq-answer-content{color:#5a6c70; font-size:16px; line-height:1.6; margin:0}
.faq-answer-content p{margin-bottom:15px}
.faq-answer-content p:last-child{margin-bottom:0}
.faq-section{padding:0px 0; background:#fff}
.faq-container{max-width:1300px; margin:0 auto; padding:0 20px}
.faq-title{text-align:center; font-size:32px; font-weight:700; margin-bottom:40px; color:#2b2b2b}
.faq-item{border-radius:6px; margin-bottom:18px; overflow:hidden}
.faq-item-border{border:1px solid #d9d9d9}
.faq-question{background:#fff; padding:20px 30px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:16px; color:#262c2d; transition:background 0.3s}
.faq-question:hover{/* background:#f8f9fa; */}
.faq-arrow{width:24px; height:24px; transform:rotate(0deg); transition:transform 0.3s}
.faq-item.active .faq-arrow{transform:rotate(180deg)}
.faq-answer{padding:0 30px; max-height:0; overflow:hidden; transition:max-height 0.3s,padding 0.3s; background:#f8f9fa}
.faq-item.active .faq-answer{font-size:16px; padding:20px 30px}

.aiv-card__link{font-size:14px; font-weight:500; color:#939393; transition:color 0.2s ease,transform 0.2s ease}
.aiv-card__link--primary{color:#0060ff; position:relative; padding-right:18px}
.aiv-card__link--primary::after{content:"\2192"; position:absolute; top:60%; right:0; transform:translateY(-52%); font-size:14px}
.aiv-card__link:hover{color:#0060ff; text-decoration:dashed}
.aiv-card__link--primary:hover{text-decoration:underline}
.aiv-card__blog__link{color:#0060FF !important; text-decoration:none; position:absolute; bottom:20px;transition:transform 0.2s ease;}
.aiv-card__blog__link::after{content:"\2192"; position:absolute; top:60%; right:-20px; transform:translateY(-52%); font-size:14px}
.aiv-card__blog__link:hover::after{transform:translateY(-52%) translateX(10px);}
.listBlog{position:relative; display:flex;  gap:36px;padding:0 20px;padding-bottom:4em;}
.listBlog .item{height:460px; width:408px; background-color:#fff; border-radius:.4em; overflow:hidden; border:1px solid #e8e8e8; position:relative}
.listBlog .item:hover{box-shadow:0 2px 27.7px rgba(89, 114, 179, 0.25)}
.listBlog .item .pic{height:250px}
.listBlog .item .cnt{padding:1em}
.listBlog .item a.tit{font-weight:bold; display:block; margin-bottom:0; color:#333}
.listBlog .item a.tit:hover{color:#0060FF}
.listBlog .item .desc{height:3em; font-size:.7em; font-family:'HarmonyOS Sans'; font-style:normal; font-weight:400; font-size:16px; /* or 21px */
	color:#37393F}
.listBlog .item em{display:block; font-size:.7em; color:#999; margin-bottom:1em}


.boxTopicFooter{background:url("/aivon/static/img/topic/pcba/bk_footer.png") no-repeat center center / cover; text-align:center; padding:2em 0}
.boxTopicFooter b{font-size:1.7em;}
.boxTopicFooter p{font-size:.7em; margin:.5em 0 2em;}
.boxTopicFooter .bnsa{font-size:.8em}