@charset "utf-8";

/** font **/
@import url(Inter+Tight-Noto+Sans+TC.css);

/** 視差 **/
@import url(aos.css);

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{width:100%; height:auto;}
body{background:#ffffff; margin:0; padding:0; width:100%; height:auto; font-size:18px;line-height: 1.6;font-family: "Inter Tight", "Noto Sans TC", sans-serif;word-break: break-word;letter-spacing: 0.5px; overflow-y: scroll;}
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;}

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

/** 上版 **/
header{position:absolute;top: 0;left: 0;width: 100%;padding: 3.2vw 15px ;}
.head{}
.title-main{text-align: center;text-shadow: 0.15625vw 0.15625vw 0 #1e4106;}
.title{font-size: 4.6875vw;font-weight: 700;padding: 0;margin: 0;line-height: 1.2;color: #ffffff;letter-spacing: 6px;text-transform: uppercase;}
.title-sub{font-size: 3.125vw;font-weight: 700;padding: 0;margin:3px 0 0 0;line-height: 1.2;color: #ffffff;letter-spacing: 4px;text-transform: uppercase;}
@media screen and (max-width:1024px){
    header{padding:30px 15px ;}
    .title-main{text-shadow: 2px 2px 0 #1e4106;}
    .title{font-size: 60px;letter-spacing: 6px;}
    .title-sub{font-size: 40px;letter-spacing: 4px;}
}
@media screen and (max-width:767px){
    .title{font-size:46px;letter-spacing: 3px;}
    .title-sub{font-size: 30px;letter-spacing: 2px;}
}
@media screen and (max-width:575px){
    header{padding:20px 15px ;}
    .title{font-size:45px;letter-spacing: 2px;}
    .title-sub{font-size: 28px;}
}
@media screen and (max-width:374px){
    .title{font-size:40px;}
    .title-sub{font-size: 22px;}
}

/** 選單 **/
.banner-menu{}
.banner-menu img[usemap] {border: none;height: auto;max-width: 100%;width: auto;}
@media screen and (max-width:1024px){
    .banner-menu{display: none;}
}

/** 手機選單 **/
nav{display: none;}
@media screen and (max-width:1024px){
    nav{height: 100vh; background-position: center;background-repeat: no-repeat;background-size: cover;padding: 183px 15px 14vw 15px;display: flex;flex-wrap: wrap;align-content: center;justify-content: center;}
    nav>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;width: 100%;}
    nav>ul>li{width: calc(100%/2 - 30px);padding: 0;margin:15px;text-shadow: 1px 0 4px rgba(0,0,0,.9);font-size: 24px; color: #ffffff;}
    nav>ul>li a{display: flex;padding: 15px;color: #ffffff;box-shadow: 0 0 15px 0 rgba(0,0,0,.3) inset;border: 3px #d0d0d0 solid;}
    nav>ul>li:nth-child(1) a{background: rgba(211,108,108,.5);}
    nav>ul>li:nth-child(2) a{background: rgba(246,210,139,.5);}
    nav>ul>li:nth-child(3) a{background: rgba(167,215,178,.5);}
    nav>ul>li:nth-child(4) a{background: rgba(125,168,179,.5);}
    nav>ul>li .menu-icon{width: 74px;margin: 0 15px 0 0;filter:drop-shadow(1px 0px 4px rgba(0,0,0,.6));}
    nav>ul>li .menu-title{flex: 1;display: flex;align-items: center;}
    nav>ul>li:nth-child(1) a:hover{background: rgba(211,108,108,.8);}
    nav>ul>li:nth-child(2) a:hover{background: rgba(246,210,139,.8);}
    nav>ul>li:nth-child(3) a:hover{background: rgba(167,215,178,.8);}
    nav>ul>li:nth-child(4) a:hover{background: rgba(125,168,179,.8);}
}
@media screen and (max-width:767px){
    nav{padding: 155px 15px 10vw 15px;}
    nav>ul>li{width:100%;margin:10px 0;}
    nav>ul>li .menu-icon{width: 70px;}
    nav>ul>li{font-size: 22px;}
}
@media screen and (max-width:575px){
    nav{padding: 130px 15px 10vw 15px;}
    nav>ul>li .menu-icon{width: 66px;}
    nav>ul>li{font-size: 20px;}
}
@media screen and (max-width:374px){
    nav>ul>li{margin:5px 0;}
}

/** 內頁架構 **/
.content-body{max-width:1420px; margin:0 auto; background:#ffffff; padding:50px 0;}
.page-title{font-size:24px; color:#222222; padding:0; margin:5px 0 25px 0;}
.page-title i{margin: 0 8px 0 0;}
.page-title i img{width: 40px;}
.page-main{padding:0; font-size:18px; color:#222222;}
@media screen and (max-width:1200px){
    .content-body{padding:30px 0;}
}
@media screen and (max-width:1024px){
    .page-title{font-size:22px; }
    .page-title i img{width: 36px;}
}

/** 建構中 **/
.construction{height: 100vh; background-position: center;background-repeat: no-repeat;background-size: cover;padding: 305.88px 15px 14vw 15px;display: flex;flex-wrap: wrap;align-content: center;justify-content: center;}
.construction-content{text-shadow: 1px 0 4px rgba(0,0,0,.9);font-size: 30px;font-weight: 500; display:block;padding: 15px;color: #ffffff;box-shadow: 0 0 15px 0 rgba(0,0,0,.3) inset;border: 3px #d0d0d0 solid;background: rgba(118,132,27,.5);width: 100%;max-width: 500px; margin: 0 auto;text-align: center;}
.construction-content .construction-icon{width: 100%;padding: 15px; margin: 0 0 15px 0;filter:drop-shadow(1px 0px 4px rgba(0,0,0,.6));}
.construction-content .construction-title{width: 100%; border-top: 3px #d0d0d0 solid;padding: 15px;}
@media screen and (max-width:1024px){
    .construction{padding: 183px 15px 14vw 15px;}
    .construction-content{font-size: 28px; }
    .construction-content .construction-icon{padding: 15px 0;}
    .construction-content .construction-title{padding: 15px 0;} 
}
@media screen and (max-width:767px){
    .construction{padding: 155px 15px 10vw 15px;}
    .construction-content{font-size: 26px; }
}
@media screen and (max-width:575px){
    .construction{padding: 130px 15px 10vw 15px;}
    .construction-content{font-size: 24px; }
}

/** 下版 **/
footer{background:#f9f9f9;padding: 0 15px;border-top: 1px #cccccc solid;letter-spacing: 1px;}
footer .footer{max-width:1420px; margin:0 auto;}
.f-content{display: flex;flex-wrap: wrap; align-items: center;padding: 40px 0;}
.f-contact{flex: 1;}
.f-contact>ul{list-style: none;padding: 0;margin: 0;}
.f-contact>ul>li{width: 100%;display: flex;padding: 0;margin: 15px 0;}
.f-contact>ul>li .f-contact-icon{width: 22px;margin: 0 10px 0 0; }
.f-contact>ul>li .f-contact-content{flex: 1; padding:2px 0;margin: 0;font-weight: 400;line-height: 1.4;color: #222222;font-size: 18px;}
.f-contact>ul>li .f-contact-content a{display: inline-block;color: #222222;}
.f-contact>ul>li .f-contact-content a:hover{color: #1c7c00;}
.f-platform-main{display: flex;align-items: flex-end; width: 640px;margin: 0 40px;}
.f-platform-main .f-platform{flex: 1;text-align: center;margin: 15px 35px 15px 0;} 
.f-platform-main .f-platform a{display: block;color: #000000;} 
.f-platform-main .f-platform .logo{width: auto; margin: 0 auto;} 
.f-platform-main .f-platform .logo img{mix-blend-mode:darken;} 
.f-platform-main .f-platform .f-platform-title{padding: 0;margin:15px 0 0 0;font-weight: 400;line-height: 1.4;color: #000000;font-size: 24px;letter-spacing: 2px;} 
.f-platform-main .f-platform-btn-main{flex: 1; display: block;font-size: 32px; color: #ffffff;font-weight: 500;}
.f-platform-main .f-platform-btn-main .f-platform-btn{background-repeat: no-repeat;background-position: center center;background-size: cover;padding: 15px;border-radius: 10px ;overflow: hidden;text-align: center;letter-spacing: 6px;margin: 15px 0;box-shadow: 1px 0 15px 0 rgba(0,0,0,.2);}
.f-platform-main .f-platform-btn-main .f-platform-btn a{padding:10px;color: #ffffff;text-shadow: 1px 0 3px rgba(0,0,0,.6); display: block;width: 100%;border-radius: 10px ;overflow: hidden;box-shadow: 1px 0 15px 0 rgba(0,0,0,.3);}
.f-platform-main .f-platform-btn-main .f-platform-btn a.f-platform-btn01{background-color: rgba(142,162,123,.7);}
.f-platform-main .f-platform-btn-main .f-platform-btn a.f-platform-btn02{background-color: rgba(138,166,174,.7);}
.f-platform-main .f-platform-btn-main .f-platform-btn a:hover{color: #222222;text-shadow: 1px 0 3px rgba(0,0,0,0);  background: rgba(255,255,255,.7);}
.qrcode{width: 180px;text-align: center;margin: 15px 0;}
.qrcode .qrcode-photo{border: 1px #cccccc solid;}
.qrcode .qrcode-title{padding: 0;margin:10px 0 0 0;font-weight: 400;line-height: 1.4;color: #222222;font-size: 16px;letter-spacing: 1px;}
.copyright{font-size: 12px; color: #999999;text-align: right;padding: 10px 0;border-top: 1px #eeeeee solid;}
.copyright span{display: inline-block;padding: 0 0 0 15px;}
.copyright a{color: #999999;}
.copyright a:hover{color: #1c7c00;}
@media screen and (max-width:1280px){
    .f-platform-main{width: 520px;margin: 0 30px;}
    .f-platform-main .f-platform-btn-main{flex: 1.1;font-size: 28px;}
    .f-platform-main .f-platform .f-platform-title{font-size: 22px;letter-spacing: 1px;}
    .f-platform-main .f-platform-btn-main .f-platform-btn{letter-spacing: 1px;padding: 12px;}
    .qrcode{width: 140px;}
}
@media screen and (max-width:1100px){
    .f-platform-main{width: 450px;margin: 0 25px;}
    .f-platform-main .f-platform{flex: 1.1;}
    .f-platform-main .f-platform-btn-main{flex: 1;font-size: 24px;}
    .f-platform-main .f-platform .f-platform-title{font-size: 20px;}
}
@media screen and (max-width:1024px){
    .f-content{padding: 30px 0;}
    .f-contact{flex: initial;width: 100%;}
    .f-contact>ul{display: flex;flex-wrap: wrap;}
    .f-contact>ul>li{width: calc(100%/2 - 20px);margin: 10px;}
    .f-platform-main{margin: 0 25px 0 0; width: calc(100% - 165px);}
    .f-platform-main .f-platform{flex: initial;width: 220px;} 
}
@media screen and (max-width:767px){
    .f-contact>ul>li{width:100%;margin: 5px 0;}
    .f-platform-main{display: block;margin:20px 0; width:100%;}
    .f-platform-main .f-platform{flex: initial;width: 100%; margin: 0;}
    .f-platform-main .f-platform .logo{width: 210px;margin: 0 auto;}
    .f-platform-main .f-platform-btn-main{flex: initial;width: 100; margin: 0;}
    .qrcode{width: 180px;margin:0 auto;}
    .copyright{text-align: center;}
    .copyright span{display: block;padding: 0;width: 100%;}
}