/*responsive*/
@media screen and (min-width: 768px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }
    .banner-sm {
        position: absolute;
        right: 32px;
        bottom: 26px;
    }
    #nav-mobi {
        display: none;
    }
    .schedule_table tr th,
    .schedule_table tr td {
        border-bottom: 1px solid #cccccc;
        font-weight: normal;
        line-height: 17.5px;
        font-size: 10px;
        letter-spacing: 0.11em;
    }
}

@media screen and (max-width: 1040px) {
    .visible-ms {
        display: block;
    }
    .hidden-ms {
        display: none;
    }
    .social {
        position: absolute;
        top: auto;
        bottom: 23px;
        left: 13px;
        right: 0;
    }
    .social ul {
        text-align: left;
    }
}

@media screen and (max-width: 767px) {
    .hidden-xs {
        display: none;
    }
    .visible-xs {
        display: block;
    }
    body {
        background-color: #ffffff;
    }
    body.navbar-open {
        height: 100%;
        overflow: hidden;
    }
    .toggle-navbar {
        display: block;
    }
    #header .logo {
        display: none;
    }
    #banner {
        border-bottom: 10px solid #27446f;
    }
    .banner-sm {
        padding: 19px 20px 0;
    }
    .banner-sm img {
        width: 100%;
    }
    #nav-mobi {
        position: fixed;
        z-index: 99;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        padding: 40px;
        background-color: rgba(178,227,215,0.95);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        border-bottom: 0;
    }
    #nav-mobi ul {
        padding-top: 100px;
        padding-bottom: 70px;
        background-color: #fff;
        width: 100%;
    }
    #nav-mobi.in {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    .nav-primary ul {
        padding-left: 0;
    }
    .nav-primary ul li {
        display: block;
        padding: 0 0 30px;
    }
    .nav-primary ul li+li:before {
        display: block;
        margin: 0 auto 27px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border-width: 2px;
    }
    .nav-primary ul li a svg {
        height: 42px;
    }
    #nav-mobi .logo {
        position: static;
        background: transparent;
        border: 0;
        fill: #333;
        text-align: center;
        padding: 43px 0;
        display: block;
        box-shadow: none;
        margin-top: 70px;
    }
    #nav-mobi .logo svg {
        width: 100%;
    }
    #nav-primary {
        background-color: #ffffff;
        padding: 65px 0 29px;
        margin-bottom: 122px;
        border-bottom: 10px solid #27446f;
    }
    #main .container {
        padding: 0 50px 0px;
        margin-bottom: 17px;
    }
    #main .container:before,
    #main .container:after {
        right: 50%;
        z-index: -1;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #main .container:before {
        width: 23px;
        margin-right: -12px;
    }
    #main .container:after {
        width: 195px;
        height: 455px;
        margin-right: -161px;
        bottom: -17px;
    }
    .main__infobox {
        /*margin-bottom: 335px;*/
        box-shadow: none;
    }
    .main__infobox-inner {
        padding: 27px 0 35px;
    }
    .infobox-header {
        text-align: center;
    }
    .infobox-header svg {
        height: 33px;
    }
    .infobox-body,
    .news_section li {
        /*background-image: url(../img/separate.png);*/
    }
    .news_section li:first-child {
        border-top-width: 2px;
    }
    .news_section li {
        border-bottom-width: 2px;
        padding: 23px 10px 27px;
    }
    .news_section li:last-child {
        /*border-width: 2px;*/
    }
    .news_section li time {
        float: none;
        margin-right: 0;
        padding-left: 0;
        font-size: 22px;
        line-height: 35px;
        font-weight: 700;
    }
    .news_section li p {
        font-size: 20px;
        line-height: 35px;
        padding-top: 0;
        margin-top: 10px;
    }
    .btn img {
        margin-right: 2px;
    }
    .infobox_action {
        padding-top: 26px;
    }
    #news .readmore {
        padding-left: 17px;
        font-size: 18.5px;
    }
    #schedule .main__infobox-inner {
        padding-left: 0;
        padding-right: 0;
        padding-top: 55px;
        padding-bottom: 0;
    }
    #schedule .infobox-header svg {
        height: 35px;
    }
    .schedule_table,
    .schedule_table tbody,
    .schedule_table tr,
    .schedule_table td {
        display: block;
    }
    .schedule_table thead,
    .schedule_table tbody tr td span.smallYear {
        display: none;
    }
    .schedule_table {
        border-top: 2px solid #cccccc;
    }
    .schedule_table tr {
        border-bottom: 2px solid #cccccc;
    }

    .schedule_table tbody tr:after {
        content: '';
        display: table;
        clear: both;
    }
    .schedule_table tbody tr td.time-column {
        width: 64%;
        text-align: right;
        padding-top: 22px;
        padding-left: 56px;
    }
    .schedule_table tbody tr td span.date {
        margin-left: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 60px;
    }
    .schedule_table tbody tr td span.date svg {
        height: 38px;
    }
    .schedule_table tbody tr td span.weekday {
        font-size: 24px;
        margin-right: 10px;
    }
    .schedule_table tbody tr td span.smallDay {
        font-size: 20px;
    }
    .schedule_table tbody tr td.place-column {
        text-align: left;
        padding-top: 20px;
        font-size: 36px;
        font-weight: 600;
    }
    .schedule_table tbody tr td.place-column svg {
        height: 21.5px;
    }
    .schedule_table tbody tr td.hall {
        padding: 16px 0 16px;
        text-align: center;
        width: 100%;
        font-weight: 600;
        line-height: 48px;
        font-size: 30px;
    }
    .schedule_table tbody tr td.tdadd {
        padding: 0px 0 10px;
        text-align: center;
        width: 100%;
        font-weight: 600;
        font-size: 30px;
    }
    .schedule_table tbody tr td {
        float: left;
        font-size: 30px;
    }
    .schedule_table tbody tr td.open,
    .schedule_table tbody tr td.start {
        font-size: 20px;
        width: 50%;
        font-weight: 600;
    }
    .schedule_table tbody tr td.open {
        text-align: right;
        padding-right: 21px;
    }
    .schedule_table tbody tr td.start {
        text-align: left;
        padding-left: 18px;
    }
    .schedule_table tbody tr td.open:before {
        content: 'OPEN';
        display: inline-block;
        vertical-align: top;
        zoom: 1;
        /* Fix for IE7 */
        *display: inline;
        /* Fix for IE7 */
        margin-right: 5px;
    }
    .schedule_table tbody tr td.start:before {
        content: 'START';
        display: inline-block;
        vertical-align: top;
        zoom: 1;
        /* Fix for IE7 */
        *display: inline;
        /* Fix for IE7 */
        margin-right: 5px;
    }
    .schedule_table tbody tr td.faq_deskplace-column {
        width: 100%;
        padding: 19px 0 45px;
    }
    .schedule_table a.btn {
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 0.03em;
        background: #6aa5b3 url(../img/arrow_left_big.png) right 11px center no-repeat;
        font-weight: 400;
        padding: 14px 27px;
    }
    #ticket .main__infobox-inner {
        padding-top: 55px;
        padding-bottom: 62px;
    }
    #ticket .infobox-header {
        margin-bottom: 46px;
    }
    .ticket-panel h4 {
        font-size: 22px;
        line-height: 22px;
        padding-top: 12px;
        padding-bottom: 11px;
    }
    .ticket-panel p {
        font-size: 18px;
        line-height: 1.5em;
    }
    .ticketSchedule-group {
        margin-top: 11px;
        padding-bottom: 16px;
        border-bottom: 2px solid rgba(0,0,0,.2);
        padding-left: 10px;
    }
    .ticket-panel .ticket-panel-body div.small {
        font-size: 18px;
    }
    .ticketSchedule-group .group-info {
        padding: 0;
        margin-bottom: 15px;
    }
    .ticketSchedule-group .group-info .group-ticket-time {
        width: 100%;
    }
    .ticket-panel .ticket-panel-body {
        padding-top: 44px;
    }
    .ticket-panel .ticket-panel-body.line {
        background-size: auto 2px;
    }
    .ticket-panel .ticket-panel-body .ticket-left-col {
        float: none;
        width: 100%;
        color: #999;
        font-size: 22px;
        line-height: 35px;
        letter-spacing: 0.02em;
    }
    .ticket-panel .ticket-panel-body .ticket-right-col {
        float: none;
        width: 100%;
    }
    .ticket-panel .main-fee {
        font-size: 22px;
        line-height: 35px;
        margin-top: 0;
        margin-bottom: 16px;
    }
    .ticket-panel a {
        margin-bottom: 20px;
        display: inline-block;
    }
    .ticket-panel+.ticket-panel {
        margin-top: 51px;
    }
    .ticket-panel .ticket-panel-body .ticket-right-col>a {
        font-size: 20px;
        line-height: 26px;
    }
    .ticket-panel .normal {
        font-size: 18px;
        line-height: 34px;
    }
    .ticketSchedule-group .group-name {
        color: #333;
        font-size: 20px;
        border-bottom: 0;
        padding: 20px 0;
        line-height: 40px;
    }
    .ticketSchedule-group .group-info .group-ticket-type {
        font-size: 22px;
        line-height: 35px;
        color: #999;
        width: 100%;
        float: none;
        margin-top: 0;
    }
    .ticketSchedule-group .group-info .group-ticket-time {
        line-height: 35px;
        float: none;
    }
    .ticketSchedule-group .group-info.small .group-ticket-time {
        line-height: 35px;
    }
    .ticketSchedule-group .group-info .group-ticket-time p:first-child {
        margin-top: 5px;
    }
    .ticketSchedule-group .group-info .group-ticket-time p.time {
        font-size: 22px;
        font-weight: bold;
    }

    .ticket-footer {
        margin-top: 50px;
    }
    .ticket-footer a.btn {
        width: 100%;
        height: 100px;
        line-height: 100px;
        font-size: 24px;
        letter-spacing: 0.02em;
    }

    #ticket .infobox_action a.btn {
        min-width: auto;
        width: 100%;
        background-position: right 13px center;
        font-size: 23px;
        line-height: 100px;
    }
    #footer {
        font-size: 20px;
        padding-top: 10px;
        color: #27446F;
    }
    #footer .social {
        position: static;
        height: auto;
        margin-bottom: 72px;
        text-align: center;
    }
    #footer .social ul {
        text-align: center;
    }
    #backtotop {
        margin-bottom: 43px;
        position: static;
        padding-top: 13px;
        padding-right: 0;
        text-align: center;
        display: inline-block;
    }
    #backtotop svg {
        width: 117px;
    }
    #backtotop .cls-2 {
        fill: #27446f !important;
    }
    .modal-wrapper-inner {
        padding: 0;
    }
    .modal-container {
        padding: 10px;
    }
    .modal-content {
        padding: 15px;
    }
    .modal-close {
        width: 20px;
        height: 20px;
        top: 15px;
        right: 15px;
        background-size: 100% auto;
    }
    .modal-content .mb10 {
        padding-left: 10px;
    }
    #family_seat header {
        font-size: 16px;
    }

    .ticket-filters {
        margin: 45px 0 46px 0;
    }

    .ticket-filters li + li {
        margin-left: 7px;
        margin-bottom: 7px;
    }

    .filter-btn {
        font-size: 22px;
        height: 59px;
        line-height: 57px;
        padding: 0 17px;
        border-width: 2px
    }
}

@media screen and (max-width: 639px) {
    #header {
        /*padding-bottom: 35px;*/
    }
    .toggle-navbar {
        padding: 15px;
        top: 2.5px;
        right: 3.5px;
        padding: 12px 8px 9px;
    }
    .toggle-navbar.in {
        padding: 18px 8px 13px;
    }
    .toggle-navbar .bar {
        width: 20px;
        height: 2px;
        margin-bottom: 3px;
    }
    .toggle-navbar.in .bar:nth-child(2) {
        margin-top: -5px;
    }
    .social {
        /*height: 34px;*/
        bottom: 11.5px;
        left: 6.5px;
    }
    .social ul {
        margin-top: 2.5px;
    }
    .banner-sm {
        padding: 9.5px 10px 0;
    }
    #banner {
        border-bottom-width: 5px;
    }
    #nav-mobi {
        padding: 20px;
    }
    #nav-mobi ul {
        padding-top: 50px;
        padding-bottom: 35px;
    }
    .nav-primary ul li {
        padding-bottom: 15px;
    }
    .nav-primary ul li+li:before {
        margin-bottom: 13.5px;
        width: 6px;
        height: 6px;
    }
    .nav-primary ul li a svg {
        height: 21px;
    }
    #nav-mobi .logo {
        position: static;
        background-size: auto 3px;
        padding: 21.5px 0;
        margin-top: 35px;
    }
    #nav-primary {
        padding: 32.5px 0 14.52px;
        margin-bottom: 61px;
        /*border-top-width: 5px;*/
        border-bottom-width: 5px;
    }
    #main .container {
        padding: 0 25px;
        margin-bottom: 8.5px;
        /*padding: 0 10px 275px;*/
        /*margin-bottom: 8.5px;*/
    }
    #main .container:before {
        width: 11.5px;
        margin-right: -6px;
    }
    #main .container:after {
        width: 97.5px;
        height: 227.5px;
        margin-right: -80.5px;
        bottom: -8.5px;
    }
    .main__infobox {
        /*margin-bottom: 167.5px;*/
    }
    .main__infobox-inner {
        padding: 13.5px 0px 15.5px;
        /* padding-top: 13.5px;
		padding-bottom: 15.5px;*/
    }
    .infobox-header {
        text-align: center;
        margin-bottom: 12.5px;
    }
    .infobox-header svg {
        height: 16.5px;
    }
    .infobox-body,
    .news_section li {
        background-size: auto 3px;
    }
    .news_section li {
        padding: 11.5px 5px 13.5px;
        border-bottom-width: 1px;
    }
    .news_section li:first-child {
        border-top-width: 1px;
    }
    .news_section li time {
        font-size: 11px;
        line-height: 17.5px;
    }
    .news_section li p {
        font-size: 10px;
        line-height: 17.5px;
        margin-top: 5px;
    }
    .btn img {
        margin-right: 1px;
        width: 8px;
    }
    .infobox_action {
        padding-top: 13px;
    }
    #news .readmore {
        padding-left: 8.5px;
        font-size: 9.5px;
    }
    #schedule .main__infobox-inner {
        padding-top: 27.5px;
    }
    #schedule .infobox-header svg {
        height: 17.5px;
    }
    .schedule_table {
        border-top-width: 1px;
    }
    .schedule_table tr {
        border-bottom-width: 1px;
    }
    .schedule_table tbody tr td.time-column {
        font-family: helvetica arial sans-serif;
        width: 58%;
        padding-top: 11px;
        padding-left: 28px;
        position: relative;
    }
    .schedule_table tbody tr td span.date {
        font-size: 30px;
        line-height: 39.5px;
        position: relative;
        top:-2px;
    }
    .schedule_table tbody tr td span.weekday {
        font-size: 12px;
        margin-right: 5px;
        line-height: 39.5px;
    }
    .schedule_table tbody tr td span.date svg {
        height: 27px;
    }
    .schedule_table tbody tr td span.smallDay {
        font-size: 10px;
    }
    .schedule_table tbody tr td.place-column {
        line-height: 39.5px;
        /* padding-left: 10.5px; */
        padding-top: 10px;
        font-size: 18px;
        font-weight: 600;
    }
    .schedule_table tbody tr td.place-column svg {
        height: 14px;
    }
    .schedule_table tbody tr td.hall {
        padding: 8px 0 10px;
        line-height: 22px;
        font-size: 15px;
    }
    .schedule_table tbody tr td.tdadd {
        padding: 0px 0 10px;
        line-height: 22px;
        font-size: 15px;
    }
    .schedule_table tbody tr td {
        font-size: 15px;
    }
    .schedule_table tbody tr td.open,
    .schedule_table tbody tr td.start {
        font-size: 14px;
    }
    .schedule_table tbody tr td.open {
        padding-right: 10.5px;
    }
    .schedule_table tbody tr td.start {
        padding-left: 9px;
    }
    .schedule_table tbody tr td.open:before {
        margin-right: 5px;
    }
    .schedule_table tbody tr td.start:before {
        margin-right: 5px;
    }
    .schedule_table tbody tr td.faq_deskplace-column {
        padding: 15px 0 22.5px;

    }
    .schedule_table a.btn {
        font-size: 13px;
        line-height: 15px;
        background-position: right 6.5px center;
        padding: 7px 13.5px;
        background-size: 9px auto;
    }
    #ticket .main__infobox-inner {
        padding-top: 27.5px;
        padding-bottom: 20px;
    }
    #ticket .infobox-header {
        margin-bottom: 23px;
    }
    .ticket-panel h4 {
        font-size: 11px;
        line-height: 11px;
        padding-top: 6px;
        padding-bottom: 6.5px;
    }
    .ticket-panel p {
        font-size: 9px;
        line-height: 1.5em;
    }
    .ticket-panel .ticket-panel-body {
        padding-top: 22px;
    }
    .ticket-panel .ticket-panel-body .ticket-left-col {
        font-size: 12px;
        line-height: 17.5px;
    }
    .ticket-panel .main-fee {
        font-size: 11px;
        line-height: 17.5px;
        margin-bottom: 8px;
    }
    .ticket-panel+.ticket-panel {
        margin-top: 25.5px;
    }
    .ticket-panel .ticket-panel-body div.small {
        font-size: 9px;
    }
    .ticket-panel .ticket-panel-body .ticket-right-col>a {
        font-size: 10px;
        line-height: 13px;
    }
    .ticket-panel a {
        margin-bottom: 10px;
    }
    .ticket-panel .normal {
        font-size: 9px;
        line-height: 17px;
    }
    .ticketSchedule-group {
        padding-left: 5px;
        margin-top: 5.5px;
        padding-bottom: 8px;
    }
    .ticketSchedule-group .group-name {
        font-size: 13px;
        padding: 10px 0;
        line-height: 20px;
    }
    .ticketSchedule-group .group-info {
        margin-bottom: 7.5px;
    }
    .ticketSchedule-group .group-info .group-ticket-type {
        font-size: 11px;
        line-height: 17.5px;
    }
    .ticketSchedule-group .group-info .group-ticket-time {
        font-size: 11px;
        line-height: 17.5px;
    }
    .ticketSchedule-group .group-info.small .group-ticket-time {
        font-size: 11px;
        line-height: 17.5px;
    }
    .ticketSchedule-group .group-info .group-ticket-time p:first-child {
        margin-top: 5px;
    }
    .ticketSchedule-group .group-info .group-ticket-time p.time {
        font-size: 11px;
        font-weight: bold;
    }
    .ticket-footer {
        margin-top: 25px;
    }
    .ticket-footer a.btn {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 12px;
        letter-spacing: 0.01em;
        background-size: 8px 8px;
    }
    #ticket .infobox_action a.btn {
        background-position: right 7.5px center;
        font-size: 11.5px;
        line-height: 50px;
        border-radius: 2px;
        background-size: 9px auto;
    }
    #footer {
        font-size: 10px;
        padding-top: 5px;
        padding-bottom: 35px;
    }
    #footer .social {
        margin-bottom: 36px;
    }
    #backtotop {
        margin-bottom: 21.5px;
        padding-top: 6.5px;
    }
    #backtotop svg {
        width: 58.5px;
    }

    .ticket-filters {
        margin: 22.5px 0 23px 0;
    }

    .ticket-filters li + li {
        margin-left: 3.5px;
        margin-bottom: 3.5px;
    }

    .filter-btn {
        font-size: 11px;
        height: 29.5px;
        line-height: 28.5px;
        padding: 0 8.5px;
        border-width: 1px;
    }
}