html, body {
  overscroll-behavior: none;          /* 상단/하단 고무밴딩 방지 */
  -webkit-font-smoothing: antialiased;
}

#smoother-content {
  will-change: transform;             /* 합성계층 확보 */
  backface-visibility: hidden;
  transform: translateZ(0);           /* iOS 리페인트 감소 */
}

body {
  touch-action: manipulation;         /* 터치 제스처 간섭 최소화 */
}
.main_visual {position: relative;height: 100vh;background-size: 100% 100%;position: relative;z-index: 15;width: 1920px;max-width: 100%;margin: 0 auto}
/*background: url(/img/main/main_visual_bg.png);*/
.main_visual .scr_down{position: absolute;bottom: 60px;left: 60px;z-index: 15}
.main_visual .scr_down strong{font-size: 16px;color: #FFFFFF; font-family: "neulis-sans", sans-serif;font-weight: 400}
.main_visual .scr_down i{display: block;height: 60px;width: 1px;background: #008DEB50;margin-bottom: 10px;position: relative}
.main_visual .scr_down i:after{content: '';display: block;width: 100%;height: 0;position: absolute;top: 0;left: 0;background: #fff;animation: 2s src infinite linear}
@keyframes src{
    0%{height: 0px}
    100%{height: 100%}
}
.main_visual .copy_w{position: absolute;top: 50%;top: 50%;z-index: 10;padding-left: 60px;transform: translateY(-50%);}
.main_visual .copy_w .w{display: flex;gap: 10px;gap: 20px}
.main_visual .copy_w .w div{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);transition: 1.5s;}
.main_visual .copy_w .w:nth-child(1) div:nth-child(2){transition-delay: 0.3s;}
.main_visual .copy_w .w:nth-child(2) div:nth-child(1){transition-delay: 0.6s;}
.main_visual .copy_w .w:nth-child(2) div:nth-child(2){transition-delay: 0.9s;}
.main_visual.on .copy_w .w div{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);;}
.main_visual .copy_w .w strong{font-size: 80px;line-height: 86px;color: #FFFFFF;font-family: "neulis-sans", sans-serif;font-weight: 500;transition: 1.5s;display: block;}
.main_visual .copy_w .w strong{transform: translateX(20px);}
.main_visual .copy_w .copy_txt{position: relative;margin-top: 50px;}
.main_visual .copy_w .copy_txt p{transform: translateX(30px);transition: 1.7s;transition-delay: 1.3s;}
.main_visual .copy_w .copy_txt p{color: #779DC1;font-size: 20px;}
.main_visual.on .copy_w .copy_txt p{transform: translateX(00px);}
.main_visual .copy_w .copy_txt .on{position: absolute;top: 0;left: 0;clip-path: polygon(0 0, 28% 0, 28% 100%, 0% 100%);animation: typo 3s infinite;}
@keyframes typo {
    0%{clip-path: polygon(0 0, -25% 0, -25% 100%, 0% 100%);}
    100%{clip-path: polygon(125% 0, 100% 0, 100% 100%, 125% 100%)}
}
.main_visual .copy_w .copy_txt {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);transition: 1.7s;transition-delay: 1.3s;}
.main_visual.on .copy_w .copy_txt {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)}
.main_visual .copy_w .copy_txt .on p{color: #fff;}
.main_visual.on .copy_w .w strong{transform: translateX(0px);}

.main_visual .copy_w .w:nth-child(1) div:nth-child(2) strong{transition-delay: 0.4s;}
.main_visual .copy_w .w:nth-child(2) div:nth-child(1) strong{transition-delay: 0.8s;}
.main_visual .copy_w .w:nth-child(2) div:nth-child(2) strong{transition-delay: 1.2s;}

.main_visual .ill_wrap{position: absolute;right: 60px;top: 50%;transform: translateY(-50%);opacity: 0;}
.main_visual .ill_wrap .line_back{position: absolute;z-index: 1;mix-blend-mode: color-dodge}
.main_visual .ill_wrap .line_bg01{left: 0;top: 460px;opacity: 0;animation: l01 1.5s infinite linear}
@keyframes l01{
    0%{transform: translateY(-20%);opacity: 0}
    50%{opacity: 1}
    100%{transform: translateY(100%);opacity: 0}
}
@keyframes l02{
    0%{transform: translateY(-20%);opacity: 0}
    50%{opacity: 1}
    100%{transform: translateY(900%);opacity: 0}
}

@keyframes l03{
    0%{transform: translateY(-20%);opacity: 0}
    50%{opacity: 1}
    100%{transform: translateY(300%);opacity: 0}
}
.main_visual .ill_wrap .line_bg02{left: 40px;top: 490px;opacity: 0;animation: l02 1.5s infinite linear;animation-delay: 0.3s}
.main_visual .ill_wrap .line_bg03{left: 69px;top: 630px;animation: l03 1.5s infinite linear;animation-delay: 0.9s;opacity: 0}
.main_visual .ill_wrap .line_bg04{left: 227px;top: 709px;animation: l03 1.5s infinite linear;animation-delay: 0.0s;opacity: 0}
.main_visual .ill_wrap .line_bg05{left: 311px;top: 659px;;opacity: 0;animation: l01 1.5s infinite linear;animation-delay: 0.5s;}
.main_visual .ill_wrap .line_bg06{left: 370px;top: 659px;animation: l02 1.5s infinite linear;animation-delay: 1.2s;opacity: 0}
.main_visual .ill_wrap .line_bg07{left: 534px;top: 749px;animation: l03 1.5s infinite linear;animation-delay: 0.7s;opacity: 0}
.main_visual .ill_wrap .line_bg08{left: 698px;top: 652px;animation: l03 1.5s infinite linear;animation-delay: 0.3s;opacity: 0}
.main_visual .ill_wrap .line_bg09{left: 834px;top: 532px;animation: l03 3s infinite linear;animation-delay: 0.0s;}
.main_visual .ill_wrap .pin_wrap .pin{position: absolute;z-index: 15;}
.main_visual .ill_wrap .pin_wrap .pin01{left: 300px;top: 454px;}
.main_visual .ill_wrap .pin_wrap .pin02{left: 630px;top: 304px;}
.main_visual .ill_wrap .pin_wrap .pin03{left: 689px;top: 70px;}
/*
.main_visual .ill_wrap .pin_wrap .pin04{left: 167px;top: 680px;}
.main_visual .ill_wrap .pin_wrap .pin05{left: 167px;top: 680px;}
*/
.main_visual .ill_wrap .pin_wrap .pin01 .popup{top: -75px;left: -380px;}
.main_visual .ill_wrap .pin_wrap .pin02 .popup{top: 80px;left: 0px;}
.main_visual .ill_wrap .pin_wrap .pin03 .popup{top: -100px;left: -385px;}
.main_visual .ill_wrap .pin_wrap .pin .popup{background-color: #fff;padding: 10px;border-radius: 10px;position: absolute;opacity: 0;pointer-events: none;transition: 0.7s;}
.main_visual .ill_wrap .pin_wrap .pin:hover .popup{opacity: 1;}
.main_visual .ill_wrap .pin_wrap .pin .popup .img{border-radius: 6px;overflow: hidden;}
.main_visual .ill_wrap .pin_wrap .pin .popup .img img{display: block;}
.main_visual .ill_wrap .pin_wrap .pin .popup .txt{padding: 20px;padding-top: 30px;}
.main_visual .ill_wrap .pin_wrap .pin .popup .txt div{display: flex;align-items: center;gap: 10px;}
.main_visual .ill_wrap .pin_wrap .pin .popup .txt div svg{display: block;}
.main_visual .ill_wrap .pin_wrap .pin .popup .txt div strong{font-size: 22px;color: #000000;}
.main_visual .ill_wrap .pin_wrap .pin .popup .txt p{font-size: 18px;color: #333333;margin-top: 14px;line-height: 27px;;}
.main_visual .ill_wrap .pin_wrap .pin .pin_w{position: relative;width: 68px;height: 68px;cursor: pointer}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin-box {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin-box div{transform: scale(0);}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin-box div{animation: 3s dot infinite;}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin-box02 div{animation-delay: 0.7s;}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin-box03 div{animation-delay: 1.4s;}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin-line{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin-line img{display: block;}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin_dot_line{animation: twi 1s infinite linear;}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin-line img{display: block;transition: 0.5s;}
.main_visual .ill_wrap .pin_wrap .pin:hover .pin_w .pin-line img{transform: scale(0.7);}
@keyframes twi {
    0%{opacity: 1;}
    50%{opacity: 0.2;}
    100%{opacity: 1;}
}
@keyframes dot {
    0%{transform: scale(0);opacity: 1;}
    100%{transform: scale(1);opacity: 0;}
}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin_dot_line {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin_center {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.main_visual .ill_wrap .pin_wrap .pin .pin_w .pin_center svg{display: block;}
.main_visual .ill_wrap{transform: scale(0.9) translateY(-40%);transition: 2s;opacity: 0;}
.main_visual.on .ill_wrap{transform: scale(1) translateY(-40%);opacity: 1;}
.main_visual .ill_wrap .line_bg{position: absolute;bottom: -220px;transform-origin: top center;}
.main_visual .ill_wrap .city_bg{position: absolute;}
.main_visual .ill_wrap .city_bg{transform: scale(0.3);transition: 2s;opacity: 0.5;transition-delay: 0.5s;}
.main_visual.on .ill_wrap .city_bg{transform: scale(1);;opacity: 1;}
.main_visual .ill_wrap .city_bg02{top: -244px;left: -481px;}
.main_visual .ill_wrap .city_bg03{right: -323px;top: -86px;}
.main_visual .ill_wrap .city_bg01{left: 84px;top: 195px;}
.main_visual .ill_wrap .base{position: relative;}
.main_visual .ill_wrap .part_w > *{position: absolute}
/*
.main_visual .ill_wrap .part_list > div{opacity: 0;transition: 0.4s;}
.main_visual .ill_wrap .part_list > div.on{opacity:1;}
*/
.main_visual .ill_wrap .part_list .smart_light{top: 591px;left: 382px}
.main_visual .ill_wrap .part_list .smart_person{top: 624px;left: 425px}
.main_visual .ill_wrap .part_list .smart_wifi{top: 545px;left: 484px}
.main_visual .ill_wrap .part_list .airplane{top: 0;left: 744px}
.main_visual .ill_wrap .part_list .alert_plane{top: 94px;left: 736px}
.main_visual .ill_wrap .part_list .control_light{top: 18px;left: 697px;}
.main_visual .ill_wrap .part_list .control_wifi{top: 140px;left: 666px;}
.main_visual .ill_wrap .part_list .bird{top: 123px;left: 750px;}
.main_visual .ill_wrap .part_list .dron{top: 90px;left: 590px;}

.main_visual .ill_wrap .part_list .dron{animation: drone 1.5s infinite linear;}
.main_visual .ill_wrap .part_list .bird{animation: drone 1.5s infinite linear;animation-delay: 0.2s;}
@keyframes drone {
    0%{transform: translateY(0px);}
    50%{transform: translateY(10px);}
    100%{transform: translateY(0px);}
}
.main_visual .ill_wrap .part_list .cpr_car{top: 258px;left: 598px;}
.main_visual .ill_wrap .part_list .cpr_car_wifi{top: 287px;left: 567px;}
.main_visual .ill_wrap .part_list .accident_back{top: 459px;left: 734px;}
.main_visual .ill_wrap .part_list .accident_effect{top: 438px;left: 714px;;}
.main_visual .ill_wrap .part_list .accident_front{top: 434px;left: 691px;}
.main_visual .ill_wrap .part_list .accident_light{top: 393px;left: 693px;}
.main_visual .ill_wrap .part_list .accident_wifi{top: 364px;left: 670px;;}
.main_visual .ill_wrap .part_list .virtual_car01{top: 318px;left: 512px;}
.main_visual .ill_wrap .part_list .virtual_car02{top: 379px;left: 596px;}
.main_visual .ill_wrap .part_list .virtual_light{top: 311px;left: 498px;}
.main_visual .ill_wrap .part_list .virtual_wifi{top: 370px;left: 580px;}
.main_visual .ill_wrap .part_list .wheel{top: 555px;left: 288px;}
.main_visual .ill_wrap .part_list .wheel_light{top: 529px;left: 276px;}
.main_visual .ill_wrap .part_list .red_car{top: 484px;left: 361px;}
.main_visual .ill_wrap .part_list .red_car_light{top: 506px;left: 311px;}
.main_visual .ill_wrap .part_list .health_box{top: 389px;left: 93px;}
.main_visual .ill_wrap .part_list .health_person_effect{top: 471px;left: 175px;}
.main_visual .ill_wrap .part_list .health_person{top: 471px;left: 175px;}
.main_visual .ill_wrap .part_list .health_light{top: 424px;left: 144px;}
.main_visual .ill_wrap .part_list .health_wifi{top: 396px;left: 135px;}

.main_visual .ill_wrap .name{position: absolute;}
.main_visual .ill_wrap .name.smart_name{left: 316px;top: 647px;}
.main_visual .ill_wrap .name.auto_name{left: 492px;top: 367px;}
.main_visual .ill_wrap .name.safety_name{left: 734px;top: 181px;}
.main_visual .ill_wrap .name > div:nth-child(2){position: absolute;top: 0;left: 0;opacity: 0;animation: 2.2s twi infinite linear;;}

.main_visual .ill_wrap .part_list .accident_back .w{transform:translateX(50px) translateY(29px)ltransition: 1s ease-in}
.main_visual .ill_wrap .part_list .on .accident_back .w{transform:translateX(0px) translateY(0px);}
.main_visual .ill_wrap .part_list .accident_effect{transform: scale(0.5);opacity: 0}
.main_visual .ill_wrap .part_list .on .accident_effect{transform: scale(1);opacity: 1;transition: 0.3s;transition-delay: 0.95s}
.main_visual .ill_wrap .part_list .accident_light{transform: scale(0.5);transform-origin: top left;opacity: 0}
.main_visual .ill_wrap .part_list .on .accident_light{transform: scale(1);opacity: 1;transition: 0.7s;}
.main_visual .ill_wrap .part_list .accident_wifi{opacity:0;transition: 1.0s}
.main_visual .ill_wrap .part_list .on .accident_wifi{opacity: 1;}
.main_visual .ill_wrap .part_list .on .accident_wifi02{transition-delay: 0.3s;}
.main_visual .ill_wrap .part_list .on .accident_wifi03{transition-delay: 0.6s;}
.main_visual .ill_wrap .part_list .control_wifi{opacity:0;transition: 1.0s}
.main_visual .ill_wrap .part_list .on .control_wifi{opacity:1}
.main_visual .ill_wrap .part_list .on .control_wifi01{opacity: 1;}
.main_visual .ill_wrap .part_list .on .control_wifi02{transition-delay: 0.3s;}
.main_visual .ill_wrap .part_list .on .control_wifi03{transition-delay: 0.6s;}
.main_visual .ill_wrap .part_list .on .control_wifi04{transition-delay: 0.9s;}
.main_visual .ill_wrap .part_list .virtual_car02 .w{transform:translateX(50px) translateY(29px);transition: 1.5s}
.main_visual .ill_wrap .part_list .on .virtual_car02 .w{transform:translateX(0px) translateY(0px) }
.main_visual .ill_wrap .part_list .accident_back .w{transform:translateX(50px) translateY(29px);transition: 1.5s}
.main_visual .ill_wrap .part_list .on .accident_back .w{transform:translateX(0px) translateY(0px) }
.main_visual .ill_wrap .part_list .virtual_wifi .w{transform:translateX(50px) translateY(29px);transition: 1.5s;opacity: 0}
.main_visual .ill_wrap .part_list .on .virtual_wifi .w{transform:translateX(0px) translateY(0px);opacity: 1 }

.main_visual .ill_wrap .part_list .virtual_light .w{transform: scale(0.5);transform-origin: top left;opacity: 0;transition: 0.7s}
.main_visual .ill_wrap .part_list .on .virtual_light .w{transform: scale(1);opacity: 1;}
.main_visual .ill_wrap .part_list .health_person_effect{transform: scale(0.5);transform-origin: top left;opacity: 0;transition: 0.7s}
.main_visual .ill_wrap .part_list .on .health_person_effect{transform: scale(1);opacity: 1;}

.main_visual .ill_wrap .part_list .virtual_car01 .w{transform: scale(1);transform-origin: top left;transition: 0.7s;opacity: 0}
.main_visual .ill_wrap .part_list .on .virtual_car01 .w{transform: scale(1);opacity: 1;transition-delay: 0.7s}

/* .main_visual .ill_wrap .part_list .cpr_car .w{transform:translateX(-40px) translateY(19px)}
.main_visual .ill_wrap .part_list .on .cpr_car .w{transform:translateX(0px) translateY(0px);transition: 1.5s }
.main_visual .ill_wrap .part_list .cpr_car_wifi .w{transform:translateX(-40px) translateY(19px);opacity: 0}
.main_visual .ill_wrap .part_list .on .cpr_car_wifi .w{transform:translateX(0px) translateY(0px);transition: 1.5s;opacity: 1 } */

.main_visual .ill_wrap .part_list .cpr_car_wifi .w{opacity: 0;transition: 1.2s;}
.main_visual .ill_wrap .part_list .on .cpr_car_wifi .w{opacity: 1 }
.main_visual .ill_wrap .part_list .on .cpr_car_wifi02 .w{transition-delay: 0.2s;}
.main_visual .ill_wrap .part_list .on .cpr_car_wifi03 .w{transition-delay: 0.4s;}
.main_visual .ill_wrap .part_list .on .cpr_car_wifi04 .w{transition-delay: 0.6s;}
.main_visual .ill_wrap .part_list .on .cpr_car_wifi05 .w{transition-delay: 0.8s;}

.main_visual .ill_wrap .part_list .smart_wifi .w{transition: 1.2s;opacity: 0}
.main_visual .ill_wrap .part_list .on .smart_wifi .w{opacity: 1 }
.main_visual .ill_wrap .part_list .on .smart_wifi02 .w{transition-delay: 0.2s;}
.main_visual .ill_wrap .part_list .on .smart_wifi03 .w{transition-delay: 0.4s;}
#main .info_visual .box img{min-height: 100vh}

/*
.main_visual .ill_wrap .part_list .dron .w{transform:translateX(-40px) translateY(19px);transition: 1.5s}
.main_visual .ill_wrap .part_list .on .dron .w{transform:translateX(0px) translateY(0px) }
.main_visual .ill_wrap .part_list .bird .w{transform:translateX(40px) translateY(19px);transition: 1.5s}
.main_visual .ill_wrap .part_list .on .bird .w{transform:translateX(0px) translateY(0px) }
*/

.main_visual .ill_wrap .part_list .airplane{transform:translateX(40px) translateY(-19px);transition: 1.5s}
.main_visual .ill_wrap .part_list .on .airplane{transform:translateX(0px) translateY(0px) }

.main_visual .ill_wrap .part_list .control_light .w{transform: scale(0.5);opacity: 0;transform-origin: left bottom;transition:1s;}
.main_visual .ill_wrap .part_list .on .control_light .w{transform: scale(1);opacity: 1;transform-origin: left bottom}

.main_visual .ill_wrap .part_list .alert_plane{transform: scale(0.5);opacity: 0;transition: 0.5s}
.main_visual .ill_wrap .part_list .on .alert_plane{transform: scale(1);opacity: 1;;transition-delay: 1s}
.main_visual .ill_wrap .part_list .smart_light{opacity: 0}
.main_visual .ill_wrap .part_list .on .smart_light{opacity: 1;transition: 1s}
.main_visual .ill_wrap .part_list .red_car{transform: translateX(90px) translateY(-51px);transition: 1.0s}
.main_visual .ill_wrap .part_list .on .red_car{transform:translateX(0px) translateY(0px) }
.main_visual .ill_wrap .part_list .red_car_light .w{transform: scale(0.5);transform-origin: 0% 10%;transition: 0.5s;opacity: 0}
.main_visual .ill_wrap .part_list .on .red_car_light .w{transform: scale(1);opacity: 1;transition-delay: 0.5s;}
.main_visual .ill_wrap .part_list .wheel_light .w{transform: scaleX(0.5);transform-origin: right top;transition: 1s;opacity: 0}
.main_visual .ill_wrap .part_list .on .wheel_light .w{transform: scaleX(1);opacity: 1;}

.main_visual .ill_wrap .part_list .smart_person{transform:translateX(20px) translateY(-19px);transition: 2s}
.main_visual .ill_wrap .part_list .on .smart_person{transform:translateX(0px) translateY(0px) }

.main_visual .ill_wrap .part_list .wheel{transform:translateX(-23px) translateY(-12px);transition: 2s}
.main_visual .ill_wrap .part_list .on .wheel{transform:translateX(0px) translateY(0px) } 



.bg_con_w{background: url(/img/main/bg_con_w.png);background-size: 100% auto}
/*background: url(/img/main/con01_bg.png);*/
#main .main_con02{padding: 0 60px;padding-bottom: 240px;padding-top: 155px;position: relative;;background-size: 100% 100%; margin-bottom: -1px; }
#main .main_con02 .line_bg_w .line_bg{position: absolute;height: 100%;width: 4px;left: 50%;top: 0;mix-blend-mode: color-dodge;}
#main .main_con02 .line_bg_w .line_bg i{position: absolute;top: 0;opacity: 0;animation: line_bg 2s infinite linear;}
#main .main_con02 .line_bg_w .line_bg i img{opacity: 0.5;}
#main .main_con02 .line_bg_w .line_bg01 i{animation-delay:  0.3s;}
#main .main_con02 .line_bg_w .line_bg03 i{animation-delay:  1.2s;}
#main .main_con02 .line_bg_w .line_bg04 i{animation-delay:  0.6s;}
#main .main_con02 .line_bg_w .line_bg06 i{animation-delay:  1.5s;}
#main .main_con02 .line_bg_w .line_bg07 i{animation-delay:  1.0s;}
@keyframes line_bg {
    0%{top: 0;opacity: 0;}
    50%{opacity: 1;}
    100%{top: 100% ;opacity: 0;}
}
#main .main_con02 .line_bg_w .line_bg01{margin-left: -793px;}
#main .main_con02 .line_bg_w .line_bg02{margin-left: -640px;}
#main .main_con02 .line_bg_w .line_bg03{margin-left: -534px;}
#main .main_con02 .line_bg_w .line_bg04{margin-left: -284px;}
#main .main_con02 .line_bg_w .line_bg05{margin-left: 302px;}
#main .main_con02 .line_bg_w .line_bg06{margin-left: 621px;}
#main .main_con02 .line_bg_w .line_bg07{margin-left: 650px;}
#main .main_con02 .m_title{margin-bottom: 40px;display: flex;gap: 20px;}
#main .main_con02 .m_title strong{color: #FFFFFF;font-family: "neulis-sans", sans-serif;font-size: 80px;font-weight: 500;display: block;transform: translateX(20px);}
#main .main_con02 .m_title div{clip-path: polygon(0% 0%, 0% 0%, 0 100%, 0% 100%)}
#main .main_con02 ul{display: flex;gap: 20px;position: relative;z-index: 5;backdrop-filter: blur(10px)}
#main .main_con02 ul li{flex: 1;}
#main .main_con02 ul li{transform: translateY(300px);opacity: 0;filter: blur(40px);}
#main .main_con02 ul li a{display: block;background: rgba(255,255,255,0);    backdrop-filter: saturate(120%) blur(20px);border-radius: 10px;position: relative;transition: 1s;box-shadow: 0 0 00px #4DA0FF}
#main .main_con02 ul li:hover a{background-color: #FFFFFF;box-shadow: 0 0 80px #4DA0FF;transform: translateY(-20px);}
#main .main_con02 ul li a:before{content: '';display: block;background: rgba(255,255,255,0.2);    backdrop-filter: saturate(120%) blur(20px);width: 100%;height: 100%;;position: absolute;top: 0;left: 0;border-radius: 10px;;}
#main .main_con02 ul li a .wrap{position: relative;z-index: 2;}
#main .main_con02 ul li a .txt{height: 85px;display: flex;justify-content: space-between;align-items: center;width: calc(100% - 80px);margin: 0 auto;border-top: 1px solid #D7DFE6;}
#main .main_con02 ul li a .txt strong{font-size: 20px;color: #FFFFFF;font-weight: 600;font-family: "neulis-sans", sans-serif;font-weight: 400;transition: 0.7s;}
#main .main_con02 ul li a:hover .txt strong{color: #000000;}
#main .main_con02 ul li a .txt i{display: block;width: 24px;height: 24px;background-color: #FFFFFF;border-radius: 50%;position: relative;transition: 0.7s;}
#main .main_con02 ul li:hover a .txt i{background-color: #004382;transform: rotate(90deg);}
#main .main_con02 ul li a .txt i:before{content: '';display: block;width: 8px;height: 2px;background-color: #000000;position: absolute;top: 50%;margin-top: -1px;margin-left: -4px;position: absolute;left: 50%;;transition: 0.7s}
#main .main_con02 ul li a .txt i:after{content: '';display: block;height: 8px;width: 2px;background-color: #000000;position: absolute;top: 50%;margin-top: -4px;margin-left: -1px;position: absolute;left: 50%;;transition: 0.7s}
#main .main_con02 ul li:hover a .txt i:before, #main .main_con02 ul li:hover a .txt i:after{background-color: #fff;}
#main .main_con02 .bg{position: absolute;bottom: 0;right: 0;mix-blend-mode: overlay;}
#main .main_con02 .bg img{display: block;}
#main .info_visual{position: relative;width: 100%;height: 100vh;overflow: hidden;}
#main .info_visual .box{position: absolute;top: 0;left: 0;clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
#main .info_visual .box.on{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); z-index: 5;transition: 1s;}
#main .info_visual .box.prev{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); z-index: 4;}

/* clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);  */
#main .info_visual .box img{display: block;transform: translateX(10%);}
#main .info_visual .box.on img{display: block;transform: translateX(0%);transition: 1s;}
#main .info_visual .box.prev img{transform: translateX(0%);;}
#main .info_visual .main_typo > div{position: absolute;top: 0;left: 0;z-index: 15;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;flex-direction: column;cursor: pointer}
#main .info_visual .main_typo > div.on{z-index: 20}
#main .info_visual .main_typo > div strong{display: block;;width: 100%;font-size: 80px;color: #FFFFFF;text-align: center;transform: translateX(90%) scale(0.7);opacity: 0;transition: 1s;font-family: "neulis-sans", sans-serif;font-weight: 500;}
#main .info_visual .main_typo > div.on strong{transform: scale(1) translateX(0%);opacity: 1;}
#main .info_visual .main_typo > div.prev strong{transform: scale(0.7) translateX(-90%);opacity: 0;}
#main .info_visual .main_typo > div p{font-size: 20px;color: #FFFFFF;font-weight: 500;margin-top: 20px;opacity: 0;transition: 1s;}
#main .info_visual .main_typo > div.on p{opacity: 1;}
#main .info_visual .thum_wrap{z-index: 99;position: absolute;padding: 40px 60px ;bottom: 0;left: 0;width: 100%;}
#main .info_visual .thum_wrap ul{display: flex;gap: 60px}
#main .info_visual .thum_wrap ul li{flex: 1;cursor: pointer}
#main .info_visual .thum_wrap ul li span{display: block;;color: #FFFFFF;font-size: 15px;font-family: "neulis-sans", sans-serif;text-align: center;}
#main .info_visual .thum_wrap ul li i{display: block;;width: 100%;height: 2px;background-color: #84D9FF25;margin-top: 20px;position: relative;}
#main .info_visual .thum_wrap ul li i:after{content: '';display: block;width: 10px;height: 100%;position: absolute;top: 0;left: 0;background-color: #fff;}
#main .info_visual .thum_wrap ul li.on i:after{width: 100%;transition: 7s;}

#main .main_con02 ul li a .wrap img{max-width: 100%;}



#main .info_visual .box{width: 100%;height: 100%;}
#main .info_visual .box .main_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
#main .info_visual .box img{min-width: 100vw}
#main .main_con02 ul li a .wrap img{margin: 0 auto;display: block}
@media (max-width: 1920px) {
    .bg_con_w{background: url(/img/main/bg_con_w.png);background-size: auto auto}
    #main .info_visual .box img{min-width: 0}


}
@media (max-width: 1600px) {
    .main_visual .copy_w .w strong{font-size: 60px;line-height: 70px;;}
    .main_visual .copy_w .copy_txt p{font-size: 18px;}
    .main_visual .ill_wrap {transform: scale(0.8) translateX(10%) translateY(-40%)}
    #main .main_con02 .m_title strong{font-size: 60px;}
    .main_visual.on .ill_wrap {transform: scale(0.9) translateX(10%) translateY(-40%);opacity: 1;}
    #main .main_con02 .m_title{margin-bottom: 80px;}
    #main .main_con02{padding-left: 20px;padding-right: 20px;}
    .main_visual .copy_w{padding-left: 30px;}
    #main .main_con02 ul li a .txt{height: 70px;width: calc(100% - 40px);}
    #footer .ft01 .right > ul > li{width: 110px;}
    #footer{padding: 60px 20px;}
    #footer .ft02{flex-direction: column;gap: 15px}
    #header #gnb > ul > li .dep2 > div{padding: 0 25px}
    #header #gnb > ul > li .dep2 > div ul{gap: 15px;}
    .main_visual .ill_wrap .pin_wrap .pin02 .popup{left: auto;right: 0}
}
@media (max-width: 1300px) {
    #header #gnb{display: none}
    #header .menu_btn{display: block}
    #header .hd_wrap{height: 100px}
}
@media (max-width: 960px) {
    #header .hd_wrap{height: 65px;;}
    #header #gnb{display: none;}
    #main .main_con02 ul li a .txt strong{font-size: 15px;}
    #main .main_con02 ul li{flex: auto;width: calc(50% - 10px);}
    #main .main_con02 ul{flex-wrap: wrap;gap: 20px}
    #main .main_con02{padding-bottom: 60px;padding-top: 60px;}
    #main .main_con02 .m_title{margin-bottom: 40px;gap: 10px}
    #main .main_con02 .m_title strong{font-size: 45px;}
     .main_visual .ill_wrap {transform: scale(0.6) translateX(-50%) translateY(-40%);left: 50%;right: auto;}
    .main_visual.on .ill_wrap {transform: scale(0.7) translateX(-50%) translateY(-40%);opacity: 1;}
    .main_visual .copy_w{top: 200px;transform: translateY(0);}
    #main .info_visual .main_typo > div strong{font-size: 55px;}
    #main .info_visual .main_typo > div p{font-size: 15px;margin-top: 10px;;}
    #main .info_visual .thum_wrap{padding: 20px;}
    #main .info_visual .thum_wrap ul li span{font-size: 13px;}
    #main .info_visual .thum_wrap ul li i{margin-top: 10px;}
    #header{padding: 0 20px;}
    #header .hd_wrap .btn_w .tog_btn button{font-size: 14px;}
    #header .hd_wrap .btn_w{gap: 25px}
    #header #logo svg{width: 100px;height: auto;}
    #footer .ft01 .right > ul > li ul li a{font-size: 13px;}
    #footer .ft01 .right > ul > li ul{gap: 8px}
    #footer .ft01 .right > ul > li > a{font-size: 14px;margin-bottom: 10px;;}
    #footer .ft01 .right > ul > li{width: 90px;}
    #footer .ft01 .left > ul li a{font-size: 14px;}
    #footer .ft01 .left > ul{gap: 20px;margin-top: 20px;;}
    #footer .ft01 svg{width: 100px;height: auto;}
    #footer .ft02 ul li{font-size: 13px;}
    #footer .ft02 ul{gap: 25px}
    #footer .ft02 address{font-size: 11px;}
    #main .main_con02 .line_bg_w .line_bg img{width: 2px;opacity: 0.3;}
    #main .main_con02 .line_bg_w .line_bg01{margin-left: -300px;}
    #main .main_con02 .line_bg_w .line_bg02{margin-left: -240px;}
    #main .main_con02 .line_bg_w .line_bg03{margin-left: -130px;}
    #main .main_con02 .line_bg_w .line_bg04{margin-left: -70px;}
    #main .main_con02 .line_bg_w .line_bg05{margin-left: 98px;}
    #main .main_con02 .line_bg_w .line_bg06{margin-left: 200px;}
    #main .main_con02 .line_bg_w .line_bg07{margin-left: 220px;}
    .main_visual .scr_down{left: 30px;bottom: 30px}
    .main_visual .scr_down strong{font-size: 12px}
    .main_visual .scr_down i{height: 30px;}
    #main .main_con02{z-index: 15}
}
@media (max-width: 750px) {
    #footer .ft02{margin-top: 20px;padding-top: 20px;;}
    .main_visual .copy_w .copy_txt{margin-top: 20px;;}
    .main_visual .copy_w .copy_txt p{font-size: 14px;;}
    .main_visual .copy_w .w strong{font-size: 40px;line-height: 50px;}
    #main .main_con02 .m_title strong{font-size: 36px;}
    #main .main_con02 ul li a{border-radius: 7px;;}
    #main .main_con02 ul li a:before{border-radius: 7px;}
    #main .main_con02 ul li a .txt{height: 50px;}
    #main .main_con02 ul li a .txt i{width: 20px;height: 20px;}
    #main .info_visual .box .main_img img{height: 100vh;}
    #main .info_visual .main_typo > div strong{font-size: 36px;}
    #main .info_visual .main_typo > div p{font-size: 14px;}
    #main .info_visual .thum_wrap ul{gap: 20px;}
    #footer .ft01{flex-direction: column;gap: 30px}
    #footer .ft01 .left > ul{margin-top: 10px;}
    #footer .ft01 .right > ul{flex-wrap: wrap;gap: 20px}
    #footer .ft01 .right > ul > li{width: calc(33.33% - 13.33333333333333px);}
    #all_menu > ul > li > a{font-size: 16px}
    #all_menu > ul > li ul li > a{font-size: 14px}
    #all_menu{width: 280px}
    #all_menu .close{right: 20px;top: 20px}
    #header .menu_btn button i{width: 24px;height: 1px;margin: 7px 0}
    #header.on .menu_btn button i{background: #000}
    .main_visual .ill_wrap .pin_wrap .pin .popup{display: none}
}
@media (max-width: 640px) {
    #header .hd_wrap .btn_w{gap: 15px}
    #footer .ft02 ul{flex-direction: column;gap: 10px}
    .main_visual .copy_w .w strong{font-size: 44px;line-height: 1.2;}
    .main_visual .copy_w .w{gap: 7px}
    .main_visual .copy_w .copy_txt{margin-top: 10px;}
    .main_visual.on .ill_wrap {transform: scale(0.7) translateX(-50%) translateY(-40%);opacity: 1;left: 50%;right: auto;}
    .main_visual .ill_wrap {transform: scale(0.5) translateX(-70%) translateY(-40%);left: 50%;right: auto;}
    .main_visual.on .ill_wrap {transform: scale(0.6) translateX(-70%) translateY(-40%);opacity: 1;}
    #main .main_con02 ul{gap: 10px}
    #main .main_con02 ul li {width: calc(50% - 5px);}
    #main .main_con02 .m_title strong{font-size: 30px;}
    #main .main_con02 .m_title{margin-bottom: 25px;}
    #main .main_con02 ul li:hover a{transform: translateY(0);}
    #main .main_con02 ul li a .txt strong{font-size: 14px;}
    #main .main_con02 ul li a .txt{width: calc(100% - 20px);height: 45px;}
    #main .main_con02 ul li a .txt i{width: 17px;height: 17px;}
    #main .main_con02 ul li a .txt i:before{width: 6px;height: 2px;margin-left: -3px;margin-top: -1px;}
    #main .main_con02 ul li a .txt i:after{height: 6px;width: 2px;margin-top: -3px;margin-left: -1px;}
    #main .info_visual .thum_wrap ul li span em{display: block;}
    #header .hd_wrap .btn_w .tog_btn button{font-size: 13px;}
}
@media (max-width: 440px) {
	.main_visual .copy_w .w strong{font-size: 40px}
    .main_visual .copy_w{top: 180px;}
    .main_visual .ill_wrap {transform: scale(0.4) translateX(-100%) translateY(-60%);left: 50%;right: auto;}
    .main_visual.on .ill_wrap {transform: scale(0.5) translateX(-100%) translateY(-60%);opacity: 1;}

}