/*visual*/
.main_visual{position:relative;background:url(/pages/cstrise/img/main/visual_bg.jpg) no-repeat center top;padding:130px 0;}
.visual_box{width:1500px;margin:0 auto}
.visual_box p{font-size:40px;font-weight:200;font-family: Gsans}
.visual_box h3{font-size:60px;font-weight:800;color:#3EB3AF;font-family: Gsans}
.visual_box h3 span{color:#005D6C}
.visual_search{margin:40px 0;height:60px;border: 4px solid transparent;display:flex;align-items: center;padding:0 20px  ;border-radius: 35px;
    background:linear-gradient(white, white) padding-box, linear-gradient(45deg, #48E6A2, #5386E4, #48E6A2) border-box;
    background-size: 100% 100%, 300% 300%;
    animation: gradientMove 7s linear infinite;}
@keyframes gradientMove {
    0% {
        background-position: 0% 50%, 0% 50%;
    }
    100% {
        background-position: 0% 50%, 300% 50%;
    }
}
.visual_search select{border:none;font-size:18px;}
.visual_search input{border:none;font-size:18px;width:500px;font-weight:300;}
.visual_search button{font-size:0;width:30px;height:30px;border:none;background:#fff url(/pages/cstrise/img/main/ico_search.png) no-repeat center top}
.btn_rev{text-decoration:none;background:#333333;border-radius:30px;padding:7px 45px;height:60px;font-size:20px;line-height:60px;color:#fff;transition: transform .35s ease, box-shadow .35s ease;
    -webkit-transition: transform .35s ease, box-shadow .35s ease;
    -moz-transition: transform .35s ease, box-shadow .35s ease;
    text-transform: uppercase;
    text-decoration: none;}
.btn_rev:hover{text-decoration: none;transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.08);}

.rcmd_search{display:flex;gap:30px;align-items: center}
.rcmd_search h4{color:#333;background:url(/pages/cstrise/img/main/ico_search2.png) no-repeat left top;padding-left:30px;font-size:20px;}
.rcmd_search ul{display:flex;gap:10px;flex-wrap:wrap}
.rcmd_search ul li a{display:inline-block;padding:10px 20px;font-size:17px;background:#f5f5f5;border-radius:20px; transition: transform .35s ease, box-shadow .35s ease;
    -webkit-transition: transform .35s ease, box-shadow .35s ease;
    -moz-transition: transform .35s ease, box-shadow .35s ease;
    text-transform: uppercase;
    text-decoration: none;}
.rcmd_search ul li a:hover{background: #e6e6e6;text-decoration: none; transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.08);}

.main_titbox.tit_reserve{background:url(/pages/cstrise/img/main/titlebg1.png) no-repeat 220px}
.main_titbox.tit_program{background:url(/pages/cstrise/img/main/titlebg2.png) no-repeat 295px}
.main_titbox.tit_board{background:url(/pages/cstrise/img/main/titlebg3.png) no-repeat 480px 0}

.main_visual .character1{ animation: floatY 2s cubic-bezier(.4,0,.6,1) infinite;display:block;width:246px;height:272px;background:url(/pages/cstrise/img/main/character1.png) no-repeat center top;position:absolute;top:10%;left:57%;transform:translate(-50%,-50%);z-index:9; }
.main_visual .character2{ animation: floatY 3s cubic-bezier(.4,0,.6,1) infinite;display:block;width:246px;height:272px;background:url(/pages/cstrise/img/main/character2.png) no-repeat center top;position:absolute;bottom:-100px;right:7%;transform:translate(-50%,-50%);z-index:9; }

@keyframes floatY {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
/*예약*/
.main_reserve{width:1500px;margin:0 auto;padding:80px 0;position: relative}
.main_reserve .main_titbox{display:flex;justify-content: space-between;align-items:flex-end;padding-bottom:30px}
.main_reserve .main_titbox h3{font-size:42px;font-weight:200;color:#222;line-height:50px;letter-spacing: -2px}
.main_reserve .main_titbox h3 span{font-weight:700}
.main_reserve .main_titbox .cate {display:flex;gap:10px;align-items: center}
.main_reserve .main_titbox .cate ul{display:flex;gap:5px;}
.main_reserve .main_titbox .cate ul li a{border-radius:20px;display:inline-block;padding:8px 20px;font-size:19px;color:#333;border:1px solid #ddd;}
.main_reserve .main_titbox .cate ul li a.active{background:#222;color:#fff}
.main_reserve .main_titbox .cate ul li a:hover{text-decoration: none;border:1px solid #555}
.main_reserve .main_titbox .cate .more{text-decoration:none;line-height:40px;text-align:center;border:1px solid #474747;font-weight:200;display:block;width:45px;height:45px;border-radius:50%;font-size:40px}
.main_reserve .main_titbox .cate .more:hover{background:#474747;color:#fff}

.main_reserve_list{position:relative;overflow: hidden}
.main_reserve_list ul{display:flex;gap:44px;position: relative;justify-content: flex-start;width: max-content}
.main_reserve_list ul li{flex:0 0 auto}
.main_reserve_list .itmbox{display:flex;flex-direction: column;gap:10px}
.main_reserve_list .itmbox .imgbox{border-radius:20px;overflow:hidden;}
.main_reserve_list .itmbox .imgbox img{transition:transform .35s ease}
.main_reserve_list .itmbox .lab{width:70px;text-align:center;background:#F59E25;color:#fff;border-radius:7px;padding:5px 10px;}
.main_reserve_list .itmbox h4{font-size:24px;color:#333;}
.main_reserve_list .itmbox button{background:#245FDE;color:#fff;padding:10px;border-radius:10px;font-size:20px;}
.main_reserve_list .itmbox button.end{background:#CDCDCD}
.main_reserve_list .itmbox:hover .imgbox img{transform:scale(1.1)}
.main_reserve > button{width:75px;height:75px;position: absolute;top:50%;border-radius:50%;opacity: .2}
.main_reserve > button.prev{left:-90px;background:#222 url(/pages/cstrise/img/main/arrow_prev.png) no-repeat center center}
.main_reserve > button.next{right:-90px;background:#222 url(/pages/cstrise/img/main/arrow_next.png) no-repeat center center}
.main_reserve > button:hover{opacity: 1}

/*프로그램*/
.main_program{background:#31ACA4;padding:80px 0;position: relative;overflow: hidden}
.main_program .main_titbox{width:1500px;margin:0 auto;display:flex;justify-content: space-between;align-items:flex-end;margin-bottom:60px}
.main_program .main_titbox h3{font-size:42px;font-weight:200;color:#fff;line-height:50px;letter-spacing: -2px}
.main_program .main_titbox h3 span{font-weight:700}
.main_program .main_titbox .cate {display:flex;gap:10px;align-items: center}
.main_program .main_titbox .cate ul{display:flex;gap:5px;}
.main_program .main_titbox .cate ul li a{border:1px solid #31ACA4;border-radius:20px;display:inline-block;padding:8px 20px;font-size:19px;color:#fff}
.main_program .main_titbox .cate ul li a.active{background:#222;color:#fff}
.main_program .main_titbox .cate ul li a:hover{background: #308983}
.main_program .main_titbox .cate .more{color:#fff;background:#111;text-decoration:none;line-height:40px;text-align:center;font-weight:200;display:block;width:45px;height:45px;border-radius:50%;font-size:40px}
.main_program_list {display:flex;gap:40px;position: relative;}
.main_program_list li a{box-shadow:0 0 20px rgba(0,0,0,.3);overflow:hidden;width:340px;height:420px;display:inline-block;background:#fff;border-radius:20px;padding:40px 30px;text-decoration: none; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);}
.main_program_list li a .overlay{display:none;background: #000000;width:340px;height:420px;position: absolute;top:0;left:0;opacity: 0.5;border-radius:200px;}
.main_program_list .itmbox{position: relative;z-index: 9}
.main_program_list .itmbox .hover{display:none}
.main_program_list .itmbox span{width:70px;text-align:center;border-radius:7px;padding:5px 10px;;}
.main_program_list .itmbox .lab{background:#F59E25;color:#fff}
.main_program_list .itmbox .ing{background:#245FDE;color:#fff;}
.main_program_list .itmbox .end{background:#333;color:#fff;}
.main_program_list .itmbox h4{font-size:30px;color:#333;margin:20px 0 40px;font-family: Gsans; display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; min-height: 70px;}
.main_program_list .itmbox .info{font-weight:500;color:#666;padding:5px 0;font-size:17px;letter-spacing: -1px;}
.main_program_list .itmbox .info em{font-weight:700;display:inline-block;margin-right:10px;color:#333}
.main_program_list .itmbox .dday{margin-top:30px;margin-bottom:20px;color:#31ACA4;font-weight:700;}

.main_program_list li.active a:hover{ border-radius:200px;padding:60px}
.main_program_list li.active a:hover h4{color:#fff}
.main_program_list li.active a:hover p{display:none}
.main_program_list li.active a:hover .hover{margin-top:200px;display:block;color:#fff;font-size:20px;background:url(/pages/cstrise/img/main/arrow_long.png) no-repeat right center;padding-right:95px}
.main_program_list li.active a:hover .overlay{display:block}
.main_program_list li.active a.program_sing:hover{background:#000 url(/pages/cstrise/img/main/programbg1.png) no-repeat center center}

.main_program > button{z-index:9;width:75px;height:75px;position: absolute;top:56%;border-radius:50%;opacity: .2}
.main_program > button.prev{left:80px;background:#222 url(/pages/cstrise/img/main/arrow_prev.png) no-repeat center center}
.main_program > button.next{right:80px;background:#222 url(/pages/cstrise/img/main/arrow_next.png) no-repeat center center}
.main_program > button:hover{opacity: 1}

.carousel{position: relative;left:180px}
.track {display: flex;transition: transform 0.4s ease;will-change: transform;}
.item {opacity: 0.6;transform: scale(0.95);transition: opacity 0.4s ease, transform 0.4s ease;}
/* 가운데 활성화 */
.item.active {opacity: 1;transform: scale(1);}


/*공지 및 게시판*/
.main_board{padding:0 0 80px 0}
.main_board > div{width:1500px;margin:0 auto;gap:50px}
.main_board > div > div{width:50%}
.main_board .main_titbox{display:flex;justify-content: center;margin-bottom:30px;text-align:center;padding-top:80px}
.main_board .main_titbox h3{font-size:42px;font-weight:200;color:#222;line-height:50px;letter-spacing: -2px}
.main_board .main_titbox h3 span{font-weight:700}
.main_board .tit{display:flex;justify-content: space-between;align-items: center;margin:20px 0 10px}
.main_board .tit h4{font-size:30px;color:#333;font-weight:700}

.main_notice .notice_list{border:1px solid #ddd;border-radius:20px;padding:20px;}
.main_notice .notice_list ul li{border-bottom:1px solid #ddd;padding:15px 0;display:flex;align-items: center;justify-content: space-between}
.main_notice .notice_list ul li a{;transition:font-size 0.3s ease;width:540px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display:block;font-size:17px;color:#333;line-height:30px}
.main_notice .notice_list ul li a:hover{text-decoration: none;color:#009c97;font-weight:600;font-size:17.5px }
.main_notice .notice_list ul li:last-child{border: none}

.faq_list ul{display:flex;gap:10px}
.faq_list ul li{width:25%}
.faq_list ul li a{width:100%;opacity:.7;transition:transform 0.4s ease, filter 0.4s ease;position:relative;height:123px;display:inline-block;padding:20px 20px;font-size:17px;background:#f2f2f2;border-radius:15px;}
.faq_list ul li a:hover{opacity:1;text-decoration: none;transform:scale(1.05);}
.faq_list ul li a::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:4px solid #009c97;border-radius:inherit;opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path 0.4s ease, opacity 0.2s ease;pointer-events:none}
.faq_list ul li a:hover::after{opacity:1;clip-path:inset(0 0 0 0)}
.faq_list ul li a span{display:block;font-weight:700;font-size:23px;color:#222;margin-bottom:10px;}

.main_popup .popup_num{display:flex;gap:20px;align-items: center}
.main_popup .popup_num p{font-size:24px;font-weight:700;color:#222}
.main_popup .popup_num p.active{color:#FA4343}
.main_popup .popup_num .line{display:inline-block;width:55px;height:2px;background:#ddd}
.main_popup .popup_num button{width:40px;height:40px;display:inline-block}
.main_popup .popup_num button.popup_prev{background:url(/pages/cstrise/img/main/popup_prev.png) no-repeat center center}
.main_popup .popup_num button.popup_play{background:url(/pages/cstrise/img/main/popup_play.png) no-repeat center center}
.main_popup .popup_num button.popup_pause{background:url(/pages/cstrise/img/main/popup_pause.png) no-repeat center center}
.main_popup .popup_num button.popup_next{background:url(/pages/cstrise/img/main/popup_next.png) no-repeat center center}

.popup_list {overflow: hidden;width:100%;height:100%;}
.popup_track {display: flex;width:100%;height:100%;position: relative; transition: transform 0.4s ease;}
.popup_item {flex: 0 0 100%; /* 한 장씩 */;width:100%}



/****** Mobile ******/
@media screen and (max-width:690px) {
    html { font-size: 62.5%;}

    .m_column{flex-direction: column}

    .main_visual{padding:50px 0}
    .visual_box{width:100%;padding:0 10px;}
    .visual_box p{font-size:22px;}
    .visual_box h3{font-size: 36px;}
    .rcmd_search{gap:10px;flex-wrap: wrap;margin:40px 0 20px}
    .rcmd_search ul {flex-wrap:wrap;gap:5px}
    .rcmd_search ul li a{font-size:14px;}
    .visual_search{width:100%;margin:40px 0 10px;}
    .visual_search input{width:80%;font-size:15px;}
    .visual_search select{font-size:14px;}
    .btn_rev{width:100%;margin-bottom:10px;text-align:center;font-size:15px}
    .main_visual .character1{display:none;}
    .main_visual .character2{display:none;}


    /*예약*/
    .main_titbox{flex-direction: column;align-items:flex-start;padding:50px 0 30px}
    .main_reserve .main_titbox h3{font-size:30px;line-height:40px;}
    .main_titbox.tit_reserve{align-items:flex-start;background-position: -18px -24px;background-size:80px;}
    .main_reserve .main_titbox .cate ul li a{font-size:15px;padding:10px;}
    .main_reserve_list{width:342px;margin:0 auto}
    .main_reserve{padding:40px 20px;width:100%}
    .main_reserve_list ul{gap:0}
    .main_reserve_list .itmbox h4{font-size: 20px}
    .main_reserve_list .itmbox button{font-size:14px;}
    .main_reserve > button{width:50px;height:50px;top:57%;z-index: 9}
    .main_reserve > button.prev{left:0;}
    .main_reserve > button.next{right:0;}
    .track, .track_reserve {display: flex;will-change: transform;touch-action: pan-y;}

    /*프로그램*/
    .main_program{padding:40px 20px;width:100%;}
    .main_program .main_titbox{width:100%;align-items: flex-start ;margin-bottom:30px;background-position: -18px -6px;background-size:80px}
    .main_program .main_titbox h3{font-size:30px;line-height:40px;margin-bottom:20px}
    .main_program .main_titbox .cate ul{flex-wrap: wrap}
    .main_program .main_titbox .cate .more{position: absolute;right:20px;top:130px;}
    .main_program .main_titbox .cate ul li a{font-size:15px;    background: #308983;}
    .main_program.tit_program{background-position: -18px -24px;background-size:80px;}


    .main_program > button{width:50px;height:50px;top:65%}
    .main_program > button.prev{left:0}
    .main_program > button.next{right:0}
    .carousel{left:0;}
    .main_program_list{gap:0;width:342px;margin:0 auto}
    .main_program_list li a{height:350px}
    .main_program_list .itmbox h4{font-size:20px; display: -webkit-box; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; min-height: 0;}
    .main_program_list .itmbox .info{font-size:14px;}
    .main_program_list li.active a:hover .overlay{height:100%}
    .main_program_list li.active a:hover .hover{margin-top:120px;}
    .main_board .main_titbox{width:100%;align-items:center;padding:40px 0 0;margin:0;background-position: 4% top;background-size:100px}
    .main_board .main_titbox h3{font-size:30px;line-height:40px;margin-bottom:20px}
    .main_board > div{width:100%;padding:0 20px}
    .main_board > div > div{width:100%}
    .main_board .tit h4{font-size:22px}

    .main_notice .notice_list{padding:10px}
    .main_notice .notice_list ul li a{font-size:15px;width:65%}

    .faq_list ul{flex-wrap: wrap;}
    .faq_list ul li{width:48%}
    .faq_list ul li a{height:150px;padding:20px 10px;font-size:14px;}

    .popup_list{height:100%;}
    .popup_item img{max-width: 100%;}
    .main_popup .tit{flex-direction: column;align-items:flex-start}
    .main_popup .popup_num{gap:5px;}
    .main_popup .popup_num p{font-size:17px;}

    .alignc { display: none;}
}



/*tablet*/
@media screen and (min-width:691px) and (max-width:1023px) {

    .main_visual{padding:70px 0}
    .visual_box{width:100%;padding:0 10px;}
    .visual_box p{font-size:30px;}
    .visual_box h3{font-size:40px;}
    .rcmd_search{gap:10px;flex-wrap: wrap;margin:40px 0 20px}
    .rcmd_search ul {flex-wrap:wrap;gap:5px}
    .rcmd_search ul li a{font-size:14px;}
    .visual_search{width:100%;}
    .visual_search input{width:80%;font-size:15px;}
    .visual_search select{font-size:14px;}
    .btn_rev{width:45%;margin-bottom:10px;text-align:center;font-size:20px;padding:0}
    .main_visual .character1{width:150px;height:170px;background-size:100%;left:60%;top:3%}
    .main_visual .character2{display:none}


    .main_titbox{align-items:flex-start;padding:50px 0 30px}
    .main_reserve .main_titbox h3{font-size:30px;line-height:40px;}
    .main_titbox.tit_reserve{align-items:flex-start;background-position: -18px -24px;background-size:80px;}

    .main_reserve{padding:40px 20px;width:100%;}
    .main_reserve .main_titbox .cate ul li a{font-size:15px;padding:10px;}
    .main_reserve_list ul{gap:10px}
    .main_reserve_list .itmbox h4{font-size: 20px}
    .main_reserve_list .itmbox button{font-size:14px;}
    .main_reserve > button{width:50px;height:50px;top:57%;z-index: 9}
    .main_reserve > button.prev{left:0;}
    .main_reserve > button.next{right:0;}
    .track,
    .track_reserve {
        display: flex;
        will-change: transform;
        touch-action: pan-y;
    }
    .main_program{padding:40px 20px;width:100%;}
    .main_program .main_titbox{flex-direction:column;width:100%;align-items: flex-start ;margin-bottom:30px;background-position: -18px -6px;background-size:80px}
    .main_program .main_titbox h3{font-size:30px;line-height:40px;margin-bottom:20px}
    .main_program .main_titbox .cate ul{flex-wrap: wrap}
     .main_program .main_titbox .cate ul li a{font-size:15px;    background: #308983;}
    .main_program.tit_program{background-position: -18px -24px;background-size:80px;}
    .main_program > button{width:50px;height:50px;top:65%}
    .main_program > button.prev{left:0}
    .main_program > button.next{right:0}
    .carousel{left:0;}
    .main_program_list{gap:7px;}
    .main_program_list li a{height:350px}
    .main_program_list .itmbox h4{font-size:20px;display: -webkit-box; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; min-height: 0;}
    .main_program_list .itmbox .info{font-size:14px;}
    .item{opacity: 1;transform: scale(1);}

    .main_board .main_titbox{width:100%;align-items:center;padding:40px 0 0;margin:0;background-position: 4% top;background-size:100px}
    .main_board .main_titbox h3{font-size:30px;line-height:40px;margin-bottom:20px}
    .main_board > div{width:100%;padding:0 20px;flex-direction: column}
    .main_board > div > div{width:100%}
    .main_board .tit h4{font-size:22px}

    .main_notice .notice_list{padding:10px}
    .main_notice .notice_list ul li a{font-size:15px}

    .faq_list ul{flex-wrap: wrap;gap:15px;justify-content: space-between}
    .faq_list ul li{width:23%}
    .faq_list ul li a{height:150px;padding:20px 10px;font-size:14px;}

    .popup_list{height:100%;}
    .popup_item{text-align:center}
    .popup_item img{width:450px}
    .main_popup{background:#f2f2f2;padding:20px;border-radius:10px;}
    .main_popup .popup_num{gap:5px;}
    .main_popup .popup_num p{font-size:17px;}

    .alignc { display: none;}
}


/*desktop*/
@media screen and (min-width:1024px) and (max-width:1500px) {

    .visual_box{width:100%;padding:0 10px;}
    .main_visual .character1{width:180px;height:200px;background-size:100%;left:60%;}
    .main_visual .character2{width:180px;height:200px;background-size:100%;right:0;left:auto;}

    .main_reserve{width:100%;padding:50px 10px}
    .main_reserve .main_titbox h3{font-size:35px}
    .main_reserve > button.prev{left:0;z-index: 9}
    .main_reserve > button.next{right:0;z-index: 9}


    .main_program{width:100%;padding:50px 10px}
    .main_program .main_titbox{width:100%}
    .main_program .main_titbox h3{font-size:35px}
    .main_program > button.prev{left:0}
    .main_program > button.next{right:0}

    .main_board{padding:0 10px 50px}
    .main_board .main_titbox{width:100%}
    .main_board .main_titbox h3{font-size:35px}
    .main_board .tit h4{font-size:24px}
    .main_board > div{width:100%;padding:0 10px}
    .main_notice .notice_list{padding:5px 15px}
    .main_notice .notice_list ul li{padding:12px 0 }
    .main_notice .notice_list ul li a{width:400px}
    .faq_list ul li a{padding:20px 10px;font-size:15px;}

    .main_board > div{gap:30px}
    .main_board > div > div.main_popup{width:650px }
    .main_board > div > div.main_popup img{width:100%}


}


/*desktop2*/
@media screen and (min-width:1501px) and (max-width:1700px) {

    .visual_box{width:100% ;padding:0 10px}
    .main_reserve{padding:50px 20px;width:100%}
    .main_reserve > button.prev{left:0;z-index: 9}
    .main_reserve > button.next{right:0;z-index: 9}

    .main_program{padding:50px 20px;}
    .main_program > button.prev{left:0;z-index: 9}
    .main_program > button.next{right:0;z-index: 9}
    .main_program .main_titbox{width:100%}

    .main_board{padding:0 10px 50px}
    .main_board .flexbox{justify-content: center}
    .faq_list ul li a{padding:20px 10px;font-size:15px;}


    .main_board > div{width:100%}
    .main_board > div > div.main_popup{width:650px }
    .main_board > div > div.main_popup img{width:100%}

}