@media all and (min-width:768px) {

  .lgn-container { max-width: 1200px; margin: 0 auto; padding-top: 100px; padding-bottom: 172px; }
  .lgn-m-title { font-weight: 500; font-size: 36px; line-height: 53px; color: #3D3D3D; text-align: center; }
  .lgn-s-title {font-weight: 500; font-size: 28px; line-height: 41px; color: #848484; text-align: center; padding-top: 14px; }

  /* 회원가입 */
  .lgn-type { width: 100%; padding-top: 62px; }
  .mb { border-radius: 4px; margin: 0 auto; cursor: pointer; margin-bottom: 14px; background-color: wheat; width: 400px; height: 76px; display: flex; align-items: center; }
  .mb a { width: 100%; }
  .mb a span { font-weight: 400; font-size: 24px; line-height: 36px; color: #FFFFFF; padding-left: 27px; }
  .mb a span img { width: 28px; float: right; padding-right: 27px; }

  .mb-personal {background: #002E6A; }
  .mb-shop { background: #DF5A5A; }
  .mb-manager { background: #3D3D3D; }

  /* 회원가입 상세 */
  .join-title { padding-bottom: 26px; }
  .join-wrap { width: 742px; margin: 0 auto; border-top: 1px solid #000000; }
  .join-top { padding-top: 16px; }
  .join-inner { width: 683px; height: 56px; margin: 0 auto; display: flex; padding-top: 30px; }
  .join-info-title { height: 100%; display: flex; align-items: center; }
  .join-info-title p { width: 161px; text-align: center; font-weight: 700; font-size: 15px; line-height: 22px; color: #000000; }
  .join-info-title span { color: #DF5A5A; }
  .join-info input { font-size: 15px; width: 366px; height: 100%; border: 1px solid #E5E5E5; border-radius: 4px; padding-left: 28px; }
  .join-info input::-webkit-input-placeholder { font-weight: 400; font-size: 15px; line-height: 22px; color: #848484; } 

  .join-btn { margin-left: 22px; width: 112px; height: 56px; background: #FFFFFF; border: 1px solid #002E6A; border-radius: 4px; font-weight: 700; font-size: 15px; line-height: 22px; color: #002E6A; }
  .phone-btn { border: 1px solid #E5E5E5; color: #E5E5E5; }
  .addr-btn { margin-left: 0px; width: 394px; height: 42px; margin-top: 8px; }

  .join-inner-addr { height: 122px; }  
  .join-addr input { height: 56px; font-size: 15px; }
  .join-addr-btm { margin-top: 10px; }
  .join-addr-btm input { width: 504px; }

  .join-info label { font-weight: 500; font-size: 15px; line-height: 22px; color: #848484; margin-right: 10px; vertical-align: middle; padding-top: 16px; padding-right: 34px; }     
  .join-info input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
  .join-info input[type="radio"]+label { display: inline-block; position: relative; padding-left: 38px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
  .join-info input[type="radio"]+label:before { margin-top: 12px; content: '';  content: '✔'; color: #E5E5E5; position: absolute; left: 4px; top: 3px; width: 24px; height: 24px; text-align: center; background: #fff; border: 1px solid #cacece; border-radius: 50%; box-shadow: none; }
  .join-info input[type="radio"]:checked+label:before { margin-top: 12px; background: #fff; border-color: #002E6A; } 
  .join-info input[type="radio"]:checked+label:after { margin-top: 12px; content: ''; content: '✔'; color: #fff; text-align: center; border-radius: 50%; position: absolute; top: 4px; left: 5px; width: 24px; height: 24px; background: #002E6A; box-shadow: none; }
  .join-info input[type="date"] { cursor: pointer; }
  
  .birth { padding-bottom: 160px; border-bottom: 2px solid #000000; }

  .join-agree-wrap { height: auto; padding-top: 10px; }
  .agree-title { padding-top: 20px; }
  .join-agree { position: relative; }
  .join-agree label { font-weight: 500; font-size: 15px; line-height: 22px; color: #000000; margin-right: 10px; vertical-align: middle; padding-top: 20px; padding-right: 34px; }     
  .join-agree input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
  .join-agree input[type="checkbox"]+label { display: flex; position: relative; padding-left: 44px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
  .join-agree input[type="checkbox"]+label:before { background-repeat: no-repeat;  margin-top: 16px; content: ''; content: '✔'; color: #E5E5E5; position: absolute; left: 4px; top: 3px; width: 24px; height: 24px; text-align: center; background: #fff; border: 1px solid #cacece; border-radius: 50%; box-shadow: none; }
  .join-agree input[type="checkbox"]:checked+label:before { margin-top: 16px; background: #fff; border-color: #002E6A; } 
  .join-agree input[type="checkbox"]:checked+label:after { text-align: center; content: '✔'; color: #fff; margin-top: 16px; border-radius: 50%; position: absolute; top: 4px; left: 5px; width: 24px; height: 24px; background: #002E6A; box-shadow: none; }
  .join-agree input[type="date"] { cursor: pointer; }

  .all-agree { font-weight: 700; font-size: 15px; line-height: 22px; color: #000000; }
  .join-agree .essential { font-weight: 500; font-size: 15px; line-height: 22px; color: #848484; }

  .agree-more { position: absolute; left: 330px; }
  .agree-more span { font-weight: 500; font-size: 15px; line-height: 22px; color: #002E6A; }
  .agree-more span img { width: 5.56px; height: 9px; }

  .join-btn-complete { cursor: pointer; width: 235px; height: 70px; margin: 0 auto; margin-top: 122px; display: flex; justify-content: center; align-items: center; background-color: #002E6A; border-radius: 4px; }
  .join-btn-complete span {  font-weight: 500; font-size: 24px; line-height: 36px; color: #FFFFFF; }

  /* 이용약관 및 개인정보 팝업 */
  .background, .background-cus { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.3); z-index: 1000; z-index: -1; opacity: 0; }
  .show-use, .show-cus { opacity: 1; z-index: 100000;} 
  .window, .window-cus { position: relative; width: 100%; height: 100%; }  
  .popup, .popup-cus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ffffff; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); width: 30%; height: 75%; border-radius: 44px; }
  .show-use .popup, .show-cus .popup { transition: all 0.5s; }

  .pop-title { padding-top: 54px; text-align: center; font-weight: 500; font-size: 28px; line-height: 53px; color: #3D3D3D; }
  .pop-sub-title { font-weight: 600; font-size: 20px; line-height: 53px; color: #3D3D3D; width: 80%; margin: 0 auto; padding-top: 20px; } 
  .inner-contents { position: relative; width: 80%; height: calc( 100% - 290px ); overflow: scroll; margin: 0 auto; }
  .inner-contents p { width: inherit; font-size: 14px; color: #848484; } 
  .close, .close-cus { background-color: transparent; width: 100%; margin-top: 20px; font-weight: 700; font-size: 28px; line-height: 53px; color: #002E6A; }

  /* 회원가입 완료 */
  .cmplt-container { padding-bottom: 266px; }
  .cmplt-img { width: 350px; margin: 0 auto; padding-top: 56px; }
  .cmplt-img img { width: 100%; }

  /* 로그인 */
  .login-wrap { width: 500px; height: auto; margin: 0 auto; display: block; }
  .lgn-top { padding-top: 68px; }
  .lgn-btm { padding-top: 12px; }
  .login-wrap input { position: relative; width: calc(100% - 14px); height: 48px; border: 1px solid #DDDDDD; border-radius: 3px; padding-left: 14px; font-weight: 400; font-size: 14px; line-height: 25px; letter-spacing: -0.03em; color: #3A3A3A; }

  .lgn-link { width: 500px; margin: 0 auto; display: flex;  }
  .id-save { width: 300px; height: auto; padding-top: 22px; }
  .id-save input[type="checkbox"] { margin-bottom: 1px; -webkit-appearance: none; position: relative; width: 16px; height: 16px; cursor: pointer; outline: none !important; border: 1px solid #767676; border-radius: 3px; background: #fbfbfb; }
  .id-save input[type="checkbox"]::before { content: "\2713"; position: absolute; top: 50%; left: 50%; overflow: hidden; transform: scale(0) translate(-50%, -50%); line-height: 1; }
  .id-save input[type="checkbox"]:hover { border-color: rgba(170, 170, 170, 0.5); }
  .id-save input[type="checkbox"]:checked { background-color: #002E6A; border-color: rgba(255, 255, 255, 0.3); color: white; }
  .id-save input[type="checkbox"]:checked::before { border-radius: 3px; transform: scale(1) translate(-50%, -50%) }
  .id-save label { cursor: pointer;; }
  .id-save span { font-weight: 400; font-size: 14px; line-height: 25px; letter-spacing: -0.03em; color: #3D3D3D; padding-left: 5px; margin-top: 3px; }

  .lgn-info { padding-top: 22px; width: 200px; height: auto; } 
  .lgn-info-inner { float: right; }
  .join-link { font-weight: 700; font-size: 14px; line-height: 25px; letter-spacing: -0.03em; color: #3D3D3D; }
  .find-link { font-weight: 400; font-size: 14px; line-height: 25px; letter-spacing: -0.03em; color: #3D3D3D; padding-left: 14px; }

  .lgn-btn { cursor: pointer; width: 500px; margin: 0 auto; background: #002E6A; border-radius: 3px; margin-top: 28px; }
  .lgn-btn span {  height: 58px; font-weight: 400; font-size: 20px; line-height: 25px; letter-spacing: -0.03em; color: #FFFFFF; display: flex; justify-content: center; align-items: center; }

  .none-member { width: 500px; margin: 0 auto; padding-top: 22px; }
  .none-member p { font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: -0.05em; color: #3D3D3D; }
  .none-member-btn { border: 1px solid #E5E5E5; background: #FFFFFF; }
  .none-member-btn span { color: #3D3D3D; }
  
  /* 아이디 찾기 */
  .lgn-find-wrap { position: relative; width: 565px; height: 350px; margin: 0 auto; margin-top: 38px; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 0px 3px 3px 3px; } 

  .find-title { display: flex; }
  .find-section { cursor: pointer; width: 50%; height: 58px; text-align: center; background: #F6F6F6; border: 1px solid #E5E5E5; border-left: none; border-top: 3px solid transparent; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 14px; line-height: 25px; letter-spacing: -0.03em; }
  .find-section:nth-child(2) { border-right: none; }
  .find { color: #002E6A; background: #FFFFFF;  border-top: 3px solid #002E6A; border-bottom: none; }

  .find-top { padding-top: 58px; }
  .find-btn { margin-top: 34px; }

  .none-member-red { opacity: 0; width: 500px; margin: 0 auto; padding-top: 12px; font-weight: 500; font-size: 14px; line-height: 25px; letter-spacing: -0.03em; color: #DF5A5A; }

  .mail-num { position: absolute; padding-left: 33px; display: flex; width: calc(100% - 65px); margin: 0 auto; opacity: 0; } 
  .return-btn {cursor: pointer; margin-left: 16px; display: flex; justify-content: center; align-items: center; padding: 11px 26.5px 11px 26.5px; border: 1px solid #E5E5E5; border-radius: 3px; font-weight: 400; font-size: 14px; line-height: 25px; letter-spacing: -0.03em; color: #949494; } 
  .return-btn:hover { color: #002E6A; font-weight: 700;  border: 1px solid #002E6A; }

  #timer { position: absolute; right: 0; height: 100%; margin-right:130px; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 14px; line-height: 25px; letter-spacing: -0.03em; color: #002E6A; }
  .chk-num-btn { display: none; margin-top: 100px; }
  .id-find { display: none; padding-top: 86px; padding-bottom: 86px; }
  .id-find p { text-align: center; font-weight: 500; font-size: 14px; line-height: 25px; text-align: center; letter-spacing: -0.03em; color: #3D3D3D; }

  .member-id { font-weight: 700; }
  .find-id-lgn { display: none; }

  .pw-btn { display: none; }

  .pw-chk-num { display: none; width: 495.5px; margin: 0 auto; padding-bottom: 6.5px; border-bottom: 1px solid #E5E5E5; }
  .pw-num-input { text-align: left; font-weight: 500; font-size: 18px; line-height: 25px; letter-spacing: -0.03em; color: #3D3D3D; }

  .pw-num-return { font-weight: 400; font-size: 14px; line-height: 25px; letter-spacing: -0.03em; color: #949494; }

  .info-cate { display: none; }

  .home-btn { cursor: pointer; margin: 0 auto; margin-top: 10px; width: 225px; height: 73px; background: #002E6A; border-radius: 4px; display: flex; justify-content: center; align-items: center; }
  .home-btn p { font-weight: 700; font-size: 18px; line-height: 27px; color: #FFFFFF; }
}

@media all and (max-width:767px) {
  
}