@charset "utf-8";

#headerWrap .inner {max-width:1780px !important;}
@media all and (min-width:1781px) {#gnbWrap {right:50%; margin-right:-890px;}}

.mainSection {position:relative; padding-left:1em; padding-right:1em;}

.t-state {font-weight:600; color:#888;}
.t-state:before {background:#888;}
.t-state[data-state="좋음"] {color:#2E42A2;}
.t-state[data-state="좋음"]:before {background:#2E42A2;}
.t-state[data-state="보통"] {color:#17A0FF;}
.t-state[data-state="보통"]:before {background:#17A0FF;}
.t-state[data-state="나쁨"] {color:#F6821D;}
.t-state[data-state="나쁨"]:before {background:#F6821D;}
.t-state[data-state="매우나쁨"] {color:#EB1F81;}
.t-state[data-state="매우나쁨"]:before {background:#EB1F81;}


.tab-group .tabs li a .selected {display:none; position:absolute; top:0; left:0; z-index:-999; overflow:hidden; width:0; height:0; opacity:0;}


/*************************************************
	Data Style
*************************************************/

.mainDataWrap {background:#F4F7FE;}
.mainDataWrap .topArea:after,
.mainDataWrap .bottomArea:after {content:""; display:block; clear:both;}
.mainDataWrap .topArea {position:relative; max-width:1780px; padding:3.2em 0 4em; margin:0 auto;}
.mainDataWrap .bottomArea {position:relative; max-width:1780px; margin:0 auto; background:#fff; clear:both; z-index:0;}
.mainDataWrap .bottomArea:before,
.mainDataWrap .bottomArea:after {content:""; display:block; position:absolute; top:0; bottom:0; z-index:-1;}
.mainDataWrap .bottomArea:before {left:-5000px; right:50%; background:#fff; z-index:-2; border-bottom:1px solid rgba(0,0,0,.1);}
.mainDataWrap .bottomArea:after {right:-5000px; left:50%; background:#253684;}

@media all and (max-width:1024px) {
	.mainDataWrap .bottomArea:before,
	.mainDataWrap .bottomArea:after {display:none;}
}

.mainDataWrap .topArea .inner {overflow:hidden;}
.mainDataWrap .topArea .tit {margin-bottom:0.875em;}   
.mainDataWrap .topArea .mtit {margin-bottom:0.65em;}
.mainDataWrap .topArea .tit strong {font-size:1.5em; font-family:'TTWanjudaedunsancheB';}
.mainDataWrap .topArea .mtit strong {font-size:1.3em; font-family:'TTWanjudaedunsancheB'; margin-bottom:0.65em;}

.mainDataWrap .topArea .control button {width:1em; height:1em; background:url(../img/main/spr_control.svg) no-repeat 0 0; background-size:auto 1em; text-indent:-999px; overflow:hidden; vertical-align:middle;}
.mainDataWrap .topArea .control .prev {background-position:0 50%;}
.mainDataWrap .topArea .control .next {background-position:-1.75em 50%;}
.mainDataWrap .topArea .control .stop {background-position:-3.5em 50%;}
.mainDataWrap .topArea .control .play {display:none; background-position:-5.25em 50%;}
.mainDataWrap .topArea .control .more,
.mainDataWrap .topArea .control .total {background-position:-7em 50%;}
.mainDataWrap .topArea .control .swiper-button-disabled {opacity:.3;}
.mainDataWrap .topArea .control .pager {display:inline-block; width:auto; bottom:auto; vertical-align:middle; margin:0 .5em;}
.mainDataWrap .topArea .control .pager span {display:inline-block; font-size:1em; font-weight:700; color:#333; min-width:1.5em; text-align:center;}
.mainDataWrap .topArea .control .pager i {display:inline-block; vertical-align:middle; width:1.05em; height:1em; background:url(../img/main/spr_main.svg) no-repeat -4em 0; background-size:11em auto;}
.mainDataWrap .topArea .control .pager .swiper-pagination-current {color:#454683;}
.mainDataWrap .topArea .control button + button {margin-left:.75em;}


.mainPopupWrap {width:30em;}
.mainPopup {position:relative; margin-bottom:2em;}
.mainPopup .slider {position:relative; z-index:0; border-radius:1em 3em 1em 1em; overflow:hidden; background:#fff;}
.mainPopup .slider:before {content:""; display:block; position:relative; padding-top:60%; z-index:-1;}
.mainPopup .slider .swiper-container {position:absolute; top:0; left:0; right:0; bottom:0;}
.mainPopup .slider .swiper-slide a {display:block; position:relative; height:100%;}
.mainPopup .slider .swiper-slide img {width:100%;}



.mainMessage {position:relative;}
.mainMessage .slider {height:6.5em; border-radius:1em; overflow:hidden;}
.mainMessage .swiper-slide * {display:block;}
.mainMessage .swiper-slide a { padding:.8em .8em .8em 5.5em; height:6.5em; background:#fff url(../img/main/img_warning.png) no-repeat top 50% left 1em; background-size:4em auto;}
.mainMessage .swiper-slide a .item {background:#F9F9FA; padding:.65em 1em; height:100%; line-height:1.3; border-radius:0.75em; font-size:.75em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.mainMessage .swiper-slide a .item span {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:3; -webkit-box-orient: vertical;}
.mainMessage .swiper-slide a .item strong {font-weight:500;}


.mainWeather {position:relative; width:25.5em; margin:0 2.5em;}
.mainWeather .cscMap .tabs {overflow-x:auto;}
.mainWeather .cscMap .tabs::-webkit-scrollbar-thumb {border-color:#F4F7FE;}
.mainWeather .cscMap .map-img {position:relative; width:25.5em; height:22.65em; margin:0 auto; background:url(../img/main/img_map_bg.svg) no-repeat 50% 50%; background-size:contain;}
.mainWeather .cscMap .map-img  li a {position:absolute; color:#404662; font-size:.7em; font-weight:500;}
.mainWeather .cscMap .map-img  li a:before {content:""; margin:0 auto .2em; width:1.571429em; height:0; display:block; background:url(../img/main/ico_spot.svg) no-repeat 50% 50%; background-size:contain; opacity:0; transition:.3s all; -webkit-transtion:.3s all;}
.mainWeather .cscMap .map-img  li.tab-active a,
.mainWeather .cscMap .map-img  li a:hover {color:#EB1F81;}
.mainWeather .cscMap .map-img  li.tab-active a:before,
.mainWeather .cscMap .map-img  li a:hover:before {opacity:1; height:2.285715em;}

.mainWeather .cscMap .map-img  li a[data-tab="죽장면"] {bottom: 22.5em;left: 20.5%;}
.mainWeather .cscMap .map-img  li a[data-tab="송라면"] {bottom: 26em;left: 55%;}
.mainWeather .cscMap .map-img  li a[data-tab="기북면"] {bottom: 19.5em;left: 33%;}
.mainWeather .cscMap .map-img  li a[data-tab="신광면"] {bottom: 18em;left: 44%;}
.mainWeather .cscMap .map-img  li a[data-tab="청하면"] {bottom: 21.5em;left: 54%;}
.mainWeather .cscMap .map-img  li a[data-tab="기계면"] {bottom: 14.5em;left: 33%;}
.mainWeather .cscMap .map-img  li a[data-tab="흥해읍"] {bottom: 16.5em;left: 54%;}
.mainWeather .cscMap .map-img  li a[data-tab="연일읍"] {bottom: 9.5em;left: 51%;}
.mainWeather .cscMap .map-img  li a[data-tab="시내"] {bottom: 11.5em;left: 61%;}
.mainWeather .cscMap .map-img  li a[data-tab="대송면"] {bottom: 5.5em;left: 56%;}
.mainWeather .cscMap .map-img  li a[data-tab="오천읍"] {bottom: 4.5em;left: 65%;}
.mainWeather .cscMap .map-img  li a[data-tab="장기면"] {bottom: 2.5em;left: 76%;}
.mainWeather .cscMap .map-img  li a[data-tab="동해면"] {bottom: 10.5em;left: 75%;}
.mainWeather .cscMap .map-img  li a[data-tab="구룡포읍"] {bottom: 8.5em;left: 84%;}
.mainWeather .cscMap .map-img  li a[data-tab="호미곶면"] {bottom: 13.5em;left: 85%;}


.mainWeather .weather-box {position:relative; background:#333A5C; border-radius:1em; padding:1.75em 1.5em;}
.mainWeather .weather-box .mtit {margin-bottom:0;}
.mainWeather .weather-box .mtit strong {display:block; color:#fff; margin-bottom:.5em;}
.mainWeather .weather-box .mtit span {display:block; color:rgba(255,255,255,0.3); font-size:.75em;}
.mainWeather .weather-box .weather {position:absolute; top:1.4em; right:1.5em; border-left:1px solid rgba(255,255,255,0.6);}
.mainWeather .weather-box .weather > * {display:inline-block; vertical-align:middle;}
.mainWeather .weather-box .weather i {width:3.5em; height:3.5em; margin:0 1.25em; background:url(../img/main/spr_weather.png) no-repeat; background-size:24.5em auto;}
.mainWeather .weather-box .weather strong {color:#fff; font-family:'Montserrat';}
.mainWeather .weather-box .weather strong span {font-size:1.8em; font-weight:800;}


.mainWeather .weather-box .weather i[data-weather-icon="01"] {background-position:0 0;}
.mainWeather .weather-box .weather i[data-weather-icon="02"] {background-position:-3.5em 0;}
.mainWeather .weather-box .weather i[data-weather-icon="03"] {background-position:-7em 0;}
.mainWeather .weather-box .weather i[data-weather-icon="04"] {background-position:-10.5em 0;}
.mainWeather .weather-box .weather i[data-weather-icon="05"] {background-position:-14em 0;}
.mainWeather .weather-box .weather i[data-weather-icon="06"] {background-position:-17.5em 0;}
.mainWeather .weather-box .weather i[data-weather-icon="07"] {background-position:-21em 0;}


.mainLinkBox .box {background:#fff; border-radius:1em; padding:1.25em;}
.mainLinkBox .box + .box {margin-top:1.25em;}
.mainLinkBox .box ul li + li {margin-top:.5em;}
.mainLinkBox .box ul li a {display:block; padding:.831em 1em; border-radius:5em; background:#F9F9FA url(../img/main/ico_arrow_r_black_20x20.svg) no-repeat top 50% right 1em; background-size:1.176471em auto; font-size:.85em;}
.mainLinkBox .box ul li a:after {content:""; width:1em; height:1em;}
.mainLinkBox .box ul li a:hover,
.mainLinkBox .box ul li a:focus {color:#fff; font-weight:500; background-color:#2E42A2; background-image:url(../img/main/ico_arrow_r_white_20x20.svg);}

@media all and (min-width:481px){
	.mainPopup .control {position:absolute; top:0; right:0;}
	.mainMessage .control {position:absolute; top:0; right:0;}
	
	
}
@media all and (min-width:1025px){
	.mainPopupWrap,
	.mainWeather {float:left;}
	.mainLinkBox {float:right;}
	
}
@media all and (min-width:1441px){
	.mainLinkBox {width:calc(100% - 60.5em);}
}

@media all and (max-width:1520px){
	.mainWeather {margin:0 1.5em;}
	.mainLinkBox {width:calc(100% - 58.5em);}
}

@media all and (max-width:1440px){
	.mainPopupWrap,
	.mainWeather {width:calc(50% - .75em); margin-right:0;}
	.mainWeather .weather-box {padding:1.8em 1.5em; margin-top:1.8em;}
	.mainLinkBox {width:100%; overflow:hidden; margin-top:1.5em;}
	.mainLinkBox .box {float:left; width:calc(50% - .75em);}
	.mainLinkBox .box + .box {margin-top:0; margin-left:1.5em;}
}
@media all and (max-width:1024px){
	.mainPopupWrap,
	.mainWeather {width:100%;}
	.mainPopupWrap {margin-bottom:1.75em;}
	
	.mainWeather .weather-box {max-width:30em; margin:0 auto;}
	
	.mainWeather  {margin-left:0;}
}
@media all and (max-width:540px){
	.mainLinkBox .box {width:100%;}
	.mainLinkBox .box + .box {margin-top:1em; margin-left:0;}
}
@media all and (max-width:480px){
	.mainPopup .control,
	.mainMessage .control {text-align:right; margin-bottom:.5em;}
	.mainWeather .weather-box  {text-align:center; padding:1.25em;}
	.mainWeather .weather-box .weather {position:relative; top:auto; right:auto; border-left:0; margin-top:.85em;}
	.mainWeather .weather-box .weather i {font-size:.6em; margin-left:0;}
}


.tbl-inner-wrap {position:relative; margin:0 -2.5em;}
.tbl-inner-wrap .tbl-inner {display:table; width:100%; table-layout:fixed;}
.tbl-inner-wrap .tbl-inner > * {display:table-cell; position:relative; vertical-align:top;}
.tbl-inner-wrap .tit,
.tbl-inner-wrap a strong {display:block; position:relative; font-family:'TTWanjudaedunsancheB';}
.tbl-inner-wrap .tit {margin-bottom:.75em;}
.tbl-inner-wrap .tit strong {font-size:1.5em;}

@media all and (max-width:1620px) {
	.tbl-inner-wrap {margin:0 -1em;}
}
@media all and (max-width:1024px) {
	.tbl-inner-wrap {margin:0 -1em; padding:0 .5em; background:#fff;}
	.tbl-inner-wrap:after {content:""; display:block; clear:both;}
	.tbl-inner-wrap .tbl-inner {display:block; width:auto; margin:0 -.5em;}
	.tbl-inner-wrap .tbl-inner > * {display:block; position:relative;}
}

.mainDusty,
.mainCallInfo {padding:1.7em 3em 1.5em; background:#fff; border-bottom:1px solid rgba(0,0,0,.1);}
.mainQuickLink {padding:1.75em 2.8em; background:#253684;}
.mainQuickLink + .mainQuickLink {border-left:1px solid rgba(255,255,255,.15);}
.mainDusty {width:32%;}
.mainCallInfo {width:33%;}
.mainDusty .in,
.mainCallInfo .in {position:relative;}
@media all and (max-width:1620px) {
	.mainDusty,
	.mainCallInfo {padding:1.7em 1.5em 1.5em;}
	.mainQuickLink {padding:1.75em 1.8em;}
}
@media all and (max-width:1024px) {
	.mainDusty,
	.mainCallInfo,
	.mainQuickLink {float:left; border:none;}
	.mainDusty {width:55%;}
	.mainCallInfo {width:45%;}
	.mainQuickLink {width:50%;}
}
@media all and (max-width:640px) {
	.mainDusty,
	.mainCallInfo {padding:1.7em 1em 1.5em;}
	.mainQuickLink {padding:1.7em 1em;}
	.mainQuickLink + .mainQuickLink {border-top:1px solid rgba(255,255,255,.15); border-left:none;}
}

.mainDusty .tit {float:left;}
.mainDusty .total {float:right; padding-top:.1em; margin:0 0 .95em 1em;}
.mainDusty .total > * {display:inline-block; vertical-align:middle; position:relative; font-size:.85em;}
.mainDusty .total > span {color:#888888;}
.mainDusty .total > * + * {padding-left:1.89em; font-weight:600;}
.mainDusty .total > * + *:before {content:""; display:block; position:absolute; width:10px; height:10px; top:50%; left:.9em; margin:-5px 0 0 -5px; border-radius:100%;}
.mainDusty .guide {display:block; position:relative; margin:.95em 0; padding:.41927em 0; text-align:center; background:#F9F9FA; clear:both;}
.mainDusty .guide > * {display:inline-block; vertical-align:middle; padding:0 .5em;}
.mainDusty .guide > * > * {font-size:.8em; line-height:1.5em;}
.mainDusty .guide > * > span {color:#888;}
.mainDusty .dusty {display:table; width:100%; table-layout:fixed;}
.mainDusty .dusty > * {display:table-cell; position:relative; width:33.33%; text-align:center;}
.mainDusty .dusty span,
.mainDusty .dusty strong {display:block; position:relative;}
.mainDusty .dusty span {color:#333; font-size:.85em; line-height:1.4em; margin-bottom:.41176em;}
.mainDusty .dusty span i {display:inline-block; font-size:.8235em; color:#888; opacity:.8;}
.mainDusty .dusty strong {color:#333333; font-size:.8em; font-weight:500; font-family:'Montserrat';}
.mainDusty .dusty strong em {font-size:1.5em; font-weight:700;}
@media all and (max-width:1540px) and (min-width:1025px) {
	.mainDusty .tit {margin-bottom:0;}
	.mainDusty .total {float:none; text-align:right; clear:both;}
}
@media all and (max-width:1480px) and (min-width:1025px) {
	.mainDusty .guide > * {width:48%;}
}
@media all and (max-width:860px) {
	.mainDusty {width:auto; float:none;}
}
@media all and (max-width:450px) {
	.mainDusty .guide > * {width:48%;}
	.mainDusty .dusty span {height:3em;}
	.mainDusty .dusty span i {display:block;}
}

.mainCallInfo {border-left:1px solid rgba(51,51,51,.10); background:url(../img/main/img_call_info.png) no-repeat right .7em bottom 0 #fff; background-size:auto 11em;}
.mainCallInfo .txt {display:block; margin-bottom:2.2em;}
.mainCallInfo .txt span {display:block; position:relative; font-size:.85em; color:#333; opacity:.6; line-height:1.4em;}
.mainCallInfo .call {display:block; position:relative; padding-left:2.9em;}
.mainCallInfo .call:before {content:""; display:block; position:absolute; width:2.2em; height:2.2em; left:0; top:50%; margin-top:-1.1em; background:url(../img/main/spr_main.svg) no-repeat 0 -1em; background-size:11em auto;}
.mainCallInfo .call strong {display:block; position:relative; font-size:1.2em; color:#333; font-family:'TTWanjudaedunsancheB'; line-height:1.83em;}
@media all and (max-width:1620px) {
	.mainCallInfo {background-size:auto 9em; background-position:right -1em bottom 0; padding-bottom:1.8em;}
}
@media all and (max-width:1024px) {
	.mainCallInfo {background-size:auto 7.5em; background-position:right -1.5em bottom 0;}
}
@media all and (max-width:860px) {
	.mainCallInfo {width:auto; float:none; border-top:1px solid rgba(51,51,51,.1); border-left-width:0; background-size:auto 10em;}
}
@media all and (max-width:490px) {
	.mainCallInfo {background-size:auto 7.5em;}
}

.mainQuickLink {color:#fff; vertical-align:middle !important;}
.mainQuickLink .in {display:block; position:relative;}
.mainQuickLink strong {font-size:1.3em; line-height:1.3em; margin-bottom:2.23em;}
.mainQuickLink span {display:block; position:relative; font-size:.85em; line-height:1.5em;}
.mainQuickLink span:after {content:""; display:inline-block; vertical-align:middle; margin-left:.5em; width:1em; height:1em; font-size:1.176470588235em; background:url(../img/main/spr_main.svg) no-repeat 0 0; background-size:11em auto;}
.mainQuickLink .icon {display:block; position:absolute; width:5.5em; height:5em; bottom:0; right:-.8em; background:url(../img/main/spr_main.svg) no-repeat 0 -3.5em; background-size:11em auto;}
.mainQuickLink .icon.ty2 {background-position:-5.5em -3.5em;}
@media all and (max-width:1520px) {
	.mainQuickLink .icon {font-size:.8em;}
}
@media all and (max-width:1024px) {
	.mainQuickLink .in {z-index:0;}
	.mainQuickLink .icon {font-size:1em; bottom:auto; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); z-index:-1;}
	.mainQuickLink strong {margin-bottom:.85em;}
	.mainQuickLink strong br {display:none;}
}
@media all and (max-width:720px) {
	.mainQuickLink .icon {font-size:.8em;}
}
@media all and (max-width:640px) {
	.mainQuickLink {width:auto; float:none;}
	.mainQuickLink .icon {font-size:1em; right:0;}
	
}



/*************************************************
	Action
*************************************************/

.mainActionWrap {padding-bottom:6.4em;}
.mainActionWrap:before {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:15.75em; background:#F4F7FE;}
.mainActionWrap .inner {padding-top:6.25em; overflow:hidden; margin:0 auto; padding-top:3.75em;}
.mainActionWrap .tit {display:block; position:relative;}
.mainActionWrap .tit > * {display:block; position:relative;}
.mainActionWrap .tit strong {font-family:'TTWanjudaedunsancheB'; font-size:2.2em; color:#333;}
.mainActionWrap .tit strong em {color:#2E42A2;}
.mainActionWrap .tit span {display:block; position:relative; font-size:.85em; margin-top:1.2em; line-height:1.4em; color:#333; opacity:.6;}
@media all and (max-width:1024px) {
	.mainActionWrap {padding-bottom:4em;}
}
@media all and (max-width:640px) {
	.mainActionWrap {padding-bottom:2em;}
}


.mainAction {display:block; position:relative; padding-top:3.3em; z-index:1;}
.mainAction .slider {position:relative; margin: 0 -2em; }
.mainAction .swiper-container {overflow:visible;}
.mainAction .swiper-slide {position:relative; padding-top:5em;}
.mainAction .swiper-slide a {display:block; position:absolute !important; width:12em; height:12em; bottom:3.05em; left:50%; margin-left:-6em; border-radius:100%; background:no-repeat 50% 50%; background-size:cover; overflow:hidden; transition:.3s all; -webkit-transition:.3s all;}
.mainAction .swiper-slide a:after {content:""; opacity:0; display:block; position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; z-index:2; border-radius:100%; border:.5em solid #fff; transition:.3s all; -webkit-transition:.3s all;}
.mainAction .swiper-slide a strong {display:block; position:absolute; left:0; right:0; bottom:0; background:#2E42A2; text-align:center; padding:1.25em 1em 2.3em; color:#fff; transform:translateY(100%); -webkit-transform:translateY(100%); transition:.3s all; -webkit-transition:.3s all;}
.mainAction .swiper-slide a strong span {font-size:.85em; line-height:1.5em;}
.mainAction .swiper-slide a strong:after {content:""; display:inline-block; width:1em; height:1em; vertical-align:middle; background:url(../img/main/spr_main.svg) no-repeat 0 0; background-size:11em auto; margin-left:.3em;}
.mainAction .swiper-slide a.ty1 {background-image:url(../img/main/img_action_01.png);} /* 지진 */
.mainAction .swiper-slide a.ty2 {background-image:url(../img/main/img_action_02.png);} /* 화재 */
.mainAction .swiper-slide a.ty3 {background-image:url(../img/main/img_action_03.png);} /* 폭염 */
.mainAction .swiper-slide a.ty4 {background-image:url(../img/main/img_action_04.png);} /* 장마 */
.mainAction .swiper-slide a.ty5 {background-image:url(../img/main/img_action_05.png);} /* 호우/태풍 */
.mainAction .swiper-slide a.ty6 {background-image:url(../img/main/img_action_06.png);} /* 강풍 */
.mainAction .swiper-slide a.ty7 {background-image:url(../img/main/img_action_07.png);} /* 황사 */
.mainAction .swiper-slide a.ty8 {background-image:url(../img/main/img_action_08.png);} /* 교통사고 */
.mainAction .swiper-slide .subj {display:block; position:relative; margin-top:13.85em; text-align:center; height:1.2em;}
.mainAction .swiper-slide .subj strong {display:block; position:relative; font-size:1em; line-height:1.2em; text-align:center; transition:.3s all; -webkit-transition:.3s all;}
.mainAction .swiper-slide .cover {display:block; position:absolute; bottom:5.5em; left:0; right:0; border-radius:.5em; padding:.65em 1em; background:#333; color:#fff; opacity:0; visibility:hidden; transition:.3s all; -webkit-transition:.3s all;}
.mainAction .swiper-slide .cover:after {content:""; display:block; position:absolute; width:0; height:0; top:100%; left:50%; margin-left:-.6em; border:.6em solid transparent; border-top-width:1em; border-bottom-width:0; border-top-color:#333;}
.mainAction .swiper-slide .cover span {display:block; position:relative; font-size:.85em; line-height:1.5em; word-break:keep-all; text-align:center;}

.mainAction .swiper-slide-active a {bottom:2.3em; width:16em; height:16em; margin-left:-8em; box-shadow:.25em .25em 2em 0 rgba(0,0,0,.05);}
.mainAction .swiper-slide-active a:after {opacity:1;}
.mainAction .swiper-slide-active a strong {transform:translateY(0); -webkit-transform:translateY(0);}
.mainAction .swiper-slide-active a ~ .subj strong {font-size:1.2em; line-height:1em; font-weight:600;}
.mainAction .swiper-slide-active a ~ .cover {bottom:19.5em; opacity:1; visibility:visible;}

.mainAction .control {position:absolute; top:-3.1em; right:.5em;}
.mainAction .control > * {display:inline-block; vertical-align:middle;}
.mainAction .control button {position:relative; width:3.1em; height:3.1em; border-radius:100%; background:#fff; text-indent:-999px; box-shadow:.25em .25em 1.5em 0 rgba(0,0,0,.05); overflow:hidden;}
.mainAction .control button:before {content:""; display:block; position:absolute; width:1em; height:1em; top:50%; left:50%; margin:-.5em 0 0 -.5em; background:url(../img/main/spr_main.svg) no-repeat -2em 0; background-size:11em auto;}
.mainAction .control button.prev:before {background-position:-2em 0;}
.mainAction .control button.next:before {background-position:-3em 0;}
.mainAction .control .pager {width:auto; bottom:auto; vertical-align:middle; margin:0 .5em;}
.mainAction .control .pager span {display:inline-block; vertical-align:middle; font-size:1em; font-weight:700; color:#333; min-width:2em; text-align:center;}
.mainAction .control .pager i {display:inline-block; vertical-align:middle; width:1.05em; height:1em; background:url(../img/main/spr_main.svg) no-repeat -4em 0; background-size:11em auto;}
.mainAction .control .pager .swiper-pagination-current {color:#454683;}


@media all and (max-width:1024px) {
	.mainAction {padding-top:8em;}
}
@media all and (max-width:760px) {
		
	.mainActionWrap .tit strong em {display:block;}
	.mainActionWrap .tit span {max-width:16em; word-break:keep-all; font-size:1em;}
	.mainAction .slider {position:relative; margin: 0 auto;}
	.mainAction .control {top:-6.5em; right:0;}
	.mainAction .control button {width:2.5em; height:2.5em;}
	.mainAction .control .pager {margin:0;}
}
@media all and (max-width:490px) {
	.mainAction .control {position:relative; top:auto; margin-top:2em; text-align:center;}
}



/*************************************************
	CCTV
*************************************************/

.mainCCTVWrap {position:relative; padding-top:3em; padding-bottom:4.15em; z-index:0;}
.mainCCTVWrap:before {content:""; display:block; position:absolute; top:0; left:0; right:0; height:19.1em; background:url(../img/main/bak_cctv_top.png) no-repeat 0 0 #2E42A2; background-size:auto 100%; z-index:-1;}
.mainCCTVWrap .inner {position:relative; z-index:0;}

.mainCCTVWrap .tit {display:block; position:relative; padding:1em 0 4.8em;}
.mainCCTVWrap .tit > * {display:block; position:relative; word-break:keep-all;}
.mainCCTVWrap .tit strong {font-size:2.2em; font-weight:600; color:#fff; font-family:'TTWanjudaedunsancheB'; margin-bottom:.5em;}
.mainCCTVWrap .tit em {color:#17A0FF;}
.mainCCTVWrap .tit span {display:block; position:relative; font-size:.85em; color:#fff; line-height:1.4em; opacity:.6;}

.mainCCTVWrap .category {position:absolute; right:0; top:0;}
.mainCCTVWrap .category li {display:block; position:relative; float:left;}
.mainCCTVWrap .category button {display:block; position:relative; height:7.5em; border-radius:.5em; text-align:center; padding:0 1.3em;}
.mainCCTVWrap .category button.on {background:rgba(0,0,0,.5); box-shadow:.5em .5em 2em 0 rgba(0,0,0,.1);}
.mainCCTVWrap .category button .icon {display:block; position:relative; width:2.2em; height:2.2em; margin:0 auto .6em;}
.mainCCTVWrap .category button .icon:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-1.1em 0 0 -1.1em; width:2.2em; height:2.2em; background:url(../img/main/spr_map.svg) no-repeat 0 -2em; background-size:11em auto;}
.mainCCTVWrap .category button .icon.ty1:before {background-position:0 -2em;}
.mainCCTVWrap .category button .icon.ty2:before {background-position:-2.2em -2em;}
.mainCCTVWrap .category button .icon.ty3:before {background-position:-4.4em -2em;}
.mainCCTVWrap .category button .icon.ty4:before {background-position:-6.6em -2em;}
.mainCCTVWrap .category button .icon.ty5:before {background-position:-8.8em -2em;}
.mainCCTVWrap .category button strong {display:block; position:relative; font-size:.9em; color:#fff; line-height:1.2em; height:2.5em; white-space:nowrap;}
.mainCCTVWrap .category button strong:before,
.mainCCTVWrap .category button strong:after {content:""; display:inline-block; position:relative; width:0px; height:100%; vertical-align:middle;}
.mainCCTVWrap .category button strong > span {display:inline-block; vertical-align:middle; width:98%;}

.mainCCTVWrap .mapCCTV {display:block; position:relative; height:30em;}
.mainCCTVWrap .mapContainer {position:absolute; top:0; bottom:0; right:-1em; left:50%; margin-left:-42em; background:#dadada; border-radius:2.5em 0 0 2.5em; overflow:hidden;}

.mainCCTVWrap .searchBox {display:block; position:absolute; top:2.25em; left:3.25em; bottom:2.25em; padding:1.4em; border-radius:1em; width:17.2em; background:rgba(255,255,255,.8); backdrop-filter:blur(2px); z-index:10;}
.mainCCTVWrap .searchBox .in {position:relative; height:100%;}
.mainCCTVWrap .searchBox .input {display:block; position:relative; height:2.6em; border-radius:.5em; overflow:hidden; background:#17A0FF;}
.mainCCTVWrap .searchBox .input input[type="text"],
.mainCCTVWrap .searchBox .input input[type="search"] {display:block; position:relative; height:100%; width:100%; border-radius:.5555555em; border:none; font-size:.9em; background:transparent; color:#fff; padding:0 2.5em 0 1em; z-index:0;}
.mainCCTVWrap .searchBox .input input[type="text"]::placeholder,
.mainCCTVWrap .searchBox .input input[type="search"]::placeholder {color:rgba(255,255,255,.6);}
.mainCCTVWrap .searchBox .input .btn-search {display:block; position:absolute; right:.7em; top:50%; width:1.5em; height:1.5em; margin-top:-.75em; text-indent:-999px; overflow:hidden; z-index:5; background:url(../img/main/spr_map.svg) no-repeat -4em 0; background-size:11em auto; border:none;}
.mainCCTVWrap .searchBox .scroll {display:block; position:absolute; top:4em; left:0; right:0; bottom:0; overflow:auto;}
.mainCCTVWrap .searchBox li + li {margin-top:.9em;}
.mainCCTVWrap .searchBox li a {display:block; position:relative; padding-left:1.5em; min-height:1.25em;}
.mainCCTVWrap .searchBox li a:before {content:""; display:block; position:absolute; top:0; left:0; width:1em; height:1.25em; background:url(../img/main/spr_map.svg) no-repeat 0 -.15em; background-size:11em auto;}
.mainCCTVWrap .searchBox li a span {line-height:1.4em; font-size:.85em; color:#333;}

.mainCCTVWrap .map {display:block; position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden;}

.mainCCTVWrap .infowindow {position:absolute; bottom:2.5em; left:50%; width:25em; max-width:80vw; border-radius:.5em; background:#fff; box-shadow:0 0 1em 0 rgba(0,0,0,.2); transform:translateX(-50%); -webkit-transform:translateX(-50%);}
.mainCCTVWrap .infowindow .header {display:block; border-radius:.5em .5em 0 0; padding:.6em 1.1em; background:#333; font-size:1em; color:#fff; line-height:1.3em;}
.mainCCTVWrap .infowindow .body {display:block; position:relative; padding:1.2em 1.2em 0;}
.mainCCTVWrap .infowindow .body .video {display:block; position:relative; max-width:20.8em; margin:0 auto; overflow:hidden; z-index:0;}
.mainCCTVWrap .infowindow .body .video:before {content:""; display:block; position:relative; padding-top:66.58653846%; z-index:-1;}
.mainCCTVWrap .infowindow .body .video video {display:block; position:absolute; top:0; left:0; width:100% !important; height:100% !important;}
.mainCCTVWrap .infowindow .body .video-footer {display:block; position:relative; padding:.75em; text-align:center;}
.mainCCTVWrap .infowindow .body .video-footer .desc {display:block; position:relative; font-size:.85em; color:#333; line-height:1.5em;}
.mainCCTVWrap .infowindow .control {display:block; position:absolute; width:2em; height:2em; top:0; right:0; margin:-.75em -.9em 0 0;}
.mainCCTVWrap .infowindow .control a {display:block; position:relative; width:100%; height:100%; overflow:hidden; text-indent:-999px; border-radius:100%; background:url(../img/main/spr_map.svg) no-repeat -1.5em 0; background-size:11em auto;}

@media all and (max-width:1750px) {	
	.mainCCTVWrap {padding-top:0; padding-bottom:0;}
	.mainCCTVWrap:before {display:none;}
	.mainCCTVWrap .inner {margin:0 -1em; padding:2.1em 1em 0; background:url(../img/main/bak_cctv_top.png) no-repeat 0 0 #2E42A2; background-size:auto 100%;}
	.mainCCTVWrap .tit {padding-top:0; padding-bottom:1.975em; text-align:center;}
	.mainCCTVWrap .mapCCTV .mapContainer {left:-1em; margin-left:0; border-radius:0;}
	.mainCCTVWrap .searchBox {top:0; left:0; bottom:0; border-radius:0; max-width:40%;}
	.mainCCTVWrap .category {position:relative; padding-bottom:1.7em; text-align:center;}
	.mainCCTVWrap .category:after {content:""; display:block; clear:both;}
	.mainCCTVWrap .category li {float:none; display:inline-block; vertical-align:middle;}
}
@media all and (max-width:720px) {
	.mainCCTVWrap {padding-top:2.625em;}
	.mainCCTVWrap .category {padding-bottom:2.5em;}
	.mainCCTVWrap .category li {display:block; width:50%; float:left;}
	.mainCCTVWrap .category button {height:2.8125em; width:100%; padding:0 0 0 3.4375em; border-radius:0; text-align:left;}
	.mainCCTVWrap .category button .icon {position:absolute; left:0; top:0; width:2.8125em; height:2.8125em; border-radius:100%;}
	.mainCCTVWrap .category button .icon:before {font-size:.8em;}
	.mainCCTVWrap .category button br {display:none;}
	.mainCCTVWrap .category button.on {background:transparent; box-shadow:none;}
	.mainCCTVWrap .category button.on .icon {background-color:rgba(0,0,0,.5); box-shadow:.5em .5em 2em 0 rgba(0,0,0,.1);}
	
	.mainCCTVWrap .mapCCTV {height:40.25em; z-index:1;}
	.mainCCTVWrap .mapContainer {overflow:visible;}
	.mainCCTVWrap .searchBox {top:0; left:0; right:0; bottom:auto; width:auto; height:10em; max-width:100%; padding:0; z-index:2;}
	.mainCCTVWrap .searchBox .input {position:absolute; top:-1.3em; left:2.2em; right:2.2em; height:3.25em;}
	.mainCCTVWrap .searchBox .input input[type="text"],
	.mainCCTVWrap .searchBox .input input[type="search"] {font-size:1.05em;}
	.mainCCTVWrap .searchBox .scroll {top:3em; left:1.25em; right:1.25em; bottom:1.5em;}
	.mainCCTVWrap .searchBox li + li {margin-top:.6875em;}
	.mainCCTVWrap .searchBox li a span {font-size:1em;}
}
@media all and (max-width:460px) {
	.mainCCTVWrap .category li {width:auto; float:none;}
}