@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700');

/*
----------------------------------------------------*/
body {
	font-size:16px;
	color: #ccc;
	background:#fff;
}

/*
reset
*/
html {overflow-y: scroll;}
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
p,blockquote,table,th,td {margin: 0; padding: 0;}

img {
}
ul,dl,ol {text-indent: 0;}
li {list-style: none;}
.ie8 img{
  width: auto;
}


a {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
a img:hover{
	opacity: 0.8;
}

/*layout
----------------------------------------------------*/
#container {
	text-align: center;
	width: 100vw;
	height: 56.25vw;
	max-height: 1080px;
    margin: 0 auto;
   	padding: 0;
	background-image: url("../images/bg.svg");
	background-size: cover;
	background-position: left top;
	position: relative;
	z-index: 0;
}

#main {
	width: 100vw;
	height: 56.25vw;
	max-width: 1920px;
	max-height: 1080px;
    margin: 0 auto;
	position: relative;
	z-index: 1;
}
#title {
	width: 47.92vw;
	height: 33.33vw;
	max-width: 920px;
	max-height: 640px;
	position: absolute;
	top: 11.45vw;
	left: 3.125vw;
}
#title h1 img {
	width: 100%;
}
#photo {
	width: 51.04vw;
	height: 51.04vw;
	max-width: 980px;
	max-height: 980px;
	position: absolute;
	top: 3.125vw;
	right: 3.125vw;
	z-index: 2;
}
#photo img {
	width: 100%;
}
@media screen and (min-width: 1920px) {
#title {
	top: 220px;
	left: 60px;;
}
#photo {
	top: 60px;
	right: 60px;;
}
}