/* cursor */
body { cursor: none; }
.cursor { width: 50px; height: 50px; background: #8954ff80; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transition: transform 0.2s ease; }
.cursor-follower { width: 8px; height: 8px; background: #8954ff; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transition: transform 0.1s ease; }
a:hover ~ .cursor { transform: scale(1.5); }
body::before { content: ""; display: block; background: no-repeat center; background-size: cover; width: 100%; height: 1500px; position: absolute; top: 0; z-index: -5; }
body::after { content: ""; display: block; background: no-repeat center center/cover; background-size: cover; width: 100%; height: 1500px; position: absolute; top: 2500px; z-index: -5; }
.wrap { overflow: hidden; width: 100%; height: 100%; }

/* header */
header .top { display: flex; align-items: center; position: fixed; z-index: 10; background: #ffffffb3; width: 100%; height: 4vw; }
header h1 { width: 10vw; height: 4vw; margin-left: 8vw; position: relative; }
header h1 > a { width: 100%; height: 100%; display: block; text-indent: -999999px; }
header h1 > a svg { display: block; position: absolute; top: 0; }
header nav { position: absolute; right: 8vw; }
header nav ul { display: flex; }
header nav ul > li > a { padding: 0 2vw; font-size: 1.2vw; }

/* Marquee Styles */
.marquee-section { width: 100%; padding: 3rem 0; background: #f8f9fa; overflow: hidden; }
.marquee { width: 100%; display: flex; overflow: hidden; white-space: nowrap; gap: 2rem; margin-bottom: 1rem; }
.marquee-content { display: flex; gap: 2rem; }
.marquee-content span { font-family: "Freesentation",sans-serif; font-size: clamp(5rem, 10vw, 15rem); font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: 0.05em; }
.marquee:nth-child(odd) .marquee-content span { color: #000; }
.marquee:nth-child(even) .marquee-content span { color: #000; }
.marquee:nth-child(3) .marquee-content span { color: #000; }

/* section home */
main { padding-top: 4vw; }
.section.home { margin-top: 3vw; margin-bottom: 8vw; }
.section.home .text { width: 100%; text-align: center; }
.section.home .text .title_rol { width: 100%; height: 3vw; position: relative; overflow: hidden; }
.section.home .text .title_rol .rol { width: 100%; height: 3vw; font-size: 2vw; font-weight: 700; color: var(--primary); position: absolute; opacity: 0; transform: translateX(100%); transition: transform 0.5s ease,opacity 0.5s ease; white-space: nowrap; }
.section.home .text .title_rol .rol.active { opacity: 1; transform: translateX(0); }

@keyframes slideText {
  0% { opacity: 0; transform: translateX(100%); }
  10%, 90% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-100%); }
}
.section.home .text .h1 { line-height: 6vw; font-family: "popins",sans-serif; font-weight: 800; margin-top: 2vw; height: 6vw; }
.section.home .mainpage { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; margin-top: 3vw; padding: 0 20vw; }

.mainpage .buttons-wrapper { display: flex; flex-direction: column; gap: 1vw; margin-left: 3vw; }

.card { display: flex; align-items: flex-start; margin: 0; transform-style: preserve-3d; }
.card .thumb { display: flex; width: 30vw; height: 30vw; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 30px rgba(214, 212, 212, 0.1); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transform-style: preserve-3d; transition: transform 0.1s ease; }
.card .img { display: block; width: 100%; height: 100%; position: absolute; transform: translateZ(80px); transform-style: preserve-3d; background: no-repeat center center/contain; }

/* section home btn */
.section.home .buttons { display: flex; gap: 2vw; }
.section.home .button { overflow: hidden; position: relative; border-radius: 50vw; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }

.button:hover a, .button_all:hover a { color: #fff; }

.su_button_circle { background: linear-gradient(270deg, #e97cff 20%, #8b6dfa 80%)!important; border-radius: 1000px; position: absolute; left: 0; top: 0; width: 0; height: 0; margin-left: 0; margin-top: 0; pointer-events: none; }
.btn { display: block; background: #fff; font-weight: 500; text-align: center; border-radius: 2rem; transition: 300ms; text-decoration: none; padding: 0.8rem 2rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

.button_text_container { display: block; position: relative; }

.explode-circle { animation: explode 0.5s forwards; }

.desplode-circle { animation: desplode 0.5s forwards; }

@keyframes explode {
  0% { width: 0; height: 0; margin-left: 0; margin-top: 0; background-color: rgba(42, 53, 80, 0.2); }
  100% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; background-color: rgba(20, 180, 87, 0.8); }
}

@keyframes desplode {
  0% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; background-color: rgba(20, 180, 87, 0.8); }
  100% { width: 0; height: 0; margin-left: 0; margin-top: 0; background-color: rgba(129, 80, 108, 0.6); }
}

/* section about*/
.section.about { margin-top: 4vw; margin-bottom: 15vw; }
.section.about .inner { display: flex; justify-content: space-around; align-items: center; }
.section.about .inner .photo { width: 40vw; height: 46vw; background: url(../imges/1-1.jpg) center/30vw no-repeat; }
.section.about .inner .text { display: flex; flex-direction: column; gap: 3vw; font-size: 1.2vw; }
.section.about .inner .text .t_text h3 { color: var(--primary); }

.section.about p.h3 { margin-top: 3vw; }

/* section Education  */
.section.education { margin-bottom: 15vw; color: #000; }
.section.education h2 { padding-bottom: 2vw; }
.section.education .edu_box { width: 100%; height: 100%; display: flex; justify-content: center; gap: 4vw; }

.edu_box .box { width: 25vw; height: 25vw; padding: 2vw; background: linear-gradient(90deg, #e9d8ff 0, #fafdff 100%); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease,box-shadow 0.3s ease; }

.edu_box .box:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); }

.edu_box .box_L span, .edu_box .box_R span { font-size: 1.2vw; word-break: keep-all; }

.edu_box .box:nth-child(1) { transform: translateX(-150%); }
.edu_box .box:nth-child(2) { transform: translateX(150%); }

/* section projects*/
.section.projects { margin-bottom: 15vw; position: relative; overflow: hidden; }
.section.projects .pro_wrap { display: flex; width: 100%; height: 100%; flex-wrap: wrap; margin-top: 15vw; gap: 3vw; justify-content: flex-start; }
.section.projects .pro_wrap li { overflow: hidden; border: 2px solid var(--gray2); border-radius: 3vw; transform: translateY(240%); }

/* section projects: 2열 3행 */
.section.projects .pro_wrap li:nth-child(1), 
.section.projects .pro_wrap li:nth-child(2), 
.section.projects .pro_wrap li:nth-child(3), 
.section.projects .pro_wrap li:nth-child(4), 
.section.projects .pro_wrap li:nth-child(5),
.section.projects .pro_wrap li:nth-child(6) { 
  flex: 0 0 calc(50% - 1.5vw); 
}

.section.projects .pro_wrap li .img_hover { width: 100%; height: 30vw; overflow: hidden; position: relative; }

.section.projects .pro_wrap li .img_hover img { width: 100%; }
.section.projects .pro_wrap li:nth-child(1) .img_hover { background: url(../imges/bg1.png) no-repeat top center/cover; }
.section.projects .pro_wrap li:nth-child(2) .img_hover { background: url(../imges/bg2.png) no-repeat top center/cover; }
.section.projects .pro_wrap li:nth-child(3) .img_hover { background: url(../imges/bg3.png) no-repeat top center/cover; }
.section.projects .pro_wrap li:nth-child(4) .img_hover { background: url(../imges/bg4.png) no-repeat top center/cover; }
.section.projects .pro_wrap li:nth-child(5) .img_hover { background: url(../imges/bg5.png) no-repeat top center/cover; }
.section.projects .pro_wrap li:nth-child(6) .img_hover { background: url(../imges/bg6.jpg) no-repeat top center/cover; }

.section.projects li iframe { display: block; width: 40vw; height: 30vw; }

/* img 속도 조절 */
.section.projects .pro_wrap li:hover .img_hover { transition: 8s; background-position: bottom; }
.section.projects .pro_wrap li:nth-child(4):hover .img_hover { transition: 0s; background-position: center; }

.section.projects .pro_wrap li .img_hover .bg { background-color: #0000ff66; position: absolute; bottom: -39.9vw; width: 39.9vw; height: 39.9vw; border-radius: 3vw 3vw 0 0; transition: 0.5s; filter: invert(100%); }
.section.projects .pro_wrap li:hover .img_hover .bg { bottom: 0; }
.section.projects .buttons, .section.projects .img_hover .buttons { height: 100%; display: flex; gap: 2vw; justify-content: center; align-items: center; }
.section.projects .img_hover .button { overflow: hidden; position: relative; border-radius: 50vw; }
.section.projects .img_hover .button .btn { background-color: #fff; border: none; }
.section.projects .button:nth-child(1) { transform: translateX(-300%); opacity: 0; transition: 0.5s; z-index: -1; }
.section.projects .button:nth-child(2) { transform: translateX(300%); opacity: 0; transition: 0.5s; z-index: -1; }
.section.projects .button:nth-child(3) { transform: translateX(300%); opacity: 0; transition: 0.5s; z-index: -1; }

.section.projects .text_rol .text_loop .gray { right: 1vw; }

.section.projects .pro_wrap li:hover .img_hover .button:nth-child(1) { transform: translateX(0); opacity: 1; z-index: 0; }
.section.projects .pro_wrap li:hover .img_hover .button:nth-child(2) { transform: translateX(0); opacity: 1; z-index: 0; }
.section.projects .pro_wrap li:hover .img_hover .button:nth-child(3) { transform: translateX(0); opacity: 1; z-index: 0; }
.section.projects .pro_wrap li .text { padding: 1vw 3vw 1.5vw; width: 100%; background-color: #fff; }
.section.projects .pro_wrap li .text p { line-height: 2vw; font-size: 1.2vw; }
.section.projects .pro_wrap li .text p span { display: inline-block; width: 6vw; }
.section.projects .inner > .buttons { margin-top: 6vw; }

.section.projects .button_all { overflow: hidden; position: relative; border-radius: 50vw; display: none; }

/* section artboard  */
.section.artboard { margin-bottom: 15vw; position: relative; }
.section.artboard .inner { width: 100%; }
.section.artboard h2 { text-align: center; margin-bottom: 3vw; }

/* artboard 버튼 */
.artboard-buttons { display: flex; justify-content: center; gap: 2vw;}
.artboard-btn { border-radius: 5rem; padding: 9vw 8vw; font-size: 1.5vw; font-weight: 700; cursor: pointer; transition: all 0.3s ease; }
.artboard-btn:hover { transform: translateY(-3px);}

/* Banner Popup */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-container {
  position: relative;
  width: 90vw;
  height: 90vh;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.popup-container iframe {
  width: 100%;
  height: 100%;
}

.popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #333;
}

.popup-close:hover {
  background: #fff;
  transform: scale(1.1);
  color: #e97cff;
}

/* section tool  */
.section.tool { padding-bottom: 3vw; }
.section.tool h2 { margin-bottom: 3vw; }
.section.tool ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3vw; width: 100%;}
.tool_bar { background: #fbe6ff; justify-content: flex-start; border-radius: 100px; align-items: center; position: relative; display: flex; height: 5vw; width: 100%; }
.tool_bar p { position: absolute; left: 2vw; font-weight: 700; color: #fff; z-index: 1;}
.tool_bar span { color: #fff; font-weight: 700; position: absolute; right: 3vw; z-index: 1;}
.tool_bar .bar { border-radius: 100px; background: linear-gradient(270deg, #e97cff 0%, #8b6dfa 100%); height: 5vw; width: 0; transition: width 1s ease;}


/* footer */
footer { margin-top: 5vw; padding: 5vw 0; }
footer .con_wrap { display: flex; justify-content: space-between; margin-bottom: 5vw; }
footer .con_wrap .email_b a { display: flex; justify-content: space-between; align-items: center; width: 40vw; padding: 1vw 1vw; background: var(--primary); border-radius: 100px; color: #fff; }
footer .con_wrap .email_b:hover a { width: 50vw; background: linear-gradient(270deg, #7954ff 0, #6611c7 49.48%, #e97cff 100%); transition: all 0.5s; }
footer .con_wrap .email_b:hover a i { transform: rotate(-30deg); transition: all 0.5s; }
footer .con_wrap .email_b a p { text-indent: 2vw; }
footer .con_wrap .email_b a p { text-indent: 2vw; }
footer .con_wrap .phone { display: flex; align-items: center; gap: 3vw; font-size: 2vw; }
footer .con_wrap .phone span i { padding-right: 1vw; }

@media screen and (max-width: 1440px) {
  .section.projects .pro_wrap li:nth-child(1),
  .section.projects .pro_wrap li:nth-child(2),
  .section.projects .pro_wrap li:nth-child(3),
  .section.projects .pro_wrap li:nth-child(4),
  .section.projects .pro_wrap li:nth-child(5),
  .section.projects .pro_wrap li:nth-child(6) { 
    flex: 0 0 calc(50% - 1.5vw); 
  }
}
@media screen and (max-width: 1180px) {
  .section.projects .pro_wrap li:nth-child(1),
  .section.projects .pro_wrap li:nth-child(2),
  .section.projects .pro_wrap li:nth-child(3),
  .section.projects .pro_wrap li:nth-child(4),
  .section.projects .pro_wrap li:nth-child(5),
  .section.projects .pro_wrap li:nth-child(6) { 
    flex: 0 0 calc(50% - 1.5vw); 
  }
}
@media screen and (max-width: 886px) {
  body::before { width: 100%; height: 1000px; top: 0; }
  body::after { width: 100%; height: 1000px; top: 1600px; }
  .section.projects .pro_wrap li:nth-child(1),
  .section.projects .pro_wrap li:nth-child(2),
  .section.projects .pro_wrap li:nth-child(3),
  .section.projects .pro_wrap li:nth-child(4),
  .section.projects .pro_wrap li:nth-child(5),
  .section.projects .pro_wrap li:nth-child(6) { 
    flex: 0 0 calc(50% - 1.5vw); 
  }
}
@media screen and (max-width: 776px) {
  .section.projects .pro_wrap li:nth-child(1),
  .section.projects .pro_wrap li:nth-child(2),
  .section.projects .pro_wrap li:nth-child(3),
  .section.projects .pro_wrap li:nth-child(4),
  .section.projects .pro_wrap li:nth-child(5),
  .section.projects .pro_wrap li:nth-child(6) { 
    flex: 0 0 calc(50% - 1.5vw); 
  }
}
@media screen and (max-width: 690px) {
  body::before { width: 100%; height: 800px; top: 0; }
  body::after { width: 100%; height: 800px; top: 1600px; }
  header .top { display: none; }
  .section.home .text .title_rol { font-size: 4vw; }
  .section.home .text .title_rol.about { margin-top: 26vw; }
  .section.home .text .h1 { font-size: 9vw; }
  .section.home .mainpage { margin-top: 5vw; width: 100%; }
  .section.home .mainpage .card { flex-direction: column; gap: 30px; }
  .section.home .mainpage .card .thumb { width: 60vw; height: 80vw; }
  .section.home .mainpage .buttons-wrapper { width: 100%; align-items: center; }
  .section.about .inner { flex-direction: column; }
  .section.about .inner .text { font-size: 3vw; flex-wrap: wrap; justify-content: space-between; }
  .section.about .inner .text h3 { font-size: 3vw; color: var(--primary); }
  .section.about .inner .text .t_text { text-align: center; width: 100%; display: flex; justify-content: center; align-items: center; gap: 5vw; margin-top: 3vw; border: 2px solid var(--gray2); border-radius: 3vw; padding: 2vw 3vw; }
  .section.about .inner .text .t_text h3 { font-size: 3vw; }
  .section.about .inner .text .b_text, .section.about .inner .text .m_text { padding: 0 3vw; }
  .section.education .edu_box { flex-wrap: wrap; gap: 6vw; }
  .edu_box .box { width: 40vw; height: 40vw; padding: 4vw; }
  .edu_box .box_L h3, .edu_box .box_R h3 { font-size: 3vw; }
  .edu_box .box_L span, .edu_box .box_R span { font-size: 2.5vw; }
  .section.projects .pro_wrap li { flex: 0 0 100%; border-radius: 4vw; }
  .section.projects .pro_wrap li .text { padding: 3vw; }
  .section.projects .pro_wrap li .text h4 { font-size: 2vw; }
  .section.projects .pro_wrap li .text p { font-size: 2vw; line-height: 3vw; }
  .section.projects .pro_wrap li .text p span { width: 10vw; }
}