@charset "utf-8";
/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
th{font-weight:normal; text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
img{border:0;}
ol, ul{list-style:none;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none; cursor:pointer;}
input , select , textarea , button{outline:none; border-radius:0; font-family:arial , "微軟正黑體";}
button{padding:0; cursor:pointer;}

body{background:url(../images/top_bg.jpg) no-repeat center top #f7c6bf; font-family:arial , "微軟正黑體";}

/* header */
#header{position:relative; width:96%; max-width:814px; margin:0 auto; z-index:1;}

/* logo */
#logo{ position:absolute; left:-200px; top:20px; width:168px; height:88px; background:url(../images/logo.png); background-size:100% auto; text-indent:-9999px;}
#logo a{ display:block; height:100%;}

#banner img{ display:block; width:100%; height:auto;}

/* container */
#container{position:relative; width:96%; max-width:814px; margin:-20px auto 0 auto;}

/* navigation */
#navigation{position:absolute; left:-200px; top:0;}
#navigation a{display:block; width:184px; height:51px; line-height:42px; margin:30px 0; background:url(../images/menu_bg.png) no-repeat center; font-size:26px; color:#9f1f24; font-weight:bold; letter-spacing:5px; text-align:center; box-sizing:border-box; transition:all .3s;}
#navigation a:hover{ font-size:28px;}
#container > .content{min-height:450px; padding:60px 20px 20px 20px; background:rgba(255,255,255,.3);}
#container #main-title{margin-bottom:35px; font-size:27px; color:#000; letter-spacing:.8px; text-align:center;}

/* mobile */
#mobi-btn{ position:absolute; right:2%; top:30px; margin-top:-22.5px; display:none; width:45px; height:45px; border-radius:50%; cursor:pointer; z-index:1002; background:#982124; border-radius:50%; }
#mobi-btn hr{position:absolute; left:10px; width:25px; height:2px; background:#fff; border:none; border-radius:3px;}
#mobi-btn hr.line-1{top:4px;}
#mobi-btn hr.line-2{top:13px;}
#mobi-btn hr.line-3{top:22px;}
#mobi-btn.active{ transform:rotate(360deg); -webkit-transform:rotate(360deg);}
#mobi-btn.active hr.line-1{ transform:translateY(6px) rotate(-45deg); -webkit-transform:translateY(6px) rotate(-45deg); top:7px;}
#mobi-btn.active hr.line-2{ transform:translateY(0px) rotate(45deg); -webkit-transform:translateY(0px) rotate(45deg); }
#mobi-btn.active hr.line-3{top:22px;opacity:0;}

#mobile-menu{ width:100%; height:auto; box-sizing:border-box;  background:rgba(0,0,0,.8);  position:absolute; top:85px; z-index:1001; overflow-y:auto; display:none;}
#mobile-menu > a{display:block; text-align:center; padding:0 20px; box-sizing:border-box; border-bottom:1px solid #333; font-size:20px; color:#fff; line-height:50px; position:relative; cursor:pointer; transition:all .3s; -webkit-transition:all .3s; }




/* common */
#common{padding:20px 0; text-align:center;}
#common a{display:inline-block; margin:5px; padding:10px 25px; font-size:18px; color:#FFF; font-weight:bold; border-radius:10px; transition:all .3s;}
#common a:before{content:""; display:inline-block; width:16px; height:14px; margin-right:10px; background:url(../images/common.png);}
#common a.home{background:#982124;}
#common a.home:before{background-position:left top;}
#common a.back{background:#ed6c59;}
#common a.back:before{background-position:right top;}
#common a:hover{background-color:#666;}

/* event */
#event{max-width:500px; margin:0 auto;}
#event li{position:relative; padding:10px 0 10px 180px;}
#event li span{position:absolute; left:0; top:10px; display:block; width:160px; font-size:20px; color:#000; line-height:38px; font-weight:bold;}
#event li span:before{content:"*"; position:relative; top:3px; display:inline-block; margin-right:5px; font-size:30px; color:#c30c00; vertical-align:middle;}
#event li span.code:before{content:""; padding-left:10px;}
#event li input ,
#event li select{display:block; width:100%; height:38px; padding:0 10px; border:1px solid #CCC; font-size:20px; box-sizing:border-box;}

#event li.invoice .wrap{position:relative; padding-left:115px;}
#event li.invoice .wrap input{text-align:center;}
#event li.invoice .wrap .word{position:absolute; left:0; top:0; width:110px;}

#event li .sample{padding-top:10px; overflow:hidden;}
#event li .sample img{float:left; width:57%; border:1px solid #ebebeb; box-sizing:border-box;}
#event li .sample p{float:right; width:39%; font-size:16px; color:#000; letter-spacing:.8px; font-weight:bold;}
#event li .sample p:before{content:""; display:inline-block; width:0; height:0; margin-right:5px; border-style:solid; border-width:4px 0 4px 7px; border-color:transparent transparent transparent #000;}

#event li.verify .wrap{position:relative; padding-right:45px;}
#event li.verify .wrap .refresh{position:absolute; right:0; top:0; display:block; width:38px; height:38px; background:url(../images/refresh.png) center center no-repeat #cfcfcf; border-radius:5px; text-indent:-9999px; transition:all .3s;}
#event li.verify .refresh:hover{background-color:#999;}
#event li.verify img{display:block; width:100%; height:auto; margin-top:10px; border:1px solid #ebebeb; box-sizing:border-box;}

#event li.check{padding-left:0; font-size:18px; color:#000; line-height:30px; letter-spacing:.8px;}
#event li.check input{display:inline-block; width:15px; height:15px; margin-right:5px; vertical-align:middle;}
#event li.check a{color:#000; text-decoration:underline;}

#event button{display:block; width:270px; margin:20px auto 0 auto; padding:10px 0; background:#333; border:none; border-radius:10px; font-size:18px; color:#FFF; font-weight:bold; transition:all .3s;}
#event button:hover{background:#666;}

/* introduction */
#introduction{ max-width:700px; margin:0 auto; font-size:20px; color:#000; line-height:30px; overflow:hidden;}
#introduction p{position:relative; padding:0 0 15px 40px;}
#introduction span{position:absolute; left:0; top:0; display:block; width:30px; height:30px; margin-right:10px; background:#841E2B; border-radius:50%; color:#FFF; line-height:30px; text-align:center; font-weight:normal;}
#introduction .info_block { clear:both; margin:20px 0 0 0; padding:20px 0 0 0; border-top:1px dashed #666;}
#introduction .info_block h3{ font-size:20px; color:#841E2B; margin:0 0 10px 0;}
#introduction .info_block p{ background:url(../images/arrow.png) no-repeat 5px 6px; padding:0 0 0 25px; font-size:18px; }
#introduction .info_block2 { clear:both; margin:20px 0 0 0; padding:20px 0 0 0; border-top:1px dashed #666;}
#introduction .info_block2 h3{ font-size:20px; color:#841E2B; margin:0 0 10px 0;}
#introduction .info_block2 p{ font-size:16px; }
#introduction .info_block2 .share_block {overflow:hidden; padding:10px; background:rgba(255,255,255,.2); border-radius:10px; margin:0 0 10px 0;}
#introduction .info_block2 .share_block dt ,#introduction .info_block2 .share_block dd{ float:left;}
#introduction .info_block2 .share_block dt{ width:20%; padding:10px; box-sizing:border-box; }
#introduction .info_block2 .share_block dt img{ display:blockl; border-radius:50%;}
#introduction .info_block2 .share_block dd{ width:80%; padding:10px 10px 10px 20px; box-sizing:border-box;}
#introduction .info_block2 .share_block dd p{ margin:0 0 5px 0; font-size:18px; padding:0 0 5px 0; border-bottom:1px solid #666; color:#111111; }
#introduction .info_block2 .share_block dd p b{ margin:0 10px 0 0;}
#introduction .info_block2 .share_block dd .share_txt{ font-size:16px; line-height:25px; color:#333;}
#introduction .info_block3 { clear:both; margin:20px 0 0 0; padding:20px 0 0 0; border-top:1px dashed #666;}
#introduction .info_block3 h3{ font-size:20px; color:#841E2B; margin:0 0 10px 0;}
#introduction .info_block3 h4{ font-size:18px; color:#0b6962; font-weight:normal;}
#introduction .info_block3 p{ background:url(../images/arrow.png) no-repeat 5px 6px; padding:0 0 0 25px; font-size:17px; }

#introduction dt{ margin:0 0 20px 0; text-align:center;}
#introduction dt img{ display:inline-block; max-width:100%; margin:0 auto; }

/* information */
#information{padding:0 15px;}
#information dl{margin-bottom:20px; padding-bottom:20px; border-bottom:1px dashed #333;}
#information dl:last-child{border-bottom:none;}
#information dt{margin-bottom:15px; font-size:20px; font-weight:bold;}
#information dd{font-size:16px; color:#333; line-height:30px;}
#information dd p{padding:0 0 10px 17px; text-indent:-14px;}
#information dd p:last-child{padding-bottom:0;}
#information dd p.notice{padding-left:0; color:#000; font-weight:bold; text-indent:0;}
#information dd p.indent{padding-left:20px; text-indent:-22px;}
#information dd p.award-tit{padding-left:0; color:#000; font-weight:bold; text-indent:0; padding:10px 0 10px 15px; position:relative;}
#information dd p.award-tit:before{ content:""; display:block; position:absolute; left:0; top:50%; margin-top:-4px; width:8px; height:8px; background:#000; border-radius:50%;}
#information dd p b{color:#F00;}
#information dd p a{color:#237594; font-weight:bold;}
#information dd p a:hover{color:#333;}
#information dd .wrap{overflow-x:auto; text-align:center;}
#information dd .wrap dl{ width:49%; vertical-align:top; display:inline-block; background:#fff; text-align:center; border-bottom:1px dashed #ccc;}
#information dd .wrap dl img{ max-width:100%; height:auto;}
#information dd .wrap dl dt,
#information dd .wrap dl dd{ padding:5px 10px;}
#information dd .wrap dl dt{ background:#f6f6f6;}
#information dd .wrap dl h3{ padding:5px; font-size:18px; line-height:21px; color:#cb0000;}
#information dd .wrap dl h4{ padding:2px; font-size:17px; line-height:21px; color:#000; letter-spacing:1px;}
#information dd .wrap dl h5{ padding:2px; font-size:13px; line-height:18px; color:#333; letter-spacing:1px;}
#information dd .wrap dl p{ padding:5px 0 0 10px; font-size:13px; line-height:18px; color:#666;}
#information dd .wrap dl a.link{ display:block; transition:all .3s;}
#information dd .wrap dl a.link:hover{ opacity:.8;}
#information dd table{width:100%; min-width:740px; border-left:2px solid #999; border-top:2px solid #999; border-bottom:2px solid #999; border-right:2px solid #999;}
#information dd td{padding:5px 10px; border-right:1px solid #999; border-bottom:1px solid #999;}
#information dd thead td{background:#666; color:#FFF;}
#information dd td a{color:#237594; font-weight:bold;}
#information dd td a:hover{color:#333;}
#information dd td a.link{ background:url(../images/fb_link.jpg) no-repeat left; width:201px; height:30px; margin-left:10px; display:inline-block; text-indent:-99999px; transition:all .3s;}
#information dd td a.link:hover{ opacity:.6;}
#information dd.word-s{ font-size:15px; line-height:22px;}
#information dd.word-s p{ padding:0 0 5px 17px;}
#introduction .info_block p.word-1{ background:none; padding:0 0 0 45px; text-indent:-20px;}
.winner-p{ text-align:center; font-size:18px; font-weight:bold; line-height:30px;}

.winners{}

/* award-btn*/
.award-btn{ text-align:center; margin:0 0 20px 0;}
.award-btn a{ display:inline-block; color:#fff; font-size:20px; padding:10px 20px; box-sizing:border-box; border-radius:10px; margin:0 5px; transition:all .3s;}
.award-btn a.btn1{ background-color:#008E48;}
.award-btn a.btn2{ background-color:#00898e;}
.award-btn a.btn3{ background-color:#1d5d8f;}
.award-btn a:hover{ background-color:#666;}

/* awards */
#awards .tab_link{ margin:0 0 20px 0; text-align:center;}
#awards .tab_link a{ display:inline-block; width:25%; font-size:16px; color:#333; padding:10px; background:#fff; margin:0 1% 10px 0; box-sizing:border-box;  font-weight:bold; transition:all .3s;}
#awards .tab_link a.active{ background:#ccc;}
#awards .tab_link a:hover{ background:#ccc;}
#awards .award_list{ border-bottom:1px dashed #333; padding-bottom:30px; margin-bottom:30px;}
#awards h3{ font-size:20px; color:#333; text-align:center;position:relative;}
#awards h3 .date{ color:#CB0000; margin:0 0 5px 0;}
#awards .award{ color:#333; font-weight:bold; position:relative; padding:0 0 0 20px;margin-bottom:10px; }
#awards .award:before{ content:""; display:block; width:5px; height:5px; position:absolute; top:8px; left:2px; background:#333; border-radius:50%;}
#awards table{width:100%; margin-bottom:10px; border-left:1px solid #CCC; border-top:1px solid #CCC;}
#awards td{width:33%; padding:5px 10px; background:#FFF; border-right:1px solid #CCC; border-bottom:1px solid #CCC; box-sizing:border-box;}
#awards td.col-1{}
#awards td.col-2{}
#awards td.col-3{}
#awards thead td{background:#666; color:#FFF;}
#awards .more{ display:block; width:30px; color:#fff; background:#333; border-radius:20px; padding:5px 20px; margin:20px auto 0 auto; font-size:15px; transition:all .3s;}
#awards .more:hover{ background:#666;}
.btn { text-align:center; margin:0 0 20px 0;}
.btn .download{display:inline-block; margin:5px; padding:10px 25px; border-radius:20px; font-size:18px; color:#FFF; font-weight:bold; background:#008E48; transition:all .3s;}
.btn .download:before{content:""; display:inline-block; width:16px; height:16px; margin-right:10px; background:url(../images/download.png) no-repeat;}
.btn .download:hover{background-color:#666;}
.note{ font-size:15px; line-height:20px; margin:20px 0 0 0;}
.note2{ font-size:15px; line-height:20px; display:none;}

/* footer */
#footer{padding:20px 10px; font-size:15px; color:#474747; text-align:center;}

/* end */
.end{ font-size:20px; display:block; margin:20px 0; text-align:center;}

/* gotop */
#gotop{ display:none; position:fixed; top:50%; right:20px; margin-top:-30px; width:60px; height:60px; border-radius:50%; background:url(../images/top.png) no-repeat center 10px rgba(0,0,0,.8); color:#fff; font-weight:bold; font-size:15px; line-height:70px; text-align:center; transition:all .3s; }
#gotop:hover{ opacity:.8;}

/* RWD */
@media screen and (max-width:1240px){
/* logo */
#logo{ width:120px; height:63px; left:-120px;}
/* container */
#container{margin-top:0;}
/* navigation */
#navigation{position:static; padding:20px 0; text-align:center;}
#navigation a{display:inline-block; margin:0 10px; width:auto;}
/* awards */
#awards .tab_link a{ width:11.5%;}
}
@media screen and (max-width:1120px){
body{background-image:url(../images/top_bg_mobile.jpg);}

/* header */
#logo{position:static; left:0; margin:10px 0 0 2%;}
/* banner */
#banner img{ display:none;}
#banner{ width:814px; height:374px; background:url(../images/banner_mobile.png) no-repeat center top;  background-size:100% auto; }
}
@media screen and (max-width:840px){
.note2{ display:block;}
/* header */
#header{ width:100%;}
/* banner */
#banner{ width:100%; background-size:contain; height:inherit; position:relative; padding-bottom:46%;}
/* gotop */
#gotop{ top:inherit; bottom:20px; margin-top:0; right:2%;}
#navigation{ display:none;}
/* mobile */
#mobi-btn{display:block;}
/* container */
#container{ width:100%; margin:0 auto; padding:30px 20px 0 20px; box-sizing:border-box; background:#f7c6bf; position:relative; top:-20px;}
/* award-btn */
.award-btn a{ margin:0 1%;}
/* information */
#information dd .wrap dl{ width:49%; margin-bottom:5px;}
}
@media screen and (max-width:700px){
/* award-btn*/
.award-btn a{ margin:0 auto 10px auto; display:block;}
/* information */
#information dd .wrap dl{ min-height:280px;}
}
@media screen and (max-width:600px){
/* navigation */
#navigation{width:100%; margin:0 auto;}
#navigation a{width:80px; height:60px; margin:5px; box-shadow:3px -3px 0 #370000; font-size:15px; line-height:60px;}
/* awards */
#awards .tab_link a{ width:24%;}
/* introduction */
#introduction .info_block2 .share_block dt ,#introduction .info_block2 .share_block dd{ float:none; width:100%; padding:5px;}
#introduction .info_block2 .share_block dt{ margin:0;}
#introduction .info_block2 .share_block dd p{ text-align:center;}
#introduction .info_block2 .share_block dd b{ display:block;}
/* information */
#information dd .wrap dl{ min-height:260px;}
}

@media screen and (max-width:480px){
/* container */
#container > .content{padding-top:30px;}
#container #main-title{margin-bottom:20px;}
/* common */
#common a{padding:10px 20px;}
/* event */
#event li{padding-left:0;}
#event li span{position:static;}
#event li.invoice .wrap{padding:0;}
#event li.invoice .wrap .word{position:static; width:100%; margin-bottom:10px;}
#event li .sample img ,
#event li .sample p{float:none; width:100%; text-align:center;}
#event li .sample p:before{border-width:0 4px 7px 4px; border-color:transparent transparent #000 transparent;}
/* information */
#information dd .wrap dl{ width:100%; min-height:auto;}
}
@media screen and (max-width:414px){
/* header */
#logo{ width:100px; height:52px;}
#mobi-btn{ top:25px;}
#mobile-menu{ top:70px;}
/* banner */
#banner{ margin-top:10px;}
}
@media screen and (max-width:375px){
/* navigation */
#navigation a{width:140px;}
}