/* CSS Document */
* { -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; }
html { font-size: 100%; }  
body { font-family: 'Noto Sans TC', 'Microsoft Jhenghei', '微軟正黑體', 'Roboto', sans-serif!important; overflow-x:hidden; margin:0; padding:0; height: 100%; position: relative; }
h1 {  font-size: 2.35rem; font-weight: 400; color: #2e3160;     }
h2 { font-size: 2rem; font-weight: 400;  margin: 5% auto; color: #2e3160;}
h3, h4 { font-size: 2rem; 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;  font-family: 'Noto Sans TC', 'Microsoft Jhenghei', '微軟正黑體', 'Roboto', sans-serif!important;font-weight: 400!important; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25em }
p, td, li, label { font-size: 1rem;   color: #6a6a6a; line-height: 1.5rem;   font-weight: 400!important;}
a {  color:#454b4f; text-decoration: none!important; -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 }
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; }

#cms-main { /*background:url("../images/idx-bg.png") no-repeat 50% 20% #eae6e1;*/}
 /**banner
=================================*/
.cms-main-banner{ width: 90%; height: auto; margin:0px auto 0px auto; padding: 10px 0 0 0; overflow: hidden;  position: relative; z-index: 0; box-shadow: 10px 30px 30px rgba(0,0,0,.3);}
.cms-main-banner img{ width: 100%; max-width: 100%;  height: auto;}
@media (max-width: 767.98px) {
    .cms-main-banner{ width: 100%; height: auto;  margin:0px auto;}
}
/*-------------------*/
/***** 關於我們純文字區塊 *****/
/*------------------*/
.cms-main-about{position: relative; z-index: 0; padding:0; margin: 0; /*background-image:url("../images/index/left-01.png"),url("../images/index/right-01.png"); background-repeat: no-repeat; background-position:left 25vh , right top; background-attachment: scroll; background-size:25% auto,35% auto; */ }
.cms-main-about-content {width: 60%;  max-width:600px; margin:0 auto 0 1rem; padding:120px 10px;   display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;  }
.cms-main-about-txt{  margin:20px 0; line-height:2.5rem;  color:#000;   }
@media (max-width: 767.98px) {
.cms-main-about{  background-position:left bottom , right top;  background-size:45% auto,45% auto;  }
.cms-main-about-content {width: 100%;  max-width:600px; margin:0 auto 0 1rem; padding:120px 10px;   display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;  }
    
}
 
/*-------------------*/
/***** 最新消息列表 *****/
/*------------------*/
.cms-main-news{position: relative; z-index: 0; padding:0; margin: 0; background: url("../images/index/bg-news.jpg") no-repeat left top; background-size:35% auto;  display: flex;  flex-wrap: wrap; justify-content: flex-end; }
.cms-main-news-list { display: flex; flex: 0 0 80%;  flex-wrap: wrap; margin:0 auto ;  padding:20px;}
.cms-main-news-list li { flex: 0 0 100%;  display: flex;    padding:10px;   transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; border-bottom: solid 1px rgba(0,0,0,.1);   }
.cms-main-news-list li:hover{ transform: scale(.99) ; }
.cms-main-news-list a { width: 100%;  display: flex;   flex-wrap: wrap; }
.cms-main-news-list a span{    flex: 0 0 20%;  font-size: 0.875rem; line-height: 1.6; color: #454b4f; text-align: left; display: flex; align-content: center; align-items: center; }
.cms-main-news-list li a h4 { flex: 0 0 80%;  font-size:1.25rem; font-weight:400; line-height: 1.6; color:#28282C; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;   }

@media (max-width: 767.98px) {
 .cms-main-news{ display: none; }
.cms-main-news-list {  flex: 0 0 100%;   padding:20px 10px;}
}
/*-------------------*/
/***** 圖文4方格 *****/
/*------------------*/

.cms-main-blog { width: 100%; padding: 0px; margin:4% auto 0 auto; position: relative;   z-index:11; background-image:url("../images/index/title-left.png"),url("../images/index/title-right.png"); background-position:-5vw 2vh,80vw 15vh;  background-size:25% auto, 25% auto;  background-repeat: no-repeat; background-color: #fff;}
.cms-main-blog .cms-item{display: flex; width: 100%; margin: 30px 15px; padding:0px; height: auto; position: relative; transition: all 0.3s linear 0s;}
.cms-main-blog .cms-item:hover { box-shadow: 0 1px 35px 0 rgba(0, 0, 0, 0.3);}
.cms-main-blog .cms-item figure { position: relative; overflow: hidden;  width:100%; max-width:100%; height: auto; align-items: flex-start;   transition: all 0.5s ease 0s; }
.cms-main-blog .cms-item figure img {  width: 100%; max-width: 100%; transition: all 0.3s;}
.cms-main-blog.cms-item:hover figure img { transform: scale(1.1);  opacity: 0.6;}
/*.cms-item figure .date { position: absolute;  top: 20px;  right: 20px; background: #ac0b0b;  color: #fff;  font-weight: bold; border-radius: 100%;  height: 55px; width: 55px; display: flex; flex-direction: column; align-items: center; font-size: 12px; text-transform: uppercase;}
*/
.cms-main-blog .cms-item-inner { position: relative; width: 100%; height: 140px; bottom:0px;  padding:20px 5px;  }
.cms-main-blog .cms-item-inner .cms-item-tag {  position: absolute; top: -30px;  left: 0; color: #fff; text-transform: uppercase; background:#8a5b1e;  padding: 10px 15px;  font-size:0.875rem; font-weight: bold;  border-bottom-left-radius:15px;   border-top-right-radius:15px;   }
.cms-main-blog .cms-item-title { margin: 0; padding: 0 0 10px; color: #6d430d; font-size:1.15rem; font-weight: 700;}
.cms-main-blog .cms-item-text p{ margin:0px; padding: 0 ; font-size:0.9rem;  line-height: 1.5rem;  overflow: hidden; text-overflow: ellipsis;   text-overflow: initial;  display: -webkit-box;  -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.cms-main-blog .slick-current { transform: scale(1.1);  transition: all .5s ease; -webkit-transition: all .5s ease; moz-transition: all .5s ease;  -o-transition: all .5s ease;  -ms-transition: all .5s ease;}	
.cms-main-blog .slick-dots {bottom:-60px;  }	
 @media screen and (max-width: 767px) {
 .cms-main-blog { margin:14% auto 0 auto;  background:url("../images/index/title-right.png") no-repeat 80vw 10vh ;  background-color: #fff; background-size:25% auto; }
.cms-main-blog .cms-item-inner .cms-item-tag { padding: 5px 10px;  font-size:0.75rem;  }
}

/*-------------------*/
/*****產品4方格 *****/
/*------------------*/
.cms-main-product{ position: relative; padding:5rem 0px; }
.cms-main-product-item { width:98%; max-width:1360px;   margin:3% auto;  display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;  }
.cms-main-product-item li{  display: flex;flex-wrap: wrap; justify-content: center; align-items: center;  width:100%;  margin:80px 10px 0px 10px; padding:20px 10px; position: relative;  transition: all 0.5s ease 0s; background: #fff; }
.cms-main-product-item li img{ width:100%; max-width: 90%; height: auto; align-items: flex-start;   transition: all 0.5s ease 0s; }
.cms-main-product-item li img:hover{  transform: scale(0.9); }
.cms-main-product-item li:hover h3{transform: scale(0.9); }
.cms-main-product-item li h3{  justify-content: center; margin: 0 auto 10px auto; font-size:1.15rem; font-weight: 400;  text-align: center; line-height:1.4rem;  color:#000;   transition: all 0.5s ease 0s;  text-transform: capitalize; overflow: hidden;   word-break: keep-all;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
.cms-main-product-item li p{ font-size:0.875rem; color:#726A6A; margin: 0 auto 10px auto; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: pre;}
.cms-main-product-item li span.cms-main-product-price{ display: flex; justify-content: center;    margin: 0 auto 10px auto;font-size:1rem; color:#6971c7;  font-weight: 700; }
.cms-main-product-item li:after,.cms-main-product-item li:before {pointer-events: none; content: ''; width: 95%; height: 95%; box-sizing: border-box;  position: absolute; top:8px;  left: 5px;  transform: scale(1); transition: 0.5s;}
.cms-main-product-item li:after { border-top: 1px solid #ced1ec;  border-right: 1px solid #ced1ec; }
.cms-main-product-item li:before { border-bottom: 1px solid #ced1ec; border-left: 1px solid #ced1ec;  }
 

.cms-main-product-note { position: absolute; top:-50px; left: 0; width: 200px; height: 150px;   font-size: 0.875rem; text-align: left; line-height: 1.5em; text-shadow:none; z-index: 11; }
.cms-main-product-note.cms-main-product-note-sale {  color: #cc3333; padding:10px 0px 0px 50px; background: url("../images/icon/note.png") no-repeat left top;  background-size:55px 40px;}
.cms-main-product-note.cms-main-product-note-stock { color: #ff9900; padding:10px 0px 0px 50px; background: url("../images/icon/note-1.png") no-repeat left top;  background-size:55px 40px;}

 

/*cms-Title Styles 樣式
=================================*/
/*Style 1
=================================*/

.cms-title-h1 { display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: justify; -ms-flex-pack: justify;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center; align-items: center;}
.cms-title-h1 h1{ margin:1rem auto; font-weight: 400; color:#2e3160;}
.cms-title { margin: auto;  display: flex; justify-content: center;  align-items: center; flex-wrap: wrap; flex-direction: column; }
.cms-title span{ display:block; font-size:.875rem;color: #6e77ce;  } 
.cms-title::before{  content: ''; -webkit-flex-grow: 1;  -ms-flex-positive: 1; flex-grow: 1;  width: 100%;  height: 15px; background: url("../images/index/title-line.png") right top/contain no-repeat;  }
.cms-title::after { content: '';  -webkit-flex-grow: 1;  -ms-flex-positive: 1; flex-grow: 1; width: 100%; height:15px;  background: url("../images/index/title-line.png") left top/contain no-repeat;  }
.cms-title::before { margin-bottom:10px}
.cms-title::after { margin:0px}


 @media screen and (max-width: 767px) {
 .cms-title::before { display: none;}
}

/*Style 2
=================================*/

.cms-title-h2 { width: 100%; display: flex; flex-wrap: wrap; position: relative;  }
.cms-title-h2::after { position: absolute; content: ''; margin-left:-20%; width: 100%; height:136px;  background: url("../images/index/title-news.png") left top/contain no-repeat;  }
.cms-title-h2 h2 { margin:15px 15px 0 15px;  display: flex;  justify-content: flex-start; flex-direction: column; font-weight: 400; }
.cms-title-h2 span { font-size: .875rem; color: #6e77ce;  text-align: left; display: flex; }
.cms-title-h2 i{ display:flex; width:80px; height: 80px;  }
.cms-title-h2 i img{max-width: 100%; height: auto;margin: 0; }



/*Style 3
=================================*/
.cms-title-h3{ position: relative;  width: 80%; margin:100px auto 50px auto;  }
.cms-title-h3 h2 {width: auto;  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; color: #3b3e6a; font-weight: 400;  }
.cms-title-h3 span{  font-size:.875rem;color: #6e77ce;text-align: center; display: flex; justify-content: center; } 
.cms-title-h3 h2:before { margin-right: 50px;  } 
.cms-title-h3 h2:before  {  content: ""; flex-grow: 1; padding:0 100px;  height: 15px; background: url("../images/index/title-line.png") left/contain repeat-x;display: block;}
.cms-title-h3 h2:after {  content: ""; flex-grow: 1; padding:0 100px;  height: 15px;   background: url("../images/index/title-line.png") left/contain repeat-x;display: block;}
.cms-title-h3 h2:after { margin-left: 50px;} 
@media (max-width: 767.98px) {
 .cms-title-h3{width: 100%; margin:100px auto 50px auto;  }
 .cms-title-h3 h2:before  {  padding:0 10px;  }
.cms-title-h3 h2:after {  padding:0 10px; }

}




.cms-items-container {width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap;  flex-flow: row wrap; -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: flex-start;  -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;  padding-top: 10px;}
 @media screen and (max-width: 991px) {
.cms-items-container { height: auto; }
 }
.cms-item, .cms-item-lg, .cms-item-2x{ display: block;height: 100%; width: 25%;padding-left: 10px;padding-right: 10px;text-decoration: none; color: #333;}
@media screen and (max-width: 991px) {
.cms-item, .cms-item-lg, .cms-item-2x { width: 50%; margin-top: 15px;margin-bottom: 15px;}
}

@media screen and (max-width: 767px) {
.cms-item, .cms-item-lg, .cms-item-2x { margin-top: 10px;margin-bottom: 10px;}
}
.cms-item img, .cms-item-lg img, .cms-item-2x img{ width: 100%;height: auto;}
.cms-item-2x { width: 50%;}
@media screen and (max-width: 991px) {
.cms-item-2x {  width: 100%;}
}
a.cms-item:hover, a.cms-item-lg:hover, a.cms-item-2x:hover, a.cms-item:focus, a.cms-item-lg:focus, a.cms-item-2x:focus, a.cms-item-2x:hover,a.cms-item-2x:focus {color: #666; text-decoration: none;}
.cms-item-title { font-size: 1em; font-weight: 700; margin-top: 10px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.cms-item-descnohs { font-size: 15px; line-height: 26px; overflow: hidden; display:-webkit-box;}

 
.cms-decorate{ height: 162px; width: 100%; position: absolute; z-index: 10; left: 0px;}
.cms-decorate:after {
	content:"";
	background-image: url(../images/index/back_wave01.png);
	background-repeat: repeat-x;
	background-position: center 20px;
	height: 162px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom: 0px;
	animation-name: wave1;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave1;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave1 {
0% {background-position: 0px 20px;}
100% {background-position: 1080px 20px;}
}
@-webkit-keyframes wave1 {
0% {background-position: 0px 20px;}
100% {background-position: 1080px 20px;}
}
.cms-decorate:before {
	content:"";
	background-image: url(../images/index/back_wave02.png);
	background-repeat: repeat-x;
	background-position: center 20px;
	height: 162px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom: 0px;
	animation-name: wave2;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave2;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave2 {
0% {background-position: 1080px 20px;}
100% {background-position: 0px 20px;}
}
@-webkit-keyframes wave2 {
0% {background-position: 1080px 20px;}
100% {background-position: 0px 20px;}
}


.cms-decorate-end { height: 100px; width: 100%; position: absolute; z-index: 10; left: 0px;}
.cms-decorate-end:after {
	content:"";
	background-image: url(../images/index/back_wave03.png);
	background-repeat: repeat-x;
	background-position: center 0px;
	height: 100px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom: 0px;
	animation-name: wave3;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave3;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave3 {
0% {background-position: 0px 0px;}
100% {background-position: 1080px 0px;}
}
@-webkit-keyframes wave3 {
0% {background-position: 0px 0px;}
100% {background-position: 1080px 0px;}
}
.cms-decorate-end:before {
	content:"";
	background-image: url(../images/index/back_wave04.png);
	background-repeat: repeat-x;
	background-position: center 0px;
	height: 100px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom:0px;
	animation-name: wave4;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave4;
	-webkit-animation-duration: 30s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave4 {
0% {background-position: 1080px 0px;}
100% {background-position: 0px 0px;}
}
@-webkit-keyframes wave4 {
0% {background-position: 1080px 0px;}
100% {background-position: 0px 0px;}
}

 

/*cms-btn Styles 樣式
=================================*/ 
 /*cms-btn Styles 1===*/
a.cms-btn-01  { position: relative; margin:20px auto;padding: 0 50px; display: flex;align-items: center;  border: 3px double #fff; background:#e68d00;  font-size: 1rem;  color: #fff!important; font-weight: 400; line-height: 38px;  letter-spacing: 2px; transform: scale(1);  transition: all 1s; }
a.cms-btn-01::after {content: ""; width:80px; height: 80px; display: block; position: absolute; right: -120px; top:0px; background: url("../images/icon/icon-p1.png") left top; background-size: 80px;animation: peo2 2500ms infinite ease-in-out;}
a.cms-btn-01:hover { color:#fff;text-shadow:1px 1px  rgba(0,0,0,.5);  background:#30315f; transform: scale(1.05);}
 
 /*cms-btn Styles 2===*/
.cms-btn-02{ width:247px; height:150px;   padding:100px 0px 0px 100px; margin:20px 0px; text-align: center; font-size: 1.1rem; font-weight:400;  background:url("../images/index/title-03.png") no-repeat left top; background-size:100px 153px;  -webkit-transition: all 0.3s; transition: all 0.3s;  }
.cms-btn-02:hover { color:#ff7e03;text-shadow:1px 1px  rgba(0,0,0,.5);}
.cms-btn-02:active { color: #2A1557; }

/*cms-btn Styles 3====*/
a.cms-btn-03  {width: 40%; margin:20px auto; padding: 0 50px; position: relative; display: flex;  align-items: center; border: 3px double #fff; background:#e68d00; font-size:1rem; color: #fff!important; font-weight: 400; line-height: 38px; letter-spacing: 2px;  transform: scale(1);  transition: all 1s; }
a.cms-btn-03::after {content: ""; width:80px; height: 80px; display: block; position: absolute; right: 0px; top:-50px; background: url("../images/icon/icon-p2.png") left top; background-size: 80px;animation: 1600ms peo infinite alternate ease-in-out;}
a.cms-btn-03:hover { color:#fff;text-shadow:1px 1px  rgba(0,0,0,.5);  background:#30315f; transform: scale(1.05);}

 @media screen and (max-width: 767px) {
 a.cms-btn-03  {width: 100%;}
}

@keyframes peo {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@-webkit-keyframes peo {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.05); }
  100% { -webkit-transform: scale(1); }
}
@-webkit-keyframes peo2 {
  0% {
    -webkit-transform: rotate(-5deg) scale(1) translate(-100%, -30%);
    transform: rotate(-5deg) scale(1) translate(-100%, -30%); }
  50% {
    -webkit-transform: rotate(5deg) scale(1) translate(-100%, -30%);
    transform: rotate(5deg) scale(1) translate(-100%, -30%); }
  100% {
    -webkit-transform: rotate(-5deg) scale(1) translate(-100%, -30%);
    transform: rotate(-5deg) scale(1) translate(-100%, -30%); } }
@keyframes peo2 {
  0% {
    -webkit-transform: rotate(-5deg) scale(1) translate(-100%, -30%);
    transform: rotate(-5deg) scale(1) translate(-100%, -30%); }
  50% {
    -webkit-transform: rotate(5deg) scale(1) translate(-100%, -30%);
    transform: rotate(5deg) scale(1) translate(-100%, -30%); }
  100% {
    -webkit-transform: rotate(-5deg) scale(1) translate(-100%, -30%);
    transform: rotate(-5deg) scale(1) translate(-100%, -30%); } 
}

/*cms-btn Styles 4====*/
.cms-btn-btnbox {position: relative;display: flex;  justify-content: center;  width: 100%; height: auto; margin:0px auto; -webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1); -moz-transform: scale(1);  transform: scale(1);  transition: all 1s;}
.cms-btn-btnbox.cms-btn-04 {   -webkit-animation-delay:1s; -moz-animation-delay:1s;  -ms-animation-delay:1s;  -o-animation-delay:1s;  animation-dely:1s;}
.cms-btn-btnbox.cms-animated {
  -webkit-animation: 1600ms pulsate infinite alternate ease-in-out;
  -moz-animation: 1600ms pulsate infinite alternate ease-in-out;
  -ms-animation: 1600ms pulsate infinite alternate ease-in-out;
  -o-animation: 1600ms pulsate infinite alternate ease-in-out;
  animation: 1600ms pulsate infinite alternate ease-in-out;
}
 @keyframes pulsate {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@-webkit-keyframes pulsate {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.05); }
  100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulsate {
  0% { -moz-transform: scale(1); }
  50% { -moz-transform: scale(1.05); }
  100% { -moz-transform: scale(1); }  
}
@-ms-keyframes pulsate {
  0% { -ms-transform: scale(1); }
  50% { -ms-transform: scale(1.05); }
  100% { -ms-transform: scale(1); }  
}
@-o-keyframes pulsate {
  0% { -o-transform: scale(1); }
  50% { -o-transform: scale(1.05); }
  100% { -o-transform: scale(1); }  
}


.demo-section { padding: 0 5%;}
.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%;}


.idx-section-1 { padding-top: 70px; padding-bottom: 80px;}
.title01 { padding-bottom: 30px; text-align: center;}
.title01 span { display: inline-block; position: relative; font-size: 28px; font-weight: 700; color:#e25f47; padding:10px 0 15px 72px; line-height: 100%; background: url("../images/title-icon.png") left top no-repeat; background-size: 61px 47px;}
/*.title01 span:before, .title01 span:after { position: absolute; top: 0;}
.title01 span:before { content: "["; left: 0;}
.title01 span:after { content: "]"; right: 0;}*/
.data-type-1 { font-size: 20px; text-align:center; padding-bottom: 25px; line-height: 140%;}

.class-item { padding-top: 0px;}
.class-item .slick-slide { padding: 0 5px;}
.class-item .slick-dots { bottom: -70px;}
.class-item .slick-dots li button { background: #ddd; border-width: 0;}

.class-item-box { position: relative; height: 286px; overflow: hidden; display: block;}
.class-item-box:hover .class-item-btn:after { width: 0;}
.class-item-box:hover .class-item-pto img { transform: scale(1.1);}
.class-item-pto { line-height: 0;}
.class-item-pto img { object-fit: cover; width: 100%; height: 100%; position: absolute;transition: all 0.4s ease-out 0s; }
.class-item-content { position: absolute; z-index: 2; top: 0; left: 0; width: 75%; height: 100%; padding: 70px 40px 20px 40px;background: linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);}
.class-item-content > div { max-width: 210px;}
.class-item-title { font-size: 28px; color: #fff; font-weight: 700; line-height: 110%; padding-bottom: 10px;}
.class-item-data { height: 50px; margin-bottom: 15px; color: #fff; font-size: 16px;
display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.class-item-btn { position: relative; text-transform: uppercase; font-size: 15px; color: #fff; width: 86px; padding-bottom: 8px;}
.class-item-btn:after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 2px; background: #fff;transition: all 0.4s ease-out 0s; }

.idx-pro-list-section { display: flex ;flex-direction: row; flex-wrap: wrap; padding-bottom: 65px;}
.idx-pro-list-section > div:nth-of-type(1) { width: calc(50% - 82px); padding-right: 20px;}
.idx-pro-list-section > div:nth-of-type(2) { width: calc(50% + 82px); }
.idx-pro-link { display: block;}
.idx-pro-link:hover .idx-pro-pto-box { background: #f28e26;}
.idx-pro-link:hover .idx-pro-pto img { transform: scale(1.1);}
.idx-pro-pto-box { background: #fff; padding: 10px; margin-bottom: 8px;transition: all 0.4s ease-out 0s;}
.idx-pro-pto { padding-bottom: 100%;}
.idx-pro-pto img { transition: all 0.4s ease-out 0s;}
.idx-pro-data { display: flex; flex-flow: row; flex-wrap: nowrap; justify-content: space-between;}
.idx-pro-data-2 { flex-flow: column; justify-content: center; align-items: center;}
.idx-pro-name { color: #333; font-size: 18px; padding-bottom: 15px;}
.idx-pro-cash { color: #fd644f; font-size: 18px; font-weight: bold; padding-bottom: 15px;}

.idx-pro-list-2 { display: flex ;flex-direction: row; flex-wrap: wrap; margin-right: -14px;}
.idx-pro-list-2 > a { width:33.33%; padding: 0 14px 25px 0; }

.idx-ad-section { line-height: 0;box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.1); margin-bottom: 80px;}

.idx-video { max-width: 1020px; margin: 0 auto; position: relative; z-index: 3;}
.video-container {position: relative;padding-bottom: 51.5%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; border-width: 0;}

.idx-about-section { position: relative; margin-top: -440px; margin-bottom: 510px; }
.idx-about-bg {  background: url("../images/idx-about-bg.jpg") no-repeat top center; background-size: cover;clip-path: polygon(0 0, 100% 14%, 100% 85%, 0 100%); position: absolute; top: 0; left: 0; width: 100%; height: 600px;}
.idx-about-content { padding: 285px 5% 245px 5%; max-width: 1020px; margin: 0 auto; font-size: 18px; color: #ffffff; position: relative; z-index: 3;}
.idx-about-content p { padding-bottom: 35px; color: #fff; line-height: 32px;}
.idx-about-content-logo { text-align: center; line-height: 0; padding-bottom: 20px;}
.idx-about-btn { display: block; width: 200px; line-height: 44px; border-radius: 20px 0 20px 0; border: 1px solid #fff; color: #fff !important; font-size: 18px; text-align: center; margin: 0 auto;}
.idx-about-btn:hover { background: #fff; color:#333 !important;}
.idx-about-pto { position: absolute; bottom: -60px; padding: 0 3%; width: 100%; text-align: right;}
.idx-about-pto img { width: 27%;}

@media only screen and (max-width: 1023px) {
	.cms-main-banner { padding-top: 0;}
}
@media only screen and (max-width: 980px) {
	.idx-pro-list-section > div:nth-of-type(1) { width: calc(100% - 0px); padding-right: 0px; padding-bottom: 25px;}
	.idx-pro-list-section > div:nth-of-type(2) { width: calc(100% + 0px); }
	
	.idx-ad-section { margin-bottom: 60px;}
}
@media only screen and (max-width: 768px) {
	.idx-section-1 { padding-top: 50px;}
	.title01 { padding-bottom: 10px;}
	.title01 span { font-size: 22px;}
	.class-item-content { padding: 40px 20px 20px 20px;}
	
	.idx-pro-list-2 > a { width:50%; }
	
	.idx-about-pto img { width: 60%;}
	
	.idx-about-bg { height: 300px;}
	.idx-about-section { margin-top: -150px; margin-bottom: 280px;}
}