@charset "utf-8";

/* /////////////// jinstar /////////////// */

body{ background:url('../images/member/login_pt_bg.jpg') 0% 0% repeat;}
#contants{ padding:0; width:100%; height:auto; min-height:auto;}

/* login */
.login_wrap{ width:100%; height:100%; overflow-y:auto; overflow-x:hidden; padding:0 0; display:flex;}

.login_img_wrap{ height:100%; width:50%; background:url('../images/member/login_main_img.png') 50% 50% no-repeat; background-size:cover;}

.login_box_wrap{ height:100%; width:50%; display:flex; align-items:flex-end;}

.login_box{ width:90%; max-width:670px; margin:0 auto;}
.login_box h3{ text-align:center; font-weight:800; margin-bottom:8px; font-size:3.1em;}
.login_box h4{ text-align:center; font-weight:300; margin-bottom:23px; font-size:1.8em;}
.login_box h4 b{ display:inline-block; padding-left:17px; font-size:1em; position:relative; font-weight:600;}
.login_box h4 b:after{ content:''; position:absolute; left:3px; top:5px; width:2px; height:23px; background-color:var(--subcolor);}
.login_box .login_form .input_menu{ overflow:hidden; margin-top:10px;}
.login_box .login_form .input_menu p{ float:left;}
.login_box .login_form .input_menu p input[type="checkbox"]{ margin-right:5px;}
.login_box .login_form .input_menu p label{ color:var(--black); font-size:1.2em; display:inline-block; vertical-align:middle; cursor:pointer;}
.login_box .login_form .input_menu ul{ float:right;}
.login_box .login_form .input_menu ul li{ display:inline-block; vertical-align:middle; margin-left:15px; position:relative;}
.login_box .login_form .input_menu ul li:after{ content:''; position:absolute; left:-10px; top:3px; width:1px; height:16px; background-color:var(--subcolor);}
.login_box .login_form .input_menu ul li:first-child{ margin-left:0;}
.login_box .login_form .input_menu ul li:first-child:after{ display:none;}
.login_box .login_form .input_menu ul li a{ color:var(--black); font-size:1.2em; font-weight:500;}

.input_box{ display:flex; gap:10px;}
.input_box.input_find_confirm{ display:block;}
.input_box.input_find_reset{ display:block;}
.input_box > div{ width:calc(100% - 176px);}
.input_box.input_login > div input:first-child{ margin-top:0;}
.input_box.input_find > div input:first-child{ margin-top:0;}
.input_box input[type="text"],
.input_box input[type="password"],
.input_box input[type="email"],
.input_box input[type="tel"]{ width:100%; margin-top:10px; border:1px solid var(--bordercolor); line-height:55px; height:55px; font-size:1.2em; padding-left:20px;}
.input_box > button{ width:176px; font-weight:500; border:0; display:block; font-size:1.5em; background-color:var(--subcolor); color:var(--white);}
.input_box > button:hover{ background-color:var(--black);}

.login_logo_box{ padding:150px 20px 40px; text-align:center;}

/* find */
.find_wrap{ }

.find_box{ max-width:600px; padding:40px 20px 20px; margin:0 auto;}
.find_box .find_title{ margin-bottom:50px; text-align:center;}
.find_box .find_title h2{ text-align:center; margin-bottom:20px;}
.find_box .find_title h2 img{ max-height:35px;}
.find_box .find_title h3{ text-align:center;}
.find_box .find_title h4{ text-align:center;}
.find_box .find_form_wrap{ background-color:var(--white); border:1px solid var(--bordercolor); padding:20px;}
.find_box .find_form_wrap .find_form{ }
.find_box .find_form_wrap .find_form h5{ font-weight:500; margin-bottom:10px;}
.find_box .find_form_wrap .find_form .how_find{ margin-bottom:20px;}
.find_box .find_form_wrap .find_form .how_find p{ display:inline-block; vertical-align:middle; margin-right:15px;}
.find_box .find_form_wrap .find_form .how_find p input{ margin-right:5px;}
.find_box .find_form_wrap .find_form .find_input{ margin-top:20px;}
.find_box .find_form_wrap .find_form .find_input p{ margin-bottom:5px; display:flex; align-items:center;}
.find_box .find_form_wrap .find_form .find_input p span{ display:inline-block; vertical-align:middle; width:80px;}
.find_box .find_form_wrap .find_form .find_input p input{ width:calc(100% - 80px);}
.find_box .find_form_wrap .btns{ margin-bottom:0; margin-top:30px;}

.find_compl{ padding-top:30px;}
.find_compl h6{ text-align:center;}
.find_compl h6 b{ display:inline-block; vertical-align:middle; position:relative; z-index:1;}
.find_compl h6 b:after{ content:''; position:absolute; background-color:rgba(255,255,0,0.4); left:-5px; right:-5px; bottom:0px; height:10px; z-index:-1;}

.re_try_certifi a{ text-decoration:underline;}

/* regi */
.regi_wrap{ }
.regi_box{ max-width:900px; padding:40px 20px 20px; margin:0 auto;}
.regi_box .regi_title{ margin-bottom:50px; text-align:center;}
.regi_box .regi_title h2{ text-align:center; margin-bottom:20px;}
.regi_box .regi_title h3{ text-align:center; margin-bottom:5px;}
.regi_box .regi_title h4{ text-align:center;}
.regi_box .regi_title b{ font-size:1em;}
.regi_box .regi_title .compl_icon{ margin:30px 0 20px;}
.regi_box .regi_title .compl_icon i{ font-size:5em; color:var(--subcolor);}
.regi_box .regi_form_wrap{ background-color:var(--white); border:1px solid var(--bordercolor); padding:20px;}
.regi_box .regi_form_wrap .regi_form{ margin-top:30px; padding-top:30px;}
.regi_box .regi_form_wrap .regi_form:first-child{ margin-top:0; padding-top:0; border-top:0;}
.regi_box .regi_form_wrap .regi_form h5{ font-weight:500; margin-bottom:10px;}
.regi_box .regi_form_wrap .regi_form textarea{ height:200px; font-size:0.9em; margin-bottom:10px;}
.regi_box .regi_form_wrap .regi_form .list_table{ margin-bottom:10px;}
.regi_box .regi_form_wrap .regi_form .agr_chkbox{ padding:10px; background-color:var(--wgraybgcolor);}
.regi_box .regi_form_wrap .regi_form .agr_chkbox input{ margin-right:5px;}
.regi_box .regi_form_wrap .btns{ margin-bottom:0; margin-top:30px;}

@media (min-width:1920px){
	.login_box_wrap{ align-items:center;}
	.login_box{ max-width:1000px;}

	.input_box input[type="text"],
	.input_box input[type="password"],
	.input_box input[type="email"],
	.input_box input[type="tel"]{ height:70px; line-height:70px;}
}

@media (max-width:1199px){
	.login_box h3{ font-size:2.4em;}
	.login_box h4{ font-size:1.3em;}
	.login_box h4 b:after{ height:20px; left:5px; top:3px;}
}

@media (max-width:959px){
	.login_box{ display:block;}
	.input_box > div{ width:calc(100% - 120px);}
	.input_box > button{ width:120px; font-size:1.2em;}

	.login_box h3{ font-size:2.3em;}
	.login_box h4{ font-size:1.3em;}
	.login_box h4 b:after{ height:17px; left:5px; top:3px;}
}

@media (max-width:767px){
	.login_wrap{ display:block;}
	.login_img_wrap{ display:none;}
	.login_box_wrap{ align-items:center; width:100%; background:url('../images/member/login_main_img.png') 50% -100px no-repeat; background-size:600px auto;}

	.login_box{ }
	.login_box h3{ font-size:1.8em;}
	.login_box h4{ font-size:1em;}
	.login_box h4 b:after{ height:12px; left:5px; top:3px; width:1px;}

	.input_box{ display:block;}
	.input_box > div{ width:100%;}
	.input_box input[type="text"],
	.input_box input[type="password"],
	.input_box input[type="email"],
	.input_box input[type="tel"]{ line-height:35px; height:35px; font-size:0.9em;}

	.login_box .login_form form{ display:block; padding:20px; background-color:rgba(255,255,255,0.8);}

	.input_box > button{ font-size:0.9em; width:100%; display:block; height:40px; line-height:40px; margin-top:10px;}

	.login_box .login_form .input_menu p label{ font-size:0.9em;}
	.login_box .login_form .input_menu ul li a{ font-size:0.9em;}
	.login_box .login_form .input_menu ul li:after{ height:13px;}

	.login_logo_box{ padding:40px 0 0;}
}

@media (max-width:500px){
	.login_box_wrap{ background:url('../images/member/login_main_img.png') 50% -50px no-repeat; background-size:400px auto;}
}

@media (max-height:500px){
	.login_box{ padding-bottom:30px;}
	.login_logo_box{ display:none;}
}