#container,
#footer {clear:both; }

body {background:#f1f4fa; text-align: center; }
.cg-box {box-shadow:0 0 40px rgba(0,0,58,0.25); position: relative; width:100%;}

.cg-start {clear:both;  margin:170px 0 0 0; width:910px; display: inline-block;}
.cg-start h1 {font-size:3.5em; color:#444444; font-weight: 600; font-family:arial; letter-spacing:-2px; text-align:left; }
.cg-start .fm-login {position: absolute; left:40px; top:-40px; z-index: 1000; width:50%;  height:560px;  text-align:left; padding:70px 50px 0 50px; background:#fff; box-shadow:0 0 35px rgba(0,0,58,0.1);}

.cg-help { color:#888; font-weight:300;}
.cg-help i {font-size:1.1em;  margin:2px 2px 5px 10px; vertical-align: middle;}
.cg-footer {position:absolute; bottom:0; left:0; width:100%; height:75px; line-height:150%; text-align:left;  padding:15px 7px 15px 25px; background:#f6f6f6; font-size:0.9em; color:#666666; font-weight:300; letter-spacing: 0;}
.cg-footer > div a {color:#666666;}
.cg-footer > div a:hover {color:#000;}
.cg-footer .ico-dot {font-size:0.6em; color:#888; margin:0 5px; vertical-align: middle; }
.cg-footer > span {font-size:0.8em;}


/* 로그인 */
.sign-login {padding:3% 0 0 0;}
.login-form {display: inline-block; width:100%;}
.login-inp {width:100%; float:left;}

.login-inp-button button,
.login-inp-button02 button { border-radius:23px;  font-size:1.6em; font-weight:400; padding:8px 10px 14px 10px;}
.login-inp-button button {float:right; height:46px;  width:140px; margin-top:6px; }
.login-inp-button02 button {height:90px; width:160px; font-size:1.2em; }
.login-inp-button02 button i {display:block; margin-bottom:5px; font-size:1.7em;}
.login-inp p {border:1px solid #ddd; border-radius:7px; text-align: left; display: inline-block; width:100%; padding:11px 15px 11px 15px; margin-bottom:6px;}
.login-inp p label {float:left; width:90px; color:#888; font-size:1.2em; padding:2px 5px 0 0;  }
.login-inp p label i {font-size:1.8em; line-height:120%; }
.login-inp p input {float:left; width:calc(100% - 90px);  border-radius:5px; padding:3px 4px; color:#888; font-size:1.15em; letter-spacing: 0; border:1px solid #cccccc;}
.login-inp select {float:right; background:#fff; box-shadow:1px 2px 2px rgba(0,0,0,0.03); border:1px solid #cccccc; font-size:1.15em; border-radius:5px; width:43%; margin-top:2px; margin-bottom:10px; padding:5px; color:#575757; box-sizing:border-box;}

.pw-reset {float:right; display: inline-block;  }
.pw-reset a {color:#444; font-size:1.1em; font-weight:300; padding:4px 0;}
.pw-reset a i {font-size:1.1em; color:#222; vertical-align: middle; margin-bottom:2px;}
.pw-reset a:hover {color:#000;}
.com-list {border-top:#ccc 1px solid; margin-top:25px; padding-top:18px;}

.login-set {padding:0 0 8px 0; display: inline-block; width:100%;}
.login-set .login-cb {float:left; color:#444; padding-left:10px; text-align:left;}
.login-set .cg-help {clear:both; float:left; padding-top:6px;}

.tab-menu { width:100%; text-align:center; overflow:hidden; margin:25px auto; } 
.tab-menu ul {}
.tab-menu li { padding:9px 0; width:calc(50%); float:left; background:#f7f7f7; color:#666; cursor:pointer; font-size:1.15em; border:#01c0c8 1px solid; font-weight:400;} 
.tab-menu li:hover,
.tab-menu li.on { background:#01c0c8; color:#fff; }
.tab-contents {position:relative; width: 100%; }  
.tab-contents > div { display:none; text-align:center; } 
.tab-contents > div.on{display:block; }

/* 배경 */
.login-bg {background:url("../img/bg.png") 50% 0 no-repeat; background-size: auto 100% ; width:100%; height:490px; text-align: right; padding:50px 45px 50px 0;}
.login-title h3 {color:#fff; font-size:2em; font-weight:300; letter-spacing:-1px; margin:60px 0 20px 0;}
.login-title h3 br {display:none;}
.login-title hr {background:#fff; width:35px; height:1px; float: right; border:0;  }
.login-title .sub-title {display:inline-block; width:100%; color:#fff; font-size:1.2em; margin-top:15px; font-weight:300; letter-spacing:-0.5px; line-height:150%;}
.etc-link {position:absolute; right:-81%; bottom:80px; z-index:1000;}
.etc-link a {display:inline-block; width:80px; height:80px; border-radius:40px; background:rgba(255,255,255,0.2); text-align: center; color:#fff; margin-left:8px; line-height:200%; padding-top:12px; box-shadow: 3px 3px 10px rgba(0,0,0,0.1);  }
.etc-link a:hover {background:rgba(106,11,182,0.4);}
.etc-link a i {display:block; text-align: center; font-size:2.2em;}

/* 공통 */
.md-v {display: none;}
.text-left {text-align:left;}
.ico-dot {font-size:10px; padding:0 3px; }
.device-out {overflow:hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
.eng {font-family:arial;}


/* 버튼 */
button.btn-skyblue {background:#4061c5; color:#fff; box-shadow:0 0 15px rgba(64, 97, 197, 0.7); text-align: center; letter-spacing:0;}
button.btn-skyblue:hover {background:#4a73ee; color:#fff;}
button.btn-white {background:#fff; color:#666; box-shadow:0 0 15px rgba(0, 0, 0, 0.15); text-align: center; letter-spacing:0; border:#ddd 1px solid;}
button.btn-white:hover {color:#444; border:#4061c5 1px solid;}

button:disabled,
button:disabled:hover {box-shadow:none; background:#dedede; color:#888; border:#777 1px solid; border-color:#aaa #ddd #ddd #aaa; cursor: not-allowed; text-shadow:2px 2px 0 #fff;}


/* 로그아웃 */
.cg-start.logout {margin:170px 0 0 0; width:500px;}
.cg-start.logout .fm-login {width:84%; height:410px; padding:60px 45px 0 ;}
.cg-start.logout .login-bg {height:410px; padding:0;}
.logout .material-icons {font-size:2em; color:#666;}
.logout-layout {display:inline-block !important; border:#ddd 2px dashed; border-radius:13px; padding:35px 15px; margin-top:20px; width:100%; text-align:center; font-size:1.6em; font-weight:200;}
.logout-layout button { position: relative; font-size:0.8em; margin:20px 2px 0;  border-radius:23px; padding:13px 40px 11px 30px; }
.logout-layout button i {position:absolute; right:14px; top:14px; color:#fff !important; font-size:1.1em !important; line-height:80%; vertical-align: middle; }
.logout-layout button.btn-white i  {color:#444 !important;}


/* ================================= 모바일 & 태블릿 ================================= */

@media screen and (max-width: 1024px) {

  .cg-start {margin:130px 0 0 0;}

}


@media screen and (max-width: 930px) { 

  .cg-start { width:100%; }
  .cg-box {width:96%; margin:0 auto;}
  .cg-start .fm-login {width:52%;}
  .etc-link {right:-70%;}

}


@media screen and (max-width:768px) { 

  .login-bg {padding:40px 35px 50px 0;}
  .cg-start {margin:150px 0 0 0;}
  .cg-start .fm-login {width:54%; left:30px; padding:60px 40px 0 40px;}

}


@media screen and (max-width:736px) { 

  body {background:url("../img/bg02.png") 50% 0;}
  .login-bg {background:none; padding:30px 30px 0 30px; text-align:left; height:400px; }
  .login-title h2 {display:inline-block; float:left; }
  .login-title h3 {display:inline-block; float:right; margin:0; font-size:1.6em; }
  .login-title hr {display:none; }
  .login-title .sub-title {display:none;}
  .cg-start {margin:0;}
  .cg-start .fm-login {height:auto; width:calc(100% - 60px); top:85px; padding:40px 40px 100px 40px;}
  .cg-box {width:100%; box-shadow: none;}
  .etc-link {right:0; bottom:-55px; margin-bottom:20px;}
  .etc-link a {background:none;  border-radius:0; box-shadow:none; width:auto; height:auto; padding:0 3px 0 10px; font-size:1em; font-weight:400; vertical-align: middle; }
  .etc-link a:hover,
  .etc-link a:focus {background:none; color:#4a73ee;}
  .etc-link a i {display:inline-block; font-size:1.1em; vertical-align: middle; margin-right:2px;}
  .etc-link a:nth-of-type(2) i {font-size:1.2em;}

  /* 로그아웃 */
  .cg-start.logout {margin:30px 0 0 0; width:100%;}
  .cg-start.logout h1 {font-size:3em; text-align: center;}  
  .cg-start.logout .fm-login {top:10px; padding:40px; height:auto; width:calc(100% - 60px);}
  .cg-start.logout .login-bg {display: none;}


}


@media screen and (max-width:414px) { 

  .cg-start .fm-login {padding:40px 30px 100px 30px;}
  .login-title h3 {font-size:1.2em; text-align: right; line-height:120%; padding-top:4px;}
  .sign-login .cg-help i {margin-left:0;}
  
}


@media screen and (max-width:375px) { 
  .login-bg {padding:20px 15px 0 15px;}
  .cg-start .fm-login { left:10px; top:75px; width:calc(100% - 20px);}
  .tab-menu {margin:15px auto;}
  .tab-menu li {font-size:1.1em;}
  .login-inp-button02 {padding:20px 0 26px 20px;}
  .login-title h3 br {display:block;}

  /* 로그아웃 */
  .cg-start.logout .fm-login {top:-20px; left:10px; height:auto; width:calc(100% - 20px);}

}


@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) /* iPhone 5 */ { 
  .login-inp p {padding:5px 10px 3px 10px; margin-bottom:3px;}
  .cg-start h1 {font-size:3em;}
  .cg-start .fm-login {padding:20px 20px 100px 20px;}
  .sign-login .login-inp-button02 {padding:8px 0 10px 0}
}


/* modal 팝업 */
.modal-open { overflow: hidden; }
.modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; }
.modal-dialog {  position: relative;  width: auto;  margin: 10px; }
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }
.modal-dialog .close {  float: right;  font-size: 20px;  line-height: 1;  color: #fff;  text-shadow: none;  filter: alpha(opacity=20); opacity: 1;  font-weight: normal;  margin-top:-2px; }
.modal-content { position: relative;  background-color: #ffffff;  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);  -webkit-background-clip: padding-box; background-clip: padding-box; outline: 0; }
.modal-backdrop { position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 1040;  background-color: #000000; }
.modal-backdrop.fade { opacity: 0; filter: alpha(opacity=0); }
.modal-backdrop.in { opacity: 0.75;  filter: alpha(opacity=75); }
.modal-header { padding: 13px 15px; background-color:#01c0c8; color: #fff; text-align:left; }
.modal-title { margin: 0; line-height: 1.42857143; font-size:15px; font-weight:400; }
.modal-body { position: relative; padding:25px 25px  25px; }
.modal-body .body-title { text-align:left; padding-bottom:5px; font-size:14px; font-weight:400; }
.modal-body .body-title i { font-size:18px; vertical-align:middle; margin:-2px 2px 0 0; }
.modal input { font-size:12px !important; font-weight:400; }
.modal-footer { padding: 10px; text-align: right; border-top: 1px solid #e5e5e5; background:#f0f0f0; }
.modal .login-inp { width:100%;  padding:0; }
.modal .login-inp p  {margin-bottom:0; padding:7px 9px;}
.modal .btn-skyblue { width:100%; height:auto; padding:9px 8px; font-size:14px; margin-top:5px; box-shadow: none; }
.modal .btn-skyblue i { font-size:15px; vertical-align: middle; margin:-4px 2px 0 0; }
.modal-help { display:inline-block; text-align:center; font-size:13px; padding:12px 0; color:#222; font-weight:300; width:100%; }


@media (min-width: 768px) {
  
  .modal-dialog { width: 600px; margin: 100px auto; }
  .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
  .modal-sm { width: 400px; }

}

@media (min-width: 992px) {

  .modal-lg { width: 900px; }

}