@charset "utf-8";

.ad_contents {
  padding: 0 25px;
  padding-top: 50px;
  padding-bottom: 100px;
}
.cont_tit {
  padding-bottom: 60px;
  text-align: center;
}
.sub {
  padding-top: 6px;
}
.cont_tit_img {
  display: flex;
  align-items: center;
  margin-top: 20px;
  max-height: 140px;
  overflow: hidden;
}
.cont_tit_img > img {
  width: 100%;
  object-fit: cover;
}


/* 프로모션 */
.promotion_list {
  display: block;
}
.promotion_list li {
  margin: 0;
}
.promotion_tab {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid var(--black);
}
.promotion_tab li {
  text-align: center;
  width: 50%;
  padding: 15px 20px;
  font-size: 0.75rem;
  cursor: pointer;
  border-bottom: none;
  box-sizing: border-box;
  color: #a4a4a4;
}
.promotion_tab li.on {
  border-bottom: 3px solid var(--black);
  color: var(--black);
}
.promotion_tab li > span {
  display: inline-block;
  font-size: 6px;
  padding: 0 6px;
}
.promotion_list .tab_cont_img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}
.promotion_list .tab_cont_img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promotion_list .tab_cont_text {
  margin-top: 20px;
}
.promotion_list .tab_cont_text .tit {
  font-size: 14px;
}
.promotion_list .tab_cont_text .sub {
  padding-top: 6px;
  font-size: 12px;
}
.promotion_tab_contents {
  display: none;
}
.promotion_tab_contents.on {
  display: block;
}
.promotion_tab_contents li {
  padding: 30px 0;
}
.promotion_tab_contents li:last-child {
  padding-bottom: 0;
}
.promotion_list .tab_cont_img .end_dim {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}
.promotion_list .tab_cont_img .end_dim p {
  text-align: center;
  color: var(--white);
  font-size: 18px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

/* 오너스 */
.cont_tit.owners .cont_tit_text {
  margin-top: 22px;
  text-align: left;
}
.owners_list li {
  padding: 30px 0;
}
.owners_list li:last-child {
  padding-bottom: 0;
}
.owners_list li > img {
  width: 100%;
}
.owners_list .cont_text {
  margin-top: 22px;
}

/* 프로모션 종료 팝업 */
.pop_dim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}
.pop_wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1001;
  transform: translate(-50%, -50%);
  width: 90%;
  padding: 30px 0;
  background: var(--white);
  text-align: center;
}
.pop_wrap .pop_text {
  font-size: 14px;
  padding: 30px 0 40px 0;
}
.pop_wrap .close_btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.pop_dim.hide , .pop_wrap.hide {
  display: none;
}

/* 태블릿 이미지 사이즈 */
@media screen and (min-width: 751px) {
  .cont_tit_img {
    max-height: 210px;
  }

}

/* 웹 반응형 */
@media screen and (min-width: 1025px) {
    .ad_contents {
      max-width: 1460px;
      margin: auto;
      padding: 0 60px;
      padding-top: 50px;
      padding-bottom: 100px;
    }
    
    .cont_tit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 60px;
      padding-bottom: 80px;
      text-align: left;
    }
    .cont_tit .tit {
      font-size: 36px;
    }
    .cont_tit .sub {
      padding-top: 15px;
    }
    .promotion_list .sub {
      font-size: 18px;
    }
    .cont_tit_img {
      width: 50%;
      max-height: 240px;
    }

    /* 프로모션 */
    .promotion_tab {
      gap: 40px;
    }
    .promotion_tab li {
      width: auto;
      max-width: 280px;
    }
    .promotion_tab li:hover {
      color: var(--gray2);
      border-bottom: 3px solid var(--gray3);
    }
    .promotion_tab_contents ul {
      display: flex;
      gap: 2%;
      flex-wrap: wrap;
    }
    .promotion_tab_contents li {
      width: 32%;
    }
    .promotion_list .tab_cont_text .tit {
      font-size: 20px;
    }

    /* 프로모션 종료팝업 */
    .pop_wrap {
      max-width: 450px;
    }
    .pop_wrap .pop_text {
      font-size: 16px;
      padding: 30px 0 40px 0;
    }

    /* 오너스 */
    .cont_tit.owners {
      flex-direction: row-reverse;
    }
    .owners_list ul {
      display: flex;
      justify-content: space-between;
      gap: 2%;
      margin-top: 30px;
    }
    .owners_list li {
      width: 32%;
    }
    .owners_list li > img {
      width: 100%;
    }
    .owners_contents .cont_tit {
      flex-direction: row-reverse;
    }
    .owners_contents .cont_tit_img {
      margin-top: 20px;
    }
    .owners_list .tit {
      font-size: 18px;
    }
    .owners_list .sub {
      font-size: 14px;
    }
    .owners_list .sub br {
      display: none;
    }
    
}