* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {height: auto;margin: 0;}
/* 상단 시리즈별 그래픽 이미지 */
.graphic { text-align: center;  margin: 0 15%;}
.graphic h4{ color:#555; margin-bottom: 20px;}
.graphic img { height: auto;  margin-top:80px;     width: 70%;}
.graphic p {text-align:center; font-size:18px;  display: block ;line-height: 33px; letter-spacing: -1.1px; word-spacing: 2px;}
.graphic span {font-size:15px; display: block; font-weight: 700;   margin: 30px; color: #555;}
/*서브페이지 타이틀*/
.box {text-align: center;     position: relative;  color: #1681c1; }
.box p{ font-weight: 400;  padding: 25px 0 75px 0;    font-size: 45px;   letter-spacing: -1.2px; }
.box p::after {content: "";  display: block;  width: 50px;  height: 2px;  background-color: #dfdfdf;  margin: 10px auto 0 auto;
    text-align: center;}
.box span{  font-weight: 500;    font-size: 50px;    position: relative;}
.box img{width: 250px;}
/*중간 타이틀*/
.box_2 {text-align: center;   position: relative;    margin: 20px 0; }
.box_2 p{ font-weight: 400;  font-size: 28px;   letter-spacing: -1.2px; color: #555;  }
.box_2 span{  font-weight: 500;  color: #007ac3;  font-size:40px;    position: relative;  letter-spacing: -1.2px;}
.box_2 span::after {content: "";  display: block;  width: 50px;  height: 2px;  background-color: #dfdfdf;  margin: 10px auto 0 auto;
    text-align: center;}
.box_2 img{width: 250px;}
/*시리즈 버튼*/
.number{text-align:center; width:100%; margin: 80px 0;}
.btn_s { cursor: pointer;text-align: center;padding: 20px 0;display: inline-block;  width: 20%;}
.btn_s button svg {cursor: pointer;margin: 0px 0px 0px 8px;  width: 12px;   height: 12px; color:  #fff;}
.btn_s button {cursor: pointer; width: 90%; background-color:#fff;  color:#007ac3; font-size:18px; font-weight:600;
border: 1px solid #007ac3;padding: 18px 30px; }
.btn_s img{max-width: 180px;    display: block; margin:0 0 20px 0;}
.btn_s a{text-align: -webkit-center;}
.default_s { background-color: #007ac3; color: #fff;}
.default_s:hover {  background-color: #007ac3; color: #fff;}
/****************************************************/
/* Style the tab */
.tablink { background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 18px;
font-size: 17px;
height: 50px;
border-right: 1px solid #999;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {color: #333;padding: 20px 10px 40px 10px;background-color: #f6f6f6;margin-top: 50px;
border-top: 2px solid #007ac3; width: 80%;}
/***************************************************/
.tab { width: 80%;}
.tab_1 { width: 80%;}
.series {padding-top:30px;text-align: -webkit-center; width: 100%;}
.series span {float: right; font-size:11px;}
.series p { font-size:14px; padding-top:20px; ext-align: left;}
.series h5{font-size:4px;}
/* 상단 시리즈별 이미지 */

.cad {text-align: center;}

div.product { padding: 10px;  text-align: center;}
div.product img {width: 46%;  padding: 40px 5px;  }
div.product h2 { font-size:30px; font-weight:500; color: #1681c1; letter-spacing: -1.2px;margin-bottom:10px;}
div.product p { font-size:15px; font-weight:500; color: #666; }
.tit{text-align: center;    display: inline-block;}
.tit span { float: none;
    font-size: 15px;
    text-align: center;
    background-color: #007ac3;
    color: white;
    padding: 5px 20px;
    border-radius: 30px;}
/****************************************************/
.series_top {padding-top:30px;    text-align: center;}
/* 버튼 */
.tablink_top {
background-color: #555;color: white;border: none;outline: none;cursor: pointer;padding: 20px 30px;font-size: 20px; width: 49%;}
.tablink_top:hover {
background-color: #777; 
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent_top {color: #333;padding: 20px 10px 80px 10px;}
/****************************************************/
/*테이블*/
.small{font-size:4px;}
 table {
letter-spacing: -1.1px;
border-spacing: 0;
width: 100%;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
border-left: 0px solid #666;
border-right: 0px solid #666;
background-color: #fff;
border-collapse: collapse;
}
th, td {font-size:14px; white-space: nowrap;
text-align: center;
padding: 5px 3px;
border: 1px solid #888;
}
tr:nth-child(even) {background-color: #e6eff4;}
 td img {width:50%;}
.subscrip {margin:10px; text-align: left; }
.subscrip img{margin:20px 10px 10px 10px;}
/*다운로드 버튼*/
.btn { text-align:center;margin: 20px;font-size: 14px;cursor: pointer;text-align: center;padding: 18px 50px;}
.btn button svg {margin: 0px 0px 0px 8px;    width: 12px;   height: 12px; color:  #007ac3;}
.btn button { background-color:#fff; color:#007ac3; font-size:18px; font-weight:600; border: 1px solid #007ac3;}
.default { background-color: #007ac3; color: #fff;}
.default:hover { background-color: #007ac3; color: #fff;}
/*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: 1120px){
.btn_s button{ padding: 18px 5px; font-size: 15px;}
.tab_1 {    width: 100%;}
.tab {    width: 100%;}
.tabcontent { width: 100%;}
.box p{ padding: 10px 0 30px 0; font-size: 30px;
    letter-spacing: -1.5px;
    line-height: 1.2;
    font-weight: 600;}
.box_2 p{ font-size: 30px;
    letter-spacing: -1.5px;
    line-height: 1.2;
    font-weight: 500;}
.btn_s img{width: 140px; }
}
@media (max-width: 768px)
{
.graphic { margin: 0 40px;}
.box span{  font-size: 35px;  }
.box_2 p{   font-size: 22px; font-weight: 500;   }
.box_2 span{  font-size: 35px;  }
.btn_s {padding: 0;}
.btn_s button{font-size: 15px;  padding: 18px 5px;}
table {font-size: 10px;}
}
@media (max-width: 640px){
.subscrip img{ width: 90%; }
/* Style the buttons inside the tab */
.tab_1 { display:block; margin-bottom:50px;}
.tab {display:block; margin-bottom:100px;}
.tablink {padding: 12px 16px; font-size: 13px;}
.tabcontent {  padding: 5px 0px 40px 0px; }
.series span {font-size:10px;}
.series p { font-size:11px; padding:8px;}
div.product  {padding-top:20px;}
div.product h2 { font-size:23px; font-weight:500; }
div.product img {width: 80%; padding: 10px 0;  }
.tit span { font-size:13px;}
/*다운로드 버튼*/
.btn { text-align:center; margin: 20px 0 5px 0;}
.btn button {font-size:13px; padding:20px 30px; width: 100%;}
/*시리즈 버튼*/
.number{margin: 50px 0;}
.btn_s {padding: 2px; width: 30%;}
.btn_s button { font-size:14px; font-weight:600; width: 110px; padding:5px; letter-spacing: -1px;}
.btn_s img{ width: 130px; margin:0 0 20px 0; }
.graphic { margin: 0 15px;}
.graphic p {font-size: 17px;  word-spacing: 4px;  letter-spacing: -1.2px; line-height: 30px;}
.graphic span {font-size:13px; display: block; font-weight: 700;   margin: 30px; color: #555;}
/* 상단 시리즈별 이미지 */
div.download { }
div.download img { width:100px; padding-left:10px;}
div.download p {font-size:20px;  }
table { font-size: 6px;width: 100%; letter-spacing: -0.6px; border-top: 1.5px solid #666; border-bottom: 1.5px solid #666; }
th, td {  padding: 3px; text-align: center; border: 0.7px solid #666;}
.arrows {width: 20px;
    height: 30px;
    float: right;
    margin: 25% 25px;
    background: url(../img/arrow.png)no-repeat left top width:20px;}
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}