{% load static modal_tags %}

<style>
/*--------------------------------------------------------------
# MyModal Section
--------------------------------------------------------------*/
.mymodal {
  width: 100%;
  min-height: 70vh;
  {% if popup.bg %}
    background: url("{{ popup.bg.url }}") top center;
  {% else %}
    background: url("{% static 'modal_hj3415/img/default_modal_bg.jpg' %}") top center;
  {% endif %}
  background-size: cover;
  position: relative;
  padding: 120px 0;
  z-index: 3;
}

@media (min-width: 1034px) {
  .mymodal:after {
    position: absolute;
    content: "";
    width: 40%;
    background: #1b2f45;
    top: 0;
    bottom: 0;
  }
}

.mymodal:before {
  position: absolute;
  content: "";
  background: rgba(27, 47, 69, 0.6);
  inset: 0;
}

@media (max-width: 1034px) {
  .mymodal:before {
    background: rgba(27, 47, 69, 0.7);
  }
}

.mymodal .container {
  z-index: 1;
}

/* 배경화면이 커지는 것을 막기위해 주석처리
@media (min-width: 1365px) {
  .mymodal {
    background-attachment: fixed;
  }
}
*/

.mymodal h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  font-family: 'MaruBuri', cursive;
}

.mymodal blockquote {
  color: #fff;
  padding-left: 20px;
  font-size: 15px;
  font-family: 'MaruBuri', serif;
  border-left: 2px solid #56b8e6;
  margin: 40px 0;
}

.mymodal .btn-get-started {
  text-decoration: none;
  font-family: 'Nanum Square', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  transition: 0.5s;
  color: #fff;
  background: #56b8e6;
}

.mymodal .btn-get-started:hover {
  text-decoration: none;
  background: rgba(86, 184, 230, 0.8);
}

.mymodal .btn-watch-video {
  text-decoration: none;
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.mymodal .btn-watch-video i {
  text-decoration: none;
  color: #56b8e6;
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.mymodal .btn-watch-video:hover {
  color: #fff;
}

.mymodal .btn-watch-video:hover i {
  color: #82cbed;
}

@media (max-width: 640px) {
  .mymodal h2 {
    font-size: 36px;
    line-height: 1;
  }

  .mymodal .btn-get-started,
  .mymodal .btn-watch-video {
    font-size: 13px;
  }
}
</style>

<!-- ======= MyModal Section ======= -->
<section id="{{ section_id }}" class="mymodal d-flex align-items-center">
  <div class="container">
    <div class="row">
      <div class="col-xl-6">
        <h2 data-aos="fade-up">{{ popup.h2|sanitize_modal_html }}</h2>
        <blockquote data-aos="fade-up" data-aos-delay="100">
          <p>{{ popup.p|sanitize_modal_html }}</p>
        </blockquote>
        <div class="d-flex" data-aos="fade-up" data-aos-delay="200">
          {% with safe_link=popup.link_url|sanitize_modal_url %}
          {% if safe_link %}
          <a href="{{ safe_link }}" class="btn-get-started">{{ popup.link_text|sanitize_modal_html }}</a>
          {% endif %}
          {% endwith %}
          {% with safe_video_link=popup.link_video_url|sanitize_modal_url %}
          {% if safe_video_link %}
          <a href="{{ safe_video_link }}" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>{{ popup.link_video_text|sanitize_modal_html }}</span></a>
          {% endif %}
          {% endwith %}
        </div>
      </div>
    </div>
  </div>
</section><!-- End MyModal Section -->