html,
body {
    height: 100%;
    font-family: serif;
    font-smoothing: antialiased;
    background: url(../img/bg1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #f0f0f0;
    font-weight: 400;
    font-family: serif;
}

h1 {
    font-size: 70px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p {
    font-size: 16px;
    color: #d8d8d8;
    font-weight: 400;
    line-height: 24px;
    margin: 0 0 15px 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: 0;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
    color: #fff;
}

ul,
ol {
    padding: 0;
    margin: 0;
}

.section-title h2 {
    color: #ffffff;
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.section-title p {
    color: #ffffff;
    margin-bottom: 0;
}

.set-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.spad {
    padding-top: 100px;
}

@media only screen and (max-width: 900px) {
    .spad {
        padding-top: 0px;
    }
}

.spad-2 {
    padding-top: 50px;
    padding-bottom: 70px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
    color: #fff;
}

/* buttons */

.primary-btn {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 0 12px;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    width: 160px;
    height: 46px;
    border-left: 2px solid #e16521;
    border-right: 2px solid #e4381C;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(100%, #e4381C), to(#e16521)), -webkit-gradient(linear, left top, right top, from(#e4381C), color-stop(0%, #e16521));
    background-image: -o-linear-gradient(left, #e4381C 100%, #e16521 100%), -o-linear-gradient(left, #e4381C 0%, #e16521 0%);
    background-image: linear-gradient(to right, #e4381C 100%, #e16521 100%), linear-gradient(to right, #e4381C 0%, #e16521 0%);
    -webkit-transition-duration: 1000ms;
    -o-transition-duration: 1000ms;
    transition-duration: 1000ms;
    line-height: 45px;
    position: relative;
    z-index: 1;
    border-radius: 4px;
}

.primary-btn:after {
    color: #fff;
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
    background: #e16521;
    background: -webkit-gradient(linear, left top, right top, from(#e16521), to(#e4381C));
    background: -o-linear-gradient(left, #e16521, #e4381C);
    background: linear-gradient(to right, #e16521, #e4381C);
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 2px;
    opacity: 0;
}

.site-btn {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 0 12px;
    color: #000000;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    background: none;
    width: 127px;
    height: 40px;
    border-left: 2px solid #e16521;
    border-right: 2px solid #e4381C;
    border-top: none;
    border-bottom: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(100%, #e16521), color-stop(0%, #e4381C)), -webkit-gradient(linear, left top, right top, from(#e16521), color-stop(0%, #e4381C));
    background-image: -o-linear-gradient(left, #e16521 100%, #e4381C 0%), -o-linear-gradient(left, #e16521 0%, #e4381C 0%);
    background-image: linear-gradient(to right, #e16521 100%, #e4381C 0%), linear-gradient(to right, #e16521 0%, #e4381C 0%);
    -webkit-transition-duration: 1000ms;
    -o-transition-duration: 1000ms;
    transition-duration: 1000ms;
    line-height: 38px;
    position: relative;
    z-index: 1;
    border-radius: 4px;
}

.site-btn:after {
    color: #fff;
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
    background: #e16521;
    background: -webkit-gradient(linear, left top, right top, from(#e16521), to(#e4381C));
    background: -o-linear-gradient(left, #e16521, #e4381C);
    background: linear-gradient(to right, #e16521, #e4381C);
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 2px;
    opacity: 0;
}

/* Preloder */

#preloder {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #000;
}

.loader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }

    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }

    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

/*---------------------
  Header
-----------------------*/

.header-section {
    width: 100%;
    height: 56px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 10px;
    background: #fff;
}

.header-section.header-normal {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #151515;
    padding-top: 0;
}

.header-section.header-normal .logo {
    padding: 40px 0;
}

.header-section.header-normal .nav-menu .mainmenu ul li a {
    padding: 40px 0;
}

.header-section.header-normal .nav-menu .mainmenu ul li a:after {
    bottom: 35px;
}

.header-section.header-normal .nav-menu .mainmenu ul li:hover .dropdown {
    top: 107px;
}

.header-section.header-normal .nav-menu .mainmenu ul li .dropdown {
    top: 128px;
}

.header-section.header-normal .nav-menu .mainmenu ul li .dropdown li a {
    padding: 14px 22px;
}

.header-section.header-normal .top-social {
    padding: 39px 0;
}

.logo {
    float: left;
    width: 300px
}

.logo a {
    display: inline-block;
}



.top-social {
    float: right;
}

.top-social a {
    display: inline-block;
    font-size: 20px;
    color: #525252;
    margin-left: 20px;
}

.hero-items .owl-item.active .single-hero-item .hero-text h2,
.hero-items .owl-item.active .single-hero-item .hero-text h1,
.hero-items .owl-item.active .single-hero-item .hero-text .primary-btn {
    opacity: 1;
}

.hero-items .owl-nav button[type=button] {
    position: absolute;
    left: 75px;
    top: 50%;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
    line-height: 30px;
    font-size: 60px;
    color: #ffffff;
}

.hero-items .owl-nav button[type=button].owl-next {
    left: auto;
    right: 75px;
}

.hero-items .owl-dots {
    position: absolute;
    left: 0;
    bottom: 23px;
    width: 100%;
    text-align: center;
}

.hero-items .owl-dots button.owl-dot {
    height: 14px;
    width: 14px;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 15px;
    position: relative;
}

.hero-items .owl-dots button.owl-dot.active:after {
    opacity: 1;
}

.hero-items .owl-dots button.owl-dot:after {
    position: absolute;
    left: -3px;
    top: -3px;
    height: 20px;
    width: 20px;
    border: 1px solid #ffffff;
    content: "";
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.hero-items .owl-dots button.owl-dot:last-child {
    margin-right: 0;
}

.single-hero-item {
    height: 950px;
    padding-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.single-hero-item .hero-text {
    text-align: center;
}

.single-hero-item .hero-text h2 {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 60px;
    margin-bottom: 4px;
    position: relative;
    top: 50px;
    opacity: 0;
}

.single-hero-item .hero-text h1 {
    color: #ffffff;
    font-size: 90px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 46px;
    position: relative;
    top: 50px;
    opacity: 0;
}

.single-hero-item .hero-text .primary-btn {
    position: relative;
    top: 50px;
    opacity: 0;
}

.single-hero-item .hero-text .primary-btn:hover:after {
    opacity: 1;
}

.home-about {
    background: #151515;
}

.about-text {
    padding-top: 18px;
}

.about-text h2 {
    font-size: 48px;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 36px;
}

.about-text p.short-details {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    line-height: 28px;
    margin-bottom: 20px;
}

.about-text p.long-details {
    color: #ffffff;
    margin-bottom: 40px;
}

.about-text .primary-btn.about-btn:after {
    opacity: 1;
}

.about-img img {
    min-width: 100%;
}

.footer-section {
    background: #ffffff;
    padding-top: 0px;
}

.footer-logo-item {
    margin-bottom: 30px;
}

.footer-logo-item .f-logo {
    margin-bottom: 40px;
}

.footer-logo-item .f-logo a {
    display: inline-block;
}

.footer-logo-item p {
    color: #afb4bf;
    margin-bottom: 32px;
}

.footer-logo-item .social-links h6 {
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.footer-logo-item .social-links a {
    color: #ffffff;
    display: inline-block;
    font-size: 14px;
    margin-right: 32px;
}

.footer-logo-item .social-links a:last-child {
    margin-right: 0;
}

.footer-widget {
    margin-bottom: 30px;
}

.footer-widget h5 {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.footer-widget .footer-blog .fb-item {
    display: block;
    margin-bottom: 20px;
}

.footer-widget .footer-blog .fb-item:hover h6 {
    color: #e4381C;
}

.footer-widget .footer-blog .fb-item h6 {
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 12px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.footer-widget .footer-blog .fb-item span {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    display: block;
    color: #afb4bf;
}

.footer-widget .footer-blog .fb-item span i {
    color: #e4381C;
    margin-right: 5px;
}

.footer-widget .workout-program li {
    list-style: none;
}

.footer-widget .workout-program li a {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 18px;
    margin-bottom: 22px;
}

.footer-widget .footer-info li {
    list-style: none;
    font-size: 16px;
    color: #afb4bf;
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
}

.footer-widget .footer-info li i {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    color: #e4381C;
}

.footer-widget .footer-info li span {
    color: #ffffff;
    display: block;
    font-weight: 500;
}

.copyright-text {
    background: #0e284b;
    padding: 20px 0;
    margin-top: 20px;
}

.copyright-text .ct-inside {
    font-size: 14px;
    color: #ffffff;
}

.copyright-text .ct-inside a {
    font-weight: 600;
    color: #e4381C;
}

.top-section {
    padding-bottom: 0px;
    padding-top: 95px;
}

.section {
    padding-bottom: 70px;
    padding-top: 95px;
    clear: both;
}

@media only screen and (max-width: 1650px) {
    .section {
        padding-bottom: 0px;
        padding-top: 30px;
        clear: both;
    }
}



@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}


@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-section {
        padding-left: 0;
        padding-right: 0;
    }

    .top-social a {
        margin-left: 15px;
    }
}


@media only screen and (min-width: 768px) and (max-width: 900px) {
    .header-section {
        padding-left: 0;
        padding-right: 0;
    }

    .nav-menu {
        text-align: right;
    }

    .nav-menu .mainmenu ul li {
        margin-right: 25px;
    }

    .nav-menu .mainmenu ul li .dropdown {
        left: auto;
        right: 0;
    }

    .top-social {
        display: none;
    }

    .hero-items .owl-nav button[type=button] {
        left: 15px;
    }

    .hero-items .owl-nav button[type=button].owl-next {
        right: 15px;
    }

    .about-text {
        margin-bottom: 30px;
    }

    .timetable-controls ul li {
        margin-right: 50px;
    }

    .cta-section .cta-text {
        float: none;
    }

    .cta-section .primary-btn.cta-btn {
        float: none;
    }

    .blog-single-sidebar {
        padding-top: 30px;
    }

    .recent-item {
        margin-bottom: 30px;
    }
}


@media only screen and (max-width: 900px) {
    .header-section {
        padding-left: 0;
        padding-right: 0;
    }

    .nav-menu .mainmenu {
        display: none;
    }

    .top-social a {
        display: inline-block;
        font-size: 12px;
        color: #525252;
        margin-left: 10px;
    }

    .copyright-text .ct-inside {
        font-size: 12px;
        color: #ffffff;
        line-height: 2
    }

    .slicknav_menu {
        display: block;
        background: transparent;
        padding: 0;
    }

    .slicknav_btn {
        margin: 0;
        border-radius: 0;
    }

    .header-normal .slicknav_btn {
        margin: 37px 0;
    }

    .slicknav_nav {
        background: #222;
        margin-top: rem
    }

    .slicknav_nav ul {
        margin: 10px 15px;
    }

    .slicknav_nav a {
        padding: 8px 10px;
    }

    .slicknav_nav a:hover,
    .slicknav_nav .slicknav_row:hover {
        border-radius: 0;
        background: #e4381C;
        color: #ffffff;
    }

    .hero-items .owl-nav button[type=button] {
        left: 5px;
    }

    .hero-items .owl-nav button[type=button].owl-next {
        left: auto;
        right: 5px;
    }

    .single-hero-item {
        height: 680px;
    }

    .single-hero-item .hero-text h1 {
        font-size: 70px;
    }

    .single-hero-item .hero-text h2 {
        font-size: 50px;
    }

    .about-text {
        margin-bottom: 30px;
    }

    .classtime-table {
        overflow-x: auto;
    }

    .timetable-controls ul li {
        margin-right: 12px;
    }

    .cta-section .cta-text {
        float: none;
    }

    .cta-section .primary-btn.cta-btn {
        float: none;
    }
}


@media only screen and (max-width: 479px) {

    .section-title h2,
    .breadcrumb-text h2 {
        font-size: 30px;
    }


    .header-normal .slicknav_btn {
        margin: 0 0 10px 0;
    }

    .single-hero-item .hero-text h1 {
        font-size: 50px;
    }

    .single-hero-item .hero-text h2 {
        font-size: 40px;
    }

    .hero-items .owl-nav button[type=button] {
        left: -15px;
    }

    .hero-items .owl-nav button[type=button].owl-next {
        right: 15px;
    }

    .map-contact-detalis {
        width: 319px;
        right: 0;
    }

    .video-section .video-text {
        padding-top: 100px;
    }

    .timetable-controls ul li {
        margin-right: 5px;
        margin-bottom: 12px;
    }
}

/*------------------------------------------------------------------------*/

.top p {
    line-height: 2
}

.top1 {
    position: absolute;
    right: 0px;
    top: 0px;
}

.top1 img {
    width: 1200px;

}

.top2 {
    position: absolute;
    bottom: 0;
    left: 0;
}

.top2 img {
    width: 900px;
}

.top3 img {
    width: 18.76562vw;
    position: absolute;
    top: 32%;
    left: 40%;
}

h1 {
    font-size: 2.03125vw;
    letter-spacing: 0.2em;
    color: #bebebe;
    line-height: 1.7
}

.ns-hero {
    height: calc(100vh - 56px);
    min-height: 600px;
    margin-top: 56px;
    position: relative;
}

.ns-hero__title {
    width: 32.03125vw;
    height: 42.30769vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

@media only screen and (max-height: 550px) {
    .top1 img {
        height: 200px
    }

    .top2 img {
        height: 100px;
    }
}

@media only screen and (max-width: 1700px) {
    .top1 img {
        width: 1000px;
    }

    .top2 img {
        width: 900px;
    }
}

@media only screen and (max-width: 1500px) {
    .top1 img {
        width: 900px;
        height: 600px;
        object-fit: cover;
    }

    .top2 img {
        width: 750px;
        height: 450px;
        object-fit: cover;
    }
}

@media only screen and (max-width: 1350px) {
    .top1 img {
        width: 750px;
        height: 500px;
        object-fit: cover;
    }

    .top2 img {
        width: 700px;
        height: 420px;
        object-fit: cover;
    }
}

@media only screen and (max-width: 1200px) {
    .top1 img {
        width: 700px;
        height: 450px;
        object-fit: cover;
    }

    .top2 img {
        width: 650px;
        height: 400px;
        object-fit: cover;
    }
}

@media only screen and (max-width: 1100px) {
    .top1 img {
        width: 650px;
        height: 380px;
        object-fit: cover;
    }

    .top2 img {
        width: 620px;
        height: 350px;
        object-fit: cover;
    }
}

@media only screen and (max-width: 1000px) {
    .top1 img {
        width: 600px;
        height: 300px;
        object-fit: cover;
    }

    .top2 img {
        width: 550px;
        height: 300px;
        object-fit: cover;
    }
}

@media only screen and (max-width: 900px) {
    .top1 {
        position: static;
        right: 0px;
        top: 0px;
        width: 100%;
    }

    .top2 {
        width: 100%;
        position: static;
        bottom: 0;
        left: 0;
    }

    .top1 img {
        width: 100%;
        height: auto;
    }

    .top2 img {
        width: 100%;
        height: auto;
    }

    .top3 img {
        width: 30%;
        position: absolute;
        top: 38%;
        left: auto;
        right: 10%
    }

    .top4 h1 {
        position: absolute;
        top: 45%;
        left: 10%;
        font-size: 1.8rem;
        color: #fff
    }

    .ns-hero {
        height: auto;
        min-height: auto;
        margin-top: 56px;
        position: relative;
    }
}

@media only screen and (max-width: 800px) {
    .top3 img {
        width: 30%;
        position: absolute;
        left: auto;
        right: 10%
    }

    .top4 h1 {
        position: absolute;
        left: 10%;
        font-size: 1.3rem;
    }
}

@media only screen and (max-width: 600px) {
    .top3 img {
        width: 30%;
        position: absolute;
        top: 40%;
        left: auto;
        right: 10%
    }

    .top4 h1 {
        position: absolute;
        top: 46%;
        left: 10%;
        font-size: 1.3rem;
    }
}

@media only screen and (max-width: 500px) {
    .top3 img {
        width: 30%;
        position: absolute;
        top: 40%;
        left: auto;
        right: 8%
    }

    .top4 h1 {
        position: absolute;
        top: 46%;
        left: 5%;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 400px) {
    .top3 img {
        width: 30%;
        position: absolute;
        top: 42%;
        left: auto;
        right: 8%
    }

    .top4 h1 {
        position: absolute;
        top: 44%;
        left: 5%;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 1000px) {
    .ns-header .logo {
        padding-top: 3px
    }
}

@media only screen and (max-width: 900px) {
    .ns-header .logo {
        padding-top: 0px
    }
}

@media only screen and (max-width: 480px) {
    .ns-header .logo {
        padding-top: 3px
    }
}

.ns-hero__copy:empty {
    width: 305px;
}

.ns-hero__copy {
    width: 30%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
}

.ns-hero__copy2 {
    width: 30%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    bottom: 14px;
    left: 0;
}

@media only screen and (max-width: 1500px) {
    .ns-hero__copy2 {
        bottom: -50px;
        left: -30px;
    }
}

@media only screen and (max-width: 1350px) {
    .ns-hero__copy2 {
        bottom: -50px;
        left: -100px;
    }
}

@media only screen and (max-width: 1150px) {
    .ns-hero__copy2 {
        bottom: -80px;
        left: -300px;
    }
}

/*------------------------------------------------------------2*/

.box {
    position: relative;
    height: 40rem;
}

.box1 {
    background: #4f4f4f;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 45%;
}

.movie1 {
    text-align: center;
    align-items: center;
    padding: 4rem 0;
}


.p-none {
    padding: 0 !important
}

.ml1 {
    margin-left: 18rem;
    margin-top: 3rem
}

.top h2 {
    font-size: 2.03125vw;
    letter-spacing: 0.2em;
    color: #bebebe;
    line-height: 1.7;
    padding-bottom: 1rem
}

@media only screen and (max-width: 1500px) {
    .box {
        height: 37rem;
    }
}

@media only screen and (max-width: 1300px) {
    .box {
        height: 34rem;
    }

    .ml1 {
        margin-left: 15rem;
        margin-top: 5rem;
    }
}

@media only screen and (max-width: 1150px) {
    .box {
        height: 33rem;
    }

    .ml1 {
        margin-left: 10rem;
        margin-top: 5rem;
    }
}

@media only screen and (max-width: 900px) {
    .box {
        position: relative;
        height: auto;
    }

    .box1 {
        background: #4f4f4f;
        position: static;
        width: 80%;
        margin: 6rem auto 0;
    }

    .ml1 {
        width: 70%;
        margin: 2rem auto 4rem;
    }

    .top h2 {
        font-size: 2rem;
        letter-spacing: 0.2em;
        color: #bebebe;
        line-height: 1.7
    }


    .movie1 {
        text-align: center;
        align-items: center;
        padding: 3rem 0;
    }

}

@media only screen and (max-width: 700px) {
    .movie1 {
        text-align: center;
        align-items: center;
        padding: 2rem 0;
    }
}

@media only screen and (max-width: 600px) {
    .ml1 {
        width: 80%;
        margin: 2rem auto 3rem;
    }

    .top h2 {
        font-size: 1.5rem;
        letter-spacing: 0.2em;
        color: #bebebe;
        line-height: 1.7
    }

    .box1 {
        background: #4f4f4f;
        position: static;
        width: 90%;
        margin: 4rem auto 0;
    }
}

@media only screen and (max-width: 480px) {
    .movie1 {
        text-align: center;
        align-items: center;
        padding: 1.5rem 0;
    }

    .top h2 {
        font-size: 1.3rem;
        letter-spacing: 0.2em;
        color: #bebebe;
        line-height: 1.7
    }

    p {
        font-size: 12px
    }
}

/*3*/
.box-2 {
    position: relative;
    height: 64rem;
    margin-top: 3rem
}

.ml2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 33
}

.ml3 {
    position: absolute;
    right: 4rem;
    z-index: 1
}

.ml4 {
    float: right;
    margin-right: 10rem;
    margin-top: 5rem
}

@media only screen and (max-width: 1650px) {
    .ml2 {
        position: absolute;
        right: 0;
        top: 0;
        width: 60%;
        z-index: 33
    }
}

@media only screen and (max-width: 1500px) {
    .ml4 {
        float: right;
        margin-right: 5rem;
        margin-top: 2rem
    }
}

@media only screen and (max-width: 1500px) {
    .ml4 {
        float: right;
        margin-right: 5rem;
        margin-top: 0rem
    }

    .box-2 {
        position: relative;
        height: 60rem;
        margin-top: 3rem
    }
}

@media only screen and (max-width: 1400px) {
    .box-2 {
        height: 55rem;
    }
}

@media only screen and (max-width: 1300px) {
    .box-2 {
        height: 53rem;
    }

    .ml3 {
        position: absolute;
        right: 5rem;
        z-index: 1
    }
}

@media only screen and (max-width: 1200px) {
    .box-2 {
        height: 51rem;
    }

    .ml3 {
        position: absolute;
        right: 5rem;
        z-index: 1
    }
}

@media only screen and (max-width: 1100px) {
    .box-2 {
        height: 49rem;
    }

    .ml3 {
        position: absolute;
        right: 5rem;
        z-index: 1
    }
}

@media only screen and (max-width: 1100px) {
    .box-2 {
        height: 45rem;
    }

    .ml3 {
        position: absolute;
        right: 5rem;
        z-index: 1
    }
}

@media only screen and (max-width: 1050px) {
    .ml4 {
        float: right;
        margin-right: 2rem;
        margin-top: 0rem
    }
}

@media only screen and (max-width: 900px) {
    .box-2 {
        position: relative;
        height: auto;
        margin-top: 0rem
    }

    .ml2 {
        position: static;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 33
    }

    .ml3 {
        position: static;
        right: 0rem;
        z-index: 1;
        float: right;
    }

    .ml4 {
        width: 70%;
        margin: 2rem auto;
        float: none;
    }

    .mt-m {
        margin-top: 1rem !important;
        clear: both;
        padding-top: 1rem
    }

    .mt-m2 {
        margin-top: 1rem !important;
        clear: both;
        padding-top: 3rem !important;
    }

    .mt-m3 {
        margin-top: 2rem !important;
    }
}


@media only screen and (max-width: 600px) {
    .ml4 {
        width: 80%;
        margin: 2rem auto;
    }

    .top h2 {
        font-size: 1.5rem;
        letter-spacing: 0.2em;
        color: #bebebe;
        line-height: 1.7
    }
}

@media only screen and (max-width: 480px) {
    .movie1 {
        text-align: center;
        align-items: center;
        padding: 1.5rem 0;
    }

    .top h2 {
        font-size: 1.3rem;
        letter-spacing: 0.2em;
        color: #bebebe;
        line-height: 1.7
    }

    p {
        font-size: 12px
    }
}


/*------------------------------------4*/
.box-3 {
    position: relative;
    height: 36rem;
    margin-top: 3rem;
    clear: both;
}

.ml5 {
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 10rem;
    margin-top: 5rem;
}

.ml6 {
    float: right;
    margin-right: 16rem;
    margin-top: 5rem
}

.ns-hero__copy3 {
    width: 30%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media only screen and (max-width: 1650px) {
    .box-3 {
        position: relative;
        height: 34rem;
        margin-top: 3rem;
        clear: both;
    }
}

@media only screen and (max-width: 1600px) {
    .ml5 {
        margin-right: 9rem;
        margin-top: 6rem;
    }
}

@media only screen and (max-width: 1500px) {
    .ml5 {
        margin-right: 9rem;
        margin-top: 8rem;
    }
}

@media only screen and (max-width: 1400px) {
    .ml5 {
        margin-right: 9rem;
        margin-top: 9rem;
    }

    .ml6 {
        margin-right: 15rem;
        margin-top: 5rem
    }
}

@media only screen and (max-width: 1300px) {
    .ml5 {
        margin-right: 9rem;
        margin-top: 10rem;
    }

    .ml6 {
        float: right;
        margin-right: 14rem;
        margin-top: 5rem
    }

    .box-3 {
        margin-top: 0rem;
    }
}

@media only screen and (max-width: 1200px) {
    .ml5 {
        margin-right: 9rem;
        margin-top: 11rem;
    }

    .ml6 {
        float: right;
        margin-right: 12rem;
        margin-top: 5rem
    }
}

@media only screen and (max-width: 1100px) {
    .ml5 {
        margin-right: 9rem;
        margin-top: 12rem;
    }

    .ml6 {
        float: right;
        margin-right: 11rem;
        margin-top: 7rem
    }
}

@media only screen and (max-width: 1000px) {
    .ml5 {
        margin-right: 9rem;
        margin-top: 13rem;
    }

    .ml6 {
        float: right;
        margin-right: 10rem;
        margin-top: 7rem
    }
}

@media only screen and (max-width: 900px) {
    .box-3 {
        position: relative;
        height: auto;
        margin-top: 0rem
    }

    .ml5 {
        position: static;
        right: 0rem;
        z-index: 1;
        float: left;
        margin-right: 0;
        margin-top: 0rem;
    }

    .ml6 {
        width: 70%;
        margin: 2rem auto;
        padding: 2rem auto;
        float: none;
        clear: both
    }
}


@media only screen and (max-width: 600px) {
    .ml6 {
        width: 80%;
        margin: 2rem auto;
    }

    .top h2,
    top h3 {
        font-size: 1.5rem;
        letter-spacing: 0.2em;
        color: #bebebe;
        line-height: 1.7
    }
}

@media only screen and (max-width: 480px) {
    .movie1 {
        text-align: center;
        align-items: center;
        padding: 1.5rem 0;
    }

    .top h2 {
        font-size: 1.3rem;
        letter-spacing: 0.2em;
        color: #bebebe;
        line-height: 1.7
    }

    p {
        font-size: 12px
    }
}



/*--------------------------------------------------------------------5*/
.box-4 {
    position: relative;
    height: 72rem;
    margin-top: 3rem
}

.ml7 {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-right: 10rem;
    margin-top: 5rem;
    width: 70%
}

.ml7 img {
    width: 80%;
    max-width: 1064px
}

.ml8 {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50.28125vw;
}

.ml9 {
    float: left;
    margin-left: 21rem;
    margin-top: 1rem;
    text-align: right
}

.ml10 {
    float: right;
    margin-right: 9rem;
    margin-top: 20rem
}

@media only screen and (max-width: 1700px) {
    .ml9 {
        margin-left: 13rem;
        margin-top: 1rem;
        text-align: right
    }

    .ml10 {
        margin-right: 9rem;
        margin-top: 18rem
    }

    .box-4 {
        height: 65rem;
    }
}

@media only screen and (max-width: 1600px) {
    .ml9 {
        margin-left: 13rem;
        margin-top: 1rem;
        text-align: right
    }

    .ml10 {
        margin-right: 9rem;
        margin-top: 15rem
    }

    .box-4 {
        height: 60rem;
    }
}

@media only screen and (max-width: 1500px) {
    .ml9 {
        margin-left: 13rem;
        margin-top: 1rem;
        text-align: right
    }

    .ml10 {
        margin-right: 9rem;
        margin-top: 10rem
    }

    .box-4 {
        height: 55rem;
    }
}

@media only screen and (max-width: 1350px) {
    .ml9 {
        margin-left: 13rem;
        margin-top: -2rem;
        text-align: right
    }

    .ml10 {
        float: right;
        margin-right: 5rem;
        margin-top: 12rem
    }

    .box-4 {
        height: 50rem;
    }
}

@media only screen and (max-width: 1300px) {
    .ml9 {
        float: left;
        margin-left: 13rem;
        margin-top: -3rem;
        text-align: right
    }

    .ml10 {
        float: right;
        margin-right: 5rem;
        margin-top: 12rem
    }

    .box-4 {
        height: 48rem;
    }
}

@media only screen and (max-width: 1200px) {
    .ml9 {
        float: left;
        margin-left: 13rem;
        margin-top: -3rem;
        text-align: right
    }

    .ml10 {
        float: right;
        margin-right: 5rem;
        margin-top: 10rem
    }

    .box-4 {
        height: 45rem;
    }
}


@media only screen and (max-width: 1100px) {
    .ml9 {
        float: left;
        margin-left: 10rem;
        margin-top: -6rem;
        text-align: right
    }

    .box-4 {
        height: 40rem;
    }
}

@media only screen and (max-width: 1000px) {
    .ml9 {
        float: left;
        margin-left: 6rem;
        margin-top: -6rem;
        text-align: right
    }

    .box-4 {
        height: 35rem;
    }
}

@media only screen and (max-width: 900px) {
    .box-4 {
        position: relative;
        height: auto;
        margin-top: 0rem
    }

    .ml7 {
        position: static;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 33;
        margin-top: 2rem
            /*画像*/
    }

    .ml7 img {
        width: 100%;
    }

    .ml8 {
        position: static;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 33
    }

    .ml9 {
        text-align: left;
        width: 70%;
        margin: 2rem auto;
        float: none;
        clear: both；
            /*テキスト*/
    }

    .ml10 {
        text-align: left;
        width: 70%;
        margin: 2rem auto 0;
        float: none;
        clear: both；
            /*テキスト*/
    }
}


@media only screen and (max-width: 600px) {

    .ml9 {
        width: 80%;
        margin: 2rem auto;
    }

    .ml10 {
        width: 80%;
        margin: 2rem auto 0;
    }

    .top h2 {
        font-size: 1.5rem;
        letter-spacing: 0.2em;
        color: #bebebe;
        line-height: 1.7
    }
}

@media only screen and (max-width: 480px) {
    .movie1 {
        text-align: center;
        align-items: center;
        padding: 1.5rem 0;
    }

    .top h2 {
        font-size: 1.2rem;
        letter-spacing: 1px;
        color: #bebebe;
        line-height: 1.7
    }

    p {
        font-size: 12px
    }
}




/*---------------------------------------------------------6*/
.box-5 {
    position: relative;
    height: 33rem;
    margin-top: 3rem
}

.ns-hero__copy4 {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}

.ml11 {
    float: left;
    margin-left: 30rem;
    margin-top: 5rem;
}

.top h3 {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    color: #bebebe;
    line-height: 1.7;
    padding-bottom: 1rem
}

@media only screen and (max-width: 1550px) {
    .ml11 {
        margin-left: 28rem;
        margin-top: 5rem;
    }
}

@media only screen and (max-width: 1500px) {
    .ml11 {
        margin-left: 22rem;
        margin-top: 12rem;
    }
}

@media only screen and (max-width: 1400px) {
    .ml11 {
        margin-left: 22rem;
        margin-top: 12rem;
        z-index: 99
    }
}

@media only screen and (max-width: 1300px) {
    .ml11 {
        margin-left: 18rem;
        margin-top: 12rem;
    }
}

@media only screen and (max-width: 1200px) {
    .ml11 {
        margin-left: 16rem;
        margin-top: 10rem;
    }
}

@media only screen and (max-width: 1050px) {
    .ml11 {
        margin-left: 11rem;
        margin-top: 10rem;
    }
}

@media only screen and (max-width: 900px) {
    .box-5 {
        position: relative;
        height: auto;
        margin-top: 0rem
    }

    .ml11 {
        text-align: left;
        width: 70%;
        margin: 2rem auto;
        float: none;
        clear: both；
            /*テキスト*/
    }

    .top h3 {
        font-size: 1.3rem;
        letter-spacing: 0.1em;
        line-height: 1.7;
        padding-bottom: 1rem
    }
}

@media only screen and (max-width: 600px) {

    .ml11 {
        width: 80%;
        margin: 2rem auto;
    }

    .top h3 {
        font-size: 1rem;
        letter-spacing: 0.1em;
        line-height: 1.7;
        padding-bottom: 1rem
    }
}


/*----------------------------------------------------------------7*/
.box-6 {
    position: relative;
    height: 70rem;
    margin-top: 3rem
}

.ml12 {
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 10rem;
    margin-top: 5rem;
    width: 40%
}

.ml13 {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 50%;
    margin-top: 12rem
}

.ml14 {
    position: absolute;
    bottom: 0;
    right: 0;
}

.box-7 {
    position: relative;
    height: 3rem;
    margin-top: 5rem
}

@media only screen and (max-width: 1200px) {
    .ml13 {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 45%;
        margin-top: 8rem
    }
}

@media only screen and (max-width: 900px) {
    .box-6 {
        position: relative;
        height: auto;
        margin-top: 0rem
    }

    .box-7 {
        position: relative;
        height: 0rem;
        margin-top: 0rem
    }

    .ml12 {
        position: static;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 33;
        /*画像*/
    }

    .ml14 {
        position: static;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 33;
        /*画像*/
    }

    .ml13 {
        position: static;
        text-align: left;
        width: 70%;
        margin: 2rem auto;
        float: none;
        clear: both；
            /*テキスト*/
    }
}

@media only screen and (max-width: 600px) {
    .ml12 {
        margin-top: 2rem
    }

    .ml13 {
        width: 85%;
        margin: 2rem auto;
    }
}

/*----------------------------------------------------------------8*/
.box-8 {
    position: relative;
    height: 38rem;
    margin-top: 5rem
}

.ml15 {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 10%;
    margin-top: 8rem;
}

.ml15 img {
    width: 450px;
}

.ml15 h2 {
    font-size: 1.5rem
}

.ns-hero__copy4 {
    width: 70%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}

@media only screen and (max-width: 1400px) {
    .ns-hero__copy4 {
        width: 40%;
    }
}

.you {
    position: absolute;
    width: 55%;
    top: 0;
    left: 0;
}

.video01 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    top: 0;
    left: 0;
}

.video01 iframe {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    margin-left: 5rem;
    top: 0;
    left: 0;
}

@media only screen and (max-width: 1550px) {
    .ml15 {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 3%;
        margin-top: 8rem;
    }

    .ml15 img {
        width: 450px;
    }

    .ml15 h2 {
        font-size: 1.5rem
    }
}

@media only screen and (max-width: 1400px) {
    .box-8 {
        position: relative;
        height: 28rem;
        margin-top: 5rem;
        margin-bottom: 2rem
    }

    .ml15 {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 5%;
        margin-top: 5rem;
    }

    .ml15 h2 {
        font-size: 1.2rem
    }

    .you {
        position: absolute;
        width: 50%;
        top: 0;
        left: 0;
    }
}

@media only screen and (max-width: 1200px) {
    .box-8 {
        position: relative;
        height: 20rem;
        margin-top: 5rem;
        margin-bottom: 2rem
    }

    .ml15 img {
        width: 300px;
    }

    .ml15 h2 {
        font-size: 1rem
    }
}

@media only screen and (max-width: 1100px) {
    .ml15 {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 5%;
        margin-top: 2rem;
    }
}

@media only screen and (max-width: 900px) {
    .box-8 {
        height: auto;
        padding-bottom: 3rem;
    }

    .ml15 {
        position: static;
        top: 0;
        right: 0;
        margin-right: 0%;
        margin-top: 2rem;
        text-align: center;
    }

    .ml15 img {
        width: 450px;
    }

    .ml15 h2 {
        font-size: 2rem
    }

    .ml15-sp {
        padding: 0 10%;
    }

    .you {
        position: static;
        width: 100%;
        top: 0;
        left: 0;
    }

    .video01 iframe {
        margin-left: 0rem;
    }
}

@media only screen and (max-width: 700px) {
    .ml15 h2 {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 480px) {
    .ml15 h2 {
        font-size: 1rem
    }

    .ml15 img {
        width: 300px;
    }
}

/*-----------------------------------------------------------------9*/
.box-9 h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 2rem
}

footer iframe {
    height: 39rem
}

@media screen and (min-width: 1000px) {
    .sp_br2 {
        display: none;
    }
}

.pc {
    display: block;
}

.sp {
    display: none;
}

@media screen and (max-width: 900px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
}

.col1 {
    width: 8.3333333%;
    float: left;
}

.col2 {
    width: 16.66666%;
    float: left;
}

.col3 {
    width: 25%;
    float: left;
}

.col4 {
    width: 33.333333%;
    float: left;
}

.col5 {
    width: 41.66666%;
    float: left;
}

.col6 {
    width: 48%;
    float: left;
    margin: 0 1%
}

.col7 {
    width: 58.33333%;
    float: left;
}

.col8 {
    width: 66.66666%;
    float: left;
}

@media screen and (max-width: 900px) {
    .col6 {
        width: 100%;
        float: none;
        margin: 0%
    }
}

@media screen and (max-width: 1200px) {
    .col2 {
        width: 25%;
        float: left;
    }
}

@media screen and (max-width: 480px) {
    .col2 {
        width: 33.333333%;
        float: left;
    }
}

@media screen and (max-width: 700px) {
    .col2 {
        width: 33.333333%;
        float: left;
    }
}

.container2 {
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%
}

@media screen and (max-width: 900px) {
    .container2 {
        margin: 0 auto;
        padding: 0;
        width: 100%
    }
}

.snip1352 {
    position: relative;
    overflow: hidden;
}

.snip1352 img {
    max-width: 100%;
    vertical-align: top;
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.snip1352:hover img,
.snip1352.hover img {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

.youtube2 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube2 iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}


.text {
    margin-bottom: 5rem;
    text-align: center;
}

.text img {
    width: 450px;
    margin: 0 auto;
}

@media screen and (max-width: 900px) {
    .text {
        margin-bottom: 5rem;
        margin-top: 3rem;
        text-align: center;
    }

    .box-9 h2 {
        font-size: 24px;
        margin-bottom: 10px
    }
}

@media screen and (max-width: 480px) {
    .text {
        margin-bottom: 5rem;
        margin-top: 3rem;
        text-align: center;
    }

    .text img {
        width: 300px;
        margin: 0 auto;
    }
}

footer .top-social a {
    color: #fff
}

.mt1 {
    margin-top: 1rem;
}

.mt2 {
    margin-top: 2rem;
}

.mt3 {
    margin-top: 3rem;
}

.mt4 {
    margin-top: 4rem;
}

.mt5 {
    margin-top: 5rem;
}

.mt6 {
    margin-top: 6rem;
}

.mt7 {
    margin-top: 7rem;
}

.mt8 {
    margin-top: 8rem;
}

.mt9 {
    margin-top: 9rem;
}

.mt10 {
    margin-top: 10rem;
}

.mb1 {
    margin-bottom: 1rem;
}

.mb2 {
    margin-bottom: 2rem;
}

.mb3 {
    margin-bottom: 3rem;
}

.mb4 {
    margin-bottom: 4rem;
}

.mb5 {
    margin-bottom: 5rem;
}

.mb6 {
    margin-bottom: 6rem;
}

.mb7 {
    margin-bottom: 7rem;
}

.mb8 {
    margin-bottom: 8rem;
}

.mb9 {
    margin-bottom: 9rem;
}

.mb10 {
    margin-bottom: 10rem;
}

.pt1 {
    padding-top: 1rem;
}

.pt2 {
    padding-top: 2rem;
}

.pt3 {
    padding-top: 3rem;
}

.pt4 {
    padding-top: 4rem;
}

.pt5 {
    padding-top: 5rem;
}

.pb1 {
    padding-bottom: 1rem;
}

.pb2 {
    padding-bottom: 2rem;
}

.pb3 {
    padding-bottom: 3rem;
}

.pb4 {
    padding-bottom: 4rem;
}

.pb5 {
    padding-bottom: 5rem;
}

.m-auto {
    margin: 0 auto;
}

.spad-end {
    padding: 8rem 0 8rem
}

@media screen and (min-width: 800px) {
    .br {
        display: none;
    }
}