.section-description-list {
    list-style: none;
}
    .section-description-list-item {
        display: inline-block;
        background-repeat: no-repeat;
        background-position-x: 0;
        background-position-y: 0;
    }


/*
    ================================================================
    SECTION 1 .first-section
    ================================================================
*/

.first-section {
    background-color: #01579b;
    padding: 70px 0;
    text-align: center;
    color: #fff;
    background-image: url('../storage/images/field-data-flow-page/first-section-main-bg.jpg');
    background-position-x: right;
    background-repeat: no-repeat;
}

    .first-section .section-content-wrap {
        max-width: 910px;
    }

        .first-section .section-header-box {
            margin-bottom: 45px;
        }
            .first-section .section-header {
                font-size: 36px;
                line-height: 1.3em;
            }
            
        .first-section .section-description {
            font-size: 22px;
            line-height: 1.3em;
            font-weight: 100;
        }
                

/*
    ================================================================
    SECTION 2 .feature-points-section
    ================================================================
*/

.feature-points-section {
    padding: 70px 0;
}
    .feature-points-section .section-content-wrap {

    }
        .feature-points-section .section-header-box {
            margin-bottom: 50px;
        }
            .feature-points-section .section-header {
                font-size: 26px;
                opacity: 0;
                animation: fadein 1.5s forwards;
            }
                .feature-points-section .section-header-inner-row-1,
                .feature-points-section .section-header-inner-row-2 {
                    display: block;
                }
                .feature-points-section .section-header-inner-row-1 {
                    margin-bottom: 20px;
                }
        .feature-points-section .section-description-box {

        }
            .feature-points-section .section-description-list {
                width: 100%;
                max-width: 980px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                margin-bottom: 0;
            }
                .f-item-divider {
                    display: none;
                }
                .feature-points-section .section-description-list-item {
                    display: inline-block;
                    background-position-x: center;
                    background-position-y: 0;
                    padding-top: 140px;
                    width: 100%;
                    min-width: 200px;
                    max-width: 240px;
                    font-size: 20px;
                    line-height: 1.3em;
                    vertical-align: top;
                    opacity: 0;
                    animation: fadein 3s forwards;
                }
                .feature-points-section #feature-points-item-1 {
                    background-image: url('../storage/images/field-data-flow-page/feature-points/big/f-1.png');
                    animation-delay: 1s;
                }
                .feature-points-section #feature-points-item-2 {
                    background-image: url('../storage/images/field-data-flow-page/feature-points/big/f-2.png');
                    animation-delay: 2s;
                }
                .feature-points-section #feature-points-item-3 {
                    background-image: url('../storage/images/field-data-flow-page/feature-points/big/f-3.png');
                    animation-delay: 3s;
                }
                .feature-points-section #feature-points-item-4 {
                    background-image: url('../storage/images/field-data-flow-page/feature-points/big/f-4.png');
                    animation-delay: 4s;
                }


/*
    ================================================================
    SECTION 3 .info-points-section
    ================================================================
*/

.info-points-section {
    background: #f5f5f5;
    padding: 70px 0 30px 0;
    color: #212121;
}
    .info-points-section .section-content-wrap {

    }
        .info-points-section .section-header-box {
            margin-bottom: 55px;
        }
            .info-points-section .section-header {
                font-size: 26px;
                line-height: 1.3em;
            }
        .info-points-section .section-description-box {
            position: relative;
        }
            .info-points-section .section-description-list {
                width: 100%;
                max-width: 750px;
                margin: 0 auto;
                column-count: 2;
                column-gap: 10px;
                position: relative;
                right: -50px;
            }
                .info-points-section .section-description-list-item {
                    padding-left: 50px;
                    min-height: 40px;
                    box-sizing: border-box;
                    margin: 0 15px 25px 15px;
                    font-size: 20px;
                    line-height: 1.3em;
                    vertical-align: middle;
                    padding-top: 4px;
                }
                #info-points-item-1 {
                    background-image: url('../storage/images/field-data-flow-page/info-points/i-1.png')
                }
                #info-points-item-2 {
                    background-image: url('../storage/images/field-data-flow-page/info-points/i-2.png')
                }
                #info-points-item-3 {
                    background-image: url('../storage/images/field-data-flow-page/info-points/i-3.png')
                }
                #info-points-item-4 {
                    background-image: url('../storage/images/field-data-flow-page/info-points/i-4.png')
                }
                #info-points-item-5 {
                    background-image: url('../storage/images/field-data-flow-page/info-points/i-5.png')
                }
                #info-points-item-6 {
                    background-image: url('../storage/images/field-data-flow-page/info-points/i-6.png')
                }
                #info-points-item-7 {
                    background-image: url('../storage/images/field-data-flow-page/info-points/i-7.png')
                }


.info-diagrams-section {
    padding: 70px 0;
    text-align: center;
}
    .info-diagrams-section .section-content-wrap {

    }
        .info-diagrams-section .section-description-box {
            font-size: 20px;
            width: 100%;
            max-width: 960px;
            margin: 0 auto 50px auto;
            line-height: 1.3em;
        }
        .info-diagrams-section .section-diagram-box {
            margin-bottom: 50px;
        }
        .info-diagrams-section .action-button-box {
        }
            .info-diagrams-section .flat-action-btn {
                display: inline-block;
                font-weight: 400;
                width: 260px;
                line-height: 64px;
                font-size: 22px;
                margin: 0 20px 30px 20px;
            }


/*
    animations
*/
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
                    

/*
   ==============================================
   MOBILE 
   ==============================================
*/


@media screen and (max-width: 1024px) {
    
/*
    ================================================================
    SECTION 1 .first-section
    ================================================================
*/
    .first-section {
        padding: 60px 0;          
    }
        .first-section .section-header-box {
            margin-bottom: 40px;
        }
            .first-section .section-header {
                font-size: 32px;
            }

/*
    ================================================================
    SECTION 2 .feature-points-section 
    ================================================================
*/
    .feature-points-section {
        padding: 60px 0 30px 0;
    }

        .feature-points-section .section-header {
            font-size: 26px;
        }

/*
    ================================================================
    SECTION 3 .info-points-section 
    ================================================================
*/

    .info-points-section {
        padding: 60px 0 30px 0;
    }
        .info-points-section .section-header-box {
            margin-bottom: 40px;
        }

/*
    ================================================================
    SECTION 4 .info-diagrams-section
    ================================================================
*/
    .info-diagrams-section {
        padding: 60px 0;
    }
        .info-diagrams-section .section-description-box {
            max-width: 890px;
            font-size: 20px;
            margin-bottom: 40px;
        }
        .info-diagrams-section .section-diagram-box {
            margin-bottom: 40px;
        }
}


@media screen and (max-width: 980px) {
    .feature-points-section .section-description-list {
        max-width: 600px;
    }
    .f-item-divider {
        display: block;
        margin-bottom: 30px;
    }

    .first-section,
    .feature-points-section,
    .info-points-section,
    .info-diagrams-section {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media screen and (max-width: 860px) {
    .info-points-section .section-description-list {
        right: -20px;
    }
}

@media screen and (max-width: 800px) {
    /*
    ================================================================
    SECTION 4 .info-points-section 
    ================================================================
    */
    .info-points-section .section-description-list {
        column-count: 1;
        text-align: center;
        max-width: 690px;
        position: static;
    }   
        .info-points-section .section-description-list-item {
            width: 100%;
            max-width: 350px;
            text-align: left;
            margin: 0 0 25px 0;
        }
}

@media screen and (max-width: 780px) {
    .first-section {
        background-image: none;
    }
}

@media screen and (max-width: 619px) {
    /*
    ================================================================
    SECTION 3 .feature-points-section 
    ================================================================
    */
    .feature-points-section .section-description-list {
        max-width: 380px;
    }
        .f-item-divider {
            display: none;
        }
        .feature-points-section .section-description-list-item {
            padding: 12px 0 0 70px;
            max-width: 350px;
            box-sizing: border-box;
            min-height: 54px;
            background-position-x: 0;
            background-position-y: 0;
            text-align: left;
        }
        .feature-points-section #feature-points-item-1 {
            background-image: url(../storage/images/field-data-flow-page/feature-points/min/f-1.png);
        }
        .feature-points-section #feature-points-item-2 {
            background-image: url(../storage/images/field-data-flow-page/feature-points/min/f-2.png);
        }
        .feature-points-section #feature-points-item-3 {
            background-image: url(../storage/images/field-data-flow-page/feature-points/min/f-3.png);
        }
        .feature-points-section #feature-points-item-4 {
            background-image: url(../storage/images/field-data-flow-page/feature-points/min/f-4.png);
        }

}


@media screen and (max-width: 550px) {
    .info-diagrams-section .flat-action-btn {
        margin: 0 0 30px 0;
    }
}

@media screen and (max-width: 414px) {
/*
    ================================================================
    SECTION 1 .first-section
    ================================================================
*/
    .first-section {
        padding-top: 40px;
        padding-bottom: 35px;
        
    }
        .first-section .section-header-box {
            margin-bottom: 20px;
        }
            .first-section .section-header {
                font-size: 26px;
            }
        .first-section .section-description {
            font-size: 20px;
        }

/*
    ================================================================
    SECTION 2 .feature-points-section 
    ================================================================
*/
    .feature-points-section {
        padding-top: 40px;
        padding-bottom: 15px;
    }
        .feature-points-section .section-header-box {
            margin-bottom: 40px;
        }
            .feature-points-section .section-header {
                font-size: 22px;
            }
        

/*
    ================================================================
    SECTION 3 .info-points-section 
    ================================================================
*/

    .info-points-section {
        padding-top: 35px;
        padding-bottom: 10px;
    }


/*
    ================================================================
    SECTION 4 .info-diagrams-section
    ================================================================
*/
    .info-diagrams-section {
        padding-top: 35px;
        padding-bottom: 35px;
    }
        
}


@media screen and (max-width: 380px) {
    .info-points-section .section-description-list-item {
        font-size: 18px;
    }
}