body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
	
	color: inherit;

}

a {
  text-decoration: none;
  color: #666666;
}

a:hover{
	color: #000000;
}

@media all and (min-width: 1025px) {
	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
		margin-top: 20px;
	}

	.gallery-item img {
		width: 100%;
		height: 300px;
		//height: auto;
		border-radius: 8px;
	}

	.pagination {
		margin-top: 20px;
		text-align: center;
	}

	.pagination a {
		display: inline-block;
		padding: 10px 15px;
		margin: 0 5px;
		text-decoration: none;
		color: #333;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.pagination a.active {
		background-color: #333;
		color: #fff;
		border-color: #333;
	}

	.pagination a:hover {
		background-color: #f4f4f4;
	}


	notice-list ul {
		padding: 1em;
	}

	notice-list ul li {
		margin: 0.8em 1.5em;
	}

	notice-list ul li a {
		color: #666666;

		text-decoration: none;
		font-size: 1.0em;
	}

	notice-list ul li a:hover {
		color: #000000;

	}

	.notice-content{
		text-decoration: none;
		text-decoration-line: none;
	}
	.inputcss {
		width: 20em;
		height: 2.4em;
		font-size: 1.0em;
		border: 0;
		border-radius: 1.0em;
		outline: none;
		padding-left: 1em;
		background-color: rgb(233, 233, 233);
	}

	.textareacss {
		width: 40em;
		height: 7em;
		font-size: 1.2em;
		border: 0;
		border-radius: 1.0em;
		outline: none;
		padding: 1em 1em 1em 1em;
		background-color: rgb(233, 233, 233);
	}

	header {
		background-color: #333;
		color: white;
		padding: 10px 0;
		text-align: center;
	}

	footer {
		background-color: #333;
		color: white;
		text-align: center;
		padding: 10px;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	nav ul {
		list-style-type: none;
		padding: 5;
	}

	nav ul li {
		display: inline;
		margin: 0px 36px;
	}

	nav ul li a {
		color: white;
		text-decoration: none;
		font-size: 1.5em;
		margin: 0em 0.2em;
	}

	.main-content, .about, .notice, .notice-detail, .contact, .gallery {
		font-family: arial;
		font-size: 1.4em;
		color: #666666;
		width: 1180px;
		height: 23em;
		border-radius: 20px;
		padding:5px 50px 5px 50px;
		margin: auto;


	}

	.btn {
		background-color: #4CAF50;
		color: white;
		padding: 10px 20px;
		text-decoration: none;
		border-radius: 5px;
	}

	.contactbtn {
		background-color: #4CAF50;
		border:0;
		color: white;
		padding: 0.5em 1em;
		text-decoration: none;
		font-size:1.0em;
		border-radius: 0.5em;
	}

	.gallery-images img {
		width: 30%;
		margin: 10px;
		border-radius: 5px;
	}

	.logo{
		position: relative;
		margin: 0 auto;
		width:100%;
		height:500px;
		background-image: url("https://semost.co.kr/images/semo_main_1920_500.jpg");
		background-size: cover;
		background-position: center;

	}
	.logotext{
		position: absolute;
		width:25em;
		font-size: 2.2em;
		font-weight:bold;
		color:yellow;
		text-shadow: 3px 4px 5px black;
		text-align:right;
		left:50%;
		top:2.3em;
		margin-left: -8.5em;

	}
	
	.logotext3{
		width:25em;
		position: absolute;
		font-weight:bold;
		color:pink;
		font-size: 1.6em;
		text-shadow: 3px 4px 5px black;
		text-align:right;
		left:50%;
		top:5.0em;
		margin-left: -2.5em;

	}
	
		.logotext2{
		width:25em;
		position: absolute;
		font-weight:bold;
		color:white;
		font-size: 1.7em;
		text-shadow: 3px 4px 5px black;
		text-align:right;
		left:50%;
		bottom:2.6em;
		margin-left: -4em;

	}
	.main_image{
		position: absolute;
		//	filter: drop-shadow(0px 0px 2px white);
		width:7em;
		left:50%;
		top:2em;
		margin-left: -18em;
	}

	.modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}
	.modal img {
		top:150px;
		max-width: 90%;
		max-height: 90%;
		border: 1px solid black;
		border-radius: 1.5em;
	}

	.modal .modal-text2 {
		position: absolute;
		left:20px;
		bottom:200px;
		width:19.5em;
		color: #000;
		padding:8px 15px 8px 15px;
		font-size: 1.0em;
		background-color:#fff; opacity : 0.8;
		border: 1px solid white;
	}

	.modal .modal-text {
		position: absolute;
		left:20px;
		bottom:50px;
		width:24.4em;
		height:10em;
		color: #000;
		padding:8px 15px 8px 15px;
		font-size:0.8em;
		background-color:#fff; opacity : 0.5;
		border: 1px solid white;
	}

	.modal .close {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 4em;
		color: white;
		cursor: pointer;
	}

	/* ÀÌÀü/´ÙÀ½ ¹öÆ° */
	.modal .prev, .modal .next {
		position: absolute;

		top: 50%;
		font-size: 5em;
		color: white;
		cursor: pointer;
		transform: translateY(-50%);
	}

	.modal .prev {
		left: 20px;
	}

	.modal .next {
		right: 20px;
	}

	.zoom-controls {
		position: absolute;
		top: 20px;
		right: 100px;
		display: flex;
		gap: 10px;
		z-index: 1010;
	}

	.zoom-controls button {
		font-size:2em;
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		border: none;
		cursor: pointer;
		border-radius: 20%;
	}

	.zoom-controls button:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}

	.parent {
		border: 0px solid black;
		margin: 1px;
		padding: 10px;
		text-align: center;
	}
	.child {
		display: inline-block;
		width: 300px;
		height: 300px;
		padding: 20px;
		background-color: #eee;
		text-align:left;
		margin:5px;
		vertical-align:top;
		font-size:0.68em;
		border: 2px solid #C0C0C0;
		border-radius: 1em;

	}

	.aboutparent {
		margin: 1px;
		padding: 15px;
		text-align: center;
		line-height:6em;
	}
	.aboutchild {
		display: inline-block;
		width: 60%;
		padding: 20px;
		text-align:left;
		margin:5px;
		vertical-align:top;
		font-size:0.9em;
		line-height:1.8em;

	}
	.aboutchild2 {
		display: inline-block;
		width: 300px;
		height: 500px;
		padding: 20px;
		text-align:left;
		margin:5px;
		background-image:url("https://semost.co.kr/uploads/500/img_67b4b9cf585e35.99553554.jpg");
		background-size:cover;
		background-position:right,center;
	}

}


@media all and (min-width: 768px) and (max-width: 1024px) {

	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		margin-top: 20px;
	}

	.gallery-item img {
		width: 100%;
		height:230px;
		//	height: auto;
		border-radius: 5px;
	}


	.pagination {
		margin-top: 20px;
		text-align: center;
	}

	.pagination a {
		display: inline-block;
		padding: 10px 15px;
		margin: 0 5px;
		text-decoration: none;
		color: #333;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.pagination a.active {
		background-color: #333;
		color: #fff;
		border-color: #333;
	}

	.pagination a:hover {
		background-color: #f4f4f4;
	}
	.inputcss {
		width: 20em;
		height: 2.4em;
		font-size: 1.0em;
		border: 0;
		border-radius: 1.0em;
		outline: none;
		padding-left: 1em;
		background-color: rgb(233, 233, 233);
	}

	.textareacss {
		width: 38em;
		height: 7em;
		font-size: 1.2em;
		border: 0;
		border-radius: 1.0em;
		outline: none;
		padding: 1em 1em 1em 1em;
		background-color: rgb(233, 233, 233);
	}

	header {
		background-color: #333;
		color: white;
		padding: 10px 0;
		text-align: center;
	}
	footer {
		background-color: #333;
		color: white;
		text-align: center;
		padding: 10px;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	nav ul {
		list-style-type: none;
		padding: 0;
	}

	nav ul li {
		display: inline;
		margin: 0 30px;
	}

	nav ul li a {
		color: white;
		text-decoration: none;
		font-size: 1.3em;
	}

	.main-content, .about, .notice, .notice-detail, .contact, .gallery {
		font-family: arial;
		font-size: 1.0em;
		color: #666666;
		width: 90%;
		height: 25em;
		padding:5px 10px 5px 10px;
		margin: auto;
	}

	.btn {
		background-color: #4CAF50;
		color: white;
		padding: 10px 20px;
		text-decoration: none;
		border-radius: 5px;
	}

	.contactbtn {
		background-color: #4CAF50;
		border:0;
		color: white;
		padding: 0.5em 1em;
		text-decoration: none;
		font-size:1.0em;
		border-radius: 0.5em;
	}

	.gallery-images img {
		width: 30%;
		margin: 10px;
		border-radius: 5px;
	}

	.logo{
		margin: 0 auto;
		width:100%;
		height:200px;
		background-image: url("https://semost.co.kr/images/semo_main_1920_500.jpg");
		background-size: cover;
		background-position: center;
	}

	.logotext{
		position: absolute;
		width:25em;
		font-size: 1.6em;
		font-weight:bold;
		color:yellow;
		text-shadow: 3px 4px 5px black;
		text-align:right;
		left:50%;
		top:1.2em;
		margin-left: -11.8em;

	}
		.logotext3{
		width:25em;
		position: absolute;
		font-weight:bold;
		color:pink;
		font-size: 1.2em;
		text-shadow: 3px 4px 5px black;
		text-align:right;
		left:50%;
		top:3.5em;
		margin-left: -7.5em;

	}
	.logotext2{
		width:25em;
		position: absolute;
		font-weight:bold;
		color:white;
		font-size: 1.12em;
		text-shadow: 3px 4px 5px black;
		text-align:right;
		left:50%;
		top:7em;
		margin-left: -5.8em;

	}

	.main_image{
		position: absolute;
		//	filter: drop-shadow(0px 0px 2px white);
		width:5em;
		left:50%;
		top:1em;
		margin-left: -12.5em;
	}

	.modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal img {
		max-width: 90%;
		max-height: 90%;
		border: 1px solid black;
		border-radius: 8px;
		transition: transform 0.3s ease; /* È®´ë/Ãà¼Ò ¾Ö´Ï¸ÞÀÌ¼Ç */
	}

	.modal .modal-text2 {
		position: absolute;
		left:20px;
		bottom:200px;
		width:15em;
		color: #000;
		padding:8px 15px 8px 15px;
		font-size: 0.8em;
		background-color:#fff; opacity : 0.8;
		border: 1px solid white;

	}


	.modal .modal-text {
		position: absolute;
		left:20px;
		bottom:80px;
		width:20em;
		height:10em;
		color: #000;
		padding:8px 15px 8px 15px;
		font-size:0.6em;
		background-color:#fff; opacity : 0.5;
		border: 1px solid white;



	}



	.modal .close {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size:1.5em;
		color: white;
		cursor: pointer;
	}

	/* ÀÌÀü/´ÙÀ½ ¹öÆ° */
	.modal .prev, .modal .next {
		position: absolute;

		top: 50%;
		font-size: 2.5em;
		color: white;
		cursor: pointer;
		transform: translateY(-50%);
	}

	.modal .prev {
		left: 20px;
	}

	.modal .next {
		right: 20px;
	}

	.zoom-controls {
		position: absolute;
		top: 100px;
		right: 100px;
		display: flex;
		gap: 10px;
		z-index: 1010;
	}

	.zoom-controls button {
		font-size:1.5em;
		padding: 5px;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		border: 1px;
		cursor: pointer;
		border-radius: 20%;
	}

	.zoom-controls button:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}
	.parent {
		border: 0px solid black;
		margin: 1px;
		padding: 40px;
		text-align: center;
	}
	.child {
		display: inline-block;
		width: 500px;
		height: 200px;
		margin:20px;
		padding: 25px;
		background-color: #efefef;
		text-align:left;
		vertical-align:top;
		font-size:0.9em;
		border: 1px solid #C0C0C0;
		border-radius: 1.5em;
	}
	.aboutparent {
		margin: 1px;
		padding: 15px;
		text-align: center;
	}
	.aboutchild {
		display: inline-block;
		width: 90%;
		padding: 20px;
		text-align:left;
		margin:5px;
		vertical-align:top;
		font-size:1em;
		line-height:1.8em;

	}
	.aboutchild2 {
		display: inline-block;
		width: 300px;
		height: 500px;
		padding: 20px;
		text-align:left;
		margin:5px;
		background-image:url("https://semost.co.kr/uploads/500/img_67b4b5fa3d96e1.30554537.jpg");
		background-size:cover;
		background-position:right,center;
	}

}

@media all and (min-width: 320px)  and (max-width: 767px) {

	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		margin-top: 20px;
	}

	.gallery-item img {
		width: 100%;
		height:180px;
		//height: auto;
		border-radius: 8px;
	}

	.pagination {
		margin-top: 20px;
		text-align: center;
	}

	.pagination a {
		display: inline-block;
		padding: 7px 10px;
		margin: 0 3px;
		text-decoration: none;
		color: #333;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.pagination a.active {
		background-color: #333;
		color: #fff;
		border-color: #333;
	}

	.pagination a:hover {
		background-color: #f4f4f4;
	}

	.inputcss {
		width: 18em;
		height: 2.4em;
		font-size: 0.9em;
		border: 0;
		border-radius: 1.0em;
		outline: none;
		padding-left: 1em;
		background-color: rgb(233, 233, 233);
	}

	.textareacss {
		width: 30em;
		height: 7em;
		font-size: 1em;
		border: 0;
		border-radius: 1.0em;
		outline: none;
		padding: 1em 1em 1em 1em;
		background-color: rgb(233, 233, 233);
	}

	header {
		background-color: #333;
		color: white;
		padding: 5px 0;
		text-align: center;
	}

	footer {
		background-color: #333;
		color: white;
		text-align: center;
		padding: 10px;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	nav ul {
		list-style-type: none;
		padding: 0;
	}

	nav ul li {
		display: inline;
		margin: 0 12px;
	}

	nav ul li a {
		color: white;
		text-decoration: none;
		font-size: 0.9em;
	}

	.main-content, .about, .notice, .notice-detail, .contact, .gallery {
		font-family: arial;
		font-size: 0.80em;
		color: #666666;
		width: 90%;
		height: 35em;
		padding:5px 10px 5px 10px;
		margin: auto;
	}

	.btn {
		background-color: #4CAF50;
		color: white;
		padding: 10px 20px;
		text-decoration: none;
		border-radius: 5px;
	}

	.contactbtn {
		background-color: #4CAF50;
		border:0;
		color: white;
		padding: 0.5em 1em;
		text-decoration: none;
		font-size:1.0em;
		border-radius: 0.5em;
	}

	.gallery-images img {
		width: 30%;
		margin: 10px;
		border-radius: 5px;
	}

	.logo{
		margin: 0 auto;
		width:100%;
		height:300px;
		background-image: url("https://semost.co.kr/images/semo_main_1920.jpg");
		background-size: cover;
		background-position: center;
	}

	.logotext{
		position: absolute;
		width:8.6em;
		font-size: 1.3em;
		font-weight:bold;
		color:yellow;
		text-shadow: 3px 4px 5px black;
		text-align:right;
		left:50%;
		top:1.7em;
  	margin-left: -1.0em;

	}
	
	.logotext3{
		width:11em;
		position: absolute;
		font-weight:bold;
		color:pink;
		font-size: 1.1em;
		text-shadow: 3px 4px 5px black;
		text-align:right;
		left:50%;
		top:5.0em;
		margin-left: -2em;

	}
	
	.logotext2{
		width:25em;
		position: absolute;
		font-weight:bold;
		color:white;
		font-size: 1em;
		text-shadow: 3px 4px 5px black;
		text-align:right;
		left:50%;
		top:13.2em;
		margin-left: -15.5em;

	}

	.main_image{
		position: absolute;
		//	filter: drop-shadow(0px 0px 2px white);
		width:4em;
		left:50%;
		top:0.5em;
		margin-left: -6.5em;
	}

	.modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal img {
		max-width: 90%;
		max-height: 90%;
		border: 1px solid black;
		border-radius: 8px;
		transition: transform 0.3s ease; /* È®´ë/Ãà¼Ò ¾Ö´Ï¸ÞÀÌ¼Ç */
	}

	.modal .modal-text2 {
		position: absolute;
		left:35px;
		bottom:78px;
		width:28em;
		font-weight:bold;
		color: #000;
		padding:4px 7px 4px 7px;
		font-size: 0.7em;
		background-color:#fff; opacity : 0.8;
		border: 1px solid white;

	}

	.modal .modal-text {
		position: absolute;
		left:35px;
		bottom:10px;
		width:28em;
		height:4.8em;
		color: #000;
		padding:4px 7px 4px 7px;
		font-size:0.7em;
		background-color:#fff; opacity : 0.8;
		border: 1px solid white;

	}


	.modal .close {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size:2em;
		color: white;
		cursor: pointer;
	}

	/* ÀÌÀü/´ÙÀ½ ¹öÆ° */
	.modal .prev, .modal .next {
		position: absolute;
		top: 50%;
		font-size: 2em;
		color: white;
		cursor: pointer;
		transform: translateY(-50%);
	}

	.modal .prev {
		left: 20px;
	}

	.modal .next {
		right: 20px;
	}
	.zoom-controls {
		position: absolute;
		top: 20px;
		right: 100px;
		display: flex;
		gap: 10px;
		z-index: 1010;
	}

	.zoom-controls button {
		font-size:1em;
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		border: none;
		cursor: pointer;
		border-radius: 20%;
	}

	.zoom-controls button:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}
	.parent {
		border: 0px solid black;
		margin: 1px;
		padding: 10px;
		text-align: center;
	}
	.child {
		display: inline-block;
		width: 23em;
		height: 16em;
		margin:5px;
		padding: 20px;
		background-color: #efefef;
		text-align:left;
		vertical-align:top;
		font-size:1em;
		border: 1px solid #C0C0C0;
		border-radius: 1.2em;
	}
	.aboutparent {
		margin: 1px;
		padding: 10px;
		text-align:center;
	}
	.aboutchild {
		display: inline-block;
		width: 96%;
		padding: 10px;
		text-align:left;
		margin:0px;
		vertical-align:top;
		font-size:1em;
		line-height:1.5em;

	}
	.aboutchild2 {
		display: inline-block;
		width: 300px;
		height: 500px;
		padding: 20px;
		text-align:left;
		margin:5px;
		background-image:url("https://semost.co.kr/uploads/500/img_67b4bc513278f4.87422105.jpg");
		background-size:cover;
		background-position:right,center;
	}

}