@charset "utf-8";
:root {
  --login_header_height: 100px;
}


/* LOGIN PAGE WRAP (COMMON CSS) */
#login_sub_wrap {
  width : 100%;
  height: 100%;

  ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
  }

  a {
    text-decoration: none;
    white-space: nowrap;
  }

  p {
    margin: 0;
    padding: 0;
  }

  
  /* FONT COMMON SET */
  .st-txt { font-size: 2.5rem;   font-weight: bold; }  /* 40px */
  .md-txt { font-size: 2.25rem;  }                     /* 36px */
  .sm-txt { font-size: 1.125rem; }                     /* 18px */



  /* LOGIN CONTENT WRAP */
  .login-cont-wrap {
    width: 100%;
    overflow: hidden;
    /* background: lightgray; */
  }

  /* CONTENT TITLE SEC */
  .cont-title-wrap {
    width: 100%;
    height: 608px;
    display: flex;
    flex-direction: column;
    color: #fff;
    line-height: normal;
    justify-content: center;

    /* TITLE BOX */
    .title-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 30px;
      padding-left: 20vw;
    }
  
  }
  /* CONTENT TITLE SEC // */
  
  /* CONTENT ITEMS SEC */
  .cont-items-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;


    /* CONTENT SUB TITLE */
    .sub-title {
      width: 100%;
      height: 445px;
      background-color: #F3F5FD;
      display: flex;
      justify-content: center;
      align-items: center;

      .sub-title-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 42px;
        color: #323232;
      }

    }


    /* CONTENT ITEMS TITLE */
    .items-title-box {
      width: 100%;
      padding: 190px 0;
      display: flex;
      justify-content: center;
      align-items: center;

      /* border: 1px solid red; */
      
      .items-tit {
        position: relative;
        font-weight: bold;
        color: #121212;
        z-index: 10;
        text-align: center;
        word-break: auto-phrase;

        &::after {
          content: '';
          width: 100%;
          height: 17px;
          background-color: #D6C9FF;
          display: block;
          position: absolute;
          bottom: 0;
          z-index: -1;
        }
      }


    }


  }
  /* CONTENT ITEMS SEC // */


  /* CONTENT FOOTER SEC */
  .cont-foot-sec {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 185px 0;
    background: url(/inc/img/about_ft_bg_1.png) no-repeat center/cover;


    /* FOOTER CONTENT BOX */
    .foot-cont-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 35px;
      font-weight: bold;
      /* color: #1A0E49; */
      color: #fff;

      button.tms-btn {
        width: 220px;
        height: 82px !important;
        display: flex;
        align-items: center;
        height: unset;
        font-size: 1.5rem;
        font-weight: bold;
        border-radius: 5px;
      }
    }
    
  }
  /* CONTENT FOOTER SEC // */


}
/* LOGIN PAGE WRAP (COMMON CSS) // */


/* 로그인 페이지 (login.php) */
#login_sub_wrap.login-main {
  background: url(/inc/img/login_bg.png) no-repeat center/cover;

  .loginBoxWrap {
    height: calc(100vh - var(--login_header_height));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 200px;
  }


  /* LOGIN IMAGE BOX */
  .loginImgBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;

    .loginSubTit {
      color: #fff;
      text-align: center;
      word-break: auto-phrase;
      font-size: 1rem;
      line-height: 1.5rem;
    }


  }


  
  /*로그인페이지*/
  .loginBox {
    width: 100%;
    max-width: 390px;
    padding: 60px 35px 30px;
    border:1px solid #E9E9E9;
    background-color: #fff;
    border-radius: 5px;
    /* position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%); */
    margin: 0;
    box-sizing: border-box;
    color: #666;
  }
  
  .loginBoxTit {
    font-size: 1.5rem;
    font-weight: bold;
    color: #636363;
    text-align: center;
    margin-bottom: 38px;
  }
  
  
  .liginImg {
    width: 100%;
    max-width: 230px;
    display: block;
  }
  
  .loginBox div input {
    margin-bottom: 15px;
    width: 100%;
    height: 40px;
    border: 1px solid #E9E9E9;
    border-radius: 3px;
    background-color: #fff;
    padding: 12px 8px;
    outline: unset;
  
    &:active, &:focus {
      outline: 1px solid var(--tms_point_color2);
    }
  
  }
  
  .loginBox div .inputSpan {
    font-size: .812rem;
  }
  
  .loginBox button {
    width: 100%;
    height: 40px;
    background-color: var(--tms_point_color2);
    border-radius: 3px;
    color:#fff;
    cursor:pointer;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    border:0;
    outline: unset;
  }
  
  .loginBox .save {
    display: flex;
    align-items: center;
  }
  
  
  .loginBox .save input {
    width:  15px;
    height: 15px;
    margin-bottom: 0;
    &:active, &:focus {
      outline: unset;
    }
  }
  
  input#save_id[type="checkbox"]:checked + label {
    color: #0E88DF;
  }
  
  .loginBox .save label {
    padding-left: 8px;
    font-size: .812rem;
    color: #7A7A7A;
    margin-bottom: 0;
    white-space: nowrap;
  }
  
  
  .loginBox .mem_join {
    width:100%;
    /* height:30px; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  
  
  .loginBox .mem_join span a {
    text-decoration: none;
    /* padding-left: 10px; */
    font-size: .812rem;
    color: #7A7A7A;
  }
  
  .loginBox .mem_join .join {
    padding-right : 30px;
    font-size : 13px;
    
  }


  /* AUTH LOGIN */
  .auth-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;

    /* TEXT */
    .auth-log-txt {
      width: 100%;
      display: flex;
      justify-content: center;
      position: relative;
      color: #7A7A7A;

      div {
        width: 100%;
        border-top: 1px solid #cdcdcd;
        position: absolute;
        top: 43%;
        z-index: 0;
      }

      p {
        width: fit-content;
        text-align: center;
        background-color: #fff;
        padding: 0 12px;
        position: relative;
        z-index: 1;
        font-size: 0.7rem;
      }
    }


    /* AUTH BUTTON */
    button.btn-auth {
      color: var(--tms_point_color2);
      background: #fff;
      border: 1px solid var(--tms_point_color2);

      .auth-logo {
        width: 15px;
        transform: translateY(-0.4px);
        margin-right: 2px;
      }

    }

  }
  /* AUTH LOGIN // */


}
/* 로그인 페이지 (login.php) */


/* 로그인 페이지 HEADER (login_header.php) */
#login_block_header {
  width: 100%;
  height: var(--login_header_height);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;


  /* LOGIN HEADER NAV */
  .login-nav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 160px;
    position: relative;
    max-width: 390px;
    margin-left: 475px;
    
    
    /* LOGIN HEADER NAV DEPTH */
    .login-nav-depth {
      font-size: 1rem;
      font-weight: bold;
      a {
        color: #fff;
        transition: width .3s ease-in-out .3s;
        padding-bottom: 3px;
        font-size: 1.05rem;
        white-space: nowrap;
      }

      a:hover {
        /* color: var(--tms_point_color2);
        border-bottom: 2px solid var(--tms_point_color2); */
        border-bottom: 2px solid #fff;
      }

    }

    
  }


  /* LOGIN BUTTON */
  .log-hd-btn {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    border: 2px solid;
    border-radius: 60px;
    padding: 10px 22px;
    font-weight: bold;
    color: var(--tms_point_color2);
    display: none;
  }


  /* MOBILE MENU BUTTON */
  .btn-mo-menu {
    display: none;
    width : 26px;
    height: 26px;
    position: absolute;
    top  : 15px;
    right: 15px;
    outline: unset;
    border : unset;
    background-color: transparent;
    color: #fff;

    &::after {
      content: '\F479';
      font-family: bootstrap-icons !important;
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: -11px;
      left: -3px;
      font-size: 32px;
      line-height: unset;
    }

  }


}
/* 로그인 페이지 HEADER (login_header.php) // */



/* 소개 페이지(login_about.php) */
#login_sub_wrap.login-about {


  /* 로그인 페이지 HEADER */
  #login_block_header {
    position: sticky;
    top: 0;
    box-shadow: 0 -35px 26px 16px #000;
    z-index: 99;
    background-color: #fff;

    
    .login-nav {
      /* 초기화 */
      max-width: unset;
      margin-left: 0;
      gap: 160px;

      .login-nav-depth {
        a { color: #121212; }
      }

    }

    /* LOVIN BUTTON */
    .log-hd-btn {
      display: block;
    }

  }


  /* CONTENT TITLE SEC */
  .cont-title-wrap {
    background: url(/inc/img/about_bg_1.png) no-repeat center/cover;
  }
  /* CONTENT TITLE SEC // */


  /* CONTENT TITLE SEC */
  .cont-title-wrap {

    /* TITLE BOX */
    .title-box {
      .title-text-box:nth-child(2) {
        line-height: 3rem;
      }
    }
  
  }
  /* CONTENT TITLE SEC // */
    

  
  /* CONTENT ITEMS */
  .items-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 150px;
    padding: 30px 0 120px;
    /* border: 1px solid blue; */

    /* ABOUT CONTENT WRAP */
    .about-cont-wrap {
      width: 100%;
      max-width: 1180px;
      display: flex;

      /* REVERSE */
      &.rvrs {
        flex-direction: row-reverse;

        /* ABOUT CONTENT BOX */
        .about-cont-box {

          /* TEXT BOX */
          &.txt-box {
            align-items: flex-end;
          }

          /* IMG BOX */
          &.img-box {
            display: flex;
            justify-content: flex-start;
          }

        }
      }

    }

    /* ABOUT CONTENT BOX */
    .about-cont-box {
      flex: 1;
      /* border: 1px solid; */

      /* TEXT BOX */
      &.txt-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #121212;
        
        /* TEXT WRAP */
        .txt-wrap {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 40px;
        }

        .md-txt { font-weight: bold; }
        /* .sm-txt { } */
      }

      /* IMG BOX */
      &.img-box {
        display: flex;
        justify-content: flex-end;

        img {
          width: 100%;
          max-width: 570px;
        }
      }

    }

  }

}
/* 소개 페이지(login_about.php) // */




/* 서비스 페이지(login_sevice.php) */
#login_sub_wrap.login-serv {
  
  /* 로그인 페이지 HEADER */
  #login_block_header {
    position: sticky;
    top: 0;
    box-shadow: 0 -35px 26px 16px #000;
    z-index: 99;
    background-color: #fff;

    .login-nav {
      /* 초기화 */
      max-width: unset;
      margin-left: 0;
      gap: 160px;

      .login-nav-depth {
        a { color: #121212; }
      }

    }

    /* LOVIN BUTTON */
    .log-hd-btn {
      display: block;
    }

  }

  /* CONTENT TITLE SEC */
  .cont-title-wrap {
    background: url(/inc/img/about_bg_2.png) no-repeat center/cover;

    .title-box .title-text-box {
      p:nth-child(1) { line-height: 3.5rem; }
      p:nth-child(2) { line-height: 1.8rem; }
    }

  }
  /* CONTENT TITLE SEC // */


  /* CONTENT ITEMS WRAP */
  .cont-items-wrap {
    .items-title-box {
      padding: 190px 0 120px;
    }
  }

  /* CONTENT ITEMS */
  .items-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 110px;
    padding: 0 0 150px;
  }


  /* SERVICE CONTENT WRAP */
  .serv-cont-wrap {
    display: flex;
    gap: 120px;


    /* SERVICE CONTENT BOX */
    .serv-cont-box {
      display: flex;
      flex-direction: column;
      gap: 26px;
    }


    /* CONTENT IMG BOX */
    .serv-img-box {
      width: 100%;
    }


    /* CONTENT TEXT BOX */
    .serv-txt-box {
      width: 100%;
      color: #3A3A3A;
      
      .serv-txt-tit {
        font-weight: bold;
        font-size: 1.75rem;
        line-height: 1.2em;
      }

      .serv-txt-sub {
        font-size: 1.125rem;
        margin-top: 30px;
        line-height: 2rem;
      }

    }
    
    
  }
  
  
  /* CONTENT FOOTER SEC */
  .cont-foot-sec {
    background: url(/inc/img/about_ft_bg_2.png) no-repeat center/cover;
  }
  /* CONTENT FOOTER SEC // */
  

}
/* 서비스 페이지(login_sevice.php) // */



/* 반응형 태블릿 ( ~ 1024px ) */
@media all and (max-width: 1024px) {


  /* 로그인 페이지 HEADER (login_header.php) */
  #login_block_header {
    .login-nav {
      margin-left: 355px;
    }
  }
  /* 로그인 페이지 HEADER (login_header.php) // */



  /* LOGIN PAGE WRAP (COMMON CSS) */
  #login_sub_wrap {

    /* CONTENT FOOTER SEC */
    .cont-foot-sec {
      padding: 80px 0;
    }
    /* CONTENT FOOTER SEC // */

  }
  /* LOGIN PAGE WRAP (COMMON CSS) // */


  /* 로그인 메인 (login.php) */
  #login_sub_wrap.login-main {
    .loginBoxWrap {
      gap: 80px;
    }
  }
  /* 로그인 메인 (login.php) // */


  /* 소개 페이지(login_about.php) */
  #login_sub_wrap.login-about {

    /* CONTENT TITLE SEC */
    .cont-title-wrap {

      /* TITLE BOX */
      .title-box {
        padding-left: 10vw;
      }

    }


    /* CONTENT ITEMS SEC */
    .cont-items-wrap {

      /* CONTENT SUB TITLE */
      .sub-title {
        .sub-title-box {
          p:nth-child(2) {
            word-break: auto-phrase;
            padding: 0 30px;
          }
        }
      }

      /* CONTENT ITEMS */
      .items-box {
        /* ABOUT CONTENT WRAP */
        .about-cont-wrap {
          width: 90%;
          max-width: unset;
          gap: 30px;
        }
  
      }


    }

  }
  /* 소개 페이지(login_about.php) // */

}
/* 반응형 태블릿 ( ~ 1024px ) // */



/* 반응형 모바일 ( ~ 768px) */
@media all and (max-width: 768px) {
  :root {
    --login_header_height: 80px;
  }


  /* LOGIN PAGE WRAP (COMMON CSS) */
  #login_sub_wrap {

    /* FONT COMMON SET */
    .st-txt { font-size: 1.5rem;   font-weight: bold; }      /* 24px */
    .md-txt { font-size: 1.375rem; }                         /* 22px */
    .sm-txt { font-size: 0.95rem; word-break: auto-phrase; } /* 약 15px */


    /* CONTENT TITLE SEC */
    .cont-title-wrap {
      height: 550px;
      background-position: center;
      justify-content: flex-start;
      background-size: cover;
      background-position-x: 54%;


      /* TITLE BOX */
      .title-box {
        padding: 20vw 8vw 0;
      }

      .st-txt {
        font-size: 2rem;
      }

    }
    /* CONTENT TITLE SEC */


    /* CONTENT ITEMS SEC */
    .cont-items-wrap {

      /* CONTENT SUB TITLE */
      .sub-title {
        .sub-title-box {
          gap: 20px;
          p:nth-child(2) { padding: 0 20px !important; }
        }
      }
      /* CONTENT SUB TITLE // */
      

      /* CONTENT ITEMS */
      .items-box {
        padding: 0 10px 80px;
      }

    }
    /* CONTENT ITEMS SEC // */


    /* CONTENT FOOTER SEC */
    .cont-foot-sec {
      padding: 50px 0;

      /* FOOTER CONTENT BOX */
      .foot-cont-box {
        gap: 15px;

        button.tms-btn {
          padding: 8px 22px;
        }
      }


    }
    /* CONTENT FOOTER SEC // */

  }
  /* LOGIN PAGE WRAP (COMMON CSS) // */


  /* 로그인 페이지 HEADER (login_header.php) */
  #login_block_header {
    /* right: 20px; */

    /* LOGIN BUTTON */
    .log-hd-btn {
      width: 50px;
      height: 50px;
      right: 10px;
      top: 100vh;
      padding: unset;
      background: var(--tms_point_color6);
      color: transparent;
      transform: translateY(-120%);
      box-shadow: 0 0 8px 0 #0000004d;

      &::after {
        content: '\f090';
        font-family: "Font Awesome 5 Free";
        display: flex;
        width: 100%;
        height: 100%;
        position: absolute;
        color: #fff;
        align-items: center;
        justify-content: center;
        top: 0;
        left: -2px;
        font-size: 22px;
      }

    }

  }
  /* 로그인 페이지 HEADER (login_header.php) // */


  /* 로그인 페이지 (login.php) */
  #login_sub_wrap.login-main {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    #login_block_header {
      width: unset;
      height: unset;
      position: absolute;
      align-items: unset;
      top: 0;
      right: 0;
      

      .login-nav {
        width: 100%;
        min-width: 210px;
        max-width: 35%;
        height: 100vh;
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        justify-content: flex-start;
        padding: 68px 30px 0;
        background-color: #fff;
        position: absolute;
        top: 0;
        right: -220px;
        box-shadow: 0 0 14px 0 #0000002e;
        transition: .3s ease-in-out;
        
        .login-nav-depth {
          a {
            color: #242424;
          }
        }

      }

      /* MOBILE MENU BUTTON */
      .btn-mo-menu {
        display: block;
        
      }


    }


    /* LOGIN HEADER FLEX */
    #login_block_header.flex {

      /* LOGIN NAV */
      .login-nav {
        right: 0;
      }

      
      /* MOBILE MENU BUTTON */
      .btn-mo-menu {
        color: #242424;

        &::after{
          content: '\F659';
        }
      }

    }



    .loginBoxWrap {
      width: 100%;
      height: 100%;
      gap: 50px;
      padding: 0 20px;
      flex-direction: column;

      .loginImgBox {
        gap: 40px;
  
        .liginImg {
          min-width: 100px;
          max-width: 52%;
        }
  
      }

      .loginBox {
        padding: 60px 25px 30px;
      }

    }
    

  }
  /* 로그인 페이지 (login.php) // */


  /* 소개 페이지(login_about.php) */
  #login_sub_wrap.login-about {
  

    /* CONTENT ITEMS SEC */
    .cont-items-wrap {

      /* CONTENT SUB TITLE */
      .sub-title {
        height: 365px;
      }

      /* CONTENT ITEMS TITLE */
      .items-title-box {
        padding: 50px 20px;

        .items-tit {
          &::after {
            height: 26px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
        
      }
      
      /* CONTENT ITEMS */
      .items-box {
        gap: 60px;

        /* ABOUT CONTENT WRAP */
        .about-cont-wrap {
          flex-direction: column;
        }

        /* ABOUT CONTENT BOX */
        .about-cont-box {

          /* IMG BOX */
          &.img-box {
            img {
              max-width: 400px;
            }
          }


          /* TEXT BOX */
          &.txt-box {

            /* TEXT WRAP */
            .txt-wrap {
              gap: 10px;
            }

          }
          
        }

      }

    }


  }
  /* 소개 페이지(login_about.php) // */


  /* 서비스 페이지(login_sevice.php) */
  #login_sub_wrap.login-serv {

    /* CONTENT TITLE SEC */
    .cont-title-wrap {

      .title-box .title-text-box {
        gap: 20px;

        p:nth-child(1) {
          line-height: 2.6rem;
          word-break: auto-phrase;
          font-size: 1.7rem;
        }

        p:nth-child(2) { 
          width: 80%;
          line-height: 1.3rem;
          word-break: auto-phrase;
        }
      }

    }
    /* CONTENT TITLE SEC // */
    
    
    /* CONTENT ITEMS SEC */
    .cont-items-wrap {

      /* CONTENT ITEMS TITLE */
      .items-title-box {
        padding: 50px 20px;

        .items-tit {
          &::after {
            height: 26px;
            left: 50%;
            transform: translateX(-50%);
          }
        }

      }

      /* CONTENT ITEMS */
      .items-box {
        padding: 0 10px 100px;
        gap: 60px;
      }
      
    }


    /* SERVICE CONTENT WRAP */
    .serv-cont-wrap {
      width: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 60px;

      /* SERVICE CONTENT BOX */
      .serv-cont-box {
        align-items: center;
        gap: 16px;
      }

      /* CONTENT TEXT BOX */
      .serv-txt-box {

        .serv-txt-tit {
          font-size: 1.25rem;
        }

        .serv-txt-sub {
          font-size: 0.875rem;
          margin-top: 10px;
          line-height: 1.5rem;
        }

      }

    }


  }
  /* 서비스 페이지(login_sevice.php) // */


}
/* 반응형 모바일 ( ~ 768px) // */