@charset "UTF-8"; 
@import url("reset.css"); 


.wrap{background-color: #000;}

.sec_text{width: max-content; color: #fff;}
.sec_text span{display: block; margin-top: 8px; font-size: 48px; font-weight: 700;}
.sec_text span b{color: #FF4E2F;}
.sec_text p{margin-top: 42px; font-size: 24px; font-weight: 300;}
.sec_text p.eyebrow{font-size: 20px; font-weight: 500; margin-top: 0;}
.sec_text p b{font-weight: 700;}

.sec_btn{position:relative; width:fit-content;}
.sec_btn a{position:relative; display:flex; justify-content:center; align-items:center; gap:6px; padding:16px 36px; font-size:16px; font-weight:700; line-height: 20px; color:#fff; background-color:rgba(255,255,255,0.1); border-radius:500px; border:none; backdrop-filter:blur(10px); overflow:hidden; transition:transform .35s ease, background-color .35s ease, box-shadow .35s ease;}
.sec_btn a::before{content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.4) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;}
.sec_btn a::after{content:""; position:absolute; top:0; left:-120%; width:80%; height:100%; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%); transform:skewX(-20deg); transition:left .6s ease; pointer-events:none; z-index:1;}
.sec_btn a img{position:relative; z-index:3; width:20px; transition:transform .35s ease;}
.sec_btn a:hover{transform:translateY(-4px); background-color:#FF4E2F; box-shadow:0 16px 36px rgba(0,0,0,0.18);}
.sec_btn a:hover::before{content: unset;}
.sec_btn a:hover::after{left:130%;}
.sec_btn a:hover img{transform:rotate(45deg)}


/* popup */
.popup_wrap{position:absolute; right:8vw; bottom:18%; z-index:9997; height: max-content;}
.popup_wrap .popup_box{width:400px; background:#fff; box-shadow:0 20px 50px rgba(0,0,0,0.22); overflow:hidden;}
.popup_wrap .popup_swiper{position:relative; width:100%; height: calc(100% - 48px);}
.popup_wrap .popup_img{display:block; width:100%;}
.popup_wrap .popup_img img{display:block; width:100%; height:auto;}
.popup_wrap .popup_paging{position:absolute; right:16px; bottom:24px; left:auto; width:auto; min-width:40px; height:26px; padding:4px 14px; display:flex; align-items:center; justify-content:center; gap: 3px; border-radius:999px; background:#707070; color:#fff; font-size:14px; z-index:10;}
.popup_wrap .popup_bottom{display:flex; align-items:center; justify-content:space-between; height:48px; padding:0 16px; background:#f5f5f5; box-sizing:border-box;}
.popup_wrap .today_close{display:flex; align-items:center; gap:6px; font-size:14px; color:#AFAEAF; cursor:pointer;}
.popup_wrap .today_close input{font-family: 'Pretendard'; width:15px; height:15px; margin:0; accent-color:#111;}
.popup_wrap .popup_close{font-family: 'Pretendard'; border:0; background:none; font-size:14px; color:#4E4E4E; cursor:pointer; padding:0;}
.popup_wrap .popup_close:hover{color:#111;}

@media screen and (max-width:768px){
    .popup_wrap{left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - 40px);}
    .popup_wrap .popup_box{width:100%;}
}

/* 히어로섹션 */
.hero_sec{position: relative; width: 100%; height: 1135px; background-image: url(../img/asset/hero_bg.png);}
.hero_sec .hero_text{position: absolute; width: max-content; color: #fff; left: 11vw; bottom: 24%;}
.hero_sec .hero_text span{display: block; margin-top: 8px; font-size: 64px; font-weight: 700;}
.hero_sec .hero_text span b{color: #FF4E2F;}
.hero_sec .hero_text p{margin-top: 32px; font-size: 20px; font-weight: 300;}
.hero_sec .hero_text p.eyebrow{font-size: 20px; font-weight: 500; margin-top: 0;}
.hero_sec .hero_text p b{font-weight: 700;}


/* work_sec */
.work_sec{width: 100%; padding: 136px 0; border-bottom: 1px solid #0F0F0F;}
.work_sec .inner{width: 1600px; margin: 0 auto;}
.work_sec .inner .tit{display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin: 0 auto;}
.work_sec .inner .work_cont{width: 100%; height: 320px; margin-top: 72px;}
.work_sec .inner .work_cont .swiper-slide{position: relative; overflow: hidden;}
.work_sec .inner .work_cont .swiper-slide>img{position: relative; left: 50%; width: auto; height: 100%; object-fit: cover; transform: translateX(-50%);}
.work_sec .inner .work_cont .swiper-slide a{position:absolute; left:0; top:0; display:flex; justify-content:space-between; align-items:flex-end; width:100%; height:100%; padding:36px 42px; border:0px solid transparent; box-sizing:border-box; overflow:hidden; transition:border-color .35s ease, box-shadow .35s ease;}
.work_sec .inner .work_cont .swiper-slide a::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 56%, rgba(26,26,26,1) 100%); opacity:1; transition:opacity .35s ease; pointer-events:none; z-index:1;}
.work_sec .inner .work_cont .swiper-slide a::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,78,47,0) 50%, rgba(255,78,47,1) 100%); opacity:0; transition:opacity .35s ease; pointer-events:none; z-index:1;}
.work_sec .inner .work_cont .swiper-slide a .work_text{position:relative; z-index:2; width:max-content; color:#fff; transition:transform .35s ease;}
.work_sec .inner .work_cont .swiper-slide a .work_text span{font-size:18px; font-weight:700;}
.work_sec .inner .work_cont .swiper-slide a .work_text p{margin-top:4px; font-size:32px; font-weight:700;}
.work_sec .inner .work_cont .swiper-slide a .work_btn{position:relative; z-index:2; display:flex; justify-content:center; align-items:center; width:56px; height:56px; border-radius:4px; background-color:#FF4E2F; transition:transform .35s ease, background-color .35s ease;}
.work_sec .inner .work_cont .swiper-slide a .work_btn img{width:32px; transition:transform .35s ease;}
.work_sec .inner .work_cont .swiper-slide a:hover{border-color:#FF4E2F; border-width: 1px; box-shadow:0 18px 40px rgba(255,78,47,.22);}
.work_sec .inner .work_cont .swiper-slide a:hover::before{opacity:0;}
.work_sec .inner .work_cont .swiper-slide a:hover::after{opacity:1;}
.work_sec .inner .work_cont .swiper-slide a:hover .work_text{transform:translateY(-4px);}
.work_sec .inner .work_cont .swiper-slide a:hover .work_btn{transform:translateY(-4px);}
.work_sec .inner .work_cont .swiper-slide a:hover .work_btn img{transform:rotate(45deg);}


/* benefit_sec */
.benefit_sec{width: 100%; padding: 136px 0; border-bottom: 1px solid #0F0F0F;}
.benefit_sec .inner{width: 1600px; margin: 0 auto;}
.benefit_sec .inner .sec_text{text-align: center; margin: 0 auto;}
.benefit_sec .inner .benefit_cont{display: flex; flex-wrap: wrap; justify-content: center; margin-top: 72px; width: 100%;}
.benefit_sec .inner .benefit_cont .item{position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: calc(100%/3); height: 240px;}
.benefit_sec .inner .benefit_cont .item::after{position: absolute; right: -2px; top: 50%; transform: translateY(-50%); content: ""; width: 4px; height: 32px; border-radius: 500px; background-color: #2B2B2B;}
.benefit_sec .inner .benefit_cont .item:nth-child(3n)::after{content: unset;}
.benefit_sec .inner .benefit_cont .item .txt{margin-top: 24px; text-align: center;}
.benefit_sec .inner .benefit_cont .item img{width: 48px; transition: transform 0.35s ease;}
.benefit_sec .inner .benefit_cont .item:hover img {transform: translateY(-6px) scale(1.08);}
.benefit_sec .inner .benefit_cont .item .txt span{font-size: 20px; font-weight: 600; color: #fff;}
.benefit_sec .inner .benefit_cont .item:hover{background:linear-gradient(180deg, #000000 0%, #FF4E2F 100%);}
.benefit_sec .inner .benefit_cont .item .txt p{margin-top: 12px; font-size: 16px; font-weight: 400; color: #fff; text-align: center;}


/* service_sec */
.service_sec{position:relative; width:100%; padding:136px 0; background-image: url(../img/asset/service_bg.png); background-repeat: no-repeat; background-position: top+96px center;}
.service_sec .inner{width:1600px; margin:0 auto;}
.service_sec .inner .service_cont{width:100%; margin-top:72px;}
.service_sec .inner .service_cont .item{position:relative; perspective:300px;}
.service_sec .inner .service_cont .pin-spacer{margin-bottom:24px !important; padding-bottom:0 !important; height:475px !important;}
.service_sec .inner .service_cont .item .gsap_container{overflow:hidden; position:relative; top:0; display:flex; flex-direction: column; justify-content:center; padding:0px 160px; height:475px; min-height:300px; border-radius:30px; filter:brightness(1); background-color:rgba(0,0,0,0.1); box-sizing:border-box; backdrop-filter: blur(10px); border: 1px solid #444;}
.service_sec .inner .service_cont .item .gsap_container .service_text span{display:block; font-size:40px; font-weight:bold; color:#fff;}
.service_sec .inner .service_cont .item .gsap_container .service_text p{margin-top:24px; font-size:15px; font-weight:400; color:#fff;}
.service_sec .inner .service_cont .item .gsap_container .sec_btn{position:relative; z-index:2; margin-top: 80px;}
.service_sec .inner .service_cont .item + .item{margin-top:24px;}

/* contact_sec */
.contact_sec{position:relative; width:100%; padding:136px 0; background-image: url(../img/asset/contact_bg.png); background-size: cover;}
.contact_sec .inner{display: flex; flex-direction: column; align-items: center; width:1600px; margin:0 auto;}
.contact_sec .inner .sec_text{text-align: center; margin: 0 auto;}
.contact_sec .inner .sec_btn{display: flex; justify-content: center; margin-top: 56px;}


/* ================================
   Responsive patch - main.css
   ================================ */
@media screen and (max-width:1680px){
    .work_sec .inner,
    .benefit_sec .inner,
    .service_sec .inner,
    .contact_sec .inner{width:calc(100% - 80px); max-width:1600px;}
}

@media screen and (max-width:1280px){
    .sec_text span{font-size:42px;}
    .sec_text p{margin-top:30px; font-size:20px;}
    .sec_text p.eyebrow{font-size:18px;}
    .hero_sec{height:860px; background-position:center; background-size:cover;}
    .hero_sec .hero_text span{font-size:54px;}
    .work_sec,
    .benefit_sec,
    .service_sec,
    .contact_sec{padding:110px 0;}
    .service_sec .inner .service_cont .item .gsap_container{padding:0 90px;}
}

@media screen and (max-width:1024px){
    .work_sec .inner,
    .benefit_sec .inner,
    .service_sec .inner,
    .contact_sec .inner{width:calc(100% - 48px);}
    .sec_text{width:100%;}
    .sec_text span{font-size:36px;}
    .sec_text p{margin-top:22px; font-size:18px;}
    .sec_btn a{padding:14px 28px; font-size:15px;}
    .hero_sec{height:720px;}
    .hero_sec .hero_text{left:40px; bottom:18%; width:calc(100% - 80px);}
    .hero_sec .hero_text span{font-size:46px;}
    .hero_sec .hero_text p{font-size:18px;}
    .work_sec .inner .tit{align-items:flex-start; flex-direction:column; gap:28px;}
    .work_sec .inner .work_cont{height:300px; margin-top:48px;}
    .benefit_sec .inner .benefit_cont{margin-top:48px;}
    .benefit_sec .inner .benefit_cont .item{width:50%; height:220px;}
    .benefit_sec .inner .benefit_cont .item:nth-child(3n)::after{content:"";}
    .benefit_sec .inner .benefit_cont .item:nth-child(2n)::after{content:unset;}
    .service_sec{background-size:900px auto; background-position:top 80px center;}
    .service_sec .inner .service_cont{margin-top:48px;}
    .service_sec .inner .service_cont .pin-spacer{height:auto!important; margin-bottom:20px!important;}
    .service_sec .inner .service_cont .item{position:relative!important; left:auto!important; top:auto!important; transform:none!important; width:100%!important; height:auto!important;}
    .service_sec .inner .service_cont .item .gsap_container{position:relative!important; transform:none!important; padding:56px 48px; height:auto; min-height:360px;}
}

@media screen and (max-width:768px){
    .work_sec .inner,
    .benefit_sec .inner,
    .service_sec .inner,
    .contact_sec .inner{width:calc(100% - 32px);}
    .sec_text span{font-size:30px; line-height:1.25;}
    .sec_text p{margin-top:18px; font-size:16px; line-height:1.55;}
    .sec_text p.eyebrow{font-size:15px;}
    .sec_btn{width:100%;}
    .sec_btn a{width:fit-content; padding:13px 24px; font-size:14px;}
    .popup_wrap{width:calc(100% - 32px); max-width:400px;}
    .popup_wrap .popup_swiper{height: calc(100% - 44px); min-height: 433px;}
    .popup_wrap .popup_paging{right:12px; bottom:18px; height:24px; padding:3px 12px; font-size:12px;}
    .popup_wrap .popup_bottom{height:44px; padding:0 14px;}
    .popup_wrap .today_close,
    .popup_wrap .popup_close{font-size:13px;}
    .hero_sec{height:620px; min-height:620px; background-position:center top;}
    .hero_sec .hero_text{left:24px; bottom:16%; width:calc(100% - 48px);}
    .hero_sec .hero_text span{font-size:38px; line-height:1.22;}
    .hero_sec .hero_text p{margin-top:22px; font-size:16px; line-height:1.55;}
    .hero_sec .hero_text p.eyebrow{font-size:15px;}
    .work_sec,
    .benefit_sec,
    .service_sec,
    .contact_sec{padding:78px 0;}
    .work_sec .inner .work_cont{height:260px; margin-top:36px;}
    .work_sec .inner .work_cont .swiper-slide a{padding:26px 24px;}
    .work_sec .inner .work_cont .swiper-slide a .work_text span{font-size:15px;}
    .work_sec .inner .work_cont .swiper-slide a .work_text p{font-size:24px;}
    .work_sec .inner .work_cont .swiper-slide a .work_btn{width:46px; height:46px;}
    .work_sec .inner .work_cont .swiper-slide a .work_btn img{width:26px;}
    .benefit_sec .inner .benefit_cont{margin-top:36px;}
    .benefit_sec .inner .benefit_cont .item{width:100%; height:auto; min-height:188px; padding:36px 18px; border-bottom:1px solid #222;}
    .benefit_sec .inner .benefit_cont .item::after{content:unset!important;}
    .benefit_sec .inner .benefit_cont .item .txt span{font-size:18px;}
    .benefit_sec .inner .benefit_cont .item .txt p{font-size:14px; line-height:1.55;}
    .service_sec{background-size:720px auto;}
    .service_sec .inner .service_cont .item .gsap_container{min-height:300px; padding:44px 28px; border-radius:22px;}
    .service_sec .inner .service_cont .item .gsap_container .service_text span{font-size:28px;}
    .service_sec .inner .service_cont .item .gsap_container .service_text p{margin-top:18px; font-size:14px; line-height:1.55;}
    .service_sec .inner .service_cont .item .gsap_container .sec_btn{margin-top:44px;}
    .contact_sec .inner .sec_btn{margin-top:36px;}
}

@media screen and (max-width:475px){
    .work_sec .inner,
    .benefit_sec .inner,
    .service_sec .inner,
    .contact_sec .inner{width:calc(100% - 28px);}
    .sec_text span{font-size:26px;}
    .sec_text p{font-size:15px;}
    .sec_btn a{padding:12px 20px; font-size:13px;}
    .hero_sec{height:560px; min-height:560px;}
    .hero_sec .hero_text{left:18px; width:calc(100% - 36px); top: 18%; bottom: unset;}
    .hero_sec .hero_text span{font-size:32px;}
    .hero_sec .hero_text p{font-size:15px;}
    .work_sec,
    .benefit_sec,
    .service_sec,
    .contact_sec{padding:64px 0;}
    .work_sec .inner .tit{gap:22px;}
    .work_sec .inner .work_cont{height:230px;}
    .work_sec .inner .work_cont .swiper-slide a{padding:22px 18px;}
    .work_sec .inner .work_cont .swiper-slide a .work_text p{font-size:21px;}
    .work_sec .inner .work_cont .swiper-slide a .work_btn{width:40px; height:40px;}
    .work_sec .inner .work_cont .swiper-slide a .work_btn img{width:22px;}
    .benefit_sec .inner .benefit_cont .item{min-height:170px; padding:30px 12px;}
    .service_sec .inner .service_cont .item .gsap_container{padding:36px 22px; min-height:270px;}
    .service_sec .inner .service_cont .item .gsap_container .service_text span{font-size:24px;}
}