/* BASIC css start */
#footer{margin-top:0 !important}
.section :is(*){box-sizing:border-box}
/* 메인 섹션 공통 */
.section:not(#sec1,#sec11){margin-bottom: 20px;}
.sec_inner{padding:0 5%}
.sec_inner.padding0{padding:0}
.sec_inner.padding0 .item_list .info{padding:13px 5%}
.sec_inner.padding0 .sec_cate{padding:0 5%}
.section .sec_cate{margin-bottom: 25px; display: flex; justify-content: space-between; flex-wrap:wrap; flex-direction:column; gap:30px;}
.section h2{font-family: 'Noto Sans KR', sans-serif; font-size: 26px; color: #000; font-weight: 600;}
.section h2.mb10{margin-bottom:10px;}
.section .sec_cate ul{display:flex; justify-content:left ; gap: 20px;}
.section .sec_cate ul li{}
.section .sec_cate ul li a{font-family: 'Noto Sans KR', sans-serif; display:block; width:100%;  color:#aaaaaa; font-size: 14px; font-weight:500; letter-spacing: -.3px;transition: all .3s; position:relative;  display:block;}
.section .sec_cate ul li.on>a{ color: #000 !important; }
.section .sec_prd>div{display: none; position:relative;}
.section .sec_prd>div.show{display: block;}
.section .prd_more_btn{text-align:center; margin-top:40px;}
.section .prd_more_btn>a {display:inline-block;font-family: 'Noto Sans KR', sans-serif;display:inline-block; border:1px solid #000; padding:10px 0px; width:80%  }
.section .prd_more_btn>a button.btn_moreGray{background-color:#fff !important; color:#000; font-size:15px; font-weight:400; width:100%; }

.txt_area p.sub {color: #fff; line-height: 1.6;font-family: 'Noto Sans KR', sans-serif; font-weight: 400;transition: all .4s; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 0px 0px 8px rgba(0, 0, 0, 0.6); }
.txt_area p.big { color: #fff; font-weight: 500;line-height: 1.3; font-family: 'Noto Sans KR', sans-serif; transition: all .5s; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 0px 0px 8px rgba(0, 0, 0, 0.6); }



/* ==========================================================================
   메이크샵 모바일 배너 텍스트 - 가독성 향상 & 무한 색상 변경 애니메이션
   ========================================================================== */

/* 1. 색상 전환 애니메이션 키프레임 정의 */
@keyframes colorChangeSequence {
    0% {
        color: #FFFFFF; /* 흰색 */
    }
    33% {
        color: #2ECC71; /* 눈이 편안하고 선명한 초록색 */
    }
    66% {
        color: #FF8C00; /* 가독성이 높은 주황색(다크 오렌지) */
    }
    100% {
        color: #FFFFFF; /* 다시 흰색으로 연결 */
    }
}

/* 2. 대상 텍스트 클래스에 애니메이션 및 그림자 적용 */
/* (사용 중인 텍스트 클래스명으로 선택자를 맞춰주세요 예: .txt_area p.big 또는 .txt_area p) */
#sec10 .sec_inner ul li .txt_area p.big1,
#sec10 .sec_inner ul li .txt_area p.sub1,
.banner_txt_style {


    /* 3초 동안 무한 반복(infinite) 되며 부드럽게(ease-in-out) 전환 */
    animation: colorChangeSequence 3s ease-in-out infinite;
    
    /* [가독성 핵심] 글자 테두리에 어두운 그림자를 부여하여 복잡한 배경에서도 글자가 또렷하게 보임 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 
                 0px 0px 8px rgba(0, 0, 0, 0.6);
                 
    font-weight: 700; /* 글자 두께를 두껍게 가져가면 가독성이 극대화됩니다 */
    word-break: keep-all; /* 한글 단어 단위 자동 줄바꿈 설정 */
}


.txt_area a.more{width:auto; font-family: 'Montserrat', sans-serif;display: inline-block; transition: all .4s;border: 1px solid #fff;color: #fff; margin-top: 8px;font-weight: 400;padding:  8px 20px; }



/* sec1 */
#sec1{margin-bottom:70px}
#sec1 .swiper{}
#sec1 .swiper ul{}
#sec1 .swiper ul li{}
#sec1 .swiper ul li>a{display: block; width: 100%;}
#sec1 .swiper ul li>a>img{width: 100%; }
#sec1 .swiper ul li .txt_area{overflow: visible; position: absolute;  left: 0%; top: 20%;transform:translateY(-50%); padding-left: 38%; max-width: 100%;}
#sec1 .swiper ul li .txt_area p{opacity: 0;}
#sec1 .swiper ul li.swiper-slide-active .txt_area p{transform: translateY(25px); opacity: 1;}
#sec1 .swiper ul li.swiper-slide-active .txt_area a.more{transform: translateY(35px); opacity: 1;}



/* ===================================================
   [모바일 메인 배너] 가독성 & 반응형 Fluid Typography 통합 코드
=================================================== */

/* 1. 상단 서브 카피 (예: 리튬 지게차의 모든 것!) */
#sec1 .swiper ul li .txt_area p.sub {
    font-size: clamp(13px, 3.8vw, 15px); /* 화면 폭에 따라 13px ~ 15px 가변 */
    font-weight: 500;                    /* 가독성을 위해 400 -> 500 약간 두껍게 조정 */
    line-height: 1.4;                    /* 모바일 줄간격 최적화 */
    margin-bottom: 10px;
    color: #ffffff !important;           /* 흰색 고정 */
    text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.85); /* 밝은 배경 대비 검은색 그림자 */
    word-break: keep-all;                /* 단어 단위 자동 줄바꿈 */
    transition: all .4s;
    transition-delay: .25s;
}

/* 2. 메인 헤드라인 타이틀 (예: 고객의 현장에 딱 맞는 최적의 솔루션을 제안합니다!) */
#sec1 .swiper ul li .txt_area p.big {
    font-size: clamp(18px, 5.5vw, 28px); /* 화면 폭에 따라 18px ~ 28px 가변 */
    line-height: 1.35;                   /* 답답함 없는 쾌적한 줄간격 */
    color: #ffffff !important;           /* 흰색 고정 */
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.9);  /* 진한 그림자 투과 */
    word-break: keep-all;                /* '다!' 같은 한 글자 튀어남 방지 */
    transition: all .5s;
    transition-delay: .42s;
}





#sec1 .swiper ul li .txt_area a.more{
    font-size: clamp(13px, 4vw, 17px);
    display: inline-block;
    padding: 10px 22px;
    margin-top: 14px;
    color: #ffffff !important;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    opacity: 1;
    transition: all .3s;
    transition-delay: .98s;
    animation: btnColorLoop 3s ease-in-out infinite;
}

@keyframes btnColorLoop {
    0%, 27%   { background-color: #138A48; }
    33%, 60%  { background-color: #ff0000; }
    66%, 93%  { background-color: #FF6B00; }
    100%      { background-color: #138A48; }
}






/* 강조 텍스트 포인트 컬러 (필요 시 p.sub 또는 p.big 내부 <span> 적용) */
#sec1 .swiper ul li .txt_area .highlight {
    color: #FF6B00 !important;
    font-weight: bold;
}





#sec1 .swiper-pagination{bottom: 32px; top: unset; left:8%; width:84%; height:2px; }
#sec1 .swiper-pagination-progressbar{background-color:rgb(0 0 0 / 29%);}
#sec1 .swiper-pagination-progressbar-fill{background-color: #fff;}

#sec2 .swiper{padding-bottom:50px;}
#sec2 .swiper-pagination{bottom: 0px; top: unset; left:14%; width:72%; height:1px; }
#sec2 .swiper-pagination-progressbar-fill{background-color: #000;}


/* ===================================================
   [서브 배너 이미지] 모바일 세로 높이 자동 보정 코드
=================================================== */

#sec8 {
    width: 100%;
    overflow: hidden;
}

#sec8 a {
    display: block;
    width: 100%;
}

#sec8 a img {
    width: 100%;
    /* 모바일 화면 폭에 따라 최소 160px에서 최대 320px까지 자연스럽게 조정 */
    height: clamp(160px, 45vw, 320px); 
    /* 비율을 유지하면서 영역을 꽉 채우고, 넘치는 좌우는 깔끔하게 자름 */
    object-fit: cover; 
    /* 이미지 중심을 기준으로 보여줌 */
    object-position: center; 
}



/* sec5 */
#sec5{}
#sec5 .sec_inner{}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap{}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap>ul{margin-top:15px; opacity:0; transition:all .3s}
#sec5 .sec_inner .swiper .sec5_prd>div.swiper-slide-active .sec5_wrap>ul{opacity:1}
#sec5 .sec_inner .swiper{}
#sec5 .sec_inner .swiper .sec5_prd>div{width: 90%;}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban{}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban{}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul{}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li{position:relative;}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li>a{display: block;width: 100%;}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li>a img{width: 100%;}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li .txt_area{overflow: visible; position: absolute;  left: 0%;bottom: 0px; padding-left: 30px; max-width: 90%;}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li .txt_area p{opacity: 0}
#sec5 .sec_inner .swiper .sec5_prd>div.swiper-slide-active .sec5_wrap .sec5_ban ul li .txt_area p{transform: translateY(-25px); opacity: 1;}
#sec5 .sec_inner .swiper .sec5_prd>div.swiper-slide-active .sec5_wrap .sec5_ban ul li .txt_area a.more{transform: translateY(-35px); opacity: 1;}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li .txt_area p.big{font-size: 30px; font-family: 'Montserrat', sans-serif; transition-delay: .25s;}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li .txt_area p.sub{ font-size: 15px;  margin-bottom: 30px; transition-delay: .46s;}
#sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li .txt_area a.more{ transition-delay: .6s; font-size: 11px; padding:2px 7px;opacity: 0}
#sec5 .item_list{border-bottom: 1px solid #e8e8e8; display: flex; padding: 8px 0;}
#sec5 .item_list .thumb{width: 20%;}
#sec5 .item_list .info{width: 80%; padding-left:15px; padding-top:0}
#sec5 .item_list .info .price{font-size:15px; font-weight:500;}


/* sec8 */
#sec8{}
#sec8 a{display: block;width: 100%;}
#sec8 a img{width: 100%; height:auto; }

/* sec9 */
#sec9{}
#sec9 .sec_inner{}
#sec9 .sec_inner .sec_cate{}
#sec9 .sec_inner .sec_cate h2{}
#sec9 .sec_inner .sec9_wrap{}
#sec9 .sec_inner .sec9_wrap .video_area>ul{}
#sec9 .sec_inner .sec9_wrap .video_area>ul>li{width:90%;}
#sec9 .sec_inner .sec9_wrap .video_area>ul>li>div.ytb_wrap{ position:relative;}
#sec9 .sec_inner .sec9_wrap .video_area>ul>li>div.ytb_wrap img {width:100%;}
#sec9 .sec_inner .sec9_wrap .video_area>ul>li iframe{ position:absolute;top:0;left:0}
#sec9 .sec_inner .sec9_wrap .video_area>ul>li.swiper-slide-active .video_info{opacity:1}
#sec9 .sec_inner .sec9_wrap .video_area>ul>li .video_info{padding: 15px 0; display: flex; flex-direction: column; gap: 11px; width:90%; opacity:0; transition:all .3s}
#sec9 .sec_inner .sec9_wrap .video_area>ul>li .video_info h3{font-family: 'Noto Sans KR', sans-serif; font-size: 18px; line-height: 1.3;font-weight: 500;}
#sec9 .sec_inner .sec9_wrap .video_area>ul>li .video_info p{font-family: 'Noto Sans KR', sans-serif;color: #aaaaaa; font-size: 14px;line-height: 1.3; font-weight: 400;}

#sec10{}
#sec10 .sec_inner{}
#sec10 .sec_inner ul{display: flex; flex-wrap: wrap; gap: 20px;}
#sec10 .sec_inner ul li{position: relative;flex-grow: 1;}
#sec10 .sec_inner ul li>a{display: block;width: 100%;}
#sec10 .sec_inner ul li>a>img{width: 100%;}



/* ==========================================================================
   #sec10 모바일/스마트기기 반응형 가변 폰트 & 위치 최적화 소스
   ========================================================================== */

/* 1. 텍스트 영역 수직/수평 중앙 정렬 및 여백 확보 */
#sec10 .sec_inner ul li .txt_area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* X축, Y축 완벽한 중앙 정렬 */
    width: 90%;                        /* 스마트폰 화면에서도 양옆 여백 안전 확보 */
    max-width: 47%;                    /* PC 대화면 해상도 제한 */
    text-align: center;                /* 중앙 정렬 기준 */
    box-sizing: border-box;
}

/* 2. 기본 텍스트 공통 애니메이션 설정 */
#sec10 .sec_inner ul li .txt_area p {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

/* 3. 메인 타이틀 (big) : 최소 16px ~ 최대 22px 사이로 유연하게 변화 */
#sec10 .sec_inner ul li .txt_area p.big {
    font-size: clamp(16px, 2.2vw, 22px);
    font-weight: 600;
    margin-bottom: 0.8em;               /* px 대신 상대 단위 em 사용으로 폰트 크기 비례 여백 적용 */
    line-height: 1.3;
    word-break: keep-all;              /* 한글 단어 단위 줄바꿈 유지 */
    transition-delay: .1s;
}

/* 4. 서브 타이틀 (sub) : 최소 11px ~ 최대 13px 사이로 유연하게 변화 */
#sec10 .sec_inner ul li .txt_area p.sub {
    font-size: clamp(11px, 1.4vw, 13px);
    margin-bottom: 1.2em;
    line-height: 1.4;
    word-break: keep-all;
    transition-delay: .37s;
}

/* 5. 더보기 버튼 (more) : 최소 11px ~ 최대 12px 유연 적용 및 클릭 영역 확보 */
#sec10 .sec_inner ul li .txt_area a.more {
    display: inline-block;
    font-size: clamp(11px, 1.2vw, 12px);
    opacity: 0;
    transition: all 0.5s ease-in-out;
    transition-delay: .58s;
}

/* 6. 모션 애니메이션 (act 클래스 추가 시 동작) */
#sec10.act .sec_inner ul li .txt_area p {
    transform: translateY(0);          /* 위치 튀는 현상 방지 */
    opacity: 1;
}

#sec10.act .sec_inner ul li .txt_area a.more {
    transform: translateY(0);
    opacity: 1;
}



/* sec11 */
#sec11{}
#sec11 .sec11_wrap{position: relative; padding-bottom:20px; }

#sec11 .sec11_wrap>a{display: block;width: 100%;}
#sec11 .sec11_wrap>a img{width: 100%;}
#sec11 .sec11_wrap .txt_area{position: absolute; top: 42%; transform: translateY(-50%); right:0; max-width:85%;padding-right:5%}
#sec11 .sec11_wrap .txt_area p{color: #fff;font-family: 'Kumbh Sans', sans-serif; font-size: 25px; font-weight: 600; line-height: 1.2;}
#sec11 .sec11_wrap .txt_area a{color: #fff;font-family: 'Montserrat', sans-serif;margin-top: 5px; transition: all .4s;display: inline-block; transition-delay: .7s; border: 1px solid #fff ;padding:  4px 10px; color: #fff; font-size: 12px; font-weight: 400; }
/* BASIC css end */