a{text-decoration: none;
    color:#000000;

}



/* 헤더 스타일 */
header {
    background-color: #d1d1d1;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 메뉴 항목이 넘칠 경우 줄 바꿈 */
}

.logo a {
    text-decoration: none;
    color: #f1f1f1;
    font-size: 24px;
}

.menu {
    list-style: none;
    display: flex;
    text-align: center;
}

.menu li {
    margin-right: 20px;
}

.menu a {
    text-decoration: none;
    color: #000000;
    font-size: 16px;
}

/* 미디어 쿼리 추가: 화면 너비가 700px 이상일 때 */
@media (min-width: 800px) {
    .navbar {
        justify-content: space-between; /* 로고와 메뉴 사이 간격을 최대화 */
    }

    .menu {
        margin-left: 50px; /* 로고와 메뉴 사이 간격을 50px로 설정 */
    }
}




/* 반응형 상자 */
/* 기본 스타일 */
.responsive-box {
    width: 100%; /* 화면 너비에 맞게 확장 */
    max-width: 3000px; /* 최대 너비 설정 */
    height: auto; /* 높이 자동 조정 */
    padding: 20px;
    background-color: #94fff1;
    text-align: center;
    margin: 0 auto; /* 가운데 정렬 */
}

/* 이미지 스타일 */
.responsive-box img {
    max-width: 100%; /* 이미지 최대 너비 설정 */
    height: auto; /* 이미지 높이 자동 조정 */
}

/* 미디어 쿼리를 사용하여 화면 크기에 따라 스타일 변경 */
@media (max-width: 768px) {
    .responsive-box {
        max-width: 100%; /* 화면 크기보다 작을 때 최대 너비 100%로 변경 */
    }
}

.responsive-box2 {
    width: 100%; /* 화면 너비에 맞게 확장 */
    max-width: 1000px; /* 최대 너비 설정 */
    height: auto; /* 높이 자동 조정 */
    padding: 20px;
    background-color: #f3adad;
    text-align: center;
    margin: 0 auto; /* 가운데 정렬 */
}

.responsive-box3 {
    width: 100%; /* 화면 너비에 맞게 확장 */
    max-width: 500px; /* 최대 너비 설정 */
    height: auto; /* 높이 자동 조정 */
    padding: 20px;
    background-color: #b8ffb1;
    text-align: center;
    margin: 0 auto; /* 가운데 정렬 */
}

/* 이미지 스타일 */
.responsive-box2 img {
    max-width: 100%; /* 이미지 최대 너비 설정 */
    height: auto; /* 이미지 높이 자동 조정 */
}

/* 이미지 컨테이너 스타일 */
.image-container {
    max-width: 100%; /* 화면 너비에 맞게 조정 */
    padding: 20px; /* 이미지 간의 간격 설정 */
    background-color: #ffffff;
    text-align: center;
}

/* 이미지 스타일 */
.image-container img {
    max-width: 700px; /* 이미지 최대 너비 설정 */
    height: auto; /* 이미지 높이 자동 조정 */
}

/* 미디어 쿼리를 사용하여 화면 크기에 따라 스타일 변경 */
@media (max-width: 768px) {
    .image-container {
        flex-direction: column; /* 화면 너비가 768px 이하일 때 이미지를 세로로 배치 */
    }
}

.image-container img {
    margin-bottom: 50px; /* 이미지 아래에 50px의 공간 추가 */
}
}
/* 이미지 2와 이미지 1 사이의 간격 조정 */
.image-container img + img {
    margin-left: 100px; /* 이미지 2와 이미지 1 사이에 100px의 간격 설정 */
}



.container {
    width: 100%;
    max-width: 1500px;
    
    margin: 0 auto; 
    text-align: center;
    background-color: #ffffff;
}

.box {
    display: inline-block;
    width: 400px;
    margin: 10px;
    background-color: rgb(255, 255, 255);
    font-weight: bold; 
    font-size: 18px;
    border: 2px solid rgb(230, 230, 230);
}



/* 슬라이드 */
* {margin:0;padding:0;}
	.section input[id*="slide"] {display:none;}
	.section .slidewrap {max-width:1200px; margin:0 auto;}
	.section .slidelist {white-space:nowrap;font-size:0;overflow:hidden;position:relative;}
	.section .slidelist > li {display:inline-block;vertical-align:middle;width:100%;transition:all .5s;}
	.section .slidelist > li > a {display:block;position:relative;}
	.section .slidelist > li > a img {width:100%;}
	.section .slidelist label {position:absolute;z-index:10;top:50%;transform:translateY(-50%);padding:50px;cursor:pointer;}
	.section .slidelist .textbox {position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);line-height:1.6;text-align:center;}
	.section .slidelist .textbox h3 {font-size:36px;color:#ffffff;;transform:translateY(30px);transition:all .5s;}
	.section .slidelist .textbox p {font-size:16px;color:#fff;opacity:0;transform:translateY(30px);transition:all .5s;}
	
	/* input에 체크되면 슬라이드 효과 */
	.section input[id="slide01"]:checked ~ .slidewrap .slidelist > li {transform:translateX(0%);}
	.section input[id="slide02"]:checked ~ .slidewrap .slidelist > li {transform:translateX(-100%);}
	.section input[id="slide03"]:checked ~ .slidewrap .slidelist > li {transform:translateX(-200%);}

	/* input에 체크되면 텍스트 효과 */
	.section input[id="slide01"]:checked ~ .slidewrap li:nth-child(1) .textbox h3 {opacity:1;transform:translateY(0);transition-delay:.2s;}
	.section input[id="slide01"]:checked ~ .slidewrap li:nth-child(1) .textbox p {opacity:1;transform:translateY(0);transition-delay:.4s;}
	.section input[id="slide02"]:checked ~ .slidewrap li:nth-child(2) .textbox h3 {opacity:1;transform:translateY(0);transition-delay:.2s;}
	.section input[id="slide02"]:checked ~ .slidewrap li:nth-child(2) .textbox p {opacity:1;transform:translateY(0);transition-delay:.4s;}
	.section input[id="slide03"]:checked ~ .slidewrap li:nth-child(3) .textbox h3 {opacity:1;transform:translateY(0);transition-delay:.2s;}
	.section input[id="slide03"]:checked ~ .slidewrap li:nth-child(3) .textbox p {opacity:1;transform:translateY(0);transition-delay:.4s;}

	/* 좌,우 슬라이드 버튼 */
	.slide-control > div {display:none;}
	.section .left {left:30px;background:url('./img/left.png') center center / 100% no-repeat;}
	.section .right {right:30px;background:url('./img/right.png') center center / 100% no-repeat;}
	.section input[id="slide01"]:checked ~ .slidewrap .slide-control > div:nth-child(1) {display:block;}
	.section input[id="slide02"]:checked ~ .slidewrap .slide-control > div:nth-child(2) {display:block;}
	.section input[id="slide03"]:checked ~ .slidewrap .slide-control > div:nth-child(3) {display:block;}

	/* 페이징 */
	.slide-pagelist {text-align:center;padding:20px;}
	.slide-pagelist > li {display:inline-block;vertical-align:middle;}
	.slide-pagelist > li > label {display:block;padding:5px 15px;border-radius:30px;background:#ccc;margin:20px 10px;cursor:pointer;}
	.section input[id="slide01"]:checked ~ .slidewrap .slide-pagelist > li:nth-child(1) > label {background:#999;}
	.section input[id="slide02"]:checked ~ .slidewrap .slide-pagelist > li:nth-child(2) > label {background:#999;}
	.section input[id="slide03"]:checked ~ .slidewrap .slide-pagelist > li:nth-child(3) > label {background:#999;}