@charset "UTF-8"; /* * File Name : /ui_resource/css/responsive/account_modal.css * Description : 로그인 모달 팝업 전용 CSS * - account.css를 대체 (is_modal=1 일 때 account.css 미로드) * Page : /popup/account_form.php?is_modal=1 * Note : - account.css 기준으로 작업, .section-banner 스타일 제외 * - @media viewport 쿼리 미사용 (iframe은 자신의 너비를 viewport로 인식하므로 오발동) * - 반응형은 JS(window.parent.innerWidth)로 에 클래스 부여 후 셀렉터로 분기 * .vp-pc (>1400px) / .vp-pc-sm (1025~1400px) / .vp-tablet (481~1024px) / .vp-mobile (~480px) * * vw 계산 기준: * - 이 파일의 vw = iframe 자체 뷰포트(≈760px) 기준 * → px ÷ 7.6 = vw (예: 40px → 40 ÷ 7.6 = 5.263vw) * - layerpopup.css 등 외부 파일은 브라우저 뷰포트(≈1660px) 기준 * → px ÷ 16.6 = vw (예: 760px → 760 ÷ 16.6 = 45.783vw) */ /* * [PC] > 1400px && 공통 * - window.parent.innerWidth 기준으로 JS에서 에 .vp-pc 클래스 부여 * - iframe 내부 CSS 미디어쿼리는 iframe 자체 너비를 viewport로 인식하므로 미디어쿼리 대신 클래스 방식 사용 */ /* common */ html, body {height: 100%;} .vp-pc body, .vp-pc-sm body {overflow: hidden;} /* contents : common */ .page-account {display: flex; align-items: center; background-size: cover; box-sizing: border-box; padding-top: 0; height: 100%;} .page-account .layout-inner {display: flex; justify-content: center; align-items: center; width: 100% !important; height: 100%;} .page-account .account-innerbox {overflow: hidden; display: flex; width: 100%; height: 100%;} .page-account .account-innerbox > [class^=section-] {overflow: hidden; width: 50%;} /* section-banner */ .section-banner {position: relative; background: url(../../images/popup/login_modal/bg_banner.jpg) center center no-repeat; background-size: cover;} .section-banner img {width: 408px;} /* section-form-input */ .section-form-input {overflow-y: auto; padding: 35px 45px 10px; background: #fff; box-sizing: border-box;} .section-form-input > article[class*=-area] {display: none;} .section-form-input.step-login .login-area {display: block;} .section-form-input.step-signup .signup-area {display: block;} .section-form-input.step-findPwRequest .findPwRequest-area {display: block;} .section-form-input.step-findPwVerifyCode .findPwVerifyCode-area {display: block;} .section-form-input.step-findPwResetConfirm .findPwResetConfirm-area {display: block;} .section-form-input [class*=btn][class*=type-text] {color: #1398FF !important; font-family: var(--ft-family_Poppins-500) !important; font-size: 12px !important;} .section-form-input [class*=btn][class*=type-text].underline {text-decoration: underline;} .section-form-input [class*=btn].btn-back {display: flex; align-items: center; margin-bottom: 15px; font-family: var(--ft-family_Poppins-700) !important; font-size: 16px !important;} .section-form-input [class*=btn].btn-back::before {content: ""; display: inline-block; width: 7px; height: 11px; margin-right: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 14 24' fill='none'%3E%3Cpath d='M11.2258 23.5251L0.354839 12.8865C0.225806 12.7599 0.134624 12.6227 0.0812903 12.4749C0.0270968 12.3272 0 12.1689 0 12C0 11.8311 0.0270968 11.6728 0.0812903 11.5251C0.134624 11.3773 0.225806 11.2401 0.354839 11.1135L11.2258 0.443272C11.5269 0.147757 11.9032 0 12.3548 0C12.8065 0 13.1935 0.158311 13.5161 0.474934C13.8387 0.791557 14 1.16095 14 1.58311C14 2.00528 13.8387 2.37467 13.5161 2.69129L4.03226 12L13.5161 21.3087C13.8172 21.6042 13.9677 21.9681 13.9677 22.4004C13.9677 22.8336 13.8065 23.2084 13.4839 23.5251C13.1613 23.8417 12.7849 24 12.3548 24C11.9247 24 11.5484 23.8417 11.2258 23.5251Z' fill='%231398FF'/%3E%3C/svg%3E"); background-size: cover;} .section-form-input .section-title, .section-form-input .section-title * {color: #333; font-family: var(--ft-family_Poppins-700); font-size: 36px; letter-spacing: -.5px;} .section-form-input .section-title {margin-bottom: 8px; line-height: 1; text-align: center;} .section-form-input .section-title .tit-sub {margin-top: 10px; color: #999; font-family: var(--ft-family_Poppins-400); font-size: 12px; line-height: 1;} .section-form-input .section-subtitle {margin-bottom: 15px; color: #333; font-family: var(--ft-family_Poppins-500); font-size: 16px; text-align: center;} .login-area .section-title {margin-bottom: 8px;} .section-form-input .login-btns {display: flex; flex-direction: column;} .section-form-input .login-btns [class*=btn-login] {display: flex; justify-content: center; align-items: center; height: 40px; margin-bottom: 12px; border-radius: 3px;} .section-form-input .login-btns [class*=btn-login]:last-child {margin-bottom: 0;} .section-form-input .login-btns [class*=btn-login] .icon {width: 20px; height: 20px;} .section-form-input .login-btns [class*=btn-login] .icon svg {width: 100%; height: 100%;} .section-form-input .login-btns [class*=btn-login] .txt {margin-left: 6px; color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 16px;} .section-form-input .login-btns .btn-login-fb {background: #3578E5;} .section-form-input .login-btns .btn-login-google {background: #eee;} .section-form-input .login-btns .btn-login-google .txt {color: #333;} .section-form-input .login-btns .btn-login-apple {background: #000;} .section-form-input .login-btns .btn-login-apple .icon {width: 16px;} .section-form-input .section-line {display: flex; justify-content: center; position: relative; margin: 20px 0;} .section-form-input .section-line .txt {color: #bbb; font-family: var(--ft-family_Poppins-600); font-size: 12px;} .section-form-input .section-line .txt::before, .section-form-input .section-line .txt::after {content: ""; display: inline-block; position: absolute; top: 50%; width: 128px; height: 1px; background: #bbb;} .section-form-input .section-line .txt::before {left: 0;} .section-form-input .section-line .txt::after {right: 0;} .section-form-input .form-area .btn-submit {display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; background-color: #1398FF; border-radius: 3px; color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 18px} .section-form-input .form-area [class*=msg-error] {display: none; margin-top: 5px; color: #FF4040 !important; font-family: var(--ft-family_Poppins-400) !important; font-size: 12px !important; transition: all 0.1s;} .section-form-input .form-area .msg-error-allchk {margin-top: 8px; text-align: center;} .section-form-input .form-area .noti-txt {color: #999 !important;} .section-form-input .form-area .field-item {margin-bottom: 12px;} .section-form-input .form-area .field-item .lb-field {display: block; margin-bottom: 10px; color: #333; font-family: var(--ft-family_Poppins-600); font-size: 12px; line-height: 1;} .section-form-input .form-area .field-item .lb-field .name {position: relative;} .section-form-input .form-area .field-item .inp-field-box {display: block; position: relative; width: 100%; height: 40px;} .section-form-input .form-area .field-item .inp-field {width: 100%; height: 100%; padding: 0 46px 0 12px; box-sizing: border-box; border: 1px solid #DBD4EC; border-radius: 3px; color: #333; font-family: var(--ft-family_Poppins-400); font-size: 14px;} .section-form-input .form-area .field-item .btn-inp-clear, .section-form-input .form-area .field-item.check-error .inp-field-box::after, .section-form-input .form-area .field-item.check-correct .inp-field-box::after {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background-size: contain; background-repeat: no-repeat;} .section-form-input .form-area .field-item .btn-inp-clear {display: none; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cg clip-path='url(%23clip0_3109_2164)'%3E%3Cpath d='M15 0C6.705 0 0 6.705 0 15C0 23.295 6.705 30 15 30C23.295 30 30 23.295 30 15C30 6.705 23.295 0 15 0ZM22.5 20.385L20.385 22.5L15 17.115L9.615 22.5L7.5 20.385L12.885 15L7.5 9.615L9.615 7.5L15 12.885L20.385 7.5L22.5 9.615L17.115 15L22.5 20.385Z' fill='%23939395'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3109_2164'%3E%3Crect width='30' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-repeat: no-repeat;} .section-form-input .form-area .field-item .inp-field::placeholder {color: #999; font-size: 14px;} .section-form-input .form-area .field-item .inp-field:focus {border-color: #1398FF;} .section-form-input .form-area .field-item .inp-field:focus {outline: 0;} .section-form-input .form-area .field-item.required-value .lb-field .name::after {content: ""; display: inline-block; position: absolute; right: -10px; width: 6px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5' viewBox='0 0 6 5' fill='none'%3E%3Cpath d='M4.45308 0.757979L5.05469 1.82181L3.22314 2.5L5.05469 3.17819L4.43971 4.26862L2.91565 3.07181L3.1964 5H1.96645L2.22046 3.07181L0.696399 4.29521L0.0546875 3.16489L1.87287 2.4867L0.0546875 1.83511L0.669661 0.744681L2.23383 1.94149L1.96645 0H3.20977L2.91565 1.94149L4.45308 0.757979Z' fill='%23FF4040'/%3E%3C/svg%3E"); background-repeat: no-repeat;} .section-form-input .form-area .field-item.check-error .inp-field-box::after, .section-form-input .form-area .field-item.check-correct .inp-field-box::after {content: ""; display: inline-block;} .section-form-input .form-area .field-item.check-error .inp-field-box::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cg clip-path='url(%23clip0_3104_2206)'%3E%3Cpath d='M15 0C6.72 0 0 6.72 0 15C0 23.28 6.72 30 15 30C23.28 30 30 23.28 30 15C30 6.72 23.28 0 15 0ZM16.5 23.25H13.5V20.25H16.5V23.25ZM16.5 18H13.5V6.75H16.5V18Z' fill='%23FF4040'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3104_2206'%3E%3Crect width='30' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");} .section-form-input .form-area .field-item.check-error .inp-field {border-color: #FF4040;} .section-form-input .form-area .field-item.check-error .msg-error, .section-form-input .form-area .field-item.only-msg-on .msg-error {display: block; align-self: flex-start;} /* .section-form-input .form-area .field-item.check-correct .inp-field {border: 1px solid #DBD4EC;} */ .section-form-input .form-area .field-item.check-correct .inp-field-box::after {background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0C6.72 0 0 6.72 0 15C0 23.28 6.72 30 15 30C23.28 30 30 23.28 30 15C30 6.72 23.28 0 15 0ZM12 22.5L4.5 15L6.615 12.885L12 18.255L21.885 8.37L24 10.5L12 22.5Z' fill='%2331DF21'/%3E%3C/svg%3E%0A");} .section-form-input .form-area .field-item.clear-on .btn-inp-clear {display: block;} .section-form-input .form-area .txt-wrap {display: flex; justify-content: center; align-items: center; margin-bottom: 20px;} .section-form-input .form-area .txt-wrap * {color: #333; font-family: var(--ft-family_Poppins-500); font-size: 12px;} .section-form-input .form-area .txt-wrap > * {margin-right: 10px; line-height: 1;} .section-form-input .form-area .txt-wrap > *:last-child {margin-right: 0;} .section-form-input .form-area .txt-wrap.al-left {justify-content: flex-start;} .section-form-input .form-area .txt-wrap.al-side {justify-content: space-between;} .section-form-input .form-area .txt-wrap.bottom-txt-area {margin-top: 12px; margin-bottom: 0;} .section-form-input .form-area .txt-wrap.bottom-txt-area * {font-size: 12px !important;} .section-form-input .form-area .checkbox-area {display: flex; width: 100%; margin-right: 0 !important;} .section-form-input .form-area .checkbox-area input[type=checkbox] + label {cursor: pointer; line-height: 14px;} .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox {display: inline-block; position: relative; width: 14px; height: 14px; margin-right: 6px; border: 1px solid #DBD4EC; border-radius: 2px; box-sizing: border-box; transition: all .1s;} .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox::before {content: ""; display: inline-block; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border: 1px solid transparent; box-sizing: border-box; transition: all .1s;} .section-form-input .form-area .checkbox-area input[type=checkbox]:checked + label .ico-checkbox, .section-form-input .form-area .checkbox-area input[type=checkbox]:checked + label .ico-checkbox::before {border-color: #3EB5FE;} .section-form-input .form-area .checkbox-area input[type=checkbox]:checked + label .ico-checkbox {background: #3EB5FE;} .section-form-input .form-area .checkbox-area input[type=checkbox]:checked + label .ico-checkbox::after {content: ""; display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 5px; background-image: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6.77775L5.1746 9.88886L12 2.11108' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: cover;} .section-form-input .form-area.has-error .msg-error-allchk {display: block;} /* * [PC 소형] 1025px ~ 1400px * - window.parent.innerWidth 기준으로 JS에서 에 .vp-pc-sm 클래스 부여 * - iframe 내부 CSS 미디어쿼리는 iframe 자체 너비를 viewport로 인식하므로 미디어쿼리 대신 클래스 방식 사용 */ /* section-banner */ html.vp-pc-sm .section-banner img {width: 53.684vw;} /* section-form-input */ html.vp-pc-sm .section-form-input {padding: 4.605vw 5.921vw 1.316vw;} html.vp-pc-sm .section-form-input [class*=btn][class*=type-text] {font-size: 1.579vw !important;} html.vp-pc-sm .section-form-input [class*=btn].btn-back {margin-bottom: 1.974vw; font-size: 2.105vw !important;} html.vp-pc-sm .section-form-input [class*=btn].btn-back::before {width: 0.921vw; height: 1.447vw; margin-right: 1.316vw;} html.vp-pc-sm .section-form-input .section-title, html.vp-pc-sm .section-form-input .section-title * {font-size: 4.737vw; letter-spacing: -0.066vw;} html.vp-pc-sm .section-form-input .section-title {margin-bottom: 2.632vw;} html.vp-pc-sm .section-form-input .section-title .tit-sub {margin-top: 1.316vw; font-size: 1.579vw;} html.vp-pc-sm .section-form-input .section-subtitle {margin-bottom: 1.974vw; font-size: 2.105vw;} html.vp-pc-sm .section-form-input .login-area .section-title {margin-bottom: 1.053vw;} html.vp-pc-sm .section-form-input .login-btns [class*=btn-login] {height: 5.263vw; margin-bottom: 1.579vw; border-radius: 0.395vw;} html.vp-pc-sm .section-form-input .login-btns [class*=btn-login] .icon {width: 2.632vw; height: 2.632vw;} html.vp-pc-sm .section-form-input .login-btns [class*=btn-login] .txt {margin-left: 0.789vw; font-size: 2.105vw;} html.vp-pc-sm .section-form-input .login-btns .btn-login-apple .icon {width: 2.105vw;} html.vp-pc-sm .section-form-input .section-line {margin: 2.632vw 0;} html.vp-pc-sm .section-form-input .section-line .txt {font-size: 1.579vw;} html.vp-pc-sm .section-form-input .section-line .txt::before, html.vp-pc-sm .section-form-input .section-line .txt::after {width: 16.842vw; height: 0.132vw;} html.vp-pc-sm .section-form-input .form-area .btn-submit {height: 5.263vw; border-radius: 0.395vw; font-size: 2.368vw} html.vp-pc-sm .section-form-input .form-area [class*=msg-error] {margin-top: 0.658vw; font-size: 1.579vw !important;} html.vp-pc-sm .section-form-input .form-area .msg-error-allchk {margin-top: 1.053vw;} html.vp-pc-sm .section-form-input .form-area .field-item {margin-bottom: 1.579vw;} html.vp-pc-sm .section-form-input .form-area .field-item .lb-field {margin-bottom: 1.316vw; font-size: 1.579vw;} html.vp-pc-sm .section-form-input .form-area .field-item .inp-field-box {height: 5.263vw;} html.vp-pc-sm .section-form-input .form-area .field-item .inp-field {padding: 0 6.053vw 0 1.579vw; border-radius: 0.395vw; font-size: 1.842vw;} html.vp-pc-sm .section-form-input .form-area .field-item .btn-inp-clear, html.vp-pc-sm .section-form-input .form-area .field-item.check-error .inp-field-box::after, html.vp-pc-sm .section-form-input .form-area .field-item.check-correct .inp-field-box::after {right: 1.579vw; width: 2.895vw; height: 2.895vw;} html.vp-pc-sm .section-form-input .form-area .field-item .inp-field::placeholder {font-size: 1.842vw;} html.vp-pc-sm .section-form-input .form-area .field-item.required-value .lb-field .name::after {right: -1.316vw; width: 0.789vw; height: 0.789vw;} html.vp-pc-sm .section-form-input .form-area .txt-wrap {margin-bottom: 2.632vw;} html.vp-pc-sm .section-form-input .form-area .txt-wrap * {font-size: 1.579vw;} html.vp-pc-sm .section-form-input .form-area .txt-wrap > * {margin-right: 1.316vw;} html.vp-pc-sm .section-form-input .form-area .txt-wrap.bottom-txt-area {margin-top: 1.579vw;} html.vp-pc-sm .section-form-input .form-area .txt-wrap.bottom-txt-area * {font-size: 1.579vw !important;} html.vp-pc-sm .section-form-input .form-area .checkbox-area input[type=checkbox] + label {line-height: 1.842vw;} html.vp-pc-sm .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox {position: relative; width: 1.842vw; height: 1.842vw; margin-right: 0.789vw; border: 0.132vw solid #DBD4EC; border-radius: 0.263vw;} html.vp-pc-sm .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox::before {width: 1.842vw; height: 1.842vw; border: 0.132vw solid transparent;} html.vp-pc-sm .section-form-input .form-area .checkbox-area input[type=checkbox]:checked + label .ico-checkbox::after {width: 0.921vw; height: 0.658vw;} /* * [태블릿 / 낮은해상도 PC] 481px ~ 1024px * - window.parent.innerWidth 기준으로 JS에서 에 .vp-tablet 클래스 부여 * - iframe 내부 CSS 미디어쿼리는 iframe 자체 너비를 viewport로 인식하므로 미디어쿼리 대신 클래스 방식 사용 * - 계산: 디자인px ÷ 2 ÷ 7.68 = vw (태블릿 브라우저 뷰포트 ≈768px, iframe ≈100%) * - 좌측배너 표시 유지 (2컬럼 레이아웃 동일) */ /* section-banner (좌측 배너 표시 유지 - pc-sm과 동일한 2컬럼 레이아웃) */ html.vp-tablet .section-banner img {position: absolute; bottom: 0; width: 50.911vw;} /* section-form-input */ html.vp-tablet .section-form-input {padding: 4.557vw 5.859vw 1.302vw;} html.vp-tablet .section-form-input [class*=btn][class*=type-text] {font-size: 1.563vw !important;} html.vp-tablet .section-form-input [class*=btn].btn-back {margin-bottom: 1.953vw; font-size: 2.083vw !important;} html.vp-tablet .section-form-input [class*=btn].btn-back::before {width: 0.911vw; height: 1.432vw; margin-right: 1.302vw;} html.vp-tablet .section-form-input .section-title, html.vp-tablet .section-form-input .section-title * {font-size: 4.688vw; letter-spacing: -0.065vw;} html.vp-tablet .section-form-input .section-title {margin-bottom: 2.604vw;} html.vp-tablet .section-form-input .section-title .tit-sub {margin-top: 1.302vw; font-size: 1.563vw;} html.vp-tablet .section-form-input .section-subtitle {margin-bottom: 1.953vw; font-size: 2.083vw;} html.vp-tablet .section-form-input .login-area .section-title {margin-bottom: 1.042vw;} html.vp-tablet .section-form-input .login-btns [class*=btn-login] {height: 5.208vw; margin-bottom: 1.563vw; border-radius: 0.391vw;} html.vp-tablet .section-form-input .login-btns [class*=btn-login] .icon {width: 2.604vw; height: 2.604vw;} html.vp-tablet .section-form-input .login-btns [class*=btn-login] .txt {margin-left: 0.781vw; font-size: 2.083vw;} html.vp-tablet .section-form-input .login-btns .btn-login-apple .icon {width: 2.083vw;} html.vp-tablet .section-form-input .section-line {margin: 2.604vw 0;} html.vp-tablet .section-form-input .section-line .txt {font-size: 1.563vw;} html.vp-tablet .section-form-input .section-line .txt::before, html.vp-tablet .section-form-input .section-line .txt::after {width: 16.667vw; height: 0.130vw;} html.vp-tablet .section-form-input .form-area .btn-submit {height: 5.208vw; border-radius: 0.391vw; font-size: 2.344vw} html.vp-tablet .section-form-input .form-area [class*=msg-error] {margin-top: 0.651vw; font-size: 1.563vw !important;} html.vp-tablet .section-form-input .form-area .msg-error-allchk {margin-top: 1.042vw;} html.vp-tablet .section-form-input .form-area .field-item {margin-bottom: 1.563vw;} html.vp-tablet .section-form-input .form-area .field-item .lb-field {margin-bottom: 1.302vw; font-size: 1.563vw;} html.vp-tablet .section-form-input .form-area .field-item .inp-field-box {height: 5.208vw;} html.vp-tablet .section-form-input .form-area .field-item .inp-field {padding: 0 5.990vw 0 1.563vw; border-radius: 0.391vw; font-size: 1.823vw;} html.vp-tablet .section-form-input .form-area .field-item .btn-inp-clear, html.vp-tablet .section-form-input .form-area .field-item.check-error .inp-field-box::after, html.vp-tablet .section-form-input .form-area .field-item.check-correct .inp-field-box::after {right: 1.563vw; width: 2.865vw; height: 2.865vw;} html.vp-tablet .section-form-input .form-area .field-item .inp-field::placeholder {font-size: 1.823vw;} html.vp-tablet .section-form-input .form-area .field-item.required-value .lb-field .name::after {right: -1.302vw; width: 0.781vw; height: 0.781vw;} html.vp-tablet .section-form-input .form-area .txt-wrap {margin-bottom: 2.604vw;} html.vp-tablet .section-form-input .form-area .txt-wrap * {font-size: 1.563vw;} html.vp-tablet .section-form-input .form-area .txt-wrap > * {margin-right: 1.302vw;} html.vp-tablet .section-form-input .form-area .txt-wrap.bottom-txt-area {margin-top: 1.563vw;} html.vp-tablet .section-form-input .form-area .txt-wrap.bottom-txt-area * {font-size: 1.563vw !important;} html.vp-tablet .section-form-input .form-area .checkbox-area input[type=checkbox] + label {line-height: 1.823vw;} html.vp-tablet .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox {position: relative; width: 1.823vw; height: 1.823vw; margin-right: 0.781vw; border: 0.130vw solid #DBD4EC; border-radius: 0.260vw;} html.vp-tablet .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox::before {width: 1.823vw; height: 1.823vw; border: 0.130vw solid transparent;} html.vp-tablet .section-form-input .form-area .checkbox-area input[type=checkbox]:checked + label .ico-checkbox::after {width: 0.911vw; height: 0.651vw;} /* * [모바일] ~ 480px * - window.parent.innerWidth 기준으로 JS에서 에 .vp-mobile 클래스 부여 * - iframe 내부 CSS 미디어쿼리는 iframe 자체 너비를 viewport로 인식하므로 미디어쿼리 대신 클래스 방식 사용 */ /* section-banner */ html.vp-mobile .section-banner {display: none;} /* contents : common */ html.vp-mobile .page-account .layout-inner {width: calc(100% - 7.407vw) !important; padding-top: 9.815vw;} html.vp-mobile .page-account .account-innerbox {flex-direction: column;} html.vp-mobile .page-account .account-innerbox > [class^=section-] {width: 100%;} /* section-form-input */ /* 계산: account.css @media (max-width:480px) 값 그대로 사용 (iframe ≈ 브라우저 뷰포트 100%) */ html.vp-mobile .section-form-input {padding: 0;} html.vp-mobile .section-form-input [class*=btn][class*=type-text] {font-size: 3.333vw !important;} html.vp-mobile .section-form-input [class*=btn].btn-back {margin-bottom: 7.407vw; font-size: 4.63vw !important;} html.vp-mobile .section-form-input [class*=btn].btn-back::before {width: 2.037vw; height: 3.241vw; margin-right: 2.778vw;} html.vp-mobile .section-form-input .section-title, html.vp-mobile .section-form-input .section-title * {font-family: var(--ft-family_Poppins-800);font-size: 7.407vw;} html.vp-mobile .section-form-input .section-title {margin-bottom: 7.407vw;} html.vp-mobile .section-form-input .section-title .tit-sub {margin-top: 2.778vw; font-size: 3.333vw;} html.vp-mobile .section-form-input .section-subtitle {margin-bottom: 4.630vw; font-family: var(--ft-family_Poppins-700); font-size: 4.938vw;} html.vp-mobile .section-form-input .login-area .section-title {margin-bottom: 2.222vw;} html.vp-mobile .section-form-input .login-area .section-title br {display: none;} html.vp-mobile .section-form-input .login-btns [class*=btn-login] {height: 12.963vw; margin-bottom: 3.704vw; border-radius: 0.741vw;} html.vp-mobile .section-form-input .login-btns [class*=btn-login] .icon {width: 5vw; height: 5vw;} html.vp-mobile .section-form-input .login-btns [class*=btn-login] .txt {margin-left: 2.222vw; font-size: 4.63vw;} html.vp-mobile .section-form-input .login-btns .btn-login-apple .icon {width: 3.704vw;} html.vp-mobile .section-form-input .section-line {margin: 7.407vw 0;} html.vp-mobile .section-form-input .section-line .txt {font-size: 4.0741vw;} html.vp-mobile .section-form-input .section-line .txt::before, html.vp-mobile .section-form-input .section-line .txt::after {width: 40.926vw; height: 0.278vw;} html.vp-mobile .section-form-input .form-area .btn-submit {height: 12.963vw; border-radius: 0.741vw; font-size: 5.556vw} html.vp-mobile .section-form-input .form-area [class*=msg-error] {margin-top: 2.778vw; font-size: 3.333vw !important;} html.vp-mobile .section-form-input .form-area .msg-error-allchk {margin-top: 2.7vw;} html.vp-mobile .section-form-input .form-area .field-item {margin-bottom: 4.0741vw;} html.vp-mobile .section-form-input .form-area .field-item .lb-field {margin-bottom: 2.778vw; font-size: 3.704vw;} html.vp-mobile .section-form-input .form-area .field-item .inp-field-box {height: 12.963vw;} html.vp-mobile .section-form-input .form-area .field-item .inp-field {padding: 0 13.519vw 0 3.704vw; border-radius: 0.741vw; font-size: 4.63vw; border-width: 0.278vw;} html.vp-mobile .section-form-input .form-area .field-item .btn-inp-clear, html.vp-mobile .section-form-input .form-area .field-item.check-error .inp-field-box::after, html.vp-mobile .section-form-input .form-area .field-item.check-correct .inp-field-box::after {right: 3.704vw; width: 6.111vw; height: 6.111vw;} html.vp-mobile .section-form-input .form-area .field-item .inp-field::placeholder {font-size: 4.63vw;} html.vp-mobile .section-form-input .form-area .field-item.required-value .lb-field .name::after {right: -3vw; width: 2.037vw; height: 2.037vw;} html.vp-mobile .section-form-input .form-area .txt-wrap {margin-bottom: 7.407vw;} html.vp-mobile .section-form-input .form-area .txt-wrap * {font-size: 3.333vw;} html.vp-mobile .section-form-input .form-area .txt-wrap > * {margin-right: 1.172vw;} html.vp-mobile .section-form-input .form-area .txt-wrap.bottom-txt-area {margin-top: 3.704vw;} html.vp-mobile .section-form-input .form-area .txt-wrap.bottom-txt-area * {font-size: 3.333vw !important;} html.vp-mobile .section-form-input .form-area .checkbox-area input[type=checkbox] + label {line-height: 4.259vw;} html.vp-mobile .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox {width: 4.259vw; height: 4.259vw; margin-right: 1.852vw; border-radius: 0.37vw;} html.vp-mobile .section-form-input .form-area .checkbox-area input[type=checkbox]:checked + label .ico-checkbox::after {width: 2.593vw; height: 2.222vw;} /* * [hover 스타일 적용] * - 터치 디바이스 제외 */ @media (any-hover: hover) and (pointer: fine) { .section-form-input .form-area .checkbox-area input[type=checkbox] + label:hover .ico-checkbox, .section-form-input .form-area .checkbox-area input[type=checkbox] + label:hover .ico-checkbox::before {border-color: #3EB5FE;} }