/* 人才理念 */ .head{ display: flex; justify-content: center; align-items: center; } .head_d3{ padding-top: 0; } /* tab切换 */ .idea-tabBox { width: 100%; background: #F8F9FC; } .pd-t-b80 { padding: 80px 0; } .idea-flex { display: flex; } .idea-tabBox-ul { font-size: 16px; color: #333947; padding-bottom: 20px; border-bottom: 1px solid #DFDFDF; justify-content: center; } .idea-tabBox-ul li.active { color: #202C70; } .idea-tabBox-ul li { position: relative; cursor: pointer; margin: 0 50px; } .idea-tabBox-ul li.active::after { content: ""; width: 40px; height: 3px; position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); background-color: #202C70; transition: 0.5s; } .idea-tabBox-li-item { display: none; } .idea-tabBox-li-item.active { display: block; } .same { width: 1200px; margin: 0 auto; } .idea-tab-banner { margin-top: 36px; box-shadow: 1px 2px 5px #888888; border-radius: 9px; position: relative; overflow: hidden; } .idea-tab-banner img { width: 100%; object-fit: cover; } .idea-desc { position: absolute; top: 50%; right: -564px; transform: translateY(-50%); width: 564px; height: 300px; color: #fff; font-size: 16px; line-height: 34px; /* text-shadow: 0px 0px 20px rgba(5, 9, 34, 0.4); */ /* font-weight: 500; */ background: rgba(32, 44, 112, 0.65); /* box-shadow: 0px 0px 20px 0px rgba(5, 9, 34, 0.4); */ border-radius: 10px 0px 0px 10px; backdrop-filter: blur(3px); text-align: left; overflow: hidden; display: flex; padding: 0 65px; align-items: center; } .idea-tab-banner:hover .idea-desc { right: 0; transition: all 150ms; } .idea-tab-content { width: 100%; } .idea-system { background-color: #FFFFFF; } .idea-system-desc { text-align: center; font-size: 14px; color: #333947; line-height: 28px; margin-bottom: 36px; } .idea-system-left { width: 300px; height: 490px; margin-right: 27px; background: #EBEDF4 url(../newImage/rcln_img/idea_system_left.png) no-repeat; background-position: right bottom; border-radius: 4px; box-shadow: 0px 0px 14px 0px rgba(140, 149, 180, 0.15); padding-left: 30px; } .idea-system-left>div { margin-top: 30px; } .idea-system-left>div>p { margin-top: 16px; font-size: 16px; line-height: 16px; color: #323948; } .idea-system-left>div p.idea-system-left-title { font-size: 18px; line-height: 18px; color: #202C70; margin-top: 0; /* font-weight: bold; */ } .idea-system-mid { width: 54px; align-items: center; margin-right: 23px; } .idea-system-right { width: 796px; position: relative; /* background: url(../newImage/rcln_img/idea_system_right.png) no-repeat; */ /* background-size: 100%; */ } .idea-system-right .bgimg { position: absolute; top: 0; left: 0; } .bgimg-title { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); background: url(../newImage/rcln_img/pxtxjg.png) no-repeat; background-size: 100%; width: 144px; height: 144px; border-radius: 16px; z-index: 4; } .bgimg-title .idea-system-right-title { display: block; width: 100%; height: 100%; text-align: center; line-height: 144px; /* transform: rotateZ(-45deg); */ } .idea-system-right .bgimg img { width: 100%; object-fit: cover; } /* .idea-system-right>span{ position: absolute; top: 48%; left: 50%; transform: translateX(-50%); color: #202C70; font-size: 16px; } .idea-system-right .flex{ flex-wrap: wrap; } .idea-system-right .flex>div{ width: 50%; height: 100%; } */ .idea-system-right>div.flex { flex-wrap: wrap; } .idea-system-right>div.flex>div { width: 383px; height: 230px; padding: 0 20px; box-shadow: 0px 0px 14px 0px rgba(140, 149, 180, 0.15); border-radius: 8px; align-items: center; justify-content: space-between; z-index: 2; } .idea-system-right>div.flex div.flex:hover { box-shadow: 0px 0px 14px 0px rgba(140, 149, 180, 0.35); } .marginR30 { margin-right: 30px; } .marginB30 { margin-bottom: 30px; } .idea-system-right-title { color: #202C70; font-size: 16px; /* font-weight: bold; */ } .idea-system-right-content { font-size: 14px; font-weight: 400; color: #464D61; line-height: 14px; } .idea-system-right-content p { margin-bottom: 16px; } .idea-system-right-content p:last-child { margin-bottom: 0; } .idea-system-right-content-title { color: #333947; /* font-weight: bold; */ } .little-title { color: #84879A; } .idea-system-right>div.flex>div:nth-child(1) { background: url(../newImage/rcln_img/zyjnpx.png); background-size: cover; } .idea-system-right>div.flex>div:nth-child(2) { background: url(../newImage/rcln_img/tyglpx.png); background-size: cover; } .idea-system-right>div.flex>div:nth-child(3) { background: url(../newImage/rcln_img/ldlpx.png); background-size: cover; } .idea-system-right>div.flex>div:nth-child(4) { background: url(../newImage/rcln_img/xygrzpx.png); background-size: cover; } .idea-tab-mid { background-color: #F8F9FC; } .idea-ability-swiper { position: relative; overflow: hidden; } .idea-ability .swiper-wrapper .swiper-slide { /*height: 500px;*/ } .idea-ability .swiper-wrapper .swiper-slide .flex { flex-wrap: wrap; /* justify-content: space-between; */ height: 100%; } .idea-ability .swiper-wrapper .swiper-slide .idea-slider-item { width: 285px; /*height: 240px;*/ box-shadow: 0px 0px 10px 0px rgba(5, 9, 30, 0.2); margin-bottom: 20px; margin-right: 20px; } .idea-ability .swiper-wrapper .swiper-slide .idea-slider-item:nth-child(4n) { margin-right: 0; } .idea-slider-item img { width: 100%; height: 200px; object-fit: cover; } .idea-slider-item p { height: 50px; /*line-height: 30px;*/ display: flex; align-items: center; font-size: 14px; background-color: #fff; color: #333947; padding:0 20px; width: 100%; /*overflow: hidden;*/ /*text-overflow: ellipsis;*/ /*white-space: nowrap;*/ } .idea-ability .idea-slider-item:hover p { color: #202C70; border-bottom: 3px solid #2E3D95; } .same1 { max-width: 1410px; width: 100%; margin: 0 auto; } .idea-ability-swiper-pagination, .work-swiper-pagination,.grow-swiper-pagination { margin-top: 16px; text-align: center; } .idea-ability-swiper-pagination .swiper-pagination-bullet, .work-swiper-pagination .swiper-pagination-bullet, .grow-swiper-pagination .swiper-pagination-bullet{ width: 40px; height: 3px; margin: 0 7.5px; border-radius: 15px; outline: none; } .idea-ability-swiper-pagination .swiper-pagination-bullet-active, .work-swiper-pagination .swiper-pagination-bullet-active, .grow-swiper-pagination .swiper-pagination-bullet-active{ background-color: #202C70; outline: none; } .idea-ability-swiper-pagination .swiper-pagination-bullet, .work-swiper-pagination .swiper-pagination-bullet, .grow-swiper-pagination .swiper-pagination-bullet{ background-color: #2A468A; outline: none; } .idea-ability { position: relative; top: 0; left: 0; } .idea-ability-swiper-button-prev, .work-swiper-button-prev { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 60px; height: 60px; background: url(../newImage/rcln_img/idea_prev.png); background-size: 100%; z-index: 2; outline: none; } .idea-ability-swiper-button-next, .work-swiper-button-next { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 60px; height: 60px; background: url(../newImage/rcln_img/idea_next.png); background-size: 100%; z-index: 2; outline: none; } .idea-ability .swiper-button-disabled, .work .swiper-button-disabled { opacity: 0.4; } .per-next { min-width: 320px; /*height: 900px;*/ background: #1A2A75; opacity: 0.95; padding: 60px 0 60px 60px; position: relative; top: 0; left: 0; } .grow-swiper { flex-grow: 1; margin-left: -140px; margin-top: 30px; margin-bottom: 60px; overflow: hidden; z-index: 3; position: relative; } .grow-swiper-item { width: 100%; height: 100%; } .grow-swiper-item .swiper-wrapper .swiper-slide { width: 100% !important; height: 100%; } .per-next p { color: #FFFFFF; font-size: 36px; /* font-weight: bold; */ letter-spacing: 2px; position: absolute; bottom: 60px; } .per-next p b { opacity: 0.5; font-weight: 100; font-size: 26px; margin: 0 4px; } .per-next p span.all { font-size: 26px; opacity: 0.5; } .grow-swiper-item .flex { flex-wrap: wrap; } .grow-swiper-item .idea-slider-item { width: 320px; /*height: 240px;*/ box-shadow: 0px 0px 10px 0px rgba(5, 9, 30, 0.2); margin-top: 30px; margin-right: 30px; } .grow-swiper-item .idea-slider-item:nth-child(3n) { margin-right: 0; } .grow-swiper-item .idea-slider-item p { border-bottom: 3px solid #366CFC; text-align: center; /* padding-left: 0; */ } .grow-swiper-item .idea-slider-item { transition-duration: 300ms; } .grow-swiper-item .idea-slider-item:hover { /* margin-top: -30px; */ transform: translateY(-30px); /* transition-duration: 400ms; */ } .grow-swiper-button-next { position: absolute; top: 60px; left: 60px; width: 60px; height: 60px; background: url(../newImage/rcln_img/grow_next.png); background-size: 100%; outline: none; /* z-index: 2; */ } .grow-swiper-button-prev { position: absolute; top: 150px; left: 60px; width: 60px; height: 60px; background: url(../newImage/rcln_img/grow_prev.png); background-size: 100%; outline: none; /* z-index: 2; */ } .per-next .swiper-button-disabled { opacity: 0.4; } .grow-content { padding-top: 36px; padding-bottom: 36px; text-align: center; color: #333947; font-size: 14px; line-height: 26px; background: #F8F9FC; } .grow-title { font-size: 26px; margin-bottom: 22px; line-height: 26px; } .work-swiper { overflow: hidden; } .work { position: relative; } .work-swiper img { width: 100%; height: 100%; object-fit: cover; /* border-radius: 10px; */ } .flex-column { display: flex; flex-direction: column; } .work-swiper .work-left, .work-swiper .work-mid { width: 325px; margin-right: 15px; } .work-left>div, .work-mid>div, .work-right>div { margin-bottom: 15px; } .work-H250 { height: 250px; } .work-H180 { height: 180px; } .work-right { width: 520px; } .work-H260 { height: 260px; } .work-H170 { height: 170px; } .work-W250 { width: 250px; } .work-H170 .flex { justify-content: space-between; } .work-position { position: relative; overflow: hidden; border-radius: 10px; } .work-position:hover img { transform: scale(1.2); transition: .5s; } .work-position p { width: 100%; height: 36px; padding-left: 30px; font-size: 16px; color: #fff; line-height: 36px; position: absolute; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); border-radius: 0px 0px 10px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .phone_nlgzy { display: none; } .phone_nlgzy img{ width: 100%; object-fit: cover; } .phone-grow{ display: none; } @media screen and (max-width: 800px) { .head_d3{ padding: 1rem 0; } .pd-t-b80 { padding-top: .4rem; padding-bottom: .4rem; } .same { width: 94%; } .idea-tabBox-ul { justify-content: space-around; font-size: 14px; } .idea-system-desc{ font-size: 12px; } .idea-tabBox-ul li { margin: 0 .1rem; } .idea-desc { width: 100%; padding: 0 .25rem; font-size: 13px; } .phone_nlgzy { display: block; } .pc_nlgzy { display: none; } .idea-ability-swiper-button-next , .idea-ability-swiper-button-prev ,.work-swiper-button-next , .work-swiper-button-prev ,.grow-swiper-button-next ,.grow-swiper-button-prev{ display: none; } .idea-ability .swiper-wrapper .swiper-slide .flex{ justify-content: space-around; } .idea-ability .swiper-wrapper .swiper-slide .idea-slider-item{ width: 48%; height: 2rem; margin-bottom: 0.2rem; margin-right: 0; } .idea-ability .swiper-wrapper .swiper-slide .idea-slider-item:nth-child(2n){ /* margin-right: 0; */ } .idea-slider-item img{ height: 1.6rem; object-fit: cover; } .idea-slider-item p{ height: .4rem; padding: 0 .1rem; text-align: center; } .idea-ability .swiper-wrapper .swiper-slide{ height: 100%; } .idea-ability-swiper-pagination, .work-swiper-pagination{ margin-top: 0; } .work-swiper .work-left:nth-child(2){ margin-right: 0; } .work-swiper .work-left, .work-swiper .work-mid{ width: 48%; margin-right: 0; } .work-right{ width: 96%; } .work .swiper-slide>div.flex{ flex-wrap: wrap; justify-content: space-around; } .work-H250{ height: auto; } .work-right .work-W250{ width: 48%; margin-right: 0; } .work-right .work-W250:nth-child(2){ margin-right: 0; } .per-next{ width: 100px; height: auto; } .idea-system-desc{ margin-bottom: .18rem; } .pc-grow{ display: none; } .phone-grow .per-next{ min-width: 5%; } .phone-grow{ display: flex; overflow: hidden; flex-direction: column; } .grow-phone-swiper{ width: 100%; } .phone-grow .idea-slider-item{ width: 48%; height: auto; margin-right: 0; /* margin-top: 0; */ } .phone-grow .swiper-slide>div.flex{ justify-content: space-around; } .idea-system-desc p:last-child{ margin-bottom: .4rem; } .grow-phone-swiper .grow-swiper-item { margin-top: -20px; } .work-position p{ padding-left: .1rem; font-size: 14px; } }