@media only screen and (max-width:1200px) {
    .rightCommon {
        display: none;
    }
}

@media only screen and (max-height:1024px) {
    .page.pg3>.slides .slide .text .content .datetime {
        font-size: 24px;
        line-height: 30px;
    }
    .page.pg3>.slides .slide.s4>.text .content .event-list a.item {
        margin-bottom: 10px;
        line-height: 19px;
        font-size: 16px;
    }
    .page.pg2 .text {
        width: 85vw;
    }
    .page.pg3>.slides .slide .text .content .description {
        font-size: 16px;
        line-height: 24px;
    }
    .page.pg3>.slides .slide .text .content .location {
        margin-bottom: 0vh;
    }
}

@media only screen and (max-width:1000px) {
    #indicator {
        display: none;
    }
    #main .container {
        height: auto;
        position: inherit;
        font-size: 0;
    }
    .page {
        display: inline-block;
        position: relative;
        top: auto !important;
    }
    .page.on {
        position: relative;
        top: auto !important;
        left: auto;
    }
    #main .page.pg1 .pg1Container {
        min-width: inherit;
        width: 100vw;
    }
    #main .page.pg1 .base {
        width: 100vw;
        left: 50%;
        bottom: 0;
        height: auto;
        top: auto;
    }
    #main .page.pg1 .base.glasses {
        transform: translateY(-150%) translateX(-50%);
    }
    #main .page.pg1 .right {
        display: none;
    }
    #main .page.pg1 .text {
        width: 130vw;
        height: auto;
    }
    #main .page.pg1 .text.text1 {
        height: auto;
        width: 140vw;
    }
    #main .page.pg1 .text.text2 {
        left: -37vw;
        top: 35vw;
    }
    #main .page.pg1 .text.text3 {
        left: -89vw;
        top: 21vw;
    }
    #main .page.pg1 .text.text4,
    #main .page.pg1 .text.text5,
    #main .page.pg1 .text.text6 {
        display: none;
    }
    #main .page.pg1 .date {
        display: block;
        position: absolute;
        left: 8vw;
        top: 56vw;
        width: 23vw;
    }
    #main .page.pg1 .text7 {
        /*top: 55.5vh;*/
        top: auto;
        bottom: calc( 90vw - 24vh);
        left: calc( 105vw - 26.722466960352426vh);
        height: 18vh;
    }
    /******************************************************************************************/
    #main .page.pg2 {
        height: auto;
    }
    #main .page.pg2 .title.topic {
        height: 67vw;
        left: 15px;
    }
    #main .page.pg2 .title.subtitle1 {
        height: 110vw;
        top: -38vw;
        left: calc( -1vw + 10px);
    }
    #main .page.pg2 .title.subtitle2 {
        height: 100vw;
        top: -11vw;
        left: calc( -33.3vw + 10px);
    }
    #main .page.pg2 .title.subtitle3 {
        height: 100vw;
        top: 5vw;
        left: calc( -86.5vw + 10px);
    }
    #main .page.pg2 .text {
        top: 100vw;
        margin: 50px 30px;
        width: calc( 100vw - 60px);
        position: static;
        margin-top: 110vw;
        font-size: 24px;
        line-height: 42px;
        font-weight: 100;
    }
    /******************************************************************************************/
    #main .page.pg3 {
        height: auto;
    }
    #main .page.pg3 .slides {
        white-space: pre-wrap;
        font-size: 0;
        overflow: hidden;
    }
    #main .page.pg3 .slides .slide {
        height: auto;
        white-space: pre-wrap;
        font-size: 0;
    }
    #main .page.pg3 .slides .slide .arrow {
        display: none;
    }
    #main .page.pg3 .slides .slide .photo {
        display: none;
    }
    #main .page.pg3 .slides .slide .text {
        background-color: black;
    }
    #main .page.pg3 .slides .slide .photo.mobile {
        width: 100vw;
        height: 400px;
        background-color: blue;
    }
    #main .page.pg3 .slides .slide .photo.mobile,
    #main .page.pg3 .slides .slide .text {
        display: block !important;
        width: 100vw;
        position: static;
    }
    #main .page.pg3 .slides .slide .text {
        height: auto;
    }
    #main .page.pg3 .slides .slide.s1 .text .title,
    #main .page.pg3 .slides .slide.s2 .text .title,
    #main .page.pg3 .slides .slide.s3 .text .title {
        margin: 0;
        margin-top: 30px;
        margin-left: 30px;
        width: 90vw;
        margin-bottom: -20vw;
    }
    #main .page.pg3 .slides .slide.s4 .text .title,
    #main .page.pg3 .slides .slide.s5 .text .title {
        margin: 0;
        margin-top: 30px;
        margin-left: 30px;
        width: 80vw;
    }
    #main .page.pg3 .slides .slide.s2 .text .title {
        margin-bottom: 0;
    }
    #main .page.pg3 .slides .slide.s5 .text .title {
        width: 100vw;
    }
    #main .page.pg3 .slides .slide.s1 .text .title {
        margin-bottom: -30vw;
    }
    #main .page.pg3 .slides .slide.s1 .text .content .description {
        margin-top: 0;
    }
    #main .page.pg3 .slides .slide.s2 .text .content .description,
    #main .page.pg3 .slides .slide.s3 .text .content .description,
    #main .page.pg3 .slides .slide.s4 .text .content .description,
    #main .page.pg3 .slides .slide.s5 .text .content .description {
        margin-top: -35px;
    }
    #main .page.pg3 .slides .slide.s3 .text .title {
        margin-bottom: -45vw;
    }
    #main .page.pg3 .slides .slide.s4 .text .title {
        margin-bottom: -45vw;
    }
    #main .page.pg3 .slides .slide.s4 .text .event-list {
        margin: 0 30px;
    }
    #main .page.pg3 .slides .slide.s4 .text .event-list {
        font-size: 20px;
    }
    #main .page.pg3 .slides .slide.s4 .text .event-list .title-block {
        font-size: 24px;
        line-height: 30px;
    }
    #main .page.pg3 .slides .slide.s5 .text .title {
        margin-bottom: -12vw;
    }
    #main .page.pg3 .slides .slide .text .content {
        position: static;
        top: auto;
        left: auto;
        width: auto;
        margin: 0;
    }
    #main .page.pg3 .slides .slide .text .content .datetime,
    #main .page.pg3 .slides .slide .text .content .location {
        font-size: 28px;
        margin: 0 30px;
        line-height: 40px;
        white-space: normal;
    }
    #main .page.pg3 .slides .slide .text .content .description {
        font-size: 28px;
        width: calc( 100vw - 60px);
        margin: 30px;
        letter-spacing: 1px;
        font-weight: 100;
        line-height: 40px;
    }
    #main .page.pg3 .slides .slide .text .more {
        position: static;
        font-size: 18px;
        margin: 0 25px;
    }
    #main .page .popup .x {
        z-index: 100000;
        pointer-events: all;
        right: 25px;
        top: 25px;
        width: 50px;
    }
    #main .page .popup {
        overflow: auto;
    }
    #main .page .container {
        width: 100vw;
        font-size: 20px;
        line-height: 32px;
        height: auto;
        position: static;
        padding: 25px;
        box-sizing: border-box;
    }
    #main .page .container img:not(.x) {
        max-width: 450px
    }
    #main .page.pg3 .mobileContent .entry .popup .container .slideshow {
        width: 450px;
    }
    #main .page.pg3 .mobileContent .entry .popup .container .slideshow .photos {
        width: 450px;
    }
    #main .page.pg3 .mobileContent .entry .popup .container .slideshow .photos img {
        width: 450px;
    }
    #main .page.pg3 .mobileContent .entry .popup .vertical {
        max-width: inherit;
        float: none;
        display: block;
        font-size: 20px;
        margin: 10px 0;
    }
    #main .page.pg3 .mobileContent .entry .popup .container .content {
        width: calc(100vw - 50px);
        max-width: inherit;
        margin: 0;
    }
    /******************************************************************************************/
    #main .page.pg4 {
        height: auto;
    }
    #main .page.pg4 .title .t1 {
        width: 650px;
        top: 50px;
        left: 30px;
    }
    #main .page.pg4 .title .t2 {
        width: 621px;
        left: -320px;
        top: 115px;
    }
    #main .page.pg4 .menu {
        display: none;
    }
    #main .page.pg4 div.tables {
        display: none;
    }
    #main .page.pg4 .mobileMenu {
        display: block;
        white-space: pre-wrap;
        font-size: 0;
        line-height: 0;
    }
    #main .page.pg4 .mobileMenu a {
        position: relative;
        line-height: 9px;
        display: block;
        padding: 48px 40px;
        box-sizing: border-box;
        margin: 0 10px;
        font-size: 28px;
        color: white;
        font-weight: 100;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    #main .page.pg4 .mobileMenu a .circle {
        font-family: "Courier New";
        font-weight: lighter;
        font-size: 30px;
        text-align: center;
        line-height: 44px;
        vertical-align: middle;
        position: absolute;
        right: 20px;
        top: 30px;
        width: 46px;
        height: 46px;
        border: 2px solid rgba(255, 255, 255, 0.8);
        border-radius: 10000px;
    }
    #main .page.pg4 .mobileMenu a:last-child {
        border: 0;
    }
    #main .page.pg4 .mobileContent {
        color: white;
        font-size: 18px;
    }
    #main .page.pg4 .mobileContent .entry {
        margin: 0 25px;
        padding: 30px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    #main .page.pg4 .mobileContent .entry:last-child {
        border: 0;
    }
    #main .page.pg4 .mobileContent .entry .name {
        font-size: 36px;
    }
    #main .page.pg4 .mobileContent .entry .datetime,
    #main .page.pg4 .mobileContent .entry .location {
        font-size: 20px;
    }
    #main .page.pg4 .mobileContent .entry .popup .container .slideshow {
        width: 450px;
    }
    #main .page.pg4 .mobileContent .entry .popup .container .slideshow .photos {
        width: 450px;
    }
    #main .page.pg4 .mobileContent .entry .popup .container .slideshow .photos img {
        width: 450px;
    }
    #main .page.pg4 .mobileContent .entry .popup .vertical {
        max-width: inherit;
        float: none;
        display: block;
        font-size: 20px;
        margin: 10px 0;
    }
    #main .page.pg4 .mobileContent .entry .popup .container .content {
        width: calc(100vw - 50px);
        max-width: inherit;
        margin: 0;
    }
    /******************************************************************************************/
    #main .page.pg5 {
        height: auto;
        min-height: 100vh;
    }
    #main .page.pg5 .title .subtitle1 {
        width: 600px;
    }
    #main .page.pg5 .title .subtitle2 {
        width: 600px;
        top: 120px;
        left: -169px;
    }
    #main .page.pg5 .content {
        padding-top: 0;
    }
    #main .page.pg5 .content ul li {
        background-color: transparent;
        border-bottom: 1px solid white;
        padding: 35px 0;
        text-decoration: none;
        margin-left: -15px;
        width: calc( 100vw - 90px);
        box-sizing: border-box;
        padding-right: 40px;
        position: relative;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    #main .page.pg5 .content ul li:last-child {
        border: 0;
        margin-bottom: 10vw;
    }
    #main .page.pg5 .content ul li div.line {
        width: 40px;
        right: 5px;
        left: auto;
        top: 50px;
    }
    #main .page.pg5 .content ul li div.arrowUp {
        right: 2px;
        left: auto;
        top: 41px;
    }
    #main .page.pg5 .content ul li div.arrowDown {
        right: 2px;
        left: auto;
        top: 60px;
    }
    /******************************************************************************************/
    #main .page.pg6 {
        height: auto;
    }
    #main .page.pg6 .content table.contact {
        display: none;
    }
    #main .page.pg6 .mobile {
        display: block;
        margin: 0 30px;
        margin-top: 18vw;
        font-size: 24px;
        font-weight: lighter;
        color: white;
    }
    #main .page.pg6 .mobile .entry {
        border-bottom: 1px solid white;
    }
    #main .page.pg6 .mobile .entry:last-child {
        border: 0;
    }
    #main .page.pg6 .mobile .entry .name,
    #main .page.pg6 .mobile .entry .tel,
    #main .page.pg6 .mobile .entry .website {
        margin: 24px 0;
    }
    #main .page.pg6 .mobile .entry .name {
        font-weight: bolder;
        font-size: 28px;
    }
    #main .page.pg6 .title .topic {
        height: 40vw;
        left: 30px;
        width: 520px;
    }
    #main .page.pg6 .title .subtitle {
        height: 110vw;
        top: -22vw;
        left: 33px;
        width: 400px
    }
    #main .page.pg6 .mobileBottom {
        display: block;
        position: static;
        padding-left: 30px;
        width: calc( 100vw - 60px);
    }
    #menu {
        padding: 0;
        box-sizing: border-box;
        background-color: #444;
        top: -50px;
        right: 0px;
        position: absolute;
        width: 100vw;
        left: auto;
        color: white;
        font-size: 24px;
        height: auto;
        text-align: center;
        line-height: 24px;
        vertical-align: middle;
        min-height: 50px;
        max-height: 0;
        transition: all 1s;
        pointer-events: none;
        overflow: hidden;
    }
    #menu.on {
        top: 0;
        transition: all 1s;
        pointer-events: all;
    }
    #menu.show {
        padding: 12px 0;
        padding-top: calc( 22px + 50px);
        max-height: 100vh;
        transition: all 1s;
        height: auto;
        pointer-events: all;
    }
    #menu .back {
        font-family: "Courier New";
        line-height: 52px;
        z-index: 1000000;
        color: white;
        left: 15px;
        top: 0;
        position: absolute;
        font-size: 30px;
        vertical-align: middle;
        padding: 0;
        margin: 0;
        display: none;
    }
    #menu .back.on {
        display: block;
    }
    #menu .back a {
        opacity: 1.0;
        padding: 0;
        margin: 0;
    }
    #menu .back a:hover,
    #menu .back a:active {
        text-decoration: none;
    }
    #menu i {
        display: block;
        opacity: 0;
        line-height: 36px;
    }
    #menu .lang {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #333;
        width: 100vw;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        line-height: 50px;
        opacity: 1.0;
    }
    #menu .lang a {
        opacity: 1.0;
        margin: 0 10px;
    }
    #menu>div .subMenu,
    #menu>div:hover .subMenu {
        display: block;
    }
    #menu>div .subMenu {
        width: 100vw;
        position: static;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 1s;
        transform: none;
        margin-top: 0px;
        border: 0;
        font-size: 28px;
        pointer-events: none;
    }
    #menu>div .subMenu.on {
        opacity: 1.0;
        max-height: 100vh;
        margin-top: 30px;
        transition: all 1s;
        pointer-events: all;
    }
    #menu>div:hover .arrow-up {
        top: unset;
        bottom: 191px;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 15px solid white;
    }
    #menu>div .subMenu>a {
        margin: 30px 0;
    }
    #menu img.mobile {
        width: 50px;
        display: block;
        position: absolute;
        right: 25px;
        top: 0px;
    }
    #menu img.mobile.on,
    #menu img.mobile:active {
        filter: invert(1.0);
        background-color: black;
    }
    #menu div:not(.lang):not(.back),
    #menu>i {
        pointer-events: none;
    }
    #menu.show div:not(.lang) {
        pointer-events: all;
    }
    #menu.show div:not(.lang) a {
        display: block;
        opacity: 1.0;
        transition: all 1s;
        pointer-events: all;
    }
    #menu.show>div:not(.lang):not(.back):last-child {
        margin-bottom: 20px;
    }
    #menu a {
        opacity: 0;
        text-align: center;
        transition: all 1s;
    }
    body.bd-school-activity-2018 .subpage.container table,
    body.bd-school-activity-2018 .subpage.container td,
    body.bd-school-activity-2018 .subpage.container tbody,
    body.bd-collage-activity-2018 .subpage.container table,
    body.bd-collage-activity-2018 .subpage.container td,
    body.bd-collage-activity-2018 .subpage.container tbody {
        display: inline-block;
        height: auto !important;
        border: 0 !important;
        padding: 0 !important;
        width: auto !important;
        line-height: 20px !important;
    }
    body.bd-school-activity-2018 .subpage.container table tr,
    body.bd-collage-activity-2018 .subpage.container table tr {
        display: block;
        height: auto !important;
        border: 0;
        border-bottom: 1px solid white;
    }
    body.bd-school-activity-2018 .subpage.container table>tbody>tr:first-child,
    body.bd-collage-activity-2018 .subpage.container table>tbody>tr:first-child {
        display: none;
    }
    body.bd-school-activity-2018 .subpage.container tr,
    body.bd-collage-activity-2018 .subpage.container tr {
        padding: 25px 0;
    }
    body.bd-school-activity-2018 .subpage.container tr:last-child,
    body.bd-collage-activity-2018 .subpage.container tr:last-child {
        border: 0;
    }
    body.bd-school-activity-2018 .subpage.container table tr td:nth-child(3),
    body.bd-collage-activity-2018 .subpage.container table tr td:nth-child(3) {
        width: 100% !important;
    }
    body.bd-school-activity-2018 .subpage.container table tr td:nth-child(4),
    body.bd-collage-activity-2018 .subpage.container table tr td:nth-child(4) {
        width: 100% !important;
        margin: 20px 0;
        font-size: 30px !important;
        line-height: 32px !important;
    }
    body.bd-school-activity-2018 .subpage.container table tr td:nth-child(5),
    body.bd-collage-activity-2018 .subpage.container table tr td:nth-child(5) {
        margin: 10px 0;
    }
    body.bd-school-activity-2018 .subpage.container table tr td:nth-child(7),
    body.bd-collage-activity-2018 .subpage.container table tr td:nth-child(7) {
        margin: 10px 0;
    }
    body.bd-school-activity-2018 .subpage.container table tr td mobile,
    body.bd-collage-activity-2018 .subpage.container table tr td mobile {
        display: inline-block;
    }
    body.bd-school-activity-2018 td.empty,
    body.bd-collage-activity-2018 td.empty {
        display: none !important;
    }
}