:root{ --ani:cubic-bezier(.32,.94,.6,1); }

#main .section { position: relative; }
#main .v-line { position: absolute; width: 1px; height: 100%; background: var(--gray); top: 0; }
#main .v-line.left { left: calc( (100% - var(--layoutwidth)) / 2 ); }
#main .v-line.right { right: calc( (100% - var(--layoutwidth)) / 2 ); }
@media(max-width:990px){
    #main .v-line { display: none; }
}

/* mainSlide */
#mainSlide { position: relative; overflow: hidden; width: 100%; height: 100vh; transition: transform .6s var(--ani); }
#mainSlide .mainSwiper {position: relative;  opacity: 0; transform: scale(1.05); width: 100%; height: 100%; transition: all 2s var(--ani); }
#mainSlide .mainSwiper.on { opacity: 1; transform: scale(1); }
#mainSlide .mainSwiper .swiper-slide { height: 100%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .3s; }
#mainSlide .mainSwiper .swiper-slide-active { transform: skew(0); }
#mainSlide .mainSwiper .container { width: 1420px; }
#mainSlide .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: 80% no-repeat; background-size: cover;  background-position: center; }
#mainSlide .bg.bg-1 { background-image: url('/img/main/img_mainSlide01.jpg'); }
#mainSlide .bg.bg-2 { background-image: url('/img/main/img_mainSlide02.jpg'); }
#mainSlide .bg.bg-3 { background-image: url('/img/main/img_mainSlide03.jpg'); }
#mainSlide .bg.bg-4 { background-image: url('/img/main/img_mainSlide04.jpg'); }
#mainSlide .bg.bg-5 { background-image: url('/img/main/img_mainSlide05.jpg'); }
#mainSlide .bg.bg-6 { background-image: url('/img/main/img_mainSlide06.jpg'); }
#mainSlide .bg.bg-7 { background-image: url('/img/main/img_mainSlide07.jpg'); }
#mainSlide .bg.bg-8 { background-image: url('/img/main/img_mainSlide08.jpg'); }
#mainSlide .inner { position: absolute; top: 10%; bottom: 0; left: 0; right: 0; margin: auto; width: 95%; height: fit-content; }
#mainSlide .swiper-navigation { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; }
#mainSlide .swiper-navigation .swiper-arrow { cursor: pointer; }
#mainSlide .progress-box { position: relative; width: 150px; height: auto; z-index: 2; margin: 0 3rem; }
#mainSlide .autoplay-progress { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: 85px; height: 3px; background-color: rgba(0, 0, 0, .2); }
#mainSlide .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0; x: 11; width: 100%; height: 3px; stroke-width: 3px; stroke: #000; fill: none; stroke-dashoffset: calc(162 * (1 - var(--progress))); stroke-dasharray: 162; }
#mainSlide .swiper-pagination { display: flex; justify-content: space-between; position: static; text-align: left; }
#mainSlide .swiper-pagination > span { display: inline-block; margin-bottom: .5rem; }
#mainSlide .swiper-pagination-mobile { display: none; }
#mainSlide .txt img.logo { filter: invert(1) saturate(0); }
#mainSlide .txt .tit-line { display: inline-block; }
#mainSlide .txt .tit-line::before { position: absolute; content: ''; width: 200%; height: 30%; opacity: .75; background: #fff; mix-blend-mode: overlay; right: 0; bottom: 0; }
#mainSlide .txt .under-line { display: inline-block; }
#mainSlide .txt .under-line::before { position: absolute; content: ''; width: 100%; height: 30%; opacity: 1; background: var(--pointcolor); mix-blend-mode: lighten; left: 0; bottom: 0; }
#mainSlide .txt .gradient { background: linear-gradient(to left, #f8799c, #fff); background-clip: text; color: transparent; }
#mainSlide .slide-check { width: 75%; --x-gap: .75rem; --y-gap: .75rem; }
#mainSlide .cover-list li { background: rgba(255,255,255,.15); padding: .5rem; }
#mainSlide .cover-text { display: inline-block; background: rgba(var(--subcolor-rgb), .5); padding: .25rem 1rem; border-radius: .5rem; }
#mainSlide .slide-btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 2rem; border-radius: 2rem; }
@media(max-width:1420px){
    #mainSlide .mainSwiper .container { width: 90%; }
}
@media(max-width:990px){
    #mainSlide { height: 95vh; }
    #mainSlide .bg { background-position: center bottom; }
    #mainSlide .bg.bg-1 { background-image: url('/img/main/img_mainSlide01_m.jpg'); }
    #mainSlide .bg.bg-2 { background-image: url('/img/main/img_mainSlide02_m.jpg'); }
    #mainSlide .bg.bg-3 { background-image: url('/img/main/img_mainSlide03_m.jpg'); }
    #mainSlide .bg.bg-4 { background-image: url('/img/main/img_mainSlide04_m.jpg'); }
    #mainSlide .bg.bg-5 { background-image: url('/img/main/img_mainSlide05_m.jpg'); }
    #mainSlide .bg.bg-6 { background-image: url('/img/main/img_mainSlide06_m.jpg'); }
    #mainSlide .bg.bg-7 { background-image: url('/img/main/img_mainSlide07_m.jpg'); }
    #mainSlide .bg.bg-8 { background-image: url('/img/main/img_mainSlide08_m.jpg'); }
    #mainSlide .inner { height: 80%; }
    #mainSlide .swiper-navigation { display: none; }
    #mainSlide .swiper-pagination-mobile { display: flex; justify-content: center; position: absolute; width: 90%; left: 50%; bottom: 3rem; transform: translateX(-50%); z-index: 10; }
    #mainSlide .swiper-pagination-mobile .swiper-pagination-bullet { width: 16px; height: 16px; margin: 0 .5rem; opacity: 1; background: #d0d0d0; }
    #mainSlide .swiper-pagination-mobile .swiper-pagination-bullet-active { background: var(--pointcolor); }
    #mainSlide .swiper-slide .centerOn { text-align: center; }
    #mainSlide .bg.bg-5 + .inner .txt { position: relative; height: 100%; }
    #mainSlide .bg.bg-5 + .inner .slide-btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10%; }
    #mainSlide .bg.bg-6 + .inner .logo { margin: auto; width: 25%; }
    #mainSlide .bg.bg-6 + .inner .txt { text-align: center; }
    #mainSlide .bg.bg-6 + .inner .tit-line { width: fit-content; }
    #mainSlide .bg.bg-6 + .inner .tit-line::before { width: 100%; }
    #mainSlide .bg.bg-7 + .inner { top: 25%; height: fit-content; }
    #mainSlide .bg.bg-7 + .inner .slide-check { width: 100%; }
    #mainSlide .bg.bg-7 + .inner .slide-btn { position: relative; left: 50%; transform: translateX(-50%); }
    #mainSlide .bg.bg-7 + .inner p { text-align: center; }
    #mainSlide .bg.bg-8 + .inner { text-align: center; }
    #mainSlide .bg.bg-8 + .inner h4 img { width: 75%; margin: auto }
}

/* difference */
#difference .txt { width: 40%; }
#difference .img { width: 60%; }
#difference .order1 { order: 1; }
#difference .order2 { order: 2; }
@media(max-width:990px){
    #difference .order1 { order: 2; }
    #difference .order2 { order: 1; }
    #difference  .container_mini > .flex { flex-wrap: wrap; }
    #difference .txt, #difference .img { width: 100%; }
    #difference .txt { margin-bottom: 3rem; }
    #difference .txt:nth-child(even) { text-align: right; padding-left: 0; }
}

/* signature */
#signature .side-img { position: absolute; top: 0; right: 0; }
#signature .flexList { --x-gap: .1rem; --y-gap: .1rem; }
#signature .flexList .box { cursor: pointer; overflow: hidden; border-radius: 4rem; border: .0125rem solid #a29196; }
#signature .flexList .box::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: 1s; }
#signature .flexList .box:nth-child(odd)::after { background: var(--pointcolor); }
#signature .flexList .box:nth-child(even):after { background: var(--subcolor); }
#signature .flexList .box:hover::after { opacity: 0; }
#signature .flexList .box .img { filter: blur(5px); transform: scale(1.05); transition: .5s; }
#signature .flexList .box .txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3; }
#signature .flexList .box .ico { position: absolute; right: 2rem; bottom: 2rem; z-index: 3; }
#signature .flexList .box:hover .img { filter: blur(0); transform: scale(1); }
#signature .flexList .box:hover .ico { animation: blurRemove 2s forwards; }
@keyframes blurRemove {
    0% { filter: blur(0); opacity: 1; }
    30% { filter: blur(5px); }
    100% { opacity: 0; }
}
@media(max-width:990px){
    #signature .flexList { --y-gap: .05rem; }
    #signature .flexList .box { aspect-ratio: 1/1;  border-radius: 2rem;}
    #signature .flexList .box::after { opacity: 0; }
    #signature .flexList .box .img { filter: blur(0); transform: scale(1.1); }
    #signature .flexList .box:hover .img { filter: blur(0); transform: scale(1.1); }
    #signature .flexList .box .img img { width: 100%; }
    #signature .flexList .box .ico { display: none; }
    #signature .flexList .box:hover .ico { animation: none; }
    #signature .side-img { width: 50%; }
}

/* philosophy */
#philosophy .horizontal-line { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 80%; height: 1px; background: var(--gray); }
#philosophy .leftSide { width: 70%; }
#philosophy .leftSide .tit { z-index: 5; }
#philosophy .leftSide .tit h4 { width: 115%; }
#philosophy .leftSide .tit .name { margin-top: 8.5rem; }
#philosophy .leftSide .img { position: relative; z-index: 3; }
#philosophy .leftSide .img .signature { position: absolute; bottom: 2rem; left: 2rem; }
#philosophy .rightSide { width: 60%; margin-left: -7.5%; z-index: 5; }
#philosophy .rightSide .txt { margin-top: 15rem; padding: 5rem 0 5rem 5rem; }
@media(max-width:1420px){
    #philosophy .leftSide { width: 80%; }
    #philosophy .leftSide .tit h4 { width: 130%; }
    #philosophy .leftSide .img .signature { width: 50%; }
    #philosophy .rightSide { width: 50%; }
    #philosophy .rightSide .txt { padding: 3rem; }
}
@media(max-width:990px){
    #philosophy .horizontal-line { display: none; }
    #philosophy  .section-left_mini > .flex-between { flex-wrap: wrap; }
    #philosophy .leftSide { width: 100%; flex-wrap: wrap; }
    #philosophy .leftSide .tit, #philosophy .leftSide .img { width: calc(100vw - 10%); }
    #philosophy .leftSide .tit h4 { width: 85%; }
    #philosophy .leftSide .img { margin-top: 5rem; padding-left: 5%; width: 90%; }
    #philosophy .leftSide .img img { width: 100%; }
    #philosophy .leftSide .img .signature { width: 60%; left: 4rem; bottom: 3rem; }
    #philosophy .rightSide { position: relative; width: calc(100% + 5%); top: -5rem; z-index: -1; margin-left: -5%; }
    #philosophy .rightSide .txt { margin-top: 0; padding: 10rem 5% 5rem; }
    #philosophy .rotation-btn { position: absolute; right: 5%; bottom: -75px; }
}

.rotation-btn { display: inline-block; width: fit-content; }
.rotation-btn .btn-outer { position: relative; width: fit-content; height: auto; aspect-ratio: 1/1; }
.rotation-btn .btn-outer img { animation: rotate 30s linear infinite; }
.rotation-btn .btn-inner { position: absolute; width: 140px; height: 140px; background: #fff; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@media(max-width:1240px){
    .rotation-btn .btn-outer img { width: 150px; height: auto; }
    .rotation-btn .btn-inner { width: 100px; height: 100px; }
}

/* youtube */
#youtube .youtubeBox, #youtube .paginationBox { position: relative; }
#youtube .youtubeSwiper { width: 65%; }
#youtube .youtubeSwiper iframe { width: 100%; height: auto; aspect-ratio: 16/9; overflow: hidden; text-align: center; }
#youtube .youtubeBox .youtube-navigation { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; }
#youtube .youtubeBox .youtube-navigation.ytb-prev { left: 5%; }
#youtube .youtubeBox .youtube-navigation.ytb-next { right: 5%; }
#youtube .paginationBox .ytbPagination { position: absolute; bottom: 0; margin-top: 2rem; background: #dfdfdf; }
#youtube .paginationBox .ytbPagination .swiper-pagination-progressbar-fill { background: var(--pointcolor); }
@media(max-width:1240px){
    #youtube .youtubeSwiper { width: 80%; }
    #youtube .youtubeBox .youtube-navigation img { width: 75%; height: auto; } 
    #youtube .youtubeBox .youtube-navigation.ytb-prev { left: 0; }
    #youtube .youtubeBox .youtube-navigation.ytb-next { right: 0; }
}
@media(max-width:990px){
    #youtube .youtubeSwiper { width: 100%; }
    #youtube .youtubeBox .youtube-navigation { display: none; }
    #youtube .ytbThumbList { margin-top: 2rem; max-height: 300px; overflow-y: auto; }
    #youtube .ytbThumbList li.line { width: 100%; height: 1px; background: var(--gray); }
    #youtube .ytbThumbList li.media { padding: 1rem 0; cursor: pointer; }
    #youtube .ytbThumbList li.media .info { padding: 0 1rem 0 0; }
}

#youtube .mediaPopupWrap { display: none; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 55; }
#youtube .mediaPopupWrap.on { display: flex; align-items: center; justify-content: center; }
#youtube .mediaPopupCover { position: absolute; width: inherit; height: inherit; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
#youtube .mediaPopup { position: relative; width: 50%; height: auto; aspect-ratio: 16/9; z-index: 60; }
#youtube .mediaPopup .mediaClose { position: absolute; top: -2.5%; right: -7.5%; cursor: pointer; }
#youtube .mediaPopup iframe { width: 100%; height: auto; aspect-ratio: 16/9; overflow: hidden; }
@media(max-width:1240px){
  #youtube .mediaPopup { width: 90%; }
  #youtube .mediaPopup .mediaClose { top: -25%; right: 0; }
}

/* beforeNafter */
#beforeNafter .beafPics { position: relative; }
#beforeNafter .beafPics .beafLock { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .9); top: 0; left: 0; }
#beforeNafter .beafPics .img-outer, #beforeNafter .beafPics .img-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#beforeNafter .beafPics .img-outer img { animation: rotate 30s linear infinite; }
#beforeNafter .beafPics .img-inner { width: 100px; height: 100px; background: var(--pointcolor); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
#beforeNafter .paginationBox { position: relative; }
#beforeNafter .paginationBox .beafPagination { position: absolute; bottom: 0; margin-top: 4rem; background: #dfdfdf; }
#beforeNafter .paginationBox .beafPagination .swiper-pagination-progressbar-fill { background: var(--pointcolor); }
@media(max-width:990px){
    #beforeNafter .beafPics .beafLock p { font-size: 1.75rem; margin-top: 1.25rem; }
    #beforeNafter .beafBox { width: 90%; margin: auto; }
    #beforeNafter .beafPics { flex-wrap: wrap; }
    #beforeNafter .beafPics .beforeImg, #beforeNafter .beafPics .afterImg { width: 100%; }
    #beforeNafter .beafPics .img-outer img { width: 100px; height: 100px; }
    #beforeNafter .beafPics .img-inner { width: 70px; height: 70px; }
    #beforeNafter .beafPics .img-inner svg { width: 30px; height: 30px; }
}

/* realStory */
#realStory .gridView { position: relative; overflow: hidden; }
#realStory .gridView .comment { position: absolute; left: 50%; bottom: 3rem; transform: translateX(-50%); text-shadow: 0 2px 4px rgba(0, 0, 0, .25); padding: 1rem; cursor: pointer; }
#realStory .gridView .compare { --mask-width: 50%; --handle-size: 80px; position: relative; border: 1px solid rgba(0, 0, 0, .05); overflow: visible; }
#realStory .gridView .compare_separator { position: absolute; top: 0; height: 100%; left: var(--mask-width); width: 5px; margin-left: -1px; background: var(--BodyColor); z-index: 3; pointer-events: none; }
#realStory .gridView .compare_image-two { display: block; width: auto; height: 100%; max-width: none; }
#realStory .gridView .compare_mask { position: absolute; top: 0; left: 0; height: 100%; z-index: 1; background: #fff; overflow: hidden; z-index: 1; width: var(--mask-width); }
#realStory .gridView .compare_input { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; appearance: none; position: absolute; top: 0; left: calc( var(--handle-size) / -2 ); width: calc( 100% + var(--handle-size) ); height: 100%; opacity: 0; z-index: 2; cursor: col-resize; background: transparent; }
/* Firefox */
#realStory .gridView .compare_input::-moz-range-track { height: 100%; }
#realStory .gridView .compare_input::-moz-range-thumb { height: 100%; border-radius: 0; width: var(--handle-size); border: none; }
/* Webkit */
#realStory .gridView .compare_input::-webkit-slider-runnable-track { height: 100%; }
#realStory .gridView .compare_input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 100%; border-radius: 0; width: var(--handle-size); border: none; }
#realStory .gridView .compare_icon { position: absolute; z-index: 2; color: #333; width: var(--handle-size); height: var(--handle-size); top: 50%; left: var(--mask-width); transform: translate(-50%, -50%); padding: 1rem; border-radius: 50%; background: rgba(255, 255, 255, 1); }
#realStory .gridView .compare_div { position: absolute; width: 5px; height: 100%; background: var(--BodyColor); left: 50%; top: 0; transform: translateX(-50%); z-index: 3; }
#realStory .gridView .compare_icon path { stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; }
#realStory .gridView .compare, #realStory .gridView .compare_mask,
#realStory .gridView .compare_input, #realStory .gridView .compare_image-one,
#realStory .gridView .compare_separator {
    will-change: transform; transition: transform 1000ms, outline 1000ms, box-shadow 1000ms, opacity 1000ms; transition-timing-function: ease-out; outline: 2px solid transparent;
}
#realStory .gridList { --x-gap: .75rem; --y-gap: .75rem; width: calc( 50% - 1.500rem ); }
#realStory .gridList .box { cursor: zoom-in; }
@media(max-width:990px) {
    #realStory .gridView .compare_separator, #realStory .gridView .compare_div { width: 3px; }
    #realStory .gridView, #realStory .gridList, #realStory .compare_image-one { width: 100%; }
    #realStory .gridView .compare_icon { width: 60px; height: 60px; }
}

/* communities */
#communities .horizontal-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--gray); }
#communities .vertical-line { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background: var(--gray); }
#communities .horizontal-line.line-bottom { top: auto; bottom: 0; }
#communities .box { padding: 0 3rem; }
#communities .newsSwiper .swiper-slide a { position: relative; display: block; }
#communities .newsSwiper .swiper-slide .img { position: relative; width: 100%; height: auto; object-fit: cover; overflow: hidden; transition: .5s; }
#communities .newsSwiper .swiper-slide:hover .img { border-radius: 2rem; }
#communities .newsSwiper .swiper-slide .img::before { position: absolute; content: ''; width: 100%; height: 40%; bottom: 0; left: 0; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.75)); }
#communities .newsSwiper .swiper-slide h6 { position: absolute; width: 80%; bottom: 1.5rem; left: 50%; transform: translateX(-50%); word-break: break-all; }
#communities .innerBox .Tit h6 { padding: .5rem 1.5rem; border-radius: 2rem; }
#communities .innerBox .Tit a span { position: relative; display: inline-block; padding: .25rem; }
#communities .innerBox .Tit a span::after { position: absolute; content: ''; width: 0; height: 1px; bottom: 0; left: 0; background: var(--subcolor); transition: .5s; }
#communities .innerBox .Tit a:hover span::after { width: 100%; }
#communities .innerBox .Tit a:hover svg { animation: moveLeft 1s infinite; }
#communities .boardList li { padding: .75rem 1rem; border-bottom: 1px solid var(--gray); background: transparent; transition: .5s; }
#communities .boardList li a { display: block; }
#communities .boardList li:hover { background: rgba(255,255,255,.25); }
@keyframes moveLeft {
    from { transform: translateX(0); }
    to { transform: translateX(5px); } 
}
@media(max-width:990px) {
    #communities .vertical-line, #communities .horizontal-line { display: none; }
    #communities .tit { text-align: center; }
    #communities .box { padding: 0; }
}


/* directions */
#directions .horizontal-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--gray); }
#directions .info { width: 50%; padding: 120px 0 120px calc( (100% - var(--layoutwidthMini))/2 ); }
#directions .map-section { width: 50%; }
#directions ul li h6 { width: 8rem; }
#directions ol .flex p { position: relative; width: 4rem; text-align: justify; }
#directions ol .flex p::after { display: inline-block; content: ''; width: 100%; }
#directions .appList li a { position: relative; min-width: 12rem; padding: .75rem 0; border: 1px solid var(--pointcolor); background: transparent; transition: .5s; z-index: 5; overflow: hidden; }
#directions .appList li a::before { position: absolute; content: ''; width: 0; height: 100%; transition: .5s; top: 0; left: 0; background: var(--pointcolor); border-radius: 0 3rem 3rem 0; z-index: -1; }
#directions .appList li a:hover { color: #fff; }
#directions .appList li a:hover::before { width: 100%; border-radius: 0; }
#directions .root_daum_roughmap { width: 100%; }
#directions .root_daum_roughmap, #directions .root_daum_roughmap .wrap_map { height: 100% !important; }
#directions .root_daum_roughmap .wrap_controllers,
#directions .root_daum_roughmap > .cont { display: none; }
#directions .root_daum_roughmap .map_border { display: none; }
#directions .order1 { order: 1; }
#directions .order2 { order: 2; }
@media(max-width:1540px){
    #directions .info { padding: 120px 4rem; }
}
@media(max-width:1240px){
    #directions .info { padding: 100px 4rem; }
}
@media(max-width:990px){
    #directions .horizontal-line { display: none; }
    #directions h4 { text-align: center; }
    #directions > .flex { flex-wrap: wrap; }
    #directions .order1 { order: 2; }
    #directions .order2 { order: 1; }
    #directions .info, #directions .map-section { width: 100%; }
    #directions .info { padding: 20px 5% 40px; }
    #directions ul li h6 { width: 25%; }
    #directions ol { width: 75%; }
    #directions ol .flex p { width: 20%; }
    #directions .root_daum_roughmap, #directions .root_daum_roughmap .wrap_map { height: 400px !important; }
    #directions .appList { justify-content: space-between; }
    #directions .appList li { width: 30%; }
    #directions .appList li a { padding: 1rem 0; }
}
@media(max-width:768px){
    #directions .appList { flex-wrap: wrap; }
    #directions .appList li { width: 100%; margin-left: 0; }
    #directions .appList li:not(:first-child) { margin-top: 1rem; }
}
