@charset "utf-8";
/* CSS Document */
html {display: flex;}
body {min-height: 100vh; width: 100%;display: flex;flex-direction: column;font-family: 'Microsoft JhengHei', 'Noto Sans TC', Arial, sans-serif;line-height: 1.5;letter-spacing: 0.5px;text-align: left;font-weight: normal;overflow-x: hidden;font-size: 16px;}
a {text-decoration: none;transition: all .1s ease-in-out;}
a:link {color: #232323;}
a:visited {color: #232323;}
a:active {color: #9C9C9C;}
h1,h3,h5,h6 {color: #070707;}
.wrapper {width: 1000px;position: relative;margin: 0 auto;clear: both;zoom:1;}
.wrapper:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both; height: 0;}
.container{width: 800px;position: relative;margin: 0 auto;clear: both;zoom:1;}
.container:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both; height: 0;}
@media screen and (max-width: 900px) {.wrapper, .container {width:95%;} }

.bg{background-image: url(../img/bg-top1.svg);background-repeat: no-repeat;background-position:85% top ;background-size: 24%;}
/*.bg:after{content: " ";width: 100%;height: 100%;position: fixed;bottom: 0px;background-image: url(../img/bg-green.svg);background-repeat: no-repeat;background-position:85% top ;background-size: 24%;}*/
.bg::before{content: " ";width: 100%;height: 100%;position: fixed;bottom: 0px;z-index: -1;background-image: url(../img/bg-top2.svg);background-size: 25%;background-repeat: no-repeat;background-position: 15% bottom;}
@media screen and (max-width: 900px) {.bg{ background-position-y: 0%; background-position-x: right; background-size: 40%;}.bg:before{background-size: 50%; background-position-x: left; }}
@media screen and (max-width: 680px){.bg:before{display:none;}}
/*top nav*/
#header {background-image: url(../img/bg-top1.svg);background-repeat: no-repeat;background-size:50%;}
.top_box {width: 100%;position: relative;}
.top{ width:100%;height:50px; text-align:right; padding-right:10px; color: #ffffff; font-weight:bold; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7e4980+0,e59ac1+99 */
background: #fff; /* Old browsers */
background: -moz-linear-gradient(top, #304aa5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #304aa5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,#304aa5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E8504F', endColorstr='#E8504F',GradientType=0 ); /* IE6-9 */
box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
}
.top img {width: 50px;height: 50px;float: right;}
/*首頁*/
.logo-left{display: block; margin-top: 20%; width: 59%;}
.logo-mobile {display: none;}
.logo-right{position: relative;bottom: 120px;z-index: -1;}
.logo-right img{width: 350px;}
.menu-list{width: 650px;margin-top: 50px;float: left;}
.menu-list img{width: 50px;float: left;}
.menu-list h3{line-height: 50px;font-size: 20px;font-weight: bold;color: #707070;padding-left:60px;letter-spacing: 0px;}
.menu-item{padding: 21px 0px;}
.soon:hover a h3.coom  {font-size: 0;line-height: 0;}
.soon:hover a .coom:before{content: attr(data-hover);font-size: 20px;line-height: 50px;}
.menu-list a:hover h3{color: #222;}
.menu-list a:hover .path1:before{color: #E8504F;transition: all .1s ease-in-out;}
.menu-list .singup-icon:hover .path2:before{color: #E8504F;transition: all .1s ease-in-out;}

h3.galler-title{line-height: 1.2;width: 160px;}

/* .singup-icon h3 {line-height: 25px;} 未開放用*/
.singup-icon h3 {line-height: 50px;}
.singup-icon h3 .data, .singup-icon h3 span{font-size: 18px;font-weight: bold;}
.singup-icon:hover .data{display: none;}
@media screen and (max-width: 1344px){.logo-left{display: block; margin-top: 15%;}}
@media screen and (max-width: 900px){
  .logo-left, .logo-right{display: none;}
  .logo-mobile{display: block;margin: 10% auto 0px auto;width: 95%;}
  .logo-right img{width:80%;}
  .logo-right {position: relative;bottom: 200px;left: 10%;}
  .menu-list{width: 100%;margin-top: 30px;margin-left: 15px;}
}
@media screen and (max-width: 680px){
  .menu-list [class^="icon-"], [class*=" icon-"]{width: 50px;float: none;text-align: center;}
  h3.galler-title {width: 100%;}
  .menu-list h3{font-size: 18px;padding-left:0px;line-height: 1.4;}
  .flex-col-4{width: 30.3333%;}
  .mobile-item{text-align: center;}
  .menu-list{margin-left: 0px;}
}

/*flex*/
/*#content {flex: 1 0 auto;}*/
#content {
  flex-grow: 1;
}
.container h2{font-size: 26px;color: #E8504F;font-weight: bold;margin-bottom: 20px;}
.container p {font-size: 16px;line-height: 1.6; text-align: justify;margin-bottom: 28px;}
.flex-row {display: flex; flex-wrap: wrap; justify-content: space-between;}
.flex-row-end {display: flex;    width: 100%;}
.flex-row>.flex-col{width: 47.3333%;}
.flex-row>.flex-col-1{flex: 1;margin-left: 30px;}
.flex-col-2{width: 33.3333%;}
.flex-col-3{width: 30.3333%;}
.flex-col-3 p{font-weight: bold;}
@media screen and (max-width: 900px) {.flex-row>.flex-col-1{flex: auto;margin:0px;}.flex-col-3{width: 100%;}.flex-col-2{width: 30.3333%;}.flex-col h3, .list-text h3{font-size: 16px;}}
@media screen and (max-width: 680px) {.flex-col-2{width: 35.3333%;}}
@media screen and (max-width: 480px) {.flex-col h3, .list-text h3{font-size: 14px;margin-bottom: 8px;}}

/* footer */
#footer , #header{flex-shrink: 0;}

.footer{
font-size: 12px;
font-weight:bold; 
text-align: center;
color: #fff;
width:100%; padding:14px 0px;  
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7e4980+0,e59ac1+99 */
background: #fff; /* Old browsers */
background: -moz-linear-gradient(top, #304aa5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #304aa5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,#304aa5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E8504F', endColorstr='#E8504F',GradientType=0 ); /* IE6-9 */
/*margin-top: 5rem;*/
box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
}