@charset "utf-8";

/* research */
.research-wrap{background: url('../../images/main/sec01-bg.png')no-repeat center / cover; padding: 120px 0; overflow: hidden;}
.research-wrap img{width: 100%;}
.research-inner{max-width: 1540px; width: 100%; margin: auto;}
.research-wrap .top-area {text-align: center; position: relative;}
.research-wrap .top-area > p{font-size: 54px; font-family: mb; line-height:50px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;  background: linear-gradient(to right, #3C7CB3, #8C6595); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.research-wrap .top-area::before{content: ''; width: 29.2%; height: 2px; background: #000000; position: absolute; top: 0; right: 0;}
.research-wrap .top-area::after{content: ''; width: 29.2%; height: 2px; background: #000000; position: absolute; top: 0; left: 0;}
.research-wrap .top-area em{display: block; font-size: 54px; font-family: mm; color:#3C7CB3; }

.research-wrap .mid-area > ul{display: flex;  justify-content: space-between; margin-top: 60px;}
.research-wrap .mid-area > ul > li{width: calc(100%/3 - 63px);text-align: center; }
.research-wrap .mid-area > ul > li .img-box{transition: all 0.3s; position: relative;}
.research-wrap .mid-area > ul > li .img-box > img{transition: all 0.3s;}
.research-wrap .mid-area > ul > li:hover .img-box{box-shadow: 0px 0px 25px 10px rgba(0,0,0,0.1);  }
.research-wrap .mid-area > ul > li:hover .img-box > img{filter: brightness(60%);}
.research-wrap .mid-area > ul >li:not(.num2) .img-box{margin-top: 22%;}

.research-wrap .mid-area > ul >li.num2 .img-box{margin-top: 105px; position: relative;}

.mid-area .tit-box > p{font-size: 30px; font-family: sb; color: #000000;}
.mid-area .tit-box > span{font-size: 18px; font-family: sr; color: #666666; margin-top: 32px; display: inline-block;}

.mid-area li.num2 .tit-box{margin-top: 60px;}
.mid-area li.num2 .tit-box > span{margin-top: 0;} 

.research-wrap .go-box{ height: 60px; border: 1px solid #fff; width: 160px;  margin: auto; position: absolute; top: 50%;  left: 50%; transform: translate(-50% , -50%);  opacity: 0; transition: all 0.3s;}

.research-wrap .mid-area > ul > li:hover .go-box{opacity: 1;}

.research-wrap .go-box::before{content: ''; width: 100%; height: 100%; backdrop-filter: blur(5px); position: absolute; top: 0; left: 0;background-blend-mode: overlay; }

.research-wrap .go-box a{font-size: 16px; font-family: sr; color: #fff; padding-right: 50px; position: relative; width: 100%; height: 100%;display: flex; align-items: center; padding: 0 20px;}

.research-wrap .go-box a::before{content: ''; background: url(../../images/main/go-arrow.png)no-repeat; width: 25px; height: 9px; position: absolute; top: 50%; margin-top: -4px; right: 12px;    
   image-rendering: -webkit-optimize-contrast; /* Chrome 및 Safari에 대한 설정 */ }

.research-wrap .go-box:hover a::before{animation: horizontal 1.3s ease-in-out infinite; }

@keyframes horizontal {
    0% {
        background-position: center;
    }
        50% {
        background-position: calc(50% + 5px) center;
    }
        100% {
        background-position: center;
    }
}

.research-wrap .go-box:hover{background: rgba(0, 0, 0, 0.3);}

/* swiper */
.research-wrap .mid-area > ul > li.swiper-slide-active{margin-top: 0px;}
.research-wrap .mid-area > ul > li.swiper-slide-active .tit-box{visibility: visible;}
.research-wrap .mid-area > ul > li.swiper-slide-active .go-box{opacity: 1;}
.research-wrap .mid-area > ul > li.swiper-slide-active .img-box{box-shadow: 0px 0px 25px 10px rgba(0,0,0,0.1);  }
.research-wrap .mid-area > ul > li.swiper-slide-active .img-box > img{filter: brightness(60%);}

@media screen and (max-width:1880px){
    .research-inner{padding: 0 30px;}
    .service-inner{padding: 0 30px;}
}

@media screen and (max-width:1400px){
    .research-wrap .top-area > p{font-size: 47px;}
    .research-wrap .top-area em{font-size: 47px;}
    .research-wrap .mid-area > ul > li{width: calc(100% / 3 - 35px);}
}

@media screen and (max-width:1200px){
    .research-wrap .go-box{width: 150px; height: 50px; }
    .research-wrap .go-box a{font-size: 15px;}
    .mid-area .tit-box > p{font-size: 28px;}
    .mid-area .tit-box > span{font-size: 16px;}
    .research-wrap .go-box:hover a::before{animation: none;}
}


@media screen and (max-width:1041px){
    .research-wrap{max-height: 780px;}
    .research-wrap{padding: 80px 0;}
    .research-wrap .top-area > p{font-size: 40px;}
    .research-wrap .top-area em{font-size: 40px;}
    .research-wrap .list-box{display: flex; flex-direction: column;}
    .research-wrap .mid-area > ul{margin-top: 160px;}
    .research-wrap .mid-area > ul > li{margin-top: 105px; transition: all 0.3s;}
    .research-wrap .mid-area .tit-box{visibility: hidden; transition: all 0.4s;}
    .research-wrap .mid-area > ul >li:not(.num2) .tit-box{order: 2; margin-top: 35px; }
    .research-wrap .mid-area > ul >li:not(.num2) .img-box{order: 1; margin-top: 0;}
    .research-wrap .mid-area > ul >li.num2 .img-box{margin-top: 0;}
    .mid-area li.num2 .tit-box{margin-top: 35px;}
    .mid-area .tit-box > p{font-size: 24px;}
    .mid-area .tit-box > span{font-size: 15px; margin-top: 0;}
    .research-wrap .control-btn{position: absolute; top: 49%; width: 100%;z-index: 99;}
    .research-wrap .control-btn .btn-box{max-width: 45%; width: 100%; height: 100%; margin: 0 auto;  position: relative; }
    .research-wrap .prev , .research-wrap .next{width: 23px; height: 41px; background: url(../../images/main/prev02-ic.png) no-repeat center / cover; position: absolute; top: 0; transition: all 0.3s;}
    .research-wrap .prev:hover , .research-wrap .next:hover{background: url(../../images/main/prev02-ic-on.png) no-repeat center / cover; }
    .research-wrap .prev {left: 0;}
    .research-wrap .next{transform: rotate(180deg); right: 0;}
    .research-wrap .mid-area > ul > li .tit-box{max-height: 0;overflow: hidden; transition: max-height 0.3s;}
    .research-wrap .mid-area > ul > li.swiper-slide-active .tit-box{max-height: 81px;}
}

@media screen and (max-width:768px){
    .research-wrap{padding: 55px 0; max-height: 680px;}
    .research-inner{padding: 0;}
    .research-wrap .top-area::before{display: none;}
    .research-wrap .top-area::after{display: none;}
    /* .research-wrap .mid-area > ul > li{padding: 0 15px;} */
}

@media screen and (max-width:650px){
    .research-wrap{padding: 45px 0 0 0;}
    .research-wrap .top-area{margin-top: 0;}
    .research-wrap .top-area > p{line-height: 1;}
    .research-wrap .mid-area > ul{margin-top: 127px;}
    /* .research-wrap .mid-area > ul > li{padding: 0 15px;} */
    .research-wrap .control-btn .btn-box{max-width: 74%;} 
    .research-wrap .control-btn{top: 38%;}
}

@media screen and (max-width:550px){
    .research-wrap{ max-height: 625px; padding: 45px 0 38px 0;}
    .research-wrap .control-btn{top: 43%;}
}

/* service */
.service-wrap {background: url(../../images/main/service-bg.jpg) no-repeat center / cover; padding: 120px 0;}
.service-wrap .service-inner{max-width: 1540px; width: 100%; margin: auto;}
.service-wrap .left-box > p{font-size: 52px; font-family: mb; color: #fff; margin-bottom: 25px;}
.service-wrap .left-box > span{font-size: 18px; font-family: sr; color: #fff;}
.service-wrap .left-box em{font-size: 52px; font-family: mm; color: #fff;}
.service-wrap .service-inner{display: flex; justify-content: space-between;}
.service-wrap .left-area{width: 50%;}
.service-wrap .right-area{width:62.4%; position: relative; left: 12%;}
/* .service-wrap .swiper-wrapper .swiper-slide{height: 470px;} */
.service-wrap .swiper-wrapper .swiper-slide .box-on{opacity: 0; transition: all 0.5s;}
.service-wrap .swiper-wrapper .swiper-slide.on .box-on{opacity: 1; background: rgba(0, 0, 0, 0.2); top: 0;}
.service-wrap .right-area li.swiper-slide-active .box-on{opacity: 1; top: 0; background: rgba(0, 0, 0, 0.2);}
.service-wrap .right-area li.swiper-slide-active .txt-box{top: 0; bottom: unset; opacity: 1;}
.service-wrap .txt-box{position: absolute; top: 64%; left:0; opacity: 1; transition: all 0.5s ease; padding: 40px 0 60px 40px; }
.service-wrap .list-box{position: relative;}
.service-wrap .swiper-wrapper .swiper-slide.on .txt-box{top: 0; bottom: unset; opacity: 1;}
.service-wrap .tit > p{font-size: 26px; font-family: sr; color: #fff;}
.service-wrap .tit > span{font-size: 16px; font-family: mr; color: #B9B9B9;}
.service-wrap .box-on{position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; padding: 120px 40px 0px 40px; opacity: 0; transition: all 0.3s;}
.service-wrap .txt-list{font-size: 15px; font-family: sr; color: #fff; margin-top: 40px;}
.service-wrap .txt-box-on{padding-top: 60px;}
.service-wrap .btn-box{position: absolute; right: 0; bottom: 0; padding: 0 40px 60px 0;}
.service-wrap .btn-box > a{font-size: 18px; font-family: sr; color: #fff; width: 80px; height: 80px; border-radius: 50px; border:1px solid #fff; display: inline-block; display: flex; align-items: center; justify-content: center;}
.service-wrap .img-box {margin-right: 45px; position: relative; height: 470px;}
.service-wrap .img-box > img{width: 100%; height: 100%;}

/* control */
.service-wrap .control{display: flex; align-items: center; margin-top: 55px;}
.service-wrap .control .state{display: flex; align-items: center;}
.service-wrap .control .state span{font-size: 14px; font-family: sr; color: #fff; line-height: 1;}
.service-wrap .control .paging{width: 110px; height: 1px; position: relative; margin: 0 15px 0 20px;}
.service-wrap .control .paging::before{content: ''; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; opacity: 0.2;}
.service-wrap .control .swiper-pagination-progressbar-fill{background: #fff;}
.service-wrap .control-btn{display: flex;}
.service-wrap .control-btn button{text-indent: -9999px; width: 20px; height: 12px;}
.service-wrap .control .control-btn {margin-left: 35px;}
.service-wrap .control .control-btn .prev{background: url('../../images/main/prev-ic.png') no-repeat center;margin-right: 10px; opacity: 0.3; transition: all 0.2s;}
.service-wrap .control .control-btn .next{background: url('../../images/main/next-ic.png') no-repeat center; margin-left: 10px; opacity: 0.3; transition: all 0.2s;}
.service-wrap .control .control-btn .prev:hover ,.service-wrap .control .control-btn .next:hover{opacity: 1;}
.service-wrap .control .control-btn .stop { display: none;background: url('../../images/main/stop-ic.png') no-repeat center;}
.service-wrap .control .control-btn .stop.on{display: block;}
.service-wrap .control .control-btn .play { background: url('../../images/main/play-ic.png') no-repeat center;}
.service-wrap .control .control-btn .play {display: none;}
.service-wrap .control .control-btn .play.on {display: block;}
.mo-control{display: none;}

@media screen and (max-width:1300px){
    .service-wrap .right-area{width: 70%;}
    .service-wrap .img-box{height: 400px;}
    .service-wrap .txt-list{margin-top: 0;}
    .service-wrap .btn-box{padding: 0 40px 30px 0;}
    .service-wrap .left-box > p{font-size: 45px;}
    .service-wrap .left-box > span{font-size: 16px;}
    .service-wrap .left-box em{font-size: 45px;}
}

@media screen and (max-width:1200px){
    .service-wrap{padding: 80px 0;}
}

@media screen and (max-width:1100px){
    .service-wrap .service-inner{display: block;}
    .service-wrap .left-area{width: 100%; margin-bottom: 35px;}
    .service-wrap .left-box > p{margin-bottom: 0;}
    .service-wrap .right-area{width: 100%; left: 0;}
    .service-wrap .img-box{margin-right: 30px;}
    /* .service-wrap .img-box{height: 340px;} */
}

@media screen and (max-width:900px){
    .service-wrap .left-area{padding: 0 20px;}
}

@media screen and (max-width:800px){
    .service-wrap .img-box{height: 340px;}
    .service-wrap{padding: 35px 0 48px 0;}
    .service-wrap .service-inner{padding: 0;}
    .service-wrap .img-box{margin-right: 0px; margin: 0 30px;} 
    .service-wrap .left-box > p{font-size: 40px;}
    .service-wrap .control{display: none;} 
    .service-wrap .left-area{position: relative;}

    .service-wrap .mo-control{display: block;}
    .service-wrap .mo-control {position: absolute; top: 45%; width: 100%;z-index: 99; margin-top: -11.5px;}
    .service-wrap .mo-control .control-btn{margin-left: 0; max-width: 71%; width: 100%; height: 100%; margin: 0 auto; position: relative; display: block; }
    .service-wrap .mo-control .control-btn .prev{width: 23px; height: 41px; background: url(../../images/main/prev02-ic.png) no-repeat center / cover;margin-right: 0px; opacity: 1; transition: none; position: absolute; left: 0;}
    .service-wrap .mo-control .control-btn .next{width: 23px; height: 41px; background: url(../../images/main/prev02-ic.png) no-repeat center / cover; margin-left: 0px; opacity: 1; transition: none; transform: rotate(180deg); position: absolute; right: 0;}
    .service-wrap .swiper-wrapper .swiper-slide .txt-box{top: 0;opacity: 1;}
    .service-wrap .swiper-wrapper .swiper-slide .box-on{opacity: 1; top: 0; background: rgba(0, 0, 0, 0.2);}
}

@media screen and (max-width:600px){
    .service-wrap .tit > p{font-size: 20px;}
    .service-wrap .tit > span{font-size: 12px;}
    .service-wrap .txt-list{font-size: 12px;}
    .service-wrap .txt-box{padding: 40px 0 60px 30px;}
    .service-wrap .btn-box{padding: 0 30px 30px 0;}
    .service-wrap .btn-box > a{width: 60px; height: 60px; font-size: 15px;}
    .service-wrap .box-on{padding: 115px 40px 0 30px;}
}