@charset "UTF-8";
.icons-sprite, .icons-add, .icons-dot, .icons-download, .icons-email, .icons-home, .icons-lan, .icons-lan002, .icons-place, .icons-plus, .icons-smartphone { background-image: url('../images/icons-sb33f488031.png'); background-repeat: no-repeat; }

.icons-add { background-position: 0 0; }

.icons-dot { background-position: 0 -36px; }

.icons-download { background-position: 0 -68px; }

.icons-email { background-position: 0 -110px; }

.icons-home { background-position: 0 -146px; }

.icons-lan { background-position: 0 -180px; }

.icons-lan002 { background-position: 0 -240px; }

.icons-place { background-position: 0 -280px; }

.icons-plus { background-position: 0 -316px; }

.icons-smartphone { background-position: 0 -372px; }

.unreset address, .unreset blockquote, .unreset dd, .unreset div, .unreset dl, .unreset dt, .unreset fieldset, .unreset form, .unreset frame, .unreset frameset, .unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset noframes, .unreset ol, .unreset p, .unreset ul, .unreset center, .unreset dir, .unreset hr, .unreset menu, .unreset pre { display: block; }

.unreset li { display: list-item; }

.unreset head { display: none; }

.unreset table { display: table; }

.unreset tr { display: table-row; }

.unreset thead { display: table-header-group; }

.unreset tbody { display: table-row-group; }

.unreset tfoot { display: table-footer-group; }

.unreset col { display: table-column; }

.unreset colgroup { display: table-column-group; }

.unreset td, .unreset th { display: table-cell; }

.unreset caption { display: table-caption; }

.unreset th { font-weight: bolder; text-align: center; }

.unreset caption { text-align: center; }

.unreset body { margin: 8px; }

.unreset h1 { font-size: 2em; margin: 0.67em 0; }

.unreset h2 { font-size: 1.5em; margin: 0.75em 0; }

.unreset h3 { font-size: 1.17em; margin: 0.83em 0; }

.unreset h4, .unreset p, .unreset blockquote, .unreset ul, .unreset fieldset, .unreset form, .unreset ol, .unreset dl, .unreset dir, .unreset menu { margin: 1.12em 0; }

.unreset h5 { font-size: .83em; margin: 1.5em 0; }

.unreset h6 { font-size: .75em; margin: 1.67em 0; }

.unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset b, .unreset strong { font-weight: bolder; }

.unreset blockquote { margin-left: 40px; margin-right: 40px; }

.unreset i, .unreset cite, .unreset em, .unreset var, .unreset address { font-style: italic; }

.unreset pre, .unreset tt, .unreset code, .unreset kbd, .unreset samp { font-family: monospace; }

.unreset pre { white-space: pre; }

.unreset button, .unreset textarea, .unreset input, .unreset select { display: inline-block; }

.unreset big { font-size: 1.17em; }

.unreset small, .unreset sub, .unreset sup { font-size: 0.83em; }

.unreset sub { vertical-align: sub; }

.unreset sup { vertical-align: super; }

.unreset table { border: 1px solid; border-spacing: 2px; }

.unreset thead, .unreset tbody, .unreset tfoot { vertical-align: middle; }

.unreset th, .unreset tr { vertical-align: inherit; border: 1px solid; padding: 5; font-size: 100%; }

.unreset td { vertical-align: inherit; border: 1px solid; padding-left: 5px; font-size: 100%; }

.unreset s, .unreset strike, .unreset del { text-decoration: line-through; }

.unreset hr { border: 1px inset; }

.unreset ol, .unreset ul, .unreset dir, .unreset menu, .unreset dd { margin-left: 40px; }

.unreset ol { list-style-type: decimal; }

.unreset ol ul, .unreset ul ol, .unreset ul ul, .unreset ol ol { margin-top: 0; margin-bottom: 0; }

.unreset ul { list-style-type: disc; }

.unreset u, .unreset ins { text-decoration: underline; }

.unreset br:before { content: "\A"; white-space: pre-line; }

.unreset center { text-align: center; }

.unreset :link, .unreset :visited { text-decoration: underline; }

.unreset :focus { outline: thin dotted invert; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

ol, ul, li { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/* remember to define a styles! */
:link, :visited { text-decoration: none; }

:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }

del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

table tr td { vertical-align: middle; }

img { border: 0; }

a { color: inherit; }

input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }

/* padding */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select { font-size: 100%; }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

/* other */
code, kbd, samp, tt { font-size: 100%; }

header nav #logo a, header nav #navbarSupportedContent .list > a, header nav #navbarSupportedContent .dropdown-menu li a, header #lan li a, header.fixed nav #logo a, #news .news_list a, .link_content .link_list a, .btn a { width: 100%; height: 100%; display: block; color: inherit; }

header nav #logo a, header.fixed nav #logo a, #footer .footer_info .footer_logo, #contact .contact_info .contact_logo, .pagenum .btnleft a, .pagenum .btnright a { white-space: nowrap; text-indent: 100%; overflow: hidden; }

.bootstrap_default, header nav #navbarSupportedContent .list, header #lan li { display: inline-block; margin-right: -6px; vertical-align: top; }

.table { display: table; border-spacing: 0.5rem; border-collapse: collapse; width: 100%; table-layout: fixed; }

/* animation-name: example; 動畫名稱 */
/* animation-duration: 4s; 動畫時間長度 */
/* animation-timing-function: linear; 動畫速度 */
/* animation-delay:2s; 動畫開始秒數'' */
/* animation-iteration-count: 3; 動畫循環次數 */
/* animation-direction: alternate; 動畫時間方向性 */
/* WEIGHTS */
/* FONT */
body { font-size: 10px; font-size: 1rem; line-height: 1.6; }

section .i_content_title h2 { font-size: 20px; font-size: 2rem; font-weight: 800; }
section .i_content_title h2 span { font-size: 10px; font-size: 1rem; font-weight: 800; }
section .content_title h2 { font-size: 20px; font-size: 2rem; font-weight: 800; }
section .content_title h2 span { font-size: 10px; font-size: 1rem; font-weight: 800; }
section .content_title02 h2 { font-size: 20px; font-size: 2rem; font-weight: 800; }
section .content_title02 h2 span { font-size: 8px; font-size: 0.8rem; }

#product_hot .product_list .product_title { font-size: 12px; font-size: 1.2rem; font-weight: 800; }

#news .news_list .news_title { font-size: 12px; font-size: 1.2rem; font-weight: 800; }

#news_detail .news_title h2 { font-size: 16px; font-size: 1.6rem; font-weight: 800; }
#news_detail .news_title h2 span { font-size: 8px; font-size: 0.8rem; }

#product .product_content { /* LIST */ /* DETAIL */ /* DM */ }
#product .product_content .product_list ul .product_title { font-size: 12px; font-size: 1.2rem; font-weight: 800; }
#product .product_content .product_detail_info span { font-size: 20px; font-size: 2rem; font-weight: 800; }
#product .product_content .product_detail_info .title { font-weight: 800; }
#product .product_content .product_dm_list ul .product_dm_info span { font-size: 12px; font-size: 1.2rem; font-weight: 800; }

.news_more { font-size: 8px; font-size: 0.8rem; }

/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

/* $slick-font-path: "./fonts/" !default; */
/* Slider */
.slick-loading .slick-list { background: #fff url("../images/ajax-loader.gif") center center no-repeat; }

/* Icons */
/* @if $slick-font-family == "slick" { @font-face { font-family: "slick"; src: slick-font-url("slick.eot"); src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }
} */
/* Arrows */
.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); padding: 0; border: none; outline: none; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }
.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev { left: 0px; }
[dir="rtl"] .slick-prev { left: auto; right: -25px; }
.slick-prev:before { content: "←"; }
[dir="rtl"] .slick-prev:before { content: "→"; }

.slick-next { right: 0px; }
[dir="rtl"] .slick-next { left: -25px; right: auto; }
.slick-next:before { content: "→"; }
[dir="rtl"] .slick-next:before { content: "←"; }

/* Dots */
.slick-dotted.slick-slider { margin-bottom: 30px; }

.slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: black; opacity: 0.75; }

body { font: normal 16px/1.6 Verdana, "微軟正黑體", sans-serif; color: #333; }

h2, h3 { display: inline-block; }

#wrapper { position: relative; }

.clear { clear: both; }

/* BOOTSTRAP */
body.modal-open { overflow: hidden; }

.bootstrap_default { padding: 0px; float: none !important; }

/* RWD */
.pc { display: block; }

.mobile { display: none; }

/* TABLE */
.table .table_row { display: table-row; }
.table .table_cell { display: table-cell; vertical-align: middle; }

#menu { display: none; width: 50px; height: 50px; padding: 10px; cursor: pointer; position: fixed; top: 8px; right: 0px; z-index: 9999; }
#menu span { width: 30px; height: 1px; margin-bottom: 7px; background: #fff; position: relative; display: block; top: 6px; transition: 0.2s; -webkit-transition: 0.2s; -moz-transition: 0.2s; }

#menu.on { right: 300px; }
#menu.on span:nth-child(1) { top: 14px; transform: rotate(-45deg); }
#menu.on span:nth-child(2) { width: 0; opacity: 0; }
#menu.on span:nth-child(3) { top: -2px; transform: rotate(45deg); }

header { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; width: 100%; /* padding:$w_padding/2 0px 0px 0px; */ border-bottom: 1px solid #fff; color: #fff; position: absolute; top: 0px; z-index: 999; }
header .navbar { padding: 0px; position: relative; }
header .navbar-light .navbar-toggler { border-color: #fff; cursor: pointer; }
header .navbar-toggler { padding: 10px 0.75rem; }
header nav { max-width: 1200px; margin: 0px auto; }
header nav #logo { background: url(../images/logo.png) no-repeat center; width: 150px; height: 40px; background-size: 150px; float: left; }
header nav #navbarSupportedContent { float: right; /* .dropdown:hover .dropdown-menu{display:block;} */ }
header nav #navbarSupportedContent .list { position: relative; margin-right: 0px; }
header nav #navbarSupportedContent .list > a { /* padding:50px $w_padding/2 $w_padding/2 $w_padding/2; */ padding: 30px 15px 15px 15px; }
header nav #navbarSupportedContent .list > a:after { content: ''; position: absolute; width: 100%; height: 3px; background: #326C95; bottom: -2px; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); opacity: 0; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all 0.3s ease-in-out; }
header nav #navbarSupportedContent .list:hover a:after { opacity: 1; }
header nav #navbarSupportedContent .l7 .dropdown-menu { min-width: 50px; }
header nav #navbarSupportedContent .l7 span { width: 20px; height: 20px; background: url(../images/icons/lan.png) no-repeat center top; display: block; }
header nav #navbarSupportedContent .dropdown-toggle::after { display: none; }
header nav #navbarSupportedContent .dropdown-menu .dropdown-toggle::after { display: inline-block; }
header nav #navbarSupportedContent .dropdown.list { /* padding:50px $w_padding/2 $w_padding/2 $w_padding/2; */ }
header nav #navbarSupportedContent .dropdown-menu { padding: 0px; background: #244C75; color: #fff; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; }
header nav #navbarSupportedContent .dropdown-menu li a { padding: 15px 15px; border-bottom: 1px #686868 solid; }
header nav #navbarSupportedContent .dropdown-menu li a:hover { background: #326C95; }
header nav #navbarSupportedContent .nav_top_menu { display: none; padding: 10px 0px; border-bottom: 1px #326C95 solid; }
header #lan { display: none; position: absolute; right: 60px; top: 7px; }
header #lan li { margin: 10px 0px 5px 5px; font-size: 12px; color: #fff; }
header #lan li a { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; width: 30px; height: 30px; border: 1px #fff solid; padding: 5px 0px; text-align: center; }

header.fixed { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: fixed; }
header.fixed nav { max-width: 1200px; margin: 0px auto; color: #333; }
header.fixed nav #logo { background: url(../images/logo002.png) no-repeat center; width: 150px; height: 40px; background-size: 150px; float: left; }
header.fixed nav #navbarSupportedContent .list > a { padding: 15px 15px 15px 15px; }
header.fixed nav #navbarSupportedContent .l7 span { background: url(../images/icons/lan.png) no-repeat center bottom; }
header.fixed nav #navbarSupportedContent .dropdown.list { /* padding:$w_padding/2 $w_padding/2 $w_padding/2 $w_padding/2; */ }

#footer { background: #4B4B4B; color: #fff; }
#footer .content { max-width: 1200px; padding: 80px 0px; margin: 0px auto; overflow: hidden; }
#footer .footer_info .footer_logo { background: url(../images/logo.png) no-repeat center; width: 200px; height: 56px; background-size: 200px; margin-bottom: 30px; }
#footer .footer_info li { margin-bottom: 10px; padding-left: 30px; }
#footer .footer_info li:nth-child(2) { background: url(../images/icons/place.png) no-repeat 0px 6px; }
#footer .footer_info li:nth-child(3) { background: url(../images/icons/smartphone.png) no-repeat 0px 6px; }
#footer .footer_info li:nth-child(4) { background: url(../images/icons/email.png) no-repeat 0px 6px; }
#footer .footer_nav .footer_nav_list span { display: block; margin-bottom: 30px; font-weight: 800; }
#footer .footer_nav .footer_nav_list a { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; display: block; margin-bottom: 10px; }
#footer .footer_nav .footer_nav_list a:hover { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; text-decoration: underline; }

.copyright { text-align: center; padding: 15px 0px; border-top: 1px #fff solid; }
.copyright span { position: absolute; right: 30px; }
.copyright span a { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; }
.copyright span a:hover { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; color: #326C95; }

#banner .banner_page { width: 100%; height: 460px; position: relative; overflow: hidden; }
#banner .banner_page .banner_text { width: 100%; text-align: center; position: absolute; top: 50%; z-index: 2; -webkit-animation: scrollFadeUp 1s 1 ease-in-out forwards; animation: scrollFadeUp 1s 1 ease-in-out forwards; }
#banner .banner_page .banner_text span { width: 100%; font-size: 50px; font-weight: bold; color: #fff; }
#banner .banner_page .banner_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-transform: scale(1); transform: scale(1); -webkit-animation: cssAnimation 1s 1 ease-in-out forwards; animation: cssAnimation 1s 1 ease-in-out forwards; }
#banner .banner_page .banner_img img { min-height: 100%; min-width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#banner .banner { position: relative; overflow: hidden; }
#banner .banner .item img { width: 100%; /* 				-webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
				transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
				-webkit-transform: scale(1.1);
			          transform: scale(1.1); */ }
#banner .banner .item.slick-active { -webkit-transform: scale(1); transform: scale(1); -webkit-animation: cssAnimation 1s 1 ease-in-out forwards; animation: cssAnimation 1s 1 ease-in-out forwards; }
#banner .banner .item.slick-active img { /* 			  -webkit-transform: scale(1);
			          transform: scale(1);
			  -webkit-animation: cssAnimation 1s 1 ease-in-out forwards;
			  animation: cssAnimation 1s 1 ease-in-out forwards; */ }

#i_about { background: #F5F5F5; }
#i_about .i_content_title { background: none; background: #326C95; }
#i_about .i_content_title h2 { color: #fff; }
#i_about img { width: 100%; }
#i_about .textatea { background: #326C95; color: #fff; padding: 0px 120px 30px 120px; margin-bottom: 0px; }

#i_product { background: #F5F5F5; }
#i_product .i_content_title { background: none; background: #326C95; }
#i_product .i_content_title h2 { color: #fff; }
#i_product .textatea { background: #326C95; color: #fff; padding: 0px 120px 30px 120px; margin-bottom: 0px; }

.i_product_content { /* margin-top:$w_padding; */ }
.i_product_content .i_product_list { position: relative; }
.i_product_content .i_product_list div.img { overflow: hidden; }
.i_product_content .i_product_list div.img img { width: 100%; margin-bottom: -6px; transition: transform .5s; }
.i_product_content .i_product_list div.des { width: 100%; /* background:rgba(36,76,117,0.8); */ color: #fff; padding: 30px 50px; font-size: 18px; position: absolute; bottom: 0px; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); }
.i_product_content .i_product_list div.des span { display: block; font-weight: bold; font-size: 24px; /*  margin-bottom:13.5px; */ }
.i_product_content .i_product_list:hover div.img img { -webkit-transform: scale(1.15); transform: scale(1.15); }

#i_news { background: #F5F5F5; }
#i_news .i_news_content { margin-top: 30px; }
#i_news .i_news_content .i_news_list { padding: 0px 10px; margin-bottom: 30px; }
#i_news .i_news_content .i_news_list div.img { overflow: hidden; position: relative; }
#i_news .i_news_content .i_news_list div.img img { width: 100%; margin-bottom: -6px; transition: transform .5s; }
#i_news .i_news_content .i_news_list div.img:before { content: ''; position: absolute; width: 50px; height: 50px; background: url(../images/icons/plus.png) no-repeat center center #326C95; background-size: 18px auto; bottom: 0px; right: 0; z-index: 2; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
#i_news .i_news_content .i_news_list div.img:after { content: ''; position: absolute; width: 0; height: 0; bottom: 0; right: 0; background: rgba(36, 76, 117, 0.3); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
#i_news .i_news_content .i_news_list div.des { padding: 10px 20px; background: #fff; }
#i_news .i_news_content .i_news_list div.des span { display: block; font-size: 14px; }
#i_news .i_news_content .i_news_list:hover div.img:before { bottom: 50%; right: 50%; transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); -moz-transform: translate(50%, 50%); -webkit-transform: translate(50%, 50%); border-radius: 100%; border: 6px solid rgba(255, 255, 255, 0.3); width: 70px; height: 70px; }
#i_news .i_news_content .i_news_list:hover div.img:after { width: 100%; height: 100%; }
#i_news .i_news_content .i_news_list:hover div.img img { -webkit-transform: scale(1.15); transform: scale(1.15); }

/* CONTAINER */
section { padding: 60px 0px; }
section .content { max-width: 1200px; margin: 0px auto; overflow: hidden; }
section .content_member { max-width: 600px; margin: 0px auto; overflow: hidden; }
section .i_content_title { background: url(../images/title.png) no-repeat center top; text-align: center; }
section .i_content_title h2 { width: 100%; color: #02133C; padding: 50px 0px 30px 0px; position: relative; }
section .content_title { text-align: center; }
section .content_title h2 { width: 100%; color: #02133C; padding: 0px 0px 30px 0px; position: relative; }
section .content_title02 h2 { width: 100%; padding: 15px 0px 0px 90px; margin: 0px 0px 60px 0px; position: relative; }
section .content_title02 h2 > span { display: block; width: 70px; height: 70px; font-size: 12px; background: #326C95; color: #fff; text-align: center; padding: 8px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; position: absolute; left: 0px; top: 0px; }
section .content_title02 h2 > span .date { font-size: 30px; font-weight: bold; display: block; line-height: 1.2; }
section .textatea { margin-bottom: 30px; }
section .textatea img { width: 100%; }
section .textatea_small { padding: 0px 120px; }
section .image img { width: 100%; }

/* BREADCRUMBS */
#breadcrumbs { border-top: 1px #D5D5D5 solid; border-bottom: 1px #D5D5D5 solid; margin: -6px 0px 60px 0px; overflow: hidden; }
#breadcrumbs span { display: block; max-width: 1200px; margin: 0px auto; padding: 10px 0px 10px 0px; }
#breadcrumbs img { margin-right: 10px; }

/* ABOUT */
.about_bg { background: url(../images/bg_002.jpg) no-repeat center bottom; background-size: 100%; padding-bottom: 300px; }

/* NEWS */
#news { overflow: hidden; position: relative; }
#news .news_list { border-bottom: 1px #D5D5D5 solid; padding: 20px 0px 20px 0px; margin-bottom: 15px; position: relative; }
#news .news_list .news_date { color: #326C95; margin-bottom: 5px; }
#news .news_list .news_title { color: #326C95; }
#news .news_list a { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; }
#news .news_list a:hover .news_title { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; color: #244C75; }

#news_detail { overflow: hidden; position: relative; }
#news_detail .news_title { color: #02133C; margin-bottom: 30px; }
#news_detail .news_title span { margin-left: 10px; color: #326C95; }

/* ANNOUNCE */
#announce .announce_content { margin-top: 30px; }
#announce .announce_content .announce_list { padding: 0px 10px; margin-bottom: 30px; }
#announce .announce_content .announce_list img { width: 100%; }
#announce .announce_content .announce_list div { padding: 10px 20px; text-align: center; }
#announce .announce_content .announce_list div span { display: block; font-size: 18px; color: #244C75; font-weight: bold; }
#announce .announce_content .announce_list:hover div.img img { -webkit-transform: scale(1.15); transform: scale(1.15); }

/* CAREER */
/* CONTACT */
#contact iframe { width: 100%; margin-bottom: 30px; }
#contact .contact_info { padding-right: 60px; }
#contact .contact_info .contact_logo { background: url(../images/logo002.png) no-repeat center; width: 210px; height: 81px; background-size: 210px; margin-bottom: 30px; }
#contact .contact_info .contact_info_info { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px #DFE0EB solid; }
#contact .contact_info .contact_info_info .contact_icon { padding-left: 0px; }
#contact .contact_info .contact_info_info li { margin-bottom: 10px; padding-left: 30px; }
#contact .contact_info .contact_info_info li:nth-child(2) { background: url(../images/icons/place.png) no-repeat 0px 6px; }
#contact .contact_info .contact_info_info li:nth-child(3) { background: url(../images/icons/smartphone.png) no-repeat 0px 6px; }
#contact .contact_info .contact_info_info li:nth-child(4) { background: url(../images/icons/email.png) no-repeat 0px 6px; }
#contact .contact_form li { margin-bottom: 15px; }
#contact .contact_form li label { margin-bottom: 10px; display: block; }
#contact .contact_form li input { width: 100%; padding: 10px 20px; }
#contact .contact_form li textarea { width: 100%; padding: 10px 20px; }

/* LINL */
.link_content { overflow: hidden; position: relative; }
.link_content .link_list { padding: 0px 10px; margin-bottom: 15px; position: relative; }
.link_content .link_list div { background: #F5F5F5; }
.link_content .link_list span { width: 60px; height: 60px; padding: 20px; background: #244C75; position: absolute; right: 10px; top: 0px; }
.link_content .link_list a { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; padding: 18px 20px; }
.link_content .link_list a:hover { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; background: #244C75; color: #fff; }

/* DES */
.des_content02 { margin-top: 30px; }
.des_content02 .des_list { padding: 0px 10px; margin-bottom: 30px; transform: translateX(0); overflow: hidden; }
.des_content02 .des_list div.img { overflow: hidden; position: relative; }
.des_content02 .des_list div.img img { width: 100%; margin-bottom: -6px; transition: transform .5s; }
.des_content02 .des_list div.des { padding: 10px 0px; }
.des_content02 .des_list div.des span { display: block; font-size: 18px; color: #244C75; font-weight: bold; }
.des_content02 .des_list:hover div.img:after { width: 100%; height: 100%; }
.des_content02 .des_list:hover div.img img { -webkit-transform: scale(1.15); transform: scale(1.15); }

.des_content { margin-top: 30px; }
.des_content .des_list { padding: 0px 10px; margin-bottom: 30px; transform: translateX(0); overflow: hidden; }
.des_content .des_list div.img { overflow: hidden; position: relative; }
.des_content .des_list div.img img { width: 100%; margin-bottom: -6px; transition: transform .5s; }
.des_content .des_list div.img:before { content: ''; position: absolute; width: 50px; height: 50px; background: url(../images/icons/plus.png) no-repeat center center #326C95; background-size: 18px auto; bottom: 1px; right: 0; z-index: 2; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.des_content .des_list div.img:after { content: ''; position: absolute; width: 0; height: 0; bottom: 0; right: 0; background: rgba(36, 76, 117, 0.3); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.des_content .des_list div.des { padding: 10px 20px; text-align: center; }
.des_content .des_list div.des span { display: block; font-size: 18px; color: #244C75; font-weight: bold; }
.des_content .des_list:hover div.img:before { bottom: 50%; right: 50%; transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); -moz-transform: translate(50%, 50%); -webkit-transform: translate(50%, 50%); border-radius: 100%; border: 6px solid rgba(255, 255, 255, 0.3); width: 70px; height: 70px; }
.des_content .des_list:hover div.img:after { width: 100%; height: 100%; }
.des_content .des_list:hover div.img img { -webkit-transform: scale(1.15); transform: scale(1.15); }

/* PERSON */
.person_content { margin-top: 30px; }
.person_content .person_list { padding: 0px 10px; margin-bottom: 30px; }
.person_content .person_list img { width: 100%; }
.person_content .person_list div { padding: 10px 20px; text-align: center; }
.person_content .person_list div .person_title { display: block; font-size: 18px; color: #244C75; font-weight: bold; }
.person_content .person_list div .person_sub { display: block; font-size: 14px; color: #244C75; }

/* INFO */
.info_content { overflow: hidden; }
.info_content .info_list { padding: 0px 10px; margin-bottom: 15px; }
.info_content .info_list span { background: #244C75; padding: 20px; background: #244C75; color: #fff; font-size: 18px; font-weight: bold; display: block; }
.info_content .info_list ul.textarea { background: #F5F5F5; padding: 20px 20px; }

.info_content_big { overflow: hidden; }
.info_content_big .info_list_big { padding: 0px 10px; margin-bottom: 15px; }
.info_content_big .info_list_big > div { padding: 18px 20px; }
.info_content_big .info_list_big span { background: #244C75; padding: 15px 40px; background: #244C75; color: #fff; font-size: 18px; font-weight: bold; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; }
.info_content_big .info_list_big ul.textarea { background: #F5F5F5; padding: 20px 20px; margin-top: 10px; }
.info_content_big .info_list_big ul.textarea li { background: url(../images/icons/dot.png) no-repeat 0px 6px; padding-left: 20px; }

#banner { /* Dots */ }
#banner .slick-prev, #banner .slick-next { width: 30px; height: 65px; }
#banner .slick-prev { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; background: url(../images/arrow_left001.png) no-repeat; opacity: 0.7; left: 60px; z-index: 999; }
#banner .slick-prev:before { content: ""; }
#banner .slick-prev:hover, #banner .slick-prev:focus { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; background: url(../images/arrow_left001.png) no-repeat; opacity: 1; }
#banner .slick-next { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; background: url(../images/arrow_right001.png) no-repeat; opacity: 0.7; right: 60px; z-index: 999; }
#banner .slick-next:before { content: ""; }
#banner .slick-next:hover, #banner .slick-next:focus { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; background: url(../images/arrow_right001.png) no-repeat; opacity: 1; }
#banner .slick-dotted.slick-slider { margin-bottom: 0px; }
#banner .slick-dots { bottom: 20px; }
#banner .slick-dots li { margin: 0 5px; width: 60px; height: 3px; display: inline-block; }
#banner .slick-dots li button { width: 100%; height: 3px; border-radius: 0px; background: #fff; cursor: pointer; border: 0; outline: 0; padding: 0px; }
#banner .slick-dots li button:hover, #banner .slick-dots li button:focus { outline: 0; }
#banner .slick-dots li button:hover:before, #banner .slick-dots li button:focus:before { opacity: 1; }
#banner .slick-dots li button:before { width: 0; height: 0; display: none; }
#banner .slick-dots li.slick-active button { background: #244C75; }

.pagenum { margin: 60px 0px 0px 0px; text-align: center; overflow: hidden; }
.pagenum li { display: inline-block; vertical-align: top; }
.pagenum li a { transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1); background: #fff; border: 1px #326C95 solid; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; width: 40px; height: 40px; text-align: center; display: inline-block; padding: 6px 0px; margin: 0px 6px; }
.pagenum li a:hover { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; }
.pagenum .btnleft a { background: #fff url(../images/arrow_left_hover.svg) no-repeat center; background-size: 40px; border: 0px #326C95 solid; }
.pagenum .btnleft a:hover { background: #326C95 url(../images/arrow_left.svg) no-repeat center; background-size: 40px; }
.pagenum .btnright a { background: #fff url(../images/arrow_right_hover.svg) no-repeat center; background-size: 40px; border: 0px #326C95 solid; }
.pagenum .btnright a:hover { background: #326C95 url(../images/arrow_right.svg) no-repeat center; background-size: 40px; }
.pagenum a:hover, .pagenum a.on { background: #326C95; color: #fff; }
.pagenum a.on { background: #326C95; color: #fff; }

#btn_top { position: fixed; right: 30px; bottom: -1000px; }

#top { width: 180px; height: 70px; background: url(../images/topup_bg.png) no-repeat right bottom; position: absolute; right: 0px; bottom: 0px; z-index: 888; }
#top span { background: #326C95; padding: 2px 3px; position: absolute; right: 20px; bottom: 0px; z-index: 888; }

.btn a { transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #326C95; padding: 15px 30px; margin: 0px auto 0px auto; text-align: center; position: relative; }
.btn a:hover { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; background: #244C75; color: #fff; }

.btn_more { /* float:right; */ }
.btn_more a { background: #326C95; color: #fff; }
.btn_more a:hover { background: #244C75; color: #fff; }

.btn_center { text-align: center; display: block; margin: 0px auto; }
.btn_center a { width: 200px; }
.btn_center a:hover { width: 220px; }

.red { color: #326C95; }

.green { color: #326C95; }

.m-top30 { margin-top: 30px; }

@keyframes cssAnimation { from { -webkit-transform: scale(1) translate(0px); }
  to { -webkit-transform: scale(1.1) translate(0px); } }
@-webkit-keyframes cssAnimation { from { -webkit-transform: scale(1) translate(0px); }
  to { -webkit-transform: scale(1.1) translate(0px); } }
@-webkit-keyframes scrollFadeUp { from { -webkit-transform: translateY(50px); }
  to { -webkit-transform: translateY(0px); } }
/*Styles for screen 1366px and lower*/
/*Styles for screen 1024px and lower*/
@media screen and (max-width: 1024px) { #banner { height: 100%; }
  #footer { padding: 0px 15px; }
  section { padding: 60px 15px; }
  /* BREADCRUMBS */
  #breadcrumbs { padding: 0px 0px; margin-top: -6px; }
  /* NEWS */
  #news_detail .news_title span { display: block; margin: 20px 0px 0px 0px; }
  /* CONTACT */
  #contact .contact_form { margin-top: 30px; } }
/*Styles for screen 1000px and lower*/
@media screen and (max-width: 1000px) { #menu { display: block; }
  header { position: fixed; }
  header .navbar { padding: 15px 15px 10px 10px; }
  header .navbar-nav { background: #326C95; }
  header nav #logo { width: 160px; height: 40px; background-size: 150px; float: left; }
  header nav #navbarSupportedContent #lan { text-align: center; margin-left: 0px; float: none; display: block; }
  header nav #navbarSupportedContent #lan li { margin: 20px 5px 10px 0px; border-bottom: 1px #686868 solid; }
  header nav #navbarSupportedContent #lan li a { width: 40px; height: 40px; padding: 5px 0px; }
  header nav #navbarSupportedContent .list { width: 100%; display: block; padding: 0px; border-bottom: 1px #686868 solid; text-align: center; }
  header nav #navbarSupportedContent .list > a { padding: 10px 0px; }
  header nav #navbarSupportedContent .list > a:after { display: none; }
  header nav #navbarSupportedContent .l7 { display: none; }
  header nav #navbarSupportedContent .dropdown-toggle::after { display: inline-block; }
  header nav #navbarSupportedContent .dropdown-menu { text-align: center; }
  header nav #navbarSupportedContent .dropdown-menu li a { padding: 10px 0px; border-bottom: 1px #686868 solid; }
  header nav #lan { display: block; }
  header.fixed { background: #fff; padding-top: 0px; }
  header.fixed #menu { display: block; }
  header.fixed #menu span { background: #333; }
  header.fixed nav { padding: 15px 10px; }
  header.fixed nav #logo { background: url(../images/logo002.png) no-repeat center left; }
  header.fixed #lan li { color: #333; }
  header.fixed #lan li a { border: 1px #333 solid; }
  header.open { left: -300px; }
  header.open nav { max-width: 1200px; margin: 0px auto; color: #fff; }
  header.open nav #navbarSupportedContent { display: block; }
  header.open nav #navbarSupportedContent .navbar-nav { width: 300px; height: 100vh; padding: 20px; background: #326C95; text-align: center; position: absolute; top: 0; left: 100%; overflow-y: auto; }
  header.open nav #navbarSupportedContent .list > a { padding: 8px 0px; height: auto; }
  header.open nav #navbarSupportedContent .dropdown-menu li a { padding: 8px 0px; }
  /* CONTACT */
  #contact .contact_info { padding-right: 0px; }
  #footer .footer_nav { margin-top: 30px; }
  .copyright span { position: relative; display: block; margin-top: 6px; right: auto; } }
/*Styles for screen 768px and lower*/
@media screen and (max-width: 768px) { #i_about .textatea { padding: 0px 30px 30px 30px; }
  #i_product .textatea { padding: 0px 30px 30px 30px; }
  #footer .content { display: none; }
  /* SLICK */
  #banner .slick-prev, #banner .slick-next { width: 30px; height: 30px; }
  #banner .slick-prev { background-size: 12px; left: 30px; }
  #banner .slick-next { background-size: 12px; right: 10px; } }
/*Styles for screen 680px and lower*/
@media screen and (max-width: 680px) { #i_about { background: #F5F5F5; }
  #i_about .i_content_title h2 { padding: 10px 0px 10px 0px; }
  #i_product { background: #F5F5F5; }
  #i_product .i_content_title h2 { padding: 10px 0px 10px 0px; }
  .i_product_content .i_product_list { /* margin-top:$w_padding/2; */ }
  .i_product_content .i_product_list div.des { padding: 10px 10px; }
  #banner .banner_page { height: 360px; }
  /* NEWS */
  #news_detail { overflow: hidden; position: relative; }
  #news_detail .content_title02 h2 { font-size: 20px; padding: 0px 0px 0px 90px; }
  /* CONTACT */
  #contact .contact_info .contact_info_info .contact_icon img { width: 100%; }
  #contact .contact_info .fb-page { /* width:100%; */ }
  #banner .banner .item { height: 360px; }
  #banner .banner .item img { top: 50%; left: 50%; width: auto; height: 100%; position: absolute; transform: translate(-50%, -50%); } }
/*Styles for screen 480px and lower*/
@media screen and (max-width: 480px) { .pagenum li a { padding: 8px 0px; margin: 0px 0px; } }

/*# sourceMappingURL=common.css.map */