:root{
	--body : #434343;
	--link : #434343;
}
@media screen and (max-width: 768px){
	body{
		padding-top : calc( 120 * 100vw / 768 );
	}
}
.wrap{
	margin-left : auto;
	margin-right : auto;
}
@media screen and (max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	.wrap{
		padding-left : calc( 10 * 100% / 1300 );
		padding-right : calc( 10 * 100% / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	.wrap{
		max-width : 1300px;
		padding-left : 10px;
		padding-right : 10px;
	}
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
@media screen and (max-width: 768px){
	#header{
		background-color : #fff;
		position : fixed;
		top : 0;
		left : 0;
		width : 100%;
		z-index : 10;
	}
	#header .wrap{
		height : calc( 120 * 100vw / 768 );
	}
	#header h1 , #header h1 a{
		height : 100%;
	}
	#header h1 a{
		display : flex;
		align-items : center;
	}
	#header h1 img{
		height : calc( 74 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#header{
		position : absolute;
		left : 0;
		width : 100%;
		z-index : 10;
	}
	#header .wrap{
		position : relative;
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
	}
	#header h1 a{
		display : block;
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#header .wrap{
		height : calc( 120 * 100vw / 1300 );
		padding-right : calc( 86 * 100% / 1300 );
		padding-left : calc( 112 * 100% / 1300 );
	}
	#header h1 a{
		padding-top : calc( 17 * 100vw / 1300 );
	}
	#header h1 img{
		height : calc( 96 * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#header .wrap{
		height : 120px;
		padding-right : 86px;
		padding-left : 112px;
	}
	#header h1 a{
		padding-top : 17px;
	}
	#header h1 img{
		height : 96px;
	}
}
/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/
@media screen and (max-width: 768px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open [data-aos^=fade]{
		opacity : 1!important;
	}
	@media screen and (max-width: 768px){
		body.is-open #nav{
			max-height : 100vh;
		}
	}
	@media screen and (max-width: 768px){
		body.is-open #drawerPanel{
			position : fixed;
			z-index : -1;
			width : 100%;
		}
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
	}
	@media screen and (max-width: 768px) and (-ms-high-contrast:none){
		body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
			transform : translateY( 10px ) scale(0);
		}
		body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
			transform : translateY( -10px ) scale(0);
		}
	}
	#menuBtn{
		z-index : 11;
		position : absolute;
	}
	#menuBtn span{
		font-size : 0;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
	}
	#menuBtn span span{
		display : block;
		position : absolute;
		left : 0;
		transition : all .4s;
		width : 100%;
	}
	#menuBtn span span:nth-of-type(1){
		top : 0;
	}
	#menuBtn span span:nth-of-type(4){
		bottom : 0;
	}
}
#menuBtn{
	z-index : 11;
	position : absolute;
}
#menuBtn span{
	font-size : 0;
}
#menuBtn > span:nth-of-type(1){
	width : 100%;
	height : 100%;
	position : relative;
	display : block;
}
#menuBtn span span{
	display : block;
	position : absolute;
	left : 0;
	transition : all .4s;
	width : 100%;
}
#menuBtn span span:nth-of-type(1){
	top : 0;
}
#menuBtn span span:nth-of-type(4){
	bottom : 0;
}
@media screen and (max-width: 768px){
	#menuBtn{
		background-color : #fff;
		right : calc( 24 * 100% / 768 );
		top : 50%;
		transform : translateY(-50%);
		width : calc( 64 * 100% / 768 );
		height : calc( 48 * 100vw / 768 );
		z-index : 10;
	}
	#menuBtn span span{
		background-color : #36a5b3;
		height : calc( 7 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 20.5 * 100vw / 768 );
	}
}
/*--------------------------------------------
NAV
---------------------------------------------*/
@media screen and (max-width: 768px){
	#nav{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		top : calc( 120 * 100vw / 768 );
		background-color : rgba(255,255,255,.9);
	}
	#nav .scroll{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
		padding-top : calc( 32 * 100vw / 768 );
		padding-bottom : calc( 32 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#nav .scroll{
		display : flex;
		flex-direction : column-reverse;
		align-items : flex-end;
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#nav{
		padding-top : calc( 28 * 100% / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#nav{
		padding-top : 28px;
	}
}
/*--------------------------------------------
GROBAL NAV
---------------------------------------------*/
#grobalNav{
	display : flex;
}
#grobalNav a{
	color : #33bccc;
	font-weight : 700;
}
@media screen and (max-width: 768px){
	#grobalNav li{
		width : 25%;
	}
	#grobalNav a{
		font-size : calc( 28 * 100vw / 768 );
		padding-top : calc( 24 * 100vw / 768 );
		padding-bottom : calc( 24 * 100vw / 768 );
		width : 100%;
		text-align : center;
		display : block;
	}
}
@media print,screen and (min-width: 769px){
	#grobalNav a{
		padding-left : 1em;
		padding-right : 1em;
	}
	#grobalNav li:last-child a{
		padding-right : 0;
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#grobalNav{
		margin-top : calc( 17 * 100vw / 1300 );
	}
	#grobalNav a{
		font-size : calc( 24 * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#grobalNav{
		margin-top : 17px;
	}
	#grobalNav a{
		font-size : 24px;
	}
}
/*--------------------------------------------
LANG CONTROLLER
---------------------------------------------*/
#lang-controller{
	display : flex;
}
#lang-controller a{
	font-weight : 700;
	color : #434343;
}
@media screen and (max-width: 768px){
	#lang-controller{
		justify-content : space-between;
		margin-top : calc( 36 * 100vw / 768 );
	}
	#lang-controller li{
		width : calc( 228 * 100% / 768 );
		border : solid calc( 2 * 100vw / 768 ) currentColor;
	}
	#lang-controller a{
		font-size : calc( 24 * 100vw / 768 );
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		height : 100%;
		width : 100%;
		height : calc( 64 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#lang-controller a{
		padding-left : 1em;
		padding-right : 1em;
	}
	#lang-controller li:last-child a{
		padding-right : 0;
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#lang-controller a{
		font-size : calc( 14 * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#lang-controller a{
		font-size : 14px;
	}
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#toTop{
	position : fixed;
	width : 0;
	height : 0;
	border-style : solid;
	border-color : transparent transparent #ff545d transparent;
	z-index : 10;
}
#toTop.is-absolute{
	position : absolute;
}
@media screen and (max-width: 768px){
	#toTop{
		right : calc( 12 * 100% / 768 );
		border-width : 0 calc( 30 * 100vw / 768 ) calc( 51 * 100vw / 768 ) calc( 30 * 100vw / 768 );
	}
	#toTop:not(.is-absolute){
		bottom : calc( 31 * 100vw / 768 );
	}
	#toTop.is-absolute{
		top : calc( -82 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#toTop{
		right : calc( 48 * 100% / 1300 );
		border-width : 0 calc( 30 * 100vw / 1300 ) calc( 51 * 100vw / 1300 ) calc( 30 * 100vw / 1300 );
	}
	#toTop:not(.is-absolute){
		bottom : calc( 31 * 100vw / 1300 );
	}
	#toTop.is-absolute{
		top : calc( -82 * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#toTop{
		right : 48px;
		border-width : 0 30px 51px 30px;
	}
	#toTop:not(.is-absolute){
		bottom : 31px;
	}
	#toTop.is-absolute{
		top : -82px;
	}
}
#footer{
	background-color : #36a5b3;
	color : #fff;
	font-weight : 700;
	position : relative;
}
#footer .box{
	display : flex;
	justify-content : space-between;
	align-items : center;
}
#footer a{
	color : #fff;
}
#footer .logo01{
	display : flex;
	align-items : center;
}
#footer .logo01 span span{
	display : block;
	line-height : 1.8;
	text-align : center;
}
#footer .logo02 a{
	display : block;
}
#footer p{
	text-align : center;
}
@media screen and (max-width: 768px){
	#footer .wrap{
		padding-top : calc( 21 * 100vw / 768 );
		padding-bottom : calc( 12 * 100vw / 768 );
	}
	#footer ul li + li{
		margin-top : calc( 36 * 100vw / 768 );
	}
	#footer ul li{
		text-align : center;
	}
	#footer .logo01{
		margin-top : calc( 24 * 100vw / 768 );
		justify-content : center;
	}
	#footer .logo01 img{
		height : calc( 72 * 100vw / 768 );
	}
	#footer .logo01 > span:nth-of-type(2){
		margin-left : calc( 6 * 100vw / 768 );
	}
	#footer .logo01 span span{
		line-height : 1;
	}
	#footer .logo01 span span:nth-of-type(1){
		font-size : calc( 20 * 100vw / 768 );
	}
	#footer .logo01 span span:nth-of-type(2){
		font-size : calc( 20 * 100vw / 768 );
		margin-top : calc( 4 * 100vw / 768 );
	}
	#footer li:nth-child(2) img{
		height : calc( 80 * 100vw / 768 );
	}
	#footer .logo02 img{
		height : calc( 80 * 100vw / 768 );
	}
	#footer .logo02 a:nth-of-type(2){
		font-size : calc( 22 * 100vw / 768 );
		margin-left : calc( 100 * 100vw / 768 );
		margin-top : calc( -16 * 100vw / 768 );
	}
	#footer p{
		text-align : center;
		font-size : calc( 20 * 100vw / 768 );
		padding-top : calc( 48 * 100vw / 768 );
		padding-bottom : calc( 16 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#footer ul{
		display : flex;
		flex-wrap : wrap;
		align-items : center;
		justify-content : space-around;
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#footer .wrap{
		padding-top : calc( 21 * 100vw / 1300 );
		padding-bottom : calc( 12 * 100vw / 1300 );
	}
	#footer .box{
		padding-left : calc( 30 * 100% / 1300 );
		padding-right : calc( 10 * 100% / 1300 );
	}
	#footer .logo01 img{
		height : calc( 90 * 100vw / 1300 );
	}
	#footer .logo01 > span:nth-of-type(2){
		margin-left : calc( 9 * 100vw / 1300 );
	}
	#footer .logo01 span span:nth-of-type(1){
		font-size : calc( 12 * 100vw / 1300 );
	}
	#footer .logo01 span span:nth-of-type(2){
		font-size : calc( 14 * 100vw / 1300 );
	}
	#footer li:nth-child(2) img{
		height : calc( 80 * 100vw / 1300 );
	}
	#footer .logo02 img{
		height : calc( 70 * 100vw / 1300 );
	}
	#footer .logo02 a:nth-of-type(2){
		font-size : calc( 18 * 100vw / 1300 );
		margin-left : calc( 93 * 100vw / 1300 );
	}
	#footer p{
		font-size : calc( 18 * 100vw / 1300 );
		margin-top : 1em;
	}
}
@media print,screen and (min-width: 1300px){
	#footer .wrap{
		padding-top : 21px;
		padding-bottom : 12px;
	}
	#footer .box{
		padding-left : 30px;
		padding-right : 10px;
	}
	#footer .logo01 img{
		height : 90px;
	}
	#footer .logo01 > span:nth-of-type(2){
		margin-left : 9px;
	}
	#footer .logo01 span span:nth-of-type(1){
		font-size : 12px;
	}
	#footer .logo01 span span:nth-of-type(2){
		font-size : 14px;
	}
	#footer li:nth-child(2) img{
		height : 80px;
	}
	#footer .logo02 img{
		height : 70px;
	}
	#footer .logo02 a:nth-of-type(2){
		font-size : 18px;
		margin-left : 93px;
	}
	#footer p{
		font-size : 18px;
		margin-top : 1em;
	}
}
/*# sourceMappingURL=../maps/layout.css.map */