/* 탭/패드 화면에 적용될 스타일 
1024px 이상 -> 데스크탑
768~1024px ->탭 패드
768px 미만 -> 모바일
*/
@media (max-width:768px){

    
    .imgAll img {
        width: initial;
        margin:0 auto;
        /* max-width: ; */
    }

    /* 모바일 메뉴 */
    .hiddenGnb{
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        z-index: 100; 
        opacity: 0;
        pointer-events: none;
        transition:all .2s ease 0s;
    }
    .hiddenGnb.on{
        opacity: 1;
        pointer-events: auto;
    }
    .hiddenGnb::before{
        content: "";
        position: absolute;
        width:200px;
        height:200px;
        background-color: var(--main-yellow-color);
        left:calc(50% - 100px);
        top:-100px;
        border-radius: 50%;
        z-index: -1;
        transition: all .61s ease 0s;
        transform: scale(0);
    }
    .hiddenGnb.on::before{
        transform: scale(11);
    }

    .hiddenGnb::after{
        content: "";
        position: absolute;
        width:200px;
        height:200px;
        background-color: var(--main-pink-color);
        left:calc(50% - 100px);
        top:-100px;
        border-radius: 50%;
        z-index: -1;
        transition: all .6s ease 0.15s;
        transform: scale(0);
    }
    .hiddenGnb.on::after{
        transform: scale(5);
    }

    .moGnb {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        height: 100vh;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease 0.2s;
    }
    .moGnb .moResume img{
        height: 4rem;
    }
    .hiddenGnb.on .moGnb{
        opacity: 1;
        pointer-events: auto;
        font-family: 'LOTTERIACHAB';
    }
    .hiddenGnb .moGnb>li {
        mix-blend-mode: color-burn;
        color: transparent;
    }
    .hiddenGnb.on .moGnb>li {
        color: #4996bd;
        -webkit-text-stroke: .1rem #2630ab;
    }
    .hiddenGnb .moGnb>li.moResume{
        mix-blend-mode: initial;
    }
    .btnMenu{
        position: fixed;
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        line-height: 0;
        cursor: pointer;
        display: none;
        transition: all 1s ease 0s;
        z-index: 1000; 
        animation: trem_mo 1s linear 0s infinite alternate;
    }
    .btnMenu img{
        max-width: initial;
        height: 4.5rem;
        aspect-ratio: 139 / 80;
    }
    .pj2SubMenu_mo {
        display: flex;
        flex-direction: column;
        font-size: 1rem;
        font-weight: 700;
        gap: .5rem;
        -webkit-text-stroke: 0px;
        font-family: 'Paperlogy';
        margin-top: 1rem;
        color: #2630ab;
    }
    .pj2SubMenu_mo a{
        padding: .3rem;
        display: inline-flex;
        align-items: center;
    }
    @keyframes trem_mo {
        0%{
            transform:scale(1)translateX(-50%)
        }
        100%{
            transform:scale(1.1)translateX(-50%)
        }
    }
    .moGnb {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        height: 100vh;
        justify-content: center;
        font-size: 2rem;
    }
    .hero {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 6rem 0;
        padding: 3rem 1rem !important;
    }
    /* .wacomBottomTxt.commonFrame{
        padding-top: 0!important;
    } */
    .popupList {
        grid-template-columns: repeat(1, 1fr);
    }
    .commonFrame {
        width: auto;
        padding: 0 1rem;
        padding-top: 6rem;
    }
    .wacomBottomTxt br,
    .otherExTxt br,
    .bannersTxt br,
    .popupsTxt br,
    .contect br,
    .forestToneBottomTxt br,
    .skillToolTxt br{
        display: none;
    }
    .aboutme1>span {
        font-size: 7rem;
        -webkit-text-stroke: 0.04rem var(--main-yellow-color);
    }
    html{
        font-size: 14px;
    }
    .heroTxt .name {
        white-space: pre-line;
    }
    .heroTxt .nameSub {
        white-space: pre-line;
    }
    .heroBanner {
        height: 580px;
        background: url(../img/heroBanner_mo2.jpg) no-repeat 50% 50% / cover;
        background-attachment: fixed;
    }
    .aboutme{
        padding: 1rem;
    }
    .aboutme1>img{
        height: auto;
    }
    .skillandTolls{
        padding: 1rem;
    }
    .skillToolBox ul {
        grid-template-columns: repeat(1, 1fr);
    }
    .otherEx{
        padding: 1rem;
    }
    .otherExBox {
        flex-direction: column;
    }
    .bannerCon>div {
        grid-template-columns: 200px 1fr 300px;
    }
    .bannerCon>div {
        grid-template-columns: repeat(1,1fr);
        gap: 1rem;
    }
    .bannerCon dl>dd span{
        margin-bottom: 0;
    }
    .gnb {
        display: none;
    }
    .btnMenu{
        display: block;
    }
    .project2 .wacomLogo>p{
        /* white-space: pre-line; */
    }
    .project2 .wacomLogo p{
        width: auto;
    }
    .project1 .forestToneLogo p{
        width: auto;
    }
    .forestToneBottomTxt>h1{
        white-space: pre-line;
        text-align: center;
        font-size: 2.5rem;
    }
    .wacomBottomTxt>h2{
        white-space: pre-line;
        margin: 3rem 0;
    } 
    .contactMe{
        width:250px;
    }
    .forestToneBottomImg img{
        width: 30%;
    }
    .forestToneBottomTxt p,
    .wacomBottomSubTxt p{
        font-size: 1.rem;
        word-break: keep-all;
    }
    .banners .deco2 {
        height: 20rem;
        top: -20%;
        left: -14%
    }
    .deco3 {
        top: 29%;
        left: -4%;
        transform: rotate(-85deg);
        height: 11rem;
    }
    .autoBannerImg p {
        font-size: 1.3rem;
        font-weight: 200;
        color: var(--main-blue-color);
        white-space: nowrap;
    }
    .deco4 {
        top: 1%;
        left: 2%;
        height: 7rem;
    }
    .keyward>dd {
        flex-wrap: wrap;
    }
    .contactList {
        flex-direction: column;
    }
    .deco5 {
        top: 34%;
        right: 10%;
    }
   .deco6 {
        top: 39%;
        right: 5%;
    }
    .projectTxt p br{display: none;}
    .contect .deco1 {
        width: 50%;
        aspect-ratio: 1 / 1;
        height: auto;
    }

}
@media (max-width:400px){
    .heroBanner {
        height: 475px;
        background: url(../img/heroBanner_mo.jpg) no-repeat 50% 50% / cover;
        background-attachment: fixed;
    }
    
    .heroTxt .name {
        white-space: normal;
    }
    .heroTxt .nameSub {
        white-space: normal;
    }
}
@media (max-width:300px){
    .heroBanner {
        height: 475px;
        background: url(../img/heroBanner_mo.jpg) no-repeat 50% 50% / cover;
        background-attachment: fixed;
    }
    .moGnb {
        gap: 1rem;
        font-size: 2rem;
    }
    .hiddenGnb.on .moGnb>li {
        color: #4996bd;
        -webkit-text-stroke: .1rem #2630ab;
    }
    .contect .deco1 {
        height: 7rem;
    }
    .contect .decTxt{
        top: 105px;
        font-size: 2rem;
    }
    .deco3 {
        top: 40%;
        left: -2%;
        transform: rotate(-86deg);
        height: 7rem;
    }
    .banners .deco2 {
        height: 15rem;
        top: -15%;
        left: -14%;
    }
    .aboutme1>span {
        font-size: 4rem;
    }
    .keyward>dd {
        flex-wrap: wrap;
    }
    .aboutmeProfile dt {
        width: 70px;
    }
    .aboutmeTxt>div h4 {
        white-space: pre-line;
    }
    .deco5 {
        top: 40%;
        right: 4%
    }
    .deco6 {
        top: 46%;
        right: 5%;
        height: 2rem;
    }
    .aboutme1>span {
        font-size: 3rem
    }
    .skillToolTxt>p br{
        display: none;
    }
}

@supports (-webkit-touch-callout: none) {
    /* 기기가 아이폰인경우 */
    .heroBanner{
        background-attachment: scroll !important;
    }
}