/* toeic :: pc first */ body.toeic{padding-top: 80px;} .mainPage{line-height: 1.69; letter-spacing: -1px;} .mainPage .toeic-header { display: flex; justify-content: center; align-items: center; height: 64px; background-color: #000; } .mainPage .swiper-button-prev, .mainPage .swiper-button-next{color: transparent;} /* 비주얼 */ .visual { background: url("https://static.edmclass.com/toeic/main/section-01_pc.jpg") no-repeat top; background-size: cover; background-position: 0 -50px; height: 942px; } .visual img{max-width: initial;} .visual .max-width{position: relative;} .visual .toeic-section1__header { position: absolute; top: 120px; right: 410px; margin: 0; } .visual .section1-title { position: absolute; top: 170px; right: 330px; margin: 0; } .visual .section1-text { position: absolute; top: 610px; right: 420px; margin: 0; } .visual .section1-side { position: absolute; top: 96px; right: 88px; } /* 고민하지 말고, 지금 신청하세요! */ .infoList .toeic-section2__header { padding: 40px 0; text-align: center; } .infoList .toeic-section2__header button { display: block; margin: 0 auto; padding: 16px 103px; font-weight: 300; height: auto; border-radius: 10px; border: 1px solid #FF6B2A; font-size: 24px; background-color: #FF6B2A; color:#fff;} .infoList .toeic-section2__header button em { font-weight: bold; } .infoList .toeic-section2__header .section2-text { display: block; font-size: 22px; padding-top: 20px; } .infoList .toeic-section2__header > a{display: inline-block; margin: 0 auto; padding: 16px 103px; font-weight: 300; height: auto; border-radius: 10px; border: 1px solid #FF6B2A; font-size: 24px; background-color: #FF6B2A; color: #fff;} .infoList .toeic-section2__header > a b{font-weight: 600;} .infoList .toeic-section2__body { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1080px; margin: 0 auto;} .infoList .toeic-section2__body .toeic-section2__list { position: relative; border: 1px solid #B5B5B5; padding: 39px 10px 10px 10px; } .infoList .toeic-section2__body .toeic-section2__list.different {grid-column: span 2; border: 2px solid #FF6B2A; } .infoList .toeic-section2__body .toeic-section2__list span { display: block; font-size: 20px; color: #150661; } .infoList .toeic-section2__body .toeic-section2__list span.different { color: #FF5409; } .infoList .toeic-section2__body .toeic-section2__list em { display: block; font-size: 26px; font-weight: bold; color: #150661; line-height: 1; padding-bottom: 38px; } .infoList .toeic-section2__body .toeic-section2__list em.different { color: #FF5409; } .infoList .toeic-section2__body .toeic-section2__list em strong { font-size: 16px; color: #5A5A5A; } .infoList .toeic-section2__body .toeic-section2__list img { display: block; margin: 0 auto; } /* 하루 2시간 + 14일 토익 완성 프로젝트! */ .shortProject .toeic-section3__header { margin-top: 179px; } .shortProject .toeic-section3__header img { display: block; margin: 0 auto; } .shortProject .toeic-section3__header .section3-title { display: block; font-size: 44px; font-weight: bold; color: #150661; text-align: center; } .shortProject .toeic-section3-body { position: relative; height: 340px; max-width: 770px; margin: 89px auto 0; } .shortProject .toeic-section3-body .one { z-index: 2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) !important; width: 805px;} .shortProject .toeic-section3-body .week-01 { position: absolute; bottom: 12%; left: 5%; } .shortProject .toeic-section3-body .week-02 { position: absolute; bottom: 12%; right: 14%; } .shortProject .toeic-section3-body .arrow { position: absolute; bottom: 27%; right: 30%; } .shortProject .toeic-section3-bottom { margin-top: 66px; } .shortProject .toeic-section3-bottom img { display: block; margin: 0 auto; } .shortProject .toeic-section3-bottom strong { display: block; font-size: 36px; font-weight: bold; color: #150661; text-align: center; } .shortProject .toeic-section3-bottom span { display: block; font-size: 22px; color: #150661; text-align: center; } /* 오로지, 여러분의 합격을 위해 */ .forYou .toeic-section4__header { margin-top: 157px; } .forYou .toeic-section4__header .section4-title { display: block; font-size: 44px; font-weight: bold; color: #150661; text-align: center; } .forYou .toeic-section4__body { display: flex; gap: 20px; margin-top: 55px; } .forYou .toeic-section4__body .research-box { padding: 46px 8px 42px 8px; display: flex; justify-content: space-around; flex-direction: column; width: 50%; } .forYou .toeic-section4__body .research-box.type-1 {background-color: #4C4DC2; border: 1px solid #2229EE; } .forYou .toeic-section4__body .research-box.type-2 {background-color: #1C6991; border: 1px solid #707070; } .forYou .toeic-section4__body .research-box .research-title{position: relative; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; } .forYou .toeic-section4__body .research-box .research-title::before{content: ""; display: block; position: absolute; bottom: 0; left: 50%; transform: translate(-50% , -50%); height: 2px;} .forYou .toeic-section4__body .research-box .research-text{display: block; font-size: 22px; font-weight: 300; color: #fff; text-align: center; padding: 20px 0;} .forYou .toeic-section4__body .research-box.type-1 .research-title {color: #7EFF0F;} .forYou .toeic-section4__body .research-box.type-2 .research-title {color: #FFF600;} .forYou .toeic-section4__body .research-box.type-1 .research-title::before { width: 80%; background-color: #7EFF0F; } .forYou .toeic-section4__body .research-box.type-2 .research-title::before { width: 54%; background-color: #FFF600; } .forYou .toeic-section4__body .research-sub__box{position: relative; background-color: #fff;} .forYou .toeic-section4__body .research-sub__box img { position: absolute; top: -58%; left: -1.5%; } .forYou .toeic-section4__body .research-sub__box.type-1 {border: 4px solid #7EFF0F; } .forYou .toeic-section4__body .research-sub__box.type-2 {border: 4px solid #FFF600; } .forYou .toeic-section4__body .research-sub__box .research-sub__text{display: block; font-size: 24px; font-weight: bold; text-align: center;} .forYou .toeic-section4__body .research-sub__box.type-1 .research-sub__text { color: #150661;} .forYou .toeic-section4__body .research-sub__box.type-2 .research-sub__text { color: #303030;} .forYou .toeic-section4__bottom { margin-bottom: 90px; } .forYou .toeic-section4__bottom img { display: block; margin: 0 auto; } .forYou .toeic-section4__body .one-line{display: none;} /* 강의리스트 */ .lectureList { background-color: #6319af; border: 1px solid #6319af; } .lectureList .toeic-section5-top { display: flex; justify-content: end; margin: 78px 0 16px; } .lectureList .toeic-section5-top .list { font-size: 20px; color: #fff; border: 1px solid #FFFFFF; padding: 6px 21px; border-radius: 6px;} .lectureList .listWrap { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-bottom: 102px; } .lectureList .toeic-section5-body {border-radius: 12px; background-color: #fff; padding: 35px 20px; } .lectureList .toeic-section5-body .mt-89 { margin-bottom: 24.72vw; } .lectureList .toeic-section5-body .toeic-top-flex { display: flex; justify-content: end; } .lectureList .toeic-section5-body .toeic-top { display: inline; border: 1px solid #000; padding: 6px; } .lectureList .toeic-section5-body .toeic-top span { font-size: 22px; font-weight: 500; } .lectureList .toeic-section5-body .toeic-flex .left { border-bottom: 1px solid #cfcfcf; margin: 0 -20px; } .lectureList .toeic-section5-body .toeic-flex .left .title { margin-top: 10px; display: block; font-size: 24px; font-weight: bold; color: #000; line-height: 1; text-align: center; } .lectureList .toeic-section5-body .toeic-flex .left .title.blue { color: #0046E8; } .lectureList .toeic-section5-body .toeic-flex .left .title.red { color: #F51533; } .lectureList .toeic-section5-body .toeic-flex .left .text { display: block; font-size: 52px; font-weight: bold; color: #000; text-align: center; line-height: 1.4; } .lectureList .toeic-section5-body .toeic-flex .left img { margin: 0 auto; } .lectureList .toeic-section5-body .toeic-flex .left .explanation { display: block; padding: 13px 0 22px; text-align: center; font-size: 22px; line-height: 32px; } .lectureList .toeic-section5-body .toeic-flex .right { text-align: center; } .lectureList .toeic-section5-body .toeic-flex .right img { display: block; margin-right: 8px; } .lectureList .toeic-section5-body .toeic-flex .right .title { margin: 24px auto 0; } .lectureList .toeic-section5-body .toeic-flex .right .baseline { display: flex; justify-content: space-between; align-items: flex-end;} .lectureList .toeic-section5-body .toeic-flex .right .baseline img { display: inline-block; object-fit: contain;} .lectureList .toeic-section5-body .toeic-flex .right .baseline div { display: flex; align-items: flex-end; text-align: right; } .lectureList .toeic-section5-body .toeic-flex .right .count { font-size: 20px; color: #888888; text-decoration: line-through; margin-right: 5px; } .lectureList .toeic-section5-body .toeic-flex .right .text { font-size: 50px; font-weight: bold; color: #000; line-height: 1; } .lectureList .toeic-section5-body .toeic-button button { display: block; width: 100%; margin: 32px auto 0; padding: 16px 0; font-weight: 300; height: auto; border-radius: 10px; border: 1px solid #F93946; color: #fff; font-size: 24px; background-color: #F93946; } .lectureList .toeic-section5-body .toeic-button button em { font-weight: bold; } /* 왜 FINAL 토익일까요? */ .why-final-toeic .why-header { margin-top: 150px; } .why-final-toeic .why-header .top img { display: block; margin: 0 auto; } .why-final-toeic .why-header .top .section6-title { display: block; font-size: 44px; font-weight: bold; color: #150661; text-align: center; margin-bottom: 50px; } .why-final-toeic .why-header .body img { display: block; margin: 0 auto; } .why-final-toeic .why-header .body strong { display: block; text-align: center; font-size: 30px; font-weight: bold; color: #000000; } .why-final-toeic .why-header .body span { display: flex; justify-content: center; text-align: center; font-size: 22px; } .why-final-toeic .first .why-header .body span{text-align: left; font-weight: 300; } .why-final-toeic .toeic-section6-body { position: relative; display: flex; align-items: end; gap: 20px; margin: 118px auto 180px; justify-content: center; max-width: 1000px;} .why-final-toeic .toeic-section6-body .toeic-box:nth-child(4) { position: absolute; top: -20px; left: 254px;} .why-final-toeic .toeic-section6-body .toeic-box:nth-child(5) { position: absolute; top: -95px; left: 594px;} .why-final-toeic .toeic-section7-body { margin-top: 60px } .why-final-toeic .toeic-section7-body img { display: block; margin: 0 auto; } .why-final-toeic .toeic-section7-body .section7-box { display: flex; justify-content: center; align-items: center; gap: 140px; } .why-final-toeic .toeic-section7-body .section7-box .section7-box__item { position: relative; } .why-final-toeic .toeic-section7-body .section7-box .section7-box__item::before{ content: ''; position: absolute; background-size: cover; background-repeat: no-repeat; height: 86px; } .why-final-toeic .toeic-section7-body .section7-box .section7-box__item.type-1::before {top: -8%; left: -40%; background-image: url('https://static.edmclass.com/toeic/main/bay-tree_01.png'); width: 208px;} .why-final-toeic .toeic-section7-body .section7-box .section7-box__item.type-2::before {top: 11%; left: -54%; background-image: url('https://static.edmclass.com/toeic/main/bay-tree_02.png'); width: 225px;} .why-final-toeic .toeic-section7-body .section7-box .section7-box__item span { display: block; text-align: center; font-size: 20px; font-weight: bold; color: #000; } .why-final-toeic .toeic-section7-bottom { position: relative; text-align: center; max-width: 1000px; margin: 0 auto;} .why-final-toeic .toeic-section7-bottom span { font-size: 20px; font-weight: bold; color: #010101; } .why-final-toeic .toeic-section7-bottom span:nth-child(2) { position: absolute; top: 59%; left: 6%; } .why-final-toeic .toeic-section7-bottom span:nth-child(3) { position: absolute; top: 59%; left: 33.5%; } .why-final-toeic .toeic-section7-bottom span:nth-child(4) { position: absolute; top: 59%; left: 59%; } .why-final-toeic .toeic-section7-bottom span:nth-child(5) { color: #fff; position: absolute; top: 59%; right: 9%; } .why-final-toeic .toeic-section8-body{margin-top: 48px;} .why-final-toeic .toeic-section8-body .section8_box { display: flex; justify-content: space-around; align-items: center; gap: 70px; max-width: 1000px; margin: 0 auto; flex-wrap: wrap;} .why-final-toeic .toeic-section8-body .section8_box.section8_02 { flex-direction: row-reverse; justify-content: space-around; } .why-final-toeic .toeic-section8-body .teacher-box .contents img { display: block; } .why-final-toeic .toeic-section8-body .teacher-box .contents .title { display: block; font-size: 26px; color: #000; } .why-final-toeic .toeic-section8-body .teacher-box .contents .title strong { font-size: 48px; font-weight: bold; } .why-final-toeic .toeic-section8-body .teacher-box .contents .text { display: block; font-size: 20px; color: #0B0B26; } .why-final-toeic .toeic-section8-bottom { margin-top: 50px; display: grid; grid-template-columns: repeat(2,1fr); gap: 30px;} .why-final-toeic .toeic-section8-bottom .bottom-box .bottom-box__item {aspect-ratio: 16/9; overflow: hidden;} .why-final-toeic .toeic-section8-bottom .bottom-box .text { display: block; font-size: 18px; text-align: center; margin-top: 14px; } .why-final-toeic .fourth .why-header .body strong em{ text-align: center; font-size: 18px; font-weight: bold; color: #000;} .why-final-toeic .section9-image { display: flex; gap: 18px; justify-content: center; align-items: baseline; margin-top: 130px; flex-wrap: wrap;} .why-final-toeic .section9-image .section9-box img { display: block; } .why-final-toeic .section9-image .section9-box .text { display: block; text-align: center; font-size: 20px; color: #000; } /* 성공 후기로 보여드립니다 */ .review{padding-bottom: 150px;} .review .swiper-wrap{position: relative;} .review .swiper-box { margin-top: 60px; } .review .swiper-box img { display: block; margin: 0 auto; } .review .swiper-box .text { margin-top: 25px; display: block; font-size: 22px; color: #000; text-align: center; } .review .swiper-button-prev { background: url('https://static.edmclass.com/toeic/main/prev.png') no-repeat; background-size: 100% auto; background-position: center; top: 65%; } .review .swiper-button-next { background: url('https://static.edmclass.com/toeic/main/next.png') no-repeat; background-size: 100% auto; background-position: center; top: 65%; } .review .swiper-button-next::after, .review .swiper-button-prev::after { display: none; } .review .toeic-section10-header { margin-top: 140px; } .review .toeic-section10-header img { display: block; margin: 0 auto; } /* 특별 이벤트*/ .special-event { background-color: #D2E4F8; } .special-event .toeic-section11-header { padding: 130px 0 52px; } .special-event .toeic-section11-header img { display: block; margin: 0 auto; } .special-event .swiper_02 { margin-left: auto; margin-right: auto; overflow: hidden; list-style: none; padding: 0; z-index: 1; width: 100%; text-align: center; padding-bottom: 88px; position: relative; } .special-event .swiper-button-prev { background: url('https://static.edmclass.com/toeic/main/prev-02.png') no-repeat; background-size: 100% auto; background-position: center; top: 55%; } .special-event .swiper-button-next { background: url('https://static.edmclass.com/toeic/main/next-02.png') no-repeat; background-size: 100% auto; background-position: center; top: 55%; } /* main-footer */ .main-footer .toeic-section12-body img { display: block; margin: 0 auto; } /* 꼭 확인해 주세요 */ .notice {font-size: 14px; text-align: left; background: #ebebeb; padding: 70px 0; color: #1D1D1F;} .notice .max-width{max-width: 1000px;} .notice h2 {margin-bottom: 16px; font-size: 20px; font-weight: bold;} .notice table, .notice table th, .notice table td {border: none;vertical-align: top; padding: 8px 0;} .notice table th{font-weight: 600;} .notice table td{padding-left: 16px;} .notice .bullet-square {margin-bottom: 16px;} /* 고객센터 */ .customerService{padding-bottom: 100px;} .customerService .service-header { font-size: 24px; font-weight: bold; letter-spacing: -0.72px; color: #333; padding: 23px 0; } .customerService .service-contents { display: flex; margin-top: 44px; gap: 70px; align-items: center;} .customerService .service-contents > div{width: calc(100%/3);} .customerService .service-contents .left { display: flex; flex-direction: column; } .customerService .service-contents .left .title { font-size: 30px; letter-spacing: -0.9px; color: #333; } .customerService .service-contents .left .title em { font-weight: bold; } .customerService .service-contents .left .text { display: block; padding-top: 4px; font-size: 20px; font-weight: 300; line-height: 1.3; letter-spacing: -0.6px; color: #333; } .customerService .service-contents .center { display: flex; justify-content: center; align-items: center; text-align: left;} .customerService .service-contents .center .center-image { margin-right: 25px; } .customerService .service-contents .center .box { display: flex; flex-direction: column; } .customerService .service-contents .center .box .number { font-size: 30px; font-weight: bold; letter-spacing: -0.9px; color: #333; line-height: 1.4; } .customerService .service-contents .center .box .operating-time { font-size: 14px; letter-spacing: -0.42px; color: #aaa; } .customerService .service-contents .line { width: 1px; height: 70px; background-color: #ccc; margin: 0 43px; } .customerService .service-contents .right{position: relative;} .customerService .service-contents .right::before{content: ''; position: absolute; left: -48px; top: 50%; transform: translateY(-50%); width: 1px; height: 100%; background-color: #ccc;} .customerService .service-contents .right .inquiry-box { position: relative;} .customerService .service-contents .right .inquiry-box .false { display: inline-block; } .customerService .service-contents .right .inquiry-box .true { display: none; } .customerService .service-contents .right .inquiry-box.active { border: 1px solid #ff6b2a; } .customerService .service-contents .right .inquiry-box.active .true { display: inline-block; } .customerService .service-contents .right .inquiry-box.active .false { display: none; } .customerService .service-contents .right .inquiry-box .link { font-size: 20px; font-weight: bold; letter-spacing: -0.6px; color: #333; display: flex; align-items: center; justify-content: center; padding: 22px 47px 19px 42px; border-radius: 35px; border: 1px solid #ccc; background-color: #fff; } .customerService .service-contents .right .inquiry-box .link span{display: inline-block; margin-left: 8px;} /* 강의리스트 > 팝업 */ .popupWrap.lectureListPopup .popup{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;} .popupWrap.lectureListPopup .popup .dropDownMenu{margin-bottom: 8px;} .popupWrap.lectureListPopup .popup .scrollWrap p{font-weight: 700; text-align: left; margin: 16px 0 8px; padding: 0 8px;} .popupWrap.lectureListPopup .popup .wrap + .wrap p{margin-top: 24px;} .popupWrap.lectureListPopup .popup .tableWrap{border-radius: var(--b-radius3); overflow: hidden; border: 1px solid var(--s-color1);} .popupWrap.lectureListPopup .popup table{width: 100%; border: none;} .popupWrap.lectureListPopup .popup table tr{height: 48px;} .popupWrap.lectureListPopup .popup table tr:not(:last-child){border-bottom: 1px solid var(--s-color1);} .popupWrap.lectureListPopup .popup table th{background-color: var(--b-color4); border-right: 1px solid var(--s-color1); width: 50px; color: var(--n-info); font-weight: 700;} .popupWrap.lectureListPopup .popup table td{text-align: left; padding: 0 16px;} @media screen and (min-width: 2100px) { /* 비주얼 */ .visual .section1-title{right: calc(10vw + 110px);} .visual .toeic-section1__header{right: calc(13vw + 130px);} .visual .section1-text{right: calc(13.5vw + 122px);} .visual .section1-side{right: calc(-1vw + 50px);} } @media screen and (min-width: 1200px){ body.toeic{padding-top: 130px;} } @media screen and (max-width: 1199px){ /* 비주얼 */ .visual { background: url("https://static.edmclass.com/toeic/main/section-01_mo.png") no-repeat; background-size: cover; height: 192vw; background-position: 37% 50%; } .visual .toeic-section1__header { position: unset; display: flex; justify-content: center; padding-top: 14.44vw; } .visual .toeic-section1__header .mo_tab-none { width: 71.55vw; } .visual .section1-title { position: unset; display: flex; justify-content: center; padding-top: 5vw; } .visual .section1-title .mo_tab-none { width: 86vw; padding-right: 10vw; } .visual .section1-text { position: unset; display: flex; justify-content: center; padding-right: 6vw; } .visual .section1-text .mo_tab-none { width: 55.22vw; } .visual .section1-side { position: unset; display: flex; justify-content: center; padding-top: 9.66vw; } .visual .section1-side .mo_tab-none { width: 46vw; padding-left: 22vw; } /* 강의 리스트 */ .lectureList .toeic-section5-body .toeic-flex .right .baseline div{text-align: right; justify-content: flex-end; flex-direction: column;} .lectureList .toeic-section5-body .toeic-flex .right .count{display: block; width: 100%;} /* 왜 FINAL 토익일까요? */ .why-final-toeic .toeic-section6-body .toeic-box:nth-child(4) { position: absolute; top: -5px; left: 309px;} .why-final-toeic .toeic-section6-body .toeic-box:nth-child(5) { position: absolute; top: -75px; left: 650px;} .why-final-toeic .toeic-section7-bottom span{left: 50% !important; transform: translateX(-50%) !important; right: auto !important; display: block; width: 100%;} .why-final-toeic .toeic-section7-bottom span:nth-child(2) {top: 19%;} .why-final-toeic .toeic-section7-bottom span:nth-child(3) {top: 38%;} .why-final-toeic .toeic-section7-bottom span:nth-child(4) {top: 54%;} .why-final-toeic .toeic-section7-bottom span:nth-child(5) {top: 85%; color: #1D1D1F;} /* 고객센터 */ .customerService .service-header{ position: relative;} .customerService .service-header::after{content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #c7c7c7;} .customerService .service-contents{display: block;} .customerService .service-contents > div{width: 100%;} .customerService .service-contents .left{text-align: center;} .customerService .service-contents .left .title{font-size: 23px;} .customerService .service-contents .left .text{font-size: 16px; padding-top: 9px;} .customerService .service-contents .center{margin-top: 42px;} .customerService .service-contents .center .center-image{width: 55px; margin-right: 12px;} .customerService .service-contents .center .box .number{font-size: 23px;} .customerService .service-contents .center .box .operating-time{font-size: 10px;} .customerService .service-contents .right{margin-top: 40px;} .customerService .service-contents .right .inquiry-box .link{width: 200px; margin: 0 auto; height: 60px; font-size: 15px; padding: 0; line-height: 60px;} .customerService .service-contents .right .inquiry-box .link span{margin-left: 4px;} /* 강의리스트 > 팝업 */ .popupWrap.lectureListPopup .popup{font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px;} .popupWrap.lectureListPopup .popup .scrollWrap p{margin: 8px 0 8px;} .popupWrap.lectureListPopup .popup table tr{height: initial;} .popupWrap.lectureListPopup .popup table td{padding: 11.5px 8px;} .popupWrap.lectureListPopup .popup .wrap + .wrap p{margin-top: 16px;} } @media screen and (max-width: 1064px) { /* 왜 FINAL 토익일까요? */ .why-final-toeic .toeic-section6-body .toeic-box:nth-child(4) {position: absolute; top: -1%; left: calc(50% - 18vw); width: 16%;} .why-final-toeic .toeic-section6-body .toeic-box:nth-child(5) {position: absolute; top: -16%; left:calc(50% + 14vw); width: 16%;} /* 오로지, 여러분의 합격을 위해 */ .forYou .toeic-section4__body .research-box .research-title{font-size: 20px;} .forYou .toeic-section4__body .research-box .research-text{font-size: 14px; padding: 8px 0 37px;} .forYou .toeic-section4__body .research-box .research-sub__text{font-size: 15px;} .forYou .toeic-section4__body .research-box img{width: 40px;} .forYou .toeic-section4__body .research-box img.size_01, .forYou .toeic-section4__body .research-box img.size_02{position: absolute; left: 50%; transform: translateX(-50%);} .forYou .toeic-section4__body .research-box img.size_01{bottom: -76px; width: 18px;} .forYou .toeic-section4__body .research-box img.size_02{bottom: -77px; width: 20px;} } @media screen and (max-width: 960px){ /* 강의리스트 */ .lectureList .listWrap{grid-template-columns: repeat(1,1fr); gap: 42px;} .lectureList .toeic-section5-body{width: 100%; padding: 23px 10px 58px;} .lectureList .toeic-section5-top{margin: 86px 0 15px;} .lectureList .toeic-section5-top .list{font-size: 14px; padding: 5px 19px;} .lectureList .toeic-section5-body .toeic-flex .left{margin: 0; border: none;} .lectureList .toeic-section5-body .toeic-top{padding: 1px 12px;} .lectureList .toeic-section5-body .toeic-top span{font-size: 16px;} .lectureList .toeic-section5-body .toeic-flex .left .title{font-size: 22px;} .lectureList .toeic-section5-body .toeic-flex .left .text{font-size: 44px;} .lectureList .toeic-section5-body .toeic-flex img{max-width: 275px; width: 100%;} .lectureList .toeic-section5-body .toeic-flex .right .title{max-width: 260px;} .lectureList .toeic-section5-body .toeic-flex .left .explanation{font-size: 18px; padding: 4px 0 14px;} .lectureList .toeic-section5-body .toeic-flex .right .baseline{justify-content: center;} .lectureList .toeic-section5-body .toeic-flex .right .baseline img{width: 80px;} .lectureList .toeic-section5-body .toeic-flex .right .count{font-size: 16px; } .lectureList .toeic-section5-body .toeic-flex .right .text{font-size: 34px;} .lectureList .toeic-section5-body .toeic-button button{margin-top: 26px; font-size: 18px; padding: 12px 26px;} } @media screen and (max-width: 767px){ .mainPage .toeic-header { height: 54px; } /* 고민하지 말고, 지금 신청하세요! */ .infoList .toeic-section2__header > a{font-size: 18px; padding: 10px 0; width: 100%; max-width: 328px; margin-left: auto; margin-right: auto;} .infoList .toeic-section2__header{padding: 44px 0;} .infoList .toeic-section2__header button{font-size: 18px; padding: 12px 40px;} .infoList .toeic-section2__header .section2-text{font-size: 14px; padding-top: 19px;} .infoList .toeic-section2__body{grid-template-columns: repeat(2,1fr); gap: 8px;} .infoList .toeic-section2__body .toeic-section2__list{padding: 13px 5px 5px; height: 170px;} .infoList .toeic-section2__body .toeic-section2__list span{font-size: 11px;} .infoList .toeic-section2__body .toeic-section2__list em{font-size: 15px; padding-bottom: 14px;} .infoList .toeic-section2__body .toeic-section2__list img{max-height: 68%; width: 85%; object-fit: contain;} .infoList .toeic-section2__body .toeic-section2__list .mo_05{width: 100%; } .infoList .toeic-section2__body .toeic-section2__list em{padding-bottom: 14px;} .infoList .toeic-section2__body .toeic-section2__list em strong{font-size: 9px;} /* 하루 2시간 + 14일 토익 완성 프로젝트! */ .shortProject .toeic-section3__header{margin-top: 90px;} .shortProject .toeic-section3__header .section3-title{font-size: 26px;} .shortProject .toeic-section3-body{margin-top: 34px; max-width: 90%; height: auto;} .shortProject .toeic-section3-bottom{margin-top: 67px;} .shortProject .toeic-section3-bottom strong{font-size: 24px;} .shortProject .toeic-section3-bottom span{font-size: 14px;} .shortProject .toeic-section3-bottom img{width: 197px;} /* 오로지, 여러분의 합격을 위해 */ .forYou .toeic-section4__header .section4-title{font-size: 23px;} .forYou .toeic-section4__header{margin-top: 68px;} .forYou .toeic-section4__body{margin-top: 32px; flex-wrap: wrap; gap: 58px;} .forYou .toeic-section4__body .research-box{width: 100%; position: relative;} .forYou .toeic-section4__body .one-line{display: block;} .forYou .toeic-section4__bottom .two-line{display: none;} /* 왜 FINAL 토익일까요? */ .why-final-toeic .why-header{margin-top: 120px;} .why-final-toeic .why-header .top .section6-title{font-size: 26px; margin-bottom: 19px;} .why-final-toeic .why-header .body strong{font-size: 20px;} .why-final-toeic .why-header .body span{font-size: 14px;} .why-final-toeic .first .why-header .body span{text-align: center;} .why-final-toeic .toeic-section6-body{flex-direction: column; margin: 50px auto 138px; max-width: 320px;} .why-final-toeic .toeic-section6-body .toeic-box{width: 100%;} .why-final-toeic .toeic-section6-body .toeic-box:nth-child(4){top: 25%; left: 7.7%; width: 153px;} .why-final-toeic .toeic-section6-body .toeic-box:nth-child(5){top: 60%; left: 9%; width: 153px;} .why-final-toeic .toeic-section7-body{margin-top: 36px;} .why-final-toeic .toeic-section7-body .section7-box{gap: 8px; justify-content: space-around; max-width: 328px; margin: 0 auto;} .why-final-toeic .toeic-section7-body .section7-box .section7-box__item span{font-size: 15px;} .why-final-toeic .toeic-section7-body .section7-box .section7-box__item::before{height: 60px;} .why-final-toeic .toeic-section7-body .section7-box .section7-box__item.type-1::before{background-image: url('https://static.edmclass.com/toeic/main/bay-tree_01_mo.png'); width: 146px; } .why-final-toeic .toeic-section7-body .section7-box .section7-box__item.type-2::before{background-image: url('https://static.edmclass.com/toeic/main/bay-tree_02_mo.png'); width: 157px;} .why-final-toeic .toeic-section8-body{margin-top: 17px;} .why-final-toeic .toeic-section8-body .teacher-box .contents img{margin: 0 auto;} .why-final-toeic .toeic-section8-body .section8_box{gap: 18px;} .why-final-toeic .toeic-section8-body .section8_box .teacher-box{width: 100%;} .why-final-toeic .toeic-section8-body .teacher-box .contents .title{font-size: 18px;} .why-final-toeic .toeic-section8-body .teacher-box .contents .title strong{font-size: 30px;} .why-final-toeic .toeic-section8-body .teacher-box .contents .text{font-size: 16px;} .why-final-toeic .toeic-section8-bottom{margin-top: 81px; grid-template-columns: repeat(1,1fr);} .why-final-toeic .toeic-section8-bottom .bottom-box .text{font-size: 14px; margin-top: 12px;} .why-final-toeic .fourth .why-header .body strong em{font-size: 12px;} .why-final-toeic .section9-image{margin-top: 43px; gap: 0;} .why-final-toeic .section9-image .section9-box{width: 100%;} .why-final-toeic .section9-image .section9-box img{width: 68%; margin: 0 auto;} .why-final-toeic .section9-image .section9-box .text{font-size: 15px;} /* 성공 후기로 보여드립니다 */ .review{padding-bottom: 120px;} .review .toeic-section10-header{margin-top: 152px;} .review .toeic-section10-header img{width: 59%;} .review .swiper-button-next, .review .swiper-button-prev{display: none;} .review .swiper-box .text{font-size: 16px;} .review .swiper-box img{width: 57px;} /* 특별 이벤트*/ .special-event .toeic-section11-header{padding: 144px 0 52px;} .special-event .toeic-section11-header img{width: 75%;} .special-event .swiper-button-prev, .special-event .swiper-button-next{display: none;} /* 고객센터 */ .customerService{padding-bottom: 40px; overflow: hidden;} .customerService .service-header{font-size: 18px; padding: 12px 0;} } /************************************************************* hover effect *************************************************************/ @media (hover: hover) and (pointer: fine) { .infoList .toeic-section2__header button:hover { box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.3); } .infoList .toeic-section2__header > a:hover {box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.3);} .lectureList .toeic-section5-body .toeic-button button:hover { box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.3); } .lectureList-modal-menu > button:first-child:hover { background: #a031ee; } .lectureList-modal-menu > button:last-child:hover { background: #fc682d; } }