@import url('/css/base.css');

.lnb_box{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.0rem;
}
.lnb{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.6rem;
}


@media screen and (max-width: 916px) and (orientation: landscape){
  .lnb{
    display: none;
  }
}

@media screen and (max-width: 585px) {
  .lnb{
    display: none;
  }
}


.con{
  margin: 6.0rem auto 0;
  max-width: 1920px;
}
.main{
  display: flex;
}
.box_content{
  display: flex;
  justify-content: stretch;
  width: 100%;
}



@media screen and (max-width: 585px) {
  .box_content{
    flex-direction: column;
  }
}
.content{
  width: calc(100% - 84.9rem);
  padding: 3.0rem 2.4rem;
  container: contents-box / inline-size;
}

.img_box{
  display: inline-block;
  width: 2.0rem;
  height: 2.0rem;
}
.img_box img{
  width: 1.6rem;
  height: 1.6rem;
}

.is_sticky{
  position: fixed;
  width: inherit;
  max-width: inherit;
}

.menu > ul{
  padding: 2.0rem 0;
}
.menu .sub_menu{
  display: none;
}
.menu .sub_menu.is_active{
  display: block;
}
.menu .sub_menu ul{
  padding: 0 0 0 2.8rem;
}
.menu li{
  /* border-left: .2rem solid transparent;
  box-sizing: border-box; */
  cursor: pointer;
}
.menu li:hover{
  /* background: var(--btn-o-selected);
  border-left: .2rem solid var(--content-main);
  box-sizing: border-box; */
}
.menu .menu_item{
  display: flex;
  justify-content: stretch;
  align-items: center;
  border-left: .2rem solid transparent;
  box-sizing: border-box;
  padding: 1.4rem 2.0rem;
  cursor: pointer;
}

.menu .menu_item:hover{
  background: var(--btn-o-selected);
  border-left: .2rem solid var(--content-main);
}
.menu.is_sticky li:hover{
  border-right: .1rem solid var(--content-main);
}
.menu li button{
  flex: 1 auto;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.menu li button:first-child{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .8rem;
}
.menu li button.arrow_btn{
  display: flex;
  justify-content: flex-end;
}
.menu li button .img_box{
  width: 2.4rem;
  height: 2.4rem;
}
.menu li button .img_box img{
  width: 2.0rem;
  height: 2.0rem;
}
.menu li button.arrow_btn img{
  transition: transform .3s;
}
.menu li button.arrow_btn.is_active img{
  transform: rotate(-180deg);
}


.menu li.sub{
  padding: .8rem 1.4rem;
  border-left: .4rem solid transparent;
}
.menu li.sub:hover{
  border-right: 0;
  background: var(--btn-o-selected);
  border-left: .4rem solid var(--content-main);
}
.menu li.sub a span{
  font-size: 1.4rem;
}

.hr_box{
  padding: 0 2.0rem;
}


/*미디어 쿼리 처리해야함*/
.mobile_gnb_area{
  display: none;
}


.gnb{
  width: 16.8%;
  max-width: 31.2rem;
  border-right: .1rem solid var(--line);
  box-sizing: border-box;
  background: var(--point-w);
  container: gnb-con / inline-size;
  
}


@media screen and (max-width: 1328px) {
  main{
    position: relative;
  }

  .gnb{
    position: absolute;
    top: 0;
    left: 0;
    width: 5.6rem;
    min-width: 5.6rem;
    height: 100%;
    transition: all .5s;
    z-index: 998;
  }
  .mobile_gnb_area{
    display: block;
    border-right: .1rem solid var(--line);
    box-sizing: border-box;
    width: 5.6rem;
    min-width: 5.6rem;
  }
  .gnb:hover{
    width: 31.2rem;
    min-width: 31.2rem;
    height: 100%;
  }

  @container gnb-con (max-width: 200px){
    .gnb .menu .menu_item button :where(span):not(.img_box),
    .gnb .menu .menu_item button.arrow_btn{
      display: none;
    }
    .gnb .menu .sub_menu{
      display: none;
    }
  }

  @container gnb-con (max-width: 57px) {
    .gnb .menu .menu_item{
      border: 0;
      padding: 1.4rem;
    }

  }
}

@media screen and (max-width: 916px) and (orientation: landscape){
  .mobile_gnb_area{
    display: none;
  }

  .gnb{
    display: none;
  }
}

@media screen and (max-width: 615px) {

  .mobile_gnb_area{
    display: none;
  }

  .gnb{
    display: none;
  }
}

.gnb .menu a{
  font-weight: var(--font-bold);
}

.snb{
  width: 52.8rem;
  max-width: 52.8rem;
  min-width: 52.8rem;
  height: 100%;
  border-right: .1rem solid var(--line);
  box-sizing: border-box;
  background: var(--point-w);
}

@media screen and (max-width: 1171px) {
  .snb{
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .box_content.two .snb{
    width: 50%;
    max-width: 50%;
    min-width: 50%;
  }
}

@media screen and (max-width: 909px){
  .box_content.two .snb{
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}

@media screen and (max-width: 638px) {
  .snb{
    width: calc(100% - 0.56rem);
    max-width: calc(100% - 0.56rem);
    min-width: calc(100% - 0.56rem);
    border-right: 0;
  }
}

@media screen and (max-width: 585px) {
  .snb{
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    border-right: 0;
  }
}


.snb_profile{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 4.0rem 2.0rem 0;
}
.snb_info{
  padding: 0 2.0rem;
}

.snb_verification{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 546px) {
  .snb_verification{
    display: block;
  }
}

.snb_verification_btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.0rem;
  margin: 2.0rem 0 0;
  border: .1rem solid var(--line);
  border-radius: .4rem;
  padding: 2.0rem 4.3rem;
  text-align: center;
}

@media screen and (max-width: 1171px) {
  .snb_verification_btn{
    width: 100%;
  }
}

.snb_verification_img_box{
  width: 4.0rem;
  height: 4.0rem;
}
.snb_verification_img_box img{
  width: 3.2rem;
  height: 3.2rem;
}

.header_box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--point-w);
  border-bottom: .1rem solid var(--line);
  z-index: 999;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1920px;
  height: 6.0rem;
  margin: 0 auto;
  padding: 0 2.0rem;
}
.header .hamburger{
  display: none;
}

@media screen and (max-width: 916px) and (orientation: landscape){
  .header .hamburger{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 4.0rem;
    height: 4.0rem;
  }

  .header .hamburger button{
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .header .hamburger button img{
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}

@media screen and (max-width: 585px) {
  .header .hamburger{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 4.0rem;
    height: 4.0rem;
  }

  .header .hamburger button{
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .header .hamburger button img{
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}

.floting_box{
  position: fixed;
  bottom: 2.0rem;
  right: 1.2rem;
}
.floting_btn_box{
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.c_sticky_box{
  position: relative;
  height: inherit;
}
.c_sticky{
  position: sticky;
  top: 4.0rem;
  left: 0;
  right: 0;
}

/*
  기본적인 컬러 상태값
*/
.c_primary{
  background: var(--btn-active);
  color: var(--point-w);
}
.c_secondary{
  background: var(--point-w);
  color: var(--content-main);
  border: .1rem solid var(--line);
}
.c_lineness{
  font-size: var(--font-xs);
}
.c_transparent{
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
}

/*배경색*/
.c_bg_main{
  background: var(--point-w);
}
.c_bg_sub{
  background: var(--sub-content-bg);
}

/*
  border style
*/
.c_line_dash{
  border-style: dashed;
}
.c_line_dot{
  border-style: dotted;
}

/*
  textdecoration 관련
*/
.c_txt_l_clear{
  text-decoration: none;
}
.c_txt_l_through{
  text-decoration: line-through;
}
.c_txt_l_under{
  text-decoration: underline;
}

/*
  textline 관련
*/
.c_txt_v_middle{
  display: inline-block;
  vertical-align: middle;
}
.c_txt_v_sub{
  display: inline-block;
  vertical-align: sub;
}

.c_txt_line_start{
  text-align: start;
}
.c_txt_line_center{
  text-align: center;
}
.c_txt_line_end{
  text-align: end;
}


.c_txt_title_xxl{
  font-size: var(--font-xxl);
}
.c_txt_title_xl{
  font-size: var(--font-xl);
}
.c_txt_title_l{
  font-size: var(--font-l);
}
.c_txt_sub_title{
  font-size: var(--font-s);
}
.c_txt_body{
  font-size: var(--font-xs);
}
.c_txt_caption{
  font-size: var(--font-xxs);
}

.c_txt_bolder{
  font-weight: var(--font-bolder);
}
.c_txt_bold{
  font-weight: var(--font-bold);
}
.c_txt_middle{
  font-weight: var(--font-middle);
}
.c_txt_regular{
  font-weight: var(--font-regular);
}
.c_txt_thin{
  font-weight: 300;
}

.c_txt_main{
  color: var(--content-main);
}
.c_txt_sub{
  color: var(--content-sub);
}
/*width / height*/

.c_w100{
  width: var(--box-w-full);
}
@media screen and (max-width: 1171px) {
  main .box_content{
    flex-direction: column;
  }

  main .box_content.two{
    flex-direction: row;
  }
}

@media screen and (max-width: 909px){
  main .box_content.two{
    flex-direction: column;
  }
}

.c_w30{
  width: 30%;
}
.c_w33{
  width: var(--box-w-equally);
}
.c_w50{
  width: var(--box-w-half);
}
@media screen and (max-width: 546px) {
  .card.c_w50{
    width: 100%;
  }
}

.c_w70{
  width: 70%;
}
.c_w16{
  width: var(--box-w-equally-2);
}

.C_h100{
  width: var(--box-h-full);
}
.C_h50{
  width: var(--box-h-half);
}
.C_h30{
  width: var(--box-h-equally);
}
.C_h16{
  width: var(--box-h-equally-2);
}

.rotate_45{
  transform: rotate(45deg);
}
.rotate_m_45{
  transform: rotate(-45deg);
}
.rotate_90{
  transform: rotate(90deg);
}
.rotate_m_90{
  transform: rotate(-90deg);
}
.rotate_180{
  transform: rotate(180deg);
}
.rotate_m_180{
  transform: rotate(-180deg);
}






/*margin_top*/
.c_m_t_4{
  margin-top: .4rem;
}
.c_m_t_8{
  margin-top: .8rem;
}
.c_m_t_10{
  margin-top: 1.0rem;
}
.c_m_t_12{
  margin-top: 1.2rem;
}
.c_m_t_14{
  margin-top: 1.2rem;
}
.c_m_t_16{
  margin-top: 1.2rem;
}
.c_m_t_20{
  margin-top: 2.0rem;
}
.c_m_t_24{
  margin-top: 2.4rem;
}
.c_m_t_30{
  margin-top: 2.0rem;
}
.c_m_t_40{
  margin-top: 4.0rem;
}
/*margin_right*/
.c_m_r_4{
  margin-right: .4rem;
}
.c_m_t_8{
  margin-right: .8rem;
}
.c_m_r_10{
  margin-right: 1.0rem;
}
.c_m_r_20{
  margin-right: 2.0rem;
}
.c_m_r_24{
  margin-right: 2.4rem;
}
.c_m_r_40{
  margin-right: 4.0rem;
}


/*기본값 클리어*/
.c_all_clear{
  margin: 0;
  border: 0;
  padding: 0;
}
.c_m_clear{
  margin: 0;
}
.c_b_clear{
  border: 0;
}
.c_p_clear{
  padding: 0;
}


/*마우스 커서*/
.c_cursor_p{
  cursor: pointer;
}
.c_cursor_m{
  cursor: move;
}
/*svg color*/
.c_filter_w{
  filter: invert(100%) sepia(0%) saturate(7500%) 
  hue-rotate(317deg) brightness(107%) contrast(105%);
}