@charset "utf-8";
body { margin: 0; font-family: "微軟正黑體"; }
p { font-family: "微軟正黑體"; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clean { clear: both; }
.content { width: 100%; height: auto; display: block; margin: auto; }
.content img { width: 100%; height: auto; }
/*表頭*/
#header { width: 100%; border-bottom: 3px solid #aba9a9; }
#header { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%); background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%); background: linear-gradient(to bottom, #ffffff 0%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); }
#head { width: 1020px; height: auto; margin: auto; display: block; padding: 17px 0; position: relative; }
#head img { max-width: 100%; height: auto; display: inline-block; }
/*表尾*/
#footer { background: #f7f5f1; padding: 27px 0; display: block; }
#foot { width: 1020px; margin: auto; }
#foot img { display: inline-block; max-width: 100%; height: auto; vertical-align: top; margin-right: 30px; }
#foot p { display: inline-block; font-size: 13px; color: #635e5e; width: auto; vertical-align: top; margin-top: 15px; }
/*首頁*/
.idx_bg { width: 100%; height: auto; display: block; background-size: 100%; background: #fce2d5 url(../images/bg.jpg) no-repeat; }
.idx_main { width: 1020px; margin: auto; padding: 81px 0; display: block; }
.idx_login { margin-right: 45px; width: 47%; display: inline-block; vertical-align: top; }
.idx_login p { width: 100%; line-height: 35px; font-size: 18px; color: #1a1313; margin-bottom: 20px; display: block; }
.idx_form { padding: 25px; width: 100%; height: auto; background: #333333; border-radius: 6px; display: block; position: relative; }
.idx_form p { color: #ffffff; width: 100%; display: block; margin-bottom: 25px; font-weight: normal; font-size: 20px; letter-spacing: 3px; }
.idxbox { display: block; background: #ffffff url(../images/idx/icon_02.gif) 20px 50% no-repeat; padding: 10px 10px 10px 100px; height: 47px; font-size: 22px; border: none; color: #333; margin-bottom: 35px; border-radius: 4px; width: 100%; }
.idxbox_02 { display: block; background: #ffffff url(../images/idx/icon_03.gif) 20px 50% no-repeat; padding: 10px 10px 10px 100px; height: 47px; border: none; font-size: 22px; color: #333; margin-bottom: 35px; border-radius: 4px; width: 100%; }
.idxbox_03 { display: block; background: #ffffff url(../images/idx/icon_04.gif) 20px 50% no-repeat; padding: 10px 10px 10px 120px; height: 47px; border: none; font-size: 22px; color: #333; margin-bottom: 35px; border-radius: 4px; width: 100%; }
.VerifyBox { position: relative; }
.VerifyBox > img.VerifyImg { position: absolute; top: 0; right: 0; height: 47px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; cursor: pointer; }
.logicn { right: 0px; display: block; padding-left: 25px; background: #de4a4a url(../images/idx/icon_01.png) right 50% no-repeat; border: none; width: 172px; height: 47px; font-size: 21px; color: #ffffff; border-radius: 4px; text-align: left; float: right; }
.logicn a, .logicn a:hover { text-decoration: none; color: #ffffff; display: block; }
.logicn:hover { display: block; background: #b11f1f url(../images/idx/icon_01.png) right 50% no-repeat; border: none; cursor: pointer; }
.system { width: 40%; display: inline-block; padding: 25px; background: #de4a4a; border-radius: 6px; height: 600px; }
.system ul { padding-bottom: 53px; margin-bottom: 28px; background: url(../images/idx/idx_line.png) left bottom no-repeat; display: block; }
.system li { list-style: none; margin: 0 45px 0 45px; display: inline-block; width: 84px; height: 137px; }
.system li:last-child { margin-right: 0; }
.system li a { width: 94px; height: 137px; display: block; }
.system li a.sicn_01 { background: url(../images/idx/icon_04.png); background-size: 100%; }
.system li a:hover.sicn_01 { background-position: 0 -137px; display: block; }
.system li a.sicn_02 { background: url(../images/idx/icon_05.png); background-size: 100%; }
.system li a:hover.sicn_02 { background-position: 0 -137px; display: block; }
.system li a.sicn_03 { background: url(../images/idx/icon_06.png); background-size: 100%; }
.system li a:hover.sicn_03 { background-position: 0 -137px; display: block; }
.system li a.sicn_04 { background: url(../images/idx/icon_07.png); background-size: 100%; }
.system li a:hover.sicn_04 { background-position: 0 -137px; display: block; }
.stxt { display: block; width: auto; height: auto; margin-bottom: 30px; padding-left: 83px; }
.stxt p { display: block; width: auto; color: #ffffff; font-size: 18px; margin-bottom: 5px; }
.sticn_01 { background: url(../images/idx/icon_08.png) left 50% no-repeat; }
.sticn_02 { background: url(../images/idx/icon_09.png) left 50% no-repeat; }
.sticn_03 { background: url(../images/idx/icon_10.png) left 50% no-repeat; }
/*老師批改*/
.correct { width: 100%; display: inline-table; }
.correct thead td { padding: 10px 0; text-align: center; font-size: 20px; font-weight: bold; color: #fff; background-image: -webkit-gradient(linear,left top,left bottom,from(#eb6c5f),to(#de4a4a)); background-image: -webkit-linear-gradient(#eb6c5f,#de4a4a); background-image: -moz-linear-gradient(#eb6c5f,#de4a4a); background-image: -ms-linear-gradient(#eb6c5f,#de4a4a); background-image: -o-linear-gradient(#eb6c5f,#de4a4a); background-image: linear-gradient(#eb6c5f,#de4a4a); }
.correct tfoot td { background: #ededed; }
.correct th { background: #37bedc; border-bottom: 1px dotted #B0DC94; border-right: 1px solid #fff; padding: 10px; font-size: 17px; color: #fff; width: 130px; }
.correct td { background: #ededed; color: #666; font-size: 15px; padding: 10px; border-bottom: 1px solid #d0d0d0; }
.correct td p { color: #666; font-size: 15px; display: inline-block; padding-right: 20px; margin-left: 10px; }
.corbox { border: 1px solid #fff; padding: 5px; font-size: 15px; margin: 0 8px 10px 8px; display: inline-block; width: 150px; }
.corbox_02 { border: 1px solid #fff; padding: 5px; font-size: 15px; margin: 0 8px; display: inline-block; width: 90%; height: 40px; }
.corbox_03 { border: 1px solid #fff; padding: 5px; font-size: 15px; margin: 0 8px; display: inline-block; width: 90%; height: 130px; }
.save_icn { border-radius: 4px; background: #e0504e; color: #fff; font-size: 16px; text-align: center; padding: 10px 15px; margin: 10px; display: inline-block; border: none; width: 150px; }
.save_icn:hover { background: #24abd5; }
.view_icn { border-radius: 4px; background: #24abd5; color: #fff; font-size: 16px; text-align: center; padding: 10px 15px; margin: 10px; display: inline-block; border: none; width: 150px; }
.view_icn:hover { background: #e0504e; }

@media only screen and (max-width:1036px) {
    #head, #foot { width: 100%; }
}

@media only screen and (max-width:979px) {
    #head { height: 105px; padding-top: 12px; width: 100%; margin: auto; }
    #head img { width: 457px; height: 75px; margin-left: 15px; }
    /*首頁*/
    .idx_main { width: 100%; margin: auto; padding: 40px 15px; display: block; }
    .idx_login { width: 45%; }
    .idx_login p { margin-bottom: 30px; font-size: 17px; font-weight: normal; }
    #foot { width: 100%; padding: 0 15px; box-sizing: border-box; }
    .system li { margin-bottom: 15px; margin-right: 50px; }
}

@media only screen and (max-width:767px) {
    /*表頭*/
    #header { width: 100%; border-bottom: 2px solid #aba9a9; }
    /*首頁*/
    .idx_login { margin-right: 0px; margin-bottom: 40px; width: 100%; display: block; }
    .system { margin-right: 0px; width: 100%; display: block; }
    .system ul { width: 90%; margin: 0 auto 28px auto; padding-bottom: 32px; }
    .system li { width: 21%; height: auto; margin-right: 20px; }
    .stxt { width: 90%; margin: 0 auto 30px auto; display: block; }
}

@media only screen and (max-width:580px) {
    #head { height: 80px; }
    #head img { width: 335px; height: 51px; margin-left: 8px; }
    /*首頁*/
    .system li { width: 40%; height: auto; margin: 0 15px 0 15px; }
}

@media only screen and (max-width:360px) {
    #head { height: 70px; }
    #head img { width: 259px; height: 43px; margin-left: 15px; }
    /*首頁*/
    .logicn { width: 81%; float: initial; clear: both; margin-top: 50px; }
    .system ul { width: 100%; }
    .system li { margin: 0 12px 0 12px; }
}