@charset "utf-8";


/* ****************** default css ****************** */
/* common css */
@import url("../import/common/common.css");

/* component css */
@import url("../import/common/component.css");

/* layout css */
@import url("../import/common/layout.css");

/* header css */
@import url("../import/common/header.css");



/* ****************** home css ****************** */
.ipoffice-container { padding-top: 51px; }
.ipoffice-container #header_container .header { box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 3%); }

/*.my-portfolio-wrap .content-container { min-height: 900px; }*/
.my-portfolio-wrap .content-container .home { padding: 45px 30px 30px; background: #eff3f7; }
.my-portfolio-wrap .content-container .home .home-title { font-size: 2.4rem; color: #000; font-weight: 800; display: block; margin-bottom: 30px; cursor: default; }

/* 포트폴리오 박스 */
.home .portfolio-wrap { position: relative; padding-top: 35px; }
.home .portfolio-wrap .search-box { height: 30px; background: #e0e6ec; width: 292px; border-radius: 4px; position: absolute; right: 93px; top: 0px; z-index: 9; }
.home .portfolio-wrap .search-box input[type=text] { height: 100%; width: 100%; border: none; background: none; padding-left: 10px; letter-spacing: 0; font-size: 1.2rem; outline: 0; float: left; }
.home .portfolio-wrap .search-box button { width: 35px; float: right; height: 100%; background: none; border: none; outline: 0; }
.home .portfolio-wrap .search-box button img { width: 18px; margin-top: -30px; opacity: .7; }
.home .portfolio-wrap .favorite-list-title { margin-bottom: 15px; font-size: 1.6rem; color: #7d8796; font-weight: 500; display:inline-block; margin-right:10px }
.home .portfolio-wrap .favorite-list-title span.total { display: inline-block; background: #e0e6ec; padding: 0 13px; border-radius: 20px; font-size: 1.2rem; font-weight: 500; letter-spacing: 0; line-height: 20px; height: 20px; margin-left: 5px;}
.home .portfolio-wrap .divide-line { height: 1px; display: block; background: #dee3eb; margin: 20px 0 35px; }

/* 탭메뉴 밑 부제목 포트폴리오 버튼 */
.list-title-new-wrap {display: inline-block}
.list-title-new-wrap a span.create-button {color: #7192C8; border: 1px solid #b9ccea; background-color: #ecf3ff; font-size: 11px; padding: 3px 7px; border-radius: 5px; font-weight: 500; box-shadow: 3px 3px 3px rgb(0 0 0 / 5%); transition: background-color .3s, border-color .3s, color .3s}
.list-title-new-wrap a span.create-button:hover {background-color: #4c75e2; border-color: #4c75e2; color: #fff;}


ul.box-list { height: auto; }
ul.box-list > li { width: calc(20% - 12px); float: left; margin-bottom: 20px;  margin-right: 15px;}
ul.box-list > li:last-child { margin-right: 0; }
ul.box-list > li:nth-child(5n) { margin-right: 0; }
ul.box-list > li.star-box-wrap { width: 100%; }
ul.box-list > li.star-box-wrap li.clearfix { display: block; height: 0; width: 100%; }
ul.box-list > li .box { background: #fff; border: 1px solid #dee3eb; border-radius: 10px; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);} /*  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;  */
ul.box-list > li .box:hover { border-color: #b9ccea; box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2); background: #ecf3ff; }
ul.box-list > li .box.add-box { border-color: #b9ccea; background: #ecf3ff; text-align: center; letter-spacing: 0; }
ul.box-list > li .box.add-box a { display: block; height: 100%; width: 100%; font-size: 1.5rem; font-weight: 500; color: #7192C8; padding: 55px 0; }
ul.box-list > li .box.add-box a img { width: 22px; margin-right: 5px; }
ul.box-list > li .box .header-area { padding: 12px 12px 15px; position: relative; }
ul.box-list > li .box .header-area .portfolio-title { font-size: 1.5rem; font-weight: 800; padding-right: 50px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; line-height: 30px; max-height: 62px; margin-top: 3px;  padding-left:21px;}
ul.box-list > li .box .header-area .portfolio-title.all { padding-left: 0; }
ul.box-list > li .box .header-area .portfolio-title a { color: #000; position: relative; display: inline-block; height: 100%; }
ul.box-list > li .box .header-area .portfolio-title a:hover { color: #1652f0; }
ul.box-list > li .box .header-area .portfolio-title a:after { position: absolute; content: ''; width: 100%; height: 1px; background: #DDDDDD; left: 0; bottom: 0; }
ul.box-list > li .box .header-area .portfolio-title a:hover:after { position: absolute; content: ''; width: 100%; height: 1px; background: rgba(22,82,240,0.8); left: 0; bottom: 0; }
ul.box-list > li .box .header-area .portfolio-setting-info { margin-top: 10px; }
ul.box-list > li .box .header-area .portfolio-setting-info .label { font-size: 1.1rem; height: 18px; line-height: 18px; float: left; margin-right: 5px; }
ul.box-list > li .box .header-area .portfolio-setting-info .label:last-child { margin-right: 0; }
ul.box-list > li .box .header-area .portfolio-setting-info .owner { float: right; font-size: 1rem; letter-spacing: 0; color: #aaaaaa; line-height: 18px; }
ul.box-list > li .box .header-area .context-menu ul.menu-wrap li { width: 100%; }
ul.box-list > li .box .content-area { background: #f8f8f8; border-top: 1px solid #e6eaf1; border-bottom: 1px solid #e6eaf1; padding: 20px 15px; transition: background .25s ease,border-color .25s ease; }
ul.box-list > li .box:hover .content-area { border-color: #b9ccea; background: #fff; }
ul.box-list > li .box .content-area .content-area-title { letter-spacing: 0; font-size: 1.25rem; display: block; margin-bottom: 10px; font-weight: 600; color: #555; }

ul.box-list > li .box .content-area .content-info { font-size: 12px; color: #555; font-weight: 400; margin-top: 15px; white-space: pre-line; word-break: break-all; }
ul.box-list > li .box .content-area .content-info.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.box-list > li .box .content-area .content-info img { width: 14px; height: 14px; margin-top: 2px; margin-right: 3px; opacity: 0.7; }
ul.box-list > li .box .content-area .content-info-more { font-size: 12px; text-align: right; }
ul.box-list > li .box .content-area .content-info-more a { color: #7192C8; }
ul.box-list > li .box .content-area .content-info-more a:hover { text-decoration: underline; }
ul.box-list > li .box .hashtag-area { padding: 12px 12px 15px; word-break: break-all; }
ul.box-list > li .box .hashtag-area a { font-size: 1.2rem; letter-spacing: 0; color: #aaa; margin-right: 2px; font-weight: 300; }
ul.box-list > li .box .hashtag-area a:hover { color: #1652f0; }

.tool-wrap { position: absolute; right: 5px; top: 18px; }
.tool-wrap .star-toggle { display: inline-block; margin-top: 5px; }
.tool-wrap .tool-btn { width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; outline:0; transition: background .25s ease; vertical-align:top; }
.tool-wrap .tool-btn img { width: 80%; vertical-align: top; opacity: 0.2; transition: opacity .25s ease; }
.tool-wrap .tool-btn:hover { background: #e0e6ec; }
.tool-wrap .tool-btn:hover img { opacity: 0.4; }
.portfolio-list-style-wrap .table-wrap table tr td .tool-wrap {position:relative; top:-2px;right:3px;}

/* subject ico */
.subject-wrap { position: relative; width: 100%; }
.subject-wrap .subject { float: left; width: 50%; margin-top: 10px; }
.subject-wrap .subject-ico.text {position:relative; top:-4px}
.subject-wrap .subject-full-name {display:inline-block; white-space:nowrap; text-overflow: ellipsis; width: calc(100% - 72px); overflow: hidden; color: #000; }
.subject-wrap .subject:nth-child(2n) { padding-left: 5px; }
.subject-wrap .subject:nth-child(2n-1) { padding-right: 5px; }
.subject-wrap .show .subject:nth-child(1),
.subject-wrap .show .subject:nth-child(2) { margin-top: 0; }
.subject-wrap .hide { display: none; }
.subject-wrap .show { display: block; }
.subject-wrap.open .hide { display: block; }
.subject-wrap .subject .count { float: right; background: #e6eaf1; padding: 0 10px; border-radius: 20px; font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 16px; height: 16px; margin-top: 1px; }

.subject-wrap .more-wrap { float: left; width: 100%; text-align: center; margin-top: 15px; background: #e6eaf1; border-radius: 10px; line-height: 12px; height: 20px; font-size: 14px; font-weight: 600; color: #9399a5; cursor: pointer; transition: background .25s ease; }
.subject-wrap .more-wrap img { width: 20px; height: 20px; transform: rotate(0deg); }
.subject-wrap .more~.more-wrap img { width: 20px; height: 20px; transform: rotate(180deg); }
.subject-wrap .more-wrap:hover { background: #dce2e7; }
.subject-wrap.open .more-wrap img { transform: rotate(180deg); }

/* 탭메뉴 */
.page-tab {margin-bottom:20px; position: relative}
.page-tab ul { position:relative; overflow: hidden; height: 37px; font-size:14px; z-index: 1; }
.page-tab ul:after {content:''; position:absolute; width:100%; height:1px; background:#1652f0; bottom:0; left:0; z-index: -1;}
.page-tab ul li {position:relative; display: inline-block; height:37px; }
.page-tab ul li a {min-width:80px; display: block; color: #000; line-height: 35px; border:1px solid #d7dde6; border-right:none; border-bottom:1px solid #1652f0; text-align: center; background:#d7dde6; padding:0 35px; font-size:1.3rem; border-radius: 5px 5px 0 0; font-weight: 600; transition:  background .2s, border-color .2s;}
.page-tab ul li:hover a { background: #cdd3dc; border-color: #cdd3dc; border-bottom-color: #1652f0; }
.page-tab ul li:last-child a { border-right: 1px solid #dee3eb; }
.page-tab ul li.select a {background:#eff3f7; border-bottom-color: #eff3f7; border:1px solid #1652f0; border-bottom:1px solid #eff3f7; color: #1652f0; }

/* 탭메뉴 새 포트폴리오 버튼 */
.create-new-wrap {margin-right: 5px; position: absolute; top: 0; right: 0; z-index: 9;}
.create-new-wrap a span.create-button {color: #7192C8; border: 1px solid #b9ccea; background-color: #ecf3ff; font-size: 13px; padding: 5px 10px; border-radius: 5px; font-weight: 500; box-shadow: 3px 3px 3px rgb(0 0 0 / 5%); transition: background-color .3s, border-color .3s, color .3s}
.create-new-wrap a span.create-button:hover {background-color: #4c75e2; border-color: #4c75e2; color: #fff;}




/* 보기 방식 */
.view-type { position: absolute; top: 0; right: 0; }
.view-type:after { content: ''; position: absolute; top: 5px; left: -16px; width: 1px; height: 20px; background: #cbcbcb; }
.view-type span.tit { display: inline-block; margin-right: 10px; font-size: 1.3rem; vertical-align: top; position: relative; top: 5px; font-weight: 900; }
.view-type a { width: 30px; height: 30px; position: relative; background: #fff; border: 1px solid #dee3eb; border-radius: 5px; display: inline-block; }
.view-type a img { height: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: .3; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.view-type a:hover img,
.view-type a.select img { opacity: 1; filter: grayscale(0); }


/* 리스트 형 */
.portfolio-list-style-wrap .box {background: #fff; border: 1px solid #dee3eb; border-radius: 10px; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05); padding:15px; height: 600px; overflow-y: auto;  -ms-overflow-style: none;  scrollbar-width: none; } /*transition: box-shadow .25s ease, border-color .25s ease, background .25s ease; */
.portfolio-list-style-wrap .box::-webkit-scrollbar { display: none; }


.portfolio-list-style-wrap .tool-wrap .context-menu {position: absolute; left:26px;top:8px}
.portfolio-list-style-wrap .tool-wrap .context-menu.last { top: -69px; }
.portfolio-list-style-wrap .box .table-wrap table tbody td {position: relative; padding: 10px 5px;}
.portfolio-list-style-wrap .star-toggle {position: static;}

.table-wrap table tr th { position: sticky !important; top: 0; z-index: 9; background: #fff; }
.table-wrap table tr th .align-btn { margin-right: 0; margin-left:17px; }
.table-wrap table tr th.name .align-btn {margin-left:0}
.table-wrap table tr th.name {width:350px;}
.table-wrap table tr th.public {width:100px;}
.table-wrap table tr th.tool {width:100px;}
.table-wrap table tr th.tag {width: 450px;}
.table-wrap table tr th.tool .tit { position: relative; top:-2px }
.table-wrap table tr th.txt-right {padding:17px 5px}
.table-wrap table tr th {color:#7d8796; font-size:1.3rem; font-weight: 500;}
.table-wrap table tr.hg-pin {background-color: #e3edfd;}

.table-wrap table tr td.td-tools > div.pin-toggle,
.table-wrap table tr td.td-tools > div.star-toggle,
.table-wrap table tr td.td-tools > div.tool-wrap {display:inline-block}
.table-wrap table tr td.tag-td > div.hashtag-area {width:450px; text-overflow: ellipsis; overflow:hidden; white-space: nowrap;;}
.table-wrap table tr td.name span.list-ellipsis { width:350px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block}
.table-wrap table tr td.name:hover span.view-layer { display: inline; }
.table-wrap table tr td.name span.view-layer { display: none; position: absolute;z-index: 3;left: 0;top:35px;width: 100%;background: rgba(16,21,78,0.85);color: #fff;font-size: 1.2rem;letter-spacing: 0;font-weight: 100;padding: 8px 10px; line-height: 15px; border-radius: 3px;cursor: default;transition: top .25s ease; white-space: normal;}
.portfolio-list-style-wrap .table-wrap table tr td .pin-toggle {top:15px; left:2px}
.portfolio-list-style-wrap  .hashtag-area a { font-size: 1.2rem; letter-spacing: 0; font-weight: 400; margin-right: 3px; word-break: break-word;}
.portfolio-list-style-wrap  .hashtag-area a:hover { color: #1652f0; }

/* 서치 결과 페이지 */
.home .portfolio-wrap.portfolio-search-area-wrap .search-box{right:0}



/* 리스트형 도구 버튼 */

.portfolio-list-style-wrap .table-wrap table tr td .pin-toggle {position:relative; top:4px;left:0;}
.portfolio-list-style-wrap .table-wrap table tr td .star-toggle {position:relative; top:4px;}



/* 박스형 고정 핀 .pin-portfolio-wrap  */
.pin-portfolio-wrap { padding: 20px 20px 0; margin-bottom: 20px; background: #e0e6ec; border-radius: 10px;}


/* RnD 포트폴리오 */
.rnd-container .my-portfolio-wrap .content-container .home { background: #efeff7; }
.rnd-container .home .portfolio-wrap .search-box { background: #e0dff1; }
.rnd-container .page-tab ul:after { background: #7137ff; }
.rnd-container .page-tab ul li a { border-bottom-color: #7137ff; background: #d9d7e6; }
.rnd-container .page-tab ul li:hover a { background: #CDCBDC; }
.rnd-container .page-tab ul li.select a { border: 1px solid #7137ff; color: #7137ff; border-bottom-color: #eff3f7; background: #efeff7; }
.rnd-container .page-tab ul li.select:hover a { background: #efeff7; }
.rnd-container ul.box-list > li .box { border-color: #DED5F6; }
.rnd-container ul.box-list > li .box:hover { background: #ede4ff; border-color: #c7b9ea; }
.rnd-container ul.box-list > li .box .content-area { border-color: #DED5F6; }
.rnd-container ul.box-list > li .box:hover .content-area { border-color: #c7b9ea; }
.rnd-container ul.box-list > li .box.add-box { color: #8e71c8; border-color: #c7b9ea; background-color: #ebe9ff; }
.rnd-container ul.box-list > li .box.add-box a { color: #8e71c8; }
.rnd-container ul.box-list > li .box .hashtag-area a:hover { color: #a037fe; }
ul.box-list > li .box.rnd-box .header-area .portfolio-title,
.rnd-container ul.box-list > li .box .header-area .portfolio-title { margin-top: 0; position: relative; margin-left: 40px;}
ul.box-list > li .box.rnd-box .header-area .portfolio-title .pin-toggle,
.rnd-container ul.box-list > li .box .header-area .portfolio-title .pin-toggle { top: 5px; left: 0; }
ul.box-list > li .box.rnd-box .header-area .rnd-label,
.rnd-container ul.box-list > li .box .header-area .rnd-label { display: inline-block; font-size: 1.2rem; font-weight: 500; background: #6a4ce2; color: #fff; padding: 2px 8px; position: absolute; top: 0; left: 0; border-radius: 3px 0 3px 0; letter-spacing: 0;}
.rnd-container ul.box-list > li .box .header-area .portfolio-title a:hover { color: #a037fe; }
.rnd-container ul.box-list > li .box .header-area .portfolio-title a:hover:after { background: #a037fe; }
.rnd-container .list-title-new-wrap a span.create-button,
.rnd-container .create-new-wrap a span.create-button { color: #8e71c8; border-color: #c7b9ea; background-color: #ebe9ff; }
.rnd-container .list-title-new-wrap a span.create-button:hover,
.rnd-container .create-new-wrap a span.create-button:hover { background-color: #6a4ce2; border-color: #6a4ce2; color: #fff;}
.rnd-container .table-wrap table .hg-item:hover,
.rnd-container .table-wrap table tr.hg-pin,
.rnd-container .table-wrap table tr.hg-selected { background: #f2f0ff; }
.table-wrap table tr td.name span.list-ellipsis span.rnd-label,
.rnd-container .table-wrap table tr td.name span.list-ellipsis span.rnd-label { display: inline-block; font-size: 1.2rem; font-weight: 400; background: #6a4ce2; color: #fff; border-radius: 3px; margin-right: 3px; padding
: 0 8px; letter-spacing: 0;}