@charset "utf-8";
:root {
    --size: clamp(10rem, 1rem + 30vmin, 30rem);
    --gap: calc(var(--size) / 5);
    --duration: 60s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
}

/* 메인 비주얼 */
.mainVisual { position: relative; background: #e9f4fa url('../images/main/mvi_bg.png') center bottom 40px no-repeat; overflow: hidden; }
.main_slider { position: relative; width: 100%; height: var(--app-height); opacity: 0; visibility: hidden; overflow: hidden; }
.main_slider.slick-initialized { opacity: 1; visibility: visible; }
.main_slider .slick-list { z-index: 1; }
.main_slider .slide { position: relative; height: var(--app-height);
	-webkit-backface-visibility: hidden;
  	backface-visibility: hidden;
}
.main_slider .slide:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; z-index: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;   
}
.main_slider .slide .loading { display: none; position: absolute; top: 44%; left: 0; width: 100%; }
.main_slider.active .slide.slick-active { z-index: 1; }
.main_slider .slide .image-entity { width: 100%; opacity: 0; visibility: hidden; }
.main_slider .slide .intro { position: absolute; left: 50%; top: 19.03%; width: 100%; height: auto; z-index: 3; transform: translateX(-50%); }
.main_slider .slide .intro .txt_box { max-width: 1080px; margin: 0 auto; text-align: center; }
.main_slider .slide .intro .txt_box .txt1 { display: block; opacity: 0; font-size: 45px; font-weight: 200; line-height: 1.3; letter-spacing: 0; color: var(--color-tertiary); text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1); transform: translateY(50px); transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1.000); }
.main_slider.active .slide.slick-active .intro .txt_box .txt1 { opacity: 1; transform: translateY(0); }

.mainVisual .slick_control { display: none !important; position: absolute; left: 50%; bottom: 20%; width: 100%; padding-left: 6.8%; display: flex; transform: translateX(-50%); z-index: 3; }
.mainVisual .slide_arrow { width: 45px; height: 45px; font-size: 0; }
.mainVisual .slide_arrow a { display: block; width: 45px; height: 45px; background-position: left top; background-repeat: no-repeat; background-size: contain; opacity: 0.5; transition: all 0.2s ease-in-out; }
.mainVisual .slide_arrow a:hover { opacity: 1; }
.mainVisual .slide_arrow.prev a { background-image: url('../images/btn_prev.png'); }
.mainVisual .slide_arrow.next a { background-image: url('../images/btn_next.png'); }
.mainVisual .mvi_slick_dots { padding: 0 10px; font-size: 0; }
.mainVisual .mvi_slick_dots .slick-dots { text-align: center; }
.mainVisual .mvi_slick_dots .slick-dots li { display: inline-block; font-size: 20px; font-weight: 700; line-height: 45px; color: rgba(255,255,255,0.4); margin: -2px 8px 0 8px; cursor: pointer; overflow: hidden; transition: all 0.3s; }
.mainVisual .mvi_slick_dots .slick-dots li.slick-active { color: #fff; }

@media all and (max-width:1280px) {
	.mainVisual { background-size: contain; }
	.main_slider { height: 685px; }
	.main_slider .slide { height: 685px; }
	.main_slider .slide .intro { padding: 0 40px; }
}

@media all and (max-width:768px) {
	.main_slider .slide .intro .txt_box .txt1 { font-size: 36px; }
	.mainVisual .slick_control { display: none !important; }
	
}

@media all and (max-width:480px) {
	.main_slider { height: calc(var(--app-height) - 120px); }
	.main_slider .slide { height: calc(var(--app-height) - 120px); }
	.main_slider .slide .intro { text-align: center; }
	.main_slider .slide .intro .txt_box .txt1 { font-size: 30px; }
}



/* 공통 */
.msection { padding: 116px 0; }
.msection .sec_title2 { font-weight: 400; }
@media all and (max-width:1280px) {
	.msection { padding-left: 20px; padding-right: 20px; }
}

@media all and (max-width:768px) {
	.msection { padding-top: 64px; padding-bottom: 64px; }
	.msection br { display: none; }
}

@media all and (max-width:480px) {	
}

/* 서비스 */
.ms1 { background-color: #f5f8fb; }
.ms_service .service_item { display: flex; flex-wrap: wrap; align-items: center; }
.ms_service .service_item ~ .service_item { margin-top: 90px; }
.ms_service .service_item .img_area { width: 50%; background-color: #fff; border-radius: var(--border-radius); box-shadow: 4px 8px 14px rgba(0, 0, 0, .05); overflow: hidden; }
.ms_service .service_item .img_area img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ms_service .service_item .txt_area { width: 50%; padding-left: 94px; }
.ms_service .service_item .txt_area .stit { display: inline-block; height: 38px; padding: 0 26px; font-size: 18px; font-weight: 600; color: #fff; line-height: 38px; background-color: var(--color-primary); border-radius: 38px; }
.ms_service .service_item .txt_area p { font-size: 30px; font-weight: 700; line-height: 1.4; margin-top: 12px; }
.ms_service .service_item .txt_area ul { margin-top: 32px; }
.ms_service .service_item .txt_area li { position: relative; font-size: 20px; font-weight: 500; padding-left: 22px; }
.ms_service .service_item .txt_area li::before { position: absolute; left: 0; top: 15px; content: ''; width: 8px; height: 1px; background-color: #000; }
.ms_service .service_item:nth-child(2n) { flex-direction: row-reverse; }
.ms_service .service_item:nth-child(2n) .txt_area { padding-left: 0; padding-right: 94px; }

@media all and (max-width:768px) {
	.ms_service .service_item ~ .service_item { margin-top: 45px; }
	.ms_service .service_item .img_area { width: 100%; }
	.ms_service .service_item .txt_area { width: 100%; padding-left: 0; margin-top: 24px; }
	.ms_service .service_item .txt_area .stit { height: 35px; font-size: 16px; padding: 0 18px; line-height: 35px; }
	.ms_service .service_item .txt_area p { font-size: 24px; }
	.ms_service .service_item .txt_area ul { margin-top: 16px; }
	.ms_service .service_item .txt_area li { font-size: 15px; padding-left: 18px; }
	.ms_service .service_item .txt_area li::before { top: 11px; }
	.ms_service .service_item:nth-child(2n) { flex-direction: row; }
	.ms_service .service_item:nth-child(2n) .txt_area { padding-left: 0; padding-right: 0; }
}

@media all and (max-width:768px) {
	.ms_service .service_item .txt_area .stit { height: 30px; font-size: 14px; padding: 0 15px; line-height: 30px; }
}


/* 안심케어 */
.ms2 { padding-bottom: 0; }
.ms_care { display: flex; flex-wrap: wrap; gap: 20px; }
.care_item { width: calc((100% - 60px) / 4); text-align: center; }
.care_item .pic { border-radius: 112px; overflow: hidden; }
.care_item .pic img { width: 100%; height: auto; }
.care_item strong { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; margin-top: 16px; }

@media all and (max-width:768px) {
	.care_item { width: calc((100% - 20px) / 2); }
	.care_item strong { font-size: 18px; margin-top: 12px; }
}

@media all and (max-width:480px) {
	.ms_care { gap: 20px 10px; }
	.care_item { width: calc((100% - 10px) / 2); }
	.care_item strong { font-size: 16px; }
}


/* 수도권 최인접 */
.ms_distance { display: flex; flex-wrap: wrap; align-items: flex-end; }
.ms_distance .map_area { position: relative; width: 53.89%; }
.ms_distance .map_area img { width: 100%; height: auto; border-radius: var(--border-radius); }
.ms_distance .map_area .map_cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ms_distance .map_area .map_cover > li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 0.3s; }
.ms_distance .map_area .map_cover > li.on {
	-webkit-animation: blink 0.5s ease-in-out infinite alternate;
	-moz-animation: blink 0.5s ease-in-out infinite alternate;
	animation: blink 0.5s ease-in-out infinite alternate;
}
.ms_distance .distance_area { flex: 1 1 0; margin-right: 28px; }
.distance_area .sm_tit { font-size: 16px; color: var(--color-primary); }
.distance_area .sec_title2 { font-weight: 400; }
.distance_area ul { max-width: 352px; }
.distance_area ul * { transition: all 0.3s; }
.distance_area li { position: relative; display: flex; align-items: center; cursor: pointer; margin: 12px 0; }
.distance_area li::before { position: absolute; left: 20px; top: 50%; content: ''; width: calc(100% - 20px); height: 1px; background-color: rgba(188, 188, 188, 1); z-index: -1; }
.distance_area li i { display: inline-block; position: relative; width: 10px; height: 10px; background-color: rgba(188, 188, 188, 1); border-radius: 50%; }
.distance_area li i::after { position: absolute; left: -5px; top: -5px; content: ''; width: 20px; height: 20px; background-color: rgba(188, 188, 188, 0.25); border-radius: 50%; }
.distance_area li .tit { font-size: 22px; font-weight: 700; color: #bcbcbc; background-color: #fff; padding: 0 16px; }
.distance_area li .dist { margin-left: auto; width: 182px; height: 40px; font-size: 18px; font-weight: 700; line-height: 40px; color: #fff; text-align: center; background-color: #dbdbdb; border-radius: 40px; }
.distance_area li .dist em { display: inline-block; margin-top: -3px; padding: 0 10px; }

.distance_area li.on::before,
.distance_area li:hover::before { background-color: var(--color-primary); } 
.distance_area li.on i,
.distance_area li:hover i { background-color: var(--color-primary); }
.distance_area li.on i::after,
.distance_area li:hover i::after { background-color: var(--color-primary); opacity: 0.25; }
.distance_area li.on .tit,
.distance_area li:hover .tit { color: var(--color-primary); }
.distance_area li.on .dist,
.distance_area li:hover .dist { background-color: var(--color-primary); }

@-webkit-keyframes blink{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
  
@-moz-keyframes blink{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes blink{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@media all and (max-width:768px) {
	.ms_distance .map_area { width: 100%; }
	.ms_distance .distance_area { flex: auto; width: 100%; margin-right: 0; margin-bottom: 32px; }
	.distance_area .sm_tit { font-size: 14px; }
	.distance_area li .tit { font-size: 18px; }
	.distance_area li .dist { width: 164px; height: 36px; font-size: 16px; line-height: 36px; border-radius: 36px; }
}


/* 인허가현황 */
.ms4 { background-color: #f9f9f9; }
.ms_certificate { display: flex; flex-wrap: wrap; gap: 30px 10px; }
.certificate_item { width: calc((100% - 40px) / 5);  text-align: center; }
.certificate_item .pic { padding: 10px; border: 1px solid var(--border-line); background-color: #fff; box-shadow: 4px 8px 14px rgba(0, 0, 0, .1); }
.certificate_item .pic img { width: 100%; height: auto; }
.certificate_item strong { display: block; font-size: 16px; font-weight: 400; line-height: 1.4; margin-top: 16px; }

@media all and (max-width:768px) {
	.certificate_item { width: calc((100% - 20px) / 3); }
}

@media all and (max-width:480px) {
	.certificate_item { width: calc((100% - 10px) / 2); }
	.certificate_item strong { font-size: 14px; }
}


/* 파트너 */
.ms5 { padding: 28px 0; }
.partner_wrap { display: flex; flex-direction: column; gap: var(--gap); margin: auto; max-width: 100vw; } 
.partner_wrap .marquee { display: flex; overflow: hidden; user-select: none; gap: var(--gap); }
.partner_wrap .marquee_group { flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll-x var(--duration) linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .partner_wrap .marquee_group {
      animation-play-state: paused;
    }
}
  
@keyframes scroll-x {
    from {
      transform: translateX(var(--scroll-start));
    }
    to {
      transform: translateX(var(--scroll-end));
    }
}

@media all and (max-width:768px) {
	.partner_wrap .marquee_group img { height: 80px; }
}

@media all and (max-width:480px) {
	.partner_wrap .marquee_group img { height: 60px; }
}