@charset "utf-8";

/* header */
header{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  gap: 7.18rem;
  padding: 1.5rem 4.06rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}


.main-visual{
  height: 67.5rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}

header .logo, header .ham{
  font-size: 1.94rem;
  color: #ffffff;
}

header .ham{
  display: none;  
  cursor: pointer;
}

header .gnb{
  display: flex;
  gap: 4.4rem;
}

.mgnb-wrap{
  z-index: 200;
  position: fixed;
  top: 0;
  right: -110%;
  width: 100%;
  height: 100%;
  background-color: #000000;
  padding: 39px 46px 0 46px;
}

.mgnb-wrap .mgnb-close{
  color: #ffffff;
  font-size: 1.94rem;
  text-align: end;
  cursor: pointer;
}

.mgnb-wrap .mgnb{
  margin-top: 44px;
  padding: 30px 0;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

.mgnb-wrap .mgnb > li{
  margin-bottom: 35px;
}

.mgnb-wrap .mgnb > li:last-child{
  margin-bottom: 0;
}

.mgnb-wrap .mgnb > li a{
  font-size: 1.38rem;
  color: #ffffff;

}


header .gnb > li > a{
  font-size: 1.44rem;
  color: #ffffff;
}

@media(max-width:1024px){

  header{
    justify-content: space-between;
}

header .ham{
  display: block;  
}


  header .gnb{
  display: none
}
}


/* main-visual */

.main-visual{
  height: 100%;
}

.main-visual .visual-tit1{
  position: absolute;
  left: 9.375%;
  top: 38.98%;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.3);
  font-size: 6.25rem;
}

.main-visual .visual-tit2{
  padding: 500px;
  position: relative;
  width: 100%;
  font-weight: 800;
  color: rgba(255, 255, 255, 1);
  font-size: 5.12rem;
  background: url(../img/visual.mp4);
  opacity: 0; 
  transform-origin: center center; 
}

@media(max-width:1024px){
  .main-visual .visual-tit2{
  font-size: 5rem;
}

.main-visual .visual-tit1{
  font-size: 3.8rem;
}
}

@media(max-width:765px){

  .main-visual .visual-tit1{
  font-size: 3.8rem;
}
  

}

.main-visual .bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;  
  z-index: -1; 
}

.visual-tit1{
  background: linear-gradient(
    to right,
    rgb(255, 255, 255) 50%,
    rgb(37, 37, 37) 50%
  );
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  margin-bottom: -250px;
  margin-left: 50px;
  line-height: 1.2;
}

.visual-txt1, .visual-txt2, .visual-txt3 {
  width: 37.5rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.visual-txt1{
  left: 60%;
}

.visual-txt2{
  left: 65%;
}

.visual-txt3{
  left: 75%;
}

.logo-section{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #ffffff;
  opacity: 0;
}

.logo-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000; 
  transform: translateY(100%); 
}

.logo-section p{
  text-align: center;
  font-size: 6.35rem;
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%,-50%);
  letter-spacing: -0.07em; 
}

.logo-section p span {
  display: inline-block;   
  transform: translateY(50px); 
  font-weight: 800;
  font-size: 6.35rem;
}

.logo-section p .logo-icon {
  margin-right: 2rem;
  font-size: 7.8rem;
  font-weight: normal;
}

@media(max-width:765px){
  .logo-section p .logo-icon {
  font-size: 5rem;
}

.logo-section p span {
  display: inline-block;   
  font-size: 4.6rem;
}
}

@media(max-width:390px){
  .logo-section p .logo-icon {
  font-size: 4rem;
}

.logo-section p span {
  display: inline-block;   
  font-size: 3.6rem;
}
}

/* section01 */
.section01{
  background-color: #000000;
  padding: 6.25rem 0 51rem 0;
}
.section01-wrap{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem; 
}

.section01-wrap > ul{
  display: flex;
}

.section01 .section01-iphone{
  gap: 10.32rem;
  margin-bottom: 18rem;
}

.section01 .section01-iphone .section01-txt{
  margin-top: 11.25rem;
}

.section01 .section01-iphone .iphone-img{
  width: 32.6rem;
  height: 33.6rem;
  border-radius: 2.6rem;
  overflow: hidden;
  position: relative;
}

.section01-wrap > ul > li img{
  height: 100%;
  position: absolute;
  top: 0; 
  left: 50%;
  transform: translateX(-50%);
}

.section01 .section01-txt{
  padding-top: 12rem;
  font-size: 3.76rem;
  color: #ffffff;
  font-weight: 700;
}

.section01 .airpods-img{
  width: 53rem;
  height: 45.37rem;
  border-radius: 3rem;
  overflow: hidden;
  position: relative;
}

.section01 .section01-airpods{
  position: relative;
  justify-content: flex-end;
}

.section01 .airpods-img img{
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
}

.iphone-img img,
.airpods-img img {
  filter: grayscale(100%);
  transition: filter 0.8s ease;
}

.section01 .section01-airpods .section01-txt{
  font-size: 3.6rem;
  color: #ffffff;
  font-weight: 700;
  position: absolute;
  top: 40%;
  left: 0;
  z-index: 20;
}

@media(max-width:1024px){

  .section01{
    padding: 0 9.68rem 19rem 9.68rem;
  }

  .section01 .section01-iphone .iphone-img{
  width: 17.37rem;
  height: 17.87rem;
  border-radius: 1.37rem;
}

.section01 .airpods-img{
  width: 28.25rem;
  height: 24.18rem;
  border-radius: 1.56rem;
}

.section01 .section01-iphone{
  gap: 5.62rem;
  margin-bottom: 11.37rem;
}

.section01 .section01-iphone .section01-txt{
  margin-top: 6.25rem;
}


.section01 .section01-txt{
  font-size: 1.87rem;
}

.section01 .section01-airpods .section01-txt{
  font-size: 1.87rem;
}
}

@media(max-width:765px){
    .section01{
    padding: 0 2rem 19rem 2rem;
  }
}

/* section02 */
.section02{
  width: 100%;
  height: 98.75rem;
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
}

.section02 .section02-cont{
  width: 100%;
  text-align: center;
  color: #ffffff;
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}

.section02 .section02-cont .section02-logo{
  font-size: 9rem;
  margin-bottom: 1rem;
}

.section02 .section02-cont .section02-cont-tit{
  font-size: 1.9rem;
}

.section02 .section02-img{
  position: relative;
  width: 15rem;
  height: 22rem;
  overflow: hidden;
  opacity: 0.6;
  transform: scale(1.2);
}

.section02 .section02-img img{
  width: 100%;
  position: absolute;
}


.section02 .section02-img1 img{
  top: -50px;
}

.section02 .section02-img2 img{
  top: -50px;
}


.section02 .section02-img3 img{
  width: auto;
  height: 100%;
  left: -180px;
}

.section02 .section02-img5 img{
  width: auto;
  height: 100%;
}

.section02 .section02-img1{
  position: absolute;
  top: 0;
  left: 0;
}

.section02 .section02-img2{
  position: absolute;
  top: 5.73%;
  right: 0;
}

.section02 .section02-img3{
  position: absolute;
  top: 21%;
  left: 31%;
}

.section02 .section02-img4{
  position: absolute;
  top: 49%;
  left: 0;
}

.section02 .section02-img5{
  position: absolute;
  top: 49%;
  right: 0;
}

@media(max-width:1024px){

.section02 .section02-cont .section02-logo{
  font-size: 7rem;
}

.section02 .section02-cont .section02-cont-tit{
  font-size: 1.5rem;
}

}

@media(max-width:650px){
  .section02 .section02-cont{
    padding: 50px;
  }
}

@media(max-width:390px){
  .section02 .section02-cont{
    padding: 20px;
  }
}

/* section03 */
.section03 {
  position: relative;
  width: 100%;
  height: 100vh; 
  overflow: hidden;
}

.section03-wrapper {
  display: flex;         
  width: 100%;          
  height: 100vh;
}

.section03-video,
.section03-cont {
  flex: 0 0 100vw;       
  height: 67.5rem;        
}

.section03-video {
  position: relative;
  width: 100vw;   
  height: 100vh;  
  flex: 0 0 100vw; 
  overflow: hidden;
  background-color: rgba(0,0,0,0.3);
}


.section03-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;     
  transform: translate(-50%, -50%);
  z-index: -1;       
}

.section03-cont{
  display: flex;
  height: 100%;
}

.section03-cont .section03-left {
  position: relative; 
  width: 50%;
  background: url(../img/max_02.png) no-repeat center;
  background-position: center 305px;
  background-size: 671px auto;
}


.section03-cont .section03-left .section03-left-txt{
  margin-top: 22.6rem;
  color: #ffffff;
  text-align: center;
}

.section03-cont .section03-left .section03-left-txt h3{
  font-size: 2.5rem;
  margin-bottom: 1.25rem;
}

.section03-cont .section03-left .section03-left-txt p{
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}


.section03-cont .section03-left .section03-btn a{
  display: inline-block;
  font-size: 1.25rem;
  color: #ffffff;
  padding: 0.6rem 1.8rem;
  border-radius: 3rem;
  border: 2px solid #ffffff;
  font-weight: 500;
  transition: all 0.5s;
}

.section03-cont .section03-left .section03-btn a:hover{
  background-color: #ffffff;
  color: #000000;
}

.section03-cont .section03-right{
  background: url(../img/max_01.jpg) no-repeat center / cover;
  width: 50%;
}

.section03-tit{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.section03-tit h3{
  font-weight: 800;
  font-size: 4rem;
  margin-bottom: 2rem;
}

.section03-tit p{
  font-size: 3rem;
}

@media(max-width:765px){
.section03-cont .section03-left {
  width: 100%;
}

  .section03-right{
    display: none;
  }

}

@media(max-width:600px){

  .section03-tit h3{
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.section03-tit p{
  font-size: 2rem;
}
}

/* @media(max-width:390px){
  .section03-cont{
  height: 50%;
}
} */

.section04 {
  width: 100%;
  height: 67.5rem;
  background: #000000;
  position: relative;
  overflow: hidden;
}

.section04-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/iphone16.png) no-repeat center / cover;
  clip-path: circle(0% at center); 
  z-index: 2;
}

.section04 .section04-tit {
  position: relative;
  z-index: 3;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.section04 .section04-tit h2{
  font-size: 6.8rem;
  margin-bottom: 1.5rem;
}

.section04 .section04-tit p{
  font-size: 3.4rem;
}

@media(max-width:500px){
  .section04 .section04-tit h2{
  font-size: 5rem;
  margin-bottom: 0.9rem;
}

.section04 .section04-tit p{
  font-size: 2.5rem;
}
}

/* section05 */

.section05{
  width: 100%;
  height: 30rem;
  overflow: hidden;
  position: relative;
}

.section05 .section05-bg{
  width: 100%;
  position: absolute;
  bottom: 550px;
  left: 0;
  position: relative;
}

.section05 .section05-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3); 
  pointer-events: none; 
}

.section05 .section05-bg img{
  width: 100%;
  height: auto;
}

.section05 .section05-tit h2{
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media(max-width:1400px){
  .section05 .section05-bg{
  bottom: 0;
}
}

/* footer */
footer{
  max-width: 1460px;
  margin: 0 auto;
  padding: 8rem 0;
  color: #ffffff;
  font-weight: 400;
}

footer .f-shop{
  font-size: 1rem;
}

footer .f-shop::after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
  margin: 2.18rem 0 2.6rem 0;
}

footer .f-flex{
  display: flex;
  gap: 3.12rem;
  margin-bottom: 3.12rem;
}

footer .f-flex > li > ul{
  display: flex;
  gap: 1.6rem;
}

footer .f-flex > li > ul > li{
  position: relative;
}

footer .f-flex > li > ul > li a{
  font-size: 0.8rem;
}

footer .f-flex > li > ul > li::after{
  content: "";
  display: block;
  background-color: #ffffff;
  width: 0.85px;
  height: 0.68rem;
  position: absolute;
  top: 53%;
  right: -13px;
  transform: translateY(-50%);
}

footer .f-flex > li > ul > li:last-child::after{
  display: none;
}

footer .f-info span{
  margin-right: 1.25rem;
}

@media(max-width:1460px){
  footer{
    padding: 8rem 1.8rem;
  }
}

@media(max-width:650px){
  footer .f-flex{
  flex-wrap: wrap;
}

footer .f-flex > li{
  width: 100%;
}

footer .f-info{
  font-size: 0.8rem;
}

}