@charset "utf-8";

.event-popup{position:absolute; display:none; width:100%; height:100%; top:0; left:0;}
.event-popup.active{display: block;}
.event-popup:before{content:""; position:fixed; width:100%; height:100%; top:0; left:0; background-color:#000; opacity:0.7; z-index:10;}
.event-popup .popup-con{position:absolute; display: table; width: 100%; height: 100%; top: 0; left: 0; z-index: 10;}
.event-popup .pop-align{position:relative; display: flex; align-items: center; height: 100%; z-index:11;}
.event-popup .pop-con{position:relative; width:90%; margin: auto;  box-sizing:border-box; text-align: center; padding: 30px 20px; border-radius: 20px;}
.event-popup .pop-con .close-pop{position:absolute; top: -60px; right:0; width: 40px; height: 40px;}
.event-popup .pop-con .close-pop img{width: 100%;}
.event-popup .pop-con .pop-txt p{font-size:20px; line-height: 1.4; font-weight: 500;}
.event-popup .pop-con .pop-txt .comp-btn{display: inline-block; padding: 10px 30px; border-radius: 100px; font-size: 16px; font-weight: 700; margin-top: 20px;}

.event_page{max-width:1000px; margin:auto;}
.event-page img{width:100%;}
.event-page img.mo{display:none;}

.event-join-con .input-con, .event-join-con .agree-con{position:relative; width:90%; max-width:640px; margin:auto; border-radius: 30px; padding:60px 60px 50px; box-sizing: border-box;}
.event-join-con .input-con input{height:50px; background-color: #FFF; border-radius: 8px; border:none; padding-left:20px; box-sizing: border-box; font-size:18px;}
.event-join-con .input-con .input dl{display:flex; margin-bottom:10px;}
.event-join-con .input-con .input dt{width:130px; font-size:26px; font-weight: 600; line-height: 50px;}
.event-join-con .input-con .input dd{width:calc(100% - 130px);}
.event-join-con .input-con .input .name input{width:100%;}
.event-join-con .input-con .input .tel dd{position:relative; display:flex; gap:20px;}
.event-join-con .input-con .input .tel dd::after{content: ''; position: absolute; top: calc(50% - 1px); left: calc(33.3333% - 8px); display: block; width: 8px; height: 2px;}
.event-join-con .input-con .input .tel dd::before{content: ''; position: absolute; top: calc(50% - 1px); right: calc(33.3333% - 8px); display: block; width: 8px; height: 2px}
.event-join-con .input-con .input .tel input{width: calc(33.3333% - 13.3333px);}
.event-join-con .input-con .input .address input{width: 100%;}
.event-join-con .input-con .input .address dd{display:flex; flex-direction: column; gap: 10px;}
.event-join-con .input-con .input .address dd .address-num{position:relative;}
.event-join-con .input-con .input .address dd .address-num a{position: absolute; top: 0; right: 0; display:block; width:116px; line-height: 50px; border-radius: 0 8px 8px 0; color:#FFF; font-size: 16px; font-weight: 700; text-align: center;}
.event-join-con .code-con .code dt{font-size:26px; font-weight: 600; margin: 20px 0 10px;}
.event-join-con .code-con .code dd{position:relative; display:flex; gap: 20px;}
.event-join-con .code-con .code dd::after{content: ''; position: absolute; top: calc(50% - 1px); left: calc(33.3333% - 8px); display: block; width: 8px; height: 2px;}
.event-join-con .code-con .code dd::before{content: ''; position: absolute; top: calc(50% - 1px); right: calc(33.3333% - 8px); display: block; width: 8px; height: 2px;}
.event-join-con .code-con .code input{width: calc(33.3333% - 13.3333px);}
.event-join-con .code-con .code-guide{margin-top: 10px;}
.event-join-con .code-con .code-guide dt{font-size: 22px; font-weight: 600; margin: 20px 0 5px;}
.event-join-con .code-con .code-guide dd{font-size: 18px;}
.event-join-con .agree-con{margin-top:80px;}
.event-join-con .agree-con .agreement-con{height: 200px; overflow-y: scroll; background-color: #FFF; border-radius: 8px; padding: 30px; box-sizing: border-box; margin-bottom: 15px;}
.event-join-con .agree-con .agreement-con h3{font-size: 18px; font-weight: 600;}
.event-join-con .agree-con .agreement-con li{font-size: 16px;}
.event-join-con .agree-con .collect-agree{text-align: right;}
.event-join-con .agree-con .collect-agree label{font-size: 18px; font-weight: 600;}
.event-join-con .agree-con .collect-agree input{width: 16px; height: 16px; vertical-align: text-top; border:none;}
.event-join-con .agree-con .collect-agree .agree-txt{margin-right: 15px;}
.event-join-con .submit-btn{display: block; width: 230px; height: 60px; margin: 60px auto 0; background-color: #004f8a; border: none; font-size: 26px; font-weight: 600; color: #FFF; cursor: pointer;}

/* 어그로 폰트 */
@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* 우리땅 봄한잔 */
.spring-menu-event p, .spring-menu-event span, .spring-menu-event button, .spring-menu-event dt, .spring-menu-event dd, .spring-menu-event input, .spring-menu-event a, .spring-menu-event, .spring-menu-popup p{font-family:'Aggravo'; font-weight:300; line-height:1.2; letter-spacing:-1px; color:#ff5e6e; word-break: keep-all;}
.spring-menu-event button{background:none; border:none; cursor:pointer;}
.spring-menu-event{position:relative; max-width:1000px; margin:auto; padding-top:100px; background:url(../images/event/spring_menu/con_bg.webp) no-repeat #ffcbb9; box-sizing:border-box; overflow: hidden;}
.spring-menu-event::after{content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:url(../images/event/spring_menu/top_deco.webp) no-repeat; z-index:1; background-size: 100%;}
.spring-menu-event .con01{position:relative; z-index:2;}
.spring-menu-event .con01 .title{width:92%; max-width:709px; margin:auto;}
.spring-menu-event .con01 .text{text-align:center;}
.spring-menu-event .con01 .text::before{content:''; display:block; width:90px; height:4px; background-color:#21c37c; margin:60px auto;}
.spring-menu-event .con01 .text p{font-size:50px; color:#4e7e60;}
.spring-menu-event .con01 .text p em{font-weight:500; color:#ff7986;}
.spring-menu-event .con01 .text span{display:inline-block; padding:10px 20px 5px; margin-top:30px; background-color:#59cd90; font-size:28px; color:#FFF;}
.spring-menu-event .con01 .map{position:relative; margin:80px auto;}
.spring-menu-event .con01 .map button{position:absolute; width:19%; height:7.4792%;}
.spring-menu-event .con01 .map .btn01{left:51.8%; top:35.2723%;}
.spring-menu-event .con01 .map .btn02{left:49.5%; top:56.4173%;}
.spring-menu-event .con01 .map .btn03{left:41.8%; top:79.3167%; width:24%;}
.spring-menu-event .tt{display:inline-block; position: absolute; top:-25px; left:50%; transform: translateX(-50%); padding:5px 25px 0; background-color:#ff5e6e; border-radius:30px; font-size:32px; font-weight:700; color:#FFF; line-height: 45px; box-sizing: border-box;}
.spring-menu-event .desc{font-size:36px; font-weight: 500;}
.spring-menu-event .sub-desc{font-size:30px; opacity: 0.8;}
.spring-menu-event .con02, .spring-menu-event .con03{position:relative; z-index:2;}
.spring-menu-event .con02 > div{position:relative; width:94%; padding:60px 5% 50px; margin:0 auto 80px; background-color: #FFF; border-radius: 30px; text-align: center; box-sizing: border-box;}
.spring-menu-event .quiz-con .q-box{width:90%; margin:30px auto 40px; padding:40px; background-color:#fff1ec; border:1px solid #ff7986; border-radius:20px; box-sizing: border-box;}
.spring-menu-event .quiz-con .q-box .q-desc{font-size:32px; line-height: 1.4; word-break: keep-all;}
.spring-menu-event .quiz-con .q-box .q-desc .a-box{display:inline-block; width:140px; background-color: #FFF; border:3px solid #ff7986; border-radius: 10px; height: 40px; box-sizing: border-box; vertical-align: middle; font-weight: 500;}
.spring-menu-event .quiz-con .q-box .q-sub-desc{font-size:24px; margin-top:20px;}
.spring-menu-event .quiz-con .answer-list{display: flex; gap: 60px; justify-content: center;}
.spring-menu-event .quiz-con .answer-list button{width:186px; font-size: 36px;}
.spring-menu-event .quiz-con .answer-list button.on{font-weight: 700;}
.spring-menu-event .period-con .sub-desc{margin-top:30px;}
.spring-menu-event .gift-con .gift-list{display: grid; grid-template-columns: repeat(3,1fr); box-sizing: border-box; margin-bottom: 40px;}
.spring-menu-event .gift-con .gift-list li .img img{width:auto; max-width:100%;}
.spring-menu-event .gift-con .gift-list li dl{margin-top:20px;}
.spring-menu-event .gift-con .gift-list li dl dt{font-size:26px; font-weight: 500; margin-bottom: 15px;}
.spring-menu-event .gift-con .gift-list li dl dt span{display:inline-block; margin-bottom: 10px; padding:5px 10px 0; background-color: #ff7986; font-size: 24px; font-weight: 500; color: #FFF;}
.spring-menu-event .gift-con .gift-list li dl dd{font-size:22px; opacity: 0.8;}
.spring-menu-event .gift-con .notice-text{display:flex; flex-direction: column; gap:10px;}
.spring-menu-event .gift-con .notice-text li{display:flex; justify-content: center; gap: 5px;}
.spring-menu-event .gift-con .notice-text li:last-child{margin-bottom:0;}
.spring-menu-event .gift-con .sub-desc{font-size:24px;}
.spring-menu-event .guide-con .guide-text{display:table; margin:auto;}
.spring-menu-event .guide-con .guide-text:nth-child(2){margin-bottom: 30px;}
.spring-menu-event .guide-con .guide-text:nth-child(2) .sub-desc{opacity: 1;}
.spring-menu-event .guide-con .guide-text li{display: flex; margin-bottom:10px; gap: 5px;}
.spring-menu-event .guide-con .guide-text li:last-child{margin-bottom:0;}
.spring-menu-event .guide-con .guide-text li .step{width:160px; text-align: left; font-weight: 500;}
.spring-menu-event .guide-con .guide-text:nth-child(2) li .sub-desc:last-child{width:calc(100% - 165px); text-align: left;}
.spring-menu-event .menu-con ul{display:grid; grid-template-columns: repeat(3,1fr); box-sizing: border-box;}
.spring-menu-event .menu-con ul li .img img{width:auto; max-width:100%;}
.spring-menu-event .menu-con ul li dl{margin-top:20px;}
.spring-menu-event .menu-con ul li dl dt{font-size:26px; font-weight: 500; margin-bottom: 15px;}
.spring-menu-event .menu-con ul li dl dd{font-size:22px; opacity: 0.8;}
.spring-menu-event .con03{background-color: #ffa8ab; padding:120px 4%; margin-top:120px;}
.spring-menu-event .con03 > div{position:relative;}
.spring-menu-event .event-join-con .input-con, .spring-menu-event .event-join-con .agree-con{background-color: #fff6f7;}
.spring-menu-event .event-join-con .input-con input{border:1px solid #fcc3b9; color:#5c5253;}
.spring-menu-event .event-join-con .input-con .input .tel dd::after{background-color: #ff7986;}
.spring-menu-event .event-join-con .input-con .input .tel dd::before{background-color: #ff7986;}
.spring-menu-event .event-join-con .code-con .code dd::after{background-color: #ff7986;}
.spring-menu-event .event-join-con .code-con .code dd::before{background-color: #ff7986;}
.spring-menu-event .event-join-con .input-con .input .address dd .address-num a{background-color: #ff7986; font-weight: 300;}
.spring-menu-event .event-join-con .agree-con .agreement-con li, .spring-menu-event .event-join-con .agree-con .agreement-con h3{color:#5c5253; line-height: 1.6;}
.spring-menu-event .event-join-con .agree-con .collect-agree label{font-weight: 300;}
.spring-menu-event .event-join-con .agree-con .collect-agree input{vertical-align: top;}
.spring-menu-event .event-join-con .submit-btn{background-color: #ff7986;}
.spring-menu-event .event-join-con .agree-con .agreement-con{border:1px solid #fcc3b9;}
.spring-menu-popup{position:absolute; display:none; width:100%; height:100%; top:0; left:0;}
.spring-menu-popup.active{display: block;}
.spring-menu-popup:before{content:""; position:fixed; width:100%; height:100%; top:0; left:0; background-color:#000; opacity:0.7; z-index:10;}
.spring-menu-popup .pop-align{position:relative; display: flex; align-items: center; height: 100%; z-index:11;}
.spring-menu-popup .pop-con{position:relative; width:90%; max-width: 500px; margin: auto;  box-sizing:border-box; border-radius: 30px; padding: 40px 0; box-sizing: border-box; text-align: center;}
#spring-pop01 .pop-con{background-color: #f2dbda;}
#spring-pop02 .pop-con{background-color: #eaecc9;}
#spring-pop03 .pop-con{background-color: #d6ecd7;}
.spring-menu-popup .pop-con .pop-tt{display: inline-block; padding:10px 30px 5px; border-radius: 50px; font-size: 28px; font-weight: 500; color: #FFF; text-align: center; margin-bottom: 40px;}
.spring-menu-popup .pop-con .img{max-width:200px; margin:0 auto 40px;}
.spring-menu-popup .pop-con .img img{width:100%;}
.spring-menu-popup .pop-con .txt{font-size:22px; line-height: 1.4; word-break: keep-all;}
.spring-menu-popup .pop-con .sub-txt{opacity: 0.7; margin-top:20px;}
#spring-pop01 .pop-con .pop-tt{background-color: #ff3430;}
#spring-pop02 .pop-con .pop-tt{background-color: #a2af1a;}
#spring-pop03 .pop-con .pop-tt{background-color: #4c8c50;}
#spring-pop01 .pop-con .txt{color:#d02e2a;}
#spring-pop02 .pop-con .txt{color:#838d17;}
#spring-pop03 .pop-con .txt{color:#396b3c;} 
.spring-menu-popup .pop-con .close-pop{position:absolute; width:38px; height: 38px; background:none; border:none; right:0; top:-70px; cursor: pointer;}
.spring-menu-popup .pop-con .close-pop img{width:100%;}
.spring-menu-done .pop-con{background:url(../images/event/spring_menu/con_bg.webp) no-repeat #ffcbb9; background-size: cover; box-sizing:border-box; max-width: 400px; border:3px solid #ff7986;}
.spring-menu-done .pop-con .pop-txt{color:#169354;}
.spring-menu-done .pop-con .pop-txt .comp-btn{background:#1cb066; color:#FFF;}

@media screen and (max-width:1000px){
/* Common*/
.event-join-con .input-con, .event-join-con .agree-con{padding: 50px 40px 40px;}
.event-join-con .input-con .input dt, .event-join-con .code-con .code dt{font-size: 24px;}
.event-join-con .code-con .code-guide dt{font-size: 20px;}

/* 우리땅 봄한잔 */
.spring-menu-event .tt{line-height: 40px; font-size:28px; top:-22px;}
.spring-menu-event .desc{font-size:32px;}
.spring-menu-event .sub-desc{font-size:26px;}
.spring-menu-event .quiz-con .q-box .q-desc{font-size:28px;}
.spring-menu-event .quiz-con .q-box .q-sub-desc{font-size:22px; margin-top:15px;}
.spring-menu-event .quiz-con .q-box .q-desc br{display:none;}
.spring-menu-event .quiz-con .q-box .q-desc .a-box{width:130px; height:36px;}
.spring-menu-event .period-con .sub-desc{margin-top:20px;}
.spring-menu-event .quiz-con .answer-list{gap:20px;}
.spring-menu-event .quiz-con .answer-list button{font-size:32px; width:160px;}
.spring-menu-event .gift-con .gift-list{gap:30px; margin-bottom: 30px;}
.spring-menu-event .gift-con .gift-list li dl dt span{font-size:20px;}
.spring-menu-event .gift-con .gift-list li dl dt{font-size:22px; margin-bottom:10px;}
.spring-menu-event .gift-con .gift-list li dl dd{font-size:18px;}
.spring-menu-event .gift-con .sub-desc{font-size:20px;}
.spring-menu-event .guide-con .guide-text li .step{width:135px;}
.spring-menu-event .guide-con .guide-text{text-align: left;}
.spring-menu-event .guide-con .guide-text:nth-child(2) li .sub-desc:last-child{width:calc(100% - 140px);}
.spring-menu-event .menu-con ul{gap:30px;}
.spring-menu-event .menu-con ul li dl dt{font-size:22px; margin-bottom:10px;}
.spring-menu-event .con03{padding: 100px 4%; margin-top: 100px;}
.spring-menu-popup .pop-con{border-radius: 20px;padding: 40px 5%; max-width: 400px;}
.spring-menu-popup .pop-con .pop-tt{font-size:24px; padding:8px 20px 0;}
.spring-menu-popup .pop-con .txt{font-size: 22px;}
.spring-menu-popup .pop-con .txt br{display:none;}
.spring-menu-popup .pop-con .img img{width: 100%;}
}

@media screen and (max-width: 767px) {
 /* Common*/
 .spring-menu-event .input-con .tt, .spring-menu-event .agree-con .tt{width: 194px;}
 .event-join-con .input-con, .event-join-con .agree-con{padding: 40px 8%; border-radius: 20px;}
 .event-join-con .input-con .input dl{flex-direction: column;}
 .event-join-con .input-con .input dd{width: auto;}

.event-page img.pc{display:none;}
.event-page img.mo{display:inline-block;}
/* 우리땅 봄한잔 */
.spring-menu-event{padding-top:60px;}
.spring-menu-event .con01 .title{max-width: 400px;}
.spring-menu-event .con01 .text::before{width: 60px; height: 2px; margin: 40px auto;}
.spring-menu-event .con01 .text p{font-size:24px;}
.spring-menu-event .con01 .text span{font-size:18px; padding:8px 10px 2px;}
.spring-menu-event .con01 .map{width:142%; margin:60px auto; margin-left:-21%;}
.spring-menu-event .con02 > div{padding:40px 5% 30px; border-radius: 20px; margin-bottom:60px;}
.spring-menu-event .tt{line-height: 35px; font-size:22px; top:-20px; padding:5px 20px 0;}
.spring-menu-event .desc{font-size:24px;}
.spring-menu-event .sub-desc{font-size:20px;}
.spring-menu-event .quiz-con .q-box{width: auto; margin:20px auto; padding: 20px 20px;}
.spring-menu-event .quiz-con .q-box .q-desc{font-size:20px;}
.spring-menu-event .quiz-con .q-box .q-desc .a-box{width:90px; height: 27px; border-radius: 5px; border:2px solid #ff7986;}
.spring-menu-event .quiz-con .q-box .q-sub-desc{font-size:18px; margin-top:10px;}
.spring-menu-event .quiz-con .answer-list{gap:15px;}
.spring-menu-event .quiz-con .answer-list button{font-size:24px; width:120px;}
.spring-menu-event .period-con .sub-desc{margin-top:10px;}
.spring-menu-event .gift-con .gift-list{grid-template-columns: repeat(1,1fr); margin-top: 10px;}
.spring-menu-event .gift-con .gift-list li .img{text-align: center;}
.spring-menu-event .gift-con .notice-text li{justify-content:flex-start; text-align: left;}
.spring-menu-event .gift-con .notice-text li p:last-child{width: calc(100% - 30px);}
.spring-menu-event .guide-con .guide-text:nth-child(2) li{flex-direction: column;}
.spring-menu-event .guide-con .guide-text:nth-child(2) li .sub-desc:last-child{width: auto;}
.spring-menu-event .menu-con ul{grid-template-columns: repeat(1,1fr);}
.spring-menu-event .con03{padding: 80px 4%; margin-top: 80px;}
.spring-menu-event .guide-con .guide-text{margin:0;}
}