/*--------------------------------------------------------------*/
/*  HG189 Style
/*--------------------------------------------------------------*/
@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(http://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(http://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(http://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(http://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(http://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}
body {
  overflow-x: hidden;
  font-family:Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
  margin:0;
  color:#000;
  background: linear-gradient(#c9c9c9 0%, rgba(201,201,201,0) 30%),url(../images/bg.png) no-repeat bottom center;
  background-size:100%;
}

p {letter-spacing: 2px }
a {outline: none;     text-decoration: none; }
a:hover, a:focus, a:active, a.active {outline: none; }
h1, h2, h3, h4, h5, h6 {font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif; letter-spacing: 2px; }

@media (max-width: 1024px) {
  body{background: linear-gradient(#c9c9c9 0%, rgba(201,201,201,0) 20%),url(../images/bg.png) no-repeat bottom center;}
}


/*--------------------------------------------------------------*/
/*  Header
/*--------------------------------------------------------------*/

/* navbar */
.navbar{z-index:999;box-sizing: border-box; position: fixed; top:0; left:0;right:0;margin:auto;width: 100%; border-bottom:4px solid rgba(0,0,0,0.2);padding: 23px 40px 10px 40px; max-width:1680px;background: linear-gradient(#fff 30%, rgba(255,255,255,0.5) 90%); transition: 0.2s}
.navbar-header {display:inline-block; vertical-align: middle }
.navbar-toggle {display:none; border: none; background: none; font-size: 1.5em; color: #4c4c4c; }
.navbar-brand {display:inline-block; padding-right:20px; vertical-align: middle; font-size: 0;}
.navbar-logo {width:226px;transition: 0.2s}
.navbar-collapse {display:inline-block; vertical-align: middle }
.navbar-nav {margin: 0; padding: 0; list-style: none; }
.nn-list-item {position: relative; display:inline-block; }
.nn-list-item:hover .navbar-subnav{display: block}
.nn-link{display:inline-block; padding: 2px 12px 5px 12px; color:#000; font-size: 1.2em; text-decoration: none; transition: 0.2s }
.nn-link:hover{color:#f00;}
.nn-socal{display:none !important;}
.navbar-search-submit{position: absolute; top: 7px; right: 7px; width:23px; height:23px; border:none;padding:0 !important; background: url(../images/icon-search.gif); }
.navbar-socal{float:right;transition: 0.2s}
.navbar-socal-icon{display:inline-block;padding:5px 0 0 10px;vertical-align: middle;}
.navbar-subnav{display: none; position: absolute; top: 100%; left: 0; margin: 0 0 0 -13px; width: 150px; padding: 12px 37px; list-style: none; border: 1px solid rgba(0,0,0,0.1); border-radius: 15px; background-color: rgba(255,255,255,0.95); box-shadow: 2px 2px 15px rgba(0,0,0,0.1); }
.navbar-subnav:after{position:absolute; top:-14px; left:38px; content:""; border-top:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #fff; border-left:7px solid transparent; }
.navbar-subnav:before{position:absolute; top:-16px; left:37px; content:""; border-top:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid rgba(0,0,0,0.1); border-left:8px solid transparent; }
.ns-list-item{line-height: 20px }
.ns-link{display:block;color:#4c4c4c; text-decoration: none; padding: 0 0px; font-size: 1.1em; line-height: 2em ;transition: 0.2s}
.ns-link:hover{color:#f00;}

@media (max-width: 1280px) {
  .nn-link{padding: 2px 10px 5px 10px; font-size: 1.1em; }
}

@media (max-width: 1024px) {
  .navbar-toggle{display:inline-block;}
  .navbar-nav {display:none;position:fixed;left:0;top:90px;width:100%;border-bottom:2px solid rgba(0,0,0,0.2);padding:10px 0 ;background: linear-gradient(#eee 0%, #fff 20%, #eee 80%, #ddd 100%); text-align: center;box-shadow: 2px 2px 15px rgba(0,0,0,0.2);}
  .nn-list-item {display:block;}
  .navbar-subnav{position: static; margin: 0; width: 100%; padding: 0; border: none; border-radius: 0; background-color:rgba(255,255,255,0);box-shadow: none;}
  .navbar-subnav:before{border:none }
  .navbar-subnav:after{border:none }
  .ns-list-item{list-style: none}
}

@media (max-width: 640px) {
  .navbar{padding: 15px 20px 10px 20px !important}
  .navbar-nav {top:72px;}
  .navbar-brand{padding-right:10px;}
  .navbar-logo{width:180px !important}
  .navbar-socal-icon img{height: 30px;}
}

@media (max-width: 480px) {
  .navbar{padding: 10px 10px 6px 10px !important}
  .navbar-nav {top:60px;}
  .nn-socal{display: block !important;}
  .navbar-socal{display: none}
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  width: 40px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  -webkit-transition: .2s;
  transition: .2s;
}

.slider:hover{background-color: #68b554;}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  /* background-color: #000; */
}

input:focus + .slider {
  /* box-shadow: 0 0 1px #000; */
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* banner */
.header {position:relative;left:0;right:0;margin:167px auto 0 auto; max-width: 1440px;}
.header-banner{width:100%;}

@media (max-width: 1024px) {
  .header {margin-top: 100px;}
}

@media (max-width: 480px) {
  .header {margin-top: 58px;}
}


/*--------------------------------------------------------------*/
/*  Index
/*--------------------------------------------------------------*/

/*video*/
.index-video{margin:auto;width:890px;padding-top:160px;}
.index-phone{position:relative;width:351px;height:709px;background:url(../images/index-phone.png) no-repeat;}
.index-phone-info{position:absolute;top:0;bottom:0;margin:auto;width:100%;height:30px;text-align:center;font-size:1.5em}
.index-phone-content{overflow:hidden;display:none;position: absolute;top:82px;left:15px;width:310px;height:543px;border:1px solid rgba(0,0,0,0.5);}
.index-download{float:right;display:flex;justify-content: space-between;width:500px;padding-top:80px;}
.index-menu{clear:both;float:right;margin:50px 0 0 0;width:500px;}

/*ui-tooltip*/
.ui-tooltip{max-width:150px;border:none;box-shadow: 2px 2px 10px rgba(0,0,0,0.3)}
.ui-tooltip .tooltip-pic{margin-bottom:5px;width:150px;height:150px;background:center;background-size: cover}
.ui-tooltip .tooltip-title{margin:0;padding:0;font-size:1em;}
.ui-tooltip .tooltip-text{margin:0;padding:0;font-size:0.9em;font-family: 'cwTeXHei','Microsoft JhengHei','Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;}

/*fullcalendar*/
.calendar{width:100%;}
tr:first-child>td>.fc-day-grid-event{margin:0 ;}
.fc button{border:none;background:0;}
.fc-scroller {overflow-y: hidden !important;height:auto !important; }
.fc-basic-view .fc-body .fc-row{min-height:5em ;}
.fc-toolbar h2{display:inline-block;font-weight:normal;color:#828282;}
.fc-day-header {height:50px ;}
.fc-day-header span{display:block ;padding-bottom:10px ;border-bottom:3px double #828282 ;color:#828282 ;}
.fc td, .fc th{border:0 ;}
.fc-center h2{vertical-align: middle}
.fc-basic-view .fc-day-top .fc-day-number{float:left !important;padding-bottom:0 ;color:#828282 ;pointer-events:none}
.fc-day-grid-event{margin:0;padding:0 ;}
.fc-event-container{padding:0 8px 10px 2px  !important;}
.fc-event{display:block;margin:0 !important;height:50px;border:1px solid #828282 ;border-radius:0 ;background:no-repeat center;background-size:cover !important;}
.fc-title{display:none;}

/*videomenu*/
.videomenu-open{z-index:999;display:none;box-sizing:border-box;position:fixed;bottom:0;width:100%;padding:15px;text-align:center;background:#333;color:#fff}
.videomenu{display:none;z-index:998;position:fixed;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,0.90);}
.videomenu-header{padding-top:60px;text-align: center}
.videomenu-header-title{display:inline-block;vertical-align: middle;color:#828282}
.videomenu-prev{margin-right:10px;vertical-align: middle;color:#828282;transition:0.2s;cursor:pointer;}
.videomenu-next{margin-left:10px;vertical-align: middle;color:#828282;transition:0.2s;cursor:pointer;}
.videomenu-prev:hover,.videomenu-next:hover{color:#f00;}
.videomenu-list{overflow-y: scroll;margin:0 auto;width:80%;height:70%;padding: 0;list-style: none;}
.videomenu-item{margin:5px 0;border:1px solid rgba(0,0,0,0.2);background: no-repeat center;background-size: cover;cursor:pointer;}
.videomenu-item-hold .videomenu-item-container{background:rgba(0,0,0,0.8)!important;box-shadow:0 0 100px rgba(0,0,0,0.5)inset;}
.videomenu-item-container{padding:30px 15px;background:rgba(0,0,0,0.3);transition:0.2s;}
.videomenu-item-container:hover{padding:30px 15px;background:rgba(0,0,0,0.5);}
.videomenu-item-title{margin:0;padding:0;text-align: center;font-weight:normal;color:#fff;text-shadow: 0 0 10px rgba(0,0,0,0.8)}
.videomenu-item-date{margin:0;padding:0;text-align: center;font-weight:normal;font-size:0.9em;color:#fff;text-shadow: 0 0 10px rgba(0,0,0,0.8)}

@media (max-width: 1024px) {
  .index-video{width:740px;}
  .index-download{width:360px;}
  .index-download img{width:110px;}
  .index-menu{width:360px;}
}

@media (max-width: 768px) {
  .index-video{width:600px;padding-top:120px;}
  .index-phone{margin:auto;}
  .index-download{float:none;display:block;justify-content: none;width:100%;text-align:center;padding:0 0 20px 0;}
  .index-download img{width:25%;padding:0 10px;}
  .index-menu{margin:0;}
  .calendar{display:none;}
  .videomenu-open{display:block;}
}

@media (max-width: 640px) {
  .index-video{width:100%;padding-top:120px;}
  .index-download img{width:100px;padding:0 5px;}
}

@media (max-width: 480px) {
  .index-video{width:100%;padding-top:80px;}
  .index-download img{width:90px;padding:0;}
  .index-phone{width:300px;height:605px;}
  .index-phone-content{overflow:hidden;position: absolute;top:82px;left:15px;width:265px;height:464px;border:1px solid rgba(0,0,0,0.5);}
}

@media (max-width: 320px) {
  .index-video{width:100%;padding-top:70px;}
  .index-download {position:fixed;left:0;right:0;margin:auto;width:100%;}
  .index-phone{width:280px;height:564px;background:none}
  .index-phone-content{overflow:hidden;position:fixed;top:20%;left:0;right:0;margin:auto;width:90%;height:70%;}
}


/*--------------------------------------------------------------*/
/*  About
/*--------------------------------------------------------------*/
.about{}
.about-content{max-width:920px;}
.about-block{display:flex;justify-content: space-between;align-items: center;padding-top:30px;}
.about-text{padding-top:20px;}

@media (max-width: 1024px) {
  .about-block1 img{width:30%;height:auto;}
  .about-block2 img{width:15%;height:auto;}
}

@media (max-width: 640px) {
  .about-block{padding-top:10px;}
  .about-text{padding-top:10px;}
}

@media (max-width: 480px) {
  .about-text{font-size:0.8em;line-height: 1.5em}
}


/*--------------------------------------------------------------*/
/*  News
/*--------------------------------------------------------------*/
.news{height:auto!important;max-width: 1680px;}
.news-list{margin:0;padding:0;list-style:none;}
.news-item{display:flex;justify-content: space-between;align-items: flex-start;padding:30px;}
.news-item h2{margin-top:0;font-size:1.3em;color:#000}
.news-item a {color:#000;text-decoration:none!important;}
.news-item a .news-text{text-decoration:underline!important;}
.news-item img{width:40%;padding-right:50px;}
.news-item>div{width:60%;}

@media (max-width: 1024px) {
  .news-item img{width:40%;height:auto;padding-right:30px;}
}

@media (max-width: 768px) {
  .news-item img{width:30%;padding-right:30px;}
  .news-item h2{font-size:1.2em;}
}

@media (max-width: 640px) {
  .news-item {display:block;justify-content: none;padding:30px 20px;}
  .news-item img{width:100%;height:auto;padding-right:0;padding-bottom:20px;}
  .news-item>div{width:100%;}
}

@media (max-width: 480px) {
  .news-item {padding:20px 10px;}
  .news-item h2{font-size:1em;}
  .news-item .news-text{font-size:0.8em;line-height: 1.5em}
}


/*--------------------------------------------------------------*/
/*  Service
/*--------------------------------------------------------------*/
.service{}
.service-content{max-width:860px;}
.service-content div{display:flex;justify-content: space-between;align-items: center;}
.service-content ul{display:flex;justify-content: space-between;align-items: center;margin:0;padding:0;list-style:none;}
.service-content h2{margin:50px 0 30px 0;text-align:center;font-size:1.4em;}
.service-content h3{margin:12px 0 10px 0;padding:0;text-align:center;font-size:1.2em;}
.service-content p{margin:0px 0 0 0;padding:0;text-align:center;line-height:1.5em;}
.service-content img{padding:0; width:100%;}
.service-content span{width:45%;}
.service-content .service-title-s{margin-bottom:0;padding-bottom:0;}
.service-content .service-subtitle-s{margin-top:0;padding-top:0;font-size:1em;}
.service-list1 li{width:30%;}
.service-list2 li{width:22.5%;}
.service-list3 li{width:47%;}
.list2 {width: 22%;display: inline-grid;border:2px solid gray;margin: 1%;text-align: center;}
.list2 > p {height: 4em;} 
.list3 {width: 49%;display:inline-grid;}


@media (max-width: 1024px) {
  .service-list1 img{width:100%;height:auto;}
  .service-list2 img{width:100%;height:auto;}
  .service-list3 img{width:100%;height:auto;}
  .service-content ul br{display:none;}
}

@media (max-width: 768px) {
  .service-content h2{margin:30px 0 20px 0;font-size:1.2em;}
  .service-content h3{margin:6px 0 8px 0;}
  .service-content p{margin:6px 0 8px 0;}
}

@media (max-width: 480px) {
  .service-content div{clear:both;display:block;justify-content: none;align-items: none;}
  .service-content ul{clear:both;display:block;justify-content: none;align-items: none;}
  .service-content h2{clear:both;margin:30px 0 20px 0;font-size:1.5em;}
  .service-content li{clear:both;width:100%;padding-bottom:15px;}
  .service-content li:after{content:"";clear:both;width:100%;height:10px;}
  .service-content li img{float:left;width:30%;padding-right:15px;padding-bottom:15px;}
  .service-content li h3{text-align:left;padding-top:50px;font-size:1.2em;}
  .service-content li p{text-align:left;font-size:1.2em;}
  .service-content .service-title-s{margin-bottom:10px;padding-bottom:0;}
  .service-content .service-subtitle-s{margin-top:10px;padding-top:0;padding-bottom:10px;}
  .list2 {width:45%;} 
  .list2 > p {height: 5em;} 
  .list3 {width:100%;} 
}

@media (max-width: 480px) {
  .service-content li h3{padding-top:20px;}
}


/*--------------------------------------------------------------*/
/*  Contact
/*--------------------------------------------------------------*/
.contact{}
.contact-content{display:flex;justify-content: space-between;width:70%;padding-top:10px;}
.contact-block{border-radius:5px;background:rgb(245,245,245);width:46%;margin-top: 10px;}
.contact-block h2{margin-top:0;border-radius:5px;border:2px dashed #8e8e8e;padding:8px 12px;background:#ddd;font-size:1.1em;}
.contact-block ul{margin: 0;padding: 15px;list-style: none;}
.contact-block li{padding: 20px 15px;}
.contact-block img{vertical-align: middle;padding-right:18px;}

@media (max-width: 1024px) {
  .contact-content{width:86%;}
  .contact-block ul{padding: 10px;}
  .contact-block li{padding: 10px 8px;}
  .contact-block img{padding-right:18px;}
}

@media (max-width: 768px) {
  .contact-block ul{padding: 0 10px 10px 10px;}
  .contact-block li{padding: 5px 8px;}
  .contact-block img{width:32px;height:auto;}
}

@media (max-width: 640px) {
  .contact-content{display:block;justify-content: none;}
  .contact-block{width:100%;}
}


/*--------------------------------------------------------------*/
/*  Article
/*--------------------------------------------------------------*/

/*article*/
.article{margin:0 auto;min-width:240px;max-width:1680px;min-height:360px;padding-top:160px;}
.article-header{margin:0 auto;width:86%;padding-bottom:10px;}
.article-title{margin:0;text-align:center;font-size: 1.8em;font-weight: 100;vertical-align: middle}
.article-title:before{content:"";display:inline-block;width:27px;height:27px;margin-right:10px;background:url(../images/icon-cube.png);vertical-align: middle}
.article-title:after{content:"";display:inline-block;width:27px;height:27px;margin-left:10px;background:url(../images/icon-cube.png);vertical-align: middle}
.article-subtitle{margin:5px 0 0 0;text-align:center;font-size: 1.1em;font-weight: 100;line-height:1.8em;color:#777;}
.article-content{margin:0 auto;width:86%;font-size: 1.1em;line-height:2em;text-align: justify; text-justify: inter-ideograph;}

@media (max-width: 768px) {
  .article{padding-top:120px;}
  .article-title{ margin:23px 0 0 0;font-size: 1.8em }
  .article-content{line-height:1.6em}
}

@media (max-width: 480px) {
  .article{padding-top:80px;}
  .article-title{font-size: 22px }
  .article-content{font-size: 0.9em ;line-height:1.4em}
}

@media (max-width: 320px) {
  .article{padding-top:60px;}
}


/*--------------------------------------------------------------*/
/*  Footer
/*--------------------------------------------------------------*/

.footer{clear:both;padding:120px 0 56px 0;color:#4c4c4c;text-align: center;font-size: 1em}

@media (max-width: 768px) {
  .footer{padding:80px 0 36px 0;}
}

@media (max-width: 768px) {
  .footer{padding:40px 0 30px 0;}
} 

@media (max-width: 480px) {
  .footer{padding:20px 0;}
}

/*--------------------------------------------------------------*/
/*  Tool
/*--------------------------------------------------------------*/

/*ui*/
.ui-btn-info{border: 1px solid rgba(0,0,0,0.2);padding:7px 25px;border-radius:30px;color:#4c4c4c;font-size: 1.1em;text-decoration: none;transition: 0.2s}
.ui-btn-info:hover{border:1px solid #25a5d7;background: #25a5d7;color: #fff}
.ui-btn-info-white{border: 1px solid rgba(255,255,255,.2);padding:7px 25px;border-radius:30px;color:#fff;font-size: 1.1em;text-decoration: none;transition: 0.2s}
.ui-btn-info-white:hover{border:1px solid #25a5d7;background: #25a5d7;color: #fff}

/*float align*/
.float-left{float:left;}
.float-right{float:right;}
.float-center{margin:0 auto;}
.t-left{text-align:left !important}
.t-right{text-align:right !important}
.t-center{text-align:center !important}
.valign-box{display:inline-block;vertical-align:middle;width:0;height:100%;visibility:hidden;}

/*clear*/
.clear-left{clear:left;}
.clear-right{clear:right;}
.clear-both{clear:both;width:100%}
.clear-fix{clear:both;}
.clear-fix:after{content:".";clear:both;display:block;font-size:0;height:0;line-height:0;visibility: hidden;}

/*--------------------------------------------------------------*/
/*  Faq
/*--------------------------------------------------------------*/

.faq{margin-bottom:40px;}
.faq-title{color:#8d0205;font-size: 14px;font-weight:normal;transition: 0.2s}
.faq-list{margin-bottom:24px;padding:0;list-style: none}
.faq-list-item{margin-bottom:8px;border-radius:10px;padding:8px 20px;background:#f1f0ef;cursor:pointer;transition: .1s}
.faq-list-item:hover{color:#fff!important;background:#e10012}
.faq-list-item:hover .faq-question{color:#fff!important;}
.faq-list-item--open {margin-bottom: 40px;}
.faq-list-item--open .faq-question{color:#e10012;font-weight:bold;;}
.faq-list-item--open .faq-ans{}
.faq-question{margin:5px 0;color:#666;font-size: 16px;font-weight: normal;transition: 0.2s}
.faq-ans{display:none;padding:0;font-size: 1.1em;line-height: 2em;}
.faq-ans p{margin:0;font-size: 15px;line-height: 2em}

@media (max-width: 768px) {
  .faq-list{padding:0;}
  .faq-question{font-size: 1.2em;}
  .faq-ans {line-height: 1.5em}
}

@media (max-width: 480px) {
  .faq-question{font-size: 16px;line-height: 1.5em}
  .faq-ans {font-size: 15px;}
}

/*fixnav*/
.fixnav{z-index:9999;position: fixed;bottom:24px;right:24px;}
.fixnav-item{position:relative;margin-bottom: 10px}
.fixnav-icon{border-radius: 50%;width:68px;height:68px;user-select:none;}
.fixnav-backtop{width:64px;height:64px;display: flex;align-items: center;justify-content: center;border:3px solid rgb(245, 125, 0);border-radius:50%;background: #fff}
.fixnav-backtop .fa{font-size: 24px;color:rgb(245, 125, 0);}
.fixnav-popup{position:absolute;bottom:0;right:calc(100% + 10px);display:none;padding:10px; text-align: center;background: #fff;box-shadow: 5px 5px 15px rgba(0,0,0,.2);}
.fixnav-popup:after{position:absolute; bottom:20px; right:-14px; content:""; border-top:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid transparent; border-left:7px solid #fff; transform: translateY(-50%);}

@media (max-width: 480px) {
  .fixnav{right:12px;}
  .fixnav-item{position:relative;margin-bottom: 6px;text-decoration: none!important;}
  .fixnav-icon{width:48px;height:48px;}
  .fixnav-line .fixnav-popup img{width:220px;}
  .fixnav-backtop .fa{font-size: 18px;}
  .fixnav-backtop{width:42px;height:42px;}
}