@media screen and (max-width: 1920px) {


    .main .step_3 .item-wrap {
        gap: 2em;
    }
    .main .step_3 .item {
        width: calc((100% - 2em) / 2);
    }

}
@media screen and (max-width: 1600px) {
    .common_title {
        margin-bottom: 0.5em;
    }

    .main .step_3 .item-wrap {
        gap: 1em;
    }

    .main .step_3 .item {
        width: calc((100% - 1em) / 2);
    }

    .main .step4 {
        gap: 1em;
    }

    .main .step4 .item {
        width: calc((100% - 1em) / 2);
    }
    .main .step4 .txt-wrap {
        padding-bottom: 1.5em;
    }

    .main .step5 .item-wrap {
        gap: 1em;
    }

    .main .step5 .item {
        width: calc((100% - 1em) / 2);
    }

    .main .step6 .step_wrap {
        gap: 1em;
    }

    .main .step6 .inner-wrap {
        width: calc((100% - 1em) / 2);
    }

    .company .step1 .inner-wrap .txt-wrap { 
        transform: translate(5em, -10em);
    }

    .main .step3 .item-wrap {
        gap: 1em;
    }

    .main .step3 .item {
        width: calc((100% - (1em * 4)) / 5);
    }

    .company .step2 .item-wrap {
        gap: 1em;
    }

    .quater .item-wrap {
        gap: 1em;
    }

    .company .step2 .item-wrap .item {
        width: calc((100% - (1em * 2)) / 3);
    }

    .company .step2 .item-wrap .item br {
        display: none;
    }

    .company .step2 .item-wrap .item .desc {
        padding-right: 3.667em;
    }

    .company .step4 .step_1 {
        width: 44em;
    }

    .company .step4 .step_2 {
        width: calc(100% - 5.6667em - 44em);
        padding-right: 0;
    }

    .company .step4 .inner-wrap {
        gap: 3em;
    }

    .product4 .step3 .item-wrap {
        gap: 1em;
    }

    .product4 .step3 .item {
        width: calc((100% - (1em * 3)) / 4);
    }

    .service .step1 {
        gap: 3em;
    }

    .service:not(.file,.contact) .sub-header {
        padding-top: 0;
    }

    .sub_visual2 .tab-wrap .tab .item {
        font-size: 1.1334em;
    }

    .product .step1 .txt-wrap .none {
        display: block;
    }

    .product .step1 .txt-wrap .br2,.br3 {
        display: none;
    }

    .product .step2 .step_1 {
        width: calc(100% - 2em - 42em);
    }

    .product1 .step2 .step_2 {
        width: 42em;
    }

    .product .step1 .__base-wrap {
        gap: 1em;
    }

 
    .product .step2 .txt-wrap .txt_desc {
        font-size: 1em;
    }

    .product2 .step3 .item_4 .br {
        display: none;
    }

    .example .item-wrap {
        gap: 1em;
    }

    .example .item-wrap .item {
        width: calc((100% - (1em * 2)) / 3);
    }

    .quater .item-wrap .item .txt-wrap .item_desc .br {
        display: none;
    }

    .quater .item-wrap .item .txt-wrap {
        padding-left: 1.5em;
    }
    .service .step1 .txt-wrap {
        width: calc(100% - 3em - 47.3334em);
    }

    .product3 .step4 .inner-wrap {
        gap: 1em;
    }

    .product3 .step4 .step_1 {
        width: calc((100% - 1em) / 2);
        height: unset;
        padding: 1em;
    }

    .product3 .step4 .step_2 .item {
        font-size: 0.87em;
    }

    .product3 .step4 .step_2 .item + .item {
        padding-top: 1em;
        gap: 1em;
    }

    .product3 .step4 .step_2 {
        width: calc((100% - 1em) / 2);
    }


    .service2 .step1 .desc .br1 {
        display: none;
    }

    .service4 .step1 .desc .br1 {
        display: none;
    }
    .service4 .step1 .desc .br3 {
        display: none;
    }

    .product6 .step1.half .item-wrap .item .txt_wrap {
        padding: 1em;
    }

    .download .download_step .item {
    width: calc((100% - (1em * 2)) / 3);
}

    .download .download_step .item-wrap {
    gap: 1em;
    }

    .work .period {
        width: 30em;
        
    }
    .work .order {
        width: calc(100% - 43.6667em - 30em);
    }


    .upload_wrap {
        width: 55em;
    }

    .contact .filebox .btn-wrap {
        width: calc(100% - 2em - 55em);
    }

}

@media screen and (max-width: 1400px) {
    .pc_nav .item-wrap {
        width: 10em;
    }


    .main .step_3 .item .btn {
        gap: 2.6667em;
    }

    .main .step3 .item .txt-wrap {
        padding: 2em 2em 0 2em;
    }

    .company .step1 .inner-wrap {
        margin-bottom: 0;
    }

    
    .company .step1 .inner-wrap .txt-wrap {
        position: relative;
        gap: 2em;
    }

    .company .step1 .inner-wrap .txt-wrap { 

        transform: translate(0, 0);
        padding: 6.66em 0;
    }

    .main .step3 .title .br {
        display: block;
    }

    .main .step4 .txt .br {
        display: none;
    }




    .company .step4 .step_1 {
        width: 38em;
    }

    .company .step4 .step_2 {
        width: calc(100% - 1.3334em - 38em);
    }



    .service .step1 {
        gap: 2em;
    }

    .service .step1 .txt-wrap {
        width: calc(100% - 2em - 47.3334em);
    }



    .product .step1 .img_innerwrap {
        width: 45em;
    }

    .product4 .step1.half .item-wrap {
        width: 35em;
    }

    .service.product4 .step1 .txt-wrap {
        width: calc(100% - 1em - 35em);
    }

    .product .step .txt-wrap {
        width: calc(100% - 2em - 45em);
    }


    .product .step2 .step_1 {
        width: calc(100% - 2em - 35em);
    }

    .product .step2 .step_2 {
        width: 35em;
    }

    .product1 .step2 .step_2 {
        width: 35em;
    }

    .product .step2 .item-wrap {
        padding-right: 0;
    }

    .product .half_02 .item .img-wrap {
        padding-bottom: 0;
        border-bottom: none;
    }

    .product .half_02 .item .txt {
        display: none;
    }



    .service .sub-header .desc .br {
        display: none;
    }

    .product .step1 .step_2 .title .list span {
        font-size: 0.9334em;
    }

    .product2 .step1 .txt-wrap .none {
        display: block;
    }

    .product2 .step3 .item .br {
        display: none;
    }

    .product3 .step3 .item .br {
        display: none;
    }

    




    .product .step2 .half_02 {
        flex-direction: column;
    }

    
    .product .half_02 .item {
        width: 30.6667em;
        height: 20em;
    }

    .product .half_02 .item .img-wrap {
        width: 10.6667em;
    }


    /* .product .half_02 {
        flex-direction: column;
    }

    .product .half_02 .item .txt {
        display: none;
    } */



    .quater .item-wrap .item {
        width: 100%;
    }




    .service1 .step1 .desc .br {
        display: none;
    }

    .service2 .step1 .desc .br2 {
        display: none;
    }

    .service3 .step1 .desc .br2 {
        display: none;
    }


    .work .name {
        width: 35em;
        
    }

    .work .period {
        width: 25em;
        
    }
    .work .order {
        width: calc(100% - 35em - 25em);
    }

    .upload_wrap {
        width: 45em;
    }

    .contact .filebox .btn-wrap {
        width: calc(100% - 2em - 45em);
    }


    .footer .inner-wrap {
        gap: 1.3334em;
    }
}


@media screen and (max-width: 1200px) {

    .main .step_1 .line_wrap {
        display: none;
    }
    .sub_visual {
        height: 20em;
        margin-bottom: 6em;
    }
    .tab-wrap .none {
        display: block;
    }

    .main .step3 .item .txt-wrap {
        gap: 2em;
        padding: 2em 2em 0 2em;
    }

    .main .step4 .none {
        display: block;
    }

    .company .step1 .inner-wrap .txt-wrap .desc .br1 {
        display: none;
    }

    .company .step1 .inner-wrap .txt-wrap {
        gap: 1em;
    }


    .company .step1 .inner-wrap .txt-wrap {
        flex-direction: column;
        padding: 2em 0 5em;
    }

    .company .step4 .step_1 {
        width: 25em;
    }

    .company .step4 .step_2 {
        width: calc(100% - 1.3334em - 25em);
    }


    .service:not(.product2,.product3,.product4,.product6) .img_innerwrap {
        width: 40em;
    }

    .product .step1.half .item-wrap .step_2 .list_wrap {
        padding: 2em;
    }

    .product2 .step1.half .item-wrap .step_2 .list_wrap {
        padding: 5em 2em;
    }

    .product1 .step1 .desc br {
        display: none;
    }

    .product .step2 .step_wrap {
        flex-direction: column-reverse;
    }
    .product .step2 .half_02 {
        flex-direction: row;
    }

    .product .step2 .step_1 {
        width: 100%;
    }

    .product1 .step3 .inner-wrap {
        gap: 1em;
    }

    .product1 .step3 .img_innerwrap {
        width: calc((100% - 2em )/2);
        height: 50em;
    }


    .product1 .step3 .img_innerwrap .img-wrap {
        width: 100%;
        height: unset;
    }



    .product .half_02 .item {
        width: calc((100% - 1em) / 2);
    }

    .product .step2 .txt-wrap .txt {
        font-size: 1.3em;
    }

    .product .step2 .txt-wrap .txt_desc {
        font-size: 1.2em;
    }

    .product4 .step1 .item-wrap {
        gap: 1em;
    }



    .product6 .step3 .step_2 {
        width: calc(100% - 50% - 2em);
    }

    .product6 .step3 .img_innerwrap .img-wrap {
        width: 100%;
    }

    .product .step2 .step_2 {
        gap: 1em;
        padding-left: 30px;
        width: 100%;
    }

 

    .product2 .step3 .item {
        flex-direction: column;
    }

    
    .product2 .step3 .num {
        width: 100%;
        padding-top: 0;
        margin-bottom: 2em;
    }

    .product2 .step3 .item {
        border-radius: 1em;
        align-items: center;
    }

    .product2 .step3 .item br {
        display: none;
    }

    .product3 .step1.half .item-wrap .step_1 {
        width: 15em;
    
    }

    .product3 .step1.half .item-wrap .step_2 {
    width: calc(100% - 15em);

    }

    .product5 .step1 .sub-header br {
        display: none;
    }

    .product6 .step1.half .item-wrap .item .img-wrap {
        height: 12em;
    }

    .product6 .step1.half .item-wrap .item .txt_wrap br {
        display: none;
    }

    .product6 .step1.half .item-wrap .item .txt_wrap {

        height: calc(100% - 12em - 3.3334em);

        padding: 1.6667em;
    }

    .product7 .step2 .step_2 {
        height: 30em;
    }

    .product .step1.half .item-wrap {
        width: 40em;
    }


    .service .step1 .txt-wrap {
        width: calc(100% - 1em - 35em);
    }

    .work .period {
        width: 20em;
    }

    .work .order {
        width: calc(100% - 35em - 20em);
    }

    .upload_wrap {
        width: 35em;
    }
    .contact .filebox .btn-wrap {
        width: calc(100% - 2em - 35em);
    }


    .footer-wrap {
        align-items: flex-start;
        padding: 2em 0;
    }
    
    .footer .inner-wrap {
        flex-direction: column;
    }
    
    .copyright {
        padding: 1em 0;
    }
        
}


@media screen and (max-width: 1024px) {

    html {
        font: 300 14px / 1.2 'Paperlogy', sans-serif;
    }

    .sub_visual .sub_nav {
        padding-bottom: 1em;
        gap: 1em;
    }
    .main .step_2 .txt-wrap .eng {
        font-size: 3em;
    }

    .main .step_3 .item .btn {
        gap: 1.5em;
    }



    .footer {
        height:inherit;

    }
    .footer .txt-wrap {
        width: inherit;
    }
}

/* 태블릿 950 ~  480*/

@media screen and (max-width: 950px) {

    html {
        font: 300 14px / 1.2 'Paperlogy', sans-serif;
    }
    .main .step_2 .txt-wrap .eng {
        font-size: 3em;
    }

    .footer {
        height:inherit;

    }
    .footer .txt-wrap {
        width: inherit;
    }

    .pc_nav {
        display: none;
    }

    .header {
        position: fixed;
        z-index: 9999;
        width: 100%;
        height: 5em;
        box-shadow: 2px 2px 2px rgba(0,0,0,0.18);

    }

    .tablet_nav {
        display: block;
    }
    
    .ham_wrap {
        display: block;
    }


    .hamBtn {
        display: inline-block;
    }
    .main .step3 .inner-wrap {
        padding: 7em 0;
    }
    .main .step4 {
        padding: 7em 0;
    }

    .main .step5 {
        padding-bottom: 7em;
    }




    .company .step2 {
        padding: 7em 0;
    }

    .company .step3 {
        padding: 7em 0;
    }

    .company .step3 .item-wrap {
        left: 2em;
    }

    .company .step3 .item-wrap::before {
        left: -1.3em;
    }

    
    .company .step3 .item-wrap::after {
        left: -1.3em;
    }

    .company .step3 .title::before {
        left: -1em;
        width: 0.3em;
        height: 0.3em;
    }



    .company .step3 .item {
        gap: 2em;
    }

    .company .step3 .item + .item {
        padding-top: 2em;
    }

    .company .step4 {
        padding: 7em 0;
    }

    .service .step1 {
        padding-bottom: 7em;
    }

    .product .step2 {
        padding: 7em 0;
    }

    .example {
        padding: 7em 0;
    }

    .product .step2 {
        padding: 7em 0;
    }

    .product .step3 {
        padding: 7em 0;
      }

      .product2 .quater {
        padding: 7em 0;
      }

      .product3 .step4 {
        padding: 7em 0;
      }
      .product3 .step5 {
        padding: 7em 0;
      }

      .sub_visual {
        margin-bottom: 5em;
      }

      .main .step6 .step_wrap {
        padding-bottom: 7em;
      }


      
    

    .visual {
        padding-top: 9em;
        padding-bottom: 10em;
    }

    
    .service .sub-header .sub_title {
        padding-bottom: 0.5em;
    }


    .main .visual .step_2 {
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .main .step_2 .img-wrap {
        width: 100%;
        height: 25em;
    }

    .main .step_2 .txt-wrap {
        display: none;
        width: 100%;
        height: 20em;
        background-color: #E5D3BF;
        color: #fff;
    }

    .main .step3 .item-wrap {
        flex-direction: column;
        gap: 1em;
    }
    .main .step3 .item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 10em;

    }

    .main .step_3 .item {
        height: 20em;
        text-align: center;
    }

    .main .visual .step_3 .item .btn {
        justify-content: inherit;
        gap: unset;
        flex-direction: column;
    }

    .main .visual .step_3 .item .txt-wrap {
        align-items: center;
        gap: 2em;
        width: 100%;
    }


    .main .visual .step_3 .item .txt {
        margin: 0;
        gap: 2em;
    }

    .main .visual .step_3 .item .txt .title {
        
        height: 3em;
        margin: 0 auto;
    }

    .main .step_3 .img-wrap {
        display: none;
    }

    .main .step_3 .item-wrap {
        transform: translateY(4em);
    }

    .main .step_3 .go {
    width: 100%;
    height: 5em;
    padding: 0;
    border-radius: 0;
    align-items: center;
    justify-content: center;
    }

    .main .step3 .item .btn {
        flex-direction: row;
        align-items: center;
    }

    .main .step3 .item .txt-wrap {
        flex-direction: row;
        align-items: center;
        padding: 0 2em;
    

    }

    .main .step3 .title .br {
        display: none;
    }


    .main .step3 .icon-wrap {
        display: none;
    }

    .main .step3 .item {
        color: #fff
    }
    .main .step3 .item:hover {
        border-radius: 0;
        transition: unset;
    }

    .main .step3 .item_1 {
        background: url(/resources/images/main_product_01.jpg) no-repeat center;
        background-size: cover;
    }

    .main .step3 .item_2 {
        background: url(/resources/images/main_product_02.jpg) no-repeat center;
        background-size: cover;
    }

    .main .step3 .item_3 {
        background: url(/resources/images/main_product_03.jpg) no-repeat center;
        background-size: cover;
    }

    .main .step3 .item_4 {
        background: url(/resources/images/main_product_04.jpg) no-repeat center;
        background-size: cover;
    }

    .main .step3 .item_5 {
        background: url(/resources/images/main_product_05.jpg) no-repeat center;
        background-size: cover;
    }

    .main .step4 .item.img-wrap {
        display: none;
    }

    

    .main .step4 .txt-wrap {
        gap: 0.25em;
    }

    .main .step4 .txt-wrap {
        padding-bottom: 0.5em;
    }

    .main .step5 .item-wrap {
        flex-wrap: wrap;
    }

    .main .step4 .item {
        width: 100%;
    }

    .main .step5 .item {
        width: calc((100% - (1em * 1)) / 2);
        height: 10em;
        box-shadow: 3px 5px 6px rgba(0, 0, 0, 16%);
    }

    .service .sub_visual2 .tab-wrap {
        flex-wrap: wrap;
    }
    .service:not(.product) .sub_visual2 .tab-wrap .tab {
        width: calc((100% - 2em) / 2);
    }

    .company .sub-header {
        padding-bottom: 2em;
    }

    .company .step2 .item-wrap {
        flex-direction: column;
        gap: 1em;
    }


    .company .step2 .item-wrap .item { 
        width: 100%;
        height: 18em;
    }

    .company .step2 .item-wrap .item1 {
        background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(/resources/images/company_item01.jpg)no-repeat center;
        background-size: cover;
    }

    .company .step2 .item-wrap .item2 {
        background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(/resources/images/company_item02.jpg)no-repeat center;
        background-size: cover;
    }

    .company .step2 .item-wrap .item3 {
        background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(/resources/images/company_item03.jpg)no-repeat center;
        background-size: cover;
    }

    .company .step4 .inner-wrap {
        flex-direction: column;
    }

    .company .step4 .step_1 {
        width: 100%;
    }

    .company .step4 .step_2 {
        width: 100%;
    }

    .sub_visual {
        height: unset;
        padding: 3em 0;
        margin-top: 5em;
    }

    .sub_visual2 .inner-wrap {
        padding-bottom: 2em;
        padding-top: 0;
    }

    .sub_visual .sub_nav {
        padding-bottom: 1em;
        gap: 0.33em;
    }

    .sub_visual .txt-wrap {
        gap: 1em;
    }

    .sub_visual2 {
        justify-content: space-around;
    }


    .product .sub_visual2 .tab-wrap {
        flex-wrap: wrap;
    }

    .sub_visual2 .tab-wrap {
        height: unset;
    }

    .product .step2 .txt-wrap {
        padding-right: 20px;
    }

    .product .step_title {
        padding-bottom: 0.75em;
    }

    .product .step2 .item-wrap .item + .item {
        padding-top: 1em;
    }

    .product3 .step4 .step_2 .item_title {
        padding-bottom: 0.75em;
    }

    .example .txt_wrap {
        padding-bottom: 1em;
    }

    .example .txt_wrap .sub_title {
        padding-bottom: 0.4em;
    }

    .example .txt_wrap {
        padding-bottom: 1em;
    }

    .product3 .step1.half .item-wrap .step_2 {
        width: calc(100% - 18em);
    } 


    .product .sub_visual2 .tab-wrap .tab {
        width: unset;
    }

    .sub_visual2 .tab-wrap .tab {
        border-radius: 9999px;
    }

    .sub_visual2 .tab-wrap .tab .item {
        padding: 1em; 
    }

    .sub_visual2 .tab-wrap .tab .item .none {
        display: none;
    }
    




    .service .step1 {
        flex-direction: column;
    }


    .service:not(.product2,.product3,.product4,.product6) .img_innerwrap {
        width: 100%;
        height: unset;
        /* height: 60em; */
    }
    /* .service .img_innerwrap .img-wrap {
        height: calc(60em - 3.33em);
    } */
     
    .product .step1.half .item-wrap .item .img-wrap {
        padding: 10px;
    width: calc(100% - 80px);
    height: unset;
    }

    .service .img_innerwrap .img-wrap {
    padding: 10px;
    width: calc(100% - 80px);
    height: unset;
    }


    .service .img_innerwrap .img-wrap img{
        height: 100%;
        object-fit: contain;
    }

    .service .step1 .txt-wrap {
        width: 100%;
    }

    .example .item-wrap .item {
        width: calc((100% - (2em * 1)) / 2);
        height: 24em;
    }

    .example .item-wrap .item .title-wrap .img-wrap {
        height: 20em;
    }

    .example .item-wrap .item .title-wrap .txt {
        height: 4em;
    }

    .main .step2 {
        margin-bottom: 5em;
    }

   

    .product .step3 {
        padding: 7em 0;
    }

     .main .step5 {
        padding-bottom: 7em;
    }

    .main .step6 .step_wrap {
        padding-bottom: 7em;
      }

    .service .step1 {
        padding-bottom: 7em;
    }

    .work .work_step {
        padding-bottom: 7em;
      }
      .download .download_step {
        padding-bottom: 7em;
      }
    
    .product .step1 .__base-wrap {
        flex-direction: column;
    }

    .file .sub-header {
        padding-bottom: 0.75em;
    }

    
    .service.product .img_innerwrap {
        width: 100%;
        height: unset;
    }

    .product .step1.half .item-wrap {
        width: 100%;
        height: unset;
    }

    .product2 .step1.half .item-wrap .item .img-wrap {
        width: 50%;
    }

    .product3 .step1.half .item-wrap .item .img-wrap {
        margin-top: 40%;
    }

    .product3 .step1.half .item-wrap .step_2 {
        width: calc(100% - 15em);
    }

    .product1 .step3 .img_innerwrap .img-wrap {
        width: calc(100% - 80px);
        height: unset;
    }

    .product2 .step3 .step_title {
        text-align: center;
    }


    .product2 .step3 .item-wrap {
        flex-wrap: wrap;
    }


    .product2 .step3 .item {
        width: calc((100% - (1.6667em * 1) - 4px) / 2);
    }


    .quater .item-wrap .item .img-wrap {
        width: 20em;
    }
    .quater .item-wrap .item .txt-wrap {
        width: calc(100% - 20em);
    }

    .product4 .step3 .step_title {
        text-align: center;
    }


    .product4 .step3 .item-wrap {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .product4 .step3 .item {
        max-width: 26.666666em;
        width: calc((100% - (2em * 1) - 4px) / 2)
    }


    .product5 .img_innerwrap .img-wrap {
        height: calc(35em - 3.33em);
    }

    .product6 .step3 .img_innerwrap {
        flex-direction: column;
        width: 100%;
        height: unset;
        gap: 2em;
    }

    .product6 .step3 .step_1 {
        width: 100%;
    }

    .product6 .step3 .step_2 {
        width: 100%;
    }

    .product6 .step5 {
        padding: 7em 0;
    }

    .product7 .img_innerwrap .img-wrap {
        height: calc(35em - 3.33em);
    }

    
    .product3 .step5 .item-wrap{
        flex-direction: column;
    }
    .product3 .step5 .item-wrap .item.step_1 {
        width: 100%;
    }

    .product3 .step5 .item-wrap .item.step_2 {
        width: 100%;
    }

    .product .table-wrap {
        overflow-x: auto;
    }


    .product .table-wrap  .table {
        width: 955px;
    }



    .service.product4 .step1 .txt-wrap {
        width: 100%;
    }

    .product6 .step5 .step_1 .table-wrap  .table {
        width: 1000px;
    }




    .mobile.table-swipe {
    display: block;
    position: relative;
    margin: 10px 0 30px;
    width: 955px;
}

    .mobile.table-swipe .swipe-line {
    display: block;
    height: 6px;
    background: rgba(0, 70, 131, .3);
    border-radius: 10px;
}

.mobile.table-swipe .swipe-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-30%);
    width: 14px;
    height: 14px;
    background: #004683;
    border-radius: 100%;
    animation: swipe-ani 4.5s infinite;
}

    


@keyframes swipe-ani {
    0% {
        opacity: 0;
        left: 0;
    }
    30% {opacity: 1;}
    100% {
        opacity: 1;
        left: 95%;
    }
}

    .product .table-wrap .none .txt {
        display: block;
        color: #a4a4a4;
        padding: 1em 0;
        text-align: left;
    }

    .work .tr {
        align-items: center;
    }

    .work .th {
        
        width: calc(100% / 3);
    }

    .work .td {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: calc(100% / 3);
    }

    
    .work .td .txt {
        text-align: center;
        height: unset;
    }

    .work .name .txt {
        padding: 0 1em;
    }


    .download .download_step .item {
        width: calc((100% - (2em * 1)) / 2);
    }

    .patent .patent_step .item {
        width: calc((100% - (1.6667em * 3)) / 4);
    }

    .contact .sub-header {
        padding-bottom: 1em;
        margin-bottom: 1em;
    }

    .contact .form-wrap {
        gap: 1em;
    }

    .contact .form-item .half {
        width: calc((100% - 1em) / 2);
    }

    .contact .item-tit {
        font-size: 1.4em;
    }

    .contact .form-item .half {
        gap: 1em;
        flex-direction: column;
        align-items: self-start;
    }

    .contact .item-wrap {
        flex-direction: column;
        align-items: self-start;
    }

    .contact .txt-input {
        width: 100%;
    }

    .contact .textarea-input {
        width: 100%;
    }


    .contact .filebox {
     align-items: unset;
     flex-direction: unset;
    }

    .contact .filebox .step_2 {
    flex-direction: column;

    gap: 2em;
    align-items: flex-start;
    }

    .upload_wrap {
        width: 100%;
    }



    .contact .filebox .step_2 {
        width: calc(100% - 8.4em - 2em);
    }

    .contact .filebox .btn-wrap {
        width: 100%;
        gap: 2em;
    }

    .contact .filebox .upload-button {
        width: calc((100% - 2em) / 2);
    }

}

@media screen and (max-width:650px) {

    html {
        font: 300 13px / 1.2 'Paperlogy', sans-serif;
    }

    .visual {
        padding-top: 7.3334em;
        padding-bottom: 15em;
    }

    .common_title{
        font-size: 2em;
    }
    .main .step_1 .title {
        font-size: 2.5em;
    }

    .main .step_3 .item .txt .desc {
        font-size: 1.5em;
    }


    .main .step2 .img-wraps {
        flex-direction: column;
    }

    .main .step2 .img-wraps .img-wrap {
        width: 100%;
      }

    .company .step1 .inner-wrap .txt-wrap .desc .br {
        display: none;
    }


    .product .step1.half .item-wrap .item .img-wrap {
        padding: 10px;
        width: 50%;
        height: unset;
        }

        .product3 .step1.half .item-wrap .item .img-wrap {
            margin-top: unset;
        }


    .company .step3 .item {
        flex-direction: column;
    }
    .company .step3 .title::before {
        top: 50%;
        transform: translateY(-50%);
    }

    .company .step2 .item-wrap .icon_wrap .img-wrap {
        margin-bottom: 0.5em;
    }

    .example .item-wrap {
        gap: 1em;
    }

    .example .item-wrap .item {
        width: calc((100% - (1em * 1)) / 2);
    }

    .example .item-wrap .item .title-wrap .txt .title {
        font-size: 1.0769em;
    }
    .example .item-wrap .item .title-wrap .icon-wrap {
        display: none;
    }

    .example .item-wrap .item .title-wrap .txt {
        padding: 0 1em;
    }

    .sub_visual2 .tab-wrap {
        gap: 0.5em;
    }



    .product .step1.half .item-wrap  {
        flex-direction: column;
        height: unset;
    }

    .product .step1.half .item-wrap .item {
        width: 100%;
    }
    .product .half_02 .item .title {
        width: 14em;
        font-size: 1em;
    }

    .product1 .step3 .inner-wrap {
        flex-direction: column;
        gap: 1em
    }

    .product2 .step1.half .item-wrap .step_2 .list_wrap {
        padding: 2em;
    }

    .quater .item-wrap .item {
        flex-direction: column;
    }
    .quater .item-wrap .item .img-wrap {
        width: 100%;
    }

    .quater .item-wrap .item .txt-wrap {
        width: 100%;
        height: 15em;
        padding-left: 0;
    }

    .quater .item-wrap .item .txt-wrap .item_subtitle {
        margin-left: 0.7693em;
    }

    .quater .item-wrap .item .txt-wrap .item_title {
        padding: 0 0.5883em;
    }

    .quater .item-wrap .item .txt-wrap .item_desc {
        padding: 1em 0.7693em 0;
    }

 

    .product3 .step3 .item-wrap {
        flex-wrap: wrap;
    }

    .product3 .step3 .item {
        width: calc((100% - (1em * 1)) / 2);
    }

    .product3 .step4 .step_1 {
        width: 100%;
    }


    .product3 .step4 .inner-wrap{
        flex-direction: column;
    }

    .product3 .step4 .step_2 {
        width: 100%;
    }

    .product6 .step1.half .item-wrap {
        gap: 0.5em;
        height: unset;
    }

    .product6 .step1.half .item-wrap .item .txt_wrap {
        height: unset;
        padding: 0.7692em;
    }

    .product6 .step1.half .item-wrap .item .txt_wrap .txt br {
        display: none;
    }



    /* .work .name {
        width: 15em;
    }

    .work .period {
        width: 10em;
    }

    .work .order {
        width: calc(100% - 15em - 10em);
    } */

    .download .download_step .item {
        width: 100%;
    }

    .download .download_step .item-wrap {
        gap: 1em;
    }


    .download .download_step .item {
        width: calc((100% - (1em * 1)) / 2);
    }

    .patent .patent_step .item-wrap {
        gap: 1em;
    }

    .patent .patent_step .item {
        width: calc((100% - (1em * 1)) / 2);
    }
    .contact .filebox {
        gap: 1em;
    }
    .contact .form-item {
        gap: 1em;
    }

    .contact .item-wrap {
        flex-direction: column;
        gap: 1em;
    }

    .contact .filebox .step_2 {
        width: 100%;
    }
    .contact .form_agree .checkbox_all {
        padding-left: 1em;
    }

    .contact .form_agree .checkbox {
        padding: 1em;
    }

    .contact .form_agree .checkbox .form_more {
        margin-left: 0.5em;
    }

    .footer-wrap {
        flex-direction: column-reverse;
        gap: 2em;
    }


    .footer-wrap .menu {
        width: 100%;
    }


    .footer-wrap .menu .item {
        width: calc(100% / 3);
        text-align: center;
    }


    .footer .txt + .txt {
        padding-bottom: 0.73em;
    }


}


@media screen and (max-width:480px) {

    .main .step_1 .txt {
        font-size: 1.5em;
        padding-bottom: 0.3334em;
    }
    .main .step_1 .title {
        font-size: 2em;
        background: #F3ECE3;
    }
    .main .step_1 .item-wrap {
        padding-top: 2em;
        gap: 2em;
    }


    .main .step6 .step_wrap {
        flex-direction: column;
        gap: 5em;
    }
    .main .step6 .inner-wrap {
        width: 100%;
    }

    .company .step1 .inner-wrap .txt-wrap .title {
        font-size: 1.8em;
    }
    .company .step4 .item-wrap {
        flex-direction: column;
    flex-wrap: wrap;
    height: unset;
    }

    .company .step4 .step_2 {
        height: unset;
    }
    .company .step4 .item-wrap .item {
        width: 100%;
    }

    
    .company .step4 .item-wrap .item_txt {
        display: inline-flex;
        gap: 1em;
        align-items: center;
        padding: 1em 0;
        width: 100%;
    }

    .company .step4 .item-wrap .item .title {
        padding: 1em;
    }




    section:not(.product) .sub_visual2 .tab-wrap .tab .item {
        padding: 1em 0;
    }


    .product1 .step3 .inner-wrap {
        flex-direction: column;
    }

    .service .img_innerwrap .img-wrap {
        width: calc(100% - 30px);
        height: unset;
    }

    .service:not(.product2,.product3,.product4,.product6) .img_innerwrap {
        height: unset;
    }

    .product1 .step1 .img_innerwrap .img-wrap {
        width: calc(100% - 30px);
    }

    .product .step2 .step_2 {
        padding: 30px;
        width: calc(100% - 30px);
        height: unset;
    }

    .product .step2 .step_2 .img-wrap {
        width: calc(100% - 30px);
    }

    .product .step2 .step_2 {
        gap: 1em;
    }

    .product .half_02 .item {
        width: calc((100% - 1em) / 2);
    }

    .product .half_02 .item .title {
        width: 10em;
    }

    .product2 .step3 .item {
        width: 100%;
        height: unset;
    }
    .product2 .step3 .txt-wrap .item_title {
        font-size: 1.5em;
        padding-bottom: 0.5em;
    }

    .product2 .step3 .txt-wrap .item_desc {
        font-size: 1.1538em;
        font-weight: 500;
    }

    .product3 .step3 .item .txt-wrap .item_desc .none {
        display: block;
    }

    .product3 .step4 .step_1 {
        height: 30em;
    }

    .product3 .step4 .step_1 .img-wrap {
        width: calc(100% - 30px);
    }


    .product4 .step3 .item-wrap {
        flex-direction: column;
    }


    .product4 .step3 .item {
        width: 20em;
        height: 20em;
    }

    .example .item-wrap {
        flex-wrap: wrap;
    }

    .example .item-wrap .item .title-wrap .icon-wrap {
        display: block;
    }

    .example .item-wrap .item {
        width: 100%;
    }





    .download .download_step .item {
        width: 100%;
    }

    .contact .form_agree .checkbox .txt .none {
    display: block;
}

}


@media screen and (max-width: 420px) {

    .main .step3 .inner-wrap {
        padding: 5em 0;
    }
    .main .step4 {
        padding: 5em 0;
    }

    .main .step5 {
        padding-bottom: 5em;
    }

    
    .company .step4 {
        padding: 5em 0;
    }

    .service .step1 {
        padding-bottom: 5em;
    }

    
     .main .step5 {
        padding-bottom: 5em;
    }

    .main .step6 .step_wrap {
        padding-bottom: 5em;
      }

    .service .step1 {
        padding-bottom: 5em;
    }

    .work .work_step {
        padding-bottom: 5em;
      }
      .download .download_step {
        padding-bottom: 5em;
      }
    

    .product .step2 {
        padding: 5em 0;
    }

    .example {
        padding: 5em 0;
    }

    .product .step2 {
        padding: 5em 0;
    }

    .product .step3 {
        padding: 5em 0;
      }

      .product2 .quater {
        padding: 5em 0;
      }

      .product3 .step4 {
        padding: 5em 0;
      }
      .product3 .step5 {
        padding: 5em 0;
      }




    .company .step2 {
        padding: 5em 0;
    }

    .company .step3 {
        padding: 5em 0;
    }


    .product .step3 {
        padding: 5em 0;
    }

        .product6 .step5 {
        padding: 5em 0;
    }

    html {
        font: 300 12px / 1.2 'Paperlogy', sans-serif;
    }

    
    .company .step1 .inner-wrap .txt-wrap .title {
        font-size: 1.5em;
    }

    .product .step_title {
        font-size: 1.5em;
    }

    .main .step_1 .title {
        font-size: 1.9em;
    }



    .main .step_3 .item {
        width: 100%;
    }

    .main .visual .step_3 .item .txt-wrap {
        flex-direction: column;
    }

    .quater .item-wrap .item .txt-wrap {
        height: 20em;
    }

    .contact .form-item {
        flex-direction: column;
    }

    .contact .form-item .half {
        width: 100%;
    }

    .footer .copyright .none {
        display: block;
    }




}

@media screen and (max-width: 360px) {

    .main .step_3 .item-wrap {
        flex-direction: column;
    }
    .contact .form_agree .checkbox .form_more {
        width: unset;
        padding:0 1em;
    }

}


@media screen and (max-width:960px) {
    .card-wrap .tab li {
        width: calc((100% - 80px) / 5);
    }
  
    .card-wrap h2 {
        margin: 20px auto;
    }
  
    .list__wrap .list__header {
        margin: 0 auto 20px;
    }
  
    .list__wrap .list-ul {
        gap: 20px;
        padding: 30px;
    }
  
    .list__wrap .list-ul > li {
        width: calc((100% - 40px) / 3);
    }
  
    .list__wrap .list-ul .thum {
        border-radius: 10px;
    }
  
    .list__wrap .list-ul .thum {
        margin-top: 0;
    }
  
    .card-wrap .tab {
        flex-wrap: wrap;
        border-bottom: none;
        margin-bottom: 30px;
        gap: 15px;
    }
  
    .card-wrap .tab li {
        width: calc((100% - 35px) / 3);
        border: 1px solid #eaeaea;
        border-radius: 99px;
        box-sizing: border-box;
    }
  
    .card-wrap .tab li.on {
        border: none;
        background-color: #f15c2d;
        color: #fff;
    }
  }
  
  @media screen and (max-width: 750px) {
    .list__wrap .list-ul > li {
        width: calc((100% - 20px) / 2);
    }
  
    .modal-content {
        width: calc(100% - 40px);
    }
  
    .modal-content .scroll-wrap {
        padding: 30px 20px;
    }
  }
  
  @media screen and (max-width: 550px) {
    .list__wrap .list-ul > li {
        width: 100%;
    }
  
    .list__wrap .list-ul .thum {
        border-radius: 20px;
    }
  
    .modal-content .content-header {
        flex-direction: column;
    }
  
    .list__wrap .modal-content .thum {
        width: 100%;
    }
  
    .modal-content .header-txt {
        flex: 1 1 auto;
        text-align: center;
        width: 100%;
    }
  
    .modal-content .blank {
        width: 50%;
        background: #f15c2d;
        color: #fff;
        justify-content: center;
        border-radius: 99px;
        height: 45px;
        margin: 0 auto;
    }
  
    .modal-content .card_info {
        padding: 10px;
    }
  
    .list__wrap .list__header h3 {
        font-size: 2.5rem;
        word-break: keep-all;
    }
  
    .list__wrap .list__header {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
    }
  
    .list__wrap .list__header h3 + em {
        margin: 0;
    }
  
    .modal-content .scroll-wrap {
        max-height: 60vh;
    }
  
    .modal-content {
        top: calc(50% + 20px);
    }
  
    
    b.deco {
        font-weight: 800;
    }
  
    b.deco:after {
        display: block;
    }
  }