@charset "UTF-8";

/* 메인 UI 고도화 
 * 2026.07 ~
 */

/* 공통 */
.thumb {aspect-ratio: 16 / 9}

.slick-arrow,
.slick-slide {outline:none}
.slick-dots {position:relative; top:auto; right:auto; display:block; text-align:center; line-height:1}
.slick-dots li {display:inline-block; margin:0; vertical-align:top}
.slick-dots li:first-child {margin-left:0}
.slick-dots button {position:relative; width:25px; height:20px; overflow:hidden; color:transparent}
.slick-dots button::before {content:''; position:absolute; top:50%; left:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:5px; vertical-align:top; background:#ddd}
.slick-dots .slick-active button::before {background-color:#121212}

/* 메인 톱 */
.main-top-wrap img.icon--premium {vertical-align:-2px}
.main-top-wrap .news-tit {-webkit-line-clamp:2}
.main-top-wrap .thumb {width:228px}
.main-top-wrap [data-width="552"] .thumb {width:552px; height:auto}
.main-top-wrap [data-width="552"] img.icon--premium {vertical-align:3px}
.main-top-wrap .news-item-group {gap:20px}

/* 구독신청 배너 */
.premium_payment_info {margin:40px 0}
.premium_payment_info > a {display:block}
.premium_payment_info > a img {width:100%; max-height:300px; object-fit:contain}
.premium_payment_info > a img[src*="banner-promotion-20201229-1.jpg"] {background-color:#FAFAFA}
.premium_payment_info > a img[src*="banner-promotion-20201229-2.jpg"] {background-color:#0A9FEB}

/* aside */
.aside-news-list .news-item:not(.column) {align-items:center}
.aside-news-list .news-tit {-webkit-line-clamp:2}

.aside-component .module-tit-wrap {border:none; padding:0; margin-bottom:16px}
.aside-component .module-tit-wrap a:hover {text-underline-offset:3px}
.aside-component .aside-news-list > li:first-child {padding-top:0}
.aside-component .aside-news-list > li:last-child {padding-bottom:0}

/* aside: 매거진 지난 호 보기 */
.aside-magazinelist .magazinelist-slide {padding:40px 0 20px; border-radius:8px; background:rgb(240,225,210); background:linear-gradient(0deg, rgba(240,225,210,1) 50%, rgba(246,238,232,1) 50%)}
.aside-magazinelist .magazinelist-slide .thumb {position:relative; width:140px; height:187px; margin:0 auto}
.aside-magazinelist .magazinelist-slide .thumb img {width:140px; height:187px; object-fit:cover}
.aside-magazinelist .magazinelist-slide .thumb::before {content:''; position:absolute; z-index:-1; left:70px; bottom:2px; width:100%; height:12%; box-shadow:-80px 0 10px rgba(124,126,114,.5); -webkit-transform:skew(60deg); -moz-transform:skew(60deg); -ms-transform:skew(60deg); -o-transform: skew(60deg); transform:skew(60deg); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%}
.aside-magazinelist .magazinelist-slide .thumb::after {content:''; position:absolute; z-index:-1;content:''; position:absolute; z-index:-1; left:50%; bottom:-1px; width:150px; height:2px; margin-left:-75px; background:#5f5753; filter:blur(3px)}
.aside-magazinelist .magazinelist-slide .news-tit {margin:12px 0 13px; font-size:15px; text-align:center}
.aside-magazinelist .slick-dots button::before {background:#fff}
.aside-magazinelist .slick-dots .slick-active button::before {background-color:#121212}
.aside-magazinelist .btn-subscription {position:absolute; bottom:30px; left:50%; display:inline-flex; align-items:center; height:36px; border:1px solid #777; border-radius:5px; padding:0 17px; box-sizing:border-box; transform:translateX(-50%); font-size:15px}
/* aside: 핫스톡 */
.aside-hotstock .aside-news-list > li:nth-child(2) .thumb {width:120px}

/* 서브 */
.list_loading {display:none; margin:40px 0; text-align:center}
.list_loading img {width:70px}

.btn_more_wrap {margin:40px 0; text-align:center}
.btn_more {display:inline-block; min-width:410px; height:45px; border:1px solid #ddd; border-radius:8px; font-weight:bold; font-size:15px; box-sizing:border-box}
.btn_more:before {content:''; display:inline-block; height:43px; width:1px; vertical-align:-15px}
/* 서브: 바이오인사이트 기업정보 */
.contents-infobox {margin-bottom:35px; padding:25px 30px; border-radius:10px; background:#f7f7f7}
.contents-infobox .tit-page {display:block; margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid #ddd; font-weight:bold; font-size:19px}
.corporation-search dl + dl {margin-top:15px}
.corporation-search dl {font-size:16px; line-height:1.2}
.corporation-search dt,
.corporation-search dd {float:left; box-sizing:border-box}
.corporation-search dt {width:100px}
.corporation-search dt::before {content:''; display:inline-block; width:2px; height:2px; margin-right:8px; background:#121212; vertical-align:4px}
.corporation-search dd {width:calc(100% - 100px)}
.corporation-search dl::after {content:''; display:block; clear:both}
.corporation-search input[type="checkbox"] {width:16px; height:16px; margin-right:4px; vertical-align:-2px}
.corporation-search .inp-text {display:inline-block; width:100%; height:40px; padding:0 15px; border:1px solid #ddd; border-radius:6px; font-size:16px; line-height:38px; vertical-align:middle; outline:none; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing:0}
.corporation-search .inp-text::placeholder {color:#666}
.corporation-search .inp-text:-ms-input-placeholder {color:#666}
.corporation-search .inp-text::-ms-input-placeholder {color:#666}
.corporation-search .search-type label {vertical-align:top; cursor:pointer}
.corporation-search .search-type label + label {margin-left:26px}
.corporation-search .search-keyword dt {line-height:38px}
.corporation-search .btn-wrap {margin-top:20px; text-align:center}
.corporation-search .btn-wrap .btn-corporation-search {width:140px; height:37px; padding:0 15px; border-radius:6px; background:#4D71C2; color:#fff; font-size:16px; text-align:center; box-sizing:border-box}
.corporation-search .btn-wrap .btn-corporation-search:before {content:''; display:inline-block; height:100%; width:1px; vertical-align:-13px}
.corporation-detail .corp-name {margin-bottom:20px; font-weight:bold; font-size:32px}
.corporation-detail .corp-site,
.corporation-detail .corp-addr {margin-top:7px; font-size:15px}
.corporation-detail .corp-site::before,
.corporation-detail .corp-addr::before {content:''; display:inline-block; width:18px; height:22px; margin:0 10px 0 5px; vertical-align:middle}
.corporation-detail .corp-site::before {background:url('https://hkstatic.hankyung.com/resource/www/bioinsight/img/icon-site.svg') no-repeat 50% 0/contain}
.corporation-detail .corp-addr::before {background:url('https://hkstatic.hankyung.com/resource/www/bioinsight/img/icon-map.svg') no-repeat 50% 0/contain}
.corporation-detail .corp-site a {color:#152e66; letter-spacing:0}
.corporation-detail .corp-addr {color:var(--hk-text-secondary)}
.corporation-detail .corp-info {margin-top:15px; padding:8px 24px; background:#fff; border-radius:10px;}
.corporation-detail .corp-info dl {padding:8px 0; font-size:15px}
.corporation-detail .corp-info dt,
.corporation-detail .corp-info dd {float:left}
.corporation-detail .corp-info dt {width:115px}
.corporation-detail .corp-info dd {width:calc(100% - 115px)}
.corporation-detail .corp-info dl::after {content:''; display:block; clear:both}

.nodata {padding:50px 0; font-size:16px; text-align:center}
.corp-list-wrap {font-size:16px}
.corp-list {margin:0 -10px 20px}
.corp-list > li {float:left; width:calc(25% - 20px); margin:10px; border:1px solid #ddd; border-radius:4px; text-align:center; box-sizing:border-box; overflow:hidden;}
.corp-list > li .corp-name {height:54px; padding:0 10px; border-bottom:1px solid #ddd; overflow:hidden; font-weight:bold; font-size:17px; line-height:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box}
.corp-list > li .corp-info {position:relative; height:180px; padding:20px 30px; box-sizing:border-box}
.corp-list > li .corp-info dl + dl {margin-top:10px}
.corp-list > li .corp-info dt {float:left; font-weight:bold}
.corp-list > li .corp-info dd {float:right}
.corp-list > li .corp-info dl::after {content:''; display:block; clear:both}
.corp-list > li .corp-info .company-services {position:absolute; bottom:20px; left:30px; right:30px; padding:17px 0 0; border-top:1px solid #ddd; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px}
.corp-list > li .rel-link {height:44px; background:#f7f7f7;}
.corp-list > li .btn-view-news {display:block; height:44px; padding-top:12px; font-size:14px; box-sizing:border-box}
.corp-list > li .rel-info {display:table; table-layout:fixed; width:100%; background:#f7f7f7}
.corp-list > li .rel-info > a {display:table-cell; height:44px; vertical-align:middle; font-size:14px}
.corp-list::after {content:''; display:block; clear:both}

.pay-service-box {width:530px; margin:20px auto; padding:40px; border:1px solid #ddd; border-radius:10px; box-shadow:5px 5px 15px rgba(0,0,0,0.1); box-sizing:border-box; font-size:15px; text-align:center}
.pay-service-info dt {font-weight:bold; font-size:28px}
.pay-service-info dd {margin-top:10px; font-size:17px}
.pay-service-info .txt {line-height:1.47}
.pay-service-info .btns {margin-top:25px}
.pay-service-info .btns .btn {display:inline-block; min-width:170px; height:50px; margin:0 3px; padding:0 10px; border-radius:8px; color:#fff; font-size:17px; text-align:center; background-color:#5c7bc2}
.pay-service-info .btns .btn::before {content:''; display:inline-block; width:1px; height:50px; vertical-align:-20px}
.pay-service-info .join-link {margin-top:20px}
.pay-service-info .join-link > a::before {content:'|'; margin:0 20px 0 16px; color:#ddd}
.pay-service-info .join-link > a:first-of-type::before {display:none}

.corp-news-list > li {display:table; width:100%; table-layout:fixed; padding:20px 0}
.corp-news-list > li > div {display:table-cell; vertical-align:top}
.corp-news-list > li:nth-child(5n) {padding-bottom:30px; border-bottom:1px solid #e5e5e5}
.corp-news-list > li:nth-child(5n + 1) {padding-top:30px}
.corp-news-list > li:last-child {padding-bottom:0; border-bottom:none}
.corp-news-list .thumb {width:266px; text-align:center}
.corp-news-list .thumb > a {display:block; width:246px; height:154px; overflow:hidden; vertical-align:top}
.corp-news-list .thumb img {max-width:246px; max-height:154px; /*width:100%; height:100%;*/ object-fit:cover; object-position:top}
.corp-news-list .txt-cont {padding-right:15px}
.corp-news-list .txt-cont .news-tit {max-height:46px; margin-top:-3px; font-weight:bold; font-size:17px; line-height:23px; -webkit-line-clamp:2; word-break:break-all}
.corp-news-list .txt-cont .badge-corp {display:inline-block; height:20px; margin-right:4px; padding:0 6px; border-radius:4px; background:#ff761b; color:#fff; font-size:11px; box-sizing:border-box; overflow:hidden; vertical-align:-4px; line-height:1}
.corp-news-list .txt-cont .badge-corp::before {content:''; display:inline-block; height:100%; width:1px; vertical-align:-6px}
.corp-news-list .txt-cont .lead {margin-top:7px; /*max-height:42px;*/ line-height:21px; -webkit-line-clamp:2}
.corp-news-list .article-info {position:relative; top:-2px; width:120px; padding-left:15px; border-left:1px solid #e5e5e5}
.corp-news-list .article-info .date {letter-spacing:0}

/* 유료 월 */
html:has(.layer-fullpopup.show),
body:has(.layer-fullpopup.show) {overflow:hidden}

.layer-fullpopup {visibility:hidden; z-index:-1; opacity:0; position:fixed; top:0; right:0; bottom:0; left:0; background:linear-gradient(0deg, rgba(0,0,0,.9) 50%, rgba(0,0,0,0.5) 100%)}
.layer-fullpopup.show {visibility:visible; z-index:999999999; opacity:1; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:all ease-in .3s}
.layer-offcanvas {position:fixed; display:flex; flex-direction:column; justify-content:center;  background:#fff}
.layer-offcanvas .para {font-size:18px}
.layer-offcanvas .txt-point {color:#ff761b}
.layer-offcanvas .txt-point2 {color:#00bbb4}
.layer-offcanvas .txt-underline {/*text-decoration:underline*/ border-bottom:1px solid}
.layer-offcanvas a.txt-underline,
.layer-offcanvas a.txt-underline:hover {text-decoration:none}
.layer-offcanvas .offcanvas-foot {margin-top:25px}
.layer-offcanvas .offcanvas-foot .btn {display:inline-block; min-width:170px; line-height:48px; margin:0 3px; padding:0 10px 2px; border-radius:25px; color:#fff; font-size:18px; text-align:center; box-sizing:border-box}
.layer-offcanvas .offcanvas-foot .btn-pramary {background-color:#ff761b}
.layer-offcanvas .offcanvas-foot .btn-secondary {background-color:#666}
.layer-offcanvas .offcanvas-foot .btn-subscribe {background-color:#00bbb4}
.layer-offcanvas .offcanvas-foot .btn-hk {background-color:#142C67}
.layer-offcanvas .offcanvas-etc {margin-top:27px}
.layer-offcanvas .btn-link {font-size:16px}
.layer-offcanvas .btn-link::after {content:''; display:inline-block; width:6px; height:6px; margin-left:6px; border-top:1px solid #121212; border-right:1px solid #121212; transform:rotate(45deg); vertical-align:1px}
.layer-offcanvas.bottom {right:0; bottom:-100%; left:0; padding:50px 0; text-align:center}
.layer-fullpopup.show .layer-offcanvas.bottom {bottom:0; transition:bottom 1s}
@media all and (min-height:900px){
	.layer-fullpopup.show .layer-offcanvas.bottom {top:690px}
}