/* ==============================================
   首页关于我们板块
   ============================================== */
.idx-about-section { padding: 60px 0 50px; }
.idx-about-section .section-title { text-align: center; margin-bottom: 36px; }
.idx-about-section .section-title strong { display: block; font-size: 30px; color: #111; margin-bottom: 10px; }
.idx-about-section .section-title p { color: #999; font-size: 14px; }

/* 公司简介 左图右文 */
.idx-in-about { margin: 0; }
.idx-in-about dt { float: left; width: 500px; overflow: hidden; }
.idx-in-about dt img { width: 100%; height: 340px; object-fit: cover; display: block; transition: transform .45s ease; }
.idx-in-about dt:hover img { transform: scale(1.06); }
.idx-in-about dd { margin-left: 550px; padding-top: 10px; }
.idx-in-about dd h4 { margin: 0 0 18px; font-size: 22px; color: #111; }
.idx-in-about dd h4::after { display: block; content: ''; width: 38px; height: 3px; margin: 12px 0 0; background: #4177b7; }
.idx-in-about dd h4 small { display: block; color: #999; font-weight: normal; font-size: 14px; margin-top: 4px; }
.idx-in-about dd p { margin: 0 0 10px; color: #666 !important; line-height: 1.9; font-size: 15px; text-align: justify; }
.idx-in-about dd p span,
.idx-in-about dd p font,
.idx-in-about dd p * { color: #666 !important; font-size: inherit !important; font-family: inherit !important; }
.idx-about-btn { margin-top: 28px; }
.idx-about-btn a { position: relative; display: inline-block; margin-right: 14px; line-height: 40px; background: #4177b7; color: #fff; padding: 0 28px; font-size: 14px; overflow: hidden; transition: background .3s, transform .25s, box-shadow .25s; }
.idx-about-btn a::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%); transform: skewX(-20deg); transition: left .5s ease; }
.idx-about-btn a:hover::before { left: 140%; }
.idx-about-btn a:hover { background: #2d5c9e; color: #fff; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(65,119,183,.35); }

/* 4格图片卡片 */
.idx-about-class { margin: 20px 0 0 -16px; padding: 0; list-style: none; }
.idx-about-class li { float: left; width: 25%; }
.idx-about-class li a { display: block; margin: 16px 0 0 16px; position: relative; overflow: hidden; }
.idx-about-class li img { display: block; width: 100%; height: 180px; object-fit: cover; }
.idx-about-class li .pic { position: relative; }
.idx-about-class li .icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; z-index: 2; }
.idx-about-class li .icon strong { display: block; font-size: 20px; font-weight: 700; line-height: 1.4; }
.idx-about-class li .icon b { display: block; font-size: 12px; font-weight: normal; opacity: .85; margin-top: 4px; }
.idx-about-class li .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); opacity: 1; transition: opacity .35s; z-index: 1; }
.idx-about-class li:hover .bg { opacity: 0.65; }
.idx-about-class li .icon { text-shadow: 0 2px 6px rgba(0,0,0,0.45); }

/* 边框动画线 */
.idx-about-class li .line::before,
.idx-about-class li .line::after {
    position: absolute; content: ''; opacity: 0; z-index: 3;
}
.idx-about-class li .line::before {
    top: 8px; right: 8px; bottom: 8px; left: 8px;
    border-top: 1px solid #fff; border-bottom: 1px solid #fff;
    transform: scale(0, 1); transform-origin: 0 0; transition: opacity .35s, transform .35s;
}
.idx-about-class li .line::after {
    top: 8px; right: 8px; bottom: 8px; left: 8px;
    border-right: 1px solid #fff; border-left: 1px solid #fff;
    transform: scale(1, 0); transform-origin: 100% 0; transition: opacity .35s, transform .35s;
}
.idx-about-class li:hover .line::before,
.idx-about-class li:hover .line::after { opacity: 1; transform: scale(1); transition-delay: .05s; }

/* responsive */
@media (max-width: 1100px) {
    .idx-in-about dt { width: 400px; }
    .idx-in-about dd { margin-left: 440px; }
}
@media (max-width: 900px) {
    .idx-in-about dt { float: none; width: 100%; margin-bottom: 20px; }
    .idx-in-about dd { margin-left: 0; }
    .idx-about-class li { width: 50%; }
}
@media (max-width: 480px) {
    .idx-about-class li { width: 100%; }
}
@media (max-width: 768px) {
    .idx-about-section { padding: 30px 0 30px; }
}