er-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none; 
}
/*====================================================================================================*/
body {
  margin: 0;
  font-size: 16px;
}
/*====================================================================================================*/
/*----------------------------------------------------------------------------------------------------*/
/*====================================================================================================*/



/*====================================================================================================*/
/*----------------------------------------------------------------------------------------------------*/
/*====================================================================================================*/
.header .bg_img{
  position: absolute;
  top: 70px;
  height: 250px;
  width: 100%;
  left: 50%;
  transform:  translate(-50%,0);
  margin-left: 0px;
  background-image: url("../static/img/background_home.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/* .header .gradient{
  position: absolute;
  top: 70px;
  height: 250px;
  width: 1700px;
  text-align: center;
  background: linear-gradient(to right, rgb(255, 255, 255, 0), rgb(97, 214, 255, 0.7));
} */
/*====================================================================================================*/
.header .title{
  position: absolute;
  width: 100%;
  top: 120px;
  left: 50%;
  transform:  translate(-50%,0);
  font-family: 'Nanum Gothic', sans-serif;
  /* font-size: 2.35vw; */
  /* letter-spacing : 0.1vw; */
  font-weight: bold;
  text-align: center;
  word-break: keep-all;
  color: rgb(30, 30, 30);
}
.boldtext{
  font-weight: bold;
}
.title div:nth-child(1){
  font-size: 30px;
  margin-left: -400px;
}
.title div:nth-child(2){
  font-size: 64px;
  margin-left: 150px;
  padding-top: 5px;
}
.title div:nth-child(3){
  font-size: 30px;
  margin-left: 450px;
  padding-top: 5px;
}
/*====================================================================================================*/
/*----------------------------------------------------------------------------------------------------*/
/*====================================================================================================*/
.header .content{
  position: absolute;
  min-width: 1024px;
  top: 350px;
  left: 50%;
  transform:  translate(-50%,0);
  font-family: 'Jeju Gothic', sans-serif;
  font-size: 20px;
  text-align: right;
  line-height: 30px;
  word-break: keep-all;
  color: rgb(90, 90, 90);

}
/* .content1 div:nth-child(1){
  margin-left: 400px;
}
.content1 div:nth-child(2){
  margin-left: 345px;
}
.content2 div:nth-child(n){
  display: inline-block;
}
.content2 div:nth-child(1){
  margin-left: 165px;
}
.content3 div:nth-child(n){
  display: inline-block;
}
.content3 div:nth-child(1){
  margin-left: 115px;
} */
.content1 div:nth-child(1){
  margin-right: 10%;
  text-align: right;
}
.content1 div:nth-child(2){
  margin-right: 10%;
  text-align: right;
}
.content2 div:nth-child(n){
  display: inline-block;
  text-align: right;
}

.content2 div:nth-child(2){
  margin-right: 10%;
}
.content3 div:nth-child(n){
  display: inline-block;
}
.content3 div:nth-child(2){
  text-align: right;
  margin-right: 9.5%;
}
/*====================================================================================================*/
/*----------------------------------------------------------------------------------------------------*/
/*====================================================================================================*/
.main{
  position: absolute;
  top: 520px;
  left: 50%;
  transform: translate(-50%,0);
}
.login_form {
  position: relative;
  z-index: 1;
  width: 250px;
  padding: 20px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.login_form input {
  outline: 0;
  background: #f2f2f2;
  width: 250px;
  border: 0;
  margin: 0 0 10px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.login_form button {
  text-transform: uppercase;
  outline: 0;
  background: rgb(43, 157, 216, 0.8);
  height: 40px;
  width: 100px;
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}
.login_form button:hover,.login_form button:active{
  background: rgb(97, 214, 255, 0.8);
}
/*====================================================================================================*/
.main .select{
  position: relative;
  padding-bottom: 50px;
  text-align: center;
}
.select .find{
  display: inline-block;
  padding-right: 40px;
  font-size: 14px;
}
.select .find a{
  text-decoration: none;
}
.select .reset{
  display: inline-block;
  padding-right: 40px;
  font-size: 14px;
}
.select .reset a{
  text-decoration: none;
}
.select .register{
  display: inline-block;
  font-size: 14px;
}
.select .register a{
  text-decoration: none;
}
/*====================================================================================================*/
.register_form {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  width: 302px;
  padding: 0px 20px 20px 20px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.register_form h3 {
  color: rgb(90, 90, 90);
}
.register_form hr.separator {
  height: 1px;
  border: 0;
  border-top: 1px solid rgb(187, 187, 187);
  margin: 20px 5px;
}
.register_form input {
  outline: 0;
  background: #f2f2f2;
  width: 250px;
  border: 0;
  margin: 0 0 10px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.register_form #signup_user_phone_number {
  margin-left: 10px;
  width: 45%;
}
.register_form button {
  text-transform: uppercase;
  margin: 20px 10px 0px 10px;
  outline: 0;
  background: rgb(43, 157, 216, 0.8);
  height: 40px;
  width: 100px;
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
}
.register_form button:hover,.register_form button:active {
  background: rgb(97, 214, 255, 0.8);
}
.register_form .cancle {
  background: rgb(180, 180, 180, 0.8);
}
.register_form .cancle:hover,.register_form .cancle:active {
  background: rgb(200, 200, 200, 0.8);
}
.register_form select {
  width: 240px;
  font-size: 14px;
  padding: 5px;
}
.register_form #signup_user_installed_location {
  margin-bottom: 20px;
}
/*====================================================================================================*/
.find_form {
  display: none;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-40%);
  z-index: 1;
  width: 300px;
  padding: 0px 20px 20px 20px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.find_form h3 {
  color: rgb(90, 90, 90);
}
.find_form hr.separator {
  height: 1px;
  border: 0;
  border-top: 1px solid rgb(187, 187, 187);
  margin: 20px 5px;
}
.find_form input {
  outline: 0;
  background: #f2f2f2;
  width: 250px;
  border: 0;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.find_form #find_ID_user_phone_number, #find_ID_user_phone_code{
  margin-left: 10px;
  width: 45%;
}
.find_form button {
  text-transform: uppercase;
  margin: 10px 10px 0px 10px;
  outline: 0;
  background: rgb(43, 157, 216, 0.8);
  height: 40px;
  width: 100px;
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
}
.find_form button:hover,.find_form button:active{
  background: rgb(97, 214, 255, 0.8);
}
.find_form .close {
  background: rgb(180, 180, 180, 0.8);
  margin-top: 20px;
}
.find_form .close:hover,.register_form .close:active{
  background: rgb(200, 200, 200, 0.8);
}
/*====================================================================================================*/
.reset_form {
  display: none;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-40%);
  z-index: 1;
  width: 300px;
  padding: 0px 20px 20px 20px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.reset_form h3 {
  color: rgb(90, 90, 90);
}
.reset_form hr.separator {
  height: 1px;
  border: 0;
  border-top: 1px solid rgb(187, 187, 187);
  margin: 20px 5px;
}
.reset_form input {
  outline: 0;
  background: #f2f2f2;
  width: 250px;
  border: 0;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.reset_form #find_PW_user_phone_number {
  margin-left: 10px;
  width: 45%;
}
.reset_form #find_PW_user_phone_code {
  margin-left: 10px;
  width: 45%;
}
.reset_form button {
  text-transform: uppercase;
  margin: 10px 10px 0px 10px;
  outline: 0;
  background: rgb(43, 157, 216, 0.8);
  height: 40px;
  width: 100px;
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
}
.reset_form button:hover,.reset_form button:active{
  background: rgb(97, 214, 255, 0.8);
}
.reset_form .close {
  background: rgb(180, 180, 180, 0.8);
  margin-top: 20px;
}
.reset_form .close:hover,.register_form .close:active{
  background: rgb(200, 200, 200, 0.8);
}
/*====================================================================================================*/
.logo {
  position: absolute;
  /* top: 72.4vw; */
  height: 60px;
  min-width: 120px;
  width : 10vw;
  left: 50%;
  transform:  translate(-50%,0);
  background-image: url("../static/img/mstec-logo.png?v={% now 'U' %}");
  background-repeat: no-repeat;
  background-size: contain; 
}
/*====================================================================================================*/
/*----------------------------------------------------------------------------------------------------*/
/*====================================================================================================*/



/*====================================================================================================*/
/*----------------------------------------------------------------------------------------------------*/
/*====================================================================================================*/
@media (min-width: 768px) and (max-width: 1024px) {
  .header .bg_img{
    top: 70px;
    height: 200px;
  }
  .header .title{
    top: 110px;
  }
  .title div:nth-child(1){
    font-size: 24px;
    margin-left: -310px;
  }
  .title div:nth-child(2){
    font-size: 50px;
    margin-left: 120px;
    padding-top: 5px;
  }
  .title div:nth-child(3){
    font-size: 24px;
    margin-left: 350px;
    padding-top: 5px;
  }

  .title div:nth-child(n){
    display: block;
  }

  .header .content{
    top: 300px;
    font-size: 18px;
    min-width :768px;
  }
  .content1 div:nth-child(1){
    margin-right: 5%;
  }
  .content1 div:nth-child(2){
    margin-right: 5%;
  }
  /* .content2 div:nth-child(n){
    display: inline-block;
  } */
  .content2 div:nth-child(2){
    margin-right: 5%;
  }
  /* .content3 div:nth-child(n){
    display: inline-block;
  } */
  .content3 div:nth-child(2){
    margin-right: 5.25%;
  }

  .main{
    top: 460px;
  }
}
/*====================================================================================================*/
@media (min-width: 540px) and (max-width: 768px){
  .header .bg_img{
    /* top: 50px; */
    top: 8vw;
    height: 24vw;
  }

  .header .title{
    top: 12vw;
  }

  .title div:nth-child(1){
    font-size: 3vw;
    margin-left: -40vw;
  }
  .title div:nth-child(2){
    font-size: 6.2vw;
    margin-left: 12vw;
  }
  .title div:nth-child(3){
    font-size: 3vw;
    margin-left: 39vw;
  }

  .header .content{
    top: 36vw;
    font-size: 2.4vw;
    line-height: 4vw;
    min-width: 70vw; 
    margin: 0 auto;
  }
  .content1 div:nth-child(n){
    display: block;
  }
  .content1 div:nth-child(1){
    margin-right: 0vw;
  }
  .content1 div:nth-child(2){
    margin-right: 0vw;
  }
  .content2 div:nth-child(n){
    display: block;
  }
  .content2 div:nth-child(1){
    margin-right: 0vw;
  }
  .content2 div:nth-child(2){
    margin-right: 0vw;
  }
  .content3 div:nth-child(n){
    display: block;
  }
  .content3 div:nth-child(1){
    margin-right: 0vw;
  }
  .content3 div:nth-child(2){
    margin-right: 0vw;
  }
  .main{
    top: 65vw;
  }
}
/*====================================================================================================*/
@media (min-width: 375px) and (max-width: 540px){
  .header .bg_img{
    top: 8vw;
    height: 24vw;
  }

  .header .title{
    top: 12vw;
  }

  .title div:nth-child(1){
    font-size: 3vw;
    margin-left: -40vw;
  }
  .title div:nth-child(2){
    font-size: 6.2vw;
    margin-left: 12vw;
  }
  .title div:nth-child(3){
    font-size: 3vw;
    margin-left: 39vw;
  }

  .header .content{
    top: 36vw;
    font-size: 2.5vw;
    line-height: 4vw;
    min-width: 70vw; 
    margin: 0 auto;
  }
  .content1 div:nth-child(n){
    display: block;
  }
  .content1 div:nth-child(1){
    margin-right: 0vw;
  }
  .content1 div:nth-child(2){
    margin-right: 0vw;
  }
  .content2 div:nth-child(n){
    display: block;
  }

  .content2 div:nth-child(2){
    margin-right: 0vw;
  }
  .content3 div:nth-child(n){
    display: block;
  }

  .content3 div:nth-child(2){
    margin-right: 0vw;
  }
  .main{
    top: 65vw;
  }
}
/*====================================================================================================*/
@media (min-width: 280px) and (max-width: 375px){
.header .bg_img{
    top: 8vw;
    height: 24vw;
  }

  .header .title{
    top: 12vw;
  }

  .title div:nth-child(1){
    font-size: 3vw;
    margin-left: -40vw;
  }
  .title div:nth-child(2){
    font-size: 6.2vw;
    margin-left: 12vw;
  }
  .title div:nth-child(3){
    font-size: 3vw;
    margin-left: 39vw;
  }

  .header .content{
    top: 36vw;
    font-size: 2.4vw;
    line-height: 4vw;
    min-width: 85vw; 
    margin: 0 auto;
  }
  @media (min-width: 280px) and (max-width: 320px){
    .header .content{
      font-size: 2.3vw;
      min-width: 96vw; 
    }
  }
  .content1 div:nth-child(n){
    display: block;
  }
  .content1 div:nth-child(1){
    margin-right: 0vw;
  }
  .content1 div:nth-child(2){
    margin-right: 0vw;
  }
  .content2 div:nth-child(n){
    display: block;
  }

  .content2 div:nth-child(2){
    margin-right: 0vw;
  }
  .content3 div:nth-child(n){
    display: block;
  }

  .content3 div:nth-child(2){
    margin-right: 0vw;
  }
  .main{
    top: 65vw;
  }
}
/*====================================================================================================*/
@media (max-width: 280px){
  .header .bg_img{
    /* top: 50px; */
    top: 8vw;
    height: 24vw;
  }

  .header .title{
    /* top: 80px; */
    top: 10vw;
  }

  .title div:nth-child(1){
    /* font-size: 20px;
    margin-left: -310px; */
    font-size: 3vw;
    margin-left: -40vw;
  }
  .title div:nth-child(2){
    /* font-size: 46px;
    margin-left: 120px;
    padding-top: 2px; */
    font-size: 6.2vw;
    margin-left: 12vw;
  }
  .title div:nth-child(3){
    /* font-size: 20px;
    margin-left: 350px;
    padding-top: 2px; */
    font-size: 3vw;
    margin-left: 39vw;
  }

  .header .content{
    top: 36vw;
    font-size: 2.5vw;
    line-height: 4vw;
  }
  .content1 div:nth-child(n){
    display: block;
  }
  .content1 div:nth-child(1){
    margin-left: 10vw;
  }
  .content1 div:nth-child(2){
    margin-left: -1vw;
  }
  .content2 div:nth-child(n){
    display: block;
  }
  .content2 div:nth-child(1){
    margin-left: 30vw;
  }
  .content2 div:nth-child(2){
    margin-left: 31vw;
  }
  .content3 div:nth-child(n){
    display: block;
  }
  .content3 div:nth-child(1){
    margin-left: 3vw;
  }
  .content3 div:nth-child(2){
    margin-left: 45vw;
  }
  .main{
    top: 65vw;
  }
}

/*----------------------------------------------------------------------------------------------------*/