/****************************************** 역대급 현장 이벤트 ******************************************/ .goatEvent {background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/saf-main-goatEvent_bg-250827.jpg'); background-repeat: no-repeat; background-size: cover; background-position: top center; padding-inline: 5rem 0; padding: 5rem 0;} .goatEvent *{font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important; line-height:150%; box-sizing:border-box;} .goatEvent .max-width{max-width: 1280px; margin: 0 auto; padding: 0 16px; } .goatEvent h3{font-size: var(--f-fontSize02); line-height: 130%; letter-spacing: 0.032rem;} /* 링크 */ .goatEvent .btn {margin-top: 1.6rem;text-align: center;} .goatEvent .btn a { display: flex; justify-content: center; align-items: center; width: 10rem; height: 2.8rem; padding: 0 1.2rem; border-radius: 12px; background-color: var(--c-text01); font-size: var(--f-body1); font-weight: 500; line-height: 150%; color: #fff; } .goatEvent .btn a .arrow { width: 1.2rem; height: 1.2rem; margin-left: 0.1rem; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/common/buttonArrow.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; } .goatEvent .btn a:hover { background-color: var(--c-text02); } .goatEvent .btn a figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/btn_arrow_250124.svg'); background-repeat: no-repeat; width: 1.2rem; height: 1.2rem; background-size: contain; background-position: center; display: inline-block;} /* 최상단 제목 */ .goatEvent .sub-title{margin-bottom: 3rem; font-size: var(--f-display); line-height: 130%; letter-spacing: -0.054rem; text-align: center;} .goatEvent .sub-title > strong {display: block;color: #000;font-weight:700;line-height: 130%;} .goatEvent .sub-title > span {margin-top: 0.6rem; display: block; line-height: 130%; font-weight: 400; letter-spacing: -0.032rem; font-size: var(--f-fontSize02); color: #333; } /* box */ .goatEvent .boxWrap + .boxWrap{margin-top: 3rem;} .goatEvent .boxWrap .roundBox{position:relative;border-radius:24px;background-color:#fff; box-shadow: 0px 8px 20px #0000001F; text-align: center;} .goatEvent .boxWrap .roundBox .tag {display: block;width:100%;height: 5.4rem;border-radius:24px 24px 0 0;background: linear-gradient(90deg, #FF52C0 0%, #FF3083 50%, #FF46BB 100%);font-size:1.7rem;font-weight:700;text-shadow: 0px 2px 4px #00000033;text-align:center;line-height: 5.4rem;color:#fff;} .goatEvent .boxWrap .innerBox { max-width: 53.4rem; margin: 0 auto; padding: 2.5rem 16px 3rem; } .goatEvent .boxWrap .box-txt1{display:block;font-size:var(--f-fontSize03);font-weight:600;} .goatEvent .boxWrap .box-txt2{display:block;margin-top:.4rem;margin-bottom:1.6rem;font-size:var(--f-fontSize05);color:var(--c-text02);} /* list 공통 */ .goatEvent .gridList {display:grid;grid-template-columns:repeat(12,1fr);gap:24px;text-align:left; } .goatEvent .gridList.col3{grid-template-columns: repeat(3,1fr);} .goatEvent .gridList li {padding:1.2rem 1.6rem;grid-column:4 span;border-radius:12px;border:1px solid #F5E5E5;background:#FFF5F5;} .goatEvent .gridList li.col2, .goatEvent .gridList li.col2 {grid-column:6 span;} .goatEvent .gridList li strong {display:block;background: linear-gradient(90deg, #FF0071 0%, #FF7644 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:var(--f-fontSize03);font-weight:700;word-break:keep-all; letter-spacing: -0.05rem;} .goatEvent .gridList li strong::selection{color:#fff;background:#FF5039 !important;background-color:#FF5039;background-clip:initial;-webkit-background-clip:initial;-webkit-text-fill-color:#fff;} .goatEvent .gridList li p.sub {display:block;font-size:var(--f-body2);font-weight:600;color:#000; margin-top: 0.2rem;} .goatEvent .gridList li.hasImg {display:flex;justify-content:space-between;justify-items:center;align-items:center;gap:10px;padding:.8rem 1.6rem;} .goatEvent .gridList li.hasImg .imgTicket {width:7.9rem;height:4.2rem;background:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/ticket_img_01.png');background-repeat:no-repeat;background-size:cover;background-position:center;} .goatEvent .gridList li.hasImg .imgTicket.hyundai {background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/ticket_img_02_250827.png');} .goatEvent .gridList li.hasImg p.sub{margin-top:.2rem;} .goatEvent .gridList li .top-tag {display:inline-block;min-width:52px;height:24px;padding:0 4px;border-radius:4px;border:1px solid #FFBBBB;background-color:#fff;font-size:16px;font-weight:600;line-height:24px;color:#FF4E61;text-align:center; margin-bottom: 0.6rem;} .goatEvent .gridList.default li:last-child {padding-right: .8rem;} .goatEvent .benefit-info .info-title {position:relative;margin:2rem 0 .8rem;font-size:var(--f-fontSize04);} .goatEvent .benefit-info.checkIn-blue .info-title {margin-top: 0;} .goatEvent .benefit-info .info-title > p {display:inline-block;position:relative;padding:0 2rem;background-color:#fff;font-weight:600;color:#FF4580;} .goatEvent .benefit-info .info-title:before {position:absolute;top:50%;left:0;margin-top:-1px;width:100%;height:1px;background-color:#FFD8E4;content:"";} /* 둥근테두리 서브 타이틀 영역 */ .goatEvent .pointWrap{text-align: center; margin: 1.6rem auto;} .goatEvent .pointWrap .inner{border-radius: 9999999px; padding: 1.6rem 0; background-color: #324DFF; color: #fff; display: inline-block; font-size: var(--f-fontSize02); line-height: 130%; letter-spacing: -0.013rem; width: 21.9rem; position: relative; right: -0.5rem;} .goatEvent .pointWrap .inner strong{display:block;line-height: 130%;} .goatEvent .pointWrap.green .inner{padding: 1.34rem 0;} .goatEvent .pointWrap .inner > *{position: relative; z-index: 1;} .goatEvent .pointWrap .inner em{display:inline-block;line-height: 130%;color: #FFFF00;} .goatEvent .pointWrap .inner .txt1{font-size: var(--f-fontSize03); font-weight: 600; margin-bottom: 0.2rem;} .goatEvent .pointWrap .inner .txt2{font-size: var(--f-fontSize02); line-height: 130%; letter-spacing: -0.032rem; } .goatEvent .pointWrap .inner .txt2.number em{position: relative; padding-left: 1.9rem;} .goatEvent .pointWrap .inner .txt2.number span{font-size: var(--f-display); font-weight: 700; line-height: 130%; letter-spacing: -0.054rem; position: absolute; top: 50%; transform: translateY(-50%); left: 0.4rem;} /* color */ .goatEvent .pointWrap.orange .inner{background-color: #FF7D21;} .goatEvent .pointWrap.green .inner{background-color: #00C026;} .goatEvent .gridList.purple li {border:1px solid #EAE4F3;background:#F8F4FF;} .goatEvent .gridList.blue li {border:1px solid #DEE9F0;background:#EFF8FE;} .goatEvent .gridList.orange li {border:1px solid #F8EBBE;background:#FFF9E3;} .goatEvent .gridList.green li {border:1px solid #CDEDC3;background:#E9FFE2;} .goatEvent .benefit-info.purple .info-title > p {color:#C645F1;} .goatEvent .benefit-info.purple .info-title:before {background-color:#EEE4FD;} .goatEvent .gridList.default li strong {background: linear-gradient(90deg, #F90D58 0%, #FF5039 68.38%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;} .goatEvent .gridList.purple li strong {background:linear-gradient(90deg, #8B01FF 0%, #BF01FF 66.67%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;} .goatEvent .gridList.blue li strong {background:linear-gradient(90deg, #2744FF 0%, #007FFF 96.65%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;} .goatEvent .gridList.orange li strong {background:linear-gradient(90deg, #FF460E 0%, #FF8228 66.67%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;} .goatEvent .gridList.green li strong {background:linear-gradient(90deg, #00C050 0%, #00D92B 66.67%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;} .goatEvent .gridList.default li strong::selection {background: #F90D58 !important; background-color: #F90D58; } .goatEvent .gridList.purple li strong::selection{background:#BF01FF !important; background-color:#BF01FF; } .goatEvent .gridList.blue li strong::selection{background:#007FFF !important; background-color:#007FFF; } .goatEvent .gridList.orange li strong::selection{background:#FF8228 !important; background-color:#FF8228; } .goatEvent .gridList.green li strong::selection{background:#00D92B !important; background-color:#00D92B; } .goatEvent .gridList.purple .top-tag {border:1px solid #F1C9FF; color:#D558FF;} .goatEvent .gridList.blue .top-tag {border:1px solid #77BAFD; color:#2C95FF;} .goatEvent .gridList.orange .top-tag {border:1px solid #FF8228; color:#FF6B00;} /* 4주 무료 어학연수 추첨 */ .goatEvent .benefit-1 .thumbWrap .thumbImg{display:block; border-radius: 12px; background-repeat: no-repeat; background-size: cover; background-position: center; } .goatEvent .benefit-1 .thumbWrap .thumbImg.img01{background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/thumb_img_01-250124.png')} .goatEvent .benefit-1 .thumbWrap .thumbImg.img02{background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/thumb_img_02-250124.png');} .goatEvent .benefit-1 .thumbWrap .thumbImg.img03{background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/thumb_img_03-250124.png');} .goatEvent .benefit-1 .thumbWrap .thumbImg.img04{background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/thumb_img_04-250124.png');} .goatEvent .benefit-1 .thumbWrap .thumbImg.img05{background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/thumb_img_05-250124.png');} .goatEvent .benefit-1 .thumbWrap .thumbImg.img06{background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/thumb_img_06-250124.png');} .goatEvent .benefit-1 .thumbWrap .col2{display:flex; flex-wrap: wrap; margin-bottom: 1.2rem;} .goatEvent .benefit-1 .thumbWrap .col2 .thumbImg{width: calc(50% - 0.6rem); margin-right: 1.2rem; aspect-ratio:506/260;} .goatEvent .benefit-1 .thumbWrap .col2 .thumbImg:nth-child(2n){margin-right: 0;} .goatEvent .benefit-1 .col4{display: flex; align-items: center; width: 100%; flex-wrap: wrap;} .goatEvent .benefit-1 .col4 .thumbImg{width: calc(100%/4 - 0.6rem); margin-right: 0.8rem; aspect-ratio: 247/150;} .goatEvent .benefit-1 .col4 .thumbImg:nth-child(4n){margin-right: 0;} /* 비교불가한 현장혜택 */ .goatEvent .benefit-2 .imageWrap {margin: 1.6rem auto 2rem; width:100%; max-width:41rem; background:url("https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/presentImg-250827.png") no-repeat center; background-size:cover; aspect-ratio: 820/370; border-radius: 12px; display: block;} .goatEvent .benefit-2 .gridList li strong {display: inline-block;} /* 현장수속 혜택 */ .goatEvent .benefit-3 .top-imgWrap{width: 100%; margin: .6rem 0 2rem;} .goatEvent .benefit-3 .top-imgWrap img{width: 100%;max-width: 44.8rem;} .goatEvent .benefit-3 .gridList li {padding: 1.2rem;letter-spacing: -.5px;} .goatEvent .benefit-3 .gridList.purple li { padding-top: 1rem; } .goatEvent .benefit-3 .gridList.default li:nth-child(1), .goatEvent .benefit-3 .gridList.default li:nth-child(2), .goatEvent .benefit-3 .gridList.default li:nth-child(3) { padding: 1.2rem 1.6rem; } .goatEvent .benefit-3 .gridList.default li:nth-child(4), .goatEvent .benefit-3 .gridList.default li:nth-child(5), .goatEvent .benefit-3 .gridList.default li:nth-child(6), .goatEvent .benefit-3 .gridList.default li:nth-child(7) {grid-column:3 span;} .goatEvent .benefit-3 .gridList.default li:nth-child(4) strong, .goatEvent .benefit-3 .gridList.default li:nth-child(5) strong, .goatEvent .benefit-3 .gridList.default li:nth-child(6) strong, .goatEvent .benefit-3 .gridList.default li:nth-child(7) strong {font-size:var(--f-fontSize05);} .goatEvent .benefit-3 .gridList.default li strong.iconBox{display: inline-block;position: relative; padding-right: 2rem;} .goatEvent .benefit-3 .gridList.default li strong.iconBox figure{width: 1.6rem; height: 1.6rem; background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} .goatEvent .benefit-3 .benefit-info.purple .gridList li p.sub {font-size:var(--f-detail);font-weight:400;line-height:150%;color:#000; letter-spacing: -0.007rem;} .goatEvent .benefit-3 .benefit-info.purple .gridList li .imgWrap {margin-top:.8rem;line-height:1;text-align:right;} .goatEvent .benefit-3 .benefit-info.purple .gridList li .imgWrap span{display:inline-block;width:6.5rem;height:6.8rem;background:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/prize_img_01.png');background-repeat:no-repeat;background-size:cover;background-position:center;vertical-align:top;} .goatEvent .benefit-3 .benefit-info.purple .gridList li .imgWrap span.img02 {background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/prize_img_02.png');} .goatEvent .benefit-3 .benefit-info.purple .gridList li .imgWrap span.img03 {background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/prize_img_03.png');} .goatEvent .benefit-3 .benefit-info.purple .gridList li .imgWrap span.img04 {background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/prize_img_04.png');} .goatEvent .benefit-3 .benefit-info.purple .gridList li .imgWrap span.img05 {background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/prize_img_05.png');} .goatEvent .benefit-3 .benefit-info.purple .gridList li .imgWrap span.img06 {background-image:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/prize_img_06.png');} .goatEvent .benefit-3 .benefit-procedure{margin-top: 3rem;} .goatEvent .benefit-3 .benefit-procedure .gridList li {padding: 1rem 1.2rem 1.2rem; grid-column:6 span;} .goatEvent .benefit-3 .benefit-procedure .gridList.green li {padding: 1.2rem;} /********************************* event.php *********************************/ .goatEvent.event{padding: 0;background: none;} .goatEvent.event .tabArea {padding: 7rem 0 3rem; background-color: #C2F5FF; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/event/event-goatEvent-bg-250829.png');background-size: cover; background-position: top center; background-repeat: no-repeat;} .goatEvent.event .sub-title{margin-bottom: 2.2rem;} .goatEvent.event .sub-title span{color: #000; background: initial; -webkit-background-clip: initial; -webkit-text-fill-color: initial; display: inline-block; font-size: var(--f-display); line-height: 130%; letter-spacing: -1.88px; font-weight: 700; margin: 0;} .goatEvent.event .page-tabMenu{margin-bottom: 3rem; position: sticky; top: 88px; z-index: 10;} .goatEvent.event .page-tabMenu .max-width {max-width: none;} .goatEvent.event .page-tabMenu::after{content: ''; position: absolute; width: 100%; height: 1px; background-color: #97D4E0; left: 50%; transform: translateX(-50%); bottom: 0; touch-action: none; pointer-events: none;} .goatEvent.event .page-tabMenu .tab-inner{background-color: transparent; width: 100%; padding-top: 0.8rem; display: flex; justify-content: center; align-items: center; } .goatEvent.event .page-tabMenu.sticky-active {background: #b0f2ff;} .goatEvent.event .page-tabMenu .tab{outline: 0; background-color: transparent; border: none; font-size: var(--f-fontSize03); font-weight: 500; position: relative; line-height: 150%; letter-spacing: -0.26px; padding: 0 22px 13px; z-index: 1; cursor: pointer; transition: all 0.3s ease;color: var(--c-text02);} .goatEvent.event .page-tabMenu .tab::after{content: ''; position: absolute; width: 0; height: 4px; background:#FF3083; bottom: 0; left: 50%; transform: translateX(-50%); transition: width 0.3s ease; touch-action: none; pointer-events: none;} .goatEvent.event .page-tabMenu .tab + .tab{margin-left: 2rem;} .goatEvent.event .page-tabMenu .tab.active{font-weight: 700;color: #FF3083;} .goatEvent.event .page-tabMenu .tab.active::after{width: 100%;} .goatEvent.event .benefit-event-1 .innerBox {max-width: 56.4rem;} .goatEvent.event .benefit-event-1 .box-txt1{margin-bottom: 3rem;} .goatEvent.event .benefit-event-1 .gray-roundBox{border-radius: var(--r-radius01); border: 1px solid #EBEFF4; background: #FFF; box-shadow: 0px 4px 10px #EBEFF4; position: relative; padding: 2rem 3rem; font-size: var(--f-fontSize05); letter-spacing: -0.18px;} .goatEvent.event .benefit-event-1 .gray-roundBox + .gray-roundBox{margin-top: 2.7rem;} .goatEvent.event .benefit-event-1 .gray-roundBox .title{background: linear-gradient(90.47deg, #0094FE 3.42%, #00CEA5 99.6%); color: #fff; text-align: center; display: inline-block; position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); border-radius: 999999px; width: 5.5rem; font-size: var(--f-fontSize05); line-height: 2rem; letter-spacing: -0.18px; height: 2rem; font-weight: 700;} .goatEvent.event .benefit-event-1 .gray-roundBox .place{display: flex; flex-wrap: wrap; justify-content: center;} .goatEvent.event .benefit-event-1 .gray-roundBox .place li + li{margin-left: 1.2rem;} .goatEvent.event .benefit-event-1 .gray-roundBox .place li strong{margin-right: 0.6rem;font-weight: 600;} .goatEvent.event .benefit-event-1 .gray-roundBox .place li:nth-child(2){position: relative;} .goatEvent.event .benefit-event-1 .gray-roundBox .place li:nth-child(2)::before{content: '※ 3월 16일은 추첨 이벤트를 진행하지 않습니다. '; position: absolute; bottom: -1.6rem; left: 0; width: 100%; color: var(--c-text03); font-size: var(--f-detail);} .goatEvent.event .benefit-event-1 .gray-roundBox p b{font-weight: 600;} .goatEvent.event .benefit-event-1 .gray-roundBox .smallTxt{color: #666666; font-size: var(--f-detail); display: block; margin-top: 0.8rem; line-height: 150%; letter-spacing: -0.14px;} .goatEvent.event .benefit-event-1 .gray-roundBox .smallTxt + .smallTxt{margin-top: 0.2rem;} .goatEvent.event .benefit-event-1 .gray-roundBox.prize .prizeBox{background-color: #E5FBFF; width: 100%; border-radius: var(--r-radius01); padding: 1.2rem 1.6rem; text-align: center;} .goatEvent.event .benefit-event-1 .gray-roundBox.prize .prizeBox p{font-weight: 600; font-size:var(--f-fontSize05); line-height: 150%; letter-spacing: -0.2px;} .goatEvent.event .benefit-event-1 .gray-roundBox.prize .prizeBox span{display: block; font-size: var(--f-body2); line-height: 150%; letter-spacing: -0.14px; margin-top: 0.2rem;color: var(--c-text02);} .goatEvent.event .benefit-event-1 .col2{display: flex; flex-wrap: wrap; margin-top: 2rem;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox{width: calc(50% - 0.6rem); margin-right: 1.2rem; margin-bottom: 1.2rem; min-height: 8.4rem; text-align: left; padding: 1.2rem 1.45rem; position: relative;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox + .gray-roundBox{margin-top: 0;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox:nth-child(2n){margin-right: 0;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox:nth-last-of-type(1), .goatEvent.event .benefit-event-1 .col2 .gray-roundBox:nth-last-of-type(2){margin-bottom: 0;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox em{color: #FF4764; border: 1px solid #FFCBD3; border-radius: 4px; font-size: 0.65rem; padding: 4.5px 5.5px; display: inline-block; line-height: 1; margin-bottom: 0.5rem;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox strong{display: block; font-size: var(--f-fontSize04); letter-spacing: -0.22px; margin-bottom: 0.2rem; } .goatEvent.event .benefit-event-1 .col2 .gray-roundBox p{width: calc(100% - 7.9rem); font-size: var(--f-detail); letter-spacing: -0.14px;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox figure{background-repeat: no-repeat; background-size: cover; background-position: center; width: 7.9rem; aspect-ratio: 158/120; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img1{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_01-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img2{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_02-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img3{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_03-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img4{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_04-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img5{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_05-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img6{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_06-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img7{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_07-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img8{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_08-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img9{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_09-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img10{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_10-250211.png');} .goatEvent.event .benefit-checkIn{background-color: #D5FFB1; padding: 7rem 0;} .goatEvent.event .benefit-checkIn .boxWrap .gradientBorder{background: linear-gradient(180deg, #2744FF 0%, #007FFF 100%);} .goatEvent.event .benefit-checkIn .boxWrap .roundBox .tag{background: linear-gradient(90deg, #37C3FF 0%, #0095FF 50%, #37C3FF 100%);} .goatEvent.event .benefit-checkIn .boxWrap .gridList{display: flex; flex-wrap: wrap; justify-content: center; gap: 0;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li{width: calc(100%/4 - 0.9rem); background: transparent; border: none; padding: 0; text-align: center; margin-right: 1.2rem;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li:nth-child(4n){margin-right: 0;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li .imgWrap{border-radius: var(--r-radius01); background-color: #E5F7FF;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li .imgWrap figure {background-repeat: no-repeat; background-size: cover; background-position: center; aspect-ratio: 241/120; width: 100%;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li .sub{font-size: var(--f-fontSize05); font-weight: 400; margin-top: 0.6rem; letter-spacing: -0.2px;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li .smallTxt{font-size: var(--f-body2); color: #666; letter-spacing: -0.16px; line-height: 150%; margin-top: 0.2rem; display: block;} /* 출국 전 */ .goatEvent.event .benefit-checkIn .boxWrap .benefit-info.checkIn-blue .info-title > p{color: #3657FC;} .goatEvent.event .benefit-checkIn .boxWrap .benefit-info.checkIn-blue .info-title:before{background-color: #B8D4FF;} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-blue li:nth-child(1) .imgWrap figure {background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn1_01-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-blue li:nth-child(2) .imgWrap figure {background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn1_02-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-blue li:nth-child(3) .imgWrap figure {background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn1_03-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-blue li:nth-child(4) .imgWrap figure {background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn1_04-250203.png');} /* 출국 후 */ .goatEvent.event .benefit-checkIn .boxWrap .benefit-info.checkIn-red .info-title{margin-top: 2rem;} .goatEvent.event .benefit-checkIn .boxWrap .benefit-info.checkIn-red .info-title > p{color: #F560B2;} .goatEvent.event .benefit-checkIn .boxWrap .benefit-info.checkIn-red .info-title:before{background-color: #FFCEE7;} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-red li .imgWrap{background-color: #FFF3F7;} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-red li:nth-child(1) .imgWrap figure {background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn1_05-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-red li:nth-child(2) .imgWrap figure {background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn1_06-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-red li:nth-child(3) .imgWrap figure {background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn1_07-250203.png');} .goatEvent.event .benefit-checkIn .noticeWrap{text-align: left; font-size: var(--f-body2); line-height: 28px; letter-spacing: -0.48px; padding-top: 3rem;} .goatEvent.event .benefit-checkIn .noticeWrap strong{font-weight: 700; line-height: 40px; letter-spacing: -0.6px; font-size: var(--f-fontSize05); margin-bottom: 0.6rem; display: block;} .goatEvent.event .benefit-checkIn .noticeWrap p + strong{margin-top: 2.5rem;} .goatEvent.event .benefit-checkIn .noticeWrap p{position: relative; padding-left: 16px;} .goatEvent.event .benefit-checkIn .noticeWrap p.padding-none {padding-left: 0;} .goatEvent.event .benefit-checkIn .noticeWrap p span{position: absolute; left: 0; top: 0;} @media screen and (max-width: 1120px) { .goatEvent .max-width{padding: 0 16px;} } @media screen and (max-width: 980px) { .goatEvent.event .benefit-event-1 .col2 .gray-roundBox strong{width: calc(100% - 7.9rem)} } @media screen and (max-width: 768px) { .goatEvent{padding: 50px 0; background-color: #C2F5FF; background-image: none;} .goatEvent .sub-title{margin-bottom: 24px;} .goatEvent .sub-title > span{margin-top: 8px; font-size: var(--f-fontSize05); line-height: 150%; letter-spacing: -0.2px;} .goatEvent .sub-title > strong {line-height: 114%;} .goatEvent .boxWrap + .boxWrap{margin-top: 32px;} .goatEvent .boxWrap .innerBox{padding: 24px 16px 32px;} .goatEvent .boxWrap .roundBox .tag{height: 4.77rem;background: linear-gradient(90deg, #FF52C0 0%, #FF3083 50%, #FF46BB 100%); font-size: var(--f-fontSize03); line-height: 4.7rem;} .goatEvent .boxWrap .box-txt1{font-size: var(--f-fontSize04); line-height: 150%; letter-spacing: -0.16px;} .goatEvent .boxWrap .box-txt2 { margin: 4px 0 24px; } .goatEvent .pointWrap{margin: 16px auto;} .goatEvent .pointWrap .inner{background-color: #324DFF; right: auto; left: 50%; transform: translateX(-50%); padding: 0; line-height: 150%; letter-spacing: -0.2px; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column;} .goatEvent .pointWrap .inner::after{display: none;} .goatEvent .pointWrap .inner .txt1{margin-bottom: 8px; width: 100%;} .goatEvent .pointWrap .inner .txt2{font-size: var(--f-fontSize03); line-height: 150%; letter-spacing: -0.2px; width: 100%;} .goatEvent .pointWrap .inner .txt2.number span{font-size: 3.07rem; line-height: 130%; letter-spacing: -0.8px;} .goatEvent .gridList{gap: 8px;} .goatEvent .gridList li{grid-column: 6 span; padding: 16px 0 !important; text-align: center;} .goatEvent .gridList li.hasImg{padding: 16px 4px; display: block;} .goatEvent .gridList li strong{font-size: var(--f-body1); line-height: 150%; letter-spacing: -0.15px;} .goatEvent .gridList li p.sub, .goatEvent .benefit-3 .benefit-info.purple .gridList li p.sub{font-size: 0.92rem; line-height: 150%; letter-spacing: -0.12px;} .goatEvent .gridList li.hasImg .imgTicket{display: none;} .goatEvent .benefit-info .info-title{margin: 20px 0 12px;} .goatEvent .gridList li .top-tag{font-size: var(--f-detail); height: 20px; line-height: 20px; min-width: 42px; margin-bottom: 8px;} .goatEvent .benefit-1 .thumbWrap .col2 {margin-bottom: 24px;} .goatEvent .benefit-1 .thumbWrap .col2 .thumbImg{width: 100%; margin-right: 0;} .goatEvent .benefit-1 .thumbWrap .col2 .thumbImg + .thumbImg{margin-top: 8px;} .goatEvent .benefit-1 .col4 .thumbImg{width: calc(50% - 4px); margin-right: 8px; margin-bottom: 8px;} .goatEvent .benefit-1 .col4 .thumbImg:nth-child(2n){margin-right: 0;} .goatEvent .benefit-1 .col4 .thumbImg:nth-last-of-type(1), .goatEvent .benefit-1 .col4 .thumbImg:nth-last-of-type(2){margin-bottom: 0;} .goatEvent .benefit-1 .btn {margin-top: 0;} .goatEvent .benefit-1 .btn a{height: 3.08rem; margin-top: 24px;border-radius: 8px;} .goatEvent .benefit-2 .imageWrap{margin: 16px 0;} .goatEvent .benefit-3 .innerBox > h3 {font-size: var(--f-fontSize04); font-weight: 600; line-height: 150%;} .goatEvent .benefit-3 .top-imgWrap {margin: 12px 0 24px;} .goatEvent .benefit-3 .top-imgWrap img{max-width: 400px;} .goatEvent .benefit-3 .benefit-procedure{margin-top: 32px;} .goatEvent .benefit-3 .gridList.default li:nth-child(1), .goatEvent .benefit-3 .gridList.default li:nth-child(2), .goatEvent .benefit-3 .gridList.default li:nth-child(3){grid-column: 12 span;} .goatEvent .benefit-3 .gridList.default li:nth-child(4), .goatEvent .benefit-3 .gridList.default li:nth-child(5), .goatEvent .benefit-3 .gridList.default li:nth-child(6), .goatEvent .benefit-3 .gridList.default li:nth-child(7){grid-column: 6 span;} .goatEvent .benefit-3 .gridList.default li strong.iconBox{display: inline-block; padding-right: 28px;} .goatEvent .benefit-3 .gridList.default li strong.iconBox figure{width: 24px; height: 24px;} /* color */ .goatEvent .pointWrap.blue .inner{height: 64px;} .goatEvent .pointWrap.blue .inner .txt2{font-size: var(--f-fontSize01); letter-spacing: -0.5px;} .goatEvent .pointWrap.orange .inner{background-color: #FF7D21; height: 64px;} .goatEvent .pointWrap.orange .inner .txt2{font-size: var(--f-fontSize01); letter-spacing: -0.5px;} .goatEvent .pointWrap.green .inner{min-height: 114px; background-color: #00C026;} .goatEvent .pointWrap.green .inner .txt2{font-size: var(--f-fontSize01); line-height: 130%;} .goatEvent .benefit-3 .benefit-info.purple .gridList li .imgWrap{text-align: center; margin-top: 16px;} .goatEvent .benefit-3 .benefit-info.purple .gridList li .imgWrap span{width: 7.07rem; height: auto; aspect-ratio: 92/96;} .goatEvent .benefit-3 .benefit-procedure .gridList.blue li, .goatEvent .benefit-3 .benefit-procedure .gridList.orange li, .goatEvent .benefit-3 .benefit-procedure .gridList.green li{grid-column: 12 span;} /********************************* event.php *********************************/ .goatEvent.event .page-tabMenu{top: 39px;} .goatEvent.event .sub-title{margin-bottom: 24px;font-size: var(--f-fontSize01);} .goatEvent.event .sub-title span{display: block; font-size: var(--f-fontSize02); font-weight: 500; margin-bottom: 8px; line-height: 130%; letter-spacing: -0.44px;} .goatEvent.event .sub-title > strong {line-height: 128%;} .goatEvent.event .tabArea {padding: 50px 0; background: #C2F5FF;} .goatEvent.event .page-tabMenu{margin-bottom: 24px;background: #C2F5FF;} .goatEvent.event .page-tabMenu .tab{font-size: var(--f-fontSize05); font-weight: 400; padding: 0 12.5px 8px;} .goatEvent.event .page-tabMenu .tab::after {height: 2px;} .goatEvent.event .page-tabMenu .tab + .tab{margin-left: 16px;} .goatEvent.event .page-tabMenu .tab-inner{padding-top: 8px;} .goatEvent.event .boxWrap .innerBox {padding: 24px 20px 32px;} .goatEvent.event .benefit-event-1 .box-txt1 {margin-bottom: 40px;} .goatEvent.event .benefit-event-1 .gray-roundBox{padding: 30px 16px; font-size: var(--f-fontSize05); letter-spacing: -0.16px;} .goatEvent.event .benefit-event-1 .gray-roundBox .title{font-size: var(--f-fontSize05); height: 2.46rem; width: 7.39rem; top: -1.23rem; line-height: 2.46rem;} .goatEvent.event .benefit-event-1 .gray-roundBox .place li{width: 100%; text-align: center;} .goatEvent.event .benefit-event-1 .gray-roundBox .place li + li{margin-left: 0; margin-top: 8px;} .goatEvent.event .benefit-event-1 .gray-roundBox .place li strong{width: 100%; display: block; margin: 0 0 4px; } .goatEvent.event .benefit-event-1 .gray-roundBox .place li:nth-child(2)::before{bottom: -32px;} .goatEvent.event .benefit-event-1 .gray-roundBox + .gray-roundBox{margin-top: 32px;} .goatEvent.event .benefit-event-1 .gray-roundBox .smallTxt{margin-top: 12px; letter-spacing: -0.13px;} .goatEvent.event .benefit-event-1 .gray-roundBox .smallTxt + .smallTxt{margin-top: 8px;} .goatEvent.event .benefit-event-1 .gray-roundBox.prize{padding-bottom: 30px;} .goatEvent.event .benefit-event-1 .gray-roundBox.prize .prizeBox{width: 100%; padding: 16px 12px; border-radius: 8px; text-align: center;} .goatEvent.event .benefit-event-1 .gray-roundBox.prize .prizeBox span{margin-top: 4px; font-size: var(--f-body2);} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox{width: 100%; margin-right: 0; height: auto; text-align: center; padding: 20px 16px 16px; margin-bottom: 16px;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox em{font-size: var(--f-detail); padding: 2.5px 8px; margin-bottom: 8px; font-weight: 600;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox figure{position: static; margin: 3px auto 0; transform: none; aspect-ratio: 158/70; width: 12.15rem;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox strong{font-size: var(--f-fontSize03); letter-spacing: -0.2px; width: 100%;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox p{width: 100%;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox figure{aspect-ratio: 182/70; width: 14rem; margin-top: 8px;} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img1{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_01-mo-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img2{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_02-mo-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img3{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_03-mo-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img4{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_04-mo-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img5{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_05-mo-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img6{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_06-mo-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img7{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_07-mo-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img8{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_08-mo-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img9{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_09-mo-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox .img10{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-event-1_10-mo-250211.png');} .goatEvent.event .benefit-event-1 .col2 .gray-roundBox:nth-last-of-type(2){margin-bottom: 16px;} .goatEvent.event .benefit-checkIn{padding: 50px 0;} .goatEvent.event .benefit-checkIn .boxWrap .benefit-info.checkIn-red .info-title {margin-top: 32px;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li{width: calc(50% - 4px); margin-right: 8px; padding: 0 !important; margin-bottom: 24px;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li:nth-child(2n){margin-right: 0;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li:nth-last-of-type(1), .goatEvent.event .benefit-checkIn .boxWrap .gridList li:nth-last-of-type(2){margin-bottom: 0;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li .imgWrap{aspect-ratio: 1/1;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li .sub{letter-spacing: -0.16px; margin-top: 8px;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li .smallTxt{font-size: var(--f-fontSize05); letter-spacing: -0.16px; margin-top: 8px;} .goatEvent.event .benefit-checkIn .boxWrap .gridList li .imgWrap figure{aspect-ratio: 1/1;} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-blue li:nth-child(1) .imgWrap figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn-9_01-mo-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-blue li:nth-child(2) .imgWrap figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn-9_02-mo-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-blue li:nth-child(3) .imgWrap figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn-9_03-mo-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-blue li:nth-child(4) .imgWrap figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn-9_04-mo-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-red li:nth-child(1) .imgWrap figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn-9_05-mo-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-red li:nth-child(2) .imgWrap figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn-9_06-mo-250203.png');} .goatEvent.event .benefit-checkIn .boxWrap .gridList.checkIn-red li:nth-child(3) .imgWrap figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/benefit-checkIn-9_07-mo-250203.png');} .goatEvent.event .benefit-checkIn .noticeWrap{font-size: var(--f-body1); letter-spacing: -0.15px; padding-top: 30px; word-break: break-all;} .goatEvent.event .benefit-checkIn .noticeWrap p + strong{margin-top: 40px;} .goatEvent.event .benefit-checkIn .noticeWrap p{padding-left: 0;} .goatEvent.event .benefit-checkIn .noticeWrap p span{position: static;} .goatEvent.event .benefit-checkIn .noticeWrap strong{font-size: var(--f-fontSize03); letter-spacing: -0.6px; line-height: 29px; margin-bottom: 12px;} } /************************************************************* hover effect *************************************************************/ @media (hover: hover) and (pointer: fine) { .goatEvent.event .page-tabMenu .tab:hover{font-weight: 700;color: #FF3083;} /* .goatEvent.event .page-tabMenu .tab:hover::after{width: 100%;} */ }