@media screen and (max-width:1440px){
  body{    
    padding-right: 100px;
  }
  /*  헤더  */
  header .wrap nav {    
    grid-template-columns: 1fr 1fr;
    padding: 0 15px;
  }
  header .wrap nav h1{    
    grid-column: 1;
    grid-row: 1;
    justify-self: auto;
  }
  header .wrap nav ul.gnb{    
    grid-column: 1/ span 2;
    grid-row: 2;
    justify-self: center;
  }
  header .wrap nav ul.enb{
    grid-column: 2;
    grid-row: 1;
    position: relative;
    justify-self: end;
  }

}
/* ---------------------------------------------------- */
@media screen and (max-width:1200px){
  body{
    overflow-x: hidden;
    padding-right: 0;
  }
  /*  여백  */
  .wrap{
    padding: 0 15px;
  }
  main .wrap{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  /*  상단영역  */
  header .wrap nav ul.gnb{
    display: none;
  }
  header .wrap nav ul.enb{
    display: none;
  }
  /*  추가0   */
  header .wrap nav .wgnb{
    width: 80%;
    height: 100vh !important;
    /*! left: 80%; */
    top: 0;
    background-color: white;
    background-image: initial;
    transition: 1s;
    display: block;
    padding: 0;
  }
  header .wrap nav .wgnb .wsub{
    padding-left:30px;
    display: initial !important;
    position: initial;
  }
  header .wrap nav .wgnb h2{
    display: block;
    cursor: pointer;
    font-size: 19px;
    line-height: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #444;
    padding: 0 20px;
  }
  .currenH2{
    color: #074dd4;
  }
  header .wrap nav .wgnb h2::after{
    content: "";
    display: inline-block;
    width: 31px;
    height: 31px;
    background-image: url(../img/expand.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transition: 0.5s;
  }
  header .wrap nav .wgnb h2.currenH2::after{
    transform: rotate(-180deg);
  }
  header .wrap nav .wgnb ul{
    text-align: left;
    display: none;
    background-color:#eee;
    margin-left: -50px;
    margin-right: -20px;
    padding-left: 50px;
  }
  header .wrap nav .wgnb ul.sub1{
    display: initial;
    display: none;
  }
  header .wrap nav .wgnb ul.sub2{
    display: none;
  }
  header .wrap nav .wgnb ul li{

  }
  header .wrap nav .wgnb ul.sub1 > li:nth-child(-n+3){ 
    margin-left: 0;
    padding-left: 0;
  }
  header .wrap nav .wgnb ul.sub1 > li:nth-child(n+4){
    border-left: initial;
  }
  header .wrap nav .wgnb ul li a{
    display: block;
    line-height: 3;
  }
  header .wrap nav .wgnb ul.sub1 > li > a{
    color: #555;
  }
  header .wrap nav .wgnb ul.sub1 > li > a::before{
    border-top: none;
  }
  header .wrap nav .wgnb ul li:not(:first-child) a{
    border-top:1px solid #ccc;
  }
  header .wrap nav .wgnb ul.sub1 > li:nth-child(n+4) a{
    padding-left: 0;
  }
  /* 추가1   */
  header .wrap nav{
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 50px;
  }
  header .wrap nav h1{
    grid-column: 2;
    grid-row: 1;
  }
  header .wrap nav h1::before{
    height: 100%;
  }
  .ham{
    display: flex;
    grid-column: 1;
    grid-row: 1;
    position: relative;
  }
  header .wrap nav h2{
    position: relative;
    font-size: 15px;
    text-transform: uppercase;
    cursor: pointer;
  }
  /*  제품영역  */
  #product ul.list{    
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto auto;
  }
  #product ul.list li:nth-child(1){  
    grid-column: 1;
    grid-row: 1;
  }
  #product ul.list li:nth-child(2){
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  #product ul.list li:nth-child(3){
    grid-column: 3;
    grid-row: 1;
  }
  #product ul.list li:nth-child(4){
    grid-column: 1;
    grid-row: 2;
  }
  #product ul.list li:nth-child(5){
    grid-column: 3;
    grid-row: 2;
  }
  #product ul.list li:nth-child(6){
    grid-column: 2 / span 3;
    grid-row: 3;
  }
  #product ul.list li:nth-child(7){
    grid-column: 1;
    grid-row: 3;
  }
  #product ul.list li:nth-child(8){
    grid-column: 1 /span 2;
    grid-row: 4;
  }
  #product ul.list li:nth-child(9){
    grid-column: 3;
    grid-row: 4;
  }
  /*  어사이드  */
    aside{
    display: block;
    width: 100%;
    right: -100%;
    top: 50px;
    height: calc(100% - 50px);
    background-color: #fff;
    position: absolute;
   }
  .asideSliding{
    right: 0%;
    display: block;
  }
  aside .wrap{   
    width: auto;
    display: block;
  }
  aside .wrap ul.list{    
    text-align: left;
    grid-template-rows: repeat(8, auto);
  }
   aside .wrap ul.list > li h3::before{
    display: none;
  }
  aside .wrap ul.list > li h3{    
    height: initial;
  }
  aside .wrap ul.list > li h3 a{
    color: #000;
    font-size: 20px;
    flex-direction: row;
    justify-content: left;
    line-height: 3.5;
  }
  aside .wrap ul.list > li:not(:first-child) h3 a{
    border-top: 1px solid #e6e6e6;
  }
  aside .wrap ul.list > li h3 a::before{    
    background-image: url(../img/aside/mgnb_brand_menu-m.png);
  }
  aside .wrap ul.list > li h3 a::after{
    content: '';
    background-image: url(../img/plus.svg);
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
  }
  aside .wrap ul.list > li div{
    display: none;
  }
  aside .wrap ul.list > li ul.listsub{
/*     display: none; */
    position: static;
    height: initial;
    display: flex;
    flex-wrap: wrap;
  }
  aside .wrap ul.list > li ul.listsub::before{    
    display: none;
  }
  aside .wrap ul.list > li ul.listsub li{    
    width: calc(100% / 3);
  }
  aside .wrap ul.list > li ul.listsub li a{    
    width: 100%;
  }
  aside .wrap ul.list > li ul.listsub li a img{    
    width: 100%;
  }
}
/* ---------------------------------------------------- */
@media screen and (max-width:768px){
  /*  헤더영역  */
  header .wrap nav .wgnb{
    display: none;
  }
  header .wrap nav .wgnb .center{
    
  padding: 0 30px;
  }
  /*  타이틀 영역  */
  div#subtitle .wrap .slick-dots{    
    bottom: 2.34375vw;
  }
  div#subtitle button::before{    
    font-size: 1.302083333333333vw;
  }
  /*  메인영역  */
  #product .wrap h2{  
    font-size: calc(25px * 0.5);
  }
  #product ul.list{    
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
  }
  #product ul.list li:nth-child(1){ 
    grid-column: 1;
    grid-row: 1;
  }
  #product ul.list li:nth-child(2){
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  #product ul.list li:nth-child(3){
    grid-column: 1;
    grid-row: 2;
  }
  #product ul.list li:nth-child(4){
    grid-column: 1;
    grid-row: 4;
  }
  #product ul.list li:nth-child(5){
    grid-column: 2;
    grid-row: 4;
  }
  #product ul.list li:nth-child(6){
    grid-column: 1 / span 2;
    grid-row: 3;
  }
  #product ul.list li:nth-child(7){
    grid-column: 1;
    grid-row: 5;
  }
  #product ul.list li:nth-child(8){
    grid-column: 1 /span 2;
    grid-row: 6;
  }
  #product ul.list li:nth-child(9){
    grid-column: 2;
    grid-row: 5;
  }
  #product ul.list li h3{    
    font-size: calc(30px * 0.6);
  }
  #product ul.list li p{    
    font-size: 12px;
  }
  /* sns영역   */
  #sns h2{    
    font-size: calc(28px * 0.7);
  }
  #sns ul.snsani{    
    margin-top: 0;
  }
  .snsani li a::before{
    width: calc(100px *0.7);
    height: calc(100px *0.7);
  }
  #sns .slick-dots li button::before{   
    margin: 0;
  }
  /*  어사이드  */
    aside{    
    display: block;
    width: 100%;
    right: -100%;
    top: 50px;
    height: calc(100% - 50px);
    background-color: white;
    position: absolute;
    transition: 1s;
  }

  /*  하단영역  */
  footer div.wrap{
    padding-top:20px;
    padding-bottom:20px;
  }
  footer div.wrap ul.fnb li ul.sublist,footer div.wrap ul.fnb li:nth-child(1) ul.sublist{
    display: none;
  }
  footer div.wrap ul.fnb li h2 a{
    font-size: 11px;
  }
  footer div.wrap ul.fnb2 li:nth-child(5){
    display: none;
  }
  footer div.wrap ul.fnb2 li:nth-child(6){
    display: none;
  }
  footer div.wrap ul.fnb2 li:nth-child(8){
    display: none;
  }
  footer div.wrap ul.fnb2 li:nth-child(9){
    display: none;
  }
  footer div.wrap ul.fnb2 li a{
    padding: 0 5px;
    font-size: 9px;
  }
  footer div.wrap address{
    line-height: 1.2;
    margin-top: 20px;
  }
  footer .btop{
    display: none;
  }
}