@charset "utf-8"; /*** 수정일 : 2025년 11월 24일 (작성일 : 2025년 11월 24일) ***/ .inner{position:relative; margin:0 auto; padding:0 40px; width:1680px; } .inner:after{display:block; content:''; clear:both;} @media all and (max-width:1680px){ .inner{padding:0 40px; width:100%; } } @media all and (max-width:1024px){ .inner{padding:0 30px;} } @media all and (max-width:480px){ .inner{padding:0 20px;} #container{ margin:0 auto 150px auto; width:100%;} } .clr:after{display:block; content:''; clear:both;} img{max-width:100%; } /** TOP */ #header-top{display:flex; padding: 8px 0; width:100%; background:#f9f9f9;} #header-top .inner{display:flex; align-items:center; } #header-top .nuri-txt{display:flex; position:relative; align-items:center; gap:8px; font-size: 1.5rem;} #header{background:#fff;} #header .top .linkLang{display:flex; align-items:center; justify-content:flex-end; gap:8px 32px; padding:12px 0; font-size: 1.5rem;} #header .top .linkLang a{position:relative; display:inline-flex; align-items:center; gap:4px; text-decoration:none;} #header .top .linkLang a::after{position:absolute; content:''; width:1px; height:16px; background:#D8D8D8; right:-16px; top:50%; transform:translateY(-50%);} #header .top .linkLang a .material-outlined{font-size:16px;} #header .top .linkLang li{display:inline-flex; align-items:center;} #header .top .linkLang li:last-child a::after{display:none;} #header .top .linkLang .topWeather{display:inline-flex; flex-direction:row; align-items:center; gap:4px;} #header .top .linkLang .topWeather .wTemp{font-weight: 600; font-size: 1.7rem;} #header .top .util{display:flex; align-items:center; justify-content:space-between; padding:4px 0 16px 0;} #header .top .util .home{height:48px; } #header .top .util .home img{height:100%;} #header .top .util .logList{display:flex; align-items:center; justify-content:flex-end; gap:8px;} #header .top .util .logList .srh, #header .top .util .logList a{position:relative; display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; gap:8px; font-size: 1.7rem; font-weight: 600; border-radius:4px; transition:.3s; text-decoration:none;} #header .top .util .logList > li{position:relative;} #header .top .util .logList .myMenu{z-index:6; display:flex; display:none; position:absolute; top:48px; right:0; padding:24px 8px 0px 8px; flex-direction:column; width:max-content; min-width:200px; max-width:300px; border:1px solid #dbdbdb; background:#fff; border-radius:8px; box-shadow:0 0 7px rgba(0,0,0,0.1);} #header .top .util .logList .myMenu .txtBox{display:flex; flex-direction:column; gap:16px; padding:0 8px 16px 8px;} #header .top .util .logList .myMenu .name{display:inline-flex; gap:4px; align-items:flex-end; font-size: 1.5rem; } #header .top .util .logList .myMenu .name b{font-size: 1.9rem; font-weight:600; color:var(--color-main);} #header .top .util .logList .myMenu .pBox{display:flex; flex-direction:column; gap:8px; } #header .top .util .logList .myMenu .lastLog{font-size: 1.3rem; color:#666; line-height:1.5;} #header .top .util .logList .myMenu .info{font-size: 1.3rem; line-height:1.5; color:#666; } #header .top .util .logList .myMenu .clickComp{display:flex; flex-direction:column; padding:8px 0; border-top:1px dashed #dbdbdb;} #header .top .util .logList .myMenu .clickComp a{display:flex; align-items:center; justify-content:flex-start; padding:8px 16px; font-size: 1.7rem; font-weight:400; } #header .top .util .logList .myMenu .clickComp a.em{background:#f5f5f5;} #header .top .util .logList .myMenu .clickComp a i{font-size:1.6rem;} #header .top .util .logList .myMenu .logoutBtn{padding:16px 0; border-radius:0; font-weight:400; border-top:1px solid #dbdbdb; font-size: 1.7rem; width:100%;} #header .top .util .logList .myMenu .logoutBtn:hover{background:#fff;} #header .top .util .logList .myMenu .logoutBtn i{font-size:1.6rem;} #header .top .util .logList .srh:hover, #header .top .util .logList a:hover{background:#f9f9f9;} #header .top .util .logList .mob{display:none;} @media all and (max-width:1024px){ #header .top .util .logList .web{display:none !important;} #header .top .util .logList .mob{display:inline-block;} #header .top{border-bottom:1px solid #dbdbdb;} } @media all and (max-width:768px){ #header .inner{padding:0 20px;} #header .top .linkLang li.web{display:none !important;} #header .top .util{padding:4px 0;} #header .top .util .home{width:120px;} #header .top .util .home.bio{width:200px;} #header .top .util .logList{gap:0;} #header .top .util .logList .srh, #header .top .util .logList a{flex-direction:column; font-size: 1.5rem; gap:8px;} #header .top .util .logList .myMenu{top:64px; } #header .top .util .logList .myMenu{padding:16px 8px 0 8px;} #header .top .util .logList .myMenu .name b{font-size: 1.7rem;} #header .top .util .logList .myMenu .txtBox{gap:8px; padding:0 8px 8px 8px;} #header .top .util .logList .myMenu .clickComp a{padding:8px 12px; align-items:flex-start; font-size: 1.5rem;} #header .top .util .logList .myMenu .logoutBtn{flex-direction:row; padding:10px 0; font-size: 1.5rem;} #header .top .linkLang{padding:8px 0 0 0;} #header .top .linkLang .topWeather{display:none;} } @media all and (max-width:480px){ #header-top .nuri-txt{font-size: 1.3rem;} #header .top .util .home.bio{width:150px;} #header .top .util .logList .srh, #header .top .util .logList a{padding:8px 4px; font-size: 1.3rem; font-weight:400;} } /** GNB */ #gnb{position:relative; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;} #gnb .gnbMenu{display:flex; gap:16px;} #gnb .gnbMenu .depWrap1{display:inline-flex; flex-direction:column; align-items:center;} #gnb .gnbMenu .rsvBtnW{display:inline-flex; align-items:center; height:62px; margin-left:auto; } #gnb .gnbMenu .rsvBtnW a{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 24px; border-radius:100px; font-weight: 600; color:#fff; background:linear-gradient(90deg, var(--color-main), var(--color-sub)); text-shadow:1px 1px 0 rgba(0,0,0,0.5) ; text-decoration:none; transition:.3s;} #gnb .gnbMenu .rsvBtnW a:hover{box-shadow:2px 3px 7px rgba(0,0,0,0.2);} #gnb .depth1{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; height:62px; font-weight:600; color:#555; font-size:1.9rem;} #gnb .depth1:hover{text-decoration: none;} #gnb .depth1 i{color:#555;} #gnb .depth1.on{padding-top:4px; color:var(--color-main); border-bottom:4px solid var(--color-main);} #gnb .depth1.on i{color:var(--color-main); transform:rotate(180deg);} #gnb .gnbMenu .gnbBox{display:none; z-index:2; position:absolute; left:0; top:62px; width:100%; align-items: stretch;} #gnb .gnbMenu .gnbBox.on{display:flex;} #gnb .gnbMenu .gnbBox::before{z-index:-1; position:absolute; display:block; content:''; left:50%; transform:translateX(-50%); top:0; width:100vw; height:100%; background:#fff; box-shadow:0 15px 15px rgba(0,0,0,0.1); border-top:1px solid #ccc;} #gnb .gnbMenu .gnbBox::after{position:absolute; content:''; left:-50%; top:0; width:100%; height:100%; background:#f5f5f5; z-index:-1; border-top:1px solid #ccc;} #gnb .gnbMenu .gnbBox .titDep1{display:inline-flex; flex-direction:column; gap:16px; padding:24px; font-size:2.5rem; font-weight:600; min-width:280px; height:-webkit-fill-available; background:#f5f5f5; border-top:1px solid #ccc;} #gnb .gnbMenu .gnbBox .titDep1 .go{display:inline-flex; align-items:center; gap:4px; font-size:1.5rem; font-weight:400; text-decoration: none;} #gnb .listBox{position:relative; display:flex; flex-direction:column; padding:24px; width:100%; max-height:80vh; height:auto; background:#fff; border-top:1px solid #ccc; overflow-y:auto;} #gnb .listBox > li{display:inline-flex; flex-direction:column; gap:0; justify-content:flex-start;} #gnb .listBox > li .depth2{display:inline-flex; align-items:center; justify-content:space-between; margin:0; padding:16px; border-radius:8px; max-width:250px; text-decoration: none;} #gnb .listBox > li .depth2.on{color:var(--color-main); background:#f5f5f5; font-weight:500;} #gnb .listBox > li .depth2 i{font-size:2.0rem;} #gnb .listBox > li .depth2.on i{color:var(--color-main);} #gnb .listBox > li .depWrap3{position:absolute; top:24px; left:300px; padding:0 24px; display:none; flex-direction:column; gap:8px; border-left:1px dashed #dbdbdb; height:calc(100% - 48px);} #gnb .listBox > li .depWrap3 .depth3{display:inline-flex; align-items:center; gap:8px; padding:8px; min-width:250px; border-radius:8px; text-decoration: none;} #gnb .listBox > li .depWrap3 .depth3:hover, #gnb .listBox > li .depWrap3 .depth3:focus{background:#f5f5f5;} #gnb .listBox > li .depWrap3 .depth3::before{content:''; display:block; width:4px; height:4px; background:#111; border-radius:100%;} #gnb .listBox > li .depWrap3.on{display:inline-flex;} #gnb .listBox > li .depWrap3 .depth3 i{font-size:1.9rem;} #gnb .listBox.onlyDep2{flex-direction:initial; flex-wrap:wrap; } #gnb .listBox.onlyDep2 > li{width:calc(100% / 4);} @media all and (max-width:1480px){ #gnb .gnbMenu .gnbBox .titDep1{font-size:2.1rem;} #gnb .depth1{padding:0 8px; font-size: 1.7rem;} #gnb .listBox > li .depth2{font-size: 1.5rem; max-width:200px;} #gnb .listBox > li .depWrap3{left:250px;} #gnb .listBox > li .depWrap3 .depth3{font-size:1.5rem;} } @media all and (max-width:1024px){ #gnb{display:none;} } /** 전체메뉴*/ #allmenu{display:flex; display:none; position:fixed; right:0; top:0; z-index:102; flex-direction:column; height:100vh; overflow-y:hidden; background:#fff; } #allmenu .topUtil{display:flex; flex-direction:column; gap:16px; padding:20px 24px; border-bottom:1px solid #dbdbdb;} #allmenu .topUtil a{width:fit-content;} #allmenu .topUtil .mobEng{display:inline-flex; gap:8px; font-size: 1.5rem; } #allmenu .topUtil .mobJoin{display:inline-flex; align-items:center; gap:8px; padding:10px 0; font-size: 1.7rem; font-weight:600; text-decoration: none;} #allmenu .topUtil .mobJoin b{font-weight:600; color:var(--color-main);} #allmenu .topUtil .cartnmy{display:flex; border:1px solid #dbdbdb; border-radius:4px; align-items:center; } #allmenu .topUtil .cartnmy li{width:100%;} #allmenu .topUtil .cartnmy li a{display:inline-flex; align-items:center; justify-content:center; padding:8px; width:100%; font-size: 1.3rem !important;} #allmenu .topUtil .cartnmy li:not(:last-child) a{border-right:1px solid #dbdbdb;} #allmenu .topUtil .bellList{display:flex; align-items:center; justify-content:center; gap:0; border-radius:4px; overflow:hidden;} #allmenu .topUtil .bellList a{display:inline-flex; padding:8px 4px; flex-direction:column; align-items:center; justify-content:center; font-size: 1.3rem !important; color:#fff; width:100%; text-align:center; line-height:1.5;} #allmenu .topUtil .bellList a span{font-size: 1.3rem !important; white-space:nowrap;} #allmenu .topUtil .bellList li{width:100%;} #allmenu .topUtil .bellList .listReviewCount a{background:var(--color-log1);} #allmenu .topUtil .bellList .listMabikReviewCount a{background:var(--color-log2);} #allmenu .topUtil .bellList .listApproveCount a{background:var(--color-log4);} #allmenu .topUtil .bellList #noticeCartCnt{background:var(--color-log1); color:#fff;} #allmenu .topUtil .bellList #noticeCartCnt i{color:#fff;} #allmenu .mobGnbCont{display:flex; height:100%;} #allmenu .mGnb{display:flex; flex-direction:column; gap:0; width:140px; height:100%; background:#f9f9f9; border-right:1px solid #dbdbdb;} #allmenu .mGnb > li a{display:flex; align-items:center; padding:18px 24px; font-size: 1.7rem; font-weight:600; } #allmenu .mGnb > li a.on{background:#fff; color:var(--color-main);} #allmenu .mSnb{position:relative; padding:16px; padding-bottom:200px; width:250px; height:100%; overflow-y:auto;} #allmenu .mSnb .dep02{display:none; width:100%;} #allmenu .mSnb .dep02.on{display:block;} #allmenu .mSnb li.mobDepTit{display:flex; align-items:center; height:64px; font-weight:600; border-bottom:1px solid #dbdbdb; font-size: 1.7rem;} #allmenu .mSnb .dep02 > li > a, #allmenu .mSnb .dep02 > li > button{display:flex; justify-content:space-between; align-items:center; padding:16px 8px; width:100%; text-align:left; font-size: 1.7rem; border-radius:8px; word-break:break-all;} #allmenu .mSnb .dep02 > li > a i, #allmenu .mSnb .dep02 > li > button i{font-size: 2.0rem;} #allmenu .mSnb .dep02 > li > a:hover, #allmenu .mSnb .dep02 > li > button:hover{background:#f9f9f9; text-decoration:none;} #allmenu .mSnb .dep02 > li:first-child{margin-bottom:8px;} #allmenu .mSnb .dep02 > li > button.on{background:#f9f9f9; font-weight:600; color:var(--color-main);} #allmenu .mSnb .dep02 > li > button.on span{transform:rotate(180deg);} #allmenu .mSnb .dep03{display:none; padding:10px; width:100%;} #allmenu .mSnb .dep03 > li > a{position:relative; display:inline-flex; align-items:center; gap:4px; padding:14px 16px; width:100%;} #allmenu .mSnb .dep03 > li > a::before{position:absolute; content:''; width:3px; height:3px; background:#111; border-radius:100%; left:4px; top:25px;} #allmenu .mSnb .dep03 > li > a i{font-size: 1.7rem;} #allmenu .linkUtil{position:absolute; right:0; bottom:0; width:calc(100% - 140px); display:flex; flex-direction:column; border-top:1px solid #dbdbdb; background:#fff;} #allmenu .linkUtil a{display:flex; align-items:center; gap:4px; padding:16px; font-size: 1.5rem; text-decoration: none;} #allmenu .linkUtil a i{font-size:1.6rem;} #allmenu .close{position:absolute; right:10px; top:10px; width:50px; height:50px; background:url(../img/common/xb.svg) no-repeat 50% 50%; text-indent:-9999px; font-size: 0; color:transparent;} @media all and (max-width:480px){ #allmenu *{font-size: 1.5rem !important;} #allmenu .mGnb{width:130px;} #allmenu .mGnb > li a{padding:24px 16px;} #allmenu .mSnb{width:190px;} #allmenu .linkUtil{width:calc(100% - 130px);} #allmenu .mSnb .dep03{padding:0;} } /** footer*/ #footer{display:flex; flex-direction:column; gap:0; background:#0F0F10; color:#fff;} #footer .fQuick{border-top:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2); background:#fff;} #footer .fQuick .inner{display:flex; align-items:center; gap:0; } #footer .fQuick .inner .link{display:inline-flex; align-items:center; justify-content:space-between; padding:0 24px; gap:8px; border-right:1px solid rgba(255,255,255,0.2); width:100%; height:56px; } #footer .fQuick .inner .link i{transition:transform .3s;} #footer .fQuick .inner .link:first-child{border-left:1px solid rgba(255,255,255,0.2);} #footer .fQuick .inner .link:hover i{transform:rotate(90deg);} #footer .fBody{padding:40px 40px 24px 40px; display:flex; flex-direction:column; gap:24px;} #footer .fBody::after{display: none;} #footer .fBody .fCnt{display:flex; align-items: flex-start; justify-content: space-between;} #footer .fBody .fCnt .fInfo{display:inline-flex; flex-direction:column; gap:16px; } #footer .fBody .fCnt .fInfo .infoCs{display:inline-flex; flex-direction: row; gap:8px 24px; flex-wrap:wrap;} #footer .fBody .fCnt .fInfo .infoCs > li{display:inline-flex; align-items:flex-start; gap:8px;} #footer .fBody .fCnt .fInfo .infoCs .strong{font-weight:600; } #footer .fBody .fCnt .fLink{display:flex; flex-direction:column; gap:24px; justify-content:flex-end; } #footer .fBody .fCnt .fLink .linkGo{display:inline-flex; flex-direction:column; gap:4px; } #footer .fBody .fCnt .fLink .linkGo > a{display:inline-flex; justify-content:space-between; gap:4px; min-width:130px; text-decoration:none; color:#fff;} #footer .fBody .fCnt .fLink .linkSns{display:inline-flex; align-items:center; gap:8px;} #footer .fBody .fCnt .fLink .linkSns > a{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:rgba(255,255,255,0.6); border-radius:100%; border:1px solid rgba(255,255,255,0.2); transition:.3s;} #footer .fBody .fCnt .fLink .linkSns > a:hover{background:#fff; box-shadow:2px 2px 5px rgba(0,0,0,0.1);} #footer .fBtm{display:flex; flex-direction:column; gap:40px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.2); font-size:1.5rem;} #footer .fBtm .fBtmText{display:inline-flex; flex-direction:row; justify-content:space-between; flex-wrap:wrap; gap:2px; } #footer .fBtm .fBtmText .fMenu{display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px 16px;} #footer .fBtm .fBtmText .fMenu a{color:#fff;} #footer .fBtm .fBtmText .copyright{color:#676767;} #footer .fBtmBan{display:flex; align-items:center; gap:8px; padding:0 16px; background:rgba(255,255,255,0.1); min-height:40px; border-radius:4px;} #footer .fBtm .fBtmText .fMenu .point{color:var(--color-point); font-weight:600;} @media all and (max-width:768px){ #footer .fBody{padding:32px 16px;} #footer .fBody .fLogo img{height:32px;} #footer .fQuick .inner{flex-direction:column; padding:0;} #footer .fQuick .inner .link{height:48px; font-size:1.5rem; border-right:0; border-bottom:1px solid rgba(255,255,255,0.2);} #footer .fQuick .inner .link:first-child{border-left:0;} #footer .fQuick .inner .link:last-child{border-bottom:0;} #footer .fQuick .inner .link i{font-size:20px;} #footer .fBody .fCnt{flex-direction:column; gap:32px; font-size:1.5rem;} #footer .fBody .fCnt .fLink .linkGo{gap:16px;} #footer .fBody .fCnt .fLink .linkGo > a{justify-content:flex-start; font-size:1.5rem; height:auto; } #footer .fBody .fCnt .fLink .linkGo > a i{font-size:1.9rem;} } @media all and (max-width:480px){ #footer .fBody .fCnt .fInfo .infoCs{flex-direction:column;} #footer .fBody .fCnt .fInfo .infoCs > li{flex-direction:column; gap:0 8px;} } /** 통합검색*/ #srh{z-index:5; display:flex; display:none; position:absolute; align-items:center; justify-content:center; width:100%; background:#DEE2E8;} #srh .inner{position:relative; display:flex; justify-content:center; padding-top:80px; padding-bottom:80px;} #srh .area{display:flex; flex-direction:column; gap:16px;} #srh .area label{font-size: 2.5rem; font-weight:600;} #srh .area .srhInp{display:inline-block; position:relative; padding-right:80px; width:840px; height:80px; background:#fff; border-radius:8px; border:1px solid #717171;} #srh .area .srhInp #comSrh{display:inline-block; padding-left:24px; width:100%; height:100%; border:0; font-size: 2.5rem; background:transparent;} #srh .area .srhInp .srhBtn{position:absolute; right:24px; top:50%; transform:translateY(-50%); width:40px; height:40px;} #srh .area .srhInp .srhBtn .material-outlined{font-size:40px;} #srh .close{position:absolute; right:0; top:24px; width:48px; height:48px; background:url(../images/icon/xb.svg) no-repeat 50% 50%; background-size:contain; } #srh .close i{font-size:40px;} @media all and (max-width:1024px){ #srh .area .srhInp{width:670px; height:70px;} } @media all and (max-width:768px){ #srh .area{width:100%;} #srh .area label{font-size: 2.1rem;} #srh .area .srhInp{padding-right:60px;width:100%; height:60px;} #srh .area .srhInp #comSrh{font-size: 2.1rem;} #srh .inner{padding-top:50px; padding-bottom:50px;} #srh .close{right:8px; top:8px; width:40px; height:40px;} #srh .area .srhInp .srhBtn{right:16px; width:32px; height:32px;} } @media all and (max-width:480px){ #srh .area .srhInp #comSrh{font-size: 1.7rem;} } /*? 예약쪽 전용 검색 */ #rsvSrh{padding:40px; background:#f5f5f5; border-radius:24px; margin-bottom:40px;} #rsvSrh .srhTop{display:flex; flex-wrap: wrap; gap:8px 40px;} #rsvSrh .srhTop > li{display:flex; align-items:center; gap:8px; } #rsvSrh .srhTop > li:not(.wd100){width:calc(100% / 2 - 20px);} #rsvSrh .srhTop > li > *:not(.tit){flex:1;} #rsvSrh .srhTop > li .tit{min-width:60px; font-weight: 500;} #rsvSrh .srhTop .dateWrap{display:flex; gap:8px; align-items:center;} #rsvSrh .srhTop .dateWrap label{flex:1; width:calc(100% / 2 - 18px);} #rsvSrh .srhTop .dateWrap label input{padding:0 12px; width:100%; border:1px solid #ccc; border-radius:8px;} #rsvSrh .srhTop .inputWrap{display:flex; align-items:center; gap:8px;} #rsvSrh .srhTop .inputWrap .srhArea{flex:1;} #rsvSrh .srhTop .inputWrap .srhArea input{width:100%;} @media all and (max-width:1024px){ #rsvSrh{padding:24px;} #rsvSrh .srhTop{gap:8px 16px;} #rsvSrh .srhTop > li:not(.wd100){width:calc(100% / 2 - 8px);} #rsvSrh .srhTop > li{flex-direction:column; gap:0; align-items:flex-start;} #rsvSrh .srhTop > li > *:not(.tit){width:100%; flex:auto;} } @media all and (max-width:768px){ #rsvSrh .srhTop{flex-direction:column; } #rsvSrh .srhTop > li:not(.wd100){width:100%;} } @media all and (max-width:425px){ #rsvSrh{padding:16px; border-radius:16px;} } /*? 서브 레이아웃 */ .container{position:relative; display:flex; flex-direction:column; padding:60px 0 0 60px; padding-bottom:80px; min-height:80vh; background:#fff; border-radius:80px 0 0 0; z-index: 1;} .container::before{position:absolute; content:''; right:0; top:0; transform:translateX(100px); width:100px; height:100%; background:linear-gradient(90deg, #fff 10%, transparent); z-index: -1;} .divCont{position:relative; display:flex; flex-direction:row; gap:40px; padding-top:40px; margin-bottom:80px;} .divCont::before{position:absolute; content:''; left:50%; top:0; transform:translateX(-50%); width:100vw; height:50vh; background:url(../img/common/subBg.svg) no-repeat 50% 0, linear-gradient(var(--color-gray-5), #fff); background-size:contain; z-index: -1;} .divCont::after{display:none;} .divCont .inner::after{display:none;} .divCont .inner{padding:0 !important; width:auto !important;} .divCont .rightArea{width:calc(100% - 360px); flex:1;} /**snb*/ #snb{display:flex; flex-direction:column; gap:16px; position:relative; padding-top:24px; width:320px; height:fit-content;} #snb .snbTit{display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; height:180px; border-radius:30px 70px; background:linear-gradient(135deg, var(--color-sub2) 10%, var(--color-main) 60%, var(--color-sub)); box-shadow:5px 5px 1px rgba(2,158,211,0.2); color:#fff; font-size:3.2rem; font-weight:600; font-family: var(--style-font); text-shadow:2px 2px rgba(0,0,0,0.1);} #snb .snbTit::before{position:absolute; content:''; left:-40px; top:-65px; width:240px; height:160px; background:url(../img/common/snbTitBg.svg) no-repeat 50% 50%; background-size:contain;} #snb .snbTit .stxt{display:inline-flex; justify-content:space-between; align-items:center; gap:8px; font-weight: 400; font-size:1.3rem; text-align:justify; opacity:.3; } #snb .list{display:flex; flex-direction:column; gap:8px;} #snb .list .dep02 > .txt{display:inline-flex; align-items:center; justify-content:space-between; padding:16px 24px; width:100%; border:1px solid #dbdbdb; border-radius:12px; font-size:1.9rem; text-decoration:none; background:#fff;} #snb .list .dep02 > .txt.on{ color:var(--color-main); font-weight:600; border-radius:12px 12px 0 0; padding:14px 22px; border:3px solid var(--color-main);} #snb .list .dep02 > .txt.on .material-outlined{transform:rotate(270deg);} #snb .dep03{display:none; flex-direction:column; padding:16px 24px; border-radius:0 0 12px 12px;} #snb .dep03.on{display:flex; border:1px solid #e5e5e5;} #snb .list .dep02:last-child .dep03{border-bottom:0;} #snb .dep03 > li > a{position:relative; display:inline-flex; align-items:center; justify-content:space-between; padding:16px 8px 16px 24px; border-radius:8px; width:100%; } #snb .dep03 > li > a.on{font-weight:600; background:#f5f5f5;} #snb .dep03 > li > a::before{position:absolute; content:''; left:8px; top:26px; border-radius:100%; height:6px; width:6px; background:var(--color-sub2);} #snb .dep03 > li > a:hover{color:#111; font-weight:600; text-decoration: none;} #snb .dep03 > li > a i{color:#999; width:18px; height:18px; font-size:18px;} #snb .dep03 > li:last-child > a{border-bottom:0;} #snb .dep04{display:none; flex-direction:column; gap:8px; padding:12px 16px; background:#f9f9f9; border-radius:8px; font-size:1.4rem;} #snb .dep04.on{display:flex;} #snb .dep04 > li > a{display:inline-flex; align-items:center; width:100%;} #snb .dep04 > li > a:hover{text-decoration: underline; color:var(--color-main)} @media all and (max-width:1440px){ .divCont::before{width:100%;} .container{padding:0; padding-top:40px; border-radius:0; background:transparent;} #snb{width:240px;} .divCont{gap:60px;} .divCont .rightArea{width:calc(100% - 300px);} .container::before{display: none;} #snb .snbTit{font-size:2.5rem; height:150px; border-radius:24px 60px;} } @media all and (max-width:1280px){ #snb{display:none;} .flex #conArea{width:100%;} } @media all and (max-width:768px){ .container{padding-top:16px;} } /*?팝업 기본*/ .pop{display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:16px; background:#fff; box-shadow:0 0 30px rgba(0,0,0,0.3); z-index: 51; min-width:280px; max-width:calc(100% - 80px);} .pop .popTop{padding:16px 24px; padding-right:56px; border-bottom:1px solid #dbdbdb;} .pop .popTop .tit{font-size:1.9rem; font-weight:600; font-family: var(--style-font);} .pop .popBody{padding:24px; max-height:70vh; max-width:700px; overflow-y:auto;} .pop .popBody .stxt{text-align:center; font-size: 1.5rem;} .pop .popBody .txt{font-size:1.5rem;} .pop .popBody .center{text-align:center;} .pop .popBody .txtBox{display:flex; flex-direction:column; gap:8px; width:100%; border-radius:8px; padding:16px; background:#f5f5f5; margin:0 auto; border:0; max-width:500px;} .pop .btnW{margin:24px auto; padding:0 24px;} .pop .x{position:absolute; right:16px; top:8px; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;} @media all and (max-width:1024px){ .pop{max-width:calc(100% - 64px);} } @media all and (max-width:425px){ .pop{width:calc(100% - 32px); max-width:none;} .pop .popTop{padding:16px; } .pop .popTop .tit{font-size: 1.7rem;} .pop .popBody{padding:16px;} .pop .btnW{padding:0 16px;} .pop .x{right:8px;} } /*? 관항목*/ h4, .h4{position:relative; padding-left:32px; margin-top:40px; margin-bottom:8px; font-size:2.8rem; font-weight: 600; font-family: var(--style-font); color:var(--color-main);} h4::before, .h4::before{position:absolute; content:''; left:0; top:8px; width:24px; height:24px; background:url(../img/common/bullet.svg) no-repeat 50% 50%; background-size:contain;} h4:first-child, .h4:first-child{margin-top:0;} h5, .h5{margin-top:24px; font-size:2.1rem; font-weight: 600; font-family: var(--style-font);} h4 .normal, .h4 .normal, h5 .normal, .h5 .normal{font-size: 1.7rem; color:#111; font-family: 'Freesentation';} .paraList{display:flex; flex-direction:column; gap:12px; margin-top:8px; font-size: 1.9rem; text-align: left;} .paraList > li{position:relative; padding-left:16px; font-weight: 500;} .paraList > li::before{position:absolute; content:''; left:0; top:8px; width:12px; height:10px; background:url(../img/common/sbullet.svg) no-repeat 50% 50%; background-size:contain;} .paraList > li > ul{display:flex; flex-direction:column; gap:4px; margin-top:4px;} .paraList > li > ul > li{position:relative; padding-left:12px; font-weight: 400; font-size: 1.7rem; color:#111;} .paraList > li > ul > li::before{position:absolute; content:''; left:0; top:10px; width:4px; height:4px; background:#676767; border-radius:100%;} .paraList > li > ul > li > ul > li{position:relative; padding-left:10px; } .paraList > li > ul > li > ul > li::before{position:absolute; content:'-'; left:0; top:0;} .paraList > li > ul > li > ul > li > ul{display:inline-flex; flex-direction:column; gap:2px; color:#444; font-size: 1.5rem;} .listList{display:flex; flex-direction:column; gap:4px; margin-top:8px; font-size: 1.9rem; text-align: left;} .listList > li{position:relative; padding-left:16px; font-weight: 500;} .listList > li::before{position:absolute; content:''; left:0; top:8px; width:12px; height:10px; background:url(../img/common/sbullet.svg) no-repeat 50% 50%; background-size:contain;} .onlyList{position:relative; padding-left:16px; margin-top:8px; font-weight: 500; font-size: 1.9rem;} .onlyList::before{position:absolute; content:''; left:0; top:8px; width:12px; height:10px; background:url(../img/common/sbullet.svg) no-repeat 50% 50%; background-size:contain;} .numList{counter-reset:num; display:flex; flex-direction:column; gap:4px; margin-top:8px;} .numList > li{position:relative; padding-left:24px !important; } .numList > li::before{position:absolute; counter-increment: num !important; content:counter(num)". " !important; left:0 !important; top:0 !important; width:auto !important; height:auto !important; background:none !important; } .codeList{counter-reset:num; display:flex; flex-direction:column; gap:8px;} .codeList > li{position:relative; padding-left:24px !important; } .codeList > li::before{position:absolute; counter-increment: num !important; content:counter(num) !important; left:0 !important; top:4px !important; width:16px !important; height:16px !important; border-radius:50%; border:1px solid #111; display:flex; align-items:center; justify-content:center; font-size: 1.3rem; background:none !important; } .codeList .numList{margin-top:4px; color:#111;} .dotP{position:relative; padding-left:12px; } .dotP::before{position:absolute; content:''; left:0; top:10px; width:3px; height:3px; background:#111; border-radius:100%; } .tbl .listList, .tbl .paraList .tbl .onlyList{font-size: inherit;} .noList{padding-left:0 !important; } .noList::before{display:none !important;} @media all and (max-width:1440px){ h4, .h4{font-size: 2.5rem;} h4::before, .h4::before{top:6px;} } @media all and (max-width:1280px){ .paraList{gap:8px;} } @media all and (max-width:768px){ h4, .h4{padding-left:28px; font-size: 2.1rem;} h4::before, .h4::before{width:20px; height:20px; top:5px;} h5, .h5{margin-top:16px; font-size: 1.9rem;} .paraList, .listList, .onlyList{font-size: 1.7rem;} .paraList > li{font-weight: 600;} } @media all and (max-width:425px){ h4, .h4{padding-left:26px; margin-top:28px; font-size: 1.9rem;} h4::before, .h4::before{width:18px; height:18px; top:4px;} h5, .h5{margin-top:8px; font-size: 1.7rem;} .paraList, .listList, .onlyList{font-size: 1.5rem;} .paraList > li, .listList > li, .onlyList{padding-left:14px; font-weight: 500;} .paraList > li::before, .listList > li::before, .onlyList::before{width:10px; height:8px; top:6px;} .paraList > li > ul{margin-top:0;} .paraList > li > ul > li{padding-left:10px; font-size: 1.5rem;} .paraList > li > ul > li::before{top:9px; width:3px; height:3px;} .codeList > li{padding-left:20px !important;} .codeList > li::before{width:14px !important; height:14px !important; top:3px !important; font-size: 1.2rem !important;} .numList > li{padding-left:16px !important;} } /*? 서브타이틀*/ .subTit{display:flex; flex-direction:column; gap:24px; padding:24px 0 24px 60px;} .subTit .breadcrumb{display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 8px;} .subTit .breadcrumb a{display:inline-flex; align-items:center; gap:8px; font-size:1.5rem; color:#676767;} .subTit .breadcrumb a i{font-size:1.5rem; } .subTit .breadcrumb a::after{display:block; content:''; border-top:1px solid #111; border-right:1px solid #111; transform:rotate(45deg); width:8px; height:8px;} .subTit .breadcrumb > li:last-child a::after{display:none;} .subTit .breadcrumb a:hover{text-decoration: underline; color:#111;} .subTit .breadcrumb a.home{padding-top:5px; color:#111;} .subTit .breadcrumb a.home:hover{text-decoration: none;} .subTit .breadcrumb > li.ellipsis{display:none;} .subTitle{font-size:4.0rem; font-weight:600; font-family: var(--style-font);} @media all and (max-width:1440px){ .subTit{padding:24px 0;} .subTitle{font-size:3.2rem;} } @media all and (max-width:768px){ .subTit{padding:0 0 24px 0; gap:16px;} .subTit .breadcrumb > li:not(:first-child, :last-child){display:none;} .subTit .breadcrumb > li.ellipsis{display:inline-block;} .subTitle{font-size: 2.8rem;} } @media all and (max-width:425px){ .subTit{padding:0 0 16px 0;} .subTitle{font-size: 2.5rem;} } /*? 서브 검색창 */ .resultFilt{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; margin-bottom:24px;} .resultFilt .alignBase{display:inline-flex; align-items:center; flex-wrap:wrap; gap:24px;} .resultFilt .alignBase p:not(:first-child){position:relative;} .resultFilt .alignBase p:not(:first-child)::before{content:'|'; color:#ccc; position:absolute; left:-13px; top:50%; transform:translateY(-50%);} .resultFilt .alignBase .num{font-weight:600;} .resultFilt .alignBase .num.total{font-weight:400; color:#676767;} .resultFilt .alignBase .num.point{color:var(--color-main);} .resultFilt .alignBase .num.current{color:var(--color-sub);} .resultFilt .srhSort{display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px;} .resultFilt .srhSort select{min-width:100px; height:40px; border:1px solid #ccc; border-radius:4px;} .resultFilt .srhSort .inpWrap{display:inline-flex; align-items:center; border:1px solid #ccc; border-radius:4px; height:40px; overflow:hidden;} .resultFilt .srhSort .inpWrap .txtinp{height:100%;} .resultFilt .srhSort .inpWrap .txtinp input[type="text"]{width:220px; height:100%; border-radius:0; border:0; padding:0 8px; } .resultFilt .srhSort .inpWrap .search{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:var(--color-main); } .resultFilt .srhSort .inpWrap .search i{color:#fff;} @media all and (max-width:1280px){ .resultFilt .alignBase p{font-size:1.5rem;} .resultFilt .alignBase .num{font-size:1.5rem;} .resultFilt .srhSort .inpWrap .txtinp input[type="text"]{width:180px;} } @media all and (max-width:768px){ .resultFilt{align-items:flex-start; flex-direction:column-reverse; gap:16px;} } @media all and (max-width:425px){ .resultFilt .srhSort{width:100%; gap:8px 4px;} .resultFilt .srhSort select{height:40px; width:100%; line-height:40px; font-size:1.5rem;} .resultFilt .srhSort .inpWrap{height:40px; width:100%;} .resultFilt .srhSort .inpWrap .txtinp{width:100%;} .resultFilt .srhSort .inpWrap .txtinp input[type="text"]{font-size:1.5rem; width:100%;} .resultFilt .srhSort .inpWrap .txtinp input[type="text"]::placeholder{font-size:1.5rem;} .resultFilt .srhSort .inpWrap .search{background:none; width:40px; height:40px; } .resultFilt .srhSort .inpWrap .search i{color:var(--color-main);} } /*? 리스트-기본(테이블)*/ .board {margin-bottom:10px;border-collapse:separate; border-spacing:0; width:100%; border-top:2px solid #000;font-size:17px; color:#111;} .board thead th {background:#f9f9f9; padding: 16px 4px; font-weight:500; border-bottom:1px solid #676767;text-align: center;} .board thead th:first-child {border-left:0;} .board thead th:last-child{border-right:0;} .board tr {background:#fff} .board td {border-bottom:1px solid #ccc; padding:18px 10px 18px; text-align:center; word-break:keep-all;} .board td:first-child {border-left:0;} .board td:last-child {border-right:0;} .board td img{vertical-align:middle;max-height:100%;} .board .tit{text-align:left;color:#000;font-weight:bold;line-height:1.3; max-width:0;} .board .tit a{display:inline-block; width:100%; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align: middle;} .board .tit a:hover{color:var(--color-main);} .board .tit img{width:17px; height:17px; margin-right: 4px;} .board .file a{display:inline-block;vertical-align:top;line-height:0;} .bdR{border-right:1px solid #ccc !important;} .bdL{border-left:1px solid #ccc !important;} /**마이페이지 - 나의 예약내역*/ .rsv.board thead th, .rsv.board td{border-right:1px solid #ccc;} .rsv.board thead th:last-child, .rsv.board td:last-child{border-right:0;} /**이용안내*/ .tbl {margin-bottom:10px; border-spacing:0; width:100%; border-top:2px solid #000; font-size:17px; color:#111; background:#fff; font-weight: normal; table-layout:fixed;} .tbl thead th {background:#f5f5f5; padding: 16px 4px; font-weight:500; border-bottom:1px solid #676767;text-align: center; border-right:1px solid #ccc;} .tbl thead th:first-child {border-left:0;} .tbl thead th:last-child{border-right:0;} .tbl tbody th{background:#f5f5f5;} .tbl th, .tbl td {border:1px solid #ccc; padding:18px 10px 18px; word-break:break-all; text-align: center;} .tbl th:first-child, .tbl td:first-child {border-left:0;} .tbl td:last-child {border-right:0;} .tbl tfoot{background-color:#e9e9e9;} .tbl .left{text-align:left !important;} .tbl .right{text-align:right !important;} .tbl .center{text-align:center !important;} .tbl .bg_blue{background:#eaf4fc;} .tbl .bg_green{background:#f2ffe4;} @media all and (max-width:1024px){ .rsv.board{display:flex; border-top:0; } .rsv.board thead{display:none;} .rsv.board tbody{flex:1; display:flex; flex-wrap:wrap; gap:16px;} .rsv.board tr{display:flex; flex-direction:column; padding:16px; padding-bottom:42px; border-top:1px solid #ccc; border:1px solid #ccc; border-radius:16px; width:calc(50% - 8px);} .rsv.board tr .slash{display:none;} .rsv.board td{display:flex; flex-wrap:wrap; gap:0 8px; position:relative; padding:8px; padding-left:80px; text-align:left;border-right:0; border-bottom:0; font-size: 1.5rem;} .rsv.board td:before {position:absolute; left:0; top:9px; display:inline-block; content: attr(data-cell-header); min-width:88px; font-size:1.3rem; font-weight:600;} .rsv.board td .detBtn{position:absolute; top:8px; left:0; width:100%;} .board tr:has(.no_data){border:0; padding:0 !important; width:100%;} .board td.no_data{ padding:0 !important;} } @media screen and (max-width:768px) { .board, .board thead, .board tbody, .board th, .board td, .board tr {display:block;} .board tr{float:left;width:100%;box-sizing:border-box;} .board th, .board td{float:left;width:100%;height:auto;box-sizing:border-box;} .board thead tr {position: absolute; top: -9999px; left: -9999px;} .board tr {position:relative; border-bottom:1px solid #e4e7ec; border-top:none;padding:10px 0;} .board tr:first-child {border-top:none;} .board tr:nth-child(even) {background-color:#f7f7f7;} .board tbody td {position:relative; border:none; text-align:left;padding:2px 10px;} .board .num img{height:27px;} .board .tit {padding:0 10px; color:#000; text-align:left; font-weight: bold;} .board .tit a:hover{color:#1d2088 !important;} .board .tit a:link{color:#000;} .board .nodata{padding:0 10px;text-align:center;} .board .b_date{padding:3px 10px 0;} .board .b_hit, .board .b_file, .board .b_none {display:none} .board .tit{max-width:none;padding:5px 10px;} .board .tit {max-width:100%;} .board td {font-size:1.5rem;} .board td:not(.num, .tit):before {display:inline-block; content: attr(data-cell-header); min-width:70px; font-size:1.3rem; font-weight:600;} .board td.no_data:before{display:none;} .no_data{text-align:center !important;} .drop-zone{width:99%;} .board *:after{content:""; display:block; clear:both;} .rsv.board tr{width:100%;} .rsv.board tr:first-child{border-top:1px solid #ccc;} .rsv.board tr:nth-child(even){background:#fff;} .tbl{font-size: 1.5rem;} } @media all and (max-width:425px) { .board th, .board td{float:left ;clear:both; width:100%;box-sizing:border-box;} .rsv.board tr{padding:8px 16px; padding-bottom:42px; border-radius:12px;} .tbl td {font-size: 1.3rem;} .tbl th, .tbl td, .tbl thead th{padding:10px;} } /*? 테이블 감싸면 가로 스크롤 + 가로스크롤 안내 문구 추가 */ .tblFixed {overflow-x: auto; -webkit-overflow-scrolling: touch;} .tblFixed > .tbl{ min-width: 500px; width: 100%;} .infotxt.tblscr{display:none;} /*? 상세 */ .detThead{border-top:2px solid #111;} .detThead .tit{display:flex; align-items:flex-start; justify-content:center; gap:4px; padding:24px 16px; font-size: 2.1rem; font-weight:600; border-bottom:1px solid #676767; background:#f9f9f9;} .detThead .tit img{margin-top:6px;} .detThead .etc{display:flex; flex-wrap:wrap; border-bottom:1px solid #676767;} .detThead .etc li{position:relative; display:flex; align-items:stretch; border-bottom:1px solid #ccc; width:calc(100% / 3);} .detThead .etc li.wd00{width:100%;} .detThead .etc li .em{display:inline-flex; align-items:center; justify-content:center; padding:12px 8px; font-weight:600; text-align:center; background:#f7f8fb; flex:0 0 24%; min-width:100px; max-width:120px;} .detThead .etc li .txt{display:inline-flex; align-items:center; padding:12px 8px; flex:1; } .detThead .etc li:nth-child(odd):last-of-type{border-bottom:0;} .detFileDwn{border-bottom:1px solid #cccc; } .detFileDwn .box-group-area{display:flex; flex-direction: column;} .detFileDwn .box-group-area li{position:relative; flex-wrap:wrap; justify-content: space-between;padding:12px 8px; border-bottom:1px dashed #ccc; } .detFileDwn .box-group-area a{display:flex; align-items:center; gap:8px;} .detFileDwn .box-group-area a [class^="icon-"]{width:20px; height:20px;} .detFileDwn .list{display:flex; flex-direction:column; gap:4px; width:100%;} .detFileDwn .list li{display:inline-flex; align-items:center; gap:8px; width:100%;} .detFileDwn .list li .material-outlined{width:16px; height:16px; font-size: 16px; color:var(--color-main);} .detFileDwn .list li a{overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } .detFileDwn .list li .kb{font-size: 1.5rem; color:#666; } /** 드래그 앤 드롭 */ .fileUploadInput{display: none;} .dragNdrop{margin-bottom:16px; width:100%;} .dragNdrop a .material-outlined{color:var(--color-g6);} .dragNdrop .noti{display:inline-flex; flex-direction: column; justify-content:center; align-items:center; gap:8px; padding:32px; width:100%; background:#f9f9f9; border-radius: 8px; border:1px solid #111; text-align:center;} .dragNdrop .noti:hover, .dragNdrop .noti:focus{text-decoration: none;} .dragNdrop .noti .material-outlined{width:32px; font-size:32px;} .dragNdrop .dndList{display:flex; flex-direction: column; gap:8px; margin-top:16px;} .dragNdrop .dndList > li{display:inline-flex; flex-direction: row; align-items:center; gap:8px; padding:8px; padding-left:16px; width:100%; border:1px solid #ccc; border-radius: 8px; background:#fff;} .dragNdrop .dndList > li a{display:inline-block; width:100%; height:100%; word-break: break-all;} .dragNdrop .dndList > li .xbtn{display:flex; align-items:center; font-size:16px; color:var(--color-red); border-radius:100px; padding:2px 8px; cursor:pointer !important;} .dragNdrop .dndList > li .xbtn .material-outlined{font-size:18px;} .detTbody{padding:24px; min-height:400px; border-bottom:1px solid #ccc;} .detTbody *{font-family: 'NSN' !important; line-height:1.7 !important; letter-spacing: -.05em !important;} .detTbody img{display:block; margin:0 auto; max-width:100%;} .detTfoot{display:flex; border-bottom:1px solid #676767; min-height:150px;} .detTfoot .tit{display:inline-flex; align-items:center; justify-content:center; gap:4px; flex:0 0 140px; background:#f9f9f9; font-size:1.8rem; font-weight:600; } .detTfoot .tit .material-outlined{width:18px; height:18px; font-size:18px; color:var(--color-main);} .detTfoot .txtArea{display:inline-flex; justify-content:center; flex-direction:column; gap:24px; padding:24px; flex:1; } .detTfoot .txtArea .etc{display:inline-flex; align-items:center; gap:24px;} .detTfoot .txtArea .etc li{position:relative; font-size:1.5rem; color:#666;} .detTfoot .txtArea .etc li:not(:last-of-type)::before{position:absolute; content:''; right:-14px; top:50%; transform:translateY(-50%); width:2px; height:2px; border-radius:100%; background:#676767; } .detPrevNext > div{display:flex;align-items:center;gap:10px;padding:13px 0;height:56px;border-bottom:1px solid #dbdde3;} .detPrevNext > div:last-child{border-bottom:1px solid #676767;} .detPrevNext > div span{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:150px; padding:0 4px; font-weight:600; text-align:center;box-sizing:border-box; flex:0 0 150px; } .detPrevNext > div.prev .material-outlined{transform:rotateY(180deg);} .detPrevNext > div a{flex:1 1 auto; min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#333;} @media all and (max-width:1024px){ .detThead .etc li .em, .detFileDwn .list li a{font-size:1.5rem;} } @media all and (max-width:768px){ .detThead .etc{flex-direction:column;} .detThead .etc li{width:100%;} .detTbody{padding:24px;} .detTfoot{flex-direction:column; min-height:auto;} .detTfoot .tit{flex:none; padding:16px 8px; font-size:1.5rem; } .detTfoot .txtArea{padding:24px;} .detPrevNext > div span{width:auto; padding:0 16px; flex:none;} .detPrevNext > div span .micon{display:none;} .detPrevNext > div a{width:auto; flex:1; } } @media all and (max-width:425px){ .detThead .tit{font-size:1.9rem;} .detTbody, .detTfoot .txtArea{padding:16px;} .detPrevNext > div span{padding:0 8px;} .detPrevNext > div .material-outlined{display:none;} } /*? 게시글 작성*/ .wrtArea{display:flex; flex-direction:column; gap:24px; padding-bottom:40px; border-bottom:1px solid #ccc;} .wrtArea .list{display:flex; flex-direction:column; gap:4px;} .wrtArea .list .tit{font-family: var(--style-font); font-weight: 600; } .wrtArea .list .tit .ess{color:var(--color-point);} .wrtArea .listBlock{padding:16px; background:var(--color-main-90); color:#fff; } .wrtArea .list .addForm{display:flex; flex-direction:column; gap:4px;} .rsvDiv .wrtArea .list .dragNdrop .noti{background:#fff;} /*! 라벨 */ .label{display:inline-flex; align-items:center; justify-content:center; border-radius:100px; min-width:80px; padding:4px 16px; font-size:1.5rem; font-weight: 500; background:#fff; border:1px solid #ccc;} .label.ing{color:var(--color-blue); border:1px solid var(--color-blue); background-color:var(--color-blue); color:#fff; } .label.end{color:#676767; border:1px solid #dbdbdb; background-color:#e7e7e7; } .label.wait{color:var(--color-green); border:1px solid var(--color-green);background-color:var(--color-green); color:#fff; } @media all and (max-width:768px){ .label{font-size: 1.5rem;} } @media all and (max-width:425px){ .label{font-size: 1.3rem;} } /*? 앨범형 리스트 */ .album{display:flex; flex-wrap:wrap; gap:40px;} .album > li{width:calc(100% / 3 - 27px);} .album > li a{display:inline-block; width:100%; height:100%; text-decoration: none; border-radius:30px; transition:.3s;} .album > li .imgW{position:relative; padding-top:70%; overflow:hidden; border-radius:30px; border:1px solid #ccc; transition:.3s; } .album > li .imgW img{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; object-fit: cover; transition:.3s;} .album > li .tit{margin-top:16px; font-size:2.1rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; width:100%; overflow:hidden; transition:.3s;} .album > li .txt{display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:#676767; margin-top:8px; transition:.3s;} .album > li a:hover img{transform:translate(-50%, -50%) scale(1.1);} @media all and (max-width:1024px){ .album{gap:40px 24px;} .album > li{width:calc(100% / 3 - 16px);} .album > li .imgW{border-radius:24px;} .album > li .tit{font-size: 1.7rem;} } @media all and (max-width:768px){ .album{gap:24px 16px;} .album > li{width:calc(100% / 2 - 8px);} .album > li .imgW{border-radius:16px;} .album > li .tit{margin-top:8px;} .album > li .txt{font-size: 1.5rem;} } @media all and (max-width:425px){ .album > li{width:100%;} } /*? 블로그형 리스트*/ .blog{display:flex; gap:24px; flex-wrap:wrap; } .blog > li{position:relative; width:calc(100%/2 - 12px);} .blog > li a{position:relative; display:inline-flex; flex-direction:column; padding:24px; padding-top:64px; width:100%; height:100%; border-radius:16px; border:1px solid #ccc; overflow:hidden; text-decoration:none; transition:.3s;} .blog > li a .label{position:absolute; left:24px; top:24px; } .blog.reserv > li a{padding-top:64px;} .blog > li a .txtW{display:flex; flex-direction:column; gap:12px; transition:.3s;} .blog > li a .txtW .tit{font-size:2.1rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;} .blog > li a .etc{display:flex; flex-direction:column; align-items:flex-start; gap:4px;} .blog > li a .etc .em{transform:translateY(1px); min-width:80px; color:#676767; font-size: 1.7rem;} .blog > li a .etc .em.emExp{min-width:88px;} .blog > li a .etc li{position:relative; padding-left:12px; display:inline-flex; gap:8px; font-size: 1.9rem;} .blog > li a .etc li::before{position:absolute; content:''; left:0; top:12px; width:4px; height:4px; background:#ccc; border-radius:100%;} .blog > li a:hover, .blog > li a:focus{border:1px solid var(--color-main); box-shadow:0 0 5px rgba(29, 32, 136, 0.2);} .blog > li a:hover .txtW .tit, .blog > li a:focus .txtW .tit{color:var(--color-main);} .blog > li .favorite{display:inline-flex; align-items:center; justify-content:center; position:absolute; right:24px; top:24px; width:24px; height:24px; background:#fff; border-radius:100%; border:1px solid #dbdbdb;} @media all and (max-width:768px){ .blog{gap:16px;} .blog > li{width:100%;} .blog > li a .etc li{font-size: 1.7rem;} .blog > li a .etc .em{min-width:70px; font-size: 1.5rem;} .blog > li a .etc li::before{top:10px;} .blog > li a .txtW .tit{white-space: inherit;} } @media all and (max-width:425px){ .blog > li{width:100%;} .blog > li a{padding:16px; padding-top:56px;} .blog > li a .txtW{gap:8px;} .blog > li a .txtW .tit{font-size: 1.9rem;} .blog > li a .label{left:16px; top:16px;} .blog > li a .etc li{font-size: inherit; flex-direction:column; gap:0;} .blog > li a .etc li::before{top:9px;} } /*? 강좌예약 리스트 */ .listRsv{display:flex; flex-direction:column; gap:0;} .listRsv .due{min-width:400px;} .listRsv .thead{display:flex; align-items:center; padding:16px 24px; border-top:2px solid #111; border-bottom:1px solid #676767; background:#f9f9f9; } .listRsv .thead li{flex:1; text-align: center; font-weight: 500;} .listRsv .list{display:flex; flex-direction:column; } .listRsv .list a{position:relative; display:flex; align-items:stretch; padding:8px 24px; border-bottom:1px solid #ccc; text-align: center; min-height:70px; text-decoration: none; transition:.3s; overflow:hidden;} .listRsv .list a:hover .due:not(.end){color:var(--color-main); } .listRsv .list a .due:not(.end){font-weight: 600;} .listRsv .list a div{flex:1; display:inline-flex; justify-content:center;} .listRsv .list a .mob{text-indent: -9999px; position: absolute; font-size:0; color:transparent;} .listRsv .list a .txt{display:inline-flex; align-items:center; justify-content: center;} .listRsv .list a .button{display:none !important; position:absolute; left:0; bottom:0; display:inline-flex; align-items:center; justify-content:center; width:100%; height:40px; background:#f5f5f5; color:#676767; border-top:1px solid #ccc; transition:.3s;} @media all and (max-width:1024px){ .listRsv .due{min-width: 310px;} .listRsv .thead{padding:16px;} .listRsv .list a{gap:8px; padding:16px;} .listRsv .list a .due:not(.end){font-size:inherit;} } @media all and (max-width:768px){ .listRsv .due{min-width:auto;} .listRsv .thead{display:none;} .listRsv .list{gap:16px;} .listRsv .list a{flex-direction:column; padding-bottom:56px; text-align: left; border:1px solid #ccc; border-radius:16px;} .listRsv .list a .mob{text-indent: 0; position:relative; padding-top:2px; font-size: 1.5rem; font-weight: 400; color:#676767; min-width:60px;} .listRsv .list a div{justify-content: flex-start;} .listRsv .list a .txt{align-items:flex-start; justify-content:flex-start;} .listRsv .list a .button{display:flex !important; } .listRsv .list a:hover .button{background:var(--color-main); color:#fff;} .listRsv .list a:hover, .listRsv .list a:focus{border:1px solid var(--color-main); box-shadow:0 0 5px rgba(29, 32, 136, 0.2);} } /*? 예약정보 입력 폼 */ .rsvDiv{display:flex; flex-direction:column; gap:40px;} .rsvDiv .wrtArea{padding:40px; border-radius:16px; border:1px solid #ccc; background:#f9f9f9;} .rsvDiv .chkTbl .first input[type="checkbox"]{margin-right:0;} .rsvDiv .chkTbl input[type="number"]{width:70%;} .timeList{display:flex; gap:8px; flex-wrap:wrap; padding:8px 0;} .timeList label{display:inline-flex; padding:8px 16px 8px 12px; background:#fff; border:1px solid #ccc; border-radius:8px;} .timeList label:has(input:disabled){text-decoration: line-through; color:#676767;} .timeList label:has(input:checked){border:1px solid var(--color-main); background:var(--color-main-5);} /*예약정보 확인*/ .rsvDiv .infoChk{padding:32px; background:#fff; border:1px solid #dbdbdb; border-radius:24px; } .rsvDiv .infoChk .list{display:flex; flex-direction:column; gap:8px;} .rsvDiv .infoChk .list > li{display:flex; } .rsvDiv .infoChk .list > li .tit{transform:translateY(2px); color:#444; min-width:100px; } .rsvDiv .infoChk .list > li p{font-weight: 500;} /*결제방식 선택*/ .costList{display:flex; align-items:center; justify-content:center; gap:8px 40px; padding:24px; background:#f9f9f9; border:1px solid #ccc; border-radius:16px;} /*자동입력 방지문자*/ .autoInp{display:flex; align-items:center; gap:8px;} .autoInp .imgW{position:relative; width:200px; height:88px; border-radius:8px; border:1px solid #dbdbdb; background:#f5f5f5; overflow:hidden;} .autoInp .imgW img{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:100%; max-height:100%;} .autoInp .right{display:flex; flex-direction:column; gap:4px;} .autoInp .right .revol{display:inline-flex; align-items:center; gap:4px;} .autoInp .right .inpArea{display:flex; gap:4px;} .autoInp .right .inpArea .form{width:204px;} /*결제금액 확인*/ .totalCost{display:flex; flex-direction:column; gap:16px; padding:24px; border:1px solid #ccc; border-radius:16px; background:#f9f9f9;} .totalCost .list{display:flex; flex-direction:column; gap:4px; } .totalCost .list > li {display:inline-flex; align-items:center; gap:24px; flex-wrap:wrap;} .totalCost .list > li .tit{color:#676767; min-width:80px;} .totalCost .list > li .cost{font-weight: 600; font-size: 1.9rem;} .totalCost .total{display:flex; align-items:center; justify-content:center; padding:24px; background:#fff; border:1px solid #e5e5e5;border-radius:16px; font-weight: 600; font-family: var(--style-font);} .totalCost .total .num{padding-left:16px; padding-right:4px; font-size: 2.1rem; color:var(--color-point);} @media all and (max-width:768px){ .rsvDiv .wrtArea{padding:24px; border-radius:8px;} .rsvDiv .chkTbl{border-top:0; margin-top:8px;} .rsvDiv .chkTbl th, .rsvDiv .chkTbl td{padding:0; border:0; text-align: left; background:#fff;} .rsvDiv .chkTbl th{text-align:right;} .rsvDiv .chkTbl td{display:flex; } .rsvDiv .chkTbl td::before{display:inline-block; content:attr(data-cell-header); font-size:1.5rem; color:#676767; min-width:64px; } .rsvDiv .chkTbl colgroup{display:none;} .rsvDiv .chkTbl thead{display:none;} .rsvDiv .chkTbl tbody{display:flex; flex-wrap:wrap; gap:8px; width:100%;} .rsvDiv .chkTbl tbody tr{position:relative; display:flex; flex-direction:column; padding:16px; border-radius:8px; border:1px solid #ccc; width:100%; gap:4px;} .rsvDiv .chkTbl input[type="number"]{height:35px; width:80px;} .rsvDiv .chkTbl .first input[type="checkbox"]{position:absolute; right:16px; top:16px;} .timeList{padding:8px 0;} .timeList label{font-size: 1.5rem;} .autoInp{flex-direction:column; align-items:flex-start;} .autoInp .imgW{width:280px; height:140px;} .autoInp .right{width:100%; max-width:280px;} .autoInp .right .inpArea label{flex:1;} .autoInp .right .inpArea .form{width:100%;} .autoInp .right .revol a{flex:1; width:100%;} .totalCost{padding:16px;} .totalCost .total{padding:16px 24px; border-radius:8px;} .totalCost .total .num{font-size: 1.9rem;} .totalCost .list > li .cost{font-size: inherit;} } @media all and (max-width:425px){ .rsvDiv .wrtArea{padding:16px;} .timeList label{font-size: 1.3rem; padding:6px;} } /*? 온라인신청 완료 */ .rsvDone{display:flex; flex-wrap:wrap; border-bottom:1px solid #ccc;border-top:2px solid #111; } .rsvDone > li{display:flex; border-bottom:1px solid #ccc; width:50%;} .rsvDone > li:last-child{border-bottom:0;} .rsvDone > li p{display:inline-flex; align-items:center; padding:18px 10px; } .rsvDone > li:nth-child(2n) .em{border-left:1px solid #ccc;} .rsvDone > li .em{justify-content:center;background:#f5f5f5; border-right:1px solid #ccc; text-align:center; width:120px;} .rsvDone > li .txt{flex:1; word-break: break-all; flex-wrap:wrap;} .doneTotal{display:flex; align-items:center; justify-content:center; gap:8px; flex-direction:column; margin-top:40px; border:5px solid var(--color-main); border-radius:16px; padding:24px; text-align:center; } .doneTotal .num{font-family: var(--style-font); font-size:1.9rem; font-weight: 500;} .doneTotal .num .em{color:var(--color-point); font-weight: 600; font-size: 2.5rem;} @media all and (max-width:768px){ .rsvDone{flex-direction:column; } .rsvDone > li{width:100%;} .rsvDone > li:nth-child(2n) .em{border-left:0;} .doneTotal .num{font-size: 1.7rem;} .doneTotal .num .em{font-size: 2.1rem;} } @media all and (max-width:425px){ .rsvDone > li p{padding:10px;} .rsvDone > li .em{width:80px;} .doneTotal{padding:16px; margin-top:24px;} .doneTotal .num .em{font-size: 1.9rem;} } /*? faq*/ .faqCon .faqList{width: 100%; border:1px solid #ccc; border-radius:24px; overflow: hidden;} .faqCon .faqList dl{display: flex; flex-wrap: wrap; align-items: center; width: 100%;} .faqCon .faqList dt{position:relative; display: flex; align-items: center; width: 100%; border-bottom:1px solid #ccc;} .faqCon .faqList dl:last-child dt, .faqCon .faqList dl:last-child dd, .faqCon .faqList dt.on{border-bottom:none;} .faqCon .faqList dt .Q_blit{position:absolute; left: 2rem; width: 4rem; height: 4rem; text-align:center; line-height:4rem; color:#fff; font-size: 2.1rem; font-weight: 600; background-color:#ccc; border-radius:100rem; transition: 0.3s;} .faqCon .faqList dt.on .Q_blit{background-color:var(--color-point);} .faqCon .faqList dt a{display:flex; flex-direction:column; gap:4px; position:relative; width: 100%; padding:3.2rem 8rem; font-size: 1.9rem; text-decoration: none; line-height: 2.4rem; transition: 0.3s;} .faqCon .faqList dt a .sort{display:inline-flex; align-items:center; justify-content:center; padding:4px 16px; border-radius:100px; border:1px solid #ccc; font-size:1.3rem; width:fit-content; color:#676767; font-weight:400;} .faqCon .faqList dt.on a .sort{font-weight:600; color:var(--color-point);} .faqCon .faqList dt.on a{position:relative; color:#111; font-weight:600; transition: 0.3s;} .faqCon .faqList dt a::after{content: ''; display: block; position: absolute; background:url("../img/common/down-arrow.svg"); top:45%; right: 3rem; width: 20px; height: 20px;} .faqCon .faqList dt.on a::after{ content: ''; display: block; position: absolute; background:url("../img/common/down-arrow-brw.svg"); top:45%; right: 3rem; width: 20px; height: 20px;} .faqCon .faqList dd{position:relative; display:flex; align-items: center; padding:2rem 2rem 2rem 8rem; width:100%; background-color:#f9f9f9; line-height:2.8rem; border-bottom:1px solid #ccc;} .faqCon .faqList dd div{width:100%; word-break: break-all;} .faqCon .faqList dd::before{position:absolute; left: 3rem; color: var(--color-point); font-size: var(--fz-headlineS); font-weight: 600; content:"A";} .faqCon .faqList .Q_blit::before{content:""; border:100px;} .faqCon .faqList .Q_tit_blit {display:flex; width: 100%; line-height: 2.4rem; font-size: 1.6rem; font-weight: 400; color:#676767;} .faqSort{display:flex; justify-content:flex-start; flex-wrap:wrap; padding:16px; margin-bottom:40px; border-radius:16px; gap:4px; background:#f5f5f5;} .faqSort > li{width:calc(100% / 4 - 3px);} .faqSort a{display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; color:#676767; width:100%; height:100%; background:#fff; text-align: center; border-radius:8px;} .faqSort a.on{color:var(--color-sub2); font-weight: 600; border:2px solid var(--color-sub2); border-radius:8px 16px;} .faqConSelc{display:none;} @media all and (max-width:1024px){ .faqSort > li{width:calc(100% / 4 - 3px);} } @media all and (max-width:768px){ .faqCon .faqList dt a{padding: 2rem 5.6rem; font-size:1.7rem; transition: 0.3s; } .faqCon .faqList dt a::after{right:2.5rem;} .faqCon .faqList dt.on a::after{right:2.5rem;} .faqCon .faqList dt .Q_blit{left:1rem; top:1.4rem; color:#111; background-color:#fff; transition: 0.3s;} .faqCon .faqList dt.on .Q_blit{color:var(--color-point); background-color:#fff; } .faqCon .faqList dd{padding:2rem .8rem 2rem 5.6rem;} .faqCon .faqList dd::before{font-weight:400; left: 2.2rem; top: 2.4rem; color:var(--color-point);} .faqCon .faqList .Q_tit_blit{font-size:1.rem;} .faqSort > li{width:calc(100% / 3 - 3px);} .faqSort a{padding:8px; font-size: 1.3rem;} } @media all and (max-width:425px){ .faqSort > li{width:calc(100% / 2 - 2px);} .faqConSelc{display:block;} .faqCon .faqList{border-radius:16px;} } /*? 탭 */ .tab{display:flex; align-items:stretch; justify-content:center; gap:0; margin-bottom:40px; background:#f5f5f5; border-radius:12px; width:100%; } .tab li{flex:1;} .tab li a{display:inline-flex; align-items:center; justify-content:center; padding:16px; border-radius:12px; color:#676767; font-size:1.9rem; font-weight:500; width:100%; height:100%; text-align: center; line-height:1.3;} .tab li a.on{border-radius:12px 24px; background:var(--color-sub2); color:#fff; box-shadow:3px 7px 15px rgba(0,0,0,0.2); font-weight: 600;} .tabList > li{display:none;} .tabList > li.on{display:block;} @media all and (max-width:1024px){ .tab li a{font-size: 1.7rem;} } @media all and (max-width:768px){ .tab li a{padding:8px; font-size: 1.5rem;} .tab li a.on{border-radius:8px 16px;} } @media all and (max-width:425px){ .tab{flex-wrap:wrap;} .tab li{flex:none; width:100%;} .tab li a.on{border-radius:8px 12px;} } .sTab{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; padding:16px; margin-bottom:40px; border-radius:8px; gap:4px; background:#f5f5f5;} .sTab li a{display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; border-radius:8px; color:#676767; font-size:1.7rem; background:#fff; width:100%; height:100%; text-align: center; line-height:1.3; } .sTab li a.on{border-radius:8px 16px; color:var(--color-sub2); border:2px solid var(--color-sub2); background:#fff; font-weight: 600;} /*? 댓글쓰기 */ .detComt{margin-top:4.0rem;} .detComt .ex{position:relative; display:flex; align-items:center; padding-left:24px; margin-bottom:8px; font-size: 1.9rem; font-weight: 600;} .detComt .ex i{position:absolute; left:0; top:5px; font-size: 20px; color:var(--color-main);} .detComt .comtBox{position:relative; padding:16px 116px 16px 16px; width:100%; border:1px solid var(--color-main); border-radius:16px; overflow:hidden;} .detComt .comtBox .txt{padding:0; width:100%; height:48px; overflow-y:auto; border:0; outline:0; min-height:auto; resize: none;} .detComt .comtBox .byte{margin-top:8px; font-size:1.5rem; color:#ccc;} .detComt .comtBox .byte .num{color:#676767;} .detComt .comtBox .regist{position:absolute; display:inline-flex; align-items:center; justify-content: center; right:0; top:0; width:100px; height:100%; background:var(--color-main); color:#fff; font-size:1.7rem; font-weight:500; transition:.3s;} .detComt .comtBox .regist:hover{background-color:var(--color-main-90);} .detComt .noComt{display:flex; align-items:center; justify-content:center; padding:3.2rem 0; border-bottom:1px solid #ccc; color:#111;} .detComt .comtList > li{position:relative; padding:2.4rem 0; border-bottom:1px solid #ccc;} .detComt .comtList > li .name{display:inline-flex; align-items:center; gap:8px; font-weight:500;} .detComt .comtList > li .name .date{color:#676767; font-weight:400;} .detComt .comtList > li .txt{margin-top:8px; color:#111; width:100%;} .detComt .comtList > li .etcBtn{position:absolute; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; right:0; top:1.6rem; border-radius:100%; color:#676767; transition:.3s;} .detComt .comtList > li .etcBtn:hover{color:var(--color-main);} .detComt .comtList > li .etcFunc{display:none; position:absolute; top:1.6rem; right: 36px; background:#fff; border-radius:4px; border:1px solid #ccc; overflow:hidden;} .detComt .comtList > li .etcFunc .func{display:flex; align-items:center; justify-content:center; padding:8px 16px; color:#111;} .detComt .comtList > li .etcFunc .func:hover{background:#f9f9f9;} .detComt .comtList .comtBox{margin-top:0; border:1px solid #ccc; } .detComt .comtList .comtBox .fixBtn{position:absolute; display:inline-flex; align-items:center; justify-content:center; right:0; width:100px; height:50%; font-weight:500;font-size:1.7rem;} .detComt .comtList .comtBox .fixBtn.fix{top:0; background:var(--color-main); color:#fff;} .detComt .comtList .comtBox .fixBtn.can{bottom:0; color:#676767; border-left:1px solid #ccc;} @media all and (max-width:425px){ .detComt .comtBox{padding:16px 16px 56px 16px;} .detComt .comtBox .regist{top:auto; bottom:0; width:100%; height:40px; font-size: 1.5rem;} .detComt .comtList .comtBox .fixBtn{right:auto; bottom:0; width:50%; height:40px;font-size: 1.5rem;} .detComt .comtList .comtBox .fixBtn.fix{left:0; top:auto;} .detComt .comtList .comtBox .fixBtn.can{right:0; border-left:0; border-top:1px solid #ccc;} } /*? 달력 */ /*달력전체영역*/ .calenBox{position:relative; display:flex; gap:80px; padding:40px; margin-top: 8px; border:1px solid #ccc; border-radius:16px;} .calenBox::before{position:absolute; content:''; width:1px; height:calc(100% - 80px); border-right:1px dashed #ccc; left:50%; top:50%; transform:translate(-50%, -50%);} .calenBox .left, .calenBox .right{width:calc(50% - 40px);} .calenBox .left .month{display:flex; justify-content:space-between; align-items:center;} .calenBox .left .month button{display:inline-block; width:40px; height:40px;} .calenBox .left .month button .micon{color:#676767;} .calenBox .left .month .mth{font-size:2.1rem; font-weight:600; font-family: var(--style-font);} .calenBox .left .etc{display:flex; align-items:center; justify-content:flex-end; gap:4px;} .calenBox .left .etc span{display:inline-flex; align-items:center; justify-content:center; width:60px; height:40px; border-radius:8px;} .calenBox .left .etc span.none{background:#f5f5f5; border:2px solid #f5f5f5; color:#676767; text-decoration: line-through;} .calenBox .left .etc span.sel{background:#fff; border:2px solid var(--color-main); color:var(--color-main); font-weight:600;} /*달력테이블*/ .calenTbl{margin-top:24px; width:100%; table-layout: fixed;} .calenTbl tr{height: 40px;} .calenTbl th, .calenTbl td{padding:2px;} .calenTbl thead th{font-weight:500; } .calenTbl tbody td{height:0;} .calenTbl tbody td div{width:100%; height:100%;} .calenTbl tbody td div a{display:inline-flex; text-align:center; flex-direction:column; align-items:center; justify-content:center; padding:6px 0; width:100%; height:100%; background:#fff; border:1px solid #ccc; border-radius:8px; line-height:1.4; text-decoration: none; white-space: nowrap; height: 40px; } .calenTbl tbody td div a .possNum{font-size: 1.5rem; color:#676767;} .calenTbl tbody td div a.on:not(.end){border:2px solid var(--color-main); background:#fff; color:var(--color-main); font-weight: 600;} .calenTbl tbody td div a.on .possNum{font-weight:normal;} .calenTbl tbody td div a.end{text-decoration: line-through; color:#999; border:2px solid #f5f5f5; background:#f5f5f5; cursor:no-drop;} .calenBox.col .calenTbl tbody tr, .calenBox.col .calenTbl tbody tr a, .calenBox.col .calenTbl tbody tr a.end{height:55px;} .calenTbl.dueSelect tbody td div a.on:not(.rental,.return,.end){position:relative;border:2px solid var(--color-main);border-right:0; border-left:0; background:#fff; border-radius:0;} .calenTbl.dueSelect tbody td div a.on:not(.rental,.return,.end)::before, .calenTbl.dueSelect tbody td div a.on:not(.rental,.return,.end)::after{position:absolute; content:''; width:4px; height:100%; border:2px solid var(--color-main); border-right:0; border-left:0; background:#fff; top:-2px;} .calenTbl.dueSelect tbody td div a.on:not(.rental,.return,.end)::before{left:-4px;} .calenTbl.dueSelect tbody td div a.on:not(.rental,.return,.end)::after{right:-4px;} .calenTbl.dueSelect tbody td div a.rental{border-radius:100px 0px 0px 100px; border-right:0; background:#fff;} .calenTbl.dueSelect tbody td div a.return{border-radius:0px 100px 100px 0px; border-left:0; background:#fff;} /*달력우측영역*/ .calenBox .right .noList{display:flex; align-items:center; justify-content:center; margin-top:24px; padding:24px 16px; width:100%; border-radius:16px; background:#f9f9f9; color:#676767;} .calenBox .right .titArea{display:flex; align-items:center; justify-content:space-between; } .calenBox .right .titArea .tit{font-weight:600;} .calenBox .right .titArea .selDate{display:inline-flex; align-items:center; gap:8px; color:var(--color-main); font-weight:600;} .calenBox .right .titArea .selDate .micon{width:18px; height:18px; font-size: 18px; color:var(--color-main);} .calenBox .right .btnW{margin-top:24px;} .calenBox .right .redTxt{margin-top:24px; font-size:1.4rem; } /*달력우측 예약현황*/ .rsvList{display:flex; flex-direction:column; gap:4px; margin-top:24px; } .rsvList > li.tit{display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0 8px;text-align:center; } .rsvList > li.tit input{margin-right:0;} .rsvList > li.tit span{font-weight: 500;} .rsvList .list, .rsvList > li > label{display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0 8px; background:#fff; border:1px solid #999; border-radius:8px; min-height:40px; text-align:center; } .rsvList > li.list{padding:0 24px;} .rsvList > li label.on{border:1px solid var(--color-point); background:rgba(239,66,127,.05);} .rsvList > li label [type="checkbox"], .rsvList > li label [type="radio"]{margin-right:0; margin-top:-3px; border:2px solid #676767;} .rsvList > li label [type="checkbox"]:checked{background:var(--color-point); border:2px solid var(--color-point);} .rsvList > li label [type="radio"]:checked{border:2px solid var(--color-point);} .rsvList > li label [type="radio"]::before{background:var(--color-point);} .rsvList > li label [type="checkbox"]:disabled, .rsvList > li label [type="radio"]:disabled{border-color:#ccc;} .rsvList > li.end label{background:#f9f9f9; color:#999; border:1px solid #ccc; cursor:no-drop;} .rsvList > li.end *{color:#999;} .rsvList > li.end .name, .rsvList > li.end .time, .rsvList > li.end .mem, .rsvList > li.end .cost, .rsvList > li.end .state{text-decoration: line-through; font-weight:normal;} .rsvList .sel{width:10%; min-width:40px;} .rsvList .name{min-width:20%;} .rsvList .time{min-width:100px;} .rsvList .mem{width:20%;} .rsvList .cost{width:30%;} .rsvList .state{width:20%; font-weight: 500;} .calenBox.col .rsvList .sel{width:10%;} .calenBox.col .rsvList .name{min-width:15%;} .calenBox.col .rsvList .time{min-width:100px;} .calenBox.col .rsvList .mem{width:15%;} .calenBox.col .rsvList .cost{width:20%;} .calenBox.col .rsvList .state{width:15%;} .calenBox.col .rsvList .stxt{display:block; font-size:1.0rem; color:#676767; line-height:1.3;} .rsvList .state.wait{color:var(--color-green);} .rsvList .state.ok{color:var(--color-blue);} .rsvList > li .mob{display:none;} @media all and (max-width:1024px){ .calenBox{padding:24px; gap:48px;} .calenBox::before{height:calc(100% - 48px);} .calenBox .left, .calenBox .right{width:calc(50% - 24px);} .calenBox.col{flex-direction:column;} .calenBox .left .month .mth{font-size: 1.8rem;} .calenBox.col .left, .calenBox.col .right{width:100%;} .calenBox.col::before{display:none;} .calenBox.col .right{position:relative;} .calenBox.col .right::before{position:absolute; content:''; left:0; top:-24px; width:100%; height:1px; border-top:1px dashed #dbdbdb;} } @media all and (max-width:768px){ .calenBox{flex-direction:column; padding:0; border:0;} .calenBox::before{display:none;} .calenBox .left, .calenBox .right{width:100%;} .calenBox .left .etc span{height:32px;} .calenBox .left .month .mth{font-size: 1.9rem;} .calenBox .right{position:relative;} .calenBox .right::before{position:absolute; content:''; left:0; top:-24px; width:100%; height:1px; border-top:1px dashed #dbdbdb;} .calenBox .right .noList{margin-top:8px;} .calenBox .right .titArea .selDate{font-size: 1.5rem;} .calenBox .right .btnW{margin-top:24px;} .rsvList > li .mob{display:inline-block; font-size: 1.5rem; color:#444; min-width:50px;} .calenBox.col .rsvList{flex-direction:row; flex-wrap: wrap; gap:16px;} .calenBox.col .rsvList > li{width:calc(50% - 8px);} .calenBox.col .rsvList > li.tit{display:none;} .calenBox.col .rsvList .list, .calenBox.col .rsvList > li > label{position:relative; flex-direction:column; align-items:flex-start; padding:32px 16px 8px 16px; gap:0;} .calenBox.col .rsvList .name, .calenBox.col .rsvList .time, .calenBox.col .rsvList .mem, .calenBox.col .rsvList .cost{display:inline-flex; align-items:center; flex-wrap:wrap; width:100%; min-width:auto; text-align:left;} .calenBox.col .rsvList .sel, .calenBox.col .rsvList .state{position:absolute; left:16px; top:8px; width:auto; min-width:auto;} .calenBox.col .rsvList .stxt{display:inline-block; margin-left:4px;} .calenBox.col .rsvList .sel{left:auto; right:16px;} .calenTbl tr, .calenTbl tbody td div a{height: 36px;} .calenBox.col .calenTbl tbody td div a{height:50px;} .calenBox.col .calenTbl tbody tr, .calenBox.col .calenTbl tbody tr a, .calenBox.col .calenTbl tbody tr a.end{height:50px;} .calenTbl{margin-top:8px;} .calenTbl tbody td div a{font-size: 1.5rem; white-space: wrap;} .rsvList{margin-top:8px;} } @media all and (max-width:425px){ .calenBox .left .month .mth{font-weight: 500;} .calenBox.col .rsvList{flex-direction:column; gap:8px;} .calenBox.col .rsvList > li{width:100%;} } /*? 텍스트 */ .noteTxt{margin-bottom:40px;} @media all and (max-width:768px){ .noteTxt{margin-bottom:24px;} } /*? 텍스트 박스 */ .textBox{display:inline-block; width:100%; padding:40px; border-radius:24px;} .textBox .agrOk{background:#fff; border:1px solid #dbdbdb;} .textBox.style01{border:1px solid #ccc;} .textBox.style02{border:1px solid #ccc; background:#f9f9f9;} .textBox.style03{position:relative; background:url(../img/common/dashLine.svg) repeat; background-size:6px; z-index: -1;} .textBox.style03::before{position:absolute; content:''; background:#fff; width:calc(100% - 20px); height:calc(100% - 20px); left:50%; top:50%; transform:translate(-50%, -50%); border-radius:16px; z-index:-1;} .textBox.style03 *{z-index: 1;} .textBox.styleRed{margin-bottom:40px; text-align:center;} .textBox.styleRed .tit{position:relative; font-size: 2.8rem; font-weight: 600;} .textBox.styleRed .tit i{margin-right:8px; margin-top:-8px; vertical-align: middle; transform:rotate(340deg);} .textBox.styleRed .txt{margin-top:24px; font-size: 1.9rem;} .textBox.styleRed .txt .em{font-weight: 600; color:var(--color-point); text-decoration: underline;} .textBox.styleRed .bene{margin-top:24px; border:1px solid #ccc; border-radius:16px; overflow: hidden;} .textBox.styleRed .bene .em{display:flex; align-items:center; justify-content:center; padding:8px; font-weight: 600; background:#f5f5f5; border-bottom:1px solid #ccc;} .textBox.styleRed .bene .list{display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 24px; padding:16px;} .textBox.imgBox{display:flex; align-items:center; gap:40px; border:1px solid #ccc; background:#f9f9f9;} .textBox.imgBox .txtW{flex:1; } .textBox.imgBox img{border:5px solid #fff; border-radius:8px; box-shadow: 3px 5px 7px rgba(0,0,0,0.2);} .textBox.style04{padding:24px; border-radius:16px; background:#f5f5f5;} @media all and (max-width:768px){ .textBox{padding:24px; border-radius:16px;} .textBox.imgBox{flex-direction: column; gap:24px;} .textBox.imgBox .imgW{margin:0 auto;} .textBox.styleRed .tit{font-size: 2.1rem;} .textBox.styleRed .txt{font-size: inherit;} .textBox.styleRed .txt, .textBox.styleRed .bene{margin-top:8px;} .textBox.styleRed .tit i{width:26px; height:26px;} .textBox.styleRed .bene .list{gap:4px 16px;} } /*?프로그램 예약 목록*/ .rsvItem{display:flex; flex-direction:column; gap:16px;} .rsvItem > li{position:relative; display:flex; gap:16px; padding:24px; padding-right:150px; border-radius:16px; border:1px solid #ccc; transition:.3s;} .rsvItem > li .num{padding-top:4px; font-size: 1.5rem; color:#676767;} .rsvItem > li .rsvBtn{position:absolute; right:24px; top:50%; transform:translateY(-50%); } .rsvItem > li:has(.rsvBtn:not(.disabled):hover){border:1px solid var(--color-main); box-shadow:0 0 5px rgba(29, 32, 136, 0.2);} .rsvItem > li:has(.rsvBtn:not(.disabled):hover) .tit{color:var(--color-main);} .rsvItem .list{flex:1; display:flex; flex-direction:column; gap:16px;} .rsvItem .list .titW{display:inline-flex; flex-direction:column; gap:8px; } .rsvItem .list .titW .tit{font-size: 2.1rem; font-weight: 600; width:100%;} .rsvItem .list .titW .labelW{display:inline-flex; align-items:center; gap:4px;} .rsvItem .list .titW .label{width:fit-content;} .rsvItem .list .etcList{display:flex; flex-wrap:wrap; gap:4px 24px;} .rsvItem .list .etcList > li{position:relative; padding-left:12px; display:inline-flex; gap:8px; align-items:center;} .rsvItem .list .etcList > li::before{position:absolute; content:''; left:0; top:12px; width:4px; height:4px; background:#ccc; border-radius:100%;} .rsvItem .list .etcList > li .em{ color:#676767; } .rsvItem .list .etcList > li .txt{font-size: 1.9rem;} @media all and (max-width:768px){ .rsvItem > li{flex-direction:column; gap:4px; padding-right:24px; padding-bottom:80px;} .rsvItem > li .rsvBtn{right:auto; top:auto; bottom:24px; left:50%; transform:translateX(-50%); width:calc(100% - 48px);} .rsvItem .list{gap:8px;} .rsvItem .list .etcList > li .txt{font-size: 1.7rem;} .rsvItem .list .etcList > li::before{top:10px;} .rsvItem > li .num{display:none;} } @media all and (max-width:425px){ .rsvItem > li{padding:16px; padding-bottom:72px;} .rsvItem > li .rsvBtn{bottom:16px; width:calc(100% - 32px);} .rsvItem .list .etcList > li .txt{font-size: inherit;} .rsvItem .list .etcList > li::before{top:8px;} .rsvItem .list .titW{gap:4px;} .rsvItem .list .titW .tit{font-size: 1.9rem;} } /*? 프로그램 예약 상세 */ .rsvDetinfo{position:relative; display:flex; gap:40px; margin-bottom:40px; } .rsvDetinfo .left{position:relative; width:400px; min-height:230px; max-height:300px; border-radius:16px; border:5px solid #fff; box-shadow:3px 5px 15px rgba(0,0,0,0.2); overflow:hidden;} .rsvDetinfo .left img{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; object-fit: cover;} .rsvDetinfo .right{flex:1;} .rsvDetinfo .right .titW{display:flex; flex-direction:column; gap:8px; padding-right:100px;} .rsvDetinfo .right .titW .label{width:fit-content;} .rsvDetinfo .right .titW .tit{font-size: 3.2rem; font-weight: 600; font-family: var(--style-font); } .rsvDetinfo .right .list{display:flex; flex-direction:column; margin-top:16px; gap:16px;} .rsvDetinfo .right .list > li{display:flex; align-items:stretch; } .rsvDetinfo .right .list > li:last-child{border-bottom:0;} .rsvDetinfo .right .list > li .em{position:relative; width:100px; display:inline-flex; font-family: var(--style-font); font-weight: 600; font-size: 1.7rem;} .rsvDetinfo .right .list > li .em::before{position:absolute; content:''; left:-3px; top:-3px; width:20px; height:20px; background:var(--color-sub2-10); border-radius:100%; z-index: -1; } .rsvDetinfo .right .list > li .txt{flex:1; font-size: 1.9rem;} .rsvDetinfo .share{position:absolute; right:32px; top:32px; display:inline-flex; align-items:center; gap:8px;} .rsvDetinfo .share > li > a{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:100%; background:#f9f9f9; border:1px solid #ccc; text-decoration: none;} /*sns share popup*/ .snsShare{padding:24px; z-index: 51;} .snsShare .snsList{display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:16px; margin:16px auto;} .snsShare .snsList > li{text-align:center; min-width:65px;} .snsShare .snsList > li a{display:inline-flex; flex-direction:column; gap:4px; align-items:center; text-align: center; text-decoration: none;} .snsShare .snsList > li a i{width:50px; height:50px;} .snsShare .snsList > li a .stxt{color:#676767;} .snsShare .copyForm{display:inline-flex; align-items:center; padding:4px; width:100%; height:48px; border:1px solid #ccc; border-radius:8px;} .snsShare .copyForm label{flex:1; height:100%;} .snsShare .copyForm input[type="text"]{border:none; height:100%; width:100%; text-overflow:ellipsis;} .snsShare .copyForm .copy{display:inline-flex; align-items:center; justify-content:center; padding:4px 16px; border-radius:8px; background:#111; color:#fff; font-weight: 500; height:100%;} @media all and (max-width:1024px){ .rsvDetinfo{gap:24px;} .rsvDetinfo .left{width:270px; max-height:250px; } .rsvDetinfo .right .titW .tit{font-size: 2.5rem;} } @media all and (max-width:768px){ .rsvDetinfo{flex-direction:column; padding:32px;} .rsvDetinfo .left{width:100%; max-height:none; } .rsvDetinfo .right .titW .tit{font-size: 2.1rem;} .rsvDetinfo .right .list{gap:12px;} .rsvDetinfo .right .list > li .em{width:90px; } .rsvDetinfo .share{position:relative; display:flex; justify-content:center; margin-top:8px; right:auto; top:auto;} } @media all and (max-width:425px){ .rsvDetinfo .left{min-height:200px;} .rsvDetinfo .right .list{border-top:0; border-bottom:0;} .rsvDetinfo .right .list > li{flex-direction:column;} .rsvDetinfo .right .list > li .em{width:100%; padding:0; font-size: inherit;} .rsvDetinfo .right .list > li .txt{padding:0; font-size: 1.7rem;} .rsvDetinfo .right .titW .tit{font-size: 1.9rem;} .rsvDetinfo .share > li > a i{font-size: 2rem;} } /** 공공저작물 */ [class^="codeView"]{display:flex; align-items:center; gap:30px; padding:24px; border: 1px solid var(--color-sub); border-radius:8px; background-color:var(--color-sub-10);} [class^="codeView"] img{height:40px;} @media all and (max-width:768px){ [class^="codeView"]{padding:16px; flex-direction:column; gap:16px; text-align:center;} } /**장애인 편의시설*/ .barrierFree { display:flex; flex-direction:row; justify-content:center; flex-wrap:wrap; border:1px solid var(--color-sub2); background:var(--color-sub2-5); border-radius:8px; padding:24px; gap:8px;} .barrierFree li { display:flex; flex-direction: column; align-items: center; gap: 4px; width:calc(100%/ 7 - 8px); min-width:120px;} .barrierFree li img { width: 60px; } @media all and (max-width:768px){ .barrierFree{padding:16px; } } @media all and (max-width:425px){ .barrierFree li{min-width:auto; width:calc(100% / 2 - 4px);} } /*?이용안내 sns공유*/ .subShare{display:flex; align-items:center; justify-content:flex-end; gap:8px; transform:translateY(-24px);} .subShare > li > a{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:100%; background:#f9f9f9; border:1px solid #ccc; text-decoration: none;} @media all and (max-width:768px){ .subShare{justify-content:flex-start;} } @media all and (max-width:425px){ .subShare i{font-size: 2rem;} }