@charset "utf-8";

.login_body {background:#b1ddff;}
.login_wrap {padding-bottom:30px;}
.login_wrap .top_bar {height:71px; background:#7cc4fc;}
.login_wrap .container {margin:0 auto; width:770px;}
.login_wrap .container h1 {padding:111px 0 104px; text-align:center;}
.login_wrap .container input[type="text"] {padding-left:12px; width:756px; height:44px; border:1px solid #b3b3b3; background:#fff; border-radius:6px;}
.login_wrap .container input[type="password"] {margin-top:12px; padding-left:12px; width:756px; height:44px; border:1px solid #b3b3b3; background:#fff; border-radius:6px;}
.login_wrap .container input:focus {color:#518ddd; border:1px solid #518ddd;}
.login_wrap .container .row {position:relative; margin:25px 0 45px; zoom:1;}
.login_wrap .container .row:after {display:block; content:""; clear:both;}
.login_wrap .container .row.remember {margin:10px 0 0px;}
.login_wrap .container .row.remember input[type="checkbox"] {position:absolute; top:0; left:-9999px;}
.login_wrap .container .row.remember label {display:inline-block; margin-left:3px; padding-left:22px; height:16px; line-height:16px; background:url('/layout/images/bg_checkbox_off.png') no-repeat left; background-size:16px;}
.login_wrap .container .row.remember input[type="checkbox"]:checked + label {background:url('/layout/images/bg_checkbox_on.png') no-repeat left; background-size:16px;}
.login_wrap .container .row .test_account {float:left;}
.login_wrap .container .row .test_account dl,
.login_wrap .container .row .test_account dl dt,
.login_wrap .container .row .test_account dl dd {display:inline-block; height:45px; line-height:45px; color:#578fba; font-size:14px;}
.login_wrap .container .row .test_account dl {margin-right:15px;}
.login_wrap .container .row .test_account dl dt {padding-left:10px; background:url('/layout/images/ico_bullet.png') no-repeat left 19px; background-size:3px;}
.login_wrap .container .row .btns {width:755px;}
.login_wrap .container .row .btns .btn {width:360px; height:45px; color:#518ddd; border:2px solid #518ddd; background:#fff; border-radius:25px;}
.login_wrap .container .row .btns button:nth-child(1) {margin-right:12px;}
.login_wrap .container .row .btns button:nth-child(2) {margin-right:12px;}
.login_wrap .container .links {padding:0 0 20px; text-align:center;}
.login_wrap .container .links a {padding:0 5px; font-size:14px; color:#578fba;}
.login_wrap .container .notice_box {padding:30px 30px 60px; width:710px; background:#a7d5f9;}
.login_wrap .container .notice_box h2 {margin-bottom:35px; color:#fff; font-size:18px; font-weight:normal;}
.login_wrap .container .notice_box h2.bot_title {margin-top:35px;}
.login_wrap .container .notice_box ul li {padding-left:21px; line-height:22px; color:#fff; font-size:14px; text-indent:-8px; background:url('/layout/images/ico_bullet.png') no-repeat left 7px;}

.screen_out {display:block; overflow:hidden; position:absolute; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; text-indent:-9999px;}

/*===================================
	mobile
=====================================*/
@media all and (min-width:0) and (max-width:680px){ 
.login_wrap .top_bar {height:30px;}
.login_wrap .container {margin:0 auto; width:95%;}
.login_wrap .container h1 {padding:35px 0 30px;}
.login_wrap .container h1 img {width:30%;}
.login_wrap .container input[type="text"] {padding-left:5%; width:95%; height:40px;}
.login_wrap .container input[type="password"] {margin-top:8px; padding-left:5%; width:95%; height:40px;}
.login_wrap .container .row {margin:20px 0 30px;}
.login_wrap .container .row .btns {}
.login_wrap .container .row .btns .btn {width:300px; height:42px; color:#518ddd; border:2px solid #518ddd; background:#fff;  
                                       border-radius:25px; display:block;}
.login_wrap .container .row .btns button:nth-child(1) {margin-bottom:12px;}
.login_wrap .container .row .btns button:nth-child(2) {margin-bottom:12px;}
.login_wrap .container .notice_box {padding:30px 5% 60px; width:100%; background:#a7d5f9;}
.login_wrap .container .notice_box ul li {padding-left:21px; line-height:20px; font-size:13px;}
}

/*==================================
	mobile ~ desktop
====================================*/
@media all and (min-width:681px) and (max-width:780px){ 
.login_wrap .container {margin:0 auto; width:95%;}
.login_wrap .container h1 {padding:55px 0 50px;}
.login_wrap .container input[type="text"] {width:100%; height:40px;}
.login_wrap .container input[type="password"] {margin-top:8px; width:100%; height:40px;}
.login_wrap .container .row .btns {}
.login_wrap .container .row .btns .btn {width:658px; height:42px; color:#518ddd; border:2px solid #518ddd; background:#fff;  
                                       border-radius:25px; display:block;}
.login_wrap .container .row .btns button:nth-child(1) {margin-bottom:14px;}
.login_wrap .container .row .btns button:nth-child(2) {margin-bottom:14px;}
.login_wrap .container .notice_box {padding:30px 5% 60px; width:100%; background:#a7d5f9;}
}

/*==================================
	desktop
====================================*/
@media all and (min-width:980px){ 


}

/* divice 해상도에 따른 이미지 크기 조정 - 필요할 경우 사용 */
media screen and (-webkit-min-device-pixel-ratio:1.5){} /* 안드로이드 */