@media screen and (max-width: 1360px) { body .content { display: flex; flex-direction: column; min-width: unset; width: 100%; background-color: #f1f9fc; } body .content .product-compontent { display: flex; flex-direction: column; width: 100%; } body .content .product-compontent .product-compontent-banner { width: 100%; height: 8rem; background-image: url('../../images/recruitBg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; } body .content .product-compontent .product-compontent-nav { width: 100%; height: 4rem; background-color: #fff; display: flex; justify-content: center; } body .content .product-compontent .product-compontent-nav-content { width: 100%; margin: 0 auto; display: flex; padding: 0 1rem; box-sizing: border-box; justify-content: space-between; } body .content .product-compontent .product-compontent-nav-content-left { display: flex; justify-content: center; width: 100%; } body .content .product-compontent .product-compontent-nav-content-left a { min-width: unset; text-align: center; height: 100%; line-height: 4rem; color: #000000; font-size: 1rem; position: relative; margin-right: 1rem; cursor: pointer; transition: all .3s; } body .content .product-compontent .product-compontent-nav-content-left a:hover { color: #0084ce; position: relative; } body .content .product-compontent .product-compontent-nav-content-left a:hover::after { content: unset; width: unset; position: unset; bottom: unset; left: unset; height: unset; background-color: unset; color: unset; line-height: unset; } body .content .product-compontent .product-compontent-nav-content-left a:last-child { margin: 0; } body .content .product-compontent .product-compontent-nav-content-left .select-nav { color: #0084ce; position: relative; } body .content .product-compontent .select-nav::after { content: unset; width: unset; position: unset; bottom: unset; left: unset; height: unset; background-color: unset; color: unset; line-height: unset; } body .content .product-compontent .product-compontent-nav-content-right { display: none; align-items: center; } body .school-container{ width: 100%; display: flex; flex-direction: column; align-items: center; } body .school-container h2{ text-align: center; margin: 2rem auto; color: #000000; font-size: 1.2rem; font-weight: 500; } body .school-container .container{ width: 100%; padding: 0 1rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; } body .school-container .container .top{ display: flex; flex-direction: column; width: 100%; } /* .school-container .container .top div{ flex: 1; } */ body .school-container .container .top div:first-child{ display: flex; flex-direction: column; background-color: #0084ce; padding: 1rem; box-sizing: border-box; } body .school-container .container .top div:first-child h3{ color: #ffffff; font-size: 1.2rem; font-weight: bold; line-height: 2rem; } body .school-container .container .top div:first-child h4{ color: #ffffff; font-size: 1.2rem; line-height: 1.8rem; } body .school-container .container .top div:first-child p{ color: #ffffff; font-size: 1rem; line-height: 1.5rem; } body .school-container .container .top div:last-child{ width: 100%; flex-shrink: 0; } body .school-container .container .top div:last-child img{ width: 100%; display: block; } body .school-container .container .bottom{ width: 100%; background-color: #ffffff; display: flex; flex-direction: column; margin-bottom: 3rem; padding: 0 1rem; box-sizing: border-box; } body .school-container .container .bottom .bottom-top{ margin-top: 1rem; padding-bottom: 1rem; display: flex; flex-direction: column; border-bottom: 1px solid #d3e3ec; box-sizing: border-box; } body .school-container .container .bottom .bottom-top .label{ width: 100%; display: flex; flex-direction: column; margin-bottom: 1rem; } body .school-container .container .bottom .bottom-top .label .icon{ margin: 1rem 0; display: flex; color: #0084ce; font-size: 1.2rem; align-items: center; } body .school-container .container .bottom .bottom-top .label .icon span{ font-size: 1.2rem; color: #0084ce; margin-right: .5rem; } body .school-container .container .bottom .bottom-top .label p{ color: #000000; font-size: 1rem; line-height: 1.5rem; } body .school-container .container .bottom .process{ width: 100%; margin: 2rem 0; display: flex; flex-direction: column; } body .school-container .container .bottom .process .process-title{ text-align: center; color: #000000; font-size: 1.2rem; margin-bottom: 2rem; } body .school-container .container .bottom .process .process-ul{ width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-row-gap: 1rem; grid-column-gap: 1rem; } body .school-container .container .bottom .process .process-ul .process-li{ display: flex; flex-direction: column; align-items: center; } body .school-container .container .bottom .process .process-ul .process-li div{ display: flex; justify-content: center; align-items: center; width: 10rem; height: 10rem; border: dashed 1px #0084ce; border-radius: 50%; } body .school-container .container .bottom .process .process-ul .process-li div img{ width: 3rem; display: block; } body .school-container .container .bottom .process .process-ul .process-li p{ color: #000000; font-size: 1rem; line-height: 2rem; } body .school-container .container .bottom .careful{ width: 100%; border-top: 1px solid #d3e3ec; display: flex; flex-direction: column; } body .school-container .container .bottom .careful .txt{ color: #0084ce; font-size: 1rem; line-height: 4rem; } body .school-container .container .bottom .careful .careful-li{ width: 100%; display: flex; flex-direction: column; justify-content: space-between; } body .school-container .container .bottom .careful .careful-li div{ width: 100%; margin-bottom: 1rem; } body .school-container .container .bottom .careful .careful-li div p{ color: #444444; font-size: 1rem; line-height: 1.5rem; } body .school-container .container .bottom .button{ width: 100%; height: 4rem; background-color: #0084ce; border-radius: 2rem; margin: 2rem auto; text-align: center; line-height: 4rem; color: #ffffff; font-size: 1.2rem; cursor: pointer; transition: all .3s; } } .content { display: flex; flex-direction: column; background-color: #f1f9fc; } .content .product-compontent { display: flex; flex-direction: column; width: 100%; } .content .product-compontent .product-compontent-banner { width: 100%; height: 320px; background-image: url('../../images/recruitBg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; } .content .product-compontent .product-compontent-nav { width: 100%; height: 70px; background-color: #fff; display: flex; justify-content: center; } .content .product-compontent .product-compontent-nav-content { width: 1360px; margin: 0 auto; display: flex; padding: 0 20px; box-sizing: border-box; justify-content: space-between; } .content .product-compontent .product-compontent-nav-content-left { display: flex; } .content .product-compontent .product-compontent-nav-content-left a { min-width: 100px; text-align: center; height: 100%; line-height: 70px; color: #000000; font-size: 16px; position: relative; margin-right: 40px; cursor: pointer; transition: all .3s; } .content .product-compontent .product-compontent-nav-content-left a:hover{ color: #0084ce; position: relative; } .content .product-compontent .product-compontent-nav-content-left a:hover::after { content: ''; width: 100%; position: absolute; bottom: 0; left: 0; height: 3px; background-color: #0084ce; color: #0084ce; line-height: 3px; } .content .product-compontent .product-compontent-nav-content-left a:last-child { margin: 0; } .content .product-compontent .product-compontent-nav-content-left .select-nav { color: #0084ce; position: relative; } .content .product-compontent .select-nav::after { content: ''; width: 100%; position: absolute; bottom: 0; left: 0; height: 3px; background-color: #0084ce; color: #0084ce; line-height: 3px; transition: all .3s; } .content .product-compontent .product-compontent-nav-content-right { display: flex; align-items: center; } .content .product-compontent .product-compontent-nav-content-right span:first-child { font-size: 16px; color: #0084ce; margin-right: 7px; } .content .product-compontent .product-compontent-nav-content-right a { color: #888888; font-size: 14px; cursor: pointer; transition: all .3s; } .content .product-compontent .product-compontent-nav-content-right a:hover{ color: #0084ce; } .content .product-compontent .product-compontent-nav-content-right span { margin: 0 14px; font-size: 14px; color: #888888; } .school-container{ width: 100%; display: flex; flex-direction: column; align-items: center; } .school-container h2{ text-align: center; margin: 60px auto; color: #000000; font-size: 36px; font-weight: 500; } .school-container .container{ width: 1360px; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; } .school-container .container .top{ display: flex; width: 100%; } /* .school-container .container .top div{ flex: 1; } */ .school-container .container .top div:first-child{ display: flex; flex-direction: column; background-color: #0084ce; padding-top: 10px; padding-left: 60px; padding-right: 75px; box-sizing: border-box; } .school-container .container .top div:first-child h3{ color: #ffffff; font-size: 28px; font-weight: bold; line-height: 58px; } .school-container .container .top div:first-child h4{ color: #ffffff; font-size: 16px; line-height: 32px; } .school-container .container .top div:first-child p{ color: #ffffff; font-size: 16px; line-height: 32px; } .school-container .container .top div:last-child{ width: 50%; flex-shrink: 0; } .school-container .container .top div:last-child img{ width: 100%; display: block; } .school-container .container .bottom{ width: 100%; background-color: #ffffff; display: flex; flex-direction: column; margin-bottom: 100px; padding: 0 60px; box-sizing: border-box; } .school-container .container .bottom .bottom-top{ margin-top: 40px; padding-bottom: 20px; display: flex; border-bottom: 1px solid #d3e3ec; box-sizing: border-box; } .school-container .container .bottom .bottom-top .label{ width: 50%; display: flex; flex-direction: column; } .school-container .container .bottom .bottom-top .label .icon{ margin: 20px 0; display: flex; color: #0084ce; font-size: 18px; align-items: center; } .school-container .container .bottom .bottom-top .label .icon span{ font-size: 26px; color: #0084ce; margin-right: 8px; } .school-container .container .bottom .bottom-top .label p{ color: #000000; font-size: 16px; line-height: 32px; } .school-container .container .bottom .process{ width: 100%; margin: 50px 0; display: flex; flex-direction: column; } .school-container .container .bottom .process .process-title{ text-align: center; color: #000000; font-size: 28px; margin-bottom: 48px; } .school-container .container .bottom .process .process-ul{ width: 100%; display: flex; justify-content: space-between; } .school-container .container .bottom .process .process-ul .process-li{ display: flex; flex-direction: column; align-items: center; } .school-container .container .bottom .process .process-ul .process-li div{ display: flex; justify-content: center; align-items: center; width: 160px; height: 160px; border: dashed 1px #0084ce; border-radius: 50%; } .school-container .container .bottom .process .process-ul .process-li div img{ width: 64px; display: block; } .school-container .container .bottom .process .process-ul .process-li p{ color: #000000; font-size: 16px; line-height: 48px; } .school-container .container .bottom .careful{ width: 100%; border-top: 1px solid #d3e3ec; display: flex; flex-direction: column; } .school-container .container .bottom .careful .txt{ color: #0084ce; font-size: 14px; line-height: 42px; } .school-container .container .bottom .careful .careful-li{ width: 100%; display: flex; justify-content: space-between; } .school-container .container .bottom .careful .careful-li div{ width: 600px; } .school-container .container .bottom .careful .careful-li div p{ color: #444444; font-size: 14px; line-height: 32px; } .school-container .container .bottom .button{ width: 280px; height: 66px; background-color: #0084ce; border-radius: 33px; margin: 66px auto; text-align: center; line-height: 66px; color: #ffffff; font-size: 22px; cursor: pointer; transition: all .3s; } .school-container .container .bottom .button:hover{ opacity: .7; }