@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
/* font-family: 'Noto Sans KR', sans-serif; */

body{font-family: 'Noto Sans KR', sans-serif;}
a{text-decoration:none; color:#000;}


header{background:#fff; width:100%; height:80px; position:fixed; z-index:99999; overflow:hidden;}
header .logo_mobile{text-align:center; padding-top:0.8rem; padding-bottom:0.3rem;}
header .logo_mobile img{width:50px;}
header button img{width:30px;}

#notice{display:none;}
header .menu_pc{display:none;}
header .logo_pc{display:none;}



/* [모바일] 검색 메뉴 */
.search_menu{width:300px; height:640px; background:#000; position:fixed; top:0; 
             z-index:99999; left:-300px;}
.search_menu .form_search{margin-top:88px; margin-left:10%;}
.search_menu .search_input{width:85%; height:1.5rem; border-radius:0;}
.search_menu .search_logo{position:absolute; left:130px; top:19px; z-index:99999;}
.search_menu .search_logo img{width:2.8rem;}
.search_menu .search_close{position:absolute; left:15px; top:30px; z-index:99999;
                           border:0; background:none; outline:none; cursor:pointer; }
.search_menu .search_close img{width:1.4rem;}



/* [모바일] 전체 메뉴 */
.searching{position:absolute; top:0; left:0; margin:1.5rem 15px 0 15px;
           background:none; color:#000; border:0; outline:none; cursor:pointer; z-index:99999;}
.hammenu{position:absolute; top:0; right:0; margin:1.5rem 15px 0 15px;
         background:none; color:#000; border:0; outline:none; cursor:pointer; z-index:99999;}
.menu_logo{position:absolute; right:130px; top:19px; z-index:99999;}
.menu_logo img{width:2.8rem;}
.menu_close{position:absolute; right:15px; top:30px; position:fixed;
            border:0; background:none; outline:none; cursor:pointer; z-index:99999;}
.menu_close img{width:1.4rem;}
   

.menu{width:300px; height:640px; background:#000; position:fixed; top:0; 
      z-index:99999; right:-300px;}
	  
.top_menu{display:flex; font-size:0.6em; margin:85px 15px 30px 15px;}
.top_menu li{width:16.66%; margin-right:5px;}

.menu ul li a{color:#fff;}
.gnb>li{margin-top:10px; margin-bottom:30px; margin-left:25px; display:flex;}
.gnb .sub{position:absolute; width:50%; background:#fff; height:520px; right:0; top:120px; display:none;}
.gnb .sub li{height:2.5rem; margin-left:25px; margin-top:0.8em;}
.gnb .sub li a{color:#000; display:block; line-height:2.5rem;}

.menu_search{text-indent:-99999px;}
.menu_search ul li{display:none;}

#quick_menu{display:none;}






/* [모바일] 소장품 검색 */
.collection{width:100%; margin:0 auto; padding-top:70px; padding-bottom:100px;}
.collection>ul{width:90%; margin:0 auto;}
.collection>ul>li{width:50%; float:left; text-align:center; font-size:1.2rem; padding-bottom:10px; border-bottom:3px solid #999; box-sizing:border-box;}
.collection>ul>li>a{color:#999;}
.collection>ul .on{width:50%; float:left; text-align:center; font-weight:bold; border-bottom:3px solid #000; box-sizing:border-box;}
.collection ul .on a{color:#000;}
.collection h2{font-size:2rem; font-weight:bold; text-align:center; width:100%; margin:30px auto;}

.collection input{font-size:100%; width:80%; border-radius:0; height:40px; border:3px solid #000; box-sizing:border-box; padding:5px; margin:0 auto; display:block;}
.collection input:hover{border:2px solid #000;}
.collection input:focus{border:2px solid #000; outline:none;}



/* Filter buttons */
.collection .filter{width:90%; margin:30px auto;}
.collection button{background:#d3d3d3; border:none;
	padding: 3px 10px 4px 10px;	border-radius:4px; color:#000; font-size: 100%; margin:5px 10px;}
.collection button:hover, button.active{
	background-color:#000; color:#fff; cursor:pointer;}

	

.gallery{width:100%; height:10%; padding:100px auto;}
.gallery ul{width:100%; overflow:hidden; margin:0 auto;}
.gallery ul li{width:50%; height:250px; margin-top:6%; margin-bottom:3%; position:relative;}
.gallery ul li img{height:100%; display: block; margin: 0 auto;}
.gallery ul li:nth-child(1){float:left;}
.gallery ul li:nth-child(2){float:right;}
.gallery ul li:nth-child(3){float:left;}
.gallery ul li:nth-child(4){float:right;}
.gallery ul li p{color:#000; text-align:center; margin-top:11rem; font-size:0.8em;}
.gallery ul li:hover p{color:#fff;}
.gallery ul li p span{margin-top:0.3em;}
.gallery ul li p .title{font-weight:bold; font-size:0.9rem;}

.gallery li .box{width:100%; height:100%; margin-bottom:40px; position:absolute; left:0; top:0;}
.gallery li:hover .box{width:100%; height:100%; background:rgba(0,0,0,0.3); cursor:pointer;}
.gallery span{display:block;}








/* [모바일] 푸터 */
footer{width:100%; height:480px; background:#000;overflow:hidden;}

#footer_menu_top{height:80px; width:100%;}
#footer_menu_top ul{height:40px; width:100%; margin:0 auto;}
#footer_menu_top ul li{line-height:20px; text-align:center; float:left; padding:3px 0 0 0;}
#footer_menu_top ul li:nth-child(1){width:20%;}
#footer_menu_top ul li:nth-child(2){width:20%;}
#footer_menu_top ul li:nth-child(3){width:20%;}
#footer_menu_top ul li:nth-child(4){width:20%;}
#footer_menu_top ul li:nth-child(5){width:20%;}
#footer_menu_top ul li:nth-child(6){width:25%;}
#footer_menu_top ul li:nth-child(7){width:25%;}
#footer_menu_top ul li:nth-child(8){width:25%;}
#footer_menu_top ul li:nth-child(9){width:25%;}
#footer_menu_top ul li:nth-child(9) a{font-size:0.7em;}
#footer_menu_top ul li a{color:#fff; font-size:0.8em;}

#footer_social_icon ul{display:flex; width:400px; margin:20px auto 0 auto;}
#footer_social_icon ul li{width:20%; text-align:center;}
#footer_social_icon img{width:45px;}

footer h2{text-align:center; margin-top:40px; margin-bottom:40px;}
footer h2 img{width:230px;}
footer p{color:#fff; text-align:center; font-size:0.5em;}
footer .description{width:90%; margin:0 auto; text-align:center; margin-top:40px; font-size:0.8rem;}
footer .description span{display:block;}

#footer_menu_bottom ul{display:flex; width:100%; margin:40px auto 10px auto;}
#footer_menu_bottom ul li{width:20%; font-size:0.7em; text-align:center;}
#footer_menu_bottom ul li a{color:#fff;}





@media screen and (min-width:769px){
/* [태블릿] 소장품 검색 */
.collection input{width:50%;}

/* Filter buttons */
.collection .filter{width:60%; margin:50px auto;}

.collection{width:100%; height:10%; padding:100px auto 50px auto;}
.gallery ul{width:98%; height:50%; overflow:hidden;}
.gallery ul li{width:33.33%; height:350px; margin-top:6%; margin-bottom:3%; position:relative;}
.gallery ul li:nth-child(1){float:left;}
.gallery ul li:nth-child(2){float:left;}
.gallery ul li:nth-child(3){float:right;}
.gallery ul li:nth-child(4){float:left;}
.gallery .box p{font-size:0.9em; width:100%; height:350px;  margin-top:16.5rem;}
.gallery .box .title{font-size:1em;}
.gallery ul li:hover .box{width:100%; height:350px; background:rgba(0,0,0,0.3); position:absolute; left:0; top:0; cursor:pointer;}





/* [태블릿] 푸터 */
footer{height:490px;}
#footer_menu_top ul li{width:20%;}

#footer_social_icon ul{margin:10px auto 0 auto;}

footer h2{text-align:center; margin-top:40px; margin-bottom:40px;}
footer p{font-size:0.8em;}
footer .description{font-size:0.85rem;}
footer .description span{display:block;}

#footer_menu_bottom ul li{font-size:0.9em; margin-top:10px;}




}









@media screen and (min-width:1920px){
/* [PC] 상단 공지사항 */
#notice{display:block; width:100%; height:30px; background:#000;
        position:fixed; z-index:999999; overflow:hidden;}
.notice_close{display:block; color:#fff; font-size:2em; background:none; outline:none; 
              position:absolute; top:3px; right:3px; border:0; cursor:pointer; z-index:99999;}
#notice li{text-align:center;}   
#notice li a{color:#fff; text-align:center; line-height:30px; font-size:0.8em;}
#notice li.n1 {background-position:0 4px;}
#notice li.n2 {background-position:0 -31px;}
#notice li.n3 {background-position:0 -66px;}



/* [PC] 헤더 */
header{height:200px; width:80%; position:fixed; margin-left:10%; z-index:99999; padding-top:30px;}

header h1{display:block; padding-top:25px;}
header .menu_pc{display:block;}
header .social_icon{display:flex; width:25%; position:absolute; top:40px; left:10px;}
header .social_icon li{width:50px;}
header .social_icon img{width:30px;}

header .top_menu_pc{position:absolute; top:40px; right:10px; display:flex;}
header .top_menu_pc li{margin:0 10px; text-align:center;}
header .top_menu_pc li a{font-size:0.8em; color:#000;}
header .logo_pc{display:block; text-align:center; margin-top:60px;}
header .logo_pc img{width:240px;}


header .logo_mobile{display:none;}
header button{display:none;}
.searching{display:none;}
.hammenu{display:none;}
.search_logo{display:none;}
.search_logo{display:none;}
.search_close{display:none;}
.menu_logo{display:none;}
.menu_close{display:none;}
.search_menu{display:none;}

.iframe{z-index:9999999;}



/* [PC] 메뉴 */
.menu .top_menu{display:none;}

.menu .gnb li a{color:#000; font-weight:bold;}
.gnb{position:fixed; width:80%; height:45px; margin-top:230px; left:10%; background:#fff; z-index:99999;}
.gnb>li{float:left; width:14.28%; text-align:center;
margin-left:0; margin-right:0; margin-top:0;}
.gnb>li>a{line-height:45px; color:#000; font-size:1.1rem; margin:0 auto;}
.gnb li a:hover{color:#b60808;}
.menu_search{text-indent:0px;}
.menu_search img{width:20px; margin-top:15px;}

.gnb .sub{position:absolute; background:#000; width:100%; top:45px; left:0;
          height:45px; line-height:45px; margin-left:0;;}
.gnb .sub li{float:left; margin-top:0; margin-left:0;}
.gnb .sub li a{display:block; color:#fff; font-size:1.1rem;}
.gnb .sub li a:hover{color:#b60808;}
.gnb .sub1 li{width:12.5%;}
.gnb .sub2 li{width:25%;}
.gnb .sub3 li{width:20%;}
.gnb .sub4 li{width:50%;}
.gnb .sub5 li{width:16.66%;}
.gnb .sub6 li{width:50%;}
.gnb .sub7 li{width:50%; padding-left:50%;}
.gnb .sub7 input{width:300px; height:20px; line-height:45px;}









/* [PC] 퀵 메뉴 */
#quick_menu{display:block; width:70px; position:absolute; right:4%; top:300px;}
/* #quick_menu ul{width:70px; position:absolute; right:2%; top:300px;} */
#quick_menu ul li{margin-top:1rem; margin-bottom:1rem;}
#quick_menu ul li img{width:70px;}





/* [PC] 소장품 검색 */
.collection{width:80%; padding-top:350px;}
.collection h2{margin-top:50px; margin-bottom:15px;}
.collection p{display:block; text-align:center; margin-top:20px;}
.collection input{margin-top:50px;}

/* Filter buttons */
.collection .filter{width:70%;}

.gallery{height:1000px;}
.gallery ul{width:98%; overflow:hidden;}
.gallery ul li{width:23%; height:70%; margin:5% 1%; position:relative;}
.gallery ul li:nth-child(1){float:left;}
.gallery ul li:nth-child(2){float:left;}
.gallery ul li:nth-child(3){float:left;}
.gallery ul li:nth-child(4){float:right;}

.gallery .box p{font-size:0.9em; padding-bottom:0; margin-top:16.5rem;}
.gallery .box:hover p{color:#fff;}
.gallery .box .title{font-size:1em;}





/* [PC] 푸터 */
footer{height:460px;}
#footer_menu_top{height:30px;}
#footer_menu_top ul{width:100%}
#footer_menu_top ul li{width:11.11%; padding-top:10px; padding-bottom:5px; padding-left:0;}
#footer_menu_top ul li:nth-child(1){width:11.11%;}
#footer_menu_top ul li:nth-child(2){width:11.11%;}
#footer_menu_top ul li:nth-child(3){width:11.11%;}
#footer_menu_top ul li:nth-child(4){width:11.11%;}
#footer_menu_top ul li:nth-child(5){width:11.11%;}
#footer_menu_top ul li:nth-child(6){width:11.11%;}
#footer_menu_top ul li:nth-child(7){width:11.11%;}
#footer_menu_top ul li:nth-child(8){width:11.11%;}
#footer_menu_top ul li:nth-child(9){width:11.11%;}
#footer_menu_top ul li a{font-size:1rem;}

#footer_social_icon{margin:50px auto 10px auto;}

footer h2{text-align:center; margin-top:40px; margin-bottom:30px;}

footer .description{font-size:0.85rem;}
#footer_menu_bottom ul{display:flex; width:100%; margin:30px auto 10px auto;}
#footer_menu_bottom ul li{font-size:1rem; margin-top:10px;}



}