

.wrap{width: 100%;}
.inner{ width: 80%; margin: auto;}
.inner .main_nav{ width: 100%; margin: auto;}
.main-sub-text{margin:-150px 0 150px 0;}
.title{font-family: 'GmarketSansBold'; left: 60%; font-size: 50px; text-align: left; color: #000; text-transform: uppercase;}
.title-explanation{font-size: 20px; text-align: left; color: #000; word-break: keep-all;}
.sub_small{font-size: 15px; text-align: left; color: #fff; word-break: keep-all; margin:0 0 20px 0;}
.verLine{display:block;width: 1px; height: 60px; background-color: #fff;}
.moreBtn{display: flex; align-items: center;}
.moreBtn span{font-family: 'GmarketSansMedium'; font-size: 16px; text-align: left; color: #1e2087;}
.moreBtn img{margin-left: 12px;}

/* ============================================================================================================================================================ */
/*.main__section01{position: relative; height: 1080px;}*/
.main__section01 {
    position: relative; 
    width: 100%;
    height: 100vh; /* 모바일에서도 화면 전체를 채움 */
    overflow: hidden;
}

.main__section01 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* 가로 전체를 채움 */
    height: 100vh; /* 세로 전체를 채움 */
    object-fit: cover;
    z-index: 1;
}

.wrap {
    position: relative; /* 나머지 콘텐츠는 동영상 위에 표시 */
    z-index: 1; /* 동영상 위에 콘텐츠가 보이도록 설정 */
    
}

.main__section01 .camera_wrap{width: 100%; height: 100% !important;}
.main__section01 .camera_wrap_con{width: 100%; height: 100%}
.main__section01 .camera_prev{background: url('../img/main/btn-prev.png') no-repeat center/cover; left: 50px; opacity: 1 !important;}
.main__section01 .camera_next{background: url('../img/main/btn-next.png') no-repeat center/cover; right: 50px; opacity: 1 !important;}
/*.main__section01 .camera_commands > .camera_stop{background: url('../img/main/btn_stop.png') no-repeat; height: 9px; width: 12px; right: 100px;}*/
.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next, .camera_commands, .camera_thumbs_cont{background-color: transparent;}
.camera_prev, .camera_next, {display: flex; align-items: center; justify-content: center;}
/*.camera_commands{right: 100px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4);}*/

/* .main__section01 .slide01{background: url('../img/main/visual_01.png') no-repeat center; background-size: cover;}
.main__section01 .slide02{background: url('../img/main/visual_02.png') no-repeat center; background-size: cover;} */
/*.main__section01 .inner{width: 70%; position: absolute; transform: translateX(-50%); z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center;}
*/
.main__section01 {
    position: relative; /* 부모 컨테이너의 위치 기준 설정 */
    width: 100%;
    height: 100vh; /* 화면 전체 높이 */
    overflow: hidden;
}

#player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 동영상이 부모 컨테이너를 꽉 채우도록 설정 */
    z-index: 1; /* 텍스트가 동영상 위로 오게 설정 */
}

.main__section01 .inner {
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* 동영상 위로 표시 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; /* 텍스트 중앙 정렬 */
}

.main__section01 .inner .main__txt h1 {
    font-family: 'GmarketSansBold';
    font-size: 60px;
    font-weight: bold;
    text-align: center; /* 텍스트 중앙 정렬 */
    color: #fff;
    line-height: 1.1;
}

.main__section01 .inner .main__txt p {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: -0.5px;
    text-align: center; /* 텍스트 중앙 정렬 */
    color: #fff;
    word-break: keep-all;
}


.main__section01 .inner .main__txt h1{font-family: 'GmarketSansBold'; font-size: 60px; font-weight: bold; text-align: left; color: #fff; line-height: 1.1;}
.main__section01 .inner .main__txt p{font-size: 20px; font-weight: 300; letter-spacing: -0.5px; text-align: CENTER; color: #fff; word-break: keep-all;}
.main__section01 .progress-block{display: flex; align-items: center;}
.main__section01 .progress-block .pageNum{margin-left: 30px; font-family: 'GmarketSansLight'; font-weight: 300; font-size: 14px; font-weight: 300; letter-spacing: 0.35px; text-align: left; color: #fff;}
.main__section01 .progress-block .pageNum span{font-family: 'GmarketSansBold'; font-weight: 700;}
.main__section01 .progress-block .pro-bar-wrap{width: 140px; height: 3px; background: rgba(255,255,255,.2);}
.main__section01 .progress-block .pro-bar{bottom:0; left:0; width:0; height:100%; background: #fff;}
.main__section01 .progress-block .progress-btns{margin-left: 28px; display: flex;}
.main__section01 .progress-block .progress-btns button{display: flex; background-color: transparent; border: 0; align-items: center;}
.pro-ani{animation-name: proBar; animation-duration:4s; animation-iteration-count: 1; animation-timing-function: ease-in-out; width:100%;}










@keyframes proBar{
    0%{width:0;}
    100%{width:100%;}
}

.main__section01 .swiper-arrow{display: flex;}
.main__section01 .swiper-arrow .arrow{width: 60px; height: 60px; cursor: pointer;}
.main__section01 .swiper-arrow .arrow.arrow-left{}
.main__section01 .swiper-arrow .arrow.arrow-right{margin-left: 10px;}

.main__section01 .scroll-block{display: flex; flex-direction: column; align-items: center; position: absolute; left: 42px; bottom:40px; z-index: 1; cursor: all-scroll;}
.main__section01 .scroll-block span{font-size: 12px; font-weight: 500; text-align: left; color: #fff; writing-mode: vertical-lr; transform: rotate(-180deg);}



.main__section02{}
.main__section02 .inner {
    width: 100%; /* .inner 요소가 가로 전체를 차지하도록 설정 */
    margin: 0; /* 불필요한 여백 제거 */
    padding: 0; /* 불필요한 패딩 제거 */
    box-sizing: border-box; /* 패딩이 width에 포함되도록 설정 */
}
.main__section02 .inner .section__top{left: 80%; }
.main__section02 .title{text-align: center;}
.main__section02 .inner .section_top .title-explanation{text-align: center;}
.main__section02 .inner .section_top{margin: 170px 0 50px 0; text-align: center;}
.main__section02 .inner .section__bottom ul {
    display: flex;
    justify-content: space-between; /* 요소들이 가로로 균일하게 정렬되도록 설정 */
    padding: 0;
    margin: 0;
    width: 100%; /* ul 요소도 가로로 꽉 차도록 설정 */
    list-style: none; /* 기본 목록 스타일 제거 */
}
.main__section02 .inner .section__bottom ul li.pdt-menu {
    width: 20%; /* 각 li가 동일한 너비를 차지하도록 설정 */
    height: 820px; /* 높이는 필요에 따라 조정 */
    margin: 0; /* 불필요한 마진 제거 */
    padding: 0; /* 불필요한 패딩 제거 */
    box-sizing: border-box; /* 패딩이 width에 포함되도록 설정 */
    overflow: hidden; /* 확대된 이미지가 li 영역을 넘지 않도록 설정 */
}

.main__section02 .inner .section__bottom ul li.pdt-menu a {
    display: flex;
    align-items: flex-end;
    height: 100%;
    width: 100%; /* a 태그도 li 안에서 가로로 꽉 차도록 설정 */
    overflow: hidden; /* 이미지가 영역을 넘지 않게 설정 */
    position: relative;
    transition: all .5s;
}

.main__section02 .inner .section__bottom ul li.pdt-menu a>img {
    width: 100%; /* 이미지가 가로 전체에 맞게 조정 */
    height: 100%;
    object-fit: cover; /* 이미지가 비율을 유지하며 꽉 차도록 설정 */
    transition: transform .5s;
    transform-origin: center;
}
.main__section02 .inner .section__bottom ul li.pdt-menu a:hover>img {
    transform: scale(1.1); /* hover 시 이미지가 확대 */
}

.main__section02 .inner .section__bottom ul li.pdt-menu a .text-block {
    width: 100%;
    padding: 120px 40px;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute; /* 텍스트가 이미지 위에 위치하도록 */
    bottom: 0; /* 텍스트가 이미지 아래에서 올라오도록 */
    z-index: 2; /* 텍스트가 이미지 위에 보이도록 */
    color: #fff; /* 텍스트 색상 */
    transition: all .5s;
   
}

.main__section02 .inner .section__bottom ul li.pdt-menu a .text-block h3 {
    font-family: 'GmarketSansBold';
    font-size: 45px;
    text-align: left;
    color: #fff; /* 텍스트 색상 */
    text-transform: uppercase;
    padding: 20px 0 10px 0;
}

.main__section02 .inner .section__bottom ul li.pdt-menu a .text-block h2 {
    font-family: 'GmarketSans';
    font-size: 15px;
    color: #fff; /* 텍스트 색상 */
}

.main__section02 .inner .section__bottom ul li.pdt-menu a:hover .text-block {
    padding: 110px 30px;
  
}



.main__section03 {
  background: url('../img/main/bg-synergy.png') no-repeat center;
  background-size: 100%; 
  
}



.main__section03 .inner{display: flex; flex-direction: column; align-items: center;padding-bottom:100px;}} 
.main__section03 .inner .section_top{margin: 170px 0 50px 0; text-align: center;}
.main__section03 .title{ text-align: center;}
.main__section03 .title-explanation{padding: 0 20px; text-align: center;}
.fields-block-auto{width: 100%; max-width:1400px; overflow-x: auto;}
.main__section03 .fields-block{position: relative; height: 300px;margin-bottom:150px;}
.main__section03 .fields-block .field{width: 380px; height: 380px; padding: 85px 99px; display: flex; flex-direction: column; align-items: center;  box-sizing: border-box; border-radius: 50%; position: absolute;}
.main__section03 .fields-block .field span{font-family: 'GmarketSansBold'; font-size: 80px; text-align: center; color: #fff;}
.main__section03 .fields-block .field h1{margin-top: 10px; font-family: 'Pretendard'; font-size: 20px; text-align: center; color: #fff;}
.main__section03 .fields-block .field.field01{left: 0;}
.main__section03 .fields-block .field.field02{left: 340px;}
.main__section03 .fields-block .field.field03{right: 340px;}
.main__section03 .fields-block .field.field04{right: 0;}
/*.main__section03 .fields-block .field.field04 h3{margin-top: 21px;}*/
/* .main__section03 .fields-block.fields--mo{max-width: 380px; width: 100%;}
.main__section03 .fields-block.fields--mo .fields__swiper{width: 100%; height: 380px;}
.main__section03 .fields-block.fields--mo .fields__swiper .field{position: static;} */



.main__section04{}
.main__section04 .inner{}
.main__section04 .inner .section_top{margin: 60px 0 50px 0; text-align: center;}
.main__section04 .title{padding: 0 20px; text-align: center;}
.main__section04 .inner .section_top .title-explanation{text-align: center;}
.main__section04 .inner .section_top{text-align: center;}


.main__section06{}
.main__section06 .inner{width:100%}
.main__section06 .inner .section_top{margin: 400px 0 50px 0; text-align: center;}
.main__section06 .inner .section__right{ width: 75%; margin-top:-100px;}
.main__section06 .inner .section__left .main-sub-text{margin: 100px 0 200px 0;}
.main__section06 .inner{display: flex; flex-direction: column; align-items: center;}




.main__section02 .inner .section__bottom ul li.pdt-menu a:hover::after{content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); transition: all .5s;}
.main__section02 .inner .section__bottom ul li.pdt-menu a:hover .text-block{padding: 110px 0 110px 30px; }


.main__section05{}
.main__section05 .inner{width:100%}
.main__section05 .inner .section_top{margin: 60px 0 50px 0; text-align: center;}
.main__section05 .logo{max-width: 266px; width: 100%;}
.main__section05  img{width: 100%; height:90%}
.main__section05 h2{text-align: center;color: #fff; }
.main__section05 p{font-family: 'pretendard'; font-size: 20px; font-weight: 300; line-height: 1.5; letter-spacing: -0.5px; text-align: center; color: #fff; word-break: keep-all;}

.main__section05 a span{font-family: 'GmarketSansMedium'; font-size: 16px; text-align: center; color: #fff;}
.main__section05 a img{margin-left: 12px;}
.main__section05 {
    padding-top: 250px; /* 상단 패딩을 250px로 늘려서 더 아래로 내림 */
    margin-top: 200px; /* 추가로 마진을 줘서 더 아래로 이동 가능 */
}
.main__section05 {
    position: relative; /* 배경 이미지를 기준으로 카드 배치 */
    padding-top: 100px; /* 카드들이 배경 위로 올라오도록 하기 위해 상단 패딩 설정 */
    background: url('<?=G5_THEME_IMG_URL?>/main/bg-esg.png') no-repeat center; /* 배경 이미지 설정 */
    background-size: cover; /* 배경 이미지를 화면 전체에 맞춤 */
}
.main__section05 {
    position: relative; /* 배경을 기준으로 카드 배치 */
    background: url('<?=G5_THEME_IMG_URL?>/main/bg-esg.png') no-repeat center;
    background-size: cover;
   
    padding: 0;
}

.management-cards {
    display: flex;
    justify-content: space-between;
    position: absolute; /* 카드가 배경 위에 위치하도록 */
    top: 500px; /* 배경 위로 적당히 올리기 */
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 60%;
    gap: 20px;
    z-index: 1; /* 카드가 배경보다 위에 있도록 설정 */
}

.management-cards .card {
     background-color: rgba(0, 0, 204, 0.6); /* #0000cc 색상에 70% 불투명도 적용 */
    color: white;
    padding: 60px;
    text-align: center;
    border-radius: 12px;
    width: 23%;
    height: 360px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.management-cards .card:hover {
    transform: scale(1.05); 
}

.management-cards .card .icon img {
    width: 90px; /* 아이콘 크기 조정 */
    height: 90px;
    margin-bottom: 20px;
}

.management-cards .card h3 {
    font-size: 27px; /* 텍스트 크기 조정 */
    margin-bottom: 10px;
}

.management-cards .card p {
    font-size: 16px; 
    color: #ffffff;
}

.main__section06{}
.main__section06 .inner{width:100%}
.main__section06 .inner .section_top{margin: 400px 0 50px 0; text-align: center;}
.main__section06 .inner .section__right{ width: 60%; margin-top:-100px;}
.main__section06 .inner .section__left .main-sub-text{margin: 100px 0 200px 0;}
.main__section06 .inner{display: flex; flex-direction: column; align-items: center;}








@media (max-width:1920px){


		.management-cards {
		display: flex;
		justify-content: space-between;
		position: absolute; /* 카드가 배경 위에 위치하도록 */
		top: 400px; /* 배경 위로 적당히 올리기 */
		left: 0;
		right: 0;
		margin: 0 auto;
		width:80%;
		gap: 20px;
		z-index: 1; /* 카드가 배경보다 위에 있도록 설정 */
	}
}

@media (max-width:1440px){
    .main__section02 .inner .section__bottom ul li.pdt-menu a .text-block{width: 94.36%; flex-direction: column; align-items: flex-start;}
    .main__section02 .inner .section__bottom ul li.pdt-menu a .text-block img{margin-top: 10px;}

	
	.management-cards {
    display: flex;
    justify-content: space-between;
    position: absolute; /* 카드가 배경 위에 위치하도록 */
    top: 350px; /* 배경 위로 적당히 올리기 */
    left: 0;
    right: 0;
    margin: 0 auto;
    width:80%;
    gap: 20px;
    z-index: 1; /* 카드가 배경보다 위에 있도록 설정 */
}

.management-cards .card {
     background-color: rgba(0, 0, 204, 0.6); /* #0000cc 색상에 70% 불투명도 적용 */
    color: white;
    padding: 60px;
    text-align: center;
    border-radius: 12px;
    width: 23%;
    height: 360px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.management-cards .card:hover {
    transform: scale(1.05); 
}

.management-cards .card .icon img {
    width: 90px; /* 아이콘 크기 조정 */
    height: 90px;
    margin-bottom: 20px;
}

.management-cards .card h3 {
    font-size: 23px; /* 텍스트 크기 조정 */
    margin-bottom: 10px;
}

.management-cards .card p {
    font-size: 16px; 
    color: #ffffff;
}

}

@media (max-width:1280px){
    .main__section01{height: 100vh;}
    .main__section01 .inner .main__txt{display: flex; flex-direction: column; align-items: center;}
    .main__section01 .inner .main__txt h1{text-align: center;}
    .main__section01 .inner .main__txt p{text-align: center;}

    .main__section02 .inner .section__bottom ul li.pdt-menu a .text-block h3{font-size: 17px;}
	.main__section03 {
		background-size: auto;
		background-repeat: no-repeat;
}
    .main__section03 .fields-block{width: 1200px;}
    .main__section03 .fields-block .field{width: 330px; height: 330px; padding: 75px 25px;}
    .main__section03 .fields-block .field.field02{left: 290px;}
    .main__section03 .fields-block .field.field03{right: 290px;}
    .main__section03 .fields-block .field span{font-size: 28px;}
    .main__section03 .fields-block .field h3{margin-top: 40px; font-size: 32px;}
    .main__section03 .fields-block .field.field04 h3{margin-top: 12px;}

	
	.management-cards {
    display: flex;
    justify-content: space-between;
    position: absolute; /* 카드가 배경 위에 위치하도록 */
    top: 315px; /* 배경 위로 적당히 올리기 */
    left: 0;
    right: 0;
    margin: 0 auto;
    width:80%;
    gap: 20px;
    z-index: 1; /* 카드가 배경보다 위에 있도록 설정 */
}

.management-cards .card {
     background-color: rgba(0, 0, 204, 0.6); /* #0000cc 색상에 70% 불투명도 적용 */
    color: white;
    padding: 60px;
    text-align: center;
    border-radius: 12px;
    width: 23%;
    height: 250px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.management-cards .card:hover {
    transform: scale(1.05); 
}

.management-cards .card .icon img {
    width:60px; /* 아이콘 크기 조정 */
    height: 60px;
    margin-bottom: 10px;
}

.management-cards .card h3 {
    font-size: 11px; /* 텍스트 크기 조정 */
    margin-bottom: 10px;
}

.management-cards .card p {
    font-size: 12px; 
    color: #ffffff;
}

.main__section02 .inner .section__bottom ul li.pdt-menu a .text-block h2 {
    font-family: 'GmarketSans';
    font-size: 10px;
    color: #fff; /* 텍스트 색상 */
}


}

@media (max-width:1024px){
    .main__section01 .camera_prev{left: 25px; z-index: 9;}
    .main__section01 .camera_next{right: 25px; z-index: 9;}
    .camera_commands{right: 75px; z-index: 9;}

    .main__section02 .inner .section__top{flex-direction: column;}
    .main__section02 .inner .section__top .explanation{margin-left: 0; width: 100%; margin-top: 60px;}
    .main__section02 .inner .section__bottom ul li.pdt-menu{height: 540px;}
	.main__section03 {
		background-size: auto;
		background-repeat: no-repeat;
}
.main__section03 .main-sub-text{margin: -150px 0 150px 0;}
/*.main__section03 {
    position: relative;
    padding: 100px 0; 
    background: url('../img/main/bg-synergy.png') no-repeat center center;  
    background-size: 100% 50%; 
    height: auto;
    overflow-x: hidden; 
}*/
.main__section03 .fields-block {  
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열로 설정 */
    grid-gap: 10px; /* 항목 간의 간격 설정 */
    width: 100%; /* 부모 요소의 너비에 맞추기 */
    justify-items: center; /* 그리드 항목들을 중앙에 정렬 */
    padding: 0 20px; /* 가로 여백을 설정하여 가로 스크롤 방지 */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.main__section03 .fields-block .field {
    width: 100%; /* 그리드 셀 너비 100% */
    max-width: 150px; /* 필드의 최대 너비 */
    height: auto; /* 높이를 자동으로 설정 */
    padding: 20px; /* 필드 내부 패딩 조정 */
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
}

.main__section03 .fields-block .field span {
    font-size: 20px; /* 폰트 사이즈 조정 */
    display: block;
}

.main__section03 .fields-block .field h1 {
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
}

/* 배경 크기 자동 맞춤 */
.main__section03 {
    background-size: auto;
    background-repeat: no-repeat;
}

    .main__section04 .inner{flex-direction: column;}
    .main__section04 .section__right{margin-left: 0; width: 100%; padding-top: 0px; margin-top: 60px;}

    .main__section06 .inner{flex-direction: column;}
   

	


}

@media (max-width:769px){
    .title{font-size: 36px;}

    .main__section01 .swiper-slide{height: 650px;}
    .main__section01 .inner .main__txt h1{font-size: 32px;}
    .main__section01 .progress-block{margin-top: 60px;}
    .main__section01 .swiper-arrow{margin-top: 50px;}
    .main__section01 .swiper-arrow .arrow{width: 50px; height: 50px;}
    .main__section01 .swiper-arrow .arrow img{width: 100%;}
    .main__section01 .scroll-block{left: 50%; transform: translateX(-50%); bottom: 20px;}
    .main__section01 .scroll-block span{writing-mode:initial; transform:initial}
    .main__section01 .scroll-block img{margin-top: 5px;}

    .main__section02 .inner .section__top .explanation{margin-top: 35px;}
    .main__section02 .inner .section__bottom{margin-top: 60px;} 
	  .main__section02 .inner .section__bottom ul{flex-direction: column;}
   .main__section02 .inner .section__bottom ul li.pdt-menu{height: 350px; width: 100%;}
    .main__section02 .inner .section__bottom ul li.pdt-menu a>img{display: none;}
    .main__section02 .inner .section__bottom ul li.pdt-menu.menu01 a{background: url('../img/main/business-01.png') no-repeat center; background-size: cover;}
    .main__section02 .inner .section__bottom ul li.pdt-menu.menu02 a{background: url('../img/main/business-02.png') no-repeat center; background-size: cover;}
    .main__section02 .inner .section__bottom ul li.pdt-menu.menu03 a{background: url('../img/main/business-03.png') no-repeat center; background-size: cover;}
	.main__section02 .inner .section__bottom ul li.pdt-menu.menu04 a{background: url('../img/main/business-04.png') no-repeat center; background-size: cover;}
    .main__section02 .inner .section__bottom ul li.pdt-menu.menu05 a{background: url('../img/main/business-05.png') no-repeat center; background-size: cover;}

    
    .main__section02 .inner .section__bottom ul li.pdt-menu a .text-block{padding: 40px 40px 0 0;}
    .main__section02 .inner .section__bottom ul li.pdt-menu a:hover .text-block{padding: 20px 20px 0 0;}
    .main__section02 .inner .section__bottom ul li.pdt-menu a .text-block h3{font-size: 18px;}
	
.main__section02 .inner .section__bottom ul li.pdt-menu a .text-block {
	    width: 100%;
    padding: 50px 20px;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    z-index: 2;
    color: #fff;
    transition: all .5s;
}


	   /* 배경 크기 자동 맞춤 */
.main__section03 {
		background-size: auto;
		background-repeat: no-repeat;
}

.main__section03 {
    position: relative;
    padding: 100px 0; /* 배경을 더 길게 보이도록 조정 */
    background: url('../img/main/bg-synergy.png') no-repeat center center;  
    background-size: 100% 50%; /* 가로는 100%, 세로는 50%로 설정 */
    height: auto;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}


.main__section03 .main-sub-text{margin: -100px 0 -100px 0;}



.main__section03 .fields-block {  
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열로 설정 */
    grid-gap: 10px; /* 항목 간의 간격 설정 */
    width: 100%; /* 부모 요소의 너비에 맞추기 */
    justify-items: center; /* 그리드 항목들을 중앙에 정렬 */
    padding: 100px 20px; /* 가로 여백을 설정하여 가로 스크롤 방지 */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.main__section03 .fields-block .field {
    width: 100%; /* 그리드 셀 너비 100% */
    max-width: 150px; /* 필드의 최대 너비 */
    height: auto; /* 높이를 자동으로 설정 */
    padding: 20px; /* 필드 내부 패딩 조정 */
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
}

.main__section03 .fields-block .field span {
    font-size: 20px; /* 폰트 사이즈 조정 */
    display: block;
}

.main__section03 .fields-block .field h1 {
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
}

/* 배경 크기 자동 맞춤 */
.main__section03 {
   /* background-size: auto;
*/
background-repeat: no-repeat;
}

   

    .main__section03 .fields-block .field.field02{left: 1px;}
    .main__section03 .fields-block .field.field03{right: 1px;}
    .main__section03 .fields-block .field span{font-size: 20px;}
    .main__section03 .fields-block .field h3{margin-top: 20px;font-size: 22px;}
 .management-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2개의 열로 그리드 설정 */
        gap: 20px; /* 카드 사이 간격 */
    }
.main__section04 .inner .section_top{margin: 30px 0 50px 0; text-align: center;}
    .management-cards .card {
        width: 100%; /* 그리드 셀에서 100% 너비 사용 */
        height: 0; /* 초기 높이를 0으로 설정 */
        padding-bottom: 100%; /* 가로에 맞춰 세로를 정사각형으로 설정 */
        position: relative; /* 안쪽 요소 정렬을 위해 relative 사용 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* 중앙 정렬 */
        text-align: center;
        box-sizing: border-box;
        overflow: hidden;
    }



.management-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2개의 열로 설정 */
		top:20px;
        width: 90%; /* 그리드 너비를 90%로 설정 */
        margin: 0 auto; /* 가로 중앙 정렬 */
    }

    /* 개별 카드 스타일 */
.management-cards .card {
    background-color: rgba(0, 0, 204, 0.6); /* 카드 배경에 불투명도 적용 */
    color: white;
    padding:145px; /* 카드 내부 패딩을 늘려 세로 길이 증가 */
    text-align: center;
    border-radius: 12px;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 170px; /* 최소 높이 설정하여 카드의 세로 길이 확보 */
}






    .management-cards .card .icon {
        position: absolute;
        top: 30%; /* 카드 상단에서 20% 아래에 배치 */
        transform: translateY(-50%);
        height: 40px; /* 아이콘 높이 */
    }

   /* .management-cards .card img {
        max-width: 50px; /* 이미지 크기 조정 
        height: auto;
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
    }
*/
    .management-cards .card h3 {
        position: absolute;
      
        font-size: 14px;
    }

    .management-cards .card p {
        position: absolute;
        bottom: 25%;
        font-size: 12px;
    }
	   .main__section05 {
        position: relative; /* 배경을 기준으로 카드 배치 */
        background: url('../img/main/bg-esg.png') no-repeat center center; /* 배경 이미지 설정 */
        background-size: cover; /* 배경 이미지를 화면 전체에 맞춤 */
     margin:100px auto;
        padding: 50px 0 160px 0; /* 상하 패딩 추가 */
        display: flex;
        justify-content: center;
        align-items: center; /* 컨텐츠가 중앙에 위치하도록 */
    }
	
.main__section05  img{width: 100%; height:100%}

}

@media (max-width:500px){

	.inner{ width: 95%; margin: auto;}
    .title{font-size: 20px;}
    .title-explanation{font-size: 16px;}
    .title-explanation br{display: none;}
    .verLine{height: 45px;}

    .main__section01{height: 0.1px;}
    .main__section01 .camera_prev{left: 20px;}
    .main__section01 .camera_next{right: 20px;}
    .camera_commands{right: 65px;}




    .main__section01 .swiper-slide{height: 20px;}
    .main__section01 .inner .main__txt h1{font-size: 20px;}
    .main__section01 .inner .main__txt p{font-size: 16px;}
    .main__section01 .progress-block{margin-top: 25px;}
    .main__section01 .swiper-arrow{margin-top: 20px;}
    .main__section01 .swiper-arrow .arrow{width: 35px; height: 35px;}

    .main__section02{padding: 40px 0;}
	
    .main__section02 .inner .section__top .explanation{margin-top: 15px;}
    .main__section02 .inner .section__top .moreBtn{margin-top: 25px; display: inline-flex;}
    .main__section02 .inner .section__bottom{margin-top: 35px;}
    .main__section02 .inner .section__bottom ul{flex-direction: column;}
    .main__section02 .inner .section__bottom ul li.pdt-menu{height: 265px; width: 100%;}
  
    

    .main__section02 .inner .section__bottom ul li.pdt-menu a .text-block {
        padding: 20px 20px 30px 20px; /* 왼쪽 20px, 아래쪽 30px, 위와 오른쪽도 적당한 값으로 설정 */
    }


    .main__section02 .inner .section__bottom ul li.pdt-menu a .text-block h3{font-size: 16px;}
    .main__section02 .inner .section__bottom ul li.pdt-menu a .text-block h3 br{display: none;}
    .main__section02 .inner .section__bottom ul li.pdt-menu a .text-block h3 span{display: none;}

.main__section03 {
    position: relative;
    padding: 100px 0; /* 배경을 더 길게 보이도록 조정 */
    background: url('../img/main/bg-synergy.png') no-repeat center center;  
    background-size: 100% 40%; /* 가로는 100%, 세로는 50%로 설정 */
    height: auto;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}
.main__section03 .fields-block {  
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열로 설정 */
    grid-gap: 10px; /* 항목 간의 간격 설정 */
    width: 100%; /* 부모 요소의 너비에 맞추기 */
    justify-items: center; /* 그리드 항목들을 중앙에 정렬 */
    padding-top:100px; /* 가로 여백을 설정하여 가로 스크롤 방지 */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.main__section03 .fields-block .field {
    width: 100%; /* 그리드 셀 너비 100% */
    max-width: 150px; /* 필드의 최대 너비 */
    height: auto; /* 높이를 자동으로 설정 */
    padding: 20px; /* 필드 내부 패딩 조정 */
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
}

.main__section03 .fields-block .field span {
    font-size: 20px; /* 폰트 사이즈 조정 */
    display: block;
}

.main__section03 .fields-block .field h1 {
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
}

/* 배경 크기 자동 맞춤 */
.main__section03 {
  
    background-repeat: no-repeat;
}
.main__section04 {
	padding-top: -200px;
    background-repeat: no-repeat;
}
/* 가로 스크롤 방지 */
body {
    overflow-x: hidden; /* 전체 가로 스크롤을 방지 */
}
  .main__section04 .inner .section_top{margin: 10px 0 -80px 0; text-align: center;}
    .main__section04 .section__right{margin-top: 45px;}
    .main__section04 .pic_lt ul{flex-direction: column;}
    .main__section04 .pic_lt li + li{margin-left: 0; margin-top: 35px;}
    .main__section04 .pic_lt li p{margin-top: 10px; font-size: 16px;}

     .main__section05 {
        position: relative; /* 배경을 기준으로 카드 배치 */
        background: url('../img/main/bg-esg.png') no-repeat center center; /* 배경 이미지 설정 */
        background-size: cover; /* 배경 이미지를 화면 전체에 맞춤 */
     margin:100px auto;
        padding: 50px 0 160px 0; /* 상하 패딩 추가 */
        display: flex;
        justify-content: center;
        align-items: center; /* 컨텐츠가 중앙에 위치하도록 */
    }
	.main__section05 .inner .section_top{ margin: 0 auto; text-align: center;}
	.main__section05 h2{font-size: 20px;}
    .main__section05 p{font-size: 16px;}
    .main__section05 p br{display: none;}
    .main__section05 a{max-width: 235px; padding: 15px;}
    .main__section05 a img{width: 35px;}
	.management-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2개의 열로 설정 */
		top:20px;
        width: 90%; /* 그리드 너비를 90%로 설정 */
        margin:10px 3px; /* 가로 중앙 정렬 */
    }

    /* 개별 카드 스타일 */
.management-cards .card {
    background-color: rgba(0, 0, 204, 0.6); /* 카드 배경에 불투명도 적용 */
    color: white;
    padding: 91px; /* 카드 내부 패딩을 늘려 세로 길이 증가 */
    text-align: center;
    border-radius: 12px;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 170px; /* 최소 높이 설정하여 카드의 세로 길이 확보 */
}


   

    /* 아이콘 설정 */
    .management-cards .card .icon {
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center;     /* 세로 중앙 정렬 */
    width: 100%;             /* 부모 컨테이너 너비 100% */
    margin-bottom: 10px;     /* 아이콘과 텍스트 간의 간격 */
}

.management-cards .card .icon img {
    width: 50px;  /* 아이콘 크기 */
    height: 50px;
}

    /* 카드 제목 설정 */
    .management-cards .card h3 {
        font-size: 18px; /* 제목 크기 조정 */
        margin-bottom: 10px;
    }

    /* 카드 설명 텍스트 설정 */
   
      .main__section06 {margin-top: -050px }
    .main__section06 .inner .section__right{margin-top: 15px; width:90%}
    .main__section06 .pic_li_lt li a{padding: 25px 30px;}
    .main__section06 .pic_li_lt li a h5{font-size: 18px;}
    .main__section06 .pic_li_lt li a p{font-size: 16px;}

	 .main__section06 .inner{flex-direction: column; padding-top: -200px }
 .main__section06 .section__left{margin-top: -120px; margin-bottom: -120px;}



}

@media (max-width:375px){
    .main__section01 .camera_prev{top: initial; bottom: 50px;}
    .main__section01 .camera_next{top: initial; bottom: 50px;}
    .camera_commands{top: initial; bottom: 50px;}

	.inner{ width: 95%; margin: auto;}


} 

@media (max-width: 768px) { /* 모바일 해상도에 맞춘 미디어 쿼리 */
    .wrap {
     
        top: 0; /* WRAP의 위치를 화면 맨 위로 조정 */
        z-index: 1; /* HEAD보다 위로 보이도록 설정 */
    }

}

@media (max-width: 500px) { /* 모바일 해상도에 맞춘 미디어 쿼리 */
    .wrap {
     
        top: 0; /* WRAP의 위치를 화면 맨 위로 조정 */
        z-index: 1; /* HEAD보다 위로 보이도록 설정 */
    }
	 .main__section01 {
        height:570px;
    }

    .main__section01 iframe {
        position: absolute;
        top: -100px;
        left: 0;
        width: 100%; /* 가로 전체 채우기 */
      
  aspect-ratio: 16 / 10; /* 세로를 길게 하기 위해 가로 대비 세로 비율 조정 */
   object-fit: cover; /* 여백 없이 채우기 */
   margin-top:-60px;
    height: 150%; /* 세로를 더 길게 설정 */
        z-index: 1;
    }

    .main__section01 .inner {
        position: absolute;
        top: 50%; /* 세로 중앙 정렬 */
        left: 50%; /* 가로 중앙 정렬 */
        transform: translate(-50%, -50%); /* 완전 중앙 정렬 */
        z-index: 2; /* 동영상 위로 표시 */
        text-align: center;
    }

    .main__section01 .inner .main__txt h1 {
        font-size: 15px; /* 모바일 크기에 맞게 폰트 크기 조정 */
        line-height: 1.2;
    }

    .main__section01 .inner .main__txt p {
        font-size: 9px; /* 본문 텍스트 크기 조정 */
    }

}