@charset "utf-8";

/* 나눔고딕 웹폰트 */
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/*setting*/
body, p, ul, ol, li, h1,h2,h3,h4,h5,h6 {
	margin:0;
	padding:0;
}

ul, ol, li {
	list-style:none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s;
}

.clear:after {
	content:"";
	display:block;
	clear:both;
	overflow:hidden;
}

body {
	overflow:hidden;
	overflow-y:auto;
	background:#f0f0f0 !important;
}

html body {
	font-family: "Nanum Gothic", Helvetica, Arial, sans-serif;
}

body .container-fluid {
	padding:0;
	margin:0 0 0 250px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
	max-width:1030px;
    transition: margin-left .5s;
	margin:15px auto;
}

select {
	border:1px solid #e9e9e9; height:23px; padding:0 0 0 10px;
	line-height:18px; color:#777; background-color:#fff; text-align:center;
	font-size:12px; font-family:Lato, "Open Sans", "NanumGothic", '돋움', "Helvetica Neue", Helvetica, Arial;
}

form .form-group label:before {
	display:block;
	width:0;
	height:0;
	margin:0;
	background:none;
}

form .form-group input.form-control {
	height:30px;
	font-size:15px;
	padding:0;
	border: 0;
    border-bottom: 1px solid #ccc;
    box-shadow: none;
    border-radius: 0;
	color:#666;
}

form .form-group input.form-control::-webkit-input-placeholder { /* Chrome */
  color: #ccc;
}

form .form-group input.form-control:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}

form .form-group input.form-control::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}

form .form-group input.form-control:-moz-placeholder { /* Firefox 4 - 18 */
  color: #ccc;
}

form .form-group input.form-control#mr_passwd {
	letter-spacing: -0.1em;
}

form .form-group input#user_id[readonly] {
	background-color:#fff;
    color: #bbb;
}

.modal-open {
	position:fixed;
	width: 100%;
}

/* login */
.login-main {
	padding:0 20px;
	max-width:460px;
	overflow-x:hidden;
}

.login-main > .row {
	margin:0;
}

.logo-sec {
	position: relative;
    max-width: 460px;
    margin:30px auto 20px;
	text-align:center;
}

.logo-sec h1 {
	font-size:28px;
	font-weight: bold;
}

.logo-sec h2 {
	font-size:16px;
	margin:13px 0 8px;
	font-weight: bold;
}

.login-box {
	position: relative;
    max-width:460px;
    margin:0 auto;
	border:1px solid #ddd;
	border-top:4px solid #9d948d;
	background:#fff;
}

.login-box form {
    margin: 0;
	padding:30px;
	border-bottom: 1px solid #ddd;
}

.login-box form .form-group {
	margin-bottom:35px;
}

.login-box form .checkbox {
	display: inline-block;
	margin:0;
}

.login-box form #submit_btn {
	width:100%;
	margin-top:25px;
	padding:12px;
	font-weight:bold;
	font-size:16px;
	color:#fff;
	border-color:#9d948d;
	background-color:#9d948d;
	border-radius:5px;
}

.login-box form #submit_btn:hover {
	-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,.1);
	box-shadow:1px 1px 3px 1px rgba(0,0,0,.1);
}

.login-box .btm-info {
	padding:10px 30px 30px 30px;
	background-color:#fafafa;
	letter-spacing: -0.04em;
}

.login-box .btm-info  p {
	font-weight:bold;
	margin:10px 0 5px 0;
}

.login-box .btm-info span {
	font-size:12px;
	color:#666;
}

.login_error {
	text-align:center;
	padding-top:2px;
}

.login_error span {
	color:#FF0000;
	font-weight:bold;
	font-size:12px;
	text-align:center;
}

.btm-fill {
	width:100%;
	text-align:center;
	font-size:11px;
	font-family:dotum, gulim;
}

.btm-fill a {
	color:#808080;
}

.btn-text {
	float: right;
	height: 20px;
	font-size:15px;
	font-weight:bold;
	color:#9d948d;
	border: 0;
    background: none;
	padding:0;
}

.btn-text:hover,
.btn-text:active {
	text-decoration:underline;
	background: #fff;
	color:#9d948d;
}

.btn-back {
	width:100%;
	text-align:center;
	font-weight:bold;
	font-size:15px;
	margin:20px 0;
}

.btn-back a {
	color:#9d948d;
}

#birth-select-list {
	overflow:hidden;
}

#birth-select-list div {
	float:left;
	font-size:12px;
}

.selectbox {
	position: relative;
	width:100%;
	border: 1px solid #999;
	z-index: 1;
}

#selectbox-right {
	float:right;
	margin-right:0%;
}

.selectbox:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 0;
	height: 0;
	margin-top: -1px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #333;
}

.selectbox label {
	position: absolute;
	top: 1px;
	left: 5px;
	padding: .7em .5em;
	color: #666;
	z-index: -1;
}

.selectbox select {
	width: 100%;
	height: auto;
	line-height: normal;
	font-family: inherit;
	padding: .8em .5em;
	border: 0;
	opacity: 0;
	filter:alpha(opacity=0);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.selectbox-sub {
	position: relative;
	width: 35%;
	border: 1px solid #999;
	z-index: 1;
}

.selectbox-sub:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 0;
	height: 0;
	margin-top: -1px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #333;
}

.selectbox-sub label {
	position: absolute;
	/*top: 1px;*/
	left: 5px;
	padding: .5em .5em;
	color: #666;
	z-index: -1;
}

.selectbox-sub select {
	width: 100%;
	height: auto;
	line-height: normal;
	font-family: inherit;
	padding: .5em .5em;
	border: 0;
	opacity: 0;
	filter:alpha(opacity=0);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.get_msg {
	margin-top:30px;
	padding:50px 0;
	text-align:center;
	width:100%;
	box-sizing:border-box;
	background:#f0f0f0;
	font-size:13px;
	letter-spacing:-0.02em;
}

.get_msg strong {
	color:#ff1f1f;
}

.get_next_btn {
	width:100%;
}

/* 가입신청 */
.join-box {
	position: relative;
    max-width:460px;
    margin:0 auto;
}

#memberForm:after {
	content:"";
	clear:both;
	display:block;
}

#memberForm .add-box {
	width:100%;
    margin: 0 auto 5px;
    background: #fff;
    padding:20px 25px;
	border: 1px solid #ddd;
}

.btm-btns {
	margin:20px 0;
}

.btm-btns .btn {
	width:100%;
	margin:20px 0 50px 0;
	padding:12px;
	font-weight:bold;
	font-size:16px;
	color:#fff;
	border-color:#9d948d !important;
	background-color:#9d948d !important;
	border-radius:5px;
}

.btm-btns .btn:hover {
	-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,.1);
	box-shadow:1px 1px 3px 1px rgba(0,0,0,.1);
}

#fillSubmit.btn-md, #setUpdate.btn-md {
	display: block;
	padding:12px;
	margin: 0 auto;
}

.sex {
	height:36px;
	border:1px solid #999;
	overflow:hidden;
	font-size:12px;
}

.jender {
	position:relative;
	z-index:10;
	display:block;
	float:left;
	width:50%;
	height:36px;
	border-right:1px solid #999;
	overflow:hidden;
}

.jender input[type=radio] {
    display:none;
	top:0px;
	left:0px;
	width:100%;
	height:36px;
}

.jender input[type=radio] + label {
    display:inline-block;
    padding: 9px 12px;
	top:0px;
	left:0px;
	background:#fff;
	color:#666;
	cursor:pointer;
	width:100%;
	text-align:center;
}

.jender input[type=radio]:checked + label {
	background-image: none;
	color:#fff;
	background-color:#9d948d;
}

#right-border-none {
	border-right:none;
}

.pass-box {
	position: relative;
    max-width:460px;
    margin:0 auto;
	border:1px solid #ddd;
	border-top:4px solid #9d948d;
	background:#fff;
	padding:30px;
}

.pass-box h3 {
	display: inline-block;
	font-size:20px;
	color:#333;
	font-weight: bold;
}

.pass-box .pw-text {
	color:#666;
	font-size:13px;
	padding:30px 0;
	letter-spacing: -0.02em;
}

.pass-box .pw-text strong {
	color:#000000;
}

.pass-box form#memberForm .form-group label:before {
	display:block;
	width:0;
	height:0;
	margin:0;
	background:none;
}

.pass-box form .form-group input.form-control {
	height:30px;
	padding:0;
	border: 0;
    border-bottom: 1px solid #999;
    box-shadow: none;
    border-radius: 0;
}

.pass-box form .btn-findPw {
	display:block;
	width:100%;
	margin-top:25px;
	padding:12px;
	font-weight:bold;
	color:#fff;
	border-color:#9d948d;
	background-color:#9d948d;
}

.pass-box form .btn-findPw:hover {
	-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,.1);
	box-shadow:1px 1px 3px 1px rgba(0,0,0,.1);
}

.pass-box .btn-text {
	margin:20px 0;
}

.pass-box .pass-btm {
	max-width:460px;
    margin:0 auto;
	font-size:13px;
	color:#ff0000;
	text-align:center;
	border-top:1px dotted #ccc;
	padding-top:18px;
}

#footer {
	position: relative;
	bottom: 0;
    left: 0;
    right: 0;
	max-width: 460px;
    margin: 0 auto;
	font-size: 12px;
	text-align: center;
	color: #666;
	padding: 55px 0;
    background: url(/images/Template_Cars/main_logo.png) 50% 15px no-repeat;
    background-size: 100px;
}

.my-error-class {
    color:#FF0000;  /* red */
	font-size:12px;
}

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	opacity : 0.3;
	background: url(/images/ajax-loader.gif) 50% 50% no-repeat rgb(0,0,0);
	/*background: url(/images/ajax-loader_red.gif) 50% 50% no-repeat rgb(249,249,249);*/
}

/* modal */
body .modal.fade .modal-dialog {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 96%;
	max-width:600px;
	margin: 0;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transition: initial;
}
.modal .modal-header {
	color:#fff;
	background:#9d948d;
}
.modal .modal-header .close {
	position: absolute;
	top: 0px;
    right: 10px;
    width: 48px;
	height: 86px;
    margin: 0;
    text-shadow: none;
    color: #fff;
	font-size: 80px;
    font-weight: normal;
    opacity: 1;
}
.modal .modal-header h4.modal-title {
	font-size:16px;
	font-weight:bold;
	line-height:3.4285;
}
.modal .modal-header .tit-date {
	position: relative;
	font-size: 13px;
    margin-top: 6px;
}
.modal .modal-header .tit-date .label {
	background:#00679c;
	color:#fff;
	margin-right: 6px;
    padding: 4px 10px;
}
.modal .modal-header .tit-date .date_val {
	position: absolute;
    left: 58px;
	color: #fff;
}
.modal .modal-body {
	padding:20px;
}
.modal .modal-footer {
	padding:20px;
	text-align:right;
}
.modal .modal-footer .btn {
	padding:6px 12px;
}

/* Login Media Queries
------------------------------------------------------------------------*/

/*********************************************** Media Query 991px START ********************************/
@media screen and (max-width:991px) and (orientation : landscape) {

	body .container-fluid {
		margin:0;
	}

	.modal .modal-footer .btn {
		letter-spacing: -0.1em;
	}

	.logo-sec {
		margin:10px auto 20px;
	}

	.logo-sec img {
		height:60px;
	}
}

@media screen and (max-width:991px) and (orientation : portrait) {

	body .container-fluid {
		margin:0;
	}

	.modal .modal-footer .btn {
		letter-spacing: -0.1em;
	}

	.logo-sec {
		margin:10px auto 20px;
	}

	.logo-sec img {
		height:60px;
	}
}
/*********************************************** Media Query 991px END **********************************/

/*********************************************** Media Query 639px START ********************************/
@media screen and (max-width:639px) and (orientation : landscape) {

	.logo-sec {
		margin:5px auto 20px;
	}

	.logo-sec img {
		height:50px;
	}
}

@media screen and (max-width:639px) and (orientation : portrait) {

	.logo-sec {
		margin:5px auto 20px;
	}

	.logo-sec img {
		height:50px;
	}
}
/*********************************************** Media Query 997px END **********************************/

/*********************************************** Media Query 680px START ********************************/
@media (min-width: 680px) and (orientation : landscape) {
	.modal .modal-dialog {
		margin: 30px auto;
	}
}

@media (min-width: 680px) and (orientation : portrait) {
	.modal .modal-dialog {
		margin: 30px auto;
	}
}
/*********************************************** Media Query 680px END **********************************/