﻿.application-banner-box{
	width: 100%;
	height: 100vh;
	padding-top: 94px;
	box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.application-banner{
    width: 100vw;
    height: 100%;
    font-size: 0;
}
.application-banner-block{
	width: 100%;
	height: 100%;
	display: block;
}
.application-banner-list{
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: inline-block;
	background-color: #000;
}
.application-banner-img{
	width: 100%;
	height: 100%;
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.5;
}
.application-banner-p{
	position: absolute;
	right: 20px;
	bottom: 20px;
	font-size: 28px;
	color: #FFF;
	z-index: 1;
	opacity: 0;
	transition: all .5s ease;
	letter-spacing: 1px;
	
}
.kwicks-selected .application-banner-p{
	opacity: 1;
}
.kwicks-selected.kwicks-collapsed .application-banner-p{
	opacity: 0;
}
.kwicks-expanded .application-banner-p{
	opacity: 1;
	transition-delay: 0.3s;
}
.application-banner-list-info{
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
}
.application-class-box{
	width: 100%;
	 display: block;
	 font-size: 0;
	 white-space: nowrap;
    overflow: hidden;
    height: 450px;
    position: relative;
}
.application-class-list{
	display: inline-block;
	width: calc(100vw / 6);
	vertical-align: top;
	position: relative;
}
.application-class-list a{
	width: 100%;
	height: 450px;
	display: block;
	position: relative;
	box-sizing: border-box;
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
}
.application-class-img-box{
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	position: relative;
	
}

.application-class-img-box span{
	width: 100%;
	height: 100%;
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.application-class-p{
	width: 100%;
	padding:20px 0;
	font-size: 20px;
	text-align: center;
	background-color: rgba(192,162,100,0.8);
	position: absolute;
	bottom: 20px;
	z-index: 1;
	letter-spacing: 1px;
}

.application-narrative-box{
	padding: 50px 0;
	background-color: #eee;
	text-align: center;
}

.application-narrative-p{
	font-size: 20px;
	letter-spacing: 1px;
	display: block;
	margin-bottom: 5px;
}
.application-narrative-title{
	font-size: 24px;
	letter-spacing: 1px;
	display: block;
}
.application-s-class-box{
	width: 1300px;
	max-width: 100%;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 40px;
	margin: 0 auto ;
	position: relative;
}
.application-class-next{
	position: absolute;
	right: 0;
	top: 62px;
}
.application-class-prev{
	position: absolute;
	left: 0;
	top: 62px;
}
.application-s-class{
	width: 160px;
	max-width: 100%;
	font-size: 16px;
	display: inline-block;
	vertical-align: top;
	color: #000;
	margin: 0 10px;
	margin-bottom: 10px;
	border: 1px solid #d1d1d1;
	padding: 15px 0px;
    padding-bottom: 10px;
	letter-spacing: 1px;
}
.application-img-box{
	width: 1540px;
	max-width: 100%;
	display: block;
	margin: 0 auto;
}
.application-img-list{
	width: 24%;
	display: block;
	position: relative;
	margin-bottom: 1%;
}
.application-img-mask,
.application2-img-mask{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-flex;
    display:         flex;
    -webkit-align-items: center;
          align-items: center;
    -webkit-justify-content: center;
          justify-content: center;
     flex-direction:column;
     background-color: rgba(44,78,139,0.7);
     color: #FFF;
     font-size: 14px;
     opacity: 0;
     transition: all .5s ease;
}
.application2-img-mask{
	font-size: 12px;
}
.application2-img-mask .application-img-title{
	padding: 0 10px;
	box-sizing: border-box;
	text-align: center;
}
.application-img-mask i{
	margin-bottom: 20px;
}
.application-img-title{
	font-family: "Acme";
	letter-spacing: 1px;
}

.application2-box{
	width: 1300px;
	max-width: 100%;
	display: block;
	margin: 0 auto;
	font-size: 0;
	padding: 0px 20px;
	padding-top: 200px;
	padding-bottom: 400px;
	box-sizing: border-box;
	position: relative;
}
.application2-img-box{
	width: 1064px;
    display: block;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.application2-img-list{
	display: inline-block;
}
.application2-img-list:nth-child(1) .application2-img-mask,
.application2-img-list:nth-child(2) .application2-img-mask,
.application2-img-list:nth-child(3) .application2-img-mask,
.application2-img-list:nth-child(4) .application2-img-mask,
.application2-img-list:nth-child(7) .application2-img-mask,
.application2-img-list:nth-child(8) .application2-img-mask{
	font-size: 14px;
}
.application2-img-list:nth-child(1){
	    width: 266px;
    height: 266px;
    max-width: 100%;
    position: relative;
    bottom: -185px;
}
.application2-img-list:nth-child(2){
	    width: 266px;
    height: 266px;
    max-width: 100%;
    position: absolute;
    left: 207px;
    top: -18px;
}
.application2-img-list:nth-child(3){
	    width: 266px;
    height: 266px;
    max-width: 100%;
    position: relative;
    left: 36px;
    top: 290px;
}
.application2-img-list:nth-child(4){
	width: 266px;
    height: 266px;
    max-width: 100%;
    position: relative;
    left: -14px;
    top: -115px;
}
.application2-img-list:nth-child(6){
	width: 133px;
    height: 133px;
    max-width: 100%;
    position: absolute;
    left: 1px;
    top: 8px;
}
.application2-img-list:nth-child(5){
	width: 133px;
    height: 133px;
    max-width: 100%;
    position: absolute;
    left: 478px;
    top: 156px;
}
.application2-img-list:nth-child(7){
    width: 266px;
    height: 266px;
    max-width: 100%;
    position: relative;
    left: -183px;
    top: 198px;
}
.application2-img-list:nth-child(8){
    width: 266px;
    height: 266px;
    max-width: 100%;
    position: absolute;
    left: 821px;
    top: -6px;
}
.application2-img-list:nth-child(9){
	width: 133px;
    height: 133px;
    max-width: 100%;
    position: absolute;
    left: 574px;
    top: 466px;
}
.application2-img-list:nth-child(10){
	width: 133px;
    height: 133px;
    max-width: 100%;
    position: absolute;
    left: 942px;
    top: 314px;
}
.application2-img-mask i{
	margin-bottom: 5px;
}
.application2-img-block{
	width: 100%;
	height: 100%;
	display: block;
	transform: rotate(45deg);
	background-color: #000;
	overflow: hidden;
}
.application-prev{
	position: absolute;
	font-size: 40px;
	color: #2c4e8b;
	left: -20px;
}

.application-next{
	position: absolute;
	font-size: 40px;
	color: #2c4e8b;
	right: -20px;
}

.application2-img{
	width: 144%;
    height: 144%;
    display: block;
    transform: rotate(-45deg) translateY(-22%);
    overflow: hidden;
}

.application2-img span{
	width: 100%;
	height: 100%;
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}




/*------------------fancybox--------------------*/
.fancybox-block{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	z-index: 99999;
}
.fancybox-block.active{
	display: table;
}
.fancybox-mid{
	display: table-cell;
	vertical-align: middle;
	background-color: rgba(0,0,0,0.8);
}
.fancybox-info-box{
	display: block;
	position: relative;
	z-index: 2;
	text-align: center;
}
.fancybox-info{
	text-align: center;
	display: inline-block;
}
.fancybox-info img{
	max-height: 80vh;
	position: relative;
	z-index: 2;
}
.fancybox-mask{
	width: 100%;
	height: 100vh;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	
}
.fancybox-info-title{
	text-align: left;
	font-size: 16px;
	color: #FFF;
	margin-bottom: 10px;
	position: relative;
	z-index: 1;
}

.fancybox-out{
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #000;
	color: #FFF;
	font-size: 20px;
	text-align: center;
	line-height: 50px;
	transition: all .5s ease;
	z-index: 2;
}
.fancybox-out:hover{
	background-color: #c0a264;
	color: #FFF;
}
.fancybox-prev{
	font-size: 50px;
	color: #FFF;
	transition: all .5s ease;
	position: absolute;
	z-index: 2;
	left: 10px;
	top: calc(50% - 40px);

}

.fancybox-next{
	font-size: 50px;
	color: #FFF;
	transition: all .5s ease;
	position: absolute;
	z-index: 2;
	right: 10px;
	top: calc(50% - 40px);
	
}
.fancybox-prev:hover,
.fancybox-next:hover{
	color: #c0a264;
}
.rwd-application-class-title{
	display: none;
}
.gutter-sizer{
	width: 1%;
}


.application-banner-list{
	border: 1px solid #FFF;
	box-sizing: border-box;
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
}
.application-banner-list.kwicks-selected{
	border: 0;
	border-right: 1px solid #FFF;
}
.application-banner-list.kwicks-selected.kwicks-collapsed{
	border: 1px solid #FFF;
	border-top: 0;
	border-bottom: 0;
}
.application-banner-list.kwicks-expanded{
	border: 0!important;
	border-right: 1px solid #FFF!important;
}
.application-class-move{
 	transition: all 1s ease;
}
.application-class-box.active .application-class-move{
	right: 0;
}
#application-class-s-link{
	position: relative;
	top: -50px;
}