@charset "utf-8";

/* 로그인 NEW */
.login-page {position:relative; margin:6% auto 0 auto; overflow:hidden;}
.login-header {width:1000px; margin:0 auto 22px auto;}
.login-header:after {content:""; display:block; height:0; clear:both;}
.login-content {position:relative; width:100%; height:270px; background:#0453b2;}
.login-content .LoginBox {padding:37px 0 0 0; width:1000px; margin:0 auto;}
.login-content .LoginBox:after {content:""; display:block; height:0; clear:both;}
.login-content .LoginBox .Login-left {float:left; width:754px;}
.login-content .LoginBox .Login-right {float:right;}

.login-header .header-left {float:left; width:382px;}
.login-header .header-right {float:right;}
.login-header .header-left h2.logo {padding:10px 0 16px 0;}
.login-header .header-left .textBox {color:#454545; letter-spacing:-1.5px; font-weight:500; font-size:26px; margin:40px 0 0 20px;}
.login-header .header-left .textBox span {display:block;}

/* 로그인 롤링 이미지 */
.loginvisual {position:relative; width:614px;} 
.loginvisual .cycle-slideshow {text-align:center; height:310px; overflow:hidden;}
.loginvisual .cycle-slideshow .slide {text-align:center; width:100%; height:310px; border-radius:32px;}
.loginvisual .pagerWrap {position:absolute; left:50%; bottom:30px; margin-left:-200px; width:400px; z-index:201; text-align:center;}
.loginvisual .pagerWrap #adv-custom-pager {display:inline-block;}
.loginvisual .pagerWrap #adv-custom-pager a{display:inline-block; width:18px; height:18px; margin-left:4px; background:url(../login/bg_pagerOff.png) 0 0 no-repeat; background-size:cover;}
.loginvisual .pagerWrap #adv-custom-pager a.cycle-pager-active{width:52px; background:url(../login/bg_pagerOn.png) 0 0 no-repeat; background-size:cover;}
.loginvisual .pagerWrap button {display:inline-block; width:18px; height:18px; vertical-align:top; border:none; font-size:0; line-height:0; text-indent:-999px;}
.loginvisual .pagerWrap .btnStop {background:url(../login/btn_stop.png) 0 0 no-repeat; background-size:cover;}
.loginvisual .pagerWrap .btnPlay {background:url(../login/btn_play.png) 0 0 no-repeat; background-size:cover;}
.sliderArrows a {display:block; text-indent:-9999px; outline:none; z-index:50; background-image:url(../login/prev_next.png); width:42px; height:42px; position:absolute; top:50%; margin-top:-34px;}
.prev {background-position:0 0; left:15px;}
.prev:hover {background-position:0 -44px;}
.next {right:15px; background-position:-44px 0;}
.next:hover {background-position:-44px -44px;}

.login-content .LoginBox h3 {float:left; width:195px; margin-top:20px; padding:0 35px 45px 27px; font-size:50px; color:#fff; line-height:45px; border-right:1px solid #4a83c7; box-sizing:border-box;}
.login-content .LoginBox fieldset {position:relative; float:left; width:510px; margin:20px 0 20px 45px;} 
.login-content .LoginBox .inpLogin {display: block; position:relative;}
.login-content .LoginBox .inpLogin + .inpLogin {margin-top:9px;}
.login-content .LoginBox .inpLogin label {width:80px; display:inline-block; color: #fff; font-size:15px; line-height: 31px;}
.login-content .LoginBox input[type='text'],
.login-content .LoginBox input[type='password'] {width:290px; height:40px; padding-left:20px; border:none; color: #333; line-height: 1; background: #fff;}
.login-content .LoginBox .btnLogin {position:absolute; top:0px; left:382px;}
.login-content .LoginBox .btnLogin a {display:block; width:100px; height:90px; background:#ee1c25; font-size:15px; text-align:center; color:#fff; line-height:90px;}
.login-content .LoginBox .btnLogin a:hover {background:#c42128;}
.login-content .LoginBox .id-save {color:#fff; margin:15px 0 0 80px;}

.login-content .LoginBox  .now-people {clear:both; width:290px; margin-left:320px; height:35px; font-size:15px; text-align:center; line-height:35px; border-radius:50px; color:#fff; background:#194375;}
.login-content .LoginBox  .now-people strong {color:#e6e437; font-weight:500;}
.login-content .LoginBox .Login-info {position:relative; color:#fff; width:215px; padding:17px; border:3px solid #2396eb; box-sizing:border-box;}
.login-content .LoginBox .Login-info .icon {position:absolute; top:-18px; left:-25px; }
.login-content .LoginBox .Login-info span {display:block;}
.login-content .LoginBox .Login-info .caution {color:#ff8686; font-size:16px; line-height:20px; padding:12px 0 12px 10px; border-bottom:1px solid #2c65aa;}
.login-content .LoginBox .Login-info .txt {padding-top:10px; font-size:13px; padding-left:6px; padding-bottom:5px;}

.login-page .bottom {width:1000px; margin:0 auto; padding:25px 0 20px 0; color:#949494; line-height:24px;} 


/* footer */
.login-page .bottom {line-height: normal;}
.login-page .bottom {position: relative;}
.login-page .bottom .inner-wrap {position:relative;}
.login-page .bottom .inner-wrap:after {display:block; clear:both; content:''}
.login-page .bottom .inner-wrap .logo-b {clear:both; float:left; width:183px; height:52px; text-indent:-9999px; background:url(../template1/logo_b.png); background-size:cover;}
.login-page .bottom .inner-wrap ul.copy {float:left; margin-left:40px;}
.login-page .bottom .inner-wrap ul.copy li {padding:2px 0; font-size:12px; color:#999;}
.login-page .bottom .inner-wrap ul.copy li address {font-style:normal;}
.login-page .bottom .inner-wrap .sns-box {position: absolute; top: 10px; right: 20px;}
       
        
@media screen and (max-width: 1000px){
	.login-page {margin:1% 2% 0 2%;}
	.login-header {width:100%; margin-bottom:0;}
	.login-content .LoginBox {width:100%; padding:0;}
	.login-header .header-left {float:none; width:100%;}
	.login-header .header-right {float:none; width:100%;}
	.login-header .header-left h2.logo {width:240px; margin:0 auto;}
	.login-header .header-left h2.logo img {width:100%;}
	.login-header .header-left .textBox {display:none; width:100%; text-align:center; position:absolute; top:100px; z-index:10000;}
	.login-header .header-left .textBox span {display:inline;}
	.loginvisual {width:100%;}
	.loginvisual .cycle-slideshow {height:250px;}
	.loginvisual .cycle-slideshow .slide {background-size:cover !important; height:250px; border-radius:0;}
	.login-content {height:auto;}
	.login-content .LoginBox .Login-left {float:none; width:100%;}
	.login-content .LoginBox h3 {float:none; border-right:0; width:510px; font-size:30px; padding:10px 0 10px 0px; margin:0 auto;}
	.login-content .LoginBox fieldset {float:none; margin:0 auto 20px auto;}
	.login-content .LoginBox .now-people {margin:0 auto;}
	.login-content .LoginBox .Login-right {float:none; padding:20px 50px;}
	.login-content .LoginBox .Login-info {width:100%;}
	.login-content .LoginBox .Login-info span {display:inline;}
	.login-content .LoginBox .Login-info .caution {padding-top:4px;}
	.login-page .bottom {width:100%; padding:10px 0; line-height:18px; font-size:12px;}
}

@media screen and (max-width: 600px){
	.login-content .LoginBox fieldset {width:400px;}
	.login-content .LoginBox input[type='text'],
	.login-content .LoginBox input[type='password'] {width:200px; height:40px; padding-left:20px; border:none; color: #333; line-height: 1; background: #fff;}
	.login-content .LoginBox .btnLogin {left:300px;}
	.login-content .LoginBox h3 {width:400px;}
}

@media screen and (max-width: 480px){
	.login-content .LoginBox fieldset {width:320px; margin-bottom:30px;}
	.login-content .LoginBox h3 {width:320px;}
	.login-content .LoginBox input[type='text'],
	.login-content .LoginBox input[type='password'] {width:234px; height:40px; padding-left:20px; border:none; color: #333; line-height: 1; background: #fff;}
	.login-content .LoginBox .btnLogin {position:relative; left:0; top:10px;}
	.login-content .LoginBox .btnLogin a {width:320px; height:45px; line-height:45px;}
	.login-content .LoginBox .Login-info .caution {font-size:14px; text-align:center;}
	.login-page .bottom a {display:block;}
}