@charset "utf-8";

#mainBanner .main-tit>span{font-size:18px;font-weight:700;color:#111;font-family:var(--k-font);word-break:keep-all}
#mainBanner .main-tit h1{font-size:60px;color:#111;letter-spacing:-3px;font-family:var(--B-font);line-height:1.4;word-break:keep-all}
#mainBanner .main-tit h1 span{color:var(--primary)}

#mainBanner .slide-area{display:flex;justify-content:space-between;gap:22px;margin-top:10px}
#mainBanner .product-box{max-width:855px;min-width:0;width:100%}
#mainBanner .pro-slide{overflow:hidden;width:100%;height:470px;border-radius:5px}
#mainBanner .pro-slide li{position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center right}
#mainBanner .pro-slide li.bnr01{background-image:url(./img/main-banner01.jpg)}
#mainBanner .pro-slide li.bnr02{background-image:url(./img/main-banner02.jpg)}
#mainBanner .pro-slide li.bnr03{background-image:url(./img/main-banner03.jpg)}
#mainBanner .pro-slide .txt{position:absolute;top:30%;left:70px;transition:all .25s ease-out;opacity:0}
#mainBanner .pro-slide h2{font-size:40px;font-weight:normal;line-height:1.2;white-space:pre-line;color:var(--primary);font-family:var(--L-font);word-break:keep-all}
#mainBanner .pro-slide h2 b{font-family:var(--B-font)}
#mainBanner .pro-slide p{margin-top:10px;white-space:pre-line;line-height:1.2;word-break:keep-all}
#mainBanner .pro-slide li.on .txt{opacity:1;transition:all 1.5s}

#mainBanner .pop-box{max-width:290px;width:100%;height:470px}
#mainBanner .pop-slide{position:relative;overflow:hidden;width:100%;height:100%;margin:0;border-radius:5px;color:#fff}
#mainBanner .pop-slide li{position:relative;padding:50px 30px 0;background-image:url(./img/pop01-bg.png);background-repeat:no-repeat;background-color:#b1c7d0;background-position:bottom left 30px}
#mainBanner .pop-slide li::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.1);pointer-events:none}
#mainBanner .pop-slide li .txt{position:relative;z-index:1}
#mainBanner .pop-slide li a{display:flex;justify-content:center;align-items:center;width:45px;height:45px;margin-top:13px;border-radius:50px;color:#fff;background:rgba(0,0,0,.2);transition:all .3s}
#mainBanner .pop-slide li a:hover{background:rgba(0,0,0,.5)}
#mainBanner .pop-slide li svg{width:20px}
#mainBanner .pop-slide p{margin-bottom:5px;font-weight:500;font-family:var(--k-font);word-break:keep-all}
#mainBanner .pop-slide h3{font-size:25px;font-weight:normal;line-height:1.2;white-space:pre-line;font-family:var(--M-font);word-break:keep-all}
#mainBanner .pop-slide .line-bar{overflow:hidden;position:absolute;z-index:10;top:unset;bottom:30px;left:50%;width:75px;height:6px;border-radius:50px;background:rgba(0,0,0,.2);transform:translateX(-50%)}
#mainBanner .pop-slide .line-bar span{background:rgba(0,0,0,.5) !important}

#mainBanner .latest-area{display:flex;align-items:center;gap:15px;margin-top:20px}
#mainBanner .step-num{flex-shrink:0;display:inline-block;border-radius:3px;padding:3px 10px;font-size:13px;font-weight:600;color:#111;background:#f5f5f5}
#mainBanner .step-num:before{display:inline-block;content:'';width:4px;height:4px;margin-right:8px;border-radius:5px;vertical-align:3px}
#mainBanner .notice-box.latest-area{padding-right:20px}
#mainBanner .notice-box .step-num:before{background:#6478ed}
#mainBanner .notice-box li a{display:flex;justify-content:space-between;align-items:center;font-family:var(--k-font)}
#mainBanner .notice-box li a p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:700}
#mainBanner .notice-box li a span{color:#aaa}
#mainBanner .inquiry-slide .notice-slide{width:50%;font-weight:700;font-family:var(--k-font)}
#mainBanner .inquiry-slide .notice-slide p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mainBanner .inquiry-slide .step-num:before{background:#eb4141}
#mainBanner .notice-slide{overflow:hidden;height:20px;width:85%;margin:0}

/* 반응형 [s] */
@media (max-width:1800px){
#mainBanner .main-tit h1{font-size:52px}
#mainBanner .pop-box{max-width:320px}
#mainBanner .pop-slide li{background-position:bottom left 62px}
}
@media (max-width:1700px){
#mainBanner .main-tit h1{font-size:45px}
#mainBanner .slide-area{gap:20px}
#mainBanner .pro-slide{height:430px}
#mainBanner .pro-slide h2{font-size:36px}
#mainBanner .pro-slide .txt{left:50px}

#mainBanner .pop-box{height:430px}
#mainBanner .pop-slide li{background-size:310px;background-position:bottom left 70px}
}
@media (max-width:1600px){
#mainBanner .pop-box, #mainBanner .pro-slide{height:360px}
#mainBanner .pro-slide h2{font-size:32px}

#mainBanner .pop-slide li{padding:30px 30px 0;background-size:255px;background-position:bottom left 103px}
#mainBanner .pop-slide h3{font-size:23px}
#mainBanner .pop-slide li a{width:42px;height:42px}
#mainBanner .notice-box li a span{font-size:14px}
}
@media (max-width:1400px){
#mainBanner .main-tit h1{font-size:40px;letter-spacing:-2px}
#mainBanner .main-tit>span{font-size:17px}
#mainBanner .pro-slide .txt{z-index:1;left:30px}
#mainBanner .pro-slide h2{font-size:28px}
}
@media (max-width:1300px){
#mainBanner .slide-area{flex-direction:column;margin-top:0}
#mainBanner .product-box{max-width:none}
#mainBanner .pop-box{max-width:none;height:auto}
#mainBanner .pro-slide{height:280px}
#mainBanner .pro-slide li{display:flex;align-items:center}
#mainBanner .pro-slide .txt{top:unset}

#mainBanner .pop-slide li{display:flex;align-items:center;padding:50px 30px;background-position:center right}
#mainBanner .notice-box.latest-area{padding-right:0}
}
@media(max-width:1024px){
#mainBanner .main-tit h1{font-size:34px}
#mainBanner .pro-slide{height:250px}
}
@media(max-width:768px){
#mainBanner .main-tit h1{font-size:30px;letter-spacing:-1px}
#mainBanner .main-tit>span{font-size:16px}
#mainBanner .pro-slide{height:220px}
#mainBanner .pro-slide h2{font-size:24px}
#mainBanner .pro-slide p, #mainBanner .pop-slide p{font-size:14px}
#mainBanner .latest-area{margin-top:14px}
#mainBanner .slide-area{gap:14px}
}
@media (max-width:480px){
#mainBanner .main-tit h1{font-size:26px}
#mainBanner .main-tit>span{font-size:15px}
#mainBanner .notice-box li a p, #mainBanner .inquiry-slide .notice-slide p{font-size:14px}
#mainBanner .notice-box li a span{display:none}
#mainBanner .latest-area{gap:10px}
#mainBanner .step-num{padding:3px 7px;font-size:12px}
#mainBanner .pro-slide h2, #mainBanner .pop-slide h3{font-size:18px}
#mainBanner .pro-slide p, #mainBanner .pop-slide p{font-size:13px}
#mainBanner .pro-slide .txt{z-index:1}
#mainBanner .pro-slide li::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(255,255,255,0.1)}
#mainBanner .pro-slide p{display:none}


#mainBanner .pop-slide li{padding:30px 20px 45px;background-size:180px;background-position:center right -20px}
#mainBanner .pop-slide li a{width:36px;height:36px}
#mainBanner .pop-slide li a svg{width:18px;height:18px}
#mainBanner .pop-slide .line-bar{bottom:20px}
#mainBanner .pop-slide li{justify-content:center;text-align:center;background-position:center}
#mainBanner .pop-slide li .txt{display:flex;flex-direction:column;align-items:center}    
}
@media (max-width:390px){
#mainBanner .pro-slide{height:200px}
}
/* 반응형 [e] */