@charset "utf-8";

html, body{width:100%; height:100%; }

#visual{width:100%; height:100%; display:block; /* background:url('/images/museum/main/visual_img1.jpg') no-repeat center 0;  background-size: cover; */}
#visual:after{content:""; display:block; width:100%; height:100%;}

#visual .visual_txt{font-size:80px; color:#fff; font-family: 'gmarketsansL'; margin-top: 27vmin; line-height: 10vmin; text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);}
#visual .visual_txt span{display:block; font-family: 'gmarketsansB';}


/* #visual {position: relative; margin-top: -86px; left: 0; z-index: 0; height: 864px; width: 100%;}
#visual:after{content:""; display:inline-block; width:132px; height:132px; position: absolute; left: 50%;  top: 50%; margin-top:-48px; margin-left:-48px; z-index: 100;
				background: url('/images/museum/main/btn_play.png') no-repeat center 0;}
#visual .visual_slides{text-align:center; width:100% !important;  }
#visual .visual_slides li{height:864px !important;}
#visual .visual_bg{position:relative; z-index:0; display: block; max-width:100%; }
#visual .visual_bg1{background:url('/images/museum/main/visual_img1.jpg') no-repeat center 0; background-size: cover;} */


/* 전시 소개 */
.sec01{padding-top:120px; position:relative; overflow:hidden}
.sec01:before{content:""; display:inline-block; background:url('/images/museum/main/exhi_txt.png') no-repeat 0 0; position:absolute; left:102px; top:135px;  width:733px; height:83px; }
.exhi_list{width:1758px; height:783px; margin:0 auto; position: relative;  user-select: none;}

.exhi_list .exhi_detail{opacity:0; width:0px;  float:left; display:none;}
.exhi_list .exhi_img img{max-width:100%; box-shadow:22px 0px 38px rgba(0, 0, 0, .15)}
.slick-list{width:96%}

.exhi_loc{position:absolute; background:#1d1d1d; color:#fff; width:289px; height:67px; font-size:25px;  font-family: 'gmarketsansM'; bottom: 38px; left:-16px; text-align:center; line-height:67px;}

.slick-arrow{position: absolute; top: 300px !important; margin:0 !important; width: 45px !important; height: 45px !important; z-index:20 !important; cursor: pointer; display: inline-block;
				background:url('/images/museum/ico_set.png') no-repeat -117px 0; border: 0;  font-size: 0;}
.slick-next{right: 0;   background-position: -178px 0;}


.list { margin-top: 50px; display: flex !important;  align-items: flex-end;  justify-content: left;  transition: .5s all; transform: scale(.75);}
.slick-now .list {  transform: scale(1);}

.exhi_list .slick-current{width:880px !important; max-width: 100%; height:703px; top: 0;  position:relative; z-index:19;  margin-top: -50px; }
.exhi_list .slick-current .exhi_img{margin:75px 0 0 58px; }
.exhi_list .slick-current .exhi_loc{display:none;}
.exhi_list .slick-current .exhi_detail{display:block;  word-break:keep-all; width:280px; margin:150px 0 0 58px; opacity:1; position:absolute; top:0; right:30px}
.exhi_list .slick-current .exhi_detail .exhi_tit{font-size:45px; color:#222; font-family: 'gmarketsansB'; letter-spacing:-2px; line-height:120%}
.exhi_list .slick-current .exhi_detail .exhi_con{position:relative; color:#4a4948; font-size: 18px; padding-left:90px; margin-top:26px; font-family: 'gmarketsansL'; font-weight:bold}
.exhi_list .slick-current .exhi_detail .exhi_con span{ font-family: 'gmarketsansB'; width:90px; position:absolute; left:0;}
.exhi_list .slick-current .exhi_detail a{display:inline-block; width:88px; height:40px; background:url('/images/museum/ico_set.png') no-repeat  0 -80px; margin-top:78px}

/* 권역별 뮤지움 소개 */
.sec02{margin-top:100px; /* height:878px; */  overflow:hidden;position:relative; }
.sec02 .ms_tit{font-size:80px; color:#222; font-family: 'gmarketsansB'; text-transform: uppercase; padding-left:175px; position:relative;}
.sec02 .ms_tit:before{content:""; display:inline-block; background:#333; width:114px; height:3px; position:absolute; left:0; top:53px;}
.ms_wrap{position:relative;}
.ms_wrap:before{content:""; display:inline-block; width:70%; height:605px; background:#f3f3f3; z-index:0; position:absolute; left:0; top:34px}
.ms_wrap .ms_mn{display:inline-block; position:absolute; top:157px; left:189px; width:335px;z-index:51;}
.ms_wrap .ms_mn a {float:left; display:block; width: 100%; height:57px; color:#b6b6b6; transition:all ease-in 0.2s; line-height:62px; font-size:30px; font-family: 'gmarketsansB'; position:relative;}

.ms_wrap .ms_mn a.current {color:#222222;  font-size:40px}
.ms_wrap .ms_mn a.current:after{content:""; display:inline-block; background:#4a4948; width:199px; height:3px; float:right; position: relative; top: 23px;}
.ms_wrap .ms_mn:after {content:""; display:block; clear:both; }

.ms_wrap .ms_con{ width:calc(100% - 438px); float:right; position:relative; margin-top: 100px;}
/* .ms_wrap .ms_con .ms_content{display:none; overflow:hidden; height:720px;} */
.mpage_top{background:url('/images/www/main2/main1_bg.jpg') no-repeat 0 0; width:100%; height:661px; padding-top:159px; box-sizing: border-box;}

/* .ms_slides1{position:relative; float:left}
 .ms_content .bx-viewport{overflow: initial !important;}
.ms_content .bx-viewport li{width:1544px !important; position:relative;}
.ms_content .bx-viewport li img{width:100%;  display:block;} */
.ms_content .bx-viewport li .ms_box{position:absolute; left:0; bottom:0; background:rgba(115, 94, 85, 0.96); width:612px; height:367px; color:#fff; padding:73px 60px}
.ms_content .bx-viewport li .ms_box .tit{font-size:50px; font-family: 'gmarketsansB';}
.ms_content .bx-viewport li .ms_box .tit span{display:block; font-size:40px; font-family: 'gmarketsansM'; line-height: 100%;}
.ms_content .bx-viewport li .ms_box .con{font-family: 'gmarketsansL'; font-size:18px}
.ms_content .bx-viewport li .ms_box a{display:inline-block; width:88px; height:40px; background:url('/images/museum/main/ms_arrow.png') no-repeat  0 0; margin-top:24px}

.ms_content .bx-wrapper .bx-controls{position:absolute; bottom:303px; left:530px; z-index:99; width: 52px; height:28px; }
.ms_content .bx-wrapper .bx-controls .bx-controls-direction{position:relative;}
.ms_content .bx-wrapper .bx-controls .bx-controls-direction a{text-indent:-9999px; z-index:999; width:28px; height:28px;}
.ms_content .bx-wrapper .bx-prev{position:absolute; top:0; right:38px; background:url('/images/museum/ico_set.png') -230px -92px no-repeat;}
.ms_content .bx-wrapper .bx-next{position:absolute; top:0; right:0px; background:url('/images/museum/ico_set.png') -276px -92px no-repeat;}

.ms_content .bx-wrapper .bx-viewport a{display: block;  }


/* 공지사항 & SNS*/
.sec03{clear:both; background:url('/images/museum/main/sec3_bg.png') no-repeat 0 bottom; width:100%; height:832px; box-sizing: border-box; padding-top:140px;} 
.notice_box{width:378px; display:inline-block; vertical-align:top; position:relative;}
.notice_box h3{font-size:50px; color:#222; font-family: 'gmarketsansB';}
.notice_box a.notice_list{position:relative;}
.notice_box a.notice_list:after{content: ""; display: inline-block;  width: 1px;  height: 230px;  background: #ddd; position: absolute;  right: 0; top: 30px;}
.notice_box a.notice_list{width:378px; height:300px; position:relative;  display: inline-block;  padding: 40px 25px 0 6px; word-break:keep-all;}
.notice_box a.notice_list .list_loc{font-size:16px; color:#fff; background:#1d1d1d; padding:6px 14px 3px; display:inline-block;  font-family: 'gmarketsansL'; font-weight:bold;}
.notice_box a.notice_list .list_tit{font-size:20px; color:#222; font-family: 'gmarketsansM';  /*margin-top:20px;*/}
.notice_box a.notice_list .list_con{font-size:16px; color:#848484; overflow: hidden; text-overflow: ellipsis; /*display: -webkit-box;*/ -webkit-box-orient: vertical; -webkit-line-clamp: 2;
										max-height: 92px; margin-top:20px; font-family: 'gmarketsansM';}
.notice_box a.notice_list .list_data{font-size:15px; color:#222; margin-top:20px; font-family: 'gmarketsansM';}

.sns_wrap{width: calc(100% - 468px); float:right; margin-left: 90px;}
.sns_wrap .tit_box{ position:relative; margin-bottom: 33px;}
.sns_wrap .tit_box h3{ text-transform: uppercase; font-size:50px; color:#222; font-family: 'gmarketsansL'; font-weight: normal; display:inline-block;}
.sns_wrap .tit_box h3 span{font-family: 'gmarketsansB';}
.sns_wrap .tit_box h3:after{content:""; width:490px; height:1px; display:inline-block; background:#e5e7ee; margin: 15px 27px;}
.sns_wrap .tit_box .sns_link{display: inline-block; position: absolute; top: 10px; right: 45px;}
.sns_wrap .tit_box .sns_link a{}
.sns_wrap .sns_list{width:33%; display:inline-block; padding-right: 50px;}
.sns_wrap .sns_list .sns_tit{font-size:20px; color:#222; margin:16px 0 18px; font-family: 'gmarketsansM';}
.sns_wrap .sns_list .sns_con{ font-size:16px; color:#848484; font-family: 'gmarketsansM'; word-break:keep-all;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;
							-webkit-line-clamp: 4; max-height: 84px; line-height: 140%;}

/* 추진현황 */
.sec04{background:url('/images/museum/main/sec4_bg.jpg') no-repeat 0 0; background-size:cover; position:relative; padding:78px 0 0; height:930px; text-align: center;} 
.plan_box{font-size: 18px;  background: #fff; padding: 10px 40px 7px; border-radius: 30px;  display: inline-block; margin-top:10px;}
.plan_box span{margin:0 10px; font-family: 'gmarketsansM'; position:relative;}
.plan_box span:before{content:""; display:inline-block;}
.plan_box span.col1{color:#9052a5}
.plan_box span.col2{color:#6674d8}
.plan_box span.col3{color:#e85d5d}

.map_tit{font-size:50px; color:#fff; font-family: 'gmarketsansL'; text-align:center; font-weight:normal; line-height: 110%;}
.map_tit span{font-family: 'gmarketsansB'; display:block;}
.map_img{padding: 50px 0; text-align: center; }
.map_img img{max-width:100%}

@media screen and (max-width:1700px) {
	.exhi_list{width:96%; }
}

@media screen and (max-width:1200px) {
	#visual{height:450px;}
	
	.sec01 {padding-top: 70px;}
	.sec01:before{left: 42px; top: 95px;}

	.exhi_list .active .exhi_detail .exhi_tit{font-size:35px;}
	.exhi_list .active .exhi_detail .exhi_con{font-size:16px;}

	.exhi_list .active {width: 73% !important; max-width: 100%; height:auto; margin-top:0}
	.exhi_list .active .exhi_detail{width:300px; margin: 75px 0 0 0; position:absolute;}	
	.exhi_list .active .exhi_img{width: calc(100% - 430px);}
	.exhi_loc{bottom:10px; top:auto;} 

	.slider_cont{top: 0px !important; position: absolute !important; /* right: 45px !important; */}
	/* .prev_button {left: auto !important;  right: 90px !important;} */
	
	.sec02 {margin-top:60px;}
	.sec02 .ms_tit {font-size: 50px; padding-left:20px}
	.sec02 .ms_tit:before{display:none}
	.ms_wrap .ms_mn{ left: 20px;}
	.ms_wrap .ms_mn a{font-size: 20px;}
	.ms_wrap .ms_mn a.current{font-size: 30px;}
	.ms_wrap .ms_con { width: calc(100% - 178px);}

	.ms_content .bx-viewport li .ms_box{width: 562px; height: 307px;  color: #fff;  padding: 43px 50px;}
	.ms_content .bx-wrapper .bx-controls{bottom: 243px; left: 490px;}
	.ms_content .bx-viewport li .ms_box .tit { font-size:30px;}
	.ms_content .bx-viewport li .ms_box .tit span{ font-size:20px;}
	.ms_content .bx-viewport li .ms_box .con { font-size:15px;}

	.sec03{padding-top: 80px;     height: 592px;}
	.notice_box h3{font-size:30px}
	.notice_box a.notice_list{padding: 20px 25px 0 0px;}
	.notice_box a.notice_list .list_tit{font-size:16px;}
	.notice_box a.notice_list .list_con{font-size:15px;}
	
	.sns_wrap .tit_box h3{font-size:30px}
	.sns_wrap .tit_box h3:after{display:none}
	.sns_wrap .sns_list{width:49%}
	.sns_wrap .sns_list:nth-child(3){display:none}
	.sns_wrap .sns_list .sns_tit{font-size:16px;}	
	.sns_wrap .sns_list .sns_con{font-size:15px;}

	.sec04{height:auto; }
	.map_tit {font-size:30px}
}
@media screen and (max-width:999px) {
	.exhi_list{height:650px;}
	/* .exhi_list .slick-current{height:auto; } */
	.exhi_list .slick-current .exhi_img{width:calc(100% - 55% - 78px) }
	.exhi_list .slick-current .exhi_detail{width: 50%;  display: inline-block; right: 0; }
	.exhi_list .slick-current .exhi_detail .exhi_tit{font-size:30px;}
}


@media screen and (max-width:765px) {
	#visual .visual_txt{font-size:40px}

	.exhi_list{height:500px;}
	 
	.exhi_list .slick-current{width:650px !important;}

	.sec02 .ms_tit{line-height: 110%; margin-bottom: 25px;}
	.ms_wrap:before{display:none;}
	.ms_wrap .ms_mn{width:100%; left:0; top:0}
	.ms_wrap .ms_mn a.current:after{top: auto; bottom: 0; position: absolute; left: 50%; margin-left: -45px; width: 90px;}
	
	.ms_wrap .ms_mn a{width:25%; text-align: center;}
	.ms_wrap .ms_con{width:100%; }

	.ms_content .bx-viewport li{height:450px;}	
	.ms_content .bx-viewport li .ms_box{width:100%; height: 197px; padding: 33px 40px;}
	.ms_content .bx-wrapper .bx-controls {bottom: 140px; right: 20px; left: auto;}	
	.ms_content .bx-viewport li .ms_box a{width: 68px; position: absolute; top: 32px;  left: 280px; background-size: contain;}


	.sec03{height:auto}
	.notice_box{width:100%;  }
	.notice_box a.notice_list{width:100%; height:auto; padding-bottom:30px}
	.notice_box a.notice_list:after{width:100%; height:1px; top:auto; bottom:0;}
	.sns_wrap{width:100%; margin:40px 0 0; float: initial; padding-bottom: 70px; }

	.sec04{padding: 58px 0 0; display:none}
	.map_img { padding:30px 0;}
}

@media screen and (max-width:450px) {
	.exhi_list .exhi_img{display:none}
	.exhi_list .slick-current .exhi_img{display:none}
	.exhi_list .slick-current .exhi_detail{width:94%;}

	.sns_wrap .sns_list {width: 100%; padding-right: 0;}
	.sns_wrap .tit_box .sns_link {top: 41px;  right: 0;}
	.sns_wrap .sns_list:nth-child(2) {display: none;}
	
	
}	