@charset "UTF-8";
/* 251023 */
body {
    /* background-color: white; */
    background-color: #f7f7f5;
    /* transition: background-color 0.8s ease, color 0.8s ease; */
}
body.enable-transition {
    transition: background-color 0.8s ease-in-out, color 0.8s ease;
    /* background-color: white; */
}
body.dark-mode {
    transition: background-color 0.6s ease-in-out, color 0.6s ease;
    background-color: #171819;
    color: white;
}
body.white-mode {
    background-color: #f7f7f5;
    transition: background-color 0.6s ease-in-out, color 0.6s ease;
}
body.dark-mode .main_page {
    /* background-color:#171717; */
    transition: background-color 0.6s ease-in-out, color 0.6s ease;
}
body.white-mode .main_page {
    background-color:#f7f7f5;
    transition: background-color 0.6s ease-in-out, color 0.6s ease;
}
body.dark-mode .container {
    /* background-color:#171717; */
    /* background:rgba(25, 2, 30, 0.1); */
    transition: background-color 0.6s ease-in-out, color 0.6s ease;
}
body.white-mode .container {
    background-color:#f7f7f5;
    transition: background-color 0.6s ease-in-out, color 0.6s ease;
}
/* header */
body.enable-transition .odh-logo-1 svg text {
    stroke:rgb(0,0,0);
    /* animation:textAnimate3 5s infinite alternate;  */
}
body.dark-mode .odh-logo-1 svg text {
    stroke:rgb(255,255,255);
    animation:textAnimate2 5s infinite alternate; 
}
body.dark-mode .new_stk a {color:rgba(255 255 255 / 85%)}
body.dark-mode .new_stk a:hover {color:rgba(255 255 255 / 100%)}
body.dark-mode .codrops-demos {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.10),
        rgba(255, 255, 255, 0.03)
    );
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        inset 0 -1px 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px) saturate(160%);
}
body.dark-mode .codrops-demos a {
    color:rgba(255 255 255 / 50%);
    /* background: linear-gradient( 135deg, rgba(246, 236, 255, 0.95) 0%, rgba(227, 204, 238, 0.78) 35%, rgba(227, 182, 240, 0.72) 70%, rgba(45, 44, 45, 0.92) 100% );
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 1px 6px rgba(215, 156, 255, 0.08), 0 1px 2px rgba(255, 255, 255, 0.18); */
}
body.dark-mode .codrops-demos a:hover {color:rgba(255 255 255 / 100%)}
/* body.dark-mode .codrops-demos a::after {
    background:rgba(240,6,6,0.2)
} */
body.dark-mode .codrops-demos a:hover::after {
    background:rgba(220, 235, 15, 0.5)
}

/* main */
body.dark-mode #newversion button + .panel, body.dark-mode #examples-1 .ex3 .accordion + .panel {
    color:rgba(255 255 255 / 90%)
}
body.dark-mode .container .illustration-editor-wrap {
    /* background:linear-gradient(rgb(28, 28, 28) 0%, rgb(23, 23, 23) 100%); */
    /* transition: ease-in-out .2s; */
}
body.dark-mode .container .illustration-editor-wrap .code {
    /* max-width:100%; */
    padding:1rem;
}

body.white-mode .container .illustration-editor-wrap {
    transition: ease-in-out .3s;
}
body.dark-mode .container .main_page h1 {
    color:#fff
}
body.dark-mode .container .main_page h1 + p {
    color:rgba(255 255 255/ 70%)
}
body.dark-mode .container .main_page h2 {
    background: none !important;
    background-clip: border-box;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: initial !important;
    text-shadow: none !important;
    color: #fff !important;
}
body.dark-mode .container .main_page h3 {
    background: linear-gradient( 135deg, rgba(38, 8, 63, 0.95) 0%, rgba(211, 139, 255, 0.78) 35%, rgba(255, 144, 188, 0.72) 70%, rgba(255, 255, 255, 0.92) 100% );
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 12px rgba(180, 120, 220, 0.08), 0 1px 2px rgba(255, 255, 255, 0.18);
}
.mobile-only {display:none !important}
body.dark-mode .container .hire_wrap {
    background:linear-gradient(-45deg, rgb(45, 6, 23), rgb(37, 35, 66) 70%);
    transition:background-color 0.6s ease-in-out;
}

body.dark-mode .container #examples-1 .ex1 h2 {
    color:#fff;
    transition: color 0.3s ease;
}
body.dark-mode .container #examples-1 .ex1 h2 span {
    /* color:#fff */
}
body.dark-mode .container #examples-1 .ex1 p {
    color:rgba(255 255 255/ 70%);
    transition: color 0.4s ease;
}

body.dark-mode .inc01 .big_txt .b_txt {
    color:rgba(255 255 255 / 10%);
    background:linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255)) 0% 0% / 0% no-repeat padding-box text;
}

body.dark-mode .gallery figure {
    /* background: linear-gradient(-45deg, rgb(76, 15, 136), rgb(17, 38, 151) 70%); */
    background: rgb(51, 52, 57);
}
body.dark-mode .gallery figure figcaption {color:rgba(255 255 255 / 100%);}
body.dark-mode .gallery figure small {color:rgba(255 255 255 / 70%);}

body.enable-transition #examples-1 .ex2 h2 {
    background:none;
}
body.enable-transition #examples-1 .ex2 .neon-text {
    animation:none;
    text-shadow: none;
    color: rgba(0 0 0 / 10%);
    transition:ease .3s;
}
body.dark-mode #examples-1 .ex2 .neon-text {
    color:rgb(255, 255, 255);
    text-shadow:rgb(255, 0, 94) 0px 0px 5px, rgb(255, 0, 94) 0px 0px 10px, rgb(255, 0, 94) 0px 0px 20px, rgb(255, 0, 94) 0px 0px 40px, rgb(255, 0, 94) 0px 0px 80px;
    animation:1.5s infinite alternate glow;
}

body.dark-mode #bring-it {
    color:rgba(255 255 255 / 100) !important;
}

body.dark-mode .box .inner:first-child {
    background-image: linear-gradient(-44deg, rgb(100, 7, 97), rgba(28, 24, 30, 0.78));
    color:#fff;
}
body.dark-mode .box .inner:last-child {
    background-image: linear-gradient(291.83deg, rgba(38, 0, 17, 0.85), rgba(123, 9, 68, 0.85) 65%, rgb(94, 26, 100));
    color:rgba(255 255 255 / 50%)
}
body.dark-mode .text-container {
    background:transparent;
}
body.dark-mode .text-container > div {
    color:rgba(255 255 255 / 30%);
}


body.dark-mode .drop-wrap {
	color:#fff;
	font-size:36px;
	font-weight:100;
	/* overflow:hidden; */
	animation:text-color2 5s linear infinite;
	z-index:3;
} 
@keyframes text-color2 {
	0% {color: #ffffff;}
	3% {color: #ff0592;}
	20% {color: #ffffff;}
	23% {color: #be09ff;}
	40% {color: #ffffff;}
	43% {color: #ffd570;}
	60% {color: #ffffff;}
	63% {color: #64FB0F;}
	80% {color: #ffffff;}
	83% {color: #a4ff02;}
	100% {color: #ffffff;}
}
@keyframes textAnimate3 {
    0% {
      stroke-dasharray: 0 50%;
      stroke-dashoffset:  20%;
      fill:hsl(0, 0%, 0%)
  
    }
    100% {
      stroke-dasharray: 50% 0;
      stroke-dashoffstet: -20%;
      fill: hsla(0, 0%, 0%, 0.99)
    }
}
@keyframes textAnimate2 {
    0% {
      stroke-dasharray: 0 50%;
      stroke-dashoffset:  20%;
      fill:hsl(0, 0%, 100%)
  
    }
    100% {
      stroke-dasharray: 50% 0;
      stroke-dashoffstet: -20%;
      fill: hsla(0, 0%, 100%, 0.99)
    }
}


/* 소개 */
body.dark-mode .introduce.top .accordion h1 {
    color:rgba(255 255 255 / 100%)
}
body.dark-mode .introduce.top .accordion h1:hover > b {
    color:rgba(255 255 255 / 100%)
}
body.dark-mode .introduce.top .accordion h1 b::after {
    background:rgba(77 77 77 / 70%)
}
body.dark-mode .photo_area::before {
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) );
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.10), inset 0 -1px 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px) saturate(160%);
}
body.dark-mode .title .photo_area .title_area p {
    color:rgba(255 255 255 / 90%)
}

body.dark-mode #point-text .txt_area p {
    color:rgba(255 255 255 / 95%)
}
body.dark-mode .txt_area p span {
    background-image:linear-gradient(rgb(255, 255, 255), rgb(223, 223, 223));
}
body.dark-mode .txt_area p span:hover {
    color:#171819
}
body.dark-mode .introduce h3 {
    color:#fff
}
body.dark-mode .introduce span.bold {
    color:#fff;
}
body.dark-mode .introduce.acc_01 .accordion.active + .panel {
    background:#111
}
body.dark-mode .introduce.acc_01 .panel .contents hr {
    background-color:rgba(255 255 255 / 10%)
}
body.dark-mode .introduce.acc_01 .panel .contents hr::before {
    background-color:rgba(255 255 255 / 5%);
}
body.dark-mode .introduce a {
    color:yellow;
}
body.dark-mode .introduce span {
    background-image:linear-gradient(rgb(0, 40, 255), #004cff);
}

/* 2 */
body.dark-mode .codrops-header h1 {
    color:rgba(255 255 255 / 90%)
}
body.dark-mode .codrops-header h3 {
    color:rgba(255 255 255 / 80%)
}

body.dark-mode .grid-wrap li a img {
    border:none
}

/* sub gall */
body.dark-mode .grid li h3 {
    color:rgba(255 255 255 / 100%);
}
body.dark-mode .grid li.shown:hover h3 {
    color:rgba(255 255 255 / 100%);
}
body.dark-mode .grid li > a {
    /* background:none; */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.10),
        rgba(255, 255, 255, 0.03)
    );
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 10px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.18), inset 0 -1px 1px rgba(255,255,255,0.06);
}
body.dark-mode .grid li > a > p.comment {
    color:rgba(255 255 255 / 70%);
    border-radius:0 0 3px 3px;
}




.mode-btn-pc {
    display:inline-block;
    font-size: 1rem;
    padding-left: 20px;
    padding-right: 10px;
    text-align: right;
    vertical-align: top;
}
.mode-btn-pc button {
    position:relative;
    border: 0;
    font-size: .8rem;
    font-weight: 600;
    /* background:#f1f1f2; */
    color: #151515;
    padding:4px 10px;
    border-radius:20px;
    line-height:24px;
    vertical-align: top;
    margin-top:5px
}
.mode-btn-pc button img {
    position:relative;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    margin-top:-4px
}
.mode-btn-pc button::before {
    display:block;
    content:"";
    /* background:#fff; */
    position:absolute;
    top:2px;
    left:3px;
    width:28px;
    height:28px;
    border-radius: 50%;
}
.mode-btn-pc button span {
    line-height:1
}

body.dark-mode .mode-btn-pc button {
    /* background:#333 */
}
body.dark-mode .mode-btn-pc button::before {
    display:block;
    content:"";
    /* background:#171717; */
    position:absolute;
    top:2px;
    left:3px;
    width:28px;
    height:28px;
    border-radius: 50%;
}
body.dark-mode .mode-btn-pc button span {
    color:#fff
}
.mode-btn-mobile {
    display:none
}


/* intro */
body.dark-mode .additional-content p {
    color:rgba(255 255 255 / 70%);
    background: linear-gradient( 135deg, rgb(255, 255, 255) 0%, rgb(255, 215, 236) 35%, rgba(255, 219, 233, 0.72) 70%, rgba(255, 255, 255, 0.92) 100% );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 12px rgba(180, 120, 220, 0.08), 0 1px 2px rgba(255, 255, 255, 0.18);
}
body.dark-mode .identity-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
}
body.dark-mode .identity-title p {
    color:rgba(227, 219, 231, 0.68);
    background: linear-gradient( 135deg, rgb(255, 255, 255) 0%, rgb(255, 215, 236) 35%, rgba(255, 219, 233, 0.72) 70%, rgba(255, 255, 255, 0.92) 100% );
    background-clip: border-box;
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 12px rgba(180, 120, 220, 0.08), 0 1px 2px rgba(255, 255, 255, 0.18);
}
body.dark-mode .identity-stats strong {
    /* color: #fff; */
}
body.dark-mode .identity-card span {
    color: rgba(236, 230, 244, 0.5);
}
body.dark-mode .identity-card p {
    color: rgba(232, 228, 240, 0.62);
}
body.dark-mode .identity-stats strong::after {
    display:none
}
body.dark-mode .identity-stats strong {
    background: linear-gradient( 135deg, rgba(176, 131, 214, 0.95) 0%, rgba(255, 175, 242, 0.78) 35%, rgba(255, 255, 255, 0.72) 70%, rgba(255, 255, 255, 0.92) 100% );
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 12px rgba(180, 120, 220, 0.08), 0 1px 2px rgba(255, 255, 255, 0.18);
}

body.dark-mode .identity-title .eyebrow {
    color: rgba(255, 255, 255, 0.5);
}

/* layer */
body.dark-mode .thum_modal {
    /* background:rgb(23, 23, 23); */
}
body.dark-mode .modal-top {
    /* border-bottom:1px solid #000; */
}
body.dark-mode .thum_modal h2 {
    /* background:#171717; */
    color:#fff;
}
body.dark-mode .p_c_text {
    /* background:rgb(23, 23, 23); */
}
body.dark-mode .p_c_text > span > a {
    color:rgba(255 255 255 / 90%)
}











@media screen and (min-width:1401px) { 
    body.dark-mode .grid-wrap {
        /* background:#171717 */
    }
}
@media screen and (max-width:768px) {
    body.dark-mode .openbtn {
        color:#fff;
    }
    .new_stk a {
        display:none
    }
    body.dark-mode .title {
        background:transparent;
    }
    body.enable-transition .title-line span {
        font-size:4rem
    }
    body.enable-transition #newversion {
        top:380px;
        height:60px;
        border-radius: 2rem;
    }
    body.enable-transition #intro h1 {
        padding-top:130px;
    }
    body.enable-transition #newversion button {
        padding:0;
    }
    body.enable-transition #newversion button h2 {
        height:60px;
        line-height:60px;
        font-size:1.25rem;
    }
    body.enable-transition .illustration-editor-wrap {
        
    }
    body.white-mode .container .illustration-editor-wrap {
        /* background:#fff;
        transition: ease-in-out .3s; */
    }
    body.dark-mode .container .illustration-editor-wrap {
        /* background:transparent;
        opacity: 1 !important;
        transition: ease .8s; */
    }
    body.enable-transition .illustration-editor-wrap {
        background:transparent;
    }
    body.dark-mode .container .illustration-editor-wrap .code-blocks {
        width:100%;
    }
    body.dark-mode .container .illustration-editor-wrap .code {
        max-width:90%;
        margin:0 auto;
        padding:1rem 1rem 1px 1rem;
        margin-bottom:10px
    }
    body.dark-mode .container .illustration-editor-wrap .code header svg {
        display:none
    }
    body.dark-mode .container .illustration-editor-wrap .code header {justify-content: center;margin-bottom:1rem}
    body.dark-mode .container .illustration-editor-wrap .code header h1 {}
    body.white-mode .container .masked-text {
        transition: ease .8s;
        color:#000;
        -webkit-text-fill-color:#000;
        -webkit-text-stroke:1px
    }
    body.white-mode .container .effect-wrap {
        gap:5px;
    }
    body.white-mode .container .effect-wrap .words {
        color:rgba(0 0 0 / 2%);
    }
    body.white-mode .container .effect-wrap .words span {
        animation:3s ease-in-out move2
    }
    
    @keyframes move2 {
        0% {
          transform: translate(-30%, 0);
        }
        50% {
          text-shadow: 0 15px 30px rgba(236, 10, 85, 0.25);
        }
        100% {
          transform: translate(30%, 0);
        }
    }

    .mobile-only {
        display:block !important;
    }
    .mode-btn-pc {display:none}
    .mode-btn-mobile {
        display:block;
        z-index: 91;
    }
    .mode-btn-mobile button {
        background:transparent;
        outline:none;
        border:0;
        padding:15px 20px 12px 10px;
        border-radius: 3px;
    }
    .mode-btn-mobile button img {
        width:23px;
        height:23px;
    }
    .mode-btn-mobile button span {display:none}
    body.dark-mode .mode-btn-mobile button {
        background:transparent;
        outline:none;
        border:0;
        padding:20px 20px 10px 10px;
        border-radius: 3px;
    }

    body.enable-transition #examples-1 .ex3 .accordion {
        height:60px;
    }
    body.enable-transition .text-container > div:nth-child(1) {
        top:30vh;
    }
    /* mobile menu */
    body.enable-transition .sidebar {
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-left:0;
        border-radius: 0;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(255, 255, 255, 0.08); */
        margin: 0 auto;
    }
    body.enable-transition .sidebar a {
        color: #fff;
        font-weight:600;
    }
    body.dark-mode .sidebar {
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) );
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-left:0;
        /* box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.10), inset 0 -1px 1px rgba(255, 255, 255, 0.06); */
        backdrop-filter: blur(22px) saturate(160%);
    }
    body.dark-mode .sidebar a {
        color: #fff;
        font-weight:600;
    }
    body.enable-transition .sidebar .closebtn {
        font-size:50px;
        font-weight:400;
        right:15px;
        top:5px;
    }
    body.dark-mode .sidebar .closebtn {
        font-size:50px;
        font-weight:400;
        right:15px;
        top:5px;
    }

    /* introduce */
    body.dark-mode .photo_area::before {
        box-shadow:none;
    }
    body.enable-transition .intro-open, body.dark-mode .intro-open {
        /* height:50px */
    }
    body.dark-mode #toTop:hover, body.dark-mode #toTop:active, body.dark-mode #toTop:focus {
        background:#1e1e1e;
        color:#fff
    }
}

@media screen and (max-width:480px) {
    body.dark-mode .grid li > a {

    }
    /* app */
    body.dark-mode .title.v_2::before {
        filter: blur(3px) brightness(0.8);
        transform: scale(1.1); 
    }
    body.dark-mode .title.v_2::after {
        /* background: rgba(0, 0, 0, 0.5);  */
    }
    /* shop */
    body.dark-mode .title.v_3::before {
        filter: blur(3px) brightness(0.8);
        transform: scale(1.1); 
    }
    body.dark-mode .title.v_3::after {
        /* background: rgba(0, 0, 0, 0.7);  */
    }
    /* business */
    body.dark-mode .title.v_4::before {
        filter: blur(3px) brightness(0.8);
        transform: scale(1.1); 
    }
    body.dark-mode .title.v_4::after {
        /* background: rgba(0, 0, 0, 0.7);  */
    }
    /* church */
    body.dark-mode .title.v_5::before {
        filter: blur(3px) brightness(0.8);
        transform: scale(1.1); 
    }
    body.dark-mode .title.v_5::after {
        /* background: rgba(0, 0, 0, 0.7);  */
    }
    /* personal */
    body.dark-mode .title.v_6::before {
        filter: blur(3px) brightness(0.8);
        transform: scale(1.1); 
    }
    body.dark-mode .title.v_6::after {
        /* background: rgba(0, 0, 0, 0.7);  */
    }
    /* gosite */
    body.dark-mode .title.v_7::before {
        filter: blur(3px) brightness(0.8);
        transform: scale(1.1); 
    }
    body.dark-mode .title.v_7::after {
        /* background: rgba(0, 0, 0, 0.7);  */
    }
    /* editor */
    body.dark-mode .title.v_8::before {
        filter: blur(3px) brightness(0.8);
        transform: scale(1.1); 
    }
    body.dark-mode .title.v_8::after {
        /* background: rgba(0, 0, 0, 0.7);  */
    }
}