@charset "utf-8";
#inc08 .inner{max-width:1140px;width:100%;margin:0 auto}

/* VIDEO */
#inc08 .group-video{position:relative;height:1000px;display:flex;flex-direction:column;justify-content:space-between;padding:268px 0 120px}
#inc08 .group-video .area-bg{z-index:-1;position:absolute;top:0;left:0;width:100%;height:100%}
#inc08 .group-video .area-bg::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.4)}
#inc08 .group-video .area-bg video{width:100%;height:100%;object-fit:cover}
#inc08 .group-video .tit-box{display:flex;flex-direction:column;gap:180px}
#inc08 .group-video .tit-box > *{position:relative;display:inline-flex;font-family:var(--e-font);font-weight:700;font-size:130px;line-height:100%;color:#fff}
#inc08 .group-video .right{justify-content:flex-end;text-align:right}
#inc08 .group-video .text{position:relative}
#inc08 .group-video .text .flip{position:absolute;display:flex;align-items:center;justify-content:center;height:36px;padding:0 22px;border-radius:100px;font-size:16px;background-color:var(--primary);color:#fff;text-transform:uppercase}
#inc08 .group-video .right .flip{top:-7px;right:270px}
#inc08 .group-video .left .flip{bottom:0;left:233px}
#inc08 .group-video h2{font-family:var(--e-font);font-size:20px;line-height:1.6;text-align:right;white-space:pre-line;color:#fff;font-weight:normal}

/* FAQ */
#inc08 .group-faq{padding-top:175px;background-color:#111}
#inc08 .group-title{padding-bottom:85px}
#inc08 .group-title .desc{padding-bottom:40px;font-size:26px;font-weight:700;color:var(--primary)}
#inc08 .group-title h2{line-height:100%;color:#fff}
#inc08 .faq-list ul{display:flex;flex-direction:column;gap:20px}
#inc08 .faq-list ul li{display:flex;flex-direction:column;width:100%;padding:0 30px;background-color:#1a1a1a;border:1px solid rgba(255,255,255,0.18);border-radius:var(--radius);color:#fff;cursor:pointer}
#inc08 .faq-list .question{display:flex;align-items:center;justify-content:space-between;min-height:100px}
#inc08 .faq-list .question h3{display:flex;align-items:center;gap:25px;font-size:28px;font-weight:700;color:#fff}
#inc08 .faq-list .question h3::before{content:'Q';font-family:var(--e-font);font-style:normal;color:var(--primary)}
#inc08 .faq-list .question .mark{position:relative;display:flex;width:35px;height:35px;transition:transform 0.4s}
#inc08 .faq-list .question .mark::before, #inc08 .faq-list .question .mark::after{position:absolute;content:'';top:50%;left:50%;background-color:#fff}
#inc08 .faq-list .question .mark::before{width:25px;height:3px;transform:translate(-50%, -50%);transition:opacity 0.2s, visibility 0.2s}
#inc08 .faq-list .question .mark::after{height:25px;width:3px;transform:translate(-50%, -50%) rotate(180deg)}
#inc08 .faq-list li.open .question .mark{transform:rotate(90deg)}
#inc08 .faq-list li.open .question .mark::before{opacity:0;visibility:hidden}
#inc08 .faq-list .answer{display:none;overflow:hidden;padding-bottom:36px;padding-left:47px;font-size:20px;font-weight:600;line-height:1.8;color:rgba(255,255,255,0.5);white-space:pre-line}

/* 상담문의 */
#inc08 .group-contact{display:flex;flex-direction:column;align-items:center;padding-top:210px;padding-bottom:215px;background-color:#111}
#inc08 .group-contact .group-title{padding-bottom:80px}
#inc08 .group-contact .group-title .desc{color:#fff}
#inc08 .group-contact .group-title h2{white-space:pre-line;line-height:1.17}
#inc08 .group-contact .btn--primary{display:flex;align-items:center;justify-content:flex-start;gap:15px;width:344px;height:77px;padding-left:12px;box-sizing:border-box}
#inc08 .group-contact a .ic-contact{display:flex;align-items:center;justify-content:center;width:54px;aspect-ratio:1;border-radius:100px;background-color:#fff;transition:background-color 0.2s}
#inc08 .group-contact a .ic-contact span{color:var(--primary);font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24;transition:color 0.2s}
#inc08 .group-contact a dl{display:flex;align-items:center;gap:18px}
#inc08 .group-contact a dt{font-size:20px;font-weight:700;color:rgba(255,255,255,0.5);transition:color 0.2s}
#inc08 .group-contact a dd{font-size:26px;font-weight:700}
#inc08 .group-contact a:hover .ic-contact{background-color:var(--primary)}
#inc08 .group-contact a:hover .ic-contact span{color:#fff}
#inc08 .group-contact a:hover dt{color:var(--primary)}

/* 반응형 [s] */
@media (max-width:1500px){
#inc08 .group-video{height:840px;padding:230px 20px 120px}
#inc08 .group-video .tit-box > *{font-size:110px}
#inc08 .group-video .text .flip{height:34px;font-size:15px}
#inc08 .group-video .right .flip{top:-14px;right:215px}
#inc08 .group-video .left .flip{bottom:-10px;left:190px}
#inc08 .group-video .inner{max-width:none}
#inc08 .group-faq{padding-top:120px}
#inc08 .group-title{padding-bottom:60px}
#inc08 .group-title .desc{padding-bottom:30px}
#inc08 .faq-list .question{min-height:90px}
#inc08 .faq-list .question h3{gap:20px;font-size:22px}
#inc08 .faq-list .question .mark{width:30px;height:30px}
#inc08 .faq-list .answer{padding-left:40px;font-size:18px}
#inc08 .faq-list .question .mark::before{width:20px}
#inc08 .faq-list .question .mark::after{height:20px}
#inc08 .group-contact{padding:120px 0}
#inc08 .group-contact .group-title{padding-bottom:60px}
}
@media (max-width:1200px){
#inc08 .group-video{height:745px;padding:160px 20px 120px}
#inc08 .group-video .tit-box > *{font-size:90px}
#inc08 .group-video .text .flip{height:32px;padding:0 18px;font-size:14px}
#inc08 .group-video .right .flip{right:180px}
#inc08 .group-video .left .flip{left:160px}
#inc08 .group-video h2{font-size:17px;line-height:1.5}
#inc08 .group-faq .inner{padding:0 20px}
#inc08 .faq-list .question{min-height:80px}
#inc08 .faq-list .question h3{font-size:20px}
#inc08 .faq-list .question .mark{width:25px;height:25px}
#inc08 .faq-list .answer{padding-left:34px;padding-bottom:20px;font-size:16px}
#inc08 .group-contact a dt{font-size:18px}
#inc08 .group-contact a dd{font-size:22px}
#inc08 .group-contact .btn--primary{width:295px;height:70px}
#inc08 .group-contact a .ic-contact{width:50px}
#inc08 .group-contact a .ic-contact span{font-size:20px}
}
@media (max-width:1024px){
#inc08 .group-video{justify-content:flex-end;height:650px;padding:100px 20px}
#inc08 .group-video .text{text-align:center}
#inc08 .group-video h2{text-align:center}
#inc08 .group-video .right{justify-content:center}
#inc08 .group-video .tit-box{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;align-items:center;gap:10px}
#inc08 .group-video .right .flip{top:-12px;left:42px;right:unset}
#inc08 .group-video .left .flip{bottom:-12px;left:unset;right:28px}
#inc08 .group-faq{padding-top:90px}
#inc08 .group-title{padding-bottom:40px}
#inc08 .group-title .desc{padding-bottom:24px}
#inc08 .faq-list ul{gap:14px}
#inc08 .faq-list .question{min-height:65px}
#inc08 .faq-list .question h3{gap:15px;font-size:18px}
#inc08 .faq-list .answer{padding-left:28px}
#inc08 .group-contact{padding:80px 0}
#inc08 .group-contact .group-title{padding-bottom:40px}
#inc08 .group-contact .btn--primary{gap:10px;width:260px;height:66px}
#inc08 .group-contact a .ic-contact{width:46px}
#inc08 .group-contact a dl{gap:10px}
#inc08 .group-contact a dt{font-size:16px}
#inc08 .group-contact a dd{font-size:20px}
}
@media (max-width:768px){
#inc08 .group-video{height:550px;padding:90px 20px}
#inc08 .group-video .tit-box > *{font-size:65px}
#inc08 .group-video .text .flip{height:28px}
#inc08 .group-video .right .flip{top:-17px;left:32px}
#inc08 .group-video .left .flip{bottom:-17px;right:4px}
#inc08 .group-video h2{font-size:16px}
#inc08 .group-faq{padding-top:80px}
#inc08 .group-title{padding-bottom:30px}
#inc08 .faq-list .question{min-height:70px}
#inc08 .faq-list .question .mark{width:20px;height:20px}
#inc08 .faq-list .question .mark::before{width:15px}
#inc08 .faq-list .question .mark::after{height:15px}
#inc08 .faq-list .answer{padding-left:30px;font-size:15px}
#inc08 .group-contact .group-title{padding-bottom:30px}
#inc08 .group-contact .btn--primary{width:280px;height:66px}
#inc08 .group-contact a .ic-contact{width:45px}
#inc08 .group-contact a dd{font-size:20px}
}
@media (max-width:480px){
#inc08 .group-video{height:490px;padding:100px 15px}
#inc08 .group-video .tit-box{gap:5px}
#inc08 .group-video .tit-box > *{font-size:clamp(28px,10.5vw,50px)}
#inc08 .group-video .text .flip{height:22px;font-size:12px}
#inc08 .group-video .right .flip{top:-17px;left:-14px}
#inc08 .group-video .left .flip{bottom:-16px;right:-20px}
#inc08 .group-video h2{font-size:14px}
#inc08 .group-faq{padding-top:60px}
#inc08 .group-faq .inner{padding:0 15px}
#inc08 .group-title{padding-bottom:30px}
#inc08 .group-title .desc{padding-bottom:15px}
#inc08 .faq-list .question{min-height:60px}
#inc08 .faq-list .question h3{font-size:16px}
#inc08 .faq-list .answer{padding-left:26px;font-size:14px;white-space:normal}
#inc08 .faq-list ul li{padding:0 20px}
#inc08 .group-contact{padding:60px 15px}
#inc08 .group-contact .btn-wrap{display:flex;justify-content:center;width:100%}
#inc08 .group-contact .btn--primary{gap:12px;max-width:180px;height:58px;width:100%;padding:0 10px}
#inc08 .group-contact a dl{gap:12px}
#inc08 .group-contact a dt{display:none}
#inc08 .group-contact a dd{font-size:18px}
#inc08 .group-contact a .ic-contact{width:40px}
#inc08 .group-contact a .ic-contact span{font-size:18px}
}
@media(max-width:390px){
#inc08 .group-video .text .flip{height:18px;padding:0 10px;font-size:10px}
}
/* 반응형 [e] */