*{ margin:0; padding:0; box-sizing:border-box }
::after,::before{ display:block }
.clearfix::after{ content:""; display:block; clear:both }
.wrap{ max-width:1415px; width:90%; margin:0 auto }
ul,li{ list-style:none }
.block-a{ background:#fff }
.block-a .wrap{ padding-top:0% }
.block-a .wrap .top-title{ font-family:Poppins; font-size:72px; font-weight:bold; line-height:90px; margin-bottom:3% }
.block-a .wrap .blue{ color:#43a1e1 }
.block-a .wrap .card-stack{ position:relative; height:400vh }
.block-a .wrap .card-stack .top-title{ position:absolute; left:0; top:120px }
.block-a .wrap .card-stack .card-list{ position:sticky; height:100vh; top:0 }
.block-a .wrap .card-stack .card-list .card{ min-height:100vh; margin:0 auto; position:absolute; left:0; top:0; display:block; transform-origin:center top; display:flex; align-items:center; justify-content:center; transition:all .1s linear }
.block-a .wrap .card-stack .card-list .card .item{ border-radius:10px; box-shadow:0px 4px 40px 0px rgba(0,0,0,.2); background:linear-gradient(103deg,#43a1e1 1%,#165193 99%); height:458px }
.block-a .wrap .card-stack .card-list .card .container{ height:100%; padding-top:6% }
.block-a .wrap .card-stack .card-list .card .container .left-text{ float:left; width:50%; padding:0 6% 0 5%; font-size:36px; font-weight:bold; line-height:42px; color:#fff }
.block-a .wrap .card-stack .card-list .card .container .right-text{ overflow:auto; width:50%; float:right; font-size:18px; font-weight:normal; line-height:28px; letter-spacing:0em; color:#fff; padding-right:6%; position:relative; height:100% }
.block-a .wrap .card-stack .card-list .card .container .right-text .index-box{ position:absolute; right:8%; bottom:8%; font-size:48px; font-weight:normal; line-height:48px; color:#fff }
.block-a .wrap .card-stack .card-list .card .container .right-text .index-box::after{ content:""; width:256px; height:1px; background:#fff; right:100%; position:absolute; bottom:50%; transform:translate(-25px,50%) }
.block-a .wrap .card-stack .card-list .card.activeNow{ background:linear-gradient(103deg,#43a1e1 1%,#165193 99%); box-shadow:0px 4px 40px 0px rgba(0,0,0,.2) }
@media screen and (max-width:1680px){ .block-a .wrap{padding-top:3% }
.block-a .wrap .top-title{ font-size:60px; line-height:1.25 }
.block-a .wrap .card-list{ min-height:400px }
.block-a .wrap .card-list .card{ min-height:400px }
.block-a .wrap .card-list .card .container{ padding-top:4% }
}
@media screen and (max-width:1600px){ .block-a .wrap .card-stack .top-title{top:100px }
.block-a .wrap .card-stack .btn-group{ bottom:-165px }
}
@media screen and (max-width:1536px){ .block-a .wrap .card-stack .top-title{font-size:50px; top:80px }
.block-a .wrap .card-stack .btn-group{ bottom:-128px }
.block-a .wrap .card-stack .card-list .card .container .left-text{ font-size:30px; line-height:1.1666666667 }
.block-a .wrap .card-stack .card-list .card .container .right-text{ font-size:16px; line-height:1.5555555556 }
}
@media screen and (max-width:1440px){ .block-a .wrap .card-stack .top-title{top:50px }
}
@media screen and (max-width:768px){ .block-a{height:auto; overflow:visible }
.block-a .wrap{ padding-top:50px }
.block-a .wrap .top-title{ font-size:30px; margin-bottom:40px }
.block-a .wrap .card-stack{ height:auto }
.block-a .wrap .card-stack .top-title{ position:static; font-size:30px;}
.block-a .wrap .card-stack .card-list{ height:auto }
.block-a .wrap .card-stack .card-list .card{ height:580px; position:sticky; margin-bottom:40px; top:0 }
.block-a .wrap .card-stack .card-list .card .item{ height:100% }
.block-a .wrap .card-stack .card-list .card .container{ display:block; padding:50px; display:flex; flex-direction:column }
.block-a .wrap .card-stack .card-list .card .container .left-text,.block-a .wrap .card-stack .card-list .card .container .right-text{ width:100%; padding:0; float:none }
.block-a .wrap .card-stack .card-list .card .container .left-text{ margin-bottom:30px }
.block-a .wrap .card-stack .card-list .card .container .right-text{ height:100%; flex:1 }
.block-a .wrap .card-stack .card-list .card .container .right-text .index-box{ bottom:0 }
.block-a .wrap .card-stack .card-list .card:nth-child(1){ top:34px }
.block-a .wrap .card-stack .card-list .card:nth-child(2){ top:68px }
.block-a .wrap .card-stack .card-list .card:nth-child(3){ top:102px }
.block-a .wrap .card-stack .card-list .card:nth-child(4){ top:136px }
.block-a .wrap .card-stack .card-list .card:nth-child(5){ top:170px }
.block-a .wrap .card-stack .card-list .card:nth-child(6){ top:206px }
.block-a .wrap .card-stack .card-list .card:nth-child(7){ top:274px }
.block-a .wrap .card-stack .btn-group{ display:none }
}
.transformThis{ animation:scaleDown 500ms }
.transformPrev{ animation:scaleUp 100ms; display:none }
@keyframes scaleUp{ 0%{transform:scale(1.2) translateY(50px); opacity:0 }
20%{ transform:scale(1.15) translateY(40px); opacity:.1 }
40%{ transform:scale(1.1) translateY(30px); opacity:.2 }
60%{ transform:scale(1.05) translateY(20px); opacity:.4 }
80%{ transform:scale(1.01) translateY(10px); opacity:.8 }
100%{ transform:scale(1) translateY(0); opacity:1 }
}
@keyframes scaleDown{ 0%{transform:scale(1) translateY(0); opacity:1 }
20%{ transform:scale(1.01) translateY(20px); opacity:.8 }
40%{ transform:scale(1.05) translateY(40px); opacity:.4 }
60%{ transform:scale(1.1) translateY(60px); opacity:.2 }
80%{ transform:scale(1.15) translateY(80px); opacity:.1 }
100%{ transform:scale(1.2) translateY(100px); opacity:0 }
}