@charset "utf-8";

/** 文字icon **/
@import url(font-awesome.min.css);

/** 手機選單 **/
@import url(slicknav.css) screen and (max-width:767px);

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{width:100%; height:auto;font-size: 10px;}
body{background:#ffffff; margin:0; padding:0; width:100%; height:auto; font-size:1.6rem;line-height: 1.6;font-family: "微软雅黑", "宋体", "Helvetica Neue", Helvetica, Arial, "Noto Sans TC", sans-serif;word-break: break-word;letter-spacing: .5px;}
a,a:hover{text-decoration:none;transition: all 0.5s ease 0s;cursor: pointer;}
img{border:0; vertical-align:middle; max-width:100%;}
input{vertical-align:middle;border-radius: 0; }
input:focus, select:focus, textarea:focus, button:focus{outline:0;}
/** 取消ios按鈕樣式 **/
input[type="button"], input[type="submit"], input[type="reset"], button[type="button"], button[type="submit"], button[type="reset"], a[type="button"], a[type="submit"], a[type="reset"], textarea{border-radius: 0; -webkit-appearance: none;-moz-appearance: none;appearance: none;}
.slicknav_menu{display:none;}
table{border-collapse:inherit;}
p{margin: 0 0 15px 0;}

/** 手機選單、選單 色塊-變色 **/
.b-color, .slicknav_menu{}
.slicknav_icon-bar{background-color:#222222;}
.b-color>li:hover, .b-color>li>ul>li>a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover{color: #0054a7;}
.border-color{border-left:7px #A0A0A0 solid;}
.slicknav_nav .slicknav_arrow{font-family:Arial;position: absolute;top: 0;right:0;font-size: 12px;width: 50px; height:55.59px;display: flex;align-items: center; justify-content: center;padding:10px ;}

/** 上版 **/
header{background:#ffffff;padding: 15px;position: fixed;top: 0;left: 0;width: 100%;z-index: 10000;}
.head-main{display:flex;align-items: flex-end;position: relative;}
.head-main .logo-main{height:auto;color: #0054a7;}
.head-main .logo-main a{display: flex;align-items:flex-end;;color: #0054a7;}
.head-main .logo-main .logo{width: 175px;margin: 0 15px 0 0;}
.head-main .logo-main .logo img{width:100%; height:auto;}
.head-main .logo-main .logo-font{width: auto;}
.head-main .logo-main .logo-font .logo-font-tc{font-size: 1.6rem;}
.head-main .logo-main .logo-font .logo-font-en{font-size: 1.4rem;line-height: 1;font-weight: bold;}
.lang{position: absolute;top: -15px;right: 30px;font-size: 1.2rem; color: #ffffff;letter-spacing: 0;font-weight: bold;}
.lang a{display: block;padding: 5px 8px;background: #0077bd; color: #ffffff;}
.lang a:hover{opacity: .75;}
@media screen and (max-width:1024px){
    .lang{right: 15px;}
}
@media screen and (max-width:767px){
    header{padding: 0;}
    .head-main{position:inherit;}
	.head-main .logo-main{position: fixed;top: 12.5px;left: 15px;z-index: 10000;}
    .head-main .logo-main .logo{width: 120px;margin: 0 10px 0 0;}
    .head-main .logo-main .logo-font .logo-font-tc{font-size: 1.4rem;}
    .head-main .logo-main .logo-font .logo-font-en{font-size: 1.22rem;}
    .lang{position: fixed;top: 15.5px;right: 62px;z-index: 10000;}
}
@media screen and (max-width:575px){
	.head-main .logo-main{top: 15px;}
    .head-main .logo-main .logo{width: 100px;}
    .head-main .logo-main .logo-font{letter-spacing: 0;}
    .head-main .logo-main .logo-font .logo-font-tc{font-size: 1.2rem;}
    .head-main .logo-main .logo-font .logo-font-en{font-size: 1.1rem;}
}
@media screen and (max-width:374px){
	.head-main .logo-main{top: 17px;}
    .head-main .logo-main .logo{width: 70px;margin: 0 8px 0 0;}
    .head-main .logo-main .logo-font .logo-font-tc{font-size: 1rem;}
    .head-main .logo-main .logo-font .logo-font-en{font-size: .92rem;}
}

/** 主選單與下拉 **/
nav{flex: 1;padding:15px 15px 0 15px;}
.menu{ padding:0; list-style:none; position:relative; margin:0 ; display:flex;justify-content: flex-end;}
.menu>li{color:#000000; text-align:center; position:relative;cursor:pointer; padding:0; margin:0;}
.menu>li>a{color:#000000; display:block; padding:0 15px; margin:0;}
.menu>li>a:hover{color: #0063be;}
@media screen and (max-width:1024px){
    nav{padding:15px 0 0 15px;}
}
@media screen and (max-width:767px){
    nav{padding:0;}
	#menu{display:none;}
	.slicknav_menu{background: #ffffff; display:block;position: relative;position: fixed;top: 0;left: 0;width: 100%;z-index: 10000;}
}

/** 配置 **/
.warpper{overflow: hidden;}
.main{}

/** 首頁資訊 **/
.i-content-main{min-height: calc(100vh - 80px - 70px - 60px);display: flex;flex-direction: column;justify-content: center;padding: 0 0 11vw 0;}
.i-content{color: #ffffff;}
.i-content h1{padding: 0;margin: 0 0 15px 0;font-size: 3.2rem;line-height: 1.4;font-weight: bold;}
.i-content .i-content-info{font-size: 2rem;}
.i-menu{margin: 1.8vw 0 0 0;}
.i-menu>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.i-menu>ul>li{padding: 0;margin: 1.8vw;font-size: 2.4rem;color: #ffffff;width: 13.2rem;text-align: center;}
.i-menu>ul>li a{display:flex;align-items: center;justify-content: center;color: #ffffff;background: rgba(0, 191, 183, 0.8);zoom: 1;border-radius: 50%;overflow: hidden;width: 13.2rem;height: 13.2rem;padding: 15px;}
.i-menu>ul>li a:hover{background:linear-gradient(53.5deg, rgba(0, 191, 183, 0.8) 0%, rgba(0, 84, 167, 0.8) 50%, rgba(0, 84, 167, 0.8) 100%);}
@media screen and (max-width:1024px){
    .i-content-main{min-height: calc(100vh - 80px - 62px - 60px);}
    .i-content h1{font-size: 2.8rem;}
    .i-content .i-content-info{font-size: 1.8rem;}
    .i-menu{margin: 40px 0 0 0;}
    .i-menu>ul>li{margin: 15px;font-size: 2rem;width: 12rem;}
    .i-menu>ul>li a{width: 12rem;height: 12rem;}
}
@media screen and (max-width:767px){
    .i-content-main{min-height: calc(100vh - 60px - 62px - 60px);}
}
@media screen and (max-width:575px){
    .i-content-main{min-height: calc(100vh - 60px - 76.58px - 60px);}
    .i-menu{margin: 20px 0 0 0;}
    .i-menu>ul>li{margin:15px 15px 15px 0;width: 27vw;}
    .i-menu>ul>li:nth-child(3n){margin:15px 0;}
    .i-menu>ul>li a{width: 27vw;height: 27vw;padding: 8px;}
}
@media screen and (max-width:374px){
    .i-menu>ul>li{margin:10px 10px 10px 0;font-size: 1.8rem;}
    .i-menu>ul>li:nth-child(3n){margin:10px 0;}
    .i-menu>ul>li a{padding: 5px;}
}

/** 內頁banner **/
.inside-banner{}
.inside-banner .banner-title{margin: 0 0 20px 0;width: 100%;font-size: 2.4rem;padding: 0 0 10px 0;text-align: center; color: #ffffff;font-weight:bold;border-bottom: 1px solid #0054a7;}
.content-body-main02 .inside-banner .banner-title{color: #0054a7;}
@media screen and (max-width:1024px){
    .inside-banner .banner-title{font-size: 2.2rem;}
}

/** 內頁架構 **/
.content-body-main{background-position: center;background-repeat: no-repeat;background-size: cover;padding: 30px 15px;min-height: calc(100vh - 80px - 70px);margin: 80px 0 0 0;}
.content-body{max-width: 1430px;margin: 0 auto;width: 75%;}
.page-title{margin: 0 0 20px 0;width: 100%;font-size: 2.4rem;padding: 0;text-align: center; color: #0054a7;font-weight:bold;}
.page-title02{margin: 0 0 20px 0;width: 100%;font-size: 3.6rem;padding: 0;text-align: center; color: #0054a7;font-weight:bold;}
.page-main{ color:#ffffff;font-size: 1.88rem;font-weight: 300;}
.page-main a{color:#ffffff;text-decoration: underline;}
.page-main a:hover{opacity: .75;}
.content-body-main02 .page-main{ color:#0054a7;}
.content-body-main02 .page-main a{ color:#0054a7;}
.font-title001{padding: 0 0 0 10px;margin:0 0 20px 0;line-height: 1.4;border-left: 3px solid #0054a7;font-size: 2.4rem;color: #ffffff;font-weight: 400;}
.back{color: #ffffff;display: flex;justify-content: center;}
.back a{display: block;padding: 5px 20px;background: #0054a7; color: #ffffff;}
.back a:hover{opacity: .75;}
@media screen and (max-width:1024px){
    .content-body-main{min-height: calc(100vh - 80px - 62px);}
    .page-title{font-size: 2.2rem;}
    .page-title02{font-size: 3rem;}
    .page-main{font-size: 1.7rem;}
    .font-title001{margin:0 0 15px 0;font-size: 2.2rem;}
}
@media screen and (max-width:767px){
    .content-body-main{margin: 60px 0 0 0;min-height: calc(100vh - 60px - 62px);}
    .content-body{width: 100%;}
}
@media screen and (max-width:575px){
    .content-body-main{min-height: calc(100vh - 60px - 76.58px);}
}

/** 製品介紹 **/
.pro-content{}
.pro-link{margin: 20px 0 5vw 0;}
.pro-link>ul{list-style: none;padding: 0;margin: 0;}
.pro-link>ul>li{padding: 0;margin:5px 0;}
.pro-link>ul>li a{display: block;color: #ffffff;text-decoration: underline;}
.pro-link>ul>li a:hover{opacity: .75;}
.pro-link>ul>li i{margin: 0 0 0 10px;}
@media screen and (max-width:1024px){
    .pro-link{margin: 15px 0 30px 0;}
}

/** 公司簡介 **/
.company-content{margin: 25px auto 0 auto;max-width: 1200px;}
.company-content>ul{list-style: none;padding: 0;margin: 0;}
.company-content>ul>li{padding: 0;margin: 0;width: 100%;}
.googlemap{position: relative;padding-bottom: 25%;padding-top: 30px;height: 0;overflow: hidden;margin: 10px 0 0 0;}
.googlemap iframe {position: absolute;top:0;left: 0;width: 100%;height: 100%;}
@media screen and (max-width:1024px){
    .company-content{margin: 15px auto 0 auto;}
	.googlemap{padding-bottom: 35%;}
}
@media screen and (max-width:767px){
	.googlemap{padding-bottom: 45%;}
}
@media screen and (max-width:575px){
	.googlemap{padding-bottom: 55%;}
}

/** 下版 **/
footer{background:#0054a7;padding: 24px 40px;}
footer .footer{font-size: 1.4rem; color: #ffffff;display: flex;flex-direction: row-reverse; align-items: center;}
footer .footer .f-menu{width: auto}
footer .footer .f-menu>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: flex-end;}
footer .footer .f-menu>ul>li{width: auto;padding: 0;margin: 0 0 0 15px;}
footer .footer .f-menu>ul>li a{color: #ffffff;}
footer .footer .f-menu>ul>li a:hover{opacity: .75;}
footer .footer .copyright{flex: 1;letter-spacing: 0;}
@media screen and (max-width:1024px){
	footer{padding: 20px 15px;}
    footer .footer .copyright{font-size: 1.2rem;}
}
@media screen and (max-width:575px){
    footer{padding:15px;}
	footer .footer{display: block;text-align: center;}
    footer .footer .f-menu{width: 100%;}
    footer .footer .f-menu>ul{justify-content:center;}
    footer .footer .f-menu>ul>li{margin: 0 10px;}
    footer .footer .copyright{flex: initial;width: 100%;margin: 5px 0 0 0;}
}