html { font-size:18px; line-height:1.6; color:#f2f0e3; font-weight:300; background:#121212; }
body { font-size:clamp(0.889rem, 0.794rem + 0.536vw, 1.222rem); height:100%; margin: 0 auto; ; 
     font-family:ManropeVar, KaiTi, STKaiti, FangSong, 仿宋, STFangSong, 华文仿宋, sans-serif; }
 /* Font size: 16px to 22px */ /* Viewport: 320vw to 1440vw */
@font-face { font-family:"ManropeVar"; src:url("font/ManropeVar.ttf") format("truetype-variations"); font-weight: 1 999; } /*manrope variable*/
@font-face { font-family:"Fluneta"; src:url("font/Fluneta-R.otf") format("opentype"); } /*Fluneta*/

*, *:before, *:after { box-sizing:border-box; }
html, body, img { margin:0; padding:0; }
span { width:auto; display:inline-block; }
img { width:100%; height:auto; display:block; }

a:link, a:visited, a:active { text-decoration:none; color:red; font-size:clamp(0.722rem, 0.675rem + 0.268vw, 0.889rem); font-weight:400; 
  display:inline-block; margin:1.5px; text-align:center; line-height:1; }
a:focus, a:hover { color:red; }
a:focus img, a:hover img { border:6px solid black; border-radius:10px; }

.hide { display:none; border:5px #400; }
a:focus+.hide, a:hover+.hide, a:active+.hide { display:block; }

h1, h2, h3, h4, h5 { text-align:center; padding:0; }
h1 { font-family:Helvetica Neue, Helvetica, Arial, sans-serif, KaiTi, STKaiti, FangSong, 仿宋, STFangSong, 华文仿宋; }
h1 { margin:0 auto 1rem; text-align:left; color:#f2f0e3; font-size:clamp(2rem, 1.619rem + 2.143vw, 3.333rem); } /* 36px to 60px */
h2 { font-family:Fluneta; margin:0 auto 0.8rem; font-size:clamp(1.333rem, 1.079rem + 1.429vw, 2.222rem); } /* 24px to 40px */
h3 { font-family:Fluneta; margin:0 auto 0.6rem; font-size:clamp(1.111rem, 0.921rem + 1.071vw, 1.777rem); } /* 20px to 32px */
h4 { font-family:Fluneta; margin:0 auto 0.5rem; font-size:clamp(1rem, 0.905rem + 0.536vw, 1.333rem); } /* 18px to 24px */
h5 { font-size:clamp(0.833rem, 0.754rem + 0.446vw, 1.111rem); margin:0 auto 0.4rem; font-weight:300; } /* 15px to 20px */
h6 { font-size:clamp(0.722rem, 0.675rem + 0.268vw, 0.889rem); display:inline; font-weight:300; } /* 13px to 16px */

.vert { writing-mode:vertical-lr; text-orientation:upright; }
.vert h1 { letter-spacing:-0.2em; line-height:1.1;}
.centre { text-align:center; }
.just { text-align:justify; }
.left { text-align:left; }
.right { text-align:right; }
.date { text-align:right; font-size:0.6rem}

.mtop { margin:8vw auto 0.5%; }
.sq { aspect-ratio:1/1 }

.arrow { border:solid red; border-width:0 3px 3px 0; display:inline-block; padding:3px;}
.down { transform:rotate(45deg); }
.up { transform:rotate(225deg); }
.rt { transform:rotate(315deg); }

.wrap { max-width:1440px; margin:0 auto; text-align:center; }
.slot { display:inline-block; width:100%; height:auto; margin:0 auto 0.5%; padding:3% 1%;
   color:#f2f0e3; font-weight:300; background:black; } /*border:0.1px solid #756142; border-radius:10px; */
.slot a { border:3px solid black; background:black; }

.slotpic { display:inline-block; width:25%; vertical-align:top; }
.slotpic a { display:block; border:6px solid black; text-align:left; }
.slotpic2 img{ display:inline-block; background:black; width:clamp(60px, 25vw, 200px); }
.slotpic2 h6{ font-weight:400; } /*transform: translate(-40px, 10px); */

.slottxt { vertical-align:top; display:inline-block; text-align:left; width:98%; }
   /*overflow-wrap:break-word; hyphens:auto;*/
.slottxt h2 { text-align:left; }

.slottxt1 { display:inline-block; width:clamp(80vw, calc(99% - 19 * (100vw - 320px) / (800 - 680)), 99vw);
   text-align:justify; color:#f2f0e3; font-weight:300; margin:3vw 0vw 3vw 0vw; padding:2vw;
   border:1px solid #756142; border-radius:10px; background:#1c1c1c; } 
.slottxt2 { align:right; text-align:justify; font-weight:300; background:#1c1c1c;
   width:clamp(80vw, calc(99% - 19 * (100vw - 320px) / (800 - 680)), 99vw); 
   margin:0 0.5vw 0.5% 0.5vw; padding:3% 3%; border:0.1px solid #756142; border-radius:10px; }
.slotcard { display:inline-block; width:100%; height:auto; margin:0 auto 0.5%; padding:3% 1%;
   border:0.1px solid #756142; border-radius:10px; background:#1c1c1c; } /*transition:width 0.5s ease-in-out;*/
.card { display:inline-block; 
   width:clamp(80vw, calc(99% - 19 * (100vw - 320px) / (800 - 680)), 99vw); 
   height:auto; margin:0 6vw 0.5% 6vw; padding:3% 1%;
   border:0.1px solid #756142; border-radius:10px; background:#1c1c1c; }


.gold {color:#756142;} .silver {color:#C0C0C0;} .blue {color:#0000FF;} .skyblue {color:#87CEFA;} .kellygreen {color:#046A38;}
.emeraldgreen {color:#046307;} .darkgreen {color:#203020;} .darkgreentone {color:#002e1c;} .deepred {color:#C40233;} .carmine {color:#960018;}
.blood {color:#660000;} .burgundy {color:#4d0000;} .ghostwhite {color:#f8f8ff;} .white {color:white;} .chocolate {color:#1d1810;}
.warmbeige {color:#F5E8D8;} .alabaster{#f2f0e3;} .charcoal{color:#121212;} .softblack {color:#1c1c1c;} .darkgrey{color:#444444;} .softgrey{color:#888888;}
.darkcharcoal {color:#333333} .davygrey {color:#555555} .lightishgrey {color:#666666} .frenchmauve{color:#d473d4} 

.cols2 { columns:2 310px; column-gap:2px; }
.cols3 { column-gap:2px; }

.grid  { columns:2; width:100%; font-size:0.8rem; column-gap:2px; margin:0; }
.grid2 { columns:2; width:100%; font-size:0.8rem; column-gap:2px; margin:0; }
.grid3 { columns:3; width:100%; font-size:0.8rem; column-gap:0; margin:0; }
.grid4 { columns:4; width:100%; font-size:0.8rem; column-gap:2px; margin:0; }
.grid5 { columns:5; width:100%; font-size:0.8rem; column-gap:2px; margin:0; }
.grid6 { columns:6; width:100%; font-size:0.8rem; column-gap:2px; margin:0; }

@media only screen and (min-width:620px) {
  .ch40 { padding:3% calc((92vw - 40ch)/2); }
  .ch60 { padding:3% calc((92vw - 60ch)/2); }
  .ch70 { padding:3% clamp(1%, calc((92vw - 70ch)/2), 10%); text-align:justify; }
  .ch76 { padding:3% calc((92vw - 76ch)/2); }
  .pad1 { padding:1%; }
  .grid { columns:4; }
  .cols3 { columns:3; }    }
/*<style>*/