/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden;font-weight: 400; }
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: 19px; line-height:26px; color: #333333; letter-spacing: 0; padding-top: 66px; font-weight: 400;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 19px;line-height:26px; font-weight: 400;}
p, td, li, label { font-size: 19px; }

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


.pc {display: block;}
.mobile{display: none;}
.banner { position: relative;}
.banner_new {}
.banner_pc {}
.banner_mobile {display: none;}
.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: #dedede !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: #fc7e2f !important; }

.idx-about-section { padding: 140px 5%; background: url("../images/idx-about-bg.jpg") no-repeat top center; background-size: cover; }
.idx-about-title { text-align: center; padding-bottom: 25px;}
.idx-about-title img { display: block; line-height: 0;  max-width: 486px; margin: 0 auto 30px auto;}
.idx-about-title h1 { margin: 0; padding: 0; letter-spacing: 0.3rem; font-size: 32px; font-weight: 700;}
.idx-about-title2 { font-size: 23px; font-weight: 700; color: #083a5f; padding-bottom: 14px;}
.idx-about-data { font-size: 20px; line-height: 32px; padding-bottom: 30px;}
.idx-about-info { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.idx-about-info > div { padding: 35px 40px; border-right: 1px solid #a1a1a1;}
.idx-about-info > div:last-child { border-right: 0px solid #a1a1a1;}
.idx-about-number { text-align: center; padding-bottom: 18px; font-weight: 900; color: #fc7e2f; font-size: 60px; line-height: 100%;}
.idx-about-info-data { display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;}
.idx-about-info-data > div:nth-of-type(1) { width: 55px; margin-right: 20px;}
.idx-about-info-data > div:nth-of-type(2) {font-size: 22px; font-weight: 400; line-height: 26px;}
.idx-about-info-data > div:nth-of-type(2) span { display: block; letter-spacing: 0.1;}

.idx-use-section { padding: 75px 5% 0 5%; max-width: 1300px; margin: auto;}
.title01 { font-weight: 500; position: relative; padding-bottom: 14px; margin-bottom: 22px; letter-spacing: 0; font-size: 32px; line-height: 110%;}
.title01:after { position: absolute; content: ""; display: block;width: 100%; height: 3px; bottom: 0; left: 0;background: linear-gradient(90deg, #0061c2 0%, #00b7c2 100%);}
.idx-use-list { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 60px;}
.idx-use-list > a { width: 33.33%; padding: 0 13px 35px 13px;}
.idx-use-list > a:hover .idx-use-pto {box-shadow: 0px 0px 0px 5px #00b7c2, 0px 0px 10px 0px rgba(0,0,0,0.1);}
.idx-use-pto { padding: 15px 0; margin-bottom: 20px; line-height: 0; transition: all 0.4s ease-out 0s; box-shadow: 0px 0px 0px 1px #4a77a8, 0px 0px 10px 0px rgba(0,0,0,0.1); border-radius: 10px;}
.idx-use-pto img { width: 100%;}
.idx-use-name { text-align: center; font-size: 22px; font-weight: 500; color: #333;}
.idx-use-name:before, .idx-use-name:after  { content: "|";display: inline-block;padding: 0 10px;transition: all 0.3s ease-out 0s;}



.idx-app-pto { background: #000; line-height: 0; margin-bottom: 25px; transition: all 0.4s ease-out 0s;}
.idx-app-pto img { width: 100%; transition: all 0.4s ease-out 0s; }
.idx-app-pto:hover {box-shadow: 0px 0px 0px 5px #00b7c2;}

.idx-news-section { position: relative; padding-top: 20px;}
/*.idx-news-section:after { position: absolute; left: 0; bottom: 0; width: 100%; z-index: -1; content: ""; background: #f2f2f2; height: 50%;}*/
.idx-news-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 35px; overflow: hidden; margin-right: -27px; padding-top: 10px;}
.idx-news-list > a { width: calc(33.33% - 27px); padding: 0 0 35px 0; margin-right: 27px;}
.loop4 .owl-item:hover img { transform: scale(1.05);}
.idx-news-pto { line-height: 0; overflow: hidden; margin-bottom: 20px;}
.idx-news-pto img { width: 100%; transition: all 0.4s ease-out 0s; }
.idx-news-name { font-size: 16px; color: #333; font-weight: 400;padding: 0px 4% 30px 4%;}


.idxnew-about-section { padding: 8% 5% 20% 5%; background: url("../images/idxnew-about-bg.jpg") no-repeat bottom center; background-size: 100%;}
.title01new { padding-bottom: 40px; margin-bottom: 60px; position: relative;}
.title01new:after { content: ""; position: absolute; height: 3px; width: 102px; bottom: 0; left: calc(50% - 51px); background: #dd5711;}
.title01new h1, .title01new div { font-weight: 400; font-size: 38px; color: #333; line-height: 160%; letter-spacing: 0; padding: 0; margin: 0; text-align: center;}
.title01new div { }
.color-orange { color: #f39801;}

.idxnew-about-info { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-bottom: 40px;}
.idxnew-about-info > div { padding: 0 0 40px 0; text-align: center; font-weight: 500; color: #333333; letter-spacing: 0; min-width: 260px;}
.idxnew-about-info > div > span { display: block; text-align: center; font-size: 46px; line-height: 100%; padding-bottom: 25px; font-weight: 700; letter-spacing: 0rem; color: #f39801;}
.idxnew-about-info-number { position: relative;}
.idxnew-about-info-number:after { position: relative; content: "+";}

.btn01new { text-align: center;}
.btn01new a { display: inline-block; position: relative; min-width: 190px; height: 50px; padding:10px 10px 0 10px; background: #f39801; color: #fff; font-weight: 700; font-size: 20px;}
.btn01new a:after { position: absolute; content: ""; left: 0; width: 100%; height: 1px; bottom: 6px; background: #fff; transform-origin: 50% 50%;transition: all 0.2s ease-out 0s;}
.btn01new a:hover:after { transform: scaleX(0);}

.idxnew-machine-section { padding: 5% 5% 0 5%; }
.title02new { font-size: 36px; color: #333333; text-align: center; line-height: 160%; padding-bottom: 35px; letter-spacing: 0;}
.idxnew-machine-btn { display:block;border: 1px solid #dedede;}
.idxnew-machine-btn:hover { border: 1px solid #f39800;}
.idxnew-machine-btn:hover .idxnew-machine-name { color: #f39800;}
.idxnew-machine-btn:hover .idxnew-machine-name:before, .idxnew-machine-btn:hover .idxnew-machine-name:after { color: #f39800;}
.idxnew-machine-pto { padding-bottom: 85%; margin-bottom: 20px;}
.idxnew-machine-content { padding: 0 18px 20px 18px;}
.idxnew-machine-name { font-size: 18px; text-align: center;color: #333; padding-bottom: 18px; letter-spacing: 0;}
.idxnew-machine-name:before, .idxnew-machine-name:after { content: "|";display: inline-block;padding: 0 5px;}
.idxnew-machine-data { font-size: 16px; color: #333; font-weight: 300; min-height: 80px;
	display: -webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}

.loop3 { padding: 0 40px 80px 40px;}
.loop3 .owl-dots { }
.loop3 .owl-item {position: relative; padding:0 5px; }
.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; top:calc(40% - 0px); left: 0; width: 100%; z-index: 11;}
/*.loop3 .owl-nav:after { position: absolute; content: ""; display: block;width: 110px; height: 2px; top:17px; left: 47px; background: #7a7a7a;}*/
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; background:transparent !important; width: 25px; height: 25px; border-radius: 0 !important; border: 0px solid #666666 !important;}
.loop3 .owl-prev { left:0; }
.loop3 .owl-next { right:0; }
.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: 15px; height: 15px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #f39800; position: relative;}
.loop3 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 10px; }
.loop3 .owl-next:before { content: ""; transform: rotate(45deg); right: 0px;}
.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; left: 0; bottom: 20px; width: 100%; text-align: center !important; padding: 0 0px; }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #d7d7d7 !important; width: 14px !important; height: 14px !important; border: 0px solid #4c4c4c;}
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #fc7e2f !important; }
.loop3 .owl-stage-outer { padding-top: 5px; padding-left: 5px; padding-right: 5px; }

.idxnew-solution-section { background: url("../images/idx-solution-bg.jpg") no-repeat top right; padding: 5% 5% 8% 5%;}
.idxnew-solution-content { max-width: 710px; margin: 0 auto 50px auto; text-align: center; font-size: 18px; font-weight: 300; line-height: 32px;}

.idxnew-application-section { background: url("../images/idxnew-application-bg.png") no-repeat bottom left, linear-gradient(180deg, #f4f4f4 0%, #fff 10%, #fff 75%, #f4f4f4 100%);; padding: 5% 5% 5% 5%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.idxnew-application-section > div:nth-of-type(1) { width: 40%; padding-right: 60px; font-weight: 300; letter-spacing: 0; line-height: 160%;}
.idxnew-application-section > div:nth-of-type(1) .title02new { text-align: left; font-weight: 400; padding-bottom: 25px;}
.idxnew-application-section > div:nth-of-type(2) { width: 60%; padding-left: 50px; padding-right: 50px;}

.loop2 { padding: 0 40px 40px 40px;}
.loop2 .owl-dots { }
.loop2 .owl-item {position: relative; padding:0 7px; }
.loop2 .owl-item:nth-child(even) .idx-shopping-pto { border-image: linear-gradient(to top right, #e67520 0%, #fff3dc 100%); border-image-slice: 1;}
.loop2 .owl-nav { position: absolute; top:calc(40% - 40px); left: 0; width: 100%; z-index: 11;}
/*.loop2 .owl-nav:after { position: absolute; content: ""; display: block;width: 110px; height: 2px; top:17px; left: 47px; background: #7a7a7a;}*/
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; background:transparent !important; width: 25px; height: 25px; border-radius: 0 !important; border: 0px solid #666666 !important;}
.loop2 .owl-prev { left:0; }
.loop2 .owl-next { right:0; }
.loop2 .owl-prev:before, .loop2 .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: 15px; height: 15px; background-size: contain; display: block; border-width: 3px 3px 0 0; border-style: solid; border-color: #f39800; position: relative;}
.loop2 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 10px; }
.loop2 .owl-next:before { content: ""; transform: rotate(45deg); right: 0px;}
.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; left: 0; bottom: 0px; width: 100%; text-align: center !important; padding: 0 0px; }
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #d7d7d7 !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: #fc7e2f !important; }
.loop2 .owl-stage-outer { padding-top: 5px; padding-left: 5px; padding-right: 5px; }

.idxnew-application-pto { padding-bottom: 100%; margin-bottom: 20px;}
.idxnew-application-pto:hover img { border: 1px solid #f39801;}
.idxnew-application-name { font-size: 18px ;color: #333; text-align: center; height: 50px; margin-bottom: 10px;}

.idxnew-pro-section {  padding: 8% 5%; display: flex; flex-direction: row; flex-wrap: wrap;}
.idxnew-pro-section > div:nth-of-type(1) { width: 40%; padding-right: 60px; font-weight: 300; letter-spacing: 0; line-height: 160%;}
.idxnew-pro-section > div:nth-of-type(1) .title02new { text-align: left; font-weight: 400; padding-bottom: 25px;}
.idxnew-pro-section > div:nth-of-type(2) { width: 60%; padding-left: 50px; padding-right: 50px; padding-top: 60px;}

.idxnew-pro-pto { padding-bottom:86%; margin-bottom: 20px; }
.idxnew-pro-pto img { border: 1px solid #4a77a8;}
.idxnew-pro-pto:hover img { border: 1px solid #f39801;}

.idxnew-news-section { background: url("../images/idxnew-news-bg.png") no-repeat bottom right; padding: 5%; }

.loop4 { padding: 0 40px 40px 40px;}
.loop4 .owl-dots { }
.loop4 .owl-item {position: relative; padding:0 7px; }
.loop4 .owl-item:nth-child(even) .idx-shopping-pto { border-image: linear-gradient(to top right, #e67520 0%, #fff3dc 100%); border-image-slice: 1;}
.loop4 .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
/*.loop4 .owl-nav:after { position: absolute; content: ""; display: block;width: 110px; height: 2px; top:17px; left: 47px; background: #7a7a7a;}*/
.loop4 .owl-prev, .loop4 .owl-next { position:absolute; z-index:100; background:transparent !important; width: 25px; height: 25px; border-radius: 0 !important; border: 0px solid #666666 !important;}
.loop4 .owl-prev { left:0; }
.loop4 .owl-next { right:0; }
.loop4 .owl-prev:before, .loop4 .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: 15px; height: 15px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #f39800; position: relative;}
.loop4 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 10px; }
.loop4 .owl-next:before { content: ""; transform: rotate(45deg); right: 0px;}
.loop4 .owl-prev:hover:before, .loop4 .owl-next:hover:before { opacity: 1;}
.loop4 .owl-stage-outer {z-index: 2;}
.loop4 .owl-dots { position: absolute; z-index: 100; left: 0; bottom: 0px; width: 100%; text-align: center !important; padding: 0 0px; }
.loop4 .owl-dots .owl-dot span, .loop4  .owl-dots .owl-dot span { background: #d7d7d7 !important; width: 14px !important; height: 14px !important; border: 0px solid #4c4c4c;}
.loop4 .owl-dots .owl-dot.active span, .loop4  .owl-dots .owl-dot:hover span { background: #fc7e2f !important; }
.loop4 .owl-stage-outer { padding-top: 5px; padding-left: 5px; padding-right: 5px; }

.idxnew-news-box { border: 1px solid #c6c6c6; display:block; background: #fff;}
.idxnew-news-pto {padding: 5px 5px 40% 5px; position: relative; margin-bottom: 20px;}
.idxnew-news-pto img {transition: all 0.4s ease-out 0s; }
.idxnew-news-pto:after {position: absolute; content: ""; z-index: 3; width: 148px; height: 1px; background: #f39801; bottom: 0; left:calc(50% - 74px);}
.idxnew-news-data { padding: 0 30px 25px 30px; font-size: 15px; line-height: 30px; color: #333;}
.idxnew-news-data span { display: block; font-size: 18px; color: #333333; font-weight: 700; padding-bottom: 12px; text-align: center;white-space:nowrap; text-overflow : ellipsis; overflow:hidden;}
.idxnew-news-data div { min-height: 92px;}

@media only screen and (max-width: 1279px) {
	#content { padding-top: 58px;}
	
	.idx-use-name { font-size: 18px; }
    
	.title01new h1, .title01new div { font-size: 3.2vw; }
	
	.idxnew-application-section{ padding-top: 40px; padding-bottom: 40px;}
	.idxnew-application-section > div:nth-of-type(1) { width: 100%; padding-right: 0px; padding-bottom: 30px; }
	.idxnew-application-section > div:nth-of-type(2) { width: 100%; padding-left: 20px; padding-right: 20px; }
	
	.idxnew-pro-section{ padding-top: 40px; padding-bottom: 40px;}
	.idxnew-pro-section > div:nth-of-type(1) { width: 100%; padding-right: 0px; padding-bottom: 30px; }
	.idxnew-pro-section > div:nth-of-type(1) p { display: none;}
	.idxnew-pro-section > div:nth-of-type(2) { width: 100%; padding-left: 20px; padding-right: 20px; padding-top: 0; }
}

@media only screen and (max-width: 980px) {
    .loop .owl-dots { bottom: 15px;}
	
	.idx-about-section { padding: 40px 5%; }
	.idx-use-section { padding: 35px 5% 0 5%;}
	.title01 { font-size: 24px;}
}
@media only screen and (max-width: 768px) {
    .pc, .banner_pc {display: none;}
    .mobile, .banner_mobile{display:block; }
	.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span {  width: 10px !important; height: 10px !important; margin: 0 4px !important; }
	.loop .owl-dots { bottom: 10px;}
	.idx-use-list > a { width: 50%; }
	.idx-use-pto { margin-bottom: 10px;}
	.idx-use-name { font-size: 16px; }
    
	.btn01new a { font-size: 18px;}
	.idxnew-machine-section, .idxnew-pro-section { padding-top: 40px;}
}
@media only screen and (max-width: 640px) {
	.idx-about-title img { max-width: 260px; margin-bottom: 15px;}
	.idx-about-data { font-size: 16px; line-height: 26px;}
	.idx-about-info { flex-direction: column;}
	.idx-about-info > div { border-width: 0; padding: 25px 20px;}
	.idx-about-title h1 { font-size: 26px;}
	.idx-about-number { font-size: 50px;}

	.idx-news-list { margin-right: 0;}
	.idx-news-list > a { width: calc(100% - 0px); padding: 0 0 35px 0; margin-right: 0;}
	
	.title01new h1, .title01new div  { font-size: 24px; }
	.title02new  { font-size: 24px; padding-bottom: 20px; }
}
@media only screen and (max-width: 570px) {
	
    
}

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

}

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

}