.com-top {
    position: relative;
    display: block;
    width: 100%;
    /* height: 100vh; */
    background: url('../../img/front/about/transcon-indonesia-company-profile-background-alt2.jpg') no-repeat;
    background-position: 50% !important;
    background-size: cover !important;
    color: #fff;
}

.com-top:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: url('../../img/front/transcon-indonesia-looping-background.png') repeat;
}

.com-top:after {
    content: '';
    position: absolute;
    display: block;
    width: 9px;
    height: 112px;
    bottom: 40px;
    left: calc((100% - 9px) / 2);
    background: url('../../img/front/about/bottom-arrow-icon.png') no-repeat;
    background-size: cover !important;
    background-position: left bottom;

    -webkit-animation: downArrow 2s linear infinite;
    -moz-animation: downArrow 2s linear infinite;
    -ms-animation: downArrow 2s linear infinite;
    animation: downArrow 2s linear infinite;
}

@keyframes downArrow {
    0% {
        background-position: bottom -100% left 0px;
    }
    50% {
        background-position: bottom 0% left 0px;
    }
	100% {
        background-position: bottom 200% left 0px;
    }
}

.com-top-content {
    position: relative;
    display: block;
    margin: 0px auto;
    text-align: center;
    font-size: 19px;
    /* z-index: 1; */
    font-weight: normal;
}

.com-top-content span {
    position: relative;
    display: block;
}

.com-top-title {
    font-size: 64px;
    line-height: 57px;
    margin-bottom: 20px;
}

.com-top-desc {
    margin-bottom: 25px;
}

.com-top-content-line {
    position: relative;
    display: block;
    width: 220px;
    height: 5px;
    background: #3d4094;
    margin: 0px auto;
}

.com-top-content-line:after {
    content: '';
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    top: 0px;
    right: 0px;
    background: #ec3137;
}

.com-about {
    position: relative;
    min-height: 500px;
    width: 100%;
    background: #fff;
    margin: 0px;
}

.com-about:before {
    content: '';
    position: absolute;
    display: block;
    width: 482px;
    height: 267px;
    top: 0px;
    left: 42px;
    background: url('../../img/front/home/transcon-indonesia-digital-map-background-2x.png') no-repeat;
    background-size: contain !important;
    background-position: top left !important;
}

.com-about:after {
    content: '';
    position: absolute;
    display: block;
    width: 1px;
    height: 144px;
    top: calc((100% - 144px) / 2);
    left: calc((100% - 2px) / 2);
    background: #222;
}

.com-about-item-content {
    position: relative;
    display: block;
    width: calc(100% - 80px);
    max-width: 496px;
    margin: 0px auto;
}

.com-about-video.mob {
    display: none;
}

.com-about-title {
    position: relative;
    display: block;
    font-size: 48px;
    line-height: 40px;
    margin-bottom: 30px;
}

.com-about-desc {
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 30px;
}

.com-vision {
    position: relative;
    display: block;
    height: 625px;
    width: 100%;
    background: url('../../img/front/about/transcon-indonesia-wall-background.jpg') no-repeat;
    background-size: cover !important;
    background-position: 50% !important;
    color: #fff;
}

.com-vision-content {
    position: relative;
    display: block;
    text-align: center;
    width: calc(100% - 60px);
    max-width: 720px;
}

.com-vision-content * {
    position: relative;
    display: block;
}

.com-vision-title-sm {
    font-size: 19px;
    line-height: 24px;
    margin-bottom: 15px;
}

.com-vision-title {
    font-size: 28px;
    margin: 0px 0px 35px;
    padding-bottom: 35px;
}

.com-vision-title:after {
    content: '';
    position: absolute;
    display: block;
    width: 160px;
    height: 1px;
    background: #fff;
    bottom: 0px;
    left: calc((100% - 160px) / 2);
}

.com-vision-desc {
    font-size: 19px;
    line-height: 24px;
}

.com-vision-desc strong {
    display: inline-block;
}

.com-vision-abstract-container {
    position: absolute;
    display: block;
    width: 1530px;
    height: 333px;
    left: calc((100vw - 1530px) / 2);
    bottom: -139px;
}

.com-vision-abstract {
    position: absolute;
    display: block;
    width: 300px;
    height: 333px;
    background: url('../../img/front/about/company-profile-abstract-1530.png') no-repeat;
    background-size: 1530px auto !important;

    -webkit-animation: abstractAnim 8s linear infinite;
    -moz-animation: abstractAnim 8s linear infinite;
    -ms-animation: abstractAnim 8s linear infinite;
    animation: abstractAnim 8s linear infinite;
}

/* @keyframes abstractAnim {
    0% {
        left: -200px;
        background-position: calc(((1530px / 2) - 50vw - 200px) * -1) 0px;
    }
    10% {
        left: -200px;
        background-position: calc(((1530px / 2) - 50vw - 200px) * -1) 0px;
    }
    90% {
        left: 100%;
        background-position: calc(((1530px / 2) + 50vw) * -1) 0px;
    }
	100% {
        left: 100%;
        background-position: calc(((1530px / 2) + 50vw) * -1) 0px;
    }
} */

@keyframes abstractAnim {
    0% {
        left: -300px;
        background-position: 300px 0px;
    }
	100% {
        left: 1530px;
        background-position: -1530px 0px;
    }
}

.com-history {
    position: relative;
    display: block;
}

.com-history-title {
    position: relative;
    display: block;
    font-size: 48px;
    padding-top: 155px;
    line-height: 48px;
    margin: 0px auto 55px;
    text-align: center;
}

.com-history-desc {
    position: relative;
    max-width: 900px;
    width: calc(100% - 80px);
    margin: 0px auto 135px;
}

.com-history-desc-item {
    padding: 0px;
    font-size: 16px;
    line-height: 30px;
}

.com-history-desc-item:first-child {
    padding-right: 65px;
}

.com-history-desc-item:last-child {
    padding-left: 65px;
}

.com-history-content {
    position: relative;
    max-width: 1100px;
    width: calc(100% - 60px);
    margin: 0px auto;
    padding-top: 20px;
}

.com-history-content:before {
    content: '';
    position: absolute;
    display: block;
    width: 2px;
    height: 100%;
    background: #d3d3d3;
    left: calc((100% - 2px) / 2);
    top: 0px;
}

.com-history-content-group {
    position: relative;
    width: 100%;
    margin: 0px 0px 40px;
}
.com-history-content-group:last-child {
    margin-bottom: 110px;
}

.com-history-content-group:last-child:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 50%;
    background: #fff;
    left: 0px;
    bottom: 0px;
}

.com-history-content-item {
    position: relative;
    padding: 0px 0px 0px 240px;
}

.com-history-content-item.left:before {
    content: '';
    position: absolute;
    display: block;
    width: 205px;
    height: 2px;
    background: #d3d3d3;
    top: calc((100% - 2px) / 2);
    right: 0px;
}

.com-history-content-item.right:before {
    content: '';
    position: absolute;
    display: block;
    width: 205px;
    height: 2px;
    background: #d3d3d3;
    top: calc((100% - 2px) / 2);
    left: 0px;
}

.com-history-content-item:first-child {
    padding: 0px 240px 0px 0px;
}

.com-history-content-year {
    position: absolute;
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    line-height: 96px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    left: calc((100% - 96px) / 2);
    top: calc((100% - 96px) / 2);
}

.com-history-content-image {
    position: relative;
    display: block;
    max-width: 277px;
    max-height: 208px;
    margin-bottom: 20px;
}

.com-history-content-image.sumatra {
    margin-top: -54px;
}

.com-history-content-desc {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 40px;
    font-size: 16px;
    line-height: 30px;
}

.com-history-content-desc:before {
    content: '';
    position: absolute;
    display: block;
    width: 80px;
    height: 5px;
    background: #3d4094;
    bottom: 0px;
    left: 0px;
}

.com-history-content-desc:after {
    content: '';
    position: absolute;
    display: block;
    width: 80px;
    height: 5px;
    background: #ec3137;
    bottom: 0px;
    left: 80px;
}

@media screen and (max-width : 1366px) {
    /* .com-vision-abstract {
        position: absolute;
        display: block;
        width: 200px;
        height: 296px;
        bottom: -122px;
        background: url('../../img/front/about/company-profile-abstract-1366.png') no-repeat;
        background-size: 1366px auto !important;

        -webkit-animation: abstractAnim 8s linear infinite;
        -moz-animation: abstractAnim 8s linear infinite;
        -ms-animation: abstractAnim 8s linear infinite;
        animation: abstractAnim 8s linear infinite;
    }

    @keyframes abstractAnim {
        0% {
            left: -200px;
            background-position: calc(((1366px / 2) - 50vw - 200px) * -1) 0px;
        }
        10% {
            left: -200px;
            background-position: calc(((1366px / 2) - 50vw - 200px) * -1) 0px;
        }
        90% {
            left: 100%;
            background-position: calc(((1366px / 2) + 50vw) * -1) 0px;
        }
        100% {
            left: 100%;
            background-position: calc(((1366px / 2) + 50vw) * -1) 0px;
        }
    } */
}

/* Desktops and laptops */
@media screen and (max-width : 1366px) {
    .com-top-title {
        font-size: 55px;
        line-height: 50px;
    }
}

/* Tablet */
@media screen and (max-width: 1024px) {
	.com-history-content-image {
        max-width: 100%;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    .com-about {
        padding: 80px 0px;
        height: auto;
    }

    .com-about:after {
        display: none;
    }

    .com-about-item {
        width: 100%;
        max-width: 100%;
        flex: 100%;
        padding: 0px;
    }

    .com-about-item-content {
        max-width: unset;
        text-align: center;
    }

    .com-about-item.desk {
        display: none;
    }

    .com-about-video.mob {
        display: block;
    }

    .com-about-video {
        margin-bottom: 20px;
        width: 100% !important;
    }

    .com-vision {
        height: auto;
        padding: 80px 40px;
    }

    .com-vision-title {
        font-size: 45px;
    }

    .com-history-content {
        padding-top: 50px;
    }

    .com-history-title {
        padding-top: 80px;
    }

    .com-history-desc-item:first-child {
        padding-right: 40px;
    }

    .com-history-desc-item:last-child {
        padding-left: 40px;
    }

    .com-history-content-item.left:before {
        display: none;
    }

    .com-history-content-item.right:before {
        display: none;
    }

    .com-history-content-group {
        padding-top: 150px;
        margin: 0px;
    }

    .com-history-content-year {
        top: 0px;
    }

    .com-history-content-item {
        display: none;
    }

    .com-history-content-item.left {
        display: block;
        padding: 30px 0px;
        width: calc(100% - 80px);
        max-width: 100%;
        flex: 100%;
        text-align: center;
        background: #fff;
        margin-bottom: 50px;
    }

    .com-history-content-item.right {
        display: block;
        padding: 30px 0px;
        width: calc(100% - 80px);
        max-width: 100%;
        flex: 100%;
        text-align: center;
        background: #fff;
        margin-bottom: 50px;
    }

    .com-history-content-image {
        position: relative;
        display: block;
        margin: 0px auto 10px !important;
    }

    .com-history-content-image.sumatra {
        margin: 20px auto 30px !important;
    }

    .com-history-content-desc:before {
        right: 50%;
        left: auto;
    }

    .com-history-content-desc:after {
        left: 50%;
    }

    .com-history-content-group:last-child:before {
        background: transparent;
    }

    .com-history-content-group:last-child .com-history-content-item.right {
        margin-bottom: 0px;
    }
}

@media screen and (max-width : 500px) {
    .com-top:after {
        width: 9px;
        height: 80px;
        bottom: 30px;

        -webkit-animation: downArrow 2.5s linear infinite;
        -moz-animation: downArrow 2.5s linear infinite;
        -ms-animation: downArrow 2.5s linear infinite;
        animation: downArrow 2.5s linear infinite;
    }

    .com-top-content span {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 25px;
    }

	.com-top-content span.com-top-title {
        font-size: 35px;
        line-height: 35px;
        margin-bottom: 15px;
    }

    .com-top-content-line {
        width: 140px;
    }

    .com-about {
        padding: 80px 0px;
    }

    .com-about:before {
        width: 265px;
        height: 147px;
    }

    .com-about-title {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    .com-about-item-content {
        width: calc(100% - 40px);
    }

    .com-about-desc {
        font-size: 14px;
        text-align: left;
        line-height: 24px;
    }

    .com-vision {
        padding: 80px 20px;
    }

    .com-vision-content {
        width: 100%;
    }

    .com-vision-title-sm {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .com-vision-title {
        font-size: 23px;
        line-height: 32px;
    }

    .com-vision-desc {
        font-size: 14px;
    }

    .com-history-title {
        padding-top: 50px;
        font-size: 30px;
        line-height: 32px;
        margin: 0px auto 30px;
    }

    .com-history-desc {
        width: calc(100% - 40px);
        margin: 0px auto 80px;
    }

    .com-history-desc-item {
        padding: 0px !important;
        font-size: 14px;
        line-height: 24px;
    }

    .com-history-desc-item:first-child {
        margin-bottom: 20px;
    }

    .com-history-content-desc {
        font-size: 14px;
        line-height: 24px;
    }

    .com-history-content-year {
        width: 70px;
        height: 70px;
        line-height: 70px;
        font-size: 14px;
        left: calc((100% - 70px) / 2);
    }

    .com-history-content:before {
        width: 3px;
        left: calc((100% - 3px) / 2);
    }

    .com-history-content-group {
        padding-top: 120px;
        font-size: 14px;
    }

    .com-history-content-group:last-child {
        margin-bottom: 50px;
    }

    .wa-icon.active {
		bottom: -30px !important;
	}
}