@import url("common.css");




/* comm */
.main-title{text-align: center; display: flex; flex-direction: column; gap: 20px; padding: 0 0 80px;}
.main-title h2{font-weight: 700; color: var(--black);}
.main-title h2 span{display: inline; letter-spacing: inherit; line-height: inherit;}
.main-title p{color: var(--basic);}



/* visual */
@keyframes visualPagProgress {from {stroke-dashoffset:113.097;} to {stroke-dashoffset:0;}}
@keyframes visualScrollUpDown {0% {opacity:0.15; transform:translateY(-30px);} 50% {opacity:1; transform:translateY(0);} 100% {opacity:0.15; transform:translateY(30px);}}
@keyframes visualBgZoom {from {transform:scale(1);} to {transform:scale(1.08);}}
@keyframes visualFadeUp {from {opacity:0; transform:translateY(40px);} to {opacity:1; transform:translateY(0);}}
#visual {position:relative; z-index:2; --visual-autoplay:7s;}
#visual .visual-slide {position:relative; height:var(--vh); overflow:hidden; background:var(--black); transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden;}
#visual .visual-list {height:100%;}
#visual .visual-item {position:relative; height:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0);}
#visual .visual-bg {position:absolute; left:0; top:0; width:100%; height:100%; background:var(--black); overflow:hidden; transform:scale(1); transform-origin:center center;}
#visual .visual-bg picture {display:block; width:100%; height:100%;}
#visual .visual-bg img {width:100%; height:100%; object-fit:cover;}
#visual .swiper-slide-active .visual-bg {animation:visualBgZoom var(--visual-autoplay, 7s) ease forwards;}
#visual .visual-item:not(.swiper-slide-active) .visual-bg {animation:none; transform:scale(1);}
#visual.is-resizing .swiper-slide-active .visual-bg,
#visual.is-resizing .swiper-slide-active .visual-title h2,
#visual.is-resizing .swiper-slide-active .visual-title p,
#visual.is-resizing .swiper-slide-active .visual-txt a.more-btn,
#visual.is-resizing .visual-pag.active.is-playing .visual-pag-bar {animation-play-state:paused;}
#visual .visual_in {position:relative; z-index:3; height:100%; display:flex; align-items:center;}
#visual .visual-txt {display:flex; flex-direction:column; gap:80px; align-items:flex-start; color:var(--white);}
#visual .visual-title {display:flex; flex-direction:column; gap:25px;}
#visual .visual-title h2 {color:var(--white); opacity:0; transform:translateY(40px);}
#visual .visual-title p {color:var(--white); opacity:0; transform:translateY(40px);}
#visual .visual-txt a.more-btn {opacity:0; transform:translateY(40px);}
#visual .swiper-slide-active .visual-title h2 {animation:visualFadeUp 0.9s ease forwards; animation-delay:0.2s;}
#visual .swiper-slide-active .visual-title p {animation:visualFadeUp 0.9s ease forwards; animation-delay:0.4s;}
#visual .swiper-slide-active .visual-txt a.more-btn {animation:visualFadeUp 0.9s ease forwards; animation-delay:0.6s;}
#visual .visual-item:not(.swiper-slide-active) .visual-title h2,
#visual .visual-item:not(.swiper-slide-active) .visual-title p,
#visual .visual-item:not(.swiper-slide-active) .visual-txt a.more-btn {animation:none; opacity:0; transform:translateY(40px);}

#visual a.more-btn {background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px);  -webkit-backdrop-filter: blur(16px); border-radius: var(--borderR10); transition: all 0.3s ease;}
#visual a.more-btn::after{border-radius: var(--borderR10); border-left: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }

#visual .visual-btm {position:absolute; left:50%; bottom:40px; transform:translateX(-50%); width:90%; max-width:1560px; display:flex; align-items:flex-end; justify-content:space-between; z-index:10; pointer-events:none;}
#visual .visual-ctrl {pointer-events:auto;}
#visual .visual-scroll {pointer-events:auto; display:flex; align-items:center; gap:13px; color:var(--white);}
#visual .visual-scroll-ico {position:relative; width:32px; height:38px; border:1px solid rgba(255,255,255,0.3); border-radius:100px; display:block; overflow:hidden; box-sizing:border-box;}
#visual .visual-scroll-ico svg {display:block; width:10px; height:auto; position:absolute; left:50%; top:50%; margin-left:-5px; margin-top:-5px; animation:visualScrollUpDown 1.2s ease-in-out infinite;}

#visual .visual-paging {display:flex; align-items:center; gap:20px;}
#visual .visual-pag {position:relative; width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer;}
#visual .visual-pag-ring {position:absolute; left:0; top:0; width:40px; height:40px; display:none;}
#visual .visual-pag-ring svg {display:block; width:100%; height:100%;}
#visual .visual-pag-track {fill:none; stroke:rgba(255,255,255,0.3); stroke-width:2;}
#visual .visual-pag-bar {fill:none; stroke:var(--white); stroke-width:2; stroke-linecap:round; stroke-dasharray:113.097; stroke-dashoffset:113.097; transform:rotate(-90deg); transform-origin:20px 20px;}
#visual .visual-pag-ico {display:none; position:relative; z-index:2; width:16px; height:16px;}
#visual .visual-pag-ico::before {content:'\e034'; display:block; width:16px; height:16px; font-family:var(--icon); font-size:16px; line-height:16px; font-weight:400; color:var(--white); text-align:center; font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;}
#visual .visual-pag.is-paused .visual-pag-ico::before {content:'\e037';}
#visual .visual-pag-dot {display:block; width:8px; height:8px; border-radius:50%; background:var(--white); opacity:0.5; transition:opacity .3s ease;}
#visual .visual-pag:hover .visual-pag-dot {opacity:1;}
#visual .visual-pag.active .visual-pag-ring {display:block;}
#visual .visual-pag.active .visual-pag-ico {display:block;}
#visual .visual-pag.active .visual-pag-dot {display:none;}
#visual .visual-pag.active.is-playing .visual-pag-bar {animation:visualPagProgress var(--visual-autoplay,5s) linear forwards;}


/* product */
#product {overflow: hidden; position: relative; z-index: 2; background:var(--white);}
#product .product_in {display:flex; flex-direction:column;}
#product .product-slide {position:relative; width:100%; overflow: visible;}
#product .product-list {align-items:stretch;}
#product .product-item {height:auto; box-sizing:border-box;}
#product .product-item a {display:block; opacity: 0; visibility: hidden; pointer-events: none; transition:all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);}
#product .product-item.swiper-slide-visible a {opacity: 1; visibility: visible; pointer-events: auto;}
#product .product-item a:hover {transform:translateY(-6px);}
#product .product-thumb {position:relative; background:var(--white); border-radius:var(--borderR5); overflow:visible; transition:box-shadow 0.35s ease;}
#product .product-item a:hover .product-thumb {box-shadow:0 12px 30px rgba(0,70,142,0.12);}
#product .product-img {aspect-ratio: 500/375; overflow:hidden; border-radius:var(--borderR5); position:relative;}
#product .product-img::after{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; border:1px solid var(--border); position: absolute; left: 0; top:0; z-index: 2; border-radius:var(--borderR5);}
#product .product-img img {max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition:transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);}
#product .product-item a:hover .product-img img {transform:scale(1.03);}
#product .product-txt {margin-top:20px; display:flex; flex-direction:column; gap:4px;}
#product .product-txt h3 {font-weight:600; color:var(--black); line-height: 135%; transition:color 0.25s ease;}
#product .product-item a:hover .product-txt h3 {color:var(--main);}
#product .product-txt p {color:var(--basic); line-height:160%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#product .product-ctrl {display:flex; align-items:center; justify-content:space-between; width:500px; max-width:100%; margin:80px auto 0;}
#product .product-prev,
#product .product-next {position:relative; width:60px; height:60px; border:1px solid var(--border); border-radius:var(--borderR5); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:0; top:auto; left:auto; right:auto; bottom:auto; background:var(--white); cursor:pointer; transition:border-color .35s ease, background .35s ease;}
#product .product-prev:hover,
#product .product-next:hover {border-color:var(--main); background:var(--main);}
#product .product-prev:hover svg path,
#product .product-next:hover svg path {fill:var(--white);}
#product .product-prev::after,
#product .product-next::after {display:none;}
#product .product-prev svg,
#product .product-next svg {display:block; width:12px; height:auto; transition:fill .35s ease;}
#product .product-prev svg path,
#product .product-next svg path {fill:var(--basic); transition:fill .35s ease;}
#product .product-prev svg {transform:rotate(180deg);}
#product .product-prev.swiper-button-disabled,
#product .product-next.swiper-button-disabled {opacity:0.35; pointer-events:none;}
#product .product-paging {display:flex; align-items:center; gap:15px; transition:opacity .35s ease;}
#product .product-paging.is-disabled {opacity:0.35; pointer-events:none;}
#product .product-paging-current {color:var(--black); min-width:20px; text-align:center;}
#product .product-paging-total {color:var(--basic); min-width:20px; text-align:center;}
#product .product-paging-bar {flex:0 0 200px; width:200px; height:2px; background:var(--border); position:relative; overflow:hidden;}
#product .product-paging-bar-in {display:block; width:0; height:100%; background:var(--black); transition:width .4s ease;}


/* news */
#news {overflow:hidden; background: var(--white);}
#news .news_in {display:flex; flex-direction:column;}
#news .news-slide {position:relative; width:100%; overflow:visible;}
#news .news-list {align-items:stretch;}
#news .news-item {height:auto; box-sizing:border-box;}
#news .news-item a {display:block; opacity:0; visibility:hidden; pointer-events:none; transition:all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);}
#news .news-item.swiper-slide-visible a {opacity:1; visibility:visible; pointer-events:auto;}
#news .news-item a:hover {transform:translateY(-6px);}
#news .news-thumb {aspect-ratio: 500/334; background:var(--grayBg); border-radius:var(--borderR5); overflow:hidden; transition:box-shadow 0.35s ease;}
#news .news-item a:hover .news-thumb {box-shadow:0 12px 30px rgba(0,70,142,0.12);}
#news .news-thumb img {width:100%; height:100%; object-fit:cover; transition:transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);}
#news .news-item a:hover .news-thumb img {transform:scale(1.03);}
#news .news-txt {margin-top:20px; display:flex; flex-direction:column; gap:20px;}
#news .news-txt-in {display:flex; flex-direction:column; gap:4px;}
#news .news-txt-in h3 {font-weight:600; line-height: 130%; color:var(--black); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; transition:color 0.25s ease;}
#news .news-item a:hover .news-txt-in h3 {color:var(--main);}
#news .news-summary {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:3.2em; line-height: 1.6em; color:var(--basic);}
#news .news-date {display:flex; align-items:center; gap:4px; color:var(--basic); letter-spacing: 0;}
#news .news-date::before {content:'\e8b5'; display:block; width:20px; height:20px; font-family:var(--icon); font-size:20px; line-height:20px; font-weight:400; color:var(--basic);}
#news .news-date time {display:block; line-height:inherit; letter-spacing:inherit;}
#news .news-ctrl {display:flex; align-items:center; justify-content:space-between; width:500px; max-width:100%; margin:79px auto 0;}
#news .news-prev,
#news .news-next {position:relative; width:60px; height:60px; border:1px solid var(--border); border-radius:var(--borderR5); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:0; top:auto; left:auto; right:auto; bottom:auto; background:var(--white); cursor:pointer; transition:border-color .35s ease, background .35s ease;}
#news .news-prev:hover,
#news .news-next:hover {border-color:var(--main); background:var(--main);}
#news .news-prev:hover svg path,
#news .news-next:hover svg path {fill:var(--white);}
#news .news-prev::after,
#news .news-next::after {display:none;}
#news .news-prev svg,
#news .news-next svg {display:block; width:12px; height:auto; transition:fill .35s ease;}
#news .news-prev svg path,
#news .news-next svg path {fill:var(--basic); transition:fill .35s ease;}
#news .news-prev svg {transform:rotate(180deg);}
#news .news-prev.swiper-button-disabled,
#news .news-next.swiper-button-disabled {opacity:0.35; pointer-events:none;}
#news .news-paging {display:flex; align-items:center; gap:15px; transition:opacity .35s ease;}
#news .news-paging.is-disabled {opacity:0.35; pointer-events:none;}
#news .news-paging-current {color:var(--black); min-width:20px; text-align:center;}
#news .news-paging-total {color:var(--basic); min-width:20px; text-align:center;}
#news .news-paging-bar {flex:0 0 200px; width:200px; height:2px; background:var(--border); position:relative; overflow:hidden;}
#news .news-paging-bar-in {display:block; width:0; height:100%; background:var(--black); transition:width .4s ease;}


/* partner */
@keyframes partnerRoll {from {transform:translateX(0);} to {transform:translateX(-50%);}}
#partner {background:var(--white); padding:0 0 40px; overflow:hidden; position:relative; z-index:2;}
#partner .partner_in {width:100%; overflow:hidden;}
#partner .partner-roll {width:100%; overflow:hidden;}
#partner .partner-track {display:flex; width:max-content; will-change:transform; animation:partnerRoll 30s linear infinite;}
#partner .partner-roll:hover .partner-track {animation-play-state:paused;}
#partner .partner-list {display:flex; align-items:center; flex-shrink:0;}
#partner .partner-item {width: 282px; flex-shrink:0; margin-right:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box;}
#partner .partner-item a {display:flex; align-items:center; justify-content:center; width:100%; height:100%; aspect-ratio: 282/100; overflow: hidden; position: relative;}
#partner .partner-item img {display:block; width: 100%; height: 100%; object-fit:contain;}
#partner .partner-item p{font-size: 1.111rem; font-family: var(--kor); font-weight: 700; font-style: normal; line-height: 160%; letter-spacing: -0.6px; color: #999; padding: 0 10px; box-sizing: border-box; position: absolute; left: 0; top: 50%; transform: translateY(-50%); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; text-align: center; width: 100%;}
@media (prefers-reduced-motion: reduce) {
#partner .partner-track {animation:none;}
}


/* about */
#about {position:relative; width: 100%; min-height:100vh; z-index:1; overflow: hidden;}
#news,#inquiry {position:relative; z-index:2; background: var(--white);}
#footer {position:relative; z-index:2;}
#about .about_sticky {height:100vh; width:100%; overflow:hidden;}
#about .about_in {position:relative; height:100%; overflow:hidden;}
#about .about_in .container-line-bg{z-index: 0;}
#about .about-bg {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; background:var(--black); z-index:1;}
#about .about-bg-in {position:relative; width:100%; height:100%; overflow:hidden;}
#about .about-bg img {width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform 1.2s ease;}
#about .about-bg-dim {position:absolute; inset:0; background:rgba(0,0,0,0.5); pointer-events:none;}
#about .about-txt {position:absolute; inset:0; display:flex; align-items:center; z-index:4;}
#about .about-txt-in {max-width:780px; width: 100%; color:var(--white); display:flex; flex-direction:column; gap:30px; box-sizing: border-box; opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease;}
#about .about-desc{display: flex; flex-direction: column; gap:30px;}
#about .about-desc p {color:var(--white);}
#about .about-tab {position:absolute; right:0; top:0; max-width:800px; width: 100%; height:100%; display:flex; flex-direction:column; z-index:5;}
#about .about-tab-item {display:flex; align-items:stretch; justify-content:space-between; flex:1; min-height:0; text-decoration:none; color:var(--white); border-left:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.1); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); transition:background .35s ease, opacity .7s ease, transform .7s ease; opacity:0; transform:translateX(50px);}
#about .about-tab-item:hover {background:rgba(0,70,142,0.8);}
#about.is-show .about-bg img {transform:scale(1.08);}
#about.is-show .about-txt-in {opacity:1; transform:translateY(0);}
#about.is-show .about-tab-item {opacity:1; transform:translateX(0);}
@media (prefers-reduced-motion: reduce) {
#about .about-bg img,
#about .about-txt-in,
#about .about-tab-item {opacity:1; transform:none; transition:none;}
}
#about .about-tab-in {display:flex; flex-direction:column; justify-content:center; box-sizing: border-box; gap:20px; padding:0 80px; flex:1; min-width:0;}
#about .about-tab-ico {display:flex; align-items:center; justify-content:center; width:60px; height:60px; flex-shrink:0;}
#about .about-tab-ico svg {display:block; width:100%; height:auto;}
#about .about-tab-txt {display:flex; flex-direction:column; gap:10px;}
#about .about-tab-txt h3 {font-weight:700; color:var(--white);}
#about .about-tab-txt p {color:var(--white);}
#about .about-tab-arr {display:flex; align-items:center; justify-content:center; width:70px; flex-shrink:0; background:rgba(255,255,255,0.1); align-self:stretch;}
#about .about-tab-arr svg {display:block; width:20px; height:auto;}





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


/* about */
#about .about-txt-in {max-width:50%; padding: 0 50px 0 0;}
#about .about-tab {max-width:50%;}
#about .about-tab-in {padding:0 40px;}



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







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


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

/* comm */
.main-title{padding: 0 0 60px;}

/* about */
#about .about-txt-in {padding: 0 40px 0 0; gap:20px;}
#about .about-desc{gap:20px;}
#about .about-tab-in {gap:10px; padding:0 30px;}
#about .about-tab-arr {width:50px;}



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

    
/* comm */
.main-title{gap: 15px; padding: 0 0 40px;}

    
/* visual */
#visual .visual-txt {gap:50px;}
#visual .visual-title {gap:15px;}

#visual .visual-btm {bottom:30px;}

#visual .visual-paging {gap:15px;}



/* about */
#about {min-height:0;}
#about .about_sticky {height:auto; overflow:visible;}
#about .about_in{display: flex; flex-direction: column; justify-content: space-between; height:auto; overflow:visible;}
#about .about-txt{position: relative;}
#about .about-txt-in {padding: 60px 0; gap:15px; max-width: 100%;}
#about .about-desc{gap:15px;}
#about .about-tab {max-width:100%; height: auto; position: relative; right: auto; top: auto;}
#about .about-tab-item {flex: auto;}
#about .about-tab-in {gap:20px; flex: auto; padding:35px 25px; flex-direction: row; align-items: center;}
#about .about-tab-ico {width:50px; height:50px;}
#about .about-tab-txt {width: calc(100% - 70px);}
#about .about-tab-arr {width:50px;}
#about .about-tab-arr svg {width:16px; height:auto;}




/* product */
#product .product-ctrl {width:400px; margin:50px auto 0;}
#product .product-prev,
#product .product-next {width:50px; height:50px;}
#product .product-paging-bar {flex:0 0 150px; width:150px;}


/* news */
#news .news-ctrl {width:400px; margin:50px auto 0;}
#news .news-prev,
#news .news-next {width:50px; height:50px;}
#news .news-paging-bar {flex:0 0 150px; width:150px;}


/* partner */
#partner {padding:0 0 30px;}
#partner .partner-item {width:200px; /* margin-right:20px; */}
#partner .partner-track {animation-duration:35s;}





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


/* comm */
.main-title{gap: 10px; padding: 0 0 30px;}



/* visual */
#visual .visual-txt {gap:30px;}
#visual .visual-title {gap:10px;}

#visual .visual-scroll {gap:10px;}
#visual .visual-scroll-ico {width:28px; height:33px;}

#visual .visual-paging {gap:10px;}
#visual .visual-pag {width:30px; height:30px;}
#visual .visual-pag-ring {width:30px; height:30px;}
#visual .visual-pag-ico {width:14px; height:14px;}
#visual .visual-pag-ico::before {width:14px; height:14px; font-size:14px; line-height:14px;}





/* about */
#about .about-txt-in {padding: 80px 0; gap:10px;}
#about .about-desc{gap:5px;}
#about .about-tab-in {padding:30px 15px;}
#about .about-tab-ico {width:40px; height:40px;}
#about .about-tab-txt {gap:5px; width: calc(100% - 60px);}
#about .about-tab-txt h3{line-height: 120%;}
#about .about-tab-arr {width:30px;}
#about .about-tab-arr svg {width:12px; height:auto;}




/* product */
#product .main-title h2{text-wrap: balance;}
#product .product-slide-in{box-sizing: border-box; padding: 0 5%;}
#product .product-txt {margin-top:15px;}
#product .product-txt h3 {font-size: 1.143rem;}
#product .product-txt p {font-size: 1rem;}
#product .product-ctrl {width:100%; margin:30px auto 0;}
#product .product-prev,
#product .product-next {width:35px; height:35px;}
#product .product-prev svg,
#product .product-next svg {width:10px;}
#product .product-paging {gap:10px;}
#product .product-paging-current {min-width:15px;}
#product .product-paging-total {min-width:15px;}
#product .product-paging-bar {flex:0 0 100px; width:100px;}
#product .product-item a{opacity: 1; visibility: visible;}

/* news */
#news .news-slide-in{box-sizing: border-box; padding: 0 5%;}
#news .news-txt {margin-top:15px; gap:10px;}
#news .news-date::before {width:18px; height:18px; font-size:18px; line-height:18px;}
#news .news-ctrl {width:100%; margin:30px auto 0;}
#news .news-prev,
#news .news-next {width:35px; height:35px;}
#news .news-prev svg,
#news .news-next svg {width:10px; height:auto;}
#news .news-paging {gap:10px;}
#news .news-paging-current {min-width:15px;}
#news .news-paging-total {min-width:15px;}
#news .news-paging-bar {flex:0 0 100px; width:100px;}
#news .news-txt-in h3{font-size: 1.143rem;}
#news .news-summary{font-size: 1rem;}
#news .news-item a{opacity: 1; visibility: visible;}


/* partner */
#partner {padding:0 0 20px;}
#partner .partner-item {width:150px; /* margin-right:10px; */}
#partner .partner-track {animation-duration:30s;}



}