.tab-box { height: 470px; } .tab-box .tab-left { width: 200px; } .tab-box .tab-left ul li { height: 157px; position: relative; overflow: hidden; padding: 30px 24px; background-color: #f5f6fa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #eeeef0; } .tab-box .tab-left ul li .wrap { height: 100%; position: relative; z-index: 1; padding-left: 20px; } .tab-box .tab-left ul li .wrap .name { font-size: 20px; position: relative; } .tab-box .tab-left ul li .wrap .name::before { content: ''; position: absolute; left: -20px; height: 20px; width: 3px; top: 5px; background-color: #cdcdcd; } .tab-box .tab-left ul li .wrap .en-name { font-size: 12px; color: #999999; text-transform: uppercase; } .tab-box .tab-left ul li .icon { width: 75px; height: 75px; position: absolute; right: 0; z-index: 2; bottom: -17px; opacity: .15; } .tab-box .tab-left ul li .icon path { fill: #cdcdcd; } .tab-box .tab-left ul li.active { background-color: #de3833; } .tab-box .tab-left ul li.active .name { font-weight: bold; color: #FFFFFF; } .tab-box .tab-left ul li.active .name::before { background-color: #f9f9f9; } .tab-box .tab-left ul li.active .en-name { color: #FFFFFF; } .tab-box .tab-left ul li.active .icon path { fill: #FFFFFF; } .tab-box .tab-left ul li:last-child { border-bottom: none; } .tab-box .tab-con { width: 1080px; height: 470px; } .tab-box .tab-con .con { width: 100%; height: 100%; display: none; padding: 60px; } .tab-box .tab-con .con .con-wrap { width: 585px; } .tab-box .tab-con .con .con-wrap.con-full { width: 100%; } .tab-box .tab-con .con .con-wrap p { margin-top: 10px; line-height: 30px; } .tab-box .tab-con .con.active { display: block; } .tab-box .tab-con .con.con-1 { background: url("../Image/job/zpzc-bg-1.png") center/cover no-repeat; } .tab-box .tab-con .con.con-1 h4 { line-height: 3; font-size: 16px; margin-top: 30px; } .tab-box .tab-con .con.con-2 { background: url("../Image/job/zpzc-bg-2.png") center/cover no-repeat; } .tab-box .tab-con .con.con-2 .hzxq { padding-top: 20px; padding-left: 30px; margin-top: 20px; border-top: 1px dashed #d8d9dc; } .tab-box .tab-con .con.con-2 .hzxq img { mix-blend-mode: multiply; } .tab-box .tab-con .con.con-3 { background: #f5f6fa; padding: 50px; } .fldy-list { padding-top: 15px; } .fldy-list .item { flex: 0 0 calc(100% / 8); max-width: calc(100% / 8); text-align: center; margin-top: 25px; } .fldy-list .item .item-icon { width: 70px; height: 70px; margin: 0 auto 15px; border-radius: 50%; background-color: #efefef; position: relative; } .fldy-list .item .item-icon svg.icon { width: 40px; height: 40px; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .fldy-list .item .item-icon svg.icon path { fill: #ffffff; } .fldy-list .item .item-name { font-size: 16px; line-height: 42px; } .fldy-list .item:nth-child(1) .item-icon { background-image: -moz-linear-gradient(145deg, #00b3fa 0%, #20dbff 100%); background-image: -webkit-linear-gradient(145deg, #00b3fa 0%, #20dbff 100%); background-image: -ms-linear-gradient(145deg, #00b3fa 0%, #20dbff 100%); box-shadow: 0 9px 15px 0 rgba(7, 186, 254, 0.3); } .fldy-list .item:nth-child(1) .item-icon .icon { filter: drop-shadow(0 9px 15px rgba(7, 186, 254, 0.3)); } .fldy-list .item:nth-child(2) .item-icon { background-image: -moz-linear-gradient(145deg, #2f74ff 0%, #6295fc 100%); background-image: -webkit-linear-gradient(145deg, #2f74ff 0%, #6295fc 100%); background-image: -ms-linear-gradient(145deg, #2f74ff 0%, #6295fc 100%); box-shadow: 0 9px 15px 0 rgba(66, 127, 248, 0.3); } .fldy-list .item:nth-child(2) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(66, 127, 248, 0.3)); } .fldy-list .item:nth-child(3) .item-icon { background-image: -moz-linear-gradient(145deg, #ff6528 0%, #ff954d 100%); background-image: -webkit-linear-gradient(145deg, #ff6528 0%, #ff954d 100%); background-image: -ms-linear-gradient(145deg, #ff6528 0%, #ff954d 100%); box-shadow: 0 9px 15px 0 rgba(254, 127, 76, 0.3); } .fldy-list .item:nth-child(3) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(254, 127, 76, 0.3)); } .fldy-list .item:nth-child(4) .item-icon { background-image: -moz-linear-gradient(145deg, #21b9bd 0%, #56d7d1 100%); background-image: -webkit-linear-gradient(145deg, #21b9bd 0%, #56d7d1 100%); background-image: -ms-linear-gradient(145deg, #21b9bd 0%, #56d7d1 100%); box-shadow: 0 9px 15px 0 rgba(70, 198, 200, 0.3); } .fldy-list .item:nth-child(4) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(70, 198, 200, 0.3)); } .fldy-list .item:nth-child(5) .item-icon { background-image: -moz-linear-gradient(145deg, #cba254 0%, #e9ca8d 100%); background-image: -webkit-linear-gradient(145deg, #cba254 0%, #e9ca8d 100%); background-image: -ms-linear-gradient(145deg, #cba254 0%, #e9ca8d 100%); box-shadow: 0 9px 15px 0 rgba(223, 186, 114, 0.3); } .fldy-list .item:nth-child(5) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(223, 186, 114, 0.3)); } .fldy-list .item:nth-child(6) .item-icon { background-image: -moz-linear-gradient(145deg, #fe5353 0%, #fc7979 100%); background-image: -webkit-linear-gradient(145deg, #fe5353 0%, #fc7979 100%); background-image: -ms-linear-gradient(145deg, #fe5353 0%, #fc7979 100%); box-shadow: 0 9px 15px 0 rgba(252, 94, 94, 0.3); } .fldy-list .item:nth-child(6) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(252, 94, 94, 0.3)); } .fldy-list .item:nth-child(7) .item-icon { background-image: -moz-linear-gradient(145deg, #ffb830 0%, #fdd158 100%); background-image: -webkit-linear-gradient(145deg, #ffb830 0%, #fdd158 100%); background-image: -ms-linear-gradient(145deg, #ffb830 0%, #fdd158 100%); box-shadow: 0 9px 15px 0 rgba(254, 192, 72, 0.3); } .fldy-list .item:nth-child(7) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(254, 192, 72, 0.3)); } .fldy-list .item:nth-child(8) .item-icon { background-image: -moz-linear-gradient(145deg, #9e57f5 0%, #cea7fd 100%); background-image: -webkit-linear-gradient(145deg, #9e57f5 0%, #cea7fd 100%); background-image: -ms-linear-gradient(145deg, #9e57f5 0%, #cea7fd 100%); box-shadow: 0 9px 15px 0 rgba(159, 88, 245, 0.3); } .fldy-list .item:nth-child(8) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(159, 88, 245, 0.3)); } .fldy-list .item:nth-child(9) .item-icon { background-image: -moz-linear-gradient(145deg, #52aa52 0%, #76d296 100%); background-image: -webkit-linear-gradient(145deg, #52aa52 0%, #76d296 100%); background-image: -ms-linear-gradient(145deg, #52aa52 0%, #76d296 100%); box-shadow: 0 9px 15px 0 rgba(87, 175, 91, 0.3); } .fldy-list .item:nth-child(9) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(87, 175, 91, 0.3)); } .fldy-list .item:nth-child(10) .item-icon { background-image: -moz-linear-gradient(145deg, #0292f6 0%, #5fb8fd 100%); background-image: -webkit-linear-gradient(145deg, #0292f6 0%, #5fb8fd 100%); background-image: -ms-linear-gradient(145deg, #0292f6 0%, #5fb8fd 100%); box-shadow: 0 9px 15px 0 rgba(3, 183, 250, 0.3); } .fldy-list .item:nth-child(10) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(3, 183, 250, 0.3)); } .fldy-list .item:nth-child(11) .item-icon { background-image: -moz-linear-gradient(145deg, #ffb830 0%, #fdd158 100%); background-image: -webkit-linear-gradient(145deg, #ffb830 0%, #fdd158 100%); background-image: -ms-linear-gradient(145deg, #ffb830 0%, #fdd158 100%); box-shadow: 0 9px 15px 0 rgba(254, 192, 72, 0.3); } .fldy-list .item:nth-child(11) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(254, 192, 72, 0.3)); } .fldy-list .item:nth-child(12) .item-icon { background-image: -moz-linear-gradient(145deg, #0acbcd 0%, #73e4fa 100%); background-image: -webkit-linear-gradient(145deg, #0acbcd 0%, #73e4fa 100%); background-image: -ms-linear-gradient(145deg, #0acbcd 0%, #73e4fa 100%); box-shadow: 0 9px 15px 0 rgba(6, 220, 197, 0.3); } .fldy-list .item:nth-child(12) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(6, 220, 197, 0.3)); } .fldy-list .item:nth-child(13) .item-icon { background-image: -moz-linear-gradient(145deg, #9e57f5 0%, #cea7fd 100%); background-image: -webkit-linear-gradient(145deg, #9e57f5 0%, #cea7fd 100%); background-image: -ms-linear-gradient(145deg, #9e57f5 0%, #cea7fd 100%); box-shadow: 0 9px 15px 0 rgba(159, 88, 245, 0.3); } .fldy-list .item:nth-child(13) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(159, 88, 245, 0.3)); } .fldy-list .item:nth-child(14) .item-icon { background-image: -moz-linear-gradient(145deg, #ff6528 0%, #ff954d 100%); background-image: -webkit-linear-gradient(145deg, #ff6528 0%, #ff954d 100%); background-image: -ms-linear-gradient(145deg, #ff6528 0%, #ff954d 100%); box-shadow: 0 9px 15px 0 rgba(254, 127, 76, 0.3); } .fldy-list .item:nth-child(14) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(254, 127, 76, 0.3)); } .fldy-list .item:nth-child(15) .item-icon { background-image: -moz-linear-gradient(145deg, #00b3fa 0%, #20dbff 100%); background-image: -webkit-linear-gradient(145deg, #00b3fa 0%, #20dbff 100%); background-image: -ms-linear-gradient(145deg, #00b3fa 0%, #20dbff 100%); box-shadow: 0 9px 15px 0 rgba(7, 186, 254, 0.3); } .fldy-list .item:nth-child(15) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(7, 186, 254, 0.3)); } .fldy-list .item:nth-child(16) .item-icon { background-image: -moz-linear-gradient(145deg, #2f74ff 0%, #6295fc 100%); background-image: -webkit-linear-gradient(145deg, #2f74ff 0%, #6295fc 100%); background-image: -ms-linear-gradient(145deg, #2f74ff 0%, #6295fc 100%); box-shadow: 0 9px 15px 0 rgba(66, 127, 248, 0.3); } .fldy-list .item:nth-child(16) .item-icon .icon { filter: drop-shadow(0 9px 15px 0 rgba(66, 127, 248, 0.3)); } .job-tel { font-size: 20px; } .info-link { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; cursor: pointer; width: 130px; height: 40px; background-color: #ececec; color: #666666; line-height: 40px; padding: 0 15px; position: relative; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .info-link i { display: block; width: 0; position: absolute; height: 1px; top: 9px; right: 40px; margin: auto; bottom: 0; color: #333333; z-index: 3; background-color: CurrentColor; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .info-link i::before, .info-link i::after { content: ''; display: block; width: 10px; height: 1px; background-color: CurrentColor; position: absolute; margin: auto; } .info-link i::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .info-link i::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .info-link:hover { color: #FFFFFF; background-color: #e23833; } .info-link:hover i { color: #FFFFFF; } .joblist-box { padding: 50px; background-color: #f5f6fa; } .joblist-box .job-item { border-bottom: 2px solid #f5f6fa; background-color: #ffffff; } .joblist-box .job-item .item-wrap { height: 128px; } .joblist-box .job-item .item-wrap .item-name { width: 230px; border-right: 2px solid #f5f6fa; height: 100%; font-size: 18px; text-align: center; line-height: 128px; } .joblist-box .job-item .item-wrap .item-info { flex: 1; position: relative; padding: 30px 50px; } .joblist-box .job-item .item-wrap .item-info .info-detail { flex: 1; max-width: 530px; } .joblist-box .job-item .item-wrap .item-info .info-detail p { flex: 0 0 50%; max-width: 50%; color: #666666; line-height: 32px; } .joblist-box .job-item .item-wrap .item-info .info-detail p span { color: #333333; } .joblist-box .job-item .item-content { border-top: 2px solid #f5f6fa; padding: 40px; line-height: 30px; color: #666666; display: none; } .joblist-box .job-item .item-content strong { font-size: 16px; font-weight: normal; line-height: 32px; margin: 5px 0; display: block; } .joblist-box .job-item .item-content .seek-btn { display: block; margin: 30px auto 0; width: 130px; height: 40px; background-color: #ececec; color: #333333; text-align: center; line-height: 40px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .joblist-box .job-item .item-content .seek-btn:hover { color: #FFFFFF; background-color: #e23833; } .joblist-box .job-item.active .item-info .info-link, .joblist-box .job-item:hover .item-info .info-link { color: #FFFFFF; background-color: #e23833; } .joblist-box .job-item.active .item-info .info-link i, .joblist-box .job-item:hover .item-info .info-link i { color: #FFFFFF; } .joblist-box .job-item.active .item-info .info-link i { bottom: 15px; } .joblist-box .job-item.active .item-info .info-link i::before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .joblist-box .job-item.active .item-info .info-link i::after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .job-seek-container { background-color: #f5f6fa; padding: 50px; } .job-seek-container .left-bar { background-color: #fff; padding: 40px; width: 880px; } .job-seek-container .left-bar .bar-head { padding-bottom: 15px; border-bottom: 1px solid #eeeff1; margin-bottom: 20px; } .job-seek-container .left-bar .bar-head .tip { color: #89909e; } .job-seek-container .left-bar .bar-head .job-name { font-size: 18px; line-height: 36px; } .job-seek-container .left-bar .bar-head .job-time { color: #89909e; } .job-seek-container .left-bar .bar-head .job-time span { color: #333333; } .job-seek-container .right-bar { flex: 1; padding: 18px 30px 28px; background-color: #fff; margin-left: 20px; } .job-seek-container .right-bar .head-name { font-size: 18px; color: #333333; line-height: 36px; position: relative; } .job-seek-container .right-bar .head-name::before { content: ''; display: block; position: absolute; width: 3px; height: 25px; margin: auto; top: 0; bottom: 0; left: -30px; background-color: #e23833; } .job-seek-container .right-bar .content { margin-top: 15px; } .job-seek-container .right-bar .contact-item { padding: 10px 0; } .job-seek-container .right-bar .contact-item p { margin-bottom: 5px; } .job-seek-container .right-bar .contact-item span { color: #666666; } .job-seek-container .right-bar .info-link { margin-top: 15px; } .hr-info { width: 90%; } .hr-info .hr-contact p { margin-right: 50px; } .hr-info .hr-contact p span, .hr-info .hr-contact p a { color: #f0831e; } .verify { width: 120px; } .layui-btn { background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); width: 120px; } .layui-form-radio > i:hover, .layui-form-radioed > i { color: #df3a35; } .layui-input:focus { border-color: #df3a35; } .layui-input:hover, .layui-textarea:hover { border-color: #df3a35 !important; }