@charset "utf-8";
@import url("default.css");
@import url("common.css");
@import url("board.css");
@import url("popup.css");
@import url("jquery_ui.css");

/* 메인 넓이 */
#mainWrap {min-width:1304px; position:relative; background:#fff;}
#mainWrap #headerUtil .inner {width:1304px;}
#mainWrap #header .inner {width:1304px;}
#mainWrap #footer .inner {width:1304px;}
#mainWrap #header .gnb {left:280px;}
#mainWrap #header:after {display:none;}
#mainWrap #header.active:after {display:block;}
#mainWrap #header.headerFix:after {display:block;}

/* 메인 컨테이너 */
#mainContainer {box-sizing:border-box; position:relative; padding-bottom:60px;}
#mainContents {}
#mainContents .inner {width:1304px; margin:0 auto; position:relative;}

/* 메인 비주얼 */
#mainVisual {height:600px; position:relative;}
#mainVisual ul {height:100%; background:#37373b;}
#mainVisual li {position:absolute; top:0; height:100%; right:0; width:100%;}
#mainVisual li {display:none;}
#mainVisual li.active {}
#mainVisual .timer {position:absolute; bottom:40px; right:50px; background:#000; width:100px; height:5px; z-index:5; border-radius:999px;}
#mainVisual .timer span {width:100%; height:100%; background:#a4292f; display:block; border-radius:999px;}
#mainVisual .txt {position:absolute; top:50%; margin-top:-60px; left:0; width:100%; text-align:center; color:#fff; font-size:22px; line-height:1.6;}
#mainVisual .txt strong {font-size:45px; font-weight:500;}

/* 중단 */
.mainUtil {margin-top:-53px; margin-bottom:20px;}
.mainUtil:after {content:""; display:block; height:0; visibility:hidden; clear:both;}
.mainUtil ul {float:left; width:408px; background:#fff; height:266px; box-sizing:border-box; margin-right:40px;}
.mainUtil ul li {float:left; width:50%; border-bottom:7px solid #a4292f;}
.mainUtil ul li.over {border-color:#555;}
.mainUtil ul li a {padding-top:149px; height:259px; width:100%; text-align:center; box-sizing:border-box; display:inline-block; font-size:17px; color:#333; transition:all 0.2s;}
.mainUtil ul li a:hover {color:#a4292f; background-color:#e9eaec !important;}
.mainUtil ul li a.util_1 {background:url(../images/main/ic_new_util_1.png) no-repeat center 90px;}
.mainUtil ul li a.util_2 {background:url(../images/main/ic_new_util_2.png) no-repeat center 90px;}
.mainUtil ul li a.util_3 {background:url(../images/main/ic_new_util_3.png) no-repeat center 90px;}
.mainUtil ul li a.util_4 {background:url(../images/main/ic_new_util_4.png) no-repeat center 90px;}


.mainUtil p {float:right; width:408px; background:#fff; height:266px; border-bottom:7px solid #a4292f; box-sizing:border-box; padding:25px 0 0 18px; position:relative;}
.mainUtil p.over {border-color:#555;}
.mainUtil p a {position:relative; position:absolute; bottom:25px; right:18px; width:372px; height:209px; display:inline-block;}
.mainUtil p a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,0.6) url(../images/main/img_fullscreen.png) center center no-repeat; opacity:0; transition:all 0.3s; background-size:15px auto;}
.mainUtil p a:hover:after {opacity:1; background-size:25px auto;}
.mainUtil p a.active {cursor:default;}
.mainUtil p a.active:after {background:none;}
.mainUtil .movieArea {position:absolute; bottom:180px; right:18px; z-index:100; box-shadow:2px 5px 10px rgba(0,0,0,0.5);}



.mainUtil .movieBox {float:right; width:408px; background:#fff; height:266px; border-bottom:7px solid #a4292f; box-sizing:border-box; padding:25px 18px 0 18px; position:relative;}
.mainUtil .movieBox.over {border-color:#555;}
.mainUtil .movieBox .mainMovie {height:209px; position:relative;}
.mainUtil .movieBox .mainMovie a.btnFullScreen {position:absolute; top:0; left:0; right:0; bottom:0; /* border:1px solid #a4292f; */ background:rgba(0,0,0,0.6) url(../images/main/img_fullscreen.png) center center no-repeat; opacity:0; transition:all 0.3s; background-size:15px auto;}
.mainUtil .movieBox .mainMovie a.btnFullScreen:hover {opacity:1; background-size:25px auto;/*  border-width:6px */}
/* .mainUtil .movieBox .mainMovieBig {position:absolute; bottom:25px ; right:18px; width:820px; height:461px;} */
.mainUtil .movieBox .mainMovieBig {position:absolute; bottom:-7px ; right:0px; width:856px; height:482px; box-shadow:0px 2px 5px rgba(0,0,0,0.5); display:none;}
.mainUtil .movieBox .mainMovieBig .btnFullScreenClose {position:absolute; top:0; right:0; padding:25px; }


/* 하단 */
.mainCont:after {content:""; display:block; height:0; visibility:hidden; clear:both;}
.mainCont .box {float:left; width:33.33%; box-sizing:border-box; border-right:1px dashed #8d8e93; height:258px; margin-top:29px; padding:0 27px; position:relative;}
.mainCont .box.last {width:33.34%; border-right:none;}
.mainCont .box h3 {font-size:25px; font-weight:700; letter-spacing:-1px; padding:18px 0 30px 0;}
.mainCont .box li {font-size:15px; padding-bottom:18px;}
.mainCont .box li a {display:block; position:relative;}
.mainCont .box li span {position:absolute; top:0; right:0; color:#aaa; font-weight:200;}
.mainCont .box li a:hover span {color:#a4292f;}
.mainCont .box li a img {position:relative; top:2px; left:1px;}
.mainCont .box li a.new {color:#a4292f;}
.mainCont .box .btnMore {position:absolute; top:22px; right:27px;}
.mainCont .today h4 {font-size:36px; color:#a4292f; text-align:center; margin-bottom:15px;}
.mainCont .today h4 span {border-bottom:2px solid #a4292f; display:inline-block; padding-bottom:9px;}
.mainCont .today pre {text-align:center; font-family:Noto Sans CJK KR, "Noto Sans CJK KR", Noto Sans KR, "Noto Sans KR", "맑은 고딕", "Malgun Gothic", Dotum, "돋움", "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", Ngothic, sans-serif; color:#333; font-weight:300; line-height:1.7; vertical-align:middle;  word-wrap: break-word; word-break: break-all; white-space: pre-wrap; margin:0; width:380px;}
.mainCont .today > div {height:100px; overflow:hidden;}
.mainCont .today > div > div {height:100px; display:table;}
.mainCont .today > div > div > div {display:table-cell; vertical-align:middle;}
.mainCont .today > div > div > div pre {max-height:100px;}