*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a { text-decoration: none; outline: none; }
ul{ list-style:none;}
img{ max-width:100%; display:block;}
img[ src*=".svg"] { width: 100%; }
html { width: 100%; height: 100%; scroll-behavior: smooth;}
body { width: 100%; min-height: 100%; color: #000; background: #fff; margin: 0 auto; font-size: 18px; font-weight: 500; line-height: 1.5; position: relative; font-family: "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", sans-serif; }

.container{ width: 100%; position: relative; margin: 0 auto; padding: 0; }


#wrap{ width:100%; height:100%; margin: 0 auto; }


#header{ width:100%; height: 80px; position:fixed; top: 0; left: 0; z-index:999; border-bottom: rgba(255,255,255,0.45) solid 1px; box-shadow: 0 0 5px rgba(23,169,175,0.2); background-color: rgba(255,255,255,1); transition: all ease-out 0.3s; }
#header .container{ width: 95%; max-width: 1100px; height: 100%; display: flex; justify-content:space-between; align-items: center; }
#header .logo{ display: block; position: relative; z-index: 1001;}
#header .logo img{ width: 60px; transition: all ease-out 0.3s;}

main{ width: 100%; margin: 0 auto; padding-top: 80px; position: relative; transition: padding-top ease-out 0.3s; overflow: hidden;}


.sec-header{ background: #000 url("../img/bg_header.jpg") 50% 50% no-repeat; }
.sec-header .container{ width: 90%; max-width: 1100px; height: 180px; display: flex; align-items: center;}
.sec-header .slogan{ width: 75%; max-width: 400px; margin-bottom: 20px; }


.scrolling #header{ height: 50px; transition: height ease-out 0.3s;}
.scrolling #header .logo img{ width: 40px; transition: width ease-out 0.3s;}
.scrolling main{ padding-top: 50px; transition: padding-top ease 0.3s;}


footer { }
footer .copyright{ color: #434343; padding: 15px 0; font-size: 12px; font-family: Arial; text-align: center;}
footer .copyright a{ color: #434343; }



#btn-gotop { display:none; position:fixed; right: 10px; bottom:20px; width:50px; height:50px; z-index:998; background-color: #910c1d; background-image: url(../img/gotop.png); background-position: 50% 50%; background-repeat: no-repeat; background-size:100% auto; border-radius:100%; cursor:pointer; transition: opacity ease-out 0.3s;}
#btn-gotop:hover { background-color: #941a2d; opacity: 0.7; transition: opacity ease-out 0.3s;}




/*	RESPONSIVE:  */
@media only screen and (max-width: 767px) {

body{ font-size: 16px;} 

#header{ height: 50px; border-bottom: #f6f6f6 solid 1px; }
#header .logo img{ width: 40px; }
	
main{ padding-top: 50px; transition: padding-top ease-out 0.3s;}	
    
.sec-header{ background-size: cover; }
.sec-header .container{ height: 120px; }	
		
#btn-gotop { bottom:20px; right: 5px; width:40px; height:40px;}
	
}