/* fp-nav */
#fp-nav{ left: calc((((100vw - 1600px) / 2) / 2)); transition: opacity 0.5s; pointer-events: none; }
#fp-nav ul, .fp-slidesNav ul{ width: max-content; display: flex; flex-direction: column; align-items: center; }  
#fp-nav ul li, .fp-slidesNav ul li{ width: 6px; height: 6px; margin: 0; pointer-events: auto; }
#fp-nav ul li:first-of-type, .fp-slidesNav ul li:first-of-type, #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: 20px; }
#fp-nav ul li a span, .fp-slidesNav ul li a span{ width: 6px; height: 6px; background: rgba(255, 255, 255, 0.4); margin: 0; top: 0; left: 0; transition: background 0.5s; }
#fp-nav ul li a span::before, .fp-slidesNav ul li a span::before{ content: ""; width: 20px; height: 20px; border: 1px solid #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.5s; }

#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{ width: 6px; height: 6px; background: rgba(255, 255, 255, 0.4); margin: 0; top: 0; left: 0; }
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{ width: 6px; height: 6px; margin: 0; }

#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span{ background: #fff; }
#fp-nav ul li a.active span::before, .fp-slidesNav ul li a.active span::before{ transform: translate(-50%, -50%) scale(1); }

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

@media screen and (max-width: 1700px){
	#fp-nav{ left: 25px; }
	.w1600{ padding-left: 55px !important; }
}

@media screen and (max-width: 1200px){
	.w1600{ padding-left: 20px !important; }
}

/* common */
#main{ color: #fff; overflow: hidden; }
#main .padding-top{ padding-top: 70px; }

.title-box span{ display: inline-block; font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; }
.title-box h5{ font-size: 4.6rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 20px; }

.viewmore{ display: flex; justify-content: center; align-items: center; width: 148px; height: 60px; border: 1px solid #fff; font-family: var(--Lora); font-size: 1.8rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; text-align: center; position: relative; z-index: 5; overflow: hidden; transition: color 0.8s; transition-delay: 0.2s; }
.viewmore::after{ content: ""; width: 200%; padding-bottom: 200%; background: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%) scale(0); display: flex; justify-content: center; align-items: center; transition: transform 0.8s; }
.viewmore:visited, .viewmore:link{ color: #fff; }

@media (hover: hover){
	.viewmore:hover{ color: var(--mainColor); transition-delay: unset; }
	.viewmore:hover::after{ transform: translate(-50%, -50%) scale(1); }  
}

@media screen and (max-height: 800px){
	.section:not(#visual, :last-of-type){ padding-top: 100px; padding-bottom: 100px; }
}

@media screen and (max-width: 1600px){
	.title-box h5{ font-size: 3.8rem; }
}

@media screen and (max-width: 1250px){
	.viewmore{ width: 120px; height: 50px; font-size: 1.6rem; }

	.title-box span{ font-size: 1.8rem; }
	.title-box h5{ font-size: 3rem; margin-top: 10px; }
}

@media screen and (max-width: 1200px){
	#main .padding-top{ padding-top: 0; }
	.section:not(#visual, :last-of-type){ padding-top: 100px; padding-bottom: 100px; }
}


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

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

#visual .text-box{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; }
#visual .text-box p.eng{ font-family: var(--Lora); font-size: 2.4rem; font-weight: 400; animation: text-down 1s both; }
#visual .text-box h2{ font-family: var(--Nanum); font-size: 8rem; font-weight: 700; letter-spacing: -0.02em; margin: 30px 0; }
#visual .text-box h2 span{ display: inline-block; will-change: filter, opacity; animation: blur-text 1.5s 0.5s both; }
#visual .text-box p:not(.eng){ font-size: 2rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.7; animation: text-up 1s both; }

#visual .text-box.animated p.eng{ animation: text-down 1s both; }
#visual .text-box.animated h2 span{ animation: blur-text 1.5s 0.5s both; }
#visual .text-box.animated p:not(.eng){ animation: text-up 1s both; }

@keyframes blur-text{
	0%{ filter: blur(20px); opacity: 0; }
	100%{ filter: blur(0); opacity: 1; }
}

@keyframes text-down{
	0%{ transform: translateY(-100%); opacity: 0; }
	100%{ transform: translateY(0); opacity: 1; }
}

@keyframes text-up{
	0%{ transform: translateY(100%); opacity: 0; }
	100%{ transform: translateY(0); opacity: 1; }
}

#visual .scroll-down{ position: absolute; bottom: 50px; left: 0; right: 0; text-align: center; }
#visual .scroll-down .arrow{ display: inline-block; transform: translateY(0); animation: scroll-down 1.5s ease infinite; }

@keyframes scroll-down{
	0%{ transform: translateY(-15px); opacity: 0; }
    50%{ transform: translateY(0px); opacity: 1; }
    100%{ transform: translateY(15px); opacity: 0; }
}

@media screen and (max-width: 1600px){
	#visual .text-box p.eng{ font-size: 2.2rem; }
	#visual .text-box h2{ font-size: 6rem; }
}

@media screen and (max-width: 1250px){
	#visual .text-box p.eng{ font-size: 2rem; }
	#visual .text-box h2{ font-size: 5rem; }
	#visual .text-box p:not(.eng){ font-size: 1.8rem; }
}

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


/* amounts */
#amounts{ background: #20312A; position: relative; z-index: 10; }
#amounts::before{ content: ""; width: 50vw; height: 100%; background: url("/img/main/amounts_bg.jpg") no-repeat center center / cover; position: absolute; top: 50%; left: 0; z-index: -1; transform: translateY(-50%); }
#amounts .flex-box{ display: flex; align-items: center; }
#amounts .flex-box .half{ width: 50%; }
#amounts .flex-box .half.left{ padding-right: 150px; }
#amounts .flex-box .half.right{ padding-left: 150px; }

#amounts .left h3{ font-size: 6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3333; margin-bottom: 30px; }
#amounts .left p{ font-size: 1.8rem; font-weight: 200; letter-spacing: -0.02em; line-height: 1.6666; margin-top: 10px; }
#amounts .left p strong{ font-size: 2.2rem; font-weight: 400; line-height: 1.3; }
#amounts .left a{ margin-top: 80px; }

#amounts .right h6{ font-size: 2.4rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.5; margin-top: 40px; }
#amounts .right h6 strong{ font-weight: 500; }
#amounts .right .counter{ font-size: 2.2rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.5454; margin: 50px 0; position: relative; }
#amounts .right .counter::before{ content: attr(data-count); font-family: var(--Nanum); font-size: 9rem; font-weight: 400; opacity: 0; }
#amounts .right .counter span{ font-family: var(--Nanum); font-size: 9rem; font-weight: 400; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#amounts .right p{ font-size: 1.8rem; font-weight: 200; letter-spacing: -0.02em; }

@media screen and (max-width: 1700px){
	#amounts .flex-box .half{ width: calc((100% - 55px) / 2); }
	#amounts .flex-box .half.left{ padding-right: 100px; }
	#amounts .flex-box .half.right{ padding-left: 100px; }
}

@media screen and (max-width: 1600px){
	#amounts .left h3{ font-size: 5rem; }
	#amounts .left p strong{ font-size: 2rem; }

	#amounts .right h6{ font-size: 2.2rem; }
	#amounts .right .counter span, #amounts .right .counter::before{ font-size: 7rem; }
}

@media screen and (max-width: 1350px){
	#amounts .right .counter span, #amounts .right .counter::before{ font-size: 6rem; }
}

@media screen and (max-width: 1250px){
	#amounts .flex-box .half.left{ padding-right: 70px; }
	#amounts .flex-box .half.right{ padding-left: 70px; }

	#amounts .left h3{ font-size: 4rem; }
	#amounts .left p{ font-size: 1.7rem; } 
	#amounts .left p strong{ font-size: 1.9rem; }
	#amounts .left a{ margin-top: 50px; }

	#amounts .right h6{ font-size: 2rem; }
	#amounts .right .counter{ margin: 30px 0; }
	#amounts .right .counter span, #amounts .right .counter::before{ font-size: 5rem; }
}

@media screen and (max-width: 1200px){
	#amounts.section{ padding: 150px 0; }
	#amounts .flex-box .half{ width: 50%; }
}

@media screen and (max-width: 1015px){	
	#amounts.section{ padding: 0; }
	#amounts::before{ display: none; }
	#amounts .flex-box{ flex-direction: column; }
	#amounts .flex-box .half{ width: 100%; }
	#amounts .flex-box .half.left{ padding: 100px 0; position: relative; }
	#amounts .flex-box .half.left::before{ content: ""; width: calc(100% + 40px); height: 100%; background: url("/img/main/amounts_bg.jpg") no-repeat center center / cover; position: absolute; top: 50%; left: -20px; transform: translateY(-50%); }
	#amounts .flex-box .half.right{ padding: 100px 0; }
}

@media screen and (max-width: 900px){
	#amounts .left h3{ font-size: 3.5rem; }
	#amounts .left p{ font-size: 1.6rem; } 
	#amounts .left p strong{ font-size: 1.8rem; }

	#amounts .right h6{ font-size: 1.8rem; }
	#amounts .right .counter span, #amounts .right .counter::before{ font-size: 4rem; }
	#amounts .right p{ font-size: 1.6rem; }
}


/* lawyer */
#lawyer{ background: #4D5954 url("/img/main/lawyer_bg.svg") no-repeat bottom left / auto; background-position: 50% auto; position: relative; }
#lawyer .half{ display: flex; flex-direction: column; justify-content: space-between; width: 50%; min-height: 65.53vh; padding-right: 100px; } 
/* #lawyer .tab-content .tab{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1s; pointer-events: none; } */
#lawyer .tab-content .tab:not(.active){ display: none; }
/* #lawyer .tab-content .tab.active{ position: static; transform: unset; opacity: 1; pointer-events: auto; } */

#lawyer .tab-menu{ display: flex; justify-content: space-between; }
#lawyer .tab-menu ul li{ cursor: pointer; }
#lawyer .text-box h4{ font-family: var(--Lora); font-size: 3.6rem; font-weight: 400; }
#lawyer .text-box ul li{ font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; opacity: 0.6; margin-top: 20px; overflow: hidden; transition: opacity 0.5s; }
#lawyer .text-box ul li::before{ content: url("/img/main/lawyer_arrow.svg"); margin-right: 10px; margin-left: -30px; transition: margin 0.5s; }

#lawyer .text-box ul li.on{ opacity: 1; }
#lawyer .text-box ul li.on::before{ margin-left: 0; }

#lawyer .image-box{ width: 360px; position: relative; }
#lawyer .image-box .tab{ width: 100%; }
#lawyer .image-box ul{ display: flex; flex-wrap: wrap; margin-bottom: -30px; }
#lawyer .image-box ul li{ width: calc((100% - 60px) / 3); margin-right: 30px; margin-bottom: 30px; }
#lawyer .image-box ul li:nth-of-type(3n){ margin-right: 0; }
#lawyer .image-box ul li figure{ width: 100%; padding-bottom: 100%; border-radius: 50%; overflow: hidden; position: relative; }
#lawyer .image-box ul li figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: grayscale(1); transition: filter 0.5s; }

#lawyer .image-box ul li.on figure img{ filter: grayscale(0); }

#lawyer .slick-slide{ outline: none; }
#lawyer .figure-wrap{ width: 50vw; height: calc(100% + 1px); right: 0; position: absolute; top: calc(50% - 1px); right: 0; transform: translateY(-50%); opacity: 1 !important; }
#lawyer .figure-wrap::after{ content: ""; width: 100%; height: 100%; background: #D9D9D9; /* background: #4D5954; */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: right; opacity: 1; transition: all 2s; }
#lawyer .figure-wrap.aos-animate::after{ transform: translate(-50%, -50%) 
scaleX(0); opacity: 0; }

#lawyer .figure-wrap .slick-list, #lawyer .figure-wrap .slick-track, #lawyer .figure{ height: 100%; }
/* #lawyer .figure{ width: 50vw !important; } */
#lawyer .figure figure{ width: 100%; height: 100%; position: relative; overflow: hidden; }
#lawyer .figure figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }

#lawyer .txt-wrap{ margin-top: 100px; }
#lawyer .txt p{ font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.8; }
#lawyer .txt h2{ font-size: 8rem; font-weight: 300; letter-spacing: -0.02em; padding: 10px 0 60px; }
#lawyer .txt h2 strong{ font-weight: 600; }

@media (hover: hover){
	#lawyer .text-box ul li:hover{ opacity: 1; }
	#lawyer .text-box ul li:hover::before{ margin-left: 0; }

	#lawyer .image-box ul li:hover figure img{ filter: grayscale(0); }
}

@media screen and (max-width: 1600px){
	#lawyer .text-box h4{ font-size: 3.2rem; }
	#lawyer .txt h2{ font-size: 6rem; padding: 10px 0 40px; }
}

@media screen and (max-width: 1450px){
	#lawyer .image-box{ width: 300px; }
	#lawyer .image-box ul{ margin-bottom: 0; }
	#lawyer .image-box ul li{ width: calc((100% - 30px) / 3); margin-right: 15px; margin-bottom: 15px; }
}

@media screen and (max-width: 1250px){
	#lawyer .text-box h4{ font-size: 2.8rem; }
	#lawyer .txt p{ font-size: 1.8rem; }
	#lawyer .txt h2{ font-size: 5rem; }
}

@media screen and (max-width: 1200px){
	#lawyer .half{ padding-right: 20px; }

	#lawyer .figure-wrap{ right: -17px; }
	#lawyer .figure{ height: 100% !important; }
}

@media screen and (max-width: 1100px){
	#lawyer .tab-menu{ flex-direction: column; }
	#lawyer .text-box{ margin-bottom: 30px; }
	#lawyer .txt-wrap{ margin-top: 40px; }
}

@media screen and (max-width: 1015px){	
	#lawyer .half{ width: 100%; padding-right: 0; }
	#lawyer .figure-wrap{ width: 100vw; position: relative; top: 0; right: 20px; transform: translate(0); }
	#lawyer .figure-wrap .slick-list, #lawyer .figure-wrap .slick-track, #lawyer .figure{ height: auto !important; }
	#lawyer .figure figure{ padding-bottom: 98%; margin-bottom: -4px; }
}

@media screen and (max-width: 900px){
	#lawyer .txt h2{ font-size: 4rem; padding: 5px 0 30px; }
	#lawyer .txt p{ font-size: 1.7rem; }
}


/* example */
#example{ background: url("/img/main/example_bg.jpg") no-repeat center center / cover; position: relative; z-index: 5; }
#example::before{ content: ""; background: url("/img/main/why_taesan.svg") no-repeat bottom left / auto; background-position: 50% auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
#example .title-box{ margin-bottom: 80px; }

#example .example-wrap{ width: calc(100% + ((100vw - 100%) / 2)); }
#example .example-wrap .slick-track{ margin: 0; }
#example .example-wrap .slick-list{ margin-right: -60px; }
#example .example { width: calc((1600px - 180px) / 4); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); margin-right: 60px; padding: 40px; position: relative; z-index: 5; overflow: hidden; }
#example .example-wrap .example:nth-of-type(even){ margin-top: 40px; }
#example .example:not(.last)::before{ content: ""; width: 180%; padding-bottom: 180%; background: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%) scale(0); transform-origin: top left; transition: transform 0.8s; }
#example .example *{ letter-spacing: -0.02em; transition: all 0.5s; }
#example .example .story{ padding: 10px 0 20px; border-bottom: 1px solid rgba(221, 221, 221, 0.1); }
#example .example .story .category{ font-size: 1.8rem; font-weight: 300; border-bottom: 1px solid #fff; transition-delay: 0.2s; }
#example .example .story dl dt{ font-size: 2.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 25px 0 30px; }
#example .example .story dl dd{ font-size: 1.6rem; font-weight: 300; color: #ddd; line-height: 1.625; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 10px; }
#example .example .story p{ font-size: 1.6rem; font-weight: 500; color: #ddd; line-height: 1.75; text-align: right; }

#example .example .person{ display: flex; padding-top: 20px; }
#example .example .person figure{ width: 60px; padding-bottom: 60px; border-radius: 50%; overflow: hidden; position: relative; }
#example .example .person figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#example .example .person p{ width: calc(100% - 60px); display: flex; align-items: center; font-size: 1.4rem; font-weight: 300; padding-left: 20px; }
#example .example .person p strong{ font-size: 1.8rem; font-weight: 600; padding-left: 10px; }

#example .example a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }
#example .last{ background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-bottom: 0.95946%; margin-top: 0 !important; outline: none; }
#example .last .circle{ width: 56.339%; padding-bottom: calc(56.339% - 2px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; overflow: hidden; }
#example .last .circle img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#example .last .circle::before, #example .last .circle::after{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#example .last .circle::before{ content: ""; width: calc(100% + 2px); height: calc(100% + 2px); background: #fff; transform: translate(-50%, -50%) scale(0); border-radius: 50%; transition: transform 0.5s; }
#example .last .circle::after{ content: "View More"; font-family: var(--Lora); font-size: 1.8rem; font-weight: 400; color: var(--mainColor); white-space: nowrap; opacity: 0; transition: opacity 0.5s; transition-delay: 0.1s; }

#example .example-wrap .slick-dots{ display: flex; justify-content: center; margin-top: 30px; }
#example .example-wrap .slick-dots li{ width: 10px; height: 10px; background: #AAA; border-radius: 50%; transition: background 0.5s; }
#example .example-wrap .slick-dots li:not(:last-of-type){ margin-right: 20px; }
#example .example-wrap .slick-dots li.slick-active{ background: #fff; }
#example .example-wrap .slick-dots li button{ display: none; }

@media (hover: hover){
	#example .example:not(.last):hover::before{ transform: translate(-50%, -50%) scale(1); }
	#example .example:hover .story{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
	#example .example:hover .story .category, #example .example:hover .story dl dt{ color: var(--mainColor); }
	#example .example:hover .story dl dd, #example .example:hover .person p strong{ color: #333; }
	#example .example:hover .story .category{ border-bottom: 1px solid var(--mainColor); }
	#example .example:hover .story p{ color: #666; }
	#example .example:hover .person p{ color: #555; }
	#example .example:hover .person p strong{ transition-delay: 0.3s; }

	#example .last .circle:hover::before{  transform: translate(-50%, -50%) scale(1); }
	#example .last .circle:hover::after{ opacity: 1; }
}

@media screen and (max-width: 1640px){
	#example .example-wrap{ width: calc(100% + 20px); } 
}

@media screen and (max-width: 1600px){
	#example .title-box{ margin-bottom: 60px; }

	#example .example .story dl dt{ font-size: 2.5rem; margin: 20px 0; }
}

@media screen and (max-width: 1300px){
	#example .example-wrap .slick-list{ margin-right: -30px; }
	#example .example{ width: calc((100vw - 20px) / 4); padding: 25px 35px 30px; margin-right: 30px; }
	#example .example .story{ padding: 10px 0; }
	#example .example .person{ padding-top: 10px; }
	#example .last{ padding-bottom: 0.935%; }
	#example .last .circle::after{ font-size: 1.7rem; }
}

@media screen and (max-width: 1250px){
	#example .example .story .category{ font-size: 1.7rem; }
	#example .example .story dl dt{ font-size: 2.2rem; }

	#example .example .person p strong{ font-size: 1.7rem; }
	#example .last .circle::after{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#example .example{ width: calc((100vw - 20px) / 3); }
}

@media screen and (max-width: 900px){
	#example .example{ padding: 17px 25px; }
	#example .example .story .category{ font-size: 1.6rem; }
	#example .example .story dl dt{ font-size: 2rem; }
	#example .example .story dl dd{ font-size: 1.5rem; }
	#example .example .story p{ font-size: 1.5rem; }

	#example .example .person p strong{ font-size: 1.6rem; }
	#example .last{ padding-bottom: 0.92%; }
}

@media screen and (max-width: 800px){
	#example .example{ width: calc((100vw - 20px) / 2); }
}

@media screen and (max-width: 600px){
	#example .example{ width: 270px; }
}


/* media */
#media{ background: #18201D url("/img/main/media_bg.svg") no-repeat center center / auto; }
#media .title-box a{ margin-top: 40px; }
#media .flex-box{ display: flex; flex-wrap: wrap; gap: 20px; }
#media .flex-box > div{ width: calc((100% - 60px) / 4); position: relative; z-index: 10; overflow: hidden; }
#media .flex-box > div:not(.tit){ padding-bottom: 20%; }
#media .flex-box > div .text{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#media .flex-box .tit{ width: calc((100% - 20px) / 2); }

#media .text{ padding: 30px; }

#media .box .text > div{ opacity: 0; transition: all 0.6s; }
#media .box .text .category{ display: inline-block; font-size: 1.8rem; font-weight: 300; letter-spacing: -0.02em; border-bottom: 1px solid #fff; }
#media .box .text h6{ font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 35px; }
#media .box .text .arrow{ margin-top: 115px; text-align: right; }
#media .box .text .arrow img{ position: relative; left: -20px; transition: left 0.5s; }
#media .box .bg{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -5; }
#media .box .bg::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute;  top: 50%; left: 50%; z-index: 5; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.8s; }
#media .box .bg img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: grayscale(0); transition: filter 0.8s, transform 0.8s; overflow: hidden; }
#media .box a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 15; }

#media .border{ border: 1px solid rgba(255, 255, 255, 0.1); }
#media .border .text{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#media .border h5{ font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.5384; text-align: center; }
#media .border .commas{ position: relative; }
#media .border .commas::before{ content: url("/img/main/media_commas.svg"); position: absolute; top: -35px; left: -20px; }

@media (hover: hover){
	#media .box:hover .bg::after{ opacity: 1; }
	#media .box:hover .text > div{ opacity: 1; }
	#media .box:hover .text .arrow img{ left: 0; } 
	#media .box:hover .bg img{ filter: grayscale(1); transform: translate(-50%, -50%) scale(1.1); }
}

@media screen and (max-width: 1600px){
	#media .border h5{ font-size: 2.2rem; }
	#media .box .text .arrow{ margin-top: 28%; }
}

@media screen and (max-width: 1400px){
	#media .box .text h6{ margin-top: 20px; }
}

@media screen and (max-width: 1250px){
	#media .box .text .category{ font-size: 1.6rem; }
	#media .box .text h6{ font-size: 1.8rem; }

	#media .border h5{ font-size: 2rem; }
}

@media screen and (max-width: 1200px){
	#media .text{ padding: 20px; }
	#media .flex-box > div{ width: calc((100% - 40px) / 3); }
	#media .flex-box > div:not(.tit){ padding-bottom: 26%; }
	#media .flex-box .tit{ width: 100% !important; margin-bottom: 30px; }
}

@media screen and (max-width: 900px){
	#media .box .text .category{ font-size: 1.5rem; }
	#media .box .text h6{ font-size: 1.6rem; }

	#media .border h5{ font-size: 1.8rem; }
}

@media screen and (max-width: 800px){
	#media .flex-box > div{ width: calc((100% - 20px) / 2); }
	#media .flex-box > div:not(.tit){ padding-bottom: 40%; }
}

@media screen and (max-width: 650px){
	#media .box .text .arrow{ margin-top: 30px; }
}