/* .main-visual */
 .main-visual { position: relative; height: 100vh; overflow: hidden; } 
 .main-visual .main-visual-slider,
 .main-visual .main-visual-slider .slick-list, .main-visual .main-visual-slider .slick-track { position: relative; height: 100%; } 
 .main-visual .main-visual-slider .slick-slide { position: relative; }  
 .main-visual .main-visual-slider .slick-slide a { position: relative; display: inline-block; width: 100%; height: 100%; cursor: default; } 
 .main-visual .main-visual-slider .slick-slide a .txt-wrap { position: absolute; top: 50%; left: 100px; transform: translateY(-50%); z-index: 9; } 
 .main-visual .main-visual-slider .slick-slide a .txt-wrap h6 { font-family: "NanumSquare"; font-size: 36px; font-weight: 400; line-height: 54px; text-align: left; color: #FFFFFF; } 
 .main-visual .main-visual-slider .slick-slide a .txt-wrap h2 { font-family: "NanumSquare"; font-size: 60px; font-weight: 300; line-height: 78px; text-align: left; color: #FFFFFF; margin: 20px 0 40px; } 
 .main-visual .main-visual-slider .slick-slide a .txt-wrap h2 span { font-family: "NanumSquare"; font-size: 60px; font-weight: 700; line-height: 78px; text-align: left; color: #FFFFFF; } 
 .main-visual .main-visual-slider .slick-slide a .txt-wrap p { font-family: "NanumSquare"; font-size: 30px; font-weight: 400; line-height: 45px; text-align: left; color: #FFFFFF; } 
 .main-visual .main-visual-slider .slick-slide a .img { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; clip-path: circle(100%); transform: translateY(0); background-size: cover; background-repeat: no-repeat; background-position: center center; transition: all 3s; overflow: hidden; } 
 .main-visual .main-visual-slider .slick-slide a .img img { position: relative; display: block; height: 100%; width: 100%; left: 50%; transform: translateX(-50%) scale(1.3); transition: all 3s; } 
 .main-visual .main-visual-slider .slick-slide a .img.on img { transform: translateX(-50%) scale(1.3); } 
 .main-visual .main-visual-slider .slick-slide.slick-active a .img.on img { transform: translateX(-50%) scale(1); transition: all 3s; } 
 .main-visual .main-visual-slider .slick-slide a .img.on { animation: clipOn 3s cubic-bezier(0.19, 0.82, 0.29, 1.01) forwards; } 
 .main-visual .main-visual-slider .slick-slide a .dim { position: absolute; top:0; left:0; width: 100%; height:100%; background: rgba(0,0,0,0.4); z-index: 9; } 
 .main-visual .control { position: absolute; top: 50%; left: 100px; color: #fff; transform: translateY(-50%); z-index: 5; } 
 .main-visual .control .box { width: 1px; height: 650px; } 
 .main-visual .control >:nth-child(2) { display: flex; align-items: center; } 
 .main-visual .control >:nth-child(2) .prev,
 .main-visual .control >:nth-child(2) .next { margin: 2px 1rem 0; cursor: pointer; } 
 .main-visual .control >:nth-child(2) .play,
 .main-visual .control >:nth-child(2) .stop { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #B4B9C0; cursor: pointer; } 
 .main-visual .control >:nth-child(2) .play { display: none; } 
 .main-visual .control >:nth-child(2) strong { font-size: 18px; font-weight: 800; line-height: 1; text-align: center; color: #FFFFFF; } 
 .main-visual .control >:nth-child(2) p { font-size: 18px; font-weight: 400; line-height: 1; text-align: center; color: #FFFFFF; } 
 .main-visual .control >:nth-child(2) .bar { position: relative; display: inline-block; width: 160px; height: 2px; background: #828a95; margin: 0 0.5rem; } 
 .main-visual .control >:nth-child(2) .bar::before { content: ""; display: block; position: absolute; height: 100%; width: 0; left: 0; background: #fff; } 
 .main-visual .control >:nth-child(2) .pro-ani::before { animation: proBar 5.5s 1; width: 100%; } 
 .slick-prev.slick-arrow, .slick-next.slick-arrow,.slick-dots { display: none !important; } 
 @keyframes proBar { 
 0% { width:0; } 
 100% { width:100%; } 
 }
 
 /* beyond-wrap */
 .beyond-wrap { padding: 200px 0; margin: 0 auto; } 
 .beyond-wrap > h2 { font-size: 72px; font-weight: 800; line-height: 72px; text-align: center; margin-bottom: 50px; } 
 .beyond-wrap > p { font-size: 30px; font-weight: 400; line-height: 45px; text-align: center; margin-bottom: 100px; } 
 .beyond-wrap > ul { width: 1720px; margin: 0 auto; } 
 .beyond-wrap > ul li { width: 100%; padding: 50px; display: flex; justify-content: space-between; align-items: flex-start; gap: 100px; } 
 .beyond-wrap > ul>:nth-child(1) { border-top: 1px solid #000000; border-bottom: 1px solid #cccccc; } 
 .beyond-wrap > ul>:nth-child(2) { border-bottom: 1px solid #000000; flex-direction: row-reverse; } 
 .beyond-wrap > ul li .txt-wrap { display: flex; gap: 50px; } 
 .beyond-wrap > ul li .txt-wrap .num { font-size: 36px; font-weight: 800; line-height: 46.8px; text-align: left; color: #0046FF; } 
 .beyond-wrap > ul li .txt-wrap > div h6 { font-size: 36px; font-weight: 800; line-height: 46.8px; text-align: left; } 
 .beyond-wrap > ul li .txt-wrap > div h6 span { color: #777777; } 
 .beyond-wrap > ul li .txt-wrap > div p { font-size: 24px; font-weight: 400; line-height: 36px; text-align: left; margin-top: 20px; } 
 .beyond-wrap > ul li .txt-wrap > div p span { font-weight: 800; } 
 .beyond-wrap > ul li .txt-wrap > div a { font-size: 20px; font-weight: 800; line-height: 30px; text-align: center; display: flex; gap: 12px; align-items: center; margin-top: 55px; transition: all 0.3s; } 
 .beyond-wrap > ul li .txt-wrap > div a:hover { color: #0046FF; transition: all 0.3s; } 
 .beyond-wrap > ul li .txt-wrap > div a .arrow { position: relative; display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: #000000; text-align: center; transition: all 0.3s; } 
 .beyond-wrap > ul li .txt-wrap > div a:hover .arrow { background: #0046FF; transition: all 0.3s; } 
 .beyond-wrap > ul li .txt-wrap > div a .arrow img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 
 .beyond-wrap > ul li > .btn-more { font-size: 14px; font-weight: 800; line-height: 1; text-align: center; display: flex; gap: 10px; align-items: center; margin-top: 0; } 
 .beyond-wrap > ul li > .btn-more .arrow { position: relative; display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: #000000; text-align: center; } 
 .beyond-wrap > ul li > .btn-more .arrow img { width: 5.4px; height: 9px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 
 .beyond-wrap > ul li .img-wrap { position: relative; width: 655px; height: 330px; overflow: hidden; } 
 .beyond-wrap > ul li .img-wrap img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all 0.3s; } 
 .beyond-wrap > ul li .img-wrap img:hover { transform: translate(-50%,-50%) scale(1.2); transition: all 0.3s; } 
 .circle-loop-wrap { width: 1000.32px; position: absolute; top: 300px; left: 50%; transform: translate(-50%, -50%); } 
 /* connection-wrap */
 .connection-wrap { position: relative; padding: 200px 0; background: url("/asset/image/bg/connection.png") no-repeat; background-size: cover; height: 1,138px; } 
 .connection-wrap h6 { font-size: 36px; font-weight: 400; line-height: 54px; text-align: center; } 
 .connection-wrap h6 span { font-size: 36px; font-weight: 800; line-height: 46.8px; text-align: center; } 
 .connection-wrap .cont-wrap { position: relative; width: 1033.64px; height: 600px; margin: 30px auto 0; } 
 .connection-wrap .cont-wrap .logo-img { width: 153.25px; height: 153.41px; position: absolute; top: 86.59px; left: 50%; transform: translateX(-50%); } 
 .connection-wrap .cont-wrap .img-wrap { position: relative; width: 911.23px; height: 478.64px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url("asset/image/content/main/connection-bg-circle.png") no-repeat center; background-size: contain; } 
 .connection-wrap .cont-wrap .img-wrap > div { width: 110px; text-align: center; } 
 .connection-wrap .cont-wrap .img-wrap >:nth-child(1) {width: 135px; position: absolute; top: 50%; left: 230px; transform: translateY(-50%); } 
 .connection-wrap .cont-wrap .img-wrap >:nth-child(2) {width: 127px; position: absolute; top: 50%; right: 218.49px; transform: translateY(-50%); } 
 .connection-wrap .cont-wrap .img-wrap > div > img { text-align: center; } 
 .connection-wrap .cont-wrap .img-wrap > div > p { font-size: 20px; font-weight: 800; line-height: 30px; text-align: center; margin-top: 14px; } 
 .connection-wrap .cont-wrap .circle-loop { position: absolute; width: 674.32px; height: 310.23px; top: 81px; left: 50%; transform: translateX(-50%); } 
 .connection-wrap .cont-wrap .circle-left { position: absolute; width: 509.94px; height: 600px; top: 0; left: 10px; } 
 .connection-wrap .cont-wrap .circle-left li,.connection-wrap .cont-wrap .circle-right li { width: 122.68px; height: 122.73px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; } 
 .connection-wrap .cont-wrap .circle-left li p,.connection-wrap .cont-wrap .circle-right li p { font-size: 14px; font-weight: 800; line-height: 21px; text-align: center; color: #002073; } 
 .connection-wrap .cont-wrap .circle-right { position: absolute; width: 509.94px; height: 600px; top: 0; right: 10px; } 
 .connection-wrap .cont-wrap-mo { margin-top: 50px; } 
 .connection-wrap .cont-wrap-mo >:nth-child(1) { position: relative; width: 350px; height: 196px; margin: 0 auto; } 
 .connection-wrap .cont-wrap-mo > div .logo-img { width: 79px; height: 79px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } 
 .connection-wrap .cont-wrap-mo > div .img-wrap { width: 80px; height: 80px; text-align: center; } 
 .connection-wrap .cont-wrap-mo > div .img-wrap img { margin-bottom: 10px; } 
 .connection-wrap .cont-wrap-mo > div .img-wrap p { font-size: 14px; font-weight: 800; line-height: 19.6px; text-align: center; } 
 .connection-wrap .cont-wrap-mo > div .img-wrap>:nth-child(1) { position: absolute; top: 50%; left: 40px; } 
 .connection-wrap .cont-wrap-mo > div .img-wrap>:nth-child(2) { position: absolute; top: 50%; right: 40px; } 

 .circle-wrap { width: 350px; margin: 0 auto; margin-top: 30px; display: flex; justify-content: center; } 
 .circle-wrap >div { position: relative; width: 50%; height: 683px; } 
 .connection-wrap .cont-wrap-mo .circle-left-mo { position: absolute; top: 0; left: -20px; } 
 .connection-wrap .cont-wrap-mo .circle-right-mo { position: absolute; top: 0; right: -20px; } 
 
 /* news-wrap */
 .news-wrap { overflow:hidden; position: relative; padding: 200px 0 277px; background: url("asset/image/bg/news.png") #3F75DE; } 
 .news-wrap h2 { font-size: 72px; font-weight: 800; line-height: 72px; text-align: center; margin-bottom: 50px; color: #FFFFFF; } 
 .news-wrap p { font-size: 30px; font-weight: 400; line-height: 45px; text-align: center; margin-bottom: 100px; color: #FFFFFF; } 
 .news-wrap .news-slider { overflow: visible!important; margin: 0 auto; } 
 .news-wrap .news-slider li { width: 415px; height: 450px;} 
 .news-wrap .news-slider li a .img-wrap { position: relative; width: 100%; overflow: hidden; aspect-ratio: 1 / 0.665; } 
 .news-wrap .news-slider li a .img-wrap img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all 0.3s; } 
 .news-wrap .news-slider li a .txt-wrap { background: #FFFFFF; padding: 30px 30px 25px 30px; width: 100%; aspect-ratio: 1 / 0.419; transition: all 0.3s; } 
 .news-wrap .news-slider li a .txt-wrap p { font-size: 24px; font-weight: 800; line-height: 36px; text-align: left; color: #000000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; box-orient: vertical; text-overflow: ellipsis; margin-bottom: 20px; transition: all 0.3s; } 
 .news-wrap .news-slider li a .txt-wrap span { font-size: 18px; font-weight: 400; line-height: 27px; text-align: left; color: #777777; transition: all 0.3s; } 
 .news-wrap .news-slider li a:hover .img-wrap img { transform: translate(-50%,-50%) scale(1.2); transition: all 0.3s; } 
 .news-wrap .news-slider li a:hover .txt-wrap { background: #0046FF; transition: all 0.3s; } 
 .news-wrap .news-slider li a:hover .txt-wrap p { color: #FFFFFF; transition: all 0.3s; } 
 .news-wrap .news-slider li a:hover .txt-wrap span { color: #FFFFFF; transition: all 0.3s; } 
 .news-wrap .swiper-button { position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; } 
 .news-wrap .swiper-button .news-swiper-button-prev,
 .news-wrap .swiper-button .news-swiper-button-next { display: flex; gap: 20px; align-items: center; cursor: pointer; } 
 .news-wrap .swiper-button .news-swiper-button-prev span,
 .news-wrap .swiper-button .news-swiper-button-next span { font-size: 18px; font-weight: 400; line-height: 27px; text-align: center; color: #CCCCCC; } 
 .news-wrap .swiper-button .bar { width: 160px; height: 1px; background: #CCCCCC; } 
 .news-wrap .swiper-button .news-swiper-button-prev:hover span, .news-wrap .swiper-button .news-swiper-button-next:hover span { color:#FFFFFF; transition: all 0.3s } 
 .news-wrap .swiper-button .news-swiper-button-prev .hover, .news-wrap .swiper-button .news-swiper-button-next .hover { width: 9px; height:17px; display:none; transition: all 0.3s } 
 .news-wrap .swiper-button .news-swiper-button-prev .no-hover, .news-wrap .swiper-button .news-swiper-button-next .no-hover { width: 9px; height:17px; display:inline-block; transition: all 0.3s } 
 .news-wrap .swiper-button .news-swiper-button-prev:hover .hover, .news-wrap .swiper-button .news-swiper-button-next:hover .hover { display:inline-block; transition: all 0.3s } 
 .news-wrap .swiper-button .news-swiper-button-prev:hover .no-hover, .news-wrap .swiper-button .news-swiper-button-next:hover .no-hover { display:none; transition: all 0.3s } 
 
 @media screen and (max-width:1720px){
 .beyond-wrap { padding: 200px 30px; } 
 .beyond-wrap > ul { width: 100%; } 
 .beyond-wrap > ul li .img-wrap { width: 100%; height: auto; aspect-ratio: 1.987 / 1; } 
 }
 @media screen and (max-width:1600px) { } 
 @media screen and (max-width:1440px) { } 
 @media screen and (max-width:1200px) { } 
 @media screen and (max-width:1125px){
 .main-visual-slider .slick-track,.main-visual .main-visual-slider .slick-slide a .img { height: 100%; } 
 .main-visual .control .box { width: 1px; height: 600px; } 
 .main-visual .main-visual-slider .slick-slide a .img img { width: auto; height: 100%; } 
 .main-visual .control .bar { width: 80px; margin-bottom: 6px; } 
 .main-visual .control > strong { margin-right: 5px; padding-bottom: 3px; color: #FFFFFF; } 
 .main-visual .control > p { margin-left: 5px; padding-bottom: 3px; } 
 .beyond-wrap { padding: 80px 20px; } 
 .beyond-wrap > h2 { font-size: 30px; line-height: 39px; text-align: center; } 
 .beyond-wrap > p { font-size: 18px; line-height: 27px; text-align: center; margin-bottom: 50px; } 
 .beyond-wrap > ul li { flex-direction: column; padding: 30px 10px; gap: 30px; } 
 .beyond-wrap > ul li .txt-wrap { flex-direction: column; gap: 10px; } 
 .beyond-wrap > ul li .txt-wrap .num { font-size: 24px; font-weight: 800; line-height: 31.2px; text-align: left; } 
 .beyond-wrap > ul li .txt-wrap > div h6 { font-size: 24px; font-weight: 800; line-height: 31.2px; text-align: left; } 
 .beyond-wrap > ul li .txt-wrap > div p { font-size: 17px; font-weight: 400; line-height: 22.4px; text-align: left; } 
 .beyond-wrap > ul>:nth-child(2) { flex-direction: column; } 
 .connection-wrap .cont-wrap .circle-loop { position: absolute; width: 674.32px; height: 310.23px; top: 144px; left: 173px; } 
 .connection-wrap { padding: 80px 20px; background-position: 50%; } 
 .connection-wrap h6 { font-size: 30px; font-weight: 400; line-height: 39px; text-align: center; } 
 .connection-wrap h6 span { font-size: 30px; font-weight: 800; line-height: 39px; text-align: center; } 
 .connection-wrap .cont-wrap-mo .circle-loop { position: absolute; width: 356px; height: auto; top: 54px; left: 50%; transform: translateX(-50%); } 
 .connection-wrap .cont-wrap-mo > div .img-wrap>:nth-child(1) { position: absolute; top: 43%; left: 27px; } 
 .connection-wrap .cont-wrap-mo > div .img-wrap>:nth-child(2) { position: absolute; top: 43%; right: 25px; } 
 .connection-wrap .cont-wrap-mo > div .img-wrap>:nth-child(1) img { width: 39.21px; height: 34px; } 
 .connection-wrap .cont-wrap-mo > div .img-wrap>:nth-child(2) img { width: 35.6px; height: 34px; } 
 .circle-loop-wrap { width: 590px; position: absolute; top: 289px; left: 50%; transform: translateX(-50%); } 
 .news-wrap { padding: 80px 0 121px; background-size: 300%; background-position-x: 50%; } 
 .news-wrap .news-slider li {width: 310px; height: 328px; } 
 .news-wrap .news-slider li a .img-wrap { aspect-ratio: 1.504 / 1; height: auto; } 
 .news-wrap .swiper-button { bottom: 80px; gap: 10px; } 
 .news-wrap .swiper-button .news-swiper-button-prev, .news-wrap .swiper-button .news-swiper-button-next { gap: 10px; } 
 .news-wrap .swiper-button .news-swiper-button-prev span, .news-wrap .swiper-button .news-swiper-button-next span { font-size: 14px; font-weight: 400; line-height: 19.6px; text-align: center; transition: all 0.3s; } 
 .news-wrap .swiper-button .bar { width: 100px; } 
 .news-wrap h2 { font-size: 30px; font-weight: 800; line-height: 39px; text-align: center; margin-bottom: 20px; } 
 .news-wrap p { font-size: 18px; font-weight: 400; line-height: 27px; text-align: center; margin-bottom: 50px; } 
 }
 @media screen and (max-width:992px) { } 
 @media screen and (max-width:768px){
 .beyond-wrap > ul li .img-wrap { width: 100%; } 
 .main-visual .control .box { width: 1px; height: 500px; } 
 .main-visual .control { left: 20px; } 
 .main-visual .control >:nth-child(2) .bar { width: 80px; } 
 .main-visual .main-visual-slider .slick-slide a .txt-wrap { left: 20px; } 
 .main-visual .main-visual-slider .slick-slide a .txt-wrap h6 { font-size: 24px; font-weight: 400; line-height: 31.2px; text-align: left; } 
 .main-visual .main-visual-slider .slick-slide a .txt-wrap h2 { font-size: 32px; line-height: 41.6px; text-align: left; margin: 10px 0 20px; } 
 .main-visual .main-visual-slider .slick-slide a .txt-wrap h2 span { font-size: 32px; line-height: 41.6px; text-align: left; } 
 .main-visual .main-visual-slider .slick-slide a .txt-wrap p { font-size: 18px; font-weight: 400; line-height: 27px; text-align: left; } 
 .news-wrap .news-slider li a .txt-wrap { padding: 20px; min-height: 124px; } 
 .news-wrap .news-slider li a .txt-wrap p { font-size: 18px; font-weight: 800; line-height: 27px; text-align: left; } 
 .news-wrap .news-slider li a .txt-wrap span { font-size: 14px; font-weight: 400; line-height: 19.6px; text-align: left; } 
 }
 @media screen and (max-width:600px) { } 
 @media screen and (max-width:480px) { } 
 @media screen and (max-width:380px){
 .circle-wrap { width: 100%; } 
 }