@charset "utf-8";

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

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


/* font :기본 ---------------------------------------------------------------- */
@font-face {
  font-family:'Pretendard';
  src:url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight:300;
  font-style:normal;
}

@font-face {
  font-family:'Pretendard';
  src:url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
}

@font-face {
  font-family:'Pretendard';
  src:url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
  font-weight:500;
  font-style:normal;
}

@font-face {
  font-family:'Pretendard';
  src:url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight:600;
  font-style:normal;
}

@font-face {
  font-family:'Pretendard';
  src:url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight:700;
  font-style:normal;
}

@font-face {
  font-family:'Pretendard';
  src:url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight:800;
  font-style:normal;
}

@font-face {
  font-family:'Pretendard';
  src:url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight:900;
  font-style:normal;
}


/* 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:#eee; 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 {background:#fff;}
.p_Intro.original .floating_box {max-width:800px; padding:0px; padding-bottom:30px;}

.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_form {background:#fff; border-radius:20px; box-shadow:0 0 5px rgba(0, 0, 0, 0.06); padding:40px; box-sizing:border-box;}
.p_Intro .login_form .form_box {display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;}
.p_Intro .login_form .form_box .login_title {font-size:21px; color:#000; font-weight:800; line-height:1; text-align:center;}
.p_Intro .login_form .form_box ul {border:1px solid #e5e5e5; margin-top:10px; border-radius:5px; overflow:hidden; box-sizing:border-box;}
.p_Intro .login_form .form_box li+ li {border-top:1px solid #e5e5e5;}
.p_Intro .login_form .form_box input.input_design {height:55px; width:100%; font-size:15px; text-indent:15px; color:#888; border:0; outline:none; background:#fff; border-radius:0px;}
.p_Intro .login_form .form_box input.input_design:focus {color:#000; background:#f5f5f5;}
.p_Intro .login_form .btn_login {border-radius:5px; background:#000; height:60px; color:#fff; font-size:17px; font-weight:600; margin-top:15px; cursor:pointer; border:0;}
.p_Intro .login_form .btn_login {transition:all 0.2s ease-out;}
.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 .login_form .ctrl_box {margin-top:10px; display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
.p_Intro .login_form .ctrl_box .btn_box {display:flex; flex-direction:row; justify-content:flex-end; align-items:center; margin-right:-10px;}
.p_Intro .login_form .ctrl_box .btn {position:relative; padding:5px 10px; box-sizing:border-box; color:#000; text-decoration:none;}
.p_Intro .login_form .ctrl_box .btn+ .btn:before {content:''; position:absolute; left:0; top:50%; width:1px; height:10px; background:#ccc; margin-top:-5px;}
.p_Intro .login_form .ctrl_box .btn_find {color:#999;}

.p_Intro .site_info {color:#aaa; text-align:center; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; margin-top:20px;}
.p_Intro .site_info .info_wrap {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 5px;}
.p_Intro .site_info .txt {font-size:11px; color:#aaa; word-wrap:break-word; word-break:keep-all; white-space:normal;}
.p_Intro .site_info .guide_txt {font-size:12px; margin-bottom:10px; color:#aaa;}
.p_Intro .copyright {color:#aaa; letter-spacing:0; margin-top:15px; text-align:center; font-size:11px;}


/* 인트로 반응형 */
@media screen and (min-width:900px) {
	.p_Intro .login_form .btn_login:hover {background-color:var(--primary-color);}
	.p_Intro .login_form .ctrl_box .btn:hover {text-decoration:underline;}

	.p_Intro .floating_box::-webkit-scrollbar {width:6px;}
	.p_Intro .floating_box::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,0.2);; border-radius:100px;}
	.p_Intro .floating_box::-webkit-scrollbar-track {background-color:#fff;}
	.p_Intro .floating_box:hover::-webkit-scrollbar-thumb {background:#333;}
}

@media screen and (max-width:900px) {
	.p_Intro .floating_box {padding:20px;}
	.p_Intro .login_form {padding:30px;}
}