@charset "utf-8";

/* 메인비주얼 */
#mainVisual{overflow:hidden;position:relative;height:100vh;color:#fff;background:var(--dark);font-family:'Pretendard'}
#mainVisual .main_swiper{height:100%}
#mainVisual ul li{background:center no-repeat;background-size:cover}

#mainVisual .main_ofc_view{position:relative;width:100%;padding-bottom:56.25%; /* 16:9 비율 (9 ÷ 16 = 0.5625) */height:0;overflow:hidden;pointer-events:none}
#mainVisual iframe{position:absolute;top:-80px;left:0;width:100%;height:100%;border:0}

@media (hover:hover) {
/* hover 가능한 경우 */
#mainVisual ul li.bg01{background-image:url(/wp_img/index/main_banner/img/bg01.jpg)}
#mainVisual ul li.bg03{background-image:url(/wp_img/index/main_banner/img/bg03.jpg)}
}

@media (hover:none) { 
/* hover 불가능한 경우 */  
#mainVisual ul li.bg01{background-image:url(/wp_img/index/main_banner/img/bg01_m.jpg)}
#mainVisual ul li.bg03{background-image:url(/wp_img/index/main_banner/img/bg03_m.jpg)}
}
#mainVisual ul li.bg02{background-color:var(--dark)}
#mainVisual ul li .txt{display:flex;flex-flow:column;max-width:var(--mainsize);height:100%;margin:0 auto;transition:all .5s .6s}
#mainVisual ul li .txt p{margin:auto 0 190px 0;font-size:36px;font-weight:700;line-height:1.4;white-space:pre-line}
#mainVisual ul li .txt p span{font-size:20px;font-weight:500}
#mainVisual ul li.bg01 .device{opacity:0;position:absolute;right:calc((100% - var(--mainsize)) / 2);bottom:105px;margin-right:-40px}
#mainVisual ul li.bg01 .device img{width:600px}
#mainVisual ul li.bg01 .txt p{word-break:keep-all}
#mainVisual ul li.bg03 .txt p{word-break:keep-all}
#mainVisual ul li.bg02:before{opacity:0;display:block;content:"";position:absolute;left:140px;top:-200px;width:400px;height:400px;border:110px solid rgba(255,255,255,.06);border-radius:50%;transition:all .5s .6s}
#mainVisual ul li.bg02.on:before{opacity:1;top:-220px}
#mainVisual ul li.bg02 .kwd{display:flex;flex-wrap:wrap;position:absolute;left:50%;bottom:120px;z-index:2;transform:translateX(-50%);width:420px;margin-left:80px}
#mainVisual ul li.bg02 .kwd a{display:flex;align-items:center;height:50px;padding:0 20px;margin:8px 6px;border-radius:30px;font-size:18px;font-weight:600;border:2px solid rgba(255,255,255,.3);color:rgba(255,255,255,.5);transition:all .25s}
#mainVisual ul li.bg02 .kwd a img{height:28px;margin-right:5px}
#mainVisual ul li.bg02 .kwd a img.icon02{height:32px}
#mainVisual ul li.bg02 .kwd a:nth-child(1){margin-left:25px}
#mainVisual ul li.bg02 .kwd a:nth-child(5){margin-left:50px}
#mainVisual ul li.bg02 .obj{position:absolute;right:calc((100% - var(--mainsize)) / 2);bottom:105px;margin-right:-105px}
#mainVisual ul li.bg02 .people{opacity:0;position:absolute;right:calc((100% - var(--mainsize)) / 2);bottom:95px;z-index:1;margin-right:110px;transition:all .5s .6s}
#mainVisual ul li.bg02.on .people{opacity:1;margin-right:90px}
#mainVisual ul li.bg03 .balloon{opacity:0;display:flex;flex-flow:column;gap:50px;position:absolute;right:22%;bottom:140px;z-index:101;max-width:27%;width:100%;transition:all .5s .6s}
#mainVisual ul li.bg03 .balloon p{position:relative;width:max-content;padding:20px 30px;border-radius:12px;font-size:18px;font-weight:600;line-height:1.4;color:#222;white-space:pre-line;background:#fff}
#mainVisual ul li.bg03 .balloon p:after{display:block;content:"";position:absolute;left:-15px;top:0;transform:rotate(180deg);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:15px solid #fff;border-radius:4px}
#mainVisual ul li.bg03 .balloon p+p{margin-left:auto;transition-delay:0s}
#mainVisual ul li.bg03 .balloon p+p:after{left:auto;right:-15px}
#mainVisual ul li.bg03.on .balloon{opacity:1}
#mainVisual .main_pager{position:absolute;z-index:101;left:calc((100% - var(--mainsize)) / 2);top:235px;width:max-content;height:max-content;font-size:14px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,.5)}
#mainVisual .main_pager span{opacity:.5;color:#fff}
#mainVisual .main_pager span:first-of-type{opacity:1}
#mainVisual .main_control{display:flex;align-items:center;position:absolute;z-index:101;left:calc((100% - var(--mainsize)) / 2);bottom:120px;width:max-content;height:max-content}
#mainVisual .main_control .chevron{margin-top:3px}
#mainVisual .main_control .chevron svg{width:19px;height:19px;color:#fff}
#mainVisual .main_control .chevron.next{margin-left:2px}
#mainVisual .autoplay_control{width:10px;margin:0 6px}
#mainVisual .autoplay_control .play{display:none}
#mainVisual .main_timeline{width:215px;height:auto;margin-right:12px}
#mainVisual .main_timeline span{display:none;position:relative;width:100%;height:2px;border-radius:0;background:rgba(255,255,255,.3);opacity:1}
#mainVisual .main_timeline span.on{display:block}
#mainVisual .main_timeline span:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}
#mainVisual .main_timeline span.on:before{background:#fff;animation:progressbar 5s linear}


#mainVisual .ntc{position:absolute}
#mainVisual .main_btn{display:flex;align-items:center;height:100vh;background:url(./img/main_bg.jpg) no-repeat center;background-size:cover}
#mainVisual .inner{max-width:var(--mainsize);margin:0 auto}
#mainVisual h2{margin-bottom:50px;font-size:50px;font-weight:700;text-align:center;word-break:keep-all}
#mainVisual .box_area{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
#mainVisual .box_area h3{font-size:40px;font-weight:700;text-align:center}
#mainVisual .box_area li{position:relative;padding:40px 30px;border-radius:15px}
#mainVisual .box_area .e_tit{position:absolute;width:100%;top:30px;left:50%;font-size:70px;font-weight:700;text-align:center;line-height:1;color:rgba(255,255,255,.1);transform:translateX(-50%);letter-spacing:-1px}
#mainVisual .box_area .btn_tit{padding:30px 0 20px}
#mainVisual .box_area dd{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:500}
#mainVisual .box_area dd+dd{margin-top:10px}
#mainVisual .box_area dd span{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50px;background:rgba(255,255,255,.3)}
#mainVisual .box_area dd svg{width:15px;stroke-width:3px}
#mainVisual .box_area img{display:block;margin:20px auto}
#mainVisual .box_area .box01{background:linear-gradient(180deg, #1B88FF, #1461B5)}
#mainVisual .box_area .box02{background:linear-gradient(180deg, #10C5F1, #0090F0)}
#mainVisual .box_area .box03{background:linear-gradient(180deg, #7178FF, #2D34B1)}
#mainVisual .golink{text-align:center}
#mainVisual .golink .bubble{position:relative;display:inline-block;margin-bottom:20px;padding:10px 20px;border-radius:15px;font-size:15px;font-weight:500;background:rgba(0,0,0,.3)}
#mainVisual .golink .bubble:after{position:absolute;content:'';bottom:-7px;left:50%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid rgba(0,0,0,.3);transform:translateX(-50%)}
#mainVisual .golink a{display:block;width:235px;margin:0 auto;padding:20px 0;border:2px solid #fff;border-radius:50px;font-size:20px;font-weight:700;color:#111;text-align:center;background:#fff;cursor:pointer;transition:all .3s}


@keyframes progressbar{0%{width:0}to{width:100%}}
@media(hover:hover){
#mainVisual ul li.bg02 .kwd a:hover{border-color:#fff;color:#111;background:#fff}
#mainVisual .golink a:hover{color:#fff;background:none}
}
@media(max-width:1340px){
#mainVisual .main_pager{left:15px;top:190px}
#mainVisual .main_control{left:15px}
#mainVisual ul li .txt p{padding-left:15px}
#mainVisual ul li.bg01 .device{right:30px}
#mainVisual ul li.bg01 p{padding-right:500px}
#mainVisual ul li.bg02 .kwd{left:55%}
#mainVisual ul li.bg02.on .people{margin-right:130px}
#mainVisual{height:100%}
#mainVisual iframe{top:0}

#mainVisual h2{margin-bottom:30px;font-size:40px}
#mainVisual .box_area{padding:0 50px}
#mainVisual .box_area h3{font-size:30px}
#mainVisual .box_area img{width:100px}
}
@media(max-width:1024px){
#mainVisual .main_pager{top:80px;left:50%;transform:translateX(-50%)}
#mainVisual .main_control{left:50%;bottom:40px;transform:translateX(-50%)}
#mainVisual ul li .txt{align-items:center;height:auto;padding-top:110px;margin-bottom:20px;text-align:center}
#mainVisual ul li .txt p span{display:block;margin-bottom:5px;font-size:16px}
#mainVisual ul li .txt p{margin:0;padding:0;font-size:32px;white-space:normal}
#mainVisual ul li.bg01 .device{position:relative;right:auto;bottom:auto;transform:none;display:flex;justify-content:center;width:100%}
#mainVisual ul li.bg01 .device iframe{left:50%;transform:translateX(-50%);margin-left:3px}
#mainVisual ul li.bg01 p{padding:0 50px;white-space:normal}
#mainVisual ul li.bg02{text-align:center}
#mainVisual ul li.bg02:before{left:-10%}
#mainVisual ul li.bg02 .obj{right:-10%;bottom:-15%}
#mainVisual ul li.bg02 .kwd{justify-content:center;position:relative;left:auto;bottom:auto;transform:none;margin:0;width:100%;padding:0 35% 0 15px}
#mainVisual ul li.bg02 .kwd a{height:45px;margin:5px!important;padding:0 15px;font-size:16px}
#mainVisual ul li.bg02 .people{position:absolute;right:25px;bottom:50px;margin-right:50px;width:40%;max-width:300px}
#mainVisual ul li.bg02.on .people{margin:0;bottom:20px}
#mainVisual ul li.bg03 .balloon{max-width:60%;right:auto;left:50%;transform:translateX(-50%)}

#mainVisual .main_btn{height:auto;padding:100px 0}
#mainVisual .box_area{gap:20px}
#mainVisual .box_area li{padding:30px 20px}
#mainVisual .box_area .e_tit{font-size:50px}
#mainVisual .box_area h3{font-size:25px}
#mainVisual .box_area dd{font-size:16px}
#mainVisual .golink a{width:100%;padding:15px 0;font-size:18px}
}
@media(max-width:880px){
#mainVisual .inner{max-width:100%;width:100%;padding:0 30px}
#mainVisual h2{font-size:30px}
#mainVisual .box_area{display:block;padding:0}
#mainVisual .box_area li{display:flex;align-items:center;justify-content:space-between}
#mainVisual .box_area li+li{margin-top:20px}
#mainVisual .box_area .e_tit{top:50%;transform:translate(-50%, -50%)}
#mainVisual .box_area .btn_tit{padding:0 0 20px}
#mainVisual .box_area img{display:none}
#mainVisual .golink{width:240px}
}
@media(max-width:768px){
#mainVisual .main_pager{top:50px}
#mainVisual ul li .txt{padding-top:80px}
#mainVisual ul li .txt p{font-size:24px;letter-spacing:-.5px;word-break:keep-all}
#mainVisual ul li.bg02 .obj{display:none}
#mainVisual ul li.bg01 .device img{width:320px}
#mainVisual ul li.bg01 .device iframe{width:280px;height:175px}
#mainVisual ul li.bg01 p{padding:0 20px}
#mainVisual ul li.bg02 .kwd a{height:40px;margin:3px!important;font-size:14px;letter-spacing:-.5px;color:rgba(255,255,255,.8)}
#mainVisual ul li.bg02 .kwd a img{height:22px!important}
#mainVisual ul li.bg03 .balloon{gap:20px;bottom:110px;max-width:480px;padding:0 30px}
#mainVisual ul li.bg03 .balloon p{padding:15px 20px;border-radius:8px;font-size:15px}
#mainVisual ul li.bg03 .balloon p:after{left:-10px;border-width:10px}
#mainVisual ul li.bg03 .balloon p+p:after{right:-10px}
#mainVisual ul li.bg02.on .people{bottom:0}

#mainVisual .main_btn{padding:50px 0}
}
@media(max-width:600px){
#mainVisual h2{font-size:25px}
#mainVisual .box_area h3{font-size:20px}
#mainVisual .box_area li{flex-direction:column;gap:20px;width:350px;margin:0 auto}
#mainVisual .box_area dd svg{width:11px}
#mainVisual .box_area dd span{width:20px;height:20px}
#mainVisual .golink a{padding:15px 0;font-size:16px}
}
@media(max-width:480px){
#mainVisual ul li.bg02 .kwd{padding:0 15px}	
#mainVisual ul li.bg02 .people{left:50%;bottom:0;transform:translateX(-50%)}
#mainVisual .main_control{left:auto;transform:none;right:15px}
#mainVisual .main_timeline,#mainVisual .autoplay_control{display:none}

#mainVisual h2{font-size:23px}
#mainVisual .box_area h3{font-size:18px}
#mainVisual .box_area li{width:300px;padding:20px 10px}
#mainVisual .box_area dd{font-size:15px}
#mainVisual .box_area dd+dd{margin-top:5px}
#mainVisual .box_area .btn_tit{padding:0 0 10px}
#mainVisual .golink a{padding:10px 0;font-size:15px}
#mainVisual .golink .bubble{margin-bottom:13px;font-size:12px}
#mainVisual .box_area .e_tit{font-size:40px}
}
@media(max-width:420px){
#mainVisual ul li.bg02 .people{display:none}
}
@media(max-width:380px){
#mainVisual .main_control{bottom:30px}
#mainVisual ul li .txt p{font-size:20px}	
#mainVisual ul li.bg01 .device img{width:300px}
#mainVisual ul li.bg01 .device iframe{width:250px;height:155px}
#mainVisual ul li.bg02 .kwd a{font-size:13px}
#mainVisual ul li.bg03 .balloon p{padding:10px 15px;font-size:14px}

#mainVisual h2{font-size:19px}
#mainVisual .box_area h3{font-size:17px}
#mainVisual .box_area li{width:100%}
#mainVisual .box_area dd{gap:5px;font-size:14px}
}