.tabs{display:-webkit-box;display:-ms-flexbox;display:flex}.tabs button{padding:10px 20px;margin-right:10px;background-color:#f4f4f4;border:none;border-radius:4px 4px 0 0;font-family:Arial,sans-serif;font-size:16px;color:#333;cursor:pointer;-webkit-transition:background-color .3s;transition:background-color .3s}.tabs button.active{background-color:#ccc}.sub-tabs{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:10px}.sub-tabs button{padding:8px 16px;margin-right:8px;background-color:transparent;border:none;font-family:Arial,sans-serif;font-size:14px;cursor:pointer;-webkit-transition:color .3s;transition:color .3s}.sub-tabs button.active{color:#333}.sub-tabs button .sub-tab-title{position:relative}.sub-tabs button .sub-tab-title:before{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background-color:#333;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.sub-tabs button.active .sub-tab-title:before{-webkit-transform:scaleX(1);transform:scaleX(1)}.tab-content>div{display:none}.tab-content>div.show{display:block}.sub-tab-content{padding:20px;border:1px solid #ccc;background-color:#f9f9f9;font-family:Arial,sans-serif;font-size:14px;color:#333;line-height:1.5}