/*공통*/
.main_side_nav{
	position:fixed;
	right:0;
	top:50%;
	margin-top:-30px;
	transform: translateY(-50%);
	background:#161616;
	border-top:3px solid #ffd83d;
	text-align:center;
	max-width:16rem;
	z-index:201;
}
.main_side_nav::after{
	content:"";
	position:absolute;
	bottom:-30px;
	left:0;
	width:100%;
	height:30px;
	background:url(../_img/main/nav_bg.png) no-repeat left top / 100% 100%;
}
.main_side_nav ul > li{
	width:100%;
	border-bottom:1px solid rgba(255,255,255,.1);
}
.main_side_nav ul > li > a{
	display:block;
	font-size:1.8rem;
	padding:1.5rem 0;
	color:#fff;
	font-weight:500;
	text-shadow: 1px 1px 3px #000;
}
.main_side_nav ul > li.active > a{
	color:#ffd83d
}
.main_side_nav > p{
	padding-top:4rem;
}
.main_side_nav > p > a{
	display:inline-block;
	padding:0px 8px;
	opacity:.5;
	transition:all .3s ease-in-out;
}
.main_side_nav > p > a:hover{
	opacity:1;
}
.main_side_nav > p > a > img{
	height:20px;
}

.mobile_menu{
	position:fixed;
	right:2rem;
	top:2rem;
	color:#fff;
	z-index:202;
}
.mobile_menu button{
	background:none;
	border:0;
	color:#fff;
	outline:none;
	font-size:4rem;
}
.mobile_menu.active button .xi-bars:before {
    content: "\e921" !important;
}


#main_container section{
	height:100vh;
	min-height:900px;
	display:flex;
	align-items: center;
	justify-content: center;
	padding-right:3rem;
	padding-left:3rem;
	padding-top:6rem;
	padding-bottom:6rem;
}
@media(min-width:1200px){
	.mobile_menu{
		display:none
	}
	.main_side_nav{
		right:0 !important;
	}
}
@media(max-width:1199.98px){
	.main_side_nav{
		right:-150px;
		transition:all .5s ease-in-out;
	}
	.main_side_nav.active{
		right:0;
	}
	
}
@media(max-width:991.98px){
	#main_container section	.contents{
		max-width:680px;
		margin:0 auto;
	}
	#main_container section .contents > h3 img.title{
		height:10rem;
	}
}

@media(max-width:767.98px){
	#main_container section{
		height:auto;
		min-height:unset;
		padding-top:8rem;
		padding-bottom:8rem;
	}
	#main_container section .contents > h3 img.title{
		height:8rem;
	}
	
}


/*sec01*/
#main_container > .sec01{
	text-align:center;
	color:#fff;
	position:relative;
	z-index:1;
}
#main_container > .sec01 h2{
	display:flex;
	justify-content: center;
}
#main_container > .sec01 h2 p{
	margin:0 .5rem;
}
#main_container > .sec01 .btn_box{
	display:flex;
	justify-content: center;
}
#main_container > .sec01 .btn_box a{
	margin:0 1.5rem;
	position:relative;
}
#main_container > .sec01 .btn_box a .char{
	position:absolute;
	left:-6rem;
	top:50%;
	transform:translateY(-50%)
}
#main_container > .sec01 .bg_video{
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
	width:100%;
	height:100%;
	z-index:-1;
}
#main_container > .sec01 .bg_video::after{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.65);
	z-index:2;
}
#main_container > .sec01 .bg_video > video{
	position:absolute;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(1.4);
	z-index:1;
}
#main_container > .sec01 .bg_video > video::-webkit-media-controls{
	display:none !important;
}
@media(max-width:1199.98px){
	#main_container > .sec01 .bg_video > video{
		width:auto;
	}
}
@media(max-width:991.98px){
	#main_container > .sec01 .btn_box .btn-img{
		max-width:28rem;
	}
	#main_container > .sec01 .btn_box .char{
		max-width:14rem;
	}
	
	
}
@media(max-width:767.98px){
	#main_container > .sec01 h2,
	#main_container > .sec01 .btn_box{
		flex-wrap:wrap;
	}
	#main_container > .sec01 h2 img{
		max-width:26rem !important;
	}
}

@media(max-width:576.98px){
	#main_container > .sec01 h1 img{
		max-width:30rem !important;
	}
	#main_container > .sec01 h2 img{
		max-width:22rem !important;
	}
	#main_container > .sec01 .btn_box .btn-img{
		max-width:24rem;
	}
	#main_container > .sec01 .btn_box .char{
		max-width:12rem;
		left:-4rem !important;
	}
	#main_container > .sec01 .bg_video > video{
		transform: translate(-50%, -50%) scale(2);
	}
}


/*sec02*/
#main_container > .sec02{
	background:url(../_img/main/sec02_bg.jpg) no-repeat center center / cover;
	color:#fff;
	min-height:120rem;
	position:relative;
	z-index:10;
	height:auto;
	padding-top:10rem;
	padding-bottom:10rem;
}
#main_container > .sec02 .contents{
	width:100%;
	max-width:1050px;
}
#main_container > .sec02 .event_img{
	position:relative;
}
#main_container > .sec02 .event_img .view{
	position:absolute;
	left:-4%;
	width:30%;
	height:100%;
	z-index:2;
}
#main_container > .sec02 .event_img dl dt{
	font-size:3.6rem;
	display:flex;
	height:72px;
	line-height:72px;
}
#main_container > .sec02 .event_img img{
	width:100%;
}

#main_container > .sec02 .event_img dl dt > p:nth-child(1){
	width:100%;
}
#main_container > .sec02 .event_img dl:nth-child(1) dt > p{
	background:url(../_img/main/sec02_tit_bg3.png) repeat center center / auto 100%;
	color:#7c3700;
	text-shadow: 2px 2px 0px rgba(124,55,0,.3)
}
#main_container > .sec02 .event_img dl:nth-child(2) dt > p{
	background:url(../_img/main/sec02_tit_bg6.png) repeat center center / auto 100%;
	color:#002767;
	text-shadow: 2px 2px 0px rgba(0,39,103,.3)
}


#main_container > .sec02 .event_img dl dd{
	border:2px solid rgba(255,255,255,.8);
	border-top:0;
	padding:30px 20px;
}

#main_container > .sec02 h4{
	display:flex;
	align-items: center;;
}
#main_container > .sec02 .form_box{
	display:flex;
}
#main_container > .sec02 .form_box > input{
	background:#fff;
	height:9rem;
	padding:0 3rem;
	font-size:2.4rem;
	border:0;
	width:100%;
	font-weight:500;
}
#main_container > .sec02 .form_box > button{
	background:url(../_img/main/sec02_img2.png) no-repeat center center / 100% 100%;
	color:#000;
	height:9rem;
	font-size:3.2rem;
	font-weight:800;
	border:0;
	width:22rem;
	flex-shrink: 0;
}
#main_container > .sec02 .check_box{
	display:flex;
	align-items: center;
	margin-top:.5rem;
	flex-wrap:wrap;
}
#main_container > .sec02 .check_box .checkbox{
	position:relative;
	overflow:hidden;
	margin-right:2rem;
}
#main_container > .sec02 .check_box .checkbox input[type="checkbox"]{
	position:absolute;
	width:0;
	height:0;
	left:-100px;
}
#main_container > .sec02 .check_box .checkbox label{
	display:block;
	font-size:2rem;
	padding:5px 0;
	padding-left:40px;
	min-width:38rem;
	position:relative;
	cursor: pointer;
}
#main_container > .sec02 .check_box .checkbox label::after{
	content:"";
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	width:30px;
	height:30px;
	border:1px solid #424242;
	background:#000;
}
#main_container > .sec02 .check_box .checkbox label::before{
	content:"";
	position:absolute;
	left:2px;
	top:50%;
	transform:translateY(-50%);
	margin-top:-8px;
	background:url(../_img/main/icon_check.png) no-repeat center center / cover;
	width:34px;
	height:24px;
	z-index:2;
	opacity:0;
}
#main_container > .sec02 .check_box .checkbox input:checked + label::before{
	opacity:1;
}

#main_container > .sec02 .check_box a{
	border:1px solid #424242;
	color:#dddddd;
	display:inline-block;
	font-size:1.4rem;
	background:#000;
	padding:.6rem 1.5rem .4rem 1.5rem;;
}

#main_container > .sec02 .app_box{
	display:flex;
}
#main_container > .sec02 .app_box > div:first-child{
	width:100%;
}
#main_container > .sec02 .app_box > div:last-child{
	width:256px;
	flex-shrink: 0;
	text-align:right;
	position:relative;
	padding-left:30px;
	margin-left:30px;
}
#main_container > .sec02 .app_box > div:last-child a{
	display:inline-block;
}
#main_container > .sec02 .app_box > div:last-child::after{
	content:"";
	position:absolute;
	left:0;
	top:0;
	height:100%;
	border-left:1px solid rgba(255,255,255,.3)
}

@media(max-width:991.98px){
	#main_container > .sec02 .form_box > input{
		height:7rem;
		padding:0 3rem;
		font-size:2.2rem;
	}
	#main_container > .sec02 .form_box > button{
		height:7rem;
		font-size:2.8rem;
		width:20rem;
	}
	#main_container > .sec02 .check_box .checkbox{
		width:100%;
	}
	#main_container > .sec02{
		background:url(../_img/main/sec02_bg.jpg) no-repeat center center / cover;
		color:#fff;
		min-height:110rem;
		height:auto;
	}
	#main_container > .sec02 .app_box{
		display:flex;
		flex-wrap:wrap;
	}
	#main_container > .sec02 .app_box > div:last-child{
		width:100%;
		flex-shrink: 0;
		text-align:center;
		position:relative;
		padding-left:0px;
		margin-left:0px;
		margin-top:3rem;
		padding-top:3rem;
	}
	#main_container > .sec02 .app_box > div:last-child::after{
		content:"";
		position:absolute;
		left:0;
		top:0;
		height:0;
		width:100%;
		border-left:0px solid rgba(255,255,255,.3);
		border-top:1px solid rgba(255,255,255,.3);
	}
	
}

@media(max-width:767.98px){
	#main_container > .sec02 .form_box > input{
		padding:0 2rem;
		font-size:1.8rem;
	}
	#main_container > .sec02 .form_box > button{
		font-size:2rem;
		width:12rem;
	}
	#main_container > .sec02 .event_img dl dt{
		font-size:2.6rem;
		display:flex;
		height:60px;
		line-height:60px;
	}
}


/*sec03*/
#sec_container{
	background:url(../_img/main/sec03_bg.jpg) no-repeat center center / cover;
}
#main_container .sec03{
	width:100%;
	max-width:1000px;
	margin:0 auto;
	text-align:center;
}
#main_container .sec03 .contents{
	width:100%;
}
#main_container .sec03 .char_list{
	
}
#main_container .sec03 .char_list > ul{
	list-style:none;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content: space-between;
	text-align:center;
	width:100%;
}
#main_container .sec03 .char_list > ul > li{
	width:calc(100%/3);
	max-width:28rem;
}
#main_container .sec03 .char_list > ul > li a{
	display:block;
	position:relative;
}
#main_container .sec03 .char_list > ul > li a > p:first-child{
	overflow:hidden;
	position:relative;
	padding-top:130%;
}
#main_container .sec03 .char_list > ul > li a > p:first-child img{
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
}
#main_container .sec03 .char_list > ul > li a > p:last-child{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	z-index:3;
	background:url(../_img/main/sec03_char_name_bg.png) no-repeat center center / 100% 100%;
	color:#fff;
	height:5rem;
	font-size:2rem;
	line-height:5rem;
}
#main_container .sec03 .char_list > ul > li a:hover > p:last-child{
	background:url(../_img/main/sec03_char_name_bg2.png) no-repeat center center / 100% 100%;
	color:#000;
	font-weight:800;
}

@media(max-width:991.98px){
	#main_container .sec03 .char_list > ul > li{
		padding-right:10px;
		padding-left:10px;
	}
	#main_container .sec03 .char_list > ul > li a > p:first-child{
		padding-top:150%;
	}
}
@media(max-width:767.98px){
	#main_container .sec03 .char_list > ul{
		justify-content: center;
	}
	#main_container .sec03 .char_list > ul > li{
		width:calc(100%/2);
		max-width:24rem;
	}
}

@media(max-width:767.98px){
	#main_container .sec03{
		height:auto;
		max-height:unset;
	}
}




/*sec04*/
#main_container .sec04{
	text-align:center;
	padding-left:15px;
	padding-right:15px;
	max-width:1290px;
	width:100%;
	margin:0 auto;
}
#main_container .sec04 .contents{
	width:100%;
}
#main_container .sec04 .tabs_contents{
	position:relative;
	display:none;
}
#main_container .sec04 .tabs_contents.first{
	display:block;
}
#main_container .sec04 .tabs{}
#main_container .sec04 .tabs ul{
	display:flex;
	justify-content: center;
}
#main_container .sec04 .tabs ul li{
	margin:0px 5px;
}
#main_container .sec04 .tabs ul li a{
	display:block;
	border:2px solid rgba(204,204,204,.4);
	color:rgba(204,204,204,.4);
	font-size:2rem;
	font-weight:500;
	border-radius:5rem;
	padding:1rem 2rem;
	min-width:18rem;
}
#main_container .sec04 .tabs ul li a.active{
	border:2px solid #10ffff;
	display:block;
	color:#10ffff;
	font-size:2rem;
	font-weight:500;
	border-radius:5rem;
	padding:1rem 2rem;
	min-width:18rem;
}
#main_container .sec04 .mySwiper{
	overflow:hidden;
	position:relative;
}
#main_container .sec04 .swiper-slide{}
#main_container .sec04 .swiper-slide .gallery_box{}
#main_container .sec04 .swiper-slide .gallery_box .small_thum{
	list-style:none;
	padding:0;
	margin-left:-7px;
	margin-right:-7px;
	margin-top:2rem;
	display:flex;
}
#main_container .sec04 .swiper-slide .gallery_box .small_thum li{
	padding-left:7px;
	padding-right:7px;
	width:calc(100%/3);
}

#main_container .sec04 .sec04-button-next,
#main_container .sec04 .sec04-button-prev{
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	margin-top:-3rem;
	color:#fff;
	font-size:4rem;
	z-index:3;
}
#main_container .sec04 .sec04-button-next {
	right:-6rem;
}
#main_container .sec04 .sec04-button-prev {
	left:-6rem;
}
#main_container .sec04 .sec04-pagination{
	margin-top:4em;
}
#main_container .sec04 .sec04-pagination .swiper-pagination-bullet{
	width:1.6rem;
	height:1.6rem;
	border:2px solid #00d2ff;
	background:none;
	opacity:1 !important;
	margin:0 5px;
}
#main_container .sec04 .sec04-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background:#00d2ff;
}
#main_container .sec04 .video_container{
	max-width:80rem;
	margin:0 auto;
}
#main_container .sec04 .video_container .video_box{
	position:relative;
	padding-top:56.25%;
}
#main_container .sec04 .video_container .video_box iframe,
#main_container .sec04 .video_container .video_box video{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#main_container .sec04 .video_container .video_thum{
	list-style:none;
	padding:0;
	margin-left:-5px;
	margin-right:-5px;
	display:flex;
	margin-top:1rem;
	flex-wrap:wrap;
}
#main_container .sec04 .video_container .video_thum li{
	width:calc(100%/3);
	padding:5px;
	cursor:pointer;
}


/*메인모달*/
.modal-xl{
	max-width:1260px !important;
}
.modal-lg{
	max-width:960px !important;
}
.modal-content{
	background:#fff url(../_img/main/modal_bg.png) no-repeat center center / 100% 100%;
	border-radius:0;
	box-shadow: 0;
	max-width:90%;
	margin:0 auto;
}
.modal-content .modal_close{
	position:absolute;
	right:0;
	top:-5rem;
	width:5rem;
	height:5rem;
	background:none;
	color:#fff;
	font-size:4rem;
	z-index:5;
	padding:0;
	line-height:5rem;
	border:0;
	outline: none;
}
.modal-content .modal-body{
	max-height:80vh;
	overflow:auto;
	padding:6rem;
}
.modal-video .modal-content{
	background:none !important;
}
.modal-video .modal-content .modal-body{
	max-height:unset;
	padding:0;
	background:none;
}
.modal-video .modal-content .modal-body .video_box{
	position:relative;
	padding-top:56.25%;
}
.modal-video .modal-content .modal-body .video_box iframe,
.modal-video .modal-content .modal-body .video_box video{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
@media(max-width:767.98px){
	.modal-content .modal-body{
		padding:3.5rem 3rem;
	}
}

/*캐릭터 모달*/
#pop-char .mySwiper{
	overflow:hidden;
} 
.modal_char_box{
	display:flex;
	align-items: center;
}
.modal_char_box .char_img{
	width:48rem;
	flex-shrink: 0;
}
.modal_char_box .char_img img{
	width:100%;
}
.modal_char_box .info{
	width:100%;
	word-break: keep-all;
}
.modal_char_box .info p:nth-child(2){
	min-height:13rem;
}
.modal_char_box .info h4 img{
	max-width:36.4rem;
}
.modal_char_box .info .other{
	display:flex;
}
.modal_char_box .info .other a{
	margin-right:1rem;
}
.modal_char_box .info .other a img{
	max-width:9rem;
	filter: grayscale(1);
}
.modal_char_box .info .other a:hover img{
	max-width:9rem;
	filter: grayscale(0);
}

#pop-char .pop-char-prev,
#pop-char .pop-char-next{
	position:absolute;
	top:50%;
	transform:translatey(-50%);
	color:#fff;
	font-size:4rem;
}
#pop-char .pop-char-prev{
	left:-8rem;
}
#pop-char .pop-char-next{
	right:-8rem;
}

@media(max-width:1190px){
	.modal_char_box .char_img{
		width:40rem;
		flex-shrink: 0;
	}
	#pop-char .pop-char-prev{
		left:-5rem;
	}
	#pop-char .pop-char-next{
		right:-5rem;
	}
	.modal_char_box .info h4 img {
		max-width: 30rem;
	}
	.modal_char_box .info .stat img{
		max-width:32rem;
	}
	.modal_char_box .info .other a img {
		max-width: 7rem;
	}
}
@media(max-width:767.98px){
	.modal_char_box{
		flex-wrap:wrap;
	}
	.modal_char_box .char_img{
		width:100%;
		text-align:center;
	}
	.modal_char_box .char_img img{
		max-width:30rem;
	}
	.modal_char_box .info{
		text-align:center;
	}
	.modal_char_box .info .other{
		justify-content: center;
	}
}
@media(max-width:576.98px){
	.modal_char_box .char_img img{
		max-width:24rem;
	}
	.modal_char_box .info h4 img {
		max-width: 22rem;
	}
	#pop-char .modal-body{
		padding:3rem 2rem;
	}
	#pop-char .pop-char-prev{
		left:-4rem;
	}
	#pop-char .pop-char-next{
		right:-4rem;
	}
	.modal_char_box .info .other a img {
		max-width: 5.5rem;
	}

}


.p_pre{
	white-space: pre-line;
}