*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none; color: #222;}
body{font-family: 'Noto Sans KR', sans-serif; color: #222; position: relative;}

.center{width: 1200px; margin: 0 auto;}

/* pc */
.mo{display: none;}

/* ---------------- header ---------------- */
#header{
    width: 100%; padding: 20px 0; box-sizing: border-box;
    z-index: 5; position: absolute; top: 0; left: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%, rgba(255,255,255,0) 100%);
}
#header h1{float: left;}
#header h1 img{width: 100px; display: block;}
#header ul{float: left;position: absolute; left: 50%; transform: translateX(-50%); width: 632px;}
#header ul li{float: left; line-height: 60px;}
#header ul li:hover a{color: #fffad4;}
#header ul li a{color: #fff; font-size: 18px; margin: 0 30px; transition: all 0.4s;}
#header button{
    float: right; background: none; color: #fff; border: 1px solid #fff;
    border-radius: 25px; font-size: 14px; padding: 10px 20px; margin: 11px 0; transition: all 0.5s;
}
#header button:hover{background: #fff; color: #222;}

/* ---------------- visual ---------------- */
#visual{position: relative; overflow: hidden;}
#visual ul{margin: 0 auto; width: 100%; height: 100vh; background: #666;}
#visual ul li{width: 100%; height: 100vh; position: absolute; top: 0; left: 0;}
#visual ul .main1{
    background: url(../img/main1.jpg) no-repeat center;
    background-size: cover; z-index: 1; display: block;
}
#visual ul .main2{
    background: url(../img/main2.jpg) no-repeat center;
    background-size: cover; display: none;
}
#visual ul .main3{
    background: url(../img/main3.jpg) no-repeat center;
    background-size: cover; display: none;
}
#visual div{
    width: 1200px; height: 100vh; position: absolute; z-index: 2;
    top: 0; left: 50%; transform: translateX(-50%);
}
#visual div p{
    position: absolute; bottom: 16%; font-size: 50px;
    color: #fff; text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
#visual div p span{font-weight: bold; border-bottom: 4px solid #fff;}

/* ---------------- container ---------------- */
#container{background: #fff;}
/* 일정안내 */
.plan{padding: 200px 0 100px;}
/* 일정안내 - 타이틀 */
.plan .title{position: relative; margin-bottom: 50px;}
.plan .title h2{font-size: 40px; margin-bottom: 10px;}
.plan .title p{font-size: 24px;}
.plan .title div{position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.plan .title div span{float: left; padding-right: 10px;}
.plan .title div img{float: left; border: 1px solid #222; border-radius: 50%; display: block; width: 24px;}
/* 일정안내 - 리스트 */
.plan .wrap{position: relative; overflow: hidden; padding: 20px 0; height: 550px;}
/* .plan .wrap ul{width: 2880px;} */
.plan .wrap ul li{width: 340px; height: 460px; float: left; margin-right: 20px; position: relative; overflow: hidden; transition: all 0.5s;}
/* 일정안내 - 리스트 - 텍스트 */
.plan .wrap ul li .text{
    width: 100%; height: 220px; position: absolute; top: 320px; left: 0; color: #fff;
    background: rgb(0,0,0); padding: 20px; box-sizing: border-box; transition: all 0.5s;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
}
.plan .wrap ul li .text h4{font-size: 30px; line-height: 40px; height: 80px;}
.plan .wrap ul li .text p{font-size: 14px;}
.plan .wrap ul li .text button{
    position: absolute; bottom: 20px; right: 20px; cursor: pointer;
    background: none; border: 1px solid #fff; padding: 10px 20px
}
/* 일정안내 - 호버 */
.plan .wrap ul li .text button:hover{background: #fff; color: #222;}
.plan .wrap ul li:hover{box-shadow: 0px 0px 10px #aaa;}
.plan .wrap ul li:hover .text{
    top: 240px; background: #fff; color:#222; border-radius: 40px 40px 0 0;
    box-shadow: 0px 0px 10px #aaa;
}
.plan .wrap ul li:hover .text button{color: #222; border: 1px solid #222; }
/* 일정안내 - 아이콘 */
.plan .wrap .prev{width: 40px; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
.plan .wrap .next{width: 40px; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
/* 일정안내 - 리스트이미지 */
.plan .list1{background: url(../img/p1.jpg) no-repeat center;background-size: cover;}
.plan .list2{background: url(../img/p2.JPG) no-repeat center;background-size: cover;}
.plan .list3{background: url(../img/p3.jpg) no-repeat center;background-size: cover;}
.plan .list4{background: url(../img/p4.jpg) no-repeat center;background-size: cover;}
.plan .list5{background: url(../img/p5.jpg) no-repeat center;background-size: cover;}
.plan .list6{background: url(../img/p6.jpg) no-repeat center;background-size: cover;}
.plan .list7{background: url(../img/p7.jpg) no-repeat center;background-size: cover;}
.plan .list8{background: url(../img/p8.jpg) no-repeat center;background-size: cover;}
/* 일정안내 - 페이지네이션 */
.plan .page{bottom: 50px;}
.plan .page span{width: 50px; height: 6px; border-radius: 0px;}
.plan .swiper-pagination-bullet-active{background: #2d2796;}

/* 시설안내 */
.info{padding: 100px 0; position: relative; height: 900px; box-sizing: border-box;}
/* 시설안내 - 타이틀 */
.info .title{position: relative; text-align: right;}
.info .title h2{font-size: 40px; margin-bottom: 10px;}
.info .title p{font-size: 24px;}
/* 시설안내 - 이름 */
.info .center{position: relative; height: 100%;}
.info .name{position: absolute; top: 380px; right: 0; transform:translateY(-50%); width: 50%;}
.info .name li{line-height: 70px; position: relative; overflow: hidden; cursor: pointer;}
.info .name li .bar{width: 0; height: 2px; background-color: #2d2796; position: absolute; right: 140px; margin: 34px 0; transition: 0.5s;}
.info .name li p{font-size: 26px; color: #666; font-weight: bold; float: right; transition: 0.5s;}
/* 시설안내 - 박스 */
.info .box{
    position: absolute; top: 140px; left: 50%; transform: translateX(-50%); z-index: 2; overflow: hidden;
    width: 400px; height: 480px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); background: #fff;
}
.info .box ul li{
    width: 100%; height: 100%; padding: 50px; box-sizing: border-box; transition: 0.5s;
    position: absolute; left: 0; background: #fff; opacity: 0; transition: 0.5s;
}
.info .box ul li h4{font-size: 20px; color: #888; font-weight: 400;}
.info .box ul li h3{font-size: 40px; margin-bottom: 10px;}
.info .box ul li .bar{width: 60px; height: 5px; background: #2d2796; margin: 20px 0;}
.info .box ul li p{font-size: 18px; line-height: 30px;}
.info .box ul li .more{position: absolute; bottom: 50px; right: 50px;}
.info .box ul li .more span{float: left; margin-right: 10px;}
.info .box ul li .more img{float: left; border: 1px solid #222; border-radius: 50%; display: block; width: 24px;}
/* 시설안내 - 배경 */
.info .bg{width: 50%; height: 700px; position: absolute; top: 100px; left: 0; overflow: hidden;}
.info .bg ul{width: 100%; height: 2800px; position: absolute; top: 0; left: 0;}
.info .bg ul li{width: 100%; height: 700px;}
/* 시설안내 - 배경 - 이미지 */
#bg1{background: url(../img/bg1.JPG) no-repeat center; background-size: cover;}
#bg2{background: url(../img/bg2.jpg) no-repeat center; background-size: cover;}
#bg3{background: url(../img/bg3.jpg) no-repeat center; background-size: cover;}
#bg4{background: url(../img/bg4.jpg) no-repeat center; background-size: cover;}
/* 시설안내 - on 클래스 */
.info .name li.on p{color: #2d2796; font-size: 32px;}
.info .name li.on .bar{width: 480px;}
.info .box li.on{opacity: 1; top: 0;}



/* 행사갤러리 */
.gallery{padding: 100px 0;}
/* 행사갤러리 - 타이틀 */
.gallery .title{position: relative; margin-bottom: 50px;}
.gallery .title h2{font-size: 40px; text-align: center; margin-bottom: 10px;}
.gallery .title p{font-size: 24px; text-align: center;}
.gallery .title div{position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.gallery .title div span{float: left; padding-right: 10px;}
.gallery .title div img{float: left; border: 1px solid #222; border-radius: 50%; display: block; width: 24px;}
/* 행사갤러리 - 탭메뉴 */
.gallery .tab_menu{overflow: hidden;}
.gallery .tab_menu li{
    float: left; width: 25%; line-height: 60px; box-sizing: border-box; text-align: center;
    font-size: 20px; color: #aaa; display: block; cursor: pointer;
    /* border-bottom: 4px solid #ddd; */
}
.gallery .tab_menu li.on{
    border-radius: 0 80px 0 0; color: #222;
    border-bottom: 4px solid #2d2796;
}
/* 행사갤러리 - 탭박스 */
.gallery .wrap{position: relative; width: 100%; height: 600px;}
.gallery .wrap .box{
    position: absolute; width: 100%; height: 600px; top: 0; left: 0;
    box-sizing: border-box; display: none;
    background: #ddd;
}
.gallery .wrap .box.on{display: block;}
.gallery .wrap .box ul{width: 100%; height: 100%; overflow: overlay;}
.gallery .wrap .box ul li{float: left; width: 25%; height: 50%; overflow: hidden; cursor: pointer;}
/* 행사갤러리 - 탭박스 - 호버배경 */
.gallery .wrap .box ul li .bb{width: 100%; height: 100%; position: relative;}
.gallery .wrap .box ul li .bb .top{width: 100%; height: 0px; position: absolute; top: 0; left: 0; background: #222;}
.gallery .wrap .box ul li .bb .bottom{width: 100%; height: 0px; position: absolute; bottom: 0; left: 0; background: #222;}
.gallery .wrap .box ul li .bb .right{width: 0px; height: 100%; position: absolute; top: 0; right: 0; background: #222;}
.gallery .wrap .box ul li .bb .left{width: 0px; height: 100%; position: absolute; top: 0; left: 0; background: #222;}

.gallery .wrap .box ul li .bb{width: 100%; height: 100%; background:rgba(0, 0, 0, 0.5); position: relative; transition: 0.5s; opacity: 0;}
.gallery .wrap .box ul li .bb img{
    border: 1px solid #fff; border-radius: 50%; opacity: 0;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.gallery .wrap .box ul li:hover .bb{opacity: 1;}
.gallery .wrap .box ul li:hover .bb img{opacity: 1;}


/* 이용안내 */
.about_m{display:none;}
.about{padding: 100px 0 200px; margin-bottom: 383px;}
/* 이용안내 - 타이틀 */
.about .title{position: relative; margin-bottom: 100px;}
.about .title h2{font-size: 40px; margin-bottom: 10px;}
.about .title p{font-size: 24px;}
/* 이용안내 - 리스트 */
.about .wrap ul::after{clear: both; content: ''; display: block;}
.about .wrap ul li{float: left; width: 270px; height: 370px; position: relative; margin-right: 40px; transition: all 0.5s;}
.about .wrap ul li .con{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
.about .wrap ul li .con img{width: 60px; margin-bottom: 10px;}
.about .wrap ul li .con p{color: #fff; font-size: 20px;}
.about .wrap ul li .in{
    width: 90%; height: 90%; border: 2px solid #fff;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    box-sizing: border-box; opacity: 0; transition: all 0.5s;
}

.about .wrap ul .a1{background: url(../img/a1.jpg) no-repeat center; background-size: 270px 370px;}
.about .wrap ul .a2{background: url(../img/a2.jpg) no-repeat center; background-size: 270px 370px;}
.about .wrap ul .a3{background: url(../img/a3.jpg) no-repeat center; background-size: 270px 370px;}
.about .wrap ul .a4{background: url(../img/a4.jpg) no-repeat center; background-size: 270px 370px; margin-right: 0;}

.about .wrap ul li:hover .in{opacity: 1; border-radius: 135px 135px 0 0;}

/* ---------------- footer ---------------- */
/* 풋터 */
#footer{
    background: #444; color: #ddd; padding: 90px 0; overflow: hidden; width: 100%;
    position: fixed; bottom: 0; left: 0; z-index: -5;
}
#footer .center{position: relative;}
/* 왼쪽 */
#footer h1{width: 100px;}
#footer h1 img{width: 100%; display: block;}

#footer .f_m{margin: 30px 0; overflow: hidden; width: 600px;}
#footer .f_m li{float: left; margin-right: 20px;}
#footer .f_m li a{color: #ddd;}

#footer .f_t{overflow: hidden; width: 600px;}
#footer .f_t li{float: left; margin-right: 20px; font-size: 14px; font-weight: 200; line-height: 30px;}
/* 오른쪽 */
#footer .sns{position: absolute; right: 0; bottom: 50px;}
#footer .sns li{float: left; width: 40px; margin-left: 20px;}
#footer .sns li img{width: 100%; display: block;}
#footer p{position: absolute; bottom: 0; right: 0; font-size: 12px; font-weight: 200;}

/* aside */
aside .top_bt{
    background: url(../img/up.png) no-repeat #2d2796;
    background-size: 20px 20px;
    background-position: center 3px;
    border-radius: 50%; width: 44px; height: 44px;
    position: fixed; right: 20px; bottom: 20px;
    cursor: pointer;
}
aside .top_bt p{
    color: #fff; font-size: 12px; text-align: center;
    margin-top: 18px;
}

/* ---------------- 태블릿 ---------------- */

@media (max-width: 1220px) and (min-width: 768px){
.pc{display: none;}
.mo{display: block;}
.center{width: 90%;}
    


/* header */
#header{position: fixed;}
#header .center{width: 100%;}
#header h1{margin-left: 10px;}
#header h1 img{width: 80px;}
#header button{float: right; margin: 8px 10px; font-size: 12px; padding: 8px 18px;}
#header .menu{float: right; position: relative; width: 30px; height: 24px; margin: 12px 10px;}
#header .menu div{
    width: 30px; height: 2px; background: #fff;
    position: absolute; left: 0; transition: all 0.5s;
}
#header .menu .bar1{top: 0;}
#header .menu .bar2{transform: translate(-50%,-50%); top: 50%; left: 50%;}
#header .menu .bar3{bottom: 0;}

#header .menu.on .bar1{top: 50%; transform: translateY(-50%) rotate(-45deg);}
#header .menu.on .bar2{opacity: 0;}
#header .menu.on .bar3{top: 50%; transform: translateY(-50%) rotate(45deg);}

#header ul{
    position: fixed; width: 50vw; height: 100vh; background: rgba(34, 34, 34, 0.8); 
    top: 0; left: auto; right: -50vw; float: none; transform: none; z-index: -1;
    padding-top: 90px; box-sizing: border-box; transition: all 0.5s;
}
#header ul.on{right: 0;}
#header ul li{float: none; line-height: 80px; font-size: 20px;}


/* visual */
#visual div{width: 100%;}
#visual div p{left: 5%;}


/* container */

/* 일정안내 */
.plan .title h2{font-size: 36px;}
.plan .title p{font-size: 20px;}

/* 시설안내 */
.info .title h2{font-size: 36px;}
.info .title p{font-size: 20px;}
.info .name li p{font-size: 20px;}
.info .name li .bar{right: 110px;}
.info .name li.on p{font-size: 26px;}
.info .box{width: 340px; height: 440px; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.info .box ul li{padding: 40px;}
.info .box ul li h4{font-size: 16px;}
.info .box ul li h3{font-size: 36px;}
.info .box ul li p{font-size: 16px;}
.info .box ul li .more{bottom: 40px; right: 40px;}
.info .box ul li .more span{font-size: 14px; line-height: 22px;}
.info .box ul li .more img{width: 20px;}


/* 행사갤러리 */
.gallery .title h2{font-size: 36px;}
.gallery .title p{font-size: 20px;}
.gallery .wrap .box ul li{width: 33.33%;}

/* 이용안내 */
.about_m{display:none;}
.about{margin-bottom: 424px;}
.about .title{margin-bottom: 80px;}
.about .title h2{font-size: 36px;}
.about .title p{font-size: 20px;}
.about .wrap ul li{width: 23%; height: 300px; margin-right: 2.6%;}
.about .wrap ul li .con img{width: 50px;}
.about .wrap ul li .con p{font-size: 16px;}



/* footer */
#footer{padding: 60px 0;}
#footer .sns{position: relative; bottom: auto; right: auto; margin: 30px 0;}
#footer .sns::after{clear: both; content: ''; display: block;}
#footer .sns li:first-of-type{margin-left: 0;}
#footer p{text-align: right;}



}


/* ---------------- 모바일 ---------------- */

@media (max-width: 767px){
.pc{display: none;}
.mo{display: block;}
.center{width: 90%;}


/* header */
#header{position: fixed; padding: 10px 0;}
#header .center{width: 100%;}
#header h1{margin-left: 10px;}
#header h1 img{width: 80px;}
#header button{float: right; margin: 8px 10px; font-size: 12px; padding: 8px 18px;}
#header .menu{float: right; position: relative; width: 30px; height: 24px; margin: 12px 10px;}
#header .menu div{
    width: 30px; height: 2px; background: #fff;
    position: absolute; left: 0; transition: all 0.5s;
}
#header .menu .bar1{top: 0;}
#header .menu .bar2{transform: translate(-50%,-50%); top: 50%; left: 50%;}
#header .menu .bar3{bottom: 0;}

#header .menu.on .bar1{top: 50%; transform: translateY(-50%) rotate(-45deg);}
#header .menu.on .bar2{opacity: 0;}
#header .menu.on .bar3{top: 50%; transform: translateY(-50%) rotate(45deg);}

#header ul{
    position: fixed; width: 50vw; height: 100vh; background: rgba(34, 34, 34, 0.8); 
    top: 0; left: auto; right: -50vw; float: none; transform: none; z-index: -1;
    padding-top: 90px; box-sizing: border-box; transition: all 0.5s;
}
#header ul.on{right: 0;}
#header ul li{float: none; line-height: 80px; font-size: 20px;}


/* visual */
#visual div{width: 100%;}
#visual div p{left: 5%; font-size: 30px;}



/* container */

/* 일정안내 */
.plan{padding: 100px 0 50px;}

.plan .title h2{font-size: 32px;}
.plan .title p{font-size: 16px;}
.plan .title div span{font-size: 12px;}
.plan .title div img{width: 16px;}

.plan .wrap{height: 450px; padding: 0;}
.plan .wrap ul li{height: 400px;}
.plan .wrap ul li .text{top: 270px; height: 200px;}
.plan .wrap ul li:hover .text{top: 200px;}
.plan .wrap ul li .text h4{font-size: 20px; line-height: 30px;}
.plan .wrap ul li .text p{font-size: 12px;}
.plan .wrap ul li .text button{font-size: 12px; padding: 6px 14px;}
.plan .page{bottom: 0;}
.plan .page span{width: 30px; height: 4px;}

/* 시설안내 */
.info{height: 700px; padding: 50px 0;}
.info .title h2{font-size: 32px;}
.info .title p{font-size: 16px;}

.info .name{top: 55%;}
.info .name li p{font-size: 16px;}
.info .name li .bar{display: none;}
.info .name li.on p{font-size: 20px;}

.info .box{width: 70%; height: 370px; top: 55%; left: 36%; transform: translate(-50%,-50%);}
.info .box ul li{padding: 26px;}
.info .box ul li h4{font-size: 12px;}
.info .box ul li h3{font-size: 28px;}
.info .box ul li .bar{width: 40px; height: 3px;}
.info .box ul li p{font-size: 13px; line-height: 26px;}
.info .box ul li .more{bottom: 26px; right: 26px;}
.info .box ul li .more span{font-size: 10px; line-height: 14px;}
.info .box ul li .more img{width: 14px;}

.info .bg{z-index: -1; height: 600px; top: 50px;}


/* 행사갤러리 */
.gallery{padding: 50px 0;}
.gallery .title h2{font-size: 32px; text-align: left;}
.gallery .title p{font-size: 16px; text-align: left;}
.gallery .title div span{font-size: 12px;}
.gallery .title div img{width: 16px;}
.gallery .wrap{height: 400px;}
.gallery .wrap .box{height: 400px;}
.gallery .wrap .box ul li{width: 50%;}
.gallery .tab_menu li.on{border-radius: 0 30px 0 0;}
.gallery .tab_menu li{font-size: 16px; line-height: 40px;}

/* 이용안내 */
.about{display: none;}
.about_m{padding: 50px 0 100px; margin-bottom: 360px; display: block;}
.about_m .title{position: relative; margin-bottom: 50px;}
.about_m .title h2{font-size: 32px; text-align: left;}
.about_m .title p{font-size: 16px; text-align: left;}

.about_m .wrap ul li{border-bottom: 1px solid #ccc; position: relative; padding: 20px 10px;}
.about_m .wrap ul li .con h4{font-size: 16px; margin-bottom: 5px;}
.about_m .wrap ul li .con p{font-size: 12px; color: #666}
.about_m .wrap ul li .con img{
    width: 40px; position: absolute; 
    right: 10px; top: 50%; transform: translateY(-50%);
}



/* footer */
#footer{padding: 40px 0;}
#footer h1{width: 80px;}
#footer .f_m{width: 100%; margin: 16px 0;}
#footer .f_m li{font-size: 13px; margin: 0 5px;}

#footer .f_t{width: 100%;}
#footer .f_t li{margin-right: 10px; font-size: 12px; line-height: 24px;}

#footer .sns{position: relative; bottom: auto; right: auto; margin: 20px auto;}
#footer .sns::after{clear: both; content: ''; display: block;}
#footer .sns li{width: 30px; margin-left: 20px;}
#footer .sns li:first-of-type{margin-left: 0;}
#footer p{position: relative; text-align: right; font-size: 10px;}



/* aside */
aside .top_bt{
    width: 34px; height: 34px;
    background-size: 16px 16px;
    background-position: center 1px;
    right: 10px; bottom: 10px;

}
aside .top_bt p{font-size: 11px; margin-top: 13px;}













}