@charset "utf-8";
/* CSS Document */
.banner {position: relative;}
.banner .item img {width: 100%;}
.sroll_btn {position: absolute; bottom: -12px; left: 50%; width: 163px; height: 163px; margin-left: -82px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; line-height: 0; font-size: 0; cursor: pointer; z-index: 6666;}
.sroll_btn::after {content: ''; background: url("../images/icon_02a.png") no-repeat center; background-size: cover; width: 31px; height: 54px; display: block; position: absolute; top: 50%; left: 50%; margin: -27px 0 0 -15px;}


.ind_A {padding: 5.518% 0px 0 0px;}
.ind_A > div > h1 {color: #333333; letter-spacing: 2px; line-height: 166.67%; text-align: center; margin-bottom: 30px;}
.ind_A > div > h1 span {color: #54b014;}
.ind_A > div > h2 {color: #54b014; letter-spacing: 2px; text-align: center; margin-bottom: 30px;}
.ind_A > div > p {color: #333333; line-height: 187.5%; text-align: center; margin-bottom: 40px;}

.ind_A .item {position: relative; padding: 20px 10px; overflow: hidden; z-index: 10; border-radius: 0px; transition: all 1s ease 0s;display: flex; flex-direction: row; flex-wrap: wrap;  }
.ind_A .item > div:nth-of-type(1) { width: 80px; }
.ind_A .item > div:nth-of-type(2) { width: calc(100% - 80px); padding-left: 20px;}
.ind_A .item > div > h3 {color: #2f650b; font-weight: normal; transition: all 0.5s ease 0s; font-size: clamp(18px, 1.9vw, 24px); padding: 0; margin: 0;}
.ind_A .item > div > h3::after {content: ''; height: 1px; width: 44px; line-height: 0; font-size: 0; display: block; margin: 10px auto 10px 0; background-color: #65c425; transition: all 0.5s ease 0s;}
.ind_A .item > div > p {color: #333333;  margin: auto; line-height: 1.6; font-size: 100%; padding: 0;}
.ind_A .item > a:link, .ind_A .item > a:visited {text-decoration:none; color:#fff; display: flex; font-size: 0; line-height: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5555; transition: all 0.5s ease 0s;}
.ind_A .item > a:active, .ind_A .item > a:hover {text-decoration:none; color:#fff; cursor:pointer; transition: all 0.5s ease 0s;}
.ind_A .item > a:before { color:#68cb1f;top: 0px;right: 0px;left: 0%;bottom: 0%;border-top: 3px solid;border-right: 3px solid;}
.ind_A .item > a:after {color:#68cb1f;right: 0%;top: 0%;bottom: 0px;left: 0px;border-bottom: 1px solid;border-left: 1px solid;}
.ind_A .item > a:before, .ind_A .item > a:after {content: "";opacity: 0;pointer-events: none;z-index: 3;position: absolute;box-sizing: border-box;transition: all 0.5s ease;box-shadow: none;}
.ind_A .item > a:hover:before {opacity: 1;bottom: 80%;left: 80%;}
.ind_A .item > a:hover:after {opacity: 1;top: 90%;right: 90%;}
.ind_A .item:hover {border-radius: 30px 0; transition: all 1s ease 0s;}
.ind_A .item:hover > div > h3 {color: #53a615; font-weight: 600; transition: all 0.5s ease 0s;}
.ind_A .item:hover > div > h3::after {width: 90%; background-color: #53a615; transition: all 0.5s ease 0s;}


.ind_B {background-color: #fefefe; background: url("../images/bg_01.jpg") repeat-x top center; padding: 5.518% 0px 4.73% 0px;}
.ind_B > div > h2 {color: #57b512; font-family: 'Arimo', sans-serif; font-weight: 600; text-align: center; margin-bottom: 20px;}
.ind_B > div > h3 {color: #333333; letter-spacing: 4px; text-align: center; margin-bottom: 30px;}
.ind_B #bootstrap-touch-slider-c {background-color: transparent!important; max-height: none;}
.ind_B .indicators-line > .carousel-indicators {right: 0px; left: 0px; top: auto; position: relative; width: 100%; height: 10px; flex-direction: row;}
.ind_B .indicators-line > .carousel-indicators li {margin: 0 5px;}
.ind_B .bs-slider > .carousel-inner > .item > img, .bs-slider > .carousel-inner > .item > a > img {width: auto!important;}
.ind_B .indicators-line > .carousel-indicators li {width: 11px; height: 11px; border-radius: 10px; background-color: #b2b2b2; transition: all 0s ease 0s;}
.ind_B .indicators-line > .carousel-indicators .active {width: 31px; background-color: #57b512; transition: all 0s ease 0s;}
.ind_BL {padding: 30px 0 0 0;}
.ind_BL .item {filter:alpha(opacity=100)!important; Opacity:1.0!important;}
.ind_BL .item > div {max-width: 412px; margin: auto; padding: 30px 0 0 0;}
.ind_BL .item > div > div {position: relative; height: 0; overflow: hidden; padding-bottom: 66.265%; line-height: 0; font-size: 0; margin-bottom: 30px; transition: all 0.5s ease 0s;}
.ind_BL .item:hover > div > div {box-shadow: 0 0 13px rgba(0, 0, 0, 0.73); transition: all 0.25s ease 0s;}
.ind_BL .item > div > div > div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; overflow: hidden;}
.ind_BL .item > div > div > div img {max-height: 100%!important;}
.ind_BL .item > div > h4 {color: #333333; font-weight: 100; letter-spacing: 1px; margin-bottom: 10px; overflow: hidden; transition: all 1s ease 0s;}
.ind_BL .item:hover > div > h4 {color: #fff; font-weight: 600; padding: 0 15px; border-radius: 50px; transition: all 1s ease 0s;}
.ind_BL .item > div > p {color: #9f9f9f; letter-spacing: 1px;}
.ind_BL .item > div > a {text-decoration:none; color:#fff; display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 0; z-index: 5555;}


.ind_C {background-color: #e5e5e5; padding: 5.518% 0px 4.73% 0px; position: relative;}
#ind_C {position: absolute; top: -51px;}
.ind_C > div > h2 {color: #333333; font-family: 'Noto Sans TC', sans-serif; font-weight: 500; line-height: 150%; letter-spacing: 2px; text-align: center; margin: 0;}
.ind_C > div > h2 span {font-size: 166.66%; color: #57b512; font-family: 'Overpass', sans-serif; font-weight: 800; letter-spacing: -5px; padding: 0 10px 0 6px;}
.ind_C > div > h2 label {font-family: 'Overpass', sans-serif; font-size: 100%; font-weight: 700; letter-spacing: -1px; padding: 0 7px 0 0;}
.ind_C > div > p {line-height: 187.5%; color: #333333; text-align: center; padding: 36px 0 66px 0; margin: 0;}
.ind_C .jumbo {color: #57b512; text-align: center; font-family: 'Overpass', sans-serif; font-weight: 700; letter-spacing: -5px; padding: 88px 0 20px 0; display: flex; flex-wrap: wrap; justify-content: center;}
@media only screen and (min-width:1601px){.ind_C .jumbo {font-size: 3.646vw!important;}}
.ind_C .jumbo > div {width: 20%;}
.ind_C .jumbo > div > h3 {display: block; font-family:'Microsoft JhengHei'; color: #333333; letter-spacing: 0; margin: 0;}


.ind_D {background-color: #fff; position: relative; padding: 4.204% 0px 3.153% 0px;}
.ind_D::before { position: absolute; top: -1px; left: 50%; margin-left: -23px; height: 0; width: 0; border-color: #e5e5e5 transparent transparent transparent; border-style: solid solid solid solid; border-width: 25px 23px;}
.ind_D ul {display: flex; flex-wrap: wrap; justify-content: center; width: 100%; line-height: 0; font-size: 0;}
.ind_D ul li {width: 20%; padding: 35px 10px!important; text-align: center; display: flex; flex-flow: wrap; justify-content: center; align-items: center;}


.ind_E {padding: 6.0435% 0px 6.306% 0px; background:url("../images/bg_02.jpg") no-repeat fixed top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 945px;}
.ind_E > div > h3 {color: #7ada33; text-align: center; font-family: 'Arimo', sans-serif; margin: 0 0 22px 0;}
.ind_E > div > p {color: #fff; text-align: center; font-family: 'Noto Sans TC', sans-serif; letter-spacing: 4px; margin-bottom: 30px;}
.reserve {max-width: 920px; margin: 0 auto!important; background-color: rgba(255, 255, 255, 0.85); padding: 35px 40px 35px 58px!important;}
.reserve > div:nth-child(1) {height: 35px; padding-right: 35px; color: #52b31a; position: relative; text-align: right; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; z-index: 10;}
.reserve > div:nth-child(1)::before {content: ''; width: 155px; height: 35px; background-color: rgba(226, 226, 226, 0.73); border-radius: 35px; position: absolute; right: 0px; top: 0px; z-index: -1;}
.reserve li {padding-bottom: 10px!important; margin-bottom: 23px!important; border-bottom: 1px solid rgba(47, 47, 47, 0.23)}
.row_A {display: flex; flex-wrap: wrap}
.row_A div:nth-child(1) {width: 120px; color: #2d2d2d; display: flex; flex-wrap: wrap; align-items: center;}
.row_A div:nth-child(1) img {margin-right: 10px;}
.row_A div:nth-child(2) {width: calc(100% - 120px); display: flex; flex-wrap: wrap; align-items: center;}
.row_A div:nth-child(2) input {background-color: transparent; border: 0; width: 100%; height: 100%; font-size: 16px; font-family:'Microsoft JhengHei'; padding: 0 10px 0 0;}
.row_B div {width: 100%; display: flex; flex-wrap: wrap; align-items: center;}
.row_B div:nth-child(1) {padding-bottom: 10px;}
.row_B div img {margin-right: 10px;}
.row_B div textarea {background-color: transparent; border: 0; width: 100%; height: 105px; font-size: 16px; font-family:'Microsoft JhengHei'; padding: 0 0 10px 0;}
.ind_E .send {margin: auto;}


.idx-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #7ada33; padding-bottom: calc(20px + 4%); margin-bottom: calc(20px + 4%); }
.idx-section-1 > div:nth-of-type(1) { width: 38%;}
.idx-section-1 > div:nth-of-type(1) h1 { letter-spacing: 2px; margin: 0 0 10px 0; font-size: clamp(23px, 2.7vw, 32px); font-weight: 700;}
.idx-section-1 > div:nth-of-type(1) h1 span { color: #2F650B; }
.idx-section-1 > div:nth-of-type(1) h2 { color: #2F650B; margin: 0 0 20px 0; font-size: clamp(20px, 1.9vw, 24px);}
.idx-section-1 > div:nth-of-type(1) p { line-height: 1.6; padding: 0; margin: 0;}
.idx-section-1 > div:nth-of-type(2) { width: 62%; padding-left: 4.5%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.idx-section-1 > div:nth-of-type(2) > div { width: 48.5%; margin-bottom: 5px;}

.idx-section-2-top { padding-bottom: calc(30px + 5%);}
.idx-section-2-top-info { padding-bottom: calc(20px + 3%); text-align: center; line-height: 1.6;}
.idx-section-2-top-info h2 { color: #2f650b; font-weight: 700; padding: 0 0 calc(10px + 1%) 0; font-size: clamp(23px, 2.7vw, 32px); letter-spacing: 0.15rem; margin: 0;}
.idx-section-2-top-content { border-radius: 30px; border: 1px solid #d6d6d6; margin-bottom: calc(20px + 2%); padding: calc(20px + 2.5%) 0;}

.loop-case { padding-top: 0 !important;}
.loop-case .owl-dots { display: none !important;}
.loop-case .owl-item {position: relative; }
.loop-case .owl-nav { position: absolute; top:calc(50% - 40px); width: 100%; z-index: 11; }
.loop-case .owl-prev, .loop-case .owl-next { position:absolute; z-index:100; top:50%; transform: translateY(-50%); background:#bcbcbc !important; width: 50px; height: 50px; border-radius: 100% !important; }
.loop-case .owl-prev:hover, .loop-case .owl-next:hover { background:#53a615 !important; }
.loop-case .owl-prev span, .loop-case .owl-next span { display: none !important; }
.loop-case .owl-prev { left:-25px;  }
.loop-case .owl-next { right:-25px; }
.loop-case .owl-prev:before, .loop-case .owl-next:before { content: "";font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; transition: all 0.4s ease-out 0s;width: 30px; height: 9px;  display: block; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);}
.loop-case .owl-prev:before { background: url("../images/loop-prev.png") no-repeat top center / contain; }
.loop-case .owl-next:before { background: url("../images/loop-next.png") no-repeat top center / contain;}
.loop-case .owl-prev:hover:before, .loop-case .owl-next:hover:before { }
.loop-case .owl-stage-outer {z-index: 2;}
.loop-case .owl-dots { position: absolute; z-index: 100; bottom: 5%; width: 100%; text-align: center !important; padding: 0 0px; }
.loop-case .owl-dots .owl-dot span, .loop-case  .owl-dots .owl-dot span { background: #fff !important; width: 10px !important; height: 10px !important;}
.loop-case .owl-dots .owl-dot.active span, .loop-case  .owl-dots .owl-dot:hover span { background: #d6b03a !important; }

.idx-case-content { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 calc(30px + 4%);}
.idx-case-content > div:nth-of-type(1) { width: 38%; padding-right: calc(20px + 3%);}
.idx-case-content > div:nth-of-type(2) { width: 62%; padding-left: calc(20px + 3%); padding-top: calc(10px + 2%); padding-bottom: calc(10px + 2%); border-left: 1px solid #bcbcbc;line-height: 1.6;}

.idx-case-title-1 { text-align: center; font-weight: 700; color: #333;font-size: clamp(25px, 3.8vw, 40px); line-height: 1.3; padding-bottom: calc(20px + 1%);}
.idx-case-success-data > div { margin-bottom: 10px; background: #cb0000; border-radius: 20px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; position: relative; padding: 20px 15px 20px 34px; color: #fff; line-height: 1.2;}
.idx-case-success-data > div:before { content:""; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 25px; height: 2px; background: #fff;}
.idx-case-success-data > div > div { font-size: clamp(18px, 1.5vw, 20px); font-weight: 500;;}
.idx-case-success-data > div > b { font-size: clamp(22px, 3.3vw, 36px); line-height: 1; font-weight: 700;}

.idx-case-title-2 { font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; padding-bottom: 10px; line-height: 1.6;}
.idx-case-title-2 > span {position: relative; z-index: 1;}
.idx-case-title-2 > span::before {content: ''; background: #fcffa3; height: 50%; position: absolute; bottom: 0; left: 0; right: 0; z-index: -10;}
.idx-case-data { padding-bottom: 25px;}

.btn01 { text-align: center;}
.btn01 > a { border-radius: 25px; background: #53a615; color: #fff !important; font-size: 16px; font-weight: 700; line-height: 1; padding: 14px 28px; }
.btn01 > a:hover { padding: 14px 20px; box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);}


.loop-case-2 { padding-top: 0 !important; margin-bottom: calc(20px + 4%);}
.loop-case-2 .owl-dots { display: none !important;}
.loop-case-2 .owl-item {position: relative; border-right: 1px solid #eaeaea;}
.loop-case-2 .owl-nav { position: absolute; top:calc(50% - 40px); width: 100%; z-index: 11; }
.loop-case-2 .owl-prev, .loop-case-2 .owl-next { position:absolute; z-index:100; top:50%; transform: translateY(-50%); background:#bcbcbc !important; width: 50px; height: 50px; border-radius: 100% !important; }
.loop-case-2 .owl-prev:hover, .loop-case-2 .owl-next:hover { background:#53a615 !important; }
.loop-case-2 .owl-prev span, .loop-case-2 .owl-next span { display: none !important; }
.loop-case-2 .owl-prev { left:-25px;  }
.loop-case-2 .owl-next { right:-25px; }
.loop-case-2 .owl-prev:before, .loop-case-2 .owl-next:before { content: "";font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; transition: all 0.4s ease-out 0s;width: 30px; height: 9px;  display: block; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);}
.loop-case-2 .owl-prev:before { background: url("../images/loop-prev.png") no-repeat top center / contain; }
.loop-case-2 .owl-next:before { background: url("../images/loop-next.png") no-repeat top center / contain;}
.loop-case-2 .owl-prev:hover:before, .loop-case-2 .owl-next:hover:before { }
.loop-case-2 .owl-stage-outer {z-index: 2;}
.loop-case-2 .owl-dots { position: absolute; z-index: 100; bottom: 5%; width: 100%; text-align: center !important; padding: 0 0px; }
.loop-case-2 .owl-dots .owl-dot span, .loop-case-2  .owl-dots .owl-dot span { background: #fff !important; width: 10px !important; height: 10px !important;}
.loop-case-2 .owl-dots .owl-dot.active span, .loop-case-2  .owl-dots .owl-dot:hover span { background: #d6b03a !important; }

.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%;}


.star-case-content { display: flex; flex-direction: column; flex-wrap: nowrap; padding: calc(10px + 1%) calc(20px + 3%);}
.star-case-content > div{ text-align: center;}
.star-case-content > div:nth-of-type(1) { margin-bottom: 5px; }
.star-case-pto { padding-bottom: 23%;}
.star-case-content > div:nth-of-type(2) { margin-bottom: 20px; }
.star-case-content > div:nth-of-type(2) span { margin:0 2px; }
.star-case-content > div:nth-of-type(3) { padding-bottom: 10px;margin-bottom: 15px; border-bottom: 1px solid #d6d6d6;}
.star-case-content > div:nth-of-type(3) span { display: inline-block; margin:0 3px 6px 3px; color: #666666; line-height: 1.2; }
.star-case-content > div:nth-of-type(4) { text-align: left; line-height:1.6; min-height: 102px; /*display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;*/}
.star-case-content > div:nth-of-type(4) > strong {border-bottom: 3px double #7ada33;}

.idx-why-title { position: relative; margin-bottom: calc(20px + 3%); text-align: center; margin-top: calc(20px + 4%); }
.idx-why-title > div { display: inline-block; line-height: 1.3; color: #2f650b; font-weight: 700; text-align:center; font-size: clamp(24px, 3.5vw, 40px); position: relative; z-index: 3;letter-spacing: 0.15rem;}
.idx-why-title > span { display: block; position:absolute ; z-index: 1; text-transform: uppercase; left: 0%; width: 100%; text-align: center;opacity: 0.1; color: #333; top: -55%; line-height: 1; font-size: clamp(28px, 4.8vw, 60px); letter-spacing: 0.15rem;}

.idx-why-content { display: flex; flex-direction: row; flex-wrap: wrap; border-bottom: 1px solid #7ada33; padding-bottom: calc(20px + 3%); margin-bottom: calc(20px + 3%); margin-right: -25px; }
.idx-why-content > div { margin:0 25px 30px 0; width: calc(20% - 25px);display: flex; flex-direction: column; flex-wrap: nowrap;}
.idx-why-pto { padding-bottom: 15px; text-align: center;}
.idx-why-pto img { width: 55px;}
.idx-why-name { border-bottom: 1px solid #d6d6d6; font-weight: 700; line-height: 1.4; font-size: clamp(18px, 1.7vw, 22px); color: #333; padding-bottom: 15px; margin-bottom: 15px; text-align: center;}
.idx-why-name span { color: #57b512;}
.idx-why-data { line-height: 1.6;}

@media only screen and (max-width:992px){
    /*.banner::before{display: block;content:'';padding-top:45%}
    .banner .banner-wrapper{position: absolute;top:0;right:0;bottom:0;left:0}*/
	
	
	.idx-section-1 > div:nth-of-type(1) { width: 100%; padding-bottom: 25px;}
	.idx-section-1 > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	.idx-section-1 > div:nth-of-type(1) p br { display: none;}
	.idx-section-1 > div:nth-of-type(1) h1, .idx-section-1 > div:nth-of-type(1) h2 { text-align: center;}
	
	.idx-case-content > div:nth-of-type(1) { width: 100%; padding-right: 0;padding-bottom: calc(10px + 2%);}
	.idx-case-content > div:nth-of-type(2) { width: 100%; padding-left: 0;  border-left: 0px solid #bcbcbc; border-top: 1px solid #bcbcbc; }
	.loop-case .owl-prev, .loop-case .owl-next { transform: scale(0.6);}
	.loop-case .owl-prev { left:-5px;  }
	.loop-case .owl-next { right:-5px; }
	
	.loop-case-2 .owl-prev, .loop-case-2 .owl-next { transform: scale(0.6);}
	.loop-case-2 .owl-prev { left:-5px;  }
	.loop-case-2 .owl-next { right:-5px; }
	
	.idx-why-content > div {  width: calc(50% - 25px);}
	.idx-why-content > div:last-child {  width: calc(100% - 25px);}
}


@media only screen and (max-width: 768px) {
	.idx-section-1 > div:nth-of-type(2) > div { width: 100%; }
	
	.idx-section-2-top-info br { display: none;}
	
}

@media only screen and (max-width: 570px) {
	.loop-case-2 .owl-item { border-right: 0px solid #eaeaea;}
	
}