@charset "utf-8";

/* MAIN PAGE CSS */
.main-wrap section { position: relative; overflow: hidden; }
.container-inner { max-width: 1400px; width:100%; margin: 0 auto;}

/* Section Title Style */
.sec-title{margin-bottom:80px;}

/* Visual Section */
/* .main-visual { height: 800px; background-color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; }
.visual-content h2 { font-size: 60px; font-weight: 800; color: #222; line-height: 1.2; margin-bottom: 50px; }
.visual-img { max-width: 1000px; margin: 0 auto; }
.visual-img img { width: 100%; height: auto; } */

#canvas { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: hidden; opacity: 0.8; }
#canvas canvas { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: hidden; }
.main-visual .video_wrap { position: relative; top: 0px; left: 0px; min-height: 100vh; display: block; z-index: 10; overflow: hidden; }
.main-visual .video_wrap_bg { position: absolute; left: 0; top: 0; right: 0; height: 100vh; border: 1000px solid #0184ca; z-index: 9999; border-style: solid !important; border-color: #0184ca !important; }
.main-visual #pinned-video { position: absolute; left: 0; bottom: 0; top: 0; right: 0; width: 100%; height: 100vh; }
.main-visual #pinned-video canvas { width: 100%; height: 100vh; object-fit: cover; object-position: 50% 80%; }
.main-visual #pinned-video .visual-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; z-index: 10; }
.main-visual #pinned-video .visual-text p { font-size: 90px; font-weight: 700; color: #222; line-height: 1.4; letter-spacing : -0.025em;;}
.main-visual #pinned-video .visual-text p span{color:var(--primary-color);}

#bbb { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; top: 0; left: 0; }

/* Story Section */
.main-story { padding: 120px 0; text-align: center; background-color: #f9f9f9; }
.story-logo { margin-bottom: 50px; }
.story-logo img { height: 40px; margin-bottom: 10px; }
.story-logo p { font-size: 14px; color: var(--primary-color); font-weight: 600; letter-spacing: 2px; }
.story-text h3 { font-size: 40px; font-weight: 800; color: #222; line-height: 1.4; }

/* KEY BUSINESS Section */
.main-business { padding: 180px 0; background-color: #f5f5f5; }
.business-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.business-item { border-radius: 15px; transition: all 0.3s ease; cursor: pointer; position: relative; }
.item-inner { padding: 50px 30px 70px; text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; }
.business-item .icon {width:163px;height:160px; margin-bottom: 40px; display: flex; align-items: center; position:relative;}
.business-item .icon img {position:absolute;inset:0;width:100%;height:100%;transition:opacity 0.35s ease;}
.business-item h4 { font-size: 30px; font-weight: 700; margin-bottom: 15px; }
.business-item p { font-size: 20px; line-height: 1.4; word-break: keep-all; }
.business-item .btn-more { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background-color: #222; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.3s; z-index: 10; opacity: 0; visibility: hidden; }
.business-item .icon .ico-on{opacity:0;}
.business-item.active { background-color: var(--primary-color); border-color: var(--primary-color); }
.business-item.active h4, .business-item.active p { color: #fff; }
.business-item.active .btn-more {background-color: #222; color: #fff; opacity: 1; visibility: visible; }
.business-item.active .btn-more span{position:relative; }
.business-item.active .btn-more span::before{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:26px;height:17px;background:url('../images/main/m_se01_arrow.png') center/cover no-repeat;content:'';}
.business-item.active .icon .ico-off{opacity:0;}
.business-item.active .icon .ico-on {opacity:1;}
.business-item:hover .icon,.business-item.active .icon {transform:translateY(-4px);transition:transform 0.35s ease;}

/* OUR LINEUP Section */
.main-lineup { padding:180px 0; background-color:#fff; }
.lineup-swiper { padding-bottom:50px; max-width:1400px; width:100%; overflow:visible; direction: ltr;}
.lineup-swiper.swiper{overflow:unset;}
.lineup-swiper .swiper-wrapper { align-items:center; }
.lineup-swiper .swiper-slide { transition:opacity .4s ease, transform .4s ease; opacity:.3; transform:scale(.92); width: 1400px; }
.lineup-swiper .swiper-slide-active { opacity:1; transform:scale(1); z-index:2; }
.lineup-swiper .swiper-slide-prev, .lineup-swiper .swiper-slide-next { opacity:.5; transform:scale(.95); z-index:1; }
.lineup-card {position:relative;display:flex; align-items:stretch; background-color:#fff; border-radius:0; overflow:hidden; width:100%; margin:0 auto; box-shadow:0 20px 40px rgba(0,0,0,.1); }
.lineup-card .lineup-txt-box{position:absolute;bottom:0;left:0;z-index:2;padding:80px;width:50%;}
.lineup-card .lineup-txt-box p{color:#fff;font-size:20px;line-height:1.4;margin:30px 0;}
.lineup-card .lineup-txt-box a{display:inline-block;padding:10px 20px;font-size:18px;font-weight:600;color:#fff;border:1px solid #fff;border-radius:5px;}
.lineup-card img { width:100%; height:100%; object-fit:cover; }
.btn-view { display:inline-block; width:fit-content; padding:12px 30px; border:1px solid #222; font-size:14px; font-weight:600; color:#222; text-decoration:none; transition:all .3s; }
.btn-view:hover { background-color:#222; color:#fff; }
.lineup-swiper .swiper-bottom { width:100%; height:90px;display:flex;flex-wrap:wrap;align-items:flex-end;}
.lineup-swiper .swiper-bottom-inner{ width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
.lineup-swiper .lineup-prev, .lineup-swiper .lineup-next { background-color:#fff; border:0; cursor:pointer; font-size:40px; color:#222; }
.lineup-swiper .swiper-navigation .curr {display:inline-block; color:#222; font-size:20px;}
.lineup-swiper .swiper-navigation .total { color:#888; font-size:20px; }
.swiper-pagination-progressbar.swiper-pagination-horizontal{position:relative !important;left:auto !important;top:auto !important;width:calc(100% - 190px) !important;margin-right:60px;}
.lineup-swiper .swiper-navigation{width:130px;display:flex;align-items:center;justify-content:space-between;}
.lineup-swiper .swiper-pagination-progressbar{background:#ddd;}
.lineup-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#222;}
.lineup-card .lineup-txt-box.txt-black p{color:#222;}
.lineup-card .lineup-txt-box.txt-black a{color:#222;border-color:#222;}

/* OUR PRODUCT Section */
.main-product { padding: 180px 0; background-color: #f5f5f5; }
.main-product .btn-wrap { padding-top:200px; text-align:center; }
.btn-more-prod { display: inline-block; margin: 0 auto; padding: 20px 40px; border: 2px solid var(--primary-color); border-radius: 10px; color: var(--primary-color); text-align: center; text-decoration: none; font-size:22px;font-weight: 600; line-height:1;transition: all 0.3s; }
.btn-more-prod:hover { background-color: var(--primary-color); color: #fff; }

/* NEWS Section */
.main-news { padding: 180px 0; background-color: #fff; }
.news-header { display: flex; justify-content: space-between; align-items: flex-start;}
.news-nav { display: flex; gap: 10px; }
.news-nav .btn-news-nav { width: 66px; height: 66px; border-radius: 50%; border: 2px solid #ddd; background-color: #fff; color: #999; cursor: pointer; transition: all 0.3s; }
.news-nav .btn-news-nav:hover { border-color: var(--primary-color); color: var(--primary-color); }
.news-nav .btn-news-nav span { position:relative; display:block;width:100%;height:100%;}
.news-nav .btn-news-nav span::before { position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:13px;height:19px;background:url('../images/main/slide_arrow.png') center/cover no-repeat;content:'';}
.news-nav .btn-news-nav.news-next span::before { transform:translate(-50%, -50%) rotate(-180deg); }
.news-nav .btn-news-nav:hover span::before { background:url('../images/main/slide_arrow_on.png') center/cover no-repeat; }
.news-swiper-area { margin-left: calc((100% - 1400px) / 2); overflow: hidden; }


/* CONTACT US Section */
.main-contact { position: relative; color: #fff; }
.main-contact .logo_wrap{width:340px;}
.contact-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.contact-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); }
#myVideo { width:100%; height:100%; object-fit:cover; display:block; } 
.contact-content { position: relative; z-index: 2; display: flex; gap: 100px; }
.contact-info { flex: 1; padding: 180px 0; position:relative;}
.contact-logo { width: 180px; margin-bottom: 30px; }
.contact-info .footer-info { font-size: 14px; color: #fff; }
.contact-info .btns {margin-bottom:30px;display: flex; gap: 10px; }
.contact-info .btns a { white-space:nowrap; padding: 20px 40px; border-radius: 10px; font-family:'Pretendard', sans-serif; font-size: 22px; font-weight: 600; line-height:1;text-decoration: none; transition: all 0.3s; }
.btn-mall { background-color: var(--primary-color); color: #fff; }
.btn-insta { background-color: #fff; color: var(--primary-color); }
.contact-form { flex: 1.2;padding: 180px 0 180px 100px; background: rgba(0, 0, 0, 0.7);position:relative;}
.contact-form::after{position:absolute;width:100%;height:100%;top:0;right:-100%;background: rgba(0, 0, 0, 0.7);content:'';}
.contact-form h3 { font-size:60px; font-weight: 600; line-height:1; margin-bottom: 60px; }
.form-info { margin-bottom: 30px; }
.form-info p { margin-bottom: 10px; font-size: 15px; display: flex; gap: 20px; color: #fff; }
.form-info p span { width: 90px; font-weight: bold; }
.contact-form form { display: flex; flex-direction: column; gap: 15px; }
.input-row { display: flex; gap: 15px; }
.input-row input { flex: 1; }
.contact-form input, .contact-form textarea { background-color: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 15px; color: #fff; border-radius: 4px; outline: none; }
.contact-form textarea { height: 120px; resize: none; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #888; }
.contact-form .captcha-wrap { display: flex; align-items: center; justify-content: center; float: left; }
.contact-form .captcha-wrap img { display: inline; }
.contact-form .btn-submit { padding: 12px 40px; border-radius: 5px; border:none; outline:none; font-family:'Pretendard', sans-serif; font-size: 18px; font-weight: 500; line-height:1; background-color:var(--primary-color); color:#fff; cursor: pointer; transition: all 0.3s; float: right; }
.footer-info-wrap{position:absolute;bottom:180px;left:0;}
.btn-toggle-agree { display:flex; justify-content:space-between; align-items:center; width:100%; padding:12px 15px; background:transparent; border:none; border-bottom:1px solid #fff; cursor:pointer; font-size:14px; color:#fff; }
.btn-toggle-agree i { transition:transform 0.3s; }
.contact-form .write_div{margin-bottom:30px;}
.agree_pri_wrap { margin-top:10px; }
.agree_pri_wrap textarea{background-color:transparent !important;border:none !important;color:#f5f5f5 !important; height:175px;}
#captcha #captcha_key{color:#222 !important;}



/* 비디오 팝업 */
.video-popup-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; align-items: center; justify-content: center;}
.video-popup-overlay.active {display: flex;}
.video-popup-container {position: relative; width: 90%; max-width: 1400px;}
.video-popup-close {position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: transparent; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; transform: translateY(-50px);}
.video-popup-close:hover {background-color: #fff; color: #000; transform: translateY(-50px) rotate(90deg);}
.video-popup-content {width: 100%; aspect-ratio: 16 / 9; background-color: #000; border-radius: 8px; overflow: hidden; position: relative;}
.video-popup-content video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}

@media (max-width: 1024px) {
    .lineup-card .lineup-txt-box{width:100%;}
}

@media (max-width: 768px) {
    .video-popup-container {width: 95%; }
    .video-popup-close {width: 35px; height: 35px; font-size: 20px;}
}