@charset "utf-8";

@import url(./notosanskr.css);


ul { list-style: none; }



.container.all { width: 100%; height: 100vh; background: url("/img/bg_login.jpg") no-repeat; background-size: cover;  }


.login-all {     position: relative; margin: 25px 0 0 106px; }
.login-left {  display: inline-block; width: 376px;  height: 261px; border-radius: 35px 0  0 35px; position: absolute; top: 250px; left: 200px; background: #fff; margin: 0 auto;  }
.login-right { display: inline-block; width: 60px; height: 261px; border-radius: 0 35px 35px 0; position: absolute; top: 250px; left: 550px; }



/*
.login-all { display: relative;  }
.login-left { display: inline-block; width: 420px;  height: 261px;  background: #fff; margin: 0 auto; border-radius: 35px; position: relative; top: 243px; left: 234px; }
.login-right { display: inline-block; width: 60px; height: 261px; border-radius: 0 35px 35px 0; position: relative; top: 256px; left: 171px; }
*/


.login-right {
background: #275d9a; /* Old browsers */
background: -moz-linear-gradient(-45deg, #275d9a 1%, #53af8a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #275d9a 1%,#53af8a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #275d9a 1%,#53af8a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#275d9a', endColorstr='#53af8a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.login-right:after { content: ""; position: absolute; background: url("/img/ws_logo_sm.png") no-repeat; width: 45px; height: 20px; left: 6px; bottom: 16px; }


/*  .log-upper { height: 40%; background: #fff; }  */
.log-upper .bind-1 {display:block; text-align: center; width:260px; padding: 19px 0 33px 29px; }
.log-upper > .bind-1 > div.logo { display:inline-block; width: 288px; height: 42px; background: url("/img/title_login.png") no-repeat; color: transparent; }

.log-bottom { height: px;  }
.log-bottom > div { padding-right: 0px; }

.brand {display:block; position: relative; height: 75px; }
.brand:before { content: "" ; display: block; border-top: 1px solid #adadad; position: relative; top: -3px;}
.brand h1 { font-size: 24px; font-weight:800; line-height: 24px; color: #333; }



.log-bottom .bind-2 { display:block; text-align: center; width:290px; margin: 0 auto; padding-left: 20px; }

.log-bottom .bind-2 h2 { color: #3a3a3a; text-align: left; font-size: 17px; font-weight: 800; margin: 0; line-height: 17px; padding-bottom: 2px;}
.log-bottom .bind-2 p { color: #808080; text-align: left; font-size: 12px; font-weight: 400;  }

.log-bottom .bind-2 > div { padding-top: 3px; }





.bind-2 div ul { position: relative; list-style: none; }
.bind-2 div ul li { padding-left:14px; padding-top: 0px; margin-top: -11px; }


.bind-2 div ul li:first-child:before { content: "아이디"; position: relative; top: 20px; right: 62px; font-size: 11px; font-weight: 500; }
.bind-2 div ul li:first-child { padding-right: 88px;}
.bind-2 div ul li:nth-child(2):before { content: "비밀번호"; position: relative; top: 20px; right: 66px;font-size: 11px; font-weight: 500; }
.bind-2 div ul li:nth-child(2) { padding-right: 88px;}
.bind-2 div ul .logbtn { position: relative; top: -45px; right: -78px; width: 67px; height: 55px; font-size: 13px; line-height: 12px; border: 0; color: #fff; border-radius: 4px; background: #3576b6; }




.bind-2 div ul li:last-child { position: relative; top: -25px; right: 48px; font-size: 11px; font-weight: 500; }
.bind-2 div ul li:last-child span { padding-left: 3px; }


.footer_login { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba( 3, 33, 81, 0.6); margin: 0 auto; }

.footer_content { display: flex; justify-content: space-around; width: 1040px; height: 116px; align-items: center; color: #bdc2cc; margin: 0 auto; }

.footer_content ol,
.footer_content ul { margin-top: -9px; padding-left: 27px; }

.footer_content > div { height: 59px;}
.footer_content > div ~ div { border-left: 1px solid #5e799a; }
.footer_content > div:first-child { padding-bottom:10px; }
.footer_content > div h3 { display: block; width: 140px;  height: 40px;  background: url("/img/logo_footer.png") no-repeat; color: transparent;  margin: 0px 0px 0px;}

.footer_content ul li { display: relative; }
.footer_content > div.com-info1 ul li:first-child { color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 12px;}
.footer_content > div.com-info1 ul li:last-child { padding-top: 3px;}
.footer_content > div.com-info2 ul { margin-top: -26px; }
.footer_content > div.com-info2 ul li:nth-child(odd) { color: #fff; font-size: 14px; font-weight: 500; }


.footer_content > div.com-info2 ul li:nth-of-type(1):before { content:""; display: inline-block; position: relative; width: 28px; height: 28px; left: -6px; top: 18px; background: url("/img/icon1_footer.png") no-repeat; }
.footer_content > div.com-info2 ul li:nth-of-type(2){ padding-left: 27px; }
.footer_content > div.com-info2 ul li:nth-of-type(3):before { content:""; display: inline-block; position: relative; width: 28px; height: 28px; left: -6px; top: 18px; background: url("/img/icon2_footer.png") no-repeat; }
.footer_content > div.com-info2 ul li:nth-of-type(4){ padding-left: 27px; }

.footer_content > div.com-info3 ul li:first-child { color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.footer_content > div.com-info3 ul li:last-child { padding-top: 3px; }
.footer_content > div.com-info3 ul li:last-child a,
.footer_content > div.com-info3 ul li:last-child a:link,
.footer_content > div.com-info3 ul li:last-child a:visited,
.footer_content > div.com-info3 ul li:last-child a:hover,
.footer_content > div.com-info3 ul li:last-child a:focus {
    color: #ffd84d;
    font-size: 13px;
    font-weight: 300;
    text-decoration: none;
}

.form-control { padding: 0px 6px; width: 123px; margin-left: 44px; }




.container {
    padding-right: 0px;
    padding-left: 0px;
    width: 100%;
}

/* 768 이하에서도 width: 100% 줘야함  */

@media (min-width:768px) {

    .container { width: 100% !important;}

}
@media (min-width:992px) {
    .container {width: 100% !important;}

}
@media (min-width:1200px) {
    .container { width: 100%;}

}