/* 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";background: url('../images/1312033_bg.png') no-repeat center / 100% 100% fixed;}
#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}
.red {color: #b00000;text-align: center;font-weight:bold;}
.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;}
.small{font-size: smaller}
#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:#b00000;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;/*de1e46*/-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: normal;font-size: 1.1em;background-color: #b00000;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: 0px;left: 0px;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: #b00000;}
#event_menu p {line-height: 1.4em;margin: 2.5%;}

/*主圖*/
.banner{width: 100%;position: relative;height:495px;display: inline-block;text-align: center;border-bottom: 1px dotted #e44546;background-image: url(../images/1402044_01.png);background-repeat: no-repeat;background-size: 100% auto;background-position:bottom center;}
.banner_title1{position: absolute;content: "";display:block;top:7%;left: 4%;animation: myfirst 2.5s infinite alternate ease-in-out;}
.banner_title{position: absolute;content: "";display:block;top:30%;left: 41%;}
.banner_title img{width: 100%;filter:drop-shadow(1px 2px 3px #0000003a);}
@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 {font-size: 2em;color: #000;margin:0 auto;padding:.3em 2em .2em;background: #fee383/*linear-gradient(45deg, #ffff6f, #ffff3f)*/;}
.event_book_H strong {font-weight: bold;text-align: center;display: block;font-family: 'Noto Serif TC', serif;line-height: 1.3em;}
.event_book_H b {font-size: 1.3em;font-weight: bold;color: #b00000;}
.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 {font-size: 1.5rem;color: #ff0000;font-weight: bold}
#event_book h4{margin:1rem auto 0;font-size: 1.35rem;font-weight: bolder;text-align: center;padding: .6% 0%;border-bottom: 1px solid #b000003b;background: linear-gradient(45deg, transparent, #fee383/*#ffff8f*/, transparent);}
#event_book h4 > p{font-size: 1rem;color: #e11484;text-align: center;}

.booklist{margin: 0 auto; padding: 0% 0% 0%;background-color: #fff8ee;}
.event_title{color: #FFF;font-size: 2em;text-align: center;display:inline-block;width: 100%;padding:0.5em 0%;font-weight:bold;position:relative;font-family: "Microsoft YaHei", Verdana;background: linear-gradient(to left, #e23c3a 0%, #e75b5f 100%) /*linear-gradient(to left, #fc7d6f 0%, #feac9c 100%)*/;margin-bottom: 1em;}
.event_title em{color: #fff;font-weight: bold;margin-right: 0.5em;text-shadow: 1px 1px 6px #0000005a;}
.event_title span{text-align: center;display: block;font-size: 0.9rem;font-weight: lighter;margin-top: 0.5em;}
.event_title:before{content: '';position: absolute;height: 0;width: 0;border-style: solid;border-width: 30px 30px 0px 30px;left: 0px;right: 0;margin: auto;bottom: -27px;border-color: #e54b4c transparent transparent transparent;}

.content{width: 90%;margin: 0 auto;vertical-align: middle;background-position:bottom;padding-bottom: 2%;}
.content ul{padding: .5em 3% .5em 5%;width: 92%;list-style-type: none;vertical-align: middle;}
.content ul li{width:calc(100%/2 - 2px);display: inline-block;font-size: 1.25rem;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.w-flex li{display: inline-block;width: auto}
.ac{text-align: center;}
li a>u{border-bottom: 1px solid;text-decoration: none;}
.content ul li.w-full{width: 100%;}
.content ul li:before{content: "▸";margin-right: .1em;}
.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: #ffffff;}
.content ul.two li:first-child{width:70%;font-size: 1.05em;line-height: 1.8em;}
.buybtn {width: 150px;display: block;text-align: center;margin: 2% 0 1% 40%;font-size: 1.25em;font-weight: bold;}
.buybtn a{color: #b00000;text-decoration: none;border: 1px solid #fc7d6f;background-color: #FFF;padding: .25rem 1rem;border-radius: 99em;}
.ps{display: inline-block;color: #b00000;padding:1.5rem 0 1rem 3.5rem;}
.buybtn img{margin-right: 0.3em;width:25px;height: auto;}
.buybtn i,.buybtn2 i{color: #fc7d6f;}
.buybtn2{background-color: #FFF;width: 150px;display: block;padding: 0.5% 0.5%;text-align: center;border-radius: 99em;margin: 2% 0 1% 40%;font-size: 1.3em;font-weight: bold;}
.buybtn2 a{text-decoration: none;}
.buybtn2 img{margin-right: 0.3em;width:25px;height: auto;}
.buybtn2:hover{background-color:#fee383;}

/*書單*/
.bookTB{margin: 1%;}
table{font-size: 1.05rem;}
.books {width: 100%;background-color: white;margin: 0 auto 1.25rem;}
.books, .books th, .books td {border: 1px solid #feac9c;border-collapse: collapse;text-align: center;padding: 0.2rem;}
.books th{color: #fff;background:#b00000;}
.books td:last-child{color: #b00000;font-weight: bold;}
.books p{text-align: left;padding-left: 1%;}
.books a{color: #161010}
/* .bookTB > .buybtn2{} */

#event_APP {display: block;margin:0;padding:2% 7%;background: #fee383/* linear-gradient(45deg, #ffff6f, #ffff3f)*/;}
#event_APP p {font-size: 1.6rem;line-height: 1.5em;color: #075b8a;display: inline-block;vertical-align: top;font-weight:bolder;}
#event_class2 a,#event_APP a{color:#b00000;}
#event_class2 .flex,#event_APP .flex {display: flex;flex-wrap: wrap;}
#event_class2 ul,#event_APP ul {font-size:1.3rem;width: 90%;margin: 2% auto;padding: 0;    justify-content: center;    text-align: center;}
#event_class2 li,#event_APP li{width: 25%;font-size: 1.4rem;font-weight: bold;display: inline-block;margin-right: 1rem;}
#event_class2 .subtitle {background: #fff8ee;color: #d64e3f;text-align: left;font-weight: bold;padding: 0.2rem 0 0.2rem 0.5rem;}

#event_APP header h2 ,#event_class2 header h2 ,#lawAPP h2 ,#event_class header h2{display: inline-block;font-size: 2em;line-height: 1.7em;margin: 0;padding: 0;font-family: "MStiffHeiHK";color: #fee383/*#ffff66*/;text-shadow: 1px 1px 6px #0000005a;}
#event_APP header h2 a ,#event_class2 header h2 a{color: #FFF;text-decoration: none;}
#event_APP header h2 a:hover ,#event_class2 header h2 a:hover{color: #fee383;}
#event_class2 header h3{width: 100%;float: left;font-size:1.4em;line-height:1.4em;font-weight: bold;color: #e00774;margin: 0;padding: 2% 2%;font-family: "Microsoft YaHei";text-align: center;}
#event_class2 header h3 a{color: #b00000;}
#event_class2 header h3 a:hover{color: #b00000;}
#event_class2 header h3 img{vertical-align: middle;}
#event_class2 {display: block;margin: 0;padding: 2% 7%;background:linear-gradient(to left, #e23c3a 0%, #e75b5f 100%)  /*linear-gradient(45deg, #fc7d6f 0%, #feac9c 100%)*/;}
#event_class2 table {width: 100%;text-align: center;}
#event_class2 table th {font-weight: bold;color: #ffffff;background-color: #b00000;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: #000;}
#event_class2 table p {text-align: left;padding: 0.2rem;}
#event_class2 table td:nth-child(4) {color: #b00000;}
.more {color: white;text-align:right;font-size: 0.8em;}
.more a {color: white;}

#event_class2 .classContent,#event_APP .appContent{width: 95%;display: inline-block;margin: 0;background-color: #FFF;box-shadow: 1px 1px 5px #0000003b;list-style-type: none;padding: .5em .6em .5em 1.6em;border-radius:10px;}
#event_class{display: inline-block;margin:0;padding:2% 7%;background:linear-gradient(to left, #e23c3a 0%, #e75b5f 100%)  ;}
#event_class ul{width: 95%;display: inline-block;margin: 0;background-color: #FFF;box-shadow: 1px 1px 5px #0000003b;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;}


@media all and (min-width: 1px) and (max-width: 1200px){
    .banner{height: auto;padding: 0 0 60%;}
    .banner_title1{top: 8%;left: 2%;}
    .banner_title1 img{width: 100%;height: auto;}
    .event_title:before {border-width: 20px 20px 0px 20px;bottom: -18px;}
    .content ul {width: 98%;padding: .5em 0% .5em 2%;}
    #event_notice p{font-size:1em;line-height:1.5em;color:#000;padding:0;margin:0 2% 0 10%}
    #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.8em;line-height: 1.4em;padding: .5rem 0;}
    .ps {padding: 1rem 0 0 0.5rem;}
}


@media screen and (max-width:767px){
    table {font-size: 1rem;}
    .content {width: 96%;}
    .banner_title{width: 55%;position: absolute;top: 31%;left: 40%;}
    .event_title:before {border-width: 10px 10px 0px 10px;bottom: -9px;}
    .banner_title img{width: 100%;height: auto;}
    .banner_title1 img{width: 100%;height: auto;}
    .event_book_H {padding:.3em .25em .2em;}
    .event_book_H strong ,.event_title em{font-size: 1.25rem;}
    .event_title{margin-bottom: .5em;}
    .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%;}
    #event_class2 ,#event_APP , #event_class{padding: 2% 4%;}
    #event_class2 li, #event_APP li {width: 40%;}
    #event_class2 .classContent, #event_APP .appContent {width: 90%;padding: .5em .8em .5em 1.2em;}
    #event_class ul li {font-size: 1rem;}
    #event_notice p{font-size: .95rem;margin: 0 2% 0 5%;}
    .buybtn{margin: 3% auto;}
}


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


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