@import "base.css";
@import "header.css";

#masthead {
    /*background: linear-gradient(-40deg, #3E4766 0, #FFFFFF 100%);*/
    /*background-image: url("/image/background.jpg");*/
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    overflow: auto;
    margin-top: calc(-1 * var(--header-height));
    padding-top: calc(2 * var(--header-height) + 2em);
}

#masthead section {
    margin: 1em auto 0 auto;
    max-width: 1226px;
}

.tagline {
    text-align: center;
    font-size: 3em;
}

.tagline > span {
    background-color: rgba(0, 0, 0, 0.15);
    display: inline-block;
    border-radius: 5px;
    padding: 0.1em 1em;
    color: #fff;
    font-weight: bold;
}

.download {
    margin: 1em 0;
    text-align: center;
}

.download-button {
    text-align: center;
    flex: 1;
    margin-left: var(--microsoft-store-widht-mobile);
}

@media (min-width: 1200px) {
    .download-button {
        margin-left: var(--microsoft-store-widht);
    }
}

.download-button > a:hover {
    border: 2px solid transparent;
}

.download-button > a {
    border: 2px solid rgba(255, 255, 255, 0.6);
    padding: 0.5em 2em;
    display: inline-block;
    background-color: #1BA3EF;
    text-decoration: none;
    font-size: 1em;
    border-radius: 5px;
    color: white;
}

.current-version {
    margin-top: 0.5em;
    font-size: 0.7em;
}

.download-container {
    display: flex;
    align-items: center;
    margin: 1em 0;
}

.free-evaluation {
    text-align: center;
    color: white;
    font-size: 0.8rem;
}

.free-evaluation > a {
    color: white;
}

.microsoft-store {
    display: block;
    margin-right: auto;
    margin-left: auto;
    visibility: hidden;
}

.microsoft-store > img {
    width: var(--microsoft-store-widht-mobile);
    display: block
}

@media (min-width: 1200px) {
    .microsoft-store > img {
        width: var(--microsoft-store-widht);
    }
}

#screencast-wrap {
    box-shadow: 0 0 20px rgb(0 0 0 / 30%);
    width: 100%;
    max-height: 733px;
    overflow: hidden;
}

@media (min-width: 1200px) {
    #screencast-wrap {
        min-height: 733px;
        position: relative;
    }
}

.carousel-item {
    opacity: 0;
    display: none;
    width: 100%;
}

@media (min-width: 1200px) {
    .carousel-item {
        position: absolute;
        display: block;
        transition: opacity 0.5s linear;
    }
}

.carousel-item.active {
    opacity: 1;
    display: block;
}

.carousel-item > img {
    display: block;
    width: 100%;
}


.screencast-meta {
    max-width: 1226px;
    margin: 0 auto;
    background-color: white;
    padding: 0 2em 1em 2em;
    box-shadow: 0 0 20px rgb(0 0 0 / 8%);
}

#jump-container {
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.jump-title {
    font-weight: bold;
    color: #484D4D;
}

.jump-describe {
    margin-top: 0.5em;
    color: #484D4D;
}

.screencast-meta a.active .jump {
    background-color: #888;
}

.screencast-meta a:hover .jump {
    background-color: #666;
}

#jump-describe-wrapper > div {
    display: none;
}

#jump-describe-wrapper > div.active {
    display: block;
}


.screencast-meta a {
    padding: 2px 4px;
    text-decoration: none;
}

.jump {
    border-radius: 2px;
    background-color: #ccc;
    height: 4px;
    width: 35px;
    display: inline-block;
    transition: background-color 0.15s ease-in-out;
}

.swimlane {
    max-width: 1226px;
    background-color: white;
    margin: 3em auto 0 auto;
    box-shadow: 0 0 20px rgb(0 0 0 / 8%);
    overflow: auto;
}

.main-feature {
    margin: 0 2em 2em 2em;
}

.our-user {
    background-color: #F9F9F9;
    overflow: auto;
}

.love {
    font-size: 2em;
    text-align: center;
}

.love > span {
    background-color: rgba(0, 0, 0, 0.05);
    display: inline-block;
    border-radius: 5px;
    padding: 0.1em 1em;
    color: #484D4D;
    font-weight: bold;
}

.feature-container {
    display: grid;
    grid-gap: 4em;
    grid-template-columns: 1fr;
    margin: 0 1em;
}

@media (min-width: 50em) {
    .feature-container {
        grid-template-columns: 1fr 1fr;
        margin: 0 3em;
    }
}

.feature-container h3 {
    color: #484D4D;
    font-size: 1.5em;
    margin: 0 0 0.5em 0;
    font-weight: normal;
}

.feature-container p {
    color: #484D4D;
}

.feature-item {
    display: flex;
    align-items: center;
}

.feature-item {
    margin-top: 2em;
}

.icon {
    width: 4em;
}

@media (min-width: 50em) {
    .icon {
        width: 120px;
        height: 120px;
    }
}

.icon-right {
    margin-right: 2em;
}

.icon-left {
    margin-left: 2em;
}


@media (min-width: 50em) {
    .icon.little {
        width: 105px;
    }

    .icon.littler {
        width: 95px;
    }

    .icon.small {
        width: 100px;
        height: 100px;
    }
}

.user-evaluation {
    display: flex;
    justify-content: space-around;
    margin: 0 0 2em 0;
    color: #484D4D;
}

.review {
    background-color: white;
    border-radius: 5px;
    width: 30%;
    box-shadow: 0 0 20px rgb(0 0 0 / 8%);
}

.review-header {
    text-align: center;
    margin: 0.5em 0;
}

.review-header > a {
    text-decoration: none;
    color: inherit;
}

.review-body {
    margin: 0 1em 1em 1em;
}

.review-body > p {
    margin: 0;
}

.feature-list {
    background-color: white;
    color: #666;
    margin: 2em 2em;
}

.feature-list > ul > li {
    line-height: 2;
}

.redisant-family {
    background-color: #F9F9F9;
    overflow: auto;
    color: #484D4D;
}

.family-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-gap: 2em;
    padding: 0 1em 1em 1em;
}

.family-container .microsoft-store {
    display: none;
}

@media (min-width: 50em) {
    .family-container {
        grid-template-columns: 1fr 1fr;
        padding: 0 2em 2em 2em;
    }

    .family-container .microsoft-store {
        display: initial;
    }
}

.about-us {
    background-color: white;
    color: #666;
    margin: 2em 2em;
}

.about-us-detail {
    display: flex;
    justify-content: space-around;
}

.about-us .about-us-title {
    font-size: 1rem;
    font-weight: normal;
    text-transform: none;
}

.about-us .card {
    text-align: center;
}

.about-us .card-img-top {
    border-radius: 50%;
}

.about-us .card-title {
    font-size: 1em;
    font-weight: bold;
}

.about-us .card-text {
    font-size: 0.9em;
}

.product-group {
    display: flex;
    justify-content: space-around;
}

.product-card {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 20px rgb(0 0 0 / 8%);
    padding-bottom: 1em;
}

.product-card-icon {
    width: 4em;
}

@media (min-width: 50em) {
    .product-card-icon {
        width: 64px;
    }
}

.product-card-header {
    display: flex;
    align-items: center;
}

.product-card-header {
    margin: 1em;
}

.product-card-header > img {
    margin-right: 1em;
}

.product-card-header > span {
    font-size: 1.5em;
}

@media (min-width: 50em) {
    .product-card-header > span {
        font-size: 2em;
    }
}

.product-card-body {
    margin: 0 1em;
    flex: 1;
}


.product-card-buttons {
    text-align: center;
}

.product-card-buttons > a:hover {
    border: 2px solid transparent;
}

.product-card-buttons > a {
    border: 2px solid rgba(255, 255, 255, 1);
    padding: 0.6em 0;
    min-width: 200px;
    display: inline-block;
    background-color: #1BA3EF;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    border-radius: 5px;
    color: white;
}


footer {
    background-color: #EEEEEE;
    overflow: auto;
    padding: 0 1em;
    color: darkgray;
}

footer > div {
    max-width: 1126px;
    margin: 0 auto;
}

footer p {
    text-align: center;
}

.beian {
    text-align: center;
    overflow: auto;
    margin: 1em auto;
}

footer a {
    text-decoration: none;
    color: inherit;
}