.sstx-comp{ width: 100%; height: p(1100); background: url('../images/sstx-bg.png') center no-repeat; background-size: 100% 100%; .lxwjzxfw-plan{ padding: p(0) p(350); display: flex; flex-direction: column; } .sstx-plan{ // padding: p(0) p(350); display: flex; flex-direction: column; } h3 { color: #fff; font-size: p(22); position: relative; line-height: p(46); div { position: absolute; bottom: 0; left: 0; width: p(45); height: 2px; background-color: #aeaeb7; } } .sstx-lc{ padding-top: p(36); .box{ flex: 1; display: flex; justify-content: center; position: relative; .lc-plan{ width: p(250); height: p(84); background-image: linear-gradient(140deg, #e0e4f0 0%, #b3bad1 100%); border-radius: 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; p:nth-of-type(1) { font-size: p(20); color: #000000; font-weight: 600; } p:nth-of-type(2) { font-size: p(16); color: #515c73; } } .icon-plan{ } } .box-min{ .lc-plan{ width: p(180); height: p(70); } } .blue-box{ .lc-plan{ background-image: linear-gradient(140deg, rgba(22, 92, 255, 0.3) 0%, rgba(22, 92, 255, 0.3) 100%); border-radius: 6px; border: dashed 2px rgba(22, 92, 255, 0.8); p{ color: #fff !important; } p:nth-of-type(1) { font-size: p(20); } p:nth-of-type(2) { font-size: p(16); } } } .lc-top{ display: flex; .lc-plan{ } .icon-plan{ } .box-1{ .icon-plan{ position: absolute; bottom: p(-48); img{ width: p(18); } p{ position: absolute; font-size: p(18); color: #fff; top: 10%; right: 50%; transform: translate(60%, 0); width: max-content; letter-spacing: p(15); } } } } .lc-center{ display: flex; align-items: center; height: p(115); background-color: rgba(179, 186, 209, 0.25); border-radius: 4px; border: solid 1px rgba(179, 186, 209, 0.8); margin-top: p(30); margin-bottom: p(20); .box-1,.box-2{ .icon-plan,.icon-plan1{ position: absolute; // bottom: p(-48); right: p(-60); top: 50%; transform: translate(0, -50%); img{ width: p(140); height: p(18); } div{ position: absolute; top: p(-12); width: p(140); p{ font-size: p(18); color: #fff; text-align: center; } } } } .box-2{ .icon-plan1{ right: p(-200); img{ width: p(286); } div{ width: p(286); } } .icon-plan2{ position: absolute; bottom: p(-80); img{ width: p(18); height: p(90); } p{ position: absolute; font-size: p(18); color: #fff; top: 60%; right: 50%; transform: translate(50%, 0); width: max-content; } } } } .lc-bottom{ display: flex; align-items: center; padding-top: p(20); height: p(160); background-color: rgba(179, 186, 209, 0.25); border-radius: 4px; border: solid 1px rgba(179, 186, 209, 0.8); .box-1{ .icon-plan1{ position: absolute; top: p(-90); img{ width: p(18); height: p(90); } p{ position: absolute; font-size: p(18); color: #fff; top: 60%; right: 50%; transform: translate(50%, 0); width: max-content; } } .icon-plan2{ position: absolute; right: p(-65); top: 50%; transform: translate(0, -50%); img{ width: p(140); height: p(18); } div{ position: absolute; top: p(-12); width: p(140); p{ font-size: p(18); color: #fff; text-align: center; } } } } .box-2{ .icon-plan{ position: absolute; right: p(-30); top: 50%; transform: translate(0, -50%); img{ width: p(140); height: p(18); } } } .box-3{ .icon-plan{ position: absolute; top: p(-210); img{ width: p(18); height: p(210); } p{ position: absolute; font-size: p(18); color: #fff; bottom: 2%; right: 50%; transform: translate(65%, 0); width: max-content; } } } } .lxwj-text{ color: #ffffff; font-size: p(18); margin-top: p(45); } } .xq-box{ display: flex; align-items: flex-end; .video-box{ width: p(517); height: p(290); // background-color: #165dff; margin-right: p(188); iframe{ width: 100%; height: 100%; } } .btn-box{ margin-top: p(80); li{ width: p(190); height: p(55); background-color: #165dff; border-radius: p(4); display: flex; align-items: center; justify-content: space-evenly; margin-bottom: p(40); cursor: pointer; img{ width: p(26); } p{ color: #ffffff; font-size: p(24); } } li:last-child { margin-bottom: p(15); } li:hover{ background-color: #3f77fc; } } } }