@charset "UTF-8";

section.intro-page {}
section.intro-page h1.base-title {position:absolute;font-size:240px;letter-spacing:-1px;color:#fff;}
section.intro-page h2.section-title {
	font-weight:200;
	font-size:24px;
	line-height:24px;
	text-align:center;
	background-repeat:no-repeat;
	background-position:50% 157px;
}
section.intro-page h2.section-title span {display:block;font-weight:600;font-size:30px;line-height:30px;}
section.intro-page span.line-feed {display:block;}

/* 서비스 소개 */
section.intro-page div.introduction {
	position:relative;
	height:700px;
	text-shadow:#000 5px 0 20px;
	color:#fff;
	background-color:#18305e;
	background-repeat:no-repeat;
	background-position:50% 0;
	background-size:cover;
}
div.introduction.type_0 {background-image:url('/images/kccf/site/bg_introduction_0.png');}
div.introduction.type_1 {background-image:url('/images/kccf/site/bg_introduction_1.png');}
div.introduction div.inner-center {display:flex;flex-direction:column;justify-content:center;position:relative;height:100%;z-index:10;}
div.introduction div.inner {}
div.introduction div.inner strong.goal {display:block;font-size:24px;font-weight:200;}
div.introduction div.inner strong.goal span {font-weight:600;}
div.introduction div.inner img.logo {display:block;margin-top:15px;}
div.introduction div.inner p {font-weight:200;line-height:34px;}
div.introduction div.inner p.summary {margin-top:40px;font-size:24px;}
div.introduction div.inner p.description{margin-top:35px;font-size:18px;}
div.introduction div.inner p strong {font-weight:600;}

/* 주요 서비스 */
section.intro-page div.main-service {overflow:hidden;position:relative;height:732px;background-color:#457db0;}
div.main-service h1.base-title {left:50%;bottom:0;line-height:210px;opacity:0.05;}
div.main-service h2.section-title {padding:80px 0 120px;color:#fff;background-image:url('/images/kccf/site/bg_title_line_light.png');}
div.main-service div.gallery-banner {display:flex;height:352px;z-index:10;}
div.main-service div.gallery-banner > div {width:50%;height:100%;}
div.main-service div.gallery-banner .swiper-container {height:100%;}
div.main-service div.gallery-banner .left-banner .gallery {min-width:700px;}
div.main-service div.gallery-banner .left-banner .gallery ul li {color:#fff;opacity:0 !important;background-color:#457db0;}
div.main-service div.gallery-banner .left-banner .gallery ul li:after {clear:both;content:'';display:block;}
div.main-service div.gallery-banner .left-banner .gallery ul li.swiper-slide-active {opacity:1 !important;}
div.main-service div.gallery-banner .left-banner .gallery ul li div.inner {display:flex;flex-direction:column;justify-content:center;float:right;width:700px;height:100%;}
div.main-service div.gallery-banner .left-banner .gallery ul li div.inner strong.title {font-weight:800;font-size:40px;}
div.main-service div.gallery-banner .left-banner .gallery ul li div.inner p.desc {margin-top:15px;font-weight:200;font-size:18px;line-height:30px;}
div.main-service div.gallery-banner .left-banner .gallery ul li div.inner .link-direct {
	display:inline-block;
	width:128px;
	height:44px;
	margin-top:55px;
	border:1px solid #fff;
	border-radius:30px;
	line-height:44px;
	text-align:center;
}
div.main-service div.gallery-banner .left-banner .gallery ul li div.inner button.link-direct {background-color:transparent;}
div.main-service div.gallery-banner .right-banner .thumbs {padding:10px 0;margin-left:-47px;}
div.main-service div.gallery-banner .right-banner .thumbs ul li {
	width:556px !important;
	height:332px;
	box-shadow: 7px -2px 10px rgba(0,0,0, 0.4);
	border-radius:10px;
	background-color:transparent;
}
div.main-service div.gallery-banner .right-banner .thumbs ul li img {width:100%;opacity:0.5;transition:opacity 0.2s;}
div.main-service div.gallery-banner .right-banner .thumbs ul li.swiper-slide-active img {opacity:1;}
div.main-service div.current-count {position:absolute;left:0;right:0;bottom:130px;width:100%;z-index:100;}
div.main-service div.current-count span.now,
div.main-service div.current-count span.total,
div.main-service div.current-count .swiper-pagination {vertical-align:middle;}
div.main-service div.current-count span.now,
div.main-service div.current-count span.total {font-weight:800;font-size:18px;color:#fff;}
div.main-service div.current-count .swiper-pagination {display:inline-block;position:static;margin:0 10px;font-size:0;line-height:0;}
div.main-service div.current-count .swiper-pagination span {height:1px;border-radius:0;background-color:#fff;opacity:0.2;}
div.main-service div.current-count .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {width:20px;height:2px;opacity:1;}
div.main-service div.side-navi {position:absolute;left:0;top:50%;margin-top:35px;width:100%;height:0;}
div.main-service div.side-navi span.swiper-button-prev,
div.main-service div.side-navi span.swiper-button-next {
	top:0;
	width:36px;
	height:66px;
	margin:0;
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:auto auto;
	opacity:0.8;
}
div.main-service div.side-navi span.swiper-button-prev {left:7.4%;background-image:url('/images/kccf/btn/btn_left_arrow_size36x66_fff.png');}
div.main-service div.side-navi span.swiper-button-next {right:7.4%;background-image:url('/images/kccf/btn/btn_right_arrow_size36x66_fff.png');}
div.main-service div.side-navi span.swiper-button-prev:hover,
div.main-service div.side-navi span.swiper-button-next:hover {opacity:1;}

/* 서비스 현황 */
section.intro-page div.service-status {position:relative;height:536px;background-color:#e6eaee;}
div.service-status h1.base-title {left:0;top:0;line-height:165px;opacity:0.3;}
div.service-status h2.section-title {padding:80px 0 90px;background-image:url('/images/kccf/site/bg_title_line_dark.png');}
div.service-status div.inner-center {display:flex;position:relative;text-align:center;}
div.service-status div.inner-center span.date {position:absolute;right:15px;;top:0;color:#777;}
div.service-status div.inner-center div.indicator {flex:1;}
div.service-status div.inner-center div.indicator h3 {display:block;font-weight:600;font-size:20px;}
div.service-status div.inner-center div.indicator.local-culture-data h3 {color:#005eb8;}
div.service-status div.inner-center div.indicator.content-provided h3 {color:#0096a5;}
div.service-status div.inner-center div.indicator ul {display:flex;height:200px;margin-top:15px;color:#fff;}
div.service-status div.inner-center div.indicator.local-culture-data ul {border-radius:10px 0 0 10px;background-color:#005eb8;}
div.service-status div.inner-center div.indicator.content-provided ul {border-radius:0 10px 10px 0;background-color:#0096a5;}
div.service-status div.inner-center div.indicator ul > li {display:flex;flex-direction:column;justify-content:center;width:50%;border-left:1px solid #e6eaee;}
div.service-status div.inner-center div.indicator.local-culture-data ul > li:first-child {border-left:none;}
div.service-status div.inner-center div.indicator ul > li strong {display:block;font-weight:200;font-size:20px;}
div.service-status div.inner-center div.indicator ul > li div.count {font-weight:400;font-size:20px;}
div.service-status div.inner-center div.indicator ul > li div.count span.num {font-size:50px;}

/* 참여 협력사 */
section.intro-page div.participation-organization {height:330px;background-color:#edf0f3;}
div.participation-organization ul.inner-center {box-sizing:border-box;display:flex;justify-content:center;align-items:center;height:100%;}
div.participation-organization ul.inner-center > li {
	box-sizing:border-box;
	width:50%;
	padding-left:20px;
	background:url('/images/kccf/icon/bul_triangle_right_arrow_size7x8_98a2af.png') no-repeat 0 16px;
}
div.participation-organization ul.inner-center > li:first-child { min-height:184px; }
div.participation-organization ul.inner-center > li strong {display:block;font-weight:600;font-size:28px;color:#444;}
div.participation-organization ul.inner-center > li p {margin-top:10px;font-size:18px;}
div.participation-organization ul.inner-center > li p a.outlink {
	display:inline-block;
	width:19px;
	height:18px;
	margin-left:10px;
	vertical-align:middle;
	text-indent:-9999px;
	background:url('/images/kccf/btn/btn_outlink_size19x18_154b92.png') no-repeat 0 0;
}
div.participation-organization ul.inner-center > li p.down_T { margin-top:5px; font-size:16px;}
div.participation-organization ul.inner-center > li p.down_T strong { font-size:16px; display:inline; font-weight:bold;}
div.participation-organization ul.inner-center > li p.down_B { display:inline-block; margin-top:30px; }
div.participation-organization ul.inner-center > li p.down_B span { display:inline-block; margin-right:8px; background:#000; border-radius:8px; width:162px; height:52px; padding:0px 10px; line-height:52px; text-align:center; }
div.participation-organization ul.inner-center > li p.down_B span a { display:block; color:#fff; }
div.participation-organization ul.inner-center > li p.down_B span a strong { color:#fff; font-size:16px; display:inline-block; font-weight:bold; }
div.participation-organization ul.inner-center > li p.down_B span a img { vertical-align:middle; padding-right:10px; }


/* App 다운로드 */
section.intro-page div.app-download {
	height:572px;
	background-color:#bcd3e5;
	background-image:url('/images/kccf/site/bg_app_download_default.jpg');
	background-repeat:no-repeat;
	background-position:50% 50%;
}
div.app-download div.link-area {padding-top:112px;}
div.app-download div.link-area h2,
div.app-download div.link-area p {font-weight:200;}
div.app-download div.link-area h2 span,
div.app-download div.link-area p strong {font-weight:600;}
div.app-download div.link-area h2 {font-size:40px;}
div.app-download div.link-area p {margin-top:15px;font-size:18px;}
div.app-download div.link-area div.download-link {width:412px;margin-top:55px;}
div.app-download div.link-area div.download-link:after {clear:both;content:'';display:block;}
div.app-download div.link-area div.download-link a {
	width:200px;
	height:50px;
	border-radius:10px;
	font-size:16px;
	line-height:50px;
	text-align:center;
	color:#fff;
	background-color:#000;
}
div.app-download div.link-area div.download-link a.goole-play {float:left;}
div.app-download div.link-area div.download-link a.app-store {float:right;}
div.app-download div.link-area div.download-link a span {padding-left:40px;background-repeat:no-repeat;background-position:0 50%;}
div.app-download div.link-area div.download-link a.goole-play span {background-image:url('/images/kccf/icon/ico_google_play_store.png');}
div.app-download div.link-area div.download-link a.app-store span {background-image:url('/images/kccf/icon/ico_apple_app_store.png');}

/********************* mobile **********************/
@media only screen and (max-width:768px) {
	section.intro-page h1.base-title {font-size:88px;}
	section.intro-page h2.section-title {position:relative;padding-top:35px;font-size:14px;line-height:18px;background-position-y:95px;z-index:1;}
	section.intro-page h2.section-title span {font-size:20px;line-height:24px;}
		
	/* 서비스 소개 */
	section.intro-page div.introduction {height:auto;padding:50px 0 80px;background-size:auto 100%;}
	div.introduction span.line-feed {display:inline-block;}
	div.introduction div.dimd {position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,0.6);}
	div.introduction div.inner strong.goal {font-size:18px;}
	div.introduction div.inner img.logo {min-width:162px;width:20%;}
	div.introduction div.inner p {line-height:23px;}
	div.introduction div.inner p.summary {margin-top:30px;font-size:16px;}
	div.introduction div.inner p.description {margin-top:20px;font-size:14px;}
	
	/* 주요 서비스 */
	section.intro-page div.main-service {height:auto;padding:0 0 30px;}
	div.main-service h1.base-title {line-height:70px;}
	div.main-service span.line-feed {display:inline-block;}
	div.main-service div.gallery-banner {display:block;height:auto;}
	div.main-service div.gallery-banner > div {width:100%;}
	div.main-service div.gallery-banner .left-banner  {position:relative;padding:0 20px;}
	div.main-service div.gallery-banner .left-banner:after {clear:both;content:'';display:block;}
	div.main-service div.gallery-banner .right-banner {margin-top:10px;}
	div.main-service div.gallery-banner .left-banner .gallery {min-width:100%;}
	div.main-service div.gallery-banner .left-banner .gallery ul li div.inner {display:block;float:none;width:100%;}
	div.main-service div.gallery-banner .left-banner .gallery ul li div.inner strong.title {font-size:26px;}
	div.main-service div.gallery-banner .left-banner .gallery ul li div.inner p.desc {height:66px;font-size:14px;line-height:22px;}
	div.main-service div.gallery-banner .left-banner .gallery ul li div.inner a.link-direct {margin-top:0;}
	div.main-service div.gallery-banner .right-banner .thumbs {padding-left:20px;padding-right:20px;margin:0;}
	div.main-service div.gallery-banner .right-banner .thumbs ul li {overflow:hidden;width:262px !important;height:310px;}
	div.main-service div.gallery-banner .right-banner .thumbs ul li img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: auto;
		height: 100%;
		transform: translate(-50%,-50%);
		z-index: 1;
	}
	div.main-service div.side-navi {position:relative;float:right;width:100px;height:44px;margin:0;z-index:101;}
	div.main-service div.side-navi span.swiper-button-prev, 
	div.main-service div.side-navi span.swiper-button-next {width:44px;height:44px;}
	div.main-service div.side-navi span.swiper-button-prev {left:0;background-image:url('/images/kccf/site/btn_prev_arrow_off.png');}
	div.main-service div.side-navi span.swiper-button-next {right:0;background-image:url('/images/kccf/site/btn_next_arrow_off.png');}
	div.main-service div.side-navi span.swiper-button-prev:hover {background-image:url('/images/kccf/site/btn_prev_arrow_on.png');}
	div.main-service div.side-navi span.swiper-button-next:hover {background-image:url('/images/kccf/site/btn_next_arrow_on.png');}
	div.main-service div.current-count {left:auto;bottom:12px;right:130px;width:auto;}
	div.main-service div.current-count div.inner-center {width:100px;padding:0;text-align:center;}
	div.main-service div.current-count div.swiper-pagination {display:none;}
	div.main-service div.current-count span.now,
	div.main-service div.current-count span.total {font-size:14px;}
	div.main-service div.current-count span.total {position:relative;padding-left:25px;font-weight:400;opacity:0.5;}
	div.main-service div.current-count span.total:before {position:absolute;left:10px;top:0;content:'/';}
	
	/* 서비스 현황 */
	section.intro-page div.service-status {height:auto;padding-bottom:40px;}
	div.service-status h1.base-title {line-height:75px;}
	div.service-status div.inner-center {display:block;}
	div.service-status div.inner-center span.date {top:3px;}
	div.service-status div.inner-center div.indicator.content-provided {margin-top:35px;}
	div.service-status div.inner-center div.indicator h3 {font-size:16px;}
	div.service-status div.inner-center div.indicator ul {height:116px;}
	div.service-status div.inner-center div.indicator.local-culture-data ul,
	div.service-status div.inner-center div.indicator.content-provided ul  {border-radius:10px;}
	div.service-status div.inner-center div.indicator ul > li strong {font-size:14px;}
	div.service-status div.inner-center div.indicator ul > li div.count {font-size:14px;}
	div.service-status div.inner-center div.indicator ul > li div.count span.num {font-size:30px;}

	/* 참여 협력사 */
	section.intro-page div.participation-organization {height:auto;padding:35px 0 40px;}
	div.participation-organization ul.inner-center {display:block;}
	div.participation-organization ul.inner-center > li {width:100%;margin-top:30px;background-position-y:9px;}
	div.participation-organization ul.inner-center > li:first-child {margin-top:0; min-height:auto; }
	div.participation-organization ul.inner-center > li strong {font-size:18px;}
	div.participation-organization ul.inner-center > li p {margin-top:4px;font-size:14px;line-height:22px;}
	div.participation-organization ul.inner-center > li p a.inquiry-email {display:block;}
	div.participation-organization ul.inner-center > li p.down_B { width:100%; }
	div.participation-organization ul.inner-center > li p.down_B span { width:46%; margin:0% 1%; padding:0; }
	
	/* App 다운로드 */
	section.intro-page div.app-download {height:505px;background-image:url('/images/kccf/site/bg_app_download_small.jpg');}
	div.app-download div.link-area {padding-top:35px;text-align:center;}
	div.app-download div.link-area h2 {font-size:30px;}
	div.app-download div.link-area p {font-size:16px;line-height:26px;}
	div.app-download div.link-area div.download-link {width:100%;margin-top:35px;}
	div.app-download div.link-area div.download-link a {width:48%;}
}