*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#858585;font-family:'Open Sans','Segoe UI',Arial,sans-serif;font-size:14px;line-height:1.55;color:#363636}
img{border:0;max-width:100%;height:auto}
a{color:#1e98e8;transition:color .2s}
a:hover{color:#0f6fb5;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;background:#fff}
.top{background:#fff;padding:18px 27px}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:#191919}
.brand b{display:block;font-size:24px;font-weight:700;letter-spacing:-.5px;text-transform:uppercase;color:#0b4a9b}
.brand i{display:block;font-style:normal;font-size:15px;font-weight:300;color:#777}
.hero{position:relative;display:block;aspect-ratio:3.5/1;overflow:hidden;background:#222}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero h1{position:absolute;left:0;bottom:0;margin:0;max-width:78%;padding:14px 45px;background:rgba(10,30,60,.62);color:#fff;font-weight:300;font-size:32px;line-height:1.2;letter-spacing:-1px}
.slider img{opacity:0;animation:fade 18s infinite}
.slider img.s1{animation-delay:0s}
.slider img.s2{animation-delay:6s}
.slider img.s3{animation-delay:12s}
@keyframes fade{0%{opacity:0}6%{opacity:1}33%{opacity:1}39%{opacity:0}100%{opacity:0}}
.main{display:flex;align-items:stretch}
.menu{flex:0 0 240px;background:#edf4f9}
.menu ul{list-style:none;margin:0;padding:20px 0}
.menu a{display:block;padding:11px 26px;color:#000;text-decoration:none;font-size:13px;font-weight:700;text-transform:uppercase;transition:background .2s,color .2s}
.menu a:hover,.menu .current a{background:#1e98e8;color:#fff}
.content{flex:1;min-width:0;background:#f2f2f2;padding:22px 45px 40px;overflow:hidden}
.bread{font:12px Arial,sans-serif;margin-bottom:18px;color:#555}
.bread a{color:#000;text-decoration:none}
.bread a:hover{color:#38a3e9}
.content h2{font-size:18px;font-weight:700;margin:30px 0 12px;color:#191919}
.content p{margin:0 0 14px}
.content ul{margin:0 0 16px;padding-left:20px}
.content li{margin-bottom:7px}
.content>p:first-child,.bread+p{font-size:15px}
figure{margin:20px 0;text-align:center}
figure img{display:inline-block;max-width:100%;border:1px solid #d9d9d9;background:#fff;padding:4px}
ul.icons{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px;margin:18px 0 22px}
ul.icons li{text-align:center;margin:0;font-size:13px}
ul.icons img{display:block;margin:0 auto 8px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin:16px 0}
.cards.c4{grid-template-columns:repeat(2,1fr)}
.card{display:block;background:#fff;border:1px solid #dcdcdc;text-decoration:none;color:#363636;transition:box-shadow .2s,border-color .2s}
.card:hover{border-color:#1e98e8;box-shadow:0 2px 10px rgba(30,152,232,.25);color:#363636}
.card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.card b{display:block;padding:10px 12px 2px;font-size:14px;color:#1e98e8}
.card span{display:block;padding:0 12px 12px;font-size:12.5px;line-height:1.45;color:#555}
.foot{background:#fff;border-top:1px solid #d9d9d9;padding:18px 27px;font-size:12px;color:#777}
.foot p{margin:0}
@media(max-width:860px){
.hero h1{font-size:22px;padding:10px 18px;max-width:100%}
.main{flex-direction:column}
.menu{flex:none}
.menu ul{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px}
.menu a{padding:7px 12px;font-size:12px;background:#fff}
.content{padding:18px 16px 30px}
.top{padding:14px 16px}
.brand b{font-size:19px}
.brand i{font-size:13px}
}
@media(max-width:520px){
.hero{aspect-ratio:2/1}
.hero h1{font-size:18px}
}