@charset "utf-8";
/*메인 스와이프*/
.mainSwiper {position: relative;}
.mainSwiper .main-slide-item{height: 100vh;background-size: cover;background-position: center;}
.mainSwiper .main-slide-item video{width: 100%;height: 100%;pointer-events: none;object-fit: cover;}
.mainSwiper .main-slide-item .bg-dim{position: absolute;background-color: rgba(0,0,0,0.2); width:100%; height:100%; top:0; left:0; pointer-events:none; }
.mainSwiper .company-slogan {width:100%; position:absolute; font-family:'Noto Sans KR','Nanum Gothic','나눔고딕'; top:calc(50% - 140px); left:50%; transform: translate(-50%,-50%); text-align:center; display:flex; flex-direction:column; row-gap:10px; height:500px; justify-content:flex-end; }

.mainSwiper .company-slogan .small-box-text { display:inline-block; font-size:22px; font-weight:600; letter-spacing:-0.03em; color:#ffffff; background:#7736a9; border:0px solid #7736a9; padding:13px 24px 16px 24px; transition: all 0.3s ease-in-out; -webkit-border-radius:32px; -moz-border-radius:32px; border-radius:32px; margin-bottom:30px; }
.mainSwiper .company-slogan .slogan {font-size:42px; font-family:'AritaBuri','Noto Sans KR','Nanum Gothic','나눔고딕'; line-height:1.2; font-weight:600; letter-spacing:-0.03em; color:#ffffff; }
.mainSwiper .company-slogan .text {font-size:18px; font-weight:600; letter-spacing:normal; padding-top:0px; line-height:1.4; color:rgba(255,255,255,1.0); }
.mainSwiper .company-slogan .bipaf-title {font-size:18px; font-family:'Noto Sans KR','Nanum Gothic','나눔고딕'; padding-top:30px; line-height:1.4; font-weight:400; letter-spacing:-0.05em; color:#ffffff; opacity:1; transition-duration:0.6s; transition-delay:0.2s; transform:translateY(10px);}
.mainSwiper .company-slogan .bipaf-text {font-size:18px; font-family:'Noto Sans KR','Nanum Gothic','나눔고딕'; padding-top:10px; line-height:1.4; font-weight:400; letter-spacing:-0.03em; color:#ffffff; opacity:1; transition-duration:0.6s; transition-delay:0.5s; transform:translateY(10px);}

.mainSwiper .bipaf-slogan {width:100%; position:absolute; font-family:'Noto Sans KR','Nanum Gothic','나눔고딕'; bottom:70px; left:50%; transform: translate(-50%,-50%); text-align:center; display:flex; flex-direction:column; row-gap:5px; height:100px; justify-content:flex-end; }
.mainSwiper .bipaf-slogan .bipaf-title {font-size:24px; font-family:'Noto Sans KR','Nanum Gothic','나눔고딕'; line-height:1.2; font-weight:500; letter-spacing:-0.03em; color:#ffffff; opacity:1; transition-duration:0.6s; transition-delay:0.2s; transform:translateY(10px);}
.mainSwiper .bipaf-slogan .bipaf-text {font-size:28px; font-family:'Noto Sans KR','Nanum Gothic','나눔고딕'; font-weight:700; letter-spacing:-0.03em; padding-top:10px; line-height:1.2; color:#ffffff; opacity:1; transition-duration:0.6s; transition-delay:0.5s; transform:translateY(10px);}

.mainSwiper .swiper-pagination {position: absolute !important; left:50% !important; bottom:280px !important; transform: translate(-50%, -50%) !important; }
.mainSwiper .swiper-pagination .swiper-pagination-bullet {width:15px; height:15px; background-color:rgba(255,255,255,0.4);opacity: 1;border-radius:25px; transition-duration:0.3s; margin:3px;}
.mainSwiper .swiper-pagination .swiper-pagination-bullet-active {background-color:#ffffff; width:30px;}

/*.mainSwiper  .scroll_bar {position:fixed; z-index:1; left:50%; bottom:0; transform:translateX(-50%); text-align:center; transition:all 0.5s ease-in-out;}*/
.mainSwiper  .scroll_bar {position:fixed; z-index:1; left:100px; bottom:0; transform:translateX(-50%); text-align:center; transition:all 0.5s ease-in-out;}
.mainSwiper  .scroll_bar p {font-size:16px; font-weight:500; letter-spacing:0.02em; color:#fff; padding-bottom:12px;}
.mainSwiper  .scroll_bar .bar {display: block;position: relative;width: 1px;height: 80px;background: rgba(255, 255, 255, 0.2);margin: 0 auto;overflow: hidden;}
.mainSwiper  .scroll_bar .bar::after {content: '';width: 1px;height: 80px;position: absolute;left: 0;transform: translate3d(0, -100%, 0);background: #fff;animation: barAnimation cubic-bezier(0.65, 0, 0.35, 1) 2s infinite;}

/*.mainSwiper .company-slogan .slogan br {display: none;}*/
.mainSwiper .company-slogan .slogan {padding-bottom:0px;}

@keyframes barAnimation {
    0% {-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
    90% {-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
    100% {-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
}

.mainSwiper .swiper-slide-active .company-slogan .slogan, .mainSwiper .swiper-slide-active .logo-slogan .slogan {opacity: 1;transform: translateY(0);}
.mainSwiper .swiper-slide-active .company-slogan .text, .mainSwiper .swiper-slide-active .logo-slogan .text {opacity: 1;transform: translateY(0);}
.mainSwiper .swiper-slide-active .company-slogan .round-box, .mainSwiper .swiper-slide-active .logo-slogan .round-box {opacity: 1;transform: translateY(0);}
.mainSwiper .swiper-slide-active .company-slogan .round-text, .mainSwiper .swiper-slide-active .logo-slogan .round-text {opacity: 1;transform: translateY(0);}
.mainSwiper .swiper-slide-active .company-slogan .logo-box, .mainSwiper .swiper-slide-active .logo-slogan .logo-box {opacity: 1;transform: translateY(0);}

.mainSwiper .swiper-buttons{position:absolute; width:220px; right:calc(((100% - 1800px) / 2)); bottom:180px;transform: translateX(-40px);z-index:99;}
.mainSwiper .swiper-buttons .swiper-button-prev{background-image: url("/image/main/visual/left-arrow2.png");background-size: cover;width:90px;height:90px; transition: all 0.3s ease-in-out;}
.mainSwiper .swiper-buttons .swiper-button-prev::after{content:none;}
.mainSwiper .swiper-buttons .swiper-button-prev:hover{background-image: url("/image/main/visual/left-arrow2_on.png");background-size: cover;width:90px;height:90px; transition: all 0.3s ease-in-out;}
.mainSwiper .swiper-buttons .swiper-button-next{background-image: url("/image/main/visual/right-arrow2.png");background-size: cover;width:90px;height:90px; transition: all 0.3s ease-in-out;}
.mainSwiper .swiper-buttons .swiper-button-next::after{content:none;}
.mainSwiper .swiper-buttons .swiper-button-next:hover{background-image: url("/image/main/visual/right-arrow2_on.png");background-size: cover;width:90px;height:90px; transition: all 0.3s ease-in-out;}

@media screen and (max-width:640px){
    .mainSwiper .company-slogan {top:calc(50% - 40px); left:50%; row-gap:10px; height:250px;}
    .mainSwiper .company-slogan .slogan {font-size:32px; line-height:1.3;}
    .mainSwiper .company-slogan .text {font-size:14px; line-height:1.4;}
    
    .mainSwiper .swiper-pagination {bottom:80px;}
    .mainSwiper .swiper-pagination .swiper-pagination-bullet {width: 10px;height: 10px;}
    .mainSwiper .swiper-pagination .swiper-pagination-bullet-active {width: 20px;}
    .mainSwiper .swiper-buttons {position: absolute;width: 150px;right: 50%;bottom: 180px;transform: translateX(50%);z-index: 1;}
    .mainSwiper .swiper-buttons {display:none;}
    
    .mainSwiper .company-slogan .small-box-text { font-size:18px; font-weight:600; letter-spacing:-0.03em;  padding:7px 14px 9px 14px; margin-bottom:24px; }
    .mainSwiper .company-slogan .slogan br {display:block;}
    
    .mainSwiper .bipaf-slogan {bottom:120px; row-gap:5px; }
    .mainSwiper .bipaf-slogan .bipaf-title {font-size:14px; }
    .mainSwiper .bipaf-slogan .bipaf-text {font-size:16px;}
}

@media screen and (max-width:420px){
    .mainSwiper .company-slogan {top:calc(50% - 40px); left:50%; row-gap:10px; height:200px;}
    .mainSwiper .company-slogan .slogan {font-size:32px;}
    /*.mainSwiper .swiper-pagination {top:calc(50% + 140px);}*/
    .mainSwiper .swiper-pagination .swiper-pagination-bullet {width: 10px;height: 10px;}
    .mainSwiper .swiper-pagination .swiper-pagination-bullet-active {width: 20px;}
}


.section .wrap_{width: 1600px; margin: auto;}
.section *{font-family:'Noto Sans KR','Nanum Gothic','나눔고딕',arial; font-weight: 400; line-height: 1; color:#000;}
.section .m1660{display: none;}
.section .m1280{display: none;}
.section .m640{display: none;}

@media screen and (max-width:1660px){
    .section .wrap_{width: 100%; padding-left:30px; padding-right: 30px;}
    .section .m1660{display: block;}
    .section .m1280{display: none;}
    .section .m640{display: none;}
}
@media screen and (max-width:1280px){
    .section .wrap_{padding-left:20px; padding-right: 20px;}
    .section .m1660{display: none;}
    .section .m1280{display: block;}
    .section .m640{display: none;}
}
@media screen and (max-width:640px){
    .section .wrap_{padding-left:15px; padding-right: 15px;}
    .section .m1660{display: none;}
    .section .m1280{display: none;}
    .section .m640{display: block;}
}