@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 700;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
}

html {margin:0;padding:0; background-color:#000;}
body {
	margin:0 auto; padding:0px;
	text-align:center;
	font-family:NanumBarunGothic;
	font-weight:bold;
	height: 100%;
}

table, img {border:none}

img {
	max-width: 100%;
}

.div_bg{
	position:relative;
	background-color:black;
    width: 100%;
	min-height:100vh;
	max-width:1280px;
	z-index:1;
}

.bottom_logo
{
	position:absolute;
	bottom:30px;
	right:30px;
	background:url("../homeimg/Bottom_Logo.png") no-repeat center 0;
	background-size: contain;
	width:20%;
	aspect-ratio:2/1.1;
	z-index:-1;
}

#logo{
	background:url("../homeimg/top_logo.png") no-repeat center 0;
	background-size: contain;
	width:91%;
	aspect-ratio:3/1;
	margin-top:6%;
	display:inline-block;
}

#main_content
{
	position:relative;
	width:78%;
	aspect-ratio:2/1.2;
	background:url("../homeimg/maincontent.png") no-repeat center 0;
	background-size: contain;
}

#notice
{
	container-type: inline-size;
	text-align:left;
	width:80%;
	color:white; 
	font-size:1.1em;
	line-height:2;
	text-shadow:
	1px 1px 0 #000,
	-1px 1px 0 #000,
	-1px -1px 0 #000,
	1px -1px 0 #000;
	
	padding-bottom:10%;
}
#notice ul 
{
	margin:0;
	padding-left:3%;
	font-size:1.99cqw;
}

#search_content
{
	position:relative;
	width:78%;
	padding-bottom:10%;
}

.SearchBox{
	margin-top: 1.5%;
    padding: 0 5cqw;
    width: 100%;
    height: 11.8cqw;
    font-weight: bold;
    font-size: 4.6cqw;
    border: none;
    background-color: transparent;
}
.SearchBox:last-child {
	margin-top:5%;
}

.SearchBox::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #AAA;
}
.SearchBox:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #AAA;
   opacity:  1;
}
.SearchBox::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #AAA;
   opacity:  1;
}
.SearchBox:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #AAA;
}
.SearchBox:focus::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #FFF;
}
.SearchBox:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #FFF;
   opacity:  1;
}
.SearchBox:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #FFF;
   opacity:  1;
}
.SearchBox:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #FFF;
}

/*@media (min-aspect-ratio: 9/16) and (max-width:768px) {
	.div_bg{min-height:100vh;}
	.SearchBox{font-size:.7em;}
	#notice {font-size:.7em}
}

@media (max-aspect-ratio: 9/16) and (max-width:768px){
	.div_bg{min-height:110vh;}
	.SearchBox{font-size:.7em;}
	#notice {font-size:.7em}
	#paging li {font-size:1em}
}

@media (min-width:768px){
	.SearchBox{font-size:1.5em;}
	#paging li {font-size:1.3em;}
}*/


#CheckUnknown{
	position: absolute;
    bottom: -11cqw;
    right: -3cqw;
    width: 7cqw;
    height: 7cqw;
}

#SearchBtn{
	position: absolute;
    cursor: pointer;
    top: 1cqw;
    right: -39cqw;
    width: 35cqw;
    height: 33cqw;
    background-color: transparent;
    border: 0;
}

.big_img{
	width:48%;
}
.big_img .big_img{
	box-shadow:none;
	width:100%;
}
.big_img img{
	width:100%;
	text-align:center;
}

.horizon_pic{
	padding-top:27%;
}

#thumbs
{
	width:100%;
	display:flex;
	justify-content: center;
	align-items: center;       /* 화살표 수직 가운데 정렬 */
}

#small_img{	
	margin-top:2vw;
	width:80%;
}
#small_img ul{
	display: flex; /* 가로로 정렬 */
	flex-wrap:wrap;
    align-items: center; /* 수직 방향 정렬 (필요시) */
    list-style: none; /* 불릿 제거 */
    padding: 0; /* 기본 여백 제거 */
    margin: 0; 
}
#small_img ul li{
	width:33%;
	border:none;
}
#small_img ul li div
{
	width:100%;
	box-sizing: border-box;
	padding:4%;
}
#small_img img{
	width:100%;
}
#small_img .horizon_pic{
	padding-top:15%;
}
#small_img .selected{
	border:none;
}

#paging{
	container-type: inline-size;
	margin-top:2%;
	width:100%;
	text-align:center;
}
#paging ul{
	list-style:none;
	margin:0;
	padding:0;
}
#paging li{
	cursor:pointer;
	display:inline-block;
	color:red;
	font-size:5cqw;
}
#paging .selected{
	color:white;
}

#btn
{
	position:relative;
	background:url("../homeimg/btn.png") no-repeat center 0;
	background-size:contain;
	margin-top:1.5%;
	width:48%;
	aspect-ratio:7/1;
}

#btn_prev{
	cursor:pointer;
	width:5%;
	aspect-ratio:1;
	padding-right:3%;
}

#btn_next{
	cursor:pointer;
	width:5%;
	aspect-ratio:1;
	padding-left:3%;
}

#btnReturn{
	cursor:pointer;
	position:absolute;
	left:0px;
	width:17.7vw;
	height:4.7vw;
	background-color:transparent;
	border:0;
}
#btnDownload{
	cursor:pointer;
	position:absolute;
	left:19.3vw;
	width:17.7vw;
	height:4.7vw;
	background-color:transparent;
	border:0;
}