@charset "utf-8";
@import url("https://cdn.linearicons.com/free/1.0.0/icon-font.min.css");
.control_nav .button-prev{cursor: pointer;}
.control_nav .button-next{cursor: pointer;}
.skytelling_layer .pc {
    display: block;
}
/*
    분기점 / 기타
    - 1500px ~ 최대 1920px;
    - 1024px ~ 1499px 까지는 1500px 고정사이즈
    - 1024px 이하 모바일
*/
.skytelling_layer * {box-sizing: border-box;}

.skytelling_layer {
	box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    height: 0;
    z-index: -9;
    opacity: 0;
    transition: all 0.5s;
    background: url("/home/design/images/skytelling/bg_visual.jpg");
    background-size: cover;
    background-position: center;
    overflow-x: auto;
}
.skytelling_layer.active {
    opacity: 1;
    min-height: 100vh;
    z-index: 99999;
    height: 100%;
}

@media screen and (max-width: 1024px) {
    .skytelling_layer { position: fixed; }
}
.sky_wrap {
    max-width: 1920px;
    min-width: 1500px;
    overflow: hidden;
    margin: 0 auto;
}
.sky_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem 0;
}

.sky_logo {
    width: 30%;
    order: 0;
}
.sky_logo img {
    width: 30%;
	margin-left:4%;
}
.sky_copy {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 1;
}
.sky_copy img {
    width: 70%;
	margin-top:6%;
}
.sky_close {
    width: 30%;
    text-align: right;
    order: 2;
    position: relative;
}
.sky_close a {
    right: 0;
    top: 0;
    display: block;
    color: #fff !important;
    font-size: 4rem;
}
@media screen and (max-width: 1024px) {
   .skytelling_layer .pc {
        display: none;
    }
    .skytelling_layer .mo {
        display: block;
    }
    .sky_wrap {
        width: 100%;
        min-width: 200px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .sky_header {
        width: 100%;
        flex-direction: column;
        padding: 1rem 1rem 0;
    }
    .sky_logo {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        order: 1;
        margin-top: 1rem;
    }
    .sky_logo img {
        width: 90%;
    }
    .sky_copy {
        width: 100%;
        margin-top: 2rem;
        order: 2;
    }
    .sky_close {
        order: 0;
        width: 100%;
    }
}

.sky_body {
    width: 100%;
    height: auto;
    margin-top: 8rem;
    padding: 0 2rem;
}
.sky_movie_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.movie_tit {
    width: 100%;
}
.movie_tit img {
    width: 100%;
    margin-top: 1rem;
}
.movie_play_icon {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -2.5rem;
}
.movie_play_icon img {
    width: auto;
}

#skytelling_layer .swiper-container {
    width: 85%;
}
#skytelling_layer .swiper-slide{
    width: 54%;
    height: 35%;
}

#skytelling_layer .movie_block .swiper-slide{
}


#skytelling_layer .swiper-slide {
    z-index: 1;
}
#skytelling_layer .swiper-slide.swiper-slide-active {
    position: relative;
    z-index: 9;
}
/************   홍보동영상   ***********/
.movie_pr {
    background-color:#d9d9d9;
    width: 35%;
    height: 76vh;
    min-height: 60vh;
    max-height: 70vh;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
}
.movie_pr .list_con {
    width: 100%;
    height: 300px;
    margin-top: 7rem;
}
.movie_pr_slide_1 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h01_01.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_pr_slide_1 img {
    margin-top: 40%;
    width: 50px;
    height: 50px;
}
.movie_pr_slide_2 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h01_02.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_pr_slide_2 img {
    margin-top: 40%;
    width: 50px;
    height: 50px;
}
.movie_pr_slide_3 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h01_03.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_pr_slide_3 img {
    margin-top: 40%;
    width: 50px;
    height: 50px;
}

.movie_pr_slide_4 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h01_04.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_pr_slide_4 img {
    margin-top: 40%;
    width: 50px;
    height: 50px;
}

.movie_pr_slide_tit {
    width: 100%;
    padding: 1rem 0;
    text-align: center;
    background-color: rgba(36, 48, 57, 0.5);
}
.movie_pr_slide_tit span {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}
.movie_pr_slide_1 img {
    margin-top: 40%;
}
.control_nav1 {
    width: calc(100% - 6rem);
    height: 56px;
    margin: 2rem auto;
    background-color: #444444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
	padding:0px 10px;
}
.skytelling_layer .control_nav1 .page_num {
    width: 80px;
    color: #fff;
    font-family: "Montserrat";
}
.skytelling_layer .control_nav1 .page_num strong {
    font-weight: 600;
    font-size: 1.1rem;
}
.skytelling_layer .control_nav1 .page_num span {
    font-weight: 400;
    font-size: 1rem;
    opacity: 0.4;
}
.skytelling_layer .control_nav1 .button-prev {
    background: url(/home/design/images/prev.png);
    background-size: auto;
    background-position: center;
    width: 40px;
    height: 40px;
}
.skytelling_layer .control_nav1 .button-next {
    background: url(/home/design/images/next.png);
    background-size: auto;
    background-position: center;
    width: 40px;
    height: 40px;
}
.skytelling_layer .control_nav1 .progress_bar {
    margin: 0 10px 0 0;
    width: calc(100% - 180px);
    height: 4px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}
.skytelling_layer .control_nav1 .progress_bar::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.4;
}
.skytelling_layer .control_nav1 .progress_bar span {
    position: absolute;
    left: 0;
    top: 0;
    width: 33.3333%;
    height: 4px;
    display: block;
    background:#fff;
    z-index: 999;
    border-radius: 2px;
    transition: all 0.5s;
    opacity: 0.6;
    background: #b87682;
}
.control_nav3 {
    width: calc(100% - 6rem);
    height: 56px;
    margin: 2rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
	background:#444444;
    z-index: 9;
	padding:0px 10px;
}
.skytelling_layer .control_nav3 .page_num {
    width: 80px;
    color: #fff;
    font-family: "Montserrat";
}
.skytelling_layer .control_nav3 .page_num strong {
    font-weight: 600;
    font-size: 1.1rem;
}
.skytelling_layer .control_nav3 .page_num span {
    font-weight: 400;
    font-size: 1rem;
    opacity: 0.4;
}
.skytelling_layer .control_nav3 .button-prev {
    background: url(/home/design/images/prev.png);
    background-size: auto;
    background-position: center;
    width: 40px;
    height: 40px;
}
.skytelling_layer .control_nav3 .button-next {
    background: url(/home/design/images/next.png);
    background-size: auto;
    background-position: center;
    width: 40px;
    height: 40px;
}
.skytelling_layer .control_nav3 .progress_bar {
    margin: 0 10px 0 0;
    width: calc(100% - 180px);
    height: 4px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}
.skytelling_layer .control_nav3 .progress_bar::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.4;
}
.skytelling_layer .control_nav3 .progress_bar span {
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: 4px;
    display: block;
    background:#fff;
    z-index: 999;
    border-radius: 2px;
    transition: all 0.5s;
    opacity: 0.6;
    background: #6aa9c4;
}

.control_nav2 {
    width: calc(100% - 6rem);
    height: 56px;
    margin: 2rem auto;
	background:#444444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
	padding:0px 10px;
	margin-top:0px;
}
.skytelling_layer .control_nav2 .page_num {
    width: 80px;
    color: #fff;
    font-family: "Montserrat";
}
.skytelling_layer .control_nav2 .page_num strong {
    font-weight: 600;
    font-size: 1.1rem;
}
.skytelling_layer .control_nav2 .page_num span {
    font-weight: 400;
    font-size: 1rem;
    opacity: 0.4;
}
.skytelling_layer .control_nav2 .button-prev {
    background: url(/home/design/images/prev.png);
    background-size: auto;
    background-position: center;
    width: 40px;
    height: 40px;
}
.skytelling_layer .control_nav2 .button-next {
    background: url(/home/design/images/next.png);
    background-size: auto;
    background-position: center;
    width: 40px;
    height: 40px;
}
.skytelling_layer .control_nav2 .progress_bar {
    margin: 0 10px 0 0;
    width: calc(100% - 180px);
    height: 4px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}
.skytelling_layer .control_nav2 .progress_bar::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.4;
}
.skytelling_layer .control_nav2 .progress_bar span {
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: 4px;
    display: block;
    background:#fff;
    z-index: 999;
    border-radius: 2px;
    transition: all 0.5s;
    opacity: 0.6;
    background: #6aa9c4;
}

.movie_block_con1 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h02_01.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_block_con1 img {
    margin-top: 80%;
    width: 50px;
    height: 50px;
}

.movie_block_con2 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h02_02.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_block_con2 img {
    margin-top: 80%;
    width: 50px;
    height: 50px;
}

.movie_block_con3 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h02_03.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_block_con3 img {
    margin-top: 80%;
    width: 50px;
    height: 50px;
}

.movie_block_con4 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h02_04.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_block_con4 img {
    margin-top: 80%;
    width: 50px;
    height: 50px;
}

/************   단지홍보   ***********/
.movie_block {
    background-color:#bfcbd6;
    width: 24%;
    height: 76vh;
    min-height: 60vh;
    max-height: 70vh;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}
.movie_block .list_con {
    width: 100%;
    height: auto;
    margin-top: 6rem;
    display: flex;
    justify-content: center;
    padding: 0 0 3rem;
}

.movie_block_con {
    width: 60%;
    height: 320px;
    background: url("/home/design/images/skytelling/movie_block_slide.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.movie_block_con a {
    width: 100%;
    height: 100%;
}

.movie_block_con a .movie_block_con_tit {
    width: 100%;
    padding: 1rem 0;
    text-align: center;
    background-color: rgba(36, 48, 57, 0.5);
}
.movie_block_con a .movie_block_con_tit span {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
	font-family:'Noto Sans KR';
}
.movie_block_con a img {
    margin: 30% 40%;
}

/************   유니트VR   ***********/
.movie_unit {
    background-color:#d9d9d9;
    width: 31%;
    height: 76vh;
    min-height: 60vh;
    max-height: 70vh;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
}
.movie_unit .list_con {
    width: 100%;
    height: 300px;
    /* background-color: red; */
    margin-top: 7rem;
}

.movie_unit_slide_1 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h03_01.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_unit_slide_1 img {
    margin-top: 40%;
    width: 50px;
    height: 50px;
}
.movie_unit_slide_2 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h03_02.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_unit_slide_2 img {
    margin-top: 40%;
    width: 50px;
    height: 50px;
}
.movie_unit_slide_3 {
    width: 100%;
    height: 300px;
    background: url("/home/design/images/skytelling/sky_h03_03.png");
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.movie_unit_slide_3 img {
    margin-top: 40%;
    width: 50px;
    height: 50px;
}

.movie_unit_slide_tit {
    width: 100%;
    padding: 1rem 0;
    text-align: center;
    background-color: rgba(106, 169, 196, 0.5);
}
.movie_unit_slide_tit span {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}
.movie_unit_slide_1 img {
    margin-top: 40%;
}







/**********************
        footer
**********************/
.sky_footer {
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 1.5rem;
}
.copyright {
    width: 100%;
}
.copyright span {
    font-size: 15px;
    font-weight: 400;
    color: #2E251E;
}




.video_layer_wrap .movie_btn_skip {position:absolute; bottom:30px; left:0%; width:100%; text-align:center; z-index:1002;color:#fff;}
.video_layer_wrap {background:rgba(0,0,0,0.6); width:100%; height:100vh; position:fixed; top:0; left:0; z-index:9999999; }
.video_layer_wrap .inner {position:relative; display:flex; flex-direction:column; align-items: center; justify-content: center; width:100%; height:100%;}
.video_layer_wrap .btn_skip {position:absolute; width:100%; left:0; bottom:30px; text-align:center; z-index:1001; }
.video_con {
      position:relative;
      max-width:1120px;
      width:90%;
      padding: 0 0 5rem;
}
.video_con video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video_con .movie_btn_sound {display:block; width:25px; height:25px; background-repeat:no-repeat; background-size:100% 100%; background-position:0 0; background-image:url("/resources/img/btn_sound_off.png"); position:absolute; top:50%; right:3%; margin-top:23%; z-index:1001; text-indent: -9999px; overflow:hidden;}
.video_con .movie_btn_sound.on {background-image:url("/resources/img/btn_sound_on.png");}

.video_layer_wrap .responsive_mov { margin: 0; }

/*
  스타일 용도 : 영상 반응형
  비고 : 브라우저/디바이스의 관계없이 영상의 비율을 16:9 로 일정하게 유지함
*/
.responsive_mov {
  position: relative;
  padding: 56.25% 0 0;
  margin: 4rem 0;
}
.responsive_mov iframe,
.responsive_mov object,
.responsive_mov embed {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 640px) {
  .responsive_mov {
    margin: 1rem 0;
  }
}


.vr_layer_wrap .movie_btn_skip {position:absolute; bottom:30px; left:0%; width:100%; text-align:center; z-index:1002;}
.vr_layer_wrap {background:rgba(0,0,0,0.6); width:100%; height:100vh; position:fixed; top:0; left:0; z-index:9999999; }
.vr_layer_wrap .inner {position:relative; display:flex; flex-direction:column; align-items: center; justify-content: center; width:100%; height:100%;}
.vr_layer_wrap .btn_skip {position:absolute; width:100%; left:0; bottom:30px; text-align:center; z-index:1001; }
.vr_area {
      position:relative;
      max-width:1400px;
      width:90%;
}
.vr_layer_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.vr_layer_wrap .btn_close {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
}
.vr_layer_wrap .btn_close a {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    color: #fff !important;
    font-size: 3rem;
}