@import url("reset.css");
*{ -webkit-box-sizing:border-box;
	box-sizing:border-box;}

html{font-family:Arial, sans-serif, "微軟正黑體";}
.cw{color: white;}
.cb{color: #00337b;} /*原 #004098*/
.cy{color: rgb(254, 208, 24);}
.cp{color: rgb(255, 39, 133);}
.tshadow{ text-shadow: rgba(19,19,19,1) 5px 5px 5px;}
.fw-4{font-weight: 400;}
.fw-5{font-weight: 500;}
.fw-7{font-weight: 700;}
.fw-9{font-weight: 900;}


/* --電腦版型------------電腦版型------------電腦版型------------- */

@media screen and (min-width: 1025px) {
html{font-size: 18px;background-color: #FFFFFF; background-image:url(images/shareholder_head.svg); background-position: top center; background-size: 100% auto; background-repeat: no-repeat;}	
body{width: 100vw;height: auto;
		background: -moz-linear-gradient(top, rgba(198,198,198,0) 0%, rgba(198,198,198,0) 14%, rgba(198,198,198,1) 70%, rgba(198,198,198,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(198,198,198,0) 0%,rgba(198,198,198,0) 14%,rgba(198,198,198,1) 70%,rgba(198,198,198,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(198,198,198,0) 0%,rgba(198,198,198,0) 14%,rgba(198,198,198,1) 70%,rgba(198,198,198,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c6c6c6', endColorstr='#c6c6c6',GradientType=0 ); /* IE6-9 */
		}
	h1{font-size: 3em;}
	h2{font-size: 2em;}
	h3{font-size: 1.8em;}
	p{font-size: 1.2em;}

	header{ width: 96%; max-width: 1440px; height: 250px; margin: 0 auto; padding: 3%; position: relative;}
	.titlebox{width: 100%; padding-top: 8vh; height: 80px; margin: 0 atuo; text-align: center; }
	.titlebox img{ display:inline-block; width: auto; height:100px;vertical-align: middle;}
	.titlebox h1{ display:inline-block; letter-spacing: 0.5px; line-height: 0.1em;vertical-align: middle;font-weight: bold;}
	.A-day{ position: absolute; right: 5%; background-color: lightblue; color: rgba(0,0,0,0.7);font-size: 0.8em; padding: 2px 7px; border-radius: 10px;}
	article{ width: 98%; max-width: 1440px; min-height: 80%; margin: 0 auto; padding: 2% 2% 5% 2%;  /*background-color: rgba(255,255,255,0.2);*/}


	section{ display:inline-flex;flex-flow: row wrap;  justify-content: flex-start; align-items:stretch; align-content: flex-start; width: 49%; min-height: 470px; overflow: initial; margin: 0px auto; padding: 6px; border-radius: 15px; background: rgba(255,255,255,0.7); }
	section h3{ width: 98%; margin: 0 auto; height: auto; max-height: 60px; padding: 5px 10px; background-color: #002f71; border-radius: 10px; color: rgba(255, 255, 255, 1); font-weight: 500; text-align: center;}
	section h3 span{ font-size: 70%; letter-spacing: 1px;}
	section:nth-child(2)>h3{background-color: #004098;}
	.open{display: block;float: right; margin-bottom: 10px; display: block;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px; background-color: rgba(255, 255, 255, 1); color: teal; font-size: 60%; text-decoration: none; padding: 1px 5px;}
	.open:hover{ color: rgb(0, 75, 104);}
	iframe{ width: 100%; height: 68vh;}

	.scale{ padding: 3% 5%;}
	.scale, .scale p{ font-size: 1.1em; line-height: 1.6em;}
	.scale>ul>li{ list-style:none; display: block; position: relative; margin: 5px 0 20px 40px; }
	.scale>ul>li::before{ position: absolute; left: -40px;  }
	.scale>ul>li:nth-child(1)::before{ content: "一、"; }
	.scale>ul>li:nth-child(2)::before{ content: "二、";  }
	.scale>ul>li>ol>{ margin: 5px 0 20px 10px;}
	.scale>ul>li>ol>li{ list-style:decimal;list-style-position:outside; }

	footer{ width: 100%; height: 100px; background-color: rgba(0, 0, 0, 0.8); padding: 8px;}
	footer>iframe{height: 100px;}
	
	.img_wrap{width: 99%;}
	.img_wrap img{width: 100%; height: auto;}

	.hp_player{ display: block; width: 60%; background: rgba(0, 0, 0, 0.2);height: fit-content; position: relative; margin: 1% auto;}
	.hp_player .scale_v{width: 100%;padding-bottom: 56.25%;height: 0;position: relative;}
	.hp_player .v-cover{width: 100%;padding-bottom: 56.25%;height: 0;position: absolute;top:0; left:0; z-index: 99999; background: url(../images/v_port_img.jpg) center center no-repeat; background-size: cover; }
	.hp_player .scale_v #youtube, .hp_player .scale #f4gtv{position: absolute;
  top: 0; left: 0; width: 100%; min-width: 800px; max-width: 1300px;
  height: 100%; min-height: 450px; max-height: 732px; border: 0px solid #ffffff;} 

}
/* 以下為 平板電腦－－－－－－－－－－－－－－－－－－以下為 平板電腦－－－－－－－－－－－－－－－－－－以下為 平板電腦－－－－－－－－－－－－－－－－－－ */ 
@media screen and (min-width: 577px) and (max-width: 1024px) {
	html{font-size: 18px;background-color: #FFFFFF; background-image:url(images/shareholder_head.svg); background-position: top center; background-size: 100% auto; background-repeat: no-repeat;}	
	body{width: 100vw;height: auto;
			background: -moz-linear-gradient(top, rgba(198,198,198,0) 0%, rgba(198,198,198,0) 10%, rgba(198,198,198,1) 70%, rgba(198,198,198,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(198,198,198,0) 0%,rgba(198,198,198,0) 10%,rgba(198,198,198,1) 70%,rgba(198,198,198,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(198,198,198,0) 0%,rgba(198,198,198,0) 10%,rgba(198,198,198,1) 70%,rgba(198,198,198,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c6c6c6', endColorstr='#c6c6c6',GradientType=0 ); /* IE6-9 */
	}
		h1{font-size: 2.6em;}
		h2{font-size: 2em;}
		h3{font-size: 1.8em;}
		p{font-size: 1.2em;}
	
		header{ width: 98%; max-width: 1024px; height: 220px; margin: 0 auto; padding: 3%; position: relative;}
		.titlebox{width: 100%; padding-top: 5vh; height: 80px; margin: 0 atuo; text-align: center; }
		.titlebox img{ display:inline-block; width: auto; height:100px;vertical-align: middle;}
		.titlebox h1{ display:inline-block; letter-spacing: 0.5px; line-height: 1em;vertical-align: middle;font-weight: bold;}
		.A-day{ position: absolute; right: 5%; background-color: lightblue; color: rgba(0,0,0,0.7);font-size: 0.8em; padding: 2px 7px; border-radius: 10px;clear: right;}
		article{ width: 100%; max-width: 1024px; min-height: 80%; margin: 0 auto; padding: 2% 2% 5% 2%;  /*background-color: rgba(255,255,255,0.2);*/}
	
	
		section{ display:inline-block; width: 49%; min-height: 470px; overflow: initial; margin: 0px auto; padding: 6px; border-radius: 15px; background: rgba(255,255,255,0.7); vertical-align: top; }
		section h3{ width: 98%; margin: 0 auto; padding: 5px 10px; background-color: #002f71; border-radius: 10px; color: rgba(255, 255, 255, 1); font-weight: 500;}
		section h3 span{ font-size: 70%; letter-spacing: 1px;}
		section:nth-child(2)>h3{background-color: #004098;}
		.open{display: block; float: right; margin-bottom: 10px; display: block;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px; background-color: rgba(255, 255, 255, 1); color: teal; font-size: 60%; text-decoration: none; padding: 1px 5px;}
		.open:hover{ color: rgb(0, 75, 104);}
		iframe{ width: 100%; height: 68vh;}
	
		footer{ width: 100%;height: 100px; background-color: rgba(0, 0, 0, 0.8); padding: 8px;}
		footer>iframe{height: 100px;}
		.img_wrap{width: 99%;}
		.img_wrap img{width: 100%; height: auto;}
		
		.hp_player{display: block; width: 80%; background: rgba(0, 0, 0, 0.2);height: fit-content;position: relative; margin: 2% auto;}
		.hp_player .scale_v{width: 100%;/*padding-bottom: 56.25%;*/padding-bottom: 56.25%;height: 0;position: relative;}
		.hp_player .v-cover{width: 100%;padding-bottom: 56.25%;height: 0;position: absolute;top:0; left:0; z-index: 99999; background: url(../images/v_port_img.jpg) center center no-repeat; background-size: cover; }
		.hp_player .scale_v #youtube, .hp_player .scale #f4gtv{position: absolute;
		top: 0;
		left: 0;
		width: 100%; min-width: 800px; max-width: 1300px;
		height: 100%; min-height: 450px; max-height: 732px;
		border: 0px solid #ffffff;} 

}

/* --手機版型--------------手機版型--------------手機版型-------------手機版型-------------- */
@media screen and (min-width: 320px) and (max-width: 736px) {
html{font-size: 18px;background-color: #FFFFFF; background-image:url(images/shareholder_head.svg); background-position: top center; background-size: 100% auto; background-repeat: no-repeat;}	
body{width: 100vw;height: auto;
		background: -moz-linear-gradient(top, rgba(198,198,198,0) 0%, rgba(198,198,198,0) 14%, rgba(198,198,198,1) 70%, rgba(198,198,198,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(198,198,198,0) 0%,rgba(198,198,198,0) 14%,rgba(198,198,198,1) 70%,rgba(198,198,198,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(198,198,198,0) 0%,rgba(198,198,198,0) 14%,rgba(198,198,198,1) 70%,rgba(198,198,198,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c6c6c6', endColorstr='#c6c6c6',GradientType=0 ); /* IE6-9 */
		}
	h1{font-size: 2em;}
	h2{font-size: 1.8em;}
	h3{font-size: 1.5em;}
	p{font-size: 1em;}

	header{ width: 98%; max-width: 736px; height: 150px; margin: 0 auto; padding: 3%; position: relative;}
	.titlebox{width: 100%; padding-top: 2vh; height: 80px; margin: 0 atuo; text-align: center; }
	.titlebox img{ display:inline-block; width: auto; height:65px;vertical-align: middle;}
	.titlebox h1{ display:inline-block; letter-spacing: 0.5px; line-height: 1.2em;vertical-align: middle;font-weight: bold;}
	.A-day{ position:static;width: 60%; margin: 5px auto; background-color: lightblue; color: rgba(0,0,0,0.7);font-size: 0.8em; padding: 2px 7px; border-radius: 10px;}
	article{ width: 100%; max-width: 736px; min-height: 80%; margin: 0 auto; padding: 2% 2% 5% 2%;  /*background-color: rgba(255,255,255,0.2);*/}


	section{ display:block; width: 100%; min-height: 470px; margin: 2px auto; padding: 0px; border-radius: 0px; background: rgba(255,255,255,0.7); }
	section h3{ width: 100%;height: auto;  margin: 0 auto; padding: 5px 10px; background-color: #002f71; border-radius: 0px; color: rgba(255, 255, 255, 1); font-weight: 500;}
	section h3 span{ font-size: 70%; letter-spacing: 1px;}
	section:nth-child(2)>h3{background-color: #004098;}
	.open{ display: none; float: right; margin-bottom: 10px; display: block;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px; background-color: rgba(255, 255, 255, 1); color: teal; font-size: 60%; text-decoration: none; padding: 1px 5px;}
	.open:hover{ color: rgb(0, 75, 104);}
	iframe{ width: 100%; height: 500px;}

	.scale{ padding: 5% 3%;}
	.scale, .scale p{ font-size: 1em; line-height: 1.6em;}
	.scale>ul>li{ list-style:none; display: block; position: relative; margin: 5px 0 20px 40px; }
	.scale>ul>li::before{ position: absolute; left: -40px;  }
	.scale>ul>li:nth-child(1)::before{ content: "一、"; }
	.scale>ul>li:nth-child(2)::before{ content: "二、";  }
	.scale>ul>li>ol>{ margin: 5px 0 20px 10px;}
	.scale>ul>li>ol>li{ list-style:decimal;list-style-position:outside; }

	footer{ width: 100%;height: 150px; background-color: rgba(0, 0, 0, 0.8); padding: 8px;}
	footer>iframe{height: 150px;}
	.img_wrap{width: 100%;}
	.img_wrap img{width: 100%; height: auto;}

	.hp_player{ display: block; width: 100%; background: rgba(0, 0, 0, 0.2);height: fit-content;position: relative; margin: 2% auto;}
    .hp_player .scale_v{width: 100%;padding-bottom: 56.25%;height: 0;position: relative;}
    .hp_player .v-cover{width: 100%;padding-bottom: 56.25%;height: 0;position: absolute;top:0; left:0; z-index: 99999; background: url(../images/v_port_img.jpg) center center no-repeat; background-size: cover; }
    .hp_player .scale_v #youtube, .hp_player .scale #f4gtv{position: absolute;
	top: 0;
	left: 0;
	width: 100%; min-width: 320px; max-width: 766px;
	height: 100%; min-height: 180px; max-height: 431px;
	border: 0px solid #ffffff;}
	
}