/* ======== 반응형 ======== */
@media screen and (max-width: 999px) {
    html {
        overflow-y: auto;
    }
    section {
        height: 100%;
    }
}
@media screen and (max-width: 1600px) {
    .home .inner {
        width: 90%;
    }
    .about .inner {
        width: 90%;
    }
    .web-app .inner {
        width: 90%;
    }
    .design .inner {
        width: 90%;
    }
    .life {
        display: none;
        width: 90%;
    }
    .thank .inner {
        width: 90%;
    } 
}
@media screen and (max-width: 1590px) {
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text .text-flex .swiper {
        margin-left: -240px;
    }
    .about .about-left .about-left-text .text-flex .swiper .swiper-slide img {
        width: 550px;
    }
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 180px;
    }

    /* ======== WEB/APP ======== */
    /* 공통 */
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 28%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 28%;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 15%;
    }
}
@media screen and (max-width: 1485px) {
    /* ======== ABOUT ======== */
    /* about-left */
        .about .about-left .about-left-text p {
        font-size: 55px;
    }
    .about .about-left .about-left-text .text-flex .swiper {
        margin-left: -220px;
    }
    .about .about-left .about-left-text .text-flex .swiper .swiper-slide img {
        width: 500px;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 12px;
    }

    /* ======== WEB/APP ======== */
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 30%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 30%;
    }
}
@media screen and (max-width: 1450px) {
    /* ======== WEB/APP ======== */
    /* 공통 */
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 31%;
        width: 28%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 31%;
        width: 13%;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        left: 10px;
        height: 72%;
    }
}
@media screen and (max-width: 1400px) {
    /* ======== HOME ======== */
    .home .title {
        font-size: 140px;
    }

    /* ======== ABOUT ======== */
    /* about-left */
        .about .about-left .about-left-text p {
        font-size: 50px;
    }
    .about .about-left .about-left-text .text-flex .swiper {
        margin-left: -200px;
    }
    .about .about-left .about-left-text .text-flex .swiper .swiper-slide img {
        width: 450px;
    }
    .about .about-left .about-left-text .icon {
        margin-top: 25px;
    }
    .about .about-left .about-left-text .icon ul li img {
        width: 90%;
    }
    .about .about-left .about-left-text .about-left-sub p {
        font-size: 20px;
        line-height: 1.6;
    }

    /* ======== WEB/APP ======== */
    /* 공통 */
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 30%;
        width: 55%;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 30%;
        left: 12%;
        width: 30%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 30%;
        right: 13%;
        width: 15%;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 15%;
    }
}
@media screen and (max-width: 1350px) {
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 165px;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 10px;
    }
    .about .about-left .about-left-text .icon ul li img {
        width: 90%;
    }
    .about .about-left .about-left-text .about-left-sub {
        margin-top: 50px;
    }
    .about .about-left .about-left-text .about-left-sub p {
        font-size: 18px;
    }
    /* about-right */
    .about .about-right div {
        margin-bottom: 45px;
    }
    .about .about-right div .tit {
        font-size: 18px;
    }
        .about .about-right div .txt {
        font-size: 18px;
    }
    .about .about-right div .txt-sub {
        margin-left: 105px;
    }

    /* ======== WEB/APP ======== */
    /* 공통 */
    .web-app .web-app-wrap .web-item .text-group {
        gap: 50px;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name {
        margin-bottom: 25px;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name .name {
        font-size: 30px;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name .item-name-span01 {
        font-size: 30px;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-text {
        font-size: 15px;
        line-height: 24px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .item-tool-name {
        font-size: 20px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .colorLine .tool-group {
        gap: 26px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .colorLine .tool-group li {
        font-size: 15px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-day .item-day-name {
        font-size: 20px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-day p {
        font-size: 15px;
    }
    .web-app .web-app-wrap .web-item .text-group .participation .item-ptc-name {
        font-size: 20px;
    }
    .web-app .web-app-wrap .web-item .text-group .participation p {
        font-size: 15px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn a {
        padding: 2px 35px;
        line-height: 35px;
    }
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 30%;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 26%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 26%;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .text-group .item-tool .colorLine::after {
        width: 390px;
        height: 14px;
        top: 43px;
    }
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        top: 12px;
        height: 73%;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .text-group .item-tool .colorLine::after {
        width: 355px;
        height: 14px;
        top: 43px;
    }
    .web-app .web-app-wrap #work02 .item-img .pc::after {
        top: 12px;
        height: 73%;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .text-group .item-tool .colorLine::after {
        width: 355px;
        height: 14px;
        top: 43px;
    }
    .web-app .web-app-wrap #work03 .item-img .pc::after {
        top: 12px;
        height: 73%;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .text-group .main-text .item-text {
        height: 225px;
    }
    .web-app .web-app-wrap #work04 .text-group .item-tool .colorLine::after {
        width: 280px;
        height: 14px;
        top: 43px;
    }
    .web-app .web-app-wrap #work04 .item-img .pc::after {
        top: 12px;
        height: 73%;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .text-group .main-text .item-text {
        height: 77px;
    }
    .web-app .web-app-wrap #work05 .text-group .item-tool .colorLine::after {
        width: 50px;
        height: 14px;
        top: 43px;
    }
}
@media screen and (max-width: 1280px) {
    /* ======== HOME ======== */
    .home .title {
        font-size: 120px;
    }
    /* star */
    .home .anime .star03 {
        bottom: -500px;
        right: 5%;
    }
    /* ellipse */
    .home .anime .ellipse03 {
        bottom: -360px;
    }

    /* ======== ABOUT ======== */
    .about .intro span {
        font-size: 20px;
    }
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 45px;
    }
    .about .about-left .about-left-text .text-flex .swiper {
        margin-left: -185px;
    }
    .about .about-left .about-left-text .text-flex .swiper .swiper-slide img {
        width: 430px;
    }
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 160px;
        width: 23%;
    }
    .about .about-left .about-left-text .icon ul li img {
        width: 85%;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 5px;
    }
    .about .about-left .about-left-text .about-left-sub p {
        font-size: 16px;
    }
    /* about-right */
    .about .about-right div {
        margin-bottom: 40px;
    }
    .about .about-right div .tit {
        font-size: 16px;
    }
    .about .about-right div .txt {
        font-size: 16px;
    }
    .about .about-right div .txt-sub {
        margin-left: 100px;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro .tit span {
        font-size: 20px;
    }
    .web-app .intro .tab-menu ul li a {
        font-size: 16px;
    }
    /* 공통 */
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 32%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 32%;
    }
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        width: 93%;
        top: 11px;
    }
    .web-app .web-app-wrap #work02 .item-img .pc::after {
        width: 93%;
        top: 11px;
        left: 10px;
    }
    .web-app .web-app-wrap #work03 .item-img .pc::after {
        width: 93%;
        top: 11px;
        left: 10px;
    }
    .web-app .web-app-wrap #work04 .item-img .pc::after {
        width: 93%;
        top: 11px;
    }

    /* ======== DESIGN ======== */
    .design .intro span {
        font-size: 20px;
    }
    .design .design-wrap .gallery li .content .design-btn {
        width: 20%;
    }
}
@media screen and (max-width: 1240px) {
    /* ======== WEB/APP ======== */
    /* 공통 */
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 33%;
        left: 8%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 33%;
        right: 16%;
    }
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        width: 93%;
        height: 73%;
        left: 9px;
        top: 11px;
    }
    .web-app .web-app-wrap #work02 .item-img .pc::after {
        width: 93%;
        height: 73%;
        left: 9px;
        top: 11px;
    }
    .web-app .web-app-wrap #work03 .item-img .pc::after {
        width: 93%;
        height: 73%;
        left: 9px;
        top: 11px;
    }
    .web-app .web-app-wrap #work04 .item-img .pc::after {
        width: 94%;
        height: 73%;
        left: 9px;
        top: 11px;
    }
        .web-app .web-app-wrap #work05 .item-img .phone {
        top: 21%;
    }
}
@media screen and (max-width: 1200px) {
    /* ======== ABOUT ======== */
    .about .intro img {
        margin-left: 20px;
        width: 5%;
    }
    .about .intro span {
        font-size: 18px;
    }
    .about .about-wrap {
        margin-top: 100px;
    }
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 40px;
    }
    .about .about-left .about-left-text .text-flex .swiper {
        margin-left: -175px;
    }
    .about .about-left .about-left-text .text-flex .swiper .swiper-slide img {
        width: 410px;
    }
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 175px;
        width: 21%;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 0px;
    }
    .about .about-left .about-left-text .icon ul li img {
        width: 70%;
    }
    .about .about-left .about-left-text .about-left-sub {
        margin-top: 40px;
    }
    /* about-right */
    .about .about-right div {
        margin-bottom: 35px;
    }
    .about .about-right div .tit {
        font-size: 15px;
    }
    .about .about-right div .txt {
        font-size: 15px;
    }
    .about .about-right div .txt-sub {
        margin-left: 95px;
    }

    /* ======== WEB/APP ======== */
    .about .intro img {
        margin-left: 20px;
        width: 5%;
    }
    .web-app .intro .tit span {
        font-size: 18px;
    }
    .web-app .intro .tab-menu ul li a {
        font-size: 14px;
    }
     /* 공통 */
     .web-app .web-app-wrap .web-item .item-img .pc {
        top: 33%;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 30%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 30%;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .text-group .main-text .item-text {
        height: 225px;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .text-group .main-text .item-text {
        height: 77px;
    }
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 22%;
    }

    /* ======== DESIGN ======== */
    .design .intro img {
        margin-left: 20px;
        width: 5%;
    }     
}
@media screen and (max-width: 1150px) {
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 150px;
    }
    /* ======== WEB/APP ======== */
    /* 공통 */
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 33%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 33%;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .text-group .item-tool .colorLine::after {
        width: 392px;
        height: 14px;
        top: 43px;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .text-group .item-tool .colorLine::after {
        width: 356px;
        height: 14px;
        top: 44px;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .text-group .item-tool .colorLine::after {
        width: 356px;
        height: 14px;
        top: 44px;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .text-group .item-tool .colorLine::after {
        width: 282px;
        height: 14px;
        top: 44px;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .text-group .item-tool .colorLine::after {
        width: 50px;
        height: 14px;
        top: 44px;
    }
    .web-app .web-app-wrap #work05 .text-group .main-text .item-text {
        height: 77px;
    }
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 20%;
    }
}
@media screen and (max-width: 1140px) {
    /* ======== HOME ======== */
    .home .title {
        font-size: 110px;
    }
}
@media screen and (max-width: 1110px) {
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text .text-flex .swiper {
        margin-left: -165px;
    }
    .about .about-left .about-left-text .text-flex .swiper .swiper-slide img {
        width: 390px;
    }
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 125px;
        width: 23%;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 0px;
    }
    .about .about-left .about-left-text .icon ul li img {
        width: 65%;
    }
    .about .about-left .about-left-text .about-left-sub p {
        font-size: 14px;
    }
}
@media screen and (max-width: 1060px) {
    /* ======== HOME ======== */
    /* star */
    .home .anime .star01 {
        width: 5%;
    }
    .home .anime .star02 {
        left: 18%;
        width: 10%;
    }
    .home .anime .star03 {
        bottom: -450px;
    }
    /* ellipse */
    .home .anime .ellipse02 {
        top: -120px;
    }
    .home .anime .ellipse03 {
        bottom: -340px;
    }
    /* polygon */
    .home .anime .polygon01 {
        width: 3%;
    }
    /* retangle */
    .home .anime .rectangle01 {
        width: 3%;
    }

    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 115px;
    }
    .about .about-left .about-left-text .icon {
        margin-top: 20px;
    }

    /* ======== WEB/APP ======== */
    /* 공통 */
    .web-app .web-app-wrap .web-item .text-group {
        gap: 45px;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name .name {
        font-size: 26px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-name .item-name-span01 {
        font-size: 26px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .Itool {
        font-size: 18px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .colorLine .tool-group {
        gap: 24px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-day .Iday {
        font-size: 18px;
    }
    .web-app .web-app-wrap .web-item .text-group .participation .Iptc {
        font-size: 18px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn {
        gap: 25px;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 35%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 35%;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .text-group .item-tool .colorLine::after {
        width: 385px;
        height: 12px;
        top: 42px;
    }
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        width: 93%;
        height: 72%;
        left: 8px;
        top: 9px;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .text-group .item-tool .colorLine::after {
        width: 350px;
        height: 12px;
        top: 42px;
    }
    .web-app .web-app-wrap #work02 .item-img .pc::after {
        width: 93%;
        height: 72%;
        left: 8px;
        top: 10px;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .text-group .item-tool .colorLine::after {
        width: 350px;
        height: 12px;
        top: 42px;
    }
    .web-app .web-app-wrap #work03 .item-img .pc::after {
        width: 93%;
        height: 72%;
        left: 8px;
        top: 10px;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .text-group .item-tool .colorLine::after {
        width: 276px;
        height: 12px;
        top: 42px;
    }
    .web-app .web-app-wrap #work04 .text-group .main-text .item-text {
        height: 218px;
    }
    .web-app .web-app-wrap #work04 .item-img .pc::after {
        width: 94%;
        height: 72%;
        left: 8px;
        top: 10px;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .text-group .item-tool .colorLine::after {
        width: 50px;
        height: 12px;
        top: 42px;
    }
    .web-app .web-app-wrap #work05 .text-group .main-text .item-text {
        height: 84px;
    }

    /* ======== DESIGN ======== */
    .design .design-wrap .gallery li .content .design-btn {
        width: 25%;
    }
}
@media screen and (max-width: 980px) {
    /* mobile section menu */
    nav {
        display: block;
    }
    nav button {
        display: block;
    }
    /* ======== HOME ======== */
    .home {
        padding: 240px 0 240px;
    }
    /* star */
    .home .anime .star03 {
        bottom: -410px;
        width: 12%;
    }
    /* ellipse */
    .home .anime .ellipse03 {
        bottom: -310px;
    }
    .home .title {
        font-size: 100px;
    }
    .home .anime-text {
        gap: 15px;
        margin-top: 20px;
    }
    /* home img 애니메이션 */
    .home .anime-text img {
        width: 35px;
        height: 37px;
    }
    .home .anime-text .sub-title {
        font-size: 28px;
    }

    /* ======== ABOUT ======== */
    .about .about-wrap {
        margin: 100px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* about-left */
    .about .about-left {
        width: 100%;
        position: relative;
    }
    .about .about-left .about-left-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-top: 160px;
    }
    .about .about-left .about-left-text p {
        font-size: 60px;
    }
    .about .about-left .about-left-text .text-flex {
        position: absolute;
        top: 0;
        right: 0;
    }
    .about .about-left .about-left-text .text-flex .swiper {
        display: none;
    }
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 70px;
        width: 100%;
    }
    .about .about-left .about-left-text .text-flex .my img {
        width: 140%;
    }
    .about .about-left .about-left-text .icon {
        margin-top: 30px;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 50px;
    }
    .about .about-left .about-left-text .icon ul li img {
        width: 100%;
    }
    .about .about-left .about-left-text .about-left-sub {
        margin-top: 50px;
    }
    .about .about-left .about-left-text .about-left-sub p {
        font-size: 28px;
        line-height: 1.5;
    }
    .about .about-left .about-left-text .about-left-sub p .br {
        display: none;
    }
    .about .about-right div .edu {
        width: 100%;;
    }
    /* about-right */
    .about .about-right {
        width: 100%;
        margin-top: 50px;
        position: relative;
    }
    .about .about-right div {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .about .about-right div.right {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
    }
    .about .about-right div .tit {
        font-size: 24px;
        color: #999;
    }
    .about .about-right div .txt {
        font-size: 26px;
        line-height: 1.8;
    }
    .about .about-right div .txt-sub {
        margin-left: 0;
        font-size: 24px;
        line-height: 2.1;
    }
    .about .about-right div .last {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 30px;
    }

    /* ======== WEB/APP ======== */
    .web-app {
        margin-bottom: 50px;
    }
    .web-app .intro {
        margin-bottom: 0;
    }
    .web-app .intro .tit img {
        width: 12%;
    }
    .web-app .intro .tab-menu ul {
        gap: 25px;
    }
    /* 공통 */
    .web-app .web-app-wrap .web-item {
        margin: 0;
    }
    .web-app .web-app-wrap .web-item .text-group {
        width: 100%;
        margin-top: 50px;
        gap: 30px;
    }
    .web-app .web-app-wrap .web-item {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name .name {
        font-size: 35px;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name .item-name-span01 {
        font-size: 35px;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-text {
        display: none;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .item-tool-name {
        font-size: 22px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .colorLine .tool-group {
        gap: 28px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .colorLine .tool-group li {
        font-size: 16px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-day .item-day-name {
        font-size: 22px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-day p {
        font-size: 16px;
    }
    .web-app .web-app-wrap .web-item .text-group .participation .item-ptc-name {
        font-size: 22px;
    }
    .web-app .web-app-wrap .web-item .text-group .participation p {
        font-size: 16px;
    }
    .web-app .web-app-wrap #work01 .item-img {
        width: 100%;
        height: 500px;
    }
    .web-app .web-app-wrap #work02 .item-img {
        width: 100%;
        height: 500px;
    }
    .web-app .web-app-wrap #work03 .item-img {
        width: 100%;
        height: 500px;
    }
    .web-app .web-app-wrap #work04 .item-img {
        width: 100%;
        height: 500px;
    }
    .web-app .web-app-wrap #work05 .item-img {
        width: 100%;
        height: 500px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn {
        gap: 30px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn a {
        padding: 3px 40px;
        line-height: 40px;
    }
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 12%;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 9%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 9%;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .text-group .item-tool .colorLine::after {
        width: 420px;
        height: 16px;
        top: 45px;
    }
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        width: 94%;
        height: 75%;
        left: 15px;
        top: 15px;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .text-group .item-tool .colorLine::after {
        width: 380px;
        height: 16px;
        top: 45px;
    }
    .web-app .web-app-wrap #work02 .item-img .pc::after {
        width: 94%;
        height: 75%;
        left: 15px;
        top: 15px;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .text-group .item-tool .colorLine::after {
        width: 380px;
        height: 16px;
        top: 45px;
    }
    .web-app .web-app-wrap #work03 .item-img .pc::after {
        width: 94%;
        height: 75%;
        left: 15px;
        top: 15px;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .text-group .item-tool .colorLine::after {
        width: 300px;
        height: 16px;
        top: 45px;
    }
    .web-app .web-app-wrap #work04 .item-img .pc::after {
        width: 94%;
        height: 75%;
        left: 14px;
        top: 15px;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .text-group .item-tool .colorLine::after {
        width: 55px;
        height: 16px;
        top: 45px;
    }
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 5%;
        left: 60%;
    }
    .web-app .web-app-wrap #work05 .item-img .phone img {
        width: 75%;
    }

    /* ======== DESIGN ======== */
    .design .design-wrap .gallery {
        flex-wrap: wrap;
        height: 100%;
    }
    .design .design-wrap .gallery li {
        flex: none;
        height: 65vh;
        width: 50%;
    }
    .design .design-wrap .gallery li:hover {
        flex: none;
    }
}
@media screen and (max-width: 890px) {
    /* ======== HOME ======== */
        .home .title {
        font-size: 100px;
    }
    /* star */
    .home .anime .star03 {
        bottom: -415px;
        right: 1%;
    }
    /* ellipse */
    .home .anime .ellipse03 {
        bottom: -300px;
        right: 15%;
    }

    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 55px;
    }
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 60px;
    }
    .about .about-left .about-left-text .text-flex .my img {
        width: 135%;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 45px;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro {
        margin-bottom: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-items: flex-start;
    }
    .web-app .intro .tab-menu {
        margin: 15px 0 0  35px;
    }
    .web-app .intro .tab-menu ul {
        gap: 60px;
    }
    .web-app .intro .tab-menu ul li a {
        font-size: 16px;
    }
    /* 공통 */
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 15%;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 13%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 13%;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 6%;
    }
}
@media screen and (max-width: 820px) {
    /* ======== ABOUT ======== */
    .about .about-left .about-left-text p {
        font-size: 50px;
    }
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 55px;
    }
    .about .about-left .about-left-text .text-flex .my img {
        width: 130%;
    }
    /* ======== WEB/APP ======== */
    .web-app .intro .tab-menu ul {
        gap: 50px;
    }
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 20%;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        height: 74%;
        left: 14px;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .item-img .pc::after {
        height: 74%;
        left: 13px;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .item-img .pc::after {
        height: 74%;
        left: 13px;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .item-img .pc::after {
        height: 74%;
        left: 13px;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 11%;
    }
}
@media screen and (max-width: 790px) {
    /* ======== HOME ======== */
    /* star */
    .home .anime .star03 {
        bottom: -360px;
    }
    /* ellipse */
    .home .anime .ellipse03 {
        bottom: -270px;
    }
    .home .title {
        font-size: 90px;
    }
    .home .anime-text {
        gap: 10px;
        margin-top: 10px;
    }
    /* home img 애니메이션 */
    .home .anime-text img {
        width: 30px;
        height: 32px;
    }
    .home .anime-text .sub-title {
        font-size: 26px;
    }

    /* ======== ABOUT ======== */
    .about .intro {
        padding: 16px 0;
    }
    .about .about-wrap {
        margin: 90px 0;
    }
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 45px;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 40px;
    }
    .about .about-left .about-left-text .about-left-sub {
        margin-top: 40px;
    }
    .about .about-left .about-left-text .about-left-sub p {
        font-size: 26px;
        line-height: 1.4;
    }
    /* about-right */
    .about .about-right div .tit {
        font-size: 22px;
    }
    .about .about-right div .txt {
        font-size: 24px;
        line-height: 1.6;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro {
        padding: 16px 0;
    }
    .web-app .intro .tit img {
        width: 10%;
    }
    .web-app .intro .tab-menu ul {
        gap: 40px;
    }
    /* 공통 */
    .web-app .web-app-wrap .web-item {
        align-items: flex-start;
    }
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 18%;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 18%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 18%;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 10%;
    }

    /* ======== DESIGN ======== */
    .design .intro {
        padding: 16px 0;
    } 
    .design .design-wrap .gallery li {
        width: 100%;
    }
}
@media screen and (max-width: 710px) {
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 40px;
    }
    .about .about-left .about-left-text .text-flex .my img {
        width: 125%;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 35px;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro .tab-menu ul {
        gap: 30px;
    }
    .web-app .intro .tit img {
        width: 9%;
    }
    /* 공통 */
    .web-app .web-app-wrap .web-item .text-group {
        gap: 40px;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name .name {
        font-size: 32px;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name .item-name-span01 {
        font-size: 32px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .item-tool-name {
        font-size: 20px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .colorLine .tool-group {
        gap: 26px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .colorLine .tool-group li {
        font-size: 17px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-day .item-day-name {
        font-size: 20px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-day p {
        font-size: 17px;
    }
    .web-app .web-app-wrap .web-item .text-group .participation .item-ptc-name {
        font-size: 20px;
    }
    .web-app .web-app-wrap .web-item .text-group .participation p {
        font-size: 17px;
    }
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 22%;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 20%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 20%;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .text-group .item-tool .colorLine::after {
        width: 428px;
        height: 10px;
        top: 44px;
    }
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        top: 13px;
        left: 11px;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .text-group .item-tool .colorLine::after {
        width: 390px;
        height: 10px;
        top: 44px;
    }
    .web-app .web-app-wrap #work02 .item-img .pc::after {
        top: 13px;
        left: 11px;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .text-group .item-tool .colorLine::after {
        width: 390px;
        height: 10px;
        top: 44px;
    }
    .web-app .web-app-wrap #work03 .item-img .pc::after {
        top: 13px;
        left: 11px;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .text-group .item-tool .colorLine::after {
        width: 310px;
        height: 10px;
        top: 44px;
    }
    .web-app .web-app-wrap #work04 .item-img .pc::after {
        top: 13px;
        left: 11px;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap .web-item .text-group .item-name .item-name-span02  {
        font-size: 16px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-name .item-name-span03 {
        font-size: 16px;
    }
    .web-app .web-app-wrap #work05 .text-group .item-tool .colorLine::after {
        width: 56px;
        height: 10px;
        top: 44px;
    }
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 8%;
        left: 45%;
    }
    .web-app .web-app-wrap #work05 .item-img .phone img {
        width: 100%;
    }

    /* ======== THANK ======== */
    .thank .txt p {
        font-size: 110px;
    }
    .thank .txt span {
        font-size: 70px;
    }
    .thank .btn {
        margin-top: 45px;
    }
    .thank .anime .star {
        bottom: 125px;
        right: -245px;
    }
    .thank .anime .polygon {
        right: -280px;
    }
    .thank .anime .ellipse {
        right: -250px;
    }
}
@media screen and (max-width: 680px) {
    /* ======== HOME ======== */
    /* star */
    .home .anime .star03 {
        bottom: -315px;
    }

    /* ellipse */
    .home .anime .ellipse03 {
        bottom: -230px;
    }
    .home .title {
        font-size: 80px;
    }
    .home .title {
        font-size: 75px;
    }
    /* home img 애니메이션 */
    .home .anime-text img {
        width: 25px;
        height: 27px;
    }
    .home .anime-text .sub-title {
        font-size: 24px;
    }

    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 30px;
    }
    .about .about-left .about-left-text .text-flex .my img {
        width: 120%;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 30px;
    }
    .about .about-left .about-left-text .about-left-sub p {
        font-size: 24px;
        line-height: 1.4;
    }
}
@media screen and (max-width: 655px) {
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 40px;
    }
    .about .about-left .about-left-text .about-left-sub p {
        font-size: 22px;
    }
    /* about-right */
    .about .about-right div .txt {
        font-size: 22px;
    }
    .about .about-right div .last {
        margin-top: 25px;
    }

    /* ======== WEB/APP ======== */
    /* 공통 */
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 24%;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 23%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 23%;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap .web-item .text-group .item-name .item-name-span02 {
        font-size: 14px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-name .item-name-span03 {
        font-size: 14px;
    }
}
@media screen and (max-width: 610px) {
    /* ======== HOME ======== */
    /* star */
    .home .anime .star03 {
        bottom: -300px;
    }
    /* ellipse */
    .home .anime .ellipse01 {
        width: 2%;
    }
    .home .anime .ellipse02 {
        top: -100px;
        width: 2%;
    }
    .home .anime .ellipse03 {
        bottom: -210px;
    }
    /* polygon */
    .home .anime .polygon01 {
        left: 12%;
    }
    /* retangle */
    .home .anime .rectangle01 {
        top: 70px;
    }
    .home .title {
        font-size: 70px;
    }
    .home .anime-text {
        gap: 5px;
    }
    /* home img 애니메이션 */
    .home .anime-text img {
        width: 20px;
        height: 22px;
    }
    .home .anime-text .sub-title {
        font-size: 22px;
    }

    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 38px;
    }
    .about .about-left .about-left-text .text-flex .my {
        margin-right: 20px;
    }
    .about .about-left .about-left-text .text-flex .my img {
        width: 115%;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 25px;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro .tit img {
        width: 8%;
    }
    .web-app .intro .tab-menu ul {
        gap: 20px;
    }

    /* ======== THANK ======== */
    .thank .txt p {
        font-size: 90px;
    }
    .thank .txt span {
        font-size: 60px;
    }
    .thank .btn {
        margin-top: 40px;
    }
    .thank .anime .star {
        bottom: 110px;
        right: -225px;
    }
    .thank .anime .polygon {
        right: -255px;
    }
    .thank .anime .ellipse {
        right: -235px;
    }
}
@media screen and (max-width: 590px) {
    /* ======== ABOUT ======== */
    .about .intro {
        padding: 14px 0;
    }
    .about .intro span {
        font-size: 20px;
    }
    /* about-left */
    .about .about-left .about-left-text .text-flex .my {
        margin: 20px 5px 0 0;
    }
    .about .about-left .about-left-text .text-flex .my img {
        width: 105%;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro {
        padding: 14px 0;
    }
    .web-app .intro .tit span {
        font-size: 20px;
    }
    .web-app .intro .tab-menu ul li a {
        font-size: 14px;
    }
    /* 공통 */
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name {
        margin-bottom: 0;
    }
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 28%;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 25%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 25%;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn {
        gap: 25px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn a {
        padding: 3px 35px;
        line-height: 35px;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        left: 9px;
        height: 72%;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .item-img .pc::after {
        top: 11px;
        left: 9px;
        height: 73%;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .item-img .pc::after {
        top: 11px;
        left: 9px;
        height: 73%;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .item-img .pc::after {
        top: 11px;
        left: 9px;
        height: 73%;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 14%;
    }

    /* ======== DESIGN ======== */
    .design .intro {
        padding: 14px 0;
    }
    .design .intro span {
        font-size: 20px;
    }
}
@media screen and (max-width: 560px) {
    /* ======== HOME ======== */
    /* star */
    .home .anime .star02 {
        width: 8%;
    }
    .home .anime .star03 {
        bottom: -245px;
        width: 8%;
    }
    /* ellipse */
    .home .anime .ellipse03 {
        bottom: -200px;
        right: 12%;
    }
    .home .title {
        font-size: 65px;
    }
    .home .anime-text {
        margin-top: 8px;
    }
    .home .anime-text .sub-title {
        font-size: 20px;
    }

    /* ======== ABOUT ======== */
    .about .about-wrap {
        margin: 80px 0;
    }
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 36px;
    }
    .about .about-left .about-left-text .text-flex .my {
        margin: 40px -15px 0 0;
    }
    .about .about-left .about-left-text .text-flex .my img {
        width: 100%;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 20px;
    }
    .about .about-left .about-left-text .about-left-sub p {
        font-size: 20px;
    }
    /* about-right */
    .about .about-right div .tit {
        font-size: 20px;
    }
    .about .about-right div .txt {
        font-size: 20px;
    }

    /* ======== WEB/APP ======== */
    /* 공통 */
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name .name {
        font-size: 22px;
    }
    .web-app .web-app-wrap .web-item .text-group .main-text .item-name .item-name-span01 {
        font-size: 22px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn {
        gap: 15px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn a {
        padding: 2px 35px;
        line-height: 35px;
    }
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 26%;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .item-img {
        height: 450px;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .item-img {
        height: 450px;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .item-img {
        height: 450px;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .item-img {
        height: 450px;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .item-img {
        height: 450px;
    }

    /* ======== THANK ======== */
    .thank .txt p {
        font-size: 80px;
    }
    .thank .txt span {
        font-size: 50px;
    }
    .thank .btn {
        margin-top: 35px;
    }
    .thank .btn span a {
        font-size: 16px;
    }
    .thank .anime .star {
        bottom: 90px;
        right: -190px;
    }
    .thank .anime .polygon {
        right: -213px;
    }
    .thank .anime .ellipse {
        right: -207px;
    }
}
@media screen and (max-width: 530px) {
    /* ======== ABOUT ======== */
    .about .about-wrap {
        margin: 70px 0;
    }
    /* about-left */
    .about .about-left .about-left-text .text-flex .my {
        margin: 70px -40px 0 0;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro .tab-menu ul {
        gap: 15px;
    }
}
@media screen and (max-width: 500px) {
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text {
        margin-top: 120px;
    }
    .about .about-left .about-left-text p {
        font-size: 46px;
    }
    .about .about-left .about-left-text .text-flex {
        top: -40px;
        right: 30px;
    }
    .about .about-left .about-left-text .text-flex .my {
        margin: 0;
    }
    
    /* ======== WEB/APP ======== */
    .web-app .intro .tit img {
        width: 6%;
        margin-left: 0px;
    }
    .web-app .intro .tab-menu {
        margin: 15px 0 0 20px;
    }
    .web-app .web-app-wrap .web-item .item-img .pc {
        top: 30%;
    }

}
@media screen and (max-width: 480px) {
    /* ======== HOME ======== */
    /* star */
    .home .anime .star01 {
        top: -60px;
        left: 6%;
        width: 4%;
    }
    .home .anime .star02 {
        top: -40px;
        left: 19%;
        width: 7%;
    }
    .home .anime .star03 {
        bottom: -225px;
        right: 5%;
        width: 7%;
    }

    /* ellipse */
    .home .anime .ellipse01 {
        top: 20px;
        left: 6%;
        width: 1%;
    }
    .home .anime .ellipse02 {
        top: -65px;
        left: 16%;
        width: 1%;
    }
    .home .anime .ellipse03 {
        bottom: -180px;
        right: 13%;
        width: 1%;
    }
    /* polygon */
    .home .anime .polygon01 {
        left: 13%;
        width: 2%;
    }
    /* retangle */
    .home .anime .rectangle01 {
        top: 50px;
        width: 2%;
    }
    .home .title {
        font-size: 60px;
    }
    .home .anime-text {
        margin-top: 6px;
    }
    /* home img 애니메이션 */
    .home .anime-text img {
        width: 18px;
        height: 20px;
    }
    .home .anime-text .sub-title {
        font-size: 18px;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro .tab-menu ul {
        gap: 10px;
    }
    /* 공통 */
    .web-app .web-app-wrap .web-item .text-group .item-tool .colorLine .tool-group {
        gap: 20px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn a {
        padding: 2px 30px;
        line-height: 30px;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 22%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 22%;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .item-img {
        height: 400px;
    }
    .web-app .web-app-wrap #work01 .text-group .item-tool .colorLine::after {
        width: 405px;
        height: 8px;
        top: 42px;
    }
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        top: 9px;
        left: 8px;
        height: 73%;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .item-img {
        height: 400px;
    }
    .web-app .web-app-wrap #work02 .text-group .item-tool .colorLine::after {
        width: 365px;
        height: 8px;
        top: 42px;
    }
    .web-app .web-app-wrap #work02 .item-img .pc::after {
        top: 9px;
        left: 8px;
        height: 73%;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .item-img {
        height: 400px;
    }
    .web-app .web-app-wrap #work03 .text-group .item-tool .colorLine::after {
        width: 365px;
        height: 8px;
        top: 42px;
    }
    .web-app .web-app-wrap #work03 .item-img .pc::after {
        top: 9px;
        left: 8px;
        height: 73%;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .item-img {
        height: 450px;
    }
    .web-app .web-app-wrap #work04 .text-group .main-text .item-text {
        height: 240px;
    }
    .web-app .web-app-wrap #work04 .text-group .item-tool .colorLine::after {
        width: 290px;
        height: 8px;
        top: 42px;
    }
    .web-app .web-app-wrap #work04 .item-img {
        height: 400px;
    }
    .web-app .web-app-wrap #work04 .item-img .pc::after {
        top: 9px;
        left: 8px;
        height: 73%;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .item-img {
        height: 450px;
    }
    .web-app .web-app-wrap #work05 .item-img {
        height: 400px;
    }
    .web-app .web-app-wrap #work05 .item-img .phone {
        top: 15%;
    }
}
@media screen and (max-width: 470px) {
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 42px;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 15px;
    }
    .about .about-left .about-left-text .about-left-sub p {
        font-size: 18px;
    }
    /* about-right */
    .about .about-right div .tit {
        font-size: 18px;
    }
    .about .about-right div .txt  {
        font-size: 18px;
    }
    .about .about-right div .luv {
        width: 100%;
    }
    .about .about-right div .last {
        margin-top: 20px;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro .tab-menu ul li a {
        font-size: 13px;
    }

    /* ======== THANK ======== */
    .thank .txt p {
        font-size: 70px;
    }
    .thank .txt span {
        font-size: 40px;
    }
    .thank .btn {
        margin-top: 30px;
    }
    .thank .btn span {
        padding: 10px 30px;
    }
    .thank .btn span a {
        font-size: 14px;
    }
    .thank .anime .star {
        bottom: 75px;
        right: -168px;
    }
    .thank .anime .polygon {
        right: -185px;
        bottom: 117px;
    }
    .thank .anime .ellipse {
        right: -180px;
        bottom: 75px;
    }
}
@media screen and (max-width: 440px) {
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 40px;
    }
    /* ======== WEB/APP ======== */
    .web-app .web-app-wrap .web-item .text-group .item-tool .colorLine .tool-group li {
        font-size: 15px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn {
        gap: 5px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn a {
        padding: 3px 25px;
        line-height: 25px;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .text-group .item-tool .colorLine::after {
        width: 365px;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .text-group .item-tool .colorLine::after {
        width: 335px;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .text-group .item-tool .colorLine::after {
        width: 335px;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .text-group .item-tool .colorLine::after {
        width: 265px;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .text-group .item-tool .colorLine::after {
        width: 50px;
    }
}
@media screen and (max-width: 420px) {
    /* ======== HOME ======== */
    /* star */
    .home .anime .star03 {
        bottom: -190px;
    }
    /* ellipse */
    .home .anime .ellipse03 {
        bottom: -150px;
    }
    .home .title {
        font-size: 50px;
    }
    .home .anime-text {
        gap: 4px;
        margin-top: 4px;
    }
    /* home img 애니메이션 */
    .home .anime-text img {
        width: 16px;
        height: 18px;
    }
    .home .anime-text .sub-title {
        font-size: 16px;
    }
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 38px;
    }
    .about .about-left .about-left-text .text-flex {
        right: 15px;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro .tab-menu {
        margin: 15px 0 0 15px;
    }
    .web-app .intro .tab-menu ul li a {
        font-size: 12px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .colorLine .tool-group {
        gap: 10px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn {
        gap: 3px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn a {
        padding: 2px 20px;
        line-height: 25px;
    }
    /* ==== website ==== */
    .web-app .web-app-wrap #work01 .text-group .item-tool .colorLine::after {
        width: 325px;
    }
    .web-app .web-app-wrap #work01 .item-img {
        height: 350px;
    }
    .web-app .web-app-wrap #work01 .item-img .pc::after {
        top: 8px;
        left: 7px;
        height: 72%;
    }
    /* ==== Sub Page ==== */
    .web-app .web-app-wrap #work02 .text-group .item-tool .colorLine::after {
        width: 290px;
    }
    .web-app .web-app-wrap #work02 .item-img {
        height: 350px;
    }
    .web-app .web-app-wrap #work02 .item-img .pc::after {
        top: 8px;
        left: 7px;
        height: 72%;
    }
    /* ==== Landing Page ==== */
    .web-app .web-app-wrap #work03 .text-group .item-tool .colorLine::after {
        width: 290px;
    }
    .web-app .web-app-wrap #work03 .item-img {
        height: 350px;
    }
    .web-app .web-app-wrap #work03 .item-img .pc::after {
        top: 8px;
        left: 7px;
        height: 72%;
    }
    /* ==== Clone ==== */
    .web-app .web-app-wrap #work04 .text-group .item-tool .colorLine::after {
        width: 230px;
    }
    .web-app .web-app-wrap #work04 .item-img {
        height: 350px;
    }
    .web-app .web-app-wrap #work04 .item-img .pc::after {
        top: 8px;
        left: 7px;
        height: 72%;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap #work05 .item-img {
        height: 350px;
    }
}
@media screen and (max-width: 395px) {
    /* ======== ABOUT ======== */
    .about .about-wrap {
        margin: 60px 0;
    }
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 36px;
    }
    .about .about-left .about-left-text .icon ul {
        gap: 10px;
    }

    /* ======== WEB/APP ======== */
    .web-app .intro .tit img {
        width: 5%;
    }
    .web-app .intro .tab-menu {
        margin: 15px 0 0 10px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-tool .item-tool-name {
        font-size: 16px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-day .item-day-name {
        font-size: 16px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-day p {
        font-size: 16px;
    }
    .web-app .web-app-wrap .web-item .text-group .participation .item-ptc-name {
        font-size: 16px;
    }
    .web-app .web-app-wrap .web-item .text-group .participation p {
        font-size: 16px;
    }
    .web-app .web-app-wrap .web-item .item-img .tablet {
        bottom: 24%;
    }
    .web-app .web-app-wrap .web-item .item-img .phone {
        bottom: 24%;
    }
    .web-app .web-app-wrap .web-item .text-group .item-btn a {
        padding: 3px 15px;
    }
    /* ==== Mobile ==== */
    .web-app .web-app-wrap .web-item .text-group .item-name span.item-name-span03 {
        font-size: 16px;
    }
    .web-app .web-app-wrap .web-item .text-group .item-name span.item-name-span02 {
        font-size: 14px;
    }
    /* ======== THANK ======== */
    .thank .txt p {
        font-size: 60px;
    }
    .thank .txt span {
        font-size: 30px;
    }
    .thank .btn {
        margin-top: 25px;
    }
    .thank .btn span {
        padding: 10px 20px;
    }
    .thank .anime .star {
        bottom: 58px;
        right: -138px;
    }
    .thank .anime .polygon {
        right: -160px;
        bottom: 95px;
    }
    .thank .anime .ellipse {
        right: -155px;
        bottom: 58px;
    }
}
@media screen and (max-width: 370px) {
    /* ======== ABOUT ======== */
    /* about-left */
    .about .about-left .about-left-text p {
        font-size: 34px;
    }
    .about .about-left .about-left-text .text-flex {
        top: -50px;
        right: 10px;
    }
}