.coating-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* 중앙 정렬로 시작 */
    width: 100vw; /* 전체 화면 너비 */
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.1); /* 투명한 흰색 배경 */
    text-align: center;
    padding: 20px 40px; /* 일반적인 패딩을 좀 더 넉넉하게 조정 */
    box-sizing: border-box;
}

.coating-section h1 {
    font-size: 6vw; /* 큰 글씨 */
    font-weight: bold;
    color: white;
    margin: 0 0 20px 0; /* 아래쪽 여백 */
}

.coating-section h2 {
    font-size: 5vw; /* 조금 작지만 그래도 큰 글씨 */
    font-weight: bold;
    color: white;
    margin: 0 0 20px 0; /* 아래쪽 여백 */
    position: relative;
    left: 10%; /* 중앙으로부터 오른쪽으로 10% 이동 */
}

.coating-section h3 {
    font-size: 4vw; /* 비교적 작은 글씨 */
    font-weight: bold;
    color: #000;
    margin: 0 0 20px 0; /* 아래쪽 여백 */
    position: relative;
    right: 10%; /* 중앙으로부터 왼쪽으로 10% 이동 */
}


.coating-section  {
    font-size: 4vw; /* 비교적 작은 글씨 */
    font-weight: bold;
    color: #000;
    margin: 0 0 20px 0; /* 아래쪽 여백 */
    position: relative;
    right: 10%; /* 중앙으로부터 왼쪽으로 10% 이동 */
}

.coating .cont img {
	width : 100%;
	height: auto;
}
/* 
#coating {
    background-color: white;
    padding-top: 0px;
} */
/* 
#coating .section_tag {
    margin: 0;
}

#coating .section_tag span {
    color: #000;
    border-color: #000;
} */

#coating .service_ul {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 16px; */
}

.img-fluid {
    width: 100%;
    height: auto;
}

/* SERVICES */
.services_art_box {width:60vw;margin:0 auto 60px;letter-spacing:-2px;}
.services_art_box .services_art {font-size:6vw;font-weight:600;line-height:7vw;}
.services_art_box .services_art:last-child {padding-left:7vw;}
.services_art_box .services_art.right {text-align:right;}

.service_ul {display:flex;flex-wrap:wrap;}
.service_ul li {width:25%;display:flex;justify-content:right;padding:20px;}
.service_ul li:nth-child(2n) {justify-content:left;}
.service_ul li .cont {width:80%;/*border-radius:14px;*/box-shadow:2px 2px 6px rgba(0,0,0,0.2);padding:0 14px;
    background:white;}
.service_ul li .cont img {width:100%;height:auto;}
.service_ul li .subj {padding:20px 0;font-size:34px;font-weight:700;line-height:46px;color:black;}
.service_ul li .subj span {display:block;font-size:24px;font-weight:600;}
.service_ul li .art {font-size:16px;color:#202020;font-weight:400;}
.service_ul li img {display:block;margin:20px 0 30px;}

.learn-more-btn {
    /* width: 100%; */
    margin-left : auto;
    margin-right : auto;
    display: inline-block;
    padding: 1vw 3vw; /* 이미지 크기에 비례한 패딩 */
    background-color: #b0b0b0; /* 회색 */
    color: white; /* 텍스트 색상 */
    font-weight: bold;
    font-size: 1.5vw; /* 이미지 크기에 비례한 글자 크기 */
    border: none; /* 테두리 없음 */
    border-radius: 30px; /* 모서리 둥글게 */
    cursor: pointer; /* 마우스 오버시 커서 모양 변경 */
    transition: background-color 0.3s; /* 배경색 변경 애니메이션 */
    text-align: center;
}

.learn-more-btn:hover {
    background-color: #696969; /* 마우스 오버시 진한 회색으로 변경 */
}

learn-more-btn-ul .li {
    width:100%;
    display: flex;
    justify-content: center;
    text-align: center;
}



.image-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.image-container img {
    width: 100%;
    height: auto;
}

.txt-overlay {
    position: absolute;
    color: #000;
    font-size: 1.75vw;
    font-weight: bold;
    left: 28.5%;
    transform: translate(-50%, -50%); /* 가로, 세로 중앙 정렬 */
}

.txt-overlay.txt-overlay1 {
    top: calc(1976/4634*100%);
}
.txt-overlay.txt-overlay2 {
    top: calc(2666/4634*100%);
}
.txt-overlay.txt-overlay3 {
    top: calc(3376/4634*100%);
}
.txt-overlay.txt-overlay4 {
    top: calc(4054/4634*100%);
}
 
.button-container1 {
    position: absolute;
    top: calc(2056/4634*100%);
    left: 50%;
    transform: translate(-50%, -50%); /* 가로, 세로 중앙 정렬 */
}

.button-container2 {
    position: absolute;
    top: calc(2692/4634*100%);
    left: 50%;
    transform: translate(-50%, -50%); /* 가로, 세로 중앙 정렬 */
}

.button-container3 {
    position: absolute;
    top: calc(3382/4634*100%);
    left: 50%;
    transform: translate(-50%, -50%); /* 가로, 세로 중앙 정렬 */
}

.button-container4 {
    position: absolute;
    top: calc(4084/4634*100%);
    left: 50%;
    transform: translate(-50%, -50%); /* 가로, 세로 중앙 정렬 */
}

.label-container1 {
    position: absolute;
    width: calc(105/1400*100%);
    top: calc(1380/4634*100%);
    left: calc(1222/1400*100%);
    transform: translate(-100%, 0%);
}

.label-container2 {
    position: absolute;
    width: calc(105/1400*100%);
    top: calc(2154/4634*100%);
    left: calc(1222/1400*100%);
    transform: translate(-100%, 0%);
}

.label-container3 {
    position: absolute;
    width: calc(105/1400*100%);
    top: calc(2796/4634*100%);
    left: calc(1222/1400*100%);
    transform: translate(-100%, 0%);
}

.label-container4 {
    position: absolute;
    width: calc(105/1400*100%);
    top: calc(3478/4634*100%);
    left: calc(1222/1400*100%);
    transform: translate(-100%, 0%);
}

.label-container img {
    /* image-rendering: -webkit-optimize-contrast; Webkit 계열 브라우저에서 최적화 */
    /* image-rendering: crisp-edges; 선명한 가장자리 */
    /* image-rendering: pixelated; 픽셀화 */
    /* filter: blur(0.25px); 약간의 블러를 적용해 이미지 깨짐을 완화 */
}

img {
    image-rendering: auto !important; /* Webkit 계열 브라우저에서 최적화 */
}
img {
    /* image-rendering: -webkit-optimize-contrast !important; for webkit (Safari, Chrome) */
    /* image-rendering: -moz-crisp-edges !important;          for Firefox */
    /* image-rendering: -o-crisp-edges !important;            for Opera */
    /* image-rendering: crisp-edges !important;               for CSS3 */
    /* image-rendering: pixelated !important;                 for CSS4 */
}

