@charset "utf-8";

/* portcard-N7 */
.portcard-N7 {
    width: 100%;  
}

.portcard-N7 .contents-inner {
    width: 100%; position: relative
}

.portcard-N7 .contents-tit {
    margin-bottom: 30px;
    text-align: center; font-weight: 700; font-size:calc(var(--tit-mds-size) * 0.9); height: auto;  line-height: 110%
}

.portcard-N7 .swiper-slide {
    min-height:40rem
}

.portcard-N7 .swiper-slide.swiper-slide-active .cardset-figure {
    height:55rem ; 
}

.portcard-N7 .swiper-slide.swiper-slide-next+.swiper-slide .cardset-figure {
    height:40rem
}

.portcard-N7 .cardset {
    display: block;
    width: 100%;
    height: 100%
}

.portcard-N7 .cardset .cardset-figure {
    width: 100%;
    height: 40rem;
    transition: height 0.3s
}

.portcard-N7 .cardset .cardset-body {
    padding-top: 2rem;
    padding-bottom: 0
}
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.portcard-N7 .swiper-controls { width: 97%; 
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top:clamp(10px, 1.563vw, 20px); margin-bottom: clamp(10px, 3.906vw, 50px)
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.portcard-N7 .swiper-controls { width:100%; 
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top:clamp(10px, 1.563vw, 20px); margin-bottom: clamp(10px, 3.906vw, 50px)
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




.portcard-N7 .swiper-pagination {
    position: static;
    height: 6px;
    background: #e8e8e8
}

.portcard-N7 .swiper-btnarea {
    display: flex;
    align-items: center;
    gap: 3rem
}

.portcard-N7 .swiper-paging {
    display: flex;
    align-items: center
}


.portcard-N7 .swiper-paging-total,
.portcard-N7 .swiper-paging-text {
    color: #666666
}

.portcard-N7 .swiper-pagination-progressbar-fill {
    background: var(--primary)
}

@media (max-width: 992px) {
    .portcard-N7 {
      
    }

    .portcard-N7 .contents-tit {
        margin-bottom: 1rem
    }

    .portcard-N7 .swiper-slide {
        min-height: 40rem
    }

    .portcard-N7 .swiper-slide.swiper-slide-active .cardset-figure,
    .portcard-N7 .swiper-slide.swiper-slide-next+.swiper-slide .cardset-figure {
        height: 36rem
    }

    .portcard-N7 .cardset .cardset-body {
        padding-top: 1.4rem
    }

    .portcard-N7 .cardset .cardset-figure {
        height: 26rem
    }

    .portcard-N7 .swiper-controls {
        gap: 0.8rem;
        margin-top:0rem
    }

    .portcard-N7 .swiper-btnarea {
        display: flex;
    align-items: center;
    gap: 1.4rem
    }

    .portcard-N7 .swiper-pagination {
        height: 4px
    }
}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.view-layout-wrap {
 
  gap: 60px; display: grid;grid-template-columns: 220px auto ; padding: 0px 100px
}
.fr{width:100% ; float: left ;overflow: hidden}
	
	
.view-sidebar {
  width: clamp(100px, 19.531vw, 200px);
  max-height: calc(100vh - 100px); /* 이걸로 제한 */
  overflow-y: auto;
  padding: 0 15px;
  margin-top: -30px;
  box-sizing: border-box;
}
.view-sidebar ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
    .view-sidebar li {
      display: block;             /* 중요: float 사용 금지 */
      width: 100%;                /* 너비 지정 */

      color: #888;

    }
.view-sidebar li a {
  color: #888;
  text-decoration: none;
	 display: block;             /* 중요: float 사용 금지 */
      width: 100%;                /* 너비 지정 */
      font-size: 14px;
      line-height: 1.8;
  
      white-space: nowrap;        /* 한 줄로 */
      overflow: hidden;           /* 넘친 내용 숨기기 */
      text-overflow: ellipsis;    /* 말줄임표 (...) */
	
}
.view-sidebar li.active a {
  font-weight: bold;
  color: #000;
}




}


.portcard-N7 .swiper-button-prev{
    position: static; padding: 0px!important ;
     width:40px;
    height:40px;
    margin: 0; background-image: none!important ; display: flex;  justify-content: center;  align-items: center; position: relative
}

.portcard-N7 .swiper-button-next {
    position: static; padding: 0px!important ;
    width:40px;
    height:40px;
    margin: 0; background-image: none!important ; display: flex;  justify-content: center;  align-items: center; position: relative
}


.portcard-N7 .swiper-button-next::after {
  
    width: 100%;
    height: 100%; content: "\eb9f";   font-family: unicons-line; font-size: 40px; color: #000
   
}

.portcard-N7 .swiper-button-prev::after{
  
    width: 100%;
    height: 100%; content: "\ec49";    font-family: unicons-line; font-size: 40px; color: #000
   
}


.portcard-N7 .swiper-button-prev::after {
    
}


/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.view-layout-wrap {
  display: flex;
  gap: 30px; overflow: hidden
}
.view-sidebar {
  width: 100%;
  height: 90vh;
  overflow-y: auto;

  padding: 10px 15px; display: none
}
.view-sidebar ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.view-sidebar li {
  font-size: 14px;
  line-height: 1.8;
  color: #888;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.view-sidebar li a {
  color: #888;
  text-decoration: none;
}
.view-sidebar li.active a {
  font-weight: bold;
  color: #000;
}




}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.view_img_btn {margin-top:0px; width: 100%; display: flex; justify-content: flex-end;grid-gap: 5px }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.view_img_btn {margin-top:0px; width: 100%; display: flex; justify-content: flex-end;grid-gap: 5px; position: absolute; right: 20px;; top: 0px }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.portcard-N7 .swiper-slide {
  width: auto !important;
  height: 300px;
  transition: all 0.3s ease;
  margin-right: 20px;
  opacity: 0.6;
  transform: none;
}
.portcard-N7 .swiper-slide.swiper-slide-active {
  opacity: 1;
  margin-right: 40px; /* 강조 효과 */
}
.portcard-N7 .swiper-wrapper {
  overflow: visible !important;
}
.portcard-N7 .visual-swiper {
  overflow: visible;
}
.portcard-N7 .swiper-slide {
  width: auto !important;
  flex-shrink: 0;
}
.portcard-N7 .swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease;
  will-change: transform;
}

.portcard-N7 .swiper-slide {
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  width: auto !important;
}
.visual-swiper {
  overflow: hidden; width: 100%
}
.visual-swiper .swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease; 
}
.visual-swiper .swiper-slide {
  width: auto !important;
  flex-shrink: 0; 
}



.back-to-list{}

.cate_back i{ font-size: 30px!important; color: var(--primary); margin-left: -5px}
.view-content{width:100%; float: left; }
.view-content{width:100%; float: left; }
.view-content img{width:100%; float: left; }


.sticky-block-wrapper{  width: 100%;float: left; padding: 0px 50px}
.sticky-block-row{  width: 100%;;float: left;  padding: 0px;display: grid;grid-template-columns: clamp(150px, 19.531vw, 200px) auto clamp(150px, 19.531vw, 200px); grid-gap: clamp(10px, 3.906vw, 50px)}
.sticky-block-row .column-left{  width:100%!important; }
.sticky-block-row .column-right{  width: 100%!important; float: right; text-align: center}
.sticky-block-row  .view-content{  width: 100%!important; float: left; text-align: center}
.sticky-block-row  .view-content p{  width: 100%!important; float: left; text-align: center}

 .contents-tit {
    margin-bottom: 30px;
    text-align: center; font-weight: 700; font-size:calc(var(--tit-mds-size) * 0.9); height: auto;  line-height: 110%; text-align: center
}

.view-content {float: left!important; width: 100%; }

.view-content p{float: left!important; width: 100%; display: flex;  justify-content: center;  align-items: center;flex-direction: column;;}


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
.editor-content img {
  max-width: 100% !important;
  height: auto !important;
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	
.editor-content img {
  max-width: 100% !important;
  height: auto !important;
}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.view-content p{float: left!important; width: 100%; display: flex;  justify-content: center;  align-items: center;flex-direction: column;;}
.view-content p img{  max-width: 100% !important;
  height: auto !important; }

.editor-content img {
  max-width: 100% !important;
  height: auto !important;
}
	
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.wg_box {
      display: flex;
      gap: 20px;
      margin: 0px auto;
      max-width:100%;
      position: relative;
     
      min-height: 1000px; padding-right: clamp(100px, 19.531vw, 200px)
    }

    .sidebar {
      width: clamp(100px, 19.531vw, 200px);
      position: relative; padding-top: 100px
    }

    .content {
      flex: 1; ; border: none
    }

    .sticky_box {
      position: relative;
      transition: top 0.3s ease;

    }

    .column-left {
      font-weight: bold;
      color: #333;
    }

    .column-right {
    
   
      min-height: 2000px; /* 테스트용 긴 콘텐츠 */
    }

    .footer {
      height: 10px;
  background-color: #fff;
      text-align: center;
      line-height: 100px;
      font-weight: bold;
    }
	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.wg_box {
      display: flex;
      gap: 20px;
     width:100%;
      position: relative;flex-direction: column;
    
    }

    .sidebar {
      width: 100%x;
      position: relative;
    }

    .content {
      flex: 1; ; border: none
    }

    .sticky_box {
      position: relative;
      transition: top 0.3s ease;

    }

    .column-left {
      font-weight: bold;
      color: #333;
    }

    .column-right {
    
   
    
    }

    .footer {
      height: 10px;
  background-color: #fff;
      text-align: center;
      line-height: 100px;
      font-weight: bold;
    }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/





#mySticky {
  transition: top 0.3s ease;
  will-change: top;
}
#wgBox {
  position: relative;
}