@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* {margin:0; border: 0; padding: 0; box-sizing: border-box;}
ul, li {list-style: none;}
a {text-decoration: none; color: #000;}

body, html {
	/*font-family: 'Variable';*/
	overflow-x: hidden;
	scroll-behavior: smooth;
}
.cf:after {content: ''; display: block; clear: both;}
#wrap {width: 100%; margin: 0 auto;}



/*** 메인 시작 ***/
.main-slider-section {
	margin-top: 140px;
    overflow: hidden;
}
/* 슬라이드 하나의 크기 설정 (중요!) */
.swiper-slide {
    width: 80%; /* 화면의 80%만 차지하게 (양옆이 보이도록) */
    /* PC에서는 조금 더 작게 잡고 싶다면 max-width 추가 */
    max-width: 1400px; 
    
    /* 비활성 슬라이드 투명도 조절 (선택사항) */
    opacity: 0.4;
    transition: opacity 0.3s;
}
/* 현재 가운데 있는 활성 슬라이드만 선명하게 */
.swiper-slide-active {
    opacity: 1;
}
/* 카드 내부 디자인 */
.slide-inner {
    display: flex; /* 좌우 배치 */
    justify-content: space-between;
    align-items: center;
    padding: 60px 80px;
    border-radius: 20px;
    height: 500px;
    box-sizing: border-box;
}
/* 배경색 종류 */
.bg-orange { background-color: #FFE8C7; }
.bg-blue   { background-color: #D6F4FA; }
.bg-mint   { background-color: #B2EBF2; }
/* 텍스트 디자인 */
.txt-area .sub-txt { font-size: 18px; color: #555; margin-bottom: 10px; }
.txt-area h3 { font-size: 42px; font-weight: bold; line-height: 1.3; color: #222; }
/* 이미지 영역 */
.img-area {
    width: 600px;
    overflow: hidden;
} 
.img-area img {
    width: 100%;
	height: 100%;
}

@media screen and (max-width: 1024px) {
	.main-slider-section {
		margin-top: 160px;
	}
	.slide-inner {
		display: flex;
        flex-direction: column; /* ⭐ 위아래로 쌓기 */
        justify-content: center; /* 가운데 정렬 */
    	padding: 10px;
    	height: 400px;
    	text-align: center;
		width: 90%;
		margin: 0 auto;
	}
	.txt-area .sub-txt { font-size: 14px;}
	.txt-area h3 { font-size: 28px;}
	.txt-area24 h3 { font-size: 22px;}
	/* 이미지 영역 */
	.img-area {
	    width: 90%;
	    overflow: hidden;
		margin: 0 auto;
	} 
	.img-area img {
	    width: 100%;
		height: 100%;
	}
}





/*** 섹션1 - 전화,견적,웹하드 ***/
#section1 {
	width: 100%;
	height: 100%;
	padding-top: 50px;
}
#section1 > div {
    width: 1400px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
#section1 > div > a {
    display: block;
    width: 450px;
	height: 200px;
    border-radius: 15px;
    padding: 18px 25px;
}
#section1 > div > a.tel {
    background: #3A9CED;
    margin-left: 10px;
	color: #fff;
}
#section1 > div > a.rq {
    background: #F8CC6D;
}
#section1 > div > a.webhard {
    background: #A6EBE6;
}
#section1 > div > a > img {
    height: 120px;
    float: right;
	margin-top: 25px;
}
#section1 > div > a > span {
    display: block;
    float: left;
    width: 60%;
}
#section1 > div > a > span > span {
    display: block;
}
#section1 > div > a > span > span.txt1 {
    font-size: 28px;
    font-weight: 700;
}
#section1 > div > a > span > span.txt2 {
    font-size: 18px;
    line-height: 20px;
    padding-top: 10px;    
}
#section1 > div > a > span > span.txt3 {
    font-size: 24px;
    font-weight: 700;
	padding-top: 12px;   
}
#section1 > div > a > span > span.txt3 > br {
    display: none;  
}

/* =========================================
   [모바일 반응형] 섹션1 (전화/견적/웹하드)
   화면 너비가 768px 이하일 때 적용
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. 전체 컨테이너 설정 */
    #section1 {
        padding-top: 30px; /* 위쪽 여백 줄임 */
        height: auto; /* 높이 고정 해제 (내용만큼 늘어나게) */
        padding-bottom: 30px; /* 아래쪽 여백 추가 */
    }

    #section1 > div {
        width: 100%; /* 1400px 고정 해제 -> 100% */
        padding: 0 20px; /* 좌우 여백 추가 */
        box-sizing: border-box; /* 패딩 포함 크기 계산 */
        
        /* ⭐ 핵심: 가로 배열 -> 세로 배열로 변경 */
        flex-direction: column; 
        gap: 15px; /* 박스 사이 간격 15px */
    }

    /* 2. 개별 박스 (버튼) 스타일 */
    #section1 > div > a {
        width: 100%; /* 너비 꽉 차게 */
        height: auto; /* 높이 자동 조절 */
        min-height: 160px; /* 최소 높이 설정 */
        padding: 20px 15px; /* 안쪽 여백 조절 */
    }

    /* 전화 문의 버튼 마진 초기화 (PC에서 줬던 margin-left 없애기) */
    #section1 > div > a.tel {
        margin-left: 0;
    }

    /* 3. 아이콘 이미지 크기 조절 */
    #section1 > div > a > img {
        height: 80px; /* 120px -> 80px 로 축소 */
        margin-top: 10px; /* 위치 미세 조정 */
    }

    /* 4. 텍스트 영역 너비 조절 */
    #section1 > div > a > span {
        width: 60%; /* 글자가 차지하는 공간을 좀 더 넓게 (60% -> 70%) */
    }

    /* 5. 폰트 사이즈 다이어트 */
    #section1 > div > a > span > span.txt1 {
        font-size: 22px; /* 제목: 28px -> 22px */
    }

    #section1 > div > a > span > span.txt2 {
        font-size: 13px; /* 설명: 18px -> 15px */
        line-height: 1.4; /* 줄 간격 조절 */
        padding-top: 8px;
    }

    #section1 > div > a > span > span.txt3 {
        font-size: 16px !important; /* 전화번호: 24px -> 20px */
        padding-top: 10px;
    }
}



/*** 섹션2 - 회사소개 ***/
#section2 {
	width: 100%;
	height: 100%;
	padding: 120px 0px;
}
#section2 > div {
	width: 1400px;
    height: 100%;
	margin: 0 auto;
}
#section2 > div > p {
	text-align: center;
	line-height: auto;
}
#section2 > div > p.txt1 {
	font-size: 32px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 30px;
}
#section2 > div > p.txt2 {
	font-size: 36px;
    font-weight: 700;
    color: #002C7E;
    margin-bottom: 30px;
}
#section2 > div > p.txt3 {
	font-size: 20px;
	line-height: 26px;
	margin-top: 20px;
	color: #333;
}

@media screen and (max-width: 768px) {
	#section2 {
		padding: 20px 0px 50px 0px;
	}
	#section2 > div {
		width: 90%;
	}
	#section2 > div > p.txt1 {
		font-size: 20px;
    	line-height: 1.4;
    	margin-bottom: 10px;
	}
	#section2 > div > p.txt2 {
		font-size: 26px;
	    margin-bottom: 10px;
	}
	#section2 > div > p.txt3 {
		font-size: 14px;
		line-height: 20px;
		margin-top: 0px;
	}
}


/*** 섹션3 - 회사 판매 관련 컨텐츠 ***/
#section3 {
	width: 100%;
	height: 600px;
	background: rgb(255, 165, 169);
}
#section3 > div {
	display: flex;
    justify-content: space-between;
}
#section3 > div > a {
	position: relative;
	width: 50%;
	height: 600px;
	overflow: hidden;
	text-align: center;
}
#section3 > div > a::before {
	content: "";
    position: absolute;
    top: 0; left: 0;
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    height: 600px; 
    width: 1000px;
	transition: transform 0.5s ease;
    /* z-index: -1; */
}
#section3 > div > a.l_con::before {
	background-image: linear-gradient( rgba(0,0,0, 0.4), rgba(0,0,0, 0.4) ), url('../img/section3/l_con.png');   
}
#section3 > div > a.r_con::before {
	background-image: linear-gradient( rgba(0,0,0, 0.4), rgba(0,0,0, 0.4) ), url('../img/section3/r_con.png'); 
}
#section3 > div > a.l_con:hover::before, 
#section3 > div > a.r_con:hover::before {
    transform: scale(1.1);
}
#section3 > div > a > span {
	display: block;
	color: #fff;
	position: absolute;
	top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
}
#section3 > div > a > span > span {
	display: block;
}
#section3 > div > a > span > span.txt1 {
	font-size: 36px;
	font-weight: 700;
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}
#section3 > div > a > span > span.txt2 {
	font-size: 18px;
	font-weight: 500;
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}
/* =========================================
   [모바일 반응형] 섹션3 (반반 이미지 배너)
   화면 너비가 768px 이하일 때 적용
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. 전체 컨테이너 높이 자동 조절 */
    #section3 {
        height: auto; /* 600px 고정 해제 -> 내용만큼 늘어나게 */
    }

    /* 2. 레이아웃 방향 변경 (가로 -> 세로) */
    #section3 > div {
        flex-direction: column; /* 위아래로 쌓기 */
    }

    /* 3. 개별 배너 박스 크기 조절 */
    #section3 > div > a {
        width: 100%; /* 너비 꽉 차게 (50% -> 100%) */
        height: 300px; /* 높이 축소 (600px -> 300px) */
    }

    /* 4. 배경 이미지 크기 강제 조정 (중요!) */
    /* 기존에 width: 1000px로 고정된 것을 100%로 풀어줘야 함 */
    #section3 > div > a::before {
        width: 100% !important; /* 화면 너비에 딱 맞게 */
        height: 100%; /* 부모 높이(300px)에 맞게 */
    }

    /* 5. 텍스트 크기 다이어트 */
    #section3 > div > a > span {
        width: 90%; /* 글자가 화면 끝에 붙지 않게 여백 확보 */
    }

    #section3 > div > a > span > span.txt1 {
        font-size: 26px; /* 제목: 36px -> 26px */
        line-height: 1.3;
        margin-bottom: 5px;
    }

    #section3 > div > a > span > span.txt2 {
        font-size: 15px; /* 설명: 18px -> 15px */
        word-break: keep-all; /* 단어 끊김 방지 */
    }
}



/*** 섹션4 - 포트폴리오 ***/
#section4 {
	width: 100%;
	height: 100%;
	background: #FFF;
	padding: 120px 0px;
}
#section4 > div {
	width: 1200px;
    height: 100%;
	margin: 0 auto;
}
#section4 > div > p {
	padding-bottom: 50px;
}
#section4 > div > p > span {
	display: block;
	text-align: center;
}
#section4 > div > p > span.txt1 {
	font-size: 36px;
	font-weight: 700;
}
#section4 > div > p > span.txt2 {
	font-size: 18px;
	font-weight: 500;
}
/* 포트폴리오 이미지 영역 */
#section4 > div > div.gallery {
    display: grid;
    /* 가로 3칸을 똑같은 비율(1fr)로 만듦 */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* 사이 간격 */
    margin-bottom: 50px;
}
#section4 > div > div.gallery > div {
    width: 100%;
    margin-bottom: 15px;
}
#section4 > div > div.gallery > div > div {
    border-radius: 20px;
	overflow: hidden;
}
#section4 > div > div.gallery > div > div > img {
    width: 100%;
    display: block;
    transition: transform 0.5s;
}
#section4 > div > div.gallery > div:hover img {
    transform: scale(1.3);
}
#section4 > div > div.gallery > div > p {
	margin-top: 10px;
   	text-align: center;
   	padding: 5px 0px;
	font-size: 18px;
    color: #333;
    font-weight: 500;
}
#section4 > div > div.gallery > div:hover p {
	color: #0f2a4a;
	font-weight: bold;
}

#section4 > div > div.moreBtn {
	width: 150px;
	height: 40px;
	margin: 0 auto;
}
#section4 > div > div.moreBtn > a {
	display: block;
	width: 150px;
	height: 50px;
	border-radius: 30px;
	background:  #102d4f;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	padding: 10px 0px;
	color: #fff;
}
#section4 > div > div.moreBtn > a:hover {
	color: #F8CC6D;
}
/* =========================================
   [모바일 반응형] 섹션4 (포트폴리오)
   화면 너비가 768px 이하일 때 적용
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. 전체 섹션 여백 조절 */
    #section4 {
        padding: 60px 0; /* 위아래 여백 축소 (120px -> 60px) */
        height: auto; /* 높이 자동 조절 */
    }

    /* 2. 내부 컨테이너 너비 조절 */
    #section4 > div {
        width: 100%; /* 1200px 고정 해제 -> 100% */
        padding: 0 20px; /* 좌우 여백 추가 */
        box-sizing: border-box; /* 패딩 포함 크기 계산 */
    }

    /* 3. 제목 텍스트 크기 조절 */
    #section4 > div > p {
        padding-bottom: 30px; /* 제목과 갤러리 사이 간격 줄임 */
    }

    #section4 > div > p > span.txt1 {
        font-size: 28px; /* 제목: 36px -> 28px */
        line-height: 1.3;
        margin-bottom: 5px;
    }

    #section4 > div > p > span.txt2 {
        font-size: 15px; /* 설명: 18px -> 15px */
        word-break: keep-all; /* 단어 끊김 방지 */
    }

    /* 4. 갤러리 그리드 (핵심! 3열 -> 1열) */
    #section4 > div > div.gallery {
        /* 한 줄에 1개씩 크게 보여주기 */
        grid-template-columns: repeat(1, 1fr); 
        
        /* (선택사항) 만약 한 줄에 2개씩 보여주고 싶다면 위 코드 대신 아래를 쓰세요 */
        /* grid-template-columns: repeat(2, 1fr); */
        
        gap: 20px; /* 사진 사이 간격 줄임 */
        margin-bottom: 30px;
    }
    
    /* 갤러리 텍스트 크기 조절 */
    #section4 > div > div.gallery > div > p {
        font-size: 16px;
    }

    /* 5. 더보기 버튼 위치 조정 */
    #section4 > div > div.moreBtn {
        width: 100%; /* 버튼 감싸는 박스 너비 풀기 */
        text-align: center; /* 가운데 정렬 */
    }
    
    #section4 > div > div.moreBtn > a {
        margin: 0 auto; /* 버튼 자체를 가운데로 */
    }
}



/*** 섹션5 - 오시는 길 ***/
#section5 {
	width: 100%;
	height: 100%;
	padding: 120px 0px 150px 0px;
	background: linear-gradient(rgba(0, 0, 0, 0.5)), url('/img/section5/bg.jpg');
    
    /* 스크롤 배경 고정 */
    background-attachment: fixed;
    /* 화면 꽉 차게 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	color: #FFF;
}
#section5 > div {
	width: 1200px;
    height: 100%;
	margin: 0 auto;
}
#section5 > div > p {
	padding-bottom: 50px;
}
#section5 > div > p > span {
	display: block;
	text-align: center;
}
#section5 > div > p > span.txt1 {
	font-size: 36px;
	font-weight: 700;
	color: #ffd67d;
}
#section5 > div > p > span.txt2 {
	font-size: 18px;
	font-weight: 500;
}
/* 지도 */
#section5 > div > div.mapCon {
	width: 100%;
	text-align: center;
	background-color: #fff; /* 흰색 배경 */
    padding: 10px;
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}
#section5 > div > div.mapCon > iframe {
	display: block;
	margin: 0 auto;
	width: 100%;
}
#section5 > div > div.mapCon > p {
	width: 100%;
	background: #3A9CED;
	margin: 0 auto;
	padding: 5px 0px 7px 0px;
	font-size: 18px;
}


/* 오는방법 */
#section5 > div > div.traffic {
	/*border: 1px solid red;*/
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0,0,0, 0.3);
	padding: 10px 0px;
	border-radius: 100px;
}
#section5 > div > div.traffic > div {
	width: 600px;
	padding: 20px 30px;

}
#section5 > div > div.traffic > div > img {
	width: 100px;
	float: left;
}
#section5 > div > div.traffic > div > p {
	float: left;
	/*border: 1px solid red;*/
	margin: 10px 20px;
}
#section5 > div > div.traffic > div.bus {
	border-left: 1px solid #ccc;
}

/* =========================================
   [모바일 반응형] 섹션5 (오시는 길)
   화면 너비가 768px 이하일 때 적용
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. 섹션 전체 여백 및 배경 설정 */
    #section5 {
        padding: 60px 0; /* 위아래 여백 축소 (120px -> 60px) */
        /* 모바일에서 fixed 배경은 렉이 걸릴 수 있어 scroll로 변경 (선택사항) */
        background-attachment: scroll; 
    }

    #section5 > div {
        width: 100%; /* 1200px 고정 해제 */
        padding: 0 20px; /* 좌우 여백 */
        box-sizing: border-box;
    }

    /* 2. 제목 폰트 크기 조절 */
    #section5 > div > p {
        padding-bottom: 30px;
    }

    #section5 > div > p > span.txt1 {
        font-size: 28px; /* 36px -> 28px */
        margin-bottom: 5px;
    }

    #section5 > div > p > span.txt2 {
        font-size: 15px; /* 18px -> 15px */
    }

    /* 3. 지도 (Map) */
    #section5 > div > div.mapCon {
        width: 100%;
        box-sizing: border-box; /* 패딩 포함 크기 계산 */
    }
    
    #section5 > div > div.mapCon > iframe {
        height: 300px; /* 지도 높이 적당히 고정 */
    }
    
    #section5 > div > div.mapCon > p {
        font-size: 15px; /* 주소 글자 크기 축소 */
    }

    /* 4. 교통편 안내 박스 (핵심!) */
    #section5 > div > div.traffic {
        width: 100%; /* 1200px -> 100% */
        flex-direction: column; /* 가로 -> 세로 배열 */
        height: auto; /* 높이 자동 */
        border-radius: 20px; /* 긴 타원형 -> 둥근 사각형으로 변경 */
        padding: 20px; /* 안쪽 여백 */
        box-sizing: border-box;
    }

    /* 내부 아이템 (지하철, 버스) */
    #section5 > div > div.traffic > div {
        width: 100%; /* 600px -> 100% */
        padding: 20px 0; /* 위아래 간격 */
        
        /* 내용물 가운데 정렬을 위해 플롯 해제하고 플렉스 사용 */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 아이콘 이미지 */
    #section5 > div > div.traffic > div > img {
        float: none; /* 플롯 해제 */
        width: 80px; /* 아이콘 크기 약간 축소 */
        margin-bottom: 15px;
    }

    /* 설명 텍스트 */
    #section5 > div > div.traffic > div > p {
        float: none; /* 플롯 해제 */
        margin: 0;
        width: 100%;
        font-size: 15px;
        line-height: 1.6;
        word-break: keep-all; /* 단어 끊김 방지 */
    }

    /* 5. 구분선 변경 (세로 -> 가로) */
    #section5 > div > div.traffic > div.bus {
        border-left: none; /* 세로선 삭제 */
        border-top: 1px solid rgba(255, 255, 255, 0.3); /* 가로선 추가 */
    }
}