/* PC 헤더 */
header{width: 100%; height: 60px; background-color: white;position: relative; z-index: 100; box-sizing: border-box; border-bottom: 1px solid #F5F6FA;}
header .h-wrap{height: 100%; margin: auto; padding: 0 160px; display: flex; align-items: center;}
header .gnb-m{display: none;}
header h1{ position: relative; margin-right: 26px;}
header .gnb-w{width: calc(100% - 90px);}
header .gnb-w nav{display: flex; align-items: center; justify-content: space-between;}
header .gnb-w nav ul{display: flex; align-items: center; justify-content: center;}
header .gnb-w nav ul li a{font-size: 15px; margin: 0 18px; color: #4E5968; letter-spacing: -0.1px;}
/* section01 메인비쥬얼 */
.section01{padding: 80px 0; background: linear-gradient(#E5EFFF, #F5F6FA); }
.section01 .visual-wrap{width: 100%;display: flex; align-items: center; justify-content: space-between;}
.txt{margin-left: 14vw;}
.txt>div strong{font-size: 56px; line-height: 84px; color: #191F28;}
.txt>div strong span{position: relative;}
.txt>div strong span img{position: absolute; z-index: -1;}
.txt>div strong span img:first-child{bottom: 10px;}
.txt>div strong span img:last-child{bottom: 5px;left: 7px; width: 80%;}
.txt>div strong span::before{width:100% ;height: 5px; bottom: 10px; background-size: cover;}
.txt>div strong span::after{width:80% ;height: 5px; bottom: 5px;left: 7px; background-size: contain;}
.txt>div p{font-size: 22px; line-height: 33px; color: #6B7684;margin: 24px 0 40px 0;}
.txt ul{display: flex;}
.txt ul li:last-child a{background-color: #408AFF; margin-left: 16px;}
.section01 .visual-img{width: 50%; position: relative;}
.section01 .visual-img .img01{width: calc(100% - 138px); margin-bottom: 85px; float: right;}
.section01 .visual-img .img02{width: 29.5%; position: absolute; bottom: 0; }
.section01 .visual-img img{width: 100%; filter: drop-shadow(0 0 26px rgba(0,0,0,0.04)); }
/* section02 결제수단 */
.section02{padding: 160px 0 70px 0;}
.section02 .objs{padding: 0 140px 0 80px; position: relative; height: 285px; width: 50%;}
.section02 .objs ul{position: relative; width: 100%; height: 100%;}
.section02 .objs ul li{position: absolute; }
li.apple{width: 37%; left: 41%; top: 16%; z-index: 2;}
li.card{width: 28%; bottom: 0; left: 22%; z-index: 1;}
li.kakao{width: 37%; top: 0; left: 11%; z-index: 3;}
li.mobile{width: 16%; left: 70%; top: 0;}
li.naver{width: 30%;bottom: 2%; right: 4%;}
li.payco{width: 12%; right: 0; top: 33%;}
li.qr{width: 12%; bottom: 5%; left: 52%;}
li.smile{width: 17%; bottom: 5%; left: 8%;}
li.samsung{width: 16%; left: 0; top: 43%;}
/* section03 구독서비스 */
.section03{padding: 90px 0;}
.section03 .objs{padding: 0 60px; width: 50%; position: relative;}
.section03 .objs ul{position: absolute; display: flex; left: 0; bottom: 94px; z-index: 1; padding: 0 74px;}
.section03 .objs ul li{width: calc(100% / 3); overflow: hidden; border-radius: 15px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.06);}
.section03 .objs ul li:last-child{box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.1);}
.section03 .objs ul li:nth-of-type(2){margin: 0 16px;}

/* section04 개발연동도 쉽게 */
.section04{padding: 90px 0;}
.section04 .flow-tit{margin-top: 20px;}
.section04 .objs{padding-left: 40px; width: 50%;}
.section04 .objs .code-wrap{width: 100%; box-sizing: border-box; background-color: #2D3748; padding: 40px; border-radius: 20px;}
.section04 .objs .code-body{width: 100%; height: 270px; overflow: hidden;}
.section04 .objs .code-btn{width: 100%;height: 50px; box-sizing: border-box; padding: 0 10px; margin-top: 20px; display: flex; }
.section04 .objs .code-btn>div{  width: calc(100% / 3); }
.section04 .objs .code-btn input{display: none;}
/* .section04 .objs .code-btn input{overflow: hidden; position: absolute; left: -9999px ; width: 1px; height: 1px;} */
.section04 .objs .code-btn .btn-bn{cursor: pointer; color:#ddd; font-size:15px; border-top: 1px solid #ddd;text-align: center; line-height: 50px; box-sizing: border-box; width: 100%;}
.section04 .objs .code-btn input[type="radio"]:checked+label{ border-top: 2px solid #005FD5; color: #005FD5; font-weight: 700;}
/* section05 기술 문의도 쉽게 */
.section05{padding: 90px 0 80px 0;}
.section05 .objs{padding-right: 56px; width: 50%;}
/* section06 단하루면 충분 */
.section06{padding: 80px 0 160px 0;}
.section06 .txtbox dl{display: flex; flex-direction: column;}
.section06 .flow-tit{margin-top: 0; margin-bottom: 20px; order: -1;}
.section06 .inner{background-color: #edf5ff; padding: 50px 0; border-radius: 20px;}
.section06 .objs{width: 355px; margin-left: 80px; }
.section06 .txtbox{padding-left: 140px;}
/* section07 안정성 보안 */
.section07{background-color: #F5F6FA; padding: 160px 0;}
.section07 .txtbox{width: 100%; text-align: center; margin-bottom: 60px; padding-left: 0;}
.section07 .security-box{width: 50%; height: 464px;background-color: white; box-sizing: border-box; border: 1px solid #eaeaea; padding: 60px; border-radius: 20px;position: relative;}
.section07 .security-box:first-child{margin-right: 20px;}
.section07 .security-box:first-child::after{content: ''; display: block; position: absolute; width: 120px; height: 164px;background:url(../images/main_obj05.png) no-repeat; background-size: cover; right: 60px; bottom: 60px;}
.section07 .security-box:last-child::after{content: ''; display: block; position: absolute; width: 130px; height: 164px;background:url(../images/main_obj06.png) no-repeat; background-size: cover; right: 60px; bottom: 60px;}
.section07 .security-box:last-child{margin-left: 20px;}
.section07 .security-box span{display: inline-block; font-size: 15px; color: #0047a1; box-sizing: border-box; border: 1px solid #0047a1; border-radius: 20px; padding: 5px 15px 3px 15px; font-weight: 600;}
.section07 .security-box dt{font-size: 26px; line-height: 39px; font-weight: 600; margin-top: 20px;color: #333d4b;}
.section07 .security-box dd{margin-top: 24px;}
.section07 .security-box dd p{color: #6B7684; text-indent: -7px; padding-left: 7px; font-size: 16px; line-height: 26px;}
.section07 .security-box:last-child dd p:nth-of-type(2){width: 55%;}
/* section 포트폴리오 슬라이드 영역 */
.portfolio-area {background-color: #FAFBFE; padding: 160px 0;}
.portfolio-area .txtbox{width: 100%; text-align: center; margin-bottom: 40px; padding-left: 0;}
.portfolio-area .txtbox dd{font-size: 20px; line-height: 34px;}
.portfolio-area .swiper-box {margin-left: calc((100% - 1240px) / 2); overflow: hidden; position: relative; }
.portfolio-area .swiper-container{padding: 20px 0 75px 20px;}
.portfolio-area .swiper-slide{width: 340px !important; height: 466px; background-color: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.04); padding: 72px 0 0 56px; position: relative; margin-right: 40px; }
.portfolio-area .swiper-slide:before{display: block; content: ''; border: 1px solid #0047A1; position: absolute; width: 100%; height: 100%; top:0; left: 0; border-radius: 16px;opacity: 0; transition: all 0.5s;}
.portfolio-area .swiper-scrollbar{height: 4px; background-color: #F0F3FA; width: auto; left: 30%;
  right: calc((100% - 1200px) + 30%);}
.portfolio-area .swiper-scrollbar-drag{background-color: #005FD5;}
.portfolio-area .logo { width: 220px;height: 40px; margin-bottom: 26px; background-repeat: no-repeat; background-size: contain;}
.payapp{background-image: url(../images/logo_payapp.svg);}
.blogpay{background-image: url(../images/logo_blogpay.svg);}
.prosell{background-image: url(../images/logo_prosell.svg);}
.picsell{background-image: url(../images/logo_picksell.svg);}
.ucansign{background-image: url(../images/logo_ucansign.svg);}
.makelink{background-image: url(../images/logo_makelink.svg);}
.bootpay{background-image: url(../images/logo_bootpay.svg);}
.goodpin{background-image: url(../images/logo_goodpin.svg);}
.speedzone{background-image: url(../images/logo_speedzone.svg);}
.zipsa{background-image: url(../images/logo_zipsa.svg);}
.danbi{background-image: url(../images/logo_danbi.svg);}
.junggo{background-image: url(../images/logo_junggo.svg);}
.portfolio-area dd.info {font-size: 16px; color: #6B7684; line-height: 1.938; letter-spacing:0;}
.portfolio-area dd.info strong {font-weight: 600; color: #2D3748;}
.portfolio-area dd.info small { margin-top: 5px; display: inline-block; line-height: 1.643; font-size: 14px;}
.portfolio-area .icon-link{width: 53px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='10' viewBox='0 0 53 10' fill='none'%3E%3Cpath d='M0 9H51.7586C51.8477 9 51.8923 8.89229 51.8293 8.82929L44 1' stroke='%23D9D9DA' stroke-width='2'/%3E%3C/svg%3E"); padding: 20px 0; position: absolute; bottom: 62px;}
.portfolio-area .swiper-slide:hover{box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);}
.portfolio-area .swiper-slide:hover::before{opacity: 1;}
.portfolio-area .swiper-slide:hover .icon-link{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='10' viewBox='0 0 53 10' fill='none'%3E%3Cpath d='M0 9H51.7586C51.8477 9 51.8923 8.89229 51.8293 8.82929L44 1' stroke='%230047A1' stroke-width='2'/%3E%3C/svg%3E"); }

/* section08 시작하기 */
.section08{background-color: #0047A1; padding: 100px 0;}
.section08 .txtbox{padding: 0; text-align: center; margin: auto; }
.section08 .txtbox dt, .section08 .txtbox dd{color: white;}
.section08>img{position: absolute; max-width: 100%;}
.section08>img.wave1{left: 0; top: 0; animation: wave01 ease-out 3s infinite alternate-reverse;}
.section08>img.wave2{left: 0; top: 0; animation: wave02 ease-out 3s infinite alternate-reverse;}
.section08>img.wave3{right: 0; bottom: 0; animation: wave03 ease-out 3s infinite alternate-reverse; }
.section08>img.wave4{right: 0; bottom: 0; animation: wave04 ease-out 3s infinite alternate-reverse; }
@keyframes wave01 {
    0% {left: -15%; top: -15%;}
    100% {left: -20%; top: -15%;}
  }
  @keyframes wave02 {
    0% {left: -10%; top: -15%;}
    100% {left: -5%; top: -10%;}
  }
  @keyframes wave03 {
    0% {right: -5%; bottom: -10%;}
    100% {right: -10%; bottom: -15%;}
  }
  @keyframes wave04 {
    0% {right: -10%; bottom: -10%;}
    100% {right: -15%; bottom: -5%;}
  }
footer{background-color: #111111; padding: 60px 0;}
footer .link-wrap{margin-bottom: 2.5vw;}
footer .link-wrap .link-area{position: relative;display: flex; align-items: center; justify-content: space-between; }
footer .familysite{float: right; width: 230px; position: relative; }
footer .familysite .site-form{position: relative; width: 100%; height: 42px; padding: 0 18px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 15%); display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-radius: 4px;}
footer .familysite .select-btn{display: block; width: 10px; height: 6px; transition: transform 0.1s; }
footer .familysite .select-btn::after { content: ""; background: url(../images/f_dropdown_icon.svg) no-repeat; width: 10px; height: 6px; transition: all 0.2s; float: right; background-size: cover;}
footer .familysite button {font-size: 12px; color: white; padding: 0;}
footer .familysite .site-lst {display: none; position: absolute; bottom: 41px; width: 100%; padding: 6px 0;
 border-radius: 4px; background: #111; box-sizing: border-box; border: 1px solid;}
footer .familysite .site-lst li a { display: block; font-size: 12px; color: #aaaaaa; transition: all 0.2s linear;
padding: 10px 18px 10px 18px;}
footer .terms{ margin-bottom: 1.5vw;}
footer .terms a{ color: #aaaaaa;font-size: 13px; display: inline-block; line-height: 30px; margin-right: 36px; cursor: pointer;}
footer .terms a:nth-of-type(4){color: white; font-weight: 600;}
footer .copyright-area *{font-size: 13px; color: #aaaaaa; line-height: 26px; margin-right: 11px;}
footer .copyright-area span:not(:first-child)::before {content: ' ';display: inline-block; margin-right: 12px; vertical-align: middle; background: #333; width: 1px; height: 11px;}
footer .report-number{cursor: pointer;}
footer .report-number a{margin-right: 0;}
footer .report-number::after { content: ""; display: inline-block;background: url(../images/f_link_icon.svg) no-repeat; width: 9px; height: 9px; margin-left: 3px; position: relative;background-size: 100%;}
footer .copyright { margin-top: 12px; color: #666; font-size: 12px; line-height: 22px; font-weight: 200;}
/* add class */
.fix-header{position: fixed; top: 0; }
.rotate1{transform:rotate(45deg); transform-origin: 2px center;}
.rotate2{transform: scale(0);}
.rotate3{transform:rotate(-45deg); transform-origin: 2px center;}
footer .familysite .site-lst.on{display: block;}
footer .familysite .select-btn.on::after{ transform: rotate(180deg); }
@media screen and (max-width:1600px) {
  header .h-wrap{padding: 0 60px;}
  .txt{margin-left: 10vw;}
  .section04 .objs{padding: 0 60px 0 40px;}
  .section05 .objs{padding: 0 40px 0 60px;}
  .section06 .inner{max-width: 90%;}
  .section01 .visual-img .img01{width: calc(100% - 100px); margin-bottom: 60px;}
}
@media screen and (max-width:1400px) {
  header .h-wrap{padding: 0 60px;}
  .txt{margin-left: 10vw;}
  .section04 .objs{padding: 0 60px 0 40px;}
  .section05 .objs{padding: 0 40px 0 60px;}
  .section06 .inner{max-width: 90%;}
  .section01 .visual-img .img01{width: calc(100% - 100px); margin-bottom: 60px;}
  .sidebar-overlay{ display: block; }
}
@media screen and (max-width:1200px){
    header .h-wrap{padding: 0 20px;}
    .section01 .visual-img{width: 55%;}
    .section01 .visual-img .img01{width: calc(100% - 80px);}
    .txt>div strong{font-size: 46px; line-height: 69px;}
    .txt>div strong span::before{height: 3px;bottom: 8px; }
    .txt>div strong span::after{height: 3px; bottom: 3px;}
    .txt>div strong span img:first-child{bottom: 8px;}
    .txt>div strong span img:last-child{bottom: 3px;}
    .txt>div p{font-size: 18px; margin: 20px 0 36px 0;}
    .section02 .objs{padding: 0 6vw 0 4vw; height: 26vw;}
    .section03 .objs{padding: 0 0 0 4vw;}
    .section03 .objs ul{bottom: 27%; padding: 0 0 0 4vw;}
    .section04 .objs{padding: 0 0 0 3vw;}
    .section05 .objs{padding: 0 3vw 0 0;}
    .section06 .txtbox{padding-left: 8vw;}
    .section06 .objs{margin-left: 4vw;}
    .section07 .security-box:first-child{margin-right: 10px;}
    .section07 .security-box:last-child{margin-left: 10px;}
    .portfolio-area .swiper-box{margin-left: inherit;}
    .portfolio-area .swiper-slide{margin-right: 30px;}
    .portfolio-area .swiper-scrollbar{ left: 30%; right: 30%;}
    @keyframes wave01 {
      0% {left: -40%; top: -20%;}
      100% {left: -30%; top: -30%;}
    }
    @keyframes wave02 {
      0% {left: -30%; top: -10%;}
      100% {left: -35%; top: -20%;}
    }
    @keyframes wave03 {
      0% {right: -15%; bottom: -25%;}
      100% {right: -10%; bottom: -35%;}
    }
    @keyframes wave04 {
      0% {right: -35%; bottom: -10%;}
      100% {right: -40%; bottom: -15%;}
    }
    }
@media screen and (max-width:1070px){
  .section07 .security-box:first-child dd p:nth-of-type(2){width: 70%;}
}
@media screen and (max-width:1024px){
/* 모바일 헤더 */
header .gnb-w{display: none;}
header .gnb-m{display: block; height: 100%; }
header .m-menu{display: none; position: fixed; background-color: white; padding: 80px 20px; width: 100%; height: calc(100% - 59px); top: 59px;right:0; }
header .m-menu .menu01{margin-bottom: 26px;}
header .m-menu .menu02{margin-top: 26px;}
header .m-menu ul li a{display: block; padding: 15px 0; font-size: 22px; line-height: normal;  color: #4E5968; text-align: center;}
header .m-menu a.btn-md{padding: 22px 0; margin: 0 !important; width: calc(100% - 40px); display: inline-block; text-align: center; bottom: 20px; position: absolute; font-size: 20px !important; font-weight: 600;}
header .gnb-m .hambar { position: absolute; right: 20px; width: 24px; top: 50%; transform: translateY(-50%); cursor: pointer;}
header .gnb-m .hambar span { display: block; width: 100%; height: 2px; background-color: #333;box-sizing: border-box;border-radius: 3px; transition: .2s;}
header .gnb-m .hambar span:nth-last-of-type(2){margin: 5px 0;}
.section02 .objs{padding: 0 4vw 0 0; height: 30vw;}
.section04 .objs{padding-left: 0;}
.section04 .objs .code-btn .btn-bn{font-size:14px; line-height: 50px;}
.section04 .objs .code-body{height: 230px;}
.section05 .objs{padding-right: 0;}
.section06 .objs{margin-left: 0; width: 36%;}
.section07 .security-box{height: 400px; padding: 5vw;}
.section07 .security-box dl{padding-left: 5px;}
.section07 .security-box dt{font-size: 24px; line-height: 36px;}
.section07 .security-box dd{margin-top: 14px; font-size: 14px; line-height: 21px;}
.section07 .security-box:first-child dd p:nth-of-type(2){width: 80%;}
.section07 .security-box:last-child dd p:nth-of-type(2){width: 60%;}
.section07 .security-box:first-child::after{width: 88px; height: 120px; right: 5vw; bottom: 5vw;}
.section07 .security-box:last-child::after{width: 96px; height: 120px; right: 5vw; bottom: 5vw;}
}
@media screen and (min-width:769px) and (max-width:1023px){
.section01 .visual-wrap{display: flex; flex-direction: column; }
.txt{margin-left: 0; z-index: 1; width: 80%;}
.txt>div strong{font-size: 54px; line-height: 84px;}
.txt>div strong span::before{height: 5px;bottom: 8px;}
.txt>div strong span::after{width:80% ;height: 5px; bottom: 2px; left: 7px;}
.txt>div p{font-size: 22px; line-height: 33px; margin: 24px 0 40px 0;}
.section01 .visual-img{width: 80%; position: relative; margin-left: 20%; margin-top: 6%;}
.section01 .visual-img .img01{width: 100%; float: right; margin-bottom: 85px;}
.section01 .visual-img .img02{position: absolute; bottom: 0; width: 34%; left: -16%;}
}
@media screen and (max-width:768px) {
  .section01 .visual-wrap{display: flex; flex-direction: column;}
  .txt{margin-left: 0; text-align: center; display: flex; flex-direction: column; margin-bottom: 40px;}
  .txt ul li:last-child a{margin-left: 8px;}
  .txt>div strong{font-size: 52px; line-height: 78px;}
  .txt>div strong span::before{height: 4px;bottom: 8px;}
  .txt>div strong span::after{height: 4px; bottom: 2px; }
  .txt>div p{font-size: 20px; line-height: 30px; margin: 12px 0 26px 0;}
  .txt ul{display: flex; align-items: center; justify-content: center;}
  .section01 .visual-img{width: 80%; position: relative; margin-left: 20%;}
  .section01 .visual-img .img01{width: 100%; margin-bottom: 15%;}
  .section01 .visual-img .img02{position: absolute; bottom: 0; width: 36%; left: -15%;}
  .objs { position: relative; left: 50%; transform: translateX(-50%);}
  .section02 .objs{padding: 0; width: 35rem; height: 26rem;}
  .section03 .txtbox{order: -1;}
  .section03 .objs{width: 40rem;}
  .section03 .objs, .section03 .objs ul{padding: 0;}
  .section04 .objs{width: 80%;}
  .section05 .txtbox{order: -1;}
  .section05 .objs{width: 70%; padding: 0;}
  .section06 .inner{padding: 8% 0; max-width: 70%;}
  .section06 .objs{width: 42%; position: relative; left: 50%; transform: translateX(-53%); order: -1;}
  .section06 .txtbox{padding-left: 0; text-align: center; margin-top: 5%; margin-bottom: 0;}
  .section06 .flow-tit{margin-bottom: 8px; }
  .section07 .inner{max-width: 70%;}
  .section07 .txtbox{margin: 0 auto 6%;}
  .section07 .txtbox dt span{display: block; width: 100%;}
  .section07 .security-box{width: 100%; padding: 8vw;}
  .section07 .security-box:first-child{margin-right: 0; margin-bottom: 20px;}
  .section07 .security-box:last-child{margin-left: 0;}
  .section07 .security-box dd p:first-child{margin-bottom: 5px;}
  .section07 .security-box:first-child dd p:nth-of-type(1){width: 80%;}
  .section07 .security-box:first-child dd p:nth-of-type(2){width: 50%;}
  .section07 .security-box:last-child dd p:nth-of-type(1){width: 80%;}
  .section07 .security-box:last-child dd p:nth-of-type(2){width: 50%;}
  .section07 .security-box:first-child::after{width: 95px; height: 130px; right: 8vw; bottom: 8vw;}
  .section07 .security-box:last-child::after{width: 104px; height: 130px; right: 8vw; bottom: 8vw;}
  .portfolio-area .txtbox{margin-bottom: 20px;}
  .portfolio-area .txtbox dd{font-size: inherit; line-height: inherit;}
  .portfolio-area .swiper-container{padding: 20px 0 45px 20px;}
  .portfolio-area .swiper-slide{padding: 52px 0 0 46px;  margin-right: 26px; height: 420px; width: 320px !important;}
  .portfolio-area .icon-link{bottom: 52px;}

}
@media screen and (max-width:575px) {
  .section02{padding: 100px 0 0 0;}
  .section03, .section04{padding: 120px 0 0 0;}
  .section05{padding: 100px 0 0 0;}
  .section06 {padding: 100px 0;}
  .section07,.portfolio-area, .section08{padding: 80px 0;}
  .txt>div strong{font-size: 40px; line-height: 60px;}
  .txt>div strong span::before{height: 3px; bottom: 6px;}
  .txt>div strong span::after{height: 3px;}
  .txt>div p{font-size: 16px; line-height: 24px; margin: 12px 0 20px 0;}
  .section02 .objs{width: 30rem; height: 22rem;}
  .section03 .objs{width: 30rem;}
  .section04 .objs, .section05 .objs{width: 90%;}
  .section06 .inner{max-width: 80%;}
  .section07 .inner{max-width: 80%;}
  .section07 .security-box{height: auto;}
  .section07 .security-box dt {font-size: 20px; line-height: 32px;}
  .section07 .security-box dd{padding-bottom: 20%;}
  .section07 .security-box dd p{font-size: 14px; line-height: 22px;}
  .section07 .security-box:first-child dd p:nth-of-type(1){width: 90%;}
  .section07 .security-box:first-child dd p:nth-of-type(2){width: 70%;}
  .section07 .security-box:last-child dd p:nth-of-type(1){width: 90%;}
  .section07 .security-box:last-child dd p:nth-of-type(2){width: 64%;}
  .section07 .security-box:first-child::after{width: 70px; height: 96px;}
  .portfolio-area .swiper-slide {  height: 390px; }
  .section07 .security-box:last-child::after{width: 75px; height: 95px;}
  .portfolio-area .logo{height: 32px ;margin-bottom: 20px; font-size: 14px; line-height: 26px;}
  .portfolio-area dd.info{font-size: 14px; line-height: 1.703;}
  .portfolio-area dd.info small{font-size: 12px; line-height: 1.75;}

  @keyframes wave01 {
    0% {left: -30%; top: -20%;}
    100% {left: -25%; top: -30%;}
  }
  @keyframes wave02 {
    0% {left: -50%; top: -5%;}
    100% {left: -40%; top: 0%;}
  }
  @keyframes wave03 {
    0% {right: -15%; bottom: -20%;}
    100% {right: -10%; bottom: -15%;}
  }
  @keyframes wave04 {
    0% {right: -40%; bottom: -10%;}
    100% {right: -30%; bottom: -15%;}
  }
footer{padding: 40px 0;}
footer .link-wrap .link-area{display: initial;}
footer .link-area .f-logo img{width: 30%;}
footer .familysite{float: left; width: 100%; margin: 24px 0; }
footer .familysite .site-form{height: 11vw; padding: 0 4.17vw;}
footer .familysite button{font-size: 3.055vw;}
footer .familysite .select-btn{width: 20px; height: 12px; }
footer .familysite .select-btn::after { width: 3.3vw; height: 2vw; }
footer .familysite .site-lst {bottom: 10.5vw; padding: 20px 0;}
footer .familysite .site-lst li a {font-size: 3.055vw; padding: 2.7vw 4.17vw;}
footer .terms{ margin-bottom: 3.25vw;}
footer .terms a{ font-size: 3.25vw; line-height:2.5; margin-right: 6vw; }
footer .copyright-area *{font-size: 3.25vw; line-height: 2.5; margin-right: 7.5vw; word-break: keep-all; display: inline-block;}
footer .copyright-area span:not(:first-child)::before {display: none;}
footer .report-number::after { width: 2.25vw; height: 2.25vw;}
footer .copyright{font-size: 3vw; line-height: 2.5vw;}
}
@media screen and (max-width:425px) {
  .section01{padding: 60px 0;}
  .section03 .objs ul li{border-radius: 10px;}
  .section03 .objs ul li:nth-of-type(2){margin: 0 2.5vw;}
  .section04 .objs{width: 100%;}
  .section05 .objs{width: 100%;}
  .section06 .objs{width: 50%; transform: translateX(-55%);}
  .section06 .flow-tit{margin-bottom: 4px;}
  footer .familysite .select-btn, footer .familysite .select-btn::after{width: 12px; height: 7px; }
  .section07 .security-box:first-child::after{width: 73px; height: 100px;}
  .section07 .security-box:last-child::after{width: 80px; height: 100px;}
  .section07 .security-box dd p:first-child{margin-bottom: 7px;}
  .section07 .security-box:last-child dd p:nth-of-type(2){width: 70%;}
  .portfolio-area .swiper-slide{ width: 280px !important; height: 340px; margin-right: 20px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.04); padding: 40px 0 0 36px;}
  .portfolio-area .icon-link{bottom: 30px; width: 40px;}
}
@media screen and (max-width:360px) {
  .section01{padding: 8vh 0 8vh 0;}
  .section02{padding: 10vh 0 0 0;}
  .section03, .section04, .section05{padding: 12vh 0 0 0;}
  .section06, .section07,.portfolio-area, .section08 {padding: 10vh 0;}
  .txt{margin-bottom: 20px;}
  .txt>div strong{font-size: 32px; line-height: 48px;}
  .txt>div strong span::before{height: 2px; bottom: 5px;}
  .txt>div strong span::after{height: 2px; bottom: 0px;}
  .txt>div p{font-size: 14px; line-height: 21px; margin: 8px 0 16px 0;}
  .txt>div strong span img:first-child{bottom: 6px;}
  .section01 .visual-img{width: 100%; margin-left: 0;}
  .section01 .visual-img .img01{width: 80%; margin-bottom: 30px;}
  .section01 .visual-img .img02{width: 27%; left: 20px;}
  .section02 .objs{width: 25rem; height: 19rem;}
  .section03 .objs ul li{border-radius: 5px;}
  .section03 .objs{width: 26rem;}
  .section04 .flow-tit{margin-top: 0;}
  .section04 .objs .code-btn .btn-bn{font-size: 12px; line-height: 46px;}
  .section06 .flow-tit{margin-bottom: 4px; font-size: 16px !important;}
  .section06 .inner, .section07 .inner{max-width: 90%;}
  .section06 .objs{width: 42%;}
  .portfolio-area .txtbox{margin-bottom: 10%;}
  .section07 .security-box:first-child::after{width: 70px; height: 95px;}
  .section07 .security-box:last-child::after{width: 70px; height: 88px;}
  .section07 .security-box span{font-size: 12px; padding: 2px 10px 0px 10px;}
  .section07 .security-box dt{font-size: 18px ; line-height: 26px; margin-top: 14px;}
  .section07 .security-box:first-child dd p:nth-of-type(1){width: 100%;}
  .section07 .security-box:first-child dd p:nth-of-type(2){width: 65%;}
  .section07 .security-box:last-child dd p:nth-of-type(1){width: 90%;}
  .section07 .security-box:last-child dd p:nth-of-type(2){width: 64%;}
  .portfolio-area .txtbox dd{font-size: 14px; line-height: 24px; padding: 0 20%;}
  .portfolio-area .swiper-container{padding: 0 0 35px 20px;}
  .portfolio-area .logo{margin-bottom: 20px; height: 28px; width: 100%;}
}
/* SubPage css */
.color-point{color: #0047A1;}
.sub-visual .stxt strong{font-size: 46px; line-height: 60px; font-weight: 700; color: #191F28; }
.sub-visual .stxt p{font-size: 18px; line-height: 27px; color: #6B7684; margin-top: 12px; }
.sub-visual{background: linear-gradient(#E5EFFF, #F5F6FA); position: relative;}
.sub-visual>img:nth-of-type(1){position: absolute; width: 110px; bottom: -35px; left: calc(100% / 3);}
.sub-visual>img:nth-of-type(2){position: absolute; width: 100px; top: -40px; right: calc(100% / 3);}
.sub-visual>img:nth-of-type(3){position: absolute; width: 230px ; left: -20px; top: -88px;}
.sub-visual>img:nth-of-type(4){position: absolute; width: 230px ; right: -20px; bottom:-88px;}
.vs-charge, .vs-open{max-width: 1200px; margin: auto; text-align: center; position: relative;  padding: 8.25vh 0;}
/* 서브페이지 콘텐츠1 */
.sub-cont01{padding: 140px 0 70px 0 ;}
.sub-cont01 .sub-tit{text-align: center;}
.sub-cont01 .sub-wrap{display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.sub-cont01 .sub-wrap article{position: relative; overflow: hidden; border-radius: 20px; box-sizing: border-box;}
.sub-cont01 .sub-wrap article .stxt dt{font-size: 28px; line-height: 42px; color: #333d4b; font-weight: 700;}
.sub-cont01 .sub-wrap article .stxt dd{font-size: 16px; line-height: 24px; margin-top: 12px; color: #6B7684; position: relative;}
.sub-cont01 .sub-wrap article .stxt dd.sm-txt{font-size: 14px; line-height: 21px; color: #aaaaaa; margin-top: 6px;}
/* 이용요금 콘텐츠1 */
.charge01::after, .charge02::after, .open02::after, .open03::after{content: ""; display: inline-block; position: absolute; right: 0; width: 40px; height: 100%; top: 0;}
.charge01, .charge02 {flex: 1; padding: 60px; height: 300px;}
.charge01{ background-color: #F1FAE9; margin-right: 15px;}
.charge02{background-color: #EDF5FF; margin-left: 15px;}
dd.ico-free::after{content: ""; display: inline-block; position: absolute; background: url(../images/sub_charge_img01Free.svg) no-repeat; width: 25px; height: 17px; top: -5px; left: 135px; transform: rotate(-15deg); background-size: cover;}
.charge01 img{position: absolute; height: 240px; right: -10%; bottom: 0;}
.charge02 img{position: absolute; height: 240px; right: -7%; bottom: 0;}
.charge01::after{background: linear-gradient(to right,rgba(241, 250, 233, 0%), rgba(241, 250, 233, 50%)); }
.charge02::after{background: linear-gradient(to right,rgba(235, 243, 251, 0%), rgba(235, 243, 251, 50%)); }
.charge03{width: 100%; padding: 42px; background-color: #F5F6FA; margin-top: 30px; text-align: center;}
.charge03 img{transform: translateX(5px); margin-bottom: 24px;}
/* 바로오픈 콘텐츠1 */
.stxt ul{position: absolute; bottom: 60px;}
.open01{width: 100%; padding: 60px; background-color: #EDF5FF; margin-bottom: 30px; height: 260px;}
.open01 .stxt{width: 300px;}
.open02, .open03 {flex: 1; padding: 60px; height: 360px;}
.open02{ background-color: #FFFAF0; margin-right: 15px;}
.open03{background-color: #FFF5F5; margin-left: 15px;}
.open02 dl{width: 45%;}
.open03 dl{width: 50%;}
.open02::after{background: linear-gradient(to right,rgba(255, 250, 240, 0%), rgba(255, 250, 240, 50%)); }
.open03::after{background: linear-gradient(to right,rgba(255, 245, 245, 0%), rgba(255, 245, 245, 30%)); }
.open01 img{position: absolute; height: 220px; right: 10%; bottom: 0;}
.open02 img{position: absolute; height: 280px; right: -10%; bottom: 0;}
.open03 img{position: absolute; height: 280px; right: -10%; bottom: 0;}
/* 서브페이지 콘텐츠2 */
.sub-cont02{padding: 70px 0;}
.sub-cont03{padding: 70px 0 140px 0;}
/* 이용요금 콘텐츠2 */
.sub1-list{margin-bottom: 32px;}
.sub1-list>div{box-sizing: border-box; border-bottom: 1px solid #eaeaea;  padding: 25px 0;}
.sub1-list>div dl{display: flex; font-size: 22px; line-height: 33px; align-items: baseline;}
.sub1-list>div dl dt::before{content: ""; display: inline-block; width: 25px; height: 25px; transform: translateY(15%); margin-right: 12px; background-size: cover;}
.checkcard dt::before{ background:url(../images/sub_charge_icon01.svg) no-repeat ;}
.account dt::before{ background:url(../images/sub_charge_icon02.svg) no-repeat ;}
.payment dt::before{ background:url(../images/sub_charge_icon03.svg) no-repeat ;}
.mobile dt::before{ background:url(../images/sub_charge_icon04.svg) no-repeat ;}
.bank dt::before{ background:url(../images/sub_charge_icon05.svg) no-repeat ;}
.sub1-list>div dl dt{flex: 1; color: #6B7684;}
.sub1-list>div dl dd{flex: 3; color: #333d4b; font-weight: 600;}
.sub-cont03 .panel-body .panel-wrap{display: flex; margin-bottom: 32px;}
.sub-cont03 dl.list-group{flex: 1; font-size: 22px;line-height: 33px; border-bottom: 1px solid #eaeaea; box-sizing: border-box;}
.sub-cont03 dl.list-group dt{color: #6B7684;padding: 20px 0; box-sizing: border-box; border-bottom: 1px solid #EAEAEA;}
.sub-cont03 dl.list-group dd{color: #333D4B; padding: 24px 0; font-weight: 600;}
.sub-cont03 dl.list-group:nth-of-type(1) dd{width: 75%;}
.sub-cont03 dl.list-group:nth-of-type(2) dd{width: 40%;}
.sub-cont03 dl.list-group:nth-of-type(3) dd{width: 50%;}
.sub-cont03 dl.list-group:nth-of-type(4) dd{width: 50%;}
.sub-cont03 dl.list-group:nth-of-type(5) dd{width: 60%;}
/* 바로오픈 콘텐츠2 */
.sub2-list>div{display: flex; align-items: center; position: relative;}
.sub2-list>div::before{content: ""; display: inline-block; width: 80px; height: 80px; position: absolute; left: 0;}
.sub2-list .open-ico1::before{ background: url(../images/sub_open_icon01.svg) no-repeat; background-size: cover;}
.sub2-list .open-ico2::before{ background: url(../images/sub_open_icon02.svg) no-repeat; background-size: cover;}
.sub2-list .open-ico3::before{ background: url(../images/sub_open_icon03.svg) no-repeat; background-size: cover;}
.sub2-list .open-ico4::before{ background: url(../images/sub_open_icon04.svg) no-repeat; background-size: cover;}
.sub2-list>div:first-child{padding-bottom: 32px; border-bottom: 1px solid #eaeaea;}
.sub2-list>div:last-child{padding-top: 32px;}
.sub2-list>div>dl{padding-left: 109px; padding-right: 10px;}
.sub2-list>div>dl dt{font-size: 22px; line-height: 33px; font-weight: 600; color: #333D4B;margin-bottom: 10px;}
.sub2-list>div>dl dd{font-size: 18px; line-height: 27px; color: #6B7684;}

@media screen and (max-width:1200px){
  .charge01, .charge02, .open01, .open02, .open03{padding: 42px;}
  .charge01 img{height: 80%; right: -25%;}
  .charge02 img{height: 80%; right: -15%;}
  .open03 dl{width: 100%;}
  .open03 dl dd{width: 55%;}
  .open02 img{height: 70%; right: -10%;}
  .open03 img{height: 70%; right: -15%;}
  }
@media screen and (max-width:1024px){
  .sub-visual>img:nth-of-type(1){width: 85px; bottom: -35px; left: calc(100% / 4);}
  .sub-visual>img:nth-of-type(2){width: 90px; top: -40px; right: calc(100% / 4);}
  .sub-visual>img:nth-of-type(3){width: 160px ; left: -50px; top: -80px;}
  .sub-visual>img:nth-of-type(4){width: 160px ; right: -50px; bottom:-80px;}
  .sub-cont01{padding: 120px 0 60px 0;}
  .stxt ul{bottom: 40px;}
  .charge01::after, .charge02::after, .open02::after, .open03::after{width: 100%; height: 40px; bottom: 0; top: initial; }
  .charge01::after{background: linear-gradient(to bottom,rgba(241, 250, 233, 0%), rgba(241, 250, 233, 50%)); }
  .charge02::after{background: linear-gradient(to bottom,rgba(235, 243, 251, 0%), rgba(235, 243, 251, 50%)); }
  .open02::after{background: linear-gradient(to bottom,rgba(255, 250, 240, 0%), rgba(255, 250, 240, 50%)); }
  .open03::after{background: linear-gradient(to bottom,rgba(255, 245, 245, 0%), rgba(255, 245, 245, 30%)); }
  .sub-tit>h3>span{width: 100%; display: block;}
  .sub-cont01 .sub-wrap{flex-wrap: initial; flex-direction: column;}
  .charge01, .charge02, .open01, .open02, .open03{ flex: initial; height: auto; display: flex; justify-content: space-between; padding: 46px 46px 0 46px;}
  .charge01, .open02{margin: 0;}
  .charge02, .open03{margin-top: 30px; margin-left: 0;}
  .charge01 img, .charge02 img, .open01 img, .open02 img, .open03 img{position: relative; height: auto; right: 0;}
  .charge01 img{width: 55%;}
  .charge02 img{width: 50%;}
  .open02 dl{width: 90%;}
  .open03 dl dd{width: 90%;}
  .open01 img{width: 55%;}
  .open02 img{width: 42%; margin-right: 20px;}
  .open03 img{width: 50%; margin-right: 20px;}
  .open03 .stxt dd span{display: block;}
  .sub-cont02 .inner, .sub-cont03 .inner{padding: 0 5vw;}
  .sub-cont02{padding: 60px 0;}
  .sub1-list>div dl dt{flex: 1.5;}
  .sub1-list>div dl dd{flex: 3;}
  .sub-cont03{padding: 60px 0 120px 0;}
  .cs-w{display: none;}
  }
@media screen and (min-width:1024px) {
  .cs-m{display: none;}
}
@media screen and (min-width:640px) and (max-width:1024px) {
  .cs-w{display: block;}
  .cs-m{display: none;}
}
@media screen and (max-width:768px) {
    .sub-visual>img:nth-of-type(3), .sub-visual>img:nth-of-type(4){display: none;}
    .sub-cont01{padding: 80px 0 40px 0;}
    .charge01, .charge02, .open01, .open02, .open03{padding: 40px 40px 0 40px;}
    .stxt ul{position: relative; bottom: 0; display: inline-block; margin-top: 24px;}
    .sub1-list, .sub-cont03 .panel-body .panel-wrap{margin-bottom: 20px;}
    .sub1-list>div dl dd{flex: 2; }
    .sub-cont03{padding: 40px 0 80px 0;}
    .sub-cont03 .panel-body .panel-wrap{flex-direction: column;}
    .sub-cont03 dl.list-group{display: flex; padding: 40px 0; }
    .sub-cont03 dl.list-group dt{border: none; padding: 0; flex: 1;}
    .sub-cont03 dl.list-group dd{padding: 0; flex: 2.5;}
  }
  @media screen and (max-width:767px) and (min-width:576px){
    .open01, .open02, .open03{padding: 40px;}
    .open01 img, .open02 img, .open03 img{position: absolute; right: 4vw;}
    .open01 img{width: 46%;}
    .open02 img{margin-right: 10px; width: 37%;}
    .open03 img{margin-right: 10px; width: 46%;}
    .open01 .stxt{width: 45%;}
    .open02 dl{width: 60%;}
    .open03 dl dd{width: 69%;}
  }
  @media screen and (max-width:575px) {
    .vs-charge, .vs-open{padding: 10vh 0;}
    .sub-visual>img:nth-of-type(1){width: 65px; bottom: -20px; left: 20%;}
    .sub-visual>img:nth-of-type(2){width: 80px; top: -35px; right: 20%;}
    .vs-charge .stxt strong, .vs-open .stxt strong{font-size: 38px; line-height: 57px;}
    .vs-charge .stxt p, .vs-open .stxt p{font-size: 16px; line-height: 24px; margin-top: 6px;}
    .stxt ul{margin-top: 12px;}
    .sub-cont01 .stxt{text-align: center; margin: 0 auto 1.5vh;}
    dd.ico-free::after{left: calc(50% + 70px);}
    .charge01, .charge02, .open01, .open02, .open03{display: initial;}
    .charge01 img{width: 70%; left: 50%; transform: translateX(-55%);}
    .charge02 img{width: 60%; left: 50%; transform: translateX(-50%);}
    .charge03 .stxt{margin-bottom: 0;}
    .open02 dl{width: 100%;}
    .open02 dl dd{width: 70%; margin: auto;}
    .open03 dl dd{width: 70%; margin: auto;}
    .open01 img{width: 90%; left: 50%; transform: translateX(-55%);}
    .open02 img{width: 80%; left: 50%; transform: translateX(-50%); margin: 0;}
    .open03 img{width: 90%; left: 50%; transform: translateX(-55%); margin: 0;}
    .sub1-list>div dl, .sub-cont03 dl.list-group{font-size: 20px; line-height: 30px;}
    .sub2-list>div::before{width: 60px; height: 60px; }
    .sub2-list>div>dl{padding-left: 76px;}
    .sub1-list>div dl::before{width: 22px; height: 22px;}
    .sub1-list>div dl dt::before{width: 20px; height: 20px;}
    .sub2-list>div>dl dt{font-size: 20px; line-height: 30px; margin-bottom: 6px;}
    .sub2-list>div>dl dd{font-size: 14px; line-height: 21px;}
    .sub-cont03 dl.list-group{padding: 25px 0; }
  }
  @media screen and (max-width:425px) {
    .vs-charge .stxt strong, .vs-open .stxt strong{font-size: 32px; line-height: 48px;}
    .vs-charge .stxt p, .vs-open .stxt p{font-size: 14px; line-height: 21px;}
    .sub-cont01 .stxt{margin: 0 auto 2.5vh;}
    .sub-cont01 .sub-wrap article .stxt dt{font-size: 22px; line-height: 33px;}
    .sub-cont01 .sub-wrap article .stxt dd{font-size: 14px; line-height: 21px;}
    .sub-cont02{padding: 40px 0;}
    dd.ico-free::after{left: calc(50% + 60px); width: 22px; height: 15px;}
    .charge01 img{width: 90%;}
    .charge02 img{width: 80%;}
    .open01 .stxt{width: 100%;}
    .open02 dl dd{width: 90%;}
    .open03 dl dd{width: 85%;}
    .open01 img, .open02 img, .open03 img{width: 90%;}
    .sub1-list>div dl::before{width: 16px; height: 16px; margin-right: 6px;}
    .sub1-list>div dl, .sub-cont03 dl.list-group{font-size: 16px; line-height: 24px;}
    .sub1-list>div dl dt{flex: 2;}
    .sub2-list>div>dl dt{font-size: 16px; line-height: 24px;}
  }
  @media screen and (max-width:360px) {
    .vs-charge .stxt strong, .vs-open .stxt strong{font-size: 26px; line-height: 39px;}
    .vs-charge .stxt p, .vs-open .stxt p{font-size: 12px; line-height: 18px; margin-top: 0;}
    .charge01, .charge02, .open01, .open02, .open03{padding: 24px 24px 0 24px;}
    .charge03{padding: 24px;}
    .open02 img{width: 80%;}
    .sub-visual>img:nth-of-type(1){width: 40px; bottom: -15px;}
    .sub-visual>img:nth-of-type(2){width: 50px; top: -20px; }
    .sub-cont01{padding: 60px 0 30px 0;}
	  .sub-cont01 .sub-wrap article .stxt dd.sm-txt{font-size: 10px; line-height: 15px; margin-top: 4px;}
    dd.ico-free::after{width: 20px; height: 14px; }
    .charge03 img{margin-bottom: 0; transform: scale(0.7);}
    .sub-cont02{padding: 30px 0;}
    .sub1-list>div{padding: 20px 0;}
    .sub1-list>div dl dt::before{width: 16px; height: 16px; margin-right: 6px;}
    .sub-cont03{padding: 30px 0 60px 0;}
    .sub-cont03 dl.list-group{padding: 16px 0;}
    .sub-cont03 dl.list-group dt{padding: 0 5px 0 0;}
  }

/* floating menu */
.floating-menu {
  position: fixed;
  right: 1.5em;
  bottom: 2.5em;
  z-index: 99;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.f-btn {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  line-height: 60px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 768px) {
  .f-btn {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .floating-menu {
    bottom: 1.5em;
  }
}
.go-top {
  display: none;
  background: #333333;
}
.go-top b {
  display: block;
  font-size: 1.3rem;
  font-weight: 400;
}

/******** 개발자 센터 ********/
header .dev h2{
  padding-left: 40px;
}
header .h-wrap.dev{
  padding: 0;
}
header .dev .btn-md {
  right: 50px;
  text-align: center;
  position: absolute;
  background-color: #007aff;
}
header .dev .hp {
  right: 160px;
  background-color: #0047a1;
}
@media screen and (max-width: 650px){
  header .dev .btn-md, .dev .hp {
    display: none;
  }
}
/******* sidebar *******/
.sidebar{
  position: fixed;
  height: 100%;
  width: 260px;
  top: 60px;
  padding-bottom: 60px;
  background-color: white;
}
.menu-box{
  border-bottom: 1px solid #F5F6FA;
}
.sidebar a{
  display: block;
  width: 100%;
}
.sidebar .submenu{
  display: none;
  margin-bottom: 10px;
}
.sidebar .open{
  display: block;
}
.sidebar .menu-title{
  padding: 20px;
  color: #4a4a4a;
}
.submenu .menu-title{
  padding: 10px;
  margin-left: 20px;
  margin-right: 10px;
  border-left: #F5F6FA solid 3px;
  color: #4a4a4a;
}
.sidebar .menu-title.selected{
  color: #007aff;
}
.submenu .selected{
  border-left: #007aff solid 3px;
  color: #007aff;
}
/******** content ********/
.container-dev section {
  scroll-margin-top: 100px;
  overflow: visible;
  grid-column: span 2;
  grid-row: auto;
  width: 100%;
}
.content{
  padding: 50px 50px 50px 350px;
}
.content_inner{
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 20px;
  grid-template-rows: auto;
}
/********* 테이블 ***********/
.table_wrapper{
  border: 1px solid #aaa;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.table_1, .table_2, .table_3{
  table-layout: auto;
  width: 100%;
  border-style: hidden;
}
.table_code{
  table-layout: fixed;
  width: 100%;
  border-style: hidden;
}
.table_code td:first-child, .table_code td:nth-child(3),.table_code th:first-child, .table_code th:nth-child(3){
  text-align: center;
  width: 20%;
}
.table_code td:nth-child(2), .table_code td:nth-child(4),.table_code th:nth-child(2), .table_code th:nth-child(4){
  width: 40%;
}
.table_2 a{
  text-decoration: none;
}
.table_1 th:first-child{
  width: 20%;
}
.tc td:nth-child(3){
  text-align: center;
}
.fc td:nth-child(4){
  text-align: center;
}
.table_1 th, .table_2 th, .table_code th{
  color: #555;
  vertical-align: middle;
  background-color: #f1f1f4;
  text-align: center;
  padding: 10px;
  border: solid 1px #aaa;
  word-break: keep-all;
}
.table_1 td, .table_2 td, .table_3 td, .table_code td{
  color: #555;
  word-break: keep-all;
  vertical-align: middle;
  padding: 10px;
  font-size: 14px;
  border: solid 1px #aaa;
}
.table_2 td:first-child{
  text-align: center;
  width: 24%;
}
.table_2 td:last-child{
  width: 40%;
}
.table_3 td:first-child{
  text-align: center;
  font-family: Pretendard-Bold, sans-serif;
  background-color: #f1f1f4;
  width: 24%;
}
.table_1 span {
  font-family: Pretendard-SemiBold, sans-serif;
}
.table_3 .second{
  text-align: left !important;
  font-family: Pretendard-Regular !important;
  background-color: #fff !important;
  width: auto !important;
}
.table_2 .center, .table_3 .center{
  text-align: center;
  font-family: Pretendard-Regular !important;
  background-color: #fff !important;
  width: auto !important;
}
.col-3 th:first-child{
  width: 20%;
}
.col-3 th:nth-child{
  width: 60%;
}
.col-3 th:last-child{
  width: 20%;
}
/***************************/
.title-1, .title-2, .title-3{
  margin-bottom: 10px;
}
.title-1::after, .title-2::after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #eaeaea;
  margin-top: 10px;
}
.title-1{
  color: #555;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 30px;
  margin-top: 50px;
}
.title-2{
  color: #555;
  font-family: "Pretendard-SemiBold", sans-serif;
  font-size: 25px;
  margin-top: 40px;
  margin-left: 3px
}
.title-3{
  color: #555;
  font-size: 20px;
  margin-top: 20px;
}
.title-4{
  color: #555;
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 5px;
}
.container-dev, .demo{
  font-family: "Pretendard-Regular", sans-serif;
  letter-spacing: 0.5px;
}
.section-content ul{
  padding-bottom: 10px;
}
.section-content li{
  color: #555;
  font-size: 15px;
  padding: 3px 3px 5px 0;
  margin-left: 20px;
  list-style-type: disc;
}
.section-content p{
  color: #555;
  font-size: 15px;
  padding: 5px 3px 5px 3px;
}
.section-content a{
  vertical-align: top;
}
.section-content .note_table{
  font-size: 14px;
  padding: 0 0 0 5px;
  color: #3b82f6;
}
.section-content img{
  outline: solid 1px #555;
}
.alert{
  color: red;
  font-size: 13px;
  padding-bottom: 3px;
  padding-left: 5px;
}
/**** 코드 조각 ****/
.snippet{
  border-radius: 10px;
  transition: all 0.3s ease;
  max-height: 70vh;
}
.content_inner > section{
  grid-column: 1;
  grid-row: auto;
}
.content_inner > .snippet{
  margin-top: 61px;
  margin-bottom: 71px;
  grid-column:2;
  grid-row: auto;
  top: 80px;
  position: sticky;
}
.code-header{
  top: 0;
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2d2d2f;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: solid 1px #ccc;
}
.code-title{
  font-size: 16px;
  top: 0;
  color: #eee;
  display: inline-block;
  margin-left: 10px;
}
.header-right{
  color: white;
  top: 0;
  right: 0;
  font-size: 15px;
  display: inline-block;
  margin-right: 10px;
}
.selLang, .selEnc{
  font-size: 16px;
  color: #eee;
  background: #2d2d2f none;
  border-radius: 6px;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  outline: none;
  margin-right: 20px;
}
.demo-btn{
  display: inline-block;
  color: white;
  background-color: #007aff;
  text-align: center;
  width: 100px;
  padding-top: 10px;
  margin-left: 5px;
  padding-bottom: 10px;
}
.demo-btn img{
  margin-left: 5px;
  display: inline-block;
  outline: none;
}
.code-snippet{
  position: relative;
  max-height: 70vh;
  overflow-y: auto;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.webview-snippet .code-snippet{
  max-height: 30vh;
}
.copy-btn img{
  outline: none;
  display: inline-block;
  pointer-events: none;
}
.code-snippet::-webkit-scrollbar-track{
  background-color: #272822;
  border-bottom-right-radius: 10px;
}
.code-snippet::-webkit-scrollbar-thumb{
  border: none;
}
.code-snippet::-webkit-scrollbar{
  height: 10px;
}
pre[class*=language-]::-webkit-scrollbar-track {
  background-color: #272822;
  border-bottom-right-radius: 10px;
 }
pre[class*=language-]::-webkit-scrollbar-thumb{
  border: none;
}
pre[class*=language-]::-webkit-scrollbar{
  height: 10px;
}
/*****************/
.sidebar.show{
  transform: translate(0);
}
.sidebar-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

@media screen and (max-width: 1400px) {
  .container-dev section, .snippet{
    grid-column: span 1;
    display: block;
    width: 100%;
    height: 100%;
  }
  section.ee{
    display: none;
  }
  .content{
    padding: 50px 30px 50px 30px;
  }
  .content_inner{
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    grid-auto-flow: row;
    width: 100%;
  }
  .content_inner > .snippet{
    margin-top: 20px;
    grid-column: span 1;
    margin-bottom: 50px;
  }
  .snippet .code-snippet{
    max-height: 40vh;
  }
  .webview-snippet .code-snippet{
    max-height: 30vh;
  }
  header .dev h2{
    padding-left: 70px;
  }
  header .dev .gnb-m {
    display: block; height: 100%;
  }
  header .dev .gnb-m .hambar {
    position: absolute; left: 20px; width: 24px; top: 50%; transform: translateY(-50%); cursor: pointer;
  }
  header .dev .gnb-m .hambar span {
    display: block; width: 100%; height: 2px; background-color: #333;box-sizing: border-box;border-radius: 3px; transition: .2s;
  }
  header .dev .gnb-m .hambar span:nth-last-of-type(2){
    margin: 5px 0;
  }
  .sidebar{
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 10;
  }
}
@media (max-width: 640px) {
  .content{
    padding: 0 10px 50px 10px;
  }
  .title-1{
    font-size: 27px;
  }
  .table_1 td, .table_2 td, .table_3 td, .table_code td, .table_1 th, .table_2 th, .table_code th {
    word-break: break-all;
    font-size: 13px;
    padding: 4px;
  }
  .section-content .note_table{
    font-size: 13px;
  }
  .code-title, .selLang, .selEnc, .section-content p, .section-content li{
    font-size: 14px;
    margin-right: 0;
  }
  .code-header{
    padding: 2px;
  }
  pre[class*=language-]::-webkit-scrollbar{
    height: 5px;
  }
  .code-snippet::-webkit-scrollbar{
    width: 5px;
  }
}