@import url('root.css');
@import url('css2-Jostitalwght0100..9001100..900_Montserratitalwght0100..9001100..900_NotoSansSCwght100..900_NotoSansTCwght100..900_swap.css');

*, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; }
*:focus { outline: none; }

body { overflow-x: hidden; overflow-y: overlay; margin: 0; min-height: 100vh; }
body::-webkit-scrollbar { width: 0; }

header, footer, div, nav, article, hr, p, form, label, input, button, select, textarea, ul, li, img, svg, span, font, strong, b, a, i { text-align: left; vertical-align: middle; word-wrap: break-word; word-break: break-word; line-height: 1.7; border-width: 0; font-family: var(--font-family), sans-serif; font-size: 15px; color: var(--info); }

h1, h2, h3, h4, h5, h6 { word-wrap: break-word; word-break: break-word; line-height: 1.7; font-family: var(--font-family), sans-serif; color: var(--info); }
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { font-size: inherit; }
h1, .h1 { font-weight: 500; font-size: 2em; }
h2, .h2 { font-weight: 500; font-size: 1.5em; }
h3, .h3 { font-weight: 500; font-size: 1.17em; }
h4, .h4 { font-weight: 500; font-size: 1em; }
h5, .h5 { font-weight: 500; font-size: .83em; }
h6, .h6 { font-weight: 500; font-size: .67em; }

ul, ol { list-style: none; }

fieldset { border: 0; }
input , select , textarea { padding: .3em 1em; width: 100%; background-color: white; background-clip: padding-box; border: 1px solid var(--g_200); border-radius: .2em; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 5l-6.5 7L1 5' stroke='%23002C62' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") white no-repeat calc(100% - .5em) 50% / auto 1em; }
button { background: none; border: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
input::-webkit-outer-spin-button , input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }
input[type="password"] { font-family: auto; }
input[type="radio"] , input[type="checkbox"] { width: auto; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; }

/* img */
img { max-width: 100%; }
.img_cover { object-fit: cover; }
.img_contain { object-fit: contain; }

a, a:link, a:visited, a:hover { display: inline-block; text-decoration: none; white-space: pre-wrap;vertical-align: baseline; }

/* general class set */
.txt_clamp { overflow: hidden; height: 1.7em; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.d_inblock.txt_clamp { display: -webkit-inline-box; }
.atag_item { width: 100%; height: 100%; top: 0; left: 0; }

/* fancybox */
[class^="fancybox-"], [class^="fancybox-"] *, .slick-track, .fa, .fas, .fa:before, .fas:before, .fa:after, .fas:after, .trans_none_box { -webkit-transition: none; -moz-transition: none; transition: none; }
.fancybox-infobar__body span { font-size: inherit; color: currentcolor; vertical-align: initial; }

/* workframe */
[class*="workframe"] { margin: 0 auto; width: min(95vw, 1280px); }

/* header */
header { position: sticky; background: #fff; box-shadow: 0 0 10px #d9d9d9; top: 0; z-index: 99; }
header .functionNav { padding: .5em 0; background: var(--primary); }
header .functionNav .nav_btn { display: flex; justify-content: flex-end; align-items: stretch; gap: .8em; }
header .functionNav .nav_btn a { padding: .3em .5em; background: var(--secondary); border-radius: .3em; display: inline-flex; align-items: center; gap: .3em; line-height: 1; color: #fff; }
header .functionNav .nav_btn a * { line-height: 1; color: #fff; }
header .functionNav .nav_btn a:last-child { position: fixed; padding: .8em; min-width: 8em; background: var(--green); justify-content: center; font-size: 1.3em; box-shadow: 0 0 .8em rgb(0 0 0 / 50%); bottom: 3vh; left: 50%; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-animation: login .8s infinite alternate ease-in-out; animation: login .8s infinite alternate ease-in-out;  }
@media screen and (max-width: 1024px) {
    header .functionNav .nav_btn a:last-child {
        display: none;
    }
}
/* topFunction */
#topFunction { display: flex; justify-content: space-between; align-items: center; gap: 0 2%; }
#topFunction .cis { width: 70px; }
#topFunction .cis a { display: block; }
#topFunction .cis svg { width: 100%; aspect-ratio: 300/107; }
#topFunction #nav { width: 1%; flex: 1 1 auto; }
#topFunction #nav ul { display: flex; justify-content: flex-end; align-items: center; gap: .5em 1em; }
#topFunction #nav ul a { padding: 1em .5em; }

/* button_menu */
#button_menu { margin: 0 0 0 auto; width: 25px; height: 25px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-end; transition: transform .35s ease, height .35s ease; }
#button_menu span { margin-bottom: 5px; width: 95%; height: 2px; background-color: #6b7478; display: block; transition: all .35s ease; }
#button_menu span:last-child { margin-bottom: 0; }
#button_menu[data-type="2"] span:nth-child(1) { -webkit-transform: translate(0, 9px) rotate(45deg); transform: translate(0, 9px) rotate(45deg); }
#button_menu[data-type="2"] span:nth-child(2) { opacity: 0; }
#button_menu[data-type="2"] span:nth-child(3) { -webkit-transform: translate(0, -9px) rotate(-45deg); transform: translate(0, -9px) rotate(-45deg); }

/* footer */
footer { background: #777; }
footer .btm_guild { padding: 1.5em 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 1em; }
footer .btm_guild .list_title { padding-bottom: .2em; border-bottom: 1px #ccc solid; display: flex; align-items: center; gap: .8em; }
footer .btm_guild .list_title font { width: 1%; flex: 1 1 auto; color: #fff; }
footer .btm_guild .list_title:before { width: 22px; background: url(../../gamefishgambling/image/icon_footer_title.png) no-repeat 0 50%; aspect-ratio: 1/1; content: ""; }
footer .btm_guild ul { margin-left: calc(22px + .8em); }
footer .btm_guild ul li a { font-size: .85em; color: #f1f1f1; }
footer .btm_guild ul li a.dmca-badge { font-size: 0; line-height: 1; }
footer .btm_guild .guil_list:nth-child(2) .list_title:before { background-position-x: -22px; }
footer .btm_guild .guil_list:nth-child(3) .list_title:before { background-position-x: -44px; }
footer .btm_guild .guil_list:nth-child(4) .list_title:before { background-position-x: -66px; }
footer .btm_guild .guil_list:nth-child(5) .list_title:before { background-position-x: -176px; }
footer .btm_guild .guil_list:nth-child(6) .list_title:before { background-position-x: -88px; }
footer .btm_guild .guil_list:nth-child(7) .list_title:before { background-position-x: -132px; }
footer .btm_guild .guil_list:nth-child(8) .list_title:before { background-position-x: -110px; }
footer .games { background: #242424; }
footer .games .workframe { text-align: center; }

/* animation */
@-webkit-keyframes login { 0% , 100% { -webkit-transform: translateX(-50%) scale(1); } 50% { -webkit-transform: translateX(-50%) scale(.8); } }
@keyframes login { 0% , 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(.8); } }

@media screen and (min-width:1025px){
	#button_menu { display: none; }
}
@media screen and (max-width:1024px){
	#topFunction { padding: 1em 0; }
	#topFunction #nav .wrap { position: fixed; width: min(100vw, 350px); height: calc(100vh - 101px); background: #fff; top: 101px; right: -350px; }
	#topFunction #nav ul { flex-direction: column; }
	#topFunction #nav ul li { width: 100%; }
	#topFunction #nav ul li a { padding: 1em 1.5em; display: block; border-bottom: 1px #ccc solid; }
	#topFunction #nav #button_menu[data-type="2"] + .wrap { right: 0; }
}
@media screen and (max-width:980px){
	footer .btm_guild { grid-template-columns: repeat(4, 1fr); }
	footer .btm_guild ul { margin-left: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width:550px){
	footer .btm_guild { grid-template-columns: repeat(2, 1fr); }
}