@charset "utf-8";

.monitor-extra header {
    position: relative;
    width: 100%;
    height: 400px;
}
.monitor-extra .img-wrapper {
    background-image: url(../images/bgg.jpg);
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
}
.monitor-extra .img-wrapper h1 img {
    max-width: 50%;
    margin: 2em auto 0;
    padding: .3em;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #fff;
    box-shadow: 0 0 5px #333;
}
.monitor-extra.igo h2 span {
    display: block;
    font-size: 80%;
    margin: 0 0 .2em;
}
.monitor-extra.igo .circle {
    display: none;
}
.monitor-extra.igo .tutor a img {
    padding: 0 0 1em;
    width: 100%;
    max-width: 140px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}
.lesson-card > .inner {
    border: 1px solid #ccc;
    padding: .5em;
    width: 100%;
}
.lesson-card .img img {
}
.gs-lesson-ver3 {
    width: 100%;
    margin: 0 auto;
    padding: 0 1em;
}
.gs-lesson-ver3: {
    width: 100%;
    margin: 0 auto;
}
.lesson-card .des {
    position: relative;
}
.lesson-card .des .inner {
    background-color: #f9f9f9;
    padding: 0 1em .5em 1em;
    width: 100%;
}
.lesson-card .des p {
    font-size: .85em;
    line-height: 1.25;
}
.lesson-card .des .point {
    font-weight: bold;
    margin: .25em 0;
    font-size: 1em;
}
.lesson-card .tutor-name {
}
.lesson-card span {
    position: absolute;
    right: -.5em;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 16px;
    height: 42px;
    background-color: #3eadd0;
    line-height: 42px;
    text-align: center;
    color: #fff;
    font-weight: bold;
}

/* - ## x >= 769px
 ------------------------------------------------------------ */
@media screen and (min-width:769px) {
    .monitor-extra.igo .circle {
        position: absolute;
        bottom: -18px;
        right: 5em;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background-color: #f78d1c;
        text-align: center;
        padding: .6em 0 0 0;
        font-weight: bold;
        font-size: 2em;
        line-height: 1.2;
        border: 2px dashed #fff;
        box-shadow: 0 0 0 4px #f78d1c;
        color: #fff;
    }
}

/* - ## x >= 1025px / 64.0625em lg
 ------------------------------------------------------------ */
@media screen and (min-width:1025px) {
    .monitor-extra [class*=details-]:nth-of-type(odd) {
        border-right: 1px dotted #ccc;
    }
}