Zero 3.0

<div class="toggle_btn active">
    <input type="checkbox" checked class="cb-value">
    <span class="round-btn"></span>
</div>

<div class="toggle_btn">
    <input type="checkbox" class="cb-value">
    <span class="round-btn"></span>
</div>

<span>Radio-btn :</span>
&nbsp;
<input type="radio" id="Grade1" name="Grade" checked="checked">
<label for="Grade1"><span></span>All</label>
&nbsp;
<input type="radio" id="Grade2" name="Grade">
<label for="Grade2"><span></span>Critical</label>
&nbsp;
<input type="radio" id="Grade3" name="Grade">
<label for="Grade3"><span></span>Major</label>

<input type="checkbox" id="UNII1" name="UNII1"><label for="UNII1">Checkbox</label>

<span>Start :</span><input type="text" class="Datepicker cald_St"> ~
<span>End :</span><input type="text" class="Datepicker cald_St">

<div class="Slider" style="max-width:250px;">
    <div class="rangeslider">
        <input type="range" min="1" max="300" value="100" class="myslider" id="sliderRange">
        <span id="S_value" class="sliderNumber"></span>
        <div id="sliderMin" class="sliderMin"></div>
        <div id="sliderMax" class="sliderMax" ></div>
    </div>
</div>

<div class="Button_group">
    <ul>
        <li class="tab-link current" >button1</li>
        <li class="tab-link">button2</li>
        <li class="tab-link">button3</li>
    </ul>
</div>

<div class="Button_group gray">
    <ul>
        <li class="tab-link current" >button1</li>
        <li class="tab-link">button2</li>
        <li class="tab-link">button3</li>
    </ul>
</div>

<div class="Button_group Rounded">
    <ul>
        <li class="tab-link current" >button1</li>
        <li class="tab-link">button2</li>
        <li class="tab-link">button3</li>
    </ul>
</div>

<div class="Button_group Rounded_bk">
    <ul>
        <li class="tab-link current" >button1</li>
        <li class="tab-link">button2</li>
        <li class="tab-link">button3</li>
    </ul>
</div>

<div class="accordion">
    <div class="acc_section">
        <div class="top_bar">
            <div class="ac_Title">Accordion title1</div>
            <div class="open_btn"><i class="chevron-down sort_up" aria-hidden="true"></i></div>
        </div>
        <div class="content" style="display: none;">
            <!--card-->
            <div class="card">
            In a professional context it often happens that private or corporate clients corder a publication to be made and presented with the actual content still not being ready.
            Think of a news blog that's filled with content hourly on the day of going live. However, reviewers tend to be distracted by comprehensible content, say, a random text copied from a newspaper or the internet.
            The are likely to focus on the text, disregarding the layout and its elements. Besides, random text risks to be unintendedly humorous or offensive, an unacceptable risk in corporate environments.
            Lorem ipsum and its many variants have been employed since the early 1960ies, and quite likely since the sixteenth century.
            </div>
            <!--card-->
        </div>
    </div>
</div>

<div class="accordion styleA">
    <div class="acc_section">
        <div class="top_bar">
            <div class="ac_Title">Accordion title2</div>
            <div class="open_btn"><i class="chevron-down sort_up" aria-hidden="true"></i></div>
        </div>
        <div class="content" style="display: none;">
            <!--card-->
            <div class="card">
            In a professional context it often happens that private or corporate clients corder a publication to be made and presented with the actual content still not being ready.
            Think of a news blog that's filled with content hourly on the day of going live. However, reviewers tend to be distracted by comprehensible content, say, a random text copied from a newspaper or the internet.
            The are likely to focus on the text, disregarding the layout and its elements. Besides, random text risks to be unintendedly humorous or offensive, an unacceptable risk in corporate environments.
            Lorem ipsum and its many variants have been employed since the early 1960ies, and quite likely since the sixteenth century.
            </div>
            <!--card-->
        </div>
    </div>
</div>

<div class="loading_A">
    <div class="loading_img"></div>
</div>

<div class="loading_B">
    <div class="loading_img"></div>
</div>

<div class="loading_C"></div>

<div class="loading_D"></div>

<button class="btn_large btn_blue">Button</button>
<button class="btn_large btn_green">Button</button>
<button class="btn_large btn_sky">Button</button>
<button class="btn_large btn_yellow">Button</button>
<button class="btn_large btn_orange">Button</button>
<button class="btn_large btn_emerald">Button</button>
<button class="btn_large btn_white">Button</button>
<button class="btn_large btn_red">Button</button>
<button class="btn_large btn_gray">Button</button>
<button class="btn_large btn_gray2">Button</button>

<button class="btn_blue">Button</button>
<button class="btn_green">Button</button>
<button class="btn_sky">Button</button>
<button class="btn_yellow">Button</button>
<button class="btn_orange">Button</button>
<button class="btn_emerald">Button</button>
<button class="btn_white">Button</button>
<button class="btn_red">Button</button>
<button class="btn_gray">Button</button>
<button class="btn_gray2">Button</button>

<button class="btn_small btn_blue">Button</button>
<button class="btn_small btn_green">Button</button>
<button class="btn_small btn_sky">Button</button>
<button class="btn_small btn_yellow">Button</button>
<button class="btn_small btn_orange">Button</button>
<button class="btn_small btn_emerald">Button</button>
<button class="btn_small btn_white">Button</button>
<button class="btn_small btn_red">Button</button>
<button class="btn_small btn_gray">Button</button>
<button class="btn_small btn_gray2">Button</button>

<button class="btn_simple btn_blue">Button</button>
<button class="btn_simple btn_green">Button</button>
<button class="btn_simple btn_sky">Button</button>
<button class="btn_simple btn_yellow">Button</button>
<button class="btn_simple btn_orange">Button</button>
<button class="btn_simple btn_emerald">Button</button>
<button class="btn_simple btn_white">Button</button>
<button class="btn_simple btn_red">Button</button>
<button class="btn_simple btn_gray">Button</button>
<button class="btn_simple btn_gray2">Button</button>

<input type="text" style="width:170px;">
<div class="filebox_btn"><label for="ex_file">파일선택</label> <input type="file" id="ex_file"></div>

<span class="ar_label_box red">HOT</span>
<span class="ar_label_box blue">NEW</span>
<span class="ar_label_box yellow">Discount</span>
<span class="ar_label_box orange">LIVE</span>
<span class="ar_label_box blue2">COOL</span>
<span class="ar_label_box purple">NOW</span>
<span class="ar_label_box green">Coming soon</span>
<span class="ar_label_box gray1">STOP</span>
<span class="ar_label_box gray2">STOP</span>

<span class="ar_label_box large_box red">HOT</span>
<span class="ar_label_box large_box blue">NEW</span>
<span class="ar_label_box large_box yellow">Discount</span>
<span class="ar_label_box large_box orange">LIVE</span>
<span class="ar_label_box large_box blue2">COOL</span>
<span class="ar_label_box large_box purple">NOW</span>
<span class="ar_label_box large_box green">Coming soon</span>
<span class="ar_label_box large_box gray1">STOP</span>
<span class="ar_label_box large_box gray2">STOP</span>

<button class="btn_small btn_icon_only btn_blue"><i class="search-large-bold"></i></button>
<button class="btn_small btn_icon_only btn_green"><i class="check-circle"></i></button>
<button class="btn_small btn_icon_only btn_sky"><i class="x-circle"></i></button>
<button class="btn_small btn_icon_only btn_yellow"><i class="box-arrow-download"></i></button>
<button class="btn_small btn_icon_only btn_orange"><i class="plus"></i></button>
<button class="btn_small btn_icon_only btn_emerald"><i class="minus-box"></i></button>
<button class="btn_small btn_icon_only btn_white"><i class="arrow-reflash"></i></button>
<button class="btn_small btn_icon_only btn_nocolor"><i class="search-large-bold"></i></button>

<button class="btn_simple btn_icon_only btn_blue"><i class="search-large-bold"></i></button>
<button class="btn_simple btn_icon_only btn_green"><i class="check-circle"></i></button>
<button class="btn_simple btn_icon_only btn_sky"><i class="x-circle"></i></button>
<button class="btn_simple btn_icon_only btn_yellow"><i class="box-arrow-download"></i></button>
<button class="btn_simple btn_icon_only btn_orange"><i class="plus"></i></button>
<button class="btn_simple btn_icon_only btn_emerald"><i class="minus-box"></i></button>
<button class="btn_simple btn_icon_only btn_white"><i class="arrow-reflash"></i></button>
<button class="btn_simple btn_icon_only btn_nocolor"><i class="search-large-bold"></i></button>