@charset "utf-8";

/* 공통 */
.txtHide {font-size:0; line-height:0; overflow:hidden; text-indent:-9999px;}
.title1 {font-size:24px; text-align:center; padding:49px 20px 0;}
.title1 strong {font-weight:800; display:inline-block; letter-spacing:-1px; padding:0 5px; position:relative; z-index:2;}
.title1 strong:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:12px; z-index:-1; background:#ffe84c;}
.txtH3 {font-weight:300; font-size:15px; line-height:21px; text-align:center; letter-spacing:-.40px; padding:18px 20px 0;}

/* 애니메이션 */
@-webkit-keyframes fadeInUp {
    0% {opacity:0; -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0)}
    to {opacity:1; -webkit-transform:translateZ(0); transform:translateZ(0)}
}
@keyframes fadeInUp {
    0% {opacity:0; -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0)}
    to {opacity:1; -webkit-transform:translateZ(0); transform:translateZ(0)}
}

/* 컨텐츠 */
.mainVisual {height:518px; text-align:center; background:url('../images/index/bg_visual.jpg') no-repeat center center / cover;}
.mainVisual .group {height:518px; position:relative; overflow:hidden;}
.mainVisual .group:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:285px; background:url('../images/index/bg_visual_img.png') no-repeat center 0 / 320px 285px; image-rendering: -webkit-optimize-contrast;
-webkit-animation-name:fadeInUp; animation-name:fadeInUp; animation-duration:1s; animation-fill-mode: both; -webkit-animation-duration:1s; -webkit-animation-fill-mode:both;}
.mainVisual dl {display:inline-block; text-align:center; padding-top:30px;}
.mainVisual dl dt {font-size:0; line-height:0; padding-bottom:20px; border-bottom:2px solid #fff;}
.mainVisual dl dt img {width:208px; height:auto; image-rendering: -webkit-optimize-contrast;}
.mainVisual dl dd {font-size:0; line-height:0; padding-top:18px;}
.mainVisual dl dd img {width:208px; height:auto; image-rendering: -webkit-optimize-contrast;}
.mainVisual p {font-size:12px; line-height:16px; font-weight:300; color:#fff; letter-spacing:-.40px; padding-top:9px;}
.mainSkill {padding-bottom:47px; background:#fff; overflow:hidden;}
.mainSkill .btnMore {margin-top:34px;}
.btnMore {font-weight:500; font-size:14px; border-radius:100px; display:block; width:160px; height:46px; text-align:center; line-height:46px; border:1px solid #44c4fe; position:relative; margin:0 auto;}
.btnMore:after {content:''; display:inline-block; width:15px; height:8px; vertical-align:middle; position:relative; top:-2px; margin-left:6px; background:url('../images/index/bg_ico_arr1.png') no-repeat 0 0 / cover; image-rendering: -webkit-optimize-contrast;}
.skillCnt h4 {text-align:center; position:relative; z-index:2; margin:43px 20px 0;}
.skillCnt h4 span {display:inline-block; width:20px; height:20px; background:#000; color:#fff; border-radius:100px; font-size:11px; line-height:20px; font-weight:800; letter-spacing:normal;}
.skillCnt h4:first-child {margin-top:33px;}
.skillCnt h4:after {content:''; position:absolute; left:0; top:13px; width:100%; height:1px; background:#000; z-index:-1;}
.skillCnt dl {text-align:center; padding-top:16px; letter-spacing:-.20px;}
.skillCnt dl dt {font-weight:800; font-size:20px;}
.skillCnt dl dd {font-weight:400; font-size:12px; line-height:18px; color:#808080; padding-top:11px;}
.skillCnt .btn {text-align:center; padding-top:9px; padding-bottom:28px;}
.skillCnt .btn a {display:inline-block; font-size:14px; font-weight:700; padding-right:16px; background:url('../images/index/bg_ico_arr2.png') no-repeat right center / 12px 8px; image-rendering: -webkit-optimize-contrast;}
.skillCnt .btn a + a {margin-left:10px;}
.skillSwipe {padding-right:20px; padding-left:10px;}
.skillSwipe ul li {position:relative; width:235px; height:275px; overflow:hidden; border-radius:12px; border:1px solid #00affe; text-align:left; box-shadow:0 4px 4px rgba(108,108,108,.3); margin-left:10px;}
.skillSwipe ul li dl {padding:22px 20px 0; text-align:left;}
.skillSwipe ul li dl dt {font-size:15px;}
.skillSwipe ul li dl dd {padding:6px 0 0; color:#888;}
.skillSwipe .swiper-container {overflow:inherit;}
.skillSwipe.tp1 ul li:nth-child(1) {background:url('../images/index/bg_skill1_1.png') no-repeat center bottom / 100% 205px; image-rendering: -webkit-optimize-contrast;}
.skillSwipe.tp1 ul li:nth-child(2) {background:url('../images/index/bg_skill1_2.png') no-repeat center bottom / 100% 205px; image-rendering: -webkit-optimize-contrast;}
.skillSwipe.tp1 ul li:nth-child(3) {background:url('../images/index/bg_skill1_3.png') no-repeat center bottom / 100% 205px; image-rendering: -webkit-optimize-contrast;}
.skillSwipe.tp1 ul li:nth-child(4) {background:url('../images/index/bg_skill1_4.png') no-repeat center bottom / 100% 205px; image-rendering: -webkit-optimize-contrast;}
.skillSwipe.tp2 ul li:nth-child(1) {background:url('../images/index/bg_skill2_1.png') no-repeat center center / cover;}
.skillSwipe.tp2 ul li:nth-child(2) {background:url('../images/index/bg_skill2_2.png') no-repeat center center / cover;}
.skillSwipe.tp3 ul li:nth-child(1) {height:308px; background:url('../images/index/bg_skill3_1.png') no-repeat center bottom / cover;}
.skillSwipe.tp3 ul li:nth-child(2) {height:308px; background:url('../images/index/bg_skill3_2.png') no-repeat center bottom / cover;}
.skillSwipe.tp3 ul li:nth-child(3) {height:308px; background:url('../images/index/bg_skill3_3.png') no-repeat center bottom / cover;}
.skillSwipe.tp3 ul li:nth-child(4) {height:308px; background:url('../images/index/bg_skill3_4.png') no-repeat center bottom / cover;}
.skillSwipe.tp3 .btnShopGo {position:absolute; left:0; bottom:0; width:100%; background:#f0fbff; height:44px; overflow:hidden; border-top:1px solid #00affe;}
.skillSwipe.tp3 .btnShopGo span {float:left; position:relative; width:82px; text-align:center; line-height:44px; font-size:14px; font-weight:500;}
.skillSwipe.tp3 .btnShopGo span:after {content:''; position:absolute; right:0; top:16px; width:1px; height:12px; background:#d3d3d3;}
.skillSwipe.tp3 .btnShopGo a {margin-left:82px; position:relative; display:block; text-align:center; line-height:44px; font-size:14px; font-weight:500; color:#000;}
.skillSwipe.tp3 .btnShopGo a:before {content:''; display:inline-block; width:12px; height:14px; vertical-align:middle; position:relative; top:-2px; margin-right:6px; background:url('../images/index/bg_ico_sym1.png') no-repeat 0 0 / cover;}
.skillSwipe.tp3 .btnShopGo a:after {content:''; display:inline-block; width:12px; height:8px; vertical-align:middle; position:relative; top:-1px; margin-left:6px; background:url('../images/index/bg_ico_arr2.png') no-repeat 0 0 / cover;}
.skillSwipe.tp4 {padding:0 20px;}
.skillSwipe.tp4 ul li:nth-child(1) {width:100%; height:249px; margin:0; background:url('../images/index/bg_skill4_1.png') no-repeat center center / contain; image-rendering: -webkit-optimize-contrast;}
.mainSvcEvent {background:#f3f3f3; position:relative; padding-bottom:50px; overflow:hidden;}
.mainSvcEvent .swiper-container {overflow:inherit;}
.mainSvcEvent ul {margin-top:30px;}
.mainSvcEvent ul li {border-radius:12px; overflow:hidden; float:left; width:266px;}
.mainSvcEvent ul li img {max-width:100%; height:auto; image-rendering: -webkit-optimize-contrast;}
.mainSvcEvent .swiper-pagination {position:absolute; left:inherit; right:50%; margin-right:-123px; top:10px; width:36px; height:17px; line-height:17px; font-size:9px; border-radius:100px; text-align:center; background:rgba(0, 0, 0, .70); color:#aaa; font-weight:700;}
.mainSvcEvent .swiper-pagination .swiper-pagination-current {color:#fff;}
.mainSvcEvent .swiper-slide-active img {width:100%; border-radius:0; margin:0;}
.mainSvcEvent .swiper-slide-prev {text-align:right;}
.mainSvcEvent .swiper-slide-prev img {border:1px solid #bebebe; width:226px; border-radius:12px; overflow:hidden; margin-top:15px; margin-right:10px;}
.mainSvcEvent .swiper-slide-next img {border:1px solid #bebebe; width:226px; margin-left:10px; border-radius:12px; overflow:hidden; margin-top:15px;}
.mainUseShop {padding:0 20px 82px 8px; background:#fff; position:relative;}
.mainUseShop ul {overflow:hidden; padding-top:14px;}
.mainUseShop ul li {float:left; width:calc(50% - 14px); height:178px; margin-top:12px; margin-left:12px; border:1px solid #ddd; border-radius:12px; overflow:hidden; position:relative;}
.mainUseShop ul li .img {height:108px; overflow:hidden; border-bottom:1px solid #ddd;}
.mainUseShop ul li .img img {width:100%; height:auto;}
.mainUseShop ul li dl {padding:16px 12px 0; text-align:left;}
.mainUseShop ul li dl dt {font-size:15px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.mainUseShop ul li dl dd {font-size:12px; font-weight:300; padding-top:2px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.mainUseShop .swiper-pagination {bottom:45px; text-align:center; width:100%; left:0;}
.mainUseShop .swiper-pagination .swiper-pagination-bullet {width:7px; height:7px; background:#fff; border:1px solid #ccc; opacity:1;}
.mainUseShop .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:7px;}
.mainUseShop .swiper-pagination .swiper-pagination-bullet-active {background:#00affe; border:1px solid #000; opacity:1;}
.mainCsSvc {background:#f3f3f3; position:relative; padding-bottom:50px; overflow:hidden;}
.mainCsSvc .swiper-container {margin:24px 20px 0;}
.mainCsSvc ul li {width:100%; letter-spacing:-.40px;}
.mainCsSvc ul li a {display:block;}
.mainCsSvc ul li .img {border-radius:12px; overflow:hidden; position:relative; height:194px; border:1px solid #ddd;}
.mainCsSvc ul li .img img {width:100%; height:auto;}
.mainCsSvc ul li h4 {font-weight:800; font-size:14px; padding-top:24px; margin-bottom:9px; position:relative; display:inline-block; z-index:2;}
.mainCsSvc ul li h4:after {content:''; position:absolute; left:0; bottom:2px; width:100%; height:8px; background:#ffe84c; z-index:-1;}
.mainCsSvc ul li dl dt {font-size:20px; font-weight:800;}
.mainCsSvc ul li dl dd {font-size:12px; font-weight:300; line-height:18px; padding-top:10px; word-break:keep-all;}
.mainCsSvc .swiper-slide {opacity:0 !important;}
.mainCsSvc .swiper-slide-active {opacity:1 !important;}
.mainCsSvc .swiper-pagination {position:absolute; left:inherit; right:10px; top:10px; width:36px; height:17px; line-height:17px; font-size:9px; border-radius:100px; text-align:center; background:rgba(0, 0, 0, .70); color:#aaa; font-weight:700;}
.mainCsSvc .swiper-pagination .swiper-pagination-current {color:#fff;}
.mainCatBnr {letter-spacing:-.40px; padding-bottom:33px; background:#00affe url('../images/index/bg_ctr.png') no-repeat right 0 / 129px 151px; image-rendering: -webkit-optimize-contrast;}
.mainCatBnr dl {padding:35px 0 0 20px;}
.mainCatBnr dl dt {color:#fff; font-weight:800; font-size:20px; line-height:28px;}
.mainCatBnr dl dd {color:#fff; font-size:13px; line-height:21px; font-weight:400; padding-top:9px;}
.mainCatBnr a {display:inline-block; margin:0 auto; border-radius:100px; color:#fff; font-size:13px; font-weight:500; width:118px; height:38px; line-height:38px; text-align:center; background:#000;}
.mainCatBnr a + a {background:#fff; border:1px solid #000; height:36px; line-height:36px; color:#000; margin-left:5px;}
.mainCatBnr .btn {text-align:center; padding-top:27px;}
#useCases .cnt .ex-shop:nth-child(3) li:nth-child(1) {height:147px;}
#useCases .cnt .ex-shop:nth-child(3) li:nth-child(2) {height:147px;}

/* 갤럭시 폴더 */
@media screen and (max-width:280px) {
    .title1 {padding-right:10px; padding-left:10px;}
    .txtH3 {padding-right:10px; padding-left:10px; letter-spacing:-1px;}
}

/* 태블릿 */
@media only screen and (min-device-width :768px) and (max-device-width :1024px) {
    html {background:#ddd;}
    body {width:370px; margin:0 auto;}
    #header {width:370px; left:inherit;}
    .main-notice {width:370px; left:inherit;}
}

/* 아이패드 에어 가로 */
@media only screen and (min-device-width:1180px) and (max-device-height:820px) and (-webkit-min-device-pixel-ratio:2)  and (orientation:landscape) {
    html {background:#ddd;}
    body {width:370px; margin:0 auto;}
    #header {width:370px; left:inherit;}
    .main-notice {width:370px; left:inherit;}
}