@charset "utf-8";

/* LAYOUT */
body { -webkit-text-size-adjust: 100%; }
#wrap { overflow: hidden; margin: 0 auto; -webkit-overflow-scrolling : touch; }
#header { background-color: #102e70; }
#container { }


/* HEADER */
#header .outer { position: relative; width: 900px; margin: 0 auto; }
#header h1 { margin: 0; padding: 0; text-align: left; line-height: 0; }
#header .menu { position: absolute; right: 10px; top: 28px; }
#header .menu ul { margin:0; padding:0; }
#header .menu li { list-style:none; float:left; margin-left:15px; font-size: 15px; line-height: 20px; color: #e1eafe; }
#header .menu a,
#header .menu a:hover { display: block; font-size: 15px; line-height: 20px; color: #e1eafe; }
#header .menu:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */}


/* CONTAINER - 회원가입 */
#join { position: relative; width: 760px; margin: 0 auto; }
#join .info { margin: 65px 0 0; font-weight: normal; font-size: 16px; line-height: 26px; color: #102e70; letter-spacing: -0.5px; text-align: right; }
#join h2 { height: 52px; margin: 15px 0 0; padding: 0 30px; font-weight: normal; font-size: 16px; line-height: 52px; color: #ffffff; letter-spacing: -0.5px; text-align: left; background-color: #626262; }

#join .list { position: relative; }
#join .list ul { margin: 0; padding: 0; }
#join .list li { position: relative; list-style: none; margin: 0; padding: 8px 0; border-bottom: 1px solid #d9d9d9; font-size: 0; }
#join .list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */}

#join .list .subject { position: absolute; left: 20px; top: 10px; padding-left: 27px; background: url("../images/member/dot.png") no-repeat left; font-size: 15px; line-height: 40px; color: #444444; letter-spacing: -0.5px; text-align: left; }
#join .list .info { margin: 0 20px 0 196px; background-color: #f4f4f4; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }
#join .list .info input { width: 100%; height: 40px; padding: 0 10px; font-weight: normal; font-size: 15px; line-height: 40px; color: #555555; letter-spacing: 0; text-align: left; border: none; background-color: transparent; outline: none; }

#join .submit { width: 470px; margin: 40px auto 0; background-color: #102e70; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }
#join .submit input { cursor: pointer; width: 100%; height: 58px; font-weight: bold; font-size: 16px; line-height: 58px; color: #ffffff; letter-spacing: 0; text-align: center; border: none; outline: none; background-color: transparent; }

#join .id_check { position: absolute; right: 20px; bottom: 80px; font-size: 12px; font-weight: normal; line-height: 16px; color: #0c80e3; letter-spacing: 0; text-align: right; }



/* CONTAINER - 로그인 */
#login { overflow: hidden; display: table; position: relative; width: 100%; height: 100vh; }

#login .login_outer { display: table-cell; vertical-align: middle; }

#login .logo { position: relative; width: 520px; margin: 0 auto; padding: 0 40px 19px; text-align: left; line-height: 0; }

#login .logo .logo_info { position:absolute; right:20px; bottom:15px; font-weight: normal; font-size: 15px; line-height: 24px; color: #ffffff; letter-spacing: 0; text-align: right; }

#login .login { position: relative; width: 520px; margin: 0 auto 50px; padding: 60px 55px 60px; background-color: #fff; -webkit-box-show:0 0 35px rgba(0, 0, 0, 0.2); -moz-box-shadow:0 0 35px rgba(0, 0, 0, 0.2); box-shadow:0 0 35px rgba(0, 0, 0, 0.2); -webkit-border-radius:40px; -moz-border-radius:40px; border-radius:40px; }

#login .login .login_info { font-weight: normal; font-size: 15px; line-height: 24px; color: #777777; letter-spacing: 0; text-align: left;}

#login .login .field {}
#login .login .field ul { margin: 0; padding: 0; }
#login .login .field li { position: relative; list-style: none; margin: 10px 0 0; background-color: #f2f2f2; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#login .login .field li:first-child { margin: 0; }
#login .login .field li.v1 { display: none; background-color: #fff; font-weight: normal; font-size: 13px; line-height: 24px; color: #777777; letter-spacing: 0; text-align: left; }
#login .login .field .input { width: 100%; height: 58px; padding: 0 25px; font-size: 16px; line-height: 58px; color: #777777; letter-spacing: 0; border: none; outline: none; background-color: transparent; }
#login .login .field .input::-webkit-input-placeholder { font-size: 16px; color:#999999; }
#login .login .field .input:moz-placeholder { font-size: 16px; color:#999999; }
#login .login .field .input::-moz-placeholder { font-size: 16px; color:#999999; }
#login .login .field .input:-ms-input-placeholder { font-size: 16px; color:#999999; }

#login .login .timer { display: none; position: absolute; right: 60px; top: 5px; font-size: 13px; font-weight: normal; line-height: 16px; color: #444; letter-spacing: 0; text-align: right; }
#login .login .timer input { width: 50px; padding: 0; font-size: 16px; font-weight: normal; line-height: 58px; color: #777777; letter-spacing: 0; text-align: right; border: none; outline: none; background-color: transparent; }

#login .login .field:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */}

#login .login .field .btn_option { position: absolute; width: 140px; right: 10px; top: 10px; background-color: #8e8e8e; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
#login .login .field .btn_option a,
#login .login .field .btn_option a:hover { display: block; font-weight: normal; font-size: 14px; line-height: 38px; color: #ffffff; letter-spacing: 0; text-align: center; }

#login .login .option { position: relative; height: 10px; margin: 5px 0 0; font-size: 0; }
#login .login .option .save { display: inline-block; cursor: pointer; }
#login .login .option .save .checkbox { display: inline-block; vertical-align: middle; width: 25px; height: 25px; background: url("../images/member/icon_check.png") no-repeat; }
#login .login .option .save .checkbox.on { background: url("../images/member/icon_check_on.png") no-repeat; }
#login .login .option .save .checkbox_text { display: inline-block; vertical-align: middle; margin: 0 0 0 10px; font-size: 15px; line-height: 25px; color: #333333; letter-spacing: -0.5px; }

#login .login .option .btn_password { position: absolute; right: 0; top: 0; border-bottom:1px solid #333333; }
#login .login .option .btn_password a,
#login .login .option .btn_password a:hover { display: block; font-size: 15px; line-height: 25px; color: #333333; letter-spacing: -0.5px; }

#login .login .new_authdiv { position: relative; margin: 25px 0 0; font-size: 0; }
#login .login .new_authdiv .new_authdiv_v1 { display: none; font-weight: normal; font-size: 15px; line-height: 24px; color: #555; letter-spacing: 0; text-align: left; }


#login .login .btn_login { margin: 30px 0 0; background-color: #102e70; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#login .login .btn_login a,
#login .login .btn_login a:hover { display: block; font-size: 16px; line-height: 58px; color: #ffffff; letter-spacing: 0; text-align: center; }
#login .login .btn_login input { cursor: pointer; display: block; width: 100%; height: 58px; font-size: 16px; line-height: 58px; color: #ffffff; letter-spacing: 0; text-align: center; background-color: transparent; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: none; outline: none; }

#login .login .btn_verify { margin: 30px 0 0; background-color: #8e8e8e; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#login .login .btn_verify a,
#login .login .btn_verify a:hover { display: block; font-size: 16px; line-height: 58px; color: #ffffff; letter-spacing: 0; text-align: center; }

#login .login .login_option { margin: 15px 0 0; font-weight: normal; font-size: 14.5px; line-height: 22px; color: #555; letter-spacing:0; }


#popup_bg { position:fixed; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.6); z-index:999999; display:none; }
#popup_ing { position: absolute; left: 0; right: 0; top: 50%; margin-top: -10px; font-size: 16px; font-weight: bold; line-height: 20px; color: #ffffff; letter-spacing: 0; text-align: center; z-index:999999; display:none; }



/* CONTAINER - 로그인 - 빈페이지 */
#empty { overflow: hidden; display: table; position: relative; width: 100%; height: 100vh; }
#empty .empty_outer { display: table-cell; vertical-align: middle; }
#empty .empty_outer .empty_inner { width: 500px; margin: 0 auto; padding: 25px 40px; background-color: #fff; -webkit-box-show:0 0 35px rgba(0, 0, 0, 0.2); -moz-box-shadow:0 0 35px rgba(0, 0, 0, 0.2); box-shadow:0 0 35px rgba(0, 0, 0, 0.2); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; }
#empty .empty_outer .empty_inner .logo { line-height:0; }
#empty .empty_outer .empty_inner .message { margin: 15px 0 0; font-weight: normal; font-size: 14.5px; line-height: 22px; color: #555; letter-spacing:0; }





/* 평가 메인 */
#appraisal { position: relative; width:900px; margin:40px auto; }

#appraisal .appraisal_info { font-size:15px; line-height: 30px; color: #102e70; text-align:center; word-break: keep-all; }
#appraisal .appraisal_info i { display:block; }

#appraisal .appraisal_thum { margin-top: 30px; text-align:center; }

#appraisal .appraisal_list { margin-top: 40px; display:flex; flex-direction:column; gap:20px; }
#appraisal .appraisal_list .list_item { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 30px; background-color:#f7f7f7; border:1px solid #ececec; border-radius:10px; }
#appraisal .appraisal_list .list_item .subject { font-size:15px; font-weight:bold; }
#appraisal .appraisal_list .list_item .appraisal_btn { cursor: pointer; width: 160px; background-color:#9d9d9d; border-radius:10px; }
#appraisal .appraisal_list .list_item .appraisal_btn a,
#appraisal .appraisal_list .list_item .appraisal_btn a:hover { display: block; padding: 10px 0; font-size: 14px; color: #ffffff; text-align: center; }
#appraisal .appraisal_list .list_item .btn_option { position:absolute; right: 160px; top: 20px; padding: 2px 6px; font-size: 11px; color: #fff; background-color: #102e70; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }


#appraisal .btn_area { display: flex; justify-content: center; gap: 10px; margin: 50px 0 0; }
#appraisal .btn_area .btn_list { background-color: #102e70; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#appraisal .btn_area .btn_list a,
#appraisal .btn_area .btn_list a:hover { display: block; padding: 0 50px; font-size: 15px; font-weight: bold; line-height: 50px; color: #ffffff; letter-spacing: 0; text-align: center; }
#appraisal .btn_area .btn_list input { cursor: pointer; display: block; width: 100%; height: 50px; padding: 0 50px; font-size: 15px; font-weight: bold; line-height: 50px; color: #ffffff; letter-spacing: 0; text-align: center; background-color: transparent; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: none; outline: none; }

#appraisal .btn_area .btn_list1 { background-color: #102e70; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#appraisal .btn_area .btn_list1 a,
#appraisal .btn_area .btn_list1 a:hover { display: block; padding: 0 50px; font-size: 15px; font-weight: bold; line-height: 50px; color: #ffffff; letter-spacing: 0; text-align: center; }
#appraisal .btn_area .btn_list1 input { cursor: pointer; display: block; width: 100%; height: 50px; padding: 0 50px; font-size: 15px; font-weight: bold; line-height: 50px; color: #ffffff; letter-spacing: 0; text-align: center; background-color: transparent; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: none; outline: none; }

#appraisal .btn_area .btn_list2 { background-color: #6b6b6b; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#appraisal .btn_area .btn_list2 a,
#appraisal .btn_area .btn_list2 a:hover { display: block; padding: 0 50px; font-size: 15px; font-weight: bold; line-height: 50px; color: #ffffff; letter-spacing: 0; text-align: center; }
#appraisal .btn_area .btn_list2 input { cursor: pointer; display: block; width: 100%; height: 50px; padding: 0 50px; font-size: 15px; font-weight: bold; line-height: 50px; color: #ffffff; letter-spacing: 0; text-align: center; background-color: transparent; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: none; outline: none; }


#appraisal .appraisal { display:flex; flex-direction:column; gap:5px }
#appraisal .appraisal .depth { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 40px 0 20px 10px; padding: 15px 30px; background-color:#f7f7f7; border:1px solid #ececec; border-radius:10px; }
#appraisal .appraisal .depth.v1 { margin: 0; padding: 3px 30px 3px 60px; background-color:#fff; border:none; }
#appraisal .appraisal .depth.v2 { margin: 0; padding: 3px 30px 3px 90px; background-color:#fff; border:none; }
#appraisal .appraisal .depth .subject { position: relative; font-size:15px; font-weight:bold; }
#appraisal .appraisal .depth .subject.v1 { font-weight:normal; }
#appraisal .appraisal .depth .subject span { font-size:18px; font-weight: bold; color:red; }

#appraisal .appraisal .depth .company_name { display: inline-block; font-size:15px; font-weight:bold; text-align:left; color:#102e70; }
#appraisal .appraisal .depth .info { display: flex; align-items: center; gap:40px; font-size:15px; color:#555555; }
#appraisal .appraisal .depth .info span { cursor: pointer; font-size:15px; color:#555555; }
#appraisal .appraisal .depth .info span input { cursor: pointer; }
#appraisal .appraisal .depth .info span label { cursor: pointer; }

#appraisal .appraisal .depth .info select { width: 140px; height: 34px; padding: 0 0 0 20px; font-size: 15px; line-height: 34px; color: #777777; letter-spacing: 0; border: none; outline: none; background-color: #f2f2f2; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
#appraisal .appraisal .depth.v3 .info select { background-color: #fff; }

#appraisal .appraisal .depth.over_type { padding: 7px 30px; background-color:#e6eaf4; border:1px solid #bfc9df; }


#appraisal .appraisal .comment { height:200px; margin:0 10px 0 20px; }
#appraisal .appraisal .comment textarea { width:100%; height:100%; padding: 10px 15px; font-size: 14px; line-height: 30px; color: #333333; border: 1px solid #dfdfdf; resize:none; }

#appraisal .appraisal .counterparty { margin-top: -10px; padding: 0 10px 20px; font-size:15px; line-height: 16px; font-style: italic; text-align:right; }
#appraisal .appraisal .counterparty span { font-size:18px; font-weight: bold; color:red; }







@media screen and (max-width:640px) {

	/* LAYOUT */
	#header { min-width: 320px; }
	#container { min-width: 320px; }

	/* HEADER */
	#header .outer { width: auto; }
	#header h1 { padding-left: 10px; }
	#header h1 img { height: 60px; }

	#header .menu { top: 20px; font-size: 15px; }
	#header .menu a,
	#header .menu a:hover { font-size: 15px; }


	/* CONTAINER - 회원가입 */
	#join { width: auto; margin: 0 3.5%; }
	#join .info { margin: 50px 0 0; font-size: 15px; }
	#join h2 { height: 46px; margin: 10px 0 0; padding: 0 20px; font-size: 15px; line-height: 46px; }

	#join .submit { width: auto; margin: 40px auto 0; }
	#join .list .info { margin: 0 10px 0 186px; }
	#join .submit input { height: 50px; font-size: 15px; line-height: 50px; }


	/* LOGIN */
	#login .logo { width: auto; margin: 0 4%; padding: 0 8% 19px; }
	#login .logo .logo_info { position:relative; right:auto; bottom:auto; padding: 15px 0 0; text-align: left; }


	#login .login { width: auto; margin: 0 4% 100px; padding: 50px 8%; }
	#login .login .field .input { height: 46px; padding: 0 20px; font-size: 15px; line-height: 46px; }
	#login .login .field .input::-webkit-input-placeholder { font-size: 15px; }
	#login .login .field .input:moz-placeholder { font-size: 15px; }
	#login .login .field .input::-moz-placeholder { font-size: 15px; }
	#login .login .field .input:-ms-input-placeholder { font-size: 15px; }

	#login .login .field .btn_option { right: 5px; top: 5px; }
	#login .login .field .btn_option a,
	#login .login .field .btn_option a:hover { font-size: 13px; line-height: 36px; }

	#login .login .option .save .checkbox { width: 20px; height: 20px; background-size: cover; }
	#login .login .option .save .checkbox.on { background-size: cover; }
	#login .login .option .save .checkbox_text { margin: 0 0 0 8px; line-height: 20px; }

	#login .login .btn_login { margin: 35px 0 0; }
	#login .login .btn_login a,
	#login .login .btn_login a:hover { line-height: 50px; }
	
	#login .login .btn_verify { margin: 35px 0 0; }
	#login .login .btn_verify a,
	#login .login .btn_verify a:hover { line-height: 50px; }


	/* CONTAINER - 로그인 - 빈페이지 */
	#empty .empty_outer .empty_inner { width: auto; margin: 0 4%; }


	/* 평가 메인 */
	#appraisal { width:auto; margin:80px 3.5%; }

	#appraisal .appraisal_info i { display:none; }
	#appraisal .appraisal_thum img { width:100%; }

	#appraisal .appraisal_list .list_item { padding: 10px 15px; }
	#appraisal .appraisal_list .list_item .btn_option { right: 150px; }

	#appraisal .btn_area { gap: 6px; margin: 30px 0 0; }

	#appraisal .btn_area .btn_list1 a,
	#appraisal .btn_area .btn_list1 a:hover { padding: 0 20px; font-size: 14px; line-height:40px; }
	#appraisal .btn_area .btn_list1 input { height: 40px; padding: 0 20px; font-size: 14px; line-height: 40px; }

	#appraisal .btn_area .btn_list2 a,
	#appraisal .btn_area .btn_list2 a:hover { padding: 0 20px; font-size: 14px; line-height:40px; }
	#appraisal .btn_area .btn_list2 input { height: 40px; padding: 0 20px; font-size: 14px; line-height: 40px; }


	#appraisal .appraisal .depth { flex-direction:column; align-items: start; margin-bottom: 10px; padding: 15px 20px; }
	#appraisal .appraisal .depth.v1 { margin-bottom: 0; padding: 5px 10px 5px 25px; background-color:#fff; border:none; }
	#appraisal .appraisal .depth.v2 { margin-bottom: 0; padding: 5px 10px 5px 45px; background-color:#fff; border:none; }
	#appraisal .appraisal .depth .subject { font-size:14px; }
	#appraisal .appraisal .depth .company_name { position:relative; margin-top: 10px; }
	#appraisal .appraisal .depth .info { width:95%; margin: 10px 0 0; padding: 0; gap:20px; font-size:14px; }
	#appraisal .appraisal .depth .info span { font-size:14px; }
	#appraisal .appraisal .depth .info select { width: 100%; }

	#appraisal .appraisal .comment { margin:0 0 0 10px; }

	#appraisal .appraisal .counterparty { margin-top: 0; padding: 0 15px 20px; text-align:left; }
	#appraisal .appraisal .counterparty span { font-size:16px; }

}