/* CSS Document */

body {	-webkit-text-size-adjust:100%; margin:0; /*text-align:center;*/ font-family: 'Microsoft JhengHei'; background: url(../images/dmeo-bg.jpg) no-repeat top center; background-size: contain; margin-top: 310px; overflow-x: hidden;}
img {	border:0; }

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

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

* { margin:0; padding:0; list-style:none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

.content-Box li {list-style: disc;}
.ul_a {display: flex; flex-wrap: wrap; justify-content: space-between; padding-left: 30px;}
.ul_a li {width: 33.33%; padding-right: 20px;}

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

#content { color: #3d3d3d; font-size: 18px; line-height: 180%; border-radius: 15px 15px 0 0; background: rgba(255,255,255,.8); padding: 86px 58px 62px 58px}
#content p { margin-bottom: 25px;}
.title01 { text-align: center;}
.title01 h1 { font-size: 2.7vw; color: #181b62; line-height: 100%; padding-bottom: 12px;}
#path { text-align: center; padding-bottom: 50px;}
#path li {display: inline-block; vertical-align: top; color: #878787; letter-spacing: 1px; font-size: 18px;}
#path li a { color: #878787;}
#path li:after {content: "/"; display: inline-block; padding: 0 4px;}
#path li a:hover, #path li:last-child { color: #c40c23;}
#path li:last-child:after {display: none;}

/*company*/
.company-data { display: flex; flex-direction:column; flex-wrap: wrap;}
.company-data > div { background: #f0f0f0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.company-data > div:nth-child(even) > div:first-child {order: 2;}
.company-data > div:nth-child(even) > div:last-child {order: 1;}
.company-data > div > div:first-child { width: calc(50% + 180px); line-height: 0;}
.company-data > div > div:first-child img { width:100%;}
.company-data > div > div:last-child { width: calc(50% - 180px); display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; padding: 30px 40px;}
.company-title { color: #3d3d3d; font-size: 28px; position: relative; line-height: 100%; padding-bottom: 12px; margin-bottom: 15px;}
.company-title:after { position: absolute; content: ""; width: 25px; height: 3px; background: #f5d20e; bottom: 0px; left: 0;}

/*history*/
.timeline { width: 100%; position: relative; margin-top:0px;}
.timeline-nav__item { width: auto; height: auto; text-align: center; opacity: 0.5; background: transparent; color: #c2c2c2; margin: 15px 25px !important; position: relative; font-size: 17px; line-height: 28px; font-weight: 400; outline: none; cursor: pointer;}
.timeline-nav__item::before { content: ""; position: absolute; top: 30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 10px; height: 10px; border-radius: 100%; background-color: #c2c2c2; transition: .2s;}
.timeline-nav__item.slick-current { color: #f5b60e; opacity: 1;}
.timeline-nav__item.slick-current::before { background-color: #f5b60e;}
.timeline-wrapper { position: relative; width: 100%; height: auto; margin: 60px auto;}
@media (max-width: 500px) { 
	.timeline-wrapper {   height: auto;   max-height: 900px; }}
	.timeline-slider { height: 100%;
}
.timeline .slick-list { height: 100%;}
@media (min-width: 1080px) { 
	.timeline .slick-list { padding: 0 180px !important; }
}
.timeline .slick-track { height: 100%;}
.timeline-slide { position: relative; background-repeat: no-repeat; outline: none; background-size: auto 400px, cover; background-position: top; margin: 0 24px; width: 80%; z-index: 1;}
.timeline-slide:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f0f0f0; z-index: 2;}
.timeline-slide__content { z-index: 5; position:relative; top: 0px; background: #f0f0f0; width: 100%; left: 50%; -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); padding: 80px 50px 50px 50px; opacity: 0; transition: opacity 1s;}
@media (max-width: 500px) { 
	.timeline-slide__content {   width: 100%; padding: 80px 20px 30px 20px}
}
.timeline-year { z-index: 6; font-size: 35px; color: #ffffff; background: #f5b60e; padding: 15px 26px; transition: opacity 1.2s; position: absolute; right: 0; opacity: 0;}
.timeline-title { color: #f5b60e; font-size: 28px; font-weight: 400; padding-bottom: 15px; line-height: 100%;}
.timeline-text { font-size: 18px; line-height: 28px; color: #666666;}
.timeline .slick-current:after { background-color: rgba(0, 52, 113, 0);}
.timeline .slick-current .timeline-year { opacity: 1;}
.timeline .slick-current .timeline-slide__content { opacity: 1;}

/*products*/
.seo-box { margin-bottom: 40px;}
.seo-box p {font-size: 16px;}
.side_classLink { }
.side_classLink ul { text-align:left; padding:0 0 20px 0; position:relative; display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -11px;}
.side_classLink ul li { display:inline-block; vertical-align:top; padding: 0 11px 11px 0;}
.side_classLink ul li > a{ display:flex; width: 169px; line-height: 1.2;  padding:13px 10px; color:#3d3d3d; font-size:16px; text-align: center; border: 1px solid #d3d3d3;min-height: 66px;justify-content: center;align-items: center;}
.side_classLink ul li > a:hover, .side_classLink ul li > a.current { color:#fff; background:#c40c23; border-color: #c40c23;}
.side_classLink ul li.current02{ display:none; }
.m_classLink{ display:none;}

.products-main {display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 38px;}
.products-main > div:first-child {width: 169px; border-top:4px solid #8e9295; padding-top: 30px; font-weight: bold; font-size: 24px; color: #464648;}
.products-main > div:last-child, .products-main > .proSider, .products-main .probox-right {width: calc(100% - 169px - 11px); margin-left: 11px; border-top:1px solid #aeaeae; padding-top: 30px;}
.products-list { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -29px; margin-right: -29px;}
.products-list > div { width: 25%; padding: 0 29px 38px 29px; border-right: 1px solid #ececec;}
.products-list > div:nth-child(4n) { border-width: 0;}
.products-list-pto { line-height: 0; overflow: hidden; margin-bottom: 16px;}
.products-list-pto img {transition: all 0.4s ease-out 0s; width: 100%; }
.products-list > div:hover img {transform: scale(1.1);}
.products-list-name { color: #3d3d3d; font-size: 16px; line-height: 140%; padding-bottom: 12px;}
.products-list-btn a { display: inline-block; margin-right: 6px; width: 33px; height: 33px; border-radius: 100%; border:2px solid #d3d3d3; text-align: center; line-height: 33px; color: #cccccc; font-size: 17px;}
.products-list-btn a:hover {color: #fff; background: #c40c23;}
#page1 { border-top:1px solid #e7e7e7; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;}
#page1 a {display: inline-block; width: 50px; height: 50px; text-align:center; line-height: 50px; font-size: 18px; color: #aeaeae;}
#page1 a:hover, #page1 a.current { color: #2855ab;}
#page1 a.btn-prev, #page1 a.btn-next { background: #454545; color:#fff;}
#page1 a.btn-prev:hover, #page1 a.btn-next:hover { background: #2855ab; color:#fff;}

/*products-detail*/
.share-box { padding-bottom: 32px;}
.products-detail-top { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: 45px;}
.products-detail-top > div {width: 50%;}
.pro-b {margin-bottom: 70px; padding: 0 80px; max-width: 95%; margin: 0 auto;}
.pro-b img { width:auto; width: 100%;}
/*.pro-b .owl-buttons { display:none;}*/
.pro-b .owl-prev { position:absolute; z-index:100; left:-20px; top:calc(50% - 40px); background:none !important;}
.pro-b .owl-prev:before { font-family: 'Font Awesome 5 Free';font-weight: 900;font-size:90px; content:"\f104"; color: #919498}
.pro-b .owl-next { position:absolute; z-index:100; right:-20px;font-weight: 900; top:calc(50% - 40px); background:none !important;}
.pro-b .owl-next:before { font-family:'Font Awesome 5 Free'; font-size:90px; content:"\f105"; color: #919498;}
.pro-b .owl-controls .owl-page span { background: #dfdfdf !important;}
.pro-b .owl-controls .owl-page.active span, .pro-b .owl-controls.clickable .owl-page:hover span { background: #f2b000!important;}
.btn-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.btn-box a {width: 95px; height: 95px; border-radius: 100%; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; background: #a7b5c2; color: #fff; font-size: 18px; font-weight: bold; margin: 0 10px;}
.btn-box a:hover { opacity: 0.6;}
.btn-inquiry { background: #181b62 !important;}
.btn-prevent {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}
.spec-table { border-spacing: 0; width: 100%;}
.spec-table th { background: #181b62; line-height: 100%; font-size: 18px; color: #fff; padding: 12px 10px; text-align: center;}
.spec-table td { text-align: left; color: #6f6f6f; font-size: 18px; padding: 8px 10px; border-bottom: 1px solid #e8e8e8;}
.spec-table td:nth-of-type(1) { font-weight: bold; color: #464648;}
.spec-table td a { color: #c40c23;}
.spec-table td a:hover {opacity: 0.6;}
.spec-table td i {font-size: 28px;}
.back-btn { background: #f3f3f3; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; padding: 0 10px; text-align: right;}
.back-btn a {display: block; line-height: 66px; background: #fff; text-align: center; width:154px; color: #9f9f9f; font-size: 18px; margin: 0 0 0 auto;}
.back-btn a:hover { background: #9f9f9f; color: #fff; width: 100%;}

.pro-b > div { position: relative; }
.pro-b .prev { position: absolute; left: 0px; top:calc(50% - 30px); z-index: 10;}
.pro-b .prev:before { font-family: 'Font Awesome 5 Free';font-weight: 900; font-size:60px; content:"\f104"; color: #DDDDDD;}
.pro-b .next { position: absolute; right: 0px; top:calc(50% - 30px); z-index: 10;}
.pro-b .next:before { font-family: 'Font Awesome 5 Free';font-weight: 900; font-size:60px; content:"\f105"; color: #DDDDDD;}

.rslides_tabs { margin-top:0px;  justify-content: center; display:flex; flex-direction:row; flex-wrap:wrap; }
.rslides_tabs > li { padding: 0 5px;}
.rslides_tabs > li > a { display: block; width:12px; height: 12px; border-radius: 100%; background: #d7d7d7; text-indent: -99999px;}
.rslides_here > a, .rslides_tabs > li > a:hover { background: #181b62 !important;}
.pdf_dl {
  width: 64px;
}
@media only screen and (max-width: 1920px) {
	body {background-size: auto;}
}

@media only screen and (max-width: 1160px) {
	body {margin-top: 150px;}
	#content {padding: 40px 10px 40px 10px;}	
}
@media only screen and (max-width: 980px) {
	.title01 h1 { font-size: 44px; padding-bottom: 6px;}
	#path {padding-bottom: 25px;}
	#path li {font-size: 14px; }
	#content {font-size: 17px; }
	.company-data > div {flex-direction: column; width: 100% !important;}
	.company-data > div > div:first-child, .company-data > div > div:last-child { width: 100%;}
	.company-data > div:nth-child(even) > div:first-child {order: 1;}
	.company-data > div:nth-child(even) > div:last-child {order: 2;}
	.company-data > div > div:last-child {padding: 20px;}
	.side_classLink { display:none;}
	.m_classLink{ display:block; position:relative; background: #133777;}
	.m_classLink a.main{ display:block; font-size:20px; position:relative; padding: 8px 10px 10px 10px; color:#fff; text-align:left; cursor:pointer;}
	.m_classLink a.main i{ display:block; font-size:20px; position:absolute; right:20px; top:calc(50% - 3px); margin-top:-11px; color:#fff; font-style:normal;font-family: "Font Awesome 5 Free";font-weight: 900;}
	.m_classLink ul{ display:none; width:100%;  position:absolute; z-index:101; background:#fafafa; border-width:1px 1px 0 1px; border-color:#d3d3d3; border-style:solid; }
	.m_classLink ul li { display:block; margin:0 0; padding:0;}
	.m_classLink ul li > a{ display:block; width: 100%; line-height: 100%;  padding:13px 10px; color:#3d3d3d; font-size:18px; text-align: left; border-bottom: 1px solid #d3d3d3;}
	.m_classLink ul li > a:hover, .m_classLink ul li > a.current { color:#3d3d3d; background:#f5d20e; }
	.m_classLink ul li.current02{ display:none; }
	.products-main {padding-top: 20px;}
	.products-main > div { width: 100% !important;}
	.products-main > div:first-child {margin-left: 0px; padding:10px 0;}
	.products-main > div:last-child,.products-main .probox-right {margin-left: 0px;}
	.share-box { padding: 20px 0;}
	.products-detail-top > div {width: 100%;}
	.btn-box {margin-top: 30px;}
	.application-list > div { width: calc(50% - 30px);}
	.faq-title > div:last-child { padding-right: 0;}

	.seo-box { margin-bottom: 0px; margin-top: 15px;}
}

@media only screen and (max-width: 768px) {
	.products-list {margin: 0 -14px;}
	.products-list > div { width: 50%; padding: 0 14px 38px 14px;}
	.products-list > div:nth-child(2n) { border-width: 0;}
	.news-title {font-size: 24px;}
	.news-list > div { width:100% !important;}
	.news-list > div:last-child {padding: 20px 0 0 0;}
	.news-detail-top > div { width:100% !important;}
	.news-detail-top > div:last-child { margin-left:0px; margin-top: 15px; font-size: 24px; padding-bottom: 15px; }
	.news-date2 { width:auto; height: auto; padding: 8px; text-align: left; display: inline-block;}
	.news-date2 span { display: inline-block; vertical-align: middle; padding: 0 10px 0 0; margin: 0 10px 0 0; border-right: 1px solid rgba(255,255,255,.5); border-bottom-width: 0;}
	.video-list > div { width: 50%; }
	.video-list > div:nth-child(5n):after { display: block;}
	.video-list > div:nth-child(2n):after { display: none;}
	
}
@media only screen and (max-width: 640px) {
	.application-list > div { width: calc(100% - 30px);}
    .ul_a li {width: 50%;}
}
@media only screen and (max-width: 570px) {
	.pro-b {padding: 0 25px;}
	.pro-b .owl-prev:before, .pro-b .owl-next:before {font-size: 60px;}
	.inquiry-cart > div:nth-of-type(2) {width: calc(100% - 130px);}
	.inquiry-cart > div:nth-of-type(3) { width: 70px;}
}

@media only screen and (max-width: 414px) {
	.ul_a li {width: 100%; padding-right: 0;}
}

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

}
.btn-box a.btn_pdf{background: #fff;}
@media only screen and (min-width:1024px){
.btn-box a.btn_pdf{background: #fff;display: flex;width: 50%;justify-content: flex-start;padding-left: 12px;}
  
}