@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;padding:0 80px;width:100%}

/* 텍스트 */
#mainVisual .main_txt{display:flex;align-items:flex-end;padding:91px 0 73px;color:#000;font-family:'Cabin', 'Pretendard'}
#mainVisual .main_txt .txt01{font-size:80px;font-weight:700;line-height:1.1}
#mainVisual .main_txt .txt01 img{position:relative;top:-12px}
#mainVisual .main_txt .txt02{position:relative;margin-left:127px;padding:0 0 16px 48px;font-size:16px;line-height:1.62;white-space:pre-line}
#mainVisual .main_txt .txt02:before{position:absolute;left:0;top:2px;content:'';width:17px;height:18px;background:url('./point_dot.png') no-repeat center}
#mainVisual .main_txt .txt02 a{display:block;margin-top:29px;font-size:17px;font-weight:700;white-space:normal}
#mainVisual .main_txt .txt02 a span{display:inline-block;overflow:hidden;position:relative;width:12px;height:12px;margin-left:16px}
#mainVisual .main_txt .txt02 a span img{position:absolute;transition:all .3s cubic-bezier(0.22, 1, 0.36, 1)}
#mainVisual .main_txt .txt02 a span img.off{left:0;top:0}
#mainVisual .main_txt .txt02 a span img.on{left:-22px;top:22px}

/* 스와이퍼 */
#mainVisual .main_slide{width:100%;height:500px}
#mainVisual .main_slide ul{height:100%}
#mainVisual .main_slide ul li{width:100%;height:100%;background:center no-repeat;background-size:cover}
#mainVisual .main_slide ul li.bg01{background-image:url('./main01.jpg')}
#mainVisual .main_slide ul li.bg02{background-image:url('./main02.jpg')}
#mainVisual .main_slide ul li.bg03{background-image:url('./main03.jpg')}

/* 사업분야 */
#mainVisual .business_line{display:flex;justify-content:center;column-gap:20px;margin-top:60px}
#mainVisual .business_line li{overflow:hidden;border-radius:50px}
#mainVisual .business_line li a{display:block;padding:0 20px;font-size:16px;line-height:50px;font-weight:700;color:#000;background:#fff;transition:all .2s;font-family:'Cabin', sans-serif}

/* 모바일 호버 X */
@media (hover: hover) {
#mainVisual .main_txt .txt02 a:hover span img.off{left:22px;top:-22px}
#mainVisual .main_txt .txt02 a:hover span img.on{left:0;top:0}
#mainVisual .business_line li a:hover{color:#fff;background:var(--primary)}
}

/* 반응형 [s] */
@media (max-width:1600px){
#mainVisual .main_txt .txt01{font-size:65px}
}
@media (max-width:1430px){
#mainVisual{padding:0 50px}
#mainVisual .main_txt{justify-content:space-between}
#mainVisual .main_txt .txt01 img{top:-8px;height:55px}
#mainVisual .main_txt .txt02{margin-left:0;font-size:15px}
}
@media (max-width:1230px){
#mainVisual{padding:0 30px}
#mainVisual .main_txt{padding:80px 0 65px;column-gap:50px}
#mainVisual .main_txt .txt01{font-size:55px;white-space:nowrap}
#mainVisual .main_txt .txt01 img{height:45px}
#mainVisual .main_txt .txt02{padding-bottom:0;white-space:normal;word-break:keep-all}
#mainVisual .main_txt .txt02 a{margin-top:25px;font-size:15px}
#mainVisual .main_slide{height:460px}
#mainVisual .business_line li a{font-size:15px;line-height:40px}
}
@media (max-width:1024px){
#mainVisual{padding:0 15px}
#mainVisual .main_txt{display:block;overflow:hidden;padding:60px 0 50px}
#mainVisual .main_txt .txt01{font-size:60px}
#mainVisual .main_txt .txt02{float:right;max-width:420px;margin-top:30px}
#mainVisual .main_slide{height:380px}
#mainVisual .business_line{column-gap:15px;margin-top:40px}
}
@media (max-width:768px){
#mainVisual .main_txt .txt01{font-size:40px}
#mainVisual .main_txt .txt01 img{top:-5px;height:35px}
#mainVisual .main_txt .txt02{float:none}
#mainVisual .main_txt .txt02 a{margin-top:20px}
#mainVisual .main_slide{height:340px}
#mainVisual .business_line{flex-wrap:wrap;gap:10px;margin-top:35px}
#mainVisual .business_line li a{font-size:14px;white-space:nowrap}
}
@media (max-width:480px){
#mainVisual{padding:0}
#mainVisual .main_txt{padding:40px 15px 50px}
#mainVisual .main_txt .txt01{font-size:30px}
#mainVisual .main_txt .txt01 img{top:-3px;height:25px}
#mainVisual .main_txt .txt02{padding-left:30px;font-size:14px}
#mainVisual .main_txt .txt02:before{top:5px;width:12px;height:12px;background-size:contain}
#mainVisual .main_txt .txt02 a{font-size:13px}
#mainVisual .main_txt .txt02 a span{top:2px;width:10px}
#mainVisual .main_txt .txt02 a span img{height:10px}
#mainVisual .main_slide{height:210px}
#mainVisual .business_line{margin-top:30px;padding:0 15px}
#mainVisual .business_line li{width:calc(100%/2 - 5px)}
#mainVisual .business_line li a{padding:0 15px;font-size:13px;line-height:35px;text-align:center}
}
@media (max-width:380px){
#mainVisual .main_txt{padding:30px 15px 40px}
}
@media (max-width:350px){
#mainVisual .main_txt .txt01{white-space:pre-line}
}
/* 반응형 [e] */