@charset "utf-8";

@import url(common.css);

/* container */
#container {position:relative; width:100%; padding-top:120px;}
#container:after {display:block; content:""; clear:both;}

/* content */
.main_content {position:relative; width:998px; height:208px; margin:30px auto 30px; border:1px solid #ccc; box-sizing:border-box; background:#f5f5f5; overflow:hidden;}
.content_area_1{ overflow:hidden; box-sizing:border-box; width:100%; box-sizing:border-box; background:#fff; border-radius:10px; border:1px solid #cfcfcf}

/* visual */
.area_visual {overflow:hidden; position:absolute; top:120px; left:0; width:100%; height:580px;}
.area_visual .ul_visual li {overflow: hidden; position:absolute; top:0; left:50%; width:100%; height:0; padding-top:400px; height:180px; background-position:center top; }
.area_visual .ul_visual li.li1 {display:block;}
.area_visual .ul_visual li.li1 {background:url("/images/template/02426/main/visual_1_bg.png") no-repeat center top; }
.area_visual .ul_visual li.li2 {background:url("/images/template/02426/main/visual_2_bg.png") no-repeat center top; }
.area_visual .ul_visual li.li3 {background:url("/images/template/02426/main/visual_3_bg.png") no-repeat center top; }
/*visual rolling*/
.area_visual .ul_pos {position:absolute; top:359px; left:50%; margin-left:-500px !important; z-index:1; }
.ul_pos{ width:54px; height:10px; display:block; overflow:hidden;}
.ul_pos li {width:10px; height:10px; float:left; display:block; margin:0 0 0 8px;}
.ul_pos li a,
.ul_pos li span {display:block; text-indent:-10000px; width:10px; height:10px; background:url("/images/template/02426/main/ul_pos_off.gif") no-repeat left top; }
.ul_pos li.on a,
.ul_pos li.on span {width:10px; height:10px; text-indent:-10000px; background:url("/images/template/02426/main/ul_pos_on.gif") no-repeat left top;}

.m_visual_con {position:absolute; top:75px; left:50%; width:1000px; margin-left:-480px; font-family:'Arial'; line-height:1.4;}
.m_visual_con .txt1 {font-size:36px; font-weight:600; letter-spacing:-1px;}
.m_visual_con .txt2 {font-size:36px; color:#00448a; font-weight:600; letter-spacing:-1px;}
.m_visual_con .txt3 {margin-top:10px; font-size:18px; font-family:'Arial'; color:#666;}
.m_visual_con ul {margin-top:20px; overflow:hidden; }
.m_visual_con ul li {float:left; margin-right:15px;}

/* 바로가기 */
.M_link{ position:relative; width:100%; height:190px; padding-top:390px; background:url("/images/template/02426/main/bg_link.png") repeat-x left 390px;}
.M_link ul {width:1000px; margin:0 auto; border-left:1px dotted #6d6d6d; overflow:hidden; text-align:center;}
.M_link ul li {position:relative;  float:left; width:25%; height:190px; font-size:17px;}
.M_link ul li a {height:150px; padding:20px 30px 30px; color:#fff; word-break:keep-all; display:block; font-family:'Arial'; border-right:1px dotted #6d6d6d;}
.M_link ul li a img {margin-bottom:15px;}
.M_link ul li.link4 a img {margin-bottom:8px;}
.M_link ul li a:hover {background:url("/images/template/02426/main/bg_link2.png") repeat-x left 0;}
.M_link ul li a span{position:absolute; bottom:25px; left:50%; display:block; width:24px; height:24px; margin-left:-14px; border-radius:14px; font-size:0; line-height:0; border:2px solid #fff; background:url("/images/template/02426/main/link_go2.png") no-repeat center center;}

/* 포토앨범 */
.gallery {position:relative; width:225px; height:208px; float:left; padding:0 18px; font-family:'Arial'; overflow:hidden;background:url("/images/template/02426/main/bg_gallery.gif") no-repeat left top #127ebf;}
.gallery h2 {margin-top:12px; line-height:30px; font-size:20px; font-family:'Arial'; }
.gallery h2 a {color:#fff;}
.gallery p.tit2 {height:14px; line-height:14px; font-size:10px; font-family:'Arial'; color:#a7c5dc;}
.gallery .gall_list li {width:225px; height:115px; margin:10px 0 0; font-size:13px;}
.gallery .gall_list li img {width:100%; height:115px; }
.gallery a.btn_more {position:absolute; right:20px; top:20px; display:block; width:50px; height:20px; line-height:20px; text-align:right; font-size:12px; color:#fff; background:url('/images/template/02426/main/bu_more2.gif') no-repeat left center; z-index:9;}

/* 게시판 */
.notice {position:relative; width:370px; height:208px; float:left; font-family:'Arial'; border-right:1px solid #b8b8b8; overflow:hidden;}
.notice h2 {position:absolute; top:12px; left:20px;  line-height:30px; font-size:20px; font-family:'Arial'; }
.notice h2 a {color:#333;}
.notice .list_box {padding:60px 20px 0; text-align:left; clear:both; overflow:hidden; font-size:13px;}
.notice .list_box a { display:block; vertical-align:middle}
.notice .list_box li{ line-height:25px; font-size:13px; overflow:hidden; position:relative;}
.notice .list_box li a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#444;}
.notice .list_box li a:hover{ text-decoration:underline;}
.notice .list_box li span.text {float:left;  background:url('/images/template/02426/main/dot.gif') no-repeat left center; padding-left:10px; width:70%;}
.notice .list_box li span.date { position:absolute; top:0; right:0; color:#666;}
.notice .list_box a.btn_more {position:absolute; right:20px; top:20px; display:block; width:50px; height:20px; line-height:20px; text-align:right; font-size:12px; color:#333; background:url('/images/template/02426/main/bu_more.gif') no-repeat left center; z-index:9;}

/* 게시판02 */
.notice02 {position:relative; width:364px; height:208px; float:left; font-family:'Arial'; overflow:hidden;}
.notice02 h2 {position:absolute; top:12px; left:20px; line-height:30px; font-size:19px; font-family:'Arial'; }
.notice02 h2 a {color:#333;}
.notice02 .list_box {padding:60px 20px 0; text-align:left; clear:both; overflow:hidden; font-size:13px;}
.notice02 .list_box a { display:block; vertical-align:middle}
.notice02 .list_box li{ line-height:25px; font-size:13px; overflow:hidden; position:relative;}
.notice02 .list_box li a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#444;}
.notice02 .list_box li a:hover{ text-decoration:underline;}
.notice02 .list_box li span.text {float:left;  background:url('/images/template/02426/main/dot.gif') no-repeat left center; padding-left:10px; width:70%;}
.notice02 .list_box li span.date { position:absolute; top:0; right:0; color:#666;}
.notice02 .list_box a.btn_more {position:absolute; right:20px; top:20px; display:block; width:50px; height:20px; line-height:20px; text-align:right; font-size:12px; color:#333; background:url('/images/template/02426/main/bu_more.gif') no-repeat left center; z-index:9;}



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

	.area_visual, 
	.box_popup, 
	.q_link, 
	.M_link, 
	.box_notice, 
	.gallery, 
	.box_bannerZone{-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease}	

	
	/* container */
	#container { padding-top:76px}

	/* content */
	.main_content {margin:20px auto 20px; width:96%; height:auto;}		

	/* visual */
	.area_visual {position:relative; top:auto; left:auto; margin-top:0; height:400px; padding-top:0;}
	.area_visual .ul_visual li {padding-top:0; height:400px;}
	.area_visual .ul_visual li.li1, .area_visual .ul_visual li.li2, .area_visual .ul_visual li.li3 {background-size:auto 400px;}

	.area_visual .ul_pos {top:30px; left:auto; right:4%; margin-left:0 !important; z-index:20;}

	.m_visual_con {top:30px; width:100%; margin-left:-46%;}
	.m_visual_con .txt1 {font-size:18px;}
	.m_visual_con .txt2 {font-size:30px;}
	.m_visual_con .txt3 {margin-top:5px; font-size:13px;}
	.m_visual_con ul {margin-top:15px;}

	/* 바로가기 */
	.M_link{height:130px; padding-top:0; margin-top:-130px; background-position:left top;}
	.M_link ul {width:100%; -webkit-box-sizing:border-box; , -moz-box-sizing:border-box; box-sizing:border-box;}
	.M_link ul li {height:130px; font-size:14px;}
	.M_link ul li a {height:140px; padding:10px 0 0; -webkit-box-sizing:border-box; , -moz-box-sizing:border-box; box-sizing:border-box;}
	.M_link ul li a img {margin-bottom:20px; width:60px;}
	.M_link ul li.link4 a img {margin-bottom:8px; width:60px;}
	.M_link ul li a:hover {background:url("/images/template/02426/main/bg_link2.png") repeat-x left 0;}
	.M_link ul li a span{display:none;}

	/* 포토앨범 */
	.gallery {width:50%; -webkit-box-sizing:border-box; , -moz-box-sizing:border-box; box-sizing:border-box; }
	.gallery .gall_list li {width:100%; }

	/* 게시판 */
	.notice {width:50%; border-right:none; border-bottom:1px solid #b8b8b8; -webkit-box-sizing:border-box; , -moz-box-sizing:border-box; box-sizing:border-box; }

	/* 게시판02 */
	.notice02 {width:100%;}


}

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

	/* 바로가기 */
	.M_link{height:120px; margin-top:-120px; }
	.M_link ul {width:100%; text-align:left;}
	.M_link ul li {width:50%; height:60px; font-size:14px; letter-spacing:-1px;}
	.M_link ul li a {height:60px; padding:10px 15px 10px; line-height:40px;}
	.M_link ul li:nth-last-child(4) a, .M_link ul li:nth-last-child(3) a {border-bottom:1px dotted #6d6d6d;}
	.M_link ul li a img {margin:0 15px 0 0; width:auto; height:40px; float:left;}
	.M_link ul li a span {display:none;}

	
}

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

	/* 포토앨범 */
	.gallery {width:100%; float:none;}
	.gallery .gall_list li {width:100%; }

	/* 게시판 */
	.notice {width:100%; float:none;}

	/* 게시판02 */
	.notice02 {width:100%;}
				
}

@media screen and (max-width:480px) {	
	
	/* visual */
	.area_visual {height:220px;}
	.area_visual .ul_visual li {height:220px;}
	.area_visual .ul_visual li.li1, .area_visual .ul_visual li.li2, .area_visual .ul_visual li.li3 {background-size:auto 250px;}

	.m_visual_con {top:30px; line-height:1.3;}
	.m_visual_con .txt1 {font-size:14px;}
	.m_visual_con .txt2 {font-size:22px;}
	.m_visual_con .txt3 {font-size:12px;}
	.m_visual_con ul {margin-top:15px;}
	.m_visual_con ul li img {width:60px;}

	/* 바로가기 */
	.M_link {height:auto; padding-top:0; margin-top:0; background:url("/images/template/02426/main/bg_link.png") repeat left top;}
	.M_link ul {width:100%;}
	.M_link ul li {width:100%; height:50px;}
	.M_link ul li a {height:50px; padding:5px 15px 5px; line-height:40px; border-bottom:1px dotted #6d6d6d;}
	.M_link ul li a img {height:40px;}
	.M_link ul li a span {display:none;}

	
	
	
}

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

	/* container */
	#container { padding-top:62px}
	
}