@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap');
html, body{margin: 0px; padding: 0px;}
body { font-family:'Inter',"Microsoft JhengHei", sans-serif; font-weight: 400; font-size: 1.6rem; color: #383838; background: #f1ce85;}
img{ max-width: 100%;}

.right_icon{ position: fixed; background: #ffffff; border-radius: 50px; padding: 50px 5px; width: 160px; right: 0px; top: 25%; z-index: 999; box-shadow: 0px 0px 8px #a9a294;}
.right_icon ul{ list-style: none; margin:0px; padding: 0px;}
.right_icon ul li{border-bottom: 1px solid #ebd5b8; text-align: center; padding: 5px 0px;}

#grand_openning{ background: url("../images/bg.jpg") no-repeat center top; overflow: hidden; padding-bottom: 50px;}
.main_banner{ background: url("../images/banner_bg.png") no-repeat center top; position: relative; min-height: 640px;padding-top: 62px;}
.date{ text-align: center; position: relative; z-index: 3; }
.logo{ text-align: center; padding: 10px 0px 0px 0px; position: relative; z-index: 3;}
.main_title, .event_slogin{text-align: center; position: absolute; margin-left: auto; margin-right: auto; left: 0px;right: 0px;}
.main_title{ z-index: 1; top: 100px; }
.event_slogin{ z-index: 5; top: 380px; animation:balloon5 5s infinite; }
.cofee_banner{ margin-top: 15px;}
.move_area{ max-width: 1150px; margin: auto; position: relative; z-index: 5;}
 
.move_bo01 { position: absolute; left: 25%; width: 115px; height: 128px; background: url("../images/move_bo01.png") no-repeat left top;}
.move_bo02 { position: absolute; right: 23%; top: 30px; width: 149px; height: 140px; background: url("../images/move_bo02.png") no-repeat left top;}
.move_bo03 { position: absolute; right: 0px; width: 323px; height: 368px; background: url("../images/move_bo03.png") no-repeat left top;}
.move_bo04 { position: absolute; width: 377px; height: 440px; background: url("../images/move_bo04.png") no-repeat left top;}
.move_bo01, .move_bo02, .move_bo03, .move_bo04{ background-size: cover;}
.move_area .envato-balloon:nth-child(1){
	-webkit-animation:balloon 3s infinite;
	        animation:balloon 3s infinite;
}
.move_area .envato-balloon:nth-child(2){ 
	-webkit-animation:balloon2 5s infinite;
	        animation:balloon2 5s infinite;
}

.move_area .envato-balloon:nth-child(3){ 
	-webkit-animation:balloon3 6s infinite;
	        animation:balloon3 6s infinite;
}

.move_area .envato-balloon:nth-child(4){ 
	-webkit-animation:balloon4 4s infinite;
	        animation:balloon4 4s infinite;
}
.swing:hover { -webkit-animation: swing 1s ease; animation: swing 1s ease;  -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}
.box { max-width: 320px; width: 100%; padding: 0px; margin: 15px auto; background: white; box-shadow: 0 0px 10px rgba(0,0,0,0.12), 0 0px 2px rgba(0,0,0,0.24); transition: all 0.2s cubic-bezier(.25,.8,.25,1);}
.box img{ border: 6px solid #fff;}
.box:hover { border-top-left-radius: 10px; margin-top: -8px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; animation-name: example; animation-duration: 0.25s; border-bottom: 8px solid red; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}

.main_area{ max-width: 1440px; margin: auto; width: 92%;}
.ss_gifts, .brand_only, .brand_event, .exclusive_price{ text-align: center;}
.ss_gifts_title, .brand_only_title, .brand_event_title, .exclusive_price_title{ margin-bottom: 10px;}
.ss_gifts_area, .brand_only_area, .brand_event_area, .exclusive_price_area{ margin: 40px 0px;}

.photo_style { box-shadow: 0 0px 10px rgba(0,0,0,0.12);}
.photo_style { margin: 20px auto; display: block;}
.pd-lspace{ padding-left: 35px;}
.pd-lspace_1{ padding-right: 35px;}

.foot_area{ background: #996c17; overflow: hidden; padding: 10px 0px;}
.foot_icon{ max-width: 1000px; width: 100%; margin: auto;}
.foot_icon ul{ list-style: none; margin:0px auto; padding: 0px;}
.foot_icon ul li { float: left;}
.foot_icon ul li a{ color:#ffffff; display: block; text-align: center; padding: 0px 20px;}
.foot_icon ul li a:hover{ color:#ffc455; text-decoration: none; transition: all 0.2s; }
.copyright{text-align: center; padding: 15px 0px 30px 0px;}

/*******/
@-webkit-keyframes balloon{
	0%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0);}
	50%{ -webkit-transform:translateY(-10px) rotate(5deg); transform:translateY(-10px) rotate(5deg); }
	100%{ -webkit-transform:translateY(0) rotate(0);  transform:translateY(0) rotate(0);}
}
@keyframes balloon{
	0%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0); }
	50%{ -webkit-transform:translateY(-10px) rotate(5deg); transform:translateY(-10px) rotate(5deg);}
	100%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0);}
}
@-webkit-keyframes balloon2{
	0%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0);}
	50%{ -webkit-transform:translateY(-10px) rotate(5deg); transform:translateY(-10px) rotate(5deg); }
	100%{ -webkit-transform:translateY(0) rotate(0);  transform:translateY(0) rotate(0);}
}
@keyframes balloon2{
	0%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0); }
	50%{ -webkit-transform:translateY(-10px) rotate(5deg); transform:translateY(-10px) rotate(5deg);}
	100%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0);}
}
@-webkit-keyframes balloon3{
	0%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0);}
	50%{ -webkit-transform:translateY(10px) rotate(-1deg); transform:translateY(20px) rotate(-1deg); }
	100%{ -webkit-transform:translateY(0) rotate(0);  transform:translateY(0) rotate(0);}
}
@keyframes balloon3{
	0%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0);}
	50%{ -webkit-transform:translateY(10px) rotate(-1deg); transform:translateY(20px) rotate(-1deg); }
	100%{ -webkit-transform:translateY(0) rotate(0);  transform:translateY(0) rotate(0);}
}
@-webkit-keyframes balloon4{
	0%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0); }
	50%{ -webkit-transform:translateY(-20px) rotate(7deg); transform:translateY(-20px) rotate(7deg);}
	100%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0);}
}
@keyframes balloon4{
	0%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0); }
	50%{ -webkit-transform:translateY(-20px) rotate(7deg); transform:translateY(-20px) rotate(7deg);}
	100%{ -webkit-transform:translateY(0) rotate(0); transform:translateY(0) rotate(0);}
}
@-webkit-keyframes balloon5{
	0%{ -webkit-transform:translateY(10px) rotate(0); transform:translateY(10px) rotate(0); }
	50%{ -webkit-transform:translateY(0px) rotate(0); transform:translateY(0px) rotate(0);}
	100%{ -webkit-transform:translateY(10px) rotate(0); transform:translateY(10px) rotate(0);}
}
@keyframes balloon5{
	0%{ -webkit-transform:translateY(10px) rotate(0); transform:translateY(10px) rotate(0); }
	50%{ -webkit-transform:translateY(0px) rotate(0); transform:translateY(0px) rotate(0);}
	100%{ -webkit-transform:translateY(10px) rotate(0); transform:translateY(10px) rotate(0);}
}

@keyframes example {
    0%   {margin-top: 0px;}
    25%  {margin-top: -3px;}
    50%  {margin-top: -6px;}
    100% {margin-top: -10px;}
}
@-webkit-keyframes swing{
    15% { -webkit-transform: translateX(5px); transform: translateX(5px);}
    30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 
    50% { -webkit-transform: translateX(3px); transform: translateX(3px);}
    65% { -webkit-transform: translateX(-3px); transform: translateX(-3px);}
    80% { -webkit-transform: translateX(2px); transform: translateX(2px);}
    100% {-webkit-transform: translateX(0); transform: translateX(0);}
}
@keyframes swing{
    15% { -webkit-transform: translateX(5px); transform: translateX(5px);}
    30% { -webkit-transform: translateX(-5px); transform: translateX(-5px);}
    50% { -webkit-transform: translateX(3px); transform: translateX(3px);}
    65% { -webkit-transform: translateX(-3px); transform: translateX(-3px);}
    80% { -webkit-transform: translateX(2px); transform: translateX(2px);}
    100%{ -webkit-transform: translateX(0); transform: translateX(0);}
}

@keyframes example_t {
    0%   {margin-top: 0px;}
    25%  {margin-top: 0px;}
    50%  {margin-top: 0px;}
    100% {margin-top: 0px;}
}


/******************/
@media all and (max-width:1366px) {
.right_icon{top: 10%; border-radius: 30px; width: 110px; padding: 20px 0px;}
.right_icon ul li{padding: 15px 0px; }
.pd-lspace { padding-left: 15px;}
.pd-lspace_1 { padding-right: 15px;}
}
@media all and (max-width:991px) {
.right_icon{ border-radius: 30px; padding: 20px 6px; width: 120px; right: 0px; top: 15%;}
.move_bo03 { top:60px; right: 4%; width: 220px; height: 251px;}
.move_bo04 { top:60px; left: 4%; width: 240px; height: 280px;}
.box{ margin: 5px auto;}	
.box:hover { border-top-left-radius: 4px; margin-top: -8px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; animation-name: example; animation-duration: 0.25s; border-bottom: 4px solid red; box-shadow: 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}	

}
@media all and (max-width: 768px) {
#grand_openning	{ background-size: cover;}
.main_banner{ background-size: 160% auto;}	
.right_icon{ border-radius: 30px; padding: 20px 6px; width: 100px; right: 0px; top: 5%;}
.move_bo03 { top:50px; right: -44px;}
.move_bo04 { top:60px; left: -10px;}	
.foot_icon ul li a{ padding: 0px 10px;}
.brand_event_area .col-xs-6{padding-bottom: 20px;}	
.box{ margin: 0px auto; box-shadow: 0 0px 10px rgba(0,0,0,0.12), 0 0px 2px rgba(0,0,0,0.24); transition: none!important;}	
.box:hover { margin-top: 0px; border-top-left-radius: 0px; margin-top:inherit!important; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; animation-name:none!important; animation-duration: none!important; border-bottom: none!important; box-shadow: 0 0px 10px rgba(0,0,0,0.12), 0 0px 2px rgba(0,0,0,0.24); transition: none!important;}
	
}
@media all and (max-width: 530px) {
.ss_gifts_area, .brand_only_area, .brand_event_area, .exclusive_price_area { margin: 10px 0px; }
.move_bo01 { left: 10%; width: 50px; height: 56px;}
.move_bo02 { width: 70px; height: 66px;}	
.move_bo03 { top:60px; right: 0px; width: 150px; height: 170px;}
.move_bo04 { top:100px; left: 0px; width: 150px; height: 175px;}
.foot_icon ul li { float: left; width: 100%; line-height: 30px; }
.main_banner{ padding-top: 30px; min-height: 465px;}
	.logo{ padding: 20px;}
	.main_title{ top: 120px;}
	.event_slogin{ top: 300px;}
}
@media all and (max-width: 414px) {
.move_bo03 { top:60px; right: 0px; width: 100px; height: 114px;}
.move_bo04 { top:100px; left: 0px; width: 120px; height: 140px;}
	.event_slogin{top: 265px;}
	.main_banner{ min-height: 400px;}
}