/*--------------------------------------
    테라웹
--------------------------------------*/

.transAll_02 { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.transAll_025 { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.transAll_03 { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

/*----- 높이 간격 -----*/
.h_10px {height:10px; }
.h_20px {height:20px; }
.h_15px {height:15px; }
.h_30px {height:30px; }
.h_40px {height:40px; }
.h_50px {height:50px; }
.h_60px {height:60px; }
.h_80px {height:80px; }

.btn-black {background-color:#221e1f;border-color:#221e1f}
.btn-black:hover {background-color:#525252;border-color:#525252}
.btn-e-brd.btn-dark {color:#221e1f !important;background-color:transparent;border-color:#221e1f}
.btn-e-brd.btn-dark:hover {color:#525252 !important;background-color:transparent;border-color:#525252}


/* 하단 button */
.footer_direct_btn { display:inline-block; font-family:'Nanum Gothic','나눔고딕','dotum','굴림'; font-weight:normal !important; font-size:12px !important; letter-spacing:-0.05em; padding:3px 8px 3px 8px; color:#999 !important; border:1px solid #e2e2e2; transition: all 0.3s ease-in-out; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
.footer_direct_btn:hover, .footer_direct_btn:focus { background:#3f43ae; border:1px solid #3f43ae; color:#fff !important; text-decoration:none; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }

.copyright_text { font-size:12px; font-family:'Nanum Gothic','나눔고딕','돋음','굴림'; line-height:18px; text-decoration:none; color:#8d929e; }

/*--------------------------------------
    서브페이지
--------------------------------------*/

.page_big_title {display: block; font-family:'Pretendard','Nanum Gothic','나눔고딕','dotum','굴림'; font-weight:700; font-size:48px; line-height:1.2; color:#000000; padding-bottom:40px; border-bottom:4px solid #000000; }
@media (max-width: 991px){
	.page_big_title {font-size: 48px; padding-bottom: 48px;}
}
@media (max-width: 640px){
	.page_big_title {font-size: 26px; padding-bottom: 40px;}
}
@media (max-width: 480px){
	.page_big_title {font-size: 22px; padding-bottom: 36px;}
}

/*--------------------------------------
    빌리블 메인 추가
--------------------------------------*/
@media (min-width: 576px){
    :root {--container: 540px;}
}

@media (min-width: 768px){
    :root {--container: 720px;}
}

@media (min-width: 992px){
    :root {--container: 960px;}
}

@media (min-width: 1200px) {
    :root {--container: 1140px;}
}

@media (min-width: 1400px){
    :root {--container: 1320px;}
}

.main-keyVisual{position: relative;}
.board-box{padding:20px 40px; width: 540px;height: 350px;position: absolute;top:50%;right: calc((100% - var(--container)) / 2);z-index: 3;transform: translateY(-50%);background-image: url("../image/main-board-bg-2.svg");background-repeat: no-repeat;background-size: cover;}
.board-box .header-box{display: flex;justify-content: space-between;align-items:center;border-bottom: 1px solid #000000;padding: 10px 0 ;}
.board-box .header-box h2{font-size:28px;letter-spacing:-0.05em;font-weight:700;line-height: 1;}
.board-box .more-button{display: inline-block;width: 48px;height: 48px;background-color:#f4f7f9;border-radius: 50%; background-image: url("../image/icons/icon-plus.svg"); background-repeat: no-repeat;background-position: center;background-size: 14px 14px;transition-duration: 0.4s;transition-property: transform;}
.board-box .more-button:hover{transform: rotate(180deg);}
.board-box .list-box{padding:15px 0;}
.board-box .list-item{width: 100%;}
.board-box .list-item > a{display: flex;height: 35px;align-items: center;}
.board-box .list-item > a:hover .subject{color:#dd164a;}
.board-box .list-item .num{flex: none;display: inline-flex;justify-content: center;align-items: center;border-radius: 50%;width: 24px;height: 24px;background-color: #edeff4;font-size: 13px;font-weight: 500;letter-spacing: -0.025em;color:#666666;margin:0 7px;}
.board-box .list-item .subject{font-size: 15px;font-weight: 400;letter-spacing: -0.05em;color:#666666;width: 100%;word-break: break-all;padding-right: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;transition-duration: 0.4s;transition-property: color;}
.board-box .list-item .date{flex: none;padding:0 7px;color:#b4b4b4;font-size: 13px;letter-spacing: -0.05em;}
.board-box .list-item.notice .num{background-color: #222222;color:#ffffff;}
.board-box .list-item.notice .subject{color:#221e1f;}
.board-box .notion-box{margin-top: 15px;}
.board-box .notion-box::before{content:'';display: block;width: 100%;height: 3px;background-image: url("../image/dash-line.svg");}
.board-box .notion-box .header-box{margin-top: 20px;}


@media (max-width: 1700px){
    .board-box {padding: 20px; width: 500px;height: 340px;top: 50%; right: 40px; transform: translateY(-50%);}
}

@media (max-width: 1200px){
    .board-box {padding: 20px; width: 400px;height: 320px;top: 50%; right: 40px; transform: translateY(-50%);}
}

@media (max-width: 992px){
    .board-box {padding: 20px; width: 100%;height: auto;top: 0;right: 0;transform: translateY(0);position: relative;}
    .board-box .more-button {background-size:16px 16px;width: 36px;height: 36px; background-image: url("../image/icons/icon-plus.svg");}
}