@charset "UTF-8";
/*
 *  File Name : /ui_resource/css/responsive/account.css
 *  Description : 계정 관련 스타일
 *  Page : /accout/*
 *  Selector : .page-account
 */

/* common */
.header-wrap {display: none;}

/* contents : common */
.page-account {display: flex; align-items: center; min-height: 100vh; padding: 50px 0; background: url(../../images/account/bg_account.jpg) center no-repeat; background-size: cover; box-sizing: border-box;}
.page-account .layout-inner {display: flex; justify-content: center; align-items: center;}
.page-account .top-logo {position: absolute; left: 0; top: 5%;}
.page-account .top-logo a {width: 100px;}
.page-account .top-logo img {width: 100%;}
.page-account .account-innerbox {overflow: hidden; display: flex; max-width: 1120px; width: 100%; height: 785px; border-radius: 20px;}
.page-account .account-innerbox > [class^=section-] {overflow: hidden; width: 560px;}

/* section-form-input */
.section-form-input {overflow-y: auto; padding: 60px 80px; 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: 14px !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: 20px; font-family: var(--ft-family_Poppins-700) !important; font-size: 22px !important;}
.section-form-input [class*=btn].btn-back::before {content: ""; display: inline-block; width: 14px; height: 24px; 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-800); font-size: 34px; letter-spacing: -.5px;}
.section-form-input .section-title {margin-bottom: 20px;}
.section-form-input .section-title .tit-sub {margin-top: 10px; color: #999; font-family: var(--ft-family_Poppins-400); font-size: 16px; line-height: 1.5;}
.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: 60px; margin-bottom: 10px; border-radius: 4px;}
.section-form-input .login-btns [class*=btn-login]:last-child {margin-bottom: 0;}
.section-form-input .login-btns [class*=btn-login] .icon {width: 30px; height: 30px;}
.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: 10px; color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 20px;}
.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: 25px;}
.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-700); font-size: 14px;}
.section-form-input .section-line .txt::before,
.section-form-input .section-line .txt::after {content: ""; display: inline-block; position: absolute; top: 50%; width: 180px; 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: 60px; background-color: #1398FF; border-radius: 4px; color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 26px}
.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: 14px !important; transition: all 0.1s;}
.section-form-input .form-area .msg-error-allchk {margin-top: 12px; text-align: center;}
.section-form-input .form-area .noti-txt {color: #999 !important;}
.section-form-input .form-area .field-item {margin-bottom: 15px;}
.section-form-input .form-area .field-item .lb-field {display: block; margin-bottom: 6px; color: #333; font-family: var(--ft-family_Poppins-700); font-size: 14px; 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: 60px;}
.section-form-input .form-area .field-item .inp-field {width: 100%; height: 100%; padding: 0 62px 0 16px; box-sizing: border-box; border: 1px solid #DBD4EC; border-radius: 4px; color: #333; font-family: var(--ft-family_Poppins-400); font-size: 20px;}
.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: 16px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; 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: 20px;}
.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: -8px; width: 5px; height: 5px; 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: 15px;}
.section-form-input .form-area .txt-wrap * {color: #333; font-family: var(--ft-family_Poppins-500); font-size: 14px;}
.section-form-input .form-area .txt-wrap > * {margin-right: 7px; 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: 15px; margin-bottom: 0;}
.section-form-input .form-area .txt-wrap.bottom-txt-area * {font-size: 18px !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: 18px;}
.section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox {display: inline-block; position: relative; width: 20px; height: 20px; margin-right: 8px; 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: 18px; height: 18px; 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: 14px; height: 12px; 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;}

/* section-banner-slider */
.section-banner-slider {background: #3811AE;}
.section-banner-slider .banner-swiper {position: relative; height: 100%; box-sizing: border-box;}
.section-banner-slider .swiper-slide .link {display: block; height: 100%; padding-top: 60px; box-sizing: border-box;}
.section-banner-slider .section-title,
.section-banner-slider .section-title * {color: #fff;}
.section-banner-slider .section-title {text-align: center;}
.section-banner-slider .section-title .tit-main {font-family: var(--ft-family_Poppins-600); font-size: 50px; line-height: 1;}
.section-banner-slider .section-title .tit-sub {margin-top: 10px; font-family: var(--ft-family_Poppins-300); font-size: 20px; line-height: 1.3;}
.section-banner-slider .img-area {display: block; width: 560px; margin-top: 30px;}
.section-banner-slider .img-area img {width: 100%;}
.section-banner-slider .swiper-pagination {left: 50%; bottom: 60px; transform: translateX(-50%);}
.section-banner-slider .swiper-pagination .swiper-pagination-bullet {width: 20px; height: 20px; margin: 0 15px; background: #fff; opacity: 1;}
.section-banner-slider .swiper-pagination .swiper-pagination-bullet-active {background: #3EB5FE;}

/* 
 *  [해상도 1400px]
 *  - 컨텐츠 inner: 1400px 기준
 *  - 1920 기준 / DPR 1 / 16.6
 */
@media all and (max-width:1400px) {
    /* contents : common */
    .page-account {padding: 3.012vw 0;}
    .page-account .top-logo a {width: 6.024vw;}
    .page-account .account-innerbox {max-width: 67.47vw; height: 47.289vw; border-radius: 1.205vw;}
    .page-account .account-innerbox > [class^=section-] {width: 33.735vw;}

    /* section-form-input */
    .section-form-input {padding: 3.614vw 4.819vw;}
    .section-form-input [class*=btn][class*=type-text] {font-size: 0.843vw !important;}
    .section-form-input [class*=btn].btn-back {margin-bottom: 1.205vw; font-size: 1.325vw !important;}
    .section-form-input [class*=btn].btn-back::before {width: 0.843vw; height: 1.446vw; margin-right: 0.602vw;}
    .section-form-input .section-title,
    .section-form-input .section-title * {font-size: 2.048vw; letter-spacing: -0.030vw;}
    .section-form-input .section-title {margin-bottom: 1.205vw;}
    .section-form-input .section-title .tit-sub {margin-top: 0.602vw; font-size: 0.964vw;}
    .section-form-input .login-btns [class*=btn-login] {height: 3.614vw; margin-bottom: 0.602vw; border-radius: 0.241vw;}
    .section-form-input .login-btns [class*=btn-login] .icon {width: 1.807vw; height: 1.807vw;}
    .section-form-input .login-btns [class*=btn-login] .txt {margin-left: 0.602vw; font-size: 1.205vw;}
    .section-form-input .login-btns .btn-login-apple .icon {width: 1.506vw;}
    .section-form-input .section-line {margin: 1.205vw 0;}
    .section-form-input .section-line .txt {font-size: 0.843vw;}
    .section-form-input .section-line .txt::before,
    .section-form-input .section-line .txt::after {width: 10.843vw;}
    .section-form-input .form-area .btn-submit {height: 3.614vw; border-radius: 0.241vw; font-size: 1.566vw}
    .section-form-input .form-area [class*=msg-error] {margin-top: 0.301vw; font-size: 0.843vw !important;}
    .section-form-input .form-area .msg-error-allchk {margin-top: 0.723vw;}
    .section-form-input .form-area .field-item {margin-bottom: 0.904vw;}
    .section-form-input .form-area .field-item .lb-field {margin-bottom: 0.361vw; font-size: 0.843vw;}
    .section-form-input .form-area .field-item .inp-field-box {height: 3.614vw;}
    .section-form-input .form-area .field-item .inp-field {padding: 0 3.735vw 0 0.964vw; border-radius: 0.241vw; font-size: 1.205vw;}
    .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 {right: 0.964vw; width: 1.807vw; height: 1.807vw;}
    .section-form-input .form-area .field-item .inp-field::placeholder {font-size: 1.205vw;}
    .section-form-input .form-area .field-item.required-value .lb-field .name::after {right: -0.482vw; width: 0.301vw; height: 0.301vw;}
    .section-form-input .form-area .txt-wrap {margin-bottom: 0.904vw;}
    .section-form-input .form-area .txt-wrap * {font-size: 0.843vw;}
    .section-form-input .form-area .txt-wrap > * {margin-right: 0.422vw;}
    .section-form-input .form-area .txt-wrap.bottom-txt-area {margin-top: 0.904vw;}
    .section-form-input .form-area .txt-wrap.bottom-txt-area * {font-size: 1.084vw !important;}
    .section-form-input .form-area .checkbox-area input[type=checkbox] + label {line-height: 1.084vw;}
    .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox {width: 1.205vw; height: 1.205vw; margin-right: 0.482vw; border-radius: 0.120vw;}
    .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox::before {width: 1.084vw; height: 1.084vw;}
    .section-form-input .form-area .checkbox-area input[type=checkbox]:checked + label .ico-checkbox::after {width: 0.843vw; height: 0.723vw;}

    /* section-banner-slider */
    .section-banner-slider .swiper-slide .link {padding-top: 3.614vw;}
    .section-banner-slider .section-title .tit-main {font-size: 3.012vw;}
    .section-banner-slider .section-title .tit-sub {margin-top: 0.602vw; font-size: 1.205vw;}
    .section-banner-slider .img-area {width: 33.735vw; margin-top: 1.807vw;}
    .section-banner-slider .swiper-pagination {bottom: 3.614vw;}
    .section-banner-slider .swiper-pagination .swiper-pagination-bullet {width: 1.205vw; height: 1.205vw; margin: 0 0.904vw;}
}

/* 
 *  [해상도 481px ~ 1024px]
 *  1. 769px ~ 1024px
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 *
 *  2. 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 *
 *  3. 768 기준 / DPR 2 / 7.68
 *  4. 태블릿 ui 적용 (mode-tablet)
 *  5. 터치 기반 디바이스 ui 적용 (mode-touch): 태블릿+모바일
 */
@media all and (max-width:1024px) {
    /* common */
    .header-wrap {display: block;}

    /* contents : common */
    .page-account {min-height: auto; padding: var(--header-height) 0; background: #fff;}
    .page-account .layout-inner {padding-top: 13.021vw; width: 46.354vw; margin: 0 auto;}
    .page-account .top-logo a {display: none;}
    .page-account .account-innerbox {flex-direction: column; max-width: 100%; height: auto; border-radius: 0;}
    .page-account .account-innerbox > [class^=section-] {width: 100%; padding: 0;}

    /* section-form-input */
    .section-form-input [class*=btn][class*=type-text] {font-size: 1.563vw !important;}
    .section-form-input [class*=btn].btn-back {margin-bottom: 1.953vw; font-size: 2.214vw !important;}
    .section-form-input [class*=btn].btn-back::before {width: 1.237vw; height: 1.953vw; margin-right: 0.781vw;}
    .section-form-input .section-title,
    .section-form-input .section-title * {font-size: 3.906vw;}
    .section-form-input .section-title {margin-bottom: 1.953vw;}
    .section-form-input .section-title .tit-sub {margin-top: 0.977vw; font-size: 1.563vw;}    
    .section-form-input .login-btns [class*=btn-login] {height: 6.901vw; margin-bottom: 1.302vw; border-radius: 0.521vw;}
    .section-form-input .login-btns [class*=btn-login] .icon {width: 3.516vw; height: 3.516vw;}
    .section-form-input .login-btns [class*=btn-login] .txt {margin-left: 1.693vw; font-size: 2.214vw;}
    .section-form-input .section-line {margin: 2.2135vw 0;}
    .section-form-input .section-line .txt {font-size: 1.5625vw;}
    .section-form-input .section-line .txt::before,
    .section-form-input .section-line .txt::after {width: 20.833vw; height: 0.1302vw;}
    .section-form-input .form-area .btn-submit {height: 6.901vw; border-radius: 0.521vw; font-size: 2.995vw}
    .section-form-input .form-area [class*=msg-error] {margin-top: 0.651vw; font-size: 1.5625vw !important;}
    .section-form-input .form-area .msg-error-allchk {margin-top: 1.628vw;}
    .section-form-input .form-area .field-item {margin-bottom: 1.693vw;}
    .section-form-input .form-area .field-item .lb-field {margin-bottom: 0.651vw; font-size: 1.5625vw;}
    .section-form-input .form-area .field-item .inp-field-box {height: 6.901vw;}
    .section-form-input .form-area .field-item .inp-field {padding: 0 5.99vw 0 1.823vw; border-radius: 0.521vw; font-size: 2.214vw; border-width: 0.130vw;}
    .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 {right: 1.693vw; width: 2.344vw; height: 2.344vw;}
    .section-form-input .form-area .field-item .inp-field::placeholder {font-size: 2.214vw;}
    .section-form-input .form-area .field-item.required-value .lb-field .name::after {right: -1.172vw; width: 0.911vw; height: 0.911vw;}
    .section-form-input .form-area .txt-wrap {margin-bottom: 1.693vw;}
    .section-form-input .form-area .txt-wrap * {font-size: 1.5625vw;}
    .section-form-input .form-area .txt-wrap > * {margin-right: 1.172vw;}
    .section-form-input .form-area .txt-wrap.bottom-txt-area {margin-top: 1.693vw;}
    .section-form-input .form-area .txt-wrap.bottom-txt-area * {font-size: 1.5625vw !important;}
    .section-form-input .form-area .checkbox-area input[type=checkbox] + label {line-height: 2.279vw;}
    .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox {width: 2.344vw; height: 2.344vw; margin-right: 0.911vw; border-radius: 0.260vw;}
    .section-form-input .form-area .checkbox-area input[type=checkbox] + label .ico-checkbox::before {width: 100%; height: 100%; border: 0;}
    .section-form-input .form-area .checkbox-area input[type=checkbox]:checked + label .ico-checkbox {border-color: #3EB5FE;}
    .section-form-input .form-area .checkbox-area input[type=checkbox]:checked + label .ico-checkbox::after {width: 1.432vw; height: 1.172vw;}

    /* section-banner-slider */
    .section-banner-slider {display: none;}
}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 360 기준 / DPR 3 / 3.6
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* contents : common */
    .page-account .layout-inner {padding-top: 9.815vw;}

    /* section-form-input */
    .section-form-input [class*=btn][class*=type-text] {font-size: 3.333vw !important;}
    .section-form-input [class*=btn].btn-back {margin-bottom: 7.407vw; font-size: 4.63vw !important;}
    .section-form-input [class*=btn].btn-back::before {width: 2.037vw; height: 3.241vw; margin-right: 2.778vw;}
    .section-form-input .section-title,
    .section-form-input .section-title * {font-size: 7.407vw;}
    .section-form-input .section-title {margin-bottom: 7.407vw;}
    .section-form-input .section-title .tit-sub {margin-top: 2.778vw; font-size: 3.333vw;}    
    .section-form-input .login-btns [class*=btn-login] {height: 12.963vw; margin-bottom: 3.704vw; border-radius: 0.741vw;}
    .section-form-input .login-btns [class*=btn-login] .icon {width: 5vw; height: 5vw;}
    .section-form-input .login-btns [class*=btn-login] .txt {margin-left: 2.222vw; font-size: 4.63vw;}
    .section-form-input .section-line {margin: 7.407vw 0;}
    .section-form-input .section-line .txt {font-size: 4.0741vw;}
    .section-form-input .section-line .txt::before,
    .section-form-input .section-line .txt::after {width: 40.926vw; height: 0.278vw;}
    .section-form-input .form-area .btn-submit {height: 12.963vw; border-radius: 0.741vw; font-size: 5.556vw}
    .section-form-input .form-area [class*=msg-error] {margin-top: 2.778vw; font-size: 3.333vw !important;}
    .section-form-input .form-area .msg-error-allchk {margin-top: 2.7vw;}
    .section-form-input .form-area .field-item {margin-bottom: 4.0741vw;}
    .section-form-input .form-area .field-item .lb-field {margin-bottom: 2.778vw; font-size: 3.704vw;}
    .section-form-input .form-area .field-item .inp-field-box {height: 12.963vw;}
    .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;}
    .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 {right: 3.704vw; width: 6.111vw; height: 6.111vw;}
    .section-form-input .form-area .field-item .inp-field::placeholder {font-size: 4.63vw;}
    .section-form-input .form-area .field-item.required-value .lb-field .name::after {right: -3vw; width: 2.037vw; height: 2.037vw;}
    .section-form-input .form-area .txt-wrap {margin-bottom: 7.407vw;}
    .section-form-input .form-area .txt-wrap * {font-size: 3.333vw;}
    .section-form-input .form-area .txt-wrap > * {margin-right: 1.172vw;}
    .section-form-input .form-area .txt-wrap.bottom-txt-area {margin-top: 3.704vw;}
    .section-form-input .form-area .txt-wrap.bottom-txt-area * {font-size: 3.333vw !important;}
    .section-form-input .form-area .checkbox-area input[type=checkbox] + label {line-height: 4.259vw;}
    .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.37w;}
    .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;}
}