@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;  }





/* #header */

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

#top_banner { width: 100%; height: 60px; text-align: center; background:url("../images/top_bn_img1.png"); background-repeat : repeat-x; }
#top_banner a { display:block; width: 100%; height: 60px; line-height: 60px;  color: #FFF; }
#logo { width: 100%; height: 110px; text-align: center; }
.logo_main { padding-top: 20px; }
.logo_main a { width: 100%; font-size: 2em; color: #FF0000; font-weight: bolder; }/*25px-1.563em변환*/
.logo_sub a { width: 100%; font-size: 1.25em; color: #FF0000; }

#logo2 {display: none; width: 100%; height: 60px;  overflow: hidden; }
.logo2_button { float: left; width: 20%; margin-top: 10px; } 
.logo2_text {float: left; width: 80%; left: 0 ; }
.logo2_main { padding-top: 20px; }
.logo2_main a { width: 100%; font-size: 1.25em; color: #FF0000; font-weight: bolder;  }/*25px-1.563em변환*/








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

#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: 30px; line-height: 30px; font-size:1.5em; color: #000; text-align: center;  font-weight:bold;}
#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: 120px; position: absolute; z-index: 999 }
#nav_sub2 { float:none; width:20%; height: 120px; position: absolute; z-index: 999 }
#nav_sub3 { float:none; width:20%; height: 120px; position: absolute; z-index: 999 }
#nav_sub4 { float:none; width:20%; height: 120px; position: absolute; z-index: 999 }
#nav_sub5 { float:none; width:20%; height: 120px; position: absolute; z-index: 999 }
#nav_sub1 li, #nav_sub2 li, #nav_sub3 li, #nav_sub4 li, #nav_sub5 li { display: none; width: 100%;  background:rgb(120, 18, 106)}
#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: 0.875em; 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: #48FFFF ;}


#side_nav { display: block; width: 240px; height: 100%; margin: 0 auto; padding-top: 20px;  position: absolute; z-index: 999; top: 0; left:-300px; 
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ae48a0+1,540046+31,1c0210+51,78126a+64,ae48a0+76,660058+87,420034+100 */
			background: #ae48a0; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #ae48a0 1%, #540046 31%, #1c0210 51%, #78126a 64%, #ae48a0 76%, #660058 87%, #420034 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #ae48a0 1%,#540046 31%,#1c0210 51%,#78126a 64%,#ae48a0 76%,#660058 87%,#420034 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #ae48a0 1%,#540046 31%,#1c0210 51%,#78126a 64%,#ae48a0 76%,#660058 87%,#420034 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ae48a0', endColorstr='#420034',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

.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: #f7e75c; text-shadow:1px 1px 1px rgb(0,0,0); text-align: center;}
#snav {display: block; width: 234px; margin: 0 auto;  }
#snav > li > a { display: block; padding: 16px 18px; font-size: 1em; color: #FFF; text-decoration: none; border-bottom: 1px solid #212121;
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7a0372+0,8a3a8e+51,5b1f60+100 */
				background: #7a0372; /* Old browsers */
				background: -moz-linear-gradient(top,  #7a0372 0%, #8a3a8e 51%, #5b1f60 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  #7a0372 0%,#8a3a8e 51%,#5b1f60 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  #7a0372 0%,#8a3a8e 51%,#5b1f60 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a0372', endColorstr='#5b1f60',GradientType=0 ); /* IE6-9 */}
#snav > li > a:hover, #nav > li > a.open { color: #FFF;border-bottom-color: #384f76; background-color: #FFE400; }
#snav li ul { display: none; background: #cc0099; }
#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: #FFF; }
#snav li ul li a:hover { background: #FFBB00; }

#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; margin-top:3px;  }



/* #contents */


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

#main_banner {width: 1200px; margin-left:-9px;  margin-bottom: 10px; overflow:hidden; margin: 0 auto; text-align:center; }

	.top_bn2 {width: 90%; margin-top:10px ; margin-bottom: 10px ; margin:0 auto;}

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


#bn01 {float: left; width: 30%; height: 170px; margin-left:2.5%; margin-right: 2.5% ; margin-bottom: 30px;webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:1px solid #D8D8D8;}
.bn01_a { width: 340px; height: 33px; margin-top: 5px; text-align: left; overflow:hidden; background:url("../images/bn_box_img1.png"); background-repeat : no-repeat;}
.bn01_a01 {float:left; width: 70%; height: 33px;   }
.bn01_a01 a { display:block; height:33px; line-height: 33px; text-indent: 6%; font-weight: bold; color: #FFF; }
.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: #FFF;  font-size: 0.688em; }
.bn01_b { width: 90%; height: 125px; margin-top: 5px; margin-bottom: 5px; }


#bn02 {float: left; width: 30%; height: 170px; margin-right: 2.5% ; margin-bottom: 30px;webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:1px solid #D8D8D8;}
.bn02_a { width: 340px; height: 33px; margin-top: 5px; text-align: left; overflow:hidden; background:url("../images/bn_box_img1.png"); background-repeat : no-repeat;}
.bn02_a01 {float:left; width: 70%; height: 33px;   }
.bn02_a01 a { display:block; height:33px; line-height: 33px; text-indent: 6%; font-weight: bold; color: #FFF; }
.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: #FFF;  font-size: 0.688em; }
.bn02_b { width: 90%; height: 125px; margin-top: 5px; margin-bottom: 5px; }


#bn03 {float: left; width: 30%; height: 170px; margin-right: 2.5% ; margin-bottom: 30px;webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:1px solid #D8D8D8;}
.bn03_a { width: 340px; height: 33px; margin-top: 5px; text-align: left; overflow:hidden; background:url("../images/bn_box_img1.png"); background-repeat : no-repeat;}
.bn03_a01 {float:left; width: 70%; height: 33px;   }
.bn03_a01 a { display:block; height:33px; line-height: 33px; text-indent: 6%; font-weight: bold; color: #FFF; }
.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: #FFF;  font-size: 0.688em; }
.bn03_b { width: 90%; height: 125px; margin-top: 5px; margin-bottom: 5px; }


#bn04 {float: left; width: 30%; height: 240px; margin-left:2.5%; margin-right: 2.5% ; margin-bottom: 30px;webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:1px solid #D8D8D8;}
.bn04_a { width: 340px; height: 33px; margin-top: 5px; text-align: left; overflow:hidden; background:url("../images/bn_box_img1.png"); background-repeat : no-repeat;}
.bn04_a01 {float:left; width: 70%; height: 33px;  text-align: left; }
.bn04_a01 a { display:block; height:33px; line-height: 30px;  font-weight: bold; color: #FFF; text-indent: 6%; }
.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: #FFF;  font-size: 0.688em; }
.bn04_b { width: 90%; height: 190px; margin-top: 5px; margin-bottom: 10px; 	}



#bn05 {float: left; width: 30%; height: 240px; margin-right: 2.5% ; margin-bottom: 30px;webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:1px solid #D8D8D8;}
.bn05_a { width: 340px; height: 33px; margin-top: 5px; text-align: left; overflow:hidden; background:url("../images/bn_box_img1.png"); background-repeat : no-repeat;}
.bn05_a01 {float:left; width: 70%; height: 33px;  text-align: left; }
.bn05_a01 a { display:block; height:33px; line-height: 30px;  font-weight: bold; color: #FFF; text-indent: 6%; }
.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: #FFF;  font-size: 0.688em; }
.bn05_b { width: 90%; height: 190px; margin-top: 5px; margin-bottom: 5px; }




#bn06 {float: left; width: 30%; height: 240px; margin-right: 2.5% ; margin-bottom: 30px;  position: relative;webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:1px solid #D8D8D8;}
.bn06_a { width: 340px; height: 33px; margin-top: 5px; text-align: left; background:url("../images/bn_box_img1.png");  background-repeat : no-repeat;}
.bn06_a a { display:block; height:33px; line-height: 33px;  font-weight: bold; color: #FFF; text-indent: 6%; text-shadow:2px 2px 2px #A6A6A6}
.bn06_b { width: 90%; height: 160px; margin-top: 5px; margin-bottom: 5px; }
.bn06_b iframe { width: 90%; height: 190px ; position:absolute; left: 5%; }


#bn07 {float: left; width: 95%; height: 321px; margin-left:2.5%; margin-right: 2.5% ; margin-bottom: 70px;webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:1px solid #D8D8D8;}
.bn07_a { width: 1114px; height: 33px; margin-top: 5px; text-align: left; overflow:hidden; background:url("../images/bn_box_img2.png"); background-repeat : no-repeat; }
.bn07_a01 {float:left; width: 70%; height: 33px;  text-align: left; }
.bn07_a01 a { display:block; height:30px; line-height: 33px;  font-weight: bold; color: #FFF; text-indent: 2%; }
.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: #FFF;  font-size: 0.688em; text-indent: 80%;}
.bn07_b { width: 90%; height: 266px; margin-top: 10px; margin-bottom: 10px; }




/* footer */

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

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








/*모바일 상단배너*/

.top_bn2_1 { display: none; width: 100%; height: 60px;  ; margin-bottom: 10px ; overflow:hidden;}
	.bn2_1_text1 { float: left; width: 33%; height: 60px;  margin-right: 0.5% ; text-align: center;  
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+20,2989d8+50,1e5799+80&1+0,0.8+4,1+19,1+81,0.8+98,1+100 */
	background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(30,87,153,0.8) 4%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 98%, rgba(30,87,153,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(30,87,153,0.8) 4%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 98%,rgba(30,87,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(30,87,153,0.8) 4%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 98%,rgba(30,87,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */}

	.bn2_1_text2 { float: left; width: 33%; height: 60px;  margin-right: 0.5% ; text-align: center;  
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+20,2989d8+50,1e5799+80&1+0,0.8+4,1+19,1+81,0.8+98,1+100 */
	background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(30,87,153,0.8) 4%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 98%, rgba(30,87,153,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(30,87,153,0.8) 4%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 98%,rgba(30,87,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(30,87,153,0.8) 4%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 98%,rgba(30,87,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */}
	
	.bn2_1_text3 { float: left; width: 33%; height: 60px;  text-align: center;  
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+20,2989d8+50,1e5799+80&1+0,0.8+4,1+19,1+81,0.8+98,1+100 */
	background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(30,87,153,0.8) 4%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 98%, rgba(30,87,153,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(30,87,153,0.8) 4%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 98%,rgba(30,87,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(30,87,153,0.8) 4%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 98%,rgba(30,87,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */}

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







/*모바일 중간 배너*/

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

.nav_bn1 { float:left; width: 33% ; height: 100px; margin-right: 0.5%;
webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:3px ridge #EDA900;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ae48a0+1,540046+31,1c0210+51,78126a+64,ae48a0+76,660058+87,420034+100 */
background: #ae48a0; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ae48a0 1%, #540046 31%, #1c0210 51%, #78126a 64%, #ae48a0 76%, #660058 87%, #420034 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ae48a0 1%,#540046 31%,#1c0210 51%,#78126a 64%,#ae48a0 76%,#660058 87%,#420034 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ae48a0 1%,#540046 31%,#1c0210 51%,#78126a 64%,#ae48a0 76%,#660058 87%,#420034 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ae48a0', endColorstr='#420034',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.nav_bn1 a { font-size: 1em; color: #FFF; height: 100px; line-height: 100px; font-weight: bolder; }


.nav_bn2 { float:left; width: 33% ; height: 100px; margin-right: 0.5%;
webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:3px ridge #EDA900;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffff48+0,ffc423+63,ffe093+79,ffbb00+100 */
background: #ffff48; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ffff48 0%, #ffc423 63%, #ffe093 79%, #ffbb00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ffff48 0%,#ffc423 63%,#ffe093 79%,#ffbb00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ffff48 0%,#ffc423 63%,#ffe093 79%,#ffbb00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff48', endColorstr='#ffbb00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.nav_bn2 a { font-size: 1em; color: #FF0000; height: 100px; line-height: 100px; font-weight: bolder; }


.nav_bn3 { float:left; width: 33% ; height: 100px; 
webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:3px ridge #EDA900;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ae48a0+1,540046+31,1c0210+51,78126a+64,ae48a0+76,660058+87,420034+100 */
background: #ae48a0; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ae48a0 1%, #540046 31%, #1c0210 51%, #78126a 64%, #ae48a0 76%, #660058 87%, #420034 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ae48a0 1%,#540046 31%,#1c0210 51%,#78126a 64%,#ae48a0 76%,#660058 87%,#420034 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ae48a0 1%,#540046 31%,#1c0210 51%,#78126a 64%,#ae48a0 76%,#660058 87%,#420034 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ae48a0', endColorstr='#420034',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.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%;
webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:3px ridge #EDA900;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffff48+0,ffc423+63,ffe093+79,ffbb00+100 */
background: #ffff48; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ffff48 0%, #ffc423 63%, #ffe093 79%, #ffbb00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ffff48 0%,#ffc423 63%,#ffe093 79%,#ffbb00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ffff48 0%,#ffc423 63%,#ffe093 79%,#ffbb00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff48', endColorstr='#ffbb00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.nav_bn4 a { font-size: 1em; color: #FF0000; height: 100px; line-height: 100px; font-weight: bolder;}


.nav_bn5 { float:left; width: 33% ; height: 100px; margin-right: 0.5%;
webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:3px ridge #EDA900;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ae48a0+1,540046+31,1c0210+51,78126a+64,ae48a0+76,660058+87,420034+100 */
background: #ae48a0; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ae48a0 1%, #540046 31%, #1c0210 51%, #78126a 64%, #ae48a0 76%, #660058 87%, #420034 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ae48a0 1%,#540046 31%,#1c0210 51%,#78126a 64%,#ae48a0 76%,#660058 87%,#420034 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ae48a0 1%,#540046 31%,#1c0210 51%,#78126a 64%,#ae48a0 76%,#660058 87%,#420034 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ae48a0', endColorstr='#420034',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.nav_bn5 a { font-size: 1em; color: #FFF; height: 100px; line-height: 100px; font-weight: bolder; }



.nav_bn6 { float:left; width: 33% ; height: 100px; 
webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; border:3px ridge #EDA900;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffff48+0,ffc423+63,ffe093+79,ffbb00+100 */
background: #ffff48; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ffff48 0%, #ffc423 63%, #ffe093 79%, #ffbb00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ffff48 0%,#ffc423 63%,#ffe093 79%,#ffbb00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ffff48 0%,#ffc423 63%,#ffe093 79%,#ffbb00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff48', endColorstr='#ffbb00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.nav_bn6 a { font-size: 1em; color: #FF0000; height: 100px; line-height: 100px;font-weight: bolder; }


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

	#main_banner {width: 1000px; height: auto;  margin:0 auto;}
				
	#banner_box{ width: 100%;}

	.top_bn2 { width: 100%; }


	}



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

	#contents {width: 100%; }
	#main_banner {width: 90% ; margin:0 auto }

	#banner_box { width: 100% ;}
	#banner_box a { color: #FFF ; text-shadow: none;}
	#bn01 { border:0; border-top: 1px dotted #D5D5D5;}
	#bn02 { border:0; border-top: 1px dotted #D5D5D5;}
	#bn03 { border:0;  border-top:1px dotted #D5D5D5;}
	#bn04 {height: 200px;border:0; border-top: 1px dotted #D5D5D5;}
	#bn05 {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_a {  width: 90%; height: 30px; margin-top: 5px; border-radius: 8px;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0099+0,ff99cc+75,fba6e1+76,fcecfc+100 */
			background: #cc0099; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #cc0099 0%, #ff99cc 75%, #fba6e1 76%, #fcecfc 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0099', endColorstr='#fcecfc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			text-align: left; overflow:hidden;}
		.bn02_a {  width: 90%; height: 30px; margin-top: 5px; border-radius: 8px;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0099+0,ff99cc+75,fba6e1+76,fcecfc+100 */
			background: #cc0099; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #cc0099 0%, #ff99cc 75%, #fba6e1 76%, #fcecfc 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0099', endColorstr='#fcecfc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			text-align: left; overflow:hidden;}
		.bn03_a {  width: 95%; height: 30px; margin-top: 5px; border-radius: 8px;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0099+0,ff99cc+75,fba6e1+76,fcecfc+100 */
			background: #cc0099; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #cc0099 0%, #ff99cc 75%, #fba6e1 76%, #fcecfc 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0099', endColorstr='#fcecfc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			text-align: left; overflow:hidden;}
		.bn04_a {  width: 90%; height: 30px; margin-top: 5px; border-radius: 8px;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0099+0,ff99cc+75,fba6e1+76,fcecfc+100 */
			background: #cc0099; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #cc0099 0%, #ff99cc 75%, #fba6e1 76%, #fcecfc 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0099', endColorstr='#fcecfc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			text-align: left; overflow:hidden;}
		.bn05_a {  width: 90%; height: 30px; margin-top: 5px; border-radius: 8px;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0099+0,ff99cc+75,fba6e1+76,fcecfc+100 */
			background: #cc0099; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #cc0099 0%, #ff99cc 75%, #fba6e1 76%, #fcecfc 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0099', endColorstr='#fcecfc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			text-align: left; overflow:hidden;}
		.bn06_a {  width: 90%; height: 30px; margin-top: 5px; border-radius: 8px;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0099+0,ff99cc+75,fba6e1+76,fcecfc+100 */
			background: #cc0099; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #cc0099 0%, #ff99cc 75%, #fba6e1 76%, #fcecfc 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0099', endColorstr='#fcecfc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			text-align: left; overflow:hidden;}
		.bn06_a {  width: 90%; height: 30px; margin-top: 5px; border-radius: 8px;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0099+0,ff99cc+75,fba6e1+76,fcecfc+100 */
			background: #cc0099; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #cc0099 0%, #ff99cc 75%, #fba6e1 76%, #fcecfc 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0099', endColorstr='#fcecfc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			text-align: left; overflow:hidden;}
		.bn07_a {  width: 95%; height: 30px; margin-top: 5px; border-radius: 8px;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0099+0,ff99cc+75,fba6e1+76,fcecfc+100 */
			background: #cc0099; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #cc0099 0%, #ff99cc 75%, #fba6e1 76%, #fcecfc 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #cc0099 0%,#ff99cc 75%,#fba6e1 76%,#fcecfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0099', endColorstr='#fcecfc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			text-align: left; overflow:hidden;}


		.bn01_b { border:0;}
		.bn02_b { border:0;}
		.bn03_b { border:0;}
		.bn04_b { height: 160x; border:0;}
		.bn05_b { height: 160x; border:0;}
		.bn06_b  { height: 160x; border:0;}
		.bn06_b iframe { width: 90%; height: 160px ;border:0; }
		.bn07_b  { height: 160x;border:0; }
		

	#footer { }
	#btm_tel .btmadd_text {display:none;}

}


/* 768px */

@media screen and (max-width: 768px) {
	#popup_1 {display: none;}
	#hearder {font-size: 14px;}
	#contents{font-size: 14px;}


	

	img { box-sizing: border-box; }
	
	#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.8)}
	#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: 49%; border-right: 1px dotted #D5D5D5; padding-top: 0;}
			.top_bn1 ul li {margin-top: 0; margin-bottom: 2%; }	
				.bn1_text1 { height: : 25px; border:none; margin: 0;font-size: 18px;}
				.bn1_text3 { height: : 25px; }
		
		.top_bn3 {width: 50%; padding-top:0;}
			.top_bn3 ul li {margin-top:0; margin-bottom: 2%; }
				.bn3_text1 { height: : 25px; border:none; margin: 0;font-size: 18px; }
				.bn3_text2_1 {display:block; font-size: 16px;line-height: 120%}
				.bn3_text2 {display: none; }
				.bn3_text3 { font-size: 18px; line-height: 130%}
			
			

	#nav_banner {display:block; }


	#bn01 {width: 48%; height: 170px; margin-left: 1%; margin-right: 2%;}
	#bn02 {width: 48%; height: 170px; margin-left: 0; margin-right: 1%;}
	#bn03 {width: 48%; height: 230px; 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%;}
	#bn06 {width: 48%; height: 230px; margin-left: 0;  margin-right: 1%;}
	#bn07 {width: 98%; height: 230px; margin-left: 1%; margin-right: 1%;}
	#bn08 {display:none;}

	.bn06_b iframe { width: 90%; height: 190px ; }	


#footer {  }

#btm_logo { width: 50%;  }
#btm_logo a { font-size: 1em;}
#btm_tel  { width: 50%;  }
#btm_tel a { font-size: 1.5em;  }
#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;}
	#contents a {font-size: 12px;}


	#top_banner { width: 100%; height: 5px;}
	#top_banner a { display:none;}


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

	#nav_1 > a, #nav_2 > a, #nav_3 > a, #nav_4 > a, #nav_5 > a { font-size: 12px; }

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



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

	.bn1_text1 a{font-size: 16px; }
	.bn1_text2 a{font-size: 18px; }

	.bn3_text2_1 {display:none; }
	.bn3_text2 {display: block; }
	

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

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

	#bn04  {height: auto; margin-bottom: 5px;}
	.bn04_a02 a {text-indent: 30%; }
	.bn04_b {height: auto; }

	#bn05  {height: auto;margin-bottom: 5px; }
	.bn05_a02 a {text-indent: 30%; }
	.bn05_b {height: auto; }	

	#bn06 {width: 100%; height: auto; margin-left: 0;  margin-right: 1%;}
	.bn06_a {width: 95%}
	.bn06_a a{ text-indent: 3%;}
	
	#bn07 {width: 98%; margin-left: 1%; margin-right: 1%;height: auto; margin-bottom: 5px;}
	.bn07_a02 a{text-indent: 50%; }
	.bn07_b {height: auto; }



	#footer {}
	#btm_logo {height: 50px;}
	#btm_logo a {height: 50px; line-height: 50px; font-weight: bolder;}
	#btm_tel {height: 50px;}
	#btm_tel a  {height: 50px; line-height: 50px;  font-weight: bolder; }
	#btm_add {height: 30px;}
	#btm_add a  {height: 30px; line-height: 30px; }

}