/* ==========================================================================
   Public
============================================================================= */
@import url("https://use.fontawesome.com/releases/v6.4.0/css/all.css");

body, html { width:100%; height:100%; }

body { 
	font:1vw/1.6 Verdana, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#222;
	background-color:#344457;
}

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;
}


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


/* top
-------------------------------------------------------------------- */
header {
	position:fixed;
	top:0;
	width:100%;
	height:10vh;
	line-height:10vh;
	background:#333;
	font-weight:800;
	color:#FFF;
	font-size:2.5vw;
	padding-left:5vw;
	z-index:2;
}
header img { height:6vh; margin-right:1vw; }

.time {
	position:fixed;
	top:0;
	right:5vw;
	line-height:10vh;
	color:#389e9d;
	font-size:2vw;
	z-index:3;
}

@media screen and (max-width:1000px) {
	header { height:50px; line-height:50px; font-size:25px; }
	header img { height:30px; margin-right:5px; }
	.time { right:10px; font-size:16px; line-height:50px; letter-spacing:0; }
}



/* list
-------------------------------------------------------------------- */
.list {
	margin:12vh auto;
	width:95%;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:auto;
	padding-bottom:80px;
}


.list div {
	margin:1.5vw;
	text-align:center;
	border-radius:10px;
	background:#ddd;
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.31);
	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.list div h2 { border-radius:10px 10px 0 0; }
.list div h2 a { display:block; width:100%; color:#FFF; text-align:center; padding:0.5vw; font-weight:600; font-size:120%; text-decoration:none; }
.list div h2 a:hover { background:#333; border-radius:10px 10px 0 0; }


.list table { margin:5% auto; width:85%; }
.list th { color:#215488; width:10vw; text-align:left; padding:0.4vw 0; font-weight:600; }
.list td { text-align:right; }
.list tr { border-bottom:#FFF 1px dashed; }
.list tr:nth-last-child(1) { border-bottom:none; }

.list td a { color:#222; text-decoration:none; }

.list tr:hover { background:#333; color:#FFF!important; }
.list tr:hover th { color:#FFF!important; }
.list tr:hover td a { color:#FFF!important; }  



.list div ul { display:inline-block; width:90%; margin:5%; }
.list div li { padding:0.4vw; border-bottom:#FFF 1px dashed; text-align:left; }
.list div li:nth-last-child(1) { border-bottom:none; }
.list div li span { color:#215488; font-weight:600; }


.green { background:#4f8e4d; }
.red { background:#ca3311; }
.orange { background:#cc7200; }
.ash a { background:#ddd; color:#555!important; border-radius:10px 10px 0 0; }
.ash a:hover { color:#FFF!important; }

.red_txt { color:#ca3311!important; font-weight:600; }
.orange_txt { color:#cc7200!important; font-weight:600; }
.green_txt { color:#4f8e4d!important; font-weight:600; }

@media screen and (max-width:1000px) {
	.list { margin:60px auto; grid-template-columns: 1fr; font-size:2vw; }
	.list div h2 { padding:10px; }
	.list th { width:15vw; padding:5px 0; }
	.list div ul { margin:3% 5% 5%; }
	.list div li { padding:5px 10px; }
}
@media screen and (max-width:760px) {
	.list { font-size:3vw; }
	.list th { width:25vw; padding:10px 0; }
	.list div li { padding:10px 15px; }
}
@media screen and (max-width:560px) {
	.list { grid-template-columns: 1fr; font-size:4.5vw; }
	.list div { margin:4% 5%; }
	.list th { width:32vw; }
}

.list .info {
	margin:-2% auto 5%;
	width:85%;
	text-align:left;
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0);
	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0);
	box-shadow: 0 2px 6px rgba(0,0,0,0);
}
.list .info ol { list-style:decimal; padding-left:1.6vw; }
.list .info li { border:none; padding:0; word-break:break-word; }
@media screen and (max-width:1000px) {
	.list .info { margin:-3% auto 5%; width:85%; }
	.list .info ol { padding-left:1.7rem; }
}



/* detal
------------------------------------------------------------------------------ */
.detal { position:relative; margin-top:10vh; }

.detal h3 { width:100%; background:#000; color:#FFF; font-weight:600; padding:1vw 2vw; font-size:130%; }

.search { position:absolute; right:1vw; top:0.8vw; color:#FFF; }
.search input { background:#DDD; border:none; border-radius:3px; padding:0.5vw; color:#333; }
.search a { background:#4f8e4d; padding:0.6vw 0.8vw; color:#FFF; border-radius:3px; margin-left:5px; }
.search a:hover { background:#ca3311; }

@media screen and (min-width:1001px) {
	.detal td { text-align:center; }
}

@media screen and (max-width:1000px) {
	.detal { margin-top:50px; font-size:16px; }
	.detal h3 { text-align:center; padding:10px; }
	.search { position:static; width:100%; top:0; text-align:center; background:#000; padding:5px 0 15px; }
	.search input { padding:10px; }
	.search a { padding:12px; }
}
@media screen and (max-width:640px) {
	.search input { width:38%; }
}



/* page
------------------------------------------------------------------------------ */
.page { width:100%; text-align:center; margin-top:2vw; }
.page a {
	display:inline-block;
	width:4vw;
	color:#FFF;
	font-size:120%;
	padding:0.6vw;
	border:#ccc 1px solid;
	border-right:none;
	background:#333;
}
.page a:hover { background:#ca3311; }
.page select { position:relative; top:-0.05vw; text-align:center; border:#ccc 1px solid; padding:0.96vw; border:none; }
.page p { color:#aaa; padding:0.5vw; }


@media screen and (max-width:1000px) {
	.page { margin-top:0; width:100%; font-size:4vw; padding-bottom:20px; }
	.page a { width:20%; padding:4vw 0; }
	.page select { top:-0.2vw; width:20%; padding:0; height:16.5vw;  }
	.page p { padding:15px; }
}

.btn { width:100%; text-align:center; }
.btn a { display:inline-block; background:#289fb0; color:#FFF; text-decoration:none; padding:1vw 5vw; font-size:120%; font-weight:600; border-radius:5px; }
.btn a:hover { background:#aa518b; }
.btn a i { opacity:0.5; padding-right:5px; }

@media screen and (max-width:1000px) {
	.btn  { padding-bottom:50px; }
	.btn a { width:90%; font-size:25px; padding:15px 0; background:#aa518b; }
}



/* go top
------------------------------------------------------------------------------ */
.bck {
	position:fixed;
	bottom:10px;
	right:0;
	visibility:hidden;
	width:86px;
	height:96px;
	transition-property:all;
	z-index:10;
}

.bck.bck-on {visibility:visible;}
.fade{opacity: 0;}
.bck-on.fade{opacity: 1;}
.rightToLeft {right : -86px;}
.bck-on.rightToLeft{right:0;}
.bottomToTop {bottom: -50px;}
.bck-on.bottomToTop {bottom:1rem;}
.bck-leftToRight {left: -86px;}
.bck-on.leftToRight {left:0;}
.topToBottom {top: -50px;}
.bck-on.topToBottom {top:1rem;}




/* login
------------------------------------------------------------------------------ */
#login {
	width:100vw;
	height:100vh;
	background:url("../img/login.jpg") center center no-repeat fixed;
	background-size:cover;
	color:#FFF;
	
	display:grid;
	place-content:center;
}

#login .login {
	width:50vw;
	max-width:500px;
	
}

#login .login h1 { width:100%; text-align:center; font-size:3vw; font-weight:600; margin-bottom:1.5vw; }
#login .login h1 img { width:4vw; margin-right:1vw; }

#login .login p { font-size:1vw; margin-bottom:1vw; }
#login .login p i { color:#9f4a9e; padding-right:5px; }
#login .login p label { display:block; }
#login .login p input { width:100%; padding:0.6vw 1vw; border:none; border-radius:5px; color:#222; vertical-align:middle; }
#login .login p img { width:8vw; margin-left:10px; }

#login .login_btn { width:100%; text-align:center; border-top:#ccc 1px dashed; margin-top:2vw; padding-top:2vw; }
#login .login_btn a {
	display:inline-block;
	width:50%;
	background:#aa518b;
	color:#FFF;
	font-weight:600;
	font-size:120%;
	font-family:"Arial";
	text-decoration:none;
	border-radius:5px;
	padding:0.6vw 1vw;
}
#login .login_btn a i { opacity:0.5; padding-right:5px; }
#login .login_btn a:hover { background:#f10060; }



@media screen and (max-width:1000px) {
	#login .login { width:80vw; }
	#login .login h1 { font-size:8vw; margin-bottom:20px; }
	#login .login h1 img { width:10vw; }
	#login .login p { font-size:16px; margin-bottom:20px; }
	#login .login p input { padding:15px; }
	#login .login p img { width:auto; max-width:40%; }
	#login .login_btn { margin-top:30px; padding-top:30px; }
	#login .login_btn a { width:100%; font-size:24px; padding:10px; }
}