@charset "euc-kr";

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);

/*
³ëÅä»ê½º 'Noto Sans KR - 3,4,5,7,9'
³ª´®½ºÄù¾î 'NanumSquare - 3,4,7,8'
*/


body { min-width:320px; }
.pc { display: none !important;	 }
.mobile { display: block !important; }
.mobile_row { display: table-row }
* a, a:hover, a:visited { color: inherit; text-decoration: none; }
.txtBox { letter-spacing: -1px;	 }


/**** header ****/
header {width:100%; min-width:320px; height:60px; margin:0 auto; position: relative; position: fixed; left: 0; top: 0; z-index: 99999; background: #fff; box-shadow: 0px 1px 4px rgba(0,0,0,0.4); }
header:after {height:0; display:block; content:""; clear:both;}
header h1 {width:100%; float:left; text-align: center; margin-top: 12.5px; }
header h1 img { height: 35px; margin-left: 30px; }
header .toggle { position: absolute; display: block; cursor: pointer; top: 50%; left: 30px; transform: translate(-50%, -50%); }
header .toggle span { display: block; background: #111; width: 30px; height: 4px; border-radius: 3px; transition: 0.25s margin 0.25s, 0.25s transform;;}
header .toggle span:nth-child(1) { margin-bottom: 5px; }
header .toggle span:nth-child(3) { margin-top: 5px; }
header .toggle.active span { transition: 0.25s margin, 0.25s transform 0.25s; background: rgba(0,0,0,0.8); }
header .toggle.active span:nth-child(1) { margin-top: 8px; margin-bottom: -4px; transform: rotate(45deg); }
header .toggle.active span:nth-child(2) { transform: rotate(45deg); }
header .toggle.active span:nth-child(3) { margin-top: -4px; transform: rotate(135deg); }

header .m_main_menu { width: 80%; min-width:270px; height: 100%; position: fixed; padding: 20px;background-color: #fff; overflow: auto; top: 0px; left: -125%; z-index: 999; transition: left 1s ; box-shadow: 0px 0px 7px rgba(0,0,0,0.2); box-sizing: border-box;}
header .m_main_menu.move { left: 0; transition: left 1s ;  }
header .m_main_menu .toggle { left: auto; top: 30px ; right: 7px; }
header .m_main_menu .m_util { margin-top: 46px; margin-bottom:25px; text-align: center; clear: both;}
header .m_main_menu .m_util span { width: 33%; min-width:60px; font-size:11px; color:#666; float: left; border: 1px solid #d5d5d5; margin: 0 0.5% 20px 0; font-weight:500; box-sizing: border-box; }
header .m_main_menu .m_util span:last-child {margin-right:0;}
header .m_main_menu .m_util span:hover { color: #fff; background-color: #0b5189; border: 1px solid #0b5189; }
header .m_main_menu .m_util span a { display: block; width: 100%; line-height: 200%; }

header .m_nav .m_menu {font-size:14px; line-height: 40px; color:#252525; font-weight:bold; clear: both;}
header .m_nav .m_menu a { display: block; width: 100%; height: 100%;  }
header .m_nav .m_menu.on, header .m_nav .m_menu:hover { color: #0b5189; }
header .m_nav .m_menu:last-child {padding-right:0;}


/**** visual****/
.visual {width:100%; min-width:320px; height:38vw; min-height:260px; margin-bottom:0px; position:relative; overflow:hidden; margin-top: 60px;  }
.visual .swiper-container { height:38vw; min-height:260px; }
.visual .swiper-slide {width:100%; height:100%;}
.swiper-slide.visual_01{ background:url("/images/main/visu_04.jpg") bottom center no-repeat; background-size:cover; text-align:center; color:#fff;}

.visuTxt_wrap { position: absolute; height: 100%; left: 2.5%; right: 0; top: 0px; margin: 0 auto;z-index: 99999999; display: flex; flex-direction:column; flex-wrap: wrap; justify-content: center; align-items: flex-start;}
.visual .visuTxt { color: #fff; letter-spacing: -1px; line-height: 130%; }
.visual .visuTxt01 { font-size: 3vw; margin-bottom: 5px; letter-spacing: -2px; }
.visual .visuTxt02 { font-size: 3.5vw; line-height: 130%; color: #0b5189; }
/*.visual .visuLine { content:''; display: block; width: 5vw; height: 1px; margin: 25px 0 25px; }*/
.visual .visuTxt03 { font-size: 1.8vw; padding: 0.8vw 1.8vw 0.8vw 1.5vw;  margin: 2vw 0 1.5vw; }
.visual .visuTxt04 { font-size: 1.8vw; color: #0e2429; line-height: 145%; }
.visual .visuTxt05 { font-size: 1.4vw; color: #0e2429; }
.visual .visuTxt05 > img { margin-top: 10px; height: 3.5vw; }
.visual .visuTxt05 > img.spon1_img { margin-left: 0 !important; }

@media all and (max-width:520px){ /**/
.visual {width:100%; min-width:320px; height:60vw; min-height:240px; margin-bottom:0px; position:relative; overflow:hidden; margin-top: 60px;  }
.visual .swiper-container { height:60vw; min-height:240px; }
.visual .visuTxt01 { font-size: 4vw; margin-bottom: 5px; letter-spacing: -2px; }
.visual .visuTxt02 { font-size: 4.5vw; line-height: 130%; color: #0b5189; }
.visual .visuTxt03 { font-size: 2.8vw; padding: 0.8vw 1.8vw 0.8vw 1.5vw;  margin: 2vw 0 1.5vw; }
.visual .visuTxt04 { font-size: 2.8vw; color: #030303; line-height: 145%; }
.visual .visuTxt05 { font-size: 2.4vw; color: #0e2429; }
}

/**** ÃÊ´ëÀÇ ±Û ****/
.mContents { margin: 0 auto ; width: 95%; padding: 42px 2.5%; box-sizing: border-box; }
.mContents h3 { color: #111; font-size: 21px; font-weight: 600; text-align: center; line-height: 120%; margin-bottom: 20px; }
/*.mContents h3:after { content:''; width: 30px; height: 1px; background: #111; margin: 20px auto 25px; display: block; }*/
.mContents h5 { font-size: 15px; font-weight: bold; color: #111; margin: 20px 0 5px; background-size: 14px;}

.mGreeting_wrap { background: #e7f0fc; background-size: cover; padding-bottom: 45px;}
.mGreeting { height: auto; box-shadow: 1px 1px 7px rgba(0,0,0,0.07); text-align: justify;}
.mGreeting table { display: inline-block; float: left; margin-right: 35px; }

.mGreeting .imgBox img { width: 200px; }
.mGreeting .txtBox { overflow: hidden; color: #363636; letter-spacing: -1px; }
.mGreeting_name { margin-top: 30px; color: #111; padding: 3px 0; }
.mGreeting_name span { font-size: 17px; font-weight: 600; font-family: 'Nanum Myeongjo', serif; display: block; }

@media all and (max-width:800px){ /**/
.mGreeting table { float: none; margin-right: 0; text-align: center; margin-bottom: 20px;}
.mGreeting .imgBox img { width: 200px; }
} /**/

/*@media all and (max-width:600px){ 
.mGreeting .txtBox { overflow: hidden; color: #363636; letter-spacing: -1.2px; }
} */
@media all and (max-width:600px){ /**/
.mGreeting .txtBox { padding: 42px 3%; overflow: hidden; color: #363636; letter-spacing: -0.5px; text-align: left; }
} /**/

/**** Ãß°èÇмú´ëȸ ½Ç½Ã°£ ¿µ»ó ****/
.mLive_bg { position: absolute; left: 0.5%; right: auto; top: 50%; margin: 0 0; z-index: -1; width: 20%; }
.mLive { width: 100%; height: auto; text-align: center; box-sizing: border-box; z-index: 999; overflow: hidden; /*margin-top: 45px;*/}
.mVideo { width: 60%; margin: 0 auto; padding: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.4); border-radius: 15px; box-sizing: border-box; background: #fff;}
.mVideo .mVideo_img { width: 100%;position: relative; cursor: pointer; }
.mVideo .mVideo_img .default_img { width: 100%; height: auto;	}
.mVideo .mVideo_img:hover .mVideo_imgBox { display: block; opacity: 0.5; }
.mVideo .mVideo_imgBox { content:''; width: 100%; height: 100%;	position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 1; opacity: 0; transition:0.3s; }
.mVideo .mVideo_img .play_btn { width: 50px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 9;}
.blue_bg { width: 100%; height: 26.5vw; position: relative; z-index: -1; margin-top: -24vw; background-size: 155%; }

@media all and (max-width:600px){ /**/
.blue_bg {height: 23vw; }
.mVideo {width: 70%;}
} /**/


/**** ÇÁ·Î±×·¥ ****/
.mProgram_wrap { width: 100%; padding-bottom: 35px; margin: 35px 0; }
.mProgram { width: 95%; padding: 25px 2.5%; margin: 0 auto; background: rgba(255,255,255,0.65); box-sizing: border-box; }
.programTable { width: 100%;  table-layout:fixed;}
.programTable tr th { color:#fff; padding: 7px; }
.programTable tr th:nth-child(2) { border-right: 1px solid #017dc7; }
.programTable tr td { padding: 6px 12px; border-left: 0; border-right: 0; color: #363636; }
.programTable tr td .mobile { color: #363636; }
.programTable tr .pc { display: none;	 }


/**** Footer ****/
footer { width: 100%; background: #464646; text-align: center; padding: 15px 2.5%; }
.footer_wrap { width: 100%; margin: 0 auto; padding: 40px 0; position: relative; line-height: 23px; overflow: hidden; }
.footer_txt { color: #fff;line-height: 140%; font-size: 12px; }
.footer_txt span { margin: 0 5px; }


/************ Sub Page ************/

/**** sVisual ****/
.sVisual { width:100%; height: 40vw; min-height:250px; overflow:hidden; background:url(/images/sub/sVisual.jpg) center no-repeat; background-size:cover;  }
.sVisual .sVisuTxt_wrap { width: 95%; letter-spacing: -2.5px; height:calc(40vw - 60px); min-height:140px; left: 0px; right: 0; top: 30px; ; z-index: 999; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: center; }
.sVisual .sVisuTxt01 { font-size: 2.5vw; color: #464646; margin-bottom: 5px; letter-spacing: -2px; }
.sVisual .sVisuTxt02 { font-size: 3vw; color: #005165; }
.sVisual .sVisuTxt03 { font-size: 2vw; color: #fff; padding: 1.2vw 2vw 1.2vw 1.5vw; margin: 1.5vw 0 1vw;}
.sVisual .sVisuTxt04 { font-size: 2vw; color: #111; }
.sVisual .sVisuTxt05 { font-size: 1.6vw; color: #111; }
/*.sVisual .sVisuTxt04:before { content:''; display: block; width: 4vw; height: 1px; background: #111; margin: 2vw auto 2.5vw;}*/

@media all and (max-width:520px){ /**/
.sVisual .sVisuTxt01 { font-size: 3.5vw; color: #464646; margin-bottom: 5px; letter-spacing: -2px; }
.sVisual .sVisuTxt02 { font-size: 3.5vw; color: #005165; }
.sVisual .sVisuTxt03 { font-size: 2.5vw; color: #fff; padding: 1.2vw 2vw 1.2vw 1.5vw; margin: 1.5vw 0 1vw;}
.sVisual .sVisuTxt04 { font-size: 2.5vw; color: #111; }
.sVisual .sVisuTxt05 { font-size: 2.0vw; color: #111; }
.visual .visuTxt05 > img {height:20px;}
}

/**** sContainer sub_nav ****/
.sContainer { width: 95%; height: 100%; margin: 0 auto; overflow: hidden; }
.m_area_subnav { width:100%; height:35px; line-height:35px; color: #fff; background: #00afec; box-sizing: border-box; position: relative; margin-bottom: 20px; }
.m_area_subnav .sub_arr { position: absolute; right: 2.5%; top: 14.5px; transform:rotate(180deg); cursor: pointer; transition:0.3s; }
.m_area_subnav .sub_arr.rotate { transform:rotate(0deg);  }
.m_area_subnav .m_sub_nav_title { font-size: 14px; display: block; padding-left: 2.5%; cursor: pointer; }
.m_area_subnav .m_sub_nav { width:100%; padding:0; margin:auto; border-bottom: 1px solid #ddd; background: #fff; box-shadow: 0 2px 15px rgba(0,0,0,0.2); padding:0 2.5%; display: none;	position: absolute; left: 0; top: 35px;	 z-index: 99; }
.m_area_subnav .m_sub_nav:after { clear:both; display:block; content:"";}
.m_area_subnav .m_sub_nav .menu { width:100%; height:100%;	margin:0; font-size:14px; line-height: 35px; color:#111; float:left; display:block;	 display:block; cursor: pointer; }
.m_area_subnav .m_sub_nav .menu:hover { color: #00afec; }


/**** sContainer > title location ****/
.sContainer .title { margin: 0 auto; text-align: center; display:block; padding: 35px 0 10px; }
.sContainer .title h2 {font-size:21px; color:#111; font-weight: 700; letter-spacing: -0.5px; line-height: 130%; display: inline; border-bottom: 3px solid #0b5189; padding-bottom: 10px; }

.sContents { margin: 0 auto; min-height:400px; overflow: hidden; text-align: justify; padding: 30px 0 50px; }
.sContents h5 { font-size: 15px; font-weight: bold; color: #111; background: url('/images/sub/sub_icon.jpg') 0 5px no-repeat; padding-left: 20px; margin: 20px 0 5px; background-size: 14px;}
.sContents h6 { font-size: 14px; color: #16427b; margin: 20px 0 10px;padding-left: 10px; background: url('/images/sub/ssubTitle_bg.jpg') 0 center no-repeat; }
.sContents h6 span { border-bottom: 1px solid #16427b; font-weight: 500; }
.sContents .imgBox { text-align: center; margin-bottom: 50px; }
.sContents .imgBox table { display: inline-block; }

.sContents.mGreeting { border-top: 0; }
.deadLine { color: #0b5189; font-size: 15px; padding: 20px; border: 1px solid #ddd;box-sizing: border-box; text-align: center; font-weight: 400; }


/* popup */
.popup_wrap {width:100%; min-width:320px; height:100%; background: url('/images/main/popBg.png'); position:fixed; top:0; left:0; z-index:99999; }
.popup {width:95%; height:90%; top: 0; background:#fff; overflow:auto; position: relative;}
.popTitle { width: calc(95% - 5px); min-width:256px; height:40px; background: #fff url(/images/sub/sub_icon.jpg) 12px 12px no-repeat; padding-left:40px; box-sizing: border-box; position: fixed; border-bottom: 1px solid #cdcdcd; font-size: 15px; z-index: 999999; padding-bottom: 0; }
.popTitle div { width: calc( 100% - 55px );line-height:40px; color: #252525; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.popTitle p.close_bt { position:absolute; top:5px; right:5px; z-index:999999;}
.popTitle p.close_bt img { width: 30px;	 }
.popVideo { width: 100%; height: 51.5vw; margin-top: 0px;	}
.popup_load { width: 100%; padding: 0 0 15px 0; margin: 40px auto 0;overflow: hidden; box-sizing: border-box; padding-bottom: 30px;}
.popup_load.popPhoto_load { padding-bottom: 0; }
.popVideo.popPhoto { text-align: center; overflow: auto; }
.hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}

.scrollOff { position:fixed;overflow:hidden;height:100%; }

@media all and (max-width:500px){
	.popup.popup_photo { height: auto;	}
}


/* popup_video */
.popVideo_left .popVideo { width: 100%; height: 51vw; }
.popVideo_left .popVideo > img { width: auto; height: 100%; }
.popVideo_left { width: 100%; height: auto; float: left; }
.popVideo_left	iframe { width: 100%; height: 51vw; }
.popVideo_left .Rd_down { width: 95%; margin: 0 auto; text-align: center; }
.popVideo_left .Rd_down a{ width: 280px; height: auto; line-height: 115%; background: #464646; border: 2px solid #464646; color: #fff; text-align: center; margin: 15px auto; border-radius: 3px; cursor: pointer; padding: 7px 10px; font-size: 12.5px; }
.popVideo_left .Rd_down a.Rd_down_link { width: auto; padding: 7px 5px 7px 20px;}
.popVideo_left .Rd_down a.Rd_down_link.mobile_mb { margin-bottom: 5px; }
.popVideo_left .Rd_down a.Rd_down_link + a.Rd_down_link { margin-top: 0; }
.popVideo_left .Rd_down a:hover { color: #464646; background: #fff; }
.popVideo_left .Rd_down img { margin-right: 15px; margin-top: -3px; height: 14px; }
.w630.mobile { display: none; }

.popComment_wrap { padding: 0; }
.popComment_wrap { width: 95%; padding:0px; margin: 0 auto; box-sizing: border-box; }
.write_upload_btn_box { width: 100%; height: auto;	text-align: right; overflow: hidden; background: #00afec; border-radius: 5px 5px 0 0; color: #fff; padding: 0 10px; }
.write_upload_btn_box > div { float: left; line-height: 35px; }
.write_upload_btn_txt01 { float: left; color:#fff; font-size: 15px; letter-spacing: -1px; overflow: hidden; }
.write_upload_btn_txt01 img { margin: 0 11px 0 13px; }
.write_upload_btn_txt02 { float: left; color: #a1a1a1; font-size: 10.5px; }
.write_upload_btn_txt02 a.login_bt { color: #000; font-size: 12px; font-weight: 700; }
.write_upload_btn_txt02 a.enter_bt { color: #fff; font-weight: 500; }

.write_upload_btn_box a.write_upload_btn { line-height: 35px; font-size: 13px; color:#fff; float: right; padding: 0; border-radius: 4px; margin-left: 10px; }
.write_upload_btn_box a.write_upload_btn > img { width: 10px; margin-top: -2px; }
.cbox_write_textarea { height: auto; line-height: 140%; font-size: 13px; padding: 20px 15px; box-sizing: border-box; border: none; overflow: auto; margin-bottom: 5px; color: #666; resize:none; letter-spacing: -0.5px; border: 1px solid #ddd; border-radius: 0 0 5px 5px; }
.cbox_write_textarea::placeholder { color: #aaa; }

@media all and (max-width:820px){ /**/
	.popVideo_left .Rd_down a { width: auto; }
	.popVideo_left .Rd_down a.Rd_down_link { width: 100%; padding: 7px;}
	.popVideo_left .Rd_down img {  margin-right: 0; margin-top: -2px; }
	.write_upload_btn_txt02 > img { margin: 0 5px 0 0; }
} /**/
@media all and (max-width:400px){ /**/
	.w630.mobile { display: block; }
} /**/

.popVideo_right { width: 95%; height: 100%; float: none; margin: 0 auto; clear: both;	}
.popVideo_right .refresh_btn { width: 100%; height: 33px; line-height: 29px; color: #fff; font-size: 13px; background: #666; border-radius: 5px; text-align: center; cursor: pointer; box-sizing: border-box; border: 2px solid #666;}
.popVideo_right .refresh_btn:hover { color: #666; background: #fff; }

.popComment_box { width: 100%; height: 600px; margin-top: 5px; clear: both; background: #cfd7e2; padding: 20px 18px; box-sizing: border-box; }
.popComment_box ul { height: calc( 100% - 80px); overflow: auto; }
.popComment_box ul li { width: 95%; margin-bottom: 18px; }
.popComment_box .comment_id { color: #88898c; font-size: 11px; margin-bottom: 5px; }
.popComment_box .comment_id span { color: #333; font-weight: 500; margin-right: 10px; }
.popComment_box .comment_txt { display: inline-block; color: #333; background: #fff; border-radius: 5px; clear: both; padding: 8px; line-height: 130%; font-size: 13px; word-break:break-all;}

.commnet_paging { width: 100%; overflow: hidden; margin-top: 10px; }
.commnet_paging a, .video_new .commnet_paging a.paging_arr.on { width: 7.14%; height: 4.8vw; float: left; background: #fff; color: #333; border: 1px solid #ddd; box-sizing: border-box; font-size: 10px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; line-height: 100%; }
.commnet_paging a:hover { color: #fff; background: #444; border: 1px solid #444; }

@media all and (max-width:500px){
	.commnet_paging a, .video_new .commnet_paging a.paging_arr.on { width: 14.28%; height: 6.7vw; }
}


/* Æ÷½ºÅ͹ßÇ¥ > popup */
#outerContainer { width: 100%; float: none; margin-bottom: 20px;}
.post_comment.popVideo_right { width: 100%; margin-top: 0px; }

@media all and (max-width:580px){
 #outerContainer  { height: 118vw; }
}

#mainContainer > #viewerContainer > #viewer.pdfViewer .page { height: auto !important; }
#mainContainer > #viewerContainer > #viewer.pdfViewer .page .canvasWrapper { width: 100% !important; height: auto !important; }
#mainContainer > #viewerContainer > #viewer.pdfViewer .page .canvasWrapper canvas { width: 100% !important; }
#mainContainer > #viewerContainer > #viewer.pdfViewer .page .textLayer { height: auto !important; }


.post_comment.popVideo_right .comment_write { overflow: hidden;}
.post_comment.popVideo_right .cbox_write_textarea { height: 140px; margin-bottom: 10px;}


/* Æ˾÷ vod */
.only_video .popup {width:95%; height:calc(53vw + 38px); background:#fff; position: relative; overflow: hidden; padding: 0 5px; }
.only_video .popVideo { position: relative; width: 100%; padding-bottom: 56.25%; margin: auto; text-align: center; overflow: auto;}
.only_video .popVideo iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.only_video .popup_load { padding-bottom: 30px; }


/* Quick animation */
.quick li:hover img {animation-name:quick-img;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;}


@keyframes quick-img {
	16.65% {
	-webkit-transform: translateY(6px);transform: translateY(6px);
  }
  33.3% {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
  }
  49.95% {
	-webkit-transform: translateY(3px);
	transform: translateY(3px);
  }
  66.6% {
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
  }
  83.25% {
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
}