@charset "utf-8";

@font-face {
font-family: 'NanumSquare';
font-weight: 200;
src: url(./fonts/NanumSquareL.eot);
src: url(./fonts/NanumSquareL.eot?#iefix) format('embedded-opentype'),
		url(./fonts/NanumSquareL.woff) format('woff'),
		url(./fonts/NanumSquareL.ttf) format('truetype');
}
@font-face {
font-family: 'NanumSquare';
font-weight: 400;
src: url(./fonts/NanumSquareR.eot);
src: url(./fonts/NanumSquareR.eot?#iefix) format('embedded-opentype'),
		url(./fonts/NanumSquareR.woff) format('woff'),
		url(./fonts/NanumSquareR.ttf) format('truetype');
}

@font-face {
font-family: 'NanumSquare';
font-weight: 600;
src: url(./fonts/NanumSquareB.eot);
src: url(./fonts/NanumSquareB.eot?#iefix) format('embedded-opentype'),
		url(./fonts/NanumSquareB.woff) format('woff'),
		url(./fonts/NanumSquareB.ttf) format('truetype');
}

@font-face {
font-family: 'NanumSquare';
font-weight: 800;
src: url(./fonts/NanumSquareEB.eot);
src: url(./fonts/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
		url(./fonts/NanumSquareEB.woff) format('woff'),
		url(./fonts/NanumSquareEB.ttf) format('truetype');
}

body {font-family:'NanumSquare', sans-serif; font-size:18px; line-height:1.6; color:#222; background-color:#fff;}
.fclr01{color:#a81544 !important;}
.fclr02{color:#c62828 !important;}
.fbg01{background-color: #f8f8f8;}

.u{text-decoration: underline;color:#007eff;}
.soft_txt{color:#666;font-size:20px;font-weight: 400;}
.fb{font-weight: 600;}
.mla{margin-left: 100px;}


.title_t {font-size: 42px;line-height:1;margin-bottom: 60px;font-weight: 600;color: #222;text-align: center;}
.title_t::before{ content: ''; display: inline-block; background: url(/resources/holiday/images/chuseok/ico_title.png) no-repeat; width: 47px; height: 47px; margin-right: 20px; vertical-align: middle; }
.title_t::after{ content: ''; display: inline-block; background: url(/resources/holiday/images/chuseok/ico_title.png) no-repeat; width: 47px; height: 47px; margin-left: 20px; vertical-align: middle; }
.title_h {font-size: 28px;line-height:1;margin-bottom: 30px;margin-top: 60px;font-weight: 600;color: #222;}
.title_s {font-size: 22px;line-height: 30px;padding: 5px 0 5px 35px;;color: #222; position: relative;}
.title_s::before { content: ''; display: block; left:8px; top:50%; transform: translateY(-50%); width: 10px ; aspect-ratio: 1; border-radius: 50%; background: url(/resources/holiday/images/chuseok/title_s.png) no-repeat; position: absolute;}

.menuTab  { display: flex; }
.menuTab  li { flex: 1 ; }

.title_s ~ .title_s {margin-top:8px;}
.title_s span {font-weight: 600;display:inline-block;color: #222;font-size: 22px;}
.dash_list{margin-left: 35px;}
.dash_list > li {font-size:20px;line-height: 34px;color:#666;padding-left:15px;margin-bottom:3px;background: url(/resources/holiday/images/chuseok/dash.png) no-repeat 0 15px;}
.dash_list > li:last-child {margin-bottom:0;}
.ref {font-size: 18px;color: #a81544;}
.ref::before {content:'※';display:inline;padding-right:5px}

.mobile_block{display: none;}
.mobile_none{display: block;}

/* layout */
#wrap {position:relative; z-index:40; background: url(/resources/holiday/images/chuseok/visual_bg.png) no-repeat top center; }
#header {position:relative; z-index:40;}
.headerGroup {position:relative;max-width:1200px;margin:0 auto;padding: 127px 0 83px ;min-height: 320px;text-align:center;box-sizing: border-box;}
.headerGroup .logo{position: absolute;top: 20px;left: -5%;width: 150px; margin-left: -69px;}
#container {position:relative;z-index:30;padding:0;background-color: #fff;}
.sectionGroup {position:relative; max-width:1200px; margin:0 auto;}
.sectionGroup::after {content:''; display:block; clear:both}


/* tab_area */
.tab_area{position: relative;overflow:hidden;width:100%; height: 120px;z-index:100;background-color: #305463;}
.tab_inner{position: relative;max-width: 1200px;margin: 0 auto;}
.menuTab li {position: relative;float:left;}
.menuTab li a {display:block;font-size: 25px;color: #fff;padding: 40px 18px;text-align:center;letter-spacing:-1px;}
.menuTab li::before {content:'';display:block;position:absolute;left:0;top:50%;width:1px;height: 40px;margin-top: -20px;background-color: #89b8b1;}
.menuTab li:first-child::before {display: none;}
.menuTab li.on a, .menuTab li a:hover{color:#fff;background-color: #18292E;font-weight: 600;}
.menuTab li.on::before {display:none;}
.menuTab li a span {display:inline-block;}
.menuInfo {position:relative;}
.tab_content {padding: 80px 0 100px;}

.jbFixed {position:fixed; top:0; border-radius:0;}
#btnTopScroll{display: none;position: fixed;left: 50%;bottom: 40px;margin-left: 600px;width: 60px;height: 60px;z-index: 99;}

.play_box{width:100%;height: 500px;}
.ex_img{width:100%;height: 100%;}

.style_box01 {position:relative; overflow:hidden; margin-left:-20px; margin-bottom:70px; margin-top:30px;}
.style_box01 > li {float:left; width:calc(33.33% - 20px); margin-left:20px;border-radius: 10px;}
.style_box01 > li:nth-child(1){background:#344a74;}
.style_box01 > li:nth-child(2){background:#112955;}
.style_box01 > li:nth-child(3){background:#6a80a6 ;}
.style_box01 > li a {position: relative;display:block;width:100%;line-height: 70px;font-size: 20px;color:#fff;text-align:center;}

.style_box02{margin: 20px 0 40px;overflow: hidden;}
.style_box02 dl{position: relative;float: left;width: calc(25% - 39px);height: 170px;margin-left: 52px;border: solid 2px #163671;border-radius: 10px;box-sizing: border-box;text-align: center;}
.style_box02 dl:first-child{margin-left:0;}
.style_box02 dl::after{content: '';position: absolute;left:-35px;top: 50%;width:17px;height:30px;margin-top: -15px;background: url(../img/arrow.png)no-repeat;}
.style_box02 dl:first-child::after{display: none;}
.style_box02 dl dt{padding: 15px;margin: 0 20px;border-bottom: 2px solid #dbdfe6;color: #163671;font-weight: 600;font-size: 20px;}
.style_box02 dl dd{padding: 15px 0;font-size: 20px;line-height: 28px;color: #222;}


/* 실시간 교통정보 */
.phone_area{position: relative;margin: 120px 0 170px;}
.phone_img{position: absolute;top: -100px;left: 30px;}
.phone_txt{display: block;padding: 60px 30px 70px 350px;background-color: #f8f5f5;}
.phone_txt strong{font-size: 28px;color: #222;}
.phone_btn{margin: 20px 0;}
.phone_btn a{display: inline-block;width: 380px;height: 70px;line-height: 70px;text-align: center;font-size: 20px;color: #fff;border-radius: 7px;}
.phone_btn a:nth-child(1){background-color: #112955;}
.phone_btn a:nth-child(2){background-color: #6a80a6;margin-left: 20px;}

/* 고양시 민원콜센터 */
.call_box{display: block;background-color: #f8f5f5;padding: 30px;text-align: center;}
.call_box strong{font-size: 22px;line-height: 34px;color: #222;}
.call_box p.call_num{font-size: 40px;font-weight: 600; color: #a81544}
.call_box b{font-size: 22px;color:#222}

/* board */
.table-data{width: 100%;margin: 0;border-top: 0;border-bottom: 0;}
.table-data th, .table-data td{height: 60px;border-bottom: 2px solid #ececec;border-right: 2px solid #ececec;border-top: 0;border-left: 0;font-size: 18px;}
.table-data thead th{background-color: #75AEBD; border-bottom: 2px solid #fff; border-right: 2px solid #fff; color:#fff; }
.table-data tbody th{background-color: #f8f8f8; border-bottom: 2px solid #fff; border-right: 2px solid #fff; border-left: 0; color:#222; }
.table-data th:last-child, .table-data td:last-child{border-right: 0;}
.table-data .text_left{text-align: left !important;}
.table-data th.border_bottom{border-bottom: 2px solid #f0ecec;}
.table-data th.border_right{border-right: 2px solid #fff;}
.table-data td.border_right{border-right: 2px solid #e0dbd5;}
.scrollerDesc {display:none;}
.tableScroller {overflow:auto; -webkit-overflow-scrolling:touch; clear:both}
.tableScroller table {min-width:800px}



@media screen and (max-width:1217px){

	.title_t{font-size: 32px;}
	.title_h{font-size: 22px;margin-bottom: 25px;margin-top: 35px;}
	.title_s{background-size: 18px auto;background-position: left 2px;padding: 0 0 0 23px;font-size: 16px;line-height: 22px;}
	.title_s span{font-size: 16px;}
	.ref{font-size: 16px;}
	.dash_list{margin-left: 25px;}
	.dash_list > li{font-size:16px;line-height: 26px;background-position:0 12px;}
	.soft_txt{font-size: 15px;}
	.mla{margin-left: 0;}

	.headerGroup {padding:110px 0 60px;}
	.headerGroup .logo{top: 20px;left: 10%; }
	.headerGroup .logo img{width:100px;}
	.headerGroup .title_img{width: 400px;margin: 0 auto;}
	.tab_area{height:auto;background-size: contain;}
	.menuTab li {width:25%;}
	.menuTab li:last-child::after{display: none;}
	.menuTab li a {font-size: 16px;padding: 15px 0;}
	.tab_content {padding: 50px 10px;}
	#btnTopScroll {display:none;position:fixed;left: auto;right:10px;bottom:10px;width:40px;height:40px;margin-left: 0;z-index: 99;}

	.play_box{height:400px;}
	.style_box01 > li a{font-size: 16px;line-height: 60px;}
	.style_box02 dl dt{font-size: 16px;}
	.style_box02 dl dd{font-size: 16px;}
	.phone_area{margin: 100px 0;}
	.phone_img{top: -60px;width:200px;}
	.phone_txt{padding: 60px 30px 70px 250px;}
	.phone_btn a{width: calc(50% - 20px);height: 50px;line-height: 50px;font-size: 18px;}
	.ico_map{width:15px;}
	.table-data th, .table-data td {height: 50px;padding: 10px;font-size: 16px;}
	.style_btn a{width: 120px;height: 30px;line-height: 30px;font-size: 14px;font-weight: 600;}

}

@media screen and (max-width:767px){

	#header { background: url(../images/visual_bg.jpg) no-repeat top center; background-size: cover;}
	.mobile_block{display: block;}
	.mobile_none{display: none;}
	.tab_content{padding: 30px 0 70px;}
	.dash_list{margin-left: 20px;}
	.dash_list > li{padding-left: 7px;font-size: 14px;line-height: 20px;background-position: 0 9px;background-size: 4px auto;}
	.title_t{font-size: 26px;margin-bottom: 40px;}
	.title_t::before{width:30px;margin-right: 10px; background-size: 30px auto;}
	.title_t::after{width:30px;margin-left: 10px; background-size: 30px auto;}
	.title_h{font-size: 18px;margin-bottom: 10px;margin-top: 30px;}

	.title_s{font-size: 14px;line-height: 22px;background-size: 14px auto;background-position: left 3px;padding: 0 0 0 19px;}
	.title_s span{font-size: 15px;}
	.title_s ~ .title_s{margin-top: 5px;}
	.ref{font-size: 13px;}
	.soft_txt{font-size: 12px;}

	#container{padding: 0 10px;}
	.headerGroup {padding: 80px 0 30px;min-height: auto;}
	.headerGroup .title_img{width: 250px;margin: 0 auto;}
	.headerGroup .logo { left: 15%; }
	.headerGroup .logo img{width:100px;}
	.menuTab li::before{height: 14px;margin-top: -7px;}
	.menuTab li a{font-size: 14px;padding: 10px 0;}

	.play_box{height:280px;}
	.style_box01{margin-left: 0;margin-bottom: 20px;}
	.style_box01 > li{width: calc(33.33% - 4px);margin-left: 6px;}
	.style_box01 > li:first-child{margin-left: 0;}
	.style_box01 > li a{font-size: 13px;line-height: 16px;padding: 5px;}
	.style_box01 > li a span::after{background-size: 30px auto !important;right: 7px;width: 30px;height: 20px;margin-top: -10px;margin-left: 0;}
	.style_box02{margin: 10px 0 20px;}
	.style_box02 dl{width: calc(50% - 5px);height: 100px;margin-left: 10px;margin-bottom: 10px;}
	.style_box02 dl:nth-child(2n+1){margin-left: 0px;}
	.style_box02 dl dt{padding: 5px;font-size: 14px;}
	.style_box02 dl dd{padding: 5px;font-size: 14px;line-height: 20px;}
	.style_box02 dl::after{display: none;}
	.phone_area{margin: 70px 0 0;}
	.phone_img{top: -70px;left: auto;right: 10px;width: 70px;}
	.phone_txt{padding: 15px;}
	.phone_txt strong{font-size: 20px;}
	.phone_btn a{width: 100%;height: 42px;line-height: 42px;font-size: 14px;}
	.phone_btn a:nth-child(2){margin-left: 0;margin-top: 10px;}
	.call_box{padding: 15px;}
	.call_box strong{font-size: 16px;line-height: 24px;}
	.call_box p.call_num{font-size: 26px;}
	.call_box b{font-size: 16px;}
	.scrollerDesc {display:block; font-size: 14px;}
	.table-data{margin: 10px 0 0;}
	.table-data th{height: 42px;padding:10px 0;font-size: 14px;}
	.table-data td{height: 42px;padding: 3px;font-size: 14px;}
	.ico_map{width: 15px;}



	.title_s::before {  left:0;  top:5px; transform: translateY(0);}
}