@charset "utf-8";
/* CSS Document */

@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

.inner { margin: 0 auto;  width: 88%;}
.pointcolor { background: linear-gradient(to right, #6814cc, #2674fc); -webkit-background-clip: text;-webkit-text-fill-color: transparent;    display: inline-block;}


#main { }
#main h1{ font-size:54px; font-weight:700; margin: 13px 0; }
#main h2{ font-size:28px; font-weight:600;  margin:20px 0;}
#main h3{ font-size:40px; font-weight:700; color:#4b4b4b}
#main h4{ font-size:28px; font-weight:700; letter-spacing: -1.5px;}




#main .main-visual {position:relative;margin:0 auto; margin-top: 120px;}
#main .main-visual .mv_1 { display: flex;  position: relative; justify-content: center; align-items: center;}
#main .main-visual .mv_1 img{ border-radius: 24px; width: 100%; position: relative;}
#main .main-visual .mv_1 .mv_1_txt{ position: absolute; text-align: center; color: #fff;}
#main .main-visual .mv_1 .mv_1_txt h1{ font-size: 70px;    margin-bottom: 20px;}
#main .main-visual .mv_1 .mv_1_txt h2{ color: #fff;    font-weight: 400;}

.hide {position: absolute;left: -9999%;font-size: 0;line-height: 0;text-indent: -9999px;}




@media all and ( max-width: 1920px ){

}

@media all and ( max-width: 1680px ){
	
}
@media all and ( max-width: 1440px ){
	#main .main-visual {	margin-top: 85px;}
	#main .main-visual .mv_1 .mv_1_txt h1{ font-size: 50px; margin-bottom: 10px;}

    #main .main-visual .mv_2 .mv_2_box a { font-size: 19px; padding: 34px; margin: 6px 0;}



}
@media all and ( max-width: 1280px ){
	#main .main-visual {	display: block;}
	#main .main-visual .mv_2 {	display: flex; margin: 38px 0;}
	#main .main-visual .mv_2 .mv_2_box {display: flex;	width: 100%; align-items: center;}
    #main .main-visual .mv_2 .mv_2_txt { width: 30%;    }
    #main .main-visual .mv_2 .mv_2_box a {  margin: 6px; width: 100%;}
    #main .main-visual .mv_2 .mv_2_box a img {  top: 23%;   width: 15%; }



}
@media all and ( max-width: 1024px ){
	

}

@media all and ( max-width: 960px ){

	#main .main-visual .mv_2 {display: block;}
	#main .main-visual .mv_2 .mv_2_txt {width: 100%;}
	
	
	}
	
@media all and ( max-width: 800px ){
	.inner { width: 95%;}

}

@media all and ( max-width: 640px ){
    #main .main-visual .mv_2 .mv_2_txt {  margin-bottom: 0;  }
    #main .main-visual .mv_1 .mv_1_txt {  top: 15%;  }
    #main .main-visual .mv_2 .mv_2_box a { font-size: 16px;  padding: 24px 10px;}
	#main .main-visual .mv_2 .mv_2_box a img { top: 34%;}


    #main .main-visual .mv_1 .mv_1_txt h1 { font-size: 32px; margin-bottom: 0; }

}


.sec_txt {margin-bottom: 50px;}


#sec01 { margin-top: 100px;}
#sec01 .sec_txt {text-align: center;}
.sec01box {  position: relative; overflow: hidden;  width: 100%; }
.slide-inner {  display: flex;  transition: transform 0.5s ease-in-out; }
.slide-group {  display: flex;  flex-wrap: wrap; justify-content: center; width: 100%; flex-shrink: 0; }
.slide-group li { width: 30%; background: #fff; border-radius: 12px; margin-bottom: 36px; overflow: hidden;  list-style: none;  text-align: center;}
.slide-group li img { width: 60%; }
.s01box_t { padding: 15px; }
.s01box_t p {    font-size: 24px;  margin-bottom: 10px;}
.ticket_possible { background: linear-gradient(to right, #6814cc, #2674fc);  color: white; border: none;  padding:12px 40px; border-radius: 50px; cursor: pointer; font-size: 20px; font-weight: 600; }
.ticket_none { background: #ccc; color: #333; padding:12px 40px; border-radius: 50px;  font-size: 20px;  }
.slider-btn {  position: absolute;  top: 50%;  transform: translateY(-50%);  font-size: 18px; cursor: pointer;  z-index: 10; background: none; }
.slider-btn.left { left: 30px;  }
.slider-btn.right { right: 30px; }


#sec02 {padding: 120px 0; display: flex; justify-content: space-between;align-items: flex-start; gap: 60px;}
.sec02_1 { flex: 2;}
.sec02_1_box ul { display: flex; gap: 20px;  margin-top: 30px;}
.sec02_1_box li { list-style: none; flex: 1; border-radius: 16px; overflow: hidden; background: linear-gradient(to bottom right, #5d17ec, #7c2eff); transition: transform 0.3s ease;}
.sec02_1_box li:nth-child(2) { background: linear-gradient(to bottom right, #6f3cff, #9b5bff);}
.sec02_1_box li:nth-child(3) { background: linear-gradient(to bottom right, #0074ff, #319aff);}
.sec02_1_box li:hover {  transform: translateY(-5px);}
.sec02_1_box li a { padding: 26px 20px;text-decoration: none; color: white; display: flex; justify-content: space-between;}
.sec02_1_box li p {    font-size: 24px; font-weight: bold; margin-bottom: 20px; line-height: 1.4;  padding: 33px;}
.sec02_1_box li img { height: 100%; padding-top: 50px;}
.sec02_2 {min-height: 300px; flex: 1; background: #f8f8f8; border-radius: 16px; padding: 60px;max-width: 440px;}
.sec02_2 .sec_txt { margin-bottom: 15px; padding-bottom: 20px; border-bottom: 2px solid #2b2b29;}
.sec02_2_box{height: 200px; overflow: hidden;}
.sec02_2_box .listWrap{margin-top: -40px;}
.sec02_2_box .listWrap li{line-height: 40px;overflow: hidden;font-size: 18px; color: #555555; text-overflow: ellipsis;white-space: nowrap;display: flex;align-items: center;gap:8px;}
.sec02_2_box .listWrap li .buyText{line-height: 40px; font-size: 18px; color: #000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.sec02_2_box .listWrap li .buyImg{background-position: center;background-repeat: no-repeat; background-size: cover; width: 30px; height: 30px;}
.sec02_2_box .listWrap li .fireImg{background-image:url("/img/user/common/buy/fire_buy.png") ;background-position: center;background-repeat: no-repeat; background-size: cover; width: 30px; height: 30px;}
.sec02_2_box .listWrap:not(:first-child) li{cursor: pointer;}


#sec03 {display: flex;justify-content: space-between;flex-wrap: wrap; gap: 60px;  padding-bottom: 120px;}
.sec03_1, .sec03_2 { flex: 1; min-width: 300px;}
.sec03_1 .sec_txt,
.sec03_2 .sec_txt { margin-bottom: 20px; position: relative;}
.sec03_1 .sec_txt a,
.sec03_2 .sec_txt a {position: absolute; bottom: 15%; right: 0; background: linear-gradient(to right, #6814cc, #2674fc); color: #fff; padding: 12px 30px; border-radius: 999px; font-size: 18px; text-decoration: none; font-weight: 500;}
.faq_list {max-height: 300px; overflow: hidden; list-style: none; border-top: 1px solid #ccc;}
.faq_list li {  border-bottom: 1px solid #ccc; padding: 25px 0;}
.faq_list li > a { display: flex; justify-content: space-between; align-items: center;  padding: 30px;  text-decoration: none; color: #222;  cursor: pointer;}
.faq_list li img {width: 18px; transition: transform 0.3s;}
.faq_list li.active img {  transform: rotate(180deg);}
/* 답변영역 */
.faq_cont { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: #f8f8f8;}
.faq_list li.active .faq_cont { max-height: 300px; /* 충분한 높이 설정 */}
.faq_cont .area { padding: 30px;}
.faq_cont .cont2 p {  font-size: 18px;  color: #333;  line-height: 1.6;  margin-bottom: 8px;}
.faq_cont .cont2 .fc03 { color: #F30; }



.quickmenu {position: fixed; bottom: 100px; width: max-content; left: auto !important; right: 10px !important; z-index: 10;}
.quickmenu ul { }
.quickmenu ul li { display: flex;	align-items: center; justify-content: center; width: 84px;  height: 84px;  border-radius: 14px; margin-top: 10px;}
.quickmenu ul li .imgWrap {text-align: center;}
.quickmenu ul li .imgWrap img{  width: 70%;}
.quickmenu ul li:nth-child(1){background-color: #f9e000; margin-bottom: 8px;}
.quickmenu ul li:nth-child(2){background-color: #2fc950;}
.quickmenu ul li:nth-child(2) p{color: #fff;}






@media all and ( max-width: 1920px ){
	
	#main h1{ font-size:40px;}
	#main h2{ font-size:22px;}
	#main h3 {font-size: 32px;}
	#main h4 {font-size: 24px;}

	.sec_txt {	margin-bottom: 27px;}

	#sec01 .sec01box ul li {height: 380px;    width: calc(100% / 5 - 12px);}
	#sec01 .sec01box ul li img {width: 75%;    padding-bottom: 25px;}
	#sec01 .sec01box ul li .s01box_t p {font-size: 22px;}

	.s01box_t p { font-size: 20px;}
	.ticket_possible, .ticket_none {  padding: 10px 40px; font-size: 18px;}
	.sec02_1 { flex: 2.5;}
	.sec02_1_box li p { padding: 20px;}
	.sec02_1_box li img {  width: 33%;}
	.sec02_2_box p { font-size: 18px;}
	.sec02_2 { padding: 50px 50px 20px 50px;}

}


@media all and ( max-width: 1400px ){

	#main h1 { font-size: 30px; margin: 10px 0; }
	#main h2 {  font-size: 19px; }
	#main h4 {font-size: 18px;}


	#sec01 {margin-top: 43px;}
    .ticket_possible, .ticket_none { padding: 10px 35px;  font-size: 16px;}

	#sec02 { padding: 80px 0; gap: 20px;}
    .sec02_2 { padding: 30px 30px 10px 30px;}
	.sec02_1_box li p { font-size: 20px;}

	#sec03 { padding-bottom: 80px;}
	.sec03_1 .sec_txt a, .sec03_2 .sec_txt a { font-size: 16px;}
	.faq_list li > a { padding: 30px 10px;}
	.faq_cont .cont2 p { font-size: 16px;}

	.quickmenu ul li {width: 64px;	height: 64px; font-size: 14px;}
	.quickmenu ul li .imgWrap img {	width: 60%;}



}


@media all and ( max-width: 1280px ){

	#sec01 .sec01box ul li{ height: 348px; width: calc(100% / 4 - 11px);}

}




@media all and ( max-width: 1024px ){

	#sec01 .sec01box ul li {	width: calc(100% / 3 - 16px);}
	.quickmenu {left: 94%;}

	#sec02 { flex-direction: column;  padding: 40px 0;   gap: 0;}
	.sec02_1_box li { flex: 0 0 calc(33.33% - 20px);}
	.sec02_2 {  width: 100%; margin-top: 15px; box-sizing: border-box;}

	#sec03 { gap: 20px; padding: 10px 0 50px 0; }
	.sec03_1 .sec_txt a, .sec03_2 .sec_txt a { font-size: 15px;  padding: 10px 24px;}

}

@media all and ( max-width: 800px ){
    .slide-group li { width: 48%; }

	#sec02 .sec_txt h1 {font-size: 26px; }
	#sec02 .sec_txt p { font-size: 14px; }
	.sec02_1_box li p {font-size: 18px;  padding: 6px; }
	.sec02_1_box li img { padding-top: 26px;}

	#sec03 {  display: block;}
	.sec03_2 { margin-top: 20px;}

    .quickmenu { left: 90%;  }

}

@media all and ( max-width: 640px ){
	#main h1 { font-size: 26px; }
    #main h2 {  font-size: 20px; }

 	#sec01 .sec01box ul li { width: calc(100% / 2 - 5px); height: 322px;}
	#sec01 .sec01box ul .linone {  display: none;}
	#sec01 .sec01box ul li .s01box_t p { font-size: 19px; }
    #sec01 .sec01box ul li .s01box_t .ticket_possible {  font-size: 16px;  padding: 9px 38px; }

	.slider-btn.left{left: -14px;}
	.slider-btn.left img{ width: 50%;}
	.slider-btn.right { right: -14px;}
	.slider-btn.right img{ width: 50%;}
	.slide-group li {  margin-bottom: 12px;}

	.sec02_1_box ul { justify-content: space-between; gap: 0;}
	.sec02_1_box li { flex: 0 0 calc(33.33% - 6px);}
	.sec02_1_box li img {padding-top: 40px;}

}

@media all and ( max-width: 500px ){

	#main h2 {font-size: 15px;  }

	.sec02_1_box ul { display: block;}
	.sec02_1_box li { width: 100%;  display: inline-block; margin-bottom: 10px;}
	.sec02_1_box li img { width: 20%; padding-top: 0;}
	.sec02_1_box li a {  padding: 30px;}

}