.main-visual { position: relative; height: 100vh; overflow: hidden;} 
.main-visual .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("/asset/image/bg/sign-up.png") no-repeat center center / cover; overflow: hidden; animation: zoom 10s infinite alternate;} .main-visual .dim { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; z-index: 9; } 
.main-visual .txt-wrap { position: absolute; top: 50%; left: 100px; transform: translateY(-50%); z-index: 10; } 
.main-visual .txt-wrap h2 { font-size: 80px; font-weight: 400; line-height: 96px; text-align: left; color: #FFFFFF; } 
.main-visual .txt-wrap h2 span { font-weight: 800; color: #FFFFFF; } 

.cont-wrap {max-width: 1720px; margin: 0 auto; padding: 200px 20px; }  
.cont-wrap > h2 { font-size: 90px; font-weight: 800; line-height: 117px; text-align: center; margin-bottom: 50px; } 
.cont-wrap > p { font-size: 30px; font-weight: 400; line-height: 45px; text-align: center; margin-bottom: 100px; } 
.cont-wrap ul { display: flex; gap: 20px; justify-content: center; } 
.cont-wrap ul li { } 
.cont-wrap ul li .img-wrap { position: relative; width: 560px; height: 500px; overflow: hidden; } 
.cont-wrap ul li .img-wrap .dim { width: 100%; height: 100%; background: rgba(0,0,0,0.1); position: absolute; top: 0; left: 0; z-index: 9; } 
.cont-wrap ul li .img-wrap img { height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all 0.3s; } 
.cont-wrap ul li .img-wrap:hover img {transform: translate(-50%,-50%) scale(1.2); transition: all 0.3s; }
.cont-wrap ul li .txt-wrap { width: 560px; padding: 40px 30px; background: url("/asset/image/content/sign-up/sign_up_text_bg.png") no-repeat center center / cover, #3F75DE; } 
.cont-wrap ul li .txt-wrap span { display: block; font-size: 20px; font-weight: 400; line-height: 30px; text-align: center; color: #FFFFFF; } 
.cont-wrap ul li .txt-wrap h5 { font-size: 42px; font-weight: 800; line-height: 54.6px; text-align: center; color: #FFFFFF; margin: 5px auto 30px; } 
.cont-wrap ul li .txt-wrap a { width: 308px; height: 89px; margin: 0 auto; display: flex; gap: 43.5px; align-items: center; justify-content: center; background: #FFFFFF; transition: all 0.3s; } 
.cont-wrap ul li .txt-wrap a span { display: block; font-size: 26px; font-weight: 800; line-height: 1; text-align: center; color: #000000; transition: all 0.3s; } 
.cont-wrap ul li .txt-wrap a img { } 
.cont-wrap ul li .txt-wrap a img.ico-next-bk { display: inline-block; transition: all 0.3s; } 
.cont-wrap ul li .txt-wrap a img.ico-next { display: none; transition: all 0.3s; } 
.cont-wrap ul li .txt-wrap a:hover { background: #0046FF; } 
.cont-wrap ul li .txt-wrap a:hover span { color: #FFFFFF; } 
.cont-wrap ul li .txt-wrap a:hover img.ico-next-bk { display: none; } 
.cont-wrap ul li .txt-wrap a:hover img.ico-next { display: inline-block; } 

@media screen and (max-width:1720px){
 .cont-wrap ul li { width: calc(33.3% - 10px) } 
 .cont-wrap ul li .img-wrap,
 .cont-wrap ul li .txt-wrap { width: 100%; } 
 .cont-wrap ul li .img-wrap { aspect-ratio: 1.2 / 1; height: auto; } 
 .cont-wrap ul li .txt-wrap { } 
 }
@media screen and (max-width:1440px){
 .cont-wrap ul li .img-wrap img { width: 100%; } 
 }
@media screen and (max-width:1125px){
 .main-visual .txt-wrap { left: 20px; } 
 .cont-wrap { padding: 80px 20px; } 
 .cont-wrap > h2 { font-size: 38px; font-weight: 800; line-height: 49.4px; text-align: center; margin-bottom:20px; } 
 .cont-wrap > p { font-size: 18px; font-weight: 400; line-height: 27px; text-align: center; margin-bottom:50px; } 
 .cont-wrap ul { flex-direction: column; } 
 .cont-wrap ul li { width: 100%; } 
 .cont-wrap ul li .img-wrap img { width: 100%; height: 100%; } 
 .cont-wrap ul li .txt-wrap a img.ico-next-bk,
 .cont-wrap ul li .txt-wrap a img.ico-next {height: 16px;}
 }
@media screen and (max-width:768px){
 .main-visual .txt-wrap h2 { font-size: 38px; font-weight: 400; line-height: 49.4px; text-align: left; } 
 .main-visual .txt-wrap span { font-size: 38px; font-weight: 800; line-height: 49.4px; text-align: left; } 
 .cont-wrap ul li .txt-wrap span { font-size: 14px; font-weight: 400; line-height: 19.6px; text-align: center; } 
 .cont-wrap ul li .txt-wrap h5 { font-size: 24px; font-weight: 800; line-height: 31.2px; text-align: center; } 

 .cont-wrap ul li .txt-wrap a { width: 200px; height: 60px; gap: 20px; } 
 .cont-wrap ul li .txt-wrap a span { font-size: 18px; font-weight: 700; line-height: 1; text-align: center; } 
 }