html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body{
font-family:"微軟正黑體" !important;
/*box-sizing: border-box;*/
}
/*::-webkit-scrollbar {
width: 0px;
}*/
.clearfix{clear:both;}
/*desktop*/
/* header */
header{background:url(../images/header.jpg)no-repeat;background-size: cover;width: 100%;height: 0;padding-bottom:35.93%;position: relative;}
.header-1{background:url(../images/header-1.png)no-repeat;background-size: cover;width: 100%;height: 0;padding-bottom:35.93%;position: absolute;top: 0;}
/* nav */
nav{height: 0;width: 100%;position: absolute;bottom:13vw;}
.nav{margin: 0 auto;width:360px;transform: translateX(70px);}
.nav li{border-radius:10px; line-height: 1.5;color: #fff;margin-bottom: 10px;position: relative;box-sizing: border-box;}
.nav i{position: absolute;right:5%;padding:8px;}
.nav a{background: #1d2088;display: block;width:80%;padding:0 10% 0 5%; border-radius: 10px; color: #fff;font-weight: bold;text-decoration: none;font-size: 30px;}
.nav a:hover{box-shadow:0px 0px 15px #666666;}
.nav a:active{background: transparent;box-shadow: none;border: 1px solid #1d2088;color: #1d2088;}
.nav a:active + .nav i{color: #1d2088 !important;}
/*aside*/
aside{display: none;}
/* main */
/* main01 */
.main01{background:#1d2088; width: 1000px;padding:80px calc((100% - 1000px)/2);text-align: center;}
.main01 h2{color: #fff;font-size: 60px;font-weight: bold;display:inline;border-top: 1px solid #fff;padding: 20px 0;}
.main01 h2::before{content: '';background: url(../images/main03-1.png)no-repeat;display: block;margin: 0 auto;width: 210px;height: 50px;transform: translateY(0px);}
.main01 ul{display: flex;justify-content: space-between;margin:40px 0;}
.main01 ul li{width: 27%;}
.main01 ul li img{width: 100%;margin-bottom: 10px;}
.main01 ul li p{color: #ffe100;font-size: 24px;font-weight:bold;text-align: center;line-height: 1.2;}
.main01 ul span{color: #58f9ff;}
.main01>p{font-size:26px;color: #fff;font-weight: bold;text-align: center;margin-bottom:30px;line-height: 2;}
.main01>a{font-size: 34px;color: #fdd000;text-decoration: none;background: #ff0000;padding:5px 30px;border-radius: 50px;font-weight: bold;margin: 0 auto;}
.main01>a:hover{box-shadow:0px 0px 15px #fdd000;}
.main01>a:active{background:#C70000;}
/* main02 */
.main02{width: 1000px;padding:80px calc((100% - 1000px)/2);text-align: center;}
.main02 h3{font-size: 50px;background: #e60012;color: #fff;border-radius: 50px;font-weight: bold;padding:5px 35px;display: inline;}
.main02 .content{margin-top: 60px;display: flex;justify-content: space-between;align-items: center;}
.main02 ul span{color:#ffe100;}
.main02 ul li{font-style:italic;margin-top: 5px;background: linear-gradient(to right,#009fe8,#1d2088);color: #fff; font-size: 28px;text-align: left;font-weight: bold;border-radius: 10px;padding:10px 20px;}
.main02 ul li:first-child{font-style:normal;background: none;font-size:47px;color: #000;margin-bottom:20px;}
.main02 ul li:first-child span{color:#e60012;}
.main02 ul::after{content:'※民、刑法增選擇題、行政法概要【新考科】';font-size: 17px;display: block;line-height: 2;text-align: left;}
.main02>p{font-size: 30px;font-weight:700;line-height: 2;}
.main02 table{width: 100%;box-sizing: border-box;margin-bottom: 30px;}
.main02 table thead td{background:#e60012;color:#fff;}
.main02 table td{font-size: 23px;padding:20px;border: 1px solid #fff;background: #ffe100;font-weight: bold;}
.main02 table .head{background:#e60012;color:#fff;}
.main02 table tr:nth-child(2){color: #2684f4;}
.main02 table tr:nth-child(3) span{color: #c20000;}
.main02 a{color: #fdd000;text-decoration: none;background: #000000;border-radius: 50px;padding:5px 30px;font-size: 32px;font-weight:600;}
.main02>a:hover{box-shadow:0px 0px 15px #fdd000;}
.main02>a:active{background:#fff;color: #000;box-shadow: none;border:2px solid #000;}
/*main03*/
.main03{background:#c20000;width:900px;padding:80px calc((100% - 900px)/2);text-align: center;}
.main03 h4{color: #fff;font-size: 60px;font-weight: bold;display:inline;border-top: 1px solid #fff;border-bottom: 1px solid #fff;padding: 20px 0;}
.main03 h4::before{content: '';background: url(../images/main03-1.png)no-repeat;display: block;margin: 0 auto;width: 210px;height: 50px;transform: translateY(-5px);}
.main03>p{font-size: 40px;color: #e7c08c;}
.main03 ul{display: flex;justify-content: space-between;margin-top:50px;margin-bottom:50px;}
.main03 ul p{color: #fff;font-size: 34px;}
.main03 ul li{width: 20%;line-height:1.5;text-align:center;font-weight: bold;}
.main03 ul li img{margin-bottom: 20px;}
.main03 ul li img:hover{
transform:rotateY(180deg);
}
.main03 ul li:first-child .head{background:linear-gradient(to right top,#ae6129,#dca255);border-radius: 10px}
.main03 ul li:nth-child(2) .head{background:linear-gradient(to right top,#1d2088,#126fba);border-radius: 10px}
.main03 ul li:nth-child(3) .head{background:linear-gradient(to right top,#ae6129,#dca255);border-radius: 10px}
.main03 ul li:nth-child(4) .head{background:linear-gradient(to right top,#1d2088,#126fba);border-radius: 10px}
.main03 ul .content{font-size:20px;text-align: left;font-weight:bold;margin-top:10px;}
.main03 .main03p{color:#fdd000;font-size:26px;font-weight:bold;margin-bottom:20px;}
.main03 a{font-size:32px;text-decoration:none;color: #fdd000;background: #000;border-radius: 50px;padding:5px 40px;font-weight: bold;}
.main03>a:hover{box-shadow:0px 0px 20px gray;}
.main03>a:active{box-shadow: none;}
/*main04*/
.main04head{background: #fdd000;width:800px;padding:40px calc((100% - 800px)/2) 500px calc((100% - 800px)/2);overflow: hidden;position: relative;text-align: center;}
.main04head h5{font-size: 50px;font-style:oblique;color:#17399b;font-weight: bold;line-height: 1.3;}
.main04head h5 span{color: #c20000;}
.main04head .bott{
position: absolute;
z-index: 999;
bottom: 0px;
left:calc((100% - 1000px)/2 + 50px);
width: 900px;
height: 400px;
text-align: center;
}
.main04head .bott::before{
content:'';
display: block;
width: 100%;
height: 100%;
background: url(../images/main04-1bkg.png)no-repeat;
background-size: cover;
position: absolute;
bottom:-100%;
left:-10%;
padding-right:20%;
padding-bottom: 50%;
z-index:-1;
}
.main04head .prompt{
position: absolute;
z-index: 10000;
bottom:10%;
left: 0;
right: 0;
height: 0;
text-align: center;
}
.main04head .mouse{
margin: 0 auto;
width: 20%;
transition:all .5s;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #b6b6b6;
}
.main04head .rota{
transition: all .8s linear;
transform-origin:407px 384px;
}
.main04{width:800px;padding:30px calc((100% - 800px)/2) 60px calc((100% - 800px)/2);overflow: hidden;position: relative;text-align: center;}
.main04 .exp{display: flex;flex-wrap: wrap;justify-content: center;box-sizing: border-box;margin-top: 20px;margin-bottom: 50px;}
.main04 .exp img{order:-5;}
.main04 .exp p{width: 100%;}
.main04 .exp p:first-child{color: #fff;font-weight: bold;font-size: 36px;padding:10px 0;border-radius: 10px;}
.main04 .exp-1 p:first-child{background: #17399b;}
.main04 .exp-2 p:first-child{background: #c20000;}
.main04 .exp-3 p:first-child{background: #0ba06a;}
.main04 .exp p:nth-child(2){color: #b28850;font-size: 28px;font-weight: bold;line-height: 1.3;margin: 10px 0;}
.main04 .exp p:nth-child(3){line-height: 1.5;text-align: left;font-size:20px;}
.main04>p{font-size: 26px;color: #1d2088;font-weight: bold;font-family: "微軟正黑體";}
.main04>a{font-size:34px;color: #fff;text-decoration: none;line-height:3;padding:7px 30px;border-radius: 50px;}
.main04>a:hover{box-shadow: 0px 0px 15px gray;}
.main04>a:active{opacity: 0.8;}
/*main05*/
.main05{overflow: hidden;width:900px;padding: 80px calc((100% - 900px)/2);background: #fdd000;text-align: center;}
.main05 h6{color: #17399b;font-size: 60px;font-weight: bold;display:inline;border-top: 1px solid #fff;padding: 20px 0;}
.main05 h6::before{content: '';background: url(../images/main03-1.png)no-repeat;display: block;margin: 0 auto;width: 210px;height: 50px;transform: translateY(-5px);}
.main05 .Content{margin-top:60px;margin-bottom: 40px;display: flex;justify-content: space-between;}
.main05 .Content ul{width: 45%;}
.main05 .Content ul li{display: flex;justify-content: space-between;margin-bottom:10px;border-radius: 10px;overflow: hidden;}
.main05 .Content .left{box-sizing:border-box;color: #fff;background: #17399b;font-size: 32px;width: 25%;padding: 10px;}
.main05 .Content .right{text-align: left;line-height:1.3; box-sizing:border-box;background: #fff;width: 75%;padding:10px 20px 10px 10px;font-size:24px;font-weight: bold;}
.main05>P{font-size: 24px;color: #e60012;font-weight: bold;line-height: 2;margin-bottom: 20px;}
.main05>a{font-size: 32px;background: #000;color: #fff;border-radius: 50px;text-decoration: none;padding: 10px 25px;}
.main05>a:hover{box-shadow: 0px 0px 15px gray;}
.main05>a:active{color:gray;}
/*footer*/
footer{background: #17399b;width:900px;padding:40px calc((100% - 900px)/2);display: flex;justify-content: space-between;}
footer .footer{width:72%;}
footer .footer>a{position: relative; display: block;background: #fff;border-radius: 10px;text-decoration: none;padding:10px;font-size: 22px;font-weight: bold;color: #c30d23;}
footer .footer>a:active{box-shadow: 4px 4px 15px gray inset;}
footer .footer>a i{position: absolute;right:10px;}
footer .footer ul{display: flex;justify-content: space-between; align-items: center;margin-top:3%;}
footer .footer ul li{text-align: center;padding:0 5px;width:12%;border-right:1px solid #3157ed;}
footer .footer ul>li a{display: block;width:100%;text-align: center; font-size: 16px;font-weight: bold;color: #fff;text-decoration: none;box-sizing: border-box;position: relative;}
footer .footer ul li:last-child{border: 0;}
footer .footer ul>li a::after{content:'';transition: all .5s linear;display: block;background: #fff;height: 1px;position: absolute;left:49%;bottom:-5px; width: 0%;}
footer .footer ul>li a:hover::after{width:60%;left:20%;}
@media(max-width:1250px){
/* nav */
.nav{width:23vw;transform:translateX(55px);}
.nav li{font-size:2vw;}
.nav i {padding: 5px;}
.nav a{font-size: 2vw;}
/*main04head*/
.main04head .bott{width: 800px;left: calc((100% - 800px)/2);}
}
@media(max-width:1030px){
/* main01 */
.main01{width: 900px;padding:80px calc((100% - 900px)/2)}
/* main02 */
.main02{width: 900px;padding:80px calc((100% - 900px)/2)}
.main02 .content ul li:nth-child(3){font-size:25px;}
}
@media(max-width:980px){
/* nav */
.nav{transform: translateX(40px);}
/*main04head*/
.main04head{padding-bottom: 400px;}
}
/*ipad*/
@media(max-width:768px){
/* main01 */
.main01{width: 90%;padding:40px 5%;}
.main01 h2{font-size: 48px;}
.main01 ul li p{font-size: 20px;}
.main01>p{font-size: 22px;margin-bottom:10px;}
.main01>a{font-size: 22px;}
/* main02 */
.main02{width: 90%;padding: 40px 5%;}
.main02 h3{font-size: 46px;}
.main02 ul li:first-child{font-size: 32px;}
.main02 ul li{font-size: 24px;}
.main02 ul::after{font-weight: bold;}
.main02 .content{margin-top:40px;}
.main02 .content>img{width: 40%;}
.main02>p{font-size: 28px;}
.main02 a{font-size: 28px;}
/* main03 */
.main03{width: 90%;padding: 40px 5%;}
.main03 ul li img{width: 100%;}
.main03 ul p{font-size: 32px;}
.main03 ul .content{font-size: 18px;}
.main03 a{font-size: 28px;}
/* main04 */
.main04head{width: 90%;padding: 40px 5% 300px 5%;}
.main04head .rot{transform: scale(0.7);}
.main04head .bott{bottom: -450px;left: calc((100% - 824px)/2);}
.main04{width: 90%;padding: 40px 5%;}
.main04 .exp p:first-child{font-size: 26px;}
.main04 .exp p:nth-child(2){font-size: 24px;}
.main04 .exp p:nth-child(3){font-size: 18px;}
.main04>a{font-size: 28px;}
/* main05 */
.main05{width: 90%;padding: 40px 5%;}
.main05 h6{font-size: 46px;}
.main05 .Content{margin-top:30px;}
.main05 .Content .left{font-size: 26px;}
.main05 .Content .right{font-size: 20px;}
.main05>a{font-size: 28px;}
/*footer*/
footer{width: 98%;padding: 40px calc((100% - 98%)/2);justify-content:space-around;}
footer>img{width: 25%;}
footer .footer ul>li a{padding:0 13px;}
}
/*phone*/
@media(max-width:767px){
/* header */
header{background:url(../images/header-mobile.jpg)no-repeat;background-size: cover;width: 100%;height: 0;padding-bottom:100%;position: relative;}
.header-1{display: none}
/*nav*/
nav{display: none;}
/* aside */
aside{display:block;}
aside ul{display: flex;justify-content:center;flex-wrap: wrap;}
aside ul li{width: 100%;text-align: center;border-bottom:5px solid #9999;position: relative;}
aside ul li:first-child{border-top:5px solid #9999;}
aside ul li a{display: block;font-weight: bold;width: 100%;text-decoration: none;background:#2c7dd2;color:#fff;font-size:6vw;line-height: 2;}
aside ul li i{position: absolute;right:15%;top:30%;}
/* main */
/* main01 */
.main01 h2 {font-size:9vw;}
.main01 ul{flex-wrap: wrap;justify-content: center;margin-bottom:0;}
.main01 ul li{width: 95%;margin-bottom:30px;}
.main01 ul li p{font-size: 7vw}
.main01>p{font-size: 20px;}
.main01>a{font-size: 18px;}
/* main02 */
.main02 h3{font-size:7vw}
.main02 .content{flex-wrap:wrap;margin:20px 0;justify-content: center;}
.main02 .content ul{display: block;width: 100%;}
.main02 .content ul li:first-child{text-align: center;font-size:28px;}
.main02 .content ul li{font-size:5.4vw;}
.main02 .content ul li:nth-child(3){font-size:5.4vw; }
.main02 ul::after{font-size: 14px;text-align: center;}
.main02 .content>img{width: 70%;order: -1;}
.main02 table td{padding:5px;vertical-align: middle;font-size: 20px;}
.main02 table tr:nth-child(3) span{display: block;}
.main02 table tr td:first-child{width: 15%;}
.main02>p{font-size: 20px;}
.main02>a{font-size: 18px;}
/* main03 */
.main03 h4{font-size:9vw;}
.main03>p{font-size: 28px;}
.main03 ul{flex-wrap:wrap;margin-bottom: 0px;}
.main03 ul li{width: 100%;text-align: center;margin-bottom:40px;}
.main03 ul li img{width: 50%;}
.main03 .main03p{font-size: 20px;}
.main03>a{font-size: 18px;}
/* main04 */
.main04head {width: 98%;padding: 40px 1% 300px 1%;}
.main04head h5{font-size: 9vw;}
.main04head .rot {transform: scale(0.5);}
.main04head .bott {bottom: -180vw;}
.main04head .prompt{bottom:13%;}
.main04head .mouse{width: 40%;}
.main04head div{display: none;}
.main04head {padding:10px 1% 10px 1%;}
.main04{width: 90%;padding: 15px 5%;}
.main04 .exp{margin-top: 0;display:flex !important;}
.main04 .exp img{width:60%;height:60%;}
.main04 .exp p:first-child{font-size: 21px;}
.main04 .exp p:nth-child(2){font-size:4.6vw;}
.main04>a{font-size: 18px;line-height:4;}
.main04>p{font-size: 22px;line-height: 1.5;}
/* main05 */
.main05{width: 96%;padding:30px 2%;}
.main05 h6{font-size:8vw;}
.main05 .Content{justify-content:center;flex-wrap: wrap;margin-bottom:10px;}
.main05 .Content ul{width: 90%;margin: 0 auto;}
.main05 .Content .left{width: 30%;}
.main05 .Content .right{padding: 10px;}
.main05 .Content ul:nth-child(2) li:nth-child(odd) div:first-child{background: #17399b !important;}
.main05 .Content ul:nth-child(2) li:nth-child(even) div:first-child{background:#e60012 !important;}
.main05>p{font-size: 20px;}
.main05>a{font-size: 18px;}
/* footer */
footer{ flex-wrap: wrap;padding-bottom: 20px;}
footer>img{ width: auto;max-width: 180px;height:75px;}
footer .footer{width: 100%;}
footer .footer>a{font-size:6vw;width: 90%;display: block;margin:10px auto;}
footer .footer ul{width:90%; flex-wrap: wrap;justify-content:flex-start;margin:20px auto 0 auto;}
footer .footer ul li{width:33%;margin-bottom: 20px;box-sizing: border-box;border-left: 1px solid #3157ed;}
footer .footer ul li:first-Child{border: 0;}
footer .footer ul li a{padding: 5px;border: 0;}
}