@charset "UTF-8";



.header {position: absolute; top: 0; left: 0; width: 100%; }
.gnb_header {background: none; }



.layout {position: relative; max-width: 1280px; margin: 0 auto;}


.main_con_tit {margin-bottom: 38px; font-size: 3.333em; color: #fff; font-weight: 700; text-align: center;}
.main_con_tit p {position: relative; display: inline-block;}
.main_con_tit p:after {content: ''; position: absolute; right: -34px; top: -10px; width: 32px; height: 34px;
background: url('/template/festival/user/images/main/main_con_tit_ico1.png'); background-repeat: no-repeat;}

.program_tit_box .main_con_tit {color: #000;}
.main_con3 .main_con_tit {color: #000;}

.main_con4 .main_con_tit {color: #000;}
.main_con4 .main_con_tit p:after{ background-image: url('/template/festival/user/images/main/main_con_tit_ico2.png');}

.main_con5 .main_con_tit {color: #000;}
.main_con5 .main_con_tit p:after{background-image: url('/template/festival/user/images/main/main_con_tit_ico3.png');}


.main_con { padding: 70px 20px 90px;}
.main_con4 {padding:  70px 0 90px;}
.site_link_btn_wrap {display: none !important;}


/* main_con01 */
.main_con01 {position: relative;  width: 100%; }
.main_con01 .container {z-index: auto;}

#main_con01_slide01 {position: absolute; left: 0; top: 0; width: 100%; }
#main_con01_slide01 .item {position: relative;  	}
#main_con01_slide01 .item div {width: 100%; height: 100%; background-repeat: no-repeat; background-position:  center  center ; -webkit-background-size: cover; background-size: cover;}
#main_con01_slide01 .item img {position: absolute; width: 100%; height: 100%; }



.main_con01 .tit_box a {color: #fff;}
.main_con01 .tit_box {position: relative; padding: 300px 20px 350px; color: #fff; font-weight: 700; text-align: center;}
/* .main_con01 .tit_box .tit01 {position: relative; margin-bottom: 35px; font-size: 6.667em;  text-shadow: 6px 7px 10px rgba(0, 0, 0, 0.25);} */
.main_con01 .tit_box .tit01 {position: relative; margin-bottom: 35px; font-size: 6.111em;  text-shadow: 6px 7px 10px rgba(0, 0, 0, 0.25);     letter-spacing: -6px;}
.main_con01 .tit_box .tit01 > span {position: relative;}
.main_con01 .tit_box .tit01 > span:after {content: ''; position: absolute; z-index: 1; top: -30px; left: -100px; transform: translate(0, -50%); -webkit-transform: translate(0, -50%);     visibility: visible;
-ms-transform: translate(0, -50%); display: block; width: 270px; height: 250px;  background: linear-gradient( 270deg, #e97c12, #feab01); background-size: 1600% 1600%; box-shadow: inset 0px -20px 100px 0px rgba(255, 255, 255, 0.48); animation: transform 20s linear infinite alternate, movement 40s linear infinite alternate, shade 60s linear infinite alternate;
}
    @keyframes transform
{
    0%,
  100% { border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; }
   20% { border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%; }
   40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%; }
   60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; }
   80% { border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%; }
}

@keyframes transform2 {
  0%{border-radius: 42% 58% 60% 40% / 32% 54% 46% 68%}
  20%{border-radius: 59% 41% 36% 64% / 32% 64% 36% 68%}
  40%{border-radius: 48% 52% 52% 48% / 54% 53% 47% 46%}
  60%{border-radius: 42% 58% 51% 49% / 63% 64% 36% 37%}
  80%{border-radius: 32% 68% 33% 67% / 63% 35% 65% 37%}
  100%{border-radius: 34% 66% 52% 48% / 34% 53% 47% 66%}
}

@keyframes movement
{
  from { -webkit-transform: rotate(-1turn) translateY(-50px); transform: rotate(-1turn) translateY(-50px); }
    to { -webkit-transform: none; transform: none; }
}

@keyframes shade
{
  0%, 100% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
}


.main_con01 .online_banner {position: absolute; right: 35px; top: 560px; z-index: 9900;}
.main_con01 .tit_box .tit01 span {position: relative; z-index: 2;}
.main_con01 .tit_box .tit02 {display: inline-block; position: relative; margin-bottom: 20px; font-size: 3.667em; text-shadow: 6px 7px 10px rgba(0, 0, 0, 0.25); z-index: 3;}
.main_con01 .tit_box .tit02:after {content: ''; position: absolute; right: -50px; top: -20px; display: block;  width: 48px; height: 49px; -webkit-background-size: 0 0; background-size: 0 0; background-image: url('/template/festival/user/images/main/mud_ef.png'); background-repeat: no-repeat; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; background-position: left center;}
.main_con01 .tit_box .tit02.on:after {-webkit-background-size: 48px 49px; background-size: 48px 49px;}
.main_con01 .tit_box .tit02 .word2 span.char1 {color: #e91664;}
.main_con01 .tit_box .tit02 .word2 span.char2 {color: #e91664;}
.main_con01 .tit_box .tit02 .word4 span.char1 {color: #ff9e1b;}
.main_con01 .tit_box .tit02 .word4 span.char2 {color: #ff9e1b;}
.main_con01 .tit_box .date_txt {position: relative; font-size: 2.000em; font-weight: 350; z-index: 3;}


.slide01_ctrl_box {position: absolute; bottom: 150px; left: 110px; z-index: 2000; overflow: hidden;}
.slide01_ctrl_box .num_box {float: left; margin-right: 15px;}
.slide01_ctrl_box .num_box p {float: left; height: 45px; line-height: 45px; margin: 0 3px; color: rgba(255, 255, 255, 0.7);}
.slide01_ctrl_box .num_box .num {float: left; color: #fff; font-size: 1.333em;}
.slide01_ctrl_box .num_box .total {float: left;}
.slide01_ctrl_box .ctrl_box {overflow: hidden;}
.slide01_ctrl_box .ctrl_box button {float: left; width: 45px; height: 45px; border-radius:50%; line-height: 45px; font-size: 23px; color: #fff; text-align: center;}
.slide01_ctrl_box .ctrl_box button.slide_ctrl_prev {margin-right: 10px; border: 1px solid #fff; }
.slide01_ctrl_box .ctrl_box button.slide_ctrl_next {margin-right: 10px; border: 1px solid #fff; }
.slide01_ctrl_box .ctrl_box button.slide_ctrl_stop {background-color: rgba(0,0,0,0.4); }
.slide01_ctrl_box .ctrl_box button.slide_ctrl_play {display: none; background-color: rgba(0,0,0,0.4);}
.slide01_ctrl_box .num_box {}

.mouse_img {position: absolute; bottom: 150px; left: 50%; margin-left: -15px; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite; animation-name: mouse_img;}
@keyframes mouse_img {
  from {
   margin-bottom: 20px;
  }
  to {
    margin-bottom: 0px;
  }
}


.mud_img_wrap {position: absolute; width: 100%; top: -270px; overflow: hidden; z-index: 1001;}
.mud_img_wrap .con1_mud_img {position: relative; left: 50%;  width: 100%; min-width: 1920px; margin-bottom: 200px; -webkit-transform: translate(-50%, 0);	-moz-transform: translate(-50%, 0);	-ms-transform: translate(-50%, 0);	-o-transform: translate(-50%, 0);	transform: translate(-50%, 0);}
.mud_img_wrap .con1_mud_img .mud_bg {position: relative; height: 618px; z-index: 903; background-image: url('/template/festival/user/images/main/mud_bg.png'); background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
.mud_img_wrap .mud_img_box {position: absolute; left:0; top: 0; width: 100%; height: 100%;}
.con1_mud_img .mud_img {position: absolute;}
.con1_mud_img .mud_img.left03 {left: 0; bottom: -190px; z-index: 902; }
.con1_mud_img .mud_img.right03 {right: 0; bottom: -120px; z-index: 902;}

.bubbles {position: absolute; left: 0; top: 0; width: 100%; height: 1100px; z-index: 2;}
.bubble {
    width: 25px;
    height: 25px;
    background: rgba(235, 172, 30, 0.66);
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: absolute;
}

.x1 {
    left: 10%;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x2 {
    left: 24%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
    left: 45%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 1;
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
    left: 70%;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 1;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
    left: 80%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity:1;
    -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
.x6 {left: 65%; }
.x7 {left: 89%;}
.x8 {left: 50%;}
.x9 {left: 32%;}
.x10 {left: 8%;}
.x11 {left: 12%;}
.x12 {left: 38%;}
.x13 {left: 29%;}
.x14 {left: 59%;}
.x15 {left: 21%;}

@-webkit-keyframes moveclouds {
    0% {
        top: 500px;
    }
    100% {
        top: -500px;
    }
}

@-webkit-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}

@-moz-keyframes moveclouds {
    0% {
        top: 500px;
    }

    100% {
        top: -500px;
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}
@-o-keyframes moveclouds {
    0% {
        top: 500px;
    }
    100% {
        top: -500px;
    }
}

@-o-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}


.main_con1_con2 {position: relative; margin-top: -120px; padding-bottom: 110px; z-index: 1000;}




/*----------------------*/
/*----------------------*/
/* main_con1_con2 */
/*----------------------*/
/*----------------------*/
.main_con1_con2_bg {position: absolute;  width: 100%;  height: 598px; overflow: hidden; }
.main_con1_con2_bg span {position: relative; left: 50%; display: block; width: 100%; height: 100%; min-width: 1920px; background: url('/template/festival/user/images/main/main_con2_bg.png'); background-repeat: no-repeat; background-position: top center; -webkit-background-size: 100% 100%; background-size: 100% 100%;  -webkit-transform: translate(-50%, 0);	-moz-transform: translate(-50%, 0);	-ms-transform: translate(-50%, 0);	-o-transform: translate(-50%, 0);	transform: translate(-50%, 0);}

.d_day_wrap {position: relative; padding-top: 160px;margin-bottom: 90px; z-index: 2000;}
.d_day_wrap .d_day_tit {margin-bottom: 50px; text-align: center;}
.d_day_wrap .d_day_tit .tit1 {display: inline-block; margin-bottom: 25px; font-size: 2.667em; background-color:rgba(255, 255, 255, 0);
background: -webkit-linear-gradient(left, #f68643, #a3714c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color : #f68643; font-weight: 700;}
.d_day_wrap .d_day_tit .txt1 {margin-bottom: 5px; color: #604d3f; font-size: 1.111em;}
.d_day_wrap .d_day_box {position: relative; left: 50%; display: inline-block; margin: 0 auto;  -webkit-transform: translate(-50%, 0);	-moz-transform: translate(-50%, 0);	-ms-transform: translate(-50%, 0);	-o-transform: translate(-50%, 0);	transform: translate(-50%, 0);}

.d_day_wrap .d_day_box .left ,.d_day_wrap .d_day_box .right {position: absolute;}
.d_day_wrap .d_day_box .left {left: -115px; top: -35px;}
.d_day_wrap .d_day_box .right {right: -85px; top: -25px;}


.d_day_wrap .d_day_box .d_day > span {float: left; display: block; width: 80px; height: 90px; line-height: 90px; margin: 0 2px; padding-top: 2px; font-size: 4.000em; color: #fff; text-align: center; font-weight: 900; background-image: url('/template/festival/user/images/main/d_day_bg.png'); background-repeat: no-repeat; background-position:  center center; font-family: 'NanumSquare'; -webkit-box-shadow: 6px 7px 0px 0px rgba(0, 0, 0, 0.14); -moz-box-shadow: 6px 7px 0px 0px rgba(0, 0, 0, 0.14); box-shadow: 6px 7px 0px 0px rgba(0, 0, 0, 0.14); border-radius:14px}


.d_day_wrap .d_day_box .d_day.d_day2 {display: none;}
.d_day_wrap .d_day_box .d_day.d_day2 span.d3,.d_day_wrap .d_day_box .d_day.d_day2 span.d4 {font-size: 3.611em;}


/*----------------------*/
/*----------------------*/
/* program_wrap */
/*----------------------*/
/*----------------------*/
.program_info_wrap {position: relative; z-index: 2000;}

.program_info {position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
.program_info .box {float: left; width: 31%; margin: 0 3.5% 0 0;	}
.program_info .box3 {margin: 0;}

.program_info .box a {display: block; }

.program_info .box .img_cont {display: table; margin: 0 auto 40px ; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; border-radius:50%; overflow: hidden; }
.program_info .box1 .img_cont {background-image: url('/template/festival/user/images/main/program_info_img1.png');}
.program_info .box2 .img_cont {background-image: url('/template/festival/user/images/main/program_info_img2.png');}
.program_info .box3 .img_cont {background-image: url('/template/festival/user/images/main/program_info_img3.png');}

.program_info .box .img_cont img {opacity: 0;}



.program_info .box .txt_cont {text-align: center;}
.program_info .box .txt_cont .tit {margin-bottom: 12px; font-size: 2.000em; font-weight: 700;}
.program_info .box .txt_cont .txt {margin-bottom: 28px; font-size: 1.222em;}
.program_info .box .txt_cont .link_btn {display: block; width: 135px; height: 42px; line-height: 36px; margin: 0 auto; padding: 0 0 0 10px; background-color: #000;border: 3px solid #000; border-radius: 21px; color: #fff; -webkit-box-shadow: 8px 9px 18px 0px rgba(0, 0, 0, 0.23); -moz-box-shadow: 8px 9px 18px 0px rgba(0, 0, 0, 0.23); box-shadow: 8px 9px 18px 0px rgba(0, 0, 0, 0.23); }
.program_info .box .txt_cont .link_btn {}

.program_info .box a:hover .img_cont {}
.program_info .box a:hover .txt_cont .link_btn {background-color: #fff; color: #000;}




/*----------------------*/
/*----------------------*/
/* main_con2 */
/*----------------------*/
/*----------------------*/
.main_con2 {position: relative; background-image: url('/template/festival/user/images/main/main_con2_bg_black.png'); -webkit-background-size: 100% 100%;
background-size: 100% 100%; background-repeat: no-repeat;}
.main_con2 .video_wrap {position: relative; padding-bottom: 46.875%; border-radius:20px; overflow: hidden; -webkit-box-shadow: 7px 8px 21px 0px rgba(0, 0, 0, 0.42);
-moz-box-shadow: 7px 8px 21px 0px rgba(0, 0, 0, 0.42);
box-shadow: 7px 8px 21px 0px rgba(0, 0, 0, 0.42);}
.main_con2 .video_wrap  .inner_box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; font-size: 0;}


/*----------------------*/
/*----------------------*/
/* main_con5 */
/*----------------------*/
/*----------------------*/
.main_con5 {position: relative; padding: 70px 0px 0px;}
.location_wrap {position: relative;display: flex; width: 100%; overflow: hidden;}
.location_wrap > div {flex:1 1 50%; }

.location_wrap > div.left {position: relative;}
.location_wrap > div.left iframe {min-height:350px;}
.location_wrap > div.left > div {position: absolute; width: 100%; height: 100%;}
.location_wrap > div.left .root_daum_roughmap .wrap_map {height: 100%;}
.location_wrap > div.right {padding: 75px; background-color: #a0704c;padding-bottom:170px;}
.location_wrap > div.right .tit {width: 100%; margin-bottom: 20px; overflow: hidden;}
.location_wrap > div.right .tit p {float: left; font-size: 2.000em; color: #fff; font-weight: 500;}
.location_wrap > div.right .tit a {float: right; padding-left: 33px; color: #fff; background-image: url('/template/festival/user/images/main/cacao_map_ico.png'); background-position: left center; background-repeat: no-repeat;}


.location_wrap > div.right .txt {margin-bottom: 15px;}
.location_wrap > div.right .txt .dot_list {}
.location_wrap > div.right .txt .dot_list > li {color: #fff; font-weight: 300; background-image: url('/template/festival/user/images/main/main_con5_dot.png'); background-position: 1px 10px;}


.location_wrap > div.right .btn_wrap {overflow: hidden;}
.location_wrap > div.right .btn_wrap .link_btn {float: left; padding-left: 33px; color: #fff; background-image: url('/template/festival/user/images/main/cacao_map_ico.png'); background-position: left center; background-repeat: no-repeat;}



/*----------------------*/
/*----------------------*/
/* bookmark */
/*----------------------*/
/*----------------------*/
.page_bookmark {position: fixed; left: 40px; top: 50%;  -webkit-transform: translate(0, -50%);	-moz-transform: translate(0, -50%);	-ms-transform: translate(0, -50%);	-o-transform: translate(0, -50%);	transform: translate(0, -50%); z-index: 9000;}
.page_bookmark a {position: relative; display: block; padding-left: 20px; height: 22px; line-height: 22px; margin-bottom: 5px; font-size: 13px; color: rgba(255,255,255, 0.8);}
.page_bookmark a p {text-shadow: 1px 1px 1px black; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.page_bookmark a.on p {display: inline-block; padding: 0 10px; background-color: #e91665; color: #fff; border-radius:15px; text-shadow: none;}
.page_bookmark a:after {content: ''; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -5px; background-color: rgba(255,255,255, 0.8); border-radius:50%; -webkit-box-shadow:1px 1px 2px black ; -moz-box-shadow: 1px 1px 2px black;box-shadow: 1px 1px 2px black;}
.page_bookmark a.on:after {background-color: #e91665;}

.page_bookmark.black_on {}
.page_bookmark.black_on a p {color: #000; text-shadow: none;}
.page_bookmark.black_on a:after {background-color: #000;}
.page_bookmark.black_on a.on p {color: #fff; }
.page_bookmark.black_on a.on:after {background-color: #e91665;}









/*20240305*/

.quick_box2 {position: fixed; right: 35px; bottom: 110px; z-index: 9998; }
.quick_box2 a.off_link {display: block;}
.quick_box2 a.off_link + a.off_link {transform:translateY(-10px)}

	@media screen and (max-width: 1890px){ 
		.quick_box2 {bottom:30px;}
		.quick_box {
		    bottom: 25px !important;
		}
	}
	@media screen and (max-width: 1280px){
		.quick_box2 a.off_link img {height:84px;}
	 }
	@media screen and (max-width: 991px){  
		.quick_box {
		    bottom: 20px !important;
		}
		.quick_box2 {bottom:70px;}
		.quick_box2 a.off_link img {height:70px;}
		.location_wrap {display: flex; flex-direction: column;}
		.location_wrap > div {flex:1 1 100%; }
	}

	@media screen and (max-width: 767px) {
		.quick_box2 {bottom:30px;right:20px;}
		.quick_box2 a.off_link img {height:50px;}	
	}