@charset "utf-8";
/* 전 페이지 공통 엘리먼트 및 태그 스타일 시작 */
* {margin:0; padding:0;}
body {width:100%; color:#444; font:12px/1.6 Dotum,AppleGothic,sans-serif; overflow-x:hidden; }
div {margin:0 auto; text-align:left;}
fieldset,img {border:none;}
img { border:0; vertical-align:top; border:0 none; padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
table {border-collapse:collapse;}
address, em {font-style:normal;}
input,textarea {font-family:inherit; font-size:1.05em;} /*로그인페이지와 관리자모드의 인풋창 까지 바뀜*/

dl, dt, dd, p{ margin:0; padding:0; }
ul, li{ list-style:none; margin:0; padding:0; }
hr{ display:none; }
/* 전 페이지 공통 엘리먼트 및 태그 스타일 종료 */

@font-face {
    font-family: ng;
    src: url('../font/NanumGothic.eot');
}

/*
메인페이지 z-index 순서
- 메인페이지 3
- 우측 탑메뉴 6
- 개치프레이져 6
- 썸네일 6
- 대메뉴 6
- 대메뉴오버 시 나오는 소메뉴 7
*/

/*우측상단 탑 메뉴 시작*/
#wrap {width:100%;  height:auto; margin:0 auto; position:relative;  }
#wrap .top_bt {position:fixed; right:0; top:0; z-index:6; }
.top_bt li {display:inline; float:left; }
/*우측상단 탑 메뉴 종료*/

#wrap #menuLeft {
	width:12%;
	min-width:220px;
	height:50px;
}
#wrap #menuLeft,
#wrap #content {
	display:inline-block;
	*display:inline;
	*zoom:1;
	float:left;
	 background:url(../images/sub_area_bg.gif) repeat-y ;
}
#wrap #content {
	width:88%;
}


#wrap #content #percent {
	width:100%;
}

/*대메뉴 스타일시트 시작*/
.logo {width:220px; height:142px; }
#wrap .menu {width:12%; height:100%; background:#fff; position:fixed; top:0; left:0; z-index:4;}
.menu .menu_tab { width:220px; height:240px;  position:relative;}
.menu_tab #bt_menu_tab1,
.menu_tab #bt_menu_tab2,
.menu_tab #bt_menu_tab3,
.menu_tab #bt_menu_tab4,
.menu_tab #bt_menu_tab5,
.menu_tab #bt_menu_tab6{ background:url("../images/menu_tab_on.gif") no-repeat 0 50px;  cursor:pointer; width:220px;}
.menu_tab #bt_menu_tab1.selected { background-position:0 0; }
.menu_tab #bt_menu_tab2.selected { background-position:0 -40px; }
.menu_tab #bt_menu_tab3.selected { background-position:0 -80px; }
.menu_tab #bt_menu_tab4.selected { background-position:0 -120px; }
.menu_tab #bt_menu_tab5.selected { background-position:0 -160px; }
.menu_tab #bt_menu_tab6.selected { background-position:0 -200px; }

.menu_tab .tab { background:url("../images/menu_tab_off.gif") no-repeat 0 0; width:220px; height:240px;}

.menu_tab .tab a#bt_menu_tab1{float:left; width:220px;  height:40px;}
.menu_tab .tab a#bt_menu_tab2{float:left; width:220px;  height:40px;}  
.menu_tab .tab a#bt_menu_tab3{float:left; width:220px;  height:40px;}
.menu_tab .tab a#bt_menu_tab4{float:left; width:220px;  height:40px;}       
.menu_tab .tab a#bt_menu_tab5{float:left; width:220px;  height:40px;}
.menu_tab .tab a#bt_menu_tab6{float:left; width:220px;  height:40px;} 

#menu_tab2,#menu_tab3,#menu_tab4,#menu_tab5,#menu_tab6 { display:none; }

.copy {position:fixed; left:274px; bottom:32px; z-index:6;} /* 본 카피라이트는 메인과 서브가 다르다. */
/*대메뉴 스타일시트 종료*/


/*좌측메뉴 공통 search_box 영역 시작*/
.search_area {width:220px; height:100%; background:#515151; margin-top:22px;}
.search_area .search_area_box {width:185px; color:#ffffff; padding-top:10px;}
.search_area_box ul li {margin-top:10px; font-family:'나눔고딕', 'NanumGothic', ng; }
.search_area_box ul li ul li {float:left; margin-left:4px;}
.search_area_box ul li ul li span.search_title01 {color:#ffffff;}
.search_area_box ul li ul li span.search_title02 {color:#fced00; font-weight:bold;}

.search_area_box ul li ul li.icon_margin img {margin-top:4px;}
.search_area_box ul li ul li.text_margin {line-height:25px;}
.search_area_box ul li ul li input.search_input_type01 {width:77px; height:25px; background:#f4f4f4; color:#8a8a8a; border:0; text-align:center; text-align:center; }
.search_area_box ul li ul li select.search_input_type02 {width:50px; height:25px; background:#f4f4f4; color:#8a8a8a; border:0; font-family:'나눔고딕', 'NanumGothic', ng; }
/*좌측메뉴 공통 search_box 영역 종료*/


/*소메뉴 활성화 스타일시트 시작*/
#sub1 {visibility:hidden; width:113px; height:100%; position:fixed; top:0; left:220px; z-index:7; background:url(../images/submenu_bg.gif) repeat-y;}
#sub1 ul.sub1_ul {padding-top:149px;}

#sub2 {visibility:hidden; width:113px; height:100%; position:fixed; top:0; left:220px; z-index:7; background:url(../images/submenu_bg.gif) repeat-y;}
#sub2 ul.sub2_ul {padding-top:194px;}

#sub3 {visibility:hidden; width:113px; height:100%; position:fixed; top:0; left:220px; z-index:7; background:url(../images/submenu_bg.gif) repeat-y;}
#sub3 ul.sub3_ul {padding-top:234px;}

#sub4 {visibility:hidden; width:113px; height:100%; position:fixed; top:0; left:220px; z-index:7; background:url(../images/submenu_bg.gif) repeat-y;}
#sub4 ul.sub4_ul {padding-top:264px;}

#sub5 {visibility:hidden; width:113px; height:100%; position:fixed; top:0; left:220px; z-index:7; background:url(../images/submenu_bg.gif) repeat-y;}
#sub5 ul.sub5_ul {padding-top:310px;}

#sub6 {visibility:hidden; width:113px; height:100%; position:fixed; top:0; left:220px; z-index:7; background:url(../images/submenu_bg.gif) repeat-y;}
#sub6 ul.sub6_ul {padding-top:264px;}

#sub1 li {display:inline; float:left; height:27px;}
#sub2 li {display:inline; float:left; height:27px;}
#sub3 li {display:inline; float:left; height:27px;}
#sub4 li {display:inline; float:left; height:27px;}
#sub5 li {display:inline; float:left; height:27px;}
#sub6 li {display:inline; float:left; height:27px;}

#sub1on li {display:inline; float:left; height:27px;}
#sub2on li {display:inline; float:left; height:27px;}
#sub3on li {display:inline; float:left; height:27px;}
#sub4on li {display:inline; float:left; height:27px;}
#sub5on li {display:inline; float:left; height:27px;}
#sub6on li {display:inline; float:left; height:27px;}
/*소메뉴 활성화 스타일시트 종료*/


/*서브페이지 메뉴 활성화 스타일 시트 시작*/
li.menu_text01 {display:block; margin-left:26px; color:#fff; font-size:12px; font-size:12px; line-height:27px;}
li.menu_text01 a {color:#545454;   }
li.menu_text01 a:active {color:#545454; }
li.menu_text01 a:visited {color:#545454; }
li.menu_text01 a:hover {color:#545454;  text-decoration:none; font-weight:bold; }

li.menu_text01 a.on_menu_active {color:#545454;  text-decoration:none;  font-weight:bold; }
li.menu_text01 a.on_menu_active:hover {color:#545454;  text-decoration:none; font-weight:bold; }
/*서브페이지 메뉴 활성화 스타일 시트 종료*/


/* 메인페이지 풀스크린 이미지 리사이징 스타일시트 시작*/
.fullBgImg{ width:100%; min-width:1280px;  height:100%; min-height:1080px;
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:fixed;	
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	display:block; z-index:3; overflow:hidden;
	
	}
.catch_position01 {position:fixed; left:274px; bottom:110px; z-index:6;}

#container {width:100%; overflow:hidden; margin:0 auto; position:relative; z-index:0; border:0; }
#slides {position:relative;}
.slides_container {width:100%; overflow:hidden; position:relative; }

	/*메인페이지 슬라이드 화살표 표시는 가변 가능성이 매우 크므로 주석을 처리한다
	.next {position:fixed; top:25%; right:120px; z-index:301; cursor:pointer;}
	.prev {position:fixed; top:25%; right:200px; z-index:301; cursor:pointer;}
	*/

	/*메인페이지 페이드인 아웃 썸네일 스타일시트 시작*/
	.pagination {position:fixed; bottom:248px; left:274px; z-index:6;}
	.pagination li {display:inline; float:left; margin:0; width:69px; height:34px; margin-left:5px;}

	/*[비활성화 시] 아래의 css 에서 썸네일의 백그라운드를 불러오는데 코드가 복잡한 이유는 백그라운드 사이즈 엘리먼트는 기본적으로 ie8에서는 작동을 하지않기때문이다.*/
	.pagination li.aa0 a {display:block;  z-index:6; border:3px solid transparent;
	background:url(../images/main01.png) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main01.png', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main01.png', sizingMethod='scale')";
	}

	.pagination li.aa1 a {display:block;  z-index:6; border:3px solid transparent;
	background:url(../images/main02.png) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main02.png', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main02.png', sizingMethod='scale')";
	}

	.pagination li.aa2 a {display:block;  z-index:6; border:3px solid transparent;
	background:url(../images/main03.png) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main03.png', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main03.png', sizingMethod='scale')"; 
	}

	.pagination li.aa3 a {display:block;  z-index:6; border:3px solid transparent;
	background:url(../images/main04.png) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main04.png', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main04.png', sizingMethod='scale')";
	}

	.pagination li.aa4 a {display:block;  z-index:6; border:3px solid transparent;
	background:url(../images/main05.png) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main05.png', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main05.png', sizingMethod='scale')";
	}

	.pagination li.aa5 a {display:block;  z-index:6; border:3px solid transparent;
	background:url(../images/main06.png) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main06.png', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main06.png', sizingMethod='scale')";
	}

	.pagination li.aa6 a {display:block;  z-index:6; border:3px solid transparent;
	background:url(../images/main07.png) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main07.png', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main07.png', sizingMethod='scale')";
	}

	/*[활성화 시] 아래의 css 에서 썸네일의 백그라운드를 불러오는데 코드가 복잡한 이유는 백그라운드 사이즈 엘리먼트는 기본적으로 ie8에서는 작동을 하지않기때문이다.*/
	.pagination li.current.aa0 a {display:block;  z-index:6; border:3px solid #ffffff;
	background:url(../images/main01.jpg) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main01.jpg', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main01.jpg', sizingMethod='scale')";
	}

	.pagination li.current.aa1 a {display:block;  z-index:6; border:3px solid #ffffff;
	background:url(../images/main02.jpg) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main02.jpg', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main02.jpg', sizingMethod='scale')";
	}

	.pagination li.current.aa2 a {display:block;  z-index:6; border:3px solid #ffffff;
	background:url(../images/main03.jpg) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main03.jpg', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main03.jpg', sizingMethod='scale')"; 
	}

	.pagination li.current.aa3 a {display:block;  z-index:6; border:3px solid #ffffff;
	background:url(../images/main04.jpg) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main04.jpg', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main04.jpg', sizingMethod='scale')";
	}

	.pagination li.current.aa4 a {display:block;  z-index:6; border:3px solid #ffffff;
	background:url(../images/main05.jpg) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main05.jpg', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main05.jpg', sizingMethod='scale')";
	}

	.pagination li.current.aa5 a {display:block;  z-index:6; border:3px solid #ffffff;
	background:url(../images/main06.jpg) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main06.jpg', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main06.jpg', sizingMethod='scale')";
	}

	.pagination li.current.aa6 a {display:block;  z-index:6; border:3px solid #ffffff;
	background:url(../images/main07.jpg) no-repeat 50% 50%; background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/main07.jpg', sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/main07.jpg', sizingMethod='scale')";
	}
	/*메인페이지 페이드인 아웃 썸네일 스타일시트 종료*/
/* 메인페이지 풀스크린 이미지 리사이징 스타일시트 종료*/

/* 서브페이지 전체영역 시작*/
.subcontent {width:100%;  height:361; background:url(../images/sub_area_bg.gif) repeat-y ; position:absolute;}
.subcontent2 {
	width:100%;
	height:361px;
}
	
	/*서브 비주얼이 각 대메뉴마다 사진이 다름*/
	.subcontent .subvisual01 {width:100%; height:361px; background:url(../images/subvisual01.jpg) no-repeat 50% 0; }
	.subcontent .subvisual02 {width:100%; height:361px; background:url(../images/subvisual02.jpg) no-repeat 50% 0; }
	.subcontent .subvisual03 {width:100%; height:361px; background:url(../images/subvisual03.jpg) no-repeat 50% 0; }
	.subcontent .subvisual04 {width:100%; height:361px; background:url(../images/subvisual04.jpg) no-repeat 50% 0; }
	.subcontent .subvisual05 {width:100%; height:361px; background:url(../images/subvisual05.jpg) no-repeat 50% 0; }
	.subcontent .subvisual06 {width:100%; height:361px; background:url(../images/subvisual06.jpg) no-repeat 50% 0; }
	
	/*모든 서브비주얼에는 글자와 타이틀 바가 들어간다*/
	.subvisual01 .title1 {width:100%; height:73px; text-align:center; padding-top:74px; padding-left:100px;}
	.subvisual01 .sub_catch {width:100%; height:76px; text-align:center; padding-top:80px; padding-left:100px;}

	.subvisual02 .title1 {width:100%; height:73px; text-align:center; padding-top:74px; padding-left:100px;}
	.subvisual02 .sub_catch {width:100%; height:76px; text-align:center; padding-top:80px; padding-left:100px;}

	.subvisual03 .title1 {width:100%; height:73px; text-align:center; padding-top:74px; padding-left:100px;}
	.subvisual03 .sub_catch {width:100%; height:76px; text-align:center; padding-top:80px; padding-left:100px;}

	.subvisual04 .title1 {width:100%; height:73px; text-align:center; padding-top:74px; padding-left:100px;}
	.subvisual04 .sub_catch {width:100%; height:76px; text-align:center; padding-top:80px; padding-left:100px;}

	.subvisual05 .title1 {width:100%; height:73px; text-align:center; padding-top:74px; padding-left:100px;}
	.subvisual05 .sub_catch {width:100%; height:76px; text-align:center; padding-top:80px; padding-left:100px;}

	.subvisual06 .title1 {width:100%; height:73px; text-align:center; padding-top:74px; padding-left:100px;}
	.subvisual06 .sub_catch {width:100%; height:76px; text-align:center; padding-top:80px; padding-left:100px;}
	
	/*서브페이지 전체영역 안에 다른 공간을 만들어 주어야 구분이 편하다*/
	.subject1 {width:780px; height:auto; min-height:250px; position:relative; text-align:center; margin-top:50px;}
	
	/*서브메뉴와는 다른 서브페이지 텝 활성화 코드. 이는 가변가능성이 매우 커 주석처리를 한다
	.subject1 .subnavi {height:34px; margin-left:1px;}
	.subnavi ul li {display:inline; float:left; margin:0; padding:0;}
	.subnavi ul li a{display:inline; float:left; margin-right:12px; padding:0;}
	.subnavi ul li a span {text-align:center;}

	.subnavi ul li a.sub_on { width:192px; height:34px; background:url(../images/sub_tab_off.gif) no-repeat; font-weight:bold; color:#575757; text-decoration:none; line-height:34px; text-align:center;}
	.subnavi ul li a.sub_on:hover{ width:192px; height:34px; background:url(../images/sub_tab_on.gif) no-repeat; font-weight:bold; color:#fff; text-decoration:none; line-height:34px;}
	.subnavi ul li.on_menu_active a {width:192px; height:34px;background:url(../images/sub_tab_on.gif) no-repeat; font-weight:bold; color:#fff; text-decoration:none; line-height:34px;}
	.subnavi ul li.on_menu_active a:hover {width:192px; height:34px;background:url(../images/sub_tab_on.gif) no-repeat; font-weight:bold; color:#fff; text-decoration:none; line-height:34px;}
	*/

/*서브페이지 카피라이트 시작*/
#wrap .sub_copy {width:100%; height:78px; clear:both; margin-top:50px;  }
.sub_copy .sub_copy_fix {width:780px; height:78px; text-align:center;}
/*서브페이지 카피라이트 종료*/



/* 자전거여행 */
div.sub02 {
	margin-top:17px;
}
div.sub02 hr {
	display:block;
	border:none;
	height:1px;
	background-color:#323232;
	width:100;
}
table.course {
	width:100%;
}
table.course th,
table.course td {
	height:30px;
	border:1px solid #dcdcdc;
	font-family:'나눔고딕', 'NanumGothic', ng;
}
table.course th {
	background-color:#f4f4f4;
	font-size:12px;
	color:#858585;
	text-align:center;
	border-top:none;
	font-weight:100;
	padding:8px 0;
}
table.course th:first-child {
	border-left:none;
}


div.sub02 img.care {
	margin-top:30px;
	margin-bottom:15px;
}



table.course td {
	border-right:none;
	text-align:center;
	padding:8px 22px;
	color:#858585;
}
table.course td.title {
	color:#666666;
}
table.course td.text {
	border-top:none;
	text-align:left;
}
div.noticeArea {
	border-radius:5px;
	background-color:#f8f8f8;
	border:1px solid #eaeaea;
	padding:18px 26px;
	color:#666666;
	font-family:'나눔고딕', 'NanumGothic', ng;
}



table.detail td {
	text-align:center;
	padding:0;
	min-height:50px;
	height:auto;
}
table.detail td.img {
	border-left:none;
	text-align:center;
}
table.detail td.img span {
	padding:10px;
	padding-top:15px;
	display:inline-block;
}
table.detail td.img span img {
	margin-top:3px;
}
table.detail td.img span:first-child {
	color:#f77e2c;
	padding:10px;
	padding-bottom:15px;
	display:inline-block;
}
table.detail td.hour {
	border-right:none;
	color:#2ed2b9;
}
table.detail td.title {
	text-align:left;
	padding-left:22px;
}


th.last,
td.last {
	border-right:none !important;
}
td.first {
	border-left:none !important;
}


@media screen and (max-width:1920px) {
	#wrap #menuLeft { 
		width:12%;
	}
	.menu {
		width:12%;
		min-width:230px;
	}
	#wrap #content {
		width:88%;
	}
	div.search_area {
		width:12%;
		min-width:230px;
	}

}

@media screen and (max-width:1910px) {
	#wrap #menuLeft { 
		width:18%;
	}
	.menu {
		width:18%;
		min-width:227px;
	}
	#wrap #content {
		width:82%;
	}
	div.search_area {
		width:18%;
		min-width:227px;
	}

}