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

/*메인공통*/
.headline { margin-bottom:3rem; }
.headline h2 { font-family:'S-CoreDream'; font-size:6rem; line-height:1.3em; color:#000; text-transform:capitalize; }
.headline h2 span { color:#767676; font-size:2rem; font-weight:400; display:block; margin-bottom:10px; }
.headline .keyword { font-family:'S-CoreDream'; color:#0093FF; font-weight:500; font-size:2rem; text-transform:uppercase; margin-bottom:1.5rem; }
.headline .btn_more { margin-top:2em; display:inline-block; }

.deco_plus { width:50px; height:50px; position:relative; border-radius:50px; background:#E0E2E9; transition:all 0.3s cubic-bezier(.22, .61,.36, 1); }
.deco_plus::after,
.deco_plus::before { content:''; display:inline-block; width:18px; height:3px; background:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.deco_plus::before { transform:translate(-50%,-50%) rotate(90deg); }

.deco { margin:0 auto; font-size:1.5rem; font-weight:700; padding:13px 20px; display:inline-flex; align-items:center; border-radius:50px; justify-content:space-between; gap:20px; background:#fff; transition:all 0.3s cubic-bezier(.22, .61,.36, 1); }
.deco:hover { background:rgb(8,19,154); background:linear-gradient(104deg, rgba(8,19,154,1) 0%, rgba(98,17,167,1) 100%); color:#fff; box-shadow:rgba(50, 50, 93, 0.25) 0px 25px 50px -10px, rgba(0, 0, 0, 0.3) 0px 15px 30px -15px; }

/*login*/
.container:has(.member_container) .sub_title { padding:4em 0 5em; }
.container:has(.member_container) .sub_title h2 { font-size:3em; text-align:center;  margin-top:40px;}

.member_container { width:100%; position:relative;}
.member_container .content { display:flex; justify-content:center;}
.member_container .content .title { font-size:4rem; font-family:'S-CoreDream'; font-weight:900; text-align:center; margin-bottom:1.6em; display:block; }
.member_container .content .caption_txt { margin:2rem 0 3rem; display:flex; justify-content:space-between; }
.member_container .content .btn_l { height:50px !important; min-width:140px; font-size:1.7rem; box-shadow:rgba(255, 255, 255, 0.1) 0px 0 0 0px inset, rgba(50, 50, 93, 0.25) 0px 0 0 0, rgba(0, 0, 0, 0.3) 0px 0 0 0;  }
.member_container .content .btn_l:hover { box-shadow:rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 25px 50px -10px, rgba(0, 0, 0, 0.3) 0px 15px 30px -15px; }
.member_container .content .btn_text { font-weight:600; color:#666; }

.bg_grad { border:none; color:#fff; background:rgb(143 42 255); background:linear-gradient(145deg, rgb(0 88 255) 0%, rgb(143 42 255) 100%); }

.btn_wrap { margin-top:5rem; display:flex; gap:5px; justify-content:center; }

.member_container .login { width:400px; }
.member_container .find { width:500px; }
.member_container .signin { width:800px; }
.member_container .sub_header { padding:3rem 0 0; }

.find .tab_wrap .tabs {   border-bottom:none; height:54px; }
.find .tab_wrap .tabs li { width:50%; height:55px; }
.find .tab_wrap .tabs li:last-child { width:calc(50% + 1px); }
.find .tab_wrap .tabs li a { width:100%; }
.find .tab_content { border:1px solid #ccc; padding:40px; border-radius:0 0 30px 30px; } 
.find .tab_content .btn_wrap { margin-top:3rem; }
.tab_wrap .tabs li:first-child a { border-radius:24px 0px 0 0; }
.tab_wrap .tabs li:last-child a { border-radius:0px 24px 0 0; }


/*login*/
.login_form { margin-bottom:15px; }
.login_form dl { display:flex; flex-direction:column; }
.login_form dl dt { margin-bottom:7px; font-size:1.3rem; }
.login_form dl dd { margin-bottom:20px; }
.login_form dl dd:last-child { margin-bottom:0; }
.login_form .login_input { width:100%; display:flex; font-size:1.8rem; align-items:center; justify-content:space-between; background:rgba(0,0,0,0.05); height:55px; border-radius:10px; transition:all 0.2s; }
.login_form .login_input:hover { background:#ededed; }
.login_form .login_input::before { display:flex; width:55px; height:55px; font-size:1.7rem; align-items:center; justify-content:center; }
.login_form .login_input span { width:55px; text-align:center; color:#333; opacity:0.5; transition:all 0.2s; }
.login_form .login_input.icon-password::before { font-size:2.2rem; }
.login_form .login_input:hover span { opacity:1; }
.login_form .login_input .inputText { border:none; background:none; height:100%; border-radius:0 10px 10px 0; width:calc(100% - 55px); font-weight:700;}
.login_form .login_input .inputText:hover { box-shadow:none; }
.login .button_area { gap:45px; }
.login_form p.notice { margin-top:10px; padding-left:0; }
.login_form p.notice::before { display:none; }

.signin_guide { margin-top:5rem; padding-top:5rem; border-top:1px solid #ededed; animation:fadeUp 1s both; }
.signin_guide p { margin-bottom:3rem; line-height:1.8em; font-size:1.6rem; animation:fadeUp 1s both; animation-delay:0.3s; }
.signin_guide button { animation:fadeUp 1s both; animation-delay:0.5s; }

/*signin*/
.agree_wrap { display:flex; flex-direction:column; gap:20px; }
.agree_wrap .textArea { width:100%; height:150px; line-height:2em; background:none !important; border:none !important; border-bottom:1px solid #dae4ef !important; border-radius:0; }
.agree_wrap .text { border-bottom:1px solid #dae4ef; padding-bottom:25px; }
.agree_wrap .agree_form { width:100%; background:var(--lp); padding:25px; border-radius:20px; display:flex; flex-direction:column; gap:20px; }
.agree_wrap .agree_form .checkbox .check label { font-size:1.6rem; }
.agree_wrap .agree_form .state { width:auto; padding:5px 10px; font-size:1.2rem; }
.modal_content .agree_wrap .agree_form { gap:10px; }
.modal_content .agree_wrap .agree_form .checkbox { margin-top:10px; }

.signin_step { margin:0 0 5rem; position:relative; display:flex; justify-content:center; }
.signin_step ul { display:flex; }
.signin_step ul li { padding:0 30px; font-size:13px; line-height:1.5em; display:inline-flex; flex-direction:column; text-align:center; align-items:center; position:relative; }
.signin_step ul li::after { content:''; width:100%; height:3px; background:#eee; display:block; position:absolute; top:6px; left:0; }
.signin_step ul li:first-child::after { width:50%; left:auto; right:0; }
.signin_step ul li:last-child::after { width:55%; }
.signin_step ul li span { font-weight:900; }
.signin_step ul li .dot { width:15px; height:15px; background:#ddd; border-radius:20px; display:inline-block; margin-bottom:15px; position:relative; z-index:1;}
.signin_step ul li.active .dot { background:rgb(143 42 255); border:1px solid #0c1a85;  background:linear-gradient(145deg, rgb(0 88 255) 0%, rgb(143 42 255) 100%); }
.signin_step ul li.active .dot::after { content:''; display:block; position:absolute; top:47%; left:50%; opacity:0; transform:translate(-50%,-50%) scale(1); width:20px; height:20px; border:4px solid var(--main); border-radius:50px; animation:btn_close 1s both infinite cubic-bezier(.22, .61,.36, 1); }
.signin_step ul li.active span { color:var(--main); }

@media all and (max-width:600px) {
.button_area .btn_both.auto .btn_l { font-size:12px; height:32px; padding:0 15px; }
}

/**************************************************************************************************************************************/
/****************************************************  main page  ***********************************************************************/

.main_content { scroll-behavior:smooth; }
.section { padding:150px 0; position:relative; }

html:has(.main_container), body:has(.main_container) { overflow:auto; height:auto; }
.section1 { width:100%; height:100%; padding:0; }

.section1 .main_slide { position:relative; width:100%; height:100dvh; }
.section1 .main_slide a { background:#fff; width:100%; display:inline-flex; justify-content:center; align-items:center; gap:20px; flex-direction:column; padding:3rem; border-radius:30px; transition:all 0.3s; }
.section1 .main_slide .swiper-slide { animation:fadeUp both 1s; padding-top:80px; }

.section1 .main_slide .inner { position:relative; z-index:1; }
.section1 .main_slide .text { display:flex; flex-direction:column; text-align:center; margin-top:12%; position:relative; z-index:1; }
.section1 .main_slide strong { font-weight:900; font-size:7rem; text-align:center; line-height:1em; font-family:Jalnan; }
.section1 .main_slide p { font-size:2.4rem; font-weight:800; margin:30px 0 50px; }
.section1 .main_slide .logo { width:100%; display:inline-flex; justify-content:center; gap:30px; align-items:center;  padding: 10px 0 0 0; }
.section1 .main_slide .logo_s1, 
.section1 .main_slide .logo_s2 { width:100%; display:inline-flex; justify-content:center; gap:15px; align-items:center;  padding: 10px 0 0 0; flex-wrap: wrap; }
.section1 .main_slide .logo img, 
.section1 .main_slide .logo_s1 img, 
.section1 .main_slide .logo_s2 img { height:17px; }
.section1 .main_slide .logo img:last-child { height:40px; }
.section1 .main_slide .logo_s1 img:first-child{ height:27px; }
.section1 .main_slide .logo_s1 img:nth-child(2){ height:15px; }

.section1 .main_slide .bg_wrap { position:absolute; bottom:0; width:100%; z-index:1; display:flex; align-items:center; justify-content:space-around; }
.section1 .main_slide .bg_wrap::after { width:100%; height:30dvh; display:block; content:''; position:absolute; left:0; bottom:0; z-index:1; background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);  pointer-events:none;}

.section1 .main_slide .slide1 { background:rgb(65,6,137); background:radial-gradient(circle, rgb(92 0 209) 0%, rgb(0 0 0) 100%); color:#fff; }
.section1 .main_slide .slide1::after { position:absolute; top:0; left:0; width:100%; height:100%; content:''; display:block; background:url(/images/user/main_slide1_bg.jpg) 50% 50% / cover no-repeat; z-index:-1; opacity:0.1; pointer-events:none; }
.section1 .main_slide .slide1 .bg_point { position:absolute; bottom:-80px; left:0; width:100%; z-index:0; }
.section1 .main_slide .slide2 { background:url(/images/user/main_slide2_bg.jpg) 50% 50% / cover no-repeat; /*background: rgb(8,144,187); background: radial-gradient(circle, rgba(8,144,187,1) 0%, rgba(13,11,147,1) 100%);*/ color:#fff; }

.section1 .main_slide .bg_wrap img { position:relative; z-index:2; }
.section1 .main_slide .slide1 .bg_wrap img { width:40%; }
.section1 .main_slide .slide1 .bg_wrap img:last-child { width:35%; }
.section1 .main_slide .slide2 .bg_wrap img { display:none; }
.section1 .main_slide .slide2 .bg_point { position:absolute; bottom:-80px; left:0; width:100%; z-index: -1; }

.section1 .main_slide .swiper-slide-active strong, 
.section1 .main_slide .swiper-slide-active p, 
.section1 .main_slide .swiper-slide-active .logo img, 
.section1 .main_slide .swiper-slide-active .logo_s1 img,
.section1 .main_slide .swiper-slide-active .logo_s2 img { animation:fadeUp both 1s; }

.section1 .main_slide .swiper-slide-active strong { animation-delay:0s; }
.section1 .main_slide .swiper-slide-active p { animation-delay:0.2s; }
.section1 .main_slide .swiper-slide-active .logo{ animation-delay:0.3s; }
.section1 .main_slide .swiper-slide-active .logo img:first-child { animation-delay:0.4s; }
.section1 .main_slide .swiper-slide-active .logo img:last-child { animation-delay:0.5s; }

.section1 .main_slide .swiper-slide-active .logo_s1{ animation-delay:0.3s; }
.section1 .main_slide .swiper-slide-active .logo_s1 img:first-child { animation-delay:0.4s; }
.section1 .main_slide .swiper-slide-active .logo_s1 img:nth-child(2) { animation-delay:0.5s; }
.section1 .main_slide .swiper-slide-active .logo_s1 img:nth-child(3) { animation-delay:0.6s; }
.section1 .main_slide .swiper-slide-active .logo_s1 img:nth-child(4) { animation-delay:0.7s; }
.section1 .main_slide .swiper-slide-active .logo_s1 img:nth-child(5) { animation-delay:0.8s; }
.section1 .main_slide .swiper-slide-active .logo_s1 img:nth-child(6) { animation-delay:0.9s; }

.section1 .main_slide .swiper-slide-active .logo_s2{ animation-delay:0.7s; }
.section1 .main_slide .swiper-slide-active .logo_s2 img:first-child { animation-delay:0.8s; }
.section1 .main_slide .swiper-slide-active .logo_s2 img:nth-child(2) { animation-delay:0.9s; }
.section1 .main_slide .swiper-slide-active .logo_s2 img:last-child { animation-delay:1s; }



.main_slide_control { position:absolute; bottom:10%; left:50%; transform:translateX(-50%); z-index:3; display:inline-flex; gap:10px; justify-content:center; align-items:center; }
.main_slide_control .btn_slide { z-index:3; font-size:2rem; color:#000; border:1px solid rgba(255,255,255,0.5); }
.main_slide_control .btn_slide:disabled { background:#ededed; color:#ccc; border-color:#dbdbdb; }
.main_slide_control .btn_prev { left:-20px; }
.main_slide_control .btn_next { right:-20px; }
.main_slide_control .paging { background:rgba(255,255,255,0.4); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); font-size:1.6rem; color:rgba(0,0,0,0.5); width:auto; letter-spacing:3px; height:50px; padding:0 20px; display:inline-flex; border-radius:50px; align-items:center; justify-content:center; gap:5px; border:1px solid rgba(255,255,255,0.5); transition:all 0.3s;}
.main_slide_control .paging:hover { background:#fff; }
.main_slide_control .paging .swiper-pagination-current { font-size:2.4rem; font-weight:900; color:rgba(0,0,0,1); margin:-4px 3px 0 0; }

.member_info { background:#fff; padding:2.6rem; border:3px solid #8cc3ad; border-radius:35px; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.15) 0px 25px 50px -10px, rgba(0, 0, 0, 0.2) 0px 15px 30px -15px; animation:fadeUp 1s both; animation-delay:0.2s; transition:all 0.3s cubic-bezier(.22, .61,.36, 1); position:relative; z-index:1; margin-bottom:50px; }
.member_info strong { display:flex; font-size:1.6rem; text-align:center; }
.member_info strong::after { content:''; display:inline-block; width:20px; height:20px; background:url(/images/user/smile.png) 50% 50% no-repeat; background-size:contain; margin-left:5px; animation:smile 2s both infinite cubic-bezier(.22, .61,.36, 1); }
.member_info .info { width:300px; margin:15px 0 0; display:flex; flex-direction:column; gap:15px; padding:2rem; background:#f4f4f4; border-radius:15px; font-size:1.3rem; }
.member_info dl { display:flex; justify-content:space-between; }
.member_info:hover { border-color:#0d8d59; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; }


/*개방·공유*/
.section2 { padding:100px 60px 200px; overflow:hidden; }
.section2 .inner { transition:none; margin-bottom:5rem; }
.openshare_list { display:flex; flex-direction:column; gap:2rem; width:1760px; margin:0 auto; }
.openshare_list .openshare { width:100%; padding:100px 130px; border-radius:80px; font-size:1.6rem; position:relative; transition:opacity 0.3s, transform 0.3s; opacity:0; transform:translateY(50%);  }
.openshare_list .openshare.run { opacity:1; transform:translateY(0); pointer-events:auto; }
.openshare_list .openshare .text > p { font-weight:600; font-size:1.6rem; }
.openshare_list .openshare strong { font-size:6rem; line-height:4rem; font-weight:900; margin:4rem 0 6rem; display:block; }
.openshare_list .openshare ul { display:flex; flex-direction:column; gap:10px; }
.openshare_list .openshare .wedo { margin:3rem 0 5rem; display:flex; gap:5px; align-items: center;}
.openshare_list .openshare .wedo p { display:inline-block; padding:10px 15px; border-radius:5px; border:1px solid rgba(255,255,255,0.3); }
.openshare_list .openshare .wedo span { margin-left: 5px;}

.openshare_list .openshare > img { position:absolute; top:50%; right:50px; transform:translateY(-50%); width:27%; }
.openshare_list .openshare .openshare_content { display:flex; align-items:center; justify-content:space-between; }
.openshare_list .openshare.pin1 { background:url(/images/user/bg_openshare1_1.png) 100% 0% no-repeat #CEE1F5; }

.openshare_list .openshare.pin1 .wedo p { border-color:#909DAB; }
.openshare_list .openshare.pin2 { background:url(/images/user/bg_openshare2_1.png) 100% 0% no-repeat #2236B5; color:#fff; }
.openshare_list .openshare.pin3 { background:url(/images/user/bg_openshare3_1.png) 100% 0% no-repeat #0C1B67; color:#fff; }

.openshare_list .openshare .text.run strong { animation-delay:0.2s; }
.openshare_list .openshare .text.run li:nth-child(1) { animation-delay:0.3s; }
.openshare_list .openshare .text.run li:nth-child(2) { animation-delay:0.4s; }
.openshare_list .openshare .text.run .wedo p:nth-child(1) { animation-delay:0.5s; }
.openshare_list .openshare .text.run .wedo p:nth-child(2) { animation-delay:0.6s; }

.scrollmagic-pin-spacer { pointer-events:none;}
.scrollmagic-pin-spacer:has(.openshare.run) { pointer-events:auto; }

/*동영상강의*/
.section3 { position:relative; overflow:hidden; height:100dvh; padding-top:10rem; }
.section3::after { width:100%; height:20%; display:block; content:''; position:absolute; left:0; bottom:0; z-index:1; background: rgb(0,18,31);
background: linear-gradient(180deg, rgba(0,18,31,0) 0%, rgba(0,18,31,1) 100%); pointer-events:none;}

.section3_bg { position:fixed; top:0; left:0; width:100%; height:100dvh; background:url(/images/user/bg_mainsection3.jpg) 50% 50% / cover no-repeat; opacity:0; pointer-events:none; }
.section3_bg::before { width:100%; height:100%; display:block; content:''; position:fixed; left:0; top:0; background:rgba(0,0,0,0.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); z-index:0; }
.section3_bg::after { width:100%; height:20%; display:block; content:''; position:absolute; left:0; bottom:0; z-index:1; background: rgb(0,18,31);
background: linear-gradient(180deg, rgba(0,18,31,0) 0%, rgba(0,18,31,1) 100%); pointer-events:none;}

/**/
.section3 .inner { position:relative; z-index:2; }
.section3 h2 { color:#fff; display:flex; justify-content:space-between; }
.slide_ol { margin:50px 0; overflow:visible; }
.slide_ol a { padding:25px 25px 40px; font-size:1.4rem; display:block; background:rgba(255,255,255,0.5); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); border-radius:33px; text-align:center; transition:all 0.3s cubic-bezier(.22, .61,.36, 1);} 
.slide_ol .text { padding:35px 10px; text-align:left; }
.slide_ol .text strong { display:block; font-size:2rem; font-weight:800; margin-bottom:20px; }
.slide_ol .text p { line-height:1.6em; }
.slide_ol .thumbnail:hover { box-shadow:none; }

.slide_ol_control { position:relative; z-index:2; display:none; gap:10px; justify-content:center; }
.slide_ol_control .swiper-pagination-progressbar { width:40%; margin-right:30px; background:rgba(255,255,255,0.3); border-radius:50px;}
.slide_ol_control .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:#fff; border-radius:50px; }
.slide_ol a:hover { background:#fff; }
.slide_ol a:hover .deco { background:rgb(8,19,154); background:linear-gradient(104deg, rgba(8,19,154,1) 0%, rgba(98,17,167,1) 100%); color:#fff; box-shadow:5px 5px 20px 0 rgba(0,0,0,0.4); }

.section h2 .more { color:#fff; display:inline-flex; align-items:center; line-heihgt:1em; gap:10px; font-size:1.5rem; font-weight:500; }
.section h2 .more span { color:#fff; margin:0; font-size:1.3rem; font-weight:400; transition:all 0.3s cubic-bezier(.22, .61,.36, 1); }
.section h2 .more:hover span { transform:translateX(5px); }

.section3_list { margin:50px -10px; overflow:visible; }
.section3_list .box { width:440px; padding:0 20px; float:left; transition:all 0.5s cubic-bezier(.22, .61,.36, 1); }
.section3_list .box a { padding:25px 25px 40px; font-size:1.4rem; display:block; background:rgba(255,255,255,0.5); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); border-radius:33px; text-align:center; transition:all 0.3s cubic-bezier(.22, .61,.36, 1);}
.section3_list .box a:hover { transform:translateY(-5%);}
.section3_list .text { padding:35px 10px; text-align:left; }
.section3_list .text strong { display:block; font-size:2rem; font-weight:800; margin-bottom:20px; line-height:1.5em; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:normal; word-wrap:break-word; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
.section3_list .text p { line-height:1.6em; }
.section3_list .thumbnail:hover { box-shadow:none; }
.section3_list a:hover { background:#fff; }
.section3_list a:hover .deco { background:rgb(8,19,154); background:linear-gradient(104deg, rgba(8,19,154,1) 0%, rgba(98,17,167,1) 100%); color:#fff; box-shadow:5px 5px 20px 0 rgba(0,0,0,0.4); }

.section4 { padding:50px 0 100px; background:rgb(0,18,31); background:linear-gradient(180deg, rgba(0,18,31,1) 0%, rgba(1,3,4,1) 100%); position:relative; margin:-1px 0;}
.section4::after { width:650px; height:650px; display:block; content:''; position:absolute; left:-10%; top:0; background:url(/images/user/bg_notice.png) 50% 50% / contain no-repeat; z-index:0; pointer-events:none; }
.section4 h2 { color:#fff; display:flex; gap:20px; align-items:baseline; justify-content:space-between; }
.section4 .inner { display:flex; gap:50px; position:relative; z-index:1; }
.section4 .notice_box { width:calc(50% - 25px); } 
.list_box { padding:20px 40px; border-radius:20px; background:rgba(76,78,93,0.2); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); transition:all 1s cubic-bezier(.22, .61,.36, 1);}
.list_box li:not(.list_box li:last-child) { border-bottom:1px solid #2b3135; }
.list_box a { padding:25px 35px 25px 0; font-size:1.6rem; position:relative; display:block; color:#fff; transition:all 1s cubic-bezier(.22, .61,.36, 1); }
.list_box a .icon-arrow-r { position:absolute; right:0; top:50%; transform: translateY(-50%); transition:all 0.3s cubic-bezier(.22, .61,.36, 1); }
.list_box a:hover { color:#265F9B; }
.list_box a:hover .icon-arrow-r { right:-10px; color:#fff; }
.list_box .text { display:flex; }
.list_box .text strong {  }
.list_box .text p { color:rgba(255,255,255,0.5); font-size:1.4rem; }
.section4 .notice .text { display:flex; justify-content:space-between;}
.section4 .notice .text strong { width:calc(100% - 110px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.section4.active .list_box { background:rgba(76,78,93,0.25); transition-delay:0.5s; }

.section4 .faq .text span { color:#0076FF; font-weight:900; }
.section4 .faq .text strong { margin-left:10px; width:calc(100% - 110px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/*sub page*/
.title_wrap { margin:60px 0 15px; flex-wrap:wrap; gap:15px; }
.title_wrap h3 { font-size:2rem; }

.v_class_info img { margin-bottom:3rem; filter:drop-shadow(5px 5px 10px rgba(0,0,0,0.2)); }
.v_class_info strong { font-size:2.4rem; display:block; margin-bottom:1rem; font-weight:800; }

/*공유시설 및 장비*/
.metaverse_space { display:flex; flex-direction:column; gap:3rem; }
.metaverse_space .box { background:var(--lp); padding:8rem 50% 8rem 8rem; position:relative; }
.metaverse_space .box strong { font-size:4rem; font-weight:900; line-height:1.4em; }
.metaverse_space .box .text { display:flex; flex-direction:column; gap:4rem; margin:4rem 0; }
.metaverse_space .box .text dl {  }
.metaverse_space .box .text dt { font-size:1.8rem; margin-bottom:1rem; line-height:1.6em; }
.metaverse_space .box .text dd { font-size:1.5rem; line-height:2em; }
.metaverse_space .box .text dd p { position:relative; padding-left:1.2rem; }
.metaverse_space .box .text dd p:has(b):not(.metaverse_space .box .text dd p:has(b):last-child) { margin-bottom:10px; }
.metaverse_space .box .text dd p::before { content:''; display:inline-block; width:5px; height:5px; border-radius:5px; background:#91a5b9; position:absolute; left:0; top:11px; }
.metaverse_space .box .btn_wrap { width:100%; justify-content:flex-start; }
.metaverse_space .box .img { width:calc(50% - 16rem); position:absolute; top:8rem; right:8rem; background:none !important; }
.metaverse_space .box .img img { width:100%; }

/*온라인 문의*/
.online_inquiry { width:600px; margin:0 auto; }
.online_inquiry .title strong { font-size:2.2rem; font-weight:800; margin-bottom:0.6rem; display:block; }
.online_inquiry .title p { font-size:1.5rem; }
.online_inquiry .board_write .row dl .inputText, .online_inquiry .board_write .row dl .textArea { border-radius:10px; }
.online_inquiry .agree_wrap .agree_form { background:#e9eff5; border-radius:10px; margin-top:2rem; }
.online_inquiry .agree_wrap .agree_form p { font-size:1.45rem; line-height:1.6em; padding:2rem; background:#dbe4ed; border-radius:7px; }

/*시설안내*/
.slide_centerintro { width:100%; margin-bottom:20px; }
.slide_centerintro .swiper-slide { aspect-ratio: 2 / 1; }
.slide_centerintro .swiper-slide img { width:100%; height:100%; object-fit:cover; }
.slide_centerintro .swiper-button-prev:after, .slide_centerintro .swiper-button-next:after { display:none; }
.slide_centerintro .paging { display:flex; gap:5px; justify-content:flex-end; margin-top:1rem; font-size:1.5rem; color:#767676; }
.slide_centerintro .paging .swiper-pagination-current { font-weight:800; color:#000; }

.slide_centerintro_thumbnail {  }
.slide_centerintro_thumbnail .swiper-slide { aspect-ratio: 2 / 1; }
.slide_centerintro_thumbnail .swiper-slide a { display:flex; width:100%; height:100%; position:relative; overflow:hidden; }
.slide_centerintro_thumbnail .swiper-slide a:hover img { transform:scale(1.1,1.1); }
.slide_centerintro_thumbnail .swiper-slide img { opacity:0.5; filter:grayscale(1); width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; z-index:1; transition:all 0.3s cubic-bezier(.22, .61,.36, 1); }
.slide_centerintro_thumbnail .swiper-slide.swiper-slide-thumb-active img { opacity:1; filter:grayscale(0); }

.coursedetail h4 { font-size:4rem; margin-bottom:4rem; line-height:1.3em; font-weight:800; }
.coursedetail_head { display:flex; gap:5rem; }
.coursedetail_head .thumbnail { width:40%; }
.coursedetail_head .text { width:60%; font-size:1.6rem; line-height:1.8em; }
.coursedetail_head .text .class_info { margin:2rem 0 4rem; }

.goback { display:none; }
.curri { display:flex; justify-content:space-between; align-items:flex-start; position:relative; margin-top:10rem; }
.curri .title { position:sticky; top:5rem; transition:all 0.3s cubic-bezier(.22, .61,.36, 1); }
.scrollTop .curri .title { top:15rem; }
.curri .title h5 { font-size:3rem; margin-bottom:2rem; }
.curri .title p { font-size:1.6rem; }
.curiilist { width:70%; }
.curiilist ul { border-top:2px solid #000; }
.curiilist ul li { padding:3rem 2rem; border-bottom:1px solid #ededed; display:flex; justify-content:space-between; transition:all 0.3s cubic-bezier(.22, .61,.36, 1); }
.curiilist ul li:hover { background:var(--lp); }
.curiilist ul li strong { font-size:1.8rem; }
.curiilist ul li p { width:100px; font-size:1.6rem; display:flex; align-items:center; gap:6px; text-align:left; }
.curiilist ul li .left p { margin-top:10px; }
.curiilist ul li .info { display:flex; align-items:center; gap:20px; }
.curiilist ul li .info .progress { font-size:1.4rem; width:auto; display:inline-flex; flex-direction:column; gap:10px; position:relative; align-items:center; }
.curiilist ul li .info .progress span { font-weight:600; }
.curiilist ul li .info .progress .bar { position:relative; z-index:1; width:100px; height:8px; background:#ededed; overflow:hidden; border-radius:50px;}
.curiilist ul li .info .progress .bar .fill { display:inline-block; position:absolute; top:0; left:0; z-index:0; height:100%; border-radius:50px; background:rgb(143 42 255); background:linear-gradient(145deg, rgb(0 88 255) 0%, rgb(143 42 255) 100%); }
.coursedetail > .btn_wrap .bg_grad { display:none; }

.curiilist .line_bk { background:#fff; }
.curiilist .line_bk:hover { background:#000; }

.article_wrap .headline { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }
.article_wrap .headline h4 { font-size:2.4rem; }

.policy { width:700px; margin:0 auto; font-size:1.5rem; line-height:3rem; }
.policy ul { display:flex; gap:3rem; flex-direction:column; }
.policy ul strong { font-size:1.7rem; font-weight:800; margin-bottom:1rem; display:block; }

.kdt_list ul { display:flex; flex-wrap:wrap; gap:20px; }
.kdt_list li { width:calc(100% / 3 - 40px / 3); }
.kdt_list li a { width:100%; height:100%; padding:3rem; display:inline-flex; background:#fff; border:1px solid #ddd; flex-direction:column; gap:2rem; border-radius:15px; transition:all 0.2s cubic-bezier(.22, .61,.36, 1);}
.kdt_list li a:hover { box-shadow:rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; }
.kdt_list li a p { font-size:1.6rem; line-height:1.8em; display:inline-flex; flex-direction:column; gap:2rem; }
.kdt_list li a p b { font-size:2rem; }

.map { width:100%; height:600px; border-radius:20px; margin-bottom:10rem; }
.map .marker { width:70px; }
.map .marker img { width:100%; filter:drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5)); }
.map_info { padding:1.3rem; border-radius:10px; background:#fff; border:1px solid #000; display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; transform:translateY(50px); font-size:1.2rem; font-weight:600;}
.map_info img { height:28px; }

.map_info::after,
.map_info::before { content:''; width:0; height:0; border:5px solid transparent; display:inline-block; position:absolute; left:50%; transform:translateX(-50%);}
.map_info::after { border-top:10px solid #fff; bottom:-12px;}
.map_info::before { border-top:8px solid #000; bottom:-13px;}

.side_content { display:flex; gap:10rem; justify-content:space-between; }
.side_content h4 { font-size:4rem; line-height:1.6em;  letter-spacing: -0.03em;}
.side_content .text { width:calc(100% - 420px); }
.side_content .text_list { display:flex; gap:2rem; flex-direction:column; }
.side_content .text_list p { font-size:3rem; margin:7rem 0 3rem; }
.side_content .text_list p b { font-weight:900; }
.side_content .text_list dl:last-child { border-bottom:none; }
.side_content dl { font-size:1.5rem; border-bottom:1px solid #ededed; padding-bottom:2rem; }
.side_content dl dt { margin-bottom:1rem; }
.side_content dl dd { display:flex; gap:5px; flex-wrap:wrap; }
.side_content dl dd span { display:inline-flex; gap:5px; align-items:center; font-weight:600; border:1px solid #ccc; border-radius:5px; padding:5px 10px; }

.businfo dd span::before { content:''; width:13px; height:13px; background:url(/images/user/icon_bus.svg) 50% 50% / contain no-repeat; display:block; }

.stickymenu { position:sticky; top:0; z-index:2; background:rgba(255,255,255,0.9); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); transition:all 0.2s cubic-bezier(.22, .61,.36, 1); }
.scrollTop .stickymenu { top:80px; }

.facility_list { position:sticky; top:50px; transition:all 0.2s cubic-bezier(.22, .61,.36, 1); }
.scrollTop .facility_list { top:130px; }
.facility_list > ul { display:flex; flex-direction:column; gap:30px; }
.facility_list li ul { display:flex; flex-direction:column; gap:10px; margin-top:1.5rem; }
.facility_list li strong { margin-bottom:2rem; font-size:2rem; font-weight:800; }
.facility_list li strong span { font-size:1.8rem; font-weight:600; letter-spacing: -0.05em; }
.facility_list li a { position:relative; font-size:1.5rem; font-weight:600; color:#767676; transition:all 0.2s cubic-bezier(.22, .61,.36, 1); }
.facility_list li a.active, .facility_list li a:hover { color:var(--main); }

.facility_wrap { position:relative; display:flex; justify-content:space-between; align-items:flex-start; margin-top:5rem; }
.facility_wrap h4 { font-size:3rem; font-weight:800; margin-bottom:4rem; line-height:1em; display:none; }

.facility_content_wrap { width:75%; }
.facility_content { padding:7rem 0; border-bottom:1px solid #ededed; }
.facility_content:first-child { padding-top:0; }
.facility_content:last-child { padding-bottom:0; border-bottom:none; }
.facility_content .text { margin-bottom:4rem; }
.facility_content .text h5 { font-size:3rem; margin-bottom:3rem; position:relative; }
.facility_content .text h5 span { font-size:1.2rem; font-family:N-SquareNeo; position:absolute; top:0; right:0; color:#0006ff; padding:3px 10px; background:#dfedff;  border-radius:50px;}
.facility_content .text p { font-size:1.6rem; font-weight:500; color:#767676; }

.intro_content { font-size:2rem;  overflow:hidden; }
.intro_content h4 { font-size:5rem; font-weight:800; line-height:1em; margin-bottom:3rem; }

.intro_content .scene1 { width:100%; position:relative; }

.intro_content .scene1_box { content:''; display:block; width:1500px; height:60vh; background:url(/images/user/bg_intro_scene1.png) 30% 66% / 145% no-repeat #071249; color:#fff; border-radius:5rem; z-index:-1; transition:height 0.5s cubic-bezier(.22, .61,.36, 1), width 0.5s cubic-bezier(.22, .61,.36, 1), border-radius 0.5s cubic-bezier(.22, .61,.36, 1); position:absolute; top:0; left:50%; transform:translateX(-50%); }
.intro_content .scene1_box.active { width:100% !important; height:100vh; border-radius:0; }
.intro_content .scene1 .scrollmagic-pin-spacer { width:100% !important;  }
.intro_content .scene1 .point { width:40%; position:absolute; z-index:1; transform:rotate(-180deg); bottom:0; left:0; }
.intro_content .scene1 .text { width:100%; z-index:1; text-align:center; color:#fff; padding:20rem 0 30rem; }
.intro_content .scene1 .text p { font-size:2.4rem; line-height:1.8em }

.intro_content .scene2 { padding:20rem 0 15rem; transform:translateY(0); transition:all 0.5s cubic-bezier(.22, .61,.36, 1); }
.intro_content .scene2 .box { width:100%; position:relative; text-align:center; }
.intro_content .scene2 .box .text { position:absolute; color:#fff; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.intro_content .scene2 .box .text strong { font-weight:800; font-size:3rem; display:block; margin-bottom:2rem; }
.intro_content .scene2 .box .text p { font-weight:600; }
.intro_content .scene2 .circle_wrap { padding:5rem; display:inline-flex; justify-content:center; gap:2rem; width:450px; aspect-ratio:1 / 1; border-radius:600px; border:1px dashed #fff; position:relative; margin:0 auto; }
.intro_content .scene2 .dot { width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:600px; animation:scene2dot 3s both infinite; }
.intro_content .scene2 .dot::after { content:''; width:10px; height:10px; background:#fff; border-radius:10px; display:block; position:absolute; top:-5px; left:50%; transform:translateX(-50%); }
@keyframes scene2dot { from { transform:translate(-50%,-50%) rotate(0); } to { transform:translate(-50%,-50%) rotate(360deg); } }
.intro_content .scene2 .circle_wrap .circle { width:180px; aspect-ratio:1 / 1; background:#fff; color:#000; border-radius:50%; display:flex; justify-content:center; align-items:center; position:absolute; top:50%; left:50%; z-index:2; font-weight:800; border:1px solid #ededed; opacity:0; transition:all 1s cubic-bezier(.22, .61,.36, 1);}
.intro_content .scene2 .circle_wrap .circle::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:300px; width:100%; aspect-ratio:1 / 1; display:block; background:rgba(255,255,255,0.5); z-index:-1; }
.intro_content .scene2 .circle_wrap .circle::after { animation:circleevent 1s both infinite cubic-bezier(.22, .61,.36, 1); }
@keyframes circleevent { from { opacity:1; transform:translate(-50%,-50%) scale(1); } to { opacity:0; transform:translate(-50%,-50%) scale(1.2); } }
.intro_content .scene2 .circle_wrap .circle:nth-child(1) { transform:translate(-50%, -130%); }
.intro_content .scene2 .circle_wrap .circle:nth-child(2) { transform:translate(-150%, 50%); }
.intro_content .scene2 .circle_wrap .circle:nth-child(3) { transform:translate(50%, 50%); }

.intro_content .scene2.run .circle_wrap { animation:fadeUp 1s both cubic-bezier(.22, .61,.36, 1); }
.intro_content .scene2.run { transform:translateY(-19rem); }
.intro_content .scene2.run .circle_wrap .circle { opacity:1; }
.intro_content .scene2.run .circle_wrap .circle:nth-child(1) { transform:translate(-50%, -165%); transition-delay:0s; }
.intro_content .scene2.run .circle_wrap .circle:nth-child(2) { transform:translate(-150%, 25%); transition-delay:.2s; }
.intro_content .scene2.run .circle_wrap .circle:nth-child(3) { transform:translate(50%, 25%); transition-delay:.4s; }
.intro_content .scene2.run .box .text strong { animation:fadeUp 1s both; animation-delay:0.5s; }
.intro_content .scene2.run .box .text p { animation:fadeUp 1s both; animation-delay:0.7s; }

.intro_content .scene3 { padding:20rem 0 0rem; display:flex; gap:5rem; position:relative; }
.intro_content .scene3 .text { width:100%; background: rgb(5,91,255);
background:linear-gradient(145deg, rgba(5,149,255,0.7) 0%, rgba(206,0,255,0.7) 100%); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); color:#fff; font-size:2rem; padding:10rem; line-height:2em; position:relative; z-index:1; border-radius:3rem; }
.intro_content .scene3 .text strong { font-size:5rem; font-family: S-coreDream; line-height:1em; text-transform:uppercase; font-weight:900; display:block; margin-bottom:5rem; position:relative; z-index:1; }
.intro_content .scene3 .text p { position:relative; z-index:1; }

.intro_content .scene3 img { height:80%; position:absolute; right:2rem; top:10%; z-index:0; } 
.intro_content .scene3 .textbg { position:absolute; top:-18rem; opacity:0; transition:all 1s cubic-bezier(.22, .61,.36, 1); }
.intro_content .scene3 .textbg.active { opacity:1; }
.intro_content .scene3 .textbg p { font-size:20rem; line-height:1em; text-transform:uppercase; font-weight:900; color:rgba(255,255,255,0.5); filter:opacity(0.5); white-space:nowrap; }


.sub_container:has(.intro_content) { padding-bottom:0; }
.scene_bottom { background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(232,236,244,1) 50%); transition:all 0.5s cubic-bezier(.22, .61,.36, 1); position:relative; }
.scene_bottom .bg_scene_bottom { position:absolute; z-index:0; }
.bg_scene_bottom.bg1 { width:40%; top:20%; left:50%; transform:translateX(-50%); }
.bg_scene_bottom.bg2 { width:40%; bottom:0; right:0; }
.bg_scene_bottom.bg3 { width:20%; bottom:0; left:0; }

.intro_content .scene4 { padding:20rem 0; position:relative; z-index:1; }
.intro_content .scene4 h4 { font-size:5rem; margin-bottom:8rem; }

.intro_content .scene4 h5 { font-size:3.4rem; margin-bottom:4rem;  }
.intro_content .scene4 .text_wrap:last-child { margin-top:10rem; }

.intro_content .scene4 .text_wrap ul { display:flex; gap:4rem; flex-wrap:wrap; }
.intro_content .scene4 .text_wrap ul li { width:calc(100% / 4 - 12rem / 4); padding:4rem; background:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.4);  border-radius:3rem; -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); }
.intro_content .scene4 .text_wrap ul li dd { font-size:1.65rem; line-height:1.6em; }
.intro_content .scene4 .text_wrap ul li dd p { position:relative; padding-left:1.5rem; }
.intro_content .scene4 .text_wrap ul li dd p::before { content:''; width:5px; height:5px; display:block; background:#666; border-radius:5px; position:absolute; left:0; top:10px; }
.intro_content .scene4 .text_wrap ul li img { width:40px; margin-bottom:2rem; }
.intro_content .scene4 .text_wrap ul li dt { margin-bottom:1.5rem; font-size:2rem; }

.fullpage_container { padding:0 0 10rem; }
.fullpage_container footer { display:none; }
.fullpage_container .page_header { padding:5rem; text-align:center; background:rgba(255, 255, 255, 0.7); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);transition:all 0.3s cubic-bezier(.22, .61,.36, 1);}
.fullpage_container .page_header h3 { font-size:3.4rem; display:block; font-weight:800; margin-top:2.4rem; line-height:1.6em; transition:all 0.3s cubic-bezier(.22, .61,.36, 1);}
.fullpage_container .page_header h3 span { font-size:2.6rem; font-weight:500; color:#767676; }
.fullpage_container .page_header .goback { display:inline-flex; width:50px; height:50px; font-size:1.6rem; position:fixed; top:3rem; left:3rem; border-radius:20px; border:1px solid #ccc; background:rgba(255, 255, 255, 0.7); box-shadow:rgb(255 255 255 / 10%) 0px 1px 1px 0px inset, rgb(50 50 93 / 25%) 0px 10px 20px -5px, rgb(0 0 0 / 30%) 0px 10px 20px -10px; color:#000; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);}
.fullpage_container .page_header .goback:hover { animation:jelly 0.5s both; box-shadow:rgb(255 255 255 / 10%) 0px 1px 1px 0px inset, rgb(50 50 93 / 40%) 0px 10px 20px -5px, rgb(0 0 0 / 50%) 0px 10px 20px -10px; border-color:#fff; background:#fff; color:#000; }
.fullpage_container .page_header.fix .goback { top:13px; width:40px; height:40px; min-width:40px; border-radius:15px;}
@media all and (min-width: 701px) {
.fullpage_container .page_header.fix { position:sticky; top:0; left:0; padding:2rem 0; border-bottom:1px solid #ededed; }
.fullpage_container .page_header.fix .inner { display:flex; align-items:center; gap:10px; }
.fullpage_container .page_header.fix h3 { margin-top:0; font-size:1.6rem; font-weight:600; font-family:'N-SquareNeo'; }
.fullpage_container .page_header.fix h3 span { font-size:1.6rem; color:#000; margin-left:5px; }
.fullpage_container .page_header.fix h3 br { display:none; }
.fullpage_container .page_header.fix .state { padding:6px 10px; width:auto; font-size:12px; }
}

.fullpage_container .inner img { max-width:100%; }


/*시설공유*/
.calendar_days {display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; border-top: 2px solid #666;}

.calendar_days > .day {  padding: 10px; position: relative; border-bottom: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7; min-height: 133px; min-width: 50px; } 
.calendar_days > .day:nth-child(7n) { border-right:none; }
.calendar_days > .day:nth-child(-n+7) { min-height: 57px; padding: 18px 10px; font-size: 1.5rem; text-transform: capitalize; font-weight: 700; text-align: center; border-right:none;}
.calendar_days .day:nth-child(7n) .date {color: #000BD8;}
.calendar_days .day:nth-child(7n+1) .date {  color:#e50000;}
.calendar_days .date {font-size: 1.1rem; color: #999; font-weight:600;}
.calendar_days .today .date { position:relative; color:#fff; }
.calendar_days .today .date::after { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); border-radius:100px; display:block; content:''; background:#0b27af; width:calc(100% + 8px); height:100%; z-index:-1; }
.calendar_days .holiday .date {  color:#e50000; }

.calendar_days > .day:hover { background-color: #f0f0f0;  cursor: pointer;}
.calendar_days .mon_date, .calendar_days .mon_date:hover, .mon_date .btn_reservation { background:#fbfbfb ;}
.calendar_days .days { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; position:relative; z-index:1; pointer-events:none;}
.calendar_days .days .event { width:calc(100% - 33px); display:flex; flex-wrap:wrap; gap:2px; justify-content:flex-start; }

.calendar_days .holiday .days .holiday_text { max-width:100%; border-radius:5px; background:#ffe3e3; position:relative; color:#c30d00; display:block; }
.calendar_days .holiday .days .holiday_text span { padding:7px 6px; font-weight:600; line-height:1em; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.calendar_days .holiday .days .date { background:none; padding:0; width:auto; pointer-events:none; }

.reservation_data { position:relative; z-index:1;}
.calendar_days .reservation_data.active::after { display:none; }
.calendar_days .reservation_data > ul { display:flex; gap:5px; flex-direction:column; padding:2px;}
.calendar_days .reservation_data > ul > li button { font-size:1.2rem; border:none; padding:7px 10px; border-radius:5px; position:relative; box-shadow:none !important; cursor:pointer; transition:all 0.3s; width:100%; }
.calendar_days .reservation_data > ul > li button p { margin:0; width:100%; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; line-height: 150%; }
.calendar_days .reservation_data:has(button) { pointer-events:auto; }
.btn_reservation { position:absolute; top:0; left:0; width:100%; height:100%; display:block; z-index:0; border:none; border-radius:0; }
.btn_reservation:hover { background:var(--lp); }

/*.calendar_days .today { border:2px solid var(--main); }
.calendar_days .today::after { content:'today'; font-weight:600; background:var(--main); color:#fff; position:absolute; top:-21px; right:-2px; padding:0px 6px; border-radius:5px 5px 0 0; z-index:1; }*/

.calendar_days div:has(.reservation_data.active) .reservation_data_btn em{ display: none;}
.calendar_days div:has(.reservation_data.active) .reservation_data_btn { position:relative; left:0; width:100%; bottom:0; transition:width 0s, box-shadow 0.3s; }
.calendar_days div:has(.reservation_data.active) ul { margin-bottom:5px;}
.calendar_days div:has(.reservation_data_btn) .reservation_data::after { background:rgb(255,255,255); background:linear-gradient(0deg, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%); content:''; display:block; width:100%; height:65px; position:absolute; bottom:-10px; left:0; z-index:0; }
.reservation_data { position:relative; z-index:1;}
.calendar_days div > .reservation_data.active::after { display:none; }
.reservation_data_btn { position:absolute; bottom:10px; left:10px; gap:5px; z-index:1; width:calc(100% - 20px); padding:0px 10px; height:32px; border:1px solid #000; font-size:1.2rem; transition:width 0s box-shadow 0.3s; }
.reservation_data_btn:hover { box-shadow:5px 5px 10px 0 rgba(0,0,0,0.2); }
.reservation_data_btn span { display:inline-flex; align-items:center; justify-content:center; border-radius:100px; background:#fff;}
.reservation_data_btn em { background:rgb(0, 18, 170); background:linear-gradient(145deg, rgba(0, 18, 170, 1) 0%, rgba(177, 0, 251, 1) 100%); color:#fff; padding:0 7px; border-radius:50px; font-size:1.2rem; height:22px; line-height:22px;}
.calendar_days .reservation_data { overflow:hidden; max-height:95px; pointer-events:none; }
.calendar_days .reservation_data.active { max-height:none;}

.calendar_days .reservation_data > ul { display:flex; gap:5px; flex-direction:column; padding:2px;}
.calendar_days .reservation_data > ul > li button { font-size:1.2rem; border:none; padding:7px 10px; border-radius:5px; position:relative; box-shadow:none !important; cursor:pointer; transition:all 0.3s; width:100%; }
.calendar_days .reservation_data > ul > li button p { margin:0; width:100%; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; }
.calendar_days .reservation_data:has(button) { pointer-events:auto; }