@charset "utf-8";
@-webkit-viewport { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
@font-face {font-family: 'Myriad Pro'; src: url("../fonts/Myriad-Pro.eot"); src: url("../fonts/Myriad-Pro.eot?#iefix") format('embedded-opentype'), url("../fonts/Myriad-Pro.woff2") format('woff2'), url("../fonts/Myriad-Pro.woff") format('woff'), url("../fonts/Myriad-Pro.ttf") format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Myriadbold';src: url("../fonts/MyriadPro-Bold.eot"); src: url("../fonts/MyriadPro-Bold.eot?#iefix") format('embedded-opentype'), url("../fonts/MyriadPro-Bold.woff2") format('woff2'),url("../fonts/MyriadPro-Bold.woff.woff") format('woff');font-weight: normal;font-style: normal;}
@font-face { font-family: 'JaguarJCBook'; src: url("../fonts/jaguarjc_book.woff2") format('woff2'),  url("../fonts/jaguarjc_book.woff") format('woff'), url("../fonts/jaguarjc_book.ttf"); font-weight: normal; font-style: normal;}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
/* CSS Document */
body { width: 100%; height: 100%; margin: 0 auto; overflow-x: hidden; position: relative; font-size: 100%; line-height: 1; font-weight: normal; font-family: '微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga', 'kern'; -webkit-overflow-scrolling: touch; }
h1 {  font-size: 1.2rem; font-weight: 700; color: #000;     }
h2 { font-size: 2rem; font-weight: 700;  margin: 5% auto; }
h3, h4 { font-size: 1.15em; font-weight: 400; }
h5, h6 { font-size: 1.125em; font-weight: 400 }
h1, h2, h3, h4, h5, h6 { display: block; margin: 0 auto 0.5rem auto }
h1, h2, h3, h4, h5, h6 { line-height: 1.25em }
p { font-size: 1.05rem; color: #000; line-height: 1.75rem;  font-weight: 400; }
a { text-decoration: none; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
a:hover{ color:#900d1c;}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all;}
strong { font-weight: 700; }
.color-b{color: #00a596;}
.color-white{color: #fff!important;}

/* Banner =====================================================================*/
.banner { background: #000; overflow: hidden; line-height: 0px;padding-top: 62px;}
/*.banner .owl-carousel .owl-stage-outer {pointer-events: none;}*/
.banner .wrap { max-width: 1345px; position: relative; }
.play-btn { cursor: pointer; width: 60px !important; height: 60px !important;background-color: inherit !important; border: solid 1px #fff; border-radius: 50%;  z-index: 9999; display: flex;align-items: center;justify-content: center;}
.play-btn img { max-width: 18px;}


/*@media all and (max-width: 1024px) { 
	.banner { margin-top: 87px; } 
}
@media all and (max-width: 480px) { 
	.banner { margin-top: 113px; }
}
*/
.banner-video { width: 100%; position: relative; padding-top: 42.8645833333%; padding-bottom: 0px; overflow: hidden;   }
.banner-video iframe { pointer-events: none; position: absolute; top: -16%; left: -16%; width: 132%; height: 132%; z-index: 9;}
@media all and (max-width: 1024px) {
}
@media all and (max-width: 922px) {
.banner-video iframe { pointer-events: all}
}

.slogan { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; text-shadow: 0 0 10px #000; }
.slogan h1 { color: #fff; font-weight: normal; text-align: center; }
.slogan [class*="font"] { display: block; padding: 10px 0; }
.slogan .fontBig { font-size: 62px; line-height: 62px; }
.slogan .fontMin { font-size: 48px; line-height: 48px; }
.slogan .fontSml { font-size: 18px; line-height: 18px; }
.slogan .red { color: #dd3333; }
.slogan .bothLine { display: flex; justify-content: center; align-items: center; }
.slogan .bothLine:before, .slogan .bothLine:after { content: ''; background: #dd3333; width: 25px; height: 1px; }
.slogan .bothLine:before { margin-right: 30px; }
.slogan .bothLine:after { margin-left: 30px; }
/*.slogan .btn-video { padding: 15px 15px 15px 17px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.5); display: none; position: relative; }
.slogan .btn-video:before { content: '\f04b'; font-family: FontAwesome-Solid; color: #fff; transition: all .3s; }
.slogan .btn-video:after { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; content: ''; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0); opacity: 1; transition: all .3s; }
.slogan .btn-video:hover { border: 1px solid #dd3333; }
.slogan .btn-video:hover:before { color: #dd3333; }
.slogan .btn-video:hover:after { transform: scale(1.3); border: 1px solid white; opacity: 0; }
*/@media all and (max-width: 1024px) {
.slogan .btn-video { display: block; }
}


.video-container{
 width: 100%;
  height: 0;
  position: relative;
  overflow: hidden;
  padding-bottom: 49.25%;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container video{
 position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}




/***banner area=======================================================================
.banner {position: relative;   width: 100%; height: auto; display: block;   z-index: 1;  margin-top: 0px;  }
.banner-img { width: 100%; height: auto;  display: block; position: relative; z-index: 3;}
.banner-img iframe { width: 100%; height: auto;   position: relative; z-index: auto; }
.banner-wrap { width: 100%; margin-top:3rem;   position: absolute;   z-index: 999; }
.header-wrap { position: relative;  z-index: 99; display: block; width: 90%;  margin: 0 auto; text-align: center; }
.wrap-mv:after {content: ''; position: absolute; top: 0; left: 0; width: 100%;  height: 100%;  background:rgba(0,0,0,.4);}
.play-btn { cursor: pointer; width: 60px !important; height: 60px !important;left:20vw;top:2vh;background-color: inherit !important; border: solid 1px #fff; border-radius: 50%;  z-index: 9999;position: absolute; display: flex;align-items: center;justify-content: center;}
.play-btn img { max-width: 18px;}
*/
/*about*/
.about {position: relative; width: 100%; height:auto; display:block; margin:3.153% 0; padding: 0; text-align:center;  vertical-align:middle; }
.about-wrap{width: 100%; max-width: 1440px; display: block; margin:0px auto; padding: 0 .5em;}
.left-box {  width: 100%; height: auto;  padding:1em;display: block; position: relative; z-index: 9; vertical-align:bottom; }
.right-box { margin:0 auto;  width:100%;display:block; position: relative; z-index: 9; background:#fff; vertical-align: top; overflow: hidden; }
.about .inner{  width: 100%;  padding:0 1em;  text-align: left; }
.about h1{ font-size:1.25rem; margin-bottom:5%;  line-height:3.3rem;  color: #005bac; }
.about p{font-size:1rem;  margin-bottom:30px;  }

/***** promotion *****/
.promotion:before {content: ''; position: absolute; display: block;   width: 100%;  height: 100%;  background:rgba(0,0,0,.4);z-index: 1;}
.promotion { width: 100%; height:auto; margin:0 auto; padding:0px; display: block;  text-align: center; vertical-align: top; background: url(../images/index/index-v1.jpg)  no-repeat center top;  background-size:cover; position: relative;z-index: 1; } 
.promotion-wrap{width: 100%; max-width: 1440px; display: block; margin:0px auto; padding:20px .5em; position: relative;z-index: 9;  }
.promotion-left { width:100%;  min-height: auto; margin: 0 1%; padding:0; display:inline-block;  justify-content: center;}
.promotion-right { width:100%;  margin: 0 auto; padding:0; display: block; vertical-align:top; }
.pro{width: 100%; display: block; margin: auto; }
.pro li{width: 100%; display: block; margin:10px auto; text-align: center; vertical-align: top;  } 
.pro li figure{ display: inline-flex; margin: auto;  vertical-align: top; } 
.pro li div{ width:100%; display:block; margin:0 auto;  } 
.pro li h3{font-size: 1.25rem; font-weight: 700;  line-height: 1.6; color: #fff; }
.pro li p{line-height: 1.45; overflow: hidden; text-overflow: ellipsis; color: #fff; display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;}
.icon{ width:80px!important;  height: 80px!important;  margin:0px auto; background: #fff; border-radius: 50%; cursor: pointer;flex-direction:row;align-items: center; justify-content: center; }
.icon img{ width:50px!important; height: 50px!important; vertical-align: top; }

/**depiction****/
.depiction {position: relative; width: 100%; height:auto; display:block; margin:0; padding:40px 0; text-align:center;  vertical-align:middle; background-color: #f9f9f9;}
.index-brand {width: 100%; max-width: 1120px; height:auto; display:flex;  flex-wrap: wrap;  flex-direction:row; justify-content: center; align-items: center;margin:0 auto; padding: 0; text-align:center;  vertical-align:middle; }
.index-brand li {padding:0; width:90%; margin:0 auto;  }

/* Common style */
.grid { position: relative; margin: 0 auto; padding: 0.5em 0; max-width: 1000px; list-style: none; text-align: center;}
.grid figure { position: relative; display: inline-block; float: none; margin: 10px auto; width: 100%; max-width: 480px; overflow: hidden;  text-align: center; cursor: pointer; background:rgba(0,0,0,.6); } 
/*.grid figure { position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 320px; max-width: 480px; max-height: 360px; width: 48%; background: #3085a3; text-align: center; cursor: pointer;}*/
.grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 1;}
.grid figure figcaption { padding: 2rem; color: #fff;  font-size: 1.25rem; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.grid figure figcaption::before,.grid figure figcaption::after { pointer-events: none;}
.grid figure figcaption,.grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/* Anchor will cover the whole item by default For some effects it will show as a button */
.grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0;}
.grid figure h2 { word-spacing: -0.15em; font-weight: 400;}
.grid figure h2 span { font-weight: 700;}
.grid figure h2,.grid figure p { margin: 0;}
.grid figure p { letter-spacing: 1px; font-size: 68.5%;}

/*-------Chico--------*/
figure.effect-chico img {   -webkit-transform: scale(1.12);transform: scale(1.12); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
figure.effect-chico:hover img { opacity: 0.5; -webkit-transform: scale(1); transform: scale(1); }
figure.effect-chico figcaption { padding:1rem;}
figure.effect-chico figcaption::before { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 1px solid #fff; content: ''; -webkit-transform: scale(1.1); transform: scale(1.1);}
figure.effect-chico figcaption::before,figure.effect-chico p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
figure.effect-chico h2 {font-size:1.15rem;    padding: 55% 0 20px 0; letter-spacing:1px; text-align: left; text-shadow:0px 1px rgba(0,0,0,.6); }
figure.effect-chico p { margin: 0 auto; width:90%; text-align: left; line-height: 1.25rem; -webkit-transform: scale(1.5); transform: scale(1.5);}
figure.effect-chico:hover figcaption::before,figure.effect-chico:hover p { opacity: 1; -webkit-transform: scale(1); transform: scale(1); color: #fff; }
figure.effect-chico:hover h2 {padding: 10px 0 20px 20px;   }
@media (max-width: 768px) {figure.effect-chico:hover h2 {padding-top: 10%;   }}
@media (max-width: 414px) {figure.effect-chico:hover h2 {padding-top: 10%; padding-bottom: 10px; }
.figure.effect-chico figcaption::before{top: 10px;bottom: 10px;left: 10px;right: 10px;padding-top: 0;}
}
figure.effect-chico h2::before{  position: absolute;  top: 95%;  left: 50%;  width: 90%; height: 3px; background: #fff;  content: '';  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-50%,-50%,0);  transform: translate3d(-50%,-50%,0);}
figure.effect-chico:hover h2::before{ display: none;}




.application {width: 100%;  text-align: center; padding: 3.153% 0 2% 0;   }
.work { width: 100%;  max-width: 1120px;  margin: 0 auto;  padding: 0 20px; display: block; }
.work li { width: 100%;  height: auto; display: block; padding: 0 2px;   transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; }
.work li:hover{ transform: scale(.9) ; background: #fff; box-shadow: 0px 5px 8px rgba(0,0,0,.1) }
.work li a div {padding: 20px 25px 0 25px;}
.work li a div h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.6; color: #000; }
.work a p{  line-height: 1.6;  text-align: left;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  }
.work .slick-current { transform: translateY(25px);  transition: all .5s ease; -webkit-transition: all .5s ease; moz-transition: all .5s ease;  -o-transition: all .5s ease;  -ms-transition: all .5s ease;}
.work_new {width: 100%;  max-width: 1160px;  margin: 0 auto;  padding: 0 1.64%; display: block;}
.work_new > li {display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; margin-bottom: 30px; transition: all 0.5s ease 0s;}
.work_new > li:hover {box-shadow: 0 0 13px rgba(0, 0, 0, 0.3);}
.work_new > li > div.photo {width: 400px;}
.work_new > li > div.photo > div {height: 0; padding-bottom: 72.6%; overflow: hidden; position: relative; z-index: 1;}
.work_new > li > div.photo > div > div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center;}
.work_new > li > div.photo > div > div img {max-height: 100%; transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.work_new > li:hover > div.photo > div > div img {transform: scale(0.9, 0.9);}
.work_new > li > div.txt {width: calc(100% - 400px); text-align: left; padding: 0 9.75% 0 30px;}
.work_new > li > div.txt h2 {font-size: 1.25rem; font-weight: 700; line-height: 1.6; color: #000; transition: all 0.5s ease 0s;}
.work_new > li:hover > div.txt h2 {color: #005bac;}
.work_new > li > div.txt p {line-height: 1.6;}
.work_new > li > a {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;}
.work_new > li:nth-child(2n+2) > div.photo {order: 2;}
.work_new > li:nth-child(2n+2) > div.txt {order: 1; padding: 0 30px 0 9.75%;}
/**News*/
.news-box { width: 100%;  text-align: center; padding: 2% 0 3.153% 0;  }
.news-wrap { width: 100%;  max-width: 1120px;  margin:8% auto 4% auto;  padding:10px 0; display: block;   }
.news-wrap li { width: 100%;   height: auto; display: block; margin: 0 5px;  padding:0; overflow: hidden; box-shadow: 0px 1px 1px rgba(0,0,0,.5) ;  border: solid 1px rgba(120,120,120,.1);}
.news-wrap li figure {  width: 100%; max-height: 392px;  padding: 0;  margin: 0 auto; display:block; text-align: right; }
.news-wrap li figure img { max-width: 100%; height: auto; display: block; margin:0 auto; padding:0px; }
.news-box .inner { margin:0 auto; padding: 0px ; width:100%;   display: block;  }
.inner-box{ padding:10px; background: #fff;  height: 300px; overflow: hidden; }
.news-box .inner h3 { margin:2% auto 4% auto; font-size: 1.5rem; color: #000; text-align: left;  font-weight:700;  }
.news-box .inner p { padding:5px 0px;   font-size: 1rem;   font-weight: 400; text-align: left;  overflow: hidden;    }
.news-box .inner a h3:hover, .inner a p:hover { color: #3187bc; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; }
.news-box .inner .time { margin:0 auto 5% auto; font-size:.75rem; color:#999999 ; font-weight:700; }
.news-wrap .slick-current { transform: translateY(0px); }
.news-wrap_new {width: 100%;  max-width: 1160px;  margin: 0 auto;  padding:30px 20px 0 20px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.news-wrap_new > li {width: calc(50% - 20px); display: flex; flex-wrap: wrap; margin: 0 0 40px 0;}
.news-wrap_new > li figure {width: 252px; line-height: 0;}
.news-wrap_new > li figure > div {height: 0; padding-bottom: 242px; overflow: hidden; position: relative; z-index: 1;}
.news-wrap_new > li figure > div a {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; border: 1px solid #787878;}
.news-wrap_new > li figure > div a img {max-height: 100%; transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.news-wrap_new > li:hover figure > div a img {transform: scale(0.9, 0.9);}
.news-wrap_new > li div.inner {width: calc(100% - 252px); padding: 0 0 70px 26px; position: relative; z-index: 1;}
.news-wrap_new > li div.inner h3 {margin:2% auto 4% auto; font-size: 1.5rem; color: #000; text-align: left;  font-weight:700;}
.news-wrap_new > li div.inner p {padding:5px 0px;   font-size: 1rem;   font-weight: 400; text-align: left;  overflow: hidden;}
.news-wrap_new > li div.inner .btn-more {text-align: right!important; width: 100%!important; padding: 10px 0!important; position: absolute; bottom: 0; right: 0; z-index: 10;}
@media (max-width:1200px) {
    .application {padding: 40px 0 30px 0;}
    .news-box {padding: 30px 0 40px 0;}
    .work_new {padding: 0 20px;}
    .work_new > li > div.photo {width: 35.7143%;}
    .work_new > li > div.txt, .work_new > li:nth-child(2n+2) > div.txt {width: 64.2857%; padding: 0 20px;}
}
@media (max-width:991px) {
    .news-wrap_new > li {align-content: flex-start;}
    .news-wrap_new > li div.inner {width: 100%; padding: 0 0 70px 0;}
}
@media (max-width:768px) {
    .work_new {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
    .work_new > li {width: calc(50% - 10px);}
    .work_new > li:last-child {margin-bottom: 0;}
    .work_new > li > div.photo, .work_new > li:nth-child(2n+2) > div.photo {order: 1; width: 100%; max-width: 400px;}
    .work_new > li > div.txt, .work_new > li:nth-child(2n+2) > div.txt {order: 2; width: 100%; padding: 10px 20px 20px 20px;}
    .news-wrap_new > li figure {width: 100%; max-width: 252px;}
    .news-wrap_new > li figure > div {padding-bottom: 96.032%;}
}
@media (max-width:576px) {
    .work_new {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
    .work_new > li {width: 100%; max-width: 400px; margin: 0 auto 30px auto;}
    .work_new > li > div.txt, .work_new > li:nth-child(2n+2) > div.txt {text-align: center;}
    .news-wrap_new > li {width: calc(50% - 10px);}
}
@media (max-width:430px) {
    .news-wrap_new > li {width: 100%; max-width: 252px; margin: 0 auto 40px auto;}
    .news-wrap_new > li:last-child {margin: 0 auto;}
}


/**title style*/
h2.title { font-size:1.5rem; font-weight: 700;  color: #333333;  line-height: 1.3;  padding: 0 20px;}
h3.title { font-size: 1.125rem; color: #1c1c1c;  margin-bottom:25px; padding: 0 20px; line-height: 1.6;}




.title-wrap{  float: right; margin: 5% 0 0 0;  display:block; position: relative; z-index: 999; text-align: left; border: solid 1px #000;}
.title-wrap p{ color:#c71e56; font-size:1.35rem;font-weight: 400;   }
.title-1 { display:block;  margin: 3% auto;  width: 100%; max-width: 500px;  font-size: 1.5rem;text-align:center; font-weight: 400; letter-spacing: 5px;}
.title-1::after {content: ""; display: block; margin:5px auto; background:#01a396;  width:10%; height: 3px;    }
.title-2 {   margin:-20% auto 10% 0; width: 100%;  display: block;  font-size: 2.35rem; color: #000; text-align:left; font-weight: 400; letter-spacing: 1px; }
.title-2::after {content: ""; display: block; position: absolute;  margin-left:-30px; margin-top: -20px;  background:#01a396;  width: 25px; height:2px;   }
.title-3 { margin:10% auto 0 50%; padding-left:100px;    display: block;  position: relative; font-size: 2.35rem; color: #000; text-align:left; font-weight: 400; letter-spacing: 1px; background: url(../images/index/h3.jpg)  no-repeat left 20px; }
.title-4 { margin:10% auto 0 1%; padding-left:50px;    display: block;  position: relative; font-size: 1.75rem; color: #000; text-align:left; font-weight: 400; letter-spacing: 1px; background: url(../images/index/h3.jpg)  no-repeat -40px 20px; }
.half{width:100%; display: block; }
.txt-right{ text-align: center; font-weight: 300;} 
/* button --- */
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn { display: block; min-width:130px; line-height:1.25rem; margin:8px auto; padding:10px 15px; font-size: 15px; position: relative; opacity: .999; border-radius: 15px; text-transform: capitalize;  }


.btn-more:before { content: "+";   display: inline-block; margin:5px auto; font-weight: 700;  width:10%;   color: #005bac;}
.btn-more { color: #000;  text-align: center; width: 240px; height: 50px;  display: block; font-size: 1rem; letter-spacing: 0.05rem; margin-top: 10px; }
.btn-more:hover { color: #005bac; } 
.btn-more:active { color: #792223; }

.btn-light:before { content: "+";   display: inline-block; margin:5px auto; font-weight: 700;  width:10%;   color: #005bac;}
.btn-light { color: #fff;  text-align: center; width: 260px; height: 50px;  margin: 0 auto;  display: block; font-size: 1rem; letter-spacing: 0.05rem; margin-top: 0px; }
.btn-light:hover { color: #F3D300; } 
.btn-light:active { color: #792223; }

.btnbox {  width: 100%; margin: 0 auto; display: flex;  justify-content: center;}
.txtcols {  -webkit-column-count: 1;   -moz-column-count: 1;  column-count: 1; column-gap: 80px;}



@media (min-width:768px) {
.content-details { display: block;}
.content:hover .content-overlay{  opacity: 1;}
	
.work li { width: 100%; height: auto; display: block; margin:10px; padding:10px;  position: relative;    transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; }	
.work li figure img{ max-width: 100%; transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out;}
.work a h4{ padding-top:10px; width: 100%; display: block; text-align: left;    }
.work a p{ padding-top:10px;  width: 100%; display: block;  text-align: left; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;   }
.right-box iframe{ height: 80vh; max-height: 500px;   }
.content { position: relative; width: 100%;  max-width: 400px; margin: auto;  overflow: hidden;}
.content .btn {   width:130px;  }
.half{width:45%; display: inline-block; }
.txt-right{ text-align: right;} 

	
}


@media (min-width: 992px) {
/**title style*/
h1.title { font-size: 2.625rem;}
h2.title { font-size: 2.625rem;}
h3.title { font-size: 1.125rem;}
	
.play-btn {  left: 25vw;top:30vh;}
/*about*/
.left-box { width:30%; height: auto;  padding:20px 0 2rem 1rem; display: inline-block; vertical-align: top; text-align: left;}
.right-box { margin:0 auto; padding:0 20px; width:65%;display: inline-block; }	
.about .inner{ background: #fff; width: 100%;  padding:0 1rem; text-align: left; }
.about h1{ font-size: 2.7rem;  font-family: '微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif;; }
.about h2{ font-size: 2.7rem;  font-family: '微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif;; }
.about h3{ font-size: 1.5rem;  font-family: '微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif;; }
.about p{font-size: 1.125rem;  color: #333;   line-height: 1.6;}
	
/*promotion*/
.promotion-left { width:40%; display:inline-block;  justify-content: center; vertical-align:top;}
.promotion-right { width:50%;  display:inline-block;  justify-content: center; vertical-align:top; }
.promotion-wrap{ margin:0px auto;   padding:50px .5rem; }
.pro li{text-align: left;  } 
.pro li div{ width:70%; display:inline-block; margin:3% auto 0 5%;  } 

/*depiction*/
.depiction { padding: 3.153% 0; }
.index-brand li {  padding:0;width: 31.33%; margin:0px 1%;  }
	
/*-------Chico--------*/	
figure.effect-chico h2 {font-size:1.35rem;  padding: 55% 0 20px 0;}
	
.news-wrap li figure {  width: 46%; height: auto;  padding: 0; display: inline-block;  text-align: center; vertical-align: top; }	
.news-wrap .inner { margin:0 auto;  width:53%;   display: inline-block; vertical-align: top; overflow: hidden;  }	
.hot { background-size: 150% auto;   }

.title-1 {   font-size: 2.5rem; }	
.title-4 {  font-size: 2rem;  }
}
.result_style{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 450px;
  padding: 0 20px;
  font-size: 20px;
  line-height: 1.5;
}