/* ==========================================================================
   Public
============================================================================= */
@import url("https://use.fontawesome.com/releases/v6.7.2/css/all.css");
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css'); /* 思源黑體 */


body { 
	font:1vw/1.6 Verdana, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#333;
	background:#f4eee9 url("../img/bg.jpg") center 88% no-repeat fixed;
	background-size:cover;
	padding-bottom:5vw;
}
@media screen and (max-width:1000px) {
	body {
		font-size:16px;
		background:#f4eee9 url("../img/bg.jpg") center bottom no-repeat fixed;
		background-size:cover;
		padding-bottom:50px;
	}
}

img {
	border:none;
	vertical-align:middle;
	
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
    -moz-backface-visibility:hidden; 	/* Firefox */
    -ms-backface-visibility:hidden; 	/* Internet Explorer */
	
	/*image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    /*-ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}


*, *:after, *:before {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}


a {
	text-decoration:none;
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
a:hover { color:#dd5b6a; }


.clearfix {
    clear: both;
    display: table;
}

.font-block { font-family:"Noto Sans TC", "Meiryo UI", sans-serif; }




header { margin-top:1.5vw; text-align:center; }
header img { width:18%; max-width:720px; }
h1 { color:#BBB; font-family:"Noto Sans TC", "Meiryo UI", sans-serif; font-size:1.5vw; font-weight:600; }
h1 span { color:#333; margin:0 0.5vw; }

h2 { color:#3994a1; font-family:"Noto Sans TC", "Meiryo UI", sans-serif; font-size:120%; font-weight:600; text-align:center; margin-bottom:0.8vw; }
h2 i { padding-right:3px; color:#ffb436; }

@media screen and (max-width:1000px) {
	header { margin-top:3%; }
	header img { width:30%; }
	h1 { font-size:3vw;  }
	h1 span { margin:0 6px; }
	h2 { margin-bottom:10px; }
}
@media screen and (max-width:640px) {
	header { margin-top:5%; }
	header img { width:50%; }
	h1 { font-size:4.5vw;  }
}

label { display:block; }
label i { color:#ffa200; padding-right:3px; font-size:90%; }

input, select {
	width:100%;
	background:#e5e5e5;
	border:none;
	border:#FFF 1px solid;
	border-radius:0.3vw;
	padding:0.8vw 1vw;
	margin:5px 0 1vw;
	/*
	-webkit-box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
	-moz-box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
	box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
	*/
}

@media screen and (max-width:1000px) {
	input, select { padding:15px; border-radius:5px; margin:3px 0 12px; }
}



/* login
-------------------------------------------------------------------------------------------- */
.login {
	margin:1vw auto;
	width:30%;
	background:rgba(255, 255, 255, 0.7);
	border-radius:1vw;
	padding:1vw 2vw;
	-webkit-box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
	-moz-box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
	box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
}
.login img { max-width:35%; }

.login_pass { margin:0 auto; width:30%; }
.login_pass a { width:40%; margin:0 1%; }

@media screen and (max-width:1000px) {
	.login { margin:10px auto 5px; width:60%; border-radius:10px; padding:15px 25px; }	
	.login_pass { width:60%; }
	.login_pass a { width:43%; }
}
@media screen and (max-width:640px) {
	.login { width:85%; }
	.login img { max-width:40%; }
	.login_pass { width:85%; }
}

.regist {
	margin:1vw auto;
	width:60%;
	background:rgba(255, 255, 255, 0.7);
	border-radius:1vw;
	padding:1vw 2vw;
	-webkit-box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
	-moz-box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
	box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
}
.regist img { max-width:35%; }

.regist .w1 { float:left; width:48%; margin-right:2%; }
.regist .w2 { float:left; width:48%; margin-left:2%; }
.regist .w3 { float:left; width:31%; margin:0 1%; }

@media screen and (max-width:1000px) {
	.regist { margin:10px auto 5px; width:85%; border-radius:10px; padding:15px 25px; }
}
@media screen and (max-width:640px) {
	.regist .w1, .regist .w2, .regist .w3 { float:none; width:100%; margin:0; }
}



/* student
-------------------------------------------------------------------------------------------- */
.student {
	width:60%;
	margin:1vw 0;
	margin-left:20%;
}

.student .box {
	float:left;
	width:23%;
	margin:1%;
	background:#FFF;
	border-radius:0.5vw;
	padding:0.3vw 0 0;
	-webkit-box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
	-moz-box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
	box-shadow: 1px 1px 3px 1.5px rgba(0,0,0,0.08);
}
.student .box li { border-bottom:#ccc 1px dashed; padding:0.5vw 1vw; }
.student .box li:nth-last-child(1) { border:none; }
.student .box a {
	display:block;
	width:100%;
	padding:0.5vw;
	text-align:center;
	background:#738810;
	color:#FFF;
	border-radius:0 0 0.5vw 0.5vw;
}
.student .box a:hover { background:#333; }
.student .box a i { padding-right:3px; opacity:0.6; }

@media screen and (max-width:1000px) {
	.student { margin:10px auto 5px; width:85%; border-radius:10px; padding:15px 0; }
	.student .box { width:31%; border-radius:10px; }
	.student .box li { padding:10px 15px; }
	.student .box a { padding:12px 0; border-radius:0 0 10px 10px; }
}
@media screen and (max-width:780px) {
	.student .box { width:46%; margin:2%; }
}
@media screen and (max-width:640px) {
	.student .box { width:100%; margin:0; margin-bottom:20px; }
}




/* list
-------------------------------------------------------------------------------------------- */
.list_day {	width:100%; }
.list_day table { width:100%; font-size:120%; font-family:"Noto Sans TC", "Meiryo UI", sans-serif; font-weight:600; }
.list_day td { text-align:center; vertical-align:middle; }
.list_day td:nth-child(2) { width:80%;}
.list_day td a { font-size:120%; color:#3994a1; }
.list_day td a:hover { color:#d53b0c; }
.list_day select { text-align:center; }

.list_time { width:100%; }
.list_time table { width:100%; }
.list_time tr:nth-child(odd) { background:#EEE; }
.list_time th, .list_time td { text-align:center; border:#ccc 1px solid; padding:0.5vw; } 
.list_time th { background:#3994a1; color:#FFF; }

@media screen and (max-width:640px) {
	.list_time table { font-size:90%; letter-spacing:0; }
	.list_time th, .list_time td { padding:5px 0; }
}



/* home
-------------------------------------------------------------------------------------------- */
.home { margin:0 auto; width:70%; max-width:300px; }
.home a {
	display:block;
	margin:1vw 0;
	background:#333;
	color:#FFF;
	font-size:150%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	text-align:center;
	border-radius:0.5vw;
	padding:1.5vw;
}
.home a:hover { background:#333!important; }
.home a i { opacity:0.6; padding-right:5px; }

@media screen and (max-width:1000px) {
	.home a { border-radius:8px; margin:15px 0; padding:20px 0; }
}




/* btn
-------------------------------------------------------------------------------------------- */
.btn { width:100%; text-align:center; padding:0.5vw 0; }
.btn a {
	display:inline-block;
	padding:0.6vw 1vw;
	color:#FFF;
	border-radius:0.3vw;
	font-size:120%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif; 
	font-weight:600;
	border:#FFF 1px solid;
}
.btn a i { padding-right:0.3vw; opacity:0.6; }

.btn_o { background:#d53b0c; }
.btn_b { background:#3994a1; }
.btn_g { background:#738810; }

.btn_1 a { width:50%; }
.btn_2 a { width:20%; }

.btn a:hover { background:#333; }

@media screen and (max-width:1000px) {
	.btn { padding:10px 0 15px; }
	.btn a { border-radius:5px; padding:10px 0; }	
	.btn a i { padding-right:3px; }
}
@media screen and (max-width:640px) {
	.btn_1 a { width:100%; }
}