@charset "utf-8";

/*로그인*/
	.loginWrap{background:#fafafa;padding:80px 0 40px 0;}
	.loginWrap:before,
	.loginWrap:after{content:"";display:block;position:absolute;}
	.loginWrap:before{left:0;top:0;}
	.loginWrap:after{right:0;bottom:0;}
	.loginWrap_con{width:70%;margin: 0 auto;position:relative;padding-bottom:20px;border-bottom:1px dashed #9e9e9e;}
	.loginWrap_con input{box-sizing:border-box;display:block;width:100%;min-height:38px;height:auto;padding:0 5px;vertical-align:middle;border:1px solid #DDD;}
	.loginWrap_con dl{display:table;width:calc(100% - 110px);margin:10px 0;}
	.loginWrap_con dl dt,
	.loginWrap_con dl dd{display:table-cell;vertical-align:middle;}
	.loginWrap_con dl dt{width:20%;font-weight:500;}
	.loginWrap_con dl dd{width:80%;}
	.loginWrap_con .btn_login{width:100px;height:85px;background:#0c519c;color:#FFF;border:0;position:absolute;right:0;top:0;}
	.login_forget{width:70%;margin: 20px auto;overflow:hidden;}
	.login_forget span{}
	.login_forget a{display:inline-block;float:right;margin-left:3px;padding:5px 0;width:120px;text-align:center;background:#9a9a9a;color:#FFF !important;}
	.loginWrap_con .btn_login:hover,
	.loginWrap_con .btn_login:focus,
	.login_forget a:hover,
	.login_forget a:focus{background:#52575c;transition: all 0.2s cubic-bezier(0.2, 0, 0.3, 1);}
	@media only screen and (max-width:730px){
		.loginWrap_con{width:80%;}
		.login_forget{text-align:center;width:80%;}
		.login_forget span{display:block;margin-bottom:20px;}
		.login_forget a{float:none;}
	}
	@media only screen and (max-width:600px){
		.loginWrap_con dl dt{width:30%;}
		.loginWrap_con dl dd{width:70%;}
	}
	@media only screen and (max-width:480px){
		.loginWrap{padding:15px 0;}
		.loginWrap_con{width:90%;}
		.login_forget{width:90%;}
		.loginWrap_con dl{display:block;width:100%;}
		.loginWrap_con dl dt,
		.loginWrap_con dl dd{display:block;width:100%;}
		.loginWrap_con .btn_login{width:100%;padding:10px 0;height:auto;position:relative;top:10px;}
	}
	@media only screen and (max-width:320px){
		.login_forget a{display:block;margin-left:0;margin-bottom:5px;width:100%;}
	}

	.login_guide{margin-top:100px;border:1px solid #bfbfbf;}
	.login_guide div{display:table;}
	.login_guide dl{display:table-cell;width:21%;padding:0 2%;border-left:1px solid #bfbfbf;}
	.login_guide dl.con_1{border-left:0;}
	.login_guide dt{text-align:center;color:#0f5cb1;font-size:16px;font-weight:500;position:relative;padding-top:50px;}
	.login_guide dd{padding:15px 0;}
	.login_guide ul{}
	.login_guide li{margin:10px 0;font-size:14px;position:relative;padding-left:8px;}
	.login_guide li:before{content:"";display:block;width:2px;height:2px;position:absolute;left:0;top:10px;background:#7f7f7f;}
	.login_guide dt:before{content:"";display:block;width:84px;height:84px;position:absolute;left:calc(50% - 42px);top:-45px;background-color:#f2f2f2 !important;border-radius:100%;}
	.login_guide .con_1 dt:before{background:url(../images/boxIcon_7.png) no-repeat center 35px;}
	.login_guide .con_2 dt:before{background:url(../images/boxIcon_8.png) no-repeat center;}
	.login_guide .con_3 dt:before{background:url(../images/boxIcon_1.png) no-repeat center;background-size:53px;}
	.login_guide .con_4 dt:before{background:url(../images/boxIcon_9.png) no-repeat center;}
	@media only screen and (max-width:770px){
		.login_guide{border:0;}
		.login_guide div{display:block;}
		.login_guide dl{display:block;width:96%;padding:2%;border-left:0px;border-top:1px dashed #bfbfbf;}
		.login_guide dl.con_1{border-top:0;}
		.login_guide dt:before{left:0;top:5px;width:60px;height:60px;background-size:40px !important;}
		.login_guide dt{text-align:left;padding-top:0;padding-left:80px;}
		.login_guide .con_1 dt:before{background-position:center;}
		.login_guide dd{padding:10px 0 0 0;}
		.login_guide ul{padding-left:80px;}
		.login_guide li{margin:5px 0;}
	}
	@media only screen and (max-width:300px){
		.login_guide{margin-top:50px;}
		.login_guide dt:before{display:none;}
		.login_guide dt{padding-left:0;}
		.login_guide ul{padding-left:0;}
	}


	._loginAfter{background:#fafafa;padding:40px 0; border:1px solid #9a9a9a; border-top:2px solid #0c519c;}
	._loginAfter h2{text-align:center;}
	._loginAfter ._loginInfo{text-align:center; color:#505050;}
	._loginAfter ._uInfo{text-align:center;margin-top:20px;}
	._loginAfter ._btnLogout{width:50%;height:40px;background:#0c519c;color:#FFF;border:0;}
	._loginAfter ._btnLogout:hover,
	._loginAfter ._btnLogout:focus{background:#52575c; text-decoration:underline; transition: all 0.2s cubic-bezier(0.2, 0, 0.3, 1);}
	@media only screen and (max-width:480px){
		._loginAfter ._btnLogout{width:90%;padding:10px 0;height:auto;}
	}