/* 와이드 pc  */

	
.videoBox{width:100%;height:100%; overflow:hidden; position:absolute}
.videoBox>img{object-fit: cover;}

#imgBG{
	position:fixed; /*고정=>fixed/ 스크롤처리=>absolute */
   left:50%;
   top:50%; /*오른쪽, 아래에 여백을 두지않고 꽉차게 표시*/
   width:auto;
   min-width:100%; /*동영상 너비를 꽉차게*/
   height:auto;
   min-height:100%; /*동영상 높이를 꽉차게*/
  transform:translateX(-50%) translateY(-50%);
   z-index:-100;
}

/* Common */
#content{ width:100%; margin:0; background:rgba(0,0,0,.9);position: relative; color: #fff; font-family: 'Noto Sans', sans-serif;}
#content h2{position: absolute; top: -500px; width: 100%; text-align: center; font-size: 4em; color: #fff; font-family: 'Orbitron', sans-serif;}
#content h3{font-size: 5rem; font-family: 'Orbitron', sans-serif; text-align: center;}
#content .subtitle{font-size: 2rem;}


/* Never just drive */
#content .never_just_drive{padding: 80px 150px;}
#content .never_just_drive .subtitle{text-align: center; margin: 20px 0 70px;}
#content .never_just_drive img{display: block; margin: 0 auto; height: 550px; width: 100%;
   object-fit: cover;}
#content .never_just_drive p:nth-of-type(2){margin-top: 50px;}


/* HYUNDAI N */
#content .hyundai_n h3{margin: 80px 0 50px;}

.hyundai_n_slide {
  display: flex;
  flex-direction: column;
  width: 100%;
  transform: translate3d(0, 0, 0);
  padding: 0 200px;
  box-sizing: border-box;
  margin-bottom: 80px;
}
@media (min-width: 1025px) {
  .hyundai_n_slide {
    flex-direction: row;
    /* width: 130%;
    margin-left: -15%; */
  }
}

/* hover 효과 */
.hyundai_n_slide .slide_item:hover {
  flex: 2;
}
.hyundai_n_slide .slide_item:hover:after {
  opacity: 0.8;
}
.hyundai_n_slide .slide_item:hover .slide_content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s 0.2s, transform 0.2s 0.2s;
}
@media (min-width: 1025px) {
  .hyundai_n_slide .slide_item:hover .slide_content {
    transform: translateY(0) skewX(-15deg);
  }
}

/* 리스트 아이템 */
.hyundai_n_slide .slide_item {
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 20vh;
  overflow: hidden;
  z-index: 1;
  transition: flex-grow 0.2s, opacity 0.2s;
}
.hyundai_n_slide .slide_item:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: transform 0.2s, width 0.2s;
}
.hyundai_n_slide .slide_item:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  transition: opacity 0.2s;
}
@media (min-width: 1025px) {
  .hyundai_n_slide .slide_item {
    width: 20%;
    height: 70vh;
    margin-right: -1px;
    transform: skewX(5deg) translateZ(0);
  }
  .hyundai_n_slide .slide_item:before {
    left: -100%;
    width: 400%;
    transform: skewX(-5deg);
  }
}

/* 각 배경 */
.hyundai_n_slide .slide_item:nth-child(1):before {
  background-color: #e60000;
  background-image: url(../images/sub1/hyundai_n_01.jpg);
}
body.hide-images .hyundai_n_slide .slide_item:nth-child(1):before {
  background-image: none;
}

.hyundai_n_slide .slide_item:nth-child(2):before {
  background-color: #cc0000;
  background-image: url(../images/sub1/hyundai_n_02.jpg);
}
body.hide-images .hyundai_n_slide .slide_item:nth-child(2):before {
  background-image: none;
}

.hyundai_n_slide .slide_item:nth-child(3):before {
  background-color: #b30000;
  background-image: url(../images/sub1/hyundai_n_03.jpg);
}
body.hide-images .hyundai_n_slide .slide_item:nth-child(3):before {
  background-image: none;
}

.hyundai_n_slide .slide_item:nth-child(4):before {
  background-color: #990000;
  background-image: url(../images/sub1/hyundai_n_04.jpg);
}
body.hide-images .hyundai_n_slide .slide_item:nth-child(4):before {
  background-image: none;
}

.hyundai_n_slide .slide_item:nth-child(5):before {
  background-color: maroon;
  background-image: url(../images/sub1/hyundai_n_05.jpg);
}
body.hide-images .hyundai_n_slide .slide_item:nth-child(5):before {
  background-image: none;
}

/* 컨텐츠 */
.hyundai_n_slide .slide_content {
  position: relative;
  padding: 24px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  z-index: 1;
  transition: opacity 0.2s, transform 0.2s;
  top: 40px;
}
@media (min-width: 1025px) {
  .hyundai_n_slide .slide_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    opacity: 0;
    transform: translateY(24px) skewX(-15deg);
  }
}

/* 텍스트 */
.hyundai_n_slide .slide_title {
  font-size: 1.7rem;
  line-height: 2.5rem;
  text-align: center;
  margin-bottom: 20px;
  font-family: 'Orbitron', sans-serif;

}
.hyundai_n_slide .slide_desc {
  font-size: 1.1rem;
  line-height: 1.4;
}





/* From Namyang to Nurburgring */
#content .from_n_to_n{padding-top: 80px;}
#content .from_n_to_n h3{font-size: 3.8rem; padding: 0 150px;}

#content .from_n_to_n>img{height: 250px; width: 100%; object-fit: cover; padding: 0 150px; margin-top: 70px;}
#content .from_n_to_n ul{
   padding: 0 150px;
   margin: 30px auto 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px;
   grid-template-areas: 
      'a b'
      ;
}
#content .from_n_to_n li:nth-child(1){grid-area: a;}
#content .from_n_to_n li:nth-child(2){grid-area: b;}
#content .from_n_to_n li:nth-child(1) img{width: 100%; object-fit: cover;}

#content .from_n_to_n .center_1,
#content .from_n_to_n .center_2{padding-top: 80px;}
#content .from_n_to_n .center_2{margin-bottom: 160px;}

#content .from_n_to_n h4{font-family: 'Orbitron', sans-serif; font-size: 2.8rem;}
#content .from_n_to_n .center_1 h4{padding-left: 150px;}
#content .from_n_to_n .center_2 h4{padding-right: 150px; text-align: right;}

#content .from_n_to_n .center_1 .subtitle,
#content .from_n_to_n .center_2 .subtitle{font-size: 1.7rem; padding: 0 150px; margin: 20px 0 30px;}
#content .from_n_to_n .center_2 .subtitle{text-align: right;}

#content .from_n_to_n .center_1 p:nth-of-type(2),
#content .from_n_to_n .center_2 p:nth-of-type(2){padding: 0 150px;}
#content .from_n_to_n .center_2 p:nth-of-type(2){text-align: right;}

#content .from_n_to_n .center_slide{ margin: 30px auto; padding: 0 150px;}
#content .from_n_to_n .center_slide .center_swiper{
      width: 100%;
      height: auto;
      padding:20px 0 40px;
    }
#content .from_n_to_n .center_slide .center_swiper .swiper-slide img{width: 100%;}
.swiper-scrollbar{background: #2a333a;}
.swiper-scrollbar-drag{background: #AACAE6;}

/* N's Three Core DNAs */

#content .dna{padding: 0 150px 100px;}
#content .dna h3{margin-bottom: 60px;}

#content .dna .dna_slider {position: relative; overflow: hidden; width: 100%; height: 700px;}

#content .dna .dna_slider .dna_sidebar {height: 100%; width: 35%; position: absolute;
  top: 0; left: 0; transition: transform 0.5s ease-in-out;}
#content .dna .dna_slider .dna_sidebar > div{height: 100%; width: 100%; display: flex;
  flex-direction: column; align-items: center; justify-content: center; color: #fff;}
#content .dna .dna_slider .dna_sidebar h4 {font-family: "Orbitron", sans-serif; font-weight: 900;
  font-size: 1.89rem; margin-bottom: 10px; margin-top: -30px; padding: 30px; color: black;}
#content .dna .dna_slider .dna_sidebar p{padding: 0 45px 0 30px; color: black;}

#content .dna .dna_slider .dna_main_slide{height: 100%; position: absolute; top: 0; left: 35%;
  width: 65%; transition: transform 0.5s ease-in-out;}
#content .dna .dna_slider .dna_main_slide > div{background-repeat: no-repeat;
  background-size: cover; background-position: center center; height: 100%; width: 100%;}

#content .dna .dna_slider .dna_controls button{position: absolute; left: 35%; top: 50%;
  z-index: 10; background-color: #fff; border: none; color: #aaa; cursor: pointer;
  font-size: 16px; padding: 15px;}
#content .dna .dna_slider .dna_controls button:hover{color: #222;}
#content .dna .dna_slider .dna_controls button:focus{outline: none;}
#content .dna .dna_slider .dna_controls .dna_down{
  transform: translateX(-100%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#content .dna .dna_slider .dna_controls .dna_up{
  transform: translateY(-100%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}



.dna_swiper {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
      color: black;
    }
.dna_swiper .swiper-slide {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;

  /* 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;
}
.dna_swiper .swiper-slide img{width: 100%;}
.dna_swiper .swiper-slide p{height: 200px; background: linear-gradient(180deg,rgba(223, 236, 248, 1) 0%, rgba(170, 202, 230, 1) 100%);
  padding: 0 20px;}
.dna_swiper .swiper-slide p strong{display: block; margin: 20px 0; font-size: 1.2rem; font-family: 'Orbitron', sans-serif;}

/* 슬라이더 교체 */

  .dna_slider {
  display: block;
}
  .dna_swiper {
  display: none;
}

/* 일반 pc */
@media screen and (max-width:1280px) {
	
}

/* 텍스트 탈락 */
@media screen and (max-width:1190px) {
	.from_n_to_n ul li:nth-of-type(2) p span:nth-of-type(2){display: none;}
  .from_n_to_n .center_2>p:nth-of-type(2) span{display: none;}

  .dna .dna_sidebar div p span:nth-of-type(1){display: none;}
}

/* 태블릿 */
@media screen and (max-width:1024px) {
	#headerArea .menuOpen{ display:block; }
  #headerArea #gnb{
    float:none;
    width:100%;
    background: rgba(0, 0, 0, .9);
    display:none;
    position:absolute;
    top:0; left:0;
    padding-top: 80px;
    box-sizing: border-box;}
  #headerArea #gnb ul{display: flex; flex-direction: column;}
  #headerArea #gnb ul li{float:none; margin:0; text-align:center; margin-right: 0;}
  #headerArea #gnb li a{display: block; padding: 20px 0;font-size: 2em;}
  #headerArea #gnb ul li a{font-size: 1.3rem; font-weight: 600; font-family: 'Orbitron', sans-serif;}
  /* #headerArea #gnb ul li a:hover{background:#AACAE6 ; color: #000;} */


   /* Common */
  #content h3{font-size: 4rem;}
  #content .subtitle{font-size: 1.5rem;}


  /* Never just drive */
  #content .never_just_drive{padding: 80px 30px;}


  /* HYUNDAI N */
  .hyundai_n_slide {padding: 0 30px;}

  .hyundai_n_slide .slide_item {min-height: 30vh;}
  .hyundai_n_slide .slide_item:after {opacity: 0.5;}

  /* From Namyang to Nurburgring */
  #content .from_n_to_n h3{font-size: 3.8rem; padding: 0 30px;}
  #content .from_n_to_n>img{padding: 0 30px;}
  #content .from_n_to_n ul{padding: 0 30px;}
  #content .from_n_to_n .center_1 h4{padding-left: 30px;}
  #content .from_n_to_n .center_2 h4{padding-right: 30px;}
  #content .from_n_to_n .center_1 .subtitle,
  #content .from_n_to_n .center_2 .subtitle{padding: 0 30px;}
  #content .from_n_to_n .center_1 p:nth-of-type(2),
  #content .from_n_to_n .center_2 p:nth-of-type(2){padding: 0 30px;}

  #content .from_n_to_n .center_slide{padding: 0 30px;}

  /* N's Three Core DNAs */
  #content .dna{padding: 0 30px 100px;}
}




/* 소형 테블릿 */
@media screen and (max-width:768px) {

/* Common */
#content h3{font-size: 3rem;}
#content .subtitle{font-size: 1.3rem;}

/* From Namyang to Nurburgring */
#content .from_n_to_n h3{font-size: 3rem; padding: 0 30px;}
#content .from_n_to_n .center_1 h4{padding-left: 30px; font-size: 2.5rem;}
#content .from_n_to_n .center_2 h4{padding-right: 30px; font-size: 2.5rem;}

#content .from_n_to_n ul li:nth-of-type(2) p span:nth-of-type(1){display: none;}

/* N's Three Core DNAs */
#content .dna .dna_slider .dna_sidebar h4 {font-family: "Orbitron", sans-serif; font-weight: 900;
  font-size: 1.89rem; margin-bottom: 10px; margin-top: -30px; padding: 20px;}
#content .dna .dna_slider .dna_sidebar p{padding: 0 45px 0 20px; color: black;}
#content .dna .dna_sidebar div p span:nth-of-type(2){display: none;}
}

/* 모바일 */
@media screen and (max-width:640px) {
   /* Common */
  #content h3{font-size: 2.5rem;}
  #content .subtitle{font-size: 1.3rem;}


  /* Never just drive */
  #content .never_just_drive{padding: 80px 20px;}
    #content .never_just_drive p:nth-of-type(2){margin-top: 30px;}
  #content .never_just_drive p:nth-of-type(2) span{display: none;}
  


  /* HYUNDAI N */
  .hyundai_n_slide {padding: 0 20px;}

  /* From Namyang to Nurburgring */
  #content .from_n_to_n h3{font-size: 3rem; padding: 0 20px;}
  #content .from_n_to_n>img{padding: 0 20px;}
  #content .from_n_to_n ul{padding: 0 20px;}
  #content .from_n_to_n .center_1 h4{padding-left: 20px; font-size: 2rem;}
  #content .from_n_to_n .center_2 h4{padding-right: 20px; font-size: 2rem;}
  #content .from_n_to_n .center_1 .subtitle,
  #content .from_n_to_n .center_2 .subtitle{padding: 0 20px;}
  #content .from_n_to_n .center_1 p:nth-of-type(2),
  #content .from_n_to_n .center_2 p:nth-of-type(2){padding: 0 20px;}

  #content .from_n_to_n .center_slide{padding: 0 20px;}

    .dna_slider {
  display: none;
}
  .dna_swiper {
  display: block;
}

  /* N's Three Core DNAs */
  #content .dna{padding: 0 20px 100px;}
	
}