@charset "utf-8";
/* CSS Document */

.happiness-58-1{
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
	height:831px;
	width: 100%;
	background:url(../images/happiness-58-1/bg.jpg) top center no-repeat;
	}

.happiness-58-1 .happiness-left{
	margin:0;
	padding:0;
	margin-top:110px;
	height: 634px;
	position:relative;
	background: url(../images/happiness-58-1/bg-tab.png) 170px 70px no-repeat;
}

.happiness-58-1 .happiness-left .happiness-mid{
	position:absolute;
	top: 60px;
	left: 220px;
	margin:0;
	padding:0;
	width: 56%;
	padding-top: 80px;
}
.happiness-58-1 .happiness-left .happiness-mid ul{
	margin:0;
	padding:0;
}
.happiness-58-1 .happiness-left .happiness-mid ul li{
	color:#494d14;
	padding:10px 0px;
	padding-left:50px;
	font: 35px/40px 'THK2DJuly8', Arial, sans-serif;
	background:url(../images/happiness-58-1/leaf.png) top left no-repeat;
}
.happiness-58-1 .happiness-left .happiness-mid ul li.active{
	background:url(../images/happiness-58-1/leaf-over.png) top left no-repeat;
}
.happiness-58-1 .happiness-left .happiness-mid ul li a{
	color:#494d14;
}
.happiness-58-1 .happiness-left .happiness-mid ul li a:hover{
	color:#b26113;
}

.happiness-58-1 .happiness-left-1{
	margin:0;
	padding:0;
	margin-top:20px;
	position:relative;
	display:none;
}

.happiness-58-1 .happiness-left-1 .happiness-mid{
	margin:0;
	padding:0;
}

.happiness-58-1 .happiness-left-1 .happiness-mid .tab {
	font: 25px/30px 'PGVIM', Arial, sans-serif;
	overflow-x: scroll;
	margin:0 -5px 0 0;
	padding:3px;
	background:none;
}
.happiness-58-1 .happiness-left-1 .happiness-mid .tab ul{	
	padding:0;
	margin:0;
	color:#3e677c;
}
.happiness-58-1 .happiness-left-1 .happiness-mid .tab ul li{
	padding:0px 10px;
	
}	
.happiness-58-1 .happiness-left-1 .happiness-mid .tab .normal{
	width:300px;
	height:50px;
	display: inline-block;
	text-align:center;
	/* margin-top: 7px;*/
	color:#3e677c;
	padding: 5px 25px !important;
	font-weight:bold;
	letter-spacing:1px;
	white-space:nowrap;
	font: 32px/40px 'PGVIM', Arial, sans-serif;
	color: #494d14;
}	
.happiness-58-1 .happiness-left-1 .happiness-mid .tab .active{
	width: 300px;
    height: 50px;
    text-align: center;
	margin:0 6px;
	padding: 5px 25px !important;
    color: #fff;
	letter-spacing:1px;
    font-weight: bold;
	font: 32px/40px 'PGVIM', Arial, sans-serif;
	background:#494d14;
	white-space:nowrap;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	
	
}
.happiness-58-1 .happiness-left-1 .happiness-mid .tab .active a{
	font: 32px/40px 'PGVIM', Arial, sans-serif;
	color:#fff;
}
.happiness-58-1 .happiness-left-1 .happiness-mid .tab .normal a{
	font: 32px/40px 'PGVIM', Arial, sans-serif;
	color:#494d14;
	
}
.happiness-58-1 .happiness-left-1 .happiness-mid .tab .normal a:hover{
	color:#494d14;
	font: 32px/40px 'PGVIM', Arial, sans-serif;
}

.happiness-58-1 .happiness-right{
	margin:0;
	padding:0;
	margin-top:238px;
	position:relative;
}
.happiness-58-1 .leave-1{
	top:0px ;
	left: 0px;
	position: absolute;
	-webkit-animation: fall 10s linear infinite;
	z-index:0;
}
@-webkit-keyframes fall {
    0% {
		top:0px; left:500px;
		opacity:0;
	}
	
	30% {
		top:300px; left:250px;
        opacity:1;
	}
	
	50% {
		top:600px; left:200px;
        opacity:1;
	}
	
	100% {
		top:950px; left:300px;
        opacity:0;
	}
}

.happiness-58-1 .leave-2{
	top:0px ;
	left: 0px;
	position: absolute;
	-webkit-animation: fall-2 10s linear infinite;
	z-index:0;
}
@-webkit-keyframes fall-2 {
    0% {
		top:0px; left:0px;
		opacity:0;
	}
	30% {
		top:350px; left:400px;
        opacity:1;
	}
	50% {
		top:700px; left:800px;
        opacity:1;
	}
	
	100% {
		top:950px; left:0px;
        opacity:0;
	}
}

.happiness-58-1 .leave-3{
	top:0px ;
	right: 0px;
	position: absolute;
	-webkit-animation: fall-3 20s linear infinite;
	z-index:0;
}
@-webkit-keyframes fall-3 {
    0% {
		top:0px; right:0px;
		opacity:0;
	}
	30% {
		top:350px; right:400px;
        opacity:1;
	}
	50% {
		top:700px; right:800px;
        opacity:1;
	}
	
	100% {
		top:950px; right:100px;
        opacity:0;
	}
}

.happiness-58-1 .leave-4{
	top:0px ;
	right: 0px;
	position: absolute;
	-webkit-animation: fall-4 10s linear infinite;
	z-index:0;
}
@-webkit-keyframes fall-4 {
    0% {
		top:0px; right:0px;
		opacity:0;
	}
	
	50% {
		top:600px; right:-50px;
        opacity:1;
	}
	
	70% {
		top:750px; right:200px;
        opacity:1;
	}
	
	100% {
		top:950px; right:800px;
        opacity:0;
	}
}


.happiness-58-1 .spin{
	-webkit-animation: spin 2.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
		transform: rotateY(0deg);
	}
	
	50% {
		transform: rotateY(180deg);
	}
	
	100% {
		transform: rotateY(0deg);
	}
}

.happiness-58-1 .spin-2{
	-webkit-animation: spin-2 5s linear infinite;
}

@-webkit-keyframes spin-2 {
    0% {
		transform: rotateY(0deg);
	}
	
	50% {
		transform: rotateY(180deg);
	}
	
	100% {
		transform: rotateY(0deg);
	}
}
.happiness-58-1 .happiness-right .happiness-top{
	margin: 0;
    padding: 0;
    top: -160px;
    left: 330px;
    position: absolute;
    color: #fdffad;
    font: 100px/60px 'PGVIM', Arial, sans-serif;
}
.happiness-58-1 .happiness-right .happiness-top img{
	max-width:100%;
	height:auto;
}
.happiness-pic-block{
	width:358px;
	height:auto;
	padding:4px;
	background-color:#968340;
	-webkit-box-shadow: 2px 5px 15px 0px rgba(61,59,60,1);
	-moz-box-shadow: 2px 5px 15px 0px rgba(61,59,60,1);
	box-shadow: 2px 5px 15px 0px rgba(61,59,60,1);
}
.happiness-pic-block:hover{
	cursor:pointer;
	background-color:#d8bd5d;
}
.happiness-pic-block .happiness-pic{
	margin: 0;
    padding: 0;
    width: 350px;
    height: 197px;
    position: relative;
    background-color: #000;
}
.happiness-pic-block .happiness-pic:hover .pic_bg{
	display:none;
}
.happiness-pic-block .happiness-pic img{
	max-width:100%;
	height:auto;
}
.happiness-pic-block .happiness-pic:hover img{
	opacity:0.5;
}
.happiness-pic-block .happiness-pic .h-text{
	display:none;
	font: 25px/25px 'thaisanslite', Arial, sans-serif;
	color:#fff;
	text-align:center;
	position:absolute;
	top:31%;
	left:0;
	width:100%;
	padding-bottom:25px;
	z-index:2;
	background:url(../images/gallery-58-1/line-pink.png) bottom center no-repeat;
}
.happiness-pic-block .happiness-pic .h-text img{
	height: auto;
}
.happiness-pic-block .happiness-pic .h-text a{
	color:#fff;
}
.happiness-pic-block .happiness-pic .h-text a{
	color:#FFF;
}
.happiness-pic-block .happiness-pic:hover .h-text{
	display:block;
}
.happiness-58-1 .happiness-bottom{
	position:relative;
	height:64px;
	float: right;
}
@media (max-width: 575px) { 
	.happiness-58-1{
	    height: auto;	
	}
	.happiness-58-1 .happiness-left{
		display:none;	
	}
	.happiness-58-1 .happiness-left-1{
		display:block;	
	}
	.happiness-58-1 .happiness-right{
		margin-top:0;	
	}
	.happiness-58-1 .happiness-right .happiness-top{
		display:none;	
	}
	.happiness-pic-block {
	    width: 308px;	
	}
	.happiness-pic-block .happiness-pic {
		width: 300px;
    	height: 169px;	
	}
	.happiness-pic-block .happiness-pic img{
		height: 217px;
	}
}
@media (min-width: 576px) and (max-width: 767px) { 
	.happiness-58-1{
	    height: auto;	
	}
	.happiness-58-1 .happiness-left{
		display:none;	
	}
	.happiness-58-1 .happiness-left-1{
		display:block;	
	}
	.happiness-58-1 .happiness-right{
		margin-top:0;	
	}
	.happiness-58-1 .happiness-right .happiness-top{
		display:none;	
	}
	.happiness-pic-block .happiness-pic img{
		height: 217px;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.happiness-58-1{
		height: auto;	
	}
	
	.happiness-58-1 .happiness-left{
		display:none;	
	}
	.happiness-58-1 .happiness-left-1{
		display:block;	
		margin-top: 110px;
	}
	.happiness-58-1 .happiness-right{
		margin-top: 40px;
	}
	.happiness-58-1 .happiness-right .happiness-top{
		top: -190px;
		left: 231px;	
	}
	.happiness-58-1 .happiness-right .happiness-top img {
		max-width: 80%;
		height: auto;
	}
	.happiness-pic-block .happiness-pic img{
		height: 217px;
	}
	.happiness-58-1 .happiness-left-1 .happiness-mid .tab .normal a{
		color:#ca6708;
	}
}
@media (min-width: 992px) and (max-width: 1199px) { 
	.happiness-58-1 .happiness-left{
		margin-top: 135px;
		background: url(../images/happiness-58-1/bg-tab.png) 15px 100px no-repeat;
		background-size: contain;
	}
	.happiness-58-1 .happiness-right .happiness-top{
		left: 130px;
		
	}
	.happiness-58-1 .happiness-left .happiness-mid{
		left: 40px;
		width: 84%;
	}
	.happiness-pic-block .happiness-pic img{
		height: 217px;
	}
}
@media (min-width: 1200px) and (max-width: 1366px) { 
	.happiness-58-1{
		height: 720px;	
	}
	.happiness-58-1 .happiness-left{
		background: url(../images/happiness-58-1/bg-tab.png) 45px 70px no-repeat;
		background-size: contain;
	}
	.happiness-pic-block{
		width: 269px;
	}
	
	.happiness-58-1 .happiness-right .happiness-top{
		left:100px;	
	}
	.happiness-58-1 .happiness-left .happiness-mid{
		left:79px;	
	}
	.happiness-58-1 .happiness-left .happiness-mid ul li{
		font: 28px/40px 'THK2DJuly8', Arial, sans-serif;
	}
	.happiness-pic-block .happiness-pic{
		width: 261px;
		height: 146px;
	}
	.happiness-pic-block .happiness-text{
		width:279px;	
	}
	.happiness-pic-block .happiness-pic img{
		height: 160px;
	}
}

@media (min-width: 1367px) and (max-width: 1440px) { 
	.happiness-58-1{
		height: 780px;	
	}
	.happiness-58-1 .happiness-left{
		background: url(../images/happiness-58-1/bg-tab.png) 15px 88px no-repeat;
		background-size: contain;
	}
	.happiness-58-1 .happiness-left .happiness-mid ul li{
		padding: 6px 0px;
		padding-left: 50px;
		font: 28px/40px 'THK2DJuly8', Arial, sans-serif;
	}
	.happiness-pic-block{
		width: 309px;
	}
	.happiness-58-1 .happiness-left .happiness-top{
		left:80px;	
	}
	.happiness-58-1 .happiness-left .happiness-mid{
		left:53px;	
	}
	.happiness-pic-block .happiness-pic{
		width: 301px;
		height: 170px;
	}
	.happiness-pic-block .happiness-text{
		width:316px;	
	}
	.happiness-pic-block .happiness-pic img{
		height: 190px;
	}
}
@media (min-width: 1441px) and (max-width: 1600px) { 
	.happiness-58-1{
		height: 820px;	
	}
	.happiness-58-1 .happiness-left{
		background: url(../images/happiness-58-1/bg-tab.png) 60px 70px no-repeat;
	}
	.happiness-58-1 .happiness-left .happiness-mid{
		left: 110px;
	}
	.happiness-pic-block{
		width:346px;
	}
	.happiness-pic-block .happiness-pic {
		width: 339px;
		height: 190px;
	}
	.happiness-pic-block .happiness-text{
		width:357px;	
	}
	.happiness-pic-block .happiness-pic img{
		height: 180px;
	}
}
@media (min-width: 1601px) { 
	.happiness-pic-block .happiness-pic img{
		height: 220px;
	}
}