:root { --gnb-height: 35px; --header-height: 55px; --header-padding: 55px; --header-height-minus: -55px; --footer-height: 30px; --max-width: 1300px; --radius-xs: 0.3rem; --radius-s: 0.6rem; --radius-m: 1.2rem; --radius-l: 2.1rem; --radius-xl: 3.3rem; --padding-xs: 0.5rem; --padding-s: 1rem; --padding-m: 1.5rem; --padding-l: 2rem; --padding-xl: 2.5rem; --inset: inset 6px 6px 12px rgba(var(--basic-gray-color-60),0.8), inset -6px -6px 12px rgba(var(--basic-gray-color-5),0.3); } /* @media (min-width: 1024px){ :root { --header-height: 85px; --header-padding: 0px; --header-height-minus: 0px; } } @media (min-width: 1400px){ :root { --header-height: 90px; --header-padding: 0px; --header-height-minus: 0px; } } */ html { color: #333; } body { background-color: #fff; } article, .fullArea { padding-left: 1.8rem; padding-right: 1.8rem; } @media (min-width: 768px){ article, .fullArea { padding-left: 3rem; padding-right: 3rem; } } @media (min-width: 980px){ article, .fullArea { padding-left: 4rem; padding-right: 4rem; } } .singleNav-style { border-color: rgba(var(--basic-gray-color-30), 1); background-color: #fff; } .headerNav-wrap #headerNav { margin-left: initial; max-width: 50rem; margin-right: 4rem; } .headerNav-wrap .logo { width: 30rem; padding-right: 2rem; margin-right: 3rem; } .headerNav-wrap .logo a { height: 45%; } .headerNav-wrap #headerNav > ul > .navItem > a > span { font-size: 1.6rem; } .singleNav-style nav .multiNav > .multiNav-inner ul { min-width: 15rem; } .singleNav-style nav .multiNav > .multiNav-inner ul a span { white-space: nowrap; } .navRight-wrap { display: flex; justify-content: flex-end; margin-left: auto; } .navRight-wrap .gnbNav { display: flex; align-items: center; margin-right: 2rem; padding-left: 2.5rem; } .navRight-wrap .gnbNav > li { position: relative; } .navRight-wrap .gnbNav > li + li { padding-left: 1rem; margin-left: 1rem; } .navRight-wrap .gnbNav > li a { color: #555; font-size: 1.4rem; display: block; padding-bottom: 0.1rem; } .navRight-wrap .gnbNav > li + li:before { content:''; display: block; width: 1px; height: 50%; background-color: rgba(0,0,0,0.2); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .burgerBtn-wrap { position: relative; } .burgerBtn-wrap > a { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; height: var(--header-height); } .burgerBtn span { background-color: #090909; height: 2px; border-radius: 2px; } .scrollOn .multiNav > a { color: #333; } .scrollOn .navRight-wrap .gnbNav > li a { color: #555; } .scrollOn .navRight-wrap .gnbNav > li + li:before { background-color: #ccc; } #sideNav-wrap .gnbItem-full { width: 100% !important; } .sideNav-header .imgContainer-fit { width: 50%; } #sideNav a { font-size: 1.7rem; } @media (min-width: 1400px){ .navRight-wrap .gnbNav > li a { font-size: 1.5rem; } } #wrap footer { background-color: #fff; border-top: 1px solid rgba(var(--gray-color-20)); } #wrap footer .copyText { text-align: center; font-size: 1.1rem; line-height: var(--footer-height); height: var(--footer-height); color: #aaa; } #wrap footer .copyText em { color: rgb(var(--basic-color-60)); font-weight: 700; } .sliderControl-wrap .sliderControl .inner * { color: #999; } /**-- mainTop-wrap --**/ .main-wrap { padding-top: var(--header-height); height: 100%; display: flex; flex-flow: column; } .mainTop-wrap { flex: 1; position: relative; background: linear-gradient(to bottom, #fff, rgb(var(--basic-gray-color-30))); } .emergencyCall-wrap { height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; flex-flow: column; background-color: rgb(var(--gray-color-90)); border-radius: var(--radius-m); } .emergencyCall { position: relative; z-index: 10; display: flex; flex: 1; align-items: center; min-height: 26rem; } .emergencyCall-btn { position: relative; z-index: 1; width: 100%; height: 100%; width: 45vw; height: 45vw; max-width: 18rem; max-height: 18rem; color: #fff; border: none; border-radius: 50%; cursor: pointer; } .emergencyCall-btn:before, .emergencyCall-btn:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; z-index: -1; width: 40%; height: 40%; border-radius: 50%; opacity: 1; } .emergencyCall-btn:before { background-color: rgb(var(--basic-color-50)); animation: pulse 1.5s ease-in infinite; } .emergencyCall-btn:after { background-color: rgb(var(--basic-color-70)); animation: pulse 1.5s ease-out infinite; } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1.5); } 50% { opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(5) ; opacity: 0; } } @keyframes pulse-2 { 0% { transform: translate(-50%, -50%) scale(5); } 50% { opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(7); opacity: 0; } } .emergencyCall-btn > .inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; position: relative; background: linear-gradient(to bottom, rgba(var(--basic-color-45),1) 0%, rgba(var(--basic-color-50),1) 98%); border-top: 2px solid rgba(var(--basic-color-5),0.2); border-bottom: 2px solid rgba(var(--basic-color-70),0.2); /* box-shadow: 2px 2px 5px rgba(var(--basic-gray-color-70),0.5), 4px 4px 8px rgba(var(--basic-gray-color-70),0.5); */ transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .emergencyCall-btn.clicked > .inner { transition: all 0.3s ease-out; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2), inset 12px 12px 24px rgba(0,0,0,0.2), inset -12px -12px 24px rgba(255,255,255,0.1) !important; transform: scale(0.97); } .emergencyCall-btn-text > * { display: block; } .emergencyCall-btn-text i { font-size: 7rem; line-height: 1.1; } .emergencyCall-btn-text i:before { text-shadow: 2px 2px 3px rgba(var(--basic-color-70),0.8), -2px -2px 3px rgba(var(--basic-color-30),0.5); /* background-color: #fff; color: transparent; background-clip: text; */ } .emergencyCall-btn-text span { padding: 0.4rem 2rem 0.4rem; background-color: rgba(0, 0, 0, 0.15); font-size: 1.5rem; border-radius: 9999px; margin-top: 0.7rem; box-shadow: 1px 1px 0px rgba(255,255,255,0.1), -1px -1px 0px rgba(255,255,255,0.1), inset 1px 1px 0px rgba(0,0,0,0.2); } .wave { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; width: 10vw; height: 10vw; border-radius: 50%; opacity: 0; /* box-shadow: 20px 20px 60px rgba(var(--basic-gray-color-50),0.8), -20px -20px 60px rgba(var(--basic-gray-color-5),1); */ will-change: transform, opacity; animation: wave_grow 2s ease-out forwards, wave_opacity 2s ease-out forwards; } @media (min-width: 1024px){ .wave { animation: wave_grow 4s ease-out forwards, wave_opacity 4s ease-out forwards; } } .wave::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 20px 20px 60px rgba(0,0,0, 0.8), inset -20px -20px 60px rgba(var(--basic-gray-color-70),1); } @keyframes wave_grow { from { transform: translate(-50%, -50%) scale(0.5); } to { transform: translate(-50%, -50%) scale(15); } } @keyframes wave_opacity { 0% { opacity: 0; } 10% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; } } .guardian-btn:before { background-color: rgb(var(--blue-color-50)); } .guardian-btn:after { background-color: rgb(var(--blue-color-70)); } .guardian-btn > .inner { background: linear-gradient(to bottom, rgba(var(--blue-color-50),1) 0%, rgba(var(--blue-color-60),1) 98%); border: 0; /* box-shadow: 2px 2px 5px rgba(var(--basic-gray-color-70),0.5), 4px 4px 8px rgba(var(--basic-gray-color-70),0.5); */ } .guardian-btn > .inner .emergencyCall-btn-text i:before { text-shadow: 2px 2px 3px rgba(var(--blue-color-70),0.8), -2px -2px 3px rgba(var(--blue-color-30),0.5); } .corporationTop-wrap { padding-top: calc(var(--header-padding) + 4rem); padding-bottom: 11rem;; background-image: url("/style_www/img/main/bg/corporation.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; border-radius: 1rem; background-color: rgb(var(--green-color-5)); border: 1px solid rgb(var(--green-color-10)); } .corporationTop-wrap h3 { background-color: rgb(var(--green-color-60)); width: max-content; padding: 0.3rem 3rem 0.5rem;; border-radius: 9999px; margin-left: auto; margin-right: auto; } .corporationTop-wrap h3 strong { font-family: var(--special-font); font-weight: normal; color: rgb(var(--green-color-5)); font-size: 1.6rem; } #emergencyModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:9999; } #emergencyModal .inner { display: flex; align-items: center; height: 100%; } .emergencyModal-content { padding: 2rem; border-radius: var(--radius-m); background-color: #fff; text-align: center; width: 80%; max-width: 45rem; margin: auto; } .emergencyModal-content h2 { font-size: 3.5rem; font-weight: 900; font-family: var(--special-font); } .emergencyModal-content p { color: #888; font-size: 1.7rem; } .emergencyModal-btn { display: flex; gap: 1rem; margin-top: 1.5rem; } .emergencyModal-btn > * { padding: 1.5rem 0; } .topBtns { display: flex; background-color: #222; overflow: hidden; width: 100%; font-size: 1.6rem; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.05), 1px 1px 1px rgba(255, 255, 255, 0.7); border-top: 1px solid rgba(var(--basic-gray-color-70), 0.3); position: relative; z-index: 11; } .topBtns > * { flex: 1; min-width: 50%; color: #fff; padding: 1.3rem 1rem; text-align: center; display: flex; gap: 0.5rem; align-items: center; justify-content: center; } .topBtns > * + * { border-left: 1px solid rgba(var(--basic-gray-color-70), 0.3); } .topBtns > * em { font-size: 1.5rem; color: #aaa; } .guardian-select-list > * i { color: rgb(var(--blue-color-50)); } .parental-info > * i { color: rgb(var(--basic-color-50)); } .guardian-select-list > * strong { font-weight: 500; } /**-- mainTop-wrap end --**/ .mainTop-wrap + .mainContent-wrap { background-color: #fff; position: relative; z-index: 10; background-color: rgb(var(--basic-gray-color-30)); box-shadow: 0px -1px 2px rgba(var(--basic-gray-color-40),0.5), 0px -6px 24px rgba(var(--basic-gray-color-40),0.2); padding-top: 2.5rem; padding-top: clamp(2rem, 3vw, 4rem); } /** mainBasic **/ .mainContent-wrap + .mainContent-wrap { margin-top: clamp(1.5rem, 3vw, 3rem) } /* .mainContent-wrap { padding-top: 2.5rem; padding-bottom: 2.5rem; padding-top: clamp(2.5rem, 3vw, 4rem); padding-bottom: clamp(2.8rem, 3.5vw, 4.5rem); } */ .mainContent-wrap section { position: relative; } .mainContent-title { display: flex; align-items: flex-end; font-size: 1.5rem; } .mainContent-title-text { position: relative; padding: 1rem 2rem 0 1.5rem; background-color: #fff; color: #333; border-radius: var(--radius-m) 25px 0 0; } .mainContent-title-text .curve-left, .mainContent-title-text .curve-right { position: absolute; bottom: 0; width: 2.5rem; height: 2.5rem; } .mainContent-title-text .curve-left { right: calc(100% - 2px); } .mainContent-title-text .curve-right { left: calc(100% - 2px); } .mainContent-title h3 { padding-left: 0.5rem; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.8rem; } .mainContent-title h3 > * { font-family: var(--special-font); } .mainContent-title h3 strong { font-weight: 800; color: rgb(var(--basic-gray-color-80)); position: relative; transform: translateY(0.07em); } .mainContent-title h3 span { font-size: 0.8em; font-weight: 600; margin-right: 0.3em; color: rgb(var(--basic-gray-color-60)); letter-spacing: -0.01em; } .mainMore { position: absolute; top: -0.2rem; right: 0; padding: 1.1rem; border-radius: 50%; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .05); } .mainMore i { display: block; width: 1.2rem; height: 1.2rem; text-indent: -999999px; font-size: 0; position: relative; transition: all 0.3s ease; } .mainMore i:before, .mainMore i:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #555; } .mainMore i:before { width: 2px; height: 100%; } .mainMore i:after { width: 100%; height: 2px; } .mainMore:hover i, .mainMore:focus i { transform:rotate(-180deg); -webkit-transform:rotate(-180deg); } .mainMore:hover i:before, .mainMore:hover i:after, .mainMore:focus i:before, .mainMore:focus i:after { background-color: rgb(var(--basic-color-50)); } /** mainBoard-wrap **/ .mainBoard-content-wrap { background-color: #fff; border-radius: 0 var(--radius-m) var(--radius-m) var(--radius-m); padding: 0.6rem 1rem 0.8rem; } .mainBoard-content { padding: 1rem 0.5rem; } .mainBoard .slick-list { margin: 0 -1rem; } .mainBoard .slick-slide { margin: 0 1rem; } .mainBoard a { display: block; padding: 1rem 0; background-color: rgba(var(--gray-color-20)); border-radius: var(--radius-s); padding: 1.5rem;} .mainBoard a strong { display: block; font-weight: 400; display: flex; align-items: center; font-size: 1.7rem;} .mainBoard a > span { display: block; color: #888; font-size: 1.4rem; width: 10rem; text-align: left; margin-top: 0.5rem; } .mainBoard li:nth-child(4n+1) a{ background-color: rgba(var(--basic-color-5),1); } /* 1, 5, 9... */ .mainBoard li:nth-child(4n+2) a{ background-color: rgba(var(--blue-color-5),1); } /* 2, 6, 10... */ .mainBoard li:nth-child(4n+3) a{ background-color: rgba(var(--green-color-5),1); } /* 3, 7, 11... */ .mainBoard li:nth-child(4n) a{ background-color: rgba(var(--yellow-color-10),1); } /* 4, 8, 12... */ .mainBoard-wrap .sliderControl-wrap .sliderControl { justify-content: center; } /** mainBoard-wrap end **/ .mainContent-banner { border-radius: var(--radius-m); overflow: hidden; display: flex; justify-content: center; background-color: #95d8ff; } .mainContent-banner img { display: block; height: 100px; } /** mainEdu-wrap **/ .mainContent-edu { padding-bottom: clamp(3.5rem, 3.5vw, 4.5rem); } .mainEdu-content-wrap { background-color: #fff; border-radius: 0 var(--radius-m) var(--radius-m) var(--radius-m); padding: 1.6rem 1.5rem 0.8rem; } .mainEdu-content { position: relative; } @media (max-width: 600px){ .mainEdu-content:after { content: ''; display: block; width: 4rem; height: 100%; position: absolute; top: 0; z-index: 10; opacity: 1; right: -1.5rem; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } } /* .mainEdu-content { padding: 1rem 0.5rem; } */ .mainEdu .applyItem { background-color: #fff; } .mainEdu .slick-list { margin: 0 -1rem; } .mainEdu .slick-track { display: flex; } .mainEdu .slick-slide { margin: 0 1rem; } .mainEdu .slick-list:before, .mainEdu .slick-list:after { content: ''; display: block; width: 2rem; height: 100%; position: absolute; top: 0; z-index: 10; opacity: 0; } .mainEdu .slick-list:before { left: 0; background: linear-gradient(to left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } .mainEdu .slick-list:after { right: 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } .mainEdu.slideStart .slick-list:before, .mainEdu.slideStart .slick-list:after { opacity: 1; transition: opacity .2s cubic-bezier(.215,.61,.355,1); } .mainEdu-wrap .sliderControl-wrap { margin-top: 0.8rem; } .mainEdu-wrap .sliderControl-wrap .sliderControl { justify-content: center; } /* .mainEdu-wrap .sliderControl-wrap { display: flex; gap: 1rem; position: absolute; top: -0.4rem; right: 0; } .mainEdu-wrap .sliderControl { gap: 0.4rem; } .mainEdu-wrap .sliderControl button { width: 3.2rem; height: 3.2rem; border: 1px solid #9B9DB2; border-radius: 50%; } .mainEdu-wrap .mainMore { display: block; position: static; width: 3.2rem; height: 3.2rem; padding: 0.9rem; background-color: var(--gray-color-bright); } */ /** mainEdu-wrap end **/ .subPage-institution { padding-bottom: 0 !important; } .institutionContainer-wrap { padding: 0 !important; height: calc(100dvh - var(--header-height) - 31px); } #map-container { position: relative; width: 100%; height: 100%; } #map { width: 100%; height: 100%; } .search-box { position: absolute; top: 10px; left: 10px; z-index: 10; width: calc(100% - 20px); display: flex; gap: 1rem; } .search-box > * { box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; border-radius: 9999px !important; } .search-box input { flex: 1; min-width: 1px; border: 0 !important; padding: 1.4rem 2rem 1.2rem !important; border: 0 !important; } .search-box #searchBtn { display: flex; align-items: center; padding: 0 2rem; background-color: rgb(var(--basic-color-50)); } .search-box #searchBtn i { color: #fff; font-size: 1.7rem; } .search-box #searchBtn span { display: none; } .my-location-btn { position: absolute; bottom: 10px; right: 10px; z-index: 10; background: #fff; border: 1px solid #ccc; padding: 6px 10px; cursor: pointer; border-radius: 4px; font-weight: bold; } .my-location-btn i { font-weight: normal; font-size: 2rem; color: rgb(var(--blue-color-50)); } .my-location-btn span { display: none; } .info-content { padding: 10px; font-size: 13px; min-width: 150px; } .info-title { font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid #eee; } .searchContainer .searchContainer-insert button, .searchContainer .searchContainer-insert a { background-color: rgb(var(--gray-color-90)); border-color: #000; } .searchContainer .searchContainer-insert button:hover, .searchContainer .searchContainer-insert a:hover { background-color: #000; border-color: #000; } .inviteTab-wrap { background-color: #f3f4f5; border-bottom: 1px dashed #dedede; } .inviteTab-wrap ul { display: flex; align-items: center; padding: 1rem 0 1rem; } .inviteTab-wrap ul li { width: 50%; } .inviteTab-wrap ul li button { display: block; text-align: center; font-size: 1.6rem; width: 100%; background-color: rgba(var(--gray-color-30),0.8); border: 1px solid #dedede; padding: 1rem; color: #888; } .inviteTab-wrap ul li:first-child button { border-radius: 0.5rem 0 0 0.5rem; } .inviteTab-wrap ul li:last-child button { border-radius: 0 0.5rem 0.5rem 0; } .inviteTab-wrap ul li button.active { border-color: rgb(var(--gray-color-90)); background-color: rgb(var(--gray-color-80)); color: #fff; } .inviteTab-wrap ul li:first-child button:not(.active) { border-right: 0; } .inviteTab-wrap ul li:last-child button:not(.active) { border-left: 0; } .invite-list { border-bottom: 1px solid rgb(var(--gray-color-50)); } .invite-list li { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 0; } .invite-list li + li { border-top: 1px solid rgb(var(--gray-color-30)); } .invite-list li > i { display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; font-size: 2rem; border-radius: 9999px; background-color: rgba(var(--basic-color-20),0.8); } .invite-list li > i:before { color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } .invite-list li:nth-child(odd) > i { background-color: rgba(var(--gray-color-40),0.8); } .invite-list li dd { font-size: 1.5rem; color: rgba(var(--gray-color-70),1); } .invite-list li button { width: max-content; border-radius: 0.5rem; } .invite-list li > button { margin-left: auto; width: max-content; font-size: 1.5rem; } .invite-list li:first-child { padding-top: 0; } .invite-list li > .btn-group { margin-left: auto; display: flex; gap: 0.5rem; } .rep-badge { color: rgb(var(--basic-color-50)); font-size: 1.6rem; } .mynotiContainer-wrap { padding-left: 0; padding-right: 0; } .mynoti-item { background: #fff; border-bottom: 1px solid #ddd; overflow: hidden; } .mynoti-item:first-child { border-radius: 8px 8px 0 0; } .mynoti-item:last-child { border-radius: 0 0 8px 8px; } .mynoti-title, .mynoti-content { padding-left: 2.5rem; padding-right: 2.5rem; } .mynoti-title { padding: 1.5rem 3.5rem 1.5rem 2.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; user-select: none; /* 텍스트 드래그 방지 */ } .mynoti-title .arrow { width: 10px; height: 10px; border-top: 2px solid #333; border-right: 2px solid #333; transform: rotate(135deg); transition: 0.3s; } .mynoti-content { display: none; padding: 1.5rem 2.5rem; background: #fafafa; border-top: 1px solid #eee; color: #666; line-height: 1.6; } .mynoti-item .mynoti-title strong > * { display: block; font-weight: 500; } .mynoti-item .mynoti-title strong em { font-size: 1.4rem; color: rgb(var(--gray-color-70)); font-weight: 400; } .mynoti-item.active .mynoti-title strong span{ color: var(rgb(--basic-color-60)); } .mynoti-item.active .arrow { transform: rotate(-45deg); border-color: #007bff; } /** ************************************************** **/ .subHeader { display: flex; align-items: center; gap: 0.5rem; } .subHeader a { font-size: 2.6rem; padding-top: 0.1rem; } .subHeader h1 { font-family: var(--special-font); font-size: 2rem; padding-top: 0.2rem; } .subPage { padding-top: 0 !important; } .path-wrap/* , .searchContainer .customSelect */ { visibility: hidden; width: 0; height: 0; overflow: hidden; margin: 0; } .pageTitle-wrap { padding-top: 3rem; margin-bottom: 0; display: none; } .searchContainer-wrap .searchDetail-wrap, .subHero-wrap:before, .subHero-wrap:after, .subHero-text, .subNav-wrap, .pageTitle-wrap { display: none !important; } .subHero-wrap { background-image: none !important; } .searchContainer-wrap { padding: 0 !important; margin-bottom: 2rem; } .searchContainer > .inner { padding: 1rem 2.5rem; border-bottom: 1px solid rgb(var(--basic-gray-color-20)); max-width: initial !important; } /* .searchContainer .searchContainer-insert { border: 0; } .searchContainer .searchContainer-insert input { padding: 1rem 1.2rem; font-size: 1.6rem; border: 1px solid #dcdcdc; } */ /** subPage-wrap **/ .pageTitle { padding-top: 0rem; padding-bottom: 1rem; display: flex; align-items: end; border-bottom: 1px solid #dedede; } .pageTitle h2 { margin-bottom: 0.2rem; font-size: 3rem; display: block; } .pageTitle h2 strong { font-family: var(--special-font); } .pageTitle-right { display: none; text-align: right; flex: 1; } .location-wrap { margin-right: 2rem; } .location-wrap, .pageBtn-wrap { display: inline-block; vertical-align: middle; } .pageBtn-wrap ul li + li { margin-left: 0.8rem; } .pageBtn-wrap ul li > * { background-color: #ebeded; border-radius: 1.5rem; color: #7f8893; width: 40px; height: 40px; text-align: center; display: block; font-size: 0; } .pageBtn-wrap ul li > *:hover { background-color: var(--special-color); color: #fff; } .pageBtn-wrap ul li > * i:before { font-size: 1.6rem; line-height: 40px; } .searchContainer-wrap { padding-top: 1.5rem; } .subPage { padding-bottom: 4rem; } .subPage-topNav #subNav-list li a { font-size: 1.6rem; } @media (min-width: 980px){ .pageTitle { padding-bottom: 1.5rem; } } @media (min-width: 1024px){ /* .subNav-wrap { display: block; } */ .subPage { padding-top: 2rem; padding-bottom: 8rem; } .pageTitle-wrap { display: block; padding-top: 4rem; } .pageTitle-right { display: block; margin-left: auto; padding-bottom: 0.8rem; } .searchContainer-wrap { padding-bottom: 3rem; } } @media (min-width: 1360px){ .subPage { padding-bottom: 10rem; } .sumery-wrap { visibility: hidden; height: 0; overflow: hidden; } .pageTitle { padding-bottom: 2rem; } .pageTitle h2 { font-size: 3.2rem; } } .subContent { margin-top: 1.5rem; } .subContent-wrap { margin-top: 2rem; } .subContent-wrap ~ .subContent-wrap { margin-top: 3rem; } .subContent-wrap > section { max-width: var(--max-width); margin-left: auto; margin-right: auto; } @media (min-width: 1024px){ .subContent-wrap { margin-top: 2rem; } .subContent-wrap ~ .subContent-wrap { margin-top: 4rem; } } @media (min-width: 1360px){ .subContent-wrap ~ .subContent-wrap { margin-top: 5rem; } } .subContent-title { font-size: 2.3rem; position: relative; } .subContent-title h3 { display: block; padding-left: 3rem; position: relative; font-size: 1em; padding-bottom: 2rem; } .subContent-title h3 * { font-family: var(--special-font); display: inline-block; vertical-align: middle; } .subContent-title h3 span { font-weight: normal; padding-right: 0.5em; display: none; } .subContent-title h3 strong { font-weight: 600; color: var(--basic-color); } .subContent-title h3:before { content: ''; display: block; width: 1.9rem; height: 1.9rem; position: absolute; left: 0; top: 0.4em; background: url("/style_www/img/common/icon/title_dot.png") no-repeat center; background-size: contain; } .subContent-title h3 strong span { font-weight: normal; font-size: 0.8em; } .subContent-title h4 { font-size: 0.8em; display: block; padding-left: 3rem; position: relative; padding-bottom: 1.3rem; } .subContent-title h4 * { font-family: var(--special-font); display: inline-block; vertical-align: middle; font-weight: normal; } .subContent-title h4:before { content: ''; display: block; width: 1.4rem; height: 1.4rem; position: absolute; top: 0.4em; left: 0.5rem; border-radius: 0.3rem; border: 0.2rem solid var(--special-color); } .subContent-title h5 { font-size: 0.75em; display: block; position: relative; padding-bottom: 1.3rem; } .subContent-title h5 * { font-family: var(--special-font); display: inline-block; vertical-align: middle; font-weight: normal; } * ~ .subContent-title { margin-top: 3rem; } .subContent-title .initialBtn { font-size: 1.6rem; width: 8rem; position: absolute; right: 0; bottom: 2rem; padding: 0.7rem 0.8rem; } @media (min-width: 980px){ .subContent-title h3 span { display: inline-block; } } @media (min-width: 1024px){ .subContent-title { font-size: 2.4rem; } .subContent-title h3 { padding-bottom: 2.5rem; } } .subContent-text { font-size: 1.8rem; } .colorBg-box { background-color: var(--basic-color-white); padding: 2rem 3rem; border-radius: 1.5rem; display: flex; align-items: center; } .colorBg-box img { width: 7rem; margin-right: 1.5rem; } .colorBg-box dl { flex: 1; } .colorBg-box dl dt { font-weight: 900; text-transform: uppercase; font-size: 2.2rem; } .colorBg-box dl dd { color: #555; margin-top: 0.7em; line-height: 1.5; } @media (min-width: 1024px){ .colorBg-box { padding: 2.5rem 3rem; } .colorBg-box img { width: 12rem; margin-left: 3rem; } .colorBg-box dl { padding-top: 1rem; padding-bottom: 1rem; } .colorBg-box dl dt { font-size: 2.6rem; } } @media (max-width: 640px){ .colorBg-box img { display: none; } .colorBg-box dl { padding-left: 0.5rem; } } .simpleText-box { background-color: var(--basic-color-bright); padding: 3rem 3rem; border-radius: 1.5rem; } .simpleText-box dl { font-size: 2rem; } .simpleText-box dl dt { font-weight: 900; text-transform: uppercase; } .simpleText-box dl dt span { display: none; } .simpleText-box dl dd { color: #555; font-size: 0.7em; margin-top: 0.7em; line-height: 1.5; } @media (min-width: 1024px){ .simpleText-box dl { display: table; font-size: 2.4rem; } .simpleText-box dl > * { display: table-cell; vertical-align: top; } .simpleText-box dl dt { min-width: 160px; } .simpleText-box dl dt span { display: inline; } .simpleText-box dl dd { font-size: 0.65em; margin-top: 0; } } .borderTop-box { margin-bottom: 1.5rem; padding: 2rem; border: 1px solid #cecece; border-top: 0.3rem solid var(--basic-color); line-height: 1.7; border-radius: 3px; } @media (min-width: 768px){ .borderTop-box { padding: 3rem; } } .customCheckbox label span { font-size: 1.5rem; } .borderTop-box-agree { font-size: 1.5rem; line-height: 1.5; } .borderTop-box-agree .thinTable { table-layout: fixed; width: 100%; margin: 1rem 0;} .borderTop-box-agree .thinTable th, .thinTable td { border: 1px solid #dedede; padding: 0.5rem 0.2rem; text-align: center; } .borderTop-box-agree .thinTable th { border-top-color: #252525; } .basicTable-wrap table.alignCenter-all *, .basicTable-wrap table.alignCenter-all tbody td:nth-child(2) { text-align: center; } .basicTable-wrap table.alignCenter-all tbody td.alignLeft { padding-left: 1.5rem; } .subImg-box { border: 1px solid #ddd; background: #fff; padding: 1rem 1rem; border-radius: 0.6rem; } .subImg-box img { margin: auto; } .pcImg { display: none; } @media (min-width: 720px){ .subImg-box { padding: 2rem; } .mobileImg { display: none; } .pcImg { display: block; } } @media (min-width: 950px){ .subImg-box { padding: 5rem 8rem; } } /* @media (min-width: 1024px){ .subImg-box { padding: 5rem 15rem; } } */ .subContent-lineBox { background-image: url("/style_www/img/common/pattern/diagonal.gif"); padding: 2rem; border: 1px solid #ddd; border-radius: 0.5rem; font-size: 1.7rem; } .subContent-lineBox > * { display: block; line-height: 1.5; } .subContent-lineBox strong { font-size: 1.1em; } .subContent-lineBox p { margin-top: 1rem; } .subContent-lineBox .dotList li { font-size: 1.7rem } .subContent-lineBox .dotList li:before { top: 0.6em; } @media (min-width: 950px){ .subContent-lineBox { padding: 3rem; } } .fileDown-list a { color: #555; } .fileDown-list a * { display: inline-block; vertical-align: middle; } .fileDown-list a i { background-color: #4179c6; color: #fff; font-size: 0; padding: 0.2rem 1rem; border-radius: 2rem; margin-left: 0.2rem; } .fileDown-list a i:before { font-size: 1.3rem; } .fileDown-list a:hover span { text-decoration: underline; } .fileDown-list a:hover i { background-color: #013e6c; } .dotList-s li + li { margin-top: 0.5rem; } .dotList-s li:before { top: 0.65em; } .dotList strong { display: block; } .dotList .dotList-s { margin-top: 1rem; } .dotList .dotList-s li { font-size: 0.9em; } .dotList .dotList-s li + li { margin-top: 0.5rem; } .dotList sub { transform: translateY(-25%); display: inline-block; color: #555; } .dotList-num > li + li { margin-top: 0.9em; } /** subContent-wrap end **/ /** pageTab-wrap **/ .pageTab-wrap { padding: 1rem 0 3rem; } .pageTab { border-bottom: 2px solid var(--special-color); } .pageTab.maxWidth { padding: 0; } .pageTab > ul:after { content: ''; display: block; clear: both; } .pageTab > ul { margin-left: 0; transform: translateY(2px); } .pageTab > ul > li { float: left; padding-left: 0; } .pageTab > ul > li a { display: block; font-size: 3.2vw; padding: 1.5rem 1.5rem; text-align: center; position: relative; background-color: #fff; color: #aaa; font-weight: 500; border-radius: 0.2rem; } .pageTab > ul > li a:before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 0; height: 100%; background-color: rgba(0,0,0, 0); transition: all 0.2s ease-in-out; } .pageTab > ul > li a:hover:before { width: 100%; background-color: rgba(0,0,0, 0.1); } .pageTab > ul > li.active a { border: 2px solid var(--special-color); border-bottom: 0; color: #333; border-radius: 0.5rem 0.5rem 0 0; } .pageTab > ul > li a span { font-size: 0.95em; } .pageTab > ul > li.active a span { font-size: 1em; } .pageTab_2 > ul > li { width: 50%; } .pageTab_3 > ul > li { width: 33.333333%; } @media (min-width: 600px){ .pageTab > ul > li a { font-size: 1.7rem; } } @media (min-width: 750px){ .pageTab > ul > li { width: inherit; } .pageTab > ul > li a { font-size: 1.8rem; padding: 1.7rem 2.5rem; } .pageTab-wrap { padding: 1rem 0 5rem; } } @media (max-width: 749.9px){ .pageTab_4 { border-bottom: 0; } .pageTab_4 > ul { margin-left: -0.3rem; margin-top: -0.5rem; display: flex; flex-wrap: wrap; } .pageTab_4 > ul > li { width: 50%; padding-left: 0.3rem; padding-top: 0.5rem; } .pageTab_4 > ul > li a { border: 2px solid var(--gray-color); border-radius: 0.5rem; } .pageTab_4 > ul > li.active a { border-bottom: 2px solid var(--special-color); border-radius: 0.5rem; } .pageTab_5 { border-bottom: 0; } .pageTab_5 > ul { margin-left: -0.3rem; margin-top: -0.5rem; display: flex; flex-wrap: wrap; } .pageTab_5 > ul > li { width: 50%; padding-left: 0.3rem; padding-top: 0.5rem; } .pageTab_5 > ul > li:nth-child(n + 3) { width: 33.33333333333%; } .pageTab_5 > ul > li a { border: 2px solid var(--gray-color); border-radius: 0.5rem; } .pageTab_5 > ul > li.active a { border-bottom: 2px solid var(--special-color); border-radius: 0.5rem; } } /** pageTab-wrap end **/ /** boxTitle **/ .boxTitle { position: relative; font-family: var(--special-font); text-align: center; font-size: 2rem; padding: 4rem 2rem; border: 0.7rem solid #ededed; word-break: keep-all; } .boxTitle:before { content: ''; position: absolute; top: -0.7rem; left: -0.7rem; width: 3rem; height: 3rem; border-top: 0.7rem solid var(--special-color); border-left: 0.7rem solid var(--special-color); } .boxTitle:after { content: ''; position: absolute; bottom: -0.7rem; right: -0.7rem; width: 3rem; height: 3rem; border-bottom: 0.7rem solid var(--basic-color); border-right: 0.7rem solid var(--basic-color); } .boxTitle strong { font-family: var(--special-font); } /** boxTitle end **/ /** taskTab-wrap **/ .taskTab { margin-bottom: 1.5rem; } .taskTab ul { font-size: 0; } .taskTab ul > li { display: inline-block; vertical-align: middle; width: 50%; position: relative; border: 1px solid #dedede; border-top: 0; } .taskTab ul > li:first-child { border-top: 1px solid #dedede; border-radius: 1rem 0 0 0; overflow: hidden; } .taskTab ul > li:nth-child(2) { border-top: 1px solid #dedede; border-radius: 0 1rem 0 0; } .taskTab ul > li:last-child { border-radius: 0 0 1rem 0; } .taskTab ul > li:nth-last-child(2) { border-radius: 0 0 0 1rem; } .taskTab ul > li:nth-child(2n) { border-left: 0; } .taskTab ul > li > .inner { display: block; position: relative; width: 100%; padding: 1.3rem 1.5rem; text-align: left; color: #555; } .taskTab ul > li > .inner > * { display: inline-block; vertical-align: middle; letter-spacing: -0.05px; word-spacing: -0.1px; } .taskTab ul > li > .inner > em { font-size: 3vw; } .taskTab ul > li > .inner > span { font-size: 1.4rem; color: #01306c; } .taskTab ul > li.active { border-color: var(--special-color) !important; } .taskTab ul > li.active > .inner *, .taskTab ul > li > .inner:hover * { color: var(--special-color); font-weight: 500; } .taskTab ul > li.active:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; border-bottom: 0.8rem solid transparent; border-top: 0.8rem solid var(--special-color); border-left: 0.8rem solid var(--special-color); border-right: 0.8rem solid transparent; } .taskTab ul > li + li.active:after { content: ''; display: block; width: calc(100% + 2px); height: calc(100% + 2px); position: absolute; left: -1px; top: -1px; border: 1px solid var(--special-color); border-width: 1px 0 0 1px; } .taskTab ul > li:nth-child(2).active:after { border-top: 0; } .taskTab ul > li:nth-last-child(2).active:after { border-radius: 0 0 0 1rem; } @media (min-width: 500px){ .taskTab ul > li > .inner > em { font-size: 1.5rem; } } @media (min-width: 950px){ .taskTab { display: table; table-layout: fixed; width: 100%; margin-bottom: 3rem; } .taskTab ul { display: table-row; margin: 0; } .taskTab ul > li { display: table-cell; vertical-align: middle; border: 1px solid #dedede; border-left: 0; } .taskTab ul > li:first-child { border-left: 1px solid #dedede; border-radius: 1rem 0 0 1rem; } .taskTab ul > li:nth-child(2) { border-radius: 0; } .taskTab ul > li:last-child { border-radius: 0 1rem 1rem 0; } .taskTab ul > li:nth-last-child(2) { border-radius: 0; } .taskTab ul > li > .inner { font-size: 1.4rem; border-radius: 0; padding: 1.2rem 1.5rem; } .taskTab ul > li > .inner > * { display: block; } .taskTab ul > li > .inner > em { font-size: 1.5rem; } .taskTab ul > li > .inner > span { padding-top: 0.5rem; } .taskTab ul > li:last-child.active:after { border-top: 0; } } @media (min-width: 1024px){ .taskTab ul > li > .inner { font-size: 1.5rem; } } @media (min-width: 1360px){ .taskTab ul > li > .inner > * { display: inline-block; } .taskTab ul > li > .inner > span { padding-top: 0; } } .task-wrap .boardSearch { padding: 2rem 0 1rem; } .task-wrap .filter-wrap { margin-bottom: 1rem; } .task-wrap .filter-wrap:after { content: ''; display: block; clear: both; } .task-wrap .filter { float: right; } .task-wrap .filter i, .task-wrap .filter .customSelect { display: inline-block; vertical-align: middle; } .task-wrap .filter i { color: #cecece; } .task-wrap .filter .customSelect { width: 10rem; border: 0; } /** taskTab-wrap end **/ .reactiveList dl ~ dl { margin-top: 1.3rem; } .reactiveList dl dt { background-color: rgb(var(--basic-gray-color-10)); padding: 0.8rem; font-weight: 500; border-radius: 0.5rem; color: rgb(var(--basic-gray-color-60)); } .reactiveList dl dd { padding: 0.8rem 0.8rem 0; } @media print, (min-width: 768px){ .reactiveList { display: table; table-layout: fixed; width: 100%; border-top: 2px solid rgb(var(--basic-gray-color-40)); } .reactiveList dl { display: table-row; } .reactiveList dl > * { display: table-cell; padding: 1.5rem 2rem !important; } .reactiveList dl dt { border-radius: 0; width: 25rem; border: 1px solid rgb(var(--basic-gray-color-40)); border-left: 0; border-top: 0; } .reactiveList dl dd { border-bottom: 1px solid rgb(var(--basic-gray-color-40)); } } .reactiveTable { table-layout: fixed; width: 100%; border-top: 2px solid #555; } .reactiveTable th { background-color: rgb(var(--basic-gray-color-10)); font-weight: 500; color: rgb(var(--basic-gray-color-80)); } .reactiveTable tr > * { border-bottom: 1px solid rgb(var(--basic-gray-color-40)); padding: 1.5rem 2rem; } .reactiveTable tr > * + * { border-left: 1px solid rgb(var(--basic-gray-color-40)); } @media print, (max-width: 768px){ .reactiveTable { border-top: 0; } .reactiveTable colspan { display: none; } .reactiveTable, .reactiveTable tbody, .reactiveTable tr, .reactiveTable th, .reactiveTable td { display: block; } .reactiveTable tr + tr, .reactiveTable tr > th ~ th { margin-top: 1rem; } .reactiveTable tr > * { border-bottom: 0; } .reactiveTable tr > * + * { border-left: 0; } .reactiveTable tr > th { border: 1px solid rgb(var(--basic-gray-color-40)); padding: 0.6rem 1.5rem; border-radius: 0.5rem 0.5rem 0 0; font-size: 1.6rem; } .reactiveTable tr > td { padding: 0.8rem 1.5rem 0.8rem; border-radius: 0 0 0.5rem 0.5rem; border: 1px solid rgb(var(--basic-gray-color-40)); border-top: 0; } /* .reactiveTable tr:last-child > *:last-child { padding-bottom: 0; } */ } /*--------------- apply ----------------*/ .searchDetail-info { display: flex; align-items: center; justify-content: flex-end; /* border-bottom: 1px solid #cdcdcd; */ padding: 1.5rem 0 1rem; } .searchDetail-info p { flex: 1; font-size: 1.5rem; text-align: left; display: none; } .searchDetail-info button { line-height: 4rem; height: 4rem; } .searchDetail-info button:hover, .searchDetail-info button:focus { color: rgb(var(--special-color-50)); } .searchDetail-info .searchDetail-solt { font-size: 1.4rem; padding: 0 2rem; } .searchDetail-info .searchDetail-solt .xi-filter:before { font-size: 1.2rem; padding-right: 0.5rem; } .searchDetail-info .searchDetail-solt.active { color: var(--basic-color-deep); } .searchDetail-info .listType button { border: 1px solid #ccc; width: 4rem; font-size: 0; } .searchDetail-info .listType button i:before { font-size: 2rem; display: block; line-height: 4rem; height: 4rem; color: #ccc } .searchDetail-info .listType button:first-child { border-right-color: var(--basic-color); } .searchDetail-info .listType button:last-child { border-left: 0; } .searchDetail-info .listType button.active { border-color: var(--basic-color); } .searchDetail-info .listType button.active i:before { color: var(--basic-color-deep); } .searchDetail-info .listType button:hover i:before, .searchDetail-info .listType button:focus i:before { color: rgb(var(--special-color-50)); } .searchDetail-option { padding: 1.2rem 0 2rem; border-top: 1px solid #cdcdcd; } .searchDetail-option dl { text-align: left; display: flex; padding: 0.3rem 0; } .searchDetail-option dl dt { font-size: 1.5rem; font-weight: 600; width: 12rem; line-height: 4.2rem; } .searchDetail-option dl dd { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; flex-shrink: 0; -webkit-flex-shrink: 0; align-items: center; } .searchDetail-option dl dd > .customCheckbox { padding-right: 1.5rem; line-height: 4.2rem; color: #777; } .searchDetail-option dl dd > .customCheckbox:last-child { padding-right: 0; } .searchDetail-option dl + dl { padding-bottom: 1.5rem; } @media (hover: none) and (pointer: coarse) { /* 터치가능한 디바이스(스마트폰, 터치스크린) */ .searchDetail-option dl dd::-webkit-scrollbar { display: none; } } @media (hover: hover) and (pointer: fine) { /* hover 가능(마우스, 터치패드) */ .searchDetail-option dl dd::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; background-color: rgb(var(--special-color-20)); border-radius: 1rem; opacity: 0.3; } .searchDetail-option dl dd::-webkit-scrollbar-thumb { background-color: rgb(var(--special-color-50)); border-radius: 1rem; cursor: pointer; } } @media (min-width: 1024px){ .searchDetail-info p { display: block; } .searchDetail-option { padding: 0.5rem 0; } .searchDetail-option dl { padding: 1rem 0; } .searchDetail-option dl + dl { border-top: 1px solid #dedede; } .searchDetail-option dl dt { width: 15rem; line-height: 3.5rem; } .searchDetail-option dl dd { flex-wrap: wrap; } .searchDetail-option dl dd > .customCheckbox { line-height: 3.5rem; } } .applyInfo-field i { font-family: var(--basic-font); color: #777; margin-right: 0.5rem; font-weight: 500; } .applyInfo-field i:after { content: ', '} .applyInfo-field i:last-child::after { display: none; } .applyInfo-solt { color: rgb(var(--special-color-50)); } .applyInfo-solt em { font-weight: 700; } .applyItem-category { font-size: 1.6rem; color: rgb(var(--basic-color-50)); font-weight: 600; } .applyContainer-box > table { display: block; } .applyContainer-box .applyContainer-header { display: none; } .subPage .applyContainer-box .applyItem-none { display: block; } .subPage .applyContainer-box .applyItem-none td { display: block; } .subPage .applyContainer-box .applyItem-wrap { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.4rem; } .applyItem .allLink { outline: 0; } .applyItem:hover .allLink:before, .applyItem .allLink:focus::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(128, 160, 203, 0.05); z-index: 0; } .applyItem-state { display: block; width: 9rem; height: 3rem; line-height: 3rem; text-align: center; margin: auto; background-color: rgb(var(--gray-color-50)); color: #fff; font-size: 1.5rem; font-weight: 400; text-shadow: 0 0 3px rgba(0,0,0,0.2); border-radius: var(--radius-m); } .applyItem.type3 .applyItem-state { background-color: rgb(var(--blue-color-50)); } .applyItem.type4 .applyItem-state { background-color: rgb(var(--gray-color-50)); } .applyContainer-box .applyItem { display: block; position: relative; border: 1px solid #edeff2; box-shadow: 0 2px 4px rgba(0, 0, 0, .05); border-radius: var(--radius-m); overflow: hidden; padding: 3rem 2.5rem 2.5rem; } .applyContainer-box .applyItem > * { display: block; } /* .applyContainer-box .applyItem.type3 { border-color: rgb(var(--blue-color-50)); } .applyContainer-box .applyItem.type4 { border-color: rgb(var(--gray-color-50)) } */ .applyContainer-box .applyItem-state-wrap { position: absolute; top: 0; right: 0; } .applyContainer-box .applyItem-state { border-radius: 0 0 0 var(--radius-m); } .applyContainer-box .applyItem-title { display: block; margin-top: 0.3rem; } .applyContainer-box .applyItem-title > strong, .applyContainer-box .applyItem-title > span { font-size: 2rem; line-height: 150%; font-weight: 600;} .applyContainer-box .applyItem-title > strong { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 150%; height: calc(1.5em * 2); overflow: hidden; word-break: break-all; } .applyContainer-box .applyItem-detail + .applyItem-detail { margin-top: 0.4rem; } .applyContainer-box .applyItem-detail > * { font-size: 1.6rem; } .applyContainer-box .applyItem-detail i { margin-right: 0.4rem; } .applyContainer-box .applyItem-detail span { color: #777; } .applyContainer-box .applyItem-detail-first { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid #dedede; } .applyContainer-list { border: 1px solid #d2d4de; border-radius: var(--radius-xs); overflow-x: auto; } @media (hover: none) and (pointer: coarse) { .applyContainer-list::-webkit-scrollbar { display: none; } } @media (hover: hover) and (pointer: fine) { .applyContainer-list::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; background-color: var(--special-color-white); border-radius: 1rem; opacity: 0.3; } .applyContainer-list::-webkit-scrollbar-thumb { background-color: var(--special-color); border-radius: 1rem; cursor: pointer; } } .applyContainer-list > table { width: 100%; table-layout: fixed; min-width: 110rem; } .applyContainer-list tr > * + * { border-left: 1px solid #E6E8F0;} .applyContainer-list thead th:nth-child(1) { width: 18rem; } .applyContainer-list thead th:nth-child(3) { width: 20rem; } .applyContainer-list thead th:nth-child(4) { width: 20rem; } .applyContainer-list thead th:nth-child(5) { width: 10rem; } .applyContainer-list thead th:nth-child(6) { width: 14rem; } .applyContainer-list thead th { background-color: #F6F7FA; padding: 1.6rem 1rem 1.3rem; } .applyContainer-list tbody tr { position: relative; } .applyContainer-list tbody td { padding: 1.2rem 0.5rem 0.9rem; text-align: center; border-top: 1px solid #E6E8F0; } .applyContainer-list tbody td + td { border-left: 1px solid #E6E8F0; } .applyContainer-list tbody td .allLink { text-align: left; display: block; padding: 0 1rem; } .applyContainer-list tbody td.applyItem-detail em { display: none; } .applyContainer-list tbody td.applyItem-detail { font-size: 1.5rem; } .applyContainer-list .applyItem-category { font-weight: 400; font-size: 1.5rem; } .applyContainer-list .applyItem-basic strong { font-weight: 400; } @media (min-width: 640px){ .subPage .applyContainer-box .applyItem-wrap { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px){ .subPage .applyContainer-box .applyItem-wrap { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1360px){ .subPage .applyContainer-box .applyItem-wrap { gap: 2.5rem; } } .applyView-state { display: block; width: 9rem; padding: 0.4rem 0; text-align: center; background-color: #d4d4dd; color: #fff; font-size: 1.6rem; font-weight: 400; text-shadow: 0 0 3px rgba(0,0,0,0.2); border-radius: var(--radius-m); } .applyView-state.type1 { background-color: var(--gray-color-deep); } .applyView-state.type2 { background-color: var(--special-color-bright); } .applyView-state.type3 { background-color: rgb(var(--blue-color-50)); } .applyView-state.type4 { background-color: rgb(var(--gray-color-50)); } .applyView-state.type5 { background-color: var(--blue-color); } .applyView-state.type6 { background-color: var(--green-color); } .applyItem.type3 .applyItem-state { background-color: rgb(var(--blue-color-50)); } .applyItem.type4 .applyItem-state { background-color: rgb(var(--gray-color-50)); } /*--------------- apply end ----------------*/ /*--------------- inquiry ----------------*/ .inquiry-wrap { margin-top: 2.5rem !important; } .inquiry-wrap .asterisk-info { font-size: 1.6rem; } .inquiry-wrap .form-group { margin-top: 2rem; } .inquiry-wrap .form-item > label { display: block; position: relative; font-weight: 700; margin-bottom: 1rem; padding-left: 1.3rem; } .inquiry-wrap .form-item > label:before { content: ''; display: block; width: 0.6rem; height: 0.6rem; border-radius: 0.18rem; background-color: var(--basic-color); position: absolute; left: 0; top: 0.57em; } .inquiry-wrap .form-item > label .asterisk { color: var(--red-color); transform: translateY(-0.15em); display: inline-block; margin-left: 0.2rem; } .inquiry-wrap .form-item-short input { width: 50rem; max-width: 100%; } .inquiry-wrap .form-item-full input { width: 100%; } .inquiry-wrap .hasError input { border-color: var(--red-color); } .inquiry-wrap .hasError .error { display: block; color: var(--red-color); font-size: 1.6rem; } /*--------------- inquiry end ----------------*/ /*--------------- corporationList ----------------*/ .corporationList-wrap { border: 1px solid #d2d4de; border-radius: var(--radius-xs); overflow: hidden; } #corporationInput { width: 40rem; max-width: 100%; margin-bottom: 1.5rem; } .corporationList-table { width: 100%; table-layout: fixed; text-align: center; font-size: 1.6rem; } .corporationList-table tr { position: relative; overflow: hidden; } .corporationList-table tr > * + * { border-left: 1px solid #E6E8F0; } .corporationList-table th { padding: 1.6rem 1rem 1.3rem; background-color: #F6F7FA; } .corporationList-table thead tr th:nth-child(1) { width: 10rem; } .corporationList-table thead tr th:nth-child(3) { width: 15rem; } .corporationList-table thead tr th:nth-child(4) { width: 13rem; } .corporationList-table thead tr th:nth-child(6) { width: 12rem; } .corporationList-table td { padding: 1.2rem 0.5rem 0.9rem; border-top: 1px solid #E6E8F0; } .corporationList-table td .homepagelink { display: block; width: 2.6rem; margin: auto; } /*--------------- corporationList end ----------------*/ .reactionTable-wrap { border: 1px solid #d2d4de; border-radius: var(--radius-xs); overflow: hidden; } .reactionTable { width: 100%; table-layout: fixed; font-size: 1.6rem } .reactionTable.alignCenter-all { text-align: center; } .reactionTable tr { position: relative; overflow: hidden; } .reactionTable tr > * + * { border-left: 1px solid #E6E8F0; } .reactionTable th { padding: 1.6rem 1rem 1.3rem; } .reactionTable td { padding: 1.2rem 1rem 0.9rem; } .reactionTable th { background-color: #F6F7FA; } .reactionTable td { border-top: 1px solid #E6E8F0; } .reactionTable tr:hover .allLink:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(128, 160, 203, 0.05); z-index: 0; } @media (max-width: 800px) { .reactionTable-wrap { border: 0; } .reactionTable, .reactionTable thead, .reactionTable tbody, .reactionTable tr, .reactionTable th { display: block; } .reactionTable colgroup { display: none; } .reactionTable thead { visibility: hidden; height: 0; overflow: hidden; } .reactionTable tr { border: 1px solid #E6E8F0; border-radius: var(--radius-xs); background-color: #F6F7FA; padding: 1rem; } .reactionTable tr + tr { margin-top: 1.5rem; } .reactionTable td { display: flex; border: none; border: 1px solid #E6E8F0; white-space: normal; text-align:left; background-color: #fff; } .reactionTable td:nth-last-child(n + 2) { border-bottom: 0; } .reactionTable td.narrowHide + td { border-radius: 0.5rem 0.5rem 0 0; } .reactionTable td:last-child { border-radius: 0 0 0.5rem 0.5rem; } .reactionTable td:last-child .stateType { margin-left: inherit; } .reactionTable td:before { display: block; width: 13rem; white-space: nowrap; text-align:left; font-weight: bold; } .reactionTable td:before { content: attr(data-title); } .reactionTable td > div { width: calc(100% - 13rem); } .reactionTable td > *, .reactionTable td:before { padding: 0.2rem 1rem 0.2rem; } .reactionTable .narrowHide { display: none; } .tableBtns-wrap > .initialBtn { margin-left: inherit; } } .boardTab-wrap { margin-top: 2rem; } .boardTab-wrap ul { display: flex; gap: 0.5rem; border-bottom: 2px solid #333; } .boardTab-wrap ul li > * { font-size: 1.7rem; color: #888; padding: 1rem 2rem 0.6rem; border: 1px solid #ccc; border-bottom: 0; min-width: 10rem; border-radius: 0.5rem 0.5rem 0 0; background-color: var(--gray-color-white); } .boardTab-wrap ul li > *:hover { background-color: var(--gray-color-bright); } .boardTab-wrap ul li > *.active { background-color: #fff; color: var(--basic-color); position: relative; border-width: 2px; border-color: #333; } .boardTab-wrap ul li > *.active:before { content: ''; display: block; width: 100%; height: 3px; background-color: #fff; position: absolute; left: 0; top: 100%; } @media (min-width: 1024px) { .boardTab-wrap { margin-top: 0.5rem; margin-bottom: 1rem; } } .demand_badge, .supply_badge { font-size: 1.5rem; display: inline-block; background-color: var(--blue-color); font-size: 1.5rem; color: #fff; padding: 0.2rem 1.5rem 0.25rem; border-radius: 2rem; font-weight: bold; } .supply_badge { background-color: var(--green-color); } .tableType-wrap { margin-top: 2rem; } .tableType-title { margin-bottom: 2rem; } .tableType-title h3 { display: block; font-size: 2.4rem; font-weight: 600;} .tableType-title { margin-top: 1.5rem; } .tableType-title ul { font-size: 0; } .tableType-title ul li { display: inline-block; font-size: 1.5rem; position: relative; padding-right: 1rem; color: #888; } .tableType-title ul li + li { padding: 0 1rem; } .tableType-title ul li + li:after { content: ''; width: 1px; height: 60%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #F6F7FA; } .tableType > ul > li + li { margin-top: 1rem; } .tableType > ul dl + dl { margin-top: 1rem; } .tableType dt { font-family: var(--special-font); font-size: 1.5rem; display: block; background-color: #f3f5f7; border: 1px solid #dedede; border-radius: 1rem 1rem 0 0; padding: 0.8rem 1rem 0.5rem; } .tableType dd { border: 1px solid #dedede; border-top: 0; border-radius: 0 0 1rem 1rem; padding: 0.8rem 1rem; font-size: 1.6rem; min-height: 4.4rem; } .tableType dd:has(input), .tableType dd:has(select), .tableType dd:has(.initialBtn), .tableType dd:has(.fileList) { padding: 0.8rem 1rem 0.8rem; } .tableType dd input, .tableType dd select { font-size: 1.5rem; padding-top: 0.8rem; padding-bottom: 0.8rem; } .tableType dd textarea { width: 100%; font-size: 1.5rem; } .tableType dd font { display: inline-block; font-size: 1.5rem; padding-left: 0.3rem; } .tableType dd a { text-decoration: underline; color: var(--basic-color); } .tableType dd .warning-wrap .warningText { display: block; padding-top: 0.5rem; font-size: 0.9em; } .tableType-detial { margin-top: 3rem; padding-bottom: 3rem; border-bottom: 2px solid #999; } .tableType-detial h4 { display: block; border-bottom: 1px solid #d2d6d9; margin-bottom: 2rem; } .tableType-detial h4 strong { display: inline-block; position: relative; padding: 1.5rem 2rem 1rem; font-family: var(--special-font); font-size: 1.5rem; font-weight: normal; border: 1px solid #d2d6d9; border-bottom: 1px solid #fff; color: var(--basic-color); border-radius: var(--radius-xs) var(--radius-xs) 0 0; } .tableType-detial h4 strong:after { content: ''; display: block; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background-color: #fff; } .fileList { display: flex; gap: 0.5rem; flex-wrap: wrap; } .fileList a { display: block; border-radius: 0.3rem; background-color: #f9f9f9; border: 1px solid #ddd; padding: 0.7rem 1.2rem 0.7rem 2.8rem; ; font-size: 1.4rem; color: #555 !important; text-decoration: none !important; position: relative; } .fileList a:hover { color: var(--basic-color) !important; } .fileList a:before { content: "\eb74"; color: #dd792b; position: absolute; left: 1rem; top: 0.45em; transform: rotate(-45deg); font-family: xeicon !important;} .insertAddress-group .insertBtn-line { display: flex; gap: 0.5rem; } .insertAddress-group .insertBtn-line input { max-width: calc(100% - 10.5rem); } .insertAddress-group .insertBtn-line .initialBtn { width: 10rem; } .insertAddress-group .inner { margin-bottom: 0.5rem; } .insertAddress-group .inner:last-child { margin-bottom: 0; } @media (min-width: 720px){ .tableType > ul > li { display: flex; margin-top: 0 !important; border: 1px solid #dedede; border-bottom: 0; } .tableType > ul > li > * { width: 100%; } .tableType > ul > li.doubleInsert > * { width: 50%; } .tableType > ul > li dl { display: flex; margin-top: 0 !important; } .tableType > ul > li dl dt { width: 12rem; border-radius: 0; display: flex; align-items: center; border-top: 0; border-bottom: 0; } .tableType > ul > li dl dd { border-radius: 0; flex: 1; max-width: calc(100% - 12rem); border: 0; display: flex; align-items: center; flex-wrap: wrap; } .tableType > ul > li dl dd > div { width: 100%; } .tableType > ul > li:first-child { border-radius: var(--radius-xs) var(--radius-xs) 0 0; } .tableType > ul > li:last-child { border-radius: 0 0 var(--radius-xs) var(--radius-xs); border-bottom: 1px solid #dedede; } .tableType > ul > li:first-child > dl:first-child > *:first-child { border-top-left-radius: var(--radius-xs); } .tableType > ul > li:first-child > dl:last-child > *:last-child { border-top-right-radius: var(--radius-xs); } .tableType > ul > li:last-child > dl:first-child > *:first-child { border-bottom-left-radius: var(--radius-xs); } .tableType > ul > li:last-child > dl:last-child > *:last-child { border-bottom-right-radius: var(--radius-xs); } .tableType > ul > li > dl:first-child > *:first-child { border-left: 0; } .tableType > ul > li > dl:last-child > *:last-child { border-right: 0; } } @media (min-width: 980px){ .tableType > ul > li dl dt { width: 16rem; } } @media (min-width: 1024px){ .tableType-wrap { margin-top: 0.5rem; } } /*----- greeting -----*/ .greeting-tab { display: flex; gap: 1rem; margin-bottom: 1.5rem; } .greeting-tab .tablinks { padding: 1.5rem; background-color: var(--gray-color-brihgt); color: var(--gray-color-deep); width: 20rem; max-width: 40%; } .greeting-tab .tablinks.active { background-color: var(--basic-color); border-color: var(--basic-color-deep); color: #fff; } .greeting-tab .tablinks span { font-family: var(--special-font); font-size: 1.7rem; text-shadow: none; } .greeting-tab .tablinks:before { border-radius: var(--radius-xs); } .greeting-tab .tablinks.active:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 0.8rem solid var(--basic-color); border-color: var(--basic-color) transparent transparent transparent; } .greetingContent { display: none; } .greetingPerson { width: 25rem; margin: auto; } .greetingImg { background-image: url("/style_www/img/sub/introduce/greeting_bg.jpg"); background-size: cover; border-radius: 4rem 0 4rem 0; padding: 2rem; } .greetingImg > .inner { background-color: rgba(255,255,255,0.5); margin: auto; border-radius: 3rem 0 3rem 0; overflow: hidden; box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0,0.2); } .greetingImg img { display: block; width: 100%; } .greetingName { margin-top: 2rem; } .greetingName > * { display: block; } .greetingName p { font-size: 1.5rem; color: #888; } .greetingName strong { margin-top: 0.5rem; width: 8rem; } .greetingTitle { padding: 2.5rem 0; border-bottom: 1px solid var(--basic-color); } .greetingTitle h3 { display: block; } .greetingTitle h3 > * { display: block; } .greetingTitle h3 strong { font-size: 2.6rem; font-family: var(--special-font); } .greetingTitle h3 span { margin-top: 0.7rem; font-size: 1.8rem; color: var(--basic-color); } .greetingText { margin-top: 2.5rem; } .greetingText p { font-size: 1.6rem; } .greetingText p ~ p { margin-top: 2rem; } @media (min-width: 720px){ .greetingPerson { float: right; width: 28rem; padding-left: 3rem; padding-bottom: 2rem; } } @media (min-width: 1024px){ .greetingPerson { width: 30rem; } .greetingTitle h3 strong { font-size: 3rem; } .greetingTitle h3 span { font-size: 2.2rem; } } @media (min-width: 1360px){ .greetingPerson { width: 34rem; } .greetingText p { white-space: pre-wrap; word-break: keep-all } .greetingName strong { margin-top: 1rem; } } /*---- greeting end -----*/ /*---- centerInfo -----*/ .centerInfo-title { position: relative; border: 3px solid var(--gray-color-bright); border-radius: 20rem; margin-top: 3rem; } .centerInfo-title:before, .centerInfo-title:after { content: ''; display: block; width: 4rem; height: calc(100% + 6px); position: absolute; top: -3px; } .centerInfo-title:before { left: -3px; border: 3px solid var(--basic-color-bright); border-right: 0; border-radius: 20rem 0 0 20rem; } .centerInfo-title:after { right: -3px; border: 3px solid var(--basic-color-deep); border-left: 0; border-radius: 0 20rem 20rem 0; } .centerInfo-title h4 { font-family: var(--special-font); text-align: center; padding: 1.8rem 2rem 1.7rem; font-size: 1.8rem; font-weight: normal; } .centerInfo-title h4 font { font-family: var(--special-font); font-weight: bold; color: var(--basic-color); } .centerInfo-img { margin-top: 2rem; } .introduceBox-wrap { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; } .introduceBox-wrap dl { display: block; width: 100%; padding: 1.5rem; border: 1px solid #ccc; border-radius: 0.5rem; background-color: #eff2f5; } .introduceBox-wrap dt { font-family: var(--special-font); display: inline-block; padding: 0.7rem 2rem 0.5rem; background-color: var(--basic-color); color: #fff; border-radius: 5rem; } .introduceBox-wrap dd { padding: 1rem 1rem 0; } .introduceBox-wrap dd p { border-top: 1px dashed #ccc; margin-bottom: 0.5rem; padding-top: 1rem; } .centerBottom-logo { margin-top: 2rem; } .centerBottom-logo ul { display: flex; justify-content: center; gap: 1rem 1.5rem; flex-wrap: wrap; } .centerBottom-logo ul li a { display: inline-block; border: 1px solid #dedede; border-radius: 0.5rem; padding: 1rem 1.5rem; } .centerBottom-logo ul li a img { max-height: 3.5rem; } .centerInfo { font-size: 1.5rem; color: #777; margin-top: 2rem; padding-top: 2rem; text-align: center; border-top: 1px dashed #dedede; } .centerInfo-logo { display: flex; gap: 1rem; flex-wrap: wrap; } .centerInfo-logo li { max-width: calc(50% - 0.5rem); } .centerInfo-logo a { display: block; border: 1px solid #fff; } .centerInfo-logo a img { display: block; width: 100%; } .centerInfo-logo a:hover { border: 1px solid var(--basic-color); } @media (min-width: 768px) { .introduceBox-wrap { gap: 2rem; margin-top: 2rem; } .introduceBox-wrap dl { width: calc(50% - 1rem); } } @media (min-width: 1024px){ .centerInfo-title h4 { font-size: 2.2rem; } } /*---- centerInfo end -----*/ /*---- reservationSet -----*/ .reservationItem-wrap { display: flex; flex-wrap: wrap; background-color: #F7F9FA; border: 1px solid #E2E4E6; border-radius: var(--radius-xs); margin-bottom: 3rem; padding: 1rem; } .reservationItem-img { display: flex; align-items: center; width: 10rem; border-radius: 0.5rem; overflow: hidden; border: 1px solid #E2E4E6; } .reservationItem-info { width: calc(100% - 10rem); padding-left: 1.5rem; display: flex; align-items: center; } .reservationItem-info .inner { font-size: 0; } .reservationItem-info h3 { display: block; } .reservationItem-info h3 > * { display: block; } .reservationItem-info h3 span { color: var(--special-color); font-weight: normal; font-size: 1.5rem; } .reservationItem-info h3 strong { font-weight: 700; font-size: 1.8rem; margin-top: 0.3rem; font-weight: 600; } .reservationItem-info .reservationView-price { width: 100%; margin-top: 0.8rem; } .reservationItem-info .reservationView-price > * { line-height: 1.5; } .reservationItem-info .reservationView-price .discount { font-size: 1.5rem; width: auto; padding-bottom: 0.1em; } .reservationItem-info .reservationView-price .price { font-size: 2rem; width: auto; } .reservationItem-table { border-radius: var(--radius-xs); overflow: hidden; border: 1px solid #e8ecef; margin-top: 1rem; font-size: 1.5rem; display: inline-block; background-color: #fff; } .reservationItem-table table tr > * { padding: 0.6rem 2rem; } .reservationItem-table table tr + tr > * { border-top: 1px solid #e8ecef; } .reservationItem-table table tr th { background-color: #f1f4f6; } .reservationItem-table .reservationView-price { margin-top: 0; } .reservationItem-table .reservationView-price .discount { font-size: 1.5rem !important; } .reservationItem-table .reservationView-price .price { font-size: 1.8rem !important; } @media (max-width: 719.9px){ .reservationItem-facility .reservationItem-img { display: none; } .reservationItem-facility .reservationItem-info { width: 100%; padding-left: 0; } .reservationItem-table table tr th { font-size: 1.4rem; padding: 0.6rem 1rem; width: 13rem; } } @media (min-width: 720px){ .reservationItem-wrap { padding: 1.5rem; } .reservationItem-img { width: 19rem; } .reservationItem-img .imgContainer-fit { padding-bottom: 65%; } .reservationItem-info { width: calc(100% - 19rem); padding-left: 2rem; } .reservationItem-info h3 strong { font-size: 2rem; } .reservationItem-info .reservationView-price .discount { font-size: 1.6rem; } .reservationItem-info .reservationView-price .price { font-size: 2.2rem; } .reservationItem-facility .reservationItem-img .imgContainer-fit { padding-bottom: 0; height: 100%; } } .reservationSet-warning { margin-top: 2.5rem; padding: 1.5rem; background-color: #FFF8F8; border: 1px solid #D3D4D5; border-radius: var(--radius-xs); } .reservationSet-warning ul { font-size: 1.5rem; } .reservationSet-warning ul li { line-height: 1.5; padding-left: 2rem; color: #555; } .reservationSet-warning ul li + li { margin-top: 0.4rem; } .reservationSet-warning .dotList-num > li:before { font-size: 1.5rem; line-height: 1.5; background: none; color: #888; width: auto; height: auto; top: 0; } @media (min-width: 720px){ .reservationSet-warning { padding: 1.5rem 2rem; margin-top: 3rem; } } @media (min-width: 1024px){ .reservationSet-warning { padding: 2rem 2.5rem; margin-top: 3.5rem; } } #reservationCalendar .ui-datepicker { margin-top: 0; margin-left: auto !important; width: 100%; box-shadow: none; border: 1px solid #dedede; padding: 0.5rem; border-radius: var(--radius-xs); } #reservationCalendar .ui-datepicker .ui-datepicker-calendar { width: 100%; } #reservationCalendar .ui-datepicker .ui-widget-header { background-color: #fff; color: #555; padding-top: 1.5rem; padding-bottom: 1.5rem; } #reservationCalendar .ui-datepicker .ui-datepicker-title { font-size: 2rem; } #reservationCalendar .ui-datepicker .ui-datepicker-prev, #reservationCalendar .ui-datepicker .ui-datepicker-next { top: 1.5rem; } #reservationCalendar .ui-datepicker .ui-datepicker-prev .ui-icon, #reservationCalendar .ui-datepicker .ui-datepicker-next .ui-icon { border-color: #555; } #reservationCalendar .ui-datepicker-calendar thead tr { position: static; } #reservationCalendar .ui-datepicker-calendar thead th { color: var(--gray-color-deep); font-size: 1.5rem; float: none; display: table-cell; } #reservationCalendar .ui-datepicker .ui-state-default { font-size: 1.6rem; width: 4rem; height: 4rem; line-height: 4rem; border-radius: 35%;} #reservationCalendar .holiday .ui-state-default { color: var(--red-color); } #reservationCalendar .saturday .ui-state-default { color: var(--blue-color); } #reservationCalendar .closed-day .ui-state-default { color: var(--red-color); } #reservationCalendar .has-reservation .ui-state-default { background-color: #31CDCB; color: #fff; } #reservationCalendar .fully-booked .ui-state-default { background-color: #F39C52; color: #fff; } .reservationCalendar-wrap .modelExample { margin-top: 0.8rem; } .reservationCalendar-wrap .modelExample ul { display: flex; justify-content: flex-end; gap: 0.8rem; } .reservationCalendar-wrap .modelExample ul li { display: flex; align-items: center; gap: 0.3rem; } .reservationCalendar-wrap .modelExample ul li:first-child { margin-right: auto; } .reservationCalendar-wrap .modelExample ul li i { display: block; width: 1rem; height: 1rem; border-radius: 50%; background-color: #dedede; } .reservationCalendar-wrap .modelExample ul .today i { background-color: #fffa90; border: 1px solid #cdc854; } .reservationCalendar-wrap .modelExample ul .has-reservation i { background-color: #31CDCB; } .reservationCalendar-wrap .modelExample ul .fully-booked i { background-color: #F39C52; } .reservationCalendar-wrap .modelExample ul .holiday i { background-color: var(--red-color); } .reservationCalendar-wrap .modelExample ul li span { font-size: 1.4rem; } .reservation-info { margin-top: 1rem; border: 1px solid #dedede; padding: 1.5rem; border-radius: var(--radius-xs); } .reservation-info h4 { color: #555; margin-bottom: 1rem; } .reservation-info .no-reservation { text-align: center; padding: 2rem 1.5rem; font-size: 1.5rem; background-color: #f6f6f6; border: 1px solid #dedede; } .reservation-table { font-size: 1.5rem; width: 100%; table-layout: fixed; } .reservation-table tr > * { border: 1px solid #dedede; padding: 0.8rem; } .reservation-table th { background-color: #f6f6f6; } .reservation-table th:first-child { width: 12rem; } .reservation-table td { text-align: center; } @media (min-width: 1024px){ #reservationCalendar .ui-datepicker { padding: 1rem 0.5rem 1.5rem; } #reservationCalendar .ui-datepicker .ui-widget-header { padding-bottom: 2.5rem; } } @media (min-width: 1200px){ #reservationCalendar .ui-datepicker .ui-state-default { width: 4.5rem; height: 4.5rem; line-height: 4.5rem; } } .reservationInsert-division { margin-top: 2rem; padding-top: 2rem; border-top: 1px dashed #dedede; } .reservationInsert-wrap .reservationInsert-division:first-child { margin-top: 3rem; } .reservationInsert-title { margin-bottom: 1rem; } .reservationInsert-title h4 { display: flex; align-items: center; } .reservationInsert-title h4 i { color: var(--basic-color); padding-bottom: 0.1em; margin-right: 0.5rem; } .reservationInsert-title h4 strong { font-family: var(--special-font); font-weight: normal; font-size: 1.6rem; } .reservationInsert { font-size: 1.5rem; } .reservationInsert dt { display: block; padding: 0.3rem 0 0.2rem; } .reservationInsert .reservationInsert-double { display: flex; gap: 1rem; } .reservationInsert .reservationInsert-double dl { width: calc(50% - 0.5rem); margin-top: 0; } .reservationInsert .reservationInsert-double dl dd > * { width: 100% !important; } .reservationInsert dl + dl, .reservationInsert dl > * ~ dt, .reservationInsert * ~ .reservationInsert-double, .reservationInsert .reservationInsert-double + dl { margin-top: 1rem; } .reservationInsert dt label { color: #888; font-size: 1.4rem; } .reservationInsert input, .reservationInsert select, .reservationInsert textarea { padding: 0.7rem 1rem; border-radius: 0.3rem; line-height: 1.5; max-width: 100%; } .reservationInsert select { padding-right: 3rem; } .reservationInsert .customRadio > li { flex: 1; padding-left: 1rem; padding-right: 1rem; border: 1px solid #dedede; } .reservationInsert .customRadio > li + li { border-left: 0; } .reservationInsert .customRadio > li:first-child { border-radius: 0.3rem 0 0 0.3rem; } .reservationInsert .customRadio > li:last-child { border-radius: 0 0.3rem 0.3rem 0; } .reservationInsert .customRadio > li > label { padding-top: 0.8rem; padding-bottom: 0.8rem; } .reservationInsert .withBtn { position: relative; max-width: 42rem; } .reservationInsert .withBtn > input { padding-right: 11rem; width: 100%; } .reservationInsert .withBtn .initialBtn { font-size: 1.3rem; padding: 0.6rem 0; border-radius: 10rem; position: absolute; top: 50%; right: 0.4rem; width: 10rem; transform: translateY(-50%); overflow: hidden; } .reservationInsert .withBtn .customRadio { padding-right: 11rem; } .reservationInsert .address > input { margin-top: 0.6rem; width: 100%; } .reservationInsert .address #addr_start { display:none; border:1px solid; width:100%; height:300px; margin:5px 0; position:relative; } .reservationInsert .address #btnFoldWrap { cursor:pointer; position:absolute; right:0px; top:-1px; z-index:1; width: 20px; height: 20px; line-height: 20px; background-color: #000; color: #fff; font-size: 20px; } .reservationInsert-flex input, .reservationInsert-flex textarea { width: 100%; } .reservationInsert-flex .width-320 { max-width: 32rem; } .reservationInsert-flex .width-420 { max-width: 42rem; } .reservation-summary { margin-top: 1.5rem; background-color: #F7F9FA; border-radius: var(--radius-xs); overflow: hidden; border: 1px solid #BBC8CE; } .reservation-summary .info-table { font-size: 1.5rem; table-layout: fixed; width: 100%; } .reservation-summary .info-table tr > * { padding: 0.8rem 1.2rem; } .reservation-summary .info-table tr th { background-color: #BBC8CE; color: #fff; width: 11rem; } .reservation-summary .info-table tr + tr th { border-top: 1px solid rgba(255,255,255,0.5); } .reservation-summary .info-table tr + tr td { border-top: 1px solid #E0E5E9; } .reservation-summary .info-table tr #selectedTime span { display: block; font-size: 1.4rem; margin-top: 0.3rem; } .reservationSet-btn { margin-top: 2rem; } .reservationSet-btn .initialBtn { padding-top: 1.4rem; padding-bottom: 1.4rem; } .reservationSet-btn.center { margin-top: 2rem; } @media (min-width: 512px){ .reservation-summary .info-table tr th { width: 11.5rem; } .reservationInsert-flex { border: 1px solid #D3D4D5; border-radius: var(--radius-xs); overflow: hidden; } .reservationInsert-flex dl + dl { border-top: 1px solid #E2E4E6;} .reservationInsert-flex dl { display: flex; margin-top: 0 !important; } .reservationInsert-flex dl dt { display: flex; align-items: center; width: 11.5rem; background-color: #F7F9FA; padding: 0.8rem; border-right: 1px solid #E2E4E6; } .reservationInsert-flex dl > * ~ dt { margin-top: 0; border-left: 1px solid #E2E4E6; } .reservationInsert-flex dl dt label { font-size: 1.5rem; } .reservationInsert-flex dl dd { flex: 1; width: calc(100% - 11.5rem); padding: 0.8rem; } .reservationInsert-flex dl.doubleItem dd { width: calc(50% - 11.5rem); } .reservationSet-btn { max-width: 40rem; margin-left: auto; } .reservationSet-btn.center { margin-right: auto; } } @media (min-width: 720px){ .reservation-summary .info-table tr th, .reservationInsert-flex dl dt { width: 13rem; } .reservationInsert-flex dl dd { width: calc(100% - 13rem); } .reservationInsert-flex dl.doubleItem dd { width: calc(50% - 13rem); } } @media (min-width: 1024px){ .reservation-summary .info-table tr th, .reservationInsert-flex dl dt { width: 11.5rem; } .reservationInsert-flex dl dd { width: calc(100% - 11.5rem); } .reservationInsert-flex dl.doubleItem dd { width: calc(50% - 11.5rem); } .reservationSet { display: flex; } .reservationSet .reservationCalendar-wrap { width: 46%; padding-right: 3rem; } .reservationSet .reservationInsert-wrap { width: 54%; } .reservationInsert-wrap .reservationInsert-division:first-child { padding-top: 1rem; margin-top: 0; border-top: 0; } .reservationSet-btn { margin-top: 3rem; } } @media (min-width: 1200px){ .reservation-summary .info-table tr th, .reservationInsert-flex dl dt { width: 13rem; } .reservationInsert-flex dl dd { width: calc(100% - 13rem); } .reservationInsert-flex dl.doubleItem dd { width: calc(50% - 13rem); } .reservationCalendar-wrap { padding-right: 5rem; } .reservationSet-btn { margin-top: 4rem; } } /*---- reservationSet end -----*/ .warningLoading img { display: block; width: 27rem; max-width: 80%; margin-left: auto; margin-right: auto; } .warningLoading h3 { display: block; font-family: var(--special-font); text-align: center; margin-top: 3rem; } .warningLoading p { font-size: 1.5rem; color: #999; margin-top: 0.5rem; text-align: center; }