@media all and (max-width:1440px){

}

@media all and (max-width:1280px){
    .inner_con{
        width: 100%;
        padding-left: 60px;
        padding-right: 60px;
    }
    .visual_area{
        height: 950px;
    }
    .section_01 .contents .left{
        padding-left: 30px;
    }
    .section_02 ul.tab_menu{
        width: 100%;
    }
    .section_02 ul.tab_menu li{
        margin: 0;
        width: calc(100% / 3);
        border-right-width: 0px;
    }
    .section_02 ul.tab_menu li:nth-child(3n){
        border-right-width: 1px;
    }
    .section_02 ul.tab_menu li:nth-child(1),
    .section_02 ul.tab_menu li:nth-child(2),
    .section_02 ul.tab_menu li:nth-child(3){
        border-bottom-width: 0px;
    }
    .section_02 ul.tab_menu li.on{
        border-right-width: 1px;
        border-bottom-width: 1px;
    }
    .section_03 .instagram .left{
        display: block;
        text-align: center;
        width: 100%;
    }
    .section_03 .instagram .left h3{
        padding-right: 0;
    }
    .section_03 .instagram .right{
        display: block;
        margin: 30px auto 0;
        width: 777px;
    }
    .section_03 .instagram .right ul.gallery{
        text-align: center;
    }
}

/* laptop */
@media all and (max-width:1024px){
    .swiper-container{
        
    }
     .section_01 .contents .left{
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        text-align: center;
        padding-bottom: 60px;
    }
    .section_01 .contents .right{
        width: 100%;
        padding-right: 0;
        text-align: center;
    }
    .section_banner img.img01{
        right: 60px;
        width: 27%;
    }
    .section_banner img.img02{
        display: none;
    }
    .section_01 .banner_area p{
        padding: 0 100px;
    }
    .section_02 .arapp .app_use ul.app_use_con li img{
        padding: 0 10px;
    }
    .section_02 .kiosk .spec h4{
        padding-left: 0;
        padding-bottom: 20px;
    }
    .section_02 .kiosk .spec .left{
        padding-left: 0;
        padding-right: 50px;
    }
    .section_04 .inquiry form{
        width: 100%;
    }
    .section_03 .instagram .right{
        width: 100%;
    }
}

/* tablet */
@media all and (max-width:768px){
    header{
        height: auto;
    }
    header .inner_con{
        padding-left: 0;
        padding-right: 0;
    }
    header .inner_con .logo{
        float: none;
        width: auto;
        margin: 0 auto;
        text-align: center;
    }
    header .inner_con .logo a{
        display: inline-block;
        margin-top: 20px;
    }
    header .inner_con nav{
        float: none;
        width: 100%;
    }
    header .inner_con .btn_kakao{
        width: 110px;
        height: auto;
        float: none;
        position: absolute;
        top: 13px;
        right: 10px;
    }
    header .inner_con .btn_kakao a{
        position: static;
        font-size: 15px;
        margin-top: 0;
        text-align: center;
    }
    header .inner_con ul.gnb li a{
        line-height: 40px;
        font-size: 15px;
    }
    .swiper-container{
        width: 70%;
    }
    h3{
        font-size: 24px;
        padding: 0 20px;
        line-height: 35px;
    }
    h4{
        font-size: 20px;
    }
    h4 p{
        padding-top: 0;
        font-size: 15px;
    }
    h5{
        font-size: 18px;
    }
    h6{
        font-size: 16px;
    }
    .contents{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .inner_con{
        padding-left: 20px;
        padding-right: 20px;
    }
    .visual_area{
        height: 405px;
    }
    .visual_area .txt p{
        padding-bottom: 10px;
        font-size: 15px;
    }
    .visual_area .txt img{
        width: 170px;
    }

    /* section_01 */
    .section_01 .contents .left{
        padding-bottom: 40px;
    }
    .section_01 .contents .left h3{
        padding-bottom: 30px;
    }
    .section_01 .banner_area{
        padding: 50px 0;
    }
    .section_01 .banner_area p{
        padding: 0;
        font-size: 18px;
        /*line-height: 30px;*/
    }
    .section_01 .banner_area p.opacity6{
        padding-bottom: 26px;
    }
    .section_01 .banner_area a.btn_line_white{
        font-size: 18px;
    }
    .section_01 .contents .left .con b{
        font-size: 18px;
    }
    .section_01 .contents .left .con p{
        /*line-height: 24px;*/
        font-size: 15px;
    }
    .section_01 .contents .right{
        display: block;
        margin: 0 auto;
        padding: 0 20px;
        width: 70%;
    }
    .section_01 .contents .right .ref{
        width: 100%;
        height: auto;
    }
    .section_01 .contents .right .ref video{
        height: auto;
    }


    /* section_02 */
    .section_02 h3{
        padding-bottom: 30px;
    }
    .section_02 ul.tab_menu li{
        width: calc(100% / 2);
        font-size: 15px;
        border-bottom-width: 0px;
    }
    .section_02 ul.tab_menu li:nth-child(3n){
        border-right-width: 0px;
    }
    .section_02 ul.tab_menu li:nth-child(even){
        border-right-width: 1px;
    }
    .section_02 ul.tab_menu li:nth-child(5),
    .section_02 ul.tab_menu li:nth-child(6){
        border-bottom-width: 1px;
    }
    .section_02 ul.tab_menu li.on{
        border-right-width: 1px;
    }
    .section_02 .tab_con{
        padding-top: 36.5px;
    }
    .section_02 .tab_con .txt{
        padding-bottom: 36.5px;
        line-height: 24px;
        font-size: 15px;
    }
    /* ar app */
    .section_02 .arapp .txt p.f17{
        font-size: 15px;
    }
    .section_02 .arapp .app_use{
        padding-top: 40px;
    }
    .section_02 .arapp .app_use ul.app_use_con{
        padding-top: 35px;
    }
    .section_02 .arapp .app_use ul.app_use_con li{
        padding-left: 2%;
        padding-right: 2%;
    }
    .section_02 .arapp .app_use ul.app_use_con li p{
        line-height: 24px;
        font-size: 15px;
    }
    .section_02 .arapp .app_use ul.app_use_con li img{
        padding: 0;
    }
    .section_02 .arapp .ref{
        height: 40%;
    }
    .section_02 .arapp .ref video{
        width: 100%;
        top: 50%;
        left: 0;
        margin-left: 0;
        margin-top: -87%;
    }
    .section_02 .tc_5 img{
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    /* kiosk */
    .section_02 .kiosk .spec .left{
        width: 100%;
        float: none;
        margin: 0 auto;
        padding-right: 0;
    }
    .section_02 .kiosk .spec.zk05{
        padding-bottom: 50px;
    }
    .section_02 .kiosk .spec .right{
        float: none;
        width: 100%;
        padding: 0 10px;
    }
    .section_02 .kiosk .spec .right h6{
        padding-top: 10px;
    }
    .section_02 .kiosk .spec .right ul{
        padding-bottom: 20px;
    }
    .section_02 .kiosk .spec .right ul li{
        font-size: 15px;
        line-height: 26px;
    }

    /*custom frame */
    .section_02 .custome .frame_type dd{
        padding: 20px;
    }
    .section_02 .custome .frame_type dl dd ul{
        display: none;
    }
    .section_02 .custome .screen{
        padding-bottom: 50px;
    }
    .section_02 .custome .frame_type h6 span{
        font-size: 14px;
    }
    .section_02 .custome .custome_category dl dt{
        display: none;
    }
    .section_02 .custome .frame_type dl dd li{
        font-size: 14px;
    }

    /* custom */
    .section_02 .custome .screen dl{
        margin-right: auto;
        padding-top: 30px;
    }
    .section_02 .custome .screen dl.c01{
        margin-right: 5px;
    }
    .section_02 .custome .screen dl.c02{
        margin: 0 5px;
    }
    .section_02 .custome .screen dl.c03{
       margin-left: 5px;
    }

    /* effect */
    .section_02 .effect .effect_ref{
        padding: 20px;
    }

    .section_02 .produce .produce_ref ul li{
        padding-bottom: 50px;
    }
    .section_02 .produce .produce_ref ul li p{
        padding-bottom: 20px;
        font-size: 15px;
    }
    .section_02 .produce .produce_ref ul li a.btn_line_purple{
        font-size: 15px;
    }

    /* section_banner */
    .section_banner .inner_con{
        padding-top: 40px;
        padding-bottom: 30%;
    }
    .section_banner .txt{
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
    }
    .section_banner .txt p{
        display: none;
    }
    .section_banner img.img01{
        right: 50%;
        top: 150px;
        width: 46%;
        margin-right: -23%;
    }
    .section_banner .txt h5{
        padding-bottom: 20px;
    }
    .section_banner .txt ul.btn_list li a{
        font-size: 14px;
    }

    /*work_together */
    .section_02 .work_together dd{
        padding: 20px;
    }
    .section_02 .work_together dl dd ul{
        display: none;
    }
    .section_02 .work_together{
        padding-bottom: 50px;
    }
    .section_02 .work_together h6 span{
        font-size: 14px;
    }
    .section_02 .work_together dl dt{
        display: none;
    }
    .section_02 .work_together dl dd li{
        font-size: 14px;
    }

    /* work_together */
    .section_02 .work_together dl{
        margin-right: auto;
        padding-top: 30px;
    }
    .section_02 .work_together dl.c01{
        margin-right: 5px;
    }
    .section_02 .work_together dl.c02{
        margin: 0 5px;
    }
    .section_02 .work_together dl.c03{
       margin-left: 5px;
    }

    /*produce */
    .section_02 .produce .produce_ref dd{
        padding: 20px;
    }
    .section_02 .produce .produce_ref dl dd ul{
        display: none;
    }
    .section_02 .produce .produce_ref{
        padding-bottom: 50px;
    }
    .section_02 .produce .produce_ref h6 span{
        font-size: 14px;
    }
    .section_02 .produce .produce_ref dl dt{
        display: none;
    }
    .section_02 .produce .produce_ref dl dd li{
        font-size: 14px;
    }

    /* produce */
    .section_02 .produce .produce_ref dl{
        margin-right: auto;
        padding-top: 30px;
    }
    .section_02 .produce .produce_ref dl.c01{
        margin-right: 5px;
    }
    .section_02 .produce .produce_ref dl.c02{
        margin: 0 5px;
    }
    .section_02 .produce .produce_ref dl.c03{
       margin-left: 5px;
    }

    /* section_03 */
    .section_03 .instagram .left h3 p{
        font-size: 18px;
    }
    .section_03 .instagram .right ul.gallery{
        width: 100%;
    }
    .section_03 .instagram .right ul.gallery li{
        position: relative;
        width: calc(50% - 5px);
    }
    .section_03 .instagram .right ul.gallery li:nth-child(odd){
        margin-right: 5px;
    }
    .section_03 .instagram .right ul.gallery li:nth-child(even){
        margin-left: 5px;
        margin-right: 0;
    }
    .section_03 .board_list{
        padding-top: 30px;
    }
    .section_03 .instagram .right ul.gallery li:after{
        content: '';
        display: block;
        padding-bottom: 100%;
    }
    .section_03 .instagram .right ul.gallery li a{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .section_03 .partner_company{
        padding: 20px 0;
    }
    .section_03 .partner_company table tr td{
        height: 50px;
    }
    .section_03 .board_list table tr.spurs_board_title_tr{
        display: none;
    }
    .section_03 .board_list table td.spurs_board_td{
        padding: 0 10px;
        font-size: 15px;
    }
    .section_04 h3 p{
        font-size: 15px;
    }
    .quick_ask{
        display: none;
    }
    .sticky_popup{
        top:  100px;
    }
    .sticky_popup .quick_ask{
        width: 100%;
        right: 65px;
    }
    .sticky_popup .quick_ask.hide {
        transform: translateX(150%) translateY(0) !important;
    }
    .toggle_quickask{
        top: 0;
    }
    .toggle_quickask a{
        background-image: url(../images/ico_quickask.svg);
        background-color: #4848e7;
        background-size: 30px;
        background-position: center;
    }
    .scroll-top-arrow{
        top: 60px;
    }

    /* policy */
    section.policy{
        padding-top: 60px;
    }
    section.policy h3{
        padding: 0;
    }
    .policy dl{
        padding-top: 20px;
    }
    .policy dt{
        font-size: 18px;
        padding-bottom: 10px;
    }
    .policy dd{
        font-size: 15px;
    }
    footer .inner_con{
        padding: 30px 0;
    }
    footer ul.policy{
        padding-top: 10px;
        padding-bottom: 15px;
    }
    footer img.logo{
        padding-bottom: 20px;
    }
}

/* mobile */
@media all and (max-width:425px){
    header .inner_con ul.gnb{
        text-align: center;
    }
    header .inner_con ul.gnb li{
        display: inline-block;
        float: none;
        width: auto;
        padding: 0 3%;
    }
    header .inner_con ul.gnb li a{
        width: 100%;
    }
    header .inner_con .btn_kakao{
        display: none;
    }
    .swiper-container{
        width: 100%;
    }
    h4 p{
        font-size: 15px;
    }
    .section_01 .banner_area a.btn_line_white{
        font-size: 15px;
    }
    .section_02 ul.tab_menu li{
        padding: 0 10px;
        font-size: 14px;
    }
    .section_02 .arapp .ref{
        height: 30%;
    }
    .section_02 .arapp .app_use ul.app_use_con li{
        width: 70%;
        padding-bottom: 35px;
    }
    .section_02 .arapp .app_use ul.app_use_con li p{
        padding-top: 10px;
    }
    .section_02 .custome .screen dl.c01{
        margin-right: 2px;
    }
    .section_02 .custome .screen dl.c02{
        margin: 0 2px;
    }
    .section_02 .custome .screen dl.c03{
       margin-left: 2px;
    }
    .section_02 .custome .frame_type dl{
        padding-bottom: 20px;
    }
    .section_02 .custome .frame_type dd{
        margin-top: 0;
        padding: 10px;
    }
    .section_02 .custome .frame_type dl.c03 dd img{
        width: calc(33.3333% - 7px);
        margin-right: 10px;
        margin-bottom: 0;
    }
    .section_02 .effect .effect_ref p{
        width: 100%;
    }
    .section_02 .effect .effect_ref p.big{
        padding-right: 0;
        padding-bottom: 10px;
    }
    .section_02 .effect .effect_ref p.small{
        padding-left: 0;
    }
    .section_02 .effect .effect_ref p.small img:nth-child(1){
      padding-left: 0;  
    }
    .section_02 .effect .effect_ref p.small img:nth-child(odd){
        padding-right: 5px;
    }
    .section_02 .effect .effect_ref p.small img:nth-child(even){
        padding-left: 5px;
    }
    .section_02 .effect .effect_ref p.small img:nth-child(1), 
    .section_02 .effect .effect_ref p.small img:nth-child(2){
        padding-bottom: 10px;
    }
    .section_02 .tc_5 img{
        width: 100%;
    }
    .section_02 .produce .produce_ref ul li h6{
        padding-top: 5px;
        padding-bottom: 0;
    }
    .section_02 .produce .produce_ref ul li{
        width: 100%;
        padding-bottom: 50px;
    }
    .section_02 .produce .produce_ref ul li:last-child{
        padding-bottom: 0;
    }
    .section_02 .produce .produce_ref ul li:nth-child(odd){
        padding-right: 0;
    }
    .section_02 .produce .produce_ref ul li:nth-child(even){
        padding-left: 0;
    }
    .section_02 .produce .produce_ref ul li p{
        padding-bottom: 0;
        font-size: 15px;
    }
    .section_02 .produce .produce_ref ul li p b{
        font-size: 14px;
        padding-top: 3px;
    }
    .section_02 .produce .produce_ref ul li a.btn_line_purple{
        width: 100%;
        margin-top: 10px;
        text-align: center;
        font-size: 15px;
    }
    .section_02 .kiosk .spec .right h6{
        line-height: 30px;
        padding: 10px 0;
    }

    .section_banner .txt h5{
        line-height: 24px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .section_banner .inner_con{
        padding-bottom: 160px;
    }
    .section_banner .txt ul.btn_list li{
        width: 47%;
        margin-bottom: 10px;
    }
    .section_banner .txt ul.btn_list li a{
        width: 100%;
        font-size: 13px;
        padding: 0;
    }
    .section_banner img.img01{
        top: 174px;
        width: 250px;
        margin-right: -125px;
    }
    .section_04 .inquiry form .col_01, 
    .section_04 .inquiry form .col_02{
        width: 100%;
    }
    .section_04 .inquiry form input[type="text"], 
    .section_04 .inquiry form input[type="email"], 
    .section_04 .inquiry form input[type="number"]{
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 15px;
    }
    .section_04 .inquiry form textarea{
        line-height: 24px;
        font-size: 15px;
        padding: 10px;
    }

    /* footer */
    footer ul.info li{
        display: block;
        padding-bottom: 10px;
    }
    footer ul.info li::after{
        background-image: none;
    }
}

@media all and (min-width:980px) and (max-width:1024px){
    .inner_con{
        padding-left: 30px;
        padding-right: 30px;
    }
    .contents{
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .section_01 .banner_area{
        padding: 90px 0;
    }
    
}
@media all and (min-width:1025px) and (max-width:1280px){
    .section_01 .banner_area{
        padding: 100px 0;
    }
    .section_02 .arapp .app_use ul.app_use_con li img{
        padding: 0 25px;
    }
}
/* tablet */
@media all and (max-width:768px) {
    /* ... (±âÁ¸ ÄÚµå) ... */

    /* ¼­ºñ½º ÅÇ ¼½¼Ç ¹ÝÀÀÇü ½ºÅ¸ÀÏ Ãß°¡ */
    .service-tabs {
        padding: 20px;
        margin-bottom: 80px;
    }

        .service-tabs h3 {
            padding: 0 10px;
        }

    .tab-wrapper {
        display: block; /* ¼öÆò -> ¼öÁ÷À¸·Î º¯°æ */
    }

    .tab-image {
        flex: auto;
        margin-bottom: 20px;
    }

    .tab-info {
        flex: auto;
    }

    .tabs {
        justify-content: center;
        margin-bottom: 30px;
        gap: 8px;
    }

    .tab {
        padding: 8px 14px;
        font-size: 16px; /* ÆùÆ® Å©±â ÁÙÀ̱â */
    }

    .tab-content h4 {
        font-size: 28px; /* ÆùÆ® Å©±â ÁÙÀ̱â */
        margin-bottom: 15px;
    }

    .tab-content p {
        font-size: 16px; /* ÆùÆ® Å©±â ÁÙÀ̱â */
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .actions {
        justify-content: center;
    }

        .actions .btn {
            font-size: 16px; /* ÆùÆ® Å©±â ÁÙÀ̱â */
            padding: 8px 16px;
        }

    /* ... (±âÁ¸ ÄÚµå) ... */
}

/* mobile */
@media all and (max-width:425px) {
    /* ... (±âÁ¸ ÄÚµå) ... */

    /* ¼­ºñ½º ÅÇ ¼½¼Ç ¹ÝÀÀÇü ½ºÅ¸ÀÏ Ãß°¡ */
    .service-tabs {
        padding: 15px;
        margin-bottom: 60px;
    }

        .service-tabs h3 {
            padding: 0;
            font-size: 20px;
        }

    .tab-wrapper {
        display: block;
    }

    .tab-image {
        margin-bottom: 15px;
    }

    .tabs {
        margin-bottom: 20px;
        gap: 6px;
    }

    .tab {
        padding: 6px 12px;
        font-size: 14px;
    }

    .tab-content h4 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .tab-content p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .actions {
        flex-direction: column;
        gap: 8px;
    }

        .actions .btn {
            width: 100%;
            text-align: center;
            padding: 10px;
            font-size: 15px;
        }

    /* ... (±âÁ¸ ÄÚµå) ... */
}