.tabs { display: flex; justify-content: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1) }
.tab { padding: 0 20px; box-sizing: border-box; margin: 0 5px; font-size: 20px; height: 44px; line-height: 44px; color: #333; cursor: pointer; border-radius: 22px; transition: background-color 0.3s, color 0.3s; list-style: none }
.tab:not(.active) { background-color: transparent }
.tab:hover { color: #003b84 }
.tab.active { background-color: #003b84; color: #fff }
.tab-content { display: none }

.team-members { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: -20px; margin-right: -20px }
.member { width: 25%; padding: 20px; box-sizing: border-box }
.member-con { display: block; background: #e8ebf0; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px; cursor: pointer }
.member-con h3 { font-size: 20px; width: calc(100% - 40px) }

.com-img { overflow: hidden }
.com-img img { display: block; width: 100%; height: auto; -webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; transition: transform 0.5s ease-out }
a:hover .com-img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) }

.details-btn { background: #003b84; color: #fff; border: none; border-radius: 12px; width: 34px; text-align: center; height: 24px; line-height: 24px; position: absolute; right: 20px; top: 20px }
.details-btn .iconfont { font-size: 14px; line-height: 24px }

.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; z-index: 9999 }
.popup .content { width: 100% }
.popup-content { background: #fff; position: relative }
.close-btn { position: absolute; top: 20px; right: 20px; width: 24px; text-align: center; height: 24px; line-height: 24px; border-radius: 50%; cursor: pointer; background: #003b84; color: #fff }
.close-btn .iconfont { font-size: 12px; line-height: 24px }
.popup-image { float: left; width: 430px; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px }
.popup-text { float: left; padding: 50px; box-sizing: border-box; width: calc(100% - 430px) }
.popup-text h1 { margin: 0 }
.popup-text p.post { margin: 10px 0 0 }   
.popup-text p.intro { margin: 30px 0 0; padding-top: 30px; border-top: 1px solid rgba(0, 0, 0, 0.1); line-height: 1.8 }

@media (max-width: 1260px) {
    .member { width: 33.33% }
    .popup-image { width: 360px }
    .popup-text { width: calc(100% - 360px); padding: 40px }
}
@media (max-width: 892px) {
    .tab { padding: 6px 20px 0; line-height: 18px; text-align: center }
}
@media (max-width: 768px) {
    .member { width: 50% }
    .popup-image { float: none; width: 100%; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px }
    .popup-text { float: none; padding: 40px; width: 100% }
    .member-con .com-rows_3 { height: 4.45em; line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical }
    .popup-text p.intro { max-height: 200px; overflow-y: auto }
}