@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");
*{margin:0;
  padding:0;
  -webkit-box-sizing:border-box; /*Safari Chrome*/
  -moz-box-sizing:border-box; /*Firefox*/
  box-sizing:border-box; }
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
/* html ,body{ width: 100%; font-size:1rem; background-color: #f8f5f7; font-family: "Noto Sans TC",'Microsoft JhengHei', Helvetica, 'Maven Pro', 'Droid Sans','Myriad Pro', Verdana, Geneva, sans-serif; color: #3c2226; text-align: center; line-height: 2.1rem; font-weight: 600;letter-spacing:normal;}

div{ font-size:1rem; }
img{ width:100%; height:auto; font-size: 0;}

p{ text-align: left;  }
a{ width:100%; height:auto; display: block;}
a:hover{ cursor:pointer;}
	/* Track */
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
		-webkit-border-radius: 10px;
		border-radius: 10px;
		background: rgba(128, 24, 128, 0.8); 
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	}
	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(65, 3, 61, 0.4); 
	}

*{ font-size:1rem; /*chrome*/-webkit-box-sizing:border-box; /*firefox*/-moz-box-sizing:border-box; box-sizing:border-box;}
.clear{ height:0; clear:both; font-size:0rem!important;}
img{ width:100%; height:auto;font-size: 0;}
a{width:100%; /* height:100%; *//* display: block;*/}
a:hover{cursor:pointer;}
a{ z-index:100;}

/*像素比例尺*/
.ruler{ height:18px; background:url(../images/ruler.png) no-repeat left top; position: fixed; top:0; right:0; bottom:0; left:0; z-index:9999; display:none;}
.clear{ height:0; clear:both; font-size:0em!important;}
html,body{
	overflow-x: hidden;	background:	url(../images/bg.jpg) left top no-repeat;background-size: 100% auto;background-color: #5b0508;
	position:relative;	
}
#particles-js {
    width: 100%;
    background-size: 100% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
	top: 0;
	left: 0;
	pointer-events:none;
}
.main{
	width:100%;
	margin: 0 auto;
}
header{
	width: 100%;
	position: relative;

}
header .all{
	width: 100%;

	overflow: hidden;
}
header .pic_box{
	width: 100%;
	/* height: 1010px; */
	position:relative;
}

header .pic_box > img{
	pointer-events:none;
}

.char_right{
	width: 64%;
	max-width: 1224px;
	right:0;
	top: 0;
	position: absolute;
	animation:char_l 5s infinite;
}
.char_left{
	width: 64%;
	max-width: 1224px;
	left:0;
	top:0;
	position: absolute;
	animation:char_l 5s infinite;
}
header .pic_box .pic1{
	width: 1224px;
	left: 5vw;
    top: 0vw;
}
.uj_logo{
	display: block;
	width: 15.5%;
	max-width:298px ;
	margin: 0 auto;
	transition: all 0.5s;
	position: relative;
	padding-top: 13vw;
}
header .pic_box .uj_logo:hover{
	transform: translateY(-3px);
	-webkit-filter: saturate(120%)  brightness(108%);; /* Safari */
    filter: saturate(120%) brightness(108%);
}
.info_box {
width: 100%;position: relative;  padding-bottom: 14vw;
}
.info_bg{width: 100%;mix-blend-mode: screen;
	position: absolute;left: 0;top: 12vw;animation:light2 .5s infinite;}
header .info_box .pic2{
	position: absolute;
	width: 1432px;
	left: -160px;
    top: 0px;
	pointer-events:none;
}
header .info_box .pic2.p2_mobile{
	display: none;
}

.index_title{width:55%;margin: 0 auto;position: relative;}
header .info_box .header_title{
	position: relative;
	pointer-events:none;
	animation:light 2s infinite;
}
header .info_box .mall_rule{
	position: relative;
	display: block;
	width:10%;max-width: 150px;
margin: 0 auto;padding-top: 1vw;
}
header .info_box .mall_btn{
	position: absolute;
	display: block;
	width:13.48%;
	max-width: 259px;
	right: 15vw;
	top: 24vw;
	animation:btn_move 2s infinite;
}
header .info_box .mall_rule img,header .info_box .mall_btn img{
	transition: all 0.5s;
}
header .info_box .mall_rule:hover img,header .info_box .mall_btn:hover img{
	transform: translateY(-5px);
	-webkit-filter: saturate(120%)  brightness(108%);; /* Safari */
    filter: saturate(120%) brightness(108%);
}
header .info_box .date_icon{
	position: absolute;
	width:14%;max-width:272px;
	left: 16vw;
	top: 25vw;
	pointer-events:none;
}
header .cloud{
	width: 100%;
	position: absolute;
	left: 50%;
	top:10vw;
	transform: translateX(-50%);
	pointer-events:none;
}
.date {
	width:43%;max-width:830px;
	/* height: 137px; */
	background: url(../images/date_bg.png) no-repeat  top center;
	background-size:100% auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	margin: 0 auto;
}
.date img{
	width: 93%;
	max-width: 778px;
	padding: 0.5vw 0 1vw 0;
}
/* bage_box ---------------------------*/
.bage_box{
	width: 70%;max-width: 1000px;margin: 0 auto;
	margin-top: -11vw;
}
.bage_box .main{
	position: relative;
}
.main .list{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 30px;
	position: relative;
}
.main .list .item{
width: 25%;max-width: 281px; padding-bottom: 2vw;filter: drop-shadow(0px 15px 10px rgba(38, 23, 40, 0.4));
}
.main .list .item a.sold_out::after{
	display: block;
	content: '';
	width:100%;
	height:100%;
	background: url(../images/sold_out.png);
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;z-index: 10;transition: none;
}
.main .list .item a{
	transition: all 0.5s;display: block;position: relative;
}

.main .list .item:hover a:not(.sold_out){ 
    /* 只有當 a 元素不具有 .sold_out 類時，才套用這些效果 */
    transform: translateY(-6px); /* 向上移動 6px */
    -webkit-filter: saturate(120%)  brightness(108%); /* Safari */
    filter: saturate(120%) brightness(108%);
}
.bage_box .main .char_bottom_left{
	position: absolute;
	left: -300px;
	width: 362px;
	pointer-events:none;
	bottom: -60px;
	z-index: 5;
}
.bage_box .main .char_bottom_right{
	position: absolute;
	right: -324px;
	width: 431px;
	pointer-events:none;
	bottom: -50px;
	z-index: 5;
}
.bage_box .main .pic3{
	position: absolute;
	left: -250px;
	width: 444px;
	pointer-events:none;
	top: 125px;
}
.bage_box .main .pic4{
	position: absolute;
	right: -178px;
	width: 148px;
	pointer-events:none;
	top:30px;
}
.footer{width: 100%;position: relative; transition-delay: 3s;background-color: #151315;padding: 1.5vw;}
.cr{width:100%;margin: 0 auto;}
.cr ul{width: 100%;display:flex;display:-ms-flexbox;justify-content:space-between;-ms-flex-pack:justify;align-items: center;-ms-flex-align:center;}
.cr ul li:nth-of-type(1){margin: 0 auto;}
.cr ul li:nth-of-type(2){width: 35%;}
.cr_block{width: 100%;display:flex;display:-ms-flexbox;align-items: center;-ms-flex-align:center;}
.cr_logo01{max-width: 198px; display: inline-block;}
.cr_text{width:auto;display: inline-block;font-size: .8rem;line-height: 1.6;color: #fff;}
.cr_logo02{width: 70%;display: inline-block;}
.cr_logo03{width: 25%;display: inline-block;}


/* fancybox -------------------------------------------------*/
.fancybox-skin{
	background: none;
	padding: 0;
}
.fancybox-opened .fancybox-skin {
	padding: 0 !important;
    -webkit-box-shadow: 0 0px 0px rgb(0 0 0 / 0%);
    -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0px rgb(0 0 0 / 0%);
}
.fancybox-close {
    margin-top: -22px;
	margin-right: 40px;
    width:44px;
    height:44px;
    background: url(../images/close.png);
	transition: all 0.5s;
	transform: scale(0.9);
}
.fancybox-close:hover{
	transform: rotate(-90deg) scale(1);
	filter: contrast(150%)
}
.fancybox-title-float-wrap .child{
	display: none;
}
/* @media (max-width:1760px){
.bage_box{
	overflow: hidden;
}
.main{
	width:100%;
}
.main .list {
	width: 64%;
	margin: 0 auto;
	justify-content: space-between;
}
.main .list .item {
	flex: 0 0 32%;
	margin: 26px 0px;
}
.main .list .item a.sold_out::after{
	width:100%;
	height:100%;
}
.bage_box .main .char_bottom_left {
    left:0;
    width:20%;
	bottom: -3vw;
}
.bage_box .main .char_bottom_right {
    right:-3%;
    width:24%;
	bottom:-3vw;
}
.bage_box .main .pic3 {
    left:5%;
    width:20%;
    top: 125px;
}
.bage_box .main .pic4 {
    right:5%;
	width:8%;
    top: 30px;
}

header{
	height:60vw;
}
header .all{
	height:59vw;
}
header .pic_box{
	height:58vw;
}

header .pic_box .char_right_s{
	width:10%;
	right:13%;
    top:0;
}

header .pic_box .pic1{
	width:86%;
	left: 7.5%;
    top:1VW;
}
header .pic_box .uj_logo{
	width:16%;
	top:2vw;
	left:2%;
}
header .info_box {
	width:100%;	
	height:58vw;
}
header .info_box .pic2{
	width:83.5%;
	left:4%;
}
header .info_box .header_title{
	width:42%;
	margin-left: -21%;
	top:23vw;
}
header .info_box .date_icon{
	width:11%;
	left:24%;
    top:22.6vw;
}
header .info_box .mall_rule{
	width: 10%;
	height:3.5vw;
	left: 18%;
	top: 47vw;
}
header .info_box .mall_btn{
	width: 13.5%;
	right:23.7%;
    top:18.7vw;
}
.date{
	width: 85%;
	height: 8.8vw;
	margin-left: -42.5%;
}
.date img {
    width:68%;
    max-width: 68%;
    margin-top:1.6vw;
	
}
}
 */

@media (max-width:900px){

header .info_box .mall_rule:hover img,header .info_box .mall_btn:hover img{
	transform: translateY(0px);
	-webkit-filter: saturate(120%)  brightness(108%);; /* Safari */
    filter: saturate(120%) brightness(108%);
}
header .info_box .header_title{
	animation:none;
}
}

@media (max-width:700px){
	.main .list .item { width: 50%;}
	.uj_logo {width: 30.5%;}
	.index_title {width: 90%;}
	header .info_box .mall_btn {top: 18vw;}
	header .info_box .date_icon {top: 19vw;}
	.date {width: 70%;}
	.date img {padding: 1vw 0 1vw 0;}
	header .info_box .mall_rule {width: 18%;padding-top: 2vw;}
	.cr_logo01{max-width: 130px;}
}
/* .main .list {
	width: 88%;
	padding-bottom: 35vw;
}
.bage_box .main .char_bottom_left {
    left:18%;
    width:30%;
    bottom: -4.5vw;
}
.bage_box .main .char_bottom_right {
    right: 16%;
    width:36%;
    bottom: -4.5vw;
}
.main .list .item {
	flex: 0 0 48%;
	margin: 15px 0 0;
}
.bage_box .main .pic3,.bage_box .main .pic4{
	display: none;
}
.date {
    width: 94%;
    height:9.3vw;
    margin-left: -47%;
}
.date img {
    width: 76%;
    max-width: 76%;
    margin-top: 1.6vw;
}

header{
	height:117vw;
}
header .all{
	height:116vw;
	background: url(../images/mobile.jpg) center top;
	background-size: cover;
}
header .pic_box{
	height:115vw;
}
header .pic_box .char_right{
	display: none;
}
header .pic_box .char_right_s{
	display: none;
}
header .pic_box .char_left{
	display: none;
}
header .pic_box .pic1{
	display: none;
}
header .pic_box .uj_logo{
	width:20%;
	top:2.8vw;
	left:-6%;
}
header .pic_box .cloud_bg {
    top: 145px;
}
header .info_box {
	width:100%;	
	height:115vw;
}
header .info_box .pic2{
	width:83.5%;
	left:4%;
}
header .info_box .pic2.pc{
	display: none;
}
header .info_box .pic2.p2_mobile{
	display: block;
}
header .info_box .header_title{
	width:82%;
	margin-left: -41%;
	top:45vw;
}
header .info_box .date_icon{
	width:18%;
	left:2.5%;
    top:46vw;
}
header .info_box .mall_rule{
	width: 22%;
	left: 18%;
	top: 98vw;
}
header .info_box .mall_btn{
	width:22%;
	right:3%;
    top:41vw;
}
.date{
	width:90%;
	height:9.2vw;
	margin-left: -45%;
}
.date img {
    width:78%;
    max-width: 78%;
    margin-top:1.6vw;
}
} */
@media (max-width:560px){
footer .logo_box img:last-child{
	width: 40%;
}
footer .logo_box img:first-child{
	width: 32%;
}

}
@media (max-width:420px){
header .info_box .mall_rule{
	top: 97vw;
}
}
@media (max-width:370px){

header .info_box .mall_rule{
	top: 95.5vw;
}
}
@media (max-width:350px){
	header .info_box .mall_rule{
		top: 95vw;
	}
}
@media (max-width:290px){
	header .info_box .mall_rule{
		top: 91vw;
	}
}
@media (min-width:2000px){
	header .all{
	background: url(../images/bg.jpg) no-repeat  bottom center;
	background-size:100% auto;
	}
}