//pc端样式 .main { width: 100%; max-width: 1920px; margin: 0 auto; padding-top: 71px; position: relative; .text{ text-align: justify; } .goUp{ width: 84px; height: 84px; cursor: pointer; position: absolute; bottom: 20px; right: 140px; img{ width: 100%; display: block; } } } .desCon{ width: 100%; text-align: center; padding-top: 100px; .desTop{ width: 100%; max-width: 1300px; margin: 0px auto; text-align: center; padding-bottom: 46px; } .careersType{ width: 100%; .titleBg{ width: 100%; position: sticky; top: 0; background: #ffffff; transition: all .3s ease-in-out; z-index: 4; .bgMove{ width: 100%; height: 100%; position: absolute; right: 0; top: 0; background-color: #f6f6f6; } } .topType{ top:70px; } .typeTitle{ width: 100%; height: 90px; display: flex; max-width: 1300px; margin: 0 auto; position: relative; font-size: 24px; .typeTitCk{ height: 90px; padding-top: 20px; box-sizing: border-box; margin-right: 80px; cursor: pointer; position: relative; &::after { content: ""; width: 0; height: 2px; background: #B81C25; position: absolute; left: 0; bottom: -2px; right: 0; margin: auto; transition: all 0.4s ease; } &:hover{ color: #B81C25; &::after { width: 100%; } } } .ck{ // border-bottom: 1px solid #B81C25; color: #B81C25; &::after { width: 100%; } .h5R{ font-weight: bold; } } } .typeCon{ width: 100%; background: #f6f6f6; padding-bottom: 250px; display: none; .infoul{ width: 100%; max-width: 1300px; margin: 0 auto; .infoLi{ padding: 90px 0; border-bottom:1px solid #9FA3A5; width: 100%; display: none; .liTitle{ display: flex; width: 100%; justify-content: space-between; cursor: pointer; font-size: 40px; font-weight: bold; font-family: "MyFont1"; .liTit{ width: calc(100% - 220px); // height: 84px; line-height: 84px; overflow: hidden; display: flex; flex-wrap: wrap; } .btn{ width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; background-color: #B2B5B7; border-radius: 50%; color: #fff; cursor: pointer; transition: all .2s; position: relative; transform: scale(1); min-width: 84px; &::before{ content: ''; width: 17px; height: 3px; background-color: #fff; z-index: 2; } &::after{ content: ''; width: 3px; height: 17px; background-color: #fff; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } .btnjbg{ position: absolute; bottom: 0px; width: 100%; height: 100%; border-radius: 50%; left: 0px; top: 0px; background-color: #B81C25; transition: all 1.5s cubic-bezier(.19,1,.22,1); transform: scale(0); transform-origin: center center; // -webkit-clip-path: circle(0 at 50% 50%); // clip-path: circle(0 at 50% 50%); // transition: -webkit-clip-path 1.5s cubic-bezier(.19,1,.22,1); // transition: clip-path 1.5s cubic-bezier(.19,1,.22,1); // transition: clip-path 1.5s cubic-bezier(.19,1,.22,1), -webkit-clip-path 1.5s cubic-bezier(.19,1,.22,1); // transition: clip-path 1.5s cubic-bezier(.19,1,.22,1), -webkit-clip-path 1.5s cubic-bezier(.19,1,.22,1); } } } .infoSonLi{ width: 100%; height: 0px; box-sizing: border-box; overflow: hidden; // display: none; border-bottom: 0px dashed #000000; margin-bottom: 0px; padding-top: 0px; transition: padding 1s ease-in-out; text-align: left; &:last-child{ border-bottom: 0px; margin-bottom: 0px; .btn{ margin-bottom: 0; } } &>p{ &:first-child{ color: #B81C25; } } .h4{ margin-top: 50px; font-size: 24px; font-family: 'MyFont1'; font-weight: bold; &:first-child{ margin-top: 0; color: #B81C25; } } .h5R{ margin-top: 30px; font-size: 20px; line-height: 44px; } .text{ margin-top: 10px; margin-bottom: 40px; color: #9fa3a5; font-size: 20px; line-height: 44px; } .btn{ margin: 80px 0 120px; } } } .infoLiShow{ .liTitle{ .btn{ // background-color: #0054A7; &::after{ display: none; } .btnjbg{ // -webkit-clip-path: circle(50% at 50% 50%); // clip-path: circle(50% at 50% 50%); transform: scale(1); } } } .infoSonLi{ border-bottom: 1px dashed #000000; margin-bottom: 95px; padding-top: 45px; padding-bottom: 100px; &:last-child{ padding-bottom: 10px; } } } } .all{ .infoLi{ display: block; } } } .typeConShow{ display: block; } .typeCon2{ text-align: left; .infoul{ &>.title{ font-size: 40px; padding: 70px 0px 43px; } .newsType{ width: 100%; height: 100%; .newsLi{ width: 100%; display: flex; justify-content: space-between; border-bottom: 1px solid #acacac5e; box-sizing: border-box; padding: 27px 8px; &:last-child{ border-bottom: 0px solid #ACACAC; } .timer{ width: 65px; height: 66px; border-radius: 8px; border: 1px solid #A7A5A5; text-align: center; font-size: 12px; padding: 0px 12px 0; box-sizing: border-box; .timerData{ font-size: 26px; color: #b81c25; border-bottom: 1px solid #b81c25; padding-bottom: 3px; margin-bottom: 3px; line-height: 30px; padding-top: 4px; } } .newsLiCon{ width: calc(100% - 80px); font-size: 18px; text-align: left; &>div{ overflow: hidden; white-space: nowrap; width: 100%; height: 24px; text-overflow: ellipsis; } .liTitle{ color: #231F20; font-weight: 500; margin-bottom: 8px; padding-top: 6px; } .licon{ font-weight: 400; color: #999999; font-size: 16px; } } transition: all 0.3s ease-in-out; &:hover{ background: rgba(184, 28, 37, 0.05); .newsLiCon{ .liTitle{ color: #B81C25; } } } } } .btnNew{ text-align: center; } .btn3{ width: 200px; height: 50px; line-height: 50px; margin: 59px auto 0px; font-size: 14px; span{ font-size: 26px; } } .inLiCon{ width: 100%; display: flex; box-sizing: border-box; padding: 38px 47px; background: #B81C25; color: #ffffff; justify-content: space-between; align-items: center; border-radius: 8px; margin-top: 80px; font-size: 24px; .title{ font-size: 28px; } .liLine{ width: 1px; height: 55px; background: #ffffff; opacity: 0.5; } .iconfont{ display: inline-block; width: 31px; height: 31px; background: #ffffff; border-radius: 20px; color: #B81C25; font-size: 16px; text-align: center; line-height: 31px; margin-right: 12px; position: relative; top: -3px; } } } } } .contactUs{ width: 100%; text-align: center; .contactCon{ width: 100%; max-width: 1300px; height: 750px; margin: 0px auto; padding: 120px 0px 180px; display: flex; text-align: left; &>div{ width: 50%; box-sizing: border-box; .contactUsTit{ font-size: 60px; margin-bottom: 50px; } .text{ font-size: 24px; color: #9FA3A5; margin-bottom: 26px; } .text1{ font-size: 20px; color: #231F20; } .contactType{ font-size: 40px; margin-top: 200px; margin-bottom: 43px; } img{ width: 750px; height: 750px; display: block; } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .careersType{ .typeCon,.titleBg{ padding-left: 20px; padding-right: 20px; box-sizing: border-box; } } } @media screen and (min-width:800px){ } .mTxt{ display: none; } //移动端样式 @media screen and (max-width:800px) { .pcTxt{ display: none; } .mTxt{ display: block; } .main{ padding-top: 61px; .goUp{ width: 42px; height: 42px; bottom: 30px; right: 50%; transform: translateX(21px); } } .desCon{ padding-top: 50px; box-sizing: border-box; // .text{ // font-size: 14px; // line-height: 22px; // } .desTop{ padding-bottom: 30px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; flex-wrap: wrap; .title{ text-align: center; margin-bottom: 30px; font-size: 32px; } &>div{ width: 100%; } } .desTopImg{ padding-bottom: 40px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } .careersType{ .titleBg{ top: 60px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } .typeTitle{ width: 100%; height: 50px; margin: 0px 0px; box-sizing: border-box; overflow: hidden; overflow-x: auto; font-size: 14px; .typeTitCk{ height: 50px; margin-right: 30px; line-height: 10px; white-space: nowrap; &:last-child{ margin-right: 0; } } .ck{ border-bottom: 2px solid #B81C25; } } .typeCon{ padding: 0px 15px 110px; box-sizing: border-box; .infoul{ .infoLi{ padding: 45px 0; .liTitle{ align-items: center; font-size: 24px; .liTit{ height: auto; line-height: 30px; width: calc(100% - 60px); overflow: initial; } .btn{ width: 40px; height: 40px; left: 0px; min-width: 40px; .btnjbg{ left: 0px; } &::before{ content: ''; width: 8px; height: 2px; } &::after{ content: ''; width: 2px; height: 8px; } } } .infoSonLi{ .h4{ font-size: 16px; line-height: 30px; margin-top: 30px; font-weight: bold; } .h5R{ margin-top: 10px; font-size: 16px; line-height: 30px; } .text{ margin-bottom: 40px; font-size: 16px; line-height: 30px; } .btn{ margin: 50px 0 60px; } } } .infoLiShow{ .liTitle{ .btn{ &::before { width: 8px; height: 2px; } // .btnjbg{ // -webkit-clip-path: circle(19px at 20px 20.5px); // clip-path: circle(19px at 20px 20.5px); // } } } .infoSonLi{ margin-bottom: 15px; border-bottom: 1px solid #231F20; } } } } .typeCon2 { .infoul{ &>.title{ font-size: 32px; padding: 40px 0px 15px; } .newsType { .newsLi { padding-bottom: 20px; margin-top: 20px; .newsLiCon{ font-size: 16px; padding-top: 4px; &>div{ height: 20px; } .liTitle{ margin-bottom: 8px; } } } } .btn{ margin: 20px auto 0px; } .btn3{ margin: 20px auto 0px; } .inLiCon{ justify-content: center; flex-wrap: wrap; font-size: 14px; padding: 30px 23px; border-radius: 4px; margin-top: 47px; .liLine{ display: none; } &>div{ width: 100%; height: 20px; margin-bottom: 15px; line-height: normal; padding-left: 38px; box-sizing: border-box; } .title{ width: 100%; text-align: center; padding-bottom: 14px; height: auto; font-size: 16px; padding-left: 0px; line-height: normal; border-bottom: 1px solid #ffffff81; margin-bottom: 20px; } .iconfont{ width: 20px; height: 20px; border-radius: 10px; font-size: 12px; line-height: 20px; margin-right: 12px; top: 0px; } a{ color: #fff; } } } } } .contactUs{ .contactCon{ height: auto; margin: 0px auto; padding: 105px 15px 115px; box-sizing: border-box; flex-wrap: wrap; &>div{ width: 100%; .contactUsTit{ font-size: 60px; margin-bottom: 38px; font-size: 32px; line-height: normal; } .text{ font-size: 14px; line-height: normal; margin-bottom: 15px; } .text1{ font-size: 14px; line-height: 28px; } .contactType{ font-size: 18px; margin-top: 70px; margin-bottom: 30px; line-height: normal; } img{ width: 100%; height: auto; margin-top: 15px; } } } } } }