@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: #303033;
    font-family: 'Noto Sans KR', sans-serif;
    list-style: none;
}

.container{
    min-width: 360px;
}

@media only screen and (max-width:1670px){
    .txt br{
        display: none;
    }
}



/* 모바일 */
/* 회사개요 */
.full-bg{
    padding-bottom: 80px;
}

.co-inner{
    padding: 40px 30px 70px;
    background: rgba(0, 0, 0, 0.7);
}

.co-sub-title table{
    border-color:#fff;
    border: 1px solid #A0A3A6;
    background-color: #3A3C3E;
}

.co-sub-title table tr th,
.co-sub-title table tr td{
    color: #fff;
    border-bottom: 1px solid #A0A3A6;
    padding: 10px;
}

.co-sub-title table tr th{
    background-color: #495C6D;
    border-right: 1px solid #A0A3A6;
    font-weight: 400;
}

.co-sub-title table tr td{
    font-weight: 300;
}

.co-sub-title.img{
    text-align: center;
}

.co-sub-title.img p{
    text-align: left;
}

.co-sub-title.img img{
    width: 90%;
}


/* 회사연혁 */
.history-list{
    margin: 0 20px 50px 20px;
    background: url('../images/history_line.png') repeat-y left top;
    padding: 30px 0;
}


.history-list .year{
    color: #1C8D74;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
}

.year:before{
    content:"";
    display: block;
    background: url('../images/history_arrow_R.png') no-repeat center;
    position: absolute;
    width: 28px;
    height: 28px;
    top: 50%;
    left: -40px;
    transform: translate(-50%,-50%);
}

.txtareaL, .txtareaR{
    margin-bottom: 70px;
    padding-left: 40px;
    position: relative;
}

.year{
    padding-right: 15px;
    font-weight: 500;
}

.line{
    margin-bottom: 40px;
}

.list div{
    overflow: hidden;
    margin-bottom: 7px;
    font-size: 0.9375rem;
}

.list div:last-of-type{
    margin-bottom: 0;
}


.txtareaR .list div .month,
.txtareaL .list div .month{
    font-weight: 500;
    margin-right: 15px;
    float: left;
    line-height: 1.8;
}

.txtareaR .list div .info,
.txtareaL .list div .info{
    width: calc(100% - 80px);
    text-align: left;
    vertical-align: top;
    word-break: keep-all;
    float: right;
    font-weight: 300;
    line-height: 1.8;
}


/* 인증서 */

.certificate > div{
    margin-bottom: 50px;
}

.certificate div article{
    text-align: center;
    background-color: #E9E9F0;
    padding: 20px 16px 30px;
    margin-bottom: 30px;
}

.certificate div article ul{
    overflow: hidden;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.sub-title{
    font-size: 1.125rem;
    font-weight: 600;
    border-bottom: 1px solid #1B7889;
    display: inline-block;
    padding: 0 15px 7px 15px;
    margin-bottom: 30px;
    color: #1B7889;
}

.file-con{
    text-align: center;
    display: inline-block;
    margin:0 1.3% 30px 1.3%;
}

.file-con:last-of-type{
    margin-bottom: 0;
}

.file-con p{
    margin-bottom: 0.3rem;
}

.file-con img{
    width:150px;
}




/* 조직도 */
.org_chart{
    margin: 0 auto 90px auto;
    text-align: center;
    padding: 0 16px;
}

.department, .boss{
    margin-bottom: 60px;
}

.boss span,
.department span{
    color: #fff;
    display: inline-block;
    padding: 15px 40px;
    background-color: #1B7889;
    margin-bottom: 10px;
}

.department div p{
    padding: 7px 30px;
    background-color: #94bdba;
    margin-bottom: 5px;
    color: #fff;
    text-align: center;
}

.boss li,
.department li{
    padding: 15px 30px;
    line-height: 1.3;
    vertical-align: middle;
    border: 1px solid #3A3C3E;
    margin: 0 0 5px 0;
}



/* 오시는길 */
.co_adr{
    margin: 0 16px 50px;
    position: relative;
    height: 900px;
}

.tab_adr{
    position: absolute;
    top:10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.tab_adr input[type=radio]{
    display: none;
}

.tab_adr input[id=adr_tab01] + label,
.tab_adr input[id=adr_tab02] + label{
    background-color: #a6b0ca;
    padding: 10px 20px;
    vertical-align: middle;
    color: #fff;
    cursor: pointer;
}

.tab_adr input[id=adr_tab01] + label{
    margin-right: -5px;
}

.tab_adr input[id=adr_tab01]:checked + label,
.tab_adr input[id=adr_tab02]:checked + label{
    background-color: #1B7889;
    padding: 10px 20px;
    vertical-align: middle;
    color: #fff;
    font-weight: 500;
}

.adr_box{
    margin: 0 auto;
}

.office-adr,
.research-adr{
    display: none;
}

input[id=adr_tab01]:checked ~ .adr_box .office-adr{
    display: block;
}

input[id=adr_tab02]:checked ~ .adr_box .research-adr{
    display: block;
}

.adr_box div iframe{
    width: 100%;
    position: relative;
    top: 15px;
    margin-bottom: 40px;
}

.adr_inner{
    margin: 0 auto;
}

.details{
    padding-bottom: 20px;
    border-bottom: 1px solid #303033;
    margin-bottom: 20px;
}

.details div{
    display: inline-block;
    vertical-align: middle;
}

.details img{
    width: 14%;
    margin-right: 3%;
    vertical-align: middle;
}

.details div p{
    font-size: 1.125rem;
    font-weight: 500;
}

@media screen and (max-width:400px){
    .research-adr .adr_inner .details div p{
        font-size: 1rem;
    }
}

.details div span{
    font-size: 0.875rem;
    color:rgba(115, 115, 119, 0.7)
}

.adr_traffic div{
    padding-bottom: 15px;
}

.adr_traffic div{
    margin-bottom: 30px;
}

.bus, .subway{
    padding: 7px 12px;
    background-color:#edeff3;
}

.bus_num{
    padding: 10px 0 0 10px;
    margin-bottom: 10px;
    font-weight: 500;
}

.adr_traffic span, .adr_traffic .explain{
    display: inline-block;
    padding: 10px 0 0 10px;
}




/* 태블릿 */
@media screen and (min-width:768px){
    /* 회사개요*/
    .full-bg{
        padding: 80px 0 140px;}

    .co-inner{
        padding: 4.375% 4.375%; border-radius: 50px;
    }
    .txt{
        font-size: 16px;
    }

    /* 회사연혁 */
    .history-list{
        margin: 0 auto 50px;
        background: url('../images/history_line.png') repeat-y center top;
        padding: 30px 16px;
        overflow: hidden;
    }

    .history-list:after{
        content:"";
        display: block;
        width: 100%;
        height: 800px;
        position: fixed;
        bottom: -24%;
        left: -1px;
        z-index:-1;
        background:url(../images/history_bg.png) no-repeat bottom center;
        background-size: cover;
    }
    
    .line{
        overflow:hidden;
        position: relative;
    }

    .txtareaL, .txtareaR{
        padding-left: 0;
        margin-bottom:20px;
    }
    
    .txtareaL{
        float: left;
        width: 50%;
        text-align: right;
        right: 50px;
        top: 0;
    }

    
    .txtareaR{
        float: right;
        width: 50%;
        top: 0;
        left: 50px;
    }

    .txtareaR.bg1:before{
        content:"";
        display:block;
        width: 500px;
        height: 380px;
        position: absolute;
        top: 10%;
        right: 105%;
        background: url(../images/history_img1.svg) no-repeat center center;
        background-size: auto 380px;
    }

    .txtareaL.bg2:before{
        content:"";
        display:block;
        width: 500px;
        height: 380px;
        position: absolute;
        top: -22%;
        left: 105%;
        background: url(../images/history_img2.svg) no-repeat center center;
        background-size: auto 280px;
    }

    .txtareaL.bg3:before{
        content:"";
        display:block;
        width: 500px;
        height: 380px;
        position: absolute;
        top: -37%;
        left: 103%;
        background: url(../images/history_img3.svg) no-repeat center center;
        background-size: auto 240px;
    }

    .txtareaR.bg4:before{
        content:"";
        display:block;
        width: 500px;
        height: 380px;
        position: absolute;
        top: -74%;
        right: 100%;
        background: url(../images/history_img4.svg) no-repeat center center;
        background-size: auto 200px;
    }

    .txtareaL.bg5:before{
        content:"";
        display:block;
        width: 500px;
        height: 380px;
        position: absolute;
        top: -115%;
        left: 100%;
        background: url(../images/history_img5.svg) no-repeat center center;
        background-size: auto 155px;
    }

    .txtareaL .year{
        padding-right:0;
    }

    .history-list .year{
        font-size: 2.5rem;
    }

    .txtareaL .year:after{
        content:"";
        display: block;
        background: url('../images/history_arrow_L.png') no-repeat center;
        position: absolute;
        width: 28px;
        height: 28px;
        top: 50%;
        right: -78px;
        transform: translate(-50%,-50%);
    }

    .txtareaR .year:before{
        content:"";
        display: block;
        background: url('../images/history_arrow_R.png') no-repeat center;
        position: absolute;
        width: 28px;
        height: 28px;
        top: 50%;
        left: -50px;
        transform: translate(-50%,-50%);
    }

    .list div{
        margin-bottom: 7px;
        font-size: 1rem;
    }
    
    .list div:last-of-type{
        margin-bottom: 0;
    }

    .txtareaL .list div .month{
        float: right;
        margin-right: 0;
        margin-left: 15px;
    }

    
    
    .txtareaR .list div .info{
        text-align: left;
    }

    .txtareaL .list div .info{
        float: left;
        text-align: right;
    }



    /* 인증서 */

    .certificate div article{
        padding: 50px 15%;
    }

    .certificate div article ul{
        max-width: 1300px;
    }

    .sub-title{
        font-size: 1.625rem;
        padding: 0 15px 7px 15px;
        margin-bottom: 50px;
    }

    .file-con{
        margin:0 3% 30px 3%;
        
    }

    .file-con p{
        margin-bottom: 0.625rem;
        font-size: 1.125rem;
    }

    .file-con img{
        width:180px;
    }
    


    /* 조직도 */
    .boss{
        width: 45%;
        margin: 0 auto;
    }

    .department, .boss{
        margin-bottom: 60px;
    }

    .department{
        display: inline-block;
        width: 45%;
        margin-right: 2%;
        margin-bottom: 40px;
        vertical-align: top;
    }
    
    .department:nth-child(odd){
        margin-right: 0;
    }
    


    /* 오시는길 */
    .details{
        text-align: center;
        margin-bottom: 40px;
    }

    .adr_box div iframe{
        margin-bottom: 50px;
    }

    .details img{
        width: 70px;
        margin-right: 3%;
    }

    .details div p{
        font-size: 1.375rem;
    }

    .adr_traffic div:first-of-type{
        float: left;
        width: 49%;
    }
    .adr_traffic div:last-of-type{
        float: right;
        width: 49%;
    }

}
    


/* 데스크탑 */
@media screen and (min-width:1024px){
    /* 회사개요 */
    .co-inner.box01 p{
        font-size: 1.875rem;
    }

    /* 인증서 */
    .certificate div{
        margin: 0 auto;
    }

    .certificate div article{
        padding: 50px 15%;
    }

    .certificate div article ul{
        max-width: 1300px;
    }

    .sub-title{
        padding: 0 15px 7px 15px;
        margin-bottom: 50px;
    }

    .file-con{
        margin:0 5% 30px 5%;
        
    }

    .file-con p{
        margin-bottom: 0.625rem;
        font-size: 1.125rem;
    }

    .file-con img{
        width: 280px;
    }


    /* 조직도 */
    .org_chart{
        max-width: 1300px;
        margin-top: 60px;
    }

    .boss{
        background: url(../images/org_chart.svg) no-repeat bottom center;
        background-size: 65%;
        padding-bottom: 140px;
        width: 100%;
        margin-bottom: 20px;
    }
 
    .department{
        width: 22%;
    }

    .boss span,
    .department span{
    color: #fff;
    display: block;
    padding: 15px 30px;
    background-color: #2B4A78;
    margin-bottom: 10px;
}

    .boss span{
    display: inline-block;
    padding: 15px 80px;
}

    .department div p{
    padding: 7px 30px;
    background-color: #8ca1be;
    margin-bottom: 5px;
    color: #fff;
    text-align: center;
    display: block;
}

    .boss li{
    padding: 15px 30px;
    display: inline-block;
    width: 20%;
    }

    .department:nth-child(odd){
        margin-right: 20px;
    }

    .department:last-of-type{
        margin-right: 0;
    }


    /* 오시는 길 */
    .co_adr{
        margin: 0 auto 50px;
        max-width: 1300px;
    }

    .details{
        text-align: left;
    }
}





.clear{
    content:'';
    display: block;
    clear: both;
}