@media (max-width : 479px){
    html{
     font-size:11px;
    }
   .wrap{
     height:100vh;
     margin:0 auto;
     overflow: hidden;
   }
    /* header */
    header{
       width:100%;
       height:6rem;
       background:#fff;
       text-align:center;
       position:fixed;
       top:0;
       left:0;
       z-index: 10000;
       line-height: 140%;
     }
     .logo{
       width:33%;
       position:absolute;
       top:50%;
       left:33.333%;
       transform:translateY(-50%);
     }
     .logo img{
       width: 70%;
       object-fit: cover;
     }
     .menu{
       width:33.333%;
       position:absolute;
       left:0;top:50%;
       transform:translateY(-50%);
     }
     .menu img{
      width: 10%;
      object-fit: cover;
     }
     nav{
       width:300%;
       font-size:18px;
       background:rgba(255,255,255,0.89);
       position:absolute;
       top:3.6rem;
       left:0;
       box-sizing:border-box;
       transition:all 0.6s ease 0s;
       opacity:0;
       pointer-events: none;
     }
     nav.on{
       height:100vh;
       opacity:1;
       pointer-events: auto;
     }
     nav>ul>li a{
       display:block;
       width:100%;
     }
     nav>ul>li{
       width:10%;
       font-size:1.1rem;
       color:#f6c9ce;
       text-align:left;
       margin-left:15%;
       margin-top:40px;
       position:relative;
     }
     nav>ul>li>ul{
       color:black;
       width:500%;
     }
     nav>ul>li>ul:after{
       content:"";
       display:block;
       clear:both;
     }
     nav>ul>li>ul>li{
       margin: 5% 0;
       font-size: 1rem;
     }
     nav>ul>li>ul>li:hover{
       color:#9a9a9a;
     }
     nav>ul>li>ul.ko{
       font-family: 'GmarketSansLight';
       line-height:48px;
     }
     .logIn{
       width:33.333%;
       position:absolute;
       right:0;
       top:50%;
       transform:translateY(-50%);
       font-family: 'Roboto Mono', monospace;
       font-weight:100;
       font-size:1.3rem;
       color:#9a9a9a;
       }
       .logIn p{
        font-size:1rem;
      }
   
   /* contentLogin */
   .contentLogin{
       width: 90%;
       margin: 0 auto;
       border-radius: 25px;
       display: flex;
       justify-content: center;
       align-items: center;
       margin-top: 6rem;
       position: relative;
   }
   .innerContainer{
     width: 100%;
     height: 100%;
     border-radius: 25px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
   }
   .innerContainer dl{
     width: 100%;
     height: 100%;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     pointer-events: auto;
   }
   .innerContainer dt{
     float: left;
     color: #000;
     font-size: 1.5rem;
     font-family: 'GmarketSansLight';
     transition: all 0.3s ease 0s;
     margin-top: 4rem;
     pointer-events: auto;
     width: 50%;
     text-align: end;
   }
   .innerContainer dt:last-of-type{
     text-align: start;
   }
   .innerContainer dt:hover{
     color:#f9eaed;
     font-weight:200;
   }
   .innerContainer dd{
     position: absolute;
     top: 50%;
     left: 50%;
     opacity: 0;
     transition: all 0.4s ease 0s;
     pointer-events: none;
     transform: translate(-50%,-50%);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 90%;
     height: 50%;
     border: 1px solid #9a9a9a;
   }
   .innerContainer dd.on{
     opacity:1;
     pointer-events:auto;
   }
   .sub1{
     font-size:18px;
     font-family:'Roboto Mono', monospace;
     position:relative;
   }
   input{
     font-size: 1rem;
     width: 60%;
     height: 30px;
     padding: 5px 20px;
     pointer-events: auto;
     font-family: 'Roboto Mono', monospace;
     border:0.75px solid #9a9a9a;
   }
   .sub1 input:first-of-type{
     border-radius:8px 8px 0 0;
   }
   .sub1 input:nth-of-type(2){
     border-radius:0 0 8px 8px;
   }
   button{
     width:200px; 
     height:30px;
     border-radius:5px;
     background:#fff;
     margin-top:1.5rem;
     font-family:'Roboto Mono', monospace;
     opacity:0;
     pointer-events:none;
     transition:all 0.4s ease 0s;
     border:1px solid #9e9e9e;
   }
   button a{
     display: block;
     border-radius:5px;
     width: 100%;
     height: 100%;
     line-height: 27px;
   }
     dd.on button{
     opacity:1;
     pointer-events:auto;
   }
     button:hover{
       background:#9a9a9a;
       color:#fff;
       border-radius:5px;
     }
     /* 두번째 dt와 dd */
   .sub2 input:first-of-type{
     border-radius:8px 8px 0 0;
   }
   .sub2 input{
     font-size: 1rem;
     width: 60%;
     height: 30px;
     padding: 5px 20px;
     pointer-events: auto;
     font-family: 'Roboto Mono', monospace;
     border:0.75px solid #9a9a9a;
   }
   .sub2 input:nth-of-type(3){
     border-radius:0 0 8px 8px;
   }
   .kakao{
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     font-family: 'GmarketSansLight';
     color: #000;
     font-size: 0.7rem;
     text-align: center;
   }
   .kakao p{
       margin-bottom: 2rem;
       font-size: 1rem;
       word-break: keep-all;
   }
   }