@keyframes fadeIn{
	  0% {opacity:0; }
	  100% {opacity:1; }
	}
body{
	font-family: "Pretendard GOV";
	letter-spacing: 0;
}

@media (min-width: 992px) {
	.main {z-index: 1; word-break: keep-all;}
	.main {position: relative; background:#fff;}
	.main-section01 {}
	.main-bg  {position:relative; top:0px; left:0px; z-index:-1; width:100%; height:613px; background: url(/pub/site/hallamuseum/images/main/main_v.jpg) no-repeat center; background-size: cover;}

	.main-bg2  {position: relative; height: unset; padding-bottom: 32%; background: url(/pub/site/hallamuseum/images/main/main_v.jpg) no-repeat center; background-size: cover; z-index: -1;}
	.main-bg2 .main-video{position: absolute; width: 100%; top: -38%; }
	.main-bg2 video{width: 100%;}

	.main-section01 .main-bg .container { padding-top:228px; padding-left: 150px;}
	.main-section01 .main-text  .text {font-size: 38px; letter-spacing: 0px; color: #fff;}
	.main-section01 .main-text  .text strong {font-size: 50px; font-weight: bold;}
	.main-section01 .main-bottom{position: relative;}
	.main-section01 .main-bottom .container{position: relative;}
	.main-section01 .main-bottom .container:before{content: ''; position: absolute; top: -45px; left: 80px; width: calc(100% - 160px); height: 45px; background: #fff;}
	.main-section01 .main-bottom .row{ height: 80px; position: relative; padding: 0 95px;}
	.main-section01 .main-bottom .row:before{content: ''; position: absolute; top: -45px; left: 0; width: 80px; height: 45px; background: url(/pub/site/hallamuseum/images/main/sub_bg_left.png) no-repeat center;}
	.main-section01 .main-bottom .row:after{content: ''; position: absolute; top: -45px; right: 0; width: 80px; height: 45px; background: url(/pub/site/hallamuseum/images/main/sub_bg_right.png) no-repeat center;}
	.main-section01 .main-bottom .hot-alime{position: absolute; bottom: 206px; right: calc((100% - 1400px) / 2); width: 350px; height: 400px;}
	.main-section01 .main-bottom .hot-alime.active{right: -350px;}
	.main-section01 .main-bottom .hot-alime .title{position: absolute; width: 42px; left: -42px;}
	.main-section01 .main-bottom .hot-alime .title span{display: table-cell; vertical-align: middle; text-align: center; width: 42px; height: 39px; background: #fff;}
	.main-section01 .main-bottom .hot-alime .title span a{font-size: 24px; color: #333;}
	.main-section01 .main-bottom .hot-alime .title span a .r-zero{display: none;}
	.main-section01 .main-bottom .hot-alime.active .title span a i{display: none;}
	.main-section01 .main-bottom .hot-alime.active .title span a .r-zero{display: block;}
	.main-section01 .main-bottom .hot-alime .title p{display: inline-flex; background: #000000; color: #fff; width: 42px; height: 84px; writing-mode: vertical-rl; justify-content: center; align-items: center; font-size: 16px; letter-spacing: 1.92px;}
	.main-section01 .main-bottom .hot-alime .bx-wrapper{width: 350px; height: 399px;}
	.main-section01 .main-bottom .hot-alime .hot-btn{position: absolute; top: -34px; right: 0; display: flex; flex-direction: row;}
	.main-section01 .main-bottom .hot-alime .hot-btn .pager-btn{color: #999; margin-right: 17px; letter-spacing: 0px;}
	.main-section01 .main-bottom .hot-alime .hot-btn .pager-btn strong{color: #fff;}
	.main-section01 .main-bottom .hot-alime .hot-btn .prev-btn{display: inline-block; margin-right: 4px;}
	.main-section01 .main-bottom .hot-alime .hot-btn .prev-btn a, 	.main-section01 .main-bottom .hot-alime .hot-btn .next-btn a, .main-section01 .main-bottom .hot-alime .hot-btn .play-btn a{width: 20px; height: 20px; text-align: center; display: table-cell; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 50%; vertical-align: middle; font-size: 14px;}
	.main-section01 .main-bottom .hot-alime .hot-btn .next-btn{margin-right: 6px;}
	.main-section01 .main-bottom .hot-alime .hot-btn .play-btn a.active{display: none;}
	.main-section01 .main-bottom .left ul{display: flex; float: left; margin-top: -10px;}
	.main-section01 .main-bottom .left ul li{font-size: 18px; font-weight: bold; margin-right: 29px;}
	.main-section01 .main-bottom .left ul li i{margin-right: 8px;}
	.main-section01 .main-bottom .left ul li span{position: relative; display: block; padding-left: 28px; font-size: 16px; color: #333; font-weight: 400;}
	.main-section01 .main-bottom .left ul li span:before{content: '|'; position: absolute; left: 7px; color: #ccc;}
	.main-section01 .main-bottom .right ul{float: right; display: flex; margin-top: -20px;}
	.main-section01 .main-bottom .right ul li a{display: inline-flex; width: 111px; height: 75px; border-radius: 0 20px 0 0; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; background: #fff; color: #333333; border: 2px solid #333333; margin-left: 16px; font-weight: bold; font-size: 16px;}
	.main-section01 .main-bottom .right ul li:first-child a{margin-left: 0px;}
	.main-section01 .main-bottom .right ul li a:hover{background: #333333; color: #fff;}


	.main-section01 .main-bottom{height: 80px; background: #fff;}


	.main-section02 {background: #F2F2F2; padding: 105px 15px;}
	.main-section02 .more-btn{position: absolute; top: 0; right: 0;}
	.main-section02 .more-btn a{font-size: 16px; color: #333; padding-left: 16.5px; border-left: 2px solid #ccc;}
	.main-section02 .row > div > .text-area h2{font-size: 34px; font-weight: bold; color: #333; }
	.main-section02 .row > div > .text-area h2 span{display: inline-block; font-size: 16px; color: #666666; margin-left: 21px;}
	.main-section02 .row > div > .text-area > p{font-size: 24px; color: #333; font-weight: bold; word-break: keep-all; letter-spacing: 0px; margin-bottom: 19px; margin-top: 39px;}
	.main-section02 .per-area {position: relative;}
	.main-section02 .per-area .text-area div span{float: left; display: block; margin-right: 21px; border: 1px solid #333333; border-radius: 13px; font-size: 16px; line-height: 19px; color: #333333; padding: 6.5px 17.5px; text-align: center;}
	.main-section02 .per-area .text-area div p{font-size: 18px; color: #333333; padding-left: 0; line-height: 34px; font-weight: bold; margin-bottom: 17.5px;}
	.main-section02 .per-area .text-area div ul{float: left; display: block;padding-left: 12px; }
	.main-section02 .per-area .text-area div ul li{position: relative; word-break: keep-all; font-size: 18px; font-weight: normal; color: #333; margin-bottom: 16px; line-height: 1.5;}
	.main-section02 .per-area .text-area div ul li:before{content: ''; position: absolute; left: -8px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: #333333;}
	.main-section02 .per-area .per-gallery {clear: both; padding-top: 29px; margin-bottom: 140px; position: relative;}
	.main-section02 .per-area .per-gallery ul {text-align: center; margin-right: -7.5px; display: flex; flex-wrap: wrap; justify-content: flex-start;}
	.main-section02 .per-area .per-gallery ul li {width: calc((100% - 27px) / 4); position: relative; display: inline-block; margin: 0 6.5px 7.5px 0; background: #000000;}
	.main-section02 .per-area .per-gallery ul li p{display: none;}
	.main-section02 .per-area .per-gallery ul li:hover p{display: block;}
	.main-section02 .per-area .per-gallery ul li:hover img{display: none; transition: 0.5s;}
	.main-section02 .per-area .per-gallery ul li img{width: 100%;}
	/* .main-section02 .per-area .per-gallery ul li:last-child{background: #000000; border-radius: 0 0 20px 0;}
	.main-section02 .per-area .per-gallery ul li:last-child span {position: unset; text-align: left; display: block; width: 100%; height: 100%;} */
	.main-section02 .per-area .per-gallery ul li span {text-align: left; position: absolute; top: 0; left: 0; font-size: 16px; color: #CCCCCC; font-weight: bold; padding: 22px 30px; letter-spacing: 0px;}
	.main-section02 .per-area .per-gallery ul li span strong{display: block; font-size: 20px; color: #fff; margin-bottom: 15px;}
/* 	.main-section02 .per-area .per-gallery ul li:last-child span strong{margin-bottom: 15px;} */
	
	.main-section02 .spe-area{position: relative;}
	.main-section02 .spe-area .spe-gallery{padding: 0 15px; position: relative;}
	.main-section02 .spe-area .spe-gallery ul{width: 300px; margin: 0 auto;}
	.main-section02 .spe-area .spe-gallery ul li img{width: 300px; max-height: 377px;}
	.main-section02 .spe-area .spe-gallery ul li .text-area{position: relative; width: 300px; height: 364px; background: #fff; padding: 19px 10.5px 0 12.5px;}
	.main-section02 .spe-area .spe-gallery ul li .text-area > p{font-size: 20px; font-weight: bold; letter-spacing: 0px; color: #000;}
	.main-section02 .spe-area .spe-gallery ul li .text-area dl{margin-bottom: 30px;}
	.main-section02 .spe-area .spe-gallery ul li .text-area dl dt {height: unset !important; margin-top: 12px; font-size: 16px; font-weight: bold; color: #333;}
	.main-section02 .spe-area .spe-gallery ul li .text-area dl dt span{font-weight: 500; border: 1px solid #999999; border-radius: 13px; padding: 2px 12px; margin-right: 11.5px;}
	.main-section02 .spe-area .spe-gallery ul li .text-area span{font-size: 16px; color: #333; word-break: keep-all;}
	.main-section02 .spe-area .spe-gallery ul li .text-area .more-btn2{position: absolute; bottom: 12px; right: 14px; width: 51px; height: 33px; border-radius: 0 10px 0 0; text-align: center; background: #999999; padding: 3px 0;}
	.main-section02 .spe-area .spe-gallery ul li .text-area .more-btn2 a{color: #fff;}
	.main-section02 .spe-area .spe-btn{position: absolute; top: 50%; left: -15px; width: calc(100% + 30px);}
	.main-section02 .spe-area .spe-btn a{font-size: 48px; color: #666666; }
	.main-section02 .spe-area .spe-btn .prev-btn{float: left;}
	.main-section02 .spe-area .spe-btn .next-btn{float: right;}

	.main-section03 {padding: 49px 15px 0 18px; position: relative;}
	.main-section03 .more-btn{position: absolute; top: 0; right: 0;}
	.main-section03 .more-btn a{font-size: 16px; color: #333; padding-left: 16.5px; border-left: 2px solid #ccc;}
	.main-section03 .row > div{margin-bottom: 49px; position: relative; width: 48%; display: inline-block;}
	.main-section03 .row .notece-area{ float: left;margin-right: 4%;}
	.main-section03 h2{font-size: 30px; font-weight: bold; color: #323333; margin-bottom: 32px;}
	.main-section03 ul{border-top: 1px solid #333333;}
	.main-section03 ul li a{padding: 20px 0 13px 11px; border-bottom: 1px dashed #cccccc; display: flex; flex-wrap: nowrap; align-items: center; color: #333; font-size: 16px; line-height: 24px;}
	.main-section03 ul li .data{position: relative; width: 87px; padding-right: 30px; font-size: 40px; font-weight: bold; text-align: center; color: #000;}
	.main-section03 ul li .data:after{content: ''; position: absolute; top: calc((100% - 19px) / 2); right: 0; height: 19px; border-right: 1px solid #DBDBDB;}
	.main-section03 ul li .data span{font-size: 12px; font-weight: 500; display: block; height: 14px; color: #666666; margin-top: 5px;}
	.main-section03 ul li .title{width: calc(100% - 87px); padding-left: 21px;}
	.main-section03 ul li .data .new-rabel{position: absolute; top: -12px; right: 21px; width: 21px; height: 21px; font-size: 14px; color: #fff; background: #ED660C; border-radius: 50%;}

	

}/*(min-width: 992px)*/


@media(max-width: 1399px){
	.main-section01 .main-bottom .hot-alime{right: 0px;}
}

@media(max-width: 1199px){
	.main-section01 .main-bottom{height: unset;}
	.main-section01 .main-bottom .row{height: unset;}
	.main-section01 .main-bottom .left ul{float: unset;}
	.main-section01 .main-bottom .right ul{float: unset; margin: 20px 0px;}

	.main-section02 .spe-area .spe-gallery{width: 600px; margin: 0 auto;}
}


@media (max-width: 991px) {

.main { position:relative;  }
	
	.more-btn{position: absolute; top: 12px; right: 0px; font-size: 14px; padding-left: 8.5px; border-left: 2px solid #cccccc;}
	.more-btn a{color: #333333; font-weight: 500;}
	.more-btn a:hover, .main-section02 .more-btn a:active{text-decoration: none;}

	.main .main-bg  {margin: 0 -15px; height: 204px; background: url(/pub/site/hallamuseum/images/main/main_v.jpg) no-repeat center; background-size: cover;}

	.main-bg2  {position: relative; height: unset; padding-bottom: 34%; margin: 0 -15px; overflow: hidden;}
	.main-bg2 .main-video{position: absolute; width: 100%; top: -38%; z-index: -1;}
	.main-bg2 video{width: 100%;}

	.main-section01 { position:relative;  padding-left:15px; padding-right:15px; padding-bottom: 45px;}
	.main-section01 .container {  }
	.main-section01 .main-text { text-align:left; padding-top: 58.5px; padding-left: 31px;}
	.main-section01 .main-text  .text { font-size: 20px; font-weight: 300; color: #ffffff; letter-spacing: 0px;}
	.main-section01 .main-text  .text span{font-weight: bold;}
	.main-section01 .main-text  .text strong {font-size: 26px; font-weight: bold;}
	
	.main-section01 .main-bottom{padding-top: 55px;}
	.main-section01 .main-bottom .hot-alime{position: relative; width: 300px; margin: 0 auto; margin-bottom: 27.5px; }
	.main-section01 .main-bottom .hot-alime > .title{position: absolute; top: -39px; left: 0px; width: 93px; height: 39px; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: 1.92px; color: #fff; background: #000000; padding: 10px 0;}
	.main-section01 .main-bottom .hot-alime > .title span{display: none;}
	.main-section01 .main-bottom .hot-alime .hot-btn{position: absolute; display: flex; top: -35px; right: 0px;}
	.main-section01 .main-bottom .hot-alime .hot-btn a{display: block; width: 20px; height: 20px; background: rgba(0, 0, 0, .5); font-size: 14px; letter-spacing: -0.35px; color: #fff; text-align: center; border-radius: 50%;}
	.main-section01 .main-bottom .hot-alime .hot-btn .prev-btn .bx-prev{float: unset !important;}
	.main-section01 .main-bottom .hot-alime .hot-btn .play-btn a{display: block;}
	.main-section01 .main-bottom .hot-alime .hot-btn .play-btn a.active{display: none;}
	.main-section01 .main-bottom .hot-alime .hot-btn .pager-btn{font-size: 16px; font-weight: bold; letter-spacing: 0px; color: #999999; margin-right: 17px;}
	.main-section01 .main-bottom .hot-alime .hot-btn .pager-btn strong{color: #000000; font-weight: bold;}
	.main-section01 .main-bottom .hot-alime .hot-btn .pager-btn span{padding: 0 3px;}
	.main-section01 .main-bottom .hot-alime .hot-btn .prev-btn{margin-right: 4px;}
	.main-section01 .main-bottom .hot-alime .hot-btn .next-btn{margin-right: 6px;}
	.main-section01 .main-bottom .hot-alime .hot-btn .play-btn{margin-right: 8px;}
	.main-section01 .main-bottom .hot-alime ul li{border-radius: 0px 20px 0px 0px; overflow: hidden;}
	
	.main-section01 .main-bottom .left{}
	.main-section01 .main-bottom .left ul{}
	.main-section01 .main-bottom .left ul li{font-size: 18px; font-weight: bold; margin-bottom: 29px;}
	.main-section01 .main-bottom .left ul li i{font-size: 18px; padding-right: 8px;}
	.main-section01 .main-bottom .left ul li span{position: relative; display: block; font-size: 16px; font-weight: 500; padding-left: 28px;}
	.main-section01 .main-bottom .left ul li span:before{content: ''; position: absolute; top: 0; left: 9.6px; height: 100%; border: 1px solid #cccccc;}

	.main-section01 .main-bottom .right ul{display: flex; width: 100%;}
	.main-section01 .main-bottom .right ul li{}
	.main-section01 .main-bottom .right ul li a{display: inline-flex; justify-content: center; align-items: center; width: 105px; height: 74px; background: #fff; border: 2px solid #333333; border-radius: 0px 20px 0px 0px; margin-right: 7px; font-size: 16px; font-weight: bold; color: #333333;}
	.main-section01 .main-bottom .right ul li a:hover{background: #333333; color: #FFFFFF; text-decoration: none;}
	
	.main-section02 {background: #F2F2F2; padding: 50px 15px;}
	.main-section02 .row > div > .text-area h2{font-size: 30px; font-weight: bold; color: #333;}
	.main-section02 .row > div > .text-area h2 span{padding-left: 11px; font-size: 16px; color: #666666;}
	.main-section02 .row > div > .text-area p{font-size: 20px; color: #333; font-weight: bold; word-break: keep-all; letter-spacing: 0px; margin: 24px 0 30px 0;}
	.main-section02 .per-area {position: relative;}
	.main-section02 .per-area .text-area div span{float: left; display: block; width: 89px; margin-right: 21px; border: 1px solid #333333; border-radius: 15px; font-size: 16px; line-height: 1.5; color: #333333; text-align: center; font-weight: bold;}
	.main-section02 .per-area .text-area div p{font-size: 16px; line-height: 26px;}
	.main-section02 .per-area .text-area div ul{float: left; display: block; padding-left: 8.5px; }
	.main-section02 .per-area .text-area div ul li{position: relative; word-break: keep-all; font-size: 16px; font-weight: normal; color: #333; margin-bottom: 10px; line-height: 1.5; width: 100%;}
	.main-section02 .per-area .text-area div ul li:before{content: ''; position: absolute; left: -8px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #333333;}
	.main-section02 .per-area .per-gallery {clear: both; padding-top: 29px; margin-bottom: 40px;}
	.main-section02 .per-area .per-gallery ul {text-align: center; margin-right: -7.5px; display: flex; flex-wrap: wrap; justify-content: space-between;}
	.main-section02 .per-area .per-gallery ul li {width: 47.5%; position: relative; display: inline-block; margin: 0 6.5px 7.5px 0;}
	.main-section02 .per-area .per-gallery ul li img{width: 100%;}
/* 	.main-section02 .per-area .per-gallery ul li:last-child{background: #000000; border-radius: 0 0 20px 0;}
	.main-section02 .per-area .per-gallery ul li:last-child span {position: unset; text-align: left; display: block; width: 100%; height: 100%;} */
	.main-section02 .per-area .per-gallery ul li span {text-align: left; position: absolute; top: 0; left: 0; font-size: 14px; color: #CCCCCC; font-weight: bold; padding: 8px 8px; letter-spacing: 0px;}
	.main-section02 .per-area .per-gallery ul li span strong{display: block; font-size: 15px; color: #fff;}
/* 	.main-section02 .per-area .per-gallery ul li:last-child span strong{margin-bottom: 15px;} */
	
	.main-section02 .spe-area{position: relative;}
	.main-section02 .spe-area .spe-gallery{padding: 0px; width: 580px; margin: 0 auto; position: relative;}
	.main-section02 .spe-area .spe-gallery ul{width: 300px; margin: 0 auto;}
	.main-section02 .spe-area .spe-gallery ul li img{width: 290px; max-height: 364px;}
	.main-section02 .spe-area .spe-gallery ul li .text-area{position: relative; width: 300px; height: 364px; background: #fff; padding: 19px 10.5px 0 12.5px;}
	.main-section02 .spe-area .spe-gallery ul li .text-area p{font-size: 20px; font-weight: bold; letter-spacing: 0px; color: #000;}
	.main-section02 .spe-area .spe-gallery ul li .text-area dl{margin-bottom: 30px;}
	.main-section02 .spe-area .spe-gallery ul li .text-area dl dt { margin-top: 12px; font-size: 16px; font-weight: bold; color: #333;}
	.main-section02 .spe-area .spe-gallery ul li .text-area dl dt  span{font-weight: 500; border: 1px solid #999999; border-radius: 13px; padding: 2px 12px; margin-right: 11.5px;}
	.main-section02 .spe-area .spe-gallery ul li .text-area span{font-size: 16px; color: #333; word-break: keep-all;}
	.main-section02 .spe-area .spe-gallery ul li .text-area .more-btn2{position: absolute; bottom: 12px; right: 14px; width: 51px; height: 33px; border-radius: 0 10px 0 0; text-align: center; background: #999999; padding: 3px 0;}
	.main-section02 .spe-area .spe-gallery ul li .text-area .more-btn2 a{color: #fff;}
	.main-section02 .spe-area .spe-btn{position: absolute; top: 50%; width: calc(100% + 30px); margin-left: -15px;}
	.main-section02 .spe-area .spe-btn a{font-size: 30px; color: #666666;}
	.main-section02 .spe-area .spe-btn .prev-btn{float: left; margin-left: -3.5px;}
	.main-section02 .spe-area .spe-btn .next-btn{float: right; margin-right: -3.5px;}

	.main-section03 {padding: 49px 15px 0 18px;}
	.main-section03 .row > div{margin-bottom: 49px; position: relative; }
	.main-section03 h2{font-size: 30px; font-weight: bold; color: #323333; margin-bottom: 32px;}
	.main-section03 ul{border-top: 1px solid #333333;}
	.main-section03 ul li a{padding: 20px 0 13px 11px; border-bottom: 1px dashed #cccccc; display: flex; flex-wrap: nowrap; align-items: center; color: #333; font-size: 16px; line-height: 24px;}
	.main-section03 ul li .data{position: relative; width: 22%; padding-right: 5%; font-size: 40px; font-weight: bold; text-align: center; color: #000;}
	.main-section03 ul li .data:after{content: ''; position: absolute; top: calc((100% - 19px) / 2); right: 0; height: 19px; border-right: 1px solid #DBDBDB;}
	.main-section03 ul li .data span{font-size: 12px; font-weight: 500; display: block; color: #666666;}
	.main-section03 ul li .title{width: 75%; padding-left: 3.5%;}
	.main-section03 ul li .data .new-rabel{position: absolute; top: -10px; right: 5px; width: 21px; height: 21px; font-size: 14px; color: #fff; background: #ED660C; border-radius: 50%;}
}

@media(min-width: 660px){
	.main-section02 .spe-area .spe-gallery > ul{width: 600px;}
	.main-section02 .spe-area .spe-gallery ul li{display: flex; justify-content: center;}
	.main-section02 .spe-area .spe-gallery ul li .text-area{height: 377px; overflow: hidden;}
	.main-section02 .spe-area .spe-gallery ul li .text-area dl dt {justify-content: flex-start;}
/* 	.main-section02 .spe-area .spe-gallery{padding: 0 15px; width: 330px; margin: 0 auto; position: relative;} */
}

@media(max-width: 659px){
	.main-section02 .spe-area .spe-gallery{width: 290px;}
}