.subBanner { width: 100%; height: 200px; background: url(../images/busi_2.jpg); background-repeat: no-repeat; background-size: cover; background-position: 100% 50%; } em { padding-left: 10px; } .innerIndex { width: 100%; margin: 0px auto 0; background-color: #efefef; } .innerIndex > ul > li { float: left; width: 33.333333%; text-align: center; } .innerIndex > ul > li > a { display: block; height: 40px; line-height: 40px; color: #555; font-weight: 600; } .innerIndex > ul > li > a:hover { background-color: #bbb; color: #fff; } .businessContainer { margin: 0; } .businessContainer > .aiWrapper { width: 100%; height: 500px; background-image: url(../images/busi.jpg); background-position: 0 100%; background-repeat: no-repeat; background-size: cover; } .businessContainer > .aiWrapper > p { display: none; position: absolute; top: 30px; right: 30px; z-index: 9999; } .businessContainer > .aiWrapper > p > a { padding: 10px; text-align: center; font-size: 30px; font-weight: 900; color: #333; background-color: #ddd; } .businessContainer > .aiWrapper > .aiRightBox { position: relative; width: 950px; height: 100%; background-color: #0061a9; } .businessContainer > .aiWrapper > .aiRightBox:after { position: absolute; top: 40px; right: 50px; width: 300px; height: 200px; background-image: url(../images/ai_c.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; content: ''; } .businessContainer > .aiWrapper > .aiRightBox > ul { padding-top: 220px; margin-left: 350px; margin-right: 80px; } .businessContainer > .aiWrapper > .aiRightBox > ul > li { position: relative; list-style: disc; font-size: 14px; margin-bottom: 10px; line-height: 1.7em; color: #fff; text-shadow: 1px 2px #000; /* &:after { position: absolute; top: 50%; left: -20px; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 30px; background-color: #fff; content: ''; } */ } .businessContainer > .aiWrapper > .aiRightBox > ul > li:first-child { font-size: 30px; font-weight: 600; list-style: none; } .businessContainer > .socWrapper { width: 100%; height: 500px; background-image: url(../images/smart_b.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } .businessContainer > .socWrapper > ol { display: none; position: absolute; top: 30px; right: 20px; z-index: 9999; } .businessContainer > .socWrapper > ol > li { float: left; } .businessContainer > .socWrapper > ol > li > a { padding: 10px; text-align: center; font-size: 30px; font-weight: 900; color: #333; background-color: #ddd; } .businessContainer > .socWrapper > .socRightBox { position: relative; width: 950px; height: 100%; background-color: #3a87ab; } .businessContainer > .socWrapper > .socRightBox:after { position: absolute; top: 40px; right: 50px; width: 300px; height: 200px; background-image: url(../images/soc_c.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; content: ''; } .businessContainer > .socWrapper > .socRightBox > ul { padding-top: 220px; margin-left: 350px; margin-right: 80px; } .businessContainer > .socWrapper > .socRightBox > ul > li { position: relative; list-style: disc; font-size: 14px; margin-bottom: 10px; line-height: 1.7em; color: #fff; text-shadow: 1px 2px #000; } .businessContainer > .socWrapper > .socRightBox > ul > li:first-child { font-size: 30px; font-weight: 600; list-style: none; } .businessContainer > .siWrapper { width: 100%; height: 500px; background-image: url(../images/server_3.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } .businessContainer > .siWrapper > p { display: none; } .businessContainer > .siWrapper > .siRightBox { position: relative; width: 950px; height: 100%; background-color: #00a9a7; } .businessContainer > .siWrapper > .siRightBox:after { position: absolute; top: 40px; right: 80px; width: 200px; height: 200px; background-image: url(../images/coding_c.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; content: ''; } .businessContainer > .siWrapper > .siRightBox > ul { padding-top: 220px; margin-left: 350px; margin-right: 80px; } .businessContainer > .siWrapper > .siRightBox > ul > li { list-style: disc; position: relative; font-size: 14px; margin-bottom: 10px; line-height: 1.7em; color: #fff; text-shadow: 1px 2px #000; } .businessContainer > .siWrapper > .siRightBox > ul > li:first-child { font-size: 30px; font-weight: 600; list-style: none; } @media screen and (max-width: 768px) { .subBanner { width: 100%; height: 250px; background: url(../images/busi_2_b.png); background-repeat: no-repeat; background-size: cover; background-position: 100% 50%; } .businessContainer { margin: 0; } .businessContainer > .aiWrapper { position: relative; width: 100%; height: auto; background-image: url(../images/busi.jpg); background-position: 0 100%; background-repeat: no-repeat; background-size: cover; } .businessContainer > .aiWrapper > p { display: block; position: absolute; top: 30px; right: 30px; z-index: 9999; } .businessContainer > .aiWrapper > p > a { padding: 10px; text-align: center; font-size: 30px; font-weight: 900; color: #333; background-color: #ddd; } .businessContainer > .aiWrapper > .aiRightBox { position: relative; width: 100%; height: 100%; background-color: #0061a9; padding-bottom: 50px; } .businessContainer > .aiWrapper > .aiRightBox:after { position: absolute; top: 100px; right: 50%; transform: translateX(50%); width: 220px; height: 150px; background-image: url(../images/ai_c.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; content: ''; } .businessContainer > .aiWrapper > .aiRightBox > ul { padding-top: 300px; margin-left: 30px; margin-right: 30px; } .businessContainer > .aiWrapper > .aiRightBox > ul > li { margin-bottom: 10px; line-height: 1.7em; color: #fff; text-shadow: 1px 2px #000; font-size: 13px; } .businessContainer > .aiWrapper > .aiRightBox > ul > li > br { display: none; } .businessContainer > .aiWrapper > .aiRightBox > ul > li > em { padding-left: 0; } .businessContainer > .aiWrapper > .aiRightBox > ul > li:first-child { font-size: 30px; font-weight: 600; } .businessContainer > .socWrapper { position: relative; width: 100%; height: auto; background-image: url(../images/smart_b.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } .businessContainer > .socWrapper > ol { display: block; position: absolute; top: 30px; right: 20px; z-index: 9999; } .businessContainer > .socWrapper > ol > li { float: left; } .businessContainer > .socWrapper > ol > li > a { padding: 10px; text-align: center; font-size: 30px; font-weight: 900; color: #333; background-color: #ddd; } .businessContainer > .socWrapper > .socRightBox { position: relative; width: 100%; height: 100%; background-color: #3a87ab; padding-bottom: 50px; } .businessContainer > .socWrapper > .socRightBox:after { position: absolute; top: 100px; right: 50%; transform: translateX(50%); width: 220px; height: 150px; background-image: url(../images/soc_c.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; content: ''; } .businessContainer > .socWrapper > .socRightBox > ul { padding-top: 300px; margin-left: 30px; margin-right: 30px; } .businessContainer > .socWrapper > .socRightBox > ul > li { margin-bottom: 10px; line-height: 1.7em; color: #fff; text-shadow: 1px 2px #000; font-size: 13px; } .businessContainer > .socWrapper > .socRightBox > ul > li > br { display: none; } .businessContainer > .socWrapper > .socRightBox > ul > li > em { padding-left: 0; } .businessContainer > .socWrapper > .socRightBox > ul > li:first-child { font-size: 30px; font-weight: 600; } .businessContainer > .siWrapper { position: relative; width: 100%; height: auto; background-image: url(../images/si.jpg); background-position: 0% 50%; background-repeat: no-repeat; background-size: cover; } .businessContainer > .siWrapper > p { display: block; position: absolute; top: 30px; right: 30px; z-index: 99999; } .businessContainer > .siWrapper > p > a { padding: 10px; text-align: center; font-size: 30px; font-weight: 900; color: #333; background-color: #ddd; } .businessContainer > .siWrapper > .siRightBox { position: relative; width: 100%; height: 100%; background-color: #00a9a7; padding-bottom: 50px; } .businessContainer > .siWrapper > .siRightBox:after { position: absolute; top: 100px; right: 50%; transform: translateX(50%); width: 220px; height: 150px; background-image: url(../images/coding_c.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; content: ''; } .businessContainer > .siWrapper > .siRightBox > ul { padding-top: 300px; margin-left: 30px; margin-right: 30px; } .businessContainer > .siWrapper > .siRightBox > ul > li { margin-bottom: 10px; line-height: 1.7em; color: #fff; text-shadow: 1px 2px #000; font-size: 13px; } .businessContainer > .siWrapper > .siRightBox > ul > li > br { display: none; } .businessContainer > .siWrapper > .siRightBox > ul > li > em { padding-left: 0; } .businessContainer > .siWrapper > .siRightBox > ul > li:first-child { font-size: 30px; font-weight: 600; } } /*# sourceMappingURL=business.css.map */