
/* Main */
#contents{padding:0;}
#mainVisual{height:602px; position:relative;}
#mainVisual .mvList{height:100%; position:relative;}
#mainVisual .mvList li{width:100%; height:100%; background-repeat:no-repeat; background-position:center top; position:absolute; left:0; top:0; display:none; z-index:0;}
#mainVisual .mvList li:first-child{display:block; z-index:1;}
#mainVisual .cont{width:1000px; padding:150px 0 0; margin:0 auto; position:relative;}
#mainVisual .cont:after{content:''; height:1px; display:block; background:#fff; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; right:0; bottom:0;}
#mainVisual .cont em{margin-bottom:17px; display:block; font-size:20px; font-weight:bold; color:#18a7e4;}
#mainVisual .cont strong{font-size:50px; line-height:55px; font-weight:bold; color:#fff;}
#mainVisual .cont p{padding:20px 0 45px; font-size:17px; line-height:25px; color:#b7b7b7; position:relative;}
#mainVisual .cont p .btn_detail{width:185px; height:38px; position:absolute; right:0; top:28px; border:1px solid #fff; text-align:center; font-size:14px; line-height:36px; color:#fff; opacity:0.6; filter:alpha(opacity=60);}
#mainVisual .controller,#mainVisual .nav button{z-index:2;}
#mainVisual .controller{text-align:center; position:absolute; left:0; right:0; bottom:22px; font-size:0;}
#mainVisual .controller ol{display:inline-block; zoom:1; *display:inline; font-size:0; vertical-align:middle;}
#mainVisual .controller ol li{display:inline-block; zoom:1; *display:inline;}
#mainVisual .controller ol li a{width:15px; height:15px; display:block; background:url('../image/main/mv_controller_bg.png') no-repeat; text-indent:-9999px;}
#mainVisual .controller ol li.active a{background-position:0 -15px;}
#mainVisual .controller ol li,#mainVisual .controller button{margin:0 2px 0 3px;}
#mainVisual .controller button{display:inline-block; zoom:1; *display:inline; font-size:0; line-height:0; vertical-align:middle;}
#mainVisual .controller button span{width:15px; height:15px; display:block; background:url('../image/main/mv_controller_btn.png') no-repeat;}
#mainVisual .controller button.stop span{background-position:0 -15px;}
#mainVisual .nav button{margin-top:-28px; position:absolute; top:50%;}
#mainVisual .nav button.prv{left:20px;}
#mainVisual .nav button.next{right:20px;}

#mainContents{padding-top: 20px;}
#mainContents .sectionWrap{margin:-18px 0 0 -17px;}
#mainContents .sectionWrap:after{content:''; display:block; clear:both;}
#mainContents .section{width:350px; height:234px; padding:0 10px; float:left; margin:5px 0 0 12px; box-sizing:border-box; position:relative; background: #fafafa; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
#mainContents .section:before{content:''; width:326px; height:239px; background:url('../image/main/m_section_bg.png') no-repeat; position:absolute; left:-1px; top:-1px;}
#mainContents .section.m_webzine:before{background-image:url('../image/main/m_section_webzine.png');}
#mainContents .section.m_webzine.ver2:before{background-image:url('../image/main/m_section_webzine02.png');}
#mainContents .section.m_vod:before{background-image:url('../image/main/m_section_webzine03.png');}
#mainContents .section.m_date:before{background-image:url('../image/main/m_section_webzine04.png');}
#mainContents .section h3{padding:23px 0 18px; font-size:20px; font-weight:bold; color:#333; letter-spacing:-1px;}
#mainContents .section.m_webzine h3,#mainContents .section.m_vod h3{color:#fff;}
#mainContents .section .more{position:absolute; right:0; top:26px;}
#mainContents .section .more.write {position:absolute; right:32px; top:26px;}
#mainContents .section .cont,
#mainContents .section .bbs,
#mainContents .section .m_memo,
#mainContents .section .m_scedule{position:relative;}
#mainContents .section.m_date{text-align:center;}
#mainContents .section.m_date .cont{padding:105px 0 0;}
#mainContents .section.m_date .dateBox{line-height:60px; font-size:25px; color:#fff;}
#mainContents .section.m_date .dateBox strong{font-size:60px; font-weight:normal; color:#18b3b7; vertical-align:-5px;}
#mainContents .section.m_date .desc{font-size:14px; color:#bababa; letter-spacing:-1px;}

#mainContents .section .bbs ul{}
#mainContents .section .bbs ul li{padding:0 90px 8px 0; font-size:14px; position:relative;}
#mainContents .section .bbs ul li:after{content:''; display:block; clear:both}
#mainContents .section .bbs ul li p{overflow:hidden; white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis;}
#mainContents .section .bbs ul li p a{color:#444;}
#mainContents .section .bbs ul li span{color:#888; position:absolute; right:0; top:0;}
#mainContents .section .m_memo{}
#mainContents .section .m_memo ul{height:135px; overflow-x:hidden; overflow-y:auto;}
#mainContents .section .m_memo ul li{font-size:14px; line-height:18px; color:#555;}
#mainContents .section .m_memo ul li+li{margin-top:9px;}
#mainContents .section .m_memo ul li span{margin-left:5px; font-size:12px; color:#888;}
#mainContents .section.m_vod .nav{position:absolute; right:0; top:28px;}
#mainContents .section.m_vod .nav:after{content:''; display:block; clear:both;}
#mainContents .section.m_vod .nav button{float:left;}
#mainContents .section.m_vod .nav button+button{margin-left:3px;}
#mainContents .section .m_vod_wrap{width:260px; height:146px; margin-top:-9px; overflow:hidden; position:relative;}
#mainContents .section .m_vod_wrap ul{width:1000%; height:100%; position:absolute; left:0; top:0;}
#mainContents .section .m_vod_wrap ul:after{content:''; display:block; clear:both}
#mainContents .section .m_vod_wrap ul li{width:10%; height:100%; float:left;}
#mainContents .section .m_vod_wrap ul li a{height:100%; display:block; position:relative;}
#mainContents .section .m_vod_wrap ul li a .info{padding:8px; text-align:center; position:absolute; left:0; right:0; bottom:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis;}
#mainContents .section .m_vod_wrap ul li a .info:before{content:''; position:absolute; left:0; top:0; right:0; bottom:0; background:#000; opacity:0.6; filter:alpha(opacity=60);}
#mainContents .section .m_vod_wrap ul li a .info span{font-size:13px; color:#fff; position:relative;}
#mainContents .section .m_scedule{}
#mainContents .section .m_scedule ul{}
#mainContents .section .m_scedule ul li{font-size:14px; line-height:16px;}
#mainContents .section .m_scedule ul li:after{content:''; display:block; clear:both}
#mainContents .section .m_scedule ul li+li{margin-top:13px;}
#mainContents .section .m_scedule ul li .date,#mainContents .section .m_scedule ul li .info{float:left;}
#mainContents .section .m_scedule ul li .date{width:115px; color:#777;}
#mainContents .section .m_scedule ul li .info{width:145px; color:#009fe3; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis;}
#mainContents .section .m_scedule ul li:first-child .date{font-weight:bold; color:#555;}
#mainContents .section .m_scedule ul li:first-child .info{font-weight:bold;}
#mainContents .section.m_webzine .cont{}
#mainContents .section.m_webzine .cont a.txt {overflow: hidden; max-height:90px; word-break:break-all; display:inline-block;}

#mainContents .m_webzine_wrap{min-height:143px;}
#mainContents .m_webzine_wrap:after{content:''; display:block; clear:both}
#mainContents .m_webzine_wrap .cont,#mainContents .m_webzine_wrap .photo{float:left;}
#mainContents .m_webzine_wrap .cont{width:120px; font-size:16px; line-height:18px; font-weight:bold; color:#fff; letter-spacing:-1px;}
#mainContents .m_webzine_wrap .cont strong{margin-bottom:2px; display:block; font-size:16px; font-weight:bold; color:#fff;}
#mainContents .m_webzine_wrap .cont a {}
#mainContents .m_webzine_wrap .photo{width:134px; height:156px; margin:-12px 0 0 8px; overflow:hidden;}
#mainContents .m_webzine_wrap .photo img{width:100%; height:100%;}
#mainContents .m_webzine_wrap .btn_detail{width:94px; height:26px; display:block; position:absolute; left:1px; bottom:10px; background:#002663; text-align:center; font-size:12px; line-height:24px; color:#fff;}
#mainContents .ver2 .m_webzine_wrap .cont{width:180px; font-size:14px; font-weight:normal; color:#fff; }
#mainContents .ver2 .m_webzine_wrap .cont strong{margin-bottom:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis;word-wrap:normal; width:180px;}
#mainContents .ver2 .m_webzine_wrap .cont p {overflow: hidden; max-height:80px; word-break:break-all; }
#mainContents .ver2 .m_webzine_wrap .btn_detail{background:#008cb1}

/* 한줄 메모장 */
#mainContents .section .memo {position:relative;}
#mainContents .section .layer_wrap {display:none;}
#mainContents .section .layer_wrap .memo_layer {position:absolute; left:0; right:0; top:0; bottom:0; z-index:100; padding:24px 30px 30px;}
#mainContents .section .layer_wrap .memo_layer .titleArea h6 {font-size:20px; font-weight:bold; color:#fff; letter-spacing:-1px; margin-bottom:14px; position:relative;}
#mainContents .section .layer_wrap .memo_layer .titleArea h6:after {content:""; display:block; clear:both;}
#mainContents .section .layer_wrap .memo_layer .titleArea  h6 span a.close {position:absolute;right:0; top:-2px;}
#mainContents .section .layer_wrap .memo_layer {}
#mainContents .section .layer_wrap .memo_layer form span{width:100%; margin:0 0 11px; display:block; float:left; position:relative;}
#mainContents .section .layer_wrap .memo_layer form span label{font-size:13px; line-height:35px; color:#888; position:absolute; left:13px; top:0;}
#mainContents .section .layer_wrap .memo_layer form textarea {width:100%; height:80px; padding:5px; box-sizing:border-box;}

#mainContents .section .layer_wrap span.dim1 {background:#000; opacity:.8; position:absolute; left:0; right:0; top:0; bottom:0; z-index:10;}