@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

* {
	border: 0px #000 solid;
	box-sizing: border-box;
	position: relative;
}
html,body{
	/*background: #fff;*/
	font-family: 'Noto Sans TC', sans-serif, 微軟正黑體 ;
	/*overflow-x: hidden;*/

}
h2{text-align: center;font-size: 0.6em;}
p{
	line-height: 2em;
	font-size: 14px;
}
.pop{
	z-index: 999999;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.7);
	position: fixed;
}
.pop_pic1,.pop_pic2{
	position: absolute;
}
.pop_pic1{width: 30%;left:1em;bottom: 2em;}
.pop_pic2{width: 30%;right:0em;bottom: 1em;}
.pop_close{
	width: 40px;
	height: 40px;
	position: absolute;
	z-index: 9999999;
	right: 1em;
	top:1em;
}
.pop_close img{width: 100%;}
.pop_info{
	background-image: url("../images/pop_bg.svg");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100vw;
	height: 90vw;
	margin: 25% 0;
	border-radius: 30px;
	padding: 3em 1em;
}
.pop_info h1{
	color: #fff;
	text-align: center;
	font-size:  5vw;
}
.pop_video{
	width: 80%;
	height: 50vw;
	margin: 0 10%;
}
.pop_video iframe{
	width: 100%;
	height: 100%;
}
.download,.up,.nav_phone{
	width: 50px;
	height: 50px;
	background: #db0011;
	z-index: 100;
	border-radius: 100%;
	right: 5px;
}
.download{position: fixed;bottom: 120px;display: none;}
.download img{width: 90%;top:1px;left:3px;}
.up{position: fixed;bottom: 60px;display: none;}
.up img{width: 90%;top:1px;left:2px;}

.title{
	text-align: center;
	font-weight: 600;
	letter-spacing: 0.2em;
	font-size: 1.5em;
	padding: 0.6em 0;
}
.title-wing{
	height: 1em;
}
.btn-outline-r{
	background: #fff;
	color: #db0011;
	border: 1px #db0011 solid;
	border-radius: 2em;
	padding: 0.5em 3.5em;
	font-size: 1.2em;
	font-weight: 600;
}
.btn-outline-r:hover{
	background: #db0011;
	color: #fff;
}

/* logo和FB和line */
.bar {
 	height: 50px;
 	background: #fff;
	padding: 10px 5px;
	z-index: 10;
}
.bar .bar-logo{
	height: 19px;
}
.social{
	position: absolute;
	right: 5px;
	top:35px;
	z-index: 100;
	display: none;
}
.bar-social{
	height: 30px;	
}

/* 開門大圖 */
header{
	height: 500px;
	background-image: url("../images/open_phone.jpg");
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
	color: #fff;
	font-weight: 400;
	z-index: 1;
	top:0px;
}
header .headertitle{
	width: 75vw;
	position: absolute;
	top: 20px;
	right: 20px;
}
header p{
	margin-top:1em;
	font-size:14px;
	text-shadow:0px 0px 5px rgba(0,0,0,1);
}
/* 選單列 */
.navbar{
	top:0px;
	background: rgba(255,255,255,0);
}
.bg-danger{
	background: #db0011;
}
nav .button{
	border-radius: 50px;
	background: #db0011;
}
.navbar-nav{
	position: relative;
	top:-15px;
	background: rgba(255,255,255,0.8);
	z-index: 10;
	width: 100%;
}
.navbar-toggler{
		position: absolute;z-index: 20;right: 5px;top:5px;
	}

.dropdown-menu{
	z-index: 30;
	background: #fff;
}
nav .nav-link{
	border-right:0px #c4c4c4 solid;
	margin: 5px 0px;
	padding: 0px 20px;
	color: #000;
	font-weight: 600;
	font-size: 18px;
}
nav .nav-link:hover{
	color:#db0011;

}
nav .nav-item{
	width: 100%;
	text-align: center;
	border-bottom:5px rgba(255,255,255,0) solid;
	/*height: 45px;*/
}
nav .nav-item:hover{
	border-bottom:5px #db0011 solid;
}
nav .active{
	border-top:5px #db0011 solid;
}
nav .active .nav-link{
	color:#db0011;
}
/* 台灣地圖*/
#taiwan{
	z-index: 1;
}
/*.school{
	display: none;
}*/
.gray{
	fill:#E8E8E8;
}
.orange{
	fill:#f3981c;
	cursor: pointer;
}
.red{
	fill:#db0011;
}
.map-info{
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.map-info img{
	width: 0;
	height: 0;
	position: absolute;
    z-index: 4;
    pointer-events: none;
}
.map-info p{
	color: #db0011;
	text-align: center;
	line-height: 1.2em;
	font-size: 0.8em;
	font-weight: 600;
	/*background: #fff;*/
	border-radius: 5px;
	/*text-shadow:-3px 0 1px white, 0 3px 1px white,  3px 0 1px white, 0 -3px 1px white;*/
	z-index: 4;
}
.map-info .map-line{
	height: 2px;
	background: rgba(255,255,255,0);
	position: absolute;
	z-index: 3;
}
.tainan1{left: -3vw;top:88vw;}
.tainan2{left: -3vw;top:80vw;}
.chiayi{left: 25vw;top:68vw;}
.chiayi2{left: 0vw;top:71vw;}
.miaoli{left: 22vw;top:25vw;}
.taichung{left: 15vw;top:36vw;}
.yilan{left: 78vw;top:28vw;}
.taipei2{left: 60vw;top:-8vw;}
.taipei{left: 74vw;top:-4vw;}
.yunlin{left: 1vw;top:64vw;}
.pingtung{left: 17vw;top:116vw;}
.hsinchu{left: 27vw;top:16vw;}
.hsinchu2{left: 20vw;top:6vw;}
.nantou{left: 37vw;top:55vw;}
.changhua{left: 7vw;top:47vw;}
.newtaipei{left: 63vw;top:15vw;}
.newtaipei2{left: 80vw;top:10vw;}
.newtaipei3{left: 47vw;top:-4vw;}
.hsinchu3{left: 50vw;top:26vw;}
.taitung{left: 52vw;top:100vw;}
.kaohsiung{left: 30vw;top:90vw;}
.taoyuan{left: 35vw;top:3vw;}

/* 首頁文章們 */
#indexB1,#indexB2,#indexC,#indexB3{margin: 3em 0;}
.bg-b{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	position: absolute;
	top:0;
	left: 0;
}
.border-r{
	display: inline-block;
	top:5%;
	width: 90%;
	height: 90%;
	border: 5px solid #db0011;
}
.index-img-icon{
	width: 6em;
	color: #fff;
	padding: 10px;
	border-bottom: 3px solid #fff;
	display: inline-block;
	margin: 30px 0 10px 0;
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1.2em;
}

.index-img{
	height: 55vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center;
	z-index: 1;
	background-color: #000;
}
.index-img iframe{
	width: 100%;
	height: 100%;
	z-index: 2;
	top:-80px;
	
}
.index-article-title{
	background: #db0011;
	color: #fff;
	text-align: center;
	position:relative;
	top:calc(100% - 50px);
	height: 50px;
	z-index: 3;
}
.index-article-title h4{
	font-size: 1.1em;
	letter-spacing: 1px;
	font-weight: 400;
	top:50%;
	transform: translateY(-50%);
}
.index-article-title h4 .title-s,#indexB2 .index-article-title h4 .title-s,#indexC .index-article-title h4 .title-s{
	font-size: 0.7em;letter-spacing: 1px;
}
#indexB3 .index-article-title h4 .title-s{border: 1px #fff solid;border-radius: 1em;font-size: 0.7em;letter-spacing: 1px;padding:0 0.5em;margin-right: 0.5em;vertical-align: middle;}
/*#indexC .index-img{
	height: 55vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center;
	z-index: 1;
	background-color: #000;
}*/
/*#indexC .index-article-title{
	text-align: center;
	background: rgba(0,0,0,0.5);
	height: 100%;
	color:#fff;
	padding-top:0.2em;
}
#indexC .index-article-title h4.indexCh41{
	font-size: 5vw;
	text-shadow:0px 0px 5px #000;
	border: 3px #db0011 solid;
	height: calc(100% - 2em);
	padding-top:18%;
	margin: 1em;
}
#indexC .index-article-title h4.indexCh42{
	font-size: 5vw;
	text-shadow:0px 0px 5px #000;
	border: 3px #db0011 solid;
	height: calc(100% - 2em);
	padding-top:16%;
	margin: 1em;
}*/

/*#indexC .index-article-title:hover{background: rgba(255,255,255,0.5);color:#000;}*/
/*#indexC .index-article-title:hover h4.indexCh41,#indexC .index-article-title:hover h4.indexCh42{text-shadow:0px 0px 5px #fff;}*/
.index-article-content{
	height: auto;
	font-size: 1em;
	padding: 5vw 8vw;
}

.index-article-quoted{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 12;
	overflow: hidden;
	line-height: 2em;
	font-size: 14px;
}
.btn-more{
	height: 1.5em;
}
.btn-more img{
	height: 100%;
}
/* 首頁理財教案 */
#indexD{
	background-image: url('../images/bg02.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-bottom: 5px #88000b solid;
}
#indexD p{

}

@media (min-width: 375px) {
	.logos{right: 20px;}
	.social{position: absolute;right: 5px;top:8px;}
}
@media (min-width: 400px) {

	.title-wing{height: 1.5em;}
	header .headertitle{width: 55vw;top: 30px;right: 30px;}
	.index-img-icon{margin: 10vw 0 5vw 0;}
	/* 台灣地圖*/
	.tainan1{left: -3vw;top:90vw;}
	.tainan2{left: -3vw;top:82vw;}
	.chiayi{left: 28vw;top:70vw;}
	.chiayi2{left: 1vw;top:72vw;}
	.miaoli{left: 23vw;top:25vw;}
	.taichung{left: 16vw;top:36vw;}
	.yilan{left: 80vw;top:28vw;}
	.taipei{left: 75vw;top:-2vw;}
	.taipei2{left: 65vw;top:-10vw;}
	.taipei3{left: 52vw;top:-2vw;}
	.yunlin{left: 2vw;top:60vw;}
	.pingtung{left: 16vw;top:117vw;}
	.hsinchu{left: 29vw;top:16.5vw;}
	.hsinchu2{left: 30vw;top:8vw;}
	.nantou1{left: 41vw;top:50vw;}
	.nantou2{left: 39vw;top:58vw;}
	.changhua{left: 8vw;top:50vw;}
	.newtaipei{left: 63vw;top:15vw;}
	.newtaipei2{left: 80vw;top:10vw;}
	.newtaipei3{left: 50vw;top:-5vw;}
	.hsinchu3{left: 50vw;top:26vw;}
	.taitung{left: 52vw;top:100vw;}
	.kaohsiung{left: 30vw;top:93vw;}
	.taoyuan{left: 43vw;top:3vw;}
}

@media (min-width: 576px) { 
	header .headertitle{width: 50vw;}
	header p{font-size:18px;}
	p{font-size: 1em;}
	/* 台灣地圖*/
	.tainan1{left: 3vw;top:90vw;}
	.tainan2{left: 3vw;top:83vw;}
	.chiayi{left: 30vw;top:73vw;}
	.chiayi2{left: 6vw;top:76vw;}
	.miaoli{left: 30vw;top:26vw;}
	.taichung{left: 20vw;top:40vw;}
	.yilan{left: 82vw;top:29vw;}
	.taipei{left: 75vw;top:0vw;}
	.taipei2{left: 65vw;top:-5vw;}
	.yunlin{left: 6vw;top:65vw;}
	.pingtung{left: 23vw;top:122vw;}
	.hsinchu{left: 35vw;top:17vw;}
	.hsinchu2{left: 35vw;top:11vw;}
	.nantou1{left: 41vw;top:54vw;}
	.nantou2{left: 39vw;top:60vw;}
	.changhua{left: 13vw;top:53vw;}
	.newtaipei{left: 65vw;top:15vw;}
	.newtaipei2{left: 78vw;top:8vw;}
	.newtaipei3{left: 55vw;top:0vw;}
	.hsinchu3{left: 50vw;top:28vw;}
	.taitung{left: 53vw;top:105vw;}
	.kaohsiung{left:32vw;top:93vw;}
	.taoyuan{left: 43vw;top:3vw;}
	/* 活動花絮 */
	.carousel-B .carousel-item{height: 450px;}
	/* 首頁文章們 */
	.index-article-title h4{font-size: 1.3em;letter-spacing: 2px;}
	.index-article-quoted{font-size: 1em;}
	.index-article-title h4 .title-s{letter-spacing: 2px;}
}

@media (min-width: 768px) {

.pop_pic1{width: 180px;left:1em;bottom: 90px;}
.pop_pic2{width: 180px;right:0em;bottom: 60px;}
.pop_close{width: 50px;height: 50px;right: 90px;top:1em;}
.pop_info{width: 600px;height: 550px;margin: calc(50vh - 275px) calc(50vw - 300px);padding: 80px 20px;}
.pop_info h1{font-size:  30px;}
.pop_video{width: 400px;height: 300px;margin: 0 75px;}
	p{font-size: 14px;}
	.bar {height: 60px;padding: 13px;}
	.logos{right: 80px;}
	.bar .bar-logo{height: 30px;}
	.social{position: absolute;right: 10px;top:12px;display: block;}
	.social .bar-social{height: 35px;}
	header{height: 500px;background-image: url("../images/open.jpg");background-size: cover;background-position: center;}
	header .headertitle{width: 40vw;top:100px;right: 5vw;}
	.navbar-nav{background: rgba(255,255,255,1);top:-30px;}
	nav .nav-link{border-right:2px #c4c4c4 solid;}
	nav .nav-item{width: auto;}
	nav .E{display: none;}
	/* 台灣地圖*/
	.tainan1{left: -1.5vw;top:31vw;}
	.tainan2{left: -1.5vw;top:27vw;}
	.chiayi{left: 7.8vw;top:21.5vw;}
	.chiayi2{left: -2vw;top:23vw;}
	.miaoli{left: 5vw;top:7vw;}
	.taichung{left: 3vw;top:11vw;}
	.yilan{left: 25vw;top:8.5vw;}
	.taipei{left: 22vw;top:-8vw;}
	.taipei2{left: 22vw;top:-4vw;}
	.yunlin{left: -2vw;top:19vw;}
	.pingtung{left: 4vw;top:39vw;}
	.hsinchu{left: -3vw;top:3vw;}
	.hsinchu2{left: 7vw;top:-1vw;}
	.nantou1{left: 14vw;top:13vw;}
	.nantou2{left: 12vw;top:17vw;}
	.changhua{left: 1.2vw;top:15vw;}
	.newtaipei{left: 20vw;top:5vw;}
	.newtaipei2{left: 25vw;top:0vw;}
	.newtaipei3{left: 14vw;top:-8vw;}
	.hsinchu3{left: 4.5vw;top:3vw;}
	.taitung{left: 16vw;top:32vw;}
	.kaohsiung{left:9vw;top:29vw;}
	.taoyuan{left: 14vw;top:-4vw;}
	/* 活動花絮 */
	.carousel-B .carousel-item{height: 600px;}

	/* 首頁文章們 */
	.index-article-quoted{-webkit-line-clamp: 3;font-size: 14px;}
	.index-article-title h4{font-size: 0.9em;}	
	.index-img-icon{margin: 8vw 0 4vw 0;font-size: 1.5em;}
	#indexB1,#indexB2,#indexB3,#indexC{margin: 3em 5vw;}
	.index-img{height: 30vw;}	
	/*#indexC .index-article-title{padding-top:0.2em;}*/
	/*#indexC .index-article-title h4.indexCh41{font-size: 1.4em;padding-top:20%;}*/
	/*#indexC .index-article-title h4.indexCh42{font-size: 1.4em;padding-top:17%;}*/
}

@media (min-width: 992px) {	
	p{font-size: 1em;}
	header .headertitle{width: 35vw;}
	/* 台灣地圖*/
	.tainan1{left: -1.5vw;top:30vw;}
	.tainan2{left: -1.5vw;top:27vw;}
	.chiayi{left: 9vw;top:23vw;}
	.chiayi2{left: -0.3vw;top:23.5vw;}
	.miaoli{left: 7.5vw;top:7vw;}
	.taichung{left: 4vw;top:12vw;}
	.yilan{left: 26vw;top:8.5vw;}
	.taipei{left: 26vw;top:-3vw;}
	.taipei2{left: 20vw;top:-3vw;}
	.yunlin{left: 0vw;top:20vw;}
	.pingtung{left: 5.5vw;top:39vw;}
	.hsinchu{left: 9vw;top:4vw;}
	.hsinchu2{left: 9.5vw;top:1vw;}
	.nantou1{left: 14vw;top:16vw;}
	.nantou2{left: 12vw;top:19vw;}
	.changhua{left: 2vw;top:16vw;}
	.newtaipei{left: 20vw;top:5.5vw;}
	.newtaipei2{left: 26vw;top:0vw;}
	.newtaipei3{left: 14vw;top:-3vw;}
	.hsinchu3{left: 16vw;top:9vw;}
	.taitung{left: 17vw;top:33vw;}
	.kaohsiung{left:10vw;top:29vw;}
	.taoyuan{left: 15vw;top:0vw;}	
	/* 首頁文章們 */
	/*.index-article-content{padding: 3vw 7vw;}*/
	.index-img-icon{margin: 8vw 0 4vw 0;font-size: 2em;}
	.index-article-quoted{-webkit-line-clamp: 4;font-size: 1em;}
	/*.index-article-title h4{font-size: 1.2em;}*/

	
}

@media (min-width: 1200px) { 
	header{height: 700px;}
	header .headertitle{width: 400px;top:150px;right: 9vw;}
	/* 台灣地圖*/
	.tainan1{left: 0vw;top:30vw;}
	.tainan2{left: 0vw;top:28vw;}
	.chiayi{left: 8.5vw;top:23vw;}
	.chiayi2{left: 1vw;top:24.7vw;}
	.miaoli{left: 9vw;top:8vw;}
	.taichung{left: 6vw;top:12vw;}
	.yilan{left: 27vw;top:9vw;}
	.taipei{left: 27vw;top:-2vw;}
	.taipei2{left: 22vw;top:-2vw;}
	.yunlin{left: 1vw;top:20.5vw;}
	.pingtung{left: 6.5vw;top:39vw;}
	.hsinchu{left: 10vw;top:5vw;}
	.hsinchu2{left: 10vw;top:2vw;}
	.hsinchu3{left: 16vw;top:9vw;}
	.nantou1{left: 14vw;top:17vw;}
	.nantou2{left: 13vw;top:19.2vw;}
	.changhua{left: 3vw;top:17vw;}
	.newtaipei{left: 20vw;top:5.5vw;}
	.newtaipei2{left: 27vw;top:3vw;}
	.newtaipei3{left: 17vw;top:-2vw;}
	.taitung{left: 18vw;top:34vw;}	
	.kaohsiung{left:10vw;top:31vw;}
	.taoyuan{left: 14.5vw;top:1vw;}		
	/* 首頁文章們 */
	.index-article-title{height: 60px;top:calc(100% - 60px);}
	.index-article-title h4{font-size: 1em;}
	.btn-more{height: 2em;}
	.index-img{height: 18vw;}
	#indexB1,#indexB2,#indexB3,#indexC{margin: 3em 10vw;}
	/*#indexC .index-article-title h4.indexCh41{font-size: 1.4em;padding-top:35%;}*/
	/*#indexC .index-article-title h4.indexCh42{font-size: 1.4em;padding-top:30%;}*/
}
@media (min-width: 1400px){
	/*.index-article-content{padding: 5vw 7vw;}*/
	.index-article-quoted{-webkit-line-clamp: 5;}
	
	
}