@charset "utf-8";

/* ******************************** 인사이트 페이지 ******************************** */
section.insight {position: relative; background-color:#f0f0f0;    padding-top: 14rem;}

section.insight .title_wrap{}
section.insight .title_wrap .page_title{font-size: 8rem; color:#000;font-family:Bodoni Moda;font-weight: 400;line-height: 1em;}
section.insight .title_wrap p{margin:4.5rem 0;font-size:2rem;line-height: 3.4rem;letter-spacing: 0.05em;color:#000;text-align: center;}

section.insight .button-box{width: 100%;display: flex;justify-content: space-between;position: relative;margin-bottom: 10rem;}
section.insight .button-box a{font-size: 1.4rem;line-height: 3.4rem;letter-spacing: -0.05em;color:#000;padding:0.5rem 1.5rem;border:1px solid #000;transition-duration: 0.5s;}
section.insight .button-box a:hover{background-color:#000;color:#fff;cursor: pointer;}
section.insight .button-box .left-button{text-align: left;}
section.insight .button-box .left-button a{margin-right: 0.5rem;}
section.insight .button-box .center-button{position: absolute;left: 50%;transform: translateX(-50%);}
section.insight .button-box .center-button a{margin: 0 0.25rem;}
section.insight .button-box .right-button{text-align: right;}
section.insight .button-box .right-button a{margin-left: 0.5rem;}

section.insight.list .container{max-width:100%;align-items: center;padding:0;}
section.insight.list .tab-box{margin-bottom:5rem;}
section.insight.list .tab-box a{margin:0 0.5rem;}
section.insight.list .search-box{display: flex;justify-content: center;margin-bottom: 3.5rem;}
section.insight.list .search-box input{width: 45.6rem;height: 5.6rem;background-color: transparent;padding-left: 1.8rem;border:2px solid #000;color:#000;font-size: 2rem;}
section.insight.list .search-box input::placeholder{color:#000;font-size: 2rem;}
section.insight.list .search-box .search-button{background: url("../images/search-button.png") no-repeat #000;width: 5.6rem;height: 5.6rem;background-size: cover;background-position: center;text-indent: -1000000px;border: 2px solid #000;border-left: 0;}
section.insight.list .list-box {display: flex;flex-wrap: wrap;width:100%;max-width:144rem;position: relative;}
section.insight.list .list-box .list-item{width: 30%;    max-height: 29rem;background-color: #333333;position: relative;opacity:1;transform: scale(1);transition-duration: 1s;max-width: 45rem;margin:1.5rem;}
section.insight.list .list-box .list-item img{width: 100%;height: 100%;object-fit: cover;}
section.insight.list .list-box .list-item a{position: absolute;width: 100%;height: 100%;display: flex;flex-direction:column;justify-content: center;align-items: center;left: 0;bottom:0;background-color: rgba(0,0,0,0.5);overflow: hidden;transition-duration: 0.5s;opacity: 0;}
section.insight.list .list-box .list-item a h1{font-size: 2rem;text-align:left;line-height: 2.6rem;letter-spacing: -0.05em;font-weight: 500;color: #fff;max-width: 70%;display: -webkit-box;word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
section.insight.list .list-box .list-item a span.date{font-size: 1.4rem;line-height: 4.2rem;font-weight: 400;color:#fff;}
section.insight.list .list-box .list-item a span.category{font-size: 1.6rem;line-height: 4.2rem;font-weight: 500;color:#ddd;}
section.insight.list .list-box .list-item a:hover{opacity: 1;}
section.insight.list .list-box .list-item.show{opacity:1;transform: scale(1);z-index: 1;}
section.insight.list .list-box .no-search {font-size: 2rem;line-height: 3.4rem;text-align: center;margin: 0 auto;height: 30rem;display: flex;align-items: center;}
section.insight.list .button-box {width: 100%;max-width: 144rem;padding: 0 1.5rem;}
section.insight.list .button-box .pagination{display: flex;position: absolute;left: 50%;transform: translateX(-50%);}
section.insight.list .button-box .pagination a{border: 0;}
section.insight.list .button-box .pagination a.on{background-color:#000;color:#fff;}

/*상세 페이지*/
section.insight.view .container{max-width:930px;;align-items: center;padding:0;}
section.insight.view .content-box{background-color: #fff;width: 100%;height:100%;text-align: center;padding:30px 0;margin-bottom: 30px;}

section.insight.view .content-box .title-box {max-width: 690px;margin: 0 auto;}
section.insight.view .content-box .title-box .title{font-size: 30px;line-height: 34px;letter-spacing: -0.05em;color: #000;font-weight: 700;}
section.insight.view .content-box .title-box .date{font-size: 18px;line-height: 28px;color: #959595;text-align: center;margin: 10px 0 5px;}
section.insight.view .content-box .title-box .name{font-size: 18px;line-height: 28px;color: #000;letter-spacing: -0.05em;text-align: center;font-weight: 700;}
section.insight.view .content-box .content{width: 100%;max-width: 690px;margin: 30px auto 0;text-align: left;}


section.insight .button-box.top {display: none;}

@media screen and (max-width: 720px) {
    section.insight {padding-top: 28vw;}
    section.insight .title_wrap {text-align: center;}
    section.insight .title_wrap .page_title {font-size: 8.3vw;margin-bottom: 5.5vw;}
    section.insight .title_wrap p {font-size: 3.611111111111111vw;line-height: 4.722222222222222vw;}
    section.insight .tab-box.list {margin-bottom: 7vw;}
    section .tab-box a {font-size: 3.611111111111111vw;line-height: 4.722222222222222vw;min-width: 12.5vw;padding: 0 2vw;}
    section.insight.list .search-box {padding: 0 7vw;margin-bottom: 7vw;}
    section.insight.list .tab-box {margin-bottom: 7vw;}
    section.insight.list .search-box input {width: 100%;height: 11.80555555555556vw;padding-left: 1.8rem;border: 1px solid #000;font-size: 3.611111111111111vw;}
    section.insight.list .search-box .search-button {background: url(../images/search-button.png) no-repeat #000;width: 11.80555555555556vw;height: 11.80555555555556vw;background-size: cover;background-position: center;text-indent: -1000000px;border: 1px solid #000;border-left: 0;}
    section.insight.list .search-box input::placeholder{font-size: 3.611111111111111vw;}
    section.insight.list .container {display: block;}
    section.insight.list .list-box {width: 100%;max-width: 100%;height: 100%;padding: 0 7vw;}
    section.insight.list .list-box .no-search {font-size: 3vw;line-height: 3.4vw;height: 25vw;}
    section.insight.list .list-box .list-item {width: calc(50% - 3rem);max-height: 100%;position: relative;max-width: 100%;margin: 1.5rem;}
    section.insight.list .button-box {width: 100%;max-width: 100%;padding: 4vw 7vw 7vw;margin-bottom: 0;}
    section.insight.list .list-box .list-item a h1 {font-size: 2.777777777777778vw;line-height: 3.611111111111111vw;}
    section.insight.list .list-box .list-item a span.date {font-size: 1.944444444444444vw;line-height: 5.833333333333333vw;}
    section.insight.list .list-box .list-item a span.category {font-size: 2.222222222222222vw;line-height: 5.833333333333333vw;}

    section.insight .button-box a {font-size: 2.777777777777778vw;line-height:4.722222222222222vw;padding: 2vw 3vw;margin:1rem;}
    section.insight .button-box .center-button a {margin:1rem;}
    section.insight.view .content-box .content {padding: 0 7vw;}
    section.insight .button-box{padding:0 7vw;}
    section.insight .button-box.top {margin-top: 5vw;display: flex;}
    section.insight .button-box.bottom {margin: 0vw 0 12vw;}



    section.insight .button-box.bottom .left-button,section.insight .button-box.bottom .right-button {display: none;}


}