@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
::-moz-selection {background: #000000; /*메인색*/ color: #e6e6e6;text-shadow: none;}
::selection {background: #000000; color: #e6e6e6; text-shadow: none;}
html, body { font-size: 62.5%; font-family: 'Pretendard' !important; overflow-x: hidden; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img { width: 100%; }
button { border: 0; font-family: 'Pretendard'; background: transparent; }
a { text-decoration: none; }

.pc_none {display: none;}
.pc_none_flex {display: none;}
.mo_none {display: block;}
.mo_none_flex {display: flex;}
.bg_none {background: none !important;}

/* intro */
.intro_wrap { 
    display: block;
    position: fixed; 
    z-index: 3; 
    width: 100%; 
    height: 100vh;  
    background-color: #0C0C0C;
    opacity: 1;
    transition: opacity 0.8s;
}
.intro_wrap.active { 
    display: none;
}
.intro_wrap .intro_txt { 
    display: block;
    width: 100%;
    position: absolute;
    top: 10%;
}
.intro_wrap .intro_img { 
    display: block;
    width: 100%;
    position: absolute;
    bottom: 10%;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px 0px 40px;
    width: 100%;
    height: 80px;
    position: sticky;
    top: 0; /* 추가 */
}

#header .logo img { display: block; width: 122px; margin: 0 auto; }

.button-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

.menu_button {
    background-color: #24CCC2;
    border: none;
    border-radius: 30px;
    color: white;
    padding: 10px 23px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition: all 0.3s ease; /* 추가 */
}

.menu_button:hover {
    background-color: #1DA8A6; /* 예시, 마우스를 올렸을 때의 배경색 */
    color: #ffffff; /* 예시, 마우스를 올렸을 때의 글자색 */
}



main { width: 100%; margin: 0 auto; }

/* mainSection01 */
/* #mainSection01 { padding: 0 72px; } */
#mainSection01 .cont01 { padding: 40px 72px 0 72px; margin-bottom: 300px; }
#mainSection01 .cont01 .phrases_wrap { width: 1000%; padding-bottom: 120px; }
#mainSection01 .cont01 h2 {
    /* font-size: 120px; */
    font-size: 7vw;
    color: #24CCC2;
    font-weight: 700;
    font-family: 'Pretendard';
}
#mainSection01 .cont01 .character_wrap { display: flex; opacity: 0; margin-bottom: 300px; transition: all 2s; }
#mainSection01 .cont01 .character_wrap.active { opacity: 1;  }
#mainSection01 .cont01 .character_wrap .circle {
    position: relative;
    width: 23.5%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2%;
    cursor: pointer;
}
#mainSection01 .cont01 .character_wrap .circle:last-child { margin-right: 0; }
#mainSection01 .cont01 .character_wrap .circle:nth-child(1) { transform: translateY(120px); }
#mainSection01 .cont01 .character_wrap .circle:nth-child(4) { transform: translateY(120px); }
#mainSection01 .cont01 .character_wrap .circle img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    margin: 0 auto;
}
#mainSection01 .cont01 .character_wrap .circle .card_img { z-index:2; transform:rotateY(0deg); transition:all .6s; }
#mainSection01 .cont01 .character_wrap .circle .card_img.active { z-index:1; transform:rotateY(180deg); }
#mainSection01 .cont01 .character_wrap .circle .card_img_hover { z-index:1; transform:rotateY(180deg); transition:all .6s; backface-visibility:hidden; }
#mainSection01 .cont01 .character_wrap .circle .card_img_hover.active { z-index:2; transform:rotateY(0deg); }

#mainSection01 .cont01 .character_wrap_mo { display: none; }
#mainSection01 .cont01 .character_wrap_mo .circle {
    position: relative;
    width: 23.5%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2%;
    cursor: pointer;
}

#mainSection01 .cont02 {
    margin-top: 32em;
    position: relative;
    overflow-y: hidden;
}
#mainSection01 .cont02 .mian {
    background: #24CCC2;
    padding: 307px 180px 328px 180px;
}
#mainSection01 .cont02 .mian img { position: relative; z-index: 2; opacity: 0; transform: translateY(100px); transition: all .5s;}
#mainSection01 .cont02 .mian img.active { opacity: 1; transform: translateY(0); }
#mainSection01 .cont02 .mian h3 {
    position: relative;
    z-index: 2;
    opacity: 0;
    color: #FFF;
    line-height: 120%;
    text-align: center;
    font-size: 4vw;
    font-family: 'Pretendard';
    margin-top: 86px;
    font-weight: bold;
    transform: translateY(100px); 
    transition: all 1s;
}   

#mainSection01 .cont02 .mian h3.active {
    opacity: 1;
    transform: translateY(0);
}
#mainSection01 .cont02 .mian p {
    position: relative;
    z-index: 2;
    opacity: 0;
    text-align: center;
    color: #FFF;
    margin-top: 31px;
    line-height: 160%;
    font-size: 22px;
    transform: translateY(100px); 
    transition: all 1.4s;
}
#mainSection01 .cont02 .mian p.active {
    opacity: 1;
    transform: translateY(0);
    overflow-y: hidden;
}

#mainSection01 .cont02 .img_wrap { 
    opacity: 0;
    position: absolute;
    z-index: 2;
    bottom: -3px;
    margin-bottom: -3px;
    transform: translateY(100px);
    transition: all .8s;
    
}
#mainSection01 .cont02 .img_wrap.active { 
    opacity: 1;
    transform: translateY(0);

}
#mainSection01 .cont02 .img_castle01 { 
    display: block;
    margin-bottom: -3px;
    opacity: 0;
    transition: all .5s;
}
#mainSection01 .cont02 .img_castle01.active { 
    opacity: 1;
}
#mainSection01 .cont02 .img_castle01_mo,
#mainSection01 .cont02 .img_castle02_mo,
#mainSection01 .cont02 .logo_mo { display: none; }

#mainSection01 .cont02 .left { 
    position: absolute;
    z-index: 1;
    top: 20vw; 
    left: 20px;
    width: 423px;  
    overflow: hidden; 
}
#mainSection01 .cont02 .left .fall_img {
    width: 423px;
    margin-bottom: 10px;
}
#mainSection01 .cont02 .right { 
    position: absolute;
    z-index: 1;
    top: 20vw; 
    right: 20px;
    width: 423px;  
    overflow: hidden; 
}
#mainSection01 .cont02 .right .fall_img {
    width: 423px;
    margin-bottom: 10px;
}


/* mainSection02 */
#mainSection02 {
    padding: 0 20px;
}
#mainSection02 .gallery_wrap { display: block; }
#mainSection02 .gallery_wrap_mo { display: none; }


#mainSection02 .gallery_wrap>.row1 {
    /* overflow: hidden; */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.gallery01 {  opacity: 0; transform: translateY(50px); transition: all 2s; }
.gallery01.active { opacity: 1; transform: translateY(0); }
.gallery02 {  opacity: 0; transform: translateY(-50px); transition: all 1.5s; }
.gallery02.active { opacity: 1; transform: translateY(0); }
.gallery03 {  opacity: 0; transform: translateX(50px);  transition: all 1s; }
.gallery03.active { opacity: 1; transform: translateX(0); }

.gallery04 {  opacity: 0; transform: translateX(-50px);  transition: all .8s; }
.gallery04.active { opacity: 1; transform: translateX(0); }
.gallery05 { opacity: 0;  transition: all 1.5s; }
.gallery05.active { opacity: 1;  }
.gallery07 {  opacity: 0; transform: translateY(50px);  transition: all 1s; }
.gallery07.active { opacity: 1; transform: translateY(0); }

.gallery06 {  opacity: 0; transform: translateY(50px);  transition: all 2s; }
.gallery06.active { opacity: 1; transform: translateY(0); }
.gallery08 {  opacity: 0; transform: translateY(-50px);  transition: all 1s; }
.gallery08.active { opacity: 1; transform: translateY(0); }
.gallery10 {  opacity: 0; transform: translateY(50px);  transition: all 1.5s; }
.gallery10.active { opacity: 1; transform: translateY(0); }

.gallery09 {  opacity: 0; transform: translateY(50px);  transition: all 1.5s; }
.gallery09.active { opacity: 1; transform: translateY(0); }
.gallery11 {  opacity: 0; transform: translateX(50px);  transition: all 2s; }
.gallery11.active { opacity: 1; transform: translateX(0); }


/* #mainSection02 .gallery_wrap { height: 138vw; overflow-y: hidden; } */
#mainSection02 .gallery_wrap>.row1 .gallery:nth-child(1) { width: 40%; }
#mainSection02 .gallery_wrap>.row1 .gallery:nth-child(2) { width: 25%; }
#mainSection02 .gallery_wrap>.row1 .gallery:nth-child(3) { width: 33%; }
#mainSection02 .gallery_wrap>.row1 .gallery img {
    width: 100%;
}
#mainSection02 .gallery_wrap>.row2 {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 1%;
    
}
#mainSection02 .gallery_wrap>.row2 .left .gallery {
    margin-top: 3%;
}
#mainSection02 .gallery_wrap>.row2 .left .gallery:nth-child(1) {
    margin-top: 0;
}
#mainSection02 .gallery_wrap>.row2 .left {
    width: 29.5%;
}
#mainSection02 .gallery_wrap>.row2 .right {
    width: 69.5%;
}

#mainSection02 .gallery_wrap>.row2 .right>.r_row1 .gallery img {
    height: 29.5vw;
    object-fit: cover;
    object-position: center 100%;

}
#mainSection02 .gallery_wrap>.row2 .right>.r_row2 {
    display: flex;
    justify-content: space-between;
    margin-top: 1%;
}
#mainSection02 .gallery_wrap>.row2 .right>.r_row2 .left { width: 36.5%; }
#mainSection02 .gallery_wrap>.row2 .right>.r_row2 .right { width: 62.5%; }
#mainSection02 .gallery_wrap>.row2 .right>.r_row2 .right .gallery:nth-child(1) { margin-bottom: 1.5%; }
#mainSection02 .gallery_wrap>.row2 .right>.r_row2 .right .gallery:nth-child(2) img {
    height: 36.65vw;
}
#mainSection02 .gallery_wrap>.row2 .gallery_layer {
    position: absolute;
    width: 100%;
    height: 56px;
    background: #fff;
    bottom: -30px;
    left: 0;
}

/* mainSection03 */
#mainSection03 { 
    position: relative;
    padding-top: 172px;
    background: #FFE55F;
    margin-top: 100px;
    padding-bottom: 130px;
}
#mainSection03 .roof { 
    width: 100%;  
    position: absolute;
    top: 0;
}

#mainSection03 .main { 
    position: relative;
    z-index: 5;
}
section .main .title { 
    display: flex;
    align-items: center;
    justify-content: center;

}
section .main .title1 { 
    opacity: 0;
    transform: translateY(50px);
    transition: all .5s;
}
section .main .title1.active { 
    opacity: 1;
    transform: translateY(0);
}
section .main .title i { 
    display: block;
    width: 23px;
    height: 23px;
    background: #FF9270;
    margin-top: 10px;
}
section .main>.title>h3 { color: #24CCC2; font-size: 60px; font-weight: 700; margin: 0 20px; } 
#mainSection03 .main .slider { 
    opacity: 0;
    margin-top: 82px; 
    padding-left:  20px; 
    transition: all 1s;
}
#mainSection03 .main .slider.active { opacity: 1; }
#mainSection03 .main .slider .slide { 
    display: flex; 
    background: #fff; 
    margin-right: 20px; 
    padding: 15px;
}
#mainSection03 .main .slider .slide:last-child { margin-right: 0; }
#mainSection03 .main .slider .slide .images { width: 50%; }
#mainSection03 .main .slider .slide .desc { 
    width: 50%; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    padding-left: 15px;
}
#mainSection03 .main .slider .slide .desc .title2 h4  {  
    font-size: 2vw;
    font-family: 'Leferi Base Type';
    /* font-family: 'Pretendard'; */
    font-weight: 700;
    line-height: 140%;
}
#mainSection03 .main .slider .slide .desc .title2 p {  
    color: #808080;
    font-size: 18px;
    padding-top: 8px;
}

#mainSection03 .main .slider .slide .desc .review p {  
    color: #000;
    font-size:  18px;
    line-height: 155%;
}

#mainSection04 { padding-top: 127px; }
#mainSection04 .main {  }
#mainSection04 .main .desc { 
    padding-bottom: 78px; 
    text-align: center;
    padding-top: 26px;
    font-family: 'Pretendard';   
}
#mainSection04 .main .desc h4 { 
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}
#mainSection04 .main .desc p { 
    line-height: 140%;
    color: #515151;
    font-size: 24px;
    padding-top: 18px;
}
#mainSection04 .main .map iframe { width: 100%; }
#mainSection04 .rolling { width: 1000%; }
#mainSection04 .rolling .rolling_img_wrap {  
    height: 58px;
    background: #FFE55F;
}
#mainSection04 .rolling .rolling_img_wrap ul {  
    height: 58px;
    display: flex;
}
#mainSection04 .rolling .rolling_img_wrap ul li {  
    display: flex;
    align-items: center;
    margin-right: 10px;
}
#mainSection04 .rolling .rolling_img_wrap ul li img {  
    width: 40px;
    height: 36px;
    margin-right: 4px;
}
#mainSection04 .rolling .rolling_img_wrap ul li span {  
    font-size: 22px;
    font-weight: 700;
    width: 70px;
}

/* 게시판 소식 부분 */
#boardSection {
    position: relative;
    padding-top: 172px;
    background: #24CCC2;
    margin-top: 100px;
    padding-bottom: 130px;
    text-decoration: none;
}
#boardSection a {
    text-decoration: none;
}

#boardSection .roof {
    width: 100%;
    position: absolute;
    top: 0;
}
#boardSection .swiper-container {
    max-width: 1820px;
    margin: 0 auto;
    padding: 60px 20px 50px 20px;
    overflow: hidden;
    box-sizing: border-box;
}
#boardSection .swiper-slide {
    margin: 0 auto;
    box-sizing: border-box;
}
#boardSection .swiper-slide .img_box {
    width: 100%;
    background-size: cover;
    background-position: center center;
    padding-top: 70%;
    background-color: white;
}

.bordSlide .swiper-button-prev{
    width:60px;
}
.bordSlide .swiper-button-prev:after{
    display: none;
}
.bordSlide .swiper-button-next{
    width: 60px;
}
.bordSlide .swiper-button-next:after{
    display: none;
}
#boardSection .board_content {
    background: #fff;
    width: 100%; 
    /* height: 157px; */
    padding: 30px 20px 30px 20px;
}
#boardSection .board_content h4 {
    color: #000000;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold; 
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#boardSection .board_content p {
    color: #333;
    font-size: 18px;
    line-height: 155%;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
#boardSection .board_title {
    display: flex;
    align-items: center;
    justify-content: center;
}
#boardSection .board_title i {
    display: block;
    width: 23px;
    height: 23px;
    background: #FF9270;
    margin-top: 10px;
}
#boardSection .board_title > h3 {
    color: #FFE55F;
    font-size: 60px;
    font-weight: 700;
    margin: 0 20px;
}
#boardSection .swiper-wrapper {
    margin: 0 -10px; 
}
#boardSection .swiper-slide {
    margin: 0 10px;
}

/* section05 end */

.containerWrap {border-top: 1px solid #ccc;padding: 5rem 0;}
.containerWrap h1 {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 1rem;
	font-weight: 700;
}
.containerWrap h3 {
	text-align: center;
	font-size: 1.25rem;
	margin-bottom: 2rem;
}
.privacy_wrap {
	width: 90%;
	line-height: 1.5rem;
	margin: 0 auto 7rem;
}
.privacy_wrap strong {
  font-size: 1.1rem;
  font-weight: 600;
 }

#footer { 
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    background: #24CCC2;
    padding: 36px 20px 93px 20px;
    
}
#footer .row1 { color: #fff; }
#footer .row1 ul li { display: flex; margin-bottom: 6px; }
#footer .row1 ul li h4 { width: 90px; font-size: 14px; font-weight: 700; }
#footer .row1 ul li span { padding-left: 9px; font-size: 14px; }

#footer .row2 { color: #fff; text-align: right; }
#footer .row2 .center { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
#footer .row2 .center strong { font-size: 20px; padding-left: 9px; }
#footer .row2 .center strong a { color: #fff; }
#footer .row2 h3 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
#footer .row2 .info { font-size: 14px; font-weight: 400; display: flex; justify-content: flex-end; margin-bottom: 6px; }
#footer .row2 .info span { padding-left: 9px; }

/* sectionSub */
/* .section_sub { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; }
.section_sub .btn_back_bx { 
    display: flex;
    align-items: center;
    width: 50px;
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100vh; 
    background: #D3F5F3;
    cursor: pointer;
}
.section_sub .btn_back_bx .btn_back { 
    width: 29px; 
    margin: 0 auto; 
    background: transparent !important; 
    cursor: pointer;
}
.section_sub .btn_back_bx_mo { 

    width: 23px;
    position: absolute; 
    top: 0; 
    left: 0; 
    cursor: pointer;
    padding: 20px;
}

.section_sub .btn_back_bx_mp .btn_back { 
    width: 29px; 
    margin: 0 auto; 
    background: transparent !important; 
    cursor: pointer;
}


.section_sub .content {
    width: 100%;
    max-width: 476px;
    display: flex;
    flex-direction: column;
    padding-left: 10vw;
}
.section_sub .content .desc h2 {
    font-size: 60px;
    color: #24CCC2;
    font-family: Leferi Base Type;
    font-weight: 700;
    padding-bottom: 25px;
}
.section_sub .content .desc p {
    font-size: 22px;
    color: #000;
    font-weight: 500;
    line-height: 140%;
}
.section_sub .content .btn_bx {
    padding-top: 70px;
}
.section_sub .content .btn_bx .btn_reserve {
    text-align: center;
    background: #24CCC2;
    color: #fff;
    width: 335px;
    padding: 20px 37px;
    font-size: 22px;
    font-weight: 700;
} */

.section_sub { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.section_sub .inner { 
    position: relative;
    z-index: 2;
    padding: 20px; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    
}
.section_sub .inner .btn_back_bx { 
    position: absolute;
    top: 0;
    left: 0;
    width: 50px; 
    height: 100vh; 
    background: #D3F5F3;
    display: flex;
    align-items: center;
    cursor: pointer;
 }
.section_sub .inner .btn_back_bx .btn_back { 
    width: 30px;
    margin: 0 auto;
}
.section_sub .inner .btn_back_bx_mo { display: none; }
.section_sub .inner .content {margin-left: 195px; max-width: 476px; margin-top: -80px; }

/* .section_sub .content .video { } */
.section_sub .content .video img { display: none; }
.section_sub .content .desc h2 {
    font-size: 60px;
    color: #24CCC2;
    font-family: Leferi Base Type;
    font-weight: 700;
    margin-bottom: 25px;
}
.section_sub .content .desc p {
    font-size: 22px;
    color: #000;
    font-weight: 500;
    line-height: 140%;
}
.section_sub .content .btn_bx .btn_reserve {
    display: block;
    text-align: center;
    background: #24CCC2;
    color: #fff;
    width: 100%;
    max-width: 335px;
    padding: 20px 37px;
    font-size: 22px;
    font-weight: 700;
    margin-top: 70px;
    cursor: pointer;
} 

.section_sub .video { 
    position: absolute;
    top: 0;
    left: 0;
    object-fit: 100%;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.section_sub .layer { 
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(to right, #fff, transparent);
}

#sectionSub2 .btn_back_bx {  background: #FFDFD5; }
#sectionSub2 .content .desc h2 { color: #FF9270; }
#sectionSub2 .content .btn_bx .btn_reserve { background: #FF9270; }

#sectionSub3 .btn_back_bx {  background: #FFFADF; }
#sectionSub3 .content { max-width: 571px; }
#sectionSub3 .content .desc h2 { color: #FFE55F; }
#sectionSub3 .content .btn_bx .btn_reserve { background: #FFE55F; color: #020202; }

#sectionSub4 .content { max-width: 571px; }
#sectionSub4 .btn_back_bx {  background: #DFF3FF; }
#sectionSub4 .content .desc h2 { color: #5EC5FF; }
#sectionSub4 .content .btn_bx .btn_reserve { background: #5EC5FF; }

.fixed-image {
    position: fixed;
    bottom: 40px;
    right: 7px;
    width: 100px;
    height: 100px;
    margin: 20px; 
    z-index: 7;
    opacity: 0; 
    transition: opacity 1s ease-in-out; 
  }
  .hidden {
    display: none;
  }


  .radio-group label {
    display: inline-block;
    margin-right: 10px;
}

.radio-group input {
    margin-right: 5px;
}