@charset "utf-8";

.maintenance-v2-wrapper {padding-bottom:200px;}
.maintenance-v2-wrapper .title {margin-bottom:87px;}
.maintenance-v2-wrapper .title h3 {text-align:center; font-size:30px; font-weight:400; letter-spacing:-.03em; line-height:1.33em;}

.maintenance-v2-heading {position:relative; height:974px; text-align:center; color:#fff; background:url("images/top_img.jpg") 50% 100% no-repeat; background-size:100% auto;}
.maintenance-v2-heading .inner {position:relative; display:flex; align-items:center; height:100%; padding-bottom:40px;}
.maintenance-v2-heading h2 {font-size:100px; font-weight:800; line-height:1.33em; letter-spacing:-.02em;}
.maintenance-v2-heading p {font-size:18px; line-height:1.6em; letter-spacing:-.04em;}
.maintenance-v2-heading .txt {font-size:36px; line-height:1.33em; letter-spacing:-.03em; margin-top:95px;}


.maintenance-management {padding:150px 0 200px;}
.maintenance-management .contain {max-width:1260px;}
.maintenance-management .head {text-align:center; margin-bottom:40px;}
.maintenance-management .head strong {font-weight:600;}
.maintenance-management .head .txt1 {font-size:18px; line-height:1.5em; letter-spacing:-.03em; margin-bottom:7px;}
.maintenance-management .head .txt2 {font-size:22px; line-height:1.5em; letter-spacing:-.03em;}
.maintenance-management .content {display:grid; gap:40px 0;}
.maintenance-management .content .group {display:flex; align-items:center; background:#f2f2f2; border-radius:36px; padding:70px 100px;}
.maintenance-management .content .group:nth-child(even) {flex-direction: row-reverse}
.maintenance-management .content .group:nth-child(even) .img {margin:0 40px 0 0;}
.maintenance-management .content .group:nth-child(even) {text-align:right;} 
.maintenance-management .content .cnt {flex:1 0 auto; min-width:0; width:1%;}
.maintenance-management .content .cnt .number {font-size:80px; font-weight:700; line-height:1.15em; color:#5250aa; letter-spacing:-.03em;}
.maintenance-management .content .cnt h3 {font-size:30px; line-height:1.33em; letter-spacing:-.03em; margin-bottom:15px;}
.maintenance-management .content .cnt p {color:#454545; font-size:18px; line-height:1.556em; letter-spacing:-.03em;}
.maintenance-management .content .cnt p strong {color:#242424;}
.maintenance-management .content .cnt .btn {display:inline-block; margin-top:45px; width:160px; line-height:48px; font-weight:500; color:#fff; text-align:center; border-radius:50px; background:#f72a85; box-shadow: 0px 16px 36px 0px rgba(247, 42, 133, 0.3);}
.maintenance-management .content .cnt .btn:hover {transform:translateY(-10px);}
.maintenance-management .content .img {margin:0 0 0 40px;}

.mask-img-wrap {position:relative; width:322px;}
/* .mask-img-wrap:before {content:""; position:absolute; top:-10%; left:-10%; width:120%; height:120%; background:url("images/mask_shadow.svg") 50% 50% no-repeat; background-size:contain;} */

.mask-img {
	position:relative; width:100%; z-index:2; 
	-webkit-mask-image: url("images/mask.svg");
	mask-image: url("images/mask.svg");

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-position: center;
	mask-position: center;

	-webkit-mask-size: contain;
	mask-size: contain;
}
.mask-img:before {content:""; display:block; padding-bottom:109.3%;}
.mask-img img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:2;}
.mask-img video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:2;}


.maintenance-year {padding:120px 0; color:#fff; background:url("images/management_service_bg.jpg") 50% 50% fixed no-repeat; background-size:cover; overflow:hidden;}
.maintenance-year .contain {max-width:1260px;}
.maintenance-year .txt-highlight-b::after {bottom:.2em; border-bottom-color:#f72a85}
.maintenance-year .content {display:flex; align-items:center; justify-content:space-between;}
.maintenance-year .content .img {width:400px;}
.maintenance-year .content .cnt {width:calc(100% - 460px); max-width:680px; margin-left:60px;}
.maintenance-year .content .cnt h4 {font-size:26px; font-weight: 600; line-height:1.33em; margin-bottom:15px;}
.maintenance-year .content .cnt p {font-size:18px; font-weight:300; line-height:1.556em; letter-spacing:-.03em;}

.maintenance-month {padding:200px 0;}
.maintenance-month .contain {max-width:1260px;}
.maintenance-month .txt-highlight-b::after {bottom:.2em; border-bottom-color:#f778b0}
.maintenance-month .content {display:flex;}
.maintenance-month .content .tit {position:sticky; top:150px; min-width:300px; align-self:flex-start;}
.maintenance-month .content .tit h4 {position:relative; font-size:26px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:4px;}
.maintenance-month .content .tit h4:before {content:""; position:absolute; top:0; left:-4px; width:16px; height:16px; background:#f72a85; opacity:.5; border-radius:100%; z-index:-1;}
.maintenance-month .content .tit p {color:#686868; font-size:20px; font-weight:500; line-height:1.33em; letter-spacing:-.03em;}
.maintenance-month .content .cnt {width:100%; display:grid; gap:40px 0;}
.maintenance-month .content .chart {padding:50px;  background:#333; border-radius:36px;}
.maintenance-month .content .chart .tt {color:#fff; font-size:20px; font-weight:500; line-height:1.33em; letter-spacing:-.03em; margin-bottom:17px;}
.maintenance-month .content .chart foreignObject  {overflow:visible !important;}
.maintenance-month .content .chart svg {overflow:visible !important;}
.maintenance-month .content .chart svg * {font-family:'Pretendard',sans-serif !important;}
.maintenance-month .content .chart .apexcharts-legend-marker {margin-right:6px; width:16px !important; height:16px !important;}
.maintenance-month .content .chart .apexcharts-xaxis text,
.maintenance-month .content .chart .apexcharts-yaxis text {fill:#aaa !important;}
.maintenance-month .content .chart .apexcharts-legend-text {font-size:16px !important; font-weight:500; color:#aaa !important; line-height:1em;}

#chart_as_category {width:120%; height:440px; margin-left:-10%;}
#chart_as_category * {font-family:'Pretendard',sans-serif !important;}
#chart_as_category .apexcharts-datalabels-group { color:#242424 !important; font-size:17px; transform:translate(0, -10px) !important;}
#chart_as_category .apexcharts-legend-text {font-size:16px !important; font-weight:500; color:#aaa !important;}
#chart_as_category .apexcharts-pie-label {font-size:26px; font-weight:600;}
#chart_as_category .apexcharts-legend-marker {margin-right:6px;}
#chart_as_category .apexcharts-datalabel-value {font-size:30px; font-weight:700;}

.maintenance-listup {background:#ededf6; padding:120px 0;}
.maintenance-listup .txt-highlight-b::after {bottom:.2em; border-bottom-color:#8583d9}
.maintenance-listup .slider {padding:0 4.5%; overflow:hidden;}
.maintenance-listup .slider .swiper {width:100%; height:380px; overflow:visible !important;}
.maintenance-listup .slider .swiper-slide {position:relative; width:230px; height:calc((100% - 20px) / 2) !important; padding:30px; background:#fff; border-radius:24px; font-size:17px; color:#454545; line-height:1.765em; letter-spacing:-.03em;}
.maintenance-listup .slider strong {font-weight:600;}
.maintenance-listup .slider .cate {position:absolute; top:30px; right:30px; text-align:center; width:48px; color:#fff; font-size:16px; font-weight:500; line-height:24px; border-radius:30px; background:#5250aa;}
.maintenance-listup .slider .cate.cate-2 {background:#686868}

.maintenance-cost {padding:200px 0;}
.maintenance-cost .txt-highlight-b::after {bottom:.2em; border-bottom-color:#f778b0}
.maintenance-cost .table {display:flex; justify-content:space-between;}
.maintenance-cost .table .col {width:calc(50% - 10px);}
.maintenance-cost .table table {width:100%; border-collapse:collapse; border-spacing:0px; border-radius:16px; border-style:hidden;  box-shadow:0 0 0 1px #ddd;}
.maintenance-cost .table table th {height:60px; color:#fff; font-size:1.05em; font-weight:500; letter-spacing:-.03em; line-height:1.33em; background:#f72a85; border-left:1px solid rgba(255,255,255,.4);}
.maintenance-cost .table table td {padding:16px 10px; color:#454545; line-height:1.6em; letter-spacing:-.03em; text-align:center; border:1px solid #ddd;}
.maintenance-cost .table table td strong {color:#f72a85; font-weight:500;}
.maintenance-cost .table table th:first-child {border-radius:16px 0 0 0; border-left:0;}
.maintenance-cost .table table th:last-child {border-radius:0 16px 0 0;}
.maintenance-cost .bottom-txt {margin-top:15px; color:#686868; line-height:1.66em;}


.event-v2-heading {text-align:center; margin-bottom:60px;}
.event-v2-heading h2 {font-size:36px; line-height:1.333em; letter-spacing:-.03em;}
.event-v2-heading p {color:#454545; font-size:18px; line-height:1.44em; letter-spacing:-.03em; margin-top:10px;}
.event-v2-heading .point {color:#f72a85}

.event-v2-section-7 {position:relative; background:#aaa; padding:155px 0 170px;}
.event-v2-section-7:before {content:""; position:absolute; top:-120px; bottom:-120px; left:0; right:0; background:#5250aa; clip-path:polygon(0 0, 23% 0, 100% 29%, 100% 100%, 77% 100%, 0 71%);}
.event-v2-section-7 .event-v2-heading {}
.event-v2-section-7 .event-v2-heading * {color:#fff;}
.event-v2-section-7 .form {max-width:1100px; margin:0 auto; background:#fff; border-radius:16px; padding:50px 90px; box-shadow:0 0 16px rgba(0,0,0,.1);}
.event-v2-section-7 .form .txt1 {text-align:center; color:#f72a85; font-size:20px; font-weight:700; line-height:1.44em; letter-spacing:-.03em;}
.event-v2-section-7 .form .txt2 {text-align:center; color:#242424; font-size:24px; font-weight:700; line-height:1.44em; letter-spacing:-.03em; margin-bottom:30px;}
.event-v2-section-7 .form .input-group {display:flex; margin-bottom:15px;}
.event-v2-section-7 .form .input {width:50%; height:50px; margin-right:10px; border:1px solid #ddd; border-radius:6px; background:#fff;}
.event-v2-section-7 .form .submit {flex:0 0 160px; width:160px; height:50px; background:#f72a85; border-radius:6px; border:0; color:#fff; font-size:18px; font-weight:600;}
.event-v2-section-7 .form .agree {color:#686868; font-size:16px; line-height:1.6em;}
.event-v2-section-7 .form .checkbox label:before {width:22px; height:22px; background:#fff url("images/checkbox_off.png") 50% 50% no-repeat; border-radius:100%; border:0;}
.event-v2-section-7 .form .checkbox input:checked + label:before {background-image:url("images/checkbox_on.png"); outline:none;}

@media (max-width: 1920px) {
	.maintenance-v2-heading {background-size:cover;}
}

@media (max-width: 1600px) {
	.maintenance-v2-heading {height:750px;}
	.maintenance-v2-heading h2 {font-size:85px;}
	.maintenance-v2-heading p {font-size:16px;}
	.maintenance-v2-heading .txt {font-size:30px; margin-top:60px;}

	
}

@media (max-width: 1280px) {

}

@media (max-width: 1024px) {
	.maintenance-v2-wrapper {padding-bottom:140px;}
	.maintenance-v2-wrapper .title {margin-bottom:60px;}
	.maintenance-v2-wrapper .title h3 {font-size:25px;}

	.maintenance-v2-heading {height:580px;}
	.maintenance-v2-heading h2 {font-size:65px;}
	.maintenance-v2-heading p {font-size:15px;}
	.maintenance-v2-heading .txt {font-size:24px; margin-top:50px;}

	.maintenance-management {padding:60px 0 100px;}
	.maintenance-management .content .group {padding:40px 60px; border-radius:26px;}
	.maintenance-management .content .cnt .number {font-size:60px;}
	.maintenance-management .content .cnt h3 {font-size:25px; margin-bottom:10px;}
	.maintenance-management .content .cnt .btn {width:140px; line-height:40px; margin-top:35px;}

	.mask-img-wrap {width:280px;}

	.maintenance-year {padding:100px 0;}	
	.maintenance-year .content {margin:-5% 0;}
	.maintenance-year .content .img {width:340px;}
	.maintenance-year .content .cnt {width: calc(100% - 380px);}
	.maintenance-year .content .cnt h4 {font-size:22px;}
	.maintenance-year .content .cnt p {font-size:16px;}

	#chart_as_category {position:relative; left:50%; width:480px; margin:0; transform:translateX(-50%) scale(.8);}

	.maintenance-month {padding:100px 0;}
	.maintenance-month .content .tit {min-width:240px;}
	.maintenance-month .content .tit h4 {font-size:22px;}
	.maintenance-month .content .tit p {font-size:16px;}
	.maintenance-month .content .chart {padding:30px;  border-radius:26px;}
	.maintenance-month .content .chart .tt {font-size:18px; margin-bottom:10px;}

	.maintenance-listup {padding:100px 0;}
	.maintenance-listup .slider {padding:0 30px;}
	.maintenance-listup .slider .swiper {height:330px;}
	.maintenance-listup .slider .swiper-slide {width:220px; padding:25px; border-radius:16px; font-size:15px;}
	.maintenance-listup .slider .cate {top:25px; right:25px; width:42px; font-size:14px; line-height:20px;}

	.maintenance-cost {padding:100px 0 150px;}



	.event-v2-heading {margin-bottom:47px;}
	.event-v2-heading h2 {font-size:30px;}
	.event-v2-heading p {font-size:16px;}

	.event-v2-section-7 {padding:80px 0;}
	.event-v2-section-7:before {top:-80px; bottom:-80px;}
	.event-v2-section-7 .form {width:80%; padding:40px 70px;}
	.event-v2-section-7 .form .txt1 {font-size:18px; margin-bottom:2px;}
	.event-v2-section-7 .form .txt2 {font-size:20px;}


	
	
}


@media (max-width: 900px) {
	.maintenance-v2-heading {height:680px;}

	.maintenance-management .head .txt1 {max-width:520px; margin-left:auto; margin-right:auto;}
	.maintenance-management .head .txt2 {max-width:660px; margin-left:auto; margin-right:auto;}

	.mask-img-wrap {width:220px;}

	.maintenance-year .title {max-width:600px; margin-left:auto; margin-right:auto;}
	.maintenance-year .content {display:block; margin:0;}
	.maintenance-year .content .img {width:auto; margin-top:-5%;}
	.maintenance-year .content .cnt {width:100%; max-width:600px; margin:0 auto;}

	.maintenance-month .content {display:block;}
	.maintenance-month .content .tit {position:static; margin-bottom:30px;}

	.maintenance-month .title {max-width:600px; margin-left:auto; margin-right:auto;}

	.maintenance-listup .title {max-width:520px; margin-left:auto; margin-right:auto;}

	.maintenance-cost .title {max-width:520px; margin-left:auto; margin-right:auto;}

	.maintenance-cost .table {display:block;}
	.maintenance-cost .table .col {width:100%; margin-bottom:40px;}


	.event-v2-section-7 .form {width:90%; padding:40px;}
	.event-v2-section-7 .form .submit {width:120px; flex:0 0 120px;}
}

@media (max-width: 760px) {
	.maintenance-v2-wrapper {padding-bottom:80px;}
	.maintenance-v2-wrapper .title {margin-bottom:40px;}
	.maintenance-v2-wrapper .title h3 {font-size:22px;}

	.maintenance-v2-heading {height:680px; background-image:url("images/top_img_m.jpg");}
	.maintenance-v2-heading h2 {font-size:50px; line-height:1em; margin-bottom:10px;}
	.maintenance-v2-heading p {font-size:13px;}
	.maintenance-v2-heading .txt {font-size:24px; margin-top:35px;}

	.maintenance-management {padding:40px 0 80px;}
	.maintenance-management .head {margin-bottom:25px;}
	.maintenance-management .head .txt1 {font-size:14px;}
	.maintenance-management .head .txt2 {font-size:20px;}
	.maintenance-management .content {gap:15px 0;}
	.maintenance-management .content .group {display:block; padding:30px 20px 55px; border-radius:18px; text-align:left !important;}
	.maintenance-management .content .cnt {width:auto;}
	.maintenance-management .content .cnt .number {font-size:50px;}
	.maintenance-management .content .cnt p {font-size:16px;}
	.maintenance-management .content .cnt .btn {width:160px; margin-top:22px; line-height:47px; font-size:16px; box-shadow: 0px 8px 18px 0px rgba(247, 42, 133, 0.3);}
	.maintenance-management .content .img {margin:50px 0 0 0 !important;}

	.mask-img-wrap {width:90%; max-width:260px; margin:0 auto;}

	.maintenance-year {padding:75px 0;}
	.maintenance-year .content .img {margin:-10px 0 30px;}
	.maintenance-year .content .cnt {padding:0 10px;}
	.maintenance-year .content .cnt h4 {font-size:20px; margin-bottom:7px;}
	.maintenance-year .content .cnt p {font-size:14px;}

	#chart_as_category {position:static; width:100%; height:auto; transform:none;}
	#chart_as_category .apexcharts-datalabels-group {font-size:12px; transform:translate(0, -10px) !important;}
	#chart_as_category .apexcharts-legend-text {font-size:12px !important;}
	#chart_as_category .apexcharts-pie-label {font-size:20px;}
	#chart_as_category .apexcharts-legend-series {margin:4px 8px !important;}
	#chart_as_category .apexcharts-legend-marker {width:12px !important; height:12px !important; margin-right:5px;}
	#chart_as_category .apexcharts-datalabel-value {font-size:21px;}

	#chart_as_monthly,
	#chart_as_daily {margin:0 -15px 0 -25px;}

	.maintenance-month {padding:80px 0;}
	.maintenance-month .content .tit {margin-bottom:25px;}
	.maintenance-month .content .tit h4 {padding:3px 0 0 6px; font-size:20px;}
	.maintenance-month .content .tit h4:before {left:0;}
	.maintenance-month .content .tit p {font-size:15px;}
	.maintenance-month .content .cnt {gap:15px 0;}
	.maintenance-month .content .chart {border-radius:16px; padding:25px;}
	.maintenance-month .content .chart .tt {margin-bottom:5px; font-size:15px;}
	.maintenance-month .content .chart svg {}
	.maintenance-month .content .chart .apexcharts-legend-series {margin:4px 8px !important;}
	.maintenance-month .content .chart .apexcharts-legend-marker {margin-right:5px; width:12px !important; height:12px !important;}
	.maintenance-month .content .chart .apexcharts-legend-text {font-size:12px !important;}

	.maintenance-listup {padding:80px 0;}
	.maintenance-listup .slider {padding:0 16px;}
	.maintenance-listup .slider .swiper {height:530px;}
	.maintenance-listup .slider .swiper-slide {height: calc(25% - 15px) !important; font-size:13px; border-radius:12px; padding:15px;}
	.maintenance-listup .slider .cate {top:15px; right:15px; width:36px; font-size:12px; line-height:18px;}

	.maintenance-cost {padding:80px 0;}
	.maintenance-cost .table .col {margin-bottom:16px;}
	.maintenance-cost .table table th {height:40px; font-size:13px;}
	.maintenance-cost .table table td {font-size:13px; padding:8px;}


	.event-v2-heading {margin-bottom:47px;}
	.event-v2-heading h2 {font-size:22px;}
	.event-v2-heading p {font-size:13px;}

	.event-v2-section-7 {padding:80px 0 100px;}
	.event-v2-section-7:before {top:-20px; bottom:-20px; clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);}
	.event-v2-section-7 .event-v2-heading {margin-bottom:15px;}
	.event-v2-section-7 .form {width:100%; padding:30px 16px 25px;}
	.event-v2-section-7 .form .txt1 {font-size:14px;}
	.event-v2-section-7 .form .txt2 {font-size:17px; margin-bottom:20px;}
	.event-v2-section-7 .form .input-group {display:block; margin-bottom:-20px;}
	.event-v2-section-7 .form .input {display:block; width:100%; height:44px; margin-bottom:6px;}
	.event-v2-section-7 .form .submit {width:100%; height:50px; font-size:18px; margin-top:40px;}
	.event-v2-section-7 .form .agree {position:relative; top:-64px; font-size:14px;}
	.event-v2-section-7 .form .checkbox label:before {width:20px; height:20px; background-size:contain;}


	
}