body {margin:0px;}
.cleardiv {clear: both;}
.center {width: 100%; max-width: 1200px; margin: auto; position: relative;}

/*------------ header ------------*/
header {display:block; width:100%; height:80px; position:fixed; top:0px; background:white; z-index:99999;}
header .hd_logo {display:block; height:80px; width:210px; margin-left:15px; position:relative;}
header .hd_logo img {display:block; height:80px; width:auto;}
header .mb_abot {display:none;}
header .nav {display:block; position:absolute; right:15px; top:0px; height:80px;}
header .nav .ab_logo_pc {height:80px; width:auto;}
header .nav li {display:inline-block; vertical-align:top; position:relative; height:80px; padding:0px 15px; overflow:visible;}
header .nav li a {display:block; font-size:16px; line-height:80px; letter-spacing:0px; text-align:center; font-family: '微軟正黑體', 'Microsoft Jhenghei', sans-serif; color:#5F308E; text-decoration:none; font-weight:bold;}
header .nav .sub {display:block; position:absolute; top:80px; left:0px; /*transform:translate(-50%, 0%); -moz-transform:translate(-50%,0%); -webkit-transform:translate(-50%,0%);*/ padding:15px; background:white;}
header .nav .sub li {width: 170px;height:40px; padding:0px 15px;}
header .nav .sub a {display:block; min-width:144px; font-size:16px; text-align:left; color:black; line-height:40px;}
header .nav .sub li.subtitle a{color:#5F308E; border-bottom:1px dotted #5F308E;padding:0; box-sizing: border-box; cursor: default; }
header .nav .sub2 a {min-width:376px;}

header .nav .arrow {display:none;}

header #mbmnu {display:none;}


/*------------ footer ------------*/
footer {display:block; width:100%; position:relative; background:#581C76; box-sizing:border-box; padding:50px;}

footer .ft_abot {display:block; float:left; position:relative;}
footer .ft_abot img {width:100px; height:auto;}
footer .ft_mid {display:block; float:left; position:relative; margin-left:100px; padding-top:5px;}
footer .ft_sns {display:block; float:right; position:relative;}
footer .ft_sns a {display:inline-block; margin-left:6px;}
footer .ft_sns a img {width:35px; height:auto;}

footer p, footer a {font-size:14px; line-height:24px; color:white; font-family: '微軟正黑體', 'Microsoft Jhenghei', sans-serif; letter-spacing:0px;}
footer p {margin-bottom:15px;}
footer a {display:inline-block; text-decoration:underline;}

footer p.copy {font-size:12px; line-height:18px; margin-top:30px;}

footer .ft_lks {position: fixed; right: 80px; bottom: 0px; z-index:999;}
footer .ft_lks a {display: inline-block; vertical-align: bottom; font-size:16px; line-height:16px; color:white; font-weight:bold; padding:18px 20px; max-height:50px; text-decoration: none; border-top-left-radius: 10px; border-top-right-radius: 10px; box-sizing:border-box; text-decoration:none;}
footer .ft_lks a:hover {padding:24px 20px; max-height:62px;}
footer .ft_lks a i {margin: 0px 10px;}
footer .ft_lks a:first-child {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ea6800+0,bd4304+100 */
  background: #ea6800;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#ea6800), to(#bd4304));
  background: linear-gradient(to bottom, #ea6800 0%, #bd4304 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ea6800', endColorstr='#bd4304', GradientType=0);
  /* IE6-9 */
}
footer .ft_lks a:nth-child(2) {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#238ac3+0,1d709f+100 */
  background: #238ac3;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#238ac3), to(#1d709f));
  background: linear-gradient(to bottom, #238ac3 0%, #1d709f 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#238ac3', endColorstr='#1d709f', GradientType=0);
  /* IE6-9 */
}
footer .ft_lks a:nth-child(3) {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#69488e+0,5e318f+100 */
  background: #69488e;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#69488e), to(#5e318f));
  background: linear-gradient(to bottom, #69488e 0%, #5e318f 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#69488e', endColorstr='#5e318f', GradientType=0);
  /* IE6-9 */
}




@media screen and (max-width:1350px) {
	header {height:50px; background:white; width:100%;}

	header .nav {display:none; background:white; width:100vw; height:100vh; top:50px; right:0px; padding-top:25px;}
	header .nav li {display:block; width:100%; position:relative; padding:0px; height:auto;}
	header .nav li a {display:block; width:80%; margin:auto; font-size:18px; line-height:60px; text-align:left; border-bottom:1px solid #e9e9e9;}
	header .nav li:last-child {border-bottom:0px;}
  
	header .nav .sub {position:relative; top:0; left:0; transform:translate(0,0); padding:0px; width:100%;}
	header .nav .sub li {width: auto;height:auto; padding:0px;}
	header .nav .sub a {height:auto; line-height:30px; border-bottom:0px;}
	header .nav .sub li.subtitle a {padding:8px 0;}
	header .nav .sub2 a {height:auto;}
	header .nav .sub a, header .nav .sub2 a {min-width:80%; margin:auto; padding:8px 0px;}
	
	header .hd_logo {height:50px; width:150px;}
	header .hd_logo img {height:50px; width:auto;}

	header .mb_abot {display:block; position:absolute; top:13px; right:60px;}
	header .mb_abot img {height:25px; width:auto;}
  
	header .nav .ablogopc {display:none;}
	
	header .nav .arrow {
	  width: 15px;
	  height: 15px;
	  display: inline-block;
	  position: absolute;
	  top:22px;
	  right:10%;
	}
	header .nav .arrow span {
	  top: 8px;
	  position: absolute;
	  width: 9px;
	  height: 2px;
	  background-color: #5F308E;
	  display: inline-block;
	  -webkit-transition: all 0.2s ease;
	  transition: all 0.2s ease;
	}
	header .nav .arrow span:first-of-type {
	  left: 0;
	  -webkit-transform: rotate(45deg);
	          transform: rotate(45deg);
	}
	header .nav .arrow span:last-of-type {
	  right: 0;
	  -webkit-transform: rotate(-45deg);
	          transform: rotate(-45deg);
	}
	header .nav .arrow.active span:first-of-type {
	  -webkit-transform: rotate(-45deg);
	          transform: rotate(-45deg);
	}
	header .nav .arrow.active span:last-of-type {
	  -webkit-transform: rotate(45deg);
	          transform: rotate(45deg);
	}

	header #mbmnu {display:block; position:absolute; right:17px; top:13px; width:30px; height:25px;}
	header #mbmnu span {display:block; width:30px; height:3px; background:#5F308E;}
	header #mbmnu span:first-child {position:absolute; top:2px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
	header #mbmnu span:nth-child(2) {position:absolute; top:11px; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
	header #mbmnu span:nth-child(3) {position:absolute; top:20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

	header #mbmnu.open span:first-child {top:13px; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
	header #mbmnu.open span:nth-child(2) {display:none;}
	header #mbmnu.open span:nth-child(3) {top:13px; -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
	
	#content {margin-top:50px;}
}


@media screen and (max-width:796px) {

    footer {padding:20px 20px 60px 20px;}
    footer .ft_abot, footer .ft_mid {float:none;}
    footer .ft_mid {margin-left:0px; margin-top:15px;}
    footer .ft_sns {float:none; position:absolute; right:0px; top:0px;}
    footer p, footer a {font-size:12px; line-height:18px;}

    footer .ft_lks {display:flex; justify-content:center; left: 0px; width: 100vw;}
    footer .ft_lks a {float: none; width:calc(100vw/2); -webkit-box-sizing: border-box; box-sizing: border-box; padding:18px 0px; font-size:14px; line-height:14px; text-align:center;}
    footer .ft_lks a:hover {padding:18px 0px;}
    footer .ft_lks a i {display: none;}
    
}