body{margin:0; display:flex; height:100%; width: 100%; font-family: sans-serif, Verdana; color: #2f2f2f; justify-content: center; align-items: center;}

::-webkit-input-placeholder {color: #BAD;}
::-moz-placeholder {color: #BAD;}
:-ms-input-placeholder {color: #BAD;}
:-moz-placeholder {color: #BAD;}

* {box-sizing: border-box;}
a {text-decoration:none;}
input[type=text], select, textarea {width:100%; font-size:15px; text-decoration:none; padding:8px; background: none; border-style: none;}
mark {background-color: #DBBCCA; color: #FFFFF9; border; 0px solid purple;} 
span.highlight {background-color: yellow;}

#wrapper {display:block; top:0; padding:0; width:100%; max-width: 1280px; height:100%;}
#overlay {position:fixed; display:none; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.7); z-index:5; cursor:default;} 
#eBOXwrapper {float:none; width:100%; height: 82vh; overflow: hidden; background: #FFFFF9;}
#header{min-height:90px;}
#page{width:100%; height:100%;}
#blogDesk{display:block; width:100%;}
#blogMobile{display:none;}
#footer{width:100%; background:black; color:#FFFFFF;  font-size:12px; text-align:center; padding:6px;}
#footer a{color:#FFFF80;}

.blogTitle{font-size:20px; text-align:center; text-decoration:underline; color:#ccc; font-weight:800;}
.blogH1{font-size:24px; text-align:center; text-decoration:none; font-weight:800; color:#B55386; font-family: 'Kalam', cursive; font-size: 20px; line-height: 1.8;}
.blogDate{margin-top:10px; font-size:14px; text-align:center; text-decoration:none; color:#666;}
.blogProduct{margin: auto; border: solid 1px #B55386; border-radius:13px; background:white; width:98%; padding:5px; overflow: auto;}
.blogRecomend{width:100%; background:#B55386; color:white; font-size:17px; padding:8px 12px; border-radius:10px 10px 0px 0px;}

.buttonINFO {width:100%; height:34px; padding-top: 0px; cursor:pointer; margin-bottom: 1px; background : #FFFFF9;}
.buttonINFO .txt {padding-top: 6px; padding-left: 12px; text-decoration: none; text-align:left; font-weight: bold; font-size: 20px; color: #700063;}

.card {scroll-snap-align:start; width:100%; height:510px; margin-top:0px; border-top:2px solid #ccc; border-bottom:2px solid #ccc; padding:6px 12px;overflow-y:hidden;}
.cardTitle{float:left; font-size:20px; text-decoration:underline; color:#ccc; font-weight:800; padding:4px 12px; width:75%;}
.cardDate{float:right; font-size:15px; text-align:right; text-decoration:none; color:#666; padding:15px 4px 0 0; width:22%;}
.cardTitleM{float:none; font-size:16px; text-align:center; text-decoration:underline; color:#bbb; font-weight:600; padding:4px 0; width:100%;}
.cardDateM{float:none; font-size:14px; text-align:center; text-decoration:none; color:#666; padding:2px 0 0 0; width:100%;}
.column {float: none; display: block; width: 50%; margin: auto; text-align:center; padding-top:12px;}
.columnPage {float: left; height:inherit;}
.columnPageL {width: calc(100% - 400px); min-width:500px;}
.columnPageR {width: 400px; height:100%;}

.eBOX{position: absolute; display: none; overflow:hidden; width: 1024px; height: 85vh; z-index: 20; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}
.ex1 {padding: 0 0 0 8px; width:100%; float: left; font-family: 'Kalam', cursive; font-size: 17px; background:none;}

.innertube {padding:6px; width:100%;}

.mail-container {border-radius: 6px; background-color: none; padding: 6px; text-align:left; font-size:15px; color: #7C004D;}
.mailLabel{padding: 4px 0 3px 8px;}
.mailField{width:95%; text-decoration: none; border: 1px solid #ccc; margin-bottom:12px; padding:0px; background: #FFFFF5;}

.marquee {height:50px; width:98%; margin-left:10px; overflow:hidden;  position:relative;}
.marquee div {margin-top:17px; display: block; width: 280%; height: 50px; position: absolute; overflow: hidden;	font-family: 'Audiowide', cursive; font-size:20px; animation: marquee 20s linear infinite;}
.marquee span {float: left; width: 50%; text-transform: uppercase; text-decoration:none;}
@-moz-keyframes marquee { 0% { margin-left:110%; } 100% { margin-left:-1200px;}}
@-webkit-keyframes marquee { 0% { margin-left:110%; } 100% { margin-left:-1200px;}}

.row:after {content: ""; display:table; clear: both;}

.scrolling-wrapper {height:510px; width:98%; overflow-x: hidden; overflow-y:auto; white-space:nowrap; scroll-snap-type:y mandatory;}  
.scrollBtn{display:flex; justify-content:center; align-items:center; height:100%; width:10rem; border-radius:6px; border:1px solid #ccc; margin:2px;text-decoration:none;}
.scrollBtnX{display:flex; justify-content:center; color:#bbb; font-weight:800; align-items:center; height:100%; width:7rem; border-radius:6px; border:1px solid white; margin:2px;text-decoration:none;}
.show {display: block;}
.space{clear:both; height:0.4rem;}
.spanINFO {position:relative; height:470px; max-width:600px; overflow-y: auto;}
.submitG{font-size:14px; color:#FFFFF9; padding:0px; width:80px; height:36px; border-radius:6px; background:#7C004D; cursor:pointer;}