/* common */
*,
*::before,
*::after {
  box-sizing: border-box;
}



h1 {font-weight: 800; /* Display Bold */}
h2 {font-weight: 800; /* Display Bold */ font-size:50px; color:#331ec9;}
h3{ font-weight: 800; /* Display Bold */font-size:35px;}
h4{font-size:20px; text-align: center; color:#331ec9; font-weight:400; /* Display Bold */}
strong {font-weight: 700; /* Text Bold */}
.web_br{display:block;}

.mo_br{display:none;}
.data-label{display: none;}
.br_480{display:none;}
.br_480on{display:none;}
/**visual**/


.site-header { position: relative; overflow: hidden; background-color: #000; height:700px; } 

.top-bar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
.top-bar.inner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1320px;
    z-index: 9999;    
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    background-color:black;
}
.inner{width:1320px; margin:0 auto;}
.top-bar .logo{flex:1;}
#topnav-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 86px; 
  background-color: black;
  z-index: 9998;
}
@media (max-width: 767px) {
  .top-bar.inner {
    width: 100vw !important;      /* 모바일에선 화면폭 꽉 채움 */
    left: 0 !important;           /* 좌측 정렬 */
    transform: none !important;   /* 중앙 이동 해제 */
    padding: 0.5rem 1rem;          /* 모바일에 맞게 패딩 조절 */
  }
  .inner {
    width: 100% !important;       /* 내부도 100%로 */
    margin: 0 !important;
    padding: 0;
  }
}


.gnb{flex:1; justify-content: flex-end;}
.gng ul{text-align: right;}

.menu-toggle { font-size: 1.5rem; background: none; border: none; color: white; }
.gnb li{padding-top:5px; justify-content: flex-end;}
.gnb ul { display: flex; list-style: none; justify-content: flex-end;}
.gnb li + li { margin-left: 1.5rem; }
.gnb a { color: white; text-decoration: none;  }
.gnb li:last-child{background-color:#333353; color:#fff; padding:5px 10px; border-radius:5px; vertical-align: middle; }


/* 열렸을 때 */
.gnb .open {transform: translateX(0);}
.hamburger { display: none;font-size: 2rem;background: none;border: none;cursor: pointer;color:#331ec9;}
.media-container {position: relative;width: 100%;max-width: 1920px; margin: 0 auto;}
.foreground-video-web {position: absolute;top: 7%; right:-3%;   height:700px; object-fit: cover; /* 배경처럼 꽉 채우고 싶으면 */
  pointer-events: none; /* 클릭 방지 (선택사항) */}

.foreground-video-tablet{display: none;}
.main-title{position: relative; color:#fff; z-index: 1; padding-top:250px;}
.main-title h1{font-size:55px; line-height:60px; font-weight:800; padding-bottom:30px; }
.main-title dd {font-size:32px; font-weight:500; letter-spacing:-0.5px;}
.main-title dd:after{content: ''; width: 70px; height: 1px; background-color: #fff; display: block; margin: 50px 0; text-align: left;}
.main-title dd:last-child:after{display: none;}
.main-title dd:last-child{font-size:24px;}
.main-title p {font-size:23px; line-height:35px; font-weight:300; }
.background-image {display: block;width: 100%;height: auto;}


.nav-item.active {
  position: relative;
  /* 밑줄과 텍스트 사이 간격 */
}

.nav-item.active::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
}

/**네비고정**/
.nav{background-color:#331ec9; color:#fff; font-size:18px; padding:20px 0; }
.nav.fixed {position: fixed;top: 0;left: 0;width: 100%;z-index: 99999999;}
.main-menu li:first-child{margin-right:35px;}
.main-menu li+li{margin-right:35px;}
/**nav edit**/

#mainNav {background:#331ec9;color: white;  top: 0; left: 0;width: 100%;z-index: 1000;}
.main-menu {display: flex;align-items: center;flex-wrap: wrap;list-style: none;padding: 0;margin: 0;}

.nav-item a {color: white;text-decoration: none; display: block;font-weight: 500;}


.submenu {display: none;}
.submenu.open {display: block;}
.submenu-toggle{display: none;}
.submenu {display: none;flex-direction: column;padding: 0;margin: 0;}
.submenu li a {color: #fff; padding: 14px 0 !important;}
.submenu li{border-bottom:1px solid #593af2;}
.submenu li:last-child{margin-bottom:30px;}
.submenu li:first-child{border-top:1px solid #593af2;}

/* 디바이스별 표시 */
.pc-only { display: none;}
.mobile-only {display: block;}

/* PC에서는 가로메뉴만 표시 */
@media (min-width: 769px) {
.pc-only {display: block;}
.mobile-only {display: none !important;}
.main-menu {justify-content: flex-start; }
.submenu {display: none !important;}
.nav-item.active a {border-bottom:0;}
.submenu-toggle {padding:0;}    
}



section{padding:150px 0; margin:0 auto; text-align: center;}
#overview{background-color:#f4f4f4;}
#overview dl{padding-bottom:60px;}
#overview dt{padding:30px 0 40px 0;}
#overview dd{font-size:30px;}
#overview dd:last-child{font-size:25px; line-height:45px; padding-top:50px;}

.ov-chart{border:1px solid #fff; border-radius:10px; padding:60px 0; box-sizing: border-box;}
.ov-chart h4{font-size:25px; padding-bottom:20px; }
.ov-chart>p{font-size:16px; background-color:#ececec ; padding:5px 10px; border-radius:5px; border:1px solid #fff; display:inline-block; margin-bottom:60px;}

.ov-chart ul{display:flex; gap:50px;  justify-content: center; align-items: center;      /* 세로 가운데 */}

.ov-chart span{font-size:22px;}
.ov-chart li h2{color:#fff; padding:65px 0 20px 0; font-size:50px;}

.value-wrap{width:200px; height:200px; padding:10px; border-radius:50%; text-align: center; box-sizing: border-box; font-size:19px; border:2px solid #fff; margin:0 auto;}

.ov-chart li:first-child .value{color:#fff; width:175px; height:175px;border-radius:50%; background:linear-gradient(180deg,rgba(46, 104, 246, 1) 30%, rgba(95, 35, 211, 1) 72%);   }
.ov-chart li:nth-child(2) .value{color:#fff; width:175px; height:175px; border-radius:50%;background:linear-gradient(180deg,rgba(136, 208, 207, 1) 37%, rgba(39, 39, 213, 1) 92%);}
.ov-chart li:last-child .value{color:#fff;  width:175px; height:175px;border-radius:50%; background:linear-gradient(183deg,rgba(173, 106, 221, 1) 37%, rgba(88, 8, 251, 1) 100%);}

.ov-chart li:first-child span:after{content: ''; width:8px; height:8px; background-color: #2e69f6; display: block; margin:15px auto; text-align: center; border-radius:50px;}
.ov-chart li:nth-child(2) span:after{content: ''; width:8px; height:8px; background-color: #79b5d0; display: block; margin:15px  auto; text-align: center; border-radius:50px;}
.ov-chart li:last-child span:after{content: ''; width:8px; height:8px; background-color: #a561e0; display: block; margin:15px  auto; text-align: center; border-radius:50px;}


.section-tit dd{background-color:#3617ce; color:#fff; text-align: center; padding:3px 20px 3px 20px; box-sizing: border-box; display:inline-block; border-radius:50px; font-size:16px;}
.section-tit dt{padding:30px 0 50px 0;}
.features-item h4{padding-bottom:25px;}
.features-item{display:flex; gap:25px; box-sizing: border-box !important; flex-wrap: wrap; }



.features-item li{ flex: 1; border:1px solid #e2e4e6; background-color:#fff; border-radius:10px; }
.fitem-inner{padding:20px; box-sizing: border-box;; margin: 0 auto; text-align: left; position: relative;}
.fitem-bg{background-color:#fafafa; border-radius:10px;}
.fitem-inner dl{padding:20px; }
.fitem-inner dt:before{content: '';
width: 3px;
background-color: #3617ce;
margin-left:35px;
margin-top: 10px;
height: 51px; 
flex-shrink: 0;
position: absolute; left:2%;}
.fitem-inner dt{padding:0 0 20px 25px; font-size:20px; line-height:35px;}
.fitem-inner h4 {padding-top:8px;}
.fitem-inner h4 strong img{padding:3px 10px;}
.fitem-chart img{width:100%;}


#specs{background-color:#d4dbfe;}
#specs .section-tit h3{padding-bottom:30px;}
#specs .section-tit{font-size:20px;}

.gpu-spec {
  width: 100%;
  border-collapse: collapse;  
  color: #000;
  font-family: 'SKTSans', sans-serif;
}

.gpu-spec th, .gpu-spec td {
  border-bottom: 1px solid #9499b1;
  padding: 16px;
  text-align: center;
}

.th-b200{background: #000; color:#fff !important;}
.td-b200{background: #3617ce; color: #fff; font-size:19px; line-height:28px;}
.gpu-spec td { padding:60px 10px;}
.gpu-spec th{font-weight:bold; font-size:20px;}

.gpu-spec thead th {
  
  color: #000;
  border-top:2px solid #3617ce;
  border-bottom:2px solid #3617ce;
}

.gpu-spec tbody th {text-align: center; vertical-align: middle;}


#performance{background-color:#f4f4f4;}
#performance .section-tit strong{font-weight:400;}
#features .section-tit strong{font-weight:400;}
#service .section-tit h3{font-weight:400;}

#performance p{display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px;
  align-items: start; font-size:13px; padding-top:20px; line-height:22px; color:#6b6b6b; }
#performance p strong{   white-space: nowrap; font-weight: 500;}
#performance p span{text-align: left;}



.chart-area-h100{background-color:#fff; border-radius:10px 10px 0 0 ; padding:100px 0 0 0; }

.chart-area-h100 h4{font-size:25px;}
.value-h100{display: flex; justify-content: center; align-items: center; gap:40px; padding:70px 0 100px 0; }
.value-h100 ul{display: flex; gap:20px;}
.value-h100 ul li{text-align: center; padding-top:70px;}
.value-h100 ul li strong{display: block; font-size: 35px; padding-top:25px;}
.value-h100 ul li:first-child{background-color: #f5f8ff; width:245px; height:245px; border-radius:50%;}
.value-h100 ul li:nth-child(2){background-color: #e8edff; width:245px; height:245px; border-radius:50%;}
.value-h100 ul li:last-child{background-color: #d2dcff; width:245px; height:245px; border-radius:50%;}
.value-h100 dd{text-align:right; padding-top:5px;}
.chart-area-h100 hr{border:2px solid #f4f4f4;   color:#f4f4f4; width:94%; padding:0; margin:0 auto;}


.chart-area-h200{background-color:#fff; border-radius:0 0 10px 10px; padding:100px; }
.chart-area-h200 h4{padding-bottom:10px;}
.value-h200{display: flex;  justify-content: center; align-items: center; gap:30px; padding-top:25px;}
.value-h200 li dl{display: flex;  }
.value-h200 li dt strong{display: block; font-size:35px; line-height:35px; padding-top:10px;}
.value-h200 li dl dt{text-align: right;  font-size:20px; padding-bottom:5px;}
.value-h200 li dl dd img{display: block; width:100%;}
.value-h200 li dl dd{text-align: center; font-weight: bold; font-size:22px;}
.value-h200 li dl dd span{display: block; margin:0 auto; font-size:14px;}

.content-wrap{display: flex;  justify-content: center; align-items: center; gap:40px; padding-bottom:40px;}
.content-wrap dt h4 span{font-size:15px; display: inline-block; padding-top:2px;}
.text-box{text-align: left; flex:1;}
.text-box dt h4{text-align:left !important; font-weight:bold; padding-bottom:30px;}
.text-box dd{font-size:18px; line-height:35px;}
.type-b .img-box { order: 2 !important;}
.type-b .text-box {order: 1 !important;}
.img-box{flex:1; }
.text-box{flex:1;} 
.img-box img{width:100%;}
.content-wrap dt h4 .csub-text{padding-top:1px;}



footer{background-color:#000028; color:#fff;}
.footer-area{display: flex; padding:40px 0;}
.ml-auto{ margin-left: auto; }
.footer-area dd{font-size:30px;padding-top:20px;}
.footer-area ul{display: flex; gap:20px;}
.footer-area ul li{border:1px solid #515269; width:48px; height:48px; border-radius:50%; text-align:center; vertical-align: middle; padding-top:9px;}
.footer-area ul li:last-child{padding-top:10px;}


.f-info{border-top:1px solid #515269; padding:30px 0; }
.f-value{display: flex; font-size:13px;}
.f-value dd{padding-right:20px;}
.f-value dd a{color:#fff}


#goTopBtn{background-color:#fff; text-align: center; position:fixed; bottom:1%; right:1%; 
z-index: 9999999; cursor: pointer;  border:1px solid #efefef; width:50px; height:50px; border-radius:50%;
transition: opacity 0.3s ease-in-out; }



#contact-wrap{background: #000 url(../images/contact-bg.jpg) no-repeat center bottom; background-size: cover;
  color: #fff; widows: 100%; height:100%;}

#contact-wrap footer{background: none; border-top:1px solid #515269; position:fixed; bottom:0; width:100%;}

.contact{padding-top:13%;}
.contact dt{font-size:40px; font-weight:700; }
.contact dd{font-size:20px; line-height:35px; padding:60px 0; text-align: center; color:#fff;}
.contact dd p{border-bottom:1px solid #fff; line-height:27px; display: inline-block;}
.contact div{display: block; margin:0 auto;}
.contact div a{display: inline-block; background-color: #3617ce; color:#fff; padding:20px 80px; border-radius:100px;}
.contact div a:hover{color:#fff;}
.contact dd a{color:#fff; font-size:18px; font-weight: 700;}
.contact dd a:hover{color:#fff;}



/**반응형**/

@media only screen and (max-width: 3840px) { 
  .foreground-video-web { top: 7%; right: 23%; } 
  }

@media only screen and (max-width: 3000px) { 
  .foreground-video-web { top: 7%; right: 16%; } 
  }

@media only screen and (max-width: 2560px) { 
  .foreground-video-web { top: 7%; right: 11%; } 
  }

@media only screen and (max-width: 1600px) { 
.foreground-video-web { top: 7%; right: -5%; } 
}

@media only screen and (max-width: 1320px) { 
.pc-position{position: absolute;   top: 7%; right: -5%; }
.foreground-video-web { position: relative;}

  .contact{padding-top:17%;}
  .top-bar.inner{width:100%; padding:16px 20px 0 20px;}

  .inner{width:96%; margin:0 auto;}
  #goTopBtn{right:1%;bottom:1%;}
  .web_br{display:none;}
  .tablet_br_on{display:block;}

  .main-title h1{font-size:50px; padding-bottom:26px;}
  
  .chart-area-h100{box-sizing: border-box; }
  .value-h100{gap:10px; }
  .value-h100 dl dt img{width:90%;}
  .value-h100 dd{padding:8px 10px 0 0;}
  .value-h200 li dl dd img{width:90%;}
  .value-h200 li dl dt{padding:20px 0 0 0; width:200px;}
  .value-h200 {gap:25px;}
 .img-box img{width:100%;}
 .features-item li>div img{ display: block; max-width: 100%; height: auto;}
 .fitem-inner h4 strong img{display: inline;}
    .fitem-inner dl{padding:15px;}
.fitem-inner dt{font-size:18px; line-height:30px; padding:0 0 20px 15px;}
.fitem-inner dt:before{margin-top:7px; height:45px; }

    .footer-area ul li{padding-top:10px;}
    
    
}

@media only screen and (max-width: 1200px) { 
.pc-position{position: absolute;   top: 7%; right: -15%; }
    
}



@media only screen and (max-width: 1024px) { 

.pc-position{top: 16%; right: -15%; }
    
#mainNav{top:1000px;}

    
.top-bar.inner{padding:15px 30px;}
h3{line-height:45px;}
.tbr_off{display:none;}
section{padding:130px 30px;}
.inner{width:90%; margin:0 auto;}

.main-title{padding-top:80px;}
.main-title h1{font-size:45px; padding-bottom:15px; padding-top:100px;}
.main-title dd{font-size:30px;}
.mo_br{display:block;}
.main-title dd:last-child{font-size:22px; line-height:35px; letter-spacing:0; font-weight:400;}
.main-title dd:after{margin:35px 0 25px 0;}



h2{font-size:45px;}
#overview dt{padding:25px 0 30px 0;}
#overview dd{font-size:25px;}
#overview dd:last-child{font-size:20px; line-height:35px; padding-top:30px;}

.features-item h4{font-size:24px;}
.features-item{display:block;}
.features-item li{margin-bottom:30px;}
.features-item li:last-child{margin-bottom:0;}
.fitem-inner{padding:25px 20px 20px 20px;}
.fitem-inner dt{font-size:20px; }
.fitem-inner dl{padding:30px 30px 0 30px;}
    
.value-wrap{width:200px; height:200px;}
.ov-chart ul{gap:30px;}
.ov-chart li:first-child .value{width:175px; height:175px;}
.ov-chart li:nth-child(2) .value{width:175px; height:175px;}
.ov-chart li:last-child .value{width:175px; height:175px;}
.ov-chart li h2{padding:65px 0 20px 0;}

.value-h100{display:block;}
.value-h100 dl dt img{width:50%;}
.value-h100 dd{text-align:center; padding:10px 0 0 0 ; font-size:15px;}
.value-h100 ul{justify-content: center; padding-bottom:20px;}
.value-h100 ul li:first-child{width:200px; height:200px; padding-top:45px;}
.value-h100 ul li:nth-child(2){width:200px; height:200px; padding-top:45px;}
.value-h100 ul li:last-child{width:200px; height:200px; padding-top:45px;}


.section-tit dt{line-height:30px;}
.gpu-spec th{font-size:18px;}
.gpu-spec td{font-size:15px;}
.gpu-spec th,td{width:25%;}

.value-h200{display:block;}
.value-h200 li:first-child{border-bottom:1px solid #ccd0db; padding-bottom:40px; margin-bottom:40px;}
.value-h200 li dl dd{font-size:15px;}

.content-wrap{gap:30px;}
    .contact{padding-bottom: 100px; }
    
.text-box dt h4{padding-bottom:20px;}
.text-box dd{line-height:25px; font-size:15px;}


.footer-area{display:block;}
.f-value{display:block;}
.footer-area ul{gap:15px;}

}


    

@media only screen and (max-width: 820px) { 
    
    
    .foreground-video-web{display: none;}
    .foreground-video-tablet{display: block; position:absolute;bottom:0; right:0; height:700px;}
    
    
    
    

    .value-h100{padding:50px 0 70px 0;}
    .chart-area-h200{padding:70px 30px;}
    .value-h200 li dl dt{padding:0;}
    .value-h200 li dl dd{font-size:20px;}
    
    
    }
    
    
@media only screen and (max-width: 768px) {
  
    
.contact{padding-top:25%;}
.nav{padding:20px;}
    
    /* 삼각형 버튼 */
.submenu-toggle { background: none;border: none;cursor: pointer;}
.submenu-toggle.rotate svg {transform: rotate(180deg);transition: transform 0.3s ease;}
.submenu-toggle{display: block;}
.submenu-toggle.rotate { transform: rotate(180deg);}  
.submenu {display: none;}
.submenu.open {display: block; padding-top:20px;}
.nav-item.active a{border-bottom:none;}


.main-title{padding:80px 0 80px 30px;}

.ov-chart ul{gap:10px;}
.gpu-spec thead{display: none;}
.gpu-spec th{ background-color:#c1cdf7; border-bottom:none; } 
.gpu-spec td{display: block; width:100%; padding:30px 10px; border-bottom:1px solid #d2dcff }
.gpu-spec td:last-child{border-bottom:none;}
.gpu-spec tbody{border-top:1px solid #becbfa; background-color:#ecf0fb;}
  .td-b200{background-color:#ecf0fb; color:#3617ce; font-weight:bold;}
  .data-label{display:block; margin:10px auto; background-color: #d2dcff; padding:3px ; border-radius:50px; font-weight:bold; width:80px;}
  .td-b200 .data-label{background-color:#3617ce;; color:#fff; font-weight:bold;} 
    #performance p{grid-template-columns: 1fr;}
    #performance p strong{text-align:left;}
    
  .gpu-spec tr{border-bottom:4px solid #d2dcff;}
  .content-wrap{  flex-direction: column !important; display: flex !important;}
  .type-b .img-box { order: 1 !important;}
  .type-b .text-box {order: 2 !important;}
    
    .nav-item li{padding:0 10px;}
    .features-item li>div img{border-radius:10px;}

}


@media only screen and (max-width: 640px) {
    
  
#mainNav{top:700px;}
.site-header{height:700px;}
    
    
    .submenu.open {padding-top:0px;}
    
   
    section{padding:80px 30px;}
    .main-title h1{font-size:30px; padding-bottom:10px;}
    .main-title dd:last-child{font-size:18px; line-height:30px;}
    .main-title{padding-top:40px;}
    .gnb{font-size:14px;}
    .gnb li:last-child{padding:3px 5px;}
    .gnb li + li{margin-left:0.5rem;}
    
    .nav-item.active::after{display:none;}
    
    h2{font-size:30px;}
    h3{font-size:30px; line-height:45px;}
    #overview img{width:50%; padding-top:30px;}
    #overview dd{font-size:20px;}
    #overview dd:last-child{font-size:15px; line-height:25px;}
    #overview dt{padding:20px 0 20px 0;}
    #overview dl{padding-bottom:40px;}
    
    .value-wrap{display: flex;
  flex-wrap: wrap;
  justify-content: center; margin:5px auto; border:none; padding:0; font-size:14px; width:100%; height:100%; } 
    .ov-chart ul{display: block; margin:0 auto;}
    .ov-chart h4{padding-bottom:20px;}
    .ov-chart li h2{font-size:35px; padding:30px 0 5px 0;}
    .ov-chart li{text-align:center;}
    .ov-chart{padding:25px 0;}
    .ov-chart>p{margin-bottom:30px;}
    .ov-chart span{font-size:15px; display: inline-block; padding-top:0px; line-height:25px;}
    .ov-chart li:first-child span:after{margin:5px auto; flex:1;}
     .ov-chart li:nth-child(2) span:after{margin:5px auto; flex:1;}
     .ov-chart li:last-child span:after{margin:5px auto; flex:1;}
    
    .ov-chart li:first-child span{padding-top:30px;}
    
    .ov-chart li:first-child .value{ width:100px; height:100px; box-sizing: border-box;  min-width: 100px; }
    .ov-chart li:nth-child(2) .value{ width:100px; height:100px;box-sizing: border-box;  min-width: 100px;}
    .ov-chart li:last-child .value{width:100px; height:100px; box-sizing: border-box;  min-width: 100px; grid-column:1 / -1;}
    .ov-chart li{display: block; margin: 0 auto;}
 
    
    
    .fitem-bg dd{font-size:15px; line-height:25px;}
    
    .section-tit dt{font-size:15px; line-height:25px;}
    .section-tit dt{padding:20px 0 40px 0;}
    #specs .section-tit h3 {padding-bottom: 20px;}
    
    
    .value-h100 ul{gap:14px;}
    .value-h100 ul li:first-child{width:150px; height:150px;padding-top:35px;}
    .value-h100 ul li:nth-child(2){width:150px; height:150px;padding-top:35px;}
    .value-h100 ul li:last-child{width:150px; height:150px; padding-top:35px;}
    .value-h100 ul li strong{font-size:25px; padding-top:10px;}
    .value-h200 li dt strong{padding-top:10px;}
    .value-h200 li dl dd img{width:100%;}
    .br_480{display:block;}

    footer{padding:0 30px;}
    .footer-area p img{padding-bottom:10px}
    
  .contact{padding:25% 0;}
   
}
    
   @media only screen and (max-width: 540px) {
    
 .foreground-video-tablet{ position: absolute;  height:600px; 
  pointer-events: none;  display: block; transform: translate(0, 0%); } 
       
       .chart-area-h100{padding:70px 0 0 0 ;}
       .value-h200{padding-top:0;}
       
    
    }


    
@media only screen and (max-width: 480px) {
   
    .br_480on{display: block;}
  section{padding:80px 20px;}
    
        .swiper-slide video{width:auto;}
      .foreground-video-tablet{ position: absolute;  height:600px; 
  pointer-events: none;  display: block; transform: translate(-3%, -10%); } 
    #mainNav{top:600px;}
.site-header{height:600px;}
    
    #mainNav{ padding-left:20px;}
    .top-bar.inner{padding:25px 20px 0 20px;}
    footer{padding: 0 20px;}
.footer-area p img{width:50%;}
.footer-area{padding:20px 0;}
.ml-auto{padding-top:10px;}
.nav-item.active::after {display:none;}
    .main-menu li.mobile-first a{padding-bottom:14px !important;}
    .main-menu li.mobile-first{padding-top:12px; box-sizing: border-box;}
    .nav{padding:5px 0;}
    
    .logo img{width:90%; }
    .main-title{padding-top:40px;}
    .main-title h1{font-size:27px; line-height:40px;}
    .main-title dd{font-size:20px; padding-bottom:0;}
    .main-title dd:last-child{font-size:16px; }
    .main-title dd:after { margin: 20px 0 14px 0;background-color:#efefef; }
   
    h3{font-size:25px; line-height:38px;}
    h4{font-size:18px;}
 
    

    .ov-chart li:first-child span{padding-top:0;}
    .ov-chart li{padding-bottom:20px;}
    
    .features-item h4{font-size:20px;}
    .fitem-inner dt{font-size:17px; line-height:25px;}
    .fitem-inner dt:before{margin-left:23px;}
    .fitem-inner{padding:25px 0 0 0;}
    .fitem-inner dt{padding:0 0 15px 15px;}
    .fitem-inner dt:before{margin-top:3px;}
    
    
    .gpu-spec th{width:20%;}
    
       .chart-area-h100 h4{font-size:20px; line-height:35px;}
      .chart-area-h100{padding:50px 0 0 0 ;}
    .chart-area-h200{padding:50px 30px;}
    .value-h100 ul{display: block;}
    .value-h100 ul li{ margin:10px auto;}
    .value-h100 dl dt img {width: 80%;}
  
   
    .value-h100 dd{font-size:14px;}
   
   
    .value-h100{padding:30px 0 50px 0;}
    .value-h100 ul li:first-child{width:180px; height:180px; padding-top:45px;}
    .value-h100 ul li:nth-child(2){width:180px; height:180px;padding-top:45px;}
    .value-h100 ul li:last-child{width:180px; height:180px;padding-top:45px;}
    .value-h100 ul li strong{font-size:28px;}
    
    
    .value-h200 li:first-child{padding-bottom:20px; margin-bottom:20px;}
    .value-h200 li dl dd{font-size:13px;}
     .value-h200 li dl dd{font-size:14px;}
    .value-h200 li dl dt{font-size:15px; padding-right:20px; padding-bottom:0;}
     .value-h200 li dt strong{font-size:20px; padding-top:0;}
    
    #performance p{line-height:20px; font-size:12px;}
    
    .footer-area dd{font-size:20px; letter-spacing: 0;}
    .footer-area dt img{width:80%;}
    .content-wrap{padding-bottom:30px;}
    .footer-area ul li{width:42px; height:42px;}
    .footer-area ul{gap:10px;}
    .footer-area ul li{padding-top:7px;}
    .footer-area dt img{width:60%;}
    .f-info{padding:20px 0 ;}
    .contact dt{font-size:30px;}
    .contact dd{padding:40px 0; font-size:17px; line-height:30px;}
    .contact{padding:130px 0;}
    
     #contact-wrap footer {
    position: static !important; /* fixed 해제 */
    bottom: auto !important;     /* 아래 고정 해제 */
    left: auto !important;
    right: auto !important; background:#000; }
    .contact{padding-bottom:70px;;}
    
}

  
    
    
    @media only screen and (max-width: 400px) {
   .foreground-video-tablet{ position: absolute;  height:600px; transform: translate(-3%, -15%); } 
    .main-title{padding:35px 0 80px 15px;}
    }
    
      @media only screen and (max-width: 360px) {

          .main-title h1{font-size:25px;}
    }