/* 로그인 */
.loginWrap {position:fixed; width:100%; height:100%; overflow:hidden;}
.loginWrap .left {position:absolute;}
.loginWrap .left img {width:auto; height:100%;}
.loginWrap .left {float:left; width:70%; height:100%; }
.loginWrap .doc {position:absolute; top:27%; right:18%; background:#000; color:#fff; padding:70px 80px; font-size:18px; box-shadow:0 25px 30px rgba(0,0,0,.2); z-index:1;}
.loginWrap .tit {font-size:46px;}
.loginWrap .mid {padding:20px; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2);}
.loginWrap .bottom {padding:20px 0 0 20px; font-size:13px; color:rgba(255,255,255,.6);} 

.loginWrap .vText {position:absolute; top:132px; right:-170px; font-size:25px; color:#000; font-weight:300; text-align:left; text-transform:uppercase; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); letter-spacing:0; z-index:1;}
.loginWrap .vText strong {font-weight:600; font-family:'Metropolis-Bold';}

.loginWrap .logo {position:absolute; top:50px; left:4%; color:#fff; font-size:35px; font-weight:600; text-shadow:0 0 5px rgba(0,0,0,.4); z-index:2;}
.loginWrap .copy {position:absolute; bottom:10px; right:19%; padding:8px 10px; background:rgba(255,255,255,.4); font-size:15px; z-index:2;}


.pc {}
.mobile {display:none;}

@media all and (max-width:1650px) {
	.loginWrap .left img {width:auto; height:100%;}
}

@media all and (max-width:1400px) {
	.loginWrap .left img {width:100%; height:auto;}
	.pc {display:none;}
	.mobile {display:block;}
}


@media all and (max-width:1200px) {
	.loginWrap .doc {top:25%; right:15%; padding:60px 70px; font-size:15px;}
	.loginWrap .tit {font-size:35px;}
	.loginWrap .bottom {font-size:12px;}

	.loginWrap .vText {top:106px; right:-140px; font-size:20px;}
	.loginWrap .logo {font-size:30px;}
	.loginWrap .copy {font-size:13px; right:16%;}
}

@media all and (max-width:960px) {
	.loginWrap .left {float:none; width:100%; height:60%; overflow:hidden;}
	.loginWrap .doc {width:420px; top:30%; right:50%; margin-right:-210px;}
	.loginWrap .vText {width:100%; top:360px; right:0; text-align:center; text-transform:uppercase; -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); }
	.loginWrap .logo {width:100%; top:40px; left:0; text-align:center; font-size:28px;} 
	.loginWrap .copy {width:100%; right:0%; text-align:center; font-size:12px;}
	.pc {display:block;}
	.mobile {display:none;}
}

@media all and (max-width:670px) {
	.loginWrap .left {height:60%;}
	.loginWrap .doc {width:325px; top:40%; right:50%; margin-right:-162.5px; padding:40px; font-size:13px;}
	.loginWrap .tit {font-size:27px;}
	.loginWrap .mid {padding:10px 0;}
	.loginWrap .bottom {padding:10px 0 0 0;}
	.loginWrap .vText {top:270px;}
	
	.loginWrap .logo {font-size:26px;}
	.pc {display:none;}
	.mobile {display:block;}
}