@charset "utf-8";

/* 메인콘텐츠 서식- pc, table, mobile */
main{padding-bottom:40px;
width: 100%;
overflow: hidden;}
.slide{
  width:100%;
}
.slide > h2{display:none;}
.con{
  width:1200px;
  margin:10px auto;
  display: grid;
  grid-gap:10px;
  box-sizing: border-box;
  /* 그리드 속성을 사용하여 3칸 2줄 만듬 */
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
}
.con > h2{display: none;}

.banner{width:360px;}
.banner h2{ display: none;}
.story{width:460px;}
.story > .bs{
  display:inline-block;
  width:100%;
  height:180px;
  overflow:hidden;
}


.ad{width:360px;}
.banner h3, .story h2, .ad h2{
  display:none;
}
.banner img, .story img, .ad img{
  width:100%;
}
.story .bs img{
  padding-bottom:17px;
}

.notice{width:360px;}
.notice h2{font-family: "Nanum Gothic";}
.notice>ul>li:last-child{
  position: absolute;
  left: 18%;
}
.store{

  text-align:center;
  padding-top:20px;
  box-sizing: border-box;
}
.store h2{display:none;}
.store img{
  width: 100%;
}
.special{width:360px;}
.notice a:hover{
  text-decoration: underline;
}

/* 모바일 해상도 서식 */
@media screen and (max-width:767px) {
  header{height:76px;}
  
  main{
    padding:0px 1.2% 50px 1.2%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .flexslider{height:380px;}
  .slides img{
    height:380px !important;
    object-fit:cover;/* 높이가 유지되면서 가로가 넘치게 비율 유지할 수 있도록 함 */
  }
  .con{
    width:100%;
    margin:10px 0px;
    /* 그리드 속성을 사용하여 3칸 2줄 만듬 */
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(6, auto);
  }
  .con img{width:100%;}
  .banner, .story, .ad, .notice, .store, .special{width:100%;}
  .store img{width:93%;}

  /* 스마트폰이 작은 화면일 경우 아래 내용 적용 */
  .notice li, .special li{
    width:320px; 
    font-size:0.95rem;
  }

  /* 스마트폰이 큰 화면일 경우 */
  @media screen and (min-width:414px) {
    .notice li, .special li{
      width: 414px;
    }
    
  }
}

 /* 태블릿 해상도 서식 */
@media screen and (min-width:768px) and (max-width:1024px) {
 

  .con{
    width: 100%;
    margin:30px auto;
    display: grid;
    grid-gap:1%;
    padding: 1%;
    box-sizing: border-box;
    grid-template-columns: auto; 
    grid-template-areas: 
    "a01 a03"
    "a02 a02"
    "a04 a06"
    "a05 a05";
    overflow: hidden;
  }

  .con .banner{grid-area:a01;}

  .con .story{
    grid-area:a02;
}

  .con .ad{grid-area:a03;}

  .con .notice{grid-area:a04;
}

  .con .store{
    grid-area:a05;
}

  .con .special{grid-area:a06;
}

  .con .ad img, .con .banner img{width: 100%;}

.banner, .ad{
  width: 100%;
  text-align: center;
}
.story{
  width: 100%;
  text-align: center;
}

.story .bs{
  width: 49.4%;
  display: inline-block;
  float: left;
}
.story .fr{
  width: 49.4%;
  display: inline-block;
  float: right;
}
.special > a> img{ transform: translateY(-20px);}

.notice, .special, .store{
  margin: 0 auto;
}
    

  /* ipad air */
  @media screen and (max-width:819px){
    .notice, .special{}

  }
}