@charset "utf-8";

font-family:'Noto Sans KR', sans-serif;
.on {display:block;}
img {width:100%;}
h3 {padding-left:0;}
* {padding:0; margin:0; text-decoration:none; list-style:none; line-height:none; scroll-behavior: smooth;}
.wrap {width: 100%; background:url(/images/np/event/bg_img.png); font-family:'Noto Sans KR', sans-serif;}
.event { max-width:1330px; margin:0 auto; display:block;}
.event .top_menu { position:relative; display:blcok; z-index:9999;}
.event .top_menu .mobile_menu {display:none;}
.event .top_menu .menu_fixed { display:block; position:fixed; max-width: 1190px; padding:40px 70px 20px 70px; overflow:hidden; background-color:#fff; width:100%;}
.event .top_menu .menu_fixed li {float:left; }
.event .top_menu .menu_fixed li a {font-weight:600; font-size:24px; color:#000; letter-spacing:-2.5px;}
.event .top_menu .menu_fixed li a.menu01 {padding-left:80px; padding-right:50px; border-right:2.5px solid #333; height:20px;}
.event .top_menu .menu_fixed li a.menu02 {padding-left:50px;}


/*메뉴01*/
.contents .menu01 { display:block; background-color:#fff; overflow:hidden; padding-top:150px;}
.contents .menu01 .text { float:left; display:block; padding-left:7%; width:20%;}
.contents .menu01 .m_text {display:none;}
.contents .menu01 .swiper-container { width:68%; height:520px;}
.contents .menu01 .swiper-container .swiper-slide {text-align:center; background:none;}
.contents .menu01 .swiper-container .swiper-button-prev, .contents .menu01 .swiper-container .swiper-button-next {color:purple;}

/*메뉴02*/
.contents .menu02 {display:block; background-color:#fff; overflow:hidden; padding: 150px 20px 20px 20px;}
.contents .menu02 .text { float:left; display:block; padding-left:8%; padding-top:150px; width:16%; position:relative;}
.contents .menu02 .text .song {height:50px; width:180px; position:absolute; top:412px;}
.contents .menu02 .text02 { display:none;}
.contents .menu02 .con { float:left; display: block; padding-left: 6%; width:68%;}

.contents .menu02 .con_right01 {overflow:hidden; }
.contents .menu02 .btn {float: left; display: block; padding-top:5px; width:30%}
.contents .menu02 .btn:nth-child(3),.contents .menu02 .btn:nth-child(4) {padding-left:40px;}
.contents .menu02 .btn .sub_text {text-align:center; padding-top:10px; font-size:18px; font-weight:600; color:#555; letter-spacing:-1px;}
.contents .menu02 .con_right02 h3 {padding-top:50px;}
.contents .menu02 .m_info {display:none;}


.contents .menu03 { /* max-width:1200px; */ padding: 100px 70px 100px 70px; background-color: #fff; }
.contents .footer {width:13%; padding:50px;}

@media all and (min-width:1221px) and (max-width:1350px) { 
	.contents .menu01 .text { padding-left:4%;}
	.contents .menu02 .text {padding-left:4%; }
}

@media all and (min-width:768px) and (max-width:1280px) {
	.contents .menu01 {padding-top:50px;}
	.contents .menu01 .text {display:none;}
	.contents .menu01 .m_text {display:block; margin:50px auto; width:40%;}
	.contents .menu01 .player_box {width:80%; padding : 0; text-align:center; padding-top:50px; padding-left:10%;}
	.contents .menu01 .swiper-container { width:100%; height:640px;}

	.contents .menu02 .btn:nth-child(3),.contents .menu02 .btn:nth-child(4) {padding-left:5%;}
	.contents .menu02 .con { padding-left: 0; width:100%;}
	.contents .menu02 .text { display:none;}
	.contents .menu02 .text02 { display:block; width:100%; margin:0 auto;}
	.contents .menu02 .text02 .title {display: block; width: 40%; text-align: center; padding: 5px; margin: 0 auto;}
	.contents .menu02 .text02 .sub {display: block; width: 20%; text-align: center; padding: 5px; margin: 0 auto;}
	.contents .menu02 .text02 a {display: block; width: 15%; text-align: center; padding: 20px; margin: 0 auto;}
	.contents .menu02 .player_box {width: 100%; height: 500px; }
	.contents .menu02 .btn {padding:0; width:30%}
	.contents h3 {text-align:center; padding:20px;}
	
	.contents .menu03 {padding:20px; padding-top:50px; }
	
    .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  align-items: center; }
}

@media all and (min-width:320px) and (max-width:1235px) {
	/*네비*/
	.event .top_menu .menu_fixed .mobile_menu { display:block; position: fixed; top: 25px; right: 20px;}
	.event .top_menu .menu_fixed { display:block;  overflow:hidden; background-color:#fff; width:100%; padding:20px;}
	.event .top_menu .menu_fixed li { float:left; }
	.event .top_menu .menu_fixed li a img {width:80%;}
	.event .top_menu .menu_fixed li a.menu01 {display:none;}
	.event .top_menu .menu_fixed li a.menu02 {display:none;}
	
	h3 {padding-left:5%;}
	
	.contents .menu01 .swiper-container .swiper-slide { width:100%;}
	.contents .menu02 .con {padding-left:0;}
	
	.mobile_menu_win {display:none; position: absolute; background-color: #fff; width: 100%; top: 90px; box-shadow: 0px 6px 4px -4px grey;}
	.mobile_menu_win div { padding:10px; text-align:center; color:#333; font-weight:600; font-size:18px;  }
}
@media all and (max-width:767px) {
	.wrap {width: 100%; background:url(/images/np/event/m_bg_img.png);}
	.contents .menu01 {padding-top:50px; background:none;}
	.contents .menu01 .text {display:none;}
	.contents .menu01 .m_text {display:block; margin:50px auto; width:60%;}
	.contents .menu01 .player_box {width:100%; padding : 50px 0px 20px; text-align:center;  }
	.contents .menu01 .swiper-container { width:100%; height:240px;}
	
	.contents .menu02 {display:block; background-color:rgba(0,0,0,0); overflow:hidden; padding: 100px 0px 0px 0px;}
	.contents .menu02 .con { padding-left: 0; width:100%; }
	.contents .menu02 .text { display:none;}
	.contents .menu02 .text02 { display:block; width:100%; margin:0 auto;}
	.contents .menu02 .btn { width: 100%;}
	.contents .menu02 .text02 .title {display: block; width: 80%; text-align: center; padding: 5px; margin: 0 auto;}
	.contents .menu02 .text02 .sub {display: block; width: 30%; text-align: center; padding: 5px; margin: 0 auto;}
	.contents .menu02 .text02 a {display: block; width: 40%; text-align: center; padding: 5px; margin: 0 auto;}
	.contents .menu02 .btn {padding:0; width:90%; padding:5%;}
	.contents .menu02 .btn:nth-child(3),.contents .menu02 .btn:nth-child(4) {padding-left:5%;}
	.contents .menu02 .btn .sub_text {text-align:center; padding-top:10px; font-size:18px; font-weight:400; line-height:1.4; color:#555;}
	.contents .menu02 .info {display:none;}
	.contents .menu02 .m_info {display:block;}	
	.contents .menu03 {padding:0;}
	.contents .menu03 .text {display:none;}
	.contents .footer {display:none;}

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
}