@media all and (max-width:1254px){#wrap.design.design01 .process .title04{grid-template-columns: repeat(3, 28%);}}
@media all and (min-width:768px) and (max-width:1024px) {

    body{overflow-x: hidden;}
    .inner{width: 100%;}

    /* comoon */
    /* header */
    header .inner{width: 100%;}
    header .menu-wrapper{display: none;}

    footer .inner{width: 100%;}
    footer .f_left{width: 100%; text-align: center; padding: 20px;}
    footer .f_left .company-info .infoBox{justify-content: center;}
    footer .f_right{width: 100%; text-align: center;}
    footer .f_right .f_logo{left: 50%; transform: translateX(-50%);}
    footer .f_right .insta{left: 49%; top: 90px;}
    footer .f_right p.copyright{margin-top: 146px; color: #A3A3A3; font-weight: 500;}

    /* 모바일 버튼 */
    .mob-btn{display: block; position: absolute; top: 20px; right: 20px; width: 36px; height: 36px;}
    .menu-link{width: 100%; height: 100%; position: absolute; z-index: 9999;}
    .menu-icon{position: absolute;  width: 20px; height: 14px; margin: auto; right: 0; left: 0; top: 0; bottom: 1px;}
    
    .menu-line {
        background-color: #fff;
        height: 2px;
        width: 100%;
        border-radius: 2px;
        position: absolute;
        left: 0;
        transition: all 0.25s ease-in-out;
    }
        .menu-line-2 {
        top: 0;
        bottom: 0;
        margin: auto;
        }
        .menu-line-3 {
        bottom: 0;
        }
        .mob-btn.open .menu-line-1 {
        -webkit-transform: translateY(7px) translateY(-50%) rotate(-45deg);
                transform: translateY(7px) translateY(-50%) rotate(-45deg);
        }
        .mob-btn.open .menu-line-2 {
        opacity: 0;
        }
        .mob-btn.open .menu-line-3 {
        -webkit-transform: translateY(-7px) translateY(50%) rotate(45deg);
                transform: translateY(-7px) translateY(50%) rotate(45deg);
        }

        .menu-circle {
            background-color: #FF9C43;
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 50%;
            -webkit-transform: scale(1);
                    transform: scale(1);
            z-index: 1000;
            transition: -webkit-transform 0.4s ease-in-out;
            transition: transform 0.4s ease-in-out;
            transition: transform 0.4s ease-in-out, -webkit-transform 0.3s ease-in-out;
        }

         .mob-btn.open .menu-circle {
            -webkit-transform: scale(60);
                    transform: scale(60);
        }

        .menu-overlay {
            background-color: #FF9C43;
            color: #333;
            height: 250px;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            transition: opacity 0.4s ease-in-out;
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        .mob-menu{
            position: absolute;
            max-width: 1024px;
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
            top: 200px;
            color: #fff;
        }

        .mob-menu li a{font-size: 50px; line-height: 2;}

          /* MAIN VISUAL */
        .main-visual .inner{width: 100%;}
        .main-visual .main-title{padding: 50px;}
        .main-visual .main-title .left{font-size: 60px;}
        .main-visual .each-list{height: 350px;}
        .main-visual .each-list img.each01{height: 150px; left: 27%; top: -20px;}
        .main-visual .each-list img.each02{height: 150px; left: 50%; transform: translateX(-50%); top: 100px;}
        .main-visual .each-list img.each03{height: 150px; top: -200px; right: 20%;}
        .main-visual .each-list img.each04{height: 40px; top: 30px; left: 33%;}

        .main-visual .sub-img-list{ margin-top: 0; height: 420px;}
        .main-visual .sub-img-list .square01{left: 20%; top: 70px;}
        .main-visual .sub-img-list .square02{right: 20%; top: -50px;}
        .main-visual .sub-img-list .sub-line{left:50%; top: 200px; transform: translateX(-50%); height: 200px;}
        .main-visual .sub-img-list .unique{right: 20%; top: 50px; height: 230px;}
        .main-visual .sub-img-list .bang01{right: 50px; top: 220px; height: 100px;}
        .main-visual .sub-img-list .bang02{left: 10%; top: 220px; height: 150px;}

        .upper-container{width: 100%; height: 100vh; font-size: 20px;}

        .following-content .contact .title::before,
        .following-content .contact .title::after{
            content: '';
            position: absolute;
            width: 15%;
            height: 4px;
            background-color: #FF8C3E;
            top: 50%;
            transform: translateY(-50%);
        }

        /* 서브페이지 */
        /* 회사소개 - about us */
        .sub-top .inner{width: 100%;}
        .sub-top .title{left: 5%;}
        .sub-top img{height: 200px; bottom: 0; }
        .sub-top .root{left: 5%;}
        .sub-nav ul{width: 78%; margin: 0 auto; }

        #wrap.marketing-01 .inner{padding: 20px; height: 1800px;}
        #wrap.marketing-01 .container .main-txt{padding-top: 50px;}
        #wrap.marketing-01 .title .sub-tit{font-size: 35px;}
        #wrap.marketing-01 .container img.bg01{left: 5%; top: 300px; height: 100px;}
        #wrap.marketing-01 .container img.bg03{right: 5%; top: 900px; height: 150px;}
        #wrap.marketing-01 .container .main-txt{font-size: 25px; line-height: 1.6;}
        #wrap.marketing-01 .container .infos{margin-top: 250px;}
        #wrap.marketing-01 .container .infos .txt02{margin: 100px 0;}
        #wrap.marketing-01 .container .infos .txt04{margin-bottom: 0;}

        #wrap.marketing-02 .inner{padding: 150px 20px;}
        #wrap.marketing-02 .title span{display: block; margin: 20px 0;}
        #wrap.marketing-02 img{height: 400px;}

        #wrap.marketing-03 .inner{padding: 120px 20px;}

        #wrap.marketing-04 .inner{padding: 120px 20px;}
        #wrap.marketing-04 .infos{flex-wrap: wrap; justify-content: center;}
        #wrap.marketing-04 .infos .download{margin-top: 50px;}


        /* 마케팅 */
        #wrap.marketing .inner{padding: 20px;}
        #wrap.marketing .brand-info .main-title{font-size: 40px;}
        #wrap.marketing .brand-info .brandBox{height: 900px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft{width: 539px; height: 778px; background-size: contain; background-repeat: no-repeat; z-index: 10;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft > .tit{font-size: 32px; top: 75px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft .infos{top: 220px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft .infos .tit{font-size: 16px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft .point{top: 470px; font-size: 20px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft .point span{font-size: 18px;}

        .brandCenter{width: 188px; height: 188px; font-size: 35px; padding-top: 55px; top: 40%;}

        #wrap.marketing .brand-info .brandBox .brand.brandRight{width: 547px; height: 692px; background-size: contain; background-repeat: no-repeat; z-index: 10}
        #wrap.marketing .brand-info .brandBox .brand.brandRight > .tit{font-size: 32px; top: 110px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight .infos{top: 260px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight .infos .tit{font-size: 16px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight .point{top: 440px; font-size: 20px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight .point span{font-size: 18px;}

        #wrap.marketing .moum-service .inner{flex-wrap: wrap; justify-content: center;}
        #wrap.marketing .moum-service .title .tit01,
        #wrap.marketing .moum-service .title .tit02{font-size: 56px; letter-spacing: -5px;}
        #wrap.marketing .moum-service .title .tit03{font-size: 130px; font-weight: 600;}
        #wrap.marketing .moum-service img{margin-top: 100px;; height: 600px;}

        .reference .inner{width: 100%;}
        .reference ul li a{width: 150px; height: 150px;}

        /* 포트폴리오 */
        #wrap.design .inner{padding: 20px;}
        #wrap.design .title{margin-top: 50px;}
        #wrap.design.design01 .txt > img{left: 0; height: 150px; top: -20px; opacity: .5;}
        #wrap.design.design01 .process{margin-top: 100px;}
        #wrap.design.design01 .process .tit.title02 img.designBg2{height: 100px; left: 340px;}
        #wrap.design.design01 .process .img.img01 img{height: 150px;}
        #wrap.design.design01 .process .img.img02 img{height: 200px; margin-top: 70px;}
        #wrap.design.design01 .process .tit.title02{margin-top: 150px;}
        #wrap.design.design01 .process .tit.title03{margin-top: 150px;;}
        #wrap.design.design01 .process .tit.title03 p{position: absolute; top: 50px;}
        #wrap.design.design01 .process .img.img03 img{height: 80px; margin-bottom: 50px;}
        #wrap.design.design01 .process .img.template img{width: 100%;}
        #wrap.design.design01 .process .img.template .template_text{width: 50%;}
        #wrap.design.design01 .process .product-list.title03 .template_layout .template_title{font-size: 20px;}
        #wrap.design.design01 .process .title04{grid-template-columns: repeat(2, 47%);}

        #wrap.design.design02 .txt > img{left: 0; height: 150px; top: -90px; opacity: .5}
        #wrap.design.design02 .process img.process04{height: 520px; margin: 70px auto;}
        #wrap.design.design02 .process img.process05{height: 150px; margin: 70px auto;}
        #wrap.design.design03  ul.list{flex-wrap: wrap;}
        #wrap.design.design03  ul.list li{margin: 10px;}
        #wrap.design.design03 .process img.process06{height: 500px;}
        #wrap.design.design03 .process img.process07{height: 150px;}

        #wrap.design.design01 .process .title03.product-list ul{display: flex; flex-wrap: wrap; justify-content: center;}
        #wrap.design.design01 .process .title03.product-list ul li{
            width: 191px;
            height: 121px;
            border: 3px solid transparent;
            border-radius: 100px;
            background-image: linear-gradient(#fff, #fff), 
            linear-gradient(to right, #F4A223 40%,  #E27829 60%);
            background-origin: border-box;
            background-clip: content-box, border-box;
            font-size: 25px;
            color: #575757;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            flex-wrap: wrap;
            margin: 10px;
            overflow: hidden;
            
}
        .swiper-slide {width: 300px;}
        .swiper-slide img{height: 150px;}
        .swiper-container.design03 .swiper-slide{width: 400px; height: 120px;  overflow: hidden}
        .swiper-container.design03 .swiper-slide img{height: 120px;}


        /* 견적문의 */
        #wrap.contactBox .infos{flex-wrap: wrap; justify-content: center; text-align: center;}
        #wrap.contactBox .infos .txt  img{display: block; margin: 0 auto;}

        /* 레퍼런스 -클라이언트 */
        #wrap.partner .inner{padding: 150px 20px;}

        /* 레퍼런스 - 협력사 */
        #wrap.partner  ul.partner-list{flex-wrap: wrap; justify-content: center;  margin: 150px 0 50px 0;}
        #wrap.partner  ul.partner-list li{margin: 10px 20px;}

        .following-content .contact .agree button{width:300px; border-radius: 40px; margin: 10px auto;}
        
        



}  /* 태블릿 */


@media all and (min-width:320px) and (max-width:767px) {

    body{overflow-x: hidden;}
    .inner{width: 100%;}

    /* comoon */
    /* header */
    header .inner{width: 100%;}
    header .menu-wrapper{display: none;}

    footer .inner{width: 100%;}
    footer .f_left .top-info a{font-size: 14px; margin: 0 10px;}
    footer .f_left .top-info a::after{
        content: '|';
        position: absolute;
        right: -15px;
        top: 1px;
    }
    footer .f_left{width: 100%; text-align: center; padding: 20px; font-size: 13px;}
    footer .f_left .company-info .infoBox{justify-content: center;}
    footer .f_right{width: 100%; text-align: center; font-size: 13px;}
    footer .f_right .f_logo{left: 50%; transform: translateX(-50%);}
    footer .f_right .insta{left: 49%; top: 90px;}
    footer .f_right p.copyright{margin-top: 146px; color: #A3A3A3; font-weight: 500;}

    /* 모바일 버튼 */
    .mob-btn{display: block; position: absolute; top: 20px; right: 20px; width: 32px; height: 32px;}
    .menu-link{width: 100%; height: 100%; position: absolute; z-index: 9999;}
    .menu-icon{position: absolute;  width: 20px; height: 14px; margin: auto; right: 0; left: 0; top: 0; bottom: 1px;}
    
    .menu-line {
        background-color: #fff;
        height: 2px;
        width: 100%;
        border-radius: 2px;
        position: absolute;
        left: 0;
        transition: all 0.25s ease-in-out;
    }
        .menu-line-2 {
        top: 0;
        bottom: 0;
        margin: auto;
        }
        .menu-line-3 {
        bottom: 0;
        }
        .mob-btn.open .menu-line-1 {
        -webkit-transform: translateY(7px) translateY(-50%) rotate(-45deg);
                transform: translateY(7px) translateY(-50%) rotate(-45deg);
        }
        .mob-btn.open .menu-line-2 {
        opacity: 0;
        }
        .mob-btn.open .menu-line-3 {
        -webkit-transform: translateY(-7px) translateY(50%) rotate(45deg);
                transform: translateY(-7px) translateY(50%) rotate(45deg);
        }

        .menu-circle {
            background-color: #FF9C43;
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 50%;
            -webkit-transform: scale(1);
                    transform: scale(1);
            z-index: 1000;
            transition: -webkit-transform 0.4s ease-in-out;
            transition: transform 0.4s ease-in-out;
            transition: transform 0.4s ease-in-out, -webkit-transform 0.3s ease-in-out;
            overflow: hidden;
        }
/* 
         .mob-btn.open .menu-circle {
            -webkit-transform: scale(60);
                    transform: scale(60);
        } */

        .menu-overlay {
            background-color: #FF9C43;
            color: #333;
            height: 700px;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            transition: opacity 0.4s ease-in-out;
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        .mob-menu{
            position: absolute;
            max-width: 1024px;
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
            top: 220px;
            color: #fff;
        }

        .mob-menu li a{font-size: 30px; line-height: 2;}

          /* MAIN VISUAL */
        .main-visual .inner{width: 100%; overflow: hidden;}
        .main-visual .main-title{padding: 50px; padding: 20px;}
        .main-visual .main-title .left{font-size: 32px;}
        .main-visual .main-title .left span::after{width: 30px; right: -40px; height: 2px;}
        .main-visual .main-title .right{font-size: 30px; margin-top: 0;}
        .main-visual .each-list{height: 350px;}
        .main-visual .each-list img.each01{height: 300px; left: 20px; top: 60px;}
        .main-visual .each-list img.each02{height: 100px; left: 50%; transform: translateX(-50%); top: 100px;}
        .main-visual .each-list img.each03{height: 250px; top: -180px; right: -150px; z-index: -1; opacity: .7;}
        .main-visual .each-list img.each04{height: 30px; top: 90px; left: 90px;}

        .main-visual .sub-img-list{ margin-top: 0; height: 420px;}
        .main-visual .sub-img-list .square01{left: 60px; top: 150px; height: 20px;}
        .main-visual .sub-img-list .square02{right: 40px; top: 80px; height: 20px;}
        .main-visual .sub-img-list .sub-line{left:50%; top: 200px; transform: translateX(-50%); height: 150px;}
        .main-visual .sub-img-list .unique{right: 100px; top: 140px; height: 110px;}
        .main-visual .sub-img-list .bang01{right: 20px; top: 150px; height: 70px;}
        .main-visual .sub-img-list .bang02{left: 40px; top: 220px; height: 90px;}

        .upper-container{width: 100%; height: 100vh; font-size: 30px;}

        .following-content {overflow: hidden;}
        .following-content .contact .title{font-size: 50px;}
        .following-content .contact .sub{font-size: 15px; margin-top: 5px;}
        .following-content .contact .title::before,
        .following-content .contact .title::after{
            content: '';
            position: absolute;
            width: 10%;
            height: 4px;
            background-color: #FF8C3E;
            top: 50%;
            transform: translateY(-50%);
        }

        .following-content .contact .inputBox{width: 90%;}
        .following-content .contact .agree button{width:300px; border-radius: 40px; margin: 10px auto;}
        .following-content.subpage{height: 700px;}

        /* 서브페이지 */
        /* 회사소개 - about us */
        .sub-top .inner{width: 100%; height: 200px;}
        .sub-top .title{left: 5%; top: 40px;}
        .sub-top img{height: 80px; bottom: 0; opacity: 1; right: -60px;}
        .sub-top .title{font-size: 20px;}
        .sub-top .title strong{font-size: 45px;}
        .sub-top .root{left: 5%; font-size: 13px;}
        .sub-nav ul{width: 90%; margin: 0 auto; flex-wrap: wrap; justify-content: center;}
        .sub-nav ul li{font-size: 15px; width: 50%;}
        .sub-nav.design ul{width: 90%;}

        #wrap.marketing-01 .inner{padding: 20px; height: 1500px;}
        #wrap.marketing-01 .container .inner{height: 1200px;}
        #wrap.marketing-01 .container .main-txt{padding-top: 50px; font-size: 16px !important; width: 220px; margin: 0 auto;}
        #wrap.marketing-01 .title {margin-top: 50px; text-align: center;}
        #wrap.marketing-01 .title .sub-tit{font-size: 30px;}
        #wrap.marketing-01 .title .main{font-size: 32px;}
        #wrap.marketing-01 .title .main span{display: block; font-size: 18px; margin-top: 5px;}
        #wrap.marketing-01 .title .txt{font-size: 15px; margin: 20px 0;}

        #wrap.marketing-01 .container img.bg01{left: 50%; transform: translateX(-50%); top: 320px; height: 50px; opacity: .7;}
        #wrap.marketing-01 .container img.bg02{height: 100px; opacity: .4; top: 0px;}
        #wrap.marketing-01 .container img.bg03{right: 5%; top: 660px; height: 120px; opacity: .4;}
        #wrap.marketing-01 .container .main-txt{font-size: 20px; line-height: 1.6;}
        #wrap.marketing-01 .container .infos{margin-top: 200px;}
        #wrap.marketing-01 .container .infos .txt01{font-size: 16px; text-align: center;}
        #wrap.marketing-01 .container .infos .txt02{margin: 50px 0; font-size: 16px; text-align: center;}
        #wrap.marketing-01 .container .infos .txt03{font-size: 16px; text-align: center;}
        #wrap.marketing-01 .container .infos .txt04{margin-bottom: 0; flex-wrap: wrap;}
        #wrap.marketing-01 .container .infos .txt04 .txt{font-size: 20px; width: 100%; text-align: center;}
        #wrap.marketing-01 .container .infos .txt04 .txt span::after{width: 30px; height: 30px; top: -5px;}
        #wrap.marketing-01 .container .infos .txt04  #lottie-marketing{height: 150px; margin-top: 50px;}
        #wrap.marketing-01 .container .main-txt img{height: 80px; top: 60px;}

        #wrap.marketing-02 .inner{padding: 50px 20px;}
        #wrap.marketing-02 .title{font-size: 30px;text-align: center; margin-bottom: 50px;}
        #wrap.marketing-02 .title span{display: block; margin:10px 0; font-size: 16px;}
        #wrap.marketing-02 img{height: 160px;}

        #wrap.marketing-03 .inner{padding: 50px 20px;}
        #wrap.marketing-03 .title{font-size: 30px; text-align: center;}

        #wrap.marketing-04 .inner{padding: 50px 20px;}
        #wrap.marketing-04 .title{font-size: 30px; text-align: center; margin-bottom: 50px;}
        #wrap.marketing-04 .infos{flex-wrap: wrap; justify-content: center;}
        #wrap.marketing-04 .infos .txt{font-size: 16px; text-align: center;}
        #wrap.marketing-04 .infos .txt > span::after{height: 3px;}
        #wrap.marketing-04 .infos .txt strong{font-size: 24px;}
        #wrap.marketing-04 .infos .download{margin-top: 50px; width: 100%;}


        /* 마케팅 */
        #wrap.marketing .inner{padding: 20px;}
        #wrap.marketing .title{text-align: center; margin-top: 30px;}
        #wrap.marketing .title .sub-tit{font-size: 30px;}
        #wrap.marketing .title .main{font-size: 32px;}
        #wrap.marketing .title .txt{font-size: 16px;}

        #wrap.marketing .brand-info .main-title{font-size: 30px; text-align: center;}
        #wrap.marketing .brand-info .brandBox{height: 1100px; display: flex; flex-wrap: wrap;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft{position: static; width: 100%; height: 438px; background-size: contain; background-position: left bottom;  background-repeat: no-repeat; z-index: 10; background-image: none; }
        #wrap.marketing .brand-info .brandBox .brand.brandLeft > div{position: static;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft > .tit{font-size: 20px; top: 7px; letter-spacing: -1px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft .infos{top: 120px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft .infos .info{font-size: 18px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft .infos .info span{font-size: 15px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft .infos .tit{font-size: 13px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft .point{position: static; top: 240px; font-size: 18px;}
        #wrap.marketing .brand-info .brandBox .brand.brandLeft .point span{font-size: 18px;}

        .brandCenter{width: 188px; height: 188px; font-size: 35px; padding-top: 55px; top: 50%;}

        #wrap.marketing .brand-info .brandBox .brand.brandRight{position: static; width: 100%; height: 692px; background-size: contain; background-repeat: no-repeat; z-index: 10; background-image: none;margin-top: 220px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight > div{position: static;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight > .tit{font-size: 20px; top: 7px; letter-spacing: -1px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight .infos{top: 120px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight .infos .info{font-size: 18px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight .infos .info span{font-size: 15px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight .infos .tit{font-size: 13px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight .point{top: 470px; font-size: 20px;}
        #wrap.marketing .brand-info .brandBox .brand.brandRight .point span{font-size: 18px;}

        #wrap.marketing .moum-service .inner{flex-wrap: wrap; justify-content: center;}
        #wrap.marketing .moum-service .title .tit01,
        #wrap.marketing .moum-service .title .tit02{font-size: 32px; letter-spacing: -3px; text-align: center;}
        #wrap.marketing .moum-service .title .tit02{margin-left: 0;}
        #wrap.marketing .moum-service .title .tit03{margin-left: 0; font-size: 70px; margin-top: 0px;}
        #wrap.marketing .moum-service img{margin-top: 50px; height: 300px;}

        #wrap.marketing .solutions{text-align: center; color: #575757;}
        #wrap.marketing .solutions .title{font-size: 30px; margin-bottom: 30px; font-weight: 600;}
        #wrap.marketing .solutions .txt{font-size: 15px; width: 280px; margin: 0 auto; line-height: 1.5;}
        #wrap.marketing .solutions .txt span{color: #ED6C2B;}
        #wrap.marketing .solutions img{margin: 50px auto; height: 70px;}

        .reference{padding: 50px 0;}
        .reference .inner{width: 100%;}
        .reference .title{font-size: 30px; width: 100%; display: block;}
        .reference .title img{margin: 10px auto;}
        .reference ul{text-align: center; margin:0 auto; flex-wrap: wrap;}
        .reference ul li{margin: 15px auto;}
        .reference ul li a{width: 200px; height: 200px;}

        /* 포트폴리오 */
        #wrap.design .inner{padding: 20px; overflow: hidden;}
        #wrap.design .title{margin-top: 30px; font-size: 30px; text-align: center;}

        #wrap.design .process .tit{font-size: 20px;}
        #wrap.design .process .tit {font-size: 20px; flex-wrap: wrap; justify-content: center;}
        #wrap.design .process .tit img{height: 15px;}

        #wrap.design.design01 .txt{font-size: 16px; text-align: center;}
        #wrap.design.design01 .txt > img{left: 0; height: 120px; top: -20px; opacity: .5;}
        #wrap.design.design01 .process{margin-top: 100px;}
        #wrap.design.design01 .process .tit {font-size: 20px; flex-wrap: wrap; justify-content: center;}
        #wrap.design.design01 .process .tit img{height: 15px;}
        #wrap.design.design01 .process .img.img01 img{height: 60px;}
        #wrap.design.design01 .process .img.template img{width: 100%;}
        #wrap.design.design01 .process .title04{display: grid; grid-template-columns: repeat(1, 90%); justify-content: space-around;}
        #wrap.design.design01 .process .product-list.title03 .template_layout .template_title{font-size: 18px;}

        #wrap.design.design01 .process .tit.title02 img.designBg2{height: 70px; left: 250px;}
        #wrap.design.design01 .process .tit.title02{margin-top: 100px;}
        #wrap.design.design01 .process .tit.title02 span{display: block; width: 100%; text-align: center; margin-top: 10px;}
        #wrap.design.design01 .process .img.img02 img{width:100%; margin-top: 70px;}

        #wrap.design.design01 .process .tit.title03{margin-top: 100px;}
        #wrap.design.design01 .process .tit.title03 p{position: absolute; top: 35px; font-size: 14px;}
        #wrap.design.design01 .process .img.img03 img{height: 30px; margin-bottom: 50px;}

        #wrap.design.design02 .txt{font-size: 16px; text-align: center;}
        #wrap.design.design02 .txt > img{left: 0; height: 100px; top: -90px; opacity: .5}
        #wrap.design.design02 .txt ul.list{margin: 20px 0;}
        #wrap.design.design02 .txt ul.list li{font-size: 15px; display: block; margin: 10px 0;}
        #wrap.design.design02 .txt ul.list li img{height: 20px; margin: 0 auto;}
        #wrap.design.design02 .process{margin-top: 40px;}
        #wrap.design.design02 .process img.process04{height: 200px; margin: 40px auto;}
        #wrap.design.design02 .process img.process05{height: 60px; margin: 70px auto;}
        
        #wrap.design.design03  .txt{font-size: 16px; text-align: center;}
        #wrap.design.design03  ul.list{flex-wrap: wrap;}
        #wrap.design.design03  ul.list li {margin: 10px; font-size: 18px;}
        #wrap.design.design03 .process img.process06{height: 200px;}
        #wrap.design.design03 .process img.process07{height: 60px;}

        #wrap.design.design01 .process .title03.product-list ul{display: flex; flex-wrap: wrap; justify-content: center; margin-top: 100px;}
        #wrap.design.design01 .process .title03.product-list ul li{
            width: 120px;
            height: 70px;

            border: 2px solid transparent;
            border-radius: 100px;
            background-image: linear-gradient(#fff, #fff), 
            linear-gradient(to right, #F4A223 40%,  #E27829 60%);
            background-origin: border-box;
            background-clip: content-box, border-box;
            font-size: 17px;
            color: #575757;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            flex-wrap: wrap;
            margin: 5px;
            
}
    #wrap.design.design01 .process .title03.product-list ul li span{font-size: 13px;}

    .swiper-slide {width: 100%;}
    .swiper-slide img{height: 200px;}

    .swiper{width: 100%;}
    .designBig{width: 100%; height: 400px;}
    .designBig .swiper-slide img{width: 100%; height: 100%;}
    .swiper img{width: 100%; height: 100%;}




        /* 견적문의 */
        #wrap.contactBox .infos{padding: 50px 0;}
        #wrap.contactBox .infos .txt .title{font-size: 30px;}
        #wrap.contactBox .infos .txt .title span{display: block; font-size: 16px;}
        #wrap.contactBox .infos .txt{font-size: 16px;}
        #wrap.contactBox .infos .txt > span::after{height: 3px;}
        #wrap.contactBox .infos{flex-wrap: wrap; justify-content: center; text-align: center;}
        #wrap.contactBox .infos .txt  img{display: block; margin: 0 auto;}

        /* 레퍼런스 -클라이언트 */
        #wrap.partner .title{font-size: 30px; text-align: center;}
        #wrap.partner .title span{display: block; font-size: 16px;}

        #wrap.partner .inner{padding: 50px 20px;}

        /* 레퍼런스 - 협력사 */
        #wrap.partner  ul.partner-list{flex-wrap: wrap; justify-content: center;  margin: 50px 0;}
        #wrap.partner  ul.partner-list li{margin: 10px 20px;}

        .swiper-container{width: 100%; overflow: hidden;}
        .swiper-slide{width: 100%;}

} /* 모바일 */