@charset "utf-8";

/*
Theme Name:     astraChild
Description:    eCIS에서 제작한 커스텀 테마입니다.
Author:         Ecis co.,ltd.
Author URI:     http://ecis.co.kr/
Template:       astra
*/


/* common-style */
.number-wrap {
    counter-reset: progress;
}

ul.number>li {
    position: relative;
    padding: 0 0 0 2.8rem;
    margin: 0 0 0.4rem 0;
}

ul.number>li:last-child {
    margin: 0;
}

ul.number>li::before {
    display: block;
    counter-increment: progress;
    content: counter(progress);
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #aaa;
    color: #fff;
    position: absolute;
    top: 3px;
    left: 0;
    font-size: 1.4rem;
    border-radius: 50px;
}

ul.dot>li {
    position: relative;
    padding: 0 0 0 1.6rem;
    margin: 0 0 0.6rem 0;
    font-size: 1.8rem;
}

ul.dot>li:last-child {
    margin: 0;
}

ul.dot>li::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #aaa;
    position: absolute;
    top: 11px;
    left: 0;
    border-radius: 50px;
}

ul.line {
    margin: 0;
    padding: 0;
}

ul.line>li {
    font-size: 1.8rem;
    position: relative;
    padding: 0 0 0 1.6rem;
    margin: 0 0 0.4rem 0;
}

ul.line>li::before {
    content: '';
    width: 8px;
    height: 2px;
    background-color: #aaa;
    position: absolute;
    top: 13px;
    left: 0;
}

@media screen and (max-width: 991px) {
    ul.number li {
        padding: 0 0 0 2.4rem;
    }

    ul.number li::before {
        width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 1.2rem;
    }


    ul.line>li,
    ul.dot>li {
        font-size: 1.4rem;
    }

    ul.dot li::before {
        width: 4px;
        height: 4px;
        top: 8px;
    }
}


@media screen and (max-width: 768px) {

    ul.line>li::before,
    ul.dot>li::before {
        top: 10px;
    }
}


/* sub common */
.page-hero h1 {
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
}

.page-hero h2 {
    color: rgba(255, 255, 255, 0.8);
    text-transform: capitalize;
    font-weight: 500;
}

.breadcrumb {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: capitalize;
}

@media screen and (max-width: 991px) {
    .page-hero>.e-con-boxed>.e-con-inner>.e-child {
            justify-content: center;
        }
    
    .page-hero .elementor-heading-title{
        text-align: center;
    }


    .breadcrumb {
        font-size: 1.2rem;
    }

    
}

.contents-hedaer h1{
    text-align: center;
    text-transform: uppercase;
}

#lnb{
    margin: 0 0 2rem 0;
}

#lnb li{
    flex: 1;
}

#lnb li a{
    justify-content: center;
}


/* subpage design */

/* history */
.sub-history .timeline {
    position: relative;
}

.sub-history .timeline ul {
    display: flex;
}

.sub-history .timeline ul li {
    z-index: 1;
    flex: 1 0;
}

.sub-history .timeline li:before {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    text-align: center;
    line-height: 80px;
    margin: 0 auto 1.6rem auto;
    color: #fff;
    transition: all ease-in-out .3s;
    font-weight: 500;
}

.sub-history .timeline01 ul li:nth-child(1):before {
    content: '1995';
    background: #99CCFF;
}

.sub-history .timeline01 ul li:nth-child(2):before {
    content: '2001';
    background: #86B8F6;
}

.sub-history .timeline01 ul li:nth-child(3):before {
    content: '2004';
    background: #74A4ED;
}

.sub-history .timeline02 ul li:nth-child(1):before {
    content: '2008';
    background: #628FE4;
}

.sub-history .timeline02 ul li:nth-child(2):before {
    content: '2013';
    background: #507BDD;
}

.sub-history .timeline02 ul li:nth-child(3):before {
    content: '2014';
    background: #3E67D5;
}

.sub-history .timeline03 ul li:nth-child(1):before {
    content: '2017';
    background: #3151C5;
}

.sub-history .timeline03 ul li:nth-child(2):before {
    content: '2022';
    background: #2E3CAB;
}

.sub-history .timeline03 ul li:nth-child(3):before {
    content: '2023';
    background: #2E3192;
}

.sub-history .timeline04 ul li:nth-child(1):before {
    content: '2025';
    background: #2E3192;
}


.sub-history .timeline ul:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background: #99CCFF;
    background: linear-gradient(45deg, rgba(144, 215, 237, 1) 0%, rgba(67, 96, 167, 1) 100%);
    top: 40px;
    z-index: 0;
    transition: all ease-in-out .3s;
}

.sub-history .timeline li div {
    position: relative;
    font-size: 1.6rem;
    padding: 0 2rem;
    margin: 0 0 0.6rem 0;
}

.sub-history .timeline li div:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 8px;
    height: 1px;
    border-radius: 30px;
    background: #999;

}

@media screen and (max-width: 768px) {

    .sub-history .timeline ul{
        display: block;
    }

    .sub-history .timeline li {
        overflow: hidden;
        margin: 0 0 2rem 0;
    }

    .sub-history .timeline ul:after{
        display: none;
    }

    .sub-history .timeline li:before{
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin: 0 1.6rem 0 0;
        float: left;
        font-size: 14px;
    }

    .sub-history .timeline li div{
        font-size: 1.4rem;
        float: right;
        width: calc(100% - 70px);
        padding: 0 0 0 16px;
    }

}