html, body { width: 7680px !important; min-height: 2120px; height: 100%; font-size: 20px; color: #fff; font-family: 'Microsoft YaHei'; overflow-y: hidden; } /* 强制去掉滚动条 */ html { /* overflow-x: hidden !important; */ } * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } img *, *, *:before, *:after { padding: 0; margin: 0; box-sizing: border-box; } a { text-decoration: none; cursor: pointer; } [v-cloak] { display: none; } .appbg1 { background: url('../img/page-bg3.png') center center no-repeat; background-size: 100% 100%; } .appbg2 { background: url('../img/page-bg.png') center center no-repeat; background-size: 100% 100%; } .top { height: 180px; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .top > div { display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 48px; font-weight: bold; letter-spacing: 5px; } .top .title > span:before { content: ''; display: inline-block; width: 66px; /*图标宽度*/ height: 42px; /*图标高度*/ background: url('../img/title-left.png') no-repeat center center; /*图标路径*/ background-size: contain; /*图标大小适应*/ margin-right: 20px; /*图标与文字的间距*/ } .top .title > div { height: 30px; width: 40%; background: url('../img/title-light.png') center bottom no-repeat; background-size: 100% 100%; } .top .title > span:after { content: ''; display: inline-block; width: 66px; /*图标宽度*/ height: 42px; /*图标高度*/ background: url('../img/title-right.png') no-repeat center center; /*图标路径*/ background-size: contain; /*图标大小适应*/ margin-left: 20px; /*图标与文字的间距*/ } .top .mainTitle { height: 70%; font-size: 80px; font-style: oblique; text-shadow: 2px 3px 1px black; letter-spacing: 5px; } .bottom { height: calc(100% - 180px); width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 1% 1% 1%; align-items: end; position: relative; } .left, .right { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 10px; height: 100%; width: 100%; overflow: hidden; } .left > div, .center > div, .right > div { width: 100%; height: 100%; overflow: hidden; } .left .title, .center .title { width: 100%; /* height: calc(100% / 7); */ height: 80px; overflow: hidden; background: url('../img/small-title.png') no-repeat center bottom; /*图标路径*/ background-size: 100% 50%; display: flex; align-items: center; padding-left: 7%; font-size: 36px; font-style: oblique; text-shadow: 2px 3px 1px black; letter-spacing: 5px; } .left .child > div:nth-child(1):before { content: '●'; margin-right: 10px; color: #40a9ff; } .left .content, .center .content { width: 100%; height: calc(100% - 80px); overflow: hidden; padding: 1% 1% 0 1%; } .left1 { display: grid; grid-template-rows: 1fr 1.6fr; } .left1 > div:first-child { display: flex; align-items: center; justify-content: space-around; } .left1 .child { width: 47%; height: 100%; background: url('../img/left1.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); padding: 1% 3%; align-items: center; } .left1B { display: grid; grid-template-columns: 4fr 6fr; overflow: hidden; position: relative; } .left1B > div:nth-child(1) { overflow: hidden; /* background: url("../img/disk.png") no-repeat center center; */ background-size: 100% 100%; padding-bottom: 10%; } .left1C { display: grid; grid-template-rows: 1fr 2fr 2fr; overflow: hidden; padding-top: 30px; } .left1C-child { padding: 1%; } .checkBg { background: url('../img/disk.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; } .left .industryProportion1, .left2 .industryProportion1 { background: url('../img/industryProportion.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; } .left .industryProportion2 { background-color: #1f3152; } .left2 .industryProportion2 { background-color: #264580; } .left2 { display: grid; grid-template-rows: 3fr 17fr; overflow: hidden; } .left3 { display: grid; grid-template-columns: 9fr 11fr; overflow: hidden; } .left3A { display: grid; grid-template-rows: repeat(3, 1fr); overflow: hidden; gap: 30px; } .left3A > div:nth-child(1) { background: url('../img/retainedA.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; } .left3A > div:nth-child(2) { background: url('../img/retainedB.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; } .left3A > div:nth-child(3) { background: url('../img/retainedC.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; } .left4 { width: 100%; height: 100%; overflow: hidden; position: relative; display: grid; grid-template-columns: repeat(2, 1fr); } .left4A { width: 100%; height: 100%; overflow: hidden; position: absolute; } .left4A > div:not(:last-child), .bubble { position: absolute; animation: moveUpDown 4s infinite; } @keyframes moveUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .center { display: grid; grid-template-columns: 33fr 50fr 33fr; height: 95%; width: 100%; overflow: hidden; gap: 10px; position: relative; } .center > div:nth-child(1), .center > div:nth-child(3) { display: grid; grid-template-rows: repeat(3, 1fr); overflow: hidden; } .center1 { display: grid; grid-template-rows: 7fr 13fr; overflow: hidden; } .center1 > div:nth-child(2) { background: url('../img/bubbleBg.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; } .center1 > div:nth-child(3) { background: url('../img/blueBig.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; } .center1 > div:nth-child(4) { background: url('../img/blueSmall.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; } .center1 > div:nth-child(5) { background: url('../img/greenSmall.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; } .center1 > div:nth-child(6) { background: url('../img/greenBig.png') no-repeat center center; /*图标路径*/ background-size: 100% 100%; } .center2 { display: grid; grid-template-rows: 1fr 6fr; overflow: hidden; } .center2 > div:nth-child(1) > div { width: 100%; height: 100%; overflow: hidden; } .center2 > div:nth-child(1) { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 10px; overflow: hidden; } .center2 > div:nth-child(1) > div { margin-left: 10%; background-size: 100% 100% !important; overflow: hidden; padding-left: 40%; } .center2 > div:nth-child(1) > div:nth-child(1) { background: url('../img/centerTop1.png') no-repeat center left; /*图标路径*/ } .center2 > div:nth-child(1) > div:nth-child(2) { background: url('../img/centerTop2.png') no-repeat center left; /*图标路径*/ } .center2 > div:nth-child(1) > div:nth-child(3) { background: url('../img/centerTop3.png') no-repeat center left; /*图标路径*/ } .center2 > div:nth-child(1) > div:nth-child(4) { background: url('../img/centerTop4.png') no-repeat center left; /*图标路径*/ } .center3 { position: absolute !important; overflow: hidden; width: 100%; height: 100%; z-index: 1; top: -3%; left: 1%; opacity: 0.4; } .center5 { position: absolute !important; overflow: hidden; width: 100%; height: 100%; z-index: 1; top: 0; left: 0; opacity: 0.4; } .center4 > div > div { width: 100%; height: 100%; } .bgTooltip { overflow: hidden; padding: 10% 15% !important; margin: 0 !important; width: 450px; height: 250px; color: #fff; display: grid; grid-template-rows: repeat(3, 1fr); } .custom-tooltip-box { padding: 0 !important; border: none !important; background-color: transparent !important; } .blueIcon { font-size: 32px !important; } .blueIcon::before { content: '●'; margin-right: 10px; color: #40a9ff; } .bottom-tip { background: url('../img/center-bottonm.png') no-repeat center left; /*图标路径*/ background-size: 100% 100%; cursor: pointer; width: 1600px; height: 120px; position: absolute; bottom: 0; left: calc(50% - 800px); } .bottom-tip:hover { background: url('../img/center-bottonm2.png') no-repeat center left; /*图标路径*/ background-size: 100% 100%; } .svg_box { transform: rotateX(78deg); position: absolute; top: -65px; left: 0; } .left5 { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); } .row-item, .header-item { font-size: 20px !important; } .centerB { background: url('../img/chinaLight.png') no-repeat center center; /*图标路径*/ background-size: 95% 90%; } .chinaTop { width: 100%; height: 8.5%; position: absolute; top: 3%; z-index: 999; display: grid; grid-template-columns: repeat(4, 1fr); } .chinaTop > div:nth-child(1) { background: url('../img/centerTop1.png') no-repeat center left; /*图标路径*/ background-size: 100% 100%; } .chinaTop > div:nth-child(2) { background: url('../img/centerTop2.png') no-repeat center left; /*图标路径*/ background-size: 100% 100%; } .chinaTop > div:nth-child(3) { background: url('../img/centerTop3.png') no-repeat center left; /*图标路径*/ background-size: 100% 100%; } .chinaTop > div:nth-child(4) { background: url('../img/centerTop4.png') no-repeat center left; /*图标路径*/ background-size: 100% 100%; } .projectPop { background: rgba(50, 50, 50, 0.7); padding: 10px; font-size: 28px; transition: all 0.3s; } .backBlack { width: 7680px !important; min-height: 2120px; height: 100%; top: 0; left: 0; background-color: rgba(0, 5, 16, 0.7); z-index: 999999999; } .tip-box1 { position: absolute; width: 2300px !important; height: 1500px !important; top: calc(50% - 650px); left: calc(50% - 1150px); background: url('../img/pop.png') no-repeat center; background-size: 100% auto; padding: 0px 100px 100px 100px; border-radius: 55px; } .pop-title1 { width: 100%; height: 160px; line-height: 160px; text-align: center; font-size: 48px; background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pop-content1 { width: 100%; height: calc(100% - 260px); } .titleImg { width: auto; height: 100%; border-radius: 10px; } .popLeft, .popright { height: 75%; width: 45%; } .popright { right: 5%; } .productTip { position: absolute; height: 1900px !important; /* width: calc(700px / 9 * 16 + 200px) !important; */ width: 2900px; top: calc(50% - 750px); left: calc(50% - 2900px/2); z-index: 99999999999 !important; background: url('../img/pop.png') no-repeat center; background-size: 100% auto; } .iframeCss { /* transform: scale(1.4); */ position: absolute; left: calc(50% - 750px); top: calc(50% - 470px); } /* 公共css */ /* 宽高纵横比 */ .font28 { font-size: 28px; } .fb { font-weight: bold !important; } .fn { font-weight: normal !important; } .pointer { cursor: pointer; } i { font-style: normal !important; } .aspect-auto { aspect-ratio: auto; } .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: 16 / 9; } /* aspect-[4/3] */ /* 居中 */ .mx-auto { margin: 0 auto; } /* 设置容器内的列数/每列距离 */ .columns-1 { columns: 1; } /* columns-[20px] */ /* 盒子模型 */ .box-border { box-sizing: border-box; } .box-content { box-sizing: content-box; } /* 消失 */ .hidden { display: none; } /* 块级元素 */ .block { display: block; } /* 行内块 */ .inline-block { display: inline-block; } /* 行内元素 */ .inline { display: inline; } /* 弹性布局 */ .flex { display: flex; } /* 主轴起点在左边 */ .flex-row { flex-direction: row; } /* 主轴起点在右边 */ .flex-row-reverse { flex-direction: row-reverse; } /* 主轴竖向排列,在上面 */ .flex-col { flex-direction: column; } /* 主轴竖向排列,在下面 */ .flex-col-reverse { flex-direction: column-reverse; } /* 自动换行 */ .flex-wrap { flex-wrap: wrap; } /* 自动换行下起点 */ .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* 不换行 */ .flex-nowrap { flex-wrap: nowrap; } /* 弹性成长 */ .grow { flex-grow: 1; } /* 不允许弹性成长 */ .grow-0 { flex-grow: 0; } /* 主轴从左开始 */ .justify-start { justify-content: flex-start; } /* 主轴从右开始 */ .justify-end { justify-content: flex-end; } /* 主轴剧中 */ .justify-center { justify-content: center; } /* 主轴两端无间隔 */ .justify-between { justify-content: space-between; } /* 主轴两端有间隔 */ .justify-around { justify-content: space-around; } /* 所有间隔相等 */ .justify-evenly { justify-content: space-evenly; } /* 纵向起点最上方 */ .items-start { align-items: flex-start; } /* 纵向起点最下方 */ .items-end { align-items: flex-end; } .items-center { align-items: center; } /* 网格布局 */ .grid { display: grid; } /* 有几列 */ .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, 1fr); } /* 有几行 */ .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); } /* 容器中的内容上下布局 */ .grid-center { align-items: center; } /* 间距 */ .gap-7 { gap: 1.75rem; } /* 允许弹性成长 */ .shrink { flex-shrink: 1; } /* 不允许弹性成长 */ .shrink-0 { flex-shrink: 0; } /* 不允许成长也不允许收缩 */ .flex-none { flex: none; } /* 浮动布局 */ .float-right { float: right; } .float-left { float: left; } .clear-both { clear: both; } /* 溢出 */ .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden !important; } .overflow-scroll { overflow: scroll; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } /* 定位 */ .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .top-0 { top: 0px; } .right-0 { right: 0px; } .bottom-0 { bottom: 0px; } .left-0 { left: 0px; } /* top-[3px] */ /* z-[100] */ /* 显示隐藏未脱离文档流 */ .visible { visibility: visible; } .invisible { visibility: hidden; } /* 内边距 */ .p-0 { padding: 0px; } .px-0 { padding-left: 0px; padding-right: 0px; } .py-0 { padding-top: 0px; padding-bottom: 0px; } .pt-0 { padding-top: 0px; } .pr-0 { padding-right: 0px; } .pb-0 { padding-bottom: 0px; } .pl-0 { padding-left: 0px; } /* p-[5px] */ /* 外边距 */ .m-0 { margin: 0px; } .mx-0 { margin-left: 0px; margin-right: 0px; } .my-0 { margin-top: 0px; margin-bottom: 0px; } .mt-0 { margin-top: 0px; } .mr-0 { margin-right: 0px; } .mb-0 { margin-bottom: 0px; } .ml-0 { margin-left: 0px; } /* m-[5px] */ /* 宽度 */ .w-full { width: 100%; } .w-screen { width: 100vw; } /* w-[32rem] */ /* min-w-[50%] */ /* max-w-[50%] */ /* 高度 */ .h-full { height: 100%; } .h-screen { height: 100vh; } /* h-[32rem] */ /* min-h-[50%] */ /* max-h-[32rem] */ /* 字体 */ .text-xs { font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */ } .text-sm { font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ } .text-base { font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */ } .text-lg { font-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */ } .text-xl { font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */ } .text-2xl { font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */ } .text-3xl { font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */ } .text-4xl { font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */ } .text-5xl { font-size: 3rem; /* 48px */ line-height: 1; } .text-6xl { font-size: 3.75rem; /* 60px */ line-height: 1; } .text-7xl { font-size: 4.5rem; /* 72px */ line-height: 1; } .text-8xl { font-size: 6rem; /* 96px */ line-height: 1; } .text-9xl { font-size: 8rem; /* 128px */ line-height: 1; } /* text-[14px] */ /* 字体粗细font-weight */ /* font-[1100] */ /* https://tailwindcss.com/docs/font-weight */ /* 字体间距letter-spacing */ /* tracking-[.25em] */ /* 行高line-height */ /* leading-[3rem] */ /* 无列表样式 */ .list-none { list-style-type: none; } /* 小圆点 */ .list-disc { list-style-type: disc; } /* 数字列表 */ .list-decimal { list-style-type: decimal; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* 所有文本头尾对齐 */ .text-justify { text-align: justify; } /* 文本颜色 */ /* text-[#50d71e] */ /* https://tailwindcss.com/docs/text-color */ /* 下划线 */ .underline { text-decoration-line: underline; } /* 上划线 */ .overline { text-decoration-line: overline; } /* 中划线 */ .line-through { text-decoration-line: line-through; } /* 无划线 */ .no-underline { text-decoration-line: none; } /* 全小写 */ .lowercase { text-transform: lowercase; } /* 全大写 */ .uppercase { text-transform: uppercase; } /* 首字母大写 */ .capitalize { text-transform: capitalize; } /* right css start */ .right { display: grid; grid-template-rows: 20% 34% 1fr; gap: 10px; } .right .means { grid-column: 1 / 3; display: flex; } .wrapMeansItem { display: flex; justify-content: space-around; align-items: center; flex: 1; } .meansHead { font-size: 2rem; font-family: Source Han Sans CN; font-weight: 500; color: #ffffff; display: flex; align-items: center; } .meansHead img { width: 3rem; height: 2.5rem; margin-right: 1.25rem; } .meansWrap { width: 75%; display: flex; flex-direction: column; } .itemWid { width: calc(100% / 6); height: 100%; display: flex; align-items: flex-end; position: relative; } .itemWid2 { width: calc(100% / 2); height: 100%; display: flex; align-items: flex-end; position: relative; } .itemWid2 img { position: absolute; right: -70px; bottom: 15px; width: 120px; } .itemWid img { position: absolute; right: -65px; bottom: 15px; width: 120px; } .itemBac { background: url(../img/3.png) no-repeat; background-size: 100% 100%; background-position: center; font-size: 1.75rem; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; height: calc(100% - 1.75rem); width: 100%; position: relative; } .itemBac2 { background: url(../img/4.png) no-repeat; background-size: 100% 100%; background-position: center; } .itemBac div { font-size: 72px; line-height: 60px; font-family: Helvetica Neue Extra Black Cond; font-weight: bold; color: #68bdff; position: absolute; top: 75px; left: 148px; display: flex; align-items: flex-end; } .itemBac2 div { color: #5bdcc8; } .itemBac div p { font-size: 28px; line-height: 28px; margin-left: 10px; } .itemBac span { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; } .active .itemBac { background: url(../img/5.png) no-repeat; background-size: 100% 100%; } .active .itemBac span, .active .itemBac div { color: #ebde27; } .publicTitle { width: 100%; height: 80px; overflow: hidden; background: url('../img/small-title.png') no-repeat center bottom; /*图标路径*/ background-size: 100% 50%; display: flex; align-items: center; padding-left: 7%; font-size: 36px; font-style: oblique; text-shadow: 2px 3px 1px black; letter-spacing: 5px; } .progressCost { display: flex; justify-content: space-between; align-items: center; width: 100%; height: calc(100% - 100% / 7); overflow: hidden; padding: 1%; } .progressCost .costItem { width: 30%; height: 100%; } .progressCost .costItem .itemTop { background: url(../img/70.png) no-repeat; background-size: 100% 100%; height: 76%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .itemTop p { font-size: 1.75rem; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; position: relative; } .itemTop p::after { content: ''; width: 0.75rem; height: 0.75rem; background: linear-gradient(0deg, #014198, #93ceff); border-radius: 50%; position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%); } .itemTop .topDiv { padding-left: 1.25rem; min-width: 220px; } .costNum { font-family: Helvetica Neue Extra Black Cond; font-weight: 400; color: #68bdff; display: flex; align-items: flex-end; margin-top: 1rem; font-size: 60px; line-height: 48px; font-weight: bold; color: #68bdff; } .costNum span { font-size: 28px; line-height: 28px; margin-left: 0.625rem; } .progressCost .costItem .itemBottom { background: url(../img/71.png) no-repeat; background-size: 100% 100%; height: 24%; display: flex; align-items: center; justify-content: space-around; } .progressCost .costItem .itemBottom div { font-size: 2rem; font-family: Source Han Sans CN; font-weight: 500; color: #ffffff; } .costItem .itemBottom img { width: 2rem; height: 1.625rem; position: relative; } .aniLeft { animation: identifierl 1s infinite; } .aniRight { animation: identifierr 1s infinite; } @keyframes identifierl { 0% { left: 0; } 50% { left: 1.25rem; } 100% { left: 0; } } @keyframes identifierr { 0% { left: 0; } 50% { left: -1.25rem; } 100% { left: 0; } } .invest { display: flex; justify-content: space-around; align-items: center; height: calc(100% - 100% / 7); } .invest .lp { width: 53%; height: calc(100% - 2rem); display: flex; align-items: center; position: relative; background: url(../img/10.png) no-repeat; background-size: contain; background-position: center; margin: 1rem 0; } .lp img { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .quan { width: 150px; height: 150px; border: 1px dashed #66bbfc; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .bigq { width: 420px; height: 420px; border: 1px dashed #66bbfc; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .invest .lp .plItem { position: absolute; top: 0; width: 100%; height: 100%; font-size: 28px; line-height: 28px; font-family: Source Han Sans CN; font-weight: bold; color: #68bdff; transform-origin: center center; background: url(../img/11.png) no-repeat; background-size: contain; background-position: center; transition: 0.5s; } .plItem .active { color: #ebde27; } .invest .lp .plItem div { position: absolute; left: 130px; top: 50%; transform-origin: 200px 50%; cursor: pointer; } .investInfoWrap { display: flex; flex-direction: column; justify-content: space-around; padding: 2.375rem 0; height: 100%; } .investInfoWrap .investInfo { font-size: 28px; line-height: 28px; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; display: flex; align-items: flex-end; position: relative; padding-left: 20px; } .investInfoWrap .investInfo::after { content: ''; width: 20px; height: 20px; border: 4px solid #68bdff; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: -10px; } .investInfoWrap .investInfo span { font-size: 40px; line-height: 31px; display: inline-block; font-family: Helvetica Neue Extra Black Cond; font-weight: 400; color: #68bdff; margin: 0 16px; } .echartsWrap { height: calc(100% - 100% / 7); } .projectRisk { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; width: 100%; height: calc(100% - 100% / 7); } .projectRisk .riskWrap { height: 100%; width: 100%; } .projectRisk .longRisk { grid-column: 1 / 3; } .shareholding { flex: 1; display: flex; flex-direction: column; } /* right css end */