@media (min-width : 768px) and (max-width:880px){

    html{
     font-size:21px;
    }
   .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:50%;
     object-fit: cover;
   }
    .menu{
     width:33.333%;
     position:absolute;
     left:0;top:50%;
     transform:translateY(-50%);
     }
   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:395px;
     opacity:1;
     pointer-events:auto;
   }
   nav>ul>li a{
     display:block;
     width:100%;
   }
   nav>ul>li{
     width:10%;
     color:#f6c9ce;
     text-align:left;
     margin-left:15%;
     margin-top:60px;
     position:relative;
   }
   nav>ul>li>ul{
     color:black;
     width:500%;
     position:absolute;
     top:0;left:150%;
   }
   nav>ul>li>ul:after{
     content:"";
     display:block;
     clear:both;
   }
   nav>ul>li>ul>li{
     float:left;
     margin: 0 1.5%;
   }
   nav>ul>li>ul>li:hover{
     color:#9a9a9a;
   }
    .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: 1rem;
     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: 50%;
     height: 50%;
     border: 1px solid #9a9a9a;
   }
   .innerContainer dd.on{
     opacity:1;
     pointer-events:auto;
     z-index:100;
   }
   .sub1{
     font-size:18px;
     font-family:'Roboto Mono', monospace;
     position:relative;
   }
    input{
     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:none;
     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;
   }
    button a{
     display: block;
     border-radius:5px;
     width: 100%;
     height: 100%;
     line-height: 27px;
     border: 1px solid #9e9e9e;
   }
     dd.on button{
     opacity:1;
     pointer-events:auto;
     cursor:pointer;
   }
     button:hover{
       background:#9a9a9a;
       color:#fff;
       border-radius:5px;
     }
     /* 두번째 dt와 dd */
   .sub2 input:first-of-type{
     border-radius:8px 8px 0 0;
   }
   .sub2 input:nth-of-type(3){
     border-radius:0 0 8px 8px;
   }
   .sub2 button:hover{
     background:#9a9a9a;
     color:#fff;
   }
   .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;
   }
   }