body,form{margin:0;padding:0;}
img{ background-image:none;}
img{border:0}
li{ list-style-type:none;}
*{ margin:0; padding:0;}
strong a{ color:#930;}



@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");
@import url("animate_adjust.css");
*{/* margin:0; padding:0; */
	-webkit-box-sizing:border-box; /*Safari Chrome*/
	-moz-box-sizing:border-box; /*Firefox*/
	box-sizing:border-box;
	/* image-rendering:-moz-crisp-edges;          Firefox        */
	image-rendering:-o-crisp-edges;            /* Opera          */
	image-rendering:-webkit-optimize-contrast; /* Safari         */
	image-rendering:optimize-contrast;         /* CSS3 Proposed  */
	-ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
  }

/*像素比例尺*/
body::before{ width:100%; height:18px; background:url(../images/ruler.png) no-repeat left top; content: ""; position: fixed; top:0; right:0; bottom:0; left:0; z-index:1; pointer-events: none; display:none;}

/*粒子效果*/
#particles-js{width:100vw; height: 100vw; pointer-events: none;/* 讓滑鼠穿牆，直接點選到下層的區塊 */ position:fixed; left:0; top:0;z-index:0; mix-blend-mode:plus-lighter; filter:blur(1.5px);}


/* --捲軸css start-- */
::-webkit-scrollbar { 
	width:8px; overflow: visible;
}
::-webkit-scrollbar-thumb {
	min-height: 28px; padding:100px 0 0;
	background-color: #977942; background-clip: padding-box;
    border: solid transparent; border-width:0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0), inset 0 -1px 0 rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb:hover {
    background-color: #c7a057;
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0);	
}
::-webkit-scrollbar-thumb:active {
    background-color: #d4bd9a;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
/* --細捲軸css end-- */

a{width:100%; height:100%; border:0; outline:none; display:block; transition: filter 0.3s, transform 0.3s; color:#b7b1a5;}
a:hover{ border:0; filter: brightness(1.1); transform: translateY(-1.5%);}

html{width:100%; font-size:14px; /* scroll-behavior: smooth; */ overflow-x:hidden;}
body{width:100%; margin:0; padding:0; font-family:'Microsoft JhengHei','微軟正黑體',Verdana, Geneva, sans-serif; color:#000; overflow-x:hidden;}

.container img{width:100%; height:auto; border:0; outline:none;}


.container .smiley_icon {width: auto;}

/*body下初始div*/
.container{width:100%; margin:0 auto; background-image: url(../images/bg_texture_s.webp), url(../images/bg_texture.webp); position: relative;}

.top{width:100%; max-width:2500px; margin:0 auto; background:url(../images/bg_top.png) no-repeat center top; text-align: center; position: relative; }

.bg_top_m{width:100%; max-width:1150px; margin:0 auto; aspect-ratio:115/96;}
.bg_top_s{width:100%; max-width:900px; margin:0 auto; display:none; position: absolute;aspect-ratio:90/95;}

nav{width:100%; position: absolute; left:0; top:0; z-index: 99999;}

.top_bar{width:100%; max-width:1150px; margin:0 auto; padding-top:1rem; display:flex; justify-content:center; position:relative;}

.logo{width:34%;}

.top_menu{width:60%;}
.top_menu li{width:30%; text-align: center;}
.top_menu li a{/* max-width:190px; */ margin:0 auto; display: flex; align-items: center;}

#mobile_menu{opacity:0; pointer-events:none; position:fixed; right:0; top:0;}/* position要設fixed才不會讓點選單時滾動到最上方 */

.top_bar>label{width:15%; max-width:36px; height:38px; font-size: 2rem; position:fixed; right:12px; top:10px; z-index:99999; cursor: pointer;}

/* --↓漢堡選單start↓-- */
.mobile_menu_icon {width:100%; height:100%; position:relative; top:8px; outline:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center;}
.mobile_menu_icon span,
.mobile_menu_icon::before,
.mobile_menu_icon::after {
	width:100%; height:4px; background:#a1864f url(../images/bg_mobile_menu.jpg) no-repeat left top / cover;
	content: ''; border-radius: 38px; position: absolute; left:0; top:0;
	Box-shadow: 0px 1px 0px 1px rgba(110,75,15,0.9), 0px 1px 0px 1px rgba(255,255,255,0.4) inset;
	transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
  .mobile_menu_icon::before {top:-27%;}
  .mobile_menu_icon::after {top:27%;}
/* --↑漢堡選單end↑-- */

.menu_list{width:100%; position: relative;}
.menu_list ul{width:100%; display:flex; justify-content:center; align-items:center; position:relative; transform:translateY(50%); z-index:99;}

.menu_list>label{width:100%; height:100%; position:absolute; right:0; top:0; z-index:98;}

.menu_list ul>label{width:100%; height:100%; position:absolute; left:0; top:0; cursor: pointer;}

label{display: none;}

:root {
	--max-width:1000px;
  }

/* --↓浮動選單start↓-- */
.float_menu{width:8%; max-width:92px; margin-left:calc(-0.5 * var(--max-width)); padding:3px; background:url(../images/bg_float_menu.jpg) repeat-x left top / auto 100%; position:fixed; left:46%; bottom:50%; z-index:9999; transform: translate(-100%,50%);}

.float_menu div{width:100%; border:2px solid #7a6542;}
.float_menu div, .float_menu ul{width:100%; position: relative;}
.float_menu ul{width:100%; padding:30% 10%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
.float_menu ul li{/* max-width:56px; */ margin-bottom:10%;}
.float_menu ul li:nth-last-of-type(1){margin-bottom:0;}

.float_menu div::before, .float_menu div::after,/* 首頁左邊浮動選單 */
.float_menu ul::before, .float_menu ul::after,
.left_menu .title::before, .left_menu .title::after,/* 百科全書左邊選單 */
.left_menu::before, .left_menu::after
{width:21%; max-width:20px; max-height:50%; background:url(../images/bg_float_menu_decor.png) no-repeat left top / cover; content:""; position: absolute; aspect-ratio:2 / 2.3; /* 20*23px */ mix-blend-mode:screen;}
.float_menu div::before, .left_menu .title::before{left:0; top:0;}
.float_menu div::after, .left_menu .title::after{right:0; top:0; transform: scaleX(-1);}
.float_menu ul::before, .left_menu::before{left:0; bottom:0; transform: scaleY(-1);}
.float_menu ul::after, .left_menu::after{right:0; bottom:0; transform: scale(-1,-1);}

/* --↑浮動選單end↑-- */


.appicon{width:100%; position:absolute; bottom:0; z-index: 10; /* transform:translateY(-5%); */}
.appicon ul{width:100%; display: flex; justify-content: space-between; align-items: center; }
.appicon ul li{width:21%;}
.appicon ul li.qrcode{width:13%;}


.appicon ul, .content{width:96%; max-width:var(--max-width); margin:0 auto;}

.content{padding:1.5rem 0;}

.btn_top{width:55px; height:55px; margin-left:calc(0.5 * var(--max-width)); position:fixed; left:46%; bottom:15%; z-index:50; transform: translate(120%,-50%); cursor:pointer; display: none;}
.btn_top a{background:url(../images/btn_top.png) no-repeat left top / 100% auto; transition: transform 0.5s ;}
.btn_top a:hover{transform: scale(1.1);}

/* --banner start↓-- */
.banner,.banner_block{width:100%; margin:0 auto; padding:0; position:relative;}
.banner_block .swiper{width:100%; position:relative;}

.banner_block a:hover{transform: none;}
.banner_block .swiper-slide img {width:100%; height:auto; display:block;}

.swiper-pagination_banner{bottom:.5vw!important; }

.swiper-pagination-bullet{margin: 0 var(--swiper-pagination-bullet-horizontal-gap,2%)!important; background:rgba(0,0,0,1);
	border-radius:0; transform: rotate(45deg); border:1px solid rgba(240,230,220,1); opacity:.5;
	Box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.8), 1px 1px 0px 1px rgba(205,190,170,0.6) inset;}

.swiper-pagination-bullet-active{background:rgba(130,100,50,1); opacity:1;}
/* --banner end↑--*/


/* --news最新公告 start↓-- */
.news,.news_block{width:100%; margin:0 auto; position:relative;}
.news{padding-bottom:2%;}
.news_block{ background:url(../images/bg_news.jpg) no-repeat left top / cover;}

.btn_news_menu{width:100%; background:rgba(20,15,8,0.5); border-bottom: 1px solid #e2bd72;}
.btn_news_menu ul{width:100%; display:flex;}

.btn_news_menu ul li{text-align:center; font-size:1.7rem; line-height:4rem; text-shadow:1px 1px rgba(0,0,0,.5); position: relative; overflow: hidden;}
.index .btn_news_menu ul li{width:20%;}/* 首頁公告類別五項 */
.inpage_news_list .btn_news_menu ul li{width:25%;}/* 內頁公告列表類別4項 */


.btn_news_menu ul li::after{width:100%; height:2px; background:rgba(228,188,115,1); position:absolute; left:-100%; bottom:0; content:""; transition:left 0.3s;}
.btn_news_menu ul li.active::after,.btn_news_menu ul li:hover::after{left:0;}
.btn_news_menu ul li a{color:#dcb36a;}
.btn_news_menu ul li.active a{filter: brightness(1.3);}

.news_list{width:100%; margin:0 auto; padding:2% 0;}
.news_list ul{width:100%;}
.news_list ul li{width:100%; padding:0 2%; line-height:3rem; position:relative;}
.news_list ul li a{color:#b7b1a5; text-shadow: 1px 1px 1px rgb(0,0,0,0.3); display:flex; justify-content:space-between; position:relative; z-index:1;}

.news_list ul li::after{
	width:0%; height:100%; position:absolute; left:0%; top:0; z-index:0; content:""; transition:width 0.4s cubic-bezier(0.75, 0, 0.175, 1); mix-blend-mode:multiply;
	background: linear-gradient(
		to right, 
		rgba(110,85,35,0) 0%, 
		rgba(110,85,35,.5) 3%,
		rgba(110,85,35,.5) 97%,
		rgba(110,85,35,0) 100%
	  );
}
.news_list ul li:hover::after{width:100%;}

.news_list ul li .news_title{margin-right:1rem; font-size:1.285rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

.news_date{font-size:1rem; white-space:nowrap;}
/* --news最新公告 end↑--*/


/* 公告列表start */
.page_title{width:100%; max-width:630px; margin:0 auto 2% auto;}
.pc{display: block;}
.mobile{display: none;}

.btn_news_page{width:100%; margin:0 auto; padding:0% 0 2% 0;}
.btn_news_page ul{width:100%; margin:0 auto; display:inline-flex; flex-wrap: wrap; justify-content: center;}
.btn_news_page ul li{width:fit-content; margin:0 0.5% 0.5rem 0.5%; white-space:nowrap; border:1px solid #a0968c;}
.btn_news_page ul li a{ background-color:rgba(160, 150, 140, 0); padding:.2rem .5rem; color:#a0968c; transition: background-color .5s, color .5s; display:flex; justify-content:center; align-items:center;}

.btn_news_page ul li a:hover,.btn_news_page ul li.active a{background-color:rgba(160, 150, 140, 1); color:#3c3228;}
.btn_news_page ul li.none,.btn_news_page ul li.none.active{border-color: #7a6542;}
.btn_news_page ul li.none a,.btn_news_page ul li.none.active a{ background-color:inherit; opacity:.5; cursor:default; transition: none;}
.btn_news_page ul li.none a:hover,.btn_news_page ul li.none.active a:hover{ background-color: inherit; color:#a0968c; filter:none;}

/* 公告列表end */

/* 公告內容start */
.inpage_news_content .news_block{padding-bottom:2rem;}
.news_head{width:100%; margin:0 auto; padding:3% 3% 0 3%; line-height:3rem; color:#dbc18e; text-shadow: 1px 1px 1px rgb(0,0,0,0.3); display:flex; flex-wrap: wrap; justify-content:space-between; position:relative; z-index:1;}
.news_head::after{width:95%; height:100%; position:absolute; left:2.5%; top:0; z-index:0; content:""; border-bottom:1px solid #7a6542; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5) );}

.inpage_news_content .news_title{width:100%; font-size:1.5rem; font-weight:bold; line-height:1.9rem; word-break: break-all;}
.inpage_news_content .news_date{width:100%;}

.news_content{width:94%; margin:2% auto 10% auto; color:#b7b1a5; text-shadow: 1px 1px 1px rgb(0,0,0,0.3); font-size:1.1rem; line-height:1.8rem; word-break: break-all}

.news_content *{max-width:100%!important;}

.news_content img{height:auto!important;}/* 修正公告內容圖片會加上style可能爆版的情況 */



.btn_back{width:40%; max-width:200px; margin:0 auto;}
/* 公告內容end */


/* 百科全書start */
.game_info_title{width:100%;}

.game_info_block{width:100%; background:#3f3624 url(../images/bg_game_info.webp) no-repeat left top / 100% auto; border:3px solid #7a6542; overflow: hidden; position: relative; display:flex;}

/* 左邊選單區塊 */
.left_menu{min-width:200px; background: rgba(35,29,20,.7); position: relative; border-right:3px solid #7a6542; box-shadow: 5px 0 10px 5px rgba(0,0,0,.5); transition: transform .4s;}

.btn_nav{min-width:2rem; text-align:center; cursor:pointer; position:absolute; right:0; top:0%; z-index:2; transform: translateX(100%); filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); transition:opacity .4s; opacity:0; pointer-events: none;}

.btn_nav a{ padding:.5rem; background:#7a6542; color:#f3e5ce; font-size:1.3rem;  transform: none; clip-path: polygon(100% 0, 100% 90%, 70% 100%, 0 100%, 0 0); text-shadow: 1px 1px 1px rgb(0,0,0,0.3); display:none; transition:color .4s, text-shadow .4s;}

.btn_nav a.active{ display: block;}

@-moz-document url-prefix() { /* firefox only */
	.btn_nav a{padding:.5rem 1rem .5rem .5rem;}
  }

.btn_nav a span{ writing-mode: vertical-lr; letter-spacing:2px; font-weight: bold; display: block;}

.btn_nav a.active{display:flex; flex-wrap: wrap; flex-direction: column;}
.btn_nav a:hover{background:#a7834e; color:#000; text-shadow: 1px 1px 1px rgba(255,247,217,0.3);}



.left_menu .title,.left_menu ul{width:100%; position: relative; z-index: 1;}
.left_menu .title{ padding-top:10%; display:flex; justify-content: center;}
.left_menu .title span{width:60%; position: relative; display: block;}
.left_menu .title img{width:100%; padding-bottom:10%;}
.left_menu .title span::after{width: 140%; height: 2px; content: ""; position:absolute; left:-20%; bottom:0; z-index: 99;
	background: linear-gradient(
		to right, 
		rgba(108,86,49,0) 0%, 
		rgba(108,86,49,1) 10%,
		rgba(108,86,49,1) 90%,
		rgba(108,86,49,0) 100%
	  );
	filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
}


/* ---左邊選單list---*/
.side_nav{width:100%; position: relative; z-index: 2;}
.side_nav ul{padding:5% 5% 5% 19%; position: relative;}

.side_nav ul li{ padding:.3rem 0; position: relative;}
.side_nav ul li span{display:block;}
.side_nav ul li a{color:#ac8c55; font-size:1.3rem; line-height:2rem;}
.side_nav ul li a:hover{transform: none;}

.side_nav ul li.level_1 a{font-size:1.6rem; font-weight:bold;}

.side_nav ul li.level_3{margin-left:1rem;}
.side_nav ul li.level_3 a{font-size:1.2rem; font-weight:bold;}

.side_nav ul li.active a,.side_nav ul li:hover a,
.side_nav ul li.level_1:hover+li a,
.side_nav ul li:nth-last-of-type(3):hover+li.level_3 a,
.side_nav ul li:nth-last-of-type(3):has(~li.level_3:hover) a
{color:#e6c48c; font-weight:bold;}

/* firefox only */
@-moz-document url-prefix() { 
	.side_nav ul li.active a,.side_nav ul li:hover a,
	.side_nav ul li.level_1:hover+li a,
	.side_nav ul li:nth-last-of-type(3):hover+li.level_3 a
	{color:#e6c48c; font-weight:bold;}
}


.side_nav ul li::before{width:.4rem; height:.4rem; margin-right:0.5rem; background:#ac8c55; content:""; aspect-ratio:1/1; display: block; position: absolute; left:-5%; top:42%; -webkit-transform:translateX(-160%) rotate(45deg); transform: translateX(-160%) rotate(45deg); transition:all .3s;}

.side_nav ul li.active::before, 
.side_nav ul li:hover::before,
.side_nav ul li.level_1:hover+li::before{ background:#e6c48c; -webkit-transform:translateX(-160%) rotate(135deg); transform: translateX(-160%) rotate(135deg);}

.side_nav ul li.level_1 a span{
	background: -webkit-linear-gradient(
    -90deg,
	rgb(255, 247, 217)20%,
	rgb(178, 125, 48) 100%
  );
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color:#ac8c55;
}

.side_nav ul li.level_1::before{width:.45rem; height:.45rem; background:#d9ba85; border: 3px solid #242426; box-shadow: 0 0 0 1px #d9ba85,0 0 0 1px #d9ba85; left:0%; top:35%;}

.side_nav ul li.level_3::before{-webkit-transform:translateX(-160%) rotate(0deg); transform: translateX(-160%) rotate(0deg);}

.side_nav ul li.level_3.active::before, .side_nav ul li.level_3:hover::before{ -webkit-transform:translateX(-160%) rotate(90deg); transform: translateX(-160%) rotate(90deg);}

/* 右邊內容區塊 */
.right_content{margin:0 auto; padding:3% 4%;
	background-image: url(../images/bg_game_info_right_content_lt.png), url(../images/bg_game_info_right_content_rt.png), url(../images/bg_game_info_right_content_lb.png), url(../images/bg_game_info_right_content_rb.png);
	background-position: left top, right top, left bottom, right bottom;
	background-repeat: no-repeat;
}

.game_info_title_level_1{width:100%; margin: 0 auto; background-position:center; background-repeat: no-repeat; background-size:auto 100%;  text-align: center;}
.game_info_title_level_1 img{max-width:400px;}

.info_1 .game_info_title_level_1{ background-image:url(../images/title_level_1_01.png);}
.info_2 .game_info_title_level_1{ background-image:url(../images/title_level_1_02.png);}
.info_3 .game_info_title_level_1{ background-image:url(../images/title_level_1_03.png);}
.info_3_3 .game_info_title_level_1{ background-image:url(../images/title_level_1_03_3.png);}


.game_info_title_level_2{width:100%; margin:0 auto; padding:1% 0; font-size: 2rem; color:#e6c48c; font-weight:bold; filter: drop-shadow(1px 1px 2px rgba(0,0,0,1)); position:relative; }
.game_info_title_level_2:after{width:100%; height: 2px; content: ""; z-index: 99; display: block; position: absolute; bottom: 0;
	background: linear-gradient(
		to right, 
		rgba(230,196,140,0.3) 0%, 
		rgba(230,196,140,.3) 10%,
		rgba(230,196,140,.3) 90%,
		rgba(230,196,140,0) 100%
	  );
	filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.2));
}

.game_info_title_level_2 span{padding:0 0 0 0%; display:flex; align-items: center; position: relative;}
.game_info_title_level_2 span:before{width:.4rem; height:.4rem; margin-right:1rem; background:#e6c48c; content:""; -webkit-transform:translateX(50%) rotate(45deg); transform: translateX(50%) rotate(45deg); transition:all .3s;}

.game_info_content{width:98%; margin:0 auto; padding-top:1.5rem; color:#b7b1a5; font-size:1.2rem; line-height:2rem; letter-spacing:0.5px; text-shadow: 1px 1px 1px rgba(0,0,0,0.3);}

/* .game_info_content>a{height: 0;} */

/* 右邊內容一開始如為h3，上方不留空 */
.game_info_content>h3:first-child>span{margin-top:0;}



.game_info_content a{width:initial; transform: initial; filter: brightness(1.5); display: inline-block;}
.game_info_content a:hover{text-decoration: underline;}

.game_info_content h3{font-size:1.4rem; font-weight:bold; color:#2d251a; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));}
.game_info_content h3 span{ margin:2rem 0 .5rem 0; padding:.1rem 1.3rem; background: #c2a16b; display:inline-block;
	text-shadow: 1px 1px 1px rgba(255,247,217,0.3); box-shadow: 1px 1px 0px 1px rgba(255,255,255,0.1)inset;
	clip-path: polygon(.5rem 0%, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%, 0% .5rem);
	background: -webkit-linear-gradient(
    -45deg,
	rgb(194, 161, 107) 20%,
	rgb(178, 125, 48) 100%
  );
  
}
.game_info_content h3 span.s{padding:.1rem .8rem;}
.game_info_content h3 span.m{padding:.1rem 1rem;}
/* .game_info_content p{display: flex; flex-wrap: wrap;} */

.game_info_content ol{width:90%; margin: 0 auto 1rem auto; list-style: decimal;}
.game_info_content ol li{ margin-bottom:1rem;}
.game_info_content ol li>span{ padding-bottom:.5rem; /* display: inline-flex; */}
.game_info_content ol li>span.block{ display:block;}
.game_info_content p+ol{margin-top:1rem;}

.highlight{ color:#ffe49b;}

.game_info_content .pic{margin:.5rem auto 2rem auto; border: 1px solid #977942; filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.2)); }
.game_info_content ol li>.pic, li>.memo{width:calc(100%/0.9); transform:translateX(-5%);}
.game_info_content .pic+.memo{margin-top:-1rem;}
.memo+.memo{margin-bottom:2rem;}


.attention h3 span{ filter:hue-rotate(-10deg) grayscale(.6);}
.attention ol li{margin-bottom:.75rem; font-size: 1.1rem; line-height:1.7rem; filter: hue-rotate(-10deg);}

/* 職業介紹 */
.info_3_1 .game_info_content{padding-top: 0;}

.game_info_content>div:first-of-type h3 span{margin-top:0;}

.cha_block{width:100%; margin:0 auto;}

.cha_pic_block{width:120%; margin:-3rem auto 0 auto; /* padding-bottom:3rem; */ position: relative; transform: translateX(-10%); aspect-ratio: 50 / 39;}
.info_3_1 .cha_pic_block .pic{width:100%; margin:0; border:none; opacity:0; filter:alpha(opacity=0); position:absolute; left:0; top:0;}
.cha_pic_block>div{	-webkit-animation: round 10s linear infinite; animation: round 10s linear infinite;}

@-webkit-keyframes round {
	5% {opacity:1; filter:alpha(opacity=100);}
	50%{opacity:1; filter:alpha(opacity=100);}
	55%{opacity:0; filter:alpha(opacity=0);}
  }
  @keyframes round {
	5% {opacity:1; filter:alpha(opacity=100);}
	50%{opacity:1; filter:alpha(opacity=100);}
	55%{opacity:0; filter:alpha(opacity=0);}
  }
  
  .cha_pic_block>div:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
  }
  .cha_pic_block>div:nth-of-type(2) {
	-webkit-animation-delay: 5s;
	animation-delay: 5s;	
  }

/* 遊戲介面 */
.info_3_2 ul li,.info_3_2_07 ul li,.info_3_2_15 ul li{width:100%; padding-bottom:1.2rem; display:flex; align-items: flex-start;}

.info_3_2 ul li>div.title, .info_3_2_07 ul li>div.title,.info_3_2_15 ul li>div.title
{margin-right: .5rem;
	background: -webkit-linear-gradient(
	-45deg,
	rgb(194, 161, 107) 20%,
	rgb(178, 125, 48) 100%
	);
	font-weight:bold; color:#2d251a; text-align: center; text-shadow: 1px 1px 1px rgba(255,247,217,0.3); display:flex; justify-content:center; align-items:center;
  	box-shadow: 1px 1px 0px 1px rgba(255,255,255,0.1)inset;
}

.info_3_2 ul li>div.title,.info_3_2_15 ul li>div.title{width:4%; min-width:2rem;	
	border-radius:50%; aspect-ratio:1 / 1; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4)); 
}
.info_3_2_07 ul li>div.title{min-width:5.5rem; padding:0 1rem 0 0.5rem;
	filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4)) hue-rotate(-15deg) saturate(80%);
	clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 50%, 0% 0%);
}

.info_3_2_03 ol{margin:1rem auto;;}

.info_3_2_07 ul{padding-top: 1rem;}

.part{margin-top: 1.3rem;}

/* 百科全書end */



/* 地邊copyright */
#footer{width:100%; margin:0 auto; background: #a0968c;}






@media only screen and (max-width:1220px){
	.float_menu{margin-left:0; left:1%; transform: translate(0%,50%);}

}

@media only screen and (max-width:1150px){
	.container, .top{background-size:217.3913%;}
	.btn_top{margin-left:0; left:initial; right:0; transform:translate(-10%,-50%);}
	
}


/* mobile mode */
@media only screen and (max-width:640px){
	html{font-size:13px;}
	.top{padding-top: 1.5rem; background:none;}
	.bg_top_m{display: none;}
	.bg_top_s{display:block; position:initial;}
	
	.top_bar{display: block;}

	.logo{width:50%; margin:0 auto;}

	.top_menu{width:100%; height:100%; background:rgba(0,0,0,0.75); position:fixed; left:100%; top:0; bottom:0; z-index:1000; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: left 0.5s; pointer-events:none;}

	label{display: block;}

	.appicon{margin-top:-15vw; position: relative;}
	.appicon ul{display:block; position: relative; flex-wrap:wrap;}
	.appicon ul li{width:37%; margin:0 1.5% 1% 0; float: left;}
	.appicon ul li.googleplay,.appicon ul li.steam{margin-right:0;}
	.appicon ul li.qrcode{width:23%;}
	.appicon ul::after{width:100%; height:0; content:""; clear: both; display:block; pointer-events: none;}

	/* 浮動選單直變橫+移至下方start */
	.float_menu{width:100%; max-width:initial; left:0; bottom:0; transform: translate(0,0);}
	.float_menu ul{width:100%; padding:3% 5%; display:flex; flex-wrap:nowrap; justify-content:space-around; align-items:center; }
	.float_menu ul li{width:18%; margin-bottom: initial;}
	/* 浮動選單直變橫+移至下方end */


	/* 點下漢堡選單效果start */
	#close{cursor: pointer;}
	#mobile_menu:checked ~ label>.mobile_menu_icon > span {box-shadow: initial; opacity:0;}
	#mobile_menu:checked ~ label>.mobile_menu_icon::before,
	#mobile_menu:checked ~ label>.mobile_menu_icon::after { top:0px; filter: brightness(1.2);}
	#mobile_menu:checked ~ label>.mobile_menu_icon::before {transform: rotate(225deg);}
	#mobile_menu:checked ~ label>.mobile_menu_icon::after {transform: rotate(-225deg);}
	#mobile_menu:checked ~ label>.mobile_menu_icon span,
	#mobile_menu:checked ~ label>.mobile_menu_icon::before,
	#mobile_menu:checked ~ label>.mobile_menu_icon::after {
	Box-shadow: 0px -1px 0px 1px rgba(110,75,15,0.9), 0px -1px 0px 1px rgba(255,255,255,0.4) inset;
	}

	#mobile_menu:checked ~ .top_menu{left:0; right:0;}
	#mobile_menu:checked ~ .top_menu{pointer-events:initial;}
	#mobile_menu:checked~ .top_menu .menu_list>label{opacity:1;}
	/* 點下漢堡選單效果end */
	
	.menu_list{width:100%; height:100%;}
	.menu_list ul{ width:75%; margin:0 auto; flex-wrap: wrap; flex-direction: column; /* transform:translateY(15%); */}
	.menu_list ul li{width:100%; max-width:380px; padding:1rem 0; position: relative;}

	.content{padding:.8rem 0;}

	/* news */
	.btn_news_menu ul li{font-size:1.5rem; line-height:3.5rem;}

	.btn_news_page{width:96%;}

	.news_head{display: block;padding-top:4%;}
	.inpage_news_content .news_title{width:100%; font-size:1.2rem;}
	.inpage_news_content .news_date{width:100%;}

	/* 百科全書 */
	.game_info_block{display: block;}

	.left_menu{ /* height:100%; */ background:rgba(35,29,20,1); position:absolute; transform: translateX(calc(-100% - 3px)); z-index: 50;}
	.btn_nav{opacity: 1; pointer-events:initial;}

	.side_nav ul li{ padding:.75rem 0;}
	.side_nav ul li.level_1 a{font-size: 1.8rem;}
	.side_nav ul li a{font-size: 1.5rem;}

	.right_content{width:100%; padding:5% 5% 10% 5%; background-size:13%;}

	.game_info_title_level_1{background-size:auto 75%;}
	.game_info_title_level_2{margin: 0 auto; text-align: center; font-size: 1.7rem;}

	.game_info_title_level_2:after{
		background: linear-gradient(
			to right, 
			rgba(230,196,140,0) 0%, 
			rgba(230,196,140,.3) 10%,
			rgba(230,196,140,.3) 90%,
			rgba(230,196,140,0) 100%
		  );
	}

	.game_info_title_level_2 span{justify-content: center;}
	.game_info_title_level_2 span::before{content: initial;}

	
	

}

@media only screen and (max-width:360px){
	.pc{display: none;}
	.mobile{display: block;}

	.btn_back{width:50%;}
}

@media only screen and (max-width:320px){
	.btn_news_menu ul li{font-size: 1.35rem;}
	.news_list ul li .news_title{font-size: 1.2rem;}
}
@media only screen and (max-width:300px){
	.info_3_2_07 ul li{flex-wrap: wrap;}
}