/*--------------copyright by alva start-------------------------------*/
/************************************************************************************************************************************************
************************************************************************************************************************************************
************************************************************************************************************************************************/
/*---header---------------------------------------------------------------------------------------------------------------------------*/
header {
}
/*intop*/
.intop {
}
.intop a {
	display: inline-block;
    width: 210px;
    padding: .2em 0;
}
	.intop a:hover {
		opacity:.8;
	}
/***mibutton***/
.mibutton {
	position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    cursor: pointer;
    width: 96px;
    height: 96px;
    text-align: left;
    background: url(../../images/menu_bg.jpg) top left repeat;
    padding:1.5em 1em 1em 1.5em;
	box-shadow: 0px 0px 3px rgba(0,0,0,.3);
	transition: .5s ease all;
}
	.mibutton span {
		display:block;
		border-radius:20px;
		text-align:center;
		font-weight: 700;
		transition: .3s ease all;
		font-size:12px;
		color:#fff;
	}
		.mibutton span:nth-child(2) {
			width: 100%;
			height: 3px;
			transition: .3s ease all;
			background:#fff;
			text-align: left;
			margin-bottom:.3em;
		}
		.mibutton span:nth-child(3) {
			width: 75%;
			height: 3px;
			transition: .3s ease all;
			background:#fff;
			text-align: left;
		}
	.mibutton_ani {
		background: none;
		box-shadow: 0px 0px 3px rgba(0,0,0,0);
		transform: scale(.9);
		transform-origin: top right;
	}
	.mibutton_ani span {
		opacity:1;
		background: #32b7d6 !important;
		transition: .5s ease all;
	}
		.mibutton_ani span:nth-child(1) {
			opacity:0;
		}
		.mibutton_ani span:nth-child(2) {
			-webkit-transform:rotate(45deg);
					transform:rotate(45deg);
			-webkit-transform-origin:center;
					transform-origin:center;
		}
		.mibutton_ani span:nth-child(3) {
			-webkit-transform:rotate(-45deg);
					transform:rotate(-45deg);
			-webkit-transform-origin:center;
					transform-origin:center;
					width: 100%;
					margin-top: -.5em;
		}
	.mibutton:hover span:nth-child(2),.mibutton:hover span:nth-child(3) {
		background:#fff;
	}
/*navbar*/
.navbar {
	position:fixed;
	top:0;
	right:0;
	width:350px;
	text-align:center;
	z-index:30;
	border: 0;
    min-height: auto;
    border-radius: 0;
    margin: 0;
	transform: translateX(350px);
	transition:.6s ease-in-out;
	height: 100vh;
    overflow-y: scroll;
}
.show {
	transform: translateX(0px);
}
/*menu_logo*/
.menu_logo {
	background:url(../../images/menu_pattern_01.png) repeat;
	padding:3em 2em;
}
.menu_logo a {
	display:inline-block;
}
	.menu_logo a:hover {
		opacity:.7;
	}
/*ibutton*/
.ibutton {
	background:url(../../images/menu_pattern_02.png) repeat;
	padding:2em 0;
}
.ibutton a {
	color:#fff;
	transition:.3s ease-in-out;
	padding:.5em 0;
}
.ibutton p.ch {
	font-size:16px;
	letter-spacing:3px;
	transition:.2s ease-in-out;
}
.ibutton p.en {
	font-size:14px;
	line-height:1.5;
}
	.ibutton a:hover {
		background: rgba(0, 0, 0, 0.15);
	}
	.ibutton a:hover p.ch {
		color:#fff;
	}
	@media screen and (max-width:540px) {
		.menu_logo {
			padding: 3em 2em 1em;
		}
		.mibutton {
			height:85px;
			width:85px;
			padding: 1.2em 1em 1em 1em;
		}
		.menu_logo a {
			width: 165px;
		}
	}
	@media screen and (max-width:450px) {
		.navbar {
			width: 100%;
			transform: translateX(100%);
		}
		.show {
			transform: translateX(0px);
		}
	}
	@media screen and (max-width:380px) {
		.navbar {
			width:100%;
			transform: translateX(100%);
		}
		.show {
			transform: translateX(0px);
		}
	}
	@media screen and (max-width:350px) {
		.intop a {
			width: 155px;
		}
		.mibutton {
			height: 75px;
			width: 75px;
			padding: 1em 1em 1em 1em;
		}
	}
/*---service_note-------------------------------------------------------------------------------------------------------------------------------*/
.service_note {
	text-align:center;
    border-radius: 20px;
    width: 1600px;
    margin:0 auto;
    max-width: 90%;
	padding:2em 0 3em;
	position:relative;
	z-index:8;
}
	/*note*/
	.note {
		position:relative;
		z-index:3;
		padding-bottom:1em;
	}
		.note ul {
		}
			.note li {
				position:relative;
				display:inline-block;
				vertical-align:top;
				margin:0 10px;
			}
				.note li a {
					z-index: 30;
				}
			}
			.note li img {
				pointer-events: none;
			}
				img.nt {
					max-width:100%;
					transition:.2s linear;
				}
				img.nt1 {
					position:absolute;
					top:0;
					left:50%;
					transform:translateX(-50%);
					max-width:100%;
					opacity:0;
					transition:.3s linear;
				}
				.note li.active img.nt {
					opacity:0;
				}
				.note li.active img.nt1 {
					opacity:1;
				}
				/*hover*/
				.note li a:hover img.nt {
					opacity:0;
				}
				.note li a:hover img.nt1 {
					opacity:1;
				}
	/*tab-content*/
	.tab-content {
		background:#fff;
		border-radius:10px;
		padding:3em 2em;
		min-height:500px;
	}
	/*note_info*/
	.note_info {
		width:900px;
		margin:0 auto;
		max-width:100%;
	}
	@media screen and (max-width:820px) {
		.service_note {
			padding:1em 0 3em;
		}
		.tab-content {
			min-height:600px;
			padding:2em;
		}
	}
	@media screen and (max-width:600px) {
		.note {
			padding-bottom:1em;
		}
		.note li {
			width:25%;
			margin:0;
		}
		.note li img {
			padding:2%;
		}
		.service_note .title {
			padding:2em 0;
		}
		.note {
			padding-bottom: 0em;
		}
		.tab-content {
			padding:1em;
		}
	}
	@media screen and (max-width:500px) {
		.service_note {
			max-width:100%;
		}
		.note,.tab-content {
			max-width:90%;
			margin:0 auto;
		}
	}
	@media screen and (max-width:430px) {
		.note li {
			width:28%;
		}
	}
	@media screen and (max-width:350px) {
		.service_note .title {
			padding: 1em 0 1em;
		}
		.note li {
			width: 30%;
		}
	}