@charset "utf-8";

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{width:100%; height:auto;}
body{background:#dcdcdc;margin:0; padding:0; width:100%; height:auto; font-size:medium;line-height: 1.6;font-family: "Microsoft JhengHei","arial";word-break: break-word;letter-spacing:0;}
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;}
table{border-collapse:inherit;}

/** 表單預設文字顏色設定 **/
::-webkit-input-placeholder{color:#999999;}
::-moz-placeholder{color:#999999;}
:-ms-input-placeholder{color:#999999;}
input:-moz-placeholder{color:#999999;}
#field2::-webkit-input-placeholder{color:#999999;}
#field3::-webkit-input-placeholder{color:#999999; background:lightgreen; text-transform:uppercase;}
#field4::-webkit-input-placeholder{font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999999;}
#field2::-moz-placeholder{color:#999999;}
#field3::-moz-placeholder{color:#999999; background:lightgreen; text-transform:uppercase;}
#field4::-moz-placeholder{font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999999;}

/** 上版 **/
header{background: url("../images/head_bg02.png")no-repeat left bottom, url("../images/head_bg.jpg") center center;padding: 15px;border-bottom: 3px #243a59 solid;}
.head{max-width: 1280px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
.head .logo{width: 320px;filter: drop-shadow(1px 0 0 #ffffff) drop-shadow(0 1px 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 -1px 0 #ffffff);}
.head .logo a{display: block;}
.head .slogan{font-size: 26px; color: #ffffff;width: auto;font-weight: bold;margin: 0 0 0 30px;letter-spacing: 4px;}
@media screen and (max-width:1000px){
    .head .logo{width: 280px;}
    .head .slogan{font-size: 20px;letter-spacing: 1px;}
}
@media screen and (max-width:767px){
    .head{display: block;}
    .head .logo{width: 240px;margin: 0 auto;}
    .head .slogan{font-size: 18px;text-align: center;text-shadow: 0 0 5px rgba(0,0,0,.8);margin: 10px 0 0 0;}
}
@media screen and (max-width:575px){
    .head .slogan{font-size: 16px;}
}
@media screen and (max-width:374px){
    .head .slogan{font-size: 14px;}
}

/** 內容 **/
main{}
.main{padding:0;}

/** 首頁公司介紹 **/
.i-company-main{padding: 0 15px;overflow: hidden;}
.i-company{max-width: 1280px;margin: 0 auto;display: flex;position: relative;z-index: 1;padding:4vw 0;align-items: center;}
.i-company:after{content: "";display: block;width: 200%; height: 100%;position: absolute;right: -120%;top: 0;background: #ffffff;z-index: -1;}
.i-company-photo{flex: 1;display: flex;flex-wrap: wrap;height: 100%;}
.i-company-photo .i-company-photo01{width: 100%;border-radius: 5px;overflow: hidden;box-shadow: 0 0 15px 0 rgba(0,0,0,.3);}
.i-company-photo .i-company-photo02{width: calc(50% - 5px);margin: 10px 5px 0 0;border-radius: 5px;overflow: hidden;box-shadow: 0 0 15px 0 rgba(0,0,0,.3);}
.i-company-photo .i-company-photo03{width: calc(50% - 5px);margin: 10px 0 0 5px;border-radius: 5px;overflow: hidden;box-shadow: 0 0 15px 0 rgba(0,0,0,.3);}
.i-company-info{flex: 2.2;margin: 0 0 0 4vw ;padding:0;}
.i-company-info .i-company-pic{}
.i-company-info .i-company-pic>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.i-company-info .i-company-pic>ul>li{padding: 0;margin:10px 10px 10px 0;width: calc(100%/5 - 8px);border: 5px #eeeeee solid;box-shadow: 0 0 0 1px #cccccc;border-radius: 5px;overflow: hidden;}
.i-company-info .i-company-pic>ul>li:last-of-type{margin:10px 0;}
.i-company-info .i-company-content{margin: 30px 0 20px 0;}
.i-company-info .i-company-content h2{padding: 0 0 0 15px;margin: 0 0 20px 0;line-height: 1.4;font-weight: bold;font-size: 24px;color: #222222;border-left: 10px #2e4d73 solid;}
.i-company-info .i-company-content h2 span{font-size: 14px;color: #2e4d73;}
.i-company-info .i-company-content .i-company-dep{}
.i-company-info .i-download{display: flex;flex-wrap: wrap; background: #f3f3f3;padding:10px 15px;border-radius: 5px;}
.i-company-info .i-download .i-download-icon{width: 36px;padding: 8px 0;}
.i-company-info .i-download .i-download-title{width: auto;color:#e1461a;;margin: 0 15px;font-weight: bold;font-size: 18px;padding: 8px 0;}
.i-company-info .i-download .i-download-info{flex: 1;}
.i-company-info .i-download .i-download-info>ul{list-style: none;padding: 0;margin: 0;}
.i-company-info .i-download .i-download-info>ul>li{padding: 0;margin: 0;border-bottom: 1px #cccccc dashed;}
.i-company-info .i-download .i-download-info>ul>li:last-of-type{border-bottom: 0;}
.i-company-info .i-download .i-download-info>ul>li a{display: flex;padding:8px 10px;}
.i-company-info .i-download .i-download-info>ul>li a:hover{color: #e1461a;}
.i-company-info .i-download .i-download-info>ul>li h3{flex: 1; padding: 0;margin: 0;line-height: 1.4;font-weight: normal;font-size: 15px;color: #222222;}
.i-company-info .i-download .i-download-info>ul>li:hover h3{color: #e1461a;}
.i-company-info .i-download .i-download-info>ul>li .i-download-url{width: 25px;margin: 0 0 0 15px;}
@media screen and (max-width:1000px){
    .i-company{display: block;padding: 20px 0;}
    .i-company:after{width:calc(100% + 30px);right: -15px;}
	.i-company-photo{display: none;}
    .i-company-info{flex:initial;margin:0;}
    .i-company-info .i-company-content{margin: 20px 0;}
}
@media screen and (max-width:575px){
    .i-company-info .i-company-pic>ul>li{margin:5px 5px 5px 0;width: calc(100%/5 - 4px);border: 3px #eeeeee solid;}
    .i-company-info .i-company-pic>ul>li:last-of-type{margin:5px 0;}
    .i-company-info .i-download .i-download-title{padding: 12px 0 ;}
    .i-company-info .i-download .i-download-info{flex: initial;width: 100%;margin: 10px 0 0 0;}
}

/** 下版 **/
footer{background:url("../images/footer_bg02.png")no-repeat right bottom, url("../images/footer_bg.gif");padding:0 15px}
.footer{max-width: 1280px;margin: 0 auto;padding: 15px 0;display: flex;align-items: center;}
.footer .f-logo{width: 240px;filter: drop-shadow(1px 0 0 #ffffff) drop-shadow(0 1px 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 -1px 0 #ffffff);}
.footer .f-info{flex: 1;margin: 0 0 0 30px;font-size: 15px; color: #222222;}
.footer .f-info>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.footer .f-info>ul>li{padding: 0;margin:5px 10px;width:calc(100%/2 - 20px);display: flex;}
.footer .f-info>ul>li a{display: inline-block;color: #222222;}
.footer .f-info>ul>li a:hover{color: #e1461a;}
.footer .f-info>ul>li .f-icon{width: 28px;height: 28px; margin: 0 10px 0 0;background: #ffffff;border-radius: 50px;padding: 6px;display: flex;align-items: center;justify-content: center;}
.footer .f-info>ul>li .f-content{flex: 1;}
@media screen and (max-width:1000px){
    .footer .f-logo{width: 200px;}
    .footer .f-info>ul>li{margin:5px 0;width:100%;}
}
@media screen and (max-width:767px){
    .footer{display: block;}
    .footer .f-info{margin: 20px 0 0 0;}
}