@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* reset */
* {margin: 0;padding: 0; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

.en {font-family: 'Albra Trial', sans-serif; font-weight: 200;}
body {font-family: 'pretendard', sans-serif; background: #121212; color: #fff; font-weight: 400; cursor: url('../img/cursor.png') 0 0, auto;}
.inner {width: 90%; margin: 0 auto;}




/* 마우스 포인터 */
body.clicked {cursor: url('../img/cursor2.png'), auto;}
a:hover {cursor: url('../img/cursor2.png'), auto;}
button:hover {cursor: url('../img/cursor2.png'), auto;}



/* layout */
header {position: fixed; width: 100%; z-index: 9999; transition: transform 0.3s ease; }
.headerInner { width: 100%; padding: 50px 3%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; }
.headerInner a {font-size: 25px; display: block;}
.headerInner .menu {display: block; width: 50px; background: transparent; border: none; cursor: pointer; z-index: 9999; position: relative; }
.headerInner .menu span {display: block; width: 100%; height: 3px; background: #fff; margin-bottom: 12px; transition: transform 0.4s ease, opacity 0.3s ease; }
.menu.active span:nth-child(1) { transform: translateY(18px) rotate(45deg); background: #FF669B; }
.menu.active span:nth-child(2) {display: none;}
.menu.active span:nth-child(3) { transform: translateY(2px) rotate(-45deg); background: #FF669B;}

/* header 스크롤 */
header.hide {transform: translateY(-100%);}
header.show {transform: translateY(0);}

/* 햄버거 메뉴 */
.menuWrap {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); transform: translateY(-100%); z-index: 9000; opacity: 0; transition: all 0.5s;}
.menuWrap.on {display: block; transform: translateY(0); opacity: 1;}

.menuInner {width: 80%; height: 100%; margin: 0 auto; position: relative; z-index: 9999;}
.menuWrap .gnb { padding: 0 150px; position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between;  text-align: left;}
.menuWrap .gnb > ::after {content: ''; width: 12px; height: 12px; border-radius: 50%; background: #FF669B; position: absolute; top: -50px; left: 0; opacity: 0; transition: all 0.3s; }
.menuWrap .gnb > li:hover:after {opacity: 1; position: absolute; top: -10px; transition: all 0.3s;} 
.menuWrap .gnb > li {position: relative; line-height: 2.5;}
.menuWrap .gnb > li .sub li {font-size: 18px; line-height: 2.5; color: #fff; transition: color 0.2s ease;}
.menuInner > .gnb {width: 100%; display: flex; justify-content: space-between;}
.menuWrap .gnb li {color: #fff; font-size: 25px; font-weight: normal; transition: opacity 0.3s ease;}
.menuWrap .gnb:hover li { opacity: 0.5;}
.menuWrap .gnb li:hover { opacity: 1;}
.menuWrap .gnb li .sub li:hover { opacity: 1; color: #FF669B;}



@media screen and (max-width: 1400px) {
  /* tab-menu */
  .menuInner {width: 100%;}
  .menuWrap .gnb {transform: translateY(-50%);}
  .menuWrap .gnb > ::after{width: 10px; height: 10px;}
  .menuWrap .gnb > li { font-size: 25px; padding-top: 30px; }
  .menuWrap .gnb > li .sub li { font-size: 16px; line-height: 2;}
  .menuWrap .gnb > ::after {content: ''; width: 12px; height: 12px; top: -30px; left: 0; opacity: 0;}
  .menuWrap .gnb > li:hover:after {opacity: 1; position: absolute; top: 15px; transition: all 0.3s;} 
}



@media screen and (max-width: 1024px) {
  /* header */
  .headerInner .ent-text{font-size: 18px;}
  .headerInner .menu {width: 25px;}
  .headerInner .menu span{width: 100%; height: 1px; margin-bottom: 7px;}
  
  /* tab-menu */
  .menuInner {width: 80%;}
  .menuWrap .gnb {transform: translateY(-50%); padding: 0;}
  .menuWrap .gnb > ::after{width: 7px; height: 7px;}
  .menuWrap .gnb > li { font-size: 22px; padding-top: 30px; }
  .menuWrap .gnb > li .sub li { font-size: 16px; line-height: 2;}
  .menuWrap .gnb > ::after {content: ''; width: 10px; height: 10px; top: -20px; left: 0; opacity: 0;}
  .menuWrap .gnb > li:hover:after {opacity: 1; position: absolute; top: 25px; transition: all 0.3s;} 
  .menu.active span:nth-child(1) {transform: translateY(10px) rotate(45deg);}
  }


/* 768px 이하 (태블릿 세로 또는 작은 태블릿) */
@media screen and (max-width: 768px) {
.headerInner {padding: 25px 3%;}

/* tab-menu */
.menuWrap .gnb {position: absolute; top: 0; width: 100%; height: 60%; flex-direction: column;}
.menuInner { width: 100%; padding: 0 3%; }
.menuWrap .gnb { transform: translateY(10%); }
.menuWrap .gnb > ::after{width: 7px; height: 7px;}
.menuWrap .gnb > li { font-size: 18px; padding-top: 35px; }
.menuWrap .gnb > li .sub li { font-size: 15px; line-height: 2;}
.menuWrap .gnb > li::after {left: 0; top: -5px; opacity: 0;}
.menuWrap .gnb > li:hover::after { left: 0; top: 30px; opacity: 1; transition: all 0.3s ease; }
}


/* company 섹션*/
.company { padding-top: 150px;}
.company .title {font-size: 60px; color: #FF669B; font-weight: 600; margin: 50px 0 35px 0;}
.company .title .en {font-weight: normal;}
.company .intro {display: flex; justify-content: space-between;  width: 100%; margin: 20px 0 50px 0;}
.company .intro li {width: 35%;}
.company .intro span.sub {font-size: 24px; color: #F297B3;}
.company .intro p {font-size: 16px; margin-top: 20px; width: 85%; line-height: 1.6;}
.company img { width: 100%; filter: brightness(80%);}

.company .mob {display: none;}


@keyframes slideup {
    0% {transform: translateY(30px); opacity: 0;}
    30% {transform: translateY(30px); opacity: 0;}
}
.company .inner .title {animation-name: slideup; animation-duration: 1s;}
.company .inner .intro span.sub {animation-name: slideup; animation-duration: 1.3s;}
.company .inner .intro p {animation-name: slideup; animation-duration: 1.6s;}
.company .inner img {animation-name: slideup; animation-duration: 2s;}




/* timeline 섹션 */
.timeline {margin: 250px 0;}
.timeline .title {font-size: 40px; color: #F297B3; text-align: center; font-weight: normal;}

.timeline .inner .timeline-wrap {position: relative; max-width: 1000px; margin: 0 auto; }
.timeline .inner .timeline-wrap .line {position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: 3px; height: 0; background: #F297B3; z-index: 10; transition: height 1s ease-out; }

.timeline .inner .timeline-wrap .timeline-events { z-index: 1; position: relative;}
.timeline .inner .timeline-wrap .timeline-events .event {position: relative; width: 100%; margin: 200px 0;  opacity: 0; transform: translateY(50px); transition: all 0.5s ease;}
.timeline .inner .timeline-wrap .timeline-events .event.show {opacity: 1; transform: translateY(0);}

.timeline .inner .timeline-wrap .timeline-events .dot {width: 13px; height: 13px; background-color: #FF669B; position: absolute; border-radius: 50%; left: 50%; transform: translateX(-50%); z-index: 100; }
.timeline .inner .timeline-wrap .timeline-events .year {text-align: center; margin-top: 20px; font-size: 20px; font-weight: 500; color: #F297B3;}
.timeline .inner .timeline-wrap .timeline-events .event[data-year="2023"] .year, .event[data-year="2005"] .year { padding-right: 80px;}
.timeline .inner .timeline-wrap .timeline-events .event[data-year="2012"] .year, .event[data-year="1995"] .year { padding-left: 80px;}


.timeline .inner .timeline-wrap .timeline-events h3 {color: #F297B3; font-weight: normal; margin-bottom: 10px; font-size: 18px;}
.timeline .inner .timeline-wrap .timeline-events h3.text {margin-bottom: 25px;} 
.timeline .inner .timeline-wrap .timeline-events p {font-size: 15px;}
.timeline .inner .timeline-wrap .timeline-events p.text {margin-bottom: 25px;}

.timeline .inner .timeline-wrap .timeline-events .content-left,
.timeline .inner .timeline-wrap .timeline-events .content-right {background-color: #1C1C1C; padding: 20px 30px; border-radius: 12px; width: 42%; position: relative; z-index: 1; box-shadow: 0 8px 20px rgba(0,0,0,0.4); opacity: 0; transform: translateY(100px); transition: all 0.8s ease;}

.timeline .inner .timeline-wrap .timeline-events .event.show .content-left,
.timeline .inner .timeline-wrap .timeline-events .event.show .content-right {opacity: 1; transform: translateY(0);}

.timeline .inner .timeline-wrap .timeline-events .content-right {margin-left: 62%; text-align: left;}
.timeline .inner .timeline-wrap .timeline-events .content-left {margin-right: auto; text-align: right; }



/* info 섹션 */
.info .title {text-align: center; line-height: 1.5; margin: 100px;}
.info .title span {font-size: 25px; color: #F297B3;}
.info .title p {font-size: 15px;}
.info .title p.mob {display: none;}

.info .partners .marquee-wrap {overflow: hidden; display: flex; flex-direction: column; gap: 20px;}
.info .partners .marquee-wrap .track {display: inline-flex; animation-timing-function: linear; animation-iteration-count: infinite;}
.info .partners .marquee-wrap .marquee-left .track {display: flex; gap: 8px;}
.info .partners .marquee-wrap .marquee-right .track {display: flex; gap: 8px;  flex-direction: row-reverse; }
.info .partners .marquee-wrap .track .logo img {height: 150px; width: auto;}


@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

.marquee-left .track {animation-name: scroll-left; animation-duration: 10s;}
.marquee-right .track {animation-name: scroll-right; animation-duration: 10s;}


.info .goods {margin: 150px 0 150px;}
.info .goods .imgbox .top {display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; justify-content: center;} 
.info .goods .imgbox .bottom {display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.info .goods .img-wrap {width: 30%; overflow: hidden; border-radius: 30px;}
.info .goods .img-wrap img {width: 100%; transition: 0.5s ease;}
.info .goods img:hover {transform: scale(1.1); filter: brightness(130%);} 


.info .labels {margin-bottom: 150px;}
.info .labels .box {display: flex; gap: 50px; justify-content: center;}
.info .labels .box img {width: 28%; border-radius: 20px;}


/* map 섹션 */
.map {width: 100%; height: 500px;}
.map .inner {height: 100%;}
.map-wrap {width: 100%; height: 100%; }
.map-wrap iframe {width: 100%; height: 100%; border-radius: 40px;  background: none; background-color: transparent; filter: brightness(80%);}
.map .inner .title {font-size: 25px; margin: 0 0 30px 20px;}
.map .inner .text {font-size: 16px; text-align: right; display: block; line-height: 1.7; margin-top: 30px;}


/* footer */
footer {background:linear-gradient(to bottom, #121212 20%, #F297B3);width: 100%; height: 100vh;position: relative; }
footer .inner .top{display: flex; justify-content: space-between; padding-top: 250px;}
footer .inner .top img {width: 600px; height: 130px;}
footer .inner .contact{margin-top: 280px;}
footer .inner .contact li{font-weight: 300; font-size: 14px; margin-bottom: 20px; line-height: 1.8;}
footer .inner .contact li a{display: flex;}
footer .inner .contact li:nth-child(1){display: flex; }
footer .inner .contact li:nth-child(3){display: flex;  }
footer .inner .contact li:nth-child(3) span{ margin-right: 32px;}
footer .inner .contact li span { font-weight: bold; display: block; margin-right: 20px;}
footer .inner .bottom {display: flex; align-items: end; color: #fff; height: 100px; float: right;}
footer .inner .bottom ul{display: flex;}
footer .inner .bottom .list{ position: absolute; left: 50%; transform: translateX(-50%); }
.li-separator {height:15px; margin: 4px 20px 0;}

.goTop {display: block; width: 50px; height: 50px; position: absolute; right: 50px; bottom: 20px; z-index: 3; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); transition: all 0.3s;}
.goTop p.img:hover i {transform: translateY(-5px); transition: all 0.3s;color: #fff; }
.goTop:hover{background: #FF669B;transition: all 0.3s; }
.goTop p.img {width: 100%; height: 100%; position: absolute; font-weight: normal; display: flex; justify-content: center; align-items: center; }
.goTop p.img i {display: block; font-size: 24px; transition: all 0.3s; color: #FF669B;}




/* 반응형 */
@media screen and (max-width: 1400px) {
.company .title {font-size: 50px; }
.company .intro li {width: 30%;}
.company .intro span.sub {font-size: 21px;}
.company .intro p {font-size: 15px;}

.info .title {text-align: center; line-height: 1.5; margin: 100px;}
.info .title span {font-size: 25px; color: #F297B3;}
.info .title p {font-size: 15px;}

.info .partners .marquee-wrap .track .logo img {height: 130px; width: auto;}

.timeline .title {font-size: 35px;}
.timeline .inner .timeline-wrap .timeline-events h3.text {margin-bottom: 20px;}
.timeline .inner .timeline-wrap .timeline-events p.text {margin-bottom: 20px;}

footer .inner{width: 90%;}
footer{height:70vh;}
footer .inner .top img {width: 463px; height: 98px;}
footer .inner .top{padding-top: 50px;}
footer .inner .contact{margin-top: 190px;}
footer .inner .bottom{justify-content: center; float:none;}
footer .inner .bottom ul li span{font-size: 13px; }
footer .inner .bottom .list{bottom: 5%;}
.li-separator{margin: 2px 20px 0;}
}


@media screen and (max-width: 1300px) {
.timeline {margin: 150px 0;}
.timeline .inner .timeline-wrap .timeline-events h3 {font-size: 17px;}
.timeline .inner .timeline-wrap .timeline-events h3.text {margin-bottom: 18px;} 
.timeline .inner .timeline-wrap .timeline-events p {font-size: 14px;}
.timeline .inner .timeline-wrap .timeline-events p.text {margin-bottom: 18px;}
}


@media screen and (max-width: 1024px) {
.company .inner {width: 93%;}
.company .title {font-size: 40px; margin-bottom: 0;}
.company .intro { margin: 10px 0 50px 0;}
.company .intro span.sub {font-size: 20px;}
.company .intro p {font-size: 14px;}

.info .inner {width: 95%;}

.map {height: 300px;}
.map .inner .title {font-size: 23px; }
.map .inner .text {font-size: 14px; }

footer{height: 60vh;}
  footer .inner .top{padding-top: 50px;}
  footer .inner .top img{width:380px; height: 80px;}
  footer .inner .contact {margin-top: 200px; }
  footer .inner .contact li{ margin-bottom: 12px; }
  footer .inner .bottom ul{height: 50px; }
  footer .inner .bottom ul li:nth-child(11){margin-right: 50px;}
  footer .inner .bottom .list{display: none;}
}


@media screen and (max-width: 768px) {
.company .intro {display: none;}
.company .title {margin-bottom: 20px;}
.company img {position: relative; filter: brightness(50%);}
.company .mob {display: flex; justify-content: space-between; width: 90%;  margin: 30px 0; position: absolute; top: 28%; left: 50%; transform: translate(-50%, -28%);  z-index: 100;}
.company .mob li {width: 35%; text-align: center; }
.company .mob li span {font-size: 2.8vw; }
.company .inner img {animation: none;}

@keyframes slideup {
    0% {transform: translateY(30px); opacity: 0;}
    30% {transform: translateY(30px); opacity: 0;}
}
.company .mob li:nth-child(1) {animation-name: slideup; animation-duration: 1s;}
.company .mob li:nth-child(2) {animation-name: slideup; animation-duration: 1.3s;}
.company .mob li:nth-child(3) {animation-name: slideup; animation-duration: 1.6s;}
.timeline .title  {animation-name: slideup; animation-duration: 2s;}


.timeline {margin-top: 110px;}
.timeline .title {font-size: 25px;}

.timeline .inner .timeline-wrap .timeline-events .event {margin: 100px 0;}
.timeline .inner .timeline-wrap .timeline-events .year {font-size: 18px;}
.timeline .inner .timeline-wrap .timeline-events .dot {width: 11px; height: 11px; }
.timeline .inner .timeline-wrap .timeline-events h3 {font-size: 16px; color: #fff; } 
.timeline .inner .timeline-wrap .timeline-events h3.text2 {margin-bottom: 25px;} 
.timeline .inner .timeline-wrap .timeline-events p {display: none;}
.timeline .event .content-right h3 {line-height: 1.5;} 

.timeline .inner .timeline-wrap .timeline-events .content-left,
.timeline .inner .timeline-wrap .timeline-events .content-right {border-radius: 12px; width: 33%; position: relative; z-index: 1; box-shadow: 0 8px 20px rgba(0,0,0,0.4); opacity: 0; transform: translateY(100px); transition: all 0.8s ease; }

.info .title { margin: 50px; }
.info .partners .marquee-wrap .track .logo img {height: 100px; width: auto;}
.info .goods {margin: 150px 0;}
.info .goods .imgbox .top {gap: 15px;  margin-bottom: 15px;} 
.info .goods .imgbox .bottom {gap: 15px; }
.info .goods .img-wrap {width: 30%; border-radius: 20px;}

.info .labels {margin-bottom: 150px;}
.info .labels .box { gap: 20px;}
.info .labels .box img {width: 30%; border-radius: 10px;}

.map {height: 200px; }
.map-wrap iframe {border-radius: 20px;}

footer{height: 50vh; margin: 0 auto; width: 100%;}
footer .inner .top{flex-direction: column; padding-top: 50px;}
footer .inner .top img{width: 270px; height: 58px;}
footer .inner .contact{height: 108px; margin-top: 100px;}
footer .inner .bottom{margin-top: 33px; float: right;}
}



@media screen and (max-width: 500px) {
.company .title {font-size: 25px; }
.company .mob li {width: 35%; text-align: center; }
.company .mob {width: 90%; position: absolute; top: 20%; left: 50%; transform: translate(-50%, -20%); }
.company .mob li span {font-size: 15px; }

.timeline {margin-top: 70px;}
.timeline .title {font-size: 20px;}
.timeline .inner .timeline-wrap .timeline-events .event {margin: 70px 0;}
.timeline .inner .timeline-wrap .timeline-events .year {font-size: 16px;}
.timeline .inner .timeline-wrap .timeline-events .dot {width: 10px; height: 10px; }
.timeline .inner .timeline-wrap .line {width: 2px;}
.timeline .inner .timeline-wrap .timeline-events h3 {font-size: 13px;} 
.timeline .inner .timeline-wrap .timeline-events h3.text2 {margin-bottom: 20px;} 

.timeline .inner .timeline-wrap .timeline-events .content-left,
.timeline .inner .timeline-wrap .timeline-events .content-right {padding: 10px 10px; width: 30%; position: relative; z-index: 1; box-shadow: 0 8px 20px rgba(0,0,0,0.4); opacity: 0; transform: translateY(100px); transition: all 0.8s ease;}


.info .title {line-height: 1.2; margin: 50px; text-align: center;}
.info .title span {font-size: 19px;}
.info .title p {display: none;}
.info .title p.mob {display: block; font-size: 13px; margin-top: 8px; color: #fff; }

.info .partners .marquee-wrap .track .logo img {height: 70px; width: auto;}
.info .goods .img-wrap { border-radius: 12px;}
.info .labels .box { gap: 20px;}
.info .labels .box img {width: 30%; }

.map {height: 100px; }
.map-wrap iframe {border-radius: 10px;}
.map .inner .title {font-size: 20px; margin-bottom: 20px; }
.map .inner .text {font-size: 12px; line-height: 1.7; margin-top: 20px;}

footer .inner .contact {position: absolute; top: 22%;}
footer .inner .contact li{margin-bottom: 8px;}
footer .inner .contact li span{margin-right: 85px;}
footer .inner .contact li:nth-child(3) span{ margin-right: 97px;}
footer .inner .bottom ul li span{position: absolute; left: 5%; bottom: 6%; }
}