<div class="col-12 contents_con">
    <div class="col-12 tc">
        <div class="col-12 tc" style="height: 100%; margin-top:130px; padding-top:50px; background-color: #fff;">
            <h1 class="font_roboto mb20">STYLE GUIDE (layout.sub.css)</h1>
            <h3 class="mb40">
                배경이 투명이고 텍스트가 흰색인 버튼은 보여지기 위해 회색 배경을 깔아둠
            </h3>
            <div class="col-12 mb30">
                <table>
                    <colgroup>
                        <col width="150px">
                        <col width="150px">
                        <col width="150px">
                        <col width="150px">
                        <col width="150px">
                        <col width="150px">
                        <col width="150px">
                    </colgroup>
                    <tbody>
                    <tr>
                        <th></th>
                        <th>기본(배경:투명 / 글씨:흰색)</th>
                        <th>black</th>
                        <th>gray</th>
                        <th>long</th>
                        <th>type_2</th>
                        <th>type_2 long</th>
                    </tr>
                    <tr>
                        <td rowspan="3">btn_style_1</td>
                        <td>
                            <div class="show" style="background-color: gray; padding:20px;">
                                <div class="btn_style_1_con">
                                    <a href="javascript:void(0);" data-wv-category="" class="btn_style_1">
                                        버튼
                                    </a>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="btn_style_1_con black">
                                <a href="javascript:void(0);" data-wv-category="" class="btn_style_1">
                                    버튼
                                </a>
                            </div>
                        </td>
                        <td>
                            <div class="btn_style_1_con gray">
                                <a href="javascript:void(0);" data-wv-category="" class="btn_style_1">
                                    버튼
                                </a>
                            </div>
                        </td>
                        <td>
                            <div class="btn_style_1_con gray">
                                <a href="javascript:void(0);" data-wv-category="" class="btn_style_1 long">
                                    버튼
                                </a>
                            </div>
                        </td>
                        <td>
                            <div class="btn_style_1_con gray">
                                <a href="javascript:void(0);" data-wv-category="" class="btn_style_1 type_2">
                                    버튼
                                </a>
                            </div>
                        </td>
                        <td>
                            <div class="btn_style_1_con gray">
                                <a href="javascript:void(0);" data-wv-category="" class="btn_style_1 type_2 long">
                                    버튼
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>auto</th>
                        <th>active</th>
                        <th>type_3</th>
                        <th>type_4</th>
                    </tr>
                    <tr>
                        <td>
                            <div class="btn_style_1_con gray">
                                <a href="javascript:void(0);" data-wv-category="theme" class="btn_style_1 auto">
                                    버튼버튼버튼버튼
                                </a>
                            </div>
                        </td>
                        <td>
                            <div class="btn_style_1_con gray active">
                                <a href="javascript:void(0);" data-wv-category="" class="btn_style_1">
                                    버튼
                                </a>
                            </div>
                        </td>
                        <td>
                            <div class="btn_style_1_con black">
                                <a href="javascript:void(0)" data-wv-category="" class="btn_style_1 type_3 auto">
                                    고객지원
                                </a>
                            </div>
                        </td>
                        <td>
                            <div class="btn_style_1_con black">
                                <a href="javascript:void(0)" data-wv-category="" class="btn_style_1 type_4">
                                    새 도메인 구매하기
                                </a>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-12 mb30">
                <div class="col-12">
                    <table>
                        <colgroup>
                            <col width="150px">
                            <col width="150px">
                            <col width="150px">
                            <col width="150px">
                            <col width="150px">
                            <col width="150px">
                        </colgroup>
                        <tbody>
                        <tr>
                            <th></th>
                            <th>기본</th>
                            <th>white</th>
                            <th>아이콘</th>
                        </tr>
                        <tr>
                            <td rowspan="3">btn_style_2</td>
                            <td>
                                <div class="col-12 btn_style_2_con">
                                    <a href="javascript:void(0)" class="btn_style_2">
                                        <div class="btn_style_2_inner">
                                            <div class="show-tablecell vm">
                                                목록<br>
                                                으로
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </td>
                            <td>
                                <div class="col-12 btn_style_2_con">
                                    <a href="javascript:void(0)" class="btn_style_2 white">
                                        <div class="btn_style_2_inner">
                                            <div class="show-tablecell vm">
                                                목록<br>
                                                으로
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </td>
                            <td>
                                <div class="btn_style_2_con">
                                    <a href="javascript:void(0);" class="btn_style_2">
                                        <div class="btn_style_2_inner">
                                            <div class="show-tablecell vm">
                                                <div class="mb6"><img src="[RESOURCE::img/new/btn_style_2_create_icon.png]" alt="create"></div>
                                                <div>개설</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>type_2</th>
                            <th>type_2</th>
                            <th>type_3</th>
                            <th>type_3 color_white</th>
                            <th>type_4</th>
                        </tr>
                        <tr>
                            <td>
                                <div class="btn_style_2_con">
                                    <a href="javascript:void(0);" class="btn_style_2 type_2">
                                        <div class="pt4 btn_style_2_inner">
                                            <div class="show-tablecell vm">
                                                <div class="mb6">더보기</div>
                                                <div class="fontsize0">
                                                    <img src="[RESOURCE::img/new/btn_style_2_type_2_arrow.png]" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </td>
                            <td>
                                <div class="btn_style_2_con">
                                    <a href="javascript:void(0)" class="btn_style_2 type_2">
                                        <div class="btn_style_2_inner">
                                            <div class="show-tablecell vm">
                                                <div class="mb4">문의하기</div>
                                                <div class="fontsize0"><img src="[RESOURCE::img/new/btn_style_2_type_3_arrow.png]" alt="create"></div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </td>
                            <td>
                                <div class="show">
                                    <div class="btn_style_2_con">
                                        <a href="javascript:void(0);" class="btn_style_2 type_3">
                                            <div class="btn_style_2_inner">
                                                <div class="show-tablecell vm">
                                                    <div class="mb5">
                                                        관리자<br/>
                                                        사이트가기
                                                    </div>
                                                    <div>
                                                        <img src="[RESOURCE::img/new/btn_style_2_type_3_arrow.png]">
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td style="background-color:#000;">
                                <div class="show">
                                    <div class="btn_style_2_con">
                                        <a href="javascript:void(0);" class="btn_style_2 type_3 color_white">
                                            <div class="btn_style_2_inner">
                                                <div class="show-tablecell vm">
                                                    <div class="mb5">
                                                        관리자<br/>
                                                        사이트가기
                                                    </div>
                                                    <div>
                                                        <img src="[RESOURCE::img/new/btn_style_2_type_3_arrow.png]">
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="show" style="background-color: grey;">
                                    <div class="btn_style_2_con">
                                        <a href="javascript:void(0);" class="btn_style_2 type_4">
                                            <div class="btn_style_2_inner">
                                                <div class="show-tablecell vm">
                                                    <div class="mb10">
                                                        <img src="[RESOURCE::img/new/btn_style_2_type_4_icon.png]">
                                                    </div>
                                                    <div>
                                                        사이트 개설
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-12 mb30">
                <div class="col-6">
                    <table>
                        <colgroup>
                            <col width="150px">
                            <col width="150px">
                            <col width="150px">
                            <col width="150px">
                        </colgroup>
                        <tbody>
                        <tr>
                            <th></th>
                            <th>기본</th>
                            <th>small</th>
                            <th>point</th>
                        </tr>
                        <tr>
                            <td>btn_style_3</td>
                            <td>
                                <div class="btn_style_3_con">
                                    <a href="javascript:void(0)" class="btn_style_3">
                                        자세히보기
                                    </a>
                                </div>
                            </td>
                            <td>
                                <div class="show" style="padding:20px; background-color: gray;">
                                    <div class="btn_style_3_con">
                                        <a href="javascript:void(0);" class="btn_style_3 small white">
                                            전체보기
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="btn_style_3_con">
                                    <a href="javascript:void(0);" class="btn_style_3 small point">
                                        전체보기
                                    </a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-12 mb30">
                <div class="col-6">
                    <table>
                        <colgroup>
                            <col width="150px">
                            <col width="150px">
                        </colgroup>
                        <tbody>
                        <tr>
                            <th></th>
                            <th>기본</th>
                        </tr>
                        <tr>
                            <td>btn_style_4</td>
                            <td>
                                <div class="tc btn_style_4_con">
                                    <a href="javascript:void(0);" class="btn_style_4">연결하기</a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-6">
                    <table>
                        <colgroup>
                            <col width="150px">
                            <col width="150px">
                        </colgroup>
                        <tbody>
                        <tr>
                            <th></th>
                            <th>기본</th>
                            <th>long</th>
                        </tr>
                        <tr>
                            <td>btn_style_5</td>
                            <td>
                                <div class="show" style="padding:20px; background-color: gray;">
                                    <div class="col-12 btn_style_5_con tc">
                                        <a href="javascript:void(0)" class="btn_style_5">
                                            버튼
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="show" style="padding:20px; background-color: gray;">
                                    <div class="col-12 btn_style_5_con tc">
                                        <a href="javascript:void(0)" class="btn_style_5 long">
                                            버튼
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-12 mb30">
                <div class="col-12">
                    <table>
                        <colgroup>
                            <col width="150px">
                            <col width="auto">
                            <col width="auto">
                            <col width="auto">
                        </colgroup>
                        <tbody>
                        <tr>
                            <th></th>
                            <th>기본</th>
                            <th>type_2</th>
                            <th>type_3</th>
                        </tr>
                        <tr>
                            <td>btn_style_6</td>
                            <td>
                                <div class="show" style="padding:20px; background-color: gray;">
                                    <div class="btn_style_6_con">
                                        <a href="javascript:void(0)" class="btn_style_6">회원가입</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="btn_style_6_con">
                                    <a href="javascript:void(0)" class="btn_style_6 type_2">메뉴얼 영상보기</a>
                                </div>
                            </td>
                            <td>
                                <div class="btn_style_6_con">
                                    <a href="javascript:void(0)" class="btn_style_6 type_3">메뉴얼 영상보기</a>
                                </div>
                            </td>
                            <td>
                                <div class="btn_style_6_con">
                                    <a href="javascript:void(0)" class="btn_style_6 type_4">회원가입</a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-12 mb30">
                <div class="col-12">
                    <table>
                        <colgroup>
                            <col width="150px">
                            <col width="200px">
                        </colgroup>
                        <tbody>
                        <tr>
                            <th></th>
                            <th>기본</th>
                        </tr>
                        <tr>
                            <td>btn_style_7</td>
                            <td>
                                <div class="show btn_style_7_con">
                                    <input type="submit" class="btn_style_7" value="로그인">
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-12 mb30">
                <div class="col-12">
                    <table>
                        <colgroup>
                            <col width="150px">
                            <col width="200px">
                        </colgroup>
                        <tbody>
                        <tr>
                            <th></th>
                            <th>기본</th>
                            <th>type2</th>
                        </tr>
                        <tr>
                            <td>btn_style_8</td>
                            <td>
                                <div class="show" style="padding:20px; background-color: gray;">
                                    <div class="show-sm vm btn_style_8_con">
                                        <a href="javascript:void(0)" class="btn_style_8">
                                            유사 테마보기
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="show" style="padding:20px; background-color: gray;">
                                    <div class="show-sm vm btn_style_8_con">
                                        <a href="javascript:void(0)" class="btn_style_8 type_2">
                                            유사 테마보기
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="show" style="padding:20px; background-color: gray;">
                                    <div class="show-sm vm btn_style_8_con">
                                        <a href="javascript:void(0)" class="btn_style_8 type_3">
                                            뒤로가기
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>