@font-face {
    font-family: "#";
    src: url('../fonts/華康新特明體.woff') format("woff"),
        url('../fonts/華康新特明體.TTF') format("truetype"),
        url('../fonts/華康新特明體.eot') format("embedded-opentype");
}

body{ font-family: "微軟正黑體", "Arial"; overflow-x: hidden; background: url("../images/body.jpg") no-repeat center; background-size: cover; background-attachment: fixed;}
article{ width: 1280px; background:rgba(255,255,255,0.78); margin: 0 auto; display: block; }
p{ color:rgb(75, 75, 75); font-size: 1.2rem; line-height: 2.5rem; padding-left: 5px; text-align:justify;}
h4{ margin-bottom: 0; }
p.Word::first-letter{ font-size: 140%; }

/* AD */
div.EventAD { width: 120px; display: block; position: fixed; right: -20px; top: 50px; z-index: 200; animation-name: EventAD-M; animation-duration: 5s; animation-iteration-count: infinite; }
div.EventAD:hover { width: 130px; right: 25px; transition: 0.3s; animation-iteration-count: initial; animation-name: initial; }
@keyframes EventAD-M { 0%{ right: -20px; } 70%{ right: 25px; } 100%{ right:-20px; } }
div.EventAD img { width: 100%; box-shadow: 0 0 15px rgb(120, 120, 120); border-radius: 10px; }
div.EventAD img:hover { box-shadow: 0 0 20px rgb(150, 150, 150); }

/* SocialMedia */
div#SocialMedia { position: fixed; right: 10px; bottom: 50px; z-index: 1000;}
div#SocialMedia ul { list-style: none; }
div#SocialMedia ul li { background: rgba(0,0,0,0.75); color: #FFF; width: 40px; height: 40px; line-height: 40px; font-size: 1.25em; text-align: center; margin: 8px 0 0 0; border-radius: 4px; }
div#SocialMedia ul li a { color: #FFF; }
div#SocialMedia ul li.FB:hover { background: #39507C; transition: .20s linear;  }
div#SocialMedia ul li.Youtube:hover { background: #DB1B1B; transition: .20s linear; }
div#SocialMedia ul li.Contact:hover { background: #096; transition: .20s linear; }
@media(max-width:767px){
    div.EventAD, div#SocialMedia{ display: none; }
}

/* Visual */
header#Visual{ background:url("../images/visual2.jpg") no-repeat center; background-size:cover; height: 500px; margin: 0 30px;}

/* PageA */
section#PageA{ padding: 50px 80px;}
section#PageA > p.Forward{  margin: 10px 150px 70px 150px; font-size: 1.4rem; font-style: italic; color:rgb(255, 115, 0); line-height: 2.65rem; font-weight: 600; border-left: 8px solid rgb(255, 115, 0); padding-left: 30px;}
section#PageA  > div.Title{ margin-bottom: 50px; background:rgb(235, 235, 235); padding: 12px 15px;}
section#PageA  > div.Title > img{ width:100%; }
section#PageA  > div.Title > p.WordTit{ display:none; font-family: "華康新特明體"; }
section#PageA > div.BOX{ padding: 0 20px; }
section#PageA > div.BOX > div.Item{ margin-bottom: 50px; }
section#PageA > div.BOX > div#IMG{ float: right; width:350px; height: auto; margin: 0 0 20px 40px; }
section#PageA > div.BOX > div#IMG > img{ width: 100%; height:70%; margin-bottom: 15px; }
section#PageA > div.BOX > div.Item > h3{ color:rgb(0, 151, 156); font-weight: 600; font-size: 1.6rem; line-height: 2.65rem; }
section#PageA > div.BOX > div.Item > img{ width:70%; margin:0 auto; display:block; }

/* PageC */
section#PageC{ padding: 50px 80px; background:rgba(236, 241, 241, 0.9);}
section#PageC div.Box{ margin:20px 0; }
section#PageC div.Box > h3{ border-bottom: 2px solid rgb(86, 117, 117); color:rgb(86, 117, 117); font-weight: bold; padding: 7px 15px 7px 10px; width:323px; }
section#PageC div.Box > h3#works{ width:190px; }
section#PageC div.Box iframe{ width:95%; height: 300px; margin:0 auto; display: block;}
section#PageC div.Box > div.Carousel div.Item{ width:95%; height: 300px; margin:0 auto; display: block;}

/* PageD */
section#PageD{ padding:40px 25px; background:url("../images/25060.jpg") no-repeat center; background-size: cover;}
section#PageD div#Box1{ width:55%; }
section#PageD div#Box2{ width:45%; }
section#PageD div.Box > h1{ font-size: 2.35rem; color: rgb(255, 255, 255); font-weight: bold; text-align: center; line-height: 3.5rem; text-shadow: 0 0 10px rgba(0,0,0,0.7); padding-top: 25%;}
section#PageD div.Form{ padding-top: 6%; padding-left:30px;}
section#PageD div.Form ul { width: 480px; padding: 30px 40px; list-style: none; clear: both; background: #fff; border-radius: 13px; }
section#PageD div.Form ul li { margin: 10px 0;border: 1px solid #ced4da; border-radius: 0.25rem; text-align: center;}
section#PageD div.Form ul li input { width: 100%; height: 50px; border:0; border-radius: 5px; padding: 0 12px; font-size: 18px;}
section#PageD div.Form ul li.send input { background: #ee3b24; color: #FFF; font-size: 22px; margin-top: 20px;}
section#PageD div.Form ul li.send input:hover { background: #222; transition: 0.2s; }
section#PageD div.Form ul li.send{border: 0;}







section#PageD div.Form ul li.area{background: #fff;border-radius: 8px;padding:10px 10px 0;}
section#PageD div.Form ul li.area p{font-size: 16px;text-align: left;padding: 0;margin: 0 0 5px;color: #000 !important;font-weight: 400;}
section#PageD div.Form ul li.area input{width: auto;height: auto;padding: 0;margin-right: 2px;}
section#PageD div.Form ul li.area label{margin-right: 5px;font-weight: 400;}




div.thx{ background:rgb(250,250,250); position: fixed; width:500px; height:200px; z-index:999; border-radius: 15px; border: 1px solid rgba(0,0,0,0.3); box-shadow: 0 0 20px rgba(0,0,0,0.4); left:50%; top:50%; margin-left:-250px; margin-top:-200px; padding-top: 45px;}
div.thx p{ font-size: 1.8rem; text-align: center; color: rgb(80, 80, 80);}
div.thx a {color: rgb(250,250,250); text-decoration: none; -webkit-text-decoration-skip: objects; text-align: center; position: absolute; bottom: 15%; left: 50%; margin-left: -40px; font-size: 1.25rem; letter-spacing: 0.1rem; background:rgb(100, 100, 100); border-radius: 5px; padding: 7px; width: 80px;}
div.thx a:hover{ background:rgb(131, 0, 0); }

/* Footer */
footer{ font-size: 0.95rem; }

@media(max-width:1280px){
    article{ width: 100%; background:rgba(255,255,255,0.73);}

    /* AD */
    div.EventAD { width: 100px;}
    div.EventAD:hover { width: 110px;}
}
@media(max-width:1240px){
    /* Visual */
    header#Visual{ height: 480px; margin: 0 20px;}

    /* PageA */
    section#PageA{ padding: 50px;}

    /* PageC */
    section#PageC{ padding: 50px;}
}
@media(max-width:1200px){
    /* Visual */
    header#Visual{ height: 460px;}

    /* PageA */
    section#PageA{ padding: 40px;}

    /* PageC */
     section#PageC{ padding: 40px 50px;}
     section#PageC div.Box{ padding: 0 10px; }

    /* PageD */
    section#PageD div.Box > h1{ font-size: 2.15rem; padding-top: 25%;}
    section#PageD div.Form{ padding-left: 0;}
    section#PageD div.Form ul { padding: 30px; }
    section#PageD div.Form ul li { margin: 12px 0;}
    section#PageD div.Form ul li input { height: 45px; }
}
@media(max-width:1107px){
    /* Visual */
    header#Visual{ height: 440px;}

    /* PageA */
    section#PageA > div.BOX > div#IMG{ width:350px; height: auto; margin: 40px 0 20px 50px; }

    /* PageC */
    section#PageC div.Box iframe{ width:92%; height: 280px; }
    section#PageC div.Box > div.Carousel div.Item{ width:92%; height: 280px; }

    /* PageD */

    section#PageD div#Box1{ width:55%; padding-left: 20px; padding-right: 20px; }
    section#PageD div.Box > h1{ font-size: 2.2rem; padding-top: 20%; }
    section#PageD div.Form ul { padding: 30px; width: 430px;}
    section#PageD div.Form ul li { margin: 12px 0;}
    section#PageD div.Form ul li input { height: 45px; }
    section#PageD div.Form ul li.send input { height: 45px;}
}
@media(max-width:1024px){
    /* Visual */
    header#Visual{ height: 420px;}

    /* PageA */
    section#PageA > div.BOX > div#IMG{ width:350px; height: auto; margin: 40px 0 20px 50px; }
    section#PageA > div.BOX > div#IMG > img{ margin-bottom: 0; }
    section#PageA > div.BOX > div.Item > img{ width:85%; }

    /* PageC */
    section#PageC{ padding: 40px;}

    /* PageD */

    section#PageD div.Form{ padding-top: 0; }
    section#PageD div#Box1{ width:50%; }
    section#PageD div#Box2{ width:50%; }
    section#PageD div.Box > h1{ font-size: 2rem; line-height: 3rem; padding-top: 25%; }
    section#PageD div.Form ul { padding: 30px; width: 95%;}
    section#PageD div.Form ul li { margin: 12px 0;}
    section#PageD div.Form ul li input { height: 45px; font-size: 1rem;}
}
@media(max-width:1000px){
    /* Visual */
    header#Visual{ height: 400px;}

    /* PageA */
    section#PageA{ padding: 30px;}
    section#PageA > p.Forward{ margin: 10px 100px 70px 100px;}

    /* PageC */
    section#PageC{ padding: 30px;}
    section#PageC div.Box > h3{ font-size: 1.65rem; width:305px; }
    section#PageC div.Box > h3#works{ width:190px; }
    section#PageC div.Box iframe{ width:95%; height: 250px; }
    section#PageC div.Box > div.Carousel div.Item{ width:95%; height: 250px; }
}
@media(max-width:767px){
    /* Visual */
    header#Visual{ height: 340px;}

    /* PageA */
    section#PageA  > div.Title > img{ display:none; }
    section#PageA > p.Forward{  margin: 10px 70px 70px 70px; font-size: 1.25rem; line-height: 2.5rem; border-left: 7px solid rgb(255, 115, 0); padding-left: 25px;}
    section#PageA  > div.Title > p.WordTit{ font-size: 2.15rem; line-height: 3.25rem; margin: 0 auto; display: block; text-align: center;}
    section#PageA > div.BOX{ padding: 0 10px; }
    section#PageA > div.BOX > div.Item{ margin-top: 40px; }
    section#PageA > div.BOX > div#IMG{ width:300px; margin: 10px 0 20px 40px; }
    section#PageA > div.BOX > div.Item > img{ width:90%; }

    /* PageC */
    section#PageC{ padding: 30px 50px;}
    section#PageC div.Box iframe{ width:85%; height: 350px; }
    section#PageC div.Box > div.Carousel div.Item{ width:85%; height: auto; }
    section#PageC div.Box > p#Empty{ display:none; }

    /* PageD */

    section#PageD div.Form{ padding-top: 30px; }
    section#PageD div#Box1{ width:100%; }
    section#PageD div#Box2{ width:100%; }
    section#PageD div.Box > h1{ padding-top: 20px; }
    section#PageD div.Form ul { width: 65%; margin: 0 auto; display: block;}
}
@media(max-width:670px){
    p{ font-size: 1.15rem; line-height: 2.3rem; padding-left: 0; }
    p.Word::first-letter{ font-size: 120%; }

    /* Visual */
    header#Visual{ height: 300px;}

    /* PageA */
    section#PageA  > div.Title > p.WordTit{ font-size: 2rem;}
    section#PageA > div.BOX{ padding: 0; }
    section#PageA > div.BOX > div.Item > h3{font-size: 1.5rem; }
    section#PageA > div.BOX > div#IMG{ display: none; }
    section#PageA > div.BOX > div.Item > img{ width: 95%; }

    /* PageC */
    section#PageC{ padding: 30px 40px;}
    section#PageC div.Box iframe{ width:87%; height: 350px; }
    section#PageC div.Box > div.Carousel div.Item{ width:87%; height: auto; }

    /* PageD */
    section#PageD div.Form ul { width: 75%; }
}
@media(max-width:575px){
    /* Visual */
    header#Visual{ height: 260px; margin: 0;}

    /* PageA */
    section#PageA  > div.Title{ padding: 10px 15px; margin-bottom: 30px;}
    section#PageA  > div.Title > p.WordTit{ font-size: 1.85rem; line-height: 2.5rem;}
    section#PageA > p.Forward{  margin: 10px 20px 50px 20px; font-size: 1.25rem; line-height: 2.5rem; border-left: 7px solid rgb(255, 115, 0); padding-left: 25px;}
    section#PageA > div.BOX > div.Item{ margin-top: 25px; }
    section#PageA > div.BOX > div.Item > h3{ line-height: 2.35rem; }
    section#PageA > div.BOX > div.Item > img{ width: 100%; }

    /* PageC */
    section#PageC div.Box iframe{ width:95%; height:300px; }
    section#PageC div.Box > div.Carousel div.Item{ width:95%; height: auto; }

    /* PageD */
    section#PageD div.Box > h1{ font-size: 1.75rem; line-height: 2.65rem; }
    section#PageD div.Form ul { width: 85%; }
}
@media(max-width:450px){
    /* Visual */
    header#Visual{ height: 170px; margin: 0 15px;}

    /* PageA */
    section#PageA{ padding: 30px 15px;}
    section#PageA > div.BOX{ padding: 5px; }
    section#PageA > p.Forward{  margin: 5px 0 40px 0; font-size: 1.05rem; line-height: 2rem; border-left: 6px solid rgb(255, 115, 0); padding-left: 15px;}
    section#PageA  > div.Title{ margin-bottom: 0;}
    section#PageA  > div.Title > p.WordTit{ font-size: 1.65rem; }

    /* PageC */
    section#PageC{ padding: 25px 20px;}
    section#PageC div.Box iframe{ height:250px; }

    /* PageD */
    section#PageD div.Box > h1{ font-size: 1.65rem; line-height: 2.65rem; padding-top: 10px;}
    section#PageD div.Form ul { width: 95%; }

    div.thx{ width:380px; left:50%;margin-left:-190px;}
    div.thx p{ font-size: 1.65rem; }
}