@charset "UTF-8";




@media (max-width: 1680px) {
    #visual .pen {right: -30%;}
    #portfolio ul {
        flex-wrap: wrap;
        justify-content: space-between;
        height: 400px;
    }
    #portfolio ul li.inn {width: 600px;}
    #portfolio ul li.inn.on {width: 600px;}
    #portfolio ul li.hyundai {padding: 30px; background: url(./../img/portfolio_hyundai_off.png) no-repeat 50% 50% / contain;}
    #portfolio ul li.gangnam {padding: 30px; background: url(./../img/portfolio_gangnam_off.png) no-repeat 50% 50% / contain;}
    #portfolio ul li.hyundai.on {padding: 30px; background: url(./../img/portfolio_hyundai_on.png) no-repeat 50% 50% / contain;}
    #portfolio ul li.gangnam.on {padding: 30px; background: url(./../img/portfolio_gangnam_on.png) no-repeat 50% 50% / contain;}
    #portfolio ul li.kyochon {background: url(./../img/portfolio_kyochon_off.png) no-repeat 50% 50% / contain;}
    #portfolio ul li.kyochon.on {background: url(./../img/portfolio_kyochon_on.png) no-repeat 50% 50% / contain;}
    #portfolio ul li.crazy {background: url(./../img/portfolio_crazy_off.png) no-repeat 50% 50% / contain;}
    #portfolio ul li.crazy.on {background: url(./../img/portfolio_crazy_on.png) no-repeat 50% 50% / contain;}
}

@media (max-width: 1440px) {
    #portfolio ul li.inn {width: 500px;}
    #portfolio ul li.inn.on {width: 500px;}
}

@media (max-width: 1280px) {
    #portfolio ul li.inn {width: 400px;}
    #portfolio ul li.inn.on {width: 400px;}
}

@media (max-width: 1140px)  {
    #visual .item h2 {
        font-size: 60px;
    }
    #visual .item ul li p {
        width: 140px; height: 70px;
        font-size: 3rem;
    }
    #visual .item ul li h3 {
        font-size: 1.8rem;
    }
    #visual .pen {right: -45%;}
    #philosophy .item .title small {
        font-size: 30px;
        margin: 20px 0;
    }
    #philosophy .item .title h4 {
        font-size: 60px;
    }
    #philosophy .item .title p {
        font-size: 22px;
        line-height: 40px;
        margin-top: 20px;
        margin-bottom: 50px;
    }
    #philosophy .item ul li {
        padding: 20px 30px 20px 20px;
    }
    #philosophy .item ul p {
        font-size: 22px;
        line-height: 40px;
        letter-spacing: -0.1px;
        padding-left: 20px;
    }
}
@media (max-width: 1040px) {
    #visual .pen {right: -60%;}
    #portfolio ul li.inn {width: calc(50% - 50px);}
    #portfolio ul li.inn.on {width: calc(50% - 50px);}
    #portfolio ul li.inn:nth-of-type(1), 
    #portfolio ul li.inn:nth-of-type(3) {margin-right: 0;}
    #portfolio ul li.inn.on:nth-of-type(1),
    #portfolio ul li.inn.on:nth-of-type(3) {margin-right: 0;}
}

@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: 10rem 2rem 3rem;
    }
    #visual .pen {right: -650px;}
    #portfolio {
        width : calc(100% - 40px);
        margin: 100px 20px 50px;
    }
    #portfolio ul {
        height: auto;
    }
    #portfolio ul li {
        margin-top: 20px;
    }
    #portfolio ul li.inn:nth-of-type(3), 
    #portfolio ul li.inn:nth-of-type(4) {
        margin-bottom: 20px;
    }
    #history .item .slide_pc {
        display: none;
    }
    #history .item .slide_m {
        display: block;
    }
    #history .item .slide:hover img {
        animation-play-state: running;
    }
    #portfolio ul li.inn {
        width: calc(50% - 30px);
    }
    #philosophy .item ul li {
        padding: 10px 50px 10px 10px;
    }
    #philosophy .item ul li img {
        width: 150px;
        height: 150px;
    }
    #philosophy .item ul p br {
        display: none;
    }
    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 .pen {
        right: -750px;
    }
    #visual .item h2 {
        font-size: 40px;
    }
    #visual .item ul li p {
        width: 110px;
        height: 60px;
        border-radius: 20px;
        font-size: 2.6rem;
    }
    #visual .you .y {
        left: 30px;
    }
    #visual .you .u {
        right: 25px;
    }
    #visual .item ul .number p small,
    #visual ul .txt small {
        line-height: 1rem;
    }
    #history .item {
        padding: 5rem 0rem 0rem 0rem;
    }
    #history .item .slide img {
        height: 350px;
    }
    #philosophy .item .title h4 {
        font-size: 40px;
    }
    #philosophy .item .title small {
        font-size: 24px;
        margin: 10px 0;
    }
    #philosophy .item .title p {
        margin-top: 10px;
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 26px;
    }
    #philosophy .item ul li {
        margin: 40px 20px;
        padding: 20px 50px 20px 10px;
    }
    #philosophy .item ul li img {
        width: 120px;
        height: 120px;
    }
    #philosophy .item ul p {
        font-size: 18px;
        line-height: 26px;
        padding-left: 10px;
    }
}

@media (max-width: 480px) {
    header nav .gnb li a {
        width: 300px;
    }
    #visual .pen {
        right: -850px;
    }
    #visual .item h2 br:nth-of-type(1) {
        display: block;
    }
    #visual .item ul li p {
        width: 90px;
        height: 50px;
        border-radius: 15px;
        font-size: 2.2rem;
    }
    #visual .you .y {
        left: 22px;
    }
    #visual .you .u {
        right: 18px;
    }
    #visual .item ul .number p small,
    #visual ul .txt small {
        display: none;
    }
    #portfolio ul {
        height: auto;
    }
    #portfolio ul li {
        height: 80px;
        border-radius: 30px;
    }
    #philosophy .item .title h4 {
        font-size: 36px;
    }
    #philosophy .item .title small {
        font-size: 20px;
    }
    #philosophy .item .title p {
        font-size: 16px;
        line-height: 22px;
    }
    #philosophy .item ul p {
        font-size: 16px;
        line-height: 22px;
    }
}