/*로그인 스타일*/
	/*공통*/

	input[type=text],input[type=password]{ border:1px solid #ddd; padding:8px 5px 7px;  width: 100%; color:#666; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; display: block; }
	input[type=radio]{ position: relative; display: inline-block; vertical-align: middle; width: 12px; height: 12px; }
	input[type=checkbox]{ width:12px; height: 12px; display: inline-block; vertical-align: middle;  position: relative; -webkit-border: 1px solid #707070; padding: 0; }
	
	.checks {position: relative;} 
	.checks input[type="checkbox"]{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0 }
	.checks input[type="checkbox"] + label { display: inline-block; position: relative; cursor: pointer;
	   -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  padding-left: 20px; vertical-align: top; } 
	.checks input[type="checkbox"] + label:before {  position: absolute;  left: 0;  top: 0; content: '';  display: inline-block; width: 12px;
		height: 12px; line-height: 12px; text-align: center;  vertical-align: middle; background: #fff; border: 1px solid #333; } 
	.checks input[type="checkbox"]:checked + label:after {  position: absolute; left: 2px; top: 2px; background: #032875; width: 10px;
		height: 10px; content: ''; }
	textarea{ border:1px solid #ddd; width: 100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; display: block; }

	/*공통*/
	/*LOGIN*/
		/* Select */
			select { width: 100%; border:1px solid #ddd; color:#666;  padding:7px 30px 7px 6px; border-radius: 0; background: #fff;
			  -webkit-appearance: none;   -moz-appearance: none;     appearance: none; }
			.select{ position: relative; }
			.select::after{ position: absolute; content:''; right:8px; top:11px; width: 0;  height: 0;  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff; }
			select::-ms-expand {  display: none;             }
			a{   text-decoration: none; display: inline-block; color:#333; }
			a img { border: 0; vertical-align: bottom; }
			img {  max-width: 100%; }
			button{ margin: 0;  padding: 0; border:0; background:none; cursor: pointer; }
			button:focus{ outline:none; }
			label{ color:#333; }
			label + label{  margin-left: 20px; }
			label input[type=radio]{ margin-right: 5px; }
			.clearfix:after {  visibility: hidden; display: block; content: ""; clear: both; height: 0; }
			* html .clearfix { zoom: 1; } /* IE6 */
			*:first-child+html .clearfix { zoom: 1; } /* IE7 */
		/* Select */

		.swiper-login-img{position: absolute;left:0;top:0;width:100%;height:100%;}
		.swiper-login-img img{width:100%;height:100%}
		.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:25px}
		.swiper-pagination-bullet{background: #fff;opacity: 1}
		.swiper-pagination-bullet-active{background: #D41217}
		.swiper-button-next, .swiper-button-prev{color: #fff}

		.wrap{position: relative;width: 100%;min-height:100%;/* margin-top: 140px; */}
		.wrap.login{background: none;padding-bottom: 0;}
		.container_login{position: relative;height: 100vh;overflow: hidden;}
		.container_login::before{ position: absolute; content: ''; left: 0; bottom:0; width:100%; height:5px;  background: #38af4a; /* Old browsers */
		  background: -moz-linear-gradient(left,  #38af4a 0%, #38af4a 50%, #de3220 50%, #de3220 100%); /* FF3.6-15 */
		  background: -webkit-linear-gradient(left,  #38af4a 0%,#38af4a 50%,#de3220 50%,#de3220 100%); /* Chrome10-25,Safari5.1-6 */
		  background: linear-gradient(to right,  #38af4a 0%,#38af4a 30%,#de3220 10%,#de3220 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38af4a', endColorstr='#de3220',GradientType=1 ); /* IE6-9 */
		  z-index: 2; }
	/*LOGIN*/

	/* Login Box */
		.logo{position: absolute;display: block;left: 33px;top: 25px;width: 120px;z-index: 10;}
		.logo img{max-width: 100%}
		.login_box{position: absolute;border-radius: 10px;width: 1024px;height: 505px;top: 50%;left: 50%;margin: 0 auto;background: rgba(0,0,0,.3);text-align: center;transform: translate(-50%, -50%);z-index: 10;}
		.login_box .write_form{position: absolute;left: calc(100% - 485px);top: -20px;width:455px;height: 540px;;background: #fff;border-radius: 10px;box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, 0.16);-webkit-box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, 0.16);transition: .3s all ease-out;-webkit-transition: .3s all ease-out;z-index: 2}
		.login_box .write_form form{position: absolute;width:355px;margin:0 auto;left:50%;top:35%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}
		.login_box .write_form h3{display: block;font-size: 40px;font-weight: 400;line-height: 60px;margin-bottom: 75px;letter-spacing: -2px;}
		.login_box .write_form .form_wrap{display: none}
		.login_box .write_form .form_wrap h3{position: relative;font-size: 18px;color:#909295;font-weight: 300;margin-bottom: 15px;padding-bottom: 15px;}
		.login_box .write_form .form_wrap h3::after{position: absolute;content: '';width: 30px;height:3px;background: #666;bottom: 0;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%)}
		.login_box .write_form .form_wrap h4{font-size: 40px;font-weight: 500;margin-bottom: 20px;margin-top: 0px;}
		.login_box .write_form .form_ttl{display:block;font-size: 15px;line-height: 1em;color:#CCC;text-align: left;margin-bottom: 5px;font-weight: 300;}
		.login_box .write_form input[type=text],.login_box .write_form input[type=password]{position: relative;color:#333;border:0;border-bottom: 1px solid #333;padding-left:0;padding-bottom: 12px;margin-bottom:15px;font-size: 18px;}
		.login_box .write_form input[type=text]:focus,.login_box .write_form input[type=password]:focus{outline: none;border-bottom-color: #032875}
		.login_box .write_form .checkbox_wrap{text-align: left;font-size: 17px;}
		.login_box .write_form .checkbox_wrap label{color:#b4b4b4;padding-left: 30px;line-height: 1.25em;font-weight: 300;transition: .3s all ease-out;-webkit-transition: .3s all ease-out;}
		.login_box .write_form .checkbox_wrap .checks input[type="checkbox"] + label:before{width: 20px;height: 20px;border-color: #b4b4b4}
		.login_box .write_form .checkbox_wrap .checks input[type="checkbox"]:checked + label{color:#333}
		.login_box .write_form .checkbox_wrap .checks input[type="checkbox"]:checked + label:after{width:18px;height:18px}
		.login_box .read_form{position: absolute;top:0;left:0;width: 52.5%;color:#fff;transition: .3s all ease-out;-webkit-transition: .3s all ease-out}
		.login_box .read_form h2{position: relative;font-size: 60px;font-weight: 500;margin-top:20px;padding-bottom: 30px}
		.login_box .read_form h2::after{position: absolute;content: '';width: 30px;height:3px;background: #fff;bottom: 0;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%)}
		.login_box .read_form h3{font-size: 24px;font-weight: 300;margin-top:80px}
		.login_box.active .write_form{left:30px}
		.login_box.active .write_form form{top:45%;border:0}
		.login_box.active .write_form form > h3{display: none;}
		.login_box.active .write_form .form_wrap{display: block}
		.login_box.active .read_form{left:50%}
		.login_box button{position: relative;width:230px;height:43px;border-radius: 50px;font-size: 18px;font-weight: 200;margin-top:50px;overflow:hidden;}
		.login_box button::after{position: absolute;content:'';left:50%;top:50%;width:0;height:0;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);border-radius: 100%;background:#fff;opacity: 0;transition: .3s all ease-out;-webkit-transition: .3s all ease-out;}
		.login_box .btn_login{ width:100%; color:#666;border:1px solid #666;}
		.login_box .btn_login:hover {background:#032875; color:#fff}
		.login_box .btn_white{color:#fff;border:1px solid #fff;}
		.login_box .btn_login:hover::after{width:350px;height:350px;background: #000;opacity: .07}
		.login_box .btn_white:hover::after{width:350px;height:350px;opacity: .1}
		.login_box.active .btn_login{display: none;}
		.login_box .btn_login2 {width:100%; color:#666;border:1px solid #666;}
		.login_box .btn_login2:hover::after{width:350px;height:350px;background: #000;opacity: .07}
		.login_box .btn_login2:hover {background:#032875;  color:#fff}
	/* Login Box */

	/* IE10+ */
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
		/* Enter your style code */
		.login_box {top:25%; left:50%; transform:translate(-50%, -15%);}
	}



	/*반응형*/

		@media (max-width: 1290px) {
			@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
				/* Enter your style code */
				.login_box {top:25%; left:10%; transform:translate(0%, -10%);}
			}
		}


		@media (max-width: 1100px) {
			.login_box{width:880px;}
			.login_box .write_form{left:calc(100% - 430px);width: 400px}
			.login_box .write_form h3{font-size: 30px;line-height: 40px}
			.login_box .read_form h3{font-size: 18px}
			.login_box .read_form h2{font-size: 50px}
		}  

		@media (max-width: 840px) {
			/* Login */
			.login_box{width:80%;height:auto;/* transform: translateY(-50%) */}
			.login_box .read_form{display: none}
			.login_box .write_form h3{font-size: 24px}
			.login_box .write_form form{top:50%}
			.login_box .write_form .form_wrap h3{font-size: 14px;margin-bottom: 10px;padding-bottom: 7px;line-height: 24px}
			.login_box .write_form .form_wrap h3::after{height:2px;width:20px}
			.login_box .write_form .form_wrap h4{font-size: 24px;margin-bottom: 20px}
			.login_box .write_form .form_ttl{font-size: 14px}
			.login_box .write_form .checkbox_wrap .checks input[type="checkbox"] + label{padding-left: 25px}
			.login_box .write_form .checkbox_wrap .checks input[type="checkbox"] + label:before{width:16px;height:16px}
			.login_box .write_form .checkbox_wrap .checks input[type="checkbox"]:checked + label:after{width:14px;height:14px}
			.login_box .write_form .checkbox_wrap label{font-size: 14px}
			.login_box .btn_login{width:150px;font-size: 14px;margin-top: 30px}
			.login_box .write_form input[type=text], .login_box .write_form input[type=password]{font-size: 14px}
			.login_box .write_form{position: relative;width:85%;height:400px;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%)}
			.login_box.active .write_form{left:50%}
			.login_box .write_form form{width:80%;}
		}