@charset "UTF-8";

*{ font-family: "Chiron GoRound TC", "Roboto Condensed", "Noto Sans TC", "微軟正黑體", sans-serif; letter-spacing: 1px; font-optical-sizing: auto; color: var(--firstColor);}
::selection {
	background: #fff5d3;
}
html{ margin: 0; padding: 0; background: var(--fifthColor);}
body{ display: flex; flex-direction: column; margin: 0; padding: 120px 0 0; overflow-x: hidden; transition: .5s;}
img{ display: block; max-width: 100%;}
a{ text-decoration: none;}
a.text{ position: relative; padding: 0 0 0 20px; color: #163bb5; text-decoration: none;}
a.text::before{ position: absolute; top: 5px; left: 2px; display: block; content: ""; width: 15px; height: 15px; background: url(../images/icon_link.png);}
a.shadow{ transition: .3s;}
a.shadow:hover{ transform: scale(0.99); box-shadow: 0px 0px 20px rgba(55,49,51,10%);}

input, select, textarea{ margin: 0; font-weight: normal; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: transparent;}
input:focus, select:focus, textarea:focus{ border: none; outline: none;}
::placeholder { color: #333333;}

/* ::-webkit-scrollbar { width: 5px; background-color: transparent;}
::-webkit-scrollbar-thumb { background-color: #160732;} */

h1.title{ display: flex; flex-direction: column; align-items: center; max-width: 700px; margin: 60px auto 0; padding: 0 20px; text-align: center; font-size: 2.5rem; font-weight: normal;}
h1.title span{ position: relative; width: 100%; margin: 0 0 30px; padding: 0 0 10px; border-bottom: 2px solid var(--secondColor); font-size: 1rem;}
h1.title span::after{ position: absolute; bottom: -2px; left: 42.5%; display: block; content: ''; width: 15%; height: 2px; background: var(--seventhColor);}
h2.title{ position: relative; display: inline-block; margin: 0 auto; padding: 0 0 20px; line-height: 1em; font-size: 2.375rem; font-weight: normal; border-bottom: 2px solid var(--tenthColor);}
h2.title::after{ position: absolute; bottom: -2px; left: 0; display: block; content: ''; width: 25%; height: 2px; background: var(--seventhColor);}

body:has(.ham.active){ overflow-y: hidden;}
.overflow{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--seventhColor); z-index: 9; opacity: 0; pointer-events: none;}
.overflow.active{ opacity: 0.95;}
@media (max-width:1024px){
	body{ padding: 60px 0 0;}

	h2.title{ font-size: 1.875rem;}
}
@media (max-width:750px){
	html{ font-size: 14px;}
	body{ padding: 40px 0 0;}
	::-webkit-scrollbar{ width: 0;}
	a.text::before{ top: 1; width: 11px; height: 11px; background-size: contain;}

	h1.title{ max-width: 50%;}
	h1.title span{ margin: 0 0 5px;}
}
@media (max-width:500px){
	h1.title{ margin: 30px auto 0; font-size: 1.875rem;}
	h2.title{ padding: 0 0 7px;}
}

:root{
	--firstColor : #484848;   /*黑字*/
	--secondColor : #eeeeee;  /*tag灰*/
	--thirdColor : #00a0e9;   /*dot藍*/
	--fourthColor : #ffffff;  /*白*/
	--fifthColor : #fcfbfa;   /*背景灰*/
	--sixthColor : #c31919;   /*hover紅*/
	--seventhColor : #e54b4b; /*全站紅*/
	--eighthColor : #cf8665;  /*內文橘字*/
	--ninthColor : #f8f6f5;   /*內文灰橘底*/
	--tenthColor : #f2e7e2;   /*灰橘線、灰橘目錄*/
	
	--changeBlack_white : invert(100%) sepia(0%) saturate(7459%) hue-rotate(101deg) brightness(104%) contrast(99%);
	--changeBlack_01 : invert(39%) sepia(63%) saturate(1023%) hue-rotate(321deg) brightness(92%) contrast(97%);
	--changeBlack_02 : invert(26%) sepia(47%) saturate(0%) hue-rotate(181deg) brightness(97%) contrast(97%);
	--changeBlack_03 : invert(46%) sepia(26%) saturate(3645%) hue-rotate(169deg) brightness(96%) contrast(101%);
	--changeBlack_04 : invert(99%) sepia(94%) saturate(321%) hue-rotate(295deg) brightness(101%) contrast(90%);
}

/*--YT RWD--*/
.video-wrap { position: relative; width: 100%; padding-bottom: 56.25%;}
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}
.articleContent p:has(iframe) { position: relative; width: 100%; padding-bottom: 56.25%;}
.articleContent p:has(iframe) iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}


/*--通用按鈕--*/
.wordToRight{ display: inline-flex; align-items: center; justify-content: center; padding: 14px 25px 14px 30px; font-size: 1.25rem; line-height: 1em; border: 1px solid var(--tenthColor); border-radius: 50px; transition: .3s;}
.wordToRight:hover{ color: var(--fourthColor); background: var(--seventhColor); border: 1px solid var(--seventhColor);}
.wordToRight i{ display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 0 0 10px; border-radius: 50px; background: var(--seventhColor); transition: .3s;}
.wordToRight:hover i{ background: var(--fourthColor);}
.wordToRight i img{ width: 60%; filter: var(--changeBlack_white); transition: .3s;}
.wordToRight:hover i img{ filter: var(--changeBlack_01); margin: 0 auto;}

.wordToRight.down i img{ transform: rotate(90deg);}

.redBigBtn{ display: block; padding: 9px 20px 7px; border-radius: 50px; line-height: 1em; font-size: 0.875rem; color: var(--fourthColor); background: var(--seventhColor); transition: .3s;}
.redBigBtn:hover{ background: var(--sixthColor);}

.redSwitchBtn{ display: flex; align-items: baseline; padding: 9px 20px 7px; border-radius: 50px; line-height: 1em; font-size: 0.875rem; color: var(--fourthColor); background: var(--seventhColor); transition: .3s;}
.redSwitchBtn img{ margin: 0 0 0 5px; width: 10px; transform: rotate(90deg); filter: var(--changeBlack_white);}
.redSwitchBtn.active img{ transform: rotate(-90deg);}
.redSwitchBtn:hover{ background: var(--sixthColor);}

.goTop{ display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid var(--tenthColor); border-radius: 50px; transition: .3s;} 
.goTop:hover{ background: var(--seventhColor); border: 1px solid var(--seventhColor); }
.goTop img{ width: 30%; filter: var(--changeBlack_01); transform: rotate(-90deg); transition: .3s;}
.goTop:hover img{ filter: var(--changeBlack_white);}
@media (max-width:750px){
	.wordToRight{ padding: 5px 10px 5px 15px;}
	.wordToRight i{ margin: 0 0 0 5px;}
	.redBigBtn{ line-height: 20px; padding: 0 10px;}
	.redSwitchBtn{ line-height: 20px; padding: 0 10px;}
	.goTop{ width: 30px; height: 30px;}
}

/*--輪播左右箭頭--*/
.arrowA .slick-prev{ position: absolute; top: 50%; left: 30px; transform: translate(0,-50%); width: 100px; height: 40px; padding: 0; background: rgba(255,255,255,90%); font-size: 0; border: 0; border-radius: 50px; z-index: 1; cursor: pointer; transition: .3s; opacity: 0;}
.arrowA .slick-prev:hover{ background: var(--seventhColor);}
.slick-slider.arrowA:hover .slick-prev{ left: 20px; opacity: 1;}
.arrowA .slick-prev img{ width: 15px; margin: 0 auto; transform: rotate(180deg); filter: var(--changeBlack_01); transition: .3s;}
.arrowA .slick-prev:hover img{ filter: var(--changeBlack_white); transform: rotate(180deg) translate(10px,0);}
.arrowA .slick-next{ position: absolute; top: 50%; right: 30px; transform: translate(0,-50%); width: 100px; height: 40px; padding: 0; background: rgba(255,255,255,90%); font-size: 0; border: 0; border-radius: 50px; z-index: 1; cursor: pointer; transition: .3s; opacity: 0;}
.arrowA .slick-next:hover{ background: var(--seventhColor);}
.slick-slider.arrowA:hover .slick-next{ right: 20px; opacity: 1;}
.arrowA .slick-next img{ width: 15px; margin: 0 auto; filter: var(--changeBlack_01); transition: .3s;}
.arrowA .slick-next:hover img{ filter: var(--changeBlack_white); transform: translate(10px,0);}

.arrowB .slick-prev{ position: absolute; top: 0; right: 40px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; font-size: 0; border: 0; border-radius: 50px; background: var(--fourthColor); z-index: 1;text-indent: -9999px; cursor: pointer; transition: .3s;}
.arrowB .slick-prev:hover{ background: var(--seventhColor);}
.arrowB .slick-prev img{ width: 15px; filter: var(--changeBlack_01); transform: rotate(180deg); transition: .3s;}
.arrowB .slick-prev:hover img{ filter: var(--changeBlack_white);}
.arrowB .slick-next{ position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; font-size: 0; border: 0; border-radius: 50px; background: var(--fourthColor); z-index: 1; text-indent: -9999px; cursor: pointer; transition: .3s;}
.arrowB .slick-next:hover{ background: var(--seventhColor);}
.arrowB .slick-next img{ width: 15px; filter: var(--changeBlack_01); transition: .3s;}
.arrowB .slick-next:hover img{ filter: var(--changeBlack_white);}

.arrowC .slick-prev{ position: absolute; top: -90px; left: 0; width: 100px; height: 40px; padding: 0; background: var(--fourthColor); font-size: 0; border: 0; border-radius: 50px; z-index: 1; cursor: pointer; transition: .3s;}
.arrowC .slick-prev:hover{ background: var(--seventhColor);}
.arrowC .slick-prev img{ width: 15px; margin: 0 auto; transform: rotate(180deg); filter: var(--changeBlack_01); transition: .3s;}
.arrowC .slick-prev:hover img{ filter: var(--changeBlack_white); transform: rotate(180deg) translate(10px,0);}
.arrowC .slick-next{ position: absolute; top: -90px; right: 0; width: 100px; height: 40px; padding: 0; background: var(--fourthColor); font-size: 0; border: 0; border-radius: 50px; z-index: 1; cursor: pointer; transition: .3s;}
.arrowC .slick-next:hover{ background: var(--seventhColor);}
.slick-slider.arrowA:hover .slick-next{ right: 20px; opacity: 1;}
.arrowC .slick-next img{ width: 15px; margin: 0 auto; filter: var(--changeBlack_01); transition: .3s;}
.arrowC .slick-next:hover img{ filter: var(--changeBlack_white); transform: translate(10px,0);}
@media (max-width:1480px){
	.arrowC .slick-prev,
	.arrowC .slick-next{ display: none;}
}
@media (max-width:750px){
	.arrowB .slick-prev{ top: 2px; right: 25px; width: 20px; height: 20px;}
	.arrowB .slick-prev img{ width: 60%;}
	.arrowB .slick-next{ top: 2px; width: 20px; height: 20px;}
	.arrowB .slick-next img{ width: 60%;}
}

/*--輪播點點--*/
.dotA .slick-dots{ position: absolute; bottom: 10px; left: 50%; transform: translate(-50%,0); display: flex; gap: 10px; width: 1240px; max-width: 100%; margin: 0; padding: 0 40px; list-style: none; box-sizing: border-box;}
.dotA .slick-dots li{ flex: 1; height: 10px; border-radius: 2px; background: rgba(255,255,255,90%); cursor: pointer; transition: .3s;}
.dotA .slick-dots li:hover,
.dotA .slick-dots li.slick-active{ background: var(--seventhColor);}
.dotA .slick-dots li button{ display: none;}

.dotB .slick-dots{ position: absolute; top: -75px; left: 50%; transform: translate(-50%,0); display: flex; gap: 10px; width: 1240px; max-width: 100%; margin: 0; padding: 0 40px; list-style: none; box-sizing: border-box;}
.dotB .slick-dots li{ flex: 1; height: 10px; border-radius: 2px; background: rgba(255,255,255,90%); cursor: pointer; transition: .3s;}
.dotB .slick-dots li:hover,
.dotB .slick-dots li.slick-active{ background: var(--seventhColor);}
.dotB .slick-dots li button{ display: none;}
@media (max-width:1480px){
	.dotA .slick-dots li{ height: 6px;}
	.dotB .slick-dots{ display: none;}
}

/*--底線--*/
.redLine{ position: relative; border-bottom: 1px solid var(--tenthColor);}
.redLine::after{ position: absolute; bottom: -1px; left: 0; display: block; content: ''; width: 10px; height: 1px; background: var(--seventhColor);}
.redLine_vertical{ position: relative; border-right: 1px solid var(--tenthColor);}
.redLine_vertical::after{ position: absolute; top: 0; right: -1px; display: block; content: ''; width: 1px; height: 10px; background: var(--seventhColor);}
@media (max-width:1260px){
	.redLine_vertical{ border-right: none;}
	.redLine_vertical::after{ display: none;}
}

/*--tag--*/
.tagBlueCircle{ display: flex; align-items: center;}
.tagBlueCircle a{ position: relative; display: flex; align-items: center; padding: 4px 15px 4px 10px; border: 1px solid var(--tenthColor); border-radius: 50px; font-size: 0.875rem; z-index: 2;}
.tagBlueCircle a i{ display: block; width: 14px; height: 14px; margin: 0 5px 0 0; background: var(--thirdColor); border-radius: 50px;}
.tagBlueCircle b{ flex: 1; height: 1px; margin: 0 10px; background: var(--tenthColor);}
.tagBlueCircle img{ width: 5px; filter: var(--changeBlack_03);}
.tagGrey{ display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0;}
.tagGrey a{ flex: 0 0 auto; position: relative; display: inline-block; padding: 4px 10px; font-size: 0.75rem; border-radius: 2px; background: var(--secondColor); font-style: normal; font-weight: normal; line-height: 1em; z-index: 2; transition: .3s;}
.tagGrey a:hover,
.tagGrey a.active{ background: var(--seventhColor); color: var(--fourthColor);}
@media (max-width:750px){
	.tagBlueCircle a i{ width: 9px; height: 9px;}
	.tagGrey{ margin: 10px 0 0;}
}
@media (max-width:500px){
	.tagGrey a{ padding: 4px 6px; font-size: 0.6rem;}
}

/*--首頁--*/
.topbar{ position: fixed; top: 0; width: 100%; height: 120px; background: var(--fourthColor); border-bottom: 2px solid var(--seventhColor); box-sizing: border-box; transition: .3s; z-index: 10;}
.topbar.active{ height: 60px; border-bottom: 1px solid var(--seventhColor);}
.topbar header{ display: flex; align-items: center; max-width: 1800px; height: 100%; margin: 0 auto;}
.topbar .ham{ cursor: pointer; padding: 10px 0; order: 1; z-index: 6;}
.topbar .ham span{ display: block; width: 30px; height: 3px; border-radius: 50px; background: var(--firstColor); transition: .3s; transform-origin: center;}
.topbar .ham:hover span{ background: var(--sixthColor);}
.topbar .ham.active span{ transform: translate(0,50%) rotate(135deg);}
.topbar .ham span:nth-of-type(2){ margin: 6px 0 0 0;}
.topbar .ham.active span:nth-of-type(2){ margin: 0; transform: translate(0,-50%) rotate(-135deg);}
.topbar .logo{ position: absolute; left: 50%; transform: translate(-50%,0); z-index: 6;}
.topbar .logo img{ width: 240px; transition: .3s;}
.topbar.active .logo img{ width: 140px;}
.topbar .tool{ display: flex; gap: 0 20px; order: 3; z-index: 6;}
.topbar .btn_search{ width: 30px; cursor: pointer;}
.topbar .btn_search img{ filter: var(--changeBlack_02); transition: .3s;}
.topbar .btn_search:hover img{ filter: var(--changeBlack_01);}
.topbar .btn_social{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--firstColor); transition: .3s; cursor: pointer;}
.topbar .btn_social:hover{ border: 3px solid var(--seventhColor);}
.topbar .btn_social img{ width: 60%; filter: var(--changeBlack_02); transition: .3s;}
.topbar .btn_social:hover img{ filter: var(--changeBlack_01);}
.topbar .social{ position: relative; z-index: 1;}
.topbar .social i{ display: block; position: absolute; top: -10px; left: -10px; width: 50px; height: 50px; border-radius: 50px; background: #fff; box-shadow: 0px 0px 5px transparent; z-index: -1;}
.topbar .social.active i{ animation: social_bg 0.5s forwards;}
@keyframes social_bg {
    0%{ height: 50px; box-shadow: 0px 0px 5px transparent;}
	50%{ height: 50px; box-shadow: 0px 0px 5px var(--tenthColor);}
	100%{ height: 170px; box-shadow: 0px 0px 5px var(--tenthColor);}
}

.topbar .universeLogin{ margin: 0 20px 0 auto; order: 2; z-index: 6;}
.topbar .btn_universeLogin{ display: flex; align-items: center; padding: 0 20px; line-height: 30px; border-radius: 50px; font-size: 0.875rem; background: var(--firstColor); color: var(--fourthColor); cursor: pointer; transition: .3s;}
.topbar .btn_universeLogin:hover{ background: var(--seventhColor);}

.topbar .universeLogout{ display: flex; align-items: center; justify-content: center; margin: 0 20px 0 auto; order: 2; z-index: 6;}
.topbar .universeLogout p{ padding: 0 10px 0 0; font-size: 0.875rem;}
.topbar .btn_universeLogout{ display: flex; align-items: center; padding: 0 20px; line-height: 30px; border-radius: 50px; font-size: 0.875rem; background: var(--firstColor); color: var(--fourthColor); cursor: pointer; transition: .3s;}
.topbar .btn_universeLogout:hover{ background: var(--seventhColor);}

.topbar .social .btn_yt{ position: absolute; top: 40px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50px; background: var(--tenthColor); opacity: 0; pointer-events: none; transition: .3s;}
.topbar .social .btn_yt:hover{ background: var(--seventhColor);}
.topbar .social .btn_yt img{ width: 60%; filter: var(--changeBlack_white);}
.topbar .social.active .btn_yt{ animation: social_btn 1s forwards; animation-delay: .3s;}
@keyframes social_btn {
    0%{ opacity: 0; pointer-events: none;}
	100%{ opacity: 1; pointer-events: visible;}
}
.topbar .social .btn_ig{ position: absolute; top: 80px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50px; background: var(--tenthColor); opacity: 0; pointer-events: none; transition: .3s;}
.topbar .social .btn_ig:hover{ background: #a436d2;}
.topbar .social .btn_ig img{ width: 60%; filter: var(--changeBlack_white);}
.topbar .social.active .btn_ig{ animation: social_btn 1s forwards; animation-delay: .3s;}

.topbar .social .btn_fb{ position: absolute; top: 120px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50px; background: var(--tenthColor); opacity: 0; pointer-events: none; transition: .3s;}
.topbar .social .btn_fb:hover{ background: #3162de;}
.topbar .social .btn_fb img{ width: 60%; filter: var(--changeBlack_white);}
.topbar .social.active .btn_fb{ animation: social_btn 1s forwards; animation-delay: .3s;}

.topbar .fullMenu{ position: absolute; top: 0; left: 0; width: 100%; height: 0; overflow: hidden; z-index: 5;}
.topbar .fullMenu.active{ animation: fullMenu 1s forwards;}
@keyframes fullMenu {
    0%{ height: 40px; background: transparent;}
	50%{ height: 40px; background: rgba(255,255,255,98%);}
	100%{ height: 100vh; background: rgba(255,255,255,98%);}
}
.topbar .fullMenuMain{ margin: 118px auto 0; width: 100%; height: calc(100% - 110px); border-top: 2px solid var(--seventhColor); overflow: auto;}
.topbar .fullMenuMain::-webkit-scrollbar { width: 0px;}
.topbar nav{ display: flex; align-items: center; flex-direction: column;}
.topbar nav ul{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 10%; margin: 50px 0 0 0; padding: 0; width: 70%; list-style: none;}
.topbar nav ul li{ flex: 1; font-size: 1.75rem; line-height: 1em; text-align: center;}
.topbar nav ul li a{ position: relative; display: flex; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--tenthColor); transition: .3s;}
.topbar nav ul li a:hover{ color: var(--seventhColor);}
.topbar nav ul li a::after{ position: absolute; left: 0; bottom: -1px; display: block; width: 30px; height: 1px; content: ''; background: var(--seventhColor); transition: .3s;}
.topbar nav ul li a:hover::after{ width: 100%;}
.topbar nav ul li a img{ width: 30px; margin: 0 10px 0 0; filter: var(--changeBlack_02); transition: .3s;}
.topbar nav ul li a:hover img{ filter: var(--changeBlack_01); animation: navicon 0.5s forwards;}
.topbar nav ul li:nth-of-type(7) a:hover img{ animation: navicon7 0.5s forwards;}
@keyframes navicon {
	0%{ transform: translate(0,0);}
	50%{ transform: translate(0,-5px);}
	100%{ transform: translate(0,0);}
}
@keyframes navicon7 {
	0%{ transform: translate(0,0) scaleY(1);}
	50%{ transform: translate(0,-5px) scaleY(1.05);}
	100%{ transform: translate(0,0) scaleY(1);}
}
.topbar nav ul li a span{ position: absolute; right: 0; font-size: 2.15rem; color: var(--ninthColor); z-index: -1;}
.topbar nav ol{ display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; width: 70%; margin: 60px 0 0 0; padding: 50px 20px; list-style: none; background: var(--ninthColor); box-sizing: border-box;}
.topbar nav ol li{ line-height: 1em; }
.topbar nav ol li a{ position: relative; display: block; padding: 10px 15px 9px; text-align: center; background: var(--fourthColor); transition: .3s;}
.topbar nav ol li a:hover{ background: var(--seventhColor); color: var(--fourthColor);}
.topbar nav ol li a::before{ position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 0; border-color: var(--seventhColor) transparent transparent; pointer-events: none;}
@media (max-width:1880px){
	.topbar header{ padding: 0 40px;}
}
@media (max-width:1024px){
	.topbar{ height: 60px;}
	.topbar header{ padding: 0 20px;}
	.topbar.active{ border-bottom: 2px solid var(--seventhColor);}
	.topbar .logo img{ width: 120px;}
	.topbar.active .logo img{ width: 120px;}
	.topbar .tool{ margin: 0 0 0 auto;}
	.topbar .universeLogin{ position: fixed; bottom: 10px; left: 10px; display: none; align-items: center; justify-content: center; margin: 0; width: calc(100vw - 20px); border-radius: 5px;}
	.topbar .universeLogout{ position: fixed; bottom: 10px; left: 10px; display: none; margin: 0; width: calc(100vw - 20px); height: 40px; background: #fff; border-radius: 5px;}
	.topbar .universeLogin.active,
	.topbar .universeLogout.active{ display: flex; justify-content: space-between; background: var(--firstColor);}
	.topbar .universeLogout p{ color: var(--fourthColor); padding: 0 20px; margin: 0;}
	.topbar .btn_universeLogin{ width: 100%; height: 40px; justify-content: center; border-radius: 5px;}
	.topbar .btn_universeLogout{ line-height: 1em; border-left: 1px dashed var(--fourthColor); border-radius: 0;}
	.topbar .btn_universeLogout:hover{ background: var(--firstColor);}
	
	@keyframes fullMenu {
		0%{ height: 40px; background: transparent;}
		50%{ height: 40px; background: rgba(255,255,255,98%); overflow-y: hidden;}
		100%{ height: 100vh; background: rgba(255,255,255,98%); overflow-y: auto;}
	}
	.topbar .fullMenuMain{ margin: 58px auto 0; height: calc(100% - 60px);}
	.topbar nav ul{ gap: 30px 5%;}
	.topbar nav ul li{ font-size: 1rem;}
	.topbar nav ul li::before{ transform: translate(100%,20%); font-size: 0.75rem;}
	.topbar nav ul li a span{ font-size: 1.25rem;}
	.topbar nav ol li{ font-size: 0.875rem;}
}
@media (max-width:750px){
	.topbar{ height: 40px;}
	.topbar.active{ height: 40px;}
	.topbar .ham span{ width: 20px; height: 2px;}
	.topbar .logo img{ width: 100px;}
	.topbar.active .logo img{ width: 100px;}
	.topbar .tool{ gap: 10px;}
	.topbar .btn_search{ width: 20px;}
	.topbar .btn_social{ width: 16px; height: 16px; border: 2px solid var(--firstColor);}
	.topbar .btn_social:hover{ border: 2px solid var(--seventhColor);}
	.topbar .social i{ top: -8px; left: -8px; width: 36px; height: 36px;}
	@keyframes social_bg {
		0%{ height: 36px; box-shadow: 0px 0px 5px transparent;}
		50%{ height: 36px; box-shadow: 0px 0px 5px var(--tenthColor);}
		100%{ height: 120px; box-shadow: 0px 0px 5px var(--tenthColor);}
	}
	.topbar .social .btn_yt{ top: 28px; width: 20px; height: 20px;}
	.topbar .social .btn_ig{ top: 56px; width: 20px; height: 20px;}
	.topbar .social .btn_fb{ top: 84px; width: 20px; height: 20px;}

	@keyframes fullMenu {
		0%{ height: 20px; background: transparent;}
		50%{ height: 20px; background: rgba(255,255,255,98%); overflow-y: hidden;}
		100%{ height: 100vh; background: rgba(255,255,255,98%); overflow-y: auto;}
	}
	.topbar .fullMenuMain{ margin: 38px auto 0; padding: 0 0 50px 0; height: calc(100% - 108px);}
	.topbar nav ul{ grid-template-columns: repeat(2, 1fr); gap: 20px; width: 90%; margin: 10px 0 0 0;}
	.topbar nav ul li a{ padding: 20px 0;}
	.topbar nav ol{ grid-template-columns: repeat(3, 1fr); gap: 5px; width: 90%; margin: 30px 0 0 0; padding: 20px;}
}

/*--搜尋--*/
.search{ position: absolute; top: 120px; left: 0; width: 100%; background: rgba(255,255,255,95%); box-shadow: 0px 5px 5px rgba(0,0,0,0.01); transition: .3s;}
.search.active{ top: 60px;}
.search_form{ display: flex; gap: 0 20px; align-items: center; margin: 0 auto; padding: 40px 0; max-width: 1800px;}
.search .form_select{ position: relative; display: flex; align-items: center; justify-content: center;}
.search .form_select select{ padding: 12px 40px 12px 20px; font-size: 1.25rem; border: 1px solid var(--tenthColor); border-radius: 50px; cursor: pointer;}
.search .form_select img{ position: absolute; right: 20px; width: 10px; pointer-events: none; filter: var(--changeBlack_02);}

.search .form_input{ position: relative; display: flex; flex: 1; align-items: center; justify-content: center;}
.search .form_input input{ width: 100%; padding: 12px 20px; font-size: 1.25rem; border: 1px solid var(--tenthColor); border-radius: 50px; cursor: pointer;}
@media (max-width:1880px){
	.search_form{ padding: 40px;}
}
@media (max-width:1024px){
	.search{ top: 60px;}
	.search.active{ top: 60px;}
	.search_form{ padding: 40px 20px;}
}
@media (max-width:750px){
	.search{ top: 40px;}
	.search.active{ top: 40px;}
	.search_form{ flex-direction: column; gap:10px; padding: 20px;}
	.search label{ width: 100%;}
	.search .form_input input{ padding: 5px 10px; font-size: 1rem;}
	.search .form_select select{ width: 100%; padding: 5px 20px 5px 10px; font-size: 1rem;}
	.search .form_select img{ right: 10px;}
}


.menu{ background: var(--fifthColor);}
.menu ul{ display: flex; align-items: center; justify-content: center; gap: 50px; max-width: 1800px; height: 80px; margin: 0 auto; list-style: none;}
.menu ul li{ margin: 0; padding: 0;}
.menu ul li a{ transition: .3s;}
.menu ul li a.red{ color: var(--seventhColor);}
.menu ul li a:hover{ color: var(--seventhColor);}
.menu ul li a.red:hover{ color: var(--sixthColor);}
@media (max-width:1024px){
	.menu{ display: none;}
}


.index_topBanner{ background: var(--fifthColor);}
.index_topBanner_slider{ position: relative; max-width: 1800px; margin: 0 auto;}
.index_topBanner_slider a img{ border-radius: 5px;}
@media (max-width:1880px){
	.index_topBanner_slider{ margin: 0 40px;}
}
@media (max-width:1024px){
	.index_topBanner{ padding: 20px 0 0;}
	.index_topBanner_slider{ margin: 0;}
	.index_topBanner_slider a{ padding: 0 6.5px; box-sizing: border-box;}
}


.index_msg{ background: var(--fifthColor);}
.index_msg .index_msgMain{ position: relative; display: flex; gap: 10px; align-items: center; max-width: 1400px; margin: 0 auto; padding: 60px 0 30px;}
.index_msg .index_msgMain i{ display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50px; background: var(--seventhColor);}
.index_msg .index_msgMain i img{ width: 60%; filter: var(--changeBlack_white);}
.index_msg .index_msg_slider{ flex: 1; width: 1px;}
.index_msg .index_msg_slider a{ max-width: calc(100% - 120px); line-height: 30px; box-sizing: border-box; }
.index_msg .index_msg_slider a h3{ display: flex; align-items: center; min-width: 0px; margin: 0; padding: 1px 0 0 0; font-size: 1.25rem; font-weight: normal;}
.index_msg .index_msg_slider a span{ display: inline-block; margin: 0 10px 0 0; padding: 0 20px; border-radius: 50px; border: 1px solid var(--tenthColor); font-size: 0.875rem; font-weight: normal;}
.index_msg .index_msg_slider a p{ flex: 1; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .3s;}
.index_msg .index_msg_slider a:hover p{ color: var(--seventhColor);}
@media (max-width:1480px){
	.index_msg{ padding: 0 40px;}
	.index_msg .index_msgMain{ padding: 60px 0 30px;}
}
@media (max-width:1024px){
	.index_msg{ padding: 0 20px;}
	.index_msg .index_msgMain{ padding: 30px 0 20px;}
}
@media (max-width:750px){
	.index_msg .index_msgMain{ gap: 5px;}
	.index_msg .index_msgMain i{ width: 20px; height: 20px;}
	.index_msg .index_msg_slider a{ max-width: calc(100% - 60px); line-height: 20px;}
	.index_msg .index_msg_slider a span{ margin: 0 5px 0 0; padding: 0 10px; font-size: 0.75rem;}
}
@media (max-width:500px){
	.index_msg .index_msgMain{ padding: 20px 0 10px;}
	.index_msg .index_msg_slider a h3{ font-size: 1rem;}
}


.index_suggest{ background: var(--fifthColor);}
.index_suggestMain{ position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 50px; max-width: 1400px; margin: 0 auto; padding: 100px 0;}
.index_suggestMain .left{ position: sticky; left: 0; top: 120px; width: 950px; max-width: 100%;}
.index_suggestMain .right{ flex: 1; min-width: 0;}
.index_suggestMain article{ position: relative; padding: 0 0 50px;}
.index_suggestMain .right article{ padding: 0 0 20px;}
.index_suggestMain .right article+article{ margin: 50px 0 0;}
.index_suggestMain article>a{ position: absolute; width: 100%; height: 100%; z-index: 1;}
.index_suggestMain article>img{ margin: 20px 0 0; border-radius: 5px; transition: .3s;}
.index_suggestMain article:hover>img{ transform: scale(0.99); box-shadow: 0px 0px 20px rgba(55,49,51,10%);}
.index_suggestMain article h3{ display: flex; align-items: baseline; margin: 30px 0 0; font-size: 1.75rem; font-weight: normal;}
.index_suggestMain .right article h3{ margin: 20px 0 0; font-size: 1rem;}
.index_suggestMain article h3 span{ margin: 0 10px 0 0; color: var(--seventhColor);}
.index_suggestMain article h3 p{ margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .3s;}
.index_suggestMain article:hover h3 p{ color: var(--seventhColor);}
.index_suggestMain article>p{ display: -webkit-box; margin: 20px 0 0; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.index_suggestMain .right article .tagGrey{ margin: 10px 0 0;}
@media (max-width:1480px){
	.index_suggest{ padding: 0 40px;}
}
@media (max-width:1366px){
	.index_suggestMain .left{ top: 80px; width: 760px;}
}
@media (max-width:1152px){
	.index_suggestMain .left{ top: 80px; width: 600px;}
}
@media (max-width:1024px){
	.index_suggest{ padding: 0 20px;}
	.index_suggestMain{ flex-direction: column;}
	.index_suggestMain .left{ position: static; width: 100%;}
	.index_suggestMain .right{ width: 100%;}
	.index_suggestMain .right article h3{ font-size: 1.75rem;}
	.index_suggestMain article{ padding: 0 0 20px;}
	.index_suggestMain article h3 p{ white-space: normal;}
	.index_suggestMain article>p{ display: none;}
}
@media (max-width:750px){
	.index_suggestMain{ padding: 50px 0;}
	.index_suggestMain article h3{ margin: 20px 0 0; font-size: 1.25rem;}
	.index_suggestMain .right article h3{ font-size: 1.25rem;}
}
@media (max-width:500px){
	.index_suggestMain{ gap: 20px; padding: 30px 0;}
	.index_suggestMain article{ padding: 0 0 10px; border-bottom: none;}
	.index_suggestMain article::after{ display: none;}
	.index_suggestMain article>img{ margin: 10px 0 0;}
	.index_suggestMain article h3{ margin: 10px 0 0; font-size: 1rem;}
	.index_suggestMain .right article{ padding: 0 0 10px;}
	.index_suggestMain .right article+article{ margin: 20px 0 0;}
	.index_suggestMain .right article h3{ font-size: 1rem;}
	.index_suggestMain .right article h3 span{ margin: 2px 10px 0 0;}
}


.index_news{ background: var(--fourthColor);}
.index_newsMain{ display: flex; flex-wrap: wrap; gap: 50px; max-width: 1400px; margin: 0 auto; padding: 100px 0;}
.index_newsMain>a{ width: 500px;}
.index_newsMain>a img{ border-radius: 5px;}
.index_newsMain .right{ position: relative; flex: 1; min-width: 0;}
.index_newsMain .right>a{ position: absolute; top: 0; right: 0;}
.index_newsMain .index_newsTab{ position: relative; display: inline-flex; gap: 30px; border-bottom: 2px solid var(--tenthColor);}
.index_newsMain .index_newsTab::after{ position: absolute; bottom: -2px; left: 0; display: block; content: ''; width: calc(((100% - 30px) / 2) / 4); height: 2px; background: var(--seventhColor); transition: .3s;}
.index_newsMain .index_newsTab.active::after{ left: calc(((100% - 30px) / 2) + 30px);}
.index_newsMain .index_newsTab h2{ margin: 0 0 20px; line-height: 1em; font-size: 1.875rem; font-weight: normal; cursor: pointer; transition: .3s;}
.index_newsMain .index_newsTab h2:hover,
.index_newsMain .index_newsTab h2.active{ color: var(--seventhColor);}
.index_newsMain .index_newsList h3{ position: relative; display: flex; align-items: baseline; margin: 0; padding: 21px 0 10px; font-size: 1rem; font-weight: normal; border-bottom: 1px dashed var(--tenthColor);}
.index_newsMain .index_newsList h3>a{ position: absolute; top: 0; width: 100%; height: 100%; z-index: 1;}
.index_newsMain .index_newsList h3 span{ margin: 0 10px 0 0; color: var(--seventhColor); font-style: normal; font-weight: normal;}
.index_newsMain .index_newsList h3 p{ flex: 1; margin: 0 20px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .3s;}
.index_newsMain .index_newsList h3:hover p{ color: var(--seventhColor);}
.index_newsMain .index_newsList h3 i{ margin: 0;}
@media (max-width:1480px){
	.index_news{ padding: 0 40px;}
	.index_newsMain .index_newsTab{ gap: 10px;}
	.index_newsMain .index_newsTab::after{ width: calc(((100% - 10px) / 2) / 4);}
	.index_newsMain .index_newsTab.active::after{ left: calc(((100% - 10px) / 2) + 10px);}
}
@media (max-width:1024px){
	.index_news{ padding: 0 20px;}
	.index_newsMain>a{ display: none;}
}
@media (max-width:750px){
	.index_newsMain{ padding: 50px 0;}	
}
@media (max-width:500px){
	.index_newsMain{ padding: 30px 0;}
	.index_newsMain .index_newsTab h2{ margin: 0 0 7px;}
	.index_newsMain .index_newsList h3{ padding: 20px 0 10px;}
}


.index_gameList{ background: var(--fifthColor);}
.index_gameListMain{ max-width: 1400px; margin: 0 auto; padding: 100px 0; text-align: center;}
.index_gameLogo_slider{ width: calc(100% + 20px); margin: 30px 0 0; transform: translate(-10px,0);}
.index_gameLogo_slider .slick-slide>div{ margin: 0 10px;}
.index_gameLogo_slider .gameLogo{ display: inline-flex !important; align-items: center; justify-content: center; margin: 20px 0; aspect-ratio: 1 / 1; border-radius: 5px; background: var(--fourthColor); cursor: pointer; transition: .3s;}
.index_gameLogo_slider .gameLogo:hover{ transform: scale(0.99); box-shadow: 0px 0px 20px rgba(55,49,51,10%);}
.index_gameLogo_slider .gameLogo img{ max-width: 100%;}
.index_gameLogo_slider.dotA .slick-dots{ bottom: -25px;}

.index_gameInfo_slider{ margin: 90px 0 0 0;}
.index_gameInfo_slider article h3{ position: relative; display: flex; align-items: center; justify-content: center; margin: 0; font-size: 1.75rem; font-weight: normal;}
.index_gameInfo_slider article h3 span{ padding: 0 10px 0 0; color: var(--seventhColor);}
.index_gameInfo_slider article h3 p{ position: relative; margin: 0; line-height: 1em;}
.index_gameInfo_slider article h3::before{ position: absolute; left: 50%; display: block; content: ''; width: 25%; height: 70%; background: var(--tenthColor);}
.index_gameInfo_box{ display: flex; flex-wrap: wrap; gap: 50px; margin: 30px 0 0 0;}
.index_gameInfo_box>a{ display: block; width: 50%; transition: .3s;}
.index_gameInfo_box>a:hover{ transform: scale(0.99);}
.index_gameInfo_box>a img{ border-radius: 5px;}
.index_gameInfo_box .right{ display: flex; flex: 1; justify-content: space-between; flex-direction: column;}
.index_gameInfo_box .right .game_platform{ text-align: right;}
.index_gameInfo_box .right .game_platform span{ padding: 4px 10px; line-height: 1em; border-radius: 2px; font-size: 0.875rem; background: var(--secondColor);}
.index_gameInfo_box .right .game_description img{ width: 25px; filter: var(--changeBlack_03);}
.index_gameInfo_box .right .game_description p{ margin: 0; line-height: normal; text-align: left; font-size: 1.25rem; font-style: italic; }
.index_gameInfo_box .right .game_function{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;}
.index_gameInfo_box .right .game_function a{ display: flex; align-items: center;}
.index_gameInfo_box .right .game_function a img{ filter: var(--changeBlack_white); width: 14px; margin: 0 5px 0 0; padding: 0 0 1px;}
@media (max-width:1480px){
	.index_gameList{ padding: 0 40px;}
	.index_gameInfo_slider{ margin: 30px 0 0 0;}
}
@media (max-width:1152px){
	.index_gameInfo_box>a{ width: 35%;}
}
@media (max-width:1024px){
	.index_gameList{ padding: 0 20px;}
	.index_gameInfo_box{ gap: 30px; flex-direction: column;}
	.index_gameInfo_box>a{ width: 100%;}
	.index_gameInfo_box .right .game_description p{ font-size: 1rem;}
	.index_gameInfo_box .right .game_function{ justify-content: center; margin: 30px 0 0 0;}
}
@media (max-width:750px){
	.index_gameListMain{ padding: 50px 0;}
	.index_gameLogo_slider .gameLogo{ margin: 0; padding: 10px; box-sizing: border-box;}
	.index_gameLogo_slider .gameLogo:hover{ transform: scale(1); box-shadow: none;}
	.index_gameInfo_slider{ width: calc(100% + 40px); transform: translate(-20px,0);}
	.index_gameInfo_slider article{ padding: 0 6.5px; box-sizing: border-box;}
	.index_gameInfo_slider article h3{ font-size: 1.25rem;}
	.index_gameInfo_box .right .game_platform{ text-align: center;}
	.index_gameInfo_box .right .game_description{ display: flex; align-items: flex-start; margin: 20px 0 0 0; padding: 0 20px;}
	.index_gameInfo_box .right .game_description img{ width: 10px; margin: 3px 10px 0 0;}
}
@media (max-width:500px){
	.index_gameListMain{ padding: 30px 0;}
	.index_gameLogo_slider .slick-slide>div{ margin: 0 5px;}
	.index_gameInfo_slider article h3::before{ width: calc(50% - 10px);}
	.index_gameInfo_box{ margin: 10px 0 0; gap: 20px;}
}


.index_novel{ background: var(--fourthColor);}
.index_novelMain{ max-width: 1400px; margin: 0 auto; padding: 100px 0; text-align: center;}
.index_novelMain article h3{ position: relative; display: flex; align-items: center; justify-content: center; margin: 50px 0 0; font-size: 1.75rem; font-weight: normal;}
.index_novelMain article h3 span{ padding: 0 10px 0 0; line-height: 0; color: var(--seventhColor);}
.index_novelMain article h3 p{ position: relative; margin: 0; line-height: 1em;}
.index_novelMain article h3::before{ position: absolute; left: 50%; display: block; content: ''; width: 25%; height: 70%; background: var(--tenthColor);}
.index_novelMain article .index_gameInfo_box{ flex-direction: row-reverse;}
.index_novelInfo_box{ display: flex; gap: 50px; flex-wrap: wrap; margin: 30px 0 0 0;}
.index_novelInfo_box>a{ display: block; width: 50%; transition: .3s;}
.index_novelInfo_box>a:hover{ transform: scale(0.99);}
.index_novelInfo_box>a img{ border-radius: 5px;}
.index_novelInfo_box .left{ display: flex; flex: 1; justify-content: space-between; flex-direction: column;}
.index_novelInfo_box .left .novel_chapter{ text-align: left;}
.index_novelInfo_box .left .novel_chapter span{ padding: 4px 10px; line-height: 1em; border-radius: 2px; font-size: 0.875rem; background: var(--secondColor);}
.index_novelInfo_box .left .novel_description h4{ margin: 0; line-height: normal; text-align: left; font-size: 1.25rem; font-style: italic; font-weight: normal; color: var(--seventhColor); }
.index_novelInfo_box .left .novel_description p{ margin: 0; line-height: normal; text-align: left; font-size: 1.25rem; font-style: italic; }
.index_novelInfo_box .left .novel_function{ display: flex; justify-content: flex-start; gap: 10px;}
@media (max-width:1480px){
	.index_novel{ padding: 0 40px;}
}
@media (max-width:1152px){
	.index_novelInfo_box>a{ width: 35%;}
}
@media (max-width:1024px){
	.index_novel{ padding: 0 20px;}
	.index_novelInfo_box{ gap: 30px; flex-direction: column-reverse; }
	.index_novelInfo_box>a{ width: 100%;}
	.index_novelInfo_box .left .novel_chapter{ text-align: right;}
	.index_novelInfo_box .left .novel_description p{ font-size: 1rem;}
	.index_novelInfo_box .left .novel_function{ justify-content: center; margin: 30px 0 0 0;}
}
@media (max-width:750px){
	.index_novelMain{ padding: 50px 0;}
	.index_novelMain article h3{ margin: 30px 0 0; font-size: 1.25rem;}
	.index_novelInfo_box .left .novel_chapter{ text-align: center;}
	.index_novelInfo_box .left .novel_description{ margin: 20px 0 0 0; padding: 0 20px;}
	.index_novelInfo_box .left .novel_description h4{ text-align: center;}
}
@media (max-width:500px){
	.index_novelMain{ padding: 30px 0;}
	.index_novelMain article h3::before{ width: calc(50% - 10px);}
	.index_novelInfo_box{ margin: 10px 0 0; gap: 20px;}
}


.index_products{ background: linear-gradient(to bottom,#ffffff 0%,#ffffff 60%,#fcfbfa 60%,#fcfbfa 100%);}
.index_productsMain{ max-width: 1400px; padding: 100px 0; margin: 0 auto; text-align: center;}
.index_products_slider{ margin: 30px 0 60px 0;}
.index_products_slider .slick-slide{ margin: 0 25px;}
.index_products_slider .slick-list{ margin: 0 -25px;}
.index_products_slider a{ margin: 20px 0;}
.index_products_slider a img{ border-radius: 5px;}
@media (max-width:1480px){
	.index_products{ padding: 0 40px;}
}
@media (max-width:1152px){
	.index_products_slider .slick-slide{ margin: 0 15px;}
	.index_products_slider .slick-list{ margin: 0 -15px;}
}
@media (max-width:1024px){
	.index_products{ padding: 0 20px;}
}
@media (max-width:750px){
	.index_productsMain{ padding: 50px 0;}
	.index_products_slider{ margin: 30px 0;}
	.index_products_slider a{ margin: 0;}
	.index_products_slider a:hover{ transform: scale(1); box-shadow: none;}
	.index_products_slider .slick-slide{ margin: 0 10px;}
	.index_products_slider .slick-list{ margin: 0 -10px;}
}
@media (max-width:500px){
	.index_productsMain{ padding: 30px 0;}
	.index_products_slider{ width: calc(100% + 40px); transform: translate(-20px,0);}
	.index_products_slider a{ padding: 0 6.5px; box-sizing: border-box;}
	.index_products_slider .slick-slide{ margin: 0;}
	.index_products_slider .slick-list{ margin: 0;}
}


.footer{ margin: auto 0 0 0; border-top: 2px solid var(--seventhColor); background: var(--fourthColor);}
footer{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1800px; margin: 0 auto; padding: 30px 0;}
footer .copyright{ display: flex; flex-direction: column; align-items: center;}
footer .copyright ul{ display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; line-height: 1em;}
footer .copyright li{ position: relative;}
footer .copyright li+li::after{ position: absolute; top: 0; left: -15px; display: block; content: ''; width: 1px; height: 12px; background: var(--seventhColor); transform: rotate(15deg);}
footer .copyright li a{ transition: .3s;}
footer .copyright li a:hover{ color: var(--seventhColor);}
footer .copyright p{ margin: 10px 0 0; font-size: 0.875rem;}
footer .copyright p span{ color: var(--thirdColor);}
footer .goTop{ justify-self: end;}
@media (max-width:1880px){
	footer{ padding: 30px 40px;}
}
@media (max-width:1024px){
	footer{ padding: 30px 20px;}
	footer img{ width: 120px;}
}
@media (max-width:750px){
	footer{ grid-template-columns: auto 1fr;}
	footer .copyright{ justify-self: end; align-items: flex-end;}
	footer .goTop{ display: none;}
}
@media (max-width:500px){
	footer{ grid-template-columns: 1fr; row-gap: 20px;}
	footer img{justify-self: center;}
	footer .copyright{ justify-self: center; align-items: center;}
}


/*--宇宙--*/
.breadcrumb{ margin: -6px 0 0 0;}
.breadcrumb ol{ display: flex; align-items: center; justify-content: flex-start; max-width: 1400px; margin: 0 auto; padding: 0; list-style: none;}
.breadcrumb li{ position: relative; font-size: 0.75rem; line-height: 1em; color: var(--seventhColor);}
.breadcrumb li:nth-last-of-type(1){ flex: 1; margin: 0 0 0 10px;}
.breadcrumb li+li{ margin: 0 0 0 20px;}
.breadcrumb li+li::after{ position: absolute; top: 0; left: -10px; display: block; content: ''; width: 1px; height: 10px; background: var(--firstColor); transform: rotate(15deg);}
.breadcrumb li:nth-last-of-type(1)::after{ display: none;}
.breadcrumb li i{ display: block;}
.breadcrumb li a{ color: var(--firstColor); transition: .3s;}
.breadcrumb li a:hover{ color: var(--seventhColor);}
@media (max-width:1480px){
	.breadcrumb{ margin: -6px 0 0 0; padding: 0 40px;}
}
@media (max-width:1024px){
	.breadcrumb{ margin: 20px 0 0 0; padding: 0 20px;}
}


.index_wallpaper{ background: var(--fifthColor);}
.index_wallpaperMain{ max-width: 1400px; padding: 100px 0; margin: 0 auto; text-align: center;}
.index_wallpaperMain div{ display: flex; gap: 50px; margin: 50px 0 0 0;}
.index_wallpaperMain div a{ flex: 0.5625;}
.index_wallpaperMain div a:nth-of-type(1){ flex: 1.777;}
.index_wallpaperMain div a img{ max-width: 100%; border-radius: 5px;}
@media (max-width:1480px){
	.index_wallpaper{ padding: 0 40px;}
}
@media (max-width:1024px){
	.index_wallpaper{ padding: 0 20px;}
}
@media (max-width:750px){
	.index_wallpaperMain{ padding: 50px 0;}
	.index_wallpaperMain div{ gap: 30px; margin: 30px 0 0;}
}
@media (max-width:500px){
	.index_wallpaperMain{ padding: 30px 0;}
	.index_wallpaperMain div{ gap: 10px; margin: 30px 0 0;}
}


.article_group{ background: var(--fourthColor);}
.article_groupMain{ max-width: 1400px; margin: 0 auto; padding: 100px 0;}
.article_groupTitle{ display: flex; justify-content: space-between;}
.article_groupMain h2{ margin: 0; padding: 0 0 10px;}
.article_group_slider{ margin: 30px 0 50px; padding: 0 0 50px;}
.article_group_slider:nth-last-of-type(1){ margin: 30px 0 0;}
.article_group_slider article{ position: relative;}
.article_group_slider article>a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.article_group_slider article img{ border-radius: 5px; transition: .3s;}
.article_group_slider article:hover img{ transform: scale(0.99);}
.article_group_slider article h3{ display: flex; align-items: baseline; margin: 20px 0 0; font-size: 1rem; font-weight: normal; line-height: normal;}
.article_group_slider article h3 span{ margin: 0 10px 0 0; color: var(--seventhColor);}
.article_group_slider article h3 p{ display: -webkit-box; margin: 0; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: .3s;}
.article_group_slider article:hover h3 p{ color: var(--seventhColor);}

.article_group_slider .slick-slide{ margin: 0 25px;}
.article_group_slider .slick-list{ margin: 0 -25px;}
.article_group_slider .slick-prev{ margin-top: calc((100% - 100px) / 3 * 9 / 16 / 2); top: 0; transform: translate(0,-50%);}
.article_group_slider .slick-next{ margin-top: calc((100% - 100px) / 3 * 9 / 16 / 2); top: 0; transform: translate(0,-50%);}
@media (max-width:1480px){
	.article_group{ padding: 0 40px;}
}
@media (max-width:1024px){
	.article_group{ padding: 0 20px;}
}
@media (max-width:750px){
	.article_groupMain{ padding: 50px 0;}
	.article_group_slider{ width: calc(100% + 40px); transform: translate(-20px,0); padding: 0; border-bottom: none;}
	.article_group_slider::after{ display: none;}
	.article_group_slider article{ padding: 0 6.5px; box-sizing: border-box;}
	.article_group_slider .slick-slide{ margin: 0;}
	.article_group_slider .slick-list{ margin: 0;}
}
@media (max-width:500px){
	.article_groupMain{ padding: 30px 0;}
	.article_group_slider{ margin: 20px 0 40px;}
	.article_group_slider:nth-last-of-type(1){ margin: 20px 0 0;}
}


.more_article{ background: var(--fifthColor);}
.more_articleMain{ display: flex; max-width: 1400px; margin: 0 auto; padding: 100px 0;}
.articleList{ flex: 1; padding: 0 50px 0 0;}
aside.rightAside{ width: 400px; max-width: 100%; padding: 0 0 0 50px;}
aside.leftAside{ position: sticky; top: 100px; width: 400px; max-width: 100%; padding: 0 50px 0 0;}
aside.leftAside>img{ display: none;}
.loadArticle{ text-align: center; margin: 30px 0 0 0;}

.mediaList{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 50px 0 0;}

.article_listType_a{ display: flex; align-items: flex-start; gap: 50px; margin: 30px 0; padding: 0 0 30px; border-bottom: 1px dashed var(--tenthColor); text-align: left;}
.article_listType_a>a{ width: 300px;}
.article_listType_a img{ border-radius: 5px;}
.article_listType_a .right{ flex: 1; margin: -7px 0 0 0;}
.article_listType_a .right h3{ display: flex; align-items: baseline; margin: 0; font-size: 1.75rem; font-weight: normal; transition: .3s;}
.article_listType_a .right a:hover h3{ color: var(--seventhColor);}
.article_listType_a .right h3 span{ margin: 0 10px 0 0; color: var(--seventhColor);}
.article_listType_a .right p{ margin: 10px 0 0 0;}
.article_listType_a .right .postMeta{ display: flex; justify-content: space-between; margin: 30px 0 0 0;}
.article_listType_a .right .postMeta p{ margin: 0; font-size: 0.875rem; line-height: 1em;}

.article_listType_b{ position: relative; min-width: 0;}
.article_listType_b>a{ position: absolute; width: 100%; height: 100%; z-index: 1;}
.article_listType_b img{ border-radius: 5px; transition: .3s;}
.article_listType_b:hover img{ transform: scale(0.99); box-shadow: 0px 0px 20px rgba(55,49,51,10%);}
.article_listType_b h3{ display: flex; align-items: baseline; margin: 20px 0 0; font-size: 1rem; font-weight: normal; transition: .3s;}
.article_listType_b h3 p{ margin: 0; transition: .3s;}
.article_listType_b:hover h3 p{ color: var(--seventhColor);}
.article_listType_b h3 span{ margin: 0 10px 0 0; color: var(--seventhColor);}
.mediaList .article_listType_b:nth-of-type(1){ position: relative; grid-column: 1 / -1; padding: 0 0 30px; border-bottom: 1px solid var(--tenthColor);}
.mediaList .article_listType_b:nth-of-type(1)::after{ position: absolute; bottom: -1px; left: 0; display: block; content: ''; width: 10px; height: 1px; background: var(--seventhColor);}
.mediaList .article_listType_b:nth-of-type(1) h3{ font-size: 1.75rem;}
.mediaList .article_listType_b:not(:nth-of-type(1)) h3 p{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

aside .index_newsMain{ padding: 50px 0;}

.ad_onlyImg{ display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px;}
.ad_onlyImg a{ display: block;}
.ad_onlyImg a img{ border-radius: 5px;}
.ad_novel{ padding: 50px 0;}
.ad_novel h2.title{ font-size: 1.875rem;}
.ad_novel section{ margin: 30px 0 0;}
.ad_novel a{ display: block;}
.ad_novel a img{ width: 400px; border-radius: 5px;}
.ad_video{ padding: 50px 0; }
.ad_video h2.title{ font-size: 1.875rem;}
.ad_video section{ display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; margin: 30px 0 0 0;}

@media (max-width:1480px){
	.more_article{ padding: 0 40px;}
	aside.rightAside{ width: 300px;}
	aside.leftAside{ width: 300px;}
}
@media (max-width:1260px){
	.more_articleMain{ flex-direction: column;}
	.more_articleMain .articleList{ order: 2; margin: 50px 0 0 0; padding: 0;}
	.more_articleMain.fullList .articleList{ order: 1; margin: 0;}
	aside.rightAside{ order: 1; width: 100%; padding: 0;}
	.fullList aside.rightAside{ margin: 50px 0 0;}
	aside.leftAside{ position: relative; top: 0; padding: 0; width: 100%; border-radius: 5px; overflow: hidden;}
	aside.leftAside>img{ position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; filter: grayscale(10%) blur(10px) opacity(0.1);}

	.article_listType_b h3 p{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
	.mediaList .article_listType_b:not(:nth-of-type(1)) h3 p{ -webkit-line-clamp: 2; white-space: normal;}

	.ad_onlyImg{ grid-template-columns: repeat(auto-fit, calc((100% - 100px) / 3)); justify-content: center; gap: 50px;}
	.ad_novel section{ display: flex; justify-content: center;}
	.ad_video section{ grid-template-columns: repeat(3, 1fr); gap: 30px;}
}
@media (max-width:1024px){
	.more_article{ padding: 0 20px;}

	.article_listType_a{ gap: 20px;}
	.article_listType_a>a{ width: 200px;}
	.article_listType_a .right h3{ font-size: 1rem;}
	.article_listType_a .right>p{ display: none;}
	.article_listType_a .right .postMeta{ margin: 20px 0 0;}
	
	.ad_onlyImg{ grid-template-columns: repeat(auto-fit, calc((100% - 30px) / 2)); gap: 30px;}
	.ad_video section{ grid-template-columns: repeat(2, 1fr); gap: 30px;}
}
@media (max-width:750px){
	.more_articleMain{ flex-direction: column; padding: 50px 0;}
	.mediaList{ grid-template-columns: repeat(2, 1fr); margin: 30px 0 0 0;}
}
@media (max-width:500px){
	.more_articleMain{ padding: 30px 0;}
	.more_articleMain .articleList{ margin: 30px 0 0 0;}
	.mediaList{ gap: 20px 10px;}

	.article_listType_a{ gap: 10px; margin: 20px 0; padding: 0 0 20px 0;}
	.article_listType_a>a{ width: 100px;}
	.article_listType_a .right{ margin: -2px 0 0;}
	.article_listType_a .right .postMeta{ margin: 10px 0 0;}
	.article_listType_a .right .postMeta p{ font-size: 0.6rem;}

	.mediaList .article_listType_b:nth-of-type(1) h3{ font-size: 1rem;}

	aside .index_newsMain{ padding: 30px 0;}
	.ad_onlyImg{ grid-template-columns: repeat(auto-fit, calc((100% - 10px) / 2)); gap: 20px 10px;}
	.ad_novel{ padding: 30px 0;}
	.ad_video{ padding: 30px 0 0; border-bottom: none;}
	.ad_video::after{ display: none;}
	.ad_video section{ gap: 20px 10px;}
}


.searchSummary{ padding: 40px 30px; border-radius: 5px; background: var(--fourthColor);}
.searchMeta + h2.title{ margin: 50px 0 0 0;}
.searchMeta:not(:has(.searchSummary)) .tagGrey{ margin: 0;}
@media (max-width:500px){
	.searchSummary{ padding: 20px 10px;}
	.searchMeta + h2.title{ margin: 30px 0 0 0;}
}


.path{ display: flex; justify-content: center; text-align: center; margin: 50px 0 0 0;}
.path i{ display: flex; align-items: center; justify-content: center; width: 100px; height: 40px; background: #fff; cursor: pointer; border-radius: 50px;}
.path i img{ width: 10px; filter: var(--changeBlack_01); transition: .3s;}
.path i:nth-of-type(1) img{ transform: rotate(180deg);}
.path i:nth-of-type(1):hover img{ transform: translate(-5px,0) rotate(180deg);}
.path i:nth-of-type(2):hover img{ transform: translate(5px,0);}

.path div{ position: relative; display: flex; margin: 0 5px;}
.path div::after{ position: absolute; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; content: '選擇頁面'; z-index: 1; opacity: 0; pointer-events: none; border-radius: 50px;}
.path div:hover::after{ background: var(--seventhColor); color: var(--fourthColor); opacity: 1;}
.path div span{ position: absolute; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; background: var(--fourthColor); cursor: pointer; box-sizing: border-box; pointer-events: none; border-radius: 15px;}
.path div:hover span{ opacity: 0;}
.path div select{ width: 114px; font-size: 1rem; text-align: center; opacity: 0; cursor: pointer;}
@media (max-width:500px){
	.path{ margin: 30px 0 0 0;}
	.path i{ width: 60px; height: 30px;}
	.path div select{ width: 100px;}
}


.novelList{ align-items: flex-start;}
.novel{ position: relative; flex: 1; padding: 0 0 0 50px; border-left: 1px solid var(--tenthColor);}
.novel::after{ position: absolute; top: 0; left: -1px; display: block; content: ''; width: 1px; height: 10px; background: var(--seventhColor);}
.novelMeta img{ border-radius: 5px;}
.novelMeta p{ display: flex; align-items: center; margin: 20px 0 0; padding: 0 0 20px; color: var(--seventhColor); border-bottom: 1px dashed var(--tenthColor);}
.novelMeta p i{ margin: 0 10px 0 0; padding: 4px 5px 3px; border: 1px solid var(--seventhColor); border-radius: 2px; color: var(--seventhColor); font-size: 0.75rem; font-style: normal; line-height: 1em;}
.novelMeta p span{ margin: 0 0 0 auto; font-size: 0.875rem;}
.novelMeta>div{ display: flex; justify-content: flex-end; margin: 20px 0 0; gap: 0 10px;}
.novelMeta>div a:nth-of-type(1){ margin: 0 auto 0 0;}

.novel h3{ display: flex; align-items: baseline; margin: -9px 0 0 0; font-size: 1.75rem; font-weight: normal;}
.page_article .novel h3{ padding: 0 0 30px;}
.novel a:hover h3{ color: var(--seventhColor);}
.novel h3 span{ margin: 0 10px 0 0; color: var(--seventhColor);}

.novelSummary{ position: relative; margin: 50px 0 0; padding: 30px; border: 1px solid var(--tenthColor); border-radius: 5px; font-style: italic;}
.novelSummary i{ position: absolute; top: 0; left: 20px; transform: translate(0,-50%); padding: 0 10px; background: var(--fifthColor);}
.novelSummary i img{ width: 25px; filter: var(--changeBlack_03);}
.novelSummary span{ position: absolute; bottom: 0; right: 20px; transform: translate(0,50%); padding: 0 10px; background: var(--fifthColor); font-size: 0.875rem; font-style: normal;}

.novelTool{ display: flex; justify-content: space-between; margin: 50px 0;}

.novelNav{ display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; gap: 30px; list-style: none;}
.novelNav li{ min-width: 0;}
.novelNav img{ border-radius: 5px; transition: .3s;}
.novelNav li:hover img{ transform: scale(0.99); box-shadow: 0px 0px 20px rgba(55,49,51,10%);}
.novelNav p{ margin: 0; padding: 20px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .3s;}
.novelNav li:hover p{ color: var(--seventhColor);}
.novelNav li:not(:has(img)) p{ padding: 20px; background: var(--ninthColor); border-radius: 5px;}
@media (max-width:1260px){
	.novelList{ flex-direction: column; align-items: normal;}
	.novel{ margin: 50px 0 0; padding: 0; border-left: 0;}
	.novel::after{ display: none;}
	.novelMeta{ position: relative; max-width: 400px; margin: 30px auto; z-index: 2;}
}
@media (max-width:750px){
	.novel h3{ font-size: 1.25rem;}
	.page_article .novel h3{ padding: 0 0 10px;}
	.novelSummary i img{ width: 10px;}
}
@media (max-width:500px){
	.novel{ margin: 30px 0 0;}
	.novelMeta{ margin: 0 auto; padding: 20px;}
	.novel h3{ margin: 0;}
	.novelSummary{ margin: 30px 0 0; padding: 20px;}
	.novelTool{ margin: 30px 0;}
	.novelNav{ grid-template-columns: repeat(2, 1fr); gap: 10px;}
	.novelNav p{ padding: 10px 0;}
	.novelNav li:not(:has(img)) p{ padding: 10px;}
}


.page_article{ background: var(--fifthColor);}
.page_articleMain{ display: flex; max-width: 1400px; margin: 0 auto; padding: 100px 0;}
.articleDetail{ flex: 1; padding: 0 50px 0 0; min-width: 0;}
.articleDetail article{ position: relative; margin: -9px 0 0 0;}
.articleDetail article h3.title{ display: flex; align-items: baseline; margin: 0; padding: 0 0 30px; font-weight: normal; font-size: 1.75rem;}
.articleDetail article h3.title span{ padding: 0 10px 0 0; color: var(--seventhColor);}
.articleDetail .articleMeta{ position: absolute; display: flex; align-items: center; gap: 0 10px; margin: 20px 0 0;}
.articleDetail .articleMeta a{ position: relative; display: inline-block; padding: 4px 10px; font-size: 0.75rem; border-radius: 2px; background: var(--secondColor); font-style: normal; font-weight: normal; line-height: 1em; transition: .3s;}
.articleDetail .articleMeta a:hover,
.articleDetail .articleMeta a.active{ background: var(--seventhColor); color: var(--fourthColor);}
.articleDetail .articleMeta p{ margin: 0; font-size: 0.875rem;}
.articleTool{ display: flex; justify-content: flex-end; gap: 10px; margin: 20px 0 0 0;}
.articleTool img{ width: 30px; filter: var(--changeBlack_04); transition: .3s;}
.articleTool a.fb:hover img{ filter: invert(36%) sepia(76%) saturate(3162%) hue-rotate(214deg) brightness(88%) contrast(97%);}
.articleTool a.line:hover img{ filter: invert(71%) sepia(13%) saturate(2609%) hue-rotate(65deg) brightness(91%) contrast(82%);}
.articleTool a.threads:hover img{ filter: var(--changeBlack_02);}
.articleTool a.link:hover img{ filter: var(--changeBlack_01);}
.articleTool a.copy:hover img{ filter: var(--changeBlack_01);}
.articleTool a.size:hover img{ filter: var(--changeBlack_01);}
.articleDetail .heroImage{ margin: 30px 0 0 0; border-radius: 5px;}
.articleDetail .heroImage+h6{ margin: 10px 0 0; padding: 20px 30px; border-radius: 5px; text-align: center; font-size: 1rem; font-weight: normal; background: var(--ninthColor);}
.articleDetail .heroImage+h6 span{ display: inline-block; text-align: left; }
.articleDetail .articleKv{ margin: 0;}
.articleDetail .articleKv img{ margin: 30px 0 0 0; border-radius: 5px;}
.articleDetail .articleKv figcaption{ margin: 10px 0 0; padding: 20px 30px; border-radius: 5px; text-align: center; font-size: 1rem; font-weight: normal; background: var(--ninthColor);}
.articleDetail .articleKv figcaption span{ display: inline-block; text-align: left;}
.wallpaperDownload{ display: flex; margin: 10px 0 0 0; padding: 20px 30px; border-radius: 5px; text-align: center; background: var(--ninthColor);}
.wallpaperDownload a{ display: flex; flex: 1; align-items: center; justify-content: center; transition: .3s;}
.wallpaperDownload a:hover{ color: var(--seventhColor);}
.wallpaperDownload a+a{ border-left: 1px solid var(--seventhColor);}
.wallpaperDownload a img{ margin: 0 5px 0 0; width: 14px; filter: var(--changeBlack_01);}
.articleToc{ margin: 30px 0 0 0;}
.articleToc ol{ position: relative; display: block; margin: 0 0 0 28px; padding: 0; font-style: italic; list-style: decimal-leading-zero;}
.articleToc ol li{ position: relative; padding: 0 0 5px; cursor: pointer;}
.articleToc ol li::marker{ color: var(--seventhColor);}
.articleToc ol li::after{ position: absolute; top: 4px; right: 0; display: inline-block; content: ''; width: 10%; height: 16px; background: var(--tenthColor); transition: .3s;}
.articleToc ol li:hover::after{ width: calc(10% + 20px);}
.articleToc ol li li::after{ width: 5%; background: var(--ninthColor);}
.articleToc ol li li:hover::after{ width: calc(5% + 20px);}
.articleToc ol ol{ margin: 10px 0 0 0; padding: 0 0 0 15px; list-style: none; border-left: 1px solid var(--seventhColor);}
.articleToc ol li span{ position: relative; z-index: 2;}
.articleContent{ margin: 30px 0 0; padding: 30px 0 0; border-top: 1px dashed var(--tenthColor); font-size: 1rem; line-height: 2em;}
.novel .articleContent{ border-top: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.articleContent blockquote{ position: relative; margin: 30px 0; padding: 30px; border-radius: 5px; border: 1px solid var(--tenthColor); color: var(--eighthColor);}
.articleContent blockquote i:nth-of-type(1){ position: absolute; top: 0; left: 20px; transform: translate(0, -50%); padding: 0 10px; background: var(--fifthColor);}
.articleContent blockquote i:nth-last-of-type(1){ position: absolute; bottom: 0; right: 20px; transform: translate(0, 50%) rotate(180deg); padding: 0 10px; background: var(--fifthColor);}
.articleContent blockquote i img{ width: 20px; filter: invert(84%) sepia(13%) saturate(5318%) hue-rotate(312deg) brightness(89%) contrast(80%);}
.articleContent blockquote p{ margin: 0; color: var(--eighthColor);}
.articleContent h1{ font-size: 1.25em; margin: 2.4em 0 2.6em; color: var(--seventhColor);}
.articleContent h2{ font-size: 1.125em; margin: 2.4em 0 2.6em;}
.articleContent h3{ font-size: 1em; margin: 2.4em 0 2.6em;}
.articleContent > :first-child{ margin: 0;}
.articleContent p{ line-height: 2em; margin: 2.4em 0 2.6em;}
.articleContent p:first-child{ margin: 0 0 2.6em;}
.articleContent a{ color: var(--thirdColor)}
.articleContent a:visited{ color: #3162de;}
.articleTags{ display: flex; flex-wrap: wrap; gap: 10px; margin: 50px 0 0;}
.articleTags a{ flex: 0 0 auto; position: relative; display: inline-block; padding: 4px 10px; font-size: 0.75rem; border-radius: 50px; background: var(--seventhColor); font-style: normal; font-weight: normal; color: var(--fourthColor); line-height: 1em; z-index: 2; transition: .3s;}
.articleTags a:hover{ background: var(--sixthColor); color: var(--fourthColor);}

@media (max-width:1480px){
	.page_article{ padding: 0 40px;}
}
@media (max-width:1260px){
	.page_articleMain{ flex-direction: column;}
	.articleDetail{ padding: 0;}
	.articleDetail article{ margin: 0;}
}
@media (max-width:1024px){
	.page_article{ padding: 0 20px;}
}
@media (max-width:750px){
	.page_articleMain{ padding: 50px 0;}
	.articleDetail .articleMeta{ position: relative; justify-content: space-between;}
	.articleDetail article h3.title{ padding: 0 0 10px; font-size: 1.25rem;}
	.articleDetail .articleMeta{ margin: 10px 0 0;}
	.articleTool{ margin: 10px 0 0;}
}
@media (max-width:500px){
	.page_articleMain{ padding: 30px 0;}
	.articleContent blockquote{ padding: 20px;}
	.articleContent blockquote i:nth-of-type(1){ left: 10px;}
	.articleContent blockquote i:nth-last-of-type(1){ right: 10px;}
	.articleContent blockquote i img{ width: 15px;}
	.articleTags{ margin: 30px 0 0;}
}


.other_article{ position: relative; margin: 80px 0 0; padding: 50px; background: var(--ninthColor);}
.other_article::before{ position: absolute; top: 0; left: 0; display: block; content: ''; width: 0; height: 0; border-style: solid; border-width: 30px 30px 0 0; border-color: var(--fifthColor) transparent transparent transparent;}
.other_article::after{ position: absolute; bottom: 0; right: 0; display: block; content: ''; width: 0; height: 0; border-style: solid; border-width: 0 0 30px 30px; border-color: transparent transparent var(--fifthColor) transparent;}
.recommended_article{ padding: 0 0 50px;}
.recommended_article .newsList h3{ position: relative; display: flex; align-items: baseline; margin: 0; padding: 21px 0 10px; font-size: 1rem; font-weight: normal; border-bottom: 1px dashed var(--tenthColor);}
.recommended_article .newsList h3>a{ position: absolute; width: 100%; height: 100%; z-index: 1;}
.recommended_article .newsList h3 span{ margin: 0 10px 0 0; color: var(--seventhColor); font-style: normal; font-weight: normal;}
.recommended_article .newsList h3 p{ flex: 1; margin: 0 20px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .3s;}
.recommended_article .newsList h3:hover p{ color: var(--seventhColor);}
.recommended_article .newsList h3 i{ margin: 0;}

.recommended_products{ margin: 50px 0 0; padding: 0 0 50px;}
.recommended_products h2{ margin: 0; padding: 0 0 10px;}
.recommended_products .productsList{ display: flex; margin: 20px 0 0; gap: 30px;}
.recommended_products .productsList img{ border-radius: 5px; transition: .3s;}
.recommended_products .productsList a:hover img{ box-shadow: 0px 0px 20px rgba(55,49,51,10%);}
.recommended_products .productsList p{ display: -webkit-box; margin: 10px 0 0; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: .3s;}
.recommended_products .productsList a:hover p{ color: var(--seventhColor);}

.recommended_meida{ margin: 50px 0 0; padding: 0 0 50px;}
.recommended_meida .mediaList{ margin: 20px 0 0;}
.recommended_meida .article_listType_b{ margin: 0;}
.recommended_meida .article_listType_b:nth-of-type(1){ grid-column: auto; padding: 0; border-bottom: none;}
.recommended_meida .article_listType_b:nth-of-type(1)::after{ display: none;}
.recommended_meida .article_listType_b:nth-of-type(1) h3{ font-size: 1rem;}
.recommended_meida .article_listType_b:nth-of-type(1) h3 p{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.related_article{ margin: 50px 0 0;}
.related_article .article_listType_a{ margin: 30px 0 0;}
.related_article .article_listType_a:nth-of-type(1){ margin: 20px 0 0;}
@media (max-width:1260px){
.recommended_meida .article_listType_b:nth-of-type(1) h3 p{ display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: normal; overflow: hidden;}
}
@media (max-width:750px){
	.other_article{ margin: 50px 0 0; padding: 30px 20px;}
	.other_article::before{ border-width: 10px 10px 0 0;}
	.other_article::after{ border-width: 0 0 10px 10px;}
	.recommended_article{ padding: 0 0 30px;}

	.recommended_products{ margin: 30px 0 0; padding: 0 0 30px;}
	.recommended_products .productsList{ gap: 10px;}
	.recommended_products .productsList a:nth-last-of-type(1){ display: none;}

	.recommended_meida{ margin: 30px 0 0; padding: 0 0 30px;}
	.recommended_meida .mediaList{ grid-template-columns: repeat(1, 1fr);}

	.related_article{ margin: 30px 0 0;}
}
@media (max-width:500px){
	.recommended_article .newsList h3{ padding: 20px 0 10px;}
}


.list_game{ background: var(--fifthColor);}
.list_gameMain{ max-width: 1400px; margin: 0 auto; padding: 100px 0;}
.gameList_category .tagGrey{ margin: 0; justify-content: center;}
.gameList{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 30px 0 0;}
.gameList article{ position: relative; min-width: 0; padding: 10px; border-radius: 5px; background: var(--fourthColor); transition: .3s;}
.gameList article:hover{ box-shadow: 0px 0px 20px rgba(55,49,51,10%); }
.gameList article.hide{ transform: scale(0.95); filter: saturate(0.2); pointer-events: none; opacity: 0.3;}
.gameList article>a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;}
.gameList article img{ border-radius: 5px; transition: .3s;}
.gameList article .tagGrey{ justify-content: flex-end; margin: 10px 0 0 0; pointer-events: none;}
.gameList article h3{ position: relative; display: flex; align-items: baseline; margin: 15px 0 0; font-size: 1.25rem; font-weight: normal;}
.gameList article h3 span{ padding: 0 10px 0 0; line-height: 0; color: var(--seventhColor);}
.gameList article h3 p{ position: relative; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.gameList article h3::before{ position: absolute; right: 0; top: 5px; display: block; content: ''; width: 75%; height: 70%; background: var(--tenthColor);}

.gameList article i{ display: -webkit-box; margin: 15px 0 0 0; font-size: 0.875rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: normal;}
.gameList article .gameTool{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 5px; margin: 30px 0 10px; padding: 20px 0 0; border-top: 1px dashed var(--tenthColor);}
.gameList article .gameTool a{ position: relative; display: flex; align-items: center; padding: 9px 10px 7px; border-radius: 50px; line-height: 1em; font-size: 0.875rem; text-align: center; border: 1px solid var(--tenthColor); background: var(--fifthColor); transition: .3s; z-index: 3;}
.gameList article .gameTool a:hover{ border: 1px solid var(--seventhColor); background: var(--seventhColor); color: var(--fourthColor);}
.gameList article .gameTool a img{ filter: var(--changeBlack_02); width: 14px; margin: 0 3px 0 0; padding: 0 0 1px; border-radius: 0;}
.gameList article .gameTool a:hover img{ filter: var(--changeBlack_white);}
@media (max-width:1480px){
	.list_game{ padding: 0 40px;}
	.list_gameMain{ padding: 60px 0;}
}
@media (max-width:1024px){
	.list_game{ padding: 0 20px;}
	.list_gameMain{ padding: 30px 0;}
	.gameList{ grid-template-columns: repeat(2, 1fr);}
}
@media (max-width:750px){
	.gameList{ gap: 20px 10px;}
	.gameList article .gameTool{ margin: 20px 0 0; padding: 10px 0 0;}
	.gameList article .gameTool a{ line-height: 20px; padding: 2px 10px;}
}
@media (max-width:500px){
	.gameList{ grid-template-columns: repeat(1, 1fr);}
	.gameList article.hide{ display: none;}
}


.emptyAni{ margin: 30px 0; text-align: center;}
.toastMessage{ position: fixed; bottom: 20px; right: 30px; width: 300px; max-width: 95%; padding: 10px 15px; background: #ffffff; border-radius: 5px; z-index: 2; box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05); text-align: center; opacity: 0; pointer-events: none; transition: .3s; box-sizing: border-box;}
.toastMessage.active{ opacity: 1; bottom: 30px;}
.toastMessage i{ position: absolute; top: -7px; left: 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; width: 16px; height: 16px; font-style: normal; font-size: 0.875rem; background: var(--seventhColor); color: var(--fourthColor);}
.toastMessage span{ display: inline-block; text-align: left;}
@media (max-width:750px){
	.emptyAni video{ width: 150px;}
	.toastMessage{ bottom: 1.5vw; width: 95vw; right: 2.5vw;}
	.toastMessage.active{ bottom: 2.5vw;}
}


/*--fix--*/
#span_author a{ padding: 0; font-size: 1em; background: none;}
#span_author a:hover{ color: var(--seventhColor);}