<style type="text/css">
body { 
    		padding-top: 70px; 
    	}
    	
		.brand {

		}
		
		.navbar-nav > li > a {
			padding-top: 0px;
			padding-bottom: 0px;
			line-height: 50px;
			font-size: 15px;
		}
		
		.navbar-default .navbar-nav>li>a {
			color: #777777;
		}
		
		.navbar-default {
			background-color: #F8F8F8;
		}

		@media (max-width: 767px) {
			.navbar-nav > li > a {
				line-height: 20px;
				padding-top: 10px;
				padding-bottom: 10px;
			}
		}

        .carousel-inner a:hover, .carousel-inner a:focus,.carousel-inner a{
            color:peru;
            text-decoration: none;
            box-shadow: 1px 2px 3px #777777;
        }

		.bgw {
			background-color: rgba(255,255,255,0.8);
		}
		
		p {
			font-size: 14px; 
		}

        [class^='g-']{
            float: left;
            width: 100%;
            box-sizing: border-box;
        }	

        .clear-grid{
            clear: both;
            float: inherit;
        }

		.dropdown-submenu {
			position: relative;
		}

		.dropdown-submenu>.dropdown-menu {
			top: 0;
			left: 100%;
			margin-top: -6px;
			margin-left: -1px;
			-webkit-border-radius: 0 6px 6px 6px;
			-moz-border-radius: 0 6px 6px;
			border-radius: 0 6px 6px 6px;
		}

		.dropdown-submenu:hover>.dropdown-menu {
			display: block;
		}

		.dropdown-submenu>a:after {
			display: block;
			content: " ";
			float: right;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: solid;
			border-width: 5px 0 5px 5px;
			border-left-color: #ccc;
			margin-top: 5px;
			margin-right: -10px;
		}

		.dropdown-submenu:hover>a:after {
			border-left-color: #fff;
		}

		.dropdown-submenu.pull-left {
			float: none;
		}

		.dropdown-submenu.pull-left>.dropdown-menu {
			left: -100%;
			margin-left: 10px;
			-webkit-border-radius: 6px 0 6px 6px;
			-moz-border-radius: 6px 0 6px 6px;
			border-radius: 6px 0 6px 6px;
		}		
		
		div {
			opacity: 0;
			-webkit-transition: opacity 1s ease-in;
			   -moz-transition: opacity 1s ease-in;
				-ms-transition: opacity 1s ease-in;
				 -o-transition: opacity 1s ease-in;
				    transition: opacity 1s ease-in;
		}

        .container-fluid .carousel-inner .content{
            position: absolute;
            bottom: 0;
            top: 140px;
            left: 1px;
            background: rgba(0,0,0,.6);
            color: #f1f1f1;
            width: 100%;
            padding: 10px;
            vertical-align: top;
        }

        /*#hidden-search{
            width: 100%;
            text-align: center;
            background-color: transparent;
            z-index: 1000;
        }*/

        .button-move{
            border-radius: 50%;
            position: relative;
            left: 23px;
            top: 7px;
        }

        /*.circle {
            height: 50px;
            width: 50px;
            background-color: #555;
            border-radius: 50%;
            z-index: 1000;
        }*/

        /* 在你輸入文字時，他會有提示效果幫我們貼上空白，而空白會變黃色，因此這可以讓空白從黃色改成白色*/
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-animation: autofill 0s forwards;
            animation: autofill 0s forwards;
        }

        @keyframes autofill {
            100% {
                background: #fff;
                color: inherit;
            }
        }

        @-webkit-keyframes autofill {
            100% {
                background: #fff;
                color: inherit;
            }
        }
		
		.load { opacity: 1; }</style>
<!--Hidden Search-->
<div class="collapse" id="hidden-search">
	<form action="#" class="form-inline form-inline-add" method="GET">
		<div class="form-group row">
			<input class="form-control" id="search-product" name="search" placeholder="搜尋我們的資料與產品" size="50" type="search" /> <a class="btn btn-lg btn-flat move-btn z-depth-3" href="#" style="border:none; padding: 0">
			<style type="text/css">
.btn-default{background-color: transparent}
                        .btn-default:hover, .btn-default:focus{background-color: transparent}
                        .move-btn{
                            position: relative;
                            left: -30px;
                            top: 7px;
                            width: 1px;
                            height: 32px;
                            border-radius: 0 4px 4px 0;
                            background-color: transparent !important;
                        }

                        /*.move-btn:active{
                            background-color:#ff4a4a !important;
                        }*/

                        .form-inline-add{
                            position: relative;
                            left: -26px;
                            top: 12px;
                            float: right;
                        }			</style>
			<style type="text/css">
.i-search{
                            color: #666;
                            top: 2px;
                            left: -8px;
                            font-size: 16px;
                        }			</style>
			</a>
			<div class="container-fluid bgw" style="margin-left: 10px; margin-right: 10px; ">
				<div class="row">
					<a class="btn btn-lg btn-flat move-btn z-depth-3" href="#" style="border:none; padding: 0"><!-- .content --></a>
					<div class="col-md-12" style="padding-top: 25px; ">
						<a class="btn btn-lg btn-flat move-btn z-depth-3" href="#" style="border:none; padding: 0">&nbsp;</a></div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<hr style="width: 75%; border-color: #cd853F;border-width: 2px" />
					<section>
						<div id="info-left">
							<h3>
								<a class="btn btn-lg btn-flat move-btn z-depth-3" href="#" style="border:none; padding: 0">&nbsp;</a></h3>
						</div>
					</section>
				</div>
			</div>
			<div class="clearfix">
				<a class="btn btn-lg btn-flat move-btn z-depth-3" href="#" style="border:none; padding: 0">&nbsp;</a></div>
			<a class="btn btn-lg btn-flat move-btn z-depth-3" href="#" style="border:none; padding: 0"><!--/div--><!-- /.content --><!-- /.row --><!-- /.container --><!--New container--></a>
			<div class="container-fluid bgw" style="margin-left: 10px; margin-right: 10px;position: relative; top: 5px;">
				<div class="row">
					<div class="col-md-12" style="padding: 10px;">
						<a class="btn btn-lg btn-flat move-btn z-depth-3" href="#" style="border:none; padding: 0">&nbsp;</a></div>
				</div>
			</div>
			<a class="btn btn-lg btn-flat move-btn z-depth-3" href="#" style="border:none; padding: 0"><!-- End Container --></a></div>
	</form>
</div>
