body {
  min-width: 360px;
  overflow-x: hidden;
}
.for_pc {
  display: block;
}
.for_mo {
  display: none;
}

/* ------------------------------------------------------------------------------- */

/* 메인 비주얼 영역 */
.main-visual-area {
  height: 896px;
  background: url(../../static/images/lottecard_discovery_edition/pattern_1.png) repeat;
  background-size: 272px 272px;
  overflow: hidden;
}
.main-visual-area .line {
  width: 100%;
  height: 1.4px;
  background: #FFE8D6;
  box-shadow: 0px 2.8px 2.8px 0px #000000A6;
}
.main-visual-area .line-1 {
  top: 94.42px;
  left: 0;
  transform: rotate(-1.05deg);
}
.main-visual-area .line-2 {
  top: 501px;
  left: 0;
  transform: rotate(1.05deg);
}
.main-visual-area .img-box-1 {
  width: 443.8px;
  top: 114.8px;
  left: 50%;
  transform: translateX(calc(-50% - 4px));
}
.main-visual-area .img-box-2 {
  width: 240.8px;
  top: 0;
  left: 50%;
  transform: translateX(calc(-50% + 3.5px));
}
.main-visual-area .img-box-2 > .img-box {
  width: 78.4px;
  top: 36.4px;
  left: 77.83px;
}
.main-visual-area .img-box-3 {
  width: 630px;
  top: 154px;
  left: 50%;
  transform: translateX(calc(-50% + 122.5px));
}
.main-visual-area .img-box-4 {
  width: 282.8px;
  top: 525px;
  left: 50%;
  transform: translateX(calc(-50% + 17.5px));
}
.main-visual-area .img-box-5 {
  width: 334.6px;
  top: 282.8px;
  left: 50%;
  transform: translateX(calc(-50% + 1.5px));
}
.main-visual-area .img-box-6 {
  width: 837.64px;
  top: 595.58px;
  left: 50%;
  transform: translateX(calc(-50% - 43px));
}

/* ------------------------------------------------------------------------------- */

/* 카드 영역 */
.card-area {
  width: 100%;
  height: 1145px;
  background: #23232A;
}
.card-area .top-box {
  top: -144px;
  left: 0;
}
.card-area .top-box .bg-box > img {
  height: 388px;
}
.card-area .top-box .text-box {
  top: 90.4px;
  color: #E6E0D9;
  text-shadow: 0px 0px 5.6px 0px #000000BF;
  font-size: 22px;
}
.card-area .top-box .text-box > p {
  line-height: 31px;
}
.card-area .top-box .text-box > p > span {
  line-height: 31px;
  color: #F36B22;
}
.card-area .top-box .text-box > .img-box {
  width: 70px;
  bottom: -9.8px;
  right: 30px;
}
.card-area .img-area {
  width: 701px;
  bottom: 0;
}
.card-area .card-box {
  width: 515px;
  height: 1042px;
  top: 50px;
}
.card-area .card-box .line-box {
  top: 59px;
  left: 44px;
  width: 452px;
}
.card-area .card-box .card {
  width: 252px;
  cursor: pointer;
}
.card-area .card-box .card-1 {
  top: 0;
  left: 131px;
}
.card-area .card-box .card-2 {
  top: 322px;
  left: 0;
}
.card-area .card-box .card-3 {
  top: 295px;
  right: 0;
}
.card-area .card-box .card-4 {
  top: 625px;
  left: 22px;
}
.card-area .card-box .card-5 {
  top: 707px;
  right: 13px;
}
.card-area .card-box .card > .img-box {
  width: 67px;
  top: 125px;
  left: 83px;
}

/* ------------------------------------------------------------------------------- */

/* 모달 영역 */
.modal-area {
  width: 100%;
  height: 100dvh;
  visibility: hidden;
  background: #00000099;
  backdrop-filter: blur(17px);
  transition: all 0.5s;
}
.modal-area.active {
  visibility: visible;
}
.modal-area .modal-box {
  width: 420px;
  height: calc(100dvh - 100px);
  position: relative;
  visibility: hidden;
  transform: translateY(100%);
  transition: all 1s;
  transition-timing-function: cubic-bezier(.44,.05,.14,1.47);
}
.modal-area .modal-box.active {
  visibility: visible;
  transform: translateY(0);
}
.modal-area .modal-box .modal .shadow-box {
  width: 370px;
  height: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.1;
}
.modal-area .modal-box .modal .shadow-box-1 {
  top: 115px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}
.modal-area .modal-box .modal .shadow-box-2 {
  bottom: 139px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}
.modal-area .modal-box .top-box {
  width: 100%;
  height: 73px;
}
.modal-area .modal-box .top-box > .img-box {
  width: 61px;
}
.modal-area .modal-box .modal {
  width: 100%;
  height: calc(100% - 73px);
  border-radius: 14px;
  box-sizing: border-box;
  padding: 42px 25px;
  background: url(../../static/images/lottecard_discovery_edition/pattern_2.png) repeat;
  background-size: 32px 32px;
  box-shadow: 0px 5.6px 19.6px 0px #00000073;
}
.modal-area .modal-box .modal .cnt-box {
  height: calc(100% - 98px);
  overflow-y: auto;
}
.modal-area .modal-box .modal .cnt-box::-webkit-scrollbar {
  width: 10px;
}
.modal-area .modal-box .modal .cnt-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 1400px;
}
.modal-area .modal-box .modal .cnt-box::-webkit-scrollbar-track {
  background: transparent;
}
.modal-area .modal-box .modal .cnt-box .card-img-box {
  width: 175px;
  box-shadow: 0px 2.8px 5.6px 0px #00000099;
  border-radius: 10px;
}
.modal-area .modal-box-1 .modal .cnt-box .card-img-box {
  width: 270px;
}
.modal-area .modal-box .modal .cnt-box .title-box {
  margin-top: 25px;
  background: url(../../static/images/lottecard_discovery_edition/pattern_3.png) repeat;
  border-radius: 75px 75px 0 0;
  box-sizing: border-box;
  padding: 17px 20px;
}
.modal-area .modal-box .modal .cnt-box .title-box .text-img-box {
  height: 78px;
}
.modal-area .modal-box .modal .cnt-box .title-box .text-img-box > img {
  width: auto;
  height: 100%;
  margin: 0 auto;
}
.modal-area .modal-box .modal .cnt-box .title-box > h2 {
  margin-top: 8px;
  font-size: 20px;
  line-height: 31px;
  color: #D9D9D9;
}
.modal-area .modal-box .modal .cnt-box .title-box > h2 > span {
  line-height: 31px;
}
.modal-area .modal-box .modal .cnt-box .title-box > .line {
  width: 100%;
  height: 0.7px;
  background: #D9D9D9;
  opacity: 0.6;
  margin: 8px 0;
}
.modal-area .modal-box .modal .cnt-box .title-box .tag-box {
  gap: 7px;
  flex-wrap: wrap;
}
.modal-area .modal-box .modal .cnt-box .title-box .tag-box > li {
  font-size: 17px;
  line-height: 21px;
  color: #D9D9D9;
}
.modal-area .modal-box .modal .cnt-box .text-wrap {
  box-sizing: border-box;
  padding: 14px 20px;
  gap: 14px;
}
.modal-area .modal-box .modal .cnt-box .text-wrap .text-box > h3 {
  font-size: 20px;
  line-height: 31px;
  color: #222;
  box-sizing: border-box;
  padding: 0 0 3px 0;
  border-bottom: 1px solid rgba(34, 34, 34, 0.6);
}
.modal-area .modal-box .modal .cnt-box .text-wrap .text-box > ul {
  margin-top: 3px;
  gap: 3px;
}
.modal-area .modal-box .modal .cnt-box .text-wrap .text-box > ul > li {
  font-size: 17px;
  line-height: 21px;
  color: rgba(34, 34, 34, 0.86);
}
.modal-area .modal-box .modal .cnt-box .text-wrap .text-box > p {
  margin-top: 3px;
  font-size: 15px;
  line-height: 21px;
  color: rgba(34, 34, 34, 0.6);
}



.modal-area .modal-box .modal .btn-box {
  box-sizing: border-box;
  padding: 34px 0 0 0;
}
.modal-area .modal-box .modal .btn-box > button {
  width: 100%;
  height: 64px;
  background: #000;
  box-shadow: 0px 5.6px 5.6px 0px #00000040;
  border-radius: 5.6px;
  font-size: 22px;
  color: #FFFFFFE0;
}

/* ------------------------------------------------------------------------------- */

/* 이벤트 영역 */
.event-area {
  box-sizing: border-box;
  padding: 44px 0;
  background: url(../../static/images/lottecard_discovery_edition/pattern_1.png) repeat;
  background-size: 272px 272px;
}
.event-area .con {
  padding: 0 16px;
  max-width: 672px;
}
.event-area .bg-box {
  top: -39px;
  left: 0;
}
.event-area .bg-box > img {
  height: 40px;
}
.event-area .wrap {
  border-radius: 5.6px;
  background: url(../../static/images/lottecard_discovery_edition/pattern_2.png) repeat;
  background-size: 32px 32px;
  box-shadow: 0px 2.8px 5.6px 0px #00000073;
}
.event-area .wrap-1 {
  box-sizing: border-box;
  padding: 25px 33px 30px 33px;
}
.event-area .wrap-1 .text-box > .img-box {
  width: 79.6px;
}
.event-area .wrap-1 .text-box > h1 {
  font-size: 20px;
  line-height: 31px;
  margin-top: 11px;
  color: #222;
}
.event-area .wrap-1 .text-box > h2 {
  font-size: 28px;
  line-height: 33.6px;
  color: #222;
}
.event-area .wrap-1 .text-box > h2 > span {
  line-height: 33.6px;
  color: #AF3014;  
}
.event-area .wrap-1 .img-area {
  width: 122px;
}
.event-area .wrap-2 {
  box-sizing: border-box;
  padding: 28px 0;
  gap: 17px;
  margin-top: 22px;
}
.event-area .wrap-2 .box > h1 {
  display: inline-block;
  box-sizing: border-box;
  padding: 5.6px 16.8px 5.6px 33.6px;
  background: #563B2D;
  font-size: 22px;
  line-height: 31px;
  font-weight: 500;
  color: #EBE1D9;
  margin-bottom: 8px;
}
.event-area .wrap-2 .box .common-text-1 {
  font-size: 20px;
  line-height: 31px;
  color: #222222DB;
  box-sizing: border-box;
  padding-left: 34px;
}
.event-area .wrap-2 .box .common-text-2 {
  font-size: 17px;
  line-height: 21px;
  color: #222222BD;
  margin-top: 3px;
  box-sizing: border-box;
  padding-left: 34px;
}
.event-area .wrap-2 .box .common-text-2 > br {
  display: none;
}
.event-area .wrap-2 .box .step-box {
  width: calc(100% - 68px);
  margin: 8px auto 0 auto;
  box-sizing: border-box;
  padding: 28px 32px;
  border-radius: 8px;
  border: 1px dashed #000000;
  gap: 22px;
  position: relative;
}
.step-box.flex {
  flex-direction: column;
  align-items: center;
}
.step-box-item {
  gap: 22px;
}
.step-txt-wrap.flex {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  width: 100%;
}
.icon_down {
  width: 22px;
}
.event-area .wrap-2 .box .step-box > li {
  width: 100%;
}
.event-area .wrap-2 .box .step-box > li > .img-box { 
  display: block;
  width: 67px;
  height: 67px;
}
.event-area .wrap-2 .box .step-box > li > h2 {
  font-size: 22px;
  line-height: 31px;
  color: #222222DB;
  margin-top: 11px;
}
.event-area .wrap-2 .box .step-box > li > h3 {
  font-size: 20px;
  line-height: 31px;
  color: #222222DB;
  margin-top: 11px;
}
.event-area .wrap-2 .box .step-box > li > p {
  font-size: 17px;
  line-height: 21px;
  color: #222222BD;
  margin-top: 11px;
  opacity: .74;
}
.event-area .wrap-2 .box .step-box > li > p > br.mb-ver {
  display: none;
}
.event-area .wrap-2 .box .swiper-1 {
  box-sizing: border-box;
  padding: 35px 0px;
}
.event-area .wrap-2 .box .swiper-1 .swiper-slide {
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.event-area .wrap-2 .box .swiper-1 .swiper-slide > .card-img-box {
  width: 100%;
  box-shadow: 0px 2.8px 2.8px 0px #00000099;
  border-radius: 10px;
}
.event-area .wrap-2 .box .swiper-1 .swiper-slide > .text-img-box {
  margin-top: 34px;
  height: 31px;
}
.event-area .wrap-2 .box .swiper-1 .swiper-slide > .text-img-box > img {
  width: auto;
  height: 100%;
  margin: 0 auto;
}

.event-area .wrap-2 .box .swiper-1 .swiper-slide > h3 {
  margin-top: 22px;
  font-size: 20px;
  line-height: 31px;
  color: #222222E0;
}
.event-area .wrap-2 .box .swiper-1 .swiper-slide > h4 {
  font-size: 17px;
  line-height: 21px;
  color: #222222E0;
}
.event-area .wrap-2 .box .swiper-1 .swiper-slide > button {
  margin-top: 22px;
  font-size: 20px;
  line-height: 31px;
  color: #FFFFFFE0;
  background: #17768D;
  border-radius: 6px;
  width: 100%;
  height: 59px;
}

/* ------------------------------------------------------------------------------- */

/* 카드 내용 영역 */
.card-cnt-area {
  box-sizing: border-box;
  padding: 44px 0 90px 0;
  background: #2E2C2B;
}
.card-cnt-area .con {
  max-width: 1032px;
  padding: 0 16px;
}
.card-cnt-area .text-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-cnt-area .text-area > li {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-cnt-area .text-area > li h3 {
  font-size: 20px;
  line-height: 31px;
  box-sizing: border-box;
  padding-left: 28px;
  opacity: 0.88;
  color: #fff;
}
.card-cnt-area .text-area > li .text-box > li {
  box-sizing: border-box;
  padding-left: 28px;
  font-size: 20px;
  line-height: 31px;
  color: #fff;
  position: relative;
  opacity: 0.88;
}
.card-cnt-area .text-area > li .text-box-2 > li {
  font-weight: 700;
}
.card-cnt-area .text-area > li .text-box > li:not(.ef-1):after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: #fff;
    position: absolute;
    top: 11.75px;
    left: 12.5px;
    border-radius: 50%;
    opacity: 0.88;
}
.card-cnt-area .text-area > li .text-box > li.ef-1::after {
  content: "※";
  display: block;
  font-size: 20px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 5.6px;
  opacity: 0.88;
}
.hover {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
}
button:hover > .hover, .button:hover > .hover  {
  background: rgba(0, 0, 0, 0.12);
}
.target_card_arrow .button .hover {
  border-radius: 50%;
}

.swiper-container {
  position: relative;
}
.target_card_arrow {
  z-index: 1;
  display: flex;
  position: absolute;
  width: 608px;
  height: 53.2px;
  top: 226px;
  left: 50%;
  transform: translateX(-50%);
  justify-content: space-between;
}
.target_card_arrow .swiper-prev, .target_card_arrow .swiper-next {
  cursor: pointer;
  width: 53.2px;
  height: 53.2px;
  z-index: 999;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../../static/images/lottecard_discovery_edition/_icon_arrow_left.png") !important;
}

.target_card_arrow .swiper-prev .hover {
  width: 53.2px;
}
.target_card_arrow .swiper-next {
  transform: rotate(180deg);
}
.swiper-1 {
  width: 488px;
}

b {
  font-weight: 700;
}