.ac-container {
   display: inline-block;
   width: 100%;
   float: left;
}

.ac-small a {
	font-family: 'Nanum Gothic Bold';
	font-size: 15px;
	color: #444;
}

@media all and (max-width: 749px) {
	.ac-container h1 {
	  width: 100%;
	  margin: 10px auto 30px auto;
	  text-align: left;
	}
	.ac-container label:before {
	  content: '';
	  position: absolute;
	  width: 20px;
	  height: 20px;
	  left: 8px;
	  top: 10px;
	  background: transparent url(../images/plus-20-20-crimson.png) no-repeat center center;  
	}
	.ac-container input:checked + label:before {
	  content: '';
	  position: absolute;
	  width: 20px;
	  height: 20px;
	  left: 10px;
	  top: 10px;
	  background: transparent url(../images/minus-20-20-crimson.png) no-repeat center center;  
	}

	.ac-container label {
	  font-family: 'Nanum Gothic Bold';
	  font-size: 15px;
	  padding-left: 35px;
	  height: 40px;
	  line-height: 40px;
	  position: relative;
	  z-index: 20;
	  display: block;
	  cursor: pointer;
	  color: #790018;
	   background: #f3eee6;
	  box-shadow: 
	    0px 0px 0px 1px rgba(155,155,155,0.3), 
	    0px 0px 0px 0px rgba(255,255,255,0.9) inset
	}

	.ac-container input:checked + label,
	.ac-container input:checked + label:hover{
	  box-shadow: 
	    0px 0px 0px 1px rgba(155,155,155,0.3), 
	    0px 2px 2px rgba(0,0,0,0.1);
	}
	.ac-container input:checked + label:hover:after{
	  background-image: url(../images/arrow_up.png);
	}
	.ac-container input{
	  display: none;
	}
	
	.ac-container article {
	  background: #f3eee6;
	  overflow: hidden;
	  height: 0px;
	  position: relative;
	  z-index: 10;
	  -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	  -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	  -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	  -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	}
	.ac-container article:hover {
	  background: #fff;
	}
	.ac-container input:checked ~ article{
	  -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	  -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	  -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	  -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	  transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	  box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
	}
	.ac-container input:checked ~ article.ac-small{
	 	height: 20px;
		padding: 10px 0;
	}
	.ac-null-row {
		display: none;
	}
	.ac-row {
		width: 100%;
	}
	.ac-row-icon {
		display: none;
		float: left;
		margin-top: -3px;
	    margin-left: 8px;
	    margin-right: 0px;
	  	width: 40px;
	}
	.ac-row-icon img {
		 width:70%;height:70%;
		   vertical-align: middle;
	}

	.ac-row-title {
		/*position: absolute;*/
		margin-left: 35px;
	}
	.ac-container article p {
		margin: 0;
	}
}

@media all and (min-width: 750px) and (max-width: 895px) {
	
	.ac-container {
		border-bottom: 1px solid #ccc;	
	}
	.ac-container h1 {
	  width: 100%;
	  margin: 0px auto 0px auto;
	  text-align: center;
	}
	.ac-container label {
		display: none;
	}
	.ac-container input {
	  display: none;
	}
	.ac-small:first-child .ac-row-icon {
       margin-left: 0.7em;
	}
	.ac-container article {
	  background: #f3eee6;
	  overflow: hidden;
	  height: 0px;
	  width: 20%;
	  position: relative;
	  z-index: 10;
	  display:inline-block;
	  float: left;
	}
	.ac-container article:hover {
	  background: #fff;
	}
	.ac-container article.ac-small {
	  font-family: 'Nanum Gothic Bold';
	  height: 44px;
	  line-height: 44px;
	  overflow-wrap: break-word;
	}
	.ac-null-row {
		display: none;
	}
	
	.ac-row {
	 	width: 20%;
	 	display:inline;
	}
	.ac-row-icon {
		display: none;
	}
	.ac-row-icon img {
	}
	.ac-row-title {
	  font-family: 'Nanum Gothic Bold';
		position: relative;
		display: inline;
		line-height: 1.2em;
		height: 44px;
	}
	.ac-container article p {
  		vertical-align: middle; 
  		text-align: center; 
  		border-left: 1px solid #ccc;
	}
	.ac-container article p:hover,
	 ac-container article p:active {
  		border-left: 1px solid #790018;
	}
}

@media all and (min-width: 896px) and (max-width: 1151px) {
	
	.ac-container h1 {
	  width: 100%;
	  margin: 0px auto 0px auto;
	  text-align: center;
	}
	.ac-container label {
	  	font-family: 'Nanum Bold';
	  	font-size: 15px;
		text-align: center;
	 	width: 15.7%;
		height: 60px;
		line-height: 60px;
		position: absolute;
		z-index: 20;
		display:inline-block;
		background: #e7dece;
		color: #790018;
	  	box-shadow: 0px 0px 0px 2px rgba(100,100,100,0.3), 0px 2px 2px rgba(0,0,0,0.1);
	}
	.ac-container input{
	  display: none;
	}
	.ac-small:first-child .ac-row-icon {
       margin-left: 0.7em;
	}
	.ac-container article{
	  background: #f3eee6;
	  overflow: hidden;
	  height: 0px;
	  width: 16.61%;
	  position: relative;
	  z-index: 10;
	  display:inline-block;
	  float: left;
	  box-shadow: 
	    0px 0px 0px 2px rgba(155,155,155,0.3), 
	    0px 2px 2px rgba(0,0,0,0.1);
	}
	.ac-container article:hover {
	  background: #fff;
	}
	.ac-container article.ac-small {
	  height: 60px;
	  line-height: 60px;
	}
	.ac-null-row {
	  background: #eee;
	  overflow: hidden;
	  height: 60px;
	  width: 16.61%;
	  position: relative;
	  z-index: 10;
	  display:inline-block;
	  float: left;
	}
	
	.ac-row {
	 	width: 16.6%;
	 	display:inline;
	}
	.ac-row-icon {
		float: left;
	    margin-left: 0.5em;
	    width: 40px;
	}
	.ac-row-icon img {
		 width:80%;height:80%;
		 vertical-align: middle;
	}
	.ac-row-title {
		position: absolute;
		display: table;
		line-height: 1.2em;
		margin-left: 30%;
		height: 60px;
	}
	.ac-container article p {
		display: table-cell; 
  		vertical-align: middle; 
  		text-align: left; 
	}
}
 
@media all and (min-width: 1152px) {
	
	.ac-container h1 {
	  width: 100%;
	  margin: 0px auto 0px auto;
	  text-align: left;
	}
	.ac-container label {
	  font-family: 'Nanum Gothic Bold';
	  padding-left: 30px;
	  height: 70px;
	  line-height: 70px;
	  position: relative;
	  z-index: 20;
	  font-size: 20px;
	  display: block;
	
	  background: #790018 url(../images/8.png) no-repeat right;
	  background-size: 50%;
	  color: #fff;
	  box-shadow: 
	    0px 0px 0px 1px #790018, 
	    1px 0px 0px 1px #790018 inset
	}
	.ac-container input{
	  display: none;
	}
	.ac-container {
	    border-left: 2px solid #ccc;
		border-right: 2px solid #ccc;
		border-bottom: 2px solid #ccc;

     }
	.ac-container article{
	  background: #f3eee6;
	  overflow: hidden;
	  height: 75px;
	  position: relative;
	  z-index: 10;
	 
	}
	.ac-container article:hover {
	  background: #fff;
	}
	
	.ac-container article.ac-small{
	  height: 65px;
	  line-height: 65px;
	  padding: 0 25px;
	}
	.ac-container article.ac-small > div {
        border-bottom: 1px solid  #bfbfbf;
	
	}

	.ac-null-row {
		display: none;
	}
	
	.ac-row {
		width: 100%;
	}
	.ac-row-icon {
		float: left;
	    margin-left: 0.0em;
	    width: 60px;
	}
	.ac-row-icon img {
		 width:66.67%;height:66.67%;
		vertical-align: middle;
	}
	.ac-row-title {
		position: absolute;
		display: table;
		line-height: 1.2em;
		margin-left: 25%;
		height: 65px;
	}
	.ac-container article p {
		display: table-cell; 
  		vertical-align: middle; 
  		text-align: left; 
	}
}