/* GLOBAL STYLES
-------------------------------------------------- */
html{ height:100%;}
body { color: #5a5a5a; font-family:"Microsoft JhengHei", Tahoma; height:100%; font-size:15px;overflow-x:hidden;}
.col-sm-4,.col-sm-3{ text-align:center;}
.row{ margin:0px;}
.float_l{ float:left;}
.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-12{ margin:20px 0px;}

.m_clear{ margin:0px; padding:0px;}
.m_bot_20{ margin-bottom:20px;}
.container_bg{ min-height:600px;}
.w680{ width:680px;}

.text_l{ text-align:left;}
.text_c{ text-align:center;}
.red{ color:#F43336;}
.white{color:#fff;}
.img-fluid {max-width: 100%;height: auto;}

/* menu style 
----------------------------------------------------*/
.navbar-wrapper { position: absolute; top: 0; right: 0; left: 0; z-index: 20; }
.navbar-wrapper > .container { padding-right: 0; padding-left: 0; }
.navbar-wrapper .navbar { padding-right: 15px; padding-left: 15px; }
.navbar-wrapper .navbar .container { width: auto; }
.navbar{ min-height:36px;}
.navbar-inverse .navbar-nav>li>a{ height:36px; padding:8px 30px; color:#FFFFFF; }
.navbar-inverse .navbar-nav>li>a:hover{ height:36px; padding:8px 30px; color:#FFFFFF; background:#cf7c0b;}

.menu_bg{ background:url(../images/menu_bg.png) repeat; border:none; width:72%; margin-top:25px;}

.logo{ margin-right:22px; margin-top:5px;}
.bg_blue{ background:#0a0c26 url(../images/img_banner1_L.jpg) right top repeat-y;}
.page{background:#1d2351 url(../images/menu_bg.png) repeat; position:relative;}

/* container
-------------------------------------------------- */
.heading-text h1{margin-bottom:20px;color:#de9700;font-size:32px; text-align:left; padding-bottom:20px;}
.heading-text h1 a{color:#262e34;text-decoration:none}
.heading-text h1 a:hover{color:#262e34;text-decoration:underline}
.heading-text p.sub{text-align:left; color:#de9700; font-size:20px;}
.heading-text h3{ color:#de9700; border-bottom:2px solid #de9700; border-collapse:collapse; padding-bottom:10px;}
.heading-text1 h1{margin-bottom:20px;color:#de9700;font-size:32px; text-align:left; padding-bottom:20px;border-bottom:2px solid #de9700;width:29%;}

.banner_1{background:#1e2558 url(../images/img_about_b1.jpg) right top no-repeat; padding:30px;}
.banner_2{background:#0c0e22 url(../images/img_banner_b2.jpg) center top no-repeat; padding:30px;}
.banner_3{background:#0c0e22 url(../images/img_banner_b3.jpg) center top no-repeat; padding:30px;}
.banner_4{background:#0c0e22 url(../images/img_banner_b4.jpg) center top no-repeat; padding:20px;}
.banner_5{background:#0c0e22 url(../images/img_banner_b5.jpg) center top no-repeat; padding:20px;}
.banner_6{background:#FFF url(../images/img_dei_b6.jpg) center top no-repeat; padding:30px;background-attachment: fixed;background-size: cover;}
.banner_text{ position:absolute; z-index:99; color:#FFFFFF; text-align:left; font-size:15px; left:3%; top:5px;}
/* home
-------------------------------------------------- */
.carousel { height: 500px; margin-bottom: 60px; }
.carousel-caption { position:relative; left:0px; top:0px; z-index: 10; width:50%; height:500px; padding: 120px 50px 0px 30px;}
.carousel .item { height: 500px; }
.carousel-inner > .item > img { position: absolute; top: 0; left: 50%; min-width: 550px; height: 500px; }
.carousel-caption .circle { margin: 20px 10px; }
.carousel-caption p { margin-bottom: 40px; font-size: 14px; line-height: 1.4; text-align: left; font-family: "Microsoft JhengHei", Tahoma; }
.carousel-caption h1 { text-align: left; font-size: 28px; font-family: "Microsoft JhengHei", Tahoma; margin-bottom: 20px;}
.carousel-indicators{ left:0; width:100%; text-align:right; margin-left:-12%;}

.case_block{ margin-bottom:20px; position:relative; max-width:320px;}
.case_block .col{ width:100%; position:absolute;  top:0px; left:0px; background:#FFF; z-index:2; bottom:0px;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9; -khtml-opacity: 0.9; height:230px;display:none;}
.case_block .act{ display:block;}
.case_block .col h6{ text-align:center; margin-top:85px; font-size:15px; font-weight:bold; color:#333; line-height:140%; margin-bottom:0px; }
.case_block .col a.link{  display:block; width:28px; height:28px; margin:5px  auto;}
.case_block .col a.link:after{ clear:both;}

.pro_block{margin-bottom:20px;  position:relative; max-width:320px;}

.banner_block{ position:relative; text-align:right; background:#183a64; overflow:hidden; height:150px;}
.banner_block .pic{ display:none;}
#banner_box{ position: absolute; right:0px;}

/* about
-------------------------------------------------- */
.pmp_logo{ background:url(../images/about_pmp.png) 20px top no-repeat; width:216px; height:93px;}
/* .b3{visibility:hidden} */
.b3_act{ visibility: visible;}
/* client
-------------------------------------------------- */
.client_block{ padding:10px 10px 5px 10px;}
.client_block h4{text-align:center; font-size:15px; width:100%;}
.client_block .icon{ text-align:center;}
.client_block:hover h4{ color:#ffae00; text-align:center;}

/* product
-------------------------------------------------- */
.navlink{ text-align:center;}
.navlink li{ list-style:none; padding:0px 0px;}
.navlink li a{ color:#FFF; margin:0 5px;}
.navlink li a:hover{ color:#666;}
.navlink li a.act{ color:#FFF; background:#1f397c; padding:10px;}

.pro_sub li.active a{ background:#FFFFFF; color:#304c93; border-radius: 6px 6px 0px 0px; border-top:solid 1px #cccccc;   border-right:solid 2px #cccccc; border-bottom:solid 1px #FFFFFF; margin-top:-5px; padding-bottom:15px; margin-bottom:-1px;}
.pro_sub li.active a:hover{ background:#FFFFFF; color:#304c93;}
.pro_sub li a{ background:#efefef; color:#868686; margin-top:0px; padding:10px;}

.row_bannner{background:#0f1a33;}

/* product
-------------------------------------------------- */
.map_link{position: absolute; top:10px; left:82%; text-decoration:none; font-size:12px; text-align:center;}

/* footer
-------------------------------------------------- */
.footer_link a{ color:#d1d2d4;}
.center-footer{ text-align:center; background:#0f1a33; padding:10px 0px 0px 0px; margin:0px; color:#bec1c4; width:100%;}
.center-footer p{ margin:0px;}
.copyright{ font-size:10px; padding-left:50px;}



/* RESPONSIVE CSS 990px - 1200px
-------------------------------------------------- */

@media (min-width: 990px) and (max-width: 1200px){
/* menu
-------------------------------------------------- */
.navbar-wrapper .container { padding-right: 15px; padding-left: 15px; }
.navbar-wrapper .navbar { padding-right: 0; padding-left: 0; }
.navbar-wrapper .navbar { border-radius: 4px; }
.navbar-inverse .navbar-nav>li>a{ height:36px; padding:8px 15px; color:#FFFFFF; }
.navbar-inverse .navbar-nav>li>a:hover{ height:36px; padding:8px 15px; color:#FFFFFF; background:#cf7c0b;}

.logo{ position:relative; z-index:99;}
.menu_bg{ background:url(../images/menu_bg.png) repeat; border:none; width:66%; margin-top:20px;z-index:1; float:right;}

/* container
-------------------------------------------------- */
.heading-text1 h1{width:47%;}

/* home
-------------------------------------------------- */
.carousel { height: 500px; margin-bottom: 60px; }
.carousel-caption { position:relative; left:0px; top:0px; z-index: 10; width:60%; height:500px; padding: 120px 50px 0px 30px;}
.carousel .item { height: 500px; }
.carousel-inner > .item > img { position: absolute; top: 0; left: 45%; min-width: 550px; height: 500px; }
.carousel-caption .circle { margin: 20px 5px; }
.carousel-caption p { margin-bottom: 40px; font-size: 14px; line-height: 1.4; text-align: left; font-family: "Microsoft JhengHei", Tahoma; }
.carousel-caption h1 { text-align: left; font-size: 28px; font-family: "Microsoft JhengHei", Tahoma; margin-bottom: 20px;}

.case_block{ margin-bottom:20px; position:relative; max-width:260px;}
.case_block .col{ width:100%; position:absolute; background:#FFF; z-index:2; bottom:19px;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9; -khtml-opacity: 0.9;}
.case_block img{ margin-bottom:20px; position:relative; max-width:260px;}
.pro_block{margin-bottom:20px;  position:relative; max-width:260px; margin:0px; padding:0px;}
.pro_block img{ max-width:260px;}

/* product
-------------------------------------------------- */
.navlink li{ list-style:none; padding:0px 0px;}
.navlink li a{ color:#FFF;}
.navlink li a.act{ color:#FFF; background:#1f397c; padding:10px;}

.pro_sub li.active a,.pro_sub li a{ width:110px;}
.pro_sub li.active a{ background:#FFFFFF; color:#304c93; border-radius: 6px; border:none; margin-top:0px; padding-bottom:0px; margin-bottom:0px; padding:10px;}
.pro_sub li.active a:hover{ background:#FFFFFF; color:#304c93;}
.pro_sub li a{ background:#efefef; color:#868686; margin-top:0px; padding:10px;}

.icon img{ max-width:120px;}
.img_srv{ max-width:940px;}
.srv_block { font-size:13px;}
.srv_block img{ max-width:80px;}
}

/* RESPONSIVE CSS 640px - 990px
-------------------------------------------------- */

@media (min-width: 640px) and (max-width: 990px){
/* GLOBAL STYLES
-------------------------------------------------- */
.w680{ width:100%;}
/* menu
-------------------------------------------------- */
.navbar-wrapper .container { padding-right: 15px; padding-left: 15px; }
.navbar-wrapper .navbar { padding-right: 0; padding-left: 0; }
.navbar-wrapper .navbar { border-radius: 4px; }
.navbar-inverse .navbar-nav>li>a{ height:36px; padding:8px 15px; color:#FFFFFF; }
.navbar-inverse .navbar-nav>li>a:hover{ height:36px; padding:8px 15px; color:#FFFFFF; background:#cf7c0b;}

.logo{ position:relative; z-index:99;}
.menu_bg{ background:url(../images/menu_bg.png) repeat; border:none; width:56%; margin-top:20px;z-index:1; float:right;}

/* container
-------------------------------------------------- */
.heading-text1 h1{width:62%;}

/* home
-------------------------------------------------- */
.carousel { height: 500px; margin-bottom: 60px; }
.carousel-caption { position:relative; left:0px; top:0px; z-index: 10; width:74%; height:500px; padding: 120px 50px 0px 30px;}
.carousel .item { height: 500px; }
.carousel-inner > .item > img { position: absolute; top: 0; left: 45%; min-width: 550px; height: 500px; }
.carousel-caption .circle { margin: 20px 5px; }
.carousel-caption p { margin-bottom: 40px; font-size: 14px; line-height: 1.4; text-align: left; font-family: "Microsoft JhengHei", Tahoma; }
.carousel-caption h1 { text-align: left; font-size: 28px; font-family: "Microsoft JhengHei", Tahoma; margin-bottom: 20px;}

.case_block{ margin-bottom:20px; position:relative; max-width:210px;}
.case_block .col{ width:100%; position:absolute; background:#FFF; z-index:2; bottom:19px;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9; -khtml-opacity: 0.9;}
.case_block img{ margin-bottom:20px; position:relative; max-width:210px;}
.pro_block{margin-bottom:20px;  position:relative; max-width:210px; margin:0px; padding:0px;}
.pro_block img{ max-width:210px;}

/* product
-------------------------------------------------- */
.navlink li{ list-style:none; padding:0px 0px;}
.navlink li a{ color:#FFF;}
.navlink li a.act{ color:#FFF; background:#1f397c; padding:10px;}

.pro_sub li.active a,.pro_sub li a{ width:110px;}
.pro_sub li.active a{ background:#FFFFFF; color:#304c93; border-radius: 6px; border:none; margin-top:0px; padding-bottom:0px; margin-bottom:0px; padding:10px;}
.pro_sub li.active a:hover{ background:#FFFFFF; color:#304c93;}
.pro_sub li a{ background:#efefef; color:#868686; margin-top:0px; padding:10px;}

.icon img{ max-width:100px;}
.img_srv{ max-width:720px;}
.srv_block { font-size:12px;}
.srv_block img{ max-width:60px;}

}

/* RESPONSIVE CSS 0px - 640px
-------------------------------------------------- */

@media (max-width: 640px) {
/* GLOBAL STYLES
-------------------------------------------------- */
.bg_max{ background-size:auto 100%;}
.col-sm-4,.col-sm-3,.col-sm-2{ text-align:center; margin:20px 0px; padding:0px;}
.icon img{ max-width:280px;}
.w680{ width:100%;}
.navbar-inverse .navbar-nav>li>a{ height:45px; padding:12px 30px; color:#FFFFFF; }
.navbar-inverse .navbar-nav>li>a:hover{ height:45px; padding:12px 30px; color:#FFFFFF; background:#cf7c0b;}

/* container
-------------------------------------------------- */
.heading-text1 h1{width:100%;}

/* home
-------------------------------------------------- */
.carousel-caption { position:relative; left:0px; top:0px; z-index: 10; width:77%; height:250px; padding:60px 20px 0px 20px; }
.carousel-caption p { margin-bottom: 20px; font-size: 13px; line-height: 1.4; text-align: left; font-family: "Microsoft JhengHei", Tahoma;  height:400px;}
.carousel-caption h1 { text-align: left; font-size: 18px; font-family: "Microsoft JhengHei", Tahoma; }
.carousel-caption .circle { display:none;}
.carousel .item { height: 400px; background-color: #777; }
.carousel-inner > .item > img { position: absolute; top: 0; left:0; min-width:400px; height:400px; }

.logo{ position:relative; z-index:99;}
.logo >img { width:230px;}
.menu_bg{ border:none; width:100%; margin-top:-40px;  z-index:1;}

.banner_text,#banner_box{ display:none;}


/* home
-------------------------------------------------- */
.case_block{ margin-bottom:20px; position:relative; max-width:280px;}
.case_block .col{ width:100%; position:absolute; background:#FFF; z-index:2; bottom:19px;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9; -khtml-opacity: 0.9;}
.case_block img{ margin-bottom:20px; position:relative; max-width:280px;}
.pro_block{margin-bottom:20px;  position:relative; max-width:280px; margin:0px; padding:0px;}
.pro_block img{ max-width:280px;}

.banner_block{ position:relative; text-align:right; background:#183a64; overflow:hidden; height:0px;}

/* about
-------------------------------------------------- */
.about_text{ width:100%;}
.pmp_logo{ background:url(../images/about_pmp.png) 20px top no-repeat; width:216px; height:93px;}

/* footer
-------------------------------------------------- */
.footer_left{ padding-left:20px;}
.copyright{ font-size:10px; padding-left:35px;}

/* product
-------------------------------------------------- */
.navlink li{ list-style:none; padding:0px 10px;}
.navlink li a{ color:#FFF;}
.navlink li a.act{ color:#FFF; background:#1f397c; padding:10px 20px;}

.pro_sub li.active a{ background:#FFFFFF; color:#304c93; border-radius: 6px; border:none; margin-top:5px; padding-bottom:0px; margin-bottom:0px; padding:5px 8px; width:50px; height:50px; overflow:hidden;}
.pro_sub li.active a:hover{ background:#FFFFFF; color:#304c93;}
.pro_sub li a{ background:#efefef; color:#868686; margin-top:5px; padding:5px 8px; width:50px; height:50px; overflow:hidden;}

.img_srv{ display:none;}
}