@charset "utf-8";

 /* 공통서식 */

/* flex 공통 서식 */
.flex{
  display: flex;
  align-items: center;
  
  &.column{
    flex-direction: column;
    align-items: center;

    &.srt{align-items: flex-start;}
    &.end{align-items: flex-end;}
  }
}
.flex.bet{justify-content: space-between;}
.flex.cen{justify-content: center;}
.flex.srt{justify-content: flex-start;}
.flex.end{justify-content: flex-end;}

.gap-11{gap: var(--space-11);}
.gap-15{gap: var(--space-15);}
.gap-25{gap: var(--space-25);}
.gap-35{gap: var(--space-35);}
.gap-55{gap: var(--space-55);}
.gap-70{gap: var(--space-70);}
.gap-90{gap: var(--space-90);}
.gap-170{gap: var(--space-170);}



/* padding margin 공통 서식 */
.padding {
    padding: 190px 360px;
    box-sizing: border-box;

    &.width{padding: 0 360px;}

    &.min{padding: 90px 360px 170px 360px;}
}
.margin {
    margin: 170px 360px;
    box-sizing: border-box;
}



/* 글씨 공통 서식 */
h3{
  font-size: var(--tit-font);
  color: var(--dark-font);
  font-weight: 700;
  line-height: 30px;
}



/* btn 공통 서식 */
.btn{
  border: 1px solid var(--dark-font);
  color: var(--dark-font);
  background: transparent;
  font-size: var(--semi-font);;
  height: 54px;
  padding: 0 55px;
  box-sizing: border-box;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  position: relative;
  z-index: 0;
  transition: .3s ease-in;

  &:before{
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0px; height: 100%;
    background: var(--dark-font);
    transition: .3s ease-in;
    z-index: -1;
  }

  &:hover::before{
    width: 100%;
  }
  &:hover{
    color: #fff;
  }

  > i{font-size: var(--icon-font);;}

  &.mini{ 
    font-size: 15px;
    padding: 11px 13px;
    height: auto;
  }
  &.white{
    border: 1px solid #fff;
    color: #fff;
    background: transparent;

    &:before{
      background: #fff;
    }

    &:hover{color: var(--dark-font);}
  }
  &.same{
    width: 230px;
    white-space: nowrap;

    &.on{
      background: var(--dark-font);
      color: #fff;
    }
  }
  &.search{
    border: none;
    background: var(--background);
    min-width: 350px; height: 48px;
    padding: 13px 15px;
    color: var(--placeholder);
    cursor: default;

    &:hover::before{width: 0;}
    &:hover{color: var(--placeholder);}

    > input{
      border: none; background: none;
      width: 100%;
      font-size: 16px;
    }

    > i{
      color: var(--placeholder);
      font-size: var(--icon-font);
      cursor: pointer;
    }
  }

  &.select{
    border: none;
    background: var(--background);
    min-width: 200px; height: 48px;
    padding: 13px 15px;
    color: var(--placeholder);
    z-index: 10;

    &:hover::before{width: 0;}
    &:hover{color: var(--placeholder);}

    &.line{
      background: none;
      border-bottom: var(--text-border);

      > ul{border-top: var(--base-border);}
    }

    > div{
      width: 100%;
      cursor: pointer;

      > span{
        color: var(--placeholder);
        font-size: 16px;

        &.checked{color: var(--middle-font);}
      }
      > i{
        color: var(--placeholder);
        font-size: var(--icon-font);
        transition: transform .3s ease;

        &.spin{transform: rotate(180deg);}
      }
    }

    > ul{
      display: none;
      position: absolute;
      left: 0; top: 100%;
      background: #fff;
      width: 100%;
      border: var(--base-border);
      border-top: none;
      
      > li{
        width: 100%;

        > span{
          padding: 15px 13px;
          cursor: pointer;
          box-sizing: border-box;
          color: var(--middle-font);
          font-size: 16px;
          font-weight: 600;
          display: inline-block;
          transition: color .3s ease;

          &:hover{
            color: var(--dark-font);
          }
        }
      }
    }
  }

  &.text{
    width: 100%;
    border: none;
    border-radius: 0;
    border-bottom: var(--text-border);
    padding: 7px 15px;
    font-size: 16px;
    cursor: text;
    padding: 7px;

    &:hover{color: var(--dark-font);}
  }

  &.full{width: 100%;}
} 

.footer-btn{
  width: 40px; height: 40px;
  border: 2px solid #fff;
  background: transparent;
  border-radius: 50%;

  > i{font-size: var(--icon-font);;}
}









/* header */
header{
  background: var(--dark-font);
  border-bottom: var(--dark-border);
  width: 100%; height: 65px;
  position: fixed;
  top: 0; left: 0;
  padding: 0 80px;
  box-sizing: border-box;
  z-index: 9999;
  transition: top 0.2s ease-in-out, height 0.35s ease, background 0.35s ease;

  > div{
    width: 100%; height: 100%;

    > .nav-wrap{
      width: 100%;

      > h1{
        width: 130px;
        line-height: 0;

        > a > img{
          width: 100%;
          display: block;
        }
      }

      > nav > ul > li{
        width: fit-content;

        > a{
          font-size: var(--base-font);
          color: #fff;
          padding: 11px 35px;
          box-sizing: border-box;

          &.check{border-bottom: var(--dark-border);}
        } 
      }

      > i{display: none;}
    }
  }

  .mnu-list{display: none;}
}

.nav-up {
  top: -100px;
}



main{
  margin-top: 65px;

  > .company-filter, .product-filter{
    background: #fff;
    position: sticky;
    top: 0; left: 0;
    padding-top: var(--space-11);
    padding-bottom: var(--space-11);
    z-index: 10;
  }

  article > h2{
    font-size: 48px;
    line-height: 55px;
    color: var(--dark-font);
    text-align: center;
    font-weight: 800;
  }

  > section.intro{
    width: 100%;
    padding: 90px 0;
    box-sizing: border-box;

    > .txt{
      width: 100%;

      > h2{
        font-size: 48px;
        font-weight: 800;
        color: var(--dark-font);
      }
      > p{font-size: 18px;}
    }

    > .img{
      width: 100%; height: 370px;
      overflow: hidden;

      > img{
        width: 100%;
      }
    }
  }
}



footer{
  background: var(--dark-font);
  width: 100%;
  padding: 70px 120px;
  box-sizing: border-box;

  > div{
    width: 100%;

    > h1{
      width: 100%;

      > img{width: 170px;}
    }

    > .footer-info{
      width: 100%;
      align-items: stretch !important;

      > .fam-wrap{
        justify-content: space-between;
        align-self: stretch;
        height: auto;
        position: relative;
        
        > .fam-site{
          border-bottom: 1px solid #fff;
          padding: 11px 7px;

          > div{
            cursor: pointer;

            > i{
              font-size: var(--icon-font);
              transition: transform .3s ease;

              &.spin{
                transform: rotate(180deg);
              }
            }
          }

          > ul{
            display: none;
            position: absolute;
            left: 0; bottom: 100%;
            background: #fff;
            width: 100%;
            
            > li{
              width: 100%;

              > span{
                padding: 15px 11px;
                cursor: pointer;
                box-sizing: border-box;
                color: var(--middle-font);
                font-weight: 600;
                display: inline-block;
                transition: color .3s ease;

                &:hover{color: var(--dark-font);}
              }
            }
          }
        }
      }

      > .copyright > small{font-size: 13px;}
    }
  }  
}










/* tablet 해상도 */
@media screen and (max-width: 1750px){

	/* padding margin 공통 서식 */
  .padding {
      padding: 130px 25px;
      box-sizing: border-box;

      &.width{padding: 0 25px;}

      &.min{padding: 70px 25px 130px 25px;}
  }
  .margin {
      margin: 130px 25px;
      box-sizing: border-box;
  }

  .gap-35{gap: var(--space-25);}
  .gap-90{gap: var(--space-70);}
  .gap-170{gap: var(--space-130);}

  .footer-btn{width: 55px; height: 55px;}

  .btn{
    color: var(--dark-font);

    &.search{
      min-width: 250px;
    }

    &.select{
      min-width: 150px;
    }
  }



  header{
  width: 100%; height: 65px;
  padding: 0 25px;

    > div{
      width: 100%;

      > .nav-wrap{
        width: 100%;
        justify-content: space-between !important; 

        > h1{
          width: 170px;
          line-height: 0;

          > a > img{
            width: 100%;
            display: block;
          }
        }

        > nav{
          display: none;
        }

        > i{
          display: block;
          color: #fff;
        }
      }
    }

    .mnu-list{
      display: none;
      position: absolute;
      top: 65px; left: 0;
      background: var(--dark-font);
      width: 100%; height: calc(100dvh - 65px);

      > nav > ul{
        padding: var(--space-35);
        box-sizing: border-box;

        > li{
          width: 100%;
          
          > a{
            display: block;
            padding: 35px 15px;
            box-sizing: border-box;
            font-size: var(--tit-font);
            color: #fff;
            font-weight: 700;
            line-height: 30px;
          }
        }
      }
    }
  }



  main{
  margin-top: 65px;

  > .company-filter, .product-filter{position: static;}

  article > h2{
    font-size: 37px;
    line-height: 50px;
  }

  > section.intro{   
    padding: 90px 0;

    > .txt{
      width: 100%;

      > h2{
        font-size: 37px;
      }
      > p{font-size: 18px;}
    }

    > .img{
      width: 100%; height: 300px;

      > img{
        width: auto; height: 100%;
      }
    }
  }
}



  footer{
    padding: 70px 25px;

    > div{
      width: 100%;

      > h1{
        width: 100%;

        > img{width: 170px;}
      }

      > .footer-info{
        width: 100%;

        > .fam-wrap{
          justify-content: space-between
        }
      }
    }
  }
}










/* mob 해상도 */
@media screen and (max-width:767px) {

  /* padding margin 공통 서식 */
  .padding {
      padding: 90px 15px;
      box-sizing: border-box;

      &.width{padding: 0 15px;}

      &.min{padding: 70px 15px 70px 15px;}
  }
  .margin {
      margin: 70px 15px;
      box-sizing: border-box;
  }

  /* 글씨 공통 서식 */
  h3{font-size: 18px;}

  .gap-35{gap: var(--space-25);}
  .gap-90{gap: var(--space-55);}
  .gap-170{gap: var(--space-90);}

  .footer-btn{width: 45px; height: 45px;}

  .btn{
    color: var(--dark-font); 
    font-size: 15px;
    padding: 3px 7px;

    &.same{
      width: auto;
      min-width: 100px;
    }

    &.search{
      min-width: 150px;
    }

    &.select{
      min-width: 70px;

      > div{
        width: 100%;

        > span{font-size: 15px;}
      }

      > ul{
        display: none;
        
        > li{
          width: 100%;

          > span{
            font-size: 15px;
          }
        }
      }
    }

    &.max{min-width: 200px;}
  }



header{
  width: 100%; height: 55px;
  padding: 0 15px;

  > div{
    width: 100%;
    gap: 0;

    > .nav-wrap{
      width: 100%;
      justify-content: space-between !important; 
      gap: 0;

      > h1{
        width: 110px;
        line-height: 0;

        > a > img{
          width: 100%;
          display: block;
        }
      }

      > nav{
        display: none;
      }

      > i{
        display: block;
        color: #fff;
      }
    }

    > .cata{display: none;}
  }

  .mnu-list{
    display: none;
    position: absolute;
    top: 55px; left: 0;
    background: var(--dark-font);
    width: 100%; height: calc(100dvh - 55px);

    > nav > ul{
      padding: var(--space-35);
      box-sizing: border-box;

      > li{
        width: 100%;
        
        > a{
          display: block;
          padding: 35px 15px;
          box-sizing: border-box;
          font-size: var(--tit-font);
          color: #fff;
          font-weight: 700;
          line-height: 30px;
        }
      }
    }
  }
}



main{
  margin-top: 55px;

  > .company-filter, .product-filter{position: static;}

  article > h2{
    font-size: 28px;
    line-height: 45px;
    word-break: keep-all;
  }

  > section.intro{   
    padding: 70px 0;

    > .txt{
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      text-align: center;

      > h2{
        font-size: 28px;
        line-height: 35px;
      }
      > p{font-size: 15px;}
    }

    > .img{
      width: 100%; height: 150px;
      overflow: hidden;

      > img{
        width: auto; height: 100%;
      }
    }
  }
}



footer{
  padding: 70px 25px;

  > div{
    width: 100%;
    gap: var(--space-35);

    > h1{
      width: 100%;

      > img{width: 130px;}
    }

    > .footer-info{
      width: 100%;
      flex-direction: column;
      gap: var(--space-25);

      > .fam-wrap{
        justify-content: space-between;
        align-items: flex-start !important;
        gap: var(--space-25); 

        > .fam-site{width: 100%;}
      }
    }
  }
}



}