@import url("config.css");
@import url("external/notyf.min.css");
body {
    background: rgb(230, 230, 230);
    position: relative;
    /* background: red; */
}
body > figure {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    z-index: 0;
}
.tmp-b-number button:hover {
    background: var(--c4);
}
.tmp-b-number {
    display: grid;
    grid-template-columns: 2rem auto 2rem;
    gap: 0.5rem;
}
.data-ic-box[status="active"] {
    width: 100%;
    display: flex;
    visibility: visible;
    opacity: 1;
    animation: data-rb 1s;
}
@keyframes data-rb {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}
.data-ic-box {
    display: none;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 4px;
    border: rgba(128, 128, 128, 0.2) solid 2px;
    opacity: 0;
    visibility: hidden;
    background: rgb(235, 235, 235);
}
.tmp-input-radio {
    width: 100%;
    display: grid;
    grid-template-columns: auto 8rem;
    gap: 1rem;
    align-items: center;
}
.tmp-input-radio.v2 {
    display: grid;
    grid-template-columns: 2rem auto;
    gap: 1rem;
    align-items: center;
}
.tmp-input-radio.v3 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: start;
}

.tmp-input-radio b {
    text-align: left;
    font-family: 'f2';
}
.tmp-input-radio p {
    text-align: left;
    font-family: 'f1';
    font-size: 1rem;
    color: black;
}
.tmp-input-radio > div > div {
    padding: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.tmp-input-radio > div > div:hover {
    background: rgba(128, 128, 128, 0.2);
}
.tmp-input-radio > div > div:hover p {
    font-family: 'f2';
}
.tmp-input-radio > div label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.tmp-input-radio > div label u > div {
    width: 100%;
    height: 100%;
    transform: scale(.2);
    transition: all 0.5s;
    visibility: hidden;
    opacity: 0;
}
.tmp-input-radio > div label u > div .cls-1 {
    fill: var(--c1) !important;
}
.tmp-input-radio > div label:hover u {
    border: solid 2px var(--c1);
}
.tmp-input-radio > div label u {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: white;
    border: solid 1px var(--c1);
    transition: all 0.5s;
}
.tmp-input-radio > div {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 1rem;
    align-items: center;
}
.tmp-input-radio > div input[type="radio"]:checked + label p {
    font-family: 'f4';
    color: var(--c1);
}
.tmp-input-radio > div input[type="radio"]:checked + label u {
    background: var(--c4);
    border: solid 2px white;
}
.tmp-input-radio > div input[type="radio"]:checked + label u > div {
    display: flex;
    transform: scale(1.3);
    visibility: visible;
    opacity: 1;
}
.gt-x4 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    align-items: center;
}
.gt-x3 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
    align-items: center;
}
.gt-x2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
    align-items: center;
}
.gt-x1 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 1rem;
    align-items: center;
}
.tmp-btn-set u .cls-1 {
    fill: white !important;
}
.tmp-btn-set:hover p {
    font-family: 'f4';
    color: var(--c1);
}
.tmp-btn-set:hover u {
    transition: all 0.5s;
    transform: scale(1.1);
    background: var(--c2);
}
.tmp-btn-set u {
    display: flex;
    width: 4rem;
    height: 4rem;
    background: var(--c1);
    border-radius: 50%;
    padding: 1rem;
}
.tmp-btn-set p {
    font-family: 'f4';
    font-size: 1rem;
    color: gray;
}
.tmp-btn-set {
    background: none;
    font-size: 1.5rem;
    color: var(--c1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
#main[status="active"] {
    display: grid;
}
.tmp-rs-list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.tmp-rs-list .item u .cls-1 {
    fill: white !important;
}
.tmp-rs-list .item:hover {
    transform: scale(1.3);
}
.tmp-rs-list .item:hover u {
    transform: scale(1.1);
}
.tmp-rs-list .item u {
    width: 100%;
    height: 100%;
    display: flex;
}
.tmp-rs-list .item {
    background: var(--c1);
    padding: 6px;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    transition: all 0.5s;
}
#main {
    display: none;
    width: 100%;
    height: 100%;
    grid-template-columns: 35rem auto;
    
}
#main > figure {
    position: relative;
    width: 100%;
    height: 100%;
}
#main > figure > .banner .shadow {
    background: rgba(0, 0, 0);
}
#main > figure > .banner {
    width: 35rem;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}
#main > figure > .banner .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
#main .banner > .cont {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 20;
}
#main .banner > .cont a img {
    height: 100%;
}
#main .banner > .cont > a {
    height: 10rem;
}
#main > div{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
#main > div .cont span h1 {
    font-family: 'f4';
    font-size: 1.5rem;

}
#main > div .cont span b {
    font-family: 'f2';
}
#main > div .cont>span {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'f1';
    font-size: 1rem;
}
#main > div .cont {
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 35rem;
    padding: 1rem;
    gap: 1rem;
}
#main > div .cont .info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#main > div .cont .data strong {
    font-family: 'f2';
    font-size: 1rem;
}
#main > div .cont .data ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#main > div .cont .data li {
    font-family: 'f1';
    font-size: 0.8rem;
}
#main > div .cont .data h2 {
    font-family: 'f2';
    font-size: 1.5rem;
    color: var(--c1);
}
#main > div .cont .data {
    width: 100%;
    padding: 0;
}
#main > div .cont .data .item{
    min-height: 5rem;
    background: white;
    padding: 1rem;
    font-family: 'f1';
    font-size: 0.8rem;
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 6px;
    border-radius: 4px;
    
}
#main .info-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}
#main .info-contact .item {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}
#main .info-contact .item p {
    font-family: 'f1';
    color: white;
    font-size: 0.8rem;
}
#main .info-contact .item u .cls-1 {
    fill: white !important;
}
#main .info-contact .item u {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
}
#main .info-politics {
    padding: 1rem;
}
#main .info-politics a {
    font-size: 1rem;
    color: white;
}
#main .info-politics a:hover {
    color: var(--c4);
    text-decoration: underline;
}
#main .logo {
    height: 10rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#main .logo img {
    height: 100%;
}
.responsive {
    display: none;
}
/* ***********************************************************INFO */
#type-job-data .item[status="active"] {
    display: flex;
}
#type-job-data .item > ul {
    padding-left: 2rem;
}
#type-job-data .item > ul > li {
    list-style-type: circle;
}
#type-job-data .item p {
    font-family: 'f1';
    font-size: 0.8rem;
}
#type-job-data .item b {
    font-size: 1rem;
    font-family: 'f2';
}
#type-job-data .item {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}
header[status="active"] {
    display: flex;

}
header {
    display: none;
    flex-direction: column;
    position: relative;
    gap: 2rem;
    z-index: 100;
}
header .banner {
    position: relative;
    width: 100%;
    height: 30rem;
    z-index: 0;
}
header .banner > figure .shadow {
    background: black;
}
header .banner > figure img {
    filter: blur(3px);
}
header .banner > figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
header .banner > .title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 10;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
}
header .banner > .title figure {
    height: 8rem;
}
header .banner > .title figure img {
    height: 100%;
}
header .banner > .title span {
    display: flex;
    flex-direction: column;
    text-align: center;
}
header .banner > .title span b {
    font-size: 1.5rem;
    font-family: 'f4';
    color: white;
}
header .banner > .title span p {
    font-family: 'f2';
    font-size: 1rem;
    color: var(--c4);
}
header .banner > nav {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5rem;
    width: 100%;
    z-index: 100;
    background: white;
}
header .banner > nav .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
header .banner > nav .container img {
    height: 3rem;
}
header .banner > nav .container button {
    min-width: 8rem;
    height: 2rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    padding: 0 1rem;
    background: var(--c0);
}
header .banner > nav .container button u {
    width: 1.5rem;
    height: 1.5rem;
    transition: all 0.5s;
}
header .banner > nav .container button u .cls-1 {
    fill: var(--c1) !important;
}
header .banner > nav .container button p {
    color: var(--c1);
    font-family: 'f2';
}
header .banner > nav .container button:hover p {
    color: white;
}
header .banner > nav .container button:hover u {
    transform: scale(1.2);
}
header .banner > nav .container button:hover u .cls-1 {
    fill: white !important;
}
header .banner > nav .container button:nth-child(1):hover {
    background: var(--c1);
}
header .banner > nav .container button:nth-child(4) {
    background: var(--c4);
}
header .banner > nav .container button:nth-child(4) p {
    color: white;
}
header .banner > nav .container button:nth-child(4) u .cls-1 {
    fill: white !important;
}
header .banner > nav .container button:nth-child(4):hover {
    background: var(--c2);
}
header .banner > nav .container img {
    display: none;
}
header .banner > nav[status="active"] img {
    display: flex;
}
header .banner > nav[status="active"] img.responsive {
    display: none;
}
header .banner > nav[status="active"] {
    position: fixed;
    top: 0;
    z-index: 150;
    top: 0;
    animation: menu 0.5s;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    height: 4rem;
}
@keyframes menu {
    0% {
        top: -5rem;
    }
    100% {
        top: 0;
    }
}
#result {
    padding: 2rem 0;
    position: relative;
    gap: 2rem;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
#result[status="active"] {
    display: flex;
}
#result article {
    display: grid;
    grid-template-columns: auto 50rem;
    border-top: 4px rgba(128, 128, 128, 0.2) solid;
    padding-top: 1rem;
    position: relative;
    z-index: 0;
    gap: 2rem;
}
#result article .title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#result article .title span {
    background: whitesmoke;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#result article .title p {
    font-family: 'f1';
    font-size: 0.8rem;
}
#result article .title b {
    font-size: 1.2rem;
    font-family: 'f4';
}
#result article .form {
    position: relative;
    z-index: 0;
    padding: 1rem;
    background: var(--c0);
    box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 5px;
    border: solid 2px rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}
#result article .form b {
    font-family: 'f4';
    font-size: 1.1rem;
    color: black;
}
#result article .form p {
    font-size: 0.9rem;
}
#result article .form span[status="danger"] {
    background: rgba(255, 0, 0, 0.1);
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: rgb(50, 0, 0);
}
#result article .form span p {
    overflow-wrap: break-word;
    font-size: 0.8rem;
}
#result article .form span {
    font-family: 'f1';
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#result article .form span ul > li {
    list-style-type: circle;
}
#result article .form span ul {
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* ********************************************FORMULARIO DE FINALIZACION */
#form-end {
    display: none;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    position: relative;
    z-index: 10;
}
#form-end[status="active"] {
    display: flex;
    animation: form-end 1s;
    visibility: visible;
    opacity: 1;
}
#form-end .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#form-end .cont {
    z-index: 50;
    width: 30rem;
    padding: 1rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background: white;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);

}
#form-end .cont > b {
    font-family: 'f4';
    font-size: 1.5rem;
    text-align: center;
}
@keyframes form-end {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}
#form-end .cont > p:hover {
    color: var(--c1);
    text-decoration: underline;
    font-family: 'f4';
}
#form-end .cont > p {
    font-family: 'f2';
    font-size: 1rem;
    color: gray;
    cursor: pointer;
}
#form-end .link label {
    font-family: 'f1';
    font-size: 1rem;
    color: var(--c1);
}
#form-end .link {
    display: grid;
    grid-template-columns: 2rem auto;
    gap: 1rem;
    align-items: center;
}
#form-end .link label a:hover {
    font-family: 'f4';
    color: var(--c4);
}
#form-end .link label a {
    font-family: 'f2';
    color: var(--c1);
    text-decoration: underline;
}
#form-end .link input {
    width: 1.5rem;
    height: 1.5rem;
}
#form-end > figure {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50vh;
    width: 100%;
}
#form-end > figure .shadow {
    background: var(--c1);
}
/* ******************************************************POLITICAS */
#politics {
    position: relative;
    z-index: 10;
    width: 100%;
    display: grid;
    grid-template-rows: 20rem auto;
    gap: 1rem;
}
#politics .banner {
    width: 100%;
    height: 20rem;
    position: relative;
}
#politics .banner .shadow {
    background: black;
}
#politics .banner figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
#politics .banner .title {
    z-index: 20;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#politics .banner .title span {
    height: 2rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
#politics .banner .title a:hover {
    font-size: 1rem;
    font-family: 'f2';
}
#politics .banner h2 {
    font-family: 'f4';
    color: white;
    font-size: 2rem;
}
#politics .banner span,
#politics .banner span a {
    font-family: 'f1';
    color: white;
}
#politics .data .container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
}
#politics .data .container > span b {
    font-family: 'f2';
}
#politics .data .container > span {
    font-family: 'f1';
    font-size: 1rem;
}

#politics .data .container > div,
#politics .data .container > div span {
    display: flex;
    flex-direction: column;
}
#politics .data .container > div span {
    font-size: 1rem;
    font-family: 'f1';
    gap: 1rem;
}
#politics .data .container > div > span > b {
    font-size: 1.2rem;
    font-family: 'f4';
    color: black;
}

#politics .data .container > div ul li {
    list-style-type: "\2013";
}
#politics .data .container > div ul {
    padding-left: 2rem;
    list-style-type: "\2013";
}
#politics .data .container > div > span > span > b {
    font-size: 1rem;
    font-family: 'f2';
}
.tmp-file {
    width: 100%;

}
.tmp-file label .name-file {
    padding: 1rem;
    background: whitesmoke;
    color: black;
    max-width: 80%;
    border-radius: 0.5rem;
    visibility: hidden;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}
.tmp-file label {
    padding: 1rem;
    width: 100%;
    height: 20rem;
    display: flex;
    background: white;
    border-radius: 0.5rem;
    position: relative;
    z-index: 0;
}
.tmp-file label > div {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: dashed gray 2px;
    gap: 2rem;
}
.tmp-file label span b {
    font-size: 1.1rem;
    font-family: 'f4';
}
.tmp-file label span {
    display: flex;
    flex-direction: column;
    font-family: 'f1';
    font-size: 0.8rem;
    color: gray;
}
.tmp-file label figure > u:nth-child(1) {
    display: flex;
}
.tmp-file label figure > u:nth-child(2) {
    display: none;
}
.tmp-file label figure {
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: pointer;
    z-index: 90;
}
.tmp-file label:hover figure u {
    transform: scale(1.2);
}
.tmp-file label figure u {
    width: 5rem;
    height: 5rem;
    padding: 1.5rem;
    z-index: 10;
    border-radius: 50%;
    background: whitesmoke;
    display: flex;
    transition: all 0.5s;
}
.tmp-file label figure u .cls-1 {
    fill: black !important;
}
.tmp-file > div {
    padding: 1rem;
}
.tmp-file > div b {
    font-size: 1rem;
    font-family: 'f4';
}
.tmp-file label[status="active"] figure > u:nth-child(1) {
    display: none;
}
.tmp-file label[status="active"] figure > u:nth-child(2) {
    display: flex;
}
.tmp-file label[status="active"] u {
    transform: scale(1.4);
    box-shadow: 1px 1px 4px gray;
}
.tmp-file label[status="active"] {
    background: rgb(218, 255, 218);
}
.tmp-file label[status="active"] .name-file {
    visibility: visible;
}
.tmp-file label[status="disable"] {
    background: rgb(255, 218, 218);
}

.file-name .result-add-file[status="active"] {
    display: flex;
}
.file-name {
    padding: 1rem;
    background: rgb(220, 220, 220);
    border-radius: 0.5rem;
}
.file-name .result-add-file {
    background: rgba(255, 255, 255, 0.5);
    padding: 1rem;
    border-radius: 0.5rem;
    display: none;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    position: relative;
    min-height: 2.5rem;
}
.file-name .result-add-file .item-file u .cls-1 {
    fill: white !important;
}
.file-name .result-add-file .item-file u:hover {
    background: var(--c1);
}
.file-name .result-add-file .item-file u {
    width: 2rem;
    height: 2rem;
    background: red;
    border-radius: 0.5rem;
    padding: 0.5rem;
}
.file-name .result-add-file .item-file figure {
    background: white;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
}
.file-name .result-add-file .item-file p {
    font-family: 'f2';
    font-size: 1rem;
}
.file-name .result-add-file .item-file i {
    color: gray;
    font-size: 0.8rem;
    font-family: 'f1';
    overflow-wrap: break-word;
    overflow: hidden;
    width: 100%;
}
.file-name .result-add-file .item-file {
    display: grid;
    grid-template-columns: 2rem auto;
    gap: 0.5rem;
    align-items: center;
    border-radius: 0.5rem;
    width: 100%;
}

footer {
    z-index: 10;
    background: white;
    height: 4rem;
    width: 100%;
    position: relative;
}
footer .container {
    display: flex;
    align-items: center;
}
footer .container a:hover {
    font-family: 'f2';
    text-decoration: underline;
}
footer .container a {
    font-size: 1rem;
    font-family: 'f1';
}
.test {
    position: fixed;
    bottom: 1rem;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c4);
    color: white;
}

.tmp-form-select{
    margin-top: 1rem;
}
@media only screen and (min-width: 1280px) {}
@media only screen and (max-width: 1279px) and (min-width: 1024px) {
    #main {
        grid-template-columns: 25rem auto;
    }
    #main > figure > .banner {
        width: 25rem;
    }
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    #main > div .cont {
        width: 100%;
    }
    #main {
        grid-template-columns: 20rem auto;
    }
    #main > figure > .banner {
        width: 20rem;
    }
    #result article {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
    #result article {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .gt-x2 {
        grid-template-columns: auto;
    }
    .tmp-b-number {
        grid-template-columns: 4rem auto 4rem;

    }
    #main > figure > .banner {
        display: none;
    }
    #main > div .cont {
        width: 100%;
    }
    #main {
        grid-template-columns: auto;
    }
    .responsive {
        display: flex;
    }
    header .banner > nav[status="active"] img {
        display: none;
    }
    header .banner > nav[status="active"] img.responsive {
        display: flex;
    }
    #form-end .cont {
        width: 90%;
    }
}
@media only screen and (max-width: 479px) and (min-width: 360px) {
    #result article {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #form-end .cont > b {
        font-size: 1.2rem;
    }
    #form-end .cont > p {
        font-size: 0.8rem;
    }
    .gt-x2 {
        grid-template-columns: auto;
    }
    .tmp-b-number {
        grid-template-columns: 4rem auto 4rem;
    }
    .tmp-input-radio {
        grid-template-columns: auto;
    }
    .tmp-input-radio > div {
        justify-content: flex-start;
    }
    header .banner > nav .container img {
        display: none;
    }
    #main > figure > .banner {
        display: none;
    }
    #main > div .cont {
        width: 100%;
    }
    #main {
        grid-template-columns: auto;
    }
    #main > div .cont span h1 {
        font-size: 1.2rem;
    }
    #main > div .cont span {
        font-size: 0.8rem;
    }
    .responsive {
        display: flex;
    }
    header .banner > nav[status="active"] img {
        display: none;
    }
    header .banner > nav[status="active"] img.responsive {
        display: flex;
    }
    #form-end .cont {
        width: 90%;
    }
    #result article .form b {
        text-align: center;
        font-size: 0.8rem;
    }
    .tmp-file label {
        height: 15rem;
    }
    .tmp-file label strong {
        font-size: 0.8rem;
        font-family: 'f1';
        overflow-wrap: break-word;
    }
    .form .item input {
        padding-top: 2.5rem;
        min-height: 4rem;
    }
    .form .item label {
        font-size: 0.7rem;
        font-family: 'f2';
    }
    .file-name .result-add-file {
        padding: 0.5rem;
    }
    #result article .form span{
        padding: .5rem;
    }
}
@media only screen and (max-width: 359px) and (min-width: 10px) {
    #result article {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #form-end .cont > b {
        font-size: 1.2rem;
    }
    #form-end .cont > p {
        font-size: 0.8rem;
    }
    .gt-x2 {
        grid-template-columns: auto;
    }
    .tmp-b-number {
        grid-template-columns: 4rem auto 4rem;

    }
    .tmp-input-radio {
        grid-template-columns: auto;
    }
    .tmp-input-radio > div {
        justify-content: flex-start;
    }
    header .banner > nav .container img {
        display: none;
    }
    #main > figure > .banner {
        display: none;
    }
    #main > div .cont {
        width: 100%;
    }
    #main {
        grid-template-columns: auto;
    }
    #main > div .cont span h1 {
        font-size: 1.2rem;
    }
    #main > div .cont span {
        font-size: 0.8rem;
    }
    .responsive {
        display: flex;
    }
    header .banner > nav[status="active"] img {
        display: none;
    }
    header .banner > nav[status="active"] img.responsive {
        display: flex;
    }
    #form-end .cont {
        width: 100%;
    }
    .tmp-rs-list {
        gap: 0.5rem;
    }
    #result article .form b {
        text-align: center;
        font-size: 0.8rem;
    }
    .tmp-file label {
        height: 15rem;
    }
    .tmp-file label strong {
        font-size: 0.8rem;
        font-family: 'f1';
        overflow-wrap: break-word;
    }
    .form .item input {
        padding-top: 2.5rem;
        min-height: 4rem;
    }
    .form .item label {
        font-size: 0.7rem;
        font-family: 'f2';
    }
    .file-name .result-add-file {
        padding: 0.5rem;
    }
    #result article .form span{
        padding: .5rem;
    }
}
@media only screen and (min-height: 1280px) {}
@media only screen and (max-height: 1279px) and (min-height: 1024px) {}
@media only screen and (max-height: 1023px) and (min-height: 768px) {}
@media only screen and (max-height: 767px) and (min-height: 480px) {}
@media only screen and (max-height: 479px) and (min-height: 360px) {}
@media only screen and (max-height: 359px) and (min-height: 10px) {}