@charset "UTF-8";
html{ scroll-behavior: smooth;}
body{ margin:0; padding:0; background: #f6efe2 url(../images/bg.png) center top; font-size: 20px; font-family: "source-han-sans-traditional", sans-serif; font-weight: 300; position: relative;}
*{ box-sizing: border-box;}
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
header{ overflow: hidden; position: relative;}
section{ padding:50px 2.5%; position: relative;}
h1{ margin: 0;}
.page h1{text-align: center;}
h2{ text-align: center; margin: 20px 0;}
dl,dt,dd{ margin: 0;}
ul{ margin: 0; list-style: none; padding-left: 1.2em;}
li{ margin-bottom: 10px; position: relative;}
ol{ counter-reset: number; list-style:none; padding-left: 2em;}
ol li{ position: relative;}
ol li:before{counter-increment: number;  content: counter(number);width:22px; height: 22px; line-height: 22px; font-size: 0.8em; text-align: center; border-radius: 50px; background:#ed3913; color:#fff; position: absolute; left:-2em; top:4px;}
svg{ vertical-align: sub;}

.wrap{ max-width: 1440px; margin: 0 auto;}
.wrap-s{max-width: 880px; margin: 0 auto;}

.notice{ margin-top: 20px;}
.notice ul{ font-size: 0.9em; }
.notice li:before{ content: '※'; position: absolute; top:0; left: -1.2em;}
.pin{ padding-left: 1.5em;}
.pin li:before{content:'📌' ;position: absolute; top:0; left: -1.5em;}
.star{padding-left: 1.5em;}
.star>li:before{ content: '⭐';position: absolute; top:0; left: -1.5em;}

.columns{columns: 2; gap: 3em; padding:2em 2em 2em 3.2em; border-radius: 35px;}

/********NAV********/
nav{ width:95%; background:#fff; border-radius: 15px; margin: 0 auto; padding:20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; box-shadow: 0 3px 5px #c5b2905c; position: sticky; top:10px; left: 2.5%; z-index: 10;}
nav a{ text-decoration: none; color: #000; text-align: center; font-weight: 700; line-height: 1.1; padding:0 50px;}
nav a+a{ border-left:1px solid #000;}
nav span{ display: block;}
    .P3 nav,.P4-1 nav,.P4-2 nav,.P5 nav,.P6 nav{ margin-top: -180px;}
/********FOOTER********/
footer{ font-size: 0.75em; text-align: center; padding:1em; color:#eab147; line-height: 1.1;}


/********首頁、徵文辦法********/
.index header{ max-height: 1180px; aspect-ratio: 1920/1180; background:url(../images/index-bg.png) no-repeat left top/cover; position: relative;}
.index header:before{ content: ''; display: block; position: absolute; inset: 0 0 0 0; background: url(../images/index-blast.png) no-repeat left top/cover; animation: blast 1s;}
/*徵文組別*/
#RULE h2{ margin-bottom: 0;}
.GROUP{ display: grid; grid-template-columns: repeat(3,1fr); gap:20px;}
    .GROUP>div{ display: grid; grid-template-rows: 50px 1fr 50px; border-radius: 35px; padding:0 20px 10px 20px;background: #fff; text-align: center; position: relative;  margin-top: 148px;}
        .GROUP>div:before{content:''; display: block;  position: absolute; top:0; left:50%; transform: translate(-50%,-90%);}
    .GROUP p{ text-align: left;}
    .GROUP em{ font-style: normal; font-weight: 700;}
    .GROUP a{ text-decoration: none; display:inline-block; color:#fff;  padding:5px 10px 5px 20px; border-radius: 25px;}
        .GROUP a:hover svg{ margin-left: 10px; transition: all .5s;}
    .GROUP .G-love{  border:3px solid #ffcfe3;}
    .GROUP .G-fantasy{ border:3px solid #aec9fd;}
    .GROUP .G-blgl{ border:3px solid #f9b29b;}
        .GROUP .G-love:before{ width:244px; height: 148px; background:url(../images/group-love.png) no-repeat center center/cover;}
        .GROUP .G-fantasy:before{ width:111px; height: 139px; background:url(../images/group-fantasy.png) no-repeat center center/cover;}
        .GROUP .G-blgl:before{ width:139px; height: 129px; background:url(../images/group-blgl.png) no-repeat center center/cover;}
        .GROUP .G-love a{ background: #f76fa7;}
        .GROUP .G-fantasy a{ background: #78aaf9;}
        .GROUP .G-blgl a{ background: #ff7f52;}
        .G-love em{ color:#ee4c8f;}
        .G-fantasy em{ color:#2959d1;}
        .G-blgl em{ color:#e66013;}

/*比賽時程*/
.TIMELINE{display: flex; gap:50px; justify-content: center; text-align: center; }
    .TIMELINE strong{ display: block;}
    .TIMELINE>div{ position: relative;}
    .TIMELINE>div+div:before{ content: ''; display: block; width:50px; height: 2px; background:#eab147; top:80px; left: -50px; position: absolute;}

/*徵文辦法*/
.DETAILS{ display: grid; grid-template-columns: repeat(2,1fr); gap:20px; justify-content: stretch;}
.rules,.methods{ display: grid; grid-template-rows: 160px 1fr;}
    .rules dl{ display: grid; grid-template-columns: 100px 1fr;}
    .rules>div,.methods>div{ background:#ffffffd7; border: 3px solid #f7dfb3; border-radius: 35px; padding:30px;}
    .rules dt,.rules dd{ margin-top: 10px;}
/*徵文獎項*/
.AWARDS{ display: grid; grid-template-columns:1fr 2fr; gap:20px; justify-content: stretch;}
.AWARDS>div{ background:#ffffffd7; border: 3px solid #f7dfb3; border-radius: 35px; padding:0 30px 30px 30px;}
    .award .A-name{ display: grid;  grid-template-columns: 300px 1fr 100px; gap: 5px; margin: 10px 0;}
    .A-name strong{ font-size: 0.9em; border-radius: 10px; text-align: center; font-weight: normal; align-content: center;}
    .shortlist{ text-align: center;}
    .shortlist span{ text-align: center; font-size: 1.2em; font-weight: 700;}
    .shortlist .A-name{ grid-template-columns: 1fr; margin-bottom: 2em;}
    .longlist{ display: flex;}
    .longlist span{ font-size: 1.1em; font-weight: 700; text-align: right;}
    .trophy{ width:300px; background:url(../images/trophy.png) no-repeat left bottom/contain;}
/*活動注意事項*/
.columns{background: #ffffffd7;}
    
.page header{ background:url(../images/content-bg.png) no-repeat center bottom/cover; height: clamp(225px,45vw,700px); position: relative;}
.page header:before{content: ''; display: block; position: absolute; inset: 0 0 0 0; }
.P2 header{background:url(../images/content-bg2.png) no-repeat center bottom/cover; height: clamp(248px,56.5vw,880px);}
    .P1 header:before{ background:url(../images/header-page1.png) no-repeat center center/cover;}
    .P2 header:before{ background:url(../images/header-page2.png) no-repeat center center/cover;}
    .P3 header:before{ background:url(../images/header-page3.png) no-repeat center center/cover;}
    .P4-1 header:before{ background:url(../images/header-page4-1.png) no-repeat center center/cover;}
    .P4-2 header:before{ background:url(../images/header-page4-2.png) no-repeat center center/cover;}
    .P5 header:before{ background:url(../images/header-page5.png) no-repeat center center/cover;}
    .P6 header:before{ background:url(../images/header-page6.png) no-repeat center center/cover;}
    
/********評審大獎********/
.JUDGES{ display: flex; gap: 50px; align-items: stretch}
    .JUDGES>div{ flex: 1;}
    .JUDGES h3{ text-align: center;}
    .JUDGES h4{ text-align: center; margin: 0 0 10px 0;}
    .JUDGES h4 span{ display: inline-block; font-size: 0.8em; color:#fff; font-weight: normal; margin-right: 5px; padding: 0 5px;}
        .JUDGES .G-love h4 span{ background: #f76fa7;}
        .JUDGES .G-fantasy h4 span{ background: #78aaf9;}
        .JUDGES .G-blgl h4 span{ background: #ff7f52;}
.judge{ background:#fcf8f2; padding: 20px 0; border-radius: 35px;}
    .JUDGES .info{ padding:0 20px; font-size: 0.8em;}
    h5{ font-family: "lxgw-wenkai-tc", sans-serif; font-weight: 700; font-size: 1.3em; text-align: center; margin: 0 0 1.5em 0;}
    h5 svg{transform: rotate(-10deg); margin-right: 5px;}
.speaking{ flex: 1; position: relative; filter: drop-shadow( 0 3px 5px #c5b2905c); font-family: "lxgw-wenkai-tc", sans-serif; transform: rotate(-1deg); padding:20px;}
    .speaking h4{ text-align: left; font-size: 1.1em; padding-top: 1em;}
    .speaking h4 svg{ margin-right: 5px;}
    .speaking:before{ content:''; display:block; height:46px; width:97px;  position: absolute; top:-25px; left: -20px;}
    .G-love .speaking{ color:#d61556; background: url(../images/speak-bg-love.png) no-repeat right bottom, #fbf5e8 url(../images/line.png); }
    .G-love .speaking:before{ background:url(../images/tape-pink.png) no-repeat center center/cover;}
    .G-fantasy .speaking{ transform: rotate(1deg);  color:#5420ca; background: url(../images/speak-bg-fantasy.png) no-repeat right bottom, #fbf5e8 url(../images/line.png); }
    .G-fantasy .speaking:before{ background:url(../images/tape-purple.png) no-repeat center center/cover;}
    .G-blgl .speaking{ color:#e44a21;background: url(../images/speak-bg-blgl.png) no-repeat right bottom, #fbf5e8 url(../images/line.png); }
    .G-blgl .speaking:before{ background:url(../images/tape-orange.png) no-repeat center center/cover;}

    .desk .JUDGES>div{display: flex; flex-direction: column; gap:20px;}
    .mobile .speaking{ display:none;}

    .speaking p{ padding:0 20px;}
.company{ color:#bb934b; border-top:1px dotted #c1a97e; padding:20px;}
    .company h4{ text-align: left; padding:0 20px;}
    .company img{ height:1.33em; vertical-align: middle; margin: 0 10px 0 0;}
/*評選方式*/
.process{display: grid; grid-template-columns: repeat(3,1fr); padding: 0; padding:20px; background:#fff; border:3px solid #f7dfb3; border-radius: 35px;}
.process li+li{ border-left:3px solid #f7dfb3;}
.process li{ padding:20px; display: grid; grid-template-columns: 1fr 3fr; gap:20px; margin: 0;}
.process em{ font-style: normal; color:#eda20b; font-weight: 700;}

/*影視*/    
.ADAPTED{ display: grid; gap:20px; grid-template-columns: 3fr 4fr;}
.A-title{ background:linear-gradient(#262652,#7183ef); color:#dfe1ff;}
    .ADAPTED h2{ margin: 0; background:url(../images/page2-sub.png) no-repeat center top/cover; }
    .ADAPTED h2 img{ max-width:100%;}
    .A-title strong{ font-weight: normal; background:#490baf; color:#fff; font-size: 1.1em; line-height: 2;}
    .A-describ{ margin: 0em 1.5em 1.5em 1.5em; display: flex; gap:20px;}
    .A-title p{ flex: 1 1 50%; font-size: 0.8em; line-height: 1.5;}
    .gold{flex: 1 1 50%; background: #f6efe2; border-radius: 20px; padding:20px; position: relative; color:#262652; display: grid; align-items: center; font-weight: 700; }
        .gold>div{ position: relative; z-index: 2;}
        .gold:after{content: ''; display: block; position: absolute; inset: -1em -1em -1em 50%; background:url(../images/gold.png) no-repeat right bottom/contain;}
        .gold em{ font-style: normal;font-size: 1.5em; margin: 0; display: block; color:#f30488;}

.A-txt{background:#ffffffd7; border:3px solid #f7dfb3; padding:20px;}
    .ADAPTED ul.AD-award{ padding: 0; justify-content: center; margin:1em 0; display: flex; flex-wrap: wrap; gap: 20px;}
    .badge{ flex: 1; aspect-ratio: 1/1; color:#000; padding:70px 30px 20px 30px; display: grid; align-items: center; text-align: center; font-size: 1.1em;}
    .badge:nth-of-type(1){ background:url(../images/badge-love.png) no-repeat center center/contain;}
    .badge:nth-of-type(2){ background:url(../images/badge-fantasy.png) no-repeat center center/contain;}
    .badge:nth-of-type(3){ background:url(../images/badge-blgl.png) no-repeat center center/contain;}
    .badge span:before,.badge span:after{ content: ''; display: block;width:30%; margin:5px auto; height: 1px; background: #000;}

/********人氣票選********/
.VOTE{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;}
    .VOTE>div{ display: grid; grid-template-rows:1fr 50px; border-radius: 35px; padding:0 20px 10px 20px;background: #fff; text-align: center; position: relative;  margin-top: 148px;}
    .VOTE>div:before{content:''; display: block;  position: absolute; top:0; left:50%; transform: translate(-50%,-90%);}
    .VOTE a{ text-decoration: none; display:inline-block; color:#fff;  padding:5px 10px 5px 20px; border-radius: 25px;}
    .VOTE a:hover svg{ margin-left: 10px; transition: all .5s;}

    .VOTE .G-love{  border:3px solid #ffcfe3; background: url(../images/group-love-bg.png) no-repeat left top,url(../images/group-love-bg.png) no-repeat right bottom,#fff;}
    .VOTE .G-fantasy{ border:3px solid #aec9fd; background: url(../images/group-fantasy-bg.png) no-repeat left top,url(../images/group-fantasy-bg.png) no-repeat right bottom,#fff;}
    .VOTE .G-blgl{ border:3px solid #f9b29b; background: url(../images/group-blgl-bg.png) no-repeat left top,url(../images/group-blgl-bg.png) no-repeat right bottom,#fff;}
        .VOTE .G-love:before{ width:244px; height: 148px; background:url(../images/group-love.png) no-repeat center center/cover;}
        .VOTE .G-fantasy:before{ width:111px; height: 139px; background:url(../images/group-fantasy.png) no-repeat center center/cover;}
        .VOTE .G-blgl:before{ width:139px; height: 129px; background:url(../images/group-blgl.png) no-repeat center center/cover;}
        .VOTE .G-love a{ background: #f76fa7;}
        .VOTE .G-fantasy a{ background: #78aaf9;}
        .VOTE .G-blgl a{ background: #ff7f52;}
        .VOTE a.disabled{ background:#707070; padding: 5px 20px;}
        a.disabled svg{ display: none;}
/*獎項與抽獎*/
    .reward,.lottery{ display: grid; grid-template-rows: 160px 1fr;}
    .rules dl{ display: grid; grid-template-columns: 100px 1fr;}
    .reward>div,.lottery>div{ background:#fff; border: 3px solid #f7dfb3; border-radius: 35px; padding:30px;}

.SPECIAL{ display: grid; grid-template-columns: 1fr 385px; max-width: 1080px; margin: 0 auto; align-items: center; border-radius: 35px;}
    .SPECIAL h2{ text-align: left; display: inline-block; padding:5px 20px; margin: 0;}
    .SPECIAL em{ font-size: 1.5em; font-weight: 900; font-style: normal;}
    .S-rewards{ padding-left: 50px;}
    .award-pic{ filter: drop-shadow( 0 3px 5px #c5b2905c);;}

.bookevent{ display: grid; grid-template-columns: 300px 1fr 180px; border-radius: 35px; overflow: hidden;}
.bookevent hgroup{ padding:20px;}
    .bookevent h3{ margin: 0;}
    .bookevent p{ margin: 5px 0;}
    .bookevent a{ text-decoration: none; display: grid; align-items: center; text-align: center;}
        .bookevent a:hover svg{ margin-left: 10px; transition: all .5s;}
    .bookevent em{ font-size: 1.5em; font-weight: 900; font-style: normal;}
    .salepic{ display: grid; align-items: center; padding:20px;}
.foreveryone{ position: relative; filter: drop-shadow( 0 3px 5px #c5b2905c); font-family: "lxgw-wenkai-tc", sans-serif; padding:20px 50px; background: #fbf5e8 url(../images/line.png); display: grid; grid-template-columns: 1fr 125px;}
    .foreveryone img{ position:absolute; right: -10px; bottom:10px;}
    .foreveryone:before{ content:''; display:block; height:46px; width:97px;  position: absolute; top:-25px; left: -20px;}
.about{ display:grid; grid-template-columns: 300px 1fr; gap: 20px; background:#ffffffd7; border: 3px solid #f7dfb3; font-size: 0.8em; border-radius: 35px; overflow: hidden;}
    .about h4{ margin:0 0 1em 0;}
    .about img{ max-width: 300px; margin: 0 auto;}
/********Readmoo特別獎********/
.P4-1 .SPECIAL{ background:url(../images/special1-bg.png) no-repeat left top, #fcf8f2 url(../images/special1-bg.png) no-repeat right bottom; }
.P4-1 .bookevent{background: linear-gradient(#fff, #d9f6ff);}
    .P4-1 .bookevent a{ background: #2959d1; color:#fff;}
.P4-1 h2{ background: #2959d1; color:#fff;}
.P4-1 .foreveryone:before{ background:url(../images/tape-blue.png) no-repeat center center/cover;}
/********金石堂特別獎********/
.P4-2 .SPECIAL{ background:url(../images/special2-bg.png) no-repeat left top, #fcf8f2 url(../images/special2-bg.png) no-repeat right bottom; }
.P4-2 .bookevent{background: linear-gradient(#fff, #fff2d9);}
    .P4-2 .bookevent a{ background: #f8b629; color:#fff;}
.P4-2 h2{  background: #f8b629; color:#fff;}
.K-judge{ display: grid; grid-template-columns: 1fr 250px; max-width: 1080px; margin: 0 auto; padding:20px; background:#ffffffd7; border: 3px solid #f7dfb3; border-radius: 35px;}
.K-judge h2{ text-align: left;}
.P4-2 .foreveryone:before{ background:url(../images/tape-yellow.png) no-repeat center center/cover;}
dl.percent{ display: grid; grid-template-columns:150px 1fr 70px;}
dl.percent dt{ background:#ffe4bb; text-align: center;}
dl.percent dt ,dl.percent dd{ border-bottom:1px solid #707070; padding:5px 10px;}
dl.percent dd+dd{ color:#ff1cd3; font-weight: 700;}

/********FAQ********/
.FAQ{ padding-top:80px; counter-reset: question;}
details{ width:95%; max-width: 800px; background: #fcf8f2; border-radius:35px; margin:0 auto 20px auto; padding:20px 30px; position: relative;}
details[open] summary ~ *{ animation:open 0.3s ease-in-out;}
details summary::-webkit-details-marker{ display: none;}
details summary{ width:100%; padding:10px 60px;  position: relative; cursor: pointer; list-style: none; font-size: 1.1em; box-sizing: border-box;}
details svg{ right:0px; top:0.65em; position: absolute; transform-origin: center; transition: 0.2s; height: 24px; width:24px;}
details[open] svg{ transform:rotate(180deg);}
details p{ margin:10px 0 0 0; color:#76715e;}
details ul{ color:#76715e;}
details summary:before{counter-increment: question;  content:'Q' counter(question);width:50px; height:50px; line-height: 50px; font-size: 0.8em; text-align: center; border-radius: 50px; background:#ff50a4; color:#fff; position: absolute; left:0px; top:4px;}
.needhelp,.tips{width:95%; max-width: 800px; margin: 40px auto; }
.needhelp{ color:#af9054;text-align: center;}
    .needhelp a{ text-decoration: none; border-bottom: 1px solid #af9054; color:#af9054; }
.tips{ display: grid; grid-template-columns: 1fr 180px; background: #fff url(../images/grid.png) center center;}
    .tips .tips-txt{ padding:10px 20px; color:#76715e;font-family: "lxgw-wenkai-tc", sans-serif;}
    .tips a{ text-align: center; text-decoration: none; background:#6489a8; color:#fff; display:grid; align-items: center; text-align: center;}

/********出版作品********/
.P6 section{ margin-top: -80px;}
.P6 h2 svg{ max-width:500px;}
.books{ display: flex; flex-wrap: wrap; gap:50px 20px; margin-top: -50px; justify-content: center; text-align: center;}
.book{ flex: 0 1 250px; display: flex; flex-direction: column;}
.book a{ color: inherit; text-decoration: none;}
.b-img{ padding:15px 40px 10px 40px;}
.b-award span{ font-size: 0.8em; border: #f771a6 1px solid; color:#f771a6; padding:0 5px; margin: 1px; background: #f6efe2;}
.b-author{ font-size: 0.9em; color:#8758da; margin-bottom: 10px;}
.b-links{ margin-top: auto;}
.b-links a{ display: inline-block; border-radius: 30px; background:#262652; color:#fff; text-decoration: none; font-size: 0.8em; padding:0 10px;}

@media screen and (max-width:1440px) {
    nav a{ padding:0 30px;}
    nav img{ height: 30px;}
    section{ padding:30px 2.5%; position: relative;}

    h2 img{ max-width: 450px;}
    
    .GROUP>div{border-radius: 20px; margin-top: 118px;}
    .GROUP .G-love:before{width:195px; height:118px; }
    .GROUP .G-fantasy:before{width:89px; height:111px; }
    .GROUP .G-blgl:before{width:111px; height:103px; }

    .G-love .speaking{ background-size: 100px,auto;}
    .G-fantasy .speaking{ background-size: 100px,auto;}
    .G-blgl .speaking{ background-size: 100px,auto;}


    .rules,.methods,.reward,.lottery{ grid-template-rows: 110px 1fr;}
    .rules>div,.methods>div,.AWARDS>div,.judge,.process,.reward,.lottery,details,.columns,.SPECIAL,.bookevent,.K-judge,.about{border-radius: 20px;}

    .trophy{ display: none;}

    .ADAPTED{ grid-template-columns: 1fr; max-width:800px; margin: 0 auto;}
    .ADAPTED ul.AD-award{ gap:15px;}
    .badge{ font-size: 0.8em;}

}
@media screen and (max-width:1080px) {
    h2 img{ max-width: 400px;}

    .AWARDS,.K-judge,.SPECIAL{grid-template-columns: 1fr;}
    .award .A-name{ grid-template-columns: 110px 1fr 100px;}
    .JUDGES{ gap:30px;}
    
    .badge{ font-size: 1em; flex: 0 1 200px; flex-wrap: wrap;}
    .gold:after{inset: -1em 1em -1em 50%;}

    .foreveryone{ grid-template-columns: 1fr 80px;}
    .foreveryone img{width:100px;}

    .SPECIAL{ text-align: center;}
    .S-rewards{ padding: 0;}
    .K-judge img{ display: none;}
    
    .bookevent{ grid-template-columns: 220px 1fr 180px;}
}
@media screen and (max-width:768px) {
    .logo img{ height: 25px;}

    .columns{ columns: 1;}

    body{ font-size: 18px;}
    .GROUP,.DETAILS,.VOTE,.process,.about,.foreveryone,.bookevent{ grid-template-columns: 1fr;}
    .JUDGES{ flex-direction: column;}
    .judge{ display: grid; grid-template-columns: 1fr 1fr;}
    .company{grid-column: span 2; }
    .desk{ display: none;}
    .mobile .speaking{ display: block; margin-top: 2em;}

    .process li+li{ border-top:3px solid #f7dfb3; border-left: none;}
    .TIMELINE{flex-wrap: wrap;}
    .TIMELINE>div{ width:calc( 33% - 100px);}

    .A-describ{ flex-direction: column;}
    .A-title p{ text-align: center;}
    
    .books{ gap: 20px 10px;}
    .book{ flex: 0 1 220px;}

    .VOTE>div{ margin-top: 104px;}
    .VOTE .G-love:before{ width:171px; height: 104px; }
    .VOTE .G-fantasy:before{width: 78px;height: 98px;}
    .VOTE .G-blgl:before{ width:97px; height: 91px; }

    .salepic{ padding:20px 20px 0 20px;}
        .salepic img{ max-width: 300px; margin: 0 auto;}
    .about{ padding-top: 20px;}
        .about img{ max-width: 200px;}
    .bookevent{ text-align: center;}
    .bookevent a{ padding:20px;}
    .foreveryone{ padding: 20px 50px 50px 50px;}

}
@media screen and (max-width:480px) {
    .TIMELINE>div{ width:calc( 50% - 50px);}
    .judge{ grid-template-columns: 1fr;}
    .company{ grid-column: unset;}

    .VOTE>div{ margin-top: 75px;}
    .VOTE .G-love:before{ width:122px; height: 74px; }
    .VOTE .G-fantasy:before{width: 48px;height: 56px;}
    .VOTE .G-blgl:before{ width:70px; height: 75px; }

    .G-love .speaking{ background-size: 50px,auto;}
    .G-fantasy .speaking{ background-size: 50px,auto;}
    .G-blgl .speaking{ background-size: 50px,auto;}
}

/**/
.share{position:fixed; bottom:20px; right:20px; z-index:5; width:50px; font-size:14px;}
#option{ display: none;list-style: none; margin:0 0 10px 0;}
.share.show #option{ display: block;background:#00000082; color:#fff; border-radius:50px; box-sizing: border-box; padding:20px 10px; text-align: center;}
#option li{ padding:5px 0; margin: 0;}
#option li+li{border-top:1px solid #fff;}
#option a{text-decoration: none; color: inherit;}
#option img{width:20px; height: 20px;}
.logo{ height: 35px; position: absolute; top:5px; left: 5px;}
@media screen and (max-width:768px){
    /*分享*/
	.share{ bottom:10px; right:10px;} 
}

/*menu*/
@media screen and (max-width:1180px){
    /**/
    nav{ display: none; padding:5px;}
        .P3 nav, .P5 nav, .P6 nav{ margin-top:0;}
	.btn-menu{display:block; width:30px; height: 30px; background:#fff url(../images/icon-menu.png) no-repeat center center; background-size:cover; position:fixed; right:5px; top:5px; z-index: 15; border-radius: 10px;}
    nav.show{ display: flex; flex-direction: column; margin:0; position: fixed; left: initial; top:5px; right:5px; width:220px; height: calc(100vh - 10px);}
	.btn-menu.xx{background: url(../images/icon-xx.png) no-repeat center center/contain;}
    nav a{ padding:10px; width: 80%; display: grid; grid-template-columns: 30px 1fr; align-items: center;}
    nav a+a{border-top:1px solid #000; border-left: none; }
    
    
    .P1 section,.P2 section,.P4-1 section,.P4-2 section{ margin-top: -30px;}
    .P3 section,.P5 section{ margin-top: -70px;}
    .P6 section{ margin-top: -135px;}
}