@charset "utf-8";

/* 헤드 마스터 영역 */
.templete-type5 #divPCMenu{box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.6); margin-bottom:5px;}
.templete-type5 .header-top-md{background-color:#fff; border-bottom: 1px solid #21CCD9;}
.templete-type5 .main-wrapper{width:100%;margin:0 auto;position: relative; padding-top:15px;}
.templete-type5 .cont-article{background-color:#fff;}
.templete-type5 .header-area{padding:15px 0 15px;}

.templete-type5 .common-nav {background: #fff; height: 39px; position: absolute; background-color: transparent; top:94px; width: 100%;}
.templete-type5 .common-nav .topnav{width:100%; background-color:#fff; height:37px; margin-top:0.5px;}
.templete-type5 .button.btnico-menu {/*right:0;*/ top:1px; left:inherit; background-image:url(/images/main/type1/ico_allmenu2.png); height:37px; width:37px; min-width:37px;}

.templete-type5 .snsLinkbutton{width: auto; position: absolute; bottom: 5px; right: 0px; z-index:11;}
.templete-type5 .snsLinkbutton [class*=btnico]{background-color: transparent; width:33px; height:33px; min-width:34px; margin-right:3px;}
.snsLinkbutton .btnico-facebook{background-image: url(../images/set5/ico_03_fcbook_33.png);}

.templete-type5 .topnav-all-wrap{left: -340px; width: calc(100% + 210px + 100px); top:5px; padding:0 5% 20px; border:1px solid #eeeeee; border-bottom:3px solid #395160;}
.templete-type5 .topnav-all-wrap .menu-one-depth{width:190px; margin-left:20px;}
.templete-type5 .topnav-all-wrap .menu-one-depth > a {color:#395160; height:50px; border-bottom:2px solid #21CCD9;}

.templete-type5 .topnav-wrap{width:100%; padding-left:37px; height:37px;}
.templete-type5 .topnav-wrap ul > li > a {padding: 9px 15px; font-size:17px; color:#282f2f; font-weight:400;}
.templete-type5 .topnav-wrap ul > li > ul{width:150px;}
.templete-type5 .topnav-wrap ul li ul.menu-two-depth .ico_depth:before {top: 13px;}
.templete-type5 .topnav-wrap ul li ul li a{color:#282f2f; font-weight:400; text-align:left; width:auto;}
.templete-type5 .topnav-wrap ul li:hover > a{background-color:#fff; color:#e90606;}

.templete-type5 .location-box {background-color: #21CCD9;}
.templete-type5 .location ul li:first-child a{background-color:#19a4af;}
.templete-type5 .updown_area button.btn_up{background: #21CCD9;}
.templete-type5 .updown_area button.btn_up:hover{background-color:#19a4af}
/* // 헤드 마스터 영역 */

h1.h1-tit-small:hover,
h1.h1-tit-mid:hover {color: #E90606 !important;}

/* 헤드라인, 컨트롤 박스 공통 */
.mid-row-wrap, .topic-card-wrapper, .hotnews_box, .low-row-wrap {margin-top:25px;} 

.col-3{display:block; padding:0 15px;}
.col-3 .row-col-card{margin-bottom:30px;}
.col-3 .row-col-card figure{position: relative;width:100%;height:230px;overflow: hidden;}
.col-3 .row-col-card figure img {object-fit: cover; width:100%; height:100%;}
.col-3 .row-col-card .desc-box {padding: 15px 0;height:25%;}
.col-3 .row-col-card .desc-box p{margin:0; font-size:17px; font-weight:400; color:#767a81; text-align:center; height:70px;overflow:hidden; word-break: break-all; display:-webkit-box; -webkit-line-clamp:3; text-overflow:ellipsis; -webkit-box-orient:vertical; line-height:1.4;}
.col-3 .row-col-card .desc-box h1 {font-size:23px;font-weight: 400;margin-top: 15px; letter-spacing: normal; font-stretch: normal; line-height: 1.28;margin-bottom:5px;height: 60px;word-break: break-all;text-align:center;display: -webkit-box;-webkit-line-clamp: 2;text-overflow: ellipsis;word-wrap: break-word;-webkit-box-orient: vertical; letter-spacing:-0.05em; overflow:hidden;}
.col-3 .row-col-card .desc-box span{font-weight:500; color:#a07469; text-align:center; display:block; padding-bottom:5px;}
.col-3 .row-col-card .desc-box span:before {display: inline-block; border-bottom: 1px solid #828282; content: ""; margin:20px 5px 4px; height: 1px; width: 12%;}
.col-3 .row-col-card .desc-box span:after {display: inline-block; border-bottom: 1px solid #828282; content: ""; margin:20px 5px 4px; height: 1px; width: 12%;}

/* 헤드라인 */
.headline-wrap{width:100%;margin-top:3.4%;}
.headline-container{border:1px solid #dedede;position: relative;}
.tit-box {width:100%; margin-top: 20px;}
.photo-big-box{position:relative; overflow:hidden; display:block; /*height:650px;*/}
.photo-big-box a{display: block;}
.photo-big-box figure {position:relative; width:100%; padding-top:53%; overflow: hidden;}
.photo-big-box figure img {width: 100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; right:0; bottom:0; max-width:100%; height:100%; transition: transform .5s ease-in-out, -ms-transform .5s ease-in-out;}
.photo-big-box .txt-overlay{color:#fff; position:absolute; width:-webkit-fill-available; padding:20px; bottom:0; text-shadow:1px 1px 3px #000; background:linear-gradient(to top,rgba(0,0,0,0.9) 0,rgba(0,0,0,0) 100%); transition: transform .3s ease-in-out, -ms-transform .3s ease-in-out; z-index:3;}
.photo-big-box .txt-overlay h1{font-size:18px; height:35px; font-weight:500; line-height:1.4; white-space:normal; text-align:left; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.photo-big-box .txt-overlay p{display:none;}

.photo-big-box > a::before{content: ''; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,rgba(0,0,0,0) 60%,rgba(0,0,0,.94) 80%);}
.photo-big-box a:hover figure img{transform: scale(1.1, 1.1);}
.photo-big-box a:hover .txt-overlay{transform: translateY(-13.5%);}
.photo-big-box a:hover .txt-overlay h1{text-decoration: underline;}

.headline-wrap .swiper-container-horizontal > .swiper-pagination-bullets{text-align:center; z-index:100; position: relative; margin-top:-20px; background-color:#000;}
.headline-wrap .swiper-pagination-bullet{background-color:#fff;opacity:inherit;}
.headline-wrap .swiper-pagination-bullet-active {width:40px; border-radius:15px; background:#d0000e;}
.headline-wrap .swiper-button-next, .headline-wrap .swiper-button-prev {top:50%; width:40px; height:60px; font-size:35px; color:#fff; text-align:center; background-color:rgba(0,0,0,.5); -ms-transform:translateY(-50%); transform:translateY(-50%); transition:margin-left .3s, margin-right .3s;}


/* 헤드라인 화살표 추가*/
.headline-button-next, .headline-button-prev {position: absolute; top: 50%; width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 24px; text-align: center; line-height: 50px; border-radius: 50%; cursor: pointer; z-index: 10; transition: background 0.3s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; background-size: 12px; background-position: center; background-repeat: no-repeat;}
.headline-button-next:hover, .headline-button-prev:hover {background-color: rgba(0, 0, 0, 0.5); transform: scale(1.1);}
.headline-button-next {background-image: url(/images/set11/02_right_arrow.png); right: 15px;}
.headline-button-prev {background-image: url(/images/set11/01_left_arrow.png); left: 15px;}

/* /헤드라인/ */

/* 검정 배경, 토픽 박스 */
.topic-box-container {margin-bottom: 20px; position: relative; width: 100%; background: #000;}
.topic-box-wrapper {position: relative;}
.topic-box-header {position: relative; text-align: center; padding: 30px 0; display: block; z-index: 1;}
.topic-box-header span {font-size: 22px; color: #eee;}
.topic-box-content {position: relative; overflow: hidden;}
.topic-box-content .content-list {position: relative;}
.topic-box-content .content-list ul {overflow: hidden; margin-bottom:15px;}
.topic-box-content .content-item {position: relative; margin-left:56px; padding: 15px 0;}
.topic-box-content .content-link {position: relative; display: block; padding: 0 20px 0 67px; min-height: 60px; transition: opacity .3s ease;}
.topic-box-content .content-link:hover {opacity: 0.8;}
.topic-box-content .content-thumbnail {position: absolute; left: -37px; top: 3px; width: 90px;}
.topic-box-content .content-thumbnail img {width: 100%; max-height: 60px; object-fit: cover;}
.topic-box-content .content-date {display: block; font-size: 12px; color: #c1c1c1; margin-bottom: 4px;}
.topic-box-content .content-title {display: block; font-size: 14px; color: #eee; line-height: 1.4; max-height: 41px;}
/* // 검정 배경, 토픽 박스 */

/* 카드 박스 (우측 4개 정사각형) */
.cardbox-container { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; padding:0 15px; box-sizing:border-box;}
.cardbox-row {width: 100%; justify-content: space-between; margin-bottom: 15px; }
.cardbox-item { width: 100%; box-sizing: border-box;  background-color: #fff; overflow: hidden;}
.cardbox-body{border:1px solid #dedede;}
.cardbox-body:hover{opacity:0.75; transition: opacity .3s ease;}
.cardbox-thumbnail { min-height: 42px; display: block; position: relative; overflow: hidden; height: auto; }
.cardbox-thumbnail figure { height: 200px; margin: 0; display: flex; align-items: center; justify-content: center; }
.cardbox-thumbnail figure img { display: block; width: 100%; height: 100%; object-fit: cover;}
.cardbox-content { background-color: #fff; padding: 10px; height:60px;}
.cardbox-title { font-size: 22px; font-weight:500; margin: 5px 0; padding: 0 3px 5px; letter-spacing:0.1em;}
.cardbox-heading { display: block; font-size: 16px; font-weight: 500; margin: 0; color: #333; text-decoration: none; }



/* 중앙 이슈박스 */
.gray-box{background-color:#f0f1f2;}
.gray-box .issue_list_row{display:flex; flex-wrap:wrap; overflow:hidden; padding:0 2% 25px;}
.gray-box .issue_list_row li{width:31%; padding: 5px 1%; list-style:none; text-align: center;}
.gray-box .issue_list_row li img {width:105px; height:105px; object-fit:cover; border-radius:50%; border: 1px solid #dedede;}
.gray-box .issue_list_row li a{display: block;}
.gray-box .issue_list_row li h1 {margin:25px 5%; height:39px; font-size:16px; overflow:hidden; font-weight:500; letter-spacing:-0.05em;}
.gray-box h2{font-size: 20px; padding: 23px; color:#e90606; font-weight: 600; margin: 2px auto; text-transform: uppercase; text-align:center;}
.gray-box h2:before {display: inline-block; border-bottom: 1px solid #828282; content: ""; vertical-align:middle; height: 1px; width: 11%;}
.gray-box h2:after {display: inline-block; border-bottom: 1px solid #828282; content: ""; vertical-align:middle; height: 1px; width: 11%;}
.gray-box h2 a{color:#e90606;}

/*.hotnews_box .gray-box h2 {color: #a07460;}
.hotnews_box .gray-box ul li span{font-size: 32px; font-weight: 700; text-align: center; width: 100%; text-decoration: underline; -webkit-text-decoration-color: #e90606; text-decoration-color: #e90606;}*/

/* 컨트롤 박스 1 */
.mid-row-wrap h2,
.low-row-wrap h2{text-align:center; justify-items:center; font-size:26px; font-weight:400; font-stretch:normal; line-height:1.31; letter-spacing:0.3em; padding:30px 0 20px;}

.mid-row-wrap .col-3 .row-col-card .desc-box h1{margin-top: 10px;}
.mid-col-wrap {width:100%; overflow:hidden;}
.mid-col-wrap .mid-col-sm{width:100%;display:inline-block;box-sizing: border-box; margin-bottom:25px;}
.mid-col-wrap .mid-col-sm figure{position:relative; width:100%; height:230px; overflow:hidden;}
.mid-col-wrap .mid-col-sm figure img {width:100%; height:100%; object-fit: cover;}
.mid-col-wrap .mid-col-sm .desc-box{padding:15px 0;}
.mid-col-wrap .mid-col-sm .desc-box h1{font-size: 18px;height:46px;line-height: 1.3;overflow:hidden;color:#666;margin-top: 0px;font-weight:500;letter-spacing:-0.05em; word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; text-overflow:ellipsis;-webkit-box-orient: vertical;}
.mid-col-wrap .mid-col-sm .desc-box p{max-height:67px;overflow:hidden;margin-top:15px; margin-bottom:5px; line-height:1.57; font-weight:300; font-size:15px;}
.mid-col-wrap .mid-col-sm .desc-box span{max-height:18px;overflow:hidden;line-height: 1.3;color:#aaaaaa;font-size: 13px;}

/* 컨트롤 2 */
.low-row-wrap .mid-col-wrap .col-3{padding:0; width:100%; display:flex; display:-webkit-flex;}
.low-row-wrap .col-3 .article-left-area{width:100%;}
.low-row-wrap .col-3 .article-left-area .row-col-card {width:100%; height:350px; padding:0; margin-bottom:35px;}
.low-row-wrap .col-3 .row-col-card .desc-box{padding:10px 0; height:20%;}
.low-row-wrap .col-3 .row-col-card .desc-box p{height: 25px; -webkit-line-clamp: 1;}
.low-row-wrap .main-right-banner{position:relative; top:0; right:0; width:260px; display:none;}
.low-row-wrap .mid-col-wrap{width:100%;}
.low-row-wrap .mid-col-wrap .mid-col-sm{width:48%; height:175px;}
.low-row-wrap .mid-col-wrap .mid-col-sm figure{height:80%;}
.low-row-wrap .mid-col-wrap .mid-col-sm .desc-box h1{font-size:17px;/* height:24px;*/ -webkit-line-clamp: 2;}
.low-row-wrap .mid-col-wrap .mid-col-sm:nth-child(1){margin-right:4%;}

/* 컨트롤 2 우측 영역 (많이 본 기사, 댓글 많은 기사) */
.news-panel{margin-top:50px;}
.news-panel__section {margin-bottom: 20px; border-top: 2px solid #666;}
.news-panel__section h3.main-tit{line-height: 1.4;padding:10px 5px;border-bottom:0;margin:0;}
.news-panel__section > .news-panel__list{margin-top:0;}
.news-panel__section > .news-panel__list li {position: relative;border-bottom: 1px solid #ddd;padding: 13px 5px;}
.news-panel__section > .news-panel__list > li:first-child{border-top: 1px solid #ddd;}
.news-panel__section > .news-panel__list > li:last-child{}
.news-panel__section > .news-panel__list li a:hover p{transition: opacity .3s ease; color:#E90606;}
.news-panel__section .news-panel__list p{font-size:15px;color:#666666;line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;overflow: hidden;}



@media (min-width:768px) {
    /* 마스터 */
    .templete-type5 .location-box{background-color:transparent;}

    .mid-row-wrap, .topic-card-wrapper, .hotnews_box, .low-row-wrap {
        margin-top: 50px;
    } 
    .templete-type5 .location ul li:first-child a{background-color:transparent;}

    .templete-type5 .common-nav {max-width: calc(100% - 340px - 100px); left:340px;}
    /*.templete-type5 .common-nav .topnav{width: 1170px;}*/
    /*.templete-type5 .topnav-wrap {width:1170px;}
    .templete-type5 .topnav-all-wrap{width:1170px;}*/
    

    /* 헤드라인 */
    .top-row-wrap{margin-top:50px;}
    .col-3{display:flex; display:-webkit-flex; flex:1; display: -ms-flexbox;}
    .col-3 .row-col-card{padding-right:3%; height:650px;}
    .col-3 .row-col-card figure{height:69%;}
    .col-3 .row-col-card .desc-box h1 {font-size:25px;}
    .col-3 .row-col-card .desc-box p{margin:0 5%;}    
        
    .row-col-wrap .row-col-sm{width:100%; padding-bottom:30px; height:340px;}
    .row-col-wrap .row-col-sm figure{height:45%;} 
    
    .row-col-card{width:74%; position:relative;}
    .row-col-wrap > div{display:block;}
    
    .photo-big-box{width:100%;}
    .photo-big-box .txt-overlay{padding:60px 40px;}
    .photo-big-box .txt-overlay h1{font-size:35px; height:auto; -webkit-line-clamp:1;} 
    .photo-big-box .txt-overlay p{margin-top: 12px;height:21px;overflow:hidden;display: block; font-size:16px; width:80%;}
    
    /* 검정 토픽박스 */
    .topic-card-wrapper{display:flex;}
    .topic-box-container {margin-bottom:0; margin-right: 2%; position: relative; width: 33%; background: #000;}
    .topic-box-content .content-thumbnail {position: absolute; left: -37px; top: 3px; width: 90px;}
    .topic-box-content .content-date {display: block; font-size: 13px; margin-bottom: 4px;}
    .topic-box-content .content-title {font-size: 15px; transition: .3s all ease; line-height: 1.4; max-height: 41px;}
    

    /* 카드박스 (우측 정사각형) */
    .cardbox-container { width: 65%; margin-bottom: 0; padding:0 10px 0 0;}
    .cardbox-container ~ .cardbox-container { margin-left: 2%; }
    .cardbox-row{display: flex;}
    .cardbox-row:nth-of-type(1){margin-bottom:37px;}
    .cardbox-row:nth-of-type(2){margin-bottom:0;}
    .cardbox-item { width: 48%; max-width: 48%; }
    .cardbox-thumbnail figure { width: 100%; height: 180px; }
    .cardbox-heading { margin-top: 5px; font-size: 16px; height:40px;}
    .control-midbox .d-flex { display: flex; }

    /* 컨트롤1 */
    .row-col-wrap, .mid-col-wrap {width:22.6%;}
    .mid-row-wrap .col-3 .row-col-card .desc-box h1{margin-top:25px;}
    .mid-col-wrap .mid-col-sm{height:220px; margin-bottom:0;}
    .mid-col-wrap .mid-col-sm figure{height:62.7%;}
        
    /* 중앙 이슈박스 */
    .gray-box h1{font-size:22px;}
    .gray-box .issue_list_row li {width: 23%;}
    .gray-box .issue_list_row li img {width:135px; height:135px;}    

    /*컨트롤2*/
    .low-row-wrap .col-3 .article-left-area {padding-right:1%; width:75%;}
    .low-row-wrap .col-3 .article-left-area .row-col-card {height:570px;}
    .low-row-wrap .col-3 .article-left-area .row-col-card figure{height:78.7%;}
    .low-row-wrap .mid-col-wrap .mid-col-sm{width:50%; height:285px;}
    .low-row-wrap .main-right-banner{display:block;}

    /* 컨트롤 2 우측 영역 (많이 본 기사, 댓글 많은 기사) */
    .news-panel{margin-top:0; width:24%; padding: 0 1%;}
}

/* PC */
@media (min-width:1170px) {
    .templete-type5 .main-wrapper {width: 1080px;}
    .templete-type5 .common-nav {left: calc(((100% - 1180px) / 2) + 340px); max-width: calc(100% - 340px - (100% - 1180px) - 100px);}
    
    .templete-type5 .topnav-all-wrap{width:1180px;}

    /* 헤드라인 */
    .col-3{padding:0;}
    .col-3 .row-col-card{padding-right:3%; height:650px;}

    /* 카드박스 (우측 정사각형) */
    .cardbox-container { width: 65%; margin-bottom: 0; padding:0;}

    /* 중앙 이슈박스 */
    .gray-box .issue_list_row li {width: 18%;}
    .gray-box .issue_list_row li img {width:160px; height:160px;}

    /* 컨트롤1 */
    .mid-row-wrap .col-3{padding:0;}

}
@media (min-width:1180px) {
    .main-right-banner{top: 53px; width: 250px; height: auto; right: -280px;}
}

@media (max-width: 767px){
    .row-col-wrap .row-col-sm:nth-child(1){padding-right:4%}

    .gray-box .issue_list_row li:nth-child(n+4){display:none;}
}

@media (max-width: 1170px) {
    .gray-box .issue_list_row li:nth-child(n+5){display:none;}
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .col-header figure img,
    .col-sub-header img,
    .cont-article-view .dflex img,
    .dflex img,
    .mid-wrap .photobox img,
    .clearfix img,
    .tab-cont ul li figure img,
    .culture-wrap figure img,
    .list-thumb-culture .list-thumb li a figure img {
        position: absolute;
        width: auto;
        height: auto;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        z-index: -100;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

    .culture-main-cont > p{
        height: 104px;
    }

    .culture-main-cont strong{
        height: 105px;
        overflow: hidden;
    }
}