@charset "utf-8"; /* CSS Document */
:root {
	--Primary: #FF5A19;
	--Bg_01: #F5F5F5;
	--Bg_02: #F3ECEB;
	--Natural_1000: #000000;
	--Natural_800: #4d4d4d;
	--Natural_0: #ffffff;
  }

html, body {height: auto;}
html {font-size: 62.5%;/*10px*/ overflow-x:hidden;}
body{ 
	color: var(--Natural_800);
	margin:0; 
	padding:0; 
	font-family:Arial, "微軟正黑體", "Microsoft JhengHei", DFKai-SB, sans-serif; 
	/*font-family:Arial, Helvetica, "Microsoft JhengHei", Sans-Serif; */
	font-size: 1.6rem; 
	line-height:1.5; 
	background-color: var(--Bg_01);
	background-image: none;
	overflow-x:hidden;
}
#all *,
#all *::after,
#all *::before {
    box-sizing: border-box;
}
/*font*/
h1 {width: 50%;}
h2 {
	font-family: 'Noto Sans TC', sans-serif; 
	font-weight: 500; 
	font-size: 6rem; 
	line-height: 80px; 
	color: var(--Natural_1000); 
	margin: 0 0 24px 0;
	/* border: 1px solid green; */
}
/* img{ max-width:100%;} */
/* hr{ border:0; height:0px; background:#333; overflow:hidden;} */
/* .iframe-video iframe{ position:absolute; top:0; left:0; width:100%; height:100%;} */
/* .iframe-video{ position:relative; padding-bottom:56.25%; padding-top:35px; height:0; overflow:hidden;} */
a:hover{ background-color:rgba(255, 255, 255, 0.00);}
p {line-height: 1.7; font-size: 2.5rem; font-weight: 300; max-width: 400px;}
.number {
	font-family: 'Noto Sans Gothic', sans-serif; 
	font-weight: 500; 
	font-size: 3.5rem; 
	/* margin-bottom: 28px; */
	color: var(--Natural_0);
	background: var(--Primary);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	/* text-align: center; */
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 28px;
	/* border: 1px solid green; */
}

#all .container { 
	margin: 0 auto; 
	max-width: 1400px; 
	/* height: 780px; */
	height: auto;
}

/*視覺圖*/
.deco {
    position: relative;
}

/*主視覺*/
.area_index{ 
	width: 100%; 
	height: auto;
	/* height: 800px; */
	/* position:relative; */
	z-index: 0;
	background: var(--Bg_01) url('images/img_area_index_bg.png') no-repeat center bottom / auto;
	/* background: var(--Bg_01) url('images/block_00.png') no-repeat center center / auto; */
	margin: 0 auto; 
	/* border: 1px solid #ccc; */
}
.area_index .main {
	max-width: 1440px; 
	height: auto; 
	/* height: 800px; */
	margin: 0 auto; 
	display: flex;
	justify-content: center;
	/* overflow: hidden; */
	/* border: 1px solid purple; */
}
.area_index .topimage {
	width: 50%;
	height: auto;
	position: relative;
	/* border: 1px solid green; */
}
.area_index .topimage img {
	/* width: 100%; */
	display: block; /*移除 div 底部留白*/
	max-width: 135%;
	position: absolute;
	bottom: 0;
	left: -15%;
}

.textArea { 
	width: calc(100% - 50%);
	/* padding-bottom: 8%; */
	padding: 10% 0 20% 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
    align-items: center;
	/* border: 1px solid orange; */
}
.textArea .title {
	display: flex;
    flex-direction: column;
	justify-content: center;
    align-items: center;
	margin-bottom: 24px;
	width: 90%;
	/* border: 1px solid gray; */
}
.title h1 { 
	font-size: 5rem;
	line-height:1.2; 
	/* width: 484px; */
	width: 75%;
	height: auto; 
	text-align: center;
	margin-bottom: 12px;
	/* border: 1px solid orange; */
}
.title h1 img {
	max-width: 100%;
	/* max-width: 484px; */
	height: auto;
}
.title .slogan {
    width: 100%;
	text-align: center; 
	padding: 0;
	margin: 0;
	/* border: 1px solid green; */
}
.title .slogan p { 
	font-size: 4rem; 
	/* letter-spacing: 0.26em;  */
	letter-spacing: 4px; 
	/* line-height: 150%;  */
	margin: 0;
	padding: 0;
	font-weight: 300;
	/* position: relative; */
	display: inline-block;
	text-shadow: 4px 4px 4px rgba(255,255,255,0.5);
}

.directLink {
	font-size: 0; 
	/* max-width: 320px; */
	width: 80%;
	/* -ms-transform: scale(1.04);
    -webkit-transform: scale(1.04);
    transform: scale(1.04); */
	margin: 0 auto;
	padding-left: 8%;
	display: flex;
	justify-content: center;
	align-items: center;
	/* border: 1px solid greenyellow; */
}
.directLink > div {
	display: inline-block; 
	/* width: 100%; */
	padding: 3px;
}
.directLink .stickerios {
	width: 100%;
}
.directLink .stickerandroid {
	width: 100%;
}
.directLink .qrcodeios, .directLink .qrcodeandroid {
	/* display: none; */
}
.directLink .qrcodeios {
	width: 55%;
}
.directLink .qrcodeandroid {
	width: 55%;
	/* background: var(--Natural_0); */
}
.directLink .qrcodeios a img {

}
.directLink .qrcodeandroid a img {

}
.section {
	/* height: 780px; */
	height: auto;
	position: relative;
}


/*part1*/
.part1 {
	/* background: var(--Bg_01) url('images/block_01.png') no-repeat center center / auto; */
	background: var(--Bg_01) url('images/img_section_part1_bg.png') no-repeat center center / auto;
	z-index: 1;
}

/* .bg_block {
	width: 100%;
	height: 460px;
	background: var(--Bg_02);
	opacity: 0.8;
	border-radius: 50px 0 0 50px;
	display: flex;
	flex-direction: row;
	justify-content: center;
} */

.part1 .container {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.part1 .container .deco {
	width: calc(100% - 50%);
	/* display: flex; */
	/* justify-content: flex-start; */
	/* align-items: center; */
	position: relative;
	/* border: 1px solid gray; */
}
.part1 .container .deco img {
	width: 143%;
	display: block; /*移除 div 底部留白*/
	position: absolute;
	/* top: 9.5%; */
	bottom: 19.5%;
	left: -30%;
}
.part1 .container .description {
	width: 50%;
	/* padding: 10% 0 0 5%; */
	padding: 10% 0 17% 5%;
	/* border: 1px solid orange; */
}
.part1 .container .description .description_block {
	height: 410px;
	/* border: 1px solid purple; */
}
.part1 .container .description p {
	max-width: 60%;
}


/*part2*/
.part2 {
	background: var(--Bg_02);
	/* background: var(--Bg_02) url('images/block_02.png') no-repeat center center / auto; */
}
.part2 .container {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.part2 .container .deco {
	width: 50%;
	display: flex;
	justify-content: flex-end;
	padding-top: 4%;
	position: relative;
	/* border: 1px solid gray; */
}
.part2 .container .deco img {
	width: 90%;
	display: block; /*移除 div 底部留白*/
	position: absolute;
	top: 8%;
	left: 25%;
}
.part2 .container .description {
	width: calc(100% - 50%);
	padding: 10% 0 17% 18%;
	/* border: 1px solid orange; */
}
.part2 .container .description .description_block {
	height: 410px;
	/* border: 1px solid purple; */
}


/*part3*/
.part3 {
	background: var(--Bg_01);
	/* background: var(--Bg_01) url('images/block_03.png') no-repeat center center / auto; */
	background: var(--Bg_01) url('images/img_section_part3_bg.png') no-repeat 100% 150% / auto;
	background-size: 40%;
}
.part3 .container {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.part3 .container .deco {
	width: calc(100% - 50%);
	display: flex;
	justify-content: flex-start;
	padding-top: 4%;
	position: relative;
	/* border: 1px solid gray; */
}
.part3 .container .deco img {
	width: 85%;
	display: block; /*移除 div 底部留白*/
	position: absolute;
	top: 5%;
	left: -17%;
}
.part3 .container .description {
	width: 50%;
	padding: 10% 0 17% 5%;
	/* border: 1px solid orange; */
}
.part3 .container .description .description_block {
	height: 410px;
	/* border: 1px solid purple; */
}
.part3 .container .description p {
	max-width: 58%;
}

/*part4*/
.part4 {
	background: var(--Bg_02);
	/* background: var(--Bg_02) url('images/block_04.png') no-repeat center center / auto; */
}
.part4 .container {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.part4 .container .deco {
	width: 50%;
	display: flex;
	justify-content: flex-end;
	position: relative;
	/* border: 1px solid gray; */
}
.part4 .container .deco img {
	width: 100%;
	display: block; /*移除 div 底部留白*/
	position: absolute;
	top: 0;
	left: 12%;
}
.part4 .container .description {
	width: calc(100% - 50%);
	padding: 10% 0 17% 18%;
	/* border: 1px solid orange; */
}
.part4 .container .description .description_block {
	height: 410px;
	/* border: 1px solid purple; */
}

/*foot*/
.lastpart {
	background: var(--Primarybg); 
	padding: 4rem 1.6rem 7rem; 
	position: relative;
	margin: 16px;
    border-radius: 20px;
}
.lastpart p {
	font-size: 3.2rem; 
	margin: 0.4em 0;
	display: flex;
    justify-content: center;
    align-items: flex-end;
	line-height: 100%;
}
.lastpart p i::before {
	content: "";
    display: block;
    width: 8px;
    height: 0;
    padding-top: 65%;
	margin: 0 8px;
    background: url(images/img_deco_comma.png) no-repeat center/contain;
}
.lastpart .applogo {width: 120px; margin: 0 auto;}
.lastpart .directLink {margin: 0 auto;}
.lastpart .directLink a img:first-child {display: none;}



/*下載qr*/
#osstickers td.qr{ width:13%;}
.cf:after{ /* fur Firefox, IE8, Opera, Safari, etc. */
 content:""; display:block; height:0; clear:both; visibility:hidden;}
* + html .cf{ /* for IE7 */
 display:inline-block;}
* html .cf{ /* for IE6 */
 height:1%;}