/* Paperlogy */ @import url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/subsets/Paperlogy-dynamic-subset.css"); @font-face { font-family: 'TJ Joy of singing'; src: url('/fonts/TJJoyofsingingL_TTF.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'TJ Joy of singing'; src: url('/fonts/TJJoyofsingingM_TTF.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'TJ Joy of singing'; src: url('/fonts/TJJoyofsingingB_TTF.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'TJ Joy of singing'; src: url('/fonts/TJJoyofsingingEB_TTF.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Jalnan2'; src: url('/fonts/Jalnan2TTF.ttf') format('truetype'); font-style: normal; } /* 공통 */ #wrap.boardPage .upload-viewWrap{padding-bottom: 16px; padding-top: 16px;} #wrap.boardPage .upload-viewWrap .max-width{max-width: 364px; padding-left: 0; padding-right: 0;} #wrap.boardPage .upload-viewWrap .btn{text-align: center; width: 100%;} #wrap.boardPage .upload-viewWrap .btn a{margin-top: 16px; background-color: var(--n-subTitle); color: var(--n-white); border-radius: 99999999px; display: block; height: 40px; font-size: var(--f-body1); line-height: 2.7; font-weight: 500;} #wrap.boardPage .upload-viewWrap .btn a svg{width: 16px; display: inline-block; vertical-align: middle; margin-left: 4px; margin-top: -3px;} #wrap.boardPage .upload-viewWrap .messageBox{padding: 12px 8px; border-radius: var(--b-radius0); margin-top: 16px; margin-bottom: 0;} #wrap.boardPage .upload-viewWrap .messageBox .message-title{padding-left: 20px; position: relative; margin-bottom: 2px;} #wrap.boardPage .upload-viewWrap .messageBox .message-title figure{left: 0; top: 0;} #wrap.boardPage .upload-viewWrap .messageBox .dotList li{position: relative; padding-left: 13px; line-height: 16px; letter-spacing: -0.24px;} #wrap.boardPage .upload-viewWrap .messageBox .dotList li + li{margin-top: 2px;} #wrap.boardPage .upload-viewWrap .messageBox .dotList li::before{content: ''; width: 2px; height: 2px; border-radius: 50%; background-color: var(--n-info); position: absolute; left: 7px; top: 6px;} #wrap.boardPage .upload-viewWrap .messageBox p{padding-left: 8px; margin-top: 2px;} #wrap.boardPage .upload-viewWrap .messageBox p + .dotList{margin-top: 2px;} #wrap.boardPage .upload-viewWrap .messageBox p b{font-weight: 500;} #wrap.boardPage .upload-viewWrap.no-after{padding-bottom: 0;} #wrap.boardPage.event .board-view .eventContent.no-after::after{display: none;} #wrap.boardPage.event .commentArea{max-width: 364px; margin: 16px auto;} /************************************************************* 후기 이벤트 > 리뷰를 부탁해! *************************************************************/ #wrap.boardPage .upload-viewWrap.request-review .banner{width: 100%; border-radius: var(--b-radius1); box-shadow: var(--box-shadow2); overflow: hidden;} #wrap.boardPage .upload-viewWrap.request-review .banner .pic {display: block;} #wrap.boardPage .upload-viewWrap.request-review .banner .pic img{width: 100%; object-fit: contain; display: block;} #wrap.boardPage .upload-viewWrap.request-review .couponList{font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; margin-top: 16px; text-align: center; position: sticky; position: -webkit-sticky; top: 40px; left: 0; z-index: 50;} #wrap.boardPage .upload-viewWrap.request-review .couponList::after{content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); z-index: -1; opacity: 0; touch-action: none; pointer-events: none; box-shadow: var(--box-shadow3);} #wrap.boardPage .upload-viewWrap.request-review .couponList .couponArea{overflow-x: auto; overflow-y: hidden; white-space: nowrap; display: flex;} #wrap.boardPage .upload-viewWrap.request-review .couponList .couponArea::-webkit-scrollbar{display: none;} #wrap.boardPage .upload-viewWrap.request-review .couponList .couponArea .coupon{padding: 8px 10px;} #wrap.boardPage .upload-viewWrap.request-review .couponList .coupon .pic{aspect-ratio: 54/35; border-radius: 4px; overflow: hidden; box-shadow: var(--box-shadow2); width: 54px; display: block;} #wrap.boardPage .upload-viewWrap.request-review .couponList .coupon .pic img{width: 100%;} #wrap.boardPage .upload-viewWrap.request-review .couponList .coupon p{display: flex; justify-content: center; align-items: center; height: 32px; line-height: 16px; letter-spacing: -0.24px; padding-top: 4px;} #wrap.boardPage .upload-viewWrap.request-review .couponList.sticky-active{padding-bottom: 8px;} #wrap.boardPage .upload-viewWrap.request-review .couponList.sticky-active .coupon{background-color: transparent; box-shadow: none; } #wrap.boardPage .upload-viewWrap.request-review .couponList.sticky-active::after{opacity: 1;} #wrap.boardPage .upload-viewWrap.request-review .couponList.sticky-active .coupon.active{background-color: var(--b-color4); border-radius: var(--b-radius0);} #wrap.boardPage .upload-viewWrap.request-review .thumbList{margin-top: 16px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list{border-radius: var(--b-radius1); background-color: var(--n-white); box-shadow: var(--box-shadow2); text-align: center; padding: 16px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list + .list{margin-top: 16px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .subTxt{color: var(--n-info); font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; margin-bottom: 4px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .title{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .title span{font-size: 10px; display: inline-block; height: 16px; padding: 0 6.5px; letter-spacing: -0.5px; border-radius: 9999999px; font-weight: 500; background-color: #FFE4F9; color: #FF00E5; line-height: 1.5; margin-left: 4px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list figure{aspect-ratio: 190/118; width: 190px; background-repeat: no-repeat; background-size: cover; background-position: center; margin: 0 auto; box-shadow: var(--box-shadow2); margin-bottom: 16px; border-radius: var(--b-radius3)} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .step{background-color: var(--b-color5); border-radius: var(--b-radius0); padding: 8px; font-size: var(--f-body2); color: var(--n-subTitle); line-height: 20px; letter-spacing: -0.26px; display: grid; grid-template-columns: repeat(3,1fr); column-gap: 23px; position: relative;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .step::before{content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: calc(80% - 16px); height: 1px; background-color: var(--p-color2 );} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .step .box{position: relative; padding-top: 24px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .step .box span{font-size: 9px; color: var(--p-color2); position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 16px; border-radius: 99999999px; border: 1px solid var(--p-color2); padding: 0 4px; line-height: 1.7; background-color: var(--b-color5);} #wrap.boardPage .upload-viewWrap.request-review .btn a svg{display: none;} /************************************************************* 후기 이벤트 > 웰컴패키지 *************************************************************/ #wrap.boardPage .upload-viewWrap.welcome-package{padding-top: 16px;} #wrap.boardPage .upload-viewWrap.welcome-package h3{font-size: var(--f-heading3); font-weight: 700; line-height: 22px; letter-spacing: -0.32px; text-align: center; color: var(--n-mainTitle); margin-bottom: 16px;} #wrap.boardPage .upload-viewWrap.welcome-package h4{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; font-weight: 700; text-align: center;} #wrap.boardPage .upload-viewWrap.welcome-package .roundBox{border-radius: var(--b-radius1); box-shadow: var(--box-shadow2); background-color: var(--n-white); padding: 16px;} #wrap.boardPage .upload-viewWrap.welcome-package .roundBox + .roundBox{margin-top: 16px;} #wrap.boardPage .upload-viewWrap.welcome-package .roundBox h4{margin-bottom: 16px;} #wrap.boardPage .upload-viewWrap.welcome-package .hero{background-image: url('https://static.edmclass.com/common/board/welcome-package/hero-bg.png'); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 32px; border-radius: var(--b-radius1); overflow: hidden; box-shadow: var(--box-shadow1); margin-bottom: 40px;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .title{width: 100%; display: block; margin-bottom: 8px;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .title img{width: 100%;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .txt1{font-family: "Paperlogy", -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; color: var(--n-white); font-weight: 500; margin-bottom: 32px; text-shadow: 0px 2px 4px #2B83EF; letter-spacing: -0.7px; text-align: center;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list{background-color: var(--n-white); border-radius: var(--b-radius1); box-shadow: 0px 5px 50px 0px rgba(52, 108, 148, 0.20), -10px -20px 50px 0px rgba(132, 172, 218, 0.30) inset; padding: 16px; text-align: center; position: relative;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list::after{content: ''; position: absolute; width: 34px; aspect-ratio: 34/28; background-image: url('https://static.edmclass.com/common/board/welcome-package/hero-bg-icon.png'); right: -20.3px; bottom: 122.38px; z-index: 2; background-repeat: no-repeat; background-size: contain; background-position: center;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list p{margin-top: 8px; font-family: "Paperlogy", -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight: 500; font-size: var(--f-body1); line-height: normal; letter-spacing: -0.28px; color: var(--n-mainTitle);} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list p span{display: inline-block;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list .wrap + .wrap{margin-top: 16px;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list figure{width: 236px; aspect-ratio: 236/118; background-repeat: no-repeat; background-size: cover; background-position: center;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list .img1{background-image: url('https://static.edmclass.com/common/board/welcome-package/hero-list1.png');} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list .img2{background-image: url('https://static.edmclass.com/common/board/welcome-package/hero-list2.png');} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list .img3{background-image: url('https://static.edmclass.com/common/board/welcome-package/hero-list3.png');} #wrap.boardPage .upload-viewWrap.welcome-package .gift + .gift {margin-top: 40px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift img{border-radius: var(--b-radius3); overflow: hidden; width: 100%;} #wrap.boardPage .upload-viewWrap.welcome-package .gift .box + .box{margin-top: 16px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift .box + p{font-size: var(--f-body4); color: var(--n-info); line-height: 14px; letter-spacing: -0.22px; margin: 16px 0; text-align: center;} #wrap.boardPage .upload-viewWrap.welcome-package .gift h3{padding-top: 64px; background-size: 80px; background-position: top center; background-repeat: no-repeat;} #wrap.boardPage .upload-viewWrap.welcome-package .gift .btnWrap{row-gap: 8px; margin-top: 16px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift .btnWrap a{width: 100%; margin-top: 0;} #wrap.boardPage .upload-viewWrap.welcome-package .gift1 h3{background-image: url('https://static.edmclass.com/common/board/welcome-package/gift1-icon.png');} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 h3{background-image: url('https://static.edmclass.com/common/board/welcome-package/gift2-icon.png');} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox{text-align: center;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox .step{font-size: 9px; background-color: var(--p-color1); color: var(--n-white); border-radius: 9999999px; height: 16px; letter-spacing: -0.18px; display: inline-block; padding: 0 5px; line-height: 1.7; margin-bottom: 2px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox h4{margin-bottom: 4px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox p{color: var(--n-info); font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox figure{background-repeat: no-repeat; background-size: contain; background-position: center; width: 168px; aspect-ratio: 168/106; margin: 24px auto 0;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox .img1{background-image: url('https://static.edmclass.com/common/board/welcome-package/gift2-img1.png');} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox .img2{background-image: url('https://static.edmclass.com/common/board/welcome-package/gift2-img2.png');} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox .img3{background-image: url('https://static.edmclass.com/common/board/welcome-package/gift2-img3.png');} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox .img4{background-image: url('https://static.edmclass.com/common/board/welcome-package/gift2-img4.png');} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox a{background-color: var(--b-color4); color: var(--n-info); } #wrap.boardPage .upload-viewWrap.welcome-package .messageBox{background-color: var(--b-color4);} /************************************************************* 후기 이벤트 > 여름방학특강 *************************************************************/ #wrap.boardPage .upload-viewWrap.summer-vacation .area-title{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; font-weight: 700; color: var(--n-mainTitle);} #wrap.boardPage .upload-viewWrap.summer-vacation .area-title em{background: linear-gradient(90deg, #D277E5 0.69%, #7531F9 57.61%); background-clip: text; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} #wrap.boardPage .upload-viewWrap.summer-vacation .wide{width: 100vw; position: relative; left: 50%; transform: translateX(-50%);} #wrap.boardPage .upload-viewWrap.summer-vacation .wide .wrap{max-width: 364px; margin: 0 auto;} #wrap.boardPage .upload-viewWrap.summer-vacation article{padding: 40px 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit-boxWrap{background-color: var(--n-white); border-radius: var(--b-radius1); padding: 16px; font-weight: 500; position: relative;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit-boxWrap .pic{border-radius: var(--b-radius0); overflow: hidden; margin-bottom: 8px;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit-boxWrap .img + .img{margin-top: 16px;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero{background-color: #AEE9FF; position: relative; border-radius: var(--b-radius1); text-align: center; padding: 40px 32px; color: var(--n-mainTitle); box-shadow: var(--box-shadow1); font-family: 'TJ Joy of singing', sans-serif; line-height: normal;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero > *{position: relative; z-index: 1;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero::before, #wrap.boardPage .upload-viewWrap.summer-vacation .hero::after{content: ''; position: absolute; left: 0; width: 100%; height: auto; background-repeat: no-repeat; background-size: cover; background-position: center; touch-action: none; pointer-events: none;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero::before{top: 0; aspect-ratio: 328/252; background-image: url('https://static.edmclass.com/common/board/summer-vacation/hero-bg1.png'); } #wrap.boardPage .upload-viewWrap.summer-vacation .hero::after{bottom: 0; aspect-ratio: 328/152; background-image: url('https://static.edmclass.com/common/board/summer-vacation/hero-bg2.png'); z-index: 2;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero .txt1{font-weight: 700; font-size: var(--f-heading3); color: #0059FF; } #wrap.boardPage .upload-viewWrap.summer-vacation .hero .title{margin: 8px auto 16px;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero .date{color: var(--n-white); font-weight: 700; background-color: #3BC9FF; border-radius: 50px; padding: 8.5px 12.5px; display: inline-block; margin-bottom: 22px;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero .txt2{font-weight: 500; margin-bottom: 12px; line-height: 18px;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero .benefit-boxWrap .num{position: absolute; top: -22px; right: -28px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum{text-align: center; } #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .left{font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .left .area-title{margin-top: 16px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .left .area-title em{margin: 0; font-size: inherit;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right{margin-top: 52px; line-height: 20px; letter-spacing: -0.28px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li{display: flex; justify-content: space-between; align-items: flex-start;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li + li{margin-top: 36px; position: relative;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li + li::before{content: ''; position: absolute; width: 2px; height: 48px; background-color: var(--s-color1); top: -52px; left: 55px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .box{background-color: var(--n-white); border-radius: var(--b-radius3); box-shadow: var(--box-shadow2);} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .time{padding: 14px 0; color: var(--n-mainTitle); width: 110px; position: relative; z-index: 2;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .time .icon{background-repeat: no-repeat; background-size: contain; background-position: center; width: 56px; height: 56px; margin: 0 auto;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .time .topTxt{position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background-color: #339DFF; color: var(--n-white); height: 24px; border-radius: 20px; padding: 0px 10px; white-space: nowrap; line-height: 1.6; /*font-weight: 500;*/} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .time .text span{display: block; font-weight: 500;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap{padding: 12px; width: calc(100% - 126px); text-align: left; word-break: normal;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap .tagWrap{gap: 4px; margin-bottom: 4px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap .tagWrap .tag{font-size: 10px; font-weight: 500; padding: 4px 6.5px; border-radius: 100px; line-height: 0.8;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap .tagWrap .tag.l{background-color: var(--e-listening-color-bg); color: var(--e-listening-color);} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap .tagWrap .tag.r{background-color: var(--e-reading-color-bg); color: var(--e-reading-color);} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap .tagWrap .tag.w{background-color: var(--e-writing-color-bg); color: var(--e-writing-color);} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap .tagWrap .tag.s{background-color: var(--e-speaking-color-bg); color: var(--e-speaking-color);} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap p{color: var(--n-mainTitle);} #wrap.boardPage .upload-viewWrap.summer-vacation .plus .area-title{padding-left: 16px; padding-right: 16px; margin-bottom: 16px;} #wrap.boardPage .upload-viewWrap.summer-vacation .plus .area-title em{margin-bottom: 8px; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; display: inline-block;} #wrap.boardPage .upload-viewWrap.summer-vacation .plus .imgWrap{background-image: url('https://static.edmclass.com/common/board/summer-vacation/plus-img_250702.png'); background-repeat: no-repeat; background-size: cover; background-position: center; width: calc(100% - 32px); margin: 0 auto; aspect-ratio: 328/150; border-radius: var(--b-radius3);} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit{text-align: center;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .icon{width: 80px; aspect-ratio: 80/60; background-repeat: no-repeat; background-size: contain; background-position: center; margin: 0 auto 8px;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap{margin-top: 16px; background-color: transparent; padding: 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap{font-weight: 700; font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap .pic{border-radius: var(--b-radius3);} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap .img{position: relative; } #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap .img .num{position: absolute; top: -26px; right: -16px; z-index: 2;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap .img1 .num{right: -26px;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap .img + .img{margin-top: 32px;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .area-title{padding-left: 16px; padding-right: 16px;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .contact{padding: 0 16px;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .contact .area-title em{margin-bottom: 8px; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; display: inline-block;} .area-title em{margin-bottom: 8px; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; display: inline-block;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .contact .list{display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 16px;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .contact .list a{background-color: var(--n-white); text-align: center; aspect-ratio: 1/1; border-radius: var(--b-radius3); box-shadow: var(--box-shadow2); display: flex; justify-content: center; flex-direction: column; color: var(--n-mainTitle); transition: background-color 0.3s ease;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .contact .list a figure{background-repeat: no-repeat; background-size: contain; background-position: center; width: 24px; height: 24px; margin: 0 auto 4px;} #wrap.boardPage .upload-viewWrap.summer-vacation .messageBox{padding: 0; margin: 12px 0 0; border-radius: 0;} /************************************************************* 후기 이벤트 > 리뉴얼 오픈을 축하해 *************************************************************/ #wrap.boardPage .upload-viewWrap.renewal-open{line-height: 20px; letter-spacing: -0.28px;} #wrap.boardPage .upload-viewWrap.renewal-open h2{font-size: var(--f-heading3); font-weight: 700; color: var(--n-mainTitle); line-height: 22px; letter-spacing: -0.32px; margin-bottom: 24px;} #wrap.boardPage .upload-viewWrap.renewal-open .messageBox{background-color: var(--b-color4); } #wrap.boardPage .upload-viewWrap.renewal-open article{background-color: var(--n-white); border-radius: var(--b-radius1); box-shadow: var(--box-shadow1); padding: 16px; text-align: center;} #wrap.boardPage .upload-viewWrap.renewal-open article + article{margin-top: 16px;} #wrap.boardPage .upload-viewWrap.renewal-open article .topTxt{background-color: #FFE4F9; color: #FF00E5; padding: 0 8px; height: 24px; font-weight: 500; font-size: var(--f-body2); letter-spacing: -0.26px; display: inline-block; margin: 0 auto; border-radius: 100px; line-height: 1.7;} #wrap.boardPage .upload-viewWrap.renewal-open article .topTxt + h2{margin-top: 8px;} #wrap.boardPage .upload-viewWrap.renewal-open article .box{font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px;} #wrap.boardPage .upload-viewWrap.renewal-open article .box .imgWrap{position: relative; } #wrap.boardPage .upload-viewWrap.renewal-open article .box .imgWrap + p{margin-top: 8px;} #wrap.boardPage .upload-viewWrap.renewal-open article .box .imgWrap .pic{width: 100%; object-fit: contain; border-radius: var(--b-radius0);} #wrap.boardPage .upload-viewWrap.renewal-open article .box .imgWrap .pic img{border-radius: inherit;} #wrap.boardPage .upload-viewWrap.renewal-open article .box .imgWrap .num{position: absolute; } #wrap.boardPage .upload-viewWrap.renewal-open article .grid-2{display: grid; grid-template-columns: repeat(2,1fr); column-gap: 8px; row-gap: 24px;} #wrap.boardPage .upload-viewWrap.renewal-open article .grid-3{display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;} #wrap.boardPage .upload-viewWrap.renewal-open article .messageBox{text-align: left; margin-top: 24px; background-color: transparent; padding: 0;} #wrap.boardPage .upload-viewWrap.renewal-open article .messageBox > p{font-weight: 700; font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; color: var(--n-subTitle); margin: 0 0 9px;} #wrap.boardPage .upload-viewWrap.renewal-open article .moreBtn{background-color: var(--n-subTitle); color: var(--n-white); font-weight: 500; width: 100%; height: 40px; border-radius: 20px; margin-top: 16px; line-height: 2.7; transition: background-color 0.3s ease;} #wrap.boardPage .upload-viewWrap.renewal-open .hero{background-image: url('https://static.edmclass.com/common/board/renewal-open/hero-bg.png'); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: var(--b-radius1); text-align: center; padding: 40px 0 0; color: var(--n-white); position: relative; box-shadow: var(--box-shadow1); margin-bottom: 40px;} #wrap.boardPage .upload-viewWrap.renewal-open .hero picture{margin: 0 auto; justify-content: center;} #wrap.boardPage .upload-viewWrap.renewal-open .hero .boxImg{margin-top: 61px;} #wrap.boardPage .upload-viewWrap.renewal-open .hero .title{width: 174px; margin-top: 16px;} #wrap.boardPage .upload-viewWrap.renewal-open .hero .title-txt{font-family: 'TJ Joy of singing', sans-serif; font-weight: 800; font-size: var(--f-hero1); line-height: 56px; margin-bottom: 24px;} #wrap.boardPage .upload-viewWrap.renewal-open .hero .title-txt em{color: #FDF753;} #wrap.boardPage .upload-viewWrap.renewal-open .hero .circleBox{background-color: #3E00D6; border-radius: 40px; display: inline-block; font-size: var(--f-heading3); letter-spacing: -0.32px; font-weight: 700; font-family: 'TJ Joy of singing', sans-serif; padding: 12px 38.5px; line-height: 20px; position: relative;} #wrap.boardPage .upload-viewWrap.renewal-open .hero .circleBox::after{content: ''; position: absolute; right: -31px; top: 12px; background-image: url('https://static.edmclass.com/common/board/renewal-open/hero-bg3.png'); background-repeat: no-repeat; background-size: cover; background-position: center; width: 124px; height: 80px; z-index: 2;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList{display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; position: sticky; position: -webkit-sticky; top: 40px; z-index: 50; padding: 8px 0; margin-bottom: 8px;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList::after{content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); z-index: -1; opacity: 0; touch-action: none; pointer-events: none; box-shadow: var(--box-shadow3);} #wrap.boardPage .upload-viewWrap.renewal-open .eventList button{background-color: var(--n-white); border-radius: var(--b-radius3); box-shadow: var(--box-shadow2); text-align: center; height: 100px; color: var(--n-mainTitle); transition: all 0.3s ease;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList button figure{background-repeat: no-repeat; background-size: contain; background-position: center; width: 32px; height: 32px; margin: 0 auto;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList.sticky-active button{background-color: transparent; box-shadow: none; padding-top: 0;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList.sticky-active::after{opacity: 1;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList button.active, #wrap.boardPage .upload-viewWrap.renewal-open .eventList.sticky-active button.active{background-color: var(--b-color4);} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .box1{margin-bottom: 36px;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .box1 .num{right: -17px; top: -22px;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .box2 .num{background-color: var(--b-color1); color: var(--n-white); border-radius: 100px; font-weight: 700; height: 24px; padding: 0 8px; font-size: var(--f-body4); letter-spacing: -0.22px; line-height: 2; left: 50%; transform: translateX(-50%); top: -12px;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .btnWrap{justify-content: center; gap: 8px; margin-top: 24px;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .btnWrap a{height: 40px; border-radius: var(--b-radius0); color: var(--n-white); font-weight: 500; width: calc(50% - 4px); display: flex; justify-content: center; align-items: center; transition: background-color 0.3s ease;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .btnWrap a svg{width: 16px; height: 16px; margin-left: 4px;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .btnWrap a.a{background-color: #339DFF;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .btnWrap a.i{background-color: #30C214;} #wrap.boardPage .upload-viewWrap.renewal-open .event3 .box1 .num{top: -20px; right: -16px;} #wrap.boardPage .upload-viewWrap.renewal-open .event4 .box1 .num{top: 0px; right: 14px;} #wrap.boardPage .upload-viewWrap.renewal-open .event4 h2{margin-bottom: 8px;} #wrap.boardPage .upload-viewWrap.renewal-open .event4 .messageBox{background-color: var(--b-color5); margin-top: 0; padding: 12px;} #wrap.boardPage .upload-viewWrap.renewal-open .event4 .messageBox > p{background-image: url('https://static.edmclass.com/common/board/renewal-open/speaker.svg'); background-repeat: no-repeat; background-size: 24px; background-position: left top; padding-left: 30px; padding-top: 1px;} /************************************************************* 후기 이벤트 > 해외 무료배송 *************************************************************/ #wrap.boardPage .upload-viewWrap.international-shipping article{background-color: var(--n-white); border-radius: var(--b-radius1); box-shadow: var(--box-shadow1); overflow: hidden; padding: 16px; text-align: center;} #wrap.boardPage .upload-viewWrap.international-shipping article + article{margin-top: 16px;} #wrap.boardPage .upload-viewWrap.international-shipping article .imgWrap{position: relative;} #wrap.boardPage .upload-viewWrap.international-shipping article .imgWrap img{border-radius: var(--b-radius0); overflow: hidden;} #wrap.boardPage .upload-viewWrap.international-shipping article .imgWrap .level{position: absolute; bottom: -10px; right: 16px; color: var(--n-white); background-color: var(--n-subTitle); border-radius: var(--b-radius3); font-size: var(--f-body3); letter-spacing: -0.24px; font-weight: 500; height: 20px; width: 60px; line-height: 1.5;} #wrap.boardPage .upload-viewWrap.international-shipping article .textWrap{padding-top: 16px; color: var(--n-mainTitle);} #wrap.boardPage .upload-viewWrap.international-shipping article .textWrap b{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; font-weight: 700; margin-bottom: 4px; display: block;} #wrap.boardPage .upload-viewWrap.international-shipping .hero{background-image: url('https://static.edmclass.com/common/board/international-shipping/hero-bg.png'); height: 638px; border-radius: var(--b-radius3); background-repeat: no-repeat; background-size: cover; background-position: center; box-shadow: var(--box-shadow1); text-align: center; padding-top: 56px; font-family: "Paperlogy", -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; color: var(--n-white);} #wrap.boardPage .upload-viewWrap.international-shipping .hero .txt1{width: 277px; margin: 0 auto;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .txt2{margin: 159px auto 0; width: 294px;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom{padding-top: 48px; line-height: normal;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .txt3{font-family: 'Jalnan2'; font-size: var(--f-heading2); font-weight: 400; line-height: normal; margin: 8px 0 20px; display: block; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap{justify-content: center;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box{box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.25), -2px -2px 20px 0px #CFDAE6 inset; background-color: var(--n-white); color: var(--n-subTitle); border-radius: var(--b-radius3); width: 100px; height: 100px; margin: 0 8px; display: flex; flex-direction: column; justify-content: center; font-weight: 600; position: relative; line-height: 1.25;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box em{font-family: 'Jalnan2'; color: #5154FF; font-weight: 400; display: block;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box::after{content: ''; position: absolute; top: -10px; right: -3px; background-repeat: no-repeat; background-size: contain; background-position: center; width: 28px; height: 28px;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box1{padding-bottom: 5px;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box1::after{background-image: url('https://static.edmclass.com/common/board/international-shipping/hero-box-icon1.png');} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box2::after{background-image: url('https://static.edmclass.com/common/board/international-shipping/hero-box-icon2.png');} #wrap.boardPage .upload-viewWrap.international-shipping .textTop{text-align: center; color: var(--n-info); font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; padding: 40px 0 16px;} #wrap.boardPage .upload-viewWrap.international-shipping .textTop .icon{width: 40px; aspect-ratio: 40/56.01; background-repeat: no-repeat; background-image: url('https://static.edmclass.com/common/board/international-shipping/icon1.png'); background-size: contain; background-position: center; margin: 0 auto 8px;} #wrap.boardPage .upload-viewWrap.international-shipping .textTop b{color: var(--n-mainTitle); font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; margin-top: 4px; display: block;} #wrap.boardPage .upload-viewWrap.international-shipping .event-info{text-align: left; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; color: var(--n-info); margin-top: 16px;} #wrap.boardPage .upload-viewWrap.international-shipping .event-info .tit{background-image: url('https://static.edmclass.com/common/board/international-shipping/icon2.png'); background-repeat: no-repeat; background-size: 24px; background-position: left center; padding-left: 29px; font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; font-weight: 700; margin-bottom: 8px; color: var(--n-subTitle);} #wrap.boardPage .upload-viewWrap.international-shipping .event-info .dotTxt{position: relative; padding-left: 5px;} #wrap.boardPage .upload-viewWrap.international-shipping .event-info .dotTxt::before{content: ''; position: absolute; left: 0; top: 7px; width: 2px; height: 2px; border-radius: 50%; background-color: var(--n-info);} #wrap.boardPage .upload-viewWrap.international-shipping .event-info .dotTxt + .dotTxt{margin-top: 2px;} #wrap.boardPage .upload-viewWrap.international-shipping .event-info a{background-color: var(--b-color4); width: 100%; border-radius: 20px; height: 40px; margin-top: 16px; font-size: var(--f-body1); letter-spacing: normal; color: var(--n-info); font-weight: 500; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease;} #wrap.boardPage .upload-viewWrap.international-shipping .event-info a svg{margin-left: 4px; width: 16px; height: 16px; margin-top: 1px;} #wrap.boardPage .upload-viewWrap.international-shipping .messageBox{background-color: var(--b-color4);} /************************************************************* 후기 이벤트 > 네이버&구글 방문 후기 이벤트 (+블로그 후기 이벤트도 같은 스타일) *************************************************************/ #wrap.boardPage.event.benefitWrap .upload-viewWrap .max-width{max-width: 506px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .topWrap{text-align: center; font-weight: 700; line-height: 22px; letter-spacing: -0.32px; color: var(--n-mainTitle); margin-bottom: 16px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .topWrap .txt{display: none;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .topWrap figure{background-repeat: no-repeat; background-size: contain; background-position: center; width: 75px; height: 56px; margin: 0 auto 8px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .banner{box-shadow: var(--box-shadow3); border-radius: 20px; margin-bottom: 16px; max-width: 398px; margin-left: auto; margin-right: auto;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section{background-color: var(--n-white); box-shadow: var(--box-shadow1); border-radius: var(--b-radius1); padding: 16px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section + section{margin-top: 16px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section .title{text-align: center; margin-bottom: 16px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section .title p{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; } #wrap.boardPage.event.benefitWrap .upload-viewWrap section .title span{display: block; color: var(--n-info); font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; margin-top: 4px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.how-to-write .slideWrap{position: relative;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.how-to-write .slideWrap::after{content:''; position: absolute; top: -28px; right: -23px; width: 102px; height: 110px; background-image: url('https://static.edmclass.com/common/board/naver-google-review/how-to-write-icon.svg'); z-index: 2; background-repeat: no-repeat; background-size: contain; background-position: center;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.how-to-write .slide{overflow: hidden;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.how-to-write .slide .swiper-slide{background-color: var(--b-color5); border-radius: var(--b-radius1); overflow: hidden;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.how-to-write .slide .pagination{background: transparent; margin-top: 8px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.how-to-write .slide .pagination .swiper-pagination-bullet{background: var(--n-info);} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.how-to-write .slide .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: var(--n-mainTitle);} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.how-to-write .messageBox{margin-top: 8px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap .box + .box{margin-top: 16px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap .box .imgWrap{background-color: var(--b-color5); border-radius: var(--b-radius0); overflow: hidden; padding: 14px 0; text-align: center; font-size: var(--f-body3); margin-bottom: 16px; line-height: 16px; letter-spacing: -0.24px} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap .box .imgWrap figure{background-repeat: no-repeat; background-size: contain; background-position: center; width: 90px; height: 56px; margin: 0 auto 14px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap .box span{display: inline-block; color: var(--n-info);} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap .box .txt2{padding-right: 9px; position: relative;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap .box .txt2::after{content: ''; position: absolute; right: 2.5px; top: 50%; transform: translateY(-50%); height: 8px; width: 1px; background-color: var(--s-color1);} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap a{text-align: center; font-weight: 500; color: var(--n-white); background-color: var(--n-subTitle); display: block; width: 100%; height: 40px; border-radius: 20px; line-height: 2.6; display: flex; align-items: center; justify-content: center;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap a figure{background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px; display: inline-block; margin-right: 4px;} /* 블로그 후기 이벤트 */ #wrap.boardPage.event.benefitWrap .upload-viewWrap.blog .banner{box-shadow: none;} /************************************************************* media query *************************************************************/ @media screen and (min-width: 385px) { /************************************************************* 후기 이벤트 > 리뷰를 부탁해! *************************************************************/ #wrap.boardPage .upload-viewWrap.request-review .couponList{margin-left: auto; margin-right: auto; width: 100%;} } @media screen and (min-width: 396px){ /* 공통 */ #wrap.boardPage.event .commentArea{padding-left: 16px; padding-right: 16px;} #wrap.boardPage .upload-viewWrap .max-width{padding: 0 16px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .max-width{padding: 0;} } @media screen and (min-width: 576px){ /************************************************************* 후기 이벤트 > 웰컴패키지 *************************************************************/ #wrap.boardPage.welcomePackage{background-color: var(--b-color5);} #wrap.boardPage.welcomePackage .board-view .eventContent::after{display: none;} #wrap.boardPage.welcomePackage .board-view .eventContent{margin-bottom: 0;} #wrap.boardPage .upload-viewWrap{padding-bottom: 100px; padding-top: 100px;} /************************************************************* 후기 이벤트 > 네이버&구글 방문 후기 이벤트 *************************************************************/ #wrap.boardPage.event.benefitWrap .pageTitleWrap{padding-bottom: 0;} #wrap.boardPage.event.benefitWrap .upload-viewWrap{padding-top: 8px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .topWrap{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .topWrap .txt{display: block; color: var(--n-subTitle); font-weight: 400; margin-bottom: 40px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .banner{margin-bottom: 40px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section{padding: 34px 16px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section .title{margin-bottom: 24px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.how-to-write .slideWrap{max-width: 400px; margin: 0 auto;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section + section{margin-top: 40px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap{display: flex; justify-content: space-between;} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap .box{width: calc(50% - 8px);} #wrap.boardPage.event.benefitWrap .upload-viewWrap section.benefit .boxWrap .box + .box{margin-top: 0;} /* 블로그 */ #wrap.boardPage.event.benefitWrap .upload-viewWrap.blog section.benefit .boxWrap{flex-wrap: wrap;} #wrap.boardPage.event.benefitWrap .upload-viewWrap.blog section.benefit .boxWrap a{width: 230px; margin: 0 auto;} /************************************************************* 후기 이벤트 > 여름방학특강 *************************************************************/ #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap .img::after{right: -21px;} #wrap.boardPage .upload-viewWrap.summer-vacation .plus .imgWrap{background-image: url('https://static.edmclass.com/common/board/summer-vacation/plus-img-tablet.png'); aspect-ratio: 332/150;} } @media screen and (min-width: 1200px) { /* 공통 */ #wrap.boardPage.event .commentArea{padding-left: 0; padding-right: 0;} #wrap.boardPage .upload-viewWrap{padding-bottom: 0; padding-top: 44px;} #wrap.boardPage .upload-viewWrap .max-width{max-width: 1200px;} #wrap.boardPage .upload-viewWrap .max-width{padding: 0;} #wrap.boardPage .upload-viewWrap .btn a{display: inline-block; line-height: 2.8;} #wrap.boardPage .upload-viewWrap .messageBox{margin-top: 24px; border-radius: var(--b-radius3); padding: 24px 16px; font-size: var(--f-body1); line-height: 24px; letter-spacing: -0.28px; } #wrap.boardPage .upload-viewWrap .messageBox .message-title{padding-left: 26px; font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; margin-bottom: 5px;} #wrap.boardPage .upload-viewWrap .messageBox .dotList li{padding-left: 20px; line-height: inherit;} #wrap.boardPage .upload-viewWrap .messageBox .dotList li::before{left: 10px; width: 3px; height: 3px; top: 11px;} #wrap.boardPage .upload-viewWrap .messageBox + .messageBox{margin-top: 16px;} #wrap.boardPage.event .commentArea{max-width: 1200px; margin-top: 40px;} /************************************************************* 후기 이벤트 > 리뷰를 부탁해! *************************************************************/ #wrap.boardPage .upload-viewWrap.request-review .banner{border-radius: var(--b-radius2); margin-bottom: 64px;} #wrap.boardPage .upload-viewWrap.request-review .couponList{max-width: 100%; justify-content: center; font-size: var(--f-body1); font-weight: 700; line-height: 20px; letter-spacing: -0.28px; top: 130px; margin-top: 0;} .academy #wrap.boardPage .upload-viewWrap.request-review .couponList{top: 89px;} #wrap.boardPage .upload-viewWrap.request-review .couponList .coupon .pic{aspect-ratio: 100/66; width: 100px; border-radius: var(--b-radius0);} #wrap.boardPage .upload-viewWrap.request-review .couponList .coupon + .coupon{margin-left: 48px;} #wrap.boardPage .upload-viewWrap.request-review .couponList .coupon p{height: auto; display: block; padding-top: 12px; line-height: 20px; letter-spacing: -0.28px;} #wrap.boardPage .upload-viewWrap.request-review .couponList .couponArea{justify-content: center;} #wrap.boardPage .upload-viewWrap.request-review .couponList .couponArea .coupon{max-height: 130px; padding: 16px;} #wrap.boardPage .upload-viewWrap.request-review .couponList.sticky-active{padding: 20px 0;} #wrap.boardPage .upload-viewWrap.request-review .couponList.sticky-active .coupon.active{border-radius: var(--b-radius1);} #wrap.boardPage .upload-viewWrap.request-review .thumbList{margin-top: 40px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list{border: 1px solid var(--s-color1); padding: 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list + .list{margin-top: 24px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .subTxt{width: 100%; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; font-weight: 700; padding-left: 282px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .title{width: 100%; font-size: var(--f-heading1); letter-spacing: -0.4px; line-height: 28px; margin-bottom: 0; padding-left: 282px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list figure{width: 258px; aspect-ratio: 258/160; margin: 0;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .step{width: calc(100% - 282px); height: 136px; border-radius: var(--b-radius1); padding: 32px 73px; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; column-gap: 68px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .step::before{top: 44px; width: calc(70% - 100px);} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .step .box{padding-top: 32px;} #wrap.boardPage .upload-viewWrap.request-review .thumbList .list .step .box span{font-size: var(--f-body1); letter-spacing: -0.28px; height: 24px; padding: 0 8px;} #wrap.boardPage .upload-viewWrap.request-review .btn{padding-left: 282px;} #wrap.boardPage .upload-viewWrap.request-review .btn a{min-width: 170px; padding: 0 20px;} #wrap.boardPage .upload-viewWrap.request-review .btn a svg{display: inline-block;} /************************************************************* 후기 이벤트 > 웰컴패키지 *************************************************************/ #wrap.boardPage.welcomePackage .pageTitle{display: none;} #wrap.boardPage .upload-viewWrap.welcome-package h3{margin-bottom: 40px; width: 100%;} #wrap.boardPage .upload-viewWrap.welcome-package h4{font-size: var(--f-heading2); line-height: 26px; letter-spacing: -0.36px; width: 100%;} #wrap.boardPage .upload-viewWrap.welcome-package .roundBox{padding: 40px 24px; display: flex; flex-wrap: wrap; justify-content: space-between;} #wrap.boardPage .upload-viewWrap.welcome-package .roundBox + .roundBox{margin-top: 40px;} #wrap.boardPage .upload-viewWrap.welcome-package .roundBox .box{width: calc(50% - 12px);} #wrap.boardPage .upload-viewWrap.welcome-package .roundBox .box + .box{margin-top: 0;} #wrap.boardPage .upload-viewWrap.welcome-package .roundBox h4{margin-bottom: 40px;} #wrap.boardPage .upload-viewWrap.welcome-package .btn a{width: 248px; margin-top: 24px;} #wrap.boardPage .upload-viewWrap.welcome-package .hero{padding: 132px 72px; background-image: url('https://static.edmclass.com/common/board/welcome-package/hero-bg-pc.png');} #wrap.boardPage .upload-viewWrap.welcome-package .hero .title{width: 798px; margin: 0 auto 48px;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .txt1{font-size: var(--f-display1); margin-bottom: 131px; font-weight: 700;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list{border-radius: 999999999px; display: flex; justify-content: center; padding: 37px 54px;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list::after{width: 71px; background-image: url('https://static.edmclass.com/common/board/welcome-package/hero-bg-icon-pc.png'); aspect-ratio: 71/61; right: -34px; bottom: 75px;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list .wrap + .wrap{margin-top: 0;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list p{font-size: var(--f-display3); line-height: normal; letter-spacing: -0.48px; margin-top: 0;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list p span{display: none;} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list figure{width: 326px; aspect-ratio: 326/186; } #wrap.boardPage .upload-viewWrap.welcome-package .hero .list .img1{background-image: url('https://static.edmclass.com/common/board/welcome-package/hero-list1-pc.png');} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list .img2{background-image: url('https://static.edmclass.com/common/board/welcome-package/hero-list2-pc.png');} #wrap.boardPage .upload-viewWrap.welcome-package .hero .list .img3{background-image: url('https://static.edmclass.com/common/board/welcome-package/hero-list3-pc.png');} #wrap.boardPage .upload-viewWrap.welcome-package .gift + .gift{margin-top: 64px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift h3{background-size: 142px; padding-top: 108px; font-size: var(--f-heading1); line-height: 28px; letter-spacing: -0.4px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift img{border-radius: var(--b-radius1);} #wrap.boardPage .upload-viewWrap.welcome-package .gift .btnWrap{flex-wrap: nowrap; justify-content: flex-end; width: 100%; row-gap: 0; column-gap: 16px; margin-top: 24px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift .btnWrap .btn{width: auto;} #wrap.boardPage .upload-viewWrap.welcome-package .gift .btnWrap a{width: 248px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift1 .roundBox1 .box{width: 100%; max-width: 792px; margin: 0 auto;} #wrap.boardPage .upload-viewWrap.welcome-package .gift1 .roundBox1 .box + p{display: block; width: 100%; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; margin: 24px 0;} #wrap.boardPage .upload-viewWrap.welcome-package .gift1 .roundBox1 .btnWrap{justify-content: center; margin-top: 0;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2{display: flex; flex-wrap: wrap; justify-content: space-between;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox{width: calc(100%/4 - 18px); padding: 24px; display: block;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox + .roundBox{margin-top: 0;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox .step{font-size: var(--f-body1); letter-spacing: -0.28px; height: 24px; padding: 0 9.5px; margin-bottom: 4px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox h4{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; margin-bottom: 8px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox p{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.32px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox a{width: 100%;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox figure{width: 186px;} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox .img1{background-image: url('https://static.edmclass.com/common/board/welcome-package/gift2-img1-pc.png'); aspect-ratio: 186/132; } #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox .img2{background-image: url('https://static.edmclass.com/common/board/welcome-package/gift2-img2-pc.png'); aspect-ratio: 186/196; } #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox .img3{background-image: url('https://static.edmclass.com/common/board/welcome-package/gift2-img3-pc.png'); aspect-ratio: 186/196; } #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox .img4{background-image: url('https://static.edmclass.com/common/board/welcome-package/gift2-img4-pc.png'); aspect-ratio: 186/132; } #wrap.boardPage .upload-viewWrap.welcome-package .messageBox{margin-top: 40px;} /************************************************************* 후기 이벤트 > 여름방학특강 *************************************************************/ #wrap.boardPage .upload-viewWrap.summer-vacation article{padding: 100px 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .wide .wrap{max-width: 100%;} #wrap.boardPage .upload-viewWrap.summer-vacation .area-title{font-size: var(--f-display3); line-height: 34px; letter-spacing: -0.48px;} #wrap.boardPage .upload-viewWrap.summer-vacation .area-title em{font-size: var(--f-heading2); line-height: 26px; letter-spacing: -0.36px;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit-boxWrap{padding: 24px; border-radius: var(--b-radius2); font-size: var(--f-heading1); letter-spacing: -0.4px; justify-content: space-between;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit-boxWrap .img{width: calc(50% - 12px);} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit-boxWrap .pic{border-radius: var(--b-radius1); margin-bottom: 24px; } #wrap.boardPage .upload-viewWrap.summer-vacation .benefit-boxWrap .img + .img{margin-top: 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero{background-image: url('https://static.edmclass.com/common/board/summer-vacation/hero-pc-bg.png'); background-repeat: no-repeat; background-size: cover; background-position: top center; padding: 516px 134px 104px; border-radius: var(--b-radius2); box-shadow: none;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero::before{background-image: url('https://static.edmclass.com/common/board/summer-vacation/hero-bg1-pc.png'); top: auto; bottom: 0; aspect-ratio: 1200/574; z-index: 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero::after{background-image: url('https://static.edmclass.com/common/board/summer-vacation/hero-bg2-pc.png'); aspect-ratio: 1200/574;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero .title{display: none;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero .txt1{display: none;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero .date{font-size: var(--f-heading3); padding: 12.5px 23.5px; margin-bottom: 72px;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero .txt2{font-size: var(--f-display3); line-height: 30px; margin-bottom: 24px;} #wrap.boardPage .upload-viewWrap.summer-vacation .hero .benefit-boxWrap .num{top: -48px; right: -44px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum{display: flex; align-items: center; padding-top: 112px; margin-top: 100px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .left{width: 408px; font-size: var(--f-heading2); text-align: left; font-weight: 500; line-height: 26px; letter-spacing: -0.36px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right{width: calc(100% - 408px);} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .time{width: 126px; height: 128px; padding: 16px 0; border-radius: 32px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .time .topTxt{padding: 0 21.5px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap{width: calc(100% - 166px); border-radius: 32px; padding: 0 24px; min-height: 128px; display: flex; flex-direction: column; justify-content: center;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap .tagWrap{gap: 8px; margin-bottom: 8px;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li .textWrap .tagWrap .tag{font-size: var(--f-body3); padding: 8px 7px; line-height: 0.4;} #wrap.boardPage .upload-viewWrap.summer-vacation .curriculum .right > li + li::before{left: 62px;} #wrap.boardPage .upload-viewWrap.summer-vacation .plus{padding-top: 0; padding-bottom: 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .plus .area-title{max-width: 1200px; margin: 0; padding: 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .plus .area-title em{font-size: var(--f-heading2); line-height: 26 px; letter-spacing: -0.36px;} #wrap.boardPage .upload-viewWrap.summer-vacation .plus .wrap{display: flex; align-items: center; max-width: 1200px; margin: 0 auto; justify-content: space-between;} #wrap.boardPage .upload-viewWrap.summer-vacation .plus .imgWrap{background-image: url('https://static.edmclass.com/common/board/summer-vacation/plus-img-pc_250702.png'); aspect-ratio: 748/340; height: 340px; width: auto; border-radius: 0; margin: 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .icon{width: 134px; aspect-ratio: 134/100;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .area-title em{font-size: inherit; margin: 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap{margin-top: 34px; padding: 0; background-color: transparent; box-shadow: none; font-size: var(--f-heading2); line-height: 26px; letter-spacing: -0.36px;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap .pic{margin-bottom: 24px; border-radius: var(--b-radius1); box-shadow: var(--box-shadow1);} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap .img::after{display: none;} #wrap.boardPage .upload-viewWrap.summer-vacation .benefit .benefit-boxWrap .img + .img{margin-top: 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .area-title{padding: 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .wrap{max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .wrap .contact{padding: 0;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .contact .list{margin-top: 0; width: 468px; gap: 24px;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .contact .list a{border-radius: var(--b-radius2); font-weight: 500;} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .contact .list a figure{width: 48px; height: 48px; margin-bottom: 12px;} #wrap.boardPage .upload-viewWrap.summer-vacation .messageBox{color: var(--n-info2); margin-top: 24px;} #wrap.boardPage .upload-viewWrap.summer-vacation .messageBox .dotList li{line-height: normal; letter-spacing: -0.28px;} /************************************************************* 후기 이벤트 > 리뉴얼 오픈을 축하해 *************************************************************/ #wrap.boardPage .upload-viewWrap.renewal-open .max-width{max-width: 792px;} #wrap.boardPage .upload-viewWrap.renewal-open h2{font-size: var(--f-heading2); line-height: 26px; letter-spacing: -0.36px; margin-bottom: 40px;} #wrap.boardPage .upload-viewWrap.renewal-open article{padding: 40px 24px; border-radius: var(--b-radius2);} #wrap.boardPage .upload-viewWrap.renewal-open article + article{margin-top: 24px;} #wrap.boardPage .upload-viewWrap.renewal-open article .grid-3{gap: 24px;} #wrap.boardPage .upload-viewWrap.renewal-open article .box .imgWrap .pic{border-radius: var(--b-radius1);} #wrap.boardPage .upload-viewWrap.renewal-open article .box{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px;} #wrap.boardPage .upload-viewWrap.renewal-open article .box .imgWrap + p{margin-top: 16px;} #wrap.boardPage .upload-viewWrap.renewal-open article .messageBox{padding: 12px; background-color: var(--b-color5); border-radius: var(--b-radius1); margin-top: 40px;} #wrap.boardPage .upload-viewWrap.renewal-open article .messageBox > p{margin-bottom: 8px;} #wrap.boardPage .upload-viewWrap.renewal-open article .messageBox .dotList li + li{margin-top: 0;} #wrap.boardPage .upload-viewWrap.renewal-open article .moreBtn{width: 240px; height: 56px; font-size: var(--f-heading2); letter-spacing: -0.36px; font-weight: 700; border-radius: 30px; line-height: 3; margin-top: 24px;} #wrap.boardPage .upload-viewWrap.renewal-open .hero{padding: 103px 0 0; background-image: url('https://static.edmclass.com/common/board/renewal-open/hero-bg-pc.png'); border-radius: var(--b-radius2); margin-bottom: 64px;} #wrap.boardPage .upload-viewWrap.renewal-open .hero .title{margin: 7px auto; width: 323px;} #wrap.boardPage .upload-viewWrap.renewal-open .hero .boxImg{margin-top: 32px;} /* #wrap.boardPage .upload-viewWrap.renewal-open .hero::after{height: 457px; background-image: url('https://static.edmclass.com/common/board/renewal-open/hero-bg2-pc.png'); max-width: 792px;} */ #wrap.boardPage .upload-viewWrap.renewal-open .hero .title-txt{font-size: 110px; line-height: normal; margin-bottom: 20px;} #wrap.boardPage .upload-viewWrap.renewal-open .hero .circleBox{font-size: 32px; letter-spacing: -0.64px; padding: 22px 38px;} #wrap.boardPage .upload-viewWrap.renewal-open .hero .circleBox::after{background-image: url('https://static.edmclass.com/common/board/renewal-open/hero-bg3-pc.png'); width: 218px; height: 122px; height: 122px; right: -164px; top: -40px;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList{top: 130px; font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; font-weight: 700; gap: 24px; padding: 8px 0; margin-bottom: 64px;} .academy #wrap.boardPage .upload-viewWrap.renewal-open .eventList{top: 89px;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList button{padding-top: 0; border-radius: var(--b-radius1); height: 130px;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList button figure{width: 48px; height: 48px; margin-bottom: 12px;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList button:nth-child(1) figure{background-image: url('https://static.edmclass.com/common/board/renewal-open/eventList-1-pc.svg') !important;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList button:nth-child(2) figure{background-image: url('https://static.edmclass.com/common/board/renewal-open/eventList-2-pc.svg') !important;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList button:nth-child(3) figure{background-image: url('https://static.edmclass.com/common/board/renewal-open/eventList-3-pc.svg') !important;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList button:nth-child(4) figure{background-image: url('https://static.edmclass.com/common/board/renewal-open/eventList-4-pc.svg') !important;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList.sticky-active{padding: 8px 0;} #wrap.boardPage .upload-viewWrap.renewal-open .eventList.sticky-active button{height: 114px;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .box1{margin-bottom: 40px;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .box1 .num{right: -24px; top: -50px;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .box2 .num{font-size: var(--f-heading3); letter-spacing: -0.32px; height: 31px; padding: 0 16.5px; line-height: 1.8;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .btnWrap{margin-top: 40px; gap: 12px;} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .btnWrap a{height: 56px; width: 250px; font-size: var(--f-heading2); letter-spacing: -0.36px; font-weight: 700; border-radius: var(--b-radius3);} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .btnWrap a svg{width: 24px; height: 24px;} #wrap.boardPage .upload-viewWrap.renewal-open .event2 .grid-2{grid-template-columns: repeat(4,1fr); column-gap: 24px; row-gap: 0;} #wrap.boardPage .upload-viewWrap.renewal-open .event2 .messageBox{margin-top: 24px;} #wrap.boardPage .upload-viewWrap.renewal-open .event3 .box, #wrap.boardPage .upload-viewWrap.renewal-open .event4 .box{max-width: 588px; margin: 0 auto;} #wrap.boardPage .upload-viewWrap.renewal-open .event4 h2{margin-bottom: 40px;} #wrap.boardPage .upload-viewWrap.renewal-open .event4 .messageBox{padding: 16px;} /************************************************************* 후기 이벤트 > 해외 무료배송 *************************************************************/ #wrap.boardPage .upload-viewWrap.international-shipping .max-width{max-width: 792px;} #wrap.boardPage .upload-viewWrap.international-shipping .articleArea{border-radius: var(--b-radius2); background-color: var(--n-white); box-shadow: var(--box-shadow1); padding: 40px 24px;} #wrap.boardPage .upload-viewWrap.international-shipping .articleArea article{padding: 0; border-radius: 0; box-shadow: none;} #wrap.boardPage .upload-viewWrap.international-shipping article + article{margin-top: 40px;} #wrap.boardPage .upload-viewWrap.international-shipping article .imgWrap img{border-radius: var(--b-radius2);} #wrap.boardPage .upload-viewWrap.international-shipping article .imgWrap .level{position: static; margin: 16px auto 0; width: 72px; height: 24px; font-size: var(--f-body1); letter-spacing: -0.28px; line-height: 1.6;} #wrap.boardPage .upload-viewWrap.international-shipping article .textWrap{padding-top: 4px; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;} #wrap.boardPage .upload-viewWrap.international-shipping article .textWrap b{font-size: var(--f-heading2); line-height: 26px; letter-spacing: -0.36px;} #wrap.boardPage .upload-viewWrap.international-shipping .hero{background-image: url('https://static.edmclass.com/common/board/international-shipping/hero-bg-pc.png'); border-radius: var(--b-radius2); padding-top: 100px; height: 1104px; position: relative;} #wrap.boardPage .upload-viewWrap.international-shipping .hero::after{content: ''; position: absolute; bottom: 0; left: 0; background-image: url('https://static.edmclass.com/common/board/international-shipping/hero-bg-pc-cloud.png'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 221px; height: 160px;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .txt1{width: 612px;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .txt2{width: 522px; margin-top: 284px;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom{padding-top: 40px; font-size: var(--f-display3);} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .txt3{font-size: 32px; text-shadow: 0px 6px 0px rgba(0, 0, 0, 0.25); margin: 12px 0 40px;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box{width: 240px; height: 140px; border-radius: var(--b-radius2); box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.25), -2px -2px 20px 0px #CFDAE6 inset; margin: 0 12px; font-size: var(--f-display2);} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box em{display: inline-block;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box span{font-family: 'Jalnan2'; color: #5154FF; font-weight: 400; display: inline-block; padding-left: 6px;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box::after{width: 52px; height: 52px; top: -16px; right: 0;} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box1::after{background-image: url('https://static.edmclass.com/common/board/international-shipping/hero-box-icon1-pc.png');} #wrap.boardPage .upload-viewWrap.international-shipping .hero .bottom .boxWrap .box2::after{background-image: url('https://static.edmclass.com/common/board/international-shipping/hero-box-icon2-pc.png');} #wrap.boardPage .upload-viewWrap.international-shipping .textTop{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; font-weight: 700; padding: 64px 0 40px;} #wrap.boardPage .upload-viewWrap.international-shipping .textTop .icon{background-image: url('https://static.edmclass.com/common/board/international-shipping/icon1-pc.png'); width: 72px; aspect-ratio: 72/100.01;} #wrap.boardPage .upload-viewWrap.international-shipping .textTop b{font-size: var(--f-heading1); line-height: 28px; letter-spacing: -0.4px; } #wrap.boardPage .upload-viewWrap.international-shipping .event-info{margin-top: 24px; padding: 24px; border-radius: var(--b-radius2);} #wrap.boardPage .upload-viewWrap.international-shipping .event-info .dotTxt{font-size: var(--f-body1); line-height: 24px; letter-spacing: -0.28px; padding-left: 8px;} #wrap.boardPage .upload-viewWrap.international-shipping .event-info .dotTxt::before{width: 3px; height: 3px; top: 10px;} #wrap.boardPage .upload-viewWrap.international-shipping .event-info a{width: 213px; margin-top: 8px;} /************************************************************* 후기 이벤트 > 네이버&구글 방문 후기 이벤트 (+블로그 후기 이벤트도 같은 스타일) *************************************************************/ #wrap.boardPage.event.benefitWrap .upload-viewWrap .messageBox{font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; padding: 12px 8px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .messageBox figure{background-image: url('https://static.edmclass.com/common/membership/infoIcon-black.svg'); width: 16px; height: 16px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .messageBox .message-title{font-size: inherit; line-height: inherit; letter-spacing: inherit; padding-left: 20px; margin-bottom: 2px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .messageBox .dotList li{padding-left: 13px;} #wrap.boardPage.event.benefitWrap .upload-viewWrap .messageBox .dotList li::before{left: 7px; top: 6px; width: 2px; height: 2px;} } @media screen and (min-width: 1628px) { .academy #wrap.boardPage .upload-viewWrap.renewal-open .eventList, .academy #wrap.boardPage .upload-viewWrap.request-review .couponList{top: 95px;} } /************************************************************* hover effect *************************************************************/ @media (hover: hover) and (pointer: fine) { /************************************************************* 후기 이벤트 > 리뷰를 부탁해! *************************************************************/ #wrap.boardPage .upload-viewWrap .btn a:hover{background-color: var(--p-color2);} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox a:hover{background-color: var(--b-color3); color: var(--n-subTitle);} #wrap.boardPage .upload-viewWrap.welcome-package .gift2 .roundBox a:hover svg path{stroke: var(--n-subTitle);} #wrap.boardPage .upload-viewWrap.summer-vacation .limited .contact .list a:hover{background-color: var(--b-color4);} #wrap.boardPage .upload-viewWrap.renewal-open .event1 .btnWrap a:hover{background-color: var(--n-subTitle);} #wrap.boardPage .upload-viewWrap.renewal-open article .moreBtn:hover{background-color: var(--p-color2);} #wrap.boardPage .upload-viewWrap.international-shipping .event-info a:hover{background-color: var(--b-color3); color: var(--n-subTitle);} #wrap.boardPage .upload-viewWrap.international-shipping .event-info a:hover svg path{stroke: var(--n-subTitle);} }