@charset "utf-8"; html, body { background-color: white; } .ez-popup-close { background-color:#222 !important; } .wrap { position:relative; width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; min-width: 320px; .center-wrap { position:relative; width: 100%; margin: 0 auto; &.w1 { max-width:1720px; } &.w2 { max-width:1360px; } } header { position: relative; } .mainMenuWrap { .flex { padding:0 100px; } } .mainGnb { .tel { display:inline-flex; align-items:center; gap:10px; padding:8px 20px; color:#fff; background:#1d5aac; border-radius:50px; } } .bannerWrap { position: relative; height: auto; overflow: hidden; } [slogan-wrap] { position: absolute; z-index: 9; top: 50%; left: 50%; width:100%; transform: translate(-50%, -50%); pointer-events: none; p { font-weight: 500; &.tit { margin:15px 0; font-size:4vw; font-weight:900; line-height:1.3em; } &.con { font-size:20px; } } &.sub { top:45%; .con_ti { margin-bottom:10px; font-size:3.2vw; } } } .mainBanner { width: 1920px; height: 870px; position: relative; left: 50%; transform: translateX(-50%); z-index: 0; } .contentsAbout { .img { padding:15% 0; border-radius:1.2vw; background:url('/res/img_about.jpg') no-repeat center center; background-size:cover; } } .contentsService { background:#f0edeb; .service.flex { gap:50px; .items { flex:1 calc((100% - 100px) / 3); padding:4%; text-align:center; background:#fff; border-radius:1.2vw; .icon { display:inline-block; background:#7b614e; border-radius:50%; } .con_ti { margin:20px 0; } .con_txt { min-height:150px; } } } } .contentsInquiry { .bg { padding:100px 60px; background:url('/res/img_inquiry.jpg') no-repeat center center; border-radius:1.2vw; background-size:cover; } .info_wrap { width:50%; padding:60px; border-radius:1.2vw; background:rgba(255,255,255,0.3); backdrop-filter:blur(5px); > .flex { justify-content:start; gap:10px; } } } .contentsBoard { padding-bottom:150px; > .flex { align-items:stretch; .board_wrap { &.notice { width:calc((100% / 3) - 50px); li { padding:25px 0; border-bottom:1px solid #ddd; &:nth-child(1) { border-top:1px solid #ddd; } } } &.gallery { width:calc((100% - (100% / 3)) - 50px); #gallery-lst { gap:40px; > li { width:calc((100% - 80px) / 3); img { margin-bottom:20px; border-radius:15px; } } } } dd { margin-top:35px; .date { display:block; font-size:16px; font-weight:500; color:#666; } .ellipsis { width: calc(100% - 80px); font-size:20px; font-weight:600; color:#333; } } } } } > .bottom-wrap { background:#222; .copyright { padding-top:80px; padding-bottom:80px; .flex { gap:60px; dt { div { margin-top:20px; font-size:16px; font-weight:400; color:#ccc; } p { display:flex; gap:15px; font-size:16px; color:#ccc; span { position:relative; &::before { content:"|"; padding-right:15px; } &:nth-child(1)&::before { display:none; } } } } dd { .menu.flex { align-items:stretch; gap:60px; .con_ti { color:#fff; } .lst { margin-top:15px; a { display:block; padding:5px 0; color:#ccc; &:hover { color:#7b614e; } } } } } } } .bottom { padding:40px 0; background:#2d2d2d; .flex { gap:60px; justify-content:center; } } } .subBannerWrap { position: relative; .subBanner { width: 1920px; margin: 0 auto; position: relative; left: 50%; transform: translateX(-50%); z-index: 1; } } .subMenu-wrap { position:absolute; bottom:0; width:100%; padding:30px 0; background:rgba(0,0,0,0.3); backdrop-filter:blur(5px); z-index:9; .sub_menu { display:none; } } .contentsSubWrap { min-height: 450px; .contentsSubTop h2 { padding-top:80px; font-size:2.7vw; color:#69916d; } .contentsSub { padding:100px 0; } } .subMenu-2 { display: flex; justify-content:center; gap: 60px; > li { a { color:rgba(255,255,255,0.5); &:hover { color:#fff; } } &._on > a { color:#fff; } } } .subMenu-3 { display: flex; > li { &._on > a { background-color: yellow; } > a { border: 1px solid; padding: 5px 10px; } } } .label { font-weight: 500; } #mmenu-icon { display: none; } nav.mobileMenu { height: calc(100dvh - 98px) !important; } @media only screen and (max-width: 1720px) { .center-wrap { padding-left:20px; padding-right:20px; &.w2 { padding:0; } } .mainMenuWrap { > .flex { padding:0 20px; } } .bannerWrap { overflow: visible; } .mainBanner { width: calc(1920 / 1720 * 100vw); height: auto; } .subBannerWrap { .subBanner { width: calc(1920 / 1720 * 100vw); height: auto; } } } @media only screen and (max-width: 1024px) { .mainLogo img { width:140px; } .mainGnb { .tel { padding:5px 15px; } } [slogan-wrap] { p { &.con { font-size:18px; } } &.sub { .con_ti { font-size:4.2vw; } } } .contentsService { .service.flex { gap:25px; .items { flex:1 calc((100% - 50px) / 3); padding:30px; .icon { width:80px; } .con_ti { margin:12px 0; } } } } .contentsInquiry { .bg { padding:40px; background-size:cover; } .info_wrap { width:55%; padding:40px; .con_txt br { display:block !important; } } } .contentsBoard { padding-bottom:60px; > .flex { gap:40px; .board_wrap { width:100% !important; &.notice { li { padding:18px 0; } } &.gallery { #gallery-lst { gap:20px; > li { width:calc((100% - 40px) / 3); } } } dd { margin-top:20px; .date { font-size:15px; } .ellipsis { font-size:18px; } } } } } .subMenu-wrap { padding:15px 0; } .subMenu-2 { gap:40px; } .contentsSubWrap { .contentsSubTop h2 { padding-top:40px; font-size:3.5vw; } .contentsSub { padding:40px 0; } } } @media only screen and (max-width: 768px) { .center-wrap { padding-left:15px; padding-right:15px; } .mainMenuWrap { padding:15px 0; > .flex { padding:0 15px; } } .mainGnb { display:none; } #mainMenuMobile .flex { justify-content:end; gap:10px; padding-right:15px; } #mmenu-icon { position: relative; display: flex; align-items:center; justify-content:center; width:40px; aspect-ratio:1/1; margin:0; padding:0; color: #fff; background-color: #69916d; border-radius: 100%; } .hamburger-box { display: flex; align-items:center; justify-content:center; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width:18px; height:3px; background-color:#fff; } .hamburger-inner::before { top:-6px } .hamburger-inner::after { bottom:-6px; } .nav-title-wrap { height:50px; border:0; h2 { display:none; } } .nav-title-wrap .nav-close-button:before, .nav-title-wrap .nav-close-button:after { border-color:#fff; } .mmenu-container { background: #69916d; } nav.mobileMenu ul { padding-left:0; } nav.mobileMenu .nav-item-wrapper { padding:10px 15px; } nav.mobileMenu .nav-item-wrapper a { font-weight:500; color:#fff; } nav.mobileMenu .has-children .nav-next span::before { border-top-color:#fff; border-left-color:#fff; } nav.mobileMenu .menu-sub2 { padding-left:15px; background-color:transparent; } nav.mobileMenu .menu-sub2 .nav-item-wrapper { padding:5px 15px; } nav.mobileMenu .menu-sub2 .nav-item-wrapper a { font-weight:500; } #mainMenu { display: none !important; } .contentsAbout { .img { min-height:225px; border-radius:15px; } } .contentsService { .service.flex { gap:20px; .items { flex:1 100%; padding:20px; border-radius:15px; .icon { width:70px; } .con_txt { min-height:auto; margin-bottom:25px; } } } } .contentsInquiry { .bg, .info_wrap { border-radius:15px; } .bg { background-position:calc(100% + 150px) center; } } > .bottom-wrap { .copyright { padding-top:40px; padding-bottom:40px; .flex { dd { display:none; } } } .bottom { padding:20px 0; .flex { gap:20px; img { height:50px; } } } } } @media only screen and (max-width: 540px) { [slogan-wrap] { p { color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.3); &.tit { font-size:28px; text-shadow:none; } &.con { display:none; } } &.sub { .con_ti { font-size:24px; } p { display:none; } } } .mainBanner { width: 100%; left: 0; transform: translateX(0); } .contentsInquiry { .bg { padding:60px 20px; } .info_wrap { width:100%; padding:20px; backdrop-filter:blur(3.5px); } } .contentsBoard { padding-bottom:40px; > .flex { .board_wrap { &.gallery { #gallery-lst { gap:20px 10px; > li { width:calc((100% - 20px) / 3); img { margin-bottom:10px; border-radius:7px; } } } } } } } .subMenu-2 { gap:25px; } .contentsSubWrap { .contentsSubTop h2 { font-size:22px; } } > .bottom-wrap { .copyright { img { width:120px; } .flex { dt { p { flex-direction:column; gap:0; span { &::before { display:none; } } } } } } .bottom { .flex { img { height:35px; } } } } } } body { padding-top: 0; &.menu-fixed { padding-top: 120px; .mainMenuWrap { position: fixed; top: 0; margin-top: 0; width: 100%; max-width: 1920px; background-color: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(5px); box-shadow: 0px 1px 5px gray; z-index: 1039; .ezMenuContainer, .mainMenu { background: none; } } .ez-subMenuBG { position: fixed !important; } @media only screen and (min-width: 1500px) { .mainMenuWrap { padding: 0 calc(50% - 750px); } } @media only screen and (min-width: 1920px) { .mainMenuWrap { padding: 0 210px; } } } } @keyframes ani_mainSlider { 0% { opacity: 0; top: 1em; } 20% { opacity: 1; top: 0; } 85% { opacity: 1; top: 0; } 100% { opacity: 0; top: 1em; } }