@charset "utf-8";

html,
body{padding:0 !important;margin:0 !important;overflow-x:hidden}
.wrapper{position:relative;width:1920px;margin:0 auto;overflow:hidden}
.wrapper *{font-family:var(--font-family-Pretendard)}
.wrapper .section{position:relative}

.wrapper .section01{}
.wrapper .section01 .bg{position:relative}
.wrapper .section01 .bg .layer{position:absolute;display:flex;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%, -50%)}
.wrapper .section01 .bg .layer img{width:calc(100% / 2)}
.wrapper .section01 .txtCont{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center}
.wrapper .section01 .txtCont .aniBox{opacity:0}
.wrapper .section01 .txtCont strong{font-family:var(--font-family-paybooc);font-weight:700;line-height:44px;font-size:36px;color:#2d61ff}
.wrapper .section01 .txtCont h1{display:block;font-family:var(--font-family-Play);font-weight:700;line-height:120px;margin-top:14px;font-size:100px;color:#fff}
.wrapper .section01 .txtCont p{font-weight:700;line-height:52px;margin-top:21px;font-size:40px;color:#fff}
.wrapper .section01 .scroll{position:absolute;bottom:10%;left:50%;transform:translateX(-50%)}
.wrapper .section01 .scroll span{display:block;width:4px;height:40px;transform-origin:top;transform:scaleY(1);transition:height 0.1s ease-out;background:#fff}
.wrapper .section01.active .bg .layer{}
.wrapper .section01.active .bg .layer .left{animation:fade-left 1s .3s forwards}
.wrapper .section01.active .bg .layer .right{animation:fade-right 1s .3s forwards}
.wrapper .section01.active .txtCont .aniBox{animation:show-up 1s 0.5s forwards;opacity:0}

.wrapper .section02{background:#111}
.wrapper .section02 .inner{width:1300px;padding:110px 0;margin:0 auto}
.wrapper .section02 .inner strong{font-family:var(--font-family-paybooc);font-weight:700;line-height:96px;font-size:66px;color:#fff}
.wrapper .section02 .inner strong span{color:#2d61ff}
.wrapper .section02 .inner .imgCont{margin-top:80px}
.wrapper .section02 .inner p{font-weight:400;line-height:54px;margin-top:50px;font-size:36px;color:#fff}

.wrapper .section03{background:#040506}
.wrapper .section03 .inner{position:relative;width:1300px;padding:222px 0 450px;margin:0 auto}
.wrapper .section03 .inner .tit{}
.wrapper .section03 .inner .tit strong{font-family:var(--font-family-paybooc);font-weight:700;line-height:96px;font-size:66px;color:#fff}
.wrapper .section03 .inner .tit strong span{color:#2d61ff}
.wrapper .section03 .inner .imgCont{position:absolute;width:1110px;height:1110px;top:50%;left:50%;transform:translate(-50%, -50%)}
.wrapper .section03 .inner .imgCont .absolute{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.wrapper .section03 .inner .imgCont .absolute:nth-of-type(1){left:25.8%}
.wrapper .section03 .inner .imgCont .absolute:nth-of-type(2){left:37.8%}
.wrapper .section03 .inner .imgCont .move{position:absolute;width:1178px;height:1178px;top:-34px;left:-34px;transform-origin:center center;animation:orbit 10s linear infinite}
.wrapper .section03 .inner .imgCont .move .ani{position:absolute;top:0;left:50%;transform:translateX(-50%)}
.wrapper .section03 .inner .overlap{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;width:1110px;margin:142px auto 0}
.wrapper .section03 .inner .overlap li{position:relative;width:calc(100% / 4);height:300px;padding:81px 0 0 56px}
.wrapper .section03 .inner .overlap li::before{content:'';position:absolute;width:300px;height:300px;top:50%;left:50%;transform:translate(-50%, -50%);border:1.2px solid #808c98;border-radius:100%}
.wrapper .section03 .inner .overlap li:nth-of-type(1)::before{left:54%}
.wrapper .section03 .inner .overlap li:nth-of-type(4)::before{left:46%}
.wrapper .section03 .inner .overlap li > *{position:relative;display:block;font-weight:700;line-height:30px;font-size:20px;color:#fff;z-index:10}
.wrapper .section03 .inner .overlap li span{position:absolute;width:299px;height:299px;top:50%;left:50%;transform:translate(-50%, -50%);background:#0c101b;border-radius:100%;z-index:-1;opacity:0;animation:flicker-type2 8s infinite;z-index:9}
.wrapper .section03 .inner .overlap li:nth-of-type(1) span{left:54%}
.wrapper .section03 .inner .overlap li:nth-of-type(4) span{left:46%}
.wrapper .section03 .inner .overlap li strong{}
.wrapper .section03 .inner .overlap li p{margin-top:36px}
.wrapper .section03 .inner .overlap li b{display:block;margin-top:16px;color:#2d61ff}

.wrapper .section03.active .inner .overlap li:nth-of-type(1) span{animation-delay:0s}
.wrapper .section03.active .inner .overlap li:nth-of-type(2) span{animation-delay:2s}
.wrapper .section03.active .inner .overlap li:nth-of-type(3) span{animation-delay:4s}
.wrapper .section03.active .inner .overlap li:nth-of-type(4) span{animation-delay:6s}

.wrapper .section04{background:url('../../../img/content/domestic/section04-bg01.png') no-repeat center}
.wrapper .section04 .inner{width:1300px;margin:0 auto}
.wrapper .section04 .inner strong{display:block;font-family:var(--font-family-paybooc);font-weight:700;line-height:44px;padding-top:110px;font-size:66px;color:#fff}
.wrapper .section04 .inner ul{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;padding:180px 0 130px;margin:0 -20px}
.wrapper .section04 .inner ul li{position:relative;margin:20px}
.wrapper .section04 .inner ul li .basic,
.wrapper .section04 .inner ul li .hover{display:block;width:100%;transition:opacity 0.3s ease, transform 0.3s ease;backface-visibility:hidden;will-change:opacity, transform}
.wrapper .section04 .inner ul li .hover{position:absolute;top:0;left:0;opacity:0;transform:translateY(0)}
.wrapper .section04 .inner ul li:hover .hover{opacity:1;transform:translateY(-3px)}
.wrapper .section04 .inner ul li:hover .basic{opacity:0}

@media screen and (max-width: 1300px)
{
    .wrapper{padding-top:66px}

    .wrapper .section01{background:url('../../../img/content/domestic/section01-mo-img01.png') no-repeat center;background-size:100%}
    .wrapper .section01 .bg{display:none}
    .wrapper .section01 .txtCont{position:relative;inset:0 !important;padding:88px 20px;transform:none}
    .wrapper .section01 .txtCont strong{line-height:20px;font-size:16px}
    .wrapper .section01 .txtCont h1{line-height:36px;margin-top:8px;font-size:30px}
    .wrapper .section01 .txtCont p{line-height:24px;margin-top:24px;font-size:18px}
    .wrapper .section01 .scroll{display:none}

    .wrapper .section02 .inner{padding:30px 16px 60px}
    .wrapper .section02 .inner strong{display:block;line-height:30px;font-size:26px}
    .wrapper .section02 .inner .imgCont{margin-top:26px;text-align:center}
    .wrapper .section02 .inner .imgCont img{width:100%}
    .wrapper .section02 .inner p{line-height:18px;margin-top:28px;font-size:12px}

    .wrapper .section03 .inner{padding:0 16px;overflow-x:scroll;scrollbar-width:none;background:url('../../../img/content/domestic/section03-mo-circle01.png') no-repeat center;background-size:100%}
    .wrapper .section03 .tit{position:absolute;top:30px;left:16px;z-index:10}
    .wrapper .section03 .tit strong{line-height:30px;font-size:24px;color:#fff}
    .wrapper .section03 .tit strong span{color:#2d61ff}
    .wrapper .section03 .imgCont{display:none}
    .wrapper .section03 .inner .overlap{width:calc(100% + (100% / 7));padding:146px 0 116px;margin:0 16px}
    .wrapper .section03 .inner .overlap li{width:98px;height:98px;flex-basis:calc(50% - 10px);padding:21px 18px;margin:-10px;text-align:center}
    .wrapper .section03 .inner .overlap li > *{line-height:18px;font-size:12px}
    .wrapper .section03 .inner .overlap li::before{width:128px;height:128px;top:50% !important;left:50% !important}
    .wrapper .section03 .inner .overlap li span{width:128px;height:128px;top:50% !important;left:50% !important}

    .wrapper .section04{background:url('../../../img/content/domestic/section04-mo-bg01.png') no-repeat center;background-size:100%}
    .wrapper .section04 .inner{padding:30px 16px}
    .wrapper .section04 .inner strong{display:block;line-height:32px;padding:0;font-size:26px}
    .wrapper .section04 .inner ul{justify-content:center;padding:0;margin:40px auto 0}
    .wrapper .section04 .inner ul li{margin:10px;flex-basis:calc(50% - 20px)}
}

@media screen and (max-width: 480px)
{
    .wrapper .section03 .inner .overlap li{flex-basis:100%}
}

@media screen and (max-width: 320px)
{
    .wrapper .section05 .inner ul li span,
    .wrapper .section05 .inner ul li p{display:block;width:100%;margin:0;text-align:center}
    .wrapper .section05 .inner ul li p{margin-top:10px}
}