@charset "UTF-8";

*{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
.blankdark {padding-top: 40px;}
.img-container {display: flex;justify-content: center;}
.img-container img {width: 1150px;height: 800px}
.img-containerr {display: flex;justify-content: center;margin-top: 50px;}
.img-containerr img {width: 1000px;height: 700px}

body {min-width: 1920px;min-height: 1080px;background: #000; } 
body{background: #000; overflow-x: hidden;}
html, body {height: 100%; margin: 0;}
.wrap {height: 100%;position: relative; z-index: 1;}
.mainImgWrap {position: absolute;width: 1062px;height: 1062px;left: 50%;top: -120px; z-index: -1; transform: translate(-50%,0);}
.mainImgWrap {animation: mainImg1 1s infinite alternate;}
/* @keyframes mainImg1 {
  0% {transform: scaleY(0.9) translate(-50%,0);;}
  100% {transform: scaleYdark(1) translate(-50%,0);;}
} */
.mainImg {}
.mainImg {animation: mainImg2 1s infinite alternate;}
/* @keyframes mainImg2 {
  0% {transform: scaleX(1);}
  100% {transform: scaleX(0.99);}
} */
.centerbox {max-width: 1650px; margin: 0 auto; position: relative; }


.section {position: relative;}

/* .section1 */
.section1 {margin-bottom: 250px; position: relative;min-height: 100vh;overflow: hidden; }
.spline-bg {position: absolute;inset: 0;z-index: 0;z-index: -5}
.spline-bg iframe {width: 100%;height: 100%;border: 0;display: block;pointer-events: none;}

.section1 .centerbox{  position: relative;z-index: 1;}
.section1 .line1 {width: 205px; height: 3px; background-color: #fff;margin-top: 130px;}
.section1 .line2 {width: 205px; height: 3px; background-color: #fff;}
.section1 .text_box{color: #fff;z-index: 2;position: relative;}
.section1 .text_box h2{font-size: 130px;margin-top: 130px;}
.section1 .text_box h3{font-size: 130px;}
.section1 .text_box h4{font-size: 130px;margin-bottom: 130px;}
.section1 p{font-size: 40px;margin-top: 30px;color: #fff;}
.section1 img{}
/* .centerbox {border: 1px solid lime;} */
.section6 .centerbox {position: relative; }
.section7 .centerbox {position: relative; }


/* .section2 */
.section2 {position: relative;padding:250px 0;position: relative;}
.section2 .centerbox {display: flex;justify-content: space-between; gap: 150px;;}

.section2 .content_box {width: 600px; flex-grow: 1;}
.section2 .double-line {border-top: 2px solid #fff; border-bottom: 2px solid #fff;
  height: 3px;width: 205px;margin-bottom: 30px;}
.section2 .textbox1 {display: flex; justify-content: flex-start; 
    gap: 40px; margin-bottom: 15px;}
.section2 .textbox1 P{color: #fff; font-size: 25px; margin-bottom: 80px;}
.section2 .textbox1 span {color: #fff;font-size: 25px;} 
.section2 .textbox1 .date {font-weight: 700; min-width: 280px;color: #fff;line-height: 50px;}

.section2 .tbox2{margin-top: 150px; position: relative;}
.section2 .tbox2 .graph_box {position: absolute; right: 0; top: 0;}
.section2 .tbox3{margin-top: 150px;}

.section2 .tbox3 .textbox1 a{color: #fff;font-size: 25px;}
.section2 .graph_box {}
/* .section2 img{position: absolute;bottom: 180px;left: 530px;} */
.section2 .img_box {position: relative;}
.section2 .img_box .Squirrel{position: absolute;left: 500px;top: 350px;}


/* .section3 */
.section3 {padding:250px 0;}
.section3 h1{font-size: 80px;color: #C0C0C0;display: flex;
  justify-content: center;margin-bottom: 150px;}

.section3 .skill-box{display: flex;justify-content: center; justify-content: center;}
.skill-box li{display: flex;justify-content: space-between;
  display: inline-block; padding: 10px 20px;         
  border: 2px solid #A9A9A9;color: #fff; font-weight: bold;
  border-radius: 10px; font-size: 18px;margin-right: 20px;margin-bottom: 20px;;}
 
  
/* .section4 */
.section4{display: flex;flex-direction: column;align-items: center;align-items: center; padding:50px 0;}
.section4 h1{font-size: 80px;color: #C0C0C0;display: flex; justify-content: center;margin-bottom: 30px;}
.section4 .one1 {width: 1650px;display: flex;justify-content: space-between;justify-content: space-between; }
.section4 .one1 .content_box1 {margin-bottom: 50px; }
.section4 .one1 .title{font-size: 40px;color: #fff;margin-top: 150px;margin-bottom: 22px;}
.section4 .one1 .line1{width: 205px; height: 3px; background-color: #fff;}
.section4 .one1 .text_box{margin-top: 40px;}
.section4 .one1 .text_box .title1{margin-bottom: 25px;;display: flex;;font-size: 20px;color: #fff;}
.section4 .one1 .text_box .title1 .label{min-width: 200px;gap: 20px;;}
.section4 .one1 .text_box .title1 .text .swatch{display: inline-block;width: 20px;height: 20px;
    border-radius: 50%;margin-right: 6px;background: var(--c);}
.section4 .one1 .text_box .title1 .btn_title{color: #555;border: 1px solid #000;}
/* .section4 .one1 .computer img{width: 750px;;height: 750px}    */

.section4 .one2 {padding:250px 0;;display: flex;  width: 1650px;
   align-items: center;gap: 180px;;;padding: 40px;justify-content: space-between}
.section4 .one2 .content_box2 {margin-bottom: 50px;}
.section4 .one2 .title{font-size: 60px;color: #fff;;margin-bottom: 22px;}
.section4 .one2 .line1{width: 205px; height: 3px; background-color: #fff;}
.section4 .one2 .text_box{margin-top: 40px;}
.section4 .one2 .text_box .title1{margin-bottom: 25px;;display: flex;;font-size: 20px;color: #fff;}
.section4 .one2 .text_box .title1 .label{min-width: 200px;gap: 20px;;}
.section4 .one2 .text_box .title1 .text .swatch{display: inline-block;width: 20px;height: 20px;
    border-radius: 50%;margin-right: 6px;background: var(--c);}
/* .section4 .one2 .computer img{width: 750px;; height: auto;}  */

.section4 .one3 {padding:250px 0;;display: flex;  width: 1650px;
   align-items: center;gap: 100px;;;padding: 40px;justify-content: space-between;}
.section4 .one3 .content_box3 {margin-bottom: 50px;}
.section4 .one3 .title{font-size: 60px;color: #fff;;margin-bottom: 22px;}
.section4 .one3 .line1{width: 205px; height: 3px; background-color: #fff;}
.section4 .one3 .text_box{margin-top: 40px;}
.section4 .one3 .text_box .title1{margin-bottom: 25px;;display: flex;;font-size: 20px;color: #fff;}
.section4 .one3 .text_box .title1 .label{min-width: 200px;gap: 20px;;}
.section4 .one3 .text_box .title1 .text .swatch{display: inline-block;width: 20px;height: 20px;
    border-radius: 50%;margin-right: 6px;background: var(--c);}
/* .section4 .one3 .computer img{width: 750px;; height: auto;}  */


.section4 .one4 {padding:250px 0;;display: flex;  width: 1650px;
   align-items: center;gap: 100px;;;padding: 40px;justify-content: space-between}
.section4 .one4 .content_box4 {margin-bottom: 50px;}
.section4 .one4 .title{font-size: 60px;color: #fff;;margin-bottom: 22px;}
.section4 .one4 .line1{width: 205px; height: 3px; background-color: #fff;}
.section4 .one4 .text_box{margin-top: 40px;}
.section4 .one4 .text_box .title1{margin-bottom: 25px;;display: flex;;font-size: 20px;color: #fff;}
.section4 .one4 .text_box .title1 .label{min-width: 200px;gap: 20px;;}
.section4 .one4 .text_box .title1 .text .swatch{display: inline-block;width: 20px;height: 20px;
    border-radius: 50%;margin-right: 6px;background: var(--c);}
/* .section4 .one4 .computer img{width: 750px;; height: auto;}  */

.section4 .one5 {padding:250px 0;;display: flex;  width: 1650px;
   align-items: center;gap: 150px;;;padding: 40px;justify-content: space-between;}
.section4 .one5 .content_box5 {margin-bottom: 50px;}
.section4 .one5 .title{font-size: 60px;color: #fff;;margin-bottom: 22px;}
.section4 .one5 .line1{width: 205px; height: 3px; background-color: #fff;}
.section4 .one5 .text_box{margin-top: 40px;}
.section4 .one5 .text_box .title1{margin-bottom: 25px;;display: flex;;font-size: 20px;color: #fff;}
.section4 .one5 .text_box .title1 .label{min-width: 200px;gap: 20px;;}
.section4 .one5 .text_box .title1 .text .swatch{display: inline-block;width: 20px;height: 20px;
    border-radius: 50%;margin-right: 6px;background: var(--c);}
/* .section4 .one5 .computer img{width: 750px;; height: auto;}  */

.section4 .one6 {
    padding: 250px 0;
    display: flex;  
    width: 1650px;
    align-items: center;
    gap: 180px;
    padding: 40px;
    justify-content: space-between;
}

.section4 .one6 .content_box6 {
    margin-bottom: 50px;
}

.section4 .one6 .title {
    font-size: 60px;
    color: #fff;
    margin-bottom: 22px;
}

.section4 .one6 .line1 {
    width: 205px; 
    height: 3px; 
    background-color: #fff;
}

.section4 .one6 .text_box {
    margin-top: 40px;
}

.section4 .one6 .text_box .title1 {
    margin-bottom: 25px;
    display: flex;
    font-size: 20px;
    color: #fff;
}

.section4 .one6 .text_box .title1 .label {
    min-width: 200px;
    gap: 20px;
}

.section4 .one6 .text_box .title1 .text .swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--c);
}
.section4 .label {color: #555;} 


.section4 .one {margin-bottom: 200px; position: relative;}
.section4 .one .bg_circle {content: ""; position: absolute; width: 50%; height: 100%; border-radius: 50%; background: rgba(128,0,128,1); right: -100px; top: -50px; filter: blur(50px); opacity: 0;}
.section4 .one:nth-child(2n) .bg_circle {right: auto; left: -100px;}

.section4 .content_box {flex-grow: 1; }


.section4 .computer {
    max-width: 750px; 
    position: relative;
    text-align: center; 
    left: -100px; 
    transition: 2s;
    z-index: 1; /* 부모 요소에 z-index 설정 */
    transform: translateZ(0); /* 3D 컨텍스트 강제 생성 */
}

.section4 .computer.on {
    left: 0px;
}

.section4 .computer .screen_box {
    width: 100%; 
    width: 750px; 
    height: 520px; 
    display: block; 
    transform-origin: left; 
    transform-style: preserve-3d; 
    perspective: 800px;
    z-index: 2; /* screen_box에 z-index 설정 */
    position: relative;
}

.section4 .computer .screen {
    position: absolute !important; 
    width: 690px; 
    height: 470px; 
    background: red; 
    top: 15px; 
    left: 15px; 
    border-radius: 10px; 
    overflow: hidden;
    z-index: 999 !important; /* 매우 높은 값 */
    transform: translateZ(10px) !important; /* 3D로 앞쪽에 배치 */
} 
.section4 .computer .monitor {
    transition: 1s; 
    position: relative;  
    z-index: 30; /* 모니터 본체 */
    width: 720px; 
    height: 567px;
}

.section4 .computer.on .monitor {
    transform: rotateY(-15deg);
}

.section4 .computer .com1 {
    position: relative;
    width: 100%; 
    z-index: 40; /* 모니터 프레임 */
}

.section4 .computer .com2 {
    position: relative;
    max-width: 350px; 
    margin-left: 100px;
    margin-top: -10px; 
    z-index: 1; /* 받침대를 가장 뒤로 */
}

/* 짝수번째 요소 처리 */
.section4 .one:nth-of-type(2n) .computer {
    left: 100px;
}

.section4 .one:nth-of-type(2n) .computer.on {
    left: 0;
}

.section4 .one:nth-of-type(2n) .computer.on .monitor {
    transform: rotateY(15deg);
}

/* .section4 .one:nth-of-type(2n) .computer .com2 {
    transform: rotateY(190deg);
    z-index: 1; 
} */
.section4 .one:nth-of-type(2n) .computer .com2 {
  z-index: 1; /* 짝수번째도 받침대를 더 뒤로 */
  left: -100px;
}


.section4 .computer .webimg {
    position: absolute; 
    left: 0;
    margin-top: -500px; 
    transition: 2s;
    z-index: 45; /* 웹 이미지도 앞으로 */
}

.section4 .computer.on .webimg {
    margin-top: 0px;
}

.section4 .computer .monitor .webimg {
    width: 100%;
    z-index: 45; /* 모니터 내부 웹 이미지 */
}


.title1 a {color: rgb(231, 82, 231);}


/* .section5 */
.section5{display: flex;flex-direction: column;align-items: center;align-items: center;padding:250px 0;}
.section5 h1{font-size: 80px;color: #C0C0C0;display: flex;
  justify-content: center;margin-bottom: 150px;}
.section5 ul{display: flex;justify-content: center;align-items: center;}
.section5 ul li{display: flex;justify-content: space-between;
  display: inline-block; padding: 10px 20px;         
  ;margin-right: 20px;margin-bottom: 20px;}
 

/* .section6 */
.section6{display: flex;flex-direction: column;align-items: center;align-items: center;
  padding:50px 0; margin:200px 0; position: relative;}
.section6 h1{font-size: 80px;color: #C0C0C0;display: flex;
  justify-content: center;margin-bottom: 50px;}
.section6 .imgbox {display: flex;justify-content: space-between;}
.section6 .imgbox .left_img{width: 100%;height: auto}
.section6 .imgbox .left_img .app_img {position: relative;}
.section6 .imgbox .left_img .big_textbox {margin-bottom: 50px;position: absolute;top: 280px; left:0px; background: rgba(0,0,0,0.7);border-radius: 70px; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(10px); padding: 65px; transform: translate(-60%,-30%);}
.section6 .imgbox .left_img .big_textbox .title{font-size: 30px;color: #fff;;margin-bottom: 22px;}
.section6 .imgbox .left_img .big_textbox .line1{width: 205px; height: 3px; background-color: #fff;}
.section6 .imgbox .left_img .big_textbox .text_box{margin-top: 40px;}
.section6 .imgbox .left_img .big_textbox .text_box .title1{margin-bottom: 25px;;display: flex;;font-size: 18px; color: #fff;}
.section6 .imgbox .left_img .big_textbox .text_box .title1 .label{min-width: 200px;gap: 20px; font-size: 16px; font-weight: normal;color: rgba(255,255,255,0.5);}
.section6 .imgbox .left_img .big_textbox .text_box .title1 .text .swatch{display: inline-block;width: 20px;height: 20px;
    border-radius: 50%;margin-right: 6px;background: var(--c);color: rgba(255,255,255,1);}

.section6 .imgbox .rigth_img{width: 100%;height: auto;}
.section6 .imgbox .rigth_img .big_textbox {margin-bottom: 50px;position: absolute;bottom: 0px; right:0px;background: rgba(0,0,0,0.7);border-radius: 70px; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(10px); padding: 65px; transform: translate(70%,20%);}
.section6 .imgbox .rigth_img .big_textbox .title{font-size: 30px;color: #fff;;margin-bottom: 22px;}
.section6 .imgbox .rigth_img .big_textbox .line1{width: 205px; height: 3px; background-color: #fff;}
.section6 .imgbox .rigth_img .big_textbox .text_box{margin-top: 40px;}
.section6 .imgbox .rigth_img .big_textbox .text_box .title1{margin-bottom: 25px;;display: flex;;font-size: 20px;color: #fff;}
.section6 .imgbox .rigth_img .big_textbox .text_box .title1 .label{min-width: 200px;gap: 20px;font-size: 16px; font-weight: normal;color: rgba(255,255,255,0.5);}
.section6 .imgbox .rigth_img .big_textbox .text_box .title1 .text .swatch{display: inline-block;width: 20px;height: 20px;
    border-radius: 50%;margin-right: 6px;background: var(--c);}

/* .section7 */
.section7 {display: flex;flex-direction: column;align-items: center;align-items: center;
  padding:50px 0; margin: 200px 0; position: relative;}
.section7 .centerbox {width: 1600px;}
.section7 h1{font-size: 80px;color: #C0C0C0;display: flex;
  justify-content: center;margin-bottom: 150px;}
.section7 .imgbox .top_img{width: 100%;height: auto; position: relative; text-align: right;}
.section7 .imgbox .top_img .app_img {}
.section7 .imgbox .top_img .big_textbox {margin-bottom: 50px; position: absolute; width: 54%; height: 120%; top: 50%; left:0; background: rgba(0,0,0,0.7);border-radius: 70px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: 65px; transform: translate(0,-50%); box-sizing: border-box; text-align: left;}
.section7 .imgbox .top_img .big_textbox .title{font-size: 30px;color: #fff;;margin-bottom: 22px;}
.section7 .imgbox .top_img .big_textbox .line1{width: 205px; height: 3px; background-color: #fff;}
.section7 .imgbox .top_img .big_textbox .text_box{margin-top: 40px;}
.section7 .imgbox .top_img .big_textbox .text_box .title1{margin-bottom: 25px;;display: flex;;font-size: 20px;color: #fff;}
.section7 .imgbox .top_img .big_textbox .text_box .title1 .label{min-width: 200px;gap: 20px;font-size: 16px; font-weight: normal;color: rgba(255,255,255,0.5);}
.section7 .imgbox .top_img .big_textbox .text_box .title1 .text .swatch{display: inline-block;width: 20px;height: 20px;
    border-radius: 50%;margin-right: 6px;background: var(--c);}

.section7 .imgbox .bottom_img{width: 100%;height: auto; position: relative; margin-top: 150px;}
.section7 .imgbox .bottom_img .big_textbox {margin-bottom: 50px; position: absolute; width: 54%; height: 120%; top: 50%; right:0; background: rgba(0,0,0,0.7);border-radius: 70px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: 65px; transform: translate(0,-50%); box-sizing: border-box; text-align: left;}
.section7 .imgbox .bottom_img .big_textbox .title{font-size: 30px;color: #fff;;margin-bottom: 22px;}
.section7 .imgbox .bottom_img .big_textbox .line1{width: 205px; height: 3px; background-color: #fff;}
.section7 .imgbox .bottom_img .big_textbox .text_box{margin-top: 40px;}
.section7 .imgbox .bottom_img .big_textbox .text_box .title1{margin-bottom: 25px;;display: flex;;font-size: 20px;color: #fff;}
.section7 .imgbox .bottom_img .big_textbox .text_box .title1 .label{min-width: 200px;gap: 20px;font-size: 16px; font-weight: normal;color: rgba(255,255,255,0.5);}
.section7 .imgbox .bottom_img .big_textbox .text_box .title1 .text .swatch{display: inline-block;width: 20px;height: 20px;
    border-radius: 50%;margin-right: 6px;background: var(--c);}

/* .section8 */
.section8{display: flex;flex-direction: column;align-items: center;align-items: center;
  padding:50px 0;margin: 200px 0; position: relative;}
.section8 h1{font-size: 80px;color: #C0C0C0;display: flex;
  justify-content: center;margin-bottom: 200px;}
.section8 video {width: 500px; height: auto; }


/* .section9 */
.section9{display:flex;flex-direction:column;align-items:center;margin-top:350px;position:relative; }
.section9 h1{font-size:80px;color:#C0C0C0;text-align:center;margin-bottom:40px;position:static;margin-bottom: 150px;}
.section9 .centerbox {min-width: 1000px;}
.photo-wall{display:grid;grid-template-columns:repeat(6,1fr);
  gap:16px;width:100%;max-width:850px;margin:0 auto;}

.photo{position:relative;margin:0;border-radius:12px;
transform:none !important; /* 예전 transform 무력화 */z-index:auto !important; }

.photo img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease; position: absolute;  }

.photo:hover img{transform:scale(1.1);}

/* 대표컷 크게(2x2) + 나머지 정사각 */
.photo:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:1 / 1;}
.photo:not(:first-child){aspect-ratio:1 / 1;}

/* 반응형(선택) */
@media (max-width:1200px){ .photo-wall{grid-template-columns:repeat(5,1fr);} }
@media (max-width:768px){ .photo-wall{grid-template-columns:repeat(3,1fr);} }

/* 13장의 사진을 원형으로 배치 */
/* .photo:nth-child(1)  { transform: rotate(0deg) translate(-180%, -200%) rotate(0deg); }
.photo:nth-child(2)  { transform: rotate(27deg) translate(-90%, -130%) rotate(-27deg);
width: 300px; height: 200px;  }
.photo:nth-child(3)  { transform: rotate(54deg) translate(-100%, -230%) rotate(-54deg);z-index: -1; }
.photo:nth-child(4)  { transform: rotate(81deg) translate(-140%, -260%) rotate(-81deg);z-index: -2; }
.photo:nth-child(5)  { transform: rotate(108deg) translate(-150%, -240%) rotate(-108deg); }
.photo:nth-child(6)  { transform: rotate(135deg) translate(-155%, -220%) rotate(-135deg); }
.photo:nth-child(7)  { transform: rotate(162deg) translate(-160%, -210%) rotate(-162deg); }
.photo:nth-child(8)  { transform: rotate(189deg) translate(-180%, -180%) rotate(-189deg); }
.photo:nth-child(9)  { transform: rotate(216deg) translate(-160%, -150%) rotate(-216deg); }
.photo:nth-child(10) { transform: rotate(243deg) translate(-160%, -170%) rotate(-243deg); }
.photo:nth-child(11) { transform: rotate(270deg) translate(-160%, -190%) rotate(-270deg); }
.photo:nth-child(12) { transform: rotate(297deg) translate(-200%, -200%) rotate(-297deg); }
.photo:nth-child(13) { transform: rotate(324deg) translate(-250%, -190%) rotate(-324deg); }
.photo:nth-child(14) { transform: rotate(324deg) translate(-260%, -300%) rotate(-354deg);z-index: -1; } */


/* .section10 */
.section10 {padding:50px 0; margin-top: 150px; position: relative;display: flex;}
.section10 .line{position: absolute;bottom: 420px;; right:10px; width: 1100px;height: 3px;
  background-color: #9D9D9D;z-index: 10;}
.section10 img {}
.section10 .left_textbox{position: absolute;color: #9D9D9D;font-size: 100px;top: 20px;
    margin-top: 80px;}
.section10 .left_textbox h3 {color: #9D9D9D;font-size: 20px;margin-left: 10px;}

.section10 .right_textbox{position: absolute;bottom: 400px;right: 10px;text-align: end;}

.section10 .right_textbox p{color:#9D9D9D;font-size: 40px;}
.section10 .right_textbox .number{color: #9D9D9D;font-size: 20px;}


.kkm span {
      display: inline-block;
      animation: wave 1.2s ease-in-out infinite;
      transform-origin: bottom center;
    }

    @keyframes wave {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }