/* 공통 */
.common__text-h2{ font-size: var(--font_size60); letter-spacing: -.012em; }
.common__text-small{ margin-left: .5em; font-size: var(--font_size24); color: var(--primary); }
.common__link{ display: inline-flex; align-items: center; gap: 3.6em; position: relative; top: 2.5em; left: -2px; font-weight: 700; color: currentColor; white-space: nowrap; }
.common__link-span{ font-size: var(--font_size20);}

@media(hover:hover) and (prefers-reduced-motion:no-preference){
	.common__link:hover { transform: translate(1em, -2px); }
}
@media(max-width:1279px){
	#wrap .common_padding_y{ padding: 80px 0; }
}
@media(max-width:767px){
	#wrap .common_padding_y{ padding: 60px 0; }
}



/* 비주얼 */
.area_visual{ position: relative; height: calc( var(--font_size60) * 14 ); color: #fff; z-index: 3; }
.area_visual::before{ content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 2; }
.area_visual__inr{ display: flex; align-items: center;  box-sizing: border-box;}
.area_visual__control-index {display: flex; align-items: baseline; gap: 10px;}
.area_visual__control-index > div::before {content: '0';}
.area_visual__control-index .index {font-size: var(--font_size30); color: var(--primary); font-weight: 600; width: var(--font_size36);}
.area_visual__control-index .all {font-size: var(--font_size20);}

.area_visual__text{ width: 100%; margin-top: -3.6em;}
.area_visual__text-h2{ font-size: var(--font_size52); font-weight: 400; line-height: 1.2; }
.area_visual__text-strong{ font-weight: 800; }
.area_visual__text-p{ font-size: var(--font_size18); font-weight: 500; }
.area_visual__control{ display: flex; align-items: center; margin-bottom:  var(--font_size36) ; color: #f2f3f7; }
.area_visual__control-btn{ display: flex; align-items: center; width: 1.875rem; height: 1.875rem; cursor: pointer; }
.area_visual__control-btn + .area_visual__control-btn{ margin-left: 1px; }
.area_visual__state{ justify-content: center; }
.area_visual__state-play{ display: none; }
.area_visual__state.pause .area_visual__state-play{ display: block; }
.area_visual__state.pause .area_visual__state-pause{ display: none; }
.area_visual__next{ justify-content: flex-end; }
.area_visual__control-svg{ height: 1em; }
.area_visual__control-shape{ fill: currentColor; }
.area_visual__control-progress{ position: relative; margin-right: 3.6em; top: 0.01em; flex: 1; max-width: 240px; height: 2px; background: rgba(255, 255, 255, 0.4); }
.area_visual__control-progress::before{ content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--primary); }
.area_visual .common__link-span{ font-size: 1rem;  background: linear-gradient(to bottom right,#0a7ac8,#0047a2 ); padding: 1.2vh 3vw; border-radius: 25px;}
.area_visual__swiper{ position: absolute; inset: 0; }
.area_visual__swiper .swiper-slide{ position: relative; }
.area_visual__swiper .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
.area_visual__swiper .slide1::before{ background-image: url(/images/main/main_visual01.jpg); }
.area_visual__swiper .slide2::before{ background-image: url(/images/main/main_visual02.jpg); }
.area_visual__swiper .slide3::before{ background-image: url(/images/main/main_visual03.jpg); }
.area_visual__swiper .slide4::before{ background-image: url(/images/main/main_visual04.jpg); }
@media(prefers-reduced-motion:no-preference){
	.area_visual_control-progress.play::before{ width: 100%; transition: 6s linear; }

	.area_visual__text-h2:nth-child(3){ animation: visual_text 1.2s .5s both; }
	.area_visual__text-h2:nth-child(4){ animation: visual_text 1.2s .9s both; }
	.common__link{ animation: visual_text .8s 1.4s both; }
	@keyframes visual_text {
		0%{ transform: translateY(20px); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
	.area_visual__control{ animation: clip_right 3s 2s both; }
	.area_visual__control-index { animation: clip_right 3s 2s both; }
	@keyframes clip_right {
		0%{ clip-path: inset(-10% 100% -10% 0); }
		100%{ clip-path: inset(-10% 0); }
	}
	.area_visual__control-progress.play::before{ width: 100%; transition: 6s linear; }
	.area_visual__swiper .swiper-slide-active::before{ animation: visual_bg 7s linear both; }
	@keyframes visual_bg {
		0%{ transform: scale(1.05) translateX(0); transform-origin: center left; }
		100%{ transform: scale(1.05) translateX(-2%); }
	}
}

@media screen and (max-width:1400px){
	.inr{width:96%; margin:0 auto;}
}

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

	.area_visual__control-progress {right: 0; margin-left: auto; max-width: 540px;}
	
}

@media all and (max-width:650px){
	.area_visual__control-index {display: none;}
	.common__link {display: block; white-space: normal;}
	.area_visual__text-p {margin-bottom: 20px;}
	.area_visual__link {display: flex; justify-content: flex-end;}
}



@media all and (max-width:350px){
	.area_visual__control-progress {display: none;}
	.area_visual__control {width: 94%;}
}

.area_hr { height: 100%; background: url(/images/main/main_bg01.jpg) no-repeat center/cover; width: 100%;}
.area_hr .inr {margin: 10em auto 8.75em;}
.area_hr figcaption {display: flex; justify-content: space-between;}
.area_hr__text {width: 60%;}
.area_cont__text-h1 {font-size: var(--font_size22); color: var(--primary); letter-spacing: 0.18em;}
.area_cont__text-h2 {font-size: var(--font_size36); color: black; letter-spacing: -0.025em; line-height: 48px; margin: 5px 0 15px;}
.area_cont__text-p {font-size: var(--font_size20); color: #444; letter-spacing: -0.025em; line-height: 30px;}

.area_hr__btn {width: 25%; display: flex; flex-direction: column; gap: 1px;}
.area_hr__btn a {display: flex; justify-content: center; background: var(--primary); color: white; box-sizing: border-box;border: 1px solid var(--primary);box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.1);}
.area_hr__btn a div {display: flex; align-items: center; width: 80%; justify-content: space-between; height: 6em;}
.area_hr__btn a:hover {background: white; color: var(--primary);}
.area_hr__btn a div span {width: 100px; font-size: var(--font_size20); font-weight: 600; width: 50%; padding-bottom: 5px;}
.area_hr__btn a:first-child div::before {content: url(/images/main/main_i01.png);}
.area_hr__btn a:first-child:hover div::before {content: url(/images/main/main_i01_hover.png);}
.area_hr__btn a:last-child div::before {content: url(/images/main/main_i02.png);}
.area_hr__btn a div::after {content: url(/images/common/arrow_right.png);}
.area_hr__btn a:hover div::after {content: url(/images/common/arrow_right_blue.png);}

.area_hr figure {margin-top: 5.5em;}
.area_hr figure img {width: 100%;}

@media all and (max-width:1280px){
	.area_cont__text-h2,
	.area_cont__text-p {line-height: 1.5;}
	.area_hr__btn {width: 32%;}
	
}
@media all and (max-width:768px){
	.area_hr figcaption {flex-direction: column;}
	.area_hr__text {width: 100%;}
	.area_hr__btn {flex-direction: row; width: 100%; margin-top:20px;}
	.area_hr__btn a {width: 50%;}
	.area_hr figure {margin-top: 4em;}
	.area_hr .inr {margin: 6em auto 5em;}
}
@media all and (max-width:450px){
	
	.area_hr__btn a div::after,
	.area_hr__btn a:hover div::after {display: none;}
}

.area_labor {background: #fafafa;position: relative;}
.area_labor .inr {display: flex; }
.area_labor__text {width: 37%; margin: 10.5em 0 10em;}
.area_labor__swiper { left: 42.5%;width: 66.2%;position: absolute;top: 50%;transform: translatey(-50%); z-index: 90;}
.area_labor__swiper .swiper-slide {display: block;}
.area_labor__swiper .swiper-slide > img {width: 100%;}
.area_labor__swiper .swiper-slide > div {display: flex; gap: 0.6em; align-items: center; position: absolute; bottom: 1.6em; right: 1.7em; color: white; font-weight: 600; font-size: var(--font_size24);}
.area_labor__text > div {display: flex; align-items: center; gap: 1.5em; margin-top: 2.5em;}
.labor__swiper-btn {display: flex; gap: 1.2em;}
.labor__swiper-btn > div {display: flex; justify-content: center; align-items: center; width: 2.5em; height: 2.5em; background: #aaaaaa; border-radius: 50%; cursor: pointer;}
.labor-line {height: 1px; width: 12em; background: #999999; }
.labor-link-btn {color: white; background: var(--primary); border-radius: 20px; padding: 0.7em 1.7em; font-size: var(--font_size14); font-weight: 600;}

@media all and (max-width:1400px){
	.area_labor__swiper {width: 85%;}
	.labor-line {width: 6em;}
}
@media all and (max-width:1080px){
	.area_labor__text {margin: 5em 0 3em; width: 100%;}
	.area_labor__swiper {position: relative; left: auto; top: auto; transform: none; width: 100%;}
	.area_labor {padding-bottom: 4em;}
}
@media all and (max-width:768px){
	.area_labor__swiper {width: 80%;}
}
@media all and (max-width:600px){
	.area_labor__swiper {width: 100%;}
}

.banner {background: url(/images/main/main_banner.jpg) no-repeat center/cover; height: 420px; color: white; margin-top: 8.75em;}
.banner .inr{display: flex; flex-direction: column; justify-content: center; align-items: center; }
.banner_line{ position: relative; top: 0.01em; width: 2px; height: 50px; background: rgba(255, 255, 255, 0.4);  margin: 1.5em 0 ;}
.banner_line::before{ content: ''; position: absolute; inset: 0 auto 0 0; height: 0; background: white; transition: linear 0.5s; }
.banner .inr:hover .banner_line::before{ content: '';  height: 50px; }
@media(prefers-reduced-motion:no-preference){
	.banner_line::before{ width: 100%; transition: 1s linear; }
	
}
.banner .inr h2 {font-size: var(--font_size36); font-weight: 500; }
.banner .inr p {font-size: var(--font_size18); font-weight: 600; margin: 1.2em auto 0;}
.banner .inr a {font-size: var(--font_size18); font-weight: 600;  background: linear-gradient(to bottom right,#0a7ac8,#0047a2 );padding: 1.5vh 1.8vw;border-radius: 30px; margin-top: 1em;}

@media all and (max-width:1080px){
	.banner {margin-top: 4em;}

}
@media all and (max-width:768px){
	.banner {background-position: 20%, 50%;}
}


.area_cs {background: url(/images/main/main_bg02.jpg) no-repeat center/cover; height: 100%;}

.area_data .inr {display: flex; justify-content: space-between; gap: 8%;}
.area_data__text {width: 36%; display: flex; flex-direction: column; justify-content: space-between; height: 365px;}

.tabs{ display: flex; flex-wrap: wrap; gap: 5px;}
.tabs li{ flex: 1; width: 140px; height: 120px; background:var(--primary); color: white;  text-align: center; box-sizing: border-box; cursor: pointer; font-size: 20px; border: 1px solid var(--primary);}
.tabs li.current{ background: white; color: var(--primary); box-shadow: 0px 5px 16px 4px rgba(0, 0, 0, 0.05); }
.tabs span{ white-space: nowrap ; display: flex; flex-direction: column; justify-content: center; height: 100%;}
.tabs li:first-child span:before{ content: url(/images/main/main_i03.png);  }
.tabs li:first-child.current span:before{ content: url(/images/main/main_i03_hover.png);  }
.tabs li:nth-child(2) span:before{ content: url(/images/main/main_i04.png);  }
.tabs li:nth-child(2).current span:before{ content: url(/images/main/main_i04_hover.png);  }
.tabs li:last-child span:before{ content: url(/images/main/main_i05.png);  }
.tabs li:last-child.current span:before{ content: url(/images/main/main_i05_hover.png);  }
.tab_link{ cursor: pointer }
.tab_content{ display: none }
.tab_content.current{ display: block }

.area_data {padding: 140px 0;}
.area_data__cont {width: 56%;}
.area_data .tab_content > a {font-weight: 600; color: #444; display: flex; justify-content: end; gap: 10px;}
.area_data .tab_content li {margin-top: 10px; background: white;}
.area_data .tab_content li a {display: flex; border: 1px solid #ededed; box-sizing: border-box; }
.area_data .tab_content li a > div:first-child {padding: 1.6em 3em; width: calc(87.7% - 100px);}
.area_data .tab_content li a > div:first-child h2 {font-size: var(--font_size18); }
.area_data .tab_content li a > div:first-child p {font-size: var(--font_size15); color: #444; white-space: nowrap; overflow: hidden;}
.area_data .tab_content li a > div:last-child {background: #ededed; color: var(--primary); width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.area_data .tab_content li a > div:last-child h3 {font-size: var(--font_size32); line-height: 1;}

@media all and (max-width:1080px){
	.area_data .inr {gap: 0;}
	.area_data__cont {width: 60%;}
}
@media all and (max-width:768px){
	.area_data .inr {flex-direction: column;}
	.area_data__text {height: auto; width: 100%; }
	.tabs {margin-top: 20px;}
	.area_data__cont {width: 100%; margin-top: 20px;}
	.area_data {padding: 6em 0;}
	.tabs span {font-size: 16px; justify-content: flex-end; margin-top: -20px;}
}

.area_customer {display: flex; box-shadow: 7px 7px 18px 2px rgba(0, 0, 0, 0.08); border-radius: 40px; background: white; padding: 5.7%; justify-content: space-between; align-items: flex-end;}
.area_cs > .inr {padding-bottom: 6em;}
.area_customer_text {width: 35%; padding-right: 4%;}
.online {width: 57%; border-left: 1px solid #e1e1e1; padding-left: 4%;}
.area_cs_call {margin-top: 4em;}
.area_cs_call li {background: #fafafa; border: 1px solid #ededed; border-radius: 10px; padding: 1em 0; margin-bottom: 10px;}
.area_cs_call li a {display: flex; align-items: center;}
.area_cs_call li a > span {border-right: 1px solid #ddd; padding: 0 3em 0 4em; line-height: 1; font-weight: 600;}
.area_cs_call li a > div {display: flex; flex-direction: column; padding-left: 3em;}
.area_cs_call li:last-child {color: #ca2839;}

.area_cs_time {border: 1px solid #ededed; background: white; padding: 1.5em 2.5em 1.8em;}
.area_cs_time h2 {font-size: var(--font_size20); font-weight: 800; color: #222; display: flex; gap: 10px; align-items: center;}
.area_cs_time div {display: flex; margin-top: 10px; line-height: 1; justify-content: space-between;}
.area_cs_time div span:nth-child(2) {padding-left: 1em; border-left: 1px solid #ddd; }
.area_cs_time div span:last-child {color: #ca2839;}

.online form > div {display: flex; margin-bottom: 1.3em; align-items: center;}
.online form > div h1 {width: 6em; color: #555; font-size: var(--font_size18);}

.online form > div label {color: #444;}
.online form > div input[type=checkbox] {border-radius: 50%;}
.online_name input {width: calc(100% - 6em);border-radius: 5px; background: #f5f5f5; border-color: #efefef; height: 3em;}
.online_phone > div {display: flex; justify-content: space-between; align-items: center; width: calc(100% - 6em);}
.online_phone input {width: calc((100% - 6em) / 3);border-radius: 5px; background: #f5f5f5; border-color: #efefef; height: 3em;}
.online_head input {width: calc(100% - 6em);border-radius: 5px; background: #f5f5f5; border-color: #efefef; height: 3em;}
.online form > div.online_text {align-items: flex-start;}
.online_text textarea {width: calc(100% - 6em); overflow: hidden; height: 7em; border-radius: 5px; background: #f5f5f5; border-color: #efefef; }

.online form > .wrap_checkbox {margin-bottom: 1.5em; font-weight: 500; color: #666;}
.wrap_checkbox a {display: inline-block; margin: 0 0 0 auto;}
#online_btn {background: var(--primary); padding: 1em; border-radius: 10px; width: 100%; font-size: 1.4em; color: white;}

@media all and (max-width:1400px){
	.area_customer {padding: 3%;}
	
}
@media all and (max-width:1280px){
	.area_cs_time div {flex-direction: column; gap: 10px;}
	.area_cs_time div span:nth-child(2) {padding-left: 0; border-left: 0; }
	.area_cs_call li a > span {padding:  0 2em 0 0;}
	.area_cs_call li {padding: 1em 2em ;}
	
}
@media all and (max-width:1080px){
	.area_customer {flex-direction: column;}
	.area_customer_text {width: 100%; padding-right: 0;}
	.online {border-left: 0; padding-left: 0; width: 100%; margin-top: 20px;}
	.area_cs_time h2 {justify-content: center;}
	.area_cs_time div {flex-direction: row; justify-content: center;}
	.area_cs_call {margin-top: 2em;}
 
	
}
@media all and (max-width:600px){
	.area_customer {padding: 6% 3%;}
	.online_phone input {width: calc((100% - 3em) / 3);}
 
}