@charset "utf-8";

/*pharagraph*/
.para01 { margin-left:15px; margin-top:14px; margin-bottom:30px; } /* h4 > */
.para02 { margin-left:8px; margin-top:14px; } /* sblet > ssblet */
.para02.ssblet { margin-top:10px; }
.para03 { margin-left:8px; margin-top:5px; margin-bottom:20px; } /* ssblet > sssblet */
.para04 { margin-left:8px; margin-top:10px; } /* h4 > ssblet */

/*blet*/
h4, .blet{ margin-top:30px !important; margin-bottom:20px !important; padding-left:35px !important; background:url('/open_content/tour/images/contents/sblet.gif') no-repeat left 8px !important; font-size:28px !important; font-weight:600 !important; color:#444 !important; }
h4.color2 { color:#154b9c; }
.sblet { margin-top:15px; padding-left:18px; background:url('/open_content/tour/images/contents/ssblet.gif') no-repeat left 10px; font-size:18px; font-weight:600; }
.ssblet { margin-top:8px; margin-bottom:6px; padding-left:14px; background:url('/open_content/tour/images/contents/sssblet.gif') no-repeat left 8px; font-size:15px;}
.sssblet { margin-top:4px; padding-left:14px; padding-bottom:4px; background:url('/open_content/tour/images/contents/ssssblet.gif') no-repeat left 9px; font-size:14px; font-weight:normal; }
.ssssblet { margin-top:8px; padding-left:14px; background:url('/open_content/tour/images/contents/sssssblet.gif') no-repeat left 10px; font-size:13px; font-weight:normal; }

.sm_point { display:block; margin-top:10px; font-size:13px; color:#878787; }

/*테이블*/
.datatable { margin-bottom:20px; }
.datatable .data { margin-top:10px; width:100%; }
.datatable p.right+.data{margin-top:0px}
.datatable .data th,
.datatable .data td { padding:10px 10px; border:1px solid #ccc; }
.datatable .data thead th { padding:10px 0px; border:1px solid #95bedf; background:#f0f5f8; color:#0d6aca; }
.datatable .data tbody th { background:#f8f8f8; }
.datatable .data tr:first-child { border-top:2px solid #5888ba; }
.datatable .data td .ssssblet { font-size:15px; }
.datatable .data>thead+tbody>tr:first-child { border-top:0px; }
.datatable .data>thead+tbody>tr:first-child td,
.datatable .data>thead+tbody>tr:first-child th { border-top:0px solid #ccc; }

#detail_con { padding:30px 0; }

#tab { overflow:hidden; margin-top:30px; }
#tab>ul>li { float:left; text-align:center; border:1px solid #ddd; box-sizing:border-box; }
#tab>ul>li>a { display:block; padding:20px; background:#f8f8f8; }
#tab>ul>li.select { border-top:2px solid #2d79e0; }
#tab>ul>li.select>a { padding-bottom:19px; background:#fff; font-weight:600; }
#tab>ul.col2>li { width:50%;}
#tab>ul.col3>li { width:33.3%;}
#tab>ul.col4>li { width:25%;}
#tab>ul.col5>li { width:20%;}

.con_box { padding:25px; background:#fff; border:1px solid #ddd; box-shadow:0 3px 0 0 #ddd; }
.con_box>p { margin-top:0px; font-size:16px; font-weight:600; }
.con_box>.inner{ margin-top:10px; padding:20px; background:#f8f8f8; border:1px solid #ddd; }
.inner{ padding:20px; background:#f8f8f8; border:1px solid #ddd; }

.con_box_n { padding:25px 0; background:#fff; }
.con_box_n p { margin-bottom:10px; }

.btn_link { margin-top:30px; text-align:center; }
.btn_link a { padding:16px 20px; background:#fff; color:#2d70bc; font-weight:600; border:1px solid #ccc; }
.btn_link a span { padding-right:15px; background:url('/open_content/tour/images/sub/left_arrow.gif') no-repeat right center ; }
.btn_link a.type02 span { padding-right:18px; background:url('/open_content/tour/images/contents/a_btn.gif') no-repeat right center; }

.btn_link2 { margin-top:30px; text-align:left; }
.btn_link2 a { padding:12px 20px; background:#fff; color:#2d70bc; font-weight:600; border:1px solid #ccc; }
.btn_link2 a span { padding-right:15px; background:url('/open_content/tour/images/sub/left_arrow.gif') no-repeat right center ; }

a.a_btn { margin-left:10px; padding:6px 12px; background:#fff; border:1px solid #2d70bc; border-radius:20px; color:#2d70bc; font-size:12px; font-weight:600; }
a.a_btn span { padding-right:18px; background:url('/open_content/tour/images/contents/a_btn.gif') no-repeat right center ; }

.outlink { margin-top:3%; background:url(/open_content/main/images/contents/outlink_bg.gif) no-repeat center -120px; }
.outlink p { text-align:center; }
.outlink p img { border:1px solid #ddd; border-top:1px solid #eee; border-bottom:1px solid #dcdcdc; box-shadow:0px 1px; }

/*서구 관광안내지도*/
.seogu_map { position:relative; }
.seogu_map .label { position:absolute; left:0px; top:0px; padding:35px 50px 35px 35px; background:rgba(0,0,0,0.55); }
.seogu_map .label p { margin-top:10px; color:#fff; font-weight:600; font-size:14px; text-shadow:1px 1px 1px #4b4b4a; }

.cover_wrap { position:relative; height:403px; }
.cover_wrap img { max-width:100%; }
.cover_wrap .txt_box { position:absolute; left:0px; top:68px; padding:37px 0; width:100%; background:rgba(0,0,0,0.35); }
.cover_wrap .txt_box div { padding-bottom:30px; background:url('/open_content/tour/images/contents/cover_txt_line.gif') no-repeat bottom center; font-family:'Nanum Myeongjo',serif; font-size:30px; color:#fff; text-align:center; text-shadow:1px 2px 1px #4a4b4c; }
.cover_wrap .txt_box div p { font-family:'Nanum Myeongjo',serif; font-size:40px; font-weight:600; color:#fff; }
.cover_wrap .txt_box>p { margin-top:30px; font-size:16px; color:#fff; text-align:center; text-shadow:1px 2px 1px #4a4b4c; }
.cover_wrap .txt_box>p>span { display:block; }

.photo_wrap { margin-top:15px; margin-bottom:50px; }
.photo_wrap>ul { display:block; overflow:hidden; clear:both; }
.photo_wrap>ul>li { display:inline-block; position:relative; float:left; width:100%; height:341px; }
.photo_wrap>ul>li>img { width:100%; }
.photo_wrap>ul>li>span.label { position:absolute; right:0px; bottom:0px; padding:3px 15px; background:#000; font-size:14px; color:#fff; }
.photo_wrap>ul.col2>li { width:49.5%; height:341px; margin:0 0.5%; }
.photo_wrap>ul.col3>li { width:32.6%; margin:0 0.5%; }
.photo_wrap>ul>li:first-child { margin-left:0; }
.photo_wrap>ul>li:last-child { margin-right:0; }
.photo_wrap .txt { margin-top:20px; }
.photo_wrap .txt p.tit { margin-top:15px; margin-bottom:10px; font-size:18px; font-weight:600; color:#3c3c3c; }

.photo_horizontal { overflow:hidden; margin-top:15px;}
.photo_horizontal .thum { float:left; width:40%; }
.photo_horizontal .thum img { max-width:100%; }
.photo_horizontal .txt { float:left; margin-top:10px; margin-left:30px; width:50%;}
.photo_horizontal .txt p { font-size:16px; font-weight:600; color:#3c3c3c; }

.photo_horizontal2 { overflow:hidden; margin-top:15px;}
.photo_horizontal2 .thum { float:left; width:25%; }
.photo_horizontal2 .thum img { max-width:100%; }
.photo_horizontal2 .txt { float:left; margin-top:10px; margin-left:10px; width:70%;}
.photo_horizontal2 .txt p { font-size:16px; font-weight:600; color:#3c3c3c; }

.photo_horizontal3 { margin-top:15px;}
.photo_horizontal3 div.wrap { padding-bottom:30px; overflow:hidden; }
.photo_horizontal3 div.wrap .thum { float:left; width:35%; }
.photo_horizontal3 div.wrap .thum img { max-width:100%; }
.photo_horizontal3 div.wrap .txt { float:left; margin-top:10px; margin-left:30px; width:60%;}
.photo_horizontal3 div.wrap .txt p { font-size:16px; font-weight:600; color:#3c3c3c; }

.line_box { padding:5px; margin-bottom:20px; background:url('/open_content/tour/images/contents/line_box_bg.gif') repeat left top; }
.line_box .inner { padding:30px; background:#fff; }
.line_box .inner p { font-size:18px; font-weight:600; color:#000; }
.line_box .inner>ul { margin-top:30px; }
.line_box .inner>ul>li { padding:22px 0 22px 55px; }
.line_box .inner>ul>li.relation01 { background:url('/open_content/tour/images/contents/relation_ico01.gif') no-repeat left 10px; }
.line_box .inner>ul>li.relation02 { background:url('/open_content/tour/images/contents/relation_ico02.gif') no-repeat left 10px; }
.line_box .inner>ul>li.relation03 { background:url('/open_content/tour/images/contents/relation_ico03.gif') no-repeat left 10px; }
.line_box .inner>ul>li.relation04 { background:url('/open_content/tour/images/contents/relation_ico04.gif') no-repeat left 10px; }
.line_box .inner>ul>li.relation05 { background:url('/open_content/tour/images/contents/relation_ico05.gif') no-repeat left 10px; }

.cover_thum { overflow:hidden; margin-top:10px; }
.cover_thum>ul>li { position:relative; float:left; margin:0 7.5px; }
.cover_thum>ul>li:first-child { margin-left:0; }
.cover_thum>ul>li:last-child { margin-right:0; }
.cover_thum>ul>li>img { width:100%; height:191px; }
.cover_thum>ul.col4>li { width:212px; height:191px; }
.cover_thum>ul.col2>li { width:212px; height:191px; }
.cover_thum>ul>li>p.label { position:absolute; left:0px; bottom:0px; padding:10px 0; width:100%; background:rgba(0,0,0,0.5); font-size:14px; color:#fff; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

/*구립합창단*/
.performance_thum { overflow:hidden; margin-top:10px; }
.performance_thum>ul>li { position:relative; float:left; margin:0 7.5px; }
.performance_thum>ul>li:first-child { margin-left:0; }
.performance_thum>ul>li:last-child { margin-right:0; }
.performance_thum>ul>li>img { width:100%; }
.performance_thum>ul>li>p.label { font-size:14px; color:#000; text-align:center; }

/*지도API*/
.api_map { margin-top:15px; border:1px solid #ddd; }

/*이미지 리사이징*/
.sizing { margin-top:40px; }
.sizing img { max-width:100%; }

ul.box:after { display:block; overflow:hidden; clear:both; content:''; }
ul.box li { float:left; margin:0.5%; padding:15px; width:20%; text-align:center; border:1px solid #ddd; font-size:14px; letter-spacing:-1px; }
ul.box li:hover { border:1px solid #c1c1c1; }
ul.box li.waterway { padding:0px 15px; border:1px solid #2d70bc; text-align:center}
ul.box li.waterway a { display:block; padding:15px 0px; color:#2d70bc; font-weight:600; }
ul.box li.waterway span { display:inline-block; padding-right:18px; background:url('/open_content/tour/images/contents/a_btn.gif') no-repeat right center ; }

.map img { width:100%; border:1px solid #ddd; }

/*정서진호 예약 라벨*/
.calendar div.day>ul.td li p.date { width:100%; }
.calendar div.day>ul.td li p.btn_pk { font-size:13px; letter-spacing:-0.5px; }

/* Overline Reveal */
.hvr-overline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; }
.hvr-overline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; background: #2d70bc; height: 4px; -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); }

/* Outline Out */
.hvr-outline-out { -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; }
.hvr-outline-out:before { content: ''; position: absolute; border: #4d92e0 solid 2px; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; }
.hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before { top: -7px; right: -7px; bottom: -7px; left: -7px; }

/* Icon Forward */
.hvr-icon-forward { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; }
.hvr-icon-forward:before { content: "\f138"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.hvr-icon-forward:hover:before, .hvr-icon-forward:focus:before, .hvr-icon-forward:active:before { -webkit-transform: translateX(4px); transform: translateX(4px); }

/* 청라투어 */
.course_route{display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; margin-bottom: 20px;}
.course_route:before{display: block; content: ''; position: absolute; left: 10%; right: 10%; top: 40px; height: 1px; border:3px dotted #ddd}
.course_route>li{display: flex; align-items: center; flex-direction: column; position: relative; min-width: 90px; width: 13.7%; max-width: 115px; text-align: center; word-break: keep-all;}
.course_route>:is(li:first-child, li:last-child){width: auto;}
.course_route>li.arr{min-width: unset; width: 18px; height: 18px; margin:4% 0px; border:2px solid rgba(255,100,0,1); border-radius:50px;  box-sizing: border-box; background: #fff;}
.course_route>li.arr:After{display: block; content: ''; width:5px; height: 5px; margin-right: 2px; margin-top: 3px; border:3px solid rgba(255,100,0,1); border-width:3px 3px 0px 0px; transform: rotate(45deg) scale(.9);}
.course_route>:where(li:nth-first-child(2), li:nth-last-child(2)){background: rgb(82,115,200); border-color:rgb(82,115,200)}
.course_route>:where(li:nth-first-child(2), li:nth-last-child(2)):After{border-color: #fff;}
.course_route>li .img{display: flex; justify-content:center; align-items: center; border-radius:7px; overflow:hidden; font-size: 0px; width: 100%; height:80px; background: #f0f0f0;}
.course_route>li:not(:first-child, :last-child) .img img{width: 100%;  height:100%; object-fit:cover; image-rendering: auto;}
.course_route>:is(li:first-child, li:last-child) .img{background:transparent;}
.course_route>:is(li:first-child, li:last-child) .img img{width: 40px;}
.course_route .time{display: flex; gap:3px; align-items: center; justify-content: center; margin:5px 0px; padding:3px .8em; font-size: .8em; border-radius:50px; background: rgba(195,240,240); color: rgba(0,0,0,.6); font-weight: bold;}
.course_route .time .order{display:none; width: 15px; height: 15px; line-height: 15px; BORDER:2PX SOLID #333; border-radius:50px; font-size: 11px; font-weight: bold;}
.course_route li:first-child .order, .course_route li:last-child .order{text-indent: -5000px;}
.course_route .spot{font-size: .9em; letter-spacing: -1px;}
@media all and (max-width:640px) {
	.course_route{justify-content: flex-start; }
	.course_route:before{display: none;}
	.course_route>li{width: 150px; margin-top: 20px;}
	.course_route>li.arr{margin:50px 10px}
}

@media all and (max-width:1150px){
	.seogu_map img { max-width:100%; }

	.cover_wrap { height:100%; }
	.cover_wrap .txt_box { position:relative; left:0px; top:0px; padding:20px 0; background:#fff; }
	.cover_wrap .txt_box div { padding-bottom:20px; background:none; font-size:20px; color:#333; text-shadow:0px 0px 0px; }
	.cover_wrap .txt_box div p { color:#333; font-size:30px; }
	.cover_wrap .txt_box>p { margin-top:0px; font-size:14px; text-shadow:0px 0px 0px; color:#484848; }
	.cover_wrap .txt_box>p>span { display:inline; }

	ul.box li { width:43.5%; }

	.photo_wrap>ul>li { display:block; width:100%; height:100%; }
	.photo_wrap>ul>li>span.label { bottom:6px; }
	.photo_wrap>ul.col2>li { width:100%; height:100%; margin:0 0%; }

	.photo_horizontal .thum { width:100%; }
	.photo_horizontal .txt { margin-top:10px; margin-left:10px; width:100%; }

	.cover_thum>ul>li { margin:0 0px; }
	.cover_thum>ul>li>img { width:100%; height:100%; }
	.cover_thum>ul.col4>li { width:50%; height:200px; }
	.cover_thum>ul.col2>li { width:100%; height:200px; }
	.cover_thum>ul>li>p.label { position:absolute; left:0px; bottom:0px; padding:10px 0; width:100%; background:rgba(0,0,0,0.5); font-size:14px; color:#fff; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
}

@media all and (max-width:768px){
	ul.box li { padding-right:40px; width:auto; }

	.calendar.reservation div.day>ul.td p { padding:5px 10px; }
}

@media all and (max-width:640px){
	a.a_btn { display:inline-block; margin-top:10px; margin-left:0px; }

	.performance_thum>ul>li { width:50%; margin:0 0px; }
}