@charset "UTF-8";

/* Tablet */
@media all and (min-width:768px) and (max-width:1280px){
    /* 공통 */
    .mob_gnb, .mb_list{ display:none; }
    .mob_con { display:block; }
    .contents_container{
        width:auto;
        max-width:none;
    }
    #gnb{
        top:3%;
        height:110px;
    }
    .nav_wrap{
        position:static;
        width:100%;
        margin:0;
    }
    .gsifn_logo{
        left:3%;
        top:0;
    }
    #gnb .top_nav{
        top:35%;
        transform:translateY(-50%);
    }
    .gsifn_logo>a>img { height:100px; }

    #fp-nav.right { right:5px; }

    /****** ABOUT ******/
    .mini_menu #x_icon{
        top:30px;
    }

    .mini_menu ul { right:50px; }
    .mini_menu li{
        height:35px;
        margin-bottom:8vh;
    }
    .mini_menu li:nth-of-type(n) { background-size:auto 35px; }

    #show_index{
        position:relative;
        left:auto;
        top:auto;
        transform:none;
    }
    #main_about .gsifn_logo, #main_business .gsifn_logo { left:3%; }

    #logo_bottom { width:auto; }
    #logo_bottom>img { height:134px; }

    .top_nav{
        top:6%;
        right:3%;
        width:auto;
        padding-left:0;
        text-align:left;
    }
    .top_nav li {
        height:auto;
        margin-left:40px;
    }
    .top_nav a>img { height:16px; }
    .menu_ex>div{
        float:none;
        margin-left:3%;
    }
    .about_title{
        width:auto;
        margin-bottom: 30px;
    }
    .about_desc{
        width:auto;
        margin-right:0;
    }
    .about_desc p{ margin-bottom:10px; }

    #gsifn_init li{
        width:15%;
        height:20vw;
        margin:0 1.5%;
        overflow:visible;
    }
    #gsifn_init li:nth-child(n) { background-size:auto 14vw; }
    #gsifn_init li:nth-child(n):hover { background-size:auto 14vw; }
    #gsifn_init li:nth-child(n):after { background-size:auto 18vw; }
    #gsifn_init li:first-child:after { background-size:auto 19vw; }
    #gsifn_init li:last-child:after { background-size:auto 12vw; }
    #gsifn_init li:nth-of-type(5).on:before { display:none; }

    .business_title { left:3%; bottom:calc(57vh + 30px);}
    .business_part { height:18vh; }
    #irio { bottom:calc(38vh + 30px); }
    #datocoli { bottom:calc(19vh + 30px); }
    .business_ex { padding:0 3%; height:18vh; }
    .business_ex h3 { margin:1.5vh 0; }
    .business_ex p { line-height:1.5 }

    .btn_service{
        padding:0 25% 0 8%;
    }

    /****** SERVICE ******/
    #main_service h2 { margin:0 0 10px 3%; }
    #main_service .online_service>div{
        width:47%;
        height:35vw;
        margin-left:3%;
    }
    #main_service .online_service>div.data_coli { margin-right:3% }
    .ir_io>a>img, .data_coli>a>img{
        width:auto;
        height:8vw;
    }

    .ir_io { width:94%; }
    .ir_io>img { height:55px; }
    #ir_concept3{
        width:94%;
        margin:10px auto 0 auto;
    }
    #ir_concept3>ul { width:100%; }
    #ir_concept3 li{
        height:25vw;
        background-size:auto 300px;
    }
    #ir_concept3 li>span{
        font-size:2.2vw;
    }
    .description_wrap{
        width:94%;
        height:200px;
    }
    .ir_description>h2, .ir_description2>h2, .ir_description3>h2 { margin:20px 0; font-size:25px; }

    .process { margin-left:3%; }
    .process_wrap>div>div>p { font-size:13px; }

    .ir_io2{
        width:94%;
        height:45vh;
        min-height:auto;
    }
    .ir_io2>div:nth-child(1){
        width:auto;
        top:calc(50% - 18vh);
        left:50%;
        transform:translateX(-50%);
    }
    .ir_io2>div:nth-child(2) { bottom:2vh; }
    .ir_io2>div:nth-child(2)>div{
        height:29vh;
        min-height:auto;
    }
    .ir_io2>div:nth-child(2) h2{
        margin:3vh 0 2vh 0;
        font-size:23px;
    }
    .ir_io2>div:nth-child(2) p { bottom:3vh; }
    .ir_io2>div:nth-child(2) p>a { font-size:13px; }
    .ir_io2>div:nth-child(2) ul li { margin-bottom:1vh; }


    /****** WORKS ******/
    #partners img:nth-of-type(1){
        width:94%;
        height:400px;
        margin:0 auto;
    }
    .bg_client_wrap{
        width:94%;
        height:400px;
        margin:0 auto;
    }
    .bg_client_wrap:before{
        width:100%;
    }
    #main_client img.bg_client, #main_client2 img.bg_client,
    #main_client3 img.bg_client{
        width:100%;
        height:400px;
    }
    .client_list{
        width:100%;
        height:400px;
        left:0%;
    }

    /****** CONTACT ******/
    #map_wrap { width:94%; }
    .contact_title { margin-bottom:10px; }
    .contact_info>ul { margin-top:10px; }
    .contact_info>ul>li { font-size:15px; }
    .info_phone, .info_fax { width:21%; }
    .info_location { width:58%; }

    #send_que>div>div { width:94%; }
    #send_que p { margin:10px 0; }
} /* Tablet End */

/* Mobile */
@media all and (max-width:767px){
    /* 공통 */
    .pc_con, #show_index, #contact_icon, #main_top .top_menu, .mini_menu, .bottom_scroll { display:none !important; }

    .mob_con, .mob_gnb, .mob_list { display:block; }
    .contents_container{
        width:auto;
        max-width:none;
    }
    #gnb{
        left:0px;
        top:0px;
        height:auto;
    }
    .nav_wrap{
        width:100%;
        margin:0;
    }
    .nav_wrap a, .about_logo>a { display:inline-block; }
    .nav_wrap a>img, .about_logo>a>img { height:14px; }
    .gsifn_logo{
        left:20px;
        top:20px;
    }
    .about_logo{
        position:absolute;
        left:20px;
        top:20px;
        width:auto;
        z-index:9980;
    }
    .gsifn_logo>a>img, .about_logo>a>img { height:40px; }

    .gsifn_logo>a>img.mainPage_logo {height:150px !important;}

    .top_nav{
        top:20px;
        right:20px;
        width:40px;
        height:40px;
        padding-left:0;
        background:url(../images/btn_toggle_white.png) no-repeat center center;
        background-size:26px 26px;
        z-index:9980;
        cursor:pointer;
    }
    .top_nav.on { background-image:url(../images/btn_toggle.png); }
    .top_nav>ul{
        display:none;
        position:absolute;
        top:-28px;
        right:-20px;
        width:100vw;
        height:100vh;
        background:#000;
    }
    .top_nav li{
        display:block;
        margin-left:0;
        margin-bottom:10vh;
        text-align:center;
    }
    .top_nav li:first-child { margin-top:25vh; }
    .top_nav li>a:after{
        display:none;
    }
    #x_icon{
        display:none;
        position:absolute;
        width:26px;
        height:26px;
        top:35px;
        right:27px;
    }
    #x_icon>img { height:26px; cursor:pointer; }
    #fp-nav.right { right:0px; }

    .btn_service{
        margin-top:70px;
        padding:0 15%;
    }
    .btn_service>div{
        float:none;
        width:100%;
        font-size:13px;
    }
    .ir_sample{
        margin-right:0%;
        margin-bottom:30px;
    }

    /****** ABOUT ******/
    #main_about .gsifn_logo, #main_business .gsifn_logo{ display:none; }
    #logo_bottom{
        bottom:50%;
        left:50%;
        width:auto;
        transform:translateX(-50%) translateY(50%);
        z-index:1;
    }
    #logo_bottom>img{
        height:154px;
    }

    #about_main .gsifn_logo{
        position:fixed;
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-70%);
    }

    .menu_ex{
        padding:0 25px;
        margin-bottom:0;
    }
    .menu_ex>div{
        float:none;
        text-align:left;
    }
    .about_title, .about_desc{
        width:100%;
        margin:0;
    }
    .about_title { margin-bottom:20px; }
    .about_title>img { height:26px; }
    .about_desc p{
        margin-bottom:5px;
        font-size:13px;
        text-align:left;
    }

    #gsifn_init li{
        position:relative;
        display:block;
        width:auto;
        height:50px;
        margin-bottom:3vh;
    }
    #gsifn_init li:nth-of-type(n){
        background-position:30% center;
        background-size:auto 50px;
    }
    #gsifn_init li:after{
        position:absolute;
        top:100%;
        left:calc(30% + 50px);
        -ms-transform:translateY(-100%);
        transform:translateY(-100%);
        width:auto;
        height:auto;
        opacity:1;
        transition:none;
        background-color:inherit;
        font-size:18px;
        font-weight:bold;
    }
    #gsifn_init li:nth-child(n):after { background:none; }
    #gsifn_init li:first-child:after{
        content:'Guaranteed';
    }
    #gsifn_init li:nth-of-type(2):after{
        content:'Specific';
    }
    #gsifn_init li:nth-of-type(3):after{
        content:'Interactive';
    }
    #gsifn_init li:nth-of-type(4):after{
        content:'Flexible';
    }
    #gsifn_init li:nth-of-type(5):after{
        content:'Nodes';
    }
    #gsifn_init li:nth-child(n):hover{
        background-position:30% center;
        background-size:auto 50px;
    }

    .business_title{
        position:static;
        margin-bottom:15px;
        padding-left:5px;
    }
    .business_title>img { height:26px; }
    .business_part{
        position:relative;
        width:90%;
        height:100px;
    }
    #irio, #datocoli, #onedu { bottom:auto; }
    .business_logo{
        right:10%;
        z-index:7;
    }
    #irio img { height:35px; }
    #datocoli img { height:50px; }
    #onedu img { height:32px; }
    .business_ex{
        height:100px;
        padding-left:5px;
        z-index:10;
    }
    .business_ex h3{
        margin:1.5vh 0;
        font-size:18px;
    }
    .business_ex p {
        line-height:1.5;
        font-size:13px;
    }
    #datocoli, #onedu{
        margin-top:10px;
    }

    #main_top>div {
        background-position:center;
        background-size:auto 100%;
    }
    .font_main, .font_sub, .empty_bar { display:none; }

    /****** SERVICE ******/
    #main_service h2{
        margin:0;
        margin-bottom:10px;
        padding-left:25px;
        text-align:left;
    }
    #main_service h2>img { height:26px; }
    .online_service{
        margin-bottom:0;
        padding:0 25px;
    }
    #main_service .online_service>div{
        width:100%;
        height:20vh;
        margin:0;
        float:none;
    }
    .ir_io>a>img, .data_coli>a>img{
        height:50px;
    }

    .ir_io{
        width:100%;
        margin:0;
    }
    .ir_io>img { height:36px; }
    #ir_concept3 {
        margin-top:10px;
        padding:0 25px;
    }
    #ir_concept3>ul{
        width:100%;
        margin:0;
    }
    #ir_concept3 li>span{
        width:94%;
        font-size:14px;
    }
    .description_wrap{
        width:calc(100% - 50px);
        height:120px;
        margin:0 auto;
    }
    .ir_description>h2, .ir_description2>h2, .ir_description3>h2{
        font-size:17px;
        margin:20px 0;
        color:#05ddc8;
        letter-spacing:0.01em;
    }

    .process{
        margin:0;
        margin-bottom:30px;
        text-align:center;
    }
    .process>img { height:20px; }
    .process_wrap{
        width:calc(100% - 50px);
        margin:0 auto -30px auto;
    }
    .process_wrap>div>div:after, .process_wrap>div>div:before,
    .process_wrap>div:nth-of-type(n)>img, .process_en { display:none; }
    .process_wrap>div{
        position:relative;
        width:100%;
        height:auto;
        margin-bottom:30px;
        float:none;
    }
    .process_wrap>div:last-child { margin-bottom:0; }
    .process_wrap>div:before{
        border-left:4px solid transparent;
        border-right:4px solid transparent;
    }
    .process_wrap>div:nth-child(n):before{
        top:calc(100% + 6px);
        border-top: 6px solid #ccc;
    }
    .process_wrap>div:nth-child(2n):before{
        top:calc(100% + 6px);
        border-top: 6px solid #6b6b6b;
        border-bottom:none;
        transform:translateX(-50%) translateY(50%);
    }
    .process_wrap>div:after{
        width:15%;
        height:2px;
        top:calc(100% + 10px);
        background:#ccc;
    }
    .process_wrap>div:nth-child(2n):after { background:#6b6b6b; }
    .process_wrap>div:last-child:after, .process_wrap>div:last-child:before{display:none;}
    .process_wrap>div>div{
        position:static;
        transform:none;
    }
    .process_wrap>div:nth-of-type(n)>div{
        transform:none;
    }
    .process_wrap>div:nth-of-type(n)>div>p { font-size:14px; }

    .ir_io2{
        width:calc(100% - 50px);
        margin:0 auto;
    }
    .ir_io2>div:nth-child(1){
        top:10%;
    }
    .ir_io2>div:nth-child(2)>div{
        position:static;
        width:100%;
        min-height:auto;
        margin:0;
        float:none;
    }
    .ir_io2>div:nth-child(2) h2, .ir_io2>div:nth-child(2) ul { display:none; }
    .ir_io2>div:nth-child(2) { position:static; }
    .ir_io2>div:nth-child(2) p { z-index:10; }
    .ir_io2>div:nth-child(2)>.stock_prices p { bottom:55%; }
    .ir_io2>div:nth-child(2)>.finance p { bottom:35%; }
    .ir_io2>div:nth-child(2)>.disclosure p { bottom:15%; }
    .ir_io2>div:nth-child(2) p>a:hover, .ir_io>div:nth-child(2) p>a:focus{
        border:2px solid #222;
        color:#000;
        background-color:transparent;
    }

    /****** WORKS ******/
    #partners img:nth-of-type(1){
        width:auto;
        height:200px;
        margin:0 auto;
    }
    #partners img:last-child { height:30px; }
    .bg_client_wrap{
        width:auto;
        height:200px;
        margin:0;
    }
    #main_client img.bg_client, #main_client2 img.bg_client{
        width:auto;
        height:200px;
    }
    .client_list>li{
        width:calc(92% / 2);
        height:calc((200px / 3) - 20px);
        margin:10px 2%;
    }

    /***** CONTACT ******/
    #map_wrap{
        width:calc(100% - 50px);
        margin:0 auto;
    }
    .contact_title{
        text-align:center;
        margin-bottom:10px;
    }
    .contact_title>img{
        height:25px;
        transition:none;
        opacity:1;
    }
    .contact_title>img.on { transform:none; }
    .map>iframe { height:35vh; }
    .contact_info>ul { margin-top:10px; }
    .contact_info>ul>li{
        margin-bottom:10px;
        font-size:13px;
        transition:none;
        opacity:1;
    }
    .contact_info>ul>li.on { transform:none; }
    .info_phone, .info_fax{
        float:none;
        width:100%;
    }
    .contact_info>ul>li.info_fax{text-align:left;}
    .info_location{
        float:none;
        width:100%;
        text-align:left;
    }
    .contact_info>ul>li>img { height:22px; }
    .info_phone>img { padding-right:13px; }
    .info_location>img { padding-right:15px; }
    #send_que>div>div{
        width:calc(100% - 50px);
        margin-bottom:-30px;
    }
    #send_wrap { margin:0; }
    .contact_title2 { text-align:left; }
    .contact_title2>img { height:30px; }
    #send_que p{
        margin:5px 0;
        font-size:14px;
    }
    .qu_info_wrap>div{
        width:100%;
        float:none;
        margin:0;
        margin-bottom:7px;
    }
    .qu_info_wrap>.qu_email { width:100%; }
    .qu_info_wrap>div>input, .qu_info_wrap>div>select { padding:4px 0; }
    #comments{
        height:25vh;
        margin:10px 0;
    }
    .send_wrap>input{
        padding:4px 8px;
        font-size:14px;
    }


    @media all and (max-height:500px){
        /* about */
        .business_part{
            position:relative;
            width:90%;
            height:40px;
        }
        #irio img { height:25px; }
        #datocoli img { height:40px; }
        #onedu img { height:22px; }

        #gsifn_init li:nth-of-type(n){
            background-position:40% center;
        }
        #gsifn_init li:after { left:calc(40% + 50px); }
        #gsifn_init li:nth-child(n):hover { background-position:40% center; }

        .process_wrap { margin-bottom:0; }
        .ir_io2>div:nth-child(1) { top:5%; }
        .ir_io2>div:nth-child(2)>.stock_prices p { bottom:52%; }
        .ir_io2>div:nth-child(2)>.finance p { bottom:27%; }
        .ir_io2>div:nth-child(2)>.disclosure p { bottom:2%; }

        /* Works */
        .fp-slidesNav { left:0; margin-left:0 !important; }

        /* contact   */
        #map_wrap { margin-bottom:-40px; }
        .qu_info_wrap>div{
            float:left;
            width:49%;
        }
        .qu_info_wrap>div>input, .qu_info_wrap>div>select{
            height:34px;
            box-sizing:border-box;
        }
        .qu_info_wrap>.qu_email{
            width:49%;
        }
        .qu_info_wrap>div:nth-child(1), .qu_info_wrap>div:nth-child(3){
            margin-right:2%;
        }
        #comments { margin-top:0; }
    }























}