/**
 * pages/hanmacwednesday.css — 수요한맥회 (/hanmacwednesday/*) 전용
 * ------------------------------------------------------------------
 * 페이지에서 $pageCSS = ['hanmacwednesday']; 선언 시 layoutHeader 가 자동 로드.
 *
 * 사용 페이지:
 *   - hanmacwednesday/hanmac-watcha.php
 *   - hanmacwednesday/randomword.php
 *
 * 이전: pc.css 882~965 (1200px @media + 본문) → 통합 (2026-06-09).
 *       Phase A 에서 누락 삭제된 본문 git HEAD 에서 복원.
 */

#hanmacwednesday {
  text-align: center;
  color: #fff;
  /* padding-top: 90px; */
}

/*#hanmacwednesday p, #hanmacwednesday span, #hanmacwednesday a { font-weight: normal; } */
#hanmacwednesday section {
  padding: 110px 0;
}

#hanmacwednesday .inner {
  max-width: 1200px;
  margin: 0 auto;
}

#hanmacwednesday #champain_kv {
  padding: 0;
}

#champain_kv h2.title p {
  font-size: 48px;
}

#champain_kv h2.title strong {
  font-size: 64px;
}

#champain_kv h2.title strong span {
  background: linear-gradient(to top right, #dcbe89, #8e6d4b);
  color: transparent;
  -webkit-background-clip: text;
}

#kv_contents {
  background: linear-gradient(
    180deg,
    rgb(0 48 29) 0%,
    rgb(0 48 29) 46%,
    rgba(34, 34, 34, 1) 100%
  );
}

#kv_contents .mo {
  display: none;
}

#kv_contents p {
  font-size: 36px;
}

#kv_contents h1 {
  margin: 2vh 0;
}

#kv_contents p:nth-child(2) {
  padding: 24px 0;
}

#kv_contents p:last-child {
  padding-bottom: 0;
}

#kv_contents h1 strong {
  text-shadow: 0 0 7px #ffa851;
}

#kv_contents .btn {
  padding-top: 70px;
}

#kv_contents .btn a {
  display: flex;
  align-items: center;
  background: #fff;
  font-weight: 500;
  line-height: 100%;
  font-size: 36px;
  color: #014d39;
  border-radius: 999px;
  padding: 26px 46px;
}

#kv_contents .btn a img.kv_contents_btn_icon {
  width: 28px;
  margin-left: 10px;
}

#hm_contents {
  background: #222;
}

#hm_contents:last-child {
  padding: 0 0 212px 0;
}

#hm_contents h2.title {
  display: inline-block;
  font-weight: 400;
  border: 1px solid transparent;
  border-radius: 999px;
  background-image: linear-gradient(#222, #222),
    linear-gradient(to bottom right, #d19f58, #ffffff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-size: 40px;
  padding: 8px 80px;
}

#hm_contents h2.title .title_bg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
}

#hm_contents h2.title .title_bg .title_logo {
  display: inline-flex;
  align-items: center;
}

#hm_contents h2.title .hanmac {
  color: #d19f58;
  font-weight: 600;
  padding-right: 8px;
  padding-bottom: 9px;
}

#hm_contents h2.title .hanmac img {
  width: auto;
  height: 40px;
}

#hm_contents:last-child h2.title .hanmac {
  padding-right: 0;
}

#hm_contents h2.title .watcha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

#hm_contents h2.title .watcha img {
  display: inline-block;
  width: 125px;
}

#hm_contents p.sub_title {
  font-size: 32px;
  padding-top: 40px;
  overflow: hidden;
}

#hm_contents .link {
  font-size: 24px;
  word-break: keep-all;
  padding-bottom: 70px;
}

#hm_contents .link span {
  vertical-align: bottom;
}

#hm_contents .img.qr img {
  width: 260px;
  height: auto;
  margin: 40px 0;
}

.movie_slide {
  width: 100%;
  overflow: hidden;
}

#hm_contents .movie_slide .movie_box {
}

#hm_contents .movie_slide .movie_box:last-child {
  margin-right: 0;
}

#hm_contents .movie_slide .movie_category {
  font-size: 24px;
  font-weight: 400;
  border: 3px solid #383838;
  border-radius: 12px;
  padding: 20px 30px;
  line-height: 100%;
  margin-bottom: 20px;
}

#hm_contents .movie_slide .movie_box.on .movie_category {
  font-size: 28px;
  color: #ff0559;
  border-color: #ff0559;
}

#hm_contents .movie_slide .movie_box .img {
  /*height:543px; background: #fff url(../../images/wednesday/kv-mo.webp) no-repeat center center; background-size: cover; white-space: pre; */
  position: relative;
}

#hm_contents .movie_slide .movie_box.on .img {
  /* height:592px; */
}

/* #hm_contents .movie_slide .movie_box.next .img.img-next::after { 
 content: "COMING SOON"; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 width: 100%; 
 height: 100%; 
 background: rgba(0, 0, 0, 1); 
 font-weight: bold; 
 color: #fff; 
 font-size: 34px; 
 text-align: center; 
 position: absolute; 
 left: 0; 
 top: 0; 
 white-space: pre; 
 z-index: 5; 
}*/

#hm_contents .movie_slide .movie_name {
  font-size: 24px;
  font-weight: normal;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  margin-top: 20px;
  padding: 18px 0;
}

#hm_contents .movie_slide .movie_box.on .movie_name {
  font-size: 25px;
  border-color: #fff;
}

#hm_contents .movie_slide .mobile {
  display: none;
}

#hm_contents .movie_slide .date {
  display: inline-block;
  text-align: left;
  margin-top: 60px;
}

#hm_contents .movie_slide .date span {
  font-size: 20px;
}

#hm_contents .movie_slide .date div:first-child {
  margin-bottom: 10px;
}

#hm_contents .movie_slide .date span.title {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  width: 172px;
  height: 42px;
  line-height: 100%;
  margin-right: 20px;
}

#hm_contents .swiper-button-prev,
#hm_contents .swiper-button-next {
  width: 26px;
  height: 41px;
  background: url(../../images/wednesday/hm_navigation_prev.webp) no-repeat
    center center;
  background-size: contain;
}

#hm_contents .swiper-button-next {
  background-image: url(../../images/wednesday/hm_navigation_next.webp);
}

#hm_contents .swiper-button-prev:after,
#hm_contents .swiper-rtl .swiper-button-next:after,
#hm_contents .swiper-button-next:after,
#hm_contents .swiper-rtl .swiper-button-prev:after {
  display: none;
}

#hm_contents .contents_inner {
  position: relative;
}

#hm_contents .contents_inner::after {
  content: "";
  display: block;
  width: 1063px;
  height: 102px;
  background: url(../../images/wednesday/hanmac-watcha-wednesday-content-background-02.webp)
    no-repeat center center;
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
}

#hm_contents .img.hm_wed {
  margin: 20px 0;
}

#hm_contents .img.hm_wed img {
  width: 296px;
  height: auto;
}

#hm_contents .insta_slide {
  position: relative;
}

#hm_contents .insta_slide .swiper {
  width: 960px;
  height: auto;
}

#hm_contents .insta_slide .swiper .swiper-wrapper {
  margin: 0 auto;
  height: auto;
}

#hm_contents .insta_slide .swiper .swiper-slide {
}

#hm_contents .insta_slide .swiper-pagination {
  position: relative;
  margin: 20px 0;
}

#hm_contents .insta_slide .swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
}

#hm_contents
  .insta_slide
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  background: #fff;
  border-radius: 999px;
}

#hm_contents .insta_slide .swiper-button-prev,
#hm_contents .insta_slide .swiper-button-next {
  color: #fff;
  position: static;
  margin-top: 0;
}

#hm_contents .insta_slide .navigation-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -60%);
}

#hm_contents:last-child {
  background: linear-gradient(
    0deg,
    rgba(1, 77, 57, 1) 0%,
    rgba(34, 34, 34, 1) 51%
  );
}

#hm_contents .contents_inner {
  background: url(../../images/wednesday/hanmac-watcha-wednesday-content-background-01.webp)
    no-repeat center bottom;
}

#hm_contents .swiper-pagination-bullet-active {
  background: #fff !important;
}

#hm_contents .movie .swiper {
  width: 960px;
  /* height: auto; */
  height: 665px;
}
#hm_contents .movie .swiper .swiper-wrapper {
  margin: 0 auto;
  height: auto;
}


@media (max-width: 1200px) {
  #hanmacwednesday .inner { padding: 0 2%; }
  #hm_contents .movie_slide .movie_box .img { height: 0; padding-bottom: 140%; }
  #hm_contents .movie_slide .movie_box.on .img { height: 0; }
  #hm_contents .contents_inner::after { width: 100%; }
  #hm_contents .insta_slide .swiper { width: 90%; }
}

/* ══════════════════════════════════════════════════════════════════════
 * Responsive — tablet.css/mobile.css 에서 이전 (2026-06-09)
 * ══════════════════════════════════════════════════════════════════════ */

@media all and (max-width: 1024px) {
    #hanmacwednesday {
        /* padding-top: 53px; */
    }

    #kv_contents h1 {
        font-size: 26px;
    }

    #kv_contents p {
        font-size: 26px;
    }

    #kv_contents p strong {
        font-size: 30px;
    }

    #kv_contents p:nth-child(2) {
        padding: 22px 0;
    }

    #kv_contents .btn {
        padding-top: 50px;
    }

    #kv_contents .btn a {
        font-size: 28px;
        padding: 22px 44px;
    }

    #kv_contents .btn a img.kv_contents_btn_icon {
        width: 24px;
    }

    #hanmacwednesday section {
        padding: 100px 0;
    }

    #hm_contents h2.title .watcha img {
        width: 110px;
    }

    #hm_contents p.sub_title {
        font-size: 24px;
        padding-top: 30px;
    }

    #hm_contents .link {
        max-width: 480px;
        margin: 0 auto;
    }

    #hm_contents .link span:first-child {
        display: block;
    }

    #hm_contents .movie_slide .movie_box {
        margin-right: 1.5%;
    }

    #hm_contents .movie_slide .movie_box .movie_category {
        font-size: 20px;
        padding: 16px 30px;
    }

    #hm_contents .movie_slide .movie_box.on .movie_category {
        font-size: 24px;
    }

    #hm_contents .movie_slide .movie_box:not(.on) .img::after {
        font-size: 26px;
    }

    #hm_contents .movie_slide .movie_box .movie_name {
        font-size: 20px;
    }

    #hm_contents .movie_slide .movie_box.on .movie_name {
        font-size: 24px;
        padding: 14px 0;
    }

    #hm_contents .movie_slide .date {
        margin-top: 40px;
    }
}

@media all and (max-width: 768px) {
    #hanmacwednesday section {
        padding: 90px 0;
    }

    #kv_contents .inner {
    }

    #kv_contents .mo {
        display: block;
    }

    #kv_contents p {
        font-size: 30px;
    }

    #kv_contents h1 {
        font-size: 30px;
    }

    #kv_contents p strong {
        font-size: 28px;
    }

    #hanmacwednesday #hm_contents {
        padding-top: 0;
        padding-bottom: 120px;
    }

    #hm_contents h2.title {
        width: 100%;
        font-size: 38px;
        font-weight: 500;
        background: none;
        padding: 0 10px;
    }

    #hm_contents h2.title .title_logo {
        display: block;
    }

    #hm_contents h2.title .watcha {
        vertical-align: text-top;
        padding-left: 4px;
    }

    #hm_contents h2.title .watcha img {
        width: 125px;
    }

    #hm_contents p.sub_title {
        width: 420px;
        font-size: 28px;
        padding: 60px 0 30px;
        margin: 0 auto;
    }

    #hm_contents .link {
        max-width: 480px;
        padding: 0 0 60px;
        margin: 0 auto;
    }

    #hm_contents .link a:hover {
        background: transparent;
        color: #fff;
        transition: none;
    }

    #hm_contents .movie_slide .inner .pc {
        display: none;
    }

    #hm_contents .movie_slide .movie.mobile {
        display: block;
        position: relative;
    }

    #hm_contents .movie_slide .movie.mobile .movie_swiper {
        overflow: hidden;
    }

    #hm_contents .movie_slide .movie.mobile .movie_swiper .swiper-slide {
        opacity: 0.7;
    }

    #hm_contents
        .movie_slide
        .movie.mobile
        .movie_swiper
        .swiper-slide.swiper-slide-active {
        opacity: 1;
    }

    #hm_contents .movie_slide .movie.mobile .movie_swiper .swiper-slide .img {
        height: auto;
        background: #fff;
        position: relative;
    }

    #hm_contents
        .movie_slide
        .movie.mobile
        .movie_swiper
        .swiper-slide
        .movie_category {
        font-size: 32px;
        border-radius: 12px;
        margin-bottom: 32px;
    }

    #hm_contents
        .movie_slide
        .movie.mobile
        .movie_swiper
        .swiper-slide.on
        .movie_category {
        border-color: #ff0559;
        color: #ff0559;
    }

    #hm_contents .movie_slide .movie_name {
        font-size: 32px;
    }

    #hm_contents .movie_slide .date {
        font-size: 24px;
    }

    #hm_contents .movie_slide .date div {
        font-size: 24px;
    }

    #hm_contents .movie_slide .date span.title {
        width: 216px;
        height: 55px;
    }

    #hm_contents .movie .swiper-pagination {
        position: static;
        margin-top: 40px;
    }

    #hm_contents .movie .swiper {
        width: 960px;
        height: auto;
        /* height: 665px; */
    }

    #hanmacwednesday #hm_contents .swiper-pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background: rgba(255, 255, 255, 0.5);
        margin: 0 4px;
    }

    #hanmacwednesday
        #hm_contents
        .swiper-pagination
        .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 40px;
        background: #fff;
        border-radius: 999px;
    }

    #hm_contents .movie .swiper-button-prev,
    #hm_contents .movie .swiper-button-next {
        color: #fff;
        position: static;
        margin-top: 0;
    }

    #hm_contents .movie .navigation-wrapper {
        display: flex;
        justify-content: space-between;
        width: 84%;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
    }

    #hm_contents:last-child .inner {
        padding: 0;
    }

    #hm_contents .insta_slide .swiper {
        width: 100%;
    }

    #hm_contents .insta_slide .navigation-wrapper {
        display: none;
    }

    #hm_contents .insta_slide .swiper-pagination {
        margin: 40px 0 0;
    }

    #hm_contents .contents_inner {
        background: none;
    }

    #hm_contents .contents_inner::after {
        display: none;
    }
}

@media all and (max-width: 512px) {
    #hanmacwednesday section {
        padding: 30px 0 60px;
    }

    #hm_contents:last-child {
        padding-bottom: 130px;
    }

    #hanmacwednesday .inner {
        padding: 0 4%;
    }

    #hanmacwednesday #hm_contents {
        padding: 8vh 0;
        /* padding-top: 0; */
    }

    #hanmacwednesday #hm_contents .inner {
        padding: 0 4%;
    }

    #hanmacwednesday #hm_contents .insta_inner .inner {
        padding: 0;
    }

    #kv_contents p {
        font-size: 16px;
    }

    #kv_contents p:nth-child(2) {
        padding: 10px 0;
    }

    #kv_contents h1 {
        font-size: 1rem;
        margin: 2vh 0;
    }

    #kv_contents h1 strong {
        font-size: 1rem;
        padding: 1vh 0;
    }

    #kv_contents .btn {
        padding-top: 30px;
    }

    #kv_contents .btn a {
        font-size: 14px;
        padding: 11px 22px;
    }

    #kv_contents .btn a img.kv_contents_btn_icon {
        width: 12px;
        margin-left: 6px;
    }

    #hm_contents h2.title {
        font-size: 20px;
    }

    #hm_contents h2.title .hanmac {
        padding-bottom: 3px;
    }

    #hm_contents h2.title .hanmac img {
        height: 34px;
    }

    #hm_contents h2.title .watcha img {
        width: 100px;
    }

    #hm_contents p.sub_title {
        width: 300px;
        font-size: 14px;
        padding: 30px 0 15px;
    }

    #hm_contents .link {
        max-width: 220px;
        font-size: 12px;
        padding-bottom: 30px;
    }

    #hm_contents .link a {
        font-size: 12px;
        border-radius: 4px;
        padding: 4px 10px;
        margin: 4px 4px 0 0;
    }

    #hm_contents .img.qr img {
        width: 160px;
        margin: 16px 0;
    }

    #hm_contents .movie .swiper {
        width: auto;
    }

    #hm_contents
        .movie_slide
        .movie.mobile
        .movie_swiper
        .swiper-slide
        .movie_category {
        font-size: 16px;
        font-weight: 500;
        border-radius: 6px;
        padding: 14px 30px;
        margin-bottom: 16px;
    }

    #hm_contents
        .movie_slide
        .movie.mobile
        .movie_swiper
        .swiper-slide:not(.on)
        .img::after {
        font-size: 20px;
    }

    #hm_contents .movie_slide .movie_name {
        font-size: 16px;
        font-weight: 500;
        padding: 14px 0;
    }

    #hm_contents .swiper-button-prev,
    #hm_contents .swiper-button-next {
        width: 14px;
        height: 22px;
    }

    #hm_contents .movie .swiper-pagination {
        margin-top: 20px;
    }

    #hm_contents .movie .navigation-wrapper {
        width: 82%;
    }

    #hm_contents .hm-wc-slide .movie .navigation-wrapper {
        top: 42%;
    }

    #hanmacwednesday
        #hm_contents
        .swiper-pagination
        .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 20px;
    }

    #hanmacwednesday #hm_contents .swiper-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 2px;
    }

    #hm_contents .movie_slide .date {
        margin-top: 30px;
    }

    #hm_contents .movie_slide .date span {
        font-size: 12px;
        font-weight: 400;
    }

    #hm_contents .movie_slide .date span.title {
        width: 108px;
        height: 28px;
        font-weight: 400;
        margin-right: 12px;
    }

    #hm_contents .img.hm_wed {
        margin: 10px 0;
    }

    #hm_contents .img.hm_wed img {
        width: 160px;
    }

    #hanmacwednesday .cn-n span {
        font-weight: bold;
    }

    #hm_contents .view_more {
        display: inline-block;
        background: #fff;
        border-radius: 4px;
        margin-top: 30px;
    }

    #hm_contents .view_more a {
        display: flex;
        align-items: center;
        color: #014d39;
        font-size: 14px;
        font-weight: 400;
        padding: 10px 17px;
    }

    #hm_contents .view_more img {
        width: 6px;
        margin-left: 8px;
    }
}