.headerh {position: absolute; z-index: -9999; left: -9999px;}
.pc_br {display: inline-block;}

.sec1_list {width: 100%; height: auto;}
.sec1_list ul {display: flex; align-items: center; gap: 40px 0; margin: 0 -10px;}
.sec1_list ul li {width: calc(100% / 4); padding: 0 10px; box-sizing: border-box;}
.sec1_list ul li .child-box {display: flex; flex-flow: column; align-items: center; justify-content: center; width: 100%; height: 260px; border-radius: 20px; background-image: linear-gradient(149deg, #7a7a7a 6%, #2b2b2b 86%);}
.sec1_list ul li .child-box .txt {margin-bottom: 45px; font-size: 30px; font-weight: 400; line-height: 1.33; color: var(--wt); text-align: center;}
.sec1_list ul li .child-box .txt span {position: relative; color: var(--pr);}
/* .sec1_list ul li .child-box .txt span:after {} */
.sec1.on .sec1_list ul li .child-box .txt span:after {animation: line_w 1s linear both; position: absolute; bottom: -2px; left: 0; content: ''; display: block; width: 100%; height: 2px; background: var(--pr);}
@keyframes line_w {
  0% {width: 0;}
  100% {width: 100%;}
}
.sec1_list ul li .child-box .img-box {width: 117px; height: auto; margin: 0 auto;}
.sec1_list ul li .child-box .img-box img {width: 100%; height: auto;}

/* talk_content */
.sec2 {position: relative; width: 100%; height: auto; margin-top: 80px; /*background: url(./../img/sec2_bg.png)no-repeat 50% 50%; background-size: cover; background-position: bottom; filter: grayscale(0.9); background-attachment: fixed;*/}
.sec2 .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sec2 .img-box img {width: 100%; height: 100%; object-fit: cover; object-position: bottom; filter: grayscale(1) brightness(0); transition: all 4s; transition-delay: 1s;}

.sec2 .tit-box {opacity: 0; animation: opaani 1.5s linear both;}
/* .sec2.on .tit-box{animation: opaani 1s linear both;} */
@keyframes opaani {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.sec2.on .img-box img {filter: grayscale(0) brightness(1);}
.talk_content {width: 100%; height: auto; padding: 60px; box-sizing: border-box; border-radius: 40px;  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background: rgba(0, 0, 0, 0.2);}
.sec2.on .talk_content {animation: filterani 3s linear both;}
@keyframes filterani {
  0% {background: rgba(0, 0, 0, 0.2);}
  100% {background: rgba(255, 255, 255, 0.2);}
}

.talk_content ul {display: flex; flex-flow: column; gap: 45px; opacity: 0; animation: opaani 2s linear both;}
/* .sec2.on .talk_content ul{animation: opaani 1s linear both;} */
@keyframes opaani {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


.talk_content ul li {width: 100%; height: auto;}
.talk_content ul li .child-box {display: flex; align-items: flex-start; gap: 41px;}
.talk_content ul li .child-box .icon-box {width: 70px; height: auto; border-radius: 100%;}
.talk_content ul li .child-box .icon-box img {width: 100%; height: auto;}

.talk_content ul li .child-box .txt-box {display: flex; flex-flow: column; gap: 15px;}
.talk_content ul li .child-box .txt-box .name {font-size: 20px; font-weight: 500; line-height: 1.21; color: var(--wt);}
.talk_content ul li .child-box .txt-box .talk_txt {position: relative; padding: 25px; box-sizing: border-box; background: var(--black_151); font-size: 30px; font-weight: 300; line-height: 1.2; color: var(--wt); border-radius: 10px;}
.talk_content ul li .child-box .txt-box .talk_txt:before {position: absolute; top: 15px; left: -25px; content: ''; display: block; width: 26px; height: 21px; background: url(./../img/sp.png)no-repeat 50% 50%; background-size: cover;}
.talk_content ul li .child-box .txt-box .talk_txt span {font-weight: 600; color: var(--pr);}

/* num_txt */
.sec3 {animation: bg_rolling 20s linear alternate infinite; width: 100%; height: auto; background: url(./../img/sec3_bg.webp)no-repeat 50% 50%; background-size: 4282px;}
@keyframes bg_rolling {
  0% {background-position: 0%;}
  100% {background-position: 60%;}
}
.num_txt {display: flex; align-items: flex-end; justify-content: center; width: 100%; height: auto;}
.num_txt .img-box {width: 153px; height: auto; margin-bottom: 95px;}
.num_txt .img-box img {width: 100%;}
.num_txt .num {animation: heartbeat 1.5s ease-in-out infinite both; font-size: 400px; font-weight: 900; line-height: 1.19; letter-spacing: -20px; color: var(--pr);}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.num_txt .num span {font-size: 150px; font-weight: bold; line-height: 1.19; color: var(--pr);}

/* graph-content */
.downward-img {position: relative;}
.downward-img:before {position: absolute; top: 0; right: 0; content: ''; width: 100%; height: 100%; background: var(--black_151);}
.sec4.on .downward-img:before {animation: before_wh .5s .5s linear both;}
@keyframes before_wh {
  0% {width: 100%;}
  100% {width: 0%;}
}

.graph-content {display: flex; align-items: center;}
.graph-content .graph-bar {}
.graph-content .graph-bar .d-flex {display: flex; align-items: center; justify-content: center; gap: 15px;}
.graph-content .graph-bar .existing {position: relative; display: flex; align-items: center; justify-content: center; width: 120px; height: 275px; border-radius: 5px; background: var(--gray_46); overflow: hidden; z-index: 1;}
.sec4 .graph-content .graph-bar .existing:before {transition: all .5s;}
.sec4 .graph-content .graph-bar .existing:before {animation: height100 .5s linear both; position: absolute; bottom: 0; left: 0; content: ''; display: block; width: 100%; height: 100%; background: var(--red); z-index: -1;}
/* @keyframes height100 {
  0% {height: 0%;}
  100% {height: 100%;}
} */

.graph-content .graph-bar .existing span {font-size: 26px; font-weight: 500; line-height: 1.19; color: var(--gray_ef); text-align: center;}
.graph-content .graph-bar .present {position: relative; display: flex; align-items: center; justify-content: center; width: 120px; height: 275px; border-radius: 5px; background: var(--gray_46); overflow: hidden; z-index: 1;}
.graph-content .graph-bar .present:before {position: absolute; bottom: 0; left: 0; content: ''; display: block; width: 100%; height: calc(100%); background: var(--red); z-index: -1;}
.sec4.on .graph-content .graph-bar .present:before {animation: graph_down .5s 1s linear both;}
@keyframes graph_down {
  0% {height: calc(100% - 0%); background: var(--red);}  
  100% {height: calc(100% - 80%); background: var(--pr);}  
}

.graph-content .graph-bar .present span {font-size: 26px; font-weight: 500; line-height: 1.19; color: var(--gray_ef); text-align: center;}
.graph-content .txt-box {margin-top: 30px;}
.graph-content .txt-box .txt {font-size: 50px; font-weight: 300; line-height: 1.2; color: var(--wt); text-align: center; white-space: nowrap;}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  10%{
    opacity: 0;
  }
}
.graph-content .txt-box b {animation: blink-1 3s infinite; font-size: 90px; font-weight: 600; line-height: 1.2; color: var(--pr);}
.graph-content .txt-box span {animation: blink-1 3s infinite; font-weight: 600; color: var(--pr);}

.graph-content .arrow-img {margin: 0 82px 0 122px;}

.graph-content .graph-bar2 {}
.graph-content .graph-bar2 .span_box {display: flex; align-items: center; justify-content: center;}
.graph-content .graph-bar2 .span_box ul {display: flex; align-items: center; gap: 5px 0; flex-wrap: wrap; width: 280px; margin: 0 -5px;}
.graph-content .graph-bar2 .span_box ul li {width: calc(100% / 3); height: 9px; padding: 0 2.5px; box-sizing: border-box; opacity: 0; transition: .5s;}
.graph-content .graph-bar2 .span_box ul li.on {opacity: 1;}
.graph-content .graph-bar2 .span_box ul li span {display: block; width: 100%; height: 100%; background: var(--pr);}

.btn_hiddenzone {width: calc(100% - 40px); height: 80px; position: absolute; bottom: 0;}