.chart {  margin:0 10%; text-align: center; }
/* Style the tab */
.tab {
float: left;
background-color: #f1f1f1;
width: 27%;
height: auto;
}

/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
font-weight: 700;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
background-color: #007ac3;
color:#fff;
}

/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border-top: 2px solid #007ac3;
width: 72%;
border-left: none;
height: auto;
}
/* 상단 시리즈별 이미지 */
div.download {   margin: 20px 10px;     float: left;}
div.download img { height: auto; width:230px; padding-left:50px; display: inline-block;}
div.download p {font-size:25px; font-weight: 700;  display: inline-block; }

table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}

th, td {
text-align: left;
padding: 16px;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

td img {width:50%;}

.btn {
border: 1px solid #007ac3;
font-size: 14px;
cursor: pointer;
width: 100px;
margin-bottom: 20px;
}

.default {
border-color: #007ac3;
color: dodgerblue;
}

.default:hover {
background: #007ac3
;
color: white;
}

/*button effect*/
.link-effect-12 div { position: relative;  overflow: hidden;
}
.link-effect-12 div p::before {
height:2px; width: 100%;  background-color: #0ca6db;   content: "";  position: absolute;  left: 0;  top: 0;
-moz-transform: translateX(-100%);  -ms-transform: translateX(-100%);  -webkit-transform: translateX(-100%);  transform: translateX(-100%);  -moz-transition: 0.4s;  -o-transition: 0.4s;  -webkit-transition: 0.4s;  transition: 0.4s;
}
.link-effect-12 div p::after {
height:2px; width: 100%;  background: #0ca6db;  content: "";  position: absolute;  right: 0;  bottom: 0;
-moz-transform: translateX(100%);  -ms-transform: translateX(100%);  -webkit-transform: translateX(100%);  transform: translateX(100%);  -moz-transition: 0.4s;  -o-transition: 0.4s;  -webkit-transition: 0.4s;  transition: 0.4s;
}
.link-effect-12 div::before {
width:2px;  height: 100%;  background: #0ca6db;  content: "";  position: absolute;  left: 0;  top: 0;
-moz-transform: translateY(100%);  -ms-transform: translateY(100%);  -webkit-transform: translateY(100%);  transform: translateY(100%);  -moz-transition: 0.4s;  -o-transition: 0.4s;  -webkit-transition: 0.4s;  transition: 0.4s;
}
.link-effect-12 div::after {
width:2px;  height: 100%;  background: #0ca6db;  content: "";  position: absolute;  right: 0px;  bottom: 0;
-moz-transform: translateY(-100%);  -ms-transform: translateY(-100%);  -webkit-transform: translateY(-100%);  transform: translateY(-100%);  -moz-transition: 0.4s;  -o-transition: 0.4s;  -webkit-transition: 0.4s;  transition: 0.4s;
}
.link-effect-12 div:hover::before, .link-effect-12 div:hover::after {
-moz-transform: translateX(0);  -ms-transform: translateX(0);  -webkit-transform: translateX(0);  transform: translateX(0);
}
.link-effect-12 div:hover p::before, .link-effect-12 div:hover p::after {
-moz-transform: translateX(0);  -ms-transform: translateX(0);  -webkit-transform: translateX(0);  transform: translateX(0);
}







/*---------------------------------------
MOBILE RESPONSIVE
-----------------------------------------*/
@media (max-width: 1023px) {

}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
.chart { margin:0; }
/* Style the buttons inside the tab */
.tab button {  padding: 12px 16px;  font-size: 13px;   font-weight: 700;   padding: 25px 16px;}
.tabcontent { padding: 0px 5px;}

/* 상단 시리즈별 이미지 */
div.download { }
div.download img { width:100px; padding-left:10px;}
div.download p {font-size:20px;  }


table {font-size: 12px;}
th, td {  padding: 5px; text-align: center;}
table .btn{    padding: 5px; margin: 2px 0px;     width: 70px;     width: 60px;    font-size: 12px;
}
}

@media (max-width: 480px) {
}
@media (max-width: 320px) {
}