@media screen and (max-width:1440px) {
    .section{
        padding: 160px 10px;
    }
    /* header */
    /* visual */
    .visual .icon .container {
        max-width: 1200px;
    }
    .visual .title .container {
        max-width: 1200px;
    }
    .visual .title .container #animatedStr{
        padding: 230px 0px 20px;
    }
    .visual .title .container .portfolio .p{
        font-size: 7rem;
    }
    .visual .title .container .portfolio .f-wrap > span{
        font-size: 7rem;
    }
    .visual .title .container .portfolio .f-wrap .blank{
        font-size: 6rem;
    }
    .visual .title .container .portfolio .f-wrap #keyword{
        font-size: 8rem;
        vertical-align: -30px;
        padding: 0 10px;
    }
    /* brand */
    .brand .container {
        padding: 160px 50px;
    }
    /* about */
    #about .container {
        max-width: 1200px;
    }
    #about .container .aboutMe .about-right .right-text h3 {
        width: 30%;
        font-size: 20px;
    }
    #about .container .aboutMe .about-right .right-text div p {
        font-size: 19px;
    }
    /* menu */
    /* banner */
    .banner-wrap {
        margin-left: 100px;
    }
    /* footer */
    .footer .container {
        max-width: 1200px;
    }
    /* modal */
    .modal-container .modal-nav .modal-btn-prev {
        left: 20px;
    }
    .modal-container .modal-nav .modal-btn-next {
        right: 20px;
    }
    /* footer */
    .footer .container .footer-menu-wrap {
        margin-right: 0;
    }
}
@media screen and (max-width:1280px) {
    /* header */
    .header {
        padding: 10px 30px;
    }
    /* visual */
    .visual .title .container #animatedStr {
        font-size: 40px;
    }
    .visual .title .container .portfolio .blank {
        font-size: 6rem;
    }
    .visual .icon .container {
        max-width: 1160px;
    }
    .visual .icon .container .icon-bar li a {
        font-size: 17px;
    }
    /* brand */
    .brand .container .brand-title .brand-wrap .brand-text > span {
        font-size: 5rem;
    }
    .brand .container .brand-title .brand-wrap .brand-text .brand-img-wrap.show {
        width: 170px;
    }
    /* about */
    #about .container .aboutMe .about-right {
        flex-basis: 58%
    }
    #about .container .aboutMe .about-right .right-text h3 {
        font-size: 19px;
    }
    #about .container .aboutMe .about-right .right-text div p {
        font-size: 18px;
    }
    /* menu */
    .menu .container .menu-wrap .menu-text-wrap .menu-title {
        padding: 50px 0 100px;
    }
    /* banner */
    .banner-wrap {
        margin-left: 50px;
    }
    .banner-wrap .banner-title {
        font-size: 90px;
        line-height: 90px;
    }
    .banner-wrap .banner-main {
        font-size: 90px;
        line-height: 90px;
    }
    .banner-wrap .banner-main p {
        width: 58%;
    }
    .banner-wrap .banner-title .banner-btn {
        font-size: 22px;
    }
    /* footer */
    .footer .container .footer-text {
        gap: 75px;
        justify-content: left;
    }
    .footer .container .footer-menu-wrap {
        gap: 80px;
    }
}
@media screen and (max-width:980px) {
    /* mb-menu */
    .mb-menu .mb-menu-title .mb-btn {
        display: block;
    }
    .mb-menu {
        display: block;
    }
    /* header */
    .header nav{
        display: none;
    }
    /* visual */
    .visual .title .container #animatedStr {
        padding: 160px 100px 20px;
        font-size: 35px;
    }
    .visual .title .container .portfolio{
        text-align: center;
        padding: 0 30px;
        display: block;
    }
    .visual .title .container .portfolio .p{
        font-size: 10rem;
    }
    .visual .title .container .portfolio .f-wrap > span{
        font-size: 9rem;
    }
    .visual .title .container .portfolio .f-wrap .blank{
        vertical-align: 15px;
        font-size: 6rem;
    }
    .visual .title .container .portfolio .f-wrap #keyword{
        font-size: 8rem;
        vertical-align: -10px;
        padding: 0 10px;
    }
    .visual .icon .container{
        padding: 0px 70px 0;
    }
    .visual .icon .container .icon-bar li a {
        font-size: 13px;
    }
    /* brand */
    .brand .container h2{
        font-size: 1rem;
    }
    .brand .container .brand-title .brand-wrap .brand-text{
        min-height: 100px;
        white-space: nowrap;
    }
    .brand .container .brand-title .brand-wrap .brand-text > span{
        font-size: 3.5rem;
    }
    .brand .container .brand-title .brand-wrap .brand-text .brand-img-wrap.show{
        width: 150px;
    }
    /* about */
    #about .container .aboutMe .about-left div{
        width: 250px;
    }
    #about .container .aboutMe .about-right {
        flex-basis: 65%;
    }
    #about .container .aboutMe .about-right .right-text h3 {
        font-size: 17px;
    }
    #about .container .aboutMe .about-right .right-text div p {
        font-size: 16px;
    }
    #about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .left-wrap .tools-flex .tools-name {
        width: 140px;
    }
    #about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .tools-title {
        padding-bottom: 30px;
    }
    #about .container .aboutMe .about-right .right-text .tools-wrap .tools-right {
        margin-right: 0;
    }
    /* menu */
    .menu {
        height: 80vh;
    }
    .menu .container .menu-wrap .menu-text-wrap .menu-title {
        padding: 50px 0 70px;
        font-size: 65px;
    }
    .menu .container .menu-wrap .menu-text-wrap .menu-title .menu-blank {
        font-size: 50px;
    }
    .menu .container .menu-wrap .menu-text-wrap .menu-title .material-symbols-outlined {
        font-size: 80px;
    }
    .menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img {
        height: 300px;
    }
    .menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box:hover .menu-img img {
        border-radius: 40px;
    }
    .menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img-text .menu-img-title {
        font-size: 18px;
    }
    .menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img-text p {
        font-size: 13.5px;
    }
    .menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img-text .menu-img-title::after{
        height: 1px;
    }
    /* banner */
    .banner-wrap .banner-title {
        font-size: 70px;
        line-height: 70px;
    }
    .banner-wrap .banner-main {
        font-size: 70px;
        line-height: 70px;
    }
    .banner-wrap .banner-main p {
        width: 45%;
    }
    /* footer */
    .footer .footer-bg {
        padding: 50px 30px 30px;
    }
    .footer .container .footer-text {
        display: block;
        margin-bottom: 50px;
    }
    .footer .container .footer-title h3 {
        font-size: 100px;
        letter-spacing: 1px;
    }
    .footer .container .footer-title h3:hover .material-symbols-outlined{
        transform: translate(-20%, -20%);
    }
    .footer .container .footer-text .footer-menu-wrap .footer-menu h3 {
        padding: 50px 0 20px;
        font-size: 14px;
        color: var(--pinkColor);
    }
    .footer .container .footer-menu-wrap {
        padding-top: 0;
        gap: 65px;
        padding-left: 5px;
    }
}
@media screen and (max-width:680px) {
    /* header */
    .header{
        padding: 20px 50px;
    }
    .back-wrap {
        border-top-left-radius: 70px;
        border-top-right-radius: 70px;
    }
    /* visual */
    .visual .title {
        height: 650px;
        border-bottom-left-radius: 70px;
        border-bottom-right-radius: 70px;
    }
    .visual .title .container #animatedStr {
        padding: 200px 60px 20px;
        font-size: 30px;
    }
    .visual .title .container .portfolio .p {
        font-size: 7.15rem
    }
    .visual .title .container .portfolio .f-wrap > span{
        font-size: 6rem;
    }
    .visual .title .container .portfolio .f-wrap .blank {
        vertical-align: 10px;
        font-size: 4.5rem;
    }
    .visual .title .container .portfolio .f-wrap #keyword {
        font-size: 6rem;
        vertical-align: -10px;
        padding: 0 10px;
    }
    .visual .icon .container {
        padding: 0px 50px 0;
    }
    .visual .icon .container .icon-bar li a {
        font-size: 12px;
    }
    .visual .icon .container .icon-bar li a .material-symbols-outlined{
        font-size: 30px;
    }
    /* brand */
    .brand .container {
        padding: 100px 50px;
    }
    .brand .container .brand-title .brand-wrap .brand-text {
        min-height: 80px;
        display: flex;
        flex-wrap: wrap; /* 줄바꿈 가능하게 */
        align-items: center;
        text-align: left;
        gap: 10px;
    }
    .brand .container .brand-title .brand-wrap .brand-text .text-start {
        order: 1;
    }
    .brand .container .brand-title .brand-wrap .brand-text .text-end {
        order: 3;
        flex-basis: 100%;
    }
    .brand .container .brand-title .brand-wrap .brand-text .brand-img-wrap {
        order: 2;
    }
    .brand .container .brand-title .brand-wrap .brand-text > span {
        font-size: 3rem;
    }
    .brand .container .brand-title .brand-wrap .brand-text .brand-img-wrap.show {
        width: 120px;
    }
    .brand .container .brand-title .brand-wrap .brand-text .brand-img-wrap.show {
        transform: translateY(-5px);
    }
    /* about */
    #about .container .aboutMe {
        display: block;
    }
    #about .container .aboutMe .about-left div {
        width: 100%;
        height: 250px;
        margin: 0 auto 75px;
    }
    #about .container .aboutMe .about-right .right-text {
        padding: 0px 0 30px;
    }
    #about .container .aboutMe .about-right .right-text h3 {
        font-size: 16px;
        transform: translateY(-5px);
    }
    #about .container .aboutMe .about-right .right-text div p {
       padding: 0 0 15px;
    }
    #about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .tools-title {
        padding-bottom: 20px;
    }
    #about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .tools-title {
        padding-bottom: 20px;
    }
    #about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .left-wrap .tools-flex .tools-name {
        width: 130px;
    }
    #about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .left-wrap .tools-flex .tools-dot {
        width: 30%;
    }
    #about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .right-wrap .tools-flex .tools-name {
        width: 90px;
    }
    /* menu */
    .menu {
        height: 95vh;
    }
    #work{
        border-radius: 50px;
    }
    #web{
        border-radius: 50px;
    }
    #design{
        border-radius: 50px;
    }
    #online{
        border-radius: 50px;
    }
    .menu .container .menu-wrap .menu-text-wrap {
        display: block;
        padding: 30px 0;
    }
    .menu .container .menu-wrap .menu-text-wrap .menu-title {
        font-size: 42px;
        text-align: center;
        padding: 0;
    }
    .menu .container .menu-wrap .menu-text-wrap .menu-title .menu-blank {
        font-size: 35px;
    }
    .menu .container .menu-wrap .menu-text-wrap .menu-title .menu-blank {
        vertical-align: 1px;
    }
    .menu .container .menu-wrap .menu-text-wrap .menu-title .material-symbols-outlined {
        font-size: 50px;
    }
    .menu .container .menu-wrap .menu-img-wrap {
        display: block;
    }
    .menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img {
        height: 270px;
    }
    .menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img-text {
        padding: 20px 0 40px;
    }
    .menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img-text .menu-img-title {
        font-size: 17px;
        margin-bottom: 13px;
    }
    .menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img-text p {
        font-size: 13px;
    }
    /* banner */
    .banner-wrap {
        margin-left: 30px;
    }
    .banner-wrap .banner-title {
        font-size: 57px;
        line-height: 57px;
    }
    .banner-wrap .banner-title .banner-btn {
        font-size: 10px;
    }
    .banner-wrap .banner-title .banner-btn {
        padding: 2px 10px 0;
        top: -15px;
        right: -30px;
    }
    .banner-wrap .banner-main {
        font-size: 57px;
        line-height: 57px;
    }
    .banner-wrap .banner-main p {
        width: 35%;
        padding: 0;
    }
    /* footer */
    .footer .footer-bg {
        border-top-left-radius: 70px;
        border-top-right-radius: 70px;
    }
    .footer .container .footer-title {
        padding: 0 50px;
    }
    .footer .container .footer-title h3 {
        font-size: 80px;
    }
    .footer .container .footer-menu-wrap {
        padding-left: 50px;
    }
    .footer .container p {
        font-size: 11px;
        padding-left: 50px;
    }
}
@media screen and (max-width:380px) {
    /* header */
    .header {
        padding: 20px 20px;
    }
    .header .logo a img {
        width: 80px;
    }
    /* visual */
    .visual {
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    .visual .title .container #animatedStr {
        padding: 140px 35px 10px;
        font-size: 27px;
    }
    .visual .title .container .portfolio .p {
        font-size: 3.85rem;
    }
    .visual .title .container .portfolio .f-wrap {
        padding-top: 5px;
    }
    .visual .title .container .portfolio .f-wrap > span {
        font-size: 3rem;
    }
    .visual .title .container .portfolio .f-wrap .blank {
        vertical-align: 3px;
        font-size: 2.5rem;
    }
    .visual .title .container .portfolio .f-wrap #keyword{
        font-size: 3.65rem;
        vertical-align: -10px;
        padding: 0;
    }
    .visual .title {
        height: 420px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    .visual .title .container #animatedStr {
        padding: 130px 35px 20px;
    }
    .visual .icon {
        height: 200px;
    }
    .visual .icon .container .icon-bar {
        display: block;
    }
    .visual .icon .container .icon-bar li {
        padding: 5px 0;
        
    }
    .visual .icon .container .icon-bar li a{
        font-size: 13px;
    }
    .visual .icon .container {
        padding: 0px 0 0 80px;
    }
    /* brand */
    .brand .container {
        padding: 100px 30px;
    }
    .brand .container h2 {
        font-size: .8rem
    }





}