.public-top { background: url(../img/jobOffers_banner.jpg) no-repeat; background-size: 100% 100%; } .top-nav { cursor: pointer; height: 80px; width: 50%; /*display: inline-block;*/ float: left; margin-bottom: 80px; border-bottom: 1px solid rgb(238, 238, 238); text-align: left; } .top-nav:hover { border: none; background-color: #1fdb6f; background: -moz-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); background: -webkit-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); background: -o-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); } .job-offers-nav { height: 160px; } .job-offers-nav div:nth-child(1) { text-align: right; } .top-nav p { line-height: 80px; font-size: 1.5rem; } .job-offers-nav p:first-child { margin-right: 100px; } .job-offers-nav p:last-child { margin-left: 100px; } .current-nav p { color: #FFFFFF; } .talent-idea, .compensation { position: relative; border-top: 1px solid rgb(238, 238, 238); height: 400px; margin-bottom: 50px; } .talent-idea .width-half { position: relative; display: inline-block; float: left; top: 50%; transform: translateY(-50%); } .item-title { position: absolute; top: -40px; left: 0; width: 200px; height: 60px; background-color: #FFFFFF; } .item-title p { color: #666666; } .talent-p {} .talent-idea img { width: 80%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .talent-idea img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .talent-idea .width-half p { text-align: left; font-size: 14px; margin-left: 50px; line-height: 2rem; color: rgb(136, 136, 136); } .compensation { padding-top: 50px; height: 600px; } .compensation>div:nth-child(2)>div { border-bottom: 1px solid rgb(238, 238, 238); margin-top: 50px; } .compensation .cps-item div:first-child { margin-left: 5%; } .compensation .cps-item div { float: left; width: 18%; height: 220px; padding: 30px 20px; border-right: 1px solid; border-image: -webkit-linear-gradient( #fff, rgb(238, 238, 238)) 30 30; border-image: -moz-linear-gradient( #fff, rgb(238, 238, 238)) 30 30; border-image: linear-gradient( #fff, rgb(238, 238, 238)) 30 30; } .compensation .cps-item:last-child div { border-image: -webkit-linear-gradient( rgb(238, 238, 238), #fff) 30 30; border-image: -moz-linear-gradient( rgb(238, 238, 238), #fff) 30 30; border-image: linear-gradient( rgb(238, 238, 238), #fff) 30 30; } .compensation .cps-item div:last-child { border-right: none; } .compensation .cps-item i { font-size: 5rem; } .compensation .cps-item p { color: rgb(136, 136, 136); } /*.compensation div:nth-child(2) div:first-child,*/ .cps-item div:hover { background-color: #1fdb6f; background: -moz-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); background: -webkit-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); background: -o-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); } /*.compensation div:nth-child(2) div:first-child h4, .compensation div:nth-child(2) div:first-child p,*/ .cps-item div:hover p, .cps-item div:hover h4 { color: #FFFFFF; } /*.compensation div:nth-child(2) div:first-child i,*/ .cps-item div:hover i { -webkit-text-fill-color: #ffffff; color: #ffffff !important; } /*.compensation .cps-item div:hover { background-color: #1fdb6f; background: -moz-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); background: -webkit-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); background: -o-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); color: #FFFFFF; }*/ .offer-bar { height: 60px; } .offer-bar div:first-child { margin-left: 6%; } .offer-nav { cursor: pointer; height: 60px; width: 16%; margin: 0 1%; background: rgb(247, 249, 250); float: left; } .offer-nav p { line-height: 60px; } .offer-detail { height: 500px; border: 1px solid; margin-bottom: 50px; border-image: -webkit-linear-gradient( rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)) 30 30; border-image: -moz-linear-gradient( rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)) 30 30; border-image: linear-gradient( rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)) 30 30; } .current-nav { border: none; background-color: #1fdb6f; background: -moz-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); background: -webkit-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); background: -o-linear-gradient(left, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); } .offer-detail table { margin: 0; } .offer-detail thead, .offer-detail tr, .offer-detail thead>tr>th, .offer-detail tbody>tr>td { border: none; } .offer-detail thead>tr>th { text-align: center; height: 100px; } .offer-detail thead i { font-size: 3rem; line-height: 100px; } .offer-detail tbody>tr { height: 20%; color: rgb(136, 136, 136); } .offer-btn { padding: 0 20px; display: inline-block; height: 30px; line-height: 30px; background: rgb(247, 249, 250); border-radius: 15px; cursor: pointer; } .offer-btn:hover { color: #FFFFFF; background-color: #1fdb6f; background: -moz-linear-gradient(top, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); background: -webkit-linear-gradient(top, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); background: -o-linear-gradient(top, rgba(30, 220, 111, 1), rgba(28, 197, 210, 1)); } .br { display: none; } @media screen and (max-width: 1024px) { .navbar-top,.width-1200,.public-top,.min-1200,.talent-idea img{ width: 100%; min-width: initial; } .job-offers-nav p:last-child,.job-offers-nav p:first-child{ margin:0; text-align: center; } .talent-idea .width-half{ width: 100%; float: none; position: static; transform:translateY(0%); } .talent-idea .width-half p{ margin:0; padding: 10px; font-size: 12px; } .talent-idea{ padding-top: 50px; } .talent-idea, .compensation,.offer-detail{ height: auto; } .compensation .cps-item div{ width: 20%; } .compensation .cps-item div:first-child,.compensation>div>div{ margin: 0!important; } .cps-item,#job-offers-cont{ overflow: hidden; } .compensation .cps-item div{ padding: 10px 5px; } .compensation .cps-item i{ font-size: 4rem; } .compensation .cps-item h4{ font-size: 16px; } .compensation .cps-item p{ font-size: 12px; } .top-nav{ width: 50%; height: 40px; margin-bottom: 40px; } .offer-btn{ padding: 0 5px; height: 3rem; line-height: 1.5rem; width: 120%; } .offer-bar { height: 6.5rem; } .offer-nav { height: 6.5rem; padding: 0.5rem 1rem; padding: 0.5rem 0.5rem; width: 13%; margin: 0 2.5%; } .offer-detail thead { display: none; } .offer-detail { padding: 10px 0; } .offer-nav a { height: 100%; display: inline-block; } .offer-nav p { line-height: 1.5rem; font-size: 1rem; } .offerWrap{ width: 100%; } .job-offers-nav { height: 80px; } .top-nav p { line-height: 40px; font-size: 1.3rem; } h2 { font-size: 22px; } .table>tbody>tr>td { font-size: 1rem; vertical-align: middle; } .tbody{ height: 400px; display: block; overflow: auto; } .br { display: inline-block; } }