@charset "utf-8"; /* main */ [data-main-con] { margin-top:4.38em; } [data-main-con="reserve"] { margin-top:2.38em; } /* 타이틀 */ .title { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; } .title em { font-size:1.83rem; font-weight:500; } .title span { font-size:1.25rem; font-weight:300; } .sub_title { font-size:1.38rem; font-weight:500; } /* 더보기 */ .icon_link { display:flex; width:12px; height:12px; position:relative; } .icon_link::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:url(/resource/reserve/images/main/icon_link.svg) no-repeat 50% 50% / contain; } .icon_more { position:relative; display:flex; align-items:center; } .icon_more::after { display:inline-block; width:26px; height:26px; content:''; background:url(/resource/reserve/images/main/icon_more.svg) no-repeat 50% 50% / contain; opacity:.5; transition:var(--trans-ani); } .icon_more:hover::after { transform:rotate(180deg); } @media all and (max-width:1568px){ /* 타이틀 */ .title em { font-size:1.73rem; } .title span { font-size:1.2rem; } .sub_title { font-size:1.3rem; } } @media all and (max-width:1368px){ /* 타이틀 */ .title em { font-size:1.63rem; } .title span { font-size:1.15rem; } .sub_title { font-size:1.267rem; } } @media all and (max-width:1168px){ /* main */ [data-main-con] { margin-top:3.8em; } [data-main-con="reserve"] { margin-top:2.38em; } /* 타이틀 */ .title em { font-size:1.53rem; } .title span { font-size:1.1rem; } .sub_title { font-size:1.2rem; } } @media all and (max-width:968px){ /* main */ [data-main-con] { margin-top:3.4em; } [data-main-con="reserve"] { margin-top:2.38em; } /* 타이틀 */ .title em { font-size:1.43rem; } .title span { font-size:1.067rem; } .sub_title { font-size:1.167rem; } } @media all and (max-width:768px){ /* main */ [data-main-con] { margin-top:3.1em; } [data-main-con="reserve"] { margin-top:2.38em; } /* 타이틀 */ .title em { font-size:1.39rem; } .title span { font-size:1.02rem; } .sub_title { font-size:1.1rem; } /* 더보기 */ .icon_link { width:10px; height:10px; } .icon_more::after { width:24px; height:24px; } } @media all and (max-width:568px){ /* main */ [data-main-con] { margin-top:2.8em; } [data-main-con="reserve"] { margin-top:2.38em; } /* 타이틀 */ .title { gap:5px; } .title em { font-size:1.36rem; line-height:1.2} .title span { font-size:.98rem; line-height:1.1 } .sub_title { font-size:1.07rem; } } @media all and (max-width:368px){ /* main */ [data-main-con] { margin-top:2.5em; } [data-main-con="reserve"] { margin-top:2.38em; } /* 타이틀 */ .title em { font-size:1.33rem; } .title span { font-size:.95rem; } .sub_title { font-size:1.067rem; } } @media all and (max-width:320px){ /* 타이틀 */ .title em { font-size:1.267rem; } .title span { font-size:.85rem; } .sub_title { font-size:1.03rem; } } /********************************************************************** 맞춤검색 **********************************************************************/ [data-main-con="customsearch"] { position:relative; margin:0; } [data-main-con="customsearch"]::before { position:absolute; left:0; width:calc(100% - 1600px); top:0; height:100%; background:var(--color-light-blue); content:''; z-index:-1 } [data-main-con="customsearch"]::after { position:absolute; right:0; width:calc(100% - 1600px); top:0; height:100%; background:var(--color-light-mint); content:''; z-index:-1 } [data-main-con="customsearch"] .con_inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; } [data-main-con="customsearch"] .con_inner>div { width:calc((100% - 30px) / 2); } [data-main-con="customsearch"] .custom_left { padding:4.38em 4.06em 4.38em 0; background:var(--color-light-blue); border-radius:0 20px 20px 0; } [data-main-con="customsearch"] .custom_right { padding:4.38em 0 4.38em 4.06em; background:var(--color-light-mint); border-radius:20px 0 0 20px; } [data-main-con="customsearch"] ul.icon { position:relative; display:flex; flex-wrap:wrap; gap:10px 3.13em; --sizeBtn:7.5em; margin-top:2.81em; } [data-main-con="customsearch"] ul.icon>li { width:calc((100% - 9.39em) / 4); } [data-main-con="customsearch"] ul.icon>li .icon_btn { display:flex; flex-flow:column; justify-content:center; align-items:center } [data-main-con="customsearch"] ul.icon>li span.icon { position:relative; display:flex; width:var(--sizeBtn); height:var(--sizeBtn); border-radius:100%; background-color:var(--color-white); } [data-main-con="customsearch"] ul.icon>li span.icon::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background-position:center; background-repeat:no-repeat; background-size:contain; } [data-main-con="customsearch"] ul.icon>li span.icon::after { position:absolute; width:100%; height:100%; border:3px solid var(--color-point); border-radius:100%; content:''; opacity:0; transition:var(--trans-ani);} [data-main-con="customsearch"] ul.icon>li span.tit { position:relative; font-size:1.13em; transition:var(--trans-ani); margin-top:1.11em;} [data-main-con="customsearch"] ul.icon>li.active span.tit::before { position:absolute; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:10px solid var(--color-point); bottom:-1.11em; left:50%; content:''; transform:translateX(-50%); transition:var(--trans-ani); } [data-main-con="customsearch"] ul.icon>li:hover span.icon::after, [data-main-con="customsearch"] ul.icon>li.active span.icon::after { opacity:1; } [data-main-con="customsearch"] ul.icon>li:hover span.tit, [data-main-con="customsearch"] ul.icon>li.active span.tit { color:var(--color-point); } [data-main-con="customsearch"] ul.icon>li.active span.tit { margin-top:10px; } [data-main-con="customsearch"] .icon_wrap { position:absolute; top:calc(var(--sizeBtn) + 3.13em); display:none; width:100%; z-index:2; right:0; } [data-main-con="customsearch"] .icon_wrap>ul { position:relative; border:2px solid var(--color-point); padding:1.25em; border-radius:10px; background:var(--color-white); display:flex; gap:10px; flex-wrap:wrap; } [data-main-con="customsearch"] .icon_wrap>ul>li { flex:0 1 auto; min-width:calc((100% - 20px) / 3); } [data-main-con="customsearch"] .icon_wrap>ul>li>a { display:flex; align-items:center; justify-content:center; height:2.81em; border:1px solid #d8d8d8; background:var(--color-white); border-radius:5px; line-height:1; transition:var(--trans-ani); padding:0 1.88em; } [data-main-con="customsearch"] .icon_wrap>ul>li>a>span { padding-top:1px; text-align:center; line-height:1.1 } [data-main-con="customsearch"] .icon_wrap>ul>li>a:hover { border-radius:10px; background-color:var(--color-point); border-color:var(--color-point); color:var(--color-white) } /* 아이콘 배경 */ [data-main-con="customsearch"] .custom_left .icon>li .icon1::before { background-image:url(/resource/reserve/images/main/icon_main01.svg); } [data-main-con="customsearch"] .custom_left .icon>li .icon2::before { background-image:url(/resource/reserve/images/main/icon_main02.svg); } [data-main-con="customsearch"] .custom_left .icon>li .icon3::before { background-image:url(/resource/reserve/images/main/icon_main03.svg); } [data-main-con="customsearch"] .custom_left .icon>li .icon4::before { background-image:url(/resource/reserve/images/main/icon_main04.svg); } [data-main-con="customsearch"] .custom_right .icon>li .icon1::before { background-image:url(/resource/reserve/images/main/icon_main05.svg); } [data-main-con="customsearch"] .custom_right .icon>li .icon2::before { background-image:url(/resource/reserve/images/main/icon_main06.svg); } [data-main-con="customsearch"] .custom_right .icon>li .icon3::before { background-image:url(/resource/reserve/images/main/icon_main07.svg); } [data-main-con="customsearch"] .custom_right .icon>li .icon4::before { background-image:url(/resource/reserve/images/main/icon_main08.svg); } /* 맞춤검색 */ [data-main-con="customsearch"] .re_search_wrap { margin-top:4.38em; display:none } [data-main-con="customsearch"] .re_search_wrap .search_list { display:flex; flex-wrap:wrap; padding:1.25em; border-radius:10px; gap:5px; margin-top:.63em; } [data-main-con="customsearch"] .re_search_wrap .search_list>li { position:relative; flex:auto; --sizeHig:45px; height:var(--sizeHig) } [data-main-con="customsearch"] .re_search_wrap .search_list .search_btn, [data-main-con="customsearch"] .re_search_wrap .search_list input[type="text"] { width:100%; height:var(--sizeHig); min-height:var(--sizeHig); display:flex; align-items:center; border:1px solid #d8d8d8; border-radius:5px; background:var(--color-white); padding:0 12px; line-height:1 } [data-main-con="customsearch"] .re_search_wrap .search_list input[type="text"]::placeholder { font-size:.88rem; } [data-main-con="customsearch"] .re_search_wrap .search_list .search_btn { position:relative; font-size:.88rem; font-weight:300; color:#656565; transition:var(--trans-ani); } [data-main-con="customsearch"] .re_search_wrap .search_list .search_btn::before { position:absolute; width:var(--sizeHig); height:var(--sizeHig); right:0; top:-1px; content:''; opacity:.8; background:url(/resource/reserve/images/main/icon_select.svg) no-repeat 50% 50% / 15px; pointer-events:none } [data-main-con="customsearch"] .re_search_wrap .search_list .search_btn .txt { display:inline-block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding-right:25px; line-height:1.2 } [data-main-con="customsearch"] .re_search_wrap .search_list .icon_search { position:relative; width:var(--sizeHig); height:var(--sizeHig); background:var(--color-white); border-radius:5px } [data-main-con="customsearch"] .re_search_wrap .search_list>li:has(.icon_search) { min-width:var(--sizeHig); max-width:var(--sizeHig) } [data-main-con="customsearch"] .re_search_wrap .search_list .icon_search::before { position:absolute; width:100%; height:100%; right:0; top:0; content:''; content:''; background:url(/resource/reserve/images/main/icon_search.svg) no-repeat 50% 50% / auto 17px; } [data-main-con="customsearch"] .re_search_wrap .search_list>li>div { position:absolute; display:none; top:var(--sizeHig); border:1px solid #d8d8d8; background:var(--color-white); width:100%; left:0; z-index:2; padding:1em .5em; border-top-width:0; border-radius:0 0 5px 5px; } [data-main-con="customsearch"] .re_search_wrap .search_list .select_list { display:flex; flex-flow:column; gap:5px; font-size:.81em; line-height:1.2; letter-spacing:-.065em } [data-main-con="customsearch"] .re_search_wrap .search_list .select_list>li { word-break:break-all; } [data-main-con="customsearch"] .re_search_wrap .search_list .select_list>li>button { position:relative; display:flex; width:100%; word-break:break-all; justify-content:center; align-items:center; padding:10px 5px; border-radius:5px; border:1px solid rgba(0,0,0,.2); transition:var(--trans-ani);} [data-main-con="customsearch"] .re_search_wrap .search_list .select_list>li>button.active, [data-main-con="customsearch"] .re_search_wrap .search_list .select_list>li>button:hover { color:var(--color-white); background:var(--color-point) } [data-main-con="customsearch"] .re_search_wrap .search_list .select_list.area { flex-flow:row wrap; } [data-main-con="customsearch"] .re_search_wrap .search_list .select_list.area>li { flex:0 1 auto; min-width:calc((100% - 5px) / 2); } [data-main-con="customsearch"] .re_search_wrap .search_list>li.active .search_btn { border-radius:5px 5px 0 0; } [data-main-con="customsearch"] .custom_left .search_list { background:var(--color-point); } [data-main-con="customsearch"] .custom_right .search_list { background:var(--color-mint); } [data-main-con="customsearch"] .custom_right .search_list .select_list>li>button.active, [data-main-con="customsearch"] .custom_right .search_list .select_list>li>button:hover { color:var(--color-white); background:var(--color-mint); } [data-main-con="customsearch"] .custom_right ul.icon>li span.icon::after { border-color:var(--color-mint); } [data-main-con="customsearch"] .custom_right ul.icon>li:hover span.tit, [data-main-con="customsearch"] .custom_right ul.icon>li.active span.tit { color:var(--color-mint); } [data-main-con="customsearch"] .custom_right ul.icon>li.active span.tit::before { border-bottom-color:var(--color-mint); } [data-main-con="customsearch"] .custom_right .icon_wrap>ul { border-color:var(--color-mint); } [data-main-con="customsearch"] .custom_right .icon_wrap>ul>li>a:hover { border-color:var(--color-mint); background:var(--color-mint); } @media all and (max-width:1668px){ [data-main-con="customsearch"]::before, [data-main-con="customsearch"]::after { width:4%; } [data-main-con="customsearch"] .custom_left { padding:4em 3em 4em 0; } [data-main-con="customsearch"] .custom_right { padding:4em 0 4em 3em; } [data-main-con="customsearch"] ul.icon { --sizeBtn:7em; } [data-main-con="customsearch"] ul.icon>li span.tit { font-size:1.067em; } [data-main-con="customsearch"] .icon_wrap { top:calc(var(--sizeBtn) + 3.11em) } [data-main-con="customsearch"] .icon_wrap>ul>li>a { font-size:.98rem; padding:0 1em; } [data-main-con="customsearch"] .re_search_wrap { margin-top:4em; } [data-main-con="customsearch"] .re_search_wrap .search_list .select_list { font-size:.8rem; } [data-main-con="customsearch"] .re_search_wrap .search_list .select_list>li>button { padding:9px 4px; } } @media all and (max-width:1568px){ [data-main-con="customsearch"] .custom_left { padding:3.5em 3em 3.5em 0; } [data-main-con="customsearch"] .custom_right { padding:3.5em 0 3.5em 3em; } [data-main-con="customsearch"] ul.icon { margin-top:2em; --sizeBtn:6.85em;} [data-main-con="customsearch"] .icon_wrap { top:calc(var(--sizeBtn) + 3em) } [data-main-con="customsearch"] .re_search_wrap { margin-top:3.5em; } [data-main-con="customsearch"] .icon_wrap>ul>li>a { font-size:.95rem; padding:0 .5em; } } @media all and (max-width:1468px){ [data-main-con="customsearch"] .custom_left { padding:3em 3em 3em 0; } [data-main-con="customsearch"] .custom_right { padding:3em 0 3em 3em; } [data-main-con="customsearch"] ul.icon { margin-top:1.75em; --sizeBtn:6.5em;} [data-main-con="customsearch"] ul.icon>li span.tit { margin-top:1em; } [data-main-con="customsearch"] .icon_wrap { top:calc(var(--sizeBtn) + 2.9em) } [data-main-con="customsearch"] .re_search_wrap { margin-top:3em; } [data-main-con="customsearch"] .icon_wrap>ul>li>a { font-size:.9rem; } } @media all and (max-width:1368px){ [data-main-con="customsearch"] .con_inner { gap:20px; } [data-main-con="customsearch"] .con_inner>div { width:calc((100% - 20px) / 2) } [data-main-con="customsearch"] .custom_left { padding:3em 2.5em 3em 0; } [data-main-con="customsearch"] .custom_right { padding:3em 0 3em 2.5em; } [data-main-con="customsearch"] ul.icon>li span.tit { font-size:1.03em } [data-main-con="customsearch"] .icon_wrap>ul { padding:.75em; gap:5px; } [data-main-con="customsearch"] .icon_wrap>ul>li { min-width:calc((100% - 10px) / 3) } [data-main-con="customsearch"] .icon_wrap>ul>li>a { font-size:.88rem; } } @media all and (max-width:1268px){ [data-main-con="customsearch"] .custom_left { padding:3em 2em 3em 0; } [data-main-con="customsearch"] .custom_right { padding:3em 0 3em 2em; } [data-main-con="customsearch"] ul.icon { --sizeBtn:6em; } [data-main-con="customsearch"] ul.icon>li span.tit { font-size:1em } [data-main-con="customsearch"] .icon_wrap>ul { padding:.5em; } [data-main-con="customsearch"] .icon_wrap>ul>li>a { font-size:.85rem; } [data-main-con="customsearch"] .re_search_wrap { margin-top:2.5em; } [data-main-con="customsearch"] .re_search_wrap .search_list .icon_search::before { background-size:auto 17px; } } @media all and (max-width:1168px){ [data-main-con="customsearch"]::before, [data-main-con="customsearch"]::after { display:none; } [data-main-con="customsearch"] .con_inner>div { width:100%; padding:2em; border-radius:15px; } [data-main-con="customsearch"] ul.icon>li { width:auto; } [data-main-con="customsearch"] .icon_wrap>ul { padding:1em; gap:8px } [data-main-con="customsearch"] .icon_wrap>ul>li { min-width:calc((100% - 16px) / 3) } } @media all and (max-width:768px){ [data-main-con="customsearch"] .con_inner { gap:10px; } [data-main-con="customsearch"] ul.icon { margin-top:1em; } [data-main-con="customsearch"] ul.icon>li span.tit { margin-top:.75em; } [data-main-con="customsearch"] ul.icon>li.active span.tit { margin-top:7px; } [data-main-con="customsearch"] .icon_wrap { top:calc(var(--sizeBtn) + 2.7em) } [data-main-con="customsearch"] .re_search_wrap { margin-top:2em } [data-main-con="customsearch"] .re_search_wrap .search_list>li { --sizeHig:40px; } [data-main-con="customsearch"] .re_search_wrap .search_list .search_btn { font-size:.85rem; } } @media all and (max-width:568px){ [data-main-con="customsearch"] .con_inner>div { padding:2em 1.5em; } [data-main-con="customsearch"] ul.icon { gap:10px 1em } [data-main-con="customsearch"] ul.icon { --sizeBtn:5.5em; } [data-main-con="customsearch"] .icon_wrap>ul>li { flex:auto; min-width:calc((100% - 8px) / 2) } [data-main-con="customsearch"] .icon_wrap>ul>li>a, [data-main-con="customsearch"] .re_search_wrap .search_list .search_btn, [data-main-con="customsearch"] .re_search_wrap .search_list input[type="text"]::placeholder { font-size:.8rem; } [data-main-con="customsearch"] .re_search_wrap .search_list { padding:.88em; } } @media all and (max-width:468px){ [data-main-con="customsearch"] .title { flex-flow:column; } [data-main-con="customsearch"] ul.icon { gap:10px; --sizeBtn:5.5em } [data-main-con="customsearch"] ul.icon>li span.icon::after { border-width:2px; } [data-main-con="customsearch"] .re_search_wrap .search_list>li { --sizeHig:38px; } [data-main-con="customsearch"] .re_search_wrap .search_list { margin-top:.25em; } } @media all and (max-width:414px){ [data-main-con="customsearch"] ul.icon>li:nth-child(4) { display:none; } } @media all and (max-width:368px){ [data-main-con="customsearch"] .search_list>li:not(:has(input)) { flex:100%; min-width:inherit; width:100%; } [data-main-con="customsearch"] .re_search_wrap .search_list>li:has(.icon_search) { max-width:inherit; width:100%; flex:100%; } [data-main-con="customsearch"] .re_search_wrap .search_list .icon_search { width:100%; } } @media all and (max-width:320px){ [data-main-con="customsearch"] ul.icon { --sizeBtn:4.7em } [data-main-con="customsearch"] .icon_wrap>ul { gap:5px } [data-main-con="customsearch"] .icon_wrap>ul>li { min-width:calc((100% - 5px) / 2) } [data-main-con="customsearch"] .icon_wrap>ul>li>a { height:inherit; padding:.5em; } } /********************************************************************** 배너 **********************************************************************/ [data-main-con="banner"] { display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; } [data-main-con="banner"] .popupzone, [data-main-con="banner"] .banner_link { width:calc((100% - 30px) / 2); } [data-main-con="banner"] .popupzone .swiper-slide { width:100%; } [data-main-con="banner"] .popupzone .swiper-slide .img { position:relative; width:100%; height:0; padding-top:33.758%; overflow:hidden; border-radius:15px;} [data-main-con="banner"] .popupzone .swiper-slide .img img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; } [data-main-con="banner"] .popupzone .swiper_control .control { justify-content:flex-start; padding:0 1.25em; margin-top:10px; } [data-main-con="banner"] .popupzone .swiper_control .control .swiper_bullet { margin-right:5px; } [data-main-con="banner"] .banner_link { display:flex; flex-wrap:wrap; gap:25px; } [data-main-con="banner"] .banner_link>li { width:calc((100% - 50px) / 3); } [data-main-con="banner"] .banner_link>li>a { position:relative; display:flex; flex-flow:column; width:100%; justify-content:space-between; height:calc(100% - 35px); border-radius:20px; background:var(--color-white); padding:2.5em 1.88em; } [data-main-con="banner"] .banner_link>li>a::after { position:absolute; width:100%; height:100%; border:3px solid var(--color-point); content:''; opacity:0; pointer-events:none; border-radius:20px; transition:var(--trans-ani); top:0; left:0} [data-main-con="banner"] .banner_link>li>a:hover::after { opacity:1;} [data-main-con="banner"] .banner_link>li>a dl { display:flex; flex-flow:column; } [data-main-con="banner"] .banner_link>li>a dl>dt { font-size:1.38em; font-weight:500; } [data-main-con="banner"] .banner_link>li>a dl>dd { font-size:.94em; line-height:1.4; opacity:.8; margin-top:.75em } [data-main-con="banner"] .banner_link>li>a.icon::before { position:absolute; right:2.5em; bottom:1.88em; pointer-events:none; background-position:center; background-repeat:no-repeat; content:''; } [data-main-con="banner"] .banner_link>li>a.icon1::before { background-image:url(/resource/reserve/images/main/icon_banner01.svg); width:50px; height:65px; } [data-main-con="banner"] .banner_link>li>a.icon2::before { background-image:url(/resource/reserve/images/main/icon_banner02.svg); width:65px; height:51px; } [data-main-con="banner"] .banner_link>li>a.icon3::before { background-image:url(/resource/reserve/images/main/icon_banner03.svg); width:54px; height:63px; } [data-main-con="banner"] .banner_link>li>a:hover { animation:iconShow 0.7s ease-in-out 1 forwards; } [data-main-con="banner"] .banner_link>li>a:hover dl>dt { color:var(--color-point) } [data-main-con="banner"] .banner_link>li>a:hover .icon_link { filter:invert(5%) sepia(93%) saturate(1904%) hue-rotate(193deg) brightness(95%) contrast(98%); transition:var(--trans-ani);} @media all and (max-width:1568px){ [data-main-con="banner"] .banner_link { gap:20px; } [data-main-con="banner"] .banner_link>li { width:calc((100% - 40px) / 3); } [data-main-con="banner"] .banner_link>li>a { padding:1.5em; } [data-main-con="banner"] .banner_link>li>a dl>dt { font-size:1.3em; } [data-main-con="banner"] .banner_link>li>a dl>dd { margin-top:.5em; } [data-main-con="banner"] .banner_link>li>a.icon::before { right:1.5em; bottom:1.5em; } } @media all and (max-width:1468px){ [data-main-con="banner"] .banner_link { gap:10px; } [data-main-con="banner"] .banner_link>li { width:calc((100% - 20px) / 3); } [data-main-con="banner"] .banner_link>li>a dl>dt { font-size:1.267em; } [data-main-con="banner"] .banner_link>li>a dl>dd { font-size:.9em; } [data-main-con="banner"] .banner_link>li>a.icon1::before { width:41.5529px; height:55px; } [data-main-con="banner"] .banner_link>li>a.icon2::before { width:52.471px; height:41px; } [data-main-con="banner"] .banner_link>li>a.icon3::before { width:44.9989px; height:53px; } } @media all and (max-width:1368px){ [data-main-con="banner"] { gap:20px; } [data-main-con="banner"] .popupzone, [data-main-con="banner"] .banner_link { width:calc(50% - 10px); } [data-main-con="banner"] .banner_link>li>a dl>dt { font-size:1.2em; } [data-main-con="banner"] .banner_link>li>a.icon1::before { width:33.9978px; height:45px; } [data-main-con="banner"] .banner_link>li>a.icon2::before { width:39.6732px; height:31px; } [data-main-con="banner"] .banner_link>li>a.icon3::before { width:36.5085px; height:43px; } } @media all and (max-width:1268px){ [data-main-con="banner"] .popupzone, [data-main-con="banner"] .banner_link { width:100%; } [data-main-con="banner"] .banner_link>li>a { min-height:12em } [data-main-con="banner"] .popupzone .swiper { width:calc(100% + 10px); margin-left:-5px; margin-right:-5px; } [data-main-con="banner"] .popupzone .swiper-slide { width:50%; } [data-main-con="banner"] .popupzone .swiper-slide>a { display:block; margin:0 5px; } [data-main-con="banner"] .popupzone .swiper_control .control { padding:0 1em; } } @media all and (max-width:1168px){ [data-main-con="banner"] .banner_link>li>a, [data-main-con="banner"] .banner_link>li>a::after { border-radius:15px; } } @media all and (max-width:768px){ [data-main-con="banner"] { gap:10px; } [data-main-con="banner"] .popupzone .swiper-slide { width:100%; } [data-main-con="banner"] .banner_link>li { width:calc((100% - 10px) / 2); } [data-main-con="banner"] .banner_link>li:last-child { width:100%; } [data-main-con="banner"] .banner_link>li>a { min-height:11em; padding:1.25em } [data-main-con="banner"] .banner_link>li>a dl>dt { font-size:1.167em; } [data-main-con="banner"] .banner_link>li>a dl>dd { font-size:.88em; } [data-main-con="banner"] .banner_link>li>a.icon::before { bottom:1.25em; right:1.25em; } [data-main-con="banner"] .popupzone .swiper_control .control { margin-top:5px; } [data-main-con="banner"] .popupzone .swiper-slide .img { border-radius:10px; } } @media all and (max-width:468px){ [data-main-con="banner"] .banner_link>li { width:100%; } [data-main-con="banner"] .banner_link>li>a::after { border-width:2px; } [data-main-con="banner"] .banner_link>li>a { min-height:10em; } } /********************************************************************** 빠른예약 **********************************************************************/ [data-main-con="reserve"] { background:var(--color-light-blue) url(/resource/reserve/images/main/bg_program.svg) no-repeat 50% 50% / cover; padding:4.38em 0 } [data-main-con="reserve"] .tab_menu { display:flex; flex-wrap:wrap; gap:10px 35px; margin-top:3.13em; } [data-main-con="reserve"] .tab_menu .icon { display:flex; position:relative; width:5.63em; height:5.63em; border-radius:100%; background-color:var(--color-white); margin-bottom:20px; transition:var(--trans-ani);} [data-main-con="reserve"] .tab_menu .icon::before { position:absolute; width:100%; height:100%; border-radius:100%; left:0; top:0; content:''; background-position:center; background-repeat:no-repeat; background-size:contain; } [data-main-con="reserve"] .tab_menu .icon1::before { background-image:url(/resource/reserve/images/main/icon_tab01.svg); } [data-main-con="reserve"] .tab_menu .icon2::before { background-image:url(/resource/reserve/images/main/icon_tab02.svg); } [data-main-con="reserve"] .tab_menu .icon3::before { background-image:url(/resource/reserve/images/main/icon_tab03.svg); } [data-main-con="reserve"] .tab_menu .icon4::before { background-image:url(/resource/reserve/images/main/icon_tab04.svg); } [data-main-con="reserve"] .tab_menu .icon5::before { background-image:url(/resource/reserve/images/main/icon_tab05.svg); } [data-main-con="reserve"] .tab_menu .icon6::before { background-image:url(/resource/reserve/images/main/icon_tab06.svg); } [data-main-con="reserve"] .tab_menu>li>button span { font-size:1.06em; } [data-main-con="reserve"] .tab_menu>li>button.active .icon { background-color:var(--color-point); } [data-main-con="reserve"] .tab_menu>li>button.active .icon::before { filter:invert(1) } [data-main-con="reserve"] .tab_menu>li>button.active { color:var(--color-point); transition:var(--trans-ani);} [data-main-con="reserve"] .tab_menu>li>button.active span { font-weight:500; } [data-main-con="reserve"] .conts_tab .none_data { padding:5rem; margin-top:1rem; border-radius:1rem; background:rgba(255,255,255,.4); } [data-main-con="reserve"] .conts_tab .none_data img { opacity:.8 } [data-main-con="reserve"] .conts_tab .list { display:flex; flex-wrap:wrap; gap:28px; margin-top:2.81em; } [data-main-con="reserve"] .conts_tab .list>li { width:calc((100% - 56px) / 3); } [data-main-con="reserve"] .conts_tab .list>li>a { position:relative; display:flex; flex-flow:column; width:100%; height:100%; border:1px solid #a9d7ff; border-radius:20px; background:var(--color-white); justify-content:space-between; transition:var(--trans-ani);} [data-main-con="reserve"] .conts_tab .list>li>a .cont { padding:1.88em; display:flex; flex-flow:column; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate { display:flex; flex-wrap:wrap; align-items:center; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate>li { position:relative; display:flex; flex-wrap:wrap; align-items:center; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate>li::after { display:inline-block; width:3px; height:3px; margin:-4px 10px 0 10px; vertical-align:middle; background:rgba(0,0,0,.15); border-radius:100%; content:''; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate>li:last-child::after { display:none; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate span.cate { line-height:1; padding:6px 15px 5px 15px; border-radius:25px; border-style:solid; border-width:1px; margin-top:-3px;} [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate span.cate1 { border-color:var(--color-base); } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate span.cate2 { border-color:var(--color-mint); color:var(--color-mint) } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate span.cate3 { border-color:#64a742; color:#64a742; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate span.cate4 { border-color:#dd4933; color:#dd4933; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate span.cate5 { border-color:#801a87; color:#801a87; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate span.day1 { color:var(--color-base) } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate span.day2 { color:var(--color-point) } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate span.day3 { color:red } [data-main-con="reserve"] .conts_tab .list>li>a .cont strong { display:block; width:100%; font-size:1.69em; font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-top:1.11em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl { display:flex; flex-wrap:wrap; gap:10px; font-size:1.06em; color:#656565; flex-wrap:wrap; margin-top:5px; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl>dt { min-width:70px; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl.period { font-size:1.38em; color:var(--color-point); margin-top:10px; margin-bottom:1.14em; gap:10px; } [data-main-con="reserve"] .conts_tab .list>li>a .amount { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:1.25em 1.88em; border-top:1px solid #a9d7ff; transition:var(--trans-ani); } [data-main-con="reserve"] .conts_tab .list>li>a .amount dl { display:flex; flex-wrap:wrap; gap:10px; font-size:.94em; align-items:center; } [data-main-con="reserve"] .conts_tab .list>li>a .amount dl>dd { font-weight:bold; } [data-main-con="reserve"] .conts_tab .list>li>a .amount dl>dd .small { font-weight:300; margin:0 1px; } [data-main-con="reserve"] .conts_tab .icon_more { display:flex; margin-top:1.88em; max-width:130px; height:40px; border-radius:25px; border:1px solid #d0d0d0; background:var(--color-white); padding:0 10px 0 20px; transition:var(--trans-ani); margin-left:auto; margin-right:auto } [data-main-con="reserve"] .conts_tab .icon_more::after { opacity:.3; } [data-main-con="reserve"] .conts_tab .icon_more>span { margin-right:1.57em; line-height:1; padding-top:1px; font-size:.88em; opacity:.74 } [data-main-con="reserve"] .conts_tab .icon_more:hover::after { filter:invert(1); opacity:1; } [data-main-con="reserve"] .conts_tab .icon_more:hover { border-color:var(--color-point); background:var(--color-point); color:var(--color-white); } [data-main-con="reserve"] .conts_tab .icon_more:hover>span { opacity:1; } [data-main-con="reserve"] .conts_tab .list>li>a::before { position:absolute; width:100%; height:100%; border:2px solid var(--color-point); content:''; opacity:0; pointer-events:none; border-radius:20px; transition:var(--trans-ani); top:0; left:0} [data-main-con="reserve"] .conts_tab .list>li>a:hover::before { opacity:1;} [data-main-con="reserve"] .conts_tab .list>li>a:hover .amount { border-top-color:var(--color-point); } @media all and (max-width:1668px){ [data-main-con="reserve"] .tab_menu { gap:10px 30px; margin-top:3em; } [data-main-con="reserve"] .tab_menu .icon { width:5.33em; height:5.33em; margin-bottom:17px; } [data-main-con="reserve"] .tab_menu>li>button span { font-size:1.03em; } [data-main-con="reserve"] .conts_tab .list { gap:20px; margin-top:2.5em; } [data-main-con="reserve"] .conts_tab .list>li { width:calc((100% - 40px) / 3); } [data-main-con="reserve"] .conts_tab .list>li>a .cont { padding:1.58em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont strong { font-size:1.59em; margin-top:1em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl { font-size:1.03em; margin-top:5px; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl.period { font-size:1.3em; margin-bottom:1em; } [data-main-con="reserve"] .conts_tab .list>li>a .amount { padding:1em 1.58em; } [data-main-con="reserve"] .conts_tab .icon_more { margin-top:1.58em; } } @media all and (max-width:1568px){ [data-main-con="reserve"] .tab_menu { margin-top:2.5em; } [data-main-con="reserve"] .conts_tab .list { gap:20px; margin-top:2.5em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont { padding:1.5em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont strong { font-size:1.4em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl.period { font-size:1.237em; } [data-main-con="reserve"] .conts_tab .list>li>a .amount { padding:1em 1.5em; justify-content:initial} [data-main-con="reserve"] .conts_tab .list>li>a .amount dl { width:100%; justify-content: space-between; } [data-main-con="reserve"] .conts_tab .icon_more { margin-top:1.5em; } } @media all and (max-width:1468px){ [data-main-con="reserve"] .tab_menu { margin-top:2em; } [data-main-con="reserve"] .conts_tab .list { margin-top:2em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont { padding:1.25em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate>li { font-size:.85rem; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate span.cate { padding:7px 13px 5px 13px; } [data-main-con="reserve"] .conts_tab .list>li>a .cont strong { font-size:1.367em; margin-top:.75em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl.period { font-size:1.2em; margin-top:5px; margin-bottom:.75em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl { font-size:1em; margin-top:10px; gap:3px 10px; line-height:1.2 } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl>dt { min-width:62px; } [data-main-con="reserve"] .conts_tab .list>li>a .amount { padding:1em 1.25em; justify-content:initial; gap:3px;} [data-main-con="reserve"] .conts_tab .list>li>a .amount dl { width:100%; justify-content: space-between; } [data-main-con="reserve"] .conts_tab .icon_more { margin-top:1.25em; } } @media all and (max-width:1368px){ [data-main-con="reserve"] .tab_menu { margin-top:1.5em; } [data-main-con="reserve"] .tab_menu .icon { width:5em; height:5em; margin-bottom:15px; } [data-main-con="reserve"] .tab_menu>li>button span { font-size:1em; } [data-main-con="reserve"] .conts_tab .list { gap:10px; margin-top:1.5em } [data-main-con="reserve"] .conts_tab .list>li { width:calc((100% - 10px) / 2) } [data-main-con="reserve"] .conts_tab .list>li>a .cont strong { font-size:1.3em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl.period { font-size:1.167em } [data-main-con="reserve"] .conts_tab .list>li>a .amount { justify-content:space-between; } [data-main-con="reserve"] .conts_tab .list>li>a .amount dl { width:inherit; justify-content:initial; } } @media all and (max-width:1268px){ [data-main-con="reserve"] .conts_tab .list>li>a .cont strong { font-size:1.267em; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl.period { font-size:1.1em } } @media all and (max-width:1168px){ [data-main-con="reserve"] { padding:3.8em 0; } } @media all and (max-width:968px){ [data-main-con="reserve"] { padding:3.4em 0; } [data-main-con="reserve"] .tab_menu { gap:10px 20px; } [data-main-con="reserve"] .tab_menu .icon { width:4.88em; height:4.88em; margin-bottom:12px; } [data-main-con="reserve"] .conts_tab .list>li>a .cont ul.cate>li { font-size:.8rem; } [data-main-con="reserve"] .conts_tab .list>li>a .cont strong { font-size:1.167rem; margin-top:.5em } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl { font-size:.9rem; gap:3px 5px; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl>dt { min-width:60px; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl.period { font-size:1rem; margin-top:.25em; margin-bottom:.5em; } [data-main-con="reserve"] .conts_tab .list>li>a .amount { justify-content:initial; } [data-main-con="reserve"] .conts_tab .list>li>a .amount dl { width:100%; justify-content:space-between; } } @media all and (max-width:868px){ [data-main-con="reserve"] .conts_tab .list>li>a .cont dl { flex-flow:column; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl.period { flex-flow:row wrap;} [data-main-con="reserve"] .conts_tab .list>li>a .amount { justify-content:space-between; } [data-main-con="reserve"] .conts_tab .list>li>a .amount dl { width:inherit; justify-content:initial; } [data-main-con="reserve"] .conts_tab .none_data { padding:3rem; margin-top:0; } } @media all and (max-width:768px){ [data-main-con="reserve"] { padding:3.1em 0; } } @media all and (max-width:668px){ [data-main-con="reserve"] .conts_tab .list>li { width:100% } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl { flex-flow:row wrap; } [data-main-con="reserve"] .conts_tab .list>li>a .cont strong { font-size:1.13rem; } } @media all and (max-width:568px){ [data-main-con="reserve"] { padding:2.8em 0; } [data-main-con="reserve"] .conts_tab .list { gap:10px; margin-top:1.5em; } [data-main-con="reserve"] .conts_tab .list>li { width:100%; } [data-main-con="reserve"] .tab_menu { gap:10px 15px; } [data-main-con="reserve"] .tab_menu .icon { width:4.5em; height:4.5em; margin-bottom:10px; } } @media all and (max-width:468px){ [data-main-con="reserve"] .conts_tab .list>li>a .amount { justify-content:initial; } [data-main-con="reserve"] .conts_tab .list>li>a .amount dl { width:100%; justify-content:space-between; } [data-main-con="reserve"] .conts_tab .list>li>a .cont dl.period { line-height:1.2; gap:3px 10px; } } @media all and (max-width:368px){ [data-main-con="reserve"] { padding:2.5em 0; } } /********************************************************************** 공지사항 **********************************************************************/ [data-main-con="notice"] { display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:4.38em; gap:30px; --sizeHig:18em } [data-main-con="notice"] .title { margin-bottom:20px; } [data-main-con="notice"] .notice { position:relative; width:calc(((100% - 56px) / 3) * 2); } [data-main-con="notice"] .notice .list { display:flex; flex-wrap:wrap; gap:17px; } [data-main-con="notice"] .notice .list>li { width:calc((100% - 34px) / 3); min-height:var(--sizeHig) } [data-main-con="notice"] .notice .list>li>a, [data-main-con="notice"] .notice .list>li.none_data { position:relative; display:flex; width:100%; height:100%; background:#f4f9ff; border-radius:20px; padding:2.5em 1.88em; flex-flow:column; justify-content:space-between; } [data-main-con="notice"] .notice .list>li>a::after { position:absolute; width:100%; height:100%; border:3px solid var(--color-point); content:''; opacity:0; pointer-events:none; border-radius:20px; transition:var(--trans-ani); top:0; left:0; } [data-main-con="notice"] .notice .list>li>a:hover::after { opacity:1;} [data-main-con="notice"] .notice .list>li>a:hover { animation:iconShow 0.7s ease-in-out 1 forwards; } [data-main-con="notice"] .notice .list>li>a dl { display:flex; flex-flow:column; } [data-main-con="notice"] .notice .list>li>a dl>dt { font-size:1.25em; line-height:1.28; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:500 } [data-main-con="notice"] .notice .list>li>a dl>dd { margin-top:15px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; word-break:break-all; } [data-main-con="notice"] .notice .list>li>a .date { display:flex; margin-top:2.5em; } [data-main-con="notice"] .notice .list>li>a dl>dd, [data-main-con="notice"] .notice .list>li>a .date { font-size:.94em; opacity:.7; } [data-main-con="notice"] .notice .icon_more { position:absolute; right:0; top:.45em; } [data-main-con="notice"] .notice .icon_more:hover::after { filter:invert(18%) sepia(93%) saturate(1904%) hue-rotate(193deg) brightness(95%) contrast(98%); opacity:1 } [data-main-con="notice"] .edu { display:flex; flex-flow:column; width:calc(((100% - 56px) / 3) * 1); } [data-main-con="notice"] .edu .banner { display:flex; flex-flow:column; justify-content:space-between; width:100%; height:100%; border:1px solid #e6e6e6; padding:2.5em 2.5em 1.25em; border-radius:20px; background:url(/resource/reserve/images/main/img_business.png) no-repeat 50% 75% / auto 109px; min-height:var(--sizeHig) } [data-main-con="notice"] .edu .banner .text { font-size:1.25em; line-height:1.28; text-align:center; } [data-main-con="notice"] .edu .banner a { display:flex; width:100%; height:55px; justify-content:center; align-items:center; font-size:1.06em; border:1px solid #e6e6e6; border-radius:10px; transition:var(--trans-ani); background:var(--color-white); } [data-main-con="notice"] .edu .banner a:hover { background:var(--color-point); color:var(--color-white); border-color:var(--color-point) } [data-main-con="notice"] .edu .banner a span { padding-top:1px; } @media all and (max-width:1668px){ [data-main-con="notice"] .notice .list>li>a dl>dt, [data-main-con="notice"] .edu .banner .text { font-size:1.2em; } [data-main-con="notice"] .edu .banner a { font-size:1.03em; } } @media all and (max-width:1568px){ [data-main-con="notice"] .notice .list>li>a dl>dt, [data-main-con="notice"] .edu .banner .text { font-size:1.167em; } } @media all and (max-width:1468px){ [data-main-con="notice"] .notice .list>li>a dl>dt, [data-main-con="notice"] .edu .banner .text { font-size:1.13em; } [data-main-con="notice"] .edu .banner { padding:2em 1em 1em } [data-main-con="notice"] .edu .banner a { font-size:1em; } } @media all and (max-width:1368px){ [data-main-con="notice"] { gap:20px; --sizeHig:16em } [data-main-con="notice"] .notice { width:calc(((100% - 56px) / 3) * 2.05); } [data-main-con="notice"] .notice .list>li>a dl>dt, [data-main-con="notice"] .edu .banner .text { font-size:1.067em; } [data-main-con="notice"] .notice .list>li>a { padding:2em 1.5em; } [data-main-con="notice"] .edu .banner a { font-size:.98em; height:50px; } } @media all and (max-width:1268px){ [data-main-con="notice"] .notice { width:calc(((100% - 56px) / 3) * 2.08); } } @media all and (max-width:1168px){ [data-main-con="notice"] { margin-bottom:3.8em; } [data-main-con="notice"] .title { margin-bottom:10px; } [data-main-con="notice"] .notice .list>li { width:calc((100% - 17px) / 2); } [data-main-con="notice"] .notice .list>li:nth-child(3) { display:none; } [data-main-con="notice"] .notice .list>li>a dl>dt { font-size:1.2em; } [data-main-con="notice"] .edu .banner .text br { display:none; } [data-main-con="notice"] .edu .banner .text { font-size:1.03em; } [data-main-con="notice"] .edu .banner a { font-size:.95em; height:46px; } [data-main-con="notice"] .notice .list>li>a, [data-main-con="notice"] .notice .list>li>a::after, [data-main-con="notice"] .edu .banner { border-radius:15px; } } @media all and (max-width:968px){ [data-main-con="notice"] { margin-bottom:3.4em; } } @media all and (max-width:868px){ [data-main-con="notice"] .notice, [data-main-con="notice"] .edu { width:100%; } [data-main-con="notice"] .title { margin-bottom:7px; } [data-main-con="notice"] .edu .banner .text { font-size:1.167em; margin-bottom:5em } [data-main-con="notice"] { --sizeHig:0 } } @media all and (max-width:768px){ [data-main-con="notice"] { margin-bottom:3.1em; } [data-main-con="notice"] .notice .list>li>a { padding:1.25em; } [data-main-con="notice"] .edu .banner { padding:1.25em 1.25em 1em; } [data-main-con="notice"] .notice .list>li>a .date { margin-top:2em; } [data-main-con="notice"] .notice .list>li>a, [data-main-con="notice"] .notice .list>li>a::after, [data-main-con="notice"] .edu .banner { border-radius:10px; } } @media all and (max-width:568px){ [data-main-con="notice"] { margin-bottom:2.8em; } [data-main-con="notice"] .notice .list>li>a dl>dt { font-size:1.167em; } [data-main-con="notice"] .notice .icon_more { top:0; } [data-main-con="notice"] .notice .list>li>a .date { margin-top:1.5em; } [data-main-con="notice"] .edu .banner .text { font-size:1.067em; } [data-main-con="notice"] .edu .banner a { height:42px; } } @media all and (max-width:468px){ [data-main-con="notice"] .notice .list>li>a::after { border-width:2px; } } @media all and (max-width:414px){ [data-main-con="notice"] .notice .list { gap:10px; } [data-main-con="notice"] .notice .list>li { width:100%; } [data-main-con="notice"] .notice .list>li:nth-child(3) { display:block; } } @media all and (max-width:368px){ [data-main-con="notice"] { margin-bottom:2.5em; } } /*레이어 팝업*/ .layer_popup_cont .swiper_bottom .swiper-pagination-current, .layer_popup_cont .swiper_bottom .swiper-pagination-total {margin-top: .3em;} @media all and (max-width:468px){ .layer_popup_cont .swiper_bottom .swiper-pagination-current, .layer_popup_cont .swiper_bottom .swiper-pagination-total {margin-top: .1em;} }