@charset "UTF-8";
/* CSS Document */
html, body{	
	font-family: Microsoft JhengHei;
/*	font-family:Verdana, Arial, Helvetica, sans-serif;*/
	-webkit-text-size-adjust:none;
}

#fullpage{display: block;}

#menu{display: block;}
.fullpage-wrapper{display: block;}
#fp-nav{display: block;}
.mobile{display: none;}

#section0{
	background:url(imgs/pic01-4.gif) no-repeat center;
	background-color: #2b3e5f;
}
#section1{
	background:url(imgs/bg_02.png) no-repeat center;
}
#section2{
	background:url(imgs/bg_03.png) no-repeat center;
}
#section3{
/*	background:url(imgs/bg_04.png) no-repeat center;*/
	background-color: #ffffff;
}
#section4{
	background:url(imgs/bg_05.png) no-repeat center;
}
#section5{
/*	background:url(imgs/bg_06.png) no-repeat center;*/
	background-color: #ffffff;
}
#section6{
	background:url(imgs/bg_07.png) no-repeat center;
	background-color: #0f213b;
}
#section7{
	background:url(imgs/bg_08.png) no-repeat center;
	background-color: #003557;
}
#section8{
	background:url(imgs/bg_09.png) no-repeat center;
}
#section9{
	background:url(imgs/bg_10.png) no-repeat center;
	background-color: #003557;
}

.content{position: relative; margin: auto; width: 1200px; height: 715px;}
.a1{
	position: absolute;
	left: 484px;
	top: 98px;
}
.a2{position: absolute; left: 257px; font-style: italic; top: 355px; font-size: 24px; text-shadow: black 0.1em 0.1em 0.2em; text-align: center; line-height: 40px; color: #ffffff;}
.a3{position: absolute; left: 205px; top: 577px; width: 782px; height: 56px; color: #fff; font-size: 18px; line-height: 30px; text-align: center;}
.a4{
	position: absolute;
	left: 580px;
	top: 504px;
}

.serif{font-family: 'Noto Serif TC', serif;}
.a0{font-size: 69px; font-weight: bold; font-style: italic; color: #ffffff; position: absolute; left: 316px; top: 163px; text-shadow: black 0.1em 0.1em 0.2em;}


.b1{position: absolute; top: 65px; left: 52px;}
.b2{position: absolute; left: 579px; top: 76px; font-size: 41px; font-style: italic; font-weight: bold; color: #ffffff; line-height: 51px; letter-spacing: 1px;        background: linear-gradient(to right, gray, white, gray);
        -webkit-background-clip: text;
        color: transparent;
	font-weight: bold;}
.b3{position: absolute; font-size: 24px; left: 233px; top: 260px;
        background: linear-gradient(to right, gray, white, gray);
        -webkit-background-clip: text;
        color: transparent;
	font-weight: bold;
}
.gr{
        background: linear-gradient(to right, gray, white, gray);
        -webkit-background-clip: text;
        color: transparent;font-weight: bold;}

.b4{position: absolute; font-size: 24px; color: #ffffff; left: 763px; top: 260px;background: linear-gradient(to right, gray, white, gray);
        -webkit-background-clip: text;
        color: transparent;
	font-weight: bold;}

.b5{position: absolute; left: 105px; top: 344px; color: #ffffff; text-align: center; line-height: 30px; font-weight: bold; font-size: 20px;}
.b6{position: absolute; left: 85px; top: 438px; width: 458px; height: 141px; font-size: 20px; line-height: 32px; color: #ffffff;}
.b7{position: absolute; left: 674px; top: 344px; width: 458px; font-size: 20px; line-height: 32px; color: #ffffff;}

.b8{
	position: absolute;
	left: 570px;
	top: 238px;
}
.b9{position: absolute; left: 587px; top: 338px; font-size: 22px; line-height: 26px; color: #39BFC0; font-weight: bold;}
.b10{position: absolute; left: 580px; top: 628px;}

.b11{position: absolute; top: 288px; left: 84px;}
.b12{position: absolute; top: 288px; left: 676px;}

.c1{position: absolute; left: 356px; top: 77px;}
.c2{
	position: absolute;
	left: 93px;
	top: 77px;
}
.c3{position: absolute; font-size: 36px; color: #036EB6; font-weight: bold; left: 184px; top: 70px; line-height: 40px;}
.c4{position: absolute; left: 445px; top: 93px; color: #231815; font-size: 22px; line-height: 28px;}

.c5{position: absolute; font-size: 24px; font-weight: bold; color: #00527B; letter-spacing: 3px; top: 220px; left: 158px;}
.c6{position: absolute; font-size: 24px; font-weight: bold; color: #00527B; letter-spacing: 3px; left: 730px; top: 220px;}	
.c7{position: absolute; font-size: 24px; font-weight: bold; color: #00527B; letter-spacing: 3px; left: 734px; top: 440px;}
.c8{position: absolute; left: 83px; top: 191px;}
.c9{position: absolute; left: 652px; top: 192px;}
.c10{position: absolute; left: 657px; top: 413px;}

.c11{position: absolute; left: 854px; top: 447px;}
.c12{position: absolute; left: 852px; top: 226px;}
.c13{position: absolute; left: 282px; top: 226px;}

.cul{
	position: absolute;
	font-size: 18px;
	color: #231815;
	line-height: 30px;
}

.d16{top: 125px;left: 91px;}
.d17{top: 293px;left: 91px;}
.d18{top: 492px;left: 91px;width: 460px;}
.d19{top: 125px;left: 665px;}
.d20{top: 431px;left: 665px;}

.cul li{list-style-type:disc;}
.cul span.blue{color:#07A8E9;}
.cul span.red{color:#FF4463;}


.blue{color:#07A8E9;}
.red{color:#FF4463;}


.c14{position: absolute; top: 270px; left: 90px; width: 460px;}
.c15{position: absolute; left: 664px; top: 269px; width: 454px;}
.c16{position: absolute; top: 489px; left: 664px;}



.d1{position: absolute;left: 83px;top: 48px;}
.d2{position: absolute;font-size: 24px;font-weight: bold;color: #00527B;letter-spacing: 3px;top: 77px;left: 158px;}
.d3{position: absolute;left: 282px;top: 83px;}

.d4{position: absolute;left: 83px;top: 215px;}
.d5{position: absolute;font-size: 24px;font-weight: bold;color: #00527B;letter-spacing: 3px;top: 244px;left: 158px;}
.d6{position: absolute;left: 282px;top: 250px;}

.d7{position: absolute;left: 83px;top: 414px;}
.d8{position: absolute;font-size: 24px;font-weight: bold;color: #00527B;letter-spacing: 3px;top: 443px;left: 158px;}
.d9{position: absolute;left: 282px;top: 449px;}

.d10{position: absolute;left: 655px;top: 49px;}
.d11{position: absolute;font-size: 24px;font-weight: bold;color: #00527B;letter-spacing: 3px;top: 78px;left: 730px;}
.d12{position: absolute;left: 854px;top: 84px;}
.d13{position: absolute;left: 655px;top: 360px;}
.d14{position: absolute;font-size: 24px;font-weight: bold;color: #00527B;letter-spacing: 3px;top: 382px;left: 730px;}
.d15{position: absolute;left: 854px;top: 389px;}


.d21{position: absolute; font-size: 13px; line-height: 16px; color: #727171; left: 751px; top: 440px; width: 411px;}

.e1{
	position: absolute;
	font-size: 20px;
	color: #ffffff;
	line-height: 30px;
	left: 45px;
	top: 57px;
	text-shadow: black 0.1em 0.1em 0.2em;
}

.e2{font-size: 36px; line-height: 40px; color: #C10D23; position: absolute; left: 561px; top: 55px;font-family: Ubuntu;}
.e3{position: absolute; left: 326px; top: 108px;}
.e4{position: absolute; left: 383px; top: 134px;}
.ule{font-size: 20px; line-height: 30px; color: #231815;}
.e5{position: absolute; left: 743px; top: 134px; width: 280px;}
.e6{
	font-size: 36px;
	line-height: 40px;
	color: #C10D23;
	position: absolute;
	left: 497px;
	top: 296px;
	font-family: Ubuntu;
}
.f2{
	font-size: 36px;
	line-height: 40px;
	color: #C10D23;
	position: absolute;
	left: 466px;
	top: 35px;
	font-family: Ubuntu;
}


.e7{position: absolute; color: #00527B; font-size: 18px; left: 357px; top: 652px;}
.e8{position: absolute; color: #00527B; font-size: 18px; left: 612px; top: 652px;}
.e9{position: absolute; color: #00527B; font-size: 18px; left: 900px; top: 652px;}
.e9{position: absolute; color: #00527B; font-size: 18px; left: 900px; top: 652px;}


.f1{font-size: 36px; line-height: 40px; color: #C10D23; position: absolute; left: 496px; top: 295px;}


.ulf{
	position: absolute;
	left: 207px;
	top: 8px;
	color: #ffffff;
}
.ulf li{width: 96px; float: left; font-size: 13px; text-align: center; vertical-align:middle; line-height: 15px;}

.f3{position: absolute; left: 123px; top: 25px; font-size: 22px; color: #39BFC0;}
.f4{position: absolute; left: 86px; top: 53px; font-size: 24px; color: #ffffff; line-height: 29px; text-align: center; width: 110px;}
.fc{width: 592px; height: 126px; position: relative;}

.ulg{font-size: 14px; line-height: 20px; color: #ffffff; margin-top:11px; width: 230px;}
.ulg li{list-style-type: disc;}
.g1{color: #39BFC0; font-size: 24px; line-height: 22px; font-weight: bold;}


.h1{position: absolute; top: 81px; left: 192px;}
.h2{font-size: 41px; font-weight: bold; font-style: italic; color: #ffffff; letter-spacing: 1px; position: absolute; top: 51px; left: 426px;background: linear-gradient(to right, gray, white, gray);
        -webkit-background-clip: text;
        color: transparent;}
.h4{font-family: Ubuntu; color: #39BFC0; font-size: 36px; position: absolute; left: 609px; top: 162px; width: 482px;}
.h3{position: absolute; font-size: 24px; text-align: center; line-height: 40px; color: #ffffff; left: 607px; top: 269px; width: 455px;}


.more{color: #ffffff; font-size: 24px; background-color: #39BFC0; width: 160px; height: 42px; text-align: center; line-height: 40px; cursor: pointer;}

.i1{
    font-size: 36px;
    color: #00527B;
    position: absolute;
    left: 348px;
    top: 152px;
    font-family: Ubuntu;
    z-index: 999;
}
.j1{
	position: absolute;
	color: #39BFC0;
	font-size: 36px;
	left: 347px;
	top: 62px;
	font-family: Ubuntu;
}

.j2{position: absolute; left: 200px; top: 118px;}



#menu{background-color: #2A3233;}

    .card1 {
        height: 370px;
		width: 470px;
        background: url("../examples/imgs/icon01.png") no-repeat;
		background-size: contain;	
    }
    .card1:hover {
        background: url("../examples/imgs/icon01.gif") no-repeat;
		background-size: contain;
    }

    .card2 {
        height: 200px;
		width: 470px;
        background: url("../examples/imgs/icon02.png") no-repeat;
		background-size: contain;
    }
    .card2:hover {
        background: url("../examples/imgs/icon02.gif") no-repeat;
		background-size: contain;
    }
    .card3 {
        height: 200px;
		width: 470px;
        background: url("../examples/imgs/icon03.png") no-repeat;
		background-size: contain;
    }
    .card3:hover {
        background: url("../examples/imgs/icon03.gif") no-repeat;
		background-size: contain;
    }
    .card4 {
        height: 135px;
		width: 470px;
        background: url("../examples/imgs/icon04.png") no-repeat;
		background-size: contain;
    }
    .card4:hover {
        background: url("../examples/imgs/icon04.gif") no-repeat;
		background-size: contain;
    }
    .card5 {
        height: 170px;
		width: 470px;
        background: url("../examples/imgs/icon06.png") no-repeat;
		background-size: contain;
    }
    .card5:hover {
        background: url("../examples/imgs/icon06.gif") no-repeat;
		background-size: contain;
    }
    .card6 {
        height: 200px;
		width: 470px;
        background: url("../examples/imgs/icon07.png") no-repeat;
		background-size: contain;
    }
    .card6:hover {
        background: url("../examples/imgs/icon07.gif") no-repeat;
		background-size: contain;
    }
    .card7 {
        height: 290px;
		width: 470px;
        background: url("../examples/imgs/icon05.png") no-repeat;
		background-size: contain;
    }
    .card7:hover {
        background: url("../examples/imgs/icon05.gif") no-repeat;
		background-size: contain;
    }
    .card8 {
        height: 260px;
		width: 470px;
        background: url("../examples/imgs/icon08.png") no-repeat;
		background-size: contain;
    }
    .card8:hover {
        background: url("../examples/imgs/icon08.gif") no-repeat;
		background-size: contain;
    }





#thumbnail:hover + #title1 {font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;
  animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}	

@keyframes oxxo{
    0%{
		margin-top: 1px;
    }


    50%{
		margin-top: 2px;
    }


    100%{
		margin-top: 3px;
    }
}

#title1{
    position: absolute;
    top: 439px;
    left: 243px;
/*    width: 146px;*/
    height: 99px;
	line-height: 28px;
}

#thumbnail2:hover + #title2 {font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;   animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}							
#title2{
    position: absolute;
    top: 428px;
    left: 351px;
}

#thumbnail3:hover + #title3  {font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;   animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}								
#title3{
    position: absolute;
    top: 442px;
    left: 645px;
}

#thumbnail4:hover + #title4  {font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;   animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}									
#title4{
    position: absolute;
    top: 558px;
    left: 830px;
}

#thumbnail5:hover + #title5  {font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;   animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}										
#title5{
    position: absolute;
    top: 475px;
    left: 1017px;
}

#thumbnail6:hover + #title6 {font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;   animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}						
#title6{
    position: absolute;
    top: 461px;
    left: 731px;
}

#thumbnail7:hover + #title7 {font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;   animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}						
#title7{
    position: absolute;
    top: 409px;
    left: 669px;
	line-height: 18px;
}

#thumbnail8:hover + #title8 {font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;   animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}					
#title8{
    position: absolute;
    top: 379px;
    left: 550px;
	line-height: 25px;
}

#thumbnail9:hover + #title9{font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;   animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}						
#title9{
    position: absolute;
    top: 606px;
    left: 910px;
}

#thumbnail10:hover + #title10{font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;   animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}						
#title10{
    position: absolute;
    top: 447px;
    left: 925px;
	line-height: 28px;
}

#thumbnail11:hover + #title11 {font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;   animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}						
#title11{
    position: absolute;
    top: 460px;
    left: 1087px;
	line-height: 19px;
}

#thumbnail12:hover + #title12{font-weight: bold; text-shadow: white 0.1em 0.1em 0.2em; color:black;  animation-name: oxxo;
  animation-duration:0.2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;}							
#title12{
    position: absolute;
    top: 386px;
    left: 736px;
}






#thumbnail{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    left: 45px;
    top: 164px;
}
#thumbnail2{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    left: 46px;
    top: 204px;
}
#thumbnail3{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    left: 45px;
    top: 244px;
}
#thumbnail4{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    left: 45px;
    top: 285px;
}
#thumbnail5{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    left: 45px;
    top: 324px;
}
#thumbnail6{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    left: 45px;
    top: 364px;
}
#thumbnail7{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    top: 404px;
    left: 45px;
}
#thumbnail8{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    left: 45px;
    top: 444px;
}
#thumbnail9{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    left: 45px;
    top: 485px;
}
#thumbnail10{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    left: 45px;
    top: 524px;
}
#thumbnail11{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    left: 45px;
    top: 564px;
}
#thumbnail12{
    position: absolute;
    font-size: 20px;
    font-size: 20px;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ffffff;
    top: 603px;
    left: 44px;
}

/*

#section4 a:hover{text-decoration: underline;}
*/




/*
	body,html{
    overflow:auto !important;
	}
*/

	#menu{display: none;}
	.fullpage-wrapper{display: none;}
/*	#section0,#section1,#section2,#section3,#section4,#section5,#section6,#section7,#section8,#section9{display: none;}*/
	#fullpage{display: none;}
	#fp-nav{display: none;}
	.mobile{display: block;}

	.m1{background:url(imgs/mobile/a1.png); background-size:100%;background-repeat: no-repeat; background-color: #2c4265; padding-bottom: 5%;}
	.m2{background:url(imgs/mobile/a2.png); background-size:100%;background-repeat: no-repeat; background-color: #074462; padding-bottom: 12%;}
	.m3{background:url(imgs/mobile/a3.png); background-size:100%;background-repeat: no-repeat; background-color: #fff; padding-bottom: 10%;}
	.m4{background-color: #ceecf3;margin-top: -2%;}
	.m5{background-color: #fff; padding-bottom: 3%; margin-top: -1%; z-index: 9;}
	.m6{background-size:100%;background-repeat: no-repeat;background-color: #003557; padding-bottom: 5%;}
	.m7{background-size:100%; background-repeat: no-repeat; background-color: #fff;padding-top: 5%;}
	.m8{background:url(imgs/mobile/bb8.png); background-position: bottom; background-size:100%; background-repeat: no-repeat; background-color: #003557; margin-top: -2%; padding-bottom: 15%;}
	
	
}

.m5 img{padding: 3% 0% 2% 0%;}

.m1_1{
	padding-top: 3%;
	font-size: 13vw;
	color: #ffffff;
	font-weight: bold;
	line-height: 17vw;
	text-align: center;
	font-style: italic;
}

.m1_2{
	padding-top: 10%;
	font-size: 4vw;
	line-height: 6vw;
	color: #ffffff;
	text-align: center;
	font-style: italic;
	width: 78%;
	margin: auto;
}

.m1_3{color: #ffffff;font-size: 3.5vw;line-height: 5.5vw;width: 83%;margin: auto;padding-top: 13%; text-align: left;}


.shadow{text-shadow: black 0.1em 0.1em 0.2em;}

.m1_4{
    font-size: 5vw;
    width: 100%;
    text-align: center;
    padding-top: 3%;
	margin-bottom: -1%;
}

.m1_5{
    font-size: 4.2vw;
    color: #ffffff;
    
    margin: auto;
    padding-top: 4%;
    text-align: center;
}


.m1_6{
    COLOR: #ffffff;
    padding-top: 4%;
    font-size: 4vw;
    line-height: 6vw;
    width: 83%;
    margin: auto;
    
}


.m1_7{
    WIDTH: 75%;
    display: block;
    margin: auto;
    padding-top: 9%;
}

.ulm{
    font-size: 3.5vw;
    list-style-type:disc;
    width: 80%;
    margin: auto;
    padding-top: 4%;
    line-height: 5.8vw;
	color: #231815;
}


.ulm2{
    font-size: 3.5vw;
    list-style-type:disc;
    width: 71%;
    margin: auto;
    line-height: 4.5vw;
	color: #fff;
}


.m1_8{color: #C10D23; ;font-family: Ubuntu;
    font-size: 6.5vw;
    margin: auto;
    text-align: center;
    padding-top: 10%;
	padding-bottom: 5%;
}

.m1_9{
    width: 80%;
    margin: auto;
    display: block;
    padding-top: 3%;
}

.m1_10{
    margin: auto;
    display: block;
    margin: auto;
    padding-top: 4%;
    font-size: 3.5vw;
    line-height: 5.5vw;
    font-weight: bold;
	width: 60%;
	color: #2A3233;
}


.halfhalf{width: 80%; margin: auto;}
.halfhalf .left{width: 50%; float: left;}
.halfhalf .right{width: 50%; float: right;}
.halfhalf .right2{width: 44%; float: right;}


.m1_11{
    text-align: center;
    font-size: 3.5vw;
	color: #2A3233;
}

.ululul{
	font-size: 3.5vw;
	color: #231815;
	list-style-type: disc;
	padding-left:2%;
	line-height: 5vw;
	padding: 3% 0% 7% 0%;
}

.a7-1{font-size: 11.5vw;color: #00527B; ;font-family: Ubuntu;font-weight: bold;}

.a7-2{font-size: 4.8vw; line-height: 6.6vw; color: #00527B; ;font-family: Ubuntu;font-weight: bold;padding-top: 2%;}

#link5{background-color: #f6f6f6; padding:3rem 0 2rem 0;}

#link6{background-color: #ffffff; padding:3rem 0 2rem 0;}


#link7{background-color: #f6f6f6; padding:3rem 0 27rem 0;}
#link7 h4{color: #00527b; font-size: 4vw; margin-bottom: 5px;}


#link5 h1{font-size: 5.1vw; text-align: center; font-weight: bold; color: #00527b; margin-bottom: 3%; }
#link6 h1{font-size: 5.1vw; text-align: center; font-weight: bold; color: #00527b; margin-bottom: 3%; letter-spacing: 0.4rem;}
#link7 h1{font-size: 5.1vw; text-align: center; font-weight: bold; color: #00527b; margin-bottom: 3%; letter-spacing: 0.4rem;}