/******************************************************** 상세검색 *********************************************************/ .mypage-reservation-search_wrap { position:relative; } /* 버튼 */ .mypage-reservation-search_wrap .refresh_btn { position:absolute; right:15px; top:15px; display:flex; align-items:center; gap:7px; padding:10px 17px; border-radius:25px; font-size:.85rem; font-weight:300; background:var(--color-base); color:var(--color-white); z-index:1 } .mypage-reservation-search_wrap .icon_refresh { position:relative; width: 14px; height:14px; display:inline-block; } .mypage-reservation-search_wrap .icon_refresh::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:url(/resource/reserve/images/system/icon_reset.svg) no-repeat 50% 50% / contain; } .mypage-reservation-search_wrap .detail_search_btn { position:relative; display:flex; align-items:center; gap:7px; padding:10px; border-radius:8px; font-weight:300; background:var(--color-point); color:var(--color-white); } .mypage-reservation-search_wrap .icon_search { position:relative; width:17px; height:17px; display:inline-block; } .mypage-reservation-search_wrap .icon_search::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:url(/resource/reserve/images/system/icon_search.svg) no-repeat 50% 50% / contain; } .mypage-reservation-search_wrap .icon_del { position:relative; width:11px; height:11px; display:inline-block; } .mypage-reservation-search_wrap .icon_del::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:url(/resource/reserve/images/system/icon_close.svg) no-repeat 50% 50% / contain; } /* 메뉴 */ .mypage-reservation-search_wrap .detail_search_menu { position:relative; display:flex; --sizeBtn:60px; } .mypage-reservation-search_wrap .detail_search_menu::before { position:absolute; left:0; top:0; width:100%; height:var(--sizeBtn); border-radius:20px 20px 0 0; border:1px solid #e5e5e5; border-bottom-width:0; content:''; z-index:-1 } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn { position:relative; display:flex; min-width:200px; height:var(--sizeBtn); border-radius:0 20px 0 0; border:1px solid #e5e5e5; border-bottom-width:0; transition:var(--trans-ani); font-weight:500; background:var(--color-white); border-left-color:transparent; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn>span { position:relative; display:flex; width:100%; height:var(--sizeBtn); align-items:center; padding:0 20px; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn span::before { position:absolute; width:8px; height:8px; right:20px; top:50%; border-style:solid; border-width:0 2px 2px 0; border-color:var(--color-base); content:''; transform:translateY(-80%) rotate(45deg); transition:var(--trans-ani);} .mypage-reservation-search_wrap .detail_search_menu>li { position:relative; box-sizing:border-box; display:inline-flex; } .mypage-reservation-search_wrap .detail_search_menu>li.active::before { position:absolute; width:calc(100% - 2px); height:1px; left:1px; bottom:-1px; content:''; z-index:2; background:var(--color-white); } /* 효과 */ .mypage-reservation-search_wrap .detail_search_menu>li.active .detail_btn { border-color:var(--color-point); border-radius:20px 20px 0 0; color:var(--color-point); } .mypage-reservation-search_wrap .detail_search_menu>li.active .detail_btn span::after { position:absolute; width:100%; height:3px; left:0; bottom:-1px; border-bottom:2px solid var(--color-white); content:''; z-index:1; } .mypage-reservation-search_wrap .detail_search_menu>li.active .detail_btn span::before { transform:translateY(-20%) rotate(225deg); filter:invert(8%) sepia(35%) saturate(4534%) hue-rotate(193deg) brightness(96%) contrast(98%);} .mypage-reservation-search_wrap .detail_search_menu>li:first-child .detail_btn { border-left-color:#e5e5e5; } .mypage-reservation-search_wrap .detail_search_menu>li.prev .detail_btn { border-right-color:transparent; border-radius:20px 0 0 0; border-left-color:#e5e5e5;} .mypage-reservation-search_wrap .detail_search_menu>li:first-child.prev .detail_btn { border-radius:20px 0 0 0; } .mypage-reservation-search_wrap .detail_search_menu>li.active:first-child .detail_btn { border-left-color:var(--color-point); } /* 선택값 */ .mypage-reservation-search_wrap .detail_menu_box .detail_wrap { position:relative; display:none; width:100%; height:160px; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap.active { display:block; border:1px solid var(--color-point); border-bottom-width:0; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:20px; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list>li { position:relative; flex:0 1 auto; min-width:calc((100% - 90px) / 10); display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; height:20px; } .mypage-reservation-search_wrap .check_input_dt { position:absolute; width:1px; height:1px; opacity:0; } .mypage-reservation-search_wrap .check_label_dt { position:relative; padding-left:30px; } .mypage-reservation-search_wrap .check_label_dt::before { content:""; position:absolute; top:1px; left:0; width:20px; height:20px; overflow:hidden; background-color:var(--color-white); border:1px solid rgba(0,0,0,.2); border-radius:2px; } .mypage-reservation-search_wrap .check_input_dt:checked + .check_label_dt::before { background:#fff no-repeat 70% 50%; background-image:url(/resource/reserve/images/system/icon_check.svg); background-size:13px 9px; } /* 2차 선택값 */ .mypage-reservation-search_wrap .detail_menu_box .detail_wrap:has(.detail2)::before { position:absolute; width:1px; height:100%; left:270px; background:#e5e5e5; content:''; top:0; } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap { position:absolute; display:none; width:calc(100% - 310px); right:10px; top:10px; padding-right:20px; overflow-y:auto; overflow-x:hidden; height:140px; } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap.active { display:block; } .mypage-reservation-search_wrap .detail_menu_box .detail2 { position:relative; display:flex; flex-flow:column; width:260px; overflow-y:auto; overflow-x:hidden; padding:0 20px 10px 20px; gap:5px; max-height:140px; margin-top:10px;} .mypage-reservation-search_wrap .detail_menu_box .detail2 .detail2_btn { display:flex; width:100%; align-items:center; height:45px; border-radius:8px; background:rgba(0,0,0,.04); padding:0 15px; font-size:.95rem; } .mypage-reservation-search_wrap .detail_menu_box .detail2 .active .detail2_btn { background:var(--color-light-blue); position:relative; transition:var(--trans-ani); } .mypage-reservation-search_wrap .detail_menu_box .detail2 .active .detail2_btn::before { position:absolute; width:6px; height:6px; right:15px; top:50%; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-base); content:''; transform:translateY(-70%) rotate(45deg); transition:var(--trans-ani);} .mypage-reservation-search_wrap .detail_menu_box .list, .mypage-reservation-search_wrap .detail_menu_box .date_input { position:relative; display:flex; width:100%; flex-wrap:wrap; align-items:center; gap:10px 30px; padding:7px 0;} .mypage-reservation-search_wrap .detail_menu_box .date_input { max-width:30em; } .mypage-reservation-search_wrap .detail_menu_box .list { gap:10px 3em; } .mypage-reservation-search_wrap .detail_menu_box .list>li { position:relative; flex:0 1 auto; display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; height:20px; } .mypage-reservation-search_wrap .detail_menu_box .date_input>li { position:relative; width:calc((100% - 30px) / 2); display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px;} .mypage-reservation-search_wrap .detail_menu_box .date_input>li input { width:100%; } .mypage-reservation-search_wrap .detail_menu_box .date_input::before { position:absolute; left:50%; top:50%; width:30px; display:flex; align-items:center; justify-content:center; content:'~'; transform:translate(-50%, -50%) } .mypage-reservation-search_wrap .detail_menu_box .date_input>li a { position:absolute; width:40px; height:40px; right:0; top:0; display:flex; align-items:center; justify-content:center} .mypage-reservation-search_wrap .detail_menu_box .detail2::-webkit-scrollbar, .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap::-webkit-scrollbar { -webkit-appearance:none; width:2px; } .mypage-reservation-search_wrap .detail_menu_box .detail2::-webkit-scrollbar-thumb, .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap::-webkit-scrollbar-thumb { background-color:rgba(2,80,149,.3); } .mypage-reservation-search_wrap .detail_menu_box .detail2::-webkit-scrollbar-track, .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap::-webkit-scrollbar-track { background-color:rgba(2,80,149,.1); } /* 선택값 노출 */ .mypage-reservation-search_wrap .result_value_wrap { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--color-point); border-top-color:#e5e5e5; border-radius:0 0 20px 20px; padding:15px 20px;} .mypage-reservation-search_wrap .result_value_list { display:flex; align-items:center; flex-wrap:wrap; gap:5px; } .mypage-reservation-search_wrap .result_value_list .result_value_del { display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid rgba(0,0,0,.2); border-radius:20px; padding:7px 15px; font-size:.88rem; opacity:.9 } .mypage-reservation-search_wrap .result_value_list .result_value_del .txt { display:flex; align-items:flex-start; gap:5px; } .mypage-reservation-search_wrap .result_value_list .result_value_del .txt>i+i::before { display:inline-block; width:8px; height:8px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-base); content:''; transform:rotate(45deg); margin:-2px 8px 0 1px; opacity:.54} .mypage-reservation-search_wrap .detail_search_input { min-width:30%; display:flex; align-items:center; gap:5px; } .mypage-reservation-search_wrap .detail_search_input>li { flex:auto; position:relative; } .mypage-reservation-search_wrap .detail_search_input>li label { position:absolute; left:15px; top:50%; transform:translateY(-45%); font-size:.94em; opacity:.74; line-height:1} .mypage-reservation-search_wrap .detail_search_input>li input { width:100%; background:#ebf2f8; border-radius:5px; border-color:#ebf2f8; min-height:45px; } .mypage-reservation-search_wrap .detail_search_input>li:has(input:focus) label { font-size:0; } .mypage-reservation-search_wrap .detail_search_input>li button { width:100%; display:flex; justify-content:center; min-height:45px; } .mypage-reservation-search_wrap .detail_search_input>li:has(button) { max-width:130px; } @media all and (max-width:1568px){ .mypage-reservation-search_wrap .refresh_btn { top:12px; } .mypage-reservation-search_wrap .detail_search_menu { --sizeBtn:58px; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn { min-width:190px; } } @media all and (max-width:1468px){ .mypage-reservation-search_wrap .refresh_btn { top:10px; } .mypage-reservation-search_wrap .detail_search_menu { --sizeBtn:56px; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn { min-width:180px; font-size:.95rem; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn>span { padding:0 15px; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn span::before { right:15px; } } @media all and (max-width:1368px){ .mypage-reservation-search_wrap .refresh_btn { font-size:.8rem; padding:8px 15px; top:10px } .mypage-reservation-search_wrap .icon_refresh { width:13px; height:13px; } .mypage-reservation-search_wrap .icon_del { width:9px; height:9px; } .mypage-reservation-search_wrap .detail_search_menu { --sizeBtn:50px; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn { min-width:150px; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list>li, .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap>.list>li { font-size:.95rem; } .mypage-reservation-search_wrap .detail_menu_box .detail2 .detail2_btn { height:42px; font-size:.9rem; } .mypage-reservation-search_wrap .detail_menu_box .detail2 { width:230px; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap:has(.detail2)::before { left:240px; } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap { width:calc(100% - 270px); } .mypage-reservation-search_wrap .result_value_list .result_value_del { font-size:.85rem; } .mypage-reservation-search_wrap .result_value_wrap { flex-flow:column; gap:10px; } .mypage-reservation-search_wrap .result_value_list, .mypage-reservation-search_wrap .detail_search_input { width:100%; } } @media all and (max-width:1168px){ .mypage-reservation-search_wrap .detail_search_menu::before { border-radius:15px 15px 0 0; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn { border-radius:0 15px 0 0; font-size:.92rem; } .mypage-reservation-search_wrap .detail_search_menu>li.active .detail_btn { border-radius:15px 15px 0 0;} .mypage-reservation-search_wrap .result_value_wrap { border-radius:0 0 15px 15px} .mypage-reservation-search_wrap .detail_search_menu>li:first-child .detail_btn { border-radius:15px 15px 0 0; } .mypage-reservation-search_wrap .detail_search_menu>li:first-child.prev .detail_btn { border-radius:15px 0 0 0 } .mypage-reservation-search_wrap .detail_search_menu>li.prev .detail_btn { border-radius:15px 0 0 0; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list>li { min-width:calc((100% - 70px) / 8); } } @media all and (max-width:1068px){ .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn { min-width:120px; } } @media all and (max-width:868px){ .mypage-reservation-search_wrap { padding-top:10px; } .mypage-reservation-search_wrap .refresh_btn { top:-35px; right:0; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn { min-width:inherit; width:100%; } .mypage-reservation-search_wrap .detail_search_menu>li { flex:0 1 auto; min-width:calc(100% / 5); } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list { max-height:140px; overflow-y:auto; overflow-x:hidden; width:99%; margin-top:10px; margin-bottom:10px; padding:5px 15px; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list::-webkit-scrollbar { -webkit-appearance:none; width:2px; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list::-webkit-scrollbar-thumb { background-color:rgba(2,80,149,.3); } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list::-webkit-scrollbar-track { background-color:rgba(2,80,149,.1); } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list>li { min-width:calc((100% - 50px) / 6); } .mypage-reservation-search_wrap .detail_menu_box .detail2 { padding:0 15px 10px 15px; } .mypage-reservation-search_wrap .detail_menu_box .date_input input { min-height:36px; } .mypage-reservation-search_wrap .detail_search_input>li input, .mypage-reservation-search_wrap .detail_search_input>li button { min-height:42px; } .mypage-reservation-search_wrap .detail_menu_box .detail2 { width:150px; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap:has(.detail2)::before { left:160px; } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap { width:calc(100% - 190px); } .mypage-reservation-search_wrap .detail_menu_box .date_input input { width:100%; } .mypage-reservation-search_wrap .detail_menu_box .date_input>li a { width:36px; height:36px; } } @media all and (max-width:668px){ .mypage-reservation-search_wrap { padding-top:20px; } .mypage-reservation-search_wrap .refresh_btn { top:-20px; right:0; } .mypage-reservation-search_wrap .detail_search_menu { --sizeBtn:45px; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn { border-radius:0 10px 0 0; font-size:.9rem; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn>span { padding:0 10px; } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn span::before { right:10px; } .mypage-reservation-search_wrap .detail_search_menu::before { border-radius:10px 10px 0 0; } .mypage-reservation-search_wrap .detail_search_menu>li.active .detail_btn { border-radius:10px 10px 0 0;} .mypage-reservation-search_wrap .result_value_wrap { border-radius:0 0 10px 10px} .mypage-reservation-search_wrap .detail_search_menu>li:first-child .detail_btn { border-radius:10px 10px 0 0; } .mypage-reservation-search_wrap .detail_search_menu>li:first-child.prev .detail_btn { border-radius:10px 0 0 0 } .mypage-reservation-search_wrap .detail_search_menu>li.prev .detail_btn { border-radius:10px 0 0 0; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list>li { min-width:calc((100% - 30px) / 4); } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list>li, .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap>.list>li { font-size:.9rem; } .mypage-reservation-search_wrap .result_value_wrap { padding:15px; } .mypage-reservation-search_wrap .result_value_list .result_value_del { font-size:.8rem; } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap>.list { gap:10px; } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap>.list>li { width:calc((100% - 10px) / 2); } } @media all and (max-width:568px){ .mypage-reservation-search_wrap .detail_search_menu { flex-wrap:wrap; padding:10px; border-radius:10px 10px 0 0; gap:5px; background:#ebf2f8; border:1px solid var(--color-point); border-bottom-width:0 } .mypage-reservation-search_wrap .detail_search_menu::before, .mypage-reservation-search_wrap .detail_search_menu>li.active .detail_btn span::after, .mypage-reservation-search_wrap .detail_menu_box .detail_wrap:has(.detail2)::before { display:none; } .mypage-reservation-search_wrap .detail_search_menu>li { min-height:inherit; flex:auto; width:calc((100% - 5px) / 2); } .mypage-reservation-search_wrap .detail_search_menu>li.prev .detail_btn, .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn, .mypage-reservation-search_wrap .detail_search_menu>li:first-child .detail_btn { border-radius:10px; border-width:1px; border-color:rgba(0,0,0,.2); } .mypage-reservation-search_wrap .detail_search_menu>li.active .detail_btn { border-radius:10px; border-width:1px; } .mypage-reservation-search_wrap .detail_search_menu>li:first-child.prev .detail_btn { border-radius:10px; } .mypage-reservation-search_wrap .detail_search_menu>li.active:first-child .detail_btn { border-color:var(--color-point); } .mypage-reservation-search_wrap .detail_search_menu>li .detail_btn span::before { width:7px; height:7px; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap { background:var(--color-white); height:180px; } .mypage-reservation-search_wrap .detail_menu_box .detail2 { width:100%; flex-flow:row wrap; } .mypage-reservation-search_wrap .detail_menu_box .detail2>li { width:calc((100% - 10px) / 3); } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap { position:initial; width:100%; padding-right:0; height:inherit } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap>.list, .mypage-reservation-search_wrap .detail_menu_box .date_input { max-height:105px; overflow-y:auto; overflow-x:hidden; width:99%; padding:5px 20px; } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap>.list::-webkit-scrollbar, .mypage-reservation-search_wrap .detail_menu_box .date_input::-webkit-scrollbar { -webkit-appearance:none; width:2px; } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap>.list::-webkit-scrollbar-thumb, .mypage-reservation-search_wrap .detail_menu_box .date_input::-webkit-scrollbar-thumb { background-color:rgba(2,80,149,.3); } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap>.list::-webkit-scrollbar-track, .mypage-reservation-search_wrap .detail_menu_box .date_input::-webkit-scrollbar-track { background-color:rgba(2,80,149,.1); } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list { max-height:155px; } .mypage-reservation-search_wrap .result_value_wrap { padding:10px; } .mypage-reservation-search_wrap .result_value_list .result_value_del { padding:7px 10px; } .mypage-reservation-search_wrap .result_value_list .result_value_del .txt { gap:0; } } @media all and (max-width:468px){ .mypage-reservation-search_wrap .detail_menu_box .date_input { gap:15px; } .mypage-reservation-search_wrap .detail_menu_box .date_input>li { width:100%; } .mypage-reservation-search_wrap .detail_menu_box .date_input::before { transform:translate(-50%, -40%)} .mypage-reservation-search_wrap .detail_menu_box .detail2>li { flex:auto; width:calc((100% - 5px) / 2); } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap { height:220px; } .mypage-reservation-search_wrap .detail_menu_box .detail_wrap>.list { max-height:195px; } .mypage-reservation-search_wrap .detail_menu_box .detail2_wrap>.list, .mypage-reservation-search_wrap .detail_menu_box .date_input { max-height:100px; } } /******************************************************** /******************************************************** 마이페이지 *********************************************************/ [data-subarea="mypage"] .mypage-reservation-search_wrap .detail_menu_box .detail_wrap { height:130px; } [data-subarea="mypage"] .mypage-reservation-search_wrap .detail_search_input { justify-content:end; } [data-subarea="mypage"] .mypage-reservation-search_wrap .detail_menu_box .detail2 { margin-top:15px; } /* [data-subarea="mypage"] .mypage_top { display:flex; flex-wrap:wrap; align-items:stretch; background:#ebf2f8; border-radius:25px; padding:1.5em; gap:10px 1em } [data-subarea="mypage"] .mypage_top .member { width:300px; background:url(/resource/reserve/images/system/bg_mypage.svg) no-repeat left bottom / auto 60%; } [data-subarea="mypage"] .mypage_top .member p { font-size:1.56em; font-weight:300; } [data-subarea="mypage"] .mypage_top .member p>.name { font-weight:bold; color:var(--color-point); font-size:1.167em; } */ /* [data-subarea="mypage"] .mypage_top .link_box { position:relative; width:calc((100% - 300px - 5em) / 5); padding:1.5em; border-radius:15px; background-color:#fff; transition:var(--trans-ani); background-position:calc(100% - 1.5em) calc(100% - 1.5em); background-size:auto 30px; background-repeat:no-repeat } [data-subarea="mypage"] .mypage_top .link_box dt, [data-subarea="mypage"] .mypage_top .link_box dd { display:block; } [data-subarea="mypage"] .mypage_top .link_box dt { font-size:1.067em; font-weight:300; } [data-subarea="mypage"] .mypage_top .link_box dd { margin-top:1.5em; line-height:1 } [data-subarea="mypage"] .mypage_top .link_box dd strong { font-size:2.5em; font-weight:500; margin-right:10px; color:var(--color-point) } [data-subarea="mypage"] .mypage_top .link_box dd span { font-size:1em; font-weight:300; } [data-subarea="mypage"] .mypage_top .link_box svg { width:40px; height:40px; position:absolute; right:1.5em; bottom:2em; } [data-subarea="mypage"] .mypage_top .link_box svg, [data-subarea="mypage"] .mypage_top .link_box svg * { outline:none;} [data-subarea="mypage"] .mypage_top .link_box .svg_line { fill:none; stroke:#999; stroke-linecap:round; stroke-linejoin:round; stroke-width:4px;} [data-subarea="mypage"] .mypage_top .link_box:hover { background:var(--color-point); color:#fff } [data-subarea="mypage"] .mypage_top .link_box:hover dd strong { color:#fff } [data-subarea="mypage"] .mypage_top .link_box:hover .svg_line { stroke:#fff;} [data-subarea="mypage"] .mypage_top .link_box.active .svg_line { stroke-dasharray:800; stroke-dashoffset:800; transition:0.3s linear 0s; transition-property:stroke, stroke-dashoffset; transition-duration:0.3s, 0s;} [data-subarea="mypage"] .mypage_top .link_box.active.ani-show .svg_line { stroke-dashoffset:0; transition-duration:0.3s, 1.5s; transition-delay:0s, 0s;} */ /* 예약 목록 */ /* [data-subarea="mypage"] .mypage_tit, [data-subarea="mypage"] .mypage_list>li { display:flex; align-items:center; justify-content:center; font-size:1.067em; line-height:1.3 } [data-subarea="mypage"] .mypage_tit { background:#ebf2f8; border-radius:10px; padding:20px 10px; text-align:center; font-weight:500; } [data-subarea="mypage"] .mypage_tit>li { padding:0 10px; } [data-subarea="mypage"] .mypage_list>li { position:relative; width:100%; margin-top:5px; border-radius:10px; border:1px solid rgba(0,0,0,.15); padding:20px 15px; color:rgba(0,0,0,.64) } [data-subarea="mypage"] .mypage_list>li::before { position:absolute; width:calc(100% + 2px); height:calc(100% + 2px); border:2px solid var(--color-point); left:-1px; top:-1px; content:''; pointer-events:none; opacity:0; border-radius:10px; } [data-subarea="mypage"] .mypage_list>li:hover::before { opacity:1; transition:var(--trans-ani); } [data-subarea="mypage"] .mypage_list>li:hover { color:var(--color-base); } [data-subarea="mypage"] .mypage_list>li>dl { display:flex; flex-flow:column; gap:5px; justify-content:center; align-items:center; padding:0 5px; text-align:center } [data-subarea="mypage"] .mypage_list>li>dl>dt { display:none; } [data-subarea="mypage"] .mypage_list>li>dl>dd { display:flex; flex-flow:column; gap:3px; } [data-subarea="mypage"] .mypage_tit .num, [data-subarea="mypage"] .mypage_list .num { width:5%; } [data-subarea="mypage"] .mypage_tit .tit, [data-subarea="mypage"] .mypage_list .tit { flex:auto; width:29%; text-align:center; } [data-subarea="mypage"] .mypage_tit .date, [data-subarea="mypage"] .mypage_list .date { width:20%; } [data-subarea="mypage"] .mypage_tit .time, [data-subarea="mypage"] .mypage_list .time { width:12%; } [data-subarea="mypage"] .mypage_tit .won, [data-subarea="mypage"] .mypage_list .won { width:12%; } [data-subarea="mypage"] .mypage_tit .state, [data-subarea="mypage"] .mypage_list .state { width:10%; } [data-subarea="mypage"] .mypage_tit .app_date, [data-subarea="mypage"] .mypage_list .app_date { width:14%; } [data-subarea="mypage"] .mypage_tit .stadium, [data-subarea="mypage"] .mypage_list .stadium { width:14%; } [data-subarea="mypage"] .mypage_tit .won, [data-subarea="mypage"] .mypage_list .won { width:14%; } [data-subarea="mypage"] .mypage_tit .name, [data-subarea="mypage"] .mypage_list .name { width:10%; } [data-subarea="mypage"] .mypage_tit .insti, [data-subarea="mypage"] .mypage_list .insti { width:14%; } */ /* 상태값 */ /* [data-subarea="mypage"] .value { padding:10px 15px 8px; font-size:.9rem; line-height:1; color:#fff; border-radius:25px; } [data-subarea="mypage"] .value1 { background:var(--color-point) } [data-subarea="mypage"] .value2 { background:#46a757; } [data-subarea="mypage"] .value3 { background:#222; } [data-subarea="mypage"] .value4 { background:#ef9e33; } [data-subarea="mypage"] .value5 { background:#ef3f44; } [data-subarea="mypage"] .value6 { background:#fff; color:var(--color-point); border:1px solid var(--color-point) } [data-subarea="mypage"] .value7 { background:#fff; color:#ef3f44; border:1px solid #ef3f44;} [data-subarea="mypage"] .value8 { background:#ef3f44; } [data-subarea="mypage"] .value9 { background:#222; } */ /* 탭메뉴 */ /* [data-subarea="mypage"] .sub_tit { position:relative; } [data-subarea="mypage"] .sub_tit .more { top:-2px; position:absolute; right:0; } [data-subarea="mypage"] .more { display:flex; align-items:center; justify-content:center; position:relative; width:36px; height:36px; border:1px solid #b3b3b3; border-radius:100%; transition:var(--trans-ani); overflow:hidden } [data-subarea="mypage"] .more::after { position:absolute; width:12px; height:2px; left:50%; top:50%; background:#b3b3b3; content:''; transform:translate(-50%,-50%); } [data-subarea="mypage"] .more::before { position:absolute; width:2px; height:12px; left:50%; top:50%; background:#b3b3b3; content:''; transform:translate(-50%,-50%); } [data-subarea="mypage"] .more:hover { transform:rotate(180deg); border-color:var(--color-point); } [data-subarea="mypage"] .more:hover::after, [data-subarea="mypage"] .more:hover::before { background:var(--color-point); } [data-subarea="mypage"] .mypage_tab .list { position:relative; display:flex; flex-wrap:wrap; gap:5px 3px;} [data-subarea="mypage"] .mypage_tab .list>li { position:relative; display:flex; align-items:center; justify-content:center; gap:5px 10px; border:1px solid rgba(0,0,0,.2); border-radius:30px; padding:3px 3px 3px 15px; transition:var(--trans-ani);} [data-subarea="mypage"] .mypage_tab .list>li button { display:flex; font-size:.95em; font-weight:300; letter-spacing:-.06em; line-height:1; } [data-subarea="mypage"] .mypage_tab .list>li button>span { padding-top:2px; letter-spacing:-.05em } [data-subarea="mypage"] .mypage_tab .list>li.active { border-color:var(--color-point); background:var(--color-point); color:#fff; } [data-subarea="mypage"] .mypage_tab .list>li.active .more { border-color:#fff; background:#fff; } [data-subarea="mypage"] .conts_tab { margin-top:1em; } [data-subarea="mypage"] .btn_tab_mob { display:none; } !* 예약전체 *! [data-subarea="mypage"] .mypage_tit.mt2em { margin-top:2em; } */ /* @media all and (max-width:1668px){ [data-subarea="mypage"] .mypage_top .member { width:270px; } [data-subarea="mypage"] .mypage_top .member p { font-size:1.46em; } [data-subarea="mypage"] .mypage_top .link_box { width:calc((100% - 270px - 5em) / 5); } [data-subarea="mypage"] .mypage_top .link_box dd strong { font-size:2.4em; } [data-subarea="mypage"] .mypage_tit, [data-subarea="mypage"] .mypage_list>li { font-size:1.03em; } } @media all and (max-width:1568px){ [data-subarea="mypage"] .mypage_top { gap:10px; } [data-subarea="mypage"] .mypage_top .member { width:250px; } [data-subarea="mypage"] .mypage_top .member p { font-size:1.36em; } [data-subarea="mypage"] .mypage_top .link_box { width:calc((100% - 250px - 50px) / 5); } [data-subarea="mypage"] .mypage_top .link_box dd strong { font-size:2.3em; } [data-subarea="mypage"] .value { font-size:.85rem; } } @media all and (max-width:1468px){ [data-subarea="mypage"] .mypage_top { gap:10px; } [data-subarea="mypage"] .mypage_top .member { width:230px; } [data-subarea="mypage"] .mypage_top .link_box { width:calc((100% - 230px - 50px) / 5); padding:1.25em } [data-subarea="mypage"] .mypage_top .link_box dt { font-size:1.03em; } [data-subarea="mypage"] .mypage_top .link_box dd strong { font-size:2.2em; } [data-subarea="mypage"] .mypage_top .link_box svg { width:38px; height:38px; bottom:1.5em; right:1.25em; } [data-subarea="mypage"] .value { font-size:.83rem; } [data-subarea="mypage"] .more { font-size:.9rem; } }*/ @media all and (max-width:1368px){ /*[data-subarea="mypage"] .mypage_top { gap:10px; border-radius:20px; }*/ /*[data-subarea="mypage"] .mypage_top .member { width:100%; background:none }*/ /*[data-subarea="mypage"] .mypage_top .link_box { width:calc((100% - 40px) / 5); padding:1.25em }*/ [data-subarea="mypage"] .mypage-reservation-search_wrap .detail_search_input>li:has(button) { max-width:inherit; } } /*@media all and (max-width:1168px){ [data-subarea="mypage"] .mypage_top { border-radius:15px; padding:1.25em } [data-subarea="mypage"] .mypage_top .member p { font-size:1.26em; } [data-subarea="mypage"] .mypage_top .link_box { padding:1em; border-radius:10px; } [data-subarea="mypage"] .mypage_top .link_box dd strong { font-size:2em; } [data-subarea="mypage"] .mypage_top .link_box svg { width:32px; height:32px; bottom:1.25em; right:1em; } [data-subarea="mypage"] .mypage_tit { display:none; } [data-subarea="mypage"] .mypage_list>li { flex-wrap:wrap; gap:10px 30px; position:relative; justify-content:left; color:rgba(0,0,0,.94) } [data-subarea="mypage"] .mypage_list>li>dl>dt { display:flex; font-weight:500; } [data-subarea="mypage"] .mypage_list>li>dl { flex-flow:row wrap; gap:5px 10px; } [data-subarea="mypage"] .mypage_list>li>.num>dt, [data-subarea="mypage"] .mypage_list>li>.state>dt, [data-subarea="mypage"] .mypage_list>li>.app_date>dt, [data-subarea="mypage"] .mypage_list>li>.tit>dt { display:none; } [data-subarea="mypage"] .mypage_list .tit, [data-subarea="mypage"] .mypage_list .num { width:100%; justify-content:flex-start; text-align:left } [data-subarea="mypage"] .mypage_list .date, [data-subarea="mypage"] .mypage_list .time, [data-subarea="mypage"] .mypage_list .won, [data-subarea="mypage"] .mypage_list .stadium, [data-subarea="mypage"] .mypage_list .name, [data-subarea="mypage"] .mypage_list .insti, [data-subarea="mypage"] .mypage_list .state, [data-subarea="mypage"] .mypage_list .app_date { width:auto; } [data-subarea="mypage"] .mypage_list .tit { font-size:1.067em; font-weight:500; } [data-subarea="mypage"] .mypage_list .app_date { position:absolute; right:15px; top:20px; color:rgba(0,0,0,.54) } [data-subarea="mypage"] .mypage_list>li.none_data { justify-content:center;} [data-subarea="mypage"] .mypage_list .state { width:100%; margin-top:10px; padding:10px 0 0; border-top:1px solid rgba(0,0,0,.15); } [data-subarea="mypage"] .mypage_list .state>dd { width:100%; flex-flow:row wrap; justify-content:end} [data-subarea="mypage"] .value { display:flex; justify-content:center; border-radius:8px; padding:12px 12px 8px 12px; font-size:.9rem; line-height:1 } } @media all and (max-width:1024px){ [data-subarea="mypage"] .mypage_top .member p { font-size:1.26rem; } [data-subarea="mypage"] .mypage_top .link_box dt { font-size:.95rem; } [data-subarea="mypage"] .mypage_top .link_box dd strong { font-size:2rem; } [data-subarea="mypage"] .mypage_top .link_box dd span { font-size:.95rem; } [data-subarea="mypage"] .mypage_list>li { font-size:1.03rem; } [data-subarea="mypage"] .mypage_tab .list>li button { font-size:.95rem; } [data-subarea="mypage"] .more { width:30px; height:30px; } [data-subarea="mypage"] .sub_tit .more { top:2px; } } @media all and (max-width:868px){ [data-subarea="mypage"] .mypage_top .link_box { width:calc((100% - 10px) / 2); } [data-subarea="mypage"] .mypage_top .link_box.icon3, [data-subarea="mypage"] .mypage_top .link_box.icon4, [data-subarea="mypage"] .mypage_top .link_box.icon5 { width:calc((100% - 20px) / 3); } [data-subarea="mypage"] .mypage_top .link_box dd { margin-top:1em; } [data-subarea="mypage"] .btn_tab_mob { width:100%; display:flex; font-size:.95rem; padding:8px 8px 8px 20px; border-radius:35px; border:1px solid var(--color-point); background:var(--color-point); align-items:center; justify-content:space-between; color:#fff; transition:var(--trans-ani); } [data-subarea="mypage"] .btn_tab_mob .more { border-color:#fff; } [data-subarea="mypage"] .btn_tab_mob .more::before, [data-subarea="mypage"] .btn_tab_mob .more::after { background:#fff; } [data-subarea="mypage"] .btn_tab_mob.active { border-radius:15px 15px 0 0; } [data-subarea="mypage"] .mypage_tab .mob_list { display:none; padding:1em; border-radius:0 0 15px 15px; border:1px solid var(--color-point); border-top-width:0;} [data-subarea="mypage"] .mypage_tab .list { gap:10px; } [data-subarea="mypage"] .mypage_tab .list>li { width:calc((100% - 10px) / 2); border-radius:10px; padding:12px 10px } [data-subarea="mypage"] .mypage_tab .list>li .more { display:none; } !* [data-subarea="mypage"] .mypage-reservation-search_wrap .detail_menu_box .date_input { padding:17px 15px; } *! }*/ @media all and (max-width:668px){ /*[data-subarea="mypage"] .sub_tit .more { top:-1px; }*/ /*[data-subarea="mypage"] .mypage_top .member p { font-size:1.16rem; }*/ /*[data-subarea="mypage"] .mypage_top .link_box dd strong { font-size:1.7rem; }*/ /*[data-subarea="mypage"] .mypage_top .link_box { width:100%; }*/ /*[data-subarea="mypage"] .mypage_top .link_box.icon2,*/ /*[data-subarea="mypage"] .mypage_top .link_box.icon3,*/ /*[data-subarea="mypage"] .mypage_top .link_box.icon4,*/ /*[data-subarea="mypage"] .mypage_top .link_box.icon5 { width:calc((100% - 10px) / 2); }*/ /*[data-subarea="mypage"] .mypage_list .date,*/ /*[data-subarea="mypage"] .mypage_list .time,*/ /*[data-subarea="mypage"] .mypage_list .won,*/ /*[data-subarea="mypage"] .mypage_list .stadium,*/ /*[data-subarea="mypage"] .mypage_list .name,*/ /*[data-subarea="mypage"] .mypage_list .insti,*/ /*[data-subarea="mypage"] .mypage_list .state { width:100%; justify-content:left; }*/ /*[data-subarea="mypage"] .mypage_list>li { font-size:1rem; }*/ /*[data-subarea="mypage"] .value { font-size:.85rem; }*/ [data-subarea="mypage"] .mypage-reservation-search_wrap { padding-top:0; } [data-subarea="mypage"] .mypage-reservation-search_wrap .refresh_btn { top:-37px; } } /* @media all and (max-width:568px){ [data-subarea="mypage"] .sub_tit .more { top:-1px; } [data-subarea="mypage"] .mypage_list>li { font-size:.95rem; } [data-subarea="mypage"] .mypage_tab .list>li button { font-size:.9rem; } } */ @media all and (max-width:468px){ [data-subarea="mypage"] .mypage-reservation-search_wrap .detail_menu_box .detail_wrap { height:175px; } /* [data-subarea="mypage"] .mypage-reservation-search_wrap .detail_menu_box .detail_wrap { height:130px; } [data-subarea="mypage"] .mypage-reservation-search_wrap .detail_menu_box .date_input { max-height:120px; padding:15px; max-width:inherit } */ } @media all and (max-width:414px){ /*[data-subarea="mypage"] .mypage_top { padding:1em; border-radius:10px; }*/ /*[data-subarea="mypage"] .mypage_top .member p { font-size:1.067rem; }*/ /*[data-subarea="mypage"] .mypage_top .link_box { border-radius:8px; padding:.75em }*/ /*[data-subarea="mypage"] .mypage_top .link_box svg { width:30px; height:30px; right:.85em; bottom:1em; }*/ /*[data-subarea="mypage"] .mypage_top .link_box dt,*/ [data-subarea="mypage"] .mypage_top .link_box dd span { font-size:.9rem; } /*[data-subarea="mypage"] .mypage_top .link_box dd strong { font-size:1.6rem; }*/ /*[data-subarea="mypage"] .mypage_top .link_box dd { margin-top:.75em; }*/ /*[data-subarea="mypage"] .mypage_tab .list>li { width:100%; }*/ /*[data-subarea="mypage"] .value { font-size:.8rem; }*/ } @media all and (max-width:368px){ /*[data-subarea="mypage"] .mypage_list>li { padding:15px 10px; }*/ /*[data-subarea="mypage"] .mypage_list .app_date { right:10px; top:15px; }*/ /*[data-subarea="mypage"] .mypage_list>li { font-size:.92rem; }*/ /*[data-subarea="mypage"] .mypage_list>li>dl { gap:3px 10px; }*/ [data-subarea="mypage"] .mypage-reservation-search_wrap .refresh_btn { position:initial; margin-bottom:10px; } }