@charset "UTF-8";
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(./fonts/Pretendard-Black.woff2) format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(./fonts/Pretendard-ExtraBold.woff2) format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(./fonts/Pretendard-Bold.woff2) format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(./fonts/Pretendard-SemiBold.woff2) format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(./fonts/Pretendard-Medium.woff2) format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(./fonts/Pretendard-Regular.woff2) format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(./fonts/Pretendard-Light.woff2) format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(./fonts/Pretendard-ExtraLight.woff2) format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(./fonts/Pretendard-Thin.woff2) format('woff2');
}
/*
@font-face {
	font-family: 'RedHatDisplay';
	font-weight: 900;
	src: url(./fonts/RedHatDisplay-Black.woff2) format('woff2');
}

@font-face {
	font-family: 'RedHatDisplay';
	font-weight: 800;
	src: url(./fonts/RedHatDisplay-ExtraBold.woff2) format('woff2');
}

@font-face {
	font-family: 'RedHatDisplay';
	font-weight: 700;
	src: url(./fonts/RedHatDisplay-Bold.woff2) format('woff2');
}

@font-face {
	font-family: 'RedHatDisplay';
	font-weight: 600;
	src: url(./fonts/RedHatDisplay-SemiBold.woff2) format('woff2');
}

@font-face {
	font-family: 'RedHatDisplay';
	font-weight: 500;
	src: url(./fonts/RedHatDisplay-Medium.woff2) format('woff2');
}

@font-face {
	font-family: 'RedHatDisplay';
	font-weight: 400;
	src: url(./fonts/RedHatDisplay-Regular.woff2) format('woff2');
}

@font-face {
	font-family: 'RedHatDisplay';
	font-weight: 300;
	src: url(./fonts/RedHatDisplay-Light.woff2) format('woff2');
}
*/

*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none}
.body-wrap{min-height:100vh;width:100%;text-align:center;color:#fff;background-color:#111;padding:50px;display:flex;gap:20px;flex-direction:column}
.btn-type{display:flex;gap:20px;justify-content:center}
.btn-type .btn-item{color:#fff;border:1px solid #fff;border-radius:10px;min-width:200px;height:45px;display:flex;align-items:center;justify-content:center}
.btn-type .btn-item:hover{background-color:rgba(255,255,255,.1)}
.btn-wrap{background-color:rgba(255,255,255,.2);padding:20px;display:flex;gap:10px}
.img-full{width:100%}
.img-full img{width:100%}
.img-mb{display:flex;gap:10px;align-items:flex-start;justify-content:center}
.img-logo{display:flex;gap:120px;align-items:center;justify-content:center;padding:50px 0}
.img-logo > *{max-height:100px}
.img-logo-b{display:flex;gap:50px;align-items:center;justify-content:center;padding:50px 0}
.img-logo-b > *{max-height:250px}

/* full screen page */
.full-wrap{width:100%;height:100vh;overflow:hidden;padding:30px 50px 50px 50px;position:relative;font-family: "Red Hat Display", sans-serif;color:#fff;background-color:#222}
.full-wrap::after{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background-color:rgba(0,0,0,.25);z-index:100}
.full-wrap .logo-wrap{display:flex;gap:10px;align-items:center}
.full-wrap .logo-wrap .stit p{display:flex;gap:10px;align-items:center}
.full-wrap .logo-wrap .stit p span:first-child{font-weight:100;font-family:'Red Hat Display';min-width:50px;position:relative}
.full-wrap .logo-wrap .stit p span:first-child::after{position:absolute;right:-2px;top:50%;transform:translateY(-50%);content:"";width:1px;height:10px;background-color:rgba(255,255,255,.2)}
.full-wrap .swiper-wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.full-wrap .swiper{height:100%;overflow:hidden}
.full-wrap video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;transform:translate(-50%,-50%)}
.full-wrap #main{position:relative;z-index:1000;display:flex;height:100%;flex-direction:column;justify-content:space-between}
.full-wrap .hd-wrap{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.full-wrap .hd-wrap .txt-wrap{letter-spacing:.3em;font-weight:600;position:absolute;left:50%;transform:translateX(-50%)}
.full-wrap .btn-item{position:relative;padding:10px 0;font-family:"Red Hat Display", "Pretendard", sans-serif;color:#fff;display:flex;font-weight:800;align-items:center;gap:10px;transition:.3s}
.full-wrap .btn-item:hover{gap:15px}
.full-wrap .btn-item img{max-height:15px}
.full-wrap .btn-item::after{position:absolute;bottom:0;left:0;background-color:#fff;content:"";width:100%;height:1px;transition:.3s}
.full-wrap .txt-box .subject{font-weight:700;font-size:6rem;line-height:1.1}
.full-wrap .txt-box .subject-con{font-weight:bold;font-size:1.45rem;margin-top:20px}
.full-wrap .ft-wrap{display:flex;flex-direction:column;gap:50px}
.full-wrap .ft-wrap .inner{display:flex;justify-content:space-between;gap:20px}
.full-wrap .ft-wrap .subject{font-weight:800;letter-spacing:.1em;margin-bottom:30px}
.full-wrap .ft-wrap .board-wrap{position:relative;width:800px;display:flex;gap:60px}
.full-wrap .ft-wrap .board-wrap .item{position:relative;color:#fff;word-break:keep-all;transition:.3s}
.full-wrap .ft-wrap .board-wrap .item:hover{transform:translateY(-10px)}
.full-wrap .ft-wrap .board-wrap::after{position:absolute;right:310px;height:38px;content:"";background-color:#fff;width:1px;top:50%;transform:translateY(-50%)}
.full-wrap .ft-wrap .board-wrap::before{position:absolute;left:220px;height:38px;content:"";background-color:#fff;width:1px;top:50%;transform:translateY(-50%)}
.full-wrap .ft-wrap .board-wrap .item:last-child{width:450px}
.full-wrap .ft-btn-wrap .item{color:#fff;position:relative;padding-right:65px;height:150px;display:flex;flex-direction:column;gap:0;justify-content:center}
.full-wrap .ft-btn-wrap .item .one{height:100%;aspect-ratio:1/1;background-color:#B7FF70;border-radius:50%;content:"";position:absolute;right:0;top:0;z-index:-1}
.full-wrap .ft-btn-wrap .item strong{font-size:1.35rem;font-weight:bold;letter-spacing:.12em}
.full-wrap .ft-btn-wrap .item .txt{position:relative;mix-blend-mode:difference;display:flex;flex-direction:column;padding-right:28px;padding-top:20px;transition:.3s}
.full-wrap .ft-btn-wrap .item .txt::after{font-family:'xeicon';content:"\e907";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.2em}
.full-wrap .ft-btn-wrap .item .txt:hover{padding-right:40px}
.full-wrap .swiper-slide{overflow:hidden}
.full-wrap .progress-bar{height:1px;background-color: rgba(255, 255, 255, 0.3); /* 반투명 회색 */position: relative;overflow: hidden}
.full-wrap .progress-fill{height:100%;width: 0%;background-color: #fff; /* 밝은 연두색 */transition: none}

#dark-wrap{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:1000;display:none;align-items:center;justify-content:center}
#dark-wrap .popup-wrap{background-color:#01122E;max-width:80vw;max-height:80vh;overflow-y:auto;overflow-x:hidden}
#dark-wrap .popup-wrap .hd-popup{position:relative;padding:20px;background-color:#B7FF70}
#dark-wrap .popup-wrap .popup-con{padding:20px 50px;height:calc(80vh - 70px);max-height:calc(80vh - 70px)}
#dark-wrap .popup-wrap .popup-con img{max-height:100%}
#dark-wrap .popup-wrap .subject{display:flex;align-items:flex-end;gap:10px;font-size:1.35rem;font-weight:800;letter-spacing:.1em;color:#121221}
#dark-wrap .popup-wrap .subject span{font-size:1rem;letter-spacing:0;font-weight:normal}
#dark-wrap .popup-wrap .btn-close{position:absolute;right:20px;top:50%;transform:translateY(-50%);background:none;font-size:1.25rem;border:0;cursor:pointer;transition:.3s}
#dark-wrap .popup-wrap .btn-close:hover{transform:translateY(-50%) rotate(90deg)}

@media screen and (max-width:1200px) {
    .full-wrap .txt-box .subject{font-size:4rem}
    .full-wrap .txt-box .subject-con{font-size:1rem}
    .full-wrap .ft-wrap .news-wrap{width:calc(100% - 300px)}
    .full-wrap .ft-wrap .board-wrap{width:100%}
    .full-wrap .ft-btn-wrap .item{height:120px;padding-right:55px}
    .full-wrap .ft-btn-wrap .item strong{font-size:1.125rem}
}

@media screen and (max-width:1024px) {
    .full-wrap #main{font-size:14px}
    .full-wrap{padding:20px}
    .full-wrap video{min-width:auto;height:100%}

    .full-wrap .hd-wrap{font-size:12px;gap:5px}
    .full-wrap .txt-box .subject{font-size:2rem}
    .full-wrap .btn-item{gap:5px}
    .full-wrap .hd-wrap .txt-wrap{letter-spacing:.1em}

    #dark-wrap .popup-wrap .subject{font-size:1rem;letter-spacing:0}
    #dark-wrap .popup-wrap .subject span{font-size:.875rem}
    #dark-wrap .popup-wrap .popup-con img{width:100%}
    #dark-wrap .popup-wrap .popup-con{padding:20px 50px;height:auto}
}

@media screen and (max-width:720px) {
	.full-wrap .logo-wrap .stit{position:absolute;left:0;top:50px;width:max-content}
    .full-wrap .ft-wrap .board-wrap{gap:40px}
    .full-wrap .ft-wrap .board-wrap .item{display:block;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box}
    .full-wrap .ft-wrap .board-wrap .item:last-child{display:none}
    .full-wrap .ft-wrap .board-wrap::after{display:none}
    .full-wrap .ft-wrap .board-wrap::before{left:calc(50% - 5px)}
    .full-wrap .ft-wrap .subject{margin-bottom:20px}
    .full-wrap .ft-btn-wrap .item{height:80px;padding-right:10px}
    .full-wrap .ft-btn-wrap .item strong{font-size:.9rem;letter-spacing:.08em}
    .full-wrap .ft-btn-wrap .item span{font-size:.8rem}
    .full-wrap .ft-wrap .news-wrap{width:calc(100% - 190px)}
}

@media screen and (max-width:480px) {
    .full-wrap .txt-box .subject{font-size:1.6rem}
    .full-wrap .ft-wrap .board-wrap{gap:0}
    .full-wrap .ft-wrap .board-wrap::before{display:none}
    .full-wrap .ft-wrap .board-wrap .item:nth-child(2){display:none}

    #dark-wrap .popup-wrap .hd-popup{padding:10px}
    #dark-wrap .popup-wrap .btn-close{right:10px}
}