@charset "utf-8";
@media screen and (max-width: 1000px){
    h4{
       word-break: keep-all; 
    }
    #represent .img_holder{
        float: none;
        width: 100%;
    }

    #represent h4{
        text-align: center;
    }
    
    #represent .greets_holder{
        word-break: keep-all;
        width: 100%;
        padding-left: 0;
    }

    #waytocome{
        display: inline-block;
    }

    #represent .greets{
        text-align: center;
    }

    #waytocome .map_holder{
        margin: 0 auto;
        float:none;
        width: 100%;
        max-width: 600px;
        height: 350px;
    }

    #waytocome .map_desc{
        width: 100%;
    }

    #contact{
        margin-top: 0;
    }
}

@media screen and (max-width: 768px){
    header{
        height: 180px;
    }
    
    header h1{
        font-size: 2rem !important;
    }

    .header_wrap{
        margin-top: 2.5rem;
    }

    h3{
        margin-bottom: 15px;
    }

    section{
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .dpnone{
        display: none;
    }

    #intro{
        margin-bottom: 50px;
    }

    #intro p::after{
        white-space: pre;
        content: "금융권 및 ICT분야 최적의 솔루션 제공 및\AIT컨설팅/서비스운영 전문기업";
    }

    #intro .img_holder{
        width: 100%;
        min-width: 100%;
    }

    #intro .img1{
        width: 55%;
    }

    #intro .img2{
        margin:0;
        width: 100%;
    }

    #history{
        margin-top: 70px;
    }

    #domain .wrap{
        width: 100%;
    }

    #domain h4{
        margin-bottom: 30px;
        line-height: 1.5rem;
    }

    #domain h4::after{
        content: "주식회사 온결은 글로벌 IT 트렌드를\A선도하는 IT전문기업으로 보안, 컨설팅, 솔루션 기획 및 개발 등 IT기술의 새로운 패러다임을 창출합니다.";
    }

    #represent h4{
        margin-bottom: 15px;
    }

    #represent h4::after{
        white-space: pre;
        content: "온결은 사람과 기술을 연결하는\A최고의 비즈니스 파트너가 되겠습니다."
    }

    #represent .greets{
        font-size: 12px;
        line-height: 17px;
        text-align: left;
        word-break: keep-all;
    }

    #represent .greets br{
        display: none;
    }

    #represent .greets_holder{
        margin-top: 30px;
    }

    #represent .name{
        font-size: 20px !important;
    }

    #waytocome{
        margin:0;
        margin-bottom: 10px;
    }

    #waytocome .wrap{
        width: 85%;
    }

    #waytocome h3{
        margin-bottom:0;
    }

    #waytocome .map_holder{
        min-width: 0;
        height: 220px;
        margin: 30px 0;
    }

    #waytocome .map_desc{
        padding: 0;
    }

    .map_desc .desc_card .desc{
        font-size: .8rem;
    }
    
    #contact{
        margin: 0;
    }

    #contact p{
        font-size: 1rem !important;
        line-height: 2rem;
        padding-bottom: 30px;
    }
    
}

@media screen and (max-width: 64rem){
    .cd-timeline__block:nth-child(odd) h2, 
    .cd-timeline__block:nth-child(odd) .col1, 
    .cd-timeline__block:nth-child(odd) .col2,
    .cd-timeline__block:nth-child(even) .cd-timeline__date{
        text-align: left;
    }

    .cd-timeline__img{
        margin-left: calc(5% - 12px);
    }
}