@import url('https://fonts.googleapis.com/css?family=Oxygen:400,700&display=swap');
/*------------------------------------*\
    MAIN
\*------------------------------------*/
/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font-family:'Oxygen', Helvetica, Arial, sans-serif;
	color:#000;
	font-size:16px;
	line-height:26px;
}
a, button, img, input, span {
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}
.clear:after { clear:both;}

.clear {*zoom:1; clear:both;}

img {max-width:100%;	vertical-align:bottom;}

a {	color:#444;	text-decoration:none;}

a:hover {text-decoration:none; color:inherit;}

a:focus {outline:0;text-decoration:none;}

a:hover, a:active {	outline:0;}

input:focus, textarea:focus, button:focus {	outline:0;	border:0;}

ul,li,h1,h2,h3,h4 {list-style-type:none;margin:0;padding:0}

p{margin-bottom: 0px;}
/*p:not(:last-child){margin-bottom:25px;} 2020.1.6 john '/**\/' */

p:last-child{margin-bottom:0px;}

@font-face {
	font-family:'Proxima Regular';
	src:url('../fonts/Proxima Nova-Regular.otf');
    font-weight:normal;
    font-style:normal;
}

@font-face {
	font-family:'Proxima Bold';
	src:url('../fonts/Proxima Nova Bold.otf');
    font-weight:normal;
    font-style:normal;
}

@font-face {
	font-family:'Times';
	src:url('../fonts/Times-SemiBold Italic.ttf');
    font-weight:normal;
    font-style:normal;
}

strong{font-family:'Proxima Bold', sans-serif;}

/*------------------------------------*\
	        HEADER
\*------------------------------------*/

.header{	padding:15px 0;   }

.header .row {    align-items: center;  }

.lang {    display: table;    float: right;    border: 1px solid #533f82;    padding: 5px 10px 5px 15px;    border-radius: 25px;  }

.top-header {    padding-bottom: 15px;    border-bottom: 1px solid #efefef;   }

.main-nav{	color:#015198;}

.nav_area ul li{display:inline-block;padding: 0px 35px 0 0; }

.nav_area ul li a {    color: #000;    font-size: 16px;    display: block;	text-transform:uppercase;  }

ul.sub-menu {    position: absolute;    background: #eceff3;    z-index: 555;	text-align:left;	padding:10px 0;   }

ul.sub-menu li a{color:#304969; line-height:20px; font-weight:700;  padding:5px 10px; font-size:16px; display:block; text-transform:capitalize;   } 

ul.sub-menu li{	display:block;}

select.language {    background: transparent;    color: #534082;    border: 0; }

.menu-side img {    vertical-align: middle;  }

select.language option{background:#46346f; color:#fff;}

.footer  {    background:#46346f; padding:30px 0 15px; color:#fff; }

.footer ul.fmenu li a {    color: #fff;    font-size: 15px; font-weight:700;  text-transform:uppercase; }

ul.fmenu {    column-count: 2;  }

.footer img {margin-bottom:20px;}

.footer img + img {margin-left:15px;}

.footer p{ font-size:13px;  } 

/*------------------------------------*\
	        MAIN
\*------------------------------------*/

.home-banner .owl-carousel.owl-drag .owl-item:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    position: absolute;
}

.home-banner .owl-carousel.owl-drag .owl-item.active:before {
	display:none;
}

h2.slide-title {
    position: absolute;
    top: 25px;
    left: 25px;
    color: #fff;
    font-family: Times, sans-serif;
    font-style: italic;
    font-size: 40px;
}

.owl-theme .owl-dots .owl-dot span{background:#fff; height:13px; width:13px; margin: 5px;}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {    background: #534082;  }

.home-banner .owl-dots  {    position: absolute;    bottom: 15px;     right: 20%;  }

.about-section {    padding: 50px 0;   }

.section-title {    font-size: 30px;    color: #533f82;    font-weight: 700;    padding-bottom: 30px;  text-transform:uppercase; }

.butn { display: inline-block; padding: 10px 25px; background: #333; color: #fff; border-radius: 4px; text-transform: uppercase; font-weight: 700; transition:all .4s;  }

.butn i {    font-size: 9px;    margin-top: -4px;    vertical-align: middle;  }

.butn:hover{background: #534082; color:#fff;}


.logo-section{background:#e4e4e4; padding:50px 0;}

.logo-slider.owl-carousel .owl-item img {    width: auto;  }
.logo-slider .item {
    display: flex;
    flex-wrap: wrap;
}
.logo-slider span.logo-img {
    width: 20%;
    background: #fff;
    height: 215px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #efefef;
}

/*------------------------------------*\
	        bottom to top 
\*------------------------------------*/
#button {
  display: inline-block;
  background-color: #999999;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;

}
#button::after {
 content: "\f106";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 30px;
  line-height: 45px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #534082;
}
#button:active {
  background-color: #534082;
}
#button.show {
  opacity: 1;
  visibility: visible;
}

/*------------------------------------*\
	        SUBPAGE
\*------------------------------------*/

.content {    padding: 70px 0; }

.content .section-title {    font-size: 33px;   }

.sub-banner .container{position:relative;}

.sub-banner img{ width:100%; }

.sub-banner h2 {    padding-bottom: 20px;    font-size: 36px;  color:#fff; text-transform:uppercase;  position:absolute;   bottom:0;  font-weight:700;  }

.pro-desc {    background: #666;    color: #fff;    padding: 20px;  }

span.pro-img {    height: 250px;    display: flex;    align-items: center; justify-content: flex-end;  transition:all .4s; position:relative;}
 

span.pro-img:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
    opacity: 0;
    transition:all .4s; 
}

span.pro-img:hover:before{opacity:.4;}

.product-item {    box-shadow: 0 0 10px #ddd;      margin-bottom: 30px;}

.pro-desc h4 {    font-family: 'Proxima Bold', sans-serif;    font-size: 18px;    padding-bottom: 12px;   }

.pro-desc h6 {    font-family: 'Proxima Regular', sans-serif;    font-size: 14px;  }

ul.sidemenu > li { width: 100%;display: table; font-family: "Proxima Bold", sans-serif; font-size: 16px; padding: 15px 0;border-bottom: 1px solid #cccccc;  color: #333; transition:all .4s; }

ul.sidemenu > li:hover > a,ul.sidemenu > li:hover{color:#6240af;}

ul.sidemenu > li:before {
    content: '\f105';
    font-family: FontAwesome;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 27px;
    background: #ccc;
    color: #fff;
    display: inline-block;
    border-radius: 100%;
    margin-right: 15px;
}
ul.sidemenu > li:hover:before{
    background:#6240af;
}
ul.sidemenu > li > span {    display: table-cell;    vertical-align: top;     width: 84%;}
ul.sublist {    padding: 15px 0 0 10px;    list-style: square inside;}  
ul.sublist li {    font-size: 16px;    color: #a09f9f;    list-style: square; }


/* .pagination {    display: block;    margin: 0px 0 30px 0;  }
.pagination .link {    background: #797979;    color: #fff;  }
.pagination a {display: inline-block; height: 30px; width: 30px; vertical-align: middle; text-align: center; line-height: 30px; margin: 0 4px;  }
.pagination a.active {    background: #000;    color: #fff; }
.pagination a i {    height: 30px;    line-height: 30px; } */

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 0 30px 0;
    list-style: none;
}
.pagination .page-link {
    position: relative;
    display: block;
    padding: 4px 10px 6px 10px;
    font-family: 'Lato', Mukta, sans-serif;
    line-height: 1;
    color: #000000;
    -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out, color 300ms ease-in-out;
    transition: background 300ms ease-in-out, color 300ms ease-in-out;
    margin-left: 8px;
}
.pagination .page-link:hover,
.pagination .page-item.prev .page-link,
.pagination .page-item.next .page-link {
    background: #797979;
    color: #ffffff;
    text-decoration: none;
}
.pagination .page-item.active .page-link {
    background: #00b1cb;
    color: #ffffff;
}


.job-desc {padding:15px 0;}
.job-desc h4{font-size:21px; color:#454d5c; font-family: "Proxima Bold", sans-serif;  margin-bottom: 10px;}
.job-desc h6{color:#aaaaaa; font-size:13px;  font-family: "Proxima Bold", sans-serif;  margin-bottom: 10px; }

a.learn-btn {    color: #534082;    font-size: 13px;    text-transform: uppercase;    font-family: "Proxima Bold", sans-serif; transition:all .4s;}
a.learn-btn:hover {    color: #aaa;  }

.job-list > *, .pro-list > * {padding:0 10px;}

span.job-img {    position: relative;    display: block;  overflow:hidden; }

span.job-img:before {
    content: '\f0c1';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.37);
    color: #fff;
    font-size: 33px;
	bottom:-100%;
	transition: all .4s;
}

span.job-img:hover:before{bottom:0;}

.job-title{font-size:34px; color:#454d5c; font-family: "Proxima Bold", sans-serif;  margin-bottom: 10px;}
.job-details p{color:#444; font-size:16px; line-height:26px;  font-family: "Proxima Bold", sans-serif;  margin-bottom: 10px; text-align:justify;}

.flex-direction-nav a.flex-next {    right: -50px; text-align: center; }
.flex-direction-nav a.flex-prev {    left: -50px;  }
.flex-direction-nav .flex-disabled {    opacity: 1 !important;  }
.flex-direction-nav a:before {    font-size: 30px;line-height:48px;  }
.flex-direction-nav a {    display: block;     height: 45px;    width: 45px;    background: #d1d1d1;    border-radius: 100%;    line-height:45px;     text-align: center;  top: 50%;
    transform: translateY(-50%);}

.flexslider {    max-width: 90%;    margin: 0 auto;  }

#carousel .flex-direction-nav a {   background: transparent;  }
#carousel .flex-direction-nav a:before {    color: #d1d1d1;    font-size: 46px;   }
#carousel {    margin-top: 20px;   }

.padd30{padding:30px 0;}
a.back-link {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #ccc;
    font-family: "Proxima Bold", sans-serif;
    color: #46346f;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
a.back-link:hover{  background:#46346f; color:#fff; }

.job-details h3 {   color: #534082;   font-family: "Proxima Bold", sans-serif;    font-size: 24px;    margin-bottom: 15px;  }

p.flex-caption.text-center {    color: #000;   }

.pro-title{font-size:34px; color:#454d5c; font-family: "Proxima Bold", sans-serif;  margin-bottom: 10px; border-bottom:1px solid #46346f;  padding-bottom: 10px;  padding-left: 15px;}

.pro-title:before { content:''; display:inline-block; width:5px; height:30px; background:#46346f;  margin-right:20px;vertical-align: middle;}



label.toggle-sidemenu{display:none;}

.product-item {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    transition: transform .5s ease;
        overflow: hidden;
    
}
.product-item img{
    transition: transform .5s ease;
}
.product-item:hover img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}


/*------------------------------------*\
	        MIN WIDTH
\*------------------------------------*/

@media(min-width:992px){
.nav_area ul li:hover ul.sub-menu {	display:block;}


.nav_area > ul > li ul.sub-menu {
    transform-origin: 50% 0;
    transform: scaleY(0) translateZ(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    display: block;
}

.nav_area > ul > li:hover ul.sub-menu {
    transform: scaleY(1) translateZ(0);
    opacity: 1;
}
	
ul.menu,.sidemenu{display:block !important; }


.side-data {
    padding-left: 25px;
}


.nav_area > ul > li ul.sub-menu {
    transform-origin: 50% 0;
    transform: scaleY(0) translateZ(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;    display: block;
}

.nav_area > ul > li:hover ul.sub-menu {
    transform: scaleY(1) translateZ(0);
    opacity: 1;
}

.nav_area ul li.active a { 
    border-bottom: 4px solid #f70809;
}

.nav_area > ul > li > a{
	border-bottom:4px solid transparent;
}

span.arrow{display:none;}

label.toggle {    display: none;  }

nav.nav_area {    padding-top: 15px;  }

.nav_area ul li:hover a {    border-bottom: 2px solid #ffff;  }

}


@media(min-width:768px){
	
}


/*------------------------------------*\
	        MAX WIDTH
\*------------------------------------*/


@media (max-width:1100px){

	.nav_area ul li {padding-right:15px;}
	
	
	
}


@media (max-width:991px){	
    .content .container {    max-width: 100%;  }
	
	.header .row {    flex-wrap: nowrap;    }
	
	.header{padding:15px 0 0 0;}
	
	.logo-side {    width: 80%;  }
	
	ul.menu {    display: none; position:absolute; width:100%; left:0;  text-align: left;    background:#534083;  z-index:2;    padding: 15px 10px;}
	
	.toggle {    color: #534083; padding: 15px 0;    font-size: 22px; position:absolute;  right:15px; top:45px;  }
	
	.menu-side {    position: absolute;    top: 10px; right:15px; }	
	
	.nav_area ul li a {    line-height: 40px;    font-size: 14px; color:#fff; }
	
	nav.nav_area ul li{display:block;     position: relative; }
	
	span.arrow {
    position: absolute;
    right: 10px;
    color: #fff;
    top: 10px;
    width: 40px;
    text-align: center;
    height: 30px;

	}
	
	ul.sub-menu {    display: none;    position: relative;  	}
	
	ul.sub-menu li {    padding: 0 10px;  }
	
	ul li .sub-menu li a {    line-height: 14px;  }
	
	.top-header {padding-top: 30px;}
	
	.middle-col {    margin-bottom: 30px;  }
	
	span.pro-img {height:200px;}
	
	ul.sublist {padding-left:0;}
}


@media (max-width:767px){
    label.toggle-sidemenu {
    display: block;
    background: #000;
    color: #fff;
    padding: 10px 15px;
    position: absolute;
    width: 100%;
    top: -60px;
    left: 0;
}
label.toggle-sidemenu span {
    display: inline-block;
    width: 94%;
}

	.sub-banner img {    width: 100%;    height: 250px;    object-fit: cover;  }
    /*john 2020.1.15 edit*/
    /*.sub-banner img {    width: auto;    height: 250px;    object-fit: cover;  }*/
	
	ul.fmenu {    margin-bottom: 30px;    column-count: 1;  }
	.toggle {  top:50px; }
	span.pro-img {height:300px;overflow:hidden;}
	
	ul.sidemenu {margin-bottom: 30px;display:none;}
	
	.pagination {text-align:center;}
	ul.sidemenu > li > span {display:initial;}
	
	.flexslider {    max-width: 75%;   }
	
	.pro-title, h2.slide-title {font-size:26px;}
	
	span.job-img {text-align:center;}
	.job-item {    margin-bottom: 30px;  }
	
	.job-list > *, .pro-list > * {    padding: 0 15px;   }
	.home-banner .owl-dots {    position: absolute;    bottom: 15px;    right: 0;      width: 100%;}
	
	.home-banner .owl-carousel .owl-item img {    height: 250px;    object-fit: cover;  }
	.logo-slider span.logo-img {height:100px;}
	
	ul.sublist {    padding-left: 30px;   }
	
}


@media (max-width:500px){
	
	ul.sublist {
    padding-left: 50px;
}
	span.pro-img {height:300px;overflow:hidden;}
	
}

/*webpagedesc 內容css*/
.content_detail .content_item { margin-bottom:0px; }
.content_detail .content_subtitle { font-size:23px; color:#048ed6; font-weight:700; margin-bottom:16px; }

.content_detail .content_img { font-size:0; margin:0 -8px; display:block; }
.content_detail .content_img .col_1,
.content_detail .content_img .col_2,
.content_detail .content_img .col_4 { display:inline-block; vertical-align:top; padding:0 8px 10px 8px; box-sizing:border-box; text-align: center; }
.content_detail .content_img .col_1 img,
.content_detail .content_img .col_2 img,
.content_detail .content_img .col_4 img { max-width:100%; height:auto; box-shadow:2px 2px 5px rgba(0,0,0,0.3); }
.content_detail .content_img .col_1 { width:100%; }
.content_detail .content_img .col_2 { width:50%; }
.content_detail .content_img .col_4 { width:25%; }

.content_detail .content_desc { line-height: 1.5em; }
.content_detail .content_desc iframe { max-width:100%; box-sizing:border-box; }
.content_detail .content_desc img { max-width:100%; box-sizing:border-box; }
.content_detail .content_desc ul,
.content_detail .content_desc ol { display:block; xmargin:1em 0; xpadding-left:40px; padding-left:20px; margin: 0; }
.content_detail .content_desc ul { list-style-type:disc; }
.content_detail .content_desc ul ul { list-style-type:circle; margin-top: 10px; }
.content_detail .content_desc ol { list-style-type:decimal; }
.content_detail .content_desc li { padding-bottom: 6px; }
.content_detail .content_download_file_list { display: table; }
.content_detail .content_download_file_list .content_download_file_icon { display: table-cell; vertical-align: middle; }
.content_detail .content_download_file_list .content_download_file { display: table-cell; vertical-align: middle; padding-left: 10px; }
.content_detail .content_download_file_list .content_download_file a { color:#048ed6;  }
.content_detail .content_download_file_list .content_download_file a:hover { color:#3256a0; }


.content_detail .content{padding:10px 0;}
/*webpagedesc 內容結束css*/