@charset "utf-8";

/************************************************************** 
	세대안내 컨텐츠 스타일
	작성일 : 2024.01 / 작성자 : ㈜넥스미디어      
**************************************************************/

/***************************************
  평면도 탭메뉴
****************************************/
.unit_tab {margin-bottom: 70px;}
.unit_tab ul.list {display: flex; align-items: center;}
.unit_tab ul.list li {flex:1;}
.unit_tab ul.list li a {display: flex; align-items: center; justify-content: center; height: 60px; border-bottom: 1px solid #E0E0E0; position:relative; color:#888; font-family: 'Pretendard', sans-serif; font-size:16px;;}
.unit_tab ul.list li a.on {color:#111;}
.unit_tab ul.list li a.on::after {content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#505050;}


/* Mobile */
@media screen and (max-width: 1024px) {
  .unit_tab {margin-bottom: 50px;}
  .unit_tab ul.list {flex-wrap:wrap}
  .unit_tab ul.list li {width:33.33%; flex:auto;}
  .unit_tab ul.list li a {height: 50px; font-size:14px;}
  .unit_tab ul.list li a.on {}
  .unit_tab ul.list li a.on::after {}
}



/***********************************************************
  세대안내 - 평면정보 / 유니트 살펴보기 / 인테리어 / 유상옵션 / 마감재
************************************************************/
.unit_menu {
    width: 100%;
    height: 120px;
    display: flex;
    background: linear-gradient(to right, rgba(54,165,74,1) 0%, rgba(4,13,66,1) 30%, rgba(4,13,66,1) 100%);
    overflow: hidden; 
}
.unit_menu ul { display: flex; align-items: center; margin: 0 auto; position: relative; z-index: 1;}
.unit_menu ul li a {
  padding: 8px 20px;
  font-size: 18px;
  line-height: 1;  
  font-weight: 400;
  color: #fff;
}
.unit_menu ul li a.current {
  color: #000e43;
  background: #fff;
  border-radius: 50px;
  font-weight: 700;
}

.unit_page .unit_tab_con {margin-bottom:50px; display: flex; justify-content: center;}
.unit_page .unit_tab_con .tab_list {display: flex; justify-content: center; align-items: center; border:1px solid #D7D7D7;}
.unit_page .unit_tab_con .tab_list li {flex:1; width: 440px;}
.unit_page .unit_tab_con .tab_list li a {display: flex; padding: 0 53px; align-items: center; height: 60px; font-size:16px; font-weight: 500; color:#001241; position:relative;}
.unit_page .unit_tab_con .tab_list li a.on {background:#001241; color:#fff;}
.unit_page .unit_tab_con .tab_list li a::after {content:''; position:absolute; right:70px; top: 50%; transform: translateY(-50%); background:0 0 no-repeat;}
.unit_page .unit_tab_con .tab_list li:nth-child(1) a::after {width:24px; height:22px; background-image:url('/resources/data/cyber/cyber_icon1.png');}
.unit_page .unit_tab_con .tab_list li:nth-child(2) a::after {width:24px; height:24px; background-image:url('/resources/data/cyber/cyber_icon2.png');}

/* Mobile */
@media screen and (max-width: 1024px) {
  .unit_page .unit_tab_con {display: block;}
  .unit_page .unit_tab_con .tab_list {flex-direction: column;}
  .unit_page .unit_tab_con .tab_list li {width:100%;}
  .unit_page .unit_tab_con .tab_list li a {padding: 0 20px;}
  .unit_page .unit_tab_con .tab_list li a.on {}
  .unit_page .unit_tab_con .tab_list li a::after {right:20px;}
  .unit_page .unit_tab_con .tab_list li:nth-child(1) a::after {}
  .unit_page .unit_tab_con .tab_list li:nth-child(2) a::after {}
}



.unit_page .unit_content {}
.unit_page .unit_content img {max-width: 100%;}
.unit_page .unit_content .unit_info {}
.unit_page .unit_content .unit_info .unit_info_wrap {background:#E1E9F0; padding:60px 0 50px; text-align:center; line-height:1.2; font-family: 'Pretendard', sans-serif; margin-bottom: 50px; border-bottom: 10px solid #121D3C;}
.unit_page .unit_content .unit_info .unit_info_wrap .type_id {font-size:100px; color:#121D3C;}
.unit_page .unit_content .unit_info .unit_info_wrap .total_count {font-size:24px; font-weight: 500; color:#333;;}
.unit_page .unit_content .unit_info .unit_info_wrap .summary_info {margin-top: 40px;}
.unit_page .unit_content .unit_info .unit_info_wrap .summary_info ul {display: flex; align-items: center; justify-content: center; gap:51px;}
.unit_page .unit_content .unit_info .unit_info_wrap .summary_info ul ~ ul {margin-top: 10px;}
.unit_page .unit_content .unit_info .unit_info_wrap .summary_info li {position:relative; color:#333; font-size:18px; font-weight: 300;}
.unit_page .unit_content .unit_info .unit_info_wrap .summary_info li ~ li::before {content:''; position:absolute; left:-26px; top: 50%; width:1px; height:13px; transform: translateY(-50%); background:#333;}
.unit_page .unit_content .unit_info .unit_info_wrap .summary_info .tit {font-weight: 300;}
.unit_page .unit_content .unit_info .unit_info_wrap .summary_info .cont {}

.unit_page .unit_content .unit_info .unit_type_wrap {}
.unit_page .unit_content .unit_info .unit_type_wrap .titBox {display: flex; height: 50px; align-items: center; justify-content:center; background:#E1E9F0; color:#000; font-size:22px; font-family: 'Pretendard', sans-serif; font-weight: 700;}
.unit_page .unit_content .unit_info .unit_type_wrap .isoBox {display: flex; align-items: center; justify-content: center; text-align:center; min-height: 1025px; padding:90px 0; border: 1px solid #E1E9F0; border-top:0;}

/* Mobile */
@media screen and (max-width: 1024px) {
  .unit_page .unit_content {}
  .unit_page .unit_content img {}
  .unit_page .unit_content .unit_info {}
  .unit_page .unit_content .unit_info .unit_info_wrap {padding:30px 0 20px;}
  .unit_page .unit_content .unit_info .unit_info_wrap .type_id {font-size:72px;}
  .unit_page .unit_content .unit_info .unit_info_wrap .total_count {font-size:20px;}
  .unit_page .unit_content .unit_info .unit_info_wrap .summary_info {margin-top: 30px;}
  .unit_page .unit_content .unit_info .unit_info_wrap .summary_info ul {gap:10px; flex-direction: column;}
  .unit_page .unit_content .unit_info .unit_info_wrap .summary_info ul ~ ul {}
  .unit_page .unit_content .unit_info .unit_info_wrap .summary_info li {font-size:15px;;}
  .unit_page .unit_content .unit_info .unit_info_wrap .summary_info li ~ li::before {content:normal}
  .unit_page .unit_content .unit_info .unit_info_wrap .summary_info .tit {}
  .unit_page .unit_content .unit_info .unit_info_wrap .summary_info .cont {}
  
  .unit_page .unit_content .unit_info .unit_type_wrap {}
  .unit_page .unit_content .unit_info .unit_type_wrap .titBox {}
  .unit_page .unit_content .unit_info .unit_type_wrap .isoBox {min-height: 495px; padding:45px 30px;}
  .unit_page .unit_content .unit_info .unit_type_wrap .isoBox img {max-width: 100%;}
}







.unit_page .circle_mov a:before, .circle_mov a:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center center;
    border-radius: 50%;
    border: 2px solid rgba(230,47,47,0.8);
    box-sizing: border-box;
    transform-origin: center center;
    transform: scale(1);
    opacity: 0;
    animation: circle-waves 3s linear infinite;
    pointer-events: none;
}
.unit_page .circle_mov a:after {animation-delay: 1.5s;}
@keyframes circle-waves {0% {transform:scale(1); opacity:0;} 5% {opacity:1;} 100% {transform:scale(2); opacity:0;}}
div.opt_layer {
    /* display: none; */
    background: rgba(0, 0, 0, .6);  
    position: fixed;
    left:0;
    top:0;
    right: 0;
    bottom: 0;
    z-index: 90;
  }
  div.opt_layer .inner {    
    background: #000;    
    width: 950px;
    height: 740px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 91;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.59);
  }
  div.opt_layer h3 {
    color: #fff;
    text-align: center;  
    font-size: 30px;
    font-weight: 700;
    padding: 35px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  div.opt_layer h3 span {position: relative; display: inline-flex; align-items: center;}
  div.opt_layer h3 span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background: #fff;
    display: inline-block;
    margin-right: 10px;
  }
  div.opt_layer h3 span::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background: #fff;
    display: inline-block;
    margin-left: 10px;
  }
  
  div.opt_layer .close { 
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 40px;
    height: 40px;
    background:#000;
  }
  div.opt_layer .close i {color: #fff; font-size: 2rem;}
  .opt_layer .opt_img { 
    background: #fff;
    width: 860px;
    height: 580px;
    margin: 0 auto;
    position: relative;
    border-radius: 10px;
    padding: 10px 0 0;    
  }
  .opt_layer .opt_img div.scroll {
    margin: 0 auto;
    width: 860px;
    height: 550px;  
    overflow-y: auto;
    /* overflow-x: hidden; */
  }
  .opt_layer .opt_img div.img_area {
    text-align: center;
  }


.goods_layer {
    background: rgba(0, 0, 0, .6);  
    position: fixed;
    left:0;
    top:0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
}
.goods_layer .inner {    
    background: #fff;    
    padding: 2rem 4rem;
    max-width: 1000px;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.59);
    position: relative;
}
.goods_layer h3 {
    color: #023d61;
    font-size: 2rem;
    text-align: center;
    padding-bottom: 2rem;
    font-weight: 500;    
    text-transform: uppercase;
}
.goods_layer h3 sub {font-family: arial, sans-serif; font-weight: 100;}
.goods_layer h3 em {font-family: "Roboto", sans-serif; font-weight: 800; font-size: 2.8rem;}
.goods_layer .tab_inner {display: table; table-layout: fixed; width: 100%; position: relative; padding-bottom: 0; text-align: center;}
.goods_layer .tab_inner li {display: table-cell; vertical-align: bottom; background: #ededed;}
.goods_layer .tab_inner.col_3 li {width: 33.3333%;}
.goods_layer .tab_inner li a {display: block; color: #283f6b; font-size: 15px; font-weight: 600; text-align: center; padding:15px 0; background: none; border:1px solid #929eb5; background: none;  border-top: 0; margin-left: -1px; border-top: 2px solid #283e6b;}
.goods_layer .tab_inner li.on {background: #001242;}
.goods_layer .tab_inner li.on a {
    color: #fff;    
    position: relative;  
}
.goods_layer .opt_img {height:calc( 100vh - 300px ); margin-top: 1rem;}
.goods_layer .opt_img .scroll {height: 100%; overflow-y: auto; margin-right: -1.8rem;}
.goods_layer .close { 
    overflow: hidden;
    position: absolute;
    right: 2rem;
    top: 2rem;
  }  
  .goods_layer .close i {color: #000; font-size: 3rem;}
  .goods_layer .opt_img .scroll img {max-width: 100%;}

  .gnbtest {position: fixed; top: 0; left: 0; right: 0; z-index: 20;}

/* 
  @media screen and (max-width: 1100px) {    
    .page_contents .page_container {padding: 0 1.5rem;}
    .unit_page .unit_top_info .info_right ul {grid-template-columns: 1fr 1fr;}

    div.opt_layer .inner {width: calc( 100% - 5vw )}
    .opt_layer .opt_img {width: 90%; height:auto;}
    .opt_layer .opt_img div.scroll {width: 100%; height: 60vh;}
  }

  @media screen and (max-width: 960px) {    
    .unit_page .unit_top_info .info_left {width:30%;}
    .unit_page .unit_top_info .info_right {padding: 2rem 1.8rem;}
    .unit_page .unit_tab_con {padding: 3rem 0;}
    .unit_page .unit_tab_con .tab_list {width: 90%;}
  }

  @media screen and (max-width: 768px) {
    .unit_page .unit_top_info {flex-direction: column;}
    .unit_page .unit_top_info .info_left {width: 100%; flex-direction: row; padding: 1rem 0;}  
    .unit_page .unit_top_info .info_left .tit {padding-right: 2rem;}  
    .unit_page .unit_top_info .info_left .sub_count {padding-left: 1rem;}
    .unit_page .unit_content .unit_info dl dd .comment {width: auto; margin: 0 2rem; word-break: keep-all;} 

    .unit_page .unit_top_info .info_left .tit {font-size: 2.2rem;}
    .unit_page .unit_top_info .info_left .count {font-size: 1.3rem;}
    
    .opt_layer .opt_img div.scroll .mCSB_inside > .mCSB_container {margin-right: 0;}
    div.opt_layer h3 {font-size: 1.6rem; padding: 2rem 0;}
    div.opt_layer .close {width: auto; height: auto; right: 1rem; top: 1rem; display: inline-block;}
    

    
  }

  @media screen and (max-width: 480px) {
    .unit_page .unit_content .unit_info dl dd {padding: 2rem 1rem;}
    .unit_page .unit_info dl dd .option_list_con {padding-top: 2rem;}
    .unit_page .unit_top_info .info_right {padding: 1.5rem 1rem;}
    .unit_page .unit_top_info .info_right ul {grid-template-columns: 1fr;}
    .unit_page .unit_info dl dd ul {padding-top: 1rem;}
    .unit_page .unit_tab_con .tab_list {width: 100%;}
    .unit_page .unit_content .unit_info dl dd .comment {padding: 1rem; font-size: 0.87rem;} 
    .unit_page .unit_content .unit_info dl dd .comment span {font-size: 0.8rem;}
    .unit_page .unit_content .unit_info dl dd .comment span i {transform: scale(0.6);}
  } */