* {word-break: keep-all;}

::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-thumb {height: 30%; border-radius: 10px; background-color: #6694a7;}
::selection {background-color: #00425F; color: #fff;}

img {display: block;}
.ft {font-family: 'NanumSquareNeo';}
.ft_b {font-family: 'NanumSquareNeoBold';}
.ft_eb {font-family: 'NanumSquareNeoExtraBold';}
.ft_h {font-family: 'NanumSquareNeoHeavy';}

.space {padding: 180px 0;}
.space_top {padding-top: 180px;}

button {font-family: inherit;}
input {outline: none; border: none;}
textarea {outline: none;}

input[type="checkbox"] {display: none;}
.chk_con input[type="checkbox"] + label {font-size: 15px; position: relative; padding-left: 35px; cursor: pointer; color: #555; line-height: 1.4;}
input[type="checkbox"]:checked + label {color: #111; font-weight: 500;}
/* .chk_con input[type="checkbox"] + label em {font-weight: 600; display: inline-block; border-bottom: 1px solid #fff;} */
input[type="checkbox"] + label::before {content: ""; display: block; width: 25px; aspect-ratio: 1; background: url(../img/chk_sub.png) no-repeat center/cover; border-radius: 5px; overflow: hidden; position: absolute; top: -3px; left: 0;}
input[type="checkbox"] + label::after {content: ""; display: none; width: 25px; aspect-ratio: 1; background: url(../img/chk_on.png) no-repeat center/contain; border-radius: 5px; overflow: hidden; position: absolute; top: -3px; left: 0;}
input[type="checkbox"]:checked + label::after {display: block;}


button.lg {font-size: clamp(15px, 1.2vw, 20px); padding: 12px 60px; border-radius: 100px;}
button.md {font-size: clamp(14px, 2vw, 16px); padding: 10px 30px; border-radius: 100px;}
button.bg1 {background: #fff; color: #13729e; transition: all .1s;}
button.bg1:hover {box-shadow: 2px 2px 10px #083e5775;}
button.bg2 {background-color: #13729E; color: #fff; transition: all .1s;}
button.bg2:hover {box-shadow: 2px 2px 10px #083e5775;}
button.bl {background-color: #444; color: #fff;}
button.bg3 {background: linear-gradient(to right, #0093D9, #40bdf9); color: #fff;}
button.bg4 {background-color: #222; color: #fff;}
.btn_box {display: flex; justify-content: center;}

.no_content {text-align: center; padding: 5%; width: 100%; background-color: #f5f5f5; color: #888; font-size: clamp(14px, 1.4vw, 16px); font-weight: 600; border-radius: 15px; overflow: hidden;}


/* 페이징 */
.paging {width: 100%; display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 5%;}
.paging i {display: block; width: 25px; aspect-ratio: 1; cursor: pointer;}
.paging i.pg_start {background: url(../img/pg_start.png) no-repeat center/contain;}
.paging i.pg_prev {background: url(../img/pg_prev.png) no-repeat center/contain;}
.paging i.pg_next {background: url(../img/pg_next.png) no-repeat center/contain;}
.paging i.pg_end {background: url(../img/pg_end.png) no-repeat center/contain;}
.paging span {font-size: 18px; color: #888; font-weight: 600; padding: 6px; cursor: pointer;}
.paging span.on {color: #0093D9; font-weight: 800;}

 

/* 메인비주얼 */
.main_visual {width: 100vw; height: 100vh; position: relative;}
.mainSwiper {width: 100vw; height: 100vh; overflow: hidden; position: relative; z-index: 0; background-color: #000;}
.mainSwiper::after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(to top, #0F83BA, #0F83BA00); display: block; z-index: 5;}
.mainSwiper .swiper-slide {width: 100%; height: 100%;}
.mainSwiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.main_visual .main_con {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 60px;}
.main_con .main_tit {display: flex; flex-direction: column; align-items: center; gap: 20px;}
.main_con .main_tit p {font-size: clamp(28px, 5vw, 60px); text-align: center; font-weight: 500; color: #fff; line-height: 1.4;}
.main_con .main_tit span {font-size: clamp(18px, 2vw, 25px); color: #fff; text-align: center;}
.main_quick {display: flex; align-items: center; gap: 25px; width: max-content;}
.main_quick .quick_con {display: flex; align-items: center; gap: 10px; padding: 15px 35px; border-radius: 100px;}
.main_quick .quick_con p {font-size: clamp(16px, 1.5vw, 24px); color: #19678C;}
.main_quick .quick_con span {font-size: clamp(18px, 1.5vw, 25px); color: #0093D9;}
.main_quick .quick_con.call {background: #fff; box-shadow: 2px 2px 15px #063e4515;}
.main_quick .quick_con.inquiry {background: #00D1E9; position: relative; z-index: 1; cursor: pointer;}
.main_quick .quick_con.inquiry::after {content: ""; display: block; width: 110%; height: 130%; border-radius: 100px; background: #00D1E950; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; z-index: -1; animation: move 1s infinite;}
@keyframes move {
    0% {width: 100%; height: 100%; opacity: 1;}
    100% {width: 110%; height: 130%; opacity: .75;}
}

.main_quick .quick_con.inquiry p {color: #fff;}
.main_quick .quick_con i {display: block; width: 25px; aspect-ratio: 1; background: url(../img/main_arrow.png) no-repeat center/contain;}
.main_visual .scroll {position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;}
.main_visual .scroll span {font-size: 16px; color: #ffffff80;}
.main_visual .scroll .icon {width: 30px; height: 60px; border-radius: 100px; border: 1px solid #ffffff80; overflow: hidden; position: relative;}
.main_visual .scroll .icon i {display: block; width: 10px; aspect-ratio: 1 / 2; position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: url(../img/scroll_arrow.png) no-repeat center/contain; animation: scroll1 1.5s infinite ease-out;}
.main_visual .scroll .icon::after {content: ""; display: block; width: 100%; aspect-ratio: 1; border-radius: 100%; background: #ffffff30; position: absolute; left: 50%; top: 0; transform: translateX(-50%); animation: scroll2 1.5s infinite ease-out;}

@keyframes scroll1 {
    0% {top: 20%;}
    50% {top: 60%;}
    100% {top: 20%;}
}

@keyframes scroll2 {
    0% {top: 0; opacity: 1;}
    100% {top: 100%; opacity: 0;}
}



/* 세척효과 */
.effect_wrap {width: 100%; display: flex; align-items: flex-start; gap: 100px;}
.effect .sec_title {width: 40%;}
.sec_title {display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 60px;}
.sec_title.center {align-items: center;}
.sec_title .sub {display: flex; align-items: center; gap: 6px;}
.sec_title .sub em {font-size: clamp(18px, 1.8vw, 28px); color: #00D1E9;}
.sec_title .sub span {font-size: clamp(18px, 1.8vw, 28px); color: #889FA1;}
.sec_title .main {font-size: clamp(24px, 3vw, 52px); line-height: 1.4; padding: 30px 0 50px;}
.sec_title .main em.color {color: #0093D9;}
.sec_title .tit_text {font-size: clamp(16px, 1.5vw, 20px); color: #555;}

.effect_con {display: grid; grid-template-columns: 1fr 1fr; gap: 25px; width: 60%;}
.effect_con .effect_item {position: relative; aspect-ratio: 4 / 2.5; border-radius: 25px; overflow: hidden;}
.effect_con .effect_item .bg {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.effect_con .effect_item .bg img {width: 100%; height: 100%; object-fit: cover;}
.effect_con .effect_item .item_txt {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; background-color: transparent; transition: all .2s;}
.effect_con .effect_item:hover .item_txt {background-color: #007BB590;}
.effect_item .item_txt dt {font-size: clamp(18px, 2vw, 22px); color: #fff; font-weight: 700;}
.effect_item .item_txt dd {padding-top: 0; font-size: clamp(16px, 1.2vw, 18px); color: #fff; height: 0; overflow: hidden; transition: all .05s; line-height: 1.4;}
.effect_item:hover .item_txt dd {padding-top: 15px; height: 100%; overflow: visible;}


/* 회사소개 */
.about {position: relative;}
.about::after {content: ""; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: url(../img/intro_bg.jpg) no-repeat center/cover; z-index: -1;}
.about .sec_title {flex-direction: row; justify-content: space-between; align-items: flex-end;}
.about .sec_title .main {padding-bottom: 0;}
.view_btn {display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer;}
.view_btn .icon {width: 40px; aspect-ratio: 1; border-radius: 100%; border: 1px solid #aaa; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: all .2s;}
.view_btn:hover .icon {border-color: transparent;}
.view_btn .icon i {display: block; width: 18px; aspect-ratio: 1; background: url(../img/more.png) no-repeat center/contain; transition: all .15s;}
.view_btn:hover .icon i {background: url(../img/more_wh.png) no-repeat center/contain;}
.view_btn .icon::after {content: ""; display: block; width: 0%; height: 0%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: transparent; transition: all .15s; z-index: -1; border-radius: 100%;}
.view_btn:hover .icon::after {background-color: #0093D9; width: 110%; height: 110%;}
.view_btn span {font-size: clamp(15px, 1.5vw, 20px); color: #666; transition: all .15s;}
.view_btn:hover span {color: #333;}

.fold_wrap {display: flex; flex-direction: column; gap: 50px;}
.fold {padding: 50px; border-radius: 25px;}
.fold01 {background-color: #1B6484;}
.fold01.active1 {scale: .9;}
.fold01.on#fold01 {scale: .9;}
.fold02 {background-color: #007BB5;}
.fold03 {background-color: #0093D9;}
.fold03 .view_btn {margin-top: 3%;}
.fold .fold_box {display: flex; align-items: flex-start; justify-content: space-between;}
.fold_box .fold_tit {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 30%; padding-right: 3%;}
.fold_box .fold_tit span {font-size: clamp(18px, 2vw, 24px); color: #ffffff50;}
.fold_box .fold_tit p {font-size: clamp(20px, 2.5vw, 32px); color: #ffffff;}
.fold_box .fold_img {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; width: 70%;}
.fold_img .thumb {width: 100%; border-radius: 18px; overflow: hidden;}
.fold_img .thumb img {width: 100%; height: 100%; object-fit: cover;}
.fold_img .thumb.mo {display: none;}
.fold_img .thumb.mo img {width: 100%; height: 100%; object-fit: contain; opacity: .7;}


.about .view_btn {position: absolute; left: 50%; top: 100%; transform: translateX(-50%);}


/* 시공사례 */
.review {background-color: #fff; width: 100%; z-index: 10; position: relative; margin-top: 15%;}
.review > .view_btn {position: absolute; top: -5%; left: 50%; transform: translateX(-50%);}
.moving_wrap {overflow: hidden;}
.moving_review {display: flex; align-items: center; flex-wrap: nowrap; gap: 30px; width: max-content; animation: bannermove1 30s linear infinite;}
.moving_review:last-child {animation: bannermove2 30s linear infinite; flex-direction: row-reverse;}
.moving_review + .moving_review {margin-top: 25px;}

@keyframes bannermove1 {
  0% {transform: translate(0, 0);}
  100% {transform: translate(-50%, 0);}
}

@keyframes bannermove2 {
    0% {transform: translate(-50%, 0);}
    100% {transform: translate(0, 0);}
  }
  

.moving_review .img_box {height: 30vh; max-height: 340px; border-radius: 15px; overflow: hidden;}
.moving_review .img_box img {width: 100%; height: 100%; object-fit: cover;}




/* ======== 1440px ======== */
@media screen and (max-width: 1440px) {
  .space {padding: 160px 0;}
  .sec_title {margin-bottom: 50px;}
  .view_btn {gap: 8px;}
  .view_btn .icon {width: 30px;}
  .view_btn .icon i {width: 13px;}

  /* 세척효과 */
  .effect_wrap {gap: 60px;}
  .sec_title .main {padding: 20px 0 35px;}
  .effect_con {gap: 15px;}
  .effect_con .effect_item {border-radius: 15px;}
  .effect_con .effect_item .item_txt {padding: 25px;}
  .effect_item:hover .item_txt dd {padding-top: 10px;}


  /* 회사소개 */
  .fold {padding: 35px;}
  .fold_box .fold_tit {width: 25%;}
  .fold_box .fold_img {width: 75%;}

  
  /* 시공사례 */
  .review {margin-top: 25%;}
  .moving_review {gap: 15px;}
  .moving_review + .moving_review {margin-top: 15px;}
}



/* ======== 1080px ======== */
@media screen and (max-width: 1080px) {
  .space {padding: 140px 0;}
  .sec_title {align-items: center; margin-bottom: 40px;}
  .sec_title .main {padding: 10px 0 20px; text-align: center;}
  .sec_title .main br {display: none;}
  .sec_title .tit_text {text-align: center; width: 100%;}

  /* 메인비주얼 */
  .main_con .main_tit {gap: 12px;}
  .main_visual .main_con {gap: 40px;}
  .main_quick .quick_con {padding: 15px 30px;}
  .main_quick .quick_con.call {padding: 12px 25px;}
  .main_quick .quick_con i {width: 18px;}

  /* 세척효과 */
  .effect_wrap {flex-direction: column; gap: 0;}
  .effect .sec_title {width: 100%;}
  .effect_con {width: 100%; grid-template-columns: 1fr;}
  .effect_item .item_txt dd {height: 100%; overflow: visible; padding-top: 10px;}
  .effect_con .effect_item:hover .item_txt {background-color: transparent;}
  .effect_con .effect_item .item_txt {background: linear-gradient(to top, #00000010, transparent); top: initial; bottom: 0;}
  .effect_con .effect_item {aspect-ratio: 3 / 1;}


  /* 회사소개 */
  .about .sec_title {flex-direction: column; align-items: center;}
  .about .sec_title > div {display: flex; flex-direction: column; align-items: center;}
  .about .sec_title .main {padding-bottom: 20px;}
  .fold {border-radius: 15px;}
  .fold_img .thumb {border-radius: 8px; aspect-ratio: 3 / 2;}
  .fold_box .fold_img {gap: 12px; width: 100%;}
  .fold02 {margin-top: -2% !important;}
  .fold03 {margin-top: -3.5% !important;}
  .fold_box .fold_tit {gap: 5px; width: 100%;}
  .fold .fold_box {flex-direction: column; gap: 15px;}
  .fold03 .view_btn {margin-top: 5%;}


  /* 시공사례 */
  .review {margin-top: 35%;}
  .moving_review .img_box {border-radius: 10px;}
  .moving_review {animation-duration: 45s;}
  .moving_review:last-child {animation-duration: 45s;}
  .moving_review .img_box {height: 20vh; min-height: 150px;}
}




/* ======== 650px ======== */
@media screen and (max-width: 650px) {
  .space {padding: 120px 0;}
  .sec_title {margin-bottom: 30px;}
  .sec_title .tit_text br {display: none;}

  button.md {padding: 8px 25px;}

  .paging {margin-top: 8%; gap: 5px;}
  .paging span {font-size: 16px;}
  .paging i {background-size: 80% !important;}
  
  /* 메인비주얼 */
  .main_visual .main_con {gap: 25px;}
  .main_quick {flex-direction: column; gap: 18px;}
  .main_quick .quick_con {width: 100%; justify-content: center; gap: 6px;}
  .main_visual .scroll {gap: 5px;}
  .main_visual .scroll span {font-size: 13px;}
  .main_visual .scroll .icon {width: 25px; height: 50px;}
  .mainSwiper {height: 95vh;}
  .main_visual {height: 95vh;}

  /* 세척효과 */
  .effect_con .effect_item {aspect-ratio: 2 / 1;}
  .effect_con .effect_item .item_txt {padding: 20px;}
  .effect_item .item_txt dd, .effect_item:hover .item_txt dd {padding-top: 5px;}

  
  /* 회사소개 */
  .about .sec_title .main {padding-bottom: 15px;}
  .fold {padding: 20px;}
  .fold_box .fold_img {grid-template-columns: 1fr 1fr; gap: 10px;}
  .fold_box .fold_tit {gap: 0;}
  .fold02 {margin-top: -4% !important;}
  .fold03 {margin-top: -7.5% !important;}
  .fold_img .thumb.mo {display: block;}

  /* 시공사례 */
  .moving_review .img_box img {width: initial;}
  .moving_review {gap: 8px;}
  .moving_review + .moving_review {margin-top: 8px;}
}




/* ======== 350px ======== */
@media screen and (max-width: 350px) {
  /* 세척효과 */
  .effect_con .effect_item {aspect-ratio: 3 / 2;}
}