@charset "utf-8";

/* 공통 */
.txtHide {font-size:0; line-height:0; overflow:hidden; text-indent:-9999px;}
.w1100 {margin:0 auto; width:1100px; position:relative;}
.title1 {font-size:40px; text-align:center;  padding-top:88px;}
.title1 strong {font-weight:800; display:inline-block; letter-spacing:-2px; padding:0 5px; position:relative; z-index:2;}
.title1 strong:after {content:''; position:absolute; left:0; bottom:7px; width:100%; height:20px; z-index:-1; background:url('../images/index/bg_tit_line1.png') no-repeat center 0;}
.txtH3 {font-weight:300; font-size:20px; text-align:center; letter-spacing:-1px; padding-top:12px;}

/* 애니메이션 */
@-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)}
}
@-webkit-keyframes fadeInDown {
    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 fadeInDown {
    0% {opacity:0; -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0)}
    to {opacity:1; -webkit-transform:translateZ(0); transform:translateZ(0)}
}
.aniFadeInUp {-webkit-animation-name:fadeInUp; animation-name:fadeInUp; animation-duration:1s; animation-fill-mode: both; -webkit-animation-duration:1s; -webkit-animation-fill-mode:both;}
.aniFadeInDown {-webkit-animation-name:fadeInDown; animation-name:fadeInDown; animation-duration:1s; animation-fill-mode: both; -webkit-animation-duration:1s; -webkit-animation-fill-mode:both;}
.delay1 {animation-delay:.7s;}

/* 컨텐츠 */
.mainVisual {height:599px; background:url('../images/index/bg_visual.jpg') no-repeat center center / cover;}
.mainVisual .w1100 {height:599px;}
.mainVisual .bgVisual {position:absolute; right:0; top:0; width:622px; z-index:2; height:599px; overflow:hidden;}
.mainVisual .ani1 {position:absolute; left:0; bottom:0; width:325px; height:419px; background:url('../images/index/bg_visual_img1_1.png') no-repeat 0 0;}
.mainVisual .ani2 {position:absolute; left:0; bottom:303px; width:307px; height:246px; background:url('../images/index/bg_visual_img1_2.png') no-repeat 0 0;}
.mainVisual .ani3 {position:absolute; right:0; top:0; width:317px; height:301px; background:url('../images/index/bg_visual_img2_1.png') no-repeat 0 0;}
.mainVisual .ani4 {position:absolute; right:0; top:276px; width:317px; height:324px; background:url('../images/index/bg_visual_img2_2.png') no-repeat 0 0;}
.mainVisual dl {display:inline-block; text-align:center; padding-top:73px;}
.mainVisual dl dt {font-size:0; line-height:0; padding-bottom:36px; border-bottom:2px solid #fff;}
.mainVisual dl dd {font-size:0; line-height:0; padding-top:32px;}
.mainVisual .btnLink {position:absolute; left:29px; bottom:77px; width:324px; height:84px; border-radius:42px; box-shadow:6px 10px 15px rgba(0,0,0,.4);
background:#00affe url('../images/index/bg_visual_link.png') no-repeat center center;}
.mainSkill {padding-bottom:100px;}
.skillCnt {display:flex; height:620px; margin-top:75px; padding-bottom:46px;}
.skillCnt .tab {float:left; width:488px;}
.skillCnt .imgBox {display:inline-grid; position:relative; width:612px; align-content:center;}
.skillCnt .tabImg {position:absolute; right:0; top:94px; width:100%; height:430px; border-radius:12px; overflow:hidden; background:#f1f1f1; opacity:0; transition:all linear 0.1s;}
.skillCnt .tabImg.active {opacity:100;}
.skillCnt .swiper-button-prev {position:absolute; left:20px; top:202px; width:15px; height:24px; margin:0; padding:0; background:url('../images/index/bg_skill_prev.png') no-repeat 0 0;}
.skillCnt .swiper-button-next {position:absolute; right:20px; top:202px; width:15px; height:24px; margin:0; padding:0; background:url('../images/index/bg_skill_next.png') no-repeat 0 0;}
.skillCnt .swiper-pagination {position:absolute; left:inherit; right:20px; top:20px; width:50px; height:24px; line-height:24px; border-radius:100px; text-align:center; background:rgba(0, 0, 0, .70); color:#aaa; font-weight:400;}
.skillCnt .swiper-pagination .swiper-pagination-current {color:#fff;}
.skillCnt .tabCnt {position:relative; z-index:2; width:100%; height:155px; cursor:pointer;}
.skillCnt .tabCnt dl {padding:27px 0 0 30px;}
.skillCnt .tabCnt dl dt {font-weight:800; font-size:22px;}
.skillCnt .tabCnt dl dt a {color:#0459c1; font-size:12px; text-decoration:underline; font-weight:300; margin-left:5px; vertical-align:middle; position:relative; top:-2px;}
.skillCnt .tabCnt dl dt a:first-child {margin-left:7px;}
.skillCnt .tabCnt dl dd {font-weight:300; font-size:16px; line-height:26px; padding-top:13px;}
.skillCnt .tabCnt.active:before {content:''; position:absolute; left:0; top:0; width:447px; height:153px; border-radius:12px; background:#fff; border:1px solid #c8c8c8; box-shadow:0 6px 15px rgba(0,0,0,.2); z-index:-1;}
.skillCnt .tabCnt.active dl dt {padding-left:28px; background:url('../images/index/bg_ico_tit1.png') no-repeat 0 10px;}
.skillCnt .tabImg.tp3 .swiper-pagination {right:0; left:0; margin:32px 38px 0; width:calc(100% - 76px); top:0; height:auto; line-height:normal; border-radius:0; background:none; border-bottom:1px solid #000;}
.skillCnt .tabImg.tp3 .swiper-pagination .swiper-pagination-bullet {float:left; position:relative; width:50%; height:44px; line-height:44px; font-weight:800; border-radius:0; background:none; font-size:16px; color:#000; opacity:.30;}
.skillCnt .tabImg.tp3 .swiper-pagination .swiper-pagination-bullet-active {opacity:100;}
.skillCnt .tabImg.tp3 .swiper-pagination .swiper-pagination-bullet-active:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#000;}
.skillCnt .tabImg.tp3 .imgFilpPc {position:relative; margin:114px 0 0 38px; overflow:hidden;}
.skillCnt .tabImg.tp3 .imgFilpPc .flip {margin-right:5px; width:175px; float:left;}
.skillCnt .tabImg.tp3 .imgFilpPc .flip div {width:175px; height:200px;}
.skillCnt .tabImg.tp3 .imgFilpMo {position:relative; margin:114px 0 0 38px; overflow:hidden;}
.skillCnt .tabImg.tp3 .imgFilpMo .flip {margin-right:3px; width:132px; float:left;}
.skillCnt .tabImg.tp3 .imgFilpMo .flip div {width:132px; height:221px;}
.skillCnt .tabImg.tp3 .flip p {text-align:center; font-weight:500; font-size:16px; padding-top:25px;}
.skillCnt .tabImg.tp3 .gp {position:relative; transition:transform 0.8s; transform-style:preserve-3d;}
.skillCnt .tabImg.tp3 .gp div {position:absolute; width:100%; height:100%; backface-visibility:hidden;}
.skillCnt .tabImg.tp3 .flip:hover .gp,
.skillCnt .tabImg.tp3 .flip:focus .gp, 
.skillCnt .tabImg.tp3 .flip:active .gp {transform:rotateY(180deg);}
.skillCnt .tabImg.tp3 .gp .back {transform:rotateY(180deg);}
.btnMore {font-weight:500; font-size:16px; border-radius:100px; position:relative; display:block; width:227px; height:64px; text-align:center; line-height:64px; border:1px solid #44c4fe; position:relative; margin:0 auto;}
.btnMore:after {content:''; display:inline-block; width:20px; height:12px; vertical-align:middle; position:relative; top:-2px; margin-left:12px; background:url('../images/index/bg_ico_arr1.png') no-repeat 0 0;}
.mainSvcEvent {background:#f3f3f3; position:relative; padding-bottom:120px; overflow:hidden;}
.mainSvcEvent .swiper-container {overflow:inherit;}
.mainSvcEvent ul {margin-top:35px;}
.mainSvcEvent ul li {border:1px solid #bebebe; border-radius:12px; overflow:hidden; float:left; width:797px;}
.mainSvcEvent .swiper-button-prev {position:absolute; left:90px; top:426px; width:22px; height:35px; margin:0; padding:0; background:url('../images/index/bg_svc_prev.png') no-repeat 0 0;}
.mainSvcEvent .swiper-button-next {position:absolute; right:90px; top:426px; width:22px; height:35px; margin:0; padding:0; background:url('../images/index/bg_svc_next.png') no-repeat 0 0;}
.mainSvcEvent .swiper-pagination {bottom:-43px; left:0; right:0;}
.mainSvcEvent .swiper-pagination-bullet {background:none; border:1px solid #c9c9c9; opacity:100; width:10px; height:10px;}
.mainSvcEvent .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:11px;}
.mainSvcEvent .swiper-pagination-bullet-active {background:#00affe; border:1px solid #000;}
.mainSvcEvent .swiper-container-3d .swiper-slide-shadow-left {background:none;}
.mainSvcEvent .swiper-container-3d .swiper-slide-shadow-right {background:none;}
.mainSvcEvent .swiper-slide-prev {border:none; margin-top:27px;}
.mainSvcEvent .swiper-slide-prev a img {opacity:.30; width:700px;}
.mainSvcEvent .swiper-slide-next {border:none; margin-top:27px;}
.mainSvcEvent .swiper-slide-next a img {opacity:.30; width:700px; margin-left:96px;}
.mainUseShop {padding-bottom:100px; text-align:center; position:relative;}
.mainUseShop ul {overflow:hidden; padding-top:55px; padding-bottom:50px;}
.mainUseShop ul li {display:inline-block; width:230px; border:1px solid #ddd; border-radius:12px; overflow:hidden; position:relative; top:0; transition:all .5s;}
.mainUseShop ul li + li {margin-left:20px;}
.mainUseShop ul li .img {height:190px; border-bottom:1px solid #ddd; overflow:hidden; }
.mainUseShop ul li dl {padding:22px 20px 23px; text-align:left;}
.mainUseShop ul li dl dt {font-size:20px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.mainUseShop ul li dl dd {font-size:15px; font-weight:300; padding-top:4px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.mainUseShop ul .on {top:-15px; box-shadow: 0 6px 15px rgba(0,0,0,.2);}
.mainUseShop .swiper-button-prev {position:absolute; left:0; top:189px; width:22px; height:35px; margin:0; padding:0; background:url('../images/index/bg_svc_prev.png') no-repeat 0 0;}
.mainUseShop .swiper-button-next {position:absolute; right:0; top:189px; width:22px; height:35px; margin:0; padding:0; background:url('../images/index/bg_svc_next.png') no-repeat 0 0;}
.mainCsSvc {background:#f3f3f3; position:relative; padding-bottom:120px; overflow:hidden;}
.mainCsSvc ul {display:flex; padding-top:55px; justify-content:center;} /* 22.03.31 justify-content:center; 속성 추가 이상아 */
.mainCsSvc ul li {display:inline-grid; width:340px;}
.mainCsSvc ul li a {display:block;}
.mainCsSvc ul li .img {border-radius:12px; overflow:hidden; position:relative; height:260px;}
.mainCsSvc ul li .over {text-align:center; line-height:244px; font-size:18px; color:#fff; font-weight:500; position:absolute; left:0; top:0; width:100%; height:260px;
background:rgba(0, 0, 0, 0); transition:all linear 0.2s;}
.mainCsSvc ul li .over strong {display:none;}
.mainCsSvc ul li.active .over {background:rgba(0, 0, 0, .40);}
.mainCsSvc ul li.active .over strong {display:block; background:url('../images/index/bg_ico_arr2.png') no-repeat center 151px;}
.mainCsSvc ul li h4 {font-weight:800; font-size:16px; padding-top:40px; margin-bottom:8px; position:relative; display:inline-block; z-index:2;}
.mainCsSvc ul li h4:after {content:''; position:absolute; left:0; bottom:1px; width:100%; height:10px; background:#ffe84c; z-index:-1;}
.mainCsSvc ul li dl dt {font-size:24px; font-weight:800;}
.mainCsSvc ul li dl dd {font-size:16px; font-weight:300; line-height:28px; padding-top:7px; word-break:keep-all;}
.mainCsSvc ul li + li {margin-left:40px;}
.mainCatBnr {background:#00affe;}
.mainCatBnr .w1100 {background:url('../images/index/bg_ctr.png') no-repeat right 0;}
.mainCatBnr ul {display:flex;}
.mainCatBnr ul li {display:inline-grid; position:relative; padding:0 70px; height:312px; text-align:center; align-items:center;}
.mainCatBnr ul li dl dt {font-size:28px; color:#fff; font-weight:800; line-height:40px;}
.mainCatBnr ul li dl dd {font-size:16px; color:#fff; font-weight:300; line-height:28px; padding-top:10px;}
.mainCatBnr ul li p {padding-bottom:16px;}
.mainCatBnr ul li a {display:inline-block; margin:0 auto; border-radius:100px; color:#fff; font-size:18px; font-weight:500; width:190px; height:66px; line-height:66px; text-align:center; background:#000;}
.mainCatBnr ul li:nth-child(2) a {background:#fff; border:1px solid #000; height:64px; line-height:64px; color:#000;}
.mainCatBnr ul li + li:before {content:''; position:absolute; left:0; top:59px; width:1px; height:194px; background:#009de4;}
.mainCatBnr ul li:first-child {padding-left:80px;}
.loginDiv {float:right; padding-top:26px; margin-left:-9px;}
#hdrWrap #header .nav ul li .loginDiv a {float:left; border-radius:100px; font-size:15px; font-weight:700; color:#fff; background:#000; width:93px; height:42px; line-height:42px; text-align:center;}
#hdrWrap #header .nav ul li .loginDiv a + a {background:#00affe; margin-left:6px;}
.depthGnb {position:fixed; left:0; top:159px; width:100%; height:284px; background:#fff; box-shadow:0 6px 10px rgba(0,0,0,.15); z-index:10; display:none;}
.depthGnb .w1100 {overflow:hidden;}
.depthGnb .banner {float:left; width:340px; height:203px; margin-top:40px; padding-right:60px; position:relative;}
.depthGnb .banner p {border-radius:12px; overflow:hidden;}
.depthGnb .banner:after {content:''; position:absolute; right:0; top:0; width:1px; height:203px; background:#e7e7e7;}
.depthGnb .menu {float:left;}
#hdrWrap #header .nav ul li {margin-left:55px;}
#hdrWrap #header .nav .depthGnb .menu {padding-top:27px;}
#hdrWrap #header .nav .depthGnb .menu ul {float:left; margin-left:47px;}
#hdrWrap #header .nav .depthGnb .menu ul li {float:none; margin:0; line-height:normal; text-align:center;}
#hdrWrap #header .nav .depthGnb .menu ul li a {font-size:16px; font-weight:400; line-height:36px; text-align:center;}
#hdrWrap #header .nav .depthGnb .menu ul:nth-child(2) {margin-left:50px;}
#hdrWrap #header .nav .depthGnb .menu ul:nth-child(3) {margin-left:38px;}
#hdrWrap #header .nav .depthGnb .menu ul:nth-child(4) {margin-left:43px;}
.depthGnb.active {display:block;}
#hdrWrap #header.fixed .topmenu {box-shadow:0px 3px 3px 0 rgb(0 0 0 / 10%)}

/* 23.04.03 이현진 추가 */
.depthGnb {height:294px;}