@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; } body { max-width: 1920px; margin: 0 auto; overflow-x: hidden; } a { text-decoration: none; } .index_container .sytopheader { width: 100%; position: relative; height: 892px; background: url('/static/english/images/Banner.png') no-repeat top center; background-size: cover !important; padding-top: 57px; box-sizing: border-box; z-index: 1000; overflow: hidden; } .index_container .sytopheader .logo { width: 543px; height: 78px; background-image: url(/static/english/images/logo2.png?v=3); background-size: contain; background-repeat: no-repeat; margin: 0 auto; } .index_container .sytopheader .banner-ul { height: 710px; margin: 0 auto; position: relative; } .index_container .sytopheader .banner-ul ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } .index_container .sytopheader .banner-ul li { width: 24.3%; // height: 360px; background: rgba(0, 0, 0, 0.35); padding-top: 50px; box-sizing: border-box; padding-bottom: 20px; } // .index_container .sytopheader .banner-ul li:first-child p{ // font-size: 16px; // } .banner-icon { width: 60px; height: 60px; margin: 0 auto; overflow: hidden; text-align: center; } .banner-icon img { max-width: 100%; max-height: 100%; } .banner-ul li h1 { text-align: center; color: #fff; font-size: 30px; height: 56px; line-height: 56px; overflow: hidden; margin-top: 10px; } .banner-ul li P { opacity: 0.85; font-size: 18px; line-height: 28px; color: #fff; width: 300px; margin: 0 auto; margin-top: 20px; // max-height: 140px; overflow: hidden; } .header-text { width: 70%; margin: 90px auto; margin-bottom: 70px; } .header-text h1 { text-align: center; color: @colorfff; font-size: 54px; height: 50px; line-height: 50px; } .header-text p { text-align: center; font-size: 20px; color: @colorfff; line-height: 34px; margin-top: 20px; } // 欧洲杯滚球平台:我们 .aboutus-container { height: 710px; background: url('/static/english/images/aboutusbg.jpg') no-repeat center; background-size: cover !important; padding-top: 100px; box-sizing: border-box; } .container-title h1 { text-align: center; color: #333333; line-height: 48px; letter-spacing: -1.84px; font-size: 46px; margin-bottom: 50px; } .container-title h2 { color: #222222; line-height: 34px; letter-spacing: -0.4px; font-size: 20px; .displaybox(3); height: 102px; text-align: center; } .aboutus-content { height: 300px; .displayflex(); margin-top: 50px; } .aboutus-div { width: 50%; background: url('/static/english/images/aboutusimg1.jpg') no-repeat center; background-size: cover !important; } .aboutus-div:nth-child(2) { background: url('/static/english/images/aboutusimg2.jpg') no-repeat center; } .aboutus-div a { display: block; padding-top: 60px; box-sizing: border-box; transition: all 0.3s; } .aboutus-div a h1 { text-align: center; font-size: 26px; color: @colorfff; height: 50px; line-height: 50px; } .aboutus-div a h2 { font-size: 20px; text-align: center; color: #ffffff; line-height: 28px; letter-spacing: -0.4px; height: 56px; overflow: hidden; margin-bottom: 20px; } .aboutus-div a span { display: block; width: 170px; height: 48px; border: 1px solid #fff; border-radius: 25px; line-height: 48px; margin: 0 auto; color: @colorfff; text-align: center; font-size: 18px; transition: all 0.3s; } .aboutus-div a:hover span { background: @colorfff; color: #014f99; } .education-container { // height: 600px; // background: url('/static/english/images/edu.jpg') no-repeat bottom center; // background-size: contain !important; position: relative; } .education-container img { width: 100% } .education-main { .displayflex(space-between); position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .education-div { width: 33.33%; padding-top: 8%; box-sizing: border-box; position: relative; } .education-div h1 a{ display: block; text-align: center; color: @colorfff; font-size: 40px; line-height: 70px; height: 70px; overflow: hidden; } .education-icon { position: absolute; bottom: 0; right: 0; width: 320px; height: 50%; overflow: hidden; } .education-icon a { display: block; width: 100%; height: 100%; text-align: center; background: url('/static/english/images/dep.png') no-repeat center; background-size: cover !important; color: @colorfff; font-size: 26px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .education-div:nth-child(2) { padding-top: 13%; } .education-div a.edu-more { display: block; width: 230px; height: 56px; line-height: 56px; margin: 0 auto; color: #fff; text-align: center; font-size: 18px; background: #b10000; border-radius: 28px; margin-top: 30px; } .education-block { position: absolute; height: 50%; bottom: 0; left: 0; width: 100%; } .education-block { width: 100%; } .block-div { width: 50%; height: 100%; background: rgba(171, 135, 80, 0.88); float: left; display: flex; align-items: center; } .block-div:nth-child(2) { background: rgba(163, 0, 0, 0.85); } .block-div a { display: block; width: 100%; padding: 0px 10%; color: @colorfff; font-size: 26px; line-height: 38px; box-sizing: border-box; } // 新闻 .news-container { height: 873px; background: url('/static/english/images/newsbg.jpg') top center; background-repeat: repeat-x; } .news-main { .displayflex(space-between); padding-top: 84px; } .news-left { width: 830px; margin-right: 100px; } .news-right { flex: 1; height: 700px; background: url('/static/english/images/newsrightbg.jpg') no-repeat top center; background-size: cover !important; padding: 0 28px; box-sizing: border-box; overflow: hidden; } .news-main .container-title h1 { text-align: left; width: 100%; } .container-title h1 a { display: block; width: 170px; height: 48px; border: 1px solid #003277; border-radius: 25px; float: right; font-size: 16px; color: #014f99; text-align: center; } .news-list { padding-top: 50px; } .news-list ul li { border-bottom: 1px solid #ccc; } .news-list ul li a { display: block; padding: 20px 0; } .news-list ul li a h1 { font-size: 22px; color: #333333; line-height: 38px; height: 38px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .news-list ul li a h2 { .displaybox(); color: #333333; line-height: 22px; opacity: 0.9; font-size: 16px; margin: 10px auto; } .news-list ul li a h3 { color: #014fa6; font-size: 16px; height: 30px; line-height: 30px; } .news-title h1 { text-align: center; color: @colorfff; font-size: 34px; height: 120px; line-height: 120px; } .news-swiper { width: 100%; height: 530px; padding: 41px 0; box-sizing: border-box; overflow: hidden; } .news-right .swiper1 { width: 100%; height: 530px; } .news-right .swiper1 a { display: block; width: 100%; height: 100% !important; background-size: cover !important; } .news-right .swiper1 p { .displaybox(3); width: 100%; font-size: 20px; color: @colorfff; line-height: 36px; height: 132px; text-align: left; padding: 15px 30px; box-sizing: border-box; margin-top: 10px; } .news-img { width: 100%; height: 280px; overflow: hidden; background-size: contain !important; background-position: center !important; background-color: #fff !important; } .news-right .swiper-pagination { bottom: 50px; } .news-right .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.5); opacity: 1; } .news-right .swiper-pagination-bullet-active { background: rgba(255, 255, 255, 0.9); } .mySwiper { height: 100%; } // .service-container { background: url('/static/english/images/service.jpg') no-repeat center; height: 667px; background-size: cover !important; padding-top: 100px; box-sizing: border-box; } .service-container .container-title h1 { color: @colorfff; margin-bottom: 30px; } .service-container .container-title h2 { color: @colorfff; } .service-mian ul { .displayflex(); } .service-mian ul li { width: 33.33%; height: 320px; background: #ae0000; } .service-mian ul li:nth-child(2) { background: #a38352; } .service-mian ul li:nth-child(3) { background: #074aa7; } .service-mian ul li a { display: block; width: 100%; height: 100%; padding-top: 90px; box-sizing: border-box; } .service-mian h3 { text-align: center; color: @colorfff; font-size: 26px; margin-top: 30px; } .service-icon { width: 75px; height: 75px; margin: 0 auto; text-align: center; line-height: 75px; } .service-icon img { max-width: 100%; max-height: 100%; } .address-container { height: 717px; background: url('/static/english/images/address3.jpg') no-repeat center; background-size: cover !important; border-top: 60px solid #fff; border-bottom: 60px solid #fff; } .footer { height: 422px; background: #013277; } .footer-top { height: 350px; border-bottom: 1px solid #16498f; } .footer-top .width1400 { .displayflex(space-between); height: 100%; } .footer-logo { width: 374px; border-right: 1px solid #16498f; height: 100%; padding-top: 155px; padding-right: 30px; box-sizing: border-box; } .footer-logo h1 { color: @colorfff; font-size: 22px; line-height: 32px; } .footer-logo h1 { padding-left: 75px; background: url('/static/english/images/btmlogo.png') no-repeat top left; background-size: contain !important; } .footer-link { // border-right: 1px solid #16498f; height: 100%; padding-top: 70px; padding-left: 60px; box-sizing: border-box; width: 770px; } .footer-link h1 { opacity: 0.95; font-size: 22px; color: #ffffff; line-height: 40px; height: 40px; text-align: left; } .footer-follow { flex: 1; padding-top: 70px; padding-left: 60px; box-sizing: border-box; } .footer-follow h1 { display: none; } .footer-follow ul { display: none; } .footer-link ul { .displayflex(space-between; stretch; wrap); margin-top: 20px; } .footer-link ul li { width: 50%; } .footer-link ul li a { display: block; width: 100%; padding-left: 30px; background: url('/static/english/images/jiantou.png') no-repeat center left; box-sizing: border-box; opacity: 0.45; font-size: 16px; color: #ffffff; line-height: 40px; height: 40px; overflow: hidden; transition: all 0.3s; } .footer-link ul li a:hover { opacity: 1; } .footer-follow h1 { opacity: 0.95; font-size: 22px; color: #ffffff; line-height: 40px; height: 40px; text-align: left; } .footer-btm h1 { text-align: center; font-size: 16px; text-align: center; color: #899fbe; height: 68px; line-height: 68px; } .footer-follow ul { margin-top: 20px; } .footer-follow ul li { width: 25px; float: left; margin: 0 10px; } .footer-follow ul li img { max-width: 100%; } // 内页banner #neibanner { width: 100%; height: 580px; background-size: cover !important; position: relative; } .neibanner-title { position: absolute; left: 0%; bottom: 20px; width: 100%; } .neibanner-title h1 { font-size: 80px; color: @colorfff; text-align: left; margin-bottom: 10px; text-shadow: 0px 7px 4px 0px rgba(0, 0, 0, 0.25); } .neibanner-title h2 { font-size: 30px; color: @colorfff; text-align: center; } .body-content { min-height: 600px; } /*二级导航*/ .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: 50%; max-width: 80%; float: left; } .zyfeilei ul li { margin: 0 4px; min-width: 14%; } .zyfeilei ul li a { padding: 0 5px; display: block; height: 70px; text-align: center; line-height: 70px; transition: all 0.3s; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .zyfeilei ul li:hover>a { background: #003277; color: #fff; } .zyfeilei ul li.li_on a { background: #003277; color: #fff; } .newactive { overflow: hidden; flex: 1; float: right; } .newactive h3 { line-height: 70px; font-size: 22px; overflow: hidden; font-weight: normal; color: #003277; text-align: right; } /* 文字列表 */ .newslistthree { overflow: hidden; } .newslistthree ul { overflow: hidden; } .newslistthree li { width: 45%; padding: 0; overflow: hidden; margin: 10px 0; height: 180px; float: left; /* margin-right: 80px; */ transition: all 0.3s; } .newslistthree li:nth-of-type(2n) { margin-right: 0px; float: right; } .newslistthree li a { display: block; height: 150px; width: 100%; overflow: hidden; } .newslistthree li a span { line-height: 20px; font-size: 12px; display: block; width: 100%; color: #999; } .newslistthree li a h3 { line-height: 50px; font-size: 16px; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; height: 50px; position: relative; width: 100%; color: #000; transition: all 0.3s; border-bottom: 1px solid #F0F0F0; } .newslistthree li:hover a h3 { color: #225ca5; } .newslistthree li a h3 i { display: block; width: 15px; height: 1px; position: absolute; z-index: 999; bottom: 0; left: 0; background-color: #000; transition: all 0.3s; } .newslistthree li:hover a h3 i { width: 100%; } .newslistthree li a p { line-height: 25px; font-size: 14px; height: 50px; width: 100%; margin: 10px 0; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* 新闻内容页 */ .content-title { margin: 0 auto; 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; margin: 15px 0; font-size: 14px; width: 100%; margin: 0 auto; } .content-main p { color: #484848 !important; line-height: 30px; margin: 15px 0; font-size: 16px !important; text-align: justify; } .content-main p span{ color: #484848 !important; font-size: 16px !important; } .content-main img { width: auto; max-width: 100%; display: block; margin: 0 auto; } /*分页*/ .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: #b2874b 1px solid; background: #b2874b; padding: 5px 10px; color: #fff; text-decoration: none; margin: 2px; } .black2 span.current { border: #b2874b 1px solid; background: #b2874b; 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; } /*图片新闻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: 160px; .displayflex(space-between; center); } .newslist3 .news_pic { width: 225px; height: 152px; overflow: hidden; background-size: cover !important; } .newslist3 .news_font { flex: 1; height: 160px; transition: all 0.3s; margin-left: 50px; margin-right: 30px; } .newslist3 .news_font p { font-size: 14px; height: 52px; line-height: 26px; color: #959393; .displaybox(); } .newslist3 i { display: block; width: 75px; height: 15px; border-bottom: 1px solid #8c8c8c; } .newslist3 h3 { font-size: 16px; height: 50px; line-height: 50px; 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; } .news3more { width: 110px; height: 35px; border: 1px solid #eeeeee; line-height: 35px; text-align: center; margin-top: 50px; transition: all 0.5s; color: #666; } .newslist3 ul li:hover .news3more { border: 1px solid #003277; color: #003277; } .newslist3 ul li:hover { background: #fff; box-shadow: 0 6px 16px rgba(43, 43, 43, 0.2); } .newslist3 ul li:hover h3 { color: #003277; } // 新闻列表 .newslist-two ul { .displayflex(space-between; stretch; wrap); } .newslist-two ul li { width: 47%; height: 110px; background: #f8f8f8; margin-bottom: 32px; } .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: 110px; background: #fff7e9; margin-right: 35px; .displayflex(center; center; wrap); font-size: 30px; font-weight: bold; color: #1a1a1a; line-height: 26px; text-align: center; padding: 20px 0; box-sizing: border-box; } .newslist-two ul li a h2 span { width: 100%; font-size: 16px; color: #c7c7c7; 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.4%; min-height: 130px; background: #ffffff; box-shadow: 0px 0px 16px 0px rgba(103, 103, 103, 0.22); margin-bottom: 30px; margin-right: 2%; } .sectionlist ul li:nth-of-type(4n) { margin-right: 0; } .sectionlist ul li a { .displayflex(space-between); 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; } .section-icon { width: 81px; overflow: hidden; margin-left: 15px; } .section-icon img { width: 100%; } .section-text { flex: 1; } .section-text span { font-size: 25px; color: #c7c7c7; margin-top: 20px; display: block; height: 20px; } .body-container { min-height: 600px; } .newslist-three {} .newslist-three ul { .displayflex(space-between; center; wrap); } .newslist-three ul li { width: 47%; margin-bottom: 40px; height: 274px; background: #ffffff; border: 1px solid #d2d2d2; box-shadow: 8.49px 8.49px 4px 0px rgba(203, 203, 203, 0.12); } .newslist-three ul li a { display: block; width: 100%; height: 100%; padding: 25px 37px; box-sizing: border-box; position: relative; } .newslist-three ul li a::before { content: ''; position: absolute; width: 3px; height: 26px; background: #014f99; left: 0; top: 30px; } .newslist-three ul li a h1 { font-size: 20px; color: #282828; line-height: 30px; letter-spacing: -0.3px; .displaybox(); margin-bottom: 20px; } .newslist-three ul li a p { font-size: 18px; color: #6e6d6d; line-height: 28px; letter-spacing: -0.18px; .displaybox(3); height: 84px; margin-bottom: 20px; } .newslist-three ul li a h4 { font-size: 16px; font-weight: 400; color: #014f99; line-height: 26px; height: 26px; overflow: hidden; } .pageing { text-align: center; padding: 40px 12px; } .pageing ul { display: inline-block; list-style: none; padding: 0; margin: 0; } .pageing ul li { display: inline-block; border: solid 1px #dddddd; border-left-width: 0; } .pageing ul li a { display: inline-block; padding: 6px 12px; color: #555; text-decoration: none; } .pageing ul li.disabled a { color: #777; } .pageing ul li.active { background-color: #b2874b; border-color: #b2874b; } .pageing ul li.active a { color: #fff; font-weight: 600; } .pageing ul :first-child { border-left-width: 1px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .pageing ul :last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } @media screen and (max-width: 720px) { .pageing .nums { display: none !important; } } .zhishuoxhlist ul { display: flex; flex-wrap: wrap; justify-content: space-between; } .zhishuoxhlist li { width: 46%; float: left; border: 1px solid #eae9e9; margin-right: 22px; margin-bottom: 22px; overflow: hidden; height: 160px; transition: all 0.3s; } .zhishuoxhlist li a { width: 100%; display: block; overflow: hidden; padding: 30px 25px; display: flex; flex-wrap: nowrap; box-sizing: border-box; } .xhleft2 { width: 82px; float: left; overflow: hidden; margin-right: 15px; } .xhleft2 h1 { font-size: 28px; color: #b0b0b0; height: 26px; line-height: 26px; overflow: hidden; font-weight: bold; } .xhleft2 em { display: block; font-size: 12px; color: #a9a7a7; height: 35px; line-height: 35px; overflow: hidden; } .xhright2 { float: right; width: 60%; flex: 1; } .xhright2 h2 { font-size: 16px; color: #44aa68; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .zhishuoxhlist .xhright2 p { color: #989898; line-height: 25px; height: 50px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 20px 0; }