/* 기타요소 */
        /* 드래그 */
        ::selection{
            background-color: var(--color-point);
            color: white;
        }
        /* 마우스 */
        /* .cur{
            position: fixed;
            z-index: 101;
            border-radius: 50%;
            top: 0;left: 0;
            transform: translate(-50%,-50%);
            pointer-events: none;
            width: 10px; height: 10px;
            background-color: var(--color-point);
        }
        
        .cur.active{background-color: white; transition: 0.3s;}
        .cur.none{display: none;}
        .cur.plus{
            width: 70px; height: 70px; transition: 0.5s;
            z-index: 99; opacity:1;
            background-color: white;
            mix-blend-mode: difference;
        } */

        .bg_cursor {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            z-index: 1;
            border-radius: 50%;
            /* background-image: url(img/espoir.jpg); */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            transition: 0.3s;
        }
        /* .section3 .bg_cursor{background-image: url(img/valluat.png);}
        .section4 .bg_cursor{background-image: url(img/holt.jpg);}
        .section5 .bg_cursor{background-image: url(img/osulloc.png);}
        .section6 .bg_cursor{background-image: url(img/vilang.jpg);}
        .section7 .bg_cursor{background-image: url(img/barbie.jpg);} */

        .bg_cursor.active{
            width: 200px; height: 200px;
        }
        .bg_cursor.none{
            display: none;
        }


        /* 인디 */
        .elip{
            width: 50px; height: 250px;
            border-radius: 175px 0 0 175px;
            border: 2px solid var(--color-point);
            position: fixed;
            top: 50%; right: 0;
            z-index: 70;
            transform: translateY(-50%);
            transition: 0.5s;
            background-color: rgba(255,255,255,0.2);
        }
        .elip.white{background-color: white;}

        .fp-watermark{display: none;}
        #fp-nav{z-index: 80;}
        #fp-nav ul li a span{
            background-color: transparent;
            border: 2px solid var(--color-point);
        }
        #fp-nav.black ul li a span{
            border: 1px solid #333;
        }
        #fp-nav ul li a.active span::before{
            content: '';
            width: 8px; height: 8px;
            background-image: url(./img/twink.png);
            display: block;
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%,-50%);
            background-size: contain;
            animation: indiani 1s infinite;
        }
        #fp-nav.black ul li a.active span::before{
            filter: invert(1);
        }
        @keyframes indiani{
            0%{transform: translate(-50%,-50%) rotate(0);}
            100%{transform: translate(-50%,-50%) rotate(360deg);}
        }

        /* 햄버튼 */
        .ham-btn{
            position: fixed; right: 0px; top: 30px;
            width: 70px; height: 70px;
            z-index: 100;
            cursor: pointer;
        }
        .ham-btn .bar{
            position: absolute; top: 50%; left:calc(50% - 15px);
            width: 30px; height: 1px;
            background-color: white;
            transition: 0.5s;
        }
        .ham-btn .bar1{transform: translate(0,-6px);}
        .ham-btn .bar2{transform: translate(0,6px);}
        .ham-btn.black .bar{background-color: #fff;}
        .ham-btn.white .bar{background-color: white;}
        .ham-btn.active .bar{background-color: white;}
        .ham-btn.active .bar1{transform: translate(0) rotate(45deg);}
        .ham-btn.active .bar2{transform: translate(0) rotate(-45deg);}

        /* 페이지확인 */
        .page-num{
            position: fixed;
            top: 50%; left: 30px;
            transform: translateY(-50%);
            z-index: 80;
        }
        .page-num .bg{
            width: 8px; height: 300px;
            border: 2px solid var(--color-point);
            border-radius: 10px;
            background-color: rgba(255,255,255,0.2);
        }
        .page-num .color{
            position: absolute; top: 0; left: 50%;
            transform: translateX(-50%);
            width: 6px; height:100px;
            background-color: var(--color-point);
            transition: 0.5s;
            border-radius: 10px;
        }
        .page-num.white .bg{border-color: white;}
        .page-num.white .color{background-color: white;}

        /* 사이트맵 */
        .list{
            position: fixed;
            top: 0; left: 0; z-index: 90;
            width: 100%; height: 100%;
            background-color: #d96236;
            display: none;
            color:white;
        }
        .list h2{
            margin-left: 100px;
            margin-top: 50px;
        }
        .list ul{
            position: absolute;
            top: 50%;
            left: 100px;
            transform: translateY(-50%);
            font-size: 60px;
            line-height: normal;
            font-weight: 100;
        }
        .list span{font-size: 20px; margin-left: 20px; color: #fff;}
        .list li:hover{
            font-style: italic;
        }
        .list li:hover::before{
            content:'';
            width: 30px; height: 30px;
            background:url(img/twink30.png);
            position: absolute;
            top: 50%; right: 100%;
            transform: translateY(-50%);
            filter: invert(1);
            display: block;
            animation: indiani 1s infinite;
        }
        
        .list-line{
            background-color: white;
            position: fixed;
            z-index: 90;
            left: 0;
            transition: 0.5s;
        }
        .ll1{
            width: 100%;
            height: 1px;
            top: 30px;
        }
        .ll2{
            width: 100%;
            height: 1px;
            bottom: 30px;
        }
        .ll3{
            width: 1px;
            height: 100%;
            top: 0;
            left: 70px;
        }
        .ll4{
            width: 1px;
            height: 100%;
            top: 0;
            left: 1000px;
        }
        /* 버튼 */
        .btn-group{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 8px;
        }
        .btn{
            width: 200px;
            border: 1px solid;
            font-size: 1.4rem;
            padding: 8px 0;
            margin-top: 8px;
            overflow: hidden;
        }
        .btn::before{
            content: '';
            position: absolute;
            top: 0;
            right: 100%;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        .btn:hover span{
            color: var(--color-point);
            font-weight: 700;
            transition: 0.5s 0.1s;
        }
        .btn:hover::before{
            right: 0;
            transition: 0.5s;
        }