@import "workspace.css";
@media (max-width: 768px) {
    header article h1 {
        letter-spacing: 0.1875rem;
    }
    header article h1 {
        font-size: 1.25rem;
    }
    header article h1 strong {
        letter-spacing: 6.0.15625rem;
    }
    .request_free {
        font-size: 1rem;
    }
    .item h2 {
        font-size: 2.1875rem;
        letter-spacing: 0.03125rem;
    }
    .section-second .content h3 {
        font-size: 0.9375rem;
    }
    .section-second dl dt:after {
        height: 0.25rem;
    }
    .section-second dl dd p {
        font-size: 0.65625rem;
    }
    footer h1 {
        font-size: 1.25rem;
        letter-spacing: 4.0.15625rem;
    }
    footer h1 strong {
        letter-spacing: 5.0.15625rem;
    }
    footer p {
        font-size: 0.65625rem;
    }
    footer h4 {
        font-size: 0.6875rem;
    }
    .modal-close {
        top: 0.46875rem;
        right: 0.46875rem;
        font-size: 1.09375rem;
    }
    .modal-wrap aside ul.modal-slider li article h2 {
        font-size: 1.5rem;
    }
    .modal-wrap aside ul.modal-slider li article h2 span {
        font-size: 1.15625rem;
    }
    .modal-wrap aside ul.modal-slider li article p {
        font-size: 0.6875rem;
    }
    .modal-wrap aside ul.modal-slider li article .request_free {
        font-size: 0.8125rem;
        padding: 0.5rem;
    }
    .modal_asNavFor li {
        height: 4.6875rem;
        width: 4.6875rem;
    }
    .modal-wrap aside ul.modal-slider li article ul {
        font-size: 0.6875rem;
    }
    footer .request_free {
        padding: 0.46875rem 0.625rem;
    }
    .modal_asNavFor li div span {
        font-size: 0.4rem;
        padding: 0.1rem 0.3rem;
        border-radius: 500px;
    }
    .social-media {
        width: 80%;
    }
}
@media (max-width: 980px) {
    .remote-teaching_asNavFor .AS311-click div span {
        top: 132%;
        right: -180%;
    }
    .remote-teaching_asNavFor .PW315-click div span {
        top: -44%;
        left: 52%;
    }
    .remote-teaching_asNavFor .PW313D-click div span {
        top: -8%;
        left: 44%;
    }
    .content-creating_asNavFor .AX310-click div span {
        top: -40%;
        left: 62%;
    }
    .content-creating_asNavFor .BU113-click div span {
        top: 174%;
        left: 140%;
    }
    .content-creating_asNavFor .BA311-click div span {
        top: -18%;
        left: 48%;
    }
    .hybrid-working_asNavFor .AS311-click div span {
        top: -46%;
        left: 50%;
    }
    .hybrid-working_asNavFor .PW515-click div span {
        top: -45%;
        left: 52%;
    }
    .remote-teaching_asNavFor .AS311-click[style], .remote-teaching_asNavFor_hover .AS311-click {
        top: 79.5%;
        left: 6.3%;
        width: 16% !important;
        height: 15%;
    }
    .remote-teaching_asNavFor .PW315-click[style], .remote-teaching_asNavFor_hover .PW315-click {
        top: 19%;
        left: 29.5%;
        width: 18.4% !important;
        height: 12.5%;
    }
    .remote-teaching_asNavFor .PW313D-click[style], .remote-teaching_asNavFor_hover .PW313D-click {
        top: 72%;
        right: 4.3%;
        width: 21.5% !important;
        height: 38%;
    }
    .content-creating_asNavFor .AX310-click[style], .content-creating_asNavFor_hover .AX310-click {
        top: 67%;
        left: 13.04%;
        width: 17.23% !important;
        height: 15%;
    }
    .content-creating_asNavFor .BU113-click[style], .content-creating_asNavFor_hover .BU113-click {
        top: 63.45%;
        left: 34%;
        width: 10% !important;
        height: 7%;
    }
    .content-creating_asNavFor .BA311-click[style], .content-creating_asNavFor_hover .BA311-click {
        top: 55%;
        right: 3%;
        width: 43.6% !important;
        height: 37%;
    }
    .hybrid-working_asNavFor .AS311-click[style], .hybrid-working_asNavFor_hover .AS311-click {
        top: 80%;
        left: 10.2%;
        width: 18% !important;
        height: 16%;
    }
    .hybrid-working_asNavFor .PW515-click[style], .hybrid-working_asNavFor_hover .PW515-click {
        top: 34.8%;
        left: 50.2%;
        width: 19.4% !important;
        height: 13.5%;
    }
    .social-media {
        max-width: 480px;
    }
    .modal-wrap aside ul.modal-slider li article ul {
        padding: 0 0 0 6%;
    }
    .modal-slider-first {
        width: 100% !important;
        height: 100% !important;
    }
}
@media (min-width: 980px) {
    body {
        font-size: 0.13333333333333333rem;
    }
    .content {
        max-width: 12rem;
    }
    .brand {
        width: 20%;
    }
    header {
        height: 58vw;
        background-image: url(../img/header_bg.jpg);
        background-image: -webkit-image-set(url(../img/header_bg.webp) 1x);
    }
    header article {
        text-align: left;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding: 9.1% 13.2% 0 0;
        width: 100%;
    }
    header article h1 {
        letter-spacing: 0.05rem;
        font-size: 0.4rem;
        padding: 0 3.6% 3% 0;
    }
    header article h1 strong {
        letter-spacing: 6.0.041666666666666664rem;
    }
    .section-first {
        display: block;
    }
    .request_free {
        font-size: 0.3333333333333333rem;
        padding: 1.4% 1.6%;
    }
    .item h2 {
        font-size: 0.5833333333333334rem;
        letter-spacing: 0.008333333333333333rem;
    }
    .section-second .content {
        max-width: 11.666666666666666rem;
    }
    .section-second .content h3 {
        font-size: 0.3rem;
    }
    .section-second dl dd:after {
        width: 0.06666666666666667rem;
    }
    .section-second dl dd p {
        font-size: 0.175rem;
    }
    /******************************************************************/
    .modal-wrap {
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .modal-wrap section {
        height: 100vh;
        overflow: hidden;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .modal-close {
        display: block;
    }
    .modal-wrap aside {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .modal-wrap aside ul.modal-slider li article {
        max-width: 80%;
        padding: 30% 0 10%;
    }
    .modal-wrap aside ul.modal-slider li article h2 {
        font-size: 0.4rem;
        margin: 0 0 18%;
    }
    .modal-wrap aside ul.modal-slider li article h2 span {
        font-size: 0.30833333333333335rem;
    }
    .modal-wrap aside ul.modal-slider li article p {
        font-size: 0.18333333333333332rem;
    }
    .modal-wrap aside ul.modal-slider li article .request_free {
        font-size: 0.21666666666666667rem;
    }
    .compatibility_1 img {
        max-width: 1.3333333333333333rem;
    }
    .modal-wrap aside ul.modal-slider li article ul {
        font-size: 0.18333333333333332rem;
        padding: 0 0 0 4%;
    }
    .modal-wrap aside {
        right: 0;
        width: 30%;
    }
    .modal-wrap aside ul.modal-slider li article {
        max-width: 80%;
        padding: 0;
    }
    .modal-wrap aside .slick-list {
        height: 100% !important;
    }
    .modal-wrap aside .slick-track {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
    }
    .modal_asNavFor li div span {
        font-size: 0.15294117647058825rem;
        padding: 0.058823529411764705rem 0.16470588235294117rem;
        border-radius: 0.5882352941176471rem;
    }
    /************************************************************************/
    .section-second dl dt {
        width: 58%;
        padding: 0 5%;
        margin: 0;
    }
    .section-second dl dd:after {
        top: 50%;
        transform: translateY(-50%);
        right: inherit;
        background-color: #e4002b;
        width: 0.06666666666666667rem;
        height: 120%;
    }
    .section-second dl dd {
        width: 42%;
        padding: 0 0 0 4%;
    }
    /*** footer   ****************************************************************/
    footer .content {
        width: 100%;
        max-width: 93%;
    }
    footer h1 {
        font-size: 0.4166666666666667rem;
        letter-spacing: 4.0.041666666666666664rem;
    }
    footer h1 strong {
        letter-spacing: 5.0.041666666666666664rem;
    }
    footer p {
        font-size: 0.18333333333333332rem;
    }
    footer h4 {
        font-size: 0.18333333333333332rem;
    }
    .social-media figure.row a:hover svg {
        fill: #e4002b;
        transform: scale(1.2)
    }
    .social-media {
        margin: 0 auto 10%;
    }
    footer p {
        max-width: 76%;
    }
    footer ul.row li:nth-of-type(1) {
        width: 36.5%;
    }
    footer ul.row li:nth-of-type(2) {
        width: 41%;
        margin: -1.2% 0 0;
    }
    footer ul.row li:nth-of-type(3) {
        width: 17%;
    }
    footer .request_free {
        padding: 3%;
        margin: 0;
    }
}