/* 
탭&패드 화면에 적용 될 스타일

1024픽셀 이상 -> 데스크탑
768~1024 -> 탭 패드
768 미만 -> 모바일
*/

@media (max-width:767px){
    .project2 img {
        width: auto;
        max-width: 100%;
    }
    .pjt_img1 img {
        width: auto;
        max-width: 100%;
    }
    html{
        font-size: 14px;
    }
    header{display: none;}
    .btnMenu{display: block;}

    .hero>.pc{ display: none; }
    .hero>.tab{ display: none; }

    .hero>.mo{
        display: inline;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: cover;
        z-index: -2;
    }
    

    .floatingHeroTxt {
        width: 100%;
        /* height: 40rem; */
        padding: 0 1rem;
        transform: translateY(-95px);
    }

    .floatingHeroTxt h1{
        font-size: 2.5rem;
        width: 100%;
    }




    .about{
        text-align: center;
        padding: 5rem 0;
        width: auto;
    }

    .about p{
        padding-top: 2rem;
        width: 80%;
        margin: 0 auto;
    }


    .apTopSec2 img{
        width: 1rem;
    }

    .education img{
        height: 1rem;
    }

    .hobby img{
        height: 2.5rem;
    }

    .hobby ul {
        justify-content: space-between;
    }

    .aboutPro {
        flex-direction: column;
        width: auto;
        margin: 0;
        display: flex;
        gap: 3rem;
    }

    .skillsWrap {
        background: url(../img/odj.jpg) no-repeat 50% 50% / 300% 100%;
    }

    
    .skill_list>li{
        /* width: 100%; */
        width: calc((100% - 1rem)/2);
    }

    .skills p:nth-of-type(1){
        width: 90%;
    }

    
    .apTop {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 1rem;
        align-items: end;
    }
    .apTopSec1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        text-align: center;
    }
    .apTopSec1 img {
        height: 280px;
        /* aspect-ratio: 1 / 1; */
        object-fit: cover;
        border-radius: 200px 200px 20px 20px;
        /* border: 0.4rem solid var(--main-color); */
        box-sizing: border-box;
    }
    .apTopSec2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .apTopSec2  ul{
        display: flex        ;
        flex-wrap: wrap;
        gap: 0.2rem 1rem;
        align-items: center;
    }
    
    .apTopSec3 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .apTopSec3 p{
        margin-top: 1rem;
        width: 95%
    }    

    .apBot{
        display: inline;
        padding-top: 0rem;
    }

    .apBot1{
        flex: 1;
    }
    
    .apBot2{
        flex: 1;
        padding: 2rem 0;
    }


    .poster_title{
        width: 90%;
    }
    
    .popup_title{
        width: 90%;
    }


    .banner_title{
        width: 90%;
    }

    .project_title{
        width: 90%;
    }



    .poster_list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* gap: 2rem 1rem; */
        text-align: left;
    }

    .popup_list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
        text-align: left;
    }
    .commonFrame {
        width: auto;
        margin: 0;
        padding: 0 1rem;
        /* padding-top: 5rem; */
    }
    .skills {
        padding: 2rem 1rem;
        width: auto;
        padding-top: 6rem;
    }
    .aboutPro {
        width: auto;
        padding: 0 1rem;
    }
    
    /* 배너 */
    .bannerTxt{
        display: block;
        /* gap: 1rem;
        margin-bottom: 1rem; */
        
    }
    .bannerTxt section:nth-of-type(1) {
        display: block;
        flex: 1;
    }

    .bannerTxt h3{
        width:100%;
        margin-bottom: 1rem;
    }
    
    .bannerTxt p{
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .bannerTxt section:nth-of-type(1){
        /* display: contents; */
    }

    .bannerTxt dl{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }
    
    .train>li>figure{
        margin-bottom: 1rem;
    }
    

    .line1{
        top: 289px;
    }
    .line3 {
        padding-top: 1rem;
    }
    .contact_title h1 {
        font-size: 2.6rem;
        /* position: absolute; */
        /* left: 0; */
        /* top: 0; */
        line-height: 0.8;
    }
    .ct2 li b {
        text-align: left;
    }
    .mo{display: block;}
    .pc{display: none;}
    .ct2 li {
        display: grid;
        grid-template-columns: 30px 1fr;
        align-items: center;
        gap: .5rem;
        margin-bottom: 1.2rem;
    }
    .ct2 em{
        grid-column: 1/3;
    }
    .contact_title2 {
        display: flex    ;
        /* flex-direction: column; */
        gap: 2rem;
        position: relative;
        text-align: left;
        /* border: 1px solid red; */
        flex-direction: column;
    }
    .contact {
        background: url(../img/line_3.svg) no-repeat 50% 67% / contain;
        background-attachment: fixed;
    }
    .profile_frame {
        width: 100%;
        aspect-ratio: 771 / 1114;
        /* border: 1px solid red; */
        border-radius: 540px;
        background: url(../img/bot_profile_img.jpg) no-repeat 40% 50% / cover;
        background-attachment: fixed;
        box-shadow: 0 0 10px rgb(66 60 60 / 24%) inset;
    }
    

}
@supports (-webkit-touch-callout: none) {
    .profile_frame{
      background-attachment: scroll !important;
    }
  }