@charset "utf-8";

/************************************** import **************************************/


/* search css */
@import url('../sub-common.css');




/************************************** my dashboard **************************************/


.use-case-wrap .box-wrap .box { padding:20px; border-radius: 0 0 30px 0; background:#eff1f8; width: calc(25% - 15px); float:left; margin: 0 20px 20px 0; position:relative;}
.use-case-wrap .box-wrap .box:nth-child(4n+0) {margin-right:0}
.use-case-wrap .box-wrap .box .img-box { position: relative; height:0; padding-bottom: 54%; overflow: hidden; border: 2px solid #fff;}
.use-case-wrap .box-wrap .box .img-box img { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width:100%;}
.use-case-wrap .box-wrap .box .txt-box { padding: 30px 0; text-align: center; }
.use-case-wrap .box-wrap .box .txt-box .tit { font-size: 1.9rem; font-weight: 900; color: #050c3d; text-overflow: ellipsis; overflow: hidden; width:100%; white-space: nowrap;}
.use-case-wrap .box-wrap .box .txt-box .desc { font-size: 1.4rem; font-weight: 500; color: #84879e; padding-top: 10px; text-overflow: ellipsis; overflow: hidden; width:100%; white-space: nowrap;}
.use-case-wrap .box-wrap .box .btn-wrap button.more-btn { position: relative; padding: 0 30px; font-size: 1.3rem; font-weight: 600; height:30px; transition: padding .2s;}
.use-case-wrap .box-wrap .box .btn-wrap button.more-btn .material-icons { font-size: 16px; position: absolute; top: 7px; right:20px; opacity: 0; transition: opacity .2s, right .2s;}
.use-case-wrap .box-wrap .box .btn-wrap button.more-btn:hover { padding: 0 40px 0 30px; }
.use-case-wrap .box-wrap .box .btn-wrap button.more-btn:hover .material-icons { right:20px; opacity: 1;}
.use-case-wrap .view-all-btn button { position: relative; padding: 0 30px; height:35px; box-shadow:none; transition: box-shadow .2s, padding .2s;}
.use-case-wrap .view-all-btn button .material-icons { font-size: 16px; position: absolute; top: 8px; right:20px; opacity: 0; transition: opacity .2s, right .2s; }
.use-case-wrap .view-all-btn button:hover { padding: 0 40px 0 30px; box-shadow: 0 0 0 4px rgba(100,46,255,0.19); }
.use-case-wrap .view-all-btn button:hover .material-icons { right:20px; opacity: 1;}


@media (max-width:768px) {
    .use-case-wrap .box-wrap .box { margin: 0 15px 15px 0; padding: 10px; width:calc(33.3% - 10px) }
    .use-case-wrap .box-wrap .box:nth-child(4n+0) {margin-right:15px}    
    .use-case-wrap .box-wrap .box:nth-child(3n+0) {margin-right:0}    
    .use-case-wrap .box-wrap .box .txt-box { padding: 10px 5px; }
    .use-case-wrap .box-wrap .box .txt-box .tit { font-size: 1.5rem; }
    .use-case-wrap .box-wrap .box .txt-box .desc { font-size: 1.3rem; }
    .use-case-wrap .box-wrap .box .btn-wrap button.more-btn { height:25px; font-size: 1.2rem; padding: 0 20px; }
    .use-case-wrap .box-wrap .box .btn-wrap button.more-btn:hover { padding: 0 30px 0 20px; }
    .use-case-wrap .box-wrap .box .btn-wrap button.more-btn .material-icons { top:5px;}
    .use-case-wrap .box-wrap .box .btn-wrap button.more-btn:hover .material-icons { right: 10px;}
    
}

@media(max-width:500px) {
    .use-case-wrap .box-wrap .box { margin: 0 15px 15px 0; padding: 10px; width:calc(50% - 8px) }
    .use-case-wrap .box-wrap .box:nth-child(3n+0) {margin-right:15px}    
    .use-case-wrap .box-wrap .box:nth-child(2n+0) {margin-right:0px}   
}


/* use case detail */
.use-case-detail .top-area {padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #dee3eb}
.use-case-detail .top-area .img-area { float:left; width:340px; height:190px; margin-right:30px; ; position: relative; overflow: hidden; border:1px solid #dee3eb;}
.use-case-detail .top-area .img-area img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width:100%; }
.use-case-detail .top-area .use-right-cont {float:left; width: calc(100% - 370px)}
.use-case-detail .top-area .case-tit {font-size:2.2rem; font-weight:700; color:var(--theme-color)}
.use-case-detail .top-area .case-sub-tit {font-size:1.7rem; padding:13px 0; font-weight:600 }
.use-case-detail .top-area .case-cont {position:relative;border-bottom:1px dashed #dee3eb; border-top:1px dashed #dee3eb; padding:13px 0}
.use-case-detail .top-area .case-cont .expand-btn {position:absolute; right:0; top:15px; cursor:pointer;}
.use-case-detail .top-area .case-cont .expand-btn:hover {background:#eeecf2; color:#5c5b8a}
.use-case-detail .top-area .case-cont.on .expand-btn{transform: rotate(180deg);}
.use-case-detail .top-area .case-cont .d-cont {padding-right:30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-word; word-spacing: -1.5px; font-size:1.5rem; line-height:21px}
.use-case-detail .top-area .case-cont.on .d-cont {white-space: normal; overflow:auto; text-overflow: none;}
.use-case-detail .hashtag { font-size: 1.4rem; color:#a4a8c6; padding:13px 0; }
.use-case-detail .hashtag > span { display: inline-block; float: left; border-radius: 3px; padding: 3px 6px; text-align: center;font-weight: 600; }
.use-case-detail .bottom-area p {font-size:1.5rem; line-height:21px}
.use-case-detail .bottom-area img {max-width:100%; max-height:100%;}


/* 카테고리 정보 */
.use-case-detail .db-category .item { display: inline-block; padding: 7px 10px; border-radius: 3px; background: #d4dcf5; color:#1f0042; font-weight: 600; font-size: 1.3rem; margin:2px;  }

/* 차트 정보 */
.use-case-detail .db-chart .item { position: relative; display: inline-block; padding: 8px 10px; border-radius: 3px; background: #f0f0f0; color:#1f0042; font-weight: 600; font-size: 1.3rem; margin:2px; }
.use-case-detail .db-chart .item .chart-hover  { display: none; position: absolute; top: calc(100% + 3px); left:50%; background:#6f90f6; font-size: 1.1rem; color:#fff; padding:3px 5px; border-radius: 3px; transform: translateX(-50%); z-index: 99;}
.use-case-detail .db-chart .item:hover .chart-hover { display: block; }
.use-case-detail .db-chart .item .chart-hover:after { content: "";  position: absolute; top: -4px; right: 50%; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #6f90f6; transition: border-top .25s ease; transform: rotate(0); transition: transform .2s; margin-right: -4px;}
.use-case-detail .db-chart .etc {display: inline-block;padding: 3px 5px;color: #1f0042;font-weight: 600;font-size: 1.2rem; position: relative; top:2px}
.use-case-detail .db-chart .item img { max-width: 18px; height:15px; display: inline-block; }
.use-case-detail .db-info .tit { font-size: 1.4rem; font-weight: 600; color:#73789a; padding-bottom:15px;}
.use-case-detail .db-info ul li { position: relative; padding: 2px 0 2px 30px; margin-bottom: 15px; font-size: 1.4rem; font-weight: 600; color:#1f0042;text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.use-case-detail .db-info ul li:last-child { margin-bottom:0; }

@media(max-width:1024px) {
    .use-case-detail .top-area .img-area {width:235px; height:130px;}
    .use-case-detail .top-area .use-right-cont {width: calc(100% - 265px)}
    .use-case-detail .top-area .case-tit {font-size:2rem;}
    .use-case-detail .top-area .case-sub-tit {font-size:1.6rem;}
    .use-case-detail .hashtag {font-size:1.3rem}
    table.vertic-table tr th {font-size:1.3rem; width:120px;}
    table.vertic-table tr td {font-size:1.3rem; padding:13px}
}

@media(max-width:768px) {
    .use-case-detail .top-area .use-right-cont {float:none; width:100%}
    .use-case-detail .top-area .img-area {float: none; margin-bottom: 20px;width: 100%;height: 0;padding-bottom: 42%;}
    .use-case-detail .db-category .item {font-size:1.2rem; padding:5px 8px;}
    .use-case-detail .db-chart .item {font-size:1.2rem;padding:5px 8px}
    table.vertic-table tr th {width:100px}
}

@media(max-width:500px) {
    .use-case-detail .top-area .case-tit {font-size:1.7rem;}
    .use-case-detail .top-area .case-sub-tit{font-size:1.5rem}
    .use-case-detail .top-area .case-cont .d-cont {font-size:1.4rem; line-height:20px;}
    .use-case-detail .bottom-area p {font-size:1.4rem; line-height:20px}
}