@import url(channel.css); #industrial_oli { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 0; } #industrial_oli li .industrial_oli-box .img { position: relative; width: 50%; float: left; } #industrial_oli li .industrial_oli-box .img img { width: 100%; } #industrial_oli li .industrial_oli-box .img .content-wrap { position: absolute; top: 50%; left: 80%; background-color: #fff; transform: translateY(-50%); width: 100%; padding: 20px; text-align: left; transition: all 0.4s; } #industrial_oli li .industrial_oli-box .img .content-wrap .title { transition: all 0.4s; font-size: 32px; color: #333; font-weight: 700; letter-spacing: 4px; } #industrial_oli li .industrial_oli-box .img .content-wrap .content { transition: all 0.4s; font-size: 20px; letter-spacing: 3px; color: #333; } #industrial_oli li .industrial_oli-box .img .content-wrap .more-wrap { text-align: right; } #industrial_oli li .industrial_oli-box .img .content-wrap .more { font-size: 20px; letter-spacing: 3px; color: #666666; } #industrial_oli li .industrial_oli-box .img .content-wrap .more span { display: inline-block; margin-left: 5px; } #industrial_oli li .industrial_oli-box .img .content-wrap:hover { background: #00931c; } #industrial_oli li .industrial_oli-box .img .content-wrap:hover .title { color: #fff; } #industrial_oli li .industrial_oli-box .img .content-wrap:hover .content { color: #fff; } #industrial_oli li .industrial_oli-box .img .content-wrap:hover .more { color: #fff; } #industrial_oli li .industrial_oli-box .industrial_oli-content { float: left; width: 50%; } #industrial_oli li:nth-child(even) .img { float: right; } #industrial_oli li:nth-child(even) .img .content-wrap { left: -80%; } #industrial_oli li:not(:first-of-type) { margin-top: 90px; } @media screen and (max-width: 768px) { #industrial_oli { padding: 20px 0; } #industrial_oli li .industrial_oli-box { padding: 10px; } #industrial_oli li .industrial_oli-box .img { position: relative; width: 100%; float: none; box-shadow: 0 0px 12px #999; border-radius: 5px; overflow: hidden; } #industrial_oli li .industrial_oli-box .img img { display: none; width: 100%; } #industrial_oli li .industrial_oli-box .img .content-wrap { position: static; top: 0; left: 0; background-color: #fff; transform: translate(0, 0); width: 100%; padding: 20px; text-align: left; } #industrial_oli li .industrial_oli-box .img .content-wrap .title { font-size: 16px; } #industrial_oli li .industrial_oli-box .img .content-wrap .content { font-size: 14px; } #industrial_oli li .industrial_oli-box .img .content-wrap .more-wrap { text-align: right; } #industrial_oli li .industrial_oli-box .img .content-wrap .more { font-size: 14px; } #industrial_oli li .industrial_oli-box .industrial_oli-content { float: none; width: 100%; } #industrial_oli li:nth-child(even) .img { float: none; } #industrial_oli li:nth-child(even) .img .content-wrap { left: 0%; } #industrial_oli li:not(:first-of-type) { margin-top: 30px; } } .content { padding: 0px; } #soft .soft-row { background: #f2f8ff; } #soft .soft-row:nth-child(even) { background: #fff; } #soft .soft-row.row1 { padding: 132px 0; } #soft .soft-row.row1 .soft-wrap { width: 100%; max-width: 1200px; margin: 0 auto; } #soft .soft-row.row1 .soft-wrap .soft-top-box .img { overflow: hidden; } #soft .soft-row.row1 .soft-wrap .soft-top-box .img img { margin: 0 auto; width: 100%; transition: 0.6s; max-width: 238px; } #soft .soft-row.row1 .soft-wrap .soft-top-box .img img:hover { transform: scale(1.04); } #soft .soft-row.row1 .soft-wrap .soft-top-box .soft-cn .soft-cn-1 { font-size: 36px; font-weight: 700; letter-spacing: 5px; color: #333; } #soft .soft-row.row1 .soft-wrap .soft-top-box .soft-cn .soft-cn-2 { margin-top: 20px; font-size: 28px; letter-spacing: 4px; color: #333; } #soft .soft-row.row1 .soft-wrap .soft-top-box .soft-cn .soft-cn-3 { margin-top: 40px; font-size: 22px; letter-spacing: 3px; color: #666; } #soft .soft-row.row1 .soft-wrap .soft-top-box .soft-cn.layui-col-sm12 { text-align: center; } #soft .soft-row.row1 .soft-wrap .soft-bottom-box { margin-top: 88px; } #soft .soft-row.row1 .soft-wrap .soft-bottom-box ul > li { padding: 20px; } #soft .soft-row.row1 .soft-wrap .soft-bottom-box .circle { margin: 0 auto; width: 138px; height: 138px; border-radius: 50%; box-shadow: 0 0px 12px #d2dded; position: relative; } #soft .soft-row.row1 .soft-wrap .soft-bottom-box .circle .circle-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #5f799c; font-size: 24px; font-weight: 700; letter-spacing: 3px; text-align: center; width: 100%; } #soft .soft-row.row1 .soft-wrap .soft-bottom-box .circle-content-bottom { margin-top: 25px; text-align: center; font-size: 18px; letter-spacing: 3px; color: #666; } #soft .soft-row.row2 { padding: 132px 0; } #soft .soft-row.row2 .soft-wrap { width: 100%; max-width: 1200px; margin: 0 auto; } #soft .soft-row.row2 .soft-wrap .soft-top-box .img { overflow: hidden; } #soft .soft-row.row2 .soft-wrap .soft-top-box .img img { margin: 0 auto; width: 100%; transition: 0.6s; max-width: 238px; } #soft .soft-row.row2 .soft-wrap .soft-top-box .img img:hover { transform: scale(1.04); } #soft .soft-row.row2 .soft-wrap .soft-top-box .soft-cn .soft-cn-1 { font-size: 36px; font-weight: 700; letter-spacing: 5px; color: #333; } #soft .soft-row.row2 .soft-wrap .soft-top-box .soft-cn .soft-cn-2 { margin-top: 30px; font-size: 28px; letter-spacing: 4px; color: #333; } #soft .soft-row.row2 .soft-wrap .soft-top-box .soft-cn .soft-cn-3 { margin-top: 40px; font-size: 22px; letter-spacing: 3px; color: #666; } #soft .soft-row.row2 .soft-wrap .soft-top-box .soft-cn.layui-col-sm12 { text-align: center; } #soft .soft-row.row2 .soft-wrap .soft-bottom-box { margin-top: 88px; } #soft .soft-row.row2 .soft-wrap .soft-bottom-box ul > li { padding: 0px; } #soft .soft-row.row2 .soft-wrap .soft-bottom-box .circle { margin: 0 auto; width: 170px; height: 170px; border-radius: 50%; box-shadow: 0 0px 12px #d2dded; position: relative; } #soft .soft-row.row2 .soft-wrap .soft-bottom-box .circle .circle-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #5f799c; font-size: 24px; font-weight: 700; letter-spacing: 3px; text-align: center; width: 100%; } #soft .soft-row.row2 .soft-wrap .soft-bottom-box .circle-content-bottom { margin-top: 25px; text-align: center; font-size: 18px; letter-spacing: 3px; color: #666; } #soft .soft-row.row3 { padding: 132px 0; background: #f5fcf9; } #soft .soft-row.row3 .soft-wrap { width: 100%; max-width: 1200px; margin: 0 auto; } #soft .soft-row.row3 .soft-wrap .soft-top-box .img { overflow: hidden; } #soft .soft-row.row3 .soft-wrap .soft-top-box .img img { margin: 0 auto; width: 100%; transition: 0.6s; max-width: 238px; } #soft .soft-row.row3 .soft-wrap .soft-top-box .img img:hover { transform: scale(1.04); } #soft .soft-row.row3 .soft-wrap .soft-top-box .soft-cn .soft-cn-1 { font-size: 36px; font-weight: 700; letter-spacing: 5px; color: #333; } #soft .soft-row.row3 .soft-wrap .soft-top-box .soft-cn .soft-cn-2 { margin-top: 30px; font-size: 28px; letter-spacing: 4px; color: #333; } #soft .soft-row.row3 .soft-wrap .soft-top-box .soft-cn .soft-cn-3 { margin-top: 40px; font-size: 22px; letter-spacing: 3px; color: #666; } #soft .soft-row.row3 .soft-wrap .soft-top-box .soft-cn.layui-col-sm12 { text-align: center; } #soft .soft-row.row3 .soft-wrap .soft-bottom-box { margin-top: 88px; } #soft .soft-row.row3 .soft-wrap .soft-bottom-box ul > li { padding: 0px; } #soft .soft-row.row3 .soft-wrap .soft-bottom-box .circle { margin: 0 auto; width: 138px; height: 138px; border-radius: 50%; box-shadow: 0 0px 12px #d2dded; position: relative; } #soft .soft-row.row3 .soft-wrap .soft-bottom-box .circle .circle-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #5f799c; font-size: 24px; font-weight: 700; letter-spacing: 3px; text-align: center; width: 100%; } #soft .soft-row.row3 .soft-wrap .soft-bottom-box .circle-content-bottom { margin-top: 25px; text-align: center; font-size: 18px; letter-spacing: 3px; color: #666; } #soft .soft-row.row4 { padding: 132px 0; background: #fff; } #soft .soft-row.row4 .soft-wrap { width: 100%; max-width: 1200px; margin: 0 auto; } #soft .soft-row.row4 .soft-wrap .soft-top-box .img { overflow: hidden; } #soft .soft-row.row4 .soft-wrap .soft-top-box .img img { margin: 0 auto; width: 100%; transition: 0.6s; max-width: 238px; } #soft .soft-row.row4 .soft-wrap .soft-top-box .img img:hover { transform: scale(1.04); } #soft .soft-row.row4 .soft-wrap .soft-top-box .soft-cn .soft-cn-1 { font-size: 36px; font-weight: 700; letter-spacing: 5px; color: #333; } #soft .soft-row.row4 .soft-wrap .soft-top-box .soft-cn .soft-cn-2 { margin-top: 30px; font-size: 28px; letter-spacing: 4px; color: #333; } #soft .soft-row.row4 .soft-wrap .soft-top-box .soft-cn .soft-cn-3 { margin-top: 40px; font-size: 22px; letter-spacing: 3px; color: #666; } #soft .soft-row.row4 .soft-wrap .soft-top-box .soft-cn.layui-col-sm12 { text-align: center; } #soft .soft-row.row4 .soft-wrap .soft-bottom-box { margin-top: 88px; } #soft .soft-row.row4 .soft-wrap .soft-bottom-box ul > li { padding: 20px; } #soft .soft-row.row4 .soft-wrap .soft-bottom-box .circle { margin: 0 auto; width: 138px; height: 138px; border-radius: 50%; box-shadow: 0 0px 12px #d2dded; position: relative; } #soft .soft-row.row4 .soft-wrap .soft-bottom-box .circle .circle-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #5f799c; font-size: 24px; font-weight: 700; letter-spacing: 3px; text-align: center; width: 100%; } #soft .soft-row.row4 .soft-wrap .soft-bottom-box .circle-content-bottom { margin-top: 25px; text-align: center; font-size: 18px; letter-spacing: 3px; color: #666; } @media screen and (max-width: 992px) { #soft .soft-row.row2 .soft-bottom-box .circle-content-bottom { font-size: 14px !important; } } @media screen and (max-width: 768px) { #soft .soft-cn .soft-cn-1 { font-size: 20px !important; padding: 0 20px; } #soft .soft-cn .soft-cn-2 { font-size: 18px !important; padding: 0 20px; } #soft .soft-cn .soft-cn-3 { font-size: 16px !important; padding: 0 20px; } }