@charset "utf-8";

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

#mainBanner .slide-area{display:flex;justify-content:space-between;margin-top:10px}
#mainBanner .pro-slide{overflow:hidden;width:855px;margin:0;border-radius:5px}
#mainBanner .pro-slide li{position:relative;overflow:hidden}
#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)}
#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}
#mainBanner .pro-slide li.on .txt{opacity:1;transition:all 1.5s}

#mainBanner .pop-slide{position:relative;overflow:hidden;width:290px;height:470px;margin:0;border-radius:5px;color:#fff}
#mainBanner .pop-slide li{padding:50px 30px 0;background-size:cover}
#mainBanner .pop-slide li.pop01{background-image:url('./img/pop01.jpg')}
#mainBanner .pop-slide li.pop02{background-image:url('./img/pop01.jpg')}
#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)}
#mainBanner .pop-slide h3{font-size:25px;font-weight:normal;line-height:1.2;white-space:pre-line;font-family:var(--M-font)}
#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{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 .step-num:before{background:#6478ed}
#mainBanner .notice-box li a{display:flex;justify-content:space-between;font-family:var(--k-font)}
#mainBanner .notice-box li a p{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}