@colorfff: #fff; @fontSize18: 18px; .displayflex(@jc: flex-start, @ai: stretch, @wrap: nowrap) { display: flex; flex-direction: row; flex-wrap: @wrap; justify-content: @jc; align-items: @ai; } .displaybox(@num: 2) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @num; overflow: hidden; } .width1400 { width: 1400px; margin: 0 auto; } body { max-width: 1920px; margin: 0 auto; overflow-x: hidden; } * { box-sizing: border-box; } a { text-decoration: none; } .zyfeilei { height: 70px; width: 100%; margin: 0 auto; border-bottom: 1px solid #dddddd; box-shadow: 0px 5px 10px 0px #ddd; margin-bottom: 30px; } .zyfeilei .width1400 { margin: 0 auto; } .zyfeilei ul { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; align-items: center; min-width: 60%; max-width: 1200px; // overflow-x: scroll; // white-space: nowrap; } .zyfeilei ul li a { padding: 0 9px; display: block; height: 70px; text-align: center; line-height: 70px; transition: all 0.3s; color: #333; font-size: 18px; } .zyfeilei ul li:hover > a { background: #3170b8; color: #fff; } .zyfeilei ul li.li_on a { background: #3170b8; color: #fff; } .newactive { overflow: hidden; line-height: 70px; flex: 1; float: right; } .newactive h3 { line-height: 70px; font-size: 22px; overflow: hidden; font-weight: normal; color: #3170b8; text-align: right; } // 鏂伴椈鍒楄〃 .newslist-two ul { .displayflex(space-between; stretch; wrap); } .newslist-two ul li { width: 47%; height: 90px; background: #f8f8f8; margin-bottom: 25px; } .newslist-two ul li a { .displayflex(flex-start; center; ); padding-right: 30px; box-sizing: border-box; } .newslist-two ul li a h2 { width: 110px; height: 90px; background: #f79559; margin-right: 35px; .displayflex(center; center; wrap); font-size: 24px; font-weight: bold; color: #fff; line-height: 26px; text-align: center; padding: 20px 0; box-sizing: border-box; } .newslist-two ul li a h2 span { width: 100%; font-size: 14px; color: #fff; font-style: italic; text-align: right; padding-right: 20px; display: block; font-weight: normal; } .newslist-two ul li a h3 { flex: 1; color: #282828; line-height: 30px; letter-spacing: -0.3px; font-size: 20px; .displaybox(); } // 绉戝鍒楄〃 .sectionlist { margin: 30px auto; } .sectionlist ul { .displayflex(start; center; wrap); } .sectionlist ul li { width: 23.1%; min-height: 130px; background: #ffffff; transition: all 0.2s; margin-bottom: 32px; margin-right: 2.5%; border: 1px solid #e8e8e8; box-sizing: border-box; &:hover { box-shadow: 0px 0px 16px 0px rgba(103, 103, 103, 0.22); transition: all 0.2s; a { padding-top: 18px; border-top: 2px solid #005da3; } } &:nth-child(1) { .section-icon { div { background-image: url(../images/secicon1.png); } } } &:nth-child(2) { .section-icon { div { background-image: url(../images/secicon1.png); } } } &:nth-child(3) { .section-icon { div { background-image: url(../images/secicon1.png); } } } &:nth-child(4) { .section-icon { div { background-image: url(../images/secicon1.png); } } } &:nth-child(5) { .section-icon { div { background-image: url(../images/secicon1.png); } } } &:nth-child(6) { .section-icon { div { background-image: url(../images/secicon1.png); } } } &:nth-child(7) { .section-icon { div { background-image: url(../images/secicon1.png); } } } &:nth-child(8) { .section-icon { div { background-image: url(../images/secicon1.png); } } } &:nth-child(9) { .section-icon { div { background-image: url(../images/secicon1.png); } } } &:nth-child(10) { .section-icon { div { background-image: url(../images/secicon1.png); } } } &:nth-child(11) { .section-icon { div { background-image: url(../images/secicon1.png); } } } } .sectionlist ul li:nth-of-type(4n) { margin-right: 0; } .sectionlist ul li a { .displayflex(space-between;center); padding: 20px; box-sizing: border-box; } .sectionlist ul li a h1 { font-size: 20px; font-weight: 500; color: #4d4d4d; line-height: 24px; letter-spacing: -0.4px; margin-bottom: 20px; font-weight: bold; } .sectionlist ul li a p { font-size: 14px; font-weight: 500; color: #3a3a3a; margin-top: 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .sectionlist ul li a em { display: block; width: 50px; height: 4px; background-color: #3170b8; margin-bottom: 20px; } .section-icon { width: 81px; overflow: hidden; margin-left: 15px; } .section-icon img { width: 100%; } .section-text { flex: 1; width: 100%; } .section-text span { font-size: 25px; color: #c7c7c7; margin-top: 5px; display: block; height: 20px; } .body-container { min-height: 600px; } /*鍒嗛〉*/ .black2 { padding: 10px; margin: 40px auto; text-align: center; overflow: hidden; } .black2 a { border: #757575 1px solid; padding: 5px 10px; color: #000000; text-decoration: none; margin: 2px; } .black2 a:hover { border: #3170b8 1px solid; background: #3170b8; padding: 5px 10px; color: #fff; text-decoration: none; margin: 2px; } .black2 span.current { border: #3170b8 1px solid; background: #3170b8; padding: 5px 10px; color: #fff; text-decoration: none; margin: 2px; } .black2 span.disabled { border: #ccc 1px solid; padding: 5px 10px; color: #ccc; text-decoration: none; margin: 2px; } #neibanner { width: 100%; height: 580px; background-size: cover !important; position: relative; } .sanji { overflow: hidden; margin-top: 50px; margin-bottom: 30px; } .sanjione ul { // height: 40px; text-align: center; overflow: hidden; border-bottom: 2px solid #3170b8; } .sanjione ul li { display: inline-block; margin: 0 2px; } .sanjione ul li a { display: block; box-sizing: border-box; padding: 10px 14px; font-size: 18px; text-align: center; background: #e8e8e8; transition: all 0.3s; color: #616161; min-width: 120px; } .sanjione ul li.sanjili a { background: #3170b8; color: #ffffff; } .sanjione ul li:hover a { background: #3170b8; color: #ffffff; } /* 鏂伴椈鍐呭椤 */ .content-title { border-bottom: 1px solid #dddddd; padding-bottom: 30px; padding-top: 25px; margin-bottom: 30px; } .content-title h1 { font-size: 24px; color: #444545; text-align: center; padding: 15px 0; padding-bottom: 10px; line-height: 40px; } .content-title h2 { font-size: 16px; color: #a1a2a2; text-align: center; height: 25px; line-height: 25px; } .content-main { color: #484848; line-height: 25px; font-size: 14px; } .content-main p { color: #484848; line-height: 35px; font-size: 20px; } .content-main p span { color: #484848; line-height: 35px; font-size: 20px; } .content-main p span b{ color: #484848; line-height: 35px; font-size: 20px; } .content-main > table { margin: 0 auto; } .content-main table p { text-indent: 0 !important; } .content-main p strong { font-size: 20px; } .content-main p span { text-wrap: wrap !important; font-size: 20px; } .content-main p img { max-width: 100%; height: auto !important; } .content-main img { max-width: 100%; } // 涓撳鍒楄〃 .doctors-list-ul { .doctor-list { display: flex; flex-wrap: wrap; height: auto; margin-bottom: 20px; .left { display: flex; // background-image: linear-gradient(to bottom, #633f8e, #22549b); background-color: #3170b8; padding: 40px 0; box-sizing: border-box; width: 310px; font-size: 20px; font-weight: 500; color: #ffffff; align-items: center; position: relative; overflow: hidden; padding-right: 20px; img { margin-left: 55px; margin-right: 11px; width: 27px; height: 24px; } .l { width: 203px; height: 203px; background-image: url(../images/l.png); position: absolute; right: -44px; top: -8px; } } .right { width: calc(1400px - 310px); padding: 20px 0; border: 1px solid #cccccc; box-sizing: border-box; border-left: none; ul { display: flex; flex-wrap: wrap; li { width: 180px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; a { color: #3a3a3a; font-size: 20px; line-height: 60px; } } } } } } .doctor-list-ul ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .doctor-list-ul li { height: 254px; background: url("../images/doctorbg.png") no-repeat bottom right; background-size: 16%; background-color: #ffffff; border-bottom: 1px solid #d5d5d5; border-radius: 2px; width: 46%; // box-shadow: 0px 0px 14px 0px rgba(142,142,142,0.09); } .doctor-list-ul li a { padding: 25px; width: 100%; height: 100%; box-sizing: border-box; display: flex; .displayflex(center; ); // padding-right: 250px; } .doctor-img { width: 180px; height: 210px; overflow: hidden; background-size: contain !important; margin-right: 31px; } .doctor-info { flex: 1; } .doctor-info h1 { color: #303030; font-size: 24px; } .doctor-info h1 span { color: #6d6c6c; font-size: @fontSize18; margin-left: 15px; } .doctor-info h2 { color: #212121; height: 30px; line-height: 30px; margin-top: 15px; overflow: hidden; strong{ font-size: 20px; } } .doctor-info h3 { color: #646363; .displaybox(); font-size: 20px; margin-top: 15px; } .doctor-info div p { margin: 0 !important; text-indent: 0 !important; } .doctor-info h4 { width: 86px; height: 34px; text-align: center; line-height: 34px; background: #3170b8; color: @colorfff; font-size: 16px; margin-top: 20px; } /*鍥剧墖鏂伴椈3*/ .newslist3 { overflow: hidden; margin-bottom: 60px; } .newslist3 ul { margin-bottom: 20px; } .newslist3 ul li { width: 97%; margin: 0 auto; overflow: hidden; // height: 160px; padding: 30px 10px; transition: all 0.5s; border-bottom: 1px solid #f0f0f0; } .newslist3 ul li a { height: 170px; .displayflex(space-between; center); padding-right: 150px; background: url("../images/rightbg.png") no-repeat right center; box-sizing: border-box; } .newslist3 .news_pic { width: 254px; height: 170px; overflow: hidden; background-size: cover !important; } .newslist3 .news_font { flex: 1; height: 170px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.3s; margin-left: 50px; margin-right: 30px; } .newslist3 .news_font p { font-size: 14px; line-height: 26px; color: #959393; .displaybox(); } .newslist3 i { display: block; width: 75px; height: 15px; border-bottom: 1px solid #8c8c8c; } .newslist3 h3 { font-size: 20px; line-height: 36px; max-width: 830px; color: #000; /* white-space: nowrap; text-overflow: ellipsis; overflow: hidden; */ color: #202020; transition: all 0.3s; width: 100%; } .news3date h2 { height: 60px; line-height: 60px; font-size: 26px; color: #8c8c8c; display: inline-block; font-weight: bold; } .news3date em { font-size: 14px; color: #8c8c8c; display: inline-block; font-style: normal; font-weight: normal; } .newslist3 ul li:hover { background: #fff; box-shadow: 0 6px 10px rgba(43, 43, 43, 0.2); } .newslist3 ul li:hover h3 { color: #3170b8; } .videolist { min-height: 835px; background: url("../images/videobg.png") no-repeat bottom center; padding-top: 50px; background-size: contain; } .videolist ul { .displayflex(flex-start; stretch; wrap); } .videolist ul li { width: 23.5%; height: 215px; overflow: hidden; margin-right: 1.5%; margin-bottom: 26px; } .videolist ul li:nth-of-type(4n) { margin-right: 0; } .videolist ul li a { display: block; width: 100%; height: 100%; position: relative; } .videolist ul li a::before { position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 10; } .medium-div { width: 100%; height: 100%; background-size: cover !important; position: relative; } .medium-div img { position: absolute; width: 61px; height: 61px; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: 100; } .medium-btm { position: absolute; bottom: 0px; left: 0; width: 100%; height: 30px; z-index: 1000; box-sizing: border-box; } .medium-btm h2 { color: #fff; padding: 0 15px; box-sizing: border-box; width: 100%; height: 30px; font-size: 20px; // line-height: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } // 闂ㄨ瘖 .menzhen-table { width: 100%; border-left: 1px solid #ccc; } .menzhen-table caption { text-align: center; background-color: #22BCAC; color: @colorfff; height: 58px; line-height: 58px; font-size: 20px; font-weight: bold; position: relative; } .menzhen-table caption span { display: inline-block; font-size: 20px; font-weight: normal; position: absolute; right: 0; } .menzhen-table tr td { height: 50px; font-size: 20px; text-align: center; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; color: @colorfff; } .menzhen-table tr td:nth-of-type(2n) { // background-color: #fafafa; } .menzhen-table .trbgone td { background-color: #5996dc; color: #fff; } .menzhen-table .trbgone td:nth-of-type(2n) { background-color: #5996dc; } .menzhen-table tr .bgone { background-color: #5996dc; color: #fff; border-bottom: 1px solid #fff; border-right: 1px solid #fff; } .menzhen-table tr .bgtwo { background-color: #5996dc !important; color: #fff; border-bottom: 1px solid #fff; } .menzhen-table .trbgtwo td { background-color: #3170b8 !important; } .li_te { padding: 5px 0; } .li_te li { position: relative; min-height: 28px; line-height: 28px; } .li_te li a { // height: 35px; display: flex; justify-content: center; align-items: center; overflow: hidden; // line-height: 35px; text-align: center; color: #727272; transition: all 0.3s; } .li_te li a:hover { color: #3170b8; } .footer-btm { background: #3170b8; display: none; } .footer-btm p { height: 60px; line-height: 60px; text-align: center; color: #fff; } .jq22-container { position: relative; height: 780px; overflow: hidden; } .flexslider { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; } .slides { position: relative; z-index: 1; width: 100%; margin: 0 auto; height: 100%; } .slides li { height: 100%; transform: matrix(1, 0, 0, 1, 0, 0); transition: all 500ms linear 0s; } .slides li:hover { transform: matrix(1.05, 0, 0, 1.05, 5.89844, -1.59722); transition: all 500ms linear 0s; } .flexslider .slides li a { background: url(../images/swiperabg.png) no-repeat bottom center; background-repeat: repeat-x; display: block; width: 100%; height: 100%; } .flexslider .slides li .width1400 { position: relative; height: 100%; } .flex-control-nav { position: absolute; bottom: 6%; z-index: 10000; width: 100%; height: 20px; text-align: center; } .flex-control-nav li { display: inline-block; width: 14px; height: 14px; margin: 0 5px; *display: inline; zoom: 1; cursor: pointer; } .flex-control-nav li a { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5); } .flex-control-nav li a.flex-active { background: #fff; color: #fff; } .flex-direction-nav { position: absolute; z-index: 3; width: 100%; top: 45%; } .flex-direction-nav li a:before { font-family: "slick"; line-height: 1; color: #fff; opacity: 0.7; -webkit-font-smoothing: antialiased; content: "鈫 "; } .flex-direction-nav li a { display: block; width: 50px; height: 50px; font-size: 30px; line-height: 50px; text-align: center; overflow: hidden; cursor: pointer; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } .flex-direction-nav li a.flex-prev:before { content: "鈫 "; } .flex-direction-nav li a.flex-prev { left: 40px; } .flex-direction-nav li a.flex-next { right: 40px; } .flex-direction-nav li a:hover { background: rgba(255, 255, 255, 0.8); } .slides .width1200 { height: 100%; position: relative; } .banner_a { display: block; position: absolute; bottom: 13%; left: 0; width: 500px; z-index: 2000; } .banner_a h1 { line-height: 40px; padding: 0; font-size: 26px; color: #fff; font-family: "瀹嬩綋"; font-weight: bold; white-space: inherit; } .swiper-ul ul { /*width: 706px;*/ width: 600px; float: right; height: 116px; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; } .swiper-ul ul li { padding-top: 23px; width: 114px; height: 116px; cursor: pointer; background: #3170b8; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .swiper-ul ul li.liTwo { background: #fff; } .swiper-ul ul li.liTwo i { color: #2d89ec; } .swiper-ul ul li.liTwo h2 { color: #2d89ec; } .swiper-ul ul li a { display: block; } .swiper-ul ul li span { display: block; text-align: center; } .swiper-ul ul li i { text-align: center; color: #fff; font-size: 40px; } .swiper-ul ul li h2 { color: #fff; font-size: 16px; height: 40px; line-height: 40px; text-align: center; } .swiper-div img { display: block; width: 100%; height: 100%; } .swiper-divBlock { display: block; transition: all 0.5s; } .news-container { .displayflex(space-between); margin-top: 30px; } .news-title { .displayflex(space-between; center); height: 65px; margin-bottom: 10px; } .news-title h1 { font-weight: 700; color: #212121; font-size: 32px; width: 50%; } .news-title a { display: block; flex: 1; color: #3170b8; text-align: right; } .news-title a img { margin-left: 5px; } .news-left { width: 904px; } .news-left .swiper1 { width: 904px; height: 492px; } .mySwiper { height: 100%; } .news-left .swiper1 .swiper-slide { text-align: center; font-size: 20px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; a { display: block; width: 100%; height: 100%; img { display: block; width: 100%; height: 100%; object-fit: cover; } p { width: 100%; position: absolute; bottom: 0; left: 0; font-size: 20px; color: #ffffff; line-height: 48px; background-color: rgba(0, 0, 0, 0.3); text-align: left; padding-left: 20px; } } } .news-left .swiper1 .swiper-pagination { text-align: right; padding-right: 20px; } .news-left .swiper1 .swiper-pagination-bullet { background: #fff !important; } .synewslist { overflow: hidden; padding: 0 18px; padding-top: 25px; height: 245px; background-color: #fff; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%); padding-bottom: 20px; } .synewslist ul li { display: block; height: 40px; line-height: 40px; } .synewslist ul li a { display: block; width: 100%; height: 100%; } .synewslist ul li a em { display: block; font-style: normal; font-weight: normal; width: 5px; height: 5px; border-radius: 50%; background: #3170b8; float: left; margin-right: 10px; margin-top: 15px; } .synewslist ul li a h1 { font-size: 16px; color: #323232; width: 560px; float: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: 40px; line-height: 40px; } .synewslist ul li a span { height: 40px; line-height: 40px; width: 105px; float: right; font-size: 14px; text-align: right; color: #acacac; overflow: hidden; } .synewslist ul li:hover a h1 { color: #3170b8; } .synewslist-more { display: block; position: absolute; top: 30px; right: 0; color: #3170b8; font-size: 14px; height: 40px; line-height: 40px; } .synewslist-more:hover { text-decoration: underline; } .news-right { width: 420px; .news-list { width: 100%; background: #f7f7f7; opacity: 0.9; padding: 10px 28px; box-sizing: border-box; margin-bottom: 33px; ul { li { margin-bottom: 10px; a { h4 { font-size: 14px; color: #204f9f; line-height: 35px; } p { font-size: 16px; color: #333333; line-height: 26px; } } } } } .news-title { h4 { font-size: 32px; font-weight: bold; color: #212121; } } .swiper2 { width: 416px; height: 233px; .swiper { .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: ""; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: ""; } .swiper-button-next { width: 61px; height: 61px; background-image: url(../images/leftright.png); background-size: cover; background-repeat: no-repeat; } .swiper-button-prev { width: 61px; height: 61px; background-image: url(../images/leftright.png); background-size: cover; transform: rotate(-180deg); background-repeat: no-repeat; } .swiper-pagination-bullet { border-radius: 0; border: 1px solid #fff; background: transparent; } .swiper-pagination-bullet-active { background-color: #fff; } } .swiper-slide { text-align: center; font-size: 20px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide a { display: block; width: 100%; height: 100%; img { display: block; width: 416px; object-fit: contain; } } } } .news-title ul { .displayflex(start; center); } .news-title ul li { opacity: 0.75; font-size: 28px; color: #212121; margin-right: 30px; cursor: pointer; } .news-title ul li.li_on { font-weight: 700; color: #212121; font-size: 32px; } .news-title { position: relative; } .news-title .icon { position: absolute; top: 0.35rem; left: 50%; transform: translate(-50%, -50%); width: 0.1rem; height: 0.1rem; border-radius: 0.05rem; background-color: #0e3a76; } .news-zhibo { padding: 70px 0 58px; box-sizing: border-box; .title { display: flex; justify-content: center; margin-bottom: 60px; h1 { font-size: 32px; font-weight: bold; color: #ffffff; line-height: 45px; cursor: pointer; } .active { font-size: 36px; } span { margin: 0 10px; font-size: 32px; font-weight: bold; color: #ffffff; line-height: 48px; } } #boxOne { display: flex; } ul { display: none; width: 100%; // display: flex; flex-wrap: nowrap; li { width: 330px; margin-right: 26px; height: 190px; margin-bottom: 50px; position: relative; &:last-child { margin-right: 0; } a { width: 100%; height: 100%; display: block; img { width: 100%; height: 100%; object-fit: cover; margin-bottom: 25px; } .stop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 53px; height: 53px; background-image: url(../images/stop.png); background-repeat: no-repeat; background-size: cover; } text-align: center; font-size: 16px; color: #ffffff; } } } .more { display: block; margin: 57px auto 0; width: 211px; height: 55px; border: 1px solid #fff; border-radius: 27px; color: #fff; line-height: 55px; display: flex; justify-content: center; align-items: center; img { width: 20px; height: 16px; margin-left: 12px; } } } .news-meiti { .more { width: 211px; height: 55px; border: 1px solid #3170b8; border-radius: 27px; line-height: 55px; color: #3170b8; font-size: 20px; margin: 60px auto; display: flex; justify-content: center; align-items: center; img { margin-left: 15px; } } h1 { font-size: 34px; font-weight: bold; color: #212121; margin-top: 70px; margin-bottom: 50px; text-align: center; } .aside { display: flex; } .shipin { margin-right: 20px; width: 410px; padding: 32px 0; box-sizing: border-box; background-image: url(../images/bolang.jpg); background-size: cover; .sph { display: block; position: relative; background: rgba(0, 0, 0, 0.3); z-index: 99; .pic { width: 100% !important; height: auto !important; } .stop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; img { width: 68px; height: 68px; } } } .text { margin-top: 32px; display: flex; align-items: center; justify-content: space-around; h4 { font-size: 20px; font-weight: bold; color: #ffffff; width: 60px; overflow: hidden; height: 25px; } span { width: 1px; height: 48px; background: #ffffff; opacity: 0.5; } p { width: 279px; font-size: 16px; color: #ffffff; line-height: 28px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } } } .content { flex: 1; ul { display: flex; flex-wrap: wrap; li { width: 48%; margin-right: 2%; border: 1px solid #3170b8; box-sizing: border-box; padding: 30px; background: url(../images/media-logo.png) no-repeat right bottom; margin-bottom: 22px; &:nth-child(2n) { margin-right: 0; } &:nth-last-child(-n + 2) { margin-bottom: 0; } a { font-size: 20px; h4 { color: #134a99; } p { line-height: 24px; margin-top: 10px; color: #111111; font-size: 16px; text-align: left !important; } } } } } } .browsing { background-color: #fff; background-size: contain; background-repeat: no-repeat; padding: 60px 0; box-sizing: border-box; h1 { font-size: 34px; font-weight: bold; color: #212121; text-align: center; margin-bottom: 60px; } ul { display: flex; flex-wrap: wrap; li { width: 25%; background: #ffffff; box-shadow: 0px 12px 77px 2px rgba(122, 122, 122, 0.33); box-sizing: border-box; img { } a { display: block; padding: 80px 46px; box-sizing: border-box; h1 { font-size: 22px; font-weight: bold; color: #3170b8; margin-bottom: 20px; } p { font-size: 16px; color: #2b2b2b; line-height: 32px; } } } } } // 涓撳璇︽儏椤 .expertdetail { .displayflex(space-between); margin: 50px auto; } .expertdetail-left { width: 350px; min-height: 800px; margin-right: 65px; background-color: rgb( 52,113,182); // background: url("../images/doctorbg.jpg") no-repeat center; background-size: cover; } .expertdetail-right { flex: 1; } .expertdetail-img { width: 100%; height: 100%; background-color: rgb( 52,113,182); // background: url("../images/doctorlogo.png") no-repeat left bottom; background: url("../images/doctorlogo.png") no-repeat left bottom; padding-top: 46px; box-sizing: border-box; } .expert-img { width: 255px; height: 350px; overflow: hidden; margin: 0 auto; margin-bottom: 50px; } .expert-img img { width: 100%; } .exdetailcon h1 { text-align: center; font-size: 30px; color: #fff; font-weight: 700; } .exdetailcon span { display: none; width: 30px; height: 3px; background: #ffffff; margin: 30px auto; } .exdetailcon h3 { font-size: 20px; color: #fff; text-align: center; margin-top: 30px; } .expertdetail-div { padding: 30px 0; border-top: 1px solid #ccc; font-size: 20px; color: #6f6f6f; .title { margin-bottom: 30px; font-size: 20px; color: #6f6f6f; h4 { font-size: 24px; color: #3170b8; font-weight: bold; margin-bottom: 5px; } p { font-size: 20px; color: #6f6f6f; span{ font-size: 20px; color: #6f6f6f; line-height: auto !important; } } } .bg-gray { width: 100%; padding: 28px 35px; color: #5a5a5a; font-size: 20px; box-sizing: border-box; background-color: #f5f5f5; h3 { color: #5a5a5a; font-size: 24px; font-weight: bold; } p { color: #5a5a5a; font-size: 20px; font{ font-size: 20px; } span{ font-size: 20px; } strong{ font-size:20px } } } .table-title { margin-top: 65px; display: flex; flex-direction: column; align-items: center; h3 { margin-bottom: 20px; font-weight: bold; font-size: 24px; color: #5a5a5a; text-align: center; } table { tbody { tr { td { font-size: 20px; i { display: inline-block; width: 19px; background-color: #f79559; border-radius: 50%; height: 19px; } } } } } } } .expertdetail-div:first-child { padding: 10px 0; } .expertdetail-div h1 { font-size: 26px; color: #3170b8; font-weight: 700; height: 50px; line-height: 50px; margin-bottom: 20px; } .expertdetail-div h2 { font-size: 24px; color: #3170b8; font-weight: bold; margin-bottom: 5px; } .expertdetail-content { margin-bottom: 30px; font-size: 20px; color: #6f6f6f; } .expertdetail-content p { font-size: 16px; color: #434343; line-height: 30px; } .expertdetail-div > h3 { color: #3f3f3f; padding: 25px; background: #ededed; line-height: 30px; margin: 25px 0; margin-top: 50px; font-size: 16px; } .expertdetail-ul { .displayflex(space-between; center; wrap); } .expertdetail-ul li { width: 50%; position: relative; padding-left: 10px; height: 25px; line-height: 25px; } .expertdetail-ul li::before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: #7d36c1; left: 0; top: 10px; } .expertdetail-div p { margin-bottom: 30px; font-size: 20px; color: #6f6f6f; } // 闂ㄨ瘖 .menzhenzjlist { background-color: #ededed; min-height: 800px; margin-top: 30px; display: none; } .menzhenzjlist ul { padding: 10px; box-sizing: border-box; } .menzhenzjlist li { border: 1px solid #ededed; overflow: hidden; } .menzhenzjlist li.mz-active { border: 1px solid #2e5197; } .menzhenzj-title { height: 60px; line-height: 60px; overflow: hidden; background-color: #fff; padding: 0 5px; box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .menzhenzj-title h1 { display: inline-block; vertical-align: middle; height: 60px; line-height: 60px; overflow: hidden; font-size: 16px; background: url(../images/dot.png) no-repeat center left; background-size: 7%; padding-left: 30px; width: 70%; } .menzhenzj-title span { width: 20%; height: 60px; display: inline-block; vertical-align: middle; background: url(../images/kai.png) no-repeat center; background-size: contain; } .menzhenzj-title span.mzclick { background: url(../images/guan.png) no-repeat center; background-size: contain; } .menzhenzj-content { height: 0; overflow-y: auto; background: #ededed; animation: mymoveq 0.5s; } .menzhenzj-content2 { height: auto; min-height: 180px; animation: zjmoveaa 0.5s; padding-bottom: 20px; padding-right: 5px; } @keyframes zjmoveaa { from { height: 0; } to { height: auto; } } .menzhenzj-content p { min-height: 30px; display: flex; flex-direction: row; flex-wrap: nowrap; } .menzhenzj-content label { height: 30px; text-align: right; width: 40%; color: #999999; } .menzhenzj-content span { flex: 1; } .menzhenke { height: 60px; line-height: 60px; overflow: hidden; background-color: #2e5197; padding-left: 10px; box-sizing: border-box; } .menzhenke h1 { display: inline-block; vertical-align: middle; height: 60px; line-height: 60px; overflow: hidden; font-size: 16px; background: url(../images/dot3.png) no-repeat center left; background-size: 7%; padding-left: 30px; width: 70%; color: #fff; } .menzhenke span { width: 20%; height: 60px; display: inline-block; vertical-align: middle; background: url(../images/kai.png) no-repeat center; background-size: contain; } .menzhenke span.mzclick { background: url(../images/guan.png) no-repeat center; background-size: contain; } .mzketime { padding: 0 25px; overflow: hidden; padding-top: 20px; } .mzketime table tr td { color: #747474; height: 40px; padding: 0 10px; } .mzulth ul li { width: 33.33%; font-size: 16px; color: #2e5197; border: none; border-bottom: 1px solid #2e5197; height: 50px; line-height: 50px; float: left; background: none; } .mzultd ul { margin-bottom: 10px; overflow: hidden; width: 33.33%; float: left; margin-top: 10px; padding: 10px 0; } .mzultd ul li { font-size: 16px; color: #747474; line-height: 35px; background: none; border: none; } .mzultd ul li a { display: block; color: #333; padding: 0; line-height: 35px; } .mzultd ul li a img { width: 20px; margin-right: 3px; margin-top: -2px; } .mzultd ul li em { color: #2e5197; } .newslist-read { width: 1400px; margin: 0 auto; ul { display: flex; flex-wrap: wrap; justify-content: space-between; li { margin-bottom: 30px; a { display: block; position: relative; z-index: 1; width: 100%; height: 100%; transition: all 0.5s; &:hover { div { box-shadow: 16px 10px 20px -9px rgba(0, 0, 0, 0.5); box-sizing: border-box; display: flex; transition: all 0.5s; } } img { width: 255px; height: 350px; object-fit: cover; } div { transition: all 0.5s; display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; color: #fff; z-index: 2; background-color: rgba(0, 0, 0, 0.75); text-align: center; flex-wrap: wrap; flex-direction: column; justify-content: center; h4 { font-size: 30px; } p { margin-top: 20px; font-size: 16px; line-height: 24px; text-decoration: underline; } } } } } } .jieshaoList { background-image: url(../images/jieshaobg.jpg); background-repeat: no-repeat; background-size: cover; background-position: top center; max-width: 1400px; ul { display: flex; // flex-wrap: wrap; justify-content: center; padding: 50px 40px 30px; box-sizing: border-box; li { &:first-child{ width: 17%; } &:last-child{ width: 33%; } width: 25%; padding: 0 10px; box-sizing: border-box; display: flex; // justify-content: center; margin-bottom: 20px; box-sizing: border-box; align-items: center; img { margin-right: 20px; } .list-content { color: #fff; h2 { font-size: 20px; font-weight: bold; } p { margin-top: 5px; color: #b9c0c4; font-size: 16px; } } } } } .flexs { display: flex; } @media screen and (max-width: 768px) { .flexs { display: block; } .jieshaoList { ul { padding: 0.1rem; li { width: 50%; margin-bottom: 0.2rem; img { margin-right: 0.2rem; width: 50px; } .list-content { h2 { font-size: 14px; } p { font-size: 12px; line-height: 24px; } } } } } } @media screen and (max-width: 1399px) { } @media screen and (max-width: 768px) { } .zjsanji ul { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; } .zjsanji ul li { color: #8e8f8e; min-width: 79px; height: 30px; line-height: 30px; border-radius: 15px; border: 1px solid #8e8f8e; padding: 0 10px; margin: 8px; text-align: center; cursor: pointer; transition: all 0.3s; } .zjsanji ul li a { display: block; height: 30px; line-height: 30px; color: #333; } .zjsanji ul li.zjactive { background: #315da8; color: #ffffff; border: 1px solid #fff; } .zjsanji ul li.zjactive a { color: #ffffff; } .zjsanji ul li:hover { background: #315da8; color: #ffffff; border: 1px solid #fff; } .zjsanji ul li:hover a { color: #ffffff; } .sysearch { position: fixed; top: 150px; height: 50px; z-index: 10000; display: none; animation: mymove 1s; -webkit-animation: mymove 1s; width: 100%; } @keyframes mymove { from { top: 0px; } to { top: 150px; } } @-webkit-keyframes mymove { from { top: 0px; } to { top: 150px; } } .sysearch-main { width: 500px; height: 50px; background: rgba(0, 0, 0, 0.3); margin: 0 auto; border-radius: 25px; } .sysearch-main input { padding: 0 30px; width: 350px; float: left; height: 50px; border: none; border-radius: 25px; font-size: 16px; background: none; color: #fff; } .sysearch-main input::-webkit-input-placeholder { color: #fff; font-size: 16px; } .sysearch-main span { display: block; width: 80px; float: right; height: 50px; cursor: pointer; text-align: center; line-height: 50px; } .sysearch-main button { display: block; width: 80px; float: right; height: 50px; cursor: pointer; text-align: center; line-height: 50px; border: none; background: none; } .sysearch-main span i { line-height: 50px; color: rgba(255, 255, 255, 0.6); font-size: 20px; } .monewslist { overflow: hidden; max-width: 1400px; margin: 0 auto; ul.row_one { overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; li { width: 48%; padding: 20px 0; box-sizing: border-box; overflow: hidden; border-bottom: 1px solid #ddd; transition: all 0.3s; /* &:nth-child(even) { margin-left: 50px; } */ &:hover { border-bottom: 1px solid #2d89ec; a { p { color: #004ea2; transform: translateX(10px); font-weight: bold; } } } a { display: flex; align-items: center; height: 75px; overflow: hidden; span { display: inline-block; vertical-align: middle; width: 73px; height: 73px; font-size: 20px; transition: all 0.3s; border: 1px solid #004ea2; } h5 { font-size: 28px; height: 50px; color: #fff; line-height: 50px; background-color: #004ea2; text-align: center; } h6 { font-size: 14px; text-align: center; height: 23px; line-height: 23px; color: #004ea2; } p { flex: 1; margin-left: 35px; font-size: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #727272; transition: all 0.3s; } .row_one_right { width: 30px; float: right; line-height: 75px; text-align: center; transition: all 0.2s; img { width: 30px; } } } } } } .tab_table { border-top: 1px solid #3170b8; border-left: 1px solid #3170b8; box-sizing: border-box; margin: 20px auto; } .tab_table th { background-color: #f6f6f6; font-size: 24px; font-weight: normal; color: #3170b8; border-bottom: 1px solid #3170b8; text-align: center; } .tab_table td { border-right: 1px solid #3170b8; border-bottom: 1px solid #3170b8; box-sizing: border-box; height: 40px; line-height: 40px; } .tab_table td ul { width: 100%; padding: 20px 30px; padding-bottom: 10px; overflow: hidden; box-sizing: border-box; grid-template-columns: repeat(4, minmax(0, 1fr)); display: grid; gap: 10px; } .tab_table td ul li { // float: left; // width: 234px; /* height: 32px; line-height: 32px; */ // margin-right: 20px; margin-bottom: 10px; padding: 5px; box-sizing: border-box; } .tab_table td ul li a { display: block; // width: 232px; display: flex; overflow: hidden; line-height: 32px; color: #727272; transition: all 0.3s; font-size: 20px; } .tab_table td ul li:hover { background-color: #3170b8; } .tab_table td ul li:hover a { color: #fff; } .section-js { .displayflex(); min-height: 160px; background-color: #f2f2f2; padding: 35px; box-sizing: border-box; } .section-js-left { width: 12%; padding-top: 20px; } .section-js-left h1 { font-size: 20px; font-weight: bold; letter-spacing: -0.4px; } .section-js-left h2 { font-size: 30px; color: #000000; font-weight: bold; margin-top: 15px; line-height: 35px; } .section-js-left h3{ font-size: 24px; color: #000000; font-weight: bold; margin-top: 15px; margin-left: -27px; } .section-js-right { flex: 1; font-size: 18px; } .section-js-right p { text-indent: 0px !important; color: #5d5d5d; letter-spacing: -0.32px; text-align: left; font-size: 18px; } .section-js-model { margin: 40px auto; font-size: 18px; line-height: 30px; } .section-js-model h1 { position: relative; font-size: 20px; font-weight: bold; text-align: left; color: #000000; letter-spacing: -0.4px; padding-left: 20px; height: 30px; line-height: 30px; margin-bottom: 20px; } .section-js-model h1::before { position: absolute; content: ""; top: 0; left: 0; width: 5px; height: 30px; background: #ff7e00; } .section-js-model h1 span { color: #8c8c8c; } .section-js-model p { line-height: 30px; font-size: 18px; font-weight: 400; text-align: left; color: #5d5d5d; letter-spacing: -0.32px; text-indent: 0px !important; } /* 浠庡ご澶嶅埗鍒扮粨灏 */ .bg-img-size-nor-center { background-size: cover; background-repeat: no-repeat; background-position: top center; } /* ks-search */ .ks-search { width: 1400px; margin: 0 auto; position: relative; padding: 20px 0; box-sizing: border-box; .bg-img-size-nor-center(); .top-search { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; h1 { width: 95px; font-size: 22px; font-weight: 500; color: #3170b8; margin-right: 20px; } input { flex: 1; padding-left: 36px; box-sizing: border-box; font-size: 20px; height: 60px; background: #ffffff; border: 1px solid #dddddd; // border-radius: 30px; border-bottom-left-radius: 30px; border-top-left-radius: 30px; } a { display: block; width: 170px; height: 60px; background: #0155c8; border-radius: 0px 29px 29px 0px; font-size: 20px; color: #ffffff; line-height: 60px; text-align: center; } } .bottom-search { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); div { background-color: #0155c8; padding: 57px 50px 0; box-sizing: border-box; font-size: 16px; color: #ffffff; line-height: 36px; h4 { font-size: 22px; font-weight: 500; color: #ffffff; } span.borders { display: block; width: 30px; margin: 15px 0; height: 4px; background: #ffbb04; } a { display: inline-block; font-size: 16px; color: #ffffff; line-height: 36px; transition: all 0.5s; margin: 0 5px; &:hover { color: #ffbb04; transition: all 0.5s; } } &:nth-child(1) { height: 640px; grid-column-start: 0; grid-column-end: 2; grid-row-start: 1; grid-row-end: 5; background-image: url(../images/001.png); background-size: cover; background-repeat: no-repeat; } &:nth-child(2) { background-image: url(../images/002.jpg); background-size: cover; background-repeat: no-repeat; } &:nth-child(3) { background-image: url(../images/003.jpg); background-size: cover; background-repeat: no-repeat; } &:nth-child(4) { background-image: url(../images/004.png); background-size: cover; background-repeat: no-repeat; } &:nth-child(5) { background-image: url(../images/005.png); background-size: cover; background-repeat: no-repeat; } } } } /* search-content */ .search-content { width: 1400px; margin: 50px auto; padding: 103px 0 100px 70px; box-sizing: border-box; background-image: url(../images/searchjcontent.jpg); background-size: cover; background-repeat: no-repeat; border: 1px solid #1d6ddc; .content-box { width: 50%; h1 { font-size: 32px; font-weight: bold; color: #0455b6; line-height: 32px; } .borders { width: 100%; height: 1px; background: #333333; opacity: 0.3; margin: 27px 0 25px; } p { font-size: 16px; font-weight: 400; color: #343434; line-height: 26px; margin-bottom: 44px; } ul { display: flex; flex-wrap: wrap; li { padding: 15px 25px; margin-bottom: 13px; box-sizing: border-box; margin-right: 13px; background: #0960c7; a { display: block; width: 100%; height: 100%; color: #fff; } } } } } .auto-container ul { .displayflex(space-between); margin-top: 70px; } .auto-container ul li { width: 420px; height: 390px; border: 15px solid #fff; box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1); } .auto-container ul li a { display: block; overflow: hidden; } .auto-container ul li a img { width: 100%; } .search-ul{ list-style-type: none; display: flex; justify-content: center; margin: 50px auto; li{ display: flex; cursor: pointer; justify-content: center; align-items: center; margin-right: 3px; width: 50px; height: 50px; border: 1px solid #ccc; box-sizing: border-box; font-size: 20px; &:hover{ transition: all .3s; background-color: #004ea2; border: 1px solid #004ea2; color: #fff; } } .active{ background-color: #004ea2; border: 1px solid #004ea2; color: #fff; } }