.humanRe .introBox { background: #f7f7f7 url(../image/human/humanRe1.jpg) center center no-repeat; padding-top: 70px; } .humanRe .introBox .textRight { text-align: right; padding-right: 137px; } .humanRe .introBox .textRight p { color: #f09888; font-size: 30px; padding-top: 40px; } .humanRe .introBox .textRight span { color: #d8d8da; font-size: 94px; padding-bottom: 60px; display: inline-block; line-height: 80px; font-family: CALIBRI; } .humanRe .sliderWrap { background: url(../image/human/humanRe6.jpg) center center no-repeat; } .humanRe .sliderWrap .container { padding-top: 60px; padding-bottom: 60px; } .humanRe .sliderWrap .container .sliderBox { margin: 0 -10px; position: relative; } .humanRe .sliderWrap .container .sliderBox .bd ul li { width: 285px; font-size: 0; margin: 0 10px; } .humanRe .sliderWrap .container .sliderBox .bd ul li a { height: 363px; background: #e6e4e2; } .humanRe .sliderWrap .container .sliderBox .bd ul li a img { width: 100%; } .humanRe .sliderWrap .container .sliderBox .bd ul li a h1 { text-align: center; padding-top: 20px; font-size: 20px; color: #434250; padding-bottom: 15px; } .humanRe .sliderWrap .container .sliderBox .bd ul li a p { padding: 0 25px; color: #898989; font-size: 13px; line-height: 20px; } .humanRe .sliderWrap .container .sliderBox .prev, .humanRe .sliderWrap .container .sliderBox .next { position: absolute; width: 54px; height: 54px; top: 50%; margin-top: -27px; opacity: 0.4; } .humanRe .sliderWrap .container .sliderBox .prev:hover, .humanRe .sliderWrap .container .sliderBox .next:hover { opacity: 0.8; } .humanRe .sliderWrap .container .sliderBox .prev { background: url(../image/human/prev.png) center center no-repeat; left: -80px; } .humanRe .sliderWrap .container .sliderBox .next { background: url(../image/human/next.png) center center no-repeat; right: -80px; } .humanRe .positionList { position: relative; background-color: #fff; padding-bottom: 20px; } .humanRe .positionList .borderBg { width: 100%; border-top: 2px solid #cccccc; position: absolute; top: 74px; left: 0; } .humanRe .positionList .tabList { padding-bottom: 40px; } .humanRe .positionList .tabList ul { text-align: center; } .humanRe .positionList .tabList ul li { position: relative; line-height: 74px; font-size: 15px; color: #7f7f7f; padding: 0 25px; display: inline-block; vertical-align: middle; border-bottom: 2px solid #cccccc; cursor: pointer; } .humanRe .positionList .tabList ul li .borderRight { position: absolute; border-left: 2px solid #999999; height: 12px; top: 50%; margin-top: -6px; right: 0; display: block; } .humanRe .positionList .tabList ul li.active, .humanRe .positionList .tabList ul li:hover { border-bottom: 2px solid #eb3c00; } .humanRe .positionList .filterBox { background-color: #e3e5e6; margin-bottom: 20px; } .humanRe .positionList .filterBox>ul { text-align: center; padding: 20px 0; } .humanRe .positionList .filterBox>ul>li { display: inline-block; vertical-align: middle; text-align: left; line-height: 36px; background-color: #fff; margin: 0 5px; } .humanRe .positionList .filterBox>ul>li.selBox { position: relative; padding-left: 50px; background: #fff 20px center no-repeat; width: 284px; cursor: pointer; padding-right: 20px; } .humanRe .positionList .filterBox>ul>li.selBox span { font-size: 14px; opacity: .8; color: #3f3e55; white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; display: inline-block; vertical-align: middle; } .humanRe .positionList .filterBox>ul>li.selBox img { position: absolute; right: 18px; top: 17px; } .humanRe .positionList .filterBox>ul>li.selBox img.up { display: none; } .humanRe .positionList .filterBox>ul>li.selBox.active img { display: none; } .humanRe .positionList .filterBox>ul>li.selBox.active .up { display: block; } .humanRe .positionList .filterBox>ul>li.selBox .pullList { position: absolute; top: 38px; overflow: auto; width: 284px; left: 0; background: #fff; z-index: 2; height: 0; max-height: 188px; } .humanRe .positionList .filterBox>ul>li.selBox .pullList ul { padding-left: 40px; padding-right: 20px; } .humanRe .positionList .filterBox>ul>li.selBox .pullList ul li { cursor: pointer; font-size: 14px; color: #3f3e55; opacity: 0.6; white-space: nowrap; } .humanRe .positionList .filterBox>ul>li.searchBox { position: relative; width: 284px; background: #fff; } .humanRe .positionList .filterBox>ul>li.searchBox input { width: 260px; text-indent: 18px; padding-left: 18px; border: none; height: 36px; line-height: 36px; display: block; background: transparent; padding-right: 25px; font-size: 14px; opacity: .8; color: #3f3e55; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; } .humanRe .positionList .filterBox>ul>li.searchBox a { position: absolute; top: 5px; right: 20px; } .humanRe .positionList .filterBox>ul>li.searchBox input::-webkit-input-placeholder { color: #3f3e55; opacity: .8; } .humanRe .positionList .filterBox>ul>li.searchBox input:-moz-placeholder { color: #3f3e55; opacity: .8; } .humanRe .positionList .filterBox>ul>li.searchBox input::-moz-placeholder { color: #3f3e55; opacity: .8; } .humanRe .positionList .filterBox>ul>li.searchBox input:-ms-input-placeholder { color: #3f3e55; opacity: .8; } .humanRe .positionList #container { position: relative; } .humanRe .positionList #container .positionBox a { padding: 25px; border: 2px solid #f2f0ec; } .humanRe .positionList #container .positionBox a>p { font-size: 13px; color: #898989; line-height: 24px; } .humanRe .positionList #container .positionBox h1 { font-size: 18px; color: #3f3e55; padding-bottom: 20px; } .humanRe .positionList #container .positionBox .otherInfo { padding-bottom: 5px; } .humanRe .positionList #container .positionBox .otherInfo p { color: #656565; line-height: 24px; font-size: 14px; display: inline-block; } .humanRe .bottomBox { background: url(../image/human/humanRe7.jpg) center center no-repeat; text-align: center; color: #fff; height: 261px; } .humanRe .bottomBox h1 { font-size: 20px; padding: 90px 0 27px; } .humanRe .bottomBox p { font-size: 14px; } .wonderful .introBox { background: #f7f7f7 url(../image/human/humanRe1.jpg) center center no-repeat; padding-top: 70px; } .wonderful .introBox .textBox { padding-top: 40px; } .wonderful .introBox .textBox .fl { width: 339px; } .wonderful .introBox .textBox .fl p { font-size: 18px; color: #898989; padding-bottom: 15px; line-height: 35px; } .wonderful .introBox .textBox .fl a { display: inline-block; line-height: 40px; font-size: 14px; color: #fff; background: #7e7e7e; padding-right: 10px; } .wonderful .introBox .textBox .fl a img { vertical-align: middle; margin-right: 10px; } .wonderful .introBox .textBox .textRight { text-align: right; padding-right: 137px; } .wonderful .introBox .textBox .textRight p { color: #f09888; font-size: 30px; } .wonderful .introBox .textBox .textRight span { color: #d8d8da; font-size: 94px; padding-bottom: 60px; display: inline-block; line-height: 80px; font-family: CALIBRI; } .wonderful .sliderWrap { background: url(../image/human/wonderful6.jpg) center center no-repeat; } .wonderful .sliderWrap .container { padding-top: 60px; padding-bottom: 60px; } .wonderful .sliderWrap .container .sliderBox { margin: 0 -10px; position: relative; } .wonderful .sliderWrap .container .sliderBox .bd ul li { width: 285px; font-size: 0; margin: 0 10px; } .wonderful .sliderWrap .container .sliderBox .bd ul li a { height: 363px; background: #fff; } .wonderful .sliderWrap .container .sliderBox .bd ul li a img { width: 100%; } .wonderful .sliderWrap .container .sliderBox .bd ul li a h1 { text-align: center; padding-top: 20px; font-size: 20px; color: #434250; padding-bottom: 15px; } .wonderful .sliderWrap .container .sliderBox .bd ul li a p { padding: 0 25px; color: #898989; font-size: 13px; line-height: 20px; height: 104px; overflow-y: auto; } .wonderful .sliderWrap .container .sliderBox .prev, .wonderful .sliderWrap .container .sliderBox .next { position: absolute; width: 55px; height: 55px; top: 50%; margin-top: -27px; opacity: 0.5; } .wonderful .sliderWrap .container .sliderBox .prev:hover, .wonderful .sliderWrap .container .sliderBox .next:hover { opacity: 1; } .wonderful .sliderWrap .container .sliderBox .prev { background: url(../image/industry/left.png) center center no-repeat; left: -80px; } .wonderful .sliderWrap .container .sliderBox .next { background: url(../image/industry/right.png) center center no-repeat; right: -80px; } .social .introBox .container .ren { margin-top: 20px; float: left; } .talentTiBox { margin-top: 40px; padding-bottom: 40px; } .talentTiBox::after { content: ""; display: block; clear: both; } .talentTiBox .Le { float: left; width: 430px; height: 540px; background: url(../image/talent-tibox-le.jpg) no-repeat 0 0; padding: 60px 30px 0; } .talentTiBox .Le .ic { margin-bottom: 34px; } .talentTiBox .Le h4 { color: #f63b2e; font-size: 24px; line-height: 1.2; margin-bottom: 10px; } .talentTiBox .Le h5 { color: #908777; font-size: 60px; line-height: 40px; font-family: CALIBRI; opacity: .2; } .talentTiBox .Ri { float: right; width: 770px; height: 540px; background-color: #FFF; } .talentTiBox .Ri .tips { height: 315px; overflow: hidden; } .talentTiBox .Ri .tips .img { height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .talentTiBox .Ri .dt ul { display: table; width: 100%; } .talentTiBox .Ri .dt li { display: table-cell; text-align: center; height: 60px; vertical-align: middle; background-color: #fbfbfb; position: relative; cursor: pointer; } .talentTiBox .Ri .dt li::before { content: ""; width: 100%; height: 0; transition: all .3s; position: absolute; left: 0; bottom: 0; } .talentTiBox .Ri .dt li.on::before { height: 74px; background-color: #ea3800; } .talentTiBox .Ri .dt li p { position: relative; z-index: 20; font-size: 16px; color: #6a6a6c; } .talentTiBox .Ri .dt li.on p { color: #FFF; top: -7px; } /* .talentTiBox .Ri .dd{ padding: 30px; } */ .talentTiBox .Ri .dd>div { display: none; height: 150px; overflow: auto; padding: 30px; } .talentTiBox .Ri .dd>div::-webkit-scrollbar { width: 2px; } .talentTiBox .Ri .dd p { color: #9c9c9c; font-size: 14px; line-height: 24px; text-align: justify; } /* 2023.3.24 */ .humanRe .introBox .container>h4 { font-size: 22px; color: #eb3c00; font-family: Montserrat-Regular; letter-spacing: -3px; text-transform: uppercase; margin-top: 30px; } .humanRe .introBox .container>h5 { color: #908777; font-size: 20px; line-height: 40px; font-family: CALIBRI; opacity: .2; margin-bottom: 30px; } .humanRe .sliderWrapWhite { background: none; margin: 0; } .humanRe .sliderWrapWhite .sliderBox { margin: 0 -5px; } .humanRe .sliderWrap.sliderWrapWhite .container .sliderBox .prev, .humanRe .sliderWrap.sliderWrapWhite .container .sliderBox .next { display: none; } .humanRe .sliderWrapWhite .bd ul::after { content: ""; display: block; clear: both; } .humanRe .sliderWrap.sliderWrapWhite .container .sliderBox .bd ul li { float: left; width: 234px; margin: 0 5px; margin-bottom: 20px; } @media (max-width: 1400px) { .humanRe .sliderWrap .container .sliderBox .next, .wonderful .sliderWrap .container .sliderBox .next { right: 0; } .humanRe .sliderWrap .container .sliderBox .prev, .wonderful .sliderWrap .container .sliderBox .prev { left: 0; } } @media (max-width: 1200px) { .humanRe .introBox, .wonderful .introBox { padding-left: 20px; padding-right: 20px; } .humanRe .introBox .container .ren, .wonderful .introBox .container .ren { display: none; } .humanRe .sliderWrap .container .sliderBox, .wonderful .sliderWrap .container .sliderBox { margin: 0; } .humanRe .positionList .filterBox>ul li { margin-bottom: 10px; } .talentTiBox { display: flex; justify-content: space-between; } .talentTiBox .Le { width: 30%; } .talentTiBox .Ri { width: 70%; } .humanRe .sliderWrapWhite { padding: 0 20px; } .humanRe .sliderWrap.sliderWrapWhite .container .sliderBox .bd ul li { width: calc(33.33% - 10px); } } @media (max-width: 900px) { .humanRe .sliderWrap.sliderWrapWhite .container .sliderBox .bd ul li { width: 100%; margin-bottom: 30px; margin: 0 0 30px; } .humanRe .sliderWrap.sliderWrapWhite .container .sliderBox .bd ul li a { height: auto; padding-bottom: 20px; } .humanRe .introBox .textRight, .wonderful .introBox .textBox .textRight { padding-right: 0; } .talentTiBox { display: block; } .talentTiBox .Le { float: none; width: 100%; height: 300px; background-position: center; background-size: cover; padding-top: 40px; } .talentTiBox .Le .ic { margin-bottom: 20px; } .talentTiBox .Le h4 { font-size: 25px; margin-bottom: 4px; } .talentTiBox .Le h5 { font-size: 50px; } .talentTiBox .Ri .dd>div { height: auto; } .talentTiBox .Ri { float: none; width: 100%; height: auto; } } @media (max-width: 750px) { .talentTiBox .Le { padding: 20px; height: 200px; } .talentTiBox .Le .ic { width: 60px; } .talentTiBox .Le h4 { font-size: 18px; } .talentTiBox .Le h5 { font-size: 40px; } .talentTiBox .Ri .tips { height: 135px; } .talentTiBox .Ri .dt li.on::before { height: 65px; } .talentTiBox .Ri .dt li { height: 50px; } .talentTiBox .Ri .dt li p { font-size: 14px; } .talentTiBox .Ri .dd>div { padding: 20px; } } @media (max-width: 600px) { .humanRe .positionList .borderBg { display: none; } } @media (max-width: 460px) { .wonderful .introBox .textBox .textRight, .humanRe .introBox .textRight { text-align: left; float: left; } .humanRe .introBox .textRight p, .wonderful .introBox .textBox .textRight p { font-size: 20px; } .humanRe .introBox .textRight span, .wonderful .introBox .textBox .textRight span { font-size: 70px; } .wonderful .introBox .textBox .fl { width: auto; } .humanRe .positionList .tabList ul li { padding: 0 10px; } .humanRe .positionList .filterBox { display: none; } }