@charset "utf-8"; /* font */ h1 {font-family: } /* nav */ #nav {width: 100%; position:fixed; top: 20px; left: 0; z-index: 1000;} #nav .logo {margin-top: 0px; text-align: center;} #nav .logo a {text-align: center; display: inline-block;} #nav .logo .name {font-family: 'Noto Sans KR', 'Pretendard', sans-serif; font-weight: 500; font-size: 32px; letter-spacing: 0px; line-height: 1; padding-top: 10px; color: #f97316; } #nav .logo .pension {font-family: 'Noto Sans KR', 'Pretendard', sans-serif; font-size: 23px; color: #444; font-style: italic; letter-spacing: 0.5px; line-height: 1; margin-left: 6px;} /* logo media query*/ @media (max-width: 1000px){ #nav {top: 0;} #nav .logo a {float: right; text-align: left; display: block;} #nav .logo .name {font-weight: 500; font-size: 36px; } #nav .ogo .pension {font-size: 36px;} } /* PC 메뉴 */ #nav .menu-wrap {margin-top: 45px; height: 60px; text-align: center; background-color: #1565c0; display: flex; align-items: center; justify-content: center;}/* 바다#1565c0 산#009900 가족# */ #nav .menu-wrap .mNav {display: none;}/* 모바일 삼선 */ #nav .menu-wrap .menu { width: 100%; text-align: center;} #nav .menu-wrap .menu ul { display: flex; align-items: center; justify-content: center; height: 60px; margin: 0; padding: 0; list-style: none; } #nav .menu-wrap .menu li {display: block; height: 60px;}/* 메뉴 */ #nav .menu-wrap .menu li a {display: inline-block; align-items: center; justify-content: center; height: 60px; font-size:14pt; color: #fff; text-decoration: none; font-family:'Noto Sans KR', sans-serif; line-height: 60px; padding: 0px 30px; letter-spacing: 2px; } /*menu-wrap media query*/ @media (max-width: 1000px){ #nav .menu-wrap {position: absolute; left: 0px; top: 0; display: block; width: 100%; transition: left 0.3s ease-in-out; background: #fff ;} #nav .menu-wrap .mNav {display: block; float: left; cursor: pointer; padding: 10px 0 0px 10px;} #nav .menu-wrap .menu { display: none; overflow: hidden; position: absolute; left: 110px; top: 0px; width: 70%; background: #fff; text-align: center; } #nav .menu-wrap .menu ul {display: block; width: 100%; height: auto; margin: 0; padding: 0; list-style: none;} #nav .menu-wrap .menu ul li {display: flex; width: 80%; height: auto; margin: 0; padding: 0; border-bottom: 1px solid #ddd; font-family:'Abel', sans-serif; } #nav .menu-wrap .menu ul li a {display: block; flex: 1; width: 50%; height: auto; padding: 16px 5px; font-size: 32px; line-height: 1.4; text-align: center; color: #555; text-decoration: none; border-right: 1px solid #ddd; font-size: 32px; color:#999; } #nav .menu-wrap .menu ul li a:last-child {border-right: 0; } } #nav .top ul li {display: none; } /* top media query*//* 모바일아이콘 */ @media (max-width: 1000px){ #nav .top {position: absolute; left: 10px; top: 160px; } #nav .top li {display: inline; } #nav .top li img {display: block; padding-top: 10px; width: 80px; height: 100px;} #nav .top li a {padding: 5px 10px; letter-spacing: 1px; } } /* slide메인 */ #slide {width: 100%; padding-top: 150px; } #slide .mainslide {width: 100%; height: auto; } /* slide media query*/ @media (max-width: 1000px){ #slide {padding-top: 160px;} #slide .mobileslide {display: inline; } } ------------------------------------------------------------------------- /* title서브공용 */ .title .ttlname {font-size: 42px; padding-top: 50px; font-weight: 600; letter-spacing: 0;} .title .ttlname span { letter-spacing: 0;} .title .ttlname .area {font-size: 30px; color: #9ca3af; margin-right: 8px; font-weight: 600;} .title .ttlname .name {font-size: 40px; color: #374151; font-weight: 600;} .title .ttlname .intro {font-size: 30px; color : #005666; margin-left: 6px; font-weight: 600;} .title .ttlsbj {font-size: 20px; padding-bottom: 10px; color: #444; line-height: 1.6;} .title .ttlen {font-size: 12px; text-transform: uppercase; color: #005666; border-bottom: 1px solid #005d8b; border-top: 1px solid #005d8b; margin: 18px 350px; padding: 6px 0; letter-spacing: 14px; font-family: 'Satisfy', cursive;} /* title media query*/ @media (max-width: 1000px){ .title {width: 100%; height: auto; } .title .ttlname {font-size: 48px; } .title .ttlsbj {font-size: 32px; padding: 0 130px;} .title .ttlen {font-size: 20px; margin: 20px 150px 20px 150px; padding: 10px; letter-spacing: 5px; font-family: 'Satisfy', cursive;} } ------------------------------------------------------------------------- /* 방 */ #room .room h1{color: #000; text-shadow: 0px 10px 20px rgba(0,0,0,0.5);} #room .room li {font-size: 14px; display: block; } #room .roomimg {width: 100%; } #room .roomimg li {display: inline-block; border: 0px solid #ccc; } #room .roomimg li img {width: 450px; } #room .line {border: none; width: 85%; height: 3px; background: #ccc; margin-top: 30px;} /* 객실보기 media query */ @media (max-width: 1000px){ #room .room h1 {font-size: 48px;} #room .room li {font-size: 32px; padding: 0 130px;} } /* 부대시설 */ #special .special h1, #special .specialimg h1 {color: #000; text-shadow: 0px 10px 20px rgba(0,0,0,0.5);} #special .special li {font-size: 14px; display: block; } #special .specialimg {width: 100%; } #special .specialimg li {font-size: 14px; display: inline-block; border: 0px solid #ccc; } #special .specialimg li img {width: 450px; } /* 부대시설 media query */ @media (max-width: 1000px){ #special .special h1, .specialimg h1 {font-size: 48px;} #special .special li {font-size: 32px; padding: 0; } #special .specialimg ul {display: flex !important; flex-wrap: wrap !important; gap: 12px; padding: 0; margin: 0; justify-content: center;} #special .specialimg li {font-size: 32px; width: calc(50% - 12px) !important; padding: 0 !important; display: block !important; box-sizing: border-box; vertical-align: top;} #special .specialimg li img{ width: 100%; height: auto; isplay: block;} #special .title .ttlen {font-size: 20px; margin: 50px 150px 50px 150px; padding: 10px; letter-spacing: 5px; font-family: 'Satisfy', cursive;} } /* 정원 */ #garden .garden h1, #garden .gardenimg h1 {color: #000; text-shadow: 0px 10px 20px rgba(0,0,0,0.5);} #garden .garden li {font-size: 14px; display: block; } #garden .gardenimg {width: 100%; } #garden .gardenimg li {font-size: 14px; display: inline-block; border: 0px solid #ccc; } #garden .gardenimg li img {width: 450px; } /* 정원 media query */ @media (max-width: 1000px){ #garden .garden h1, .gardenimg h1 {font-size: 48px;} #garden .garden li {font-size: 32px; padding: 0; } #garden .gardenimg ul {display: flex !important; flex-wrap: wrap !important; gap: 12px; padding: 0; margin: 0; justify-content: center;} #garden .gardenimg li {font-size: 32px; width: calc(50% - 12px) !important; padding: 0 !important; display: block !important; box-sizing: border-box; vertical-align: top;} #garden .gardenimg li img{ width: 100%; height: auto; isplay: block;} #garden .title .ttlen {font-size: 20px; margin: 50px 150px 50px 150px; padding: 10px; letter-spacing: 5px; font-family: 'Satisfy', cursive;} } /* 주변여행 */ #special .tour h1, #special .tourimg h1 {color: #000; text-shadow: 0px 10px 20px rgba(0,0,0,0.5);} #special .tour li {font-size: 14px; display: block; } #special .tourimg {width: 100%; } #special .tourimg li {font-size: 14px; display: inline-block; border: 0px solid #ccc; } #special .tourimg li img {width: 450px; } /* 부대시설 media query */ @media (max-width: 1000px){ #special .tour h1, .tourimg h1 {font-size: 48px;} #special .tour li {font-size: 32px; padding: 0; } #special .tourimg ul {display: flex !important; flex-wrap: wrap !important; gap: 12px; padding: 0; margin: 0; justify-content: center;} #special .tourimg li {font-size: 32px; width: calc(50% - 12px) !important; padding: 0 !important; display: block !important; box-sizing: border-box; vertical-align: top;} #special .tourimg li img{ width: 100%; height: auto; isplay: block;} #special .title .ttlen {font-size: 20px; margin: 50px 150px 50px 150px; padding: 10px; letter-spacing: 5px; font-family: 'Satisfy', cursive;} } /* reser */ /* 떠나요달력*/ #reser .resertable {width: 100%; margin:0 auto; display:block; overflow: hidden; height: 600px; } #reser .resertable p {font-style: 24px; border: 0px solid #ccc;} #reser .resertable iframe {width: 100%; border: 0; overflow: hidden; height: 800px; } /*떠나요달력 media query */ @media (max-width: 1000px){ #reser .resertable {width: 100%; padding-top: 120px;} #reser .resertable p {font-style: 36px; border: 0px solid #ccc;} #reser .resertable iframe {width: 100%; height: 800px;} /*높이 맞춰주세요*/ } /* 요금표 table */ #reser .reser table {width: 100%; border-collapse: collapse; padding: 1px; border: 1px solid #ccc;} #reser .reser th, td {padding: 10px; border: 1px solid #ccc; } #reser .reser th {width: 14%; background: #E8E8E8;} #reser .reser td {vertical-align:top; } #reser .reser tr:nth-child(even) {background-color: #e7f7f7;} #reser .reser td img {width: 100%; } /* 예약안내 */ #reser .reser h1 {color: #000; text-shadow: 0px 10px 20px rgba(0,0,0,0.5);} #reser .reser li {font-size: 14px;} /* 예약안내 media query */ @media (max-width: 1000px){ #reser .reser h1 {font-size: 48px;} #reser .reser li {font-size: 24px; padding: 0 130px;} #reser .title .ttlen {font-size: 20px; margin: 50px 150px 50px 150px; padding: 10px; letter-spacing: 5px; font-family: 'Satisfy', cursive;} } /* footer */ #footer {text-align: center; padding: 10px 50px; background-color: #ccc; } #footer li {position: relative; display: inline; margin-right: 5px; white-space: nowrap; line-height:1.6; color:#424242;} #footer li::after {padding-left: 5px; content: "l"} #footer li:last-child::after {content: ""} #footer address {padding-top: 10px; font-size: 12px; color:#979797;} #footer address a {color:#979797;} /* footer media query*/ @media (max-width: 1100px){ #footer li {font-size: 20px; margin: 0;} #footer address {font-size: 18px;} } /* ========================= 상단으로 가기 버튼 모든 페이지 공통 ========================= */ .top-btn{ position: fixed; right: 18px; bottom: 90px; /* 전화걸기 버튼과 안 겹치게 */ z-index: 9999; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient( 135deg, #ff6f91, #ff9671 ); color: #fff; font-size: 40px; font-weight: 700; box-shadow: 0 8px 22px rgba(255, 111, 145, 0.45); } /* hover */ .top-btn:hover{ filter: brightness(1.08); } /* 모바일 위치 조정 */ @media (max-width: 1000px){ .top-btn{ right: 14px; bottom: 86px; } }