@charset "utf-8";
/* CSS Document */

*{
    padding: 0;
    margin: 0;
    border: none;
}
body {

	margin: 0 auto;

	padding: 0;

	font-size: 10pt;	
	
}
#menu_img {
	width: 100%;
	height:600px;
	background-color:#c9e9e6;
	
}
#wrap_all {

	position: relative;

	clear: both;

	height: 80px;

	width: 100%;

	margin: 0 auto;
    
    line-height: 70px;
    
}

#wrap {

	width: 100%;

	height: 80px;

	clear: both;

	overflow: hidden;

	transition: width 1s, height 1s;

	margin: 0 auto;

    
}


#wrap:hover{

	width: 100%;

	height: 500px;

	clear: both;

	overflow: hidden;


}

#menu_all {

	width: 100%;

	height: 500px;

	clear: both;
	
	margin: 0 auto;
	
    
}

#menu01_all {

	width: 20%;

	height: 500px;

	float: left;

    
}

.im {
	width:100%;
	height:auto;
}
#menu02_all {

	width: 10%;

	height: 500px;

	float: right;

}

#menu02_all > #menu_up > a{
	
	background-color: #6A24FE;

	color:white;

	padding: 10px;

	border-radius: 15px;

}

#menu03_all {

	width: 10%;

	height: 500px;

	float: right;

}

#menu04_all {

	width: 10%;
	
	height: 500px;

	float: right;


}

#menu05_all {

	width: 10%;

	height: 500px;

	float: right;

}


#menu_up {

	color: #19191c;

	text-align: center;

	position: relative;
	
	
}
#main-text{

	background: -webkit-linear-gradient(-70deg, #db469f 0%, #2188ff 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    -webkit-box-decoration-break: clone;

    font-size:40px;

    font-weight:1000;

	width:100%;

	display: inline-block;

	position:absolute;

    top: 0;

	left: 0;
	
	padding:0;

    font-family: 'NanumSquareRound', sans-serif;

}
#main-text > img {
	height: 60px;
	padding:0;
	margin: 0 auto;
	margin-top:5px;
}
#main-text-wrapper {

    white-space: nowrap; /* 추가: 텍스트가 한 줄에 유지되도록 설정 */
}

#menu_up > a {

	font-size: x-large;

	font-weight: bold;

	color: #666;

	text-decoration: none;

    font-family: 'NanumSquareRound', sans-serif;

    font-weight: bold;


}

#menu_up > a:hover {


    font-size: x-large;

	color: #66D1FF;

	text-decoration: none;

    font-family: 'NanumSquareRound', sans-serif;
    
    font-weight: bold;

}

#menu_down {

	font-size: 15px;

	line-height: 20px;

	text-align: center;

	text-decoration: none;
	
	line-height: 2;
	
}

	

#menu_down > a:hover {
	color: #66D1FF;
}





a {

	text-decoration: none;



}

a:link {

	text-decoration: none;

	font-size: 12px;

}



a:visited {

	text-decoration: none;

	color: #000;


}

a:active {

	text-decoration: none;

	color: #000;

}

#up_01 {
	width:25%;
	height:45px;
	background-color:#ABCEA8;
	text-align:right;
	line-height:10px;
}
#up {
	width:100%;
	height:45px;
	background-color:#ABCEA8;
	margin: 0 auto;
	
}
@media only screen and (max-width: 800px) {
	#wrap_all {
		height: auto;
	}

	#wrap {
		height: auto;
	}

	#menu_all {
		height: auto;
	}

	#menu01_all {
		width: 100%;
		height: auto;
		float: none;
	}

	#menu02_all {
		width: 100%;
		height: auto;
		float: none;
	}

	#menu02_all > #menu_up > a {
		margin-top: 10px;
		margin-bottom: 10px;
		display: block;
	}

	#menu03_all {
		width: 100%;
		height: auto;
		float: none;
	}

	#menu04_all {
		width: 100%;
		height: auto;
		float: none;
	}

	#menu05_all {
		width: 100%;
		height: auto;
		float: none;
	}

	#menu_up {
		position: relative;
		margin-bottom: 20px;
	}

	#main-text {
		font-size: 30px;
	}

	#main-text > img {
		height: 40px;
	}
}
@media (max-width: 700px) {
	#menu_up {
	  display: inline-block; /* 추가: 가로로 배치되도록 설정 */
	  width: 100%; /* 추가: 가로 폭 100%로 설정 */
	  padding: 0px; /* 추가: 내부 여백 설정 */
	  text-align: center;
	}
	
	#menu_up > a {
	  font-size: 20px; /* 추가: 폰트 크기 조정 */
	}
	
	.main_text {
	font-size: 0; /* 추가: 글자 숨김 */
	}
	
	.main_text > img {
	display: block; /* 추가: 이미지만 보이도록 설정 */
	}
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
/*로그인*/
#main_color {
    width: 100%;
    height: 1000px;
    background: linear-gradient(-45deg, #fc5c7d,#6610f2, #6a82fb, #eaafc8);
	animation: gradient 15s ease infinite;
	background-size: 400% 400%;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 100px;
    font-family: 'NanumSquareRound', sans-serif;
    font-weight: bold;
    position: relative; /* 추가: 상대 위치 지정 */
}

.login-wrapper{
    width: 25%;
    height: 600px;
    padding: 40px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 30px;
    position: absolute; /* 수정: 절대 위치 지정 */
    top: 50%; /* 수정: 요소를 수직 중앙으로 위치시킴 */
	right: 10%; /* 수정: 오른쪽 여백 10%로 조정 */
    transform: translateY(-50%); /* 수정: 수직 중앙 정렬을 위한 이동 */
	font-family: 'NanumSquareRound', sans-serif;
    font-weight: bold
}
@media (max-width: 700px) {
	.login-wrapper {
		width: 80%; /* 추가: 창 너비에 맞게 조정 */
		max-width: none; /* 추가: 최대 너비 제거 */
		right: 50%; /* 수정: 오른쪽 여백 제거 */
		left: 50%; /* 수정: 왼쪽 여백 50%로 조정 */
		transform: translateX(-50%) translateY(-50%); /* 추가: 수평, 수직 중앙 정렬 */
		box-sizing: border-box; /* 추가: 박스 모델 변경 */
	  }
}
.login-wrapper > h2{
    font-size: 30px;
    color: #6A24FE;
    margin-bottom: 20px;
    font-family: 'NanumSquareRound', sans-serif;
    font-weight: bolder;
	
}

.login-wrapper > h3{
    font-size: 20px;
    color: #19191c;
    margin-bottom: 20px;
    font-family: 'NanumSquareRound', sans-serif;
    font-weight: bold;
}

#login-form > input{
    width: 100%;
    height: 60px;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 16px;
    border-radius: 6px;
    background-color: #F8F8F8;
}
#login-form > input::placeholder{
    color: #D2D2D2;
	font-size:20px;
}
#login-form > input[type="submit"]{
    color: #fff;
    font-size: 25px;
    background-color: #6A24FE;
    margin-top: 20px;
    
}

#login_icon{
    text-align: center;
}

.login-wrapper hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 20px 0;
}

.main_text {
	position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    color:white;
    font-size:100px;
    margin-left:150px;
    text-shadow: 0 3px 3px #19191c, 0 3px 3px #19191c;
	/*
	position: absolute;
	top: 50%;
	left: 0%;
	margin-left:150px;
	transform: translate(-50%,-50%);
	padding: 12px 48px;
	color: #fff;
	background: linear-gradient(to right, #fffbed 0, white 10%, #faffe4 20%);
	background-position: 0;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shine 3s infinite linear;
	animation-fill-mode: forwards;
	-webkit-text-size-adjust: none;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	font-family: 'NanumSquareRound', sans-serif;
    font-weight: bolder;
	font-size:100px;
	transform: translate(0, -50%);*/
	
	
}
@keyframes shine {
0%{
	background-position: 0
}
    
60%{
	background-position: 180px;
}
    
100%{
	background-position: 180px;
}
    
}


.main_s_text{
    text-align: center;
    position: absolute;
    top: 68%;
    left: 0;
    transform: translate(0, -50%);
    color:white;
    font-size:35px;
    margin-left:10%;
    text-shadow: 0 1px 1px #19191c, 0 1px 1px #19191c;
    font-family: 'NanumSquareRound', sans-serif;
    font-weight: bold;
}

#poly_w{
	position: absolute;
    bottom: 3%;
    left: 5%;
    padding: 0px;
    font-family: 'NanumSquareRound', sans-serif;
    font-weight:bolder;
    font-size: 25px;
    display: flex;
    align-items: center;
	color:white;

}

/*책 보여주기*/

#left-banner{
	display: flex;
  	align-items: center; /* 이미지를 수직 중앙으로 정렬 */
  	flex-direction: column; /* 이미지를 세로로 배치 */
  	width: 10%;
  	height: 2500px;
  	background: linear-gradient(45deg, aquamarine, blueviolet);
}
#left-banner > img{
	height:50px;
	display: flex;
	flex-direction:row;
	padding:10px;
}
#top-list{
	width:90%;
	margin-left: auto;
	height: 7px;
	padding:50px;
	font-family: 'NanumSquareRound', sans-serif;
    font-weight:800;
    font-size: 50px;
	background: -webkit-linear-gradient(-70deg, #db469f 0%, #2188ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
	background-size: 10%;
	align-self: flex-start;
	
}
.container {
	display: flex;
	width:100%;
	float:right;
}
#menu-list{
	width: 90%;
	margin-left: auto;
	height: 30px;
	padding: 10px;
	font-family: 'NanumSquareRound', sans-serif;
	font-size: 20px;
}
#menu-list > a{
	font-size:23px;
	font-family: 'NanumSquareRound', sans-serif;
	font-weight: bold;
}
#menu-list > a:hover{
	color:#6610f2
}
.container-body{
	display: flex;
	flex-direction: column;
	width: 100%;
}
#top-icon{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 90%;
	margin-left: auto;
}
#top-icon > img{
	height: 30px;
	margin-left: 10px;
}
  /* .book-image 클래스의 스타일 정의 */
.book-image {
	width: 240px;
	height: 370px;
	border-radius: 30px;
	transition: opacity 0.3s ease;
}

/* .book-group 요소의 스타일 정의 */
.book-group {
	display: flex;
    justify-content: center;
    margin-bottom: 20px; /* 한 행 사이에 간격을 주기 위한 마진 설정 */
    width: 100%;
	padding:30px;
}

/* #book-list 요소의 스타일 정의 */
#book-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
/* #book-list 내부의 이미지 스타일 정의 */
#book-list .book-container img {
	width: 240px; /* 이미지의 너비 설정 */
	height: 300px; /* 이미지의 높이는 자동으로 조정 */
	margin: 10px; /* 이미지 간의 간격 설정 */
	border-radius: 30px;
	transition: opacity 0.3s ease; /* 호버 효과의 전환 시간과 속도 곡선 설정 */
}
.book-title {
	font-weight: bolder;
	font-size: large;
	margin-top: 10px;
	text-align: center;
	font-family: 'NanumSquareRound', sans-serif;
}

.book-issued-date {
	margin-top: 5px;
	text-align: center;
	font-family: 'NanumSquareRound', sans-serif;
}
/* #book-list 내부의 이미지 호버 효과 스타일 정의 */
#book-list .book-container:hover img {
opacity: 0.5;
filter: alpha(opacity=50);
}

/* #book-list 내부의 제목 스타일 정의 */
#book-list .book-container .book-title {
font-weight: bold;
margin-top: 10px;
}

/* #book-list 내부의 발행일 스타일 정의 */
#book-list .book-container .book-issued-date {
margin-top: 5px;
}

#top-list {
	font-family: 'Nanum Square Round', sans-serif;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}

.book-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 10px;
}
#menu-list {
	margin-bottom: 20px;
}

@media only screen and (max-width: 700px) {
	#left-banner {
		width: 100%;
		height: auto;
		padding: 20px;
	}

	#left-banner > img {
		height: 40px;
	}

	#top-list {
		width: 100%;
		padding: 20px;
		font-size: 30px;
		height:30px;
	}

	.container {
		flex-direction: column;
	}

	#menu-list {
		width: 100%;
		margin: 0;
		padding: 20px;
		font-size: 18px;
	}

	#top-icon {
		width: 100%;
		padding: 20px;
	}

	#top-icon > img {
		height: 20px;
	}

	.book-group {
		padding: 20px;
	}

	#book-list .book-container img {
		width: 100%;
		height: auto;
		margin: 10px 0;
	}

	.book-image {
		width: 100%;
		height: auto;
		border-radius: 20px;
	}

	.book-title {
		margin-top: 5px;
		font-size: medium;
	}

	.book-issued-date {
		margin-top: 2px;
		font-size: small;
	}
}
/*지도페이지*/
#daumRoughmapContainer1684904682760{
	margin: 0 auto;
}

.container-body hr {
	display: block;
	height: 1px;
	border: none;
	background-color: #bdc3c7;
	margin: 20px 0;
	width:70%;
	margin:0 auto;
}
#address-text{
	text-align: center;
	margin: 0 auto;
}
#address-text > h1{
	font-size:23px;
	font-family: 'NanumSquareRound', sans-serif;
	font-weight: bold;
	float:left;
	color:#666;
	line-height:70px;
}

#address-text > img{
	float:left;
	
}
/*검색페이지*/

.search {
	position: relative;
	width: 60%;
	margin: 0 auto;
	height:50px;
}


.search > input {
	width: calc(100% - 40px); /* 이미지 크기만큼 너비를 감소시킴 */
	border: 1px solid #bbb;
	border-radius: 8px;
	padding: 18px 28px;
	font-family: 'NanumSquareRound', sans-serif;
	font-size: 20px;
	height: 30px;
	border-radius: 30px;
}

.search > img {
	position: absolute;
	width: 40px; /* 수정: 이미지의 너비 조정 */
	height: 40px; /* 수정: 이미지의 높이 조정 */
	top: 0;
	right: 0;
	margin: auto;
	padding: 7px;
	cursor: pointer;
}

.recommand > h1  {
	font-family: 'NanumSquareRound', sans-serif;
    font-weight:800;
    font-size: 30px;
	color:#666;
	background-size: 20%;
	padding:8%;

}
#book-recommand{
	width:60%;
	text-align: center;
	margin: 0 auto;
}
#book-recommand > h1{
	font-family: 'NanumSquareRound', sans-serif;
    font-weight:800;
    font-size: 30px;
	color:#666;
	background-size: 20%;
	padding:8%;
	text-align: left;
}
#book-recommand > a > img{
	width:200px;
	height:300px;
	padding:10px;
	border-radius: 30px;
}
#book-recommand > a > img:hover{
	opacity: 0.5;
	filter: alpha(opacity=50);

}

.wrapper{
	display: flex;
	max-width: 1200px;
	position: relative;
	margin: 0 auto;
}
.wrapper i{
	top: 50%;
	height: 44px;
	width: 44px;
	color: #343F4F;
	cursor: pointer;
	font-size: 1.15rem;
	position: absolute;
	text-align: center;
	line-height: 44px;
	background: #fff;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: transform 0.1s linear;
}
.wrapper i:active{
	transform: translateY(-50%) scale(0.9);
}
.wrapper i:hover{
	opacity: 0.5;
	filter: alpha(opacity=50);
}
.wrapper i:first-child{
	left: -22px;
	display: none;
}
.wrapper i:last-child{
	right: -22px;
}
.wrapper .carousel{
	font-size: 0px;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	scroll-behavior: smooth;
}
.carousel.dragging{
	cursor: grab;
	scroll-behavior: auto;
}
.carousel.dragging img{
	pointer-events: none;
}
.carousel img{
	height: 300px;
	object-fit: cover;
	user-select: none;
	margin-left: 14px;
	width: calc(100% / 6);
	border-radius: 20px;;
}
.carousel img:first-child{
	margin-left: 0px;
}
.carousel img:hover{
	opacity: 0.5;
	filter: alpha(opacity=50);
}

@media screen and (max-width: 700px) {
	.carousel img{
	width: calc(100% / 2);
	}
}

@media screen and (max-width: 550px) {
	.carousel img{
	width: 100%;
	}
}

/*이미지*/
img{min-height: 100%; max-width: 100%; }
        .imgHoverEvent{width: 200px; height: 200px; margin: 30px; position: relative; overflow: hidden; display: inline-block;}
        .imgHoverEvent .imgBox{width: 200px; height: 200px; text-align: center; background:url(http://gahyun.wooga.kr/portfolio/triple/resources/img/city00.jpg) no-repeat 50% 50%; background-size: auto 100%;}
        .imgHoverEvent .hoverBox{position: absolute; top:0; left: 0; width: 200px; height: 200px;}
        .hoverBox p.p1{text-align:center; font-size:18px;}
        .hoverBox p.p2{margin-top: 40px;}

        .event7 .hoverBox span{display: block; border: 4px solid #ccc; position: absolute; top: 50%; transform: translateY(-50%); height: 30px; width: 80%; left: 10%;transition: 0.5s;}
        .event7 .hoverBox span p{ opacity: 0; }
        .event7:hover .hoverBox span{animation: event7Ani 0.8s linear 1; height: 150px;}
        .event7:hover .hoverBox span p{animation: event7Ani2 0.8s linear 1; opacity: 1;}

        @keyframes event7Ani{
            0%{height: 30px;}
            80%{height: 150px;}
            100%{height: 150px;;}
        }
        @keyframes event7Ani2{
            0%{opacity: 0;}
            80%{opacity: 0;}
            100%{opacity: 1;}
        }

/*보글보글*/
.minimal {
	box-shadow: 2px 2px 5px rgba(0, 0 0, 0.15);
	background: white;
	display: grid;
	align-content: center;
	justify-content: center;
	border-radius: 5px;
}

.minimal> .element-1 {
width: 300px;
height: 80px;
}

.element-2 {
width: 300px;
height: 300px;
}


.lit-container:hover .lit,
.lit-container:focus-within .lit {
background: hsla(0deg, 0%, 60%, 20%) !important;
}

/* lit --------------------------- */

[data-lit-hue] {
position: relative;
}

span.lit {
border-radius: 50%;
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
animation: blow 2s ease-in infinite;
transition: all 400ms ease;
}

@keyframes blow {
0% {
	transform: translate(-50%, -50%) scale(0.1);
	opacity: 0;
}

10% {
	transform: translate(-50%, -50%);
	opacity: 1;
}

100% {
	transform: translate(-50%, -40vh);
	opacity: 0;
}
}
/*이벤트 CSS*/
.event-wrapper {
	margin: 150px auto;
	text-align: center;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center; /* 가로 정렬 및 가운데 정렬 */
	align-items: center;
	height: 50px;
}

.event-btn3 {
	padding: 10px;
	color: #fff;
	text-align: center;
	position: relative;
	display: inline-block;
	width: 15%;
	height:30px;
	font-family: 'NanumSquareRound', sans-serif;
}

.event-btn3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: #000;
	transform: scaleX(0.3);
	opacity: 0;
	transition: all 0.3s;
	
}

.event-btn3:hover::before {
	opacity: 1;
	background-color: #6610f2;
	transform: scaleX(1);
	transition: transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity 0.4s;
}

.event-wrapper > a {
	color: #6610f2; /* 버튼 텍스트 색상 설정 */
	text-decoration: none; /* 버튼 텍스트 밑줄 제거 */
	font-family: 'NanumSquareRound', sans-serif;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.event-wrapper > a:hover {
	color: #fff !important;
}


/* 검색 결과 제목 글꼴 */
h2 {
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: bold;
    font-size: 25px;
	margin: 0 auto;
	text-align: center;
	padding:10px;
}

/* 발행일과 로컬 ID 글꼴 */
p {
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 18px;
	margin: 0 auto;
	text-align: center;
}

.booksearch-image {
    display: block;
    margin: 0 auto;
	width:30%;
	height:auto;
	border: 1px solid #666;
	border-radius: 70px;
}

/*탭메뉴*/

#tabs {
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	
}

#tabs li {
	float: left;
	margin: 0 .5em 0 0;
	background-color: #fff;
}

#tabs a {
	position: relative;
	background: #fff;
	color:#6610f2;
	padding: .7em 3.5em;
	float: left;
	text-decoration: none;
	border:1px solid #6A24FE;
	border-radius: 10px;
	font-family: 'NanumSquareRound', sans-serif;
	font-size: large;
	height:20px;
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after {
	color:#6610f2;
}

#tabs a:focus {
	outline: 0;
	background-color: #6610f2;
	color:white;
}


#tabs #current a,
#tabs #current a::after {
	background: 6610f2;
	z-index: 3;
}

#tab-content {
	background: #fff;
	padding: 2em;
	height: 220px;
	position: relative;
	z-index: 2;
	border-radius: 10px;
	color:black;
}
.tab-all{
	text-align: center;
	margin:0 auto;
	width:80%;
}

.tab-all .tab-pane {
	display: none;
	color: black;
}

.tab-all .tab-pane.active {
display: block;
}
/* event css */
#tab1, #tab2{
	font-family: 'NanumSquareRound', sans-serif;
	font-size: large;
}
#tab1 > img, #tab2 > img, #tab4 > img{
	border-radius: 50px;
}
#tab3, #tab4, #tab5{
	font-family: 'NanumSquareRound', sans-serif;
	font-size:large;
}
#tab3 > li, h4 , #tab4 > li{
	text-align: left;
	padding:5px;
}
#tab3 > h4, #tab3 > h2, #tab4 > h4, #tab4 > h2, #tab5 > h2{
	color:#6A24FE;
	font-family: 'NanumSquareRound', sans-serif;
}
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    border: 1px solid #dddddd;
    padding: 8px;
    text-align: left;
}
td {
	border: 1px solid #dddddd;
    padding: 8px;
}
th {
    background-color: #f2f2f2;
}
tr.book-row {
    height: 100px;
}
td > img{
    height: 300px;
	width: 200px;
	text-align: center;
	margin: 0 auto;
}
th.title {
    background-color: transparent;
    color: #6610f2; /* 원하는 색상으로 변경 */
    font-size: 25px; /* 원하는 글꼴 크기로 변경 */
	font-weight: bolder;
	border:none;
}

/* Media Queries for Responsive Styling */
/* 반응형 스타일 */

/* 작은 화면에서의 스타일 */
@media only screen and (max-width: 600px) {
	#tabs a {
		padding: .7em 2.5em;
		font-size: medium;
	}
	
	.tab-all {
		width: 90%;
	}
	
	td > img {
		height: 200px;
		width: 150px;
	}
	
	th.title {
		font-size: 20px;
	}
}

/* 중간 화면에서의 스타일 */
@media only screen and (min-width: 601px) and (max-width: 900px) {
	#tabs a {
		padding: .7em 3em;
		font-size: large;
	}
}

/* 큰 화면에서의 스타일 */
@media only screen and (min-width: 901px) {
	#tabs a {
		padding: .7em 3.5em;
		font-size: large;
	}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	td > img {
	height: 300px;
	width: 350px;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
td > img {
	height: 400px;
	width: 30px;
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
td > img {
	height: 300px;
	width: 200px;
}
}

#map {width:500px; height:400px;}