/* fullpage navi */
#fp-nav.right{ right: 65px; transition: opacity 0.5s; }
#fp-nav ul li, .fp-slidesNav ul li{ width: 5px; height: 5px; margin: 0; }
#fp-nav ul li:last-of-type, .fp-slidesNav ul li:last-of-type{ display: none; }
#fp-nav ul li:not(:last-of-type), .fp-slidesNav ul li:not(:last-of-type){ margin-bottom: 40px; }
#fp-nav ul li a, .fp-slidesNav ul li a{ position: relative; }
#fp-nav ul li a::after, .fp-slidesNav ul li a::after{ content: ""; width: 25px; height: 25px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.5s, border 0.5s; }
#fp-nav ul li a span, .fp-slidesNav ul li a span{ width: 100% !important; height: 100% !important; margin: 0 !important; background: rgba(255, 255, 255, 0.4); transition: background 0.5s; top: 0; left: 0; }
#fp-nav ul li a.active::after, .fp-slidesNav ul li a.active::after, #fp-nav ul li:hover a.active::after, .fp-slidesNav ul li:hover a.active::after{ transform: translate(-50%, -50%) scale(1); }
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{ background: #fff; }

#fp-nav.scroll ul li a span, .fp-slidesNav.scroll ul li a span{ background: rgba(0, 0, 0, 0.2); }
#fp-nav.scroll ul li a.active::after, .fp-slidesNav.scroll ul li a.active::after, #fp-nav.scroll ul li:hover a.active::after, .fp-slidesNav.scroll ul li:hover a.active::after{ border: 1px solid var(--mainColor); }
#fp-nav.scroll ul li a.active span, .fp-slidesNav.scroll ul li a.active span, #fp-nav.scroll ul li:hover a.active span, .fp-slidesNav.scroll ul li:hover a.active span{ background: var(--mainColor); }

#fp-nav.right.opacity{ opacity: 0; pointer-events: none; }

@media screen and (max-width: 1900px){
	#fp-nav.right{ right: 30px; }
}

@media screen and (max-width: 1830px){
	#fp-nav.right{ right: 25px; }
}

/* common */
.section{ overflow: hidden; }
.white *{ color: #fff; }

/* title-box */
.title-box h3{ font-family: var(--engFont); font-size: 8rem; font-weight: 700; color: #111; letter-spacing: -0.01em; }
.title-box p{ font-size: 2rem; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.7; margin-top: 30px; }
.title-box div{ margin-top: 80px; }

.white .title-box h3{ color: #fff; }
.white .title-box p{ color: #fff; }

/* viewmore */
.viewmore{ --size: 55px; width: fit-content; height: var(--size); display: flex; align-items: center; font-family: var(--engFont); font-size: 1.8rem; font-weight: 500; color: #fff !important; letter-spacing: -0.02em; text-transform: uppercase; position: relative; z-index: 10; padding-left: 14px; }
.viewmore::before{ content: ""; width: 7px; height: 7px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: -1; transition: width 0.5s, height 0.5s; }
.viewmore::after{ content: url("/img/main/viewmore.svg"); display: inline-block; vertical-align: text-top; margin-left: 10px; }

@media screen and (hover: hover){
	/* viewmore */
	.viewmore:hover::before{ width: var(--size); height: var(--size); }
}

@media screen and (max-height: 800px){
	/* common */
	.section .ptH{ padding-top: 0; }
	.section:not(:first-of-type, :last-of-type){ padding: 100px 0; }
}

@media screen and (max-width: 1830px){
	/* common */
	.section .w1700{ padding-right: 60px; }
}

@media screen and (max-width: 1700px){
	/* title-box */
	.title-box h3{ font-size: 6rem; }
	.title-box p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1280px){
	/* title-box */
	.title-box h3{ font-size: 4.5rem; }
	.title-box p{ font-size: 1.7rem; margin-top: 20px; }
	.title-box div{ margin-top: 40px; }

	/* viewmore */
	.viewmore{ --size: 50px; font-size: 1.7rem; }
}

@media screen and (max-width: 1200px){
	/* common */
	.section .ptH{ padding-top: 0; }
	.section:not(:first-of-type, :last-of-type){ padding: 100px 0; }
	.section .w1700{ padding-right: 20px; }
}

@media screen and (max-width: 900px){
	/* title-box */
	.title-box h3{ font-size: 3.5rem; }

	/* common */
	.section:not(:first-of-type, :last-of-type){ padding: 80px 0; }
}


/* visual */
#visual{ position: relative; overflow: hidden; }
#visual .bg{ height: 100vh; transform: scale(1.2); transition: transform 1.5s; }
#visual .bg01{ background: url("/img/main/visual01-01.jpg") no-repeat center center / cover; }
#visual .bg02{ background: url("/img/main/visual02-01.jpg") no-repeat center center / cover; }
#visual .bg03{ background: url("/img/main/visual03-01.jpg") no-repeat left 83% center / cover; }

#visual .text-box{ position: absolute; top: 40%; left: 0; right: 0; }
#visual .text-box h2{ font-family: var(--engFont); font-size: 9rem; font-weight: 600; color: #fff; }
#visual .text-box h2 span{ display: inline-block; filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; transform: translateX(50px); }
#visual .text-box p{ font-size: 2rem; font-weight: 300; letter-spacing: -0.02em; margin-top: 20px; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
#visual .text-box .flex-box{ display: flex; align-items: center; margin-top: 23px; }
#visual .text-box .dots ul{ display: flex !important; }
#visual .text-box .dots ul li{ transform: rotate(-90deg); cursor: pointer; }
#visual .text-box .dots ul li:not(:last-of-type){ margin-right: 10px; }
#visual .text-box .dots ul li svg{ height: auto; }
#visual .text-box .dots ul li svg .center{ opacity: 0.4; transition: opacity 0.5s; }
#visual .text-box .dots ul li svg .progress{ stroke-width: 2px; stroke-dasharray: 139; stroke-dashoffset: 140; }
#visual .text-box .dots ul li button{ display: none; }
#visual .text-box .btns{ display: flex; margin-left: 17px; }
#visual .text-box .btns button{ width: 50px; height: 50px; background: none; border: none; opacity: 0.4; transition: opacity 0.5s; }

#visual .visual.slick-active .bg{ transform: scale(1); }

#visual .text-box .dots ul li.active svg .center{ opacity: 1; }
#visual .text-box .dots ul li.active svg .progress{ animation-name: circleProgress; animation-fill-mode: forwards; }

#visual .text-box.animate h2 span{ animation: textBlur 1s forwards; }
#visual .text-box.animate p{ animation: textClip 1s forwards; }

#visual .scrollDown{ position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); text-align: center; }
#visual .scrollDown span{ display: inline-block; font-family: var(--engFont); font-size: 1.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); letter-spacing: -0.02em; margin-bottom: 5px; }
#visual .scrollDown .arrow{ position: relative; }
#visual .scrollDown .arrow svg path{ stroke-dasharray: 45; stroke-dashoffset: 45; animation: scrollDown 2s linear infinite; }

@media screen and (hover: hover){
	#visual .text-box .btns button:hover{ opacity: 1; }
}

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

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

	#visual .text-box .dots ul li svg{ width: 40px; }
	#visual .text-box .dots ul li:not(:last-of-type){ margin-right: 0; }

	#visual .text-box .btns{ margin-left: 10px; }
	#visual .text-box .btns button{ width: 45px; height: 45px; }
}

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



/* pipeline */
#pipeline{ background: url("/img/main/pipeline_bg.jpg") no-repeat center center / cover; }
#pipeline .flex-box{ display: flex; }
#pipeline .title-box{ width: 640px; }

#pipeline .list-box{ width: calc(100% - 640px); }
#pipeline .list-box ul{ display: flex; justify-content: space-between; }
#pipeline .list-box ul li{ width: calc((100% - 38px) / 3); min-height: 250px; text-align: center; position: relative; padding-bottom: 54.6%; border-radius: 20px; }
#pipeline .list-box ul li::before{ content: ""; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: inherit; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); position: absolute; top: 0; left: 0; box-sizing: border-box; }
#pipeline .list-box ul li .hover{ z-index: 5; }
#pipeline .list-box ul li .txt{ position: absolute; top: 50%; left: 0; right: 0; z-index: 10; transform: translateY(-50%); padding: 0 30px; transition: top 0.8s; }
#pipeline .list-box ul li .txt h5{ font-size: 3.2rem; font-weight: 600; letter-spacing: -0.02em; margin: 40px 0 10px; }
#pipeline .list-box ul li .txt p{ font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; }

#pipeline .list-box ul li .icon{ position: relative; }
#pipeline .list-box ul li .icon img{ opacity: 1; transition: opacity 0.8s; }
#pipeline .list-box ul li .icon img.white{ opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#pipeline .list-box ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (hover: hover){
	#pipeline .list-box ul li:hover .txt{ top: calc(50% - 40px); }
	#pipeline .list-box ul li:hover .icon img{ opacity: 0; }
	#pipeline .list-box ul li:hover .icon img.white{ opacity: 1; }
}

@media screen and (max-width: 1700px){
	#pipeline .list-box ul li .txt h5{ font-size: 2.8rem; }
	#pipeline .list-box ul li .txt p{ font-size: 1.7rem; } 
}

@media screen and (max-width: 1600px){
	#pipeline .title-box{ width: 550px; }
	#pipeline .list-box{ width: calc(100% - 550px); }
}

@media screen and (max-width: 1400px){
	#pipeline .title-box{ width: 400px; }
	#pipeline .title-box br{ display: none; }

	#pipeline .list-box{ width: calc(100% - 400px); padding-left: 50px; }
	#pipeline .list-box ul li{ padding-bottom: 60%; }
}

@media screen and (max-width: 1280px){
	#pipeline .list-box ul li .txt h5{ font-size: 2.4rem; margin: 20px 0 10px; }
	#pipeline .list-box ul li .txt p{ font-size: 1.6rem; } 
}

@media screen and (max-width: 1200px){
	#pipeline .flex-box{ flex-direction: column; }
	#pipeline .title-box{ width: 100%; }
	#pipeline .title-box br{ display: none; }

	#pipeline .list-box{ width: 100%; padding-left: 0; margin-top: 20px; }
	#pipeline .list-box ul li{ padding-bottom: 50%; }
}

@media screen and (max-width: 900px){
	#pipeline .list-box ul li .txt h5{ font-size: 2.2rem; }
}

@media screen and (max-width: 700px){
	#pipeline .list-box ul{ flex-direction: column; }
	#pipeline .list-box ul li{ width: 100%; min-height: auto; padding: 30px; }
	#pipeline .list-box ul li:not(:last-of-type){ margin-bottom: 15px; }
	#pipeline .list-box ul li::before{ position: absolute; top: 0; left: 0; }
	#pipeline .list-box ul li .txt{ position: relative; top: 0; left: 0; transform: translate(0, 0); padding: 0; }
	#pipeline .list-box ul li .txt h5{ margin: 0 0 10px; }
}


/* pr */
#pr{ background: #F8F8F8; }
#pr .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#pr .title-box{ display: flex; align-items: center; }
#pr .title-box p{ margin-top: 0; padding-left: 40px; }

#pr .tab-menu ul{ display: flex; gap: 10px; }
#pr .tab-menu ul li{ display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; border: 1px solid #BBB; border-radius: 30px; font-size: 1.7rem; font-weight: 500; color: #BBB; line-height: 1; text-align: center; transition: all 0.5s; cursor: pointer; }
#pr .tab-menu ul li.on{ background: var(--mainColor); border: 1px solid var(--mainColor) !important; color: #fff !important; }

#pr .tab-content .tab{ width: 100%; }
#pr .tab-content .tab:not(:first-of-type){ display: none; }

#pr .news-wrap{ margin-bottom: -30px; }
#pr .news-wrap .slick-list{ margin-right: -20px; }
#pr .news-wrap .slick-track{ margin: 0; }
#pr .news{ background: #fff; border-radius: 20px; padding: 30px; box-shadow: 7px 7px 20px 0px rgba(15, 41, 107, 0.13); margin: 30px 0; margin-right: 20px; position: relative; outline: none; }

#pr .news .figure{ position: relative; border-radius: 20px; overflow: hidden; }
#pr .news .figure .hover{ background: rgba(18, 27, 57, 0.66); z-index: 10; }
#pr .news figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 68%; }
#pr .news figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.8s; }
#pr .news .figure span{ font-family: var(--engFont); font-weight: 500; color: #fff; text-align: center; text-transform: uppercase; position: absolute; top: 50%; left: 0; right: 0; z-index: 20; transform: translateY(-50%); opacity: 0; letter-spacing: 5px; transition: opacity 0.5s, letter-spacing 0.5s; }
#pr .news .figure span::after{ content: ""; display: inline-block; width: 8px; height: 8px; background: url("/img/main/pr_arrow.svg") no-repeat center center / auto; margin-left: 10px; position: relative; top: -1px; }
 
#pr .news .txt{ margin-top: 30px; }
#pr .news h6{ display: -webkit-box; height: 3.2em; font-size: 2.4rem; font-weight: 600; color: #333; letter-spacing: -0.02em; line-height: 1.6; word-break: break-word; white-space: normal; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 10px 0 40px; }
#pr .news span{ font-family: var(--engFont); font-size: 1.6rem; font-weight: 500; color: #999; }
#pr .news span.category{ font-family: var(--baseFont); font-weight: 600; color: var(--mainColor); letter-spacing: -0.02em; }
#pr .news a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; }

#pr .slide-box{ display: flex; justify-content: center; align-items: center; margin-top: 40px; gap: 0 30px; }
#pr .slide-box button{ width: 50px; height: 50px; background: none; border: 1px solid #AAA; border-radius: 50%; box-shadow: 10px 10px 30px rgba(15, 41, 107, 0.05); }
#pr .slick-dots{ display: flex !important; }
#pr .slick-dots li{ width: 8px; height: 8px; background: #DDD; border-radius: 50%; transition: background 0.5s; }
#pr .slick-dots li.slick-active{ background: var(--mainColor); }
#pr .slick-dots li:not(:last-of-type){ margin-right: 10px; }
#pr .slick-dots button{ display: none; }

@media screen and (hover: hover){
	#pr .tab-menu ul li:hover{ border: 1px solid var(--mainColor); color: var(--mainColor); }

	#pr .news:hover figure img{ transform: translate(-50%, -50%) scale(1.05); }
	#pr .news:hover .figure span{ opacity: 1; letter-spacing: -0.02em; }
}

@media screen and (max-width: 1600px){
	#pr .news h6{ font-size: 2.5rem; }
}

@media screen and (max-width: 1280px){
	#pr .tab-menu ul li{ width: 90px; height: 35px; font-size: 1.6rem; }

	#pr .news .txt{ margin-top: 20px; }
	#pr .news span{ font-size: 1.5rem; }
	#pr .news h6{ font-size: 2.2rem; margin: 5px 0 20px; }

	#pr .slide-box{ margin-top: 30px; gap: 20px; }
	#pr .slide-box button{ width: 45px; height: 45px; }
}

@media screen and (max-width: 1000px){
	#pr .flex-box{ flex-direction: column; align-items: flex-start; margin-bottom: -10px; }
	#pr .title-box{ display: block; margin-bottom: 20px; }
	#pr .title-box p{ padding-left: 0; }
	#pr .tab-menu{ width: 100%; }
}

@media screen and (max-width: 900px){
	#pr .news h6{ font-size: 2rem; }
}

@media screen and (max-width: 700px){
	#pr .news-wrap{ width: calc(100% + 20px); }
	#pr .news{ width: 300px; padding: 20px; }
}


/* esg */
#esg{ background: url("/img/main/esg_bg.jpg") no-repeat center center / cover; position: relative; overflow: visible; }
#esg .flex-box{ height: 100%; }
#esg .scroll-wrap{ display: flex; }
#esg .left{ --pt: 130px; width: 500px; padding-top: calc(var(--headerH) + var(--pt)); }
#esg .title-box{ position: sticky; top: calc(var(--headerH) + var(--pt)); left: 0; }

#esg .scroll-content{ --pt: 60px; width: 100%; height: 100%; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; clip-path: inset(var(--headerH) 0 0 0); }
#esg .right{ max-width: calc(100% - 500px); width: 1030px; margin-left: auto; padding-top: calc(var(--headerH) + var(--pt)); }
#esg .right .scroll-item{ display: flex; flex-wrap: wrap; gap: 70px 60px; padding: 190px 0 135px; }
#esg .right .scroll-item .item{ width: calc((100% - 60px) / 2); max-width: 400px; border-radius: 20px; z-index: 10; }
#esg .right .scroll-item .item:nth-of-type(even){ top: -190px; }
#esg .right .scroll-item .item .hover{ opacity: 0.9; z-index: 0; }
#esg .right .scroll-item .item figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 130%; z-index: -1; }
#esg .right .scroll-item .item figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#esg .right .scroll-item .item .txt{ position: absolute; bottom: 0; left: 0; right: 0; padding: 40px; z-index: 15; }
#esg .right .scroll-item .item .txt .relative{ position: relative; }
#esg .right .scroll-item .item .txt .relative > h5{ opacity: 0; }
#esg .right .scroll-item .item .txt .absolute{ position: absolute; top: 0; left: 0; right: 0; transform: translateY(0); transition: top 0.8s, transform 0.8s; will-change: top, transform; }
#esg .right .scroll-item .item .txt .opacity{ opacity: 0; transition: opacity 0.8s; will-change: opacity; }
#esg .right .scroll-item .item .txt h5{ font-size: 3.2rem; font-weight: 700; letter-spacing: -0.02em; padding-bottom: 20px; }
#esg .right .scroll-item .item .txt p{ font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.5; opacity: 0.9; margin-bottom: 50px; }
#esg .right .scroll-item .item .txt span{ font-family: var(--engFont); font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; }
#esg .right .scroll-item .item .txt span::after{ content: url("/img/main/esg_viewmore.svg"); margin-left: 10px; vertical-align: text-bottom; }
#esg .right .scroll-item .item a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }

#esg .right .slide-box{ display: flex; justify-content: space-between; align-items: center; margin-top: 20px; display: none; }
#esg .right .slide-box .progress{ width: calc(100% - 120px); height: 2px; background: rgba(255, 255, 255, 0.3); border-radius: 30px; overflow: hidden; }
#esg .right .slide-box .progress div{ width: 0; height: 100%; background: #fff; border-radius: inherit; }
#esg .right .slide-box .btns button:not(:last-of-type){ margin-right: 5px; }
#esg .right .slide-box button{ width: 45px; height: 45px; background: rgba(255, 255, 255, 0.2); border: 1px solid #FFF; border-radius: 50%; }

@media screen and (hover: hover){
	#esg .right .scroll-item .item:hover .txt .absolute{ top: 100%; transform: translateY(-100%); }
	#esg .right .scroll-item .item:hover .txt .opacity{ opacity: 1; }
}

@media screen and (max-width: 1700px){
	#esg .right .scroll-item .item .txt h5{ font-size: 2.7rem; }
	#esg .right .scroll-item .item .txt span{ font-size: 1.7rem; }
}

@media screen and (max-width: 1280px){
	#esg .right .scroll-item .item .txt{ padding: 25px; }
	#esg .right .scroll-item .item .txt h5{ font-size: 2.3rem; padding-bottom: 10px; }
	#esg .right .scroll-item .item .txt p{ font-size: 1.7rem; margin-bottom: 30px; }
	#esg .right .scroll-item .item .txt span{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#esg .left{ width: 450px; padding-top: 0; }
	#esg .title-box{ top: calc(var(--headerH) + 60px); }

	#esg .scroll-content{ overflow-y: visible; clip-path: unset; }
	#esg .right{ max-width: 100%; width: calc(100% - 450px); padding-top: 0; }
	#esg .right .scroll-item{ padding: 150px 0 0; gap: 40px 30px; }
	#esg .right .scroll-item .item{ width: calc((100% - 30px) / 2); }
	#esg .right .scroll-item .item:nth-of-type(even){ top: -150px; }
}

@media screen and (max-width: 1100px){
	#esg br{ display: none; }
	#esg .left{ width: 400px; }
	#esg .right{ width: calc(100% - 400px); }
}

@media screen and (max-width: 950px){
	#esg .scroll-wrap{ display: block; }
	#esg .left{ width: 100%; }

	#esg .right{ width: 100%; margin-top: 30px; }
	#esg .right .scroll-item{ display: block; padding: 0; }
	#esg .right .scroll-item .slick-list{ margin-right: -20px; }
	#esg .right .scroll-item .item{ max-width: auto; width: 300px; margin-right: 20px; }
	#esg .right .scroll-item .item:nth-of-type(even){ top: 0; }

	#esg .right .slide-box{ display: flex; }
}


/* future */
#future .title-box{ text-align: center; margin-bottom: 90px; }
#future .flex-box{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#future .box{ width: calc((100% - 30px) / 2); border-radius: 20px; overflow: hidden; position: relative; z-index: 10; }
#future .box figure{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
#future .box figure::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s; }
#future .box figure img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 0.5s; }
#future .box .txt{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 60px; }
#future .box .txt h5{ font-family: var(--engFont); font-size: 3.6rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
#future .box .txt h5::after{ content: url("/img/main/future_arrow.svg"); display: inline-block; margin-left: 35px; transform: translateY(-4px); }
#future .box .txt p{ font-size: 1.8rem; font-weight: 400; color: #fff; letter-spacing: -0.02em; margin-top: 20px; }
#future .box .txt .icon{ margin-top: -30px; text-align: right; }
#future .box a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }

@media screen and (hover: hover){
	#future .box:hover figure::after{ opacity: 1; }
	#future .box:hover figure img{ transform: scale(1.05); }
}

@media screen and (max-width: 1700px){
	#future .title-box{ margin-bottom: 50px; }

	#future .box .txt{ padding: 40px; }
	#future .box .txt h5{ font-size: 3rem; }
	#future .box .txt h5::after{ transform: translateY(0); margin-left: 20px; }
}

@media screen and (max-width: 1280px){
	#future .title-box{ margin-bottom: 30px; }

	#future .box .txt{ padding: 30px; }
	#future .box .txt h5{ font-size: 2.6rem; }
	#future .box .txt h5::after{ transform: scale(0.6) translateY(1px); transform-origin: left; margin-left: 10px; }
	#future .box .txt p{ font-size: 1.7rem; margin-top: 10px; }
}

@media screen and (max-width: 900px){
	#future .box{ width: 100%; }
	#future .box:not(:last-of-type){ margin-bottom: 15px; }
	#future .box .txt h5{ font-size: 2.2rem; }
}