@charset "utf-8";
/* CSS Document */
body { font-size:1em; background-color:#00a4a6; font-family:"微軟正黑體", "Microsoft JhengHei", "Sans-Serif", "Arial"; overflow-x:hidden; }
.font-12 { font-size:0.75em; }
.font-14 { font-size:0.875em; }
.font-18 { font-size:1.125em; }
.font-20 { font-size:1.25em; }
.font-24 { font-size:1.5em; }
.font-28 { font-size:1.75em; }
.font-32 { font-size:1.75em; }
.font-36 { font-size:2.25em; }
.font-40 { font-size:2.5em; }
.font-44 { font-size:2.75em; }
.font-48 { font-size:3em; }

body.small-font { font-size:0.889em; }
.small-font .font-12 { font-size:0.667em; }
.small-font .font-14 { font-size:0.778em; }
.small-font .font-18 { font-size:1em; }
.small-font .font-20 { font-size:1.111em; }
.small-font .font-24 { font-size:1.333em; }
.small-font .font-28 { font-size:1.556em; }
.small-font .font-32 { font-size:1.778em; }
.small-font .font-36 { font-size:2em; }
.small-font .font-40 { font-size:2.222em; }
.small-font .font-44 { font-size:2.444em; }
.small-font .font-48 { font-size:2.667em; }

body.big-font { font-size:1.143em; }
.big-font .font-12 { font-size:0.857em; }
.big-font .font-14 { font-size:1em; }
.big-font .font-18 { font-size:1.286em; }
.big-font .font-20 { font-size:1.429em; }
.big-font .font-24 { font-size:1.714em; }
.big-font .font-28 { font-size:2em; }
.big-font .font-32 { font-size:2.286em; }
.big-font .font-36 { font-size:2.571em; }
.big-font .font-40 { font-size:2.857em; }
.big-font .font-44 { font-size:3.143em; }
.big-font .font-48 { font-size:3.429em; }

.left { float:left; }
.right { float:right; }
.clearfix:after { content: ""; clear: both; display: table; }

#main { max-width:1280px; min-width:320px; margin:0 auto; background-color:#FFF; padding:5%; padding-bottom:2%;  box-sizing:border-box; overflow:hidden; }
.header { position:relative; }
.header .lang { position:absolute; right:0; bottom:0;  }
.header .size { cursor:pointer; width:24px; height:23px; margin-left:5px; background-repeat:no-repeat; background-position:0 0; }
.header .size:hover, .header .size.active { background-position:0 -24px; }
.header .size.size1 { background-image:url(../images/Web-05.png); }
.header .size.size2 { background-image:url(../images/Web-06.png); }
.header .size.size3 { background-image:url(../images/Web-07.png); }
.header .lang .control { margin-bottom:5px; }
.header .lang .text a { color:#000; text-decoration:none; }
.header .lang .text a:hover { text-decoration:underline; }
.header, .banner, .content { margin-bottom:2%; }
.banner img { width:100%; }

.content .box1 { width:66%; margin-right:2%; }
.content .box2, .content .box3 { width:32%; }
.content .box4 { margin:0 0 0 2%; width:65%; }
.content .box4 .img { width:51% !important; }
.content .box4 .text { width:49% !important; }
.content .box5 { width:33% !important; }

.blue { color:#283574 !important; border-color:#283574 !important; }

/*
.box5 .con { background:#1C75B6; transition:0.3s; }
.box5 .con:hover { background:url('../images/06.png'), #1C75B6; background-repeat:no-repeat; background-position:center top; background-size:cover;}
*/

.content .box .con { color:#FFF; visibility:hidden; }
.content .box .con.animated { visibility:visible; }
.content .box .con.black, .content .box .con.black .btn a { color:#283574;  }
.content .box .con.black .btn a { border:#283574 1px solid; }
.content .box1 .con, .content .box3 .con { display:flex; width: 100%; height:320px; margin-bottom:3%; }
.content .box1 .con .img, .content .box1 .con .text { width:50%; display:flex; }
.content .box .con .img { overflow:hidden; position:relative; }
.content .box .con .img .bg { background-position:center center; background-repeat:no-repeat; background-size:100%; transition:all 0.5s ease; position: absolute; top:0; width:100%; height:100%;   }
.content .box .con .img:hover .bg { transform: scale(1.2); }
.content .box .con .text { align-items:center; justify-content:center;  }
.content .box .con .text .in-con { width:90%; padding:0 5%; text-align: center; }
.content .box .con .text .in-con h2 { font-weight:bold; }
.content .box .con .btn { position:relative; width:65%; margin:0 auto; margin-top:15px; }
.content .box .con .btn a { display:block; color:#FFF; text-decoration:none; padding:10px 0; border:#FFF 1px solid; font-weight:bold; width:100%; text-align:center; position:relative; z-index:2; transition: color 0.5s ease; }
.content .box .con .btn::after { content:" "; position:absolute; height:100%; width:0; left:50%; top:0; background-color:#FFF; transition: all 0.5s ease; opacity:0;  }
.content .box .con .btn:hover a { color:#000; }
.content .box .con .btn:hover::after { width:100%; left:0; opacity:1; display:flex; }

.content .box2 .con { height:660px; margin-bottom:3%; display:flex; flex-direction: column; }
.content .box2 .con .img, .content .box2 .con .text { display:flex; width:100%; height:50%;  }
.content .box3 .con { position:relative; }
.content .box3 .con .img { position:absolute; width:100%; height:100%; opacity:0; transition:opacity 0.5s ease; }
.content .box3 .con .text { width:100%; display:flex; position:relative; z-index:2; }
.content .box3 .con:hover .img { opacity:1; }

/*mouseover box*/
.mouseBox { position:relative; }
.mouseBox .overImg { position:absolute; opacity:0; top:0; left:0; transition:0.3s; }
.mouseBox:hover .overImg { opacity:1; z-index:3; }
.mouseBox .overImg img { width:100%; }
.box3.mouseBox a { display:block; height:100%; width:100%; }


.download { position:fixed; right:0; top:60%; padding:10px 15px; background-color:#CCC; text-align:center; z-index:3; box-sizing:border-box; }
.download a { color:#000; text-decoration:none; }
.download a:hover { text-decoration:underline; }

.footer a { text-decoration:none; color:#000; }
.footer a:hover { text-decoration:underline; }

.footer .contact div { margin-bottom:10px; }
.footer .contact p { margin:10px 0; line-height:150%; margin-top:10px; }

@media screen and (max-width: 1280px) {
	.content .box1 .con, .content .box3 .con { height:25vw; }
	.content .box2 .con { height:51.8vw; }
	.content .box2 .con .img, .content .box2 .con .text { height:100%; }
}

@media screen and (max-width: 1024px) {
	.content .box1 { margin-right:0; width:100%;  }
	.content .box1 .con, .content .box2 .con, .content .box3 .con { height:40vw; }
	.content .box2, .content .box3 { width:100%; }
	.content .box2 .con { flex-direction:row; }
	.content .box2 .con .img, .content .box2 .con .text { height:100%; }
	.content .box .con .img .bg { position:static; }
	.content .box3 .con .img { position:static; opacity:1;  }
	.content .box .con { visibility:visible; }
	.content .box5 { width:100% !important; }
	.content .box4 .img, .content .box4 .text { width:50% !important; }
	.content .box5 .overImg { height:100%; width:auto; background:url(../images/06.png), #1C75B6; background-size:contain; background-position:center top; background-repeat:no-repeat; }
	.content .box5 .overImg img { opacity:0; }
	
}

@media screen and (max-width: 680px) {
	.content .box1 .con, .content .box2 .con, .content .box3 .con { height:auto; padding:5% 0;  }
	.content .box1 .con, .content .box2 .con, .content .box3 .con { flex-direction:column; }
	.content .box1 .con .img, .content .box1 .con .text { width:100%; display:block; }
	.content .box2 .con .img, .content .box2 .con .text { display: block; }
	.download { top:auto; bottom:0; width:100%; }
	#main { padding-bottom:130px; }
	.content .box3 .con .img { display:none; }
	.content .box4 .text { width:100% !important; }
}

@media screen and (max-width: 450px) {
	.header .logo { width:150px; }
	.header .logo img { width:100%; }
	.header .right .clearfix .right { width:100px; }
	.header .right .clearfix .right img { width:100%; }
	.header .right .clearfix .right.text { font-size:0.75em; }
}