@charset "UTF-8";




@media (max-width: 1600px) {
    #gauge {
        margin-top: 100px;
        width: calc(100% - 100px);
    }
    #process .item {
        width: 100%;
    }
    #process .item .desc {
        width: calc(100% - 100px);
    }
    #process .item .desc .main {
        width: 100%;
    }
    #process .item .desc .main h5 {
        width: calc(100% - 70%);
    }
    #process .item .desc .main .img {
        width: calc(100% - 35%);
    }
}


@media (max-width: 1440px) {
    #gauge .section .dot_line {
        margin: 0px 0px;
    }
    #gauge .section .item .title p {
        width: calc(100% - 220px);
        margin-left: 40px;
    }
    #gauge .section .item .title p br {
        display: none;
    }
    @keyframes story_gauge_point {
        0% {left: 0%;}
        25% {left: 10%;}
        50% {left: 35%;}
        75% {left: 61%;}
        100% {left: 87%;}
    }
    #process .item .main_title {
        margin-bottom: 100px;
    }
    #process .item .main_title h4 {
        font-size: 50px;
    }
    #process .item .main_title h4 small {
        font-size: 26px;
        line-height: 60px;
    }
    #process .item .desc .title {
        width: calc(100% - 70%);
        height: 180px;
    }
    #process .item .desc .main h5 {
        font-size: 22px;
    }
}




@media (max-width: 1240px) {
    #gauge .main_gauge {
        left: 80px;
        width: 25px;
    }
    #gauge .main_title h3 {
        font-size: 40px;
        margin-right: 20px;
    }
    #gauge .main_title .gauge_btn {
        width: 50px;
        height: 50px;
    }
    #gauge .main_title.on .gauge_btn .btn_mid {
        width: 24px;height: 24px;
    }
    #gauge .section .dot_line {
        transform: translateY(125px);
    }
    @keyframes story_gauge_point {
        0% {left: 0%;}
        25% {left: 10%;}
        50% {left: 35%;}
        75% {left: 60%;}
        100% {left: 86%;}
    }
    @keyframes brand-market_gauge_point {
        0% {left: 0%;}
        33.3333% {left: 9%;}
        66.6666% {left: 48%;}
        100% {left: 86%;}
    }
}


@media (max-width: 1140px) {
    #gauge .main_gauge,
    #gauge .section .main_title,
    #gauge .section .dot_line {
        display: none;
    }
    #process .item .desc .company_main .img:nth-of-type(5) {
        background: url(./../img/process_company_application_design_re.png) no-repeat 30% 50% / cover;
    }
    #gauge .section .item {
        width: 100%;
    }
}

@media (max-width: 980px) {
    #gauge .section .item {
        padding: 50px 30px;
    }
    #process .item .desc .title .gauge_box {
        width: 145px;height: 20px; padding: 5px 10px;
    }
    #process .item .desc .title .gauge_box .gauge_bar {
        width: 100%; height: 100%;
    }
    #process .item .desc .title {
        height: 130px;
    }
    #process .item .desc h4 {
        font-size: 24px;
        margin-top: 10px;
    }
    #process .item .desc h4 small {
        font-size: 18px;
    }
    #process .item .desc .main {
        margin-top: 200px;
    }
    #process .item .desc .main h5:nth-of-type(1) {top: 0px;}  
    #process .item .desc .main h5:nth-of-type(2) {top: 120px;} 
    #process .item .desc .main h5:nth-of-type(3) {top: 240px;}
    #process .item .desc .main h5:nth-of-type(4) {top: 360px;}
    #process .item .desc .main h5:nth-of-type(5) {top: 480px;}


    #process .item .desc .product_main {height: 340px;} 
    #process .item .desc .company_main {height: 580px;} 
    #process .item .desc .shop_main {height: 460px;}

    #process .item .desc .company_main .img:nth-of-type(4) {
        background: url(./../img/process_company_photo_directing_re.png) no-repeat 50% 50% / cover;
    }
}

@media (max-width: 860px) { 
    #visual .item h2 br:nth-of-type(1), #visual .item h2 br:nth-of-type(3) {
        display: block;
    }
    #visual .light {
        right: -15%;
    }
    #gauge {
        margin-top: 200px;
        margin-bottom: 100px;
    }
    #gauge .section {
        justify-content: center;
    }
    #gauge .section .item {
        width: 635px;
        height: auto;
        margin: 0 auto;
        padding: 50px;
        border-radius: 70px;
    }
    #gauge .section .item .title {
        flex-direction: column;
        align-items: flex-start;
    }
    #gauge .section .item .title h4 {
        height: auto;
        justify-content: flex-start;
        background: transparent;
        box-shadow: none;
        line-height: 34px;
        text-align: left;
    }
    #gauge .section .item .title h4 br {
        display: none;
    }
    #gauge .section .item .title p {
        width: 100%;
        margin-left: 0;
    }
    #gauge .section .item .title p br {
        display: block;
    }
    #gauge .section .item .gauge_list {
        display: flex;
        justify-content: center;
        margin-top: 60px;
    }    
    #gauge .section .item .gauge_list .gauge_box {
        width: 45px;
        padding: 20px 8px;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
    }
    #gauge .section .item .gauge_list .gauge_box .gauge_point {
        width: 50px; height: 50px;
        top: 0;left: 50%; transform: translate( -50%, 0%);
    }
    #gauge .section .item .gauge_list .gauge_box .gauge_bar {
        width: 25px;
        height: 100%;
        background: linear-gradient(180deg, #DF3245 0%, #FFC79C 100%);
    }
    #gauge .section .item .gauge_list .gauge_item {
        flex-direction: column;
        justify-content: center;
        margin-left: 50px;
    }
    #gauge .section .item .gauge_list .gauge_item li {
        width: 220px;height: 150px;
        padding-left: 35px;
        padding-bottom: 0;
        justify-content: center;
        background: url(./../img/gauge_item_back_re.png) no-repeat 50% 50% / cover;
    }
    @keyframes story_gauge_point {
        0% { top: 0%; left: 50%; transform: translate(-50%, 0)}
        25% { top: 10%; left: 50%; transform: translate(-50%, 0)}
        50% { top: 34%; left: 50%; transform: translate(-50%, 0)}
        75% { top: 58%; left: 50%; transform: translate(-50%, 0)}
        100% { top: 85%; left: 50%; transform: translate(-50%, 0)}
    }
    @keyframes story_gauge_bar {
        0% {width: 100%; height: 0%;}
        25% {width: 100%; height: 15%;}
        50% {width: 100%; height: 38%;}
        75% {width: 100%; height: 65%;}
        100% {width: 100%; height: 100%;}
    }
    @keyframes brand-market_gauge_bar {
        0% {width: 100%; height: 0%;}
        33.3333% {width: 100%; height: 15%;}
        66.6666% {width: 100%; height: 50%;}
        100% {width: 100%; height: 100%;}
    }
    @keyframes brand-market_gauge_point {
        0% {top: 0%; left: 50%; transform: translate(-50%, 0)}
        33.3333% {top: 14%; left: 50%; transform: translate(-50%, 0)}
        66.6666% {top: 46%; left: 50%; transform: translate(-50%, 0)}
        100% {top: 79%; left: 50%; transform: translate(-50%, 0)}
    }
    #process .item .desc .main {
        margin-top: 180px;
    }
    #process .item .desc .main h5 {
        width: 120px;height: 65px;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -1px;
    }
    #process .item .desc .main h5 br {
        display: block;
    }

    #process .item .desc .main h5:nth-of-type(1) {top: 0px;}  
    #process .item .desc .main h5:nth-of-type(2) {top: 85px;} 
    #process .item .desc .main h5:nth-of-type(3) {top: 170px;}
    #process .item .desc .main h5:nth-of-type(4) {top: 255px;}
    #process .item .desc .main h5:nth-of-type(5) {top: 340px;}

    #process .item .desc .product_main {height: 240px;} 
    #process .item .desc .company_main {height: 410px;} 
    #process .item .desc .shop_main {height: 330px;}


    #process .item .desc .main .img {
        width: calc(100% - 140px);
    }



}





@media (max-width: 770px) {
    header {
        height: 6rem;
    }
    header nav {
        padding: 0rem 2rem;
    }
    header .btn .box {
        width: 28px;
        height: 3px;
    }
    header .btn.on .box {
        height: 4px;
    }
    header .btn .box:nth-of-type(1) {transform: translateY(-10px);}
    header .btn .box:nth-of-type(2) {transform: translateY(-2px);}
    header .btn .box:nth-of-type(3) {transform: translateY(6px);}
    header nav h1 {
        width: 80px;
        height: 40px;
    }
    header nav .gnb ul {
        width: 100%;
        margin: 0 auto;
        align-items: center;
        padding-left: 0;
    }
    #visual {
        padding: 130px 20px 10px;
    }
    #gauge {
        width: calc(100% - 40px);
    }
    #gauge .section .item .title p br {
        display: none;
    }
    #process .item .main_title {
        margin-bottom: 50px;
    }
    #process .item .main_title h4 small {
        font-size: 20px;
        line-height: 40px;
    }
    #process .item .main_title h4 {
        font-size: 40px;
    }
    #process .item .desc {
        width: calc(100% - 40px);
    }
    #process .item .desc .product_main .img:nth-of-type(1) {
        background: url(./../img/process_product_ci_bi.png) no-repeat 68% 50% / cover;
    }
    

    footer {
        padding: 0 10px;
    }
    footer p {
        flex-direction: column;
        line-height: 24px;
    }
    footer p span {
        display: none;
    }
    footer p br {
        display: block;
    }
}




@media (max-width: 640px) {
    header nav .gnb li a {
        width: 360px;
        height: 80px;
        margin: 0 auto;
        font-size: 40px;
        line-height: 80px;
        border-radius: 30px;
    }
    #visual .item h2 {
        font-size: 70px;
    }
    #visual .light {
        right: -30%;
        height: 400px;
    }
    #gauge {
        height: 1100px;
    }
    #gauge .section {
        margin: 50px 0;
    }
    #gauge .section .btn_area {
        transform: translateY(0px);
    }
    #gauge .section .item .title p {
        font-size: 22px;
        line-height: 28px;
    }
    #process .item .main_title img {
        width: 130px;height: auto;
        object-fit: cover;
    }
    #process .item .main_title h4 {
        font-size: 26px;
    }
    #process .item .desc .title {
        width: 32%;
        height: 80px;
    }
    #process .item .desc .title .gauge_box {
        width: 90px;
        height: 18px;
    }
    #process .item .desc .main {
        margin-top: 120px;
    }
    #process .item .desc h4 {
        font-size: 18px;
        letter-spacing: -1.5px;
        margin-top: 5px;
    }
    #process .item .desc h4 small {
        font-size: 14px;
    }
}




@media (max-width: 480px) {

    header nav .gnb li a {
        width: 300px;
    }

    #visual .item h2 {
        font-size: 54px;
    }
    #visual .light {
        right: -50%;
    }
    #gauge {
        margin-top: 150px;
    }
    #gauge .section .item {
        padding: 30px;
        border-radius: 30px;
    }
    #gauge .section .item .title h4 {
        font-size: 20px;
    }
    #gauge .section .item .title p {
        font-size: 18px;
        line-height: 24px;
    }
    #gauge .section .item .gauge_list .gauge_box {
        width: 30px;
    }
    #gauge .section .item .gauge_list .gauge_box .gauge_point {
        width: 45px;height: 45px;
    }
    #gauge .section .item .gauge_list {
        margin-top: 30px;
    }
    #gauge .section .item .gauge_list .gauge_item {
        margin-left: 20px;
    }
    #gauge .section .item .gauge_list .gauge_item li {
        width: 180px;height: 120px;
    }
    #gauge .section .item .gauge_list .gauge_item li h5 {
        font-size: 16px;
    }
    #gauge .section .item .gauge_list .gauge_item li img {
        height: 40px;
    }
    #process .item .main_title h4 {
        font-size: 22px;
    }
    #process .item .main_title h4 small {
        font-size: 16px;
    }
    #process .item .desc .title .gauge_box {
        width: 70px; height: 15px;
        padding: 4px 10px;
    }
    #process .item .desc .main {
        margin-top: 110px;
    }
    #process .item .desc .main h5 {
        font-size: 14px;
        line-height: 18px;
        width: 100px; height: 55px;
    }

    #process .item .desc .main h5:nth-of-type(1) {top: 0px;} 
    #process .item .desc .main h5:nth-of-type(2) {top: 70px;} 
    #process .item .desc .main h5:nth-of-type(3) {top: 140px;}
    #process .item .desc .main h5:nth-of-type(4) {top: 210px;}
    #process .item .desc .main h5:nth-of-type(5) {top: 280px;}

    #process .item .desc .product_main {height: 200px;} 
    #process .item .desc .company_main {height: 340px;} 
    #process .item .desc .shop_main {height: 270px;}


    #process .item .desc .main .img {
        width: calc(100% - 115px);
    }


    footer p {
        padding: 1.4rem 0 !important;
    }
}