@import url("common.css");


/* 인트로 */
#intro{position:fixed; left: 0; top:0; width:100%; height:100vh; background:var(--white); overflow:hidden; z-index: 9999999999999999;}

#intro section{cursor:default; width: 100%; height: 100%; position: relative; background:var(--white); z-index: 9;}
#intro section.step01{display: flex; flex-direction: column; justify-content: center;}
#intro section.step01::before{content:''; display: block; width: 100%; height: 100%; background:var(--main); position: absolute; left:0; top:0; clip-path: inset(0 100% 0 0); animation:wipe-clip 2s 2.5s ease-out forwards;}
#intro section.step01 ul{max-width:1450px; width: 90%; margin: 0 auto; position: relative;}
#intro section.step01 ul li{display: flex; align-items:center; justify-content:space-between; width: 100%; line-height: 110%; position: relative;}
#intro section.step01 ul li h2{font-size:130px; font-weight: 600; color:var(--black); font-family:var(--eng); line-height:110%;}
#intro section.step01 ul li h3{font-size:24px; font-weight: 300; color:var(--black); line-height: 110%; letter-spacing: var(--letter-spacing-heading);}
#intro section.step01 ul li::after{content:''; display:block; width:100%; height:100%; background:var(--white); position: absolute; right:0; top:0; z-index: 5;}
#intro section.step01 ul li.one::after{animation:width 1s linear forwards;}
#intro section.step01 ul li.two::after{animation:width 1s 0.5s linear forwards;}
/* #intro section.step01 ul li.three::after{animation:width 1s 1.5s ease-in forwards;} */
#intro section.step01 ul li.three::after{animation:width 1s 1s ease-in forwards;}
#intro section.step01 ul li.four{position: absolute; right: 0; top:20px; justify-content: flex-end;}
#intro section.step01 ul li.four::after{display: none;}
#intro section.step01 ul li.four h3{opacity: 0; transform:translateX(-100px);}
/* #intro section.step01 ul li.four h3{animation:txt 0.5s 2.5s ease-out forwards;} */
#intro section.step01 ul li.four h3{animation:txt 0.5s 2s ease-out forwards;}

#intro section.step02{width: 100%; height: 100%; position: absolute; left:0; top:0; z-index: 5;}
#intro section.step02 .video_intro{position: relative; width: 100%; height: 100%; pointer-events: none;}
#intro section.step02 .video_intro .jarallax{position: relative; width: 100%; height:100%;}
#intro section.step02 .video_intro .jarallax iframe{position: absolute;}
#intro section.step02 .video_intro .vimeo-player{width: 100vw;
  height: 56.25vw;      /* 16:9 비율 (9 / 16 * 100 = 56.25vw) 가로로 넓은 화면 대응 */
  min-height: 100vh;    
  min-width: 177.77vh;  /* 16:9 비율 (16 / 9 * 100 = 177.77vh) 세로로 긴 화면 대응 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}



#cursor {position:absolute; width:80px; height:80px; line-height:80px; border-radius:50%; text-align:center; font-family:var(--eng); color:var(--white);  font-weight: 600;font-size:14px; box-sizing:border-box; background: rgba(243, 109, 7, 0.70); border:1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(20px); transform:translate(-50%,-50%); animation: 1s linear infinite cursor_animate; transition:all 0.1s linear; pointer-events: none; z-index:9999999999999999999999 !important; pointer-events: none;}


@keyframes wipe-clip {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  45% {
    /* 45% 지점: 꽉 참 (여기서부터 멈춤 시작) */
    clip-path: inset(0 0 0 0);
  }
  55% {
    /* 55% 지점: 여전히 꽉 참 (여기까지 멈춤) 
       -> 45% ~ 55% 사이에는 변화가 없으므로 정지한 것처럼 보임 */
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes width {
	from { width: 100%; }
	to { width: 0; }
}
@keyframes txt {
	from { transform:translateX(-100px); opacity: 0; }
	to { transform:translateX(0); opacity: 1; }
}



/*** css 공통 ***/
.section{position: relative; overflow: hidden; width: 100%; height: 100vh;}
.section_bg{position: absolute; left:0; top:0; z-index: 0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
.section.action .section_bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}

body{overflow: hidden;}


.header{opacity: 0;}
body.eff .header{animation:opacity 1s 1.4s linear forwards;}

@keyframes opacity {
	from { opacity:0;}
	to { opacity:1;}
}

/* 메인비주얼 */
#visual{position: relative; width: 100%; height: var(--vh) !important; background:var(--white); overflow: hidden; box-sizing:border-box; /* padding: 78px 40px 40px; */ transform:translateY(100%);}
body.eff #visual{animation:visual_eff 1s 0.2s ease-out forwards;}

#visual .w_line{display: block; background:var(--white); position: absolute; z-index: 9;}
#visual .w_line.top{width: 100%; height: 0; left: 0; top:0;}
#visual .w_line.bottom{width: 100%; height: 0; left: 0; bottom: 0;}
#visual .w_line.left{width: 0; height: 100%; left: 0; top:0;}
#visual .w_line.right{width: 0; height: 100%; right: 0; top:0;}

body.eff #visual .w_line.top{animation:w_line1 0.5s 1s linear forwards;}
body.eff #visual .w_line.bottom{animation:w_line2 0.5s 1s linear forwards;}
body.eff #visual .w_line.left{animation:w_line3 0.5s 1s linear forwards;}
body.eff #visual .w_line.right{animation:w_line3 0.5s 1s linear forwards;}

@keyframes w_line1 {
	from { height: 0;}
	to { height: 78px;}
} 
@keyframes w_line2 {
	from { height: 0;}
	to { height: 40px;}
}
@keyframes w_line3 {
	from { width: 0;}
	to { width: 40px;}
}

#visual .visual_swiper{position: relative; width: 100%; height: 100%; overflow: hidden;}
#visual .visual_swiper .swiper-wrapper{}
#visual .visual_swiper .swiper-slide{height:100%; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden}
#visual .visual_swiper .swiper-slide .v_bg{position: absolute; left:0; top:0; width: 100%; height: 100%;}
#visual .visual_swiper .swiper-slide .v_bg .bg{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center;}
#visual .visual_swiper .swiper-slide .v_bg .bg.mo{display: none; z-index: 2;}
#visual .visual_swiper .swiper-slide .v_txt{position: absolute; left:0; bottom: 0; padding: 80px; box-sizing:border-box; width: 100%; z-index: 99; transform:translateY(100px); opacity:0;}
body.eff #visual .visual_swiper .swiper-slide .v_txt{animation:visual_eff3 0.5s 1.5s linear forwards;}
#visual .visual_swiper .swiper-slide .v_txt ul{display: flex; gap:5px; flex-wrap:wrap; padding: 0 0 10px;}
#visual .visual_swiper .swiper-slide .v_txt ul li{}
#visual .visual_swiper .swiper-slide .v_txt ul li a{display: block; font-size:0.778rem; font-weight: 600; color:var(--white); letter-spacing: 0; line-height: 130%; white-space: nowrap; box-sizing:border-box; padding: 8px 20px; border:1px solid var(--white); border-radius: 50px;}
#visual .visual_swiper .swiper-slide .v_txt .fs40{color:var(--white);}
#visual .visual_swiper .swiper-slide .v_txt .fs18{color:var(--white); margin: 6px 0 0;}
 
#visual .v_arrow{display: flex; gap:0 10px; align-items:center; position: absolute; right: 80px; bottom: 80px; z-index: 99; transform:translateY(100px); opacity:0;}
body.eff #visual .v_arrow{animation:visual_eff3 0.5s 1.5s linear forwards;}
#visual .v_arrow .visual_arrow{width:38px; height: 38px; cursor:pointer; position: relative; color:var(--white); transition:all .3s;}
#visual .v_arrow .visual_arrow:hover{color:var(--main);}
#visual .v_arrow .visual_arrow::after{display: block; width: 100%; height: 100%; font-size:38px; line-height:38px; font-family:var(--icon); position: absolute; left:0; top:0; color:inherit;}
#visual .v_arrow .visual_arrow_prev::after{content:'\e5cb';}
#visual .v_arrow .visual_arrow_next::after{content:'\e5cc';}
 
#visual .scroll_down{display: inline-block; position: absolute; left: 80px; bottom: 0; line-height: 40px; font-size:12px; font-weight: 700; font-family:var(--eng); color:var(--light); box-sizing:border-box; padding-left: 20px; transition:all .3s; z-index: 999; transform:translateY(100px); opacity:0;}
body.eff #visual .scroll_down{animation:visual_eff3 0.5s 1.5s linear forwards;}
#visual .scroll_down:hover{color:var(--black);}
#visual .scroll_down::before{content:''; display: block; width: 1px; height: 40px; background:var(--border); position: absolute; left: 1px; top:0;}
#visual .scroll_down::after{content:''; display: block; width: 3px; height: 13px; background:var(--black); position: absolute; left:0; top:0; animation:scroll_down 2s ease infinite;}



@keyframes visual_eff {
	from { transform:translateY(100%);}
	to { transform:translateY(0); }
}
@keyframes visual_eff2 {
	from {transform:scale(1.1); opacity:0;}
	to {transform:scale(1); opacity:1; }
}
@keyframes visual_eff3 {
	from {transform:translateY(100px); opacity:0;}
	to {transform:translateY(0); opacity:1; }
}

@keyframes scroll_down {
	0,100% { transform:translateY(0); }
	50% { transform:translateY(27px); }
}

/* ABOUT EUNMIN */
#about{display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; background:var(--black);}
#about .about_in{position: relative; z-index: 5; transform:translate(0,100px); opacity: 0;}
#about.action .about_in{animation:ani_effect 1s .6s linear forwards;}
#about .about_in h3{color:var(--white); line-height: 130%; font-weight: 800; letter-spacing: -3.4px;}
#about .about_in p{color:rgba(255,255,255,.8); padding:20px 0 0;}


/* 소개 - TSP */
#solution{display: flex; flex-direction: column; justify-content: center; overflow: hidden; background:var(--black);}
#solution .solution_in{position: relative; z-index: 2;}
#solution .solution_in .txt_area{width: 100%; text-align:center; box-sizing:border-box; padding: 0 0 50px; transform:translate(0,100px); opacity: 0;}
#solution .solution_in .txt_area .fs68{color:var(--white);}
#solution .solution_in .txt_area .fs18{color:rgba(255,255,255,.8); padding:18px 0 0;}
#solution .solution_in .con_area{max-width:1530px; margin: 0 auto;}
#solution .solution_list{display: grid; grid-template-columns: repeat(5, 1fr);}
#solution .solution_list li{padding: 10px; min-height:306px; box-sizing:border-box; border:1px solid #666; margin-left: -1px; overflow: hidden;}

#solution .solution_list li:nth-child(1){transform:translate(0,0); opacity: 0;}
#solution .solution_list li:nth-child(2){transform:translate(-100%,0); opacity: 0;}
#solution .solution_list li:nth-child(3){transform:translate(-100%,0); opacity: 0;}
#solution .solution_list li:nth-child(4){transform:translate(-100%,0); opacity: 0;}
#solution .solution_list li:nth-child(5){transform:translate(-100%,0); opacity: 0;}

#solution.action .solution_list li:nth-child(1){animation:one 0.5s 1s linear forwards;}
#solution.action .solution_list li:nth-child(2){animation:two 0.5s 1.5s linear forwards;}
#solution.action .solution_list li:nth-child(3){animation:two 0.5s 2s linear forwards;}
#solution.action .solution_list li:nth-child(4){animation:two 0.5s 2.5s linear forwards;}
#solution.action .solution_list li:nth-child(5){animation:two 0.5s 3s linear forwards;}

#solution.action .solution_in .txt_area{animation:ani_effect 1s .6s linear forwards;}


@keyframes txt_area {
	0 { transform:translateX(50%); opacity: 0; }
	100% { transform:translateX(0); opacity: 1; }
}
@keyframes one {
	0 { transform:translate(0,0); opacity: 0; }
	100% { transform:translate(0,0); opacity: 1; }
}
@keyframes two {
	0 { transform:translate(-100%,0); opacity: 0; }
	100% { transform:translate(0,0); opacity: 1; }
}


#solution .solution_list li{}
#solution .solution_list li a{display: block; width: 100%; height: 100%; padding: 25px; box-sizing:border-box; position: relative;}
#solution .solution_list li a dl{display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; position: relative; z-index: 5;}
#solution .solution_list li a dl dt{display: flex; align-items:center; justify-content: space-between;}
#solution .solution_list li a dl dt .num{display: block; font-size:14px; font-weight: 600; color:var(--main); font-family:var(--eng); letter-spacing: 0; line-height: 120%; transition:all .3s linear;}
#solution .solution_list li a:hover dl dt .num{color:var(--white);}
#solution .solution_list li a dl dt .eng_tit{display: block; font-size:14px; font-weight: 600; color:rgba(255,255,255,.4); font-family:var(--eng); letter-spacing: 0; line-height: 120%; opacity: 1; transition:all .3s;}
#solution .solution_list li a:hover dl dt .eng_tit{opacity: 0; transition:all .3s .1s linear;}
#solution .solution_list li a dl dd{transition:all .3s linear; transform:translateY(60px);}
#solution .solution_list li a:hover dl dd{transform:translateY(0);}
#solution .solution_list li a dl dd .fs24{color:var(--white); font-weight: 600;}
#solution .solution_list li a dl dd .fs16{color:rgba(255,255,255,.8); padding: 8px 0 0; opacity: 0; transition:all .3s;}
#solution .solution_list li a:hover dl dd .fs16{opacity: 1; transition:all .3s .1s linear;}
#solution .solution_list li a dl dd .fs16 br{display: block;}
#solution .solution_list li a .icon{position: absolute; left:0; top:0; width: 100%; height: 100%; overflow: hidden; background:var(--main); padding: 25px; box-sizing:border-box; display: flex; flex-direction: row; justify-content: flex-end; transform: scaleY(0); transform-origin:center bottom; transition:all .3s linear;}
#solution .solution_list li a:hover .icon{transform: scaleY(100%);}
#solution .solution_list li a .icon img{width: auto; height: 68px;}




/* PROJECTS */
#projects{background:var(--black); display: flex; flex-direction: column; justify-content: center;}
#projects .projects_in{position: relative; transform:translate(0,100px); opacity: 0;}
#projects.action .projects_in{animation:ani_effect 1s .6s linear forwards;}
#projects .tit_area{position: absolute; left:0; top:0;}
#projects .tit_area .fs68{color:var(--white);} 
#projects .projects_swiper{}
#projects .projects_swiper .slide_arrow{padding: 0; background:none; border:0; font-size:0; display: block; cursor:pointer; width: 38px; aspect-ratio:1/1; position: absolute; top:50%; margin-top: -19px; z-index: 999;}
#projects .projects_swiper .slide_prev{left: 20px;}
#projects .projects_swiper .slide_next{right: 20px;}
#projects .projects_swiper .slide_arrow::after{ display:block; width:100%; height: 100%; position: absolute; left: 0; top:0; font-size:38px; line-height: 38px; text-align:center; color:var(--white); font-family:var(--icon); transition:all .3s linear;}
#projects .projects_swiper .slide_arrow:hover::after{color:var(--main);}
#projects .projects_swiper .slide_prev::after{content:'\e5cb';}
#projects .projects_swiper .slide_next::after{content:'\e5cc';}
#projects .projects_swiper .swiper-wrapper{width: calc(100% + 30px);}
#projects .projects_swiper .swiper-slide{width: 50%; box-sizing:border-box;}
#projects .projects_swiper .swiper-slide:nth-child(odd){margin-top:100px;}
#projects .projects_swiper .swiper-slide a{display: block; margin-right: 30px;}
#projects .projects_swiper .swiper-slide a .thumb{aspect-ratio:3/1.5; overflow: hidden;}
#projects .projects_swiper .swiper-slide a .thumb img{display: block; width: 100%; height: 100%; object-fit:cover; transition:all .3s linear;}
#projects .projects_swiper .swiper-slide a:hover .thumb img{transform:scale(1.1); transition:all .3s linear;}
#projects .projects_swiper .swiper-slide a .desc{padding: 15px 40px 0 0; box-sizing:border-box; position: relative;}
#projects .projects_swiper .swiper-slide a .desc::after{content:'\f8ce'; display: block; width: 20px; height: 20px; line-height: 20px; font-size:20px; font-family:var(--icon); position: absolute; right: 0; top:30px; font-weight: 400; color:var(--white); text-align:center; opacity: 0; transform:translate(-100%, 100%); transition:all .3s linear;}
#projects .projects_swiper .swiper-slide a:hover .desc::after{opacity: 1; transform:translate(0,0); transition:all .3s linear;}
#projects .projects_swiper .swiper-slide a .desc .category{margin: 0 0 5px; font-size:0.778rem; font-weight: 600; color:var(--main); letter-spacing: 0; line-height: 120%; font-family:var(--eng); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#projects .projects_swiper .swiper-slide a .desc .fs18{color:var(--white); font-weight: 400; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#projects .cate_area{overflow: hidden; margin: 40px auto 0;}
#projects .cate_area .cate_swiper{display: flex; justify-content: center;}
#projects .cate_area .swiper-wrapper{display: block; white-space: nowrap; font-size:0; width: auto; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); text-align:center;}
#projects .cate_area .swiper-slide{width: auto; display: inline-block; vertical-align: top;}
#projects .cate_area .swiper-slide a{display: block; margin-right: 50px; line-height: 68px; font-size:1rem; letter-spacing: 0; font-family:var(--eng); color:var(--white); transition:all .3s;}
#projects .cate_area .swiper-slide:last-child a{margin-right: 0;}
#projects .cate_area .swiper-slide a:hover{color:var(--main); transition:all .3s linear;}
#projects .cate_area .swiper-slide a::after{content:'\f8ce'; display: inline-block; vertical-align: middle; width: 20px; height: 20px; line-height: 20px; font-size:20px; margin: -2px 0 0 10px; font-weight: 400; font-family:var(--icon); color:inherit; transition:all .3s;}
#projects .cate_area .swiper-slide a:hover::after{transform:rotate(45deg); transition:all .3s linear;}
#projects .cate_area .swiper-slide a sup{display: inline-block; vertical-align: top; line-height: inherit; font-size:12px; font-family:var(--eng); letter-spacing: 0; font-weight: 400; color:rgba(255,255,255,.4); margin: -5px 0 0 4px; transition:all .3s;}
#projects .cate_area .swiper-slide a:hover sup{color:var(--white); transition:all .3s linear;}
#projects .cate_area .swiper-slide a sup.count_placeholder{visibility:hidden;}
#projects .cate_area .swiper-slide a:hover sup.count_placeholder{visibility:hidden;}



@keyframes ani_effect {
	0 { transform:translate(0,100px);  opacity: 0; }
	100% { transform:translate(0,0);  opacity: 1; }
}




/* CAREER */
#career{display: flex; flex-direction: column; justify-content: center; background:var(--black);}
#career .career_in{position: relative; z-index: 5; display: flex; flex-direction: column; gap:80px; transform:translate(0,100px); opacity: 0; flex-wrap:wrap; max-width:860px;}
#career.action .career_in{animation:ani_effect 1s .6s linear forwards;}
#career .career_in .txt_area{text-align:center;}
#career .career_in .txt_area h4{color:var(--main); font-weight: 600; padding-bottom: 5px;}
#career .career_in .txt_area h4 img{display: inline-block; vertical-align: middle; margin: -2px 0 0 8px; width: 148px; height: auto;}
#career .career_in .txt_area h3{color:var(--white); line-height: 130%; font-weight: 800; letter-spacing: -3.4px;}
#career .career_in .txt_area p{color:rgba(255,255,255,.8); padding: 20px 0 0; text-wrap: balance;}
#career .career_in .btn_area{display: flex; justify-content:space-between; gap:5px;}






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

#projects .cate_area{border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15);}
#projects .cate_area .cate_swiper{display: block;}
#projects .cate_area .swiper-wrapper{border:0;}


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

/* 인트로 */
#intro section.step01 ul{max-width:1110px;}
#intro section.step01 ul li{}
#intro section.step01 ul li h2{font-size:100px;}


}

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











/* 소개 - TSP */
#solution{}
#solution .solution_in .txt_area{padding: 0 0 30px;}
#solution .solution_list li a dl dd .fs16 br{display: none;}




}

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


/* 인트로 */
#intro section.step01 ul{max-width:865px;}
#intro section.step01 ul li{}
#intro section.step01 ul li h2{font-size:78px;}
#intro section.step01 ul li h3{font-size:20px;}
#intro section.step01 ul li.four{top:10px;}




/* 소개 - TSP */
#solution{}
#solution .solution_list{grid-template-columns: repeat(3, 1fr);}
#solution .solution_list li{margin-top: -1px;}
#solution .solution_list li:nth-child(5) {grid-column: 3 / 4; grid-row: 2 / 3;}
#solution .solution_list li a dl dd .fs16 br{display: block;}



/* PROJECTS */
#projects .tit_area{position: relative; left: auto; top:auto; padding: 0 0 40px;} 
#projects .projects_swiper .swiper-slide:nth-child(odd) {margin-top: 0;}
#projects .projects_swiper .slide_prev{left: 10px;}
#projects .projects_swiper .slide_next{right: 10px;}




}

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




/* 인트로 */
#intro section.step01 ul{max-width:600px;}
#intro section.step01 ul li{}
#intro section.step01 ul li h2{font-size:54px;}
#intro section.step01 ul li h3{font-size:16px;}


.section{height: auto;}


/* 메인비주얼 */

@keyframes w_line1 {
	from { height: 0;}
	to { height: 78px;}
} 
@keyframes w_line2 {
	from { height: 0;}
	to { height: 40px;}
}
@keyframes w_line3 {
	from { width: 0;}
	to { width: 30px;}
}

#visual .scroll_down{left: 60px;}
#visual .visual_swiper .swiper-slide .v_txt{padding:60px 60px;}
#visual .v_arrow{bottom: 80px; right: 60px;}




/* ABOUT EUNMIN */
#about{height: 100vh;}
#about .about_in h3{letter-spacing: -2.4px;}
#about .about_in p{padding:15px 0 0;}




/* 소개 - TSP */
#solution{padding: 100px 0;}
#solution .solution_in .txt_area .fs18{padding:10px 0 0;}
#solution .solution_list{}
#solution .solution_list li{padding: 5px; min-height: 200px;}
#solution .solution_list li a{padding: 20px 15px;}
#solution .solution_list li a dl dd .fs16{height: 3.2em;}
#solution .solution_list li a dl dd .fs16 br{display: none;}
#solution .solution_list li a .icon{padding: 20px;}
#solution .solution_list li a .icon img{width: auto; height: 50px;}

#solution.action .solution_in .txt_area{animation:txt_area 0.6s 0.3s linear forwards;}
#solution.action .solution_list li:nth-child(1){animation:one 0.3s 0.3s linear forwards;}
#solution.action .solution_list li:nth-child(2){animation:two 0.3s 0.6s linear forwards;}
#solution.action .solution_list li:nth-child(3){animation:two 0.3s 0.9s linear forwards;}
#solution.action .solution_list li:nth-child(4){animation:two 0.3s 1.2s linear forwards;}
#solution.action .solution_list li:nth-child(5){animation:two 0.3s 1.5s linear forwards;}


/* PROJECTS */
#projects{padding: 100px 0; overflow: hidden;}
#projects .tit_area{padding: 0 0 30px;} 
#projects .projects_swiper .swiper-wrapper{width: calc(100% + 20px);}
#projects .projects_swiper .swiper-slide a{margin-right: 20px;}
#projects .projects_swiper .swiper-slide a .desc{padding: 15px 40px 30px 0;}
#projects .projects_swiper .slide_arrow{width: 30px; margin-top: -15px;}
#projects .projects_swiper .slide_arrow::after{font-size:30px; line-height: 30px;}

#projects .cate_area{margin: 20px auto 0; overflow: visible; border:0; position: relative;}
#projects .cate_area::before{content:''; display: block; width: 200%; height: 1px; background:rgba(255,255,255,.15); position: absolute; left:0; top:0;}
#projects .cate_area::after{content:''; display: block; width: 200%; height: 1px; background:rgba(255,255,255,.15); position: absolute; left:0; bottom:0;}
#projects .cate_area .swiper-wrapper{border:0;}
#projects.action .projects_in{animation:ani_effect 0.6s .3s linear forwards;}




/* CAREER */
#career{height: 100vh;}
#career .career_in{gap:40px; max-width:570px;}
#career.action .career_in{animation:ani_effect 0.6s .3s linear forwards;}
#career .career_in .txt_area h3{letter-spacing: -2.4px;}
#career .career_in .txt_area p{padding: 10px 0 0;}





}

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

/* 인트로 */
#cursor{display: none !important;}

}

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


/* 인트로 */
#intro section.step01 ul{max-width:275px;}
#intro section.step01 ul li{flex-wrap:wrap; margin-top: 5px;}
#intro section.step01 ul li h2{font-size:35px;}
#intro section.step01 ul li h3{font-size:14px;}
#intro section.step01 ul li.four{margin-top:15px; top:auto; right: auto; position: relative;}


#cursor {width:50px; height:50px; line-height:50px; font-size:12px;}




/* 메인비주얼 */
@keyframes w_line1 {
	from { height: 0;}
	to { height: 56px;}
} 
@keyframes w_line2 {
	from { height: 0;}
	to { height: 0;}
}
@keyframes w_line3 {
	from { width: 0;}
	to { width: 20px;}
}

#visual .visual_swiper .swiper-slide .v_bg .bg.mo{display: block;}
#visual .visual_swiper .swiper-slide .v_txt{padding:70px 40px;}
#visual .visual_swiper .swiper-slide .v_txt ul li{}
#visual .visual_swiper .swiper-slide .v_txt ul li a{padding: 6px 20px 4px;}
 
#visual .v_arrow{bottom: 10px; right: 40px;}
#visual .v_arrow .visual_arrow{width:32px; height: 32px;}
#visual .v_arrow .visual_arrow::after{font-size:32px; line-height:32px;}
 
#visual .scroll_down{left: 40px; bottom: 0; color:rgba(255,255,255,.4);}
#visual .scroll_down:hover{color:var(--white);}
#visual .scroll_down::before{background:rgba(255,255,255,.15);}
#visual .scroll_down::after{background:var(--white);}


/* ABOUT EUNMIN */
#about{height: 100vh;}
#about .about_in h3{letter-spacing: -1.4px;}
#about .about_in p{padding:10px 0 0;}




/* 소개 - TSP */
#solution{padding: 60px 0;}
#solution .solution_list{display: block;}
#solution .solution_list li{padding: 0; min-height:auto; margin: -1px 0 0;}
#solution .solution_list li a{padding: 15px;}
#solution .solution_list li a dl{}
#solution .solution_list li a dl dt{padding: 0 0 30px;}
#solution .solution_list li a dl dt .num{font-size:13px;}
#solution .solution_list li a dl dt .eng_tit{font-size:13px;}
#solution .solution_list li a dl dd{transform:translateY(30px);}
#solution .solution_list li a dl dd .fs16{height: auto;}
#solution .solution_list li a .icon{padding: 15px;}
#solution .solution_list li a .icon img{width: auto; height: 50px;}

#solution .solution_list li:nth-child(1){transform:translate(0,100%); opacity: 0;}
#solution .solution_list li:nth-child(2){transform:translate(0,100%); opacity: 0;}
#solution .solution_list li:nth-child(3){transform:translate(0,100%); opacity: 0;}
#solution .solution_list li:nth-child(4){transform:translate(0,100%); opacity: 0;}
#solution .solution_list li:nth-child(5){transform:translate(0,100%); opacity: 0;}

@keyframes txt_area {
	0 { transform:translate(0,100%); opacity: 0; }
	100% { transform:translateX(0); opacity: 1; }
}
@keyframes one {
	0 { transform:translate(0,100%); opacity: 0; }
	100% { transform:translate(0,0); opacity: 1; }
}
@keyframes two {
	0 { transform:translate(0,100%); opacity: 0; }
	100% { transform:translate(0,0); opacity: 1; }
}
@keyframes three {
	0 { transform:translate(0,100%); opacity: 0; }
	100% { transform:translate(0,0); opacity: 1; }
}
@keyframes four {
	0 { transform:translate(0,100%); opacity: 0; }
	100% { transform:translate(0,0); opacity: 1; }
}
@keyframes five {
	0 { transform:translate(0,100%); opacity: 0; }
	100% { transform:translate(0,0); opacity: 1; }
}



/* PROJECTS */
#projects{padding: 60px 0;}
#projects .tit_area{padding: 0 0 20px;} 
#projects .projects_swiper{}
#projects .projects_swiper .swiper-wrapper{width: calc(100% + 10px);}
#projects .projects_swiper .swiper-slide{width: 100%;}
#projects .projects_swiper .swiper-slide a{margin-right: 10px;}
#projects .projects_swiper .swiper-slide a .desc{padding: 10px 0 20px;}
#projects .projects_swiper .swiper-slide a .desc::after{display: none;}
#projects .projects_swiper .swiper-slide a .desc .category{margin: 0 0 3px;}
#projects .projects_swiper .slide_arrow{width: 24px; margin-top: -12px; top:40%;}
#projects .projects_swiper .slide_arrow::after{font-size:24px; line-height: 24px;}
#projects .cate_area{margin: 10px auto 0;}
#projects .cate_area .swiper-slide a{margin-right: 30px; line-height: 48px;}
#projects .cate_area .swiper-slide a::after{width: 16px; height: 16px; line-height: 16px; font-size:16px;}
#projects .cate_area .swiper-slide a sup{font-size:10px;}




/* CAREER */
#career .career_in{gap:30px; max-width:440px;}
#career .career_in .txt_area h4 img{margin: -2px 0 0 5px; width: 100px; height: auto;}
#career .career_in .txt_area h3{letter-spacing: -1.4px;}
#career .career_in .btn_area{flex-wrap:wrap; gap:5px; justify-content: center;}
#career .career_in .btn_area a{width: 240px;}




}