@charset "utf-8";

/*Noto Sans TC*/
@import url(https://fonts.google.com/specimen/Noto+Sans+TC);

/*html {font-size: 100%;}*/
body { font-size:16px; font-family: "Noto Sans TC", "微軟正黑體", Arial, Helvetica; font-size: 100%; color:#000; background-color:#fff; margin:0; padding:0; word-wrap: break-word; }
html, body {height: 100%;}
a {text-decoration:none;}
:hover {transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;}
div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, input, table, td, th, img, fieldset, figure { margin: 0; padding: 0; border: none; box-sizing: border-box;}
img {border: none;}
ul, li {list-style: none;}

:focus{ outline: 4px dashed #980000; z-index: 99999; }
.top_nav a:focus{outline: 4px dashed #ffeb9d;}
html:focus, body:focus, div:focus{ outline: none;}
#main_content{}
.fL {float:left;}
.fR {float:right;}
.tL {text-align:left;}
.tR {text-align:right;}
.tC {text-align:center;}
.tB { font-weight: bold;}
.clr {clear:both;}
h2, .h2{ font-size: 1.875rem; line-height:1.5em; font-weight: bold;}
h3, .h3 { font-size:1.25rem; line-height:1.5em; font-weight: bold;}
p{ font-size: 1rem; line-height: 1.5;}
/*  0.8em=12px ; 2.4em=30px ; */


/*文字顏色*/


/*無障礙*/
.sr-only { position: absolute; width: 0.063rem; height: 0.063rem; padding: 0.4rem; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; z-index: 1000000; color: #222; background-color: #dd81a3;}
.sr-only:active, .sr-only:focus { position: absolute; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; outline:none;}

.accesskey{ font-size:1.0em; height:20px; width:15px; z-index:1; margin:0; }
.accesskey a{ color:#e0e0e0;}
.top_nav_in .accesskey{ margin-right: 15px;}
.top_nav_in .accesskey a{ color: #d6bb94;}
.main .accesskey{ margin-bottom: 10px;}


/*頁面設定*/
.wrapper{ position: relative;}
.pagesize{ width: 1000px; padding: 0 20px 20px 20px; margin: 0 auto;}

/*header*/
.header{  background-color: #eee;}
.header_in{ width: 1000px; height: 60px; margin: 0 auto; position: relative;}
h1{ width: 140px; height: 42px; background: url(../images/logo.svg) no-repeat; background-size: 140px auto; position: absolute; left: 20px; top: 50%; margin-top: -21px;}
h1 a{ width: 100%; height: 100%; display: block; font-size: 0; line-height: 0; overflow: hidden;}
a.home{ color: #980038; font-size: 1.125rem; position: absolute; right: 20px; top: 20px;}
a.home::before{ content: ''; width: 16px; height: 16px; background: url(../images/icon_home.png) no-repeat; background-size: 16px auto; display: inline-block; margin-right: 6px;}
.top_nav{ width: 100%; background-image: linear-gradient( to right, #aa8420 0%, #980038 100%, #FFBAC3 100%);}
.top_nav_in{ width: 1000px; margin: 0 auto; height: 50px; padding: 0 20px; color: #fff; display: flex; justify-content: center; line-height: 50px;}
ul.nav{ display: flex;}
ul.nav li{ font-size: 1.125rem; margin-right: 30px; line-height: 50px;}
ul.nav li a{ color: #fff;}
ul.nav li:hover a, ul.nav li.on a{ color: #ffeb9d;}
ul.nav li:last-child{ margin-right: 0;}
ul.nav li::after{ content: ''; width: 1px; height: 20px; background-color: #fff; display: inline-block; vertical-align: middle; margin-left: 30px;}
ul.nav li:last-child::after{ display: none;}

/*標題*/
h2.headline{ color: #980038; border-bottom: 1px solid #980038; padding-bottom: 15px; margin-bottom: 30px;}
h2.headline span{ position: relative;}
h2.headline span::after{ content: ''; width: 100%; height: 5px; background-color: #980038; position: absolute; left: 0; bottom: -16px;}
.hotkey h3{ }
ul.customer_s h3{ color: #8c6705; margin-bottom: 35px;}
.map_area h3{ color: #8c6705; margin-bottom: 5px;}
.system h3{ background-color: #eb6100; color: #fff; font-size: 1.125rem; font-weight: bold; padding: 0 15px; line-height: 35px; display: inline-block; margin-bottom: 10px;}

/*main*/
.main{}
.intro{ width: 960px; height: 320px; background: url(../images/intro_bg.jpg) no-repeat; position: relative;}
.intro .txtBox{ width: 400px; position: absolute; top: 55px; left: 60px; color: #fff;}
.intro h2{ font-size: 1.875rem; margin-bottom: 20px;}
.intro p{ font-size: 1.125rem;}
ul.bot_nav{ display: flex;}
ul.bot_nav li{ width: 25%; color: #fff; padding: 140px 25px 30px 25px; position: relative;}
ul.bot_nav li:nth-child(1){ background: #fb8700 url(../images/bot_nav_bg1.png) top 30px left 25px no-repeat; background-size: auto 35px;}
ul.bot_nav li:nth-child(2){ background: #eb6100 url(../images/bot_nav_bg2.png) top 30px left 25px no-repeat; background-size: auto 35px;}
ul.bot_nav li:nth-child(3){ background: #fb8700 url(../images/bot_nav_bg3.png) top 30px left 25px no-repeat; background-size: auto 35px;}
ul.bot_nav li:nth-child(4){ background: #eb6100 url(../images/bot_nav_bg4.png) top 30px left 25px no-repeat; background-size: auto 35px;}
ul.bot_nav li a{ font-size: 0; line-height: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
ul.bot_nav .tit{ font-size: 1.625rem;}
ul.bot_nav .tit_en{ font-size: 1rem;}

.content{ margin-bottom: 50px;}
.content:last-child{ margin-bottom: 0;}
.content p{ line-height: 1.8;}
.block{ margin-bottom: 20px;}
.block:last-child{ margin-bottom: 0;}
.hotkey p{ color: #eb6100;}

.bot_area{ background: url(../images/divider.png) no-repeat; background-size: 100% auto; padding-top: 50px;}
ul.bot_nav_btn{ display: flex; justify-content: space-between;}
ul.bot_nav_btn li{ flex: 0 0 23%; height: 50px; line-height: 50px; text-align: center; background-color: #8c6705; color: #fff; font-size: 1.25rem; border-radius: 5px; box-shadow: 0px 5px 0px 0px #BBA66C; position: relative;}
ul.bot_nav_btn li:hover{ box-shadow: 0px 0px 0px 0px #BBA66C; top: 5px; transition: none;-moz-transition: none;-webkit-transition: none;}
ul.bot_nav_btn li a{ font-size: 0; line-height: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}

/*交易系統介紹*/
ul.system_list{}
ul.system_list li{ border-radius: 20px; border: 1px solid #b9b9b9; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
ul.system_list li:last-child{ margin-bottom: 0;}
ul.system_list li > div:first-child{ min-height: 100px; flex: 1 1 100%; border-right: 1px solid #bdbdbd; padding-right: 30px; padding-left: 110px; position: relative; display: flex; align-items: center;}
ul.system_list li > div:last-child { flex: 0 0 180px; padding-left: 30px;}

ul.system_list li > div:first-child .sys_pic{ position: absolute; left: 0; top: 50%; margin-top: -50px;}
ul.system_list li > div:first-child .sys_pic img{ width: 100px; height: auto;}
ul.system_list li > div:first-child .tit{ color: #980038; font-size: 1.125rem; font-weight: bold;}
ul.system_list .btn_download{ background-color: #980038; color: #fff; width: 150px; height: 40px; line-height: 40px; text-align: center; border-radius: 99em; position: relative;}
ul.system_list .btn_download::after{ content: ''; width: 18px; height: 18px; background: url(../images/icon_download.png) no-repeat; background-size: 18px auto; display: inline-block; margin-left: 10px; vertical-align:sub;}
ul.system_list .btn_download a{ font-size: 0; line-height: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}

/*服務據點*/
.map_area{ position: relative; padding-bottom: 30px;}
.googleMap{ width: 580px; height: 380px;}
.googleMap iframe{ width: 100%; height: 100%;}
.detail{ border-top: 5px solid #eb6100; background-color: #fff; width: 400px; height: 380px; padding: 0 40px; position: absolute; bottom: 0; right: 0; display: flex; align-content: center; flex-wrap: wrap; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);}
.detail > div { flex: 0 0 100%; margin-bottom: 25px; text-align: center;} 
.detail > div:last-child { margin-bottom: 0;}
.detail a.btn_link{ width: 150px; height: 45px; line-height: 45px; text-align: center; background-color: #980038; color: #fff; border-radius: 99em; font-size: 1.125rem; display: block; margin: 0 auto;}

/*客戶服務*/
ul.customer_s{ display: flex; justify-content: space-between;}
ul.customer_s li{ flex: 0 0 24%; border: 1px solid #d5d5d5; padding: 135px 30px 30px 30px; text-align: center;}
ul.customer_s li:nth-child(1){ background: url(../images/customer_s_bg1.png) center top 60px no-repeat; background-size: 40px auto;}
ul.customer_s li:nth-child(2){ background: url(../images/customer_s_bg2.png) center top 60px no-repeat; background-size: 40px auto;}
ul.customer_s li:nth-child(3){ background: url(../images/customer_s_bg3.png) center top 60px no-repeat; background-size: 40px auto;}
ul.customer_s li:nth-child(4){ background: url(../images/customer_s_bg4.png) center top 60px no-repeat; background-size: 40px auto;}
ul.customer_s li p{ color: #222;}
ul.customer_s li a{ color: #980038; text-decoration: underline;}
ul.customer_s li a:hover{ letter-spacing: 2px; font-weight: bold;}

/*footer*/
.footer{ width: 100%;  background-color: #980038;}
.footer_in{ width: 1000px; margin: 0 auto; padding: 20px 190px 20px 20px; color: #fff; position: relative;}
.footer_in p{ font-size: 0.875rem; line-height: 1.8;}
.footer_in .aTag{ width: 142px; height: 50px; position: absolute; top: 20px; right: 20px;}
.footer_in .aTag a{ width: 100%; height: 100%; display: block;}
.footer_in .aTag img{ width: 100%; height: auto;}
.footer_in .info{ }
.footer_in .info p{ line-height: 2.0;}
.footer_in .info p a{ color: #fff;}
.footer_in .info p a:hover{ text-decoration: underline;}

@media screen and (max-width: 1200px){
    .header_in{ width: 100%;}
    .top_nav_in{ width: 100%;}
    .pagesize{ width: 100%;}
    .footer_in{ width: 100%;}
    .intro{ width: 100%; background-size: cover; background-position: top center;}

}

@media screen and (max-width: 767px){

    /*header*/
    .top_nav_in{ height: auto; padding: 10px 20px;}
    .top_nav_in .accesskey{ display: none;}
    ul.nav{ flex-wrap: wrap;}
    ul.nav li{ margin-right: 15px; line-height: 1.6;}
    ul.nav li::after{ margin-left: 15px;}

    /*標題*/
    h2.headline{ font-size: 1.625rem; padding-bottom: 10px; margin-bottom: 20px;}
    h2.headline span::after{  bottom: -12px;}

    /*main*/
    .intro{ height: 325px; background: url(../images/intro_bg_m.jpg) center center no-repeat; background-size: cover; position: inherit; padding: 30px 20px 20px 20px;}
    .intro .txtBox{ width: 100%; position: inherit;}
    .intro .txtBox h2{ text-align: center;}

    ul.bot_nav{ flex-wrap: wrap;}
    ul.bot_nav li{ width: 100%; height: 90px; padding: 0 25px; display: flex; align-items: center; justify-content: flex-end; text-align: right;}
    ul.bot_nav li:nth-child(1), ul.bot_nav li:nth-child(2), ul.bot_nav li:nth-child(3),ul.bot_nav li:nth-child(4){ background-position: center left 25px; background-size: auto 26px;}

    .bot_area{ padding-top: 30px;}
    ul.bot_nav_btn{ flex-wrap: wrap;}
    ul.bot_nav_btn li{ flex: 0 0 100%; margin-bottom: 15px;}

    /*交易系統介紹*/
    ul.system_list li{ flex-wrap: wrap; }
    ul.system_list li > div:first-child{ border-right: none; border-bottom: 1px solid #bdbdbd; padding-right: 0; padding-bottom: 20px;}
    ul.system_list li > div:last-child { flex: 0 0 100%; padding-left: 0; padding-top: 20px;}
    ul.system_list li > div:first-child p{word-break: break-all}
    ul.system_list .btn_download{ width: 100%;}

    /*服務據點*/
    .map_area{ position: inherit; padding-bottom: 0;}
    .googleMap{ width: 100%; height: 300px;}
    .detail{ width: 100%; height: auto; padding: 30px 20px; position: inherit;}

    /*客戶服務*/
    ul.customer_s{ flex-wrap: wrap;}
    ul.customer_s li{ flex: 0 0 48%; margin-bottom: 15px; padding: 130px 10px 20px 10px;}
    ul.customer_s li:nth-child(1), ul.customer_s li:nth-child(2), ul.customer_s li:nth-child(3), ul.customer_s li:nth-child(4){ background-position: center top 50px;}
    
    /*footer*/
    .footer_in{ padding: 20px; position: inherit;}
    .footer_in p{ text-align: center; margin-bottom: 10px;}
    .footer_in .aTag{ position: inherit; margin: 0 auto;}

}

@media screen and (max-width: 375px){ 
    /*header*/
    ul.nav li{ margin-right: 12px;}
    ul.nav li::after{ margin-left: 12px;}
}