@charset "utf-8";


/*********************************
	Common Style
*********************************/
.mainSectionWrap {position:relative;}
.mainSection {position:relative; padding-left:1em; padding-right:1em;}
.mainSection > .inner {padding:2em 0; max-width:1560px;}

.mainSection div.tit {font-size:1.95em; line-height:1.4; margin-bottom:.7em; font-family:'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif; color:#565656;}
.mainSection div.tit em {color:#222;}

.more {display:block; position:absolute; right:0; top:0; width:2em; height:2em; margin-top:.5em; background:url(../../portal/img/main/btn_more.svg) no-repeat 50% 50%; background-size:auto; text-indent:-999px; border-radius:.25em; border:1px solid #DDDDDD; box-shadow:.2em .2em .5em 0 rgba(0,0,0,.05); overflow:hidden;}

.control {position:absolute; top:50%; left:0; right:0; z-index:1;}
.control button {display:block; position:absolute; top:50%; margin-top:-1.55em; width:3.1em; height:3.1em; background:#fff; border-radius:100%; z-index:2; text-indent:-999px; overflow:hidden; border-radius:100%; box-shadow:1em 1em 1.5em 0 rgba(0,0,0,.05);}
.control button:before {content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:url(../../portal/img/main/spr_nav.svg) no-repeat 0 0;/* background-size:auto 3.1em; */}
.control button.prev {left:-1.55em;}
.control button.prev:before {background-position: 0 100%;}
.control button.next {right:-1.55em;}
.control button.next:before {background-position: 100% 100%;}
.control button.swiper-button-disabled {background:rgba(255,255,255,0.95); opacity:1; box-shadow:none;}
.control button.prev.swiper-button-disabled:before {opacity:.3;background-position: 0 0;}
.control button.next.swiper-button-disabled:before {opacity:.3; background-position: 100% 0;}

@media all and (max-width:1024px) {
	
}

@media all and (max-width:460px) {
	.mainSection > .inner {padding:1em 0;}
}



/****************************************************************
	Slider Common Style
****************************************************************/

.slider .swiper-slide {width:100%; height:auto; }
.slider .swiper-slide > a {display:block;}
.slider .swiper-slide img {display:block; max-width:100%; height:100%;}
.slider .swiper-slide img[src*="noimage"] {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important;}

.slider .swiper-slide > a,
.swiper-container {height:100% !important;}


/****************************************************************
	유튜브 생방송
****************************************************************/

.mainVideoWrap {position:fixed;top:0;right:0;bottom:0;width: 59em;margin-right: -50.5em;transition:.5s all;-webkit-transition:.5s all;transition:.5s all;z-index:5;-webkit-transition:.5s all;}
.mainVideoWrap .control {display:block;position:relative;top: 50%;right:0;width: 13em;height: 4em;border-radius:0 0 1em 1em;background:#0068C9;color:#fff;font-weight:600;transform:rotate(90deg);}
.mainVideoWrap .control span {position: absolute;/* margin-left: 0; */width: 0em;display: block;bottom: -3.3em;left: 6em;transform: rotate(-90deg);}
.mainVideoWrap .control span:after {content:'';display:block;position:absolute;bottom: 0;left: -2px;margin-top:0.15em;margin-right:-1.4em;background: url(/news/img/main/ico_video.svg) no-repeat;background-size: contain;width: 1.2em;height: 1.2em;transform: rotate(90deg);z-index: 1;}
.mainVideoWrap .control.open,
.mainVideoWrap .control.close {position:relative;}
.mainVideoWrap .control.open:after {content:'';display:block;width:2em;height:2em;position:absolute;top: 23%;right:0;margin-right:-1em;transform:rotate(-90deg);background:url(/news/img/main/ico_video_open.svg) no-repeat;background-size:contain;}
.mainVideoWrap .control.close:after {content:'';display:block;width:2em;height:2em;position:absolute;top: 25%;right:0;margin-right:-1em;transform:rotate(90deg);background:url(/news/img/main/ico_video_open.svg) no-repeat;background-size:contain;}
.mainVideoWrap .control span em {display:inline-block; text-indent:-9999px;}
.mainVideoWrap .pannel {opacity:1;position:absolute;top:50%;right:0;transform:translateY(-50%);margin-top:3em;margin-right:-3em;width: 52em;padding:2em;background:linear-gradient(104deg, #0068C9 10.76%, #0099C9 99.85%);border-radius:2em 0 0 2em;transition:.3s all;-webkit-transition:.3s all;}
.mainVideoWrap .pannel .videoWrap {width:45em; overflow:hidden; border-radius:1em;}
.mainVideoWrap:not(.state-open) .control.open {display:block;}
.mainVideoWrap:not(.state-open) .control.close {display:none;}
.mainVideoWrap:not(.state-open) .pannel {opacity:0; visibility:hidden;}
.mainVideoWrap.state-open .control.open {display:none;}

.mainVideoWrap.state-open {margin-right:0;}
.mainVideoWrap.state-open .control.close {margin-left:2em;}

@media all and (max-width:1024px) {
	.mainVideoWrap  {max-width: 70%;min-width: 74%;width: auto;top:auto;left:1.5em;right:auto;bottom:1.5em;background:transparent;z-index:6;}
	.mainVideoWrap .control {transform: rotate(0deg);border-radius:1em;top:100% !important;bottom:0 !important;left:0;right:100% !important;margin-left:0 !important; width: 11.5em; height: 4em;}
	.mainVideoWrap .control span{transform: rotate(0deg); width: auto; bottom: 1.3em; left: auto; margin-left: 2em;}
	.mainVideoWrap .control span:after{right:-2px;left: auto;}
	.mainVideoWrap .pannel {top:auto;bottom:4.5em;left:0;width: auto;padding:1em .75em;/* background:#fff; */border-radius:.75em;transform:none;-webkit-transform:none;box-shadow:0 0 1em 0 rgba(39,47,119,.2);}
	.mainVideoWrap .pannel .videoWrap {width:auto;}
	.mainVideoWrap .control.open:after  {transform:rotate(-270deg);top: 30%;}
	.mainVideoWrap .control.close:after {transform:rotate(270deg);top: 30%;}

}




/****************************************************************
	상단 비주얼 슬라이드 : 뉴스 비디오 영역
****************************************************************/

.mainVisualWrap {position:relative; background:url(../../portal/img/main/bak_intro.png) no-repeat 50% 0 #F8FAFC; background-size:cover;}
.mainVisualWrap:before {}
.mainVisualWrap	.control {position:relative; top:auto; left:auto;}
.mainVisualWrap .mainVideo {position:relative;}
.mainVisualWrap .mainVideo 	.slider {position:relative; height:100%; border-radius:1em; overflow:hidden; background:#fff; box-shadow:0 0 2em 0 rgba(52,64,94,.1);}
.mainVisualWrap .mainVisual .slider .swiper-container,
.mainVisualWrap .mainVisual .slider .swiper-wrapper,
.mainVisualWrap .mainVisual .slider .swiper-slide {position:absolute; top:0; left:0; right:0; bottom:0; height:100%; z-index:1;}
.mainVisualWrap .mainVideo .control {position:absolute;bottom: 1em;right: -1em;width: 2.5em;height: 2.5em;background:#0068C9;border-radius: 50%;}
.mainVisualWrap .mainVideo .control button {display:block; position:absolute; top:50%; margin-top:-1.55em; width:3.1em; height:3.1em; background:#fff; border-radius:100%; z-index:2; text-indent:-999px; overflow:hidden; border-radius:100%; box-shadow:1em 1em 1.5em 0 rgba(0,0,0,.05);}
.mainVisualWrap .mainVideo .control button:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:url(../../portal/img/main/spr_nav.svg) no-repeat 0 0; background-size:auto 3.1em;}
.mainVisualWrap .mainVideo .control button.prev {left:-1.55em;}
.mainVisualWrap .mainVideo .control button.next {right:-1.55em;}
.mainVisualWrap .mainVideo .control button.next:before {background-position:100% 50%;} 
.mainVisualWrap .mainVideo .control button.swiper-button-disabled {opacity:1; box-shadow:none;}
.mainVisualWrap .mainVideo .control button.swiper-button-disabled:before {opacity:.3;}
.mainVisualWrap .mainVideo .control .pager {position:absolute; bottom:0; left:50%; transform:translateX(-50%); margin-bottom:-1.5em; width:auto; color:#777777; margin-right:1rem;}
.mainVisualWrap .mainVideo .control .pager > * {display:inline-block; position:relative; vertical-align:middle; margin:2px;}
.mainVisualWrap .mainVideo .control .pager i {width:.5em; height:.5em;}
.mainVisualWrap .mainVideo .control button.stop,
.mainVisualWrap .mainVideo .control button.play {position:absolute;top: 0;left: 0;transform: inherit;width:.65em;height:.65em;margin-top: 1em;margin-left: 1em;background: url(../img/main/spr_control_w.svg) no-repeat;background-size:cover;background-color:inherit;border-radius:0;box-shadow: none;}
.mainVisualWrap .mainVideo .control button.play {background-position:100% 100%;}
.mainVisualWrap .mainVideo .control button.stop {background-position:0 100%;}
.mainVisualWrap .mainVideo .control button.play {display:none;}
.mainVisualWrap .mainVideo .control button.stop:before,
.mainVisualWrap .mainVideo .control button.play:before {display:none;}

.mainVisualWrap .mainVideo .control .swiper-pagination-bullet {width:.5em; height:.5em; border-radius:100%; background:#ddd; opacity:1;}
.mainVisualWrap .mainVideo .control .swiper-pagination-bullet-active {background:#286CD1;}
.mainVisualWrap .mainVideo .control .swiper-pagination-bullet:before {display:none;}

.mainVisualWrap .mainVideo ul li a {}
.mainVisualWrap .mainVideo ul li a img {display:block; width:100%;}
.mainVisualWrap .mainVideo ul li a:before {content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(0deg, rgba(0, 0, 0, 0.70) 61.67%, rgba(0, 0, 0, 0.00) 87.88%);transition:.3s all; -webkittransition:.3s all;}
.mainVisualWrap .mainVideo p.subj,
.mainVisualWrap .mainVideo p.txt {display:block; position:absolute;   line-height:1.55em;  overflow:hidden; text-overflow:ellipsis; color:#fff;}
.mainVisualWrap .mainVideo p.subj {left:2em; right:2em; bottom:5em; font-weight:600; font-size:1.2em; white-space:nowrap;}
.mainVisualWrap .mainVideo p.txt {left:2.8em; right:2.8em; bottom:3em; font-weight:400; font-size:.85em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow: ellipsis;}

.mainNews {float:right;}
.mainNews ul {margin:-.75em;}
.mainNews ul li {position:relative; display:block; padding:0.35em 0.75em; box-sizing:border-box;}
.mainNews ul li .more {position:absolute; top:0; right:0; margin-top:0; background:#e5f3ff url(../../portal/img/main/btn_more.svg) no-repeat 50% 50%; border:0;}
.mainNews ul li button {display:block; padding:1.3em; text-align:left; background:#fff; box-sizing:border-box; border-radius:.6em; transition:all 0.2s;}
.mainNews ul li button .list {}
.mainNews ul li button .list .subj {font-weight:600; color:#222; line-height:1.5; letter-spacing:-0.54px; overflow:hidden; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.mainNews ul li button .list .txt {font-weight:400; margin-top:.75em; font-size:.87em; line-height:1.5; letter-spacing:-0.54px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;}
.mainNews ul li:hover button,
.mainNews ul li.active button {border: 1px solid #01B9F3; box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.10);}


@media all and (min-width:1025px) {
.mainVisualWrap .mainVideo{width:54.514%; float:left;}
.mainNews {width:40.676%;}
	
}


@media all and (max-width:1024px) {
	.mainNews {margin-top:3em;}
	
}


@media all and (max-width:460px) {
	.mainVisualWrap .mainVideo p.subj,
	.mainNews ul li button .list .subj {font-size:.9em;}
	.mainVisualWrap .mainVideo p.txt,
	.mainNews ul li button .list .txt {font-size:.8em;}
	.mainVisualWrap .mainVideo p.txt {bottom:1em;}
	.mainNews ul li {padding:.55em;}
}


/****************************************************************
	보도자료
****************************************************************/

.mainBoard {position:relative;}
.mainBoard .slider {padding:3em; border:10px solid #E9F4FF; border-radius:1em;}
.mainBoard ul {}
.mainBoard ul li {}
.mainBoard ul li a {display:block; border:1px solid #E2E2E2; background:#fff; border-radius:.7em; overflow:hidden; box-sizing:border-box;}
.mainBoard ul li a .thumb {position:relative; height:12em; background:#fff; overflow:hidden; }
.mainBoard ul li a .thumb img {display:block; position:absolute; top:0; max-width:100%; width:100%; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translateX(-50%,-50%); z-index:0;}
.mainBoard ul li a .txt {padding:1.2em;}
.mainBoard ul li a .txt .tit {line-height:1.4; height:3em;font-size:1em; margin-bottom:.7em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#2D2D2D; font-weight:600;}
.mainBoard ul li a .txt .sub {line-height:1.4; font-size:.9em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
 
 
 
 @media all and (max-width:460px) {
	.mainBoard .slider {padding:2em;}
	.mainBoard ul li a .txt .tit {font-size:.9em;}
	.mainBoard ul li a .txt .sub {font-size:.8em;}
	
}
 	
 
/****************************************************************
	인기뉴스 + 포항소식지 
****************************************************************/

.mainNewsWrap {position:relative; padding-bottom:4.5em;}
.mainNewsWrap:after {content:''; display:block; width:100%; height:5em; position:absolute; bottom:0; left:0; right:0; background:url(../img/main/bak_news.svg) no-repeat 0 0; z-index:-2;}


@media all and (min-width:1025px) {
.populaWrap {width:54.514%; float:left;}
.NewsLetter {width:40.676%;}

}

@media all and (max-width:1024px) {
	.NewsLetter {width:100%; margin-top:3em;}
	
}

/****************************************************************
	인기뉴스
****************************************************************/

.populaWrap {position:relative;}
.populaWrap .populaGroup {display:inline-block;}
.populaWrap .populaGroup ul {margin:-1em;}
.populaWrap .populaGroup ul li {position:relative; width:50%; float:left; padding:1em; }
.populaWrap .populaGroup ul li a {display:block; border-radius:0 1.2em 1.2em 0; box-sizing:border-box;  overflow:hidden; box-shadow:10px 10px 20px 0px rgba(0, 0, 0, 0.08);}
.populaWrap .populaGroup ul li a .thumb {position:relative; height:11em; background:#fff; overflow:hidden; }
.populaWrap .populaGroup ul li a .thumb img {display:block; position:absolute; top:0; max-width:100%; height:auto; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translateX(-50%,-50%); z-index:0;}
.populaWrap .populaGroup ul li a .txt {padding:1.2em 1.2em 3em 1.2em; color:#fff;}
.populaWrap .populaGroup ul li a .txt .tit {font-weight:600; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-height:1.4;}
.populaWrap .populaGroup ul li a .txt .sub {margin-top:.7em; font-size:.8em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.4;}
.populaWrap .populaGroup ul li a .txt .date {display:block; position:absolute; padding-left:1.25em; right:3em; bottom:3em; background:url(../img/main/ico_date.svg) no-repeat top 50% left 0; background-size:contain; font-size:.8em;}

.populaWrap .populaGroup ul li:nth-of-type(1) a {background-color:#449FFF;}
.populaWrap .populaGroup ul li:nth-of-type(2) a {background-color:#00C2B7;}
.populaWrap .populaGroup ul li:nth-of-type(1):after {content:''; display:block; position:absolute; left:0; bottom:0; margin-left:1em; margin-bottom:-1.2em; width:5.5em; height:2.3em; background:url(../img/main/popula_list_b.svg) no-repeat 0 0; }
.populaWrap .populaGroup ul li:nth-of-type(2):after {content:''; display:block; position:absolute; left:0; bottom:0; margin-left:1em; margin-bottom:-1.2em; width:5.5em; height:2.3em; background:url(../img/main/popula_list_m.svg) no-repeat 0 0; }

@media all and (max-width:840px) {
	.populaWrap .populaGroup ul li {width:100%;}
	.populaWrap .populaGroup ul li + li {margin-top:1em;}
}

@media all and (max-width:640px) {
	.populaWrap .populaGroup ul li a .txt .tit {font-size:.9em;}
	.populaWrap .populaGroup ul li a .txt .sub {font-size:.8em;}
}




/****************************************************************
	포항소식지
****************************************************************/

.NewsLetter {position:relative; float:right;}
.letterGroup:after {content:''; display:block; position:absolute; left:0; right:0; top:0; width:100%; height:17em; background:#EAF8FF; border-radius:1em; z-index:-1 }
.letterGroup {position:relative;height: 18em;padding:3em 2.5em 0 2.5em;}
.letterGroup .thumb {display: block; position:absolute; top:2.5em; width:13em; border-radius:1em; overflow:hidden; box-shadow:10px 10px 20px 0px rgba(0, 0, 0, 0.08);}
.letterGroup .thumb img {width:100%; height:100%;}
.letterGroup .con {position:absolute; right:4.5em; top:3em; text-align:center;}
.letterGroup .con .subj {display:inline-block; padding:.5em 1em; background-color:#59BCFF; color:#fff; border-radius:1em; font-size:.9em;}
.letterGroup .con .txt {display:block; margin-top:1em; font-size:.9em;}
.letterGroup .con .tit {display:block; margin-top:.5em; font-weight:600; font-size:1.5em;}
.letterGroup .btnWrap {position:absolute; right:4em; top:9em; margin-top:1.2em;}
.letterGroup .btnWrap ul {position:relative; display:block;}
.letterGroup .btnWrap ul li {}
.letterGroup .btnWrap ul li + li {margin-top:.5em;}
.letterGroup .btnWrap ul li a {display:block; position:relative; padding:.8em 1.3em;  border-radius:.4em; background:no-repeat top 50% left 1.1em #005CB9; background-size:1em auto;}
.letterGroup .btnWrap ul li a span {display:block; text-align:center; color:#fff; font-size:.95em; padding-left:2em;}
.letterGroup .btnWrap .view {background-image:url(../img/main/ico_view.svg);}
.letterGroup .btnWrap .total {background-image:url(../img/main/ico_total.svg);}
.letterGroup .btnWrap ul li:hover a {background-color:#004a95; box-shadow:10px 10px 10px 0px rgba(0, 0, 0, 0.03);}

@media all and (max-width:640px) {
	.letterGroup .thumb {width:8em; height:11em; }
	
}

@media all and (max-width:460px) {
	.letterGroup .thumb {display:none;}
	.letterGroup .con {top:2em;}
	.letterGroup .btnWrap {top:8em;}
	.letterGroup .con,
	.letterGroup .btnWrap {right:50%; transform: translateX(50%);}
	
}