body > main {
    position: relative;
    display: inline-block;
    margin: 60px auto 0 auto;
    width: 100%;
}

body > header.large ~ main#main {
    margin: 110px auto 0 auto;
}

body > main ~ main {
    margin: 0 auto;
}

body div.splide ~ main {
    margin: 50px auto 0 auto;
}

body > main .logo {
    position: relative;
    display: block;
    margin: 1rem auto 1rem auto;
}

main.banner {
    display: block;
    margin: 60px auto 0 auto;
    width: 100%;
}

main.banner article {
    position: relative;
    display: block;
    min-width: 100%;
    height: 400px;
    margin: 0;
}

main.banner iframe {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

main .anchor {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

main .anchor:before {
    content: '';
    position: relative;
    display: block;
    width: 3rem;
    height: 3rem;
    background-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/chevron-circle-down-solid.svg);
}

main > article {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

main > article.message,
main > article.back,
main > article.fullWidth {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    max-width: var(--max-content-width);
}

main > article.message {
    margin: 0 auto 3rem auto;
}

main > article.back {
    padding: 0;
}

main > article.message {
    margin: 0 auto 3rem auto;
}

main > article.abo {
    flex-wrap: wrap;
}

main > article.fullWidth h2 {
    margin: 2rem 0 1rem 0;
    width: 100%;
    text-align: center;
}

main > article.fullWidth:not(.form) h3,
main > article.fullWidth:not(.form) h4,
main > article.fullWidth:not(.form) p {
    text-align: center;
}

article.userMessage {
    background: var(--primary);
    color: var(--white);
    margin: 1rem auto;
    padding: 1rem;
    border-radius: var(--box-border-radius);
    width: calc(100% - 2.5rem);
    max-width: 900px;
}

article.userMessage section {
    margin: 0;
    width: 100%;
}

article.userMessage p.user {
    margin: 0 0 0 32px;
    line-height: 1.25rem;
}

article.userMessage p.user:before {
    content: '';
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0 8px -6px -30px;
    background: var(--white);
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/user.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/user.svg);
}

article.userMessage a {
    color: var(--white);
}

article.userMessage m-button.flat {
    color: var(--white);
    margin: 0 0 0 auto;
    float: right;
}

main > article.twoThirds {
    position: relative;
    display: block;
    width: calc(100% - 3rem);
    max-width: 900px;
    justify-content: flex-start;
    margin: .75rem 1.5rem 1.25rem 1.5rem;

}

main > article.twoThirds h2 {
    margin: 0 0 2rem 0;
}

main > article > section.box.fullWidth {
    text-align: left;
    border: var(--box-border);
    border-radius: var(--box-border-radius);
}

main > article > section.box > .top > img {
    position: relative;
    display: block;
    object-fit: revert;
    max-width: 100%;
    max-height: 160px;
    margin: auto;
}

main > article > section.box.recommendation > .top > img {
    top: 1rem;
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

main > article > section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

main > article > section > iframe {
    min-height: 400px;
}

main > article.orderingProcess {
    display: block;
    padding: 1rem 0 0 0;
}

main > article.orderingProcess > section {
    position: relative;
    display: block;
    text-align: center;
    margin: 0;
}

main > article.orderingProcess > section h4 {
    font-family: 'Roboto Slab', serif;
    margin: 0;
}

main > article.orderingProcess > section ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-content: flex-start;
}

main > article.orderingProcess > section ul:before {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    border-top: 4px dotted var(--medium-gray);
    top: 3rem;
}

main > article.orderingProcess > section ul li {
    position: relative;
    display: inline-block;
    padding: 1rem .25rem;
    font-weight: 500;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main > article.orderingProcess > section ul li:before {
    content: '';
    width: 2rem;
    height: 2rem;
    background: var(--medium-gray);
    position: relative;
    display: block;
    border-radius: 50%;
    margin: 1rem auto;
    z-index: 1;
}

main > article.orderingProcess > section ul li.active {
    color: var(--primary);
}

main > article.orderingProcess > section ul li.active:before {
    background: var(--primary);
}

main > article > section.box {
    background: var(--light-gray);
    margin: 0 0 1.75rem 0;
    padding: 1.75rem;
    order: 2;
    border-radius: var(--box-border-radius);
    border: var(--box-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

main > article > section.box.one.notice {
    margin: 1rem 0;
}

main > article > section.box.massage {
    margin: 0 auto 3.5rem auto;
    max-width: calc(1400px - 2.5rem);
}

main > article.abo > section.box {
    display: grid;
    grid-template-rows: 160px;
}

main > article.abo > section.box.notice {
    grid-template-rows: auto;
}

main > article.abo:not(.service):not(.video) > section.box.three:nth-child(3n),
main > article.abo > section.box.one,
main > article.abo > section.box.two,
main > article.abo > section.box.three {
    padding: 0 1.75rem 1.75rem;
}

main > article.abo.service > section.box {
    padding: 1.75rem;
    grid-template-rows: auto;
    border: var(--box-border);
}

main > article.abo.service > section.box.notice {
    grid-template-rows: auto;
    padding: 0 1.75rem 1.75rem;
}

main > article.abo.service > section.box.notice .top {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    height: min-content;
}

main > article > section.box.three.recommendation {
    padding: 0 1.75rem 1.75rem;
    order: 1;
}

main > article > section.box.recommendation {
    border: var(--border);
    background: rgba(var(--secondary-rgb), 0.3);
}

main > article > section.box.abstract.notice {
    order: 9999;
    height: fit-content;
}

main > article > section.box.recommendation .top {
    background: var(--secondary);
    overflow: visible;
}

main > article > section.box.recommendation .top > .label {
    position: absolute;
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0.5rem 1.75rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    background: var(--primary);
    color: var(--white);
    min-height: 2rem;
    z-index: 1;
}

main > article:not(.abo) > section.box .center,
main > article:not(.abo) > section.box .bottom {
    max-width: calc(100% - 2rem);
}

main > article.abo.service > section.box .center {
    max-width: 100%;
    padding: 1.75rem 0 0 0;
}

main > article.abo.service > section.box.notice .center,
main > article.abo.service > section.box.notice .bottom {
    max-width: calc(100% - 2rem);
}

main > article > section.box > * {
    width: 100%;
}

main > article > section.box > .top:empty,
main > article.abo > section.box > div.top:empty {
    display: none;
}

main > article > section.box > .top:empty ~ .center {
    padding: 0 !important;
}

main > article.abo > section.box > .top {
    width: calc(100vw - 2rem);
}

main > article > section.box > .top {
    overflow: hidden;
    color-scheme: light;
    height: auto;
    position: relative;
    display: block;
}

main > article.abo > section.box > .top {
    border-bottom-right-radius: var(--box-border-radius);
    border-bottom-left-radius: var(--box-border-radius);
}

main > article.abo > section.box.one.notice > .top {
    border-radius: 0;
}

main > article.abo > section.box > .top {
    background: var(--background-white);
    margin: 0 0 0 -1.75rem;
}

main > article.abo > section.box.recommendation > .top {
    background: var(--secondary);
}

main > article.abo > section.box.two .center,
main > article.abo > section.box.three .center,
main > article > section.box.one .center {
    padding: 1.75rem 0 0 0;
    max-width: calc(100% - 2rem);
}

main > article.abo ul,
main > article ul.check,
main div.benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

main > article.abo ul li,
main > article ul.check li {
    display: -webkit-inline-box;
    align-items: flex-start;
    margin: 0 0 1rem 0;
    line-height: 1.5rem;
    max-width: calc(100% - 1.5rem);
    min-width: calc(100% - 1.5rem);
}

main > article.abo ul li > p,
main > article ul.check li > p {
    margin: 0;
}

main > article.abo ul li > img,
main > article ul.check li > img {
    margin: -.25rem 0 0 0;
}

main > article.abo ul [download] li:before,
main > article ul.check [download] li:before {
    background-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/pdf.svg);
}

main > article > section > div > span.small {
    margin: 0 0 .5rem 0;
}

main > article span.price {
    font-size: 1.85rem;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin: 0 0 .5rem 0;
    font-weight: 700;
}

main > article span.price > span.small {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5rem;
}

section[hidden] {
    display: none;
}

/* div table with checkbox */
main > article .table {
    position: relative;
    display: block;
    background: var(--white);
    border: 1px solid var(--secondary);
    overflow-x: auto;
    margin: 0 0 1rem 0;
}

main > article .table > * {
    display: grid;
    grid-template-columns: 32px minmax(100px, 100%) minmax(100px, 100%) minmax(84px, 100%) minmax(100px, 100%) minmax(100px, 100%) minmax(140px, 100%);
}

main > article .table > fieldset {
    border-top: 1px solid var(--secondary);
}

main > article .table > .th span {
    font-weight: 600;
    line-height: 2rem;
}

main > article .table > * span {
    word-break: break-word;
    padding: 0;
    line-height: 2rem;
}

main > article .table > fieldset m-state.active,
main > article .table > fieldset m-state.active ~ span {
    background: var(--light-gray);
}

main > article .table > fieldset m-state.checkbox > .frame > .body {
    margin: 4px;
}

main > article .table > fieldset m-state {
    margin: 0;
    width: auto;
}

main > article .table > fieldset m-state span.box {
    margin: 0;
}

/* div table with checkbox */
main > article table {
    position: relative;
    display: block;
    background: var(--white);
    border: 1px solid var(--medium-gray);
    overflow-x: auto;
    margin: 0 0 1rem 0;
}

main > article table > caption,
main > article table th:first-child {
    font-size: 0;
}

main > article table > caption {
    height: 0;
}

main > article table tbody {
    width: 100%;
    position: relative;
    display: block;
}

main > article table tr {
    display: grid;
    grid-template-columns: 32px minmax(100px, 100%) minmax(100px, 100%) minmax(84px, 100%) minmax(100px, 100%) minmax(100px, 100%) minmax(140px, 100%);
    border-top: 1px solid var(--medium-gray);
}

main > article table.devices tr {
    grid-template-columns: 32px minmax(100px, 100%) minmax(100px, 100%) minmax(140px, 100%);
}

main > article table tr:first-child {
    border: none;
}

main > article table tr > th {
    border-bottom: 1px solid var(--medium-gray);
    padding: .5rem;
    text-align: left;
}

main > article table tr > td {
    background: var(--light-gray);
    padding: .5rem;
}

main > article table tr > td * {
    vertical-align: middle;
    margin: 0;
}

main > article table m-state {
    min-height: auto;
}

/* div table devices with checkbox */
main > article .table.devices > * {
    display: grid;
    grid-template-columns: 32px minmax(120px, 100%) minmax(140px, 100%) minmax(140px, 100%);
}

main > article .info {
    position: relative;
    display: block;
    background: var(--primary);
    color: var(--white);
    margin: 0 1rem 2rem 1rem;
    padding: 1rem 1.75rem;
}

main > article:first-of-type .info {
    margin: 2rem 1rem 2rem 1rem;
}

main > article .info h3 {
    margin: 0 0 .5rem 0;
}

main div.benefits {
    margin: ;
}

main > article .info h3:before,
main > article.abo ul li:before,
main > article ul.check li:before,
main div.benefits ul li:before {
    content: '';
    height: 28px;
    width: 28px;
    min-width: 28px;
    background: var(--black);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0.25rem 0 0;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--white);
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/info.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/info.svg);
}

main > article.abo ul li:before,
main > article ul.check li:before,
main div.benefits ul li:before {
    top: 0;
    height: 1.5rem;
    width: 1.5rem;
    background: var(--primary);
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/material-symbols--check-circle.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/material-symbols--check-circle.svg);
    float: left;
}

main div.benefits ul li:before {
    float: none;
}

main div.benefits ul li {
    line-height: 2rem;
}

main > article.abo section.recommendation ul li:before,
main > article section.recommendation ul.check li:before   {
    background: var(--secondary);
}

main > article .info p:last-child {
    margin: 0;
}

main > article .info a {
    color: var(--white);
    font-weight: 600;
}

main > article > .info {
    width: calc(100% - 2rem);
}

main > article > .info:empty {
    display: none;
}

main .notice {
    position: relative;
    display: block;
    margin: 1.25rem;
}

main .abstract.notice {
    background: var(--gray);
    color: var(--white);
    border: var(--box-border);
    border-radius: var(--box-border-radius);
    padding: 0 0 1.75rem 0;
}

main .abstract.notice .center {
    padding: 1.75rem 1.75rem 0;
}

main .abstract.notice .center a {
    border-color: var(--white);
}

main .notice h3.info {
    color-scheme: light;
    border-top-right-radius: var(--box-border-radius);
    border-top-left-radius: var(--box-border-radius);
    background: var(--primary);
    margin: 0;
    text-transform: uppercase;
    font-size: 1.5rem;
}

main .box.one.notice h3.info {
    border-top-right-radius: 0;
}

main .box.one.notice p {
    margin: 0;
}

main .notice h3.info:before {
    content: '';
    height: 1.5rem;
    width: 1.5rem;
    background: var(--background-white);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0.25em 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/info.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/info.svg);
}

main .notice a {
    color: var(--white);
}

main .notice > m-button {
    position: relative;
    display: inline-block;
    margin: 1em;
    max-width: calc(100% - 2rem);
}

/* video */
main > article.abo.video > section.box {
    grid-template-rows: auto;
    position: relative;
}

main > article.abo.video > section.box > div.top {
    align-content: space-between;
}

main > article.abo.video > section.box.three > .top {
    min-height: fit-content;
    width: calc(100% + 3.5rem);
    background: transparent;
    cursor: pointer;
}

main > article.abo.video > section.box.three > .top:focus-visible {
    background: var(--primary);
}

main > article.abo.video > section.box.three > .top:focus-visible img {
    opacity: .6;
}

main > article.video > section.box > .top > img {
    object-fit: fill;
    max-height: fit-content;
}

main > article.abo.video > section.box.three > .top button,
main > article.video > section.box > .top > video {
    display: none;
}

main > article.abo.video > section.box.three > .top.active button,
main > article.video > section.box > .top > video.active {
    display: block;
}

main > article.video > section.box > .top > video.active {
    position: fixed;
    z-index: 9999;
    top: 3rem;
    left: 0;
    width: 100%;
    height: calc(100% - 3rem);
}

main > article.abo.video > section.box.three > .top.active {
    background: var(--transparent-dark);
    border-radius: 0;
}

main > article.abo.video > .box button.close,
main > article.abo.video > .box.active .center,
main > article.abo.video > .box.active .bottom {
    display: none;
}

main > article.abo.video > .box.active .top,
main > article.abo.video .box.active {
    border-radius: 0;
    border: none;
    padding: 0;
}

main > article.abo.video .box.active {
    align-content: center;
}

main > article.abo.video > section.box.three.active > .top {
    margin: 0;
    width: 100%;
}

main > article.abo.video > .box.active button.close {
    display: block;
    position: absolute;
    z-index: 999;
    height: 3rem;
    width: 3rem;
    right: 1rem;
    top: 1rem;
    background: var(--transparent-dark);
    border: none;
    border-radius: var(--box-border-radius);
    cursor: pointer;
}

main > article.abo.video > .box.active button.close::before {
    color-scheme: light;
    background: var(--white);
    content: '';
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/close.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/close.svg);
}

/* scrollbar */
::-webkit-scrollbar {
    width: .25rem;
    height: .25rem;
}

::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: transparent;
}

::-webkit-scrollbar-track-piece {
    background-color: var(--white);
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--medium-gray);
    border-radius: .25rem;
}

@media (min-width: 768px) {

    body > main:last-of-type {
        min-height: calc(100vh - 437px);
    }

    body > main .logo {
        margin: 2rem auto 1rem auto;
    }

    main > article.fullWidth > section.box {
        width: calc(100% - 2rem);
    }

    main > article {
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        max-width: var(--max-content-width);
        margin: 0 0 1.25rem 0;
        padding: 0;
        display: flex;
    }

    main > article.abo {
        max-width: var(--max-content-width);
    }

    main > article > section.box {
        min-width: 220px;
    }

    main > article > section.box {
        margin: 0 1rem 2rem 1rem;
    }

    main.content > article.fullWidth > section.box {
        display: block;
        text-align: left;
    }

    main > article > section.box.fullWidth {
        width: calc(100% - 2rem);
    }

    main > article > section.two.three.recommendation,
    main > article > section.box.three.recommendation {
        order: 2;
    }

    main > article.abo > section.box > .top {
        width: calc(50vw - 2.125rem);
    }

    main > article > section.box.three.center {
        padding: 1.75rem 0 0 0;
    }

    main > article > section.box > .center {
        position: relative;
        display: block;
        height: 100%;
        max-width: calc(100% - 2rem);
    }

    main > article span.small {
        font-size: .8rem;
    }

    main > article.abo > section.box > div.top {
        position: relative;
        display: inline-grid;
        align-content: center;
    }

    main > article > section.box.one.notice {
        margin: 1rem;
        padding: 0 1rem 1rem 1rem;
    }

    main > article.abo > section.box.notice > div.top {
        height: auto;
    }

    main > article > section.box.recommendation > .top > img {
        max-height: calc(100% - 2rem);
        top: 0;
    }

    main > article > section.box.two.recommendation > .top > img,
    main > article > section.box.three.recommendation > .top > img {
        max-height: 160px;
    }

    main > article > section.box .bottom {
        position: relative;
        display: block;
        margin: auto 0 0 0;
    }

    main > article.abo > section.box.two,
    main > article.abo > section.box.three {
        width: calc(50% - 2rem);
    }

    main > article > section.box.small {
        max-width: calc(33% - 2rem);
    }

    main > article.twoThirds {
        margin: .75rem auto 1.25rem 2rem;
    }

    main > article.message {
        margin: 0 auto 6rem auto;
    }

    main > article.orderingProcess > section ul li {
        overflow: visible;
        text-overflow: initial;
        white-space: break-spaces;
    }

}

@media (min-width: 768px) and (max-width: 1400px)  {
    main > article.abo:not(.service):not(.video) > section.box.three:nth-child(3n) {
        width: 100%;
    }

    main > article.abo:not(.service):not(.video) > section.box.three:nth-child(3n),
    main > article.abo > section.box.one {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-column-gap: 1.75rem;
        grid-template-areas:
        "top center"
        "top center"
        "top bottom";
        align-items: end;
        grid-template-rows: auto;
    }

    main > article.abo:not(.service):not(.video) > section.box.three:nth-child(3n) > .top,
    main > article.abo > section.box.one > .top {
        min-height: calc(100% + 2rem);
        grid-area: top;
        width: auto;
        border-radius: inherit;
        top: 2rem;
    }

    main > article.abo:not(.service):not(.video) > section.box.three:nth-child(3n) > .top img,
    main > article.abo > section.box.one > .top img {
        max-width: min-content;
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        margin: auto;
        max-height: -webkit-min-content;
    }

    main > article.abo:not(.service):not(.video) > section.box.three:nth-child(3n) > .center,
    main > article.abo > section.box.one > .center {
        grid-area: center;
        padding: 2rem 0 0 0;
    }

    main > article.abo > section.box.one.notice > .center {
        padding: 1rem 0 0 0;
    }

    main > article.abo:not(.service):not(.video) > section.box.three:nth-child(3n) > .bottom,
    main > article.abo > section.box.one > .bottom {
        grid-area: bottom;
    }

    main > article.abo:not(.service):not(.video) > section.box.three:nth-child(3n) > .bottom,
    main > article.abo > section.box.one > .bottom {
        grid-area: bottom;
        display: inline-grid;
        grid-template-columns: max-content auto;
        align-items: end;
        justify-content: space-between;
    }

}
@media (min-width: 1024px) {
    body > header.large ~ main#main,
    body > main {
        margin: 60px auto 0 auto;
    }
}

@media (min-width: 1400px) {
    main > article {
        margin: 0 auto;
    }

    main > article > section.box {
        width: 100%;
        margin: 0 1rem 2rem 1rem;
    }

    main > article > section.box.fullWidth {
        padding: 1.25rem;
    }

    main > article.abo > section.box {
        grid-template-rows: 180px;
    }

    main > article.abo:not(.video) > section.box > div.top {
        height: 180px;
    }

    main > article.abo > section.box.two > .top {
        width: 668px;
    }

    main > article.abo > section.box.three > .top {
        width: 435px;
    }

    main > article.abo.service > section.box .top {
        height: auto;
    }

    main > article.abo > section.box.three,
    main > article.abo > section.box.three:nth-child(3n) {
        width: calc(33.3% - 2rem);
    }

    main > article.twoThirds {
        margin: .75rem auto 1.25rem 1.5rem;
    }

    main > article.twoThirds h2 {
        margin: 0;
    }

    body > main > article section.variant_true,
    body > main > article section.debit {
        flex-direction: column;
    }

    main > article.abo > section.box.two {
        width: calc(50% - 2rem);
    }

    main > article.abo > section.box.one,
    main > article.abo > section.box.two {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-column-gap: 1.75rem;
        grid-template-areas:
        "top center"
        "top center"
        "top bottom";
        align-items: end;
        grid-template-rows: auto;
    }

    main > article.abo > section.box.two {
        grid-template-areas:
        "top center"
        "top bottom";
        padding: 0 1.75rem 1.75rem;
    }

    main > article > section.box.three.abstract.notice {
        order: 2;
    }

    main > article.abo > section.box.two > .top,
    main > article.abo > section.box.one > .top {
        min-height: calc(100% + 2rem);
        grid-area: top;
        width: auto;
        border-radius: inherit;
        top: 2rem;
    }

    main > article.abo > section.box.two > .top img,
    main > article.abo > section.box.one > .top img {
        max-width: min-content;
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        margin: auto;
    }

    main > article.abo > section.box.two > .top img {
        max-height: 160px;
    }

    main > article.abo > section.box.two > .center,
    main > article.abo > section.box.one > .center {
        grid-area: center;
        padding: 1.75rem 0 0 0;
    }

    main > article.abo > section.box.one.notice > .center {
        grid-area: center;
        padding: 1rem 0 0 0;
    }

    main > article.abo > section.box.two > .bottom,
    main > article.abo > section.box.one > .bottom {
        grid-area: bottom;
        display: inline-grid;
        align-items: end;
        justify-content: space-between;
        grid-gap: .5rem;
    }

    main > article.abo > section.box.two > .bottom span.price {
        margin: 0;
    }

    main > article.notice.service {
        margin: 0 auto 1rem auto;
        left: 900px;
    }

}