*, *:after, *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html {overflow-x: hidden;}

a:active,
a:focus {
  outline: none;
  -moz-outline-style: none;
}

button::-moz-focus-inner {
  border: 0;
}


/*overlay section*/
.overlayContainer {position:fixed; top:0px; width: 100%;height: 100%;background:rgba(0, 0, 0, 0.5);z-index:-999;opacity: 0; transition: all 0.3s ease-in-out; display: none;}
.overlayContainer.active {opacity: 1; z-index: 999; display: inline-block;}

.overlaySection {width: 800px; height: 250px; margin:0 auto; position: relative; margin-top: 60px;}
.overlaySection.square {width: 500px; height: 412px;}
.closeSection {position: absolute; width: 50px; height: 50px; top: -50px; right: -12px;}
.closeSection a.closeBtn {display: inline-block; width: 100%; height: 100%;}
.closeSection img.closeImg {width: 100%; height: 100%;}

.responseImageSection {width: 100%; height: 100%;}
.responseImageSection img.responseImage {width: 100%; height: 100%;}


.pageContainer {width: 100%; height: 100%;}
/*Header Section */
.headerContainer {width: 100%; height: auto;}
.headerSection {width: 1250px; height: 60px; margin: 15px auto;}

/*logo section*/
.logoSection {float: left;width: 348px;height: 58px;}
.logoSection > a {display: inline-block; width: 100%; height: 100%;}

/*icon section*/
.iconSection {float: right; width: 250px; height: 60px;}
.iconSection div[class$='-icon'] {float: right; width: 40px; height: 40px; margin-left: 10px; margin-top: 10px;}
.iconSection div a {display: block; width: 100%; height: 100%;}

/*content section*/
.contentContainer {width: 100%; height: auto; background-image: url('../img/fullWidthBackground.png'); background-repeat: no-repeat; background-position: top center; /*background-size: cover;*/ background-attachment: local; background-size: 100% 2600px;}
.contentSection {width: 1250px; height: auto; margin: 0px auto;}

/*explanation section */
.explanationSection {position: relative;}
img.explanationImg {width: 1250px; height: auto;}

/*understand section */
.understandSection {float: left; width: 200px; height: 85px; margin-right: -35px;}
.understandSection a {display: block; width: 100%; height: 100%;}
.understandSection a img {position: absolute; width: 200px; height: 85px; top: 0px; transition: all .3s ease-in-out;}
.understandSection:hover a img {top: -10px;}

/*tutorial section*/
.tutorialSection {float: left;  width: 200px; height: 85px; margin-right: -35px;}
.tutorialSection a {display: block; width: 100%; height: 100%;}
.tutorialSection a img {position: absolute; width: 200px; height: 85px; top: 0px; transition: all .3s ease-in-out;}
.tutorialSection:hover a img {top: -10px;}

/*japan address section*/
.japanAddressSection {float: left;  width: 200px; height: 85px; margin-right: -35px;}
.japanAddressSection a {display: block; width: 100%; height: 100%;}
.japanAddressSection a img {position: absolute; width: 200px; height: 85px; top: 0px; transition: all .3s ease-in-out;}
.japanAddressSection:hover a img {top: -10px;}

/*usa address section*/
.usaAddressSection {float: left;  width: 200px; height: 85px;}
.usaAddressSection a {display: block; width: 100%; height: 100%;}
.usaAddressSection a img {position: absolute; width: 200px; height: 85px; top: 0px; transition: all .3s ease-in-out;}
.usaAddressSection:hover a img {top: -10px;}

/*4 bars section*/
.barSection {position: absolute; width:auto; height: 95px; bottom: -65px; left: 270px; z-index: 11;}

/*bottom yellow bar section*/
.bottomBarSection {position: absolute; bottom: -110px; z-index: 10; left: 165px;}
img.yellowBarImg {width: 900px; height: 150px;}
    
/*input field section */
.inputFieldSection {width: 850px; height: 100px; margin: 100px auto 0px auto;}
.inputEctSection {float: left; width: 300px; height: 60px; /*margin-left: 100px;*/ margin-top: 10px;}
.input {margin:0px 0px;}
.input__field--minoru {color: #000000; font-size: 16px;}
label.input__label.input__label--minoru {display: inline-block; float: left; width: 110px;}
span.input__label-content.input__label-content--minoru {color: #ffffff; font-size: 16px; font-weight: 600; font-family: '微軟正黑體'; padding-top: 0.9em;} 
span.input.input--minoru {display: inline-block; float: left; width: 180px;}
/*.input--haruki {margin: 0px 0px; max-width: 300px;}*/
/*.input__field--haruki {color: #000000;  font-size: 18px; padding: 0.6em 0.25em;}*/
/*span.input__label-content.input__label-content--haruki {font-size: 16px; padding-top: 1.0em; padding-bottom: 1.0em;}*/

/*btn sign in section*/
.btnSignInSection {float: left; width: 150px; height: 60px;}
.btnMemberSection {float: left; width: 150px; height: 60px;}
.btnSearchSection {float: left; width: 150px; height: 60px;}
.buttonSignIn, .buttonMemberRegister, .buttonSearchECT { display: inline-block; padding: 15px 23px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #000000; background-color: #f7c600; border: none; border-radius: 15px; box-shadow: 0 9px #999; font-family: '微軟正黑體';}
.buttonSearchECT {width: 142px;}
.buttonSignIn:hover, .buttonMemberRegister:hover, .buttonSearchECT:hover {background-color: #ea9f0f;}
.buttonSignIn:active, .buttonMemberRegister:active, .buttonSearchECT:active {background-color: #ea9f0f; box-shadow: 0 5px #666; transform: translateY(4px);}

/*activity section */
.activitySection {width: 404px; height: 149px; margin: 0px auto; text-align: center;}
.activitySection a {display: block; width: 100%; height: 100%;}
img.activityImg {width: 100%; height: 100%;}

/*reward list section*/
.rewardListSection {width: 1053px; height: 185px; margin-left: auto; margin-right: auto;}
.rewardListImgSection {width: auto; height: auto; position: relative;}
img.rewardImg { width: 100%; height: 100%;}





/*grey mask section*/
.greyMaskSection {position:absolute;background-color: rgba(0, 0, 0, 0.7); width: 957px; top: 35px; right: 48px; height: 120px; transition: all 0.7s ease-in-out;}

.greyMaskSection.got-1-rewards {width: 760px;}
.greyMaskSection.got-2-rewards {width: 567px;}
.greyMaskSection.got-3-rewards {width: 374px;}
.greyMaskSection.got-4-rewards {width: 180px;}
.greyMaskSection.got-5-rewards {width: 0px;}

/*wooden board section*/
.woodenBoardSection {width: 1000px; height: 1231px; margin: 0px auto; position: relative;}
.boardImgSection {width: auto; height: auto;}
img.woodenBoardImg {width: 100%; height: 100%;}

.clear {clear: both;}
.surfaceSection {position: absolute; left: 155px; top: 85px; width: 670px; height: 980px;}
.gridSection {float: left; width: 133px; height: 163.33px;}
.gridSection  a.balloonLink {display: block; width: 100%; height: 100%;}

.balloonSection {position: relative;}
img.dateImg {position: absolute; z-index: 10; width: 50%; height: auto; top: 50px; left: 25px; }
.gridSection img.dateImg {transform: scale(1.0); transition: all .3s ease-in-out;}
.gridSection:hover img.dateImg {transform: scale(1.2);}


img.balloonImg {position: absolute; width: 110px; height: 135px; top: 13px;}
img.balloonImg[src*="purple"] {
	animation: purple_balloon 1s infinite ease-in-out;
}

img.balloonImg[src*="pink"] {
	animation: pink_balloon 2.8s infinite ease-in-out;
}

img.balloonImg[src*="orange"] {
	animation: orange_balloon 2.3s infinite ease-in;
}

img.balloonImg[src*="blue"] {
	animation: blue_balloon 3s infinite ease-out;
}

img.balloonImg[src*="green"] {
	animation: green_balloon 1.8s infinite ease-in;
}


@keyframes purple_balloon {
    0%   {top: 7px; transform:rotate(-5deg);}
    25%  {top: 9px}
    50%  {top: 10px; transform:rotate(3deg);}
    70%  {top: 9px;}
    100% {top: 6px; transform:rotate(-5deg);}
}

@keyframes pink_balloon {
    0%   {top: 14px; transform: scale(0.9);}
    20%	 {top: 10px; transform: scale(1);}	
    40%	 {top: 12px; transform: scale(0.9);}
    60%	 {top: 10px;}
    80%	 {top: 12px; transform: scale(1);}
    100% {top: 14px; transform: scale(0.9);}
}

@keyframes orange_balloon {
    0%   {top: 10px; left: 0px; transform: scale(1) rotate(0deg);}
    20%	 {top: 11px; left: 5px; transform: rotate(10deg);}	
    40%	 {top: 12px; transform: scale(1.1) rotate(2deg);}
    60%	 {top: 12px; left: 10px; transform: rotate(-7deg);}
    80%	 {top: 11px; transform: rotate(-2deg)}
    100% {top: 10px; left: 0px; transform: scale(1) rotate(0deg);}
}

@keyframes blue_balloon {
    0%   {top: 10px; left: 3px; transform: rotate(0deg);}
    20%	 {top: 15px; left: 5px; transform: rotate(-12deg);}
    40%	 {top: 18px; left: 8px;}
    50%  {top: 15px; left: 6px;}
    60%	 {transform: scale(1.1);}
    80%	 {top: 8px; left: 5px; transform: rotate(12deg);}
    100% {top: 10px; left: 3px; transform: rotate(0deg);}
}

@keyframes green_balloon {
    0%   {transform: scale(0.9);}
    20%	 {transform: rotate(-11deg);}
    40%	 {}
    50%  {transform: scale(1);}
    60%	 {}
    80%	 {transform: rotate(7deg);}
    100% {transform: scale(0.9);}
}


/*green check display section */
img.greenCheckImg {width: 100px; height: auto; top: 30px; left: 15px; position: absolute;}

/*footer*/
.footerContainer {width: 100%; height: auto;}
.footerBottomBorder {min-width: 1250px; width: 100%; height: 10px; background-color: #fc8300;}
.footerSection {width: 1250px; height: 60px; margin:0px auto; text-align: center;}
.footerText span {font-size: 13px; display: inline-block; width: auto; height: 15px; line-height: 25px;}


input#input-14::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #dedddd;
}
input#input-14::-moz-placeholder { /* Firefox 19+ */
  color: #dedddd;
}
input#input-14:-ms-input-placeholder { /* IE 10+ */
  color: #dedddd;
}