/* 主页招聘 */ * { padding: 0; margin: 0; box-sizing: border-box; } /* 10÷16=62.5% */ html { font-size: 62.5%; color: #727171; } /* 12÷10=1.2 */ body { font-size: 14px; font-size: 1.4rem; } p { font-size: 14px; font-size: 1.4rem; } html, body { min-width: 300px; } img { display: block; width: 100%; border: none; vertical-align: middle; } a { text-decoration: none; } .top { padding: 2rem 17.5%; /* background: tomato; */ } .top .bag { display: flex; justify-content: space-between; } /* 导航栏 nav */ .nav { padding: 0 17.5%; background: #00479b; position: relative; z-index: 999999; } .nav .nav-list { position: absolute; top: 1px; right: 0; background: #68a4d9; display: none; z-index: 999; padding: 0; } .nav .nav-list a { width: 100%; padding: 1rem 0; text-align: center; display: block; color: #fff; text-decoration: none; border-bottom: 1px solid #a0c7ea; } .nav .nav-a { position: relative; padding: 1.7rem 0; text-align: center; color: #fff; font-size: 1.8rem; cursor: pointer; transition: all 1s; } .nav .nav-a:hover { background: #55a6ef; opacity: 0.8; color: #fff; } .nav .nav-a .nav-slide { position: absolute; width: 100%; top: 100%; z-index: 9999; display: none; } .nav .nav-a .nav-slide a { display: block; text-decoration: none; padding: 2rem 0; width: 100%; color: #fff; background: #89bded; } .nav .nav-a .nav-slide a:hover { background: #55a6ef; color: #fff; } /* 轮播 */ .swiper-slide{ position: relative; } .swiper-slide .pc-con{ position: absolute; padding: 1rem; top:24%; left: 17%;; } .swiper-slide .pc-con p{ font-size: 3.6rem; color: #55a6ef; width: 300px; letter-spacing:2px; } .swiper-slide .pc-con p:nth-child(2) { color: #55a6ef; margin-left: 20%; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 20%; } .swiper-pagination .swiper-pagination-bullet-active { opacity: 1 !important; background: #007aff; width: 20px !important; height: 8px !important; border-radius: 5px !important; transition: all 1s !important; } /* 内容层 content */ .content { padding: 0 16.75%; /* background: #00479b; */ position: relative; z-index: 9999; } .content .content-background { background: url(/img/backgroundPC.png); background-size: 100%; background-repeat: no-repeat; margin-top: -9%; padding-top: 6rem; } .content .content-background .content-t { display: flex; justify-content: center; align-items: center; padding: 2rem 0 6rem 0; } .content .content-background .content-t img { width: 38%; } .content .content-background p{ padding: 4rem 7%; line-height: 1.9; font-size: 1.8rem; text-align: justify; text-justify: inter-ideograph; color: #727171; } /* 核心部分 core */ .core{ padding: 0 17.75%; position: relative; } .core .ceng{ /* display: table; */ } .core-pc{ /* width: 1083px; */ } .core .core-item{ padding-left: 0; padding-right: 0; background: #00479b; transition: all 0.6s; } .core .core-item-wenzi:hover{ background: #55a6ef; } .core .core-item-wenzi{ /* padding-top: 10rem; */ padding-bottom: 2rem; height: 400px; color: #fff; } .core .core-item-wenzi p { text-align: center; } .core .core-item .core-item-img{ display: flex; justify-content: center; align-items: center; position: relative; top: 50%; transform: translateY(-50%); } .core .core-item .core-item-img img { width: 100%; } .core .core-img{ background: url('../img/index/PC/item-3.jpg') center; background-repeat: no-repeat; background-size: cover; overflow: hidden; height: 400px; } .core .core-img:nth-child(2){ background: url('../img/index/PC/item-1.png') center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .core .core-img img { transition: all 0.6s; } .core .core-img:hover img { transform: scale(1.1); } /* 底部 bottom */ .bottom { margin-top: 7rem; padding: 1.4rem 19%; background: #3060a0; } .bottom .bottom-content { padding: 1rem 0; } .bottom .bottom-content .about-us { display: flex; justify-content: center; align-items: center; color: #fff; } .bottom .bottom-content .about-us img { width: 30%; } .bottom .bottom-content .about-us .about { width: 100%; } /* 小屏幕 */ @media only screen and (max-width: 768px) { html, body { color: #727171; } .top { padding: 1.5rem 5%; background: #00479b; position: fixed; z-index: 99999; } .top .nav-list { width: 43%; position: absolute; top: 100%; background: #68a4d9; right: 0; z-index: 99999; padding: 0; display: none; } .top .nav-list a { display: block; padding: 1rem 0; color: #fff; text-align: center; text-decoration: none; border-bottom: 1px solid #a0c7ea; } .content .content-background .content-t { display: flex; justify-content: center; align-items: center; padding: 0rem 0 3rem 0; } .swiper-slide .pc-con { position: absolute; padding: 1rem; top: 24%; left: 0%; } .swiper-slide .pc-con p { font-size: 1.6rem; color: #55a6ef; width: 300px; letter-spacing: 2px; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 12%; } .content { padding: 0 2%; /* background: #00479b; */ position: relative; } .content .content-background { } .content .content-background { padding-top: 3rem; } .content .content-background p { padding: 2.5rem 2%; } .content .content-background .content-t img { width: 68%; } .core { padding: 0 7.75%; position: relative; } .core .core-app .core-item { position: relative; padding-left: 0; padding-right: 0; margin-bottom: 2%; } .core .core-app .core-item .con{ color: #fff; position: absolute; bottom: 0; } .bottom { margin-top: 5rem; padding: 3.2rem 5%; background: #3060a0; } .bottom .bottom-content { padding: 0; } .bottom .bottom-content .about-us img { width: 200px; } } /* 大屏幕 最小768 --- */ @media only screen and (min-width: 768px) { .more { display: none; } .nav-list { display: none; } } @media only screen and (min-width: 768px) and (max-width:1200px) { .core .core-img { height: 350px; } .core .core-item-wenzi { height: 350px; } .swiper-slide .pc-con { position: absolute; padding: 1rem; top: 24%; left: 16%; } .swiper-slide .pc-con p { font-size: 2.6rem; color: #55a6ef; width: 300px; letter-spacing: 2px; } } /* 超大屏幕 大于1980*/ @media only screen and (min-width: 1980px) { html { font-size: 120% !important; } .master-map { /* height: 1000px; */ } .content .content-background p { font-size: 1.6rem; line-height: 3rem; } .reap-xian-img { width: 120%; } .core .core-img { height: 566px; } .core .core-item-wenzi { height: 566px; } }