main { zoom: 1 }

/*slide*/
.slide { position: relative; width: 100%; max-height: 635px }
.slide .swiper-slide img { display: block; width: 100% }
.slide-prev, .slide-next { position: absolute; top: 50%; z-index: 9; width: 60px; height: 60px; margin-top: -30px; cursor: pointer; transition: 0.3s }
.slide-prev:after, .slide-next:after { content: ''; position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; border-top: 3px solid #fff }
.slide-prev { left: 0; transform: translateX(-100%) }
.slide-prev:after { border-left: 3px solid #fff; transform: translate(-30%, -50%) rotate(-45deg) }
.slide-next { right: 0; transform: translateX(100%) }
.slide-next:after { border-right: 3px solid #fff; transform: translate(-70%, -50%) rotate(45deg) }
.slide-prev:hover, .slide-next:hover { filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .3)) }
.slide-prev:hover:after, .slide-next:hover:after { border-color: #b76c11 }
.slide:hover .slide-prev { transform: translateX(50%) }
.slide:hover .slide-next { transform: translateX(-50%) }
.slide-page { display: block; position: absolute; bottom: 20px; left: 0; z-index: 2; width: 100%; height: 20px; text-align: center }
.slide-page .swiper-pagination-bullet { display: inline-block; background: rgba(0, 0, 0, 0.2); position: relative; height: 20px; width: 20px; background: none; text-align: center; margin: 0 4px; cursor: pointer }
.slide-page .swiper-pagination-bullet:after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .3); position: absolute; left: 50%; top: 50%; margin-left: -3px; margin-top: -3px; -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: .2 }
.slide-page .swiper-pagination-bullet:before { content: ""; width: 100%; height: 100%; border: 2px solid rgba(0, 0, 0, .3); border-radius: 50%; position: absolute; left: 0; top: 0; opacity: .5 }
.slide-page .swiper-pagination-bullet svg circle { stroke-dasharray: 113px; stroke-dashoffset: 0px; stroke-linecap: round; stroke-width: 0; stroke: #b76c11; fill: none; animation: none; animation-play-state: paused; animation-fill-mode: none }
.slide-page .swiper-pagination-bullet-active { color: #fff; background: none }
.slide-page .swiper-pagination-bullet-active:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); background: #b76c11 }
.slide-page .swiper-pagination-bullet svg { position: absolute; top: 0; right: 0; width: 20px; height: 20px; -webkit-transform: rotateY(-180deg) rotateZ(-90deg); transform: rotateY(-180deg) rotateZ(-90deg) }
.slide-page .swiper-pagination-bullet.swiper-pagination-bullet-active svg circle { animation-play-state: running; stroke-width: 2px; -webkit-animation: countdown 7s linear forwards; animation: countdown 7s linear forwards }
@-webkit-keyframes countdown {
    from { -webkit-stroke-dashoffset: 113px; stroke-dashoffset: 113px }
    to { -webkit-stroke-dashoffset: 0; stroke-dashoffset: 0 }
}
@keyframes countdown {
    from { -webkit-stroke-dashoffset: 113px; stroke-dashoffset: 113px }
    to { -webkit-stroke-dashoffset: 0; stroke-dashoffset: 0 }
}

.main-bg{ background-color: #f6f6f6 }

/*title*/
.title { position: relative; height: 60px }
.title h2 { position: absolute; left: 0px; top: 25px; z-index: 2; color: #28787f; font-size: 32px }
.title span { font-weight: bold; font-family: Arial; font-size: 42px; color: #E9E9E9 }

.notice { width: 100%; height: 45px; padding-left: 50px; line-height: 45px; border-bottom: #dddddd 1px solid }
.notice:before { content: ""; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); display: block; width: 30px; height: 21px; background: url(../images/notice_bg.png) no-repeat }
.notice a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis }

/*convenient*/
.convenient { padding: 40px 0 30px; justify-content: space-between; align-items: center }
.convenient li { display: flex; justify-content: center; align-items: center; width: 280px; height: 120px; background: url(../images/convenient_bk.png) no-repeat center center; border: #28787f 1px solid }
.convenient li a { display: flex; justify-content: center; align-items: center; width: 250px; height: 90px; color: #fff; font-size: 20px; border-radius: 6px; background: #28787f }
.convenient li a img { margin-right: 15px }
.convenient li a:hover { background: #2e8991 }

/*news*/
.news { padding: 70px 0; justify-content: space-between }
.news .news-col { width: 380px; padding: 6px; border: #d8d8d8 2px solid }
.news .news-col img { display: block; width: 364px; height: 200px }
.news .news-col .news-title { margin: 0 10px; padding: 18px 0 10px; justify-content: space-between; align-items: center }
.news .news-col .news-title h3 { font-size: 24px; color: #333; line-height: 1.3 }
.news .news-col .news-more { display: block; width: 26px; height: 25px; background: url(../images/news_more.png) no-repeat center; background-size: cover }
.news .news-col .news-more:hover { background-image: url(../images/news_more_hover.png) }
.news .news-col ul { margin: 0 10px }
.news .news-col ul li { display: flex; align-items: center; height: 45px; line-height: 45px }
.news .news-col ul li::before { content: ""; display: block; width: 8px; height: 8px; background: url(../images/quan.png) no-repeat; background-size: cover }
.news .news-col ul li a { flex: 1; margin-left: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }

/*key*/
.key { padding: 70px 0 }
.key ul { margin-top: 36px; justify-content: space-between; align-items: center }
.key ul li { width: 220px; height: 220px; background: #fff }
.key ul li a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color: #333; border: #d8d8d8 2px solid }
.key ul li a img { padding-top: 40px }
.key ul li a span { margin-top: 30px; font-size: 20px }
.key ul li a:hover { border-color: #28787f }

/*famous*/
.famousbox { padding: 70px 0 }
.famous { margin-top: 50px }
.famous li { position: relative; width: 220px; height: 287px; padding: 5px; border: 1px solid #e2e2e2; box-sizing: border-box }
.famous li img { display: block; width: 100%; height: 100% }
.famous li .info { position: absolute; width: 208px; height: 275px; left: 6px; top: 6px; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; background-color: rgba(0, 0, 0, .5); opacity: 0; transition: all .35s ease; cursor: pointer;overflow:hidden; }
.famous li:hover .info { opacity: 1 }
.famous li .info span { font-size: 16px; height: 54px; line-height: 54px }
.famous li .info p { padding: 0 5px; line-height: 20px; font-size: 14px }
.famous-btn { justify-content: center; margin-top: 30px }
.famous-prev, .famous-next { width: 59px; height: 35px; margin: 0 2px; cursor: pointer; border: 0; outline: 0 }
.famous-prev { background: url(../images/prev_btn.jpg) no-repeat }
.famous-prev:hover, .famous-prev.swiper-button-disabled { background-image: url(../images/prev_btn_hover.jpg) }
.famous-next { background: url(../images/next_btn.jpg) no-repeat }
.famous-next:hover, .famous-next.swiper-button-disabled { background-image: url(../images/next_btn_hover.jpg) }

/*medica*/
.medica { position: relative; padding: 70px 0; background: url(../images/medica_bg.jpg) no-repeat top center; background-size: cover; overflow: hidden }
.medica::before { content: ""; position: absolute; top: 45px; left: 42%; z-index: 1; transform: translateX(-50%); width: 560px; height: 575px; background: url(../images/medica_renwu.jpg) no-repeat }
.medica .wrapper { position: relative; z-index: 2 }
.medica ul { padding: 185px 0 58px; justify-content: space-between; align-items: center }
.medica ul li { width: 170px; height: 174px; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px #e1edff, 0 2px 8px rgba(0, 0, 0, 0.5); transition: background .1s ease-out 0s }
.medica ul li a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color: #333 }
.medica ul li a i.medica-icon { display: block; width: 101px; height: 101px }
.medica ul li a i.medica-icon-1 { background: url(../images/medica_01.png) no-repeat }
.medica ul li a i.medica-icon-2 { background: url(../images/medica_02.png) no-repeat }
.medica ul li a i.medica-icon-3 { background: url(../images/medica_03.png) no-repeat }
.medica ul li a i.medica-icon-4 { background: url(../images/medica_04.png) no-repeat }
.medica ul li a i.medica-icon-5 { background: url(../images/medica_05.png) no-repeat }
.medica ul li a i.medica-icon-6 { background: url(../images/medica_02.png) no-repeat }
.medica ul li a i.medica-icon-1:hover { background: url(../images/medica_01_hover.png) no-repeat }
.medica ul li a i.medica-icon-2:hover { background: url(../images/medica_02_hover.png) no-repeat }
.medica ul li a i.medica-icon-3:hover { background: url(../images/medica_03_hover.png) no-repeat }
.medica ul li a i.medica-icon-4:hover { background: url(../images/medica_04_hover.png) no-repeat }
.medica ul li a i.medica-icon-5:hover { background: url(../images/medica_05_hover.png) no-repeat }
.medica ul li a i.medica-icon-6:hover { background: url(../images/medica_02_hover.png) no-repeat }
.medica ul li a span { margin-top: 10px; font-size: 18px }