.su21-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 제목 스타일 */
        .su21-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .su21-main-title {
            font-size: 48px; /* 메인 타이틀 크기 - 변경 가능 */
            font-weight: 700;
            color: #000;
            margin-bottom: 10px;
        }

        .su21-sub-title {
            font-size: 18px; /* 서브 타이틀 크기 - 변경 가능 */
            color: #888;
            font-weight: 400;
        }

        /* 캐러셀 컨테이너 */
        .su21-carousel-container {
            position: relative;
            overflow: hidden;
            margin-bottom: 30px;
        }

        .su21-carousel-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .su21-carousel-slide {
            min-width: 50%;
            padding: 0 15px;
        }

        /* 제품 카드 스타일 */
        .su21-product-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .su21-product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
        }

        .su21-product-image {
            width: 100%;
            height: 350px; /* 이미지 높이 - 변경 가능 */
            object-fit: cover;
            display: block;
        }

        .su21-product-info {
            padding: 25px;
            background: linear-gradient(to bottom, #f8f8f8, #ffffff);
        }

        .su21-product-category {
            font-size: 12px; /* 카테고리 폰트 크기 - 변경 가능 */
            text-transform: uppercase;
            color: #666;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        .su21-product-title {
            font-size: 24px; /* 제품명 폰트 크기 - 변경 가능 */
            font-weight: 600;
            color: #333;
        }

        /* 페이지네이션 도트 */
        .su21-pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
			margin-top:40px;
        }

        .su21-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .su21-dot.su21-active {
            background: #333;
        }

        /* 네비게이션 버튼 (선택사항) */
        .su21-nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 15px;
            cursor: pointer;
            font-size: 18px;
            border-radius: 5px;
            z-index: 10;
            transition: background 0.3s ease;
        }

        .su21-nav-button:hover {
            background: rgba(0, 0, 0, 0.7);
        }

        .su21-nav-prev {
            left: 10px;
        }

        .su21-nav-next {
            right: 10px;
        }

        /* 반응형 디자인 */
        @media (max-width: 768px) {
            .su21-main-title {
                font-size: 32px; /* 모바일 메인 타이틀 크기 */
            }

            .su21-sub-title {
                font-size: 14px; /* 모바일 서브 타이틀 크기 */
            }

            .su21-carousel-slide {
                min-width: 100%; /* 모바일에서 한 개씩 표시 */
                padding: 0;
            }

            .su21-product-image {
                height: 250px; /* 모바일 이미지 높이 */
            }

            .su21-product-title {
                font-size: 20px; /* 모바일 제품명 크기 */
            }

            .su21-nav-button {
                display: none; /* 모바일에서 네비게이션 버튼 숨김 */
            }
        }

/* 협력사 모집 */

.fc_pointer {color:#BC0000; }
	.daon_content_wrap{width:100%; min-width:320px; max-width:100%; margin:0 auto;}
	.daon_page_title{width:100%; margin-bottom:40px;}
	.daon_page_title h1{width:100%; margin:0 auto; text-align:center; font-size:2.5em; font-weight:600;}
	.daon_page_title h1:after {content:""; clear:both; display:block; width:30px; margin:10px auto; border:1px solid #000;}
	.daon_page_title h2{width:100%; margin:0 auto; text-align:center; font-size:1.2em; color:#666; margin-top:20px; }

	
	.vision_type4 {width:100%; min-width:320px;  margin:0 auto; }
	.vision_type4:after{content:""; clear:both; display:block;}
	.vision_type4 h2.title {text-align:center; font-size:2em; font-weight:600; color:#333; line-height:1.2em; margin-bottom:40px; }
	.vision_type4 h2.title i{color:#aaa;}

	.vision_type4 .vision_area4 { width:100%; padding:0;  text-align: center; margin-top:50px; overflow:hidden;}
	.vision_type4 .vision_area4::after {content:'';display:table; clear:both;}
    .vision_type4 .vision_area4 li {display:inline-block; padding:0; margin-left:-20px;}
    .vision_type4 .vision_area4 li:first-child {margin-left: 0;} 
    .vision_type4 .vision_area4 .i_box {position:relative; display:inline-block; padding-top:30%; width:15rem; height:15rem; text-align:center; background:rgba(43,129,208,0.9); border-radius:100%; box-sizing: border-box;}
    .vision_type4 .vision_area4 li:nth-child(2n) .i_box {background: rgba(137,137,137,0.65);}
	.vision_type4 .vision_area4 .i_box i {display: inline-block; padding:0; margin:0; font-size:3em; color:#fff;}
    .vision_type4 .vision_area4 .i_box strong {display:block; margin-top:10%; font-size:1.4em; color:#fff; font-weight:500; letter-spacing:-0.03em;}	

	.vision_type4 .con_bg{ width:100%; max-width:100%; margin:60px auto; background:#fcfcfc;}
    .vision_type4 .con_txt { width:100%; max-width:1430px; margin:60px auto; }
	.vision_type4 .con_txt:after{ content:""; display:block; clear:both;}
	.vision_type4 .con_box { float:left; width:49.5%; height:270px; ; margin:45px 0px 25px 0px; text-align:left; overflow:hidden; border-right:1px solid #ddd; }
	.vision_type4 .con_box:nth-child(2n){border-right:0px;}
	.vision_type4 .con_box:after{ content:""; display:block; clear:both;}
	.vision_type4 .con_box .icon { float:left; width:15%; text-align:center; }
	.vision_type4 .con_box .icon i {width:50px; height:50px; line-height:50px; text-align:center; color:#8BCE7B; font-size:2em; }
	.vision_type4 .con_box .info { float:left; width:80%;}
	.vision_type4 .con_box .info .txt_tit { font-size:1.3em; }
	.vision_type4 .con_box .info .txt_list { font-size:0.95em; color:#777; line-height:1.6em; margin-top:20px; }

	/* 애니메이션 CSS 추가 */
	/* 초기 상태 - 요소들을 숨김 */
	.title, .busi_cont, .vision_area4, .i_box, .con_box {
		opacity: 0;
	}
	
	/* title 애니메이션 - 아래에서 위로 */
	.title {
		transform: translateY(50px);
	}
	.title.animate-in {
		animation: slideInUp 0.8s ease-out forwards;
	}
	
	/* busi_cont 애니메이션 - 아래에서 위로 */
	.busi_cont {
		transform: translateY(50px);
	}
	.busi_cont.animate-in {
		animation: slideInUp 1s ease-out forwards;
	}
	
	/* vision_area4 애니메이션 - 아래에서 위로 */
	.vision_area4 {
		transform: translateY(50px);
	}
	.vision_area4.animate-in {
		animation: slideInUp 0.8s ease-out forwards;
	}
	
	/* i_box 애니메이션 - 오른쪽에서 왼쪽으로 */
	.i_box {
		transform: translateX(100px);
	}
	.i_box.animate-in {
		animation: slideInLeft 0.6s ease-out forwards;
	}
	
	/* con_box 왼쪽 요소 - 왼쪽에서 오른쪽으로 */
	.con_box:nth-child(odd) {
		transform: translateX(-100px);
	}
	.con_box:nth-child(odd).animate-in {
		animation: slideInRight 0.8s ease-out forwards;
	}
	
	/* con_box 오른쪽 요소 - 오른쪽에서 왼쪽으로 */
	.con_box:nth-child(even) {
		transform: translateX(100px);
	}
	.con_box:nth-child(even).animate-in {
		animation: slideInLeft 0.8s ease-out forwards;
	}
	
	/* 애니메이션 키프레임 정의 */
	@keyframes slideInUp {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes slideInLeft {
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	@keyframes slideInRight {
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	/* i_box 순차적 애니메이션 딜레이 */
	.vision_area4 li:nth-child(1) .i_box.animate-in {
		animation-delay: 0.2s;
	}
	.vision_area4 li:nth-child(2) .i_box.animate-in {
		animation-delay: 0.4s;
	}
	.vision_area4 li:nth-child(3) .i_box.animate-in {
		animation-delay: 0.6s;
	}
	.vision_area4 li:nth-child(4) .i_box.animate-in {
		animation-delay: 0.8s;
	}
	
	/* con_box 순차적 애니메이션 딜레이 */
	.con_box:nth-child(1).animate-in {
		animation-delay: 0.2s;
	}
	.con_box:nth-child(2).animate-in {
		animation-delay: 0.3s;
	}
	.con_box:nth-child(3).animate-in {
		animation-delay: 0.4s;
	}
	.con_box:nth-child(4).animate-in {
		animation-delay: 0.5s;
	}

	@media screen and (max-width: 992px){

		.daon_content_wrap{width:100%;}
		.daon_page_title{margin-bottom:50px;}	
		.daon_page_title h1{font-size:2em;}
		.daon_page_title h2{font-size:1em;}

		.vision_type4 h2.title { font-size:1.5em; }
		.vision_type4 span.stitle{font-size:1em; width:90%;}

	}

	@media screen and (max-width: 768px){

		.vision_type4 .vision_area4 li {float:left; width:50%; padding:0; margin:0; margin-bottom:5%; }
		.vision_type4 .vision_area4 li:nth-child(even) {margin-left: 0;} 
		.vision_type4 .vision_area4 li:last-child {margin-bottom:0;}
		.vision_type4 .vision_area4 .i_box {  padding-top:25%; }
		.vision_type4 .vision_area4 .i_box strong { font-size:2em;}

		.vision_type4 .con_box { float:left; width:100%; height:auto; padding-bottom:50px; padding-left:0px;  border-bottom:1px solid #ddd; border-right:0px;}
		.vision_type4 .con_box:last-child { border-bottom:0;}
		
		/* 모바일에서 con_box 애니메이션 조정 */
		.con_box:nth-child(odd),
		.con_box:nth-child(even) {
			transform: translateY(50px);
		}
		.con_box:nth-child(odd).animate-in,
		.con_box:nth-child(even).animate-in {
			animation: slideInUp 0.8s ease-out forwards;
		}
	
	}


	@media screen and (max-width: 480px) {		
		
		.vision_type4 h2.title br{ display:inline !important; }
		.vision_type4 .vision_area4 li { width:100%; }
		.vision_type4 .vision_area4 .i_box {padding-top:12%; width:12rem; height:12rem; }
		.vision_type4 .vision_area4 .i_box strong { font-size:1.5em;}

	}


	.vision_type4 .busi_cont {width:100%; max-width:1500px; margin:0 auto;}
	.vision_type4 .info_box { width:100%; margin:0 auto;}
	.vision_type4 .info_box:after{ content:""; display:block; clear:both;}
	.vision_type4 .info_box .txts {display:block; font-size:0.95em; color:#333; line-height:1.6em;  margin-bottom:50px;}
	.vision_type4 .info_box .txts strong {color:#4165c3;} 
	.vision_type4 .info_box .img_50 {float:left; width:49%; margin-right:2%; margin-bottom:0;}	
	.vision_type4 .info_box .img_50:last-child {float:right; margin-right:0;} 
	.vision_type4 .info_box .img_50 img {max-width:100%;}	
	.vision_type4 .info_box .img_50 p { margin-top:15px; font-size:1.25em; text-align:center;}
	.vision_type4 .info_box dl strong {display:block; font-size:1.85em; color: #000; margin-bottom:30px;  }
	.vision_type4 .info_box dl dd{ position:relative; font-size:1em; color: #000;  padding-left:15px;  text-align:left; margin-top:5px; }
	.vision_type4 .info_box dl dd:before { content: ''; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; background-color:#017ece; border-radius: 50%;}	
	.vision_type4 h3.con_tit {display:block; font-size:1.85em; font-weight:700; line-height:1.5em;  margin:50px auto 25px;}
	


	@media all and (max-width:1024px){
		.vision_type4 .busi_cont {padding:0 4%;}	
		
	}

	@media all and (max-width:992px){		
				
	}
	
	@media all and (max-width:860px){
		.vision_type4 .busi_top .img_box_all {padding-bottom:0px; }
		.vision_type4 .busi_top .img_box_all .con_area {padding:0 4%;}
		.vision_type4 .busi_top .img_box_all .con_area ul li{ width:49%; margin-right:2%; margin-bottom:1.5%;}		
		.vision_type4 .busi_top .img_box_all .con_area ul li:nth-child(4n){margin-right:2%;}	
		.vision_type4 .busi_top .img_box_all .con_area ul li:nth-child(2n){margin-right:0;}
		.vision_type4 .busi_top .img_box_all .con_area ul li .txt_box{ top:20%;}
		.vision_type4 .busi_top .img_box_all .con_area ul li p{ font-size:1.25em; }
		.vision_type4 .scroll{display:block;}
	}

	@media all and (max-width:640px){
		.vision_type4 .info_box .txts {font-size:1em;}
		.vision_type4 .info_box .img_50 {width:100%; margin-bottom:10px;}
		
	}

	@media all and (max-width:480px){
		.vision_type4 h3.con_tit { font-size:1.5em;}
		.vision_type4 .busi_top .img_box_all .con_area ul li{ width:100%; text-align:center; height:auto; margin-right:0;}
	}