
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);	
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);



* { margin:auto; padding: 0; vertical-align: top; }
li { list-style: none; }
a { text-decoration: none; }
a:hover{ text-decoration:none; cursor:pointer; }
img { border: 0; max-width: 100%; margin: 0 auto; box-sizing: border-box;}
body { background: #FFF; font-family: 'Nanum Gothic', Tahoma,'Jeju Gothic',"Malgun Gothic", Qrial, sans-serif;  }

article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { 

    display:block;

 }




/* #header */

#header{ width: 100%; height: auto; margin:0 auto; }


#logo { width: 100%; height: 110px; text-align: center; border-top: 10px solid #66cccc;}
.logo_main { padding-top: 20px; }
.logo_main a { width: 100%; font-size: 2em; color: #336699; font-weight: bolder; letter-spacing : .3em; word-spacing: 2px;  }/*25px-1.563em변환*/
.logo_sub a { width: 100%; font-size: 1.25em; color: #33999; font-weight: bold; }

#logo2 {display: none; width: 100%; height: 60px;  overflow: hidden;border-top: 5px solid #66cccc; }
.logo2_button { float: left; width: 20%; margin-top: 10px; } 
.logo2_text {float: left; width: 80%; left: 0 ; }
.logo2_main { padding-top: 20px; box-sizing:border-box; }
.logo2_main a { width: 100%; font-size: 1.5em; color: #336699; font-weight: bolder;  margin-left: 8%; letter-spacing : .1em;}/*25px-1.563em변환*/








#nav { width:100%; height: auto; overflow:hidden; background: #FFABD8;   }

#nav_1 { float:left; width:20%; }
#nav_2 { float:left; width:20%; }
#nav_3 { float:left; width:20%; }
#nav_4 { float:left; width:20%; }
#nav_5 { float:left; width:20%; }
#nav_1 > a, #nav_2 > a, #nav_3 > a, #nav_4 > a, #nav_5 > a { display:block; height: 50px; line-height: 50px; font-size: 1.15em; color: #000; text-align: center;  font-weight:bolder;}
#nav_1 a:hover, #nav_2 a:hover, #nav_3 a:hover, #nav_4 a:hover, #nav_5 a:hover { color: #FF0000; }


#nav_sub1 { float:none; width:20%; height: auto; position: absolute; z-index: 999 }
#nav_sub2 { float:none; width:20%; height: auto; position: absolute; z-index: 999 }
#nav_sub3 { float:none; width:20%; height: auto; position: absolute; z-index: 999 }
#nav_sub4 { float:none; width:20%; height: auto; position: absolute; z-index: 999 }
#nav_sub5 { float:none; width:20%; height: auto; position: absolute; z-index: 999 }
#nav_sub1 li, #nav_sub2 li, #nav_sub3 li, #nav_sub4 li, #nav_sub5 li { display: none; width: 100%; height: 30px; background:#8041D9}
#nav_sub1 li a, #nav_sub2 li a, #nav_sub3 li a, #nav_sub4 li a, #nav_sub5 li a { overflow:hidden; white-space : nowrap;  text-overflow : ellipsis;   display: block; height: 30px; line-height: 30px; font-size: 1em; color: #FFF; text-align: center; }
#nav_sub1 li a:hover, #nav_sub2 li a:hover, #nav_sub3 li a:hover, #nav_sub4 li a:hover, #nav_sub5 li a:hover { color: #000000 ;}


#side_nav { display: block; width: 240px; height: 100%; margin: 0 auto; padding-top: 20px;  position: absolute; z-index: 999; top: 0; left:-300px; background:#66cccc;	}

.snav_no { text-align: right; margin-right: 5px; }

h1 { font-size: 1.250em; line-height: 1.7em; margin-bottom: 20px; font-weight: bold; letter-spacing: -0.03em; color: #E47FE8; text-shadow:1px 1px 1px rgb(0,0,0); behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc'); text-align: center;}
#snav {display: block; width: 234px; margin: 0 auto; background: #339999;}
#snav > li > a { display: block; padding: 16px 18px; font-size: 1em; color: #FFF; text-decoration: none; border-bottom: 1px solid #212121;
				}
#snav > li > a:hover, #nav > li > a.open { color: #FFF;border-bottom-color: #384f76; background-color: #FFE400; }
#snav li ul { display: none; background: #ff6666; }
#snav li ul li a { display: block; background: none; padding: 10px 0px; padding-left: 30px; font-size: 0.875em; text-decoration: none; font-weight: bold; color: #FF000; }
#snav li ul li a:hover { background: #ffcc66; }

#full {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 800; background: transparent;  display:none;}





/* #top_img */


#top_img { width: 100%; height: auto; }
#mtop_img { display: none; width: 100%; height: auto; }
#main_img { width: 100%; height: auto;  }
#top_banner { width: 100%; height: 40px; text-align: center; background:#66cccc }
#top_banner a { display:block; width: 100%; height: 40px; line-height: 40px;  color: #33999; font-weight: bolder; letter-spacing : .3em; word-spacing: 2px; }



/* #contents */


#contents {  width: 1200px; height: auto; margin:0 auto; text-align: center;  }

/*#main_banner {width: 1200px; height: 237px;   margin-bottom: 10px; overflow:hidden;   }


	.top_bn1 { float: left; width: 25%; height: 200px; margin-top:10px ; margin-right:1%; webkit-box-sizing: border-box;box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border: 5px solid #ffcc66; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc');}
		.top_bn1 ul {float: none; width: 100%; height: 180px; text-align: center; }
		.top_bn1 ul li {width: 90%; margin: 5%;}
			.bn1_text1 {height: 30px; border-bottom: 1px dashed #333;}
			.bn1_text1 a { font-size: 1.125em; font-weight: bold; color: #333;  }
			.bn1_text2 a { font-size: 2.000em; font-weight: bolder; font-style: italic; color: #FF0000; }
			.bn1_text3 a { font-size: 1.125em; font-weight: bolder; color: #333; }
			.bn1_text4 a { font-size: 0.625em; font-weight: bold; color: #333; }


	.top_bn2 { float: left; width: 48%; height: 200px; margin-top:10px ;  overflow:hidden;  }
		.bn2_text1 { float: left; width: 32%; height: 180px; margin-top:10px ; margin-bottom: 10px ;  margin-right: 2%; text-align: center; background: #ffcc66; border-radius: 50%;-moz-border-radius: 50%; -webkit-border-radius: 50%; behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc');}		

		.bn2_text2 { float: left; width: 32%; height: 178px; margin-top:10px ; margin-bottom: 10px ;  text-align: center; background: #ffcc66; border-radius: 50%;-moz-border-radius: 50%; -webkit-border-radius: 50%; behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc');}

		.bn2_text3 { float: right; width: 32%; height: 178px; margin-top:10px ; margin-bottom: 10px ; margin-left: 2%; text-align:center;background: #ffcc66; border-radius: 50%;-moz-border-radius: 50%; -webkit-border-radius: 50%; behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc');}

			.bn2_toptext a {display: block;font-size: 1.225em; color : #0030DB; font-weight: bold; padding-top: 65px; margin-bottom: 5px;}
			.bn2_btmtext a {display: block;font-size: 1em; color : #FF0000; font-weight: bold; }


	.top_bn3 { float: right ; width: 25%; height:200px; margin-top:10px ;   margin-left: 1%; webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border: 5px solid #ffcc66; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc');}
		.top_bn3 ul {float: none; width: 100%; height: 180px; text-align: center; }
		.top_bn3 ul li {width: 90%; margin: 5%;}
			.bn3_text1 {height: 30px; border-bottom: 1px dashed #333;}
			.bn3_text1 a { font-size: 1.125em; font-weight: bold; color: #333; }
			.bn3_text2 a { font-size: 1em; font-weight: bolder; color: #333; }
			.bn3_text3 a { font-size: 1em; font-weight: bolder; color: #FF0000; }
			.bn3_text2_1 { display: none; font-size: 1em; font-weight: bolder; color: #333;  }*/




#banner_box { width: 1200px; height: auto; text-align: center; margin-top: 20px; overflow: hidden; }



/* 1 */

#bn01 {float: left; width: 31%; height: 240px; margin-right: 3.5%;  margin-bottom: 40px; }
.bn01_a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc;  text-align: left; overflow:hidden;}
.bn01_a01 {float:left; width: 70%; height: 35px;  }
.bn01_a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px; font-weight: bolder; color: #333; }
.bn01_a02 {float:left; width: 30%; height: 33px;  }
.bn01_a02 a { display:block; height:33px; line-height: 33px; text-indent: 50%; font-weight: bold; color: #333;  font-size: 0.688em; }
.bn01_b { width: 90%; height: 125px; margin-top: 5px; margin-bottom: 5px; }


/* 2 */

#bn02 {float: left; width: 31%; height: 240px; margin-right: 3.5%;  margin-bottom: 40px;  }
.bn02_a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc;	text-align: left; overflow:hidden;}
.bn02_a01 {float:left; width: 70%; height: 35px;   }
.bn02_a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px; font-weight: bolder; color: #333; }
.bn02_a02 {float:left; width: 30%; height: 33px;  }
.bn02_a02 a { display:block; height:33px; line-height: 33px; text-indent: 50%; font-weight: bold; color: #333;  font-size: 0.688em; }
.bn02_b { width: 90%; height: 125px; margin-top: 5px; margin-bottom: 5px; }


/* 3 */

#bn01_1 {float: right; width: 31%; height: 240px;  margin-bottom: 40px; }
.bn01_1a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc;  text-align: left; overflow:hidden; }
.bn01_1a01 {float:left; width: 70%; height: 35px;  }
.bn01_1a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px; font-weight: bolder; color: #333; }
.bn01_1a02 {float:left; width: 30%; height: 33px;  }
.bn01_1a02 a { display:block; height:33px; line-height: 33px; text-indent: 50%; font-weight: bold; color: #333;  font-size: 0.688em; }
.bn01_1b { width: 90%; height: 125px;margin-top: 20px; margin-bottom: 5px; }
.bn01_1b a { width: 90%; height: 125px; margin-top: 5px; margin-bottom: 5px; font-size: 14px; }
.bn1_text2 a { font-size: 2.5em; font-weight: bolder; font-style: italic; color: #FF0000;line-height: 150%; }
.bn1_text3 a { font-size: 1.5em; font-weight: bolder; color: #333;line-height: 150%; }
.bn1_text4 a { font-size: 0.825em; font-weight: bold; color: #333; line-height: 150%;}



/* 4 */

#bn03 {float: left; width: 31%; height: 240px; margin-right: 3.5%; margin-bottom: 40px;}
.bn03_a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc;	text-align: left; overflow:hidden;}
.bn03_a01 {float:left; width: 70%; height: 35px;   }
.bn03_a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px; font-weight: bolder; color: #333; }
.bn03_a02 {float:left; width: 30%; height: 33px;  }
.bn03_a02 a { display:block; height:33px; line-height: 33px; text-indent: 50%; font-weight: bold; color: #333;  font-size: 0.688em; }
.bn03_b { width: 90%; height: 125px; margin-top: 5px; margin-bottom: 5px; }


/* 4-1*/
#bn03_2 { display: none; float: left; width: 31%; height: 240px; margin-right: 3.5%;  margin-bottom: 40px; }
.bn03_2a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc;  text-align: left; overflow:hidden;}
.bn03_2a01 {float:left; width: 70%; height: 35px;  }
.bn03_2a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px; font-weight: bolder; color: #333; }
.bn03_2a02 {float:left; width: 30%; height: 33px;  }
.bn03_2a02 a { display:block; height:33px; line-height: 33px; text-indent: 50%; font-weight: bold; color: #333;  font-size: 0.688em; }
.bn03_2b { width: 90%; height: 125px; margin-top: 20px; margin-bottom: 5px; }
.bn03_2b a { width: 90%; height: 125px; margin-top: 5px; margin-bottom: 5px; font-size: 14px; }
.bn3_text1 a { font-size: 1.125em; font-weight: bold; color: #333; }
			.bn3_text2 a { font-size: 1em; font-weight: bolder; color: #333; line-height: 120%; }
			.bn3_text3 a { font-size: 1em; font-weight: bolder; color: #FF0000; line-height: 120%;}
			.bn3_text2_1 { display: none; font-size: 1em; font-weight: bolder; color: #333; line-height: 120%; }



/* 5 */

#bn02_1 {float: right; width: 65.5%; height: 240px; margin-bottom: 40px; }
.cf_wrapper { position: relative; }	
.cf_element { width: 100%; height: 280px; background-color: #FFF844; webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border: 5px ridge #333;    text-align: center; }	
.cf_element .content { padding: 10px; }
.cf_element .content h3 {font-weight: bolder; line-height: 150%; padding-top: 0; margin-top: 25px; font-size: 80px; color: #FF0000; font-family:'Myriad Pro', Verdana, Arial, Helvetica, sans-serif;letter-spacing:5px; text-align:center; letter-spacing:-2px;
	 text-shadow:  1px 1px 0 #E82C0C, 2px 2px 0 #FFB0F9, 2px 2px 0 #333, 3px 3px 0 #333, 3px 3px 0 #333, 3px 3px 0 #333,
	 /* The Blur - optional */ 5px 5px 15px #999 ; 
	/* Transform Effect */
	-webkit-transition: all 0.12s ease-out;		/* Safari & Chrome */
   	-moz-transition: all 0.12s ease-out;		/* Firefox */
  	-o-transition: all 0.12s ease-out;			/* Opera */}
.cf_element .content p { font-weight: bold; font-size: 55px; color:#333;font-family:'Myriad Pro', Verdana, Arial, Helvetica, sans-serif;letter-spacing:5px; text-align:center; letter-spacing:-2px;
	}



/* 6 */

#bn03_1 {float: left; width: 31%; height: 240px; margin-right: 3.5%;  margin-bottom: 40px; }
.bn03_1a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc;  text-align: left; overflow:hidden;}
.bn03_1a01 {float:left; width: 70%; height: 35px;  }
.bn03_1a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px; font-weight: bolder; color: #333; }
.bn03_1a02 {float:left; width: 30%; height: 33px;  }
.bn03_1a02 a { display:block; height:33px; line-height: 33px; text-indent: 50%; font-weight: bold; color: #333;  font-size: 0.688em; }
.bn03_1b { width: 90%; height: 125px; margin-top: 20px; margin-bottom: 5px; }
.bn03_1b a { width: 90%; height: 125px; margin-top: 5px; margin-bottom: 5px; font-size: 14px; }
.bn3_text1 a { font-size: 1.125em; font-weight: bold; color: #333; }
			.bn3_text2 a { font-size: 1em; font-weight: bolder; color: #333; line-height: 120%; }
			.bn3_text3 a { font-size: 1em; font-weight: bolder; color: #FF0000; line-height: 120%;}
			.bn3_text2_1 { display: none; font-size: 1em; font-weight: bolder; color: #333; line-height: 120%; }


/* 7 */

#bn04 {float: left; width: 31%; height: 240px;  margin-right: 3.5% ; margin-bottom: 40px;}
.bn04_a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc; text-align: left; overflow:hidden;}
.bn04_a01 {float:left; width: 70%; height: 35px;  text-align: left; }
.bn04_a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px;  font-weight: bolder; color: #333;  }
.bn04_a02 {float:left;  width: 30%; height: 33px; text-align: left; }
.bn04_a02 a { display:block; height:33px; line-height: 33px; text-indent: 50%; font-weight: bold; color: #333;  font-size: 0.688em; }
.bn04_b { width: 90%; height: 190px; margin-top: 5px; margin-bottom: 10px; 	}



/* 8 */

#bn05 {float: right; width: 31%; height: 240px; margin-bottom: 40px;}
.bn05_a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc; text-align: left; overflow:hidden;}
.bn05_a01 {float:left; width: 70%; height: 35px;  text-align: left; }
.bn05_a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px; font-weight: bolder; color: #333;  }
.bn05_a02 {float:left;  width: 30%; height: 33px; text-align: left; }
.bn05_a02 a { display:block; height:33px; line-height: 33px; text-indent: 50%; font-weight: bold; color: #333;  font-size: 0.688em; }
.bn05_b { width: 90%; height: 190px; margin-top: 5px; margin-bottom: 5px; }



/* 9 */

#bn04_1 {float: left; width: 31%; height: 240px;  margin-right: 3.5% ; margin-bottom: 40px;}
.bn04_1a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc; text-align: left; overflow:hidden;}
.bn04_1a01 {float:left; width: 70%; height: 35px;  text-align: left; }
.bn04_1a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px;  font-weight: bolder; color: #333;  }
.bn04_1a02 {float:left;  width: 30%; height: 33px; text-align: left; }
.bn04_1a02 a { display:block; height:33px; line-height: 33px; text-indent: 50%; font-weight: bold; color: #333;  font-size: 0.688em; }
.bn04_1b { width: 90%; height: 190px; margin-top: 5px; margin-bottom: 10px; 	}



/* 10 */

#bn05_1 {float: left; width: 31%; height: 240px; margin-right: 3.5% ; margin-bottom: 40px;}
.bn05_1a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc; text-align: left; overflow:hidden;}
.bn05_1a01 {float:left; width: 70%; height: 35px;  text-align: left; }
.bn05_1a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px; font-weight: bolder; color: #333;  }
.bn05_1a02 {float:left;  width: 30%; height: 33px; text-align: left; }
.bn05_1a02 a { display:block; height:33px; line-height: 33px; text-indent: 50%; font-weight: bold; color: #333;  font-size: 0.688em; }
.bn05_1b { width: 90%; height: 190px; margin-top: 5px; margin-bottom: 5px; }



/* 11 */

#bn06 {float: right; width: 31%; height: 240px; margin-bottom: 40px;  position: relative;}
.bn06_a {  width: 100%; height: 35px; margin-top: 5px; border-bottom: 3px solid #66cccc;	text-align: left; overflow:hidden;}
.bn06_a a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px; font-weight: bolder; color: #333;  }
.bn06_b { width: 90%; height: 160px; margin-top: 5px; margin-bottom: 5px; }
.bn06_b iframe { width: 90%; height: 190px ; position:absolute; left: 5%; }


/* 12 */

#bn07 {float: left; width: 100%; height: 321px;  margin-bottom: 70px;}
.bn07_a {  width: 100%; height: 30px; margin-top: 5px; border-bottom: 3px solid #66cccc;	text-align: left; overflow:hidden;}
.bn07_a01 {float:left; width: 70%; height: 35px;  text-align: left; }
.bn07_a01 a { display:block; height:35px; line-height: 35px; text-indent: 6%; font-size: 18px; font-weight: bolder; color: #333; }
.bn07_a02 {float:left;  width: 30%; height: 33px; text-align: left; }
.bn07_a02 a { display:block; height:33px; line-height: 33px;  font-weight: bold; color: #333;  font-size: 0.688em; text-indent: 80%;}
.bn07_b { width: 90%; height: 266px; margin-top: 10px; margin-bottom: 10px; }




/* footer */

#footer {  width: 100%; background: #66cccc ; overflow:hidden; text-align: center;  margin-top: 20px;  border-top: 0.5px solid #D5D5D5; margin:0 auto; text-align:center;  }
#btm_logo { float:left; width: 34%;   }
#btm_logo a {display:block; color: #342436; font-weight:bolder; ; font-size: 2em; padding: 1em;}
#btm_add { float:left; width: 66%;  }
.btm_tel { padding: 1em; }
.btm_tel a {  color: #342436; font-size: 1.5em; font-style: italic; font-weight:bolder; }
.btm_text a { font-size: 0.75em; color: #333; }
.btm_add a { color: #342436; font-size: 1em; font-style: italic; font-weight:bolder; }

#btm_text { float:left; width:100%; height: 20px; overflow: none; }
#btm_text a {display:block;  color: #333; font-size: 0.65em; }










/*모바일 상단배너

.top_bn2_1 { display: none; width: 100%; height: 80px;  ;  overflow:hidden; background:#66cccc;}
	.bn2_1_text1 { float: left; width: 30%; height: 60px;  margin-right: 2.5% ; margin-left: 2.5% ; margin-top:10px; text-align: center; background: #A0CEFF; border-radius: 50%; behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc'); }

	.bn2_1_text2 { float: left; width: 30%; height: 60px;  margin-right: 2.5% ; margin-top:10px; text-align: center;  background: #FFABD8; border-radius: 50%; behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc'); }
	
	
	.bn2_1_text3 { float: left; width: 30%; height: 60px;  text-align: center; margin-right: 2.5% ; margin-top:10px; background: #FFCC66; border-radius: 50%; behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc');}

	.bn2_1_toptext a {display: block;font-size: 1.15em; color : #000; font-weight: bold; margin-top:10px;}
	.bn2_1_btmtext a {display: block;font-size: 1em; color : #000; font-weight: bold; }*/







/*모바일 중간 배너*/

#nav_banner { display: none; width: 98%; hight: 200px; text-align: center; overflow: hidden; margin-top: 10px; margin-bottom: 5px;}

.nav_bn1 { float:left; width: 33% ; height: 100px; margin-right: 0.5%; margin-bottom: 2px;  background: #F0A5EC;}
.nav_bn1 a { font-size: 1.25em; color: #FFF; height: 100px; line-height: 100px; font-weight: bolder; }

.nav_bn2 { float:left; width: 33% ; height: 100px; margin-right: 0.5%; margin-bottom: 2px; background: #BDF0A5; }
.nav_bn2 a { font-size: 1.25em; color: #4505B2; height: 100px; line-height: 100px; font-weight: bolder; }

.nav_bn3 { float:left; width: 33% ; height: 100px; background: #FF8085; }
.nav_bn3 a { font-size: 1em; color: #FFF; height: 100px; line-height: 100px; font-weight: bolder;}

.nav_bn4 { float:left; width: 33% ; height: 100px; margin-right: 0.5%; margin-bottom: 2px; background: #6FBDB3; }
.nav_bn4 a { font-size: 1.25em; color: #4505B2; height: 100px; line-height: 100px; font-weight: bolder;}


.nav_bn5 { float:left; width: 33% ; height: 100px; margin-right: 0.5%; background: #ae48a0; }
.nav_bn5 a { font-size: 1.25em; color: #FFF; height: 100px; line-height: 100px; font-weight: bolder; }


.nav_bn6 { float:left; width: 33% ; height: 100px; background: #ffff48; }
.nav_bn6 a { font-size: 1.25em; color: #4505B2; height: 100px; line-height: 100px;font-weight: bolder; }






@media screen and (max-width: 1200px) { 
	#contents {width: 100%; }
	#main_banner {width: 100%;}

	.top_bn1 { width: 24%; margin-right:1%; margin-left: 1%; }

	.top_bn3 {width: 24%;  margin-left: 1%; margin-right:1%; }
		
	
	#banner_box{ width: 95%;}
	.btmadd_text {font-size: 12px;}

	}





@media screen and (max-width: 1024px) {

	#contents {width: 100%; }	

		/*.bn2_text1 { height: 150px;}					
		.bn2_text2 { height: 150px;}						
		.bn2_text3 { height: 150px;}					
		.bn2_toptext a {display: block;font-size: 1.125em; color : #0030DB; font-weight: bold; padding-top: 50px;margin-bottom: 3px;}
		.bn2_btmtext a {display: block;font-size: 0.938em; color : #FF0000; font-weight: bold; }*/



	#banner_box a {  text-shadow: none;}
	
	#bn01{ height: 200px; border:0; }
	#bn02{ height: 200px; border:0; }
	#bn01_1
	
	#bn03   { border:0;  border-top:1px dotted #D5D5D5;}
	#bn02_1 {	}
		.cf_element .content h3 { font-size: 65px;}
		.cf_element .content p { font-size: 45px;}

	#bn03_1 { height: 200px; border:0; }	
	#bn04   { height: 200px; border:0; border-top: 1px dotted #D5D5D5;}
	#bn05   { height: 200px; border:0; border-top: 1px dotted #D5D5D5;}

	#bn04_1 { height: 200px; border:0; border-top: 1px dotted #D5D5D5;}
	#bn05_1 { height: 200px; border:0; border-top: 1px dotted #D5D5D5;}
	#bn06   { height: 200px; border:0; border-top: 1px dotted #D5D5D5;}


	#bn07   { height: 200px; border:0; border-top: 1px dotted #D5D5D5;}
	#bn08   { height: 200px; border:0; border-top: 1px dotted #D5D5D5;}		
	

	

		.bn01_b { border:0;}
		.bn02_b { border:0;}
		.bn01_1b { border:0;}

		.bn03_b { border:0;}
		.bn02_1b 
			.bn1_text2 a{ color : #FF000;}

		.bn03_1b 
		.bn04_b { height: 160x; border:0;}
		.bn05_b { height: 160x; border:0;}

		.bn04_1b { border:0;}
		.bn05_1b { border:0;}
		.bn06_b  { height: 160x; border:0;}
		.bn06_b iframe { width: 90%; height: 160px ;border:0; }

		.bn07_b  { height: 160x;border:0; }



	#footer {width: 100%; border-top: 1px dotted #D5D5D5; }
	
	.btmadd_text {display:none;}
}



@media screen and (max-width: 950px) {
		
		#top_banner { width: 100%; height: 45px;}
		#top_banner a { display:block; width: 100%; height: 45px; line-height: 45px; font-size: 14px; }



		/*
		.bn2_toptext a {display: block;font-size: 1em; color : #0030DB; font-weight: bold; padding-top: 50px;margin-bottom: 3px;}
		.bn2_btmtext a {display: block;font-size: 0.825em; color : #FF0000; font-weight: bold; }
		

		.bn2_text1 {height: 130px; margin-top: 20px; }
		.bn2_text2 {height: 130px; margin-top: 20px; }
		.bn2_text3 {height: 130px; margin-top: 20px; }

		.bn3_text1 a {font-size: 18px; }
		.bn3_text2 a {font-size: 12px; }
		.bn3_text3 a {font-size: 14px; }
		*/

		.cf_element .content h3 { font-size: 65px;}
		.cf_element .content p { font-size: 45px;}

}





@media screen and (max-width: 850px) {

		.cf_element .content h3 { font-size: 65px;}
		.cf_element .content p { font-size: 45px;}

}




/* 768px */

@media screen and (max-width: 768px) {

	#hearder {font-size: 14px;}
	#contents{font-size: 15.5px;}
	

	img { box-sizing: border-box; }


	#main_banner {height:auto;}	
	#top_banner { width: 100%; height: 30px;}
	#top_banner a { display:block; width: 100%; height: 30px; line-height: 30px; font-size: 12px; }

	
	
	#nav_1 { float:left; width:20%; }
	#nav_2 { float:left; width:22%; }
	#nav_3 { float:left; width:21%; }
	#nav_4 { float:left; width:20%; }
	#nav_5 { float:left; width:17%; }
		
	#nav_1 > a, #nav_2 > a, #nav_3 > a, #nav_4 > a, #nav_5 > a { font-size: 14px; }

	#nav_sub1 li, #nav_sub2 li, #nav_sub3 li, #nav_sub4 li, #nav_sub5 li { background:rgba(120, 18, 106, 0.5)}
	#nav_sub1 { width:25%;  font-size: 12px; margin-left:-15px;}
	#nav_sub2 { width:27%;  font-size: 12px; margin-left:-10px;}
	#nav_sub3 { width:26%;  font-size: 12px; margin-left:-10px;}
	#nav_sub4 { width:25%;  font-size: 12px; margin-left:-10px;}
	#nav_sub5 { width:22%;  font-size: 12px; margin-left:-15px;}


	/*
	#main_banner {width: 100% ;  margin-left: 0; border-radius: 0; background: none; margin-bottom: 2px;}
		.top_bn2 {display: none;}
		.top_bn2_1 {display: block; }
			
		.top_bn1 {width: 48%; height: 150px;padding-top: 0;}
			.top_bn1 ul li {margin-top: 10px; margin-bottom: 2%; }	
				.bn1_text1 { height: : 25px; border:none; margin: 0;font-size: 18px;}
				.bn1_text3 { height: : 25px; }
		
		.top_bn3 {width: 48%; height: 150px;padding-top:0;}
			.top_bn3 ul li {margin-top:10px; margin-bottom: 2%; }
				.bn3_text1 { height: : 25px; border:none; margin: 0;font-size: 16px; }
				.bn3_text2_1 {display:block; font-size: 12px;line-height: 120%}
				.bn3_text2 {display: none; }
				.bn3_text3 { font-size: 14px; line-height: 130%}
			
		*/	


	

	#nav_banner {display:block; }


	#bn01 {width: 48%; height: 170px; margin-right: 1%;}
	#bn02 {display:none;}
	#bn01_1 {width: 48%; height: 170px; margin-left: 1%; margin-right: 2%;}

	#bn03 {width: 48%; height: 170px;  margin-right: 1%;}
	#bn03_2 { display: block; width: 48%; height: 170px; margin-left: 1%; margin-right: 2%;}	

	#bn02_1{width: 98%; height: 150px; margin-left: 1%; margin-right: 1%;}
	.cf_element {height: 150px;}
	.cf_element .content h3 {margin-top: 5px; font-size: 45px;}
	.cf_element .content p { line-height: 90%; font-size: 35px;}

	
	#bn03_1 {display: none; width: 48%; height: 170px; margin-left: 1%; margin-right: 2%;}	
	#bn04 {width: 48%; height: 230px; margin-left: 0; margin-right: 1%;}
	#bn05 {width: 48%; height: 230px; margin-left: 1%; margin-right: 2%;}

	#bn04_1 { display:none; }
	#bn05_1 { display:none; }

	#bn06 { display:none; }
	#bn07 {width: 98%; height: 230px; margin-left: 1%; margin-right: 1%;}
	#bn08 {display:none;}



#footer {  }

#btm_logo { width:100%;  }
#btm_logo a { font-size: 1em;}
#btm_add { width: 100%;  }

.btm_tel a { font-size: 0.8em;  }
.btm_text a t {font-size: 0.6em;}
.btm_add a { font-size: 0.5em; }
#btm_text a {font-size: 0.5em; }


	
}



/* 480px */

@media screen and (max-width: 480px) {

	#hearder a {font-size: 12px;}

	

	/*
	.bn2_1_text1 .bn2_1_toptext {margin-top: 15px; }
	.bn2_1_text3 .bn2_1_toptext {margin-top: 15px; }

	.bn2_1_toptext a{font-size: 13px;}
	.bn2_1_btmtext a{font-size: 11px; color: #FF0000;}
	*/
	


	#logo {display: none; }
	#logo2 {display: block; }

	#nav_1 > a, #nav_2 > a, #nav_3 > a, #nav_4 > a, #nav_5 > a { font-size: 12.5px; height: 40px; line-height: 40px; font-weight: bolder;}
	
	#nav_1 > a, #nav_2 > a, #nav_3 > a, #nav_4 > a{webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border-right: 1px solid #FFF;}



	#nav_banner ul li a{font-size: 16px; }

	#mtop_img{display: block;}
	#top_img{display: none}

	#main_banner {width: 100% ;  margin-left: 0; border-radius: 0; background:none; }

	
	


	

	#bn01 {display:none;}
	#bn02 {display:none;}

	#bn01_1 {width: 100%;  margin-left: 0; margin-right: 0;height: auto; margin-bottom: 5px;}
	.bn01_1a01 a { text-indent: 3%;font-size: 16px;}

	#bn03_2 {width: 100%;  margin-left: 0; margin-right: 0;height: auto; margin-bottom: 5px;}
	.bn03_2a01 a{ text-indent: 3%;font-size: 16px;}

	#bn03 {width: 100%;  margin-left: 0; margin-right: 0;height: auto; margin-bottom: 5px;}
	.bn03_a {width: 100% }
	.bn03_a01 a{ text-indent: 3%;font-size: 16px;}

	#bn02_1 {height: 200px;}
	.cf_element {height: 200px;}
	.cf_element .content {margin-top: 20px;}
	.cf_element .content h3 {font-size: 55px;}
	.cf_element .content p {font-size: 35px;}

	#bn04  {height: auto;width: 49%; margin-bottom: 5px;margin-left: 0; }
	.bn04_a01 a {width:150%; font-size: 16px;}
	.bn04_a02  {display:none; }
	.bn04_b {height: auto; }

	#bn05  {height: auto; width: 49%; margin-bottom: 5px;  margin-right: 0;}
	.bn05_a01 a {width:150%; font-size: 16px;}
	.bn05_a02 {display:none; }
	.bn05_b {height: auto; }
	
	#bn06 {display:block; width: 100%; height: auto; margin-left: 0; margin-right: 0;}
	.bn06_a {width:100%}
	.bn06_a a{ text-indent: 3%;font-size: 16px;}
	
	
	#bn07 {width: 100%; margin-left: 0; margin-right: 0; height: auto; margin-bottom: 5px;}
	.bn07_a01 a {font-size: 16px }
	.bn07_a02 a{text-indent: 50%; }
	.bn07_b {height: auto; }


	.bn3_text2_1 {display:none; }
	.bn3_text2 {display: block; }
	.bn1_text1 a {font-size: 20px; }
	.bn1_text2 a {font-size: 20px; }
	.bn1_text4 a {font-size: 13px; letter-spacing:-0.2px;}
	.bn3_text1 a {font-size: 14px;}	
	.bn3_text2 a {font-size: 14px;}
	.bn3_text3 a {font-size: 16px;}




}


/* 400px */

@media screen and (max-width: 400px) {


	.cf_element .content {margin-top: 20px;}
	.cf_element .content h3 {font-size: 42px;}
	.cf_element .content p {font-size: 35px;}

	}


/* 350px */

@media screen and (max-width: 350px) {


	.cf_element .content {margin-top: 20px;}
	.cf_element .content h3 {font-size: 38px;}
	.cf_element .content p {font-size: 28px;}


}