/* 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:1280px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 16px; line-height:1.8; color: #222; letter-spacing: 0.1rem; font-weight: 400; padding-top: 98px;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 16px;line-height:1.8;  font-weight: 400;}
p, td, li, label { font-size: 16px;line-height:1.8;  font-weight: 400;}

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

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


.banner-section { margin-bottom: calc(20px + 3%);}
.banner { }
.banner-mobile { display: none;}
.loop .owl-dots { display: none;}
.loop .owl-item {position: relative; }
.loop .owl-nav { position: absolute; bottom:90px; right: 20px; width: 110px; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:#fff !important; width: 50px !important; height: 50px !important; border: 1px solid #073061 !important; border-radius: 100% !important; margin: 0 !important;}
.loop .owl-prev { left:0px; }
.loop .owl-next { right:0px;}
.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: 14px; height: 14px; background-size: contain; display: inline-block; border-width: 1px 1px 0 0; border-style: solid; border-color: #222;}
.loop .owl-prev:before { content: ""; transform: rotate(-135deg); margin-left: 4px; }
.loop .owl-next:before { content: ""; transform: rotate(45deg); margin-right: 4px;}
.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: -45px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #d6d6d6 !important; width: 10px !important; height: 10px !important;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: #27a639 !important; }

.demo-section { padding-left: 5%; padding-right: 5%;}

.idx-about-section { padding:0 5% calc(30px + 4%) 5%; overflow: hidden;}
.idx-about-content { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-about-content > div:nth-of-type(1) { width: 50%;}
.idx-about-content > div:nth-of-type(2) { width: 50%; padding: calc(10px + 3.5%) 0 0 0;}

.pto-type-1 { background: url("../images/pto-bg-1.png") no-repeat top center; background-size: contain; padding: 5%; line-height: 0; position: relative; left: -20px;}
.pto-type-2 { background: url("../images/pto-bg-2.png") no-repeat top center; background-size: contain; padding: 54px 80px 98px 57px; line-height: 0; position: relative; left: -60px;}

.title01 { padding-bottom: 18px; margin-bottom: 25px; position: relative;}
.title01:after { content: ""; position: absolute; bottom: 0; left: 0; width: 50px; height: 2px; background: #ea4741;}
.title01 > span { display: block; font-size: calc(22px + 1vw); color: #073061; font-weight: 700; line-height: 100%; padding-bottom: 15px; font-family: 'Noto Serif TC', sans-serif; }
.title01 > div { display: block; font-size: calc(20px + 0.8vw); color: #222222; font-weight: 700; margin: 0; padding: 0; line-height: 120%; font-family: 'Noto Serif TC', sans-serif; }

.title02 { padding-bottom: 25px; font-size: calc(18px + 0.4vw); color: #222;}
.title02 h1 { font-size: calc(18px + 0.6vw); font-weight: 500; line-height: 150%; padding: 0 0 12px 0; margin: 0;}

.align-right { text-align: right;}
.align-center { text-align: center;}

.btn01 { display: inline-block; position: relative; width: 170px; line-height: 40px; border: 2px solid #073061; text-align: center; overflow: hidden;}
.btn01 span { position: relative;display: inline-block;z-index: 2;letter-spacing: 0.1rem; font-size: 13px; color: #073061; font-weight: 500;}
.btn01:after { position: absolute; content: ""; width: 130%; height: 100%; top: 0; left: -130%; clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 0 100%);transition: all 0.4s ease-out 0s; background: #073061; }
.btn01:hover:after { left: 0;}
.btn01:hover span { color: #fff;}

.idx-service-section { position: relative; padding-bottom: calc(60px + 10%);}
.idx-service-section:after { position: absolute; content: ""; z-index: -1; left: 0; top:50px; width: 100%; background: #f8f8f8; height: 848px; clip-path: polygon(0% 170px, 100% 0%, 100% calc(100% - 170px), 0 100%);}

.idx-service-content { display: flex !important; flex-direction: row; flex-wrap: wrap;}
.idx-service-content > div:nth-of-type(1) { width: 210px;}
.idx-service-content > div:nth-of-type(2) { width: calc(100% - 210px); padding: 60px 4% 0 5%; position: relative;}
.idx-service-pto { line-height: 0; border-radius: 50px 0 0 50px; overflow: hidden;}
.idx-service-pto img { width: 100%;}
.idx-service-data { position: absolute; z-index: 3; right: 0; bottom: -95px; background: #fff; border-radius: 30px 0;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); padding: calc(10px + 2%); width: 470px;}
.idx-service-data > b { display: block; color: #073061; font-size: calc(18px + 0.5vw); margin-bottom: 10px;}

.idx-service-content-2 { padding: 0 0 calc(30px + 4%) 0;}
.idx-service-content-2 .idx-service-items {display: flex;flex-wrap: wrap;padding: 30px 0;}
.idx-service-content-2 .idx-service-items > div {width: 25%;padding: 0 10px;margin-bottom: 30px;}
.idx-service-content-2 .idx-service-items > div .idx-service-pic {position: relative; height: 0; overflow: hidden; padding-bottom: 83.2%; margin-bottom: 20px;}
.idx-service-content-2 .idx-service-items > div .idx-service-pic .aFull {font-size: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10;}
.idx-service-content-2 .idx-service-items > div .idx-service-pic .idx-service-text {font-size: 16px; color: #fff; line-height: 28px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; background: rgba(0, 0, 0, 0); padding: 0 8px;opacity: 0; transition: all 0.5s ease 0s;}
.idx-service-content-2 .idx-service-items > div .idx-service-pic:hover .idx-service-text {background: rgba(7, 48, 97, 0.8); opacity: 1;transition: all 0.5s ease 0s;}
.idx-service-content-2 .idx-service-items > div .idx-service-tit { text-align: center;}
.idx-service-content-2 .idx-service-items > div .idx-service-tit a{ font-weight: 500; font-size: 18px; color: #073061; padding-bottom: calc(10px + 3%); line-height: 140%; letter-spacing: 0.1rem;}

.idx-onestop-steps { display: flex;flex-wrap: wrap;justify-content: space-between;padding: 50px 5%;overflow: hidden;}
.idx-onestop-steps > div{width: 25%; text-align: left;position: relative;margin-bottom: 30px;display: flex;flex-direction: column;align-items: center;}
.idx-onestop-steps > div .onestop-pic{width: 150px;height: 150px;border-radius: 50%;background: #073061;position: relative;margin-bottom: 10px;}
.idx-onestop-steps > div .onestop-pic::after{content: ""; width: 65px;height: 2px;background: #073061;position: absolute;top: 50%;right: -75px;transform: translateY(-50%);z-index: -1;}
.idx-onestop-steps > div:nth-child(4) .onestop-pic::after{display: none;}
.idx-onestop-steps > div .onestop-pic .num{width: 35px;height: 35px;border-radius: 50%;background: #8297b0;color: #fff;font-weight: 500; position: absolute;left: -15px;top: 50%;transform: translateY(-50%);z-index: 2;text-align: center;}
.idx-onestop-steps > div .onestop-pic img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.idx-onestop-steps > div .onestop-tit{font-weight: 500; font-size: 18px; color: #073061; padding-bottom: calc(10px + 3%); line-height: 140%; letter-spacing: 0.1rem;text-align: center;}

.idx-pro-section-bottom { padding-bottom: 5%; padding-left: 5%; padding-right: 5%;}
.idx-pro-list { background:url("../images/bg-dot.png") no-repeat bottom center; max-width: 1480px; margin: 0 auto; padding-bottom: 80px; margin-bottom: 35px;}

.loop2 {  }
.loop2 .owl-dots { }
.loop2 .owl-item {position: relative; }
.loop2 .owl-nav { position: absolute; top:calc(50% - 35px); left: 0; width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:calc(50% - 20px); background:transparent !important; width: 72px; height: 72px; margin: 0 !important; border-radius: 100% !important; border: 0px solid #fff !important; transform-origin: 50% 50%;transition: all 0.4s ease-out 0s;}
.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: 72px; height: 72px; background-size: contain; display: inline-block; border-width: 0; border-style: solid; border-color: #fff; position: relative; }
.loop2 .owl-prev:before { content: ""; background-image: url("../images/btn-prev.png"); }
.loop2 .owl-next:before { content: ""; background-image: url("../images/btn-next.png");}
.loop2 .owl-prev:hover, .loop2 .owl-next:hover { opacity: 0.5;}
.loop2 .owl-stage-outer {z-index: 2;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom: -60px; left: 0; width: 100%; text-align: center!important; padding: 0 0px; }
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #d1d1d1 !important; width: 10px !important; height: 10px !important;}
.loop2 .owl-dots .owl-dot.active span, .loop2  .owl-dots .owl-dot:hover span { background: #073061 !important; }

.pro-name { color: #222; font-weight: 500; font-size: 18px; margin-bottom: 15px; line-height: 140%; letter-spacing: 0.1rem; min-height: 51px; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;white-space: normal;}
.pro-pto { padding-bottom: 132%;}


.idx-why-section { position: relative; /*padding: calc(30px + 10%) 5% calc(30px + 5%) 5%;*/padding: 0 5% calc(30px + 5%) 5%;}
.idx-why-section:after { position: absolute; content: ""; z-index: -1; left: 0; top:0px; width: 100%; background: #f8f8f8; height: 1150px; clip-path: polygon(0% 170px, 100% 0%, 100% calc(100% - 170px), 0 100%);}

.idx-why-content { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: calc(30px + 5%);}
.idx-why-content > div { width: 50%;}
.idx-why-content > div:nth-of-type(1) { padding-right: 3.5%;}

.idx-why-section-2 { padding-left: 18px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.idx-why-section-2 > div { padding-bottom: 22px; width: calc(50% - 9px); background: #fff; text-align: center; padding: 44px 10px 33px 10px; font-size: 15px; color: #abadb1; margin-bottom: 18px;}
.idx-why-section-2 > div > img { display: block; height: 41px; margin: 0 auto 5px auto;}
.idx-why-section-2 > div > div { font-family: 'Noto Serif TC', sans-serif; color: #3c3e40; font-size: 15px; text-align: center; font-weight: 500; line-height: 1.5;}
.idx-why-section-2 > div > div span { font-size: 30px;}

.idx-why-section-3 { padding:20px 0 0 0;}
.idx-why-section-3 { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-why-section-3 > div:nth-of-type(1) { width: 58%;}
.idx-why-section-3 > div:nth-of-type(2) { width: 42%; padding: 40px 0 0 0;}

.data-type-1 { padding: 0 0 calc(20px + 3.5%) 30px; position: relative; color: #3c3e40; line-height: 24px;}
.data-type-1 span { display:block; font-size: calc(17px + 0.3vw); font-weight: 700; color: #222; padding-bottom: 10px; line-height: 110%;}
.data-type-1:before { content: ""; position: absolute; left: 5px; top:7px; background: url("../images/list-icon-1.png") no-repeat top left; display: block; width: 12px; height: 13px;}

.idx-contact-section { padding: 0 5% calc(20px + 5%) 5%;}
.idx-contact-content { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; padding-top: calc(35px + 4%); border-top: 4px solid #d6d6d6;}
.idx-contact-content:before { position: absolute; content: ""; top: -4px; left: 0; width: 40%; height: 4px; background: #073061; }
.idx-contact-content > div:nth-of-type(1) { width: 35%; padding: 0 3%;}
.idx-contact-content > div:nth-of-type(2) { width: 65%; padding-right: 3%;}
.idx-contact-content p .color-red{ font-weight: bold;  }
.color-red { color: #d02f2f;}


.contact-section { }
.contact-layout-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-layout-1 > div { width: calc(50% - 7px);}

.contact-form-list {  margin-bottom: 10px;display: flex; flex-direction: column; flex-wrap: nowrap; padding: 5px 0px; }
.contact-form-list > div:nth-of-type(1) { width: 100%; padding: 3px 0px;  position: relative;font-size: 16px; line-height: 170%; }
.contact-form-list > div:nth-of-type(1):after { position: absolute; content: ":"; top: 0; right: 0; display: none;}
.contact-form-list > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px;}
.contact-form-list2 {  margin-bottom: 10px;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 5px 0px; }
.contact-form-list2 > div:nth-of-type(1) { width: 90px; padding: 3px 0px;  position: relative;font-size: 15px; line-height: 170%; }
.contact-form-list2 > div:nth-of-type(1):after { position: absolute; content: ":"; top: 0; right: 0; display: none;}
.contact-form-list2 > div:nth-of-type(2) { width: calc(100% - 70px); padding-left: 10px;}

.contact-form input[type="text"], .contact-form input[type="number"], .contact-form input[type="tel"], .contact-form input[type="phone"], .contact-form input[type="date"], .contact-form input[type="email"], .contact-form input[type="password"], .contact-form input[type="button"], .contact-form textarea { font-size: 15px; border-width:1px; border-style: solid; border-color: #cccccc; margin: 0px 0 0px 0; width: 100%; padding:0px 15px ; color:#333; background: transparent; font-family: 'Noto Sans TC', sans-serif; line-height: 40px; border-radius: 0px; }
.contact-form textarea { height:98px; padding:15px; resize:none; line-height: 140%;}
.contact-form select{ margin: 0 0 0px 0;  width:100%; max-width: 160px; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 15px) 18px; background-size: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: transparent; font-size: 15px; border-width:1px; border-style: solid; border-color: #cccccc; color:#333; font-family: 'Noto Sans TC', sans-serif;  padding:0px 35px 0px 15px;  line-height: 40px; border-radius: 0px;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}

.contact-btn { display: flex; flex-direction: row; flex-wrap: wrap; align-items:center; justify-content:space-between; }
.contact-btn > div { padding-bottom: 10px;}

.contact-note2 {  margin-top: 0px; display: inline-block;position: relative;padding-left: 22px; padding-right: 15px; padding-bottom: 0px; cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; line-height: 130%; color: #333; margin-bottom: 0;}
.contact-note2 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 4px;left: 0;height: 16px;width: 16px;background-color: transparent; border: 1px solid #a4a4a4; border-radius: 100%;}
.contact-note2:hover input ~ .checkmark {background-color: #eeeeee;}
.contact-note2 input:checked ~ .checkmark {border-color: #1178f2;}
.checkmark:after {content: "";position: absolute;display: none;}
.contact-note2 input:checked ~ .checkmark:after {display: block;}
.contact-note2 .checkmark:after {left: 2px;top: 2px;width: 10px;height: 10px; background: #1178f2; border-radius: 100%;}

.contact-btn { width: 170px; height: 44px; line-height: 40px; position: relative;  display: block; background: #073061; border: 2px solid #073061; text-align: center;font-size: 16px; color: #fff !important; font-weight: 700; }
.contact-btn img { display: inline-block; margin-right: 15px; position: relative; top:-2px;}


@media only screen and (max-width: 1279px) {
	#content { padding-top:64px;}
	.banner { display: none}
	.banner-mobile { display: block;}
	
	.idx-about-content > div:nth-of-type(1) { width: 100%; order: 2;}
	.idx-about-content > div:nth-of-type(2) { width: 100%; order: 1; padding: 0px 0 0 0;}
	.pto-type-1 { left: auto;}
	
	.idx-service-content > div:nth-of-type(2) { padding-right: 0;}
	.idx-service-pto { border-radius: 30px 30px 0 0px; }
	.idx-service-data { position: relative; right: auto; bottom: auto; border-radius: 0 0 20px 20px; width: 100%;}
	.idx-service-content-2 .idx-service-items > div {width: 33%;}
	.idx-onestop-steps > div .onestop-pic::after{right: -65px;}
}

@media only screen and (max-width: 980px) {
	.loop .owl-nav { width: 70px; bottom: 50px;}
	.loop .owl-prev, .loop .owl-next { width: 30px !important; height: 30px !important;}
	.loop .owl-prev:before, .loop .owl-next:before { width: 8px; height: 8px; position: relative; top:-3px;}
	
	.idx-service-section { padding-bottom: calc(30px + 4%)}
	.idx-service-section:after { height: 550px; clip-path: polygon(0% 8%, 100% 0%, 100% 92%, 0 100%);}
	.idx-service-content > div:nth-of-type(1) { width: 100%;}
	.idx-service-content > div:nth-of-type(2) { width: calc(100% - 0px); padding: 0px 0; }
	.idx-service-content-2 .idx-service-items > div {width: 50%;}
	.idx-service-content-2 .idx-service-items {justify-content: center;}
	.idx-service-content-2 .idx-service-items > div .idx-service-pic { margin-bottom: 10px;}
	.idx-service-content-2 .idx-service-items > div .idx-service-pic .idx-service-text {z-index: 11;background: rgba(7, 48, 97, 0.6); opacity: 1;overflow: auto;padding: 10px;}
	.idx-service-content-2 .idx-service-items > div .idx-service-pic:hover .idx-service-text {background: rgba(7, 48, 97, 0.6); opacity: 1;}

	.idx-onestop-steps { padding: 30px 5%;}
	.idx-onestop-steps > div{width: 50%; }
	.idx-onestop-steps > div .onestop-pic::after{content: ""; width: 1000px;right: -100%;}
	.idx-onestop-steps > div:nth-child(4) .onestop-pic::after{display: block;}

	.idx-why-section { padding-top: calc(20px + 2%);}
	.idx-why-content > div { width: 100%;}
	.idx-why-content > div:nth-of-type(1) { padding-right: 0%;}
	.idx-why-section-2 { padding-left: 0; }
	
	.idx-why-section-3 > div:nth-of-type(1) { width: 100%; order: 2; left: auto;}
	.idx-why-section-3 > div:nth-of-type(2) { width: 100%;  order: 1; padding-top: 0;}
	.pto-type-2 { right: auto;}
	
	.idx-contact-content > div:nth-of-type(1) { width: 100%; padding: 0 0;}
	.idx-contact-content > div:nth-of-type(2) { width: 100%; padding-right: 0%;}
}
@media only screen and (max-width: 768px) {
	.contact-layout-1 > div { width: calc(100% - 0px);}
	.idx-onestop-steps { padding: 30px 0;}
}
@media only screen and (max-width: 640px) {
	
	
}
@media only screen and (max-width: 570px) {
	.pto-type-1, .pto-type-2 { padding: 30px; }
	.idx-service-content-2 .idx-service-items > div {width: 100%; max-width: 450px;}
}

@media only screen and (max-width: 414px) {
	.idx-onestop-steps > div{width: 100%; }

}

@media only screen and (max-width: 320px) {
	.idx-why-section-2 > div { width: calc(100% - 0px);}
	

}

.amg_banner_wrap {position: relative; z-index: 10; height: 0; padding-bottom: 43.8%; overflow: hidden;}
.amg_banner_wrap > section {position: absolute!important; top: 0!important; left: 0!important; right: 0!important; bottom: 0!important;}
@media only screen and (max-width:1279px){
	.amg_banner_wrap {padding-bottom: 79.06%;}
}