@charset "utf-8";
html,
body { width: 100%; height: calc(var(--vh, 1vh) * 100); overflow-x: hidden;} 
body { background: #fff; font-family: 'Pretendard', 'Noto Sans KR', "YakuHanJP", "Noto Sans JP", "PingFang SC", "Noto Sans SC", "Arial", sans-serif !important; font-size: 14px; font-weight: 400; color: #111; padding: 0px; margin: 0px; word-break: keep-all; overflow-wrap: break-word; white-space: normal; } 
.break-all { word-break: break-all !important; overflow-wrap: normal !important; /* white-space: unset; */}
::selection { background-color: var(--blue); color: white; } 
.inner { padding-left: 18.75%; padding-right: 18.75%; display: flex; justify-content: center; align-items: center; } 
h1 { font-weight: 700; font-size: 70px; line-height: 1.2; padding-bottom: 18px; } 
h2 { font-weight: 700; font-size: 34px; line-height: 1.5; padding: 15px 0 30px 0; } 
.no-wrap { white-space: nowrap !important; word-break: keep-all !important; } 
.titleWrap { width: 100%; text-align: center; } 

.mainTitle { text-transform: uppercase; font-size: 30px; line-height: 1.5; font-weight: 700; padding-bottom: 12px; } 

.subTitle { font-size: 18px; line-height: 1.5; color: #111; } 

.blueTxt { color: var(--blue); } 

.bold { font-weight: 700; } 


/* fade up */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}



/* slick arrow 공통 디자인 */

.arrows-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; justify-content: space-between; width: 100%; padding: 0 8%; } 

.serviceSlideArrows {top: 410px;}

.arrows-btn .prev,
.arrows-btn .next { width: 48px; height: 48px; cursor: pointer; border: none; background: none; transition: 0.3s;} 

.arrows-btn .prev { background-image: url(../img/service/service_arrow_left_48.svg); background-size: cover; } 

.arrows-btn .next { background-image: url(../img/service/service_arrow_right_48.svg); background-size: cover; } 

.arrows-btn .prev:hover { background-image: url(../img/service/service_arrow_left_48_hover.svg); background-size: cover; } 

.arrows-btn .next:hover { background-image: url(../img/service/service_arrow_right_48_hover.svg); background-size: cover; } 


@media screen and (max-width: 1500px){
    .inner { padding-left: 10%; padding-right: 10%; } 
}
@media screen and (max-width: 1200px){
 .inner { overflow-x: auto; padding-left: 8%; padding-right: 8%; } 
}
@media screen and (max-width: 900px){
 h1 { font-size: 60px; padding-bottom: 12px; } 
}
@media screen and (max-width: 768px) { 
        
 br { display: none; } 

 br.mo { display: block; } 

 .inner { padding-left: 5%; padding-right: 5%; } 

 h1 { font-size: 42px; padding-bottom: 12px; } 

 h2 { font-size: 22px; line-height: 1.4; padding: 15px 0 20px 0; } 
}