@charset "utf-8";

body {min-width:1000px; background-color:#f7f8f9;}

.intro-container {padding-bottom:100px;}
.intro-container .items {margin-top:15px; width:100%;}
.intro-container .items .item {width:calc(50% - 21px); height:225px; display:inline-block; vertical-align:top; background-color:#ffffff; border:3px solid #ececec;}
.intro-container .items .item.join {margin-left:30px;}

.intro-container .items .block {padding:25px;}
.intro-container .items .title {margin:-3px 0 0 0; padding-bottom:8px; border-bottom:2px solid #000000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
.intro-container .items .title {font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:24px; font-size:20px; color:#000000;}

.intro-container .login .list {margin-top:20px; position:relative; display:block;}
.intro-container .login .list ul {display:block; margin-right:104px;}
.intro-container .login .list ul li {margin-top:4px; display:block;}
.intro-container .login .list ul li:first-child {margin-top:0px;}
.intro-container .login .input {transition:border 0.2s, background 0.2s; position:relative; display:block; vertical-align:middle; background-color:#eff0f0; border:1px solid #d7d7d7;}
.intro-container .login .input input {z-index:1; position:relative; padding:0 10px 0 10px; width:calc(100% - 22px); height:38px; border:0; background:transparent;}
.intro-container .login .input input {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:38px; font-size:15px; color:#acacac;}
.intro-container .login .input .name {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:38px; font-size:15px; color:#acacac;}
.intro-container .login .input.focus {background-color:#ffffff;}
.intro-container .login .input.focus input,
.intro-container .login .input.value input {color:#000000;}
.intro-container .login .submit {position:absolute; right:0; top:0; width:100px; text-align:center; cursor:pointer;}
.intro-container .login .submit {font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:84px; font-size:18px; color:#ffffff;}
.intro-container .login .link {margin-top:20px; position:relative;}
.intro-container .login .link label {display:inline-block; vertical-align:middle; cursor:pointer;}
.intro-container .login .link label {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:20px; font-size:14px; color:#464646;}
.intro-container .login .link .side {position:absolute; right:0px; top:0px;}
.intro-container .login .link .line {padding:0 8px; display:inline-block; vertical-align:middle;}
.intro-container .login .link .line {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:20px; font-size:14px; color:#e2e2e2;}
.intro-container .login .link a {display:inline-block; vertical-align:middle;}
.intro-container .login .link a {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:20px; font-size:14px; color:#464646;}
.intro-container .login .autologin {z-index:1; display:none; padding:0 10px; position:absolute; left:0; top:30px; text-align:center; background-color:#5031a9; border-radius:4px;}
.intro-container .login .autologin {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:37px; font-size:14px; color:#ffffff;}
.intro-container .login .autologin.focus {display:block;}
.intro-container .login-naver:before {display:block; content:''; position:absolute; left:0; top:0; width:50px; height:50px; background-position:0px -500px;}
.intro-container .login-kakao:before {display:block; content:''; position:absolute; left:0; top:0; width:50px; height:50px; background-position:-50px -500px;}
.intro-container .login-facebook:before {display:block; content:''; position:absolute; left:0; top:0; width:50px; height:50px; background-position:-100px -500px;}
.intro-container .login-google:before {display:block; content:''; position:absolute; left:0; top:0; width:50px; height:50px; background-position:-150px -500px;}
.intro-container .account {padding:20px 0;}
.intro-container .account li {position:relative; display:inline-block; vertical-align:top; height:50px; cursor:pointer;}
.intro-container .account li:before {left:calc(50% - 25px); top:calc(50% - 25px);}
.intro-container .account.type1 li {width:100%;}
.intro-container .account.type2 li {width:50%;}
.intro-container .account.type3 li {width:33.333%;}
.intro-container .account.type4 li {width:25%;}
.intro-container .account .login-naver {background-color:#00c300;}
.intro-container .account .login-kakao {background-color:#ffea26;}
.intro-container .account .login-facebook {background-color:#405ea9;}
.intro-container .account .login-google {background-color:#da4835;}

.intro-container .join .btn {margin-top:20px; padding:0 0 2px 0; display:block; background-color:#404c5a; width:100%; text-align:center; cursor:pointer;}
.intro-container .join .btn {text-decoration:none; font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:48px; font-size:18px; color:#ffffff;}
.intro-container .join .btn:hover {background-color:#000000;}
.intro-container .join .help {padding:0 10px; margin-top:30px; text-align:center;}
.intro-container .join .tx1 {margin:-3px 0 -2px 0;}
.intro-container .join .tx1 {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:18px; font-size:14px; color:#666666;}
.intro-container .join .tx2 {margin:-3px 0 -2px 0;}
.intro-container .join .tx2 {font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:28px; font-size:24px; color:#666666;}
.intro-container .join .tx3 {margin:3px 0 -2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
.intro-container .join .tx3 {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:18px; font-size:14px; color:#666666;}

.intro-container.type-sns .items .item {height:295px;}
.intro-container.type-sns .join .help {margin-top:20px; padding:30px 10px 30px 10px; background-color:#f7f8f9;}
.intro-container.type-sns .join .tx2 {margin:6px 0 -2px 0;}

.intro-container .box {padding:70px 0 100px 0;}
.intro-container .box .logo {text-align:center;}
.intro-container .box .block {margin:70px auto 0 auto; padding:60px 20px; width:600px; position:relative; display:block; vertical-align:top; background-color:#ffffff; border-radius:10px;}
.intro-container .box .block:before {display:block; content:''; position:absolute; left:0; top:0; width:100%; height:100%; box-shadow: 0px 0px 5px 7px #000000; border-radius:10px; opacity:0.1;}
.intro-container .box .tx1 {margin:-5px 0 -2px 0; text-align:center;}
.intro-container .box .tx1 {font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:32px; font-size:24px; color:#000000;}
.intro-container .box .tx2 {margin:22px 0 -2px 0; text-align:center;}
.intro-container .box .tx2 {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:21px; font-size:14px; color:#666666;}
.intro-container .box .tx3 {margin:66px 0 -2px 0; text-align:center;}
.intro-container .box .tx3 {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:18px; font-size:14px; color:#666666;}
.intro-container .box .tx4 {margin:5px 0 -5px 0; text-align:center;}
.intro-container .box .tx4 {font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:28px; font-size:24px; color:#666666;}
.intro-container .box .type1 {color:#8393ca;}
.intro-container .box .type2 {color:#ed1c24;}

.intro-footer {padding:30px 0 70px 0; text-align:center;}
.intro-footer .company {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:16px; font-size:14px; color:#000000;}
.intro-footer .addr {margin-top:4px;}
.intro-footer .addr,
.intro-footer .addr a {word-break:break-all; font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:19px; font-size:12px; color:#666666;}
.intro-footer .addr .btn:hover {color:#000000;}