.mobile{
	display:none;
}
.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; */
        padding:10px 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; */
}
.first_mask.mobile{
	padding: 20px 0 20px 0;
}

/*mobile bottom button colour */
.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%); */
}
.animation_inner2{
	position:relative;
	/* overflow:hidden; */
}

/* mobile background colour */

.animation_inner2 .first_mask{
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	/* background: rgba(251, 187, 104, 1); */
	background: #DBEFEC;
        background: -webkit-linear-gradient(178deg, #DBEFEC 0%, #ffffff 100%);
        background: linear-gradient(178deg, #DBEFEC 0%, #ffffff 100%);
        height: 86.3vh;
}
.animation_inner2 .first_mask.aniset{
	transform:translateY(-88%);
	/* 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;
	box-sizing: border-box;
	width: 100%;
}
.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;
}
/*background mobile colour */
.animation_inner2 .first_mask img.fake{
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/*background:rgba(251, 187, 104, 0.5);*/
	background: #DBEFEC;
        background: -webkit-linear-gradient(178deg, #DBEFEC 0%, #ffffff 100%);
        background: linear-gradient(178deg, #DBEFEC 0%, #ffffff 100%);
        object-fit: contain;
}
t_mask.change_se
.animation_inner .first_mask_end{
	/* display:none; */
	text-align:center;
	border-top: 1px solid #fff;

	position:absolute;
	height: 15%;
        width: 980px;
	margin: 0 50px;
	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:85%;
	width: 980px;
	position: absolute;
	z-index: 10;
	padding: 0 50px;
        height: 15%;
	/*background-color: #A7D8B8;*/
	/* background-color: white; */
	display: flex;
        justify-content: center;
	/* transition: all 2.0s ease-in-out; */
	align-items: center;
}

.animation_inner .first_mask_end.aniset2::before{
	content: "";
	width: 980px;
	height: 1px;
	/*background-color: white; */
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* homepage button colour */
.animation_inner .first_mask_end a{
	height: 46px;
	display:inline-block;
	color:#fff;
	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;
	font-family: Microsoft JhengHei;
	letter-spacing: 0px;
        line-height: 44px;
	margin: 16px 10px 0;
}
.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;
}
.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:85%;
	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:#e98445;
}

.animation_inner .img_set{
	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; */
}
body{
	/* background: url('./1.1.4.png') no-repeat center center !important; 
	opacity: 0.5;
	margin: 0 0 0 20px !important;
        height: 1225px; */
}
body::before{
	position: fixed;
	content: '';
	width: 100%;
	height: 100%;
        background-position: center;
	background-repeat: repeat;
	background-image: url("../images/bg.webp");
        /*bottom: 162px; */
	z-index: 0;
	opacity: 0.7;
	/*left:-80px;*/
}

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

#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;
}
@media screen and (max-width: 1090px) {
	html:before{
		display:none;
	}
	#animation_container:before{
		display:none;
	}
	#btnSkip{
		top:auto !important;
	}
	/* #btnSkip a img{
		border: 1px solid #cccccc;
	} */
	.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: 39.9%;
                Transform: translate(0%, -50%);
	}
}