@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/*reset*/

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

p {
    line-height: 1.6;
    font-size: 17px;
    font-family: '微軟正黑體', Arial;
}


/*table {
	border-collapse:collapse;
	border-spacing:0;
}*/

fieldset,
img {
    border: 0;
    padding: 0;
    margin: 0;
}


/*strong,*/

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}


/*h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}*/

abbr,
acronym {
    border: 0;
}

* {
    margin: 0;
    padding: 0;
}


/*初始設定==================================================*/

body {
    background: url('../images/bg.png') top fixed;
    font-family: '微軟正黑體', Arial;
}

a {
    text-decoration: none;
    color: blue;
}

a:hover {
    color: #F00;
}

.web_img {
    display: block;
}

.phone_img {
    display: none;
}

li {
    list-style: none !important;
    font-family: '微軟正黑體', Arial;
}


/*TOP_MENU 上方浮動選單*/

.header {
    width: 100%;
    overflow: hidden;
}

.top_header {
    width: 100%;
    height: 80px;
    background-color: #f0c346;
    position: fixed;
    top: 0;
    z-index: 100;
}

.top_menu {
    max-width: 1180px;
    margin: 0 auto;
}


/*登入*/

.SignIn_box {
    float: right;
    line-height: 40px;
    margin: 10px;
}

#MENU_SignIn {
    display: none;
}

.in_01 {
    height: 40px;
    text-indent: 5px;
    font-size: 17px;
    margin: 10px 5px;
    border-radius: 5px;
    border: 0px;
}

.in_02 {
    border-radius: 5px;
    height: 40px;
    padding: 0 20px;
    font-size: 17px;
    color: #ffffff;
    background-color: #da9900;
    border: none;
}

.homrback {
    text-align: center;
}

.in_03 {
    width: 200px;
    border: none;
    border-radius: 5px;
    height: 60px;
    padding: 20px;
    margin: 10px;
    font-size: 17px;
    color: #FFF;
    background-color: #fabc40;
}
.in_03:hover{
    background-color: rgba(255, 111, 0, 0.967);
    transition: .3s;
}

.in_04 {
    width: 200px;
    border: none;
    border-radius: 5px;
    height: 60px;
    padding: 20px;
    margin: 10px;
    font-size: 17px;
    color: #FFF;
    background-color: #f079c4;
}

.in_04:hover {
    background-color: rgb(255, 3, 138);
    transition: .3s;
}


/*選單*/

.menu_box {
    position: relative;
    float: right;
}

#MENU_UP {
    width: 120px;
    height: 56px;
    line-height: 56px;
    text-indent: 10px;
    font-size: 24px;
    display: block;
    border-radius: 5px;
    color: #fff;
    background: url(../images/icon_menu.png) right center no-repeat #dc9e0f;
    margin-top: 10px;
    text-decoration: none;
}

.menu_lest {
    width: 356px;
    border-radius: 5px;
    background-color: #dc9e0f;
    -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
    padding: 10px;
    position: absolute;
    top: 65px;
    right: 0;
    text-align: center;
    line-height: 40px;
    display: none;
}

.open {
    display: block;
}

.menu_lest ul li {
    font-size: 20px;
    color: #fff;
    clear: both;
    border-bottom: 1px solid #fff;
    overflow: hidden;
    padding: 5px 0;
}

.menu_lest ul li:last-child {
    border-bottom: 0px;
}

.menu_lest ul li a {
    background: url(../images/icon_ms.png) 10px center no-repeat;
    color: #fff;
    background-color: #dc9e0f;
    width: 95%;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    display: block;
    text-decoration: none;
}

.menu_lest ul li a:active {
    background: url(../images/icon_mm.png) 10px center no-repeat;
    background-color: #be8605;
    color: rgb(255, 255, 191);
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    display: block;
}

.menu_lest ul li ul li {
    width: 50%;
    float: left;
    clear: inherit;
    border-bottom: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.menu_lest ul li ul li a {
    background: url(../images/icon_mm.png) 10px center no-repeat;
    color: #fff;
    background-color: #1ebf35;
    width: 95%;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    display: block;
}

.menu_lest ul li ul li a:active {
    background-color: #0047fc;
    color: rgb(255, 255, 191);
}


/*上方大圖*/

.banner {
    width: 100%;
    padding-top: 80px;
}

.banner_web img{
    display: block;
    width: 100%;
    height: auto;
}
.banner_phone img{
    display: none;
}

img.banner_web{
    display: block;
    width: 100%;
    height: auto;
}
img.banner_phone{
    display: none;
}

/*快訊*/

.top_news_box {
    background: url(../images/newbox_01.png) center center no-repeat;
    width: 334px;
    height: 171px;
    position: absolute;
    right: 10px;
    bottom: 0;
}

.top_news_in {
    width: 287px;
    height: 144px;
    overflow: hidden;
    padding: 48px 40px 10px 30px;
}


/*登入+按鈕*/

.top_box {
    /* background-color: #FFF; */
    overflow: hidden;
    padding: 20px 0;
    margin-top: 50px;
}

.news_box {
    width: 46%;
    float: left;
    margin-right: 20px;
}

.news_box p {
    position: relative;
    bottom: -45px;
}

.newslist {
    padding: 1px;
    border-radius: 10px;
    background: #fff;
    background: linear-gradient(135deg, #ffffff 0%, #56c1ff 100%);
    margin-top: 10px;
}

.newslist_in {
    margin: 5px;
    background-color: #FFF;
    border-radius: 5px;
    padding: 20px;
    overflow: auto;
    height: 150px;
}

.newslist_in2 {
    margin: 5px;
    background-color: #FFF;
    border-radius: 5px;
    padding: 20px;
    overflow: hidden;
}

.newslist ul.news_LL li {
    line-height: 30px;
}

.sign_up {
    float: right;
    width: 50%;
    margin-top: 50px;
}

ul.sign_ul {
    display: flex;
    height: auto;
    overflow: hidden;
}

li.SignUp_A,
li.SignUp_B {
    display: inline-block;
}

li.SignUp_A img,
li.SignUp_B img {
    width: 90%;
    opacity: 0.8;
}

li.SignUp_A img:hover,
li.SignUp_B img:hover {
    opacity: 1;
}


a.t_r {
    background-color: #fff;
    color: gray;
    float: right;
}

.t_r {
    text-align: right;
}


/*conter*/

.conter {
    max-width: 1180px;
}


/*四格*/

.p4_box {
    margin: 18px 40px;
    overflow: hidden;
    color: #FFF;
    text-align: center;
}

li.index_li {
    margin-bottom: 20px;
}



.p4_02 {
    width: 45%;
    height: auto;
    overflow: hidden;
    float: left;
    background: #fff;
    border: 5px solid #13c91b;
    border-radius: 30px;
    padding-bottom: 20px;
}

.p4_02 h2{
    font-size: 40px;
    padding-top: 30px;
    font-weight: bold;
    color: #13c91b;
}

.p4_02 p {
    font-size: 24px;
    padding: 20px 0;
    font-weight: bold;
    color: #50cf57;
}

.p4_02 a {
    font-size: 24px;
    margin: 0 10px;
    color: #50cf57;
    font-weight: bold;
    opacity: 0.5;
}

.p4_02 a {
    background: url('../images/button_btn01.png') right center no-repeat;
    background-size: 30px;
    padding: 10px 30px;
}

.p4_04 {
    width: 45%;
    height: auto;
    overflow: hidden;
    float: right;
    background-color: #fff;
    border: 5px solid #6ba6ff;
    border-radius: 30px;
    padding-bottom: 20px;
}

.p4_04 h2{
    font-size: 40px;
    padding-top: 30px;
    font-weight: bold;
    color: #266efd;
}

.p4_04 p {
    font-size: 24px;
    padding: 20px 0;
    font-weight: bold;
    color: #29a3fb;
}

a.link_aa{
    font-size: 24px;
    margin: 0 10px;
    color: #29a3fb;
    font-weight: bold;
    opacity: 0.5;
}

a.a_vote{
    font-size: 24px;
    margin: 0 10px;
    color: #29a3fb;
    font-weight: bold;
    opacity: 0.5;
}

a.a_vote{
    background: url('../images/button_btn02.png') right center no-repeat;
    background-size: 30px;
    padding: 10px 30px;
}

a.a_vote:hover,
a.link_aa:hover,
.p4_02 a:hover {
    opacity: 100;
}

.flexslider {
    top: -20px;
}


/* 影片 */


/*麵包屑*/

.map_list li {
    float: left;
    font-size: 12px;
    color: #999;
}


/*頁籤*/

.container {
    max-width: 1200px;
    height: auto;
    overflow: hidden;
    margin-top: 20px;
}

hr{
    margin-top: 50px;
    border: 2px solid #dc9e0f;
}

li.nav-item {
    padding: 2px 20px;
    font-size: 18px;
    line-height: 1.6;
}

a.link_a {
    display: block;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 16px;
    padding: 5px 10px;
    text-decoration: none;
    color: #fff;
}

a.link_a:hover,
a.link_a:focus {
    color: yellow;
    border: 1px solid yellow;
    transition: .5s;
}

.conter {
    margin-top: 50px;
    margin-bottom: 30px;
}

.top_title {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_03.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_a2 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_01.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_a3 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_02.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_a4 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_04.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_a5 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_05.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_a6 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_06.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_a7 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_07.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_a8 {
    position: absolute;
    background: url(../images/icon_10.png) left center no-repeat;
    font-size: 36px;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_a9 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_a2.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
}

.top_title_a10 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_11.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_p123 {
    position: absolute;
    background: url(../images/icon_10.png) left center no-repeat;
    font-size: 36px;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title2 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_08.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_a11 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_12.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}

.top_title_a12 {
    position: absolute;
    font-size: 36px;
    background: url(../images/icon_13.png) left center no-repeat;
    line-height: 75px;
    padding-left: 70px;
    font-weight: bold;
    color: #dc9e0f;
}
.abgne_tab {
    clear: left;
    width: 100%;
    margin: 0;
}

ul.tabs {
    width: 100%;
    height: 50px;
    padding-top: 15px;
    background-color: #FFF;
}

ul.tabs li {
    float: right;
    height: 48px;
    line-height: 31px;
    overflow: hidden;
    position: relative;
    margin-right: 10px;
    border-left: none;
    background: #FFF;
    border: 2px solid #006eff;
    border-radius: 10px 10px 0 0;
}

ul.tabs li a {
    display: block;
    font-size: 20px;
    padding: 0 20px;
    line-height: 48px;
    height: 48px;
    color: #8957a1;
    text-decoration: none;
}

ul.tabs li a:hover {
    color: #fff799;
    background: #006eff;
}

ul.tabs li.active a {
    color: #FFF;
    background: #006eff;
}

ul.tabs li.active a:hover {
    color: #fff799;
    background: #006eff;
}

div.tab_container {
    clear: left;
    width: 100%;
    min-height: 500px;
}

div.tab_container .tab_content {
    padding: 20px;
}

div.tab_container .tab_content h2 {
    margin: 0 0 20px;
}

.sec_tab {
    width: 600px;
    /* 第2個頁籤區塊的寬度 */
}


/*圖文編輯*/

.title_a1 {
    background: url(../images/titlebar_01.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.title_001{
    height: 115px;
}

.title_a2 {
    background: url(../images/titlebar_03.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}
.title_002{
    height: 115px;
}

.title_a22 {
    background: url(../images/titlebar_03.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.title_a3 {
    background: url(../images/titlebar_03.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.titlebar_01 {
    background: url(../images/titlebar_02.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.titlebar_02 {
    background: url(../images/titlebar_04.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.titlebar_002{
    height: 115px;
}

.titlebar_03 {
    background: url(../images/titlebar_05.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.titlebar_04 {
    background: url(../images/titlebar_06.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.titlebar_05 {
    background: url(../images/titlebar_07.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.titlebar_08 {
    background: url(../images/titlebar_13.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.titlebar_008{
    height: 115px;
}

.titlebar_09 {
    background: url(../images/titlebar_14.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.titlebar_009{
    height: 115px;
}

.titlebar_10 {
    background: url(../images/titlebar_10.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.titlebar_11 {
    background: url(../images/titlebar_11.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: #dc9e0f;
}

.titlebar_12 {
    background: url(../images/titlebar_13.png) center center no-repeat;
    width: 100%;
    height: 70px;
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 35px 0;
    color: 	#dc9e0f;
}

.title_b1 {
    height: auto;
    overflow: hidden;
    margin: 30px 0px;
    color: #000;
    padding: 10px;
}

.title_b3 {
    background: #03afbc;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    color: #FFF;
}

.title_b1 .span_h3 {
    background-color: #dc9e0f;
    color: #ffffff;
    border-radius: 50px;
    font-size: 20px;
    padding: 5px 15px;
    line-height: 2;
}

h4{
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0px;
    color: #dc9e0f	;
}

p.b1_p{
    padding: 10px 0px;
    text-align: center;
    color: red;
}

.title_b1 img {
    width: 100%;
}

.page img {
    width: 100%;
    display: flex;
    margin: 0 auto;
}

img.schedule_web {
    padding-top: 20px;
    width: 90%;
    display: flex;
    margin: 0 auto;
}

img.schedule_phone {
    display: none;
}

img.img_fb {
    width: 450px;
    margin-left: -40px;
    margin-bottom: 20px;
}

ul.download_ul {
    margin-top: 50px;
}

li.download_li {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 20px;
}

a.download {
    display: block;
    width: 250px;
    font-size: 18px;
    background-color: #009eff;
    color: #fff;
    text-decoration: none;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    transition: .3s;
}

a.download:hover {
    background-color: #003bfe;
    color: yellow;
}


/* 名單公佈 */

img.winner_img {
    width: 80%;
    display: flex;
    margin: 0 auto;
    margin-bottom: 30px;
}

.winner {
  text-align: center;   /* 水平置中 */
  color: red;           /* 紅字 */
  font-size: 20px;      /* 放大字體，可以依需求調整 */
  font-weight: bold;    /* 可選：加粗更醒目 */
  margin-top: 20px;     /* 可選：跟上方有點距離 */
}


/*歷年照片/歷年影片/歷年得獎*/

.ODY_box {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 50px auto;
    padding: 50px 0px;
}

ul.ODYbox_ul {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 50px 0px 0px 0px;
}

.ODY_li a {
    display: inline-block;
    width: 100%;
    margin-right: 10px;
    opacity: 1.0;
}

a.ODY_01 img,
a.ODY_02 img,
a.ODY_03 img {
    opacity: 1.0;
    filter: alpha(opacity=100);
}

a.ODY_01 img:hover,
a.ODY_02 img:hover,
a.ODY_03 img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

/* 2022決賽影片 */
.win_box{
    max-width: 1200px;
    height: auto;
    overflow: hidden;
    margin-bottom: 30px;
}
ul.ul_win{
    display: flex;
    margin: 0 auto;
    justify-content: center;
    margin-bottom: 50px;
}
li.li_win{
    width: 30%;
    height: auto;
    overflow: hidden;
    margin: 0 10px;
    text-align: center;
    border: 5px solid #2e3192;
    border-radius: 10px;
    background-color: #c5e1fe;
    padding: 5px;
    color: rgb(130, 0, 195);
    font-size: 20px;
    font-weight: bold;
}
p.win_p{
    color: rgb(0, 0, 107);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    display: flex;
    margin: 0 auto;
    justify-content: center; 
}

.win_video iframe{
    width: 100%;
    height: 300px;
}

img.win_img{
    width: 100%;
    height: 300px;
}

.embed-container { 
    /* position: relative; 
    padding-bottom: 56.25%; 
      */
    height: 300px;
    max-width: 100%; 
} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    /* position: absolute; 
    top: 0; 
    left: 0;  */
    width: 100%; 
    height: 100%; 
}

p.win_name{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #2e3192;
    padding-top: 30px;
}


/*圖文編輯-列表樣式*/

.list_a1 li {
    line-height: 35px;
    font-size: 17px;
    background: url(../images/li_img_01.png) left 0px no-repeat;
    padding-left: 45px;
    padding-bottom: 17px;
}

.list_a1 li li {
    line-height: 35px;
    font-size: 17px;
    background: url(../images/li_img_02.png) left 0px no-repeat;
    padding-left: 40px;
    margin-bottom: 15px;
}

.list_a2 {
    overflow: hidden;
}

.list_a2 li {
    width: 50%;
    float: left;
}


/*投票列表*/

img.img_vote{
    width: 90%;
}

.list_4 {
    text-align: center;
    position: relative;
}

.list_4 li {
    width: 22%;
    text-align: center;
    display: inline-block;
    margin: 10px;
}

.list_4 li:nth-child(4n+1) {
    clear: both;
}

.vote_one {
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    padding: 10px;
    border: 5px solid #FFF;
    background: linear-gradient(135deg, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%);
}

.vote_one:hover {
    border: 5px solid #3366CC;
}

.vote_one_in {
    background-color: #FFF;
    border-radius: 5px;
    position: relative;
}

.vote_one_in span {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: #FFF;
    padding: 5px 10px;
    font-size: 12px;
}

.vote_one_in img {
    width: 100%;
    height: auto;
}

.votelist_in2 {
    margin: 5px;
    background-color: #fff;
    border-radius: 5px;
    padding: 70px 20px 20px 20px;
    overflow: hidden;
}

.book_title {
    margin: 10px 0;
    background-color: #FFF;
    border-radius: 25px;
    padding: 10px 5px;
    font-size: 18px;
}

.book_title a {
    color: #333333;
    text-decoration: underline;
}

.book_btn {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #FFF;
}

.book_btn2 {
    width: 100%;
    height: 250px;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: -9999px;
}

.book_btn a {
    color: #FFF;
}

.book_btn a:hover,
.book_btn.on {
    color: #FFFF00;
}


/*問答*/

#qaContent {
    width: 100%;
    min-height: 500px;
}

#qaContent h3.qa_group_1 {
    background: url(../images/icon_A.png) left center no-repeat;
}

#qaContent ul.accordionPart {
    margin: 20px;
}

#qaContent ul.accordionPart li {
    border-bottom: solid 1px #e3e3e3;
    padding-bottom: 12px;
    margin-top: 12px;
}

#qaContent ul.accordionPart li .qa_title {
    background: url(../images/icon_Q.png) left center no-repeat;
    color: #a46b00;
    cursor: pointer;
    padding: 20px 0 20px 60px;
    font-size: 20px;
}

#qaContent ul.accordionPart li .qa_title_on {
    text-decoration: underline;
}

#qaContent ul.accordionPart li .qa_content {
    margin: 6px 0 0 0;
    background: url(../images/icon_A.jpg) left top no-repeat;
    padding: 0 0 20px 75px;
    color: #666;
}


/*最新消息*/

.news_page {
    clear: both;
    margin: 30px 0;
}

.news_page p {
    line-height: 28px;
}


/*表格*/
#table,#tr,#td{
    word-break: break-all;
}

.tb_box {
    margin: 10px 0;
}

.tb_box p {
    padding: 20px 0;
}

.tb_01 {
    background-color: #fdecd7;
    border-radius: 10px;
    font-size: 17px;
}

.tb_01 td {
    padding: 10px;
    margin: 5px;
    border-bottom: 1px solid #FFF;
    border-right: 1px solid #FFF;
}

.tb_01 tr:nth-child(odd) {
    background-color: #ffddb4;
}

.tb_01 tr:nth-child(1) {
    background-color: #f2bf78;
    font-weight: bold;
}

.tb_b1 {
    background-color: #fdecd7;
    border-radius: 10px;
    display: block;
    margin: 20px 0;
    overflow: hidden;
}

.tb_b1 li,
.tb_b2 li {
    clear: both;
}

.tb_b1 ul.tb_t1 {
    background-color: #f2bf78;
    font-weight: bold;
    overflow: hidden;
}

.tb_b1 li li {
    float: left;
    width: 14%;
    text-align: center;
    display: block;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    clear: inherit;
}

.tb_02 {
    background-color: #fffdc3	;
    margin: 20px 0;
    font-size: 17px;
}

.tb_02 td {
    padding: 5px;
    line-height: 26px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    color: #000000;
}

.tb_02 tr:nth-child(even),
.tb_03 tr:nth-child(even),
.tb_05 tr:nth-child(even) {
    background-color: #fffae4;
}

.tb_02 tr.tb_t2 {
    background-color: #fffdc3;
    font-weight: bold;
    color: #016236;
}

tr.tb_t00 {
    background-color: #fff955;
}

.tb_03 {
    background-color: #fffdc3;
    margin: 20px 0;
    font-size: 17px;
}

.tb_03 td {
    padding: 20px 0;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    color: #000000;
}

.tb_03 tr.tb_t3 {
    background-color: #1874b7;
    font-weight: bold;
    color: #FFF;
}

.tb_05 {
    background-color: #fffaae;
    margin: 20px 0;
}

.tb_05 td {
    padding: 20px 0;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
}

.tb_05 tr.tb_t5 {
    background-color: #f1b51b;
    font-weight: bold;
    color: #FFF;
}

.tb_t4 {
    background-color: #f2bf78;
    font-weight: bold;
    color: #FFF;
}

.tb_04 {
    background-color: #fdecd7;
    margin: 20px 0;
}

.tb_04 td {
    padding: 20px 0;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
}


/*閱讀王*/

.moon_list {
    text-align: center;
    position: relative;
    clear: both;
}

.moon_list li {
    width: 10%;
    text-align: center;
    display: inline-block;
    margin: 10px;
    background-color: #F90;
    padding: 10px 0;
    border-radius: 5px;
    font-weight: bold;
}

.moon_list li a {
    color: #FFF;
}

.moon_list li:hover,
.moon_list li.on {
    background-color: #FF3300;
}

.read_list li {
    width: 33.333%;
    text-align: center;
    float: left;
}

.read_list li li {
    width: 45%;
    text-align: left;
    padding: 1%;
}

.read_list li li:nth-child(2n+1) {
    clear: both;
}

.read_list li li:hover {
    background-color: #FFFFCC;
}

.title_b2 {
    line-height: 30px;
    overflow: hidden;
    margin: 10px 0;
}

.title_b2 span {
    background-color: #FFCC00;
    border-radius: 5px;
    font-size: 20px;
    padding: 3px 10px;
    margin-right: 10px;
    display: block;
}

/* 童書創作組-報名選項 */

a.button_a{
    width: 200px;
    height: auto;
    padding: 20px;
    background-color: #45c0c4;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
    margin: 0px 10px;
    -webkit-box-shadow: 5px 5px 5px 0px #42a1a5, 0px -4px 7px -11px rgba(51,51,51,0.5); 
    box-shadow: 5px 5px 5px 0px #42a1a5, 0px -4px 7px -11px rgba(51,51,51,0.5);
}

a.button_a:hover,
a.button_a:focus{
    background-color: #5F9EA0;
    -webkit-box-shadow: inset 4px 4px 15px 0px #3c7d7f, 12px -17px 7px -16px rgba(51,51,51,0.23); 
    box-shadow: inset 4px 4px 15px 0px #2b5c30, 12px -17px 7px -16px rgba(51,51,51,0.23);
    transition: .5s;
}

/*寄送表格*/

.L_box {
    float: left;
    width: 30%;
}

.L_box img {
    width: 100%;
}

.L_box li {
    float: left;
    line-height: 2;
}

.R_box {
    float: right;
    width: 65%;
}

.R_CC {
    width: 90%;
    margin: 0 auto;
}

.R_tb li {
    margin: 10px 0;
    clear: both;
    overflow: hidden;
    font-size: 17px;
}

.R_tb li p {
    width: 15%;
    float: left;
}

.R_tb input.text_01 {
    width: 80%;
    line-height: 26px;
    float: right;
}

.text_02 {
    width: 80%;
    line-height: 26px;
    text-align: left;
}

textarea.text_3 {
    width: 80%;
    float: right;
}

.w-50 {
    width: 25%;
    text-align: center;
}

.txt_ruru {
    background-color: #fff;
    width: 100%;
    height: 300px;
    overflow: auto;
    border: 1px solid #000;
    padding: 5px;
    margin: 30px 0px;
}

.txt_ruru h3 {
    color: #3399FF;
    padding-top: 20px;
}

.txt_ruru p {
    width: 100%;
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.all_one {
    width: 78%;
    float: left;
}

.one {
    clear: both;
    padding: 5px 0;
}

.one span {
    float: left;
    padding-right: 10px;
}

.text_03 {
    height: 30px;
}

/* ------------contact------------- */
p.contact_p{
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.contact_box{
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
}

ul.contact_ul{
    display: block;
}

li.contact_li{
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 20px;
}

ul.link_ul{
    display: flex;
    /* margin: 0 auto; */
    width: 50%;
}

/* li.link_li{
    margin: 10px;
} */

img.fun_logo{
    width: 80%;
}

img.fb_logo{
    width: 80%;
}


/* ----------------------------------------- */

.sign_a {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px;
}

h2 {
    text-align: center;
    height: 1.6;
    font-size: 30px;
    font-weight: bold;
    color: #a46b00;
}

li.li_left {
    float: left;
    width: 20%;
    padding: 20px;
}

p.li_p {
    line-height: 16px;
    font-size: 14px;
    color: red;
}

li.li_right {
    width: 80%;
    float: right;
    padding: 10px 0px;
}

.li_right input{
    margin-bottom: 10px;
    padding: 5px;
}

select{
    padding: 5px;
    height: 37px;
}

input.input_w {
    width: 90%;
    padding: 5px;
}

input.input_name{
    padding: 5px;
}

.ul_display {
    display: flex;
}

li.li_display {
    display: inline-block;
    line-height: 30px;
}

.input_flex{
    display: inline-flex;
    margin: 0 auto;
    flex-wrap: wrap;
}

.input_box{
    height: 50px;
}

/*評分*/

.review_list {
    font-size: 15px;
}

.review_list li {
    width: 47.5%;
    margin-right: 2.5%;
    float: left;
    border-bottom: 1px solid #CCC;
    padding: 10px 0;
}

.review_list li li {
    width: 15%;
    margin-right: 0;
    float: left;
    text-align: center;
    border-bottom: none;
    height: 13px;
}

.review_list li li:nth-child(2) {
    width: 55%;
    text-align: left;
    overflow: hidden;
}

.review_title,
.review_title2 {
    font-weight: bold;
    background-color: #CCCCCC;
}

.btn_3 {
    border: none;
    color: #FFF;
    background-color: #f1574c;
    border-radius: 5px;
    padding: 5px 10px;
}

.btn_3:hover {
    background-color: #333333;
}

.txt_fra {
    line-height: 20px;
    width: 50px;
    text-align: center;
    margin-left: 2px;
}

.txt_fra2 {
    line-height: 20px;
    width: 90%;
    text-align: left;
    padding: 10px;
    height: auto;
}

.img_page {
    background: url(../images/bg1s.png) center no-repeat;
    padding: 10px 5px 15px 5px;
    background-size: auto 100%;
    margin: 0 auto;
}


/*同操作頁預覽*/

.CON_page2 {
    width: 700px;
    margin: 0 auto;
    background: url(../images/bg1s.png) center top no-repeat;
    /*overflow:hidden;*/
    padding: 2px 10px 10px 10px;
    background-size: 100%;
}

.CON_page2 .text_frame2 {
    height: auto;
}

.CON_page_in {
    width: 700px;
    height: 525px;
    margin: 5px auto;
    /*overflow:hidden;*/
    position: relative;
}

.story {
    width: 700px;
    height: 525px;
    background-color: #CCC;
    border-radius: 8px;
}

.CON_page_in2 {
    width: 98%;
    height: 690px;
    margin: 5px auto;
    overflow: hidden;
    position: relative;
}

.btn_next,
.btn_prev {
    position: absolute;
    width: 56px;
    height: 50px;
    text-indent: -9999px;
    top: 50%;
    margin-top: -50px;
}

.btn_next {
    background: url(../images/btn_next.png) center no-repeat;
    right: -25px;
}

.btn_next:hover,
.btn_prev:hover {
    opacity: 0.8;
}

.btn_prev {
    background: url(../images/btn_prev.png) center no-repeat;
    left: -25px;
}

.text_frame2 {
    width: 700px;
    height: 200px;
    position: absolute;
    left: 0;
    bottom: 0px;
}

.text_frame_in {
    width: 98%;
    height: 120px;
    border-radius: 10px;
    padding: 1%;
    font-size: 18px;
    line-height: 26px;
    background-color: rgba(255, 255, 255, 0.8);
}


/*跳出視窗*/

.pop_box {
    font-size: 18px;
}

.pop_box h3 {
    background: url(../images/line_1.jpg) bottom left repeat-x;
    height: 40px;
    text-align: center;
    font-size: 24px;
    color: #ff4200;
    margin-bottom: 20px;
}

.tb_0 td {
    padding: 5px;
    line-height: 26px;
}

li.txt_p {
    color: red;
    text-align: center;
    padding-bottom: 30px;
    padding-top: 30px;
}

span.txt_p {
    color: red;
    text-align: center;
    padding-bottom: 30px;
}

.btn_fb2 {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    background-color: #ff831f;
    border-radius: 10px;
    height: 44px;
    line-height: 44px;
}

.btn_fb2 a {
    color: #FFF;
    text-decoration: none;
    font-size: 17px;
}

.btn_fb2:hover {
    background-color: #666666;
}


/*footer*/

.foot_bg {
    background-color: #f0f0f0;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    padding: 20px 10px 20px 10px;
}

.footer_ul {
    display: flex;
    flex-wrap: nowrap; /* 不換行 */
    gap: 10px; /* 取代 margin-right: 10px，間距更好控制 */
    list-style: none; /* 如果是 <ul> 元素，就去除預設樣式 */
    padding: 0;
    margin: 0;
}

.footer_li {
    line-height: 60px;
    height: 60px;
    white-space: nowrap; /* 確保 li 裡的文字不會換行 */
    padding: 0 10px; /* 加點內距讓內容有空間 */
}
.footer_li:last-child {
    margin-right: 0px;
}

.footer_li img {
    width: 130px;
}

.img_bottom img {
    position: relative;
    bottom: 0px;
    width: 100%;
    height: 50px;
}


/*相簿*/

.photo_box li {
    width: 25%;
    float: left;
    margin: 10px 0;
    opacity: 0.8;
}

.photo_box li:hover {
    opacity: 1;
}

.photo_box li:nth-child(4n+1) {
    clear: both;
}

.photo_box li img {
    margin: 10px;
}

.g_img {
    height: 175px;
    overflow: hidden;
    text-align: center;
}

.g_img img {
    position: relative;
    width: auto;
    height: auto;
    max-height: 175px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #FFF;
    -webkit-box-shadow: 2px 2px 6px #ccc;
    -moz-box-shadow: 2px 2px 6px #ccc;
    box-shadow: 2px 2px 6px #ccc;
}


/*數字頁*/

.page-no {
    clear: both;
    padding: 10px 0;
    overflow: hidden;
}

.no_box {
    clear: both;
    margin: 0 auto;
    position: relative;
}

.no_box ul {
    text-align: center;
    height: 40px;
    line-height: 22px;
    position: relative;
}

.no_box li {
    display: inline-block;
    height: 22px;
    color: #FC0;
    margin: 0 5px;
}

.no_box li a {
    margin: 0;
    color: #FFF;
    background-color: #3366CC;
    padding: 5px 20px;
    height: 30px;
    border-radius: 5px;
    display: block;
    line-height: 28px;
    font-weight: bold;
}

.no_box li a:hover {
    color: #FC0;
}

.youtube_box{
    width: 100%;
    display: block;
    height: 450px;
    overflow: hidden;
    margin: 30px auto;
}

.youtube_left {
    float: left;
    width: 45%;
    margin-bottom: 20px;
}

img.img_index{
    width: 100%;
    height: 450px;
}

.youtube_right {
    float: right;
    width: 45%;
    margin-bottom: 20px;
}

.embed-container {

    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {

    width: 100%;
    height: 450px;
}

.ad_box {
    /* padding: 40px 0; */
    clear: both;
}


/*共用*/

.w_100 {
    max-width: 1200px;
    margin: 50px auto;
}

.txt_line {
    text-decoration: underline;
    color: #fff;
}

a.txt_line .t_r {
    text-decoration: underline;
    background-color: #fff;
}

.logo {
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 1000;
}

.logo img {
    width: 150px;
}

.CC {
    clear: both;
}

.box_cc {
    display: flex;
    justify-content: center;
    margin: 50px 0px;
}

.box_cc h3{
    font-size: 26px;
    color: #02b098;
    line-height: 1.6;
    text-align: center;
    font-weight: normal;
}

img.ilisten_img{
    display: flex;
    margin: 10px auto;
    width: 20%;
}

ul.btn_ul{
    max-width: 800px;
    height: auto;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

li.btn_li{
    margin: 0px 5px;
}

img.img_android,
img.img_apple{
    width: 60%;
}

li.txt_cc {
    text-align: center;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.txt_red {
    color: #FF0000;
}

p.txt_gg {
    text-align: center;
    color: #8e8c8c;
    font-size: 26px;
    line-height: 2rem;
    margin: 20px 0px;
}


#gotop {
    position: fixed;
    right: 20px;
    bottom: 10px;
    cursor: pointer;
    /* 改變滑鼠指標 */
}