@charset "utf-8"; #wrap {background: #fff;font-family: "SS", sans-serif;margin: 0 auto;} #wrap > div .visual {padding-bottom: 60px; background-color: #fff;} #wrap > div .visual > img {width: 100%;height: auto;} #wrap > div .visual > img.visual-mo {display: none} #wrap > div .tab-section > section {display: none;padding: 0 40px;} #wrap > div .tab-section > section.on {display: block} #wrap > div .tab-section > section > h2 {color: #0B0D0F;text-align: center;font-size: 40px;font-weight: 700;line-height: 56px;padding:80px 0;} #wrap > div .tab-section > section > .list-01:nth-child(2) {margin-bottom: 40px;} #wrap > div .tab-section > section > div > h3 {margin: 0 auto 40px;display: flex;max-width: 436px;width: 100%;height: 68px;padding: 10px 16px;justify-content: center;align-items: center;align-content: center;gap: 20px;flex-wrap: wrap;border-radius: 60px;background: linear-gradient(87deg, #D4F2FB -1.98%, #E5EDFC 69.73%, #CDD7FF 100.52%);color: #0B0D0F;font-size: 32px;font-weight: 700;line-height: normal;box-sizing: border-box} #wrap > div .tab-section > section > div > h3.wide {max-width: 620px;height: 84px;padding: 12px 28px;} #wrap > div .tab-section > section > div > h3.tall {height: auto;min-height: 116px;padding: 18px 16px;line-height: 1.2;text-align: center;} #wrap > div .tab-section > section > div > h3.tall br {display: block;} #wrap > div .tab-section > section > div > h3.select-on-title {line-height: 1.32;} #wrap > div .tab-section > section > .list-01 > ul > li {margin-top: 20px;position:relative;padding: 40px;border-radius: 40px;border: 2px solid #E0E4EB;background: #FFF;} #wrap > div .tab-section > section > .list-01 > ul > li:first-child {margin-top: 0;} #wrap > div .tab-section > section > .list-01 > ul > li .option {color: #0068FF;font-size: 26px;font-weight: 700;line-height: 32px;} #wrap > div .tab-section > section > .list-01 > ul > li h4 {margin: 6px 0 2px;color: #0B0D0F;font-size: 32px;font-weight: 700;line-height: normal;} #wrap > div .tab-section > section > .list-01 > ul > li .discount {color: #000;font-size: 40px;font-weight: 700;line-height: 48px;} #wrap > div .tab-section > section > .list-01 > ul > li > img {position: absolute;top: 50%;right: 40px;transform: translateY(-50%)} #wrap > div .tab-section > section > .list-02 > ul > li {border-radius: 40px;border: 2px solid #E0E4EB;padding: 40px;margin-top: 20px;} #wrap > div .tab-section > section > .list-02 > ul > li:first-child {margin-top: 0;} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li {position: relative;padding-top: 32px;margin-top: 32px;border-top: 2px solid #E0E4EB} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li:first-child {border: none;padding: 0;margin: 0;} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li > img {position: absolute;top: 50%;right: 40px;transform: translateY(-50%)} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li .option {color: #0068FF;font-size: 26px;font-weight: 700;line-height: 32px;margin-bottom: 20px;} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li .option2 {padding: 3.2px 9.6px;border-radius: 6.4px;background: #0B0D0F;color: #fff;display: inline-flex;font-size: 20px;font-weight: 700} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li h4 {color: #0B0D0F;font-size: 32px;font-weight: 700;line-height: normal;} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li .discount {color: #000;font-size: 40px;font-weight: 700;line-height: 48px;} #wrap > div .tab-section > section .no-select {margin-top: 100px;} #wrap > div .tab-section > section .no-select > h3 {margin: 0 auto 40px;display: flex;max-width: 436px;width: 100%;height: 68px;padding: 10px 16px;justify-content: center;align-items: center;align-content: center;gap: 20px;flex-wrap: wrap;border-radius: 60px;background: linear-gradient(87deg, #E7E7E7 -1.98%, #F0F0F0 100.52%);;color: #0B0D0F;font-size: 32px;font-weight: 700;line-height: normal;box-sizing: border-box} #wrap > div .tab-section > section .no-select > ul {padding: 8px 40px;border-radius: 32px;border: 2px solid #E0E4EB;} #wrap > div .tab-section > section .no-select > ul > li {padding: 32px 0;display: flex;justify-content: space-between;align-items: center;color: #0B0D0F;font-size: 32px;font-weight: 700;border-top: 2px solid #F5F6F7;} #wrap > div .tab-section > section .no-select > ul > li:first-child{border-top: none} #wrap > div .tab-section > section .no-select > ul > li > span {font-size: 40px;color: #0068FF} #wrap > div .tab-section > section > ul{margin: 40px 0 80px;} #wrap > div .tab-section > section > ul > li{position: relative;color: #868A93;font-size: 24px;margin-top: 16px;padding-left: 28px;line-height: normal} #wrap > div .tab-section > section > ul > li:first-child {margin-top: 0;} #wrap > div .tab-section > section > ul > li span {position: absolute;top: 15px;left: 10px;width: 6px;height: 6px;border-radius: 6px;background: #868A93} #wrap > div .tab-section > section > p {color: #0B0D0F;text-align: center;font-size: 36px;font-weight: 700;line-height: 48px;margin-bottom: 80px;} #wrap > div .tab-section > section > .button {padding: 32px 0;} #wrap > div .tab-section > section > .button a {display: block;height: 112px;border-radius: 24px;background-color: #0068FF;color: #fff;font-size: 36px;font-weight: 700;text-align: center;line-height: 112px;} #wrap > div .tab{position: relative;border-bottom: 2px solid #F1F1F3;background: #fff} #wrap > div .tab > div {display: flex;align-items: center;padding: 0 20px;} #wrap > div .tab > div > p {width: 50%} #wrap > div .tab > div > p button {width: 100%;z-index: 10;padding-bottom: 15px;border-bottom: 2px solid #fff;font-weight: 700;font-size: 32px;color: #9095A1;} #wrap > div .tab > div > p.on button {border-bottom: 4px solid #0B0D0F;color: #0B0D0F} #wrap > div .event {background-color: #fff;padding: 100px 40px 1px;border-bottom: 12px solid #f7f8f9;} #wrap > div .event.section-01 {border-top: 12px solid #f7f8f9} #wrap > div .event h2 {max-width: 204px;box-sizing: border-box;padding: 10px 16px;display: flex;width: 100%;margin:0 auto;color: #fff;font-size: 32px;font-weight: 700;line-height: normal;border-radius: 60px;background: linear-gradient(87deg, #0B0D0F -1.98%, #38393D 100.52%);justify-content: center;margin-bottom: 40px;} #wrap > div .event h3 {text-align: center;font-weight: 700;line-height: normal;color: #0B0D0F;font-size: 48px;margin-bottom: 80px} #wrap > div .event h3 strong {color: #0068FF} #wrap > div .event > div {margin-bottom: 72px;} #wrap > div .event > div > h4 {color: #0B0D0F;font-weight: 700;font-size: 34px;line-height: 48px;margin-bottom: 20px;} #wrap > div .event > div > p {color: #0B0D0F;font-size: 30px;line-height: 48px;} #wrap > div .event > div > p.period {font-weight: 700} #wrap > div .event > div .list{margin-top: 20px;} #wrap > div .event > div .list > li {padding-left: 28px;font-weight: 500;margin-top: 5px;position: relative;line-height: normal;color: #0B0D0F;font-size: 28px;} #wrap > div .event > div .list > li:first-child {margin-top: 0;} #wrap > div .event > div .list > li:before {content: "";position: absolute;top: 20px;left: 1px;width: 6px;height: 6px;background-color: #0B0D0F;border-radius: 6px;} #wrap > div .event > div .caution {border-radius: 20px;background: #F7F8FA;padding: 32px;margin: 32px 0 40px;} #wrap > div .event > div .caution > ul > li {position: relative;padding-left: 28px;margin-top: 20px;font-size: 24px;line-height: normal;color: #868A93} #wrap > div .event > div .caution > ul > li:first-child {margin-top: 0;} #wrap > div .event > div .caution > ul > li:before {content: "";position: absolute;top: 15px;left: 1px;width: 6px;height: 6px;border-radius: 6px;background-color: #868A93} #wrap > div .event > div > dl{margin-top: 40px;} #wrap > div .event > div > dl.join{display: flex;gap: 0 32px;} #wrap > div .event > div > dl > dt {color: #0068FF;font-size: 32px;line-height: normal;font-weight: 700} #wrap > div .event > div > dl > dd {color: #0B0D0F;font-size: 32px;line-height: normal;margin-top: 20px;} #wrap > div .event > div > dl.join > dd {margin-top: 0;} #wrap > div .event > div > dl > dd > ul {margin-top: 24px;} #wrap > div .event > div > dl > dd > ul > li {font-size: 28px;margin-top: 8px;line-height: normal} #wrap > div .event > div > dl > dd > ul > li:first-child {margin-top: 0;} #wrap > div .event > div > dl > dd > ol{margin-top: 24px;} #wrap > div .event > div > dl > dd > ol > li {position: relative;font-size: 28px;margin-top: 8px;line-height: normal;padding-left: 30px;} #wrap > div .event > div > dl > dd > ol > li span {position: absolute;top: 0;left: 0;} #wrap > div .event > div > dl > dd .caution {margin-left: -50px;margin-bottom: 0;} #wrap > div .event .balloon {padding: 56px 40px;border-radius: 32px;background: #F7F8FA;margin-bottom: 60px;} #wrap > div .event .balloon dl {margin-bottom: 56px;} #wrap > div .event .balloon dl dt {text-align: center;margin-bottom: 32px;line-height: normal} #wrap > div .event .balloon dl dt span {border-radius: 60px;background: #0B0D0F;display: inline-block;padding: 10px 16px;color: #fff;box-sizing: border-box;font-size: 28px;font-weight: 700} #wrap > div .event .balloon dl dd {font-weight: 700;font-size: 40px;color: #0B0D0F;line-height: normal;text-align: center} #wrap > div .event .balloon dl dd em {color: #0068FF;} #wrap > div .event .balloon > div {margin-bottom: 56px;color: #0B0D0F;} #wrap > div .event .balloon > div > h4 {margin-bottom: 20px;font-weight: 700;font-size: 32px;line-height: normal} #wrap > div .event .balloon > div > p {font-size: 30px;} #wrap > div .event .balloon > .caution {padding-top: 40px;border-top: 2px solid #ECECEC;margin-bottom: 0;} #wrap > div .event .balloon > .caution > ul > li {position: relative;padding-left: 28px;margin-top: 20px;font-size: 24px;line-height: normal;color: #868A93} #wrap > div .event .balloon > .caution > ul > li:first-child {margin-top: 0;} #wrap > div .event .balloon > .caution > ul > li:before {content: "";position: absolute;top: 15px;left: 1px;width: 6px;height: 6px;border-radius: 6px;background-color: #868A93} #wrap > div .event .balloon2 {padding: 56px 40px;border-radius: 32px;box-shadow: 0 0 24px rgba(0, 0, 0, .2);background-color: #F7F8F9;margin-bottom: 60px;} #wrap > div .event .balloon2 dl {margin-bottom: 56px;} #wrap > div .event .balloon2 dl dt {text-align: center;margin-bottom: 32px;line-height: normal} #wrap > div .event .balloon2 dl dt span {border-radius: 60px;background: #0B0D0F;display: inline-block;padding: 10px 16px;color: #fff;box-sizing: border-box;font-size: 28px;font-weight: 700} #wrap > div .event .balloon2 dl dd {font-weight: 700;font-size: 40px;color: #0B0D0F;line-height: normal;text-align: center} #wrap > div .event .balloon2 dl dd em {color: #0068FF;} #wrap > div .event .balloon2 > div {margin-bottom: 56px;color: #0B0D0F;} #wrap > div .event .balloon2 > div > h4 {margin-bottom: 20px;font-weight: 700;font-size: 32px;line-height: normal} #wrap > div .event .balloon2 > div > p {font-size: 30px;} #wrap > div .event .balloon2 > .caution {padding-top: 40px;border-top: 2px solid #ECECEC;margin-bottom: 0;} #wrap > div .event .balloon2 > .caution > ul > li {position: relative;padding-left: 28px;margin-top: 20px;font-size: 24px;line-height: normal;color: #868A93} #wrap > div .event .balloon2 > .caution > ul > li:first-child {margin-top: 0;} #wrap > div .event .balloon2 > .caution > ul > li:before {content: "";position: absolute;top: 15px;left: 1px;width: 6px;height: 6px;border-radius: 6px;background-color: #868A93} #wrap > div .event > .button {padding: 32px 0;} #wrap > div .event > .button a {display: block;height: 112px;border-radius: 24px;background-color: #0068FF;color: #fff;font-size: 36px;font-weight: 700;text-align: center;line-height: 112px;} #wrap > div .bottom-button {position: fixed;bottom: 0;left: 50%;width: 100%;align-items: center;z-index: 10;max-width: 768px;transform: translateX(-50%)} #wrap > div .bottom-button > button {position: absolute;bottom: 160px;right: 0;display: none} #wrap > div .bottom-button > a {display: flex;margin: 32px 40px 40px 40px;border-radius: 24px;background: #0068FF;justify-content: center;color: #fff;font-size: 36px;font-weight: 700;padding: 32px 0;} #wrap > div > footer {padding-bottom: 122px;} #wrap > div > footer > div {padding: 0 40px 80px;} #wrap > div > footer > div h3{padding: 36px 0;color: #0B0D0F;font-size: 36px;line-height: normal;font-weight: 700} #wrap > div > footer > div > div {} #wrap > div > footer > div > div > ul {} #wrap > div > footer > div > div > ul > li {padding-left: 28px;position: relative;font-size: 28px;color: #868A93;margin-top: 24px;line-height: normal} #wrap > div > footer > div > div > ul > li:first-child {margin-top: 0;} #wrap > div > footer > div > div > ul > li.bold {font-weight: 700} #wrap > div > footer > div > div > ul > li > span {position: absolute;top: 20px;left: 0;width: 6px;height: 6px;background: #868A93;border-radius: 6px;} #wrap > div > footer > div > div > ul > li > ul {margin-top: 8px;} #wrap > div > footer > div > div > ul > li > ul > li {margin-top: 8px;} #wrap > div > footer > div > div > ul > li > ul > li > ul > li {position: relative;padding-left: 30px;margin-top: 8px;} #wrap > div > footer > div > div > ul > li > ul > li > ul > li > span{position: absolute;top: 0;left: 0;} /* 스타일 중복 적용 */ #wrap > div .tab-section > section {padding: 0 20px;} #wrap > div .tab-section > section > h2 {font-size: 20px;line-height: 28px;padding: 40px 0;} #wrap > div .tab-section > section > .list-01:nth-child(2) {margin-bottom: 20px;} #wrap > div .tab-section > section > div > h3 {margin: 0 auto 20px;max-width: 218px;height: 34px;padding: 5px 8px;gap: 10px;border-radius: 30px;font-size: 16px;} #wrap > div .tab-section > section > div > h3.wide {max-width: 310px;height: 42px;padding: 6px 14px;} #wrap > div .tab-section > section > div > h3.tall {height: auto;min-height: 60px;padding: 10px 8px;line-height: 1.2;text-align: center;} #wrap > div .tab-section > section > div > h3.select-on-title {line-height: 1.32;} #wrap > div .tab-section > section > .list-01 > ul > li {margin-top: 10px;padding: 20px;border-radius: 20px;border: 1px solid #E0E4EB;} #wrap > div .tab-section > section > .list-01 > ul > li .option {font-size: 13px;line-height: 16px;} #wrap > div .tab-section > section > .list-01 > ul > li h4 {margin: 3px 0 1px;font-size: 16px;} #wrap > div .tab-section > section > .list-01 > ul > li .discount {font-size: 20px;line-height: 24px;} #wrap > div .tab-section > section > .list-01 > ul > li > img {right: 20px;width: 45px;height: 45px;} #wrap > div .tab-section > section > .list-02 > ul > li {border-radius: 20px;border: 1px solid #E0E4EB;padding: 20px;margin-top: 10px;} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li {padding-top: 16px;margin-top: 16px;border-top: 1px solid #E0E4EB} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li > img {right: 20px;width: 45px;height: 45px} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li .option {font-size: 13px;font-weight: 700;line-height: 16px;margin-bottom: 10px;} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li .option2 {padding: 1.6px 4.8px;border-radius: 3.2px;font-size: 10px;} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li h4 {font-size: 16px;} #wrap > div .tab-section > section > .list-02 > ul > li > ul > li .discount {font-size: 20px;line-height: 24px;} #wrap > div .tab-section > section .no-select {margin-top: 50px;} #wrap > div .tab-section > section .no-select > h3 {margin: 0 auto 20px;max-width: 218px;height: 34px;padding: 5px 8px;gap: 10px;border-radius: 30px;font-size: 16px;} #wrap > div .tab-section > section .no-select > ul {padding: 4px 20px;border-radius: 16px;border: 1px solid #E0E4EB;} #wrap > div .tab-section > section .no-select > ul > li {padding: 16px 0;font-size: 16px;border-top: 1px solid #F5F6F7;} #wrap > div .tab-section > section .no-select > ul > li > span {font-size: 20px;} #wrap > div .tab-section > section > ul{margin: 10px 0 40px;} #wrap > div .tab-section > section > ul > li{font-size: 12px;margin-top: 8px;padding-left: 14px;} #wrap > div .tab-section > section > ul > li span {top: 7px;left: 5px;width: 3px;height: 3px;border-radius: 3px;} #wrap > div .tab-section > section > p {font-size: 18px;line-height: 24px;margin-bottom: 40px;} #wrap > div .tab-section > section > .button {padding: 16px 0;} #wrap > div .tab-section > section > .button a {height: 56px;border-radius: 12px;font-size: 18px;line-height: 56px;} #wrap > div .tab{border-bottom: 1px solid #F1F1F3;} #wrap > div .tab > div {padding: 0 10px;} #wrap > div .tab > div > p button {padding-bottom: 7.5px;border-bottom: 1px solid #fff;font-size: 16px;} #wrap > div .tab > div > p.on button {border-bottom: 2px solid #0B0D0F;} #wrap > div .event {background-color: #fff;padding: 50px 20px 1px} #wrap > div .event > div {margin-bottom: 36px;} #wrap > div .event > div > h4 {font-size: 34px;line-height: 48px;margin-bottom: 10px;} /*#wrap > div .event > div > p {font-size: 16px;line-height: 24px;}*/ #wrap > div .event > div .list{margin-top: 10px;} #wrap > div .event > div .list > li {padding-left: 14px;margin-top: 2.5px;font-size: 14px;} #wrap > div .event > div .list > li:before {top: 7px;left: 1px;width: 3px;height: 3px;border-radius: 3px;} #wrap > div .event > div .caution {border-radius: 10px;background: #F7F8FA;padding: 16px;margin: 16px 0 20px;} #wrap > div .event > div .caution > ul > li {padding-left: 14px;margin-top: 10px;font-size: 12px;} #wrap > div .event > div .caution > ul > li:before {top: 6.5px;left: 1px;width: 3px;height: 3px;border-radius: 3px;} #wrap > div .event > div > dl{margin-top: 20px;} #wrap > div .event > div > dl.join{gap: 0 16px;} #wrap > div .event > div > dl > dd > ul {margin-top: 12px;} #wrap > div .event > div > dl > dd > ul > li {font-size: 14px;margin-top: 4px;} #wrap > div .event > div > dl > dd > ol{margin-top: 12px;} #wrap > div .event > div > dl > dd > ol > li {font-size: 14px;margin-top: 4px;padding-left: 15px;} #wrap > div .event > div > dl > dd .caution {margin-left: -25px;margin-bottom: 0;} #wrap > div .event > .button {padding: 16px 0;} #wrap > div .event > .button a {display: block;height: 56px;border-radius: 12px;font-size: 18px;line-height: 56px;} #wrap > div .bottom-button > button {position: absolute;bottom: 80px;right: 0;display: none} #wrap > div .bottom-button > button img {width: 133px;height: auto} #wrap > div .bottom-button > a {display: flex;margin: 16px 20px 20px 20px;border-radius: 12px;font-size: 18px;padding: 16px 0;} #wrap > div > footer {padding-bottom: 61px;} #wrap > div > footer > div {padding: 0 20px 40px;} #wrap > div > footer > div h3{padding: 18px 0;font-size: 18px;} #wrap > div > footer > div > div > ul > li {padding-left: 14px;font-size: 14px;margin-top: 12px;line-height: normal} #wrap > div > footer > div > div > ul > li > span {top: 10px;width: 3px;height: 3px;border-radius: 3px;} #wrap > div > footer > div > div > ul > li > ul {margin-top: 4px;} #wrap > div > footer > div > div > ul > li > ul > li {margin-top: 4px;} #wrap > div > footer > div > div > ul > li > ul > li > ul > li {position: relative;padding-left: 15px;margin-top: 4px;} .thumb { text-align: center} /* --------------------------------------- COMMON --------------------------------------- */ .web_view { display:block; } .mob_view { display:none; } .d_flex { display: flex;} .ai_center { align-items: center;} .gap { gap: 0.3em;} .d_div { display: flex; gap: 8px;} .d_div .txt { padding-left: 0 !important; text-indent: 0 !important;} .d_div .txt:first-child { white-space: nowrap;} .fw_600 { font-weight: 600 !important;} .fw_700 { font-weight: 700 !important;} .fw_800 { font-weight: 800 !important;} .color_black { color: #333 !important;} .color_gray { color: #777 !important;} .color_blue { color: #0068ff !important;} .visual-pc { display: block;} .visual-mo { display: none;} .ft-evaluation {display: block !important;} .highlight { background-image: linear-gradient(transparent 65%, #fbf1bf 65%, #fbf1bf 90%, transparent 90%); background-repeat: no-repeat; background-size: 100% 100%; font-family: inherit; font-weight: 600; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: #0f0f0f;} .highlight2 { padding: 0.2em 0.1em;background-image: linear-gradient(transparent 10%, #0068ff 10%, #0068ff 90%, transparent 90%); background-repeat: no-repeat; background-size: 100% 100%; font-family: inherit; font-weight: 700; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: #fff;} .highlight3 {color: #0068FF;} .bf_hr { height: 2px; margin: 40px 0; background-color: #d2def8; border: none;} .evt_ttl_panel { display: flex; flex-direction: column; gap: 20px; align-items: center; margin-bottom: 70px; text-align: center;} .def_group + .evt_ttl_panel { margin-top: 70px;} .evt_ttl_panel .evt_ttl_lbl { display: block; padding: 18px 50px; border-radius: 100px; background-color: #0068ff; font-size: 32px; line-height: 1; letter-spacing: -0.056em; color: #fff;} .evt_ttl_panel .evt_ttl_lbl.type2 { background-color: #e7f1ff; font-weight: 700; color: #0068ff;} .evt_ttl_panel .ttl { font-size: 47px; line-height: 56px; letter-spacing: -0.056em; color: #313131; text-align: center;} .def_group { display: flex;} .def_group + .def_group { margin-top: 70px;} .def_group .def_dt { flex-shrink: 0; width: 240px;} .def_group .def_dt .txt { font-weight: 700; font-size: 32px; line-height: 1.2; letter-spacing: -0.056em; color: #333;} .def_group .def_dd .txt { font-size: 24px; line-height: 42px; letter-spacing: -0.036em; color: #333;} .def_group .def_dd .caution { display: flex; gap: 0.15em;} .def_group .def_dd .caution::before { transform: translateY(0.4em);} /* fixed 되는 박스 3개 */ .event_tab_pin {z-index: 300;display: flex;justify-content: center;gap: 0px;max-width: 1150px; margin: 0 auto;} .event_tab_pin .tab_btn {position: relative;width: calc((100% - 0px) / 3);display: flex;flex-direction: column;align-items: center;position: relative;height: auto;padding: 0;text-align: center;font-weight: 700;letter-spacing: -0.04em;color: #000;opacity: 1;} .event_tab_pin .tab_btn .bg {width: 100%;} .event_tab_pin .tab_btn .bx {display: flex;flex-direction: column; align-items: center;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);} .event_tab_pin .tab_btn .txt {position: relative;z-index: 10; transform: translateX(-10%); margin-top: 8px;font-weight: 700;font-size: 32px;line-height: 1;letter-spacing: 0;white-space: nowrap;} .event_tab_pin .tab_btn .txt::after {content: '';display: inline-block; position: absolute;top: 56%;transform: translateY(-50%); width: 28px; height: 28px; background: url(/assets/images/monimotwin/total/web/arw_down_round.png) no-repeat right center;background-size: 100% auto;margin-left: 9px;} .event_tab_pin .img { width: 100% !important; height: auto !important; max-width: 158px;} .btn_area { display: flex; justify-content: center; margin-top: 80px;} .btn_area .btn_blue { width: 528px; padding: 25px; border-radius: 100px; background-color: #0068ff; font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.056em; color: #fff; text-align: center;} .hr { height: 0; border: none; border-top: 24px solid #f7f8f9;} .ico_airplane { background-image: url('/assets/images/monimotwin/total/web/ico_airplane_02.png');} .ico_beamin { background-image: url('/assets/images/monimotwin/total/web/ico_baemin.png');}l .ico_naver { background-image: url('/assets/images/monimotwin/total/web/ico_naver.png');} .ico_coupang { background-image: url('/assets/images/monimotwin/total/web/ico_coupang.png?ver=241126');} .ico_nobrand { background-image: url('/assets/images/monimotwin/total/web/ico_nobrand.png');} .ico_kurly { background-image: url('/assets/images/monimotwin/total/web/ico_kurly.png?ver=241126');} .ico_paris { background-image: url('/assets/images/monimotwin/total/web/ico_paris.png');} .ico_baskin { background-image: url('/assets/images/monimotwin/total/web/ico_baskin.png');} .ico_gs { background-image: url('/assets/images/monimotwin/total/web/ico_gs.png');} .ico_gmarket { background-image: url('/assets/images/monimotwin/total/web/ico_gmarket.png?ver=241126');} .ico_lotte { background-image: url('/assets/images/monimotwin/total/web/ico_lotte.png?ver=260327') /* 아이콘 변경 시 ver 값 업데이트 필수 */ /* [캐시버스팅] 아이콘 이미지 변경 시 ?ver= 값을 반드시 업데이트할 것 */;} .ico_hanaro { background-image: url('/assets/images/monimotwin/total/web/ico_hanaro.png');} .ico_emart24 { background-image: url('/assets/images/monimotwin/total/web/ico_emart24.png?ver=241126');} .ico_lottemart { background-image: url('/assets/images/monimotwin/total/web/ico_lottemart.png?ver=241126');} .ico_twosome { background-image: url('/assets/images/monimotwin/total/web/ico_twosome.png?ver=241126');} .ico_kgcshop { background-image: url('/assets/images/monimotwin/total/web/ico_kgcshop.png?ver=241226');} .ico_11st { background-image: url('/assets/images/monimotwin/total/web/ico_11st.png?ver=241226');} .ico_traders { background-image: url('/assets/images/monimotwin/total/web/ico_traders.png?ver=241226');} .ico_samsungstore { background-image: url('/assets/images/monimotwin/total/web/ico_samsung_store.png');} .ico_naverstore { background-image: url('/assets/images/monimotwin/total/web/ico_naver_store.png');} .ico_koreanair { background-image: url('/assets/images/monimotwin/total/web/ico_korean_air.png?ver=250429');} .ico_emart { background-image: url('/assets/images/monimotwin/total/web/ico_emart.png?ver=250526');} .ico_oliveyoung { background-image: url('/assets/images/monimotwin/total/web/ico_oliveyoung.png?ver=250526');} .ico_musinsa { background-image: url('/assets/images/monimotwin/total/web/ico_musinsa.png?ver=250526');} .ico_ikea {background-image: url('/assets/images/250801/monimotwin/total/web/ico_ikea.png');} .ico_oliveyoung_online { background-image: url('/assets/images/monimotwin/total/web/ico_oliveyoung_online.png');} .ico_yogiyo { background-image: url('/assets/images/monimotwin/total/web/ico_yogiyo.png');} .event_benefits_grid .event_benefits_ttl_box {margin-bottom: 20px;} @media screen and (min-width: 1023.99px) { /* --------------------------------------- VISUAL --------------------------------------- */ #visual { margin: 0 auto;background-color:#fff;} #visual .visual-wrap .inner img { margin:0 auto; } /* --------------------------------------- CONTENTS --------------------------------------- */ .section { padding:120px 0; } .section .inner { width:100%; max-width: 1060px; padding:0 50px; margin:0 auto; box-sizing:border-box;} .section .event_num { display: block; width: 200px; margin: 0 auto 10px; padding: 15px; border-radius: 100px; font-size: 32px; line-height: 1; color: #fff; background-color: #0068ff; text-align: center;} .color_blue { color: #0068ff !important;} /* --------------------------------------- CONTENTS --------------------------------------- */ /* section :: 이벤트 2 링크안내 -------------- */ .section03 { padding: 0;} .section03 .center { width: 100%; max-width: 1060px; padding: 0 50px; margin: 0 auto; box-sizing: border-box;} .section03 .event_card .center { padding: 0;} .section03 .event_card .center .event_num { margin: 0 auto 30px;} .section03 .event_card .center > .ttl { font-size: 48px; line-height: 1.2; text-align: center;} .section03 .event_card .thumb { max-width: 636px; margin: 60px auto 70px; text-align: center;} .section03 .event_card .event_list { display: flex; flex-direction: column; gap: 60px;} .section03 .event_card .event_item:not(.linkplus) { display: flex;} /*.section03 .event_card .event_item.linkplus { margin-top: 35px;}*/ .section03 .event_card .event_item:not(.linkplus) .ttl { width: 100%; max-width: 243px;} .section03 .event_card .event_item .ttl { font-weight: 700; font-size: 32px;} .section03 .event_card .event_item > .txt { font-size: 24px;} .section03 .event_card .event_item .ico { display: inline-block; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;} .section03 .event_card .pc_box { padding: 35px 20px; border-radius: 30px; box-shadow: 0 0 24px rgba(0, 0, 0, .2); background-color: #fff;} .section03 .event_card .pc_box .d_flex.ai_center { justify-content: center;} .section03 .event_card .order_list { display: flex; flex-direction: column; gap: 30px;} .section03 .event_card .order_box { display: flex; flex-direction: column; gap: 12px;} .section03 .event_card .order_box .order_num { display: block; transform: translateY(0.13em); font-weight: 700; font-size: 28px; color: #4476f7; line-height: 1; letter-spacing: -0.02em; white-space: nowrap;} .section03 .event_card .order_box .txt { font-size: 24px; line-height: 42px;} .section03 .event_card .event_benefits { margin-top: 0;} .event_benefits_grid { display: flex; flex-direction: column; } .event_benefits_grid .event_benefits_box { width: 100%;} .event_benefits_grid .event_benefits_ttl_box .event_benefits_ttl { font-weight: 600; font-size: 24px; line-height: 35px; color: #000;} .event_benefits_grid .event_benefits_ttl_box .event_benefits_ttl .sm { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: inherit;} .event_benefits_grid .event_benefits_view_box .event_benefits_view { display: inline-block; margin-left: auto; padding: 18px 24px; border-radius: 12px; background-color: #e9f3ff; font-weight: 600; font-size: 26px; line-height: 1; color: #0068ff;} .section03 .event_card .event_benefits_box + .event_benefits_box { margin-top: 50px;} .section03 .event_card .linkplus_list { display: grid; gap: 26px 80px;} .section03 .event_card .linkplus_list.type2 { display: flex; justify-content: center;} .section03 .event_card .linkplus_item { display: flex; align-items: center; gap: 10px;} .section03 .event_card .linkplus_item .txt em {font-size: 16px;} .section03 .event_card .linkplus_item .ico { width: 47px; min-width: 47px; height: 47px; border-radius: 50%; border: 1px solid #ededed; overflow: hidden; box-shadow: 0 3px 8px rgba(204, 224, 247, 0.5);} .section03 .event_card .linkplus_item .txt { font-size: 18px; line-height: 22px; color: #0b0d0f; letter-spacing: -0.04em;} .section03 .event_card .linkplus_item .txt .color_blue { display: inline-block; position: relative; font-size: 18px; letter-spacing: inherit;} /* .section03 .event_card .linkplus_item .txt .color_blue::before { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 12px; background-color: rgba(0, 104, 255, .08);} */ .section03 .event_card .add_box { margin-top: 40px; background-color: transparent;} .section03 .event_card .add_box br { display: none;} .section03 .event_card .event_item .order_list .ico { width: 195px; height: 26px; margin-left: 0; margin-right: 8px; vertical-align: middle;} .section03 .event_card .event_item .order_list .ico + .txt { vertical-align: middle;} .section03 .btn_blue { display: inline-block; width: 100%; max-width: 530px; height: 76px; margin: -10px auto 0; line-height: 76px; border-radius: 50px; background: #0068ff; text-align: center; font-weight: 700; font-size: 30px; color: #fff;} /* section :: 이벤트 3 -------------- */ .section04 .thumb {margin-bottom: 70px;} .ico_linkplus { width: 320px; height: 40px; margin-left: 13px; background-image: url('/assets/images/monimotwin/total/web/ico_linkplus.png');} .add_box { margin-top: 45px; padding: 35px 25px; border-radius: 30px; background-color: rgba(228, 229, 230, 0.7);} .add_box .add_list { display: flex; flex-direction: column; gap: 30px;} .add_box .add_item { display: flex; gap: 8px; justify-content: center;} .add_box .add_item::before { content: ''; display: block; flex-shrink: 0; transform: translateY(22%); width: 24px; height: 24px; border-radius: 50%; background-image: url('/assets/images/monimotwin/total/web/mark.png'); background-position: center center; background-size: 100% auto; background-repeat: no-repeat;} .add_box .add_item .txt { font-weight: 300; font-size: 24px; color: rgba(0, 0, 0, 0.6); letter-spacing: -0.02em;} /* section03 :: 이벤트 1 유의사항 ----- */ .notice { padding:0; background:#fafafa; } .notice .title { padding:34px 0; background-color:#333; cursor: pointer; } .notice .title h2 { position:relative; font-size:32px; color:#fff; font-weight:bold; line-height:1; } .notice .title h2:before { content:''; position:absolute; right:0; top:14px; display:block; width:24px; height:4px; background:#fff; transition:.2s; } .notice .title h2:after { content:''; position:absolute; right:10px; top:4px; display:block; width:4px; height:24px; background:#fff; transition:.2s; } .notice .title.on h2:before { opacity: 0; } .notice .title.on h2:after { transform:rotate(90deg); } .notice .content { display:none; } .notice .content ul { padding:32px 0 100px; } .notice .content ul li { position:relative; padding-left:20px; color:#777; font-size:28px; line-height:1.625em; letter-spacing: -0.056em; } .notice .content ul li:before { content:'-'; position:absolute; left:0; display:inline-block; } } @media screen and (max-width: 1000px) { /* --------------------------------------- VISUAL --------------------------------------- */ #visual { margin: 0 auto;background-color:#fff;} #visual .visual-wrap .inner img { margin:0 auto; } #wrap > div .tab > div > p button img:first-child{display: none} /* --------------------------------------- CONTENTS --------------------------------------- */ #contents { width:100%; height:100%; margin: 0 auto; background: #fff; } .section { padding:120px 0; } .section .inner { width:100%; max-width:720px; padding:0 50px; margin:0 auto; box-sizing:border-box; } .section .event_num { display: block; width: fit-content; padding: 10px 30px; border-radius: 28px; font-size: 40px; line-height: 1; color: #fff; background-color: #0068ff;} .section h2 {} .color_blue { color: #0068ff !important;} /* fixed 되는 박스 3개 */ .event_tab_pin {padding: 0 1.95vw !important;} .event_tab_pin .tab_btn .txt {font-size: 3.7vw;transform: translateX(-5%);margin-top: 6px;} .event_tab_pin .tab_btn .txt::after {width: 3.5vw;height: 3.5vw;margin-left: 1vw;background-size: 100% auto;} .event_tab_pin .img {width: auto !important;height: 11.5vw !important;object-fit: contain;} /* section :: 이벤트 2 링크안내 -------------- */ .section03 { padding: 0;} .section03 .event_card .center { padding: 0;} .section03 .event_card .center .event_num { margin: 0 auto 55px;} .section03 .event_card .center > .ttl { font-size: 60px; line-height: 1.2; text-align: center;} .section03 .event_card .thumb { max-width: 636px; margin: 45px auto 50px; text-align: center;} .section03 .event_card .event_list { display: flex; flex-direction: column; gap: 60px;} /*.section03 .event_card .event_item.linkplus { margin-top: 35px;}*/ .section03 .event_card .event_item .ttl { font-weight: 700; font-size: 42px;} .section03 .event_card .event_item > .txt { font-size: 34px;} .section03 .event_card .event_item > .ttl + * { margin-top: 20px;} .section03 .event_card .event_item .ico { display: inline-block; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;} .section03 .event_card .order_list { display: flex; flex-direction: column; margin-top: 20px; gap: 30px;} .section03 .event_card .order_box { display: flex; flex-direction: column; gap: 12px;} .section03 .event_card .order_box .order_num { display: block; transform: translateY(0.13em); font-weight: 700; font-size: 36px; color: #4476f7; line-height: 1; letter-spacing: -0.02em; white-space: nowrap;} .section03 .event_card .order_box .txt { font-size: 34px; line-height: 50px;} .section03 .event_card .event_benefits { margin-top: 0; padding: 70px 85px; border-radius: 30px; box-shadow: 0 0 24px rgba(0, 0, 0, .2); background-color: #fff;} .event_benefits_grid { display: block;} .event_benefits_grid + .event_benefits_grid { margin-top: 24px;} .event_benefits_grid .event_benefits_ttl_box { margin-bottom: 20px;} .event_benefits_grid .event_benefits_ttl_box .event_benefits_ttl { font-weight: 600; font-size: 24px; color: #000;} .event_benefits_grid .event_benefits_view_box { margin-top: 20px;} .event_benefits_grid .event_benefits_view_box .event_benefits_view { display: block; padding: 16px 24px; border-radius: 12px; background-color: #e9f3ff; font-weight: 600; font-size: 16px; line-height: 1; color: #0068ff; text-align: center;} .section03 .event_card .event_benefits_box + .event_benefits_box { margin-top: 50px;} .section03 .event_card .linkplus_item { display: flex; align-items: center; gap: 20px;} .section03 .event_card .linkplus_item + .linkplus_item { margin-top: 55px;} .section03 .event_card .linkplus_item .ico { width: 70px; height: 70px; border-radius: 50%; border: 1px solid #ededed; overflow: hidden; box-shadow: 0 3px 8px rgba(204, 224, 247, 0.5);} .section03 .event_card .linkplus_item .txt { font-size: 36px; line-height: 44px; color: #0b0d0f; letter-spacing: -0.02em;} .section03 .event_card .linkplus_item .txt em {font-size: 32px} .section03 .event_card .linkplus_item .txt .color_blue { position: relative;} /* .section03 .event_card .linkplus_item .txt .color_blue::before { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 12px; background-color: rgba(0, 104, 255, .08);} */ .section03 .event_card .add_box { margin-top: 60px;} .section03 .event_card .event_item .order_list .ico { width: 238px; height: 32px; margin-left: 0; margin-right: 8px; vertical-align: middle;} .section03 .event_card .event_item .order_list .ico + .txt { vertical-align: middle;} .section03 .btn_blue { display: inline-block; width: 100%; max-width: 340px; height: 95px; margin: 60px auto 0; line-height: 95px; border-radius: 50px; background: #0068ff; text-align: center; font-weight: 700; font-size: 32px; color: #fff;} .ico_linkplus { width: 175px; height: 23px; margin-left: 6px; background-image: url('/assets/images/monimotwin/total/web/ico_linkplus.png');} .section04 .thumb {margin-bottom: 6.836vw;} .add_box { margin-top: 45px; padding: 35px 25px; border-radius: 30px; background-color: rgba(228, 229, 230, 0.7);} .add_box .add_list { display: flex; flex-direction: column; gap: 30px;} .add_box .add_item { display: flex; gap: 8px;} .add_box .add_item::before { content: ''; display: block; flex-shrink: 0; transform: translateY(40%); width: 24px; height: 24px; border-radius: 50%; background-image: url('/assets/images/monimotwin/total/web/mark.png'); background-position: center center; background-size: 100% auto; background-repeat: no-repeat;} .add_box .add_item .txt { font-size: 28px; color: rgba(0, 0, 0, 0.6); letter-spacing: -0.02em;} /* section03 :: 이벤트 1 유의사항 ----- */ .notice { padding:0; background:#fafafa; } .notice .title { padding:34px 0; background-color:#333; cursor: pointer; } .notice .title h2 { position:relative; font-size:32px; color:#fff; font-weight:bold; line-height:1; } .notice .title h2:before { content:''; position:absolute; right:0; top:14px; display:block; width:24px; height:4px; background:#fff; transition:.2s; } .notice .title h2:after { content:''; position:absolute; right:10px; top:4px; display:block; width:4px; height:24px; background:#fff; transition:.2s; } .notice .title.on h2:before { opacity: 0; } .notice .title.on h2:after { transform:rotate(90deg); } .notice .content { display:none; } .notice .content ul { padding:32px 0 100px; } .notice .content ul li { position:relative; padding-left:20px; color:#777; font-size:28px; line-height:1.625em; letter-spacing: -0.056em; } .notice .content ul li:before { content:'-'; position:absolute; left:0; display:inline-block; } #wrap > div .event > div > h4 {font-size: 17px;line-height: 24px;} #wrap > div .event > div > p {font-size: 16px;line-height: 24px;} #wrap > div .event > div > dl > dt {font-size: 16px;} #wrap > div .event > div > dl > dd {font-size: 16px;margin-top: 10px;} #wrap > div .event h2 {max-width: 102px;padding: 5px 8px;font-size: 16px;border-radius: 30px;margin-bottom: 20px;} #wrap > div .event h3 {font-size: 24px;margin-bottom: 40px} #wrap > div .event .balloon {padding: 28px 20px;border-radius: 16px;margin-bottom: 30px;} #wrap > div .event .balloon dl {margin-bottom: 28px;} #wrap > div .event .balloon dl dt {margin-bottom: 16px;} #wrap > div .event .balloon dl dt span {border-radius: 30px;padding: 5px 8px;font-size: 14px;} #wrap > div .event .balloon dl dd {font-size: 20px;} #wrap > div .event .balloon > div {margin-bottom: 28px;} #wrap > div .event .balloon > div > h4 {margin-bottom: 10px;font-size: 16px;} #wrap > div .event .balloon > div > p {font-size: 15px;} #wrap > div .event .balloon > .caution {padding-top: 20px;border-top: 1px solid #ECECEC;margin-bottom: 0;} #wrap > div .event .balloon > .caution > ul > li {padding-left: 14px;margin-top: 10px;font-size: 12px;} #wrap > div .event .balloon > .caution > ul > li:before {content: "";position: absolute;top: 7.5px;left: 1px;width: 3px;height: 3px;border-radius: 3px;} #wrap > div .event .balloon2 {padding: 28px 20px;border-radius: 16px;margin-bottom: 30px;} #wrap > div .event .balloon2 dl {margin-bottom: 28px;} #wrap > div .event .balloon2 dl dt {margin-bottom: 16px;} #wrap > div .event .balloon2 dl dt span {border-radius: 30px;padding: 5px 8px;font-size: 14px;} #wrap > div .event .balloon2 dl dd {font-size: 20px;} #wrap > div .event .balloon2 > div {margin-bottom: 28px;} #wrap > div .event .balloon2 > div > h4 {margin-bottom: 10px;font-size: 16px;} #wrap > div .event .balloon2 > div > p {font-size: 15px;} #wrap > div .event .balloon2 > .caution {padding-top: 20px;border-top: 1px solid #ECECEC;margin-bottom: 0;} #wrap > div .event .balloon2 > .caution > ul > li {padding-left: 14px;margin-top: 10px;font-size: 12px;} #wrap > div .event .balloon2 > .caution > ul > li:before {content: "";position: absolute;top: 7.5px;left: 1px;width: 3px;height: 3px;border-radius: 3px;} } @keyframes up-down { from { margin:40px auto 28px; } to { margin:28px auto 40px; } } /* --------------------------------------- MEDIA QUERY --------------------------------------- */ @media(min-width:280px) and (max-width:1024px) { .web_view { display:none; } .mob_view { display:block; } #visual { background: #f9f9f9; } #visual .visual-wrap { width: 100%; margin: 0 auto; } #visual .visual-wrap .inner { padding: 0; } .bf_hr { height: 1px; margin: 20px 0; background-color: #d2def8; border: none;} .evt_ttl_panel { margin-bottom: 50px;} .def_group + .evt_ttl_panel { margin-top: 50px;} .evt_ttl_panel .evt_ttl_lbl { padding: 5px 15px; font-size: 20px;} .evt_ttl_panel .evt_ttl_lbl.type2 { padding: 9px 17px; font-size: 15px;} .evt_ttl_panel .ttl { font-size: 25px; line-height: 1.2; letter-spacing: -0.056em;} .def_group { display: flex; flex-direction: column; gap: 12px;} .def_group + .def_group { margin-top: 35px;} .def_group .def_dt { width: 100%;} .def_group .def_dt .txt { font-size: 21px;} .def_group .def_dd .txt { font-size: 17px; line-height: 22px;} .def_group .def_dd { display: flex; flex-direction: column; gap: 0.5em;} .def_group .def_dd .caution { line-height: 25px;} .def_group .def_dd .caution::before { transform: translateY(0.3em);} .btn_area { margin-top: 30px;} .btn_area .btn_blue { width: auto; padding: 15px 25px; font-weight: 600; font-size: 16px; letter-spacing: -0.06em;} .hr { border-top: 12px solid #f7f8f9;} /* --------------------------------------- CONTENTS --------------------------------------- */ /*.section { padding:60px 0; }*/ .section .inner { padding:0 25px; } .section .event_num { padding: 5px 15px; border-radius: 14px; font-size: 20px;} /* section01 :: 이벤트 -------------- */ @keyframes up-down { from { margin:20px auto 14px; } to { margin:14px auto 20px; } } /* section :: 이벤트 2 링크안내 -------------- */ /*.section03 { padding: 60px 0 40px;}*/ .section03 .event_card .center { padding: 0;} .section03 .event_card .center .event_num { margin: 0 auto 28px;} .section03 .event_card .center > .ttl { font-size: 30px;} .section03 .event_card .thumb { max-width: 636px; margin: 45px auto 50px; text-align: center;} .section03 .event_card .event_list { gap: 30px; margin: 0 auto;} /*.section03 .event_card .event_item.linkplus { margin-top: 18px;}*/ .section03 .event_card .event_item .ttl { font-size: 21px;} .section03 .event_card .event_item > .txt { font-size: 17px;} .section03 .event_card .event_item > .ttl + * { margin-top: 10px;} .section03 .event_card .order_list { margin-top: 10px; gap: 15px;} .section03 .event_card .order_box { gap: 6px;} .section03 .event_card .order_box .order_num { font-size: 18px;} .section03 .event_card .order_box .txt { font-size: 17px; line-height: 25px;} .section03 .event_card .event_benefits { margin-top: 0; padding: 35px 20px; border-radius: 15px;} .section03 .event_card .event_benefits_box + .event_benefits_box { margin-top: 25px;} .section03 .event_card .event_benefits_box { display: flex;} .section03 .event_card .linkplus_item { gap: 16px; width: 220px;} .section03 .event_card .linkplus_item + .linkplus_item { margin-top: 30px;} .section03 .event_card .linkplus_item .ico { flex-shrink: 0; width: 48px; height: 48px;} .section03 .event_card .linkplus_item .txt { font-size: 18px; line-height: 22px;} .section03 .event_card .linkplus_item .txt em {font-size: 16px;} /* .section03 .event_card .linkplus_item .txt .color_blue::before { height: 6px;} */ .section03 .event_card .event_item .order_list .ico { width: 120px; height: 16px; margin-right: 4px;} .section03 .btn_blue { max-width: 170px; height: 48px; margin: 30px auto 0; line-height: 48px; border-radius: 25px; font-size: 16px;} .add_box { margin-top: 23px; padding: 18px 13px; border-radius: 15px;} .add_box .add_list { gap: 15px;} .add_box .add_item { gap: 4px;} .add_box .add_item::before { width: 12px; height: 12px;} .add_box .add_item .txt { font-size: 14px;} /* section03 :: 이벤트 유의사항 ----- */ .notice { padding:0; } .notice .title { padding:10px 0; } .notice .title h2 { max-width:510px; margin:0 auto; font-size:20px; line-height:1.5em; } .notice .title h2:before { right:0px; top:14px; display:block; width:12px; height:2px; } .notice .title h2:after { right:5px; top:9px; display:block; width:2px; height:12px; } .notice .content { max-width:560px; display:none; } .notice .content ul { padding:16px 0 50px; } .notice .content ul li { padding-left:10px; font-size:14px; } } @media screen and (max-width: 1024px) { #wrap > div .visual > img.visual-pc {display: none} #wrap > div .visual > img.visual-mo {display: block} } /* 2605 LINK PLUS 신규 브랜드 아이콘 (5월 캠페인 전용) */ .ico_baemin_2605 { background-image: url('/assets/images/260501/iDSELECT_monimo/ico_baemin.png');} .ico_hanaro_2605 { background-image: url('/assets/images/260501/iDSELECT_monimo/ico_hanaro.png');} .ico_gsthefresh { background-image: url('/assets/images/260501/iDSELECT_monimo/ico_gsthefresh.png');} /* 2605 BONUS 혜택 박스 (EVENT 1 내부, 혜택 제공일 위) */ #wrap > div .event .bonus-box {margin-bottom: 36px; padding: 50px 20px 30px; border-radius: 20px; background: #F7F8FA;} #wrap > div .event .bonus-box .bonus-badge {max-width: 204px; box-sizing: border-box; padding: 10px 16px; display: flex; width: 100%; margin: 0 auto 40px; color: #fff; font-size: 32px; font-weight: 700; line-height: normal; border-radius: 60px; background: linear-gradient(87deg, #0B0D0F -1.98%, #38393D 100.52%); justify-content: center;} #wrap > div .event .bonus-box .bonus-title {text-align: center; font-weight: 700; line-height: normal; color: #0B0D0F; font-size: 48px; margin-bottom: 60px;} #wrap > div .event .bonus-box .bonus-title strong {color: #0068FF;} #wrap > div .event .bonus-box .bonus-title em {font-style: normal;} #wrap > div .event .bonus-box > h4 {color: #0B0D0F; font-weight: 700; font-size: 34px; line-height: 48px; margin-bottom: 20px;} #wrap > div .event .bonus-box > p {color: #0B0D0F; font-size: 32px; line-height: 1.5;} #wrap > div .event .bonus-box .bonus-list {margin-top: 16px;} #wrap > div .event .bonus-box .bonus-list li {position: relative; font-size: 28px; margin-top: 8px; padding-left: 30px; line-height: 1.5; color: #0B0D0F;} #wrap > div .event .bonus-box .bonus-list li span {position: absolute; top: 0; left: 0;} #wrap > div .event .bonus-box .bonus-keep {margin-top: 24px; font-size: 24px; color: #868A93;} @media screen and (max-width: 1024px) { #wrap > div .event .bonus-box {padding: 24px 16px 16px; border-radius: 16px;} #wrap > div .event .bonus-box .bonus-badge {max-width: 102px; padding: 5px 8px; margin-bottom: 20px; font-size: 16px; border-radius: 30px;} #wrap > div .event .bonus-box .bonus-title {font-size: 24px; margin-bottom: 28px;} #wrap > div .event .bonus-box > h4 {font-size: 17px; line-height: 24px; margin-bottom: 10px;} #wrap > div .event .bonus-box > p {font-size: 16px; line-height: 24px;} #wrap > div .event .bonus-box .bonus-list {margin-top: 12px;} #wrap > div .event .bonus-box .bonus-list li {font-size: 14px; padding-left: 18px; margin-top: 4px; line-height: 1.5;} #wrap > div .event .bonus-box .bonus-keep {margin-top: 12px; font-size: 12px;} } body { word-break: keep-all !important; } :root { --select-blue: #0068ff; --select-black: #0b0d0f; --select-gray: #868a93; --select-line: #e9e9ef; --select-section: #f7f8f9; } #wrap > div #contents { height: auto !important; } @media screen and (min-width: 1025px) { body { background: #fff !important; } #wrap { width: 100% !important; max-width: 1920px !important; margin: 0 auto !important; background: #fff !important; font-family: "Pretendard", sans-serif !important; } #wrap > div, #wrap > div #contents { width: 100% !important; background: #fff !important; } #wrap > div .visual { padding-bottom: 0 !important; background: #f6f7f9 !important; font-size: 0 !important; line-height: 0 !important; } #wrap > div .visual > img.visual-pc { display: block !important; width: 100% !important; height: auto !important; } #wrap > div .visual > img.visual-mo { display: none !important; } #wrap > div .tab { width: 960px !important; height: 78px !important; margin: 130px auto 0 !important; padding: 2px !important; border: 0 !important; border-bottom: 2px solid #f3f3f3 !important; border-radius: 8px !important; box-sizing: border-box !important; background: #fff !important; } #wrap > div .tab > div { display: flex !important; align-items: stretch !important; gap: 9px !important; width: 100% !important; height: 100% !important; padding: 0 !important; } #wrap > div .tab > div > p { flex: 1 1 0 !important; width: auto !important; } #wrap > div .tab > div > p button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; padding: 0 24px !important; border-bottom: 2px solid transparent !important; color: var(--select-gray) !important; font-size: 27px !important; font-weight: 400 !important; line-height: 23.5px !important; letter-spacing: -1.35px !important; } #wrap > div .tab > div > p.on button { border-bottom-color: #000 !important; color: #000 !important; } #wrap > div .tab-section { width: 960px !important; margin: 0 auto !important; padding-bottom: 130px !important; } #wrap > div .tab-section > section { display: none !important; padding: 0 !important; } #wrap > div .tab-section > section.on { display: block !important; } #wrap > div .tab-section > section > h2 { margin: 53px auto 0 !important; padding: 0 !important; color: #000 !important; font-size: 47px !important; font-weight: 700 !important; line-height: 51px !important; letter-spacing: -0.94px !important; text-align: center !important; } #wrap > div .tab-section > section > h2 + .list-01, #wrap > div .tab-section > section > h2 + .list-02 { margin-top: 53px !important; } #wrap > div .tab-section > section > .list-01 { margin-bottom: 40px !important; } #wrap > div .tab-section > section > div > h3, #wrap > div .tab-section > section .no-select > h3 { display: flex !important; align-items: center !important; justify-content: center !important; width: 388px !important; max-width: none !important; height: 68px !important; margin: 0 auto 20px !important; padding: 6px 22px !important; border-radius: 67px !important; box-sizing: border-box !important; color: #000 !important; font-size: 27px !important; font-weight: 700 !important; line-height: 23.5px !important; letter-spacing: -1.35px !important; text-align: center !important; background: linear-gradient(90deg, #d6f2fc 0%, #cbd5fc 100%) !important; } #wrap > div .tab-section > section .no-select > h3 { background: linear-gradient(87deg, #D4F2FB -1.98%, #E5EDFC 69.73%, #CDD7FF 100.52%); } #wrap > div .tab-section > section > div > h3.select-on-title { height: 82px !important; padding-top: 9px !important; padding-bottom: 9px !important; line-height: 31px !important; } #wrap > div .tab-section > section > .list-01 > ul, #wrap > div .tab-section > section > .list-02 > ul { display: flex !important; flex-direction: column !important; gap: 10px !important; } #wrap > div .tab-section > section > .list-01 > ul > li { position: relative !important; min-height: 120px !important; margin: 0 !important; padding: 16px 14px !important; border: 0.5px solid var(--select-line) !important; border-radius: 12px !important; box-sizing: border-box !important; background: #fff !important; } #wrap > div .tab-section > section > .list-01 > ul > li .option { display: block !important; width: 55px !important; color: var(--select-blue) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 23.5px !important; letter-spacing: -0.9px !important; } #wrap > div .tab-section > section > .list-01 > ul > li h4 { margin: 5px 0 !important; color: #000 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 23.5px !important; letter-spacing: -0.9px !important; } #wrap > div .tab-section > section > .list-01 > ul > li .discount { color: #000 !important; font-size: 24px !important; font-weight: 700 !important; line-height: 30px !important; letter-spacing: 0 !important; } #wrap > div .tab-section > section > .list-01 > ul > li > img { position: absolute !important; top: 50% !important; right: 14px !important; width: 82px !important; height: 84px !important; object-fit: contain !important; transform: translateY(-50%) !important; } #wrap > div .tab-section > section .no-select { margin-top: 40px !important; } #wrap > div .tab-section > section .no-select > ul { padding: 20px 27px !important; border: 0.5px solid var(--select-line) !important; border-radius: 12px !important; box-sizing: border-box !important; background: #fff !important; } #wrap > div .tab-section > section .no-select > ul > li { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 30px !important; padding: 0 !important; border: 0 !important; color: #000 !important; font-size: 24px !important; font-weight: 700 !important; line-height: 30px !important; letter-spacing: -1.2px !important; } #wrap > div .tab-section > section .no-select > ul > li + li { margin-top: 20px !important; padding-top: 20px !important; border-top: 0.5px solid var(--select-line) !important; } #wrap > div .tab-section > section .no-select > ul > li > span { color: var(--select-blue) !important; font-size: 24px !important; font-weight: 700 !important; line-height: 30px !important; letter-spacing: 0 !important; } #wrap > div .tab-section > section > ul { /*width: 462px !important;*/ margin: 32px 0 170px !important; } #wrap > div .tab-section > section > ul > li { position: relative !important; min-height: 32px !important; margin: 0 !important; padding-left: 14px !important; color: var(--select-gray) !important; font-size: 24px !important; font-weight: 400 !important; line-height: 31.5px !important; letter-spacing: -1.2px !important; } #wrap > div .tab-section > section > ul > li.no-break-note { width: max-content !important; max-width: none !important; white-space: nowrap !important; } #wrap > div .tab-section > section > ul > li span { position: absolute !important; top: 13.5px !important; left: 0 !important; width: 3px !important; height: 3px !important; border-radius: 50% !important; background: var(--select-gray) !important; } #wrap > div .tab-section > section > .button { padding: 0 !important; } #wrap > div .tab-section > section > .button a, #wrap > div .event > .button a, #wrap > div .bottom-button > a { display: flex !important; align-items: center !important; justify-content: center !important; width: 960px !important; height: 100px !important; margin: 0 auto !important; padding: 0 !important; border-radius: 12px !important; background: var(--select-blue) !important; color: #fff !important; font-size: 30px !important; font-weight: 700 !important; line-height: 30px !important; letter-spacing: 0 !important; text-align: center !important; } #wrap > div .tab-section > section > .list-02 > ul > li { margin: 0 !important; padding: 28px !important; border: 0.5px solid var(--select-line) !important; border-radius: 12px !important; } #wrap > div .tab-section > section > .list-02 > ul > li > ul > li { margin-top: 20px !important; padding-top: 20px !important; border-top: 0.5px solid var(--select-line) !important; } #wrap > div .tab-section > section > .list-02 > ul > li > ul > li:first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; } #wrap > div .tab-section > section > .list-02 > ul > li > ul > li .option, #wrap > div .tab-section > section > .list-02 > ul > li > ul > li h4 { font-size: 18px !important; line-height: 23.5px !important; } #wrap > div .tab-section > section > .list-02 > ul > li > ul > li .discount, #wrap > div .tab-section > section > .list-02 > ul > li > ul > li .discount2 { font-size: 24px !important; line-height: 30px !important; } #wrap > div .tab-section > section > .list-02 > ul > li > ul > li > img { right: 14px !important; width: 82px !important; height: 84px !important; object-fit: contain !important; } #wrap > div .event { width: 100% !important; padding: 130px 0 !important; border-bottom: 12px solid var(--select-section) !important; box-sizing: border-box !important; background: #fff !important; } #wrap > div .event.section-01 { border-top: 12px solid var(--select-section) !important; } #wrap > div .event h2 { display: flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; max-width: none !important; height: 63px !important; margin: 0 auto 35px !important; padding: 20px 57px !important; border-radius: 52px !important; box-sizing: border-box !important; color: #fff !important; font-size: 27px !important; font-weight: 700 !important; line-height: 23.5px !important; letter-spacing: -1.35px !important; background: #000 !important; } #wrap > div .event h3 { width: 100% !important; margin: 0 auto 71px !important; color: #000 !important; font-size: 47px !important; font-weight: 700 !important; line-height: 51px !important; letter-spacing: -0.94px !important; text-align: center !important; } #wrap > div .event h3 strong { color: var(--select-blue) !important; } #wrap > div .event > div, #wrap > div .event > section.balloon { width: 960px !important; margin-right: auto !important; margin-left: auto !important; } #wrap > div .event > section.balloon2 { width: 960px !important; margin-right: auto !important; margin-left: auto !important; } #wrap > div .event > div { position: relative !important; margin-bottom: 71px !important; padding-left: 225px !important; box-sizing: border-box !important; } #wrap > div .event > div > h4 { position: absolute !important; top: 0 !important; left: 0 !important; width: 225px !important; margin: 0 !important; padding-right: 20px !important; box-sizing: border-box !important; color: #000 !important; font-size: 30px !important; font-weight: 700 !important; line-height: 30px !important; letter-spacing: -1.5px !important; } #wrap > div .event > div > p, #wrap > div .event > div .list > li, #wrap > div .event > div > dl > dt, #wrap > div .event > div > dl > dd { color: #000 !important; font-size: 24px !important; font-weight: 400 !important; line-height: 31.5px !important; letter-spacing: -1.2px !important; } #wrap > div .event > div > p em, #wrap > div .event > div .list > li strong { font-weight: 700 !important; } #wrap > div .event > div .list { margin-top: 20px !important; } #wrap > div .event > div .list > li { position: relative !important; margin-top: 10px !important; padding-left: 13px !important; } #wrap > div .event > div .list > li:first-child { margin-top: 0 !important; } #wrap > div .event > div .list > li:before, #wrap > div .event > div .caution > ul > li:before, #wrap > div .event .balloon > .caution > ul > li:before, #wrap > div .event .balloon2 > .caution > ul > li:before, #wrap > div > footer > div > div > ul > li > span { position: absolute !important; top: 13.5px !important; left: 0 !important; width: 3px !important; height: 3px !important; border-radius: 50% !important; background: currentColor !important; content: "" !important; } #wrap > div .event > div .caution { width: 735px !important; margin: 20px 0 0 !important; padding: 17px !important; border-radius: 8px !important; box-sizing: border-box !important; background: var(--select-section) !important; } #wrap > div .event > div .caution > ul > li, #wrap > div .event .balloon > .caution > ul > li { position: relative !important; margin-top: 10px !important; padding-left: 13px !important; color: var(--select-gray) !important; font-size: 24px !important; font-weight: 400 !important; line-height: 31.5px !important; letter-spacing: -1.2px !important; } #wrap > div .event .balloon2 > .caution > ul > li { position: relative !important; margin-top: 10px !important; padding-left: 13px !important; color: var(--select-gray) !important; font-size: 24px !important; font-weight: 400 !important; line-height: 31.5px !important; letter-spacing: -1.2px !important; } #wrap > div .event > div .caution > ul > li:first-child, #wrap > div .event .balloon > .caution > ul > li:first-child { margin-top: 0 !important; } #wrap > div .event .balloon2 > .caution > ul > li:first-child { margin-top: 0 !important; } #wrap > div .event > div > dl { display: flex !important; gap: 12px !important; margin-top: 20px !important; } #wrap > div .event > div > dl:first-of-type { margin-top: 0 !important; } #wrap > div .event > div > dl > dt { flex: 0 0 auto !important; color: var(--select-blue) !important; font-weight: 700 !important; white-space: nowrap !important; } /*#wrap > div .event > div > dl.join > dt span::after { content: "."; }*/ #wrap > div .event > div > dl > dd { flex: 1 1 auto !important; margin-top: 0 !important; } #wrap > div .event > div > dl > dd .caution { margin-left: 0 !important; } #wrap > div .event > div.thumb, #wrap > div .event > div.section, #wrap > div .event > div.button { position: static !important; padding-left: 0 !important; } #wrap > div .event > div.thumb { text-align: center !important; } #wrap > div .event .balloon { padding: 44px 41px !important; border-radius: 18px !important; box-sizing: border-box !important; background: var(--select-section) !important; } #wrap > div .event .balloon dl { margin-bottom: 79px !important; } #wrap > div .event .balloon dl dt { margin-bottom: 35px !important; text-align: center !important; } #wrap > div .event .balloon dl dt span { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 63px !important; padding: 20px 57px !important; border-radius: 52px !important; box-sizing: border-box !important; color: #fff !important; font-size: 27px !important; font-weight: 700 !important; line-height: 23.5px !important; background: #000 !important; } #wrap > div .event .balloon dl dd { color: #000 !important; font-size: 47px !important; font-weight: 700 !important; line-height: 51px !important; letter-spacing: -0.94px !important; text-align: center !important; } #wrap > div .event .balloon dl dd em { color: var(--select-blue) !important; } #wrap > div .event .balloon > div { position: relative !important; margin-bottom: 40px !important; padding-left: 146px !important; box-sizing: border-box !important; } #wrap > div .event .balloon > div > h4 { position: absolute !important; top: 0 !important; left: 0 !important; width: 146px !important; margin: 0 !important; padding-right: 16px !important; box-sizing: border-box !important; color: #000 !important; font-size: 30px !important; font-weight: 700 !important; line-height: 30px !important; letter-spacing: -1.5px !important; } #wrap > div .event .balloon > div > p { color: #000 !important; font-size: 24px !important; line-height: 31.5px !important; letter-spacing: -1.2px !important; } #wrap > div .event .balloon > div.caution, #wrap > div .event .balloon > .caution { position: static !important; width: 878px !important; margin: 40px 0 0 !important; padding: 40px 0 0 !important; border-top: 0.5px solid var(--select-line) !important; border-radius: 0 !important; background: transparent !important; } #wrap > div .event .balloon2 { padding: 44px 41px !important; border-radius: 18px !important; box-sizing: border-box !important; background: var(--select-section) !important; } #wrap > div .event .balloon2 dl { margin-bottom: 79px !important; } #wrap > div .event .balloon2 dl dt { margin-bottom: 35px !important; text-align: center !important; } #wrap > div .event .balloon2 dl dt span { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 63px !important; padding: 20px 57px !important; border-radius: 52px !important; box-sizing: border-box !important; color: #fff !important; font-size: 27px !important; font-weight: 700 !important; line-height: 23.5px !important; background: #000 !important; } #wrap > div .event .balloon2 dl dd { color: #000 !important; font-size: 47px !important; font-weight: 700 !important; line-height: 51px !important; letter-spacing: -0.94px !important; text-align: center !important; } #wrap > div .event .balloon2 dl dd em { color: var(--select-blue) !important; } #wrap > div .event .balloon2 > div { position: relative !important; margin-bottom: 40px !important; padding-left: 146px !important; box-sizing: border-box !important; } #wrap > div .event .balloon2 > div > h4 { position: absolute !important; top: 0 !important; left: 0 !important; width: 146px !important; margin: 0 !important; padding-right: 16px !important; box-sizing: border-box !important; color: #000 !important; font-size: 30px !important; font-weight: 700 !important; line-height: 30px !important; letter-spacing: -1.5px !important; } #wrap > div .event .balloon2 > div > p { color: #000 !important; font-size: 24px !important; line-height: 31.5px !important; letter-spacing: -1.2px !important; } #wrap > div .event .balloon2 > div.caution, #wrap > div .event .balloon2 > .caution { position: static !important; width: 878px !important; margin: 40px 0 0 !important; padding: 40px 0 0 !important; border-top: 0.5px solid var(--select-line) !important; border-radius: 0 !important; background: transparent !important; } #wrap > div .event.section-03 .thumb img { width: 636px !important; height: auto !important; } #wrap > div .section03 .event_card .center { width: 100% !important; max-width: none !important; padding: 0 !important; } #wrap > div .section03 .event_card .pc_box { padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } #wrap > div .section03 .event_card .event_benefits { width: 960px !important; margin: 0 auto !important; padding: 38px 72px !important; border: 0.5px solid var(--select-line) !important; border-radius: 12px !important; box-sizing: border-box !important; box-shadow: none !important; background: #fff !important; } #wrap > div .event_benefits_grid { display: block !important; } #wrap > div .event_benefits_grid .event_benefits_ttl_box { margin-bottom: 34px !important; } #wrap > div .event_benefits_grid .event_benefits_ttl_box .event_benefits_ttl { color: #000 !important; font-size: 30px !important; font-weight: 700 !important; line-height: 38px !important; letter-spacing: -1.5px !important; } #wrap > div .section03 .event_card .linkplus_list { display: flex !important; flex-direction: column !important; gap: 34px !important; } #wrap > div .section03 .event_card .linkplus_item { display: flex !important; align-items: center !important; gap: 32px !important; } #wrap > div .section03 .event_card .linkplus_item + .linkplus_item { margin-top: 0 !important; } #wrap > div .section03 .event_card .linkplus_item .ico { width: 85px !important; min-width: 85px !important; height: 85px !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; background-size: 100% auto !important; } #wrap > div .section03 .event_card .linkplus_item .txt, #wrap > div .section03 .event_card .linkplus_item .txt em, #wrap > div .section03 .event_card .linkplus_item .txt span { color: #000 !important; font-size: 24px !important; font-weight: 700 !important; line-height: 30px !important; letter-spacing: -1.2px !important; } #wrap > div .section03 .event_card .linkplus_item .txt .color_blue { color: var(--select-blue) !important; } #wrap > div .bottom-button { position: fixed !important; left: 50% !important; bottom: 0 !important; z-index: 50 !important; width: 100% !important; max-width: 1920px !important; margin: 0 !important; padding: 40px 0 !important; box-sizing: border-box !important; transform: translateX(-50%) !important; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.88) 52%, rgba(255, 255, 255, 0) 100%) !important; pointer-events: none !important; } #wrap > div .bottom-button > button { bottom: 160px; /*display: none !important;*/ } #wrap > div .bottom-button > a { pointer-events: auto !important; } #wrap > div > footer { width: 960px !important; margin: 0 auto !important; padding: 130px 0 180px !important; background: #fff !important; } #wrap > div > footer > div { display: flex !important; align-items: flex-start !important; width: 960px !important; margin: 0 auto !important; padding: 0 0 85px !important; box-sizing: border-box !important; } #wrap > div > footer > div > h3 { flex: 0 0 225px !important; margin: -3px 0 0 !important; padding: 0 20px 0 0 !important; box-sizing: border-box !important; color: #000 !important; font-size: 30px !important; font-weight: 700 !important; line-height: 48px !important; letter-spacing: -1.5px !important; } #wrap > div > footer > div > div { flex: 1 1 auto !important; min-width: 0 !important; } #wrap > div > footer > div > div > ul > li { position: relative !important; margin-top: 10px !important; padding-left: 13px !important; color: var(--select-gray) !important; font-size: 24px !important; font-weight: 400 !important; line-height: 31.5px !important; letter-spacing: -1.2px !important; } #wrap > div > footer > div > div > ul > li:first-child { margin-top: 0 !important; } #wrap > div > footer > div > div > ul > li.bold { font-weight: 700 !important; } #wrap > div > footer > div > div > ul > li > ul, #wrap > div > footer > div > div > ul > li > ul > li { margin-top: 10px !important; } #wrap > div > footer > div > div > ul > li > ul > li > ul > li { position: relative !important; margin-top: 10px !important; padding-left: 46px !important; } #wrap > div > footer > div > div > ul > li > ul > li > ul > li > span { position: absolute !important; top: 0 !important; left: 20px !important; width: auto !important; height: auto !important; border-radius: 0 !important; background: transparent !important; } } /*@media screen and (min-width: 769px) and (max-width: 1024px) { #wrap > div .event { padding: 100px 40px 1px !important; } #wrap > div .event h2 { display: flex !important; width: fit-content !important; max-width: none !important; margin: 0 auto 40px !important; padding: 20px 57px !important; border-radius: 52px !important; font-size: 27px !important; line-height: 23.5px !important; } #wrap > div .event h3 { margin-bottom: 71px !important; font-size: 47px !important; line-height: 51px !important; } #wrap > div .event > div { position: relative !important; margin-bottom: 71px !important; padding-left: 225px !important; box-sizing: border-box !important; } #wrap > div .event > div > h4 { position: absolute !important; top: 0 !important; left: 0 !important; width: 225px !important; margin-bottom: 0 !important; padding-right: 20px !important; box-sizing: border-box !important; font-size: 30px !important; line-height: 30px !important; } #wrap > div .event > div > p, #wrap > div .event > div .list > li, #wrap > div .event > div > dl > dt, #wrap > div .event > div > dl > dd { font-size: 24px !important; line-height: 31.5px !important; } #wrap > div .event > div .list > li, #wrap > div .event > div .caution > ul > li { padding-left: 13px !important; } #wrap > div .event > div .list > li:before, #wrap > div .event > div .caution > ul > li:before { top: 13.5px !important; width: 3px !important; height: 3px !important; } #wrap > div .event > div .caution { margin: 20px 0 0 !important; padding: 17px !important; border-radius: 8px !important; } #wrap > div .event > div .caution > ul > li { margin-top: 8px !important; font-size: 24px !important; line-height: 31.5px !important; } #wrap > div .event > div > dl, #wrap > div .event.section-03 > div > dl { display: flex !important; align-items: flex-start !important; gap: 0 12px !important; margin-top: 16px !important; } #wrap > div .event > div > dl:first-of-type, #wrap > div .event.section-03 > div > dl:first-of-type { margin-top: 0 !important; } #wrap > div .event > div > dl > dt, #wrap > div .event.section-03 > div > dl > dt { flex: 0 0 auto !important; margin-top: 0 !important; white-space: nowrap !important; } #wrap > div .event > div > dl > dt span, #wrap > div .event.section-03 > div > dl > dt span { color: var(--select-blue) !important; font-weight: 700 !important; } #wrap > div .event > div > dl.join > dt span::after { content: "."; } #wrap > div .event > div > dl > dd, #wrap > div .event.section-03 > div > dl > dd { flex: 1 1 auto !important; margin-top: 0 !important; } #wrap > div .event > div.thumb, #wrap > div .event > div.section, #wrap > div .event > div.button { position: static !important; padding-left: 0 !important; } #wrap > div .event .balloon { margin-bottom: 60px !important; padding: 44px 41px !important; border-radius: 18px !important; } #wrap > div .event .balloon dl { margin-bottom: 79px !important; } #wrap > div .event .balloon dl dt span { padding: 20px 57px !important; border-radius: 52px !important; font-size: 27px !important; } #wrap > div .event .balloon dl dd { font-size: 47px !important; line-height: 51px !important; } #wrap > div .event .balloon > div { position: relative !important; margin-bottom: 40px !important; padding-left: 146px !important; box-sizing: border-box !important; } #wrap > div .event .balloon > div > h4 { position: absolute !important; top: 0 !important; left: 0 !important; width: 146px !important; margin-bottom: 0 !important; padding-right: 16px !important; box-sizing: border-box !important; font-size: 30px !important; line-height: 30px !important; } #wrap > div .event .balloon > div > p, #wrap > div .event .balloon > .caution > ul > li { font-size: 24px !important; line-height: 31.5px !important; } #wrap > div .event .balloon > div.caution { position: static !important; padding-left: 0 !important; } #wrap > div .event .balloon2 { margin-bottom: 60px !important; padding: 44px 41px !important; border-radius: 18px !important; } #wrap > div .event .balloon2 dl { margin-bottom: 79px !important; } #wrap > div .event .balloon2 dl dt span { padding: 20px 57px !important; border-radius: 52px !important; font-size: 27px !important; } #wrap > div .event .balloon2 dl dd { font-size: 47px !important; line-height: 51px !important; } #wrap > div .event .balloon2 > div { position: relative !important; margin-bottom: 40px !important; padding-left: 146px !important; box-sizing: border-box !important; } #wrap > div .event .balloon2 > div > h4 { position: absolute !important; top: 0 !important; left: 0 !important; width: 146px !important; margin-bottom: 0 !important; padding-right: 16px !important; box-sizing: border-box !important; font-size: 30px !important; line-height: 30px !important; } #wrap > div .event .balloon2 > div > p, #wrap > div .event .balloon2 > .caution > ul > li { font-size: 24px !important; line-height: 31.5px !important; } #wrap > div .event .balloon2 > div.caution { position: static !important; padding-left: 0 !important; } #wrap > div .event > .button a { height: auto !important; padding: 35px 0 !important; border-radius: 12px !important; font-size: 30px !important; line-height: 30px !important; } #wrap > div > footer > div { display: flex !important; align-items: flex-start !important; } #wrap > div > footer > div > h3 { flex: 0 0 225px !important; margin: 0 !important; padding: 0 20px 0 0 !important; box-sizing: border-box !important; font-size: 30px !important; } #wrap > div > footer > div > div { flex: 1 1 auto !important; min-width: 0 !important; } #wrap > div > footer > div > div > ul > li { font-size: 24px !important; line-height: 31.5px !important; } }*/ @media screen and (max-width: 999px) { #wrap > div .event > div .caution > ul > li:before { top: 6px !important; } #wrap > div .tab-section > section > ul > li span { top: 6px !important; } #wrap > div .event > div .list > li:before { top: 6.5px !important; } #wrap > div .event .balloon > .caution > ul > li:before { top: 6px !important; } #wrap > div > footer > div > div > ul > li > span { top: 7px !important; } #wrap > div .event .balloon2 > .caution > ul > li:before { top: 6.5px !important; } }