@charset "utf-8";
/* CSS Document */
html,body{ height: 100%;}
body {
	font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
	font-size:1em;
    margin: 0; 
    padding: 0;
    overflow-x: hidden;
}
section{ position:relative;}
footer{ text-align:center; font-size:0.7em; height:50px; line-height:50px; position:absolute; bottom:0; width:100%;}
.wrap{ width:100%; max-width:1000px; margin:0 auto; position: relative;}
h2{ margin: 0 auto 50px auto;}
h3{ text-indent:-9999px;}
img{width:auto; height: auto; max-height: 100%; max-width: 100%; display: block;}
a{ outline:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  }
em{  font-style:normal;}
.info{ width:95%; margin:10px auto 20px auto; color:#f9c3be; line-height:1.2;}
.info em{color:#f9ff47;}
.Q{ box-sizing:border-box; width:100%; display:block; text-align:right; color:#fcf0cc; font-size:1.1em; font-weight:500; text-decoration:none; padding:0 10px 10px 0;}
.Q:before{ content:'?'; display:inline-block; height:26px; width:26px; background:#fcf0cc; color:#8f1207; line-height:30px; border-radius:30px; line-height:26px; text-align:center; font-weight:bold; font-size:1.2em; margin-right:5px;}
.notice{ width:95%; margin:10px auto; font-size:0.95em; color:#f9f6ed;line-height:1.2;}

/*qidian nav*/
.qidian-nav{ position:absolute; top:0; left:0; width:100%; z-index:5;}
.qidian_logo{ position:absolute; top:10px; left:10px;}
.Qmember{ position:absolute; -webkit-user-select: none; user-select: none; width:100%;}
.Qmember input{ display: block; width: 35px; height: 30px; position: absolute; top: 15px; right: 10px; cursor: pointer;  opacity: 0; z-index: 2; -webkit-touch-callout: none;}
.hamburger{width: 35px; height: 30px; position: absolute; top: 15px; right: 10px;}
.hamburger span{display: block; width: 33px; height: 4px; margin-bottom: 6px; position: relative; background: #fff; border-radius: 3px; z-index: 1;  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
.Qmember input:checked ~ .hamburger span:nth-of-type(1){ opacity: 1; transform: rotate(45deg) translate(3px, -1px);}
.Qmember input:checked ~ .hamburger span:nth-of-type(2){opacity: 0; }
.Qmember input:checked ~ .hamburger span:nth-of-type(3)
{  transform: rotate(-45deg) translate(0, -1px);}

#option{ display:none; position:absolute;width:100%;background:rgba(0,0,0,0.7); list-style:none; top:0px; text-align:right; padding:0 65px 0 0; box-sizing:border-box; margin:0; height:55px; line-height:55px;}
#option li{ display:inline-block; margin:0 5px;}
#option a{ text-decoration:none; color:#fff; font-size:13px;}
.Qmember input:checked ~ #option{ display:block;}


/*nav*/
nav{ width:100%; background: #f2b04e; position:fixed;z-index:10;}
.nav{max-width:1000px; list-style:none; margin:0 auto; padding:0; display:block; height:120px; display:none;}
  .nav:after{ content:''; display:block; clear:both;}
.nav li{ display:block; float:left; width:20%; max-width:200px; text-align:center;}
.nav a{ width:100%; display:block; background: linear-gradient(118deg,#ffde86,#d68f2a); height:120px; text-decoration:none; font-size:1.35em; color:#3e0101; font-weight:600; line-height:1.1; box-sizing:border-box; padding-top:40px;}
.nav span{ font-size:0.7em; font-weight:normal; color:#822006; display:block;}
.nav a:hover,.nav a.activity{ background: url(images/nav_bg.png) no-repeat center center, linear-gradient(118deg,#d68f2a,#b16d0d);}

.top{ position:fixed; bottom:50px; right:30px; display:block; width:70px; height:70px; border-radius:50px; background:linear-gradient(118deg,#fdc865,#e79634); box-shadow:0 2px 5px #C90;}
.top span{ display:block; position:absolute; top:20px; left:27px; width:0; padding:0; border-top:10px solid transparent; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:10px solid #aa3115;}

/*HEADER*/
header{ background: radial-gradient(#ea2b1a,#700900); position: relative;}
[class^=header-img]{height: 975px; position: relative; z-index:1;}
.header-img1{ background: url(images/header.png) no-repeat center top; }
.header-img2{ background: url(images/header2.png) no-repeat center top;}
.header-img3{ background: url(images/header3.png) no-repeat center top;}
.header-img4{ background: url(images/header4.png) no-repeat center top;}
.header-img5{ background: url(images/header5.png) no-repeat center top;}



header .wrap{ height: 1065px; position: absolute; left: 50%; top:0; margin-left: -500px;}
.lanternL{ background: url(images/lanternL.png) no-repeat; width:407px; height: 510px; position:absolute; top:-21px; left:-339px; }/*左燈籠*/
.lanternR{ background: url(images/lanternR.png) no-repeat; width:408px; height: 509px; position:absolute; top:-21px; right:-290px; }/*右燈籠*/
.pigL{ background: url(images/pig1.png) no-repeat; width:768px; height: 618px; position: absolute; bottom:35px; left:-460px; animation: slidetoRight 1.5s;}/*左豬*/
.pigR{ background: url(images/pig2.png) no-repeat; width:735px; height: 610px; position: absolute; bottom:35px; right: -460px; animation: slidetoLeft 1.5s;}/*右豬*/
H1{ margin: 0 0 0 -380px; background: url(images/TITLE_bg.png) no-repeat; width:760px; height: auto; padding:0; position:absolute; top:75px; left: 50%; box-shadow: 38px 18px 10px #811006; border-radius:500px;}

/****************首頁****************/
.MEMBER_section{ background: #efe5ca url(images/bg1.png) repeat-y center top; padding:0 0 150px 0;overflow-x: hidden;}
.BOOK_section{ margin-top:-80px;overflow-x: hidden;}
.BOOK_review{ background: #9a1509 url(images/bg2.png) repeat left top; padding:50px 0 5px 0; box-shadow:0 -5px 20px #c19e68;}
.chapter1{ background:url(images/H2_1.png) no-repeat center top; width:181px; height:64px; margin:0 auto 30px auto;}
.chapter2{ background:url(images/H2_2.png) no-repeat center top; width:100%; max-width:480px; height:101px; margin:0 auto -26px auto; position:relative; z-index:1;}

.H3_1{ background:url(images/H3_1.png) no-repeat center top; height:44px; margin:20px auto;}
.H3_2{ background:url(images/H3_2.png) no-repeat center top; height:44px;margin:20px auto ;}
.H3_3{ background:url(images/H3_3.png) no-repeat center top; height:44px;margin:20px auto 40px auto;}
.H3_4{ background:url(images/H3_4.png) no-repeat center top; height:44px;margin:20px auto;}
.H3_5{ background:url(images/H3_5.png) no-repeat center top; height:44px;margin:20px auto;}

[class^=slide] { background-color:#f9f6ed; border-radius:50px; padding:20px 0 0 0; box-sizing:border-box; width:95%; max-width:1000px; margin:0 auto 45px auto; position:relative;}
.slide1 { font-size: 1.8em; font-weight: 600;}
.slide1 .txt {text-align: center;}
.slide2 {font-size: 1.8em;font-weight: 600;}
.slide2 .txt {text-align: center;}
.slide3 {font-size: 1.6em;font-weight: 600;}
.slide3 .txt {text-align: center;}
.slide4 {font-size: 1.5em;font-weight: 600; padding-bottom:20px;}
.slide4 .txt {text-align: center;}
.slide4 .top10 {font-weight: normal;color: #60240f;counter-reset: topmember;list-style: none;margin: 20px 0;padding:0;font-size: 0.9em;text-align: center;}
.top10 li {display: inline-block;margin: 15px 30px; white-space:nowrap;}
.top10 li:before {display: inline-block;counter-increment: topmember;content: counter(topmember);font-weight: 600;background: url(images/star.png) no-repeat;width: 56px;height: 53px;line-height: 55px;text-align: center;margin-right: 12px;}

  /*桌機版首頁slide*/
  @media screen and ( min-width:1000px){	
	  .slide1{ height:520px;}
	  .slide1 div:nth-of-type(2){ position:absolute; top:205px; left:620px;}
	  .slide1 .image{ position:absolute; bottom:0; left:50px;}
	  .slide2{ height:320px;}
	  .slide2 .txt{ position:absolute; left:100px; top:45px; text-align:right;}
	  .slide2 .image{ position:absolute; bottom:0; right:-65px;}
	  .slide3{ height:330px;}
	  .slide3 .txt{ margin-top:75px;}
	  .slide3 div:nth-of-type(1){ position:absolute; bottom:-7px; left:-30px;}
	  .slide3 div:nth-of-type(2){ position:absolute; bottom:-7px; right:-80px;}
  }

.UI_tabs ul{ list-style:none; padding:0; width:100%;}
.UI_tabs ul a{ text-decoration:none;}
.UI_tabs ul:after{ content:''; display:block; clear:both;}
.UI_tabs li{ display:block; float:left; }
.UI_tabs a{ display:block;}
.UI_tabs p{ margin:0; padding:5px 50px 0 50px; color:#494b4c; font-size:0.9em;}

.INDEX .tab_bg{  background:#f9f6ed; padding:30px 0; border-bottom-left-radius:25px;   border-bottom-right-radius:25px; }
.DISCOUNT .tab_bg{ background:#f9f6ed; border:2px double #f9f6ed;}

.BL_1,.BL_2,.BL_3{ margin-bottom:80px;}
/*男主文、女主文tab*/
.BL1_tab,.BL2_tab,.BL3_tab,.BL4_tab,.BL5_tab{ margin:0;}
.BL1_tab li,.BL2_tab li,.BL3_tab li{ width:50%;}
.BL1_tab a,.BL2_tab a,.BL3_tab a{ text-align:center; border-top-left-radius:25px;   border-top-right-radius:25px; background:linear-gradient(#f8b855, #a35704); font-weight:bolder; font-size:1.6em; letter-spacing:6px; height:100px; line-height:100px; color:#341100;}
.BL1_tab .ui-tabs-active a,.BL2_tab .ui-tabs-active a,.BL3_tab .ui-tabs-active a{background:#f9f6ed;}
/*男主文、女主文裡的各分類tab*/
.BL1_tab_M_tab,.BL1_tab_F_tab{ text-align:center; margin:20px 0;}
.BL1_tab_M_tab li,.BL1_tab_F_tab li{ margin:5px; display:inline-block; width:125px; float:none;}
.BL1_tab_M_tab a,.BL1_tab_F_tab a{ display:block; box-sizing:border-box; color:#2b71b5; border:2px solid #2b71b5; width:125px; height:50px; line-height:50px; font-size:1.1em; font-weight:500;}
.BL1_tab_M_tab .ui-tabs-active a,.BL1_tab_F_tab .ui-tabs-active a{ background:#2b71b5; color:#f9f6ed;}

.booklist{ display:flex; flex-wrap: wrap; justify-content: center; counter-reset:bookrank;align-items:stretch;}
.BOOK{ display:block; width:40%; max-width:165px; margin:20px 15px; text-decoration:none; position:relative;}
.BOOK span{ display:block; text-align:center}
.B_name{ color:#000; font-size:1.2em;font-weight:600; margin:10px 0 0 0; line-height:1.1;}
.B_author{ color:#820e04;}

.rank .BOOK:after{ display:block;position:absolute; width:50px; height:30px; line-height:30px;text-align:center; font-weight:bold; top:5px; left:-5px; counter-increment: bookrank; content: counter(bookrank); font-size:1.1em;}
.rank .BOOK:nth-of-type(1):after{ background-color:#ffc63b; color:#341100; }
.rank .BOOK:nth-of-type(2):after{ background-color:#cecece; color:#393837; }
.rank .BOOK:nth-of-type(3):after{background-color:#d0a932; color:#392800; }
.rank .BOOK:nth-of-type(n+4):after{ background-color:#f9731b; color:#fefdfb; }


/****************第二頁****************/
.SALE{ background: #700900 url(images/bg1.png) repeat-y center top; padding:30px 0 50px 0;overflow-x: hidden;}
.chapter3{ background:url(images/H2_3.png) no-repeat center top; height:66px; width:100%;}
.D-border{ box-sizing:border-box; border:2px solid #f9f6ed; padding:4px; margin-bottom:50px;}
.D-border>div{ background: #f9f6ed; padding:20px 0;}
.H3_6{ background:url(images/H3_6.png) no-repeat center top; height:44px;margin:20px auto;}
.DISCOUNT h4{max-width:580px; width:90%; box-sizing:border-box; padding:10px 20px; line-height:1.1; background: linear-gradient(118deg,#ffde86,#d68f2a); border-bottom:2px solid #8c5001; margin:0 auto; text-align:center; font-size:1.35em; color:#311203;}
.DISCOUNT h4 em{ color:#b61a0c; font-style:italic; font-size:1.3em; margin-right:3px;}
.DISCOUNT h4 span{font-size:0.8em; font-weight:normal;}

.BL4_tab,.BL5_tab{ margin:20px 0; text-align:center;}
.BL_4 .BL4_tab li,.BL_5 .BL5_tab li{ display:inline-block; float:none;}
.BL4_tab li:nth-of-type(1),.BL5_tab li:nth-of-type(1){ margin-right:10px;}
.BL4_tab li:nth-of-type(1) a,.BL5_tab li:nth-of-type(1) a{ display:block; box-sizing:border-box; color:#2b71b5; border:2px solid #2b71b5; width:125px; height:50px; line-height:50px; font-size:1.1em; font-weight:500; text-align:center;}
.BL4_tab li:nth-of-type(1).ui-tabs-active a,.BL5_tab li:nth-of-type(1).ui-tabs-active a{background:#2b71b5; color:#f9f6ed;}
.BL4_tab li:nth-of-type(2) a,.BL5_tab li:nth-of-type(2) a{ display:block; box-sizing:border-box; color:#2bb294; border:2px solid #0cad8d; width:125px; height:50px; line-height:50px; font-size:1.1em; font-weight:500; text-align:center;}
.BL4_tab li:nth-of-type(2).ui-tabs-active a,.BL5_tab li:nth-of-type(2).ui-tabs-active a{background:#0cad8d; color:#f9f6ed;}


/****************第三頁****************/
.NOMINATE{background: #efe5ca url(images/bg2.png) repeat left top; padding:30px 0 50px 0;overflow-x: hidden;}
.NOMINATE .wrap{ margin-bottom: 100px;}
.chapter4{ background:url(images/H2_4.png) no-repeat center top; height:66px; width:100%;}
.H3_7{ background:url(images/H3_7.png) no-repeat center top; height:44px;margin:20px auto;}
.H3_8{ background:url(images/H3_8.png) no-repeat center top; height:44px;margin:150px auto 20px auto;}
.NOMINATE h4 {max-width:580px; width:90%; box-sizing:border-box; padding:10px 20px; line-height:1.1; background: linear-gradient(118deg,#ffde86,#d68f2a); border-bottom:2px solid #8c5001; margin:0 auto; text-align:center; font-size:1.35em; color:#311203;}
.N_list{ margin:50px 0; clear: both; /*overflow: hidden;*/}
.N_list:after{ content:''; display:block; width:100%; clear:both;}
.N_list figure{ width:180px; max-height: 180px; overflow: hidden; border-radius: 200px; margin: 60px 0 0 0;}
.N_list figure img{display:block; width:100%;}
.N_left{ float: left; vertical-align: top;}
.N_right{float: right; vertical-align: top;}
.N_list:nth-of-type(n+1) .N_left{ width:20%; min-width: 195px;}
.N_list:nth-of-type(2n) .N_left{width:78%; margin-right: 1.5%; max-width: calc( 100% - 210px);}
.N_list:nth-of-type(n+1) .N_right{width:78%; max-width: calc( 100% - 200px);}
.N_list:nth-of-type(2n) .N_right{width:20%; min-width: 195px;}
.N_items{ margin: 10px 0;}
.N_items>div{ display: inline-block;  background: linear-gradient(118deg,#bf3e25,#a9190c); margin-right: 50px; position: relative; height: 30px; line-height: 30px; color:#fff; white-space: nowrap;}
.N_items>div:after{ content: ''; display: block; width:0; height: 0; position: absolute; right: -30px; top:0; border-top:15px solid #a9190c; border-bottom:15px solid #a9190c; border-left:15px solid #a9190c; border-right:15px solid transparent;}
.N_speak{ border-radius: 20px; background: #fff; box-sizing: border-box; padding: 20px; position: relative;}
.N_speak:before{ position: absolute; content: ''; display: block;}
.N_list:nth-of-type(n+1) .N_speak:before{top:20px; left:-20px; border-right:10px solid #fff; border-left:10px solid transparent; border-top:8px solid transparent; border-bottom:8px solid transparent;}
.N_list:nth-of-type(2n) .N_speak:before{top:20px; left: inherit; right:-20px; border-left:10px solid #fff; border-right:10px solid transparent; border-top:8px solid transparent; border-bottom:8px solid transparent;}
.N_book{ text-decoration: none; color:#000; font-weight:800; line-height: 60px; display: block; position:relative; padding-left:50px;}
.N_book img{ height:60px; width:auto; display:block;  position:absolute; top:0; left:0; z-index:2;}
.N_book img:hover{ transform:scale(2.5,2.5); transition:transform ease-in 0.3s;}
.N_name{ font-size: 1.8em;}
.N_author{ font-size: 2em;}
.W_list{ margin: 50px 0; clear: both;}
.W_list:after{ content:''; display:block; width:100%; clear:both;}
.W_list figure{ width:100%; max-width:400px; margin: 0;}
.W_left{ float: left; vertical-align: top;}
.W_right{float: right; vertical-align: top;}.W_list:nth-of-type(n+1) .W_left{width:40%;}
.W_list:nth-of-type(2n) .W_left{width:58%; margin-right: 1.5%;}
.W_list:nth-of-type(n+1) .W_right{width:58%;}
.W_list:nth-of-type(2n) .W_right{width:40%;}
.W_speak{ border-radius: 20px; background: #fff; box-sizing: border-box; padding: 20px; position: relative;}
.W_speak:before{ position: absolute; content: ''; display: block;}
.W_list:nth-of-type(n+1) .W_speak:before{top:20px; left:-20px; border-right:10px solid #fff; border-left:10px solid transparent; border-top:8px solid transparent; border-bottom:8px solid transparent;}
.W_list:nth-of-type(2n) .W_speak:before{top:20px; left: inherit; right:-20px; border-left:10px solid #fff; border-right:10px solid transparent; border-top:8px solid transparent; border-bottom:8px solid transparent;}
.W_book{ text-decoration: none; color:#000; font-weight:800; line-height: 60px; display: block; position:relative; padding-left:50px;}
.W_book img{ height:60px; width:auto; display: block; position:absolute; top:0; left:0; z-index:2;}
.W_book img:hover{ transform:scale(2.5,2.5); transition:transform ease-in 0.3s;}
.W_name{ font-size: 1.8em;}
.W_author{ font-size: 2em;}


/****************第四頁****************/
.INFO_section{ background: #f5f3ed url(images/bg3.png) repeat center top; padding:30px 0 50px 0;overflow-x: hidden;}
.chapter5{ background:url(images/H2_5.png) no-repeat center top; height:66px; width:100%;}
.H3_9{ background:url(images/H3_9.png) no-repeat center top; height:44px;margin:20px auto 0 auto;}
.INFO_section h4{ text-align:center; font-weight:normal; font-size:1.4em; color:#470101; margin:0 0 30px 0;}
.INFO_section fieldset{ border:4px solid #b87312; margin:0 auto; padding:0; width:90%; max-width:800px; border-radius:10px;}
.INFO_section legend{ margin:0 auto; padding:0 10px; font-size:1.3em; font-weight:600; color:#b87312;}
.INFO_section ol{ margin:0;}
.INFO_section li{ margin:0 0 10px 0;}
.fieldset_bg{ padding:20px 50px;}
.step{ counter-reset:step; list-style:none;}
.step li:before{ counter-increment: step; content:'step' counter(step) '.'; display:inline-block; padding:2px 5px; border-radius:2px; background:#6f0101; font-size:12px; color:#fff; margin-right:10px;}
.fieldset_bg em{ border-bottom:1px solid #000;}
.fieldset_bg a{color:#0b4fa7;}
.fieldset_bg strong{ color:#900;}
.GIFT_image{text-align:center; margin-bottom:30px;}
.GIFT_image img{ height:190px;}
.GIFT_image >div{ position:relative; display:inline-block;}
.GIFT_image >div>span{text-align:center; width:100%; font-size:14px; text-shadow:0 0 0 #fff,1px 1px 0 #fff,-1px -1px 0 #fff,0px -1px 0 #fff,0px 1px 0 #fff,1px 0px 0 #fff,-1px 0px 0 #fff;}
.button{ display:block; width:80%; max-width:200px; margin:30px auto 80px auto; text-align:center; height:45px; line-height:45px; text-decoration:none; background: #bd3f2a; border-radius: 10px; color: #Fff; border-bottom: 5px solid #822414; border-right: 2px solid #822414; border-left: 2px solid #822414;}
fieldset:nth-of-type(n+2){ margin-bottom:50px;}

/****************第五頁****************/
.PRESENT{ background: #700900 url(images/bg2.png) repeat center top; padding:30px 0 50px 0;overflow-x: hidden;}
.chapter6{ background:url(images/H2_6.png) no-repeat center top; height:66px; width:100%;}
.H3_10{ background:url(images/H3_10.png) no-repeat center top; height:44px;margin:20px auto 0 auto;}
.H3_11{ background:url(images/H3_11.png) no-repeat center top; height:44px;margin:20px auto 0 auto;}
.PRESENT p { color:#fdf578; font-size:1.2em; text-align:center;}
.PRESENT em{ color:#f9c3be; font-size:1.2em;}
.GIFT{ background-color: #f9f6ed; border-radius: 25px; padding: 20px; box-sizing: border-box; width: 95%;  max-width: 1000px; margin: 0 auto 45px auto;}
.GIFT .BOOK{ margin: 20px 25px;}
.GIFT>ul{ text-align:center;}
.GIFT>ul li{ display:inline-block; margin:10px; float:none;}
.GIFT>ul a{ display:block; box-sizing:border-box; color:#2b71b5; border:2px solid #2b71b5; width:125px; height:50px; line-height:50px; font-size:1.1em; font-weight:500; }
.GIFT>ul .ui-tabs-active a{ background:#2b71b5; color:#f9f6ed;}
.LIMITED{ background-color: #f9f6ed; border-radius: 25px; padding: 20px 0; box-sizing: border-box; width: 95%;  max-width: 1000px; margin: 0 auto 45px auto;}
.LIMITED .BOOK{ padding-bottom:45px;}
.LIMITED .BOOK a{ text-decoration:none; }
.date{ display:block; position:absolute; padding:2px 10px; left:-5px; top:10px;     background: linear-gradient(118deg,#ffde86,#d68f2a);color: #311203; font-size:12px; font-weight:600;}
.button2{ display:block; width:100%; margin:5px 0; padding:5px 0; text-align:center; background:#e83f18; color:#fff; position:absolute; bottom:0;}
.PRESENT fieldset{ width:85%; max-width:900px; margin:0 auto; font-weight:normal;  font-size: 0.95em;  color: #f9f6ed; border:1px solid #f9f6ed;}
.PRESENT legend{ font-size:16px; text-align:center; font-weight:600;}
.PRESENT fieldset li{ margin-bottom:10px;}
.PRESENT fieldset a{ color:#f9c3be;}

/*mobile*/
@media screen and ( max-width:1550px){ 
/*NAV*/
.nav{ height:90px;}
.nav a{height:90px; padding-top:30px;}
.nav a:hover,.nav a.activity{ background-size:contain;}
	
.MEMBER_section{ font-size:0.85em;}
header:after{ width:100%; height:5px; content:''; display:block; bottom:-1px; position:absolute; z-index:0;}/*因應header縮圖後會有一小塊的紅線*/
  .INDEX header:after{background:#efe5ca; }
  .DISCOUNT header:after{background:#700900; }
  .AUTHOR header:after{background:#efe5ca; }
  .LOTTERY header:after{background:#f5f3ed; }
header .wrap{ height:800px;}
[class^=header-img]{ background-size:1349px 800px; height: 720px;}
h1{ background-size:contain; width:500px; height:500px; margin:0 0 0 -250px; top:100px;box-shadow: 20px 15px 10px #811006;}
.lanternL{ background-size:285px 378px; width:285px; height:378px; left:-100px;}/*左燈籠*/
.lanternR{ background-size:286px 377px; width:286px; height:377px; right:-100px;}/*右燈籠*/
.pigL{ background-size:538px 433px; width:538px; height: 433px; left:-180px;}/*左豬*/
.pigR{ background-size:515px 427px; width:515px; height: 427px; right:-180px;}/*右豬*/

/*第4頁*/
.INFO_section{ background-size:11%;}
}

@media screen and ( max-width:1000px){ 
.lanternL{ display:none; }/*左燈籠*/
.lanternR{ display:none; }/*右燈籠*/
header .wrap{ width:100%; left: 0; margin-left: 0;}

.N_list { margin: 50px auto; width: 95%;}
.N_items>div{ margin-bottom: 5px;}
.N_name i{ display: none;}
.W_list{margin: 50px auto; width: 95%;}
.W_list:nth-of-type(n+1) .W_left{width:35%;}
.W_list:nth-of-type(2n) .W_left{width:63%; margin-right: 1.5%;}
.W_list:nth-of-type(n+1) .W_right{width:63%;}
.W_list:nth-of-type(2n) .W_right{width:35%;}
}
@media screen and (max-width:768px ){
	header .wrap{padding-top:170%; height: 0; overflow-x: hidden;}
    [class^=header-img]{padding-top:135%; height: 0; background-size: cover;}
    h1{ background-size:contain; margin: 0; width:95%; height:auto; left: 2.5%; top:25px; box-shadow: 13px 8px 8px #811006;}
    .pigL{ background-size:384px 309px; width:384px; height: 309px; left:-210px; }/*左豬*/
    .pigR{ background-size:368px 305px; width:368px; height: 305px; right:-210px;}/*右豬*/
	.slide3{ height:280px;}
	.slide3 div:nth-of-type(1){ height:300px; position:absolute; bottom:-7px; left:-50px;}
	.slide3 div:nth-of-type(2){ height:300px; position:absolute; bottom:-7px; right:-100px;}
	.top10 li{ margin:10px 0; display:block;}
	
	.tab_bg{ margin-top:-1px;}
	.BL_1, .BL_2, .BL_3, .BL_4, .BL_5{width:95%; margin:0 auto 50px auto;}
	.BL1_tab a, .BL2_tab a, .BL3_tab a{ height:60px; line-height:60px;}
	
	.INFO_section{ background-size:25%;}

}
@media screen and (max-width:480px ){
	.nav a{ font-size:1em;}
	.nav a { display:block;}
	
	#option{top:55px; text-align:center; padding:10px; height:auto; line-height:1;}
	
	.top{ bottom:10px; right:10px; width:50px; height:50px; border-radius:50px;}
	.top span{ display:block; position:absolute; top:10px; left:17px;}
	
	 [class^=header-img]{padding-top:145%;}
    h1{ top:60px;}
	.pigL{ background-size:346px 278px; width:346px; height: 278px; left:-185px; }/*左豬*/
    .pigR{ background-size:331px 275px; width:331px; height: 275px; right:-185px;}/*右豬*/
	
    /*第1頁*/
	.MEMBER_section{ padding-bottom:100px;}
	[class^=slide] { font-size:1.2em;}
	.slide3{ height:auto; text-align:center; padding-bottom:20px;}
	.slide3 div:nth-of-type(1){ height:120px; display:inline-block; position:static; margin-left:25px;}
	.slide3 div:nth-of-type(2){ height:115px; display:inline-block; position:static;}
	.slide4 .txt{ width:95%; margin:0 auto;}
	.top10 li{ margin:10px 0; display:block; font-size:1.1em;}
	.top10 li:before{ background-size:35px 33px; line-height:37px; height:33px; width:35px;}
	.DISCOUNT h4 span{ display:block;}
.H3_2{ background:url(images/H3_2@mobile.png) no-repeat center top; height:130px;}
.H3_3{ background:url(images/H3_3@mobile.png) no-repeat center top; height:83px;}
.H3_4{ background:url(images/H3_4@mobile.png) no-repeat center top; height:83px;}
.H3_5{ background:url(images/H3_5@mobile.png) no-repeat center top; height:83px;}
/*男主文、女主文裡的各分類tab*/
.BL1_tab_M_tab li,.BL1_tab_F_tab li{ margin:5px 0; display:inline-block; width:30%; }
.BL1_tab_M_tab a,.BL1_tab_F_tab a{ width:100%; height:40px; line-height:40px; font-size: 0.9em;}
    
    /*第2頁*/
	.SALE{ padding:0 0 50px 0;}
    .chapter3{ background:url(images/H2_3@mobile.png) no-repeat center top; height:111px; }
.H3_6{ background:url(images/H3_6@mobile.png) no-repeat center top; height:100px;}
.H3_7{ background:url(images/H3_7@mobile.png) no-repeat center top; height:130px;}
    
    /*第3頁*/
	.NOMINATE{ padding:0 0 50px 0;}
    .chapter4{ background:url(images/H2_4@mobile.png) no-repeat center top; height:111px; }
    .H3_8{ margin: 80px auto 20px auto; background:url(images/H3_8@mobile.png) no-repeat center top; height:130px;}
    .NOMINATE .wrap{ margin-bottom: 50px;}
.N_list{ margin: 20px auto 50px auto;}
.N_list figure{ margin: 0 auto 10px auto;}
.N_left,.N_right{ display: block; margin: 0 auto;}
.N_list:nth-of-type(n+1) .N_left{ width:100%; max-width: inherit;}
.N_list:nth-of-type(2n) .N_left{ width:100%; margin-right: auto; max-width: inherit;}
.N_list:nth-of-type(n+1) .N_right{ width:100%; max-width: inherit;}
.N_list:nth-of-type(2n) .N_right{ width:100%; max-width: inherit;}
.N_book{ font-size: 0.8em; /*overflow: hidden;*/ margin-bottom: 10px; padding-left: 60px;}
.N_book:after{ content:''; display:block; width:100%; clear:both;}
.N_book img{ display:block; float: left; height: auto; width:50px; margin-right: 10px;}
.N_book img:hover{ transform:scale(1,1)}
.N_book span{ display: block; float: left; width: calc( 100% - 60px); line-height: 30px;}
.N_items>div{ margin-bottom: 5px;}
.N_list:nth-of-type(n+1) .N_speak:before {top: -20px; left:50%;  border-left: 8px solid transparent;  border-right: 8px solid transparent; border-top: 10px solid transparent; border-bottom: 10px solid #fff;width:0;}
.N_list:nth-of-type(2n) .N_speak:before {top: -20px; left:50%;  border-left: 8px solid transparent;  border-right: 8px solid transparent; border-top: 10px solid transparent; border-bottom: 10px solid #fff;width:0;}
.W_left, .W_right{ display: block; margin: 0 auto;}
.W_list figure{ margin: 0 auto 10px auto;}
.W_list:nth-of-type(n+1) .W_left{width:100%; max-width: inherit;}
.W_list:nth-of-type(2n) .W_left{width:100%; margin-right: auto; max-width: inherit;}
.W_list:nth-of-type(n+1) .W_right{width:100%; max-width: inherit;}
.W_list:nth-of-type(2n) .W_right{width:100%; max-width: inherit;}
.W_book{ font-size: 0.8em; overflow: hidden; margin-bottom:10px;}
.W_book img{ display:block; float: left; height: auto; width:50px; margin-right: 10px;}
.W_book span{ display: block; float: left; width: calc( 100% - 60px); line-height: 30px;}
.W_list:nth-of-type(n+1) .W_speak:before {top: -20px; left:50%;  border-left: 8px solid transparent;  border-right: 8px solid transparent; border-top: 10px solid transparent; border-bottom: 10px solid #fff;width:0;}
.W_list:nth-of-type(2n) .W_speak:before {top: -20px; left:50%;  border-left: 8px solid transparent;  border-right: 8px solid transparent; border-top: 10px solid transparent; border-bottom: 10px solid #fff;width:0;}

/*第4頁*/
.INFO_section{ padding:0 0 50px 0;}
    .chapter5{ background:url(images/H2_5@mobile.png) no-repeat center top; height:111px; }
    .H3_9{ background:url(images/H3_9@mobile.png) no-repeat center top; height:83px;}
.fieldset_bg{ padding:20px 20px 20px 10px;}
    
/*第5頁*/
.PRESENT{ padding:0 0 50px 0;}
    .chapter6{ background:url(images/H2_6@mobile.png) no-repeat center top; height:111px; }
    .GIFT .BOOK{ margin: 20px 15px;}
    .GIFT > ul li{ margin: 5px 0;}
    .GIFT > ul li a{ height: 40px; line-height: 40px; font-size: 0.9em;}
}
@media screen and (max-width:320px ){
	.pigL{ background-size:307px 247px; width:307px; height: 247px; left:-170px; bottom:10px;}/*左豬*/
    .pigR{ background-size:294px 244px; width:294px; height: 244px; right:-170px; bottom:10px;}/*右豬*/
	
    /*第5頁*/
    .GIFT .BOOK{ margin: 15px 10px;}
}