@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
.hanna { font-family: "Hanna",serif; }


    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }


/* HEADER */
.header{position:relative;}
.header h1 { padding: 30px 0; border-bottom: 2px solid #c9c9c9; text-align: center; }
.header h1 img { width: 700px; margin: 0 auto; }
.header .container {position:relative; padding: 50px 0; }
.header .container > h2 {text-align: center; font-size: 22px; margin-bottom: 10px; }
.header .container > p { text-align: center; font-size: 18px; }
.header .container > span.line { display: block; margin: 15px auto 0 auto; width: 60px; height: 2px; background: #000; }
.header .container .main-tab { margin-top: 50px; }
.header .container .main-tab li { 
	float: left;
	width: 25%;
	text-align: center; 
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}
.header .container .main-tab li a { display: block; text-align: center; padding: 160px 10px 10px 10px; }


.header .container .main-tab li.tab1 { background: url("/image/together/government/tab_1_off.png") center 0 no-repeat; }
.header .container .main-tab li.tab1.on,
.header .container .main-tab li.tab1:hover { background: url("/image/together/government/tab_1_on.png") center 0 no-repeat;}
.header .container .main-tab li.tab1.on a,
.header .container .main-tab li.tab1:hover a {color:#8f3d61;}
.header .container .main-tab li.tab2 { background: url("/image/together/government/tab_2_off.png") center 0 no-repeat; }
.header .container .main-tab li.tab2.on,
.header .container .main-tab li.tab2:hover { background: url("/image/together/government/tab_2_on.png") center 0 no-repeat;}
.header .container .main-tab li.tab2.on a,
.header .container .main-tab li.tab2:hover a {color:#0a3763;}
.header .container .main-tab li.tab3 { background: url("/image/together/government/tab_3_off.png") center 0 no-repeat; }
.header .container .main-tab li.tab3.on,
.header .container .main-tab li.tab3:hover { background: url("/image/together/government/tab_3_on.png") center 0 no-repeat;}
.header .container .main-tab li.tab3.on a,
.header .container .main-tab li.tab3:hover a {color:#073f1c;}
.header .container .main-tab li.tab4 { background: url("/image/together/government/tab_4_off.png") center 0 no-repeat; }
.header .container .main-tab li.tab4.on,
.header .container .main-tab li.tab4:hover { background: url("/image/together/government/tab_4_on.png") center 0 no-repeat;}
.header .container .main-tab li.tab4.on a,
.header .container .main-tab li.tab4:hover a {color:#6a3312;}

.content { padding-bottom: 50px; }
.content .container { padding-top: 0px; }


/* VISUAL */
.visual { 
	background-image: url("/image/together/government/tab_1_banner.jpg");
	background-position:center center;
	background-repeat:no-repeat; 
	background-size: cover; 
	background-image:url(/image/together/government/tab_1_banner.jpg); 
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image/together/government/tab_1_banner.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image/together/government/tab_1_banner.jpg', sizingMethod='scale')";
	position: relative;
	-webkit-transition: background-image .4s ease;
	-moz-transition: background-image .4s ease;
	transition: background-image .4s ease;	
}
.visual .container { padding: 20px 0; position: relative; }
.visual .opa-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: .2; filter: Alpha(Opacity=20); }
.visual .slide-wrap { width: 700px; margin: 0 auto; }
.visual .slide-wrap .cont { color: #fff; }
.visual .slide-wrap .cont .tab-dist { position: absolute; top: 20px; left: 20px; }
.visual .slide-wrap .cont .tab-dist .tag { display: inline-block; padding: 3px 10px; border-radius: 10px; border: 2px solid #fff; margin-right: 10px; }
.visual .slide-wrap .cont .cont-banner { position: absolute; top: 40%; left: 50%; width: 100%; text-align: center; width: 500px; margin-left: -250px; }
.visual .slide-wrap .cont .cont-banner p {
	font-family: "Hanna",serif;
	color:#ddd;
	letter-spacing:0;
	-webkit-text-shadow: 0px 5px 3px rgba(0, 0, 0, 1);
	-moz-text-shadow: 0px 5px 3px rgba(0, 0, 0, 1);
	text-shadow: 0px 5px 3px rgba(0, 0, 0, 1);
}
.visual .slide-wrap .cont .cont-banner p.tit { font-family:'Noto Sans KR', sans-serif; font-weight: bold; font-size: 22px; margin-bottom: 20px; }
.visual .slide-wrap .slide-btn a { 
	position: absolute; 
	top: 50%; 
	margin-top: -44px; 
	display: block; 
	z-index:50;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}
.visual .slide-wrap .slide-btn a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
	filter: alpha(opacity=50);
	opacity: 0.5;
	-webkit-transform:translateY(3px);
	-moz-transform:translateY(3px);
	transform:translateY(3px);
   
}
.visual .slide-wrap .slide-btn a.s-left { left: 40px; }
.visual .slide-wrap .slide-btn a.s-right { right: 40px; }

/* BX-SLIDER */
.bx-wrapper { -webkit-box-shadow: none; box-shadow: none; border: 0 none; background: transparent; margin: 0; }
.bx-wrapper img {width:100%;}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: 15px; padding-top: 0; }

.bx-wrapper .bx-pager.bx-default-pager a { width: 12px; height: 12px; background: #808080; border-radius: 0; }

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { background: #5f016c; }

/* LIST */
.web-ctn{display:block;}
.mobile-ctn{display:none;}
.list {/* opacity: 1; -webkit-transition: opacity .6s; -moz-transition: opacity .6s; -o-transition: opacity .6s; -ms-transition: opacity .6s; transition: opacity .6s; */}
.layout-desc{display:none; width:100%;}
.layout-desc:nth-child(1){display:block;}

.layout-desc li {position: absolute;}
.list li { 
	border-bottom: 1px solid #000; 
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; 
	filter: alpha(opacity=35);
	opacity: 0.35;*/
}
.list li.on {
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;*/
    -webkit-box-shadow: 0px 10px 15px 10px #dedede;
    -moz-box-shadow: 0px 10px 15px 10px #dedede;
    -ms-box-shadow: 0px 10px 15px 10px #dedede;
    box-shadow: 0px 10px 15px 10px #dedede;
}

.list li img { width: 100%; border:1px solid #dedede; box-sizing:border-box;}
.list li[data-sizey="1"] img { height:134px; }
.list li[data-sizey="2"] img { height:359px; }
.list .exp-list { padding: 7px; margin-top:-5px;}
.list .exp-list p { font-size: 14px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.list .exp-list p.tit-thum { font-family:'Noto Sans KR', sans-serif; font-weight: bold; padding-bottom: 5px; margin-bottom: 5px; font-size: 16px; border-bottom: 1px dashed #c3c3c3; }


.layout-mobile {display:none;}
.layout-mobile ul {margin:0 auto;}
.layout-mobile li {position:relative; display:block; width:100%;padding:3px;margin-bottom:10px;}
.layout-mobile ul {width:95% !important; text-align:center;}
.layout-mobile li img{width:80%;}
/*.layout-mobile li.sizer {width:50%;height:0;padding:0;margin:0;border:none;}*/

/* PROMOTION */
.promotion img { width: 100%; }

/* STATISTICS */
.statistics{margin:65px 0 20px;}
.statistics li {position:relative; float: left; width: 25%; text-align: center; position: relative; padding: 180px 10px 10px 10px; font-size: 18px;}
.statistics li span{position: absolute; display:block; width:100%; color:#333333; font-size:18px; text-align:center; top: 59%; left:0; }
.statistics li.total { background: url("/image/area/top_circle_btn01.png") center 0 no-repeat;}
/*.statistics li.total span { position: absolute; top: 59%; left:53%; display:block;}*/
.statistics li.people { background: url("/image/area/top_circle_btn02.png") center 0 no-repeat; }
/*.statistics li.people span { position: absolute; top: 59%; left: 53%; margin-left:-0px;display:block; }*/
.statistics li.visitor { background: url("/image/area/top_circle_btn03.png") center 0 no-repeat; }
/*.statistics li.visitor span { position: absolute; top: 54%; left: 50%; margin-left:-55px;display:block; }*/
.statistics li.score { background: url("/image/area/top_circle_btn04.png") center 0 no-repeat; }
/*.statistics li.score span { position: absolute; top: 58%; left: 50%; margin-left:-15px; display:block; }*/
/*.statistics li.score span.hogam { top: 45%; left: 32%; }*/

/* REL-CITY */
.rel-city { background: #ebebeb; }
.rel-city .container { padding: 50px 0; }
.rel-city .container h3 { position: relative; }
.rel-city .container h3 span { position: absolute; top: 30px; right: 0; width: 770px; height: 1px; background: #d1d1d1; }
.rel-city .container ul { margin-top: 30px; }

/* OWL CAROUSEL */
.owl-item {padding:7px;}
.owl-item img {width:100%;}
.owl-theme .owl-controls { position: absolute; top: -50px; right: 0; margin-top: 0; }

.owl-theme .owl-controls .owl-page span { margin: 3px 5px; background: #808080; border-radius: 0; opacity: 1; filter: Alpha(Opacity=100); }
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls .owl-page:hover span { background: #5f016c; }


/*-----------------------------------------------------------------------------------*/
/* PRELOADER
/*-----------------------------------------------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fefefe;
    z-index: 9999;
}
#status {
    width: 36px;
    height: 36px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -18px 0 0 -18px;
}
.spinner {
    height: 36px;
    width: 36px;
    position: relative;
    -webkit-animation: rotation .8s infinite linear;
    -moz-animation: rotation .8s infinite linear;
    -o-animation: rotation .8s infinite linear;
    animation: rotation .8s infinite linear;
    border-left: 3px solid rgba(26,187,156,.15);
    border-right: 3px solid rgba(26,187,156,.15);
    border-bottom: 3px solid rgba(26,187,156,.15);
    border-top: 3px solid rgba(26,187,156,.8);
    border-radius: 100%;
}
@-webkit-keyframes rotation { 
   from {
       -webkit-transform: rotate(0deg)
   }
   to {
       -webkit-transform: rotate(359deg)
   }
}
@-moz-keyframes rotation { 
   from {
       -moz-transform: rotate(0deg)
   }
   to {
       -moz-transform: rotate(359deg)
   }
}
@-o-keyframes rotation { 
   from {
       -o-transform: rotate(0deg)
   }
   to {
       -o-transform: rotate(359deg)
   }
}
@keyframes rotation { 
   from {
       transform: rotate(0deg)
   }
   to {
       transform: rotate(359deg)
   }
}



/*************************new code VVVVVVVVV************************************/

.fontstyle01 { font-family:'Noto Sans KR', sans-serif; font-weight: bold; }



.header,.header .container{margin:0 auto 0; padding:0;}
.header .container h2{text-align:left; margin:34px 0 0; padding:0;}
.header .container .top-local-slide{position:relative; background:#ebebeb;}

/*.header .container .top-local-slide ul{position:absolute; top:0; left:0; display:inline-block; margin:10px 0; height:101px; background:#ff0000;}
.header .container .top-local-slide ul li{position:relative; display:block; width:145px; height:101px; float:left; margin:0 0 0 13px; background:#fff;}*/

.header .container .top-circle-btn{position:relative; height:222px; margin:65px 0 20px; text-align:center;}
.header .container .top-circle-btn ul{display:inline-block;}
.header .container .top-circle-btn ul li{min-height:222px;display:inline-block; float:left; margin:0 30px 0;}
.header .container .top-circle-btn ul li p{font-family:'Noto Sans KR', sans-serif; font-weight: bold; }


.container{width:960px; margin:0 auto;}

.mainbanner-slide{position:relative; margin:0 0 34px;}
.mainbanner-slide .container{text-align:center; box-shadow: 2px 2px 10px #888888; border:solid 10px #fff; overflow:hidden; border-bottom:10px;}
.mainbanner-slide .container ul{display:inline-block;}
.mainbanner-slide .container ul li{}


.desc-list-tab .container{width:960px; margin:0 auto; text-align:center;}
.desc-list-tab .container ul {margin:0px 0 0;display:table; width:100%; border-bottom:2px solid #d63279;}
.desc-list-tab .container ul li{position:relative; display:table-cell; width:25%; padding:0px 0 0; height:75px; cursor:pointer;}
.desc-list-tab .container ul li p{position:absolute; line-height:42px; bottom:0; width:100%;}
.desc-list-tab .container ul li.on p{color:#fff; line-height:42px; background:#ff549e; border-radius:10px 10px 0 0;}


.mobile-list-tab{display:none;}
.mobile-list-tab .container{margin:0 auto; text-align:center;}
/*.mobile-list-tab .container ul {display:inline-block;}
.mobile-list-tab .container ul li{display:inline-block; float:left;}
.mobile-list-tab .container ul li.on p{color:#ff0000;}*/

div#select_box {
    position: relative;
	margin:0 auto;
    width: 95%;
    height: 48px;
    background: url('/image/area/new/mobile_tab_select_arrow.png') 95% center no-repeat; /* 화살표 이미지 */
	background-size:16px 9px;
	background-color:#ff549e;
    border: 1px solid #d63279;
	border-radius:5px;
}
div#select_box label {
    position: absolute;
    font-size: 18px;
    color: #fff;
    top: 10px;
    left: 12px;
    letter-spacing: 1px;
}
div#select_box select#select-tab {
    width: 100%;
    height: 40px;
    min-height: 40px;
    line-height: 40px;
    padding: 0 10px;
    opacity: 0;
    filter: alpha(opacity=0); /* IE 8 */
}



.mainbanner-slide a img{width:100%;}

.mainbanner-slide .caption-area{position:absolute; width:80%; left:50%; margin-left:-40%; text-align:center; top:42%; color:#fff;
	-webkit-text-shadow: 0px 2px 1px rgba(0, 0, 0, 1);
	-moz-text-shadow: 0px 2px 1px rgba(0, 0, 0, 1);
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 1);
}
.local-title,.local-sub-title{font-size:24px; font-weight:bold; line-height:26px;}
.title-row-cut{padding:0; display:inline-block; padding:0px 0px 0 0; margin:0 8px -2px; width:3px; height:21px; background:#fff;}
.mainbanner-slide .caption-area .m-b-caption{position:relative; display:block; width:100%;}

/********중단 추천영역*******/
#recommended-area{}
#recommended-area .re-area-tab{position:relative; width:960px; height:70px; margin:0 auto; padding:0;}
#recommended-area .mobile-re-area-tab{display:none;}
#recommended-area .re-area-tab ul{display:table; width:100%;}
#recommended-area .re-area-tab ul li{display:table-cell;}
#recommended-area .inner-ctn{position:relative; width:960px; margin:0 auto; min-height:350px; background:#eeeeee; }
#recommended-area .inner-ctn > div{display:none;}
#recommended-area .inner-ctn > div:nth-child(1){display:block;}

#recommended-area .inner-ctn .re-ctn{padding:10px;}
#recommended-area .inner-ctn .re-ctn .re-ctn-inner{position:relative; display:block; height:190px; background:#fff; margin:0 0 10px; padding:10px;}

#recommended-area .inner-ctn .re-ctn .re-ctn-inner .re-img-ctn{position:relative; width:255px; height:170px; float:left; margin:0 10px 0 0;}
#recommended-area .inner-ctn .re-ctn .re-ctn-inner .re-img-ctn a img{width:100%;}

#recommended-area .inner-ctn .re-ctn .re-ctn-inner .re-text-ctn{float:right; width:655px;}
#recommended-area .inner-ctn .re-ctn .re-ctn-inner .re-text-ctn .re-ctn-title{position:relative; padding:0 0px 0;border-bottom:1px dashed #d7d7d7; height:38px; line-height:38px;}
#recommended-area .inner-ctn .re-ctn .re-ctn-inner .re-text-ctn .re-ctn-title .detail-view-btn{position:absolute; width:127px; height:26px; top:5px; right:0;}
#recommended-area .inner-ctn .re-ctn .re-ctn-inner .re-text-ctn .re-ctn-title .ctn-label{color:#fff; line-height:20px; height:20px; display:inline-block; margin:0 0 0 10px; padding:0 5px;}
.label-color-red{background:#e04c4c;}
.label-color-purple{background:#8c4ce0;}
.label-color-green{background:#4ce04f;}
.label-color-yellow{background:#dbe04c;}
.label-color-yellow{background:#dbe04c;}
.label-color-blue{background:#4cd4e0;}
.re-content{position:relative; overflow:hidden; max-height:132px;}
.re-content h3{font-size:16px; padding:5px 0 0px;}
.re-content div{position:relative; color:#666; font-size:14px; text-align:justify;/* overflow:hidden;*/}
			.dot-ellipsis-115{
			display:block;
			height:115px;
			}
			.dot-ellipsis-71{
			height:71px;
			display:none;
			}
			.dot-ellipsis p{
						display:block;
						padding:0;
						margin:0;
						letter-spacing:0px;
						line-height:21px;
			}


.foot-cont p span.mobile{display:none;}



/* MEDIA QUERIES */
@media all and (max-width: 960px) { 
	.layout-mobile,.desc-list-tab .container,.container{width:100%;}

	.header h1 {width:85%;margin:0 auto;padding:30px 0 15px 0}
	.header h1 img {width:100%}
	.content {padding-bottom:0}
	.header .container,
	.content .container,
	.rel-city .container {padding:30px 0;}

	.header .container .main-tab {margin-top:30px;}

	.header .container .main-tab li.tab1,
	.header .container .main-tab li.tab1.on,
	.header .container .main-tab li.tab1:hover,
	.header .container .main-tab li.tab2,
	.header .container .main-tab li.tab2.on,
	.header .container .main-tab li.tab2:hover,
	.header .container .main-tab li.tab3,
	.header .container .main-tab li.tab3.on,
	.header .container .main-tab li.tab3:hover,
	.header .container .main-tab li.tab4,
	.header .container .main-tab li.tab4.on,
	.header .container .main-tab li.tab4:hover {background-size:90%;}
	.header .container .main-tab li a {padding:75% 1% 1% 1%;font-size:14px;}

	.statistics {width:500px;margin:0 auto;}
	.statistics li {width:50%;margin-top:20px;}
	.statistics li:first-child,
	.statistics li:first-child + li {margin-top:0;}



	.visual .slide-wrap .slide-btn a.s-left {left:10px;}
	.visual .slide-wrap .slide-btn a.s-right {right:10px;}
	.rel-city .container h3 span {display:none;}

	.desc-list-tab{display:none;}
	.mobile-list-tab{display:block;}
	.web-ctn{display:none;}
	.mobile-ctn{display:block;}
	.mobile-ctn > div{display:none;}
	.mobile-ctn > div:nth-child(1){display:block;}
#recommended-area .inner-ctn{width:100%;}
#recommended-area .re-area-tab{display:none;}
#recommended-area .mobile-re-area-tab{display:block; margin:60px auto 0;}
#recommended-area .mobile-re-area-tab ul{display:table; height:42px; background:#eee; width:100%; border-bottom:3px solid #aaa;}
#recommended-area .mobile-re-area-tab ul li{display:table-cell; width:33.33%; font-size:21px; font-weight:bold; height:42px; line-height:42px; text-align:center;}
#recommended-area .mobile-re-area-tab ul li:hover{background:#54017a; color:#fff;}
#recommended-area .mobile-re-area-tab ul li p{font-size:14px; line-height:14px; height:14px; margin:10px 0 0;}
#recommended-area .mobile-re-area-tab ul li.on{background:#54017a; color:#fff;}

#recommended-area .inner-ctn .re-ctn .re-ctn-inner .re-img-ctn{display:inline-block; width:100%; height:auto; margin:0 0px 0 0;}
#recommended-area .inner-ctn .re-ctn .re-ctn-inner .re-img-ctn a{display:block; width:100%; padding:0; overflow:hidden;}
#recommended-area .inner-ctn .re-ctn .re-ctn-inner .re-img-ctn a img{width:100%; margin:0;}
#recommended-area .inner-ctn .re-ctn .re-ctn-inner .re-text-ctn{display:inline-block; width:100%;}
#recommended-area .inner-ctn .re-ctn .re-ctn-inner{height:auto;display:inline-block;}
.re-content{position:relative; overflow:hidden; max-height:123px;}
.area-bottom-banner{position:relative;}

}
@media all and (max-width: 800px) { 
	.visual .slide-wrap {width:100%;}
}

@media all and (max-width: 767px) {
	.mainbanner-slide{margin:40px auto 0;}
	.visual .slide-wrap .cont .cont-banner {top:48%;}
	.cont-banner p.tit+p {display:none;}
	.visual .slide-wrap .cont .cont-banner p.tit {font-size:18px;width:85%;margin:0 auto}
	.visual .slide-wrap .cont .tab-dist {top:5px;left:5px;}
	.visual .slide-wrap .cont .tab-dist .tag,
	.visual .slide-wrap .cont {font-size:13px;}
	.visual .slide-wrap .slide-btn a {width:25px;margin-top:-12px;}
	.visual .slide-wrap .slide-btn a img {width:100%;}
	.bx-wrapper .bx-pager, 
	.bx-wrapper .bx-controls-auto {bottom:-15px;}
}

@media all and (max-width: 568px) {
	.statistics {width:100%;}
	.statistics li {width:50%; margin:0 auto ;padding:48% 1% 1% 1%}
	.statistics li.total,
	.statistics li.people,
	.statistics li.visitor,
	.statistics li.score {background-size:85%;}

	.statistics li.total span {font-size:18px;}
	.statistics li.people span {font-size:18px;}
	.statistics li.visitor span {font-size:18px;}
	.statistics li.score span {font-size:18px;}
	.statistics li.score span.hogam {}
	.header {position:relative;padding-top:0px;}
	.header .container{height:auto; padding:0; margin:20px 0 40px;}
	.header .container h2{margin:0px 0 0; padding:0;}
	.util{margin:0;}
	.footer{height:auto;}
	.foot-cont{display:block; width:100%;}
	.statistics li span{top: 50%;}
	.statistics li p{margin:-20px 0 20px;}
	.mobile-container{padding:0; margin:0px 0 0;}
	.mobile-list-tab .container{padding:10px 0 0;}
	.mainbanner-slide .caption-area{top:15%;}
	.foot-cont p span.mobile{display:inline-block;}
	.foot-cont p.web{display:none;}
			.dot-ellipsis-115{
			display:none;
			height:115px;
			}
			.dot-ellipsis-71{
			height:71px;
			display:block;
			}
			.dot-ellipsis p{
						display:block;
						padding:0;
						margin:0;
						line-height:18px;
			}


}