<div class="bigSlider">
    <div class="slider slider-for">
        <div class="slideFor">
            <div class="tabs slideTabs">
                <div class="tabs-content slideContent active">
                    <img src="<?=__files('images/hero_dk.png')?>" alt="Hero" class="slide-hero">
                    <img src="<?=__files('images/hero-logo.png')?>" alt="Hero Logo" class="hero-logo">
                    <div class="slideInfo">
                        <span class="slideInfo-name">Blade Master</span>
                        <div class="slideInfo-text">
                            They are experts in close combat, without magic, and their great physical power makes them valuable in battles against monsters and players. They can use a wide variety of weapons and armor, standing out with Dragon equipment. While they attack only one target at a time, they are lethal in combat. Blade Knight strengthen their strength or agility to face monsters.
                        </div>
                        <div class="slideInfo-stats">
                            <span class="slideInfo-stats_title">Basic Stats</span>
                            <div class="stats">
                                <span class="stats-name">Power</span>
                                <span class="stats-bar stat-red"><span style="max-width: 100%;"></span></span>
                                <span class="stats-number stat-red">100</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Assistance</span>
                                <span class="stats-bar stat-green"><span style="max-width: 40%;"></span></span>
                                <span class="stats-number stat-green">40</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Health</span>
                                <span class="stats-bar stat-green"><span style="max-width: 80%;"></span></span>
                                <span class="stats-number stat-green">100</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Knowledge</span>
                                <span class="stats-bar stat-red"><span style="max-width: 20%;"></span></span>
                                <span class="stats-number stat-red">20</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Agility</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 50%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Will</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 40%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--slideFo-->
        <div class="slideFor">
            <div class="tabs slideTabs">
                <div class="tabs-content slideContent active">
                    <img src="<?=__files('images/hero_elf.png')?>" alt="Hero" class="slide-hero hero_3">
                    <img src="<?=__files('images/hero-logo.png')?>" alt="Hero Logo" class="hero-logo">
                    <div class="slideInfo">
                        <span class="slideInfo-name">High Elf</span>
                        <div class="slideInfo-text">
                            Elves from Noria have a noble human-like appearance with pointed ears. They are known as Fairies and are the only women. Elves excel in using unique weapons, bows, and possess their own magic. They are a versatile class, capable of both long-range combat and healing with magic. They can also summon creatures for support in battle, balancing their physical fragility.
                        </div>
                        <div class="slideInfo-stats">
                            <span class="slideInfo-stats_title">Basic Stats</span>
                            <div class="stats">
                                <span class="stats-name">Power</span>
                                <span class="stats-bar stat-red"><span style="max-width: 10%;"></span></span>
                                <span class="stats-number stat-red">10</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Accuracy</span>
                                <span class="stats-bar stat-green"><span style="max-width: 90%;"></span></span>
                                <span class="stats-number stat-green">150</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Health</span>
                                <span class="stats-bar stat-green"><span style="max-width: 80%;"></span></span>
                                <span class="stats-number stat-green">100</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Knowledge</span>
                                <span class="stats-bar stat-red"><span style="max-width: 20%;"></span></span>
                                <span class="stats-number stat-red">20</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Agility</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 50%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Will</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 40%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--slideFo-->
        <div class="slideFor">
            <div class="tabs slideTabs">
                <div class="tabs-content slideContent active">
                    <img src="<?=__files('images/hero_mg.png')?>" alt="Hero" class="slide-hero">
                    <img src="<?=__files('images/hero-logo.png')?>" alt="Hero Logo" class="hero-logo">
                    <div class="slideInfo">
                        <span class="slideInfo-name">Duel Master</span>
                        <div class="slideInfo-text">
                            Many wizards and warriors seek to combine magic with swordplay, and the Duel Master is the ideal choice. This unique class has access to all the weapons, defensive equipment, and spells of the Dark Knights and Dark Wizards, with the exception of teleportation magic. The Magic Gladiator is more powerful than other classes, earning 7 points per level instead of 5.
                        </div>
                        <div class="slideInfo-stats">
                            <span class="slideInfo-stats_title">Basic Stats</span>
                            <div class="stats">
                                <span class="stats-name">Power</span>
                                <span class="stats-bar stat-red"><span style="max-width: 10%;"></span></span>
                                <span class="stats-number stat-red">10</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Accuracy</span>
                                <span class="stats-bar stat-green"><span style="max-width: 90%;"></span></span>
                                <span class="stats-number stat-green">150</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Health</span>
                                <span class="stats-bar stat-green"><span style="max-width: 80%;"></span></span>
                                <span class="stats-number stat-green">100</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Knowledge</span>
                                <span class="stats-bar stat-red"><span style="max-width: 20%;"></span></span>
                                <span class="stats-number stat-red">20</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Agility</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 50%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Will</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 40%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--slideFo-->
        <div class="slideFor">
            <div class="tabs slideTabs">
                <div class="tabs-content slideContent active">
                    <img src="<?= __files('images/hero_rf.png') ?>" alt="Hero" class="slide-hero hero_3">
                    <img src="<?= __files('images/hero-logo.png') ?>" alt="Hero Logo" class="hero-logo">
                    <div class="slideInfo">
                        <span class="slideInfo-name">Rage Fisghter</span>
                        <div class="slideInfo-text">
                            Knights from the royal family of Kalutan. They have an innate ability to fight with their fists, making them a new emerging race on the continent.
                        </div>
                        <div class="slideInfo-stats">
                            <span class="slideInfo-stats_title">Basic Stats</span>
                            <div class="stats">
                                <span class="stats-name">Power</span>
                                <span class="stats-bar stat-red"><span style="max-width: 10%;"></span></span>
                                <span class="stats-number stat-red">10</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Accuracy</span>
                                <span class="stats-bar stat-green"><span style="max-width: 90%;"></span></span>
                                <span class="stats-number stat-green">150</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Health</span>
                                <span class="stats-bar stat-green"><span style="max-width: 80%;"></span></span>
                                <span class="stats-number stat-green">100</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Knowledge</span>
                                <span class="stats-bar stat-red"><span style="max-width: 20%;"></span></span>
                                <span class="stats-number stat-red">20</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Agility</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 50%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Will</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 40%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--slideFo-->
        <div class="slideFor">
            <div class="tabs slideTabs">
                <div class="tabs-content slideContent active">
                    <img src="<?= __files('images/hero_sum.png') ?>" alt="Hero" class="slide-hero">
                    <img src="<?= __files('images/hero-logo.png') ?>" alt="Hero Logo" class="hero-logo">
                    <div class="slideInfo">
                        <span class="slideInfo-name">Dimension Master</span>
                        <div class="slideInfo-text">
                            She comes from an ancient noble lineage, with a natural talent for magic and a mysterious ability to summon creatures from another dimension on the continent. The Summoner is a close-range character with unique magical abilities. She stands apart from other races, having her own spells and enhancements.
                        </div>
                        <div class="slideInfo-stats">
                            <span class="slideInfo-stats_title">Basic Stats</span>
                            <div class="stats">
                                <span class="stats-name">Power</span>
                                <span class="stats-bar stat-red"><span style="max-width: 10%;"></span></span>
                                <span class="stats-number stat-red">10</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Accuracy</span>
                                <span class="stats-bar stat-green"><span style="max-width: 90%;"></span></span>
                                <span class="stats-number stat-green">150</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Health</span>
                                <span class="stats-bar stat-green"><span style="max-width: 80%;"></span></span>
                                <span class="stats-number stat-green">100</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Knowledge</span>
                                <span class="stats-bar stat-red"><span style="max-width: 20%;"></span></span>
                                <span class="stats-number stat-red">20</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Agility</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 50%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Will</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 40%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--slideFo-->
        <div class="slideFor">
            <div class="tabs slideTabs">
                <div class="tabs-content slideContent active">
                    <img src="<?= __files('images/hero_dw.png') ?>" alt="Hero" class="slide-hero hero_3">
                    <img src="<?= __files('images/hero-logo.png') ?>" alt="Hero Logo" class="hero-logo">
                    <div class="slideInfo">
                        <span class="slideInfo-name">Grand Master</span>
                        <div class="slideInfo-text">
                            The Dark Wizard uses magic and energy to defeat enemies, focusing on offensive magical power and avoiding close combat. Over time, their strength increases, allowing them to use heavier equipment. They can use teleportation in dangerous situations and have spells to attack multiple targets, speeding up their progress.
                        </div>
                        <div class="slideInfo-stats">
                            <span class="slideInfo-stats_title">Basic Stats</span>
                            <div class="stats">
                                <span class="stats-name">Power</span>
                                <span class="stats-bar stat-red"><span style="max-width: 10%;"></span></span>
                                <span class="stats-number stat-red">10</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Accuracy</span>
                                <span class="stats-bar stat-green"><span style="max-width: 90%;"></span></span>
                                <span class="stats-number stat-green">150</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Health</span>
                                <span class="stats-bar stat-green"><span style="max-width: 80%;"></span></span>
                                <span class="stats-number stat-green">100</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Knowledge</span>
                                <span class="stats-bar stat-red"><span style="max-width: 20%;"></span></span>
                                <span class="stats-number stat-red">20</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Agility</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 50%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Will</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 40%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--slideFo-->
        <div class="slideFor">
            <div class="tabs slideTabs">
                <div class="tabs-content slideContent active">
                    <img src="<?= __files('images/hero_dl.png') ?>" alt="Hero" class="slide-hero hero_3">
                    <img src="<?= __files('images/hero-logo.png') ?>" alt="Hero Logo" class="hero-logo">
                    <div class="slideInfo">
                        <span class="slideInfo-name">Lord Emperor</span>
                        <div class="slideInfo-text">
                            The Dark Lord is the most powerful character in Mu Online, introduced in version 0.99. It differs from the Dark Wizard, focusing on single-target attacks and having pets that gain experience and possess special abilities. The damage of the pets depends on the character's points and increases with the Dark Lord's energy points. The available pets are the Dark Horse and the Dark Spirit, each with unique abilities.
                        </div>
                        <div class="slideInfo-stats">
                            <span class="slideInfo-stats_title">Basic Stats</span>
                            <div class="stats">
                                <span class="stats-name">Power</span>
                                <span class="stats-bar stat-red"><span style="max-width: 10%;"></span></span>
                                <span class="stats-number stat-red">10</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Accuracy</span>
                                <span class="stats-bar stat-green"><span style="max-width: 90%;"></span></span>
                                <span class="stats-number stat-green">150</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Health</span>
                                <span class="stats-bar stat-green"><span style="max-width: 80%;"></span></span>
                                <span class="stats-number stat-green">100</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Knowledge</span>
                                <span class="stats-bar stat-red"><span style="max-width: 20%;"></span></span>
                                <span class="stats-number stat-red">20</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Agility</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 50%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Will</span>
                                <span class="stats-bar stat-yellow"><span style="max-width: 40%;"></span></span>
                                <span class="stats-number stat-yellow">60</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--slideFo-->
    </div>
    <div class="slider slider-nav">
        <div class="slideNav">
            <div class="slideNav-img">
                <img src="<?= __files('images/hero-3.png') ?>" alt="Hero">
            </div>
            <div class="slideNav-text">
                Blade Knight
            </div>
        </div>
        <div class="slideNav">
            <div class="slideNav-img">
                <img src="<?= __files('images/hero-1.png') ?>" alt="Hero">
            </div>
            <div class="slideNav-text">
                Muse Elf
            </div>
        </div>
        <div class="slideNav">
            <div class="slideNav-img">
                <img src="<?= __files('images/hero-5.png') ?>" alt="Hero">
            </div>
            <div class="slideNav-text">
                Magic Gladiator
            </div>
        </div>
        <div class="slideNav">
            <div class="slideNav-img">
                <img src="<?= __files('images/hero-6.png') ?>" alt="Hero">
            </div>
            <div class="slideNav-text">
                Range Fight
            </div>
        </div>
        <div class="slideNav">
            <div class="slideNav-img">
                <img src="<?= __files('images/hero-7.png') ?>" alt="Hero">
            </div>
            <div class="slideNav-text">
                Summoner
            </div>
        </div>
        <div class="slideNav">
            <div class="slideNav-img">
                <img src="<?= __files('images/hero-2.png') ?>" alt="Hero">
            </div>
            <div class="slideNav-text">
                Dark Wizard
            </div>
        </div>
        <div class="slideNav">
            <div class="slideNav-img">
                <img src="<?= __files('images/hero-4.png') ?>" alt="Hero">
            </div>
            <div class="slideNav-text">
                Dark Lord
            </div>
        </div>
    </div><!--slider-nav-->
</div>