@import url("reset.css");
*:focus{outline: 1px solid transparent;}
* { margin:0; padding:0; vertical-align:top; border:0; }
.page ::-moz-selection {background:#55447B; color: #fff; text-shadow: none;}
.page ::selection {background:#55447B; color: #fff; text-shadow: none;}

body.ie #headerWrap{width: 100%;overflow: hidden;}
body.ie #gnb{width: 85.5%;}

#gnb ul li{transition:all 0.8s ease-out;-webkit-transition:all 0.3s ease-out;}
#gnb ul li.on, #gnb ul li:hover{background: #fff;color:#2642BA;}
#gnb ul li.on a, #gnb ul li:hover a{color:#2642BA;font-weight: 700}

/*공통*/
#wrap{width: 1024px;margin: 0 auto;}
#stories.page section#articles-and-videos{background: #fff;}
.view .center{margin: 0 auto;}
/*상단 변경*/
.article.page.view section#intro.banner{background-image: url(/news/d/assets/pages/stories/bg_intro.png);-webkit-box-pack:center;justify-content:center}
.article.page.view .container{width: 1028px;}
.article.page.view #intro.banner h1 {color: #fff;word-spacing: 1px;font-size: 33.5pt;line-height: 1.6;}
.article.page.view #intro.banner p {margin-top: 22px;margin-bottom: 23px;line-height: 1.7;font-family: "Noto Sans KR", "notokr-demilight", sans-serif;font-size: 16.5pt;font-weight: 300;color: #fff;}

.container .sub-title{position: relative;display: inline-block;height: 20px;padding-top: 14px;font-family: "Noto Sans KR", "notokr-demilight", sans-serif;font-size: 18px;color:#fff;font-weight: 400;line-height: 1;opacity: 0.8;}
.container .sub-title:after{position: absolute;top: 0;left: 0;display: inline-block;content: '';width: 40px;height: 2px;background: #fff;}

.article.page article h2.tit-article{position: relative;padding:20px 0 28px;margin-bottom: 60px;font-size: 34px; color:#000;text-align: center;}
.article.page article h2.tit-article:before{position: absolute;top: 0;left: 50%;margin-left: -17px;display: inline-block;content: '';width: 34px;height: 3px;background: #2642BA;}
.article.page article h2.tit-article:after{position: absolute;bottom: 0;left: 50%;margin-left: -17px;display: inline-block;content: '';width: 34px;height: 3px;background: #2642BA;}

.article.page .txt-link{color:#2642ba;font-weight: 500;}
.article.page .txt-link:hover{text-decoration: underline}
.news-inner{width: 988px;margin:40px auto 0; font-size: 18px;font-weight: 300;color:#444;line-height: 34px;text-align: left;}

.detail-area{margin-bottom: 20px;padding: 0 126px;text-align: center;}
.detail-area .tit-con{margin-bottom: 18px;font-size:28px;font-weight: 700; line-height: 1;text-align: left}
.detail-area .tit-con strong{font-weight: 700;color:#000;}
.detail-area .img{display: inline-block;width: 100%;margin-bottom: 20px;}
.detail-area .img .txt-copy{margin-top: 5px;margin-bottom: 10px;font-size: 15px;color:#666;line-height: 18px;}
.detail-area .txt{text-align: left}

.panel{display: none;}
#panel1{display: block}

/*기사 내용*/
.article.page article p{word-break:initial}
.article.page article p strong{font-weight: 400;}

/*버튼*/
.tag-area{position: relative;padding-top: 40px;padding-bottom: 40px;text-align: center}
.tag-area:before{position: absolute;top: 0;left: 126px;display: inline-block;content: '';width: calc(100% - 252px);border-top: 1px dashed #ccc}
.tag-area .btn-tag{display:inline-block;margin:5px 4px;padding:7px 13px 8px 12px;border-radius:20px;border:1px solid #ccc;background: #eaeaea; font-size:18px;color:#444;letter-spacing:-0.05em;font-weight: 500;line-height: 1.4;text-align:center;}
.tag-area .btn-tag:hover{}
.tag-area .btn-tag.on{background-color:#825E8A;border-color:  #825E8A;color:#fff;}

.sorting-area{padding-bottom: 40px;text-align: center;}
.sorting-area .item{position: relative;margin: 0 14px;padding-left: 26px;font-weight: 400;}
.sorting-area .item:before{position: absolute;top:9px;left: 0;display: inline-block;width: 16px;height: 16px;content: '';margin-right: 4px;text-align: left;}
.sorting-area .item:after{position: absolute;top: 16px;left: 7px;content: '';width: 6px;height: 6px;background: #fff;z-index: 10}
.sorting-area .item.st-1:before, .sorting-area .item.st-14:before, .sorting-area .item.st-16:before, .sorting-area .item.st-11:before{background-color:rgba(224,85,85,1)}
.sorting-area .item.st-2:before, .sorting-area .item.st-12:before{background-color:rgba(16,115,128,1)}
.sorting-area .item.st-3:before, .sorting-area .item.st-15:before, .sorting-area .item.st-17:before, .sorting-area .item.st-13:before{background-color:rgba(38,66,186,1)}
.sorting-area span.item:before{top: 7px;}
.sorting-area span.item:after{top: 14px;}
.sorting-area button:before{background-image: url("/news/images/ico-check.png");background-repeat: no-repeat;background-size: cover;}
.sorting-area button::after{display: none;}

.sorting-area .item.st-4:before{background-color:rgba(224,85,85,1)}
.sorting-area .item.st-5:before{background-color:rgba(38,66,186,1)}
.sorting-area .item.st-6:before{background-color:rgba(138,104,80,1)}
.sorting-area .item.st-7:before{background-color:rgba(16,115,128,1)}
.sorting-area .item.st-8:before{background-color:rgba(85,68,123,1)}
.sorting-area .item.st-9:before{background-color:rgba(87,154,255,1)}
.sorting-area .item.st-10:before{background-color:rgba(105,53,54,1)}

.sorting-area button.item{color:#555;font-size: 16px;letter-spacing: -0.8px;}
.sorting-area button.item.on, .sorting-area button.item:hover{padding-left: 36px;font-size: 18px;font-weight: 600;color:#333;text-decoration: underline;}
.sorting-area button.item:before{top: 11px;}
.sorting-area button.item.on:before, .sorting-area button.item:hover:before{top: 5px;width: 26px;height: 26px;margin-right: 10px;background-size: 16px;background-position: center;text-align: center;}
.sorting-area button.item em{font-weight: 600;}
.sorting-area button.item.on:first-child em{color:rgba(224,85,85,1)}
.sorting-area button.item.on:nth-child(2) em, .sorting-area button.item.on:nth-child(2):hover em{color:rgba(38,66,186,1)}

/*민족대표 33인*/
.member-area{position: relative;width: 100%;text-align: center;overflow: hidden;}
.mb-intro{margin:10px 0 30px;padding: 0 110px;font-weight: 300;letter-spacing: -1px;text-align: center;}
.mb-intro strong{color:#000;font-weight: 500}
.mb-intro em{font-weight: 300;text-decoration: underline;}
.mix{position: relative;display: inline-block;width:calc(100%/7 - 16px);height: 160px;margin:0 6px;margin-bottom: 12px;text-align: center;overflow: hidden;transition:all 0.8s ease-out;-webkit-transition:all 0.3s ease-out; cursor: pointer;}
.mix:before{content:'';position: absolute;top: 0;left: 0;width:100%;height: 100%;background: rgba(0,0,0,0.8);display:none;}
.mix img{width: 100%;transition:all 0.8s ease-out;-webkit-transition:all 0.3s ease-out; }
.mix:hover img{width: 110%;margin-left: -5%;margin-top: -5%;}
.mix .border{position: absolute;top: 0;left: 0;display: inline-block;width: 100%;height: 100%;box-sizing: border-box;z-index: 40}
.mix .name{display: none;position: absolute;width: 100%;top:18%;font-weight: 500;font-size: 26px;color:#eaeaea;line-height: 1;text-align: center;z-index: 50}
.mix .plus{position: absolute;bottom: 14%;left: 50%;margin-left: -20px;display: none;width: 40px;height: 40px;background: rgba(250,250,250,0.6);border-radius: 50%; z-index: 50;}

.mix .plus:hover{background: rgba(250,250,250,1);}
.mix .plus:before{display: inline-block;content: '+';margin-top: -7px;font-size: 50px;color:#000;line-height:1;animation:ani 0.2s ease infinite alternate;}
.mix .plus:hover:before{animation: none;}
@keyframes ani{
    0%{transform: scale(0.4);}
    100%{transform: scale(1);}    
}
/*.mix .plus:before{display: inline-block;content: '';width: 40px;height: 40px;background: url("/news/images/ico-more.png") no-repeat center;}*/
/*.mix .plus:before{position: absolute;top: 0;left: 0;display: inline-block;content: '';width: 21px;height: 21px;background: url("/news/images/ico-plus.png") no-repeat center;}*/
.mix .txt{display: none;position: absolute;top: 34%;width: 100%;color:#eaeaea;z-index: 50}

.mix.code .txt{display: none;}
.mix:hover:before{display: block; }
.mix:hover .name, .mix:hover .plus, .mix:hover .txt.active{display: block;}

.mix.ft-1 .border, .mix.ft-15 .border, .mix.ft-11 .border{border: 5px solid rgba(224,85,85,0.9);}
.mix.ft-1:before, .mix.age1:before, .mix.ft-11:before, .mix.before:before {background: rgba(224,85,85,0.9);}

.mix.ft-2 .border, .mix.ft-12 .border{border: 5px solid rgba(16,115,128,1);}
.mix.ft-2:before, .mix.ft-12:before {background: rgba(16,115,128,0.8);}

.mix.ft-3 .border, .mix.ft-16 .border, .mix.ft-13 .border{border: 5px solid rgba(38,66,186,0.8);}
.mix.ft-3:before, .mix.age2:before, .mix.ft-13:before, .mix.after:before{background: rgba(38,66,186,0.8);}

.mix.jp.ft-14 .border{border:5px solid rgba(194,0,0,0.7);background: transparent;}
.mix.jp.ft-14:before{background: rgba(194,0,0,0.7)}
.mix.jp .border{background:rgba(0,0,0,0.4)}
.mix.ft-prize .border{background:rgba(0,0,0,0.6)}

.mix.ft-4 .border{border:5px solid rgba(224,85,85,1)}
.mix.ft-4:before{background:rgba(224,85,85,0.8)}
.mix.ft-5 .border{border:5px solid rgba(38,66,186,1)}
.mix.ft-5:before{background:rgba(38,66,186,0.7)}
.mix.ft-6 .border{border:5px solid rgba(138,104,80,1)}
.mix.ft-6:before{background:rgba(138,104,80,0.8)}
.mix.ft-7 .border{border:5px solid rgba(16,115,128,1)}
.mix.ft-7:before{background:rgba(16,115,128,0.7)}
.mix.ft-8 .border{border:5px solid rgba(85,68,123,1)}
.mix.ft-8:before{background:rgba(85,68,123,0.7)}
.mix.ft-9 .border{border:5px solid rgba(87,154,255,1)}
.mix.ft-9:before{background:rgba(87,154,255,0.7)}
.mix.ft-10 .border{border:5px solid rgba(105,53,54,1)}
.mix.ft-10:before{background:rgba(105,53,54,0.7)}


/*테이블*/
#newsTbl {position: fixed;top: 0; left: 0;right: 0;z-index: 1000;height: 100%;background-color: rgba(0, 0, 0, 0.8);text-align: center;display: none;}
#newsTbl.active {display: block;}
#newsTbl .container {position: relative;display: inline-block;margin: 40px auto;width: 940px;background-color: #fff;text-align: left;}
#newsTbl .tbl-top {box-sizing: border-box;padding-top: 42px;width: 100%;height: 115px;background-color: #1B363A;}
#newsTbl .tbl-top .title {padding-left: 104px;color: #fff;font-size: 30px;font-weight: 500;line-height: 1.3;}
#newsTbl .btn-close {position: absolute;display: block; right: 14px;top: 14px;width: 40px;height: 40px;}
#newsTbl .btn-close:before,
#newsTbl .btn-close:after {content: "";position: absolute;top: 0;left: 18px;height: 45px;width: 1px;}
#newsTbl .btn-close:before {border-left: 1px solid #fff;transform: rotate(45deg);}
#newsTbl .btn-close:after {border-right: 1px solid #fff;transform: rotate(-45deg);}
#newsTbl .btn-close:hover:before {border-left-width: 3px;}
#newsTbl .btn-close:hover:after {border-right-width: 3px;}
.tbl-wrap{height: 680px;padding-top: 20px;padding-bottom: 40px;overflow: hidden}
.tbl-area {position: relative;display: inline-block;width: 836px;height: 100%;padding-left: 104px;font-size: 15px;color:#000;letter-spacing: -1px;;table-layout: fixed;border-collapse:collapse;border-top:0;box-sizing: border-box;overflow-y: scroll;}
.tbl-head {position: absolute;display: inline-block;width: 732px;margin-left: 104px;background: #B9947A;table-layout: fixed;z-index: 50;}
.tbl-head thead th{width: 78px;height: 53px;font-size: 16px; color:#222;line-height: 50px;font-weight: 500;text-align: center;}
.tbl-area th,.tbl-area td {padding:0;border:1px solid #E0E2ED;color:#222;}
.tbl-area thead, .tbl-head thead{width: 100%;}
.tbl-area thead{visibility: hidden;}
.tbl-area thead th{width:80px;height:53px;text-align:center;border-color:transparent;font-size: 18px;letter-spacing: -1.5px;font-weight: 500;text-align: center}
.tbl-area thead th:nth-child(1){width: 50px;}
.tbl-area thead th:nth-child(2){width: 120px;}

.tbl-head thead th:nth-child(1){width: 50px;}
.tbl-head thead th:nth-child(2){width: 107px;}
.tbl-head thead th:nth-child(7){color:#000;}
.tbl-head thead th:nth-child(8){color:#000;}

.tbl-area td.bg-1{background: #eaeaea;color:#000;font-weight: 500;}
.tbl-area td.bg-2{background: #F6ECE2;color:#000;font-weight: 500;}
.tbl-area td.bg-red{background: rgba(215,129,129,0.6);color:#000;font-weight: 500;}

.tbl-area tbody th {color:#000;text-align:center;}
.tbl-area td {height:48px;color:#747477;line-height: 48px;text-align:center;}
.tbl-area .total th, .tbl-area table .total td {font-family: 'notokr-bold';color:#000;}

/*목록보기*/
.back-wrap{display: inline-block;width:716px;margin:20px auto 40px;text-align: right;}
.link-back{display: inline-block;width: 160px;border:1px solid #aaa;font-size: 14px;color:#555;line-height: 36px;font-weight: 500;letter-spacing: -0.8px;text-align: center}
.link-back:hover{background: #555;color:#fff;}

/*댓글*/
.comment{width: 746px! important;margin: 0 auto;margin-left: -373px! important;}

/*하단 뉴스 리스트*/
.news-list{padding: 85px 0;background-color: #b9947a;text-align: center}
.focus-stories .content-list {margin: 0 auto;width: 1030px;text-align: left;}
.news-list .content-list li {margin-top: 0;margin-left: 65px;}
.news-list .content-list li:first-child {margin-left: 0;}

/*가이드 설명*/
.guide-area{padding: 0 126px;}
.guide-area>p{border-top: 1px dashed #ccc;font-size: 14px! important;line-height: 34px! important;letter-spacing: -0.2px;text-align: right;}


/*최종파일 변경필요*/
#credits .credits-bottom {padding: 40px 103px 45px;text-align: left;background-color: #d8d8d8;}
#credits .credits-bottom .title { font-size: 15pt;font-weight: 500;}
#credits .credits-bottom .title:after {margin-top: 32px; margin-bottom: 28px;content: "";display: block;width: 40px;border-top: 1px solid black;}
#credits dl dt, #credits dl dd {font-size: 12pt;line-height: 1.85;}
#credits dl dt {float: left;display: inline-block;margin-right: 5px;}
#credits dl dd {display: block;font-weight: 100;}

/* stories html 용 */
.con-list {margin: -25px 0 0 -55px! important;width: 300px! important;text-align: initial! important;}

/* 33인 하단 기사 글 정렬 */
.view .center{width:735px} 

/*최종하단 진짜푸터*/
#footerWrap {padding-top: 20px;padding-bottom: 65px;text-align: center;background-color: #222321;}