/* ------------------------------------------
  You main styles
---------------------------------------------*/

@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans:300,300i,400,400i,500,500i,700,700i,800,800i';
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
body {
  font-family: "Alegreya Sans", Arial, Tahoma; height: 250px;
}
/* 건이꺼 시작*/

#index_category{ margin: -40px 0 -70px 0}
#index_image img{ width:100%; max-width:600px;height:auto; display: block; margin-left: auto; margin-right: auto;}
#index_image_back  {position:relative;margin:0 0 ;padding: 0;text-align:center;background:#5599ff;height:365px}
#index_greeting { margin-bottom:25px; color:#606060; height: 30px; }

.index-subtitleGUN { margin: 80px 0 0 0; text-align: center; font-weight: bold; 
  font-size: 20px;
  display: block;
  color: #666;
  letter-spacing: 0;}
.index-textGUN { font-size: 13px; line-height: 1.5em;  font-family: "Alegreya Sans", Arial, Tahoma; text-align: center; margin: 10px 50px 10px 50px; }

/*#category_skitter { margin:-100px 0; padding: 150px;}*/
#category_skitter { text-align:center; margin: 0;   
	margin-left: auto;
    margin-right: auto;
    width: auto;
	}
#ca_content_skitter img{width:80%; height:auto; display: block; margin-left: auto; margin-right: auto;}


/*미디어 사이즈 조절 할때 모빌 삽 css 에서 헤드전체를 같이 수정 해야함*/
		@media (max-width: 770px){ 
		#category_skitter {  margin: 0px 0 -10px 0;   
			margin-left: auto;
			margin-right: auto;
			width: 550px
			}
		
		}
		@media (max-width: 600px){
		#category_skitter { padding-top:50px; margin: 0px 0 -50px 0;    
			margin-left: auto;
			margin-right: auto;
			margin-bottom: -90px;
			width: auto
			}
		#index_image_back  {position:relative;margin:0 0 ;padding: 0;text-align:center;background:#5599ff;height:0px}
		#box_title {padding-top:50px; margin-bottom: 0px;}
		}

    

#ca_content_skitter{ background: white; padding: 15px;   }
#ca_content_skitter p {font-size: 14px; line-height: 1.5em;  font-family: "Alegreya Sans", Arial, Tahoma;}


#category_skitter h1 {
  font-weight: bold;
  font-size: 35px;
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;
  letter-spacing: -2px;
  color: #999;
}
#category_skitter h1 small {
  font-weight: normal;
  font-size: 20px;
  display: block;
  color: #444;
  letter-spacing: 0;
}

#category_skitter small {
  font-weight: normal;
  font-size: 20px;
  display: block;
  color: #444;
  letter-spacing: 0;
  padding:10px;

}

/* 건이꺼 끝*/

#page {
  margin:-40px 0 0 0 ;
  max-width: 2200px;
  padding: 0px;
}
#page h1 {
  font-weight: bold;
  font-size: 34px;
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;
  text-align: left;
  letter-spacing: -2px;
  color: #444;
}
#page h1 small {
  font-weight: normal;
  font-size: 18px;
  display: block;
  color: #999;
  letter-spacing: 0;
}
.see-documentation-p {
  text-align: right;
  margin-top: 30px;
}
.btn {
  transition: background 300ms;
  border-radius: 2px;
  padding: 10px 20px;
  display: inline-block;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -3px inset;
  text-transform: uppercase;
  font-weight: bold;
}
.btn.btn-green {
  color: white;
  background: #009688;
}
.btn.btn-green:hover {
  background: #00695c;
}
.btn.btn-yellow {
  color: black;
  background: #fdd835;
}
.btn.btn-yellow:hover {
  background: #fbc02d;
}
.btn.btn-small {
  padding: 3px 7px;
  font-size: 11px;
}


.category_head { padding:4px 50px ; background:#606060 ; text-align:center}
.category_head ul {}
.category_head ul li { display:inline-block;font-family:'Nanum Gothic',sans-serif; }
.category_head ul li a { color:#999;font-size:1.15em;font-weight:bold;margin:0 5px;line-height:25px;display:block}

.category_head ul li a:hover{color:#ffbf00;font-size:1.15em;font-weight:bold;margin:0 5px;line-height:25px;display:block}

.category_head li.item a {}
.category_head ul li.select a { color:#ffbf00 }

		@media (max-width: 670px){
			.category_head{display:none}
			.ft_copy{padding:10px 20px;}
		}

.bar_title { color:#d3d3d3; font-family:arial black; font-weight:bold; font-size:2em; padding-top:11px;}

.sub_category {text-align:center; width:100%; margin: 5px 0px}
.sub_category ul {list-style:none;display:inline-block;margin: 0px ;padding: 0}
.sub_category ul li {display:inline-block; font-size:0.77em;}
.sub_category ul li a{border-radius: 2px; border: 1px solid; margin: 0px 3px 5px 3px; background: white;}
.sub_category a {padding: 0 6px 0 6px; text-decoration:none;color:#777;display:inline-block;}
.sub_category a:hover{ background:#101010;color:#5599ff}

.sub_category li.item a {}
.sub_category ul li.select a { background:#101010;color:#5599ff }

/*
.sub_category  ul li:first-child{background:none}
.sub_category h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.sub_category ul:after {display:block;visibility:hidden;clear:both;content:""}
 "/" 작은것 위에 넣으면 생김 background:url(img/sbmn_bg.gif) no-repeat left 50%; */


.category_tail { text-align: center; margin-bottom: 10px; }
.category_tail ul { background: #fff; }
.category_tail ul li { display: inline-block; }
.category_tail ul li a { padding: 10px; display: inline-block; color: #707070; text-decoration: none; 
font-size: 14px; font-weight: bold; text-transform: uppercase; border-radius: 2px; 
border: 0px solid; margin: 6px 5px 6px 5px; background: #fff;}
.category_tail ul li a:hover{background:#101010;color:#5599ff}

.category_tail li.item a {}
.category_tail ul li.select a { background:#808080;color:#ffbf00 }


.skitter-animations { text-align: center; margin: 20px 0 10px 0; }
.skitter-animations h3 { text-transform: uppercase; margin: 0 0 10px 0; }
.skitter-animations ul { }
.skitter-animations ul li { display: inline-block; }
.skitter-animations ul li a { display: inline-block; color: black; text-decoration: none; font-size: 14px; border-bottom: 1px solid; margin: 0 5px 10px 5px; }
.skitter-animations ul li a.active { color: #999; }

@media (max-width: 970px) {
  .skitter-themes ul li a { 
    margin: 0 2px 10px 2px;
    padding: 5px;
    font-size: 16px;
  }
}

/* ------------------------------------------
  Skitter custom settings
---------------------------------------------*/
.skitter-large-box {
  width: 100%;
  margin: 20px 0;
}

@media (max-width: 770px){
.skitter-large-box {
  margin: 90px 0;
}
 }
@media (max-width: 600px){
.skitter-large-box {
  margin: 90px 0;
 }

/*
.skitter-small-box {
  max-width: 400px;
}
.skitter-medium-box {
  max-width: 500px;
}
*/