/* Gallery */

	@-moz-keyframes gallery {
		100% {
			opacity: 1;		}
	}

	@-webkit-keyframes gallery {
		100% {
			opacity: 1;		}
	}

	@-ms-keyframes gallery {
		100% {
			opacity: 1;		}
	}

	@keyframes gallery {
		100% {
			opacity: 1;		}
	}

	.gallery {
		padding: 3.5em;
		position: relative;
		overflow: hidden;
		min-height: 37em;
	}

		@media screen and (max-width: 980px) {

			.gallery {
				padding: 2em;
				min-height: 45em;
			}

				.gallery header h2{
					margin-bottom: 1em;
				}

		}

		@media screen and (max-width: 480px) {

			.gallery {
				padding: 1em;
				min-height: 45em;
				
			}

		}

		.gallery header {
			display: -ms-flexbox;
			-ms-flex-pack: justify;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-moz-justify-content: space-between;
			-webkit-justify-content: space-between;
			-ms-justify-content: space-between;
			justify-content: space-between;
			
		}

			.gallery header.special {
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
			}

			@media screen and (max-width: 736px) {

				.gallery header {
					display: block;
				}

			}

			@media screen and (max-width: 480px) {

				.gallery header h2 {
					margin-bottom: .5em;
				}

			}

		.gallery footer {
			text-align: center;
			margin-top: 4em;
		}

		.gallery .show {
			width: 100%;
			display: -ms-flexbox;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-moz-justify-content: -moz-flex-start;
			-webkit-justify-content: -webkit-flex-start;
			-ms-justify-content: -ms-flex-start;
			justify-content: flex-start;
		}

			.gallery .show .media {
				-moz-animation: gallery 0.75s ease-out 0.4s forwards;
				-webkit-animation: gallery 0.75s ease-out 0.4s forwards;
				-ms-animation: gallery 0.75s ease-out 0.4s forwards;
				animation: gallery 0.75s ease-out 0.4s forwards;
				margin-bottom: 0;
				overflow: hidden;
				opacity: 0;
				position: relative;
				width: 25%;
				padding-bottom: 1%;
				padding-right: 1%;
				height: auto;
				
			}

				.gallery .show .media a {
					display: block;
					width: 100% !important;
					height: auto;
					margin-bottom: 0.5em;
					margin-right: 0.5em;
					
				}

				.gallery .show .media img {
					-moz-transition: -moz-transform 0.2s ease-in-out;
					-webkit-transition: -webkit-transform 0.2s ease-in-out;
					-ms-transition: -ms-transform 0.2s ease-in-out;
					transition: transform 0.2s ease-in-out;
					width: 100% !important; 
					max-height: auto !important;
					vertical-align: middle;
					display: block;			
					
				}

				.gallery .show .media:hover img {
					-moz-transform: scale(1.075);
					-webkit-transform: scale(1.075);
					-ms-transform: scale(1.075);
					transform: scale(1.075);
					
				}
			
				@media screen and (max-width: 736px) {

					.gallery .show .media {
						width: 50%;
					}
					.gallery .show .media img {
						width: 100%;
					}

				}

				@media screen and (max-width: 480px) {

					.gallery .show .media {
						width: 50%;
						
					}
					.gallery .show .media img {
						width: 100%;
					}

				}

/* 3 in one screen*/
			.gallery .show3 {
			width: 100%;
			display: -ms-flexbox;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-moz-justify-content: -moz-flex-start;
			-webkit-justify-content: -webkit-flex-start;
			-ms-justify-content: -ms-flex-start;
			justify-content: flex-start;
		}

			.gallery .show3 .media {
				-moz-animation: gallery 0.75s ease-out 0.4s forwards;
				-webkit-animation: gallery 0.75s ease-out 0.4s forwards;
				-ms-animation: gallery 0.75s ease-out 0.4s forwards;
				animation: gallery 0.75s ease-out 0.4s forwards;
				margin-bottom: 0;
				overflow: hidden;
				opacity: 0;
				position: relative;
				width: 33%;
				padding-bottom: 1%;
				padding-right: 1%;
				height: auto;
				
			}

				.gallery .show3 .media a {
					display: block;
					width: 100% !important;
					height: auto;
					margin-bottom: 0.5em;
					margin-right: 0.5em;
					
				}

				.gallery .show3 .media img {
					-moz-transition: -moz-transform 0.2s ease-in-out;
					-webkit-transition: -webkit-transform 0.2s ease-in-out;
					-ms-transition: -ms-transform 0.2s ease-in-out;
					transition: transform 0.2s ease-in-out;
					width: 100% !important; 
					max-height: auto !important;
					vertical-align: middle;
					display: block;			
					
				}

				.gallery .show3 .media:hover img {
					-moz-transform: scale(1.075);
					-webkit-transform: scale(1.075);
					-ms-transform: scale(1.075);
					transform: scale(1.075);
					
				}

			@media screen and (max-width: 736px) {

					.gallery .show3 .media {
						width: 50%;
					}
					.gallery .show3 .media img {
						width: 100%;
					}

				}

				@media screen and (max-width: 480px) {

					.gallery .show3 .media {
						width: 50%;
						
					}
					.gallery .show3 .media img {
						width: 100%;
					}

				}


/*tabs*/
	ul.tabs {
			list-style: none;
			padding-left: 1em;
		}

			ul.tabs li {
				display: inline-block;
			}

				ul.tabs li:first-child {
					padding: 0;
				}

	/*-- drop down--*/

	.tabsmobile {
  		margin: 0 auto;
  		list-style-type: none;
	}
	.tabsmobile ul{
	 	margin: 0;
        padding: 0;
        list-style: none;
	}
 
 	ul.tabsmobile {
        /* border: #ccc 1px solid;*/
        display: inline-block;
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 1em
		
    }

    ul.tabsmobile li {
        position: relative;
        white-space: nowrap;
		/*border-right: #ccc 1px solid;*/
    }

    ul.tabsmobile > li:last-child {
        border-right: none;
    }

    ul.tabsmobile > li {
        float: left; /* 只有第一層是靠左對齊*/
    }

     ul.tabsmobile a {
        color: #b72c2c;
		background-color: whitesmoke;
        display: block;
        padding: 0 15px;
        text-decoration: none;
        line-height: 35px;
    }

	ul.tabsmobile a:hover { /* 滑鼠滑入按鈕變色*/
        background-color: #bcbcbc;
        color: #fff;
    }
    ul.tabsmobile li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
        background-color: #b72c2c;
        color: #fff;
    }
  ul.tabsmobile ul { /*隱藏次選單*/
        display: none;
    }

    ul.tabsmobile li:hover > ul { /* 滑鼠滑入展開次選單*/
        display: block;
    }
	ul.tabsmobile ul { /*隱藏次選單*/
        /*left: 99999px;*/
        opacity: 0;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

    ul.tabsmobile li:hover > ul { /* 滑鼠滑入展開次選單*/
        opacity: 1;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
        left: 0px;
        border-right: 0px;
    }
	ul.tabsmobile ul {
        /*border: #ccc 1px solid;*/
        position: absolute;
        z-index: 99;
        left: 100px;
        top: 100%;
        min-width: 200px;
    }

    ul.tabsmobile ul li {
        border-bottom: #ccc 0px solid;
    }

    ul.tabsmobile ul li:last-child {
        border-bottom: none;
    }

		/*-----*/


		@media screen and (max-width: 736px) {

					ul.tabs li {
						display: block;
						margin: 0 0 .25em 0;
						padding: 0;
					}

						ul.tabs li .button {
							width: 100%;
						}

				}
				ul.tabsmobile {
					display: none;
				}

		@media screen and (min-width: 480px) {
			ul.tabs{
				display: block;
			}
			ul.tabsmobile{
				display: none;
			}
		}
			
		@media screen and (max-width: 736px) {

			ul.tabs {
					display: none;
				}
					ul.tabs li {
						display: none;
						margin: 0 0 .25em 0;
						padding: 0;
					}

						ul.tabs li .button {
							width: 100%;
						}

				ul.tabsmobile {
					display: block;
					margin-bottom: 1em;
				}
			}

		@media screen and (max-width: 480px) {

				ul.tabs {
					display: none;
				}
				.tabsmobile {
					display: block;
					margin-bottom: 1em;
				}

			}