테스트
```html
<style>
/* 기존 스타일은 그대로 유지합니다. */
.tabs {
position: relative;
width: 100%;
padding: 0;
list-style: none;
}
.tab {
float: left;
padding: 10px 0;
}
.tab label {
background-color: whitesmoke;
font-weight: 300;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 0px solid transparent;
padding: 8px 30px !important;
width: 160px;
font-size: 14px;
color: #7062E1;
}
.tab label:hover {
background-color: #7062E1;
color: white;
font-weight: bold;
}
.tab [type="radio"] {
display: none;
}
.tab .content {
display: none;
position: absolute;
background: white;
left: 0;
right: 0;
padding: 0;
}
.tab [type="radio"]:checked ~ label {
background-color: #7062E1;
color: white;
font-weight: bold;
z-index: 2;
}
.tab [type="radio"]:checked + label + .content {
z-index: 1;
display: block;
}
.sub-tabs {
width: 100%;
padding: 0;
list-style: none;
}
.sub-tab {
float: left;
padding: 10px 0;
}
.sub-tab label {
background-color: whitesmoke;
font-weight: 300;
border-radius: 30px;
border: 1px #7062E1 solid transparent;
margin: 8px;
padding: 8px 14px !important;
width: 160px;
font-size: 12px;
color: #7062E1;
position: relative;
}
.sub-tab label:hover {
background-color: #7062E1;
color: white;
font-weight: bold;
}
.sub-tab [type="radio"] {
display: none;
}
.sub-tab .content {
display: none;
position: absolute;
background: white;
top: 39px;
left: 0;
right: 0;
padding: 0;
}
.sub-tab [type="radio"]:checked ~ label {
background-color: #7062E1;
color: white;
font-weight: bold;
z-index: 2;
}
.sub-tab [type="radio"]:checked + label + .content {
z-index: 1;
display: block;
}
</style>
<div class="container_main">
<ul class="tabs">
<li class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">탭1</label>
<div class="content" style="box-sizing: border-box; border-top: 1px solid #ccc;">
<ul class="sub-tabs">
<li class="sub-tab">
<input type="radio" id="sub-tab-1" name="sub-tab-group-1" checked>
<label for="sub-tab-1">서브탭1</label>
<div class="content">
~~~~
</div>
</li>
<li class="sub-tab">
<input type="radio" id="sub-tab-2" name="sub-tab-group-1">
<label for="sub-tab-2">서브탭2</label>
<div class="content">
<p>서브컨텐츠2</p>
</div>
</li>
<li class="sub-tab">
<input type="radio" id="sub-tab-3" name="sub-tab-group-1">
<label for="sub-tab-3">서브탭3</label>
<div class="content">
<p>서브컨텐츠3</p>
</div>
</li>
</ul>
</div>
</li>
<li class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">탭2</label>
<div class="content" style="box-sizing: border-box; border-top: 1px solid #ccc;">
<ul class="sub-tabs">
<li class="sub-tab">
<input type="radio" id="sub-tab-4" name="sub-tab-group-2" checked>
<label for="sub-tab-4">서브탭4</label>
<div class="content">
<p>서브컨텐츠4</p>
</div>
</li>
<li class="sub-tab">
<input type="radio" id="sub-tab-5" name="sub-tab-group-2">
<label for="sub-tab-5">서브탭5</label>
<div class="content">
<p>서브컨텐츠5</p>
</div>
</li>
<li class="sub-tab">
<input type="radio" id="sub-tab-6" name="sub-tab-group-2">
<label for="sub-tab-6">서브탭6</label>
<div class="content">
<p>서브컨텐츠6</p>
</div>
</li>
</ul>
</div>
</ul>
</div>
```
HTML
복사
