@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&family=Tangerine:wght@400;700&family=Yuji+Mai&display=swap');


@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  src: url('../fonts/Pretendard-Black.ttf') format('truetype');
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  src: url('../fonts/Pretendard-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  src: url('../fonts/Pretendard-Bold.ttf') format('truetype');
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  src: url('../fonts/Pretendard-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  src: url('../fonts/Pretendard-Medium.ttf') format('truetype');
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  src: url('../fonts/Pretendard-Regular.ttf') format('truetype');
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  src: url('../fonts/Pretendard-Light.ttf') format('truetype');
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  src: url('../fonts/Pretendard-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  src: url('../fonts/Pretendard-Thin.ttf') format('truetype');
}

*, *::before, *::after {
	box-sizing: border-box;
	word-break:keep-all;
	margin: 0;
	padding: 0;
}
*{font-family:  'Pretendard', sans-serif; font-weight:500; outline:none; word-break:keep-all; transition:ease 0.5s;}
body{font-size:1rem; letter-spacing:-0.02em; color:#1a1b1e; outline:none; scroll-behavior: smooth; }
body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,fieldset,input,table,tr,th,td,ul,li{margin:0; padding:0;}
table{border-collapse:collapse;}
ul,ol,li{list-style:none; margin:0;padding:0;}
a{color: inherit;text-decoration: none;}
p{word-break:keep-all;}


html::-webkit-scrollbar {
    width: 10px;
  }
html::-webkit-scrollbar-thumb {
    background-color: #122d62;
    background-clip: padding-box;
  }
html::-webkit-scrollbar-track {
    background-color:rgba(0,0,0,0.4);
 }


:root {
  --bg-dark:#202023;
  --border-blue:#1cc2eb;
  --header-height: 3.5rem;
  --white-color:#fff;
  --black-color:#000;
}
.header {
  position: fixed;
  top: 30px;
  left: 0;
  right:0;
  width: 100%;
  z-index:10;
  transition:ease .7s;
}
.header .logo .c_logo{display:none;}
.header .logo .w_logo{display:block;}
.header.show {background: #fff; top:0;}
.header.open{background:#fff; padding:1rem; transition:ease 0.5s;}
.header.open .logo .c_logo{display:block;}
.header.open .logo .w_logo{display:none;}
.header.hide {top: -100%; transition:ease 0.5s;}
.header.show .logo .c_logo{display:block;}
.header.show .logo .w_logo{display:none;}
.header.open a, .header.show a, .header.open .nav__link, .header.show .nav__link{color:#000; font-weight:500;}

/*=============== NAV ===============*/
.nav {
}
.nav__burger, 
.nav__close {
  color: #111;
}
.nav__toggle .line1,.nav__toggle .line2, .nav__toggle .line3 {
    width: 25px;
    height: 3px;
	background: #fff;
    border-radius: 2px;
    margin: 5px;
    transition: all 0.3s ease;
}
.nav__toggle.show-icon .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.nav__toggle.show-icon .line2{
    transition: all 0.3s ease;
    width:0;
}
.nav__toggle.show-icon .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}

.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__menu{
}

.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}
.nav__burger, 
.nav__close {
  position: absolute;
  width: max-content;
  height: max-content;
  inset: 0;
  margin: auto;
  font-size: 1.25rem;
  cursor: pointer;
  transition: opacity .1s, transform .4s;
}
.nav__close {
  opacity: 0;
}
.mobile_menu{
	display:block;
}
.nav_right{
	display:none;
}
.dropdown__menu li{
	padding:10px 0;
}
.nav__link {
  font-weight: var(--font-semi-bold);
  padding:1.25rem 1rem 0.3rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color .3s;
  font-weight:600;
}


@media screen and (max-width: 1600px) {
	.nav__list {
        column-gap: 2rem;
	}
}

@media screen and (max-width: 1500px) {
	.header {
		padding:15px 25px;
		top:0;
	}
	.header.sticky{
		background:#fff;
	}
	.nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.logo{
		width:180px;
		display:block;
	}
	.nav__toggle{
		top:0;
		z-index:100;
	}
	.nav__toggle.show-icon .line1, .nav__toggle.show-icon .line2, .nav__toggle.show-icon .line3{
		background:var(--bg-dark);
	}
	.header.show .nav__toggle .line1, .header.show .nav__toggle .line2, .header.show .nav__toggle .line3{
		background:var(--bg-dark);
	}
	.dropdown__menu li{
		padding: 1rem 0 0 0;
	}
	.dropdown__menu li a{
		color:#555;
	}
	.dropdown__link {
		padding: 1rem 2em 1rem 2rem;
	}

  .header .gnb_menu_btn{
    display:none;
  }
  .nav__menu {
    position: absolute;
    left: 0;
    top: 2.5rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    pointer-events: none;
    opacity: 0;
    transition: top .4s, opacity .3s;
  }
  .nav__menu::-webkit-scrollbar {
    width: 0;
  }
  .nav__menu.show-menu .nav__list {
    color: var(--black-color);
    padding-top: 1rem;
	padding-left: 1rem;
    padding-right: 1rem
  }
}
@media screen and (max-width: 820px) {
	.logo{
		width:130px;
	}
}

@media screen and (max-width: 600px) {
	.logo{
		width:110px;
	}
	.header {
		padding: 15px 15px;
	}
	.nav__link{
		padding: 1.25rem 1.2rem;
	}
	.nav__link:hover, .nav__link:focus .nav__link:active{
		#1a7c57
	}
}

/* Show menu */
.show-menu {
  opacity: 1;
  top: 0;
  padding-top:3.5rem;
  pointer-events: initial;
  background:#fff;
  height:100vh;
}

/* Show icon */
.show-icon .nav__burger {
  opacity: 0;
  /* transform: rotate(90deg); */
}
.show-icon .nav__close {
  opacity: 1;
  /* transform: rotate(90deg); */
}

/*=============== DROPDOWN ===============*/
.dropdown__item {
  cursor: pointer;
}
.dropdown__link i, 
.dropdown__sublink i {
  font-size: 1.25rem;
  font-weight: initial;
}
.dropdown__menu{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-out;
  padding:0;
}
.dropdown__menu, 
.dropdown__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-out;
  padding:0;
}
/* Show dropdown menu & submenu */
.dropdown__item:hover .dropdown__menu, 
.dropdown__subitem:hover > .dropdown__submenu {
  max-height: 1000px;
  transition: max-height .4s ease-in;
}

.dropdown__link{
  align-items: flex-start;
  padding:1rem 2em 1rem 2rem;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
  .nav_container {
    margin-inline: 1rem;
  }

  .nav__link {
    padding-inline: 1rem;
  }
}

/* For large devices */
@media screen and (min-width: 1500px) {
	.nav__menu{
		height:100%;
	}
	.nav_right{
		display:block;
	}
	.mobile_menu{
		display:none;
	}
	.logo{
		width:220px;
	}
	
	.dropdown__link{
		  padding:0.2rem 2em 0.2rem 2rem;
		  /* color: var(--white-color); */
		  background-color: var(--black-color-light);
		  display: flex;
		  align-items: center;
		  /* column-gap: .5rem; */
		  transition: background-color .3s;
		  /* color:#fff; */
		  justify-content: center;
		  font-weight:700;
	}

  .nav_container {
    margin-inline: auto;
	max-width:1680px;
	width:100%;
	padding:0 20px;
  }

  .nav {
    display: flex;
    justify-content: space-between;
	align-items: center;
  }
  .nav__toggle {
    display: none;
  }
  .nav__list {
    height: 100%;
    display: flex;
    column-gap: 3.5rem;
	align-items: center;
	font-size:1.1em;
  }
  .nav__link {
  	color: var(--white-color);
    height: 100%;
    padding: 0;
    justify-content: initial;
    column-gap: .25rem;
	padding:2rem 0;
  }
 /*  .nav__link:hover {
    background-color: transparent;
  } */

  .dropdown__item{
    position: relative;
	height:100%;
  }

  .dropdown__menu{
    max-height: initial;
    overflow: initial;
    position: absolute;
    left: 50%;
	transform:translateX(-50%);
    top: 85px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, top .3s;
	background: #fff;
    border-radius: 1.5rem;
	text-align:center;
	z-index:9;
	padding:10px 0;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  }
 .dropdown__menu li{
	text-align:center;
  }
  /* Show dropdown menu */
  .dropdown__item:hover .dropdown__menu {
    opacity: 1;
    top:85px;
    pointer-events: initial;
    transition: top .3s;
  }

}



.inner{
	max-width:1600px;
	width:100%;
	margin:0 auto;
	padding:0 20px;
}
.main-tit{
	font-size:2.8rem;
	line-height:1.35;
	font-weight:700;
}
.main-tit span{
	font-size:1.3rem;
	display:block;
	padding-bottom:1rem;
}

/* main */
.main-visual{
	width:100%;
	height:100vh;
	overflow:hidden;
	position: relative;
}
.main-visual-img {
	position: absolute;
	top: 0; left: 50%;
	width: 100%;
	height: 100%;
	background:url('../img/main_visual.png')no-repeat center center / cover;
	background-size: cover;
	background-position: center;
	transform:translateX(-50%) scale(1.3);
	transition: transform 3s ease; 
	z-index: -1; 
}
.main-visual.active .main-visual-img{
  transform:translateX(-50%) scale(1); 
}
.main-visual-txt {
    color: #fff;
    font-size: 3.2rem;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 2rem 15rem 2rem;
	text-shadow: 1px 1px 24px rgb(0 0 0 / 50%);	
}
.main-visual-txt p{
	font-weight:700;
}
.main-visual-txt span {
    font-size: 2rem;
    display: block;
    padding-bottom: 30px;
}
.main-visual.active .main-visual-img{
  transform: translateX(-50%) scale(1); 
}
.main-wrap{
	padding: 2rem 10em;
    border-radius: 4rem 4rem 0 0;
	margin-top:-2rem;
    background: #fff;
}
.main-wrap img{
	width:100%;
}
.main-intro{
	background:#04060a url('../img/main_intro_bg.png')no-repeat center center / 100%;
	padding:15rem 0 18rem 0;
}
.main-intro-wrap{
	display:flex;
	justify-content: space-between;
}
.main-intro-txt {
    width: 30vw;
    position: relative;
}
.main-intro-txt  .main-tit {
    position: sticky;
    top: 1rem;
    color: #fff;
}
.main-intro-img {
	width:50vw;
	display: grid;
	grid-template-columns: 1fr 1fr; 
	gap: 4rem;
	cursor:pointer;
}
.main-intro-img-item {
	position: relative;
    border-radius: 2rem;
    overflow: hidden;
    background-position: center;
    aspect-ratio: 3 / 4;
    padding: 4rem 2rem;
    text-align: center;
    color: #fff;
    font-size: 2rem;
    line-height: 1.3;
}
.main-intro-img-item p{
	font-weight:800;
}
.main-intro-img1 { grid-row: span 2; margin-top:65%;}

.main-intro-img1{
	background:url('../img/main_intro1.png')no-repeat center center / cover;
}
.main-intro-img2{
	background:url('../img/main_intro2.png')no-repeat center center / cover;
}
.main-intro-img3{
	background:url('../img/main_intro3.png')no-repeat center center / cover;
}
.main-core{
	background:url('../img/main_core_bg.png')no-repeat center center / cover;
	height:90vh;
	position:relative;
}
.main-core:before{
	display:block;
	content:'';
	width:100%;
	height:60%;
	position:absolute;
	top:0;
	left:0;
	background: linear-gradient(to bottom, rgba(4, 6, 10, 1) 0%, rgba(4, 6, 10, 0) 100%);
}
.main-core .inner{
	display:flex;
	justify-content: center;
	padding-top:9rem;
}
.main-core:after{
	display:block;
	content:'';
	width:100%;
	height:60%;
	position:absolute;
	bottom:0;
	left:0;
	background: linear-gradient(to top, rgba(35, 38, 46, 1) 0%, rgba(35, 38, 46, 0) 100%);
}
.main-core-txt{
	font-size:3rem;
	font-style: italic;
	color:#fff;
	font-weight:800;
	text-align:center;
	line-height:1.4;
	position:relative;
	z-index:1;
}
.main-core-txt span{
	font-size:2rem;
	display:block;
}
.main-bat{
	background:#23262e;
}
.main-bat-wrap{
	display:flex;
	gap:1.5rem;
	padding:5rem 0 10rem 0;
}
.main-bat-item{
	flex: 1 1 25%;
    aspect-ratio: 3 / 4;
    border-radius: 2rem;
    overflow: hidden;
    text-align: center;
    font-size: 1.6rem;
    padding: 3rem 2rem;
    color: #fff;
}
/* .main-bat-item p{
	font-weight:700;
} */
.main-bat-item strong{
	font-size:1.6rem;
	font-weight:600;
	display:block;
	padding-bottom:0.5rem;
	text-shadow: 1px 1px 18px rgb(0 0 0 / 50%);
}
.main-bat-item p{
	font-size:1rem;
	text-shadow: 1px 1px 18px rgb(0 0 0 / 50%);
}
/* .main-bat1{
	background:url('../img/main_bat1.png')no-repeat center center / cover;
}
.main-bat2{
	background:url('../img/main_bat2.png')no-repeat center center / cover;
}
.main-bat3{
	background:url('../img/main_bat3.png')no-repeat center center / cover;
}
.main-bat4{
	background:url('../img/main_bat4.png')no-repeat center center / cover;
} */
.main-bat1{
	background:url('../img/pd-img1.png')no-repeat center center / cover;
}
.main-bat2{
	background:url('../img/pd-img2.png')no-repeat center center / cover;
}
.main-bat3{
	background:url('../img/pd-img3.png')no-repeat center center / cover;
}
.main-bat4{
	background:url('../img/pd-img4.png')no-repeat center center / cover;
}
.main-section{
	width:100%;
	height:100vh;
	display: flex;
    /* align-items: center; */
	color:#fff;
}
.main-section .inner{
	display: flex;
    justify-content: flex-end;
	padding-top:20vh;
}
.main-section:nth-child(even) .inner{
	justify-content: flex-start;
}
.main-section .main-tit span{
	padding-bottom:0;
}
.main-section-inner p{
	font-size:1.1rem;
	padding-top:1.5rem;
	line-height:1.6;
}
.main-section-inner a{
	display:table;
	padding:1rem 1.2rem;
	background:rgba(0,0,0,0.5);
	box-shadow:0 0 10px 0 rgba(0,0,0,0.3);
	transition:ease 0.5s;
	border-radius:0.5rem;
	margin-top:4rem;
}
.main-section-inner a:hover{
	background:rgba(255,255,255,0.8);
	color:#000;
	box-shadow:0 0 3px 0 rgba(0,0,0,0.8);
}
.main-product{background:url('../img/main-product-bg.png')no-repeat center center / cover;}
.main-rd{background:url('../img/main-rd-bg.png')no-repeat center center / cover;}
.main-news{background:url('../img/main-news-bg.png')no-repeat center center / cover;}

footer{
	background:#18191d;
	padding:5rem 0 5rem 0;
}
.footer-info-wrap{
	display:flex;
	justify-content:space-between;
	align-items: flex-start;
}
.footer-info strong{
	display:block;
	font-size:1.3rem;
	color:#fff;
}
.footer-info-item{
	display:flex;
	gap:5rem;
	margin:1rem 0 3rem 0;
}
.footer-info-item ul li{
	padding:0.3rem 0;
	color:#929292;
	display: flex;
}
.footer-info-item ul li span:nth-child(1){
	width:5rem;
}
.footer-btn{
	display:flex;
	gap:0.5rem;
	align-items: center;
}
.footer-btn a{
	padding:0.5rem 1rem;
	color:#fff;
	border-radius:1.5rem;
	border:1px solid #fff;
}
.footer-btn a.footer-contact{
	display:flex;
	justify-content:space-between;
	align-items: center;
	gap:1.5rem;
	border:1px solid #66c0ff;
	color:#66c0ff;
}
.copy{
	color:#929292;
}
.icon-contact{
	width:13px;
	height:12px;
}
.icon-contact:before{
	display:block;
	content:'';
	width:100%;
	height:100%;
	background:url('../img/icon_contact.svg')no-repeat center center / 100%;
}

@media(max-width:1500px){	
	.main-visual{
		height:100vh;
	}
	.main-visual-txt {
		font-size: 2.8rem;
		padding: 0 2rem 8rem 2rem;
	}
	.main-tit {
		font-size: 2rem;
		padding-bottom:3rem;
	}
	.inner{
		padding:0 40px;
	}
	.main-intro {
		padding: 10rem 0 15rem 0;
	}
	.main-intro-img{
		gap:2rem;
		width:58vw;
	}
	.main-core {
		height: 80vh;
	}
	.main-core-txt {
		font-size: 2.6rem;
	}
	.main-core-txt span {
		font-size: 1.8rem;
	}
	.main-bat-wrap {
		padding: 3rem 0 8rem 0;
	}
	.main-section .main-tit{
		padding-bottom:0;
	}
	footer {
		padding: 3rem 0 3rem 0;
	}
	.footer-info-wrap {
		flex-direction: column-reverse;
	}
	.footer-btn{
		margin-bottom:3rem;
	}
}

@media(max-width:1024px){
	.main-visual-txt {
		font-size: 2.5rem;
	}
	.main-tit{
		font-size:1.6rem;
	}
	.main-tit span{
		font-size:1.1rem;	
	}
	.main-intro-img-item{
		padding:3rem 2rem;
		font-size:1.5rem;
	}
	.main-core {
        height: 60vh;
    }
	 .main-core-txt {
        font-size: 2rem;
    }
	.main-core-txt span {
        font-size: 1.5rem;
    }
	.main-bat-wrap {
        flex-wrap: wrap;
		padding: 0rem 0 5rem 0;
    }
	.main-bat-item {
		flex: 1 1 48%;
	}
	.main-bat-item {
		font-size: 1.2rem;
		padding: 2rem 2rem;
	}
	.footer-info-item {
		gap: 0;
		flex-direction: column;
	}
	.footer-info-item ul li{
		font-size:0.9rem;
	}
	.footer-info-item ul li span:nth-child(1){
		width:25%;
	}
	.footer-info-item ul li span:nth-child(2){
		width:85%;
	}
	.copy{
		font-size:0.8rem;
	}
	.footer-btn{
		font-size:0.9rem;
	}
}

@media(max-width:768px){
	.main-visual-txt {
        font-size: 1.5rem;
    }
	.main-visual-txt p br{
		display:none;
	}
	.main-visual-txt span {
		font-size: 1.1rem;
		padding-bottom: 1rem;
	}
	.main-intro {
        padding: 5rem 0 8rem 0;
    }
	.main-intro-img {
		grid-template-columns: 1fr; 
	  }
	.main-intro-img1 { grid-row: auto; }
	.main-visual {
        height: 100vh;
    }
	.main-tit {
		padding-bottom:3rem;
    }
	.main-intro-wrap {
		flex-direction: column;
	}
	.main-intro-txt {
		width: 100%;
	}
	.main-intro-txt br{
		display:none;
	}
	.main-intro-img {
        width: 100%;
        margin: 0 auto;
    }
	
	.main-intro-img1{
		margin-top:0;
	}
	.main-core-txt {
        font-size: 1.6rem;
    }
	.main-core .inner {
		padding-top: 4rem;
	}
	.main-core-txt span {
        font-size: 1.1rem;
		padding-top:0.8rem;
    }
	.main-section-inner p {
		font-size: 1rem;
		padding-top: 1.2rem;
		line-height: 1.4;
	}
	.main-section-inner p  br{
		display:none;
	}
	.main-section-inner a {
		margin-top: 2rem;
	}

	.main-section .inner {
		padding-top: 15vh;
	}
	.main-product {
		background: url('../img/main-product-bg-mo.png') no-repeat right bottom / cover;
	}
	.main-news {
		background: url('../img/main-news-bg-mo.png') no-repeat right bottom / cover;
	}
	.main-section .inner {
		justify-content: flex-start;
	}
}


/* sub */
.bg-dark{
	background-color:var(--bg-dark);
}
.sub-visual{
	width:100%;
	position:relative;
	overflow:hidden;
	height:100vh;
}
.sub-visual-bg{
	width:100%; height:100%;
	position:absolute;
	top:0;
	left:50%;
	transform: translateX(-50%) scale(1.3);
	transform-origin:center center;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	transition: transform 3s ease; 
	z-index: -1;
}
.sub-visual.active .sub-visual-bg{
	transform: translateX(-50%) scale(1);
}
.sub-visual-txt{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.sub-tit{
	font-size: 5rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
}
.sub-tit span{
	font-size: 2rem;
    display: block;
    text-align: center;
}
.about-us{background-image:url('../img/aboutus.png');}
.technology{background-image:url('../img/technology.png');}
.products{background-image:url('../img/products.png');}
.research-and-patents{background-image:url('../img/research-and-patents.png');}
.business{background-image:url('../img/business.png');}
.sustainability{background-image:url('../img/sustainability.png');}
.contact{background-image:url('../img/contact.png');}
.news{background-image:url('../img/news.png');}

.con{
	padding-top:8rem;
}
.con-tit{
	font-size:2rem;
	font-weight:700;
	padding-bottom:3rem;
}
.con-txt-big{
	font-size:1.6rem;
	text-align:center;
	padding-bottom:5rem;
	line-height:1.4;
	padding-left:2rem;
	padding-right:2rem;
}
.con-txt{
	font-size:1.2rem;
	line-height:1.6;
	padding-bottom:5rem;
}
.con-txt-big.no-pd{
	padding-bottom:0;
}
.con-txt-big2{
	font-size:2.3rem;
	text-align:center;
	padding-bottom:5rem;
	line-height:1.4;
	color:#0d1145;
	font-weight:700;
}
.con-txt-big2.no-pd{
	padding-bottom:0;
}
.txt-center{
	text-align:center;
}
.txt-white, .txt-white > *{
	color:var(--white-color);
}
.last-con{
	padding-bottom:10rem;
}


/* ===== 조절값 ===== */
.about .con{
	padding:8rem 0 10rem 0;
}
.about-top{
	position:relative;
	padding-bottom:2rem;
	overflow:hidden;
}
.about-us-con{
	text-align:center;
}
.about-us-bg-wrap {
    position: absolute;
	overflow:hidden;
    height: 100%;
    width: 100%;
	z-index:-2;
	top:0;
	left:50%;
	transform:translateX(-50%)
}
.about-us-bg {
  width: 100%;
  height: 100%;
  background: var(--bg-dark);
  position:relative;
}
.about-us-bg > span {
    width: 60vmin;
    height: 60vmin;
    border-radius: 50vmin;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    animation-name: about-circle;
    -webkit-animation-duration: 30s;
    -moz-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count:infinite;
	filter: blur(80px);
}
.about-us-bg > span:first-child {
	background: radial-gradient(circle, rgba(88, 86, 222, 0.5), transparent 60%);
    opacity: .4;
    top: 64%;
    left: 3%;
    animation-duration: 20s;
    animation-delay: -10.7s;
    transform-origin: 14vw -22vh;
    box-shadow:100vmin 0 20.5259430347vmin currentColor
}
.about-us-bg > span:nth-child(2) {
	background: radial-gradient(circle, rgba(88, 86, 222, 0.5), transparent 60%);
    opacity: .4;
    top: 24%;
    left: 85%;
    animation-duration: 28s;
    animation-delay: -3.1s;
    transform-origin: -1vw -14vh;
    box-shadow:100vmin 0 36.2934581027vmin currentColor
}
.about-us-bg > span:nth-child(3) {
	background: radial-gradient(circle, rgb(88 57 255 / 50%), transparent 60%);
    opacity: .4;
    top: 41%;
    left: 38%;
    animation-duration: 32s;
    animation-delay: -9.8s;
    transform-origin: -5vw -21vh;
    box-shadow:-100vmin 0 21.6771071789vmin currentColor
}
@-webkit-keyframes about-circle {
    to {
        -webkit-transform: translateZ(1px) rotate(1turn);
        transform:translateZ(1px) rotate(1turn)
    }
}

@-moz-keyframes about-circle {
    to {
        -moz-transform: translateZ(1px) rotate(1turn);
        transform:translateZ(1px) rotate(1turn)
    }
}

@keyframes about-circle {
    to {
        -webkit-transform: translateZ(1px) rotate(1turn);
        -moz-transform: translateZ(1px) rotate(1turn);
        transform: translateZ(1px) rotate(1turn)
    }
}


.wheel{
  --size: min(60vmin, 560px); 
  --radius: 50%;            
  --speed: 10s;               
  --dir: normal;             
  --ring: #ffffff;           
  --dot: #135a9c;       
  --txt: #fff;                

  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  margin: 0 auto;
}

/* 바깥 원 */
.ring{
  position:absolute;
  width:100%; height:100%;
  border: 2px dotted var(--border-blue);
  border-radius: 50%;
  z-index:-1;
}
.ring-logo{
	display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #0a0a0a;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

/* 4개 포인트(원형 라벨) */
.dot{
	position:absolute;
	width: clamp(180px, 16vmin, 280px); aspect-ratio:1;
	background-color: var(--bg-dark);
	border-radius:50%;
	transform: translate(-50%,-50%) rotate(var(--angle))
             translate(var(--radius))
             rotate(calc(-1 * var(--angle)));
	display:grid; place-items:center;
	font-weight:700;
	font-size:1.5rem;
	color:#fff;
}
.dot::before, .dot::after{
  position: absolute;
  content : "";
  top: -5%;
  left: -5%;
  height:105%;
  width:105%;
  border-radius:50%;
  opacity:0.5;
  filter: blur(60px);
  z-index:-1;
}
.dot.top    { top:0; left:0;}
.dot.right  {top:0; right:0;}
.dot.bottom { bottom:0; right:0;}
.dot.left   { bottom:0; left:0;}

.dot.top::after, .dot.bottom::after{
   background-color:#00ffff;
   z-index: -1;
  animation : backglow2 15s ease infinite;
}
.dot.top::before, .dot.bottom::before{
    background-color:#ff0072;
   z-index: -1;
  animation : backglow1 15s ease infinite;
}
.dot.right::after, .dot.left::after{
   background-color:#00ffff;
   z-index: -1;
  animation : backglow1 15s ease infinite;
}
.dot.right::before, .dot.left::before{
    background-color:#ff0072;
   z-index: -1;
  animation : backglow2 15s ease infinite;
}

@keyframes backglow1{  
  0% {transform: translate(5%, 5%) scale(1); opacity:0.5;}
  25%{transform: translate(-5%, 5%) scale(0.8);opacity:0.5; }
  50%{transform: translate(-5%, -5%) scale(1);opacity:0.8;}
  75%{transform: translate(5%, -5%) scale(0.9); opacity:0.2;}
  100%{transform: translate(5%, 5%) scale(1); opacity:0.5;}  
}
@keyframes backglow2{
 0% {transform: translate(-5%, -5%) scale(1); opacity:0.5;}
  25%{transform: translate(5%, -5%) scale(0.8);opacity:0.5; }
  50%{transform: translate(5%, 5%) scale(1);opacity:0.8;}
  75%{transform: translate(-5%, 5%) scale(0.9); opacity:0.2;}
  100%{transform: translate(-5%, -5%) scale(1); opacity:0.5;}  
}

/* 화살표를 회전시키는 래퍼 */
.arrow-wrap{
  position:absolute; inset:0;
  animation: spin var(--speed) linear infinite;
  animation-direction: var(--dir);
  transform-origin: 50% 50%;
  z-index:-1;
}

/* 화살표(삼각형) – 처음엔 상단에서 시작, 접선 방향(→)으로 향하도록 90deg */
.arrow {
    position: absolute;
    top: calc(50% - var(--radius));
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}
.arrow:before {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 40%;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(-130deg);
    width: 15px;
    height: 15px;
}
.arrow:after {
    display: block;
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(32, 32, 35, 1);
	box-shadow: 0 0 20px 0 rgb(84 247 255 / 30%);
    position: relative;
    z-index: -1;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

:root{
  
  --shape-box-size: 320px;
  --border: 3px;
  --accent: #39e1ff;
  --duration: 3s;
  --bg: #081824;
  --txt: #eaf6ff;
}
.mission-vision{
  display:grid; gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width:min(1100px, 92vw);
  margin: 0 auto; 
}

/* 공통 카드 */
.shape-box{
  position: relative;
  width:var(--shape-box-size); max-width:100%; aspect-ratio:1;
  padding:28px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; line-height:1.45; letter-spacing:.2px;
  box-shadow: 0 6px 28px rgb(93 93 93 / 40%);
  overflow: hidden;       
  color:#fff;
  background:#202023;
  z-index:-2;
}
.shape-box::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2));
  pointer-events:none;
  z-index:-1;
}
.shape-box h3{display:block;margin:.2rem 0 .5rem; font-size:1.6rem; font-weight:800}
.shape-box p {
    margin: 0;
    font-size: 1.3rem;
    word-break: keep-all;
    line-height: 1.4;
    margin-top: 0.5rem;
}
.shape-box p:before {
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 1rem;
}

/* ① 원 <-> 네모 */
.circle-square{
  animation: circleSquare var(--duration) ease-in-out infinite alternate;
  /* background:var(--border-blue); */
}
.circle-square2{
  animation: circleSquare2 var(--duration) ease-in-out infinite alternate;
  /* background:#1e6173; */
}
.circle-square3{
  animation: circleSquare3 var(--duration) ease-in-out infinite alternate;
  /* background:#1e819b; */
}
@keyframes circleSquare{ 0%{ border-radius: 2rem }100% { border-radius:50% }}
@keyframes circleSquare2{0%{ border-radius:50% 50% 0 0 }100% { border-radius:1.5rem 1.5rem 1.5rem 1.5rem }}
@keyframes circleSquare3{0%{ border-radius: 30%  }100% { border-radius:0 50% 50% 0}}


/* 모션 줄이기 */
@media (prefers-reduced-motion: reduce){
  .shape-box{ animation: none !important }
}
.about-us-con + .bg-dark{
	padding:2rem 0;
}
.journey{
	background:#0a0a0a;
	width:calc(100% - 2rem);
	margin:0 auto;
	border-radius:2rem;
	color:#fff;
}
.journey-line{
  display:block;             
  width:0;     
  border:1px solid transparent;
  border-radius:1rem;
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg,rgba(23, 134, 179, 1) 0%, rgba(72, 180, 194, 1) 50%, rgba(72, 212, 179, 1) 100%);;
  background-origin: border-box;
  background-clip: content-box, border-box;
  will-change: width;
}
.journey-line.scrolled.active{
  animation: journey-line-grow 2s linear forwards;
}
@keyframes journey-line-grow{
  from{ width:0; }
  to  { width:100%; }
}

/* 접근성: 모션 최소화 환경에선 즉시 완료 */
@media (prefers-reduced-motion: reduce){
  .journey-line.scrolled.active{
    animation:none;
    width:100%;
  }
}

.journey-items {
    display: flex;
    margin-top: 2rem;
}
.journey-items > div {
    flex: 1;
    padding-bottom: 6rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.journey-items > div div{
	display: flex;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px dashed var(--border-blue);
	position:relative;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem;
}
.journey-items > div:before{
	display: block;
    content: '';
    width: 1px;
    height: 6rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background: var(--border-blue);
}
.journey-items > div:after{
	display: block;
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    background: var(--bg-dark);
    border: 1px solid var(--border-blue);
}
.journey-items strong {
    font-size: 2rem;
    font-weight: 800;
    color: #15b1ff;
    padding-bottom: 0.5rem;
    display: block;
}
.journey-items p {
    font-size: 1.2rem;
}


.team-partners{
	max-width:1100px;
	width:100%;
	margin:0 auto;
	display: flex;
    gap: 3rem;
    flex-direction: column;
    align-items: center;
}
.team{
	max-width:500px;
	width:100%;
	margin:0 auto;
}
.team .box{
	background: var(--bg-dark);
    border: 1px solid rgb(28 194 235 / 30%);
    border-radius: 1rem;
    overflow: hidden;
}
.team .box .box-img{
	width:100%;
}
.box-img img{
	width:100%;
}
.team .box p{
	padding: 1.6rem 1.8rem;
	color:#fff;
}
.team .box strong{
	font-size:1.2rem;
	display:block;
	padding-bottom:0.65rem;
}
.partners{
    display: flex;
    gap: 1rem;
	width:100%;
}
.partners > div{
	border: 1px solid rgb(28 194 235 / 30%);
    padding: 1.6rem 1.8rem;
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
	background:#fff;
}
.partners img{
	width:100%;
}


.about-design {
	background:url('../img/about-desgin-bg.png')no-repeat center center / cover;
	/* height:100vh; */
	padding:8rem 0;
}

.scroll-top-txt {
  max-width:1000px;
  width:100%;
  margin:0 auto;
  padding:0 20px;
  margin-bottom:3rem;
}

.about-design .inner {
  position: relative;
  /* height: 100vh; */
  overflow: hidden; 
  max-width:100%;
}

.scroll-box {
  /* height: 100vh; */
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-left:10vw;
}

.scroll-box::-webkit-scrollbar {
  display: none;      
}

/* 카드(연도별 아이템) */
.scroll-item {
  min-width: 50vw;  
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  position:relative;
  align-items: flex-start;
  padding:7rem 0 2rem 0;
}

/* 활성 카드 스타일 (JS로 is-active 줄 수도 있음) */
.scroll-item.is-active {
  background: rgba(255,255,255,0.08);
}

/* 텍스트/이미지 스타일 */
.scroll-year {
	position:absolute;
	font-weight:900;
	font-size:5rem;
	top:0;
	color:rgba(255,255,255,0.4);
}

.scroll-tit {
  font-size:1.2rem;
  font-weight: 500;
  line-height: 1.6;
  color:#fff;
  padding-bottom:1rem;
}
.scroll-tit span {
  display: inline-block;
  margin-left: 6px;
  font-size: 14px;
  color:#15b1ff;
}

.scroll-img img {
  max-width:600px;
  width:100%;
}

/* 하단 점 네비게이션 */
.scroll-dots {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.scroll-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scroll-dots .dot.is-active {
  background: #fff;
  border-color: #fff;
  width: 28px;   /* 활성일 때 알약 모양 */
}



.card-type1-inner{
	display:flex;
	gap:2rem;
}
.card-type1-item {
    flex: 1;
    padding: 3rem 2rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.85);
}
.card-type1-txt strong{
	font-size:1.5rem;
	font-weight: 600;
	display:block;
    min-height: 5rem;
}
.card-type1-img{
	width:100%;
	aspect-ratio: 1; 
	border-radius:1rem;
	overflow:hidden;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	margin: 1.5rem auto;
	margin-top:0;
}
.card-type1-txt p {
    text-align: center;
    font-size: 1.2rem;
}


.card-type2-inner{
	display:flex;
	gap:2rem;
}
.card-type2-item {
    flex: 1;
    aspect-ratio: 3 / 4;
    position: relative;
    display: flex;
    padding: 3rem 2rem;
    color: #fff;
    text-align: center;
    flex-direction: column;
    border-radius: 1.5rem;
    overflow: hidden;
}
.card-type2-img{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}
.card-type2-txt strong{
	font-size:1.6rem;
	font-weight:600;
	display:block;
	padding-bottom:0.5rem;
	text-shadow: 1px 1px 18px rgb(0 0 0 / 50%);
}
.card-type2-txt p{
	font-size:1rem;
	text-shadow: 1px 1px 18px rgb(0 0 0 / 50%);
}
.card-type4-inner{
	display:flex;
	flex-direction:column;
	gap:2rem;
}
.card-type4-item{
	padding:4rem 6rem;
	position:relative;
	border-radius:15rem;
	overflow:hidden;
	aspect-ratio: 4 / 1;
	text-align:center;
    text-shadow: 1px 1px 18px rgb(0 0 0 / 50%);
	z-index:-2;
}
.card-type4-item:after{
	position:absolute;
	display:block;
	content:'';
	background:rgba(0,0,0,0.3);
	width:100%;
	height:100%;
	top:0; left:0;
	z-index:-1;
}

.card-type4-item strong {
    font-size: 2.8em;
    font-weight: 800;
}
.card-type4-item p {
    font-size: 1.6em;
	padding-top:1.5rem;
}
.card-type4-img{
	width:100%; height:100%;
	position:absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
	z-index:-1;
}
.card-type4-txt{
	flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
	
}

.tech-bg{background:url('../img/tech-bg3.png')no-repeat center center / cover; color:#fff;}
.tech-top{color:#000;}
.tech-top .con-txt-big{margin-bottom:3rem;}
.tech-img1{background-image:url('../img/tech-img1.png');}
.tech-img2{background-image:url('../img/tech-img2.png');}
.tech-img3{background-image:url('../img/tech-img3.png');}
.tech-img4{background-image:url('../img/tech-img4.png');}

.pd-img1{background-image:url('../img/pd-img1.png');}
.pd-img2{background-image:url('../img/pd-img2.png');}
.pd-img3{background-image:url('../img/pd-img3.png');}
.pd-img4{background-image:url('../img/pd-img4.png');}

.rp-img1{background-image:url('../img/rp-img1.png');}
.rp-img2{background-image:url('../img/rp-img2.png');}
.rp-img3{background-image:url('../img/rp-img3.png');}
.rp-img4{background-image:url('../img/rp-img4.png');}

.rp-img1{background-image:url('../img/rp-img1.png');}
.rp-img2{background-image:url('../img/rp-img2.png');}
.rp-img3{background-image:url('../img/rp-img3.png');}
.rp-img4{background-image:url('../img/rp-img4.png');}

.sus-img1{background-image:url('../img/ss-img1.png');}
.sus-img2{background-image:url('../img/ss-img2.png');}
.sus-img3{background-image:url('../img/ss-img3.png');}



.img-con-wrap{
	display:flex;
	gap:1rem;
	margin-bottom:4rem;
}
.img-con-wrap:last-child{
	margin-bottom:0;
}
.img-con{
	flex:1;
}
.img-con img{
	width:100%;
}
.img-con-txt{
	display:flex;
	gap:0.8rem;
	justify-content: center;
	text-align:center;
	font-size:1.2rem;
	font-weight:600;
}
.img-con-txt span{
	display:block;
}
.img-con-txt p{
	padding:1rem 1rem;
}
.ict1-1 p{	flex:1;}
.ict1-2 p:nth-child(1){flex:1;}
.ict1-2 p:nth-child(2){flex:2.1;}
.ict2-1 p:nth-child(1){flex:2.1;}
.ict2-1 p:nth-child(2){flex:1;}

.pd-slider {
    width:100%;
	padding:8rem 0 10rem 0;
	overflow:hidden;
	position:relative;
    margin: 0 auto;
	display: flex;
    justify-content: center;
    align-items: center;
	color:#fff;
	flex-direction: column-reverse;
}

  /* 메인 뷰(큰 영역) */
.swiper.pd-swiper2 {
    width: 100%;
    height:100%;
    overflow: hidden;
    position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	z-index:-1;
  }
  .pd-swiper2 .swiper-slide {
    position: relative;
  }
  .pd-swiper2 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* 배경처럼 꽉 채우기 */
    display: block;
  }
  /* 어둡게: 상단 메인에 오버레이 */
  .pd-swiper2::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(0,0,0,.38); /* 어둡기 조절 */
    pointer-events: none;
    z-index: 1;
  }

  /* 네비(썸네일) */
.pd-swiper {
  width: 100%;
}
.pd-swiper .swiper-slide {
  aspect-ratio: 3 / 4; 
  overflow: hidden;
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease;
  border: 1px solid rgba(255,255,255,.5);
  position:relative;
  border-radius:1.5rem;
  overflow:hidden;
}
.pd-swiper .swiper-slide:hover{
	cursor:pointer;
}
.pd-swiper .swiper-slide p{
	color:#fff;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	font-size:1.5rem;
}
.pd-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:none;
}
.pd-swiper .swiper-slide-thumb-active img{
	display:block;
}
.pd-swiper .swiper-slide-thumb-active {
  opacity: 1;
  transform: scale(1.02);
  border-color: transparent;
}


.table-type1{
	width:100%;
	border:1px solid rgb(28 194 235 / 30%);
	overflow:hidden;
	border-radius:1rem;
}
.table-type1 table{
	width:100%;
}
.table-type1 th, .table-type1 td{
	padding:1rem 1.5rem;
}
.table-type1 th{
	background:#100f15;
}
.table-type1 td{
	background:#1a1a24;
	text-align:center;
}
.table-type1 tr:nth-child(even) td{
	background:#20202a
}
.patents-bg{
	background-color:#111116;
}
.patents{
	display:flex;
	gap:2rem;
}
.patents-item{
	flex:1;
	aspect-ratio: 2 / 1;
	border: 1px solid rgb(28 194 235 / 30%);
	background:#1a1a24;
	padding:3rem;
	color:#fff;
	border-radius:1.5rem;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	position:relative;
}
.patents-item strong{
	display:block;
	font-size:1.5rem;
	color:var(--border-blue);
}
.patents-item:before{
	position:absolute;
	right:3rem;
	top:3rem;
	border: 1px solid rgb(28 194 235 / 30%);
	padding:1rem;
	border-radius:0.5rem;
	display:block;
	margin-bottom:1rem;
	content:'';
	width:3rem;
	height:3rem;
	background:linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2)), url('../img/icon-patents.svg')no-repeat center center / 50%;
}
.patents-item p {
	margin-top:3rem;
	font-size:1.2rem;
	padding:1.5rem 0 0 0;
	font-weight:500;
}
.patents-item p span{
	font-size:1rem;
	display:table;
	margin-top:0.8rem;
	color:#959595;
}



.roadmap{
	width:calc(100% - 2rem);
	background:url('../img/roadmap.png')no-repeat center center / cover;
	border-radius:1.5rem;
	overflow:hidden;
	margin:0 auto;
}
.roadmap-inner{
	display:flex;
}
.roadmap-item{
	flex: 1;
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
}
.roadmap-item p{
	width: 75%;
    aspect-ratio: 1;
	padding:2rem;
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	border-radius:50%;
	border:3px dotted var(--border-blue);
	font-size:2.5rem;
}
.roadmap-item p strong{
	display:block;
	font-size:1.4rem;
	margin-bottom:0.3rem;
}
.busi-bt-inner{
	display:flex;
	gap:2rem;
}
.busi-bt-inner > div{
	flex:1;
	aspect-ratio:1;
	display: flex;
    align-items: center;
    justify-content: center;
	position:relative;
	border-radius:1.5rem;
	overflow:hidden;
	color:#fff;
	font-size:2rem;
	z-index:-2;
}
.busi-bt-inner > div:before{
	display:block;
	content:'';
	position:absolute;
	left:0; top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.3);
	z-index:-1;
}
.busi-bt-inner > div:nth-child(1){background:url('../img/busi-img1.png')no-repeat center center / cover;}
.busi-bt-inner > div:nth-child(2){background:url('../img/busi-img2.png')no-repeat center center / cover;}
.busi-bt-inner > div:nth-child(3){background:url('../img/busi-img3.png')no-repeat center center / cover;}
.busi-bt-inner > div:nth-child(4){background:url('../img/busi-img4.png')no-repeat center center / cover;}

.news-theme{
	background:url('../img/news-theme.png')no-repeat center center / cover;
	text-align:center;
	width:100%;
	margin:0 auto;
	border-radius:1.5rem;
	padding:8rem 0;
	text-align:center;
	color:#fff;
	font-size:2rem;
}

.tab-latest .tab-nav {
  display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;
}
.tab-latest .tab-btn {
  padding:.5rem .9rem; border-radius:8px; border:1px solid #ddd; background:#f8f9fc;
  cursor:pointer; font-size:14px;
}
.tab-latest .tab-btn.is-active { background:#111; color:#fff; border-color:#111; }

.tab-latest .tab-panel { display:none; }
.tab-latest .tab-panel.is-active { display:block; }


.news-top{
	display: flex;
    gap: 2rem;
    align-items: stretch;
}
.news-top-txt{
	flex:1;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.news-top-txt h2{
	font-size:2.3rem;
	font-weight:700;
}
.news-top-txt p{
	font-size:1.1rem;
	padding:1rem 0;
	line-height:1.6;
}
.news-top-txt span{
	display:block;
	color:#666;
}
.news-video{
	flex:1;
}
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius:1.5rem;
  overflow:hidden;
}
.video-wrapper iframe,
.video-wrapper .poster {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
}

#video { display: none; }



@media screen and (max-width: 1500px) {
	.sub-tit {
		font-size: 3rem;
	}
	.con {
		padding-top: 5rem;
	}
	.con-tit {
		padding-bottom: 2rem;
	}
	.con-txt{
		font-size:1rem;
	}
	.con-txt-big {
		font-size: 1.2rem;
		padding-bottom:3rem;
	}
	.con-txt-big2{
		font-size:2rem;
	}
	.journey-items > div div {
		width: 80%;
	}
	.card-type1-inner {
		gap: 1rem;
	}
	.card-type1-txt strong {
		font-size: 1.2rem;
	}
	.card-type1-txt p {
		font-size: 1.1rem;
	}
	.card-type1-item {
		padding: 2rem 1rem;
	}
	.card-type1-inner {
        flex-wrap: wrap;
    }
	.card-type2-txt strong{
		font-size: 1.3rem;
	}
	.card-type2-inner{
		gap:1rem;
		flex-wrap: wrap;
	}
	.pd-swiper .swiper-slide p{
		text-align:center;
	}
	.patents{
		gap:1rem;
	}
	.patents-item strong{
		font-size:1.3rem;
	}
	.patents-item p {
		font-size: 1.1rem;
	}
	.roadmap-item p {
		font-size: 1.8rem;
	}
	.roadmap-item p strong {
		font-size: 1.2rem;
	}
	.last-con {
		padding-bottom: 7rem;
	}
	.busi-bt-inner{
		gap:1rem;
	}
	.card-type4-item {
		aspect-ratio: 3 / 1;
	}
	.card-type4-item strong {
		font-size: 2.2em
	}
	.card-type4-inner {
		gap: 1rem;
	}
	.scroll-box {
	  gap:5rem;
	  padding-left:5vw;
	}
	.img-con-wrap {
		margin-bottom: 2rem;
	}
	.img-con-txt{
		font-size:1rem;
	}
	
	

}

@media screen and (max-width: 1024px) {
	.sub-tit {
        font-size: 2.5rem;
    }
	.sub-tit span {
		font-size: 1.6rem;
		padding-top: 0.5rem;
	}
	.con-txt-big2{
		font-size:1.6rem;
	}
	.journey-items > div div {
		width: 90%;
	}
	.journey-items p {
		font-size: 1rem;
	}
	.journey-items > div div {
		display: flex;
		width: 90%;
		aspect-ratio: auto;
		border-radius: 1.5rem;
	}
	.journey-items strong {
		font-size: 1.5rem;
	}
	.about .con {
		padding: 5rem 0 7rem 0;
	}
	.mission-vision {
		display: flex;
		gap: 1rem;
		width: 100%;
	}
	.shape-box{
		flex:1;
		padding:1.5rem;
	}
	.shape-box h3 {
		font-size: 1.4rem;
	}
	.shape-box p{
		font-size:1rem;
	}
	.journey-items {
		display: flex;
		margin-top: 2rem;
		flex-wrap: wrap;
	}
	.journey-items > div {
		flex: 1 1 100%;
		padding-bottom: 1rem;
	}
	.journey-items > div:before, .journey-items > div:after{
		display:none;
	}
	.journey-line{
		display:none;
	}
	.partners img {
		max-width: 140px;
	}
	.ring-logo img{
		width:200px;
	}
	.card-type1-item {
		flex: 1 1 48%;
	}
	.card-type2-item {
		flex: 1 1 48%;
	}
	.patents-item{
		padding:2rem;
	}
	.patents-item:before {
		right: 2rem;
		top: 2rem;
		width: 2rem;
		height: 2rem;
	}
	.roadmap-item p {
		width: 95%;
		border-radius:1.5rem;
		font-size:1.4rem;
	}
	.busi-bt-inner > div{
		font-size:1.3rem;
	}
	.card-type4-item strong {
		font-size: 1.8em;
	}
	.card-type4-item p {
		font-size: 1.2em;
		padding-top: 0.6rem;
	}
	.img-con-wrap {
		margin-bottom: 3rem;
		gap:3rem;
		flex-direction: column;
	}
	.news-top {
		flex-direction: column-reverse;
		gap:3rem;
	}
	.news-top-txt h2 {
		font-size: 2rem;
	}
	.news-top-txt p{
		font-size:1rem;
	}

}
@media screen and (max-width: 768px) {
	 .sub-tit {
        font-size: 2rem;
    }
	.con-tit {
		font-size: 1.4rem;
	}
	.team-partners {
		gap: 1rem;
	}
	.about .con {
        padding: 5rem 0 5rem 0;
    }
	.dot {
		width: clamp(140px, 16vmin, 280px);
		font-size: 1.1rem;
	}
	.con-txt-big{
		font-size:1rem;
	}
	.journey-items {
        margin-top: 0;
	}
	.patents {
		flex-direction: column;
	}
	.patents-item {
		aspect-ratio: 4 / 1;
	}
	.patents-item strong {
		font-size: 1.2rem;
	}
	.patents-item p {
		margin-top: 1.5rem;
	}
	.roadmap-inner {
		flex-wrap: wrap;
		gap:1rem;
	}
	.roadmap-item {
		flex: 1 1 48%;
	}
	.roadmap-item p{
		aspect-ratio: auto;
	}
	.busi-bt-inner {
		flex-wrap: wrap;
	}
	.busi-bt-inner > div {
		flex: 1 1 48%;
	}
	.card-type4-item strong {
		font-size: 1.4em;
	}
	.card-type4-item p {
		font-size: 1.1em;
		padding-top: 0.2rem;
	}
	.card-type4-item {
		padding: 2rem 2rem;
	}
	.team-partners {
		width:80%;
	}
	.partners {
		max-width:500px;
		width: 100%;
		flex-direction: column;
	}
	.scroll-box {
		padding-left: 0;
		flex-direction: column;
		max-width:600px;
		width:100%;
		margin:0 auto;
	}
	.scroll-item {
		min-width: 0;
		width: 100%;
	}
	.scroll-img, .scroll-img img{
		width:100%;
	}
	.scroll-year{
		font-size:4rem;
		color:rgba(255,255,255,0.3);
	}
	.scroll-tit {
		text-align:left;
	}
	.scroll-tit span{
		display:block;
	}
	.scroll-item {
		padding: 5em 0 2rem 0;
	}
	.img-con-wrap {
		margin-bottom: 1.5rem;
		gap:1.5rem;
	}
	.news-top{
		gap:1.5rem;
	}
	.news-top-txt h2 {
		font-size: 1.3rem;
		padding-bottom:1rem;
	}
	.news-top-txt p{
		padding:0.5rem 0 0.2rem 0;
		line-height:1.5;
	}
	.news-top-txt  span{
		padding-top:2rem;
		padding-bottom:4rem;
	}
}
@media screen and (max-width: 640px) {
    .inner {
        padding: 0 30px;
    }
	.con {
        padding-top: 3rem;
    }
	.con-txt{
		padding-bottom:3rem;
	}
	.wheel {
		--size: 80%;
	}
	.dot {
		position: absolute;
		width: clamp(100px, 16vmin, 280px);
	}
	.arrow {
		width: 30px;
		height: 30px;
	}
	.arrow:after {
		width: 30px;
		height: 30px;
	}
	.arrow:before {
		width:10px;
		height:10px;
	}
	.mission-vision {
        flex-direction: column;
		align-items: center;
    }
	.con-txt-big {
		padding-bottom: 3rem;
	}
	.con-txt-big2 {
        font-size: 1.2rem;
		padding-bottom:3rem;
    }
	.journey-items > div div {
        width: 100%;
    }
	.team-partners {
		flex-direction: column;
		width:100%;
	}
	.partners > div {
		padding: 1rem 1.8rem;
	}
	.card-type1-item {
		flex: 1 1 100%;
	}
	.card-type2-item {
		flex: 1 1 100%;
	}
	.card-type4-item strong {
        font-size: 1.2em;
    }
	.card-type4-item{
		aspect-ratio: 2 / 1;
	}
	.board .last-con{
		padding-bottom:3rem;
	}
	.card-type1-txt strong{
		min-height: 0;
		padding-bottom:1.5rem;
	}
	.scroll-box {
        gap: 3rem;
	}
	.img-con-txt{
		font-size:0.9rem;
	}
	.img-con-txt p {
		padding: 0.5rem 0.2rem;
	}
}


























.reveal {
  display: block; /* inline이면 안 보일 수 있어요 */
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition:
    clip-path 0.8s cubic-bezier(0.25, 0.7, 0.25, 1),
    -webkit-clip-path 0.8s cubic-bezier(0.25, 0.7, 0.25, 1); /* Safari */
  will-change: clip-path, -webkit-clip-path;
}

/* active 시 열림 */
.reveal.active {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* 방향별 초기 상태 */
.reveal-left  { clip-path: inset(0 100% 0 0);   -webkit-clip-path: inset(0 100% 0 0); }
.reveal-right { clip-path: inset(0 0 0 100%);   -webkit-clip-path: inset(0 0 0 100%); }
.reveal-up    { clip-path: inset(100% 0 0 0);   -webkit-clip-path: inset(100% 0 0 0); }
.reveal-down  { clip-path: inset(0 0 100% 0);   -webkit-clip-path: inset(0 0 100% 0); }

/* active 공통 */
.reveal-left.active,
.reveal-right.active,
.reveal-up.active,
.reveal-down.active {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}