@charset "utf-8";

.gate-login-wrap{width:440px}

.gate-login-header{position:fixed; top:0; left:0; right:0; display:flex; align-items:center; height:80px; padding:0 15px}
.gate-login-header .login-logo{display:block}
.gate-login-header .login-logo img{display:inline-block; max-height:52px}
.gate-login-header .lang{margin-left:auto}

.login-info .biz-name{display:block; font-weight:bold; font-size:27px; color:#1a1a1a; letter-spacing:-1.5px}
.login-info .biz-message{display:block; text-align:left; line-height:165%; font-weight:bold; font-size:32px; color:#4e4e4e; letter-spacing:-0.8px}
.login-info .biz-message span{font-size:18px; font-weight:600; letter-spacing:-0.2px}


.login-form{border-radius:30px; box-shadow:2px 5px 15px 5px rgba(1, 4, 47, 0.12); max-width:480px; padding:60px 40px 60px;}

.login-form .biz-logo{display:flex; justify-content:center; align-items:center; margin-bottom:10px; max-width:480px;}
.login-form .biz-logo img{max-width:140px; text-align:center;}
.login-form .company_logo{display:flex; justify-content:center; align-items:center; max-width:480px;}
.login-form .company_logo img{max-width:220px}
.login-form .biz-tit{display:flex; justify-content:center; align-items:center; max-width: 480px; margin-bottom:8px}
.login-form .biz-tit span{width:220px; font-size: 20px; text-align: center; border-radius:20px; letter-spacing: 3px; background: -webkit-linear-gradient(#5f5aa6, #2f3030);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}
.login-form form{margin-bottom:20px}
.login-form .inputxt-login{position:relative; margin-bottom:25px; }
.login-form .inputxt-login::after{content:''; position:absolute; width:100%; height:2px; background:#ddd; left:0; bottom:0}
.login-form .inputxt-login:last-child{margin-bottom:0}
.login-form .inputxt-login label{position:absolute; left:15px; top:0; width:24px; height:100%; padding-top:15px; text-align:center; font-size:24px; color:#aaa; box-sizing:border-box}
.login-form .inputxt-login input{width:100%; height:60px; margin:0; padding:1px 0; font-size:15px; font-weight:normal; color:#202020; letter-spacing:-0.2px; background-color:#fff; border:none; text-indent:45px; outline:none; box-sizing:border-box; transition:all .20s ease}
.login-form .inputxt-login:hover label{color:#5629ee;}

.login-form .inputxt-login input::-webkit-input-placeholder{color:#999; font-family:'ptd', 'roboto', 'sans-serif' !important; font-weight:normal; font-size:15px}
.login-form .inputxt-login input:-ms-input-placeholder{color:#999; font-family:'ptd', 'roboto', 'sans-serif' !important; font-weight:normal; font-size:15px}
.login-form .inputxt-login input::-moz-placeholder{color:#999; font-family:'ptd', 'roboto', 'sans-serif' !important; font-weight:normal; font-size:15px}
.login-form .inputxt-login input::placeholder{color:#999; font-family:'ptd', 'roboto', 'sans-serif' !important; font-weight:normal; font-size:15px}

.login-form .inputxt-login input[disabled],
.login-form .inputxt-login input[readonly]{background:#f2f4f5}

.login-form .inputxt-login input:-webkit-autofill{font-size:15px; font-weight:normal; color:#202020; letter-spacing:-0.2px; -webkit-box-shadow:0 0 0 0 #fff inset; -webkit-text-fill-color:#202020}
.login-form .inputxt-login input:-webkit-autofill,
.login-form .inputxt-login input:-webkit-autofill:hover,
.login-form .inputxt-login input:-webkit-autofill:focus,
.login-form .inputxt-login input:-webkit-autofill:active{font-size:15px; font-weight:normal; color:#202020; letter-spacing:-0.2px; transition:background-color 5000s ease-in-out 0s}

.login-form .confirm-type{margin-top:-10px; margin-left:-10px}
.login-form .confirm-type:after{content:''; clear:both; display:block}
.login-form .confirm-type li{float:left; width:100%}
.login-form .confirm-type li.kakao,
.login-form .confirm-type li.naver{width:100%}
.login-form .confirm-type li .inner{margin-top:10px; margin-left:10px}
.login-form .confirm-type li:first-child{display:flex}
.login-form .confirm-type .confirm-btn{
	display:block;
	width:100%; height:50px; margin-top:40px; padding:2px;
	font-weight:300; font-size:15px; letter-spacing:0; border:0; text-align:center; color:#5629ee;
	background-image:linear-gradient(#fff, #fff), linear-gradient(to right, #5629ee 0%,  #be52f2 100%);
	background-origin:border-box;
	background-clip:content-box, border-box;
	border-radius:100px; cursor:pointer; outline:none; box-sizing:border-box}
.login-form .confirm-type .confirm-btn:hover{background:linear-gradient(-43deg, #be52f2, #5629ee); color:#fff}


/*.login-form .confirm-type .confirm-btn i{margin-top:-3px; margin-right:2px; font-size:18px; vertical-align:middle}
.login-form .confirm-type li.kakao .confirm-btn{background-color:#fee500; color:#303030}
.login-form .confirm-type li.kakao .confirm-btn:hover{background-color:#feea33}
.login-form .confirm-type li.naver .confirm-btn{background-color:#1ec700}
.login-form .confirm-type li.naver .confirm-btn:hover{background-color:#4bd233}
.login-form .confirm-type li.kakao .confirm-btn i{font-size:20px}
.login-form .confirm-type li.naver .confirm-btn i{font-size:18px}*/

.login-form .id-save{display:flex; align-items:center; justify-content:space-between; margin:20px 0 0 10px;}
.login-form .id-save .ImageCheckbox{color:#707070}


.login-help .help-list:after{content:''; display:block; clear:both}
.login-help .help-list li{position:relative; float:left; width:40%}
.login-help .help-list li:first-child{width:60%}
.login-help .help-list li .inner-box a{display:block; padding:20px 10px; text-align:left;}
.login-help .help-list li .inner-box a span{font-size:14px; font-weight:normal; color:#555; letter-spacing:-0.5px}
.login-help .help-list li .inner-box a span:hover{border-bottom:1px solid #5629ee; color:#5629ee;}
.login-help .lang_form{position:relative; float:right; top:18px; width:125px; z-index:1000}
.login-help .lang_form .choice_lang{position:relative; min-width:100px; padding:0 25px 0 30px; cursor:pointer; box-sizing:border-box; transition:all .20s ease}
.login-help .lang_form .choice_lang:after{content:'\e942'; position:absolute; right:0; top:3px; width:20px; height:20px; font-family:'xeicon'; font-size:18px; color:#aaa}
.login-help .lang_form .choice_lang > a{display:flex; align-items:center; height:25px; line-height:25px; font-size:14px; color:#505050; letter-spacing:-0.2px}
.login-help .lang_form .choice_lang  img{position:relative; margin-right:5px; border:1px solid #e8e8e8; vertical-align:middle}
.login-help .lang_form .choice_lang > a img{display:none;}
.login-help .lang_form .lang_layerpop{display:none; position:absolute; right:-1px; margin-top:5px; width:100px; background:#fff; border-radius:10px; box-sizing:border-box; box-shadow:2px 4px 12px 3px rgba(0, 0, 0, 0.08); box-sizing:content-box}
.login-help .lang_form .lang_layerpop li{width:100%; padding:8px 12px; list-style:none; cursor:pointer}
.login-help .lang_form .lang_layerpop li:hover{background:#f4f4f4;}
.login-help .lang_form .lang_layerpop li:hover a{color:#5629ee;}
.login-help .lang_form .lang_layerpop li a{display:flex; align-items:center; height:20px; line-height:20px; font-size:14px; color:#555; letter-spacing:-0.2px}
.login-help .lang_form .lang_layerpop li a img{display:none;}
.tablet-view .login-form .Button{position: absolute; right: 16px; top:16px}
.tablet-view .lang_form{position:relative; float:right; top:13px; width:125px; z-index:1000}
.tablet-view .lang_form .choice_lang{position:relative; min-width:100px; padding:0 25px 0 30px; cursor:pointer; box-sizing:border-box; transition:all .20s ease}
.tablet-view .lang_form .choice_lang:after{content:'\e942'; position:absolute; right:0; top:3px; width:20px; height:20px; font-family:'xeicon'; font-size:18px; color:#aaa}
.tablet-view .lang_form .choice_lang > a{display:flex; align-items:center; height:25px; line-height:25px; font-size:14px; color:#505050; letter-spacing:-0.2px}
.tablet-view .lang_form .choice_lang img{position:relative; margin-right:5px; border:1px solid #e8e8e8; vertical-align:middle}
.tablet-view .lang_form .choice_lang > a img{display:none;}
.tablet-view .lang_form .lang_layerpop{display:none; position:absolute; right:-1px; margin-top:5px; width:100px; background:#fff; border-radius:10px; box-sizing:border-box; box-shadow:2px 4px 12px 3px rgba(0, 0, 0, 0.08); box-sizing:content-box}
.tablet-view .lang_form .lang_layerpop li{width:100%; padding:8px 12px; list-style:none; cursor:pointer}
.tablet-view .lang_form .lang_layerpop li:hover{background:#f4f4f4;}
.tablet-view .lang_form .lang_layerpop li:hover a{color:#5629ee;}
.tablet-view .lang_form .lang_layerpop li a{display:flex; align-items:center; height:20px; line-height:20px; font-size:14px; color:#555; letter-spacing:-0.2px}
.tablet-view .lang_form .lang_layerpop li a img{display:none;}
.tablet-view .toggle-area{display:flex; justify-content:center; width: 100%; padding-top:24px}
.tablet-view .toggle-area .pc-toggle{display:flex; justify-content:center; align-items:center; gap:4px; background: transparent; border: 0; cursor: pointer; color:#555; letter-spacing: -0.6px; font-size: 14px}
.tablet-view .toggle-area .pc-toggle i{font-size: 17px}
.tablet-view .toggle-area .pc-toggle:hover{color:#5629ee;}
.tablet-view .gate-login-footer{padding-top: 16px}
.tablet-view .gate-login-footer .copyright{font-size: 13px}
.login-help .infoTxt01{display:flex; flex-direction:column; line-height:2; text-align:center; font-size: 13px; color:#999;}
.login-help .infoTxt01 a span{font-size:15px; font-weight:300; color:#5629ee; letter-spacing:-0.5px}
.login-help .infoTxt01 a span:hover{border-bottom:1px solid #5629ee;}


/* error_capslock */
.login-form .confirm-type li.id_cont_wrap{justify-content:space-between; align-items:center}
.login-form .confirm-type li.id_cont_wrap .error_capslock p{color:red; margin:20px 0 0 10px; font-size:13px}


/*.login-help .lang_form .lang_layerpop li a img{position:relative; margin-right:5px; border:1px solid #e8e8e8; vertical-align:middle}*/
.guest-or{margin:40px 0px; font-size: 13px; color:#555}
.guest-or::before{content:""; display:inline-block; width:100%; max-width: 200px; height:1px; margin-right: 30px; background:#d3d3d3; vertical-align:middle;}
.guest-or::after{content:""; display:inline-block; width:100%; max-width: 200px; height:1px; margin-left: 30px; background:#d3d3d3; vertical-align:middle;}

 

/* .login_download{margin-top:20px}
.login_download a{display:block; padding:18px 8px; background:#1e3656; background:-webkit-linear-gradient(310deg, #9b38e7, #3851e7, #3dc1cc); background:-moz-linear-gradient(310deg, #9b38e7, #3851e7, #3dc1cc); background:linear-gradient(310deg, #9b38e7, #3851e7, #3dc1cc); text-align:center; border-radius:3px; transition:all .20s ease}
.login_download a span{font-size:15px; font-weight:300; color:#fff; letter-spacing:-0.5px}
.login_download a i{margin-top:-3px; margin-right:2px; font-size:18px; vertical-align:middle}

.login_download2{margin-top:20px}
.login_download2 a{display:block; padding:12px 8px; background:#fff; border:1px solid #ebebeb; text-align:center; border-radius:3px; transition:all .20s ease}
.login_download2 a span{font-size:15px; font-weight:300; color:#505050; letter-spacing:-0.5px}
.login_download2 a i{margin-top:-3px; margin-right:2px; font-size:18px; vertical-align:middle} */

.login_linktok {display:flex; align-items:center; justify-content:space-between; margin-top:15px}
.login_linktok .linktok-install-guide{display:block; font-size:14px; font-weight:normal; color:#808080; letter-spacing:-0.5px}
.login_linktok .linktok-install-guide i{margin-top:-3px; margin-right:2px; font-size:18px; color:#808080; vertical-align:middle}
.login_linktok .linktok-install{display:block; padding:10px 18px; background-color:rgba(1,150,250,.08); border:.5px solid rgba(1,150,250,.2); font-size:14px; font-weight:normal; color:#0196fa; letter-spacing:-0.5px; border-radius:120px; box-shadow:2px 4px 12px 0 rgb(118 145 148 / 8%); transition:all .20s ease}
.login_linktok .linktok-install i{margin-top:-3px; margin-right:2px; font-size:18px; color:#0196fa; vertical-align:middle}

.gate-login-footer{display:flex; align-items:center; justify-content:center; padding-top:30px;}
.gate-login-footer .copyright{line-height:135%; font-size:14px; color:#aaaaaa; letter-spacing:0;}