@charset "utf-8";
#wrapper.templete-type4{overflow-x: hidden; background-color:#fbfbfb;}

.templete-type4 .header-top-md{background-color:#fff;}
.templete-type4 .main-wrapper{width:100%;margin:0 auto;position: relative;}
.templete-type4 .cont-article{background-color:#fff;}

.templete-type4 .topnav-wrap{width:100%; text-align:center; padding:0; padding-right:37px;}
.templete-type4 .topnav-wrap ul > li > a {padding: 8px 18px;font-size: 16px; color:#fbfbfb; font-weight:300;}
.templete-type4 .topnav-wrap ul li ul.menu-two-depth .ico_depth:before {top: 13px;}
.templete-type4 .common-nav {background: #395160; border-bottom:none; border-top:none; height: 36px;}
.templete-type4 .common-nav .topnav{width:100%; background-color:#395160; height:36px;}
.templete-type4 .button.btnico-menu {right: 0;left: inherit;background-image: url(../images/main/type2/ico_menu_hambur_trans.png);height: 36px;width: 37px;background-color: #2D6AA2;min-width: 37px;}
.templete-type4 .header-area h1{text-align:center;}
.templete-type4 .topnav-all-wrap{width:100%; top:1px; padding:0 5% 20px; border:1px solid #eeeeee; border-bottom:3px solid #395160;}
.templete-type4 .topnav-all-wrap .menu-one-depth{width:190px; margin-left:20px;}
.templete-type4 .topnav-all-wrap .menu-one-depth > a {color:#395160; height:50px; border-bottom:2px solid #395160;}
.templete-type4 .topnav-wrap ul li ul li a{color: #333; font-weight:400; text-align:left;}
.templete-type4 .topnav-wrap ul li:hover > a, .templete-type2 .topnav-wrap ul li.on > a{background-color:#2a5680; color:#fff;}

.top-row-wrap{width:100%; padding-bottom:20px;}
.top-row-wrap .col-3{display:inherit;}
.row-col-wrap {width: 100%; height:350px; overflow:hidden; position:relative; margin-bottom:20px; border:1px solid #eeeeee;}
.row-col-wrap figure{position:relative; width:100%;height:65.4%; overflow:hidden;}
.row-col-wrap figure img {width:100%; height:100%; object-fit: cover;}
.row-col-wrap .desc-box{background-color:#fff; padding:12px;}
.row-col-wrap .desc-box h1{font-size:20px;height:53px;line-height: 1.3;overflow:hidden;margin-bottom:5px;color:#333;font-weight: 500;}
.row-col-wrap .desc-box p{display:block; font-size:15px; overflow:hidden;line-height: 1.4;color:#a8a8a8; height:45px;}

.tit-box {background-color:#3b83c5;height:35px;}
.tit-section{font-size: 14px; font-weight: 400; color:#333; height:35px; overflow:hidden; width:100%; line-height:1.2;}

.mid-row-wrap{border:1px solid #eeeeee;}
.mid-row-wrap .newst-wrap{background-color:#fff; margin-bottom:30px;}
.mid-row-wrap .newst-wrap ul{display:flex; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; flex-wrap:wrap; flex:1; flex-basis:48%; justify-content:space-between;}
.mid-row-wrap .newst-wrap ul li{padding:0 1px; width:calc(50% - 2px);}
.mid-row-wrap .newst-wrap .newst-box{height:140px; display:flex; display:-webkit-flex; display:-ms-flexbox; position:relative;background-color:#fff; }
.mid-row-wrap .newst-wrap .newst-box section {width:100%; position:absolute; bottom:0px; left:0; padding:5px 0 5px 0; background:linear-gradient(to top,rgba(0,0,0,0.75) 0,rgba(0,0,0,0) 100%);}
.mid-row-wrap .newst-wrap .newst-box section h1.tit-section{color:#ececec; padding:8px 5px; font-size:15px; text-shadow:1px 1px 3px #333; width:95%; height:30px;}
.mid-row-wrap .newst-wrap .newst-box .time{margin-top:10px;font-size: 12px;font-weight: normal;color:#a8a8a8; display: none;text-align:right;}
.mid-row-wrap .newst-wrap .newst-box figure{display: block;width:100%;height:100%;overflow:hidden;}
.mid-row-wrap .newst-wrap .newst-box figure img{width:inherit;height:inherit;object-fit:cover;}

.mid-row-wrap .photo-move-list{display:flex; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; flex-wrap:wrap; flex:1; flex-basis:48%; justify-content:space-between;}
.mid-row-wrap .photo-move-list li{background-color:#fff; width:calc(50% - 2px); padding:0 1px 20px;}
/*.mid-row-wrap .photo-move-list li ~ li{border-top:1px solid #f1f2f4}*/
.mid-row-wrap .photo-move-list li a{display: flex;}
.mid-row-wrap .photo-move-list li figure {position: relative;width: 100px;height: 74px;overflow: hidden;}
.mid-row-wrap .photo-move-list li figure img {width:100%; height: 100%; object-fit: cover;}
.mid-row-wrap .photo-move-list li section{width:calc(100% - 100px);margin-left:5px}
.mid-row-wrap .photo-move-list li section .tit-section{font-size: 14px; font-weight:500; height:34px; text-overflow:ellipsis; white-space:normal; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; padding-top:5px; display:-webkit-box; overflow: hidden;}
.mid-row-wrap .photo-move-list li section .desc-txt {color: #a8a8a8;font-size:14px;display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.mid-row-box{display:block; padding-bottom:20px;}
.midbox{width:100%; border:1px solid #eeeeee; background-color:#fff;}
.midboxflex {padding:20px 10px;}
.midboxflex h4{font-size:18px;font-weight: bold;margin-bottom:10px;text-overflow: ellipsis;overflow:hidden;white-space: nowrap;color:#333;max-width:400px;}
.midboxflex .dflex{display:flex;}
.midboxflex .dflex p{font-size:14px;}
.midboxflex .dflex figure{position:relative; overflow:hidden; width:150px; height:100px; margin-right: 10px;}
.midboxflex .dflex img{width:150px; height:100px; object-fit:cover;}
.midboxflex .dflex .dflex-tit{width:calc(100% - 150px); overflow:hidden;}
/*.midboxflex + .listbox{border-top:1px solid #ddd;}*/
.listbox .line-list li{padding:0 10px; height:40px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; position:relative;}
.listbox .line-list li a{font-size: 16px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-weight: 500;color:#333;}

.mid-right-box{width:100%; display:flex; /*border: 1px solid #eeeeee;*/}
.mid-right-box .row-col-sm {width:50%; box-sizing: border-box; border: 1px solid #EBEDEE; background-color:#fff;}
.mid-right-box .row-col-sm ~ .row-col-sm{margin-left:2%;}
.mid-right-box .row-col-sm .thumb-img-box{min-height:42px; display: block; position: relative; overflow:hidden; height:160px;}
.mid-right-box .row-col-sm .thumb-img-box figure{/*width:336px;*/ height:100%;}
.mid-right-box .row-col-sm .thumb-img-box figure img{display:block; width:100%; height:100%; object-fit:cover;}

.mid-right-box .row-col-sm .desc-box .meta-list-top{padding:15px 15px 0px;}
.mid-right-box .row-col-sm .desc-box span.cat-title{border:1px solid #C2D5E8; border-radius:15px; font-size:11px; text-transform:uppercase; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-weight:500; padding:5px 10px; background:transparent; margin: 10px 0; letter-spacing:0.035em; max-width: calc(100% - 14px); -moz-box-sizing: border-box; box-sizing: border-box;}
.mid-right-box .row-col-sm .desc-box span.cat-title a{color:#C2D5E8; border:1px solid #C2D5E8; border-radius:15px; font-size:11px; line-height:1em; position:relative; display:inline; font-size: 11px; font-weight:300;}
.mid-right-box .row-col-sm .desc-box h2.post-title{height:50px; overflow:hidden; padding:0 15px; margin-top:15px; margin-bottom:15px; font-size:18px; font-weight:600; line-height:1.3; -webkit-font-smoothing:antialiased;}
.mid-right-box .row-col-sm .desc-box h2.post-title a{font-size:20px; color:#293560;}
.mid-right-box .row-col-sm .desc-box .excerpt{margin-top:12px; font-size:14px; color:#151515; padding:0 15px;}
.mid-right-box .row-col-sm .desc-box .excerpt p{height:55px; overflow:hidden; margin-bottom: 0; line-height:1.3;}
.mid-right-box .row-col-sm .desc-box .dflex{padding:15px 15px; line-height:1.4; margin-bottom:0; font-weight:400; font-size:12px; text-transform:none;}

.main_type4--photo{padding-bottom:20px;}
.gray-box { padding:3%; background-color:#333;}
.gray-box .list-thum--row{display:flex;flex-wrap:wrap;overflow:hidden;}
.gray-box .list-thum--row li{width:49%;}
.gray-box .list-thum--row li:nth-child(2n){padding-left:2%;}
.gray-box .list-thum--row li img {width:100%; height:160px; object-fit:cover;}
/*.gray-box .list-thum--row li a{display: block;width:96%;}*/
.gray-box .list-thum--row li p {margin-top:10px; height:37px;overflow:hidden; font-size:15px; color:#fff; font-weight:400;}

/*.main-wrapper .list-top-menu{background-color:#f7f7f7;}*/
.main-wrapper .list-top-menu{margin-bottom:25px;}
.main-wrapper .list-top-menu .swiper-container{border-bottom:1px solid #555; max-width:1170px;}
.main-wrapper .list-top-menu .swiper-container .tabs > li > a, .swiper_block{background-color:inherit; color:#4e4e4e; font-weight:400; opacity:0.9; font-size:17px;}
.main-wrapper .list-top-menu .swiper-container .tabs .active a{color:#333; font-weight:bold; border-bottom:3px solid #333; opacity:1;}
.main-wrapper .list-top-menu:after{width:6%;}

.main-wrapper .article-list-type li{padding:20px 10px; margin: 15px 0; width:calc(100% - 22px); border:1px solid #eeeeee; background-color: #fefefd;}
.main-wrapper .article-txt strong{height:46px; overflow:hidden;}
.main-wrapper .article-txt .contents{overflow:hidden; height:37px;}
/*.main-wrapper .dtable img{margin-bottom:25px; margin-right:10px;}*/
.main-wrapper .article-list-type .article-txt dd.date{margin-top:10px; color:#747474;}
.main-wrapper .more-btn{padding:5px 3px; border:1px solid #b3b3b3; width:calc(100% - 30px); margin:5px 15px; background-color:#fff; letter-spacing:5px; color:#666666;}
.mid-row-wrap .photo-move-list li section span.time{display:none;}

.templete-type4 .type5-side-banner{display:none;}

.footer {background-color: #f6f6f6;}



/* 테블릿*/
@media (min-width:768px) {
    .top-row-wrap{padding-top:40px;}
    .top-row-wrap .col-3{display:flex;flex:1;display:-webkit-flex;display:-ms-flexbox}

    .row-col-wrap {width:49%; margin:0; height:410px;}
    .row-col-wrap .desc-box{padding:20px;}
    .row-col-wrap .desc-box h1{font-size:21px;}

    .mid-row-wrap{width:50%; margin-left:1%;}
    .mid-row-wrap .newst-wrap .newst-box{height:160px;}
    .mid-row-wrap .newst-wrap .newst-box .time{display:block;}
    .mid-row-wrap .newst-wrap .newst-box section h1.tit-section{padding:10px 10px; width:calc(100% - 20px);height:28px;}

    .mid-row-wrap .photo-move-wrap{padding-bottom:0; display:flex; display:-webkit-flex; display:-ms-flexbox;}
    .mid-row-wrap .photo-move-list li{width:calc(50% - 6px); padding:0 3px 20px;}
    .mid-row-wrap .photo-move-list li figure{width:120px; height:90px;}
    .mid-row-wrap .photo-move-list li section{margin-left:8px;}
    .mid-row-wrap .photo-move-list li section .tit-section{font-size: 16px; height:40px; padding-top:2px;}
    
    .mid-row-box{display:flex;}
    .mid-row-box{height:385px;}
    .mid-right-box{width:50%; margin-left:1%;}
    .mid-right-box .row-col-sm{height: 385px;}
    .mid-right-box .row-col-sm .thumb-img-box{height:170px;}
    .mid-right-box .row-col-sm .thumb-img-box figure{width:100%; /*height:200px;*/}
    .mid-right-box .row-col-sm .desc-box{height:205px;}
    
    .midbox{width:49%;}
    .midboxflex {padding:20px;}
    .midboxflex .dflex figure{margin-right:10px;}
    .listbox .line-list li{padding:0 20px;}

    .gray-box {padding:2%;}
    .gray-box .list-thum--row{flex-wrap:nowrap;}
    .gray-box .list-thum--row li {width: 25%;}
    .gray-box .list-thum--row li ~ li {padding-left:2%;}

    .list-menu{display:flex;}
    .main-wrapper .list-top-menu{margin-bottom:35px; border-top:0; margin-top:0; width:72%;}

    .main-wrapper .article-list-type li{padding:25px 20px; width:calc(100% - 42px); }
    /*.main-wrapper .dtable img{margin-right:30px; margin-bottom:0;}*/
    .main-wrapper .article-list-type .article-txt dd.date{margin-top:15px;}
    .main-wrapper .article-txt strong{font-size:19px; height:27px;}
    .main-wrapper .article-txt .contents{font-size:15px; height:58px;}
    .main-wrapper .article-txt dt{margin-bottom:10px;}
    .main-wrapper .more-btn{width:calc(100% - 60%); margin:5px 30%;}

    .templete-type4 .type5-side-banner {display:block; position:relative; top:0px; left:25px; width:300px; height:auto; text-align:center;}
}

/* PC (개조 후)*/
@media (min-width:1170px) {
    .templete-type4 .main-wrapper {width: 1170px;}
    .templete-type4 .common-nav .topnav{width: 1170px;}
    .templete-type4 .topnav-wrap {width:1170px;}
    .templete-type4 .topnav-all-wrap{width:1170px;}
    
    .top-row-wrap{width:1170px;}
    .row-col-wrap{height:442px;}
    .row-col-wrap figure{height:72%;}
    .row-col-wrap .desc-box h1{height:31px; margin-bottom:10px;}

    .mid-row-wrap .newst-wrap .newst-box{height:180px;}

    .mid-row-wrap .photo-move-list li{width:calc(50% - 10px); padding:0 5px 20px;}
    .mid-row-wrap .photo-move-list li figure{width:126px; height:95px;}
    .mid-row-wrap .photo-move-list li section span.time{display:block; float:right; margin-top:35px; padding-right:10px; color:#787878;}

    .main_type4--photo {width: 100%;}

    .main-wrapper .list-top-menu:after{width:4%;}
}

@media (min-width:1180px) {
    /* 메인 사이드 배너 영역 */
    .templete-type4 .main-right-banner{position:absolute; top:40px; right:-310px; max-width:300px;}
    .templete-type4 .main-left-banner{position:absolute; top:40px; left:-310px; max-width:300px;}
    .templete-type4 .main-right-banner #divBanner:nth-of-type(1),
    .templete-type4 .main-left-banner #divBanner:nth-of-type(1) {margin-top: 0;}
}

/* 모바일만 (개조 후) */
@media (max-width: 767px) {
    .mid-row-wrap .mid-row-mid .section-main-wrap ul{display:flex; display:-webkit-flex; flex: 1; flex-wrap: wrap; flex-basis: 48%; justify-content: space-between;}
    
    .gray-box .list-thum--row li:nth-child(n+3) {padding-top:2%;}
}



@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .top-row-wrap .col-3 .row-col-card figure img,
    .row-col-wrap .row-col-sm figure img,
    .mid-row-wrap .section-main-wrap .section-card figure img,
    .mid-row-wrap .issue .issue-wrap .row-col-card figure img,
    .card-type-wrap .col-row-card img,
    .mid-row-wrap2 .photo-big-box figure img,
    .mid-row-wrap2 .photo-move-list li figure img {
        position: absolute;
        width: auto;
        height: auto;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        min-width: 100%;
    }

    .mid-row-wrap2 .photo-move-list li section .desc-txt {
        height: 60px;
    }
}