@charset "utf-8";
@media screen and (max-width: 1220px){
    #kp_wrapper{
        width: 90%;
    }

    #concept img{
        width: 3rem;
        margin-right: 5%;
    }

    .concept-card dl p{
        font-size: 2rem;
    }

    #app_plan .nav{
        width: 100%;
    }

    #intro_wrap{
        width: 95%;
    }

    #app_plan img{
        width: 80%;
        min-width:280px;
    }

    #main-func .icon_list{
        width: 70%;
        margin: 0 auto;
    }

    #example{
        display: inline-block;
    }

}

@media screen and (max-height: 800px){
    .header_wrap{
        margin-top: 4rem;
    }
}

@media screen and (max-width: 768px){
    h3{
        padding-top: 6%;
    }

    .header_wrap h1{
        font-size: 3rem;
    }
    
    .header_wrap h2{
        font-size: 2.25rem;
    }
    .header_wrap p{
        font-size: 1 rem;
        margin-bottom: 25px;
    }
    
    #kp_wrapper{
        width: 100%;
    }

    #concept img{
        width: 2rem;
        margin-top: 0;
        margin-right: 5%;
    }

    #concept dl{
        line-height: 65px;
    }

    .concept-card dl p{
        font-size: 26px;
    }

    .concept-card .medium-font-w{
        font-size: 20px;
    }

    .concept-card .medium-font-w{
        font-size: 20px;
    }

    #concept{
        height: 23%;
    }
    
    #intro{
        margin-top: 0;
        padding-top: 80px;
        padding-bottom: 30;
    }

    #intro h3{
        text-align: center;
    }

    #intro .img_holder{
        width: 100%;
        float: none;
        padding-bottom: 20px;
        display: inline-block;
    }

    #intro .description{
        width: 100%;
        height: none;
        margin-left: 0;
    }

    #intro .desc_holder{
        position: static;
        margin:0;
        text-align: center;
    }

    #intro .desc_holder p::before{
        white-space: pre;
        content: "스마트워크 보급 및 COVID-19사태 등에 의한 비대면\A업무 시장 확대로 OGdesk™는 언제, 어디서나, 모든 장치에서\A브라우저 없이 독립된 환경을 통해 모든 레거시, SaaS 및 웹\A애플리케이션에 대한 원스톱 액세스를 제공하는\A안전한 통합 작업 공간입니다.";
    }

    #intro h3::before{
        white-space: pre;
        content: "기업환경에 최적화된\A통합 보안 솔루션";
    }

    #intro_wrap{
        text-align: center;
    }

    #intro .desc_holder ul{
        margin-top: 20px;
        display: inline-block;
        text-align: left;
    }

    #app_plan_wrap{
        width: 100%;
    }


    #app_plan img{
        height: auto;
    }

    #app_plan h4::after{
        white-space: pre;
        content: "OGdesk™는 고객의 인프라 요구에\A쉽게 적응하도록 Cloud / On-Premise / Hybrid\A세가지 타입 모두 제공합니다.";
    }

    #app_plan{
        padding-bottom: 50px;
    }

    #app_plan .nav{
        padding-top: 20px;

    }

    #component_wrap .img_holder img{
        width: 60%;
        max-width: 350px;
        min-width: 150px;
        padding: 30px;
    }

    
    #component h4::after{
        white-space: pre;
        content: "OGdesk™는 디바이스에서\A데이터 및 어플리케이션 격리, 보안 연결,\A다중요소 인증 및 사용이 쉽고 편리합니다.";
    }

    #component{
        padding-bottom: 20px;
    }
    
    #example{
        padding-top: 20px;
        padding-bottom: 10px;
    }

    #example h4::after{
        white-space: pre;
        content: "스마트 워크 도입 및 확산에 최적화 된\AOGdesk™ 플랫폼과 서비스를 만나보세요.";
    }

    #example .desc_holder{
        width: 80%;
        padding-top: 15px;
    }
    
    #example .desc_card{
        width: 100%;
        max-width: 450px;
        float:none;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    #example .desc_card dd{
        font-size: 12px;
        word-break: keep-all;
    }

    #example .desc_card dt{
        font-size: 18px !important;
    }

    h3{
        padding-top: 40px;
        margin-bottom: 15px;
    }
    h4{
        margin-bottom: 0px;
    }

    .header_wrap{
        width: 90%;
        margin-top: 5rem;
    }

    .header_wrap h2 span{
        display: none;
    }

    .header_wrap h2::before{
        font-size: 22px;
        white-space: pre;
        content: "재택근무 솔루션을 기반으로 한\A맞춤형 통합 보안 시스템";
    }

    .header_wrap p{
        font-size: 14px;
        margin-bottom: 40px;
    }

    #concept dl{
        line-height: 40px;
    }

    #concept img{
        width: 22px;
        height: 40px;
        margin-right: 3px;
    }

    .concept-card dl p{
        font-size: 18px !important;
    }
    
    #keypoint h4{
        margin-bottom: 30px;
    }

    #keypoint h4::after{
        white-space: pre;
        content: "OGdesk™는 사용자의 편리성을 고려하여\A여러가지의 기능을 제공합니다.";
    }

    #keypoint_wrap{
        width: 85%;
    }

    #keypoint_wrap .kp_card b{
        font-size: 1rem;
    }

    #keypoint_wrap .kp_card p{
        font-size: .8rem;
        padding-left: 2.8rem;
    }

    #keypoint td{
        width: 60px;
        height: 60px;
    }

    #keypoint_wrap .kp_card_wrap{
        min-width: unset;
        width: 100%;
    }

    #keypoint_wrap .kp_card{
        margin: 0;
    }

    #keypoint_wrap .kp_card li{
        float:none;
        margin-bottom: 20px;
    }

    #keypoint_wrap .kp_card:nth-child(1) li{
        width: 100%;
    }

    #keypoint_wrap .kp_card:nth-child(2) li{
        width: 100%;
    }


    #main-func h4::after{
        white-space: pre;
        content: "OGdesk™는 사용자의 편리성을 고려하여\A여러가지의 기능을 제공합니다.";
    }

    #main-func .icon_list{
        padding-top:10px;
        min-width: 18rem;
    }

    #main-func .icon_list li{
        width: 7.6rem;
        height: 7.6rem;
        margin: .625rem;
    }

    #main-func .img_holder img{
        width: 65%;
        height: 65%;
    }

    #main-func .img_holder p{
        font-size: 10px;
    }

    #contact p{
        line-height: 26px;
        font-size: 18px !important;
    }

    #contact .btn_og{
        margin-top: 30px;
    }
}