@charset "utf-8";

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
body .templete-type11{font-family: 'Pretendard-Regular', sans-serif  !important;}
.templete-type11 .main-tit{font-family:inherit;}
/* 헤더 마스터 영역 */
#wrapper{background-color:#f6f6f6;}
.templete-type11 .header-area{padding-left:0;}
.templete-type11 .header-area h1{text-align:center;}
.templete-type11 .header-top-md{background-color:#fff; padding-top:13px;}
.templete-type11 .header-top-md h1{padding-left:35px;}
.templete-type11 .header-top-md h1 a{width:165px;}
.templete-type11 .main-wrapper{width:100%;margin:20px auto 0;position: relative;padding:0 10px; box-sizing:border-box;}
.templete-type11 .cont-article{background-color:#fff;}
.templete-type11 #divPCMenu{border-bottom: 2px solid #888; background-color:#fff;}

.templete-type11 .common-nav {background: #fff; border-bottom: 1px solid #282f2f; height: 39px;}
.templete-type11 .common-nav .topnav{background-color:#fff; height:37px; margin-top:0.5px;}
.templete-type11 .button.btnico-menu {background-image:url(/images/main/type1/ico_allmenu2.png); height:37px; width:37px; background-color:#2d6aa2; min-width:37px;}


.templete-type11 .mylog-box{border-color: #395160; top:38px; right:0px;}
.templete-type11 .mylog-box .mylog:before{background: url(../../../images/common/arrow_top_2a5680.png) no-repeat 0 0; top: -14px; left: 74%;}
.templete-type11 .today-time{width:120px; top:90px; display:none;}
.templete-type11 .snsLinkbutton{display:none;}

.templete-type11 .topnav-wrap{width:100%; padding-left:0px; height:39px; text-align:center;}
.templete-type11 .topnav-wrap ul > li > a {padding: 9px 15px; font-size:18px; color:#282f2f; font-weight:400;}
.templete-type11 .topnav-wrap ul > li > ul{width:150px;}
.templete-type11 .topnav-wrap ul li ul.menu-two-depth .ico_depth:before {top: 13px;}
.templete-type11 .topnav-wrap ul li ul li a{color:#282f2f; font-weight:400; text-align:left; width:auto;}
.templete-type11 .topnav-wrap ul li:hover > a{background-color:#fff; color:#e90606;}
.templete-type11 .topnav-all-wrap{top:5px; border-color:#333;}
.templete-type11 .topnav-all-wrap .menu-one-depth > a{border-color:#666; color:#333;}
.templete-type11 .section-box {margin-bottom: 50px;}
.templete-type11 .main-right-banner,
.templete-type11 .main-left-banner{top:0;}

/* !헤드라인 */
.headline {display: flex; max-width: 100%; margin: 0 auto; flex-direction: column; align-items: center;}
.headline, .headline__list {overflow-anchor: none; /* 스크롤 앵커 비활성화 */}
.headline__list {display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 10px; list-style: none; padding: 0; margin: 0;}
.headline__list .headline__item {position: relative; overflow: hidden; width: 100%; height:100%; aspect-ratio: 16 / 9; opacity: 1; transition: opacity 0.5s ease-in-out;}
.headline__list .headline__item:focus {outline: none;}
.headline__list .headline__item.fading-out {opacity: 0;}
.headline__list .headline__item figure {width: 100%; height: 100%; position: relative;}
.headline__list .headline__item img {width: 100%; height: 100%; transition: transform 0.3s ease; object-fit:cover;}
.headline__list .headline__item:hover img {transform: scale(1.05);}
.headline__list .headline__item:hover .headline__title{text-decoration:underline;}
.headline__list .headline__item .headline__title {position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); color:#fff; box-sizing: border-box;}
.headline__list .headline__item .headline__title h1 {font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-align: left; word-wrap: break-word; white-space: normal;}

/* 헤드라인 위치 별 레이아웃 설정 */
.headline__item .headline__title{padding:10px;}
.headline__item.is-main {grid-column: 1 / span 2; grid-row: 1 / span 1;}
.headline__item.is-main .headline__title h1 {font-size:22px; -webkit-line-clamp: 2;}
.headline__item.is-t1 {grid-column: 1; grid-row: 2;}
.headline__item.is-t2 {grid-column: 2; grid-row: 2;}
.headline__item.is-t3 {grid-column: 1; grid-row: 3;}
.headline__item.is-t4 {grid-column: 2; grid-row: 3;}
.headline__item.is-t1 .headline__title h1,
.headline__item.is-t2 .headline__title h1,
.headline__item.is-t3 .headline__title h1,
.headline__item.is-t4 .headline__title h1 {font-size: 16px; -webkit-line-clamp: 2;}

.pagination {display: flex; justify-content: center; margin-top: 10px; gap: 10px; list-style: none; padding: 0;}
.pagination .page-dot {width: 10px; height: 10px; border-radius: 50%; background: #ccc; cursor: pointer;}
.pagination .page-dot.active {background: #000;}


/* 호버 슬라이드 박스 */
.hover-slide{background-color:#ebebeb; overflow:hidden; position:relative;}
.hover-slide__header .main-tit{font-size: 20px; padding: 23px; color:#e04a02; font-weight: 600; margin: 2px auto; text-align:center; position:relative; background-color:transparent; border:0;}
.hover-slide__header .main-tit:before,
.hover-slide__header .main-tit:after {display: inline-block; border-bottom: 1px solid #828282; content: ""; margin:20px 10px 6px; height: 1px; width: 11%;}
.btn-section-more {position: absolute; right: 10px; top: 28px; font-size: 24px; font-weight:bold; color: #808080; text-decoration: none; padding: 5px; line-height: 1; z-index: 1;}
.btn-section-more:hover {color: #e04a02; text-decoration: none;}
.hover-slide__list{display:flex; flex-wrap:nowrap; box-sizing:border-box;}
.hover-slide__item {height: 300px;position: relative;overflow: hidden; list-style: none;}
.hover-slide__item:hover .hover-slide__title{transform: translateY(0%); transition: all .3s ease-out;} 
.hover-slide__item:hover figure img{transform: scale(1.05);}
.hover-slide__item a {display: block; width: 100%; height: 100%; position: relative;}
.hover-slide__item figure{width:100%; height:100%;}
.hover-slide__item figure img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease;}

.hover-slide__title{position: absolute; bottom: 0; left: 0; width: 100%; height: 85px; background-color:#fff;-webkit-transform: translateY(100%); transform: translateY(100%); transition: all .3s ease-out; z-index:2; text-align:center; padding:15px; box-sizing:border-box; overflow:hidden;}
.hover-slide__title h3{font-size: 16px; color: #010101; line-height: 1.4; overflow: hidden; word-wrap: break-word; white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; font-weight:500;}

/* 호버 슬라이드 박스 - 슬라이드 화살표 스타일 */
.hover-slide__button {position: absolute; top: 63%; transform: translateY(-50%); width: 36px; height: 36px; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20px; font-weight: bold; border-radius: 50%; z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease;}
.hover-slide__button:hover {background-color: rgba(0, 0, 0, 0.8);}
.hover-slide__button--prev::before {content: "‹";}
.hover-slide__button--next::before {content: "›";}
.hover-slide__button--prev {left: 10px;}
.hover-slide__button--next {right: 10px;}
.hover-slide__button.swiper-button-disabled {opacity: 0.3; cursor: default; pointer-events: none;}


/* 다단 뉴스박스 통합 */
.news-container {display: flex; flex-direction: column; gap: 50px;}
.news-container h2.main-tit,
.category-box h2.main-tit {font-size: 1.25rem; font-weight: 600; color: #e04a02; margin:0 0 20px 0; padding: 0 0 20px 0; border-top:0; border-bottom: 2px solid #dedede; background-color:transparent;}
.category-box h2.main-tit {border:0; padding: 0 0 20px 5px; margin:0;}
.news-column-left h2.main-tit{padding-left: 5px; padding-bottom: 20px;}
.news-column-left, .news-column-right {width: 100%;}

/* 다단 뉴스박스 - 좌측박스 */
.news-column-left {width: 100%; display: flex; flex-direction: column; gap: 24px;}
.recent-news__list {display: grid; grid-template-columns: 1fr; gap: 20px; padding: 0; margin: 0; list-style: none;}
.recent-news__link {text-decoration: none; display: block;}
.recent-news__card {display: flex; flex-direction: row; gap: 15px;}
.recent-news__thumb {width: 30%; aspect-ratio: 123 / 100; overflow: hidden; flex-shrink: 0;}
.recent-news__thumb figure{width: 100%; height:100%;}
.recent-news__thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
.recent-news__texts {display: flex; flex-direction: column; gap: 6px; width:70%; justify-content: space-between;}
.recent-news__texts .recent-news__title {font-size: 1rem; font-weight: 600; color: #111; line-height: 1.4; margin: 0; overflow: hidden; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.recent-news__texts .recent-news__contents {font-size: 0.875rem; color: #969696; line-height: 1.5; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* 다단 뉴스박스 - 우측박스 */
.news-column-right {width: 100%; display: flex; flex-direction: column; gap: 40px;}
.popular-news, .issue-news{padding:0 5px; box-sizing:border-box;}
.popular-news__list, .issue-news__list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px;}
.popular-news__item, .issue-news__item {display: flex; align-items: flex-start;}
.popular-news__link, .issue-news__link {text-decoration: none; color: #222; font-size: 0.875rem; line-height: 1.5; display: inline-block;}
.popular-news__title, .issue-news__title{overflow: hidden; word-wrap: break-word; white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; min-height:calc(1.5em * 2);}

.recent-news__link:hover .recent-news__texts .recent-news__title, 
.popular-news__title:hover,
.issue-news__title:hover {color:#e04a02; text-decoration:underline;}
.popular-news__item::before, .issue-news__item::before {content: "•"; display: inline-block; color: #808080; font-size: 0.75rem; margin-right: 10px; line-height: 1.6;}


/* 컨트롤 1 */
.category-box {margin-bottom: 40px; padding-top: 40px; border-top: 2px solid #808080;}
.category-box__header {display: flex; position:relative; justify-content: space-between; align-items: center;}
.category-box__header .btn-section-more {top: 0px;}
.category-box__list {list-style: none; padding: 0; margin: 0;}
.category-box__item {display: flex; gap: 10px; margin-bottom: 40px; padding:15px; background-color:#ebebeb;}
.category-box__thumb {flex-shrink: 0; width: 140px; height: 90px; background-color: #ebebeb; overflow: hidden;}
.category-box__thumb figure{width:100%; height:100%;}
.category-box__thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
.category-box__info {flex: 1; display: flex; flex-direction: column; justify-content:space-between;}
.category-box__text-link {text-decoration: none; color: inherit; display: block; margin-bottom:10px;}
.category-box__text-link:hover .category-box__title{text-decoration:underline;}
.category-box__title {font-size: 16px; font-weight: 500; color: #333; line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.category-box__contents {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.category-box__contents, .category-box__date {font-size: 14px; color: #333;line-height:1.43;}

@media screen and (min-width: 768px) {
    .templete-type11 .main-wrapper{padding:0; margin:40px auto 0;}
    /* 헤드라인 */
    .headline__list {grid-template-columns: 2fr 1fr 1fr;  grid-template-rows: auto auto;}
    .headline__list .headline__item {width: 100%; height: 100%;}
    
    .headline__item.is-t1, .headline__item.is-t2, .headline__item.is-t3, .headline__item.is-t4 {aspect-ratio: 240 / 209;}
    .headline__item.is-main {grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 580 / 428; height: 100%;}
    .headline__item.is-t1 {grid-column: 2; grid-row: 1;}
    .headline__item.is-t2 {grid-column: 3; grid-row: 1;}
    .headline__item.is-t3 {grid-column: 2; grid-row: 2;}
    .headline__item.is-t4 {grid-column: 3; grid-row: 2;}
    .headline__item.is-main .headline__title{padding:20px;}
    .headline__item.is-t1 .headline__title,
    .headline__item.is-t2 .headline__title,
    .headline__item.is-t3 .headline__title,
    .headline__item.is-t4 .headline__title{padding:15px;} 

    /* 호버 슬라이드 박스 */
    .hover-slide{padding:0;}
    .hover-slide .main-tit{font-size:22px;}
    .hover-slide__list{overflow:hidden; gap:6px; padding:0 2% 2%; }
    .hover-slide__item{flex:1 0 0;box-sizing:border-box;}
    .hover-slide__button {display:none;}

    /* 다단 뉴스박스 */
    .news-container {flex-direction: row; justify-content: space-between; gap: 20px;}
    .news-column-left {width:70%;}
    .news-column-left h2.main-tit{font-size: 1.75rem; padding:0 0 15px 5px; border:0; margin:0;}
    .category-box{padding:40px 10px 0;}
    .category-box h2.main-tit {font-size: 1.75rem;}
    .news-column-right h2.main-tit{padding-top:5px;}
    .recent-news__list {grid-template-columns: 1fr 1fr; row-gap:38px; column-gap:15px; background-color:#fff; padding:15px;}
    .recent-news__thumb {width: 123px; height: 100px; aspect-ratio: auto;}
        
    .news-column-right {width: 30%; flex-direction: column;}
    .popular-news, .issue-news{}

    /* 컨트롤 1 */
    .category-box__thumb {width: 185px; height:auto; aspect-ratio: 185 / 118;}
    .category-box__title {font-size: 18px;}
    .category-box__item {padding: 25px; gap:25px;}
}

/* PC */ 
@media screen and (min-width:1170px) {
    /* 헤드라인 */
    .templete-type11 .main-wrapper{width:1100px;}
    .headline__item.is-main .headline__title h1 {font-size:32px;}
    .headline__item.is-t1 .headline__title h1,
    .headline__item.is-t2 .headline__title h1,
    .headline__item.is-t3 .headline__title h1,
    .headline__item.is-t4 .headline__title h1 {font-size:18px;}

    /* 다단 뉴스박스 - 좌측박스 */
    .news-column-left {width: 800px;}
    .recent-news-list {}
    
    /* 다단 뉴스박스 - 우측박스 */
    .news-column-right {width:300px; flex-shrink: 0;}

    /* 컨트롤 1 */
    .category-box{padding:40px 0 0;}
    
}

/* 모바일 전용 */
@media screen and (max-width:768px) {
   
}


/* 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%);
    }
}