@charset "utf-8";

:root {
	--swiper-pagination-bullet-horizontal-gap:5px;
}

#contents.main {padding-top:0;}
@media only screen and (max-width:1024px) { 
    #contents {padding-top:5.5556rem;}
}
#wrapper {overflow-x:initial;}

#contents.main .inner {max-width:1260px;}

/*title*/
.main-title {font-size:36px; color:#333; font-weight:bold; line-height:1.5em; letter-spacing:-.025em; text-align:center;}
.main-title.lg {font-size:42px; line-height:1.3809em;}

/*visual*/
.main-visual {position:relative; overflow:hidden; background:url(../images/main_tpl01/bg_visual.webp) top center no-repeat; background-size:cover;}
.main-visual .bg {height:52.2222rem; background-size:cover; background-repeat:no-repeat; background-position:center center;}
.main-visual .visual-area {position:relative; height:49.4444rem; padding-top:5rem;}
.main-visual .swiper-wrapper {/*position:absolute; top:0; left:0; */width:100%;}
.main-visual .swiper-button-next, .main-visual .swiper-button-prev {width:auto; height:auto; margin-top:0; display:block; top:auto; bottom:2.7778rem; left:50%; z-index:11; color:#333;}
.main-visual .swiper-button-prev {margin-left:-36.1111rem;}
.main-visual .swiper-button-next {margin-left:33.7222rem;}
.main-visual .swiper-button-next:after, .main-visual .swiper-button-prev:after {font-family:SpoqaHanSansNeo; font-size:1.1111rem; font-weight:bold;}
.main-visual .swiper-pagination-bullets.swiper-pagination-horizontal {bottom:14.7778rem;}
.main-visual .swiper-pagination-bullet {width:1.6667rem; height:.5556rem; border-radius:.2778rem; background:#333; opacity:.3;}
.main-visual .swiper-pagination-bullet-active {opacity:1;}
.visual-box {width:90%; max-width:47.7778rem; height:100%; margin:-54px auto 0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;}
.visual-box .visual-title {font-size:60px; line-height:1.225em; color:#000; font-weight:bold;}
.visual-box .visual-content {margin-top:27px; font-size:24px; line-height:36px; color:#333; font-weight:400;}
.main-company-thumb {padding-top:6.0556rem; padding-bottom:12.4444rem;}
.main-company-thumb .thumb-area {position:relative; width:100%; margin-top:8.8889rem; padding-top:10px; padding-bottom:18px; overflow:hidden;}
.main-company-thumb .thumb-area ul {width:100%; display:flex; align-items:flex-end;}
.main-company-thumb .thumb-area li {width:19.4444rem;}
.main-company-thumb .thumb-area li .thumbnail-box {width:100%; box-shadow:0px 7px 17px 0px rgba(0, 0, 0, .1); border:1px solid #e4e4e4; border-radius:1.1111rem; overflow:hidden;}
.main-company-thumb .thumb-area li .image {height:12.7778rem; overflow:hidden;}
.main-company-thumb .thumb-area li img {width:100%; vertical-align:top;}
.main-company-thumb .thumb-area li .text-box {padding:1.6667rem 1.3889rem; text-align:center; font-size:1.1111rem; border-top:1px solid #e4e4e4;}

/* solution info */
/* .solution-info {padding:4.7778rem 0 6.4444rem; background:#f5f5f9;}
.solution-info .main-title {text-align:left;}
.solution-info .main-title span {display:block; font-size:1.7778rem;}
.solution-info .item-list {margin-top:3.7778rem; display:flex; flex-direction:column; gap:4.4444rem 0;}
.solution-info .item-list .item {display:flex; justify-content:space-between;}
.solution-info .item-list .item .image {width:38.33%;} 
.solution-info .item-list .item .image img {width:100%; vertical-align:top;}
.solution-info .item-list .item .info {width:56.66%; padding-right:1.9444rem; padding-top:1.6111rem;}
.solution-info .item-list .item .info .item-title {font-weight:bold; font-size:1.7778rem; line-height:1.625em; color:#333;}
.solution-info .item-list .item .info .item-content {margin-top:1.3889rem; font-size:1.1111rem; line-height:1.4em; color:#5978da;} */

/* main banner */
.main-banner {display:flex; align-items:center; justify-content:center; height:18.8889rem; background:url(../images/main_tpl01/main_banner02.jpg) center center no-repeat; background-size:cover;}
.main-banner .main-title {color:#fff;}

/* solution intro */
.solution-sample {padding:6.9375rem 0 8.375rem;}
.solution-sample .inner {display:flex; justify-content:space-between; align-items:center;}
.solution-sample .sample-title-area {width:25.5556rem; flex-shrink:0;}
.solution-sample .sample-title-area .main-title-box {display:none;}
.solution-sample .sample-title-area .main-title-box.active {display:block;}
.solution-sample .sample-title-area .main-title-box .main-title {text-align:left;}
.solution-sample .sample-title-area .main-title-box a {display:inline-block; margin-top:1.75rem; font-size:1rem; color:#888;}
.solution-sample .sample-tab-list {margin-top:2.75rem;}
.solution-sample .sample-tab-list li {position:relative; padding-left:2.3125rem; width:15rem; font-size:1.25rem; height:3.125rem; line-height:3.125rem; text-indent:1.7778rem; color:#333; cursor:pointer;}
.solution-sample .sample-tab-list li.active,
.solution-sample .sample-tab-list li:hover {background:#a594f9; border-radius:1.5625rem; color:#fff; font-weight:bold; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .2);}
.solution-sample .sample-tab-list li:before {content:''; position:absolute; left:2.3125rem; top:50%; width:.5556rem; height:.5556rem; background:#333; border-radius:50%; transform:translateY(-50%);} 
.solution-sample .sample-tab-list :is(li.active, li:hover):before {background:#fff;}
.solution-sample .sample-tab-list li + li {margin-top:.625rem;}
.solution-sample .sample-images-wrap {width:800px; overflow-x:hidden;}
.solution-sample .sample-images-wrap .image-box {position:relative; padding-bottom:2.5556rem;}
.solution-sample .sample-images-wrap .image-pc {width:99.99%; max-width:41.1111rem;}
.solution-sample .sample-images-wrap .image-mo {position:absolute; bottom:0; right:0; width:27.027%; max-width:11.1111rem;}
.solution-sample .sample-images-wrap .image-pc img,
.solution-sample .sample-images-wrap .image-mo img {width:100%;}

/* 요금안내 */
.solution-price {padding:8.3333rem 0 12.2222rem; background:#f5f7f9;}
.solution-price .main-text {margin-top:1.2778rem; text-align:center;}
.solution-price-area {display:flex; margin-top:5.2778rem;}
.solution-price-area .card {position:relative; flex-grow:1; padding-top:50px;}
.solution-price-area .card-box {background:#fff; border-bottom:4px solid #fff;}
.solution-price-area .card + .card :is(.card-title-box,.card-content-box) {border-left:1px solid #e4e4e4;}
.solution-price-area .card .card-title-box {min-height:14.9444rem; padding-top:3.0556rem; padding-bottom:2.2222rem; text-align:center;}
.solution-price-area .card .card-title {font-size:20px; font-weight:bold; color:#333;}
.solution-price-area .card .price {margin-top:2px; font-size:16px; line-height:1.25em; color:#333;}
.solution-price-area .card .price strong {display:block; font-size:24px; line-height:1.25em; font-weight:bold; color:#5978da;}
.solution-price-area .card .price span {margin-top:15px; display:block;}
.solution-price-area .card .btn-default {margin-top:26px; width:11.1111rem; font-size:1rem; text-align:center;}
.solution-price-area .card .label {margin-left:.5rem; padding:.1667rem .8889rem; font-weight:bold; font-size:1.1111rem; line-height:1.3333rem; color:#fff; background:#dc3545; border-radius:.8333rem;}
.solution-price-area .card .card-content-box {padding:1.9444rem 1.6667rem; border-top:2px solid #000;}
.card.hot-plan .card-box {border:4px solid #000; border-top:none;}
.card.hot-plan:before {content:'가장 인기있는 요금'; position:absolute; top:0; left:0; width:100%; height:50px; line-height:50px; font-size:16px; font-weight:bold; color:#fff; text-align:center; background:#000; border-bottom:4px solid #000; border-radius:15px 15px 0 0;}

/* company */
.main-company {padding:9.4444rem 0 9.8333rem;}
.work-experience-area {display:flex; justify-content:center; margin-top:97px;}
.work-experience-area .work-experience {position:relative; min-width:12.2222rem; padding:0 3.3333rem;}
.work-experience-area .work-experience + .work-experience:before {content:''; position:absolute; top:-5px; left:0; width:1px; height:5.5556rem; background:#e4e4e4;}
.work-experience-area .work-experience :is(dt,dd) {text-align:center; font-size:1.1111rem; line-height:1.25em; color:#333;}
.work-experience-area .work-experience dd strong {line-height:1.25em; font-size:2.3333rem; font-weight:500; color:#5978da;}
.work-experience-area .work-experience dt {margin-top:.7222rem;}
.company-list-area {margin-top:158px; width:100%; overflow:hidden;}
.company-list-area .company-list {display:flex; width:14000px; /*gap:3.3333rem;*/ align-items:flex-end; animation:loop 70s linear infinite;}
.company-list-area .company-list li {padding-right:5.5556rem; width:auto; height:auto; max-height:40px;}
.company-list-area .company-list img {width:100%; max-height:40px; vertical-align:middle;}
 
@keyframes loop {
  100% {
    transform: translateX(-100%);
  }
}
@keyframes loopY {
  100% {
    transform: translateY(-100%);
  }
}

/* banner */
/* .main-banner {padding:5.1667rem 0 5.7222rem; background:#f5f5f9;}
.main-banner .main-title {font-size:2.7778rem;}
.main-banner .btn-wrap {margin-top:2.9444rem; display:flex; justify-content:center; gap:0 2.1667rem;}
.main-banner .btn-wrap a {width:16.7222rem; text-align:center;}
.main-banner .btn-wrap a .icon-arrow-right {margin-left:.9444rem;} */

/*faq*/
.main-faq {padding-top:5rem; padding-bottom:5.5556rem; border-top:1px solid #eee;}
.main-faq .faq-list {margin-top:1.6667rem;}

.main-text {font-size:20px; color:#333; word-break:keep-all;}
/*솔루션 기능*/
.solution-info {padding-top:6.1111rem; padding-bottom:13.5556rem;}
.solution-info .inner {max-width:1520px;}
.solution-info .main-text {margin-top:1.3889rem; text-align:center;}
.solution-info .btn-area {margin-top:2rem; display:flex; justify-content:center; gap:1.1111rem;}
.solution-info .btn-default {width:11.1111rem; font-size:16px; text-align:center;}
.skill-list {display:grid; grid-template-columns:repeat(auto-fill,minmax(19.4444rem,1fr)); gap:1.1111rem; margin-top:5.5556rem;}
.skill-list .skill-box {position:relative; min-height:22.2222rem; background:#f5f7f9; border-radius:15px; cursor:pointer; overflow:hidden;}
.skill-list .skill-box a:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(89,120,218,0.1); display:none;}
.skill-list .skill-box:hover a:after {display:block;}
.skill-box .skill-inner {display:flex; flex-direction:column; justify-content:center; align-items:center;}
.skill-box .image-box {text-align:center; padding-top:3.8889rem;}
.skill-box .image-box img {max-width:100%;}
.skill-box .skill-info {padding:1.8889rem 2.2222rem 2.2222rem; text-align:center;}
.skill-box .skill-title {line-height:1.5em; font-weight:bold; font-size:20px; color:#333; word-break:keep-all;}
.skill-box .skill-text {margin-top:.6667rem; line-height:1.5em; font-size:16px; color:#333; word-break:keep-all;}
.skill-box.expect {background:#5978da;}
.skill-box.expect .skill-info {text-align:left;}
.skill-box.expect .skill-info .skill-title {line-height:1.5em; font-size:1.3333rem; color:#fff;}
.skill-box.expect .skill-info .skill-text {margin-top:.9444rem;}

@media only screen and (max-width:1300px) { 

    /* .main-visual .swiper-button-prev {left:1.6667rem; margin-left:0;}
    .main-visual .swiper-button-next {left:auto; right:1.6667rem; margin-left:0;} */

}

@media only screen and (max-width:1200px) { 
    .solution-price-area {margin-top:3.8889rem; flex-wrap:wrap; row-gap:20px;}
    .solution-price-area .card {width:50%;}
}

@media only screen and (max-width:1024px) { 
    .main-company-thumb .thumb-area li .text-box {font-size:15px;}
}

@media only screen and (max-width:767px) { 
    .main-title {font-size:1.9rem; word-break:keep-all;}
    .main-title.lg {font-size:2.4rem;}

    .main-visual {background-image:url(../images/main_tpl01/bg_visual_m.webp);}
    .main-visual .visual-area {min-height:460px; height:42rem; padding-top:5.5556rem;}
    /* .main-visual .visual-area {height:460px; padding-top:10rem;} */
    .visual-box {width:100%; max-width:100%; margin-top:0;}
    .visual-box .visual-title {font-size:2.6923rem; word-break:keep-all;}
    .visual-box .visual-content {font-size:1.6rem; line-height:1.625em; word-break:keep-all;}
    .main-visual .swiper-pagination-bullets.swiper-pagination-horizontal {bottom:3rem;}

    .main-company-thumb .thumb-area li .thumbnail-box {box-shadow:0px 5px 15px 0px rgba(0, 0, 0, .1); }

    .solution-sample {padding:5.5rem 0 6.3rem;}
    .solution-sample .inner {align-items:flex-start; flex-direction:column;}
    .solution-sample .sample-title-area {width:100%;}
    .solution-sample .sample-title-area .main-title-box a {margin-top:1.2rem;}
    .solution-sample .sample-tab-list {display:flex;}
    .solution-sample .sample-tab-list li {padding-left:0; width:25%; font-size:1.2rem; text-indent:2.3rem;}
    .solution-sample .sample-tab-list li:before {left:1.4rem; width:0.4rem; height:0.4rem;}
    .solution-sample .sample-tab-list li + li {margin-top:0;}
    .solution-sample .sample-images-wrap {margin-top:3.2rem; width:100%;}
    .solution-sample .sample-images-wrap .image-box {padding-bottom:1.5rem;}
    .solution-sample .sample-images-wrap .image-pc {width:89%; max-width:53.5rem;}
    .solution-sample .sample-images-wrap .image-mo {width:27%; max-width:15.8rem;}

    /*요금안내*/
    .solution-price {padding-bottom:8.4615rem;}
    .solution-price .main-text {margin-top:10px;}
    .solution-price-area {max-width:500px; width:100%; flex-direction:column; margin-left:auto; margin-right:auto;}
    .solution-price-area .card {width:100%; padding-top:0;}
    .solution-price-area .card + .card :is(.card-title-box,.card-content-box) {border-left:none;}
    .solution-price-area .card .card-title {font-size:17px;}
    .solution-price-area .card .price strong {font-size:21px;}
    .solution-price-area .card .price {font-size:13px;}
    .card.hot-plan {padding-top:40px; border-width:3px;}
    .card.hot-plan:before {height:40px; line-height:40px; font-size:14px;}

    .main-company {padding-top:6.92307rem; padding-bottom:6.92307rem;}
    .main-company .main-title {width:76vw; margin:auto;}
    .work-experience-area {margin-top:4.61538rem; flex-wrap:wrap;}
    .work-experience-area .work-experience :is(dt,dd) {font-size:15px;}
    .work-experience-area .work-experience dd strong {font-size:20px;}
    .work-experience-area .work-experience:nth-child(2) {margin-top:2rem; width:100%; order:1;}
    .work-experience-area .work-experience:nth-child(2):before {display:none;}
    .work-experience-area .work-experience + .work-experience:before {top:2px; height:46px;}
    .company-list-area {position:relative; margin-top:4.8rem; height:400px;}
    .company-list-area:before {content:''; position:absolute; top:-4px; left:0; width:100%; height:160px; background:linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,1) 100%); z-index:2;}
    .company-list-area:after {content:''; position:absolute; bottom:-4px; left:0; width:100%; height:160px; background:linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,1) 100%); z-index:2;}
    .company-list-area .company-list {display:flex; flex-direction:column; width:100%; height:2800px; margin-top:4.6rem; gap:0; align-items:center; animation:loopY 25s linear infinite;;}
    .company-list-area .company-list li {padding-top:3rem; padding-right:0; max-height:70px; text-align:center;}
    .company-list-area .company-list img {height:100%; max-width:350px; width:auto;}


    .main-text {font-size:17px;}
    /*솔루션 기능*/
    .solution-info {padding-top:3rem; padding-bottom:9.23076rem;}
    .solution-info .btn-default {height:40px; line-height:40px; font-size:13px;}
	.solution-info .btn-default.sm:not(.line):hover {line-height:42px; }
    .skill-box .image-box {padding-top:3rem; padding-bottom:0;}
    .skill-box .image-box img {width:90%;}
    .skill-box .skill-title {font-size:17px;}
    .skill-box .skill-text {font-size:13px;}
    .skill-box.expect .skill-info .skill-title {font-size:19px;}

    /*고객사*/
    .main-company-thumb {padding-top:5rem; padding-bottom:9.23076rem;}
    .main-company-thumb .thumb-area {margin-top:6.92307rem;}
}
@media only screen and (max-width:640px) { 
    .company-list-area .company-list li {padding-top:2.5rem; max-height:60px;}
}

@media only screen and (max-width:480px) { 
    .solution-sample .sample-tab-list li {line-height:2.5rem; height:2.5rem; font-size:1rem;text-indent:1.6rem;}
    .solution-sample .sample-tab-list li:before {left:0.8rem;}
}
@media only screen and (max-width:374px) { 
    .solution-sample .sample-tab-list li {text-align:center; text-indent:0;}
    .solution-sample .sample-tab-list li:before {display:none;}
}
/*Popup*/
.main-popup-wrap.dim{position:fixed;top:0;left:0;bottom:0;right:0;z-index:110;width:100%;height:100%;background:rgba(0,0,0,.8)}
.main-popup{position:absolute;z-index:120;background-color:#fff;line-height:20px}
.main-popup .popup-bottom{padding:3px 6px;background-color:#000}
.main-popup .popup-bottom .popup-bottom-inner{display:flex;justify-content:space-between}
.main-popup .popup-bottom label{color:#fff;font-weight:700}
.main-popup .popup-bottom input[type="checkbox"]{margin:0}
.main-popup .popup-bottom .btn-close{color:var(--color-gray,#aaa)}
.main-popup.center{position:fixed;top:50%!important;left:50%!important;transform:translate(-50%,-50%)}
.main-popup .ck-content .image{margin:0}
.top-popup{position:relative;overflow-y:hidden}
.top-popup .popup-control{position:absolute;top:20%;right:10px;display:flex;align-items:center}
.top-popup .popup-control label{color:var(--color-dark-gray,#333)}
.top-popup .popup-control .close{position:relative;display:block;width:20px;height:20px;margin-left:7px;font-size:0}
.top-popup .popup-control .close:before,.top-popup .popup-control .close:after{content:'';position:absolute;top:50%;left:0;z-index:1;width:100%;height:1px;border-radius:5px;background:var(--color-dark-gray,#333)}
.top-popup .popup-control .close:before{transform:rotate(45deg)}
.top-popup .popup-control .close:after{transform:rotate(-45deg)}
@media only screen and (max-width:767px) {
    .top-popup .popup-control label{display:none}
    .top-popup .popup-control .close{width:30px;height:30px}
    .top-popup .popup-control .close:before,.top-popup .popup-control .close:after{height:2px}
}