@charset "utf-8";
@import url('base.css');

.placeholder {color: red !important; }
body#login {background: #fff url(/btob/img/login/bg_body.gif) repeat-x 0 0;}
#loginWrap {width: 100%;}
#loginHeader {position: relative; z-index: 1; width: auto; height: 84px; }
#loginHeader .inner {width: 880px; margin: 0 auto;}
#loginHeader h1 {float: left; margin: 23px 0 0 0;}
.loginBox {float: right; width: 440px; position: relative; margin: 18px 0 0 0;}
.inputBox {float: left; position: relative; margin-right: 5px; _margin-right: 3px; }
.inputBox .label {position: absolute; top: 4px; left: 10px; color: #b4b9be; visibility: hidden;}
.inputBox input {width: 164px; height: 26px; padding-left: 7px; border: 1px solid #272727; vertical-align: top; *vertical-align: middle; line-height: 26px; color: #b4b9be; font-size: 12px;}
.chkId {position: absolute; top: 33px; left: 0; color: #a5acb2;}
.prettycheckbox {display : inline-block; zoom: 1; *display: inline; padding: 0; margin: 0; margin-top: 0; margin-bottom: -2px; }
.prettycheckbox a{ width: 15px; height: 15px; background: url(/btob/img/login/checkbox.gif) no-repeat 0 0; }
.prettycheckbox a.checked {background-position: 0 -15px;}
.btnLink {position: absolute; top: 33px; right: 6px; }
.btnLink a {color: #a5acb2; background: url(/btob/img/login/bul_dot_v.gif) no-repeat 0 4px; padding: 0 0 0 8px;}
.btnLink a.first {background: none; padding-left: 0;}

#loginContainer {}
.mainVisual {position: relative; width: 850px; height: 552px; margin: 0 auto; padding: 50px 0 0 30px; background: url(/btob/img/login/bg_main_visual.jpg) no-repeat 0 0; }
.mainVisual .mobile {position: absolute; right: 64px; top: 102px;}
.mainVisual .txt {float: left; }
.mainVisual .txt span {display: block; font-size: 60px; line-height: 50px; letter-spacing: -1px;}
.mainVisual .txt .t1 {font-size: 26px; font-family:'NanumGothicBold'; color: #ffffff; line-height: 37px;}
.mainVisual .txt .t2 {margin-top: 8px; font-family:'NanumGothicBold'; color: #444a57; font-size: 40px;}
.mainVisual .txt .t3 {margin-top: 0px; font-family:'NanumGothicBold'; color: #444a57; font-size: 40px;}
.mainVisual .txt .t4 {font-family:'NanumGothicBold'; color: #444a57; font-size: 40px}
.mainVisual .txt .t5 {margin-top: 10px; font-family:'NanumGothicExtraBold'; color: #f25b6a;}
.mainVisual .nav {position: absolute; left: 30px; bottom: 140px; font-weight:bold;}
.mainVisual .nav li {float: left; padding: 0 12px; background: url(/btob/img/login/bg_bar.gif) no-repeat 0 50%; font-size: 20px; font-family:'NanumGothic';}
.mainVisual .nav li.first {padding-left: 0; background: none;}
.mainVisual .nav li a,
.mainVisual .nav li a:visited,
.mainVisual .nav li a:hover,
.mainVisual .nav li a:active {color: #ffffff;}
.mainVisual .pic {float: right;}
.mainVisual .google {position: absolute; left: 30px; bottom: 170px;}
.loginContent h2 {width: 206px; height: 42px; margin: 0 auto; background: url(/btob/img/login/bg_title.png) no-repeat 0 0; font-family:'NanumGothic'; color: #fff; text-align: center; line-height: 36px;}

.loginContent .service {position: relative; width: 880px; margin: 0 auto; padding: 1px 0 0 0; margin-bottom: 43px; overflow: hidden;}
.loginContent .service .inner {padding: 0 0 0 135px; overflow: hidden;}
.loginContent .service ul {padding-top: 40px;}
.loginContent .service h3 {margin: 12px 0 15px 0; font-size: 22px; font-family:'NanumGothicBold'; color: #272727;}
.loginContent .service h3.row2 {margin: 20px 0 15px}
.loginContent .service li {float: left; width: 380px; margin-bottom: 65px;}
.loginContent .service li.last {width: 360px;}
.loginContent .service span {display: inline-block;}
.loginContent .service .ico01 {margin: 20px 0 15px 0;}
.loginContent .service .ico02 {margin: 0 0 0 40px;}
.loginContent .service .ico03 {margin: 12px 0 10px 0;}
.loginContent .service .ico04 {margin: 0 0 0 60px;}
.loginContent .service p {font-size: 12px; font-family:'NanumGothicBold'; color: #4e4e4e; line-height: 19px;}
.loginContent .hor {width: 100%; height: 3px; background: url(/btob/img/login/bg_line.gif) repeat-x 0 0;}

.loginContent .function {position: relative; width: 880px; margin: 0 auto; padding: 88px 0 35px 0; overflow: hidden;}
.loginContent .function h3 {margin: 30px 0 0 0; padding-left: 6px; font-size: 22px; font-family:'NanumGothicBold'; color: #f56e57;}
.loginContent .function p {padding-left: 6px; font-size: 12px; font-family:'NanumGothicBold'; color: #4e4e4e;}
.loginContent .function ul {padding-top: 50px;}
.loginContent .function li {float: left; width: 265px; _width: 234px; height: 233px; padding: 0 0 0 30px; margin-bottom: 70px; background: url(/btob/img/login/bg_dot_ver.gif) repeat-y 100% 0;}
.loginContent .function li.first {width: 260px;}
.loginContent .function li.last {background: none;}
.loginContent .function span {display: block;}
.loginContent .function .ico01 {margin: 0 0 0 48px; }
.loginContent .function .ico02 {margin: 0 0 0 52px; }
.loginContent .function .ico03 {margin: 7px 0 0 78px; }
.loginContent .function .ico04 {margin: 0 0 0 80px; }
.loginContent .function .ico05 {margin: 0 0 0 20px; }
.loginContent .function .ico06 {margin: 0 0 0 64px; }
.loginContent .function li ul {padding-top: 16px; overflow: hidden; _padding-top: 4px}
.loginContent .function li ul li {height: auto; padding: 0 0 0 7px; margin-bottom: 0; background: url(/btob/img/login/bul_dot.gif) no-repeat 0 5px; font-size: 12px; color: #898989; line-height: 16px;}

.loginContent .use {position: relative; width: 880px; margin: 0 auto 95px; padding: 70px 0 85px 0; overflow: hidden;}
.loginContent .use .img {margin: 80px 0 25px 0;}
.loginContent .use li {float: left; font-size: 18px; font-family:'NanumGothicBold'; color: #2a2a2a; line-height: 24px;}
.loginContent .use li.a {width: 325px; }
.loginContent .use li.b {width: 290px;}
.loginContent .use li.c {width: 260px;}
.loginContent .use li .numWrap {}
.loginContent .use li .numWrap span {}
.loginContent .use li .numWrap .num {display: inline-block; *display:inline;*zoom:1; width: 48px; height: 48px; background: url(/btob/img/login/bg_num.gif) no-repeat 0 0; font-size: 28px; color: #fff; text-align: center; line-height: 48px; vertical-align: middle;}
.loginContent .use li .txt {display: inline-block; *display:inline;*zoom:1; vertical-align: middle;}
.loginContent .use li .desc {margin-top: 15px; font-size: 12px; font-family: "����", gulim; color: #6e6e6e; line-height: 18px; }
.loginContent .service .top,
.loginContent .function .top,
.loginContent .use .top {position: absolute; right:0; bottom:0; }

#loginFooter {position: relative; clear: both; width: 100%; height: 33px; padding: 6px 0 6px; border-top: 1px solid #cbcbcb; background-color: #f0f0f0;}
#loginFooter .help {display: inline-block; position: absolute; left: 17px; top: 11px;}
#loginFooter .util {display: inline-block; position: absolute; right: 19px; top: 11px;}
#loginFooter .util  a {display: block; float: left; padding: 0 8px; background: url(/btob/img/common/bg_util.gif) no-repeat 0 4px;}
#loginFooter .util  a.first {background: none;}
#loginFooter .info {display: inline-block; width: 100%; padding: 5px 0 0 0;text-align: center; vertical-align: middle;}