@charset "UTF-8";

@media print, screen and (min-width: 737px) {
	
	header {
		width: 100%;
		min-width: 960px;
		height: 64px;
		overflow: hidden;
		position: relative;
		z-index: 1000;
		margin-left: auto;
		margin-right: auto;
		background-color: rgba(0,0,0,0.0);
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		overflow: hidden;
		-webkit-transition: 0.25s ease;
		-moz-transition: 0.25s ease;
		-o-transition: 0.25s ease;
		-ms-transition: 0.25s ease;
		transition: 0.25s ease;
	}
	
	header.fixed {
		background-color: rgba(0,0,0,0.3);
	}
	
	header > section {
		width: 100%;
		min-width: 960px;
		max-width: 1024px;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}
	
	header > section > label.menu,
	header > section > input#menu {
		display: none;
	}
	
	header > section > a {
		width: 160px;
		height: 64px;
		margin-top: 12px;
		float: left;
	}
	
	header > section > a > img {
		width: 160px;
		height: auto;
	}
	
	header > section > nav {
		width: 540px;
		height: 64px;
		float: right;
	}
	
	header > section > nav > ul > li {
		height: 64px;
		line-height: 64px;
		margin-right: 32px;
		float: left;
	}
	
	header > section > nav > ul > li:last-child {
		margin-right: 0;
	}
	
	header > section > nav > ul > li > a {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		display: block;
	}
	
	header > section > nav > ul > li > a:link,
	header > section > nav > ul > li > a:visited,
	header > section > nav > ul > li > a:hover,
	header > section > nav > ul > li > a:active {
		color: rgba(255,255,255,1.0);
	}
	
	header > section > nav > ul > li > a::after {
		width: 0;
		height: 1px;
		content: "";
		background-color: rgba(255,255,255,1.0);
		display: block;
		position: absolute;
		left: 0;
		bottom: 8px;
		-webkit-transition: 0.25s ease;
		-moz-transition: 0.25s ease;
		-o-transition: 0.25s ease;
		-ms-transition: 0.25s ease;
		transition: 0.25s ease;
	}
	
	header > section > nav > ul > li > a:hover::after {
		width: 100%;
	}
	
	header > section > nav > a {
		width: 160px;
		height: 12px;
		display: block;
		position: absolute;
		top: 16px;
		right: 0;
	}
	
	header > section > nav > a > img {
		width: 160px;
		height: auto;
	}
	
	main {
		width: 100%;
		overflow: hidden;
		position: relative;
		z-index: 100;
	}
	
	footer {
		width: 100%;
		min-width: 1024px;
		height: 120px;
		background-color: rgba(50,50,50,1.0);
		overflow: hidden;
		position: relative;
		z-index: 10000;
	}
	
	footer > section {
		width: 100%;
		min-width: 960px;
		max-width: 1024px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	
	footer > section > .column > div:nth-of-type(1) {
		width: 70%;
	}
	
	footer > section > .column > div:nth-of-type(2) {
		width: 30%;
		overflow: hidden;
	}
	
	footer > section > .column > div:nth-of-type(2) > a {
		width: 200px;
		height: auto;
		margin-top: 32px;
		float: right;
	}
	
	footer > section > .column > div:nth-of-type(2) > a > img {
		width: 200px;
		height: auto;
	}
	
	footer nav {
		margin-top: 36px;
	}
	
	footer nav > ul {
		width: 100%;
		overflow: hidden;
	}
	
	footer nav > ul > li {
		margin-right: 16px;
		float: left;
	}
	
	footer nav > ul > li > .link::after {
		background-color: rgba(255,255,255,1.0);
	}
	
	footer nav > ul > li > .link > a {
		font-size: 0.9rem;
		font-weight: 500;
	}
	
	footer nav > ul > li > .link > a:link,
	footer nav > ul > li > .link > a:visited,
	footer nav > ul > li > .link > a:hover,
	footer nav > ul > li > .link > a:active {
		color: rgba(255,255,255,1.0);
	}
	
	footer small {
		width: 100%;
		font-size: 0.9rem;
		color: rgba(255,255,255,1.0);
	}
	
	.nav-float {
		position: fixed;
		top: 40%;
		right: 0;
		z-index: 99999;
	}
	
	.nav-float > ul > li {
		margin-bottom: 1px;
	}
	
	.nav-float > ul > li > span {
		width: 40px;
		height: 40px;
		background-color: rgba(0,0,0,1.0);
		display: block;
		margin-left: auto;
		margin-right: 0;
		overflow: hidden;
		-webkit-transition: 0.5s ease;
		-moz-transition: 0.5s ease;
		-o-transition: 0.5s ease;
		-ms-transition: 0.5s ease;
		transition: 0.5s ease;
	}
	
	.nav-float > ul > li > span:hover {
		width: 200px;
		height: 40px;
		background-color: rgba(0,0,0,1.0);
		display: block;
	}
	
	.nav-float > ul > li > span > a {
		width: 300px;
		height: 100%;
		color: rgba(255,255,255,1.0);
		display: block;
		vertical-align: middle;
	}
	
	.nav-float > ul > li > span > a > img {
		width: 40px;
		height: 40px;
		margin-right: 8px;
		vertical-align: middle;
	}
	
	
	
	main .contact {
		margin-top: 240px;
	}
	
	main .contact > div {
		min-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
	
	main .contact > div > a:nth-of-type(1) {
		width: 800px;
		background-color: rgba(50,50,50,1.0);
		margin-left: auto;
		margin-right: auto;
		padding-top: 20px;
		padding-bottom: 20px;
		display: block;
		position: relative;
	}
	
	main .contact > div > a:nth-of-type(1)::before {
		width: 100%;
		max-width: -webkit-calc(100% - 4px);
		max-width: -moz-calc(100% - 4px);
		max-width: -o-calc(100% - 4px);
		max-width: -ms-calc(100% - 4px);
		max-width: calc(100% - 4px);
		height: 100%;
		max-height: -webkit-calc(100% - 4px);
		max-height: -moz-calc(100% - 4px);
		max-height: -o-calc(100% - 4px);
		max-height: -ms-calc(100% - 4px);
		max-height: calc(100% - 2px);
		background-color: rgba(255,255,255,1.0);
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		display: block;
		z-index: +1;
		-webkit-transition: 0.25s ease;
		-moz-transition: 0.25s ease;
		-o-transition: 0.25s ease;
		-ms-transition: 0.25s ease;
		transition: 0.25s ease;
	}
	
	main .contact > div > a:nth-of-type(1):hover::before {
		width: 0;
		height: 0;
	
	}
	
	main .contact > div > a:nth-of-type(1)::after {
	    width: 5px;
	    height: 5px;
	    margin-top: auto;
	    margin-bottom: auto;
	    border-top: 1px solid rgba(0,0,0,1.0);
	    border-right: 1px solid rgba(0,0,0,1.0);
	    content: "";
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    right: 16px;
	    margin-top: auto;
	    margin-bottom: auto;
	    z-index: +1;
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    transform: rotate(45deg);
	    -webkit-transition: 0.25s ease;
	    -moz-transition: 0.25s ease;
	    -o-transition: 0.25s ease;
	    -ms-transition: 0.25s ease;
	    transition: 0.25s ease;
	}
	
	main .contact > div > a:nth-of-type(1) > h2 {
		font-size: 1.7rem;
		font-weight: 500;
		position: relative;
		z-index: +1;
		-webkit-transition: 0.25s ease;
		-moz-transition: 0.25s ease;
		-o-transition: 0.25s ease;
		-ms-transition: 0.25s ease;
		transition: 0.25s ease;
	}
	
	main .contact > div > a:nth-of-type(1):hover > h2 {
		color: rgba(255,255,255,1.0);
	}
	
	main .contact > div > a:nth-of-type(1) > h2::after {
		content: "";
		width: 200px;
		height: 1px;
		background-color: rgba(50,50,50,1.0);
		margin-top: 16px;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	
	main .contact > div > a:nth-of-type(1):hover > h2::after {
		background-color: rgba(255,255,255,1.0);
		-webkit-transition: 0.25s ease;
		-moz-transition: 0.25s ease;
		-o-transition: 0.25s ease;
		-ms-transition: 0.25s ease;
		transition: 0.25s ease;
	}
	
	main .contact > div > a:nth-of-type(1) > p {
		text-align: center;
		margin-top: 20px;
		position: relative;
		z-index: +1;
	}
	
	main .contact > div > a:nth-of-type(1):hover > p {
		color: rgba(255,255,255,1.0);
	}
	
	main .contact > div > a:nth-of-type(2) {
		width: 64px;
		height: auto;
		margin-top: 40px;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	
	main .contact > div > a:nth-of-type(2) > img {
		width: 64px;
		height: auto;
	}
	
	main .topicpass {
		padding-top: 32px;
		padding-bottom: 32px;
		background-color: rgba(200,200,200,1.0);
	}
	
	main .topicpass > div {
		min-width: 960px;
		max-width: 1024px;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}
	
	main .topicpass > div > ul > li {
		margin-right: 32px;
		float: left;
		position: relative;
	}
	
	main .topicpass > div > ul > li:nth-of-type(1)::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: -16px;
		margin-top: auto;
		margin-bottom: auto;
		vertical-align: middle;
		width: 5px;
		height: 5px;
		border-top: 1px solid rgba(100,100,100,1.0);
		border-right: 1px solid rgba(100,100,100,1.0);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: 0.25s ease;
		-moz-transition: 0.25s ease;
		-o-transition: 0.25s ease;
		-ms-transition: 0.25s ease;
		transition: 0.25s ease;
	}
	
	main .topicpass > div > ul > li:nth-of-type(2)::after {
		content: ":";
		position: absolute;
		top: 0;
		bottom: 0;
		right: -20px;
	}
	
	main .topicpass > div > ul > li:last-child::after {
		display: none;
	}
}

@media only screen and (max-width: 736px) {
	
	header {
		width: 100%;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		margin-left: auto;
		margin-right: auto;
		background-color: rgba(0,0,0,0.5);
		display: block;
	}
	
	header > section {
		width: 100%;
		min-width: 320px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	
	header > section > a {
		width: 136px;
		height: 57px;
		font-size: 1.1rem;
		padding-top: 16px;
		padding-bottom: 16px;
		padding-left: 16px;
		overflow :hidden;
		display: block;
	}
	
	header > section > a > img {
		width: 120px;
		height: auto;
		margin-bottom: 16px;
		display: block;
	}
	
	header > section > nav {
		width: 100%;
		height: 0;
		overflow: hidden;
		-webkit-transition: 0.5s ease;
		-moz-transition: 0.5s ease;
		-o-transition: 0.5s ease;
		-ms-transition: 0.5s ease;
		transition: 0.5s ease;
	}
	
	header > section > label.menu {
		width: 24px;
		height: 24px;
		position: absolute;
		top: 16px;
		right: 16px;
		cursor: pointer;
	}
	
	header > section > label.menu > img {
		width: 24px;
		height: 24px;
	}
	
	header > section > input#menu {
		display: none;
	}
	
	header > section > input#menu:checked ~ nav {
		height: 321px;
		border-bottom: 1px solid rgba(200,200,200,1.0);
	}
	
	header > section > nav > ul:nth-of-type(1) {
		width: 100%;
		border-top: 1px solid rgba(200,200,200,1.0);
	}
	
	header > section > nav > ul:nth-of-type(1) > li {
		height: 64px;
		line-height: 64px;
		border-bottom: 1px solid rgba(200,200,200,1.0);
		text-align: center;
		-webkit-transition: 0.5s ease;
		-moz-transition: 0.5s ease;
		-o-transition: 0.5s ease;
		-ms-transition: 0.5s ease;
		transition: 0.5s ease;
	}
	
	header > section > nav > ul:nth-of-type(1) > li > a {
		width: 100%;
		height: 100%;
        color: rgba(255,255,255,1.0);
		display: block;
	}
	
	header > section > nav > ul:nth-of-type(2) {
		width: 140px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 20px;
		display: block;
		overflow: hidden;
	}
	
	header > section > nav > ul:nth-of-type(2) > li {
		font-size: 1.3rem;
		margin-right: 4px;
		float: left;
	}
	
	header > section > nav > ul:nth-of-type(2) > li:nth-of-type(3) {
		margin-right: 0;
	}
	
	header > section > nav > ul:nth-of-type(2) > li > a {
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
	}
	
	
	header > section > nav > a {
		width: 160px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 8px;
		display: block;
	}
	
	header > section > nav > a > img {
		width: 160px;
		height: auto;
	}
	
	main {
		width: 100%;
		overflow: hidden;
		position: relative;
		z-index: 100;
	}
	
    footer {
        width: 100%;
        background-color: rgba(50,50,50,1.0);
        overflow: hidden;
        position: relative;
        z-index: 10000;
    }
    
    footer > section {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    
    footer > section > .column > div:nth-of-type(1) {
        width: 100%;
    }
    
    footer > section > .column > div:nth-of-type(2) {
        width: 100%;
        overflow: hidden;
    }
    
    footer > section > .column > div:nth-of-type(2) > a {
        width: 160px;
        height: auto;
        margin-bottom: 16px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    
    footer > section > .column > div:nth-of-type(2) > a > img {
        width: 160px;
        height: auto;
        
    }
    
    footer nav {
        margin-top: 16px;
        margin-bottom: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    footer nav > ul {
        width: 100%;
        overflow: hidden;
    }
    
    footer nav > ul > li {
        margin-right: 16px;
        float: left;
    }
    
    footer nav > ul > li > .link::after {
        background-color: rgba(255,255,255,1.0);
    }
    
    footer nav > ul > li > .link > a {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    footer nav > ul > li > .link > a:link,
    footer nav > ul > li > .link > a:visited,
    footer nav > ul > li > .link > a:hover,
    footer nav > ul > li > .link > a:active {
        color: rgba(255,255,255,1.0);
    }
    
    footer small {
        width: 100%;
        font-size: 0.9rem;
        color: rgba(255,255,255,1.0);
        text-align: center;
        display: block;
    }
	
	.nav-float {
		width: 100%;
		background-color: rgba(0,0,0,1.0);
		position: fixed;
		bottom: 0;
		left: 0;
		display: table;
		table-layout: fixed;
		z-index: 99999;
	}
	
	.nav-float > ul > li {
		display: table-cell;
	}
	
	.nav-float > ul > li > span {
		width: 40px;
		height: 40px;
		background-color: rgba(0,0,0,1.0);
		display: block;
		margin-left: auto;
		margin-right: 0;
		overflow: hidden;
	}
	
	.nav-float > ul > li > span > a > img {
		width: 40px;
		height: 40px;
		margin-right: 8px;
		vertical-align: middle;
	}
    
    
    
    main .contact {
        width: 100%;
        margin-top: 160px;
        padding-left: 32px;
        padding-right: 32px;
    }
    
    main .contact > div {
        min-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    main .contact > div > a:nth-of-type(1) {
        width: 100%;
        background-color: rgba(50,50,50,1.0);
        margin-left: auto;
        margin-right: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        display: block;
        position: relative;
    }
    
    main .contact > div > a:nth-of-type(1)::before {
        width: 100%;
        max-width: -webkit-calc(100% - 4px);
        max-width: -moz-calc(100% - 4px);
        max-width: -o-calc(100% - 4px);
        max-width: -ms-calc(100% - 4px);
        max-width: calc(100% - 4px);
        height: 100%;
        max-height: -webkit-calc(100% - 4px);
        max-height: -moz-calc(100% - 4px);
        max-height: -o-calc(100% - 4px);
        max-height: -ms-calc(100% - 4px);
        max-height: calc(100% - 2px);
        background-color: rgba(255,255,255,1.0);
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: block;
        z-index: +1;
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        -ms-transition: 0.25s ease;
        transition: 0.25s ease;
    }
    
    main .contact > div > a:nth-of-type(1)::after {
        width: 5px;
        height: 5px;
        margin-top: auto;
        margin-bottom: auto;
        border-top: 1px solid rgba(0,0,0,1.0);
        border-right: 1px solid rgba(0,0,0,1.0);
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 16px;
        margin-top: auto;
        margin-bottom: auto;
        z-index: +1;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        -ms-transition: 0.25s ease;
        transition: 0.25s ease;
    }
    
    main .contact > div > a:nth-of-type(1) > h2 {
        font-size: 1.7rem;
        font-weight: 500;
        position: relative;
        z-index: +1;
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        -ms-transition: 0.25s ease;
        transition: 0.25s ease;
    }
    
    main .contact > div > a:nth-of-type(1):hover > h2 {
        color: rgba(255,255,255,1.0);
    }
    
    main .contact > div > a:nth-of-type(1) > h2::after {
        content: "";
        width: 200px;
        height: 1px;
        background-color: rgba(50,50,50,1.0);
        margin-top: 16px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    
    main .contact > div > a:nth-of-type(1) > p {
        text-align: center;
        margin-top: 20px;
        padding-left: 16px;
        padding-right: 16px;
        position: relative;
        z-index: +1;
    }
    
    main .contact > div > a:nth-of-type(2) {
        width: 64px;
        height: auto;
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    
    main .contact > div > a:nth-of-type(2) > img {
        width: 64px;
        height: auto;
    }
    
    main .topicpass {
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: 16px;
        padding-right: 16px;
        background-color: rgba(200,200,200,1.0);
    }
    
    main .topicpass > div {
        min-width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }
    
    main .topicpass > div > ul > li {
        margin-right: 32px;
        float: left;
        position: relative;
    }
    
    main .topicpass > div > ul > li:nth-of-type(1)::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: -16px;
        margin-top: auto;
        margin-bottom: auto;
        vertical-align: middle;
        width: 5px;
        height: 5px;
        border-top: 1px solid rgba(100,100,100,1.0);
        border-right: 1px solid rgba(100,100,100,1.0);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        -ms-transition: 0.25s ease;
        transition: 0.25s ease;
    }
    
    main .topicpass > div > ul > li:nth-of-type(2)::after {
        content: ":";
        position: absolute;
        top: 0;
        bottom: 0;
        right: -20px;
    }
    
    main .topicpass > div > ul > li:last-child::after {
        display: none;
    }
}