@charset "utf-8";

/* 제작 장점 */
.main-merit-2024 {padding:150px 0 140px; overflow:hidden; background:url('../images/main/2024-merit-bg.jpg') 50% 50%/cover no-repeat; text-align:center; color:#fff;}
.main-merit-2024 .main-title {margin-bottom:90px;}
.main-merit-2024 .main-title * {color:#fff;}
.main-merit-2024 .slider {position:relative;}
.main-merit-2024 .circle {position:absolute; top:0; left:50%; width:400px; height:400px; margin-left:-200px;}
.main-merit-2024 .circle svg {display:block; width:100%; height:100%; overflow:visible; transform-origin:center center;}
.main-merit-2024 .swiper-slide {width:auto; padding:0 70px;}
.main-merit-2024 .swiper-slide-active * {opacity:1 !important;}
.main-merit-2024 .item .tit-area {position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; height:400px;}
.main-merit-2024 .item .tit-area h3 {position:relative; z-index:100; font-size:120px; font-weight:800; line-height:1.3em; letter-spacing:-.03em; transition:.2s; opacity:.1;}
.main-merit-2024 .item .tit-area p {position:absolute; bottom:60px; left:0; width:100%; font-size:22px; line-height:1.33em; letter-spacing:-.03em; transition:.2s; opacity:0;}
.main-merit-2024 .item .txt-area {margin-top:33px; min-height:160px; font-size:20px; font-weight:500; line-height:1.6em; letter-spacing:-.03em; transition:.2s; opacity:0;}
.main-merit-2024 .item .txt-area span {display:inline-block;}
.main-merit-2024 .item .txt-area .dot {margin:0 .4em;}
.main-merit-2024 .arrows {display:flex; justify-content:center;}
.main-merit-2024 .slide-btn {padding:10px; border:0; background:transparent; opacity:.2; transition:.2s;}
.main-merit-2024 .slide-btn:hover {opacity:1;}

/* 검색엔진 최적화(SEO) */
.main-seo {position:relative; padding:150px 0 0 0;}
.main-seo .bg-wrap {position:absolute; top:100px; left:0; bottom:-340px; width:100%; overflow:hidden; pointer-events:none;}
.main-seo .bg {position:absolute; width:47%;}
.main-seo .bg:before {content:''; display:block; padding-bottom:100%;}
.main-seo .bg1 {top:0; left:0; -webkit-transform:translateX(-50%); transform:translateX(-50%); border-radius:100%; background-image:-webkit-radial-gradient( 50% 50%, circle closest-side, rgb(245,205,177) 0%, rgb(255,255,255) 65%);}
.main-seo .bg2 {bottom:0; right:0; -webkit-transform:translateX(50%); transform:translateX(50%); border-radius:100%; background-image:-webkit-radial-gradient( 50% 50%, circle closest-side, rgb(248,222,178) 0%, rgb(255,255,255) 65%);}
.main-seo .contain {position:relative;}
.main-seo .main-title h2 {font-size:40px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.main-seo .main-title p {margin-top:20px;}
.main-seo .main-title p strong {display:inline-block; margin-bottom:6px; color:#242424; font-size:1.25em; font-weight:500; line-height:1.5em;}
.main-seo .slider .swiper {overflow:visible;}
.main-seo .slider .swiper-wrapper {display:grid; grid-template-columns:repeat(5, 1fr); gap:20px;}
.main-seo .slider .box {position:relative; height:100%; padding:50px 25px; background:#fff; box-shadow:0px 0px 16px 0px rgba(0, 0, 0, 0.1); border-radius:24px; text-align:center;}
.main-seo .slider .box dt {margin-top:1em; margin-bottom:.3em; font-size:22px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.main-seo .slider .box dd {color:#454545; line-height:1.63em;}
.main-seo .slider .box dd strong {font-weight:600;}
.main-seo .slider .box .c1 {color:#ef5632;}
.main-seo .slider .box .c2 {color:#ffa100;}
.main-seo .slider .box.first {padding:30px; color:#fff; background:linear-gradient(180deg, rgb(239,86,50) 0%, rgb(255,196,95) 100%); text-align:left;}
.main-seo .slider .box.first:before {content:''; position:absolute; bottom:30px; right:20px; width:65%; max-width:169px; height:60%; background:url('../images/main/seo-tit-bg.png') 100% 100%/contain no-repeat;}
.main-seo .slider .box.first p {position:relative; font-size:36px; font-weight:600; line-height:1.17em; letter-spacing:-.03em;}

/* 제작 혜택 */
.main-service-2024 {position:relative; z-index:2; padding:150px 0 0; margin-bottom:150px; overflow:hidden;}
.main-service-2024 .main-title {width:42%; text-align:left; margin-bottom:0;}
.main-service-2024 .tit-area {display:flex; flex-direction:column; position:absolute; top:0; left:0; width:100%; height:100vh; padding:150px 0 20px;}
.main-service-2024 .heading {margin-bottom:-20px;}
.main-service-2024 .heading .main-title h2 {font-size:40px; line-height:1.2em; letter-spacing:-.03em;}
.main-service-2024 .heading .website {margin-top:22px; white-space:nowrap; color:#f7f8f9; font-size:120px; font-weight:800; line-height:1em; letter-spacing:-.03em;}
.main-service-2024 .content {flex:1 1 auto; min-height:0; height:1%; position:relative; padding:96px 0; color:#fff;}
.main-service-2024 .content:before {content:''; position:absolute; top:0; left:calc(50% - 800px); bottom:0; right:0; background:#2174ce; border-radius:100px 0 0 100px;}
.main-service-2024 .content .contain {position:relative; height:100%; display:flex; flex-direction:column; justify-content:space-between;}
.main-service-2024 .content .main-title h2 {color:#fff; font-size:60px; font-weight:800; line-height:1.3em; letter-spacing:-.03em;}
.main-service-2024 .content .main-title p {color:#fff;}
.main-service-2024 .content .main-title .lg {margin:16px 0; font-size:26px; line-height:1.3em; letter-spacing:-.03em;}
.main-service-2024 .content .more {display:inline-flex; justify-content:space-between; align-items:center; width:180px; height:50px; padding:0 20px; border:1px solid rgba(255,255,255,.5); border-radius:50px;}
.main-service-2024 .content .more span {margin-left:8px;}
.main-service-2024 .list-area {position:relative; margin-left:44.5%; padding:150px 0;}
.main-service-2024 .list-area .items {display:flex; flex-wrap:wrap; align-items:flex-start; gap:56px;}
.main-service-2024 .list-area .item {display:flex; flex-direction:column; gap:30px; width:calc(50% - 28px); min-height:496px; padding:49px; background:#fff; border-radius:24px; box-shadow:0px 0px 16px 0px rgba(0, 0, 0, 0.2);}
.main-service-2024 .list-area .item:first-child {margin-left:calc(50% + 28px);}
.main-service-2024 .list-area .item:nth-child(even) {margin-top:-207px;}
.main-service-2024 .list-area .num {flex:1 1 auto; min-height:0; height:1%; margin-top:-3px; color:#4876ef; font-weight:600; line-height:1.3em;}
.main-service-2024 .list-area .txt-area {display:flex; flex-direction:column; justify-content:flex-end; min-height:180px;}
.main-service-2024 .list-area .cost {display:inline-block; width:96px; margin-bottom:10px; padding:6px 4px; background:#5837e4; border-radius:8px; color:#fff; font-size:15px; line-height:1.34em; letter-spacing:-.03em; text-align:center;}
.main-service-2024 .list-area .m-tt {margin-bottom:8px; font-size:26px; line-height:1.3em; letter-spacing:-.03em;}
.main-service-2024 .list-area .s-tt {margin-bottom:4px; font-size:18px; font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.main-service-2024 .list-area .txt {color:#686868; font-weight:300; line-height:1.38em; letter-spacing:-.035em;}
.main-service-2024 .list-area .ico {width:100px;}

/* 유지보수 */
.main-as-2024 {padding:150px 0; background:#4644a0;}
.main-as-2024 .main-title {margin-bottom:70px;}
.main-as-2024 .main-title h2 {font-weight:400; color:#fff;}
.main-as-2024 .main-title p {font-weight:300; color:#fff;}

.as-counter-wrap {display:flex; gap:56px;}
.as-counter-wrap h3 {margin-bottom:24px; color:#fff; font-size:20px; font-weight:400; line-height:1.3em; letter-spacing:-.03em;}

.as-box {background:#fff; border-radius:20px;}

.as-total {width:43.5%}
.as-total .as-box {display:flex; justify-content:center; align-items:center; height:160px; padding:10px; text-align:center;}
.as-total dt {margin-bottom:16px; color:#242424; font-size:16px; font-weight:500; line-height:1.3em; letter-spacing:-.04em;}
.as-total dd {color:#686868; font-size:18px; line-height:1.3em; letter-spacing:-.03em;}
.as-total dd strong {color:#5250aa; font-size:40px; font-weight:700; line-height:1em; letter-spacing:0; letter-spacing:-.03em;}
.as-total .items {display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;}
.as-total .item.wide {grid-area: 2 / 1 / 3 / 3; padding-left:0; padding-right:0;}
.as-total .item.wide dl {position:relative; flex:1;}
.as-total .item.wide dl:not(:first-child)::before {content:''; position:absolute; top:8px; left:0; bottom:8px; width:1px; background:#ddd;}
.as-total .item.wide dt {width:95px; margin-left:auto; margin-right:auto; background:#f72a85; border-radius:30px; color:#fff; line-height:32px;}

.as-graph {display:flex; flex-direction:column; width:56.5%}
.as-graph .as-box {display:flex; align-items:center; flex:1 1 auto; min-height:0; height:1%;}
.as-graph #chart_as_monthly {width:98%;}
.as-graph foreignObject  {overflow:visible !important;}
.as-graph svg {overflow:visible !important;}
.as-graph svg * {font-family:'Pretendard',sans-serif !important;}
.as-graph .apexcharts-legend-marker {margin-right:6px; width:16px !important; height:16px !important;}
.as-graph .apexcharts-xaxis text,
.as-graph .apexcharts-yaxis text {fill:#454545 !important;}
.as-graph .apexcharts-legend-text {font-size:16px !important; font-weight:500; color:#454545 !important; line-height:1em;}

.maintenance-listup {margin-top:90px;}
.maintenance-listup .main-title {margin-bottom:50px;}
.maintenance-listup .main-title h2 strong {color:#f72a85;}
.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}

/* 제작기술 */
.main-tech-2024 {padding:150px 0 70px; text-align:center;}
.main-tech-2024 .main-title {margin-bottom:70px;}
.main-tech-2024 .main-title h2 {font-size:40px;}
.main-tech-2024 .items {display:grid; align-items:start; grid-template-columns:repeat(4, 1fr); gap:24px;}
.main-tech-2024 .item .box {position:relative; overflow:hidden; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; color:#fff; border-radius:500px;}
.main-tech-2024 .item .box:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#2174ce; opacity:.95;}
.main-tech-2024 .item .box:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#2174ce; transition:.75s;}
.main-tech-2024 .item .box.st1 {background-image:url('/images/main/2024-tech-sms.jpg');}
.main-tech-2024 .item .box.st2 {background-image:url('/images/main/2024-tech-api.jpg');}
.main-tech-2024 .item .box.st3 {background-image:url('/images/main/2024-tech-seo.jpg');}
.main-tech-2024 .item .box.st4 {background-image:url('/images/main/2024-tech-ebook.jpg');}
.main-tech-2024 .item:nth-child(even) {margin-top:100px;}
.main-tech-2024 .item:nth-child(even) .box:before {background:#09cd87;}
.main-tech-2024 .item:nth-child(even) .box:after {background:#09cd87;}
.main-tech-2024 .item .in {position:relative; display:flex; flex-direction:column; height:560px; padding:80px 32px;}
.main-tech-2024 .item .cnt-area {flex:1 1 auto; min-height:0; height:1%;}
.main-tech-2024 .item .ico {width:100px; margin:0 auto 32px;}
.main-tech-2024 .item .tit {margin-bottom:8px; font-size:26px; line-height:1.3em; letter-spacing:-.03em;}
.main-tech-2024 .item .txt {font-size:16px; font-weight:300; line-height:1.38em; letter-spacing:-.03em;}
.main-tech-2024 .item .txt strong {font-weight:600;}
.main-tech-2024 .item .more {display:block; padding:20px 0;}
.main-tech-2024 .item .more svg {vertical-align:middle; margin-left:5px; transition:.2s;}
.main-tech-2024 .item .more:hover svg {transform:translate(5px,0);}
.main-tech-2024 .item .underline {text-decoration:underline; text-underline-offset: 0.25em!important;}
.main-tech-2024 .item.aos-animate .box:after {transform:translate(0,-100%); -webkit-transform:translate(0,-100%); transition-delay:.5s;}

@media (max-width: 1500px) {
	.main-float-nav {display:none;}
}

@media (max-width: 1280px) {
	.main-merit-2024 .main-title {margin-bottom:50px;}
	.main-merit-2024 .circle {width:320px; height:320px; margin-left:-160px;}
	.main-merit-2024 .swiper-slide {padding:0 56px;}
	.main-merit-2024 .item .tit-area {height:320px;}
	.main-merit-2024 .item .tit-area h3 {font-size:80px;}
	.main-merit-2024 .item .tit-area p {bottom:40px; font-size:18px;}
	.main-merit-2024 .item .txt-area {min-height:120px; font-size:16px;}

	.main-seo .bg-wrap {top:20px;}
	.main-seo .bg {width:80%;}
	.main-seo .main-title h2 {font-size:32px;}
	.main-seo .slider .box {padding:35px 10px; border-radius:20px;}
	.main-seo .slider .box .ico {width:70px; margin:0 auto;}
	.main-seo .slider .box dt {font-size:18px;}
	.main-seo .slider .box dd {font-size:14px;}
	.main-seo .slider .box dd strong {font-weight:600;}
	.main-seo .slider .box .c1 {color:#ef5632;}
	.main-seo .slider .box .c2 {color:#ffa100;}
	.main-seo .slider .box.first {padding:24px;}
	.main-seo .slider .box.first p {font-size:24px;}

	.main-service-2024 {margin-bottom:0;}
	.main-service-2024 .tit-area {padding-bottom:0;}
	.main-service-2024 .heading .main-title h2 {font-size:32px;}
	.main-service-2024 .heading .website {font-size:88px;}
	.main-service-2024 .content {padding:48px 0; background:#2174ce;}
	.main-service-2024 .content:before {display:none;}
	.main-service-2024 .content .main-title h2 {font-size:40px;}
	.main-service-2024 .content .main-title .lg {font-size:24px;}
	.main-service-2024 .list-area .items {gap:24px;}
	.main-service-2024 .list-area .item {width:calc(50% - 12px); min-height:430px; padding:32px;}
	.main-service-2024 .list-area .item:first-child {margin-left:calc(50% + 12px);}
	.main-service-2024 .list-area .item:nth-child(even) {margin-top:-207px;}
	.main-service-2024 .list-area .num {font-size:14px;}
	.main-service-2024 .list-area .txt-area {min-height:160px;}
	.main-service-2024 .list-area .cost {width:80px; font-size:13px;}
	.main-service-2024 .list-area .m-tt {font-size:24px;}
	.main-service-2024 .list-area .s-tt {font-size:16px;}
	.main-service-2024 .list-area .txt {font-size:14px;}
	.main-service-2024 .list-area .ico {width:80px;}

	.as-counter-wrap {gap:32px;}
	.as-total .items {gap:16px;}
	.as-total dt {font-size:14px;}
	.as-total .item.wide dt {width:80px; line-height:24px;}
	.as-total dd strong {font-size:32px;}

	.main-tech-2024 .main-title {margin-bottom:50px;}
	.main-tech-2024 .main-title h2 {font-size:32px;}
	.main-tech-2024 .item:nth-child(even) {margin-top:70px;}
	.main-tech-2024 .item .in {height:420px; padding:60px 24px;}
	.main-tech-2024 .item .ico {width:80px; margin-bottom:24px;}
	.main-tech-2024 .item .tit {font-size:22px;}
	.main-tech-2024 .item .txt {font-size:14px;}
}

@media (max-width: 1024px) {
	.main-service-2024 .list-area .m-tt {font-size:22px;}

	.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;}

}

@media (max-width: 900px) {
	.main-seo .slider .swiper-wrapper {grid-template-columns: repeat(3, 1fr);}
	.main-seo .slider .swiper-slide:nth-child(1) {grid-column:span 3;}

	.main-service-2024 .list-area {margin-left:55%;}
	.main-service-2024 .list-area .item {width:100%;}
	.main-service-2024 .list-area .item:first-child {margin-left:0;}
	.main-service-2024 .list-area .item:nth-child(even) {margin-top:0;}

	.as-counter-wrap {flex-wrap:wrap;}
	.as-total {width:100%;}
	.as-graph {width:100%;}
	.as-graph .as-box {padding-bottom:10px;}

	.main-tech-2024 .items {max-width:600px; margin:0 auto; grid-template-columns: repeat(2, 1fr); padding-bottom:80px;}
	.main-tech-2024 .item:nth-child(even) {margin-top:0;}
	.main-tech-2024 .item:nth-child(even) .box {transform:translateY(80px);}

}

@media (max-width: 640px) {
	.main-merit-2024 {padding:70px 0 60px;}
	.main-merit-2024 .main-title {margin-bottom:25px;}
	.main-merit-2024 .swiper-slide {width:100%; padding:0 10px;}
	.main-merit-2024 .circle {width:220px; height:220px; margin-left:-110px;}
	.main-merit-2024 .item .tit-area {height:220px; padding-bottom:1em;}
	.main-merit-2024 .item .tit-area h3 {font-size:10.556vw;}
	.main-merit-2024 .item .tit-area p {bottom:16%; font-size:15px;}
	.main-merit-2024 .item .txt-area {margin-top:16px; font-size:14px;}
	.main-merit-2024 .item .txt-area span {width:100%;}
	.main-merit-2024 .item .txt-area .dot {display:none !important;}
	.main-merit-2024 .slide-btn {padding:8px;}
	.main-merit-2024 .arrows svg {width:60px; height:auto;}

	.main-seo {padding-top:70px;}
	.main-seo .bg-wrap {display:none;}
	.main-seo .main-title h2 {font-size:26px;}
	.main-seo .main-title p {margin-top:12px;}
	.main-seo .slider {margin:0 -15px; padding:0 15px; overflow:hidden;}
	.main-seo .slider .swiper-wrapper {display:flex; gap:unset; height:auto !important;}
	.main-seo .slider .swiper-slide {width:230px; padding:16px 0;}
	.main-seo .slider .box {height:280px;}

	.main-service-2024 {padding:0 0 50px; background:#2174ce;}
	.main-service-2024 .main-title {width:auto;}
	.main-service-2024 .tit-area {position:static; display:block; height:auto; padding:0;}
	.main-service-2024 .heading {padding:70px 0 0 0; margin-bottom:-5px; background:#fff;}
	.main-service-2024 .heading .main-title h2 {font-size:28px;}
	.main-service-2024 .heading .website {margin:10px -15px 0; font-size:11.389vw;}
	.main-service-2024 .content {padding:35px 0 16px;}
	.main-service-2024 .content .main-title .lg {margin:10px 0; font-size:20px;}
	.main-service-2024 .content .more {width:136px; height:40px; margin-top:30px; padding:0 15px;}
	.main-service-2024 .content .more svg {width:16px; height:auto; margin-top:-.1em;}
	.main-service-2024 .list-area {padding:40px 15px; margin:0 -15px;}
	.main-service-2024 .list-area .items {gap:0; flex-wrap:nowrap;}
	.main-service-2024 .list-area .item {display:block; position:relative; padding:24px; height:auto !important; min-height:240px; border-radius:12px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);}
	.main-service-2024 .list-area .num {height:auto; margin-top:0; font-size:12px; margin-bottom:20px;}
	.main-service-2024 .list-area .txt-area {display:block; min-height:auto;}
	.main-service-2024 .list-area .cost {width:72px; padding:5px 0; border-radius:5px; font-size:12px;}
	.main-service-2024 .list-area .m-tt {font-size:20px;}
	.main-service-2024 .list-area .s-tt {margin-right:70px;}
	.main-service-2024 .list-area .txt {font-size:13px;}
	.main-service-2024 .list-area .ico {position:absolute; top:60px; right:10px; width:70px;}


	.main-as-2024 {padding:70px 0;}
	.main-as-2024 .main-title {margin-bottom:25px;}

	.as-counter-wrap h3 {font-size:16px; margin-bottom:8px;}
	.as-box {border-radius:12px;}
	.as-total .as-box {height:100px; padding:8px;}
	.as-total dt {margin-bottom:12px;}
	.as-total dd {font-size:14px;}
	.as-total dd strong {font-size:25px;}

	.as-graph .apexcharts-legend-marker {margin-right:5px; width:12px !important; height:12px !important;}
	.as-graph .apexcharts-legend-text {font-size:12px !important;}

	.maintenance-listup {margin-top:60px;}
	.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;}

	.main-tech-2024 {padding:70px 0 30px;}
	.main-tech-2024 .main-title h2 {font-size:25px;}
	.main-tech-2024 .items {gap:20px 8px; padding-bottom:50px;}
	.main-tech-2024 .item:nth-child(even) .box {transform:translateY(50px);}
	.main-tech-2024 .item .in {height:325px; padding:40px 8px;}
	.main-tech-2024 .item .ico {width:50px; margin-bottom:10px;}
	.main-tech-2024 .item .tit {font-size:20px;}
	.main-tech-2024 .item .txt {font-size:13px;}
	.main-tech-2024 .item .more {padding:0; font-size:13px;}
	.main-tech-2024 .item .more svg {width:20px; height:20px; margin:-.2em 0 0 3px;}

}