/* rolling count */
.rolling_section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@keyframes rollingNumber {
  100% {
      top: 0px;
  }
}
@-webkit-keyframes rollingNumber {
  100% {
      top: 0px;
  }
}

#section01 { /* position: relative; */ overflow: hidden; }
#section01 .background_img { position: absolute; inset: 0; z-index: 0; }
#section01 .ani_wrap { display: flex; justify-content: center; align-items: center; padding-top: 77px; }
#section01 .ani_wrap > div { position: relative; }
#section01 .char_cn { position: absolute; top: 25px; }
#section01 .char_cn img { width: auto; }
#section01 .char_cn:nth-child(1) { right: 440px; }
#section01 .char_cn:nth-child(2) { left: 440px; }
#section01 .logo_circle img { width: auto; max-width: 100%; }
#section01 .section_inner { position: relative; z-index: 1; padding: 290px 0 180px; }
#section01 .rolling-counter-wrap .rolling-number { background: #000; }
#section01 .rolling-counter-wrap .rolling-number + .rolling-number { margin-left: 11px; }
#section01 .rolling-counter-wrap .rolling-number .numbers { animation-name: none; }
#section01 .rolling-counter-wrap.aos-animate .rolling-number .numbers {
  animation-name: rollingNumber;
  animation-duration: 1500ms;
  animation-timing-function: ease-out;
  animation-fill-mode: inherit;
  animation-fill-mode: forwards;
}
#section01 .rolling-counter-wrap + .caption { color: #fff; text-align: center; font-size: 16px; margin-top: 1em; opacity: 0.5; }
#section01 .section_title { margin-top: 60px; }
#section01 .text_warp { display: flex; justify-content: space-between; align-items: flex-start; color: #fff; max-width: 1050px; margin: 0 auto; }
#section01 .text_warp .left { font-size: 40px; line-height: 1.2em; }
#section01 .text_warp .right { font-size: 19px; font-weight: 300; line-height: 1.5em; }
#section01 .flow_inner { position: absolute; top: 0; left: 50%; -webkit-transform: translate3d(-50%,0,0); width: 1920px; height: 100%; }
#section01 .flow-ani-wrap { position: absolute; top: 0; height: 100%; }
#section01 .flow-ani-wrap:before,
#section01 .flow-ani-wrap:after { content: ""; position: absolute; left: 0; width: 100%; height: 100px; z-index: 10; }
#section01 .flow-ani-wrap:before { top: 0; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
#section01 .flow-ani-wrap:after { bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); }
#section01 .flow-ani-wrap ul { padding-top: 32px; }
#section01 .flow-left { left: 105px; }
#section01 .flow-right { right: 105px; }



#section01 { /* position: relative; */ overflow: hidden; }
#section01 .background_img { position: absolute; inset: 0; z-index: 0; }
#section01 .ani_wrap { display: flex; justify-content: center; align-items: center; padding-top: 77px; }
#section01 .ani_wrap > div { position: relative; }
#section01 .char_cn { position: absolute; top: 25px; }
#section01 .char_cn img { width: auto; }
#section01 .char_cn:nth-child(1) { right: 440px; }
#section01 .char_cn:nth-child(2) { left: 440px; }
#section01 .logo_circle img { width: auto; max-width: 100%; }
#section01 .section_inner { position: relative; z-index: 1; padding: 290px 0 180px; }
#section01 .rolling-counter-wrap .rolling-number { background: #000; }
#section01 .rolling-counter-wrap .rolling-number + .rolling-number { margin-left: 11px; }
#section01 .rolling-counter-wrap .rolling-number .numbers { animation-name: none; }
#section01 .rolling-counter-wrap.aos-animate .rolling-number .numbers {
  animation-name: rollingNumber;
  animation-duration: 1500ms;
  animation-timing-function: ease-out;
  animation-fill-mode: inherit;
  animation-fill-mode: forwards;
}









#section02 { /* position: relative; */ overflow: hidden; }
#section02 .background_img { position: absolute; inset: 0; z-index: 0; }
#section02 .ani_wrap { display: flex; justify-content: center; align-items: center; padding-top: 77px; }
#section02 .ani_wrap > div { position: relative; }
#section02 .char_cn { position: absolute; top: 25px; }
#section02 .char_cn img { width: auto; }
#section02 .char_cn:nth-child(1) { right: 440px; }
#section02 .char_cn:nth-child(2) { left: 440px; }
#section02 .logo_circle img { width: auto; max-width: 100%; }
#section02 .section_inner { position: relative; z-index: 1; padding: 290px 0 180px; }
#section02 .rolling-counter-wrap .rolling-number { background: #000; }
#section02 .rolling-counter-wrap .rolling-number + .rolling-number { margin-left: 11px; }
#section02 .rolling-counter-wrap .rolling-number .numbers { animation-name: none; }
#section02 .rolling-counter-wrap.aos-animate .rolling-number .numbers {
  animation-name: rollingNumber;
  animation-duration: 1500ms;
  animation-timing-function: ease-out;
  animation-fill-mode: inherit;
  animation-fill-mode: forwards;
}
#section02 .rolling-counter-wrap + .caption { color: #fff; text-align: center; font-size: 16px; margin-top: 1em; opacity: 0.5; }
#section02 .section_title { margin-top: 60px; }
#section02 .text_warp { display: flex; justify-content: space-between; align-items: flex-start; color: #fff; max-width: 1050px; margin: 0 auto; }
#section02 .text_warp .left { font-size: 40px; line-height: 1.2em; }
#section02 .text_warp .right { font-size: 19px; font-weight: 300; line-height: 1.5em; }
#section02 .flow_inner { position: absolute; top: 0; left: 50%; -webkit-transform: translate3d(-50%,0,0); width: 1920px; height: 100%; }
#section02 .flow-ani-wrap { position: absolute; top: 0; height: 100%; }
#section02 .flow-ani-wrap:before,
#section02 .flow-ani-wrap:after { content: ""; position: absolute; left: 0; width: 100%; height: 100px; z-index: 10; }
#section02 .flow-ani-wrap:before { top: 0; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
#section02 .flow-ani-wrap:after { bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); }
#section02 .flow-ani-wrap ul { padding-top: 32px; }
#section02 .flow-left { left: 105px; }
#section02 .flow-right { right: 105px; }



#section02 { /* position: relative; */ overflow: hidden; }
#section02 .background_img { position: absolute; inset: 0; z-index: 0; }
#section02 .ani_wrap { display: flex; justify-content: center; align-items: center; padding-top: 77px; }
#section02 .ani_wrap > div { position: relative; }
#section02 .char_cn { position: absolute; top: 25px; }
#section02 .char_cn img { width: auto; }
#section02 .char_cn:nth-child(1) { right: 440px; }
#section02 .char_cn:nth-child(2) { left: 440px; }
#section02 .logo_circle img { width: auto; max-width: 100%; }
#section02 .section_inner { position: relative; z-index: 1; padding: 290px 0 180px; }
#section02 .rolling-counter-wrap .rolling-number { background: #000; }
#section02 .rolling-counter-wrap .rolling-number + .rolling-number { margin-left: 11px; }
#section02 .rolling-counter-wrap .rolling-number .numbers { animation-name: none; }
#section02 .rolling-counter-wrap.aos-animate .rolling-number .numbers {
  animation-name: rollingNumber;
  animation-duration: 1500ms;
  animation-timing-function: ease-out;
  animation-fill-mode: inherit;
  animation-fill-mode: forwards;
}


.rolling_div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 1% 0% 1% 0%;
}
.rolling-counter-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rolling-counter-wrap * {
  font-family: var(--font-family-title);
  font-size: 120px;
}

.rolling-counter-wrap .row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.rolling-number {
  position: relative;
  width: 120px;
  height: 1.2em;
  overflow: hidden;
  color: #fff;
  text-align: center;
  outline: 2px solid #d70315;
}

.rolling-number+.rolling-number {}

.rolling-number .numbers {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
}

.rolling-number .numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.2em;
  line-height: normal;
  letter-spacing: -0.05em;
  font-weight: 500;
}
@media (max-width:768px){
  .mobileView{
      display: block;
  }
  .rolling-number .numbers span{
      height: 17rem;
  }
}

.rolling-dot,
.rolling-unit {
  line-height: 1em;
  font-size: 42px;
  font-weight: 700;
  padding-bottom: 1.4em;
  color: #fff;
}

.rolling-dot {
  margin: 0 5px;
}

.rolling-unit {
  margin: 0 10px;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
}



.rolling-number[data-number="0"] .numbers {
  top: -1000%;
}

.rolling-number[data-number="1"] .numbers {
  top: -1100%;
}

.rolling-number[data-number="2"] .numbers {
  top: -1200%;
}

.rolling-number[data-number="3"] .numbers {
  top: -1300%;
}

.rolling-number[data-number="4"] .numbers {
  top: -1400%;
}

.rolling-number[data-number="5"] .numbers {
  top: -1500%;
}

.rolling-number[data-number="6"] .numbers {
  top: -1600%;
}

.rolling-number[data-number="7"] .numbers {
  top: -1700%;
}

.rolling-number[data-number="8"] .numbers {
  top: -1800%;
}

.rolling-number[data-number="9"] .numbers {
  top: -1900%;
}

.rolling-number[data-number="10"] .numbers {
  top: -1000%;
}

.rolling-number .numbers {
  animation-name: rollingNumber;
  animation-duration: 1500ms;
  animation-timing-function: ease-out;
  animation-fill-mode: inherit;
  animation-fill-mode: forwards;
}
/* rolling_테두리 설정 */
.rolling-number {
  outline: 2px solid #cb361e;
  border-radius: 0px;
}
/* rolling_글씨 색상 */
.rolling-number {
  position: relative;
  width: 120px;
  height: 1.2em;
  overflow: hidden;
  color: white;
  text-align: center;
}
/* background-color */
#section01 .rolling-counter-wrap .rolling-number {
  background: #cb361e;
}
.rolling-number {
  font-family: 'GmarketSans';
  position: relative;
  width: 4vw;
  height: 4.8vw;
  overflow: hidden;
  text-align: center;
}
.rolling-unit {
  margin: 0 10px;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
  padding: 0;
  margin: 0;
  font-size: 4vw;
  margin-bottom: -1%;
  margin-left: 1%;
  margin-right: 1%;
  color: #cb361e;
  z-index: 0;
}
.rolling-number .numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  letter-spacing: -0.05em;
  font-weight: 900;
  font-size: 4vw;
  width: 100%;
  height: 5.5vw;
}
.rolling-number[data-number="9"] .numbers {
  top: -1200%;
}
.rolling-number[data-number="6"] .numbers {
  top: -1400%;
}
.con01_count_wrap{
  margin-left: -3%;
}
.rolling-number {
  outline: 2px solid #06138a;
  border-radius: 0px;
}
#section01 .rolling-counter-wrap .rolling-number {
  background: #06138a;
}
#section02 .rolling-counter-wrap .rolling-number {
  background: #06138a;
}
.rolling-unit {
  margin: 0 10px;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
  padding: 0;
  margin: 0;
  font-size: 4vw;
  margin-bottom: -1%;
  margin-left: 1%;
  margin-right: 1%;
  color: #06138a;
  z-index: 0;
}
#section02 .rolling-counter-wrap .rolling-number + .rolling-number {
  margin-left: 11px;
}


.rolling-number {
  font-family: 'nanum myungjo' !important;
}

.rolling-number .numbers span{
  font-family: "Nanum Myeongjo", serif;

}
#section01 .rolling-counter-wrap .rolling-number{
  background: transparent;
  border: unset;
  outline: unset;
  background: url(/images/con08_02.png) no-repeat center / cover;

}

.rolling-unit {
  margin: 0 10px;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
  padding: 0;
  margin: 0;
  font-size: 4vw;
  margin-bottom: -1%;
  margin-left: 1%;
  margin-right: 1%;
  color: #008538;
  z-index: 0;
}

#section01 .rolling-counter-wrap .rolling-number {
  background: transparent;
  border: unset;
  outline: unset;
  background: url(/images/con08_02.png) no-repeat 42% 38% / 115%;
}


.con01_count_wrap{
  margin-top: 2%;
}
@media screen and (max-width:599px) {
    #section01 .rolling-counter-wrap .rolling-number + .rolling-number { margin-left: 7px; }
  .rolling-number {
    width: 9vw;
    height: 10.3vw;
}

  #section02 .rolling-counter-wrap .rolling-number + .rolling-number { margin-left: 7px; }
  .rolling-number {
    width: 9vw;
    height: 10.3vw;
  }


.rolling-number .numbers span {
  font-size: 7vw;
  height: 11.5vw;

}
.rolling-unit {
  font-size: 7vw;
  margin-bottom: -2%;
}
  #section01 .rolling-counter-wrap .rolling-number {
    background: transparent;
    border: unset;
    outline: unset;
    background: url(/images/con08_02.png) no-repeat 42% 38% / 106%;
  }
}
/* rolling count */