@charset "utf-8"; /* * File : rwd-get-tested.css * Author : STUDIO-JT * * NOTE : * 여정 라인(.get-tested__line)은 고정 좌표 SVG라 스텝과 개별 보정하면 어긋난다. * 1480/1200 밴드는 --gt-scale(+--gt-offset)로 라인·스텝 앵커/top/컨테이너 높이를 일괄 비례 축소. * 860/540 밴드는 라인 숨김 + 스텝 세로 스택(번호 원형이 시각 앵커). * * SUMMARY : * 1480px (GLOBAL, VISUAL, INTRO, LINE, STEP, CTA) * 1200px (GLOBAL, VISUAL, INTRO, STEP, CTA) * 861~1200px (INTRO) * 860px (GLOBAL, VISUAL, INTRO, LINE, STEP, CTA) * 540px (GLOBAL, VISUAL, INTRO, STEP, CTA) */ /* **************************************** * * 1480px * **************************************** */ @media (max-width: 1480px){ /* GLOBAL */ .get-tested { --gt-scale: calc(1320 / 1440); --gt-offset: 0rem; --font-size-secondary-01: 60rem; --font-size-secondary-03: 46rem; } .get-tested__container { padding-bottom: 183rem; } /* VISUAL */ .get-tested__visual-content { margin-left: 20rem; } /* 좌 60 = wrap 패딩 40 + 20 */ /* INTRO */ .get-tested__intro { margin-top: 140rem; } /* LINE */ .get-tested__line { width: calc(491rem * var(--gt-scale)); top: calc(560rem * var(--gt-scale) + var(--gt-offset)); margin-left: calc(-574rem * var(--gt-scale)); } /* STEP */ .get-tested__step { width: calc(800rem * var(--gt-scale)); } .get-tested__step--01 { margin: 130rem 0 0 calc(720rem - 598rem * var(--gt-scale)); } .get-tested__step--02 { margin: 175rem 0 0 calc(720rem - 110rem * var(--gt-scale)); } .get-tested__step--03 { margin: 127rem 0 0 calc(720rem - 311rem * var(--gt-scale)); } .get-tested__step--04 { margin: 153rem 0 0 calc(720rem - 552rem * var(--gt-scale)); } .get-tested__step--05 { margin: 149rem 0 0 calc(720rem - 189rem * var(--gt-scale)); } .get-tested__step-image { height: calc(450rem * var(--gt-scale)); } .get-tested__step-info { width: calc(600rem * var(--gt-scale)); } /* CTA */ .get-tested__actions { margin-top: 123rem; } } /* **************************************** * * 1200px * **************************************** */ @media (max-width: 1200px){ /* GLOBAL */ .get-tested { --gt-scale: calc(1120 / 1440); --gt-offset: 80rem; --font-size-secondary-01: 52rem; --font-size-secondary-03: 40rem; --font-size-primary-01: 28rem; } .get-tested__container { padding-bottom: 156rem; } /* VISUAL */ .get-tested__visual-content { margin-left: 0; } /* 좌 40 = wrap 패딩 40 */ /* INTRO */ .get-tested__intro { width: 820rem; margin-top: 110rem; } /* STEP */ .get-tested__step--01 { margin-top: 177rem; } .get-tested__step--02 { margin-top: 126rem; } .get-tested__step--03 { margin-top: 81rem; } .get-tested__step--04 { margin-top: 106rem; } .get-tested__step--05 { margin-top: 102rem; } .get-tested__step-info { width: 520rem; } /* 설명 줄 수를 줄여 여정 라인이 지나는 구간을 침범하지 않게 한다 */ /* CTA */ .get-tested__actions { margin-top: 72rem; } } /* **************************************** * * 861~1200px * **************************************** */ /* 이 밴드는 글자와 소개 상자가 폭에 비례해 줄바꿈이 밴드 전체에서 같다. 영문 소개의
앞 첫 문장이 한 줄을 조금 넘어 마지막 한 단어만 다음 줄에 남으므로 이 밴드에서만 pretty 로 나눈다(Safari 의 pretty 는 한 줄에 들어가는 밴드에서도 줄을 다시 나눠 범위를 좁힌다) */ @media (min-width: 861px) and (max-width: 1200px){ /* INTRO */ .get-tested__intro-desc:lang(en) { text-wrap: pretty; } } /* **************************************** * * 860px * **************************************** */ @media (max-width: 860px){ /* GLOBAL */ .get-tested { --font-size-secondary-01: 46rem; --font-size-secondary-03: 36rem; --font-size-primary-01: 26rem; --font-size-primary-04: 17rem; } .get-tested__container { display: block; padding: 96rem 24rem 120rem; isolation: isolate; } /* grid 해제: justify-items:start 가 width:auto 스텝을 쪼그라뜨린다. isolation 은 패턴 z-index:-1 가둠 */ /* PATTERN : 모바일 컨투어 2개, 상단-좌측 / 하단-우측. 좌표 디코딩은 rwd-about-exam 주석 참조 */ .get-tested__pattern { display: block; position: absolute; z-index: -1; background: url(../images/sub/common/pattern-01.svg) no-repeat; background-size: 100% 100%; pointer-events: none; } .get-tested__pattern--01 { width: 726rem; height: 1178rem; top: 143rem; left: -460rem; } .get-tested__pattern--02 { width: 947rem; height: 1332rem; top: 1592rem; left: 119rem; transform: scaleX(-1); } /* VISUAL */ .get-tested__visual-content { gap: 20rem; width: auto; } /* 좌우 24 = wrap 패딩 */ .get-tested__visual-title br, .get-tested__visual-desc br { display: none; } .get-tested__visual-title .jt-reveal__mask { display: inline; } .get-tested__visual-title .jt-reveal__mask::after { content: ' '; } .get-tested__visual-title .jt-reveal__line { display: inline; } /* INTRO */ .get-tested__intro { width: auto; max-width: 640rem; margin: 0 auto 80rem; } .get-tested__intro-desc br { display: none; } /* LINE */ .get-tested__line { display: none; } /* STEP */ .get-tested__step { position: static; gap: 24rem; width: auto; margin: 0 0 72rem; } .get-tested__step-image { height: 405rem; } .get-tested__step-info { width: auto; } .get-tested__step-head { gap: 20rem; } .get-tested__step-num { width: 44rem; height: 44rem; } .get-tested__step-desc { padding: 0 0 0 64rem; } /* CTA */ .get-tested__actions { margin-top: 24rem; text-align: center; } } /* **************************************** * * 540px * **************************************** */ @media (max-width: 540px){ /* GLOBAL */ .get-tested { --font-size-secondary-01: 35rem; --font-size-secondary-03: 26rem; --font-size-primary-01: 24rem; --font-size-primary-03: 19rem; --font-size-primary-04: 17rem; } /* T1 35 / 본문 T4 19 / 리드 T5·T6 17 */ .get-tested__container { padding: 72rem 16rem 96rem; } /* 스텝 이미지 px-16 기준 */ /* VISUAL */ .get-tested__visual-content { gap: 16rem; margin: 0 8rem; } /* 좌우 24 = wrap 패딩 16 + 8 */ /* INTRO : 좌우 여백 30 = 거터 16 + 14 */ .get-tested__intro { gap: 30rem; padding: 0 14rem; margin-bottom: 80rem; } /* STEP */ .get-tested__step { gap: 24rem; margin-bottom: 80rem; } .get-tested__step-image { height: 240rem; border-radius: 16rem; } .get-tested__step-info { gap: 14rem; } .get-tested__step-head { gap: 16rem; } .get-tested__step-num { width: 36rem; height: 36rem; margin-top: -3.6rem; } /* 첫줄 보정 = (줄높이 28.8 - 36)/2 */ .get-tested__step-desc { padding: 0 40rem 0 52rem; } /* CTA */ .get-tested__actions { margin-top: 40rem; } .get-tested__actions .jt-btn__gradient { min-height: 60rem; } }