@charset "utf-8";
/*
Common Layout CSS _ 15.05.18
*/

/*common*/
.inner {
  max-width: 75rem; 
  width: 100%;
  position:relative;
  margin: 0 auto;
}

.pdinner {
  max-width: 75rem;
  padding:0 3%;
  position:relative;
  margin: 0 auto;
}

.bgBlue {
  background-color: #0058A5
}

.bgGreen {
  background-color: #00964F
}

.bgOrange {
  background-color: #E84E0F
}

html {
  background-color: #fff;
}

/*
body, html{font-size:16px;}
*/

.wrap{
  max-width: 125rem;
  min-width: 20rem;
  width:100%;
  margin: 0 auto;
  position:relative;
  overflow:hidden;
}

  /*메인 필터 갤러리 */
  .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 4.5em !important;
    max-width: 75rem;
    margin: auto;
  }

  .grid .item {
    padding: 0 0 0.8em 0;
    position: relative;
    background: #000;
    margin: 0.5rem 0.2rem;
  }

  .grid .item.none {
    display: none !important;
  }

  .grid .item, 
  .grid .grid-sizer {
    width:calc(25% - 0.8em);
  }

  .grid .item-inner {
    color: white;
    position: relative;
  }

  /*
  .grid .item-inner::after {
    content: '';
    position: absolute;
    background-color: #24221E;
    border-radius: 0.19rem;
    top: 0.44rem;
    left: 0.44rem;
    width: 100%;
    height: 12.7em;
    z-index: -1;
  }

  .grid .item-inner:hover::after,
  .grid .item-inner.on::after {
    top: -7px;
    left: -7px;
    width: calc(100% + 0.88rem);
    height: 222px;
    transition: all .3s ease;
  }
  */

  .grid .thumnail {
    border-radius: 0.19rem;
    overflow: hidden;
    height: 10.31rem;
    display: block;
  }

  .grid .thumnail img {
    width: 100%;
  }

  .grid .info {
    padding: 0.63rem 0.63rem 0 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .grid .item-inner:hover .info {
    transition: all .3s ease-in;
  }

  .grid .info .area::after {
    display: block;
    width: 3.44rem;
    height: 1.25rem;
    text-align: center;
    border-radius: 1.88rem;
    font-size: 0.81rem;
    line-height: 1.25rem;
  }

  .grid .changwon .area::after {
    content: '창원';
    background-color: #0058A5;
  }

  .grid .masan .area::after {
    content: '마산';
    background-color: #00964F;
  }

  .grid .jinhae .area::after {
    content: '진해';
    background-color: #E84E0F;
  }

  .grid .info .icon.vr::after {
    content: '';
    position: absolute;
    right: 0.56rem;
    bottom: 0.13rem;
    width: 1.69rem;
    height: 1.06rem;
    background-size: 100% auto !important;
    background: url(../img/icon_vr.svg) no-repeat top center;
  }

  .grid .info .icon.img::after {
    content: '';
    position: absolute;
    right: 0.56rem;
    bottom: 0.06rem;
    width: 1.63rem;
    height: 1.19rem;
    background-size: 100% auto !important;
    background: url(../img/icon_img.svg) no-repeat center center;
  }

  .grid-item { 
    width: 25%;
  }

  .grid .item-inner .description {
    position: absolute;
    width: 100%;
    padding: 1.56rem 1.25rem;
    border-radius: 0.19rem 0.19rem 0 0;
    background: linear-gradient(-180deg, rgba(36,34,30,0.6) 0%, rgba(36,34,30,1) 50%);
    opacity: 0;
    height: 4.06rem;
    top: 60%;
    transition: 0.5s all ease-out;
  }

  .grid .item-inner:hover .description {
    opacity: 1;
    transition-delay: 0.2;
    top: 53%;
  }

  .grid .description p {
    font-size: 0.69rem;
    color: #DCDCDC;
    position: relative;
    padding-left: 1.25rem;
    word-break: keep-all;
  }

  .grid .description p::before {
    content: '';
    width: 0.88rem;
    height: 0.88rem;
    background-size: 100% auto !important;
    background: url(../img/map.svg) no-repeat center center;
    position: absolute;
    left: 0;
  }

  .grid .description a {
    width: 5.63rem;
    padding: 0.31rem 0.63rem;
    font-size: 0.63rem;
    border: 0.06rem solid #E3E3E3;
    border-radius: 0.19rem;
    display: block;
    margin: auto;
    position: relative;
  }

  .grid .description a::after {
    content: '';
    width: 0.69rem;
    height: 0.69rem;
    background-size: 100% auto !important;
    background: url(../img/vr_arrow.svg) no-repeat center center;
    position: absolute;
    right: 0.44rem;
    top: 0.38rem;
  }

  .view {
    display: none !important;
  }

  .no-img {
    display: none
  }
  
  .slider.vr {
    display: none;
  }
  
  .view.img .slider {
    display: block;
  }
  
  .slider {
    display: flex;
    justify-content: space-between;
  }

  @media all and (max-width:1024px) {
    .grid {
      padding: 0 2em;
    }
  }

  @media all and (max-width:1200px) {
    .grid .item,
    .grid .grid-sizer {
      width: calc(100% / 3 - 0.8em);
    }
  }


  @media all and (max-width:768px) {
    .grid .item,
    .grid .grid-sizer {}
    
    .grid .thumnail {
      height: 8.44rem;
    }

    .grid .info {
      padding: 0.63rem 0.63rem 0 1.25rem; 
      font-size: 0.8rem;
    }
    
    .grid .item-inner::after {
      height: 10.31rem;
    }
    .grid .item-inner:hover::after,
    .grid .item-inner.on::after {
      height: 11.88rem
    }
    
    .grid .item-inner .description {
      height: 3.13rem;
      padding: 0.63rem 1.25rem;
    }

  }

  @media all and (max-width:425px) {
    .grid {
      padding: 0 0.5em;
    }
    
    .grid .info {
      padding: 0.44rem 0.56rem 0 1rem
    }

    .grid .item-inner:hover .info {
      padding: 0.31rem 0.56rem 0 1rem
    }

    .grid .item,
    .grid .grid-sizer {
          width: calc(100% / 2);
          padding: 0.5em;
    }

    .grid .thumnail {
      height: 6.56rem;
    }

    .grid .item-inner::after {
      height: 7.94rem;
      top: 0.56rem;
      left: 0.25rem;
    }

    .grid .info .area::after {
      width: 2.38rem;
      height: 1.13rem;
      top: -0.06rem;
      position: relative;
      font-size: 0.75rem;
      line-height: 1.19rem;
    }

    .grid .item-inner:hover::after, 
    .grid .item-inner.on::after {
      height: 8.88rem;
    }
    .grid .item-inner .description {
      height: 2.69rem;
      padding: 0.44rem 1.25rem;
      top: 48% !important;
    }
    .grid .info .icon.vr::after {
      bottom: 0rem;
      width: 1.56rem;
    }
    .grid .info .icon.img::after{
      bottom: 0rem;
      width: 1.38rem;
    }
  }

  @media all and (max-width:375px) {
    .grid .item-inner .description {
      padding: 0.44rem 0.31rem
    }
  }


  @media all and (max-width:320px) {
    .grid .item-inner .description {
      display: none;
    }
  }


  /**메인 팝업박스 스타일링 **/
  .modaal-container {
    max-width: 106.25rem !important;
    height: 46.88rem !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  .bx-wrapper img {
    width: 100%;
  }

  @media all and (max-width:425px) {
    .modaal-container {
      height: calc(100vh - 10%) !important;
      padding: 0 !important;
    }
  }

  /*푸터*/
  #footer {
    width: 100%;
    background-color: #24221E;
    height: 6.25rem;
    bottom: 0;
    position: fixed;
    z-index: 999;
  }

  .footer_bg {
    position: fixed;
    width: 32em;
    height: 32em;
    right: 0;
    bottom: 0;
    background-size: 100% auto !important;
    background: url(../img/logo_gray.svg) no-repeat center center;
    z-index: -1;
    opacity: 0.03;
  }

  #footer span {
    display: inline-block;
    width: 2.5rem;
    height: 6.25rem;
    float: right;
  }



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

}


@media all and (max-width:1200px) {

}


/*page up*/
#pageup {
  position: fixed; 
  z-index: 999; 
  right: 1%; 
  bottom: 0rem; 
  width: 3.13rem; 
  height: 3.13rem; 
  background-image: url('../img/Htop.png');
  background-repeat: no-repeat;  
  background-position: center center; 
  background-size: 3.13rem 3.13rem; 
  display: none; 
  cursor: pointer; 
  z-index: 4000;
}

@media all and (min-width:1200px) {

  #newspaper{
    width: 6.88rem; 
    height: 6.88rem; 
    left: auto; 
    right: 1%; 
    bottom: 6.88rem
  }
}