<p><link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"></p>
<style>
/* page_layout*/
.system {  background: #000; box-sizing: border-box; font-family: Montserrat, "sans-serif"; color: #fff; overflow: hidden;}    


/*swipe slide*/
 .system .swiper {
    width: 100%;
    height: 100%;
      
  }

  .system .swiper-slide {
    text-align: center;
    font-size: 14px;
    background: #000;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }



 .system .tab_navi ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height:0; background:#333333;
}

.system .tab_navi ul li {
  margin: 0;
  padding: 0;
  float: left;
  width:25%;
}

   

  .system .swiper-slide img {
    display: block;
    width: 75% !important;
    height: 75%  !important;        
  }


.system .swiper-button-next, .swiper-button-prev {color:#d9d9d9 !important; opacity:1 !important;}

.system .swiper-pagination-bullet-active {background:#222222;}



.system .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: var(--swiper-pagination-bottom, 35vw);
top: var(--swiper-pagination-top, auto);
left: 0;
width: 100%;
}


/* arrow btn custom */
.system .swiper-button-next:after, .swiper-button-prev:after {font-size:25px !important;}

.system .swiper-button-next, .swiper-rtl .swiper-button-prev {right: var(--swiper-navigation-sides-offset, 4.5%); left: auto;}
.system .swiper-button-prev, .swiper-rtl .swiper-button-next {left: var(--swiper-navigation-sides-offset, 4.5%); right: auto;}



    /* swiper 스케줄용 */
    
    .calendar {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(20px, 1fr));
  grid-template-rows: 50px;
  grid-auto-rows: 100px;
  overflow: auto;
  background: #000;
}
.calendar-container {
  width: 100%;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
}
.calendar-header {
  text-align: left;
  padding: 20px 0 20px 20px;  
  background:#222222;
  border-bottom:1px solid #d9d9d9;
  
}
.calendar-header h1 {
  margin: 0;
  font-size: 20px;
  color:#ff4949;
}
.calendar-header p {
  margin: 5px 0 0 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(81, 86, 93, 0.4);
}
.calendar-header button {
  background: 0;
  border: 0;
  padding: 0;
  color: rgba(81, 86, 93, 0.7);
  cursor: pointer;
  outline: 0;
}

.day{
    
  border-bottom: 1px solid rgba(34, 34, 34, 1);
  border-right: 1px solid rgba(34, 34, 34, 1);
  text-align: right;
  padding: 5px 5px 5px 0px;;
  letter-spacing: 1px;
  font-size: 12px;
  box-sizing: border-box;
  position: relative;
  pointer-events: none;
  z-index: 1;
  color:#fff;
}

.day span{padding:7px; color:#fff; text-align:center;background: url(https://cdn.nugu.jp/public/day_background.png?q=100&amp;f=webp&amp;w=860);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;}


.day:nth-of-type(7n + 7) {
  border-right: 0;
}
.day:nth-of-type(n + 1):nth-of-type(-n + 7) {
  grid-row: 2;
}
.day:nth-of-type(n + 8):nth-of-type(-n + 14) {
  grid-row: 3;
}
.day:nth-of-type(n + 15):nth-of-type(-n + 21) {
  grid-row: 4;
}
.day:nth-of-type(n + 22):nth-of-type(-n + 28) {
  grid-row: 5;
}
.day:nth-of-type(n + 29):nth-of-type(-n + 35) {
  grid-row: 6;
}
.day:nth-of-type(7n + 1) {
  grid-column: 1/1;
}
.day:nth-of-type(7n + 2) {
  grid-column: 2/2;
}
.day:nth-of-type(7n + 3) {
  grid-column: 3/3;
}
.day:nth-of-type(7n + 4) {
  grid-column: 4/4;
}
.day:nth-of-type(7n + 5) {
  grid-column: 5/5;
}
.day:nth-of-type(7n + 6) {
  grid-column: 6/6;
}
.day:nth-of-type(7n + 7) {
  grid-column: 7/7;
}
.day-name {
  font-size: 12px;
  text-transform: uppercase;
  color: #99a1a7;
  text-align: center;
  border-bottom: 1px solid rgba(34, 34, 34, 1);
  line-height: 50px;
  font-weight: 500;
  background:#222222;
}
.day--disabled {
  color: rgba(152, 160, 166, 0.6);
  background-color: #000;  
  cursor: not-allowed;
}

.task {
  border-left-width: 3px;
    padding: 4px 8px;
    margin: 10px 0 45px 5px;
    border-left-style: solid;
    font-size: 7px;
    position: relative;
    z-index:10;
}
    
.task2 {
  border-left-width: 3px;
    padding: 4px 8px;
    margin: 10px 0 20px 5px;
    border-left-style: solid;
    font-size: 7px;
    position: relative;
    z-index:10;
}    
    
.task--warning {
  border-left-color: #fdb44d;
  grid-column: 4/span 3;
  grid-row: 3;
  background: #fef0db;
  align-self: center;
  color: #fc9b10;
  margin-top: -5px;
}
.task--danger {
  border-left-color: #fa607e;
  grid-column: 2/span 3;
  grid-row: 3;
  margin-top: 15px;
  background: rgba(253, 197, 208, 0.7);
  align-self: end;
  color: #f8254e;
}
.task--info {
  border-left-color: #4786ff;
  grid-column: 6/span 2;
  grid-row: 5;
  margin-top: 15px;
  background: rgba(218, 231, 255, 0.7);
  align-self: end;
  color: #0a5eff;
}



/*서머리 표기*/
/* 10월 캘린더 */    
.task--primary01 {
  background: #ff4949;
  border: 0;
  border-radius: 24px 0 0 24px;
  grid-column: 6/span 6;
  grid-row: 3;
  align-self: end;
  color: #fff;
    text-align:left;
  
}

.task--primary01-1 {
  background: #ff4949;
  border: 0;
  border-radius: 0px 24px 24px 0px;
  color:#ff4949;
  grid-column: 1/span 3;
  grid-row: 4;
  align-self: end;  
    text-align:left;
  
}


.task--primary02 {
  background: #ff4949;
  border: 0;
  border-radius: 24px 0 0 24px;
  grid-column: 4/span 4;
  grid-row: 4;
  align-self: end;
  color: #fff;
text-align:left;
  
}


.task--primary02-1 {
  background: #ff4949;
  border: 0;
  border-radius: 0px 24px 24px 0px;
  color:#ff4949;
  grid-column: 1/span 1;
  grid-row: 5;
  align-self: end;  
    text-align:left;
  
}


/* 11월 캘린더 */    
    .task--primary03 {
  background: #ff4949;
  border: 0;
  border-radius: 24px 0 0 24px;
  grid-column: 6/span 2;
  grid-row: 2;
  align-self: end;
  color: #fff;
    text-align:left;
  
}

.task--primary03-1 {
  background: #ff4949;
  border: 0;
  border-radius: 0px 24px 24px 0px;
  color:#ff4949;
  grid-column: 1/span 5;
  grid-row: 3;
  align-self: end;  
    text-align:left;
  
}


.task--primary04 {
  background: #ff4949;
  border: 0;
  border-radius: 24px 0 0 24px;
  grid-column: 6/span 2;
  grid-row: 3;
  align-self: end;
  color: #fff;
text-align:left;
  
}


.task--primary04-1 {
  background: #ff4949;
  border: 0;
  border-radius: 0px 24px 24px 0px;
  color:#ff4949;
  grid-column: 1/span 5;
  grid-row: 4;
  align-self: end;  
    text-align:left;
  
}

 .task--primary05 {
  background: #ff4949;
  border: 0;
  border-radius: 24px 0 0 24px;
  grid-column: 6/span 2;
  grid-row: 4;
  align-self: end;
  color: #fff;
    text-align:left;
  
}

.task--primary05-1 {
  background: #ff4949;
  border: 0;
  border-radius: 0px 24px 24px 0px;
  color:#ff4949;
  grid-column: 1/span 5;
  grid-row: 5;
  align-self: end;  
    text-align:left;
  
}


.task--primary06 {
  background: #ff4949;
  border: 0;
  border-radius: 24px 0 0 24px;
  grid-column: 6/span 2;
  grid-row: 5;
  align-self: end;
  color: #fff;
text-align:left;
  
}


.task--primary06-1 {
  background: #ff4949;
  border: 0;
  border-radius: 0px 24px 24px 0px;
  color:#ff4949;
  grid-column: 1/span 4;
  grid-row: 6;
  align-self: end;  
    text-align:left;
  
}
 
.task--primary06-2 {
  background: #823aff;
  border: 0;
  border-radius: 24px 0 0 24px;
  color:#ffffff;
  grid-column: 6/span 2;
  grid-row: 5;
  align-self: end;  
    text-align:left;
  
}    
    
.task--primary06-3 {
  background: #823aff;
  border: 0;
  border-radius: 0px 0px 0px 0px;
  color:#823aff;
  grid-column: 1/span 7;
  grid-row: 6;
  align-self: end;  
    text-align:left;
  
}       
    
    

        .task--primary07 {
  background: #ff4949;
  border: 0;
  border-radius: 24px 0 0 24px;
  grid-column: 6/span 2;
  grid-row: 6;
  align-self: end;
  color: #fff;
    text-align:left;
  
}

.task--primary07-1 {
  background: #ff4949;
  border: 0;
  border-radius: 0px 24px 24px 0px;
  color:#ff4949;
  grid-column: 1/span 4;
  grid-row: 4;
  align-self: end;  
    text-align:left;
  
}


    /*12월 캘린더*/
.task--primary08 {
  background: #ff4949;
  border: 0;
  border-radius: 24px 0 0 24px;
  grid-column: 4/span 4;
  grid-row: 4;
  align-self: end;
  color: #fff;
text-align:left; 
  
}


.task--primary08-1 {
  background: #ff4949;
  border: 0;
  border-radius: 0px 24px 24px 0px;
  color:#ff4949;
  grid-column: 1/span 1;
  grid-row: 5;
  align-self: end;  
    text-align:left;
  
}

    
 .task--primary09 {
  background: #ff4949;
  border: 0;
  border-radius: 0px 24px 24px 0px;
  grid-column: 1/span 5;
  grid-row: 2;
  align-self: end;
  color: #ff4949;
text-align:left; 
  
}



.task--primary09-1 {
  background: #823aff;
  border: 0;
  border-radius: 0px 0px 0px 0px;
  color:#823aff;
  grid-column: 1/span 7;
  grid-row: 2;
  align-self: end;  
    text-align:left;
  
}       
    
    .task--primary09-2 {
  background: #823aff;
  border: 0;
  border-radius: 0px 24px 24px 0px;
  color:#823aff;
  grid-column: 1/span 1;
  grid-row: 3;
  align-self: end;  
    text-align:left;
  
}    
    




.task__detail {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  background: #fff;
  border: 1px solid rgba(166, 168, 179, 0.2);
  color: #000;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  z-index: 2;
}
.task__detail:after, .task__detail:before {
  bottom: 100%;
  left: 30%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.task__detail:before {
  border-bottom-color: rgba(166, 168, 179, 0.2);
  border-width: 8px;
  margin-left: -8px;
}
.task__detail:after {
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}
.task__detail h2 {
  font-size: 15px;
  margin: 0;
  color: #51565d;
}
.task__detail p {
  margin-top: 4px;
  font-size: 12px;
  margin-bottom: 0;
  font-weight: 500;
  color: rgba(81, 86, 93, 0.7);
}
    
    
/* schedule 전용 슬라이드 CSS 추가 */    
.system .schedule_slide .swiper-button-next, .system .schedule_slide.swiper-button-prev {color:#ff4949 !important; opacity:1 !important;}
.system .colorchip {position: absolute; z-index: 10; right: 25vw;margin-top: 4vw;}

/* arrow btn custom */
.system .schedule_slide .swiper-button-next:after, .system .schedule_slide .swiper-button-prev:after {font-size:25px !important; font-weight:bold;color:#ff4949}
.system .schedule_slide .swiper-button-next, .system .schedule_slide .swiper-rtl .swiper-button-prev {right: var(--swiper-navigation-sides-offset, 2%); left: auto;margin-top:-297px !important;}
.system .schedule_slide .swiper-button-prev, .system .schedule_slide .swiper-rtl .swiper-button-next {left: var(--swiper-navigation-sides-offset, 80%); right: auto;margin-top:-297px !important;}
    
 
 


/* blank area 10 ~150 */
.system .blank_10{height:10px;}
.system .blank_20{height:20px;}
.system .blank_30{height:30px;}
.system .blank_40{height:40px;}
.system .blank_50{height:50px;}
.system .blank_60{height:60px;}
.system .blank_70{height:70px;}
.system .blank_80{height:80px;}
.system .blank_90{height:90px;}
.system .blank_100{height:100px;}
.system .blank_110{height:110px;}
.system .blank_120{height:120px;}
.system .blank_130{height:130px;}
.system .blank_140{height:140px;}
.system .blank_150{height:150px;}






@media screen and (min-width: 700px) and (max-width: 1025px) {
	.colorchip{position: absolute;
    z-index: 10;
    right: 34.5vw !important;
    margin-top: 1.6vw !important;}
	
}



@media screen and (min-width: 1025px) {
	.colorchip{position: absolute;
    z-index: 10;
     right: 43.5vw !important;
    margin-top: 0.7vw !important;
}
}





</style>
<div data-ng-script="https://cdn.nugu.jp/public/the-hyundai-x-parco/10335.js?v=1#load10335Script()">
<div class="system"><img style="width: 100%;" alt="photoslide_01.jpg" src="https://cdn.nugu.jp/public/system_final_01_hktoYkO.jpg?q=100&amp;f=webp&amp;w=860"> <img style="width: 100%;" alt="photoslide_02.jpg" src="https://cdn.nugu.jp/public/system_final_02.jpg?q=100&amp;f=webp&amp;w=860"> <img style="width: 100%;" alt="photoslide_03.jpg" src="https://cdn.nugu.jp/public/system_final_03.jpg?q=100&amp;f=webp&amp;w=860"> <img style="width: 100%;" alt="photoslide_04.jpg" src="https://cdn.nugu.jp/public/system_final_04.jpg?q=100&amp;f=webp&amp;w=860"> 
<div class="tab_navi">
<ul>
<li><a href="#benefit01"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/system_newopen_tab_01.png?q=100&amp;f=webp&amp;w=860"></a></li>
<li><a href="#benefit02"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/system_newopen_tab_02.png?q=100&amp;f=webp&amp;w=860"></a></li>
<li><a href="#benefit03"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/system_newopen_tab_03.png?q=100&amp;f=webp&amp;w=860"></a></li>
<li><a href="#benefit04"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/system_newopen_tab_04.png?q=100&amp;f=webp&amp;w=860"></a></li>
</ul>
</div>
<div id="benefit01"><img style="width: 100%;" alt="photoslide_05.jpg" src="https://cdn.nugu.jp/public/system_final_06.jpg?q=100&amp;f=webp&amp;w=860"> <img style="width: 100%;" alt="photoslide_06.jpg" src="https://cdn.nugu.jp/public/system_final_07.jpg?q=100&amp;f=webp&amp;w=860"> <img style="width: 100%;" alt="photoslide_07.jpg" src="https://cdn.nugu.jp/public/system_final_08.jpg?q=100&amp;f=webp&amp;w=860"> <img style="width: 100%;" alt="photoslide_07.jpg" src="https://cdn.nugu.jp/public/system_final_09.jpg?q=100&amp;f=webp&amp;w=860"></div>
 <img style="width: 100%;" alt="photoslide_10.jpg" src="https://cdn.nugu.jp/public/system_new_10.jpg?q=100&amp;f=webp&amp;w=860">
<div class="blank_40"></div>
<div class="swiper brand01">
<div class="swiper-wrapper">
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod1_slide_01.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod1_slide_02.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod1_slide_03.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod1_slide_04.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod1_slide_05.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod1_slide_06.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod1_slide_07.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod1_slide_08.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod1_slide_09.jpg?q=100&amp;f=webp&amp;w=860"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="blank_40"></div>

<div class="swiper brand02">
<div class="swiper-wrapper">
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod2_slide_01.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod2_slide_02.jpg?q=100&amp;f=webp&amp;w=860"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="blank_40"></div>

<div class="swiper brand03">
<div class="swiper-wrapper">
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod3_slide_01.jpg?q=100&amp;f=webp&amp;w=860"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="blank_40"></div>

<div class="swiper brand04">
<div class="swiper-wrapper">
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod4_slide_01.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod4_slide_02.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod4_slide_03.jpg?q=100&amp;f=webp&amp;w=860"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="blank_40"></div>

<div class="swiper brand05">
<div class="swiper-wrapper">
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod5_slide_01.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod5_slide_02.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod5_slide_03.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod5_slide_04.jpg?q=100&amp;f=webp&amp;w=860"></div>
<div class="swiper-slide"><img style="width: 100%;" alt="" src="https://cdn.nugu.jp/public/prod5_slide_05.jpg?q=100&amp;f=webp&amp;w=860"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="blank_20"></div>
<div id="benefit02">
<div class="blank_20"></div>
<img style="width: 100%;" alt="photoslide_19.jpg" src="https://cdn.nugu.jp/public/system_final_12.jpg?q=100&amp;f=webp&amp;am;w=860"> <img style="width: 100%;" alt="photoslide_19.jpg" src="https://cdn.nugu.jp/public/system_final_13.jpg?q=100&amp;f=webp&amp;am;w=860"> <img style="width: 100%;" alt="photoslide_19.jpg" src="https://cdn.nugu.jp/public/system_final_14.jpg?q=100&amp;f=webp&amp;am;w=860"></div>
<div id="benefit03"><img style="width: 1000px;" alt="photoslide_19.jpg" src="https://cdn.nugu.jp/public/system_mhVTDhr.jpg" height="1100"> <img style="width: 100%;" alt="photoslide_19.jpg" src="https://cdn.nugu.jp/public/system_final_16.jpg?q=100&amp;f=webp&amp;am;w=860"></div>
<div id="benefit04"><img style="width: 100%;" alt="photoslide_19.jpg" src="https://cdn.nugu.jp/public/system_final_17.jpg?q=100&amp;f=webp&amp;am;w=860"> <a href="https://system1990.com/" target="_blank" rel="noopener"><img style="width: 100%;" alt="photoslide_19.jpg" src="https://cdn.nugu.jp/public/system_final_18.jpg?q=100&amp;f=webp&amp;am;w=860"></a> <img style="width: 100%;" alt="photoslide_19.jpg" src="https://cdn.nugu.jp/public/system_final_19.jpg?q=100&amp;f=webp&amp;am;w=860"> <a href="https://instagram.com/system__1990" target="_blank" rel="noopener"><img style="width: 100%;" alt="photoslide_19.jpg" src="https://cdn.nugu.jp/public/system_final_20.jpg?q=100&amp;f=webp&amp;am;w=860"></a> <img style="width: 100%;" alt="photoslide_19.jpg" src="https://cdn.nugu.jp/public/promotion-3.jpg?q=100&amp;f=webp&amp;am;w=860"></div>
</div>
</div>