/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

.content-Box { max-width:1300px; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 16px; line-height:24px; color: #333333; /*letter-spacing: 0.1rem;*/ padding-top: 100px; font-weight: 400;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 16px;line-height:24px; font-weight: 400;}
p, td, li, label { font-size: 16px; }


.banner { margin-bottom: 0px;line-height: 0; position: relative; }
.banner-slogon { position: absolute; z-index: 3; text-shadow: 0px 0px 6px #000, 0px 0px 12px #000; font-weight: 700; color: #fff; width: 50%; top:34.5%; padding: 0 5%; left: 0; font-size: 20px; line-height: 36px;animation: blur 4s ease 0s;}
.banner-slogon span { font-weight: 900; display: block; font-size: 42px; line-height: 140%; padding-bottom: 20px; font-family: 'Noto Serif TC', sans-serif;}
.loop .owl-dots { }
.loop .owl-item {position: relative; }
.loop .owl-nav { position: absolute; top:calc(50% - 50px); width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important;}
.loop .owl-prev { left:30px; }
.loop .owl-next { right:30px;}
.loop .owl-prev:before, .loop .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.5;transition: all 0.4s ease-out 0s;width: 50px; height: 50px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #fff;}
.loop .owl-prev:before { content: ""; transform: rotate(-135deg); }
.loop .owl-next:before { content: ""; transform: rotate(45deg);}
.loop .owl-prev:hover:before, .loop .owl-next:hover:before { opacity: 1;}
.loop .owl-stage-outer {z-index: 2;}
.loop .owl-dots { position: absolute; z-index: 100; bottom: 25px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #fff !important; width: 14px !important; height: 14px !important; border: 0px solid #4c4c4c;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: #e02829 !important; }

.banner .owl-item > div{position: relative;}
.banner .owl-item > div::before{content: '';position: absolute;inset: 0;background: linear-gradient(to right,rgba(0, 0, 0, 0.65) 0%,rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.2) 45%,rgba(0, 0, 0, 0) 70%);}

@keyframes blur {
  0% {
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
      transform: scale(0.3);
      opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
      transform: scale(1);
      opacity: 1;
  }
}

.idx-about-section { background: url(../images/idx-about-bg.jpg) no-repeat top center fixed; background-size: cover; padding:  140px 0 190px 0;}
.idx-about-content { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-about-content > div { width: 50%; padding-left: 5%;padding-right: 5%;}
.idx-about-content > div:nth-of-type(2) { padding-top: 175px; }
.idx-about-content > div:nth-of-type(2) p { font-size: 18px !important; line-height: 34px !important; font-weight: 400 !important; margin-bottom: 80px !important;}
.title01 { line-height: 110%; padding-bottom: 90px; font-size: 66px; position: relative;}
.title01:before, .title01:after { content: ""; position: absolute; left: -40px; width: 15px; height: 15px; transform: rotateY(45deg) rotateZ(45deg);}
.title01:before{ top:25px; background: #e02829;}
.title01:after { top:45px; background: #f2a829;}

.title02 h1 { font-family: 'Noto Serif TC', sans-serif; font-size: 60px; font-weight: 400; line-height: 130%;}

.btn01 a{display: inline-block;  border-radius: 30px; line-height: 60px; border: 1px solid #333333; position: relative; min-width: 210px; padding: 0 40px 0 30px; color: #333; font-size: 16px; overflow: hidden;}
.btn01 a:hover:before, .btn01 a:hover:after {width: 100%;}
.btn01 a:hover {color: #fff; border-color: #e57018; transform: scale(0.9);}
.btn01 a:hover span {background: #fff;}
.btn01 a:hover span:after {border-color: transparent transparent transparent #fff;}
.btn01 a:before, .btn01 a:after{ content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #e57018;}
.btn01 a:before{transition: all 0.2s ease-out 0s; opacity: 0.3; }
.btn01 a:after{transition: all 0.5s ease-out 0s; opacity: 0.9;}
.btn01 a div {position: relative; z-index: 3;transition: all 0.4s ease-out 0s;}
.btn01 a span {position: absolute; z-index: 3; width: 15px; height: 1px; background: #333; right: 22px; top:calc(50% - 0px);transition: all 0.4s ease-out 0s;}
.btn01 a span:after {position: absolute;content: ""; width: 0;height: 0;border-style: solid;border-width: 4px 0 4px 7px;border-color: transparent transparent transparent #333; right: -6px; top:-3.5px;transition: all 0.4s ease-out 0s;}

.idx-link-section { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-link-section > div { width: 50%; padding: 90px 8% 130px 8%; text-align: center; color: #fff;}
.idx-link-section > div:nth-of-type(1) { background: url(../images/idx-p-bg.jpg) no-repeat center center; background-size: cover;}
.idx-link-section > div:nth-of-type(2) { background: url(../images/idx-ce-bg.jpg) no-repeat center center; background-size: cover;}

.title03 { padding-bottom: 75px; text-align: center; font-size: 30px; color: #ffffff; font-weight: 500; letter-spacing: 0; position: relative;}
.title03:before, .title03:after { content: ""; position: absolute; top: 55px; width: 15px; height: 15px; transform: rotateX(45deg) rotateZ(45deg);}
.title03:before{ left:calc(50% - 17px); background: #e02829;}
.title03:after { left:calc(50% + 3px); background: #f2a829;}
.color-black { color: #333 !important;}

.loop2 { padding: 0 50px;}
.loop2 .owl-dots { }
.loop2 .owl-item {position: relative; }
.loop2 .owl-nav { position: absolute; top:calc(50% - 50px); left: 0; width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important; width: 30px; height: 30px; border-radius: 100% !important; border: 1px solid #fff !important;}
.loop2-black .owl-prev, .loop2-black .owl-next { border: 1px solid #333 !important;}
.loop2 .owl-prev { left:0px; }
.loop2 .owl-next { right:0px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 10px; height: 10px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; position: relative;}
.loop2-black .owl-prev:before, .loop2-black .owl-next:before { border-color: #333;}
.loop2 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 10px; }
.loop2 .owl-next:before { content: ""; transform: rotate(45deg); left: 6px; }
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { opacity: 1;}
.loop2 .owl-stage-outer {z-index: 2;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom: 25px; left: 0; width: 100%; text-align: center !important; padding: 0 50px; display: none;}
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #fff !important; width: 14px !important; height: 14px !important; border: 0px solid #4c4c4c;}
.loop2 .owl-dots .owl-dot.active span, .loop2  .owl-dots .owl-dot:hover span { background: #e02829 !important; }

.idx-pro-info { margin-bottom: 20px; min-height: 45px; text-align: center; color: #fff; font-size: 16px;}
.idx-pro-info2 { color: #333;}
.idx-pro-name { text-align: center; font-size: 20px; color: #fff; padding-top: 20px;}
.idx-pro-name2 { color: #333;}

.idx-ability-section { padding: 95px 5% 90px 5%; background: #eff0f2;}
.idx-ability-title { padding-bottom: 24px; text-align: center; font-size: 30px; color: #333; font-weight: 500; letter-spacing: 0; line-height: 110%;}
.idx-ability-data { max-width: 770px; margin: 0 auto; text-align: center;}
.idx-ability-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-ability-list > a { display: block; width: calc(25% - 18px); margin: 0 9px 30px 9px; position: relative;}
.idx-ability-list > a:nth-of-type(2) .idx-ability-name { border-color: #4075c0;}
.idx-ability-list > a:nth-of-type(3) .idx-ability-name { border-color: #bfc040;}
.idx-ability-list > a:nth-of-type(4) .idx-ability-name { border-color: #40c0b7;}
.idx-ability-list > a:hover .idx-ability-btn { transform: rotate(180deg);}
.idx-ability-list > a:hover .circle { margin: 20%}
.idx-ability-top { position: relative; }
.idx-ability-btn { position: absolute; z-index: 3; background: #e87229; width: 50px; height: 50px; border-radius: 100%; top:10%; right: 20%;transition: all 0.4s ease-out 0s;}
.idx-ability-btn span { position: relative; display: inline-block;width: 24px; height: 1px; background: #fff; left: 13px; top:7px;}
.idx-ability-btn span:after { position: absolute; content: ""; width: 1px; height: 24px; background: #fff; top:-12px; left: 12px;}
.idx-ability-pto { position: absolute; width: 100%; height: 100%; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}
.idx-ability-pto img { width: 71px;}
.idx-ability-name { font-size: 18px;padding-bottom: 10px; color: #333; font-weight: 500; text-align: center; margin-bottom: 18px; border-bottom: 2px solid #c05140;}
.idx-ability-info { padding: 0 16px; color: #333;}

.circle-container { position: relative; z-index: 1;}
.dummy { padding-top: 100%; }
.circle {margin: 15%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #fff;border-radius: 50%;transition: all 0.4s ease-out 0s;}

.idx-news-section { background: #fff0dc; padding: 45px 0; display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-news-section > div:nth-of-type(1) { width: 30%; padding: 0 5%;}
.idx-news-section > div:nth-of-type(2) { width: 70%; background: #fff; padding: 50px 0;}

.title04 { line-height: 110%; padding-bottom: 20px; font-size: 30px; position: relative;font-weight: 500;}
.title04:before, .title04:after { content: ""; position: absolute; left: -40px; width: 15px; height: 15px; transform: rotateY(45deg) rotateZ(45deg);}
.title04:before{ top:0px; background: #e02829;}
.title04:after { top:20px; background: #f2a829;}

.idx-news-list { max-width: 982px; margin: 0 auto 0 0; display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-news-list > a { width: 50%; padding:0 5%; color: #333; line-height: 28px; }
.idx-news-list > a:hover .idx-news-title { color: #e02829; text-decoration: underline;}
.idx-news-list > a:nth-of-type(1) { border-right: 1px solid #ebebeb;}
.idx-news-date { font-size: 16px; color: #e02829; padding-bottom: 12px; font-weight: 500;}
.idx-news-date img { width: 26px; display: inline-block; position: relative; margin-right: 10px; top:-2px;}
.idx-news-title { font-size: 18px; font-weight: 500; padding-bottom: 14px;}

.idx-shopping-section { padding: 65px 5%;}
.idx-shopping-pto { line-height: 0; margin-bottom: 25px; border: 17px solid transparent; border-image: linear-gradient(to bottom left, #e67520 0%, #fff3dc 100%); border-image-slice: 1; transition: all 0.4s ease-out 0s; }
.idx-shopping-pto:hover { box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); transform: scale(1.05);}
.idx-shopping-name { color: #333; font-size: 20px; text-align: center; padding-bottom: 12px; font-weight: 400;}
.idx-shopping-cash { color: #e56329; font-size: 20px; text-align: center; font-weight: 700;}

.loop3 {z-index: 5; padding: 0 40px;}
.loop3 .owl-dots { display: none;}
.loop3 .owl-item {position: relative; padding: 20px;}
.loop3 .owl-item:nth-child(even) .idx-shopping-pto { border-image: linear-gradient(to top right, #e67520 0%, #fff3dc 100%); border-image-slice: 1;}
.loop3 .owl-nav { position: absolute; bottom:66%; left: 0; width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:transparent !important; width: 40px; height: 40px; border-radius: 0 !important; border: 0px solid #666666 !important;}
.loop3 .owl-prev { left:0px; }
.loop3 .owl-next { right:0px;}
.loop3 .owl-prev:before, .loop3 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.7;transition: all 0.4s ease-out 0s;width: 30px; height: 30px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #adadad; position: relative;}
.loop3 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 15px; }
.loop3 .owl-next:before { content: ""; transform: rotate(45deg); right: 12px;}
.loop3 .owl-prev:hover:before, .loop3 .owl-next:hover:before { opacity: 1;}
.loop3 .owl-stage-outer {z-index: 2;}
.loop3 .owl-dots { position: absolute; z-index: 100; bottom: -50px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #cdcdcd !important; width: 13px !important; height: 13px !important; border: 0px solid #4c4c4c;}
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #1e3874 !important; }


@media only screen and (max-width: 1279px) {
	#content { padding-top: 60px;}
    
    .banner-slogon { font-size: 17px; line-height: 30px; top:20%; padding: 30px 5%;}
    .banner-slogon span { font-size: 28px; }
    
    .title02 h1 { font-size: 46px;}
    
}

@media only screen and (max-width: 980px) {
    .loop .owl-dots { bottom: 15px;}
    
	.banner .owl-item > div::before{display: none;}
    .banner-slogon { position: relative; text-shadow: none; color: #333; width: 100%; top:auto; padding: 30px 5%; left: auto; text-align: center;}
    
    .idx-about-section { padding: 50px 0;}
    .title01 { padding-bottom: 30px; font-size: 36px; padding-left: 35px;}
    .title01:before, .title01:after { left: 0px; width: 10px; height: 10px;}
    .title01:before{ top:10px; }
    .title01:after { top:25px; }
    .title02 h1 { font-size: 32px;}
    .idx-about-content > div { width: 100%; }
    .idx-about-content > div:nth-of-type(2) { padding-top: 15px; }
    .idx-about-content > div:nth-of-type(2) p { margin-bottom: 30px !important;}
    
    .idx-ability-section { padding: 60px 5% 60px 5%; }
    .idx-link-section > div { width: 100%; padding: 60px 5% 80px 5%; }
    .title03, .idx-ability-title, .title04 { font-size: 24px;}
    .title04 { padding-bottom: 15px;}
    
    .idx-ability-list > a { width: calc(50% - 18px);}

    .idx-news-section { padding-bottom: 20px; }
    .idx-news-section > div:nth-of-type(1) { width: 100%; padding-bottom: 30px; }
    .idx-news-section > div:nth-of-type(2) { width: 100%; }
    .title04:before{ top:0px;}
    .title04:after { top:15px;}
}
@media only screen and (max-width: 768px) {
    
}
@media only screen and (max-width: 640px) {
    .banner-slogon { font-size: 16px; line-height: 27px; font-weight: 500;}
    .banner-slogon span { font-size: 23px; }
    
}
@media only screen and (max-width: 570px) {
    .idx-ability-btn { transform: scale(0.8); right: 5%;}
    
}

@media only screen and (max-width: 414px) {
	
	

}

@media only screen and (max-width: 320px) {

}