/* 공통 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300; 400; 500; 700&family=Roboto:wght@100; 500; 900&display=swap'); .event-wrap { overflow: hidden; width: 100%; } 
.inner_w { width: 2560px; position: relative; text-align: center; left: 50%; transform: translateX(-50%); margin: 0; } 
.inner { width: 1000px; margin: 0 auto; } 
.p_r { position: relative; } 

/* cont01 */
.ani_wrap { position: absolute; width: 940px; left: 50%; top: 250px; transform: translateX(-50%); } 
.ani_wrap img { transition: all 1s; } 
.ani_wrap2 { width: 100%; position: absolute; left: 50%; top: 700px; transform: translateX(-50%); } 
.ani_wrap2 img { transition: all 0.5s; } 

/* 스크롤하면 나타나기 */
.ani_wrap img:nth-of-type(1) { transform: translateX(-300px); opacity: 0; } 
.ani_wrap img:nth-of-type(2) { transform: translateX(250px); opacity: 0; } 
.ani_wrap img:nth-of-type(3) { transform: translateX(250px); opacity: 0; } 
.ani_wrap img:nth-of-type(4) { transform: translateX(-300px); opacity: 0; } 
.ani_wrap2 img:nth-of-type(1) { transform: translateY(-50px); opacity: 0; } 
.ani_wrap2 img:nth-of-type(2) { transform: translateY(-50px); opacity: 0; } 

.ani_wrap img:nth-of-type(1).active { transform: translateX(0); opacity: 1; } 
.ani_wrap img:nth-of-type(2).active { transform: translateX(0); opacity: 1; } 
.ani_wrap img:nth-of-type(3).active { transform: translateX(0); opacity: 1; } 
.ani_wrap img:nth-of-type(4).active { transform: translateX(0); opacity: 1; } 
.ani_wrap2 img:nth-of-type(1).active { transform: translateY(0); opacity: 1; } 
.ani_wrap2 img:nth-of-type(2).active { transform: translateY(0); opacity: 1; } 

/* cont02 */
.percent_wrap img { animation: blink 2s step-end infinite; } 
.percent_wrap img:nth-of-type(1) { position: absolute; left: 1093px; top: 208px; } 
.percent_wrap img:nth-of-type(2) { position: absolute; left: 1596px; top: 208px; } 

/* 깜빡거리기*/
@keyframes blink { 50% { opacity: 0; } 
 }

/* cont03 */
.hover_wrap ul { display: flex; justify-content: center; height: 475px; box-sizing: border-box; padding-bottom: 113px; } 
.hover_wrap ul li { margin-right: 20px; } 
.hover_wrap ul li:nth-last-of-type(1) { margin-right: 0; } 
.hover_wrap ul li a { display: block; position: relative; transition: all 0.8s ease; transform-style: preserve-3d; } 
.hover_wrap ul li a img:nth-last-of-type(1) { display: block; position: absolute; left: 0; top: 0; opacity: 0; z-index: -1; transform: rotateY(180deg); } 
.hover_wrap ul li:hover a { transform: rotateY(180deg); } 
.hover_wrap ul li:hover a img:nth-of-type(1) { opacity: 0; } 
.hover_wrap ul li:hover a img:nth-last-of-type(1) { opacity: 1; } 


/* cont04 */
.graph { width: 340px; height: 340px; position: absolute; left: 50%; top: 200px; transform: translateX(-50%); border-radius: 50%; /*background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 60%, #0287f6 80%, #0299f7 93%, rgba(0, 0, 0, 0) 93% 100%); */ } 
.graph img { display: block; text-align: center; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); } 
.line { display: inline; position: absolute; left: 1400px; top: 350px; z-index: 1; opacity: 0; transition: all 1s; } 
.num_wrap { position: absolute; left: 1514px; top: 335px; font-size: 3rem; font-style: italic; font-weight: 700; color: #023ef8; text-shadow: 2px 6px 0px #b3e05f; } 
.num_wrap { font-family:'Roboto'; } 
.cont04.active .graph { animation: ani_graph 1s forwards 0.1s; } 
.cont04.active .line { opacity: 1; } 

/* 원형 그래프 애니메이션 */
@keyframes ani_graph { /* background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 60%, #0287f6 80%, #0299f7 93%, rgba(0, 0, 0, 0) 93% 100%); */
 0% { background: conic-gradient(#0297F7 0% 0%, rgba(0, 0, 0, 0) 0% 100%); } 
 6% { background: conic-gradient(#0297F7 0% 5%, rgba(0, 0, 0, 0) 0% 100%); } 
 12% { background: conic-gradient(#0297F7 0% 10%, rgba(0, 0, 0, 0) 0% 100%); } 
 18% { background: conic-gradient(#0297F7 0% 15%, rgba(0, 0, 0, 0) 0% 100%); } 
 25% { background: conic-gradient(#0297F7 0% 20%, rgba(0, 0, 0, 0) 0% 100%); } 
 33% { background: conic-gradient(#0297F7 0%, #0949d8 25%, rgba(0, 0, 0, 0) 0% 100%); } 
 38% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 30%, rgba(0, 0, 0, 0) 0% 100%); } 
 44% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 35%, rgba(0, 0, 0, 0) 0% 100%); } 
 50% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, rgba(0, 0, 0, 0) 0% 100%); } 
 56% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 45%, rgba(0, 0, 0, 0) 0% 100%); } 
 62% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 50%, rgba(0, 0, 0, 0) 0% 100%); } 
 68% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 55%, rgba(0, 0, 0, 0) 0% 100%); } 
 73% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 58%, #0287f6 62%, rgba(0, 0, 0, 0) 0% 100%); } 
 77% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 60%, #0287f6 68%, rgba(0, 0, 0, 0) 0% 100%); } 
 82% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 60%, #0287f6 72%, rgba(0, 0, 0, 0) 0% 100%); } 
 88% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 60%, #0287f6 75%, rgba(0, 0, 0, 0) 0% 100%); } 
 93% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 60%, #0287f6 80%, #0299f7 82%, rgba(0, 0, 0, 0) 0% 100%); } 
 97% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 60%, #0287f6 80%, #0299f7 85%, rgba(0, 0, 0, 0) 0% 100%); } 
 100% { background: conic-gradient(#0297F7 0%, #0949d8 25%, #16409f 40%, #074ae0 60%, #0287f6 80%, #0299f7 93%, rgba(0, 0, 0, 0) 93% 100%); } 
 }

/* cont05 */
/* tab */
.tab_wrap { width: 870px; position: absolute; left: 50%; top: 110px; transform: translateX(-50%); } 
.tab { display: flex; justify-content: space-between; } 
.tab li { width: 24.8%; } 
.tab li a { display: block; background: #c6e986; color: #97be50; font-size: 1.4rem; font-weight: 700; padding: 23px 0; border-radius: 10px; } 
.tab li.on a { background: #023ef8; color: #fff; } 
.tab_cont li { display: none; } 
.tab_cont li.on { display: block; } 
.tab_cont li img { width: 100%; } 
.tab_wrap .videobox { width: 870px; height: 487px; border-radius: 10px 10px 0 0; overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%); display: none; } 
.tab_wrap .videobox.on { display: block; } 
.tab_wrap .videobox video { width: 100%; height: 100%; } 
.tab_wrap .videobox1 { top: 202px; height: 490px;} 
.tab_wrap .videobox2 { top: 176px; height: 494px; } 
.tab_wrap .videobox3 { top: 204px; } 

/* cont06 */
.cont06 ul { width: 700px; display: flex; justify-content: space-between; align-items: center; position: absolute; left: 50%; top: 200px; transform: translateX(-50%); } 
.cont06 .pop_wrap li { transform: translateY(50px); opacity: 0; } 
.cont06 .pop_wrap li:nth-of-type(1) { transition: all 0.7s; } 
.cont06 .pop_wrap li:nth-of-type(2) { transition: all 0.7s 0.3s; } 
.cont06 .pop_wrap li:nth-of-type(3) { transition: all 0.7s 0.6s; } 
.cont06 .pop_wrap li:nth-of-type(4) { transition: all 0.7s 0.9s; } 

.cont06 .pop_wrap.active li { opacity: 1; transform: translateY(0px); } 

/* cont07 */
/* tab */
.tab_wrap02 { top: 0; } 

/* cont08 */
.cont08 p { position: absolute; left: 1340px; top: 320px; transform: scale(0); opacity: 0; transition: all 0.6s; } 

.cont08 p.active { top: 300px; transform: scale(1); opacity: 1; } 

/* cont10 */
.cont10 { background: #94e6ff; } 
.lect_wrap { width: 1000px; margin: 0 auto; border: 1px solid #97cced; border-radius: 0 45px 0 45px; overflow: hidden; } 
.lect_wrap .lectbox { display: flex; background: #fff; } 
.lect_wrap .lectbox li { position: relative; box-sizing: border-box; position: relative; } 
.lect_wrap .lectbox li:nth-of-type(1) { border-right: 1px solid #7dbfde; } 
.lect_wrap .lectbox li a { display: block; width: 380px; height: 70px; position: absolute; left: 50%; top: 263px; transform: translateX(-50%); } 
.lect_wrap .lectbox .finger_icon { display: inline; position: absolute; right: 50px; bottom: 35px; /*animation: blink 2s step-end infinite; */ transition: all 0.5s; } 
.lect_wrap .lectbox .finger_icon.active { transform: translateX(-100px); } 

.notice_wrap { background: #f1f1f1; text-align: left; padding: 25px 35px; } 
.notice_wrap a { background: #959595; color: #fff; font-size: 0.9rem; padding: 5px 12px; display: inline-block; } 
.notice_wrap ol { margin-top: 15px; background: #fff; border: 1px solid #e1e1e1; box-sizing: border-box; padding: 20px 30px; height: 200px; overflow-y: scroll; display: none; } 
.notice_wrap ol.on { display: block; } 
.notice_wrap ol li { margin-bottom: 20px; } 
.notice_wrap ol li dl dt { margin-bottom: 10px; font-size: 0.9rem; } 
.notice_wrap ol li dl dd { margin-bottom: 5px; font-size: 0.9rem; }