:root { --header-height: 60px; --header-height-inner: 60px; --header-height-minus: -60px; --header-height-padding: 60px; --header-height-gnb: 35px; --max-width: 1300px; --basic-radius: 1rem; --small-radius: 0.6rem; } @media (min-width: 980px){ :root { --header-height: calc(80px + 35px); --header-height-inner:80px; --header-height-minus: calc(-80px - 35px); --header-height-padding: calc(80px + 35px); --basic-radius: 1.5rem; } } @media (min-width: 1400px){ :root { --header-height: calc(85px + 35px); --header-height-inner: 85px; --header-height-minus: calc(-85px - 35px); --header-height-padding: calc(85px + 35px); } } html { color: #333; } body { background-color: #fff; } article, .fullSection { padding-left: 2.5rem; padding-right: 2.5rem; } @media (min-width: 768px){ article, .fullSection { padding-left: 3rem; padding-right: 3rem; } } @media (min-width: 980px){ article, .fullSection { padding-left: 4rem; padding-right: 4rem; } } header.header-wrap .headerInner { background-color: rgba(255, 255, 255, 0); } .scrollOn header.header-wrap .headerInner { background-color: #fff; } #gnbBar { background-color: #39393B; } #gnbBar ul.gnbRight, #gnbBar ul.gnbRight li { border-color: rgba(120,120,120,0.1); } #gnbBar ul.gnbRight li a{ background-color: rgba(0,0,0,0.2); color: #ccc; } #gnbBar ul.gnbRight li a i { color: var(--basic-color-bright); } .header-wrap .headerInner .logo { width: 30rem; max-width: 50%; } .header-wrap .headerInner .logo img { max-height: 3.2rem; } .header-wrap .headerInner nav > ul > li > a { padding-left: 2.5rem; padding-right: 2.5rem; } header.singleShow #headerNav { text-align: right; } header.singleShow #headerNav > ul > li > a > span { font-family: var(--special-font); font-size: 1.7rem; display: block; padding-top: 0.05em; color: #fff; } .scrollOn header.singleShow #headerNav > ul > li > a > span { color: #555; } header.singleShow #headerNav .multiNav > .multiNav-inner { min-width: 20rem; } header.singleShow #headerNav .multiNav > .multiNav-inner ul a span { text-align: left; font-size: 1.6rem; } header.singleShow nav .multiNav > .multiNav-inner ul { padding: 0; border: 0; overflow: hidden; } header.singleShow nav .multiNav > .multiNav-inner ul a { padding: 1.2rem 2rem 1rem; } header.singleShow nav .multiNav > .multiNav-inner ul a:hover, header.singleShow nav .multiNav > .multiNav-inner ul a:focus { background-color: var(--basic-color); color: #fff; text-decoration: none; } .burgerBtn-wrap { padding-left: 2rem; } .burgerBtn { padding-left: 1rem; width: 3rem; } .burgerBtn span { background-color: #fff; position: relative; height: 2px; margin-left: auto; } /* .burgerBtn span:nth-child(2) { width: 80%; } .burgerBtn span:nth-child(3) { width: 60%; } */ @media (min-width: 1024px){ .header-wrap .headerInner .logo img { max-height: 5.2rem; } } @media (min-width: 1360px){ .header-wrap .headerInner nav > ul > li > a { padding-left: 3.5rem; padding-right: 3.5rem; } .burgerBtn-wrap { padding-left: 3.5rem; } } #sideBar-wrap .loginUser, #sideBar-wrap .gnb ul, #sideBar-wrap .gnb ul li { border-color: var(--basic-color-deep) !important; } /* .mainTop-wrap:before, .subTop-wrap:before { content:''; display: block; background-image: url("/style_www/img/common/header/shadow.png"); position: absolute; top: 0; right: 0; left: 0; height: 150px; background-repeat: repeat-x; background-size: auto 100%; z-index: 10; opacity: 0.5; } */ #wrap footer { background-color: #F0F2F5; /* border-top: 1px solid #cfd6db; */ /* padding-top: 0.8rem; */ } #wrap footer .footerNav-wrap { /* background-color: #292e35; */ padding: 0 3rem; } #wrap footer .footerNav-wrap ul li { display: inline-block; vertical-align: middle; } #wrap footer .footerNav-wrap ul li + li { margin-left: 3rem; } #wrap footer .footerNav-wrap ul li a { display: block; color: #333; font-size: 1.5rem; padding: 1.8rem 0; } #wrap footer .footerNav-wrap ul li a:hover, #wrap footer .footerNav-wrap ul li a:focus { color: var(--special-color); } #wrap footer .footer-wrap { /* background-color: #323841; */ border-top: 1px solid #cfd6db; padding: 3rem 3rem; } #wrap footer .footer-wrap .footer-logo { width: 14rem; margin-bottom: 1rem; } #wrap footer .footer-wrap .footer-text dl { display: block; margin-bottom: 2rem; font-size: 1.5rem; } #wrap footer .footer-wrap .footer-text dl dt { font-weight: 700; font-size: 1.5rem; color: #555555; margin-bottom: 1rem; } #wrap footer .footer-wrap .footer-text dl dd { color: #888; line-height: 1.5; } #wrap footer .footer-wrap .footer-text dl dd span { display: block; line-height: 1.5; } #wrap footer .footer-wrap .footer-text dl dd span font { display: block; margin-top: 0.3rem; } #wrap footer .footer-wrap .footer-text .copyText { font-size: 1.4rem; line-height: 1.5; color: #666; } #wrap footer .footer-wrap .footerLink { margin: 1rem 0 2rem; } #wrap footer .footer-wrap .footerLink .customSelect { border-color: #cdcdcd; display: inline-block; } #wrap footer .footer-wrap .footerLink button { border: 1px solid #cdcdcd; display: inline-block; padding: 1rem 1.5rem; border-radius: 0.3rem; color: #555; } @media (min-width: 1024px){ #wrap footer .footer-wrap { padding-top: 4rem; padding-bottom: 4rem; } #wrap footer .footer-wrap .footer-logo, #wrap footer .footer-wrap .footer-text { display: inline-block; vertical-align: top; } #wrap footer .footer-wrap .footer-logo { width: 16rem; } #wrap footer .footer-wrap .footer-text { width: calc(100% - 17rem); } #wrap footer .footer-wrap .footer-text dl { display: block; margin-bottom: 2rem; } #wrap footer .footer-wrap .footer-text dl dt { font-weight: 700; font-size: 1.5rem; color: #555555; margin-bottom: 1rem; } #wrap footer .footer-wrap .footer-text dl dd { color: #888; line-height: 1.5; } #wrap footer .footer-wrap .footer-text dl dd span { display: block; line-height: 1.5; } #wrap footer .footer-wrap .footer-text dl dd span + span { margin-top: 0.3rem; } #wrap footer .footer-wrap .footer-text dl dd span font { display: inline-block; } #wrap footer .footer-wrap .footerLink { position: absolute; right: 0; top: 0; margin: 0; } } /** mainBasic **/ .mainContent-wrap { padding-top: 3rem; padding-bottom: 3rem; } .mainContent-wrap section { position: relative; } .mainContent-title { display: flex; align-items: center; flex-wrap: wrap; font-size: 2.2rem; margin-bottom: 1rem; position: relative; } .mainContent-title h3 strong { font-weight: 800; color: #333; } .mainContent-title h3 span { font-size: 0.95em; margin-right: 0.3em; font-weight: normal; } @media (min-width: 768px){ .mainContent-title { font-size: 2.4rem; } } @media (min-width: 1024px){ .mainContent-wrap { padding-top: 5rem; padding-bottom: 5rem; } .mainContent-title { font-size: 2.6rem; } } @media (min-width: 1360px){ .mainContent-wrap { padding-top: 8rem; padding-bottom: 8rem; } .mainContent-title { font-size: 2.8rem; } } .mainMore { position: absolute; top: 0.2rem; right: 0; padding: 1rem; border-radius: 50%; border: 1px solid #9B9DB2; } .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: var(--special-color); } @media (min-width: 768px){ .mainMore { top: 0.5rem; } } @media (min-width: 1024px){ .mainMore { top: 0.55rem; } } @media (min-width: 1360px){ .mainMore { top: 0.75rem; } } /** mainTop **/ .mainTop-wrap { padding-left: 0; padding-right: 0; position: relative; background-color: #ebfafa; } @media (min-width: 1360px){ .mainTop-wrap { background-size: auto 100%; } .mainTop-wrap > .maxWidth { display: flex; padding-top: 6rem; padding-bottom: 9rem;} } .mainSlider-wrap { position: relative; } .mainSlider { font-size: 0; } .mainSlider-content { position: relative; } .mainSlider-bg { animation: mainBg_out 2s 3s ease-out normal 1 forwards; background-size: cover; background-position: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1.1); } .mainSlider .slick-active .mainSlider-bg { animation: mainBg 6s 0s ease-out normal 1 forwards; } @keyframes mainBg { from { transform: scale(1); } to { transform: scale(1.1); } } @keyframes mainBg_out { from { transform: scale(1.1); } to { transform: scale(1); } } .mainSlider .mainSlider-text { padding: 5rem 0rem 14rem; } .mainSlider .mainSlider-text > .inner { position: relative; z-index: 100; width: 100%; font-size: 5.8vw; } .mainSlider .mainSlider-text > .inner * { font-family: var(--special-font); color: #fff; text-shadow: 2rem 2rem 5rem rgba(0,0,0,0.4); } .mainSlider .mainSlider-text > .inner > * { text-align: left; opacity: 0; display: block; } .mainSlider .mainSlider-text > .inner em { font-size: 0.35em; font-weight: 500; color: rgba(255,255,255,0.7); } .mainSlider .mainSlider-text > .inner .mainSlider-title { font-size: 1em; margin-top: 0.4em; margin-left: -0.05em; font-weight: 900; line-height: 1.3; } .mainSlider .mainSlider-text > .inner .mainSlider-title font { display: block; font-weight: 500; } .mainSlider .mainSlider-text > .inner p { margin-top: 1em; font-size: 0.45em; line-height: 1.5; color: var(--special-color-bright); } .mainSlider .slick-active .mainSlider-text > .inner > * { animation: mainText 1.5s 0s ease-out normal 1 forwards; opacity: 1; } @keyframes mainText { from { transform: translate(0px, 15px); opacity: 0; } to { transform: translate(0px, 0px); opacity: 1; } } .mainSlider-wrap .sliderControl-wrap { position: absolute; bottom: 5rem; left: 0; width: 100%; } .mainSlider-control { gap: 5px; } .mainSlider-control .inner { gap: 5px; padding-left: 3px !important; } .mainSlider-control .slider-dots { width: 12rem; } .mainSlider-control .slider-dots .slick-dots { display: flex !important; background-color: #fff; } .mainSlider-control .slider-dots .slick-dots li { padding-left: 0; flex: 1; } .mainSlider-control .slider-dots .slick-dots li button { width: 100%; border-radius: 0; border: 0; height: 4px; } .mainSlider-control .slider-dots .slick-dots li.slick-active button { background-color: var(--special-color-bright); } .mainSlider-control .play, .mainSlider-control .pause { color: #fff; } .mainSlider-control .sliderControl-nav { display: flex !important; height: 3.5rem; width: 3.5rem; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; color: #fff; } .mainSlider-control .sliderControl-nav.prev i:before{ margin-right: 0.1em; } .mainSlider-control .sliderControl-nav.next i:before{ margin-left: 0.1em; } @media (min-width: 454px){ .mainSlider .mainSlider-text > .inner { font-size: 2.64rem; } } @media (min-width: 500px){ .mainSlider .mainSlider-text > .inner { font-size: 2.9rem; } } @media (min-width: 768px){ .mainSlider .mainSlider-text { padding: 8rem 0rem 15rem; } .mainSlider .mainSlider-text > .inner { font-size: 3.2rem; } } @media (min-width: 1024px){ .mainSlider .mainSlider-text { padding: 13rem 0rem 20rem; } .mainSlider-wrap .sliderControl-wrap { bottom: 13rem; } } @media (min-width: 1360px){ .mainSlider .mainSlider-text { padding: 15rem 0rem 23rem; } .mainSlider .mainSlider-text > .inner { font-size: 3.6rem; } .mainSlider-wrap .sliderControl-wrap { bottom: 15rem; } .mainSlider-control .slider-dots { width: 15rem; } } .grayBg-wrap { background-color: var(--gray-color-white); } /**-- mainMQ-wrap --**/ .mainMQ-wrap { padding-bottom: 1.8rem; } @media (min-width: 1024px){ .mainMQ-wrap { padding-top: 0; } .mainMQ-wrap .maxWidth { padding-right: 35rem; } } @media (min-width: 1360px){ .mainMQ-wrap .maxWidth { padding-right: 38rem; } } /**-- mainMQ-wrap end --**/ /** mainMy-wrap **/ .mainMy-wrap { background-color: rgba(246, 247, 251, 0.4); backdrop-filter: saturate(100%) blur(10px); border: 1px solid rgba(120, 121, 121, 0.2); border-radius: var(--basic-radius); overflow: hidden; } .mainMy-login { padding: 2rem; } .mainMy-login p { font-size: 1.7rem; text-align: center; } .mainMy-login .initialBtn { padding: 1.3rem 0; margin-top: 1.6rem; } .mainMy-login .initialBtn span { font-family: var(--special-font); font-size: 1.5rem; display: block; } .mainMy-login-btn { display: flex; margin-top: 1.6rem; } .mainMy-login-btn li { flex: 1; text-align: center; width: 33.333333%; position: relative; font-size: 1.5rem; } .mainMy-login-btn li + li:before { content: ''; display: block; width: 1px; height: 60%; background-color: rgba(0,0,0,0.2); position: absolute; left: 0; top: 20%; } .mainMy-login-btn li a { opacity: 0.8; } .mainMy-login-btn li a:hover, .mainMy-login-btn li a:focus { opacity: 1; text-decoration: underline; } .mainMy-info-basic { padding: 2rem 2rem 2.5rem; } .mainMy-info-user { display: block; position: relative; padding-right: 2rem; } .mainMy-info-user strong { font-size: 2rem; } .mainMy-info-user strong font { font-size: 0.7em; font-weight: normal; display: inline-block; vertical-align: bottom; margin-left: 0.2rem; padding-bottom: 0.2rem; } .mainMy-info-user a { position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 1px solid rgba(120, 121, 121, 0.2); border-radius: 2.3rem; padding: 0.5rem 1.2rem 0.4rem 1.5rem; color: #777; background-color: rgba(255,255,255,0.5); font-size: 1.5rem; } .mainMy-info-user a:hover { background-color: rgba(100,100,100,0.1); } .mainMy-info-user a > * { display: inline-block; vertical-align: middle; } .mainMy-info-user a > i { padding-left: 0.3rem; } .mainMy-info-user a > span { margin-bottom: 0.1em; } .mainMy-info-basic p { margin-top: 1rem; color: #888; } .mainMy-info-btn { display: flex; background-color: rgba(65, 67, 90, 0.4); } .mainMy-info-btn li { position: relative; width: calc(50% - 3rem); text-align: center; } .mainMy-info-btn li:last-child { width: 6rem; } .mainMy-info-btn li + li:before { content: ''; display: block; width: 1px; height: 40%; background-color: rgba(255,255,255,0.5); position: absolute; left: 0; top: 30%; } .mainMy-info-btn li .count { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background-color: #585757; padding: 0.4rem 1.5rem; border-radius: 2rem; font-size: 1.5rem; } .mainMy-info-btn li a { color: #fff; display: block; width: 100%; padding: 1.3rem 0 1.3rem; font-size: 1.6rem; } @media (min-width: 1024px){ .mainMy-wrap { position: absolute !important; right: 0; bottom: 0; width: 34rem; } } @media (min-width: 1360px){ .mainMy-wrap { width: 35rem; } .mainMy-login { padding: 2.5rem; } .mainMy-info-basic { padding: 2.5rem 2.5rem 3rem; } } /** mainMy-wrap **/ /** mainQuick-wrap **/ .mainQuick-wrap { margin-top: 2rem; } .mainQuick-icon { display: grid; grid-template-columns: repeat(3, 1fr); } .mainQuick-icon li a { display: block; position: relative; background-color: #fff; border-radius: var(--basic-radius); padding: 1.2rem 0; height: 100%; } .mainQuick-icon li a:hover, .mainQuick-icon li a:focus { box-shadow: 1px 1px 12px 0px rgb(0 0 0 / 8%); z-index: 10; position: relative; } .mainQuick-icon li a strong { display: block; text-align: center; font-weight: normal; padding-top: 1rem; font-size: 1.55rem; } .mainQuick-icon li a i { display: block; width: 4rem; height: 4rem; font-size: 0; margin: auto; background-size: contain; background-repeat: no-repeat; background-position: center center; } .mainQuick-icon li a i img { display: block; width: 100%; } @media (min-width: 980px){ .mainQuick-icon { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1024px){ .mainQuick-wrap { margin-top: 0; padding-top: 2.5rem; padding-bottom: 1rem;} } /** mainQuick-end **/ /**-- mainB-wrap --**/ .mainBP-wrap { border-top: 1px solid rgba(120, 121, 121, 0.2); padding-top: 2.5rem; } @media (min-width: 1024px){ .mainBP-wrap { border-top: 0; padding-top: 5rem; } .mainBP-wrap .maxWidth { display: flex; } } @media (min-width: 1360px){ .mainBP-wrap { padding-top: 6rem; } } /**-- mainB-wrap end --**/ /** mainBoard-wrap **/ .mainBoard-content { display: none; } #mainBoard { display: block; } .mainBoard-tab { border: 1px solid rgba(120, 121, 121, 0.4); border-radius: var(--small-radius); width: 100%; display: flex; margin-top: 1rem; } .mainBoard-tab button { width: 33.333333%; font-size: 1.6rem; color: #B3B3BD; padding: 0.6rem 0; font-weight: 500; } .mainBoard-tab button + button { border-left: 1px solid rgba(120, 121, 121, 0.4); } .mainBoard-tab button.active { color: var(--special-color); } .mainBoard-tab button:hover *, .mainBoard-tab button:focus * { color: var(--special-color-deep); } .mainBoard li { border-bottom: 1px solid var(--gray-color-bright); } .mainBoard a { display: block; padding: 1.5rem 0; } .mainBoard a strong { font-weight: 400; display: flex; align-items: center; } .mainBoard a strong i { background-color: var(--blue-color-deep); color: #fff; border-radius: 2rem; display: inline-block; font-size: 1.4rem; width: 5rem; text-align: center; padding: 4px 0; } .mainBoard a strong i.postingIcon { background-color: var(--green-color-deep); } .mainBoard a strong span { width: calc(100% - 5rem); padding-left: 0.8rem; } .mainBoard a > span { display: none; font-family: var(--special-font); color: #888; font-size: 1.25rem; width: 10rem; text-align: right; } @media (min-width: 768px){ .mainBP-wrap .mainContent-title { padding-right: 5.5rem; } .mainBoard-tab { margin-left: auto; border: 0; gap: 2.5rem; width: auto; margin-top: 0; } .mainBoard-tab button { border: 0 !important; font-size: 1.7rem; width: auto; display: flex; align-items: center; gap: 0.5rem; } .mainBoard-tab button.active:before { content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; background-color: var(--special-color); border-radius: 50%; margin-top: 0.1em; } .mainBoard-content { border-top: 1px solid #333; margin-top: 1rem; } .mainBoard a { display: flex; align-items: center; } .mainBoard a strong { width: calc(100% - 10rem); } .mainBoard a strong i { width: 6rem; } .mainBoard a strong span { width: calc(100% - 6rem); padding-left: 1rem; } .mainBoard a > span { display: block; } } @media (min-width: 1024px){ .mainBoard-wrap { width: calc(100% - 45rem); padding-right: 3rem; } .mainBoard-wrap .mainMore { right: 3rem; } .mainBoard a { padding: 1.75rem 0; } } @media (min-width: 1360px){ .mainBoard-wrap { padding-right: 6rem; } .mainBoard-wrap .mainMore { right: 6rem; } .mainBoard a strong { width: calc(100% - 13rem); } .mainBoard a > span { width: 13rem; } } /** mainBoard-wrap end **/ /** mainPopupzone-wrap **/ .mainPopupzone-wrap { margin-top: 3rem; } .mainPopupzone .slick-list:before, .mainPopupzone .slick-list:after { display: none; } .mainPopupzone-wrap .sliderControl-wrap { border: 1px solid #9B9DB2; position: absolute; top: 0.3rem; right: 0; padding: 0.8rem 1rem; border-radius: 3rem; } .mainPopupzone-content { background-color: var(--gray-color-white); border-radius: var(--basic-radius); } .mainPopupzone { border: 1px solid #dedede; border-radius: var(--basic-radius); overflow: hidden; max-width: 45rem; margin: auto; box-shadow: 0px 0px 8px rgba(200,200,200,0.2);} .mainPopupzone .imgContainer-fit { padding-bottom: 55%; } @media (min-width: 768px){ .mainPopupzone-wrap .sliderControl-wrap { top: 0.5rem; } } @media (min-width: 1024px){ .mainPopupzone-wrap .sliderControl-wrap { top: 0.55rem; } .mainPopupzone-wrap { margin-top: 0rem; } } @media (min-width: 1360px){ .mainPopupzone-wrap .sliderControl-wrap { top: 0.75rem; } } /** mainPopupzone-wrap end **/ /** mainEdu-wrap **/ .mainContent-edu { background-image: url("/style_www/img/main/bg/edu_bg.jpg"); background-size: cover; padding-bottom: 4rem; } .mainEdu-wrap .mainContent-title p { width: 100%; color: #888; font-size: 1.6rem; padding: 0.2rem; } .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(242,246,249,0) 0%,rgba(242,246,249,1) 100%); } .mainEdu .slick-list:after { right: 0; background: linear-gradient(to right, rgba(242,246,249,0) 0%,rgba(242,246,249,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 { display: flex; gap: 1rem; position: absolute; top: 0.3rem; 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); } @media (min-width: 768px){ .mainEdu-wrap .sliderControl-wrap { top: 0.6rem } } @media (min-width: 980px){ .mainEdu-wrap { display: flex; align-items: center; } .mainEdu-wrap .mainContent-title { display: block; width: 30rem; padding-right: 3rem; padding-bottom: 7rem; margin-bottom: 0; } .mainEdu-wrap .mainContent-title p { margin-top: 1.2rem; } .mainEdu-wrap .mainEdu-content { width: calc(100% - 30rem); } .mainEdu-wrap .sliderControl-wrap { left: 0; right: auto; top: auto; bottom: 4rem; } } @media (min-width: 1024px){ .mainContent-edu { padding-bottom: 5.5rem; } } @media (min-width: 1360px){ .mainContent-edu { padding-bottom: 8rem; } .mainEdu .slick-list { margin: 0 -1.5rem; } .mainEdu .slick-track { display: flex; } .mainEdu .slick-slide { margin: 0 1.5rem; } } /** mainEdu-wrap end **/ /** mainReservation-wrap **/ .mainContent-reservation { background-image: url("/style_www/img/main/bg/reservation_bg.jpg"); background-size: cover; } .mainContent-reservation .mainContent-title h3 strong { color: #fff; } .mainReservation-content { overflow: hidden; } .mainReservation .slick-list { margin: 0 -0.8rem 0 -1rem; } .mainReservation .slick-track { display: flex; } .mainReservation .slick-slide { margin: 0 1rem; } .mainReservation-img .imgContainer-fit { padding-bottom: 56.25%; border-radius: var(--basic-radius); overflow: hidden; } .mainReservation-category { margin-top: 1rem; padding: 0 0.8rem; color: var(--special-color); font-size: 1.5rem; } .mainReservation-basic { padding: 0 0.8rem 1rem; } .mainReservation-basic a { color: #fff; font-size: 1.7rem; } .mainReservation-item { position: relative; } .mainReservation-item .allLink { outline: 0; } .mainReservation-item:hover .allLink:before, .mainReservation-item .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; border: 1px solid var(--special-color); border-radius: var(--basic-radius); } .mainReservation-wrap .sliderControl-wrap { display: flex; gap: 1rem; position: absolute; top: 0.3rem; right: 0; } .mainReservation-wrap .sliderControl { gap: 0.4rem; } .mainReservation-wrap .sliderControl button { width: 3.2rem; height: 3.2rem; border: 1px solid #9B9DB2; border-radius: 50%; color: #fff; } .mainReservation-wrap .mainMore { display: block; position: static; width: 3.2rem; height: 3.2rem; padding: 0.9rem; background-color: rgba(255,255,255,0.45); } .mainReservation-wrap .mainMore i:before, .mainReservation-wrap .mainMore i:after { background-color: #fff; } .mainReservation-wrap .mainMore:hover i:before, .mainReservation-wrap .mainMore:hover i:after, .mainReservation-wrap .mainMore:focus i:before, .mainReservation-wrap .mainMore:focus i:after { background-color: var(--special-color); } .mainContent-reservation .mainContent-title { margin-bottom: 1.5rem; } @media (min-width: 768px){ .mainReservation-wrap .sliderControl-wrap { top: 0.6rem; } } @media (min-width: 1024px){ .mainContent-reservation { padding-bottom: 4rem; } } @media (min-width: 1360px){ .mainContent-reservation { padding-bottom: 7rem; } .mainReservation .slick-list { margin: 0 -1.3rem 0 -1.5rem; } .mainReservation .slick-track { display: flex; } .mainReservation .slick-slide { margin: 0 1.5rem; } } /** mainReservation-wrap end **/ /** mainRelated-wrap **/ .mainContent-related { padding-top: 2rem; } .mainRelated-wrap { padding-top: 5rem; } .mainRelated .slick-list { margin: 0 -0.7rem 0 -0.7rem; } .mainRelated .slick-track { display: flex; } .mainRelated .slick-slide { margin: 0 0.7rem; } .mainRelated .slick-list:before, .mainRelated .slick-list:after { content: ''; display: block; width: 2rem; height: 100%; position: absolute; top: 0; z-index: 10; opacity: 0; } .mainRelated .slick-list:before { left: 0; background: linear-gradient(to left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } .mainRelated .slick-list:after { right: 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);} .mainRelated.slideStart .slick-list:before, .mainRelated.slideStart .slick-list:after { opacity: 1; transition: opacity .2s cubic-bezier(.215,.61,.355,1); } .mainRelated .sliderItem { border: 1px solid #dedede; display: block; border-radius: var(--small-radius); overflow: hidden; } .mainRelated .sliderItem a { display: block; padding: 0.6rem 0; } .mainRelated .sliderItem a .imgContainer-fit { padding-bottom: 30%; } .mainRelated .sliderItem a .imgContainer-fit img { top: 50%; left: 50%; max-width: 90%; max-height: 3rem; transform: translate(-50%, -50%); } .mainRelated-wrap .sliderControl-wrap { display: flex; gap: 1rem; position: absolute; top: 0; right: 0; } .mainRelated-wrap .sliderControl { gap: 0.4rem; } .mainRelated-wrap .sliderControl button { width: 3.2rem; height: 3.2rem; border: 1px solid #9B9DB2; border-radius: 50%; } @media (min-width: 1024px){ .mainContent-related { padding-top: 3rem; } } @media (min-width: 1360px){ .mainContent-related { padding-top: 4rem; } } /** mainRelated-wrap end **/ /** ************************************************** **/ /** subPage-wrap **/ .subHero-wrap { background-color: transparent; position: relative; background-size: cover; background-position: center; } .subHero { padding-top: 4rem; padding-bottom: 4rem; } .subHero-content { position: relative; padding-top: var(--header-height-padding); overflow: hidden;} .subHero-bg { background-color: var(--basic-color-deep); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-size: cover; background-position: center center; animation-duration: 70s; animation-name: bounceAni; animation-iteration-count: infinite; } .subHero-text { font-size: 2.6rem; padding: 2rem; } .subHero-text h1 { font-size: 1em; } .subHero-text * { font-family: var(--special-font); color: #fff; display: block; } .subHero-text span { font-size: 0.45em; font-weight: 400; opacity: 0.8; margin-top: 0.5em; } @media (min-width: 1024px){ .subHero { padding-top: 6rem; padding-bottom: 6rem; } .subHero-text { padding: 2rem 4rem; font-size: 4rem; } .subHero-text span { font-size: 0.5em } } .pageTitle-wrap { padding-top: 3rem; margin-bottom: 0; } .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; } .subNav {} .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: #f3f6fa; padding: 0.8rem; font-weight: 500; border-radius: 0.5rem; color: var(--basic-color-deep); } .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 #555; } .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 #dedede; border-left: 0; border-top: 0; } .reactiveList dl dd { border-bottom: 1px solid #dedede; } } .reactiveTable { table-layout: fixed; width: 100%; border-top: 2px solid #555; } .reactiveTable th { background-color: #f3f6fa; font-weight: 500; color: var(--basic-color-deep); } .reactiveTable tr > * { border-bottom: 1px solid #dedede; padding: 1.5rem 2rem; } .reactiveTable tr > * + * { border-left: 1px solid #dedede; } @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 var(--basic-color-bright); 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 #dedede; border-top: 0; } /* .reactiveTable tr:last-child > *:last-child { padding-bottom: 0; } */ } /** application-wrap **/ .applicationCondition-wrap .float-wrap li { margin-right: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .applicationCondition-wrap .float-wrap li:last-child { margin-right: 0; } .applicationCondition-wrap input { margin-top: 1rem; font-size: 1.5rem; padding: 0.8rem 1rem; width: 32rem; max-width: 100%; } .applicationAgree-wrap .customCheckbox label span { font-family: var(--special-font); font-size: 1.8rem; font-weight: 600; margin-left: 0.3rem; } .applicationAgree { background-color: #f1f5f8; border: 1px solid #dedede; border-radius: 0.5rem; margin-top: 1.5rem; } .applicationAgree table { table-layout: fixed; width: 100%; font-size: 1.5rem; } .applicationAgree table th, .applicationAgree table td { padding: 1.5rem 1rem; vertical-align: top; border-bottom: 1px solid #dedede; line-height: 1.5; } .applicationAgree table tr > * + * { border-left: 1px solid #dedede; } .applicationAgree .warningText { font-size: 1.5rem; padding: 1.5rem 1rem; } .applicationCompletion { padding-top: 1rem; } .applicationCompletion i { display: block; margin: auto; background-color: #e2edfb; width: 120px; height: 120px; border-radius: 60px; position:relative; } .applicationCompletion i span { display: block; width: 30px; height: 30px; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); transform-origin: 0; } .applicationCompletion i span:before, .applicationCompletion i span:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; background-color: #4293f9; } .applicationCompletion i span:before { width: 3px; height: 18px; } .applicationCompletion i span:after { width: 30px; height: 3px; } .applicationCompletion dl { text-align: center; margin-top: 3rem; } .applicationCompletion dt * { font-family: var(--special-font); display: block; font-size: 2.6rem; line-height: 1.6; } .applicationCompletion dt strong { color: var(--basic-color); } .applicationCompletion dd { margin-top: 2rem; } .applicationCompletion dd p { font-size: 1.6rem; line-height: 1.6; } .applicationCompletion dd p a { font-weight: 600; text-decoration: underline; } /** application-wrap **/ /** institution-wrap **/ .institution-wrap ul { margin-top: -2rem; margin-left: -2rem; font-size: 0; } .institution-wrap ul li { display: inline-block; vertical-align: top; width: 50%; padding-left: 2rem; margin-top: 2rem; } .institution-wrap ul li a { display: block; text-align: center; } .institutionImg { border: 1px solid #dedede; border-radius: 0.5rem; display: block; overflow: hidden; margin-bottom: 0.5rem; background-color: #fff; } .institutionImg .imgContainer-fit { padding-bottom: 30%; } .institution-wrap ul li a em { line-height: 1.5; font-size: 1.6rem; } @media (min-width: 720px){ .institution-wrap ul li { width: 33.333333%; } } @media (min-width: 950px){ .institution-wrap ul li { width: 25%; } } /** institution-wrap end **/ /** yearTree-wrap **/ .yearTree-wrap { position:relative; } .yearTree-wrap:after { content: ''; display: block; background: var(--basic-color); display: block; height: 100%; left: 29px; margin-left: -1px; position: absolute; top: 0; width: 2px; z-index: 0; } .yearTree-wrap dl { position: relative; padding-left: 80px; min-height: 100px; padding-bottom: 6rem; z-index: 1; } .yearTree-wrap dl:last-child::after { bottom: 0; } .yearTree-wrap dl dt { position: absolute; top: 0; width: 50%; left: 0; z-index: 10; } .yearTree-wrap dl dt strong { background: #fff; border: 2px solid var(--basic-color); border-radius: 50%; color: var(--basic-color); display: block; font-weight: 500; font-size: 16px; width: 63px; height: 63px; line-height: 60px; position: relative; text-align: center; } .yearTree-wrap dl dd { font-size: 1.6rem; margin-bottom: 1rem; padding-left: 1rem; } @media (min-width: 1024px){ .yearTree-wrap { position:relative; padding-top: 8rem; } .yearTree-wrap:before, .yearTree-wrap dl:last-child::after { content: ""; background: var(--basic-color); border-radius: 50%; height: 20px; left: 50%; margin-left: -10px; position: absolute; width: 20px; z-index: 5; } .yearTree-wrap:before { top: 0; } .yearTree-wrap:after { left: 50%; } .yearTree-wrap dl { position: relative; padding-left: 50%; min-height: 200px; padding-bottom: 6rem; } .yearTree-wrap dl:nth-child(even) { padding-right: 50%; padding-left: 0; } .yearTree-wrap dl:nth-child(odd) dt { left: 0; padding-right: 47px; } .yearTree-wrap dl:nth-child(even) dt { right: 0; left: inherit; padding-left: 47px; } .yearTree-wrap dl:nth-child(odd) dt strong { float: right; } .yearTree-wrap dl:nth-child(even) dt strong { float: left; } .yearTree-wrap dl dt strong { font-size: 38px; width: 140px; height: 140px; line-height: 132px; } .yearTree-wrap dl dt strong:before { background: var(--basic-color); border-radius: 50%; content: ""; height: 10px; margin-top: -5px; position: absolute; top: 50%; width: 10px; z-index: 5; } .yearTree-wrap dl dt strong:after { background: var(--basic-color); content: ""; height: 2px; margin-top: -1px; position: absolute; top: 50%; width: 47px; } .yearTree-wrap dl:nth-child(even) dt strong:before { left: -54px; } .yearTree-wrap dl:nth-child(even) dt strong:after { left: -49px; } .yearTree-wrap dl:nth-child(odd) dt strong:before { right: -54px; } .yearTree-wrap dl:nth-child(odd) dt strong:after { right: -49px; } .yearTree-wrap dl dd { padding-left: 3rem; } .yearTree-wrap dl:nth-child(even) dd { padding-right: 3rem; padding-left: 0; text-align: right; } } /** yearTree-wrap end **/ /** contact-wrap **/ .mapContent { height: 50rem; border: 1px solid #ededed; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0.3rem 0.6rem 0 rgb(0 0 0 / 16%); } #map { position: relative; width: 100%; height: 100%; } .contactTop-wrap { font-size: 0; /* padding: 0 2rem; */ } .contactTitle-wrap { margin-bottom: 2rem; } .contactTitle-wrap h3 { font-size: 2.5rem; line-height: 1.4;} .contactTitle-wrap h3 > * { display: inline-block; vertical-align: middle; } .contactTitle-wrap h3 > span { font-weight: normal; font-size: 0.9em; } .contactTitle-wrap .divisionBar-s { background: var(--basic-color); height: 0.3rem; width: 6rem; margin: 2rem 0; border-radius: 0.6rem; } .contactTitle-wrap ul li + li { margin-top: 0.2rem; } .contactTitle-wrap ul li > * { display: inline-block; vertical-align: top; font-size: 1.6rem; padding: 0.2rem 0; line-height: 1.5; } .contactTitle-wrap ul li > em { font-weight: 700; width: 7rem; } .contactTitle-wrap ul li > span { width: calc(100% - 5rem); } .contactTitle-wrap ul li > span > * { display: inline-block; } .contactTable.basicTable-wrap table >*:nth-child(2) tr:first-child > * { border-top: 2px solid #555; } .contactTable colgroup col:nth-child(1) { width: 12rem; } .contactTable th i { color: #4179c6; font-size: 2.5rem; } .contactTable th > * { display: inline-block; vertical-align: middle; } .contactTable td p { padding: 0.5rem 0; margin: 0; line-height: 1.4; } .contactTable td p em { color: #4179c6; font-weight: 500; } .contactTable td p a:hover { text-decoration: underline; } .contactTitle-wrap ul li.mapBtn a { display: inline-block; max-width: 48%; padding: 1rem 1rem; border-radius: 0.5rem; margin-top: 0.8rem; margin-right: 1%; } .contactTitle-wrap ul li.mapBtn a > * { display: inline-block; vertical-align: middle; } .contactTitle-wrap ul li.mapBtn a span { font-weight: 400; margin-left: 0.5rem; } .contactTitle-wrap ul li.mapBtn .kakaoMap { background-color: #fbe300; } .contactTitle-wrap ul li.mapBtn .kakaoMap i { color: #017cff; } .contactTitle-wrap ul li.mapBtn .kakaoMap span { color: #333; } .contactTitle-wrap ul li.mapBtn .naverMap { background-color: #2DB400; } .contactTitle-wrap ul li.mapBtn .naverMap i { color: #fff; } .contactTitle-wrap ul li.mapBtn .naverMap span { color: #fff; } @media (min-width: 980px){ .contactTitle-wrap, .mapContent { display: inline-block; vertical-align: top; } .contactTitle-wrap { width: 30rem; padding: 0rem 0 2rem; } .mapContent { width: calc(100% - 30rem); } .contactTitle-wrap .divisionBar-s { margin: 3rem 0; } .contactTitle-wrap ul li > * { display: block; } .contactTitle-wrap ul li + li { margin-top: 1.5rem; } .contactTitle-wrap ul li > em { font-size: 1.7rem; } .contactTitle-wrap ul li.mapBtn a { display: block; max-width: 17rem; } .contactTable colgroup col:nth-child(1) { width: 25rem; } } @media (min-width: 1024px){ .contactTitle-wrap { width: 32rem; } .mapContent { width: calc(100% - 32rem); } } /** contact-wrap **/ /** reservationStep-wrap **/ .reservationStep { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr) } .reservationStep li:nth-child(5) { grid-column: 1 / span 2; } .reservationStep .inner { height: 100%; border: 1px solid var(--basic-color); border-radius: var(--basic-radius); text-align: center; padding: 1.5rem 0.5rem; background-image: url("/style_www/img/bg/step_bg.jpg"); background-repeat: no-repeat; background-size: 100% 3rem; background-position: left bottom; } .reservationStep li:nth-child(2) .inner { background-position: 20% bottom; } .reservationStep li:nth-child(3) .inner { background-position: 40% bottom; } .reservationStep li:nth-child(4) .inner { background-position: 60% bottom; } .reservationStep li:nth-child(5) .inner { background-position: right bottom; } .reservationStep .inner dt { display: block; } .reservationStep .inner dt > * { font-family: var(--special-font); font-weight: 900; } .reservationStep .inner dt i { display: block; font-size: 2rem; color: var(--basic-color); } .reservationStep .inner dt strong { display: block; font-size: 1.7rem; margin-top: 0.3rem; } .reservationStep .inner dd { color: #777; font-size: 1.4rem; word-spacing: -0.05em; margin-top: 0.4rem; line-height: 1.4; } .facilityStep-wrap .reservationStep .inner { background-image: url("/style_www/img/bg/step_bg2.jpg"); border-color: var(--special-color); } .facilityStep-wrap .reservationStep .inner dt i { color: var(--special-color); } .reservationStep-wrap .dotList-s { margin-top: 1.5rem; } @media (min-width: 980px){ .reservationStep { grid-template-columns: repeat(5, 1fr) } .reservationStep li:nth-child(5) { grid-column: 5 / span 1; } .reservationStep .inner { padding: 2rem 0.5rem; } } @media (min-width: 1024px){ .reservationStep .inner dt strong { margin-top: 0.5rem; } .reservationStep .inner dd { font-size: 1.5rem; margin-top: 0.7rem; } .reservationStep-wrap .dotList-s { margin-top: 2rem; } } @media (min-width: 1360px){ .reservationStep { gap: 2.5rem; } .reservationStep .inner { padding: 2.5rem 0.5rem; } .reservationStep-wrap .dotList-s { margin-top: 2.5rem; } } .relatedFiles .initialBtn { display: inline-block; font-size: 1.5rem; width: auto; padding: 0.2rem 2rem; margin-left: 0.3rem; } /** reservationStep-wrap **/ /** reservation-wrap **/ .reservation-wrap { margin-top: 0; } .reservationList { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.2rem; } .reservationList-item .inner { display: flex; border: 1px solid #dedede; border-radius: var(--basic-radius); padding: 1.5rem; } .reservationList-img { width: 11rem; border-radius: var(--small-radius); overflow: hidden; border: 1px solid rgba(0,0,0,0.1); background-color: var(--gray-color-white); } .reservationList-img .imgContainer-fit { padding: 0; height: 100%; } .reservationList-basic { width: calc(100% - 11rem); padding-left: 1.5rem; } .reservationList-text i { display: block; color: var(--special-color); font-size: 1.5rem; } .reservationList-text h4 { display: block; font-size: 1.7rem; margin-top: 0.4rem; } .reservationList-price { display: flex; gap: 0 1.2rem; align-items: flex-end; } .reservationList-price > * { display: block; } .reservationList-price .discount { font-size: 1.5rem; text-decoration: line-through; color: var(--gray-color-deep); padding-bottom: 0.1em; } .reservationList-price .price { font-size: 1.8rem; } .reservationList-price .price strong { font-weight: 800; } .reservationList-price .price .unit { font-size: 0.7em; } .reservationList-price i { display: inline-block; margin-right: 0.1em; font-size: 0.8em; } .reservationList-button { display: flex; gap: 0.6rem; margin-top: 1rem; } .reservationList-button .initialBtn { border-radius: 0.4rem; font-size: 1.5rem; max-width: 13rem; padding-bottom: 0.9rem; } @media (min-width: 980px){ .reservationList { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px){ .reservationList { gap: 1.6rem; } .reservationList-button { gap: 1rem; } .reservationList-button .initialBtn { font-size: 1.6rem; } } @media (min-width: 1360px){ .reservationList { gap: 2.5rem; } .reservationList-item .inner { padding: 1.7rem; } .reservationList-img { width: 13rem; } .reservationList-basic { width: calc(100% - 13rem); padding-left: 2rem; } .reservationList-text h4 { font-size: 1.8rem; } .reservationList-button .initialBtn { padding-top: 1.3rem; padding-bottom: 1.3rem; } } .reservationView-wrap { margin-top: 1.5rem; } .reservationView-img { border-radius: var(--basic-radius); overflow: hidden; background-color: var(--gray-color-white); max-width: 55rem; margin: auto; } .reservationView-img .imgContainer-fit { padding-bottom: 60%; } .reservationImg-wrap { position: relative; } .reservationImg-wrap .sliderControl-wrap { position: absolute; left: 1rem; bottom: 1rem; padding: 0.5rem 1rem; border-radius: 1rem; background-color: rgba(255,255,255,0.5); } .reservationImg-wrap .sliderControl-wrap i { color: var(--gray-color-deep); } .reservationView-info { margin-top: 2rem; } .reservationView-info h3 { display: block; } .reservationView-info h3 > * { display: block; } .reservationView-info h3 span { color: var(--special-color); font-weight: normal; font-size: 1.5rem; } .reservationView-info h3 strong { font-weight: 700; font-size: 2.2rem; margin-top: 0.5rem; } .reservationView-table { border-radius: var(--small-radius); overflow: hidden; border: 1px solid #e8ecef; margin-top: 1rem; font-size: 1.6rem; } .reservationView-table table { width: 100%; table-layout: fixed; } .reservationView-table table tr > * { padding: 0.8rem 1.5rem; } .reservationView-table table tr + tr > * { border-top: 1px solid #e8ecef; } .reservationView-table table th { background-color: #f1f4f6; color: #555; width: 13rem; border-right: 1px solid #e8ecef; } .reservationView-table table td { background-color: #fff; } .reservationView-table table td i.xi-ban, .reservationView-table table td i.xi-radiobox-blank { transform: translateY(0.05em); } .reservationView-table table td i.xi-ban { color: var(--red-color); } .reservationView-table table td i.xi-radiobox-blank { color: var(--blue-color); } .reservationView-application { margin-top: 1.5rem; } .reservationView-price { display: flex; gap: 0 1.2rem; align-items: flex-end; flex-wrap: wrap; } .reservationView-price > * { display: block; } .reservationView-price .discount { font-size: 1.6rem; text-decoration: line-through; color: var(--gray-color-deep); padding-bottom: 0.2em; } .reservationView-price .price { font-size: 2.4rem; } .reservationView-price .price strong { font-weight: 800; } .reservationView-price .price .unit { font-size: 0.7em; } .reservationView-price i { display: inline-block; margin-right: 0.1em; font-size: 0.8em; } .reservationView-btn { margin-top: 1.5rem; } .reservationView-btn .initialBtn { padding-top: 1.5rem; padding-bottom: 1.5rem; font-size: 1.7rem; } .reservationView-detail { margin-top: 3.5rem; background-color: #FAFBFC; border: 1px solid #e8ecef; border-radius: var(--basic-radius); } .reservationView-detail > div { padding: 2rem; } .reservationView-detail h4 { display: block; padding-left: 1.5rem; margin-bottom: 1rem; position: relative; font-size: 1.7rem; } .reservationView-detail h4:before { content: ''; display: block; position: absolute; left: 0; top: 23%; width: 0.5rem; height: 60%; background: linear-gradient(to bottom, #3c69dd 51%,#7db9e8 51%); } .reservationView-detail .precautions { border-top: 1px solid #e8ecef; } .reservationView-detail .precautions ul > li { color: var(--special-color); padding-left: 1.5rem; } .reservationView-detail .precautions ul > li:before { background-color: var(--special-color); } .reservationView { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #e8ecef; } .reservationView-content { display: none; } #reservationRules { display: block; } .reservationView-tab { display: flex; gap: 1rem; margin-bottom: 2rem; } .reservationView-tab .tablinks { border: 1px solid var(--gray-color); color: var(--gray-color-deep); font-size: 1.6rem; padding: 0.8rem 2rem; border-radius: 3rem; } .reservationView-tab .active { background-color: var(--gray-color-deep); border-color: var(--gray-color-deep); color: #fff; } .reservationView-tab .tablinks:hover, .reservationView-tab .tablinks:focus { color: var(--special-color) !important; } .reservationView-content h5 { display: block; font-size: 1.6rem; margin-top: 2rem; margin-bottom: 0.8rem; } .reservationView-content h5:first-child { margin-top: 0; } .reservationView-content .dotList-s > li { font-size: 1.5rem; color: #888; padding-left: 1.5rem; } .reservationView-content .thinTable { table-layout: fixed; width: 100%; margin: 1rem 0; font-size: 1.5rem; line-height: 1.5;} .reservationView-content .thinTable th, .thinTable td { border: 1px solid #dedede; padding: 0.5rem 0.2rem; text-align: center; } .reservationView-content .thinTable th { border-top-color: #252525; } .reservationView-content .thinTable td { color: #888; } @media (min-width: 980px){ .reservationView-basic { display: flex; flex-wrap: wrap; align-items: center; } .reservationView-basic > * { flex: 1; } .reservationView-img .imgContainer-fit { padding-bottom: 80%; } .reservationView-info { margin-top: 0; padding-left: 3rem; } .reservationView-table { margin-top: 2rem; } .reservationView-application { display: flex; margin-top: 2.5rem; align-items: flex-end; } .reservationView-price { width: 40%; } .reservationView-price > * { width: 100%; line-height: 1; } .reservationView-price .price * { line-height: 1; } .reservationView-btn { margin-top: 0; flex: 1; } .reservationView-detail { display: flex; } .reservationView-detail > div { width: 50%; } .reservationView-detail .precautions { border-top: 0; border-left: 1px solid #e8ecef; } } @media (min-width: 1024px){ .reservationView-info h3 strong { font-size: 2.4rem; } .reservationView-info { padding-left: 4rem; } .reservationView-table table tr > * { padding: 1.2rem 2rem; } .reservationView-table table th { width: 15rem; } .reservationView-price .discount { font-size: 1.8rem; } .reservationView-price .price { font-size: 2.8rem; } .reservationView-btn .initialBtn { font-size: 1.8rem; } .reservationView-detail > div { padding: 3rem; } } @media (min-width: 1360px){ .reservationView-info { padding-left: 4.5rem; } .reservationView-btn .initialBtn { padding-top: 1.7rem; padding-bottom: 1.7rem; } .reservationView-detail { margin-top: 4rem; } .reservationView { margin-top: 4rem; padding-top: 4rem; } } .forDate-btn { margin-bottom: 1.5rem; } .forDate-btn .initialBtn { display: flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 1.5rem 1rem; max-width: 40rem; margin: auto; border-radius: 3rem; } .facilityList-wrap .reservationList-item .inner { flex-wrap: wrap; } .facilityList-wrap .reservationList-img { width: 100%; } .facilityList-wrap .reservationList-img .imgContainer-fit { height: auto; padding-bottom: 60%; } .facilityList-wrap .reservationList-basic { width: 100%; padding-left: 0.5rem; margin-top: 1rem; } @media (min-width: 720px){ .facilityList-wrap .reservationList { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @media (min-width: 1024px){ .forDate-btn { margin-bottom: 3rem; } } @media (min-width: 1360px){ .facilityList-wrap .reservationList { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } } .facilityView-wrap .reservationView-img { max-width: 100%; } .facilityView-wrap .facilityView-wrap { max-width: 65rem; } .facilityView-wrap .reservationView-table table th { width: 15rem; } .facilityPrice { display: flex; gap: 0 1.2rem; align-items: flex-end; flex-wrap: wrap; } .facilityPrice > * { display: block; } .facilityPrice .discount { font-size: 1.6rem; text-decoration: line-through; color: var(--gray-color-deep); padding-bottom: 0.2em; } .facilityPrice .price { font-size: 2rem; } .facilityPrice .price strong { font-weight: 800; } .facilityPrice .price .unit { font-size: 0.7em; } .facilityPrice i { display: inline-block; margin-right: 0.1em; font-size: 0.8em; } .facilityView-detail { margin-top: 3rem; padding-top: 3rem; border-top: 1px dashed #cecece; } .facilityView-detail ul { display: flex; gap: 1rem; flex-wrap: wrap; } .facilityView-detail ul li > .inner { border: 1px solid #dedede; padding: 0.5rem; border-radius: 3rem; display: flex; align-items: center; gap: 1rem; padding-right: 1.8rem; } .facilityView-detail ul li > .inner i { width: 3.4rem; padding: 0.3rem; overflow: hidden; border: 1px solid #202d7e; border-radius: 50%; } .facilityView-detail ul li > .inner strong { display: flex; gap: 0.8rem; font-size: 1.5rem; } .facilityView-detail .warningText { margin-top: 1.5rem; font-size: 1.5rem; } @media (min-width: 980px){ .facilityView-wrap .reservationView-img .imgContainer-fit { padding-bottom: 0; height: 50rem; } } @media (min-width: 1024px){ .facilityView-wrap .reservationView-table table tr > * { padding: 1rem 2rem; } .facilityView-detail ul li > .inner i { width: 4rem; } .facilityView-detail ul li > .inner strong { font-size: 1.6rem; } } @media (min-width: 1360px){ .facilityView-detail { margin-top: 4rem; padding-top: 4rem; } } .viewNav-wrap { margin-top: 3rem; } .viewNav { display: flex; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } .viewNav > button { width: 50%; display: flex; gap: 0.8rem; text-align: left; align-items: center; padding-top: 1.5rem; padding-bottom: 1.5rem; color: #555; } .viewNav > button:hover, .viewNav > button:focus { background-color: #FAFBFC; } .viewNav > button + button { border-left: 1px solid #dedede; } .viewNav > button.next { justify-content: flex-end; text-align: right; padding-left: 1rem; } .viewNav > button.prev { padding-right: 1rem; } .viewNav > button .viwNav-img { width: 5rem; border-radius: 50%; border: 1px solid #ededed; overflow: hidden; } .viewNav > button .viewNav-text { width: calc(100% - 5.8rem); } .viewNav > button .viewNav-text span { color: #888; } .viewNav > button .viewNav-text strong { font-size: 1.5rem; } @media (min-width: 1360px){ .viewNav-wrap { margin-top: 4rem; } } /** reservation-wrap end **/ .reservationDivision-wrap { margin-top: 2rem; } #smoothTab { display: none; } .reservationDivision-tab { display: flex; } .reservationDivision-tab .tablinks { position: relative; filter: url("#fancy-goo"); z-index: 0; padding: 0 1.5rem; } .reservationDivision-tab .tablinks + .tablinks { margin-left: -2rem; } .reservationDivision-tab .tablinks span { display: inline-block; min-width: 10rem; white-space: nowrap; text-align: center; background: #ccc; font-size: 1.6rem; padding: 1.2rem 2.5rem 2.3rem; color: #555; } .reservationDivision-tab .tablinks:after { content:''; display: block; width: 100%; height: 50%; position: absolute; top: calc(100% - 1.5rem); left: 0; background-color: #ccc; } .reservationDivision-tab .tablinks.active { z-index: 1; } .reservationDivision-tab .tablinks.active span { background-color: var(--basic-color); color: #fff; } .reservationDivision-tab .tablinks.active:after { background-color: var(--basic-color); } .reservationDivision-tab .tablinks.active:nth-child(2) span { background-color: #F39C52; } .reservationDivision-tab .tablinks.active:nth-child(2):after { background-color: #F39C52; } .reservationDivision { position: relative; z-index: 2; margin-top: -1.5rem; border-radius: var(--small-radius); padding: 1.3rem; } .reservationDivision h3 { display: none; } .reservationDivision h3 > * { display: inline-block; vertical-align: middle; } .reservationDivision h3 > i { width: 2.2rem; margin-right: 0.5rem; } .reservationDivision .inner { display: flex; flex-wrap: wrap; gap: 1rem; } .reservationDivision .inner .reservationCheck { width: calc(50% - 0.5rem); } .reservationDivision .inner .reservationCheck input[type="checkbox"] { display: none; } .reservationDivision .inner .reservationCheck label { display: block; cursor: pointer; background-color: #fff; border-radius: 0.5rem; padding: 1rem 1.2rem; position: relative; overflow: hidden; } .reservationDivision .inner .reservationCheck label:before { content: ''; font-family: xeicon !important; color: #fff; text-align: center; line-height: 2.2rem; display: block; width: 2.4rem; height: 2.2rem; background-color: var(--gray-color-white); position: absolute; right: 0; top: 0; border-radius: 0 0 0 0.5rem; border-left: 1px solid var(--gray-color-bright); border-bottom: 1px solid var(--gray-color-bright); } .reservationDivision .inner .reservationCheck label > * { display: block; } .reservationDivision .inner .reservationCheck label > em { text-align: left; font-size: 1.5rem; color: #777; } .reservationDivision .inner .reservationCheck label > b { text-align: right; font-weight: 700; font-size: 2.5rem; line-height: 1; margin-top: 0.5rem; } .reservationDivision .inner .reservationCheck input[type="checkbox"]:checked ~ label { box-shadow: 0px 0px 1rem rgba(0,0,0,0.2); } .reservationDivision .inner .reservationCheck input[type="checkbox"]:checked ~ label:before { content: '\e929'; background-color: var(--special-color-bright); border-color: #f88e34; } .reservationDivision .inner .reservationCheck input[type="checkbox"]:checked ~ label em { color: var(--special-color); } #facility.reservationDivision .inner .reservationCheck input[type="checkbox"]:checked ~ label:before { background-color: var(--basic-color); border-color: var(--basic-color-deep); } #facility.reservationDivision .inner .reservationCheck input[type="checkbox"]:checked ~ label em { color: var(--basic-color); } .reservationDivision .inner .reservationCheck:nth-child(2) label > b { color: var(--blue-color); } .reservationDivision .inner .reservationCheck:nth-child(3) label > b { color: var(--red-color-bright); } .reservationDivision .inner .reservationCheck:nth-child(4) label > b { color: var(--gray-color); } .reservationDivision-wrap .warnintText { font-size: 1.5rem; margin-top: 0.8rem; } #equipment.reservationDivision { background-color: var(--basic-color); } #facility.reservationDivision { display: none; background-color: var(--special-color-bright); } @media (min-width: 600px){ .reservationDivision .inner .reservationCheck { width: calc(25% - 0.75rem); } } @media (min-width: 1200px){ .reservationDivision-wrap > section > .inner { display: flex; gap: 2rem; } .reservationDivision-tab { display: none; } .reservationDivision { display: block !important; width: calc(50% - 1rem); margin-top: 0; } .reservationDivision h3 { display: block; color: #fff; font-size: 1.8rem; margin-bottom: 1rem; padding: 0 0.5rem; } } @media (min-width: 1360px){ .reservationDivision .inner .reservationCheck label { padding: 1.2rem 1.5rem; } .reservationDivision .inner .reservationCheck label > b { font-size: 2.8rem; } } .reservationStatus-list .eqIcon > *, .reservationStatus-list .faIcon > * { display: inline-block; vertical-align: middle; } .reservationStatus-list .eqIcon i, .reservationStatus-list .faIcon i { width: 1.8rem; margin-right: 0.8rem; } .reservationStatus-list .eqIcon { color: var(--basic-color); } .reservationStatus-list .faIcon { color: var(--special-color); } .reservationStatus-list .stateType { display: block; background-color: var(--gray-color); color: #fff; font-size: 1.5rem; width: 8rem; margin: auto; padding: 0.5rem; border-radius: 0.5rem; text-align: center; } .reservationStatus .information-table .stateType { display: block; background-color: var(--gray-color); color: #fff; font-size: 1.5rem; width: 8rem; text-align: center; padding: 0.5rem; border-radius: 0.5rem; } .reservationStatus-list .stateType.type1, .reservationStatus .information-table .stateType.type1 { background-color: #555; } .reservationStatus-list .stateType.type2, .reservationStatus .information-table .stateType.type2 { background-color: var(--blue-color); } .reservationStatus-list .stateType.type3, .reservationStatus .information-table .stateType.type3 { background-color: var(--red-color-bright); } .reservationStatus-list .stateType.type4, .reservationStatus .information-table .stateType.type4 { background-color: var(--gray-color); } .reservationStatus-item { background-color: #f3f5f7; border: 1px solid #ededed; border-radius: 1rem; padding: 0.8rem; } .reservationStatus-item .inner { background-color: #fff; padding: 1rem; border-radius: 1rem; border: 1px solid #ededed; display: flex; align-items: center; flex-wrap: wrap; } .reservationStatus-title { display: flex; align-items: center; gap: 1.5rem; } .reservationStatus-title .reservationStatus-img { width: 6.5rem; border-radius: 0.5rem; border: 1px solid #d7d7d7; overflow: hidden; } .reservationStatus-title dl { text-align: left; } .reservationStatus-title dl dd { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--special-color); } .reservationStatus-title dl dt { font-size: 1.8rem; } .information-table table { table-layout: fixed; width: 100%; } .information-table table colgroup col:nth-child(1) { width: 13rem; } .information-table table tr > * { padding: 1.2rem 1rem; border: 1px solid #e9e9e9; } .information-table table th { font-size: 1.4rem; background-color: #f3f5f7; font-family: var(--special-font); font-weight: normal; } .information-table table td { font-size: 1.5rem; } @media (max-width: 720px){ .reservationStatus .subContent-title { font-size: 2rem; } .reservationStatus .subContent-title h4:before { top: 0.32em; } } @media (min-width: 720px){ .reservationStatus-item { padding: 1.5rem; } .reservationStatus-item .inner { padding: 1.2rem; } .reservationStatus-title .reservationStatus-img { width: 10rem; } .information-table table colgroup col:nth-child(1) { width: 14rem; } .information-table table tr > * { padding: 1.2rem 1.5rem; } } @media (min-width: 980px){ .information-table table colgroup col:nth-child(1) { width: 16rem; } .information-table table tr > * { padding: 1.2rem 2rem; } .information-table table th { font-size: 1.5rem; } .information-table table td { font-size: 1.6rem; } } /** edu **/ .eduStep-wrap { padding: 0 2rem; border: 1px solid #dedede; border-radius: var(--basic-radius); } .eduStep-wrap ul li { text-align: center; position: relative; padding: 4rem 0; } .eduStep-wrap ul li + li { border-top: 1px solid #dedede; } .eduStep-wrap ul li + li:before { content: "\E941"; font-family: xeicon; display: block; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0px 0px 15px 0 rgb(0 0 0 / 10%); font-size: 2.4rem; width: 4rem; line-height: 3.5rem; border-radius: 3rem; padding-top: 0.5rem; } .eduStep-wrap ul li i { display: block; padding: 0 2rem; width: 60%; max-width: 10rem; margin: 0 auto 2rem; } .eduStep-wrap ul li p { background-color: var(--basic-color-white); padding: 0.8rem; font-weight: 500; border-radius: 0.5rem; color: var(--basic-color-deep); } @media print, (min-width: 768px){ .eduStep-wrap { padding: 2rem 0; } .eduStep-wrap ul { display: flex; width: 100%; } .eduStep-wrap ul li { width: 33.333333333333%; padding: 2rem 2rem; } .eduStep-wrap ul li + li { border-top: 0; border-left: 1px solid #dedede; } .eduStep-wrap ul li + li:before { content: "\E93E"; left: 0; top: 50%; padding-top: 0; line-height: 4rem; padding-left: 0.5rem; } .eduStep-wrap ul li i { margin-bottom: 4rem; } } @media (min-width: 950px){ .eduStep-wrap ul li { padding: 2rem 3rem; } } /** edu end **/ /** board **/ .photoGallery-wrap { margin-top: 0.6rem; } .photoGallery-wrap .maxWidth { padding: 0; } .photoGallery-wrap .gridWrap > ul { margin-top: -1.5rem; margin-left: -1.5rem; } .photoGallery-wrap .gridWrap > ul > li { padding-left: 1.5rem; padding-top: 1.5rem; } .photoGallery-wrap .gridWrap > ul > li > .inner { border-radius: 1.5rem; overflow: hidden; border: 1px solid #dedede; } .basicBoard th { padding: 1.8rem 1rem; } .basicBoard td { padding: 1.8rem 1rem; } .basicBoard td a strong { font-size: 1.6rem; } .basicTable-wrap.xScroll-wrap .initialBtn { font-size: 1.5rem; } @media (max-width: 800px) { .viewContainer { padding: 1rem 0 !important; } } .viewContainer .viewBtn-warp { margin-bottom: 0; } .gallerySlider-wrap .sliderControl-wrap { height: 4rem; } .gallerySlider-wrap .slick-arrow { position: absolute; top: 0; z-index: 100; width: 80px; height: calc(100% - 4rem); background-color: rgba(0,0,0,0.8); margin: 0; font-size: 2rem; } .gallerySlider-wrap .slick-arrow.prev { left: 0; border-radius: 1rem 0 0 1rem; } .gallerySlider-wrap .slick-arrow.next { right: 0; border-radius: 0 1rem 1rem 0; } .gallerySlider-wrap .sliderControl-wrap .slick-arrow i:before { font-size: 4rem; } .gallerySlider-wrap .sliderControl-wrap .slick-arrow:hover i:before { color: #fff; } @media (max-width: 600px) { .gallerySlider-wrap .slick-arrow { width: 40px; } .gallerySlider-wrap .sliderControl-wrap .slick-arrow i:before { font-size: 2.5rem; } } @media (max-width: 500px) { .gallerySlider-wrap .slick-arrow { width: 30px; } } /** board end **/ .organization li { position: relative; } .organization li + li { padding-top: 1.5rem; } .organization li:before, .organization li:after { content: ''; display: block; position: absolute; background-color: var(--gray-color-deep); } .organization-item { border: 1px solid var(--gray-color); padding: 1rem; border-radius: var(--small-radius); background-image: url("/style_www/img/sub/introduce/organization_bg.png"); } .organization-item p { font-family: var(--special-font); padding: 0.5rem 0.5rem; font-size: 1.8rem; } .organization-item dl { margin-top: 0.8rem; border: 1px solid var(--gray-color); border-radius: var(--small-radius); padding: 1rem 1rem 0.8rem; background-color: #fff; } .organization-item dl + dl { margin-top: 0.5rem; } .organization-item dl dt { display: block; font-weight: 500; } .organization-item dl dd { display: block; font-size: 1.6rem; margin-top: 0.3rem; color: #888; } .depth_0 { padding-left: 1.5rem; } .depth_0:before { width: 1.5rem; height: 1px; top: 2.5rem; left: 0; } .depth_0:after { width: 1px; height: calc(100% - 2.5rem); left: 0; top: 2.5rem; } .depth_0 .organization-item { background-color: #036eb8; border-color: var(--basic-color-deep); background-image: none; } .depth_0 .organization-item p { color: #fff; } .depth_0 .organization-item p img { display: none; } .depth_0 .organization-item dl { border-color: var(--basic-color-deep); } .depth_1 { padding-left: 2.5rem; } .depth_1:before { width: 2.5rem; height: 1px; top: 4rem; left: 0; } .depth_1:after { width: 1px; height: 100%; left: 0; top: 0; } .depth_2 .organization-item { background-color: #ced5f2; border-color: #ced5f2; } .depth_2 .organization-item dl { border-color: #ced5f2; } .depth_2 { padding-top: 0 !important; } .depth_2 ul li { padding-left: 3.5rem; padding-top: 1.5rem; } .depth_2 ul li:before { width: 3.5rem; height: 1px; top: 4rem; left: 0; } .depth_2 ul li:after { width: 1px; height: 100%; left: 0; top: 0; } .depth_2 ul li:last-child:after { height: 4rem; } .depth_2 ul li:first-child .organization-item { background-color: #f5cadd; border-color: #f5cadd; } .depth_2 ul li:first-child .organization-item dl { border-color: #f5cadd; } .depth_2 ul li:nth-child(2) .organization-item { background-color: #f5ddc1; border-color: #f5ddc1; } .depth_2 ul li:nth-child(2) .organization-item dl { border-color: #f5ddc1; } .depth_2 ul li:nth-child(3) .organization-item { background-color: #c3e9f2; border-color: #c3e9f2; } .depth_2 ul li:nth-child(3) .organization-item dl { border-color: #c3e9f2; } @media (min-width: 768px) { .organization-wrap { padding-top: 3rem; } .organization { font-size: 0; } .organization li + li, .depth_2 ul li { padding-top: 10rem; } .organization-item { text-align: center; font-size: 1.6rem; } .organization-item p { padding-top: 0.8rem; } .depth_0 { width: 40rem; margin: auto; padding-left: 0; padding-bottom: 2rem; } .depth_0:before { display: none !important; } .depth_0:after { top: auto; bottom: 0; left: 50%; height: 2rem; } .depth_0 .organization-item p img { display: block; margin: auto; width: 6.5rem; margin-bottom: 1.5rem; } .depth_1:before { width: calc(150% + 1px); top: 0; left: 50%; } .depth_1:after { top: 0; left: 50%; height: 10rem; } .depth_2:after { width: 1px; height: 5rem; left: 50%; top: 0; } .depth_2 ul li:before { width: calc(100% + 1px); top: 5rem; left: calc(50% + 1rem); } .depth_2 ul li:after { top: 5rem; left: calc(50% + 1rem); height: 5rem !important; } .depth_2 ul li:last-child:before { display: none !important;} .depth_1, .depth_2 { display: inline-block; vertical-align: top; } .depth_1 { width: 25%; padding-left: 0; padding-right: 2rem; } .depth_2 { width: 100%; } .depth_2 ul { margin-left: -2rem; } .depth_2 ul li { display: inline-block; vertical-align: top; width: 25%; padding-left: 2rem; } } .business-item { border-radius: 1.5rem; overflow: hidden; border: 1px solid #ededed; } .business-item .imgContainer-fit { padding-bottom: 50%; } .businessSlider-nav { position: relative; padding-left: 20rem; border-radius: 1.5rem; padding: 1.8rem 1.8rem 1.5rem; margin-top: 2rem; background: #307331; /* Old browsers */ background: -moz-linear-gradient(left, #307331 0%, #34845a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #307331 0%,#34845a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #307331 0%,#34845a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#307331', endColorstr='#34845a',GradientType=1 ); /* IE6-9 */ } .businessSlider-nav .slider-nav-wrap { border-radius: 1.5rem; overflow: hidden; font-size: 0; } .business-thum { padding: 0 0.8rem; } .business-thum .imgContainer-fit { border-radius: 1.5rem; overflow: hidden; } /* .businessSlider-nav .business-thum .imgContainer-fit { border: 8px solid rgba(255, 255, 255, 0); } */ .businessSlider-nav .slick-center .business-thum .imgContainer-fit:before { content:''; display: block; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; border-radius: 1.5rem; border: 6px solid var(--special-color); } .businessSlider-nav .sliderControl-wrap { text-align: center; margin-top: 1.5rem; } .businessSlider-nav .sliderControl-wrap #businessSlider-dot { margin-right: 1rem; } @media (min-width: 980px){ .businessSlider-nav > * { display: inline-block; vertical-align: middle; } .slider-nav-wrap { width: 100%; max-width: 50rem; } .businessSlider-nav .sliderControl-wrap { padding-left: 2rem; } .businessSlider-nav .sliderControl-wrap #businessSlider-dot { display: block; margin-bottom: 1.5rem; } .businessSlider-nav .sliderControl-wrap #businessSlider-dot .slick-dots { text-align: left; } .businessSlider-nav .sliderControl-wrap .inner > a { width: 4rem; border: 1px solid var(--special-color); margin-right: 0.5rem; border-radius: 1rem; } .businessSlider-nav .sliderControl-wrap .inner > a i:before { line-height: 4rem !important; height: 4rem !important; } } .dotList-business > li + li { margin-top: 1rem; } /*-- halfContent --*/ .halfContent-img .imgContainer-fit { padding-bottom: 50%; border-radius: 1.5rem; overflow: hidden; } .halfContent-text { padding-top: 2rem; padding-bottom: 3rem; } .halfContent-text dl { font-size: 2.4rem; line-height: 1.5; } .halfContent-text dl dt { font-weight: 700; margin-bottom: 1rem; } .halfContent-text dl dd { font-size: 0.65em; } .halfContent-text dl dd p { line-height: 1.6; } @media (min-width: 1024px){ .halfContent-warp { display: flex; flex-wrap: wrap; } .halfContent-warp > * { width: 50%; } .halfContent-text { padding-top: 4rem; padding-bottom: 4rem; padding-left: 5rem; } .halfContent-text dl { font-size: 2.6rem; } .halfContent-text dl dt { margin-bottom: 1.5rem; } .halfContent-img .imgContainer-fit { padding-bottom: 0; height: 100%; min-height: 26rem; } .halfContent-reverse { flex-direction: row-reverse } .halfContent-reverse .halfContent-text { padding-left: 0; padding-right: 5rem; } .halfContent-warp ~ .halfContent-warp { margin-top: 4rem; } } /*-- halfContent end --*/ /*-- basicCal --*/ .basicCal-table { width: 100%; table-layout: fixed; height: 1px; } .basicCal-table .calMonth { padding: 0 1rem; position: relative; margin-bottom: 2rem; } .basicCal-table .calMonth > * { display: inline-block; vertical-align: middle; } .basicCal-table .calMonth strong { font-size: 2.8rem; padding: 0 2rem; font-family: var(--special-font); } .basicCal-table .calMonth .calMonth-move { font-size: 0; } .basicCal-table .calMonth .calMonth-move i:before { font-size: 2rem; } .basicCal-table .calMonth .calToday { position: absolute; right: 0; top: 50%; font-weight: 500; padding: 0.7rem 1.2rem; border-radius: 0.5rem; transform: translateY(-50%); } .basicCal-table .weekLine th { padding: 1rem 0; border: 1px solid #dedede; } .basicCal-table td { border: 1px solid #dedede; vertical-align: top; position: relative; } .basicCal-table td > .inner { height: 100%; min-height: 85px; display: block; position: relative; padding: 1rem; } .basicCal-table td > .inner em { display: block; position: relative; z-index: 1; font-weight: 500; margin-bottom: 1rem; } .basicCal-table td > .inner .popCal-btn { display: block; padding: 0.2rem 1rem; background-color: var(--basic-color); color: #fff; border-radius: 0.3rem; font-size: 1.4rem; } .basicCal-table td > .inner .popCal-btn:hover { background-color: var(--basic-color-deep); } .basicCal-table td > .inner .popCal-btn ~ .popCal-btn { margin-top: 0.5rem } .basicCal-table td > .inner .selectCal-btn { display: block; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; font-size: 0; text-indent: -9999px; } .basicCal-table td.today .inner { background-color: #e0eff4; } .basicCal-table td.select .inner { background-color: #fffaca; } .w_sat span, .w_sat em { color: #5088d1; } .w_sun span, .w_sun em { color: #d43151; } .popCal-wrap .white-popup-block > h3 { font-size: 2.4rem; } .popCal-wrap .white-popup-block > p { color: var(--basic-color); padding: 1rem 0 2rem; border-bottom: 1px solid #dedede; margin-bottom: 2rem; } /*-- basicCal end --*/ /*--------------- 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: var(--special-color); } .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: var(--special-color); } .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: var(--special-color-white); border-radius: 1rem; opacity: 0.3; } .searchDetail-option dl dd::-webkit-scrollbar-thumb { background-color: var(--special-color); 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: var(--special-color); } .applyInfo-solt em { font-weight: 700; } .applyItem-category { color: var(--blue-color-bright); 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: #d4d4dd; color: #fff; font-size: 1.4rem; font-weight: 400; text-shadow: 0 0 3px rgba(0,0,0,0.2); border-radius: var(--basic-radius); } .applyItem.type1 .applyItem-state { background-color: var(--gray-color-deep); } .applyItem.type2 .applyItem-state { background-color: var(--special-color-bright); } .applyItem.type3 .applyItem-state { background-color: var(--yellow-color-deep); } .applyItem.type4 .applyItem-state { background-color: #d4d4dd; } .applyItem.type5 .applyItem-state { background-color: var(--blue-color); } .applyItem.type6 .applyItem-state { background-color: var(--green-color); } .applyContainer-box .applyItem { display: block; position: relative; border: 1px solid #d4d4dd; border-radius: var(--basic-radius); overflow: hidden; padding: 3rem 2.5rem 2.5rem; } .applyContainer-box .applyItem > * { display: block; } .applyContainer-box .applyItem.type1 { border-color: var(--gray-color-deep); } .applyContainer-box .applyItem.type2 { border-color: var(--special-color-bright); } .applyContainer-box .applyItem.type3 { border-color: var(--yellow-color-deep); } .applyContainer-box .applyItem.type4 { border-color: #d4d4dd; } .applyContainer-box .applyItem.type5 { border-color: var(--blue-color); } .applyContainer-box .applyItem.type6 { border-color: var(--green-color); } .applyContainer-box .applyItem-state-wrap { position: absolute; top: 0; right: 0; } .applyContainer-box .applyItem-state { border-radius: 0 0 0 var(--basic-radius); } .applyContainer-box .applyItem-title { display: block; margin-top: 1rem; } .applyContainer-box .applyItem-title > strong { font-size: 1.7rem; 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 > * { display: flex; align-items: center; gap: 0.8rem; } .applyContainer-box .applyItem-detail em { display: flex; gap: 0.3rem; padding-right: 0.8rem; align-items: center; font-size: 1.3rem; font-family: var(--special-font); padding-top: 0.15em; color: #777; position: relative; } .applyContainer-box .applyItem-detail em i { color: #B3B3BD; } .applyContainer-box .applyItem-detail em:before { content: ''; display: block; width: 1px; height: 40%; position: absolute; top: 33%; right: 0; background-color: #ccc; } .applyContainer-box .applyItem-detail span { font-size: 1.5rem; color: #777; } .applyContainer-box .applyItem-date-accept { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dedede; } .applyContainer-list { border: 1px solid #d2d4de; border-radius: var(--small-radius); 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(--basic-radius); } .applyView-state.type1 { background-color: var(--gray-color-deep); } .applyView-state.type2 { background-color: var(--special-color-bright); } .applyView-state.type3 { background-color: var(--yellow-color-deep); } .applyView-state.type4 { background-color: #d4d4dd; } .applyView-state.type5 { background-color: var(--blue-color); } .applyView-state.type6 { background-color: var(--green-color); } /*--------------- 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(--small-radius); 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(--small-radius); 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(--small-radius); 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(--small-radius) var(--small-radius) 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(--small-radius) var(--small-radius) 0 0; } .tableType > ul > li:last-child { border-radius: 0 0 var(--small-radius) var(--small-radius); border-bottom: 1px solid #dedede; } .tableType > ul > li:first-child > dl:first-child > *:first-child { border-top-left-radius: var(--small-radius); } .tableType > ul > li:first-child > dl:last-child > *:last-child { border-top-right-radius: var(--small-radius); } .tableType > ul > li:last-child > dl:first-child > *:first-child { border-bottom-left-radius: var(--small-radius); } .tableType > ul > li:last-child > dl:last-child > *:last-child { border-bottom-right-radius: var(--small-radius); } .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(--small-radius); } .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 a { position: relative; display: inline-block; padding: 0.7rem 0.7rem 0.7rem 2rem; background-color: var(--basic-color); color: #fff; border-radius: 5rem; } .introduceBox-wrap dt a > * { vertical-align: middle; } .introduceBox-wrap dt a span { display: inline-block; font-family: var(--special-font); font-size: 1.6rem; margin-right: 1rem; } .introduceBox-wrap dt a i { display: inline-block; width: 3rem; height: 3rem; line-height: 3rem; text-align: center; border-radius: 50%; background-color: var(--basic-color-deep); } .introduceBox-wrap dt a:hover::before { content:''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 5rem; background-color: rgba(0,0,0,0.2); } .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(--small-radius); 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(--small-radius); 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(--small-radius); } .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(--small-radius); } #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(--small-radius); } .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(--small-radius); 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(--small-radius); 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; }