/****************************************** fair.css — lfair 참가학교 fair-wrap(목록) · participating-school(상세) 1px = 1rem (html font-size: 1px) ******************************************/ /* 페이지 공통 — 콘텐츠 폭 */ #fair.fair-wrap .fair-width, #fair.fair-wrap .consulting .max-width, #fair.fair-wrap .fair-allList .max-width, .participating-school .fair-hero .fair-width, .participating-school .fair-view .max-width {width: min(var(--content), 100% - 48rem); max-width: 1248rem; margin: 0 auto; box-sizing: border-box;} /* 페이지 공통 — 히어로 */ #fair.fair-wrap .fair-hero.title-banner, .participating-school .fair-hero.title-banner {height: 240rem; margin-top: 0; padding: 80rem 24rem; background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)), url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/fair-banner-bg.jpg") center / cover no-repeat; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center;} #fair.fair-wrap .fair-hero h1, .participating-school .fair-hero h1 {font-size: 54rem; font-weight: 700; line-height: 130%; letter-spacing: -1.08rem; margin: 0; color: #fff;} #fair.fair-wrap .fair-hero .textWrap p {margin: 0; font-size: 22rem; font-weight: 400; line-height: 1.5; color: #fff;} #fair.fair-wrap .fair-hero .textWrap span {display: block; font-size: 22rem; font-weight: 700; color: #fff;} /* 페이지 공통 — 국가 탭 */ .participating-school .fair-view .tabMenu, #fair.fair-wrap .fair-allList .tabMenu {display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 16rem; margin: 0 0 40rem;} .participating-school .fair-view .tabMenu .tab, #fair.fair-wrap .fair-allList .tabMenu .tab {display: inline-flex; align-items: center; justify-content: center; height: 49rem; padding: 0 24rem; border-radius: 9999rem; font-size: 22rem; font-weight: 400; line-height: 1; color: #333; background: #F5F5F7; white-space: nowrap; text-decoration: none;} .participating-school .fair-view .tabMenu .tab.active, #fair.fair-wrap .fair-allList .tabMenu .tab.active {background: #1EC95B; color: #fff; font-weight: 700;} /* fair-wrap — 헤더 */ html:has(#fair.fair-wrap) #navigation header#header {background: #fff; border-bottom-color: #eee;} /* fair-wrap — 섹션 공통 */ #fair.fair-wrap .sec {padding: 96rem 0;} #fair.fair-wrap .sec-head {text-align: center; margin-bottom: 52rem;} #fair.fair-wrap .sec-head h2 {font-size: 40rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.5; color: #000; margin-bottom: 8rem;} #fair.fair-wrap .sec-head p {font-size: 22rem; color: #666; font-weight: 400; line-height: 1.5; letter-spacing: -.01em;} #fair.fair-wrap .mo-br {display: none;} /* fair-wrap — 상담분야 (legacy program-list) */ #fair.fair-wrap .fair-field {padding: 100rem 0 140rem; background: #F5F5F7;} #fair.fair-wrap .program-list-wrap {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24rem;} #fair.fair-wrap .program-list-wrap .box {position: relative; aspect-ratio: 252 / 240; border-radius: var(--r16); overflow: hidden;} #fair.fair-wrap .program-list-wrap .box.box--mint {--card-bg: #C8EDDA; background-color: var(--card-bg);} #fair.fair-wrap .program-list-wrap .box.box--darkgreen {--card-bg: #0D3D24; background-color: var(--card-bg);} #fair.fair-wrap .program-list-wrap .box.box--skyblue {--card-bg: #C4E6F4; background-color: var(--card-bg);} #fair.fair-wrap .program-list-wrap .box.box--periwinkle {--card-bg: #C6D3EE; background-color: var(--card-bg);} #fair.fair-wrap .program-list-wrap .box.box--cream {--card-bg: #EDE9C4; background-color: var(--card-bg);} #fair.fair-wrap .program-list-wrap .box.box--sage {--card-bg: #C4EDCC; background-color: var(--card-bg);} #fair.fair-wrap .program-list-wrap .box.box--aqua {--card-bg: #B8EEEB; background-color: var(--card-bg);} #fair.fair-wrap .program-list-wrap .box.box--purple {--card-bg: #5E2FA0; background-color: var(--card-bg);} #fair.fair-wrap .program-list-wrap .box img {width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block;} #fair.fair-wrap .program-list-wrap .box .textWrap {position: absolute; z-index: 2; top: 0; left: 0; width: 100%; padding: 30rem 24rem; color: #fff;} #fair.fair-wrap .program-list-wrap .box .textWrap span {display: block; font-size: 16rem; font-weight: 400; line-height: 1.5; letter-spacing: -.01em;} #fair.fair-wrap .program-list-wrap .box .textWrap p {margin-top: 0; font-size: 26rem; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; color: inherit;} #fair.fair-wrap .program-list-wrap .box .textWrap.black {color: #333;} #fair.fair-wrap .program-list-wrap .box .textWrap.black p {color: #000;} /* fair-wrap — 諮詢領域 (consulting) */ #fair.fair-wrap .consulting {padding: 100rem 0 140rem; background: #F5F5F7; text-align: center;} #fair.fair-wrap .consulting h2 {margin: 0 0 8rem; font-size: 40rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: #000;} #fair.fair-wrap .consulting .sub-title {margin: 0; font-size: 22rem; font-weight: 400; line-height: 1.5; letter-spacing: -.01em; color: #333;} #fair.fair-wrap .consulting ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24rem; margin: 40rem 0 0; padding: 0; list-style: none;} #fair.fair-wrap .consulting ul li {position: relative; aspect-ratio: 294 / 280; border-radius: 12rem; overflow: hidden; text-align: left; color: #fff; background-repeat: no-repeat; background-size: cover; background-position: center; isolation: isolate;} #fair.fair-wrap .consulting ul li.black {color: #000;} #fair.fair-wrap .consulting ul li.black .txt1 {color: #000;} #fair.fair-wrap .consulting ul li.li-1 {background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/fair-consulting-img1-v3.webp");} #fair.fair-wrap .consulting ul li.li-2 {background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/fair-consulting-img2-v3.webp");} #fair.fair-wrap .consulting ul li.li-3 {background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/fair-consulting-img3-v3.webp");} #fair.fair-wrap .consulting ul li.li-4 {background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/fair-consulting-img4-v3.webp");} #fair.fair-wrap .consulting ul li.li-5 {background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/fair-consulting-img5-v3.webp");} #fair.fair-wrap .consulting ul li.li-6 {background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/fair-consulting-img6-v3.webp");} #fair.fair-wrap .consulting ul li.li-7 {background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/fair-consulting-img7-v3.webp");} #fair.fair-wrap .consulting ul li.li-8 {background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/fair-consulting-img8-v3.webp");} #fair.fair-wrap .consulting ul li a {display: block; width: 100%; height: 100%; padding: 24rem; box-sizing: border-box; text-decoration: none; color: inherit;} #fair.fair-wrap .consulting ul li .txt1 {margin: 0; font-size: 26rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: inherit;} #fair.fair-wrap .consulting ul li .plus-icon {position: absolute; right: 24rem; bottom: 24rem; width: 40rem; height: 40rem; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/plus-icon.svg") no-repeat center / contain; transition: transform 0.2s ease;} #fair.fair-wrap .consulting ul li:hover .plus-icon {background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/plus-icon-hover.svg") no-repeat center / contain; transform: rotate(90deg);} /* fair-wrap — fair-allList */ #fair.fair-wrap .fair-allList {padding: 100rem 0 100rem; background: #fff;} #fair.fair-wrap .fair-allList .listWrap .sub-title {margin: 0 0 40rem; font-size: 16rem; color: #666; letter-spacing: -.01em;} #fair.fair-wrap .fair-allList .listWrap .listSection + .listSection {margin-top: 140rem;} #fair.fair-wrap .fair-allList .listWrap .listSection h2 {margin: 0 0 40rem; font-size: 40rem; font-weight: 700; line-height: 130%; letter-spacing: -0.8rem; color: #000; text-align: center;} /* fair-wrap — 추천 학교 */ #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24rem; row-gap: 60rem; margin: 0; padding: 0; list-style: none;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li {background: #fff; border-radius: 12rem; box-shadow: 0 0 0 1px #E4E8F1, 0 4rem 10rem #EBEFF4; overflow: hidden;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li.loading, #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li.error {display: flex; align-items: center; justify-content: center; min-height: 120rem; grid-column: 1 / -1; border: none; box-shadow: none; font-size: 16rem; color: #666;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li a {display: flex; flex-direction: column; gap: 16rem; position: relative; width: 100%; height: 100%; text-align: left; text-decoration: none; color: inherit; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .thumb {display: block; position: relative; flex: 0 0 auto; width: 100%; height: 200rem; overflow: hidden; background: #F4F6FA; border-radius: 12rem 12rem 0 0;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .thumb img {display: block; width: 100%; height: 100%; object-fit: cover;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .logo {display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 12rem; right: 12rem; z-index: 2; width: 62rem; height: 40rem; padding: 4rem; background: #fff; border-radius: 4rem; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .logo img {display: block; width: 100%; height: 100%; object-fit: contain;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .text {display: flex; flex-direction: column; flex: 1 1 auto; padding: 0 16rem 16rem; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .flagWrap {display: flex; flex-wrap: wrap; align-items: center; gap: 8rem; margin: 0 0 12rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .flagWrap img {display: block; width: auto; height: 15rem; object-fit: contain;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li h3, #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .ellipsis_2 {margin: 0 0 2rem; font-size: 20rem; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; color: #000; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .summary {display: -webkit-box; margin: 0; font-size: 14rem; font-weight: 400; line-height: 1.5; letter-spacing: -.01em; color: #666; word-break: break-word; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;} /* fair-wrap — 인기 학교 */ #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24rem; margin: 0; padding: 0; list-style: none;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li {background: #fff; border-radius: 12rem; box-shadow: 0 0 0 1px #E4E8F1, 0 4rem 10rem #EBEFF4; min-height: 203rem; overflow: hidden;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li.loading, #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li.error {display: flex; align-items: center; justify-content: center; min-height: 120rem; grid-column: 1 / -1; border: none; box-shadow: none; font-size: 16rem; color: #666;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li a {display: flex; flex-direction: column; gap: 16rem; width: 100%; height: 100%; min-height: 203rem; padding: 24rem; text-align: left; text-decoration: none; color: inherit; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li .logo {display: block; flex: 0 0 auto; width: 60rem; height: 48rem; overflow: hidden;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li .logo img {display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li .info {display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 auto; min-width: 0; gap: 0;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li h3, #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li .ellipsis_2 {margin: 0; font-size: 20rem; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; color: #000; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li .flagWrap {display: flex; flex-wrap: wrap; align-items: center; gap: 8rem; margin-top: auto;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li .flagWrap img {display: block; width: 20rem; height: 15rem; object-fit: cover;} /* fair-wrap — 상담 가능 학교 목록 */ #fair.fair-wrap .fair-allList .listWrap .listSection.consultation h2 {margin: 0 0 16rem; font-size: 32rem; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: #000; text-align: center;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar {position: sticky; top: var(--site-header-offset); z-index: 20; width: 100vw; margin: 0 calc(50% - 50vw) 40rem; padding: 24rem 0; background-color: #fff; box-shadow: 0 1px 0 0 #E4E8F1; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar.is-stuck {box-shadow: 0 4rem 10rem 0 rgba(0, 0, 0, .12), 0 1px 0 0 #E4E8F1;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar.is-stuck .searchInput {flex-basis: 466rem; width: 466rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar-inner {display: flex; align-items: center; justify-content: space-between; gap: 24rem; width: min(var(--content), 100% - 48rem); max-width: 1248rem; margin: 0 auto; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar .tabMenu {display: flex; flex-wrap: wrap; align-items: center; gap: 16rem; margin: 0; flex: 1 1 auto; min-width: 0;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar .tabMenu .tab {display: inline-flex; align-items: center; justify-content: center; height: auto; padding: 8rem 24rem; border-radius: 9999rem; font-size: 18rem; font-weight: 400; line-height: 1.5; letter-spacing: -.01em; color: #333; background: #F5F5F7; white-space: nowrap; text-decoration: none; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar .tabMenu .tab.active {background: #1EC95B; color: #fff; font-weight: 600;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchInput {position: relative; display: flex; align-items: center; gap: 12rem; flex: 0 0 402rem; width: 402rem; max-width: 100%; padding: 8.5rem 16rem 8.5rem 8rem; border: 0; border-radius: 8rem; background: #fff; box-shadow: 0 0 0 1px #DADADA; box-sizing: border-box; transition: width .2s ease, flex-basis .2s ease;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchInput .schoolSearch {flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; padding: 6rem 8rem; border: 0; outline: none; background: transparent; font-size: 18rem; font-weight: 400; line-height: 1.5; letter-spacing: -.01em; color: #000; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchInput .schoolSearch::placeholder {color: #999;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchInput .btnSearch {flex: 0 0 32rem; width: 32rem; height: 32rem; margin: 0; padding: 0; border: 0; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/2610-icon-search.svg") no-repeat center / contain; cursor: pointer;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchInput .blind {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .list {margin: 0; padding: 0; list-style: none; box-shadow: inset 0 2px 0 #000;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .list li {margin: 0; padding: 24rem 40rem; font-size: 18rem; font-weight: 400; line-height: 1.5; letter-spacing: -.01em; color: #000; word-break: break-word; box-shadow: inset 0 -1px 0 #DADADA; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .noResult {display: flex; align-items: center; justify-content: center; min-height: 240rem; padding: 40rem 20rem; box-shadow: inset 0 2px 0 #000; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .noResult .noResult-text {margin: 0; font-size: 18rem; line-height: 1.6; letter-spacing: -.01em; color: #666; text-align: center;} /* fair-wrap — 상담 가능 학교 · 탭 */ #fair.fair-wrap .fair-schools {padding: 140rem 0; background: #fff;} #fair.fair-wrap .list-tab {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12rem; margin: 0 0 60rem; padding: 0 24rem; list-style: none;} #fair.fair-wrap .list-tab li {margin: 0; font-size: 16rem;} #fair.fair-wrap .list-tab a {display: inline-flex; align-items: center; justify-content: center; height: auto; padding: 8rem 24rem; border-radius: var(--rfull); font-size: 22rem; font-weight: 400; color: #666; background: #F0F0F2; border: none; transition: .18s; white-space: nowrap; cursor: pointer;} #fair.fair-wrap .list-tab a:hover:not(.as-tab-on) {background: #E6E6E9;} #fair.fair-wrap .list-tab a.as-tab-on {background: var(--green); color: #fff; font-weight: 700;} #fair.fair-wrap .fair-schools-body {padding-bottom: 44rem;} #fair.fair-wrap .school-count-text {margin: 0 0 24rem; font-size: 18rem; font-weight: 600; color: #333;} #fair.fair-wrap .tab-desc {margin: 36rem 0 0; font-size: 13rem; text-align: center; color: var(--t4); display: none;} #fair.fair-wrap .school-card-list.tab {display: grid; height: 0; transform: translateY(40rem); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;} #fair.fair-wrap .school-card-list.tab.on {height: auto; transform: translateY(0); overflow: visible; opacity: 1; pointer-events: auto;} /* fair-wrap — 학교 카드 */ #fair.fair-wrap .school-card-list {list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(3, 1fr); gap: 24rem;} #fair.fair-wrap .school-card {background: #fff; border-radius: var(--r16); overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow-1);} #fair.fair-wrap .school-card.reveal.armed.in:hover {box-shadow: var(--shadow-2); transform: translateY(-4rem);} #fair.fair-wrap .school-card > .card-inner {display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;} #fair.fair-wrap .card-thumb {position: relative; width: 100%; height: 160rem; overflow: hidden; background: #eef1f4;} #fair.fair-wrap .card-thumb .thumb-img {width: 100%; height: 100%; object-fit: cover; display: block;} #fair.fair-wrap .card-logo {position: absolute; top: 14rem; right: 14rem; width: 58rem; height: 58rem; background: #fff; border-radius: 12rem; box-shadow: 0 4rem 12rem rgba(0, 0, 0, .14); display: flex; align-items: center; justify-content: center; padding: 9rem;} #fair.fair-wrap .card-logo img {max-width: 100%; max-height: 100%; object-fit: contain; filter: none;} #fair.fair-wrap .card-body {padding: 24rem; display: flex; flex-direction: column; gap: 18rem; flex: 1;} #fair.fair-wrap .card-title-wrap {display: flex; flex-direction: column; gap: 16rem;} #fair.fair-wrap .card-title {font-size: 20rem; font-weight: 700; color: #000; line-height: 1.35; letter-spacing: -.02em;} #fair.fair-wrap .card-location {font-size: 15rem; color: #666; display: flex; align-items: center; gap: 6rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.5;} #fair.fair-wrap .card-loc-icon {display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 17rem; height: 17rem; line-height: 0;} #fair.fair-wrap .card-loc-icon svg {display: block; width: 17rem; height: 17rem;} #fair.fair-wrap .card-info {display: flex; gap: 0 16rem; background: var(--bg-band); border-radius: 8rem; overflow: hidden; padding: 14rem 20rem;} #fair.fair-wrap .card-info-item {flex: 1; text-align: center;} #fair.fair-wrap .card-info-item:last-child {border-right: none;} #fair.fair-wrap .info-label {font-size: 13rem; color: var(--t4); margin-bottom: 0;} #fair.fair-wrap .info-value {font-size: 14rem; font-weight: 600; color: #333; margin-top: 5rem;} #fair.fair-wrap .card-course {font-size: 14rem; color: var(--t4); font-weight: 500;} #fair.fair-wrap .card-price {display: flex; align-items: center; gap: 10rem; flex-wrap: wrap;} #fair.fair-wrap .secret-badge {flex: 0 0 auto; box-shadow: 0 0 0 1px var(--red); color: var(--red); font-size: 13rem; font-weight: 700; padding: 4rem 9rem; border-radius: 6rem; white-space: nowrap;} #fair.fair-wrap .price-text {font-size: 20rem; font-weight: 700; color: #000;} #fair.fair-wrap .card-price .term {font-size: 14rem; font-weight: 500; color: var(--t4);} /* fair-wrap — reveal */ #fair.fair-wrap .reveal {transition: opacity .7s var(--ease), transform .7s var(--ease);} #fair.fair-wrap .reveal.armed {opacity: 0; transform: translateY(28rem);} #fair.fair-wrap .reveal.armed.in {opacity: 1; transform: none;} #fair.fair-wrap .reveal.d1 {transition-delay: .08s;} #fair.fair-wrap .reveal.d2 {transition-delay: .16s;} #fair.fair-wrap .reveal.d3 {transition-delay: .24s;} #fair.fair-wrap .reveal.d4 {transition-delay: .32s;} /* participating-school — fair-view */ .participating-school .fair-view {padding: 100rem 0 140rem; background: #fff;} /* participating-school — 학교 상단 */ .participating-school .fair-section1-con {position: relative; display: flex; flex-direction: column;} .participating-school .fair-section1-con > .smallTxt {display: none;} .participating-school .fair-section1-top {display: flex; flex-direction: row; align-items: flex-start; gap: 40rem; margin: 0 0 40rem;} .participating-school .fair-section1-top .logo-box {order: 1; display: flex; align-items: center; justify-content: center; flex: 0 0 320rem; width: 320rem; height: 200rem; padding: 0; border-radius: 12rem; box-shadow: 0 0 0 1px #E4E8F1, 0 4rem 10rem #EBEFF4; background: #fff; box-sizing: border-box; overflow: hidden;} .participating-school .fair-section1-top .logo-box img {display: block; width: 100%; height: 100%; object-fit: contain;} .participating-school .fair-section1-top .text-box {order: 2; display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 12rem; width: auto; min-width: 0;} .participating-school .fair-section1-top .badge {margin: 0;} .participating-school .fair-section1-top .badge span {display: inline-flex; align-items: center; justify-content: center; height: 30rem; padding: 0 8rem; border: none; border-radius: 4rem; background: #FC1D01; color: #fff; font-size: 18rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; box-sizing: border-box;} .participating-school .fair-section1-top .title {margin: 0; font-size: 32rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: #000;} .participating-school .fair-section1-top .countries {display: flex; flex-wrap: wrap; align-items: center; gap: 8rem; margin: 0;} .participating-school .fair-section1-top .countries span {display: inline-flex; line-height: 0;} .participating-school .fair-section1-top .countries img {display: block; width: 40rem; height: 30rem; margin: 0; object-fit: cover;} /* participating-school — 본문 */ .participating-school .textBox {display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0;} .participating-school .textBox #schoolSummary {order: 1; margin: 0 0 40rem; font-size: 18rem; font-weight: 400; line-height: 1.5; letter-spacing: -.01em; color: #333;} .participating-school .textBox #schoolSummary img {display: block; width: 40rem; height: auto;} .participating-school .textBox #schoolInfo {order: 2; margin: 0;} .participating-school .textBox #schoolKeyfacts {order: 3; margin: 0 0 40rem;} .participating-school .textBox #schoolInfo:not(:empty) + #schoolKeyfacts {margin-top: 4rem;} .participating-school .textBox ul {width: 100%; padding: 0 0 0 27rem; list-style: disc outside; box-sizing: border-box;} .participating-school .textBox li {margin: 0; font-size: 18rem; font-weight: 400; line-height: 1.5; letter-spacing: -.01em; color: #333;} .participating-school .textBox li + li {margin-top: 4rem;} .participating-school .textBox ul li::marker {color: #333; font-size: 80%;} /* participating-school — E-Brochure */ .participating-school #schoolBrochureLink {order: 4; display: inline-flex; align-items: center; justify-content: center; gap: 4rem; height: 40rem; margin: 0; padding: 0 24rem; border-radius: 8rem; box-shadow: 0 0 0 1px #000; font-size: 16rem; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: #000; text-decoration: none; box-sizing: border-box; background: #fff;} .participating-school #schoolBrochureLink > span {position: relative; display: inline-flex; align-items: center; gap: 4rem;} .participating-school #schoolBrochureLink > span > span {position: relative; display: inline-block; margin: 0; width: 16rem; height: 16rem; flex: 0 0 16rem;} .participating-school #schoolBrochureLink > span > span::before, .participating-school #schoolBrochureLink > span > span::after {content: ''; position: absolute; right: 4rem; top: 50%; width: 8rem; height: 1.5rem; background: #000; transform-origin: 100% 50%;} .participating-school #schoolBrochureLink > span > span::before {transform: translateY(-50%) rotate(45deg);} .participating-school #schoolBrochureLink > span > span::after {transform: translateY(-50%) rotate(-45deg); width: 8rem;} /* participating-school — Video */ .participating-school .youtube-box-wrap {position: relative; display: flex; flex-direction: column; align-items: center; gap: 24rem; margin: 182rem 0 0; padding: 80rem 24rem; border-radius: 24rem; box-shadow: 0 0 0 1px #E4E8F1, 0 4rem 10rem #EBEFF4; background: #fff; box-sizing: border-box;} .participating-school .youtube-box-wrap::before {content: '\1F3AC Video'; position: absolute; left: 0; bottom: calc(100% + 40rem); width: 100%; font-size: 32rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: #000;} .participating-school .youtube-box {position: relative; width: min(718rem, 100%); margin: 0; aspect-ratio: 718 / 403; border-radius: 12rem; box-shadow: 0 4rem 10rem rgba(0, 0, 0, .12); overflow: hidden; background: #000; cursor: pointer;} .participating-school .youtube-box::after {content: ''; position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); width: 80rem; height: 80rem; background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/video-play-80.svg') no-repeat center / contain; pointer-events: none;} .participating-school .youtube-box .video-player__thumb, .participating-school .youtube-box .video-player__thumb img {position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover;} .participating-school .youtube-box iframe {display: block; width: 100%; height: 100%; border: 0;} .participating-school .youtube-box.play {cursor: default;} .participating-school .youtube-box.play::after {display: none;} .participating-school .youtube-box.play .video-player__thumb {display: none;} /* participating-school — Gallery */ .participating-school .img-box {position: relative; display: flex; gap: 24rem; margin: 100rem 0 0; padding-top: 82rem;} .participating-school .img-box::before {content: '📷 Gellary'; position: absolute; left: 0; top: 0; width: 100%; font-size: 32rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: #000;} .participating-school .img-box figure {flex: 1 1 0; width: auto; min-width: 0; height: 200rem; margin: 0; border-radius: 12rem; overflow: hidden; background: #F5F5F7;} .participating-school .img-box figure img {display: block; width: 100%; height: 100%; object-fit: cover;} .participating-school .img-box-popup {position: fixed; left: 0; top: 0; z-index: 100; width: 100vw; height: 100vh; background: rgba(0, 0, 0, .5);} .participating-school .img-box-popup > figure {position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 40%; height: 50%; margin: 0; background: #fff; transform: translate(-50%, -50%);} .participating-school .img-box-popup > figure > img {max-width: 90%; max-height: 70%; width: auto; height: auto; object-fit: contain;} /* ========== 반응형 ========== */ @media (prefers-reduced-motion: reduce) { /* fair-wrap — reveal */ #fair.fair-wrap .reveal.armed {opacity: 1; transform: none;} } @media screen and (max-width: 1024px) { /* fair-wrap — 학교 카드 */ #fair.fair-wrap .school-card-list {grid-template-columns: repeat(2, 1fr); gap: 20rem;} } @media screen and (max-width: 991px) { /* 페이지 공통 — 콘텐츠 폭 */ #fair.fair-wrap .fair-width, #fair.fair-wrap .consulting .max-width, #fair.fair-wrap .fair-allList .max-width, .participating-school .fair-hero .fair-width, .participating-school .fair-view .max-width {width: 100%; padding: 0 16rem;} /* fair-wrap — 히어로 */ #fair.fair-wrap .fair-hero.title-banner, .participating-school .fair-hero.title-banner {height: 122rem; padding: 40rem 0; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/2610-fair-banner-bg-mo.webp") center / cover no-repeat;} #fair.fair-wrap .fair-hero h1, .participating-school .fair-hero h1 {font-size: 32rem; letter-spacing: -0.64rem;} #fair.fair-wrap .fair-hero .textWrap p {font-size: 16rem; margin-bottom: 8rem;} #fair.fair-wrap .fair-hero .textWrap span {font-size: 16rem;} /* fair-wrap — 섹션 공통 */ #fair.fair-wrap .sec {padding: 60rem 0;} #fair.fair-wrap .fair-field {padding: 60rem 0;} #fair.fair-wrap .fair-schools {padding: 60rem 0;} #fair.fair-wrap .sec-head {margin-bottom: 32rem;} #fair.fair-wrap .sec-head h2 {font-size: 22rem;} #fair.fair-wrap .sec-head p {margin-top: 8rem; font-size: 16rem;} #fair.fair-wrap .mo-br {display: inline;} /* fair-wrap — consulting */ #fair.fair-wrap .consulting {padding: 60rem 0;} #fair.fair-wrap .consulting h2 {margin-bottom: 4rem; font-size: 22rem;} #fair.fair-wrap .consulting .sub-title {font-size: 16rem;} #fair.fair-wrap .consulting ul {grid-template-columns: repeat(2, 1fr); gap: 8rem; margin-top: 24rem;} #fair.fair-wrap .consulting ul li {aspect-ratio: 160 / 190;} #fair.fair-wrap .consulting ul li a {padding: 16rem;} #fair.fair-wrap .consulting ul li .txt1 {font-size: 18rem;} #fair.fair-wrap .consulting ul li .plus-icon {display: none;} /* fair-wrap — fair-allList */ #fair.fair-wrap .fair-allList {padding: 60rem 0 50rem;} #fair.fair-wrap .fair-allList .tabMenu {flex-wrap: nowrap; overflow-x: auto; gap: 6rem; margin: 0 0 20rem; width: calc(100% + 32rem); margin-left: -16rem; padding: 0 16rem; scrollbar-width: none;} #fair.fair-wrap .fair-allList .tabMenu::-webkit-scrollbar {display: none;} #fair.fair-wrap .fair-allList .tabMenu .tab {flex: 0 0 auto; height: 34rem; padding: 0 16rem; font-size: 13rem;} #fair.fair-wrap .fair-allList .tabMenu .tab.active {font-weight: 600;} #fair.fair-wrap .fair-allList .listWrap .sub-title {margin-bottom: 20rem; font-size: 13rem;} #fair.fair-wrap .fair-allList .listWrap .listSection + .listSection {margin-top: 60rem;} #fair.fair-wrap .fair-allList .listWrap .listSection h2 {margin-bottom: 24rem; font-size: 22rem;} /* fair-wrap — 추천 학교 */ #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list {grid-template-columns: repeat(2, 1fr); column-gap: 8rem; row-gap: 32rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .thumb {height: 100rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .logo {top: 11rem; right: 11rem; width: 41rem; height: 26rem; padding: 4rem; border-radius: 4rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .flagWrap {gap: 4rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li h3, #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .ellipsis_2 {font-size: 16rem; -webkit-line-clamp: initial;} #fair.fair-wrap .fair-allList .listWrap .listSection.recommend .list li .summary {font-size: 13rem; -webkit-line-clamp: 3;} /* fair-wrap — 인기 학교 */ #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list {grid-template-columns: 1fr; gap: 16rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li {min-height: 0;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li a {flex-direction: row; align-items: flex-start; gap: 16rem; min-height: 0; padding: 16rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li .logo {width: 48rem; height: 48rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li .info {justify-content: flex-start; gap: 8rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li h3, #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li .ellipsis_2 {font-size: 16rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.popular .list li .flagWrap {gap: 4rem; margin-top: 0;} /* fair-wrap — 상담 가능 학교 목록 */ #fair.fair-wrap .fair-allList .listWrap .listSection.consultation h2 {margin-bottom: 8rem; font-size: 20rem; line-height: 1.5; letter-spacing: -.01em;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar {padding: 16rem 0; margin-bottom: 40rem; box-shadow: 0 1px 0 0 #E4E8F1;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar.is-stuck {box-shadow: 0 4rem 10rem 0 rgba(0, 0, 0, .12), 0 1px 0 0 #E4E8F1;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar.is-stuck .searchInput {flex-basis: auto; width: 100%;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar-inner {display: block; width: 100%; max-width: none; padding: 0 16rem; box-sizing: border-box;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar .tabMenu {flex-wrap: nowrap; overflow-x: auto; gap: 6rem; width: calc(100% + 32rem); margin-left: -16rem; padding: 0 16rem; scrollbar-width: none;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar .tabMenu::-webkit-scrollbar {display: none;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar .tabMenu .tab {flex: 0 0 auto; height: auto; padding: 7rem 16rem; font-size: 13rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchBar .tabMenu .tab.active {font-weight: 700;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchInput {flex: none; width: 100%; margin-top: 24rem; padding: 12rem 16rem; gap: 12rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchInput .schoolSearch {padding: 0; font-size: 14rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchInput .schoolSearch::placeholder {color: #666;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .searchInput .btnSearch {flex-basis: 24rem; width: 24rem; height: 24rem; background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmtw.com/lfair/participating-school/2610-icon-search-24.svg");} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .list li {padding: 16rem; font-size: 15rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .noResult {min-height: 160rem; padding: 32rem 16rem;} #fair.fair-wrap .fair-allList .listWrap .listSection.consultation .noResult .noResult-text {font-size: 15rem;} /* fair-wrap — 상담분야 (program-list) */ #fair.fair-wrap .program-list-wrap {grid-template-columns: repeat(2, 1fr); gap: 10rem;} #fair.fair-wrap .program-list-wrap .box {aspect-ratio: 156 / 190;} #fair.fair-wrap .program-list-wrap .box .textWrap {padding: 16rem;} #fair.fair-wrap .program-list-wrap .box .textWrap span {font-size: 14rem;} #fair.fair-wrap .program-list-wrap .box .textWrap p {font-size: 16rem;} /* fair-wrap — 상담 가능 학교 · 탭 */ #fair.fair-wrap .list-tab {justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 6rem; margin-bottom: 32rem; padding: 0 20rem; scrollbar-width: none;} #fair.fair-wrap .list-tab::-webkit-scrollbar {display: none;} #fair.fair-wrap .list-tab li {flex: 0 0 auto;} #fair.fair-wrap .list-tab li:last-child {margin-right: 20rem;} #fair.fair-wrap .list-tab a {height: 34rem; padding: 7rem 16rem; font-size: 13rem; line-height: 1;} #fair.fair-wrap .school-count-text {font-size: 16rem; margin-bottom: 16rem; margin-top: 40rem;} #fair.fair-wrap .tab-desc {margin-top: 24rem;} /* fair-wrap — 학교 카드 */ #fair.fair-wrap .card-thumb {height: auto; padding-top: 49%;} #fair.fair-wrap .card-thumb .thumb-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} #fair.fair-wrap .school-card-list {grid-template-columns: 1fr; gap: 16rem;} #fair.fair-wrap .card-title-wrap {gap: 12rem;} #fair.fair-wrap .card-body {padding: 16rem; gap: 12rem;} #fair.fair-wrap .card-title {font-size: 18rem;} #fair.fair-wrap .card-location {font-size: 14rem;} #fair.fair-wrap .card-info {display: none;} #fair.fair-wrap .card-course {font-size: 13rem;} #fair.fair-wrap .secret-badge {font-size: 12rem;} #fair.fair-wrap .price-text {font-size: 18rem;} /* participating-school — fair-view */ .participating-school .fair-view {padding: 50rem 0 60rem;} /* participating-school — 국가 탭 */ .participating-school .fair-view .tabMenu {flex-wrap: nowrap; overflow-x: auto; gap: 6rem; margin: 0 0 24rem; width: calc(100% + 32rem); margin-left: -16rem; padding: 0 16rem; scrollbar-width: none;} .participating-school .fair-view .tabMenu::-webkit-scrollbar {display: none;} .participating-school .fair-view .tabMenu .tab {flex: 0 0 auto; height: 34rem; padding: 0 16rem; font-size: 13rem;} .participating-school .fair-view .tabMenu .tab.active {font-weight: 600;} /* participating-school — 학교 상단 */ .participating-school .fair-section1-top {flex-direction: column; align-items: center; gap: 40rem; margin-bottom: 24rem;} .participating-school .fair-section1-top .logo-box {flex: 0 0 auto; width: 192rem; height: 120rem;} .participating-school .fair-section1-top .text-box {width: 100%;} .participating-school .fair-section1-top .badge span {height: 26rem; padding: 0 6rem; font-size: 14rem;} .participating-school .fair-section1-top .title {font-size: 20rem; line-height: 1.5; letter-spacing: -.01em;} .participating-school .fair-section1-top .countries img {width: 27rem; height: 20rem;} /* participating-school — 본문 */ .participating-school .textBox #schoolSummary {margin-bottom: 24rem; font-size: 15rem;} .participating-school .textBox #schoolKeyfacts {margin-bottom: 24rem;} .participating-school .textBox ul {padding-left: 22.5rem;} .participating-school .textBox li {font-size: 15rem;} /* participating-school — E-Brochure */ .participating-school #schoolBrochureLink {height: 26rem; padding: 0 12rem; border-radius: 4rem; font-size: 13rem; font-weight: 400; gap: 2rem;} /* participating-school — Video */ .participating-school .youtube-box-wrap {margin-top: 103rem; padding: 0; border-radius: 0; box-shadow: none; background: transparent; align-items: stretch; gap: 24rem;} .participating-school .youtube-box-wrap::before {bottom: calc(100% + 24rem); font-size: 22rem;} .participating-school .youtube-box {width: 100%; aspect-ratio: 328 / 184;} .participating-school .youtube-box::after {width: 40rem; height: 40rem; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/video-play-40.svg');} /* participating-school — Gallery */ .participating-school .img-box {flex-direction: column; gap: 24rem; margin-top: 50rem; padding-top: 53rem;} .participating-school .img-box::before {font-size: 22rem;} .participating-school .img-box figure {flex: none; width: 100%; height: 184rem;} .participating-school .img-box-popup > figure {width: 90%; height: auto; max-height: 80%; padding: 16rem; box-sizing: border-box;} }