@charset "utf-8";

/* /////////////// jinstar /////////////// */

body{ background:url('../images/funcow_bg.png') 50% -15% repeat-y #f2c4c4; background-size:100% auto;}

/*** login ***/
.login_wrap{ background:url('../images/login_bg.jpg') 50% 50% no-repeat; background-size:cover; width:100%; height:100%; min-height:600px; overflow-y:auto; overflow-x:hidden; padding:0 0; display:flex; align-items:center;}
.login_box{ max-width:1000px; padding:20px; margin:0 auto; position:relative; width:100%;}

.login_box .login_logo{ margin-bottom:5px;}
.login_box .login_logo img{ max-height:31px;}

.login_box .login_title{ margin-bottom:50px;}
.login_box .login_title h3{ font-size:4em; display:block; font-weight:800; margin-bottom:10px; color:var(--black);}
.login_box .login_title h3 b{ font-size:1em; color:var(--maincolor); font-weight:800;}
.login_box .login_title h4{ font-weight:600; font-size:1.5em; color:var(--black);}

.login_box .input_box{ max-width:450px; display:flex; gap:10px; margin-bottom:20px; position:relative;}
.login_box .input_box > div{ width:calc(100% - 94px);}
.login_box .input_box div input{ width:100%; border:0; box-shadow:none; margin-bottom:10px; line-height:42px; height:42px; padding:0 10px;}
.login_box .input_box div input:last-child{ margin-bottom:0;}
.login_box .input_box button{ width:94px; line-height:94px; background-color:var(--maincolor); color:var(--white); font-size:1.2em; font-weight:600; position:relative; z-index:2;}
.login_box .input_box button:hover{ background-color:#810024;}
.login_box .input_box:after{ content:''; display:block; position:absolute; z-index:1; right:8px; top:-65px; width:77px; height:77px; background:url('../images/login_chara.png') 50% 50% no-repeat; background-size:77px auto;
-webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -ms-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease;}
.login_box .input_box:has(button:hover):after{ top:-70px;}

.login_box .login_msg{}
.login_box .login_msg ul{} 
.login_box .login_msg ul li{ color:var(--black); margin-bottom:5px; font-weight:300;}

/*** select ***/
.width_box{ max-width:970px; margin:0 auto; padding:0 30px;}

.event_header #lnb{ padding:40px 0; position:absolute; top:0; left:0; right:0; width:100%; z-index:5;}
.event_header #lnb ul{ text-align:right;}
.event_header #lnb ul li{ display:inline-block; vertical-align:middle;}
.event_header #lnb ul li a{ font-weight:600;}

.event_visual{ text-align:center; padding:200px 20px 0; height:820px; position:relative; z-index:1;}
.event_visual .event_logo{ margin-bottom:5px;}
.event_visual .event_logo img{ max-height:50px;}
.event_visual h3{ font-size:5em; display:block; font-weight:800; margin-bottom:10px; color:var(--black);}
.event_visual h3 b{ font-size:1em; color:var(--maincolor); font-weight:800;}

.event_compl .event_visual{ padding-top:150px; height:440px;}
.event_compl .event_visual h3{ font-size:3.8em;}

/* 배경 속도 차등 애니메이션 */
.event_visual .move_layer{ position:fixed; inset:0; background-size:cover; background-repeat:repeat; pointer-events:none;}
.event_visual .move_layer.ml_bg{ z-index:1; top:50%; width:815px; margin:0 auto;}
.event_visual .move_layer.ml_img{ z-index:2; top:57%; width:483px; margin:0 auto;}
@keyframes parallax-sp1{ from { transform: translateY(0); } to { transform: translateY(-80vh); } }
@keyframes parallax-sp2{ from { transform: translateY(0); } to { transform: translateY(-120vh); } }
@keyframes parallax-sp1_2{ from { transform: translateY(0); } to { transform: translateY(-40vh); } }
@keyframes parallax-sp2_2{ from { transform: translateY(0); } to { transform: translateY(-80vh); } }
.event_visual .move_layer{ animation:linear both; animation-timeline: scroll();}
.event_visual .ml_bg{ animation-name:parallax-sp1;}
.event_visual .ml_img{ animation-name:parallax-sp2;}
@media (prefers-reduced-motion: reduce) { .move_layer { animation: none; } }

.event_compl .event_visual .move_layer.ml_bg{ top:34%; width:304px;}
.event_compl .event_visual .move_layer.ml_img{ top:38%; width:174px;}
.event_compl .event_visual .ml_bg{ animation-name:parallax-sp1_2;}
.event_compl .event_visual .ml_img{ animation-name:parallax-sp2_2;}

.event_form{ position:relative; z-index:2;}
.form_bgbox{ max-width:910px; margin:0 auto; background-color:var(--white); padding:50px 30px;}
.form_bgbox h4{ font-size:2em; font-weight:700; color:var(--black); margin:50px 0 30px;}
.form_bgbox h4:first-child{ margin-top:0;}
.event_prolist ul{ display:flex; gap:20px;}
.event_prolist ul li{ width:100%; position:relative;}
.event_prolist ul li .ep_icon{ position:absolute; top:15px; left:15px; color:var(--white); font-weight:500; display:inline-block; vertical-align:middle; background-color:var(--maincolor); padding:5px 10px; border-radius:50px; font-size:0.8em; z-index:1;}
.event_prolist ul li .ep_thm{ margin-bottom:10px;}
.event_prolist ul li .ep_thm img{ width:100%; display:block;}
.event_prolist ul li .ep_name{ margin-bottom:5px; font-size:1.4em; font-weight:600;}
.event_prolist ul li .ep_price{ margin-bottom:5px; font-size:1em; font-weight:600;}
.event_prolist ul li .ep_count{ width:80px; position:relative;}
.event_prolist ul li .ep_count input{ width:40px; margin:0 20px; border:0; text-align:center; background:none; box-shadow:none;}
.event_prolist ul li .ep_count button,
.event_prolist ul li .ep_count a{ position:absolute; width:20px; text-align:center; height:35px; line-height:35px; display:block; top:0; z-index:1; background-repeat:no-repeat; background-position:50% 50%; background-size:10px auto;}
.event_prolist ul li .ep_count button span,
.event_prolist ul li .ep_count a span{ font-size:15px; line-height:35px;}
.event_prolist ul li .ep_count button.pdlc_plus,
.event_prolist ul li .ep_count a.pdlc_plus{ right:0; background-image:url('../images/count_plus.png');}
.event_prolist ul li .ep_count button.pdlc_minus,
.event_prolist ul li .ep_count a.pdlc_minus{ left:0; background-image:url('../images/count_minus.png');}
.event_prolist ul li .ep_sum{ margin-bottom:15px; font-size:1.4em; font-weight:800; color:var(--maincolor);}

.event_sum_price{ text-align:center; font-weight:600; font-size:1.2em; margin-top:30px; padding:20px 10px; background-color:#f2c4c4;}
.event_sum_price b{ font-weight:600; font-size:1.2em; color:var(--maincolor); font-weight:800;}

.form_bgbox .write_table table tr th{ color:#7b7b7b; font-weight:300;}
.form_bgbox .write_table table tr td input[type="text"]{ width:295px;}

.event_compl .event_prolist ul{ display:flex; gap:20px;}
.event_compl .event_prolist ul li{ width:33.33333333%; display:flex; gap:10px;}
.event_compl .event_prolist ul li .ep_thm{ width:91px;}
.event_compl .event_prolist ul li > div{ width:calc(100% - 91px);}
.event_compl .event_prolist ul li > div .ep_name{ font-size:1em; font-weight:600;}
.event_compl .event_prolist ul li > div .ep_price{ font-size:1em; font-weight:600; color:var(--black); display:inline-block; vertical-align:middle; margin:0; margin-right:5px;}
.event_compl .event_prolist ul li > div .ep_count{ font-size:1em; font-weight:300; color:var(--black); display:inline-block; vertical-align:middle; margin:0;}
.event_compl .event_prolist ul li > div .ep_total{ font-size:1.4em; font-weight:800; color:var(--maincolor); margin-top:10px;}

.event_total_price{ padding:48px 30px; background-color:var(--graybgcolor); margin-top:20px;}
.event_total_price ul{ display:flex; gap:20px;}
.event_total_price ul li:nth-child(1){ width:25%;}
.event_total_price ul li:nth-child(2){ width:50%;}
.event_total_price ul li:nth-child(3){ width:25%;}
.event_total_price ul li p{ display:block; font-weight:600;}
.event_total_price ul li b{ display:block; font-weight:600; font-size:1.9em;}
.event_total_price ul li.etp_sum p{ color:var(--maincolor);}
.event_total_price ul li.etp_sum b{ color:var(--maincolor);}

.pi_method ul{ display:flex; flex-wrap:wrap; }
.pi_method ul li{ width:212px; position:relative;}
.pi_method ul li input[type="radio"]{ display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:65px; z-index:1; opacity:0; cursor:pointer;}
.pi_method ul li label{ display:block; background-color:var(--white); border:1px solid var(--bordercolor); padding:0 10px 0 92px; line-height:63px; margin:1px; background-repeat:no-repeat; cursor:pointer; background-size:28px auto; color:var(--wgraytcolor); font-weight:500;}
.pi_method ul li.active label{ border-color:var(--secondarycolor); color:var(--secondarycolor);}
.pi_method ul li:hover label{ border-color:var(--darkbordercolor);}
.pi_method ul li.active:hover label{ border-color:#f00; color:var(--secondarycolor);}
.pi_method ul li.method_card label{ background-image:url('../images/micon_card.png'); background-position:55px 21px;}
.pi_method ul li.active.method_card label{ background-image:url('../images/micon_card_on.png'); background-position:55px 21px;}

.fin_submit{ text-align:center; padding:50px 0 0;}
.landing_privacy{ margin-bottom:20px;}
.landing_privacy input{ display:inline-block; vertical-align:middle;}
.landing_privacy label{ font-size:1.1em; display:inline-block; vertical-align:middle; margin-left:5px;}
.landing_privacy label.nocheck{ background-color:#ffc4c4; position:relative;}
.landing_privacy label.nocheck:after{ content:'약관동의 후 신청이 가능합니다.'; width:300px; text-align:left; font-size:0.8em; position:absolute; top:-25px; left:0; color:#f00;}
.landing_privacy .privacy_view_btn{ font-size:0.8em; color:var(--darktcolor); display:inline-block; vertical-align:middle; margin-left:5px; border-bottom:1px solid var(--darkbordercolor); padding:0 3px;}
.landing_privacy .privacy_pop_wrap{ position:relative; display:inline-block; vertical-align:middle;}
.landing_privacy .privacy_layer{ display:none; overflow-y:auto; padding:20px; height:300px; width:350px; background-color:var(--white); border:1px solid var(--bordercolor); position:absolute; z-index:1; bottom:30px; left:calc(50% - 175px); box-shadow:3px 3px 3px rgba(0,0,0,0.2); text-align:left; font-size:0.8em;}
.landing_privacy .privacy_layer.active{ display:block;}
.fin_submit button{ width:352px; height:77px; line-height:77px; display:inline-block; vertical-align:middle; font-size:1.5em; font-weight:700;}

.event_footer{ padding:50px 20px 100px;}
.event_footer cite{ text-align:center; font-size:0.8em; color:var(--graytcolor);}

/*** order_compl ***/
.compl_msg{ text-align:center;}
.compl_msg h6{ font-size:1.6em; font-weight:600; margin-bottom:5px;}
.compl_msg p{ }
.compl_msg p a{ color:var(--maincolor); font-weight:600;}

/*** order_list ***/
.event_orderlist{ }
.event_orderlist ul.eo_ul{ }
.event_orderlist ul.eo_ul li.eo_li{ margin-bottom:1px;}
.event_orderlist ul.eo_ul li.eo_li .eo_title{ display:flex; background-color:#727171; padding:10px 20px; gap:10px; align-items:center; cursor:pointer;}
.event_orderlist ul.eo_ul li.eo_li.active .eo_title{ background-color:var(--maincolor);}
.event_orderlist ul.eo_ul li.eo_li .eo_title p{ display:block; color:var(--white); width:50%; text-align:left; font-size:1.7em; font-weight:700;}
.event_orderlist ul.eo_ul li.eo_li .eo_title b{ display:block; color:var(--white); width:50%; text-align:right; font-weight:300;}
.event_orderlist ul.eo_ul li.eo_li .eo_content{ padding:30px 0; display:none;}
.event_orderlist ul.eo_ul li.eo_li.active .eo_content{ display:block;}

@media (max-width:959px){
	/*** select ***/
	.event_visual{ padding-top:120px; height:550px;}
	.event_visual h3{ font-size:4.2em;}
	.event_visual .event_logo img{ max-height:30px;}
	
	.event_visual .move_layer.ml_bg{ top:29%; width:600px;}
	.event_visual .move_layer.ml_img{ top:35%; width:395px;}
}

@media (max-width:767px){
	/*** login ***/
	.login_wrap{ background-position:0% 0%;}
	.login_box{ max-width:400px;}
	.login_box .login_title h3{ font-size:2.2em; margin-bottom:5px;}
	.login_box .login_title h4{ font-size:1.2em;}
	
	/*** select ***/
	.event_visual{ padding-top:100px; height:480px;}
	.event_compl .event_visual{ padding-top:100px; height:330px;}
	.event_visual h3{ font-size:3.2em;}
	.event_compl .event_visual h3{ font-size:2.3em;}
	
	.event_visual .move_layer.ml_bg{ top:25%; width:500px;}
	.event_visual .move_layer.ml_img{ top:31%; width:335px;}
	.event_compl .event_visual .move_layer.ml_bg{ top:22%;}
	.event_compl .event_visual .move_layer.ml_img{ top:25%;}
	
	.form_bgbox h4{ font-size:1.5em; margin:30px 0 15px;}
	
	.event_total_price ul li b{ font-size:1.2em;}
	
	.fin_submit button{ width:100%; line-height:60px; height:60px; font-size:1.2em;}
}

@media (max-width:545px){
	/*** select ***/
	.event_visual{ height:390px;}
	.event_visual h3{ font-size:2.6em;}
	
	.event_visual .move_layer.ml_bg{ top:24%; width:450px;}
	.event_visual .move_layer.ml_img{ top:29%; width:225px;}

	.form_bgbox{ padding:40px 20px;}
	.form_bgbox .write_table table tr td input[type="text"]{ width:100%;}

	.event_prolist ul{ flex-wrap:wrap;}
	.event_prolist ul li{ width:100%;}
	.event_prolist ul li .ep_name{ font-size:1.2em;}
	.event_prolist ul li .ep_price{ font-size:1.2em;}

	.event_compl .event_prolist ul{ flex-wrap:wrap; gap:5px;}
	.event_compl .event_prolist ul li{ width:100%;}
	.event_compl .event_prolist ul li .ep_name{ font-size:1.2em;}
	.event_compl .event_prolist ul li .ep_price{ font-size:1.2em;}

	.event_total_price{ padding:20px 20px}
	
	.form_bgbox .write_table table tr th{ font-weight:600; color:var(--black);}
	
	.landing_privacy label{ font-size:0.9em;}

	/*** order_list ***/
	.event_orderlist ul.eo_ul li.eo_li .eo_title p{ font-size:1.3em;}
}

@media (max-width:400px){
	.event_visual{ height:375px;}
	.event_compl .event_visual{ height:320px;}
	.event_visual h3{ font-size:2em;}
	.event_compl .event_visual h3{ font-size:1.6em;}

	.event_visual .move_layer.ml_bg{ top:29%;}
	.event_visual .move_layer.ml_img{ top:35%;}
	.event_compl .event_visual .move_layer.ml_bg{ top:29%;}
	.event_compl .event_visual .move_layer.ml_img{ top:32%;}
	
	.event_total_price ul{ display:block;}
	.event_total_price ul li{ margin-bottom:15px;}
	.event_total_price ul li:nth-child(1),
	.event_total_price ul li:nth-child(2),
	.event_total_price ul li:nth-child(3){ width:100%;}
	.event_total_price ul li:nth-child(3){ margin-bottom:0;}
	
	.event_orderlist ul.eo_ul li.eo_li .eo_title{ display:block;}
	.event_orderlist ul.eo_ul li.eo_li .eo_title p{ width:100%; font-size:1.2em; margin-bottom:5px;}
	.event_orderlist ul.eo_ul li.eo_li .eo_title b{ width:100%; text-align:left; font-size:0.8em;}
	.event_orderlist ul.eo_ul li.eo_li .eo_content{ padding:20px 0;}
}