*{ word-break: break-word; } .word-box{ position: absolute; right: 79px; bottom: 20%; width: 30%; } .word-box .hd ul li{ width: 100px; height: 100px; color: #E10B0B; background: #FFFFFF; border-radius: 50%; flex-direction: column; position: absolute; top: 60px; left: -100px; cursor: pointer; } .word-box .hd ul li:last-child{ position: absolute; top: -40px; left: -20px; } .word-box .hd ul li::after{ content: ''; position: absolute; top: 50%; left: 50%; width: 112px; height: 112px; background: rgba(255, 255, 255, 0.16); border-radius: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } .word-box .hd ul li i{ display: block; width: 30px; height: 22px; background-image: url(../img/job-iconh3.png); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } .word-box .hd ul li:last-child i{ background-image: url(../img/job-iconh2.png); } .word-box .bd .box{ color: #FFFFFF; line-height: 30px; width: 80%; margin-left: 100px; } .word-box .hd ul li.on{ color: #fff; background: #E10B0B; } .word-box .hd ul li.on i{ background-image: url(../img/job-iconb3.png); } .word-box .hd ul li:last-child.on i{ background-image: url(../img/job-iconb2.png); } .link-nav ul{ width: 38%; } .panel{ padding: 111px 0 130px; height: 935px; background-image: url(../img/job-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } .panel h3{ text-align: center; } .panel .content{ height: 598px; background: rgba(0, 0, 0, .35); margin-top: 66px; position: relative; } .panel .content::before{ content: ' '; width: 64px; height: 42px; position: absolute; top: -42px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); background-image: url(../img/job-icon1.png); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } .panel2 .content::before{ display: none; } .panel .content .left{ width: 40%; position: relative; } .panel .content .left .top{ width: 100%; height: 78px; background: #4A4F54; padding:0 52px; align-items: center; } .panel .content .left .top span{ /*flex: 1;*/ text-align: center; } .panel .content .left .hd{ height: 513px; background: #FFFFFF; margin-top: 7px; padding: 17px 22px 35px 26px; } .more-btn{ display: none; position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); color: #999; font-size: 16px; text-align: center; } .panel .content .left .hd li{ width: 100%; min-height: 84px; background: #FFFFFF; box-shadow: 0px 0px 5px 0px #EDEDED; color: #666; font-size: 16px; align-items: center; padding: 0 22px; margin-bottom: 16px; cursor: pointer; } .panel .content .left .hd li span{ width: 25%; text-align: center; } /*.panel .content .left .hd li span:nth-of-type(2){ margin-right: 40px; }*/ .panel .content .left .hd li.on{ color: rgba(0, 75, 160, 1); background: rgba(0, 75, 160, .23); } .panel .content .bd { width: 60%; } .panel .content .bd .desc{ padding: 33px 33px 0 59px; overflow: auto; position: relative; height: 600px; } .panel .content .bd .desc .row p{ margin-bottom: 17px; } .panel .content .bd .desc .row .info{ line-height: 30px; } .desc .row{ margin-bottom: 38px; background-color: transparent!important; } .desc .row.lxfs{ display: flex; flex-wrap: wrap; } .panel2 .content .job-lists .lxfs{ display: flex; color: #004BA0; margin-top: 29px; } .panel2 .content .job-lists .lxfs .item{ margin-right: 20px; } .panel .content .bd .desc .row.lxfs .item{ margin-right: 38px; margin-bottom: 18px; } .panel .content .bd .desc .row.lxfs .item img,.panel2 .content .job-lists .lxfs .item img{ margin-right: 10px; } .panel2{ height: 1150px; background-image: url(../img/job-bg2.jpg); } .panel2 .content{ height: auto; background: #fff; } .panel2 .en-txt{ text-align: center; color: #333333; opacity: 0.21; font-size: 30px; margin-top: 18px; } .panel2 .top{ height: 80px; background: linear-gradient(0deg, #6B90C8, #004BA0); display: flex; align-items: center; } .panel2 .top span{ width: 278px; height: 100%; line-height: 80px; text-align: center; border-right: 1px solid rgba(255, 255, 255, .15); } .panel2 .top span:last-child{ border-right: none; } .job-lists ul .item{ position: relative; cursor: pointer; } .job-lists ul .item .list{ height: 100px; color: #333; background: #fff; border-bottom:1px solid #CECECE ; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; } .job-lists ul .item .hidden{ padding: 33px 0 53px 87px; position: relative; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; display: none; } .job-lists ul .item.active .list{ background: rgba(0, 75, 160, .23); } .job-lists ul .item.active .hidden{ display: block; border-bottom: 1px solid #004BA0 ; background: rgba(0, 75, 160, .23); } .job-lists ul .item.active .list{ color: #004BA0; border-bottom:1px solid #004BA0 ; } .job-lists ul .item .list>span{ width: 278px; height: 100px; border-right:1px solid #CECECE ; display: flex; align-items: center; justify-content: center; } .job-lists ul .item.active .list>span{ border-right: none; } .spemore-btn{ width: 277px; height: 100px; display: flex; align-items: center; justify-content: center; } .spemore-btn i{ display: block; width: 13px; height: 13px; margin-left: 14px; background-image: url(../img/more2.png); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } .job-lists ul .item.active .spemore-btn i{ background-image: url(../img/more3.png); } @media (max-width: 750px){ .word-box{ right: .22rem; bottom: .2rem; width: 90%; height: 3.5rem; } .word-box .hd ul li{ width: 1.3rem; height: 1.3rem; top: .2rem; left: 0; font-size: .24rem; } .word-box .hd ul li:last-child{ position: absolute; top: -.6rem; left: 1.6rem; } .word-box .hd ul li::after{ width: 1.46rem; height: 1.46rem; background: #FFFFFF; opacity: 0.16; border-radius: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } .word-box .hd ul li i{ display: block; width: .44rem; height: .33rem; } .word-box .bd .box{ color: #FFFFFF; line-height: 1.5; width: 50%; margin-left: 0; max-height: 3.5rem; overflow-y: auto; position: absolute; bottom: 0; right: 0; } .panel{ padding: 1.11rem 0; height: auto; } .panel h3{ text-align: center; } .panel .content{ height: auto; margin-top: .6rem; } .panel .content::before{ width: .5rem; height: .4rem; top: -.4rem; } .panel .content .left{ width: 100%; position: relative; } .panel .content .left .top{ height: .78rem; padding:0 .6rem; } .panel .content .left .hd{ height: auto; margin-top: .08rem; padding: .3rem .25rem ; } .panel .content .left .hd li{ /*height: .84rem;*/ font-size: .12rem; padding: .1rem .22rem; margin-bottom: .28rem; } /*.panel .content .left .hd li span:nth-of-type(2){ margin-right: 0; }*/ /*.panel .content .left .hd li span{ width: 25%; text-align: center; }*/ .panel .content .left .hd li.on{ color: rgba(0, 75, 160, 1); background: rgba(0, 75, 160, .23); } .pop .desc{ padding: 0 .3rem; max-height: 5rem; overflow-y: auto; } .pop .desc .row{ text-align: left; } .desc .row{ margin-bottom: .38rem; } .lxfs .item img{ width: .4rem; margin-right: .08rem; } .panel2 .en-txt{ font-size: .3rem; margin-top: .1rem; } .panel2 .top{ height: .8rem; } .panel2 .top span{ width: 25%; height: 100%; line-height: .8rem; border-right: none; } .job-lists ul .item .list{ width: 100%; height: 1.2rem; flex-wrap: nowrap; } .job-lists ul .item .hidden{ padding: .27rem .66rem .37rem .24rem; } .job-lists ul .item .list>span{ width: 20%; height: 100%; } .job-lists ul .item .list>span:nth-of-type(4){ border-right: none; } .job-lists ul .item.active .list>span{ border-right: none; } .spemore-btn{ width:20%; height: 100%; } .spemore-btn i{ width: .39rem; height: .39rem; margin-left: 0; background-image: url(../img/mmore1.png); } .job-lists ul .item.active .spemore-btn i{ background-image: url(../img/mmore2.png); } .panel2 .content .job-lists .lxfs{ flex-wrap: wrap; margin-top: .6rem; } .panel2 .content .job-lists .lxfs .item{ margin-right: .1rem; margin-bottom: .1rem; } .panel .content .bd .desc .row.lxfs .item img,.panel2 .content .job-lists .lxfs .item img{ margin-right: 10px; } }