/*
**
**      c o n t e n t s
*/

.moBr { display:none }

/* visual  */
#visual { width: 100%; height:90vh; height: -webkit-calc( 100vh - 100px ); height: -o-calc( 100vh - 100px ); height: -moz-calc( 100vh - 100px );overflow: hidden; margin: 0;} 
#visual .visual-wrap{ position: relative; height:100%; width:100%; overflow: hidden;}
#visual .title{font-size: 2.2em; line-height: 1.3;}
#visual .text-wrap{margin-left: 7%;}
#visual .container { position: relative; width:100%; height:100%; overflow: hidden; }
#visual .video-wrap{ position: relative; width: 100%; height:0; padding-bottom: 56.25%; overflow: hidden;}
#visual .text { position: absolute; top:0; left:0; display: table; width: 100%; height: 100%; z-index: 2;}
#visual .text .inner{display: table-cell; width: 100%; height:100%; vertical-align: middle; text-align: center; color: #fff; }
#visual .text .inner > *{margin-bottom:30px;font-weight: 200;}
#visual .text .small-logo{width: 106px;}
#visual .text .txt01 { text-align: center; color:#fff }
#visual .text .txt02 { text-align: center; color:#fff; font-size: 60px; font-weight: 700 }
#visual .text .txt03 { text-align: center; color:#fff; font-size: 18px }
#visual #player{position: absolute; top:0; left:0; z-index: 1; width:100%; height:100%; }



/* gallery */
#gallery{position: relative; padding: 6px;}
#gallery .title-wrap{font-size: 14px; font-weight: 200; text-align: center; margin-bottom: 4em;}
#gallery .title-wrap > *{margin-bottom: 25px;}
#gallery .row{width: 100%;}
#gallery .row .col{ float: left; width: 50%; }
#gallery .row .col:after{display: block; content: ''; clear: both; }
#gallery .row .col > div {float: left; height: 23.95vw; overflow: hidden;}
#gallery .first-row .col > div{ height: 23.95vw;}
#gallery .second-row .col > div{ height: 11.8vw;}

#gallery .row .small-col{width: 33%; padding-right: 6px;}
#gallery .row .big-col{width: 67%; padding-right: 6px;}

#gallery [class$="-col"] div {overflow: hidden; max-height: 460px;}
#gallery .first-row{margin-bottom: 6px;}
#gallery .first-row .small-col > div {height: calc( 50% - 3px ) }
#gallery .first-row .small-col > div:first-child{margin-bottom: 6px;}



#gallery .gal-item{display: block; position: relative; }
#gallery .gal-item:after{position: relative; background: transparent;}
#gallery .gal-item:hover:after{position: absolute; top:0; left:0; display: block; width: 100%; height: 100%; content: ''; opacity: .35; background: #0074b6; background-size: cover; transition:all 1s; }
#gallery .gal-item img{ width: 100%; max-width: 140%; transition:all 1s; overflow: hidden; vertical-align: middle;}
#gallery .gal-item:hover img{ position: relative;transform:scale(1.1); }

/* technology */
#technology .row .col .text-wrap{padding: 6%;}

/* company */
#company .grid .title{padding: 0 30px;}

/* exhibitions */
#exhibitions .col{ float: left; width:33.3333%; padding: 0 .8%; height:400px; margin: auto;}
#exhibitions .col > *{margin: 0;}
#exhibitions .btn-wrap{text-align: left; margin: 0;}
#exhibitions .dist{margin: 10px 0;}
.grid{ margin: auto;}
.grid:after{display: block; content: ''; clear: both;}
.grid li{float: left; width: 50%;}
.grid li:nth-child(3){float: right;}
.grid .grid-container{position: relative; padding-bottom: 70%; height: 0; overflow: hidden;}
.grid .grid-outer{ position: absolute; left: 0; right: 0; width: 100%; height: 100%; }
.grid .grid-inner{ display: table; width: 100%; height: 100%; }
.grid .grid-text{ display: table-cell; vertical-align: middle; text-align: center;}
.grid .grid-text img{ position: absolute; width: 100%; height: 100%; top:0; left:0; }
.grid .grid-text .sub-title {display: inline-block; text-align: left;}

/* quick_menu */
#quick_menu .col{ float: left; width:33.333%; padding: 0 6px; text-align: center; margin: auto;}
#quick_menu .col .title{margin: 20px 0;}
#quick_menu .sub-title{margin: 1em 0;}

/* request */
#request{ position: relative; height: 44vw; margin-bottom: 0; background: url(/resources/img/main/banner_request.jpg) 0 50% no-repeat; background-size: cover; color: #fff;}
#request ._table{margin: auto;}
#request .text{ text-align: center; vertical-align: middle; }
#request h1 {color:#fff !important; font-weight: 300; padding-top: 80px; background: url(/resources/img/main/icon-email.png) 50% top no-repeat; background-size: initial;}
#request .btn-border{margin: 2em 0;}


/* 
** 
**    m e d i a q u e r y 
** 
*/ 
@media (max-width:1400px){ 
	#visual {height: 100%;}
	#visual .text{ top: 20%; display: block;}
	#visual .text .inner{display: block; }

	#gallery .row .col{float:none; width: 100%; display: block; margin-bottom: 6px;}
	#gallery .first-row{margin-bottom: 0;}
	#gallery .first-row .col > div{height: 32.95vw;}
	#gallery .second-row .col > div{height: 22.95vw; }
} 

@media (max-width:960px){
	#visual .text .inner > *{margin-bottom: 14px;}
	#visual .title{font-size: 1.5em;}
	#visual .center-logo{width: 100px;}
	#visual .text .small-logo{width: 90px;}

	#gallery .row .col > div{margin: 0;}

    #technology .row{ margin: 0;}
	#technology .row .col .text-wrap{padding: 0; margin: 2em 0;}

	
}


@media (max-width: 767px){ /* iPad */
	#visual .title{font-size: 1.2em;}
	#gallery .title-wrap{margin-bottom: 3em;}
	#gallery .title-wrap > *{margin-bottom: 10px;}

/*
	#gallery .col{float:none; width: 100%; margin: 0;}
	#gallery .col:last-child{display: none;}
	#gallery .gal-item:after{width:12px; height:12px;}
*/
    #company .col{ margin-bottom: 20px;}
    #company .grid .title{ margin-bottom: 0;}
	#company .grid-text .sub-title{font-size: 1em; margin-bottom: 0; padding: 0 1em;}

    #exhibitions .col{ float:none; width:100%;margin-bottom: 6%; height:350px}

    .grid li:nth-child(3){ padding-bottom: 0; float: left; }
    .grid li:first-child, .grid li:last-child{  width:100%;}
 
    #quick_menu{margin-bottom: 40px;}
	#quick_menu .col{padding: 0;}
	#quick_menu .col .sub-title{margin: 10px 0 !important;}
    #quick_menu .title{font-size: 1em;}

    #request {height: 55vw; }
	#request .text{width: 280px; }
    #request h1{ font-size: 1.7em; padding-top: 60px; background-size: 40px;}
    #request .btn-border{margin: 1em 0;}
}

@media (max-width:480px){
	.moBr { display:block }
	#visual .text{ position: absolute; top:0 }
	#visual .text .inner{color: #323232; margin-top: 2em;}
	#visual .text .inner > *{margin-bottom: 10px;}
	#visual .title{font-size: 1.1em;}
	#visual .center-logo{width: 50px;}
	#visual .text .small-logo{ display: none; }
	#visual .text .txt02 { font-size: 26px; font-weight: 700 }
	#visual .text .txt03 { display:none }

    #company .grid .title{ font-size: .9em;}

    #quick_menu .col{width: 100%; float: none; margin-bottom:10px;}
	#quick_menu .col .img{height: 220px; overflow: hidden;}

	#request{height: 75vw; background-position: 40% 50%;}
	#request h1{ font-size: 1.5em; padding-top: 45px; background-size: 30px;}

	#gallery .first-row .col > div{height: 45vw;}
	#gallery .second-row .col > div{height: 22vw; }
}