@CHARSET "UTF-8";

* {
    box-sizing: border-box;
}

/* checkbox */
.checkbox{ display:inline-block; position:relative; padding:4px 0; line-height:1; vertical-align:middle; cursor:pointer;}
.checkbox input[type="checkbox"],.checkbox input[type="radio"]{ overflow:hidden; clip:rect(0, 0, 0, 0); position:absolute; width:1px; height:1px; margin:-1px;}
.checkbox i,.checkbox span{ display:inline-block; height:21px; vertical-align:top;}
.checkbox i{ width:21px; background-repeat:no-repeat; background-position:50% 50%;}
.checkbox span{ padding:4px 0 1px 5px; font-size:14px; color:#333333; line-height:16px;}
.checkbox input[type="checkbox"]+i{ background-image:url("../../../images/icon_checkbox.png");}
.checkbox input[type="checkbox"]:checked+i{ background-image:url("../../../images/icon_checkbox-checked.png");}

/* login */
#login{ display:none; z-index:99999; position:fixed; left:0; right:0; top:0px; bottom:0; background:url("../../../images/bg_login.jpg") no-repeat 50% 50%; background-size:cover;}
#login .form{ position:absolute; left:50%; top:50%; width:584px; height:652px; margin:-326px 0 0 -292px; background:rgba(255,255,255,0.37);}
#login .form .inner{ width:432px; margin:0 auto;}
/*#login .form h2{ padding:70px 0 80px; font-size:40px; font-weight:300; color:#ffffff; line-height:1; text-align:center;} */
#login .form h2.title{ padding:70px 0 80px; background:url("../../../images/main/logo.png") no-repeat center; text-align:center; text-indent: -9999px; }
#login .form .item{ margin-bottom:14px;}
#login .form .item label{ display:block; position:relative;}
#login .form .item label:before{ content:""; position:absolute; left:20px; top:50%; width:31px; height:31px; margin-top:-15px;}
#login .form .item label input.int{ width:100%; height:54px; padding:17px 15px 17px 66px; border:1px solid #cccccc; background:#ffffff; font-size:18px; line-height:20px;}
#login .form .item.i_id label:before{ background-image:url("../../../images/ico-user.png");}
#login .form .item.i_pw label:before{ background-image:url("../../../images/ico-lock.png");}
#login .form .item.i_pa label:before{ background-image:url("../../../images/ico-parking.png");}
#login .form .check{ margin-top:20px;}
#login .form .check .checkbox{ margin-right:10px;}
#login .form .check .checkbox:last-child{ margin-right:0;}
#login .form .button{ margin-top:45px;}
#login .form .button button{ width:100%; height:65px; border:none; background:#ffcc00; font-size:24px; font-weight:400; color:#333333;}
#login .form .button button span{ position:relative;}

/* mobile */
@media screen and (max-width:1199px){
	
	/* login */
	#login{ top:0px;}
	#login .form{ height:550px; margin-top:-275px;}
	#login .form h2{ padding:40px 0;}
	#login .form .check{ margin-top:30px;}
}

@media screen and (max-width:767px){
	/* checkbox */
	.checkbox i{ width:16px; background-size:auto 16px;}
	.checkbox span{ font-size:12px;}

	/* login */
	#login{ top:0px;}
	#login .form{ left:15px; right:15px; width:auto; height:auto; margin:0; transform:translateY(-50%);}
	#login .form .inner{ width:100%; padding:30px 15px;}
	#login .form h2{ margin-bottom:30px; padding:0; font-size:26px;}
	#login .form .item{ margin-bottom:10px;}
	#login .form .item label:before{ left:10px; width:20px; height:20px; margin-top:-10px; background-size:auto 20px;}
	#login .form .item label input.int{ height:40px; padding:10px 10px 10px 35px; font-size:14px;}
	#login .form .check{ margin-top:30px;}
	#login .form .button{ margin-top:30px;}
	#login .form .button button{ height:40px; font-size:18px;}
}

@media screen and (max-width:359px){
	/* login */
	#login .form h2{ margin-bottom:30px; padding:0; font-size:24px;}
	#login .form .item{ margin-bottom:10px;}
	#login .form .item label:before{ left:10px; width:20px; height:20px; margin-top:-10px; background-size:auto 20px;}
	#login .form .item label input.int{ height:40px; padding:10px 10px 10px 35px; font-size:14px;}
	#login .form .check{ margin-top:30px;}
	#login .form .button{ margin-top:30px;}
	#login .form .button button{ height:40px; font-size:18px;}
}



/* mobile */
@media screen and (max-width:414px){
	#header.cs-visual{ background-size:auto 80px;}
}