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

/* 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; 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] .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;}
.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;}
.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: 1px solid #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;}
.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] + label:hover .ico-checkbox,
.section-form-input .form-area .checkbox-area input[type=checkbox] + label:hover .ico-checkbox::before,
.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;}
.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 {bottom: 60px;}
.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;}

/* 
 *  [해상도 769px ~ 1024px]
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 */
 @media all and (max-width:1024px) {

}