@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{ padding:0; margin:0; font-family:'Noto Sans TC', sans-serif; font-weight:300; font-size:16px; color:#333; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
a{ text-decoration:none; }
*:focus{ outline:none; }

.header{ position:fixed; left:0; right:0; top:0; margin: auto; background:#fff; z-index:100; box-shadow: 0 5px 5px rgba(0,0,0,0.1); }
.header .mar{ max-width:1240px; height:100px; margin:auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; }
.header .mar .logo{ width:313px; height:41px; background-image:url(../image/logo.png); background-repeat:no-repeat; background-position:center; display:block; }
.header .mar .logo h1{ font-size:0; }
.header .mar .menubox{ text-align:right; }
.header .mar .menubox .menugrids{ display: inline-block; vertical-align:middle; font-size:16px; color:#333; font-weight:500; margin:0 0 0 30px; position:relative; }
.header .mar .menubox .menugrids:nth-child(1){ margin:0; }
.header .mar .menubox .menugrids:after{ content:""; opacity: 0; position:absolute; bottom:-10px; left:0; width:0%; margin:auto; height:2px; background:#881b25; transition: .5s all; -webkit-transition: .3s all; -moz-transition: .5s all; }
.header .mar .menubtn{ display:none; }

.banner{ width:100%; height:100vh; position:relative; background-image: url(../image/banner_bg.jpg); background-size:auto 100%; background-position:right; overflow:hidden; z-index:99; }
.banner .img01{ position:absolute; width:100%; bottom:0; height:85vh; background-size:auto 100%; background-image:url(../image/home.png); background-position: 80% bottom; z-index:1; }
.banner .img_blue{ background:rgba( 27,76,136,0.75 ); position:absolute; z-index:2; top:0; bottom:0; left:0; width: 69%; transform: skewX(-20deg) translateX(-24%); -webkit-transform: skewX(-20deg) translateX(-24%); -moz-transform: skewX(-20deg) translateX(-24%); }
.banner .textsbox{ width:50%; height:100vh; position:absolute; top:0; bottom:0; left:0; margin:auto; display:flex; align-items:center; justify-content:center; z-index:10; }
.banner .textsbox .rs .h1{ font-size:82px; font-weight:800; color:#fff; margin:0 0 20px 0; }
.banner .textsbox .rs .h2{ font-size:32px; font-weight:400; color:#fff; margin:0 0 10px 0; word-spacing: 10px; }
.banner .textsbox .rs .h3{ background:#fff; display:inline-block; line-height:44px; padding:0 10px; font-size:22px; color:#0076b9; font-weight:400; margin:0 0 50px 0; }
.banner .textsbox .rs .alink{ color:#fff; text-decoration:none; font-size:24px; display:block; }


.block01{ background:#e6f6ff; padding:90px 0 150px 0; position:relative; overflow:hidden; }
.block01 .mar{ max-width:1280px; padding:0 20px; margin:auto; }
.block01::after { content: ""; display: block; border-style: solid; border-color: transparent transparent #fff transparent; border-width: 0 0 120px 100vw; position: absolute; bottom: 0; left: 0; right: 0; }

.mainTitle{ font-size:42px; color:#333; text-align:center; font-weight:500; margin:0 0 50px 0; }

.newsbox{ display:table; width:100%; }
.newsbox .ntd01{ display:table-cell; vertical-align:top; width:500px; }
.newsbox .ntd02{ display:table-cell; vertical-align:top; padding:50px 0 0 75px; }

.newsbox .imgs{ width:100%; position:relative; font-size:0; }
.newsbox .imgs img{ width:100%; position:relative; z-index:1; }
.newsbox .imgs:after{ content:""; position:absolute; width:100%; height:100%; background:#0076b9; top:0; left:0; bottom:0; right:0; margin:auto; transform: rotate(-5deg) translate(-30px); -webkit-transform: rotate(-5deg) translate(-30px); -moz-transform: rotate(-5deg) translate(-30px); }
.newsbox .lists{ display:block; margin-bottom:45px; }
.newsbox .lists:last-child{ margin-bottom:0; }
.newsbox .lists .date{ display:inline-block; background:#881b25; line-height:30px; color:#fff; padding:0 7px; font-size:16px; margin-bottom:5px; }
.newsbox .lists .title{ font-size:20px; color:#333; line-height:1.6; margin:0 0 10px 0; font-weight:500; }
.newsbox .lists .txts{ font-size:16px; color:#999; }

.block02{ background:#fff; padding:60px 0 200px 0; position:relative; }
.block02 .afterimg{ position:absolute; bottom:0; left:0; width:35%; z-index:0; }
.block02 .afterimg .img{ width:100%; padding-bottom:107%; background-image:url(../image/s_img01.png); background-size:100%; background-position:center; background-repeat:no-repeat; }
.block02 .mar{ max-width:1280px; padding:0 20px; margin:auto; position:relative; z-index:1; }
.downloadbox{ padding-bottom:90px; margin-bottom:90px; border-bottom:1px solid #ccc; }
.downloadbox .dlist{ display:flex; width:100%; overflow:hidden; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background:#f0f0f0; margin:0 0 10px 0; transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all;  }
.downloadbox .dlist:last-child{ margin:0; }
.downloadbox .dlist .cont01{ flex:1; padding:20px 25px; }
.downloadbox .dlist .cont01 .table{ display:table; width:100%; }
.downloadbox .dlist .cont01 .table .td-01{ width:46px; display:table-cell; vertical-align:middle; }
.downloadbox .dlist .cont01 .table .td-02{ padding:0 0 0 15px; display:table-cell; vertical-align:middle; font-size:20px; font-weight:500; }
.downloadbox .dlist .cont01 .table .td-01 .icons{ width:46px; height:46px; background-color:#881b25; background-image:url(../image/icon01.png); background-repeat:no-repeat; background-position:center; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; }
.downloadbox .dlist .cont02{ width:210px; display:flex; }
.downloadbox .dlist .cont02 .blue01{ background:#00a3ff; width:45%; display:flex; align-items: center; justify-content: center; }
.downloadbox .dlist .cont02 .blue02{ background:#0076b9; width:55%; display:flex; align-items: center; justify-content: center; }
.downloadbox .dlist .cont02 .blue01 span,.downloadbox .dlist .cont02 .blue02 span{ color:#fff; font-size:20px; }

.webboxs{ width:100%; }
.webboxs .wlist{ margin:0 0 30px 0; background: rgba(240,240,240,0.8); padding:80px 30px 30px 30px; position:relative; }
.webboxs .wlist:after{ content:""; position:absolute; z-index:0; bottom:0; right:0; width:0; height:0; border-style:solid; border-color:transparent transparent #e4e4e4 transparent; border-width:0 0 100px 100px; }
.webboxs .wlist .wtitle{ position:absolute; top:0; left:0; background:#881b25; line-height:50px; height:50px; padding:0 0 0 20px; min-width:220px; color:#fff; font-size:24px; }
.webboxs .wlist .wtitle:after{ content:""; display:block; position:absolute; top:0; right:-30px; width:0; height:0; border-style:solid; border-color:#881b25 transparent transparent transparent; border-width:50px 30px 0 0;  }
.webboxs .wlist .ws{ display:flex; flex-wrap:wrap; margin-left:-15px; position:relative; z-index:1; }
.webboxs .wlist .ws .wgrids{ width:25%; padding-left:15px; display:flex; margin: 0 0 15px 0; }
.webboxs .wlist .ws .wgrids .wbg{ width:100%; display:block; background:#fff; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; padding:25px 0; }
.webboxs .wlist .ws .wgrids .wbg .icons{ width:62px; height:62px; background:#00a3ff; background-image:url(../image/icon02.png); background-position:center; background-repeat:no-repeat; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; margin:auto; transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; }
.webboxs .wlist .ws .wgrids .wbg .text{ text-align:center; color:#333; font-size:20px; font-weight:500; padding:20px 0 0 0; }

.block03{ padding:90px 0; background-image:url(../image/bg_img01.jpg); background-attachment:fixed; background-repeat:no-repeat; background-position:center; }
.block03 .mar{ max-width:1280px; padding:0 20px; margin:auto; }
.block03 .mainTitle{ color:#fff; }
.block03 .msbox{ padding:0 40px; position:relative; }
.block03 .msbox .btn-left{ width:40px; height:40px; position:absolute; top:0; bottom:0; left:0; border-left:8px solid #fff; border-top:8px solid #fff; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); margin:auto; cursor:pointer; }
.block03 .msbox .btn-right{ width:40px; height:40px; position:absolute; top:0; bottom:0; right:0; border-right:8px solid #fff; border-top:8px solid #fff; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); margin:auto; cursor:pointer; }
.block03 .msbox .ms{ width:100%; display:flex; justify-content:center; }
.block03 .msbox .ms .grids{ padding:10px; width:33.3334%; }
.block03 .msbox .ms .grids .gs{ width:100%; background:#0076b9; display:block; }
.block03 .msbox .ms .grids .gs .gimgs{ width:100%; height:0; padding-bottom:95%; background:#fff; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.block03 .msbox .ms .grids .gs .gtxt{ font-size:20px; color:#fff; padding:20px 15px; text-align:center; }

.block04{ padding:80px 0; }
.block04 .mar{ max-width:1280px; padding:0 20px; margin:auto; }
.block04 .contbox{ display:flex; width:100%; }
.block04 .contbox .c1{ width:64%; }
.block04 .contbox .c1 .map{ width:100%; padding-bottom:50%; position:relative; }
.block04 .contbox .c1 .map iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }
.block04 .contbox .c2{ width:36%; background:#0076b9; display:flex; flex-direction:column; padding:15px; }
.block04 .contbox .c2 .wbg{ width:100%; background:#fff; flex:1; margin-bottom:15px; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; align-content:center; display: flex; flex-wrap:wrap; padding:0 15px; }
.block04 .contbox .c2 .wbg:last-child{ margin:0; }
.block04 .contbox .c2 .wbg .imgs{ max-width:72px; width:20%; margin:auto; font-size:0; }
.block04 .contbox .c2 .wbg .imgs img{ width:100%; }
.block04 .contbox .c2 .wbg .txt{ text-align:center; font-size:20px; color:#333; font-weight:500; width:100%; padding:5px 0 0 0; }

.footer{ background:#0076b9; text-align:center; color:#fff; font-size:16px; padding:35px 0; }

.topbtn{ display:flex; flex-wrap:wrap; align-content:center; justify-content:center; width:64px; height:64px; position:fixed; z-index:98; right:0; bottom: 94px; background:#881b25;  }
.topbtn:before{ content:""; width:32px; height:18px; background-position:center; background-image:url(../image/arrow.svg); background-repeat:no-repeat; background-size:100%; }
.topbtn .txt{ display:block; width:100%; font-size:16px; font-weight:500; color:#fff; text-align:center; }

/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1024px){
.header .mar .menubox .menugrids:hover:after{ opacity: 1; width:100%; }

.downloadbox .dlist:hover{ background: #e6f6ff; }

.webboxs .wlist .ws .wgrids .wbg:hover .icons{ background-color:#881b25; }
}

/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
.header .mar{ justify-content:flex-start; }
.header .mar .menubtn{ display:block; position:absolute; width:30px; height:22px; top:0; bottom:0; right:20px; margin:auto; }
.header .mar .menubtn:before{ content:""; display:block; height:2px; background:#0076b9; }
.header .mar .menubtn:after{ content:""; display:block; height:2px; background:#0076b9; }
.header .mar .menubtn span{ display:block; height:2px; background:#0076b9; margin:8px 0; }

.header .mar .menubox{ display:none; position: absolute; top: 100px; background: rgba( 27,76,136,0.9 ); left: 0; right: 0; padding:15px 0; }
.header .mar .menubox .menugrids{ color: #fff; padding: 20px 0; margin:auto; display:block; text-align:center; border-bottom:1px solid #ccc; border-bottom: 1px solid #4d7db7; }
.header .mar .menubox .menugrids:last-child{ border:none; }

.banner .img_blue{ transform: skewX(-20deg) translateX(-27%); -webkit-transform: skewX(-20deg) translateX(-27%); -moz-transform: skewX(-20deg) translateX(-27%); width: 70%; }
.banner .textsbox .rs .h1{ font-size:76px; }
.banner .textsbox .rs .h2{ font-size:28px; }
.banner .textsbox .rs .h3{ font-size:18px; }
.banner .textsbox .rs .alink{ font-size:20px; }
.banner .img01{ height:70vh; }

.block01{ padding:60px 0 100px 0; }
.block01::after{ border-width: 0 0 80px 100vw; }

.newsbox .ntd01{ width:50%; }
.newsbox .ntd02{ padding:0 0 0 30px; }
.newsbox .imgs:after{ transform: rotate(-3deg) translate(0px); -webkit-transform: rotate(-3deg) translate(0px); -moz-transform: rotate(-3deg) translate(0px); }

.downloadbox{ padding-bottom:70px; margin-bottom:60px; }

.webboxs .wlist .ws .wgrids{ width:33.3334%; }

.block04{ padding:60px 0 80px 0; }
.block04 .contbox .c2 .wbg{ border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
.block04 .contbox .c2 .wbg .txt{ line-height:1; font-size:16px; }

}


/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
.header .mar{ height:70px; }
.header .mar .logo{ width:200px; height:26px; background-size:200px; background-image:url(../image/logo_sp.png); }

.header .mar{ justify-content:flex-start; }
.header .mar .menubtn{ display:block; position:absolute; width:24px; height:18px; top:0; bottom:0; right:20px; margin:auto; }
.header .mar .menubtn:before{ content:""; display:block; height:2px; background:#0076b9; }
.header .mar .menubtn:after{ content:""; display:block; height:2px; background:#0076b9; }
.header .mar .menubtn span{ display:block; height:2px; background:#0076b9; margin:6px 0; }

.header .mar .menubox{ display:none; position: absolute; top:70px; background: rgba( 27,76,136,0.9 ); left: 0; right: 0; padding:15px 0; }
.header .mar .menubox .menugrids{ color: #fff; padding: 20px 0; margin:auto; display:block; text-align:center; border-bottom:1px solid #ccc; border-bottom: 1px solid #4d7db7; }
.header .mar .menubox .menugrids:last-child{ border:none; }

.banner .img_blue{ transform:none; width:100%; background: rgba( 27,76,136,0.4 ); }
.banner .textsbox{ width:100%; }
.banner .textsbox .rs{ text-align:center; }
.banner .textsbox .rs .h1{ font-size:50px; text-shadow: 0 0 15px rgb(0,0,0,0.5); }
.banner .textsbox .rs .h2{ font-size:24px; text-shadow: 0 0 10px rgb(0,0,0,0.7); }
.banner .textsbox .rs .h3{ font-size:18px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.banner .textsbox .rs .alink{ font-size:18px; text-shadow: 0 0 10px rgb(0,0,0,0.7); }

.mainTitle{ font-size:28px; margin: 0 0 30px 0; }

.block01{ padding: 40px 0 80px 0;  }
.block01::after{ border-width: 0 0 40px 100vw; }

.newsbox{ display:flex;  flex-wrap:wrap; }
.newsbox .ntd01{ display:block; width:80%; order:2; margin:auto; }
.newsbox .ntd02{ display:block; width:100%; order:1; padding:0 0 30px 0; }

.newsbox .imgs:after{ transform: rotate(-3deg) translate(0px); -webkit-transform: rotate(-3deg) translate(0px); -moz-transform: rotate(-3deg) translate(0px); }
.newsbox .lists{ margin:0 0 25px 0; }
.newsbox .lists .date{ font-size: 14px; line-height: 20px; }
.newsbox .lists .title{ line-height:1.4; margin:0 0 5px 0; font-size: 18px; }
.newsbox .lists .txts{ font-size:14px; }

.block02{ padding: 60px 0 20px 0; }
.block02 .afterimg{ display:none; }

.downloadbox{ padding-bottom: 40px; margin-bottom: 40px; }
.downloadbox .dlist{ display:block; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; }
.downloadbox .dlist .cont02{ width:100%; height: 40px; }
.downloadbox .dlist .cont01 .table .td-02{ font-size:18px; }
.downloadbox .dlist .cont02 .blue01 span, .downloadbox .dlist .cont02 .blue02 span{ font-size:16px; }

.webboxs .wlist{ padding: 60px 20px 20px 20px; }
.webboxs .wlist .wtitle{ font-size:20px; min-width: 160px; height: 40px; line-height: 40px; }
.webboxs .wlist .wtitle:after{ border-width: 40px 20px 0 0; right: -20px; }
.webboxs .wlist:after{ border-width: 0 0 40px 40px; }
.webboxs .wlist .ws .wgrids{ width:100%; }
.webboxs .wlist .ws .wgrids .wbg{ display:flex; padding: 15px; }
.webboxs .wlist .ws .wgrids .wbg .text{ font-size:18px; padding:0 0 0 15px; flex:1; text-align:left; }
.webboxs .wlist .ws .wgrids .wbg .icons{ width:30px; height:30px; background-size:16px; }

.block03 .msbox{ padding:0 20px; }
.block03 .msbox .btn-right{ width:30px; height:30px; border-right: 4px solid #fff; border-top: 4px solid #fff; }
.block03 .msbox .btn-left{ width:30px; height:30px; border-left: 4px solid #fff; border-top: 4px solid #fff; }

.block04 .contbox{ flex-wrap:wrap; }
.block04 .contbox .c1{ order:2; width:100%; }
.block04 .contbox .c2{ order:1; width:100%; }
.block04 .contbox .c2 .wbg{ border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; padding:15px; }
.block04 .contbox .c2 .wbg .txt{ font-size:16px; }
.block04 .contbox .c1 .map{ padding-bottom:76%; }

.topbtn{ bottom:94px; top:auto; margin:auto; width:46px; height:46px; }
.topbtn:before{ width:20px; height:12px; }
.topbtn .txt{ font-size:12px; }

}