@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600&display=swap');

html {scroll-behavior: smooth;}
body {margin:0; font-family:'Barlow',"Microsoft JhengHei","微軟正黑體","Apple LiGothic Medium","蘋果儷中黑",Arial,sans-serif; font-size:1rem; line-height:1.2; color: #FFF; min-height:100vh;
	background-image:url(img/bg_ball01.png),url(img/bg_ball02.png),url(img/bg_ball03.png),url(img/bg_ball04.png),url(img/bg_stars.png),url(img/bg_pattern2.png),url(img/bg_snow.png),url(img/bg_pattern3.png),url(img/bg_stars.png),url(img/bg_color.jpg); 
	background-size:min(20%, 80px), min(20%, 80px), min(40%, 160px), min(30%, 100px), min(26%, 140px), min(19.5%, 100px), min(8%, 40px), min(35%, 170px), min(30%, 120px), cover; 
	background-position:-25px 25px, 92% -22px, 7px 110.4%, min(50%,160px) 108%, 105% 1%, right top, min(40%,160px) 97%, left bottom, right 104%, center; 
	background-repeat:no-repeat;}
body * {box-sizing:border-box; transition:all .5s ease-in-out;}
img {max-width:100%; border:none;}
a {cursor:pointer;}
.clearfix {overflow: auto;}
.clearfix::after {content: ""; clear: both; display: table;}
.container {
	width:95%; max-width:480px;
	margin-right:auto; margin-left:auto;
	position:relative;
}

#header {
	padding:20px 0 0px;
	text-align:center;
}
#header .opmall-logo {
	
}
#header .opmall-logo img {
	max-width:160px;
}
#header .title-line {
	margin-top:-5px;
	text-align:center;
}
#header .title-line .txt {	
	display:inline-block;
	width:min(320px,100%);
	/*height:min(126px,15vh);*/
}
#header .title-line .txt img {
	
	display:inline-block;
}

#main {
	padding-bottom:70px;
}

.calendar {
	list-style:none;
	margin:0;
	padding:0 30px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-content:flex-start;
	z-index:5;
}
.calendar::after {
	content: "";
	clear: both;
	display: table;
}
.calendar>li {
	margin:0;
	padding:0;
	width:25%;
	text-align:center;
	height:auto;
	/*float: left;*/
}
.calendar>li img {
	width:87%;
	height:auto;
	margin-bottom:5%;
	object-fit:contain;
	filter: drop-shadow(2px 2px 4px rgba(30,30,30,.8));
}

#main:not([data-content="calendar"]) .calendar {
	filter:blur(15px) opacity(0%);
}
#main:not([data-content="calendar"])  li:nth-child(1) {transform:scale(0) translate(180%, 35vh);}
#main:not([data-content="calendar"])  li:nth-child(2) {transform:scale(0) translate(130%, 45vh);}
#main:not([data-content="calendar"])  li:nth-child(3) {transform:scale(0) translate(-120%, 25vh);}
#main:not([data-content="calendar"])  li:nth-child(4) {transform:scale(0) translate(-100%, 35vh);}
#main:not([data-content="calendar"])  li:nth-child(5) {transform:scale(0) translate(120%, 25vh);}
#main:not([data-content="calendar"])  li:nth-child(6) {transform:scale(0) translate(140%, 15vh);}
#main:not([data-content="calendar"])  li:nth-child(7) {transform:scale(0) translate(-100%, 20vh);}
#main:not([data-content="calendar"])  li:nth-child(8) {transform:scale(0) translate(-150%, 22vh);}
#main:not([data-content="calendar"])  li:nth-child(9) {transform:scale(0) translate(140%, 5vh);}
#main:not([data-content="calendar"])  li:nth-child(10) {transform:scale(0) translate(110%, 8vh);}
#main:not([data-content="calendar"])  li:nth-child(11) {transform:scale(0) translate(-110%, 2vh);}
#main:not([data-content="calendar"])  li:nth-child(12) {transform:scale(0) translate(-170%, 4vh);}
#main:not([data-content="calendar"])  li:nth-child(13) {transform:scale(0) translate(150%, -5vh);}
#main:not([data-content="calendar"])  li:nth-child(14) {transform:scale(0) translate(90%, -9vh);}
#main:not([data-content="calendar"])  li:nth-child(15) {transform:scale(0) translate(-160%, -3vh);}
#main:not([data-content="calendar"])  li:nth-child(16) {transform:scale(0) translate(-120%, -6vh);}
#main:not([data-content="calendar"])  li:nth-child(17) {transform:scale(0) translate(170%, -11vh);}
#main:not([data-content="calendar"])  li:nth-child(18) {transform:scale(0) translate(140%, -15vh);}
#main:not([data-content="calendar"])  li:nth-child(19) {transform:scale(0) translate(110%, -12vh);}
#main:not([data-content="calendar"])  li:nth-child(20) {transform:scale(0) translate(-130%, -16vh);}
#main:not([data-content="calendar"])  li:nth-child(21) {transform:scale(0) translate(180%, -21vh);}
#main:not([data-content="calendar"])  li:nth-child(22) {transform:scale(0) translate(160%, -20vh);}
#main:not([data-content="calendar"])  li:nth-child(23) {transform:scale(0) translate(100%, -24vh);}
#main:not([data-content="calendar"])  li:nth-child(24) {transform:scale(0) translate(-110%, -22vh);}
#main:not([data-content="calendar"])  li:nth-child(25) {transform:scale(0) translate(150%, -26vh);}

.calendar>li.off img	{
	filter: grayscale(90%) opacity(30%);
}
.calendar>li.on img	{
	cursor:pointer;
}

#intro {
	border-radius:80px;
	padding:10px 25px;
	margin-bottom:1rem;
	text-align:center;
	height:auto;
	font-size:10px;
	background:rgba(42, 76, 48, .85);
	border:3px solid #FFF;
}
#link-tnc {
	text-align:center;
	margin-top:10px;
}
#link-tnc .open-tnc {
	font-size:.75rem;
	display:inline-block;
	background-color:#1fae59;
	border-radius:20px;
	line-height:40px;
	padding:0 40px 0 20px;
	position:relative;
}
#link-tnc .open-tnc:after {
	content: '';
	position: absolute;
	background:url(img/click.svg) no-repeat;
	width:50px;
	height:40px;
	right:-15px;
	bottom:-8px;
}
#footnote {
	font-size:9px;
	margin:15px 15px;
}

#main:not([data-content="calendar"]) #link-tnc,
#main:not([data-content="calendar"]) #footnote,
#main:not([data-content="calendar"]) #intro {
	filter:blur(15px) opacity(0%);
}


#main .gift	{
	position:absolute;
	transform: translate(-50%,0);
	top:0%;
	left:50%;
	z-index:-1;
	text-align:center;
}
#main:not([data-content="gift"]) .gift	{
	/*height:0;
	width:0;	overflow:hidden;
	filter:blur(15px) opacity(0%);*/
}
#main[data-content="gift"] .gift {
	z-index:10;
}

#main .gift .flip-card {
	perspective: 1000px;
	position: relative;
}
#main .gift .flip-card-inner {
	position: relative;
	width:min( 85vw,60vh);
	height:min( 85vw,60vh);	
	max-width:300px;
	max-height:300px;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	opacity:0;
}
#main .gift .img-wrapper img {
	width:100%;
	height:100%;
}
#main[data-content="gift"] .gift .flip-card-inner {
	opacity:1;
	animation-name: flipping;
	animation-delay:0s;
	animation-duration:1.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
@keyframes flipping {
	0%   {transform: rotateY(0deg);}
	6%  {transform: rotateY(180deg);}
	12%  {transform: rotateY(360deg);}
	20% {transform: rotateY(540deg);}
	28% {transform: rotateY(720deg);}
	38% {transform: rotateY(900deg);}
	50% {transform: rotateY(1080deg);}
	65% {transform: rotateY(1260deg);}
	80% {transform: rotateY(1440deg);}
	100% {transform: rotateY(1620deg);}
}
/*#main .gift .flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}*/
#main .flip-card-front, #main .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	z-index:1;
}
#main .flip-card-back {
	transform: rotateY(180deg);
	transition:all .3s;
}

#main.gift-changed .flip-card-back {
	transform: rotateY(360deg);
	opacity:0;
}

#main .gift .txt-gift {
	filter:blur(15px) opacity(0%);
	margin-top:2rem;
	transition:all .2s;
	border-radius:80px;
	padding:10px 25px;
	background:rgba(42, 76, 48, .85);
	border:3px solid #FFF;
}
#main[data-content="gift"] .gift .txt-gift {
	animation-name: txt-gift-fadeIn;
	animation-delay:1.3s;
	animation-duration:.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
@keyframes txt-gift-fadeIn {
	from    {filter:blur(15px) opacity(0%); }
	to    {filter:blur(0) opacity(100%); }
}

#main.gift-changed[data-content="gift"] .gift .txt-gift {
	transform: rotateY(150deg);
	opacity:0;
}

#main .gift .flip-card>span {
	position:absolute;
	z-index:-3;
	filter:opacity(0%) blur(15px);
	background-size:contain;
	background-repeat:no-repeat;
	transition:all 1s ease-in;
}

#main .gift .flip-card>span:nth-child(1) {
	background-image:url(img/bg_stars.png);
	width:100px;
	height:100px;
	top:66%;
	left:-30px;
	transform:translateX(15px); 

}

#main .gift .flip-card>span:nth-child(2) {
	background-image:url(img/pattern02.png);
	width:135px;
	height:135px;
	top:15%;
	right:-25px;
	transform:translateX(-15px);
}
#main[data-content="gift"] .gift .flip-card>span:nth-child(1),
#main[data-content="gift"] .gift .flip-card>span:nth-child(2) {
	filter:opacity(100%) blur(0);
	transform:translateX(0); 
}

/*#main.gift-changed[data-content="gift"] .gift .flip-card>span:nth-child(1) {
	filter:opacity(0%) blur(15px);
	background-image: none;
	transition:all 1s ease-in;
}
#main.gift-changed[data-content="gift"] .gift .flip-card>span:nth-child(2) {
	filter:opacity(0%) blur(15px);
	background-image: none;
	transition:all 1s ease-in;

}*/

#main .gift #display-date {
	filter:blur(15px) opacity(0%);
	z-index:2;
	position:absolute;
	bottom:0;
	left:0;
	width:calc(100% + 50px);
	transform:translate(-25px,30px);
	display:flex;
}
#main .gift #display-date img {
	align-self: flex-start;
}
#main[data-content="gift"] .gift #display-date  {
	animation-name: display-date-fadeIn;
	animation-delay:1.3s;
	animation-duration:.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
@keyframes display-date-fadeIn {
	from    {filter:blur(15px) opacity(0%); }
	to    {filter:blur(0) opacity(100%); }
}
#main.gift-changed[data-content="gift"] .gift #display-date {
	/*transform: rotateX(150deg);*/
	opacity:0;
	transform:translate(-25px,30px) rotateX(150deg);
}

#footer-selection {
	position:fixed;
	bottom:0;
	width:100%;
	overflow-x:hidden;
	background:transparent;
	height:0;
	padding:0 20px;
	overflow:hidden;
	text-align:center;
}
#main[data-content="gift"] + #footer-selection {
	padding-top:5px;
	padding-bottom:5px;
	background-color:rgba(0,0,0,.8);
	height:auto;
	z-index:20;
}
#footer-selection img {
	filter:grayscale(90%) ;
	cursor:pointer;
	width:40px;
	height:40px;
	display:inline;
}
#footer-selection img.on {
	filter:none;
	cursor:default;
}

#tnc {
	position:fixed;
	width:100%;
	height:100vh;
	overflow-y:scroll;
	z-index:-1;
	opacity:0;
	left:0;
	top:0;
	background:rgba(10,10,10,.9);
	font-size:.75rem;

	padding:30px;
	scrollbar-width: none; 
}
#tnc::-webkit-scrollbar {
  display: none;
}
#tnc.on {
	opacity:1;
	z-index:50;
}
#tnc ol {
	padding-left:15px;
}
#tnc ol li {
	margin-bottom:.5rem;
	padding-left:3px;
}
#tnc .close {
	position:fixed;
	top:4px;
	right:4px;
	width:24px;
	height:24px;
}

@media (max-width: 1200px)	{
	
}

@media (min-width: 700px) and (min-height: 700px) 	{	/*tablet */
	body {
		font-size:1.125rem; line-height:1.35;
	}
	.container {
		max-width:600px;
	}
	#header {
		padding: 20px 0 0;
	}
	#header .opmall-logo img {
		max-width:230px;
	}
	#header .title-line {
		margin-top: -13px;
		margin-bottom:5px;
	}
	#header .title-line .txt {
		/*height:160px;*/
		width: 400px;
	}
	#header .title-line .txt img {
		/*width:100%;*/
		
	}

	.calendar>li {
		width:20%;
	}
	#intro {
		font-size:1rem;
	}
	#link-tnc .open-tnc {
		font-size:1rem;
		border-radius:20px;
		line-height:40px;
		padding:0 40px 0 20px;
	}
	#link-tnc .open-tnc:after {
		width:50px;
		height:40px;
		right:-15px;
		bottom:-8px;
	}
	#footnote {
		font-size:.875rem;
		margin-top:30px;
		margin-bottom:70px;
	}

	#main .gift {
		margin-top:-30px;
	}
	#main .gift .txt-gift {
		margin-top:2.5rem;
		font-size:1.25rem;
	}
	
	#main .gift .flip-card-inner {
		width:350px;
		height:350px;	
		max-width:350px;
		max-height:350px;
	}

	#footer-selection {
		padding:0 30px;
	}
	#main[data-content="gift"] + #footer-selection {

	}
	#footer-selection img {
		width:55px;
		height:55px;
	}
	#tnc {
		font-size:1rem;
		padding:35px;
	}
	#tnc .close {
		width:30px;
		height:10px;
	}
}

@media (min-device-width:1200px) and (orientation: landscape) {
	body {
		background-size:min(30%, 100px), min(30%, 100px), min(43%, 180px), min(33%, 130px), min(35%, 160px), min(19.5%, 100px), min(8%, 40px), min(40%, 210px), min(35%, 140px), cover; 
		background-position:-25px 25px, 92% -22px, 7px 110%, min(40%,170px) 108%, 100% 2%, right top, min(40%,190px) 94%, left bottom, right 102%, center; 
	}
	
}

@media (max-device-height:600px) and (orientation: landscape) {
	body {
		background-size:min(20%, 80px), min(20%, 80px), min(30%, 120px), min(25%, 80px), min(26%, 120px), min(15%, 70px), min(8%, 30px), min(30%, 150px), min(30%, 100px), cover; 
		background-position:-25px 25px, 92% -22px, 7px 118%, min(40%,100px) 112%, 105% 2%, right top, min(35%,150px) 96%, left 109%, right 106%, center; 
	}
	.container {
		max-width:600px;
	}
	#header {
    padding:10px 0 0;
 	}
 	#header .opmall-logo {
 		
 	}
 	#header .opmall-logo img {
 		max-width: 170px;
 	}
 	#header .title-line {
 		margin-top:-13px;
	}

	#header .title-line .txt {
		width:260px;
	}
	#header .title-line .txt img {
	}

	#main {
		padding-bottom:35px;
	}
	.calendar>li {
		width:9%;
	}
	#desc {
		margin-top:.5rem;
		padding:0 10px;
	}
	#main .gift	{
		top:0;
	}
	#main[data-content="gift"] .gift {
		transform:translate(-50%, 0);
		display:flex;
		column-gap:10px;
		align-items:center;
		width:100%;
		max-width:400px;
	}
	#main .gift .flip-card-inner {
		width:140px;
		height:140px;	
	}
	#main .gift .flip-card:before {
		width:70px;
		height:70px;
		top:64%;
		left:-25px;
	}
	/*#main[data-content="gift"] #display-date {
		position:absolute;
		right:0;
		bottom:15px;
		width: min( 85vw,60vh);
		text-align:center;
	}*/
	#main[data-content="gift"] .gift .txt-gift {
		width:calc( 100% - 160px);
		margin-top:0;
	}

	#main .gift #display-date {
		bottom:10px;
	}

	
}