@import url('common.css');

html.lenis, html.lenis body {height:auto;}
html.lenis.lenis-smooth {scroll-behavior:auto !important;}
html.lenis.lenis-stopped {overflow:hidden;}
html.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior:contain;}

.title-area{display: flex; flex-direction: column; gap: 12px;}
.title-area h2{font-weight: 700; color: var(--black); line-height: 120%;}



/* Visual */
.visual {position:relative; height:100vh; height: var(--vh); overflow:hidden; background-color:var(--bk000); z-index: 2; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden;}
.visualSwiper, .visualSwiper .swiper-wrapper, .visualSlide {height:100%; transform:translateZ(0);}
.visualSlide {position:relative; overflow:hidden; background-color:var(--bk000);}
.visualBg {position:absolute; inset:0; z-index:0; overflow:hidden; width:100%; height:100%; opacity: 0.85;}
.visualBg picture {display:block; width:100%; height:100%;}
.visualBg::after{content: ''; display: block; width: 100%; height: 100%; opacity: 0.3; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.00) 100%); position: absolute; left: 0; top: 0; pointer-events: none;}
.visualBg img {width:100%; height:100%; min-width:100%; min-height:100%; max-width:none; object-fit:cover; object-position:center; transform:scale(1) translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden; opacity: 0.8;}
.swiper-slide-active .visualBg img {animation:visualZoom 6s linear forwards;}
.visualCopy {position:absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); z-index:2; display:flex; flex-direction:column; justify-content:center; gap:24px; margin-top: 100px;}
.visual.is-hide .visualCopy{margin-top: 0 !important;}
.visualCopy h2 {color:var(--white); opacity:0; transform:translateY(40px);}
.visualCopy h2 br{display: block;}
.visualCopy p {color:var(--basicW); line-height: 165%; opacity:0; transform:translateY(40px);}
.visualCopy p br{display: block;}
.swiper-slide-active .visualCopy h2 {animation:visualFadeUp 1s ease forwards;}
.swiper-slide-active .visualCopy p {animation:visualFadeUp 1s ease 0.25s forwards;}
@keyframes visualZoom {0%{transform:scale(1) translateZ(0);} 100%{transform:scale(1.1) translateZ(0);}}
@keyframes visualFadeUp {0%{opacity:0;transform:translateY(40px);} 100%{opacity:1;transform:translateY(0);}}
.visualCtrl {position:absolute; top:45%; left:50%; z-index:3; display:flex; align-items:center; gap:20px; transform:translate(-50%,-50%); margin-top: -100px;}
.visualCtrl.is-hide{display: none;}
.visualPrev, .visualNext {display:flex; align-items:center; justify-content:center; width:24px; height:24px; color:var(--white);}
.visualPrev i, .visualNext i {display:block; width:24px; height:24px; font-style:normal;}
.visualPrev i::before, .visualNext i::before {display:block; font-family:var(--icon); font-size:24px; line-height:100%; color:inherit; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';}
.visualPrev i::before {content:'\e2ea';}
.visualNext i::before {content:'\e5e1';}
.visualPrev:hover, .visualNext:hover {opacity:0.6; transition: all .3s;}
.visualNum {display:flex; align-items:center; gap:13px;  color: var(--white);}
.visualCur {width:22px; text-align:center;}
.visualSlash {display:block; width:12px; height:1px; background-color:rgba(255, 255, 255, 0.3); transform:rotate(-60deg);}
.visualTot {opacity:0.2;}

.visualScrollWrap {position:absolute; bottom:50px; left:50%; z-index:3; transform:translateX(-50%);}
.visualScroll {display:inline-flex; gap:2px;}
.visualScrollMouse {position:relative; display:block; width:25px; height:35px; border:2.5px solid var(--white); border-radius:40px ;}
.visualScrollMouse::after {content:''; position:absolute; top:6px; left:50%; margin-left: -1.5px; width:3px; height:6px; background-color:var(--white); border-radius:900px; animation:visualScrollWheel 1.6s ease-in-out infinite;}
.visualScrollIco {display:block; width:22px; height:22px; font-style:normal;}
.visualScrollIco::before {content:'\ead0'; display:block; width:22px; height:22px; font-family:var(--icon); font-size:22px; line-height:100%; color:var(--white); -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';}
.visualScroll:hover {opacity:0.6;}
@keyframes visualScrollWheel {0%,100%{transform:translateY(0);opacity:1;} 50%{transform:translateY(6px);opacity:0.35;}}




/* About Us */
.about {position:relative; z-index: 2; overflow:hidden; background-color:var(--white);}
.about-bg {position:absolute; top: 0; left: 0; width: 100%; height: 100%; background:url('/img/about_bg.png') no-repeat right top / contain; pointer-events:none; display: block; transform:scale(1); transform-origin:right top; will-change:transform;}
.about .basic_in {position:relative; z-index:1; display:flex; flex-direction:column; gap:60px;}
.about .title-area {align-items:center; text-align:center;}
.aboutList {display:flex; gap:30px;}
.aboutList li {flex:1;}
.aboutCard {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:600px; padding:50px 30px; border-radius:var(--borderR20); overflow:hidden; background-color:var(--black);}
.aboutCard img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: all .6s; transform: scale(1);}
.aboutCard::before {content:''; position:absolute; inset:0; z-index: 2; width: 100%; height: 100%; opacity: 0.3; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.00) 100%); transition: all .4s;}
.aboutCard::after {content:''; position:absolute; inset:0; z-index: 3; width: 100%; height: 100%; opacity: 0; background: linear-gradient(0deg, #C31539 0%, rgba(195, 21, 57, 0.50) 100%); transition: all .4s;}
.aboutCardIn {position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; width:100%;}
.aboutCard strong {color:var(--white); text-align:center; width: 100%; transform: translateY(200px); transition: all .4s;}
.aboutCardDesc {color:var(--basicW); min-height: 5.1em; line-height: 1.7em; text-align:center; pointer-events:none; margin-top: 14px; opacity: 0; transition: all .4s;}
.aboutCardBtn {display:flex; justify-content:center; margin-top: 40px; opacity: 0; transition: all .4s;}

.aboutCard:hover::before{opacity: 0;}
.aboutCard:hover::after{opacity: 0.8;}
.aboutCard:hover strong {transform: translateY(0);}
.aboutCard:hover .aboutCardDesc{opacity: 1;}
.aboutCard:hover .aboutCardBtn{opacity: 1;}
.aboutCard:hover img {transform: scale(1.1);}




/* R&D */
.rnd {position:relative; background:var(--bk000); z-index: 1; overflow: hidden;}
.rndPin {position:relative; height:100vh; overflow:hidden;}
.rndBg {position:absolute; inset:0; z-index:0; overflow:hidden; width:100%; height:100%; background-color:#000925;}
.rndBg img {width:100%; height:100%; object-fit:cover; object-position:center 58%; opacity:0.8; transform:scale(1); transform-origin:center center; will-change:transform;}
.rndStage {position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; height:100%; padding:120px 0 100px;}
.rndHead {position:relative; z-index:2;}
.rnd .title-area {align-items:center; text-align:center; opacity:0; transform:translateY(-40px); will-change:opacity,transform;}
.rnd .title-area h2 {color:var(--white);}
.rnd .title-area p {color:var(--white);}
.rnd .title-area p br{display: block;}
.rndCards {position:absolute; inset:0; z-index:3; overflow:hidden; pointer-events:none;}
.rndCard {position:absolute; top:0; width:360px; pointer-events:auto; will-change:transform; backface-visibility:hidden;}
.rndCard[data-side="left"] {left:0; transform:translate3d(0,100vh,0);}
.rndCard[data-side="right"] {right:0; transform:translate3d(0,-50vh,0);}
.rndCardLink {position: relative; display: flex; flex-direction: column; gap: 60px; width: 100%; padding: 45px 40px;  border-radius: var(--borderR10); box-sizing: border-box; background-color: rgba(17,17,17,.5); backdrop-filter: var(--blur);}
.rndCardLink::after{content: ""; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--borderR10); padding: 1px; box-sizing: border-box;  background:linear-gradient(to right,rgba(255,255,255,.3), rgba(255,255,255,0), rgba(255,255,255,.3)); -webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 2; pointer-events:none;}
.rndCardLink::before{content: ""; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--borderR10); background:rgba(17,17,17,.5); transition: all .3s; opacity: 0; z-index: 1; pointer-events:none;}
.rndCardLink > *{z-index: 3;}
.rndCardLink:hover::before{opacity: 1;}
.rndCardIco {position:absolute; top:38px; right:40px; display:flex; align-items:center; justify-content:center; width:48px; height:48px; opacity:0.8; font-style:normal; transition: all 0.4s ease;}
.rndCardLink:hover .rndCardIco {opacity: 1;}
.rndCardIco img {width:100%; height:100%; display: block; object-fit:contain;}
.rndCardLink strong {padding-right:56px; color:var(--white); white-space:nowrap;}
.rndCardLink p {color:var(--white); opacity:0.5;}
body.is-rnd-pin #header {top:-200px; pointer-events:none;}
.rnd.is-static .rndPin {height:auto;}
.rnd.is-static .rndStage {height:auto; padding:200px 0; gap:80px;}
.rnd.is-static .title-area {opacity:1; transform:none;}
.rnd.is-static .rndCards {position:relative; display:grid; grid-template-columns:repeat(2, minmax(0, 360px)); justify-content:center; gap:30px; width:90%; max-width:1530px; margin:0 auto;}
.rnd.is-static .rndCard {position:relative; left:auto; right:auto; top:auto; width:100%; transform:none;}

/* Library */
.library {background-color:var(--white); position: relative; z-index: 2; overflow: hidden;}
.library .basic_in {display:flex; flex-direction:column; gap:50px;}
.library .title-area {align-items:center; text-align:center;}
.librarySwiper {width:100%; overflow:hidden;}
.libraryCard {height:auto;}
.libraryCardLink {display:flex; flex-direction:column; gap:25px;}
.libraryThumb {position:relative; width:100%; aspect-ratio: 490/343; border-radius:var(--borderR20); overflow:hidden; background-color:var(--grayBg);}
.libraryThumb::before {content:''; position:absolute; left:calc(50% - 250px); top:50%; z-index:1; width:10px; height:10px; background-color:var(--main); border-radius:50%; transform:translate(-50%,-50%) scale(1); opacity: 0; pointer-events:none; transition:transform 0.6s cubic-bezier(0.215,0.61,0.355,1), opacity 0.6s ease;}
.libraryThumb img {position:relative; z-index:0; width:100%; height:100%; object-fit:cover; transition: all .4s;}
.libraryCardLink:hover .libraryThumb img {transform: scale(1.1);}
.libraryThumbIco {position:absolute; left:50%; top:calc(50% + 50px); z-index:2; display:flex; align-items:center; justify-content:center; width:62px; height:62px; border:1px solid rgba(255,255,255,0.5); border-radius:var(--borderR100); font-style:normal; opacity:0; transform:translate(-50%,-50%); pointer-events:none; transition:opacity 0.45s ease, top 0.45s cubic-bezier(0.215,0.61,0.355,1);}
.libraryThumbIco::before {content:'\e315'; display:block; width:30px; height:30px; font-family:var(--icon); font-size:30px; line-height:100%; color:var(--white); -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';}
.libraryTxt {display:flex; flex-direction:column; gap:10px;}
.libraryTxt strong {display:block; overflow:hidden; color:var(--black); text-overflow:ellipsis; white-space:nowrap; transition:color 0.3s ease;}
.libraryTxt p {display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.libraryCardLink:hover .libraryThumb::before, .libraryCardLink:focus-visible .libraryThumb::before {transform:translate(-50%,-50%) scale(108.4); opacity:0.9;}
.libraryCardLink:hover .libraryThumbIco, .libraryCardLink:focus-visible .libraryThumbIco {top:50%; opacity:1;}
.libraryCardLink:hover .libraryTxt strong, .libraryCardLink:focus-visible .libraryTxt strong {color:var(--main);}
.libraryCtrl {display:flex; align-items:center; justify-content:center; gap:6px;}
.libraryPrev, .libraryNext {display:flex; align-items:center; justify-content:center; width:56px; height:56px; position: relative; border-radius:50%; background-color:var(--white); color:var(--black); transition: all .4s; overflow: hidden;}
.libraryPrev::after, .libraryNext::after{content: ''; display: block; width: 100%; height: 100%; position: absolute; inset: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius:50%; transition: all .4s;}
.libraryPrev::before, .libraryNext::before{content: ''; display: block; width: 10px; height: 10px; position: absolute; left: 50%; top: 50%; box-sizing: border-box; background-color: var(--main); border-radius:50%; transform: translate(-50%,-50%) scale(0); transition: all .4s;}
.libraryPrev:hover::before, .libraryNext:hover::before{transform: translate(-50%,-50%) scale(10);}
.libraryPrev.is-hide, .libraryNext.is-hide {display:none;}
.libraryPrev i, .libraryNext i {display:block; width:22px; height:22px; font-style:normal; position: relative; z-index: 2; color: inherit;}
.libraryPrev i::before, .libraryNext i::before {display:block; font-family:var(--icon); font-size:22px; line-height:100%; color:inherit; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';}
.libraryPrev i::before {content:'\e5c4';}
.libraryNext i::before {content:'\e5c8';}
.libraryPrev:hover, .libraryNext:hover {color:var(--white);}
.libraryPrev:hover::after, .libraryNext:hover::after {border-color:var(--main);}












/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){







}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

/* About Us */
.aboutCard {height:500px; padding:40px 10px;}
.aboutCard strong {transform: translateY(220px);}
.aboutCardDesc {min-height: 6.8em; margin-top: 10px;}
.aboutCardBtn {margin-top: 30px;}

/* R&D */
.rndCard {width:320px;}
.rndCardLink {padding:40px 32px; gap:48px;}
.rndCardIco {right:32px;}

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/* About Us */
.aboutList {gap:20px;}

/* R&D */
.rndStage {padding:110px 0 90px;}
.rndCard {width:280px;}
.rndCardLink {padding:36px 28px; gap:40px;}
.rndCardIco {top:32px; right:28px; width:42px; height:42px;}
.rndCardIco img {width:36px; height:36px;}
.rndCardLink strong {padding-right:48px;}

}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

.title-area{gap: 8px;}
  

/* Visual */
.visualCopy {margin-top: 80px;}
.visualCopy h2 br{display: none;}
.visualCopy p br{display: none;}
.visualCtrl {margin-top: -80px;}
.visualScrollWrap {bottom:30px;}



/* About Us */
.about .basic_in {gap:40px;}
.aboutList {gap:10px;}
.aboutCard {height:400px; padding:30px 10px;}
.aboutCardDesc {min-height: 9em; line-height: 1.5em; margin-top: 5px;}
.aboutCardBtn {margin-top: 20px;}


/* Library */
.library .basic_in {gap:35px;}
.libraryTxt {gap:6px;}
.libraryPrev, .libraryNext {width:50px; height:50px;}
.libraryPrev i, .libraryNext i {width:20px; height:20px;}
.libraryPrev i::before, .libraryNext i::before {font-size:20px; }

/* R&D */
.rndStage {padding:100px 0 80px;}
.rndCard {width:240px;}
.rndCardLink {padding:32px 24px; gap:36px;}
.rndCardIco {top:28px; right:24px; width:40px; height:40px;}
.rndCardIco img {width:32px; height:32px;}
.rndCardLink strong {padding-right:44px;}

}
/*******************************************************************************
    @media ~768px
*******************************************************************************/
@media all and (max-width:768px){

/* R&D */
.rndPin {height:100vh; height:100svh; height:var(--vh, 100vh);}
.rndStage {height:100%; padding:80px 0 30px; gap:0;}
.rnd .title-area {opacity:0; transform:translateY(-40px);}
.rnd .title-area p br {display:none;}
.rndCards {position:absolute; left:5%; right:5%; top:170px; bottom:24px; z-index:3; pointer-events:none; display:block; overflow: visible;}
.rndCard {position:absolute; left:0; right:auto; top:0; width:100%; transform:translate3d(0,100vh,0); pointer-events:auto;}
.rndCard[data-side="left"], .rndCard[data-side="right"] {left:0; right:auto; transform:translate3d(0,100vh,0);}
.rndCardLink {padding:30px 24px; min-height: 150px; gap:10px;}
.rndCardIco {top:20px; right:20px; width:40px; height:40px;}
.rndCardLink strong {padding-right:44px; white-space:normal;}
.rnd.is-static .rndPin {height:auto;}
.rnd.is-static .rndStage {height:auto; padding:140px 0; gap:40px;}
.rnd.is-static .title-area {opacity:1; transform:none;}
.rnd.is-static .rndCards {position:relative; display:flex; flex-direction:column; gap:16px; left:auto; right:auto; top:auto; bottom:auto; width:90%; margin:0 auto; overflow:visible; pointer-events:auto;}
.rnd.is-static .rndCard, .rnd.is-static .rndCard[data-side="left"], .rnd.is-static .rndCard[data-side="right"] {position:relative; left:auto; right:auto; width:100%; transform:none;}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

.title-area{gap: 6px;}

/* Visual */
.visualCopy {gap:15px; margin-top: 0; top:auto; bottom: 120px; transform: translateX(-50%);}
.visualCtrl {gap:10px; margin-top: 0; left: 5%; top: auto; transform: translate(0,0); bottom: calc(120px + var(--visual-copy-h, 160px) + 20px);}
.visualPrev, .visualNext {width:20px; height:20px;}
.visualPrev i, .visualNext i {width:20px; height:20px;}
.visualPrev i::before, .visualNext i::before {font-size:20px;}
.visualNum {gap:10px;}
.visualNum > *{line-height: 100%;}
.visualCur {width:18px;}
.visualSlash {width:10px;}

.visualScroll{justify-content: flex-end;}
.visualScrollWrap {bottom:20px;}
.visualScrollMouse {width:20px; height:28px;}
.visualScrollMouse::after {top:4px; width:2px; height:4px; margin-left: -1px;}
.visualScrollIco {width:18px; height:18px;}
.visualScrollIco::before {width:18px; height:18px; font-size:18px;}



/* About Us */
.about .basic_in {gap:30px;}
.aboutList {flex-direction: column;}
.aboutCard {height:300px; padding:20px; border-radius:var(--borderR10);}
.aboutCard strong {transform: translateY(160px);}
.aboutCardDesc {min-height: 7.5em;}
.aboutCardBtn {margin-top: 10px;}


/* Library */
.library .basic_in {gap:20px;}
.librarySwiper {overflow:visible;}
.libraryCardLink {gap:15px;}
.libraryThumb {border-radius:var(--borderR10);}
.libraryThumbIco {width:50px; height:50px;}
.libraryThumbIco::before {width:20px; height:20px; font-size:20px;}
.libraryTxt {gap:4px;}
.libraryCtrl {gap:4px;}
.libraryPrev, .libraryNext {width:45px; height:45px;}
.libraryPrev i, .libraryNext i {width:16px; height:16px;}
.libraryPrev i::before, .libraryNext i::before {font-size:16px; }



}