@charset "utf-8";

/* 인트로 */
.campaign-wrap {
    position:relative;
    padding-top: 190px;
    font-family:'Pretendard';
    background:#000;
    color:#fff;
    text-align: center;
}
.intro-title {
    font-size: 24px;
}
.intro-desc {
    margin-top: 24px;
    font-family: 'PPRightGrotesk-Narrow';
    font-size: 92px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
}
.link-challenge {
    margin: 50px 0 60px;
}
.btn-link {
    display: inline-block;
    padding: 0 63px;
    font-size: 24px;
    font-weight: 500;
    line-height: 80px;
    color: #fff;
    border-radius: 48px;
    border: 1px solid #fff;
}
.details-cont {
    margin-top: 40px;
    font-size: 20px;
    line-height: 1.5;
}

/* 캠페인 상세 배너 */
.section-major-banner {
    position: relative;
    min-height: 450px;
    margin-top: 60px;
    padding: 60px 0;
    color: #fff;
    background: url('/assets/front/images/event/campaign/bg_major_banner.png') 0 50% no-repeat;
    background-size: cover;
}
.section-major-banner .inner {
    position: relative;
    z-index: 1;
}
.banner-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;
}
.info-wrap {
    display: flex;
    justify-content: center;
    gap: 0 100px;
    margin-top: 84px;
}
.info-wrap .left {
    width: 303px;
    text-align: left;
}
.info-define {
    display: inline-block;
    text-align: left;
}
.info-define + .info-define {
    margin-top: 24px;
}
.info-title {
    display: inline-block;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 35px;    
    border-radius: 20px;
    background: #000;
}
.info-content {
    margin-top: 6px;
    font-size: 16px;
    line-height: 24px; 
}

/* 참여방법 */
.section-participation {
    padding: 100px 0;
}
.way-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    width: max-content;
    margin: 30px auto 0;
    font-size: 24px;
}
.way-item {
    width: fit-content;
    padding: 18px 36px;
    border: 1px solid #fff;
    border-radius: 32px;
}
.way-item + .way-item {
    margin-top: 16px;
}
.link-titleist {
    margin-right: 6px;
    padding-right: 24px;
    padding-bottom: 2px;
    font-size: inherit;
    color: #fff;
    background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.707092 1H16.7071M16.7071 1V17M16.7071 1L0.707092 17' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A") 100% 50% no-repeat;
    background-size: 16px 16px;
    border-bottom: 1px solid #fff;
}
.cont-tit {
    font-size: 42px;
    font-weight: 700;
    line-height: 50px;
}
.cont-desc {
    margin-top: 20px;
    font-size: 18px;
    line-height: 28px;
}


/* RELAY QUIZ CHALLENGE */
.campaign-video-wrap {
    max-width: 1200px;
    margin: 40px auto 0;
    padding-bottom: 100px;
}
.campaign-list {
    display: flex;
    flex-wrap: wrap;
    gap: 62px 24px;
}
.campaign-item {
    width: calc(50% - 12px);
    text-align: left;
}
.campaign-link {
    display: block;
    color: #fff;
}
.campaign-poster {
    overflow: hidden;
    display: block;
    border-radius: 20px;
}
.campaign-video-tit {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}
.campaign-video-pro {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}
.btn-to-quize {
    display: inline-block;
    margin-top: 16px;
    height: 44px;
    padding: 0 24px;
    font-size: 14px;   
    font-weight: 700;
    color: #fff;
    background: #C8102E;
    border-radius: 22px;
    line-height: 44px;
    text-align: center;
}
.btn-to-quize .ico {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-top: 10px;
    margin-left: 2px;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12L4 12' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 19L20 12L13 5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") 50% 50% no-repeat;
    background-size: cover;
    vertical-align: top;
}