@media screen and (max-width:1850px){
  .section div.inner.desc{transform:scale(0.9);}
}

@media screen and (max-width:1843px){
  .pop a.popupView{display:none;}
}
@media screen and (max-width:1800px){

  .conCenter{max-width: 1480px; margin: auto;   width: 100%; height: auto;}
  .section div.inner.desc{_display:none;}
  .section div.inner.display{width:55%; display: flex;  justify-content: center;
  }
  .dummy {width:15rem;}
  .section.database, .section.ui, .section.api, .section.renewal, .section.app, .section.landing, .section.depublising{padding:13rem 14rem 3rem 4rem;}
  .content{padding:0;}
  /* .section div.inner.display{padding-right:0;} */
  .dummy h4{display:none;}
  .menuDepth{width:15rem;}
  .head li.right.active{right:7rem;}
  .rightText{transform: scale(0.9);}
}
@media screen and (max-width:1700px){
  .conCenter{max-width: 1480px; margin: auto;   width: 100%; height: auto;}
  .section div.inner.desc{_display:none;}
  .section div.inner.display{width:56%; display: flex;  justify-content: center; 
  }
  .dummy {width:15rem;}
  
  .head li.right.active{right:9rem;}
  
}

@media screen and (max-width:1650px){
 
  .conCenter{max-width: 1480px; margin: auto;   width: 100%; height: auto;}
  .section div.inner.desc{_display:none;}
  .section div.inner.display{width:55%; display: flex;  justify-content: center;
  }
  .dummy {width:15rem;}
  .section.database, .section.ui, .section.api, .section.renewal, .section.app, .section.landing, .section.depublising{padding:13rem 14rem 3rem 4rem;}
  .content{padding:0;}
  /* .section div.inner.display{padding-right:1rem;} */
  .section div.inner.desc{padding-right:0;}
  .head li.right.active{right:9rem;}
}

@media screen and (max-width:1600px){
    .head li.right.active{right:9rem;}
}

@media screen and (max-width:1570px){
  .conCenter{max-width: 1350px; margin: auto;   width: 100%; height: auto;}
  .dummy {width:7rem;}
  .section div.inner.desc{padding-right:0;}
  .section.database, .section.ui, .section.api, .section.renewal, .section.app, .section.landing, .section.depublising{    padding: 13rem 5rem 3rem 4rem;}
  .head li.right.active{right:7rem;}
  .menuDepth{width:13rem;}
  .rightText h4{padding-right:2rem;}
}

@media screen and (max-width:1450px){
  .conCenter{max-width: 1200px; margin: auto;   width: 100%; height: auto;}
  .dummy {display:none;}
  .section div.inner.desc{padding-right:0;}
  .section.database, .section.ui, .section.api, .section.renewal, .section.app, .section.landing, .section.depublising{ padding: 13rem 2rem 3rem 4rem;}
  .head li.right.active{right:5rem;}
  .webTitle{font-size:1.6rem;}
  
}
@media screen and (max-width:1400px){
  
  .section div.inner.desc{padding-left:3rem;}
  .section.database, .section.ui, .section.api, .section.renewal, .section.app, .section.landing, .section.depublising{ padding: 13rem 2rem 3rem 2rem;}
   .section div.inner.display{width:55%;
  }
  /* .display .monitor .main{width:34rem; height:19.1rem; top:9%; left:50%; transform:translateX(-50%); position: absolute;} */
  .head li.middleLine{width:80%; padding-left:4%;}
  .section div.inner.desc{width:45%; float:right; padding-right:5%;}
  .menuDepth{width:11rem;}
  .menuDepth a{font-size:1rem;}
 
}

@media screen and (max-width:1350px){
    .webTitle>span{display:block; }
    .webTitle{padding-bottom:1rem;}
    .rightText h4{padding-right:4rem;}
    .display .monitor .main{width:571px; top:6%;}
}
@media screen and (max-width:1310px){
  
  .section div.inner.desc{padding-left:3rem;}
  .section.database, .section.ui, .section.api, .section.renewal, .section.app, .section.landing, .section.depublising{ padding: 13rem 2rem 3rem 2rem;}
   .section div.inner.display{width:74%;}
    .display .monitor .main{width:600px; top:4%;}
  /* .display .monitor .main{width:34rem; height:19.1rem; top:9%; left:50%; transform:translateX(-50%); position: absolute;} */
  .head li.middleLine{width:80%; padding-left:4%;}
  .section div.inner.desc{width:20%; float:left; padding:0; transform: scale(0.7);}
 .section div.inner.desc>div:not(:first-child){display:none;}
 .title .mainTitle{border-bottom:1px solid #111;}
 .conCenter{max-width: 1100px;}
 .menuDepth{padding: 3rem 1.2rem;}
 .section.ui .site{display:block;}
 .section.ui .site a.mobel{display:block;}
 .section.ui .site a.proposal{float:none; margin-top:1rem;}

}

@media screen and (max-width:1220px){
    .head li.right.active{right:7rem;}
    /* .rightText, .mainTxt .listBox .list{display: none;} */
   

}

@media screen and (max-width:1150px){
.section div.inner.desc{transform: scale(0.7); width:20%;}
 .conCenter{max-width: 890px;}
 .section div.inner.display{width:80%;}
 .menuDepth{width:18rem;}
 .head li.right.active{right:12rem;}
}

@media screen and (max-width:1130px){
     .menuDepth{width:18rem;}
     .head li.right.active{right:11rem;}
     .qList .qContents span.qDate{display:none;}
     .qList .qContents span.pName{width:16%;}
}


@media screen and (max-width:1060px){
     .menuDepth{width:16rem;}
     .head li.right.active{right:11rem;}


}
@media screen and (max-width:1000px){
     .menuDepth{width:14rem;}
     .head li.right.active{right:11rem;}
     .rightText{display:none;}
}

@media screen and (max-width:950px){
.section div.inner.display{width:100%; height: 548px;}
.section div.inner.desc{width:100%; text-align: center;}
.conCenter{max-width: 710px;}
.head li.middleLine{width: 71%; padding-left: 10%;}
.head li.right.active{right:0;}
.head li.right.on a.menu{position: absolute; top:-31px;}
.menuDepth{width:12rem;}
 .section.ui .site{_display:inline-block;}
 .section.ui .site a.mobel{text-align:center;}
 .section.ui .site a.proposal{float:right; margin-top:0;}
 .section.ui .site a.mobel{display:inline-block; padding-left: 8rem;}
}

@media screen and (max-width:870px){
     .menuDepth{width:20rem;}
     .head li.right.active{right:12rem;}
     .opinion h4{font-size:0.9rem;}
     .qList .qContents span.qEmail{display:none;}
     .qList .qContents span.pName{width:25%;}
     .qList .qContents span.qText{width:70%;}

}
@media screen and (max-width:778px){
  .display .monitor .main{    width: 571px; height:330px; top:6%;}
}

@media screen and (max-width:750px){
.section div.inner.display{width:100%; height: 548px;}
.section div.inner.desc{width:100%; text-align: center;}
.conCenter{max-width: 510px;}
.head li.middleLine{width: 65%; padding-left: 16%;}

.head li.right.on a.menu{position: absolute; top:-31px;}
.content{transform:scale(0.85);}
.section.database, .section.ui, .section.api, .section.renewal, .section.app, .section.landing, .section.depublising{padding: 13rem 0 3rem 0;}

 .menuDepth{width:19rem;}
 .head li.right.active{right:8rem;}
.display .monitor .main{width:600px; height:341px; top:4%;}
}
@media screen and (max-width:706px){
  .display .monitor .main{width:563px; height:330px; top:6%;}
}

@media screen and (max-width:680px){
.section div.inner.display{width:100%; height: 548px; padding:0;}
.display .monitor{top:0;}
.section div.inner.desc{width:100%; text-align: center;}
.conCenter{max-width: 510px;}
.head li.middleLine{width: 65%; padding-left: 16%;}

.head li.right.on a.menu{position: absolute; top:-31px;}
.content{transform:scale(0.85);}
.section.database, .section.ui, .section.api, .section.renewal, .section.app, .section.landing, .section.depublising{padding: 13rem 0 3rem 0;}
.head li.right.active{right:10rem;}
.opinion h4{font-size:0.5rem;}
.display .monitor .main{width:600px; height:341px; top:4%;}

}
@media screen and (max-width:610px){
.section div.inner.display{    transform: scale(1);}
.section.database, .section.ui, .section.api, .section.renewal, .section.app, .section.landing, .section.depublising{padding: 7rem 0 3rem 0;}
.head li.right a.menuBar{display:none;}
.head{font-size:0.8rem;}
.head li.right.on a.menu{ top:-47px;}
.display .monitor .main{width:563px; height:321px; top:7%;}
.head li.right.active{right:12rem;}
}
@media screen and (max-width:569px){
.section div.inner.display{transform: scale(0.9);}
.display .monitor .main{width: 527px;
 height: 298px; top: 10%;}
 .head li.right.active{right:12rem;}
 .opinion h4{display:none;}
 .opinion button{padding: 0.5rem 1rem;}
 .common{padding:4rem;}
}
@media screen and (max-width:537px){
.section div.inner.display{transform: scale(0.9);}
.display .monitor .main{width: 493px;
 height: 283px; top: 12%;}
}
@media screen and (max-width:500px){
.conCenter{max-width: 408px;}
.opinion input::placeholder{font-size:0.5rem; font-family: 'Noto Sans KR', sans-serif;}
.opinion textarea{height:200px;font-family: 'Noto Sans KR', sans-serif;}
.opinion textarea::placeholder{font-size:0.5rem;font-family: 'Noto Sans KR', sans-serif;}
}
@media screen and (max-width:414px){
.conCenter{max-width: 300px;}
 .menuDepth{width:19rem;}
 .head li.right.active{right:11rem;}
 .section div.inner.display{transform: scale(0.9); height:450px;}
.display .monitor .main{width: 384px;
 height: 219px; top: 20.5%;}
 .conCenter{max-width: 280px;}
 .head{font-size:0.6rem;}
 .head li.right.on a.menu{ top:89px;}
 .menuDepth{width:10rem; padding: 3rem 1rem;}
 .menuDepth a{font-size:0.7rem; padding:0.8rem;}
 .head li.left{width:9%;}
 .qContents{font-size:0.6rem;}

}


@media screen and (max-width:375px){
.conCenter{max-width: 280px;}
 .menuDepth{width:19rem;}
 .head li.right.active{right:11rem;}
 .section div.inner.display{transform: scale(0.9); height:450px;}
.display .monitor .main{width: 347px;
 height: 197px; top: 23.5%;}
 .conCenter{max-width: 280px;}
 .head{font-size:0.6rem;}
 .head li.right.on a.menu{ top:89px;}
 .menuDepth{width:10rem; padding: 3rem 1rem;}
 .menuDepth a{font-size:0.7rem; padding:0.8rem;}
 .head li.left{width:9%;}

}
@media screen and (max-width:360px){
 .section.database, .section.ui, .section.api, .section.renewal, .section.app, .section.landing, .section.depublising{padding:0;}
.section div.inner.display{transform: scale(0.9); height:450px;}
.display .monitor .main{width: 333px;
 height: 190px; top: 24.5%;}
 .conCenter{max-width: 280px;}
 .head{font-size:0.6rem;}
 .head li.right.on a.menu{ top:89px;}
 .menuDepth{width:10rem; padding: 3rem 1rem;}
 .menuDepth a{font-size:0.7rem; padding:0.8rem;}
 .head li.left{width:9%;}
}
/* @media screen and (max-width:1350px){
.section div.inner.display{width:55%; padding:0; padding-left:5%}
.section{padding: 8rem 2rem 2rem 2rem;
}
.section div.inner.desc{padding:0;}
.display .monitor{top:0;}
.section div.inner.desc{width:40%; height:22rem; padding-left:3rem;}

}
@media screen and (max-width:1250px){
.conCenter{max-width: 1100px;}
.section div.inner.display{width:100%; padding:0; height:548px;}
.section div.inner.desc{width:100%; text-align: center;}
.section div.inner.desc>div{display:none;}
.title .mainTitle{border-bottom:1px dotted #ededed; font-size:2rem;}

}
 */











/* ---------------------------- */

@media screen and (max-width:1400px){
  .mainTxt .list li a{font-size:1rem;}
  /* .bottom_title{bottom: -12%;} */
  .contact .desc h1{ font-size: 4.5rem;}
  .contact .desc img.left{bottom: 37%;}
  .skRight .skill .progress>span{font-size: 0.7rem;}
  .bar em{padding-left:0.7rem;}
  .slideInner h4{font-size: 7rem;}
  .slideInner h4::before{width: 60px;}
  .slideInner h4::after{width: 60px;}
}

@media screen and (max-width:1220px){
  /* .mainTxt .list{bottom: 6%;} */
  .mainTxt .list{display:none;}
  .slideInner h4{font-size: 5rem;}
  .contact .desc{width: 50%;}
  .contact .desc_2 {display:none;}
  .contact .desc_3{width:50%;}
  .skRight .skill .progress .tag{width:25%;}
  .skRight .skill .progress .bar{width:75%;}
  .scene.one .main .mainRight .imgyh{display:none;}
}

@media screen and (max-width:1000px){
  .scene.two .skills .skLeft{width:30%;}
  .scene.two .skills .skLeft span{left:37%;}
  .scene.two .skills .skLeft p{padding-top: 2rem;font-size: 4rem; padding-left: 1rem;  }
  .scene.two .skills .skRight{width: 70%}
  .skRight .skill .progress>span{font-size: 0.8rem;}

  .slideInner h4{font-size: 4rem;}
  .slideInner h4::before{width: 40px;}
  .slideInner h4::after{width: 40px;}
  
}

@media screen and (max-width:860px){
  .scene.one .main .mainLeft{width:100%; z-index: 99;}
  .scene.one .main .mainRight{float:none; width:30%; }
  .mainTxt .listBox{display:none;}
  .mainTxt h2{opacity:0.2; bottom:18%; right: -53%;}
  .scene.two .skills .skLeft{padding:9rem 0;}
  .scene.two .skills .skLeft span{left:77%;}
  .scene.two .skills .skLeft p{font-size: 3rem; padding-right: 5rem;}
  .scene.two .skills .skRight{width:70%; padding: 6rem 4rem;}
  .slideInner .innerText p{font-size: 0.7rem;}
  .contact .desc{border-right:0; width:100%; height:50%; opacity:0.2;  bottom: -339px;}
  .contact .desc_3{width:100%; position: relative;  top: -328px;}
  .contact .desc img.left{left: -3%; bottom: 55%;}

  
}

@media screen and (max-width:750px){
  .scene.two .skills .skLeft{width:100%; height:25%; padding:0;}
  .scene.two .skills .skRight{width:100%;  height:75%; padding: 4rem;}
  .skRight .skill .progress>span{padding:3px 0; font-size: 0.8rem}
  .scene.two .skills .skLeft span{left:23%;}
  .scene.two .skills .skLeft p{ padding-top: 7rem;}
  .project_title .sub_title{font-size: 0.8rem;}
  /* .project_title{padding: 4rem;} */
  .contact .desc{display:none;}
  .contact .desc_3{top:0; }
  .slideInner h4{font-size:3rem;}
  
}
@media screen and (max-width:560px){
.contact{padding:10rem 4rem 7rem 4rem;}
.project_title{padding: 9rem 4rem;}
.slideInner h4::after{width:20px;}
.slideInner h4::before{width:20px;}
}
@media screen and (max-width:490px){
  .scene.two .skills .skRight{}
 
  .project_title{padding: 0; text-align:center; }
  .project_title .sub_title{font-size:0.7rem; padding:0 1.6rem;}

}
@media screen and (max-width:490px){
  .contact{padding: 8rem 4rem;}
  .contact .desc_3{border-right:0; }

  .mainTxt h2{bottom: 26%; font-size: 5rem;}
  .scene.two .skills .skLeft{height:15%;}
  .scene.two .skills .skRight{height:85%;}
  .scene.two .skills .skRight{ padding: 1rem 3rem;}
  .scene.two .skills .skLeft p{padding-top:1rem; font-size:2rem; padding-right:2.5rem;}
  .skRight .skill .progress>span{padding:1px 0; font-size: 0.5rem}
  
  .project_title{padding:4rem 0; text-align:center; }
  .project_title h4{font-size:1.6rem;}
  .project_title .sub_title{font-size:0.6rem; padding:0 1.2rem;}
  .slideInner h4{font-size: 2.2rem; text-shadow: -0.2px 0#DB4131, 0.2px -0.2px 0#DB4131, -0.2px 0.2px 0#DB4131, -0.2px -0.2px 0#DB4131;;}
  .slideInner h4::after, .slideInner h4::before{width:5px; height:0.5px;}
  .slideInner .innerText b{font-size:0.8rem;}
  .slideInner .innerText p{font-size:0.6rem;}
  .project_main .mainSlide{padding-top:35%;}
  .bottom_title{bottom:0%;}

  .contact{padding: 8rem 0 8rem 4rem;}
  
  
}

@media screen and (max-width:320px){
  .project_title .sub_title{padding:0 0.4rem;}
  .project_title h4{font-size:1.5rem;}

  .project_main {width:80%;}


  .contact .desc_3 b{font-size:2.2rem;}
  .contact .desc_3>p{padding: 1.5rem 0.2rem 1.5rem 0; font-size:0.8rem;}
  .contact .desc_3 .contact_info p{padding: 0.5rem 0; font-size:0.7rem;}
}