﻿div#section {
    margin-top:164px;
    min-height:750px;
}
/*-- 공통 --*/
div.boxTitle {
    padding-top:80px;
    text-align:center;
}
div.boxTitle h1 {
    font-size:32px;
    /*color:#fff*/
}
div.boxTitle span.bar {
    margin:30px 0 60px 0;
    display:inline-block;
    width:50px;
    height:1px;
    background-color:#000;
}
/*-- END 공통 --*/



/*--- 메인 배경 ---*/
div.sliderwrap {
	position:relative;
    left:50%;
    margin-left:-590px;
    width:1180px;
	height: 350px;
}

div.sliderwrap ul.bxslider li {
    width:100%;
    height:350px;
}
/* div.sliderwrap ul.bxslider li.mainImg01 {
    background:url('../img/main_01_190327.jpg') center center;
}
div.sliderwrap ul.bxslider li.mainImg02 {
    background:url('../img/main_03_190327.jpg') center center;
}
div.sliderwrap ul.bxslider li.mainImg03 {
    background:url('../img/main_05_190312.jpg') center center;
}
div.sliderwrap ul.bxslider li.mainImg04 {
    background:url('../img/main_06_190327.jpg') center center;
}
div.sliderwrap ul.bxslider li.mainImg05 {
    background:url('../img/main_08_190420.jpg') center center;
} */

div.titleBox {
    position:absolute;
    top:120px;
    left:50%;
    margin-left:-590px;
    z-index:5555;
    width:1180px;
    text-align:center;
}
div.titleBox p {
    font-size:20px;
    color:#ffffff;
}
div.titleBox span.bar {
    margin:30px 0;
    display:inline-block;
    width:67px;
    height:4px;
    background-color:#423129;
    text-indent:-9999px;
}
div.titleBox h1 {
    font-size:34px;
    color:#ffffff;
}
div.titleBox h1 span {
    display:block;
    margin-top:25px;
    font-size:42px;
}

/* bx 슬라이드 */
.bx-pager {
	position: absolute;
    right:0;
	bottom:10px;
    margin-left:-55px;
    padding:0 17.5px;
    height:30px;
    text-align:center;
    border-radius:30px;
    z-index:5556;
}
.bx-pager-item {
    display:table-cell;
    vertical-align:middle;
    width:25px;
    height:30px;
}
.bx-pager-item > a {
    margin:0 auto;
	display:block;
	width:10px;
	height:10px;
	background-color: #fff;
	border-radius: 6px;
	font-size: 0;
	color: transparent;
    opacity:0.5;
}
.bx-pager-item>a.active {
    opacity:1;
}
.bx-prev {
	display: none;
}
.bx-next {
	display: none;
}
li.ad .bx-pager {
    display:none;
}
/* END bx 슬라이드 */

/* 스크롤 아이콘 애니메이션 */
div.scroll {
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-35px;
    width:70px;
    z-index:5555;
    text-align:center;
}
div.scrollIcon {
    margin:0 auto;
    width:26px;
    height:38px;
    border:2px solid #fff;
    border-radius: 25px;
}
div.scrollIcon:before{
    content: '';
    position: absolute;
    top:7px;
    left:50%;
    width:4px;
    height:8px;
    background: #fff;
    margin-left:-2px;
    border-radius:4px;
    animation-duration:1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
}
@keyframes scroll{
  0% {opacity: 1}    
  100% {opacity: 0;transform: translateY(15px)}
}
div.scroll p {
    margin:10px 0;
    font-size:10px;
    color:#fff;
}
div.scroll span.line {
    margin:0 auto;
    display:block;
    width:1px;
    height:30px;
    background:#fff;
}
/* ENd 스크롤 아이콘 애니메이션 */
/*--- END 메인 배경 ---*/



/*--- 퀵메뉴 ---*/
div.quickMenu {
	margin:0 auto;
    width:1180px;
    background:url('../img/quickBg.png') no-repeat;
}
div.quickInner {
    padding:30px 0;
    margin:0 auto;
    width:1050px;
}
div.quickInner a {
    display:inline-block;
    margin:0 40px;
    font-size:16px;
    color:#5c5c5c;
}
div.quickInner a span {
    margin:0 auto;
    margin-bottom:10px;
    display:block;
    width:60px;
    height:60px;
    transition:0.5s
}
div.quickInner a span.ic01 {
    background:url('../img/quick_Ic01.png') no-repeat;
}
div.quickInner a span.ic02 {
    background:url('../img/quick_Ic02.png') no-repeat;
}
div.quickInner a span.ic03 {
    background:url('../img/quick_Ic03.png') no-repeat;
}
div.quickInner a span.ic04 {
    background:url('../img/quick_Ic04.png') no-repeat;
}
div.quickInner a span.ic05 {
    background:url('../img/quick_Ic05.png') no-repeat;
}
div.quickInner a span.ic06 {
    background:url('../img/quick_Ic06.png') no-repeat;
}
div.quickInner a span.ic07 {
    background:url('../img/quick_Ic07.png') no-repeat;
}
div.quickInner a:hover span {
    transform:scale(1.1);
}
/*--- END 퀵메뉴 ---*/



/*-- contain --*/
div.contain {
    margin:90px auto;
    margin-top:70px;
    width:1180px;
}

div.titDesign {
    position:absolute;
    top:-26px;
    width:80px;
    height:25px;
    z-index:2;
}
div.titPack {
    background:url('../img/packageTitle.png') no-repeat;
}
div.titNoti {
    background:url('../img/noticeTitle.png') no-repeat;
}

div.leftCnt {
    float:left;
    position:relative;
}

/*슬라이드*/
div.package {
    width:580px;
    height:580px;
    overflow:hidden;
}
/* 메인 이벤트 배너 : 580x580 영역을 비율 유지하며 채운다.
   이미지 크기 지정이 없어 원본 크기로 넘치던 것을 정리했다. (모바일 bxslider 와 동일한 방식) */
div.package ul li img {
    display:block;
    width:580px;
    height:580px;
    object-fit:cover;
    object-position:center top;
}
/*숫자페이저*/
li.tclass {
    display: inline-block;
    margin-top:5px;
    margin-right:10px;
    width:15px;
    height:15px;
    line-height:15px;
    background-color:#909090;
    border-radius:15px;
    font-size:10px;
    color:#fff;
    text-align:center;
    cursor: pointer;
}
li.ac {
    background-color:#423129;
}

div.rightCnt {
    float:right;
    width:580px;
}
div.rightCnt ul li.notice {
    position:relative;
    float:left;
    /* 우측 배너(li.ad) 를 없애고 공지사항이 우측 영역 전체 폭을 쓴다 */
    width:580px;
    height:250px;
    background-color:#07445c;
    box-sizing:border-box;
}
div.rightCnt ul li.notice span {
    display:block;
    padding:15px 0;
}
div.rightCnt ul li.notice div.more {
    position:absolute;
    top:-25px;
    right:0px;
}
div.rightCnt ul li.notice div.more a {
    color:#666;
}
div.rightCnt ul li.notice div.more a:hover {
    text-decoration:underline;
}
div.noticeInner {
    margin:25px auto;
    margin-left:30px;
    width:520px;
    height:200px;
    overflow-y:auto;
    box-sizing:border-box;
}
div.noticeInner span {
    margin-right:15px;
}
div.noticeInner span:nth-child(2n) {
    border-top:1px solid #c0deed;
    border-bottom:1px solid #c0deed;
}
div.noticeInner span a  {
    font-size:15px;
    color:#fff;
}
div.noticeInner span p {
    padding-top:8px;
    font-size:12px;
    color:#fff;
}
/* 공지사항 가로형 : 제목 왼쪽, 날짜 오른쪽 */
div.noticeInner span a {
    display:block;
    position:relative;
    padding-right:90px;
}
div.noticeInner span p {
    position:absolute;
    top:0;
    right:0;
    padding-top:0;
}

div.rightCnt ul li.ad {
    position:relative;
    float:right;
    width:280px;
    height:250px;
} 
div.reservBox {
    margin-top:20px;
    width:580px;
    height:310px;
    border:1px solid #eee;
    box-sizing:border-box;
}
div.reservInner {
    float:left;
    padding:20px;
    border-right:1px solid #eee;
    text-align:center;
    width:190px;
    box-sizing:border-box;
}
div.reservInner p.reservTit {
    font-size:22px;
    font-family: 'Noto Sans Medium';
    color:#333;
}
div.reservInner div.carHead {
    margin:50px 0;
}
div.reservInner div.carHead span {
    display:block;
    font-size:14px;
    color:#8c8c8c;
}
div.reservInner div.carHead span.month {
    margin:24px 0;
    font-size:57px;
    font-family: 'Noto Sans Medium';
    color:#ffd200;
}
div.reservInner p.reservData {
    letter-spacing:-0.3px;
    font-family: 'Noto Sans Medium';
    font-size:13px;
    color:#454545;
}
div.reservInner p.reservData span {
    padding-left:2px;
    color:#45b2bd;
}
table.calenda {
    margin:10px 5px;
    float:left;
    width:378px;
}
table.calenda tr {
    height:40px;
}
table.calenda tr th {
    font-size:16px;
    font-family: 'Noto Sans Light';
    color:#454545;
}
table.calenda tr td {
    text-align:center;
    font-size:15px;
    font-family: 'Noto Sans DemiLight';
    color:#454545;
}
table.calenda tr td a {
    display:inline-block;
    width:35px;
    height:35px;
    line-height:31px;
    box-sizing:border-box;
    border:2px solid transparent;
}
table.calenda tr td.sun a {
    color:#eb6100;
}
table.calenda tr td.sat a {
    color:#00a0e9;
}
table.calenda tr td a.reserv {
    border-bottom:2px solid #45b2bd; 
}
table.calenda tr td a.reserv:hover {
    border:2px solid #45b2bd;
}
table.calenda tr td a.today {
    border:2px solid #fb5a4a; 
}
table.calenda tr td a.closed {
    border-bottom:2px solid #ddd; 
    color:#ccc;
}
table.calenda tr td a.pick, table.calenda tr td a:active {
    border:2px solid #45b2bd;
    background:#45b2bd;
    color:#fff;
}
/*-- END contain --*/



/*-- 이달의 이벤트 --*/
div.eventArea {
    width:100%;
    height:660px;
    background:url('../img/eventBg.png') no-repeat;
}
div.eventArea div.boxTitle {
    color:#fff;
}
div.eventArea div.boxTitle span.bar {
    background:#fff;
}
ul.eventInner {
    margin:0 auto;
    width:1180px;
}
ul.eventInner li {
    float:left;
    margin-left:20px;
    width:280px;
}
ul.eventInner li:first-child {
    margin-left:0;
}
a.eventBox {
    display:block;
    width:280px;
    border:2px solid transparent;
    color:#000;
    transition:none;
    z-index: 5555;
}
div.imgContainer {
    position: relative;
    width:100%;
    height:210px;
    overflow:hidden;
}
div.imgContainer div.overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.4);
    overflow:hidden;
    width:100%;
    height:0;
    transition:.3s ease;
    z-index: 4444;
}
div.imgContainer div.overlay span.viewIc {
    margin:70px auto;
    display:block;
    width:80px;
    height:100px;
    background:url('../img/veiwIc.png') no-repeat;
}
div.txtContainer {
    padding:20px;
    background-color:#f9f9f9;
}
div.txtContainer h3 {
    font-size:17px;
    line-height:26px;
}
div.txtContainer p {
    margin-top:30px;
    font-size:14px;
}

a.eventBox:hover {
    color:#fff;
    border:2px solid #ff883c;
}
a.eventBox:hover div.imgContainer div.overlay {
    height:210px;
}
a.eventBox:hover div.txtContainer {
    background-color:#ff883c;
}
/*-- END 이달의 이벤트 --*/



/*-- 퀵 배너 (연단체모집, 조인&초대, 내일할인, 모바일 예약안내) --*/
div.quickBanner {
    width:100%;
    height:520px;
    background:url('../img/qbBg.png') no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center;
}
ul.qbInner {margin:0 auto; width:1180px; padding-top:90px; text-align:center;  margin:auto}
ul.qbInner li {display:inline-block; width:280px; height:342px; margin:0 50px; vertical-align:top;}

/* 리스트 4개일 경우
ul.qbInner {margin:0 auto; width:1180px;}
ul.qbInner li {float:left; margin-top:90px; margin-left:20px;}
ul.qbInner li:first-child {margin-left:0;} */

a.bannerBox {
    display:block;
    padding:70px 0;
    width:280px;
    background:rgba(63,130,166,0.4 );
    text-align:center;
    box-sizing:border-box;
}
a.bannerBox:hover {
    background:#2d5368;
}
a.bannerBox div.icon {
    margin:0 auto;
    width:75px;
    height:75px;
    background:url('../img/icon2.png') no-repeat;
    background-position:0 0;
}
a.bannerBox div.icon02 {
    background-position:-225px 0;
}
a.bannerBox div.icon03 {
    background-position:-75px 0;
}
a.bannerBox div.icon04 {
    background-position:-150px 0;
}
a.bannerBox h3 {
    margin-top:10px;
    font-size:21px;
    color:#fff;
}
a.bannerBox span.bar {
    margin:30px auto;
    display:block;
    width:25px;
    height:4px;
    background:#fff;
}
a.bannerBox div.viewBtn {
    position:relative;
    margin:0 auto;
    width:110px;
    height:30px;
    line-height:30px;
    border:1px solid #fff;
}
a.bannerBox div.viewBtn p {
    position:absolute;
    text-align:center;
    width:110px;
    font-size:14px;
    color:#fff;
    z-index:5555;
}
a.bannerBox div.viewBtn div.overlay {
    position:absolute;
    bottom:-1px;
    left:0;
    right:0;
    background:#fff;
    overflow:hidden;
    width:100%;
    height:0;
    transition:.3s ease;
    z-index:4444;
}
a.bannerBox:hover div.viewBtn p {
    font-family: 'Noto Sans Medium';
    color:#2c5269;
}
a.bannerBox:hover div.viewBtn div.overlay {
    height:32px;
}

a.timeSale {
    position:relative;
    overflow:hidden;
}
a.timeSale:hover div.viewBtn p {
    color:#fff;
}
a.timeSale:hover div.saleInner {
    bottom:0;
}
a.timeSale div.saleInner {
    position:absolute;
    bottom:-150px;
    left:0;
    width:280px;
    height:145px;
    background:#1b313d;
    z-index:6666;
    transition:.3s ease;
}
a.timeSale div.saleInner > p {
    margin:15px;
    font-size:13px;
    line-height:16px;
    color:#fce4af;
}
a.timeSale div.saleInner div.time {
    margin:0 auto;
    width:245px;
    height:65px;
    overflow-y:scroll;
}
table.timeTbl {
    width:100%;
}
table.timeTbl tr {}
table.timeTbl tr th {
    font-size:12px;
    color:#bbb;
}
table.timeTbl tr td {
    padding:5px 0;
    font-size:16px;
    color:#fff;
}
/*
a.timeSale div.saleInner div.time p {
    margin-bottom:10px;
    font-size:16px;
    color:#fff;
}
/*-- END 퀵 배너 (연단체모집, 조인&초대, 내일할인, 모바일 예약안내) --*/



/*-- 패밀리 사이트 --*/
div.familyInner {
    margin:0 auto;
    width:1180px;
display: flex;
gap: 7px;
}
div.familyInner a {
flex: 1;
    position:relative;
    margin-bottom:90px;
    display:block;
/*    float:left;
    margin-left:20px;
    width:280px;*/
    height:280px;
    overflow:hidden;
}
div.familyInner a:first-child {
    margin-left:0;  
}
div.familyInner a h3 {
    position:absolute;
    margin-top:100px;
    height:90px;
    display:flex;
    width:100%;
    background:rgba(0,0,0,0.7);
    font-size:30px;
    text-align:center;
    color:#fff;
    z-index:2222; 
}

div.familyInner a h3 img{
    width: 80%;
    margin: auto;
}

div.familyImg {
    position:absolute;
    width:380px;
    height:280px;
    z-index:1111;
    transition: 0.5s;
}
div.hills {
    background:url('../img/family01.png') no-repeat;
}
div.alps {
    background:url('../img/family02.png') no-repeat;
}
div.hotel {
    background:url('../img/family03.png') no-repeat;
}
div.westopia {
    background:url('../img/family04.png') no-repeat;
}
div.base {
    background:url('../img/family05.png') no-repeat;
}
div.familyInner a:hover div.familyImg {
    transform:scale(1.1);
}
/*-- END 패밀리 사이트 --*/



/*-- 전화번호 --*/
div.phoneNumber {
    padding:90px 0;
    margin:0 auto;
    width:1180px;
    border-top:1px solid #cacae4;
}
div.phoneNumber div.phoneInner {
    float:left;
    width:580px;
    height:140px;
    border:1px solid #cacae4;
    box-sizing:border-box;
    background:url('../img/callIc01.png') no-repeat 125px 40px;
}
div.phoneNumber div.phoneInner:first-child {
    margin-right:20px;
    background:url('../img/callIc00.png') no-repeat 125px 40px;
}
div.phoneNumber div.phoneInner p {
    margin-top:45px;
    margin-left:220px;
    font-size:14px;
    color:#7f7f7f;
}
div.phoneNumber div p.number {
    margin-top:10px;
    margin-left:220px;
    font-size:34px;
    color:#ff8a3c;
}
/*-- END 전화번호 --*/