锘縤mg { max-width: 100%; } .jiaoyu-1 .block_txt>p { background: #144d91; } .jiaoyu-1 .shuzi { text-align: center; margin-top: 180px; } .jiaoyu-1 .shuzi h5 { color: #FFFFFF; font-size: 18px; } .jiaoyu-1 .shuzi h5 span { font-size: 60px; } .jiaoyu-1 .shuzi h6 { color: #FFFFFF; font-size: 18px; } .jiaoyu-1 .shuzi .item { width: 10%; display: inline-block; margin: 0 118px; } .jiaoyu-2 { background: #f7f7f7; padding: 95px 0 160px 0; } .jiaoyu-3 { padding: 10% 0 0; background: url("/static/home/images/img-H/J-b_02_02.png")center no-repeat fixed; background-size: cover; position: relative; } .jiaoyu-3 .conn3 { width: 100%; height: 540px; position: relative; } .jiaoyu-3 .items { width: 48%; position: absolute; left: 0; right: auto; bottom: -30%; } .jiaoyu-3 .items:nth-of-type(2) { width: 48%; position: absolute; left: auto; right: 0; bottom: -30%; } .jiaoyu-3 .items .item-img { width: 27%; position: absolute; top: -100px; left: 89px; z-index: 1; } .jiaoyu-3 .item { display: inline-block; height: 400px; padding: 60px 89px; position: relative; z-index: 2; background: url("/static/home/images/img-H/J3-item-bj_03.png")center no-repeat; background-size: cover; } .jiaoyu-3 .item h2 { font-size: 36px; position: relative; margin-bottom: 40px; } .jiaoyu-3 .item h2:before { content: " "; position: absolute; left: 0; bottom: -20px; width: 50%; height: 2px; background: #f5c921; } .jiaoyu-3 .item p { font-size: 16px; line-height: 30px; color: #333333; } .jiaoyu-4 { padding: 250px 0 120px 0; background: #f7f7f7; } .jiaoyu-4 .conn4 { margin-bottom: 100px; } .jiaoyu-4 .conn4 li { width: 20%; background: #FFFFFF; float: left; padding-bottom: 20px; transition: .5s; } .jiaoyu-4 .conn4 li .icon { transition: .5s; } .jiaoyu-4 .conn4 li:hover .icon { transform: rotateY(360deg); } .jiaoyu-4 .conn4 .icon { width: 24%; float: right; margin-top: 25px; margin-right: 25px; } .jiaoyu-4 .conn4 li h5 { color: #f5c921; clear: both; font-size: 50px; padding-left: 25px; transition: .5s; } .jiaoyu-4 .conn4 li p { font-size: 22px; padding-left: 25px; } .jiaoyu-4 .conn4 .conn4-img img { width: 100%; } .jiaoyu-4 .conn4 li:hover { background: #f5c921; color: #FFFFFF; } .jiaoyu-4 .conn4 li:hover h5 { color: #FFFFFF; } .jiaoyu-4 .conn4 li:nth-of-type(1) .icon { width: 56px; height: 56px; background: url("/static/home/images/img-H/J3-icon_03.png")center no-repeat; } .jiaoyu-4 .conn4 li:nth-of-type(2) .icon { width: 56px; height: 56px; background: url("/static/home/images/img-H/J3-icon_14.png")center no-repeat; } .jiaoyu-4 .conn4 li:nth-of-type(3) .icon { width: 56px; height: 56px; background: url("/static/home/images/img-H/J3-icon_08.png")center no-repeat; } .jiaoyu-4 .conn4 li:nth-of-type(4) .icon { width: 56px; height: 56px; background: url("/static/home/images/img-H/J3-icon_11-hover.png")center no-repeat; } .jiaoyu-4 .conn4 li:nth-of-type(5) .icon { width: 56px; height: 56px; background: url("/static/home/images/img-H/J3-icon_05.png")center no-repeat; } .jiaoyu-4 .conn4 li:nth-of-type(1):hover .icon { width: 56px; height: 56px; background: url("/static/home/images/img-H/J3-icon_03-hover.png")center no-repeat; } .jiaoyu-4 .conn4 li:nth-of-type(2):hover .icon { width: 56px; height: 56px; background: url("/static/home/images/img-H/J3-icon_14-hover.png")center no-repeat; } .jiaoyu-4 .conn4 li:nth-of-type(3):hover .icon { width: 56px; height: 56px; background: url("/static/home/images/img-H/J3-icon_08-hover.png")center no-repeat; } .jiaoyu-4 .conn4 li:nth-of-type(4):hover .icon { width: 56px; height: 56px; background: url("/static/home/images/img-H/J3-icon_11.png")center no-repeat; } .jiaoyu-4 .conn4 li:nth-of-type(5):hover .icon { width: 56px; height: 56px; background: url("/static/home/images/img-H/J3-icon_05-hover.png")center no-repeat; } .jiaoyu-4 .conn-img { width: 100%; margin-top: 35px; } .jiaoyu-4 .conn-img img { width: 100%; } .comm_banner .block_txt { top: 50% !important; } .mobile-conn4 { display: none; } .jiaoyu-3>img{ display: none; } @media only screen and (max-width: 1700px) { .jiaoyu-2 { padding: 80px 0 140px 0; } .jiaoyu-3 .item { height: 360px; } .jiaoyu-4 { padding: 230px 0 120px 0; } .jiaoyu-4 .conn4 { margin-bottom: 80px; } .jiaoyu-1 .shuzi .item { width: 12%; } } @media only screen and (max-width: 1600px) {} @media only screen and (max-width: 1500px) { .comm_top { margin-top: 145px; } .jiaoyu-1 .shuzi h5 span { font-size: 50px; } .jiaoyu-2 { padding: 70px 120px; } .jiaoyu-3 .conn3 { height: 60vh; } .jiaoyu-3 .item { height: 330px; } .jiaoyu-3 .items .item-img { top: -20%; } .jiaoyu-4 { padding: 200px 0 100px 0; } .jiaoyu-4 .conn4 { margin-bottom: 60px; } } @media only screen and (max-width: 1440px) { .comm_top { margin-top: 129px; } .jiaoyu-1 .shuzi .item { width: 14%; } .jiaoyu-1 .shuzi { margin-top: 120px; } .jiaoyu-2 { padding: 60px 0; } .jiaoyu-3 .conn3 { height: 55vh; } .jiaoyu-3 .item { padding: 20px 50px; } .jiaoyu-4 .conn4 li h5 { font-size: 40px; } .jiaoyu-4 .conn4 { margin-bottom: 40px; } .jiaoyu-4 { padding: 200px 0 80px 0; } .jiaoyu-4 .conn4 li p { font-size: 20px; } .jiaoyu-4 .conn4 .icon { width: 40px !important; height: 40px !important; background-size: contain !important; } } @media only screen and (max-width: 1366px) { .jiaoyu-1 .shuzi .item { margin: 0 70px; } .jiaoyu-2 { padding: 50px 0; } .jiaoyu-3 .conn3 { height: 50vh; } .jiaoyu-3 .item h2 { font-size: 26px; } .jiaoyu-3 .item p { line-height: 28px; } .jiaoyu-3 .item { height: 280px; } .jiaoyu-4 { padding: 160px 0 60px 0; } } @media only screen and (max-width: 1200px) { .jiaoyu-3 .conn3 { height: 45vh; } .jiaoyu-1 .shuzi .item { width: 18%; margin: 0 60px; } .jiaoyu-1 .shuzi h5 span { font-size: 40px; } .jiaoyu-1 .shuzi { margin-top: 100px; } .jiaoyu-2 { padding: 40px 0; } .jiaoyu-3 .item { padding: 20px 30px; } .jiaoyu-4 { padding: 140px 0 50px 0; } .jiaoyu-4 .conn4 { margin-bottom: 30px; } .jiaoyu-4 .conn4 li h5 { font-size: 40px; } .jiaoyu-4 .conn4 li p { font-size: 18px; } } @media only screen and (max-width: 992px) { .jiaoyu-3 .item { background-size: cover; } .jiaoyu-3>img{ display: block; } .comm_top { margin-top: 60px; } .jiaoyu-1 .shuzi h5, .jiaoyu-1 .shuzi h6 { font-size: 12px; } .jiaoyu-1 .shuzi h5 span { font-size: 24px; } .jiaoyu-1 .shuzi .item { width: 32%; margin: 0 0px; } .jiaoyu-2 { padding: 20px 0; } .jiaoyu-1 .shuzi { margin-top: 75px; } .jiaoyu-3 .items, .jiaoyu-3 .items:nth-of-type(2) { position: static; padding: 20px 0; width: 100%; } .jiaoyu-3 .items:nth-of-type(2) { padding-top: 0; } .jiaoyu-3 .items .item-img { display: none; } .jiaoyu-3 { height: auto; } .jiaoyu-3 .item { height: auto; } .jiaoyu-3 .conn3 { height: auto; } .jiaoyu-3 .item p { font-size: 14px; line-height: 24px; } .jiaoyu-3 .item h2 { font-size: 18px; } .jiaoyu-3 .item h2 { margin-bottom: 25px; } .jiaoyu-3 .item h2:before { bottom: -15px; } .jiaoyu-4 { padding: 20px 0; } .jiaoyu-4 .conn4 li { width: 50%; } .jiaoyu-4 .conn4 .conn4-img img { width: 100%; height: 250px; } .jiaoyu-4 .conn4 .icon { width: 24%; float: right; margin-top: 20px; margin-right: 20px; } .jiaoyu-4 .conn4 li h5 { font-size: 28px; } .jiaoyu-4 .conn4 li p { font-size: 18px; } .jiaoyu-4 .conn4 { margin-bottom: 20px; } .jiaoyu-4 .conn-img { margin-top: 20px; } .comm_banner .block_txt { top: 50%; } .jiaoyu-3 .conn3 { margin-top: -60px; } .jiaoyu-3 { padding: 0; background: none; } .jiaoyu-3 .items { position: ; bottom: -70%; } .jiaoyu-3 .items:nth-of-type(2) { position: ; bottom: -155%; } .jiaoyu-4 { clear: both; padding: 20px 0; } .jiaoyu-4 .conn4 { display: none; } .mobile-conn4 { display: block; } .mobile-conn4 li { display: inline-block; margin: 20px 5px; } .mobile-conn4 li .conn4-img { width: 100px; height: 100px; position: relative; margin: 0 auto; } .mobile-conn4 { text-align: center; font-size: 0; } .mobile-conn4 li .conn4-img img { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; } .mobile-conn4 li p { margin-top: 10px; text-align: center; font-size: 16px; } .mobile-conn4 li:nth-of-type(1) .conn4-img { background: #1bb8ce url("/static/home/images/img-H/J3-icon_08.png") center no-repeat; border-radius: 50%; background-size: 40px; } .mobile-conn4 li:nth-of-type(1) p { color: #1bb8ce; } .mobile-conn4 li:nth-of-type(2) .conn4-img { background: #56caa0 url("/static/home/images/img-H/J3-icon_03.png") center no-repeat; background-size: 40px; border-radius: 50%; } .mobile-conn4 li:nth-of-type(2) p { color: #56caa0; } .mobile-conn4 li:nth-of-type(3) .conn4-img { background: #ff855e url("/static/home/images/img-H/J3-icon_14.png") center no-repeat; background-size: 40px; border-radius: 50%; } .mobile-conn4 li:nth-of-type(3) p { color: #ff855e; } .mobile-conn4 li:nth-of-type(4) .conn4-img { background: #c69ae6 url("/static/home/images/img-H/J3-icon_11-hover.png") center no-repeat; background-size: 40px; border-radius: 50%; } .mobile-conn4 li:nth-of-type(4) p { color: #c69ae6; } .mobile-conn4 li:nth-of-type(5) .conn4-img { background: #fcc81a url("/static/home/images/img-H/J3-icon_05.png") center no-repeat; background-size: 40px; border-radius: 50%; } .mobile-conn4 li:nth-of-type(5) p { color: #fcc81a; } } @media only screen and (max-width:700px) { .jiaoyu-4 .conn4 li { width: 100%; } .jiaoyu-1 .shuzi { margin-top: 60px; } .jiaoyu-4 { clear: both; padding: 20px 0; } } @media only screen and (max-width: 500px) { .comm_banner .block_txt { top: 43% !important; } } @media only screen and (max-width:400px) { .jiaoyu-1 .shuzi h5, .jiaoyu-1 .shuzi h6 { font-size: 12px; } .jiaoyu-1 .shuzi .item { width: 48%; margin: 0 0px; } .mobile-conn4 li .conn4-img { width: 85px; height: 85px; position: relative; } .mobile-conn4 li{ width: 40%; } }