@charset "UTF-8";

body {letter-spacing: -0.1em;}
p,strong,span{font-family:"pretendard";font-weight: 400;}
.event__contents {position: relative; margin: 0 auto; padding:50px 30px; max-width: 600px;color: #000;}
.step-title{margin-bottom: 30px;font-size: 30px;font-weight: 700;line-height: 36px;text-align: center;}
.step-title-wrap {}
.step-title-wrap .step-title {margin-bottom: 24px;}
.step-title-wrap .step-title span {color: #1065BA;font-weight: 700;}
.step-title-wrap .step-sub-title {margin-bottom: 30px;text-align: center;font-size: 16px;line-height: 22.4px;font-weight: 400;color: #333;}
div > img{width: 100%;height: 100%;vertical-align: top;}
.swiper__area div.swiper-pagination{bottom: 50px;}
.swiper__area div.swiper-pagination .swiper-pagination-bullet {background-color: #ddd;opacity: 1;}
.swiper__area div.swiper-pagination .swiper-pagination-bullet-active {background-color: #000;}

.visual{position: relative; height: 361px; background-image: url(../img/main-bg.png);background-position: center;background-repeat: no-repeat;background-size:cover;background-color: #F3F3F3;}
.visual .event__contents{display: flex; width: 281px; margin: 0 auto; padding: 40px 0;}
.visual .content-text{width: 281px; margin: 0 auto;}
.visual ul{display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 15px; padding: 22px 20px; width: 215px; position: absolute; left: 50%; bottom: 99px; margin-left: -127px; background-color: #1065BA;}
.visual ul li {width: 50%; font-size: 10px; line-height: 12px; font-weight: 400; color: #FFF;}
.visual ul li .tag {display: inline-block; margin-right: 6px; width: 40px; height: 17px; font-size: 10px; line-height: 17px; font-weight: 500; background-color: #FFF; color: #000; text-align: center;}

.step--01 {background-color: #f3f3f3;}
.step--01 .content-introduce {}
.step--01 .content-introduce h4 {margin-bottom: 8px; font-size: 16px; line-height: 19px; font-weight: 700; letter-spacing: -0.3px; text-align: left;}
.step--01 .content-introduce h4:not(:first-child) {margin: 24px 0 -16px;}
.step--01 .content-introduce ul {display: flex; flex-direction: column; gap: 6px;}
.step--01 .content-introduce ul li {font-size: 13px; line-height: 20px; font-weight: 300; letter-spacing: -0.3px; text-align: left;}
.step--01 .content-introduce ul li span {font-weight: 700; color: #1065BA;}
.step--01 .content-introduce dl {display: flex; margin-top: 24px;}
.step--01 .content-introduce dt {margin-right: 8px; width: 58px; height: 22px; font-size: 9.8px; line-height: 22px; font-weight: 500; letter-spacing: -0.2px; background-color: #1065BA; color: #FFF; text-align: center;}
.step--01 .content-introduce dd {width: calc(100% - 66px); font-size: 13px; line-height: 22px; font-weight: 400; letter-spacing: -0.4px; text-align: left;}
.step--01 .content-introduce dd span {display: inline-block; width: 44px;}
.step--01 .content-introduce dd li {line-height: 22px; font-weight: 400; letter-spacing: -0.4px;}

.step--02 .sold-out{position: absolute; width: 200px;height: 200px; left: 50%; top: 280px; transform:translateX(-50%);}
.step--02 .tab-list {margin: 0;}
.step--02 .tab-list a,
.step--02 .tab-list a:hover {height: 60px; font-size: 18px; font-weight: 700; color: #111; background-color: #F2F2F2; border: none; border-bottom: 1px solid #000;}
.step--02 .tab-list a:first-child {border-left: none;}
.step--02 .tab-list a.selected {color: #111; background-color: #FFF; border: 1px solid #000; border-bottom: none;}
.step--02 .step-title {margin: 30px 0 50px;}
.step--02 .event-info-wrap {margin: 0 0 40px; padding: 24px 18px 24px 24px; background-color: rgba(16, 101, 186, 0.1);}
.step--02 .event-info-wrap li {display: flex; font-size: 13px; line-height: 1.6; font-weight: 400; letter-spacing: -0.3px; color: #1065BA; text-align: left;}
.step--02 .event-info-wrap li span {display: inline-block; width: 68px; font-size: 16px; font-weight: 700;}
.step--02 .event-info-wrap li p {width: calc(100% - 60px); font-size: 16px; line-height: 1.6; font-weight: 400; letter-spacing: -0.3px;}
.step--02 .product__area{display: flex;flex-direction: column;row-gap: 40px; justify-content: center;margin-bottom: 40px;max-width: 300px;margin: 0 auto 50px;}
.step--02 .product__img{overflow: hidden; width: 100%;}
.step--02 .product__item {position: relative;}
.step--02 .product__item label{position: unset;}
.step--02 .product__item .product-desc{display: flex;flex-direction: column;align-items: center; row-gap: 8px;margin-top: 24px;}
.step--02 .product__item .product-desc span{display: inline-flex;justify-content: center;align-items: center;height: 30px;margin-bottom: 8px; padding: 0 16px; background-color: #000;border-radius: 4px; font-size: 14px;font-weight: 500; color: #fff;}
.step--02 .product__item .product-desc p{font-size: 28px;line-height: 34px;font-weight: 600; text-align: center;}
.step--02 .product__item .product-desc p.etc-text{font-size: 16px; line-height: 22px; font-weight: 500;}
.step--02 .agree__area {margin: 50px -30px 0; padding: 40px 30px ; border-top: 8px solid #F6F6F6;}
.step--02 .agree__area .input-checkbox {display: flex;}
.step--02 .agree__area .input-checkbox i {margin-right: 10px; width: 24px; height: 24px; background-size: 24px;}
.step--02 .agree__area .input-checkbox p {width: calc(100% - 34px); font-size: 16px; line-height: 24px; color: #111; text-align: left;}
.step--02 .agree__area .btn {margin-top: 40px; padding: 13px 9; background-color: #8A8A8A; color: #FFF; font-weight: 500; border: none;}

.step--03 {}
.step--03 .event__contents {padding: 0;}
.step--03 .content-introduce {display: flex; flex-direction: column;}

.step--04 {background-color: #F3F3F3;}
.step--04 .event__contents {padding: 50px 30px;}
.step--04 .goods-notice {}
.step--04 .goods-notice p {font-size: 18px; font-weight: 700; color: #555;}
.step--04 .goods-notice .list__area {margin-top: 16px;}
.step--04 .goods-notice .list__area li {position: relative; padding-left: 12px; font-size: 12px; line-height: 1.5; font-weight: 400; color: #555;}
.step--04 .goods-notice .list__area li:before {position: absolute; left: 0; top: 8px; display: block; content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: #555;}