/* 
Theme Name: CS Tech - Huzentum
Version: 1.0
Author: Gupsa
Description: Created by Gupsa Agency, DEP
*/

@charset 'UTF-8';

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap");




* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: inherit;
  font-family: "Noto Sans KR", sans-serif;
  list-style: none;
  text-decoration: none; 
  font-weight: inherit;
  letter-spacing: -0.025em;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-user-drag: none; 
}

/* *:focus {
  outline: 2px solid var(--main);
} */

:root {
  --main: #a73439;
}

body {
    color: #111;
    font-weight: 400;
}

fieldset, input {
  border: none; 
}

button {
  border: none;
  background: none;
}


.skip {
  position: absolute;
  width: 100%;
  line-height: 48px;
  height: 48px;
  background-color: var(--main);
  top: -48px;
  transition: top 0.5s;
  text-align: center;
  color: #fff;
}

.skip:focus {
  top: 0px;
}

.en {
  font-family: "Roboto", sans-serif;
}
.kr {
  font-family: "Noto Sans KR", sans-serif;
}

/* 대체텍스트 IR (SO 기법) */
.ir_so {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}


header { position: relative; border-bottom: 1px solid #E9E9ED; z-index: 10;}
header:after { 
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    top: 101px;
    background: rgba(255, 255, 255, 0.98);
    height: 0;
    z-index: -1; 
    transition: 0.5s; 
}
header a { display: block; }
.inner-header { width: 95%; max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 100px;  }
.header_nav_pc { position: absolute; left: 50%; transform: translateX(-50%); }
.header_nav_pc .gnb { display: flex; height: 100%; }
.header_nav_pc .gnb > li { position: relative; }
.header_nav_pc .gnb > li + li { margin-left: 60px; }
.header_nav_pc .gnb > li > a { font-size: 18px; font-weight: 700; line-height: 100px; height: 100%; }
.header_nav_pc .lnb { position: absolute; top: 100px; width: 250px; height: 0px; }
.header_nav_pc .lnb li { pointer-events: none; opacity: 0; transition: 0.2s; }
.header_nav_pc .lnb li a { line-height: 24px; }
.header_nav_pc .lnb li:first-of-type a { margin-top: 24px; }
.header_nav_pc .lnb li + li > a { margin-top: 10px; }

header .util ol { display: flex; }
header .util ol > li { position: relative; }
header .util ol > li + li { padding: 0 10px; }
header .util .hover { display: none; }
header .util .default { display: block; }

header .util ol > li img { position: relative; z-index: 5; }
header .util ol > li.lang:hover .hover{ display: block; }
header .util ol > li.lang:hover .default { display: none; }

header .util li.lang:after {
    content: '';
    position: Absolute;
    background-color: var(--main);
    height: 0;
    width: 100%;
    top: -4px;
    z-index: 2;
    left: 0;    
    transition: height 0.3s; 
}
header .util li.lang:hover:after { height: 104px; }
header .util li.lang > ul { position: absolute; color: #fff; z-index: 5; width: 100%; text-align: center; left: 0; display: none; }
header .util li.lang:hover > ul { display: block; }
header .util li.lang > ul li { font-weight: 700; font-size: 14px; line-height: 22px; }
header .util li.lang > ul li:first-of-type { margin-top: 4px; }
header .util li.lang > ul li:last-of-type { margin-top: 8px; }



/* Fixed */
.fixed header { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 200; }


/* HOVER */
header.over:after { height: 182px;}
body.header-white header.over:after{background: transparent; border-top: 1px solid #fff;} 
header nav .gnb > li:hover .lnb { height: 182px; }
header nav .gnb > li:hover .lnb li { opacity: 1; pointer-events: initial; } 

.mobile { display: none; }
.pc { display: block; }


.small-title {
  color: var(--main);
  font-size: 20px;
  line-height: 30px; 
  font-weight: 700;
}

.big-title {
  font-size: 48px;
  line-height: 62px;
  font-weight: 700;
  margin-top: 6px;
}

.inner-main {
  padding: 160px 0 200px 0; 
  max-width: 1440px;
  width: 100%; 
  margin: 0 auto; 
}

main {
  display: block; 
}



footer { background-color: #111; color: #fff; }
.inner-footer { max-width: 1440px; width: 95%; margin: 0 auto; padding: 40px 0 60px 0; }
.inner-footer nav { display: flex; justify-content: space-between; align-items: center; }
.inner-footer nav > ul { display: flex; align-items: center; }
.inner-footer nav a { display: block; }
.inner-footer nav img { width: 100%; display: block; }


.inner-footer nav div { display: flex; }
.inner-footer nav div ul,
.inner-footer nav div ol { display: flex; align-items: center; }

.inner-footer nav li { font-weight: 700; }
.inner-footer nav .util { margin-left: 40px; }
.inner-footer nav .info li + li, 
.inner-footer nav .util li + li { margin-left: 20px; }
.inner-footer nav .util ul li + li{margin-left: 0;}
.inner-footer nav .util.mobile{
  display: none;
}
.inner-footer nav ol { display: flex; }
.inner-footer nav ol > li { position: relative; }
.inner-footer nav ol > li + li { padding: 0 10px; }
.inner-footer nav .hover { display: none; }
.inner-footer nav .default { display: block; }

.inner-footer nav ol > li img { position: relative; z-index: 5; }
.inner-footer nav ol > li.lang:hover .hover{ display: block; }
.inner-footer nav ol > li.lang:hover .default { display: none; }

.inner-footer nav li.lang:after {
    content: '';
    position: Absolute;
    background-color: var(--main);
    height: 0;
    width: 100%;
    top: -4px;
    z-index: 2;
    left: 0;    
    transition: height 0.3s; 
}
.inner-footer nav li.lang:hover:after { height: 104px; }
.inner-footer nav li.lang > ul { position: absolute; color: #fff; z-index: 5; width: 100%; text-align: center; left: 0; display: none; }
.inner-footer nav li.lang:hover > ul { display: block; }
.inner-footer nav li.lang > ul li { font-weight: 700; font-size: 14px; line-height: 22px; }
.inner-footer nav li.lang > ul li:first-of-type { margin-top: 4px; }
.inner-footer nav li.lang > ul li:last-of-type { margin-top: 8px; }








.inner-footer .company_info { margin: 32px 0 24px 0; }
.inner-footer .company_info div { display: flex; line-height: 24px; }
.inner-footer .company_info div + div { margin-top: 8px; }
.inner-footer .company_info p + p { margin-left: 20px; }
.inner-footer .copyright { font-style: normal; font-size: 13px; line-height: 21px; }



.admin-btn {
  width: 206px;
  height: 46px;
  text-align: center;
  position: absolute;
  background-color: var(--main);
  color: #fff;
  right: 0; 
  transform: translateY(60px);
  top: 100%;
}
.admin-btn a {
  display: block;
  line-height: 46px;
}


.admin-crud {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.admin-crud .modify { 
  margin-left: 40px; 
  background-color: var(--main);
  color: #fff;
}


@media (max-width: 1440px){
  html, body { font-size: 1.111vw; }

  .small-title {
    font-size: 1.25rem;
    line-height: 1.875rem; 
  }
  
  .big-title {
    font-size: 3rem;
    line-height: 3.875rem;
    margin-top: 0.375rem;
  }
  
  .inner-main {
    padding: 10rem 0 12.5rem 0; 
    width: 95%; 
  }
  
  main {
    display: block; 
  }
  

  .inner-footer { width: 95%; padding: 2.5rem 0 3.75rem 0; }  
  .inner-footer nav .util { margin-left: 2.5rem; }
  .inner-footer nav .info li + li, 
  .inner-footer nav .util li + li { margin-left: 1.25rem; }
  
  .inner-footer .company_info { margin: 2rem 0 1.5rem 0; }
  .inner-footer .company_info div { line-height: 1.5rem; }
  .inner-footer .company_info div + div { margin-top: 0.5rem; }
  .inner-footer .company_info p + p { margin-left: 1.25rem; }
  .inner-footer .copyright { font-size: 0.8125rem; line-height: 1.3125rem; }
  
  
  .admin-btn {
    width: 12.875rem;
    height: 2.875rem;
    transform: translateY(3.75rem);
  }

  .admin-btn a {
    line-height: 2.875rem;
  }

  .admin-crud .modify { 
    margin-left: 2.5rem; 
  }
}

@media (max-width: 1024px){
    html { font-size: 4.444vw; }

    /* Reset */
    .pc { display: none; }
    .mobile { display: block; }


    header .inner-header { width: 100%; padding: 0 1rem; height: 4rem; }
    header .inner-header h1 { width: 8.125rem; }
    header .inner-header h1 img { width: 100%; display: block; }
    header .inner-header .header_nav_mobile { position: absolute;  width: 100%; height: calc(100vh - 4rem); left: 0; top: 4rem; z-index: 9999; padding: 1.625rem 2.5rem 0 1.625rem; display: none; background-color: #fff; }
    /* header .inner-header .header_menu_mobile { width: 1.3125rem; height: 0.875rem; position: relative; cursor: pointer; } */
    header .inner-header .header_menu_mobile { width: 1.625rem; height: 1.625rem; position: relative; cursor: pointer; padding: 0.813rem 0.75rem 0.813rem 0.25rem;}
    header .inner-header .header_menu_mobile:before,
    header .inner-header .header_menu_mobile:after { content: ''; position: absolute; width: 100%; height: 2px; background: #111; left: 0.25rem;}
    header .inner-header .header_menu_mobile:before { top: 0.4375rem; width: 1.3125rem; transition: 0.3s; }
    header .inner-header .header_menu_mobile:after { bottom: 0.4375rem; width: 1.125rem; transition: 0.3s; }
    header .inner-header .header_menu_mobile span:last-of-type { width: 100%;  height: 2px; background: #111; position: absolute;  top: 50%; transform: translateY(-50%); width: 0.75rem; transition: 0.3s; opacity: 1; }
    
    /* Active */
    body.header-active { height: 100vh; overflow: hidden; }
    body.header-active .inner-header .header_nav_mobile { display: block; }
    body.header-active .inner-header .header_menu_mobile span:last-of-type { transform: translateX(100%); opacity: 0; }
    body.header-active .inner-header .header_menu_mobile:before { transform: rotate(-45deg) translateY(-50%); top: 50%; }
    body.header-active .inner-header .header_menu_mobile:after { transform: rotate(45deg) translateY(-50%); top: 50%; bottom: auto; }
    body.header-active .inner-header .header_menu_mobile:before, 
    body.header-active .inner-header .header_menu_mobile:after { width: 100%; }


    /* 20220712 수정 */
    header .inner-header .header_nav_mobile ol.util{
      position: absolute;
      bottom: 1.5rem;
      /* top: 32rem; */
      width: 10.125rem;
      left: 50%;
      margin-left: -5.0625rem;
      display: flex;
    }
    header .inner-header .header_nav_mobile ol.util li + li{
      margin-left: 1.125rem;
    }
    header .inner-header .header_nav_mobile ol.util img{
      width: 2.5rem;
    }
    header .inner-header .header_nav_mobile ol.util .languages {
      height: 2.5rem;
      padding: 0.5rem 0;
      display: flex;
    }
    header .inner-header .header_nav_mobile ol.util .languages a{
      display: inline-block;
      font-size: 0.9375rem;
      font-weight: 500;
      line-height: 1.5rem;
      color: #111;
    }
    header .inner-header .header_nav_mobile ol.util .languages a + a{
      margin-left: 0.8125rem;
    }
    header .inner-header .header_nav_mobile ol.util .languages.kor a:first-of-type{
      border-bottom: 0.0625rem solid #111;
    }
    header .inner-header .header_nav_mobile ol.util .languages.eng a:last-of-type{
      border-bottom: 0.0625rem solid #111;
    }



    /* 20220712 수정 */




    
    .inner-main { padding: 2.5rem 1rem 5rem 1rem; }
    .small-title { font-size: 1rem; line-height: 1.625rem; }
    .big-title { font-size: 1.5rem; line-height: 2.125rem; margin-top: 0.125rem; }

    

    .header_nav_mobile > ul > li { cursor: pointer; } 
    .header_nav_mobile > ul > li > div { font-size: 1.25rem; font-weight: 500; height: 4.5rem; display: flex; justify-content: space-between; align-items: center; color: #111; }
    .header_nav_mobile > ul > li > div img { width: 2.5rem; }
    .header_nav_mobile > ul > li > ul { height: 0; overflow: hidden; transition: height 0.5s; }
    .header_nav_mobile > ul > li.on:nth-of-type(1) > ul { height: 8.25rem; }
    .header_nav_mobile > ul > li.on:nth-of-type(2) > ul  { height: calc( 2.75rem * 4); }
    .header_nav_mobile > ul > li > ul li { height: 2.75rem; font-size: 1rem; color: #767676; }


    .inner-footer { width: 100%; padding: 1.5rem 1rem 2rem; }
    .inner-footer nav { display: block; }
    .inner-footer nav h1 { width: 12.5rem; }
    .inner-footer nav div { flex-direction: column-reverse; }

    .inner-footer nav > div img { width: 2.5rem; }
    .inner-footer nav li a { font-size: 0.8125rem; }
    .inner-footer nav .info { margin-top: 0.5rem; }
    .inner-footer nav .util { margin-left: 0; margin-top: 1.5rem; }


    /* 20220712 수정 */
    .inner-footer nav .util.pc{
      display: none;
    }
    .inner-footer nav .util.mobile{
      display: flex;
    }
    .inner-footer nav .util.mobile .languages{
      padding: 0;
    }
    .inner-footer nav .util.mobile .languages a{
      display: inline-block;
      font-size: 0.9375rem;
      font-weight: 500;
      line-height: 1.5rem;
    }
    .inner-footer nav .util.mobile .languages a + a{
      margin-left: 0.8125rem;
      position: relative;
    }
    .inner-footer nav .util.mobile .languages a + a:before{
      content:"";
      position: absolute;
      width: 0.0625rem;
      height: 0.875rem;
      top: 0.3125rem;
      left: -0.4375rem;
      background: #7E7E7E;
    }
    .inner-footer nav .util.mobile .languages.kor a:first-of-type{
      border-bottom: 0.0625rem solid #fff;
    }
    .inner-footer nav .util.mobile .languages.eng a:last-of-type{
      border-bottom: 0.0625rem solid #fff;
    }



    .inner-footer .company_info div { display: block; }
    .inner-footer .company_info div + div { margin-top: 0; }
    .inner-footer .company_info p + p { margin-left: 0; margin-top: 0.25rem; }
    .inner-footer .company_info p, 
    .inner-footer .copyright { font-size: 0.8125rem; line-height: 1.3125rem; }
    
}