@charset "utf-8";

/*-------------------------------------------------------------------------
	SUNRISE INC.
	Style Sheet for Common Setting(#about)
	Date: 2016-02
	All content (c) RYNAPSE
-------------------------------------------------------------------------*/

/* =page structure
-------------------------------------------------------------------------*/
#bigimage { background-image: url(/images/temp/bg-about.jpg); }
article>h1:before { content: 'ABOUTUS'; }

section {
	width: 100%;
	padding: 6vw 6%;
	text-align: center;
	}

section h1 {
	font-weight: 400;
	font-family: 'Optima Medium',sans-serif;
	font-size: 4.6rem;
	line-height: 1.1;
	text-transform: uppercase;
	}

section h2 {
	display: inline-block;
	font-size: 2rem;
	line-height: 1.6;
	margin: 0 auto;
	padding: 0 0 .25em;
	border-bottom: 4px solid #FFF !important;
	}


/* =.innernav
-------------------------------------------------------------------------*/
.innernav { margin: 0 6% 3em; }

.innernav li {
	display: inline-block;
	font-weight: 400;
	font-family: 'Optima Medium',sans-serif;
	font-size: 1.8rem;
	line-height: 1.6;
	text-transform: uppercase;
	}

.innernav li:after {
	content: '/';
	margin: 0 .5em;
	}

.innernav li:last-child:after { content: ''; }

.innernav li a {
	display: inline-block;
	color: #FFF;
	}


/* =#format0
-------------------------------------------------------------------------*/
#format0 {
	padding: 0 0 50px;
	overflow: hidden;
	}

#format0 header {
	position: relative;
	text-align: center;
	margin: 0 0 40px;
	}

#format0 h1 { text-align: center; }

#format0 p {
	position: relative;
	font-size: 1.4rem;
	line-height: 1.7;
	text-align: center;
	margin: 0;
	}

#format0 header:before,
#format0 p:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 110vw;
	height: 110vw;
	background: rgba(255,255,255,.2);
	border-radius: 50%;
	z-index: -10;
	transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
	}

#format0 header:before { display: none; }


/* =#office,#factory
-------------------------------------------------------------------------*/
#office,#factory {
	position: relative;
	padding: 0 0 1px;
	background: #FFF;
	}

#office figure,
#factory figure {
	position: relative;
	margin: 0 0 40px;
	text-align: left;
	}

#factory figure { text-align: right; }

#office figure h1,
#factory figure h1 {
	position: absolute;
	bottom: -30px;
	color: #000;
	z-index: 10;
	}

#office figure h1 { right: 15px; }
#factory figure h1 { left: 15px; }

#office p,
#factory p {
	text-align: justify;
	margin: 0 15px 15px;
	padding: 15px;
	color: #000;
	border: 1px solid #000 !important;
	}


/* =#corporate-data
-------------------------------------------------------------------------*/
#corporate-data h1 { margin: 0 0 20px; }

.datatable dl {
	display: table;
	width: 100%;
	margin: 0 0 2px;
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 1px solid rgba(255,255,255,.5);
	}

.datatable dt,.datatable dd {
	display: table-cell;
	font-size: 1.2rem;
	text-align: left;
	vertical-align: middle;
	padding: 5px .5em;
	border-right: 1px solid rgba(255,255,255,.5);
	border-bottom: 1px solid rgba(255,255,255,.5);
	}

.datatable dt { width: 5.5em; }
.datatable dd li { font-size: 1em; }

.datatable dd a {
	display: inline-block;
	padding: .25em 10px;
	color: #FFF;
	background: #000;
	}


/* =.bmap
-------------------------------------------------------------------------*/
.bmap {
	position: relative;
	width: 100%;
	overflow: hidden;
	}

iframe {
	width: 100% !important;
	height: 100% !important;
	border: none;
	opacity: .95;
	}

.bmap,#mapCard_container { height: 200px; }
#mapCard_header,#mapCard_information,#mapCard_bigMap,#mapCard_footer,.BMap_stdMpCtrl { display: none; }
p.next { background: rgba(0,0,0,.9); }
p.next a { padding: 0 6%; }


/* =Media Query
-------------------------------------------------------------------------*/
@media only screen and (min-device-width:321px) and (orientation:landscape) {
	#format0 { padding-top: 40px; }
	}
@media only screen and (min-device-width:321px) {
	#format0 p { font-size: 1.5rem; }
	}

@media
only screen and (max-device-width:720px) and (orientation:landscape),
only screen and (min-device-width:721px) {
	#format0 { display: table; width: 100%; padding-top: 50px; }
	#format0 header,#format0 p { display: table-cell; width: 50%; height: 360px; vertical-align: middle; }
	#format0 header:before,#format0 p:before { display: block; }
	#office figure img,#factory figure img { width: 66%; }
	#office figure h1,#factory figure h1 { top: 30px; }
	#office figure h1,#office p { right: 15px; }
	#factory figure h1,#factory p { left: 15px; }
	.datatable dt,.datatable dd { padding: 5px 1em; }
	.datatable dt { width: 8.5em; }
	}

@media only screen and (max-device-width:720px) and (orientation:landscape) {
	#format0 header:before,#format0 p:before { width: 105vh; height: 105vh; }
	#office figure,#factory figure { margin-bottom: 15px; }
	}

@media only screen and (min-device-width:721px) {
	.innernav li { font-size: 2.2rem; }
	#format0 { padding-bottom: 100px; }
	section:not(#format0) h1 { font-size: 8rem; }
	#format0 h1 { font-size: 6rem; }
	#format0 h2 { font-size: 2.6rem; }
	#format0 p { width: auto; font-size: 1.6rem; }
	#format0 header:before,#format0 p:before { width: 460px; height: 460px; }
	.datatable dt,.datatable dd { font-size: 1.6rem; }
	.bmap,#mapCard_container { height: 30vw !important; }
	}

@media only screen and (min-width:1024px) {
	#format0 { width: 1000px; }
	#format0 p { width: auto; left: -100px; }
	#office figure h1,#office p { right: 6%; }
	#office p,#factory p { position: absolute; bottom: 40px; width: calc(27% - 15px); margin: 0; z-index: 10; }
	#factory figure h1,#factory p { left: 6%; }
	}

@media only screen and (min-width:1025px) {
	section:not(#format0) h1 { font-size: 10rem; }
	}

/* IE hack */
@media all and (-ms-high-contrast:none) {
	#format0 header:before,#format0 p:before { top: 0; transform: translate(-50%,0); margin-top: -50px; }
	}


/* EOF
-------------------------------------------------------------------------*/