#contentLAYOUT {     line-height: 0; }


section.login,
section.register {  }
section.login > .row,
section.register > .row { padding: 0; gap: 0; flex-wrap: wrap; min-height: calc(100vh - 40px); align-items: stretch !important; }
section.login > .row > .row-half,
section.register > .row > .row-half { width: 50%; }




section.login > .row .row-half.form,
section.register > .row .row-half.form { display: flex; justify-content: center; align-items: center; flex: 0 0 auto; }

section.login > .row .row-half.background,
section.register > .row .row-half.background { background-position: center; background-size: cover; position: relative; }

section.login > .row > .row-half.background .section-logo,
section.register > .row > .row-half.background .section-logo { height: 100%; width: 100%; position: absolute; }
section.login > .row > .row-half.background .section-logo svg,
section.register > .row > .row-half.background .section-logo svg { height: 100%; width: auto; }

section.login > .row .row-half.background .section-logo svg { fill: var(--green-1); }



section.register > .row .row-half.form .section-form { margin-top: 40px; margin-bottom: 40px; }

section.register .row .row-half.background .section-logo { text-align: right; }
section.register .row .row-half.background .section-logo svg { fill: var(--violet-1); }











#contentLAYOUT section.head {   }
#contentLAYOUT section.head > .wrap {  }

#contentLAYOUT section.head .eyes { display: flex; gap: 8px; cursor: pointer; position: fixed; z-index: 9; margin: 40px; }
#contentLAYOUT section.head .eye { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #000000; background-color: #f6f6f6; position: relative; overflow: hidden; }
#contentLAYOUT section.head .pupil { width: 20px; height: 20px; border-radius: 50%; background-color: black; position: absolute; top: 20px; left: 20px; transform: translate(-50%, -50%); }

#contentLAYOUT section.head ul.menu { font-size: 0; line-height: 0; position: fixed; margin: 40px 40px 40px 136px; }
#contentLAYOUT section.head ul.menu li { padding:0; margin-bottom: 0; display: inline-block; vertical-align: top; font-size: 16px; line-height: 100%; font-weight: 700; margin-bottom: 8px; margin-right: 8px; }
#contentLAYOUT section.head ul.menu li button { padding: 0 20px; height: 40px; border-radius: 20px; border: 1px solid #000000; }
#contentLAYOUT section.head ul.menu li button span { vertical-align: middle; }

.color-01 { background-color: #CFA4CC; }
.color-02 { background-color: #EE5A36; }
.color-03 { background-color: #9FC4E8; }
.color-04 { background-color: #1A9562; }
.color-05 { background-color: #F5AB54; }


#contentLAYOUT section.message { position: fixed; top: 40px; left: 40px; width: calc(100vw - 40px); height: calc(100vh - 40px); background: #EEEEEE; z-index: 8; margin-top: 0; }
#contentLAYOUT section.message > .wrap { padding: 0; }
#contentLAYOUT section.message #bcPaint { font-size: 0; line-height: 0; }
#contentLAYOUT section.message #bcPaint .row { padding: 0; }
#contentLAYOUT section.message #bcPaint-menu { position: absolute; top: 40px; left: 136px; }
#contentLAYOUT section.message #bcPaint-menu button { padding: 0 16px; height: 40px; border-radius: 20px; border: 1px solid #000000; margin-right: 8px; }
#contentLAYOUT section.message #bcPaint-menu button span { display: inline-block; vertical-align: middle; }
#contentLAYOUT section.message #bcPaint-palette { position: absolute; top: 56px; left: 0; padding: 40px; white-space: nowrap; overflow-x: auto; width: 100%; }
#contentLAYOUT section.message #bcPaint-palette .bcPaint-palette-color { width: 40px; height: 40px; display: inline-block; cursor: pointer; border-radius: 20px; margin-right: 8px; }
#contentLAYOUT section.message #bcPaint-palette > .selected { border: 2px solid #343a40; }

#contentLAYOUT section.message > button { position: fixed; top: 80px; right: 40px; width: 40px; height: 40px; border-radius: 20px; border: 1px solid #000000; }
#contentLAYOUT section.message > button span { display: inline-block; vertical-align: middle; }
#contentLAYOUT section.message > button:hover { background-color: #000000; color: #FFFFFF; }





@media screen and (max-width: 1599px) { /* 1366 */



}

@media screen and (max-width: 1365px) { /* 1024 */



}

@media screen and (max-width: 1023px) { /* 768 */



}

@media screen and (max-width: 767px) { /* 414 */

    section.login .row,
    section.register .row { min-height: inherit; }
    section.login .row .row-half,
    section.register .row .row-half { width: 100%; height: inherit; }
    section.login .row .row-half.background,
    section.register .row .row-half.background { aspect-ratio: 9 / 16; }
    section.login .row .row-half.form > .wrap,
    section.register .row .row-half.form > .wrap { padding: 16px !important; }
    section.login .row .row-half .section-form,
    section.register .row .row-half .section-form { border-radius: 0; margin-top: 0px !important; margin-bottom: 0px !important; }

    section.login .row .row-half:nth-child(1) { order: 2; }
    section.login .row .row-half:nth-child(2) { order: 1; }

}

@media screen and (max-width: 414px) {



}