@charset "UTF-8";
/* 250414 */
body {
    background-color: white;
    /* 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: #171717;
    color: white;
}
body.white-mode {
    background-color: white;
    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:#fff;
    transition: background-color 0.6s ease-in-out, color 0.6s ease;
}
body.dark-mode .container {
    background-color:#171717;
    transition: background-color 0.6s ease-in-out, color 0.6s ease;
}
body.white-mode .container {
    background-color:#fff;
    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 a {color:rgba(255 255 255 / 80%)}
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(240,6,6,0.5)
}
/* body.dark-mode .codrops-demos ul li a:hover::after,body.dark-mode .codrops-demos ul li a:active::after,body.dark-mode .codrops-demos ul li a:focus::after {
    display:block;
    content:"";
    position:absolute;
    top:10px;
    left:0;
    background:rgba(240,6,6,0.5);
    width:8px;
    height:8px;
} */


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 {
    color:#fff
}
body.dark-mode .container .main_page h3 {
    color:#fff
}
.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(255 0 94 / 80%)
}
body.dark-mode .photo_area::before {
    /* background:rgb(247, 247, 247) linear-gradient(-45deg, rgb(22, 33, 94), rgb(41, 38, 66) 70%); */
    background:#2a2a2b;
}
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, 27, 27), rgb(181, 9, 9));
}
body.dark-mode .introduce h3 {
    color:#fff
}
body.dark-mode .introduce span.bold {
    color:#fff;
}
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 > p.comment {
    color:rgba(255 255 255 / 70%);
}




.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
}









@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:20px 20px 10px 10px;
        border-radius: 3px;
    }
    .mode-btn-mobile button img {
        width:26px;
        height:26px;
    }
    .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-color: #fff;
    }
    body.enable-transition .sidebar a {
        color: #111;
        font-weight:600;
    }
    body.dark-mode .sidebar {
        background-color: rgba(17, 17, 17);
    }
    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 {
        background:transparent;
    }
    body.enable-transition .intro-open, body.dark-mode .intro-open {
        height:60px
    }
    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 {
        border-radius: 0;
    }
    /* 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); 
    }
}