/* Common */
	:root {
		--color-body:  		#333;
	    --color-main-red:  	#cd0720; /* swire red */
	    --color-offwhite:  	#F7F7F7;
	    --color-light-gray: #ececec;

	  	--color-blue:  		  #1E39CE; /* section Planet*/
	  	--color-green: 		  #90B450; /* section Product*/
	    --color-red:  		  #FA5B50; /* section People*/
	    --color-light-blue:   #EFF3FB; /* speech bubble */
	    --color-light-green:  #F0F2DF;
	    --color-light-red:    #FBE3DC;
	    --color-mid-blue:     #BAC6F1; /* tab */
		--color-mid-green:    #F0F2DF;
		--color-mid-red:      #FBE3DC;
	    --color-hgl-blue:   #F1F5FD;  /* highlight bg */
	    --color-hgl-green:  #F0F2DF;  /* highlight bg */
	    --color-hgl-red:    #FBE3DC;  /* highlight bg */
		--font-m:	   20px;
	    --font-body:   18px;
	    --font-s:	   15px;
	    --font-xs:	   14px
	}


	button, input, *:focus 	{ outline:none; border:none;}
	* {box-sizing: border-box}
	
	body 			{ margin:0; padding:0; background:var(--color-light-gray);/* opacity:0;*/
					  font-family: 'Poppins Regular', 微軟正黑體, "Helvetica Neue","Helvetica","Arial",sans-serif;
					  font-weight:normal; color:#333; line-height:1.4;
					  -webkit-font-smoothing: antialiased;
  					 -moz-osx-font-smoothing: grayscale;}
	body.ready 		{ opacity:1; }
	/*body.font-a 	{ font-size:12px; }*/
	body.font-aa 	{ font-size:18px; }
	/*body.font-aaa 	{ font-size:16px; }*/

	div,header,section,ul,li,a,main { position:relative;}
	h1,h2,h3,h4,p 	{ margin:0; }
	a 				{ cursor:pointer; }

	header 			{ position:fixed; top:0; left:0; width:100%; height:110px; background:transparent; z-index:1000; }
	header img.logo { position:relative; width:195px; height:auto; top:20px; left:0; transition:all 0.6s ease-out;   }

	body#body.tc header img.logo,
	body#body.sc header img.logo { width:180px;}



	.logo-black { display: block; }
	.logo-white { display: none; }
	.lg-white .logo-black { display: none; }
	.lg-white .logo-white { display: block; }
	
	.smhead.lg-white .logo-black { display: block; }
	.smhead.lg-white .logo-white { display: none; }
	
	header nav 		{ position:absolute; left:332px; top:40%; color:#fff; text-transform:uppercase; /*transform:translate(0,-50%);*/ }
	header 			{ transition:all 1s ease-out; }
	main 			{ padding-top:180px; }
	header>.pg-container { height:110px; }

	header .nav-right { position:absolute; /*top:50%;*/ right:50px }
	
	[onclick] { cursor: pointer; }


	body.smhead header 			{ height:110px; background-color:#fff; box-shadow: 0px 3px 6px #00000029; }     
	body.smhead main 			{ padding-top:100px; }
	
	.clearfix::after { content: ""; clear: both; display: table;}

	/* Go to Top */
	.gotop,
    .gotop span   	{ width:45px; height:45px; }

    .gotop.show 	{ opacity:1; }           
	.gotop  		{ position:fixed; bottom:120px; right:20px; z-index:1500; opacity:0;
					display:block; text-align:center; text-decoration:none; color: var(--color-main-red); cursor:pointer;
			              -webkit-transition: 1s;
			                 -moz-transition: 1s;
			              	      transition: 1s;}
	.gotop:hover	{ color: #fff;}
	.gotop span     { display:block; margin-bottom:0px; background:#fff; border-radius: 50%; box-shadow: 3px 6px 8px #00000029;
		                  -webkit-transition: 1s;
		                     -moz-transition: 1s;
		                          transition: 1s;}
	.gotop:hover span {  background: var(--color-main-red); }
	.gotop i 		{ font-size:18px; line-height:normal; margin-top:12px; }


	/* Custom Page Layout */
	.pg-container 		{ max-width:2080px; margin:0 auto; transition:all 0.3s ease-out; position:relative;}
	.pg-padding-l-r 	{ padding-left:50px; padding-right:50px }
	
	
	
	.section-padding 	{ padding:50px 10%; } /* for what we're doing / tab content padding */
	
	.ani-wrp{
		overflow: hidden;
	}
	.abs-blk{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;
		background-position: 80% top;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.abs-blk.abs-bottom{
		background-position: bottom center;
	}
	.section-all{
		width: 100%;
		height: 100vh;
	}
	.section-all .pd-wrp{
		width: 100%;
		height: 100%;
	}
	.section-blk {
	    width: 100%;
		height: 100%;
		margin: 0;
		display: flex;
		justify-content: flex-end;
	}
	.section-blk.al-left {
		justify-content: flex-start;
	}
	.blk-wrp{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	/* .blk-inner{
		width: 100%;
	} */
	.al-left .blk-wrp{
		align-items: flex-start;
	}
	.blk-wrp.aleft{
		align-items: flex-start;
	}
	.blk-intro{
		margin-top: auto;
		margin-bottom: auto;
	}
	.blk-intro .txt{
		font-size: 30px;
		line-height: 1.5;
		font-family: 'Poppins Medium', 微軟正黑體;
		font-weight: normal;
		text-align: right;
	}
	.al-left .blk-intro .txt{
		text-align: left;
	}
	.blk-title .txt-title{
		font-size: 200px;
		line-height: 1.2;
		font-family: 'Poppins Light', 微軟正黑體;
		font-weight: normal;
		text-align: right;
		margin-bottom: 50px;
	}
	.txt-white{
		color: var(--color-offwhite);
	}
	.txt-blue{
		color: var(--color-blue);
	}
	.txt-green{
		color: var(--color-green);
	}
	.txt-red{
	 color: var(--color-red);
	}
	.page-opt{
		position: fixed;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.page-opt .opt-wrp{
		padding: 20px;
		box-shadow: 3px 8px 10px #00000029;
		background-color: #fff;
		border-radius: 0px 15px 15px 0px;
		min-height: 150px;
		display: flex;
	}
	.page-opt .opt-wrp .fa-wrp{
		align-self: center;
	}
	.page-opt .opt-wrp .fa{
		color: var(--color-main-red);
	}
	.page-opt .opt-wrp .fa-wrp .f-r,
	.page-opt:hover .opt-wrp .fa-wrp .f-l{
		display: block;
	}
	.page-opt .opt-wrp .fa-wrp .f-l,
	.page-opt:hover .opt-wrp .fa-wrp .f-r{
		display: none;
	}
	.page-opt .opts{
		opacity: 0;
		max-height: 150px;
		max-width: 0;
		overflow: hidden;
		transition: opacity 0.2s, max-width 0.2s, max-height 0.2s;
	}
	.page-opt:hover .opts{
		opacity: 1;
		max-width: 300px;
		max-height: 400px;
		transition: opacity 0.5s, max-width 0.5s, max-height 0.5s;
	}
	.page-opt .opt{
		padding: 25px 20px;
		text-align: center;
		font-family: 'Poppins Bold', 微軟正黑體;
	}
	.page-opt .opt.opt-planet{
		color: var(--color-blue);
	}
	
	.page-opt .opt.opt-product{
		color: var(--color-green);
	}
	
	.page-opt .opt.opt-people{
		color: var(--color-red);
	}
	
	.page-opt .opt.opt-planet:hover{
		color: var(--color-mid-blue);
	}
	
	.page-opt .opt.opt-product:hover{
		color: var(--color-mid-green);
	}
	
	.page-opt .opt.opt-people:hover{
		color: var(--color-mid-red);
	}
	
	.sl-inner{
		width: 100%;
		overflow: hidden;
	}
	.fade-left{
		transform: translateX(-25vw);
		opacity: 0;
	}
	.sl-to-eff.active .fade-left{
		transform: translateX(0%);
		opacity: 1;
		transition: transform 1.5s, opacity 1.5s;
	}
	.fade-right{
		transform: translateX(25vw);
		opacity: 0;
	}
	.sl-to-eff.active .fade-right{
		transform: translateX(0%);
		opacity: 1;
		transition: transform 1.5s, opacity 1.5s;
	}
	.fade-top{
		transform: translateY(-50vh);
		opacity: 0;
	}
	.sl-to-eff.active .fade-top{
		transform: translateX(0%);
		opacity: 1;
		transition: transform 1.5s, opacity 1.5s;
	}
	.fade-top-right{
		transform: translate(25vw, -50vh);
		opacity: 0;
	}
	.sl-to-eff.active .fade-top-right{
		transform: translate(0%, 0%);
		opacity: 1;
		transition: transform 1.5s, opacity 1.5s;
	}
	.fade-bottom{
		transform: translateY(50vh);
		opacity: 0;
	}
	.sl-to-eff.active .fade-bottom{
		transform: translateY(0%);
		opacity: 1;
		transition: transform 1.5s, opacity 1.5s;
	}
	.fade{
		opacity: 0;
	}
	.sl-to-eff.active .fade{
		opacity: 1;
		transition: opacity 2s;
	}
	.img-blk-after{
	    position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	
	.sl-scale{
		transform: scale(0.7);
	}

	.sl-to-eff.active .sl-scale{
		transform: scale(1);
		transition: transform 0.5s;
	}
	
	.sl-scale-bts{
		transform: scale(1.8);
	}

	.sl-to-eff.active .sl-scale-bts{
		transform: scale(1);
		transition: transform 1.5s;
	}
	
	.cover-padding{
		padding: 50px 10%;
	}

	.blk-m { display: none; }
	
	/* info graphic */
	.info-graphic{
		max-width: 1475px;
		width: 100%;
		margin: 0 auto;
	}
	.graphic-img{
		display: block;
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
	.info-graphic-title {
		font-size: 30px;
		line-height: 1.4;
		margin-bottom:30px;
		margin-left: auto;
		margin-right: auto;
		max-width: 1200px;
		text-align: center;
	}
	.info-graphic .btn-download-wrp { text-align: center;}

	.info-graphic-title, .info-graphic .btn-download-wrp  { margin-bottom:30px;}

	.info-graphic .btn-download:hover{
		color: var(--color-body);
		background-color: var(--color-offwhite);
		border-color: var(--color-main-red);
	}
	.info-graphic .btn-download{
		color: var(--color-offwhite);
		background-color: var(--color-main-red);
	}

	.info-graphic-wrapper 	{ margin:0 auto; padding:80px 0; }
	.info-graphic-bg 		{ width:70%;  margin:0 auto;}

	/* ==========================================================================
	    Media Style: no dropdown, section flowdown, sslider flowdown
	============================================================================= */
	@media only screen and (max-width:2000px) {
	.cover-padding 			{ padding: 50px 5%;}
	.blk-title .txt-title 	{ font-size: 150px;}
	}
	
	@media only screen and (max-width:1500px) {
	.blk-title .txt-title 	{font-size: 120px; }
	}
	
	
	@media only screen and (max-width:1280px) {
	.pg-padding-l-r 	{ padding-left:30px; padding-right:30px }
	header .nav-right   { right:30px }
	header img.logo 		     { width:160px; height:auto;}
	body#body.tc header img.logo,
	body#body.sc header img.logo { width:140px; height:auto;}


	header, body.smhead header { height:90px }
	
	.blk-intro .txt 		{ font-size: 24px;  }
	.blk-title .txt-title 	{ font-size: 108px; }
	.info-graphic-title  	{ font-size: 22px;  }
	}
	
	
	@media only screen and (max-width:1150px) {
	.blk-intro .txt 		{ font-size: 20px; }
	.blk-title .txt-title 	{ font-size: 96px; }
	}

	@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
		
	.pg-padding-l-r 	{ padding-left:20px; padding-right:20px }
	.cover-padding{
		padding: 70px 20px 0;
	}
	.page-opt{ display: none; }

	.blk-m { display: block; }
	.blk-d { display: none; }
	.blk-wrp { align-items: flex-start; }
	.blk-intro { margin-bottom: 30px; }
	.blk-intro .txt,
	.blk-title .txt-title{ text-align: left; }
	
	.blk-intro .txt { font-size: 16px; }
	.blk-title .txt-title {  font-size: 36px; }
	
	.blk-title .txt-title{ margin-bottom: calc(10vh + 20px); }
	
	.section-blk {
		justify-content: flex-start;
	}
	
	.info-graphic-title { font-size: 18px;}
	}

	@media only screen and (max-width:840px) {
		
	.pg-padding-l-r 	{ padding-left:20px; padding-right:20px }
	.cover-padding		{ padding: 70px 20px 0;}
	.page-opt{ display: none; }

	.blk-m { display: block; }
	.blk-d { display: none; }
	.blk-wrp { align-items: flex-start; }
	.blk-intro { margin-bottom: 30px; }
	.blk-intro .txt,
	.blk-title .txt-title{ text-align: left; }
	
	.blk-intro .txt 		{ font-size: 16px; }
	.inside.tc .blk-intro .txt { font-size: 20px; }
	.blk-title .txt-title 	{  font-size: 36px; }
	.inside.tc .blk-title .txt-title { font-size: 48px; }
	.blk-title .txt-title 	{ margin-bottom: calc(10vh + 20px); }
	
	.section-blk 			{ justify-content: flex-start;}
	
	.info-graphic-title { font-size: 18px;}
	#footer-graphic  .section-padding {  padding:30px}
	.info-graphic-bg { width:90%; }
	.graphic-img 	 { width:100%;}
	}
	
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
	.section-padding 		{ padding:50px 30px; }		
	}
	
	@media only screen and (max-width:767px) {
	header img.logo 		   	{ width:120px; height:auto; top:15px}
	body#body.tc header img.logo,
	body#body.sc header img.logo { width:120px; height:auto; top:11px}


	header, body.smhead header 	{ height:70px }

	}