.banner-wrap { width: 100%; height: 500px; background: url("../image/robot_banner.png") no-repeat center center/cover } .banner-wrap .box { display: flex; flex-direction: column; justify-content: center; height: 100% } .banner-wrap .box h1 { font-size: 36px; color: #fff } .banner-wrap .box p { font-size: 18px; line-height: 1.7; color: #ccc } .banner-wrap .box a { margin-top: 30px; width: 140px; height: 42px; line-height: 42px } .voice-banner { background: url("../image/voice_robot_banner.png") no-repeat center center/cover } .robot-video { width: 42%; margin-right: 5% } .robot-video-txt { flex: 1 } .robot-video-txt h2 { font-size: 24px; font-weight: 500; color: #333; margin: 13px 0px 25px 0px } .robot-video-txt h4 { font-size: var(--font-size); font-weight: 500; color: #6e7080; margin-bottom: 40px } .robot-video-txt p { width: 45%; font-size: var(--font-size); line-height: 2 } .robot-video-txt .apply-robot { display: block; width: 160px; height: 42px; color: #fff; line-height: 42px; text-align: center; clear: both; background: #3f7adb; margin-top: 30px } .adapt-box { padding: 60px 0; justify-content: center } .adapt-box div:nth-child(2) { margin-left: 5% } .adapt-box .adapt-img { width: 42% } .adapt-box .adapt-txt { width: 45%; display: flex; flex-direction: column; justify-content: center } .adapt-box .adapt-txt h3 { font-size: 24px; color: #333; margin-bottom: 15px; font-weight: 500 } .adapt-box .adapt-txt p { font-size: var(--font-size); line-height: 1.7; color: #6e7080 } .talent-box { height: 420px; overflow: hidden } .talent-box .talent-item { position: relative; top: 0; width: 20%; height: 600px; text-align: center; } .talent-box .talent-item div:first-child { width: 100%; height: 420px; padding-top: 146px } .talent-box .talent-item:nth-child(1) div:first-child { background: url("../image/c106_1.jpg") center center no-repeat; background-size: cover } .talent-box .talent-item:nth-child(2) div:first-child { background: url("../image/c106_2.jpg") center center no-repeat; background-size: cover } .talent-box .talent-item:nth-child(3) div:first-child { background: url("../image/c106_3.jpg") center center no-repeat; background-size: cover } .talent-box .talent-item:nth-child(4) div:first-child { background: url("../image/c106_4.jpg") center center no-repeat; background-size: cover } .talent-box .talent-item:nth-child(5) div:first-child { background: url("../image/c106_5.jpg") center center no-repeat; background-size: cover } .talent-box .talent-item span { display: flex; height: 56px; align-items: center; justify-content: center } .talent-box .talent-item p { color: #fff; margin-top: 35px } .talent-box .talent-item:hover { top: -180px; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out } .talent-box .talent-item-txt { width: 100%; padding: 30px 32px 0 32px; height: 180px; background: #3f7adb; color: #fff; text-align: center; line-height: 24px; font-size: var(--font-size) } .support-box { max-width: 900px } .support-box .support-item { width: 25%; height: 200px; background: #fff; text-align: center; border-right: 1px solid #d3d8e0; border-bottom: 1px solid #d3d8e0 } .support-box .support-item .imgBox { margin-top: 56px } .support-box .support-item p { margin-top: 21px; color: #494a5d; font-size: var(--font-size) } .support-box .support-item .ms-d-active { display: none } .support-box .support-item .ms-d-default { display: inline-block } .support-box .support-item:nth-child(4n) { border-right: 0 } .support-box .support-item:hover { background: #528ef1 } .support-box .support-item:hover p { color: #fff } .support-box .support-item:hover .ms-d-active { display: inline-block } .support-box .support-item:hover .ms-d-default { display: none } .support-box .support-item:nth-child(n+5) { border-bottom: 0 } .voice-box { max-width: 900px } .voice-box div { width: 30.33333%; margin: 0 1.5%; text-align: center; height: 338px; background: #fff; border-radius: 6px; box-shadow: 0px 0px 10px rgba(82,97,241,.25) } .voice-box div span:first-child { height: 85px; display: flex; align-items: center; justify-content: center; margin-top: 52px } .voice-box div span:nth-child(2) { display: block; margin: 13px auto 19px; width: 64px; height: 28px; background: url("../image/c39_1.png") no-repeat center center } .voice-box div span img { width: 100px; margin-left: 16px } .voice-box div h4 { color: #333; font-size: 24px; font-weight: 400; text-align: center } .voice-box div p { font-size: var(--font-size); color: #282b42; margin-top: 19px; text-align: center; line-height: 1.5 } .voice-intel-box .voice-intel { width: 100%; display: flex } .voice-intel-box .intel-left { width: 45%; position: relative } .voice-intel-box .intel-box { width: 90%; padding: 22px 30px; box-sizing: border-box; border: 1px solid #d6d6d6; border-bottom: 0; margin: 0 0 0 10%; position: relative; cursor: pointer } .voice-intel-box .intel-box:last-child { border-bottom: 1px solid #d6d6d6 } .voice-intel-box .intel-box h3 { color: #4c4c4c; font-size: 20px; line-height: 1.5; font-weight: 400 } .voice-intel-box .intel-box p { display: none; font-size: var(--font-size) } .voice-intel-box .intel-box:hover { width: 100%; margin: 0 0 0 5%; background-color: #528ef1; color: #fff; border: 2px solid #528ef1; z-index: 3; transition: all .2s ease-in-out } .voice-intel-box .intel-box:hover .right-angle { width: 20px; height: 20px; position: absolute; right: -19px; top: -2px; background-image: url("../image/c40_2.png"); background-size: 100%; background-position: 0 0; } .voice-intel-box .intel-box:hover h3 { color: #fff } .voice-intel-box .intel-box:hover p { display: block } .voice-intel-box .intel-right { width: 65%; position: relative } .voice-intel-box .intel-right .intel-img { width: 100%; text-align: center; padding: 40px 60px; background-color: #fff; z-index: 0 } .audio-wrap { background-color: #444053 } .audio-box .voice-audio-wrap { width: 100%; margin: 0 auto; display: flex } .audio-box .audio-left { width: 30% } .audio-box .voice-sound-wrap { width: 85%; margin: 5% 5% 15% 5%; background-color: #fff; position: relative; transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out } .audio-box .voice-sound-wrap:hover { margin: 0 0 20% 0; width: 95% } .audio-box .voice-sound-wrap:hover .sound-title { background-color: #528ef1; color: #fff } .audio-box .voice-sound-wrap:hover .sound-title p { display: block } .audio-box .voice-sound-wrap:hover .sound-title h4 { color: #fff } .audio-box .voice-sound-wrap:hover .audio-angle { background-image: url("../image/c41_2.jpg"); right: -20px; transition: all .01s ease-in-out } .audio-box .voice-sound-wrap:hover .audio-angle-right { border-top: 20px solid #528ef1; border-left: 20px solid #433f52; transition: all .01s ease-in-out; z-index: 0; left: -20px } .audio-box .sound-title { padding: 20px 20px 10px 20px; border: 1px solid #528ef1; transition: all .01s ease-in-out; z-index: 3 } .audio-box .sound-title h4 { font-size: 20px; line-height: 2; text-align: center; color: #6298f1; font-weight: 400 } .audio-box .sound-title p { text-align: center; font-size: var(--font-size); display: none } .audio-box .sound-con { padding: 15px; transition: all .1s ease-in-out } .audio-box .sound-con p { line-height: 36px; font-size: var(--font-size); font-weight: 600; text-indent: 23%; color: #282b42 } .audio-box .audio-angle { width: 20px; height: 20px; position: absolute; top: 0; right: -19px; background-image: url("../image/c41_3.jpg"); background-size: 20px 20px; transition: all .1s ease-in-out } .audio-box .audio-angle-right { width: 20px; height: 20px; position: absolute; top: 0; left: -19px; background-image: url("../image/c41_7.jpg"); background-size: 20px 20px; transition: all .1s ease-in-out } .audio-box .audio { margin: 0 5%; width: 30% } .audio-box .audition-box { width: 300px; height: 532px; margin: 0 auto; background: #fff; position: relative } .audio-box .audition-title { width: 300px; height: 96px; border-bottom: 1px solid #706cf5; display: flex; align-items: center; justify-content: center } .audio-box .color-aud { background: url(../image/c41_5.png) no-repeat; height: 435px; width: 300px; background-size: 300px 435px } .audio-box .white-aud { background: url(https://www.hollycrm.com/assets/images/old/white-aud.png) no-repeat; height: 0px; width: 300px; background-size: 300px 435px } .audio-box .aud-start { position: absolute; top: 50%; left: 50%; margin-left: -26px; margin-top: -26px } .audio-box .audio-right { width: 30% } #audition-wav { width: 300px; height: 435px; position: relative } #audition-wav wave { display: none !important } .voice-why-box .voice-why { margin: 0 -1.5% } .voice-why-box .voice-why div { float: left; width: 22%; height: 300px; margin: 0 1.5%; text-align: center; padding: 3% 0 2%; transition: all .3s ease-in-out } .voice-why-box .voice-why div:hover,.voice-why-box .voice-why div.active { box-shadow: 0 8px 16px 0 rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.19); background-color: #fff } .voice-why-box .voice-why div h4 { font-size: 20px; line-height: 3; font-weight: 400 } .voice-why-box .voice-why div p { font-size: var(--font-size); text-align: left; padding: 0 32px; line-height: 1.5; color: #282b42; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden } .more-box .more { width: 100%; display: flex; flex-wrap: wrap } .more-box .more div { width: 20%; height: 180px; overflow: hidden; border: 1px solid #ebebeb; box-sizing: border-box; text-align: center; background-color: #fff; position: relative; transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out } .more-box .more div:hover { background-color: #528ef1; color: #fff } .more-box .more div:hover p { color: #fff } .more-box .more div:hover i:first-child { display: none } .more-box .more div:hover i:nth-child(2) { display: block } .more-box .more div i { display: block } .more-box .more div i:nth-child(2) { display: none } .more-box .more div img { height: 47px; margin-top: 40px } .more-box .more div p { line-height: 2; font-size: 16px; color: #6a6a6a; font-weight: 600; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); word-break: keep-all }/*# sourceMappingURL=robot.css.map */