* { box-sizing:border-box;}
:root {--gb:#2a5786; --yelo:#ffdd95; --cwred:#e83436}
body {font-size:22px; line-height:35px; font-family: 'Noto Sans TC', sans-serif; font-weight:300; scroll-behavior:smooth; padding:0; margin:0;}
a {text-decoration:none;}
li {list-style:none;}
h1, h3 {font-size:80px; color:#e65d4e; font-weight:900;}
h2 {color:#2a79c2; font-size:40px; font-weight:900;}
h3 {font-size:35px; font-weight:500; margin:0;}
footer {position:absolute; z-index:999; bottom:0; width:100%; background-color:#d5d5d5; text-align:center; padding:5px;}
.mup15 {margin-top:-15px;}
.mup2p {margin-top:2%;}
.mup15p {margin-top:15%;}

.content {height:100vh;}
.flow {position:absolute; z-index:1; top:0; right:0;}
.flow span.badge {position:absolute; z-index:4; right:0; padding:2%; padding-top:6%;}

.index { background:url(../imgs/indexbg.jpg) center no-repeat; background-size:cover;}
.lyric { margin:5%; margin-left:40%; position:absolute; z-index:5}
.lyric p {margin:5px 0;}
ul.bulet {background:url(../imgs/index_pic01.png) no-repeat; background-size:cover; width:680px; height:212px; padding:0; display:flex;}
ul.bulet li {margin:55px 25px; width:220px; text-align:center; line-height:30px;}
ul.bulet li span {display:block; font-weight:500; margin-bottom:10px;}
ul.bulet li span.p {color:purple;}
ul.bulet li span.g {color:green;}
ul.bulet li span.r {color:#e65d4e;}

.systembg1 {background:url(../imgs/systembg.jpg) top no-repeat; min-height:1500px; background-size:cover;}
.systembg1 div {position:absolute;}
.systembg1 .box1 {margin:10%; margin-left:40%; width:40%;}
.systembg1 .box2 {top:75%; left:10%; width:35%;}
.systembg2 img {float:left; width:50%; height:auto; margin-right:20px;}
.systembg2 div {padding-top:20px;}
.systembg3 {clear:both; background:url(../imgs/system_pic02.png) no-repeat; background-size:cover; height:560px; padding-left:5%; padding-top:2%;}
footer.system {position:relative;}

.contact { background:url(../imgs/contactbg.jpg) center no-repeat; background-size:cover;}
.contact iframe {width:55vw; height:40vh;}

/*1366*/
@media (max-width:1910px){
    .lyric {margin-top:8%; margin-left:37%;}
    ul.bulet {display:none;}
    .systembg1 {min-height:1275px; background-size:120%;}
    .systembg1 .box2 { top:70%; left:10%; width:40%;}
    .systembg2 img {width:60%;}
    .systembg3 {background-position-x:45%}
    .contact iframe {height:30vh;}
    .contact .infot {padding:0;}
    .content.contact .lyric {margin-top:5%;}
    .content ul {padding:0;}
}

/*1024*/
@media (max-width:1365px){
    .flow {display:none;}
    .systembg1 .box1 {margin-top:7%;}
    .systembg1 .box2 {top:56%;}
    .systembg2 img { width: 85%; margin-left: -32%;}
    .systembg3 {height:300px;}
    .systembg3 p {width:45%;}
    
}

/*768*/
@media (max-width:800px){
    h1 {line-height:85px; margin:5% 0;}
    .index { background-size: 170% 100%; background-position-x: 20%;}
    .systembg1 { background-size:140% 72%; background-position-x:24%;}       
    .systembg1 .box1 {width:55%;}
    .systembg1 .box2 {width:55%; top:40%;}
    .systembg2 img {width:100%; margin-left:0; margin-bottom:20px;}
    .systembg2 h3, .systembg2 p {margin-left:5%; width:80%;}
    .systembg3 { height:350px; background-position-x:56%;}
    .contact { background-position-x: 36%;}
}

/*360*/
@media (max-width:450px){
    h1 {font-size:30px; line-height:45px;}
    h2, h3 {font-size:22px; margin:2% 0;}
    *{font-size:18px; line-height:25px;}
    .lyric{ z-index:1; margin-left:0; background-color:#ffffff98; width:100%; padding:10%;}
    .systembg1 {background:url(../imgs/contactbg_m.jpg) center top no-repeat; min-height:930px; background-size:100%;}
    .systembg1 .box1 {margin-top:15%;}
    .systembg1 .box2 { width:100%; top:60%; left:0; padding:0 10%;}
    .systembg1 .box2 img {width:100%;}
    .systembg3 { height:200px; background-size:120%; background-position-x:78%; background-position-y:bottom;}
    .contact { background-size:250%; background-position-x:25%; background-position-y:-89%;}
    .contact iframe { height: 45vh; width:80vw;}
    .contact ul {padding:0;}
}