@charset "UTF-8";

.menu {
    width: 99%;
    margin-top: 10PX;
    border-radius: 4PX;
    border: none;
    border: 1PX solid #7e93af;
    font-size: .4rem;
    outline: 0;
    text-indent: 1em
}

.banner,
.banner img,
.info {
    width: 100%
}

@font-face {
    font-family: 'Sora';
    src:url(Sora-VariableFont_wght.ttf);
    font-weight: 400;
    font-style: normal
}

.regulars {
    font-family: 'Sora', sans-serif;
}

@font-face {
    font-family: 'Sora';
    src:url(Sora-VariableFont_wght.ttf);
}

.semibolds {
    font-family: 'Sora', sans-serif;
}

@font-face {
    font-family: 'Sora';
    src:url(Sora-VariableFont_wght.ttf);
    font-weight: 400;
    font-style: normal
}

.aips {
    font-family: 'Sora', sans-serif;
}

.banner {
    justify-content: center;
    position: relative;
    height: auto
}

.banner>.banner_text {
    position: absolute;
    top: 30%;
    z-index: 1;
    padding: 20PX 10PX;
    text-align: center;
    box-sizing: border-box
}

.banner>.banner_text p {
    padding: 30PX 70PX 0;
    line-height: 40PX;
    box-sizing: border-box
}

@media screen and (max-width:980px) {
    .banner {
        align-items: center
    }

    .banner .banner_text {
        top: 15%
    }

    .banner .banner_text h2 {
        font-size: 1.2rem
    }

    .banner .banner_text p {
        padding: 30PX 70PX 0;
        font-size: .65rem;
        line-height: 1rem
    }
}

@media screen and (max-width:768px) {
    .banner .banner_text {
        top: 0
    }

    .banner .banner_text h2 {
        font-size: 1.2rem
    }

    .banner .banner_text p {
        padding: .625rem .25rem 0;
        font-size: .65rem;
        line-height: 1rem
    }
}

.info {
    padding-bottom: 30PX;
    background-image: url(../images/public/conten_backroun.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    background-color: #f5f5f5
}

.info>.info_field {
    flex-wrap: wrap;
    align-content: space-around;
    position: relative;
    bottom: 77PX;
    padding: 50PX;
    background: #fdfdfd;
    box-shadow: 4PX 4PX 30PX 0PX rgba(0, 0, 0, .23);
    box-sizing: border-box;
    border-bottom: .125rem solid #2271CA
}

.info>.info_field>.field_subtitlr {
    color: #332c2b
}

.info>.info_field>.field_subtitlr>h3 {
    line-height: 1rem
}

.info>.info_field>.field_subtitlr p {
    padding-top: 1.25rem
}

.info>.info_field>.field_chart {
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 90%;
    height: 500PX;
    margin: 1rem auto
}

.info>.info_field>.field_chart>.chart_text {
    position: relative;
    width: 44%;
    height: 23%
}

.info>.info_field>.field_chart>.chart_text input {
    height: 1.25rem
}

.info>.info_field>.field_chart>.chart_text>label {
    position: absolute;
    top: -.5rem;
    color: #332c2b
}

.info>.info_field>.field_chart>.chart_text>.btn {
    position: absolute;
    width: 100%;
    height: .5rem;
    z-index: 55;
    top: .7rem;
    color: #899FBF;
    cursor: pointer
}

.info>.info_field>.field_chart>.chart_text>.btn span {
    float: right;
    padding: 0 .5rem
}

.info>.info_field>.field_chart>.chart_text>textarea {
    position: relative;
    z-index: 6;
    height: 4.375rem
}

.info>.info_field>.field_chart>.chart_text .text_list {
    display: none;
    flex-wrap: wrap;
    align-content: space-between;
    position: absolute;
    z-index: 50;
    width: 100%;
    background-color: #ffff;
    border: .025rem solid #7e93af;
    border-top: none
}

.info>.info_field>.field_chart>.chart_text .text_list>li {
    padding: 0 .25rem;
    line-height: 1rem
}

.info>.info_field>.field_chart>.chart_text .text_list>li a {
    display: block;
    width: 100%;
    height: 1rem;
    color: #332c2b
}

.info>.info_field>.field_btn {
    width: 7.375rem;
    margin: .5rem auto;
    padding: .025rem;
    opacity: .85;
    background: linear-gradient(-90deg, #216cb7 0, #0aa6d3 100%);
    border-radius: 4PX;
    line-height: 1.5rem;
    text-align: center
}

.info>.info_field>.field_btn a {
    display: block;
    width: 100%
}

@media screen and (max-width:1218px) {
    .info>.info_field {
        bottom: 0
    }
}

@media screen and (max-width:768px) {
    .info>.info_field {
        bottom: .75rem;
        padding: .75rem .25rem
    }

    .info>.info_field>.field_subtitlr h3 {
        text-align: center;
        font-size: 1rem;
        line-height: 1.25rem
    }

    .info>.info_field>.field_subtitlr p {
        text-align: center;
        font-size: .7rem
    }

    .info>.info_field>.field_chart {
        width: 100%;
        height: 25.125rem;
        margin: 1.5rem auto
    }

    .info>.info_field>.field_chart>.chart_text {
        width: 100%;
        height: 11%
    }

    .info>.info_field>.field_chart>.chart_text>label {
        display: block;
        width: 101%;
        font-size: .7rem
    }

    .info>.info_field>.field_chart>.chart_text>.btn {
        top: .9rem
    }

    .info>.info_field>.field_chart>.chart_text>input {
        height: 1.75rem
    }

    .info>.info_field>.field_chart>.chart_text .text_list {
        width: 99%;
        right: .05rem
    }

    .info>.info_field>.field_chart>.chart_text .text_list a {
        font-size: .4rem
    }

    .info>.info_field>.field_chart>.chart_text>textarea {
        width: 98%;
        height: 3.875rem
    }

    .info>.info_field>.field_chart>.chart_min {
        height: 4.875rem
    }

    .info>.info_field>.field_btn a {
        font-size: .7rem
    }
}