/* common */
.inner_container {width: 95%; max-width: 1320px; margin: 0 auto; position: relative;}
.main_tits {line-height: 1.333; position: relative; width: max-content;}
.main_sub_tit {line-height: 1; padding-right: 22px; position: relative; width: max-content; display: block;}
.main_sub_tit::after {content: ''; position: absolute; right: 0; bottom: 5px; background: #C30D23; width: 12px; height: 12px; border-radius: 50%;}
.btn {height: auto; line-height: normal; padding: 0;}
.btn a {display: flex; justify-content: center; align-items: center; gap: 20px; border: 1px solid #222; border-radius: 50px; transition: all .3s ease;}
.btn a:hover {background-color: #C30D23; border-color: #C30D23;}
.arrow.arrow1 {background: url(../img/main/right_arrow.svg) no-repeat; background-size: cover; width: 13px; height: 9px; display: block;}




/* banner */
.banner_section {position: relative; height: 900px;}
.banner_section .swiper {height: 100%; position: relative;}
.banner_section .swiper .swiper-slide {position: relative;}
.banner_section .swiper .swiper-slide .swiper-slide-cover {position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: transparent no-repeat 50% 50% / cover; z-index: -11;}
.banner_section .swiper .swiper-slide.slide1 .swiper-slide-cover {background: url(../img/main/main_visual1.jpg) no-repeat center; background-size: cover; transform-origin: 50% 50%;}
.banner_section .swiper .swiper-slide.slide2 .swiper-slide-cover {background: url(../img/main/main_visual2.jpg) no-repeat center; background-size: cover; transform-origin: 50% 50%;}
.banner_section .swiper .swiper-slide.slide3 .swiper-slide-cover {background: url(../img/main/main_visual3.jpg) no-repeat center; background-size: cover; transform-origin: 50% 50%;}
.banner_section .swiper .swiper-slide .inner_container {height: 100%;}
.banner_section .swiper .swiper-slide .txts {position: absolute; left: 0; top: 58%; transform: translateY(-50%); color: #fff;}
.banner_section .swiper .swiper-slide .txts h2 {line-height: 1.264; margin-bottom: 34px;}

.paging_box {position: relative;}
.paging_box .slide_paging {width: 290px; align-items: center; color: #fff; z-index: 5; position: absolute; left: 0; bottom: 100px;}
.paging_box .slide_paging .pagination_container {justify-content: space-between; align-items: center; width: calc(100% - 27px);}
.paging_box .slide_paging .pagination_container .swiper-pagination {width: 40px; font-size: 15px; font-weight: 400; text-align: left; position: relative; bottom: auto;}
.paging_box .slide_paging .pagination_container .swiper-pagination .swiper-pagination-current {font-size: 20px;}
.paging_box .slide_paging .pagination_container .swiper-total-page {opacity: .5;}
.paging_box .slide_paging .pagination_container .progress_box {width: calc(100% - 40px); height: 2px; position: relative;}
.paging_box .swiper-progress-bar {position: relative; display: block; width: calc(100% - 60px); z-index: 1; height: 3px;}
.paging_box .swiper-progress-bar .slide_progress-bar {position: absolute; height: 3px; background: rgba(255,255,255, .5); width: 100%; clear: both; opacity: 0; bottom: 0; left: 0;}
.paging_box .swiper-progress-bar .slide_progress-bar::after {content: ''; position: absolute; top: 0; left: 0; background: #fff; height: 100%; width: 0; transition: .1s width linear;}
.paging_box .swiper-progress-bar.active .slide_progress-bar {opacity: 1;}
.paging_box .swiper-progress-bar.animate .slide_progress-bar::after {transition: width linear; transition-delay: unset; width: 100%; transition-duration: 3s;}
.paging_box .slide_paging .pagination_container .swiper-pagination2 {height: 2px; width: 100%; background: rgba(255,255,255, .2);}
.paging_box .slide_paging .pagination_container .swiper-pagination2 .swiper-pagination-progressbar-fill {background: #fff;}
.paging_box .slide_paging .btns_container {width: 30%; height: 100%; position: relative;}
.paging_box .slide_paging .ppBtn {width: 15px; height: 15px; position: absolute; left: 48%; top: 50%; transform: translate(-50%, -50%); cursor: pointer;}
.paging_box .slide_paging .ppBtn .mainslide_pause {display: block; width: 100%; height: 100%; background: url(../img/main/stop.png) no-repeat; background-size: auto; background-position: center;}
.paging_box .slide_paging .ppBtn .mainslide_play {display: none; width: 100%; height: 100%; background: url(../img/main/play.png) no-repeat; background-size: 18px; background-position: center;}




/* PRODUCT */
.product_section {height: 950px; height: 49.55vw; overflow: hidden; position: relative;}
.product_section::before {content: 'NEXT WATER PLAN'; font-size: 220px; font-size: 11.5vw; font-weight: 800; color: #F6F6F6; position: absolute; bottom: 17%; left: 50%; transform: translateX(-50%); width: max-content;}
.product_section .swiper_wrapper {position: absolute; left: 25%; top: 0; padding-left: 15%; padding-top: 150px; padding-top: 7.28vw; width: 75%;}
.product_section .swiper_wrapper .product-swiper {width: 100%; overflow: hidden;} 
.product_section .product-swiper .swiper-slide {background-repeat: no-repeat; background-size: cover; padding: 55px 40px; color: #fff; height: 31.3vw; border-radius: 20px; overflow: hidden;}
.product_section .product-swiper .swiper-slide.civil {background-image: url(../img/main/product_list1_bg.png);}
.product_section .product-swiper .swiper-slide.arch {background-image: url(../img/main/product_list2_bg.png);}
.product_section .product-swiper .swiper-slide.const {background-image: url(../img/main/product_list3_bg.png);}
.product_section .product-swiper .swiper-slide.elec {background-image: url(../img/main/product_list4_bg.png);}
.product_section .product-swiper .swiper-slide.plastic {background-image: url(../img/main/product_list5_bg.png);}
.product_section .product-swiper .swiper-slide::before {content: ''; opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(195, 13, 35, 0.8); backdrop-filter: blur(15px); z-index: 1; transition: all .3s ease;}
.product_section .product-swiper .swiper-slide:hover::before {opacity: 1;}
.product_section .product-swiper .swiper-slide a {color: #fff; font-weight: 300;}
.product_section .product-swiper .swiper-slide a:hover {text-decoration: underline;}
.product_section .product-swiper .swiper-slide div {position: relative; z-index: 5;}
.product_section .product-swiper .swiper-slide h4 {margin: 10px 0;}
.product_section .product-swiper .swiper-slide ul {padding-top: 20px; opacity: 0; transition: all .2s ease; transform: translateY(10px);}
.product_section .product-swiper .swiper-slide:hover ul {opacity: 1; transform: translateY(0);}
.product_section .product-swiper .swiper-slide ul li + li {margin-top: 7px;}
.product_section .product-swiper .swiper-slide .view {position: absolute; right: 30px; bottom: 30px; z-index: 5;}
.product_section .product-swiper .swiper-slide .view a {font-weight: 400; font-size: 15px; display: flex; align-items: center; gap: 10px;}
.product_section .product-swiper .swiper-slide .view a .arrow {filter: brightness(1000%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid #fff; background-size: 15px 11px; background-position: center;}
.product_section .info .btns_arrow {position: relative; height: 54px;}
.product_section .info .swiper-button-prev, .product_section .info .swiper-button-next {width: 54px; height: 54px; border: 1px solid #000; border-radius: 100%; margin-top: 0; transform: translateY(-50%); transition: all .3s ease;}
.product_section .info .swiper-button-prev:hover, .product_section .info .swiper-button-next:hover {background-color: #C30D23; border-color: #C30D23;}
.product_section .info .swiper-button-prev {left: 0;}
.product_section .info .swiper-button-next {left: 64px;}
.product_section .info .swiper-button-prev::before, .product_section .info .swiper-button-next::before {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 15px; height: 11px;}
.product_section .info .swiper-button-prev:hover::before, .product_section .info .swiper-button-next:hover::before {filter: brightness(1000%);}
.product_section .info .swiper-button-prev::before {background: url(../img/main/left_arrow.svg) no-repeat;}
.product_section .info .swiper-button-next::before {background: url(../img/main/right_arrow.svg) no-repeat;}
.swiper-button-prev::after, .swiper-button-next::after {display: none;}




/* R&D Center */
.center_section {background: url(../img/main/center_bg.jpg) no-repeat; background-size: cover; height: 800px; color: #fff;}
.center_section .main_tits {margin-bottom: 25px;}
.center_section ul {padding: 20px 0; row-gap: 40px; justify-content: space-between;}
.center_section ul li {width: calc((100% - 80px) / 3); background-color: rgba(255,255,255, .08); border-radius: 20px; height: fit-content; backdrop-filter: blur(20px); padding: 40px 0; text-align: center; cursor: pointer; transform: translateY(0); transition: all .5s ease; position: relative;}
.center_section ul li:hover {background-color: rgba(195, 13, 35, 0.8); transform: translateY(-20px);}
.center_section ul li a {color: #fff;}
.center_section ul li h4 {margin: 20px 0 8px;}
.center_section ul li p {opacity: .5;}
.center_section ul li p.view {opacity: 0; height: 0; transition: all .3s ease; margin-top: 10px; padding-bottom: 10px;}
.center_section ul li:hover .view {opacity: 1; height: auto; padding-top: 10px; margin-top: 20px;}




/* DATA ROOM */
.notice_section .dfbox {justify-content: space-between;}
.notice_section .info {width: 255px;}
.notice_section .info .btn {padding: 0; text-align: left;}
.notice_section .info .btn a {padding: 18px 32px; width: fit-content;}
.notice_section .info .btn a .arrow {transition: all .5s ease;}
.notice_section .info .btn a:hover {border-color: #C30D23; color: #fff;}
.notice_section .info .btn a:hover .arrow {filter: brightness(1000%);}
.notice_section .notice_wrap {width: calc(100% - 255px);}
.notice_section .notice_wrap .n_contents {border-bottom: 1px solid #E6E6E6;}
.notice_section .notice_wrap .n_contents:hover {background-color: #F8F8F8;}
.notice_section .notice_wrap .n_contents:first-child {border-top: 1px solid #E6E6E6;}
.notice_section .notice_wrap .n_contents .dfbox {gap: 45px; padding: 35px 45px; align-items: center;}
.notice_section .notice_wrap .n_contents .dates {width: 58px; text-align: center;}
.notice_section .notice_wrap .n_contents .conts {width: calc(100% - 103px); text-align: left;}
.notice_section .notice_wrap .n_contents .conts .n_content {margin-top: 15px; color: #777;}
.notice_section .notice_wrap .n_contents .n_date.fs_40 {margin-bottom: 5px; color: #C30D23;}
.notice_section .notice_wrap .n_contents .n_date.fs_14 {color: #777;}




/* 하단배너 */
.bottBanner_section .service, .bottBanner_section .contact {width: 50%; height: 600px; color: #fff; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; background-repeat: no-repeat; background-size: cover;}
.bottBanner_section .service {background-image: url(../img/main/service_bg.jpg);}
.bottBanner_section .contact {background-image: url(../img/main/contact_bg.jpg);}
.bottBanner_section .service::before, .bottBanner_section .contact::before {content: ''; width: 100%; height: 100%; background: rgba(255,255,255, .05); backdrop-filter: blur(25px); position: absolute;  left: 0; top: 0; opacity: 0; z-index: 0; transition: all .3s ease;}
.bottBanner_section .service:hover::before, .bottBanner_section .contact:hover::before {opacity: 1;}
.bottBanner_section h3, .bottBanner_section small, .bottBanner_section a {z-index: 2; position: relative;}
.bottBanner_section h3 {text-align: center;}
.bottBanner_section a {color: #fff;}
.bottBanner_section .btn.dfbox {gap: 10px;}
.bottBanner_section .btn a {border-color: #fff; padding: 18px 38px;}
.bottBanner_section .btn a:hover {border-color: #C30D23;}
.bottBanner_section .arrow {filter: brightness(1000%);}




@media (min-width: 1921px) {
  /* PRODUCT */
  .product_section {height: 49.55vw;}
}

@media (max-width: 1600px) {
  /* common */
  .main_sub_tit::after {width: 0.750vw; height: 0.750vw;}

  /* banner */
  .banner_section {height: 56.250vw;}

  /* PRODUCT */
  .product_section {height: 56.55vw;}
  .product_section .product-swiper .swiper-slide {padding: 3.438vw 2.500vw; height: 37vw;}
  .product_section .product-swiper .swiper-slide h4 {margin: 0.625vw 0;}
  .product_section .product-swiper .swiper-slide ul {padding-top: 1.050vw;}

  /* R&D Center */
  .center_section {height: 50.000vw;}
  .center_section ul li {padding: 2.500vw 0;}
  .center_section ul li h4 {margin: 1.250vw 0 0.500vw;}
  .center_section ul li p.view {margin-top: 0.625vw; padding-bottom: 0.063vw;}
  .center_section ul li img {width: 85px;}

  /* DATA ROOM */
  .notice_section .info {width: 15.938vw;}
  .notice_section .info .btn a {padding: 1.125vw 2.000vw;}
  .notice_section .notice_wrap {width: calc(100% - 15.938vw);}

  /* 하단배너 */
  .bottBanner_section .service, .bottBanner_section .contact {height: 37.500vw;}
  .bottBanner_section .btn a {padding: 1.125vw 2.375vw; gap: 1.250vw;}
}

@media (max-width: 1024px) {
  /* common */
  .main_sub_tit::after {width: 1.172vw; height: 1.172vw;}

  /* banner */
  .banner_section {height: 73.242vw;}
  .paging_box .slide_paging {bottom: 80px;}

  /* PRODUCT */
  .product_section {height: auto; overflow: hidden;}
  .product_section::before {font-size: 11.2vw; bottom: 13%;}
  .product_section .swiper_wrapper {position: relative; left: 0; width: 100%; padding-left: 4%;}
  .product_section .product-swiper .swiper-slide {padding: 5.371vw 3.906vw; height: 57.813vw;}
  .product_section .product-swiper .swiper-slide h4 {margin: 0.977vw 0;}
  .product_section .product-swiper .swiper-slide ul {padding-top: 1.660vw;}
  .product_section .product-swiper .swiper-slide .view a {font-size: 1.465vw;}
  .product_section .info .btns_arrow {position: absolute; right: 0; width: 120px; margin-top: 0; bottom: 0; z-index: 1;}

  /* R&D Center */
  .center_section {height: 73.242vw;}
  .center_section ul {row-gap: 1.953vw; padding: 1.660vw 0;}
  .center_section ul li {padding: 2.930vw 0; width: calc((100% - 5.859vw) / 3);}
  .center_section ul li h4 {margin: 1.465vw 0 0.781vw;}
  .center_section ul li p.view {margin-top: 0.781vw; padding-bottom: 0.781vw;}
  .center_section ul li img {width: 8.001vw;}

  /* DATA ROOM */
  .notice_section .info {width: 21.461vw;}
  .notice_section .info .btn a {padding: 1.563vw 2.930vw; gap: 7px;}
  .notice_section .notice_wrap {width: calc(100% - 21.461vw);}
  .notice_section .notice_wrap .n_contents .dfbox {gap: 4.395vw; padding: 3.418vw 4.395vw;}

  /* 하단배너 */
  .bottBanner_section .service, .bottBanner_section .contact {height: 53.711vw;}
  .bottBanner_section .btn a {padding: 1.465vw 3.418vw; gap: 1.660vw;}
}

@media (max-width: 767px) {
  /* banner */
  .banner_section {height: 91.265vw;}
  .banner_section .swiper .swiper-slide .txts h2 {margin-bottom: 24px;}
  .paging_box .slide_paging {bottom: 60px;}

  /* PRODUCT */
  .product_section::before {font-size: 14.993vw; bottom: 13%;}
  .product_section .swiper_wrapper { left: 0; width: 100%; padding-left: 4%;}
  .product_section .product-swiper .swiper-slide {padding: 7.171vw 5.215vw; height: 79.184vw;}
  .product_section .product-swiper .swiper-slide h4 {margin: 1.304vw 0;}
  .product_section .product-swiper .swiper-slide ul {padding-top: 2.216vw;}
  .product_section .product-swiper .swiper-slide .view a {font-size: 1.956vw;}
  .product_section .product-swiper .swiper-slide .view a .arrow {width: 3.911vw; height: 3.911vw; background-size: 1.956vw 1.434vw;}
  .product_section .info .btns_arrow {width: 15.645vw;}
  .product_section .info .swiper-button-next {left: 8.344vw;}
  .product_section .info .swiper-button-prev, .product_section .info .swiper-button-next {width: 7.040vw; height: 7.040vw;}
  .product_section .info .swiper-button-prev::before, .product_section .info .swiper-button-next::before {width: 1.956vw; height: 1.434vw; background-size: cover;}

  /* R&D Center */
  .center_section {height: auto;}
  .center_section ul {flex-wrap: wrap; gap: 1.953vw;}
  .center_section ul li {padding: 3.808vw 0; width: calc((100% - 1.953vw) / 2);}
  .center_section ul li:hover {transform: none;}
  .center_section ul li p.view, .center_section ul li:hover p.view {opacity: 1; height: auto; margin-top: 1.956vw; padding-bottom: 0; padding-top: 5px;}
  .center_section ul li h4 {margin: 1.956vw 0 1.043vw;}
  .center_section ul li img {width: 10.691vw;}

  /* DATA ROOM */
  .notice_section .dfbox {flex-direction: column; gap: 40px;}
  .notice_section .notice_wrap {width: 100%; padding-left: 0;}
  .notice_section .notice_wrap .n_contents .dfbox {gap: 5.867vw; padding: 4.563vw 5.867vw; flex-direction: row;}
  .notice_section .notice_wrap .n_contents .conts {width: calc(100% - 90px);}
  .notice_section .notice_wrap .n_contents .conts .n_content {line-height: 1.3; margin-top: 10px;}
  .notice_section .info {width: auto; position: relative; padding-top: 0;}
  .notice_section .info .btn {position: absolute; right: 0; bottom: 0; margin-top: 0;}
  .notice_section .info .btn a {padding: 2.086vw 3.911vw; gap: 0.913vw;}

  /* 하단배너 */
  .bottBanner_section > .dfbox {flex-direction: column;}
  .bottBanner_section .service, .bottBanner_section .contact {width: 100%; height: 66.708vw;}
  .bottBanner_section .btn a {padding: 1.956vw 4.563vw; gap: 2.216vw;}
}

@media (max-width: 480px) {
  /* common */
  .center_section .main_tits {width: auto; word-break: keep-all;}

  /* banner */
  .banner_section {height: 114.583vw;}
  .banner_section .swiper .swiper-slide .txts h2, .banner_section .swiper .swiper-slide .txts p {word-break: keep-all;}
  .banner_section .swiper .swiper-slide .txts p {line-height: 1.3;}
  .paging_box .slide_paging {bottom: 40px;}

  /* PRODUCT */
  .product_section::before {font-size: 40px; bottom: 10%;}
  .product_section .swiper_wrapper { left: 0; width: 100%; padding-left: 4%;}
  .product_section .product-swiper .swiper-slide {padding: 9.058vw 6.333vw; height: 122.458vw;}
  .product_section .product-swiper .swiper-slide h4 {margin: 2.083vw 0;}
  .product_section .product-swiper .swiper-slide ul {padding-top: 3.542vw; opacity: 1; transform: translateY(0);}
  .product_section .product-swiper .swiper-slide a {font-size: 12.5px; line-height: 1.1;}
  .product_section .product-swiper .swiper-slide .view a {font-size: 3.125vw;}
  .product_section .product-swiper .swiper-slide .view a .arrow {width: 6.250vw; height: 6.250vw; }
  .product_section .info .btns_arrow {width: 25.000vw;}
  .product_section .info .swiper-button-next {left: 13.333vw;}
  .product_section .info .swiper-button-prev, .product_section .info .swiper-button-next {width: 11.250vw; height: 11.250vw;}
  .product_section .info .swiper-button-prev::before, .product_section .info .swiper-button-next::before {width: 3.125vw; height: 2.292vw; }

  /* R&D Center */
  .center_section ul {gap: 3.125vw;}
  .center_section ul li {width: 100%; padding: 4.867vw 0;}
  .center_section ul li p.view, .center_section ul li:hover p.view {padding-top: 1.667vw; margin-top: 3.125vw;}
  .center_section ul li h4 {margin: 3.125vw 0 1.667vw;}
  .center_section ul li img {width: 17.083vw;}

  /* DATA ROOM */
  .notice_section .dfbox {gap: 8.333vw;}
  .notice_section .notice_wrap {width: 100%; padding-left: 0;}
  .notice_section .notice_wrap .n_contents .dfbox {gap: 3.375vw; padding: 5.292vw 6.375vw; flex-direction: row; padding-left: 3vw;}
  .notice_section .notice_wrap .n_contents .dates {width: 12.083vw;}
  .notice_section .notice_wrap .n_contents .conts {width: calc(100% - 18.458vw);}
  .notice_section .notice_wrap .n_contents .conts p {word-break: keep-all; line-height: 1.3;}
  .notice_section .notice_wrap .n_contents .conts .n_content {line-height: 1.3; margin-top: 2.083vw;}
  .notice_section .info .btn a {padding: 3.333vw 6.250vw; gap: 1.458vw;}

  /* 하단배너 */
  .bottBanner_section .service, .bottBanner_section .contact {height: 75.833vw;}
  .bottBanner_section .btn a {padding: 2.083vw 5.208vw; gap: 2.500vw;}
	
	
	
	/*팝업*/
.hd_pops { top: 90px !important; left:10px !important}
.hd_pops_con {   max-width: 85vw;  height: auto ! IMPORTANT; }
}

@media (max-width: 380px) {
  /* PRODUCT */
  .product_section .product-swiper .swiper-slide {padding: 8.558vw 5.733vw; height: 130.858vw;}
  .product_section .product-swiper .swiper-slide a {font-size: 12px;}
}