@charset "utf-8";
:root {
   --color-jp: #034ea2;
   --color-ch: #db0f19;
   --swiper-pagination-color: #fff;
}
html,
body {
   height: 100%;
}
.front {
   display: flex;
   width: 100%;
   height: 100%;
   background: gray;
}
.front > div {
   width: 50%;
   flex-grow: 1;
   flex-shrink: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.front .left {
   background: var(--color-jp);
}
.front .right {
   background: var(--color-ch);
}

.front .bx {
   padding: 20px 0 30px;
   text-align: center;
}
.front h2 {
   font-size: 0;
   text-align: center;
}

.card .text {
   position: relative;
   color: #fff;
}
.card .thumbnail {
   margin-top: 40px;
   font-size: 0;
   border-radius: 8px;
   overflow: hidden;
}
.front .card a .thumbnail {
   transition-duration: 0.2s;
}

.front .card .text:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, calc(12px + 18px));
   border: 8px solid transparent;
   border-top-color: #fff;
   border-left-width: 9px;
   border-right-width: 9px;
   border-radius: 8px;
}
.front .card .thumbnail {
   overflow: visible;
}
.front .card .thumbnail img {
   border-radius: 8px;
}

.front ul {
   margin-top: 56px;
}
.front .btn_bot {
   display: inline-block;
   height: 80px;
   min-width: 600px;
   margin-top: 80px;
   font-size: 40px;
   background: #fff;
   border: 2px solid #000;
   border-radius: 16px;

   box-shadow: 0px 5px 5px #000;
}
.front .btn_bot:hover {
   transform: translateY(3px);
   box-shadow: 0px 1px 3px #000;
}
.front .btn_bot a {
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: center;
   font-family: var(--theme-font-700);
}
.front .btn_bot a:after {
   content: '▶';
   line-height: 1;
   margin-top: -3px;
   margin-left: 10px;
   font-size: 20px;
}
.front .left .btn_bot a {
   color: #0064d4;
}
.front .right .btn_bot a {
   color: #e30b16;
}

/* 모바일 */
@media screen and (max-width: 768px) {
   .front .swiper {
      width: 100%;
      overflow: visible;
   }
   .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 320px !important;
   }
   .swiper-3d .swiper-slide {
      overflow: hidden;
      padding: 20px;
      background-image: none;
      border-radius: 20px;
   }
   .front .swiper .swiper-pagination {
      top: auto;
      bottom: -25px;
   }

   .front .card .thumbnail img {
      width: calc(180px / 3 * 2);
   }

   .front {
      flex-direction: column;
      height: auto;
      min-height: 100%;
   }
   .front > div {
      width: 100%;
      overflow: hidden;
   }

   .front h2 img {
      height: calc(80px / 3 * 2);
   }
   .front ul {
      margin-top: calc(56px / 2);
      margin-top: 20px;
   }

   .front .btn_bot {
      height: calc(80px / 3 * 2);
      margin-top: calc(80px / 2);
      /* min-width: calc(600px / 3 * 2); */
      /* font-size: calc(40px / 3 * 2); */

      min-width: calc(600px / 2);
      font-size: calc(40px / 2);
   }
   .front .btn_bot a:after {
      margin-top: 0;
      margin-left: calc(10px / 3 * 2);
      font-size: calc(20px / 3 * 2);
   }
   /* max-width: 768px */
}

/* 데스크탑 */
@media screen and (min-width: 769px) {
   .front .category ul {
      display: flex;
      gap: 20px;
   }
   .front .card a:hover .thumbnail {
      transform: scale(1.1);
   }
   /* min-width: 769px */
}