/* CSS Document */
@import url(font-awesome/css/font-awesome.min.css);

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:Abel,"微軟正黑體"; font-size:15px; color:#363636; line-height:22px; letter-spacing:1px; background:url(../images/idx-bg.jpg) top center no-repeat #081837; }
img {	border:0; }

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

a { text-decoration:none; color:#6e6e6e;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s; }
a:hover {	color:#6e6e6e; 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+ */}

.main-Box, .top-Box, .menu-Box, .banner-Box, .content-Box, .content2-Box, .footer-Box, .copyright-Box { max-width:1100px; margin:0 auto; text-align:left; position:relative; clear:both;}

.after-0:after { clear:both; display:block; content:""; height:0; text-indent:-99999px;}
.after-5:after { clear:both; display:block; content:""; height:5px; text-indent:-99999px;}
.after-10:after { clear:both; display:block; content:""; height:10px; text-indent:-99999px;}
.after-15:after { clear:both; display:block; content:""; height:15px; text-indent:-99999px;}
.after-20:after { clear:both; display:block; content:""; height:20px; text-indent:-99999px;}

#gotop { display: none; position: fixed; right:20px; bottom:20px; cursor: pointer; }
#gotop a { display:inline-block; width:30px; height:30px; border-radius:100%; padding-top:6px; color:#000; opacity:0.5;  filter: alpha(opacity=50); background:#fff;}
#gotop a:hover { color:#000; opacity:1;  filter: alpha(opacity=80);}

#content { letter-spacing:1px;}
.banner { text-align:center; padding:45px 20px 0 20px; text-transform:uppercase; letter-spacing:1px; font-size:42px; line-height:42px;  color:#000; background:#fff; display:none;}
.main-link { background:#fff; line-height:0; margin-bottom:20px; }
.main-link-pto { width:65%; display:table-cell; vertical-align:top; height:100%; position:relative;}
.main-link-pto img { width:100%;}
.main-link-pto span { display:block; width:100%; height:100%; background:url(../images/grid-item-bg.png); z-index:2; position:absolute; opacity:0;  filter: alpha(opacity=0);
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.main-link-data { width:35%; display:table-cell; vertical-align:top; padding:45px 42px; color:#000; font-size:40px; line-height:40px; position:relative;}
.main-link-data span { display:inline-block; position:absolute; left:42px; bottom:60px; font-size:20px; line-height:20px; text-transform:uppercase; color:#000;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.main-link-data span i { display:inline-block; padding-left:15px;}
.main-link:hover .main-link-pto span { opacity:0.7;  filter: alpha(opacity=70);}
.main-link:hover .main-link-data span { color:#2b47c9;}

.content-box { padding:20px 28px 24px 28px; background:#fff;}
.path { padding-bottom:20px; text-align:right; letter-spacing:0; color:#1832a3;}
.path a { display:inline-block; background:url(../images/breadcrumbs-separated.png) no-repeat right; height:19px; padding-right:20px; margin-right:10px; font-size:13px;}
.path a:hover, .path span { color:#1832a3;}

.pro-list { display:flex; flex-direction:row; flex-wrap:wrap;}
.pro-list > div { width:calc(25% - 26px); margin:0 13px; padding:14px 0 30px 0;}
.pro-list > div:nth-of-type(1) { border-top:3px solid #00758e;}
.pro-list > div:nth-of-type(2) { border-top:3px solid #4c5aa7;}
.pro-list > div:nth-of-type(3) { border-top:3px solid #00b1ab;}
.pro-list > div:nth-of-type(4) { border-top:3px solid #d2760c;}
.pro-list > div:nth-of-type(5) { border-top:3px solid #447bb1;}
.pro-list > div:nth-of-type(6) { border-top:3px solid #f39800;}
.pro-list > div:nth-of-type(7) { border-top:3px solid #ceb500;}
.pro-list > div:nth-of-type(8) { border-top:3px solid #be950e;}
.pro-list > div:nth-of-type(9) { border-top:3px solid #58bdec;}
.pro-list > div:nth-of-type(10) { border-top:3px solid #5676b9;}
.pro-list > div:nth-of-type(11) { border-top:3px solid #5e318f;}
.pro-list > div:nth-of-type(12) { border-top:3px solid #232088;}
.pro-list > div:nth-of-type(13) { border-top:3px solid #cd6712;}
.pro-list > div:nth-of-type(14) { border-top:3px solid #001c57;}
.pro-list-icon { display:inline-block; vertical-align:top; width:40px;}
.pro-list-data { display:inline-block; vertical-align:top; width:calc(100% - 40px - 7px); padding-left:10px;}
.pro-list-data b { display:block; font-size:20px; font-weight:normal; padding:10px 0 15px 0;}
.pro-list-data b a { color:#000;}
.pro-list-data b a:hover { color:#1e55ab;}
.pro-list-data > a { display:block; padding-bottom:5px; font-size:16px; color:#747474; padding-left:20px;}
.pro-list-data > a:hover { color:#1e55ab;}
.pro-list-data > a:before { display:inline-block; content:"-"; text-indent:-10px;}

.left-box { float:left; width:230px; padding-right:30px;}
.right-box { float:left; width:calc(100% - 230px); position:relative;font-size:15px;}
.submenu-title { font-size:22px; color:#1a31a2;}
.submenu-title:after { display:block; padding-top:18px; content:""; width:48px; border-bottom:1px solid #d9d9d9;}

.side_classLink { border: 0px solid #CCC;}
.side_classLink > ul { width:100%; padding:10px 0;}
.side_classLink > ul:after { display:block; content:""; width:48px; border-bottom:0px solid #d9d9d9; padding-top:14px;}
.side_classLink > ul > li { border-bottom:1px solid #e5e5e5; position:relative;}
.side_classLink ul li > div { position:absolute; top:0; left:100%; min-width:180px; z-index:3; opacity:0; visibility:hidden;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s; }
.side_classLink ul li > div > div { position:relative;}
.side_classLink ul li > div > div > a { display:block; font-size:15px; color:#fff; background:#1c56a8; padding:7px 10px;}
.side_classLink ul li > div > div > a:hover { color:#fff; background:#000; }
.side_classLink ul li > div > div > div { position:absolute; top:0; left:100%; min-width:180px; z-index:3; opacity:0; visibility:hidden;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s; }
.side_classLink ul li > div > div > div > a { display:block; font-size:15px; color:#fff; background:#1c56a8; padding:7px 10px;}
.side_classLink ul li > div > div > div > a:hover, .side_classLink ul li > div > div > div > a.current { color:#fff; background:#000; }
.side_classLink ul li > a{ display:block; font-size:15px; color:#000; padding:10px 0; padding-left:10px;}
.side_classLink > ul > li > a:before { content:"-"; display:inline-block; text-indent:-10px;}
.side_classLink > ul > li > a:hover, .side_classLink > ul > li > a.current { color:#1a31a2;}
.side_classLink ul li:hover > div{ opacity:1; visibility:visible;}
.side_classLink ul li > div > div:hover > div { opacity:1; visibility:visible;}
.side_classLink ul li.current02{ display:none; }
.m_classLink{ display:none;}
.hot { font-size:14px; color:#6b6b6b;}
.hot b { color:#000000; font-size:22px; padding-bottom:12px; display:block; font-weight:normal;}
.hot a { display:block; font-size:15px; padding-top:15px;text-transform:uppercase; color:#000;}
.hot a i { color:#000; font-size:16px; display:inline-block; padding-left:15px;}

h1 { min-height:60px; display:block; background:#f7f7f7; color:#000000; font-size:32px; line-height:32px; text-transform:uppercase; margin-bottom:20px; padding:18px 200px 18px 18px !important;}
.pro-number { position:absolute; top:15px; right:20px; height:33px; padding-left:18px; font-size:22px; color:#535353; border-left:1px solid #acacac; padding-top:5px;}
.pro-number span { display:inline-block; padding-right:10px; color:#1a31a2;}

.pro-list01 { text-align:left;}
.pro-list01 li { width:calc(33% - 17px); display:inline-block; margin:0 8px 16px 8px; border:1px solid #e9e9e9; vertical-align:top; padding-bottom:15px;}
.pro-list01 li img { 
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.pro-list01 li span { display:block; padding:12px 10px 0 10px; text-align:center; font-size:16px; font-weight:bold; }
.pro-list01 li span a { color:#000000;}
.pro-list01 li:hover img { opacity:0.35;  filter: alpha(opacity=35);}
.pro-list01 li:hover a { color:#1a31a2;}
.pro-list01 li b { text-align:center; display:block; font-size:14px; color:#676767; font-weight:normal;}

.fix{ text-align: center;}
.fix:before{ display: inline-block; width: 0px; height: 100%; vertical-align: middle; content: ' ';}
.fix img,.fix p{ display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; box-sizing: border-box;}

.pro-box { position:relative; padding:0 0px 20px 0; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; border-bottom:1px solid #e5e5e5; }
.pro-b { width:50%;}
.pro-b img { width:100%;}
.pro-b-img { }
.pro-b-img img { }
.rslides_tabs { }
.rslides_tabs li { display:block; width:100px; padding:3px;}
.rslides_tabs li a img { border:1px solid #dedede; width:100%;}

.pro-content { width:50%; font-size:14px; color:#676767;}	
.pro-content ul li{list-style: disc;}
.pro-content b { display:block; color:#000000; font-size:16px;}
.inquiry-btn { display:block; padding-top:25px;}
.inquiry-btn a { display:inline-block; width:80px; height:80px; border-radius:100%; color:#fff; line-height:80px; text-transform:uppercase; text-align:center; font-size:15px; letter-spacing:1px; background:#1a32a4;}
.inquiry-btn a:hover { background:#000; color:#fff;}
.control-box { display:flex; flex-direction:row; flex-wrap:no-wrap; justify-content:space-between; padding:0 10px 50px 10px;}
.control-box a { text-transform:uppercase; color:#9c9c9c; font-size:15px;}
.control-box a:hover { text-transform:uppercase; color:#333; font-size:15px;}
.control-box a i { font-size:60px; position:relative; top:12px; line-height:50px;}
.resp-tab-content { max-width: 780px; margin: 0 auto;}
.resp-tab-content ul li{list-style: disc;}
#slider3-pager { display:none;}
.data-list { margin:20px 0;}
.data-list li { list-style-type:disc; margin: 0 0 0 20px;}
#parentHorizontalTab:after{content: '';display:block;clear:both}

.btn-box { padding:25px 0; margin-top:30px; text-align:center; border-top:1px solid #cccccc; display:none;}
.btn-box a { display:inline-block; min-width:100px; text-align:center; height:32px; text-transform:uppercase; color:#1a32a4; font-size:15px; border:2px solid #1a32a4; line-height:30px; font-weight:bold; padding:0 10px; margin:3px;}
.btn-box a:hover { color:#fff; background:#1a32a4;}

.relate-pro-box { background:#fff; padding:40px 0;}
.relate-pro-title { text-align:center; text-transform:uppercase; font-size:40px; color:#000; padding-bottom:30px; line-height:40px;}
.hot-box { position:relative; padding:20px 61px;}
.hot-box .owl-controls { display:none !important;}
.customNavigation { text-align:center; position:absolute; width:100%; left:0; top:0; height:100%;}
.prev { float:left; border-right:0px solid #999999; height:100%; position:relative;}
.next { float:right; border-left:0px solid #999999; height:100%; position:relative;}
.prev i, .next i { position:relative; top:42%; width:80px; font-size:60px; cursor:pointer;}
.item { text-align:center;}
.item a { font-size:17px; color:#363636; letter-spacing:1px;}
.item a:hover { color:#2b47c9;}
.item span { display:block; padding:0 20px; }
.item font { display:block; color:#676767; font-size:14px; padding:0 20px; }

.aboutus_title { font-size: 16px; color: #1a31a2; font-weight: bold;}
.aboutus_main { margin: 10px 4%; width: 92%;}
.aboutus_main p { padding: 6px 0px; font-family: sans-serif; letter-spacing: 2px;}
.aboutus_main td { border-top: 1px rgba(26, 50, 164, 0.65) dotted; padding: 10px 20px;}
.aboutus_main td.a { border-top: 2px #1a31a2 solid; text-align: center; font-weight: bold;}
.aboutus_main > div > img {margin: 0 0 0 calc((100% - 583px) / 14);}
.aboutus_main > div > img:hover {opacity:0.6}
.aboutus_main > img{width: 100%; height: 5px; margin: 10px 0;} 
.resp-tab-content.hor_1.resp-tab-content-active { font-size: 15px;}
.resp-tab-content.hor_1.resp-tab-content-active table{ width:100%; }

/*distributor*/

#css_table { display:table;width: 100%;font-size: 16px;}
.css_tr { display: table-row;word-break: break-all;}
.css_td { display: table-cell;border-bottom: 1px solid #d9d9d9;padding: 8px 2px;}
.css_tr:nth-child(1) { color: #16316A;font-weight: bold;}
.css_td:nth-child(1) { width: 12%;}
.css_td:nth-child(2) { width: 18%;}
.css_td:nth-child(3), .css_td:nth-child(4), .css_td:nth-child(5) { width: 20%;}
.dis_select { padding: 10px 0;}
.dis_select_region, .dis_select_country { display: inline-block;}
.dis_select_region select, .dis_select_country select{ font-size: 16px;padding: 5px;margin: 0 2px 0 0;border: 1px solid #B3B1B1;}


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

.aboutus_main > div > img {margin: 0 0 0 3px; width:calc((100% - 105px) / 13);}
.aboutus_main > div > img:first-child{width: 63px;}
}

@media only screen and (max-width: 768px) {
.banner { border-width:0;}
.path { text-align:left;}
.main-link-pto, .main-link-data { display:block; width:100%;}
.main-link-data span { position:inherit; left:auto; bottom:auto; display:block; padding-top:15px;}

.left-box { float:none; width:100%; padding:0; margin-bottom:20px;}
.submenu-title, .hot { display:none;}
.side_classLink { display:none;}
.m_classLink{ display:block; position:relative; border-bottom:1px solid #D6D6D6;}
.m_classLink a.main{ display:block; font-size:22px; font-family:Abel; position:relative; padding: 12px 10px 14px 10px; color:#1a31a2; text-align:left; cursor:pointer; background:#fff; }
.m_classLink a.main i{ display:block; font-size:20px; position:absolute; right:20px; top:50%; margin-top:-11px; color:#1a31a2; font-style:normal; font-family:FontAwesome;}
.m_classLink > ul{ display:none; width:100%;  position:absolute; z-index:999; margin-top:1px; background:#fff; }
.m_classLink > ul > li { border-bottom: 1px solid #e6e6e6; display:block; margin:0 0; padding:0 15px;}
.m_classLink > ul > li > a { display:block; font-size:16px; color:#000; padding:10px 0;}
.m_classLink > ul > li > a:hover, .m_classLink > ul > li > a.current { color:#1a31a2;}
.m_classLink > ul > li.current02{ display:none; }


.m_classLink > ul > li > div > div  > a { display:block; font-size:15px; color:#fff; background:#1c56a8; padding:7px 10px; border-bottom: 1px solid rgba(255,255,255,.2); background:#1c56a8;}
.m_classLink > ul > li > div > div  > a:hover { color:#fff; background:#000; }
.m_classLink > ul > li > div > div > div { }
.m_classLink > ul > li > div > div > div a { display:block; font-size:15px; color:#fff; background:#1c56a8; padding:7px 20px;}
.m_classLink > ul > li > div > div > div a:hover, .m_classLink > ul > li > div > div > div a.current { color:#fff; background:#000; }

.right-box { float:none; width:100%;}
h1 { font-size:24px; line-height:24px; padding-right:18px !important;}
.pro-number { position:inherit; top:auto; right:auto; text-align:right; margin:10px 0; font-size:16px; border-width:0;}

.pro-b, .pro-content { display:block; width:100%;}
.pro-content { padding-bottom:30px;}
.rslides_tabs { text-align:center;}
.rslides_tabs li { display:inline-block;}
.back { border:1px solid #1a31a2; padding:5px 10px;}

.inquiry-btn { text-align:center;}

.pro-list > div { width:calc(33.33% - 26px);}
}

@media only screen and (max-width: 640px) {
.pro-list01 { text-align:center;}
.pro-list01 li { width:45%;}
.pro-list > div { width:calc(50% - 26px);}
}
@media only screen and (max-width: 570px) {
.aboutus_main > div > img{width: calc((100% - 39px) / 13);}
.aboutus_main > div > img:first-child{width: 63px; display: block;}
.aboutus_main > img{margin: 5px 0 10px;}

.aboutus_main span > img{width: 95%; margin: 8px 2.5%;}
}
@media only screen and (max-width: 414px) {
.main-link	{ margin-bottom:0;}
.main-link-data { padding:35px 20px; font-size:30px;}
.rslides_tabs li { width:85px;}
.pro-list01 li { width:95%;}
.pro-list > div { width:100%; margin:0;} 
}

@media only screen and (max-width: 320px) {
.btn-box a { display:block;}


}