@charset "utf-8";

/* 헤더 마스터 영역 */
.templete-type8 .header-top-md{background-color:#fff; padding-top:13px;}
.templete-type8 .main-wrapper{width:100%;margin:0 auto;position: relative;}
.templete-type8 .cont-article{background-color:#fff;}
.templete-type8 .header-area{padding-left:0; float:none; text-align:center;}

.templete-type8 .common-nav {background: #fff; border-bottom: 1px solid #282f2f; border-top: 1px solid #282f2f; height: 60px;}
.templete-type8 .common-nav .topnav{background-color:#fff; height:59px;}
.templete-type8 .button.btnico-menu {left:inherit; background-image:url(/images/main/type1/ico_allmenu2.png); height:58px; width:58px; background-color:#fff; min-width:58px;}

.templete-type8 .today-time{width:120px; top:90px; display:none;}
.templete-type8 .snsLinkbutton{display:none;}

.templete-type8 .topnav-all-wrap{width:100%; top:1px; padding:0 5% 20px; border:1px solid #eeeeee; border-bottom:3px solid #395160;}
.templete-type8 .topnav-all-wrap .menu-one-depth{width:190px; margin-left:20px;}
.templete-type8 .topnav-all-wrap .menu-one-depth > a {color:#395160; height:50px; border-bottom:2px solid #395160;}

.templete-type8 .topnav-wrap{width:100%; padding-left:0px; height:59px; text-align:center;}
.templete-type8 .topnav-wrap ul > li > a {padding: 20px 10px; font-size:15px; color:#282f2f; font-weight:400; min-width:85px;}
.templete-type8 .topnav-wrap ul > li > ul{width:150px; border:none; /*padding:5px 0;*/}
.templete-type8 .topnav-wrap ul li ul li{border:none;}
.templete-type8 .topnav-wrap ul li ul.menu-two-depth .ico_depth:before {top: 25px;}
.templete-type8 .topnav-wrap ul li ul.menu-three-depth{margin-top:-58px;}
/*.templete-type8 .topnav-wrap ul li:hover > a{background-color:#fff; color:#e90606;}*/
.templete-type8 .topnav-wrap ul .menu-one-depth:hover > a{background-color:#fff; color:#24c4f8;}
.templete-type8 .topnav-wrap ul.menu-two-depth li:hover > a,
.templete-type8 .topnav-wrap ul.menu-three-depth li:hover > a{background-color:#24c4f8 !important; color:#fff;}
.templete-type8 .topnav-wrap ul.menu-two-depth li a{color:#fff; background-color:#2f3846 !important; font-weight:400; text-align:left; width:auto;}
/*.templete-type8 .topnav-wrap .menu-two-depth:before{content: ' '; width: 0; height: 0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #2f3846; position:absolute; top:-10px; left:15px;}*/
.templete-type8 .topnav-wrap .menu-two-depth{background-color:#2f3846;}
.templete-type8 .topnav-all-wrap{z-index:105;}

.updown_area button.btn_up{background: #4c9ce5;}
.updown_area button.btn_up:hover{background-color:#3f81bd;}

#wrapper{overflow-x:hidden;}
.footer{margin-top:0; background-color: #f6f6f6;}

.main-prolog-area{display:block;}
/*.main-prolog-area .main-left-area{flex:3; overflow:hidden; padding-right:2%; border-right:1px solid #dedede;}
.main-prolog-area .main-right-area{flex:1; padding-left: 2%; overflow:hidden; min-width:320px;}*/

.topnav-wrap a.nav-menu-txt{}
/*.templete-type8 .topnav-wrap a.nav-menu-img{padding:5px; height:58px;}*/

/* // 헤더 마스터 영역 */

/* 메인 사이드 배너 영역 */
.templete-type8 .main-right-banner{position:absolute; top:0; right:-310px; max-width:300px;}
.templete-type8 .main-left-banner{position:absolute; top:0; left:-310px; max-width:300px;}

.templete-type8 .main-right-banner #divBanner:nth-of-type(1),
.templete-type8 .main-left-banner #divBanner:nth-of-type(1) {margin-top: 0;}

/* 헤드라인 포토박스*/
.headline-wrap{width:100%;margin-top:3.4%;}
.headline-container{border:1px solid #dedede;}
.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;}
/* // 헤드라인 포토박스*/


/* 최신기사 슬라이드 */
.recent-container-vertical { width: 100%; overflow: hidden; border-left: 0; padding: 0 25px; margin-right: 50px;}
.recent-article {margin-top: 3.4%; position: relative;}
.recent-tit {display: block; overflow: hidden; float: left; min-width: 100px; height: 50px; line-height: 50px; letter-spacing: -.025em; text-align: center; background-color: #dedede;}
.recent-wrapper a {overflow: hidden;}
.recent-wrapper a:hover {text-decoration: underline;}
.recent-slide {overflow: hidden; line-height: 48px; text-overflow: ellipsis; white-space: nowrap; position: relative; align-items: center;}
.swiper-button {display: block; position: absolute; float: right; z-index: 15; top: 50%; width: 16px; height: 16px; background-position: center; background-repeat: no-repeat; -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; border: 1px solid rgba(0,0,0,.12);}
.swiper-button:focus {outline: none;}

.recent-article::after {clear: both; display: table; content: '';}
.recent-button-prev {right: 29px; background-image: url('/images/common/baseline_navigate_before_black_18dp.png');}
.recent-button-next {right: 12px; background-image: url('/images/common/baseline_navigate_next_black_18dp.png');}
/* // 최신기사 슬라이드 */


/* 주요기사 4개 박스 */
.section-box-wrap{width:100%;}
.section-wrap{margin-top:50px;}

.main-tit{width:100%; height:35px; background-color:#ececec; font-weight: bold; font-size: 16px; line-height: 33px; margin:0; padding:0; padding-left: 18px;}

.row-col-wrap {width: 100%; overflow:hidden; margin-top:3.4%;}
.row-col-wrap .flex-wrap {display:flex; margin-top:20px; margin-bottom:20px; overflow:hidden;}
.row-col-wrap .row-col-sm{width:50%; margin-left:0; border:1px solid #dedede;}
/*.row-col-wrap .row-col-sm:nth-of-type(n+3){display:none;}*/
.row-col-wrap .row-col-sm a{display: -ms-flexbox;width:auto;height:auto;border:none;box-sizing: border-box;}
.row-col-wrap .row-col-sm figure{position:relative; width:100%;height:160px; overflow:hidden;}
.row-col-wrap .row-col-sm figure img {width:100%; height:100%; object-fit: cover;}
.row-col-wrap .row-col-sm .desc-box{width:auto; padding:15px;}
.row-col-wrap .row-col-sm .desc-box span{color:#0d508f; font-size:15px; height:38px; line-height:1.3; overflow:hidden;}
.row-col-wrap .row-col-sm .desc-box h1{font-size:15px;height:38px;line-height: 1.3;overflow:hidden;margin-bottom:3%;color:#333;margin-top:3%;font-weight: 500;}
.row-col-wrap .row-col-sm .desc-box h1:hover{color:#d3231a; text-decoration:underline;}
.row-col-wrap .row-col-sm .desc-box p{display:none; overflow:hidden;margin-top: 20px; line-height: 1.27; color:#a8a8a8;}
/*.row-col-wrap .row-col-sm ~ .row-col-sm{margin-left:2%;}*/
/* // 주요기사 4개  박스 */


/* 중단 더보기 박스 */
.main-wrapper .list-top-menu{padding: 0 10px; margin-top:5px; width:auto; border:0;}
.article-list-type li{border:0;}
.article-list-type li ~ li {border-top: 1px solid #dedede;}
.more-btn{border:0; padding:6px 0 9px;}
.more-button{margin-top: 0rem; border: 1px solid rgba(0,0,0,.12); text-align: center; clear: both;}

.article-list-type .article-txt strong:hover, .article-txt strong:hover{color:#d3231a; text-decoration:underline;}
/* //중단 더보기 박스 */



/* 2단 슬라이드 8개 박스 */
.multi-silde-wrap{margin-top:3.4%; position:relative;}
.mid-col-wrap{margin:20px 10px 0; overflow:hidden;}
.mid-col-wrap .mid-col-sm{width:24%;display:inline-block;box-sizing: border-box; margin-bottom:15px;/*margin-left:1%;*/}
/*.mid-col-wrap .mid-col-sm:nth-of-type(4n+1){margin-left:0;}*/
.mid-col-wrap .mid-col-sm figure{position:relative; width: 100%; padding-top:80%; overflow:hidden; overflow:hidden; border:1px solid #dedede;}
.mid-col-wrap .mid-col-sm figure img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: 100%;}
.mid-col-wrap .mid-col-sm .desc-box{padding:7px 0 15px 0;}
.mid-col-wrap .mid-col-sm .desc-box h1{font-size:17px; height:45px; 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 h1:hover{color:#d3231a; text-decoration:underline;}
.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;}

.multi-slide-button {width:45px; height:45px; background-size: 35px 35px; font-size: 2.2rem; border: 1px solid rgba(0,0,0,.10); border-radius: 50%; box-shadow: 1px 1px 1px rgb(0 0 0 / 8%); transition:all .35s;}
.multi-slide-button-next{right:0; background-image: url(../images/main/type2/btn_swiper_next.png);}
.multi-slide-button-prev {left:0; background-image: url(../images/main/type2/btn_swiper_prev.png);}

/* // 2단 슬라이드 8개 박스 */

/* 포토 슬라이드 박스*/
.photo-slide-wrap{position:relative; margin-top:3.4%; margin-bottom:20px;}
.photo-slide-container{margin-top:20px;}
.photo-slide{width:60%;}

.photo-slide-box{position:relative; overflow:hidden; display:block; /*height:650px;*/}
.photo-slide-box a{display: block;}
.photo-slide-box figure {position:relative; width:100%; padding-top:60%; overflow: hidden;}
.photo-slide-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-slide-box .txt-overlay{color:#fff; position:absolute; width:93%; 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-slide-box .txt-overlay h1{font-size:20px; font-weight:500; line-height:1.4; white-space:normal; text-align:left; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.photo-slide-box .txt-overlay p{display:none;}

.photo-slide-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-slide-box a:hover figure img{transform: scale(1.1, 1.1);}
.photo-slide-box a:hover .txt-overlay{transform: translateY(-13.5%);}
.photo-slide-box a:hover .txt-overlay h1{text-decoration: underline;}

.photo-slide-button {width:45px; height:45px; background-size: 35px 35px; font-size: 2.2rem; border: 1px solid rgba(0,0,0,.10); border-radius: 50%; box-shadow: 1px 1px 1px rgb(0 0 0 / 8%); transition:all .35s; background-color: #fff;}
.photo-slide-button-next{right:0; background-image: url(../images/main/type2/btn_swiper_next.png);}
.photo-slide-button-prev {left:0; background-image: url(../images/main/type2/btn_swiper_prev.png);}
/* // 포토 슬라이드 박스*/

/* 영상박스 */
.media-silde-wrap{position:relative;}
.media-silde-wrap .mid-col-wrap{overflow: hidden; margin: 20px 15px 0;}
.media-silde-wrap .mid-col-wrap .mid-col-sm figure{padding-top:68%;}
.media-silde-wrap .media-silde-box{border:1px solid #dedede;}
.media-slide-button {width:30px; height:30px; background-size: 30px 30px; font-size: 2.2rem; border: 1px solid rgba(0,0,0,.10); border-radius: 50%; box-shadow: 1px 1px 1px rgb(0 0 0 / 8%); transition:all .35s; background-color: #fff;}
.media-slide-button-next{right:0; background-image: url(../images/main/type2/btn_swiper_next.png);}
.media-slide-button-prev {left:0; background-image: url(../images/main/type2/btn_swiper_prev.png);}
/* // 영상박스 */

#main_topright_banner{margin-top:0;}
#imgTopRightBanner{margin-top:20px;}

/* 좌 썸네일 우 텍스트 박스 */
.article-view-rate {margin-top: 20px;}
.article-view-rate h2 {margin-top:33px;margin-bottom: 15px;}
.article-view-rate .ico{display:inline-block;width:13px;height:13px;margin-left:20px;vertical-align: middle;background:url('../images/main/type3/ico_orange_more.png') no-repeat 0 0;text-indent: -9999em;}

.article-box .line-list {border: 1px solid #dedede; padding:15px;}
.article-box .line-list li{position: relative;}
.article-box .line-list li ~ li{padding-top:15px;}
.article-box .line-list li .dflex figure{border:1px solid #dedede;}
.article-box .line-list li .dflex p{flex:2; margin-left:15px; font-size:16px; height:42px; line-height:1.3; overflow:hidden; letter-spacing: -0.05em; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; -webkit-box-orient: vertical;}
.article-box .line-list li .dflex p:hover {color: #d3231a; text-decoration:underline;}
.dflex{display:flex; display:-webkit-flex; display:-ms-flexbox; flex-direction:row;}

@media (min-width: 768px) and (max-width: 1171px) {
    .article-box .line-list li{padding:10px 0;}
    .main-prolog-area .main-right-area{margin-right:10px;}
}

@media (max-width: 767px) {
    .article-view-rate{width:100%;}
    
    /* 본문 상단 라인 */
    .templete-type8 .location-box{background-color: #4c9ce5;}
    .location ul li:first-child a{background: #3f81bd url(../images/mob/ico_home_md.png) no-repeat 70% center; background-size: 13px auto;}
    /* // 본문 상단 라인*/
}
/* // 좌 썸네일 우 텍스트 박스 */

/* 많이 본 기사 박스*/
.most-viewed-wrap{margin-top:20px;}
.most-viewed-box{padding:10px 25px; border: 1px solid #dedede;}
.most-viewed-box li ~ li{margin-top:15px;}
.most-viewed-box li .d-flex{margin-bottom:5px;}
.most-viewed-box li .d-flex span{font-size:35px; color:#7a65e0; font-weight: 500; padding-right: 10px;}
.most-viewed-box li .d-flex p{margin-top:4px; height:38px; overflow: hidden; font-weight: 500; font-size: 15px;}
.most-viewed-box li:hover .d-flex p{text-decoration:underline; color:#d3231a;}
.most-viewed-box li figure{position: relative; width: 100%; padding-top: 65%; overflow: hidden; border:1px solid #dedede;}
.most-viewed-box li figure img{width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; right:0; bottom:0; max-width:100%;}
.most-viewed-box li .contents{font-size:14px; height: 38px; line-height: 1.3; overflow: hidden; margin-top: 5px; letter-spacing: -0.05em; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; -webkit-box-orient: vertical;}

/* 하단 포토박스 */
.photo-wrap{margin-bottom:35px;}
.photo-wrap .gray-box{display:block; background-color: #4a4a4a; padding:20px; margin-top:20px;}
.photo-wrap figure{position:relative; width:100%; overflow:hidden;}
.photo-wrap 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-wrap .txt-overlay{color: #fff; position: absolute; 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; padding:25px; width:-webkit-fill-available;}
.photo-wrap .txt-overlay p{font-size:20px; 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-wrap a:hover .txt-overlay p{text-decoration:underline;}
.photo-inner{width:100%; display: inline-block; overflow: hidden; position: relative;}
.photo-inner figure{padding-top:87%;}
.photo-inner .txt-overlay p{font-size:20px; height:58px;}

.photo-list{width:100%;}
.photo-list ul{width:100%;}
.photo-list figure{padding-top:92%;}
.photo-list li{position:relative;width:100%; min-height: 1px; margin: 0 2% 2% 0;}

@media all and (min-width: 768px) {
    .photo-wrap .txt-overlay{padding:15px;}
    .photo-wrap .txt-overlay p{font-size:15px;}
    .photo-inner .txt-overlay p{font-size:20px;}
    .photo-wrap .gray-box{display:flex;}
    .photo-inner{width:40%; margin-right:2%;}
    .photo-list{width:58%;}
    .photo-list li{width:32%; float:left;}
    .photo-list li:nth-of-type(3n){margin-right:0;}
    .photo-list li:nth-of-type(n+4){margin-bottom:0;}

    .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%;}
    .mid-row-wrap{padding:0;}
    .main-center-banner{display:flex; margin-top:3.4%;}    
    .main-center-banner a{width:32%;}
    .main-center-banner img{width:100%; margin-bottom:0px;}
    .main-center-banner a~a{margin-left:2%;}
    .main_type1--photo {margin:30px 2% 0;}
    .main_type1--photo .btn-close-arrow{display:block;}

    .list-thum--row{display:flex; flex-wrap:nowrap;}
    .list-thum--row li {width: 32%;}    
    .list-thum--row li ~ li {padding-left:2%;}

    .tit-warp{border:0;}
    .list-cate--row{margin:0;}
    .list-cate--row li:nth-child(2n+1){padding:0;}
    .list-cate--row li {width:20%;}
    
    /* 메인 레이아웃 */
    .main-prolog-area{display:flex; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex;}
    .main-prolog-area .main-left-area{flex:3; overflow:hidden; padding-right:2%; border-right:1px solid #dedede;}
    .main-prolog-area .main-right-area{flex:1; padding-left: 2%; overflow:hidden; min-width:320px;}
    /* //메인 레이아웃 */
    
    .photo-wrap .photo-big-box .txt-overlay {padding:20px;}
    .photo-wrap .photo-big-box .txt-overlay h1{font-size:24px;}

    /* 하단 섹션 박스 */    
    .section-box-wrap{width:100%; display:flex;}
    .section-box-wrap .d-flex{min-width:calc(100% - 260px); width:auto;}
    
    .row-col-wrap .row-col-sm {width:25%;}
    .row-col-wrap .row-col-sm:nth-of-type(n+3){display:block;}
    .row-col-wrap .row-col-sm .desc-box h1{font-size: 16px; height:40px;}
    .row-col-wrap .row-col-sm .desc-box p{display: block;max-height:36px;}
    /* // 하단 섹션 박스 */

    /* 중단 더보기 박스 */

    /* 2단 박스 */
    .mid-col-wrap .mid-col-sm{width:24%;}
    .photo-wrap .photo-slide-box .txt-overlay {padding:20px;}
    .photo-wrap .photo-slide-box .txt-overlay h1{font-size:24px;}
    /* // 2단 박스 */
}
@media all and (min-width: 1180px) {
    .location {width: 1140px;}
}


@media all and (min-width: 1180px) {
    .list-thum--row{margin:0;}
    .main_type1--photo{margin:40px 0;}    
    .main-center-banner a{width:375px;}

    .list-cate--row{margin:0;}
    
    .tit-box {width: 268px;}

    /*.templete-type8 .header {width: 100%;}*/
    .templete-type8 .main-wrapper {margin: 0 auto; position: relative; max-width: 1100px;}
    /*.wrapper-cards__column{max-width: calc(33.33% - 32px);}*/
    /*.templete-type6 .main-wrapper {width: 1080px;}*/
}