@charset "utf-8";

@import "sub01.css";
@import "sub02.css";

@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);
* {font-family: 'Noto Sans SC', sans-serif !important;}


/* ====================== GNB 스타일 ====================== */
.headWrap .logo a.portal {width:230px; background:url('../img/common/logo.svg') no-repeat 0% 50%;}
.headWrap .logo a.other {display:none;}

.lnbWrap {padding-right:0; text-align:right;}
.lnb_nav .li_depth01 > a > span {padding:0 60px;}
.lnb_nav .li_depth01.on > a, .lnb_nav .li_depth01.active > a {color:#003583;}

#m_menu .li_depth1.open > a {background: #003583;}
#m_menu .depth3 {background: #e2f2f8;}


/* ====================== SNB 스타일 ====================== */

#snbWrap h2 {font-size:2.6rem; background:#1aaed8;}
.spot_list >li:last-child >a,
.spot_list a:hover {color:#003583;}



/* ====================== 버튼 스타일 ====================== */
.button {border:1px solid #1aaed8; color:#1aaed8 !important;}
.button:hover {background:#1aaed8; border:1px solid #1aaed8;}


/* ====================== step flow ====================== */
#conts .flow .item .tit .cell {padding: 1em 0.5em;font-size:1.6rem;}


/* ====================== 인사말 ====================== */

#conts .greeting {position:relative; z-index:0; background:none; padding:0; margin:0;}
#conts .greeting .tit {position:relative; z-index:0; background:no-repeat left top #fff; padding:0 50px; background-size:cover; width:auto; height:auto; box-shadow:none; font-size:3.4rem; z-index:0;}
#conts .greeting .tit:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; background:url('/dept/img/content/common/frame_tour_content.svg') no-repeat 0 0; background-size:100% 100%;}
#conts .greeting .tit:after {display:none;}
#conts .greeting .tit p {display:block;position:relative;padding: 90px 0px 90px;max-width:770px;margin:0 auto;color:#fff;font-size: 1.2em;font-weight:100;line-height:1.3;}
#conts .greeting .tit p:before {content:'"';display:block;position:absolute;font-family:'NanumSquare', sans-serif;color: #216cda;font-style:italic;font-size:10.4rem;font-weight:800;top:-.5em;left:.2em;transform:rotate(180deg);-webkit-transform:rotate(180deg);}
#conts .greeting .tit p strong {font-weight:600;}
#conts .greeting:after {display:none;}

#conts .greeting.ty02 .txt{text-align:center;}
#conts .greeting.ty02 .txt .c-tit{color:#216cda;background: #eff8fc;font-size: 2.5rem;padding: 0.5rem 1rem;}


#conts .infoWrap {display:table; table-layout:fixed; width:100%; margin:-6.8rem auto 0; position:relative; z-index:1; padding:0 2rem 4rem; background:url('/dept/img/content/common/greeting_pttr.png') repeat-x 0 100%;}
#conts .infoWrap > * {display:table-cell;vertical-align:top;text-align:center;padding: 0 0.5rem;word-break:keep-all;}
#conts .infoWrap dt {display:block; position:relative; font-size:2rem; color:#000; font-weight:600;}
#conts .infoWrap dt:before {content:""; display:block; position:relative; width:10rem; height:10rem; margin:0 auto 2.4rem; background:url(/english/img/common/ico_greeting_info_addr.png) no-repeat 50% 50%; background-size:contain;}
#conts .infoWrap .location dt:before {background-image:url(/english/img/common/ico_greeting_info_location.png);}
#conts .infoWrap .homepage dt:before {background-image:url(/english/img/common/ico_greeting_info_site.png);}
#conts .infoWrap .tel dt:before {background-image:url(/english/img/common/ico_greeting_info_tel.png);}
#conts .infoWrap dd {margin-top:1.5rem; font-size:1.6rem; line-height:1.5;}

#conts .greeting .txt {margin-top:0; padding:7rem 0; background:url('/dept/img/content/common/greeting_pttr.png') repeat-x 0 100%;}

.btn-wrap-box {position:relative; padding:1em; text-align:center; margin:2rem 0; 	background: rgb(1,195,204);	background: linear-gradient(90deg, rgba(1,195,204,0.1) 0%, rgba(2,124,246,0.1) 100%);}
.btn-wrap-box .icon{background: #fff;}
.btn-wrap-box .icon:hover {background: #216cda !important; }

@media all and (max-width:820px) {
	#conts .greeting .tit {padding:0 5rem; font-size:3rem;}
	#conts .greeting .tit p {padding:6rem 0 9rem;}
	#conts .greeting .tit p:before {font-size:9rem;}

	#conts .infoWrap {padding:0 0 4rem;}
	#conts .infoWrap dt {font-size:1.8rem;}
	#conts .infoWrap dt:before {width:9rem; height:9rem;}
	#conts .infoWrap dd {font-size:1.6rem;}
}
@media all and (max-width:640px) {
	#conts .greeting .tit {border-radius:3rem 0 3rem 0; padding:0 3rem;}
	#conts .greeting .tit:before {display:none;}
	#conts .greeting .tit p {padding:4rem 0 6rem;}
	#conts .greeting .tit p:before {display:none;}

	#conts .infoWrap {display:block; margin-top:1.5rem;}
	#conts .infoWrap dl {display:table; width:100%; table-layout:fixed; padding:0;}
	#conts .infoWrap dl + dl {margin-top:.5rem;}
	#conts .infoWrap dl > * {display:table-cell; vertical-align:middle;}
	#conts .infoWrap dl dt {width:10rem;padding:1rem;background: #377ade;color:#fff;border-radius:1rem;font-weight:400;font-size:1.6rem;word-break: break-all;}
	#conts .infoWrap dt:before {display:none; width:5rem; height:5rem; margin-bottom:1.5rem; margin:0 auto;}
	#conts .infoWrap dd {font-size:1.6rem;text-align: left;padding-left: 2rem;}

	#conts .greeting .txt { padding:2rem 0;}

}
@media all and (max-width:480px) {
	#conts .greeting .tit {padding:0 3rem; font-size:2.7rem; text-align:center; font-size:2rem;}
	#conts .greeting .tit strong {display:block; font-size:1.6em; padding-top:.5rem;}
}


#conts .greeting[data-name="과천도시공사"] .tit {background-image:url('/dept/img/content/common/greeting_bg0802030100.jpg');}
#conts .greeting[data-name="관문체육공원"] .tit {background-image:url('/dept/img/content/common/greeting_bg0803010100.jpg');}
#conts .greeting[data-name="문원체육공원"] .tit {background-image:url('/dept/img/content/common/greeting_bg0803010200.jpg');}
#conts .greeting[data-name="서울대공원"] .tit {background-image:url('/dept/img/content/common/greeting_bg0803030100.jpg');}
#conts .greeting[data-name="중앙공원"] .tit {background-image:url('/dept/img/content/common/greeting_bg0803030200.jpg');}
#conts .greeting[data-name="에어드리공원"] .tit {background-image:url('/dept/img/content/common/greeting_bg0803030300.jpg');}
#conts .greeting[data-name="관악산"] .tit {background-image:url('/dept/img/content/common/greeting_bg0804010100.jpg');}
#conts .greeting[data-name="청계산"] .tit {background-image:url('/dept/img/content/common/greeting_bg0804020100.jpg');}
#conts .greeting[data-name="선바위미술관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806010200.jpg');}
#conts .greeting[data-name="국립현대미술관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806010300.jpg');}
#conts .greeting[data-name="정보과학도서관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806020100.jpg');}
#conts .greeting[data-name="경기도립과천도서관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806020200.jpg');}
#conts .greeting[data-name="문원도서관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806020300.jpg');}
#conts .greeting[data-name="말박물관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806030200.jpg');}
#conts .greeting[data-name="아해박물관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806030300.jpg');}
#conts .greeting[data-name="한국카메라박물관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806030400.jpg');}
#conts .greeting[data-name="렛츠런파크"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806040000.jpg');}
#conts .greeting[data-name="과천서울랜드"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806050000.jpg');}
#conts .greeting[data-name="국립과천과학관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806060000.jpg');}
#conts .greeting[data-name="과천문화원"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806070000.jpg');}
#conts .greeting[data-name="경기소리전수관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806080000.jpg');}
#conts .greeting[data-name="역사자료관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806090000.jpg');}
#conts .greeting[data-name="안보교육관"] .tit {background-image:url('/dept/img/content/common/greeting_bg0806100000.jpg');}
#conts .greeting[data-name="블랑모텔"] .tit {background-image:url('/dept/img/content/common/greeting_bg0808040100.jpg');}

/* ====================== depth 말고 콘텐츠 탭 ====================== */

#conts .contTab {margin:50px 0 10px;}
#conts .contTab ul:after {content:''; clear:both; display:table;}
#conts .contTab li {width:20%; float:left; padding:1.5rem 2rem; border:1px solid #1aaed8; border-right-width:0; color:#1aaed8; text-align:center; cursor : pointer;}
#conts .contTab li:last-child {border-right-width:1px;}
#conts .contTab li.on {background: #1aaed8; color:#fff;}
#conts .contWrap {background:#fdfdfd;border:1px solid #eee; border-top: 2px solid #1aaed8; padding:2rem 3rem;overflow-y:scroll;}
#conts .contWrap > div {height:500px;}
#conts .contWrap dl{display:table; table-layout: fixed; width:100%; border-bottom:1px solid #ddd; padding:1.5rem; line-height:1.5; }
#conts .contWrap dl:last-child {border-bottom:none; padding-bottom:30px;}
#conts .contWrap dt{display:table-cell;width:15%;color: #003583;}
#conts .contWrap dd{display:table-cell; width:100%; }
#conts .contWrap dd em { display:block; color:#777; font-weight:300;}

@media all and (max-width:1024px) {
	#conts .contWrap dt{width:20%; }
}

@media all and (max-width:640px) {
	#conts .contTab li {width:50%;}
	#conts .contWrap dl {display:block; padding:1.5rem 0;}
	#conts .contWrap dt,
	#conts .contWrap dd { display:block; width:100%; }
	#conts .contWrap dt br {display:none;}
}

@media all and (max-width:320px) {
	#conts .contTab li {width:100%;}
	#conts .contWrap {padding:1.5rem;}
}


/* 자매연결도시 */
#conts .contTab.city li {width:50%;}
#conts .contWrap.city {background:none;border:none; border-top: none ;padding:0; overflow-y:inherit; margin-top:30px;}
#conts .contWrap.city > div {height:auto;}
#conts .contWrap.city dl {border-bottom:none; padding:0;}



/* 문화관광 : 유명 명소 */

#conts .cuturalWrap:not(:first-child) {margin-top:40px;}
#conts .cuturalWrap .info {width:100%; display:table; table-layout:fixed; line-height:1.7; margin-bottom:30px;}
#conts .cuturalWrap .info .cell {display:table-cell; vertical-align: middle;}
#conts .cuturalWrap .info .num {color:#1aaed8; font-weight:700;  font-size:1.5rem;}
#conts .cuturalWrap .info .thumb {width: 30rem;padding:0;text-align:center;}
#conts .cuturalWrap .info .s-title {color:#003583 !important;font-size: 3rem !important;border-bottom: 1px dashed #ddd;padding-bottom:1rem;}
#conts .cuturalWrap .info dl {width:100%; display:table; table-layout:fixed;  font-size:1.6rem;}
#conts .cuturalWrap .info dl dt {display:table-cell;vertical-align:top;width: 180px;border-bottom:1px solid #003583;font-weight:700;padding:10px 0;}
#conts .cuturalWrap .info dl dd {display:table-cell; vertical-align:top; border-bottom:1px solid #ddd; padding:10px;}

#conts .cuturalWrap .flx-cont {border-radius:0; }
#conts .cuturalWrap .flx-cont h5 {color:#333;}

@media all and (max-width:640px) {
	#conts .contTab.city li {width:100%; float:none; border:1px solid #1aaed8;}
	#conts .cuturalWrap .info{display:block; padding:.5rem 0; min-height:0;}
	#conts .cuturalWrap .info dl dt{width:140px;}
	#conts .cuturalWrap.tradition .info dl dt{width:140px;}
	#conts .cuturalWrap .info .cell {display:block; padding:1rem 0rem;}
	#conts .cuturalWrap .info .thumb {width:auto; padding-bottom:0; text-align:center;}
	#conts .cuturalWrap .info .thumb + .cell {padding-left:0rem;}
}

@media all and (max-width:375px) {
	#conts .cuturalWrap .info{display:block; padding:.5rem 0; min-height:0;}
	#conts .city .cuturalWrap .info dl dt,
	#conts .cuturalWrap.tradition .info dl dt,
	#conts .cuturalWrap .info dl dt{display:block; width:100%; border-bottom:0;}
	#conts .cuturalWrap .info dl dd {display:block; width:100%; padding:0 0 10px;}
}


#conts .cuturalWrap.sight  .info .thumb {text-align:left;}
#conts .cuturalWrap.sight .info .num {color:#1aaed8; font-weight:700;  font-size:1.5rem;}
#conts .cuturalWrap.sight .info dl dt {width:120px;}

#conts .cuturalWrap.sight .txt {background:#f5f7f8; padding:3rem;}
#conts .cuturalWrap.sight .txt .point  {margin-top:30px;}
#conts .cuturalWrap.sight .txt .point p {font-size:1.5rem;}
#conts .cuturalWrap.sight .txt .point .tit {color:#189d7f !important; font-weight:700;}


.cuturalWrap{padding-bottom: 3rem;border-bottom: 2px solid #e8e8e8;}
.cuturalWrap:last-child{border-bottom-width: 0;}

/* 과천축제 */
#conts .festival {position:relative;}
#conts .festival .title{ position:absolute; left:0; top:0; right:0; bottom:0; z-index:9;}

#conts .festival .control {position:absolute; left:0; bottom:2px; width:150px; line-height:50px; padding: 0 15px; background:rgba(0,0,0, 0.7); z-index:10;}
#conts .festival .control .swiper-button-next,
#conts .festival .control .swiper-button-prev  {position:relative;display:inline-block;left:auto;right:auto;top:auto;margin-top:0;width:20px;height:18px;z-index:15;vertical-align: middle;}
#conts .festival .control .swiper-button-next {background:url("/english/img/content/03/ico_next.png") no-repeat right 0;  border-left:1px solid #ddd;}
#conts .festival .control .swiper-button-prev {background:url("/english/img/content/03/ico_prev.png") no-repeat left 0; }
#conts .festival .control .swiper-pagination {display: inline-block; position:relative; width:auto;top:auto;bottom: auto; left: auto; padding:0 20px;color:#fff;vertical-align: middle;}


#conts .festival-Wrap {margin:30px 0;}
#conts .festival-Wrap > p  {margin-bottom:20px;}
#conts .festival-Wrap .info {width:100%; background:#e6f2f5; padding:0px 30px; margin-top:3rem;}
#conts .festival-Wrap .info:after {content:''; clear:both; display:table;}
#conts .festival-Wrap .info  * {display:inline-block; font-size:2.0rem; line-height: 72px;}
#conts .festival-Wrap .info .tit {font-weight:700;  }
#conts .festival-Wrap .info > div {float:right;}
#conts .festival-Wrap .info dl {margin-left:30px;}
#conts .festival-Wrap .info dl dt {position:relative; padding-left:35px; margin-right:10px;}
#conts .festival-Wrap .info dl dd {border-bottom:0;}
#conts .festival-Wrap .info dl dd a {color:#2f318f; text-decoration:underline;}
#conts .festival-Wrap .info .web dt:before {content:''; width:24px; height:22px; position:absolute; top:25px; left:0; background:url("/english/img/content/03/ico_web.png") no-repeat;}
#conts .festival-Wrap .info .tel dt:before {content:''; width:28px; height:22px; position:absolute;  top:25px; left:0; background:url("/english/img/content/03/ico_tel.png") no-repeat;}

@media all and (max-width:1024px) {
	#conts .festival-Wrap .info  .tit {display:block; margin-bottom:15px;}
	#conts .festival-Wrap .info > div {float:none; width:100%;}
	#conts .festival-Wrap .info dl {margin-left:0; width:49%;}
	
	#conts .festival-Wrap .info {padding: 20px 30px;}
	#conts .festival-Wrap .info  * {line-height: 1.4em;}
	#conts .festival-Wrap .info .web dt:before,
	#conts .festival-Wrap .info .tel dt:before {top:5px;}
}

@media all and (max-width:820px) {
	#conts .festival-Wrap > p br  {display:none;}
	#conts .festival-Wrap .info dl {display:block; width:100%; padding:10px 0;}
}

@media all and (max-width:640px) {
	#conts .festival {padding-bottom:50px;}
	#conts .festival .control {width:100%; bottom:1px;}
	#conts .festival-Wrap .info * {font-size:1.6rem;}
}