@charset "UTF-8";

/* Variable */
:root{
    --background:#fff;
    --logo-hand:#C01E27;
    --logo-text:#222;
    --head-title:#222;
    --sub-title:#444;

    --text-white:#fff;
    --text-gray:#999;
    --text-normal:#666;
    --text-dark:#444;
    --text-black:#222;
    --text-red:#E12547;

    --input:#444;

    --button-red:#E12547;
    --button-silver:#f9f9f9;
    --button-gray:#999;
    --button-dark:#666;
    --button-white:#fff;
    --button-cancel:#e0e0e0;
    --button-dblue:#4E5365;
    --button-bg-none:transparent;

    --panel-bg:#f9f9f9;
    --panel-silver:#e9e9e9;
    --panel-line-gray:#e9e9e9;
    --panel-line-red:#E12547;
    --panel-shadow:rgba(0,0,0,0.1);

    --modal-dim:rgba(0,0,0,0.5);
    --modal-bg-white:#fff;
}


html,body{width:100%; height:100%; background-color:var(--background)}
html,body,ul,ol,img,div,span,iframe,a,p{margin:0; padding:0; border:0; outline:none}
html,body,ul,ol,li,img,div,span,iframe,a,button,p,input,textarea,select,i{
    font-family:AppleSDGothicNeo-Regular,'Roboto','Noto Sans KR',dotum,'돋움','Apple SD Gothic Neo', sans-serif;
    font-weight:400; font-style:normal; font-size:14px; color:var(--text-normal); word-break:keep-all; letter-spacing:-.25px;
}
h1,h2,h3,h4,h5,h6{font-style:normal; font-weight:400; padding:0; margin:0}
a{text-decoration:none; color:var(--text-normal)}
a:hover,a:active,a:focus{text-decoration:none}
img{border:none; width:100%; height:auto}
ul,ol{list-style:none}
iframe,object,video,embed{position:relative; top:0; left:0; max-width:100%}
select{
    /*ios대응*/
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.wrap{position:relative; z-index:1; width:100%; height:100%}


/* SIGN */
.b_red{color:var(--button-red)}
.b_gray{color:var(--button-gray)}


.sign_wrap{max-width:460px; margin:120px auto; padding-bottom:50px; box-sizing:border-box}
.sign_wrap.plan_wrap{max-width:540px; margin-top:30px}
.sign_wrap.plan_wrap .sign_title{margin-bottom:30px}
.sign_wrap input{color:var(--input)}
.sign_header>div{max-width:1200px; margin:0 auto; padding-top:20px}
.sign_header div.logo{width: 15%}
.sign_header .logo svg{cursor:pointer}
.sign_header .logo svg .logo_hand{fill:var(--logo-hand)}

.sign_title{margin-bottom:50px}
.sign_title h2{text-align:center; font-weight:700; line-height:40px; letter-spacing:-1.2px; color:var(--head-title)}
.sign_title p{text-align:center; margin-top:5px}
.sign_title svg{display:block; margin:10px auto}

.sign_form>div>div{position:relative; margin-bottom:10px}
.sign_form label{display:inline-block; color:var(--text-black); margin:20px 0 10px}
.sign_form a.fr{text-decoration:underline; color:var(--text-red); margin:20px 0 10px}
.sign_form svg{position:absolute; top:17px; left:15px}
.sign_form svg.eye{top:18px; left:auto; right:15px; cursor:pointer}
.sign_form .svg-45 input{padding-left:45px; box-sizing:border-box}
.sign_form button.btn{width:auto; text-align:left; padding:0}
.sign_form button.btn span{text-decoration:underline}
.sign_form textarea{width:100%; height:150px}
.sign_form .form_del{position:absolute; z-index:1; top:10px; right:5px;  width:30px; height:30px; cursor:pointer}
.sign_form .form_del svg{position:absolute; top:6px; left:6px; fill:#b9b9b9}
.sign_form .form_del:hover{background:#e9e9e9; border-radius:6px}
.sign_form .form_del:hover svg{fill:#444}

.sign_form .required input{border-color:var(--button-red)}
.sign_form .required span.tred{display:block; font-size:12px; margin-top:5px}

.sign_form .pw_eye{position:relative}
.sign_form .pw_eye>div{position:absolute; right:10px}
.sign_form .pw_eye svg{position:relative; top:14px; left:auto; cursor:pointer}

.sign_noti{margin-top:20px; text-align:center}
.sign_noti mark{background:#444; font-weight:400; color:#fff; padding:0 5px}
.sign_noti svg{display:block; margin:10px auto}

.sign_btn{margin:30px 0 20px 0}
.sign_btn button{background:var(--button-red); color:var(--text-white); border-radius:6px}
.sign_btn button:hover{background:var(--button-red)}
.sign_btn button.btn_gray{background:var(--button-silver); color:var(--text-dark); border:1px solid #e9e9e9; border-radius:6px; margin-top:10px}

.sign_sub_btn{text-align:left; min-height:30px}
.sign_sub_btn.tac{text-align:center}
.sign_sub_btn button{background:var(--button-bg-none); padding:0; margin-top:10px; border:none; cursor:pointer}
.sign_sub_btn button span{text-decoration:underline}

.toggle-field{display:none}

.sign_wrap .checkbox{margin-bottom:10px}
.sign_wrap .checkbox label:before{content:url(../../../images/self_service/icon/icon_check.png); width:20px; height:20px; padding:0}
.sign_wrap .checkbox input:checked+label{color:inherit}
.sign_wrap .checkbox a{text-decoration:underline}

/* Find PW */
.sign_pw img{display:block; width:auto; margin:0 auto}
.sign_pw p{margin-top:50px; text-align:center; line-height:25px}


/* Join */
.join_chk{background:var(--panel-bg); text-align:center; line-height:30px; margin-bottom:30px; padding:30px 20px; border-radius:10px; box-sizing:border-box}
.join_chk span{color:var(--button-red)}
.sign_myphoto{text-align:center}
.sign_myphoto>div{display:inline-block; cursor:pointer}
.sign_myphoto a{display:inline-block}
.sign_myphoto p{margin-top:5px}
.sign_myphoto .myimg{position:relative; background:url(../../../images/self_service/sign/myphoto.png) no-repeat center; display:block; width:80px; height:80px; margin:0 auto; border-radius:50%; overflow:hidden}
.sign_myphoto .mylogo{position:relative; background:url(../../../images/self_service/sign/company_logo.png) no-repeat center; display:block; width:80px; height:80px; line-height:78px; font-size:20px; font-weight:700; color:var(--text-white); margin:0 auto; border-radius:10px; overflow:hidden}
.sign_myphoto img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)}

.sign_plan{display:flex; justify-content:space-between;}
.sign_plan li{position:relative; width:48%; text-align:center; border:1px solid var(--panel-line-gray); border-radius:20px; opacity:0.5; box-sizing:border-box}
.sign_plan li>div{display:none; position:absolute; top:10px; right:10px}
.sign_plan li.active{border:2px solid var(--panel-line-red); border-radius:20px; box-shadow:1px 3px 10px var(--panel-shadow); opacity:1; box-sizing:border-box}
.sign_plan li.active>div{display:block}
.sign_plan li a{display:block; padding:20px 15px; box-sizing:border-box}

.sign_plan span{font-size:12px; color:var(--text-gray)}
.sign_plan h4{color:var(--text-black); font-weight:700; letter-spacing:-1.3px}
.sign_plan p{color:var(--text-dark); letter-spacing:-1.3px; margin:10px 0}
.sign_plan .price{margin-top:20px}
.sign_plan .price h3{display:none; color:var(--text-black); font-weight:700; letter-spacing:-1.3px}
.sign_plan .price span{margin-left:5px}
.sign_plan .price p{margin:0}
.sign_plan p.plan_free{color:var(--text-red); font-size:16px; font-weight:700}
.sign_plan.pay_mm .price h3.p-month{display:inline-block}
.sign_plan.pay_yy .price h3.p-year{display:inline-block; color:#e12547}

.flag_p{margin-top:10px; border-top:1px solid #e9e9e9}
.flag_p p{margin-bottom:5px}
.flag_p span{display:inline-block; text-align:center; font-size:11px; color:#fff; margin:1px; padding:1px 5px; border-radius:3px}
.flag_gray{background:#999}
.flag_blue{background:#258fff}
.flag_green{background:#f24564}

.pay_toggle{display:flex; justify-content:space-between; background:#4E5365; width:300px; height:50px; margin:0 auto 30px auto; padding:2px; border-radius:25px; box-sizing:border-box}
.pay_toggle div{position:relative; width:50%; text-align:center; color:rgba(255,255,255,0.5); line-height:46px; border-radius:23px; cursor:pointer; overflow:hidden}
.pay_toggle div.active{background:#fff; color:#222}

.invite_input_left {display : inline-block; width : 28%;}
.invite_input_right {display : inline-block; width : 70%; float : right;}

/* plan 추가 */
.plan_wrap .sign_plan li a{padding:20px 0}
.plan_wrap .sign_plan li a>p{padding:0 15px}
.plan_wrap .flag_p{border:none}
.sign_point{background:#f6f6f6; text-align:left; font-size:12px; min-height:160px; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; padding:10px; box-sizing:border-box}
.sign_point>div{margin-left:10px}
.sign_point h5,.sign_point p,.sign_point span{display:inline-block; font-size:12px}
.sign_point h5{position:relative; margin-bottom:5px}
.sign_point h5:before{content:''; position:absolute; top:50%; left:-10px; background:#444; width:3px; height:3px; border-radius:50%}
.sign_point .point_flx{display:flex}
.sign_point p{width:35px; flex-shrink:0; margin:0; margin-top:3px}
.sign_point span{background:#fff; color:#666; white-space:nowrap; border:1px solid #d9d9d9; border-radius:3px; margin:2px; padding:1px 3px}


/*
 * panic369
 * indicator 관련 추가
 */
/* Loaging */
.adload{position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999999; background:rgba(0,0,0,0.5); text-align:center}
.adload>div{position:absolute; top:50%; left:50%; margin-left:-50px; margin-top:-50px; width:110px; height:110px; font-size:13px; color:#fff; line-height:110px; text-align:center;}
.adload span{
  position:absolute; z-index:1; top:50%; left:50%; margin-left:-40px; margin-top:-40px; width:80px; height:80px;
  border:6px solid transparent; border-radius:50%; border-top-color:#fff; border-bottom-color:#fff;
  animation-duration: 1.0s;
  animation-fill-mode:both;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
  animation-name: loading;
}
@keyframes loading {
  0% {
      transform-origin: center;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      transform-origin: center;
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}

/* 개발환경 */
.dev_ver{
	position:fixed; left:30px; bottom:10px;
	font-size:13px; color:#F53246;
	-webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: dev_ver;
    animation-name: dev_ver;
    z-index:99999999;
}
.dev_ver>div{font-size:13px; color:#F53246;}
.dev_ver h3{font-size:13px}

@keyframes dev_ver {
	0% {
    	opacity:0;
	}
	50% {
		opacity:1;
	}
	100% {
    	opacity:0;
	}
}