#visual {height:100vh;position:relative;display:flex;justify-content:center;align-items:center;}
#visual h2 {color: #FFF; text-align: center; text-shadow: 0 10px 10px rgba(0, 0, 0, 0.50); font-size: 3rem; font-style: normal; font-weight: 700; line-height: 3.5rem;position:relative;z-index:2;opacity: 0;transform: translateY(50px); transition: all 0.8s ease-in-out; }
#visual video {position:absolute;left:0;top:0;width:100%;height:100%;    object-fit: cover;}
#visual.active h2 {opacity: 1;transform: translateY(0);}

#visual .scrollDown{position:absolute;z-index:1;display:flex;align-items: center;font-size: 14px;bottom:1.7rem;color:#fff;gap:12px;}
#visual .scrollDown i{display: block; animation: s1Arrow forwards infinite 1.5s linear;}
#visual .scrollDown i:nth-child(2){margin: -.5em 0;}
#visual .scrollDown i:nth-child(2){animation-delay: .1s;}
#visual .scrollDown i:nth-child(3){animation-delay: .2s;}
@keyframes s1Arrow {
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

#visual .scrollDown .font03{font-family:'Libre Baskerville';font-style: italic;}
#visual .video-bg {position:absolute;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.35);z-index:1;}


/*공통*/
#wrap {background:#13132E;}
.inner {width:1600px;margin:0 auto;}
.tit-zone p{color:#A8B2FF; text-align: center; font-size: 0.8rem; font-style: normal; font-weight: 700; line-height: 0.9rem; /* 112.5% */ letter-spacing: 0.12rem;opacity: 0;transform: translateY(50px);transition: all 0.8s ease-in-out;}
.tit-zone h3{color: #FFF; text-align: center; font-size: 2.65rem; font-style: normal; font-weight: 600; line-height: 3.25rem;margin-top:1.5rem;opacity: 0;transform: translateY(50px);transition: all 0.8s ease-in-out;transition-delay: 0.6s;}
.tit-zone h3 em {color: #7B3DEA;transition: all 1.0s;
    transition-delay: 1.0s;
    background: linear-gradient(90deg, #7B3DEA, #7B3DEA 50%, rgba(255, 255, 255, 0.2) 0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;}

.active .tit-zone h3 {opacity: 1; transform: translateY(0);}
.active .tit-zone p {opacity: 1; transform: translateY(0);}
.active .tit-zone h3 em {background-position: 0% !important;}


@media (max-width:1600px){
	#visual h2{padding:0 1rem;}
	.inner{padding:0 1rem;width:100%;}
}
@media (max-width:1030px){
	#visual h2 {font-size:2rem;line-height:2.8rem;}
	.tit-zone h3{font-size:1.75rem;line-height:2.2rem;}

}

/*ctn01*/
.ctn01 {padding-top:10rem;}
.card-wrap {margin-top:4rem;display:flex;gap:2rem;}
.card {width:calc((100% - (2rem * 3)) / 4);min-height:30rem;position:relative;opacity: 0;transform: translateY(50px);transition: all 0.8s ease-in-out;transition-delay: 0.8s}
.active .card {opacity: 1; transform: translateY(0);}


.card .card-con { position: absolute; width: 100%; height: 100%; box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s; transform-style: preserve-3d;}
.card:hover .card-con { transform: rotateY( -180deg ) ; transition: transform 0.7s; }

.card-front { position: absolute; height: 100%; width: 100%; background:url(/images/default/main/card-bg.png)no-repeat center center;background-size:cover;   border-radius: 1rem; backface-visibility: hidden; padding:2rem}

.card-back {position: absolute; height: 100%; width: 100%; background:url(/images/default/main/card-bg.png)no-repeat center center;background-size:cover;   border-radius: 1rem; backface-visibility: hidden; padding:2rem}

.card .card-con p.num {color: #FFF; font-size: 0.9rem; font-style: normal; font-weight: 700; line-height: 1.15rem;}
.card .card-con strong {color: #FFF;font-size: 1.4rem; font-style: normal; font-weight: 700; line-height: 1.15rem; margin:2.5rem 0 1rem 0;display:block;}
.card .card-con p.stxt{font-size:0.8rem;line-height:1.15rem;color:#A8B2FF;}
.card .card-con p.txt {color:#F2F2F2;
font-size: 0.9rem; font-style: normal; font-weight: 400; line-height: 1.4rem;opacity: 0.7;margin-top:2.5rem;}
.card .card-con img {display:block;margin-left:auto;margin-top:4.5rem;}
.card-back {
  background: url(/images/default/main/card-bg-on.png)no-repeat  center center;
  color: white;
  transform: rotateY( 180deg );    background-size: cover;
}
.card-back p.stxt{color:#fff !important;}

.active .card:nth-child(even) {transform:translateY(4.5rem);}

@media (max-width:1600px){
	.card .card-con p.txt{margin-top:1.5rem;}
	.card:nth-child(2) .card-con strong{line-height:1.2;}
	.card .card-con strong{margin:1.5rem 0 1rem 0;}
	.card .card-con img{margin-top:2.5rem;}

}

@media (max-width:1400px){
	.ctn01 {padding-top:8rem;}
	.card:nth-child(4) .card-con strong{line-height:1.2;}
	.card .card-con img{width:6.55rem;}
	.card .card-con strong{font-size:1.2rem;margin:1rem 0;}
	.card .card-con p.txt{font-size:0.8rem;}
	.card-front{padding:1rem;}
	.card{min-height:25rem;}
	.card-back{padding:1rem;}
	.card .card-con img{margin-top:1.5rem;}

}

@media (max-width:1300px){
	.card .card-con img{width:4rem;}
}
@media (max-width:1030px){
	.card-wrap{flex-wrap:wrap;}
	.card {    width: calc((100% - (2rem * 1)) / 2);min-height:19rem;border:1px solid rgba(242, 242, 242, 0.2);border-radius:1rem;}
	.card:nth-child(even){    transform: translateY(0) !important;}
		.ctn01{padding-top:5rem;}
		.card-front{    background: var(--4, linear-gradient(151deg, #262652 1.16%, #13132E 52.45%, #13132E 78.84%, #262652 103.1%));}
		.active .card:nth-child(even) {transform:translateY(0);}
}
@media (max-width:650px){
	.card-wrap{gap:1rem;}
	.card { width: 100%;}
}
@media (max-width:500px){
	
}




/*ctn02*/ 

.ctn02 {padding-top:12.5rem;}
.ctn02 .news-con {margin-top:4rem;}
.ctn02 .news-con .news-top{ opacity: 0; transform: translateY(50px); transition: all 0.8s ease-in-out 1s; }
.ctn02.active .news-con .news-top  {opacity: 1; transform: translateY(0);}

.ctn02 .news-con .news-top ul {border-top:2px solid #F2F2F2}
.ctn02 .news-con .news-top ul > li > a{display:flex;justify-content:space-between;padding:1.5rem 0;gap:1.5rem;}
.ctn02 .news-con .news-top ul > li > a .news-tit{display:flex;align-items: center;}
.ctn02 .news-con .news-top ul > li > a .news-tit .state {width:2.45rem;height:1.2rem;border-radius:0.25rem;display:flex;justify-content: center;align-items: center;margin:0 0.75rem 0 1.5rem}
.ctn02 .news-con .news-top ul > li > a .news-tit .state.state01 {background:#A8B2FF;color:#13132E;font-size:0.7rem;text-align:center;}
.ctn02 .news-con .news-top ul > li > a .news-tit .state.state02 {background:#7B3DEA;color:#fff;font-size:0.7rem;text-align:center;}
.ctn02 .news-con .news-top ul > li > a .news-tit p {color:#fff;font-weight:600;line-height: 1.5rem; font-size:1rem; display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;   word-break: break-word;flex:1;}
.ctn02 .news-con .news-top ul > li {border-bottom:1px solid rgba(242, 242, 242, 0.2);}
.ctn02 .news-con .news-top ul > li > a .date {color:#F2F2F2;  font-size: 0.8rem; font-weight: 400; line-height: 0.9rem;opacity: 0.7;}
.ctn02 .news-con .news-top ul > li > a:hover .news-tit p {    text-decoration: underline; text-decoration : underline;
  text-underline-position : under;}


.ctn02 .news-con .news-bottom {margin-top:2.5rem;}
.ctn02 .news-con .news-bottom ul {display:flex;gap:1.85rem;}
.ctn02 .news-con .news-bottom ul li {width:calc((100% - (1.85rem * 3)) / 4);border-radius:1rem;overflow:hidden;}
.ctn02 .news-con .news-bottom ul li a .img-zone {position:relative;padding-top:66.085%;object-fit:cover;}
.ctn02 .news-con .news-bottom ul li a .img-zone img {position:absolute;width:100%;height:100%;left:0;top:0;object-fit: cover;}
.ctn02 .news-con .news-bottom ul li a .txt-zone {background:url(/images/default/main/txt-bg.png)no-repeat center center;background-size:cover;padding:1.75rem;}
.ctn02 .news-con .news-bottom ul li a .txt-zone p {font-size:1rem;line-height:1.5rem;color:#fff;font-weight:600; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;   word-break: break-word;min-height:4.5rem;}
.ctn02 .news-con .news-bottom ul li a .txt-zone .date-box{margin-top:1.75rem;display:flex;gap:0.5rem;align-items: center;}
.ctn02 .news-con .news-bottom ul li a .txt-zone .state {width:2.45rem;height:1.2rem;border-radius:0.25rem;display:flex;justify-content: center;align-items: center;}
.ctn02 .news-con .news-bottom ul li a .txt-zone .state.state01 {background:#A8B2FF;color:#13132E;font-size:0.7rem;text-align:center;}
.ctn02 .news-con .news-bottom ul li a .txt-zone .state.state02 {background:#7B3DEA;color:#fff;font-size:0.7rem;text-align:center;}
.ctn02 .news-con .news-bottom ul li a .txt-zone .date-box .date {font-size:0.8rem;color:rgba(242,242,242,0.7);line-height:0.9rem;}

.ctn02 .news-con .news-bottom ul li a:hover .txt-zone p {    text-decoration: underline; text-decoration : underline;
  text-underline-position : under;}


  .ctn02 .news-con .news-bottom {opacity: 0;transform: translateY(50px);transition: all 0.8s ease-in-out 1.2s;}
.ctn02.active .news-con .news-bottom  {opacity: 1; transform: translateY(0);}


@media (max-width:1400px){
	.ctn02 {padding-top:8rem;}
}
@media (max-width:1030px){
	.ctn02 {padding-top:5rem;}
	.ctn02 .news-con .news-bottom ul{flex-wrap:wrap;}
	.ctn02 .news-con .news-bottom ul li {    width: calc((100% - (1.85rem * 1)) / 2);}
}
@media (max-width:500px){
	.ctn02 .news-con .news-bottom ul li{width:100%;}
	.ctn02 .news-con .news-bottom ul li a .txt-zone{padding:1rem;}
	.ctn02 .news-con .news-top ul > li > a .news-tit .state{margin-left:0;}
	.ctn02 .news-con .news-top ul > li > a{flex-direction:column;padding:1rem;gap:0.75rem;}
	.ctn02 .news-con{margin-top:2.5rem;}

}


/*ctn03*/ 
.ctn03 {padding-top:10rem;position:relative;}
.ctn03:before{content:'';position:absolute;width:100%;height:67.5rem;bottom:0;left:0;background-size:cover;background:url(/images/default/main/ctn03-bg.png)no-repeat center center;background-size:cover;}
.ctn03 .stxt {font-size:1.15rem;line-height:1.15rem;color:rgba(242,242,242,0.7);font-weight:600;margin-top:1.5rem;text-align:center;opacity: 0;transform: translateY(50px);transition: all 0.8s ease-in-out 0.8s; }
.ctn03.active .stxt {opacity: 1; transform: translateY(0);}

.ctn03 .contact {width:1200px;margin:0 auto;margin-top:4rem;padding:3.5rem 6.9rem;border-radius:1rem;background:url(/images/default/main/contact-bg.png)no-repeat center top;opacity: 0;transform: translateY(50px);transition: all 0.8s ease-in-out 1.2s; }
.ctn03.active  .contact {opacity: 1; transform: translateY(0);}


.ctn03 .contact .items-flex{display:flex;gap:1.15rem;}
.ctn03 .contact .items-flex > div {width:calc((100% - 1.15rem) / 2);}
.ctn03 .contact .items .contact-tit label {font-size:0.9rem;color:#fff;font-weight:600;margin-bottom:0.5rem;display:block;}
.ctn03 .contact .items .contact-tit label span {color:#A8B2FF;}
.ctn03 .contact > div:not(:last-child) {margin-bottom:1.25rem;}
.ctn03 .contact > div input[type="text"] {height:50px;border-radius:8px;background:#fff;font-size:16px;padding:0 1rem;}
.ctn03 .contact > div input[type="text"]::placeholder {color: #999;}
.ctn03 .contact > div input[type="email"] {height:50px;border-radius:8px;background:#fff;font-size:16px;padding:0 1rem;}
.ctn03 .contact > div input[type="email"]::placeholder {color: #999;}

.ctn03 .contact > div textarea {height:6.5rem;border-radius:1rem;}
.ctn03 .contact > div textarea::placeholder {color: #999;}

.ctn03 .contact .agree-box {display:flex;justify-content:space-between;margin-top:1rem;    align-items: center;}
.ctn03 .contact .agree-box input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none;width: 1.25rem; height: 1.25rem; border: 1px solid #ccc; border-radius: 3px; position: relative; vertical-align: middle; margin-right: 10px; cursor: pointer;transition: border-color 0.2s, background-color 0.2s;margin-bottom:0;}
.ctn03 .contact .agree-box input[type="checkbox"]::after {content:'';position:absolute;width:1rem;height:1rem;left:50%;top:50%;transform:translate(-50%,-50%);
background:url(/images/default/main/check.svg)no-repeat center center;background-size:cover; 
}
.ctn03 .contact .agree-box input[type="checkbox"]:checked { border-color: #7B3DEA; background-color: #7B3DEA; }
.ctn03 .contact .agree-box input[type="checkbox"]:checked::after {background:url(/images/default/main/check.svg)no-repeat center center;background-size:cover; }

.ctn03 .contact .agree-box > div > span {color:#fff;font-size:0.8rem;}
.ctn03 .contact .agree-box > div {display: flex ; align-items: center;}
.ctn03 .contact .agree-box > a {font-size:0.8rem;line-height:0.9rem;color:rgba(255,255,255,0.6);font-weight:600;text-decoration : underline;
  text-underline-offset : 5px;}

.ctn03 .contact .submit-btn{ background: linear-gradient(to right, #A8B2FF, #7B3DEA);width:9rem;height:2.75rem;color:#fff;font-weight:700;font-size:0.9rem;border:none;border-radius:2.5rem;margin:0 auto;display:block;margin-top:2rem;cursor:pointer;}


@media (max-width:1400px){
	.ctn03 {padding-top:8rem;}
}
@media (max-width:1200px){
	.ctn03 .contact {width:100%;background-size:cover;padding:3.5rem 1rem;}
}
@media (max-width:1030px){
	.ctn03 {padding-top:5rem;}
}
@media (max-width:620px){
	.ctn03 .contact .items-flex{flex-direction:column;gap:1.25rem;}
	.ctn03 .contact .items-flex > div{width:100%;}
}


	/*ctn04*/ 
.ctn04 {padding-top:10rem;padding-bottom:7.5rem;}

.ctn04 .logoSwiper {animation: scroll 18s linear infinite;margin-top:4rem;}
.ctn04 .logoSwiper .swiper-slide {background:#fff;border-radius:10px;height:4rem;display:flex;justify-content:center;align-items:center;}
.ctn04 .logoSwiper .swiper-slide img {max-width:100%;max-height:100%;}

.ctn04 .logoSwiper02 {animation: scroll02 18s linear infinite;margin-top:2.25rem}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 원래 슬라이드 절반만큼 이동 */
}

@keyframes scroll02 {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); } /* 원래 슬라이드 절반만큼 이동 */
}


.ctn04 {position:relative;}
.ctn04 .logo-list:before{content:'';position:absolute;width:17.65rem;height:100%;    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(19, 19, 46, 0.8));z-index:1;left:0;top:0;}
.ctn04 .logo-list:after{content:'';position:absolute;width:17.65rem;height:100%;    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(19, 19, 46, 0.8));z-index:1;right:0;top:0;}

@media (max-width:1400px){
	.ctn04 {padding-top:8rem;}
	.ctn04 .logo-list:before{width:7.5%;}
	.ctn04 .logo-list:after{width:7.5%;}
}
@media (max-width:1030px){
	.ctn04 {padding-top:5rem;}

}


.popup  {position:fixed;left:50%;top:50%;width:25rem;transform:translate(-50%,-50%);background:#fff;border-radius:1rem;display:none;    z-index: 100;}
.popup .pop-tit{border-radius: 1rem 1rem 0 0; background: #F8F8F8;color: #222; text-align: center; font-size: 1.15rem; font-weight: 700; line-height: 0.8rem; letter-spacing: -0.00575rem;height:4.25rem;display:flex;justify-content:center;align-items:center;}

.popup .popup-cont {background:#fff;padding:1.2rem 1.75rem 1.8rem 1.75rem;border-radius:0 0 1rem 1rem;}
.popup .popup-cont > div {height:15.6rem;overflow-y:scroll;color: #333; font-size: 0.8rem; font-weight: 400; line-height: 1.3rem; letter-spacing: -0.004rem;}
.popup .popup-cont > div b {display:block;font-weight:700;}
a.check-btn {display:flex;width:7.5rem;height:2.75rem;border-radius: 2.5rem;
background: #222;color: #FFF; text-align: center; font-size: 0.8rem; font-weight: 400; line-height: 0.8rem; /* 100% */ letter-spacing: -0.004rem;justify-content:center;align-items:center;margin:0 auto;margin-top:2.2rem;}

.popup .popup-cont ul li{color: #333; font-size: 0.9rem; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.0045rem;}
.popup .popup-cont ul li span {display:inline-block;width:3.2rem;}

.support-pop {padding:3.1rem 1rem 2.15rem 1rem}
.support-pop  strong {color: #222; text-align: center; font-size: 1.15rem; font-style: normal; font-weight: 700; line-height: 1.35rem; letter-spacing: -0.00575rem;display:block;}


@media (max-width:767px){
	.popup{width:90%;}
}

.top-btn {position:fixed;right:1.5rem;bottom:1.5rem;z-index:1;cursor:pointer;}