@charset "utf-8";

.comSec * {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

/* .secGrnHist__titGrp { width: 100%; display: flex; align-items: center; justify-content: space-between;} */
/* .secGrnHist__tit {color: var(--clr_dark_blue); font-weight: bold;} */
.secGrnHist__tit--blue {color: var(--clr_blue);}
.secGrnHist__hist {
  font-weight: bold; text-align: center;
  text-align: center; margin: 0 auto; margin-top: 100px;
}
.secGrnHist__hist--num {color: var(--clr_blue);}
.secGrnHist__hist--txt {color: var(--clr_blue); opacity: 0.6;}

.secGrnHist__year {
  width: 100%; overflow-x: auto; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; 
}
.secGrnHist__year > .on {background-color: #3e9fff; color: #fff; opacity: 0.9;  border-radius: 3px;}

.secGrnHist__year > li {
  width: auto; height: 100%;
  font-weight: bold; text-align: center;
  color: #bcbcbc; cursor: pointer;
}
.secGrnHist__year::-webkit-scrollbar{display: none;}
/* firefox 브라우져 css 별도 적용 */
@-moz-document url-prefix() {.secGrnHist__year{scrollbar-width: none; /* 스크롤바 너비 (auto, thin, none) */}}
.secGrnHist__year--arrow{display: none;}

.secGrnHist__tab {
  width: 100%; height: auto; position: relative;
  background-color: var(--clr_smWhite); border: var(--mix_brdr_btrDkr); border-radius: 18px;
}
#tab1.secGrnHist__tab{background-color: unset; border: unset; padding: unset;}
#tab1.secGrnHist__tab > div{background-color: var(--clr_smWhite); border: var(--mix_brdr_btrDkr); border-radius: 18px; margin-bottom: 20px;}

.secGrnHist__tab ul {display: flex; flex-direction: column;}
.secGrnHist__tab ul > li {
  width: 100%; height: auto;
  position: relative; 
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 2%;
  padding-bottom: 40px;
}
.secGrnHist__tab ul > li:last-child{padding-bottom: unset;}
.secGrnHist__tab ul > li:before {
  background-image: url(/assets/img/com/dot.png);
  background-repeat: repeat-y;
  background-position: 0 top; 
  background-size: auto;
  position: absolute; bottom: 0; 
  /* left: 32px; */
  content: ""; width: 100%; 
  /* height: calc(100% - 85px); */
}
.secGrnHist__tab--num {
  background-image: url(/assets/img/com/meath_icon.png);
  font-weight: 700; color: #51a8ff;
  display: flex; align-items: center; justify-content: center;
}
.secGrnHist__tab--txt {
  flex: 1; display: flex; flex-direction: column; row-gap: 10px;
  margin-top: 15px; color: var(--clr_black_ex); font-weight: 400;
}
.secGrnHist__tab--txt p{position: relative;  margin-left: 12px;}
.secGrnHist__tab--txt p::before{content:"·"; position: absolute; top: 0; left: -12px;}

.secgrnhist__tab--year {
  color: var(--clr_black_mn);
  text-align: center; font-weight: 700;
  /* font-family: 'Nanum Barun Gothic'; */
}



@media (max-width: 767px) {
  /* .secGrnHist__tit {font-size: 18px; line-height: 27px;} */
  .secGrnHist__hist{margin-bottom: 20px;}
  .secGrnHist__hist--num {font-size: 28px; line-height: 31px;}
  .secGrnHist__hist--txt{font-size: 14px;}

  .secGrnHist__yearTab {position: relative;}
  .secGrnHist__yearTab .scrollArrow {top: 16.5px; right: -12px; padding-bottom: 5px; background-color: transparent;} 
  .secGrnHist__tab{padding: 20px 15px 20px 10px;}
  .secGrnHist__tab ul > li:before {background-size: 12px; left: 11px; height: calc(100% - 36px); opacity: 0.6;}
  #tab1.secGrnHist__tab > div{padding: 25px 15px 20px 10px;}
  .secGrnHist__tab--num {width: 40px; height: 36px; padding-right: 6px; font-size: 16px;}
  .secGrnHist__tab--txt {font-size: 14px; line-height: 22px; margin-top: 10px;}
  .secGrnHist__tab--txt p{margin-left: 10px;}
  .secGrnHist__tab--txt p::before{left: -10px;}
  .secgrnhist__tab--year{font-size: 20px; margin-bottom: 15px;}
  .secGrnHist__year{margin-bottom: 30px; width: calc(100% - 10px); gap: 2px; justify-content: flex-start;}
  .secGrnHist__year > li{font-size: 16px; height: 32px; line-height: 32px; padding: 0 8px;}
}

  
@media (min-width: 768px) and (max-width: 1023px) {
  .secGrnHist__hist{margin-bottom: 50px;}
  /* .secGrnHist__tit {font-size: 22px; line-height: 36px;} */
  .secGrnHist__hist--num {font-size: 30px;}
  .secGrnHist__hist--txt{font-size: 16px;}
  
  .secGrnHist__tab{padding: 35px 25px 35px 30px;}
  .secGrnHist__tab ul > li:before {background-size: 20px; left: 23px; height: calc(100% - 70px);}
  #tab1.secGrnHist__tab > div{padding: 35px 25px 35px 30px;}
  .secgrnhist__tab--year{font-size: 28px; margin-bottom: 25px;}
  .secGrnHist__tab--num {
    font-size: 26px; width: 75px; height: 70px;
    display: flex; align-items: center; justify-content: center; padding-right: 10px;
  }
  .secGrnHist__tab--txt {font-size: 16px; line-height: 24px;}
  .secGrnHist__year {gap: 10px; margin-bottom: 50px;}
  .secGrnHist__year > li{font-size: 20px; height: 38px; line-height: 38px; padding:0 10px;}
}


@media all and (min-width:1024px){
  .secGrnHist__hist{margin-bottom: 60px;}
  /* .secGrnHist__tit {font-size: 24px; line-height: 36px;} */
  .secGrnHist__hist--num {font-size: 48px;}
  .secGrnHist__hist--txt{font-size: 18px;}

  .secGrnHist__tab{padding: 70px 65px;}
  .secGrnHist__tab ul > li{gap: 40px;}
  .secGrnHist__tab ul > li:before {background-size: 20px; left: 23px; height: calc(100% - 70px);}
  #tab1.secGrnHist__tab > div {padding: 50px 55px; margin-bottom: 40px;}
  /* .secGrnHist__tab--num {width: 95px; height: 85px; padding-right: 12px; font-size: 34px; } */
  .secGrnHist__tab--num {
    font-size: 26px; width: 75px; height: 70px;
    display: flex; align-items: center; justify-content: center; padding-right: 10px;
  }

  .secGrnHist__tab--txt {font-size: 16px; line-height: 24px;}
  /* .secGrnHist__tab--txt {font-size: 18px; line-height: 28px;} */
  .secgrnhist__tab--year{ font-size: 35px; margin-bottom: 50px;}
  .secGrnHist__year{gap: 15px; margin-bottom: 70px;}
  .secGrnHist__year > li{font-size: 24px; height: 41px; line-height: 41px; padding: 0 13px; border-radius: 5px;}
}