@media screen and (max-width:1440px){
  body{
    overflow-x: hidden;
  }
  section{
    padding: 150px 0 !important;
  }
  section{
    padding: 70px 0 !important;
  }
  .wrap{
    padding: 20px;
    width: 100vw !important;
  }
  section#portfolio .slick-dots{
    width: 90%;
  }
  section#footer{
    padding: 0 !important;
  }
  header h1 a::before{
    display: none;
  }
}
@media screen and (max-width:1200px){
  .h3{
    font-size: calc(35px * 0.7) !important;
  }
  .h5{   
    font-size: calc(18px *0.75) !important;
    margin-bottom: 40px;
  }
  section h2{
    font-size: calc(70px * 0.8) !important;
  }
  /*  헤더  */
  header{
    position: fixed;
    z-index: 2;
    background-color: white;
    height: calc(100px * 0.8);
  }
  header .wrap{
    display: flex;
    width: 100vw;
    justify-content: space-between;
    margin: 0;
  }
  header h1 a{
    
  width: calc(66px * 0.8);
  }
  header ul li a{
    
  font-size: calc(23px * 0.8);
  }
  /*  타이틀  */
  div#title div.wrap{
    width: 100vw;
  }
  div#title h2{
    font-size: calc(130px * 0.7);
  }
  div#title p{
    transform: translate(20%, 20px);
  }
  div#title h2 span{
    font-size: calc(70px * 1) !important;
  }
  div#title .mouse a{    
    background-image: url(../img/swipe_up.svg);
    width: 50px;
    height: 50px;
    border: transparent;
  }
  div#title .mouse a::before{
    display: none;
  }
  /*  어바웃  */
  section#about .profile{
    column-gap: 20px;
    margin-top: 0;
  }
  section#about .profile .right{
    gap: 20px;
    grid-template-rows: auto auto;
  }
  section#about .profile .ab li:first-child{
    
  font-size: calc(48px * 0.6);
  }
  section#about .profile li{
    font-size: calc(18px * 0.8);
  }
  /*  portfolio  */
  section#portfolio .slick-dots li button::before{   
    font-size: calc(18px * 0.8);
    /*! content: "●" !important; */
    width: 100%;
  }
  section#portfolio .slick-prev::before,section#portfolio .slick-next::before{
    display: none;
  }
  section#portfolio .wrap ul.list li > ul li{
    font-size: calc(19px * 0.8);
  }
  section#portfolio .wrap ul.list li img{ 
    width: calc(450px * 0.5) !important;
  }
  aside{
    display: none;
  }
  /* contact   */
  section#contact .box1 p{
    
  font-size: calc(18px * 0.8);
  }
  section#contact .box2 p a{ 
    font-size: calc(20px * 0.8);
  }
  section#contact .box2 p:nth-child(2) a{
    
  font-size: calc(32px * 0.8) !important;
  }
  section#contact .box2 p .mail{
    /*! left: 30%; */
    /*! top: 24px; */
  }
  section#contact .box2 p .call{
    /*! left: 32%; */
    /*! top: 39px; */
  }
  section#footer .wrap{
    padding: 0;
  }
}

@media screen and (max-width:768px){
  .h2{
    font-size: calc(70px * 0.6) !important;
    margin-bottom: 8px;
   }
  h2::after{
    transform: translateY(-20px) !important;
    width: 60% !important;
  }
  .h3{
    font-size: calc(40px * 0.6);
   }
  /* 상단영역   */
  header{    
    background-color: #fff;
    padding: 10px 0;
    position: fixed;
    z-index: 2;
    height: 90px;
    padding: 0;
  }
  header .wrap{   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  header h1{    
    padding-bottom: 5px;
  }
  header h1 a{   
    width: calc(74px * 0.6);
    height: calc(64px * 0.6);
    margin: 0 auto;
  }
  header ul{
    height: fit-content;
    padding-top: 10px;
  }
  header ul li a{   
    font-size: calc(23px * 0.6);
    padding: 0px 16px;
  }
  header ul li a:hover{
    transform: scale(1);
    transition: 0.5s;
  }
  /*  타이틀 영역  */
  div#title div.wrap{ 
    width: 100%;
  }
  div#title h2{    
    font-size: calc(130px * 0.39) !important;
    transform: translateY(0px) !important;
  }
  div#title p{
    
  font-size: calc(19px * 0.75);
  transform: translate(0,10px);
  }
  /*  about  */
  section#about{    
    height: fit-content;
  }
  section#about .wrap h2{
    display: block;
  }
  section#about .profile{ 
    display: flex;
    flex-direction: column;
    margin-top: 20px;
  }
  section#about .profile .left img{
    width: calc(400px * 0.6);
  }
  section#about .profile .left ul{
    
  gap: 20px;
  }
  section#about .profile .left ul li a{  
    width: calc(90px * 1.3);
    height: calc(35px * 1.3);
    line-height: 30px;
    font-size: calc(18px * 1);
  }
  section#about .profile .right{    
    display: flex;
    flex-direction: column;
  }
  section#about .profile .right li{
    font-size: calc(20px * 0.8);
  }
  section#about .profile .ab li:first-child{
    font-size: calc(48px * 0.6) !important;
    margin-top: 20px;
  }
  section#about .profile .right .ej ul li a{
    
  height: calc(35px * 1.1);
  }
  section#about .profile .right .ej ul li span{
    display: block;
  }
  section#about .profile .right .ab h3{  
    margin: 30px 0 10px;
  }
  section#about .profile .right .cre h3{
    margin: 10px 0;
  }
  section#about .profile .ej h3{    
    margin: 10px 0;
  }

  /*  skill  */
  section#skill .wrap ul{
    width: 100%;
    row-gap: 25px;
  }
  section#skill .wrap ul li{
    /*! width: 100%; */
    font-size: calc(18px * 0.7);
    height: calc(50px * 0.4);
  }
  section#skill .wrap ul li::before{   
    width: calc(33px * 0.6);
    height: calc(33px * 0.6);
  }
  section#skill .wrap ul li span{    
    height: calc(13px * 0.6) !important;
  }
  section#skill .wrap ul li span::before{
    height: calc(13px * 0.6);
  }
  section#skill .wrap ul li span.html::before{
    width: calc(80% * 0.8);
  }
  section#skill .wrap ul li span.css::before{
    width: calc(75% * 0.8);
  }
  section#skill .wrap ul li span.jq::before{
    width: calc(30% * 0.8);
  } 
  section#skill .wrap ul li span.java::before{
    width: calc(25% * 0.8);
  }
  section#skill .wrap ul li span.sass::before{ 
    width: calc(80% * 0.8);
  }
  section#skill .wrap ul li span.web::before{
    width: calc(90% * 0.8);
  }
  section#skill .wrap ul li span.zen::before{
    width: calc(80% * 0.8);
  }
  section#skill .wrap ul li span.ps::before{
    width: calc(90% * 0.8);
  }
  section#skill .wrap ul li span.ai::before{
    width: calc(70% * 0.8);
  }
  section#skill .wrap ul li span.id::before{
    width: calc(20% * 0.8);
  }
  section#skill .wrap ul li span.pr::before{
    width: calc(85% * 0.8);
  }
  section#skill .wrap ul li span.vue::before{
    width: calc(10% * 0.8);
  }
  section#skill .wrap ul li span::after{
    font-size: calc(17px * 0.7) !important;
    position: absolute;
    transform: translateY(-2px) !important;
  }
  section#skill .wrap ul li span.html::after{
    right: 19%;
  }
  section#skill .wrap ul li span.css::after{
    left: 60%;
  }
  section#skill .wrap ul li span.jq::after{
    left: 25%;
  } 
  section#skill .wrap ul li span.java::after{
    left: 21%;
  }
  section#skill .wrap ul li span.sass::after{ 
    right: 19%;
  }
  section#skill .wrap ul li span.web::after{
    right: 10%;
  }
  section#skill .wrap ul li span.zen::after{
    right: 19%;
  }
  section#skill .wrap ul li span.ps::after{
    right: 12%;
  }
  section#skill .wrap ul li span.ai::after{
    right: 26%;
  }
  section#skill .wrap ul li span.id::after{
    left: 17%;
  }
  section#skill .wrap ul li span.pr::after{
    right: 14%;
  }
  section#skill .wrap ul li span.vue::after{
    left: 18px;
  }
  /*  portfolio  */
  section#portfolio .wrap h2{
    margin-bottom: 10px;
  }
    section#portfolio .slick-dots li button::before{   
    font-size: calc(18px * 0.7);
    content: "●" !important;
    width: 100%;
  }
  section#portfolio .wrap ul.list{    
    transform: translateY(0px) !important;
    margin-top: 13px;
  }
  section#portfolio .wrap ul.list li img{    
    grid-column: 1;
    grid-row: 1;
    margin: 0 auto;
  }
  section#portfolio .wrap ul.list li > ul{ 
    grid-row: 2;
    margin-top: 15px;
  }
  section#portfolio .wrap ul.list li > ul li.h3{    
    font-size: calc(45px * 0.6);
    width: fit-content;
  }
  section#portfolio .wrap ul.list li > ul li{
    font-size: calc(23px * 0.7);
  }

  section#portfolio .wrap ul.list li .view a:nth-child(2){
    
  }
  section#portfolio .wrap ul.list li .view a{  
    font-size: calc(15px * 1.1);
    line-height: 30px;
    width: calc(106px * 1.3 ) !important;
    height: calc(30px * 1.4);
  }
  section#portfolio .slick-dots{
    gap: 8px;
    width: 100%;
    transform: translateY(-30px);
  }
  /* contact   */
  section#contact .wrap{
    flex-direction: column;
  }
  section#contact .box1{  
    width: calc(600px * 0.5);
    height: calc(300px * 0.5);
    margin-bottom: 15px;
    margin-right: 0;
  }
  section#contact .box1 p{
    
  font-size: calc(18px * 0.7);
  }
  section#contact .box1 h2::after{
    width: 300px !important;
    margin-top: 13px;
    transform: translateY(0px) !important;
  }
  section#contact .box1 h3{
    font-size: calc(30px * 0.8);
  }
  section#contact .box2 {  
  width: calc(600px * 0.5);
  height: calc(300px * 0.5);
  }
  section#contact .box2 p .mail{ 
    left: 16%;
    top: 23px;
  }
  section#contact .box2 p .call{
    left: 19%;
    top: 34px;
  }
  /*  footer  */
  footer .wrap p{  
    font-size: 9px;
  }
  footer a.top{
    display: none;
  }
}