/* 탭/패드 화면에 적용될 스타일 
1024px 이상 -> 데스크탑
768~1024px ->탭 패드
768px 미만 -> 모바일
*/
@media (max-width:1400px) {
    html{
        font-size: 18px;
    }
    .commonFrame{
        width: auto;
        padding: 0 1rem;
        padding-top: 6rem;
    }
    .heroBanner {
        height: 600px;
        background: url(../img/heroBanner.jpg) no-repeat 50% 98% / cover;
        background-attachment: fixed;
    }
    .aboutme{
       gap: 2rem;
       padding: 2rem;
    }
    .aboutme1>span{
        font-size: 8rem;
    }
    .aboutme2{
        gap: 2rem;
    }
    .skillandTolls{
        padding: 2rem;
    }
    .otherEx{
        padding: 2rem;
    }
    .bannerCon>div {
        grid-template-columns: 270px 1fr 270px;
        gap: 2rem;
    }
    .forestToneBottomTxt>section {
        font-size: inherit;
    }
    .deco4 {
        position: absolute;
        top: 3%;
        left: 2%;
        height: 7rem;
        transform: rotate(-13deg);
    }
    .deco5 {
        top: 25%;
        right: 9%;
    }
    .deco6 {
        top: 34%;
        right: 4%;
    }
}

@media (max-width:950px){

    .aboutme{
        flex-direction: column;
        align-items: center;
        padding: 2rem;
    }
    .aboutme1>img{
        height: auto;
    }
    .skillToolBox ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .popupList {
        grid-template-columns: repeat(2, 1fr);
    }
    .bannerCon>div {
        grid-template-columns: repeat(3,1fr);
        gap: 1rem;
    }
    .bannerCon dl>dd span{
        margin-bottom: .5rem;
    }
    .aboutmeTxt>ul li {
        color: var(--main-font-color);
    }
    .autoBannerImg p {
        font-size: 1.5rem;
        font-weight: 200;
        color: var(--main-blue-color);
        white-space: nowrap;
    }
    .deco4 {
        position: absolute;
        top: 25%;
        left: 12%;
        height: 10rem;
    }
    .deco5 {
        top: 21%;
        right: 7%;
    }
}