.mobile{
	display:none;
}
body::before{
	pointer-events: none;
	position: fixed;
	content: '';
	width: 100%;
	height: 100%;
        background-position: center;
	background-repeat: repeat;
	background-image: url("../images/bg.webp");
        /*bottom: 162px;*/
	opacity: 0.7;
}

/*
body::after{
	pointer-events: none;
	position: fixed;
	content: '';
	width: 958px;
	height: 667px;
	right: 0;
        top: 0px;
	z-index: -10;
	opacity: 0.7;
	background-repeat: repeat-y;
	background-image: url("../images/bg.webp");
}
*/

.b_line{
	padding: 2%;
        display: block;
        position: relative;
        box-sizing: border-box;
        width: 100%;
}

.animation_inner3{
	display:none;
	text-align:center;
	background:#fff;
	position:absolute;
	height: 30vh;
        width: 100%;
	z-index:5;    
	/* transform:translateY(-100%); */
	top:-25%;
	box-sizing: border-box;
        padding: 46px 0;
}
.animation_inner3.aniset{
	/* display:block; */
	/* top:75%; */
	top:40%;
}
.animation_inner3.aniset2{
	/* display:block; */
	/* top:75%; */
	top:70vh;
	transition: all 2.0s ease-in-out;
}
.animation_inner3 .first_mask_end a{
	display:inline-block;
	color:#fff;
	background:#00AA9E;
	line-height:50px;
	text-decoration: none;
	font-size:17px;
	font-family: Microsoft JhengHei;
	letter-spacing: 0px;
	box-sizing:border-box;
	border-radius:15px;
	text-align:center;
	width:180px;
        margin:0 15px;
        /* clip-path: polygon(5% 0, 95% 0, 100% 28%, 100% 78%, 95% 100%, 5% 100%, 0 76%, 0 28%); */
        transition: background-color 0.3s;
}
.animation_inner2{
	position:relative;
	/* overflow:hidden; */
}
.animation_inner2 .first_mask{
        background: #DBEFEC;
        background: -webkit-linear-gradient(178deg, #DBEFEC 0%, #ffffff 100%);
        background: linear-gradient(178deg, #DBEFEC 0%, #ffffff 100%);

	position:absolute;
	top:0;
	left:0;
	z-index:8;
	
	width: 100%;
	
        height: 608px;
}
.animation_inner2 .first_mask.aniset{
	transform:translateY(-150%);
        visibility: hidden;
	transition: all 1.5s ease-in-out;
}
.animation_inner2 .first_mask.change_setp{
	transform:translateY(-100%);
}

.animation_inner2 .first_mask.change_set{
	transition: all 1.5s ease-in-out;
	transform:translateY(0%);
	height:70vh;
	overflow:hidden;
}
.animation_inner2 .first_mask.change_set .title{
        top: 44%;
}

.animation_inner2 .first_mask .bar{
	position:absolute;
	bottom:0;
	left:0;
	z-index:1;
	width:100%;
	height:54px;
	padding-top:15px;
	overflow:hidden;
}
.animation_inner2 .first_mask .bar_inner img{
	/* width:1040px; */
	/* height:54px; */
}
.animation_inner2 .first_mask .left_bar{
	position:absolute;
	left:0;
	top:9px;
	z-index:2;
	/* width:91.4%; */
	width:0%;
	height:12px;
	background:#002f3e;
	transition: all 1.5s ease-in-out;
}
.animation_inner2 .first_mask .right_bar{
	position:absolute;
	right:0;
	top:0;
	z-index:1;
	/* width:19.3%; */
	width:0%;
	height:30px;
	background:#666666;
	transition: all 1.5s ease-in-out;
}
.animation_inner2 .first_mask .left_bar.aniset{
	width:82.4%;
}
.animation_inner2 .first_mask .right_bar.aniset{
	width:41%;
}

.animation_inner2 .first_mask .title{
	text-align:center;
	position:absolute;
	top:42%;
	left:50%;
	transform: translate(-50%, -50%);
        width: 100%;
}
.animation_inner2 .first_mask .title_1{
	width:57%;
	height:auto;
}
.animation_inner2 .first_mask .title_2{
	width:65%;
	height:auto;
}
.animation_inner2 .first_mask .link{
        display: block;
        margin: 39px auto;
        width: 75px;
        height: 2px;
        background: #87a5ae;
}


/* strange monile first background */
.animation_inner2 .first_mask img.fake{
	position:relative;
	top:0;
	left:0;
	width:100%;
	/* height:100%; */
        /* background: #DBEFEC;
        background: -webkit-linear-gradient(178deg, #DBEFEC 0%, #ffffff 100%);
        background: linear-gradient(178deg, #DBEFEC 0%, #ffffff 100%); */
	/*background:rgba(251, 187, 104, 0.5); */
	object-fit: contain;
}
.g3-wrapper{

}

.g3-wrapper .g3-ic{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}

.animation_inner .first_mask_end{
	/* display:none; */
	text-align:center;
	background:#fff;
	position:absolute;
	height: 25%;
        width: 100%;
	z-index:5;    
	/* transform:translateY(-100%); */
	top:-25%;
	box-sizing: border-box;
        padding: 42px 0;
}
.animation_inner .first_mask_end.aniset{
	/* display:block; */
	/* top:75%; */
	top:40%;
}
.animation_inner .first_mask_end.aniset2{
	/* display:block; */
	/* top:75%; */
	top:75%;
	transition: all 2.0s ease-in-out;
}
.skipbtn a{
	height: 46px;
	display:inline-block;
	color:#fff !important;
	background:#00AA9E;
	/* clip-path: polygon(5% 0, 95% 0, 100% 28%, 100% 78%, 95% 100%, 5% 100%, 0 76%, 0 28%); */
        transition: background-color 0.3s;
	line-height:50px;
	text-decoration: none;
	box-sizing:border-box;
	border-radius:15px;
	text-align:center;
	width:190px;
	font-size:17px !important;
	font-family: Microsoft JhengHei !important;
	letter-spacing: 0px;
        line-height: 44px;
	margin: 16px 10px 0;
}
.animation_inner .first_mask_end a{
	display:inline-block;
	color:#fff;
	background:#0a8499;
	line-height:50px;
	text-decoration: none;
        line-height: 44px;
	font-size:17px;
	font-family: Microsoft JhengHei;
	letter-spacing: 0px;
	box-sizing:border-box;
	border-radius:25px;
	text-align:center;
	width:180px;
	margin:0 15px;
}
.animation_inner .first_mask_end a[title=english]{
	font: normal normal normal 20px/48px Times New Roman;
	letter-spacing: 0px;
	color: #FFFFFF;
	text-transform: uppercase;
}
.animation_inner3 .first_mask_end a[title=english]{
	font: normal normal normal 20px/48px Times New Roman;
	letter-spacing: 0px;
	color: #FFFFFF;
	text-transform: uppercase;
	
}
#animation_container{
	max-width:1080px;
	max-height:608px;
	width:100%;
	height: 608px;
}
.animation_inner{
	position:relative;
	overflow:hidden;
	height: 608px;
	margin-top: 10px;
	
}
.animation_inner .first_mask{
	position:absolute;
	top:0;
	left:0;
	z-index:8;
}
.animation_inner .first_mask.aniset{
	transform:translateY(-100%);
	transition: all 1.5s ease-in-out;
}
.animation_inner .first_mask.change_setp{
	transform:translateY(-100%);
}

.animation_inner .first_mask.change_set{
	transition: all 1.5s ease-in-out;
	transform:translateY(0%);
	height:75%;
	overflow:hidden;
}
.animation_inner .first_mask.change_set .title{
        top: 46%;
}

.animation_inner .first_mask .bar{
	position:absolute;
	bottom:0;
	left:0;
	z-index:1;
	width:100%;
	height:54px;
	padding-top:15px;
	overflow:hidden;
}
.animation_inner .first_mask .bar_inner img{
	/* width:1040px; */
	/* height:54px; */
}
.animation_inner .first_mask .left_bar{
	position:absolute;
	left:0;
	top:9px;
	z-index:2;
	/* width:91.4%; */
	width:0%;
	height:12px;
	background:#002f3e;
	transition: all 1.5s ease-in-out;
}
.animation_inner .first_mask .right_bar{
	position:absolute;
	right:0;
	top:0;
	z-index:1;
	/* width:19.3%; */
	width:0%;
	height:30px;
	background:#666666;
	transition: all 1.5s ease-in-out;
}
.animation_inner .first_mask .left_bar.aniset{
	width:91.4%;
}
.animation_inner .first_mask .right_bar.aniset{
	width:19.3%;
}

.animation_inner .first_mask .title{
	text-align:center;
	position:absolute;
	top:48%;
	left:50%;
	transform: translate(-50%, -50%);
    width: 100%;
}
.animation_inner .first_mask .title_1{
	width:88%;
	height:auto;
}
.animation_inner .first_mask .title_2{
	width:44%;
	height:auto;
}
.animation_inner .first_mask .link{
	display:block;
	margin:29px auto;
	width:150px;
	height:1px;
	background:#87a5ae;
}

.animation_inner .first_mask img.fake{
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	background:#A7D8B8;
} 

/* frontpage photo frame   */
.animation_inner .img_set{
        top: 50%;
        transform: translateY(-50%);
	border: 20px solid #90D3CB;
	position:relative;
}
.animation_inner .img_set img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
}
.animation_inner .img_set img.fake{
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	opacity:0;
	z-index:3;
}

.animation_inner .img_set img.fake.change_set2{
	transition: all 1.5s ease-in-out;
	opacity:0.75;
	background:#fff;
}
.animation_inner .img_set .ani_box{
	z-index:2;
	position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}
.animation_inner .img_set .ani_box img{
	display:none;
}
.animation_inner .img_set .ani_box img.show{
	/* display:block; */
}
html:before{
	/* content:''; */
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../images/bg.jpg) repeat top center;
}
#animation_container:before{
	/* content:''; */
	position:absolute;
	top:-20px;
	left:-20px;
	background:#fff;
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.2);
}
#animation_container {
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
}
#btnSkip a img{
        position: relative;
        top: -11px;
        left: -21px;
}

.g1{
    user-select: none;
    position: absolute;
    left: 35.1%;
    top: 4.5%;
    width: 20.9%;
}
.g2{
        user-select: none;
        position: absolute;
        left: 66%;
        top: 23%;
        width: 20.9%;
}
.g3-wrapper{
        user-select: none;
        position: absolute;
        left: 52.5%;
        top: 25.3%;
        width: 14.4%;
}

  @media screen and (max-width: 1090px) {
	.g1{
	top: 3.5%;
	}
	.g2{
	top: 18%;
	}
	.g3-wrapper{
	top: 19.3%;
	}
  }

@media screen and (max-width: 1090px) {
	.m-fake{
		padding: 20px 20px 20px 20px;
		box-sizing: border-box;
	}
	.first_mask.mobile{
		/* max-height: 100%; */
	}
	body::before, body::after{
		content: none;
	}
	.ani_box img{
		/* min-width: 1080px; */
	}
	html:before{
		display:none;
	}
	#animation_container:before{
		display:none;
	}
	#btnSkip{
		top:auto !important;
	}
	#btnSkip a img{
		/* border: 1px solid #cccccc; */
		
		left: 0px;
		top: -40px;
	}
	.desktop{
		display:none;
	}
	.mobile{
		display:block;
	}
	
	.first_mask_end {
		display:none !important;
	}
	.animation_inner3 .first_mask_end {
		display:block !important;
                padding-bottom: 40px;
	}
	
	.animation_inner3 {
		display:block !important;
	}
	
	#btnSkip{
		bottom: 38px !important;
	}
	#animation_container {
		/*top: 55%;
                Transform: translate(0%, -50%);*/
	}
}

/*front page animation */
.person {
        position: absolute;
        bottom: 666px;
        left: 640px;
        width: 85px;
        height: auto;
        position: relative;
        animation: moveUpRight 2s ease-out forwards;
}

@keyframes moveUpRight {
        0% {
            transform: translate(0, 0);
            opacity: 1;
        }
        100% {
            transform: translate(70px, -20px); /* 向右100px，上100px */
            opacity: 1;
        }
}

.tick {
        position: absolute;
        bottom: 355px;
        left: 500px;
        width: 85px;
        height: auto;
        position: relative;
        animation: zoomInOut 2s ease-in-out forwards;
}

@keyframes zoomInOut {
        0% {
            transform: scale(1); /* 原始大小 */
        }
        50% {
            transform: scale(1.5); /* 放大1.5倍 */
        }
        100% {
            transform: scale(1); /* 回到原大小 */
        }
}

.swing {
        position: absolute;
        bottom: 420px;
        left: 820px;
        width: 180px;
        transform-origin: center top;
        animation: swingOnce 2s ease-in-out forwards;
}

@keyframes swingOnce {
        0%   { transform: rotate(0deg); }
        20%  { transform: rotate(20deg); }
        50%  { transform: rotate(-20deg); }
        80%  { transform: rotate(10deg); }
        100% { transform: rotate(0deg); }
}


.bilanciae_bottom {
        position: absolute;
        bottom: 330px;
        left: 853px;
        width: 115px;
        height: auto;
}


/* Define the animation */
@keyframes fadeInTop {
        0% {
                opacity: 0;
                transform: translateY(-150px); /* Start 50px to the left */
        }
        100% {
                opacity: 1;
                transform: translateY(0);    /* End at original center position */
        }
}

/* Apply it to your image */
.bluePuzzle {
        position: absolute;
        top: 60px;
        left: 730px;
        width: 230px;
        animation: fadeInTop 1.5s ease-out forwards; /* 1.5s duration */
}

/* Define the animation */
@keyframes fadeInBottomLeft {
        0% {
                opacity: 0;
                transform: translateX(100px); /* Start 50px to the left */
                transform: translateY(100px);
        }
        100% {
                opacity: 1;
                transform: translateX(0);    /* End at original center position */
                transform: translateY(0);
        }
}

/* Apply it to your image */
.yellowPuzzle {
        position: absolute;
        bottom: 200px;
        left: 520px;
        width: 230px;
        animation: fadeInBottomLeft 2.5s ease-out forwards; /* 1.5s duration */
}

/* Define the animation */
@keyframes fadeInBottomRight {
        0% {
            opacity: 0;
            transform: translateX(-50px); /* Start 50px to the left */
            transform: translateY(100px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);    /* End at original center position */
            transform: translateY(0);
        }
}

/* Apply it to your image */
.redPuzzle {
        position: absolute;
        bottom: 100px;
        left: 750px;
        width: 230px;
        animation: fadeInBottomRight 3s ease-out forwards; /* 1.5s duration */
}