@charset "utf-8";

header{background: transparent;}
header.on{background: #1f1f26; box-shadow: 0 3px 6px 0 rgba(0,0,0,.3);}
/* footer */
footer{background: #15151A; padding:40px 0;}
footer ul{display: flex;}
footer img{opacity: .5;}
footer em, footer address, footer small{color:rgba(256,256,256,.5)}
footer em{font-size:1.8rem; margin-right: 60px;}
footer address, footer small{font-size:1.4rem; line-height: 2;}

/* 메인 비주얼 */
.visual{display: flex; align-items: center; justify-content: space-between; width:100%; height:38.2vw; max-height: 740px; padding-top: 3vw; background: url(../images/bg_main.gif)no-repeat 0 0/100%;}
.visual .inner{display: flex; align-items: flex-start; justify-content: space-between; }
.visual .subTi{display: block; margin-bottom: 20px; font-weight: 600; font-size: 2rem; color:#7B7B7D;}
/* 캐치프라이즈 */
.visual .catch h3{font-weight:600; font-size: 5rem; color:#fff;}
.visual .catch p{color:#fff; line-height:1.5; margin-top: 40px;}
.visual .catch .btnWrap .btn{height:50px; line-height: 50px; margin-top: 50px;}
.visual .catch .btnWrap .btn~.btn{margin-left: 18px;}
/* 이용정보 */
.visual .svcInfo{width: 32%; margin-right: 30px;}
.visual .svcInfo article~article{margin-top: 60px;}
.visual .svcInfo article .count{font-weight: 600; font-size:4rem; color:#fff;}
/* 이용건수 */
.visual .svcInfo .use .chart{position: relative; display: flex; justify-content: space-around; height: 96px; margin-top: 20px;}
.visual .svcInfo .use .chart::after{content:""; position: absolute; bottom: 28px; left: 0; width:100%; height: 1px; background: rgba(256,256,256,0.07);}
.visual .svcInfo .use .chart li{display: flex; justify-content: end; flex-direction: column;}
.visual .svcInfo .use .chart span{width: 7px; height: 100%; margin: 0 auto 10px auto; border-top-left-radius: 10px; border-top-right-radius: 10px; background: rgba(256,256,256,0.13);}
.visual .svcInfo .use .chart i{ color:#7B7B7D; text-align: center;}
.visual .svcInfo .use .chart li.on span{background: #003BFF; box-shadow: 0 0 10px 0 rgba(0,0,0,0.8);}
/* 개방현황 */
.visual .svcInfo .open ul{display: flex; text-align: center;}
.visual .svcInfo .open ul li~li{margin-left: 55px;}
.visual .svcInfo .open ul li span{display: block; color: #7B7B7D; margin-top: 10px;}

/* 서비스 이용 절차 */
.sectTi{display: block; margin-bottom: 40px; font-size:2.8rem; font-weight: 600; color:rgba(256,256,256,.8);}
.svcStep{background: #1B1B1F; padding: 80px 0;}
.svcStep ol{display: flex;}
.svcStep li{position: relative; width:25%; padding:30px; background: rgba(256,256,256,.04); border-radius: 5px; border:1px solid transparent}
.svcStep li~li{margin-left: 30px;}
.svcStep li:not(:last-child)::after{content: ""; position: absolute; right:-20px; top:50%; margin-top: -5px; width:10px; height:12px; background: url(../images/icon_arrow01.png)no-repeat 50%; opacity: .2;}
.svcStep li span{display: block; font-weight: 600; color:rgba(256,256,256,.5); font-size: 2.4rem; margin-bottom: 20px;}
.svcStep li span i{content:"step"; text-transform: uppercase; vertical-align: middle; margin-right: 8px; font-size: 1.8rem;}
.svcStep li em{font-size: 2rem; color: rgba(256,256,256,.6); line-height: 1.5;}
.svcStep li.on{border-color: #003BFF; box-shadow: 0 3px 5px 0 rgba(0,0,0,0.4);}
.svcStep li.on span,.svcStep li.on em{color: #fff;}
.svcStep li.on span::before{content:"👉"; margin-right: 8px;}

/* 지원하는 API 종류 */
/* mng_s 20251216 양은채, 지원하는 api 종류 수정 */
.svcApi{background: #15151A; padding: 100px 0 80px 0;}
.svcApi ul{display: flex; margin-top: 70px;}
/* .svcApi li{width:calc(33.33% - 20px);} */
.svcApi li~li{margin-left: 30px;}
/* .svcApi li::before{content: ""; display: block; width: 80px; height: 80px; margin-bottom: 30px;} */
/* .svcApi li:nth-child(1)::before{background: url(../images/icon_api01.png)no-repeat 50%;} */
/* .svcApi li:nth-child(2)::before{background: url(../images/icon_api02.png)no-repeat 50%;} */
/* .svcApi li:nth-child(3)::before{background: url(../images/icon_api03.png)no-repeat 50%;} */
.svcApi li em{font-size: 2rem; font-weight: 600; color: #fff;}
/* .svcApi li span{display: block; width: 85%; color: rgba(256,256,256,.65); line-height: 1.7; margin-top: 25px;} */
/* .svcApi li button{margin-top: 30px; height: 50px; line-height: 50px;} */
/* 추가 및 수정 */
.svcApi li span{display: block; color: rgba(256,256,256,.65); line-height: 1.7;}
.svcApi .iconBox{display: flex; flex-direction: column; align-items: center; margin-right: 20px; flex-shrink:0 ;}
.svcApi .itemRow{display: flex; align-items: center; margin-top: 15px;}
.svcApi .itemIcon{width: 92px; height: 80px; margin-right: 20px; background: url(../images/icon_api02.png)no-repeat 50%;}
.svcApi .itemContents{display: flex; align-items: center; gap: 20px;}
.svcApi .itemTit{display: block; margin-top: 16px; font-size: 2rem; font-weight: 600; color: #fff;}
/* mng_e 20251216 양은채, 지원하는 api 종류 수정 */

/* 원하는 데이터를 자유롭게 표현하세요 */
.apiIntro{background: #15151A; padding: 80px 0 100px 0;}
.apiIntro ul{display: flex; flex-wrap: wrap;}
.apiIntro li{width:calc(33.33% - 20px); overflow: hidden; margin-right: 30px; border-radius: 5px; background: rgba(256,256,256,.07); transition-duration: .2s;}
.apiIntro li:nth-child(3n){margin-right: 0;}
.apiIntro li:nth-child(n+4){margin-top: 30px;}
.apiIntro li a{display: block;}
.apiIntro li figure{width: 100%; height: 200px; overflow: hidden;}
.apiIntro li figure img{width: 100%; height: 100%; object-fit: cover; transition-duration: .3s;}
.apiIntro li em{display: block; color:#fff; font-weight: 600; margin-bottom: 10px;}
.apiIntro li .boxTi{padding: 20px;}
.apiIntro li:hover figure img{transform: scale(1.1);}
.apiIntro li.map:hover{background: rgba(43,222,163,.2);}
.apiIntro li.data:hover{background: rgba(255, 202, 25, 0.2);}
.apiIntro li.sdk:hover{background: rgba(196,76,248,.2);}

/* 직접 API를 조합하고 공유하세요 */
.svcUser{background: #1B1B1F; padding: 100px 0;}
.svcUser>div>div{display: flex;}
/* 공유게시판 */
.svcUser .community{position: relative; overflow: hidden; width:calc(100% - 366px); border-radius: 5px;}
.svcUser .community>ul{height: 100%; background: rgba(256,256,256,.07);}
.svcUser .community .slick-track>li{display: block; height: 100%; padding:40px 40px 70px 40px; border-top:3px solid #003BFF}
.svcUser .community .postTi{display: block; font-size: 2rem; color: #fff; margin-top: 25px;}
.svcUser .community .postTxt{display: inline-block; display: -webkit-box; height: 3em; overflow: hidden; white-space: normal; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color:#fff; line-height: 1.5; margin-top: 20px; }
.svcUser .community .postInfo{margin-top: 20px;}
.svcUser .community .postInfo span{color:rgba(256,256,256,0.6);}
.svcUser .community .postInfo span~span{margin-left: 20px;}
.svcUser .community .postInfo span::before{color:#fff;}
.svcUser .community a:hover{text-decoration: underline 2px #003BFF; font-weight: 600;}
.svcUser .community .btnSlide{position: absolute; bottom: 0; right:0; width:40px; height:40px; background: rgba(0,0,0,0.25);}
.svcUser .community .btnSlide.prev{right:41px;}
.svcUser .community .btnSlide::before{content: ""; display: block; width: 100%; height:100%; opacity: .5; background: url(../images/icon_arrow01.png)no-repeat 50%;}
.svcUser .community .btnSlide.prev::before{transform: rotate(-180deg);}
.svcUser .community .btnSlide:hover::before{opacity: 1;}
.svcUser .community .naviSlide{position: absolute; bottom: 18px; left:50%; transform: translateX(-50%);}
/* 튜토리얼 */
.svcUser .tutorial{position: relative; width:366px; padding: 60px 55px; margin-left: 30px; border-radius: 5px; background: rgba(0,0,0,0.8); text-align: center;}
.svcUser .tutorial::before, .svcUser .tutorial::after{content:""; position: absolute;}
.svcUser .tutorial::before{animation: bounce01 3s infinite; top:-15px; right:35px; width:36px; height:36px; border:5px solid #18AD79; border-radius: 8px; transform: rotate(45deg);}
.svcUser .tutorial::after{animation: bounce02 2s infinite; bottom: -10px; left:40px; width:42px; height:42px; border:5px solid #FEC432; border-radius: 50px;}
.svcUser .tutorial em{font-size:2.6rem; font-weight: 600; color:#fff;}
.svcUser .tutorial span{display: block; margin-top: 20px; color:rgba(256,256,256,.7); line-height: 1.5;}
.svcUser .tutorial button{height: 50px; line-height: 50px; margin-top: 40px;}
@keyframes bounce01{
    0% {transform: rotate(45deg);}
    50% {transform: rotate(-90deg);}
    100% {transform: rotate(45deg);}
}
@keyframes bounce02{
    0% {transform: translateY(0);}
    50% {transform: translateY(-10px);}
    100% {transform: translateY(0);}
}

/* 고객 지원 */
.cs{background: #15151A; padding:80px 0;}
.cs>div{display: flex; align-items: stretch;}
.cs article{position: relative; width: calc(33.33% - 20px);}
.cs article~article{margin-left: 30px;}
.cs ul{height: calc(100% - 70px);}
.cs li{height: calc(50% - 5px);}
.cs li~li{margin-top: 10px;}
/*mng_s 20211222 이진호 border 두깨 수정*/
.cs li a{display: flex; flex-direction: column; justify-content: center; height: 100%; padding:30px 30px 25px 30px; border-radius: 5px; border:1.5px solid rgba(256,256,256,0.1);}
/*mng_e 20211222 이진호*/
.cs li a span{display: block; width:90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:#fff;}
.cs li a time{display: block; margin-top: 10px; font-size:1.5rem; color:rgba(256,256,256,.4);}
.cs li:hover a{border-color: #003BFF;}
.cs li:hover a span{font-weight: 600;}
.cs .btnMore{position: absolute; top:0; right:0; display: block; width:40px; height:40px; background: rgba(256,256,256,0.04);}
.cs .btnMore::before{content: ""; display: block; width:100%; height:100%; opacity: .5; background: url(../images/icon_add.png)no-repeat 50%;}
.cs .btnMore:hover::before{opacity: 1;}
/* faq */
.cs .faq li a span::before{content:"Q"; font-weight: 600; margin-right: 10px; color:rgba(256,256,256,.4);}
.cs .faq li:hover a span::before{color:#2B54FF;}

/* 튜토리얼 */
.popup.popTtrl{background: rgba(0,0,0,0.8);}
.popTtrl section{position: relative; width:1160px; margin-top: -50px; background: transparent;}
.popTtrl p{position: relative; display: flex; justify-content: center; width:90%; height: 145px; padding:0 15px; margin: 0 auto 12px auto; line-height: 1.5; background: #001362; border:1px solid #0D45FF; text-align: center; color: #fff; border-radius: 5px;}
.popTtrl p::after{content:""; position: absolute; bottom:-8px; left:50%; margin-left: -7px; width:14px; height:14px; transform: rotate(225deg);
border-radius: 2px; border-top:1px solid #0D45FF; border-left: 1px solid #0D45FF; background: #001362;}
.popTtrl span{display: block; width:calc(100% - 20px); font-weight: 600;}
.popTtrl figure{position: relative; width: 90%; height: 600px; overflow: hidden; margin: 0 auto; border-radius: 5px;}
.popTtrl figure img{width: 100%; height: 100%; object-fit: cover;}
.popTtrl figure .point{position: absolute; font-size: 9.4rem; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
.popTtrl figure .point.left{animation: pointLeft infinite 1s;}
.popTtrl figure .point.right{animation: pointRight infinite 1s;}
.popTtrl figure .point.top{animation: pointTop infinite 1s;}
.popTtrl figure .point.bottom{animation: pointBottom infinite 1s;}
.popTtrl figure .box img{position: absolute; cursor: pointer; object-fit: unset;}
.popTtrl .btnSlide{position: absolute; top:50%; width:70px; height:70px; background: #222; transition-duration: .2s;}
.popTtrl .btnSlide.prev{left:-22px;}
.popTtrl .btnSlide.next{right:-22px;}
.popTtrl .btnSlide.nextBtn{right:-22px;}
.popTtrl .btnSlide:hover{background: #2e2e2e;}
.popTtrl .btnSlide::before{content: ""; display: block; width: 100%; height:100%; opacity: .5; background: url(../images/icon_arrow02.png)no-repeat 50%;}
.popTtrl .btnSlide.prev::before{transform: rotate(-180deg);}
.popTtrl .btnSlide:hover::before{opacity: 1;}
.popTtrl .btnClose{position: fixed; top:35px; right:45px; background: url(../images/icon_close.png)no-repeat;}
.popTtrl ui.naviSlide{display: flex; flex-wrap: wrap;}
.popTtrl .subTitle {font-size: 18px;text-align: left;color: orange; padding: 8px 0 5px 0;}
.popTtrl .subTitle.title{font-size:23px;}
.popTtrl .subTitle.etc{color: lightblue;}
.popTtrl .btnClick {color: limegreen;}
.popTtrl .subTitle label.big1 {font-size: 20px; color:gold; font-weight: bold;}

@keyframes pointLeft{
    0% {transform: translateX(0);}
    50% {transform: translateX(-10px);}
    100% {transform: translateX(0);}
}
@keyframes pointRight{
    0% {transform: translateX(0);}
    50% {transform: translateX(10px);}
    100% {transform: translateX(0);}
}
@keyframes pointTop{
    0% {transform: translateY(0);}
    50% {transform: translateY(-10px);}
    100% {transform: translateY(0);}
}
@keyframes pointBottom{
    0% {transform: translateY(0);}
    50% {transform: translateY(10px);}
    100% {transform: translateY(0);}
}