@import url(./font.css);
@import url(reset.css);

 html {overflow-x: hidden; /* 세로 스크롤만 */}
html {  scroll-behavior: auto;}
.centerbox { margin: 0 auto; }


  .swiper {
      width: 100%;
      height: 100%;
      
      display: flex;
      justify-content: start;
      margin-top: 150px;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #b8adad;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 1 !important; 
      width: 100%;
      

    }

    .swiper-slide img {
      display: block;
     
      
      object-fit: cover;
    }

    



    nav.float_menu { position: fixed; width: 80px; height: 300px; right: 50px; top: 200px; z-index: 100;  ;} 
    nav.float_menu a { position: relative; display: block; text-align: center; transition: .3s;  font-family: 'Noto Serif KR'; font-weight: 600; color: #333; padding: 5px 0; width: 100%;
    display: flex; justify-content: end;} 
    /* nav.float_menu .title { color: #fff; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); font-size: 13px; letter-spacing: -8px; transition: .3s; opacity: 0; }  */
    nav.float_menu:hover a { opacity: 0.4; } 
    nav.float_menu a:hover { opacity: 1; } 
    nav.float_menu a:hover .title { opacity: 1; } 
    nav.float_menu a i {font-style: normal; } 
    nav.float_menu a.on span {color: #0077ff;font-weight: bold;} 


/* 컴포넌트 */

.titleposititon {display: flex; align-items: end; margin-top: 150px; }

.title1 { font-size: 70px;
    font-family: "Noto Serif KR", serif;
    font-weight: 600;
    color: #2F2F2F;}

.title2 {
    color: #474747; font-family: "Noto Serif KR", serif; font-weight: 400; font-size: 30px;
}

/* ---------------타이틀 제목,소제목 ---------- */


.btn { 
  
  display:inline-block ;
  width: 140px; 
  height: 42px; border-radius: 10px; background: #000; display: flex; justify-content: center; align-items: center; font-size: 20px;  font-family: "Noto Serif KR", serif; font-weight: 400;}




/* body { background-attachment: fixed; } */
#visual { width: 100%; height: 100vh;  position: relative; background: url(../images/secmain.png) center top; background-attachment: fixed; }

#visual .centerbox {}

#visual .textbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#visual .textbox h2 { font-family: "Noto Serif KR", serif; font-weight: 400; font-size: 200px; color: #474747;}
#visual .textbox p { font-family: "Noto Serif KR", serif; font-weight: 400; color: #474747;  font-size: 30px; float: right; letter-spacing: -1px;}




.sec1 { overflow: hidden; height: 100vh; position: relative;background: url(../images/secmain.png) center top no-repeat;}
.sec1 .centerbox { max-width: 1920px; }
.sec1 .textbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 11; width: 100%; text-align: center;}
.sec1 .textbox span { color: #ffffff;}
.sec1 .textbox h3 { font-family: "Noto Serif KR", serif; font-weight: 600; font-size: 40px;  color: #ffffff; letter-spacing: -1px; padding-bottom: 65px;}
.sec1 .textbox p {font-family: "Noto Serif KR", serif; font-size: 30px;font-weight: 400; color: #dfdfdf; letter-spacing: -1px;  padding-bottom: 54px;}

.sec1screen { width: 100%; height: 100vh; position: absolute; top: 0 ; left: 0; z-index: 10; background: #000000; opacity: 0.4;}
.sec1 video { transform: scale(1.7);  object-fit: cover; object-position: bottom; position: absolute; top: -40%;} 




.sec2 { height: 100vh; background: #FEFEFE;}
.sec2 .centerbox {max-width: 1700px; display: flex; margin-left: 160px;}


.sec2 .centerbox .infowrap {}
.sec2 .centerbox .info { display: flex;  width: 710px; margin-top: 87px;} 
.sec2 .centerbox .info .imgbox { }

.sec2 .centerbox .info .namebox {  margin-left: 104px;}
.sec2 .centerbox .info .namebox h3 {font-family: "Noto Serif KR", serif; font-size: 30px;font-weight: 500; color: #1A1B1D;}
.sec2 .centerbox .info .namebox h3 span { font-size: 18px;}
.sec2 .centerbox .info .namebox p.enname { font-family: 'Pretendard'; font-weight: 300; font-size: 18px; color: #1A1B1D;}
.sec2 .centerbox .info .namebox p.birt {  font-family: 'Pretendard'; font-weight: 400; font-size: 18px; color: #4A4A4A; margin-top: 5px;}


.sec2 .centerbox .info .telbox {margin-top: 38px; text-align: left;}
.sec2 .centerbox .info .telbox li {   font-family: 'Pretendard'; font-weight: 700; font-size: 20px; color: #1A1B1D; margin-bottom: 28px;}
.sec2 .centerbox .info .telbox li span {  font-family: 'Pretendard'; font-weight: 300; color: #4A4A4A; margin-left: 72px; text-align: right;}


.sec2 .centerbox .textbox { margin-left: 116px;  }
.sec2 .centerbox .textbox .education {margin-top: 211px; padding-left: 63px; padding-bottom: 40px; position: relative;}
.sec2 .centerbox .textbox .education h2 {font-family: "Noto Serif KR", serif; color: #2F439C; font-size: 30px;  font-weight: 500; margin-bottom: 27px;}
.sec2 .centerbox .textbox .education p { color: #4A4A4A; font-size: 20px; margin-bottom: 20px;}
.sec2 .centerbox .textbox .education p span { color: #848484; font-size: 16px;}

.sec2 .centerbox .textbox .education span.left1 {position: absolute; width: 1px; height: 100%; background: #000;left: 0; bottom: 0;}
.sec2 .centerbox .textbox .education span.bottom1 {position: absolute; width: 100%; height: 1px; background: #000;  right: 0; bottom: 0;}
.sec2 .centerbox .textbox .Lisence span.left1 {position: absolute; width: 1px; height: 100%; background: #000;left: 0; top: 0;}

.sec2 .centerbox .textbox .Lisence { padding-top: 27px; padding-left: 63px; position: relative;}
.sec2 .centerbox .textbox .Lisence h2 { font-family: "Noto Serif KR", serif; color: #2F439C; font-size: 30px;  font-weight: 500; margin-bottom: 27px;}
.sec2 .centerbox .textbox .Lisence p { color: #4A4A4A; font-size: 20px; margin-bottom: 20px;}
.sec2 .centerbox .textbox .Lisence p span { color: #848484; font-size: 16px;}


.sec2 .centerbox .textbox .education p,
.sec2 .centerbox .textbox .education p span,
.sec2 .centerbox .textbox .Lisence p,
.sec2 .centerbox .textbox .Lisence p span {
  font-family: 'Pretendard'; font-weight: 300;
}

.sec3 { height: 100vh;}
.sec3 .centerbox {position: relative; max-width: 1600px;  }
.sec3 .titlebox { margin-top: 154px; display: flex; align-items: center; margin-bottom: 48px;}
.sec3 .titlebox p {font-family: "Noto Serif KR", serif; font-weight: 400;  color: #1A1B1D; font-size: 20px;}
.sec3 .titlebox .titleline { width: 86px; height: 1px; background: #1A1B1D; margin-right: 12px;}


.sec3 .visualinfo { display: flex;}
.sec3 .visualinfo img { height: 359px;}
.sec3 .visualinfo .sildebox { margin-left: 49px;  margin-top: 32px;}
.sec3 .visualinfo .sildebox img { width: 240px; height: 240px; object-fit: cover; margin-right: 28px; }
.sec3 .fav {   }
.sec3 .fav p {font-family: "Noto Serif KR", serif; font-weight: 400; font-size: 20px ; color: #1A1B1D; margin-top: 17px; }
.sec3 .grpwrap { position: absolute; top: 0; right: 40%; }
.sec3 .chart-wrap {   width: min(500px, 92vw);   margin: 40px auto;aspect-ratio: 1 / 1; }
.sec3  canvas { width: 100% !important; height: 100% !important; }      
.sec3 .textbox { margin-top: 200px;}
.sec3 .textbox p { font-family: "Noto Serif KR", serif; font-size: 20px; font-weight: 400; color: #1A1B1D;}
.sec3 .textbox p:nth-child(1) { margin-bottom: 41px;}
.sec3 .textbox p:nth-child(2) { margin-bottom: 15px;}
.sec3 .textbox p:nth-child(3) { margin-bottom: 41px;}
.sec3 .textbox p:nth-child(4) { margin-bottom: 15px;}
.sec3 .textbox p:nth-child(5) { margin-bottom: 41px;}
.sec3 .textbox p:nth-child(6) { padding-bottom: 200px;}

.sec3 .part2 { position: relative; max-width: 1700px; }
.sec3 .videobox {width: 890px; height: 429px; border-radius: 81px; overflow: hidden; position: absolute; right: 0; bottom: 23%;}
.sec3 video {width: 100%; height: 100%;  object-fit: cover; } 
 
   
.sec4 { height: 100vh; padding-bottom: 50px;}
.sec4 .centerbox{ }
.sec4 .part1 {display: flex; max-width: 1700px; margin: 0 auto;}
.sec4 .titlebox{    height: 100%;}
.sec4 .titlebox p { }
.sec4 .centerbox .skillbox { display: flex; margin-left: 190px;   margin-top: 150px;}
.sec4 .centerbox .skillbox h2 {font-family: "Noto Serif KR", serif; font-size: 20px; font-weight:700; color:#1A1B1D ; margin-bottom: 30px;}
.sec4 .centerbox .skillbox h3 {font-family: "Noto Serif KR", serif; font-size: 18px; font-weight:400; color:#1A1B1D ;}
.sec4 .centerbox .skillbox p {font-family: "Noto Serif KR", serif; font-size: 16px; font-weight:300; color:#474747 ; margin-bottom: 30px;}

.sec4 .centerbox .skillbox .frontbox { margin: 0 50px;}
.sec4 .centerbox .skillbox li {cursor: pointer;}
.sec4 .centerbox .skillbox li.on h3 {color: #152986;}

.sec4 .part2 {max-width: 1920px; margin: 0 auto; display: flex;}
.sec4 .part2 .imgbox{ margin-top: 50px; width: 523px; height: 397px; position: absolute; bottom: 0; left: 0;}
.sec4 .part2 .imgbox img { height: 100%; object-fit: cover;}

.sec4 .part2 .videobox { width: 740px; height: 397px; overflow: hidden; margin-left: 231px; margin-top: 50px; position: absolute; bottom: 0; right: 0;}
.sec4 .part2 .videobox video { height: 100%;    width: 100%;object-fit: cover;}



/* 섹션 쌓임 순서 */
.sec3 { position: relative; z-index: 1; }
.sec4 { position: relative; z-index: 2; }

/* 화면 높이 한 판씩 쓰는 레이아웃일 경우(권장) */
.sec3, .sec4 { min-height: 100vh; }

/* 디버깅 시 편의를 위해 배경만 예시 */
/* .sec3 { background:#111; } .sec4 { background:#222; } */


.sec5 {height: 100vh; }
.sec5 .part1 {}
.sec5 .titleposititon { }
.sec5 .part1 .leftbox .title { margin: 0; margin-left: 215px;}
.sec5 .title .subtitle {margin-left: 80px;}
.sec5  .title .sec5maintitle {color: #fefefe;font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600; margin-top: 70px; }
.sec5 .title p {color: #fefefe;  font-family: "Noto Serif KR", serif; font-size: 30px; font-weight:400;}
.sec5 .centerbox{ max-width: 1920px; margin: 0 auto;  display: flex;}
.sec5 .leftbox { background: url(../images/birds-eye-view-990437_1280.jpg); width: 443px; height: 100vh; position: relative; }
.sec5 .leftbox  .subtitle {  }
.sec5 .leftbox  .subtitle h2 { color: #fefefe;  margin-left: 150px; margin-top: 200px;  position: absolute; top: 20%; right: 0%; transform: rotate(-90deg);}  
.sec5 .part2 .textbox { margin-left: 215px; margin-top: 150px;}
.sec5 .part2 .textbox p { font-family: "Noto Serif KR", serif; font-size: 24px; font-weight:300; color: #1A1B1D; margin-bottom: 30px;} 

.sec5 .part2 .slidebox {margin-left: 200px; margin-top: 100px; overflow: hidden; position: relative;}
.sec5 .part2 .slidebox ul {display: flex; gap: 30px; padding-left: 200px; }
.sec5 .part2 .slidebox ul li {width: 550px; flex-grow: 1;}
.sec5 .part2 .slidebox ul li a h2{color: #474747; font-size: 30px;}
.sec5 .part2 .slidebox ul li a p {color: #474747;}
.sec5 .part2 .slidebox ul li a img {width: 100%;}




 
.sec6 {  position: relative;}
.sec6 .centerbox { max-width: 1500px;  display: flex; padding-top: 180px; }
.sec6 .part1 {}
.sec6 .part1 .sec6_btn{ background: #D6C190; color: #08132D;  margin-top: 40px; margin-left: 50px;}
.sec6 .part1 .titlebox {display: flex;  align-items: end; margin-bottom: 10px;}
.sec6 .part1 .titlebox h2 {font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600; color:#2F2F2F ;}
.sec6 .part1 .titlebox p {font-family: "Noto Serif KR", serif; font-size: 30px; font-weight:400; color:#474747 ;  margin-bottom:12px;}
.sec6 .part1 .title1-1  {position: relative; top: -30px;}
.sec6 .part1 .title1-1 .titlebox2{ position: absolute;  display: flex;}
.sec6 .part1 .title1-1 .titlebox2 h2{  font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600; color:#2F2F2F ;}
.sec6 .part1 .title1-1 .titlebox2 p{font-family: "Noto Serif KR", serif; font-size: 20px; font-weight:400; color:#474747 ; position: absolute; top: 70px; left: 5px; margin-top: 14px;}
.sec6 .part1 .textbox { margin-top: 150px; font-family: "Noto Serif KR", serif ; font-weight: 400; font-size: 20px; letter-spacing: -1px; }
.sec6 .part1 .textbox p { margin-bottom: 40px; color: #2F2F2F; font-family: 'Pretendard'; font-weight: 400; } 
.sec6 .part1 .textbox p span {font-family: 'Pretendard'; font-weight: 500; margin-right: 30px; ; width: 100px;  display: inline-block; color: #000; }

/* .sec67_box .slideBox {display: flex; width: 200vw;}
.sec67_box .slideBox section {width: 100vw;} */

/* .sec67_box .slideBox {padding: 100px; border-radius: 100px; overflow: hidden;}
.sec89_box .slideBox {padding: 100px; border-radius: 100px; overflow: hidden;} */

.sec6 .part1 .makers { display: flex; margin-top: 150px;}
.sec6 .part1 .makers .make1{ margin-right: 90px;}
.sec6 .part1 .makers .make1 .make1-1 { display: flex; align-items: center;}
.sec6 .part1 .makers .make1 .make1-1 em { font-style: normal; font-size: 20px ; }
.sec6 .part1 .makers .make1 .make1-1 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec6 .part1 .makers .make1 .make1-2 { display: flex; align-items: center; margin-top: 35px;}
.sec6 .part1 .makers .make1 .make1-2 em { font-style: normal; font-size: 20px ; }
.sec6 .part1 .makers .make1 .make1-2 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec6 .part1 .makers .make2 .make2-1 { display: flex; align-items: center;}
.sec6 .part1 .makers .make2 .make2-1 em { font-style: normal; font-size: 20px ; }
.sec6 .part1 .makers .make2 .make2-1 p{ margin-top: 2px; margin-left: 34px; display: flex; gap: 10px; font-size: 18px;}

.sec6 .part1 .makers .make2 .make2-2 { display: flex; align-items: center; margin-top: 35px;}
.sec6 .part1 .makers .make2 .make2-2 em { font-style: normal; font-size: 20px ; }
.sec6 .part1 .makers .make2 .make2-2 p{ margin-top: 2px; margin-left: 30px; display: flex; gap: 10px; }


.sec6 .part1 .makers .make1 .make1-1 em,
.sec6 .part1 .makers .make1 .make1-2 em,
.sec6 .part1 .makers .make2 .make2-1 em,
.sec6 .part1 .makers .make2 .make2-2 em {
  font-family: 'Pretendard'; font-weight: 600; font-size: 20px; color: #2F2F2F;
}

.sec6 .part1 .makers .make1 .make1-1 p,
.sec6 .part1 .makers .make1 .make1-2 p {
  font-family: 'Pretendard'; font-weight: 400; font-size: 18px; color: #2F2F2F;
}


.sec6 .part3 { padding-top: 300px; }

.sec6 .part3 .con1,.con2,.con3,.con4,.con5,.con6{display: flex;} 


.sec6 .part3 .con1 {margin-left: 350px;}
.sec6 .part3 .con1 .imgbox {}
.sec6 .part3 .con1 .textbox {margin-left: 40px;}
.sec6 .part3 .con1 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec6 .part3 .con1 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; }
.sec6 .part3 .con1 .textbox .line img { height: 100%;}
.sec6 .part3 .con1 .textbox .line h3 { margin-left: 20px; color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px;}


.sec6 .part3 .con2 { margin-left: 300px; margin-top: 100px;} 
.sec6 .part3 .con2 .textbox {margin-left: 40px;}
.sec6 .part3 .con2 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec6 .part3 .con2 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; margin-top: 50px; }
.sec6 .part3 .con2 .textbox .line img { height: 100%;}
.sec6 .part3 .con2 .textbox .line h3 { margin-left: 20px; color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px;}

.sec6 .part3 .con3 {}
.sec6 .part3 .con3 { margin-left: 300px; margin-top: 100px;} 
.sec6 .part3 .con3 .textbox { margin-right: 20px; margin-top: 30px;}
.sec6 .part3 .con3 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec6 .part3 .con3 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; }
.sec6 .part3 .con3 .textbox .line img { height: 100%;}
.sec6 .part3 .con3 .textbox .line h3 {  color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px; margin-right: 20px;}


.sec6 .part3 .con4 {}
.sec6 .part3 .con4 { margin-left: 300px; margin-top: 100px;} 
.sec6 .part3 .con4 .textbox {margin-left: 40px;}
.sec6 .part3 .con4 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec6 .part3 .con4 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; margin-top: 50px; }
.sec6 .part3 .con4 .textbox .line img { height: 100%;}
.sec6 .part3 .con4 .textbox .line h3 { margin-left: 20px; color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px;}


.sec6 .part3 .con5 {}
.sec6 .part3 .con5 { margin-left: 300px; margin-top: 100px;} 
.sec6 .part3 .con5 .textbox {margin-left: 40px;}
.sec6 .part3 .con5 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec6 .part3 .con5 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; margin-top: 50px; }
.sec6 .part3 .con5 .textbox .line img { height: 100%;}
.sec6 .part3 .con5 .textbox .line h3 { margin-left: 20px; color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px;}




.sec6 .part3 .con6 {}
.sec6 .part3 .con6 { margin-left: 300px; margin-top: 100px;} 
.sec6 .part3 .con6 .textbox { margin-right: 20px; margin-top: 30px;}
.sec6 .part3 .con6 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec6 .part3 .con6 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; }
.sec6 .part3 .con6 .textbox .line img { height: 100%;}
.sec6 .part3 .con6 .textbox .line h3 {  color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px; margin-right: 20px;}





/* 영상 배경 위치 *******************************/
.sec6 .part2 { position: relative;}
.sec6 .part2 .mockup_pc{ position: absolute; z-index: 10; left: 200px; top: 30px;}
.sec6 .part2 .mockup_pc .moniter { width: 590px; height: 362px; overflow: hidden; position: absolute; z-index: 10; left: 99px; top: 44px; }
.sec6 .point {  position: absolute; bottom: 0;right: 0;;}

.sec6 {position: relative; }
.sec6 .movie {width: 100%; height: 100vh;  position: absolute; right: 0; top: 0; border-radius: 0 0 0 0; overflow: hidden; z-index: -1;; }
.sec6 .movie .overlay {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.8); left: 0; top: 0; z-index: 2;}
.sec6 .movie video {width: 100%; height: 100%; object-fit: cover;}

.sec8 .part2 { position: relative;}
.sec8 .part2 .mockup_pc{ position: absolute; z-index: 10; left: 200px; top: 30px;}
.sec8 .part2 .mockup_pc .moniter { width: 590px; height: 362px; overflow: hidden; position: absolute; z-index: 10; left: 99px; top: 44px;}
.sec8 .point {  position: absolute; bottom: 0;right: 0;;}

.sec8 {position: relative; }
.sec8 .movie {width: 30%; height: 100vh;  position: absolute; right: 0; top: 0;  border-radius:30px 0 0 30px; overflow: hidden; z-index: -1;}
.sec8 .movie .overlay {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); left: 0; top: 0; z-index: 2;}
.sec8 .movie video {width: 100%; height: 100%; object-fit: cover;}



.sec7 .part2 { position: relative;}
.sec7 .part2 .mockup_pc{ position: absolute; z-index: 10; left: 200px; top: 30px;}
.sec7 .part2 .mockup_pc .moniter { width: 590px; height: 362px; overflow: hidden; position: absolute; z-index: 10; left: 99px; top: 44px;}
.sec7 .point {  position: absolute; bottom: 0;right: 0;;}

.sec7 {position: relative; }
.sec7 .movie {width: 100%; height: 100vh;  position: absolute; left: 0; top: 0;  border-radius:0 0 0 0 ; overflow: hidden; z-index: -1;}
.sec7 .movie .overlay {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.8); left: 0; top: 0; z-index: 2;}
.sec7 .movie video {width: 100%; height: 100%; object-fit: cover;}

.sec9 .part2 { position: relative;}
.sec9 .part2 .mockup_pc{ position: absolute; z-index: 10; left: 200px; top: 30px;}
.sec9 .part2 .mockup_pc .moniter { width: 590px; height: 362px; overflow: hidden; position: absolute; z-index: 10; left: 99px; top: 44px; cursor: pointer; z-index: 100; }
.sec9 .part2 .mockup_pc .moniter img {position: absolute;}
.sec9 .point {  position: absolute; bottom: 0;right: 0;;}

.sec9 {position: relative; }
.sec9 .movie {width: 100%; height: 100vh;  position: absolute; left: 0; top: 0;  border-radius:0 0 0 0 ; overflow: hidden; z-index: -1;}
.sec9 .movie .overlay {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.8); left: 0; top: 0; z-index: 2;}
.sec9 .movie video {width: 100%; height: 100%; object-fit: cover;}

/* 영상 배경 위치 ********************************/







.sec6 .movie .overlay,
.sec7 .movie .overlay,
.sec8 .movie .overlay,
.sec9 .movie .overlay,
.sec18 .movie .overlay {
  pointer-events: none;
}




.sec6 .part2 .mockup_pc .moniter img,
.sec7 .part2 .mockup_pc .moniter img,
.sec8 .part2 .mockup_pc .moniter img,
.sec9 .part2 .mockup_pc .moniter img,
.sec18 .part2 .mockup_pc .moniter img {
  position: absolute;
  left: 0;
  top: 0;          /* 시작점 */
  width: 100%;
  min-height: 110%; /* 프레임보다 약간 크게 → 스크롤 효과 보장 */
  object-fit: cover;

  
}






.sec6 .part2,
.sec7 .part2,
.sec8 .part2,
.sec9 .part2,
.sec18 .part2 {
  position: relative;
  z-index: 10; /* overlay(2)보다 충분히 큼 */
}

.sec6 .part2 .mockup_pc,
.sec7 .part2 .mockup_pc,
.sec8 .part2 .mockup_pc,
.sec9 .part2 .mockup_pc,
.sec18 .part2 .mockup_pc {
  position: absolute;
  z-index: 20;
}

/* 중복/오타 정리 */
.sec6 .point,
.sec7 .point,
.sec8 .point,
.sec9 .point,
.sec18 .point { position: absolute; bottom: 0; right: 0; }


section[id] { scroll-margin-top: 120px; }


.swiper-slide { flex-shrink: 0; }  /* 필요 시 */
.team1 li,
.team2 > li { flex-shrink: 0; }    /* 이미 team1/team2는 0이지만 재확인 */




html.lenis, html.lenis body { height: auto; }   /* 문서 스크롤 컨테이너 단일화 */
.lenis.lenis-smooth { scroll-behavior: auto; }  /* 브라우저 기본 스무스 비활성 */
.lenis.lenis-stopped { overflow: hidden; }      /* 필요 시 스크롤 잠금 */

/* ✅ 모든 섹션 공통으로 정리 */
.sec6 .part2,
.sec18 .part2,
.sec7 .part2,
.sec8 .part2,
.sec9 .part2 {
  position: relative; /* stack context 기준점 */
  z-index: 20;        /* 오버레이(2)보다 높게 */
}

.sec6 .part2 .mockup_pc,
.sec7 .part2 .mockup_pc,
.sec8 .part2 .mockup_pc,
.sec18 .part2 .mockup_pc,
.sec9 .part2 .mockup_pc {
  position: absolute;
  left: 200px;   /* 필요에 따라 조정 */
  top: 30px;
  z-index: 30;   /* overlay(2) 위에 확실히 올라가도록 */
}

.sec6 .part2 .mockup_pc .moniter,
.sec18 .part2 .mockup_pc .moniter,
.sec7 .part2 .mockup_pc .moniter,
.sec8 .part2 .mockup_pc .moniter,
.sec9 .part2 .mockup_pc .moniter {
  position: absolute;
  left: 99px;
  top: 44px;
  width: 590px;
  height: 362px;
  overflow: hidden;
  z-index: 31; /* mockup_pc 안에서도 더 위 */
}


















.sec7 .sec7_wrap {max-width: 1920px; position: relative; overflow: hidden; margin: 0 auto; padding-top: 150px;}
.sec7 video { width: 1920px;  
  filter: grayscale(100%);  object-fit: cover; position: absolute;}

.sec7 {    position: relative;   }
.sec7 .sec7_wrap .centerbox { max-width: 1500px;  display: flex;    justify-content: space-between; }
.sec7 .part1 { position: relative; height: 900px; } 
.sec7 .part1 .sec7_btn{ background: #575043; color: #e5e5e5;  margin-top: 40px; margin-left: 50px;}
.sec7 .part1 .titlebox {display: flex;  align-items: end; margin-bottom: 10px; ;}
.sec7 .part1 .titlebox h2 {font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600; color:#f9f9f9 ;}
.sec7 .part1 .titlebox p {font-family: "Noto Serif KR", serif; font-size: 30px; font-weight:400; color:#f9f9f9; margin-bottom:12px;}
.sec7 .part1 .title1-1  {position: relative; top: -30px;}
.sec7 .part1 .title1-1 .titlebox2{ position: absolute;  display: flex;}
.sec7 .part1 .title1-1 .titlebox2 h2{  font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600;  color: #e5e5e5 ;}
.sec7 .part1 .title1-1 .titlebox2 p{font-family: "Noto Serif KR", serif; font-size: 20px; font-weight:400; color:#d8d8d8 ; position: absolute; top: 70px; left: 5px; margin-top: 14px;}
.sec7 .part1 .textbox { margin-top: 150px; font-family: "Noto Serif KR", serif ; font-weight: 400; font-size: 20px; letter-spacing: -1px; position: absolute; z-index: 11;}

.sec7 .part1 .textbox p span {font-family: 'Pretendard'; font-weight: 500; margin-right: 30px; ; width: 100px;  display: inline-block; color: #f9f9f9; }
.sec7 .part1 .textbox p { margin-bottom: 40px; color: #f9f9f9; font-family: 'Pretendard'; font-weight: 400; } 


.sec7 .part1 .makers { display: flex;  margin-top: 460px;}
.sec7 .part1 .makers .make1{ margin-right: 90px;}
.sec7 .part1 .makers .make1 .make1-1 { display: flex; align-items: center;}
.sec7 .part1 .makers .make1 .make1-1 em { font-style: normal; font-size: 20px ;   }
.sec7 .part1 .makers .make1 .make1-1 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec7 .part1 .makers .make1 .make1-2 { display: flex; align-items: center; margin-top: 35px;}
.sec7 .part1 .makers .make1 .make1-2 em { font-style: normal; font-size: 20px ;   }
.sec7 .part1 .makers .make1 .make1-2 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec7 .part1 .makers .make2 .make2-1 { display: flex; align-items: center;}
.sec7 .part1 .makers .make2 .make2-1 em { font-style: normal; font-size: 20px ;   }
.sec7 .part1 .makers .make2 .make2-1 p{ margin-top: 2px; margin-left: 34px; display: flex; gap: 10px;  color: #e5e5e5; font-size: 18px;}

.sec7 .part1 .makers .make2 .make2-2 { display: flex; align-items: center; margin-top: 35px;}
.sec7 .part1 .makers .make2 .make2-2 em { font-style: normal; font-size: 20px ;   }
.sec7 .part1 .makers .make2 .make2-2 p{ margin-top: 2px; margin-left: 30px; display: flex; gap: 10px; }



.sec7 .part1 .makers .make1 .make1-1 em,
.sec7 .part1 .makers .make1 .make1-2 em,
.sec7 .part1 .makers .make2 .make2-1 em,
.sec7 .part1 .makers .make2 .make2-2 em {
  font-family: 'Pretendard'; font-weight: 600; color:#e5e5e5;
}



.sec7 .part1 .makers .make1 .make1-1 p,
.sec7 .part1 .makers .make1 .make1-2 p,
.sec7 .part1 .makers .make2 .make2-1 p,
.sec7 .part1 .makers .make2 .make2-2 p {
  font-family: 'Pretendard'; font-weight: 400; color:#f9f9f9;
}




.sec7 .part2 { position: relative;}
.sec7 .part2 .mockup_pc{ position: absolute; z-index: 10; left: 0px; top: 30px;}
.sec7 .part2 .mockup_pc .moniter { width: 590px; height: 362px; overflow: hidden; position: absolute; z-index: 10; left: 100px; top: 44px;}



.sec7 .part3 .con1 {margin-left: 200px; display: flex;}
.sec7 .part3 .con1 .imgbox {}
.sec7 .part3 .con1 .textbox {margin-left: 40px;}
.sec7 .part3 .con1 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec7 .part3 .con1 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; }
.sec7 .part3 .con1 .textbox .line img { height: 100%;}
.sec7 .part3 .con1 .textbox .line h3 { margin-left: 20px; color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px;}


.sec7 .part3 .con2 { margin-left: 400px; margin-top: 100px;} 
.sec7 .part3 .con2 .textbox {margin-left: 40px;}
.sec7 .part3 .con2 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec7 .part3 .con2 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; margin-top: 50px; }
.sec7 .part3 .con2 .textbox .line img { height: 100%;}
.sec7 .part3 .con2 .textbox .line h3 { margin-left: 20px; color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px;}

.sec7 .part3 .con3 {}
.sec7 .part3 .con3 { margin-left: 500px; margin-top: 100px;} 
.sec7 .part3 .con3 .textbox { margin-right: 20px; margin-top: 30px;}
.sec7 .part3 .con3 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec7 .part3 .con3 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; }
.sec7 .part3 .con3 .textbox .line img { height: 100%;}
.sec7 .part3 .con3 .textbox .line h3 {  color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px; margin-right: 20px;}


.sec7 .part3 .con4 {}
.sec7 .part3 .con4 { margin-left: 300px; margin-top: 100px;} 
.sec7 .part3 .con4 .textbox {margin-left: 40px;}
.sec7 .part3 .con4 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec7 .part3 .con4 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; margin-top: 50px; }
.sec7 .part3 .con4 .textbox .line img { height: 100%;}
.sec7 .part3 .con4 .textbox .line h3 { margin-left: 20px; color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px;}


.sec7 .part3 .con5 {}
.sec7 .part3 .con5 { margin-left: 200px; margin-top: 100px;} 
.sec7 .part3 .con5 .textbox {margin-left: 40px;}
.sec7 .part3 .con5 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec7 .part3 .con5 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; margin-top: 50px; }
.sec7 .part3 .con5 .textbox .line img { height: 100%;}
.sec7 .part3 .con5 .textbox .line h3 { margin-left: 20px; color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px;}




.sec7 .part3 .con6 {}
.sec7 .part3 .con6 { margin-left: 200px; margin-top: 100px;} 
.sec7 .part3 .con6 .textbox {  margin-top: 30px; margin-left: 20px;}
.sec7 .part3 .con6 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec7 .part3 .con6 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; }
.sec7 .part3 .con6 .textbox .line img { height: 100%;}
.sec7 .part3 .con6 .textbox .line h3 {  color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px; margin-left: 20px;}


.sec7 .part3 .con7 {display: flex;}
.sec7 .part3 .con7 { margin-left: 700px; margin-top: 100px;} 
.sec7 .part3 .con7 .textbox {margin-left: 40px;}
.sec7 .part3 .con7 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec7 .part3 .con7 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; margin-top: 50px; }
.sec7 .part3 .con7 .textbox .line img { height: 100%;}
.sec7 .part3 .con7 .textbox .line h3 { margin-left: 20px; color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px;}



.sec7 .part3 .con8 {display: flex;}
.sec7 .part3 .con8 { margin-left: 300px; margin-top: 100px;} 
.sec7 .part3 .con8 .textbox {margin-left: 40px;}
.sec7 .part3 .con8 .textbox p { color: #474747; font-family: 'Pretendard'; font-weight: 400; font-size: 16px; margin-bottom: 15px;}
.sec7 .part3 .con8 .textbox .line{ display: flex; align-items: center; margin-bottom: 20px; margin-top: 50px; }
.sec7 .part3 .con8 .textbox .line img { height: 100%;}
.sec7 .part3 .con8 .textbox .line h3 { margin-left: 20px; color: #1A1B1D; font-family: 'Pretendard'; font-weight: 400; font-size: 18px;}





.sec8 {  position: relative; overflow: hidden; max-width: 1920px; margin: 0  auto; }


.sec8 .centerbox { max-width: 1500px;  display: flex;  justify-content: space-between; padding-top: 180px;}
.sec8 .part1 { padding: 30px; } 
.sec8 .part1 .sec8_btn{ background: #83473E; color: #ececec;  margin-top: 40px; margin-left: 50px;}
.sec8 .part1 .titlebox {display: flex;  align-items: end; margin-bottom: 10px;   }
.sec8 .part1 .titlebox h2 {font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600; color:#474747 ;}
.sec8 .part1 .titlebox p {font-family: "Noto Serif KR", serif; font-size: 30px; font-weight:400; color:#474747 ; margin-bottom:12px; }
.sec8 .part1 .title1-1  {position: relative; top: -30px;}
.sec8 .part1 .title1-1 .titlebox2{ position: absolute;  display: flex;}
.sec8 .part1 .title1-1 .titlebox2 h2{  font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600; ;color: #474747;}
.sec8 .part1 .title1-1 .titlebox2 p{font-family: "Noto Serif KR", serif; font-size: 20px; font-weight:400; color:#474747 ; position: absolute; top: 70px; left: 5px; margin-top: 14px;}
.sec8 .part1 .textbox { margin-top: 150px; font-family: "Noto Serif KR", serif ; font-weight: 400; font-size: 20px; letter-spacing: -1px;}

.sec8 .part1 .textbox p span {font-family: 'Pretendard'; font-weight: 500; margin-right: 30px; ; width: 100px;  display: inline-block; color: #2F2F2F; }
.sec8 .part1 .textbox p { margin-bottom: 40px; color: #2F2F2F; font-family: 'Pretendard'; font-weight: 400; } 








.sec8 .part1 .makers { display: flex; margin-top: 150px;}
.sec8 .part1 .makers .make1{ margin-right: 90px;}
.sec8 .part1 .makers .make1 .make1-1 { display: flex; align-items: center;}
.sec8 .part1 .makers .make1 .make1-1 em { font-style: normal; font-size: 20px ; }
.sec8 .part1 .makers .make1 .make1-1 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec8 .part1 .makers .make1 .make1-2 { display: flex; align-items: center; margin-top: 35px;}
.sec8 .part1 .makers .make1 .make1-2 em { font-style: normal; font-size: 20px ; }
.sec8 .part1 .makers .make1 .make1-2 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec8 .part1 .makers .make2 .make2-1 { display: flex; align-items: center;}
.sec8 .part1 .makers .make2 .make2-1 em { font-style: normal; font-size: 20px ; }
.sec8 .part1 .makers .make2 .make2-1 p{ margin-top: 2px; margin-left: 34px; display: flex; gap: 10px;font-size: 18px;}

.sec8 .part1 .makers .make2 .make2-2 { display: flex; align-items: center; margin-top: 35px;}
.sec8 .part1 .makers .make2 .make2-2 em { font-style: normal; font-size: 20px ; }
.sec8 .part1 .makers .make2 .make2-2 p{ margin-top: 2px; margin-left: 30px; display: flex; gap: 10px; }




.sec8 .part1 .makers .make1 .make1-1 em,
.sec8 .part1 .makers .make1 .make1-2 em,
.sec8 .part1 .makers .make2 .make2-1 em,
.sec8 .part1 .makers .make2 .make2-2 em {
  font-family: 'Pretendard'; font-weight: 600; color:#2F2F2F;
}

.sec8 .part1 .makers .make1 .make1-1 p,
.sec8 .part1 .makers .make1 .make1-2 p,
.sec8 .part1 .makers .make2 .make2-1 p,
.sec8 .part1 .makers .make2 .make2-2 p {
  font-family: 'Pretendard'; font-weight: 400; color:#2F2F2F;
}


.sec8 .part2 { position: relative; position: relative;z-index: 100; }
.sec8 .part2 .mockup_pc{  left: -700px; top: 30px; z-index: 200;}
.sec8 .part2 .mockup_pc .moniter { width: 590px; height: 362px; overflow: hidden; position: absolute; z-index: 10; left: 99px; top: 44px;}


.sec8 .part3 .textbox {}
.sec8 .part3 .textbox .title{ margin-top: 30px;}
.sec8 .part3 .textbox .title h3{margin-left: 15px; margin-bottom: 20px; color: #000; font-family: 'Pretendard'; font-size: 18px; font-weight: 400;}
.sec8 .part3 .textbox .title p{margin-left: 144px; font-weight: 400;}
.sec8 .part3 .textbox .title p { margin-bottom: 20px; color: #474747; font-family: 'Pretendard'; font-size: 17px; font-weight: 400;}
.sec8 .part3 .textbox .title p.nbm { margin-bottom: 0px;}

.sec8 .part3 { padding-top: 150px;  }
.sec8 .part3 .part3_1img {margin-left: 291px; }

.sec8 .part3_1 { display: flex;}
.sec8 .part3 .pointer1 { margin-left: 784px;}


.sec8 .part3 .part3_1text  { display: flex;}
.sec8 .part3 .part3_1text .textbox { display: flex;  margin-top: 40px; width: 100%;}
.sec8 .part3 .part3_1text .textbox p.title { margin-left: 15px; font-size: 18px; color: #474747; font-family: 'Pretendard' ; font-weight: 400;}
.sec8 .part3 .part3_1text .textbox .pointer1_1 {height: 10px; margin-top: 34px; margin-left: 20px; } 
.sec8 .part3 .part3_1text  .conbox { display: block; margin-left: 15px; margin-top: 15px;}
.sec8 .part3 .part3_1text  .conbox p {margin-bottom: 15px; font-size: 17px; font-family: 'Pretendard'; color: #474747; font-weight: 400;}









.sec8 .part3 .part3_2 { margin-left: 199px; margin-top: 115px;  display: flex;}
.sec8 .part3 .part3_2 .titlebox { display: flex; margin-top: 43px; align-items: center; margin-bottom: 20px;}

.sec8 .part3 .part3_2  .title {  font-size: 18px; font-weight: 400; font-family: 'Pretendard'; color: #000; }
.sec8 .part3 .part3_2 .textbox .pointer2{  margin-top: 30px; margin-left: 47px;  margin-right: 15px;}
.sec8 .part3 .part3_2 .textbox .conbox { margin-left: 47px;}
.sec8 .part3 .part3_2 .textbox .conbox p { font-family: 'Pretendard' ; font-weight: 400; font-size: 17px; color: #474747; margin-bottom: 15px;}

.sec8 .part3 .part3_3 { margin-left: 288px; margin-top: 115px;  display: flex;}
.sec8 .part3 .part3_3 .part3_3img {height: 157.23px; }
.sec8 .part3 .part3_3 .titlebox { display: flex; margin-top: 43px; align-items: center; margin-bottom: 20px;}

.sec8 .part3 .part3_3  .title {  font-size: 18px; font-weight: 400; font-family: 'Pretendard'; color: #000; }
.sec8 .part3 .part3_3 .textbox .pointer3{  margin-top: 30px; margin-left: 47px;  margin-right: 15px;}
.sec8 .part3 .part3_3 .textbox .conbox { margin-left: 47px;}
.sec8 .part3 .part3_3 .textbox .conbox p { font-family: 'Pretendard' ; font-weight: 400; font-size: 17px; color: #474747; margin-bottom: 15px;}

.sec8 .part3 .part3_4 { margin-left: 288px; margin-top: 115px;  display: flex;}

.sec8 .part3 .part3_4 .titlebox { display: flex; margin-top: 43px; align-items: center; margin-bottom: 20px;}

.sec8 .part3 .part3_4  .title {  font-size: 18px; font-weight: 400; font-family: 'Pretendard'; color: #000; }
.sec8 .part3 .part3_4 .textbox .pointer3{  margin-top: 30px; margin-left: 47px;  margin-right: 15px;}
.sec8 .part3 .part3_4 .textbox .conbox { margin-left: 47px;}
.sec8 .part3 .part3_4 .textbox .conbox p { font-family: 'Pretendard' ; font-weight: 400; font-size: 17px; color: #474747; margin-bottom: 15px;}




.sec9 .sec7_wrap {max-width: 1920px; position: relative; overflow: hidden; margin: 0 auto;}


.sec9 {    position: relative;  background: #1d1d1d;}
.sec9 .sec9_wrap .centerbox { max-width: 1500px;  display: flex;   justify-content: space-between; padding-top: 180px;}
.sec9 .part1 { position: relative; height: 700px; } 
.sec9 .part1 .sec9_btn{ background: #EDD5C8; color: #474747;  margin-top: 40px; margin-left: 50px;}
.sec9 .part1 .titlebox {display: flex;  align-items: end; margin-bottom: 10px; ;}
.sec9 .part1 .titlebox h2 {font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600; color:#e5e5e5 ;}
.sec9 .part1 .titlebox p {font-family: "Noto Serif KR", serif; font-size: 30px; font-weight:400; color:#e5e5e5; margin-bottom:12px;}
.sec9 .part1 .title1-1  {position: relative; top: -30px;}
.sec9 .part1 .title1-1 .titlebox2{ position: absolute;  display: flex;}
.sec9 .part1 .title1-1 .titlebox2 h2{  font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600;  color: #e5e5e5 ;}
.sec9 .part1 .title1-1 .titlebox2 p{font-family: "Noto Serif KR", serif; font-size: 20px; font-weight:400; color:#e5e5e5 ; position: absolute; top: 70px; left: 5px; margin-top: 14px;}
.sec9 .part1 .textbox { margin-top: 150px; font-family: "Noto Serif KR", serif ; font-weight: 400; font-size: 20px; letter-spacing: -1px; position: absolute; z-index: 11;}

.sec9 .part1 .textbox p span {font-family: 'Pretendard'; font-weight: 500; margin-right: 30px; ; width: 100px;  display: inline-block; color: #e5e5e5; }
.sec9 .part1 .textbox p { margin-bottom: 40px; color: #e5e5e5; font-family: 'Pretendard'; font-weight: 400; } 



.sec9 .part1 .makers { display: flex;  margin-top: 400px;}
.sec9 .part1 .makers .make1{ margin-right: 90px;}
.sec9 .part1 .makers .make1 .make1-1 { display: flex; align-items: center;}
.sec9 .part1 .makers .make1 .make1-1 em { font-style: normal; font-size: 20px ;   }
.sec9 .part1 .makers .make1 .make1-1 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec9 .part1 .makers .make1 .make1-2 { display: flex; align-items: center; margin-top: 35px;}
.sec9 .part1 .makers .make1 .make1-2 em { font-style: normal; font-size: 20px ;   }
.sec9 .part1 .makers .make1 .make1-2 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec9 .part1 .makers .make2 .make2-1 { display: flex; align-items: center;}
.sec9 .part1 .makers .make2 .make2-1 em { font-style: normal; font-size: 20px ;   }
.sec9 .part1 .makers .make2 .make2-1 p{ margin-top: 2px; margin-left: 34px; display: flex; gap: 10px;  color: #e5e5e5; font-size: 18px;}

.sec9 .part1 .makers .make2 .make2-2 { display: flex; align-items: center; margin-top: 35px;}
.sec9 .part1 .makers .make2 .make2-2 em { font-style: normal; font-size: 20px ;   }
.sec9 .part1 .makers .make2 .make2-2 p{ margin-top: 2px; margin-left: 30px; display: flex; gap: 10px; }




.sec9 .part1 .makers .make1 .make1-1 em,
.sec9 .part1 .makers .make1 .make1-2 em,
.sec9 .part1 .makers .make2 .make2-1 em,
.sec9 .part1 .makers .make2 .make2-2 em {
  font-family: 'Pretendard'; font-weight: 600; color:#e5e5e5;
}


.sec9 .part1 .makers .make1 .make1-1 p,
.sec9 .part1 .makers .make1 .make1-2 p,
.sec9 .part1 .makers .make2 .make2-1 p,
.sec9 .part1 .makers .make2 .make2-2 p {
  font-family: 'Pretendard'; font-weight: 400; color:#e5e5e5;
}


.sec9 .part2 { position: relative;}
.sec9 .part2 .mockup_pc{ position: absolute; z-index: 10; left: 0px; top: 30px;}
.sec9 .part2 .mockup_pc .moniter { width: 590px; height: 362px; overflow: hidden; position: absolute; z-index: 10; left: 100px; top: 44px;}
 


.sec9 .part3 { margin: 0  auto; max-width: 1920px; padding-top: 200px; }

.sec9 .part3 .part3_1 { display: flex; ;  margin-left: 280px;}
.sec9  .part3 .pointbox { height: 350px; display: flex; flex-direction: column; }
.sec9 .part3 .part3_1 .pointer1 {    margin-left: 23px;  margin-top: 33px; margin-right: 15px; }
.sec9 .part3 .part3_1 .pointer2 {    margin-left: 23px;  margin-top: 217px; margin-right: 15px; }
.sec9 .part3 .part3_1 .textbox {   margin-top: 30px; }
.sec9 .part3 .part3_1 .textbox h3{ font-size: 18px; color: #ffffff; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px;}
.sec9 .part3 .part3_1 .textbox p.title{ font-size: 18px; color: #ffffff; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px; margin-top: 100px;}
.sec9 .part3 .part3_1 .textbox p{ font-size: 17px; color: #c7c7c7; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px;}
.sec9 .part3 .part3_1 .textbox .nbm{}



.sec9 .part3 .part3_2 {display: flex; margin-left: 400px; margin-top: 150px;}
.sec9 .part3 .part3_2 .titlebox { display: flex;}
.sec9 .part3 .part3_2 .titlebox .pointer2 { margin-left: 23px;}
.sec9 .part3 .part3_2  .titlebox  div.title {  font-size: 18px; color: #ffffff; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px ; margin-top: 15px; margin-left: 15px; }
.sec9 .part3 .part3_2  .conbox { margin-left: 23px;}
.sec9 .part3 .part3_2  .conbox p{ font-size: 17px; color: #c7c7c7; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px;}



.sec9 .part3_3 {  margin-left: 221px; margin-top: 150px;}


.sec9 .part3 .part3_3 .point_box{ display: flex; margin-left: 400px;}
.sec9 .part3 .part3_3 .part3_3rightbox { display: flex;}
.sec9 .part3 .part3_3 .titlebox {display: flex; margin-left: 15px;  margin-top: 100px;}

.sec9 .part3 .part3_3 .titlebox  .title { margin-left: 15px;font-size: 18px; color: #ffffff; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px ; margin-top: 15px; }
.sec9 .part3 .part3_3 .textbox .conbox {margin-left: 15px; }
.sec9 .part3 .part3_3 .textbox .conbox p {font-size: 17px; color: #c7c7c7; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px; }


.sec9 .part3 .part3_3 .pointerbox { margin-top: 10px; margin-right: 15px;}
.sec9 .part3 .part3_3 .pointtaxt h3{font-size: 18px; color: #ffffff; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px ; margin-top: 4px; }
.sec9 .part3 .part3_3 .pointtaxt p {font-size: 17px; color: #c7c7c7; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px; }






.sec9 .part3 .part3_4 {display: flex; margin-top: 150px; margin-left: 400px;}
.sec9 .part3 .part3_4 .textbox {  }
.sec9 .part3 .part3_4 .pointer3 { margin-left: 15px;}



.sec9 .part3 .part3_4 .textbox .titlebox{ display: flex;}
.sec9 .part3 .part3_4 .textbox .title{ font-size: 18px; color: #ffffff; font-family: 'Pretendard'; font-weight: 400;}
.sec9 .part3 .part3_4 .textbox  .conbox {margin-top: 15px; }
.sec9 .part3 .part3_4 .textbox  .conbox p {font-size: 17px; color: #c7c7c7; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px;} 



.sec9 .part3 .part3_5 {display: flex; margin-top: 150px; margin-left: 230px; padding-bottom: 200px;}
.sec9 .part3 .part3_5 .textbox { margin-right: 20px; margin-top: 50px;}
.sec9 .part3 .part3_5 .pointer3 { margin-left: 15px;}



.sec9 .part3 .part3_5 .textbox .titlebox{ display: flex;}
.sec9 .part3 .part3_5 .textbox .title{ font-size: 18px; color: #ffffff; font-family: 'Pretendard'; font-weight: 400;}
.sec9 .part3 .part3_5 .textbox  .conbox {margin-top: 15px; }
.sec9 .part3 .part3_5 .textbox  .conbox p {font-size: 17px; color: #c7c7c7; font-family: 'Pretendard'; font-weight: 400; margin-bottom: 15px;} 



.part3 .imgbox {opacity: 0; top: 50px; position: relative; transition: .3s;}
.part3 .imgbox.on {opacity: 1; top: 0;}

.part3 .textbox {opacity: 0; left: 50px; position: relative; transition: .3s;}
.part3 .textbox.on {opacity: 1; left: 0;}





.sec10 { display: flex; height: 100vh;}
.sec10 .centerbox {  display: flex; ; width: 1800px;}

.sec10 .part1{   width: 860px; height: 875px;position: relative;margin-left: 130px;} 

.sec10 .part1 .part1_1img{position: absolute; left: 0 ; z-index: 8;   height: 90%;  top: 10%;}
.sec10 .part1 .part1_2img{ position: absolute; z-index: 10; left:38%; height: 90%; top: 10%;} 

.sec10 .part2{ margin-left: 100px; }
.sec10 .part2 .titlebox { margin-top: 180px;} 
.sec10 .part2 .titlebox h2{}
.sec10 .part2 .titlebox p{}
.sec10 .part2 .sec10_btn{ background: #171818; color: #ffffff;  margin-top: 40px; margin-left: 50px;}
.sec10 .part2 .titlebox {display: flex;  align-items: end; margin-bottom: 10px; ;}
.sec10 .part2 .titlebox h2 {font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600; color:#2F2F2F ;}
.sec10 .part2 .titlebox p {font-family: "Noto Serif KR", serif; font-size: 30px; font-weight:400; color:#2f2f2f; margin-bottom:12px;}
.sec10 .part2 .title1-1  {position: relative; top: -30px;}
.sec10 .part2 .title1-1 .titlebox2{   display: flex;}
.sec10 .part2 .title1-1 .titlebox2 h2{  font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600;  color: #2f2f2f ;}
.sec10 .part2 .title1-1 .titlebox2 p{font-family: "Noto Serif KR", serif; font-size: 20px; font-weight:400; color:#2f2f2f ; position: absolute; top: 70px; left: 15px; margin-top: 14px;}
.sec10 .part2 .textbox { margin-top: 30px; font-family: 'Pretendard';  font-weight: 400; font-size: 20px; letter-spacing: -1px;  text-align: left;}
.sec10 .part2 .textbox p { margin-bottom: 40px; color: #2f2f2f;} 
.sec10 .part2 .textbox span.sec10p_1 {  margin-right: 63px;} 
.sec10 .part2 .textbox span.sec10p_2 { margin-right: 50px; } 
.sec10 .part2 .textbox span.sec10p_3 { margin-right: 30px;} 
.sec10 .part2 .textbox span { font-weight: 500;} 
.sec10 .part2 .makers { display: flex;  margin-top: 100px;}
.sec10 .part2 .makers .make1{ margin-right: 90px;}
.sec10 .part2 .makers .make1 .make1-1 { display: flex; align-items: center;}
.sec10 .part2 .makers .make1 .make1-1 em { font-style: normal; font-size: 20px ;   }
.sec10 .part2 .makers .make1 .make1-1 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec10 .part2 .makers .make1 .make1-2 { display: flex; align-items: center; margin-top: 35px;}
.sec10 .part2 .makers .make1 .make1-2 em { font-style: normal; font-size: 20px ;   }
.sec10 .part2 .makers .make1 .make1-2 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec10 .part2 .makers .make2 .make2-1 { display: flex; align-items: center;}
.sec10 .part2 .makers .make2 .make2-1 em { font-style: normal; font-size: 20px ;   }
.sec10 .part2 .makers .make2 .make2-1 p{ margin-top: 2px; margin-left: 34px; display: flex; gap: 10px;  color: #2f2f2f; font-size: 18px;}

.sec10 .part2 .makers .make2 .make2-2 { display: flex; align-items: center; margin-top: 35px;}
.sec10 .part2 .makers .make2 .make2-2 em { font-style: normal; font-size: 20px ;   }
.sec10 .part2 .makers .make2 .make2-2 p{ margin-top: 2px; margin-left: 30px; display: flex; gap: 10px; }




.sec10 .part2 .makers .make1 .make1-1 em,
.sec10 .part2 .makers .make1 .make1-2 em,
.sec10 .part2 .makers .make2 .make2-1 em,
.sec10 .part2 .makers .make2 .make2-2 em {
  font-family: 'Pretendard'; font-weight: 600; color:#2f2f2f;
}


.sec10 .part2 .makers .make1 .make1-1 p,
.sec10 .part2 .makers .make1 .make1-2 p,
.sec10 .part2 .makers .make2 .make2-1 p,
.sec10 .part2 .makers .make2 .make2-2 p {
  font-family: 'Pretendard'; font-weight: 400; color:#2f2f2f;
}



.sec11 { height: 100vh; }

.sec11,.sec12,.sec13,.sec14,.sec15,.sec16,.sec17 {width: 101%;}

.team1 {
  display: flex; 
  height: 100vh;
}

.team1 li {
  flex: 0 0 100vw;   /* 한 섹션이 화면 가득 */
  height: 100vh;
}

.sec11 { display: flex; align-items: center; justify-content: center;} 
.sec11 .centerbox{ display: flex; max-width: 1500px; }
.sec11 .centerbox .part1{ margin-right: 50px;}
.sec11 .centerbox .part1 img { height: 100%; margin-top: 40px; }
.sec11 .centerbox .part1 .part1_1{ display: flex;}
.sec11 .centerbox .part1 .part1_1 .textbox p{ font-size: 17px; font-family: 'Pretendard'; font-weight: 400;
color: #2A2A2A;}
.sec11 .centerbox .part1 .part1_2{ display: flex;}
.sec11 .centerbox .part1 .part1_1 p { margin-bottom: 15px;}


/* .sec12 {height: 100vh; display: flex; align-items: center;}
.sec12 .centerbox {}
.sec12 .centerbox .part1 {display: flex;}
.sec12 .centerbox .part1 .textbox { height: 100%;  margin-top: 40px; margin-left: 80px;} 
.sec12 .centerbox .part1 .textbox p,
.sec12 .centerbox .part2 .textbox p {
  margin-bottom: 10px;
  font-size: 17px; font-family: 'Pretendard'; font-weight: 400;
  color: #2A2A2A;
}
.sec12 .centerbox .part1 .textbox p.text1{ margin-top: 40px;} 
.sec12 .centerbox .part1 .textbox p.text2{ margin-top: 40px;} sec1
.sec12 .centerbox .part2 {display: flex; margin-top: 30px;}
.sec12 .centerbox .part2 img { height: 100%; margin-right: 20px;}
.sec12 .centerbox .part2 .textbox {} 
.sec12 .centerbox .part2 .textbox p.text1{ margin-top: 40px;} 
.sec12 .centerbox .part2 .textbox p.text2{ margin-top: 40px;}  */


.sec13 { display: flex;  align-items: center; height: 100vh;}
.sec13 .centerbox{}
.sec13 .centerbox p { margin-bottom: 15px;
  font-size: 17px; font-family: 'Pretendard'; font-weight: 400;
  color: #2A2A2A;}
.sec13 .centerbox .part1 { display: flex;}
.sec13 .centerbox .part1 img{  margin-right: 20px;}
.sec13_apimg2 { border: 1px solid #b9b9b9;}
.sec13 .centerbox .part1 .textbox { margin-top: 80px;  height: 100%; margin-left: 70px; }
.sec13 .centerbox .part2 { display: flex; position: relative; margin-top: 30px;}
.sec13 .centerbox .part2 .sec13_apimg {position: absolute;  left: 45%; bottom: 6%; border: 1px solid #b9b9b9;}
.sec13 .centerbox .part2 .textbox {  margin-left: 300px; margin-top: 50px;}

.sec14 .centerbox .part2 img {box-shadow: 0 0   20px;} 
.sec16 .part2 img {box-shadow: 0 0   20px;} 

.sec14 {height: 100vh; display: flex; align-items: center; }
.sec14 .centerbox  {display: flex;}
.sec14 .centerbox .part1 img {  margin-right: 20px; }
.sec14 .centerbox .part1 .textbox { height: 100%; margin-left: 200px; margin-top: 50px; }
.sec14 .centerbox .part1 .textbox p {font-size: 17px; font-family: 'Pretendard'; font-weight: 400;
  color: #fff; margin-bottom: 10px;}
.sec14 .centerbox .part2   {display: flex;   position: relative;}
.sec14 .centerbox .part2  .textbox { height: 100%; margin-top: 200px; margin-left: 100px;}
.sec14 .centerbox .part2  .textbox p{font-size: 17px; font-family: 'Pretendard'; font-weight: 400;
  color: #fff; margin-bottom: 10px;   word-break: keep-all; width: 590px;}
.sec14 .centerbox .part2   img {margin-right: 30px; }
.sec14text1 { margin-top: 40px;}
.sec14apimg { position: absolute; left: 11%; top: 32%;}
.sec14text2 { margin-top: 100px;}
.sec15 { height: 100vh; display: flex; align-items: center; background: #ffffff;}

.sec15 .centerbox {display: flex;}
.sec15 .part1  img {display: block;  margin-top: 20px  ;} 
.sec15 .part1 {}
.sec15 .part2 { display: flex; height: 100%; margin-top: 50px; margin-left: 30px; position: relative; }  
.team1 .part2 img {  }
.team1 .part2 .noboxshadow {box-shadow: none;}

.sec15 .part2 .textbox{ margin-left: 30px; margin-top: 100px; margin-left: 200px;} 
.sec15 .part2 .textbox2{ margin-top: 200px; margin-left: 200px;}  
.sec15 p { color: #ececec; margin-bottom: 15px;font-size: 17px; font-family: 'Pretendard'; font-weight: 400; }
.sec15img1 {}

.sec15_img {width: 683px; height:371px ;}
.sec15_img2 { position: absolute; left: 15%; top: 26%;}



.sec16 {background: #000; height: 100vh; display: flex; align-items: center;}
.sec16 .centerbox { display: flex;}
.sec16 .part1 { margin-right: 30px;}
.sec16 .part2 { position: relative; }
.sec16 .part2 img { margin-right: 10px;}
.sec16 .textbox { margin-top: 100px; margin-left: 160px;}
.sec16 p { color: #ececec;margin-bottom: 15px;font-size: 17px; font-family: 'Pretendard'; font-weight: 400;}
.sec16img2 { position: absolute; left: 100%; z-index: 11; top: 40%;}
.sec16img3 { position: absolute; left: 60%;}


.sec17 { background: #000; height: 100vh ; display: flex; align-items: center;}
.sec17_img1 { width: 680px; height: 367px;}
.sec17 .centerbox { display: flex;}
.sec17 .centerbox .part1{ margin-right: 20px;}
.sec17 .centerbox .part1 img {display: block; margin-top: 20px;}
.sec17 .centerbox .part2{ display: flex; margin-top: 20px;}
.sec17 .centerbox .part2 img {margin-right: 20px; }
.sec17 .centerbox .part2 .textbox p{ color: #ececec;margin-bottom: 15px;font-size: 17px; font-family: 'Pretendard'; font-weight: 400;}
.sec17 .centerbox .part2 .textbox { margin-top: 200px; margin-left: 30px;}

.sec18 {height: 100vh;}
.sec18 .centerbox {}
.sec18 {  position: relative;}
.sec18 .centerbox { max-width: 1500px;  display: flex; padding-top: 180px; }
.sec18 .part1 {}
.sec18 .part1 .sec18_btn{ background: #F7FAFC; color: #2D3748;  margin-top: 40px; margin-left: 50px;}
.sec18 .part1 .titlebox {display: flex;  align-items: end; margin-bottom: 10px;}
.sec18 .part1 .titlebox h2 {font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600; color:#fff ;}
.sec18 .part1 .titlebox p {font-family: "Noto Serif KR", serif; font-size: 30px; font-weight:400; color:#fff ;  margin-bottom:12px;}
.sec18 .part1 .title1-1  {position: relative; top: -30px;}
.sec18 .part1 .title1-1 .titlebox2{ position: absolute;  display: flex;}
.sec18 .part1 .title1-1 .titlebox2 h2{  font-family: "Noto Serif KR", serif; font-size: 70px; font-weight:600; color:#fff ;}
.sec18 .part1 .title1-1 .titlebox2 p{font-family: "Noto Serif KR", serif; font-size: 20px; font-weight:400; color:#fff ; position: absolute; top: 70px; left: 5px; margin-top: 14px;}
.sec18 .part1 .textbox { margin-top: 150px; font-family: "Noto Serif KR", serif ; font-weight: 400; font-size: 20px; letter-spacing: -1px;}
.sec18 .part1 .textbox p { margin-bottom: 40px; color: #fff;} 

/* .sec67_box .slideBox {display: flex; width: 200vw;}
.sec67_box .slideBox section {width: 100vw;} */

/* .sec67_box .slideBox {padding: 100px; border-radius: 100px; overflow: hidden;}
.sec89_box .slideBox {padding: 100px; border-radius: 100px; overflow: hidden;} */

.sec18 .part1 .makers { display: flex; margin-top: 150px;}
.sec18 .part1 .makers .make1{ margin-right: 90px;}
.sec18 .part1 .makers .make1 .make1-1 { display: flex; align-items: center;}
.sec18 .part1 .makers .make1 .make1-1 em { font-style: normal; font-size: 20px ; }
.sec18 .part1 .makers .make1 .make1-1 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec18 .part1 .makers .make1 .make1-2 { display: flex; align-items: center; margin-top: 35px;}
.sec18 .part1 .makers .make1 .make1-2 em { font-style: normal; font-size: 20px ; }
.sec18 .part1 .makers .make1 .make1-2 p{ margin-top: 2px; margin-left: 34px; font-size: 18px; }

.sec18 .part1 .makers .make2 .make2-1 { display: flex; align-items: center;}
.sec18 .part1 .makers .make2 .make2-1 em { font-style: normal; font-size: 20px ; }
.sec18 .part1 .makers .make2 .make2-1 p{ margin-top: 2px; margin-left: 34px; display: flex; gap: 10px; font-size: 18px; color: #fff;}

.sec18 .part1 .makers .make2 .make2-2 { display: flex; align-items: center; margin-top: 35px;}
.sec18 .part1 .makers .make2 .make2-2 em { font-style: normal; font-size: 20px ; }
.sec18 .part1 .makers .make2 .make2-2 p{ margin-top: 2px; margin-left: 30px; display: flex; gap: 10px; }


.sec18 .part1 .makers .make1 .make1-1 em,
.sec18 .part1 .makers .make1 .make1-2 em,
.sec18 .part1 .makers .make2 .make2-1 em,
.sec18 .part1 .makers .make2 .make2-2 em {
  font-family: 'Pretendard'; font-weight: 600; font-size: 20px; color: #fff;
}

.sec18 .part1 .makers .make1 .make1-1 p,
.sec18 .part1 .makers .make1 .make1-2 p {
  font-family: 'Pretendard'; font-weight: 400; font-size: 18px; color: #fff;
}

.sec18 .part1 .textbox p span {font-family: 'Pretendard'; font-weight: 500; margin-right: 30px; ; width: 100px;  display: inline-block; color: #fff; }
.sec18 .part1 .textbox p { margin-bottom: 40px; color: #fff; font-family: 'Pretendard'; font-weight: 400; } 
.sec18 .part2 { position: relative;}
.sec18 .part2 .mockup_pc{ position: absolute; z-index: 10; left: 200px; top: 30px;}
.sec18 .part2 .mockup_pc .moniter { width: 590px; height: 362px; overflow: hidden; position: absolute; z-index: 10; left: 99px; top: 44px; }
.sec18 .point {  position: absolute; bottom: 0;right: 0;;}

.sec18 {position: relative; }
.sec18 .movie {width: 100%; height: 100vh;  position: absolute; right: 0; top: 0; border-radius: 0 0 0 0; overflow: hidden; z-index: -1;; }
.sec18 .movie .overlay {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.9); left: 0; top: 0; z-index: 2;}
.sec18 .movie video {width: 100%; height: 100%; object-fit: cover;}

.team2 {
  display: flex;              /* 가로 배열 */
  padding: 0;
  margin: 0;
  list-style: none;
}

.team2 > li {
  flex-shrink: 0;             /* 줄어들지 않음 */
  width: 100vw;               /* 한 화면 꽉 */
  height: 100vh;              /* 세로도 꽉 */
  position: relative;
  overflow: hidden;
}

.sec19 { height: 100vh; background: #fff; display: flex; align-items: center;} 
.sec19 .centerbox .part1 { position: relative; margin-right: 200px;}
.sec19 .part2 { margin-top: 0px; }
.sec19 .part2 .textbox p{ margin-bottom: 10px; color: #1a1a1a;font-size: 17px; font-family: 'Pretendard'; font-weight: 400; }
.sec19img1 { position: absolute;right: -20%; bottom: -20%;box-shadow: -5px 5px 30px rgba(0,0,0,0.2);}
.sec19 .centerbox { display: flex;}
.sec19text1{ margin-top: 40px;}
.sec19text2{ margin-top: 40px;}
.sec19text3{ margin-top: 40px;} 

.sec20 { height: 100vh; background: #fff; display: flex; align-items: center;} 
.sec20 .centerbox .part1 { position: relative; margin-right: 300px;}
.sec20 .part2 { margin-top: 150px; }
.sec20 .part2 .textbox p{ margin-bottom: 10px; color: #1a1a1a;font-size: 17px; font-family: 'Pretendard'; font-weight: 400; }
.sec20img1 { position: absolute; left: 30%; top: 30%;box-shadow: -5px 5px 30px rgba(0,0,0,0.2);}
.sec20 .centerbox { display: flex;}
.sec20text1{ margin-top: 40px;}
.sec20text2{ margin-top: 40px;}


.sec21 { height: 100vh; background: #fff; display: flex; align-items: center;} 
.sec21 .centerbox .part1 { position: relative; margin-right: 300px;}
.sec21 .part2 { margin-top: 150px; }
.sec21 .part2 .textbox p{ margin-bottom: 10px; color: #1a1a1a;font-size: 17px; font-family: 'Pretendard'; font-weight: 400; }
.sec21img1 { position: absolute; left: 30%; top: 30%;box-shadow: -5px 5px 30px rgba(0,0,0,0.2);}
.sec21 .centerbox { display: flex;}
.sec21text1{ margin-top: 40px;}
.sec21text2{ margin-top: 40px;}
.sec21text3{ margin-top: 40px;}



.sec22 {/* height: 100vh; */ display: flex; align-items: center; justify-content: center;  position: relative; z-index: 0;}
.sec22 .centerbox  {   display: flex; align-items: flex-start;  }
.sec22 .centerbox .part1 {/*  display: flex; */ position: relative;  ;  }
.sec22 .centerbox .part1 .titlebox {margin-right: 100px; height: 100%;  margin-top: 40px;height: auto; position: relative; margin-bottom: 20px;}
.sec22 .centerbox .part1 .titlebox h2{ font-family: "Noto Serif KR", serif; font-weight: 600; font-size: 70px; color: #2f2f2f;}
.sec22 .centerbox .part1 .titlebox p{ display: block;  font-family: "Noto Serif KR", serif; font-weight: 400; font-size: 20px ; color: #2f2f2f; position: absolute;  top: 90%; left: 5px; }


.sec22img1 { /* position: absolute; */ width: 214px; height: 726px; right:30%; top: 10%;}
#section22 {}
#section22 .centerbox {width: 1060px; display: flex; justify-content: flex-end; position: relative; }
.sec22 .centerbox .part1 {position: absolute; left: 50%; margin-left: -530px; }
.sec22 .centerbox .part1 .sec22fixbox {   }


.sec22 .centerbox .part2 .imgbox { margin-top: 130px;position: relative; display: block;}
.sec22 .centerbox .part2 .imgbox .sec22img2 {width: 800px; margin-left: 20px; display: block; }





.sec23 {height: 100vh; display: flex; }
.sec23 .centerbox{  margin-top: 200px; }
.sec23 .centerbox .titlebox{}
.sec23 .centerbox .titlebox h2{font-family: "Noto Serif KR", serif; font-weight: 600; font-size: 70px; color: #2f2f2f; }

.sec23 .centerbox .bannerbox{ position: relative; right: 50%; transform: translateX(-50%);   margin-top: 30px;}
.sec23 .centerbox .bannerbox li{  position: absolute;}
.sec23 .centerbox .bannerbox li img{}


.sec23 .centerbox .bannerbox li.sec23_1{top: 0;}
.sec23 .centerbox .bannerbox li.sec23_2{top: 10px;}
.sec23 .centerbox .bannerbox li.sec23_3{top: 30px;}
.sec23 .centerbox .bannerbox li.sec23_4{top: 50px;}
.sec23 .centerbox .bannerbox li.sec23_5{top: 70px;}
.sec23 .centerbox .bannerbox li.sec23_6{top: 100px;}

footer { background: url(../images/secmain.png) ; height: 100vh; display: flex; align-items: center; justify-content: center;}
footer .titlebox { display: flex ; flex-direction: column; text-align: center;} 
footer .titlebox h2 {font-family: "Noto Serif KR", serif; font-weight: 400; font-size: 200px; color: #474747; }
footer .subtext { margin-top: 20px;}
footer .subtext p {font-family: "Noto Serif KR", serif; font-weight: 400; color: #474747;  font-size: 30px;  letter-spacing: -1px;}

span.circle {
  position: fixed;
  top: 0; left: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: url('../images/sec2img.png');
  background-size: cover;
  border: 1px solid rgba(0,0,0,0.5);
  pointer-events: none;
  /* transform: translate(-50%, -50%);  ← 이 줄 삭제 */
  z-index: 9999;             /* 다른 요소 위로 안전하게 */
  will-change: transform;    /* 성능 최적화 */
}

span.circle.on {
  width: 100px; height: 60px;  background: rgba(0,0,0,0.2) ; border: none ; border-radius: 0; background-size: auto;
}

span.circle.on2 {
  width: 40px; height: 40px;  background: rgba(0,0,0,0.2) ; border: none ; border-radius: 0; 
}
span.circle.on3 {
  width: 50px; height: 50px;  background: rgba(0,0,0,0.2) ; border: none ; border-radius: 0; 
}
span.circle.on4 {
  width: 70px; height: 40px;  background: rgba(0,0,0,0.2) ; border: none ; border-radius: 0; 
}

span.circle.on5 {
  width: 40px; height: 50px;  background: rgba(0,0,0,0.2) ; border: none ; 
}