/*******************************************************
 * common
 *******************************************************/
.main-content{background:#050505;}
.main-content p{color: #A1A1AA;}

/* card  */
.main-content .card-body{        }
.main-content .card {position: relative;background: linear-gradient(146deg, rgba(255, 255, 255, 0.16) 0%, transparent 60%, transparent 100%);z-index:5;}
.main-content .card::before {display: block;position: absolute;top: 1px;right: 1px;bottom: 1px;left: 1px;content: "";background-color: #0f0f0f;z-index: -1;border-radius: var(--border-radius);}
.main-content .card-ico{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius: var(--border-radius-md);background: #282828;margin: 0 auto;}

@media screen and (max-width: 1200px) {
    .main-content .card::before { border-radius: calc(var(--border-radius) * 0.9); }
}
@media screen and (max-width: 1024px) {
    .main-content .card::before { border-radius: calc(var(--border-radius) * 0.7); }
}
@media screen and (max-width: 768px) {
    .main-content .card::before { border-radius: calc(var(--border-radius) * 0.5); }
    .main-content .card-ico{width:60px;height:60px;}
    .main-content .card-ico img{max-width:26px;}
}
@media screen and (max-width: 480px) {
    .main-content .card::before { border-radius: calc(var(--border-radius) * 0.3); }
    .main-content .card-ico img{max-width:24px;}
}


.bg-image{background-position: center;background-repeat: no-repeat;background-size: cover;}
.content-body{padding:0 1rem;}

body .swiper-controls-btn{display: flex;align-items: center;gap:10px;}
body .swiper-button-prev{width:46px;height:46px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;position: relative;left: 0;top: 0;margin-top: 0;}
body .swiper-button-next{width:46px;height:46px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;position: relative;right: 0;top: 0;margin-top: 0;}
body .swiper-button-prev:hover,body .swiper-button-next:hover{background:var(--primary)}
body .swiper-button-prev i,body .swiper-button-next i{color:#fff;font-size:22px;}
body .swiper-button-prev:after,body .swiper-button-next:after{display:none;}
body .swiper-pagination-bullets{display:flex;gap:10px;}
body .swiper-pagination-bullet{width:12px;height:12px;opacity:1;border-radius:3px;background: var(--gray-200);}
body .swiper-pagination-bullet-active{background:var(--primary);}
body .swiper-nav{display: flex;align-items: center;gap: 10px;}

@media (max-width:1024px) {
    body .swiper-button-prev{width:40px;height:40px;}
    body .swiper-button-next{width:40px;height:40px;}
    body .swiper-button-prev i, body .swiper-button-next i{font-size: 1rem;}
}

/* main  */
.main-sec .container {z-index: 1;}
.sec-title{position: relative;z-index: 2;}
body .sec-title h2{font-weight:700;text-align:left;line-height:1.3;color:#2B2B2B;}

/* button  */
.btn.submit-btn {  position: relative; z-index: 1; transform: translateZ(0);width: 180px; height: 60px; background: var(--variant); border: 0; position: relative; border-radius: 100px; color: #fff; cursor: pointer; overflow: hidden; display: flex; justify-content: center; align-items: center; text-decoration: none; }
.btn.submit-btn .text { position: relative; z-index: 2; }
.btn.submit-btn .icon-container { position: relative; z-index: 2; width: 25px; height: 25px; margin-left: 10px; transition: transform 500ms ease; }
.btn.submit-btn .icon-container .icon { position: absolute; left: 0; top: 0; width: 25px; height: 25px; transition: transform 500ms ease, opacity 250ms ease; display: flex; justify-content: center; align-items: center; }
.btn.submit-btn .icon-container .icon i { color: #fff; font-size: 20px; }
/*.btn.submit-btn::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--primary); border-radius: 100px; z-index: 1; transition: transform 500ms ease; }*/
.btn.submit-btn:hover::after { transform: translateX(65%); }
.btn.submit-btn:hover .icon-container { transform: translateX(125%); }

.btn.submit-btn.white-type{background: rgba(255, 255, 255, 0.6) !important;color:black;}
.btn.submit-btn.white-type .icon-container .icon i { color: #000;}
.btn.submit-btn.white-type::after{background: rgba(255, 255, 255, 0.7);}
.btn.submit-btn.white-type:hover::after{background: rgba(255, 255, 255, 1);}


body .main-button span, body .main-button.white-type span {font-weight:700;position: relative;z-index: 2;transition: 0.65s}
body .main-button, body .main-button.white-type {padding: 0 74px 0 30px;min-width:200px;display: inline-block;box-sizing: border-box;overflow: hidden;position: relative;text-align:left;border-radius: 150px;background:#27272A;border: none;color: #ffffff;height:56px;line-height:56px;transition: 0.65s cubic-bezier(.785,.135,.15,.86);font-size: 16px;font-weight: 800;letter-spacing: -0.16px;}
body .main-button:before, body .main-button.white-type:before {content: '';position: absolute;top: 50%;right:9.5px;left:auto;width: 40px;height: 40px;border-radius: 150px;background: rgba(255, 255, 255, 0.1);transform: translateY(-50%);transition: 0.65s cubic-bezier(.785,.135,.15,.86);}
body .main-button:after, body .main-button.white-type:after {content: '';position: absolute;top: 50%;right:22px;left:auto;width: 14.5px;height: 9px;transform: translateY(-50%);transition: 0.65s cubic-bezier(.785,.135,.15,.86);background-image: url('../img/gen/arrow-ico.png');background-position:left top;background-repeat:repeat-x;background-size:14.5px auto;}
body .main-button:active, body .main-button:hover, body .main-button.white-type:active, body .main-button.white-type:hover {background:var(--primary);border-color:var(--primary);color:#ffffff;}
body .main-button:hover:before, body .main-button.white-type:hover:before {width: calc(100% - 12px) !important;transform: translateY(-50%) scaleX(1.2) scaleY(1.6) !important;}
body .main-button:hover:after, body .main-button.white-type:hover:after {background-position:14.5px top;}

/* white-type 전용 */
body .main-button.white-type {background:rgba(255, 255, 255, 0.2);color:#fff;}
body .main-button.white-type:before {background: #fff;}
body .main-button.white-type:after{filter: invert(1);}
body .main-button.white-type:hover{background:#fff;border-color: #fff;}
body .main-button.white-type:hover span{color:#000;}

@media (max-width:1024px) {
    body .main-button, body .main-button.white-type{min-width: 180px;font-size:0.875rem;height:50px;line-height:50px;padding: 0 74px 0 25px;}
    body .main-button:before, body .main-button.white-type:before{right:6.5px;}
    body .main-button:after, body .main-button.white-type:after{right:19px;}
}


/* tab */
.main-tab-nav{display: flex;gap:10px;justify-content: center;}
.main-tab{display: inline-flex;align-items: center;justify-content: center;padding: 0.8rem 1.5rem;background:#1A1A1A;border-radius: 100px;cursor: pointer;transition: 0.3s;}
.main-tab.active{background:var(--primary);pointer-events: none;}
.main-tab p{color:#fff;transition: 0.3s;}
.main-tab:hover{background:rgba(255,255,255,0.75);}
.main-tab:hover p{color:#000;}



/*******************************************************
 * sec 01
 *******************************************************/
#section1 {position: relative;width:100%;height:100vh;overflow:visible;padding-top:var(--header-height) !important;padding-bottom: calc(var(--header-height) - 1rem) !important;padding-left:0 !important;padding-right:0 !important;}
#section1 > .container{display: flex;align-items:flex-end;justify-content: center;}

#sec01_sli{height:100%;width:100%;margin: 0 auto;}
#sec01_sli .sec01_sli{min-height: 100vh; height:100%; background-position:70% 50%; background-size:cover; background-repeat:no-repeat;padding: 100px 20px 120px;display:flex; justify-content:center; align-items:center; }

#sec01_page{display:flex;align-items:center;}
body #sec01_sli .swiper-pagination-bullet {width:5px;height:5px;background: rgba(255,255,255,0.8);border-radius:0;position: relative;overflow: hidden;transition: 0.2s;}
body #sec01_sli .swiper-pagination-bullet-active {width:150px;height:3px;border-radius: 0;background: rgba(255,255,255,0.6);}

.hero-slider{height:100%;max-height: calc(100vh - var(--header-height) - 5rem);position: relative;border-radius: 5rem;overflow: hidden;}
.hero-slider .swiper-pagination-bullet { opacity: 1; display: flex; align-items: center; width: auto; height: 1.25rem; margin: 0; color: #fff; font-size: .875rem; line-height: 1.2; background: none; }
.hero-slider .swiper-pagination-group {margin-left:-0.25rem; opacity: 1;display: flex; align-items: center;}
.hero-slider .swiper-button-prev { opacity: .8;margin-right:0.25rem;position: static; top: auto; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin-top: 0; background: none; }
.hero-slider .swiper-button-next { opacity: .8;margin-left:-0.25rem; position: static; top: auto; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin-top: 0; background: none; }
.hero-slider .swiper-pagination { position: static; display: inline-flex; bottom: 24px; text-align: left; transform: none; gap: 8px; }
.hero-slider .swiper-pagination-bullet > .number { opacity: .72; transition: opacity .5s ease; }
.hero-slider .swiper-pagination-bullet > .bar { display: inline-block; overflow: hidden; position: relative; width: 0; height: 2px; margin: 0 .25rem; border-radius: 2px; transition: width .5s ease-out; background: rgba(255,255,255,0.3); }
.hero-slider .swiper-pagination-bullet > .bar::after { position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background-color: #fff; transition: none; }
.hero-slider .swiper-pagination-bullet-active > .number { opacity: 1; }
.hero-slider .swiper-pagination-bullet-active > .bar { width: 2.5rem; }
.hero-slider .swiper-pagination-bullet-active > .bar::after { width: 100%; transition: width 6s linear; }
.hero-slider .swiper-auto-play { opacity: .8; position: relative; display: inline-block; width: 15px; height: 16px; margin-left: 0.25rem; padding: 0; background-color: transparent; border: 0; cursor: pointer; }
.hero-slider .swiper-auto-play::before { content: ""; position: absolute; top: .125rem; bottom: .125rem; left: 2px; width: 3px; background-color: #fff; border-radius: 1px; transition: none; }
.hero-slider .swiper-auto-play::after { content: ""; position: absolute; top: .125rem; bottom: .125rem; right: 2px; width: 3px; background-color: #fff; border-radius: 1px; transition: none; }
.hero-slider .swiper-auto-play.is-stop::before { left: 0; top: 0; bottom: 0; width: 0; height: 0; background-color: transparent; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #fff; border-radius: 2px; }
.hero-slider .swiper-auto-play.is-stop::after { display: none; }
.hero-slider .swiper-slide .image { width: 100%; height: 100%; }
.hero-slider .swiper-slide .image img { width: 100%; height: 100%; object-fit: cover;transform: scale(1.08);transition: transform 8s ease-out; }
.hero-slider .swiper-slide-active .image img {transform: scale(1.0);}

.hero-slider .text-box{position: absolute;bottom:100px;left: 80px;z-index: 1;    display: flex;
    flex-flow: column;
    justify-content: flex-end;}

@media screen and (max-width:1024px) {
    .hero-slider .text-box {bottom: auto;left: 50%;transform: translate(-50%, -50%);top: 50%;text-align: center;display: flex;flex-flow: column;justify-content: center;width: 100%;}
    .hero-slider .swiper-pagination-group{justify-content: center;}
}



/*******************************************************
 * sec 02
 *******************************************************/
#section2 { position: relative; width: 100%; height: 90vh; background: #000;border-top: 1px solid #0F0F0F;}
#section2::before {content: '';display: block;width: 100%;height: 16%;background: linear-gradient(180deg, rgba(5, 5, 5, 1) 0%, rgba(5, 5, 5, 0) 100%);position: absolute;top: -1px;left: 0;z-index: 88;}
#section2::after {content: '';display: block;width: 100%;height: 16%;background: linear-gradient(180deg, rgba(5, 5, 5, 0) 0%, rgba(5, 5, 5, 2) 100%);position: absolute;bottom: -1px;left: 0;z-index: 88;}

#section2 video {width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0; bottom: 0; right: 0; left: 0;opacity: 0.25;transition: opacity 1.2s ease-in-out;}
#video2 { opacity: 0; }

#section2 .sec_title {width:100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 5;}
#section2 .sec_title h1{font-weight:700;line-height:1.2;}
#section2 .sec_title h5{line-height:1.5;}

@media screen and (max-width:1024px) {
    #section2{height:80vh;}
}

@media screen and (max-width:768px) {
    #section2{height:70vh;}
}



/*******************************************************
 * sec 03
 *******************************************************/


/*******************************************************
 * sec 04
 *******************************************************/
#section4{padding-top:0 !important;background-image: url("../img/main/sec04-bg.png");background-repeat: no-repeat;background-position:50% 65%;background-size: cover;}

.wrapper {display: flex;flex-direction: column;gap: var(--gap);margin: auto;max-width: 100vw;}
.marquee {overflow: hidden;position: relative;display: flex;align-items: center;height: calc(var(--size) * (9 / 16) + 4rem);}
.marquee__track {display: flex;align-items: center;gap: var(--gap);width: max-content;position: absolute;}
.marquee .sec04-img {padding:2.5rem 1.2rem;display:flex;place-items: center;width: var(--size);aspect-ratio: 16/9;flex-shrink:0;align-items: center;justify-content: center;overflow: visible;}
.marquee .sec04-img img{opacity:1;width:auto;height:100%;max-height:160px; object-fit: contain;}
:root {--size: clamp(15rem, 2rem + 35vmin, 28rem);--gap: 30px;--scroll-start: 0;--scroll-end: -50%;}

@media screen and (max-width:1024px) {
    :root {--gap:20px;}
}

@media screen and (max-width:768px) {
    :root{--gap:12px;}
}


/*******************************************************
 * sec 05
 *******************************************************/
#section5{background:#15151A;}


.grap-slider {overflow: hidden;padding-bottom: 30px;}
.grap-slider .card {flex-shrink: 0;}
.grap-slider .card-body {min-height:290px;height: 100%;display: flex;flex-direction: column;justify-content: space-between;}
.grap-slider .card-tag {color:var(--primary);}
.grap-slider .card-title {color: #fff;overflow: hidden;text-overflow: ellipsis;height:83px;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.grap-slider .card-desc {line-height: 1.6;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.grap-slider .swiper-scrollbar {background:#27272A;height: 4px; left: 0;width: 100%;bottom: 0;}
.grap-slider .swiper-scrollbar-drag {background:#A1A1AA;}

@media screen and (max-width:1510px){
    .grap-slider .card-title {height:70px;}
}
@media screen and (max-width:1024px) {
    .grap-slider .card-body {min-height:260px;}
}
@media screen and (max-width:480px){
    .grap-slider .card-title {height:56px;}
}


/*******************************************************
 * sec 06
 *******************************************************/
#section6{background-image: url("../img/main/sec06-bg.png");background-repeat: no-repeat;background-position:50% 100%;background-size: cover;}

.sec06-area{padding:100px 80px;background-image: url("../img/main/sec06-01.jpg");background-repeat: no-repeat;background-position:center;background-size: cover;}


@media screen and (max-width:1200px) {
    .sec06-area{padding:80px 60px;}
}


@media screen and (max-width:768px) {
    .sec06-area{padding:60px 40px;}
}