#main {
    background:#eff6fe url(../images/main/bg_main.png) no-repeat 50% 0;
    padding:95px 0 95px 0; text-align: center;
}
#main * {outline-offset: 2px; font-family: 'Lexend';}

.main-title {
    font-family: 'Lexend'; display: inline-flex; align-items: flex-end;
}
.main-title .main-title-lg {display:block; font-size: 3.7rem; font-weight: 900; color:#26346f; text-transform: uppercase; white-space: nowrap;}
.main-title .main-title-sm {display:block; font-size: 2.5rem; color:#26346f; font-weight: 700; margin-left:20px;}
.main-title strong {color:#1f8ee9; word-break: keep-all; display: inline-block; font-weight: 700;}
.main-title i {animation: bounce 0.6s 3s ease-in-out; font-style: normal; display: inline-block;}
.main-title i:nth-child(7) {padding-left:20px;}

@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-20px); }
    60%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}

.main-big-banner {
    display: flex;
    justify-content: space-between;
    width:1500px;
    margin:85px auto 40px auto;
}
.main-big-banner .banner-box {
    background-color:#fff;
    background-position: calc(100% - 55px) calc(100% - 48px);
    background-repeat: no-repeat;
    background-image: url(../images/main/big-banner-01.png);
    border-radius: 20px;
    width:calc((100% / 3) - 23px);
    border-top:4px solid #26346f;
    text-align: left;
    padding:50px 40px;
    min-height: 380px;
    position: relative;
    box-shadow: 0 0 27px rgba(33, 56, 121, 0.1);
}
.main-big-banner .banner-box:nth-child(2) {background-image: url(../images/main/big-banner-02.png);}
.main-big-banner .banner-box:nth-child(3) {background-image: url(../images/main/big-banner-03.png);}
.main-big-banner .banner-box dt {
    color:#26346f;
    font-size: 1.625rem;
    font-weight: 700;
    margin-bottom: 25px;
}
.main-big-banner .banner-box dd {
    font-size: 1.06rem;
    color:#888;
    font-weight: 300;
    line-height: 1.7;
}
.main-big-banner .banner-box .btn_more {
    display: inline-block;
    font-size: 0.87rem;
    color:#26346f;
    font-weight: 700;
    position: absolute;
    padding-right: 20px;
    bottom:52px;
    left:40px;
    transition: all 0.2s;
}
.main-big-banner .banner-box .btn_more:after {
    content: "";
    position: absolute;
    top:50%;
    right:0;
    width:7px;
    height:12px;
    transform: translateY(-50%);
    background: url(../images/main/btn_more.gif) no-repeat 50% 50%;
}
.main-big-banner .banner-box .btn_more:hover {
    color:#1f8ee9;
}
.main-big-banner .banner-box .btn_more:hover:after {
    animation: arrow_right 0.4s ease-in-out;
    background: url(../images/main/btn_more_on.gif) no-repeat 50% 50%;
}
@keyframes arrow_right{
    50%{transform:translate(8px, -50%);}
    100%{transform:translate(0, -50%);}
}


.main-sm-banner {
    display: flex;
    justify-content: space-between;
    width:1500px;
    margin:0 auto;
}
.main-sm-banner .banner-box {
    background-color:#d8eafb;
    background-position: calc(100% - 45px) 50%;
    background-repeat: no-repeat;
    background-image: url(../images/main/sm-banner-01.png);
    border-radius: 20px;
    width:calc((100% / 3) - 23px);
    text-align: left;
    padding:40px 40px;
    cursor: pointer;
    transition: all 0.2s;
}
.main-sm-banner .banner-box:nth-child(2) {background-image: url(../images/main/sm-banner-02.png);}
.main-sm-banner .banner-box:nth-child(3) {background-image: url(../images/main/sm-banner-03.png);}
.main-sm-banner .banner-box dt {
    color:#26346f;
    font-size: 1.43rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.main-sm-banner .banner-box dt span {
    font-size: 1.12rem;
    display: block;
    margin-bottom: 15px;
}
.main-sm-banner .banner-box dd {
    font-size: 1rem;
    color:#888;
    font-weight: 400;
    line-height: 1.5;
}
.main-sm-banner .banner-box:hover {
    background-color: #26346f;
}
.main-sm-banner .banner-box:hover dt,
.main-sm-banner .banner-box:hover dd {color:#fff;}


@media all and (max-width:1550px) {
    .main-big-banner,
    .main-sm-banner {width: 96%;}
}

@media all and (max-width:1190px) {
    #main {padding: 60px 0;}
    .main-title {flex-direction: column; align-items: center;}
    .main-title .main-title-lg {font-size: 3.3rem; margin-bottom: 20px;}
    .main-title .main-title-sm {font-size: 2.3rem; margin:0;}
    .main-big-banner,
    .main-sm-banner {flex-direction: column; gap:30px 0;}
    .main-big-banner .banner-box,
    .main-sm-banner .banner-box {width:100%;}
    .main-big-banner .banner-box {
        min-height: auto;
        padding: 50px 40px 110px 40px;
    }
    .main-sm-banner .banner-box {padding: 50px 40px;}
}

@media all and (max-width:767px){
    #main {padding: 50px 10px;}
    .main-title .main-title-lg {font-size: 2.3rem; margin-bottom: 15px;}
    .main-title .main-title-sm {font-size: 1.5rem;}
    .main-big-banner, .main-sm-banner {
        gap: 25px 0;
    }
    .main-big-banner {margin:45px auto 30px auto;}
    .main-big-banner .banner-box {
        background-position: calc(100% - 35px) calc(100% - 38px);
        padding: 30px 30px 100px 30px;
    }
    .main-big-banner .banner-box .btn_more {bottom: 37px; left: 30px;}
    .main-big-banner .banner-box dt {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    .main-big-banner .banner-box dd {font-size: 1rem;}
    .main-sm-banner .banner-box {
        padding: 40px 30px;
        background-position: calc(100% - 35px) 50%;
    }
}

@media all and (max-width:600px){

}
@media all and (max-width:360px){

}