@charset "UTF-8";
/* 팝업 사이즈 */
#divpop{ position:absolute; left:120px; top:100px; z-index:1500; visibility:hidden;}
#divpop2{position:absolute; left:650px; top:300px; z-index:1400; visibility:hidden;}
/* #divpop > table, #divpop2 > table {height: 450px;} */
#divpop,#divpop2 table td{font-size:15px;}
#divpop table td img, #divpop2 table td img {width:100%; height:auto;}
#divpop table.pop_check{height:20px !important;}

.inner{position:relative; width: 1580px; margin: 0 auto;}

/* 메인슬라이드 영역 */
#index-mainVisual {position: relative; width: 100%; overflow:hidden;}
#index-mainVisual .swiper {position: relative; z-index: 1; width: 100%; overflow: hidden; height: 100vh !important;}
#index-mainVisual .swiper-slide {text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center; background-size: cover;}
#index-mainVisual .swiper-slide:nth-child(1){background: url(../img/main/main_visual01.jpg) no-repeat center; background-size: cover;}
#index-mainVisual .swiper-slide:nth-child(2){background: url(../img/main/main_visual02.jpg) no-repeat center; background-size: cover;}
#index-mainVisual .swiper-slide:nth-child(3){background: url(../img/main/main_visual03.jpg) no-repeat center; background-size: cover;}
#index-mainVisual .swiper-slide:nth-child(4){background: url(../img/main/main_visual04.jpg) no-repeat center; background-size: cover;}

#index-mainVisual .swiper-slide>div {position: absolute; width: 1600px; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; overflow: hidden; color: #fff; text-align: left;}

#index-mainVisual .swiper-slide .slideTitle {margin-bottom: 50px; color: #fff;}
#index-mainVisual .swiper-slide .slideTitle img{height:80px; transition: all 0.3s;}
#index-mainVisual .swiper-slide p {font-size: 25px; line-height: 1.5; margin-bottom:100px; color: #fff; transition: all 0.3s;}

#index-mainVisual .swiper-slide .vis_viewmore {position: relative; width: 220px; height: fit-content; text-align: left; color: #fff;}
#index-mainVisual .swiper-slide .vis_viewmore a{display: block; width: 100%; height:100%; font-size: 18px; color: #fff; padding-bottom:20px; border-bottom:2px solid #fff;}
#index-mainVisual .swiper-slide .vis_viewmore a::after{position:absolute; display: block; width:36px; height:9px; content:""; background: url(../img/main/viewmore_arrow01.png) no-repeat; top:6px; right:0; transition: all 0.3s;}

#index-mainVisual .swiper-slide.swiper-slide-active .slideTitle {animation-name: text-active-animation; animation-duration: .8s; animation-delay: .5s; animation-fill-mode: both;}
#index-mainVisual .swiper-slide.swiper-slide-active p {animation-name: text-active-animation; animation-duration: .8s; animation-delay: 1s; animation-fill-mode: both;}
#index-mainVisual .swiper-slide.swiper-slide-active .vis_viewmore {animation-name: text-active-animation; animation-duration: .8s; animation-delay: 1.5s; animation-fill-mode: both;}
@keyframes text-active-animation {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/* 버튼 마우스 오버 효과 */
#index-mainVisual .swiper-slide .vis_viewmore:hover {transition: all 0.3s;}
#index-mainVisual .swiper-slide .vis_viewmore:hover a {transition: all 0.3s;}
#index-mainVisual .swiper-slide .vis_viewmore:hover a::after {animation: arrowRight .6s ease-in-out infinite; transition: all 0.3s;}

@keyframes arrowRight {
    0% {right: 0;}
    50% {right: 5px;}
    100% {right: 0;}
}

/* 메인슬라이드 pagination */
#index-mainVisual .swiper-pagination {position: absolute; z-index: 2; width:50px; top: 50%; left:auto; right:40px; height: fit-content; transform: translateY(-50%);}
#index-mainVisual .swiper-pagination span{position:relative; display: block; width: 100%; font-size: 0; background:none; margin: 30px 0;}
#index-mainVisual .swiper-pagination span::after{position: absolute; display: block; width: 10px; height: 5px; background: #fff; content:""; border-radius: 4px; right:0;}
#index-mainVisual .swiper-pagination span.swiper-pagination-bullet-active::after{width: 30px; height: 5px; background: #fff; }

#index-mainVisual .scrolldown{position: absolute; right:9%; bottom:60px; z-index: 999;}
#index-mainVisual .scrollcircle { width: 74px; height: 72px; animation: lotate 5s infinite linear;}
#index-mainVisual .scrollangle i {position: absolute; display: inline-block; color: #fff; width: 17px; text-align:right; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#index-mainVisual .scrollangle i img{display:inline-block; animation: vertical 1.1s ease-in-out infinite;}

@keyframes lotate {
	0% {transform : rotate(0deg)}
	50% {transform : rotate(180deg)}
	100% {transform : rotate(360deg)}
}

@keyframes vertical {
  0% {margin-top: -4px;}
  50% {margin-top: 8px;}
  100% {margin-top: -4px;}
}


/* who we are */
.whoWeAre{padding: 170px 0; font-size: 0;}
.whoWeAre_txtWrap{display: inline-block; width: 50%; padding-left: 9%; box-sizing: border-box; vertical-align: middle;}
.whoWeAre_txtWrap img{ margin-bottom:40px;}
.whoWeAre_txtWrap h2.main_tit01{font-size: 90px; line-height:1; margin-bottom:80px;}
.whoWeAre_txtWrap p{font-size: 20px; line-height: 1.8; margin-bottom:100px;}

.main_viewmore_b {position: relative; width: 200px; height: fit-content; text-align: left; border-bottom:2px solid #000;}
.main_viewmore_b:hover {/* background-color: #E1631B; */  /* transition: all 0.3s; */}
.main_viewmore_b a{display: block; width: 100%; height:100%; font-size: 18px; color: #000; padding-bottom:20px;}
.main_viewmore_b a::after{position:absolute; display: block; width:31px; height:8px; content:""; background: url(../img/main/viewmore_arrow_b.png) no-repeat; top:6px; right:0; transition: all 0.3s;}


/* 버튼 마우스 오버 효과 */
.main_viewmore_b:hover {transition: all 0.3s;}
.main_viewmore_b:hover a {transition: all 0.3s;}
.main_viewmore_b:hover a::after {animation: arrowRight .6s ease-in-out infinite; transition: all 0.3s;}

.whoWeAre_imgWrap{display: inline-block; width: 50%; padding-left: 60px; box-sizing: border-box; vertical-align: middle;}
.whoWeAre_imgWrap .whoWeAre_fade{border-radius: 40px 0 0 40px; overflow: hidden;}
.whoWeAre_imgWrap .slick-slide .image{height: fit-content !important;}
.whoWeAre_imgWrap .slick-slide img{width: 100%;}
.whoWeAre_imgWrap .pc_img{display: inline-block;}
.whoWeAre_imgWrap .tab_img{display: none;}


/* solution & service */
.solutionNservice{background: url(../img/main/section02_bg.jpg) bottom center; }
.solutionNservice .inner{position:relative; font-size: 0; height: fit-content; padding: 130px 0; box-sizing: border-box;}
.solutionNservice_titWrap{position:sticky; display:inline-block; width:50%; color: #fff; top:130px; vertical-align: top;}
.solutionNservice_titWrap h2.main_tit01{font-size:70px; color: #fff; margin-bottom: 60px;}
.solutionNservice_titWrap p{font-size:20px; line-height: 1.8; margin-bottom:100px;}
.solutionNservice_titWrap span{}

.solutionNservice_boxWrap{position:static; display:inline-block; width:50%; word-break: keep-all;}
.solutionNservice_boxWrap.solutionNservice_mobWrap{display: none;}
.solutionNservice_boxWrap .ss_box{display:inline-block; width:calc(50% - 20px); margin-right:40px; vertical-align: top;}
.solutionNservice_boxWrap .ss_box:nth-child(even){margin-right:0; padding-top: 60px;}
.solutionNservice_boxWrap .ss_box:nth-child(n+3){margin-bottom:0;}
.solutionNservice_boxWrap .ss_box > div{position: relative; width:100%; background:#fff; padding:50px 30px; box-sizing: border-box; color:#000; border-radius:20px; transition: all 0.3s; min-height:450px;}
.solutionNservice_boxWrap .ss_box .ss_num{display: flex; flex-wrap: wrap; justify-content: space-between; font-size:13px; color:#ccc; margin-bottom: 50px; transition: all 0.3s;}
.solutionNservice_boxWrap .ss_box .ss_num span{font-weight:500;}
.solutionNservice_boxWrap .ss_box .ss_num b{font-weight:700;}
.solutionNservice_boxWrap .ss_box strong{display:block; width:100%; height: 35px; margin-bottom: 30px;}
.solutionNservice_boxWrap .ss_box:nth-child(1) strong.ss_logo{background: url(../img/main/section02_logo01.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:nth-child(2) strong.ss_logo{background: url(../img/main/section02_logo02.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:nth-child(3) strong.ss_logo{background: url(../img/main/section02_logo03.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:nth-child(4) strong.ss_logo{background: url(../img/main/section02_logo04.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:nth-child(5) strong.ss_logo{background: url(../img/main/section02_logo05.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:nth-child(6) strong.ss_logo{background: url(../img/main/section02_logo06.png) no-repeat;}
.solutionNservice_boxWrap .ss_box p{font-size: 18px; font-weight:700; line-height: 1.5; margin-bottom: 20px;}
/* .solutionNservice_boxWrap .ss_box p i{display: block;} */
.solutionNservice_boxWrap .ss_box ul.main_dot_txt{margin-bottom:50px;}
.solutionNservice_boxWrap .ss_box ul.main_dot_txt li{position: relative; padding-left: 15px; font-size: 16px; margin-bottom:10px;}
.solutionNservice_boxWrap .ss_box ul.main_dot_txt li:last-child{margin-bottom:0;}
.solutionNservice_boxWrap .ss_box ul.main_dot_txt li::before{position:absolute; width:4px; height:4px; border-radius: 50%; background: #000; content:""; top:6px; left:0;}

.ss_viewmore_b {position: absolute; width: 100%; height: fit-content; text-align: right; right:30px; bottom:50px;}
.ss_viewmore_b a{position: relative; display: inline-block; width:  120px; height:100%; font-size: 15px; color: #000; text-align: left; transition: all 0.3s;}
.ss_viewmore_b a::after{position:absolute; display: block; width:30px; height:8px; content:""; background: url(../img/main/viewmore_arrow_b.png) no-repeat; background-size: 100%; top:4px; right:0; transition: all 0.3s;}


/* solution & service 마우스오버 효과*/
.solutionNservice_boxWrap .ss_box:hover > div{background:#0f63c3; color:#fff; transition: all 0.3s;}
.solutionNservice_boxWrap .ss_box:hover .ss_num{color:#fff; transition: all 0.3s;}
.solutionNservice_boxWrap .ss_box:hover:nth-child(1) strong.ss_logo{background: url(../img/main/section02_logo01_on.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:hover:nth-child(2) strong.ss_logo{background: url(../img/main/section02_logo02_on.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:hover:nth-child(3) strong.ss_logo{background: url(../img/main/section02_logo03_on.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:hover:nth-child(4) strong.ss_logo{background: url(../img/main/section02_logo04_on.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:hover:nth-child(5) strong.ss_logo{background: url(../img/main/section02_logo05_on.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:hover:nth-child(6) strong.ss_logo{background: url(../img/main/section02_logo06_on.png) no-repeat;}
.solutionNservice_boxWrap .ss_box:hover ul.main_dot_txt li::before{position:absolute; width:4px; height:4px; border-radius: 50%; background: #fff; content:""; top:6px; left:0; transition: all 0.3s;}

.solutionNservice_boxWrap .ss_box:hover .ss_viewmore_b a{color: #fff; transition: all 0.3s;}
.solutionNservice_boxWrap .ss_box:hover .ss_viewmore_b a::after{background: url(../img/main/viewmore_arrow_w.png) no-repeat; background-size: 100%; animation: arrowRight .6s ease-in-out infinite; transition: all 0.3s;}



/* News */
.mainNews{padding:130px 0; box-sizing: border-box;}
.mainNews .inner{font-size:0;}
.mainNews .news_titWrap{margin-bottom: 60px;}
.mainNews h2.main_tit01{display:inline-block; width:calc(100% - 220px); font-size:70px; color: #000; line-height:1; vertical-align: bottom;}
.mainNews .main_viewmore_b{display:inline-block; width:220px; vertical-align: bottom;} 

.newsContentsWrap{font-size: 0; display: flex; flex-wrap:wrap; flex-direction: row; /*justify-content: space-between;*/}
.newsContentsWrap .cardmenu{display: inline-block; width:calc(25% - 30px); margin-right: 40px; margin-top: 60px;}
.newsContentsWrap .cardmenu:nth-child(-n+4){margin-top: 0;}
.newsContentsWrap .cardmenu:nth-child(4n){margin-right: 0;}

.newsContentsWrap .card {min-height: 100%; background: #fff; box-shadow: none; border-radius: 0; display: flex; flex-direction: column; position: relative; top: 0; border:0;}
.newsContentsWrap .card article {padding:30px 0 0 0; display: flex; flex-direction: column; flex: 1; background-color: white; border-radius: 0;}
.newsContentsWrap .card .title {font-size:20px; color:#000;}
.newsContentsWrap .card .text-detail {margin:20px 0;}
.newsContentsWrap .card p {font-size:16px; color:#000; line-height:1.5;}
.newsContentsWrap .card span { font-size: 16px; color: #aaa; line-height: 1; padding:0;}
.newsContentsWrap .card .tag{display: none;}

@media (min-width: 1025px) and (max-width: 1505px) {
    .solNser_cardWrap {grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 769px) and (max-width: 1024px) {
    .solNser_cardWrap {grid-template-columns: repeat(2, 1fr);}
} 
@media (min-width: 695px) and (max-width: 768px) {
    .solNser_cardWrap {grid-template-columns: repeat(2, 1fr);}
}
@media all and (max-width: 694px) {
    .solNser_cardWrap {grid-template-columns: 1fr;}
    .solNser_cardWrap > div{padding:24px;}
}