/* 와이드 pc  */

	
.videoBox{width:100%;height:100%; overflow:hidden; position:absolute}

#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;
}

.cls-1 {
   fill: none;
   stroke: #000000;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 40px;
   scale: 1;
}
.down{
   display: block; position: absolute; width: 50px; height: 90px;
	left:50%; margin-left: -17px; bottom: 15%;
   overflow: hidden;
   border: 1px solid #101010;
   border-radius: 30px;
   box-shadow: 0 0 10px var(--font-color-sub);
   backdrop-filter: blur(2px);
}

#scrolldown{
   animation:ani 1.5s infinite ease;
}
@keyframes ani {
	0% { transform:translateY(-100px); opacity:1; color:#fff;}
	100% { transform:translateY(100px); opacity:1; color:#fff;}
}		

	
#content{ width:100%; margin:0;; background:rgba(0,0,0,.9);position: relative;}
#content h2{
   position: absolute; top: -400px;
   width: 100%; text-align: center; font-size: 5rem; color: #fafafa;
   text-shadow: 0 0 10px var(--font-color-sub);

}
h3{font-size: clamp(3rem, 5vw, 5rem)}
.sec1{
   margin-top: 100px;
   & .subsec1_1{text-align: center;
      background: url(../images/sub1/apexLegendsCatalyst.png) no-repeat;
      background-size:contain;
      background-position: center;
      text-align: center;
      margin-bottom: 100px;
      padding: 140px 0;
      & >div {
         text-align: center;
         margin-top: 100px;
         @media screen and (max-width:768px) {
            margin-top: 130px;
         }
         & h3{
            padding: 20px 0; text-shadow: 0 0 10px var(--font-color-point1);
            @media screen and (max-width:768px) {
               padding: 20px 0 0 0;
            }
         }
         & p{font-size: clamp(1.2rem, 2.4vw, 3rem); text-shadow: 0 0 10px #101010; }
         & .avail{
            display: flex;
            flex-direction: row;
            gap: 20px;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
            @media screen and (max-width:768px) {
               padding: 0 0 20px 0;
            }
            & dt{font-size: 1.2rem; padding: 0 20px;}
            & dd{
               width: 40px; height: auto;
            }
            & dd:last-of-type{width: 50px; height: auto;}
         }
         & >ul{
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0 100px 0;
            & li{
               width: 200px; height: 50px;
               padding-top: 12px;
               border-radius: 30px;
               background: #fafafa;
               &:hover {box-shadow: 0 0 15px  rgba(0, 213, 178, 0.8);}
               & a{
                  transition: all .3s ease-out;
                  font-size: clamp(1rem, 1.3vw, 1.07rem);
               }
               &:hover a{
                  letter-spacing: 1px;
                  color: var(--font-color-sub);
               }
            }
         }
      }
   }

   & .subsec1_2{
      display: flex;
      justify-content: center;
      margin-bottom: 100px;
      @media screen and (max-width:1024px) {
         flex-direction: column;
         align-items: center;
      }
      @media screen and (max-width:768px) {
         
      }
      & img{
         width: 45%;
         @media screen and (max-width:1024px) {
            width: 80%;
            margin-bottom: 30px;
         }
         @media screen and (max-width:768px) {
            width: 100%;
         }
      }
      & >ul{
         margin-left: -150px;
         display: flex;
         justify-content: end;
         flex-direction: column;
         position: relative;

         @media screen and (max-width:1024px) {
            margin: 50px 0 0 0;
         }
         @media screen and (max-width:768px) {
            position: relative;
            margin-top: 5%;
         }
         & li{
            font-family: 'Electronic Arts Display'; 
            font-size: clamp(1rem, 2.3vw, 2rem);
            display: flex; align-items: flex-end; gap: 10px;
            z-index: 1;
            @media screen and (max-width:1024px) {
               order: 0;
               font-size: clamp(1.2rem, 2.5vw, 2rem);
            }
            @media screen and (max-width:768px) {
               font-size: clamp(1.3rem, 3.4vw, 1.6rem);
            }
            & span:first-of-type{
               font-size: clamp(1.4rem, 3.6vw, 3rem);
               /* color: var(--font-color-point1); */
               @media screen and (max-width:768px) {
                  /* font-size: 2.5rem; */
                  font-size: clamp(1.7rem, 5vw, 2.5rem);
               }
            }
         }
         & li:first-of-type{
            position: absolute;top: 170px; right: 0;
            align-self: self-end; margin-right: 14%;
            font-size: clamp(2.8rem, 4.5vw, 4rem);
            display: block; width: 30%;
            @media screen and (max-width:1024px) {
               order: 1;
               margin-right: 0;
               margin-bottom: 0;
               width: 25%;
               top: -70px;
            }
            @media screen and (max-width:768px) {
            }
            & #shade{
               
               animation: updownshade 1.5s infinite alternate;
               & #shade_img{
                  filter: drop-shadow(0 0 6px rgba(255, 29, 29, 1));
                  width: 100%;
                  @media screen and (max-width:768px) {

                  }
               }
            }
         }
      }
   }
   & .subsec1_3{
      background: #333;
      text-align: center;
      padding: 90px 0;
      & >p:first-of-type{font-size: 2rem; padding:30px 0}
      & >p:last-of-type{
         font-size:  clamp(1.1rem, 1.2vw, 1.2rem); padding: 0 50px;
         @media screen and (max-width:1024px) {
            padding: 0 30px;
         }
         @media screen and (max-width:768px) {
         } 
         
      }
      & >img{object-fit: contain; width: 100%;}
   }
}
@keyframes updownshade {
   0% { transform:translateY(00px); opacity:1;}
   100% { transform:translateY(30px); opacity:1;}
}


.sec2{
   margin-bottom: 100px;
   margin-top: 100px;
   @media screen and (max-width:1024px) {
	margin: 100px 50px 100px 50px;
   }
   @media screen and (max-width:768px) {
      margin-top: 100px;
   }
   & h3{
      padding-bottom: 30px; margin-left: 100px;
      @media screen and (max-width:1024px) {
         margin-left: 0;
      }
      @media screen and (max-width:768px) {
      }
   }
   & .subsec2_1{
      margin-left: 100px;
      position: relative;
      display: grid;
      grid-template-columns:  repeat(2, 1fr);
      grid-auto-rows: auto;
      grid-gap: 0rem;
      
      grid-template-areas: 
      'a c'
      'b c';
      @media screen and (max-width:1024px) {
         grid-template-areas: 
         'a a'
         'b c';
         margin-left: 0;
      }
      @media screen and (max-width:768px) {
         grid-template-columns:  repeat(1, 1fr);
         grid-template-areas: 
         'a'
         'c'
         'b';
      }
      
      /* min-height: 585px; */
      margin-bottom: 100px;
      & #moveLR{
         position: absolute;
         right: 14%;
         bottom: 15.5%;
         z-index: 9;
         width: 5%;
         animation: leftright 1.5s infinite ;
         filter: drop-shadow(0 0 6px rgba(255, 29, 29, 1));
         @media screen and (max-width:1024px) {
            bottom: 8.5%;
            right: 11%;
            width: 6%;
         }
         @media screen and (max-width:768px) {
            bottom: 23%;
            right: 18%;
            width: 10%;
         }
      }
      & >ul{
         grid-area: a;
         & >li{
            font-size: clamp(1rem, 1.3vw, 1.5rem);
            margin-bottom: 30px;
         }
         & >:nth-of-type(3){
            display: flex;
            align-items: flex-start;
            gap: 20px;
            flex-direction: column;
            @media screen and (max-width:1024px) {
               margin-bottom: 100px;
            }
            @media screen and (max-width:768px) {
               
            }
            & p{
               font-size: 1.4rem;
            }
            & ul{
               display: flex; flex-direction: row;
               gap: 10px;
               justify-content: center;
               align-items: center;
               & img{
                  width: 30px; height: auto;
               }
               & :last-of-type{
                  width: 50px; height: auto;
               }
            }
         }
      }
      & >div:first-of-type{
         grid-area: b;
         @media screen and (max-width:1024px) {
            margin-top: 60px;
         }
         @media screen and (max-width:768px) {
            margin-top: 0;
            text-align: center;
         }
         & p:first-of-type{
            font-size: 1.8rem; padding-bottom: 20px;
            @media screen and (max-width:1024px) {
               font-size: 1.6rem;
            }
            @media screen and (max-width:768px) {
               
            }
         }
         & p:last-of-type{font-size: clamp(1rem, 1.3vw, 1.5rem)}
   
         & .swiper-button-next{
            position: relative;
            left: 0;
            top: 70px;
            width: 165px; height: 54px;
            text-align: center;
            font-size: 1.1rem;
            background: #fafafa;
            border-radius: 30px;
            transition: all .3s ease-out;
            line-height: normal;
            color: #101010;
            font-family: 'Alata';
            @media screen and (max-width:768px) {
               left: 50%; transform: translateX(-50%);
               margin-bottom: 100px;
            }

         }
         & .swiper-button-next:after{display: none;}
         & .swiper-button-next:hover{
            letter-spacing: 3px;
            box-shadow: 0 0 15px  rgba(0, 213, 178, 0.8);
            color: var(--font-color-sub);
         }
      }
      & .swiper1{
         grid-area: c;
         position: relative;
         align-self: flex-end;
         text-align: center;
         width: 100%; height: auto;
         background: url(../images/sub1/banner_wraith.png) no-repeat center;
         background-size: 50%;
         background-position: 75% 90%;
         @media screen and (max-width:1024px) {
            background-size: 65%;
            background-position: 100% 50%;
         }
         @media screen and (max-width:768px) {
            background-position: 94% 50%;
         }
         & img{
            width: 65%;
            @media screen and (max-width:1024px) {
               width: 80%;
            }
            @media screen and (max-width:768px) {
               
            }
         }
      }
   }

   & .subsec2_2{
      display: flex; gap: 5%;
      justify-content: space-between;
      margin: 200px 50px 100px 50px;
      @media screen and (max-width:1024px) {
         flex-direction: column;
         margin: 100px 0;
      }
      @media screen and (max-width:768px) {
         
      }
      & >ul:first-of-type{
         width: 20%;
         display: flex; flex-direction: column; gap: 10px; justify-content: space-between;
         @media screen and (max-width:1024px) {
            width: 100%;
            flex-direction: row;
         }
         @media screen and (max-width:768px) {
            
         }
         & li{
            object-fit: contain;
            text-align: center;
            @media screen and (max-width:1024px) {
               margin-bottom: 40px;
            }
            @media screen and (max-width:768px) {
               
            }
            & img{
              width: clamp(120px, 11vw, 14rem);
              @media screen and (max-width:1024px) {
               width: 90%;
              }
              @media screen and (max-width:768px) {
                 
              }
            }
         }
      }
      & ul:last-of-type{
         width: 70%; align-self: center;
         @media screen and (max-width:1024px) {
            width: 100%;
         }
         @media screen and (max-width:768px) {
            
         }
         & li{
            padding: 20px;
            font-size: clamp(1rem, 1.2vw, 1.2rem);
            @media screen and (max-width:1024px) {
               padding: 10px 0;
            }
            @media screen and (max-width:768px) {
               
            }
         }
      }
   }
}
@keyframes leftright {
   0% { transform:translateX(00px); opacity:1;}
   100% { transform:translateX(40px); opacity:0;}
}
.sec3{
   padding-bottom: 100px;
   display: flex;
   margin-left: 100px;
   @media screen and (max-width:1024px) {
      flex-direction: row-reverse;
      margin-left: 0;
   }
   @media screen and (max-width:768px) {
      flex-direction: column-reverse;
   }
   & h3{
      padding-bottom: 30px;
      grid-area: a;
      @media screen and (max-width:1024px) {
         padding-bottom: 0;
      }
      @media screen and (max-width:768px) {
         text-align: center;
      }
   }
   & >div:first-of-type{
      width: 50%;
      @media screen and (max-width:1024px) {
         margin-right: 50px;
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         grid-auto-rows: auto;
         grid-template-areas: 
         'a c'
         'b b';
      }
      @media screen and (max-width:768px) {
         grid-template-columns: repeat(1, 1fr);
         grid-template-areas: 
         'a'
         'c'
         'b';
         width: 88%; margin: 0 6%;
      }
     
      & ul{
         @media screen and (max-width:1024px) {
            grid-area: b;
         }
         & li{
            font-size: clamp(1rem, 1.2vw, 1.3rem);
            padding-bottom: 20px;
            @media screen and (max-width:768px) {
               text-align: center;
            }
         }
         & li:first-child{
            /* font-size: 2rem; */
            font-size: clamp(1.5rem, 1.7vw, 2rem);
            
         }
      }
      & .swiper-button-next{
         grid-area: c;
         position: relative;
         right: 0; 
         top: 60px;
         width: 165px; height: 54px;
         text-align: center;
         font-size: 1.1rem;
         background: #fafafa;
         border-radius: 30px;
         transition: all .3s ease-out;
         line-height: normal;
         color: #101010;
         font-family: 'Alata';
         @media screen and (max-width:1024px) {
            top: 30px;
         }
         @media screen and (max-width:768px) {
            margin: 0px 0 70px 0;
            left: 50%; transform: translateX(-50%);
         }
      }
      & .swiper-button-next:after{display: none;}
      & .swiper-button-next:hover{
         letter-spacing: 3px;
         box-shadow: 0 0 15px  rgba(0, 213, 178, 0.8);
         color: var(--font-color-sub);
      }
   }
   & .swiper2{
      width: 50%; height: 50vw;
      align-self: flex-end;
      /* padding-top: 50px; */
      text-align: center;
      background: url(../images/sub1/banner_pathfinder.png) no-repeat center;
      background-size: 55%;
      background-position: 80% 90%;
      @media screen and (max-width:1024px) {
         text-align: left;
         background-size: 60%;
         background-position: 43% 90%;
         
      }
      @media screen and (max-width:768px) {
         width: 100%; height: 100vw;
         background-position: 90% 90%;
      }
      & #swipeLR{
         position: absolute;
         right: 29%;
         bottom: 16%;
         z-index: 9;
         width: 10%;
         animation: leftright 1.5s infinite ;
         filter: drop-shadow(0 0 6px rgba(255, 29, 29, 1));
         @media screen and (max-width:1024px) {
            left: 47%;
         }
         @media screen and (max-width:768px) {
            left: 70%;
            width: 8%;
         }
   }
      & img{
         width: 28vw;
         height: auto;
         padding-top: 40px;
         @media screen and (max-width:1024px) {
            width: 27vw;
            margin-left: 22px;
	
         }
         @media screen and (max-width:768px) {
            height: 100vw; width: auto;
            margin-left: 150px;
         }
      }
   }

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

/* 테블릿 */
@media screen and (max-width:1024px) {
	
}

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

/* 모바일 */
@media screen and (max-width:640px) {
	
}


/*  @media screen and (max-width:1024px) {
	
}
@media screen and (max-width:768px) {
	
} */