/* 2021반응형 */

/* video 반응형 */
.index3main-slider video, .sub05_content video, .sub04_content video {object-fit:cover}
.index3main-slider>div.fakeWidth {width:50%; height:100%; top:0; right:0; background:none}
.hall_arrow > div {display:none}

/* header 반응형 */
.mheader, .mobile-nav {display:none}

@media screen and (max-width:768px) {
.nav_wrapper {display:none}
.mheader, .mobile-nav {display:block;}
.header-style-three .header-upper {display:none}
.mobile-wrapper{
	width: 100%;
    margin: 0 auto;
    text-align: center;
}

.mobile{
	overflow: hidden;
	position: fixed;
	display: inline-block;
}

.mheader{
	color: #fff;
	padding: 20px 10px;
	margin-left:0;
	margin-top:0;
	position:fixed;
	z-index:2
}

.line{
	width: 30px;
	height: 3px;
	margin: 10px 0;
	background-color: #fff;
}

.menu-toggle:hover{
	cursor: pointer;
}

.mobile-nav ul{
	padding: 0;
	margin: 0;
	list-style-type: none;
	margin-left:10px
}

.mobile-nav{
	background-color: #3C3842;
	width: 70%;
	height: 100%;
	transform: translate(-100%, 0);
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	padding-top:80px;
	height:100vh;
	position:fixed;
    z-index: 1
}

.mobile-nav h2{
	padding: 25px 20px;
}

.mobile-nav .dropdown li a{
	color: #989AA4;
	display: block;
	padding: 13px 20px;
	margin: 5px 0;
}

.mobile-nav .dropdown li > a{
	border-left: 3px solid #99accb;;
}
.mobile-nav .dropdown li a:hover{
	background-color: #23252B;
	color: #fff;
}

.mobile-nav .m_drop {
display:none
}

.mobile-nav .m_drop li a {
padding: 7px 20px;
font-size:14px;
color:#99accb;
border-left:none
}

.mobile-nav .m_drop li a:hover {
border-left: 3px solid #99accb;;
}

}
/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.index3main-slider, #wbngd {height:auto;}
}

/* main hall 반응형 */
@media screen and (max-width:1680px) {
}

@media screen and (max-width:1200px) {
.page-wrapper {overflow:scroll;}
.index3main-slider, .sub05_content, .sub04_content {min-width:1920px; overflow-x:scroll;}
.hall_arrow > div {display:block; position:fixed; width:11px; height:19px; background: url(../img/h_arrow.png) no-repeat; z-index:1}
.hall_arrow .left {position:fixed; top:50%; transform:rotate(180deg); left:10px}
.hall_arrow .right {position:fixed; top:50%; right:10px;}
.hall_arrow .top {top:10px; transform:rotate(-90deg); left:calc(50% - 5.5px)}
.hall_arrow .bottom {bottom:10px; right:calc(50% - 5.5px); transform:rotate(90deg)}
.sub05_content #center {width:30px; height:30px; position:absolute; left:50%; top:50%}
}



@media screen and (max-width:768px) {
.page-wrapper {height:100vh}
.index3main-slider, .sub05_content, .sub04_content {height:100%}
}

@media screen and (max-width:768px) {
.index3main-slider, .sub05_content, .sub04_content {height:auto}
}