@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700,900|Roboto:400,500,700,900&display=swap');





@charset "utf-8";

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */



/* Document

   ========================================================================== */



/**

 * 1. Correct the line height in all browsers.

 * 2. Prevent adjustments of font size after orientation changes in iOS.

 */



html {

  line-height: 1.15; /* 1 */

  -webkit-text-size-adjust: 100%; /* 2 */

}



/* Sections

   ========================================================================== */



/**

 * Remove the margin in all browsers.

 */



body {

  margin: 0;

}



/**

 * Correct the font size and margin on `h1` elements within `section` and

 * `article` contexts in Chrome, Firefox, and Safari.

 */



h1 {

  font-size: 2em;

  margin: 0.67em 0;

}



/* Grouping content

   ========================================================================== */



/**

 * 1. Add the correct box sizing in Firefox.

 * 2. Show the overflow in Edge and IE.

 */



hr {

  box-sizing: content-box; /* 1 */

  height: 0; /* 1 */

  overflow: visible; /* 2 */

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */



pre {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}



/* Text-level semantics

   ========================================================================== */



/**

 * Remove the gray background on active links in IE 10.

 */



a {

  background-color: transparent;

}



/**

 * 1. Remove the bottom border in Chrome 57-

 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

 */



abbr[title] {

  border-bottom: none; /* 1 */

  text-decoration: underline; /* 2 */

  text-decoration: underline dotted; /* 2 */

}



/**

 * Add the correct font weight in Chrome, Edge, and Safari.

 */



b,

strong {

  font-weight: bolder;

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */



code,

kbd,

samp {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}



/**

 * Add the correct font size in all browsers.

 */



small {

  font-size: 80%;

}



/**

 * Prevent `sub` and `sup` elements from affecting the line height in

 * all browsers.

 */



sub,

sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;

}



sub {

  bottom: -0.25em;

}



sup {

  top: -0.5em;

}



/* Embedded content

   ========================================================================== */



/**

 * Remove the border on images inside links in IE 10.

 */



img {

  border-style: none;

}



/* Forms

   ========================================================================== */



/**

 * 1. Change the font styles in all browsers.

 * 2. Remove the margin in Firefox and Safari.

 */



button,

input,

optgroup,

select,

textarea {

  font-family: inherit; /* 1 */

  font-size: 100%; /* 1 */

  line-height: 1.15; /* 1 */

  margin: 0; /* 2 */

}



/**

 * Show the overflow in IE.

 * 1. Show the overflow in Edge.

 */



button,

input { /* 1 */

  overflow: visible;

}



/**

 * Remove the inheritance of text transform in Edge, Firefox, and IE.

 * 1. Remove the inheritance of text transform in Firefox.

 */



button,

select { /* 1 */

  text-transform: none;

}



/**

 * Correct the inability to style clickable types in iOS and Safari.

 */



button,

[type="button"],

[type="reset"],

[type="submit"] {

  -webkit-appearance: button;

}



/**

 * Remove the inner border and padding in Firefox.

 */



button::-moz-focus-inner,

[type="button"]::-moz-focus-inner,

[type="reset"]::-moz-focus-inner,

[type="submit"]::-moz-focus-inner {

  border-style: none;

  padding: 0;

}



/**

 * Restore the focus styles unset by the previous rule.

 */



button:-moz-focusring,

[type="button"]:-moz-focusring,

[type="reset"]:-moz-focusring,

[type="submit"]:-moz-focusring {

  outline: 1px dotted ButtonText;

}



/**

 * Correct the padding in Firefox.

 */



fieldset {

  padding: 0.35em 0.75em 0.625em;

}



/**

 * 1. Correct the text wrapping in Edge and IE.

 * 2. Correct the color inheritance from `fieldset` elements in IE.

 * 3. Remove the padding so developers are not caught out when they zero out

 *    `fieldset` elements in all browsers.

 */



legend {

  box-sizing: border-box; /* 1 */

  color: inherit; /* 2 */

  display: table; /* 1 */

  max-width: 100%; /* 1 */

  padding: 0; /* 3 */

  white-space: normal; /* 1 */

}



/**

 * Add the correct vertical alignment in Chrome, Firefox, and Opera.

 */



progress {

  vertical-align: baseline;

}



/**

 * Remove the default vertical scrollbar in IE 10+.

 */



textarea {

  overflow: auto;

}



/**

 * 1. Add the correct box sizing in IE 10.

 * 2. Remove the padding in IE 10.

 */



[type="checkbox"],

[type="radio"] {

  box-sizing: border-box; /* 1 */

  padding: 0; /* 2 */

}



/**

 * Correct the cursor style of increment and decrement buttons in Chrome.

 */



[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button {

  height: auto;

}



/**

 * 1. Correct the odd appearance in Chrome and Safari.

 * 2. Correct the outline style in Safari.

 */



[type="search"] {

  -webkit-appearance: textfield; /* 1 */

  outline-offset: -2px; /* 2 */

}



/**

 * Remove the inner padding in Chrome and Safari on macOS.

 */



[type="search"]::-webkit-search-decoration {

  -webkit-appearance: none;

}



/**

 * 1. Correct the inability to style clickable types in iOS and Safari.

 * 2. Change font properties to `inherit` in Safari.

 */



::-webkit-file-upload-button {

  -webkit-appearance: button; /* 1 */

  font: inherit; /* 2 */

}



/* Interactive

   ========================================================================== */



/*

 * Add the correct display in Edge, IE 10+, and Firefox.

 */



details {

  display: block;

}



/*

 * Add the correct display in all browsers.

 */



summary {

  display: list-item;

}



/* Misc

   ========================================================================== */



/**

 * Add the correct display in IE 10+.

 */



template {

  display: none;

}



/**

 * Add the correct display in IE 10.

 */



[hidden] {

  display: none;

}

/*end normalize*/



html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */

html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}

audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}

audio:not([controls]){display:none;height:0}[hidden],template{display:none}

a{

	background-color: transparent;

	-webkit-text-decoration-skip: objects;

}

a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}

dfn{font-style:italic}mark{background:#ff0;color:#000}

small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}

sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}

code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}

button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}

button,input{overflow:visible}button,select{text-transform:none}

button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}

fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}

legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}

[type=checkbox],[type=radio]{padding:0}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}

[type=search]{-webkit-appearance:textfield;outline-offset:-2px}

[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}

::-webkit-input-placeholder{color:inherit;opacity:0.54}

::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}

/* End extract */







html, body{

	font-family: 'Roboto', sans-serif;

	font-family: 'Noto Sans TC', sans-serif;

	font-weight: 300;

	font-size: 17px;

	line-height: 1.7;

	position: relative;

	color: #4A4A4A;

	margin: auto;

	height: 100%;

	}



@media screen and (max-width: 425px) {

	html, body{

	font-weight: 400;

	}

}

html {

	background:url(/Pub/images/site/bg.jpg) repeat center;

	background-size:auto;

}













a {

		text-decoration: none;

}



:root {

  --main-color: #3a35a4;/*blue*/

  --main-colorDarker: #302c87;

  --main-colorLighter:#5852c7;

  --color-yellow:#fbbc00;

  --color-blue:#74A9CF;

  --color-blueDarker:#4D8AB7;

  --color-purple:#7774BC;

}



button, a {

	cursor:pointer;

}

a {

	color:var(--main-color);

	}



input[type=text],

input[type=tel],

input[type=password],

input[type=number],

input[type=email],

select {

	width:100%;

	padding:8px 10px;

	border:solid 1px var(--main-color);

	outline:none;

	margin:2px 0;

	background-color:rgba(255,255,255,0.5);

	border-radius:8px;

}

input[type=text]:focus,

input[type=tel]:focus,

input[type=password]:focus,

input[type=number]:focus,

input[type=email]:focus,

select:focus {

	width:100%;

	background-color:rgba(255,255,255,1);

}





/* The radio */

.radio {

	display: block;

	position: relative;

	padding-left: 30px;

	margin-bottom: 15px;

	cursor: pointer;

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

	padding-right: 20px;

}



.radio input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

}



.radio .checkmark {

	position: absolute;

	top: 4px;

	left: 0;

	height: 20px;

	width: 20px;

	background-color: #eee;

	border-radius: 50%;

}



.radio:hover input ~ .checkmark {

    background-color: #ccc;

}



.radio input:checked ~ .checkmark {

	background-color:var(--main-color);

}



.radio .checkmark:after {

    content: "";

    position: absolute;

    display: none;

}



.radio input:checked ~ .checkmark:after {

    display: block;

}



.radio .checkmark:after {

 	top: 6px;

	left: 6px;

	width: 8px;

	height: 8px;

	border-radius: 50%;

	background: white;

}





/*The checkbox*/

.checkbox {

	display: block;

	position: relative;

	padding-left: 35px;

	margin-bottom: 12px;

	cursor: pointer;

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

	width: 100%;

	font-size:17px;

}





.checkbox input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;

}





.checkbox .checkmark {

  position: absolute;

  top: 0;

  left: 0;

  height: 25px;

  width: 25px;

  background-color: #eee;

}



.checkbox:hover input ~ .checkmark {

  background-color: #ccc;

}



.checkbox input:checked ~ .checkmark {

	background-color: var(--main-color);

}



.checkbox .checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



.checkbox input:checked ~ .checkmark:after {

  display: block;

}



.checkbox .checkmark:after {

  left: 9px;

  top: 5px;

  width: 8px;

  height: 12px;

  border: solid white;

  border-width: 0 3px 3px 0;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}



#bg-img {

            position: fixed;

            top: 50%;

            left: 50%;

            z-index: -99;

        }



header {

	display:block;

	width:100%;

	top:0;

	padding:8px 20px;

	z-index:90;

	position: inherit;

	background-color:var(--main-color);

}



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

	header {

	padding:6px  20px;

}

}



header,

main {

	max-width:600px;

	margin:auto;

}



.gototop{

	width: 50px;

	height: 50px;

	line-height: 50px;

	font-family: verdana;

	text-align: center;

	background: #666666;

	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 20px 0 rgba(0, 0, 0, 0.19);

	color: #fff;

	position: fixed;

	bottom: 100px;

	right: 30px;

	border-radius: 50%;

	text-decoration: none;

	cursor: pointer;

	display: none;

	z-index: 50;

	border: 1px solid #FFFFFF;

	opacity: 0.7;

	filter: alpha(opacity=70); /* For IE8 and earlier */

	font-size: 13px;

}

.gototop i {

	font-size:20px;

	padding-top:13px;

	}





.top {

	display: grid;

	grid-gap: 0px;

	grid-template-columns: 40% 60%;

	color:#fff;

}



.top .logo {

	display:block;

	padding: 0;

	font-size:22px;

}

.top .logo img {

	height:25px ;

	width:auto;

	padding:0;

	display:block;

}



.top-link {

	display:block;

	text-align:right;

	padding: 6px 0;

}

.top-link a {

	color:#fff;

	padding: 0px 5px;

}

.top-link a.lang {

	background-color:rgba(255,255,255,.5);

	border-radius: 50%;

	color:var(--main-color);

	padding: 2px 5px;

	margin: 0 2px;

	font-size: 13px;

}

.top-link a.select {

	background-color:rgba(255,255,255,1);

}





.overlay {

  height: 0%;

  width: 100%;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: rgb(0, 110, 179);

  background-color: rgba(0, 110, 179, 0.9);

  overflow-y: hidden;

  transition: 0.5s;

}



.overlay-content {

  position: relative;

  top: 20%;

  width: 100%;

  text-align: center;

  margin-top: 0px;

}



.overlay a {

	padding: 8px;

	text-decoration: none;

	font-size: 20px;

	color: #fff;

	display: block;

	transition: 0.3s;

	letter-spacing: 5px;

}



.overlay a:hover, .overlay a:focus {

  color: #f1f1f1;

}



.overlay .closebtn {

  position: absolute;

    top: 0px;

    right: 20px;

    font-size: 36px;

}



@media screen and (max-height: 450px) {

  .overlay {overflow-y: auto;}

  .overlay a {font-size: 20px}

  .overlay .closebtn {

  font-size: 40px;

  top: 15px;

  right: 35px;

  }

}





.banner {

	width: 100%;

	height: auto;

	margin: 0;

	padding: 0px;

}



.swiper-container {

        width: 100%;

        height: auto;

      }



      .swiper-slide {

        text-align: center;

        font-size: 18px;

        background: #fff;

        display: -webkit-box;

        display: -ms-flexbox;

        display: -webkit-flex;

        display: flex;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        -webkit-justify-content: center;

        justify-content: center;

        -webkit-box-align: center;

        -ms-flex-align: center;

        -webkit-align-items: center;

        align-items: center;

      }



      .swiper-slide img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

      }



.swiper-button-next,

.swiper-button-prev {

	color:#fff;

	}

.swiper-pagination-bullet-active {

    opacity: 1;

    background: #333;

}



.cards-sort-list {

	display:block;

	padding:10px 10px 100px;

	width:100%;

}

.cards-sort-list a {

	display:block;

	padding:5px;

	color:#333;

}

.cards-sort-block {

	display:flex;

	padding:15px;

	background-color:rgba(255,255,255,0.5);

	border-radius:8px;

	transition:all .3s;

}

.cards-sort-block:hover,

.cards-sort-block:focus {

	background-color:rgba(255,255,255,0.8);

}

.cards-sort-block .img {

	display:block;

	width:80px;

}

.cards-sort-block .img img {

	width:80px;

	border:solid 2px #fff;

	background-color:#fff;

	border-radius:5px;

}

.cards-sort-block .text {

	display:block;

	padding-left:15px;

}

.cards-sort-block .text h2 {

	font-size:18px;

	font-weight:500;

	margin:0;

}

.cards-sort-block .text p {

	font-size:15px;

	font-weight:300;

	margin:10px 0 0;

}

.cards-sort-block .item {

	display: block;

	border-top:solid 1px #bbbbbb;

	margin-top: 15px;

}

.cards-sort-block .item ul {

	list-style: none;

	padding: 0;

	margin: 0;

}

.cards-sort-block .item li {

	display: inline-block;

    padding: 2px 10px;

    background-color: #939ad9;

    border-radius: 5px;

    margin: 5px 2px 0 0;

    color: #ffffff;

}







.cover-img img {

	width:100%;

	height:100%;

	object-fit:cover;

}



.sort-list {

	display:block;

	width:100%;

	padding:0px 40px 80px;

}

.sort-list ul {

	list-style:none;

	margin:0;

	padding:0;

	width:100%;

	display:flex;

	flex-wrap:wrap;

}

.sort-list li {

	display:block;

	width:50%;

	padding:10px 15px 20px;

}

.sort-list li img {

	width:100%;

	border-radius:8px;

}

.text-img img {

	width:100%;

}







.cards {

	display:block;

	width:80%;

	margin:auto;

	padding:0 0 100px;

}

.cards-expound {

	width:85%;

	margin:auto;

}

.cards-vertical,

.cards-horizontal {

	width:100%;

	display:flex;

	flex-wrap:wrap;

	justify-content: center;

	border-radius:8px;

	padding:15px 20px 10px;

	margin-bottom:30px;

	}

.cards-vertical .card-item2 {

	padding:5px 20px 15px;

	width:50%;

	font-size:13px;

}

.cards-vertical .card-item3 {

	padding:5px 5px 15px;

	width:33.3333%;

	font-size:13px;

}

.cards-vertical .card-item3-2 {

	padding:5px 7px 15px;

	width:35%;

	font-size:13px;

}

.cards-horizontal .card-item {

	padding:5px 5px 30px;

	width:50%;

	font-size:13px;

}

.cards-vertical img,

.cards-horizontal img {

	width:100%;

	display:block;

	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.cards-vertical .card-item span,

.cards-horizontal .card-item span {

	display:block;

	width:100%;

	border-radius:3px;

	color:#fff;

	text-align:center;

	padding:5px;

	margin-top:2px;

}





.cards-list {

	display:flex;

	flex-wrap:wrap;

	justify-content:center;

}





/*翻牌*/

.flip-card {

			margin: 10px;

            width: 90px;

			height:137px;

			perspective: 1000px;/*立體透視深度*/

        }

	@media screen and (max-width: 600px) {

		.flip-card {

			margin: 5px;

            width: 70px;

			height:120px;

        }

	}

	@media screen and (max-width: 410px) {

		.flip-card {

            width: 60px;

			height:110px;

        }

	}

	

.flip-card-hor {

			margin: 10px;

            width: 135px;

			height:75px;

			perspective: 1000px;/*立體透視深度*/

        }

	@media screen and (max-width: 600px) {

		.flip-card-hor {

			margin: 5px;

            width: 96px;

			height:65px;

        }

	}

	@media screen and (max-width: 410px) {

		.flip-card-hor {

            width: 86px;

			height:60px;

        }

	}





        .flip-card-inner {

            position: relative;

            width: 100%;

			height: 100%;

            text-align: center;

            transform-style: preserve-3d;	

        }



        .flip-card.interactive .flip-card-inner {

            transition: transform 0.6s;

        }

		.flip-card-hor.interactive .flip-card-inner {

            transition: transform 0.6s;

        }



        .click { cursor: pointer; }



        .flip-card.hover:hover .flip-card-inner,

        .flip-card.click.clicked .flip-card-inner {

            transform: rotateY(180deg);

        }

		flip-card-hor.hover:hover .flip-card-inner,

        .flip-card-hor.click.clicked .flip-card-inner {

            transform: rotateY(180deg);

        }





        .animation .flip-card-inner {

            animation-name: flipCard;

            animation-timing-function: linear;

            animation-iteration-count: infinite;

            animation-duration: 6s;

        }



        @keyframes flipCard {

            20% { transform: rotateY(0deg); }

            25% { transform: rotateY(180deg); }

            75% { transform: rotateY(180deg); }

            80% { transform: rotateY(0deg); }

        }



        .flip-card-front,

        .flip-card-back {

            position: absolute;

            width: 100%;

			height: 100%;

            -webkit-backface-visibility: hidden;

            backface-visibility: hidden;

        }



        .flip-card-front {

			transform: rotateY(0deg);

		}

		.flip-card-front img {

			width:100%;

		}



        .flip-card-back {

            transform: rotateY(180deg);

        }

		.flip-card-back img {

            width:100%;

        }





.btn {

	display:block;

	padding:20px;

	text-align:center;

}

.btn a {

	display:inline-block;

	background-color:var(--main-color);

	color:#fff;

	text-decoration:none;

	padding:8px 80px;

	border-radius:8px;

}

@media screen and (max-width: 319px) {

	.btn a {

	padding:8px 50px;

}

}

.btn a:hover {

	background-color:var(--main-colorDarker);

}





.expound {

	display:block;

	width:100%;

}

.expound img {

	width:100%;

	display:block;

}



.cards-bg {

	display:block;

	width:100%;

	background-size:cover;

	min-height:750px;

}





.form-style {

	background: linear-gradient(to bottom, rgba(255, 255, 255,0.3) 0%, rgba(255, 255, 255,0) 100%);

	min-height: 560px;

}



.mb-block {

	display:grid;

	grid-template-columns: 65px auto 90px;

	gap: 10px;

	padding: 25px 35px;

	color:#fff;

	background: linear-gradient(to bottom, #7774bc 0%, #74a9cf 100%);

	font-size: 18px;

	align-items: center;

    line-height: 32px;

}



@media screen and (max-width: 424px) {

	.mb-block {

		grid-template-columns: 50px auto 90px;

	    padding: 20px;

}

}

.mb-block i {

	font-size: 58px;

}

@media screen and (max-width: 374px) {

	.mb-block i {

	font-size: 48px;

}

}

.mb-block a {

	display: inline-block;

	padding: 0px 15px;

	border:solid 1px #fff;

	border-radius:8px;

	font-size: 15px;

	color:#fff;

	margin: 5px 0;

	width: 100px;

	text-align: center;

}



	.mb-block a {

    font-size: 13px;

    width: auto;

    line-height: 28px;

}



.mb-block a:hover {

	background-color:#fff;

	color:var(--main-color);

}

.mb-block a i {

	font-size: 15px;

	padding-right: 10px;

}

.login {

	display: block;

	max-width: 330px;

	margin: auto;

	padding: 30px 15px 80px;

	color:var(--main-color);

}

.login button,

.login a {

	width: 100%;

	height: 45px;

}

.login a {

	display: block;

	text-align: center;

	padding: 7px;

}

.btn1 {

    border:solid 1px var(--main-color);

	background-color: var(--color-purple);

	color:#fff;

	border-radius:8px;

}

.btn2 {

    border:solid 1px var(--color-blueDarker);

	background-color: var(--color-blue);

	color:#fff;

	border-radius:8px;

}



.main-container {

	display: block;

	width: 100%;

	margin: auto;

	padding: 1px 20px 80px;

	background: linear-gradient(to bottom, rgba(255, 255, 255,0.3) 0%, rgba(255, 255, 255,0) 100%);

}



.topic {

	display: block;

	width: 100%;

}

.topic h2 {

	font-size: 24px;

	font-weight: 400;

	color:var(--main-color);

}

.topic h3 {

	font-size: 20px;

	color: var(--color-blueDarker);

    margin: 10px 0;

}

.use-list {

	width: 100%;

	display: grid;

   grid-template-columns: auto 100px;

	padding: 15px 20px;

	background-color:rgba(255,255,255,0.6);

	border-radius: 8px;

	margin: 8px 0;

	color:#7a7a7a;

	font-size: 15px;

}

.use-list h2 {

	font-size: 18px;

	font-weight: 400;

	margin: 0;

	color:#333;

}



.use-list a {

	display: block;

	padding: 3px;

	background-color: var(--color-blue);

	color:#fff;

	border-radius: 5px;

	width: 100px;

	text-align: center;

	outline: none;

}

.use-list a:hover {

	background-color: var(--color-blueDarker);

}

.use-list span,

.use-list a.ban {

	display: block;

	padding: 3px;

	background-color: #D9D9D9;

	color:#747474;

	border-radius: 5px;

	width: 100px;

	text-align: center;

}



.calendar {

	display: block;

	width: 100%;

	margin: auto;

}

.month {

	display: block;

	background-color: var(--color-blue);

	color:#fff;

	text-align: center;

	line-height: 42px;

}

.month a {

	color:#fff;

	padding: 8px 15px;

	line-height: normal;

}

.month a.prev {

  float: left;

}



.month a.next {

  float: right;

}

.weekdays {

	display: flex;

	flex-wrap: nowrap;

	border-collapse: collapse;

}

.weekdays div {

	background-color: var(--color-blueDarker);

	border:solid 1px #2F6B96;

	color:#fff;

	width: 14.28%;

    margin-top: -1px;

    line-height: 42px;

    text-align: center;

}



.days {

	display: flex;

	flex-wrap: wrap;

	border-collapse: collapse;

}

.days div {

	border: solid 1px #ccc;

    color: #898989;

    width: 14.28%;

    margin-top: -1px;

    line-height: 42px;

    text-align: center;

	background-color: #fff;

}

.days .daybtn {

	background-color: #E5D8F1;

	cursor: pointer;

}

.days .active, .daybtn:hover {

  background-color: #BCD9F3;

}

.record-list {

	display: grid;

	grid-template-columns: auto 50%;

	grid: 10px;

	border-radius: 8px;

	background-color: rgba(255,255,255,0.8);

	width: 100%;

	padding: 10px 15px;

	margin-bottom: 5px;

}



.record-list h2 {

	font-size: 20px;

	font-weight: 400;

	margin: 0;

}

@media screen and (max-width: 374px) {

	.record-list h2 {

	font-size: 18px;

}

}

.record-list i {

	font-size: 24px;

}

@media screen and (max-width: 374px) {

	.record-list i {

	font-size: 20px;

}

}

.record-list a {

	color:var(--color-blue);

	padding: 5px;

	display: inline-block;

}

.record-list a:hover {

	color:var(--color-blueDarker);

}