@charset "utf-8";
/* CSS Document */

.parent {
	cursor: pointer;
	font-size:var(--topnav-font-size);
	font-weight:bold;
	display: block;
	position: relative;
	float: var(--topnav-float);/*left;*/
	line-height: var(--topnav-line-height);/*30px;*/
	background-color:var(--topnav-background-color);/*transparent;*/
	color: var(--topnav-font-color);
	border-right: var(--topnav-border);}/*#CCC 1px solid;}/*background-color: #4FA0D8;*/
.parent a{margin: var(--topnav-a-margin);/*10px;*/
	color: var(--topnav-font-color);/*#FFFFFF;*/
	text-decoration: none;}
.parent:hover > ul {
	display:block;
	position:absolute;}
.parent_active {
	cursor: pointer;
	font-size:var(--topnav-active-font-size);
	font-weight:bold;
	display: block;
	position: relative;
	float: var(--topnav-float);/*left;*/
	line-height: var(--topnav-line-height);/*30px;*/
	color: var(--topnav-active-font-color);
	background-color: var(--topnav-active-background-color);/*transparent;*/
	border-right:var(--topnav-border);}/*#CCC 1px solid;}/*background-color: #4FA0D8;*/
.parent_active a{margin: var(--topnav-a-margin);/*10px;*/
	color: var(--topnav-active-font-color);/*#F00;/*#FFFFFF;*/
	text-decoration: none;} 
.parent_active:hover > ul {
	display:block;
	position:absolute;}
		
.child {display: none;}
.child li {
	background-color: var(--topnav-child-color);/*#939;/*#E4EFF7;*/
    /*background: rgb(var(--topnav-child-color));/*rgb(2,0,36);*/
    /*background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 46%, rgba(0,212,255,1) 100%);/*cssgradient.io*/
    /*background: linear-gradient(var(--topnav-child-lgradient), var(--topnav-child-lgradient-rgba0), var(--topnav-child-lgradient-rgba1), var(--topnav-child-lgradient-rgba2), var(--topnav-child-lgradient-rgba3), var(--topnav-child-lgradient-rgba4));/*cssgradient.io*/
    /*background: linear-gradient(var(--topnav-child-lgradient), var(--topnav-child-lgradient-rgba0), var(--topnav-child-lgradient-rgba1), var(--topnav-child-lgradient-rgba2));/*cssgradient.io*/

	line-height: var(--topnav-line-height);/*30px;*/
	border-bottom:var(--topnav-border);/*#CCC 1px solid;*/
	border-right:var(--topnav-border);/*#CCC 1px solid;*/ 
	font-size:var(--topnav-child-font-size);
	/*color: var(--topnav-child-font-color);*/
    /*border-top-right-radius: 10% 50%;
    border-bottom-right-radius: 20%;*/
    border-top-right-radius: var(--topnav-child-tr-radius);
    border-bottom-right-radius: var(--topnav-child-br-radius);
	width:100%;}
/*.child li {line-height: 30px;
	border-bottom:#CCC 1px solid;
	border-right:#CCC 1px solid; 
	width:100%;}*/
/*.child li a{color: #000000;}*/

ul{list-style: none;
padding-left:1vw;min-width:10em;}
/*ul{list-style: none;margin: 0;padding: 0px; min-width:10em;}*/
/*ul ul ul{left: 100%;top: 0;margin-left:1px;}*/
li:hover {
	background-color: var(--topnav-hover-color);
}/*#030;}/*#95B4CA;}*/
/*.parent li:hover {background-color: #F0F0F0;}
/*.expand{font-size:12px;float:right;margin-right:5px;}
/*.parent1 {display: block;position: relative;line-height: 30px;background-color: #4FA0D8;border-right:#CCC 1px solid;}
.parent1 a{margin: 10px;color: #FFFFFF;text-decoration: none;}
.parent1:hover > ul {display:block;position:absolute;}*/
/*#myUL {
  margin: 0;
  padding: 0;
}*/

.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
  font-size: var(--popmenu-font-size);
  color: var(--popmenu-font-color);
}

.caret::before {
  content: "\25B6";
  /*color: black;*/
  color: var(--popmenu-font-color);
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);  
}
.caret:hover {
  background-color: var(--popnav-end-hover);/*#009;/*var(--tab-btn-active-color);*/
}

.caret_top {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    /*font-size: var(--popmenu-font-size);*/
    font-size: 12px;/*由word控制*/
    color: var(--popmenu-font-color);
  }
  
.caret_top::before {
    content: "\25B6";
    /*color: black;*/
    color: var(--popmenu-font-color);
    display: inline-block;
    margin-right: 6px;
}
  
.caret_top-down::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);  
}
.caret_top:hover {
    background-color: var(--popnav-end-hover);/*#009;/*var(--tab-btn-active-color);*/
}
.nested {
  display: none;
}

.active {
  display: block;
}
.caret1 {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
  font-size: var(--popmenu-font-size);
  color: var(--popmenu-font-color);
}
.caret1:hover {
  background-color: var(--popnav-hover);/*#903;/*var(--popnav-end-hover);/*#009;/*var(--tab-btn-active-color);/*#ddd;*/
}
.caret1.active {
  background-color: var(--popnav-active);/*#009/*var(--tab-btn-active-color);/*#ddd;*/
}
.word {
	font-size:var(--popmenu-font-size);
	/*font-size:18px;*/
	/*font-size:1.25vw;*/
	color:var(--popmenu-font-color);
}
.div_added{
	position: absolute;
}
#menu_hor {
	display:var(--hor-text-list-display);/*block;*/
	color:var(--hor-text-list-color);
	font-weight:bold;
    font-size: var(--hor-text-list-size);
}
body{
    font-size:12px;
}
input[type="text"]
{
    font-size:24px;
}
select
{
    font-size:20px;
}
body, html {
	width:100%;
	margin:0;
}
#main{
	margin:0;
	padding:0;}
.background {
/*#header{*/	
  background-image: linear-gradient(var(--gradient-deg),rgba(var(--gradient-rgb-from),var(--gradient-alpha-from)) var(--gradient-position-from),rgba(var(--gradient-rgb-to), var(--gradient-alpha-to)) var(--gradient-position-to)) ,var(--background-url);

  min-height: var(--background-height);/*640px;/*380px;*/
  margin-top:var(--background-margin);/*0;*/
  padding-top:var(--background-padding);/*0;*/
  width:var(--background-width);/*100%;*/

  /* Center and scale the image nicely */
  background-position: var(--background-position);/*center;*/
  background-repeat: var(--background-repeat);/*no-repeat;*/
  background-size: var(--background-size);/*cover;*/
  
  /* Needed to position the navbar */
  position: relative;
}

/* Position the navbar container inside the image */
.container {
	position: absolute;
	top:var(--popnav-container-top);
/*	margin: var(--popnav-container-margin);/*20px;*/
/*	width: var(--popnav-container-width);/*auto;*/
/*	right:var(--popnav-container-right);/*10vw;*/
	left:var(--popnav-container-left);/*auto;*/	
}
.container_menu {
	position: absolute;
	top:var(--topnav-container-top);
	/*margin: var(--topnav-container-margin);/*20px;*/
	width: var(--topnav-container-width);/*auto;*/
	/*right:var(--topnav-container-right);/*auto;*/
	left:var(--topnav-container-left);/*10vw;*/	
}
.container_hor {
	position: absolute;
	top:var(--hor-container-top);
	/*margin: var(--hor-container-margin);/*20px;*/
	width: var(--hor-container-width);/*auto;*/
	/*right:var(--hor-container-right);/*auto;*/
	left:var(--hor-container-left);/*10vw;*/	
}
.container_title {
	position: absolute;
	/*margin: var(--topnav-container-margin);*//*20px;*/
	width: var(--title-container-width);/*auto;*/
	top:var(--title-container-top);
	/*bottom:	var(--title-container-buttom);*/
	/*right:var(--title-container-right);/*auto;*/
	left:var(--title-container-left);/*10vw;*/	
}
#title_text {
	color:var(--title-font-color);
	font-weight:bold;
    font-size: var(--title-font-size);
    /*font-size: 3vw;*/
}
.container_logo {
	position: absolute;
	/*margin: var(--topnav-container-margin);*//*20px;*/
	width: var(--logo-container-width);/*auto;*/
	top:var(--logo-container-top);
	/*bottom:	var(--logo-container-buttom);*/
	/*right:var(--logo-container-right);/*auto;*/
	left:var(--logo-container-left);/*10vw;*/	
}
#logo_title{
	color:var(--logo-title-font-color);
	font-weight:bold;
    font-size: var(--logo-title-font-size);
}
.container_description {
	position: absolute;
	/*margin: var(--topnav-container-margin);*//*20px;*/
	width: var(--description-container-width);/*auto;*/
	top:var(--description-container-top);
	/*bottom:	var(--description-container-buttom);*/
	/*right:var(--description-container-right);/*auto;*/
	left:var(--description-container-left);/*10vw;*/	
}
.container_ads {
	position: absolute;
	/*margin: var(--topnav-container-margin);*//*20px;*/
	width: var(--ads-container-width);/*auto;*/
	top:var(--ads-container-top);
	/*bottom:	var(--description-container-buttom);*/
	/*right:var(--description-container-right);/*auto;*/
	left:var(--ads-container-left);/*10vw;*/	
}
#title_description{
	color:var(--description-title-font-color);
	font-weight:bold;
    /*font-size: var(--description-title-font-size);*/
    font-size: var(--description-title-font-size1);
}
/*row_add_area*/
/*end_of_row_add_area*/
/*column_add_area*/
/*end_of_column_add_area*/
input[class="button0"]{
	color:var(--button0-color);
	background-color:var(--button0-background-color);
	border:0px;
	/*transition-duration:var(--button0-transition-duration);*/
	}	
input[class="button0"]:hover{
	color:var(--button0-hover-color);
	background-color:var(--button0-hover-background-color);
	border:0px;
	}
input[class="button1"]{
	color:var(--button1-color);
	background-color:var(--button1-background-color);
	border:0px;
	}	
input[class="button1"]:hover{
	color:var(--button1-hover-color);
	background-color:var(--button1-hover-background-color);
	border:0px;
	}
input[class="button2"]{
	color:var(--button2-color);
	background-color:var(--button2-background-color);
	border:0px;
	}	
input[class="button2"]:hover{
	color:var(--button2-hover-color);
	background-color:var(--button2-hover-background-color);
	border:0px;
	}
input[class="button3"]{
	color:var(--button3-color);
	background-color:var(--button3-background-color);
	border:0px;
	}	
input[class="button3"]:hover{
	color:var(--button3-hover-color);
	background-color:var(--button3-hover-background-color);
	border:0px;
	}
input[class="button4"]{
	color:var(--button4-color);
	background-color:var(--button4-background-color);
	border:0px;
	}	
input[class="button4"]:hover{
	color:var(--button4-hover-color);
	background-color:var(--button4-hover-background-color);
	border:0px;
	}
input[class="button5"]{
	color:var(--button5-color);
	background-color:var(--button5-background-color);
	border:0px;
	}	
input[class="button5"]:hover{
	color:var(--button5-hover-color);
	background-color:var(--button5-hover-background-color);
	border:0px;
	}
.prod{
	margin:5%;
}
/*.WIN_cell{
	}*/
/*#WIN_table{
	border:var(--win_preview-border);
	margin-top:var(--win_preview-margin-top);
	margin-left:var(--win_preview-margin-left);
	}*/	
.textarea_added{
	margin-top:var(--textarea_added-margin-top);
	margin-left:var(--textarea_added-margin-left);
	}	
.cell_style{
	border:0;
	background-color:transparent;
	color:null;
    margin:0;
    border-radius:0;
    padding:0;
    font-size:var(--cate-font-size);

	}
.textarea_style{
	border:null;
	background-color:transparent;
	color:null;
    margin:0;
    border-radius:0;
    padding:0;
    font-size:null;
	}
.cell_style0{
	font-size:var(--cell_style0-font-size);
	font-weight:var(--cell_style0-font-weight);
	color:var(--cell_style0-color);
	text-align:var(--cell_style0-text-align);
	background-color:var(--cell_style0-background-color);
	border:0;
    margin:0;
    border-radius:0;
    padding:0;
}
.cell_style1{
	font-size:var(--cell_style1-font-size);
	font-weight:var(--cell_style1-font-weight);
	color:var(--cell_style1-color);
	text-align:var(--cell_style1-text-align);
	background-color:var(--cell_style1-background-color);
	border:0;
    margin:0;
    border-radius:0;
    padding:0;
}
.cell_style2{
	font-size:var(--cell_style2-font-size);
	font-weight:var(--cell_style2-font-weight);
	color:var(--cell_style2-color);
	text-align:var(--cell_style2-text-align);
	background-color:var(--cell_style2-background-color);
	border:0;
    margin:0;
    border-radius:0;
    padding:0;
}
.cell_style3{
	font-size:var(--cell_style3-font-size);
	font-weight:var(--cell_style3-font-weight);
	color:var(--cell_style3-color);
	text-align:var(--cell_style3-text-align);
	background-color:var(--cell_style3-background-color);
	border:0;
    margin:0;
    border-radius:0;
    padding:0;
}
.cell_style4{
	font-size:var(--cell_style4-font-size);
	font-weight:var(--cell_style4-font-weight);
	color:var(--cell_style4-color);
	text-align:var(--cell_style4-text-align);
	background-color:var(--cell_style4-background-color);
	border:0;
    margin:0;
    border-radius:0;
    padding:0;
}
.cell_style5{
	font-size:var(--cell_style5-font-size);
	font-weight:var(--cell_style5-font-weight);
	color:var(--cell_style5-color);
	text-align:var(--cell_style5-text-align);
	background-color:var(--cell_style5-background-color);
	border:0;
    margin:0;
    border-radius:0;
    padding:0;
}

#blog_menu{
	background: var(--modal-body-background-color);
	background: linear-gradient(
		  var(--gradient-body-deg),
		  rgba(var(--gradient-body-rgb-left),var(--gradient-body-alpha-left)) var(--gradient-body-position-left),
		  rgba(var(--gradient-body-rgb-middle),var(--gradient-body-alpha-middle)) var(--gradient-body-position-middle),
		  rgba(var(--gradient-body-rgb-right),var(--gradient-body-alpha-right)) var(--gradient-body-position-right));
	/*display:var(--recruit_menu-display);*/
	/*background-color:var(--blog_menu-background-color);
	width:var(--blog_menu-width);*/
}

/* The Modal (background) */
.modal {
  /*display: none; /* Hidden by default */
  /*position: fixed; /* Stay in place */
  /*z-index: 1; /* Sit on top */
  /*padding-top: var(--modal-padding-top);/*0;/*100px; /* Location of the box */
  /*right: var(--modal-right);/*0;*/
  /*top: var(--modal-top);/*0;*/
  /*width: var(--modal-width);/*50%; /* Full width */
  /*height: var(--modal-height);/*100%; /* Full height */
  /*overflow: auto; /* Enable scroll if needed */
  /*background-color: rgb(0,0,0);/*rgb(var(--modal-background-fallback)); /* Fallback color */
  /*background-color: rgba(0,0,0,0.4);/*rgba(var(--modal-background-fallback),var(--modal-background-alpha)) /* Black w/ opacity */

  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0;/*0;/*100px; /* Location of the box */
  left: var(--modal-start-left);/*50vw;/*0;*/
  top:  var(--modal-start-top);/*0;*/
  width: var(--modal-width);/*50vw;/*50%; /* Full width */
  height: var(--modal-height);/*100%;/*100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0);/*rgb(var(--modal-background-fallback)); /* Fallback color */
  background-color: rgba(0,0,0,0.4);/*rgba(var(--modal-background-fallback),var(--modal-background-alpha)) /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
/*  background-color: var(--modal-content-color);/*#fefefe;*/
/*  margin: var(--modal-content-margin);/*auto;*/
/*  padding: var(--modal-content-padding);/*0;*/
  /*border: 1px solid #888;*/
/*  width: var(--modal-content-width);/*100%;/* 80 */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
/*  box-shadow: var(--modal-boxshadow1-hori) var(--modal-boxshadow1-vert) var(--modal-boxshadow1-blur) var(--modal-boxshadow1-spread) rgba(var(--modal-boxshadow1-rgb),var(--modal-boxshadow1-alpha)),var(--modal-boxshadow2-hori) var(--modal-boxshadow2-vert) var(--modal-boxshadow2-blur) var(--modal-boxshadow2-spread) rgba(var(--modal-boxshadow2-rgb),var(--modal-boxshadow2-alpha));
  /*-webkit-animation-name: animateright;*/
  -webkit-animation-name: var(--modal-animation-name);/*animateleft;*/
  -webkit-animation-duration: var(--modal-animation-dur);/*0.4s;*/
  animation-name: var(--modal-animation-name);/*animateleft;*/
  animation-duration: var(--modal-animation-dur);/*0.4s*/
}
.modal-header {
    padding: 2px 16px;;/*2px 16px;*/
    height:8vh;/*8vh;*/
    background: var(--modal-header-background-color);/* rgb(92,184,92);*/
    /*background: linear-gradient(90deg, rgba(92,184,92,1) 0%, rgba(9,69,6,1) 100%, rgba(92,184,92,1) 100%);*/
    background: linear-gradient(
          var(--gradient-deg),
          rgba(var(--gradient-rgb-left),var(--gradient-alpha-left)) var(--gradient-position-left),
          rgba(var(--gradient-rgb-middle),var(--gradient-alpha-middle)) var(--gradient-position-middle),
          rgba(var(--gradient-rgb-right),var(--gradient-alpha-right)) var(--gradient-position-right));
    /*background-color: #5cb85c;/*#5cb85c;*/
    /*color: var(--modal-header-color);/*white;*/
  }
.modal-body {
	padding: 2px 16px;/*2px 16px;*/
	height:95vh;/*95vh;*/
	background-color:black;/*black;*/
	/*background: var(--modal-header-background-color);*/
	/*background: linear-gradient(
		  var(--gradient-body-deg),
		  rgba(var(--gradient-body-rgb-left),var(--gradient-body-alpha-left)) var(--gradient-body-position-left),
		  rgba(var(--gradient-body-rgb-middle),var(--gradient-body-alpha-middle)) var(--gradient-body-position-middle),
		  rgba(var(--gradient-body-rgb-right),var(--gradient-body-alpha-right)) var(--gradient-body-position-right));*/
	}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 3fr;
}	
/* Add Animation */
@-webkit-keyframes animatetop {
	from{
		top:var(--animation-from);
		opacity:var(--animation-opacity-from);}
	to  {
		top:var(--animation-to);
		opacity:var(--animation-opacity-to);}	
  /*from {top:-300px; opacity:0} 
  to {top:0; opacity:1}*/
}

@keyframes animatetop {
	from{
		top:var(--animation-from);
		opacity:var(--animation-opacity-from);}
	to  {
		top:var(--animation-to);
		opacity:var(--animation-opacity-to);}	
  /*from {top:-300px; opacity:0}
  to {top:0; opacity:1}*/
}
@-webkit-keyframes animateleft {
	from{
		left:var(--animation-from);
		opacity:var(--animation-opacity-from);}
	to  {
		left:var(--animation-to);
		opacity:var(--animation-opacity-to);}	
  /*from {left:0; opacity:0} 
  to {left:300px; opacity:1}*/
}
@keyframes animateleft {
	from{
		left:var(--animation-from);
		opacity:var(--animation-opacity-from);}
	to  {
		left:var(--animation-to);
		opacity:var(--animation-opacity-to);}	
  /*from {left:0; opacity:0}
  to {left:300px; opacity:1}*/
}
@-webkit-keyframes animateright {
	from{
		right:var(--animation-from);
		opacity:var(--animation-opacity-from);}
	to  {
		right:var(--animation-to);
		opacity:var(--animation-opacity-to);}	
  /*from {right:-50vw; opacity:0} 
  to {right:0vw; opacity:1}*/
}

@keyframes animateright {
	from{
		right:var(--animation-from);
		opacity:var(--animation-opacity-from);}
	to  {
		right:var(--animation-to);
		opacity:var(--animation-opacity-to);}	
  /*from {right:-50vw; opacity:0}
  to {right:0vw; opacity:1}*/
}
@-webkit-keyframes animatebottom {
	from{
		bottom:var(--animation-from);
		opacity:var(--animation-opacity-from);}
	to  {
		bottom:var(--animation-to);
		opacity:var(--animation-opacity-to);}	
}
@keyframes animatebottom {
	from{
		bottom:var(--animation-from);
		opacity:var(--animation-opacity-from);}
	to  {
		bottom:var(--animation-to);
		opacity:var(--animation-opacity-to);}	
}

/* The Close Button */
.close {
  color:var(--close-font-color);
  float: var(--modal-close-float);/*right;*/
  font-size: var(--close-font-size);
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: var(--close-hover-font-color);/*#000;*/
  text-decoration: none;
  cursor: pointer;
}



.modal-header {
  padding: var(--modal-header-padding-top-buttom) var(--modal-header-padding-left-right);/*2px 16px;*/
  height:var(--modal-header-height);/*8vh;*/
  background-color: var(--modal-header-background-color);/*#5cb85c;*/
  /*color: var(--modal-header-color);/*white;*/
}

/*.modal-body {
padding: var(--modal-body-padding-top-buttom) var(--modal-body-padding-left-right);/*2px 16px;*/
/*height:var(--modal-body-height);/*95vh;*/
/*background-color:var(--modal-body-color);/*black;*/
/*}*/

/*.modal-footer {
  padding: var(--modal-footer-padding-top-buttom) var(--modal-footer-padding-left-right);
  height:var(--modal-footer-height);
  background-color: var(--modal-footer-background-color);
  color: var(--modal-footer-color);
}*/
#menu
{	display:var(--topnav-menu-display);/*none;*/
}
/* 行動版面: 480px 以下。 */
#burger_menu {
	position: absolute;
    cursor: pointer;
	top:5vh;
/*	margin: var(--popnav-container-margin);/*20px;*/
/*	width: var(--popnav-container-width);/*auto;*/
/*	right:var(--popnav-container-right);/*10vw;*/
	left:90vw;/*auto;*/	
}
/*#burger_menu{
	display: var(--burger_menu-display);/*block;*/
/*	width:var(--burger_menu-width);
	height:var(--burger_menu-height);
	border:var(--burger_menu-border);/*5px solid red;*/
/*	background-color:var(--burger_menu-background-color);/*ransparent;/*#F00;*/
/*    border-radius: var(--burger_menu-border-radius);
	margin-top:var(--burger_menu-margin-top);
	margin-left:var(--burger_menu-margin-left);
}*/
#Login{
	/*background-color: #663232;*/
    background: rgb(113,8,138);
    background: linear-gradient(90deg, rgba(113,8,138,1) 0%, rgba(43,40,43,1) 48%, rgba(113,8,138,1) 100%);
	width: 9vw;
	margin-left: 5vw;
	height: 3vh;
	margin-top:0;
	text-align: center;
	vertical-align: middle;
    border-radius: 3px;  /*圓角*/
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	color: white;
}
#Login:hover {  /*當滑鼠移至此區塊時，伸縮區塊*/
	cursor: pointer;
	height: 3vh;
	width: 10vw;
    margin-left: 5vw;
	opacity:30%;
	transition: 200ms ease;
}
#user_name{
	padding-right: 2px;  /*讓標題與連結中間有空隙*/
	padding-left: 2px;
	height: 3vh;
	vertical-align: middle;
}
.line {
	background-color: #06c755;
	width: 30px;
	/*margin-left: 5px;*/
	height: 30px;
	/*margin-top:0;*/
	text-align: center;
	vertical-align: middle;
    border-radius: 3px;  /*圓角*/
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	color: white; 
	display:table-cell;
}
.line:hover {  /*當滑鼠移至此區塊時，伸縮區塊*/
	cursor: pointer;
	height: 30px;
	width: 35px;
    margin-left: 5px;
	opacity:30%;
	transition: 200ms ease;
	display:table-cell;
}
.container-intro{
	background: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 46%, rgba(0,212,255,1) 100%);/*cssgradient.io*/
	color: #ffffff;
	/*font-size:12px;*/
	padding-top: 30px;
	/*padding:50px;*/
}
.container-intro1{
	background: rgb(149,61,143);
	background: linear-gradient(90deg, rgba(149,61,143,1) 0%, rgba(114,42,126,1) 50%, rgba(108,7,158,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
	color: #ffffff;
	/*font-size:12px;*/
	padding-top: 30px;
	/*padding:50px;*/
}
.container-intro2{
	background: rgb(69,129,47);
	background: linear-gradient(90deg, rgba(69,129,47,1) 0%, rgba(42,98,41,1) 52%, rgba(26,166,16,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
	color: #ffffff;
	/*font-size:12px;*/
	padding-top: 30px;
	/*padding:50px;*/
}
.container-intro3{
	background: rgb(180,66,118);
	background: linear-gradient(90deg, rgba(180,66,118,1) 0%, rgba(145,62,113,1) 52%, rgba(166,16,115,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
	color: #ffffff;
	/*font-size:12px;*/
	padding-top: 30px;
	/*padding:50px;*/
}
.container-intro4{
	background: rgb(182,76,89);
	background: linear-gradient(90deg, rgba(182,76,89,1) 0%, rgba(157,56,76,1) 50%, rgba(189,12,72,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
	color: #ffffff;
	/*font-size:12px;*/
	padding-top: 30px;
	/*padding:50px;*/
}
.body-intro{
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 46%, rgba(0,212,255,1) 100%);/*cssgradient.io*/
    color: #ffffff;
}
.body-intro1{
    background: rgb(149,61,143);
    background: linear-gradient(90deg, rgba(149,61,143,1) 0%, rgba(114,42,126,1) 50%, rgba(108,7,158,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
    color: #ffffff;
}
.body-intro2{
    background: rgb(69,129,47);
    background: linear-gradient(90deg, rgba(69,129,47,1) 0%, rgba(42,98,41,1) 52%, rgba(26,166,16,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
    color: #ffffff;
}
.body-intro3{
    background: rgb(180,66,118);
    background: linear-gradient(90deg, rgba(180,66,118,1) 0%, rgba(145,62,113,1) 52%, rgba(166,16,115,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
    color: #ffffff;
}
.body-intro4{
    background: rgb(182,76,89);
    background: linear-gradient(90deg, rgba(182,76,89,1) 0%, rgba(157,56,76,1) 50%, rgba(189,12,72,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
    color: #ffffff;
}
.header-jumbo{
    background: rgb(5,5,5);
    background: linear-gradient(90deg, rgba(5,5,5,1) 0%, rgba(45,45,1,1) 35%, rgba(17,18,1,1) 100%);
    color: #ffffff;
}
.header-jumbo1{
    background: rgb(113,8,138);
    background: linear-gradient(90deg, rgba(113,8,138,1) 0%, rgba(43,40,43,1) 48%, rgba(113,8,138,1) 100%);
    color: #ffffff;
}
.header-jumbo2{
  background: rgb(138,115,8);
  background: linear-gradient(90deg, rgba(138,115,8,1) 0%, rgba(37,31,19,1) 48%, rgba(34,10,122,1) 100%);
  color: #ffffff;
}
.header-jumbo3{
	background: rgb(9,9,9);
	background: linear-gradient(90deg, rgba(9,9,9,1) 0%, rgba(74,74,77,1) 100%, rgba(18,18,18,1) 100%);
    /*background: rgb(214,210,190);
    background: linear-gradient(90deg, rgba(214,210,190,1) 0%, rgba(248,249,250,1) 48%, rgba(213,208,232,1) 100%);*/
  	color: #ffffff;
}
.header-jumbo4{
  background: rgb(50,4,8);
  background: linear-gradient(90deg, rgba(50,4,8,1) 0%, rgba(93,7,41,1) 48%, rgba(55,2,13,1) 100%);
  color: #ffffff;
}
.container-intro{
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 46%, rgba(0,212,255,1) 100%);/*cssgradient.io*/
color: #ffffff;
/*font-size:12px;*/
padding-top: 30px;
/*padding:50px;*/
}
.container-intro1{
background: rgb(149,61,143);
background: linear-gradient(90deg, rgba(149,61,143,1) 0%, rgba(114,42,126,1) 50%, rgba(108,7,158,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
color: #ffffff;
/*font-size:12px;*/
padding-top: 30px;
/*padding:50px;*/
}
.container-intro2{
background: rgb(69,129,47);
background: linear-gradient(90deg, rgba(69,129,47,1) 0%, rgba(42,98,41,1) 52%, rgba(26,166,16,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
color: #ffffff;
/*font-size:12px;*/
padding-top: 30px;
/*padding:50px;*/
}
.container-intro3{
background: rgb(180,66,118);
background: linear-gradient(90deg, rgba(180,66,118,1) 0%, rgba(145,62,113,1) 52%, rgba(166,16,115,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
color: #ffffff;
/*font-size:12px;*/
padding-top: 30px;
/*padding:50px;*/
}
.container-intro4{
    background: rgb(182,76,89);
    background: linear-gradient(90deg, rgba(182,76,89,1) 0%, rgba(157,56,76,1) 50%, rgba(189,12,72,1) 100%, rgba(0,212,255,1) 100%, rgba(121,9,49,1) 100%);
    color: #ffffff;
    /*font-size:12px;*/
    padding-top: 30px;
    /*padding:50px;*/
}
.footerText{
    color: var(--footerText-color);/*#ff0000;*/
}
.pic{
    width:80vw;
    height:80vw;
    /*padding: 30px;*/
}
.pic1{
    width:15vw;
    height:15vw;
    /*padding: 30px;*/
}
.pic2{
    width:25vw;
    height:25vw;
    /*padding: 30px;*/
}
.table_A {
    display: table;
}
.row_A {
    display: table-row;
}
.cell_A {
    display: table-cell;
	vertical-align:top;
}
h3, .h3 {
	font-size:16px;
 }
h6, .h6 {
	font-size:12px;
 }
@media only screen and (min-width: 481px) {
	/*.container-intro{
	font-size:24px;
	}*/
	.area{
		width:30vw;
	}
    .pic{
        width:30vw;
        height:30vw;
    }
    .pic1{
        width:15vw;
        height:15vw;
    }
	.pic2{
		width:15vw;
		height:15vw;
		/*padding: 30px;*/
	}
    body{
        font-size:24px;
    }
    input[type="text"]
    {
        font-size:24px;
    }
	h3, .h3 {
   		font-size:25px;
	}
	h6, .h6 {
		font-size:20px;
	 }
}
@media only screen and (min-width: 860px) {
}    
/*#left_nav{
	display: none;
}*/
/*#recruit_left_nav{
	display: none;
}*/
/*.caret1 {
	font-size:5vw;
}
.word {
	font-size:5vw;
}*/
/*.Row {
    display: table;
    width: 100%; /*Optional*/
    /*table-layout: fixed; /*Optional*/
    /*border-spacing: 10px; Optional*/
/*}
.Column {
    display: table-cell;
    /*background-color: red; Optional*/
/*}

/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */