/*宣告變數*********************************/

:root{

	--brown:#E6C08F;
    --brown2:#C4A089;
	--blue:#151848;
    --gray:#dcdcdc;

}

*{ -webkit-tap-highlight-color: transparent }

*{outline:none;}
:focus {outline:none;}


/* CSS Document */
html{height:100%;}
body{
	font-size:15px;line-height:1.3;
	font-family:"Cardo","Noto Serif TC", sans-serif;
	font-weight:400;letter-spacing:.1em;
	height:100%;
	color:var(--blue);
}

/*hr*/
hr{margin:20px auto;border-color:var(--blue)}

.sans{
    font-family: 'Noto Sans TC', sans-serif;
}
.en{
	font-family: 'Cardo', serif;
}

.wrapper{height:100%}



/**隱藏scrollbar

html {
    overflow: -moz-hidden-unscrollable;
    height: 100%;
}


body::-webkit-scrollbar {
    display: none;
}
*/



/*cookieArea********************/

.cookieArea{
    position: fixed;
    width: 100%;
    z-index: 9999;
    left: 0;
    bottom:0;
    background:rgba(5,24,55,.8);
    padding:1em 0;
    color:#fff;
   /* display:none;*/
}

.cookieArea button{
    width: 170px;
    background:#fff;
    color:#333;
    line-height:2.5;
    font-weight:400;
}

.cookieArea p{
    flex: 1;
    font-weight:200;
}




/*****************************Header Start*****************************************/
header{
	position:fixed;
	z-index:9999;
	width: 100%;
	top:0px;
    transition:.5s;
    background-color:transparent;
}

header .logo{
	width: 200px;
	opacity:1;
	transition: all .7s;
    padding:15px 15px
}


header .headerNav{
	text-align:right;
    flex:1;
	opacity: 1;
	transition: all .7s;
    padding:10px 15px;
}

header .headerNav a.btnContact{
	display:inline-block;
}

header .headerNav a.btnContact button{
    background:var(--blue);
    color:#fff;
    width: 70px;
    line-height:34px;
    border-radius:22px;
    opacity:1;
	padding-bottom: 2px;
}

@media (min-width:768px) {
	header .headerNav a.btnContact:hover button{
	    opacity:.8;
	}
}


header .headerNav a{
    padding:0 5px;
    display:inline-block;
    vertical-align:middle;
}

header .headerNav a img{
    height:30px;
}

header .headerNav a:hover img{
    transform:scale(1.1);
}

header img{
    filter: brightness(0) invert();
}

header button{
    background:#fff;
    color:var(--blue);
}

/*active*/
header.active{
   background:rgba(255,255,255,1);
}

header.active img
{
    filter: none;
}

header.active button{
    background:#fff;
    color:var(--blue);
}



header.scroll {
	background-color:transparent;
}


header.scroll .logo,
header.scroll .headerNav a:not(.btnContact)
{
	transform: translateY(-200%);
}

header .btnMenu{}
header .btnMenu hr {width:30px;height:3px;margin:0;border:none;background:var(--blue);margin-bottom:5px;transition:.5s}
header .btnMenu hr:first-child{width:15px}
header a.btnMenu:hover hr{width:30px;}


/*****************************Header End*****************************************/


/*手機尺吋*/
@media (max-width:767px) {

    /*
	header .headerNav{
		position:absolute;
		right:10px;
		padding: 0;
	}
    */

    header .headerNav a {
        padding: 0 1px;
    }

	header .headerNav a.btnContact button{
		line-height:24px;
		border-radius:20px;
		font-size: 13px;
	}

	header .logo {
		width:150px;
	}

	.cookieArea>div{
		flex-direction: column;
	}

	.cookieArea p{
		margin-bottom: 1.5em;
	}
	
	/*
	body *{display:none !important;}
	html{}
	body{background-color:#102544}

	body:before{
		bottom:55%;
		content:url(../images/header/logo.png);
		position: absolute;
		width: 100%;
		left: 0;
		text-align: center;
	}
	body:after{
		content: "此網頁不適用於手機端使用，請確定您正使用的是PC瀏覽器 \A 如要觀測手機版，請使用手機觀賞";
		white-space: pre-line;
		display:block;
		display:flex;
		justify-content:center;
		align-items: center;
		font-size:1.1em;
		text-align:center;
		padding:0 2em;
		color:#fff;
		font-family: 'Noto Sans TC', sans-serif;
		position: absolute;
		width: 100%;
		top:50%;
		line-height:1.8;
		font-weight: 300;
	}
	*/


}