@charset "utf-8";
/* 로그인 후 요소 안 보이게 처리 */
/* #viewType, #myName {display: none;} */
/* #loginForm {display: none;} */

/* common */
header{clear: both; float: left; width: 100%; background: rgba(85,191,247,0.7);}
#loginForm form {float: left; width: 100%;}
#viewType {clear: both; width: 100px; height: 25px; margin: 0 auto; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
#meLink {float: left; width: 50%; height: 17px; border-right: 1px solid #ccc; text-align: center; padding: 8px 0 0 0; color: #aaa;}
#allLink {float: left; width: 49%; height: 17px; text-align: center; padding: 8px 0 0 0; color: #aaa;}

@media screen and (max-width: 366px) {
  #myService {font-size: 1.5rem;}
  #loginEmailArea label, #loginPwArea label {font-size: 1rem;}
  #loginEmailArea input, #loginPwArea input {font-size: 1rem;}
  .loginSubmitBox {padding: 0.2rem;}
  #loginSubmit {font-size: 1rem;}
}
@media screen and (min-width: 367px) and (max-width: 458px) {
  #myService {font-size: 1.7rem;}
  #loginEmailArea label, #loginPwArea label {font-size: 1.2rem;}
  #loginEmailArea input, #loginPwArea input {font-size: 1.2rem;}
  .loginSubmitBox {padding: 0.2rem;}
  #loginSubmit {font-size: 1rem;}
}

/* mobile */
@media screen and (min-width: 459px) and (max-width: 1199px) {
  #myService {float: left ;color: #fff; width: 100%; font-size: 2rem; text-align: center; margin-bottom: 1rem;}

  /* loginForm */
  #loginForm {clear: both;}
  #loginEmailArea, #loginPwArea {clear: both; float: left; width: 100%;}
  #loginPwArea {margin-top: 0.4rem;}
  .loginInputBox {float: left; width: 59%; border: 1px solid #ccc; background: #fff;}
  #loginEmailArea label, #loginPwArea label {float: left; width: 25%; padding-left: 1rem; font-size: 1.5rem; color: #fff;}
  #loginEmailArea input, #loginPwArea input {float: left; width: 100%; padding-left: 0.5rem; font-size: 1.5rem; border: none; background: #fff;}
  .loginSubmitBox {clear: both; float: left; background: #fff; border: 1px solid #ccc; margin: 0.5rem 0 1rem 2rem; padding: 0.3rem;}
  #loginSubmit {clear: both; float: left; width: 100%; background: none; border: none; color: #000; font-size: 1rem;}

  /* myName */
  #myName {float: left; width: 100%; background: #fff; border-bottom: 1px solid #ccc;padding: 0.3rem 0 0.3rem 0;}
  #myName p {float: left; margin-left: 2%; font-size: 1rem;}
  #logoutBox {float: right; margin-right: 5%; border: 1px solid #ccc; margin-top: 1px;}
  #logoutBox input {border: none; background: none; padding: 0.1rem 0.3rem; margin-top: 1px; cursor: pointer; font-size: 0.5rem;}
}

/* PC */
@media screen and (min-width: 1200px) {
  #myService {float: left; color: #fff; font-size: 2rem; text-align: left; margin: 10px;}

  /* myName */
  #myName {float: right; color: #fff; margin-right: 1%; margin-top: 20px;}
  #myName p {float: left; width: 250px; font-size: 1rem;}
  #logoutBox {float: left; border: 1px solid #ccc; margin-top: 1px;}
  #logoutBox input {border: none; background: none; padding: 0.1rem 0.3rem; margin-top: 1px; cursor: pointer; font-size: 0.5rem; background: #fff}

  /* loginForm */
  #loginForm {float: right; margin: 20px 5px 0 0;}
  #loginEmailArea, #loginPwArea {float: left;}
  #loginEmailArea label, #loginPwArea label {float: left; padding-left: 1rem; font-size: 1.3rem; color: #fff; margin-right: 5px;}
  .loginInputBox {float: left; border: 1px solid #ccc; background: #fff;}
  #loginEmailArea input, #loginPwArea input {float: left; padding-left: 0.5rem; font-size: 1.3em; border: none; background: #fff;}
  .loginSubmitBox {float: right; width: 50px; background: #fff; border: 1px solid #ccc;}
  #loginSubmit {clear: both; float: left; width: 100%; background: none; border: none; color: #ccc; font-size: 0.7rem;}
}