body { }
.container { margin: 0 auto; }

/* Example wrapper */
.wrap_scroll {



/*
position: relative;
	margin: 3em 0;
	*/

/*
¸ÞÀÎcss¿¡¼­ Å©±â¸¦ Àâ¾ÆÁÜ ¸ð¹ÙÀÏÀº wrap_scroll ·Î È®ÀÎÇÒ°Í
	*/

	position: relative;
	margin: 0 auto;
}



/* ¿µµµ°¡ ¸Ó¸® Á¦¸ñ */


 .wrap_scroll h2 { 
 
    font-family:'Segoe UI',Meiryo,'Trebuchet MS','³ª´®°íµñ',NanumGothic,ng,'¸¼Àº °íµñ','Malgun Gothic','µ¸¿ò',Dotum,AppleGothic,sans-serif;   
    font-size:15px; 
    
    color:#0555AD;
    line-height:200%; 
    letter-spacing:-1px;
    padding: 0px 0px 0px 5px ;
    
     }
     
     
     
 .wrap_scroll h22 { 
 
    font-family:'Segoe UI',Meiryo,'Trebuchet MS','³ª´®°íµñ',NanumGothic,ng,'¸¼Àº °íµñ','Malgun Gothic','µ¸¿ò',Dotum,AppleGothic,sans-serif;   
    font-size:15px; 
    
    color:#cccccc;
    line-height:200%; 
    letter-spacing:-1px;
    padding: 0px 0px 0px 5px ;
    
     }
     
     
     
     

/* Frame */
.frame {
	height: 250px;
	line-height: 250px;
	overflow: hidden;
}
.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame ul li {
	float: left;
	width: 227px;
	height: 100%;
	margin: 0 1px 0 0;
	padding: 0;
	background: #333;
	color: #ddd;
	text-align: center;
	cursor: pointer;
}
.frame ul li.active {
	color: #fff;
	background: #a03232;
}


	
		
/* Frame _ÇÁ¸®¹Ì¾ö ¹è³Ê  */


		
/* »ó´Ü ±Û¾¾  */


.frame_fff ul li div {

   font-family:'Segoe UI',Meiryo,'Trebuchet MS','³ª´®°íµñ',NanumGothic,ng,'¸¼Àº °íµñ','Malgun Gothic','µ¸¿ò',Dotum,AppleGothic,sans-serif;   
    font-size:16px; 
    font-weight:bold; 
    color:#0555AD;
    line-height:200%; 
    letter-spacing:-1px;
    padding: 1em 0px 0px 1em ;
    text-align:left;
    
 }




@media (max-width:400px) {  /* ÃÖ´ë 400 ------------ */


.frame_fff {
	height: 700px;
	line-height: 250px;
	overflow: hidden;
}
.frame_fff ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}


.frame_fff ul li {
	float: left;
	width: 100%;
	height: 100%;
	margin: 0 1px 0 0;
	padding: 0;
	background: #EFEFEF;
	color: #ddd;	
	text-align: center;
	cursor: pointer;
	border:#EFEFEF solid 1px;
		line-height: 165px;
		
}

    
}


@media (min-width:401px) and (max-width:639px) {   /* ÃÖ¼Ò 401 ~ 639 -------- */


.frame_fff {
	height: 700px;
	line-height: 250px;
	
	/* overflow: hidden; */
	
   overflow: visible;
	
	
	
}
.frame_fff ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}

.frame_fff ul li {
	float: left;
	
	  /* ¿ÉƼ¸Ó½º ºä2 °¡ °¡·Î 439ÀÓ ±×·¡¼­ ¿µµµ°¡ ------- */
	
	width: 439px;
	height: 698px;
	margin: 0 3px 0 0;
	padding: 0;
	
	background: #f4f4f4;
	color: #ddd;	
	text-align: center;
	cursor: pointer;
	border: #dddddd solid 1px;
	
	
		line-height: 125px;
		
		
		
}


/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_fff ul li img {

	width: 134px;
		border: #dddddd solid 1px;
			
}


    
}



@media (min-width:640px) and (max-width:959px) {  /* ÃÖ¼Ò 640 ~ 1024 ---------- */


.frame_fff {
	height: 430px;
	line-height: 250px;
	overflow: hidden;
}
.frame_fff ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}

.frame_fff ul li {
	float: left;
	width: 700px;
	height: 428px;
	margin: 0 3px 0 0;
	padding: 0;
	
	background: #f4f4f4;
	color: #ddd;	
	text-align: center;
	cursor: pointer;
	border: #dddddd solid 1px;
	
	
		line-height: 10em;
		
}


/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_fff ul li img {

	width: 130px;	
	border: #dddddd solid 1px;		
}




}



@media (min-width:960px)  {  /*-------ÇǽùöÀü Á¦ÀÏ Å« ¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª*/


.frame_fff {
	height: 530px;
	line-height: 250px;
	overflow: hidden;
}
.frame_fff ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}


.frame_fff ul li {
	float: left;
	width: 956px;
	height: 528px;
	margin: 0 3px 0 0;
	padding: 0;
	
	background: #3c4252;
	color: #ddd;	
	text-align: center;
	cursor: pointer;
	border: #e2e2e2 solid 1px;
	
	
	line-height: 168px;
		
}


/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_fff ul li img {

	width: 180px;	
	border: #dddddd solid 1px;
		
}




}









.frame_fff ul li.active {
	color: #fff;
	/* background: #0066CC; */
}






		
		
/* Frame _mb ¸ÞÀÎÈ­¸é ÇÁ¸®¹Ì¾ö ±¤°í ¸ð¹ÙÀÏ¿ë */

.frame_mb {
	height: 250px;
	line-height: 250px;
	overflow: hidden;
}
.frame_mb ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame_mb ul li {
	float: left;
	width: 238px;
	height: 100%;
	margin: 0 ;
	padding: 0;
	
	background: #3c4252;

	color: #ddd;
	
	text-align: center;
	cursor: pointer;
	
	border:#EFEFEF solid 0px;
	
	
}
.frame_mb ul li.active {
	color: #fff;
	background: #2c3444;
}


/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_mb ul li img {

width: 228px;	
	border: #dddddd solid 0px;
	padding:5px 5px 5px 5px;
		

		
}



	
	
	
	
	
	
		
/* Frame _mb_ad ¸ÞÀÎÈ­¸é ÇÁ¸®¹Ì¾ö ±¤°í ¸ð¹ÙÀÏ¿ë */

.frame_mb_ad {
	height: 250px;
	line-height: 250px;
	overflow: hidden;
}
.frame_mb_ad ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame_mb_ad ul li {
	float: left;
	width: 238px;
	height: 100%;
	margin: 0 ;
	padding: 0;
	
	background: #3c4252;

	color: #ddd;
	
	text-align: center;
	cursor: pointer;
	
	border:#EFEFEF solid 0px;
	
	
}
.frame_mb_ad ul li.active {
	color: #fff;
	background: #2c3444;
}


/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_mb_ad ul li img {

width: 228px;	
	border: #dddddd solid 0px;
	padding:5px 5px 5px 5px;
		

		
}



		
	
	
	
	
	
	
	
	
	
		
		
/* Frame _mb */
.frame_mb2 {
	height: 112px;
	line-height: 250px;
	overflow: hidden;
}
.frame_mb2 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame_mb2 ul li {
	float: left;
	width: 120px;
	height: 100%;
	margin: 0 0px 0 0;
	padding: 0;
	
	background: #3c4252;


	color: #ddd;
	
	text-align: center;
	cursor: pointer;
	
	border:#EFEFEF solid 0px;
	
	
}
.frame_mb2 ul li.active {
	color: #fff;
	background: #333333;
}


/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_mb2 ul li img {

	width: 110px;	
	border: #dddddd solid 0px;
	padding:5px;
		
}



	

  
@media (max-width:400px) {  /* ÃÖ´ë 400 ------------ */


.wrap_scroll_m
		{
		
width:316px;


text-align:center;
	margin: 0 auto;
	padding: 0;
	

overflow: hidden;
}
		
/* »ó´ã Åé */

.frame_mb2_sang {

    width:100%;

	line-height: 250px;
	overflow: hidden;
}
.frame_mb2_sang ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame_mb2_sang ul li {
	float: left;
	width: 70px;
	height: 100%;
	margin: 0;
	padding: 0;
	
	background: #ffffff;
	
	border:#EFEFEF solid 1px;
	
	color: #ddd;
	
	text-align: center;
	cursor: pointer;

	
}
.frame_mb2_sang ul li.active {
	color: #fff;
	background: #ededed;
}


/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_mb2_sang ul li img {

	width: 70px;	
	border: #dddddd solid 0px;
	padding:0;
		
}





    
}


@media (min-width:401px) and (max-width:639px) {   /* ÃÖ¼Ò 401 ~ 639 -------- */



.wrap_scroll_m
		{
		
width:390px;


text-align:center;
	margin: 0 auto;
	padding: 0;
	

overflow: hidden;
}
		
/* »ó´ã Åé */

.frame_mb2_sang {

    width:100%;

	line-height: 250px;
	overflow: hidden;
}
.frame_mb2_sang ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame_mb2_sang ul li {
	float: left;
	width: 70px;
	height: 100%;
	margin: 0;
	padding: 0;
	
	background: #ffffff;
	
	border:#EFEFEF solid 1px;
	
	color: #ddd;
	
	text-align: center;
	cursor: pointer;

	
}
.frame_mb2_sang ul li.active {
	color: #fff;
	background: #ededed;
}


/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_mb2_sang ul li img {

	width: 70px;	
	border: #dddddd solid 0px;
	padding:0;
		
}




    
}



@media (min-width:640px) and (max-width:959px) {  /* ÃÖ¼Ò 640 ~ 1024 ---------- */



.wrap_scroll_m
		{
		
width:630px;


text-align:center;
	margin: 0 auto;
	padding: 0;
	

overflow: hidden;
}
		
/* »ó´ã Åé */

.frame_mb2_sang {

    width:100%;

	line-height: 250px;
	overflow: hidden;
}
.frame_mb2_sang ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame_mb2_sang ul li {
	float: left;
	width: 70px;
	height: 100%;
	margin: 0;
	padding: 0;
	
	background: #ffffff;
	
	border:#EFEFEF solid 1px;
	
	color: #ddd;
	
	text-align: center;
	cursor: pointer;

	
}
.frame_mb2_sang ul li.active {
	color: #fff;
	background: #ededed;
}


/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_mb2_sang ul li img {

	width: 70px;	
	border: #dddddd solid 0px;
	padding:0;
		
}






}



@media (min-width:960px)  {  /*-------ÇǽùöÀü Á¦ÀÏ Å« ¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª*/

		

.wrap_scroll_m
		{
		
width:750px;


text-align:center;
	margin: 0 auto;
	padding: 0;
	

overflow: hidden;
}
		
/* »ó´ã Åé */

.frame_mb2_sang {

    width:100%;

	line-height: 250px;
	overflow: hidden;
}
.frame_mb2_sang ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame_mb2_sang ul li {
	float: left;
	width: 78px;
	height: 100%;
	margin: 0;
	padding: 0;
	
	background: #ffffff;
	
	border:#EFEFEF solid 1px;
	
	color: #ddd;
	
	text-align: center;
	cursor: pointer;

	
}
.frame_mb2_sang ul li.active {
	color: #fff;
	background: #ededed;
}


/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_mb2_sang ul li img {

	width: 78px;	
	border: #dddddd solid 0px;
	padding:0;
		
}








}





	


	
	
	
					

/* Frame_bbs */
.frame_bbs {

 width:100%;
 
	height: 254px;
	line-height: 250px;
	overflow: hidden;
}
.frame_bbs ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}


.frame_bbs ul li {
	float: left;
	width: 236px;
	height: 98%;
	margin: 0 3px 0 0;
	padding: 0;
	
		
	background: #fcfcfc;
	color: #ddd;	
	cursor: pointer;
	border: #e2e2e2 solid 1px;
	

}



/* Frame_bbs */
.frame_bbs0 {
	height: 244px;
	line-height: 180px;
	overflow: hidden;
}
.frame_bbs0 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}


.frame_bbs0 ul li {
	float: left;
	width: 236px;
	height: 98%;
	margin: 0 3px 0 0;
	padding: 0;
	
		
	background: #fcfcfc;
	color: #ddd;	
	cursor: pointer;
	border: #e2e2e2 solid 1px;
	

}






/* Frame_bbs */
.frame_bbs07 {
	height: 410px;
	line-height: 180px;
	overflow: hidden;
}
.frame_bbs07 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}


.frame_bbs07 ul li {
	float: left;
	width: 238px;
	height: 98%;
	margin: 0 8px 0 0;
	padding: 0;
	
		
	background: #fcfcfc;
	color: #ddd;	
	cursor: pointer;
	border: #e2e2e2 solid 0px;
	

}











/* ¿µµµ°¡ °Ô½ÃÆÇ Á¦¸ñ */


.tt { 
 
    font-family:'Segoe UI',Meiryo,'Trebuchet MS','³ª´®°íµñ',NanumGothic,ng,'¸¼Àº °íµñ','Malgun Gothic','µ¸¿ò',Dotum,AppleGothic,sans-serif;   
    font-size:13px; 
    font-weight:bold; 
    color:#04A1A5;
    line-height:200%; 
    letter-spacing:-1px;
    padding: 5px 0px 0px 10px ;
    
     }
     









/* frame_small ¿µµµ°¡*/
.frame_small {
	height: 78px;
	line-height: 100px;
	overflow: hidden;
}
.frame_small ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}



.frame_small ul li {
	float: left;
	width: 84px;
	height: 100%;
	margin: 0 5px 0 0;
	padding: 0;
	/*
	background: #333;
	
	¿¬Çϴûö 
	background: #99def6;
	
	*/
	
	background:;

	color: red;
	
	text-align: center;
	cursor: pointer;
	
	border:#96d0e0 solid 0px;
	
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	
	/* µÕ±Ù°¢ border-radius:10px  
	
	 */
	
	/* µ¿±×¶þ°Ô  */
	
    border-radius:50%;
	
	text-align: center;
	
	
	
}
.frame_small ul li.active {
	color: #fff;
	
	/* background: #66ccff;*/
	
}



/*¿µµµ°¡ À̹ÌÁöÅ©±â Ãß°¡*/

.frame_small ul li img {

	width: 60px;	
	border: #dddddd solid 0px;
	/* µ¿±×¶þ°Ô  */
	border-radius:50%		
}





/* Scrollbar 
.scrollbar {
*/
/*
	margin: 0 0 1em 0;
	height: 2px;
	background: #ccc;
	line-height: 0;

	
	margin: 0 0 0.5em 0;
	height: 2px;
	background: #ccc;
	line-height: 0;
	
}
*/



/* ½ºÅ©·Ñ¹Ù ¹ÝÀÀÇü ¿µµµ°¡ */

@media (max-width:400px) {  /* ÃÖ´ë 400 ------------ */



.scrollbar {
	margin: 0 0 0.5em 0;
	height: 1px;
	background: #f4f4f4;
	line-height: 0;
	width:100%;		}



.scrollbar .handle {
	width: 100px;
	height: 2px;
	background: #dbdbdb;
	cursor: pointer; }

.scrollbar .handle .mousearea {

	/* */
	
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px; 	}






/* Pages */
.pages {


	/*list-style: none;
	margin: 10px 0;
	padding: 0;
	text-align: center;
	*/
	
	list-style: none;
	margin: 5px 0;
	padding: 0;
	text-align: center;
	
	
}


	

	
.pages li {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 2px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #CCE0EA;
	/* Å׵θ® °¨Ãã  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); */
}



    
}


@media (min-width:401px) and (max-width:639px) {   /* ÃÖ¼Ò 401 ~ 639 -------- */



.scrollbar {
	margin: 0 0 0.5em 0;
	height: 1px;
	background: #f4f4f4;
	line-height: 0;
	width:100%;		}



.scrollbar .handle {
	width: 100px;
	height: 2px;
	background: #dbdbdb;
	cursor: pointer; }

.scrollbar .handle .mousearea {

	/* */
	
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px; 	}






/* Pages */
.pages {
	list-style: none;
	margin: 10px 0;
	padding: 0;
	text-align: center;
}


	

	
.pages li {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 2px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #CCE0EA;
	/* Å׵θ® °¨Ãã  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); */
}





    
}



@media (min-width:640px) and (max-width:960px) {  /* ÃÖ¼Ò 640 ~ 1024 ---------- */



.scrollbar {
	margin: 0 0 0.5em 0;
	height: 1px;
	background: #f4f4f4;
	line-height: 0;
	width:100%;		}



.scrollbar .handle {
	width: 100px;
	height: 2px;
	background: #dbdbdb;
	cursor: pointer; }

.scrollbar .handle .mousearea {

	/* */
	
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px; 	}





/* Pages */
.pages {
	list-style: none;
	margin: 7px 0;
	padding: 0;
	text-align: center;
}


	

	
.pages li {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 3px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #CCE0EA;
	/* Å׵θ® °¨Ãã  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); */
}


		
		

}



@media (min-width:960px)  {  /*-------ÇǽùöÀü Á¦ÀÏ Å« ¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª*/


.scrollbar {
	margin: 0 0 0.5em 0;
	height: 1px;
	background: #f4f4f4;
	line-height: 0;
	width:100%;		}



.scrollbar .handle {
	width: 100px;
	height: 2px;
	background: #dbdbdb;
	cursor: pointer; }

.scrollbar .handle .mousearea {

	/* */
	
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px; 	}
	
	
	
	
	
	

/* Pages */
.pages {
	list-style: none;
	margin: 5px 0;
	padding: 0;
	text-align: center;
}


	

	
.pages li {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 2px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #CCE0EA;
	/* Å׵θ® °¨Ãã  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); */
}





	
	
}















.pages li:hover {
	background: #006697;
}
.pages li.active {
	background: #006697;
}

/* Controls */
.controls { margin: 25px 0; text-align: center; }

/* One Item Per Frame example*/
.oneperframe { height: 300px; line-height: 300px; }
.oneperframe ul li { width: 1140px; }
.oneperframe ul li.active { background: #333; }

/* Crazy example */
.crazy ul li:nth-child(2n) { width: 100px; margin: 0 4px 0 20px; }
.crazy ul li:nth-child(3n) { width: 300px; margin: 0 10px 0 5px; }
.crazy ul li:nth-child(4n) { width: 400px; margin: 0 30px 0 2px; }

/* Effects */
.effects {
	height: 200px;
	line-height: 200px;
	-webkit-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
	-webkit-perspective-origin: 50% 50%;
	-ms-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	overflow-y: show;
}
.effects ul {
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.effects ul li {
	position: relative;
	margin: 0 -20px;
	-webkit-transform: rotateY(60deg) scale(0.9);
	-ms-transform: rotateY(60deg) scale(0.9);
	transform: rotateY(60deg) scale(0.9);
	-webkit-transition: -webkit-transform 300ms ease-out;
	transition: transform 300ms ease-out;
}
.effects ul li.active {
	z-index: 10;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.effects ul li.active ~ li {
	-webkit-transform: rotateY(-60deg) scale(0.9);
	-ms-transform: rotateY(-60deg) scale(0.9);
	transform: rotateY(-60deg) scale(0.9);
}