body, html {font-family: 'Noto Sans TC', sans-serif;background:#FFF0E5;}

body, html {margin:0;    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	/*cursor: url('123.png'), auto;*/
	}

a:hover {/*cursor: url('12345.png'), auto;*/ transition: all 0.5s ease-in-out;}

.t1 {font-size:1.2rem;color:red;font-weight:bold;}
.t2 {font-size:1.1rem;}
.hana img {width:100%;border:1px solid #333;}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}
/* * { cursor: none !important; }*/

#cursor{
  height: 30px;
  width: 30px;
  border-radius: 30px;
  position: absolute;
  border:1px solid #333;
  box-shadow: inset 5em 1em gold;
}

.logos {transition: all 1s;}
.logos:hover {filter: hue-rotate(180deg);-webkit-filter: hue-rotate(180deg); }
.card {
        width: 40px;
        height: 40px; 
        position:fixed;
		    left:2px;
		   bottom:10px;
    }

.grand {color:red;}
.master {color:blue;}
.card1 {
        width: 40px;
        height: 40px; 
         position:fixed;
		 right:0px;
		bottom:20px;
    }

.flex-grid {
  display:grid;
  grid-template-columns: 5% 95%;
}



.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  
  grid-gap:5px; margin: 0 auto; grid-auto-rows: 1fr;}


.box {font-size:25px;line-height:33px;border:0px solid #333; border-radius:25px;background:#fff;margin-top:-5px;margin-bottom:5px;margin-left:5px;margin-right:-5px;        box-sizing: border-box;transition: all 0.5s ease-in-out;height:auto;
}

.box:hover {margin-top:-10px;margin-bottom:10px;margin-left:10px;margin-right:-10px;transition: all 0.5s ease-in-out;border:1px solid #333; }

.box-child {border:0px solid #333; border-radius:25px;background:#f2eee4;margin:15px;transition: all 0.5s ease-in-out;height:auto;}

.box-child:hover {background:#ffd700; transition: all 0.5s ease-in-out;}


a.inner_link {color:red;border-bottom: 1px solid red; padding-bottom: 5px; text-decoration:none;}
a.inner_link:hover{color:#333; border:none;}

.item {
        text-align: center;        
        color:#333; 
		transition:1.5s all; 
		text-decoration: none;aspect-ratio:  3 / 2; 
		padding-top:10%; 
		padding-left:8%; padding-right:8%;
		}


.video-container {
  position: relative;
  padding-bottom: 56.25%;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.extention {padding-top:2em;}

.extention a{color:#333;transtion:all 0.5s;text-decoration:underline #f0c993 dotted;text-decoration-thickness:5px; text-underline-offset: 10px;}

.extention a:hover {text-decoration:underline #fe9068 dotted;text-decoration-thickness:5px; text-underline-offset: 10px;}

a.no_underline {text-decoration: none;color:#3473c3;}
a.no_underline:hover {color:#fff;}

H1{margin-bottom:30px;font-size:2em;line-height:1.6em;}
.text-align-left {text-align:left;}
.padding-top {padding-top:15px;}
.black {color:#333;}
.font-weight-700 {font-weight:700}
.font-weight-900 {font-weight:900}
.font-weight-400 {font-weight:400}
.font-weight-600 {font-weight:600}
.font-weight-500 {font-weight:500}

.font-size-4 {font-size:25px;}
.font-size-3 {font-size:1rem;}
.font-size-2 {font-size:1.2rem;}
.font-size-1 {font-size:1rem;}
.font-size-header {font-size:3rem;}
.font-size-subheader {font-size:1.5rem;}

.conent_body {width:55%; margin:0 auto;line-height:33px;letter-spacing:1px;background:#fff;border:1px solid #222;padding:3%;padding-top:0%;margin-top:5%;}

.back {width:120px; border:2px solid #333;padding:30px; 
text-align:center;margin:50px auto;transition: all 0.3s ease-in-out; }

.back:hover {transform: translateX(20px);}

a.backs{color:black;text-decoration:none;}

.arrow {
            background: black;
            width:100px;
            height:2px;
            position: relative; 
        }
.arrow::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-right: 24px solid black;
            top:-4px;
            left:-3px;
        }

.back:hover {background:black;}
.back:hover .arrow {background:white;}
.back:hover .arrow::before {border-right: 24px solid white;}

li {padding-top:15px; padding-top:15px; }

.navbar-brand {}
.navbar-brand img {
	width: 38px;
	-webkit-transition: width 1s; 
	-moz-transition: width 1s; 
	-ms-transition: width 1s; 
	-o-transition: width 1s; 
	transition: width 1s; 
}

.navbar-brand.js-scrolling img {
	width: 35px;
	-webkit-transition: width 1s; 
	-moz-transition: width 1s; 
	-ms-transition: width 1s; 
	-o-transition: width 1s; 
	transition: width 1s; 
}

.tagline{
	width:45px;top:50px;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out; 
	-ms-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out; 
  font-size:1.8em;
}


.tagline.js-scrolling1 {
	top:45px;width:40px;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out; 
	-ms-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out; 
	font-size:1.5em;
}


.rotating {
  -webkit-animation: rotating 12s linear infinite;
  -moz-animation: rotating 12s linear infinite;
  -ms-animation: rotating 12s linear infinite;
  -o-animation: rotating 12s linear infinite;
  animation: rotating 12s linear infinite;
}

table {border:1px solid #333; text-align:center; width:100%; border-collapse:collapse; }

tr {padding:10px;border:1px solid #333; } 

td {padding:10px;border:1px solid #333; width:30%; }

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@media only screen and (min-width:480px) and (max-width: 1023px) {
.wrapper {grid-template-columns:  1fr  1fr ;grid-auto-rows: 1fr; }

}

@media only screen and (max-width: 479px) {
.wrapper {grid-template-columns: 1fr;margin-right:5%;}
.conent_body {width:80%;margin:0 auto;}
.font-size-3 {font-size:1.1rem;}
.font-size-2 {font-size:1.3rem;}
.font-size-1 {font-size:1rem;}
.wrapper {  column-gap: 1px;}
.tagline {font-size:2rem;}
.tagline.js-scrolling1 {font-size:1.5em;}
.font-size-subheader {font-size:1rem;}
H1{font-size:1.6em;}

#headerrrr {display:none;}