@charset "utf-8";

section { font-family: "SUIT"; }

/* m_01 */
.m_01 { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100vh - 115rem); background: url(../../img/jryn_sec1_bg.png) 100% 100% / cover no-repeat; }
.m_01 .cont_wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 100rem; }
.m_01 .cont_wrap .tit_wrap { text-align: center; color: #fff; }
.m_01 .cont_wrap .tit_wrap span { display: block; margin-bottom: 50rem; font-size: 18rem; font-weight: 200; letter-spacing: 4rem; }
.m_01 .cont_wrap .tit_wrap h2 { margin-bottom: 55rem; font-size: 60rem; font-weight: 800; }
.m_01 .cont_wrap .tit_wrap p { font-size: 20rem; font-weight: 200; line-height: 1.5; }

.m_01 .cont_wrap .mouse { text-align: center; }
.m_01 .cont_wrap .mouse figure { width: 25rem; margin: 0 auto 15rem; animation: mouse 1s infinite alternate ease-in-out; }
.m_01 .cont_wrap .mouse p { font-size: 15rem; font-weight: 600; color: #bbbbbb; }

@keyframes mouse {
  0% { transform: translateY(-20%); }
  100% { transform: translateY(20%); }
}


/* m_02 */
.m_02 { padding: 150rem 30rem; }
.m_02 .title { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 100rem; padding: 0 30rem; text-align: center; }
.m_02 .title > span { display: block; margin-bottom: 60rem; font-size: 18rem; letter-spacing: 4rem; }
.m_02 .title h2 { position: relative; margin-bottom: 40rem; font-size: 55rem; font-weight: 800; line-height: 1.3; font-family: "Philosopher"; }
.m_02 .title h2 span { color: #be764e; }
.m_02 .title p { font-size: 20rem; line-height: 1.5; }

.m_02 .tab { display: flex; justify-content: center; align-items: center; margin-bottom: 30rem; }
.m_02 .tab li { padding: 10rem 15rem; font-size: 18rem; transition: 0.5s; cursor: pointer; }
.m_02 .tab li.on { color: #fff; background-color: #be764e; }


.m_02 .tab_content .tab_list { display: flex; align-items: center; flex-wrap: wrap; gap: 40rem; row-gap: 70rem; }
.m_02 .tab_content .tab_list .item { width: calc((100% - 80rem) / 3); cursor: pointer; }
.m_02 .tab_content .tab_list .item .img_wrap { width: 100%; aspect-ratio: 1 / 1; border: 1px solid #e4e4e4; }
.m_02 .tab_content .tab_list .item .txt_wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15rem 20rem; background-color: #e4e4e4; }
.m_02 .tab_content .tab_list .item .txt_wrap strong { display: flex; align-items: center; gap: 5rem; font-size: 20rem; font-weight: bold; }
.m_02 .tab_content .tab_list .item .txt_wrap p { display: block; font-size: 20rem; font-weight: bold; }
.m_02 .tab_content .tab_list .item .txt_wrap .label { padding: 4rem 5rem; font-size: 18rem; font-weight: bold; color: white; background-color: red; border-radius: 3rem; animation: txt_blink 1.5s linear infinite; }

@keyframes txt_blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}


/* slide_wrap */
.slide_wrap { position: fixed; top: 0; left: 0; display: none; justify-content: center; align-items: center; width: 100%; height: 100vh; background-color: #0000005b; z-index: 9999999; }
.slide_wrap.on { display: flex; }
.slide_wrap .machine_slide { display: none; width: 1100rem; height: 500rem; }
.slide_wrap .machine_slide.on { display: block; }
.slide_wrap .machine_slide .slide { position: relative; display: flex; background-color: #fff; }
.slide_wrap .machine_slide .slide > div { width: 50%; height: 100%; }
.slide_wrap .machine_slide .slide .left { padding: 60rem 25rem; }
.slide_wrap .machine_slide .slide .left p { padding-bottom: 15rem; margin-bottom: 100rem; font-size: 16rem; text-align: right; color: #be764e; border-bottom: 1px solid #be764e;; }
.slide_wrap .machine_slide .slide .left h1 { padding-left: 10rem; margin-bottom: 35rem; font-size: 35rem; font-weight: 700; }
.slide_wrap .machine_slide .slide .left span { display: block; padding-left: 10rem; font-size: 20rem; line-height: 1.5; }
.slide_wrap .machine_slide .slide .left span.sep { color: #be764e; }
.slide_wrap .machine_slide .slide .close_btn { position: absolute; top: 35rem; right: 35rem; width: 25rem; height: 25rem; cursor: pointer; }

.slide_wrap .btn { position: absolute; top: 30%; left: 25rem; display: flex; gap: 30rem; }
.slide_wrap .btn img { width: 35rem; height: auto; }
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after { display: none; }
.swiper-button-next, 
.swiper-button-prev { position: static; }



@media screen and (max-width: 768px) {
  .m_02 .tab_content .tab_list .item { width: calc((100% - 40rem) / 2); }

  .slide_wrap .machine_slide { width: 80%; height: unset; aspect-ratio: 1 / 1.1; }
  .slide_wrap .machine_slide .slide { flex-direction: column; }
  .slide_wrap .machine_slide .slide > div { width: 100%; height: 50%; }
  .slide_wrap .machine_slide .slide .left { padding: 30rem 25rem; order: 1; }
  .slide_wrap .machine_slide .slide .left p { margin-bottom: 40rem; }

  .slide_wrap .machine_slide .slide .right { object-position: top center; overflow: hidden; }
  .slide_wrap .machine_slide .slide .right img { height: auto; }
  .slide_wrap .btn { top: 55%; }
}

@media screen and (max-width: 500px) {
  .m_02 .tab_content .tab_list .item .txt_wrap strong { font-size: 18rem; }
  .m_02 .tab_content .tab_list .item .txt_wrap p { font-size: 18rem; }
  .m_02 .tab_content .tab_list .item .txt_wrap .label { font-size: 17rem; }

  .slide_wrap .machine_slide { aspect-ratio: 1 / 1.4; }
}