.rwdTable td{text-align:center}
.login {
    width:100%;
    text-align: center;
    background-color: #E5D2B4;
}
.wrapper{width:1180px}
@media all and (max-width: 768px){
    .wrapper{width:90%}
}
.LoginBanner{background-repeat:no-repeat;background-position:center center;background-attachment:fixed;background-size:cover}
.login-input.position-rel{position:relative}
.login-input.position-rel .safecode{position:absolute;display:block;width:150px;height:33px;top:50%;margin-top:-16.5px;right:7px}
.login-input.position-rel .safecode a{color: #454545;}
.login-input.position-rel .safecode a:hover{color: #878787;}
.login-input.position-rel a img{width:100%;height:100%}
@media all and (max-width: 479px){
    .login-input.position-rel a{position:static;margin-top:0;width:100%}
}
.test-paper-analysis .SearchBox{display:block;-webkit-box-shadow:none;box-shadow:none}
@media all and (max-width: 479px){
    .LoginBox{
        width:70%;
    }
}
.LoginBox .login-main{padding:50px;background:rgba(255,255,255,0.75)}
.application{background-color:#eadbf9}
.font-15{font-size:15px}
.hide{display:none}
.purple2{background-color:#6C62A1;color:#fff;letter-spacing:.15em}
.search-detail {
    color: gray;
    padding: 15px 25px;
    background-color: antiquewhite;
}
.search-detail li a {
    color: gray;
    font-weight: bold;
    font-size: larger;
}
.search-detail li a.active {
    color:  #ED6A40;
}
.noborder{border:none !important}
.marginRno{margin-right:0px !important}
.TableDiv{overflow:auto;}
.TableDiv table{width:100%}
.TableDiv table tr {min-height: 60px;}
.TableDiv table tr td:nth-child(5) {
min-width:500px;
}
.TableDiv table tr td:nth-child(2) {
min-width:170px;
}
.TableDiv img{width:25%}
.TableDiv .total span{color:red}
.TableDiv .total span:first-child{margin:0 10px}
.TableDiv .total span:last-child{font-size:26px}
 ul.forms .mobile-use{display:inline-block}
 @media all and (max-width: 479px){
     ul.forms .mobile-use{display:block}
 }
 ul.forms h6{border:none;width:120px}
 ul.forms h6 span{font-size:8px}
 ul.forms a.remove{display:none}
 ul.forms a.remove.show{display:inline-block}
 ul.forms .andor{display:none}
 ul.forms .andor.show{display:inline-block}
 ul.forms .inlineDiv{width:calc(100% - 140px)}
 ul.forms .inlineDiv.inlineDivFull{width:100%}
 ul.forms .select-box,ul.forms .datepicker-box{display:none}
 .destil-list ul,.destil-list li{list-style:none;margin:0;padding:0}
 .destil-list li{margin-bottom:5px;position:relative}
 .destil-list li hr{margin:0;border-top:1px solid #ccc}
 #mask{background-color:rgba(0,0,0,0.85);color:white;position:fixed;top:0;left:0;z-index:9999;width:100%;height:100vh;overflow:auto;display:none}
 #mask .img-target{position:relative;text-align:center}
 #mask .img-target .left,#mask .img-target .right{position:absolute;font-size:40px;color:white;top:50%}
 #mask .img-target .left.right,#mask .img-target .right.right{right:-50px}
 #mask .img-target .left.left,#mask .img-target .right.left{left:-50px}
 #mask h1{color:white;margin-top:20px}
 #mask .info-target{margin-bottom:100px}
 #mask .close-box{text-align:right}
 #mask .close-box a{font-size:28px;color:white}
 .header{background-color:#ED6A40;color:#fff}
 .header .nav li>ul li{
     display:inline-block;
     -webkit-transition:all 0.3s ease-in-out;
     transition:all 0.3s ease-in-out
 }
 .header .nav li>ul li:last-child{border:none}
 .header .nav-menu>li:not(:first-child){position:relative;}
 @media all and (max-width: 479px){
     .header .logo{text-align:center;width:100%}
     .header .nav{margin:10px 0;width:100%}
     .header .nav li.first{margin-left:0;text-align:center;width:100%}
     .header .nav .nav-menu>li:not(:first-child){bottom:-10px}
 }
 .header ul.mainx-menu{margin:0;position:relative}
 .header ul.mainx-menu li{list-style:none;float:left}
 .header ul.mainx-menu li a{color:#454545;padding:15px 13px;display:block;position:relative}
 .header ul.mainx-menu li a::after{
     content:'';
     display:block;
     position:absolute;
     width:100%;
     height:0;
     background-color:rgba(255,255,255,0.2);
     overflow:visible;
     visibility:visible;
     bottom:0;
     left:0;
     opacity:0;
     -webkit-transition:all 0.3s ease-in-out;
     transition:all 0.3s ease-in-out
 }
 .header ul.mainx-menu li .sub-menu{background-color:#8C7F9F;position:absolute;top:55px;left:0;opacity:0;z-index:-1;height:auto;width:100%}
 .header ul.mainx-menu li .sub-menu a{padding:10px 13px}
 .header ul.mainx-menu li .sub-menu .div{position:relative}
 .header ul.mainx-menu li .sub-menu .div.hideme{}
 .header ul.mainx-menu li .sub-menu .subx-menu{position:absolute;top:0;left:185px}
 .header ul.mainx-menu li .sub-menu .subx-menu a{padding:10px 13px;display:inline-block}
 .header ul.mainx-menu li .sub-menu .subx-menu a::after{
     content:'';
     display:block;
     position:absolute;
     width:100%;
     height:0;
     background-color:rgba(255,255,255,0.2);
     overflow:visible;
     visibility:visible;
     bottom:0;
     left:0;
     opacity:0;
     -webkit-transition:all 0.3s ease-in-out;
     transition:all 0.3s ease-in-out}
 .header ul.mainx-menu li .sub-menu .subx-menu a:hover::after{height:100%;opacity:1}
 .header ul.mainx-menu li:hover>a::after{height:100%;opacity:1}
 .header ul.mainx-menu li:hover .sub-menu, .header ul.mainx-menu li.showed .sub-menu{
     display:block;
     z-index:1;
     opacity:1;
     min-height:600px !important;
     visibility:visible;
     -webkit-animation:fade 600ms;animation:fade 600ms;
 }
 @keyframes fade{
     0%{opacity:0;}
     100%{opacity:1;}
 }
 .header ul.mainx-menu li:hover .sub-menu .div.hideme{}
 @media all and (max-width: 479px){
     .header ul.mainx-menu{display:none}
     .header ul.mainx-menu li{float:none}
     .header ul.mainx-menu li .sub-menu{position:relative;top:0;left:0;display:none}
     .header ul.mainx-menu li .sub-menu .subx-menu{border-top:1px solid #dedede;border-bottom:1px solid #dedede;border-left:none;position:relative;display:none;top:0;left:0}
     .header ul.mainx-menu li .sub-menu .subx-menu a{display:block}
     .header ul.mainx-menu li a:hover>a::after{height:100%;opacity:1}
     .header ul.mainx-menu li a:hover .sub-menu{display:none}
 }
 @media all and (min-width: 760px) and (max-width: 1025px){
     .header ul.mainx-menu{display:none}
     .header ul.mainx-menu li{float:none}
     .header ul.mainx-menu li .sub-menu{position:relative;top:0;left:0;display:none}
     .header ul.mainx-menu li .sub-menu .subx-menu{border-top:1px solid #dedede;border-bottom:1px solid #dedede;border-left:none;position:relative;display:none;top:0;left:0}
     .header ul.mainx-menu li .sub-menu .subx-menu a{display:block}
     .header ul.mainx-menu li a:hover>a::after{height:100%;opacity:1}
     .header ul.mainx-menu li a:hover .sub-menu{display:none}
 }
 @media all and (min-width: 480px) and (max-width: 759px){
     .header ul.mainx-menu{display:none}
     .header ul.mainx-menu li{float:none}
     .header ul.mainx-menu li .sub-menu{position:relative;top:0;left:0;display:none}
     .header ul.mainx-menu li .sub-menu .subx-menu{border-top:1px solid #dedede;border-bottom:1px solid #dedede;border-left:none;position:relative;display:none;top:0;left:0}
     .header ul.mainx-menu li .sub-menu .subx-menu a{display:block}
     .header ul.mainx-menu li a:hover>a::after{height:100%;opacity:1}
     .header ul.mainx-menu li a:hover .sub-menu{display:none}
 }
 .footer{background:#d75e37;border:none}
 .footer li.xline{font-size:8px;color:#999;padding:0 10px}
 @media all and (max-width: 479px){
     .footer .footer-menu{width:100%}
     .footer .footer-menu li{display:block;text-align:center}
     .footer .footer-menu li.line{display:none}
 }
 @media all and (min-width: 760px) and (max-width: 1025px){
     .footer .footer-menu{width:100%}
     .footer .footer-menu li{display:block;text-align:center}
     .footer .footer-menu li.line{display:none}
 }
 @media all and (min-width: 480px) and (max-width: 759px){
     .footer .footer-menu{width:100%}
     .footer .footer-menu li{display:block;text-align:center}
     .footer .footer-menu li.xline{display:none}
 }
 .black-line{border-color:#000}
 .item-list{
     width:90%;
     margin:auto;
     padding:0;
     list-style:none;
     display:-webkit-box;
     display:-ms-flexbox;
     display:flex;
     -ms-flex-wrap:wrap;
     flex-wrap:wrap;
     /*justify-content: space-between;*/
 }
 .item-list li {
     text-align: center;
     margin: 15px 0;
     /*width: 26%;*/
     max-width: 29%;
 }
 .item-list li:not(:nth-child(3n)) {
     margin-right: calc(13% / 2);
 }
 .index .item-list li {
     min-width: 0 !important;
 }
 .index .item-list li:not(:nth-child(3n)) {
     margin-right: 0;
 }
 .slick-list { width: 100%; } /*以防slick的選出數量小於設定數量會跑版*/
 .item-list li .mask{position:relative;cursor:pointer;width:185px;margin:0 auto;background-color: lightgray;}
 .item-list li .mask img{height:170px}
 .item-list li .mask .mask-hover{
     width:100%;
     background-color:rgba(0,0,0,0.75);
     display:none;
     position:absolute;
     top:0;
     left:0;
     height:100%
 }
 .item-list li .mask .mask-hover h4,.item-list li .mask .mask-hover p{color:#fff}
 .item-list li:hover .mask-hover{display:block}

 .know-more{background-color:#dedede;padding:5%;color:#666;letter-spacing:.15em}
 .detail-flex{display:-webkit-box;display:-ms-flexbox;display:flex}
 .detail-flex .item:first-child{width:185px}
 .detail-flex .item:last-child{width:calc(100% - 185px)}
 .detail-flex table{width:85%;margin:0 auto;border:none;border-bottom:1px solid #dedede}
 .detail-flex table tr td{width:50%;border:none}
 .detail-flex table tr td span:first-child{width:110px;margin:5px 0;color:#999;display:inline-block}
 @media all and (max-width: 479px){
     .detail-flex{display:block}
     .detail-flex .item{display:block;width:100% !important}
     .detail-flex .item:first-child{text-align:center}
     .detail-flex table{width:100%}
     .detail-flex table span{display:block !important;width:auto !important}
     .item-list {width:80%}
     .item-list li {max-width: 100%;}
     .item-list li:not(:nth-child(2n)) {margin-right: 0;}
 }
 @media all and (min-width: 760px) and (max-width: 1025px){
     .detail-flex{display:block}
     .detail-flex .item{display:block;width:100% !important}
     .detail-flex .item:first-child{text-align:center}
     .detail-flex table{width:100%}
     .detail-flex table span{display:block !important;width:auto !important}
 }
 @media all and (min-width: 480px) and (max-width: 759px){
     .detail-flex{display:block}
     .detail-flex .item{display:block;width:100% !important}
     .detail-flex .item:first-child{text-align:center}
     .detail-flex table{width:100%}
     .detail-flex table span{display:block !important;width:auto !important}
     .item-list li {max-width: 48%;}
     .item-list li:not(:nth-child(3n)) {margin-right: 0;}
     .item-list li:not(:nth-child(2n)) {margin-right: 4%;}
 }
 @media screen and (max-width: 880px), screen and (max-height: 450px){
    #album .four{margin-bottom:30px}
    .wrapper .LoginBox{float:none;margin:0 auto}
    .SearchBox .inlineDiv{width:100%}
    .header .logo,.header .nav{width:100%;text-align:center}
    .header .nav{margin-right:0}
    .header .nav .first{margin:0.5em 0;margin-left:0}
    .header .nav li:first-child{display:block}
    .header .nav li:first-child.inline{display:inline-block}
    .lightbox .inlineDiv{width:100%}
    ul.forms h6{border-left:none !important;border-right:none !important;float:none;padding-bottom:0px;width:100%}
    ul.forms.lightbox .inlineDivAuto{width:100%}
    ul.forms .inlineDivAuto{width:100%}
    ul.forms input.calendar{width:98%}
    ul.forms.passwordFill .inlineDiv{float:none}
    .col-full-50,.col-full-33{width:100%}
    .col-full-50 ~ .col-full-33,.col-full-50 ~ .col-full-50,.col-full-33 ~ .col-full-33,.col-full-33 ~ .col-full-50{width:100%}
    .col-full-50 ~ .col-full-33 .inlineDiv,.col-full-50 ~ .col-full-50 .inlineDiv,.col-full-33 ~ .col-full-33 .inlineDiv,.col-full-33 ~ .col-full-50 .inlineDiv{width:100%}
    .col-full-50 ~ .col-full-33 .inlineDiv .inlineColumn,.col-full-50 ~ .col-full-50 .inlineDiv .inlineColumn,.col-full-33 ~ .col-full-33 .inlineDiv .inlineColumn,.col-full-33 ~ .col-full-50 .inlineDiv .inlineColumn{width:100%}
    .col-full-50 ~ .col-full-33 .inlineDiv .inlineColumn input,.col-full-50 ~ .col-full-50 .inlineDiv .inlineColumn input,.col-full-33 ~ .col-full-33 .inlineDiv .inlineColumn input,.col-full-33 ~ .col-full-50 .inlineDiv .inlineColumn input{width:50%}
    .col-full-50 ~ .col-full-33 .inlineDiv .inlineColumn input.input-full,.col-full-50 ~ .col-full-50 .inlineDiv .inlineColumn input.input-full,.col-full-33 ~ .col-full-33 .inlineDiv .inlineColumn input.input-full,.col-full-33 ~ .col-full-50 .inlineDiv .inlineColumn input.input-full{width:100% !important}
    .col-full-50 .inlineDiv,.col-full-33 .inlineDiv{width:100%}
    .col-full-50 .inlineDiv .inlineColumn,.col-full-33 .inlineDiv .inlineColumn{width:100%}
    .col-full-50 .inlineDiv .inlineColumn input,.col-full-33 .inlineDiv .inlineColumn input{width:50%}
    .col-full-50 .inlineDiv .inlineColumn input.input-full,.col-full-33 .inlineDiv .inlineColumn input.input-full{width:100% !important}
    .inlineDiv{width:100%;padding:15px 0;float:none}
    .inlineDiv .inlineColumn{}.inlineDiv .inlineColumn label{display:inline-block}
    .inlineDiv .inlineColumn.w-20{width:100%;margin-right:0}
    .TableDiv{overflow:scroll}
    .TableDiv table{width:100%}
    .TableDiv table.table1920{width:1920px}
    .TableDiv.smallTableDiv table{width:490px}
    .TableDiv table tr td:nth-child(5) {
        min-width: 210px;
    }
    .TableDiv table tr td:nth-child(2) {
        min-width: 120px;
    }
    div.selector{width:auto}
    .mobile-use .col-full-33{width:100%}
    .mobile-use .col-full-33 h6{float:left;width:100px;padding:0}
    .mobile-use .col-full-33 .inlineDiv{width:calc(100% - 122px);float:left}
    .mobile-use .col-full-50{width:100%}
    .mobile-use .col-full-50 h6{float:left;width:100px;padding:0}
    .mobile-use .col-full-50 .inlineDiv{width:calc(100% - 122px);float:left}
    .study{float:none !important;}
 }
#mask .img-target img{max-height:500px;}

.hideme{display:none;visibility: hidden;}

@media (max-width: 1025px) and (min-width: 760px) {
	.TableDiv table {width: 100%;}
}


