@font-face { font-family: txt; src: url(../font/OpenSans-SemiBold.ttf); }
@font-face { font-family: bld; src: url(../font/OpenSans-ExtraBold.ttf); }
@font-face { font-family: ico; src: url(../font/icomoon-3.ttf); }

:root
{
    --white: rgb(255, 255, 255);
    --light: rgb(206, 226, 235);
    --dark: rgb(0, 0, 0);

    --subred: rgb(163, 110, 106);
    --subdark: rgb(188, 200, 213);

    --red: rgb(227, 10, 24);
    --gold: rgb(216, 173, 68);
    --green: rgb(127, 171, 96);
    --blue: rgb(61, 125, 183);
}

body { margin: 0; padding: 0; text-align: center; font-family: txt; font-size: 12px; line-height: 18px; color: var(--dark); background: linear-gradient(to right, var(--light) 0%, var(--white) 100%); overflow-y: scroll; position: relative; }
b { font-family: bld; }

/********************************************************************************************************************************************/

#header { text-align: left; }
#header > div { padding: 20px; }
#header > div > .logo { display: inline-block; vertical-align: top; width: 238px; }
#header > div > .logo > a { color: var(--dark); text-decoration: none; }
#header > div > .logo > a > img { vertical-align: top; width: 56px; height: 56px; object-fit: contain; object-position: left; }
#header > div > .logo > a > .txt { display: inline-block; vertical-align: top; width: 177px; margin: 0 0 0 5px; font-size: 35px; line-height: 56px; font-family: bld; }
#header > div > .desc { display: inline-block; vertical-align: top; width: 380px; padding: 10px 0 10px 20px; margin: 0 0 0 20px; font-size: 10px; line-height: 12px; border-left: 2px solid var(--subdark); }

@media only screen and (max-width: 716px)
{
    #header > div > .logo { margin: 0 calc(100% - 238px) 0 0; }
    #header > div > .desc { margin: 5px 0 0 27px; padding: 10px 0 10px 10px; }
}

@media only screen and (max-width: 475px)
{
    #header { text-align: center; }
    #header > div > .logo { margin: 0; }
    #header > div > .desc { width: 100%; padding: 0; margin: 10px 0 0 0; border-left: none; }
}

@media only screen and (max-width: 294px)
{
    #header > div > .logo { width: 100%; }
    #header > div > .logo > a > img { width: 50px; height: 50px; }
    #header > div > .logo > a > .txt { width: 152px; font-size: 30px; line-height: 50px; }
}

/********************************************************************************************************************************************/

#cont { padding: 0 20px; }

/********************************************************************************************************************************************/

#footer { font-size: 10px; line-height: 12px; }
#footer > div { padding: 20px; }

/********************************************************************************************************************************************/

#wm { position: fixed; top: 50%; left: 50%; transform: translateX(-50%); width: 30%; object-fit: contain; object-position: center; z-index: -1; }

@media only screen and (max-width: 1440px) { #wm { width: 40%; } }
@media only screen and (max-width: 1024px) { #wm { width: 60%; } }
@media only screen and (max-width: 920px) { #wm { width: 80%; } }
@media only screen and (max-width: 768px) { #wm { top: 60%; } }
@media only screen and (max-width: 520px) { #wm { width: 100%; } }

/********************************************************************************************************************************************/

.popup { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: linear-gradient(to right, var(--light) 0%, var(--white) 100%); }
.popup > div { display: inline-block; vertical-align: top; width: calc(100% - 82px); max-width: 918px; margin: 20px; padding: 20px; border: 1px solid var(--subdark); }
.popup#error > div > .title { padding: 6px 5px; color: var(--white); background-color: var(--subred); }
.popup#error > div > .txt { margin: 20px 0 0 0; }
.popup#error > div > .btn { margin: 20px 0 0 0; }
.popup#alert > div > .btn { margin: 20px 0 0 0; }

::selection { color: var(--white); background-color: var(--blue); }