html {width: 100%; height: 100%;}
body {width: 100%; height: 100%; background: #000000;}

/* login page */
.agent_login_wrap{position: absolute; top:50%; left:50%; height: 445px; width: 890px;margin-top:-222px; margin-left:-445px;}
.agent_log_wrap{position: absolute; top: 0px; left: 0px; height: 445px; width: 445px; background-color: #00bcd4; border-bottom-left-radius: 20px; border-top-left-radius: 20px;}
.agent_logo{width: 80px;height: 80px;position: absolute;top: 120px;left: 160px;}
.agent_input_wrap{position: absolute;top: 0px;right: 0px;height: 445px;width: 445px;background-color: #fff;border-top-right-radius: 10px;border-bottom-right-radius: 10px;background-image: url('/static2/login/images/login_bg.png');}
.login_btn {position: absolute;left: 34px;top: 293px;width: 375px;height: 50px;background-color: #00bcd4;}


form{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative;}
.login_top_sec{position: absolute; top: 0; right: 0; padding:20px;}

font{vertical-align: initial ! important;}
.goog-te-combo{margin-top:20px ! important;}
.goog-logo-link > img{width: auto ! important;}
.goog-te-banner-frame {display:none !important}/*구글 번역 상단 배너 숨기기*/

#agentBrowserGuide *{
  color:#FFF;
}

.btn_base{
  background-color: #00bcd4;
}

.wrap {
    width: 100vw;
    height: 100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:fixed;
    top: 0;
    left:0;
  }

  .wrap_header{
    width: 100%;
    height: 10vh;
    background-color: grey;
    color: white;
    display: flex;
    align-items: center;
    font-size: 3vh;
  }

  #subsName {
    margin: 5vw;
  }

  #leaveRoom {
    margin: 5vw;
    position: absolute;
    right: 0;
    border: 0.5vw solid white;
    padding: 1vw;
    border-radius: 1vw;
    cursor: pointer;
  }

  .wrap_body{
    width: 100%;
    height: 10vh;
    background-color: #fafafa;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5vw;
    font-weight: bold;
    flex-direction: column;
  }

  #requestRoom {
    margin: 5vw;
    position: absolute;
    bottom: 0;
    border: 0.5vw solid black;
    padding: 2vw;
    border-radius: 1vw;
    cursor: pointer;
  }

  .wrap_footer{
    width: 100%;
    height: 10vh;
    background-color: grey;
  }

  .content_wrap{
    width: 100%;
    height: 100%;
    background-color: black;
  }


  img{max-width:100%;}

  main.inboud_sec {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-image:url("/static2/images/common/img-intro-bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }
  
  main.browser_guide_sec {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  main.browser-guide-sec .cl_ib_wrap {
    height: 400px;
  }

  main.browser-guide-sec .cl_ib_wrap .cl_ib_head {
    height: 40%;
  }
  
  .cl_ib_wrap {
    max-width: 360px;
    width: 100%;
    height: 500px;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .cl_ib_wrap .cl_ib_head > h1 img {
    max-width: 200px;
    max-height:40px;
  }
  .cl_ib_wrap .cl_ib_head > p {
    font-size: 30px;
    color: var(--primary2);
  }
  .cl_ib_wrap .cl_ib_body > .ib_visual_box {
    width: 150px;
    margin: 0 auto;
  }
  .cl_ib_wrap .cl_ib_body > .box-wating-list {
    color: var(--primary2);
    padding-top: 10px;
  }
  .cl_ib_wrap .cl_ib_body > .box-wating-list p:last-child {
    font-size: 30px;
  }

  .cl_ib_wrap .cl_ib_body .cl_ib_ment{
    color:var(--text-ponit);
    padding-top:20px;
    line-height:1.6;
  }

  .cl_ib_wrap .cl_ib_info_box {
    border: 1px solid var(--input-border);
    overflow-y: auto;
    height: 150px;
    text-align: left;
    line-height:1.6;
  }
  .cl_ib_wrap .cl_ib_foot {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .cl_ib_wrap .cl_ib_foot button {
    max-width: 250px;
    width: 100%;
    margin: 0 5px;
  }

  .cl_ib_wrap .frm-chkbox_wrap {
    margin-top: 10px;
  }
  
  @media (min-width: 330px) and (max-width: 839px) {
    .cl_ib_wrap {
      height: 100%;
      position: relative;
      padding: 0 30px;
      justify-content: space-between;
    }
    .cl_ib_wrap .cl_ib_head {
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
    }
    .cl_ib_wrap .cl_ib_foot {
      padding-bottom:30px;
    }
    .cl_ib_wrap .cl_ib_foot button {
      max-width: initial;
      width: 45%;
    }

    button.btn_base_translate{
      display: none;
    }

    main.inboud_sec {
      background-image: url("/static2/images/common/img-mob-intro-bg.webp");
    }
  }