@charset 'utf-8';
@import url("/assets/blockchain/plugins/font-awesome/css/font-awesome.min.css");
@import url("/assets/blockchain/plugins/font-awesome/css/font-awesome.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --primary: #6F63CE;
    --secondary: #A694F9;

    --white: #fff;
    --grayf3: #F3ECFF;
    --graye4: #E4E5E7;
    --gray90: #909090;
    --gray33: #333;
    --gray0e: #0E0E0E;
    --black: #000;

    --white-rgb: 255,255,255;
    --grayf3-rgb: 243,236,255;
    --black-rgb: 0,0,0;

    --opacity09: 0.09;
    --opacity24: 0.24;
    --opacity44: 0.44;
    --opacity80: 0.80;

}

body { font-family:'Poppins'; }
#root { position:relative; width:100%; min-width: 320px; min-height:100vh; background-color: var(--graye4); }

/* logo */
.logo_wrap { position:sticky; top: 10px; display:flex; align-items:center; width: 98%; padding: 10px 2%; margin: 0 auto; border: 1px solid rgba(var(--white-rgb), var(--opacity80)); border-radius: 16px; background-color: rgba(var(--grayf3-rgb), var(--opacity24)); box-shadow: 1px 1px 2px rgba(var(--black-rgb), var(--opacity09)); backdrop-filter: blur(4px); color: var(--gray0e); z-index: 9999; }
.logo_wrap h1 a { display:flex; align-items:center; }
.logo_wrap h1 a img { width:36px; height:36px;}
.logo_wrap h1 a .web_title { display:block; margin-left:12px; font-size:0.925em; line-height:1.375em; font-weight:300; color: var(--gray33); text-align:left; transform:translateY(2px); }
.logo_wrap h1 a .web_title .b { display:block; font-size:1.5em; color: var(--primary);  }

/* sidebar menu -- header*/
header { position:fixed; -webkit-position:sticky; top:0; left:1%; z-index:9000; width:350px; height:calc(100vh - 105px); margin-top: 90px; border: 1px solid rgba(var(--white-rgb), var(--opacity80)); border-radius: 16px; background-color: rgba(var(--grayf3-rgb), var(--opacity24)); box-shadow: 1px 1px 2px rgba(var(--black-rgb), var(--opacity09)); backdrop-filter: blur(4px); color: var(--gray0e); transition:width 0.5s ease-in-out; }
header .header_wrap { width:100%; height:100%; padding: 25px 14px; overflow-y:auto}
.mobile_header_wrap{display:none}
header .header_wrap::-webkit-scrollbar,
header .header_wrap::-webkit-scrollbar-track { background: transparent !important; -webkit-box-shadow: none;  }




    /* sidebar open, hidden */
.shrink header{width:0; border: 0; }
.shrink #container{margin-left:0 }
.shrink .content_wrap {padding-left: 50px; }
.header_wrap,
nav{transition: opacity 0.3s 0.2s;}
.shrink .header_wrap,
.shrink nav{opacity:0; pointer-events:none; transition-delay:0s; /*overflow-y:auto*/}


    /* nav btn */
.shrink-btn{display:block; position:absolute; top:17px; right:30px; width:25px; height:25px; background: transparent; border-radius:0 13px 13px 0; cursor:pointer; transition:all 0.3s ease-in-out; z-index: 99;}
.shrink-btn .line{display:block; width:100%; height:2px; margin:6px auto; background: var(--primary); transition:all 0.2s ease-in-out}

/* shrink button 클릭 시 메뉴 모양
.shrink-btn:hover .line{border-radius:2px;}
.shrink-btn:hover .line:nth-child(1){width:70%; transform: translateX(-5px) translateY(1px) rotate(-45deg);}
.shrink-btn:hover .line:nth-child(3){width:70%; transform: translateX(-5px) translateY(-1px) rotate(45deg);}

.shrink .shrink-btn:hover .line{border-radius:2px;}
.shrink .shrink-btn:hover .line:nth-child(1){width:70%; transform: translateX(5px) translateY(1px) rotate(45deg);}
.shrink .shrink-btn:hover .line:nth-child(3){width:70%; transform: translateX(5px) translateY(-1px) rotate(-45deg);}
*/

    @media all and (max-width:1500px){

    }
    @media all and (max-width:1120px){
        header{position:absolute; width:0; border:0; } 
        .shrink header{ width:98%; background-color: initial; box-shadow: none; }
        .header_wrap,
        nav{opacity:0;}
        .shrink .header_wrap,
        .shrink nav{opacity:1; pointer-events:auto;}

        .logo_wrap h1 a .web_title { font-size:1em; line-height:1.2em }
        .logo_wrap h1 a .web_title .b { display: inline-block; margin-right: 8px; }

        .shrink-btn{ top:12px; }
        .shrink .shrink-btn .line:nth-child(1) { width:100%; transform: translateX(-0) translateY(8px) rotate(-45deg); }
        .shrink .shrink-btn .line:nth-child(3) { width:100%; transform: translateX(-0) translateY(-8px) rotate(45deg); }
        .shrink .shrink-btn .line:nth-child(2) { opacity:0 }

/*
        .shrink-btn{top:15px; right:-70px; z-index:999999; width:24px; height:50px; padding:12px 0; background:0 none; }
        .shrink-btn .line{background:#334155}
        .shrink .shrink-btn{right:20px;}

        .shrink-btn:hover .line:nth-child(1){width:70%; transform: translateX(5px) translateY(2px) rotate(45deg);}
        .shrink-btn:hover .line:nth-child(3){width:70%; transform: translateX(5px) translateY(-2px) rotate(-45deg);}

        .shrink .shrink-btn .line:nth-child(1){width:100%; transform: translateX(-0) translateY(7px) rotate(-45deg);}
        .shrink .shrink-btn .line:nth-child(3){width:100%; transform: translateX(-0) translateY(-7px) rotate(45deg);}
        .shrink .shrink-btn .line:nth-child(2){opacity:0}
        .shrink .shrink-btn:hover .line:nth-child(1){width:70%; transform: translateX(-5px) translateY(1px) rotate(-45deg);}
        .shrink .shrink-btn:hover .line:nth-child(3){width:70%; transform: translateX(-5px) translateY(-1px) rotate(45deg);}
        .shrink .shrink-btn:hover .line:nth-child(2){opacity:1}
*/
    }
    @media all and (max-width:750px){
        /*.shrink-btn{top:15px; right:-50px; border-radius:0 7px 7px 0; }*//*
        .shrink-btn{left:auto; height:40px; padding:7px 0; }
        a.shrink .shrink-btn{right:30px;}
*/


        header { height:calc(100vh - 70px); margin-top: 70px; }
        .shrink header { width:100%; }
        .shrink-btn { top: 10px; right: 20px; }

        .logo_wrap { top: 16px; width: calc(100% - 30px); }
        .logo_wrap h1 a img { width: 28px; height: 28px }
        .logo_wrap h1 a .web_title { margin-left: 8px; }
    }

/*
    @media all and (max-width:400px){
        .shrink header{width:100%; }
        .shrink .shrink-btn{right:20px;}
        
    }
*/

/* nav */
.nav_wrap .nav_1dep > a{display:flex; align-items:center; position:relative; padding:10px 30px 10px 10px; margin-bottom: 10px; border-radius: 16px; background-color: rgba(166,148,249,0.24); line-height:20px; letter-spacing: -0.65px; font-size: 15px; font-weight:500; transition:all 0.25s}
/*.nav_wrap .nav_1dep > a.active { color: var(--primary); }*/
/*
.nav_wrap .nav_1dep > a::after{display:block; position:absolute; bottom:-11px; left:0; width:90%; height:1px; margin:0 auto; background:url(../img/common/nav_line.svg) repeat-x; transform:translateX(5%); content:"" }
.nav_wrap .nav_1dep.nav_1dep_commu > a::after{bottom:-6px}
*/
/*.nav_wrap .nav_1dep:hover > a { color: var(--primary); }
.nav_wrap .nav_1dep:hover > a.active { color: var(--primary); }*/
.nav_wrap .nav_1dep_api br{display:none}
    /* nav commuity */
/* .nav_wrap .nav_1dep_commu > a::after{display:none} */
/*
.nav_wrap .nav_1dep_commu{margin:0 0 50px; padding:6px 0;}
.nav_wrap .nav_1dep_commu > a{padding:10px }
.nav_wrap .nav_1dep_commu > a.active{background:#e0e4f5; color:#1e1e1e}
.nav_wrap .nav_1dep_commu:hover > a.active{color:#1e1e1e}
*/
    /* nav arrow */
.nav_wrap .nav_1dep > a::before {display:block; position:absolute; top:50%; right:14px; width:12px; height:10px; margin-top:-5px; background:url(../img/common/nav_downopen.svg) no-repeat 50% 50%; background-size: 15px auto; transform:rotate(0deg); transition:all 0.3s; content:""; }
/*.nav_wrap .nav_1dep:hover > a::before{background:url(../img/common/nav_arr_hover.svg) no-repeat 50% 50%; background-size:15px auto; transform:rotate(90deg)}*/
.nav_wrap .nav_1dep > a.nav_on::before{transform:rotate(-180deg)}
/*
.nav_wrap .nav_1dep:hover > a.nav_on::before{transform:rotate(-90deg)}

.nav_wrap .nav_1dep > a.active::before{ transform:rotate(180deg); }
.nav_wrap .nav_1dep > a.active.nav_on::before{transform:rotate(90deg)}
.nav_wrap .nav_1dep:hover > a.active::before{transform:rotate(-90deg)}
.nav_wrap .nav_1dep:hover > a.active.nav_on::before{transform:rotate(90deg)}
*/

.nav_wrap .nav_1dep.nav_1dep_intro > a::before,
.nav_wrap .nav_1dep.nav_1dep_roadmap > a::before { transform:rotate(-90deg); }

/*.nav_wrap .nav_1dep.nav_1dep_commu > a::before{height:10px; background:url(../img/common/nav_arr_gray.svg) no-repeat 50% 50%; background-size:15px auto; transform:rotate(0)}*/
/*.nav_wrap .nav_1dep.nav_1dep_commu:hover > a::before{background:url(../img/common/nav_arr_hover.svg) no-repeat 50% 50%; background-size:15px auto; transform:rotate(0)}*/
/*.nav_wrap .nav_1dep.nav_1dep_commu > a.active::before{background:url(../img/common/nav_arr.svg) no-repeat 50% 50%; background-size:15px auto; transform:rotate(0)}*/

    /* nav icon */
.nav_wrap .nav_1dep a .side_icon{width:30px; height:30px; padding:5px; transition:all 0.3s; opacity: 0.95; }

.nav_wrap .nav_1dep_intro a .side_icon{background:url(../img/common/nav_intro2.svg) no-repeat 50% 49%; background-size:auto 20px}
.nav_wrap .nav_1dep_start a .side_icon{background:url(../img/common/nav_start2.svg) no-repeat 50% 49%; background-size:auto 22px}
.nav_wrap .nav_1dep_api a .side_icon{background:url(../img/common/nav_api2.svg) no-repeat 50% 49%; background-size:auto 23px}
.nav_wrap .nav_1dep_commu a .side_icon{background:url(../img/common/nav_commu.svg) no-repeat 50% 50%; background-size:auto 19px}
.nav_wrap .nav_1dep_mirena a .side_icon{background:url(../img/common/nav_mirena.svg) no-repeat 50% 50%; background-size:auto 19px}
.nav_wrap .nav_1dep_key a .side_icon{background:url(../img/common/nav_key.svg) no-repeat 50% 50%; background-size:auto 19px}
.nav_wrap .nav_1dep_blockchain a .side_icon{background:url(../img/common/nav_block.svg) no-repeat 50% 50%; background-size:auto 19px}
.nav_wrap .nav_1dep_protocol a .side_icon{background:url(../img/common/nav_protocol.svg) no-repeat 50% 50%; background-size:auto 19px}
.nav_wrap .nav_1dep_roadmap a .side_icon{background:url(../img/common/nav_roadmap.svg) no-repeat 50% 50%; background-size:auto 19px}

.nav_wrap .nav_1dep_intro:hover a .side_icon{background:url(../img/common/nav_intro2_on.svg) no-repeat 50% 49%; background-size:auto 20px}
.nav_wrap .nav_1dep_start:hover a .side_icon{background:url(../img/common/nav_start2_on.svg) no-repeat 50% 49%; background-size:auto 22px}
.nav_wrap .nav_1dep_api:hover a .side_icon{background:url(../img/common/nav_api2_on.svg) no-repeat 50% 49%; background-size:auto 23px}
.nav_wrap .nav_1dep_commu:hover a .side_icon{background:url(../img/common/nav_commu_hover.svg) no-repeat 50% 50%; background-size:auto 19px}

.nav_wrap .nav_1dep_intro a.active .side_icon{background:url(../img/common/nav_intro2_on.svg) no-repeat 50% 49%; background-size:auto 20px}
.nav_wrap .nav_1dep_start a.active .side_icon{background:url(../img/common/nav_start2_on.svg) no-repeat 50% 49%; background-size:auto 22px}
.nav_wrap .nav_1dep_api a.active .side_icon{background:url(../img/common/nav_api2_on.svg) no-repeat 50% 49%; background-size:auto 23px}
.nav_wrap .nav_1dep_commu a.active .side_icon{background:url(../img/common/nav_commu.svg) no-repeat 50% 50%; background-size:auto 19px}

.nav_wrap .nav_1dep_mirena:hover a .side_icon,
.nav_wrap .nav_1dep_mirena a.active .side_icon{background:url(../img/common/nav_mirena_on.svg) no-repeat 50% 50%; background-size:auto 19px}
.nav_wrap .nav_1dep_key:hover a .side_icon,
.nav_wrap .nav_1dep_key a.active .side_icon{background:url(../img/common/nav_key_on.svg) no-repeat 50% 50%; background-size:auto 19px}
.nav_wrap .nav_1dep_blockchain:hover a .side_icon,
.nav_wrap .nav_1dep_blockchain a.active .side_icon{background:url(../img/common/nav_block_on.svg) no-repeat 50% 50%; background-size:auto 19px}
.nav_wrap .nav_1dep_protocol:hover a .side_icon,
.nav_wrap .nav_1dep_protocol a.active .side_icon{background:url(../img/common/nav_protocol_on.svg) no-repeat 50% 50%; background-size:auto 19px}
.nav_wrap .nav_1dep_roadmap:hover a .side_icon,
.nav_wrap .nav_1dep_roadmap a.active .side_icon{background:url(../img/common/nav_roadmap_on.svg) no-repeat 50% 50%; background-size:auto 19px}



    /* nav 2depth */
.nav_wrap .nav_2dep{padding:10px 0;}
.nav_wrap .nav_1dep_api .nav_2dep{display:none;}
.nav_wrap .nav_2dep li{padding:2px 0}
.nav_wrap .nav_2dep li a{display:block; width:100%; padding:10px 16px; font-size:14px; line-height:20px; color: var(--gray33);  transition:all 0.3s}
.nav_wrap .nav_2dep li a:hover{/*background:url(../img/common/nav_2dep_bullet_hover.svg) no-repeat 20px 15px; background-size:6px;*/ color: var(--gray0e); }
.nav_wrap .nav_2dep li a.active { border-radius: 12px; background-color: rgba(var(--white-rgb), var(--opacity44)); color: var(--gray0e); }

#nav_back{display:none; position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background:rgba(243,236,255,0.8); z-index:100}

    @media all and (max-width:1500px){
        .nav_wrap .nav_1dep a .side_icon{width:20px; margin-right:5px}
        .nav_wrap .nav_1dep > a::before{right:16px}
        /*.nav_wrap .nav_1dep > a::after{width:96%; transform:translateX(1.5%)}*/
    }
    @media all and (max-width:300px){
        .nav_wrap .nav_1dep_api br{display:block}
    }

/* footer */
footer { width:100%; padding:30px 100px; border-top:0px solid var(--gray03); }
footer .copy { font-size:1em; color: var(--gray90); text-align: center; }

#top{display:block; position:fixed; right:10px; bottom:30px; width:50px; height:50px; background:#fff url(../img/common/top_arr.svg) no-repeat 50% 50%; background-size:16px auto; border:1px solid #f1f1f1; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; text-indent:-9999px; transition:all 0.3s}
#top:hover{background:#f1f1f1 url(../img/common/top_arr.svg) no-repeat 50% 50%; background-size:16px auto;}

@media all and (max-width:1120px){
    footer { padding: 20px 40px }
    footer .copy { font-size: 0.9375em; }
}