/* ************ 메인페이지 스타일 ************ */
/*** 공통 ***/
.main {background:#000;}

.main .part1 {height:100vh; position:relative;}
.main .inner {max-width:1400px; margin:0 auto;}
.main .inner-vw90 {max-width:90vw; margin:0 auto; height:100vh;}
.main .top-wrap {display:flex; justify-content:space-between; align-items:center;}
.main .top-wrap a {display:block; width:40px; height:40px; position:relative; border:1px solid #e5e5e5; text-indent:-9999px; background:#fff;}
.main .top-wrap a:before {content:""; display:block; width:11px; height:2px; position:absolute; background:#666; top:50%; left:50%; transform:translate(-50%,-50%);}
.main .top-wrap a:after {content:""; display:block; width:2px; height:11px; position:absolute; background:#666; top:50%; left:50%; transform:translate(-50%,-50%);}

/*** 메인 대표화면 ***/
.main .visual {position:absolute; width:100%; height:100%; background:#000;}
.main .visual .inner {position:relative; height:100%; width:100%;}
.main .visual .video-wrap {z-index: 1; position:fixed; right:0; bottom:0; width:100%; height:100%;}
.main .visual .video-wrap video {transform:scale(1); transform-origin:center; opacity:.7; object-fit:cover; object-position:center; position:absolute; right:0; width:100%; height:100vh;}
.main .m_content {position:relative; top:0; z-index:2; width:100%;}
.main .visual-contents {display:flex; justify-content:space-between; align-items:flex-end; gap:100px; height:77vh;}
.main .visual-text {color:#fff;}
.main .visual-text h2 {font-weight:700; font-size:70px; color:#F9F6E9; line-height:1.2;}
.main .visual-text p {font-size:20px; font-weight:400; margin-top:50px; padding-top:50px; position:relative;}
.main .visual-text p:before {content:""; display:block; width:100px; height:2px; background:#fff; position:absolute; top:0; left:0; }
.main .visual-text p b {font-weight:700; font-size:24px;}
.main .visual-btnWrap {display:flex; flex-direction:column; align-items:flex-end;}
.main .visual-btnWrap a {display:flex; gap:20px; justify-content:flex-end; align-items:center; line-height:1; color:#fff; padding:11px 26px; border-radius:3rem; transition:all 0.3s; position:relative; width:170px;}
.main .visual-btnWrap a i {width:30px; height:30px;}
.main .visual-btnWrap a+a {margin-top:10px;}
.main .visual-btnWrap a.product {background:rgba(49,151,66,0.7); border:2px solid rgba(49,151,66,0.1); justify-content:space-between;}
.main .visual-btnWrap a.product i {background:url(/images/main/i-quest.svg) no-repeat center / 22px; }
.main .visual-btnWrap a.product:hover {background:#fff; color:rgba(49,151,66,1); border:2px solid rgba(49,151,66,1);}
.main .visual-btnWrap a.product:hover i {background:url(/images/main/i-quest_hover.svg) no-repeat center / 22px; }
.main .visual-btnWrap a.call {background:rgba(231,65,42,0.7); border:2px solid rgba(231,65,42,0.1); overflow:hidden;}
.main .visual-btnWrap a.call:hover {width:220px;}
.main .visual-btnWrap a.call .txt {position: absolute; left:26px; top:50%; transform:translate(0, -50%); white-space:nowrap; transition:transform 0.35s ease, opacity 0.35s ease;}
.main .visual-btnWrap a.call .txt-label {opacity:1; transform:translate(0, -50%);}
.main .visual-btnWrap a.call .txt-number {opacity:0; transform:translate(100%, -50%);}
.main .visual-btnWrap a.call:hover .txt-label {opacity:0; transform:translate(-100%, -50%);}
.main .visual-btnWrap a.call:hover .txt-number {opacity:1; transform:translate(0, -50%);}
.main .visual-btnWrap a.call i {background:url(/images/main/i-call.svg) no-repeat center / 22px; }
.main .visual-btnWrap a.call:hover {background:#fff; color:rgba(231,65,42,1); border:2px solid rgba(231,65,42,1);}
.main .visual-btnWrap a.call:hover i {background:url(/images/main/i-call_hover.svg) no-repeat center / 22px;}
.main .part1 .scroll-ani {position:absolute; left:50%; bottom:30px; transform:translateX(-50%);     display:flex; flex-direction:column; align-items:center; gap:10px;} 
.main .part1 .scroll-ani .wheel {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; height:50px; width:20px; border:2px solid #fff; border-radius:3rem;}
.main .part1 .scroll-ani .wheel .dot {width:8px; height:3px; background:#fff; opacity:0.5; border-radius:3px; animation: pulse 1.5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.5s);}
.main .part1 .scroll-ani .arrow  {width:11px; height:6px; }
.main .part1 .scroll-ani .arrow i {display:block; width:11px; height:6px; background:url(/images/main/scroll-ani_arrow.svg) no-repeat center / 11px; animation: mouse-arrow 1.5s 
ease infinite;}

/* 제품소개 */ 
.main .public-wrap {position:relative; background:url(/images/main/main-part2_bg.webp) no-repeat center / cover; padding:150px 0;}
.main .public-wrap .tit-space {text-align:center;}
.main .public-wrap .tit-space h2 {font-size:40px;}
.main .public-wrap .tit-space p {color:#666; margin-top:20px;}
.main .public-wrap .banner-space {position:relative;}
.main .public-wrap .banner-space .inner {max-width:1420px; margin:0 auto; padding:50px 0; overflow:hidden; transform:translateX(10px);}
.main .public-wrap .product-list {display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:50px auto 0; max-width:1200px;}
.main .public-wrap .product-list a {display:inline-block; font-size:18px; color:#fff; padding:10px 30px; border-radius:2rem; background:var(--base1); transition:none;}
.main .public-wrap .product-list li:hover a{background:var(--base2);}

.main .public-wrap .publication {max-width:1400px; overflow:visible; position:relative;}
/*.main .public-wrap .publication:before {content:""; display:block; width:20px; height:calc(50% + 50px); background:var(--bg1); position:absolute; left:-20px; bottom:-50px; z-index:3;}*/
.main .public-wrap .swiper-slide { width:335px; margin-right:20px; }
.main .public-wrap .swiper-slide a {display:grid;}
.main .public-wrap .swiper-slide a:hover .public-txt p {color:var(--base1);}
.main .public-wrap .public-img {background:#fff; aspect-ratio:335/370; padding:20px; text-align:center; box-shadow: 20px 20px 20px -10px rgba(0, 0, 0, 0.05); border-radius:20px;}
.main .public-wrap .public-img img {object-fit:contain; width:100%; height:100%;}
.main .public-wrap .public-txt {text-align:center;}
.main .public-wrap .public-txt p {font-size:24px; line-height:1.4; margin-top:20px; transition:all 0.3s;}
.main .public-wrap .public-txt span {display:block; font-weight:500; font-size:14px; color:var(--base1); line-height:1;}
.main .public-wrap .public-txt dl {font-size:14px; color:#666; margin-top:20px;}
.main .public-wrap .public-txt dl dt {white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:3px;}
.main .public-wrap .swiper-button-prev {background:url(/images/main/banner_prev.svg) no-repeat center / 30px; left:9%; top:50%; transform: translateY(-50px); transition:all 0.3s; }
.main .public-wrap .swiper-button-prev:hover:before {content:""; position: absolute;
  inset: 0; background:url(/images/main/banner_prev.svg) no-repeat center / 30px; filter:brightness(0); z-index: 0;}
.main .public-wrap .swiper-button-next {background:url(/images/main/banner_next.svg) no-repeat center / 30px; right:9%; top:50%; transform: translateY(-50px); transition:all 0.3s;}
.main .public-wrap .swiper-button-next:hover:before {content:""; position: absolute;
  inset: 0; background:url(/images/main/banner_next.svg) no-repeat center / 30px; filter:brightness(0); z-index: 0;}

/* 기술소개 */
.main .tech-intro {background:url(/images/main/main-part3_bg.webp) no-repeat center / cover; padding:200px 0;}
.main .tech-intro .inner {display:flex; justify-content:space-between; gap:30px 100px; }
.main .tech-intro .tit-space {color:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:30px; width:calc(100% - 960px);}
.main .tech-intro .tit-space h2 {color:var(--base3); line-height:1;}
.main .tech-intro .tit-space p.big {font-size:60px; font-weight:700; line-height:1.2;}
.main .tech-intro .tit-space p.small {font-size:18px; opacity:0.8; margin-top:20px;}
.main .tech-intro .post-space {display:grid; grid-template-columns:1fr 1fr; gap:20px; text-align:center; width:860px;}
.main .tech-intro .post-space .img {overflow:hidden; border-radius:15px; position:relative; aspect-ratio:1.6/0.9; background:#fff;}
.main .tech-intro .post-space .img img, .main .tech-intro .post-space .img iframe {width:100%; object-fit:cover; aspect-ratio:1.6/0.9;  transtion:all 0.3s;}
.main .tech-intro .post-space a:hover img {transform:scale(1.1);}
.main .tech-intro .post-space a:hover p {color:var(--base3);}
.main .tech-intro .post-space a.youtube .img:before {content:""; display:block; width:20%; height:20%; min-width:40px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:url(/images/main/i-youtube.svg) no-repeat center / contain; z-index:2;}

.main .tech-intro .post-space p {color:#fff; margin-top:15px; line-height:1.4; font-weight:600; transition:all 0.3s;}
.main .tech-intro .link a {font-weight:600; display:inline-block;}
.main .tech-intro .link a:hover {color:var(--base3);}
.main .tech-intro .link a+a {margin-left:30px;}
.main .tech-intro .link a .arrow {width:140px; border-bottom:2px solid #fff; margin-top:10px; position:relative;}
.main .tech-intro .link a:hover .arrow {border-bottom:2px solid var(--base3); transition:all 0.3s;}
.main .tech-intro .link a .arrow:before {content:""; display:block; width:13px; height:2px; transform:rotate(60deg); background:#fff; position:absolute; right:-2.5px; bottom:2.5px;}
.main .tech-intro .link a:hover .arrow:before {background:var(--base3);}


/* 공지사항&뉴스 */
.main .notice-wrap {background:#fff; padding:100px 0;}
.main .notice-wrap .inner {display:flex; gap:100px;}
.main .notice-wrap .left-space {width:calc(50% - 100px);}
.main .notice-wrap .right-space {width:50%; display:flex; flex-direction:column; justify-content:space-between; gap:20px;}
.main .notice-wrap h2 {color:#000; font-size:32px; line-height:1.2;}
.main .notice-wrap .tit-top {display:flex; justify-content:space-between; align-items:center;}
.main .notice-wrap .tit-top a {text-transform:uppercase; color:#999; font-size:12px; font-weight:500;}
.main .notice-wrap .tit-top a:hover {color:var(--base1);}
.main .notice-wrap .tit-top a  .arrow {display:inline-block; margin-left:10px; position:relative; width:28px; border-bottom:1px solid #999; padding-top:7px; transition:all 0.3s;}
.main .notice-wrap .tit-top a  .arrow:before {content:""; display:block; width:8px; height:1px; background:#999; transform:rotate(45deg); position:absolute; right:0; bottom:2px;}
.main .notice-wrap .tit-top a:hover .arrow {border-bottom:1px solid var(--base1);}
.main .notice-wrap .tit-top a:hover .arrow:before {background:var(--base1);}
.main .notice-list {margin-top:50px;}
.main .notice-list li+li {margin-top:10px;}
.main .notice-list li a {display:flex; justify-content:space-between; align-items:center; color:#333; gap:20px;}
.main .notice-list li a span {color:#666; font-size:14px;}
.main .notice-list li a p {overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:keep-all; transition:all 0.3s;}
.main .notice-list li a:hover p {color:var(--base1);}

.main .notice-wrap .right-space .link {display:flex; justify-content:space-between;}
.main .notice-wrap .right-space .link .icon {width:130px; height:130px; border-radius:15px; background:#ccc; margin-bottom:10px; transition:all 0.3s;}
.main .notice-wrap .right-space .link li {text-align:center; font-weight:600;}
.main .notice-wrap .right-space .link li a:hover {color:var(--base1);}
.main .notice-wrap .right-space .link li a:hover .icon {transform:translateY(-5px); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.main .notice-wrap .right-space .link li.product .icon {background:#DEB343 url(/images/main/i-quest_big.svg) no-repeat center / 50%;}
.main .notice-wrap .right-space .link li.location .icon {background:#BCCD30 url(/images/main/i-location.svg) no-repeat center / 40%;}
.main .notice-wrap .right-space .link li.faq .icon {background:#B2D235 url(/images/main/i-faq.svg) no-repeat center / 45%;}
.main .notice-wrap .right-space .link li.shop .icon {background:#6C9F41 url(/images/main/i-shop.svg) no-repeat center / 50%;}

@keyframes mouse-arrow {
  0% {opacity: 1; transform: translateY(0);}
  100% {opacity: 1; transform: translateY(10px);}
}

@keyframes pulse {
  0%   {  opacity: .45; }
  15%  {  opacity: 1;  }
  35%  {  opacity: .7;  }
  100% {  opacity: .45; }
}


/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {
.main .part1 {height:100vh;}

.main .visual-contents {height:80vh;}
.main .visual-text h2 {font-size:45px;}
.main .visual-text p {font-size:16px; margin-top:40px; padding-top:40px;}
.main .visual .video-wrap {position:static;}
.main .public-wrap {padding:100px 0;}
.main .public-wrap .inner {padding:0 30px;}
.main .public-wrap .tit-space h2 {font-size:32px;}
.main .public-wrap .product-list {margin:30px auto 0;}
.main .public-wrap .banner-space {padding:0 30px;}
.main .public-wrap .banner-space .inner {transform:translateX(0); width:calc(100% - 50px); padding:0 20px; position:relative; margin-top:50px;}
.main .public-wrap .banner-space .inner:before {content:""; display:block; width:20px; height:100%; background:var(--bg1); position:absolute; top:0; left:0; z-index:2;}
.main .public-wrap .swiper-button-next {background: url(/images/main/banner_next.svg) no-repeat center / 20px; right:10px;}
.main .public-wrap .swiper-button-next:hover:before {background:url(/images/main/banner_next.svg) no-repeat center / 20px;}
.main .public-wrap .swiper-button-prev {background: url(/images/main/banner_prev.svg) no-repeat center / 20px; left:10px;}
.main .public-wrap .swiper-button-prev:hover:before {background:url(/images/main/banner_prev.svg) no-repeat center / 20px;}
.main .public-wrap .public-txt p {font-size:20px;}

.main .tech-intro {padding:100px 0;}
.main .tech-intro .inner {flex-direction:column; padding:0 30px; gap:40px;}
.main .tech-intro .tit-space {width:100%;}
.main .tech-intro .tit-space h2 {font-size:22px;}
.main .tech-intro .tit-space p.big {font-size:45px;}

.main .notice-wrap {padding:80px 0;}
.main .notice-wrap h2 {font-size:28px;}
.main .notice-wrap .inner {gap:50px; padding:0 30px;}
.main .notice-list {margin-top:30px;}
.main .notice-wrap .left-space {width:calc(50% - 50px);}
.main .notice-wrap .right-space {justify-content:flex-start;}
.main .notice-wrap .right-space .faq {display:none;}
.main .notice-wrap .right-space .link {gap:30px;}
.main .notice-wrap .right-space .link li {width:calc(100% / 3);}
.main .notice-wrap .right-space .link .icon {width:100%; height:auto; aspect-ratio:1/1;}
}

/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {
.main .visual-contents {flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:30px; }
.main .visual-text {width:100%;}
.main .visual-text p {margin-top:30px; padding-top:30px;}
.main .visual-text p b {font-size:20px;}
.main .visual-btnWrap {align-items:flex-start;}
.main .visual-btnWrap a {padding:8px 26px;}
.main .visual-text h2 {font-size:36px; line-height:1.3;}


.main .public-wrap {padding:80px 0;}
.main .public-wrap .tit-space h2 {font-size:28px;}

.main .tech-intro {padding:80px 0;}
.main .tech-intro .tit-space {gap:20px;}
.main .tech-intro .tit-space p.big {font-size:36px;}
.main .tech-intro .tit-space p.small {font-size:17px;}

.main .tech-intro .post-space {width:100%;}
.main .public-wrap .product-list a {font-size:16px;}
.main .public-wrap .banner-space .inner {margin-top:30px;}
.main .public-wrap .public-txt p {font-size:18px;}

.main .notice-wrap {padding:60px 0;}
.main .notice-wrap .inner {flex-direction:column; gap:40px;}
.main .notice-wrap h2 {font-size:24px;}
.main .notice-wrap .left-space {width:100%; }
.main .notice-wrap .right-space {width:100%;}
}


@media screen and (max-width:767px) { 
.main .visual-text h2 {font-size:30px;} 
.main .visual-text p {margin-top:25px; padding-top:25px;}
.main .visual-btnWrap a.call:hover {width:210px;}
.main .visual-contents {}
.main .visual-banner {width:auto;}
.m_content h3 {font-size:24px;}
.main .top-wrap a {width:35px; height:35px;}
.main .public-wrap {padding:60px 0;}
.main .public-wrap .swiper-slide {width:100%;}
.main .public-wrap .inner {padding:0 20px;} 
.main .public-wrap .tit-space h2 {font-size:24px;}
.main .public-wrap .product-list {margin:25px auto 0; gap:10px 5px;}
.main .public-wrap .product-list a {padding:8px 20px;}

.main .tech-intro {padding:60px 0;}
.main .tech-intro .tit-space h2 {font-size:18px;}
.main .tech-intro .tit-space p.small {margin-top:15px;}
.main .tech-intro .tit-space p.big {font-size:30px;}

.main .notice-wrap .inner {gap:30px; padding:0 20px;}
.main .notice-wrap h2 {font-size:22px;}
.main .notice-list {margin-top:20px;}
}

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

.main .visual-text h2 {font-size:24px;}
.main .visual-banner {width:auto; gap:10px;}
.main .visual-banner article {padding:30px 10px;}
.main .visual-text p b {font-size:18px;}
.main .public-wrap {padding:50px 0;}
.main .public-wrap .public-txt p {font-size:16px;} 
.main .public-wrap .product-list a {font-size:15px;}
.main .tech-intro .tit-space p.big {font-size:26px;}
.main .tech-intro .tit-space p.small {font-size:16px;}
.main .tech-intro .post-space {grid-template-columns:1fr;}
.main .tech-intro .link a .arrow {width:120px;}
.main .tech-intro .link a .arrow:before {bottom:3.5px;}
.main .tech-intro .link a+a {margin-left:20px;}
.main .notice-list li a {flex-direction:column; gap:0; align-items:flex-start;}
.main .notice-wrap .right-space .link li {font-size:14px; line-height:1.2;}
.main .notice-wrap .right-space .link {gap:10px;}
}