@charset "utf-8";
/* CSS Document */


/*
.main {background:url("../img/index/visual.jpg") center; min-height: 936px; position:relative;}
.visualBg {background:url("../img/index/visualBG.png") center; min-height:240px; position:absolute; left:0; right:0; bottom:0;}
*/
.main {background:url("../img/index/visual2.jpg") center; min-height: 854px; position:relative;}
.visualBg {background:url("../img/index/visualBG.png") center no-repeat; top:595px; min-height:240px; position:absolute; left:0; right:0; bottom:0; }


.mainTitle {text-align: center; margin-bottom:40px;}
.mainTitle::before {content: ""; width:1px; height:67px; background-color:#3b3b3b; display: block; margin:0 auto;}
    .mainTitle01 {font-size:48px; letter-spacing: -1px;}
    .mainTitle02 {font-family:"Nanum Gothic"; font-size:18px; margin-top:-7px;}

.introduce , .experience, .news, .photo {padding-bottom:100px;}

/*소개*/
/*.introduce {margin-top:-96px; }*/
    .introduce ul {}
        .introduce ul li {padding:.2em;}
            .introduce ul li a {border:1px solid #e1e1e1; display: block; width:268px; height:268px; text-align: center; border-radius: 50%;}
            .introduce ul li:hover a {border:1px solid #b3c75c; background-color: #b3c75c;}
                .introduce ul li a span {display: block; font-size:18px; line-height: 20px; font-family: 'notokr-medium'; padding-top:55px;;}
                .introduce ul li a span::before {content: ""; width:140px; height:110px; display:block; margin:0 auto 10px auto; }
                .introduce ul li:hover a span {color: #fff;}
                .introduce ul li:first-child a span::before {background:url("../img/index/intro01.png") no-repeat center;}
                .introduce ul li:nth-child(2) a span::before {background:url("../img/index/intro02.png") no-repeat center;}
                .introduce ul li:nth-child(3) a span::before {background:url("../img/index/intro03.png") no-repeat center;}
                .introduce ul li:last-child a span::before {background:url("../img/index/intro04.png") no-repeat center;}

/*체험프로그램*/
.experience {background-color: #b3c75c;}
    .exTab {text-align: center; margin-bottom: 30px;}
        .exTab li {display:inline-block; margin: 0 .5em;}
            .exTab li a {display:block; background-color: #fff; color:#757575; padding: 1em 2em; border-radius: 2em; min-width: 100px; font-size: 18px; text-align: center; font-family: 'notokr-medium';}
            .exTab li a.exTabChoice {background-color: #535353; color:#fff;}

    .excalendarMonth {font-size:24px; overflow: hidden; text-align: center;}
        .excalendarMonth a {padding:0 .5em; font-family: 'notokr-medium';}
        .mLeft {float:left;}
        .mRight {float:right;}

    /*캘린더*/
    .excalendarTable {}
        .excalendarTable th {background-color: #658641; font-family:"Nanum Gothic"; color:#fff; text-align: center; border-right:1px solid #536e35; border-bottom:1px solid #5d7c3c; font-size:15px; padding:.5em;}
        .excalendarTable th:first-child {border-top-left-radius:4px;}
        .excalendarTable th:last-child {border-right:0; border-top-right-radius:4px;}
        .excalendarTable td {font-family:"Nanum Gothic"; width:77px; text-align: center; border:1px solid #ebebeb; background-color:#fff; padding:.5em 0;}
            .excalendarTable td a {display: block; min-height: 50px;}
                .excalendarTable td span {background-color:#e5e5e5; border-radius: 50%; text-align: center; width:40px; height:40px; display: inline-block; line-height:40px;}
                .excalendarTable td:first-child span {background-color:#fce0e2;}
                .excalendarTable td:last-child span {background-color:#e5e5ff;}
                .excalendarTable td .calendar2col {display:inline-block;  vertical-align: middle; padding-top:5px; font-size: 14px;}
                .excalendarTable td .calendar2col span {width:26px; height:26px; line-height:26px; margin:0 2px;}
                .excalendarTable td span.today {background-color:#fac863; } /*오늘날짜표시*/

            /*아이콘*/
            .excalendarIcon {margin-top:5px; height:5px;}
                .excalendarIcon li {display:inline-block; width:5px; height:5px; text-indent: -9999px; border-radius: 50%; margin:0 1px;}
                .excalendarIcon .iconGallery {background-color:#1d5cd1;}
                .excalendarIcon .iconIndoor {background-color:#b3c75c;}
                .excalendarIcon .iconExperience {background-color:#e97c24;}
        
        .explainCalendar {text-align: right; margin-top:10px;}
            .explainCalendar ul {display:inline-block; background-color:#dde6b5; padding:0em .5em .3em .5em; border-radius:20px;}
                .explainCalendar li {margin:0 5px; display:inline-block; font-family:"Nanum Gothic"; font-size:12px;}
                .explainCalendar li.iconGallery::before {content:""; margin-right:3px; vertical-align: middle; display:inline-block; width:10px; height:10px; border-radius: 50%; background-color:#1d5cd1;}
                .explainCalendar li.iconIndoor::before {content:"";  margin-right:3px; vertical-align: middle; display:inline-block; width:10px; height:10px; border-radius: 50%; background-color:#b3c75c;}
                .explainCalendar li.iconExperience::before {content:"";  margin-right:3px; vertical-align: middle; display:inline-block; width:10px; height:10px; border-radius: 50%; background-color:#e97c24;}

    /*리스트*/
    .programBox {background-color:#a6b956; height:450px; overflow-y: scroll; border-radius: 4px; transition: all .4s ease;}
        .programList {background-color:#fff; border-radius: 4px; padding:1em; margin:1em; cursor: pointer;}
            .programImg {border:1px solid #e1e1e1; border-radius: 4px; padding:0; min-height:109px;}
                .programImg img {width:100%; height:100%; }
            .programCon {position:relative;}
                .programIcon {display:inline-block; font-family:"Nanum Gothic"; font-size:12px; border-radius: 20px; padding:.2em .5em; color:#fff;}
                .programIcon.iconGallery {background-color:#1d5cd1; }
                .programIcon.iconIndoor {background-color:#b3c75c; }
                .programIcon.iconExperience {background-color:#e97c24; }
                .programDetail {line-height:18px;}
                    .programDetail li {font-family:"Nanum Gothic"; font-size:14px;}
                    .programDetail .programTitle {font-size:18px; font-family: 'notokr-medium'; margin:5px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
                    .reservationBtn { border:1px solid #e1e1e1; font-family:"Nanum Gothic"; color:#fff; font-size:13px; padding:.3em .5em; border-radius: 20px; position:absolute; right:63px; bottom:-14px; background-color:#26754a;}
                    .programDetailBtn {border:1px solid #e1e1e1; font-family:"Nanum Gothic"; color:#6f6f6f; font-size:13px; padding:.3em .5em; border-radius: 20px; position:absolute; right:0px; bottom:-14px;}
     .programMore {text-align: center; margin-top:25px;}
        .programMore button {border:0; background-color: #c8d688; border-radius: 20px; padding:.5em 1.8em;}   

/*소식*/
.news {background:url("../img/index/noticeBg.png") center;}
    .popupZone {border-radius: 4px; padding:0; transition: all .4s ease; position:relative;}
        .popupZoneImg {border:1px solid #dedede; display: block; border-radius: 4px;}
        .popupZoneImg img {max-height: 493.5px; }
            .popupZone img {width:100%; height:100%; border-radius: 4px;}
        .popupZonePage {overflow:hidden; }
            .popupZonePageNum {float:left;}
            .popupZonePagePlay {float:right;}
                .popupZonePagePlay a {display:inline-block; padding:0 .3em;}
                /*slick slider 자체 css 때문에*/
                .bannerSlider {margin-bottom: 0 !important;}
    .noticeQnA {padding-right:0; transition: all .4s ease;}
        .noticeQnABox {border:1px solid #dedede; border-radius: 4px; padding:2em; height:496px;}
            .noticeQnABox p {font-size:28px; position:relative; color:#242424;}
                .noticeQnABox p a {position:absolute; right:0; top:3px; color:#242424;}
            .boardList {}
                .boardList li {border-bottom:1px dashed #e0e0e0;}
                .boardList li:last-child {border-bottom:0;}
                    .boardList li a {display:inline-block; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#757575; padding:.7em 0; vertical-align: middle;}
                    .boardList li a::before {content:""; width:4px; height:4px; background-color:#7f7f7f; margin-right:20px; display:inline-block; vertical-align: middle;}
                    .boardList li a:hover {text-decoration: underline;}
                    .boardList li span.date {text-align:right; padding-top:14px; display:inline-block; font-size:14px; color:#757575; padding:1em 0 .5em 0; vertical-align: middle;}
                    .boardList li div.iconAnswer {border:1px solid #d7d7d7; padding:.3em .7em; display:inline-block; border-radius: 20px; color:#696969;}
                    .boardList li div.iconAnswer.answerCom {background-color:#e1e1e1; border:1px solid #e1e1e1;}

    .notice, .qna {height:210px;}
    .notice {border-bottom:1px solid #e0e0e0;}
    .qna {margin-top:13px;}

/*포토갤러리*/
.photo {background-color:#84c441;}
    .photo .mainTitle::before {background-color:#fff;}
        .photo .mainTitle01 {color:#fff;}
        .photo .mainTitle02 {color:#fff;}
    .photoGallery {text-align: center;}
        .photoArrow {vertical-align:middle; display: inline-block;}
            .photoGallery .photoArrow a {margin:0 auto; background-color:#77b03a; height:49px; width:49px; border-radius: 50px; display:block; line-height: 49px; text-align: center;}
        .photoCon {vertical-align:middle; padding:0; display: inline-block; margin:0 1em; overflow: hidden;}
        .sliderWrap {position: relative; overflow: hidden; max-height: 285.59px; transition: left .5s;}
            .photoCon li {/*display:block;*/ float: left; width:233px; /*margin:0 .5em;*/ border:1px solid #e2f6cd; border-radius: 4px; box-sizing:border-box;}
                .photoCon li a {display:block; background-color:#fff; border-radius: 4px;}
                    .photoImg {min-height:170px; height:170px; width:100%; }
                        .photoImg img {width:100%; height:100%; border-top-left-radius: 4px; border-top-right-radius: 4px;}
                    .photoTitle {font-size:16px; text-align: left; padding:.5em .7em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
                    .photoDate {text-align: right; font-family:"Nanum Gothic"; font-size:12px; padding:0 1em .8em 1em;  color:#868686;}
                    .photoDetail {font-family:"Nanum Gothic"; border-top:1px solid #d7d7d7;}
                        .photoDetail span {text-align: center; font-size:13px; padding:1em; display: inline-block; color:#868686;}
                        .photoDetail span:first-child {width:75%; border-right:1px solid #d7d7d7;}
                        .photoDetail span:last-child {width:10%; font-size:17px; padding:0; text-align: right;}

/*팝업*/
.popUpBox {position:absolute; background:#fff; left:5%; top:10%; border:4px solid #b8bf11; z-index:99999; box-shadow:1px 1px 2px #fff;}
    .popUpTitle {padding:.8em 4em .5em 1em; border-bottom:1px solid #ddd; font-weight:600; font-size:1em; font-family:"Nanum Gothic"; position:relative;}
        .popUpTitle a {display:block; position:absolute; right:12px; top:10px;}
    .popUpCon { padding:1em; font-family:"Nanum Gothic"; font-size:.9em;}
    .popUpBox ul {background:#b8bf11; padding:.2em .5em .3em .5em; text-align:right; }
        .popUpBox ul li {display:inline-block;}
            .popUpBox ul li button {font-size:.7em; font-family:"Nanum Gothic"; padding:.1em .3em; background:#ebebec; border:1px solid #f0f1e5; color:#666;}



/*반응형*/

@media (min-width: 992px) and (max-width: 1199.98px) {
}
       

@media (min-width: 768px) and (max-width: 1199.98px) {
/*소개*/
            .introduce ul li a {width:180px; height:180px; }
                .introduce ul li a span {  padding-top:0;;}
                .introduce ul li:first-child a span::before {background-size:100px auto; margin:0 auto; margin-top:13px;}
                .introduce ul li:nth-child(2) a span::before {background-size:100px auto; margin:0 auto; margin-top:13px;}
                .introduce ul li:nth-child(3) a span::before {background-size:100px auto; margin:0 auto; margin-top:13px;}
                .introduce ul li:last-child a span::before {background-size:100px auto; margin:0 auto; margin-top:13px;}
/*소식*/
    .boardList li div.iconAnswer {padding:.2em .4em; font-size:12px;}
        .popupZoneImg {height:471px;;}

/*포토갤러리*/
.photo .container {max-width: 100%;}
    .photoCon {margin: 0 .5em;}
        .photoCon li {width:180px; }
        .photoImg {min-height:150px; height:150px; width:100%; }


}
 

@media (max-width: 992px) {
    .main {background-size:cover; min-height: 400px;}
        .mainTitle {margin-bottom:20px;}
            .mainTitle01 {font-size:38px; }
            .mainTitle02 {font-size:14px;}
    .introduce , .experience, .news, .photo {padding-bottom:50px;}
}    

@media (min-width: 768px) and (max-width: 992px) {

/*체험프로그램*/
    .experience .container {max-width: 100%;}
    /*달력*/
    .excalendarTable td .calendar2col {font-size:10px;}
    .excalendarTable td .calendar2col span { width: 22px; height: 22px; line-height: 22px; margin: 0 -2px;}
    /*리스트*/
    .programBox {height:400px;} 
    
    /*포토갤러리*/
    .photoCon li {width:150px; margin:0 .2em; }
            .photoImg {min-height:120px; height:120px; width:100%; }
}

@media (max-width: 767.98px) {
    
    /*소개*/
        .introduce ul {padding:0 .5em;}
        .introduce ul li {padding:0 .5em; margin:0 auto 10px auto;}
                .introduce ul li a {width:130px; height:130px; margin:0 auto;}
                    .introduce ul li a span { line-height: 14px;; padding-top:0; font-size:14px;}
                    .introduce ul li a span::before {content: ""; width:auto; height:95px; display:block; margin:0 auto -10px auto; }
                    .introduce ul li:first-child a span::before {background-size:70px auto;}
                    .introduce ul li:nth-child(2) a span::before {background-size:70px auto;}
                    .introduce ul li:nth-child(3) a span::before {background-size:70px auto;}
                    .introduce ul li:last-child a span::before {background-size:70px auto;}

    /*체험프로그램*/
    .exTab {margin-bottom: 10px;}
        .exTab li {margin: 0 .2em;}
            .exTab li a {padding: .5em 1em; font-size: 16px;}  
        /*리스트*/
        .programBox {height:300px;}

    /*소식*/
        .popupZone {padding:0 6em; margin-bottom: 1em;}  
        
            .boardList li a {font-size:16px;padding:.5em 0;}
            .boardList li span.date {font-size:12px;}   

        .noticeQnA {padding-left:0;} 
        .noticeQnABox {height:auto;}
        .notice, .qna {height:180px;}     

/*포토갤러리*/
    .photo .container {max-width: 100%;}
        .photoCon li {width:130px; margin:0 .3em; }
        /*.photoCon li:last-child {display: none;}*/
                .photoImg {min-height:120px; height:120px; width:100%; }
}

@media (max-width: 575.98px) {
    /*메인*/
    .main {min-height: 210px; background-position:center 30px;}

    /*체험프로그램*/
        .exTab li {margin-bottom: .3em; vertical-align: middle;}  
            .exTab li a {padding: .3em .5em ; font-size: 14px; min-width: auto; letter-spacing: -.5px; line-height: 17px;}
    /*소식*/
        .noticeQnA {padding:0 2em;}
            .noticeQnABox {padding:1em;} 

    /*포토갤러리*/
            /*.photoCon li:nth-child(3) {display: none;}*/
            .photoImg {min-height:130px; height:130px; width:100%; }   
}


@media (max-width: 550px) {
    .introduce ul li {width: 50%; max-width: 50%; flex: 0 0 50%;}
}

@media (max-width: 499.98px) {


    /*체험프로그램*/
     /*리스트*/
     .programList {padding:.5em; }
        .programImg {min-height: 103px;}
             .programIcon {padding:.2em .5em; font-size:10px;}
                 .programDetail li {font-size:12px; line-height: 120%;}
                 .programDetail .programTitle {font-size:16px; margin:3px 0; line-height: 110%;}
                 .programDetailBtn {font-size:11px; padding:.2em .3em; margin-bottom: 10px; }
                 .reservationBtn {font-size:11px; padding:.2em .3em; margin-bottom: 10px; margin-right: -14px; }


    /*소식*/
            .boardList li span.date {font-size:8px; text-align: left;}  

    /*포토갤러리*/
        .photoGallery .photoArrow a {width:30px; height:30px; line-height: 29px; }
            .photoCon {margin:0 .2em; } 
                .photoCon li {margin:0 .2em; } 
    }