@charset "utf-8";
/* CSS Document */

body,html{padding:0;margin:0;background:#000000}::-webkit-scrollbar{width:0}
ul{
    list-style: none;
    margin: 0
}
.img-responsive{display: block; max-width: 100%;height: auto;}
.pull-right{float:right!important}
.pull-left{float:left!important}
.relative-content{
    position: relative;
}
.content-container{
    max-width: 1000px;
    position: relative;
    margin: 0 auto;
}
.pr{position: relative;}
.pa{position: absolute;}
.wrapper{
	/*max-width: 1920px;*/
    margin: 0 auto;
    width: 100%;
	position: absolute;
}
@font-face {
  font-family: 'roboto_bold';
  src: url("../font/Roboto-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_medium';
  src: url("../font/Roboto-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_light';
  src: url("../font/Roboto-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.f-roboto-light {
  font-family: 'roboto_light';
}
.f-roboto-medium {
  font-family: 'roboto_medium';
}
.f-roboto-bold {
  font-family: 'roboto_bold';
}

.wrapper{overflow:hidden;transform-origin:top left}
.container{display:block;margin:0 auto;width:1140px;max-width:calc(100% - 100px * 2)}
@media (max-width: 575px){.container{max-width:calc(100% - 30px * 2)}}
@media (orientation: portrait){.container{max-width:calc(100% - 30px * 2)}}

.wrapper{width:1920px}
@media (max-width: 575px){.wrapper{width:768px}}
@media (orientation: portrait){.wrapper{width:768px}}

.section{position:relative;display:block;max-width:100%}
.section__background{display:block;width:100%;height:100%;position:absolute;top:0px;left:0px}
.section__background img,.section__background video{width:100%;height:100%;object-fit:cover;object-position:top center}
.section__content{display:block;width:100%;height:100%;position:absolute;top:0px;left:0px}
.section--auto_height .section__content{display:block;position:static}

.section__background .background{width:100%;height:100%}
.section--auto_height .section__inner{padding-top:30px;padding-bottom:200px;position:relative}

.section--frame1{height:1080px;margin-top:0}
@media (orientation: portrait){.section--frame1{height:1390px;margin-top:0px}}
@media (max-width: 575px){.section--frame1{height:1390px;margin-top:0px}}

.section--footer{height:278px;margin-top:0}
@media (orientation: portrait){.section--footer{height:295px;margin-top:0px}}
@media (max-width: 575px){.section--footer{height:295px;margin-top:0px}}

.footer__inner{position:absolute;top:0;width:1080px;left:calc(50% - 1080px / 2)}
@media (max-width: 575px){.footer__inner{top:0;width:720px;left:calc(50% - 720px / 2)}}
@media (orientation: portrait){.footer__inner{top:0;width:720px;left:calc(50% - 720px / 2)}}

.logo{
	width: 100%;
	position: absolute;
	margin:2% 0 0 2%; 
	z-index: 1;
}
.logo .img-responsive{
	width: 18%;
}
@media only screen and (min-width : 992px) {
	.logo{
		margin:0.5% 0 0 25%; 
	}
	.logo .img-responsive{
		width:11%;
	}
}
.header-menu{
    position: absolute;
    width:100%;
    top:0; 
    left:20%;
	z-index: 8;
}
.header-menu .menu{
	float: left;
	width:31%;
    display: inline-block;
    margin:7.5% 0% 0 0;
    transform: translateY(-50%);
    background-size: contain;
}
.header-menu .menu.fanpage:hover{
    background: url('../images/ic-fb.png');
    background-size: contain;
	filter: brightness(1.2)
}
.header-menu .menu.group:hover{
    background: url('../images/ic-group.png');
    background-size: contain;
	filter: brightness(1.2)
}
.header-menu .menu:hover img{
    opacity: 0;
}
@media only screen and (min-width : 768px) {
	.header-menu{
		width: 100%;
		left:20%;
	}
	.header-menu .menu{
		width:100%;
		margin:7% 2% 0 0;
		max-width: 218px;
	}
}
@media only screen and (min-width : 992px) {
	.header-menu{
		left:60%;
	}
	.header-menu .menu{
		margin:2.5% 1% 0 0;
		max-width: 157px;
	}
}
/*----------------------------FOOTER---------------------------------*/
#footer{
    background: #000000;
}
#footer-content{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 20px;;
}
.vtc-logo{
    margin: 0 auto;
    margin-bottom: 20px;
    width: 40%;
}
.vtc-logo img{
    display: block;
    margin: 0 auto;
}
.footer-text{
    padding: 15px;
    color: #c6cad9;
	line-height: 22px;
}
.footer-text a{
    color: #c6cad9;
}
@media only screen and (min-width : 1200px) {
	#footer-content {
        display: flex;
        flex-direction: row;
        text-align: left;
        justify-content: center;
        align-items: center;
        width: 73%;
        margin: 0 auto;
    }
}