/*月曆*/

.odd { background-color: yellow; }





/*GOOGLE 搜尋*/

#___gcse_0,.gsc-control-cse{height: 50px;}

.cse .gsc-control-cse, .gsc-control-cse{padding: 0px;}
td .gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus{border-color: #fff;
    background-color: #fff;}

#gsc-iw-id1{margin-top: -30px;border: 0px;}

.search-wrapper .gsc-search-box{display: none;}



.search-wrapper.active .gsc-search-box{display: block;}



.wrap .footer .footer_search .search-wrapper .input-holder .search-icon {

    margin-top: -15px;

}

.wrap .footer .footer_search .search-wrapper.active .input-holder .search-icon {

    margin-top: -38px;

    background: transparent;

}

.gsc-input .gsc-input-box,.gsc-input-box-hover{border: 0px;box-shadow:unset;}

#gs_tti51{padding: 9px 5px;}

#gs_st51{display: none;}

.wrap .footer .footer_search #___gcse_1{margin-top: 15px;}



.search-wrapper {

	position: absolute;

	/*right: 175px;*/

	top: 0;

	background: #fff;

}

.hsearch{position: absolute;
	right: 160px;top: 0;background: #fff;}




.search-wrapper .input-holder {

	overflow: hidden;

	height: 50px;

	background: rgba(255, 255, 255, 0);

	position: relative;

	width: 50px;

	-webkit-transition: all 0.3s ease-in-out;

	-moz-transition: all 0.3s ease-in-out;

	transition: all 0.3s ease-in-out;

}



.search-wrapper.active .input-holder {

	border-radius: 50px;

	width: 380px;

	-webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);

	-moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);

	transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);

}



.search-wrapper .input-holder .search-input {

	width: 100%;

	height: 50px;

	padding: 0px 50px 0 20px;

	opacity: 0;

	position: absolute;

	top: 0px;

	left: 0px;

	/*background: transparent;*/

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	border: none;

	outline: none;

	font-family: "Open Sans", Arial, Verdana;

	font-size: 16px;

	font-weight: 400;

	line-height: 20px;

	color: #000;

	-webkit-transform: translate(0, 60px);

	-moz-transform: translate(0, 60px);

	transform: translate(0, 60px);

	-webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

	-moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

	transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);



	-webkit-transition-delay: 0.3s;

	-moz-transition-delay: 0.3s;

	transition-delay: 0.3s;

}



.search-wrapper.active .input-holder .search-input {

	opacity: 1;

	-webkit-transform: translate(0, 0px);

	-moz-transform: translate(0, 0px);

	transform: translate(0, 0px);

}



.search-wrapper .input-holder .search-icon {

	width: 50px;

	height: 50px;

	border: none;

	background: #FFF;

	padding: 0px;

	outline: none;

	position: relative;

	z-index: 2;

	float: right;

	cursor: pointer;

	-webkit-transition: all 0.3s ease-in-out;

	-moz-transition: all 0.3s ease-in-out;

	transition: all 0.3s ease-in-out;

}



.search-wrapper.active .input-holder .search-icon {

	width: 40px;

	height: 40px;

	margin: 5px;

	border-radius: 30px;

}



.search-wrapper .input-holder .search-icon span {

	background: #fff;

	width: 150%;

	height: 150%;

	display: inline-block;

	vertical-align: middle;

	position: relative;

	/* top: -50px; */

	left: -7px;

	-webkit-transform: rotate(45deg);

	-moz-transform: rotate(45deg);

	transform: rotate(45deg);

	-webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

	-moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

	transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);



}



.search-wrapper.active .input-holder .search-icon span {

	/* top: -65px; */
	top:-45px;

	left: -10px;

	-webkit-transform: rotate(-45deg);

	-moz-transform: rotate(-45deg);

	transform: rotate(-45deg);

}



.search-wrapper.active .input-holder .gsc-control-searchbox-only .gsc-search-button input.gsc-search-button, 

.search-wrapper.active .input-holder .gsc-control-searchbox-only .gsc-search-button	input.gsc-search-button:hover, 

.search-wrapper.active .input-holder .gsc-control-searchbox-only .gsc-search-button	input.gsc-search-button:focus{

	border-color: transparent;

	background-color:transparent;

}

.search-wrapper .input-holder .search-icon span::before,

.search-wrapper .input-holder .search-icon span::after {

	position: absolute;

	content: '';

}



.search-wrapper .input-holder .search-icon span::before {

	width: 4px;

	height: 11px;

	left: 24px;

	top: 38px;

	border-radius: 2px;

	background: #f8080e;

}



.search-wrapper .input-holder .search-icon span::after {

	width: 20px;

	height: 20px;

	left: 15px;

	top: 20px;

	border-radius: 16px;

	border: 4px solid #f8080e;

}



.search-wrapper .close {

	position: absolute;

	z-index: 1;

	top: 15px;

	/*right: 15px;*/

	width: 25px;

	height: 25px;

	cursor: pointer;

	-webkit-transform: rotate(-180deg);

	-moz-transform: rotate(-180deg);

	transform: rotate(-180deg);

	-webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);

	-moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);

	transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);

	-webkit-transition-delay: 0.2s;

	-moz-transition-delay: 0.2s;

	transition-delay: 0.2s;

}



.search-wrapper.active .close {

	/*left: -50px;*/
	right: -30px;

	-webkit-transform: rotate(45deg);

	-moz-transform: rotate(45deg);

	transform: rotate(45deg);

	-webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);

	-moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);

	transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);

	-webkit-transition-delay: 0.5s;

	-moz-transition-delay: 0.5s;

	transition-delay: 0.5s;

}



.search-wrapper .close::before,

.search-wrapper .close::after {

	position: absolute;

	content: '';

	background: #FFF;

	border-radius: 2px;

}



.search-wrapper .close::before {

	width: 5px;

	height: 25px;

	left: 10px;

	top: 0px;

}



.search-wrapper .close::after {

	width: 25px;

	height: 5px;

	left: 0px;

	top: 10px;

}



.search-wrapper .result-container {

	width: 100%;

	position: absolute;

	top: 80px;

	left: 0px;

	text-align: center;

	font-family: "Open Sans", Arial, Verdana;

	font-size: 14px;

	display: none;

	color: #B7B7B7;

}





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

	.search-wrapper.active .input-holder {

		width: 200px;

	}

}

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

	.search-wrapper.active .input-holder {

		width: 160px;

	}

}