* { box-sizing:border-box;}
:root {--gb:#2a5786; --yelo:#ffdd95; --cwred:#e83436}
body {font-size:22px; line-height:30px; font-family:Microsoft JhengHei, verdana; scroll-behavior:smooth; padding:0; margin:0; display:flex; flex-direction:column;}
footer {background-color:white; font-size:16px; text-align:center;}
a {text-decoration:none;}
a:hover {font-weight:bold;}
button {border:0; cursor:pointer; font-weight:bold; transition:all;}
li {list-style:none;}
ul {margin:0; padding:0;}
h1 {font-size:50px;}
.menus, .openbtn{display:none;}
.menu {margin-left:320px;}
div.logo{position:fixed; z-index:100; display:inline-block; background:url(../imgs/navlogo.png); width:320px; height:55px; vertical-align:bottom;}
.mobileline {display:none;}

.menuinclude {background:url(../imgs/navbg.jpg) repeat-x; width:100%; height:55px; position:fixed; z-index:50}
.menuinclude a{color:white; font-size:20px; text-indent:2px; line-height:55px;}
footer {line-height:40px; background:url(../imgs/footerbg.jpg) repeat-x; height:40px; width:100%;}

.index {background:url(../imgs/index.jpg) center no-repeat; background-size:cover; height:100vh; width:100vw; position:relative;}
.index div.text {float:right; padding-right:20px; width:35%; margin-top:6%;}
.index p.btn {font-size:20px; font-weight:bold; background-color:transparent; display:block; padding:5px 10px; color:black; border:2px solid black; border-radius:100px; width:fit-content; }
.index p.btn:hover { background-color:white; }
.index a.more {color:black}
.index a.more:hover {font-weight:normal;}
.index footer, .contact footer {position:absolute; bottom:0;}

/*system*/
div[class^="sysbg"]{position:relative; display:flex; align-items:center;}
div[class^="sysbg"] div.text{position:absolute; width:100%; z-index:2; display:flex;}
div[class^="sysbg"] img{width:100%; height:auto;}

.sysbg01 div.text.bg01 {justify-content:center; bottom:7%;}
.sysbg01 div.text.bg01 .title {width:38%; text-align:center;}
.sysbg01 .title { position:absolute; top:25%; left:15%;}
.sysbg01 div.list { position:relative; display:flex; flex-direction:column; width:20%; margin:0 15px; font-weight:bold;}
.sysbg01 ul li{display:inline-block;}

.sysbg02 div.text.bg02 {justify-content:end; padding-right:5%; margin-top:5%;}
.sysbg02 div.title{ position:absolute; top:20px; margin-left:40%;}
.sysbg02 div.title h3 {margin:0;}
.sysbg02 .list {margin:0 5px;}
.sysbg02 .list p{padding:3px;  width:50%; margin:0 auto; text-align:center; font-weight:bold;}

.sysbg03 .text.bg03 {position:absolute; justify-content:end; padding-right:4%; top:7%}
.sysbg03 div.title{ position:absolute; top:10px;  left:10%;}
.sysbg03 div.list {margin:0 10px; padding-top:40px; width:18%; padding:0 15px; margin-right:20px;}

.sysbg03 ul.list li{display:block; line-height:35px;counter-increment:my-counter;}
.sysbg03 ul.list li::before { content: counter(my-counter) ". "; }

/*works*/
div[class^="wrkbg"]{position:relative; display:flex; align-items:center;}
div[class^="wrkbg"] img{width:100%; height:auto;}
.wrkbg01 .text.bg01 {position:absolute; width:100%; display:flex; justify-content:end; padding-right:11%;}
.wrkbg01 .title {position:absolute; top:25%; left:15%;}
.wrkbg01 div.list { width:17%; padding:0 2%; padding-top:4%;}
.wrkbg01 ul.list li { height:170px;}

.wrkbg02 .title, .wrkbg03 .title {position:absolute; top:2%; left:15%;}
.wrkbg02 ul.list {position:absolute; width:100%; display:flex; justify-content:center; margin-top:-1%}
.wrkbg02 ul.list li{flex-direction:column; width:12%; margin:0 2%; text-align:center;} 
.wrkbg02 ul.list h3 {margin:0} 

.wrkbg03 {background-color:#f3f3f3;}
.wrkbg03 .text.bg03 {width:100%; padding:0 5%; text-align:center;}
.wrkbg03 .text.bg03 .mode {display:flex; margin-top:4%;}
.wrkbg03 div.list {display:inline-block; width:49%; margin-top:5%;}
.wrkbg03 div.list h2 {font-size:45px; letter-spacing:-3px; color:#2d8bd8; display:inline-block; margin:0 10px}
.wrkbg03 img.pic {width:auto;}

div[class^="box"] {color:white; text-shadow:1px 1px 2px #0000005f; padding:10px; text-align:center; margin:30px 0; position:relative;}
div[class^="box"]::after {content:''; position:absolute; left:50%; top:100%; z-index:999;
    border-left:10px solid transparent; border-right: 10px solid transparent; /* 右邊框的寬 */  
    border-top:20px solid black; /* 下邊框的長度|高,以及背景色 */  }
.wrkbg03 .boxall {text-align:center; margin:0 auto; width:70%;} 
.wrkbg03 .boxall h3 {margin:0 auto;} 
.wrkbg03 .boxb, .wrkbg03 .boxb50, .wrkbg03 .boxb50R, .wrkbg03 .boxb30 {background-color:#67a6d8;}
.wrkbg03 .boxw {background-color:white; border:3px solid #67a6d8; text-shadow:none; border-radius:100px; width:80px; height:80px; padding:25px 0; margin:0; font-size:20px; display:inline-block; text-align:center; color:black;}
.wrkbg03 .boxw::after, .wrkbg03 .boxall::after ,.wrkbg03 .boxb50L::after {content:none;}
.wrkbg03 .boxg, .wrkbg03 .boxg50 {background-color:#acacac;}
.wrkbg03 .boxg50 {display:inline-block; width:48%; margin:0;}
.wrkbg03 .boxb50R {width:49.7%; float:right; }
.wrkbg03 .boxb50L {width:49.7%; float:left; }
.wrkbg03 .boxb50L.img {margin:0 20%; width:60%;}
div[class^="box"]:last-child::after {content:none;}
div[class^="box"]:last-child {margin-top:0;}
div[class^="box"] span {display:block; font-size:18px;}
.wrkbg03 .boxb30 {width:32%; display:inline-block;}

/*contact*/
.contact {background:url(../imgs/contact.jpg) center no-repeat; background-size:cover; height:100vh; width:100vw; position:relative;}

.contact .title {position:absolute; top:25%; left:15%;}
.contact iframe {position:absolute; top:10%; right:10%; width:50vw; height:60vh;}
.contact ul.info {position:absolute; bottom:8%; left:40%;}



/*1366*/
@media (max-width:1910px){
    body {font-size:18px; line-height:27px; letter-spacing:-1px;}
    h1 {font-size:40px;}
    .index div.text {padding-top:3%;}
    .sysbg01 div.text.bg01 {bottom:1%}
    .sysbg03 div.list h2 {margin:15px 0}
    .wrkbg01 {margin-top:40px;}
    .wrkbg01 div.list {padding-top:2%;}
    .wrkbg01 ul.list li {height:125px;}
    .wrkbg03 img.pic {width:55%;}
    .sysbg02 .list {text-align:center; width:19%;}
    .sysbg02 div.text.bg02 {margin:8% 0 0 2%;}
    .sysbg03 ul.list li {line-height:28px;}
    
    
}


/*1024*/
@media (max-width:1365px){
    body {font-size:14px; line-height:20px; letter-spacing:-1px;}
    h1 {font-size:30px;}
    .index {background-position:85%; background-size:138% 100%;}
    .wrkbg01 ul.list li {height:93px;}
    .sysbg03 div.list {width:17%;}
    .sysbg03 ul.list li {font-size:13px; line-height:20px;}
    .contact {background-position:26%;}
}

/*768*/
@media (max-width:800px){
    body {letter-spacing:0;}
    img.rwd {display:none;}
    .mobileline {display:block; position:relative; height:1px; width:100%; border:transparent;}
    .index {background:url(../imgs/index768.jpg) center no-repeat;}
    .index div.text {width:48%; margin-right:5%; padding-top:6.5%;}
    .menuinclude a {font-size:17px;}
    .sysbg01 .title {left:9%;}
    .sysbg03 {display:block !important; background:url(../imgs/768bg.jpg) no-repeat; background-size:cover; padding:10px 0;}
    .sysbg03 div.title, .sysbg03 .text.bg03 {position:relative; left:0; padding-left:10%}
    .sysbg03 .text.bg03 {padding:0;}
    .sysbg03 div.list {width:100%; padding:0;}
    .sysbg03 .text.bg03 {width:80%; margin:0 auto; padding-top:10px;}
    .sysbg03 ul.list li {background-color:#ffffff63; margin:3px 0; padding:2px 5px;}
    .sysbg03 div.list h2 {background-color:#4b90c540; padding:5px 0; margin:1px 0;}
    .sysbg02 .list p {width:100%;}
    .sysbg02 div.text.bg02 {margin:0; margin-top:8%;}
    .sysbg01 {display:block !important; background:url(../imgs/768bg.jpg) no-repeat bottom; background-size:cover; min-height:300px;}
    .sysbg01 div.text.bg01 {bottom:8%;}
    .sysbg01 div.list {width:140px; height:140px; border:2px solid #8abcd9; border-radius:100px; background-color:white; justify-content:center; padding:3%;counter-increment:my-counter}
    .sysbg01 div.list::before { content: counter(my-counter) ""; color:#8abcd9; text-align:center; font-size:30px; line-height:5px;}
    .wrkbg01 {display:block;background:url(../imgs/768bg.jpg) no-repeat bottom; padding-bottom:5%;}
    .wrkbg01 .title {position:relative; display:block; left:0; padding-top:5%; padding-left:5%;}
    .wrkbg01 .text.bg01 {position:relative; padding:0; text-align:center; justify-content:center; margin-top:5%;}
    .wrkbg01 div.list {display:inline-block;width:30%; padding:0;}
    .wrkbg01 ul.list {text-align:left;}
    .wrkbg01 ul.list li {padding:5%; background-color:#ffffff8a;margin:2%;}
    .wrkbg02 {min-height:250px; background-color:#c5c5c5;}
    .wrkbg02 ul.list li {border-radius:100px; background-color:white; width:150px; height:150px; margin:0 0.4%; padding:3%;}
    .wrkbg02 .title, .wrkbg03 .title {left:5%;}
    .wrkbg02 ul.list {margin-top: -6%;}
    .wrkbg03 .text.bg03 .mode {display:block;}
    .wrkbg03 div.list {display:block; width:100%;}
    .contact {background-size:300%; background-position:60%;}
    .contact .title {position:relative; display:block; top:0; left:0; padding:10% 0 0 10%;}
    .contact iframe { position:relative; display:block; left:0; top:0; width:80%; margin:0 auto;}
    .contact ul.info {left:10%;}
       
}


/*360*/
@media (max-width:450px){
    body {font-size:16px;}
    h1 {margin:10px 0;}
    .rwdm {display:none;}
    div.logo{margin-left:45px;}
    .menu{display:none;}
    .menus, .openbtn{position:fixed; display:block; top:0; z-index:90; background-color:#005e8a; color:white; font-size:30px; width:55px; height:55px;}
    .sidebar {height:100%; width:0; position:fixed; z-index:1; top:0; left:0; background-color:#005e8a; overflow-x:hidden; transition:0.5s; padding-top:60px; text-align:center;}
    #mySidebar .closebtn {position:absolute; display:block; top:0; right:0; width:55px; height:55px; z-index:101;background-color: #ffffff; color:#005e8a; font-size:65px; line-height:46px;}
    .menuinclude a {display:block; font-size:25px;}
    .menuinclude a:not(.closebtn)::before {content:"# ";}

    .index {background-position-y:130%; background-size:120% 95%;}
    .index div.text {width:100%; margin-right:0; padding:0 7%; padding-top:17%; background-color:#edf4fb;}
    .index div.text p {margin:0;}
    .index div.text p.btn {margin-top:3%;}
    .sysbg01 {margin-top:55px; display:flex !important; flex-direction:column; justify-content:end; padding-bottom:10%;}
    .sysbg01 div.text.bg01 {display:flex; flex-direction:column; position:relative; align-items:center;}
    .sysbg01 .title {position:relative; margin-left:-40%;}
    .sysbg01 div.list::before {position:absolute; font-size:40px; left:-12%; color:#6ba7c9;}
    .sysbg01 div.list {margin:1%; margin-left:10%; padding:1%; width:76%; height:auto; border-radius:10px;}
    .sysbg01 div.list p {margin:3px;}
    .sysbg02 {min-height:300px; background-color:#c5c5c5;flex-direction:column; padding:0 5%; padding-bottom:20px;}
    .sysbg02 div {position:relative !important;}
    .sysbg02 div.title {top:0; left:0; margin:0; width:80%;}
    .sysbg02 div.text.bg02 {flex-direction:column; align-items:center; margin:0;}
    .sysbg02 div.text.bg02 img {width:200px;}
    .sysbg02 .list {width:auto;}
    .sysbg02 .list p {margin-top:-10px; margin-bottom: 10px;}
    .sysbg03 .text.bg03 {flex-direction:column;}
    .sysbg03 ul.list li {font-size:16px; margin:6px 0;}
    .wrkbg01 {flex-direction:column; text-align:center;}
    .wrkbg01 .text.bg01 {flex-direction:column; margin:0; padding:0; justify-content:center;}
    .wrkbg01 div.list {width:80%; margin:0 10%;}
    .wrkbg01 .title {margin-left:-14%;}
    .wrkbg01 ul.list li {height:auto;}
    .wrkbg02 {justify-content:center; padding:10% 0; padding-top:25%;}
    .wrkbg02 ul.list {position:relative; flex-direction:column;}
    .wrkbg02 .title {left:12%}
    .wrkbg02 ul.list li {width:80%; margin:1.5% 10%; height:auto; border-radius:10px;counter-increment:my-counter}
    .wrkbg02 ul.list li::before{ content: counter(my-counter) "."; position:absolute; left:30%; font-size:20px; font-weight:bold;}
    .wrkbg03 .text.bg03 .mode {padding-top:15%;}
    .wrkbg03 .title {top:0; left:5%;}
    .wrkbg03 img.pic {display:none}
    .wrkbg03 .boxall div:first-child {margin:0;}
    div[class^="box"]::after {left:45%;}
    .wrkbg03 .boxall {width:90%;}    
    .wrkbg03 .boxw {font-size:16px; width:70px; height:70px;}
    .wrkbg03 .boxb50R {width:47.7%;}
    .wrkbg03 div.boxall div.boxb50R:nth-last-child(3) {margin-top:0;}
    .contact {background-size:360%;}
    .contact .title {top:2%}
    .contact iframe {top:2%; height:55vh;}
    .contact ul.info {bottom:9%;}

}