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

html {
  position: relative;
  min-height: 100%;
}
body {
  margin :0;
  padding:0;
  height:100%;
  /* Margin bottom by footer height */
  /* font-family: "paralucent","微軟正黑體", "Microsoft JhengHei", sans-serif; */
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  margin-bottom: 48px;
  background-color: #F5F5F5;
  font-size: 13px;
  color: #595959;
}


p,span{
	margin: 0;
	padding: 0;
}

fieldset,img{
	border:0;
	word-break:break-all;
}
a,a:hover,a:active,input,button{
	outline:none !important;
	text-decoration: none !important;
}
/*
ol,ul {list-style:none;}
*/

.container {
  position: relative;
  width: 100%;
  min-height: 100%;
}
.container-fluid {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}
.footer{
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 48px;
  min-width: 100%;
  background-color: #303030;
  z-index: 555;
}
.footer-right{
  text-align: center;
  font-size: 12px;
  color: #FFF;
  line-height: 48px;
  padding-right: 10px;
}

.top_margin{
	position: relative;
  margin-top: 0px;
  height: 0;
}

.fixed-header{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1198;
}
.fixed-open{
  position: fixed;
  top: 20px;
  left: 15px;
  z-index: 9999;
}

/*mobile menu*/
.xs-mainmenu{
  position: fixed;
  width: 100%;
  min-width: 100%;
  height:100%;
  min-height:100%;
  left: 0px;
  top: 0px;
  overflow-x:hidden;
  overflow-y:auto;
  z-index: 1198;
  display: none;
  background-image: url(../images/xs-bg.png);
  background-repeat: repeat;
}

ul.xs-mainmenu-link{
  list-style:none;
  margin-top: 30px;
  padding: 50px;
  padding-left: 60px;
  padding-right: 20px;
  width: 100%;
  height: auto;
  text-align: center;
}
ul.xs-mainmenu-link li{
  position: relative;
  height:auto;
  width: 300px;
  text-align: left;
  margin-right: auto;
  margin-left: auto;

}
ul.xs-mainmenu-link li a{
  width: auto;
  color: #FFF;
  text-decoration: none;
  margin:0px;
  display: inline-block;
  font-weight: bold;
  position: relative;
  overflow: hidden;
}
ul.xs-mainmenu-link li a:hover,
ul.xs-mainmenu-link li a.nowtag{
  text-decoration: none;
}

ul.xs-mainmenu-link li.bigitem{

  color: #FFF;
  text-decoration: none;
  padding: 5px;
  display: block;
  font-weight: bold;
  position: relative;
  overflow: hidden;
}
ul.xs-mainmenu-link li.bigitem a{
  font-size: 26px;
  line-height: 28px;
  color: #FFF;
  display: inline-block !important;
  padding: 5px;
}

ol.xs-childmenu{
  list-style:none;
  height:auto;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
ol.xs-childmenu li{
  height:auto;
  width: 100%;
}
ol.xs-childmenu li.childitem a{
  width: auto;
  font-size: 15px !important;
  line-height: 24px !important;
  color: #FFF;
  text-decoration: none;
  margin:0px;
  padding: 5px;
  display: inline-block;
  font-weight: normal;
  position: relative;
  overflow: hidden;
}
ol.xs-childmenu li.childitem a:hover,
ol.xs-childmenu li.childitem a.nowtag{
  text-decoration: underline !important;
  background-color: transparent !important;
}

ul.xs-mainmenu-link li a.tag-about:hover,
ul.xs-mainmenu-link li a.tag-about.nowtag{
  background-color: #5280FF;
  text-decoration: none;
}
ul.xs-mainmenu-link li a.tag-vision:hover,
ul.xs-mainmenu-link li a.tag-vision.nowtag{
  background-color: #FF5642;
  text-decoration: none;
}
ul.xs-mainmenu-link li a.tag-product:hover,
ul.xs-mainmenu-link li a.tag-product.nowtag{
  background-color: #610080;
  text-decoration: none;
}
ul.xs-mainmenu-link li a.tag-app:hover,
ul.xs-mainmenu-link li a.tag-app.nowtag{
  background-color: #611EFF;
  text-decoration: none;
}
ul.xs-mainmenu-link li a.tag-news:hover,
ul.xs-mainmenu-link li a.tag-news.nowtag{
  background-color: #FFA100;
  text-decoration: none;
}
ul.xs-mainmenu-link li a.tag-contact:hover,
ul.xs-mainmenu-link li a.tag-contact.nowtag{
  background-color: #27B5AB;
  text-decoration: none;
}
ul.xs-mainmenu-link li a.tag-link:hover,
ul.xs-mainmenu-link li a.tag-link.nowtag{
  background-color: #BFD500;
  text-decoration: none;
}


@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

/*相關共用------------------------------------*/

.img-responsive{
  min-width:100%;
}
.img-maxwidth{
  max-width:100%;
}
.img-maxwidth img{
  max-width:100%;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #595959 !important;
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

.fh1{
	font-family: Arial,'Meiryo UI',"微軟正黑體", "Microsoft JhengHei", Helvetica, sans-serif;
	font-size: 20px;
	color: #ED6D00;
	text-decoration: none;
	font-weight: bold;
	line-height: 28px;
}
.fh1 a{
	font-family: Arial,'Meiryo UI',"微軟正黑體", "Microsoft JhengHei", Helvetica, sans-serif;
	font-size: 20px;
	color: #ED6D00;
	font-weight: bold;
	line-height: 28px;
}


.ke-content{
	margin: 0;
	padding: 5px;
	background-color: #FFFFFF;
	font-family: "nimbus-sans","微軟正黑體", "Microsoft JhengHei", Helvetica, sans-serif;
	line-height: 22px;
	font-size: 14px;
	color: #333;
}

.paralucent{
	font-family: "paralucent", "微軟正黑體", "Microsoft JhengHei", sans-serif !important;
}

.nimbussans{
  font-family: "nimbus-sans", "微軟正黑體", "Microsoft JhengHei",'Meiryo', sans-serif !important;
}

.bold{
	font-weight: bold;
	font-weight: 700;
}


.lineh-1{
	line-height: 26px;
}
.lineh-2{
  line-height: 22px;
}
.bg-white{
  background-color:#FFF; 
}
.bg1{
  background-color:yellow; 
}
.bg2{
  background-color:skyblue; 
}

.green01{
  color: #5AE1E1;
}
.green01:hover{
  color: #5AE1E1;
}
.green02{
  color: #2CB600;
}
.red01{
  color: red;
}
.white,.white:active,.white:focus{
  color:#FFF; 
}
a.white:hover{
  color:#FFF; 
  text-decoration: underline !important;
}

.purple,.purple:active,.purple:focus{
  color:#610080; 
}
a.purple:hover{
  color:#610080; 
  text-decoration: underline !important;
}


.black,.black:active,.black:focus{
  color:#000; 
}
a.black:hover{
  color:#000; 
  text-decoration: underline !important;
}

.underline{
  text-decoration: underline !important;
}

.margintop5{
  margin-top: 5px;
}
.margintop15{
  margin-top: 15px;
}
.margintop30{
  margin-top: 30px;
}
.margintop50{
  margin-top: 50px;
}
.margintop60{
  margin-top: 60px;
}
.margintop80{
  margin-top: 80px;
}
.margintop100{
  margin-top: 100px;
}

.marginleft10{
  margin-left: 10px;
}
.marginleft15{
  margin-left: 15px;
}
.marginleft20{
  margin-left: 20px;
}
.marginleft25{
  margin-left: 25px;
}
.error{
  color: red;
}


.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #b50033;
  border-color: #b50033;
}

/* white btn*/
a.whitebtn,button.whitebtn{
  background-color: #FFF;
  line-height: 24px;
  color: #999;
  font-size: 13px;
  display: inline-block;
  border: 2px solid #999 !important;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}
/* black btn*/
a.blackbtn,button.blackbtn{
  background-color: #515151;
  line-height: 24px;
  width: auto;
  color: #FFF;
  font-size: 13px;
  display: inline-block;
  border: 2px solid #515151 !important;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}


/*
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*/
/* define bootstrap 5 columns */
.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
   position: relative;
   min-height: 1px;
   padding-right: 10px;
   padding-left: 10px;
}
 
.col-xs-1-5 {
   width: 20%;
   float: left;
}

@media (min-width: 768px) {
   .col-sm-1-5 {
        width: 20%;
        float: left;
   }
}
@media (min-width: 992px) {
   .col-md-1-5 {
        width: 20%;
        float: left;
   }
}
@media (min-width: 1200px) {
   .col-lg-1-5 {
        width: 20%;
        float: left;
   }
}

@media (max-width: 767px) {

}


.load{
    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.5s; /* Firefox < 16 */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera < 12.1 */
            animation: fadein 0.5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* back style */
.purple-h1{
  font-size: 32px;
  color: #610080;
  font-weight: bold;
  padding-bottom: 5px;
  padding-top: 15px;
}

.purple-h2{
  font-size: 26px;
  color: #610080;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 15px;
  line-height: 32px;
}


/* japan font*/
.jafont{
  font-family: "paralucent",'Meiryo UI', sans-serif !important;
}

.jafont .paralucent{
  font-family: "paralucent",'Meiryo UI', sans-serif !important;
}

.jafont .nimbussans{
  font-family: "nimbus-sans",'Meiryo', sans-serif !important;
}

.enfont{
  font-family: "archivo-expanded", sans-serif;
}