@charset "utf-8";
/* CSS Document */
html{ scroll-behavior: smooth;}
body{margin: 0; font-size:22px; background:#def4d9;font-family: "source-han-sans-traditional", sans-serif;
font-weight: 400;}
img{width:auto; height: auto; max-width: 100%; max-height: 100%;}
object{ width: 100%; height: auto; pointer-events: none;}
h1,h2{ margin: 0;}
h2{ margin:0 auto; text-align: center;}
h3{ margin:0; text-align: center; font-size: 2em; line-height: 1.1;}
em{ font-style: normal; font-weight: 700;}
ul,ol{ padding-left:0; list-style-position: outside;}
hr{width:40%; max-width:400px; min-width: 200px; margin: 20px auto; height: 2px; border-radius: 50px; border: 0; background: #043054;}
a{ color: inherit;}
*{ box-sizing: border-box;}

.mobile{ display: none;}


/*首頁*/
.index header{ background:url(../images/header.png) no-repeat center bottom,url(../images/header-bg.png) no-repeat center bottom; height: 100vh; max-height: 1080px; padding-top: 10vh; text-align: center; overflow-x: hidden;}
.index h1{ background: url(../images/標題.png) no-repeat center top/contain; width:50%; max-width: 930px; min-width: 300px; margin: 0 auto; position: relative;}
.index h1::before{ content: ''; display: block; padding-top: 43%;}
.index h1+.txt{ font-size: 1.1em; margin:-0.5em 0 ; background: url(../images/txt-bg.png) no-repeat center center; background-size: 100% 100%; display: inline-block; padding:2em; color:#043054;}
a.btn{ display: inline-block; background:url(../images/btn.png) no-repeat center center/contain ; padding:15px 30px; text-decoration: none; color:#fff;font-weight: bold; font-size: 1.8em; position: relative;}
a.btn-w{ display: inline-block; background:url(../images/btn-w.png) no-repeat center center/contain ; padding:15px 30px; text-decoration: none; color:#000; font-weight: bold;font-size: 1.8em; position: relative;}


/*預告頁*/
.preview{ background: url(../images/bg.png) repeat center top, url(../images/preview-bg.png) center top; min-height: 100vh; display: grid; place-items: center;}
.preview .container{ width:80%; max-width:1300px ; background: #fff; padding:50px; text-align: center; border-radius: 65px; padding:50px 0 30px 0;}
.preview h2{width:895px;}

/*規則頁*/
.rule{ padding-top: 100px; position: relative;}
@media screen and (min-width:1860px){
    .rule{ padding-top: 350px;}
    .rule:after{ content: ''; display: block; position: absolute; background: url(../images/flower-band.png) no-repeat center bottom; padding-top: 21.5%; top: -12.5%; width: 100%;}
}
.rule h2{ width:1169px;}
.rule .content{ background:#fff; border-radius: 65px; width:75%; max-width: 700px; margin: 30px auto 80px auto; padding:25px 50px 50px 75px;}
.rule a{ position: absolute; bottom:0; left: 50%; transform: translate(-50%,50%);}


dl{ display: grid; grid-template-columns: 100px 1fr; gap:15px 0;}
dt{ position: relative;font-weight: bold;}
dt:before{ content:''; display:block; width:1.1em; height: 1.1em; background: url(../images/list-style.png) no-repeat center center/contain; position: absolute; top:2px; left:-1.2em;}
dd{ font-size: 0.9em;}

/*任務頁*/
.mission{background:#043054 url(../images/bg.png) repeat center top/cover; min-height: 100vh; display: grid; place-items: center; position: relative;}
.mission:before{ content: ''; display: block; position: absolute; background: url(../images/flower-band.png) no-repeat center bottom / cover; padding-top: 21.5%; top: -27.5%; width: 100%;}
.mission h2{ width:809px;}
.mission .container{ width:70%; background: #043054; padding:50px; text-align: center; border-radius: 65px; padding:50px 0; position: relative; color:#fff;}
.mission a{ position: absolute; bottom:0; left: 50%; transform: translate(-50%,50%);}
.mission hr{ background: #fff;}


/*入圍名單按扭*/
.list{ padding-bottom:350px;}
.list-btn{display: grid; grid-template-columns: repeat(2,1fr); gap:20px; width:90%; max-width: 1500px; margin:0 auto;}
.list-btn a{ text-decoration: none; text-align: center; line-height: 1.2; color: #000; padding:50px 0; border-radius: 65px; color:#fff;}
.btn-author{ background:#3774df;}
.btn-book{background:#d6481d;}
.list-btn object{ height: 2em;}
.list-btn em{ display: inline-block; padding:3px 15px; border-radius: 50px; border:1px solid #fff; font-weight: normal; margin-top: 5px;}
/*popup*/
.popup{ display:none; position: fixed; top:0; bottom:0; left: 0; right: 0; background: #00000097; z-index: 10;}
.closex{ display: block; position:absolute; top:10px; right:20px; width:25px; height:25px;}
.closex:before{ content:''; display:block; width:3px; height: 25px; transform: rotate(45deg); position: absolute; background: #000000; left: 12px;}
.closex:after{ content:''; display:block; width:3px; height: 25px; transform: rotate(-45deg); position: absolute;background: #000000; left: 12px;}
.closetxt{ display:inline-block; padding:5px 15px; border-radius: 5px; display: inline-block; margin: 10px 0 25px 0; cursor: pointer; background: #d2d2d2; font-size:13px; color:#232323;}
.nominate-box{width:90%; max-width: 1000px; position: fixed; top:50%; left: 50%; transform: translate(-50%, -50%); background: #fff;}
.nominate-box .flexbox{display: flex; overflow-y: scroll;height: 450px;}
.box-title{ width:40%; padding:30px 20px 20px 20px; box-sizing: border-box; position: sticky; top:0; left: 0; color:#fff;display: grid; place-items: center;}
.box-title h4{text-align: center; line-height: 1.1; margin: 0 auto;}
.box-title h4 em{ display: inline-block; padding:3px 15px; border-radius: 50px; border:1px solid #fff; font-weight: normal; }
.box-title h4 object{ height: 2em; }
.nominate{text-align: center; display: grid;}
.nominate a{ text-decoration: none; color:#000;}
.nominate span{ display: block;}
.N-vote{ display: block; border-radius: 5px; border:1px solid #000; padding:5px; margin:10px 0;}
.N-img img{ margin:0 auto; width:100%;}
.zone-book .N-author{ font-size: 0.85em; color:#aaaaaa;}
.zone-author .box-title{ background:#3774df;}
.zone-book .box-title{ background:#d6481d;}
.popup .author-wrap,.popup .book-wrap{ width:calc(60% - 35px); box-sizing: border-box; padding:20px 0 20px 20px;}
.author-wrap,.book-wrap{ display: grid; gap:20px; grid-template-columns: repeat(3,1fr); max-width: 1220px; margin: 0 auto;}
.author-wrap .N-img img{ position: relative;border-radius: 100px; overflow: hidden; z-index: 5;}
.note{ line-height: 1.1; font-size: 0.8em;}

.vote .author-wrap .N-img{  position: relative; padding:20px; background:url(../images/img-bg.png) no-repeat center center/contain;}
.vote .nominate:nth-of-type(odd) .N-img{background:url(../images/img-bg2.png) no-repeat center center/contain;}


/*投票頁*/
.vote header{ background:url(../images/bg.png) repeat center top; min-height: 100vh; display: grid; place-items: center;}
.vote .author-wrap{ display: grid; gap:20px; grid-template-columns: repeat(5,1fr);}
.vote .book-wrap{ display: grid; gap:20px; grid-template-columns: repeat(4,1fr);}
.vote h1{ background:url(../images/分頁標題.png) no-repeat center center/contain; width:85%; max-width: 1102px; min-width: 300px; margin: 0 auto; position: relative; padding:50px 0;}
.vote h1:before{ content: ''; display: block; padding-top: 56%;}

.step{ background:#fff; padding: 50px;}
.step ol{ margin:0 auto; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; padding-left: 0; gap:10px;}
.step li{ display: grid; grid-template-rows: 65px 1fr; justify-items: center; text-align: center;}

.tabs>ul{ display: grid; grid-template-columns: repeat(2,1fr); list-style: none; margin: 0; padding: 0; }
.tabs>ul a{text-decoration: none;color:#fff; text-align: center; display: block; padding:50px;}
.tabs>ul>li{ position: relative;}
    li.ui-state-active:after{ content:''; display: block; position: absolute; left:calc(50% - 30px); bottom:0; border:30px solid transparent; border-bottom-color:#def4d9;}

.tabs>ul object{ height: 2em;}
.N-bookname{ font-size: 0.9em;}
.N-author{ font-size: 0.85em;}
.N-number{font-weight: 900; font-size:1.2em;}
.N-vote{ font-size: 0.8em;}
.author-wrap .N-number{color:#3774df; }
.book-wrap .N-number{color:#d6481d;}
.tabs .zone-author, .tabs .zone-book{padding: 50px; }

.aware{ font-size: 2em; font-weight: bold; text-align: center; margin:20px 0 50px 0;}

/*popup*/
.msg-box{ position: fixed; top:50%; left: 50%; margin: -100px 0 0 -200px; padding:20px 20px 0 20px; width:400px; border-radius: 5px; height: 200px; background: #fff;box-sizing: border-box; text-align: center; display: flex; align-items: center;justify-content: center;flex-direction:column;}
.msg-box a{ text-decoration: none; color: inherit;}

/*任務頁
.voicemail section{background:#043054 url(../images/bg.png) repeat center top/contain; min-height: 100vh; padding: 100px 2.5%; position: relative;}
.voicemail .container{ border:40px solid #6ab1e2; width:85%; max-width: 850px; padding:0 50px 50px 50px; border-radius: 65px; margin: 0 auto; background:#043054;}
.voicemail .container::before{ content: ''; display: block; background:url(../images/phone-island.png) no-repeat center top; height: 45px; width:100%;}
.voicemail h1{ background: url(../images/任務頁標題.png) no-repeat center top/contain; margin: 50px 30px 30px 30px;}
.voicemail h1:before{content: ''; display: block; padding-top:48.5%;}
.voicemail .content{ display: grid; grid-template-columns:repeat(2,1fr); align-items: center; gap:10px;}
.MS-txt{ font-size:16px; color:#fff;}
.MS-txt ol{ padding:0 0 0 1em;}
.MS-btn{ text-align: center; margin: 30px 0;}*/


@media screen and (max-width:1440px) {
    body{ font-size: 20px;}
    .index header{height: 700px; padding-top: 5vh; background-size: 1440px;}
    .preview h2{width:537px;}
    .rule h2{ width:701px;}
    .mission h2{ width:485px;}

    .list-btn object{ height: 1.5em;}
    .box-title h4 object{ height: 1.5em; }
    .tabs>ul object{ height: 1.5em;}

    .preview{ background-size: 1440px,cover;}
    .preview .container{ border-radius: 30px;}
    .mission .container{ border-radius: 30px;}
    .list-btn a{ border-radius: 30px;}
    .rule .content{ border-radius: 30px;}
    .voicemail .content{ border-radius: 30px;}

    .list{ padding-bottom:200px;}

    .rule:after{ content: ''; display: none;}

    .mission{ background-size: 1440px;}
    .mission:before{ top: -23%;}

    .step img{ width:80%;}

    .voicemail .container{ border-width:30px ;}
}
@media screen and (max-width:1080px) {
    .vote .author-wrap, .vote .book-wrap{ grid-template-columns: repeat(3,1fr);}
}

@media screen and (max-width:780px) {
    body{font-size: 16px;}
    .index header{ background: url(../images/header.png) no-repeat center bottom/1000px,url(../images/header-bg.png) no-repeat center bottom/1220px; height: 75vh; padding-top: 10vh;}
    .preview{background: url(../images/bg.png) repeat center top/1000px, url(../images/preview-bg.png) center top/1220px 100%;}
    .mission{background-size: 1000px;}
    .mission:before{ background-size: 1000px; height:215px; padding-top: 0; top: -16.5%;}

    .vote header{ min-height:60vh;  background-size:1000px;}

    .index h1{width:88%;}
    .index h1+.txt{ margin:-1em 0 0 0 ;}
    
    .step ol{grid-template-columns: repeat(2,1fr); }
    .voicemail .content{ grid-template-columns: 1fr;}

    .nominate-box .flexbox{ flex-direction: column;}
    .box-title{width:100%;}
    .popup .author-wrap, .popup .book-wrap{width:100%;}

    a.btn,a.btn-w{ font-size: 1.5em;}
    .voicemail a.btn-w{ font-size: 2em;}
    .MS-img{text-align: center;}
    .MS-img img{ width:70%;}
    .MS-btn{ margin: 30px 0 0 0;}

    .step{ padding:50px 20px;}
    .tabs>ul a{ padding:20px 20px 30px 20px;}
    li.ui-state-active:after{ left: calc(50% - 10px); border: 20px solid transparent;border-bottom-color: #def4d9;}
}

@media screen and (max-width:500px) {
    .desktop{ display: none;}
    .mobile{ display: block;}

    .index header{ height: 510px; background-size:800px, 1000px;}
    .preview{ background-size: 800px, cover;}
    .mission{background-size: 800px;}
    .mission:before{ background-size: 800px; height:172px; padding-top: 0; top: -13%;}

    .vote header{ background-size:800px;}

    .preview h2{width:358px;}
    .rule h2{ width:263px; }
    .mission h2{ width:323px;}

    .preview .container{width:85%;}
    .rule .content{width:85%; padding: 25px 25px 25px 50px;}
    .mission .container{width:85%;}

    .list-btn{ gap:10px;}
    .list-btn object{ height: 1.1em;}

    dl{grid-template-columns: 85px 1fr;}
}

/***********POBAR***********/
.pobar{ display:flex; padding: 5px 15px;  width:100%; box-sizing: border-box; font-size:16px; font-weight: 500; position: absolute; top:0; left: 0; z-index: 10;}
.menu{ text-align: right; flex: 1;z-index: 20; position: relative;}
.btn-menu{display:inline-block; line-height: 44px; width:25px; margin:5px 0 0 0;}
.btn-close{ position:absolute; top:8px; right: 15px;}
.logo{width:80px;}
#option{margin:0; display: none; position: fixed; right: 0; top:0; transition: all 0.5s; padding: 50px 5px 20px 5px;  background:#03253ddd; width:50%; max-width:300px; height: 100vh; box-sizing: border-box; z-index: 15; box-shadow: -5px 0 10px #0000002e;}
#option li{ display: block; text-align: center; margin: 30px 0;}
#option a{color:#fff; text-decoration: none;}
#option img{ width:25px; margin:0 auto;}
.menu.show #option{display: block;}
#gotop{ position:fixed; bottom:20px; right:20px; cursor: pointer; z-index:99;}

/*************/
@media screen and (max-width:468px){
	.pobar{ padding:5px; margin-bottom:25px;}
	.logo{width:65px;}
	#gotop{ bottom:20px; right:20px;}
	
}