.top {
    display: block;
    position: relative;
    height: 388px;
    background: rgba(65,191,170,1);
    background: -moz-linear-gradient(-45deg, rgba(65,191,170,1) 0%, rgba(80,108,170,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,191,170,1)), color-stop(100%, rgba(80,108,170,1)));
    background: -webkit-linear-gradient(-45deg, rgba(65,191,170,1) 0%, rgba(80,108,170,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(65,191,170,1) 0%, rgba(80,108,170,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(65,191,170,1) 0%, rgba(80,108,170,1) 100%);
    background: linear-gradient(135deg, rgba(65,191,170,1) 0%, rgba(80,108,170,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41bfaa', endColorstr='#506caa', GradientType=1 );
}

.top__logo {
    display: block;
    position: absolute;
    bottom: 256px;
    left: calc(50% - 43px);
    width: 86px;
    height: 86px;
    background-image: url(../assets/images/app_logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.top__title {
    display: block;
    position: absolute;
    bottom: 172px;
    width: 100%;
    color: #FFFFFF;
    font-size: 3.7em;
    text-align: center;
    font-weight: 600;
    opacity: .9;
}

.top__line {
    display: block;
    position: absolute;
    left: calc(50% - 500px);
    bottom: 0;
    width: 1000px;
    height: 274px;
    opacity: .67;
}

.top_remark {
    display: block;
    position: absolute;
    bottom: 110px;
    width: 100%;
    text-align: center;
    font-size: 2.5em;
}

.top_remark__text {
    display: inline-block;
    position: relative;
    padding: 3px 6px;
    background-color: #000000;
    color: #FFFFFF;
    font-size: .8em;
    z-index: 2;
}

/*Responsive Styles*/
/* Smartphones (portrait) ---------------- */
@media only screen
and (max-width : 414px)
and (orientation : portrait) {
    .top {
        height: 257px;
    }

    .top__logo {
        bottom: 127px;
        transform: scale(.8);
    }

    .top__title {
        bottom: 108px;
        font-size: 1.35em;
        white-space: nowrap;
    }

    .top__line {
        display: none;
        left: calc(50% - 170px);
        width: 340px;
        height: 183px;
    }

    .top_remark {
        bottom: 76px;
        font-size: 1.3em;
    }

    .container {
        width: 340px;
    }
}

/* Smartphones (landscape) ---------------- */
@media only screen
and (min-width : 415px)
and (max-width : 813px)
and (orientation : landscape) {
    .top {
        height: 152px;
    }

    .top__logo {
        display: none;
        bottom: 64px;
        transform: scale(.7);
    }

    .top__title {
        bottom: 60px;
        font-size: 2.2em;
    }

    .top__line {
        display: none;
        left: calc(50% - 300px);
        width: 600px;
    }

    .top_remark {
        display: none;
    }

    .container {
        width: 600px;
    }
}

/* Tablets (portrait) -------------------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    .top {
        height: 410px;
    }

    .top__logo {
        bottom: 204px;
        transform: scale(1);
    }

    .top__title {
        bottom: 132px;
        font-size: 2.5em;
    }

    .top__line {
        left: calc(50% - 350px);
        width: 700px;
        height: 220px;
    }

    .top_remark {
        bottom: 82px;
    }

    .container {
        width: 700px;
    }
}

/* Tablets (landscape) ------------------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    .top {
        height: 273px;
    }

    .top__logo {
        bottom: 164px;
        transform: scale(.8);
    }

    .top__title {
        bottom: 124px;
        font-size: 1.5em;
    }

    .top__line {
        left: calc(50% - 400px);
        width: 800px;
        height: 185px;
    }

    .top_remark {
        display: none;
    }

    .container {
        width: 800px;
    }
}

/* Old Desktops and laptops ------------------ */
@media only screen
and (min-width : 1025px) {
    .top__logo {
        bottom: 256px;
        transform: scale(1);
    }

    .top__title {
        bottom: 172px;
        font-size: 3em;
    }

    .top__line {
        left: calc(50% - 450px);
        width: 900px;
    }

    .container {
        width: 900px;
    }
}

/* Desktops ------------------ */
@media only screen
and (min-width : 1201px) {
    .top__logo {
        bottom: 256px;
        transform: scale(1);
    }

    .top__title {
        bottom: 170px;
        font-size: 3.7em;
    }

    .top__line {
        left: calc(50% - 500px);
        width: 1000px;
    }

    .container {
        width: 1000px;
    }
}

/* iPhone X ------------------ */
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2),
only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3),
only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 3) {
    .top__logo {
        bottom: 133px;
        transform: scale(1);
    }

    .top__title {
        bottom: 105px;
        font-size: 1.3em;
    }

    .top__line {
        bottom: 5px;
        left: calc(50% - 170px);
    }
}