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

/*banner*/
.banner { position: relative; display: flex; justify-content: center; align-items: stretch; width: 100%; height: 230px; background: #eef2f5; overflow: hidden }
.banner img { display: block; width: 100%; max-height: 100% }

/*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 }

/*position*/
.position { display: block; width: 100%; height: 50px; line-height: 50px; text-align: left; font-size: 12px; color: #666 }
.position .iconfont { margin-right: 10px; font-size: 14px }
.position a { position: relative; padding: 0 5px; color: #666; text-decoration: none }
.position a:before { content: ""; display: inline-block; width: 10px; height: 10px; margin-top: -1px; margin-right: .5rem; vertical-align: middle; background: url(../images/icon_right_position.svg) no-repeat }
.position a:first-child:before { content: normal }
.position a:hover { color: #28787f }

.contentbox { justify-content: space-between }

/*sidebar*/
.sidebar { width: 180px; padding-bottom: 30px }
.sidenav { position: sticky; top: 10px }
.sidenav h2 { width: 100%; height: 66px; line-height: 66px; text-align: center; color: #fff; font-size: 32px; background: #28787f url(../images/sidenav_bg.png) no-repeat center }
.sidenav ul { margin-top: 10px }
.sidenav ul li { width: 100%; height: 45px; line-height: 45px; margin-bottom: 5px }
.sidenav ul li:last-child { margin-bottom: 0 }
.sidenav ul li a { display: flex; align-items: center; width: 100%; height: 100%; padding-left: 30px; font-size: 18px; color: #333; background-color: #f6f6f6; transition: all .3s ease }
.sidenav ul li a::before { content: ""; display: inline-block; width: 4px; height: 18px; margin-right: 10px; background: #999 }
.sidenav ul li a:hover, .sidenav ul li.on a { color: #fff; background-color: #28787f }
.sidenav ul li a:hover::before, .sidenav ul li.on a::before { background: #fff }

.content { width: 980px; padding-bottom: 60px }
.content h3 { display: flex; align-items: center; width: 100%; height: 66px; font-size: 24px; color: #333 }
.content h3::before { content: ""; display: inline-block; width: 4px; height: 24px; margin-right: 10px; background-color: #28787f }

/*article*/
.article { position: relative }
.article .article-tit { padding-bottom: 15px; text-align: center; border-bottom: 2px solid #eee }
.article .article-tit h1 { font-size: 28px; color: rgba(0, 0, 0, .85); line-height: 40px; margin: 8px 0; word-wrap: break-word; word-break: break-all }
.article .article-file { font-size: 12px; color: #9199a1; line-height: 24px }
.article .article-file time, .article .article-file span { margin-right: 24px }
.article .article-info { overflow: hidden; padding-top: 24px }
.article .info { line-height: 1.8 }
.article .info p { margin-bottom: 1rem; text-indent: 0; line-height: 2; color: #333 }
.article .info img { max-width: 100%; vertical-align: top }
.article .info a { transition: 0.5s; text-decoration: none }
.article .info a:hover { text-decoration: underline }
.article .info strong, .article .info th { font-weight: bold }
.article .fanye { margin-bottom: 10px; padding: 10px 0; line-height: 32px; border-top: 1px solid #f0f1f2 }
.article .fanye strong { color: #28787f; font-weight: normal }
.article .fanye a { color: #333; text-decoration: none }
.article .fanye a:hover { color: #28787f; text-decoration: underline }

.article-list { }
.article-list li { display: flex; justify-content: space-between; line-height: 50px; font-size: 14px; border-bottom: 1px dashed #ddd; transition: all .3s }
.article-list li a { display: block; max-width: 80%; color: #242424; transition: all .3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none }
.article-list li a::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: #28787f; vertical-align: middle }
.article-list li a:hover { color: #28787f }
.article-list li time { color: #999 }
.article-list li time em { font-style: normal }
.article-list li:hover { border-bottom-color: #28787f }
.article-list li:hover time { color: #28787f }

/*team*/
.teambox { padding-top: 70px; padding-bottom: 60px }
.team-list { margin-top: 50px; padding-top: 45px; justify-content: flex-start; background-color: #f6f6f6 }
.team-list li { width: 530px; height: 190px; overflow: scroll;margin-bottom: 45px; padding: 4px; border: #d8d8d8 1px solid; background: #fff; --itemWidth: 530px; --n: 2; width: calc(var(--itemWidth)); margin-left: calc((100% - var(--itemWidth) * var(--n)) / (var(--n) + 1)) }
.team-list li a { display: flex; width: 100%; height: 100% }
.team-list li a img { display: block; width: 140px; height: 180px }
.team-list li a .info { display: flex; align-items: flex-start; flex-direction: column; justify-content: normal; padding-left: 30px }
.team-list li a .info h4 { padding-bottom: 0px; line-height: 1.8; font-size: 16px; color: #28787f }
.team-list li a .info p { font-size: 14px; line-height: 1.8; color: #555 }
.team-list li a .info p span { color: #28787f }
.team-list li a .info p .box { width:440px;height:120px;overflow:hidden; }

.teamcon { padding-top: 30px; padding-bottom: 60px }

/*single*/
.single { padding-top: 30px; padding-bottom: 60px }
.single h2 { position: relative; display: block; margin-bottom: 43px; padding: 16px 0; line-height: 42px; font-size: 30px; color: #333 }
.single h2:before { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 4px; background: #28787f }

/*about*/
.aboutbox { padding-top: 70px; padding-bottom: 60px }
.aboutinfo { margin-top: 40px; flex-wrap: nowrap; justify-content: space-between; align-items: normal }
.aboutinfo .info { padding-left: 40px; line-height: 1.8; font-size: 14px }
.aboutinfo .info p { margin-bottom: 1rem; text-indent: 0; line-height: 2; color: #333 }
.aboutinfo .info img { max-width: 100%; vertical-align: top }
.aboutinfo .info a { transition: 0.5s; text-decoration: none }
.aboutinfo .info a:hover { text-decoration: underline }
.aboutinfo .info strong, .aboutinfo .info th { font-weight: bold }

.history-left { width: 650px; height: 640px; padding: 40px 160px 40px 50px; background: #fff }
.history { width: 100%; height: 560px }
.history a { display: flex; justify-content: space-between; width: calc(100% - 40px); height: 70px; padding-left: 40px; line-height: 70px; font-size: 16px; background: url(../images/time.png) no-repeat left center; background-size: 29px 29px; border-bottom: #ccc 1px solid }
.history a time { display: block; width: 40%; color: #28787f; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.history a p { display: block; width: 60%; padding: 0 15px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.history a:hover { color: #28787f }
.history-right { position: absolute; top: 30px; right: 0; z-index: 1; justify-content: space-between; width: 680px }

.honorary { width: 100%; height: 364px; margin-top: 50px }
.honorary li { width: 261px; height: 156px }
.honorary li img { display: block; width: 100%; height: 100% }
.honorary-btn { position: absolute; top: 80px; right: 0; justify-content: center }
.honorary-prev, .honorary-next { width: 59px; height: 35px; margin: 0 2px; cursor: pointer; border: 0; outline: 0 }
.honorary-prev { background: url(../images/prev_btn.jpg) no-repeat }
.honorary-prev:hover, .honorary-prev.swiper-button-disabled { background-image: url(../images/prev_btn_hover.jpg) }
.honorary-next { background: url(../images/next_btn.jpg) no-repeat }
.honorary-next:hover, .honorary-next.swiper-button-disabled { background-image: url(../images/next_btn_hover.jpg) }

/*contact*/
.contactbox { padding-top: 70px; padding-bottom: 60px; justify-content: space-between }
.contact { margin-top: 40px; justify-content: space-between }
.contact li { display: flex; flex-direction: column; align-items: center; width: 230px; height: 230px; padding: 30px 15px 0; cursor: pointer; border: 2px solid transparent }
.contact li h4 { padding: 15px 0 }
.contact li p { font-size: 14px }
.contact li:hover { border: 2px solid #d8d8d8 }
.contact-fy { margin-top: 40px; justify-content: space-between }
.contact-fy li { background: #fff }
.contact-fy li:nth-child(4) { margin-top: 30px }
.contact-fy li h4 { margin-top: 17px; padding: 0 40px; color: #28787f }
.contact-fy li p { margin-top: 10px; padding: 0 40px 15px; line-height: 26px; font-size: 14px }
.map { width: 660px; height: 550px; border-radius: 10px; border: 2px solid #28787f; box-shadow: 0 0 8px rgb(0 0 0 / 10%) }

/*message*/
.message { width: 500px }
.message-title { display: block; padding: 40px 0 30px; font-size: 40px; color: #333; font-weight: bold }
.form-item { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 20px }
.form-item input, .form-item textarea { height: 50px; border: 1px solid #f0f0f0; background-color: #f8f8f8; width: 100%; padding: 5px 10px; border-radius: 5px }
.form-item input:focus, .form-item textarea:focus { background: #fbfbfb; box-shadow: inset 0 0 9px rgba(204, 204, 204, .39) }
.form-item.me-msg textarea { height: 120px; margin-top: 10px; font-size: 14px; line-height: 24px; padding: 5px 10px }
.form-list .btn { display: block; width: 100%; height: 55px; margin-top: 60px; border: 1px solid #28787f; border-radius: 6px; text-align: center; font-size: 16px; line-height: 50px; background-color: #28787f; color: #fff; cursor: pointer }
.form-list .btn:hover { background: #fff; border: 1px solid #0075C9; color: #0075C9 }

/*keshi*/
.keshibox { padding: 70px 0; background: #f6f6f6; border-bottom: 1px solid #28787f }
.keshi-title { text-align: center }
.keshi-title h2 { display: inline-block; width: 180px; height: 66px; line-height: 66px; text-align: center; color: #fff; font-size: 32px; background: #28787f url(../images/sidenav_bg.png) no-repeat center }
.keshi-list { margin-top: 50px; justify-content: flex-start }
.keshi-list li { width: 166px; height: 40px; margin-bottom: 30px; line-height: 40px; padding-left: 10px; background: url(../images/keshi_list_bg.png) no-repeat center; --itemWidth: 166px; --n: 6; width: calc(var(--itemWidth)); margin-left: calc((100% - var(--itemWidth) * var(--n)) / (var(--n) + 1)) }
.keshi-list li a { display: block; padding-left: 15px; transition: all .3s ease }
.keshi-list li a:hover { color: #fff; background: #28787f }

/*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 }

/*search*/
.searchbox { padding-top: 70px; padding-bottom: 60px }
.search-result { display: flex; align-items: center; width: 500px; height: 42px; margin: 0 auto; border-radius: 6px; background-color: #fff; border: rgb(229, 229, 229) 1px solid }
.search-result .search-text { flex: 1; width: 100%; height: 100%; padding: 0 10px; font-size: 12px; color: #ccc; border: 0; outline: 0 }
.search-result input.search-text::-webkit-input-placeholder { color: #ccc }
.search-result input.search-text:-moz-placeholder { color: #ccc }
.search-result input.search-text::-moz-placeholder { color: #ccc }
.search-result input.search-text:-ms-input-placeholder { color: #ccc }
.search-result .search-btn { cursor: pointer; border: 0; outline: 0; width: 100px; min-width: 100px; height: 42px; border-radius: 0 6px 6px 0; background-color: #28787f; color: #fff; text-align: center; font-size: 16px }
.search-result .search-btn:hover { color: #fff; background: #28787f }
.search-msg { padding: 20px; text-align: center; font-size: 18px }
.search-msg b { color: #28787f }
.search-list { margin-top: 30px }
.search-list li { position: relative; width: 100%; height: 180px; margin-bottom: 25px; padding: 15px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; overflow: hidden; background: #f6f6f6; -o-transition: all .3s ease; -ms-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease }
.search-list li a { display: block }
.search-list li:hover { background: #fff; -moz-box-shadow: 0px 6px 36px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 6px 36px rgba(0, 0, 0, 0.1); box-shadow: 0px 6px 36px rgba(0, 0, 0, 0.1) }
.search-list li h3 { line-height: 56px; font-size: 18px; font-weight: 700; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.search-list li h3 span { display: initial; height: auto; margin: 0 !important; line-height: 56px !important; font-size: 18px !important; font-weight: 700 !important; }
.search-list li:hover h3 { color: #28787f }
.search-list li p { height: 48px; line-height: 24px; text-indent: 2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden }
.search-list li span { display: inline-block; height: 19px; margin: 27px 20px 0 0; font: 14px/19px Arial; color: #666 }
.search-list li span i { margin-right: 10px; vertical-align: middle; font-size: 15px; color: #333 }
.search-list li a:hover p { color: #666 }

/*page*/
.pagebar { padding: 10px 0 }
.pagebar .pagination { display: flex; justify-content: center }
.pagebar .pagination a, .pagebar .pagination span { min-width: 36px; height: 36px; line-height: 36px; text-align: center; color: #606266; font-size: 14px; padding: 0 12px; margin: 0 6px; background: #f0f2f5; border-radius: 3px; text-decoration: none }
.pagebar .pagination a.page-size { font-size: 20px }
.pagebar .pagination a:hover, .pagebar .pagination a.page-num-current { color: #fff; background: #28787f }
.pageno { padding: 20px 0; text-align: center; font-size: 14px; color: #999 }