@charset "utf-8";

#inc01{padding:205px 0 150px;background:#f2f2f2}

/* tit */
#inc01 .tit_area{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:105px}

/* controls */
#inc01 .wrap{display:flex;align-items:center;justify-content:space-between;max-width:var(--mainsize);margin:0 auto 50px}
#inc01 .control{display:flex;align-items:center;justify-content:center;gap:30px;font-size:24px}
#inc01 .control > span{color:var(--primary);opacity:0.3;cursor:pointer;transition:0.2s}

/* pager */
#inc01 .pager{display:flex;align-items:center;gap:10px;position:relative}
#inc01 .pager span{width:13px;height:4px;border-radius:0;background:var(--primary);opacity:0.3;cursor:pointer}
#inc01 .pager span.active{opacity:1}

/* slide */
#inc01 .swiper-wrapper > li{width:1400px;position:relative}
#inc01 .swiper-wrapper > li a{width:100%;height:100%}
#inc01 .swiper-wrapper > li .txt{opacity:1;position:absolute;bottom:0;z-index:1;width:100%;height:100%;background:rgba(0, 0, 0, 0);transition:all .3s}
#inc01 .swiper-wrapper > li .txt b{font-size:15px;color:#fff;font-weight:700;font-family:var(--main-font)}
#inc01 .swiper-wrapper > li .txt h3{padding:20px 0 10px;font-size:25px;color:#fff;font-weight:700;font-family:var(--main-font)}
#inc01 .swiper-wrapper > li .txt > div{position:absolute;bottom:75px;left:80px;opacity:0;transition:all .3s}
#inc01 .swiper-wrapper > li .txt > div > div{font-size:15px;color:#fff;word-break:keep-all}

/* benefit */
.benefit{max-width:var(--mainsize);margin:125px auto 0}
.benefit .sub_tit h2{padding-bottom:115px;font-size:35px;font-weight:700;line-height:1.4;color:#111;opacity:0.1;word-break:keep-all}
.benefit .sub_tit b{font-size:15px;font-weight:700;color:var(--primary);font-family:var(--main-font)}
.benefit .list{display:flex;align-items:baseline;justify-content:flex-end;gap:65px;padding:105px 0 0 320px}
.benefit .list li dl dt{padding:30px 0 15px;margin-bottom:25px;border-bottom:1px solid #e1e1e1;font-size:20px;font-weight:700;color:#222}
.benefit .list li{width:100%}
.benefit .list li dl dd{position:relative;padding-left:18px;font-size:15px;word-break:keep-all}
.benefit .list li dl dd::before{content:"";display:inline-block;position:absolute;top:11px;left:0;width:3px;height:3px;border-radius:100%;background:#777}

/* 반응형 [s] */
@media (hover:hover){
#inc01 .control > span:hover{opacity:1}
#inc01 .swiper-wrapper > li:hover .txt{background:rgba(0, 0, 0, 0.4)}
#inc01 .swiper-wrapper > li:hover .txt > div{opacity:1}
}
@media (max-width:1400px){
#inc01{padding:205px 5% 150px}
#inc01 .tit_area{width:100%}
#inc01 .inc01_slide{width:100%;height:500px}
#inc01 .swiper-wrapper > li{width:100%}
#inc01 .swiper-wrapper > li a img{width:100%;height:100%;object-fit:cover}
.benefit .list{padding:95px 0 0 260px}
}
@media (max-width:1024px){
#inc01{padding:120px 2.5% 100px}
#inc01 .tit_area{padding-bottom:80px}
#inc01 .tit_area span{width:40%;text-align:end}
#inc01 .wrap{margin-bottom:40px}
#inc01 .control{font-size:unset}
#inc01 .control > span{height:23px}
#inc01 .control > span svg{width:23px;height:23px}
#inc01 .inc01_slide{height:420px}
#inc01 .swiper-wrapper > li .txt > div{bottom:10%;left:50%;transform:translateX(-50%);width:90%}
#inc01 .swiper-wrapper > li .txt h3{font-size:22px}
.benefit{margin:100px auto 0}
.benefit .sub_tit h2{padding-bottom:100px;font-size:26px;text-align:center}
.benefit .sub_tit b{display:block;text-align:center}
.benefit .list{align-items:flex-end;gap:35px;padding:80px 0 0 0;gap:45px}
.benefit .list li{text-align:center}
.benefit .list li img{width:32px}
.benefit .list li dl{display:flex;flex-direction:column;align-items:center}
.benefit .list li dl dt{padding:25px 0 10px;margin-bottom:20px;width:100%;font-size:18px}
.benefit .list li dl dd{width:max-content}
.benefit .list li dl dd+dd{margin-top:5px}

}
@media (max-width:768px){
#inc01{padding:100px 2.5% 80px}
#inc01 .tit_area{flex-direction:column;align-items:center;padding-bottom:50px}
#inc01 .tit_area div{width:100%;text-align:center}
#inc01 .tit_area div h2{margin:auto;width:80%}
#inc01 .tit_area span{margin-top:30px;width:100%;text-align:center}
#inc01 .wrap{justify-content:center;flex-direction:column;gap:30px;margin-bottom:45px}
#inc01 .pager{display:none}
#inc01 .inc01_slide{height:380px}
#inc01 .swiper-wrapper > li .txt{background:rgb(0, 0, 0, 0.5) !important}
#inc01 .swiper-wrapper > li .txt > div{opacity:1;bottom:50%;transform:translate(-50%, 50%);text-align:center}
#inc01 .swiper-wrapper > li .txt h3{padding:20px 0 15px;font-size:20px}
#inc01 .swiper-wrapper > li .txt b{font-size:14px}
.benefit{margin:70px auto 0}
.benefit .sub_tit h2{padding-bottom:70px;margin:auto;width:80%;font-size:23px;white-space:normal}
.benefit .list{padding-top:70px;gap:30px}
.benefit .list li img{width:28px}
.benefit .list li dl dt{padding:20px 0 8px;margin-bottom:12px;font-size:17px}
.benefit .list li dl dd{padding-left:12px}
}
@media (max-width:580px){
.benefit .list{flex-wrap:wrap;gap:20px;padding-top:40px;}
.benefit .list li{padding:30px 0;border:1px solid #e1e1e1}
.benefit .list li:nth-child(-n+2){width:calc(50% - 10px)}
.benefit .list li dl dd{padding-left:8px}
}
@media (max-width:480px){
#inc01{padding:70px 2.5% 60px}
#inc01 .tit_area{padding-bottom:40px}
#inc01 .tit_area div h2{width:95%}
#inc01 .tit_area span{margin-top:25px}
#inc01 .wrap{margin-bottom:35px}
#inc01 .inc01_slide{height:350px}
#inc01 .swiper-wrapper > li .txt h3{padding:10px 0 8px;font-size:18px}
#inc01 .swiper-wrapper > li .txt > div > div{font-size:14px}
.benefit{margin:60px auto 0}
.benefit .sub_tit h2{padding-bottom:60px;width:95%;font-size:19px}
.benefit .list{flex-direction:column;gap:12px}
.benefit .list li{padding:20px 0}
.benefit .list li:nth-child(-n+2){width:100%}
.benefit .list li img{width:25px}
.benefit .list li dl dt{padding:10px 0 8px;margin-bottom:8px;font-size:16px}
.benefit .list li dl dd{font-size:14px}
.benefit .list li dl dd+dd{margin-top:3px}
}
@media (max-width:380px){
#inc01 {padding:60px 2.5% 50px}
#inc01 .tit_area{padding-bottom:30px}
#inc01 .tit_area span{margin-top:20px}
#inc01 .control{gap:25px}
#inc01 .control > span svg{width:21px;height:21px}
#inc01 .wrap{margin-bottom:30px}
#inc01 .inc01_slide{height:310px}
#inc01 .swiper-wrapper > li .txt b{font-size:13px}
#inc01 .swiper-wrapper > li .txt h3{padding:8px 0 6px;font-size:16px}
#inc01 .swiper-wrapper > li .txt > div > div{font-size:13px}
.benefit{margin:50px auto 0}
.benefit .sub_tit h2{padding-bottom:50px;font-size:17px}
.benefit .sub_tit b{font-size:14px}
.benefit .list{padding-top:30px}
.benefit .list li{padding:15px 0}
.benefit .list li img{width:23px}
.benefit .list li dl dt{padding:8px 0 6px;margin-bottom:6px;font-size:15px}
.benefit .list li dl dd{font-size:13px}
}
/* 반응형 [e] */
