@charset "utf-8";
body { background-color: #FFF; background-image: url(../img/body-bg.jpg); background-position: left top; background-repeat: repeat-x;}
a, button { transition: all linear 0.3s;}
.text-right { text-align: right;}
/*Common*/
.box { position: relative; margin-bottom: 20px; background-color: #fff; border: 1px solid #d7d7d7;}
.shadow:after { display: block; height: 30px; content: "";}
.box-title { position: relative; padding: 15px 20px; border-bottom: 1px solid #d7d7d7;}
.box-title h2 { margin: 0; font-size: 190%; font-weight: 600; line-height: 1.578em;}
.box-content { position: relative; padding: 15px 20px;}
.fixed-nav { position: fixed; top:0; width: 100%; z-index: 9999;}

/*FCK Editor*/
.fck-css { font-size: 150%; line-height: 1.4;}
.fck-css .pull-left img { margin-right: 20px; margin-bottom: 20px}
.fck-css p {line-height: 1.5; margin-bottom: 10px;}
/*Paging*/
div[role="paging"] { text-align: center;/* border-top: 1px solid #d7d7d7;*/}

.tono-paging { width: 100%; max-width: 750px; margin: 20px 0; padding: 0; text-align: center;}
.tono-paging li { display: none; margin: 0 .2em;}
.tono-paging li.button { display: inline-block;}
.tono-paging a, .tono-paging span { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none; padding: .4em .8em; font-size: 150%; text-decoration: none;}
.tono-paging a { border: 1px solid #d7d7d7; border-radius: 0.2em;}
.no-touch .tono-paging a:hover, .tono-paging a:hover { background-color: #E1F1F9;}
.tono-paging a:active {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
.tono-paging a.disabled { color: rgba(46, 64, 87, 0.4); pointer-events: none;}
.tono-paging a.disabled::before, .tono-paging a.disabled::after { opacity: .4;}
.tono-paging .current { background-color: #0083C9; border-color: #0083C9; color: #ffffff; pointer-events: none;}


/*Header*/
header { position: relative;}
header.container {padding: 0; background:url('../img/topsider-bg.jpg'); background-size: cover; }
header h1 { margin: 0; padding: 10px 5px; text-align: center;}
/*header img { margin-right: 10px;}*/
#tono-nav { position: absolute; right: 0; padding: 8px 12px; background-color: transparent; border-radius: 3px;}

/*Navigation*/
nav { position: relative; z-index: 999; height: 50px; background-image: url(../img/nav-bg.png); background-repeat: repeat-x; background-size: 20px auto;}
nav a { text-shadow: 1px 1px 0px rgba(0,0,0,0.25);}
nav ul, nav li { margin: 0; padding: 0; list-style: none;}

#menu { margin-left: -10px;}
#menu ul { display: block; width: 100%; height: 100%;}
#menu ul li { position: relative; display: inline-block; float: left; line-height: 50px;}
#menu ul ul { display: none; position: absolute; top:50px; width: 160px; height: auto; background-color: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.35);}
#menu ul ul:before { position: absolute; left: 29%; top: -12px; display: block; content: ""; border-width: 6px; border-style: solid; border-color: transparent transparent #fff transparent;}
#menu ul ul li { display: block; width: 100%; line-height: 40px;}

#menu li a { display: block; padding: 0 20px; color: #ffda5d; font-size: 160%; font-weight: bold; text-decoration: none; border-right: 1px solid rgba(255,255,255,0.1);}
#menu li a:hover { background-color: #0083C9; color: #fff; box-shadow: inset 0 25px 0 rgba(255,255,255,0.1);}
#menu li li a { display: list-item; margin: 0; padding: 0 0 0 10px; font-size: 150%; font-weight: normal; color: #0083C9; list-style-position: inside; list-style-type: disc; text-shadow: none;}
#menu li li a:hover { background-color: #0083C9; color: #fff; box-shadow: none;}
#menu li a.current { background-color: #0083C9; color: #fff; box-shadow: inset 0 25px 0 rgba(255,255,255,0.1);}
#menu a.active { /*background-color: #111;*/ box-shadow: inset 0 20px 10px rgba(0,0,0,0.5);}

#lang { margin-right: -10px;}
#lang a { display: block; font-size: 120%; color: #999; line-height: 50px; text-decoration: none;}
#lang a:hover { color: #0083C9;}
#lang a.active { color: #fff;}
#lang ul { display: table; width: 100%;}
#lang li { display: table-cell; padding: 0 10px;}

/*Banner*/
#banner { position:relative; z-index:99; padding-bottom: 40px; width: auto; overflow: hidden;}
#banner ul, #banner li { margin: 0; padding: 0; list-style: none;}
#banner:after { position: absolute; bottom: 0; display: block; content: ""; width: 100%; height: 40px; background-image: url(../img/show-full.png);}
#banner img { max-width: 100%; height: auto;}


/*News*/
#news { min-height: 355px;}
#news .icon-news { float: left; margin-right: 10px;}
.news-item { margin-left: -20px; margin-right: -20px; margin-bottom: 0; padding: 15px 20px; border-bottom: 1px dotted #d7d7d7; display: flex;}
.news-item .news-img { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 80px;  margin-right: 15px;}
.news-item .news-info dt { margin-bottom: 10px;}
.news-item .news-info { width: 100%;}
.news-item .news-info dt a { display: block; padding-right: 80px; font-size: 150%; text-decoration: underline; font-weight: 600; line-height: 1.4;overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; height: 23px;}
.news-item .news-info dt time { float: right; color: #0083C9;}
.news-item .news-info dd { font-size: 14px; color: #666; line-height: 1.5; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; height: 43px;}
#news .news-item:first-child { padding-top: 0;}
#news .news-item:last-child { padding-bottom: 0; border-bottom: none;}

/*Links*/
#ad-links { border: none;}

/*Files*/
#files { background-image: url(../img/files-bg.png); background-size: cover; background-position: right top; background-repeat: no-repeat;}
#files .box-title { border-bottom: 4px solid #214587;}
#files .box-content { min-height: 215px;}
#files .icon-file { float: left; margin-right: 10px;}
#files img { display: block; margin: 0 auto; width: 100%; max-width: 150px;}

/*Product Home*/
#product { background-color: transparent; border: none;}
#product .icon-product { float: left; margin-right: 10px;}
#product .box-title { margin-bottom: 10px; padding-left: 0; border: none;}
#product .box-content { padding: 0;}
#product .prod-type:after { display: block; content: ""; position: absolute; left: 10px; right: 10px; height: 30px; background-image: url(../img/show-half-right.png); background-repeat: no-repeat; background-position: right top; background-size: 250px auto;}
#product .col-item-5.prod-type:after { background-size: 140px auto;}
#product .box-content img { display:block; max-width: 100%; margin: auto;}
/*#product .box-content a:before { position: absolute; top: 0; right: 0; display: block; content: ""; width: 20px; height: 20px; border-width: 20px; border-style: solid; border-color: #f0f0f0 #f0f0f0 transparent transparent; transition: all linear 0.3s;}*/
/*#product .box-content a:after{ position: absolute; top: 0; right: 0; display: block; content: ""; width: 20px; height: 20px; border-width: 20px; border-style: solid; border-color: transparent transparent #fff #fff; transition: all linear 0.3s;}*/
#product .box-content a { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; display: block; font-size: 170%; text-decoration: none; text-align: center; color: #fff; background-color: rgba(0,131,201,0); border:1px solid #EFEFEF;}
#product .box-content a:hover, #product .box-content a:focus { background-color: rgba(255,174,0,0.8); opacity: 1;}
#product .box-content a:hover:before, #product .box-content a:hover:after { width: 0px; height: 0px; border-width: 0px;}
#product .icon-view { display: block; margin: 0 auto 16% auto; width: 140px; height: 160px; background-size: 140px auto; opacity: 0; transition: all linear 0.3s;}
#product span { opacity: 0; font-size: 200%; transition: all linear 0.3s;}
#product a:hover .icon-view, #product a:hover span { opacity: 1;}
#product a:hover .icon-view { margin-top: 24%; width: 70px; height: 80px; background-size: 70px auto;}
#product a:hover span { font-size: 100%;}

#product .col-item-5 .icon-view { width: 70px; height: 80px; background-size: 70px auto;}
#product .col-item-5 a:hover .icon-view { margin-top: 15%; margin-bottom: 10%; width: 50px; height: 56px; background-size: 50px auto;}


/*Footer*/
footer { position: relative; margin-top: 40px; background-color: #3d5d99; color: #999; overflow: hidden;}
footer:before { position: absolute; right: 5%; top: 0; display: block; content: ""; width: 600px; height: 190px; background-image: url(../img/footer-bg.svg); background-repeat: no-repeat; background-position: 0 -120px; background-size: 600px auto; opacity: 0.15;}
footer p { text-indent: 0; margin: 5px 0; color:#FFF;}
footer i { margin-right: 5px; font-size: 12px;}
#footer-top { padding: 15px 0; background-color: #3482d8; font-size: 140%;}
#footer-top div:first-child { text-align: left;}
/*#footer-top div:last-child { text-align: right;}*/
#footer-top a { color: inherit; text-decoration: underline;   text-decoration-color: transparent;  transition: text-decoration-color 0.2s ease;}
#footer-top a:hover { opacity: 0.8;  text-decoration-color:#FFF;}
#footer-top ul { margin: auto;}
#footer-top ul li { list-style: none; color:#FFF; margin-right: 10px; }

#footer-bottom a {color:#00bcd4}
#footer-bottom { padding: 20px;}
#footer-top h4, #footer-bottom h5 { margin-top: 0; color: #fff; font-weight: 600; line-height: 1.2;}
#footer-bottom h4 { font-size: 190%;}
#footer-bottom h5 { margin-top: -10px; font-size: 120%;}
.qkmmu { text-align: center; }

.Line { position: fixed; right:0; bottom:33%; z-index: 999;}
.Line a {display: flex; justify-content: center;align-items: center; flex-direction: column; padding: 2px;}  
  

@media (max-width: 767px) {
.Line .LINE_QRC{ width: 60px;} 
}

/*SUB PAGES*/
.page-title { position: relative; margin: 0 0 20px 0; padding: 10px; height: 60px; line-height: 40px; font-size: 220%; font-weight: 600; border-bottom: 1px solid #d7d7d7; background: #FFF; background: url(../img/about-sider-list.png) repeat-x left bottom;}
.page-title:before{ content: ""; float: left; display: inline-block; margin-right: 10px; width: 5px; height: 38px; background-color: #0083C9; vertical-align: middle;}
.page-title .btn { position: absolute; right: 10px; font-size: 78%; line-height: 1.55;}
.page-sub-title { position: relative; padding: 15px 10px; font-size: 170%; font-weight: 600; border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7;
	background: #f0f0f0;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ececec), to(#e3e3e3));
    background-image: gradient(linear,0% 0%, 0% 100%, from(#ececec), to(#e3e3e3));}
.page-sub-title:before { display: block; position: absolute; left: 10px; top: 15px; margin-right: 10px; border-left:4px solid #444; height: 24px; content:"";}
.page-content { position: relative;}

/*PAGE MENU - BLUE*/
.menu-blue ul { padding: 0; margin: 0;}
.menu-blue ul li { list-style: none; padding: 0; margin: 0; height: 40px; border-bottom: 1px solid #d7d7d7; line-height: 40px; background: url("../img/about-sider-list.png") repeat-x left top; }
.menu-blue ul li:last-child { border-bottom: none;}
.menu-blue ul li:hover, .menu-blue ul li.active { background: url("../img/about-sider-list-hover.png") repeat-x left top;}
.menu-blue ul li a { display: block; position: relative; width: 100%; padding-left: 35px; padding-right: 45px; font-size: 15px; color: #212121; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.menu-blue ul li a:before, .menu-dark ul li a:before { content: ''; position: absolute; left: 10px; top: 11px; width: 5px; height: 20px; background: rgba(8,174,231,0.3);}
.menu-blue .sider-title, .menu-dark .sider-title { position: relative; margin: 0; height: 60px; line-height: 60px; padding-left: 25px; background: url('../img/catalogue-sider-bg.png') no-repeat left center; background-size: cover; font-size: 170%; font-weight: 600; color: #fff;}
.menu-blue .sider-title:before, .menu-dark .sider-title:before{content: ''; position: absolute; top: 10px; left: 10px; width: 5px; height: 40px; background: #fff;}
.menu-blue ul li [class^="icon-"] { float: right; margin: 7px -35px 0 0;}

/*PAGE MENU - DARK*/
.menu-dark ul, .menu-dark ul { padding: 0; margin: 0;}
.menu-dark ul li{list-style: none; padding: 0; marign: 0; height: 40px; border-bottom: 1px solid #d7d7d7; line-height: 40px; background: url("../img/sider-product-list.png") repeat-x left top; }
.menu-dark ul li:last-child { border-bottom: none;}
.menu-dark ul li:hover, .menu-dark ul li.active {background: url("../img/sider-product-list-hover.png") repeat-x left top;}
.menu-dark ul li a { display: block; position: relative; width: 100%; padding-left: 35px; font-size: 15px; color: #212121; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.menu-dark ul li.active a { text-decoration: underline;}
.menu-dark ul li a:before{ background: #d1d1d1;}
.menu-dark .sider-title { background-image: url('../img/series-sidr-bg.png');}

/*PAGE SEARCH*/
.sider-search form{position: relative; width: 100%;}
.search-input{border: none; background: none; height: 38px; line-height: 36px; width: 100%; padding: 0 40px 0 10px; font-size: 15px;}
.search-btn{position:absolute; right: 3px; top: 3px; width: 32px; height: 32px; border: none; background: url("../img/search-btn.png") no-repeat center; cursor:pointer;}



/*sub-banner & breadcrumbs*/
#sub-banner { position: relative;}
#sub-banner h2 { position: absolute; left: 20px; bottom:20px; letter-spacing: 2px; font-weight: bold;}
.sub-banner-shadow{ padding-bottom:35px; background: url(../img/page-shadow.png) no-repeat center bottom; background-size: contain;}
#Breadcrumbs{ 
  font-size: 12px;
  position: relative; padding: 8px 0 8px 36px; border: 1px solid #d6d6d6;
    background: #d6d6d6;
    background-image: -webkit-gradial-gradient(368px circle at center,#fff,#e0e0e0);
    background-image: radial-gradient(368px circle at center,#fff,#e0e0e0);
}
#Breadcrumbs > img{ position: absolute; left: 0; top: 11px; padding-left: 12px; margin-right: 10px;}
#Breadcrumbs a{ color: #525D67; text-decoration: underline;}
#Breadcrumbs i{margin: 0 5px; color: #CCCCCC; font-style: normal; font-size: 14px;}
#Breadcrumbs span{ color: #0083C9;}
#Breadcrumbs:after { position: absolute; left: 0; bottom: 0; display: block; content: "";}

/*About*/
.about-info p { font-size: 18px; margin-bottom: 20px; line-height: 1.5;}
.about-logo { margin: 30px 0;}
.about-info .sm-show { display: none;}
.content-bg{background: #fff url('../img/about-content-bg.png') no-repeat right bottom; }
#about{padding-bottom: 80px;}
.main-title{position: relative; margin: 0; height: 60px; line-height: 60px; padding-left: 25px; font-size: 22px;}
.main-title:before{content: ''; position: absolute; top: 10px; left: 10px; width: 5px; height: 40px; background: #0083C9;}
.grey-border-bottom { border-bottom: 1px solid #d7d7d7;}
.mb15 dl{margin-bottom: 15px;}
.blue-list-style dl dt{margin-bottom: 10px;}
.blue-list-style dl dd{padding-left: 15px; background: url('../img/icon-list-style.png') no-repeat left center;}

.inset-shadow-box{border: 1px solid #a0a0a0; width: 100%; height: 40px;
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) inset;
}

.history-list{position: relative; width: 73%; margin:0; padding:0; list-style: none; font-size: 17px; color: #333; margin-left: 16.667%; padding-bottom: 20px;}
.history-list:before{content: ''; position: absolute; z-index:1; left: 46px; top:0; width: 2px; height: 100%; background: #999;}
.history-list li{position: relative; z-index: 2; margin-bottom: 20px; border: 1px solid #d7d7d7; text-align: center; background: #EBF6FB;
    -webkit-box-shadow: 4px 4px #dddddd;
    -moz-box-shadow: 4px 4px #dddddd;
    box-shadow: 4px 4px #dddddd;
}
.history-list li:last-child{margin-bottom: 0;}
.history-list li .year{color: #0083C9; font-size: 18px;}
.history-list li .year-info{border-left: 1px solid #d7d7d7; padding: 8px 12px; text-align: left; background: #fff;}
.history-list li .bg-light-blue{background: #EBF6FB; color: #0083C9;}
.history-list li .active-year{background: #007ec7; color: #fff; font-size: 20px;}
.history-img{margin-left: 16.667%;}

/*Service*/
#service{padding-bottom: 80px;}
.service-title{padding-left: 30px; background: url("../img/icons-arrow.png") no-repeat left 3px;}


/*Product Pages*/
#product-catagory {}
.prod-intro { margin-bottom: 20px; font-size: 150%; line-height: 1.5;}
.prod-links ul { display: table; padding: 0; width: 100%; border-collapse: collapse;}
.prod-links ul li { display: table-cell; width: 33.333333333%; line-height: 20px; border: 1px solid #d7d7d7;
    background: #E8F4FA;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#E8F4FA));
    background-image: gradient(linear,0% 0%, 0% 100%, from(#ffffff), to(#E8F4FA));}
.prod-links ul li [class^="icon-"] { margin-right: 10px;}
.prod-links ul li a { display: block; padding: 7px 10px; font-size: 150%; font-weight: 500; text-decoration: none;}
.prod-links ul li a:hover { background-color: #E8F4FA;}

.prod-series { font-size: 150%; font-weight: bold;}
.prod-series ul { padding: 0; list-style: none;}
.prod-series ul li { display: inline-block; margin-bottom: 20px;  min-width: 24%;}
.prod-series ul li a { display: block; padding-left: 15px; border-left: 4px solid #d7d7d7;}

#product-catagory .prod-type { margin-bottom: 20px;}
#product-catagory .prod-type img { display:block; max-width: 100%;}
#product-catagory .prod-type a:before { position: absolute; top: 0; right: 0; display: block; content: ""; width: 15px; height: 15px; border-width: 15px; border-style: solid; border-color: #fff #fff transparent transparent; transition: all linear 0.3s;}
#product-catagory .prod-type a:after{ position: absolute; top: 0; right: 0; display: block; content: ""; width: 15px; height: 15px; border-width: 15px; border-style: solid; border-color: transparent transparent #f0f0f0 #f0f0f0; transition: all linear 0.3s;}
#product-catagory .prod-type a { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; display: block; max-height: 133px; font-size: 170%; text-decoration: none; text-align: center; color: #fff; background-color: rgba(0,131,201,0);}
#product-catagory .prod-type:hover a, #product-catagory .prod-type:focus a { background-color: rgba(0,131,201,0.8); opacity: 1;}
#product-catagory .prod-type:hover a:before, #product-catagory .prod-type:hover a:after { width: 0px; height: 0px; border-width: 0px;}
#product-catagory .prod-type .icon-view { display: block; margin: 0 auto 16% auto; width: 140px; height: 160px; background-size: 140px auto; opacity: 0; transition: all linear 0.3s;}
#product-catagory .prod-type:hover a .icon-view { opacity: 1;}
#product-catagory .prod-type:hover a .icon-view { margin-top: 35%; width: 40px; height: 45px; background-size: 40px auto;}
#product-catagory .prod-type .prod-name { padding: 10px 0; font-size: 140%; line-height: 1.5; font-weight: 600; text-indent: 0; text-align: center;}

/*Product Detail*/
.btn-inquiry .icon-inquiry { margin-top: -3px; margin-right: 10px;}

.prod-spec { padding: 20px;}
.spec-item { margin-bottom: 10px; width: 100%; font-size: 145%; line-height: 1.15;}
.spec-item dt { color: #999;}
.spec-item dd { color: inherit;}
.prod-spec .spec-item:last-child { margin-bottom: 0;}

.prod-files { padding: 20px; border-top: 1px solid #d7d7d7;}
.prod-files ul, .prod-files li { margin: 0; padding: 0; list-style: none;}
.prod-files li { background-color: #f7f7f7; line-height: 20px;}
.prod-files li:before { display: inline-block; margin: 0 10px 0 0; width: 20px; height: 20px; background-color: #fff; font-size: 130%; border: 5px solid #0083C9; vertical-align: middle; content: "";}
.prod-files li a { color: #0083C9; text-decoration: underline;}

.prod-other img { display: inline-block; margin: 0 0 20px 20px;}

.box.prod-content { background: none; border: none;}

/*Product Feature*/
/*
#product-feature .page-title:before { display: none;}
#product-feature .page-title [class^="icon-"] { margin-right: 10px; width: 36px; height: 36px; background-size: 36px auto;}
*/
.fck-css blockquote * { margin: 0; padding: 0;}
.fck-css blockquote h3 { font-size: 113%; font-weight: 600;}
.fck-css blockquote p { text-indent: 0; font-size: 100%; color: #666;}

/*Product Application*/
/*
#product-application .page-title, #product-document .page-title, #product-document-list .page-title { border-bottom: none;}
#product-application .page-title:before, #product-application-detail .page-title:before,
#product-document .page-title:before, #product-document-detail .page-title:before,
#product-document-list .page-title:before { display: none;}
*/
#product-application .page-title [class^="icon-"],
#product-application-detail .page-title [class^="icon-"],
#product-document .page-title [class^="icon-"],
#product-document-detail .page-title [class^="icon-"],
#product-document-list .page-title [class^="icon-"]
{ float: left; margin-right: 10px; width: 36px; height: 36px; background-size: 36px auto;}

.appliaction-item .box { position: relative;}
/*
.appliaction-item .box:after { position: absolute; left: 5px; right: 5px; bottom: -5px; display: block; content: ""; border-top: 4px solid #d7d7d7;}
.appliaction-item a { display: block; padding: 4px;}
*/
/*.appliaction-item a:hover { background-color: #0083C9; text-decoration: none;}*/
.appliaction-item .name { position: relative; display: block; padding: 10px; font-size: 150%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; height: 60px; text-align: center; background: #eaf5fa;}
.appliaction-item .name:before { position: absolute; left: 5px; display: block; content: ""; width: 20px; height: 19px; /*background-image: url(../img/icon-item.svg); */}
/*.appliaction-item:hover .name { color: #fff;}*/
/*.appliaction-item:hover img { opacity: 0.65;}*/
.appliaction-item a.add-ask { position: absolute; right: 20px; top: 10px; z-index: 99; background-color: #003991; border-radius: 5px; color: #FFF; letter-spacing: 2px; font-weight: bold;box-shadow: inset 0 -3px 0 rgb(0 0 0 / 15%);padding:3px 5px; text-decoration: none;}
.appliaction-item a.add-ask:hover  { background-color: #0083c9;}

#product-application-detail .prod-info .name { margin-bottom: 20px; font-size: 210%;}
#product-application-detail .prod-info .name .icon-item { margin-right: 10px;}




/*GALLERY*/
.slider { margin: 50px 0 10px!important;}
#carousel li { background-color: #666; border-left: 5px solid #fff; border-right: 5px solid #fff;}
#carousel img {display: block; opacity: .65; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}



/*Product Documnet*/
.document-item .box:after { position: absolute; display: block; content: ""; left: 5px; right: 5px; bottom: -4px; height: 4px; background-color: #0083C9;}
.document-item .box-title { padding: 15px; font-size: 170%; font-weight: 600;
	background: #f0f0f0;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f0f0f0));
    background-image: gradient(linear,0% 0%, 0% 100%, from(#ffffff), to(#f0f0f0));
}
.document-item .box-title:before { float: left; display: inline-block; content:""; margin-right: 10px; width: 4px; height: 25px; background-color: #ACE2F6; vertical-align: middle;}
.document-item .box-title a { display: block; max-height: 1.5; overflow: hidden;}
.document-item .box-content { padding: 15px;}
.document-item .box-content:after { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; background-image: url(../img/files-bg.png); background-repeat: no-repeat; background-position: right bottom; background-size: cover; content: ""; opacity: 0.4;}
.document-item ul, .document-item li { margin: 0; padding: 0;}
.document-item ul { position: relative; z-index: 2; margin-bottom: 15px; min-height: 8.8em; max-height: 8.8em;}
.document-item li { font-size: 150%;}
.document-item li a { display: list-item; height: 1.5em; list-style: inside disc;}
.document-item .btn {  position: relative; z-index: 3;width: 100%; text-align: center;}

/*Product Documnet List*/
#product-document-list .box.prod-info:after { position: absolute; left: 5px; right: 5px; bottom: -5px; display: block; border-top: 5px solid #0083C9; content: "";}
.list-item, .list-item li { margin: 0; padding: 0; list-style: none;}
.list-item li { border-bottom: 1px solid #d7d7d7; font-size: 150%; line-height: 1.3; transition: all ease-in-out 0.3s;}
.list-item li:last-child { border-bottom: none;}
.list-item li:before { display: inline-block; float: left; padding: 10px; width: 40px; height: 40px; background-image: url(../img/icon-file.svg); background-position: center center; background-repeat: no-repeat; background-size: 20px auto; border-right: 1px solid #d7d7d7; content: "";}
.list-item li:hover { background-color: #E1F1F9;}
.list-item li a { display: block; padding: 10px; height: 2.65em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.list-item li:hover a, .list-item li a:hover { text-decoration: none;}
.list-item li time { float: right; margin-right: 10px; margin-top: 13px; font-size: 80%; color: #999;}

/*Product Documnet Detail*/
#product-document-detail .page-title { border-bottom: none;}
#product-document-detail .page-sub-title { padding-left: 25px; padding-right: 90px;}
.page-sub-title .btn-back { float: right; position: absolute; top: 12px; right: 10px; font-size: 80%;}

.content-title { position: relative; padding: 20px 20px 0 70px;}
.content-title [class^="icon-"] { position: absolute; left: 20px; width: 40px; height: 40px; background-color: #EEF7FB; background-position: center center; background-repeat: no-repeat; border-radius: 50%;}
.content-title * { margin: 0; padding: 0;}
.content-title time { color: #999;}
.p20 hr { margin-left: -20px; margin-right: -20px;}

/*Responsibility*/
.resposive-type { margin-bottom: 20px; text-align: center;}
.resposive-type ul { margin: 0; padding: 0; list-style: none;}
.resposive-type li:first-child { display: none;}
.resposive-type span { display: block; padding: 0.2em 0; font-size: 210%; font-weight: 600; border-width: 1px; border-style: solid; cursor: pointer; transition: all ease-in-out 0.3s;}
.resposive-type span:hover, .resposive-type span:focus, .resposive-type span.active { text-decoration: none; color: #fff;}

.type-declaration, .type-declaration:hover, .type-declaration:focus { color: #EA4C3A; border-color: #EA4C3A;}
.type-company, .type-company:hover, .type-company:focus { color: #8C72DA; border-color: #8C72DA;}
.type-staff, .type-staff:hover, .type-staff:focus { color: #1D90CE; border-color: #1D90CE;}
.type-environment, .type-environment:hover, .type-environment:focus { color: #6DAC0E; border-color: #6DAC0E;}

.type-declaration.active, .type-declaration:hover, .type-declaration:focus { background-color: #EA4C3A; border-color: #EA4C3A;}
.type-company.active, .type-company:hover, .type-company:focus { background-color: #8C72DA; border-color: #8C72DA;}
.type-staff.active, .type-staff:hover, .type-staff:focus { background-color: #1D90CE; border-color: #1D90CE;}
.type-environment.active, .type-environment:hover, .type-environment:focus { background-color: #6DAC0E; border-color: #6DAC0E;}

.resposive-item, .resposive-item img, .resposive-item figure { position: relative;}
.resposive-item { display: none; overflow: hidden; /*width: 260px; margin-right: -1px;*/}
.resposive-item .box:after { display: block; height: 5px; background-color: #f0f0f0; border-top: 1px solid #d7d7d7; content: "";}
.resposive-item a, .resposive-item a:hover { text-decoration: none;}
.resposive-item img { z-index: 1;}
.resposive-item figure { z-index: 3; padding: 0 15px 15px;}
.resposive-item figcaption { font-size: 160%; text-align: center; line-height: 2;}
.resposive-item figure p { height: 5.6em; font-size: 140%; color: #666; line-height: 1.4; text-indent: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.resposive-item [class^="icon-"] { display: block; margin-top: -25px; margin-left: auto; margin-right: auto; margin-bottom: 10px; width: 50px; height: 50px; border-width: 10px; border-style: solid; border-radius: 50%; transition: all ease-in-out 0.3s;}
.resposive-item .mask { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 2; display: block; transition: all ease-in-out 0.3s;}
.resposive-item:focus .mask, .resposive-item:hover .mask { opacity: 0.9;}
.resposive-item:focus *, .resposive-item:hover * { color: #fff;}

.resposive-item:focus [class^="icon-"], .resposive-item:hover [class^="icon-"] { background-color: #fff; background-image: url(../img/icon-pdf.svg); border-color: #fff;}
.item-declaration [class^="icon-"] { background-color: #EA4C3A; border-color: #EA4C3A;}
.item-company [class^="icon-"] { background-color: #8C72DA; border-color: #8C72DA;}
.item-staff [class^="icon-"] { background-color: #1D90CE; border-color: #1D90CE;}
.item-environment [class^="icon-"] { background-color: #6DAC0E; border-color: #6DAC0E;}

.item-declaration:focus .mask, .item-declaration:hover .mask { background-color: #EA4C3A;}
.item-company:focus .mask, .item-company:hover .mask { background-color: #8C72DA;}
.item-staff:focus .mask, .item-staff:hover .mask { background-color: #1D90CE;}
.item-environment:focus .mask, .item-environment:hover .mask { background-color: #6DAC0E;}

/*Inquiry*/
#inquiry .tables th, #inquiry .tables td { border-color: #d7d7d7;}
#inquiry .tables .gray-dark { background-color: #F8FAFC;}
#inquiry .inquiry-id { font-size: 14px;}
#inquiry .inquiry-img { width: 80px;}
#inquiry .inquiry-name { font-size: 150%; text-align: left; text-decoration: underline;}
#inquiry .inquiry-count { width: 140px;}
/*#inquiry .inquiry-del, .control-light { background-color: #E1F1F9; width: 100px;}*/
#inquiry .btn-delete { display: block; margin-right: 10px; padding: 0; width: 100%; height: 100%; background-color: transparent; color: #0686CA; box-shadow: none;}
#inquiry [class^="icon-"] { margin-right: 10px;}
#inquiry .count-box { display: flex; overflow: hidden; font-size: 120%; box-sizing: border-box; line-height: 2em; align-items: center;}
#inquiry .count-box a { display: block; text-align: center; width: 35px; font-weight: 600; font-size: 160%; line-height: 34px; text-decoration: none;  border: 1px solid #d7d7d7; }
#inquiry .count-box a:hover { background-color: #E1F1F9;}
#inquiry .count-box input { display: block; float: left; text-align: center; width: 3.8em; height: 37px; border-top: none; border-bottom: none;}
#inquiry .ask-table span { display: none; font-size: 14px; padding-right: 5px;}

.inquiry-form dt { font-size: 150%; line-height: 35px;}
.inquiry-form input[type="text"], .inquiry-form input[type="tel"], .inquiry-form input[type="email"], .inquiry-form textarea { width: 100%; font-size: 150%;}
.inquiry-form input[type="radio"] { margin-right: 10px;}
.inquiry-form select { margin-bottom: 15px; padding: 0.4em; width: 100%; background-color: #f4f4f4; font-size: 150%; border: 1px solid #d7d7d7;}
.inquiry-form label { display: inline-block; margin-right: 20px; font-size: 150%; vertical-align: middle; line-height: 35px;}
.inquiry-form label.ext { margin: 0;}
.inquiry-form span { font-size: 120%; color: #999; line-height: 35px;}
.inquiry-form img { margin-right: 20px;}
.inquiry-form a { color: ; font-size: 150%;}
.inquiry-form button { margin-right: 20px;}
.inquiry-form .col-3 .col-4 { padding: 0;}

.inquiry-form span.required { float: right; margin-left: 10px; color: #F60; font-size: 100%; font-family: initial;}

/*Download*/
.login-bg { position: absolute; left: 20px; top: 20px; right: 20px; height: 400px; max-height: 400px; background-image: url(../img/login-bg.jpg); background-repeat: no-repeat; background-position: left top; background-size: contain;}

.login-box { position: relative; left: 58.33333333%; float: none !important; padding: 0; min-width: 380px;}
.login-box [class^="icon-"], #pwd-box [class^="icon-"], #register [class^="icon-"] { float: left; margin-right: 10px;}
.login-title { padding: 40px 20px 30px; font-size: 210%; font-weight: 600; text-align: left; line-height: 1.71;}
.login-title span { float: right; color: #f0f0f0; font-weight: normal;}
.login-title [class^="icon-"] { float: left; margin-right: 10px; width: 32px; height: 32px; background-size: 32px auto;}

.login-form { padding: 0 20px;}
.login-form dt, .login-form dd a { font-size: 150%; line-height: 35px;}
.login-form input { width: 100%; font-size: 150%;}
.login-form button { margin-right: 20px;}

.quick-info { padding: 20px 0; background-color: #f9f9f9; text-align: center; border-top: 1px solid #d7d7d7;}
.quick-info .btn-trans { font-size: 140%;}
.quick-info .btn-trans:hover, .quick-info .btn-trans:focus { background-color: transparent; color: #666; box-shadow: none;}
.btn-reg { color: #0083C9;}
.btn-laws { color: #999;}

#login-box, #pwd-box { min-height: 310px; text-align: left;}

/*Register*/
.register-form dt  { font-size: 150%; line-height: 35px;}
.register-form input[type="text"], .register-form input[type="password"], .register-form input[type="tel"], .register-form input[type="email"], .register-form textarea { width: 100%; font-size: 150%;}
.register-form input[type="radio"] { margin-right: 10px;}
.register-form select { margin-bottom: 15px; padding: 0.4em; width: 100%; background-color: #f4f4f4; font-size: 150%; border: 1px solid #d7d7d7;}
.register-form label { display: inline-block; margin-right: 20px; font-size: 150%; vertical-align: middle; line-height: 35px;}
.register-form label.ext { margin: 0;}
.register-form span { font-size: 120%; color: #999; line-height: 35px;}
.register-form img { margin-right: 20px;}
.register-form a { color: ; font-size: 150%;}
.register-form button { margin-right: 20px;}
.register-form .col-3 .col-4 { padding: 0;}

.register-form span.required { float: right; margin-left: 10px; color: #F60; font-size: 100%; font-family: initial;}

/*Download List*/
.main-catagory, .sub-catagory { display: block; margin: 0; padding: 0; width: 100%; list-style: none;}
.main-catagory li { float: left; display: block; margin-bottom: 20px; padding-left: 10px; padding-right: 10px; font-size: 190%;}
.main-catagory li a { display: block; padding: 15px; background-color: #F9F9F9; border: 1px solid #d7d7d7;}
.main-catagory li a:hover, .main-catagory li a.active { background-color: #0083c9; color: #fff; text-decoration: none;}
.main-catagory li a [class^="icon-"] { margin-right: 10px; width: 30px; height: 30px; background-color: #ddd; background-image: url(../img/icon-download-white.svg); border: 5px solid #ddd; border-radius: 50%;}
.main-catagory li a:hover [class^="icon-"], .main-catagory li a:focus [class^="icon-"], .main-catagory li a.active [class^="icon-"] { border-color: #fff; background-color: #fff; background-image: url(../img/icon-download-blue.svg);}

.sub-catagory { margin-bottom: 20px; padding: 0 10px;}
.sub-catagory li { float: left; display: block; width: 33.33333333%;}
.sub-catagory li a { display: block; margin-right: -1px; margin-bottom: -1px; padding: 10px; font-size: 150%; font-weight: 600; border: 1px solid #d7d7d7;}
.sub-catagory li a:hover,.sub-catagory li a.active { background-color: #E1F1F9; color: #0083c9; text-decoration: underline;}
.sub-catagory li a:before { display: inline-block; content: ""; float: left; margin-right: 10px; height: 20px; border-left: 4px solid #d7d7d7;}
.sub-catagory li a:hover:before, .sub-catagory li a:focus:before, .sub-catagory li a.active:before { border-color: #0083c9;}

#download .tables th, #download .tables td,
#member .tables th, #member .tables td { border-color: #d7d7d7;}
#download  .gray-dark,
#member  .gray-dark { background-color: #F8FAFC;}
#download td,
#member td { color: #999; font-size: 150%;}
#download td.ctrl-download,
#member td.ctrl-download { background-color: #E1F1F9;}
#download td.ctrl-download .btn,
#member td.ctrl-download .btn { padding: 0; background-color: transparent; box-shadow: none; font-size: 100%; color: #0083c9;}
#download td.ctrl-download .btn [class^="icon-"],
#member td.ctrl-download .btn [class^="icon-"] { margin-right: 10px;}
#download td.ctrl-name,
#member td.ctrl-name { font-weight: bold; color: #333;}
#download td.ctrl-meta,
#member td.ctrl-meta { text-align: left;}

/*Member*/
#member .content-title { padding: 10px 0 30px 60px;}
#member .content-title h3 { font-size: 170%; color: #0083c9; font-weight: 600; line-height: 20px;}
#member .content-title [class^="icon-"] { left: 10px; top: 0;}

.edit-form { padding: 0 40px;}
#member .edit-form  hr { margin-left: -50px; margin-right: -50px;}
.edit-form dt  { font-size: 150%; line-height: 35px;}
.edit-form input[type="text"], .edit-form input[type="password"], .edit-form input[type="tel"], .edit-form input[type="email"], .edit-form textarea { width: 100%; font-size: 150%;}
.edit-form input[type="radio"] { margin-right: 10px;}
.edit-form select { margin-bottom: 15px; padding: 0.4em; width: 100%; background-color: #f4f4f4; font-size: 150%; border: 1px solid #d7d7d7;}
.edit-form label { display: inline-block; margin-right: 20px; font-size: 150%; vertical-align: middle; line-height: 35px;}
.edit-form label.ext { margin: 0;}
.edit-form span { font-size: 120%; color: #999; line-height: 35px;}
.edit-form img { margin-right: 20px;}
.edit-form a { color: ; font-size: 150%;}
.edit-form button { margin-right: 20px;}
.edit-form .col-3 .col-4 { padding: 0;}

/*contact*/
.office { margin: 20px 0; padding: 10px 15px; border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
.office ul, .office li { margin: 0; padding: 0; list-style: none;}
.office li { position: relative; padding: 4px 0 4px 30px; font-size: 140%; line-height: 1.5;}
.office li [class^="icon-"] { position: absolute; left: 0; top: 4px;}
.office h4 { font-weight: 600;}
.office h4 small { display: block; color: inherit;}

.office-base { background-color: #ECF9FD;}
.office-base h4 { color: #0083c9;}
.office-tainan { background-color: #F9F0F0;}
.office-tainan h4 { color: #FF4D4D;}
.office-japan { background-color: #F9F2DB;}
.office-japan h4 { color: #FF8000;}
.office-kunshan { background-color: #E9F7DD;}
.office-kunshan h4 { color: #468C00;}


.contact-form dt { font-size: 150%; line-height: 35px;}
.contact-form input[type="text"], .contact-form input[type="tel"], .contact-form input[type="email"], .contact-form textarea { width: 100%; font-size: 150%;}
.contact-form input[type="radio"] { margin-right: 10px;}
.contact-form select { margin-bottom: 15px; padding: 0.4em; width: 100%; background-color: #f4f4f4; font-size: 150%; border: 1px solid #d7d7d7;}
.contact-form label { display: inline-block; margin-right: 20px; font-size: 150%; vertical-align: middle; line-height: 35px;}
.contact-form label.ext { margin: 0;}
.contact-form span { font-size: 120%; color: #999; line-height: 35px;}
.contact-form img { margin-right: 20px;}
.contact-form a { color: ; font-size: 150%;}
.contact-form button { margin-right: 20px;}
.contact-form .col-3 .col-4 { padding: 0;}

.contact-form span.required { float: right; margin-left: 10px; color: #F60; font-size: 100%; font-family: initial;}
.contact-form h4 { margin-bottom: 20px; }
.contact-form h4 span.required { float: none; font-family: inherit;}

/*ask-cart*/
.ask-car {margin-top: 5px; display: flex; align-items: center; justify-content: center;}
.ask-car i {margin-right: 5px;}
.ask-car .badge {display: inline-block;  min-width: 10px;padding: 1px 6px; font-size: 100%; font-weight: 700; line-height: 1; color: #ff9104;  text-align: center; white-space: nowrap;  vertical-align: middle; background-color: #FFF; border-radius: 10px; margin-left: 5px;}
.ask-car.hidden-pc { display: none;}
/*Project page*/
#project { background-color: transparent; border: none;}
.project-info ol{
  font-size: 15px;
}
.project-info p{
  font-size: 15px;
  text-indent: 0;
}
#project .icon-product { float: left; margin-right: 10px;}
#project .box-title { margin-bottom: 10px; padding-left: 0; border: none;}
#project .box-content { padding: 0;}
#project .prod-type { min-height: 145px; margin-bottom: 50px; position: relative; background: url(../img/project-bg.jpg); background-position: center center; background-repeat: no-repeat; }
#project .prod-type:after { display: block; content: ""; position: absolute; left: 10px; right: 10px; bottom:-28px; height: 30px; background-image: url(../img/show-half-right.png); background-repeat: no-repeat; background-position: right top; background-size: 250px auto;}

#project .box-content a.icon-link:before { position: absolute; top: 0; /*right: 10px;*/ right: 0px; display: block; content: ""; width: 20px; height: 20px; border-width: 20px; border-style: solid; border-color: #f0f0f0 #f0f0f0 transparent transparent; transition: all linear 0.3s;}
#project .box-content a.icon-link:after{ position: absolute; top: 0; /*right:10px;*/ right: 0px; display: block; content: ""; width: 20px; height: 20px; border-width: 20px; border-style: solid; border-color: transparent transparent #fff #fff; transition: all linear 0.3s;}
#project .box-content a.icon-link { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; display: block; font-size: 170%; text-decoration: none; text-align: center; color: #333; z-index: 9; }
#project .box-content a.icon-link:hover, #project .box-content a:focus { background-color: rgba(0,131,201,0.8); opacity: 1;}

#project .box-content a:hover:before, #project  .box-content a:hover:after { width: 0px; height: 0px; border-width: 0;}
#project .icon-view { display: block; margin: 12px auto; width: 140px; height: 120px; background-size: 140px auto; opacity: 0; transition: all linear 0.3s;  background-repeat: no-repeat; background-position: center center;}

#project a.icon-link:hover .icon-view,#project a:hover span { opacity: 1;}
#project a.icon-link:hover .icon-view { margin-top: 3%; width: 70px; height: 120px; background-size: 70px auto;}
#project a.icon-link:hover span { font-size: 100%;}

#project .project-list { display: block; position: absolute;  padding: 10px 50px 10px 100px; width: 100%; height: 100%; }

.project-tag span { padding: 1px 3px; display: inline-block; border:1px solid #036db6; color:#036db6; margin-right: 5px; border-radius: 3px; font-size: 10px;}

#project .project-list h3 { margin: 10px 0;}
#project .project-list h5 { line-height: 1.5; height: 45px; font-size: 14px; color: #666;}

.prod-info .project-date .prod-series ul { display: flex; justify-content: flex-end; margin: 10px 0;}
.prod-info .project-date .prod-series ul li { margin-left: 10px;}
.project-date { height: auto !important;}
.project-date a { text-decoration: none;}
.project-date .prod-series ul { margin: 0;}
.project-date .prod-series { font-size: auto; line-height: 1;}
.project-date .prod-series ul li { min-width: auto; width: auto; margin-bottom: 0; font-size: 14px; line-height: 2; padding-right: 15px;}
.project-date .prod-series ul li.active {  background: #ddf2ff;}
.project-date .prod-series ul li.active a { border-left: 4px solid #80d4ff;}


@media (max-width: 767px) { 
.about-logo { display: none;}
.about-info .sm-hide { display: none;}
.about-info .sm-show { display: block; margin-bottom: 30px;}
.prod-spec { border-top: 1px solid #d7d7d7;}
#project .project-list {padding: 10px 50px 10px 50px;}
#project .box-content a.icon-link{ left: 0; right: 0;}
.news-item .news-info dt time { float: none;}
.ask-table{  width: 100%; min-width: 100%; table-layout: fixed !important;}

.ask-table tr {
    position: relative;
    border: 1px solid #4cadc5;
    width: 100%;
    display: block !important;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.ask-table tr td {
    width: 100%;
    text-align: left;
    border: none;
}
  
#inquiry .ask-table span { display: inline-block; color:#0083C9;}  
.ask-table.tables thead { display: none;}
#inquiry .inquiry-id { width: 100%; background: #E1F1F9; padding: 10px; display: block;}
#inquiry .inquiry-name { font-size: 16px; display: block;}
#inquiry .inquiry-name a { display: inline-block;}
#inquiry .inquiry-del{ position: absolute; top:0; right:10px; width: auto; font-size: 16px; display: block; padding: 5px; z-index: 3; width: 50px; }
#inquiry .btn-delete { font-size: 20px; text-align: center;}
#inquiry .inquiry-img { position: absolute; width: 100px; top:50px; left: 0;} 
#inquiry .inquiry-name,
#inquiry .inquiry-count { width: 100%;  display: block; padding-left: 100px; white-space:inherit; }
#footer-top .footer-logo{ text-align: center !important;}
#footer-top ul { margin: 10px 0;}   
.qkmmu { text-align: left; }   
.qkmmu li { display: inline-block;}

}