body { min-width: 0; }

.wrapper { width: auto; max-width: 980px; }

#container .flogin { overflow: hidden; padding: 40px 0 41px; min-height: 455px; background: #2c000d url(../../../images/stm/front/bg/bg_login_content.jpg) no-repeat 50% 0; box-sizing: border-box; }
#container .center-wrap { overflow: hidden; }
#container .center-wrap .block { float: left; height: 180px; }
#container .center-wrap .block > div { height: 100%; }
#container .center-wrap .block h2 { font-family: "Malgun Gothic"; font-size: 21px; line-height: 15px; color: #928067; font-weight: bold; }
#container .center-wrap .block h2 span { color: #000; }
#container .center-wrap .block h2 span:before { content: ''; display: inline-block; height: 15px; margin: 1px 8px 0 0; vertical-align: top; border-left: 1px solid #cbcabd; }
#container .center-wrap .services { float: left; width: 64.9%; }
#container .center-wrap .services .block { width: 33.33%; box-sizing: border-box; position: relative; }
#container .center-wrap .services .block > div { position: absolute; z-index: 0; top: 0; bottom: 0; right: 15px; left: 0; }
#container .center-wrap .services .block > div > span { display: block; text-align: center; color: #fff; font-family: "Malgun Gothic"; }
#container .center-wrap .services .block > div > span.image { position: relative; margin: 33px auto 0; width: 63px; height: 63px; border-radius: 100%; }
#container .center-wrap .services .block > div > span.image img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#container .center-wrap .services .block > div > span.meta { margin-top: 7px; font-size: 24px; font-weight: bold; }
#container .center-wrap .services .block > div > span.meta span.suffix { display: inline-block; margin-top: 2px; font-size: 15px; vertical-align: top; }
#container .center-wrap .services .block > div > span.text { display: block; margin-top: 9px; color: #fff; font-family: "Malgun Gothic"; font-size: 15px; font-weight: bold; text-align: center; text-decoration: none; }
#container .center-wrap .services .block.new > div > span.image:after { position: absolute; top: 0; right: -15px; }
#container .center-wrap #login { float: right; width: 35.1%; }
#container .center-wrap #login > div { position: relative; background: #fff; padding: 25px; box-sizing: border-box; display: none; }
#container .center-wrap #login > div.active { display: block; }
#container .center-wrap #login .btn-close { overflow: hidden; position: absolute; top: 27px; right: 25px; width: 16px; height: 15px; text-indent: -99999px; background: url(../../../images/stm/front/btn/btn_close2.png) no-repeat 50%; }
#container .center-wrap #login .btns { overflow: hidden; margin-top: 19px; }
#container .center-wrap #login .btns button { float: left; padding: 0; height: 96px; width: 50%; color: #fff; border: 0; font-weight: bold; font-size: 15px; line-height: 20px; outline: 0; }
#container .center-wrap #login .btns button.btn-campus-users { background: #a91539; }
#container .center-wrap #login .btns button.btn-other-users { background: #292929; }
#container .center-wrap #login .form { position: relative; margin-top: 19px; padding-right: 90px; box-sizing: border-box; font-family: "Malgun Gothic"; }
#container .center-wrap #login .form button { position: absolute; width: 80px; height: 71px; top: 0; right: 0; border: 0; font-family: "Malgun Gothic"; font-size: 15px; font-weight: bold; color: #fff; }
#container .center-wrap #login .form input[type=text], #container .center-wrap #login .form input[type=password] { width: 100%; height: 36px; padding-left: 19px; border: 1px solid #dedede; box-sizing: border-box; font-family: "Malgun Gothic"; font-size: 13px; outline: 0; background: #fbfbfb; color: #a0a0a0; }
#container .center-wrap #login .form input[type=text]:focus, #container .center-wrap #login .form input[type=password]:focus { border-color: #bea27a; position: relative; z-index: 10; }
#container .center-wrap #login .form input[type=text].active, #container .center-wrap #login .form input[type=password].active { color: #000; font-weight: bold; }
#container .center-wrap #login .form input + [type=text], #container .center-wrap #login .form input + [type=password] { margin-top: -1px; }
#container .center-wrap #login .form a.forgotpass { display: inline-block; margin-top: 10px; font-size: 13px; color: #535353; text-decoration: none; position: absolute; top: 100%; left: 0; }
#container .center-wrap #login .form a.forgotpass:before { display: inline-block; margin-right: 6px; vertical-align: top; margin-top: 7px; }
#container .center-wrap #login .login-other-users h2 { color: #1b1b1b; }
#container .center-wrap #login .login-other-users h2 span { color: #7f7e7e; }
#container .center-wrap #login .login-other-users h2 span:before { border-left: 1px solid #d2d2d2; }
#container .center-wrap #login .login-other-users .form button { background: #292929; }
#container .center-wrap #login .login-other-users .form a.forgotpass:before { content: url(../../../images/stm/front/bul/bul_11.png); }
#container .center-wrap #login .login-campus-users h2 { color: #1b1b1b; }
#container .center-wrap #login .login-campus-users h2 span { color: #a01a3b; }
#container .center-wrap #login .login-campus-users h2 span:before { border-left: 1px solid #d2d2d2; }
#container .center-wrap #login .login-campus-users .form button { background: #a91539; }
#container .center-wrap #login .login-campus-users .form a.forgotpass:before { content: url(../../../images/stm/front/bul/bul_12.png); }
#container .center-wrap #search > div { background: #c30b34; }
#container .center-wrap #search > div > span.image { background: #d93156; }
#container .center-wrap #search.new > div > span.image:after { content: url(../../../images/stm/front/icon/icon_banner_01_status_new.png); }
#container .center-wrap #company > div { background: #ff8f38; }
#container .center-wrap #company > div > span.image { background: #fdb055; }
#container .center-wrap #company.new > div > span.image:after { content: url(../../../images/stm/front/icon/icon_banner_02_status_new.png); }
#container .center-wrap #lab > div { background: #979087; }
#container .center-wrap #lab > div > span.image { background: #aaa59d; }
#container .center-wrap #lab.new > div > span.image:after { content: url(../../../images/stm/front/icon/icon_banner_03_status_new.png); }
#container .center-wrap #lab ~ div { margin-top: 15px; }
#container .center-wrap #achievement > div { background: #f36339; }
#container .center-wrap #achievement > div > span.image { background: #fb854b; }
#container .center-wrap #achievement.new > div > span.image:after { content: url(../../../images/stm/front/icon/icon_banner_04_status_new.png); }
#container .center-wrap #info > div { background: #ba7e5b; }
#container .center-wrap #info > div > span.image { background: #cd926f; }
#container .center-wrap #info.new > div > span.image:after { content: url(../../../images/stm/front/icon/icon_banner_05_status_new.png); }
#container .center-wrap #announcement > div { background: #413d39; }
#container .center-wrap #announcement > div > span.image { background: #65605a; }
#container .center-wrap #announcement.new > div > span.image:after { content: url(../../../images/stm/front/icon/icon_banner_06_status_new.png); }
#container .center-wrap #link_service { float: right; width: 35.1%; margin-top: 15px; }
#container .center-wrap #link_service > div { position: relative; background: #f4f4f4; padding: 25px; box-sizing: border-box; }
#container .center-wrap #link_service > div h2 { color: #898989; }
#container .center-wrap #link_service > div h2 span { color: #000; }
#container .center-wrap #link_service > div h2 span:before { border-left: 1px solid #cacaca; }
#container .center-wrap #link_service > div .flexslider { margin-top: 19px; background: #fff; border: 1px solid #e0e4e7; border-radius: 0; padding: 17px; font-family: "Malgun Gothic"; }
#container .center-wrap #link_service > div .flexslider ul.slides > li span { display: block; }
#container .center-wrap #link_service > div .flexslider ul.slides > li span.image { float: left; position: relative; width: 53px; height: 60px; margin-right: 14px; }
#container .center-wrap #link_service > div .flexslider ul.slides > li span.image img { max-width: 100%; max-height: 100%; width: auto; height: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#container .center-wrap #link_service > div .flexslider ul.slides > li span.type { color: #958a78; font-size: 9px; line-height: 9px; text-transform: uppercase; margin-bottom: 5px; }
#container .center-wrap #link_service > div .flexslider ul.slides > li span.title { color: #910023; font-size: 15px; font-weight: bold; }
#container .center-wrap #link_service > div .flexslider ul.slides > li a.btn-go { overflow: hidden; display: block; margin-top: 8px; width: 51px; height: 19px; text-indent: -999px; background: url(../../../images/stm/front/btn/btn_go.jpg) no-repeat; }
#container .center-wrap #link_service > div .flexslider .flex-control-paging { width: auto; bottom: auto; top: -32px; right: 19px; }
#container .center-wrap #link_service > div .flexslider .flex-control-paging li { margin: 0 0 0 5px; }
#container .center-wrap #link_service > div .flexslider .flex-control-paging li a { width: 9px; height: 9px; border: 1px solid #c0c0c0; }
#container .center-wrap #link_service > div .flexslider .flex-control-paging li a:hover { background: #fff; border-color: #c0c0c0; }
#container .center-wrap #link_service > div .flexslider .flex-control-paging li a.flex-active, #container .center-wrap #link_service > div .flexslider .flex-control-paging li a.flex-active:hover { background: #898989; border-color: #898989; }
#container .center-wrap #link_service > div .flexslider .flex-pauseplay a { top: -32px; right: 0; bottom: auto; left: auto; width: 8px; height: 11px; }
#container .center-wrap #link_service > div .flexslider .flex-pauseplay a.flex-pause:before { content: url(../../../images/stm/front/btn/btn_stop2.png); }
#container .center-wrap #link_service > div .flexslider .flex-pauseplay a.flex-play:before { content: url(../../../images/stm/front/btn/btn_play2.png); }

#flogin { max-width: 458px; padding: 5px 0 10px 0; margin: 0 auto; box-sizing: border-box; }
#flogin .flogin-top h1 { margin-bottom: 13px; font: bold 32px/32px 'Malgun Gothic'; color: #1b1b1b; }
#flogin .flogin-top .subtitle { color: #a79173; font: normal 13px/18px 'Malgun Gothic'; }
#flogin .flogin-tabs .login-tabs { width: 100%; height: 48px; margin-top: 30px; display: table; table-layout: fixed; }
#flogin .flogin-tabs .login-tabs li { float: left; width: 50%; height: 48px; box-sizing: border-box; vertical-align: middle; text-align: center; }
#flogin .flogin-tabs .login-tabs li a { display: block; width: 100%; height: 47px; color: #959595; background: #f8f8f8; text-decoration: none; font: bold 17px/46px 'Malgun Gothic'; border-top: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; box-sizing: border-box; border-bottom: 1px solid #a91539; }
#flogin .flogin-tabs .login-tabs li.on { background: #fff; }
#flogin .flogin-tabs .login-tabs li.on a { color: #000; background: #fff; border-color: #a91539; border-bottom: none; }
#flogin .flogin-tabs .login-tabs li:first-child a { border-right: 0; }
#flogin .flogin-tabs .login-tabs li:first-child.on + li a { border-left: 1px solid #a91539; }
#flogin .flogin-tabs .form { display: table; width: 100%; table-layout: fixed; margin-top: 30px; }
#flogin .flogin-tabs .form .inputs { display: table-cell; padding-right: 15px; vertical-align: top; }
#flogin .flogin-tabs .form .inputs.hide { display: none; }
#flogin .flogin-tabs .form .inputs input[type=text], #flogin .flogin-tabs .form .inputs input[type=password] { width: 100%; height: 48px; padding: 0 0 0 17px; box-sizing: border-box; border: 1px solid #d0d0d0; font-size: 14px; color: #898989; }
#flogin .flogin-tabs .form .inputs input[type=text]:first-child, #flogin .flogin-tabs .form .inputs input[type=password]:first-child { border-bottom: 0; }
#flogin .flogin-tabs .form .inputs input[type=text].active, #flogin .flogin-tabs .form .inputs input[type=password].active { border: 1px solid #bea27a; color: #1b1b1b; }
#flogin .flogin-tabs .form .inputs input[type=text].active:first-child, #flogin .flogin-tabs .form .inputs input[type=password].active:first-child { border-bottom: 0; }
#flogin .flogin-tabs .form .inputs input[type=text].active:first-child + input, #flogin .flogin-tabs .form .inputs input[type=password].active:first-child + input { border-top: 1px solid #bea27a; }
#flogin .flogin-tabs .form .buttons { display: table-cell; width: 103px; vertical-align: top; }
#flogin .flogin-tabs .form .buttons button { width: 100%; height: 96px; background: #d31d4e; color: #fff; font-size: 16px; font-weight: bold; border: 1px solid #d31d4e; border-bottom: 1px solid #950e2a; }
#flogin .flogin-tabs .form .buttons button:before { content: ''; display: block; height: 29px; margin-bottom: 3px; background: url(../../../images/stm/front/icon/icon_lockpink.png) no-repeat 50% 0; }
#flogin .flogin-tabs .form-bottom { margin-top: 20px; }
#flogin .flogin-tabs .form-bottom.hide { display: none; }
#flogin .flogin-tabs .form-bottom .forgot { padding-left: 10px; color: #535353; text-decoration: none; font-size: 12px; line-height: 14px; background: url(../../../images/stm/front/bul/bul_12.png) no-repeat 0 3px; }
#flogin .flogin-tabs .form-bottom .notice { margin-top: 28px; padding: 12px 9px 13px 9px; background: #3a3a3a; color: #d2d2d2; border-top: 1px solid #a91539; }
#flogin .flogin-tabs .form-bottom .notice strong { color: #fff; font-weight: bold; }
#flogin .flogin-tabs .form-bottom .notice span { display: block; padding-left: 25px; font-size: 13px; line-height: 18px; background: url(../../../images/stm/front/icon/icon_notice.png) no-repeat 0 1px; }
#flogin .flogin-tabs .form-bottom .contact-list { border-bottom: 1px solid #b6b6b6; }
#flogin .flogin-tabs .form-bottom .contact-list li { padding: 9px 0; font: normal 13px 'Malgun Gothic'; color: #626262; border-top: 1px solid #dfdfdf; }
#flogin .flogin-tabs .form-bottom .contact-list li .label { display: inline-block; width: 54px; height: 22px; margin-right: 10px; padding-left: 7px; border: 1px solid #d16257; color: #ffffff; font: normal 11px/20px 'Malgun Gothic'; background: #d86f63 url(../../../images/stm/front/bul/bul_13.png) no-repeat 50px 50%; }
#flogin .flogin-tabs .form-bottom .contact-list li .label.type2 { background-color: #936c6a; border-color: #87605e; }

@media screen and (max-width: 1023px) { #container .flogin { padding-top: 15px; padding-bottom: 15px; } }
@media screen and (min-width: 640px) and (max-width: 767px) { #container .center-wrap #login, #container .center-wrap #link_service { height: 249px; }
  #container .center-wrap #login .btns button { height: 82px; width: 100%; }
  #container .center-wrap #login .btns button br { display: none; }
  #container .center-wrap #login .btns button + button { margin-top: 1px; }
  #container .center-wrap #login .form { padding-right: 0; }
  #container .center-wrap #login .form button { position: relative; width: 100%; height: 47px; margin-top: 10px; }
  #container .center-wrap #link_service > div .flexslider ul.slides > li span { text-align: center; }
  #container .center-wrap #link_service > div .flexslider ul.slides > li span.image { float: none; margin: 0 auto; }
  #container .center-wrap #link_service > div .flexslider ul.slides > li span.type { margin-top: 12px; }
  #container .center-wrap #link_service > div .flexslider ul.slides > li a.btn-go { margin: 6px auto 0; } }
@media screen and (min-width: 640px) and (max-width: 1023px) { #container .center-wrap { position: relative; }
  #container .center-wrap .services { width: 100%; padding-left: 15px; box-sizing: border-box; }
  #container .center-wrap #login > div, #container .center-wrap #link_service > div { position: absolute; z-index: 0; top: 0; bottom: 0; right: 15px; left: 0; }
  #container .center-wrap #login { position: relative; float: left; margin-bottom: 15px; width: 50%; }
  #container .center-wrap #login > div { right: 7px; left: 15px; }
  #container .center-wrap #link_service { position: absolute; top: 0; right: 0; margin-top: 0; width: 50%; }
  #container .center-wrap #link_service > div { left: 8px; } }
@media screen and (max-width: 639px) { #container .center-wrap { position: relative; }
  #container .center-wrap .services { float: none; width: auto; padding-left: 15px; padding-right: 3px; box-sizing: border-box; overflow: hidden; }
  #container .center-wrap .services .block { width: 50%; margin-top: 12px !important; margin-bottom: 0 !important; }
  #container .center-wrap .services .block > div { right: 12px; }
  #container .center-wrap #login, #container .center-wrap #link_service { float: none; width: auto; margin-right: 15px; margin-left: 15px; }
  #container .center-wrap #link_service > div { padding-left: 15px; padding-right: 15px; }
  #container .center-wrap #link_service > div .flexslider { padding: 0; border: 0; background: none; }
  #container .center-wrap #login .form a.forgotpass:before { margin-top: 5px; }
  #flogin .flogin-tabs .form .inputs { display: block; width: 100%; padding-right: 0; }
  #flogin .flogin-tabs .form .buttons { display: block; width: 100%; margin-top: 15px; }
  #flogin .flogin-tabs .form .buttons button { height: 49px; line-height: 40px; vertical-align: middle; }
  #flogin .flogin-tabs .form .buttons button:before { float: left; width: 19px; height: 23px; margin-top: 7px; margin-left: 4px; background: url(../../../images/stm/front/icon/icon_lockpink_02.png) no-repeat 0 0; } }

/*# sourceMappingURL=login.css.map */