@charset "UTF-8";
/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1024px) {
	#section-nav #nav-top-main {
		width: 96%;
	}

	#section-01-top-banner {
		margin-top: 1.5rem;
	}

	#section-02-news #news-board .content {
        padding-top: 3.5rem;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

	#section-02-news #news-board .div-indicators {
        padding: 5px 13px;
    }

	#section-02-news #news-board .carousel-indicators li {
        width: 12px;
        height: 12px;
		margin-left: 5px;
		margin-right: 5px;
    }

	#section-02-news #news-board #news-title-list {
        font-size: 12px;
		border-radius: 10px;
    }

	#section-02-news #news-board #news-title-list li.list-item {
        padding: 4px 10px;
    }

	#section-02-news #news-board .column-left {
		padding-right: 15px;
	}

	#section-02-news #news-board .column-right {
		padding-left: 15px;
	}

	#section-02-news #news-board .news-list .news-item {
        padding: 7px 0;
    }

	#section-02-news #news-board .news-list {
		font-size: 11px;
	}

	#section-02-news #news-board .news-list .publish-date {
		font-size: 9px;
		padding: 3px 5px;
	}

	#section-03-character .main-content {
		margin-top: 3rem;
	}

	#section-04-game-system #header-title {
		top: 1rem;
	}

	#section-04-game-system #header-title img {
        width: 232px !important;
        height: auto;
    }

	#section-04-game-system .carousel-slide {
		top: 6rem;
	}

	.owl-theme .owl-nav.disabled+.owl-dots {
        margin-top: 19px;
    }

	#section-04-game-system .owl-theme .owl-dots .owl-dot span {
        width: 15px;
        height: 15px;
		margin: 5px 8px;
    }

	#section-footer {
		padding: 30px 0;
	}

	#section-footer .txt {
		font-size: 12px;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media only screen and (min-width : 768px) and (max-width : 1023px) {
	#section-01-top-banner {
        margin-top: unset;
    }

	#section-01-top-banner #top-banner-btn {
		width: 60%;
		margin: auto;
	}

	#section-01-top-banner #top-banner-mask li {
		flex: 50%;
	}

	#section-01-top-banner #top-banner-mask li img {
		width: 14rem !important;
		padding: 0 8px;
	}

	#section-01-top-banner #top-banner-mask #btn-sale-pack {
		flex: 100%
	}

	#section-01-top-banner #top-banner-mask #btn-sale-pack img {
		width: 28rem !important;
		margin-top: 10px;
	}

	#section-02-news #news-board {
		width: 86%;
		top: 0%;
		left: 50%;
		transform: translateX(-50%);
	}

	#section-02-news #news-board .content {
		padding-top: 5rem;
	}

	#section-02-news #news-board #news-board-bg img.tb {
		width: 100% !important;
	}

	#section-02-news .carousel-inner {
		width: 68%;
		margin: auto;
	}

	#section-02-news #news-board .carousel-item img {
		width: 100%;
	}

	#section-02-news #news-board .carousel-indicators li {
        width: 18px;
        height: 18px;
        margin-left: 7px;
        margin-right: 7px;
    }

	#section-02-news #news-board .div-indicators {
        padding: 7px 13px;
    }

	#section-02-news #news-board .column-right {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	#section-02-news #news-board #news-title-list {
		font-size: 22px;
	}

	#section-02-news #news-board .news-list {
        font-size: 16px;
    }

	#section-02-news #news-board .news-list .news-title {
		-webkit-line-clamp: 1;
	}

	#section-02-news #news-board .news-list .publish-date {
        font-size: 12px;
        padding: 6px 8px;
    }

	#section-02-news #news-board .news-list .news-item {
        padding: 9px 0;
    }

	#section-02-news #news-board .news-list .btn-more-news {
        bottom: -2rem;
        width: 60%;
        padding-right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

	#section-03-character .main-content #content-mask {
		width: 100vw !important;
	}

	#section-03-character .main-content #header-title img {
		width: 370px !important;
		height: auto;
	}

	#section-03-character .main-content #content-mask ul.btn-char-list img {
		width: 130px !important;
		height: auto;
	}

	#section-03-character .main-content #content {
		width: 100vw;
	}

	#section-03-character .main-content #content .pc.active,
	#section-03-character .main-content #content .mb.active {
		display: none;
	}

	#section-03-character .main-content #content img {
		width: 100% !important;
		height: auto;
	}

	#section-04-game-system #header-title {
        top: 1rem;
    }

	#section-04-game-system #header-title img {
        width: 406px !important;
        height: auto;
    }

	#section-04-game-system .carousel-slide {
		top: 13rem;
	}

	#section-03-character .main-content #content .tb {
		display: none;
	}

	#section-03-character .main-content #content .tb.active {
		display: block;
	}

	.pc,
	.mb {
		display: none;
	}

	.tb {
		display: block;
	}

	#section-footer .pc {
		display: block;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media only screen and (min-width: 510px) and (max-width : 768px) {
	#section-01-top-banner #top-banner-mask li img {
		width: 14rem !important;
		padding: 0 8px;
	}

	#section-01-top-banner #top-banner-mask #btn-sale-pack {
		flex: 100%
	}

	#section-01-top-banner #top-banner-mask #btn-sale-pack img {
		width: 28rem !important;
		margin-top: 10px;
	}
	
	#section-02-news .carousel-inner {
		width: 66%;
		margin: auto;
	}

	#section-02-news #news-board #news-title-list {
        font-size: 18px;
    }

	#section-02-news #news-board #news-title-list li.list-item {
        padding: 4px 38px;
    }

	#section-02-news #news-board .news-list .news-item {
        padding: 8px 0;
    }

	#section-02-news #news-board .content {
        padding-top: 4.7rem;
    }

	#section-02-news #news-board .news-list .news-title {
		-webkit-line-clamp: 1;
	}

	#section-02-news #news-board {
        width: 86%;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
    }

	#section-02-news #news-board #news-board-bg img.tb {
        width: 100% !important;
    }

	#section-02-news #news-board .news-list .btn-more-news {
        bottom: -2rem;
        width: 60%;
        padding-right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

	#section-03-character .main-content #content-mask {
		width: 100vw !important;
	}

	#section-03-character .main-content #header-title img {
		width: 370px !important;
		height: auto;
	}

	#section-03-character .main-content #content-mask ul.btn-char-list img {
		width: 112px !important;
		height: auto;
	}

	#section-03-character .main-content #content {
		width: 100vw;
	}

	#section-03-character .main-content #content .pc.active,
	#section-03-character .main-content #content .mb.active {
		display: none;
	}

	#section-03-character .main-content #content .tb.active {
        display: block;
    }

	#section-03-character .main-content #content img {
		width: 100% !important;
		height: auto;
	}

	#section-04-game-system #header-title img {
        width: 386px !important;
        height: auto;
    }

	#section-04-game-system .carousel-slide {
        top: 10rem;
    }

	#section-footer .pc {
        display: block;
    }

	.pc,
	.mb {
		display: none;
	}

	.tb {
		display: block;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 500px) {
	#section-nav #nav-top-main {
		display: none;
	}

	#section-nav #nav-mobile {
		display: block;
	}

	#section-nav #nav-mobile .navbar {
		padding: .2rem .5rem .2rem 1rem;
	}

	#section-nav #nav-mobile .navbar-nav {
		padding-bottom: 1rem;
	}

	#section-nav #nav-mobile .navbar-toggler {
		padding: .25rem .2rem;
	}

	#section-nav #nav-mobile #nav-icon {
		width: 39px;
		height: 26px;
		position: relative;
		margin: 5px auto;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
	}

	#section-nav #nav-mobile #nav-icon span {
		display: block;
		position: absolute;
		height: 5px;
		width: 100%;
		background: #525252;
		border-radius: 4px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	#section-nav #nav-mobile #nav-icon span:nth-child(1) {
		top: 0px;
	}

	#section-nav #nav-mobile #nav-icon span:nth-child(2),
	#section-nav #nav-mobile #nav-icon span:nth-child(3) {
		top: 11px;
	}

	#section-nav #nav-mobile #nav-icon span:nth-child(4) {
		top: 22px;
	}

	#section-nav #nav-mobile #nav-icon.open span:nth-child(1) {
		top: 18px;
		width: 0%;
		left: 50%;
	}

	#section-nav #nav-mobile #nav-icon.open span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#section-nav #nav-mobile #nav-icon.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	#section-nav #nav-mobile #nav-icon.open span:nth-child(4) {
		top: 18px;
		width: 0%;
		left: 50%;
	}

	#nav-mobile a.nav-link,
	#nav-mobile a.nav-link:hover,
	#nav-mobile a.nav-link:visited,
	#nav-mobile a.nav-link:active {
		color: var(--color-black);
		text-decoration: none;
	}
	
	#section-01-top-banner {
        margin-top: unset;
    }

	#section-01-top-banner #top-banner-mask li img {
        width: 10rem !important;
        padding: 0 8px;
    }

	#section-01-top-banner #top-banner-mask #btn-sale-pack img {
        width: 19rem !important;
        margin-top: 10px;
    }

	#section-02-news {
		padding-bottom: 2rem;
	}

	#section-02-news #news-board {
		display: block;
        width: 95vw;
	}

	#section-02-news ol#news-board-bg img.mb {
		width: 100% !important;
	}

	#section-02-news .carousel-inner {
        width: 82%;
        margin: auto;
    }

	#section-02-news #news-board .content {
        padding-top: 4.8rem;
	}

	#section-02-news #news-board #news-title-list li.list-item {
        padding: 7px 18px;
    }

	#section-02-news #news-board .news-list {
        font-size: 15px;
    }

	#section-02-news #news-board .news-list.active {
        padding: 6px 5px;
    }

	#section-02-news #news-board .news-list .news-item {
        padding: 12px 0;
    }

	#section-02-news #news-board .news-list .publish-date {
        font-size: 12px;
        padding: 6px 7px;
    }

	#section-02-news #news-board .news-list .btn-more-news {
		bottom: -3rem;
        padding-right: unset;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
	}

	#section-02-news #news-board .column-right {
        padding-left: 8px;
		padding-right: 8px;
    }

	#section-03-character .main-content {
        margin-top: 2rem;
		width: 100vw;
    }

	#section-03-character .main-content #header-title img {
        width: 280px !important;
    }

	#section-03-character .main-content #content .pc.active,
	#section-03-character .main-content #content .tb.active {
		display: none;
	}

	#section-03-character .main-content #content .mb.active {
        display: block;
    }

	#section-03-character .main-content #content img {
		width: 100% !important;
		height: auto;
	}

	#section-03-character .main-content #content {
		width: 100vw;
		height: auto;
	}

	#section-03-character ol#img-mask {
		width: 100vw;
		height: auto;
	}

	#section-03-character .btn-char-list img {
		width: 122px !important;
		margin-top: 16px;
	}

	#section-04-game-system #header-title {
        top: 5rem;
    }

	#section-04-game-system #header-title img {
		width: 280px !important;
		height: auto;
	}

	#section-04-game-system .carousel-slide {
		top: 12rem;
	}

	#section-04-game-system .owl-carousel.owl-drag .owl-item {
		padding: 0 10px;
	}

	.owl-theme .owl-nav.disabled+.owl-dots {
		margin-top: 5rem;
	}

	#section-footer .pc {
        display: block;
    }

	#section-footer .img-logo img {
		width: 98px !important;
	}

	.pc,
	.tb {
		display: none;
	}

	.mb {
		display: block;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 416px) {
	#section-03-character .btn-char-list img {
		width: 109px !important;
	}

	#section-footer .img-logo img {
		width: 92px !important;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 393px) {
    #section-01-top-banner #top-banner-mask #btn-sale-pack img {
        width: 17.5rem !important;
        margin-top: 10px;
    }

	#section-01-top-banner #top-banner-mask li img {
        width: 9rem !important;
        padding: 0 4px;
    }

	#section-02-news #news-board .news-list .btn-more-news {
		bottom: -1.6rem;
	}

	#section-03-character .btn-char-list img {
		width: 109px !important;
	}
}