/*
	Name: Style Sheet for Chinese Web Pages
	Date: Feb 2025
	Version: 2.0
	Autor URI: http://www.tnewfields.info/zh/
  */

* {margin: 0;
    padding: 0;
    box-sizing: border-box;
} 
a {outline:0px; text-align:center; font-weight: 600; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
a img {border:0px; text-decoration: none;}
a:link {text-decoration: none; 
       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	padding: 0px 0px;
	font-weight: 600;
   color: #000;
	text-align:center;
}
a:hover, a:active {color: hotpink;
	text-decoration: none;
	text-shadow: 1px 1px 1px #333;
	text-align:center;
}
a:visited {color: black;
	text-shadow: 1px 1px 1px #fff;
	padding: 0px 0px;
	text-decoration: none;
	text-align:center;
}

.alternativetext {color: #fff;
	font-size: calc(15px +1.3vw);
	font-style: normal;
	font-weight: 600;
	line-height: 30px;
	text-align:center;
	display: inline-block;
	letter-spacing: .9px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
body {background: #FFF;}
body > #wrap {height: auto; min-height: 100%;
	align-items: center;
	align-content: center;
	clear:both!important;
}
.centering {float: left; position: relative; left: 1%; text-align: center;}
.Chinese {font-family: simhei; MingLiU, DFKai-SB, "新細明體", "宋体", "ヒラギノ角ゴ Pro W3", "Arphic OpenType 221", sans-serif;}

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;　
    overflow: hidden;
}
.col {display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
.dialog1 {color:#D9071B;
	font-size: calc(34px +1.3vw);   
	font-family: sans-serif;
	font-weight: 700;
	width: 150px;
	text-align:right;
	vertical-align: text-top;
}
.dialog2 {color: #1F0800;
	font-family: serif;
	font-size: calc(36px +1.4vw);   
	text-align:left;
	font-weight: 600;
	vertical-align: text-top;
}
div.spacer {font-size: 0; 
    height: 10px;
    line-height: 0;
}
div.vertical { writing-mode: tb-rl;
  writing-mode: vertical-rl;      
}

.fade {opacity: 1;
   transition: opacity .25s ease-in-out;
}
.fade:hover {opacity: 0.5;
}
.ghosttext {color:  black;
	text-align:center;
	font-family: "Book Antiqua", "Gills Sans", Arial, simsong, "Hiragino Kaku Gothic Pro", Osaka, Meiryo;
	line-height: 150%;
	font-weight:800;
	text-shadow: 0 0 1px #fff,
                   0 0 2px #FDF48D,
                   1px 1px 3px #000,
                   0 0 4px #BFA371,
                   0 1px 5px #fff,
                   -1px 0 8px #719357,
                   1px 0 12px #fff,
                   0 -1px 14px #3E9175;
}
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group {zoom:1;}

h1 {color: #FFF;
	font-size: calc(36px +3.2vw);   
	font-weight: 600;
	display: block;
	text-align:center;
	transform:scale(1.2,1);
	text-shadow: 2px 2px 2px #333, -2px -2px 3px yellow; 
}
h2 {font-size:calc(16px + 1.75vw);
	text-align:center;
}
h3 {font-size: calc(14px +1.5vw); color: gold; text-align:center; font-weight: 500;}
h4 {font-size: calc(13px +1.25vw); color: gold; text-align:center; font-weight: 500; text-shadow: 1px 1px 1px #000, 2px 2px 3px #123456;}
h5 {font-size: calc(12px +1vw); transform:scale(1.2,1); text-align:center;}
h6 {font-size: calc(9px +0.75vw); text-align:center;}

.hvr-bounce-in {will-change: transform;
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
  will-change: transform;
  transform: scale(1.2);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
.hvr-grow {display: inline-block;
  vertical-align: middle;
   transform: translateZ(0);
  backface-visibility: hidden;
  transition-duration: 0.3s;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  transform: scale(1.33);
}
.hvr-grow-shadow {display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
   transform: scale(1.3);
  opacity: 0.7;
}

.hvr-rotate {display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  transition-duration: 0.3s;
  transition-property: transform;
}
.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
  transform: rotate(4deg);
}

img.bg {box-shadow: 1px 1px 2px white, 0 0 5px #C68879, 0 0 25px #F27324;
}

img.grayscale {filter: none;
	-webkit-filter: grayscale(0%);
}

img.grayscale:hover {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray;
	-webkit-filter: grayscale(100%);
	opacity: .75;
}

.inner-bg {box-shadow: inset 0 0 5px #fff, 0 0 10px #FDF48D, 0 0 15px #fff, 0 0 20px #BFA371, 0 0 25px #fff, 0 0 30px #719357, 0 0 36px #fff, 0 0 56px #3E9175;
}

li {float: left; padding:6px;}
li a {display: block;  
    color: black;
    text-align: center;
    padding: 2px 2px;
    text-decoration: none;
}
li  a:hover:not(.active) {
    background-color: #111;
}

#main {padding-bottom: 150px;}  
.maintext {color:#813014;
	font-size: calc(16px + 1.3vw);
	font-style: normal;
	font-weight: 600;
	text-align:center;
	display: inline-block;
	letter-spacing: 1.2px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.morph {transition: all 0.5s ease;
 }
.morph:hover {border-radius: 50%;
          transform: rotate(360deg);
}
p { margin-top: 0.75vw;
    margin-bottom: 0em;
    line-height: 0.33vw;
    min-height: 7px;
    overflow: hidden;
}
.page-break {page-break-after: always;}
.polaroid {-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.section {clear: both;
	padding: 0px;
	margin: 0px;
}
.single-spaced {display: block; 
            margin-bottom: 1em; }

.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}
table.center {margin-left:auto; margin-right:auto;}
table, caption, tbody, tfoot, thead, tr, th, td {margin: 4px;
  padding: 5px;
  border: 0px;
}
table {border-spacing: 20px;}
td {vertical-align: top;}
.thumbnail:hover {position:relative;
    top:-25px;
    left:-35px;
    width:65%;
    height:auto;
    display:block;
}
tr {vertical-align: top;}

ul {list-style-type: none;
	z-index:999;
    margin-bottom: 3px;
    padding: 3px;
    overflow: hidden;
    background-color: white;
    position: fixed;
    top: 0;
    width: 100%;
}
.zoom-tilt {transition:all 0.3s ease-out;
}
.zoom-tilt:hover {-transform:rotate(15deg) scale(1.3);
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
    .col {
        margin: 1% 0 1% 0%;
    }
    .span_2_of_2, .span_1_of_2 {
        width: 100%;
    }
}