:root{
	--vh: 100%;
}

/* common */
.ptH{ padding-top: var(--headerH); }

.title-box > span{ display: inline-block; font-family: var(--engFont); font-size: 1.6rem; font-weight: 600; color: var(--mainColor); margin-bottom: 50px; }
.title-box h4{ font-size: 5.6rem; font-weight: 700; color: #111; }
.title-box p{ font-size: 2rem; font-weight: 300; color: #333; margin-top: 20px; }
.title-box div{ margin-top: 90px; }

.viewmore{ width: 200px; height: 65px; border-radius: 50px; display: flex; justify-content: center; align-items: center; font-family: var(--engFont); font-size: 1.5rem; font-weight: 600; color: #111 !important; letter-spacing: 0; position: relative; transition: color 0.5s; overflow: hidden; }
.viewmore::before{ content: ""; width: 6px; height: 6px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; }
.viewmore::after{ content: ""; width: 100%; height: 100%; border: 1px solid #D9D9D9; border-radius: inherit; position: absolute; top: 0; left: 0; z-index: -3; box-sizing: border-box; opacity: 1; }
.viewmore span{ display: inline-block; padding-right: 0; position: relative; z-index: 5px; transition: padding 0.5s; --pr: 40px; }
.viewmore span::after{ content: url("/img/main/viewmore_icon.svg"); position: absolute; top: 50%; right: 0; transform: translateY( -50%); opacity: 0; transition: transform 0.5s, opacity 0.5s; }
.viewmore.white{ color: #fff !important; }

@media screen and (hover: hover){
	.viewmore:hover{ color: #fff !important; }
	.viewmore:hover::before{ width: 200px; height: 200px; opacity: 1; }
	.viewmore:hover::after{ opacity: 0; transition-delay: 0.4s; }
	.viewmore:hover span{ padding-right: var(--pr); }
	.viewmore:hover span::after{ opacity: 1; }
}

@media screen and (max-height: 800px){
	.ptH{ padding-top: 0; }
}

@media screen and (max-width: 1700px){
	.title-box > span{ margin-bottom: 30px; }
	.title-box h4{ font-size: 4.5rem; }
	.title-box p{ font-size: 1.8rem; }
	.title-box div{ margin-top: 60px; }
	
	.viewmore{ width: 180px; height: 60px; }
}

@media screen and (max-width: 1280px){
	.title-box > span{ font-size: 1.5rem; margin-bottom: 20px; }
	.title-box h4{ font-size: 3.5rem; }
	.title-box p{ font-size: 1.7rem; }
	.title-box div{ margin-top: 40px; }

	.viewmore{ width: 165px; height: 55px; font-size: 1.4rem; }
	.viewmore span{ --pr: 30px; }
}

@media screen and (max-width: 1200px){
	.ptH{ padding-top: 0; }
}

@media screen and (max-width: 900px){
	.viewmore{ width: 150px; height: 50px; }

	.title-box p{ font-size: 1.6rem; }
}

/* visual */
#visual{ position: relative; overflow: hidden; }
#visual .visual{ height: 100vh; position: relative; outline: none; }
#visual .visual video{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#visual .visual .container{  position: relative; width: 100%; height: 100%; }
/* #visual .visual iframe{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); pointer-events: none; } */
#visual .visual iframe{ 
	pointer-events:none;
	z-index:1;
	width:100vw;
	height:60vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height:110vh;
	min-width:177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

#visual .text-box{ position: absolute; top: 42%; left: 0; right: 0; z-index: 10; transform: translateY(-50%); pointer-events: none; }
#visual .text-box *{ color: #fff; }
#visual .text-box p{ font-family: var(--engFont); font-size: 2.8rem; font-weight: 500; letter-spacing: 0; --translate: 0, -100px; animation: textTransform 1s both; }
#visual .text-box h2{ font-size: 5.6rem; font-weight: 400; color: transparent; letter-spacing: -0.03em; margin: 20px 0 60px; background: linear-gradient(to right, #fff, #fff, #fff, #fff 50%, transparent 50%); background-clip: text; -webkit-background-clip: text; background-size: 200% 100%; background-position: 100px; animation: textBg 3s both; }
#visual .text-box h2 strong{ font-weight: 800; color: transparent; letter-spacing: inherit; animation: textColor 1s forwards; }
#visual .text-box div.delay{  --translate: 0, 100%; animation: textTransform 1s both; }
#visual .text-box a{ pointer-events: auto; }

#visual .bottom{ position: absolute; bottom: 45px; left: 0; right: 0; }
#visual .bottom .flex-box{ display: flex; justify-content: space-between; align-items: flex-end; }
#visual .bottom .dots{ max-width: 50%; width: 100%; --translate: 0, 100%; animation: textTransform 1s 0.5s both; padding-right: 40px; }
#visual .bottom .slick-dots{ width: 100%; display: flex !important; flex-wrap: wrap; align-items: flex-end; }
#visual .bottom .slick-dots li{ width: calc(100% / 4); cursor: pointer; }
#visual .bottom .slick-dots li button{ display: none; }
#visual .bottom .slick-dots li span{ display: block; font-size: 1.6rem; font-weight: 700; color: #fff; opacity: 0.6; padding: 20px 0; text-align: center; transition: all 0.5s; }
#visual .bottom .slick-dots li .bar{ width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); }
#visual .bottom .slick-dots li .bar div{ width: 0; height: 100%; background: #fff; }

#visual .bottom .slick-dots li.slick-active span{ font-size: 2rem; font-weight: 600; opacity: 1; }

#visual .bottom .right{ display: flex; align-items: flex-end; --translate: 100%, 0; animation: textTransform 1s 0.5s both; }
#visual .bottom .prod-wrap{ width: 360px; padding: 20px 30px; background: rgba(255, 255, 255, 0.1); border-radius: 20px; backdrop-filter: blur(10px); -webkit-backdroip-filter: blur(10px); overflow: hidden; }
#visual .bottom .prod-wrap .slick-list{ margin-right: -30px; }
#visual .bottom .prod-wrap .prod{ margin-right: 30px; outline: none; }
#visual .bottom .prod-wrap figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 100%; }
#visual .bottom .prod-wrap figure img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#visual .bottom .prod-wrap p{ font-size: 1.7rem; font-weight: 400; color: #fff; text-align: center; margin-top: 10px; }
#visual .bottom .scrolldown{ display: flex; flex-direction: column; position: relative; top: 0; left: 0; transform: translate(0, -50px); margin-left: 10px; opacity: 0.8; }
#visual .bottom .scrolldown::after, #visual .bottom .scrolldown::before, #visual .bottom .scrolldown span{ width: 15px; height: 8px; }
#visual .bottom .scrolldown p{ display: inline-block; font-family: var(--engFont); font-size: 1.5rem; font-weight: 500; color: #fff; writing-mode: vertical-rl; }

#visual .btns{ position: absolute; top: 50%; left: 0; right: 0; z-index: 100; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
#visual .btns button{ background: none; border: none; padding: 20px; pointer-events: auto; }

@media screen and (max-width: 1840px){
	#visual .text-box, #visual .bottom{ padding: 0 50px; }
}

@media screen and (max-width: 1700px){
	#visual .text-box p{ font-size: 2.4rem; }
	#visual .text-box h2{ font-size: 4.5rem; }
}

@media screen and (max-width: 1500px){
	/* #visual .bottom .dots{ max-width: 650px; } */
	#visual .bottom .prod-wrap{ width: 300px; }
}

@media screen and (max-width: 1400px){
	#visual .text-box{ top: 35%; }

	#visual .bottom .dots{ padding-left: 40px; padding-right: 0; position: static; }
	#visual .bottom .flex-box{ flex-direction: column-reverse; align-items: flex-end; }
	#visual .bottom .slick-dots{ margin-top: 10px; }
}

@media screen and (max-width: 1280px){
	#visual .text-box p{ font-size: 2rem; }
	#visual .text-box h2{ font-size: 4rem; margin: 15px 0 30px; }

	/* #visual .bottom{ bottom: 100px; } */
	/* #visual .bottom .dots{ max-width: 600px; } */
	#visual .bottom .slick-dots li span{ font-size: 1.5rem; padding: 15px 0; }
	#visual .bottom .slick-dots li.slick-active span{ font-size: 1.8rem; }
	#visual .bottom .dots{ max-width: 600px; padding-left: 0; }

	#visual .bottom .prod-wrap{ width: 250px; }
	#visual .bottom .prod-wrap p{ font-size: 1.5rem; }
}

@media screen and (max-width: 1200px){
	#visual .text-box, #visual .bottom{ padding: 0; }
	#visual .bottom .dots{ max-width: 600px; }
	#visual .btns{ display: none; }
}

@media screen and (max-width: 900px){
	#visual .text-box p{ font-size: 1.8rem; }
	#visual .text-box h2{ font-size: 3.5rem; }
}

@media screen and (max-width: 750px){
	#visual .visual{ height: var(--vh); }
}

@media screen and (max-width: 600px){
	#visual br{ display: none; }

	/* #visual .bottom .slick-dots li{ width: calc(100% / 2); } */
	#visual .bottom .slick-dots li{ font-weight: 600; }
	#visual .bottom .slick-dots li span{ font-size: 1.4rem; }
	#visual .bottom .slick-dots li.slick-active span{ font-size: 1.4rem; font-weight: 700; }
	#visual .bottom .prod-wrap{ width: 200px; padding: 15px; }
}


/* business */
#business{ overflow: hidden; }
#business .flex-box{ display: flex; align-items: center; }
#business .big{ width: 70%; position: relative; }
#business .big::before{ content: ""; width: calc(100% + ((100vw - 100%) / 2)); height: 100vh; padding: 100px 0; background: #fff; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#business .small{ width: 30%; position: relative; z-index: -1; }
#business .slick-slide{ outline: none; }

#business .business-wrap .slick-track{ display: flex !important; align-items: center; }
#business .business .flex{ display: flex; align-items: center; }
#business .business .figure{ width: 43.8%; }
#business .business .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 119%; border-radius: 20px; }
#business .business .figure figure img{ width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#business .business .text{ width: 56.2%; padding: 0 40px; }
#business .business .text h3{ font-size: 6rem; font-weight: 700; color: #111; margin-bottom: 15px; }
#business .business .text p{ font-size: 1.8rem; font-weight: 400; color: #333; line-height: 1.5; }
/* #business .business .text ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 15px; margin: 50px 0 80px; }
#business .business .text ul li{ width: calc((100% - 60px) / 5); text-align: center; position: relative; }
#business .business .text ul li figure{ width: 100%; padding-bottom: 100%; background: #F5F5F5; border-radius: 50%; position: relative; }
#business .business .text ul li figure img{ max-width: calc(100% - 20px); max-height: calc(100% - 20px); width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#business .business .text ul li p{ font-size: 1.6rem; font-weight: 500; margin-top: 10px; }
#business .business .text ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } */

#business .img-wrap .slick-list{ margin-right: -25px; overflow: visible; }
#business .img{ overflow: hidden; border-radius: 20px; margin-right: 25px; }
#business .img figure{ position: relative; }
#business .img figure img{ width: 100%; height: 100%; position: absolute; top: 50%; transform: translateY(-50%); }

#business .sec-title p{ font-size: 1.8rem; margin-top: 10px; line-height: 1.6666; }
#business .example{ margin-top: 30px; }
#business .example h6{ font-size: 2rem; font-weight: 600; color: #222; margin-bottom: 20px; }
#business .example ul{ display: flex; flex-wrap: wrap; gap: 20px; }
#business .example ul li{ width: calc((100% - 40px) / 3); border: 1px solid #EEE; border-radius: 20px; padding: 15px 20px; }
#business .example ul li span{ display: block; font-family: var(--engFont); font-size: 1.4rem; font-weight: 600; color: #D6D6D6; margin: 15px 0 5px; }
#business .example ul li p{ font-size: 1.8rem; font-weight: 500; color: #333; }

@media screen and (max-height: 800px){
	#business{ padding: 60px 0 100px; }
}

@media screen and (max-width: 1870px){
	#business .big{ width: 80%; }
	#business .small{ width: 20%; }
}

@media screen and (max-width: 1700px){
	#business .business .text h3{ font-size: 5rem; }
	/* #business .business .text ul{ margin: 50px 0; } */

	#business .business .example h6{ font-size: 1.9rem; }
	#business .business .example ul li{ padding: 20px; }
	#business .business .example ul li span{ margin: 10px 0 5px; }
	#business .business .example ul li p{ font-size: 1.7rem; }
}

@media screen and (max-width: 1500px){
	#business .business .text h3{ font-size: 4rem; }
}

@media screen and (max-width: 1280px){
	#business .big{ width: 85%; }
	#business .small{ width: 15%; }
	#business .business .text h3{ font-size: 3.5rem; margin-bottom: 10px; }
	#business .business .text p{ font-size: 1.7rem; }
	/* #business .business .text ul{ margin: 30px 0; }
	#business .business .text ul li p{ font-size: 1.5rem; } */

	#business .business .example{ margin-top: 20px; }
	#business .business .example h6{ font-size: 1.8rem; }
	#business .business .example ul li{ padding: 15px; }
	#business .business .example ul li p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#business{ padding: 60px 0 100px; overflow: hidden; }
	#business .big{ width: calc(100% - 40px); }
	#business .big .slick-list{ overflow: visible; }

	#business .small{ display: none; }

	#business .business .example ul li{ width: calc((100% - 20px) / 2); padding-left: 90px; position: relative; }
	#business .business .example ul li .icon{ width: 70px; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); padding-right: 10px; }
	#business .business .example ul li .icon img{ margin: 0 auto; }
}

@media screen and (max-width: 1000px){
	#business .big{ width: 70%; margin: 0 auto; }
	#business .business-wrap .slick-list{ margin-right: -50px; }
	#business .business-wrap .slick-track{ align-items: flex-start; }
	#business .business{ margin-right: 50px; }
	#business .business .flex{ flex-direction: column; }
	#business .business .figure{ width: 100%; }
	#business .business .figure figure{ padding-bottom: 95%; }
	#business .business .text{ width: 100%; padding: 0; margin-top: 30px; opacity: 0; transform: translateY(100px); transition: transform 1s, opacity 1s; }
	#business .business.slick-active .text, #business .business.slick-now .text{ transform: translateY(0); opacity: 1; }
	#business .business .text h3{ font-size: 3rem; }
}

/* @media screen and (max-width: 900px){
	#business .business .text h3{ font-size: 3rem; }
} */

@media screen and (max-width: 800px){
	#business .big{ width: 80%; }
}

@media screen and (max-width: 700px){
	#business .big{ width: 100%; }
	/* #business .business-wrap .slick-list{ margin-right: -20px; padding: 0 30px !important; }
	#business .business{ margin-right: 20px; } */
	#business .business-wrap .slick-list{ margin-right: 0; padding: 0 10px !important; }
	#business .business{ margin-right: 0; }
	#business .business .figure{ width: calc(100% - 20px); margin: 0 auto; }
}

@media screen and (max-width: 550px){
	/* #business .business .text ul{ margin: 20px 0; gap: 20px 10px; }
	#business .business .text ul li{ width: calc((100% - 40px) / 5); } */

	#business .business .example ul li{ padding-left: 15px; position: relative; }
	#business .business .example ul li .icon{ width: auto; margin: 0; padding: 0; position: static; transform: translateY(0); }
	#business .business .example ul li .icon img{ margin: 0; }
}





/* product */
#product{ position: relative; z-index: 10; overflow: hidden; }
#product::before{ content: ""; width: 100%; height: 50%; background: url("/img/main/product_bg.jpg") no-repeat center center / cover; position: absolute; top: 0; left: 0; z-index: -1; }
#product .title-box{ margin-bottom: 30px; position: relative; padding-right: 170px; }
#product .title-box *{ color: #fff; }
#product .title-box h4{ font-family: var(--engFont); }
#product .title-box p{ margin-top: 5px; }
#product .title-box .btns{ position: absolute; bottom: 0; right: 0; display: flex; margin-top: 0; }
#product .title-box .btns button{ width: 60px; height: 60px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid #fff; border-radius: 50px; position: relative; transition: background 0.5s, border 0.5s; }
#product .title-box .btns button:not(:last-of-type){ margin-right: 10px; }
#product .title-box .btns button::after{ position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s; }
#product .title-box .btns button.prev::after{ content: url("/img/sub/product/prev_icon_mc.svg"); }
#product .title-box .btns button.next::after{ content: url("/img/sub/product/next_icon_mc.svg"); }
#product .title-box .btns button img{ filter: invert(1); -webkit-filter: invert(1); opacity: 1; transition: opacity 0.5s; }

#product .inner-box{ width: calc(100% + ((100vw - 100%) / 2)); }
#product .slick-list{ margin-right: -40px; }
#product .slick-track{ display: flex; margin: 0; }
#product .product{ width: calc((1580px - 80px) / 3); background: #fff; border: 1px solid #DDD; border-radius: 20px; padding: 40px; position: relative; margin-right: 40px; position: relative; transition: border 0.5s; }
#product .product::after{ content: ""; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: inherit; border: 2px solid var(--mainColor); position: absolute; top: -1px; left: -1px; box-sizing: border-box; opacity: 0; transition: opacity 0.5s; }
#product .product .figure{ padding-right: 40px; position: relative; }
#product .product .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 93%; transform: scale(0.94); }
#product .product .figure figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#product .product .figure span{ font-family: var(--engFont); font-size: 1.5rem; font-weight: 600; color: #D6D6D6; position: absolute; top: 0; right: 0; writing-mode: vertical-rl; transform: translateX(100%); transition: color 0.5s; }
#product .product .txt h5{ font-size: 4rem; font-weight: 700; color: #111; margin-bottom: 10px; }
#product .product .txt p{ font-size: 1.8rem; font-weight: 400; color: #333; }
#product .product a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#product .product.slick-active, #product .product.slick-now{ border: 1px solid transparent; }
#product .product.slick-active::after, #product .product.slick-now::after{ opacity: 1; }
#product .product.slick-active .figure span, #product .product.slick-now .figure span{ color: var(--mainColor); }

#product .slide-bar{ height: 3px; position: relative; margin-top: 50px; }
#product .slide-bar::before{ content: ""; width: 100%; height: 1px; background: #DDD; border-radius: 5px; position: absolute; top: 50%; left: 0; z-index: -1; transform: translateY(-50%); }
#product .slide-bar .bar{ width: 0; height: 100%; background: var(--mainColor); border-radius: 5px; }

@media screen and (hover: hover){
	#product .title-box .btns button:hover{ background: #fff; border: 1px solid var(--mainColor); }
	#product .title-box .btns button:hover::after{ opacity: 1; }
	#product .title-box .btns button:hover img{ opacity: 0; }
}

@media screen and (max-height: 800px){
	#product{ padding: 100px 0; }
}

@media screen and (max-width: 1780px){
	#product .product{ width: calc(((100vw - 120px) / 3) - 100px); }
	#product .product .txt h5{ font-size: 3rem; }
}

@media screen and (max-width: 1600px){
	#product .title-box{ padding-right: 150px; }
	#product .title-box .btns button{ width: 55px; height: 55px; }
}

@media screen and (max-width: 1550px){
	#product .slick-list{ margin-right: -20px; }
	#product .product{ margin-right: 20px; width: calc(((100vw - 60px) / 3) - 50px); }
}

@media screen and (max-width: 1500px){
	#product .product{ padding: 25px; }
	#product .product .figure{ padding-right: 25px; }
	#product .product .figure span{ transform: translateX(0); }
}

@media screen and (max-width: 1280px){
	#product .title-box{ padding-right: 130px; }
	#product .title-box .btns button{ width: 50px; height: 50px; }

	#product .product{ width: calc(((100vw - 60px) / 3) - 30px); }
	#product .product .txt h5{ font-size: 2.6rem; }
	#product .product .txt p{ font-size: 1.7rem; }
	#product .slide-bar{ margin-top: 30px; }
}

@media screen and (max-width: 1200px){
	#product{ padding: 60px 0 100px; }
	#product .product{ width: 330px; }
}

@media screen and (max-width: 900px){
	#product .title-box{ margin-bottom: 20px; padding-right: 0; }
	#product .title-box .btns{ width: 100%; display: flex; justify-content: flex-end; position: static; margin-top: 20px; }
	#product .title-box .btns button{ width: 50px; height: 50px; }
}



/* career */
#career{ --basePt: 65px; --titPt: 55px; --gap: 50px; overflow: hidden; position: relative; }
#career br.none{ display: none; }
#career .flex-box{ display: flex; justify-content: flex-end; position: relative; }
#career .flex-box > div{ /* width: 50%; */ height: 100vh; }

#career .tit{ position: absolute; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none; }
#career .title-box{ width: 45%; padding-top: calc(var(--headerH) + var(--basePt) + var(--titPt)); display: flex; flex-direction: column; align-items: flex-start; padding-right: 50px; }
#career .title-box > *{ pointer-events: auto; }

#career .content{ width: 100%; height: 100%; /* overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; */ }
#career .scroll-box{ display: flex; align-items: center; max-width: 870px; width: 55%; /* padding-top: calc(var(--headerH) + var(--basePt)); */ padding-top: var(--headerH); }
#career .list-box{ width: 100%; display: flex; flex-wrap: wrap; gap: var(--gap); /* padding: var(--gap) 0; */ }
#career .list-box .item{ width: calc((100% - var(--gap)) / 2); position: relative; }
#career .list-box .item:nth-of-type(odd){ /* top: calc(var(--gap) * -1); */ }
#career .list-box .item figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 80%; border-radius: 20px; }
#career .list-box .item figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.5s; }
#career .list-box .item .text{ position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 40px; color: #fff; }
#career .list-box .item .text h5{ font-size: 4rem; font-weight: 700; }
#career .list-box .item .text span{ display: block; font-family: var(--engFont); font-size: 2rem; font-weight: 600; color: var(--mainColor); letter-spacing: 0; text-transform: uppercase; margin: 5px 0 25px; }
#career .list-box .item .text p{ font-size: 1.8rem; font-weight: 400; line-height: 1.5; }

@media screen and (hover: hover){
	#career .list-box .item:hover figure img{ transform: translate(-50%, -50%) scale(1.1); }
}

@media screen and (max-height: 800px){
	#career{ padding-bottom: 100px; }
	#career .flex-box > div{ height: auto; }
	#career .title-box{ padding-top: 0; }
	#career .scroll-box{ padding-top: 20px; overflow-y: visible; }
	#career .list-box{ padding: 0; }
}

@media screen and (max-width: 1700px){
	#career .list-box .item .text h5{ font-size: 3.5rem; }
	#career .list-box .item .text span{ font-size: 1.8rem; }
	#career .list-box .item .text p{ font-size: 1.7rem; }
}

@media screen and (max-width: 1500px){
	#career .list-box .item .text{ padding: 35px 30px; }
}

@media screen and (max-width: 1280px){
	#career .list-box .item .text{ padding: 25px; }
	#career .list-box .item .text h5{ font-size: 2.5rem; }
	#career .list-box .item .text span{ font-size: 1.6rem; margin: 5px 0 10px; }
	#career .list-box .item .text p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#career{ padding-bottom: 100px; }
	#career .flex-box > div{ height: auto; }
	
	#career .title-box{ width: calc(100% - 600px); padding-top: 0; padding-right: 50px; }
	#career .content{ overflow-y: visible; }
	#career .scroll-box{ width: 600px; padding-top: var(--gap); overflow-y: visible; }
	#career .list-box{ padding: 0; }
}

@media screen and (max-width: 1000px){
	#career .tit{ position: static; }
	#career .flex-box{ flex-direction: column; }
	#career .title-box{ width: 100%; padding-right: 0; }
	#career .scroll-box{ max-width: 100%; width: 800px; margin: 0 auto; }
}

@media screen and (max-width: 650px){
	#career{ --gap: 20px; }
	#career br.none{ display: block; }
	#career .title-box div{ margin-top: 20px; }

	#career .list-box .item{ width: 100%; }
	#career .list-box .item .text{ position: static; padding-top: 40px; }
	#career .list-box .item:nth-of-type(odd){ top: 0; }
	#career .list-box .item figure{ height: 100%; padding: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; }
	#career .list-box .item figure img{ top: 80%; }
	#career .list-box .item figure::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 0; }
}



/* animate */
@keyframes textColor{
	0%{ color: transparent; }
	100%{ color: #fff; }
}

@keyframes textBg{
	0% { background-position: 100%; }
	50% { opacity: 1; }
	100% { opacity: 1; background-position: 0; }
}

@keyframes textTransform{
	0%{ transform: translate(var(--translate)); opacity: 0; }
	100%{ transform: translate(0, 0); opacity: 1; }
}