@charset "utf-8";

/* 메인 - 전체 */
.mainP .header {padding-bottom: 0px;background: transparent;}
.mainP .header.headerFixed {top: -100px;background: rgba(255,255,255,0.3);}
.mainP .contents {padding-top: 100px;}
.mainP .contents .titleArea + .section {position: relative;opacity: 1; transform: translateY(0px);-webkit-transition: all 1.0s;transition: all 1.0s;}
.mainP .contents .titleArea + .section.ani {opacity: 1; transform: translateY(0px);}
.mainP .footer {border-top: none;}
.mainP .footer .ftWrap {padding-top: 6px;}


/* 메인 - 탑 버튼 */
.mainP .gTopNavi.fixed {bottom: 110px;opacity: 1;}
.mainP .gTopNavi .btnTop {top: 0px;}

/* Masonry Grid */
.mainP .hero {margin: 0 60px;}
.mainP .heroGrid {background: #fff;}
.mainP .heroGridSizer {position: absolute;}
.mainP .heroGridSizer,
.mainP .heroGridItem {width: calc(33.333% - 40px);margin: 0 20px;}
.mainP .heroGridItem {float: left;border-radius: 20px;padding: 32px 30px;background: #fff;margin-bottom: 40px;}

.mainP .card01 {width: calc(66.666% - 40px);height: 580px;padding: 0;background: #5C7BF0;background: linear-gradient(120deg, #9D67E2, #1A90FF);}
.mainP .card02 {height: 270px;box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.16);}
.mainP .card03 {height: 270px;box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.16);}
.mainP .card04 {width: calc(66.666% - 40px);height: 225px;padding: 0;background: transparent;box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.16);}
.mainP .card05 {height: 225px;border-radius: 0px;padding: 0;background: transparent;}

/* 메인 - 슬라이더 */
.mainP .sliderWrap {position: relative;height: 100%;overflow: hidden;}
.mainP .sliderWrap:after {display: block;width: 0;height: 0;content: "";clear: both;}
.mainP .sliderWrap .mainVisual {width: 100%;height: 100%;}

.mainP .slideTextWrap {position: relative;width: 100%;height: 100%;padding: 49px 50px;z-index: 2;}
.mainP .slideTextWrap .slideText {padding: 0;}
.mainP .slideTextWrap .slideText p.top {font-size: 52px;font-weight: 700;color: #fff;line-height: 72px;letter-spacing: 0;margin-bottom: 21px;}
.mainP .slideTextWrap .slideText p.top .ani {position: relative;display: block;height: 72px;overflow: hidden;}
.mainP .slideTextWrap .slideText p.top .ani > span {position: absolute;top: 0;left: 0;width: 100%;/* height: 82px; */transform: translateY(0px);opacity: 1;}

.mainP .slide1 .slideTextWrap .slideText p.top .ani > span {transform: translateY(100px);opacity: 0;}
.mainP .slide1 .slideTextWrap .slideText p.main {transform: translateY(30px);opacity: 0;}
.mainP .slide1 .slideTextWrap .slideText p.sub {transform: translateY(30px);opacity: 0;}
.mainP .slide1 .slideTextWrap .slideText button {transform: translateY(30px);opacity: 0;}

.mainP .slideTextWrap .slideText p.main {font-size: 24px;/* font-weight: 700; */color: #fff;line-height: 34px;letter-spacing: 0;transform: translateY(0px);opacity: 1;}
.mainP .slideTextWrap .slideText p.sub {font-size: 16px;font-weight: 400;color: #fff;line-height: 26px;letter-spacing: 0;margin-top: 10px;transform: translateY(0px);opacity: 1;}
.mainP .slideTextWrap .slideText button {width: 116px;height: 52px;background: rgba(255,255,255,0.1);border-radius: 5px;border: 1px solid #fff;margin-top: 39px;-webkit-transition: all 0.2s;transition: all 0.2s;transform: translateY(0px);opacity: 1;}
.mainP .slideTextWrap .slideText button span {font-size: 14px;font-weight: 400;color: #fff;}
.mainP .slideTextWrap .slideText button:hover {background: rgba(255,255,255,0.25)}
.mainP .slideTextWrap .slideText button:hover span {}

.mainP .slideTextWrap .slideText.on p.top .ani:nth-of-type(1) span {transform: translateY(0px);opacity: 1;transition: transform 0.5s ease,opacity 0.5s ease;}
.mainP .slideTextWrap .slideText.on p.top .ani:nth-of-type(2) span {transform: translateY(0px);opacity: 1;transition: transform 1.0s ease,opacity 0.5s ease;}
.mainP .slideTextWrap .slideText.on p.top .ani:nth-of-type(3) span {transform: translateY(0px);opacity: 1;transition: transform 1.5s ease,opacity 0.5s ease;}

.mainP .slideTextWrap .slideText.on p.main {transform: translateY(0);opacity: 1;transition: transform 1.0s ease,opacity 0.5s ease;}
.mainP .slideTextWrap .slideText.on p.sub {transform: translateY(0);opacity: 1;transition: transform 1.0s ease,opacity 0.5s ease;}
.mainP .slideTextWrap .slideText.on button {transform: translateY(0);opacity: 1;transition: transform 1.0s ease,opacity 0.5s ease;}

.mainP .sliderWrap .mainVisual .slideBgWrap {position: absolute;right: 0;top: 0;width: 100%;height: 100%;/* background-size: 1160px 750px; *//* background-position: 0 0; *//* background-position: right top; */background-position: right -11px top;background-repeat: no-repeat;image-rendering: -webkit-optimize-contrast;transform: translateY(30px);opacity: 1;z-index: 1;-webkit-transition: all 0.2s;transition: all 0.2s;}
.mainP .sliderWrap .mainVisual .slide1 .slideBgWrap {opacity: 0;}
.mainP .sliderWrap .mainVisual .slideBgWrap.on {transform: translateY(0);opacity: 1;transition: transform 1.0s ease,opacity 0.5s ease;}

.mainP .sliderWrap .mainVisual .slide1 .slideBgWrap {background-image: url(/assets/images/main/main_slider01.png);}
.mainP .sliderWrap .mainVisual .slide2 .slideBgWrap {background-image: url(/assets/images/main/main_slider02.png);}
.mainP .sliderWrap .mainVisual .slide3 .slideBgWrap {background-image: url(/assets/images/main/main_slider03.png);}
.mainP .sliderWrap .mainVisual .slide4 .slideBgWrap {background-image: url(/assets/images/main/main_slider04.png);}

.mainP .sliderWrap .mainVisual .slick-arrow {display: none !important;}
.mainP .sliderWrap .mainVisual .slick-dots {display: none !important;}

.mainP .sliderWrap .progress {position: absolute;left: 60px;bottom: 54px;}
.mainP .sliderWrap .progress div {float: left;width: 130px;padding: 0;cursor: pointer;margin-right: 20px;color: white;}
.mainP .sliderWrap .progress div:last-child {margin-right: 0;}
.mainP .sliderWrap .progress div span.progressBar {display: block;width: 100%;height: 2px;background-color: rgba(255, 255, 255, 0.3);margin-bottom: 14px;-webkit-transition: all 0.2s;transition: all 0.2s;}
.mainP .sliderWrap .progress div span.progressBar .inProgress {display: block;width: 0%;height: 2px;background-color: rgba(255, 255, 255, 1);}
.mainP .sliderWrap .progress div h3 {font-size: 14px;font-weight: 400;color: #fff;/* letter-spacing: 0; */-webkit-transition: all 0.2s;transition: all 0.2s;}
.mainP .sliderWrap .progress div span.progressBar.active + h3 {font-weight: 500;}

.mainP .sliderWrap .progress div:hover span.progressBar {background-color: rgba(255, 255, 255, 1);}
.mainP .sliderWrap .progress div:hover h3 {font-weight: 500;}

/* 메인 - INNER 솔루션 */
.mainP .solutionArea {padding: 0;}
.mainP .solutionArea h2 {font-size: 16px;margin-bottom: 23px;}
.mainP .solutionArea ul {margin-left: -5px;margin-right: -5px;}
.mainP .solutionArea ul li {float: left;width: calc((100% / 3) - 10px);width: calc(33.33333% - 10px);margin-left: 5px;margin-right: 5px;}
.mainP .solutionArea ul li a {display: block;FONT-WEIGHT: 100;min-height: 170px;background: #EEF5FE;padding: 27px 0px 0px;border-radius: 5px;-webkit-transition: all 0.2s;transition: all 0.2s;-webkit-transition: all 0.3s;transition: all 0.3s;}
.mainP .solutionArea ul li p.subtit {font-size: 14px;color: #505050;letter-spacing: 0px;margin-bottom: 5px;text-align: center;}
.mainP .solutionArea ul li p.tit {position: relative;font-size: 18px;font-weight: 700;letter-spacing: 0px;margin-bottom: 13px;text-align: center;}
.mainP .solutionArea ul li p.desc {font-size: 13px;font-weight: 400;line-height: 20px;text-align: center;opacity: 0;word-break: keep-all;padding: 0 10px;}
.mainP .solutionArea ul li p.tit:after {display: block;position: absolute;top: 39px;left: 50%;transform: translateX(-50%);width: 55px;height: 81px;content:"";vertical-align: middle;background-repeat: no-repeat;background-size: contain;image-rendering: -webkit-optimize-contrast;-webkit-transition: all 0.1s;transition: all 0.1s;}
.mainP .solutionArea ul li.s03 p.tit:after {width: 99px;}
.mainP .solutionArea ul li.s01 p.tit:after {background-image: url(/assets/images/main/img_solution01.png);}
.mainP .solutionArea ul li.s02 p.tit:after {background-image: url(/assets/images/main/img_solution02.png);}
.mainP .solutionArea ul li.s03 p.tit:after {background-image: url(/assets/images/main/img_solution03.png);}

.mainP .solutionArea ul li a:hover {text-decoration: none;background: #0072DE;/* padding-top: 33px; */transform: translateY(-5px);box-shadow: 5px 5px 10px 0px rgba(0,114,222,0.32);}
.mainP .solutionArea ul li a:hover p.subtit {color: #fff;}
.mainP .solutionArea ul li a:hover p.tit {color: #fff;}
.mainP .solutionArea ul li a:hover p.tit:after {opacity: 0;}
.mainP .solutionArea ul li a:hover p.desc {color: #fff;opacity: 1;}

.mainP .solutionArea ul li.on a {text-decoration: none;background: #0072DE;/* padding-top: 33px; */transform: translateY(-5px);box-shadow: 5px 5px 10px 0px rgba(0,114,222,0.32);}
.mainP .solutionArea ul li.on a p.subtit {color: #fff;}
.mainP .solutionArea ul li.on a p.tit {color: #fff;}
.mainP .solutionArea ul li.on a p.tit:after {opacity: 0;}
.mainP .solutionArea ul li.on a p.desc {color: #fff;opacity: 1;}

/* 메인 - 구축사례 */
.mainP .referenceWrap {position: relative;}
.mainP .referenceWrap:after {display: block;width: 0;height: 0;content: "";clear: both;}
.mainP .referenceWrap h2 {font-size: 16px;margin-bottom: 23px;}
.mainP .referenceWrap a.btnMore {position: absolute;top: -2px;right: 0;display: block;width: 30px;height: 30px;background-image: url(/assets/images/main/btn_more.svg);background-color: #eee;border-radius: 99px;-webkit-transition: all 0.2s;transition: all 0.2s;}
.mainP .referenceWrap a.btnMore:hover {background-image: url(/assets/images/main/btn_more_on.svg);background-color: #0072DE;}

.mainP .referenceWrap .referenceArea .slick-list {}
.mainP .referenceWrap .referenceArea .slick-list .slick-slide {padding: 0 10px;}
.mainP .referenceWrap .referenceArea .slick-dots {display: none !important;}

.mainP .referenceArea {margin-left: -10px;margin-right: -10px;background: #ffffff;}
.mainP .referenceArea a {display: block;width: 100%;height: 100%;padding: 0;-webkit-transition: all 0.2s;transition: all 0.2s;}
.mainP .referenceArea p.img {position: relative;width: 100%;height: 130px;margin-bottom: 12px;/* background-size: contain; *//* background-position: center; *//* background-repeat: no-repeat; *//* background-color: #F7F7F7; *//* border: 1px solid #f7f7f7; */border-radius: 5px;overflow: hidden;background: #f7f7f7;}
.mainP .referenceArea p.img:before {display: block;position: absolute;top: 0px;left: 0px;width: 50px;text-align: center;content:"";color: #fff;font-size: 12px;/* font-weight: 700; */letter-spacing: 0px;padding: 5px 0px;vertical-align: middle;border-radius: 5px;background: #00B8A5;z-index: 2;}
.mainP .referenceArea p.img.si:before {content:"SI";}
.mainP .referenceArea p.img.sm:before {content:"SM";}
.mainP .referenceArea p.img.sism:before {content:"SI/SM";}
.mainP .referenceArea p.img:after {position: absolute;top: 0px;left: 0px;content:"";width: 100%;height: 100%;background-color: rgba(0,0,0,0);transition: all 0.1s;z-index: 1;}
.mainP .referenceArea p.img img {width: auto;height: 130px;margin: 0 auto;image-rendering: -webkit-optimize-contrast;transform: scale(1) rotate(.01deg);transition: .25s ease;}
.mainP .referenceArea p.tit {font-size: 16px;font-weight: 700;letter-spacing: 0px;line-height: 24px;text-align: center;padding: 0 10px;margin-bottom: 5px;-webkit-transition: all 0.3s;transition: all 0.3s;}
.mainP .referenceArea p.tit.ellipsis {display:inline-block;overflow:hidden;max-width:100%;text-overflow:ellipsis;/* white-space:nowrap; */display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-wrap:break-word;height: auto;position: relative;word-break: break-all;}
.mainP .referenceArea p.desc {font-size: 14px;font-weight: 400;letter-spacing: 0px;text-align: center;line-height: 20px;}
.mainP .referenceArea p.desc.ellipsis {display:inline-block;overflow:hidden;max-width:100%;text-overflow:ellipsis;/* white-space:nowrap; */display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-wrap:break-word;height: auto;position: relative;word-break: break-all;}
.mainP .referenceArea a:hover {text-decoration: none;}
/*.mainP .referenceArea a:hover p.tit {color: #0071DC;}*/
.mainP .referenceArea a:hover p.img:after {background-color: rgba(0,0,0,0.05);}
.mainP .referenceArea a:hover p.img img {transform: scale(1.15) rotate(.01deg);}

/* 메인 - 제품소개 */
.mainP .productArea {position: relative;}
.mainP .productArea:after {display: block;width: 0;height: 0;content: "";clear: both;}
.mainP .productArea ul {position: relative;padding: 0 6px 0 6px;z-index: 2;}
.mainP .productArea ul:after {display: block; width: 0; height: 0; content: ""; clear: both;}
.mainP .productArea ul li {float: left;width: calc(100% / 7);width: 14.28571%;}
.mainP .productArea ul li a {display: table;width: 100%;height: 225px;padding-top: 148px;text-align: center;border-radius: 20px;background-repeat: no-repeat;background-position: center 1px;/* background-size: contain; */background-size: auto;image-rendering: -webkit-optimize-contrast;/* background-color: #ccc; */-webkit-transition: all 0.2s;transition: all 0.2s;/* -webkit-transition: all 0.25s; *//* transition: all 0.25s; */}
.mainP .productArea ul li a.prd01 {background-image: url(/assets/images/main/img_product01.png);}
.mainP .productArea ul li a.prd02 {background-image: url(/assets/images/main/img_product02.png);}
.mainP .productArea ul li a.prd03 {background-image: url(/assets/images/main/img_product03.png);}
.mainP .productArea ul li a.prd04 {background-image: url(/assets/images/main/img_product04.png);}
.mainP .productArea ul li a.prd05 {background-image: url(/assets/images/main/img_product05.png);}
.mainP .productArea ul li a.prd06 {background-image: url(/assets/images/main/img_product06.png);}
.mainP .productArea ul li a.prd07 {background-image: url(/assets/images/main/img_product07.png);}
.mainP .productArea ul li a span {position: relative;display: block;font-size: 16px;font-weight: 700;line-height: 24px;vertical-align: middle;padding: 0 20px;-webkit-transition: all 0.2s;transition: all 0.2s;}
.mainP .productArea ul li a:hover {text-decoration: none;transform: translateY(-5px);}
.mainP .productArea ul li a:hover span {color: #fff;}

.mainP .productArea .hoverline {position: absolute;top: 0px;height: 100%;border-radius: 20px;background: #0072DE;z-index: 1;opacity: 0;}

/* 메인 - 서비스 바로가기 */
.mainP .linkArea {position: relative;}
.mainP .linkArea:after {display: block;width: 0;height: 0;content: "";clear: both;}
.mainP .linkArea ul {margin-left: -5px;margin-right: -7px;}
.mainP .linkArea ul:after {display: block; width: 0; height: 0; content: ""; clear: both;}
.mainP .linkArea ul li {position: relative;float: left;width: calc((100% / 2) - 10px);width: calc(50% - 11px);margin-left: 5px;margin-right: 5px;margin-bottom: 10px;}
.mainP .linkArea ul li:nth-child(3),
.mainP .linkArea ul li:nth-child(4){margin-bottom: 0px;}
.mainP .linkArea ul li a {/* display: table; */display: block;width: 100%;height: 107px;box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.16);border-radius: 10px;-webkit-transition: all 0.2s;transition: all 0.2s;vertical-align: top;}
.mainP .linkArea ul li:nth-child(3) a,
.mainP .linkArea ul li:nth-child(4) a {height: 108px;}
.mainP .linkArea ul li a span {position: relative;/* display: table-cell; */display: block;height: 100%;font-size: 16px;line-height: 24px;vertical-align: middle;padding: 42px 50px 42px 94px;}
.mainP .linkArea ul li a span:before {position: absolute;left: 30px;right: 0;/* top: 50%; */margin-top: -10px;/* transform: translateY(-50%); */display: block;width: 44px;height: 44px;content:"";vertical-align:middle;}
.mainP .linkArea ul li a span.icon01:before {background-image: url(/assets/images/main/img_link01.svg);}
.mainP .linkArea ul li a span.icon02:before {background-image: url(/assets/images/main/img_link02.svg);}
.mainP .linkArea ul li a span.icon03:before {background-image: url(/assets/images/main/img_link03.svg);}
.mainP .linkArea ul li a span.icon04:before {background-image: url(/assets/images/main/img_link04.svg);}
.mainP .linkArea ul li a span:after {position:absolute;/* top: 50%; */right: 29px;/* transform: translateY(-50%); */display:block;content:"";/* margin: 1px 0 0 0; */margin-top: -17px;vertical-align:middle;width: 6px;height: 12px;background: url(/assets/images/main/img_link_arrow.svg) no-repeat 0 0;}

.mainP .linkArea ul li a:hover {text-decoration: none;background: #0072DE;transform: translateY(-5px);box-shadow: 5px 5px 10px 0px rgba(0,114,222,0.32);}
.mainP .linkArea ul li a:hover span {color: #fff;}
.mainP .linkArea ul li a:hover span.icon01:before {background-image: url(/assets/images/main/img_link01_on.svg);}
.mainP .linkArea ul li a:hover span.icon02:before {background-image: url(/assets/images/main/img_link02_on.svg);}
.mainP .linkArea ul li a:hover span.icon03:before {background-image: url(/assets/images/main/img_link03_on.svg);}
.mainP .linkArea ul li a:hover span.icon04:before {background-image: url(/assets/images/main/img_link04_on.svg);}
.mainP .linkArea ul li a:hover span:after {background-image: url(/assets/images/main/img_link_arrow_on.svg);}



@media (max-width:1800px) {
/* 메인 - 슬라이더 */
.mainP .sliderWrap .mainVisual .slideBgWrap {background-position: 25% 85%;}

/* 메인 - INNER 솔루션 */
.mainP .solutionArea ul li a:hover {/* padding-top: 23px; */}
.mainP .solutionArea ul li p.desc {padding: 0 10px;}

/* 메인 - 제품소개 */
.mainP .productArea ul li a {background-position: center center;background-size: contain;}
.mainP .productArea ul li a span {font-size: 16px;letter-spacing: 0;padding: 0 10px;}

/* 메인 - 서비스 바로가기 */
.mainP .linkArea ul li a span {padding: 42px 20px 42px 84px;}
.mainP .linkArea ul li a span:before {left: 25px;}

}



@media (max-width:1600px) {
/* Masonry Grid */
.mainP .hero {margin: 0 0px;}
.mainP .heroGridSizer,
.mainP .heroGridItem {width: calc(50% - 40px);}

.mainP .card04 {width: calc(100% - 40px);}
.mainP .card05 {width: calc(100% - 40px); height: auto;}

/* 메인 - 슬라이더 */
.mainP .slideTextWrap {padding: 59px 20px;}
.mainP .slideTextWrap .slideText p.top {font-size: 35px;line-height: 38px;letter-spacing: -0.2px;margin-bottom: 21px;}
.mainP .slideTextWrap .slideText p.top .ani {height: 45px;}
.mainP .slideTextWrap .slideText p.top .ani > span {position: absolute;top: 0;left: 0;width: 100%;}

.mainP .slideTextWrap .slideText p.main {font-size: 20px;font-weight: 400;line-height: 30px;letter-spacing: -0.2px;margin-bottom: 39px;}
.mainP .slideTextWrap .slideText p.sub {font-size: 18px;font-weight: 400;color: #fff;line-height: 28px;letter-spacing: 0;margin-bottom: 49px;transform: translateY(30px);opacity: 0;display: none;}
.mainP .slideTextWrap .slideText button {width: 124px;height: 48px;}

.mainP .slide1 .slideTextWrap .slideText p.main {width: 210px;}
.mainP .slide2 .slideTextWrap .slideText p.main {width: 220px;}
.mainP .slide3 .slideTextWrap .slideText p.main {width: 210px;}
.mainP .slide4 .slideTextWrap .slideText p.main {width: 230px;}

.mainP .slideTextWrap .slideText.on p.sub {display: none;}

.mainP .sliderWrap .mainVisual .slideBgWrap {right: 0;top: 0;width: 100%;height: 100%;background-size: 160%;background-position: -125px 190px;background-position: 58% 85%;}

.mainP .sliderWrap .progress {width: 100%;padding: 0 20px;left: 0px;bottom: 19px;}
.mainP .sliderWrap .progress div {width: calc((100% / 4) - 2px);margin-right: 2px;}
.mainP .sliderWrap .progress div:last-child {margin-right: 0;}
.mainP .sliderWrap .progress div span.progressBar {margin-bottom: 13px;}

/* 메인 - INNER 솔루션 */


/* 메인 - 구축사례 */
.mainP .referenceArea p.img img {height: 130px;}

/* 메인 - 제품소개 */
.mainP .productArea ul li a {background-position: center center;background-size: contain;}
.mainP .productArea ul li a span {font-size: 16px;letter-spacing: 0;padding: 0 10px;}

/* 메인 - 서비스 바로가기 */
.mainP .linkArea {position: relative;}
.mainP .linkArea:after {display: block;width: 0;height: 0;content: "";clear: both;}
.mainP .linkArea ul {margin-left: -5px;margin-right: -5px;}
.mainP .linkArea ul:after {display: block; width: 0; height: 0; content: ""; clear: both;}
.mainP .linkArea ul li {position: relative;float: left;width: calc((100% / 4) - 10px);margin-left: 5px;margin-right: 5px;margin-bottom: 0px !important;}
.mainP .linkArea ul li a {display: table;width: 100%;height: 108px;box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.16);border-radius: 10px;-webkit-transition: all 0.2s;transition: all 0.2s;}
.mainP .linkArea ul li a span {position: relative;font-size: 16px;line-height: 24px;vertical-align: middle;padding: 42px 20px 42px 89px;}
.mainP .linkArea ul li a span:before {left: 25px;}
.mainP .linkArea ul li a span.icon01:before {background-image: url(/assets/images/main/img_link01.svg);}
.mainP .linkArea ul li a span.icon02:before {background-image: url(/assets/images/main/img_link02.svg);}
.mainP .linkArea ul li a span.icon03:before {background-image: url(/assets/images/main/img_link03.svg);}
.mainP .linkArea ul li a span.icon04:before {background-image: url(/assets/images/main/img_link04.svg);}
.mainP .linkArea ul li a span:after {/* position:absolute; *//* top: 50%; *//* right: 29px; *//* transform: translateY(-50%); *//* display:block; *//* content:""; *//* margin: 1px 0 0 0; *//* vertical-align:middle; *//* width: 6px; *//* height: 12px; *//* background: url(/assets/images/main/img_link_arrow.svg) no-repeat 0 0; */}

.mainP .linkArea ul li a:hover {text-decoration: none;background: #0072DE;transform: translateY(-5px);box-shadow: 5px 5px 10px 0px rgba(0,114,222,0.32);}
.mainP .linkArea ul li a:hover span {color: #fff;}
.mainP .linkArea ul li a:hover span.icon01:before {background-image: url(/assets/images/main/img_link01_on.svg);}
.mainP .linkArea ul li a:hover span.icon02:before {background-image: url(/assets/images/main/img_link02_on.svg);}
.mainP .linkArea ul li a:hover span.icon03:before {background-image: url(/assets/images/main/img_link03_on.svg);}
.mainP .linkArea ul li a:hover span.icon04:before {background-image: url(/assets/images/main/img_link04_on.svg);}
.mainP .linkArea ul li a:hover span:after {background-image: url(/assets/images/main/img_link_arrow_on.svg);}

}


@media (max-width:959px) {
/* 메인 - 전체 */
.mainP .header {border-bottom: none;}
.mainP .header .hdWrap h1 a {background-image: url(/assets/images/common/logo_mobile.svg);}
.mainP .header.headerFixed {top: 0px;background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0));}
.mainP .header.mobile {background: rgba(255,255,255,0.0);}
.mainP .header.mobile h1 a {background-image: url(/assets/images/common/logo.svg);}
.mainP .contents {padding-top: 0px;}
.mainP .footer {border-top: none;}
.mainP .footer .ftWrap {padding-top: 1px;}

/* 메인 - 탑 버튼 */
.mainP .gTopNavi.fixed {bottom: 50px;}
.mainP .gTopNavi .btnTop {top: -18px;}

/* 모바일 내비게이션 */
.mainP .menuButton span {background-color: #fff;}
.mainP .menuButton span:before {background-color: #fff;}
.mainP .menuButton span:after {background-color: #fff;}

.mainP .menuButton.active span:before {background-color: #191919;}
.mainP .menuButton.active span:after {background-color: #191919;}

/* Masonry Grid */
.mainP .hero {margin: 0 0px;}
.mainP .heroGrid {background: #fff;}
.mainP .heroGridSizer {position: absolute;}
.mainP .heroGridSizer,
.mainP .heroGridItem {width: calc(100% - 40px);height: auto;padding: 24px 20px 20px;}

.mainP .card01 {width: 100%;border-radius: 0px;padding: 22px 0px;margin: 0;height: 100vh;}
.mainP .card02 {margin-top: 40px;}
.mainP .card03 {padding: 24px 20px 25px;}
.mainP .card04 {background: transparent;box-shadow: none;padding: 0;}
.mainP .card05 {padding: 0;}

/* 메인 - 슬라이더 */
.mainP .slideTextWrap {padding: 59px 20px;}
.mainP .slideTextWrap .slideText p.top {font-size: 28px;line-height: 38px;letter-spacing: -0.2px;margin-bottom: 21px;}
.mainP .slideTextWrap .slideText p.top .ani {height: 38px;}
.mainP .slideTextWrap .slideText p.top .ani > span {/* position: absolute; *//* top: 0; *//* left: 0; *//* width: 100%; *//* height: 82px; *//* transform: translateY(100px); *//* opacity: 0; */}

.mainP .slideTextWrap .slideText p.main {font-size: 18px;font-weight: 400;line-height: 30px;letter-spacing: -0.2px;margin-bottom: 0px;}
.mainP .slideTextWrap .slideText p.sub {font-size: 18px;font-weight: 400;color: #fff;line-height: 28px;letter-spacing: 0;margin-bottom: 49px;transform: translateY(30px);opacity: 0;}
.mainP .slideTextWrap .slideText button {width: 124px;height: 48px;}

.mainP .slide1 .slideTextWrap .slideText p.main {width: 190px;}
.mainP .slide2 .slideTextWrap .slideText p.main {width: 200px;}
.mainP .slide3 .slideTextWrap .slideText p.main {width: 190px;}
.mainP .slide4 .slideTextWrap .slideText p.main {width: 210px;}

.mainP .slideTextWrap .slideText.on p.sub {display: none;}

.mainP .sliderWrap .mainVisual .slideBgWrap {/* position: absolute; */right: 0;top: 0;width: 100%;height: 100%;/* background-size: contain; *//* background-size: cover; */background-size: 160%;background-position: -125px 190px;background-position: 63% 85%;background-position: 83% 85%;}

.mainP .sliderWrap .progress {width: 100%;padding: 0 20px;left: 0px;bottom: 19px;}
.mainP .sliderWrap .progress div {width: calc((100% / 4) - 2px);margin-right: 2px;}
.mainP .sliderWrap .progress div:last-child {margin-right: 0;}
.mainP .sliderWrap .progress div span.progressBar {margin-bottom: 13px;}

/* 메인 - INNER 솔루션 */
.mainP .solutionArea h2 {font-size: 18px;margin-bottom: 12px;letter-spacing: 0;}
.mainP .solutionArea ul {margin-left: 0;margin-right: 0;}
.mainP .solutionArea ul li {display: table;float: none;width: 100%;height: 100px;margin-left: 0;margin-right: 0;margin-bottom: 10px;}
.mainP .solutionArea ul li:last-child {margin-bottom: 0px;}
.mainP .solutionArea ul li a {position: relative;display: table-cell;vertical-align: middle;min-height: 100px;padding: 0 20px;}
.mainP .solutionArea ul li p.subtit {position: absolute;left: 20px;top: 50%;transform: translateY(-50%);display: inline-block;font-size: 16px;margin-bottom: 5px;text-align: left;margin-bottom: 0;}
.mainP .solutionArea ul li p.tit {display: inline-block;width: 100%;margin-bottom: 0;text-align: left;}
.mainP .solutionArea ul li p.desc {display: none;}
.mainP .solutionArea ul li p.tit:after {top: 50%;left: auto;right: 0px;transform: translateY(-50%);width: 66px;height: 70px;}
.mainP .solutionArea ul li.s03 p.tit:after {width: 85px;}

.mainP .solutionArea ul li a:hover {padding: 0 20px;padding-top: 0;}
.mainP .solutionArea ul li a:hover p.subtit {color: #fff;}
.mainP .solutionArea ul li a:hover p.tit:after {top: 50%;left: auto;right: 0px;transform: translateY(-50%);width: 66px;height: 70px;opacity: 1;}
.mainP .solutionArea ul li a:hover p.desc {display: none;}
.mainP .solutionArea ul li.s03 a:hover p.tit:after {width: 85px;}

.mainP .solutionArea ul li.on a p.tit:after {top: 50%;left: auto;right: 0px;transform: translateY(-50%);width: 48px;height: 70px;opacity: 1;}

/* 메인 - 구축사례 */
.mainP .referenceWrap h2 {font-size: 18px;margin-bottom: 12px;letter-spacing: 0;}
.mainP .referenceWrap a.btnMore {top: -7px;right: 3px;}

.mainP .referenceWrap .referenceArea .slick-dots {display: block !important;position: static;transform: translateX(0);text-align: center;margin-top: 5px;}

.mainP .referenceArea p.img {height: 160px;margin-bottom: 21px;}
.mainP .referenceArea p.img:before {font-size: 14px;padding: 4px 0px;}
.mainP .referenceArea p.img img {height: 160px;}
.mainP .referenceArea p.tit {margin-bottom: 0px;}

.mainP .referenceWrap .slick-arrow {display: none !important;}

/* 메인 - 제품소개 */
.mainP .productArea ul {padding: 0;margin-left: -5px;margin-right: -5px;}
.mainP .productArea ul li {width: calc(50% - 10px);margin-left: 5px;margin-right: 5px;margin-bottom: 10px;}
.mainP .productArea ul li:last-child {margin-bottom: 0px;}
.mainP .productArea ul li a {height: 180px;padding-top: 135px;border-radius: 5px;background-position: center center;background-size: auto;background-color: #fff;box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.16);}
.mainP .productArea ul li a span {font-size: 16px;letter-spacing: 0;padding: 0 10px;}
.mainP .productArea ul li a:hover {background-color: #0072DE;box-shadow: 5px 5px 10px 0px rgba(0,114,222,0.32);}
.mainP .productArea ul li a:hover span {color: #fff;}

.mainP .productArea .hoverline {display: none;}

/* 메인 - 서비스 바로가기 */
.mainP .linkArea {/* position: relative; */}
.mainP .linkArea:after {display: block;width: 0;height: 0;content: "";clear: both;}
.mainP .linkArea ul {margin-left: 0;margin-right: 0;}
.mainP .linkArea ul:after {display: block; width: 0; height: 0; content: ""; clear: both;}
.mainP .linkArea ul li {width: 100%;margin-left: 0;margin-right: 0;margin-bottom: 10px !important;}
.mainP .linkArea ul li:nth-child(3){margin-bottom: 10px;}
.mainP .linkArea ul li:nth-child(4){margin-bottom: 0px !important;}
.mainP .linkArea ul li a {height: 90px !important;}
.mainP .linkArea ul li a span {padding: 33px 50px 33px 78px;}
.mainP .linkArea ul li a span:before {left: 17px;}
.mainP .linkArea ul li a span:after {right: 20px;transform: translateY(-50%) scale(1.4);margin-top: -13px;}

}







/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */