/* css reset 歸0 */
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,font,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,caption,tfoot,thead{margin:0;padding:0;border:0;outline:0;font-size:100%}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
/* css reset 歸0 end */

body{margin:0 auto;padding:0;/*font-family:"Microsoft JhengHei"*/font-family: 'Noto Sans TC', sans-serif;}
#BodyContainer{margin:0 auto}
#BodyContentEvent{width:100%}
#event{width:100%;margin:0 auto;}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.br{display:block}
.bgcolor1{background-color: #ff7200;}
.bgcolor2{background: linear-gradient(to right, #dad8d9 0%, #FFF 20%,#FFF 80%, #d7d5d6 100%);}
.bgcolor3{background-color: #EEEEEE;}

#event_master {
    width: 100%;
    margin:0 auto;
    padding:0;
}
#event_master h1{font-size: 3rem}
#event_master h1 > b{color: #e84f17;}
#event_master h2{font-size: 2.5rem}
#event_master h2 > b{background-color: #ff0000;color: #ffffff;}
#event_master h3{font-size: 1.8rem}
#event_master h4{font-size: 1.1rem;font-style: italic;}

/*固定選單*/
#event_menu{text-align:center;position:fixed;z-index:1;top:15%;right:1%;width:180px;background-color:#f8eedf;-webkit-box-shadow:0 0 3px rgba(255,255,255,0.4),0 10px 20px rgba(0,0,0,.1);-moz-box-shadow:0 0 3px rgba(255,255,255,0.4),0 10px 20px rgba(0,0,0,.1);box-shadow:0 0 3px rgba(255,255,255,0.4),0 10px 20px rgba(0,0,0,.2);float:left;border-radius:10px}
#event_menu h2{font-weight:400;font-size:1.1em;background-color:#c30d23;border-radius:10px 10px 0 0}
#event_menu a{display:block;line-height:23px;text-align:center;padding:6px 0;color:#fff;text-decoration:none;border-radius:10px 10px 0 0;transition:all .3s linear}
#event_menu a:hover{position:relative;top:0;left:0;color:#fff;width:180px;transform:scale(1.1)}
.bookgift a{display:inline-block;transition:all .3s ease-in}
.bookgift a:hover{transform:scale(1.1);width:auto;color:#c30d23}
#event_menu p{line-height:1.4em;margin:2.5%}

/*主圖*/
.banner{width: 100%;position: relative;height:495px;display: inline-block;text-align: center;background-image: url(../images/1112028_01.png);background-repeat: no-repeat;background-size: 100% auto;background-position:bottom center;}
.banner_title1{position: absolute;content: "";display:block;top:20px;left: 3.5%;animation: myfirst 2.5s infinite alternate ease-in-out;font-size: 1.8rem;color: #feeb04;filter: drop-shadow(2px 1px 2px #000);}
.banner_title1 strong{font-size: 2.5rem;}
.banner_title{position: absolute;content: "";display:block;top:135px;left: 36.5%;}
@keyframes myfirst{
    0%{opacity:1}
    15%{opacity:0}
    25%{opacity:1}
    100%{opacity:1}
}
#event_book{width:100%;margin:0 auto;padding:0;display:block;background:#FFF}
.event_book_H{margin:0 auto;padding:.5em 2em;background:#fff100;font-size:1.8em;color:#000}
.event_book_H strong{font-size:1.5em;font-weight:700;display:block;font-family:MStiffHeiHK;line-height:1.2em}
.event_book_H b{font-size:1.3em;font-weight:700;color:#e71458}
.event_book_H span{font-size:.85em}
#event_book h2{font-size: 1.9rem;color: #9c27b0;}
#event_book h3{font-size: 1.7rem;color: #25A1C2;}
#event_book h3 > p , .dis_in{font-size: 1.5rem;color: #ff0000;font-weight: bold}
#event_book h4{font-size:1.35rem;font-weight:bolder;background-color:#fff100;color:#000;width:100%;text-align:center;padding:.5% 0;display:inline-block;border-bottom:double 4px orange}
#event_book h4 > p , .dis_in2{font-size: 1rem;color: #e11484;text-align: center;}

.booklist{margin: 0 auto; padding: 0% 0% 0%;}
.event_title{color:#FFF;font-size:2em;text-align:center;display:inline-block;width:100%;padding:.5em 0;font-weight:700;position:relative;font-family:"Microsoft YaHei",Verdana;background:linear-gradient(to right,#fff100 0%,#e00a8a 30%,#0ca3ea 100%);margin-bottom:1em}
.event_title em{color:#fff100;font-size:1.2em;font-weight:700;margin-right:.5em}
.event_title span{text-align:center;display:block;font-size:.9rem;font-weight:lighter;margin-top:.5em}
.booklist span{text-align:center;display:block;font-size:1rem;margin-right:.5em;color:red;margin-top:2%}
.event_title:before{content:'';position:absolute;height:0;width:0;border-style:solid;border-width:30px 30px 0;left:0;right:0;margin:auto;bottom:-27px;border-color:#a436a6 transparent transparent}

.content{margin:0;vertical-align:middle;display:inline-block;width:100%;background-position:bottom;background-color:#f5f5f5;padding-bottom:2%}
.content ul{padding:.5em 4% .5em 8%;width:88%;list-style-type:none;vertical-align:middle;background-color:#f5f5f5}
.content ul li{
    width:calc(100%/2 - 2px);
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1.6em;
}
.content ul.w4 li{
    width:calc(100%/4 - 4px);
}
.content ul.w3 li{
    width:calc(100%/3 - 3px); 
}
.content ul.w5 li{
    width:calc(100%/5 - 5px);
}
.content ul li.ac{
    text-align: center;
}
li a>u{border-bottom: 1px solid;text-decoration: none;}
/*.content ul li:nth-child(even):before{
    content: ""
}*/
.content ul li.w-full{width: 100%;}
.content ul li:before{
    content: "▸";
    margin-right: 0.2em;
}
.content ul li a{color:#000;text-decoration:none}
.dis_in{font-size:1.2em;line-height:1.5em;text-align:center;background-color:#e71458;color:#fff}
.content ul.two li:first-child{width:70%;font-size:1.05em;line-height:1.8em}
.buybtn{background-color:#FFF;width:150px;display:block;padding:.5%;text-align:center;border-radius:99em;margin:2% 0 1% 40%;font-size:1.3em;font-weight:700}
.buybtn a{color:#a436a6;text-decoration:none}
.buybtn span{}
.buybtn img{margin-right:.3em;width:25px;height:auto}
/*.buybtn a:hover{background-color: #fff100;
}*/
.buybtn i,.buybtn2 i{color:red}
.buybtn2{background-color:#FFF;width:150px;display:block;padding:.5%;text-align:center;border-radius:99em;margin:2% 0 1% 40%;font-size:1.3em;font-weight:700}
.buybtn2 a{text-decoration:none}
.buybtn2 img{margin-right:.3em;width:25px;height:auto}
.buybtn2:hover{background-color:#fff100}

/*書單*/
.bookTB{margin: 2% 5%;}
.books {width: 100%;background-color: white;}
.books, .books th, .books td {border: 1px solid #571a87;border-collapse: collapse;text-align: center;padding: 0.2rem;}
.books th{color: #fff;background-color: #a436a6;}
.books td:last-child{color: red}
.books p{text-align: left;padding-left: 1%;}
.books a{color: #161010}
.bookTB > .buybtn2{;}

#event_class2 a{color:#179be5;    /*font-weight: bold;*/}
#event_class2 .flex{display:flex;flex-wrap:wrap}
#event_class2 ul{font-size:1.3rem;width:90%;margin:2% auto;padding:0}
#event_class2 li{width:40%}
#event_class2 header h2,#event_class header h2{display:inline-block;font-size:2em;line-height:1.7em;color:#FFF;margin:0;padding:0;font-family:"MStiffHeiHK"}
#event_class2 header h2 a{color:#FFF;text-decoration:none}
#event_class2 header h2 a:hover{color:#fff100}
#event_class2 header h3{width:100%;float:left;font-size:1.4em;line-height:1.4em;font-weight:700;color:#fff100;margin:0;padding:1%;font-family:"Microsoft YaHei";}
#event_class2 header h3 a{color:#e00774}
#event_class2 header h3 a:hover{color:#e00774}
#event_class2 header h3 img{vertical-align:middle}
#event_class2{display:block;margin:0;padding:2% 7%;background-color:#576dc8}
#event_class2 table{width:100%;text-align:center}
#event_class2 table th{font-weight:700;color:#253886;background-color:#889cf1;text-align:center;padding:.2rem}
#event_class2 table tr{background-color:#FFF}
#event_class2 table .title{background-color:#D3EDE1}
#event_class2 table td a{color:#000;padding-left:1%}
#event_class2 table td a:hover{color:#0fbf1a;color:#000}
#event_class2 table p{text-align:left;padding:.2rem}
#event_class2 table td:nth-child(3){color:red}
.more{color:#fff;text-align:right;font-size:.8em}
.more a{color:#fff}
#event_class2 .classContent{width:95%;display:inline-block;margin:0;background-color:#FFF;list-style-type:none;padding-top:1.5%;padding-right:2%;padding-bottom:1.5%;padding-left:3%;border-radius:10px}
.ps{margin:0% auto;font-weight:normal;;}
.ps a{color: black;font-size:.9rem;}
#event_class{display:inline-block;margin:0;padding:2% 7%;background-color:#d22b9e}
#event_class ul{width:95%;float:left;margin:0;background-color:#FFF;list-style-type:none;padding-top:1.5%;padding-right:2%;padding-bottom:1.5%;padding-left:3%;border-radius:10px}
#event_class ul li{width:100%;float:left;font-size:1.1em;line-height:1.8em;color:#000}
#event_class a{color:#000}
.red{color:#e71458;text-align:center;font-size:1.2em;font-weight:700}

#event_class2 .subtitle {
    background: #eaeeff;
    color: #2c4ac7;
    text-align: left;
    padding: 0.2rem 0 0.2rem 0.5rem;
}

@media all and (min-width: 1px) and (max-width: 1200px){
    .banner{height: auto;padding: 0 0 60%;}
    .banner_title1{top:5%;}
    .banner_title {top:35%;left: 10%;
    }
    .event_book_H {
        padding: 0.5em 1em;
        font-size: 1.2em;
    }
    .event_title {font-size: 1.2em;}
    .event_title:before {
        border-width: 10px 10px 0px 10px;
        bottom: -7px;
    }
    .content ul {
        /*width: 94%;*/
    }

    .buybtn {
        margin: auto;
    }
    #event_cross {
        padding: 2% 0% 3% 23%;
        display: inline-block;
        width: 77%;
    }
    #event_APP header h2, #event_class2 header h2, #lawAPP h2, #event_class header h2 {
        font-size: 1.3em;
    }    
    
}


@media screen and (max-width:767px){
	.banner_title1{font-size: 1.2rem;left: 1.0%;}
	.banner_title1 strong {font-size: 1.5rem;}
    .banner_title img{width: 50%;height: auto;}
    .banner_title1 img{width: 65%;
        height: auto;
        margin-left: -30%;}
    .content ul li {
        width: 90%;
        /*font-size: .95rem;
        line-height: 1.6rem;*/
        display: block;
    }
    .content ul li.ac {
    text-align: left;
}
    #event_cross p {font-size: 1.1rem;
        line-height: 2rem;
    }
    .content ul.w5 li,.content ul.w4 li,.content ul.w3 li {
    width: 100%;
}
@media screen and (max-width:360px){
	
	#event_cross { padding: 2% 0% 3% 16%;width: 84%;}}
    .lawappImg {text-align: center;width: 100%;}
    .lawappTxt {font-size: 1.2em;}
    #lawAPP .lawappContent{text-align: center;}
}

/*IPAD*/
@media (min-width: 768px) and (max-width: 991px) {
    .banner_title {top:30%;left: 31%;
    }
}


/*IPAD+*/
@media (min-width: 992px) and (max-width: 1199px) {
    .banner_title {top:30%;left: 31%;}
    .banner_title img{width: 130%;height: auto;}

}