/*
Theme Name: SGSPU_2
Theme URL: SGSPU.ru
Description: Тема для сайта СГСПУ
Author: Чапланов Иван Сергеевич
Author URL: placat-web.ru
Version: 0.0.2
*/
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@300&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Alumni Sans', sans-serif;
    font-weight: 300;
    list-style: none;
    text-decoration: none;
}
body{
    font-family: "Alumni Sans", sans-serif;
    font-weight: 300;
    background-color: #FAFAFA;
    display: flex;
    flex-direction:column;
}
.header__top{
    position: fixed;
    width: 100%;
    border-radius: 0px 0px calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960)));
    height: calc(50px + (100 - 50) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
    z-index: 50;
}
.sgspu__full{
    color: #FAFAFA;
    position: absolute;
    left: 50%;
    top: calc(-4px + (-8 - -4) * ((100vw - 960px) / (1920 - 960)));
    transform: translate(-50%, -0);
    font-size: calc(18px + (36 - 18) * ((100vw - 960px) / (1920 - 960)));
    white-space: nowrap;
}
.sgspu__m{
    display: none;
}
.logo__div a img{
    position: absolute;
    width: calc(47px + (90 - 47) * ((100vw - 960px) / (1920 - 960)));
    height: calc(47px + (90 - 47) * ((100vw - 960px) / (1920 - 960)));
    margin-top: calc(2px + (6 - 2) * ((100vw - 960px) / (1920 - 960)));
    margin-left: calc(1px + (2 - 1) * ((100vw - 960px) / (1920 - 960)));
}
.btn__brgr{
    width: calc(27.5px + (55 - 27.5) * ((100vw - 360px) / (960 - 360)));
    height: calc(27.5px + (55 - 27.5) * ((100vw - 360px) / (960 - 360)));
    margin-top: calc(1px + (2.75 - 1) * ((100vw - 360px) / (960 - 360)));
    margin-left: calc(10px + (20 - 10) * ((100vw - 360px) / (960 - 360)));
    border: none;
    background-color: #023B8C;
    position: absolute;
    display: none;
}
.btn__brgr span{
    position: absolute;
    width: calc(15px + (40 - 15) * ((100vw - 360px) / (960 - 360)));
    height: calc(1px + (4 - 1) * ((100vw - 360px) / (960 - 360)));
    background-color: #FAFAFA;
    transition: transorm 2s opacity 2s background-color 2s ;
}
.btn__brgr span:nth-child(1){
    transform: translateY(calc(5px + (15 - 5) * ((100vw - 360px) / (960 - 360)))) translate(-50%, -0);
}
.btn__brgr span:nth-child(2){
    transform: translateY(0) translate(-50%, -0);
}
.btn__brgr span:nth-child(3){
    transform: translateY(calc(-5px + (-15 + 5) * ((100vw - 360px) / (960 - 360)))) translateY(0) translate(-50%, -0);
}
.header__top.open .btn__brgr span:nth-child(2){
    opacity: 0 ;
    transform:translate(-50%, -0);
}
.header__top.open .btn__brgr span:nth-child(1){
    transform: translate(-50%, -0) translateY(0) rotate(45deg);
}
.header__top.open .btn__brgr span:nth-child(3){
    transform: translate(-50%, -0) translateY(0) rotate(-45deg);
}
.navigator__nav{
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    background-color: #0000004b;
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translate( -50% , 0);
    font-size: calc(13.5px + (27 - 13.5) * ((100vw - 960px) / (1920 - 960)));
}
.navigator__nav ul{
    display: flex;
    justify-content:space-around;
}
.navigator__nav ul li{
    display: flex;
    flex-grow: 1;
    position: relative;
}
.navigator__nav ul li a{
    text-align: center;
    color: #FAFAFA;
    flex-grow: 1;
    white-space: nowrap;
}
.navigator__nav ul li a:hover{
    background: #FAFAFA;
    color: #023B8C;
}
.navigator__nav ul li ul{
    top: 100%;
    position: absolute;
    display: block;
    background-color: #012a63;
    left: 50%;
    transform: translate( -50% , 0);
    display: none;
}
.navigator__nav ul li ul li{
    color: #FAFAFA;
}
.navigator__nav ul li ul li a{
    text-align: left;
    padding-left:20px;
    padding-right:20px;
    white-space: nowrap;
    text-align: center;
}
.navigator__nav ul li:hover > ul{
    display: initial;
}
.gallery__all{
    border-radius: 0px 0px calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960)));
    height: calc(470px + (935 - 470) * ((100vw - 960px) / (1920 - 960)));
    width: 100%;
    background-color: #023B8C;
    color: #FAFAFA;
    position: relative;
    top: 0;
    left: 0;
    z-index: 49;
}
.gallery__ins{
    position: absolute;
    top: calc(60px + (120 - 60) * ((100vw - 960px) / (1920 - 960)));
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    height: calc(400px + (800 - 400) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    transform: translate( -50% , 0);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-content:space-between;
}
.gallery__elm{
    object-fit: cover;
    border-radius: calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960)));
    width: calc(205.35px + (405.7 - 205.35) * ((100vw - 960px) / (1920 - 960)));
    height: calc(136.75px + (269.92 - 136.75) * ((100vw - 960px) / (1920 - 960)));;
}
.gallery__slider{
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
}
.news__list{
    position: relative;
    width: 100%;
    height: calc(800px + (1600 - 800) * ((100vw - 960px) / (1920 - 960)));
    background-color: #fafafa;
}
.news__top{
    top: calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960)));
    position: absolute;
    color: #023B8C;
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    transform: translate( -50% , 0);
    font-size: calc(18px + (36 - 18) * ((100vw - 960px) / (1920 - 960)));
}
.news__top h2{
    position: absolute;
    transform: translate( -50% , 0);
    left: 12%;
}
.span2{
    position: absolute;
    width: calc(55px + (110 - 55) * ((100vw - 960px) / (1920 - 960)));
    height: calc(1px + (2 - 1) * ((100vw - 960px) / (1920 - 960)));
    top: calc(15px + (33 - 15) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
}
.span1{
    position: absolute;
    width: calc(702px + (1405 - 702) * ((100vw - 960px) / (1920 - 960)));
    height: calc(1px + (2 - 1) * ((100vw - 960px) / (1920 - 960)));
    top: calc(15px + (33 - 15) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
    transform: translate( -100% , 0);
    left: 100%;
}
.news__box{
    position: absolute;
    top: calc(75px + (130 - 75) * ((100vw - 960px) / (1920 - 960)));
    color: #023B8C;
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    height: calc(700px + (1400 - 700) * ((100vw - 960px) / (1920 - 960)));
    transform: translate( -50% , 0);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-content:space-between;
}
.bad__cde{
    width: 100%;
    height: calc(50px + (100 - 50) * ((100vw - 960px) / (1920 - 960)));
}
.news__bgr{
    width: 100%;
    background-color: #FAFAFA;
    position: relative;
}
.news__pge{
    position: relative;
    left: 50%;
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    transform: translate( -50% , 0);
    color: #023B8C;
}
.news__pge h2{
    font-size: calc(27px + (54 - 27) * ((100vw - 960px) / (1920 - 960)));
    text-align: center;
}
.news__pge{
    font-size: calc(18px + (36 - 18) * ((100vw - 960px) / (1920 - 960)));
}
.news__pge div a{
    color: #023B8C;
}
.wp-block-file__button{
    color: #FAFAFA !important; 
    background: #023B8C;
}
.news__ebx{
    position: relative;
    width: calc(205.35px + (405.7 - 205.35) * ((100vw - 960px) / (1920 - 960)));
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.news__ebx a{
    position: relative;
    width: calc(205.35px + (405.7 - 205.35) * ((100vw - 960px) / (1920 - 960)));
    color: #023B8C;
    font-size: calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960)));
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.486);
}
.news__ebx a h3{
    position: relative;
    color: #023B8C;
    font-size: calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960)));
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.486);
}
.news__elm{
    position: relative;
    width: calc(205.35px + (405.7 - 205.35) * ((100vw - 960px) / (1920 - 960)));
}
.news__elm img{
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.048), 
            0px 2px 4px rgba(0,0,0,0.1),
            0px 4px 8px rgba(0,0,0,0.1),
            0px 8px 16px rgba(0,0,0,0.1);
    position: relative;
    object-fit: cover;
    width: calc(205.35px + (405.7 - 205.35) * ((100vw - 960px) / (1920 - 960)));
    height: calc(136.75px + (270 - 136.75) * ((100vw - 960px) / (1920 - 960)));
    border-radius: calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960)));
}
.news__pge ul li{
    font-size: calc(23px + (46 - 23) * ((100vw - 960px) / (1920 - 960)));
    color: #023B8C;
}
.news__pge ul li ul li{
    font-size: calc(13px + (26 - 13) * ((100vw - 960px) / (1920 - 960)));
    color: #023B8C;
}
.news__pge ul li a{
    color: #023B8C;
}
.news__pge ul li ul li a{
    color: #023B8C;
}
.campus__all{
    position: relative;
    border-radius: calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
    height: calc(537px + (1074 - 537) * ((100vw - 960px) / (1920 - 960)));
    width: 100%;
    color: #FAFAFA;
    font-size: calc(18px + (36 - 18) * ((100vw - 960px) / (1920 - 960)));
	z-index:49;
}
.map__top{
    position: absolute;
    top: calc(25px + (50 - 25) * ((100vw - 960px) / (1920 - 960)));
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    transform: translate( -50% , 0);
    font-size: calc(18px + (36 - 18) * ((100vw - 960px) / (1920 - 960)));
}
.map__top h2{
    position: absolute;
    transform: translate( -50% , 0);
    left: 12%;
}
.span4{
    position: absolute;
    width: calc(55px + (110 - 55) * ((100vw - 960px) / (1920 - 960)));
    height: calc(1px + (2 - 1) * ((100vw - 960px) / (1920 - 960)));
    top: calc(15px + (33 - 15) * ((100vw - 960px) / (1920 - 960)));
    background-color: #FAFAFA;
}
.span3{
    position: absolute;
    width: calc(702px + (1405 - 702) * ((100vw - 960px) / (1920 - 960)));
    height: calc(1px + (2 - 1) * ((100vw - 960px) / (1920 - 960)));
    top: calc(15px + (33 - 15) * ((100vw - 960px) / (1920 - 960)));
    background-color: #FAFAFA;
    transform: translate( -100% , 0);
    left: 100%;
}
.map__mrc{
    top: calc(70px + (140 - 70) * ((100vw - 960px) / (1920 - 960)));
    position: absolute;
    display: flex;
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    height: calc(440.5px + (881 - 440.5) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    transform: translate( -50% , 0);
    justify-content: space-between;
    align-items:stretch;
}
.map__box iframe{
    height: calc(440.5px + (881 - 440.5) * ((100vw - 960px) / (1920 - 960)));
    border-radius: calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960)));
    width: calc(440.5px + (881 - 440.5) * ((100vw - 960px) / (1920 - 960)));
}
.mrc__box{
    display: flex;
    flex-wrap: wrap;
}
.stud__all{
    position: relative;
    width: 100%;
    height: calc(300px + (600 - 300) * ((100vw - 960px) / (1920 - 960)));
    background-color: #fafafa;
    color: #023B8C;
    font-size: calc(18px + (36 - 18) * ((100vw - 960px) / (1920 - 960)));
    z-index: 47;
}
.stud__top{
    position: absolute;
    top: calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960)));
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    transform: translate( -50% , 0);
    font-size: calc(18px + (36 - 18) * ((100vw - 960px) / (1920 - 960)));
}
.stud__top h2{
    position: absolute;
    transform: translate( -50% , 0);
    left: 18%;
}
.span6{
    position: absolute;
    width: calc(52px + (104 - 52) * ((100vw - 960px) / (1920 - 960)));
    height: calc(1px + (2 - 1) * ((100vw - 960px) / (1920 - 960)));
    top: calc(15px + (33 - 15) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
}
.span5{
    position: absolute;
    width: calc(592px + (1185 - 592) * ((100vw - 960px) / (1920 - 960)));
    height: calc(1px + (2 - 1) * ((100vw - 960px) / (1920 - 960)));
    top: calc(15px + (33 - 15) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
    transform: translate( -100% , 0);
    left: 100%;
}
.stud__box{
    position: absolute;
    top: calc(75px + (130 - 75) * ((100vw - 960px) / (1920 - 960)));
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    height: calc(210px + (420 - 210) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    transform: translate( -50% , 0);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-content:space-between;
}
.stud__elm{
    width: calc(405.7px + (811.4 - 405.7) * ((100vw - 960px) / (1920 - 960)));
}
.adtr__pge{
    position: relative;
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    transform: translate( -50% , 0);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-content:space-between;
}
.adtr__elm{
    position: relative;
    width: calc(405.7px + (811.4 - 405.7) * ((100vw - 960px) / (1920 - 960)));
}
.footer__all{
    position: relative;
    height: calc(200px + (400 - 200) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
    width: 100%;
    z-index: 49;
    color: #FAFAFA !important;
}
.footer__mnu{
    top:10%;
    position: relative;
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    transform: translate( -50% , 0); 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-content:space-between;

}
.footer__mnu div ul{
    padding-left: calc(5px + (10 - 5) * ((100vw - 960px) / (1920 - 960)));
    border-left: calc(1px + (2 - 1) * ((100vw - 960px) / (1920 - 960))) solid #FAFAFA;
}
.footer__mnu div ul li a{
    color: #FAFAFA !important;
    font-size: calc(18px + (36 - 18) * ((100vw - 960px) / (1920 - 960)));
}
.footer__mnu div ul li{
    position: relative;
}
.footer__mnu div h2{
    font-size: calc(30px + (60 - 30) * ((100vw - 960px) / (1920 - 960)));
}
.footer__ala{
    width: 100%;
    text-align: center;
} 
.footer__mnu div a h2{
    color: #FAFAFA;
}
.footer__mnu div ul li a{
    margin-left: 5px;
}
.l__logo{
    position: relative;
    width: calc(105px + (210 - 105) * ((100vw - 960px) / (1920 - 960)));
    height: calc(105px + (210 - 105) * ((100vw - 960px) / (1920 - 960)));
}
.l__span__1{
    position: relative;
    width: calc(375px + (750 - 375) * ((100vw - 960px) / (1920 - 960)));
    height: calc(2px + (3 - 2) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
}
.l__span__2{
    position: relative;
    width: calc(370px + (740 - 370) * ((100vw - 960px) / (1920 - 960)));
    height: calc(2px + (3 - 2) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
}
.l__top{
    position: relative;
    display: flex;
    height: calc(105px + (210 - 105) * ((100vw - 960px) / (1920 - 960)));
    align-items: center;
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    justify-content: space-between;
}
.l__prof{
    position: relative;
    display: flex;
    justify-content: space-between;
    height: calc(400px + (800 - 400) * ((100vw - 960px) / (1920 - 960)));
    align-items: center;
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
}
.lic__bgr{
    width: 100%;
    background-color: #FAFAFA;
    position: relative; 
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}
.l__cart{
    border-radius: calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960)));
    width: calc(245px + (490 - 245) * ((100vw - 960px) / (1920 - 960)));
    height: calc(400px + (730 - 400) * ((100vw - 960px) / (1920 - 960)));
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}
.l__img{
    position: relative;
    width: calc(50px + (100 - 50) * ((100vw - 960px) / (1920 - 960)));
    height: calc(50px + (100 - 50) * ((100vw - 960px) / (1920 - 960)));
    z-index: 49;
}
.l__cart__h{
    width: calc(230px + (460 - 230) * ((100vw - 960px) / (1920 - 960)));
    display: flex;
    justify-content: center;
    align-items: center;
}
.l__span__3{
    position: relative;
    width: calc(70px + (140 - 70) * ((100vw - 960px) / (1920 - 960)));
    height: calc(1px + (2 - 1) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
}
.l__cart__all{
    position: relative;
    width: calc(230px + (460 - 230) * ((100vw - 960px) / (1920 - 960)));
    height: calc(350px + (700 - 350) * ((100vw - 960px) / (1920 - 960)));
    display: flex;
    flex-direction: column;
    align-items: center;
}
.l__cart__all h2{
    font-size: calc(24px + (48 - 24) * ((100vw - 960px) / (1920 - 960)));
    text-align: center;
    color: #023B8C;
    padding-bottom: calc(4px + (8 - 4) * ((100vw - 960px) / (1920 - 960)));
}
.l__cart__all h3{
    font-size: calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960)));
    text-align: left;
    color: #023b8c;
    padding-bottom: calc(4px + (8 - 4) * ((100vw - 960px) / (1920 - 960)));
    width: calc(200px + (400 - 200) * ((100vw - 960px) / (1920 - 960)));
    white-space: nowrap;
    }
.l__cart__all p{
    font-size: calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960)));
    padding-left: calc(12px + (24 - 12) * ((100vw - 960px) / (1920 - 960)));
    padding-right: calc(12px + (24 - 12) * ((100vw - 960px) / (1920 - 960)));
    color: #023B8C;
    text-align: center;
    padding-bottom: calc(6px + (12 - 6) * ((100vw - 960px) / (1920 - 960)));
    padding-top: calc(6px + (12 - 6) * ((100vw - 960px) / (1920 - 960)));
    }
.l__span__4{
    position: relative;
    width: calc(245px + (490 - 245) * ((100vw - 960px) / (1920 - 960))); 
}
.l__prof__adr{
    position: relative;
    display: flex;
    justify-content: space-between;
    height: calc(400px + (800 - 400) * ((100vw - 960px) / (1920 - 960)));
    align-items: center;
    width: 100%;
    border-radius: calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960))) calc(15px + (30 - 15) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
}
.map__mrc__lic{
    position: relative;
    display: flex;
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    transform: translate( -50% , 0);
    justify-content: space-between;
    align-items:stretch;
}
.map__box__lic iframe{
    height: calc(350.5px + (701 - 350.5) * ((100vw - 960px) / (1920 - 960)));
    border-radius: calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960)));
    width: calc(550.5px + (1101 - 550.5) * ((100vw - 960px) / (1920 - 960)));
}
.mrc__box__lic{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.map__mrc__lic ul li{
    color:#FAFAFA;
    font-size: calc(24px + (48 - 24) * ((100vw - 960px) / (1920 - 960)));
}
.mrc__box__lic{
    display: flex;
    flex-direction: column;
}
.l__top h2{
    color: #023B8C;
    font-size: calc(24px + (48 - 24) * ((100vw - 960px) / (1920 - 960)));
    white-space: nowrap
}
.l__span__5{
    position: relative;
    width: calc(675px + (1350 - 675) * ((100vw - 960px) / (1920 - 960)));
    height: calc(1px + (2 - 1) * ((100vw - 960px) / (1920 - 960)));
    background-color: #023B8C;
}
.l__prost{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    flex-wrap: wrap;
}
.gallery__allt{
    border-radius: 0px 0px calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960))) calc(20px + (30 - 20) * ((100vw - 960px) / (1920 - 960)));
    height: calc(780px + (1600 - 750) * ((100vw - 980px) / (1920 - 960)));
    width: 100%;
    background-color: #023B8C;
    color: #FAFAFA;
    position: relative;
    top: 0;
    left: 0;
    z-index: 49;
}
.gallery__inst{
    position: absolute;
    top: calc(60px + (120 - 60) * ((100vw - 960px) / (1920 - 960)));
    width: calc(852px + (1704 - 852) * ((100vw - 960px) / (1920 - 960)));
    height: calc(725px + (1450 - 725) * ((100vw - 960px) / (1920 - 960)));
    left: 50%;
    transform: translate( -50% , 0);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-content:space-between;
}
.eye__all{
	margin: 0% 0% 0% 0%;
	padding: 0% 0% 0% 0%;
	min-height: 0%;
	min-width: 0%;
	width: 0px;
}
.bvi-shortcode {
    position: relative;
    height: calc(16px + (32 - 16) * ((100vw - 960px) / (1920 - 960))) !important;
	margin: 0% 0% 0% 0% !important;
	padding: 0% 0% 0% 0% !important;
}
.bvi-svg-eye {
    height: calc(12px + (24 - 12) * ((100vw - 960px) / (1920 - 960))) !important;
}
.bvi-shortcode a{
	padding: 0% !important;
	margin: 0% !important;
}
@media (max-width: 960px){
    .bvi-svg-eye{
	height: calc(12px + (24 - 12) * ((100vw - 360px) / (960 - 360))) !important;
	}
    .l__logo{
        width: calc(56px + (150 - 56) * ((100vw - 360px) / (960 - 360)));
        height: calc(56px + (150 - 56) * ((100vw - 360px) / (960 - 360)));
    }
    .l__span__1{
        width: calc(123px + (330 - 123) * ((100vw - 360px) / (960 - 360)));
        height: calc(2px + (3 - 2) * ((100vw - 960px) / (1920 - 960)));
    }
    .l__span__2{
        width: calc(123px + (330 - 123) * ((100vw - 360px) / (960 - 360)));
        height: calc(2px + (3 - 2) * ((100vw - 960px) / (1920 - 960)));
    }
    .map__mrc__lic ul li{
        font-size: calc(18px + (50 - 18) * ((100vw - 360px) / (960 - 360)));
    }
    .map__box__lic iframe{
        width: calc(168px + (450 - 168) * ((100vw - 360px) / (960 - 360)));
        height: calc(337px + (900 - 337) * ((100vw - 360px) / (960 - 360)));
    }
    .map__box__lic{
        width: calc(168px + (450 - 168) * ((100vw - 360px) / (960 - 360)));
        height: calc(337px + (900 - 337) * ((100vw - 360px) / (960 - 360)));
    }
    .l__prof__adr{
        height: calc(360px + (960 - 360) * ((100vw - 360px) / (960 - 360)));
    }
    .l__span__5{
        width: calc(82px + (220 - 82) * ((100vw - 360px) / (960 - 360)));
        height: calc(2px + (3 - 2) * ((100vw - 960px) / (1920 - 960)));
    }
    .l__top h2{
        font-size: calc(34px + (90 - 34) * ((100vw - 360px) / (960 - 360)));
    }
    .l__cart__all h3{
        width: calc(300px + (800 - 300) * ((100vw - 360px) / (960 - 360)));
    }
    .l__cart__all{
        width: calc(312px + (830 - 312) * ((100vw - 360px) / (960 - 360)));
        height: calc(461px + (1230 - 461) * ((100vw - 360px) / (960 - 360)));;
    }
    .l__cart__all p{
        font-size: calc(22px + (60 - 22) * ((100vw - 360px) / (960 - 360)));
    }
    .l__cart__all h2{
        font-size: calc(34px + (90 - 34) * ((100vw - 360px) / (960 - 360)));
    }
    .l__cart__all h3{
        font-size: calc(27px + (72 - 27) * ((100vw - 360px) / (960 - 360)));
    }
    .l__img{
        width: calc(45px + (120 - 45) * ((100vw - 360px) / (960 - 360)));
        height: calc(45px + (120 - 45) * ((100vw - 360px) / (960 - 360)));
    }
    .l__span__3{
        width: calc(120px + (320 - 120) * ((100vw - 360px) / (960 - 360)));
        height: calc(2px + (3 - 2) * ((100vw - 960px) / (1920 - 960)));
    }
    .l__cart__h{
        width: calc(320px + (852 - 320) * ((100vw - 360px) / (960 - 360)));
        height: calc(60px + (160 - 60) * ((100vw - 360px) / (960 - 360)));
    }
    .l__cart{
        width: calc(320px + (852 - 320) * ((100vw - 360px) / (960 - 360)));
        height: calc(523px + (1393 - 523) * ((100vw - 360px) / (960 - 360)));
    }
    .l__top{
        width: calc(320px + (852 - 320) * ((100vw - 360px) / (960 - 360)));
        height: calc(60px + (160 - 60) * ((100vw - 360px) / (960 - 360)));
    }
    .l__prof{
        flex-direction: column;
        width: calc(320px + (852 - 320) * ((100vw - 360px) / (960 - 360)));
        height: calc(1613px + (4300 - 1613) * ((100vw - 360px) / (960 - 360)));
    }
	.bad__cde{
        height: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
        width: 100%;
  }
    .header__top{
        border-radius: 0px 0px 0px 0px;
        height: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
        width: 100%;
        background-color: #023B8C;
        color: #FAFAFA;
        position: fixed;
    }
    .btn__brgr{
        display: initial;
    }
    .sgspu__full{
        display: none;
    }
    .logo__div a img{
        width: calc(25px + (55 - 25) * ((100vw - 360px) / (960 - 360)));
        height: calc(25px + (55 - 25) * ((100vw - 360px) / (960 - 360)));
        margin-top: calc(2.5px + (3 - 2.5) * ((100vw - 360px) / (960 - 360)));
        margin-left: calc(137px + (400 - 137) * ((100vw - 360px) / (960 - 360)));
    }
    .sgspu__m{
        width: auto;
        position: absolute;
        left: calc(192px + (510 - 192) * ((100vw - 360px) / (960 - 360)));
        top: calc(-4px + (-7 - -4) * ((100vw - 360px) / (960 - 360)));
        transform: translate(-50%, -0);
        font-size: calc(15px + (30 - 15) * ((100vw - 360px) / (960 - 360)));
        display: initial;
    }
    .navigator__nav{
        background-color: #023B8C;
        position: absolute;
        left: -100vw;
        transform: translate(-0, 100%);
        width: 100vw;
        font-size: calc(20px + (40 - 20) * ((100vw - 360px) / (960 - 360)));
        text-align: center;
        transition: transform .5s;
        flex-direction:column;
    }
    .navigator__nav ul{
        flex-direction:column;
    }
    .navigator__nav ul li{
        padding: 0px 0;
        display: block;
        flex-direction:column;
        display: flex;
    }
    .navigator__nav ul li:hover{
        background: #023b8c00;
        color: #FAFAFA;
    }
    .navigator__nav ul li a{
            width: 100vw;
            color: #FAFAFA;
            flex-grow:1;
    }
    .navigator__nav ul li:hover > ul{
        display: none;
    }
    .open .navigator__nav{
        transform: translateX(100%) translateY(100%);
    }
    .gallery__all{
        border-radius: 0px 0px calc(20px + (30 - 20) ((100vw - 360px) / (960 - 360))) calc(20px + (30 - 20) * ((100vw - 360px) / (960 - 360)));
        height: calc(380px + (990 - 380) * ((100vw - 360px) / (960 - 360)));
        width: 100%;
        background-color: #023B8C;
        position: relative;
        z-index: 49;
    }
    .gallery__ins{
        position: absolute;
        top: calc(50px + (100 - 50) * ((100vw - 360px) / (960 - 360)));
        width: calc(320px + (850 - 320) * ((100vw - 360px) / (960 - 360)));
        height: calc(320px + (860 - 320) * ((100vw - 360px) / (960 - 360)));
        left: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; 
        align-content:space-between;
    }
    .gallery__elm{
        object-fit: cover;
        border-radius: calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360))) calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360))) calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360))) calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360)));
        width: calc(150px + (400 - 150) * ((100vw - 360px) / (960 - 360)));
        height: calc(99.8px + (267.19 - 99.8) * ((100vw - 360px) / (960 - 360)));;
    }
    .gallery__slider{
        width: calc(320px + (850 - 320) * ((100vw - 360px) / (960 - 360)));
    }
    .news__list{
        height: calc(1480px + (3300 - 1480) * ((100vw - 360px) / (960 - 360)));
    }
    .news__list h2{
        font-size: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
        left: 25%;
    }
    .span2{
        top: calc(17px + (35 - 17) * ((100vw - 360px) / (960 - 360)));
        width: calc(35px + (115 - 35) * ((100vw - 360px) / (960 - 360)));
    }
    .span1{
        top: calc(17px + (35 - 17) * ((100vw - 360px) / (960 - 360)));
        width: calc(195px + (545 - 195) * ((100vw - 360px) / (960 - 360)));
    }
    .news__box{
        top: calc(60px + (120 - 60) * ((100vw - 360px) / (960 - 360)));
        height: calc(1200px + (3100 - 1200) * ((100vw - 360px) / (960 - 360)));
    }
    .news__elm h2{
        color: #023B8C;
        top: calc(-4px + (-8 - -4) * ((100vw - 360px) / (960 - 360)));
        font-size: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
        text-align: center;
    }
    .news__elm p{
        color: #000000;
        top: calc(-4px + (-8 - -4) * ((100vw - 360px) / (960 - 360)));
        font-size: calc(15px + (30 - 15) * ((100vw - 360px) / (960 - 360)));
	}
	.news__ebx{
        width: calc(150px + (400 - 150) * ((100vw - 360px) / (960 - 360)));
        flex-direction:column;
    	flex-wrap: wrap; 
		align-items: flex-start;
    }
    .news__ebx a{
        width: calc(150px + (400 - 150) * ((100vw - 360px) / (960 - 360)));
        color: #023B8C;
        font-size: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
        text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.300);
    }
    .news__ebx a h3{
        font-size: calc(15px + (30 - 15) * ((100vw - 360px) / (960 - 360)));
    }
	.news__ebx img{
        width: calc(150px + (400 - 150) * ((100vw - 360px) / (960 - 360)));
        height: calc(100px + (266.2 - 100) * ((100vw - 360px) / (960 - 360)));
		border-radius: calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360))) calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360))) calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360))) calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360)));
	}
    .news__elm img{
        width: calc(150px + (400 - 150) * ((100vw - 360px) / (960 - 360)));
        height: calc(100px + (266.2 - 100) * ((100vw - 360px) / (960 - 360)));
		border-radius: calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360))) calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360))) calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360))) calc(15px + (20 - 15) * ((100vw - 360px) / (960 - 360)));
	}
    .news__pge h2{
        font-size: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
    }
    .news__pge p{
        font-size: calc(20px + (40 - 20) * ((100vw - 360px) / (960 - 360)));
    }
    .news__pge div a{
        font-size: calc(20px + (40 - 20) * ((100vw - 360px) / (960 - 360)));
    }
	.campus__all{
        height: calc(680px + (1980 - 680) * ((100vw - 360px) / (960 - 360)));
    }
    .news__list h2{
        font-size: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
        left: 25%;
    }
    .news__pge ul li{
        font-size: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
        color: #023B8C;
    }
    .news__pge ul li ul li{
        font-size: calc(18px + (36 - 18) * ((100vw - 360px) / (960 - 360)));
        color: #023B8C;
    }
    .span4{
        top: calc(17px + (35 - 17) * ((100vw - 360px) / (960 - 360)));
        width: calc(35px + (115 - 35) * ((100vw - 360px) / (960 - 360)));
    }
    .span3{
        top: calc(17px + (35 - 17) * ((100vw - 360px) / (960 - 360)));
        width: calc(195px + (545 - 195) * ((100vw - 360px) / (960 - 360)));
    }
    .map__top h2{
        font-size: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
        left: 25%;
    }
    .map__mrc{
        top: calc(50px + (100 - 50) * ((100vw - 360px) / (960 - 360)));
        flex-direction: column;
        height: calc(600px + (1800 - 600) * ((100vw - 360px) / (960 - 360)));
        font-size: calc(15px + (40 - 15) * ((100vw - 360px) / (960 - 360)));
        align-content:stretch;
    }
    .map__box iframe{
        width: calc(320px + (860 - 320) * ((100vw - 360px) / (960 - 360)));
        height: calc(340px + (980 - 340) * ((100vw - 360px) / (960 - 360)));
    }
    .map__mrc ul{
        height: calc(340px + (980 - 340) * ((100vw - 360px) / (960 - 360)));
        display: flex;
        justify-content:center;
    }
	.stud__all{
        height: calc(379.5px + (1020 - 379.5) * ((100vw - 360px) / (960 - 360)));
    }
    .span6{
        top: calc(17px + (35 - 17) * ((100vw - 360px) / (960 - 360)));
        width: calc(50px + (200 - 50) * ((100vw - 360px) / (960 - 360)));
    }
    .span5{
        top: calc(17px + (35 - 17) * ((100vw - 360px) / (960 - 360)));
        width: calc(50px + (200 - 50) * ((100vw - 360px) / (960 - 360)));
    }
    .stud__top h2{
        font-size: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
        left: 50%;
        transform: translate( -50% , 0);
        white-space: nowrap;
    }
    .stud__box{
       top: calc(42px + (110 - 42) * ((100vw - 360px) / (960 - 360)));
       height: calc(330px + (880 - 330) * ((100vw - 360px) / (960 - 360)));
       display: flex;
       align-content:space-between;
       width: calc(320px + (850 - 320) * ((100vw - 360px) / (960 - 360)));
    }
    .stud__elm{
        width: calc(320px + (850 - 320) * ((100vw - 360px) / (960 - 360)));
    }
    .footer__all{
		font-size: calc(15px + (40 - 15) * ((100vw - 360px) / (960 - 360)));
        position: relative;
        height: calc(190px + (450 - 190) * ((100vw - 360px) / (960 - 360)));
    }
    .footer__mnu div h2{
        font-size: calc(30px + (60 - 30) * ((100vw - 360px) / (960 - 360)));
    }
    .footer__mnu div ul li a{
        margin-left: 5px;
        font-size: calc(15px + (40 - 15) * ((100vw - 360px) / (960 - 360)));
    }
    .footer__mnu div a h2{
        color: #FAFAFA;
        font-size: calc(15px + (40 - 15) * ((100vw - 360px) / (960 - 360)));
    }
    .gallery__allt{
        border-radius: 0px 0px calc(20px + (30 - 20) ((100vw - 360px) / (960 - 360))) calc(20px + (30 - 20) * ((100vw - 360px) / (960 - 360)));
        height: calc(720px + (1800 - 720) * ((100vw - 360px) / (960 - 360)));
        width: 100%;
        background-color: #023B8C;
        position: relative;
        z-index: 49;
    }
    .gallery__inst{
        position: absolute;
        top: calc(50px + (100 - 50) * ((100vw - 360px) / (960 - 360)));
        width: calc(320px + (850 - 320) * ((100vw - 360px) / (960 - 360)));
        height: calc(650px + (1650 - 650) * ((100vw - 360px) / (960 - 360)));
        left: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; 
        align-content:space-between;
    }
	.bvi-svg-eye {
    	height: calc(12px + (24 - 12) * ((100vw - 360px) / (960 - 360))) !important;
	}
	.bvi-shortcode {
    	height: calc(16px + (32 - 16) * ((100vw - 360px) / (960 - 360))) !important;
		left: 45%;
	}
}