@charset "utf-8";

/*
 * Copyright    :   ONEDAYNET.CO.KR
 * SOLUTION     :   HYSSENCE 3.0 PLUS
 * File         :   intro.css
 * SUMMARY      :   폐쇄몰 인트로 로그인
 */

/* 본 소스는 모두 (주)상상너머의 지적 재산이며, 이에 대해 무단도용 및 수정 재배포/재편집등을 절대 금하며 적발 시 법적 대응을 할 것임을 경고합니다. */



/* Global ---------------------------------------------------------------- */
html {width:100%; height:100%; overflow:hidden;}
body {margin:0; padding:0; background:#fff; height:100%; overflow:hidden;}

body,p,pre,form,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button, select {color:#666; font-family:'Pretendard',Sans-serif; letter-spacing:-0.3px; font-size:13px; font-weight:400;}
body,p,pre,form,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button, select {word-wrap:break-word; word-break:break-all; -webkit-text-size-adjust:none; text-decoration-skip-ink:none}
b,strong {color:#666; word-wrap:break-word; word-break:break-all; font-size:inherit; font-family:inherit; font-weight:600;}
p,form,span,h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-weight:normal;}
div,table {margin:0; padding:0; border-spacing:0; border-collapse:collapse; border:none; -webkit-overflow-scrolling:touch;}
table caption { width:0px; height:0px; font-size:0; visibility:hidden; }
ul,ol,li,td,dl,dt,dd {margin:0; padding:0; }
em,i {font-style:normal}
a,span {display:inline-block;}
div {-webkit-overflow-scrolling:touch;}
img {border:0;}
span,div,a,strong,em,label,dl,dt,dd,ul,li {color:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit;}
a:link, a:visited {color:inherit; text-decoration:none; cursor:pointer;}
a:hover, a:active {text-decoration:none;}
u {text-decoration:none;}
* {font-size:inherit; -webkit-tap-highlight-color:transparent}
.swiper-notification {display:none;}

input::placeholder {color: #ccc !important;}
input::-webkit-input-placeholder {color: #ccc !important;}
input:-ms-input-placeholder {color: #ccc !important;}
input:-moz-placeholder {color: #ccc !important;}

.wrap {width:100%; height:100%; overflow:hidden;}




/* 폐쇄몰 인트로 로그인 ========================================= */
.p_Intro {position:relative; width:100%; height:100%; background:#f5f5f5; display:flex; justify-content:center; align-items:center; flex-direction:column;}
.p_Intro li {list-style:none}
.p_Intro .floating_box {width:100%; max-width:470px; position:relative; z-index:1; overflow-y:auto; padding:30px; box-sizing:border-box;}

/* 로그인페이지 외 */
.p_Intro.original {}
.p_Intro.original .floating_box {max-width:800px; padding:0px; }
.p_Intro .user_guide {font-size:13px; color:#666; margin-top:10px; text-align:center; line-height:1.4;}

.p_Intro .top_banner {text-align:center; margin-bottom:20px;}
.p_Intro .top_banner img {max-width:100%; max-height:80px;}
.p_Intro .top_banner+ .form_box .login_title {display:none;}
.p_Intro .bg_banner {width:100%; height:100%; position:fixed; top:0; left:0; overflow:hidden;}
.p_Intro .bg_banner:before {content:''; display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:absolute; left:0; top:0;}
.p_Intro .bg_banner img {width:100%; height:100%; object-fit:cover;}

.p_Intro .login_title {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; text-align:center;}
.p_Intro .login_title .title {font-size:23px; color:#000; font-weight:700;}
.p_Intro .login_title .stitle  {font-size:14px; color:#666; margin-top:10px;} /* PTC-511230:JJC - 채널몰 :: 인트로 로그인 스타일 추가 */
.p_Intro .login_title .picto {margin-bottom:5px; display:flex; justify-content:center; align-items:center; flex-direction:column;}
.p_Intro .login_title .picto img {width:65px; display:block;}

.p_Intro .multi_shop {margin-top:10px; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:row; gap:8px;}

.p_Intro .result_member {background:#f0f0f0; border-radius:6px; padding:15px; margin-top:15px; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:8px;}
.p_Intro .result_member .comment {font-size:14px; color:#333; font-weight:500; text-align:center; line-height:1.4;}
.p_Intro .result_member strong {color:#4f00e1; text-decoration:underline; text-underline-offset:2px;}

.p_Intro .login_form {background:#fff; border-radius:15px; padding:30px; box-sizing:border-box;}
.p_Intro .form_box {display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;}

.p_Intro .form_list {margin-top:25px; }
.p_Intro .form_list ul {box-sizing:border-box; display:flex; justify-content:center; align-items:stretch; flex-direction:column; gap:10px}
.p_Intro .form_list li {display:flex; justify-content:flex-start; align-items:center; flex-direction:row; gap:10px; position:relative;}
.p_Intro .form_list input.input_form {height:60px; width:100%; font-size:15px; color:#000; outline:none; background:#fff; border-radius:8px; border:1px solid #eee; box-sizing:border-box; flex:1; transition:all 0.3s ease-out; padding:0 15px;}
.p_Intro .form_list input.input_form:focus {color:#000; border-color:#4f00e1;}
.p_Intro .form_list input.input_form:not(:placeholder-shown) {background:#4f00e10d; border-color:#4f00e11a;;}


.p_Intro .btn_login {border-radius:10px; background:#4f00e126; height:60px; color:#4f00e1; font-size:17px; font-weight:600; margin-top:15px; cursor:pointer; border:0; display:flex; justify-content:center; align-items:center; flex-direction:column; border:1px solid #4f00e126;}
.p_Intro .btn_login.fill {background:#4f00e1; color:#fff;}
.p_Intro .btn_side {border-radius:100px; background:#4f00e126; height:34px; color:#4f00e1b3; font-size:13px; font-weight:600; border:0; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:0 15px; box-sizing:border-box;}
.p_Intro .btn_side.fill {background:#4f00e1b3; color:#fff;}

.p_Intro .upper_stuff {display:flex; justify-content:center; align-items:center; flex-direction:row; gap:10px; position:absolute; right:10px;}
.p_Intro .upper_stuff .timer {color:#4f00e1; font-weight:500; font-variant: tabular-nums; pointer-events:none; font-variant-numeric: tabular-nums;}

.p_Intro .history_check {margin-top:30px; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; gap:10px;}

.p_Intro .auth_result {display:flex; justify-content:flex-end; align-items:center; flex-direction:row; gap:10px; flex:1; padding:0 3px;}
.p_Intro .auth_result .btn_text {color:#333; text-decoration:none; text-decoration:underline; text-underline-offset:2px;}
.p_Intro .auth_result .tool_tip {color:#4f00e1; font-size:13px; font-weight:500; flex:1}

.p_Intro .login_form label.design {cursor:pointer; display:inline-flex; justify-content:stretch; align-items:stretch; flex-direction:column;}
.p_Intro .login_form label.design input {display:none;}
.p_Intro .login_form label.design .tx {color:#888; font-weight:500; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:5px; height:25px;}
.p_Intro .login_form label.design .icon {width:18px; height:18px; box-sizing:border-box; flex:none; border-radius:3px; background:#ddd url('../images/c_img/c_check.svg') center center no-repeat; background-size:8px !important;}
.p_Intro .login_form label.design input:checked+ .tx {color:#333;}
.p_Intro .login_form label.design input:checked+ .tx .icon {background-color:#000 !important;}

.p_Intro .ctrl_box {margin-top:20px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; flex:1}
.p_Intro .ctrl_box .btn {position:relative; padding:5px 0; box-sizing:border-box; color:#000; text-decoration:none;}
.p_Intro .ctrl_box .btn_find {color:#999;}

.p_Intro .copyright {color:#aaa; letter-spacing:0; text-align:center; font-size:11px; margin-top:20px;}
.p_Intro .copyright a {text-decoration:underline;}

.p_Intro .open_info {color:#aaa; text-align:center; display:flex; flex-direction:row; justify-content:center; flex-wrap:wrap; gap:4px 6px; margin-top:15px; display:none}
.p_Intro .open_info .txt {font-size:11px; color:#aaa; word-wrap:break-word; word-break:keep-all; white-space:normal;}
.p_Intro .open_info.if_open {display:flex;}

.p_Intro input.input_design:not(:placeholder-shown) {background:rgba(var(--color-main-rgb), 0.05); border-color:rgba(var(--color-main-rgb), 0.2); color:#000;}


/* 인트로 반응형 */
@media screen and (max-width:600px) {
	.p_Intro .floating_box {padding:0;}

	.p_Intro {background:#fff;}
	.p_Intro.original {justify-content:flex-start}
	.p_Intro.original .floating_box {min-height:100%}
}