@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');


* {margin:0; padding:0;}
html, button, input, select, textarea { /*color:#222;*/ }
body { font-size:1em; line-height:1.4;
			background-color: #ffffff;
			font-family: Arial, Helvetica, Verdana;
			font-size: 14px;
			line-height: 22px;
			/*color: #333;*/
			-webkit-text-size-adjust: none;
}
body *{text-shadow: none;}
a { color:#00e;}
a:link {font-family:"nanum gothic";} 
a:visited {font-family:"nanum gothic"; color:#551a8b; }
/* a:hover {font-family:"nanum gothic"; color:#06e; font-weight:500; } */

fieldset { border:0; margin:0; padding:0; }
textarea { resize:vertical; }
i, em, address { font-style:normal; font-weight:normal; }

.nocallout { -webkit-touch-callout:none; }
.pressed { background-color:rgba(0, 0, 0, 0.7); }

textarea[contenteditable] { -webkit-appearance:none; }

.gifhidden { position:absolute; left:-100%; }

.ir { background-color:transparent; background-repeat:no-repeat; border:0;  display:block; overflow:hidden; text-align:left; text-indent:-999em; }
.ir br { display:none; }

.hidden { display:none !important; visibility:hidden; }
.visuallyhidden { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
.invisible { visibility:hidden; }

.clearfix:before, .clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
.clearfix { *zoom:1; }

/*/////////// (demo.css_모바일메뉴플러그인) /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*p{	margin: 0 0 10px 0;}*/
/**//*a, a:link, a:active, a:visited, a:hover{color: #333;text-decoration: underline;}
pre{font-size: 12px;width: 100%;overflow: auto;-webkit-overflow-scrolling: touch;}

#page nav{display: none;}

#page > a,
.wrap > a
{
	background: center center no-repeat #1c508a;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );

	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 30px;
	left: 10px;
}
#page > a.friends,
.wrap > a.friends
{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVNJREFUeNq01jFLAzEYxvH2UBCxiIiDUhzcdXCyIk5ufgUXLR37JdxcXBxcuwmOOtml0EKpo04iWIpIQREVEVFLjf9AhoC9e3O5uxd+lMLdPU1yedO8UiqXdQWO122ghi4+8IwGqiiId+uRCHbxqsLrFHNRz5ACSnhTch1EPScQpnIH0w7TWcGiz5rouS45rtkMVnxCJrAQ4yUq+oT8YhAjZOAT8oWHGCE9nxC9H64cA15w4xOiW0HbfErVNhvUa8c3cecQcoZv3xA9z+fCNbe4SNq7jvEUMaUnuE/au7SjkHbSR1G637ULh73Kn+gn7cIBttELGckQh9Jo8iMOrSksYx2b2MKk8FuvUUcHl/9GbiWuooYu3pVf/eARLZQxbp8na2YR0659e+HLmM/geN+z98lSRv8hZu2QQkYh+kzKjZkvHdPahymH6DNp5Cucev0JMAAkKj0NEoYBJwAAAABJRU5ErkJggg==);
}
#page > a.right,.wrap > a.right{left: auto;right: 10px;}

#page {width:100%; height:100%;}

.sb-toggle-left {
	background: center center no-repeat #1c508a;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 15px;
	left: 10px;
	cursor: pointer;
}

#header {width:100%; padding:20px 0; overflow:hidden;}
#header .intro_logo {float:left; margin-left:60px;}
.intro_logo a img {display:block;}
#header .broad_info {float:right; margin-right:10px; display:block;}

#intro_visual {width:100%;}

#intro > img {width:100%; display:block;}

#footer {width:100%;}*/

/****** 푸터  ******/
/*#in_footer {padding:10px 0; background:url(/image/img/mid_bg.jpg) repeat;}
#in_footer address {margin-top:10px; color:#ccc; text-align:center; font-size:11px; line-height:14px;}
.btn_bottom {margin: 0 auto; width:90%; text-align:center;}
.btn_bottom a { margin-right:0; text-decoration:none; font-family:"dotum";}

@media screen and (max-width: 320px) {
	#page {min-width:320px;}
}*/

.intro, .copy {font-family: 'NanumSquare';}
.intro li {font-family: 'NanumSquare';}

.copy {clear:both; background:#003e68; padding:10px; text-align:center; box-sizing:border-box;}
.copy p {color:#ddd; font-weight:500; font-size:18px; display:inline-block; padding-top:5px;}
.copy button {display:inline-block; padding:5px 10px;margin-left:20px; font-size:16px; border-radius:5px; box-shadow:1px 1px 1px rgba(0,0,0,0.5);}

@media screen and (max-width: 520px) {
.copy p {font-size:14px;}
}

.intro {max-width:1200px; margin:0 auto;}
/*.intro h1 {text-align:center; padding:50px 0; }
.intro h1 img {width:300px;}

@media screen and (max-width: 1200px) {
.intro h1 img {width:250px;}
}
@media screen and (max-width: 700px) {
.intro h1 img {width:200px;}
}

.intro .bg {width:100%; max-width:1200px; height:490px; background:url("/image/intro_main2.jpg")no-repeat center center; background-size:cover;}

@media screen and (max-width: 500px) {
.intro .bg {background:url("/image/intro_main2_m.jpg")no-repeat center center; background-size:cover;}
}*/

.youtube {width:100%;  height:99px; background:url("/image/intro_youtube_bg.png")repeat-x; text-align:center;}
.youtube li {display:inline-block; padding-right:30px; font-size:28px; color:yellow; font-weight:600; }
.youtube li a {color:yellow;}
.youtube li:nth-child(1), .youtube li:nth-child(3) {padding-top:40px; box-sizing:border-box;}
.youtube li:nth-child(2) {padding-top:20px; box-sizing:border-box;}
.youtube li:nth-child(3) {padding-right:0;}
.youtube li:nth-child(3) a {color:#fff;}

@media screen and (max-width: 1068px) {
.youtube {height:60px;}
.youtube li {font-size:24px;}
.youtube li a img {height:40px;}
.youtube li:nth-child(1), .youtube li:nth-child(3) {padding-top:20px; }
.youtube li:nth-child(2) {padding-top:10px; }
}

@media screen and (max-width: 430px) {
.youtube li {padding-right:10px; font-size:20px;}
}

@media screen and (max-width: 365px) {
.youtube {height:50px;}
.youtube li { font-size:18px;}
.youtube li a img {height:30px;}
.youtube li:nth-child(1), .youtube li:nth-child(3) {padding-top:15px; }
.youtube li:nth-child(2) {padding-top:10px; }
/*.youtube li:nth-child(2) {display:none;}*/
}


.time {background:#ff8a00; text-align:center; padding:6px;}
.time li {display:inline-block;  font-size:20px; font-weight:600; color:#fff; padding:10px 0; padding-right:5px; line-height:8px;}
.time li:after {content:"/"; padding-left:10px;}
.time li:nth-child(5):after {display:none;} 

@media screen and (max-width: 670px) {
.time li {font-size:18px;}
}
@media screen and (max-width: 450px) {
.time li {font-size:16px;}
}

.biblereading {background:#003e68; height:50px; text-align:center;  }
.biblereading a {color:#fff; display:block;width:100%; height:100%; font-size:25px; font-weight:600; padding-top:15px; box-sizing:border-box;}
.biblereading a:hover {text-decoration:underline;}

/* 모바일: 긴 제목을 한 줄로 유지 (글자만 축소) */
@media screen and (max-width: 1068px) {
.biblereading a {
	font-size: 25px;
	padding-top: 14px;
	padding-left: 8px;
	padding-right: 8px;
	white-space: nowrap;
	overflow: hidden;
}
}
@media screen and (max-width: 670px) {
.biblereading a {
	font-size: 20px;
	padding-top: 15px;
}
}
@media screen and (max-width: 450px) {
.biblereading a {
	font-size: 18px;
	padding-top: 16px;
}
}
@media screen and (max-width: 350px) {
.biblereading a {
	font-size: 16px;
	padding-top: 17px;
}
}

.button {width:25%; height:145px; float:left;}
.button img {display:inline-block; padding-top:40px; padding-left:10%; box-sizing:border-box;}
.button h3 {display:inline-block;  color:#fff; font-weight:600; font-size:20px; padding-top:50px; padding-left:5%; line-height:31px; box-sizing:border-box;}
.button h4 {display:inline-block;  color:#fff; font-weight:600; font-size:18px; padding-top:50px; padding-left:5%; line-height:28px; box-sizing:border-box;}
.box1 h3, .box5 h3, .box6 h3, .box7 h3, .box8 h3 {padding-top:55px;} 
.box7 h4 {padding-top:55px;} 
.box1 h3, .box5 h3, .box6 h3{line-height:30px;}
.box1 {background:#954898;}
.box2 {background:#355cab;}
.box3 {background:#57ae46;}
.box4 {background:#07a5e2;}
.box5 {background:#d65b2f;}
.box6 {background:#b72049;}
.box7 {background:#685ca8;/*border: 5px solid #fff900;box-sizing: border-box;*/}
/*.box7:hover{border: 5px solid red;}*/
.box8 {background:#9b499b;}

.m_icon{display: none;}

@media screen and (max-width: 1068px) {
.button {width:50%; font-size:22px;}
.button img {padding-left:20%;}
.button h3 {padding-left:10%;}
}
@media screen and (max-width: 670px) {
.button img {padding-left:15%;}
.button h4 {padding-left:1%;}
.icon{display: none;}
.m_icon{display: inline;}
}
@media screen and (max-width: 590px) {
.button img {width:60px; padding-left:11%;}
.button h3 {padding-left:8%;}
.button h4 {font-size:14px; }
}
@media screen and (max-width: 550px) {
.button h3 {line-height:30px; padding-top:58px; padding-left:7%; font-size:18px;}
.box7 h3, .box8 h3 {padding-top:42px;} 
.box1 h3, .box5 h3, .box6 h3 {padding-top:32px;}
}
@media screen and (max-width: 450px) {
.button {height:120px;}
.button img {width:60px; padding-top:35px;}
.button h3 {font-size:16px; padding-top:47px;}
.box7 h3, .box8 h3 {padding-top:40px; line-height:20px;} 
.box1 h3, .box5 h3, .box6 h3 {padding-top:35px; line-height:20px;}
.button h4 {font-size:12px; }
.box7 h4{padding-top: 30px;line-height: 20px;}
}
@media screen and (max-width: 420px) {
.button {height:95px;}
.button img {width:50px; padding-top:25px;}
.button h3 {font-size:14px; padding-top:35px;}
.box7 h3, .box8 h3 {padding-top:30px;} 
.box1 h3, .box5 h3, .box6 h3 {padding-top:17px;}
.button h4 {font-size:12px; padding-top:10px;}
}
@media screen and (max-width: 350px) {
 .button img {width:40px; padding-top:25px;}
 .button h4 {padding-left:10%;}
}
@media screen and (max-width: 340px) {
.button img {width:40px; padding-top:33px;}
.button h3 {font-size:14px; padding-top:38px;}
.box7 h3, .box8 h3 {padding-top:32px;} 
.box1 h3, .box5 h3, .box6 h3 {padding-top:23px;}
.box2 h3, .box3 h3, .box4 h3  {padding-left:3%;}
}


		/*modal*/
		#modal_Black{display:none; position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:999999;}

		/*.modal_btn{background-color:#F9FDFF; color:#68849C; height:21px; border:1px solid #3A7E9E; font-family:Verdana,"돋움"; font-size:9pt; padding: 5px; cursor:pointer;}*/
		.modal_wrap{position:fixed; left:0; top:0; right:0; bottom:0; z-index:99999999; overflow:auto; padding:20px; text-align:center; background:none; font-family: 'NanumSquare';}
		.modal_wrap:after{display: inline-block; height: 100%; margin-left: -0.05em; content: "";}
		.modal_wrap:after,
		.modal_con{vertical-align:middle;}
		.w_1{width:30%;}
		.w_2{width:60%; overflow-x: auto; overflow-y: auto;}
		.modal_con{display:inline-block; position:relative; background:#fff; height:auto; padding:35px; box-sizing:border-box; margin:20px 0; text-align:left; box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.6);}
		.modal_con img{max-width:100%;}

		.modal_close {position: absolute; top:0; right:0; display:block;  width:40px; height:40px; cursor: pointer; color:#95979c;  -webkit-transition: color 0.2s;  transition: color 0.2s; margin:20px 10px 0 0;}
		.modal_close:hover,
		.modal_close:focus {color: #2b2e38;}
		.modal_close:before {content:"\00d7"; display: block; height:100%; text-align:center; font-size:25px;}

		.modal_con p{margin-bottom: 20px;}

		.boxbutton {border:1px solid #ff8a00; background:#f5e1bd; font-size:13px; padding:3px; margin-left:5px;}
		
		@media screen and (max-width:1300px){
			.modal_con{width:40%;}
		}

		@media screen and (max-width:1024px){
			.modal_con{width:50%;}
		}

		@media screen and (max-width:800px){
			.modal_con{width:60%;}
		}

		@media screen and (max-width:666px){
			.modal_con{width:70%;}
		}
		@media screen and (max-width:590px){
			.modal_con{width:80%;}
		}
		@media screen and (max-width:509px){
			.modal_con{width:90%;}
			#menu {width:200px;}
		}
		@media screen and (max-width:390px){
			#menu {width:160px;}
		}
		@media screen and (max-width:350px){
			#menu {width:135px;}
		}
