.stem-page .scroll-section .tab-bar {
    width: 20%;
    position: absolute;
    left: 20px;
    padding-top: 69px;
}

.stem-page .scroll-section .tab-bar.sticky {
    top: 150px;
    position: fixed;
}

.stem-page .scroll-section {
    /* display: flex; */
    /* align-items: flex-start; */
    padding-bottom: 99px;
    width: 100%;
    overflow: hidden;
}


.stem-page {
    padding: 17px 0 0;
}

.stem-page .scroll-section .tab-bar .title-tab_bar .active {
    letter-spacing: 0.015em;
    color: #F87513;
    padding-left: 16px;
    position: relative;
}

.stem-page .scroll-section .tab-bar .title-tab_bar a {
    /*  font-size: 15px;*/
    font-size: 16px;
    line-height: 21px;
/* identical to box height, or 140% */
    color: #2D2D2D;
    display: inline-block;
    transition-duration: .3s;
}

.stem-page .scroll-section .tab-bar .title-tab_bar a:hover {
    color: #F87513;
    text-decoration: none;
}

.stem-page .scroll-section .tab-bar .title-tab_bar a{
    position: relative;
}

.stem-page .scroll-section .tab-bar .title-tab_bar a:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 1px;
    width: 2px;
    height: 17px;
    background: #F87513;
    opacity: 0;
    transition-duration: .3s;
}

.stem-page .scroll-section .tab-bar .title-tab_bar a.active:before{
    opacity: 1;
}

.stem-page .scroll-section .tab-bar h6 {
    margin-bottom: 25px;
    max-width: 160px;
}

.scroll-section .scroll-section-content h2 {
    margin-bottom: 47px;
    color: #2D2D2D;
}

.stem-page .section-content img {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.scroll-section .scroll-section-content a.button {
    margin-top: 18px;
    /* height: 50px; */
    /* padding: 11px 50px; */
    padding: 14px 51px;
}

.scroll-section .scroll-section-content p a{
    color: #386AAF;
    text-decoration: underline;
}

.scroll-section .scroll-section-content p a:hover {
    text-decoration: none;
}

.scroll-section .scroll-section-content p {
    margin-bottom: 29px;
}


.workshop-date .date {
    font-size: 14px;
    line-height: 24px;
/* identical to box height, or 171% */
    color: #5F5E59;
}


.stem-page .workshop-title {
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
/* identical to box height, or 136% */
    letter-spacing: 0.015em;
    color: #000000;
    margin-bottom: 20px;
}

.workshop-date {
    margin-top: 17px;
    margin-bottom: 4px;
}

.workshop-item {
    margin-bottom: 50px;
}

.stem-page .scroll-section .scroll-section-content>.section-content {
    overflow: hidden;
    padding-top: 69px;
}

.workshop-item:last-child {
    margin-bottom: 0px;
}
.workshop-item:last-child p:last-child {
    margin-bottom: 7px;
}


.recommended-content {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 -21.5px;
}

.recommended-content .recommended-item {
    width: 33.333%;
    padding: 0 21.3px;
    margin-bottom: 40px;
}

.recommended-content .recommended-item .item-inner {background: #F6F7FA;padding-bottom: calc(322/253 * 100%);position: relative;margin-bottom: 13px;}

.stem-page .section-content .item-inner img {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 64px);
    width: auto;
    transition-duration: .3s;
}
.stem-page .section-content .item-inner a{
    display: inline-block;
    overflow: hidden;
}
.stem-page .section-content .item-inner a:hover img{
    transform: translate(-50%, -50%) scale(1.02);
}

.recommended_subjectname span {
    font-weight: 400;
    font-size: 13px;
    line-height: 26px;
/* identical to box height, or 200% */
    color: #909090;
    margin-bottom: 3px;
    display: inline-block;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    background: transparent;
    border: 1px solid #D9D9D9;
    margin: 0 5px;
    opacity: 1;
    width: 7px;
    height: 7px;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #d9d9d9;}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizonta {
    bottom: 14px;
}

.recommended-content .recommended-item  a:not(:hover) {
    color: #2D2D2D;
}


@media (min-width: 768px){


.stem-page .scroll-section .scroll-section-content {
    width: 74.2%;
    margin-left: 25.8%;
}
    .page-template-stem .background-image1:before{
        top: 992px;
        left: -747px;
        display: inline-block;
}


.background-image1:after {
    top: 3342px;
    left: -633px;
    display: inline-block;
    /* opacity: 1; */
}
.background-image2:before {
    top: 2499px;
    right: -873px;
    display: inline-block;
    /* opacity: 1; */
}
}

@media (min-width: 1180px){
    .stem-page .scroll-section .tab-bar{
        left: calc((100vw - 1180px)/ 2 + 20px);
    }
}

@media (min-width: 1440px){
    .admin-bar .stem-page .scroll-section .tab-bar.sticky {
        top: 181px;
    }
}
@media (max-width: 1199px){
    .recommended-content .recommended-item {
    padding: 15px;
}
.recommended-content {
    margin: 0 -15px;
}

.scroll-section .scroll-section-content h2 {
    margin-bottom: 30px;
}
}

@media (max-width: 991px){
    .recommended-content .recommended-item {
    width: 50%;
    padding: 0 10px;
    margin-bottom: 20px;
}

.stem-page .scroll-section {
    padding-bottom: 60px;
}

.recommended-content {
    margin: 0 -10px;
}

.stem-page {
    padding: 10px 0 0;
}
}

@media (max-width: 767px){
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizonta {
    bottom: 2px;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    margin: 0 4px;
}
    .page-template-stem 
 .background-image1:before {
    left: -399px;
    top: 393px;
}

.page-template-stem .background-image1:after {
    top: 824px;
    right: -401px;
    display: inline-block;
    left: auto;
}

.page-template-stem .background-image2:before {
    left: -362px;
    top: 1320px;
}

.page-template-stem .background-image2:after {
    top: 1760px;
}

.page-template-stem .background-image3:before {
    bottom: 147px;
}

.page-template-stem .background-image3:after {
    display: inline-block;
    top: 2251px;
    left: -399px;
}
    .stem-page .scroll-section .tab-bar {
    display: none;
}

.stem-page .scroll-section .tab-bar {
    width: 100%;
}

.stem-page .scroll-section .scroll-section-content {
    width: 100%;
}

    .recommended-content .recommended-item {
    width: 33.33%;
}

.stem-page {
    padding: 7px 0 0;
}

.scroll-section .scroll-section-content h2 {
    margin-bottom: 21px;
}

.scroll-section .scroll-section-content p {
    margin-bottom: 27px;
}

.scroll-section .scroll-section-content a.button {
    height: 42px;
    font-size: 13px;
    line-height: 18px;
    padding: 12px 30px;
    letter-spacing: 0;
    margin-top: -2px;
}

.stem-page .scroll-section .scroll-section-content>.section-content {
    padding-top: 42px;
}

.workshop-date {
    margin-top: 26px;
}


.workshop-item:last-child {
    margin-bottom: 3px;
}

.workshop-item:last-child p:last-child {
    margin-bottom: 8px;
}

.stem-page .section-content .item-inner img {
    max-width: calc(100% - 32px);
    max-height: calc(100% - 36px);
}

.recommended_subjectname span {
    margin-bottom: 5px;
}

.stem-page .scroll-section {
    padding-bottom: 83px;
}
}

@media (max-width: 525px){
    .recommended-content .recommended-item {
    width: 50%;
}
}